chore: revamp layout props (minify syntax)

src/index.ts

@@ -3,7 +3,7 @@ import p from './spacing/padding';
 import m from './spacing/margin';
 
 // Layout
-import aspect_ratio from './layout/aspect-ratio';
+import aspect from './layout/aspect';
 import object_fit from './layout/object-fit';
 import display from './layout/display';
 import direction from './layout/direction';
@@ -50,7 +50,7 @@ export {
   object_fit,
   display,
   direction,
-  aspect_ratio,
+  aspect,
   z,
   pos,
   overflow,

src/layout/aspect.ts

@@ -0,0 +1,47 @@
+import type { AspectRatio } from '../types/layout';
+
+const aspectRatioValues: { [key: string]: number | string } = {
+  auto: 'auto',
+  square: 1,
+  video: 16 / 9,
+};
+
+const getAspectRatioValue = (key: string | number): number | string => {
+  if (typeof key === 'number') return key;
+  if (key === 'auto') return 'auto';
+  if (!isNaN(Number(key))) return Number(key);
+
+  // Handle fractional strings like '1/3'
+  const fractionMatch = key.match(/^(\d+)\/(\d+)$/);
+  if (fractionMatch) {
+    const numerator = Number(fractionMatch[1]);
+    const denominator = Number(fractionMatch[2]);
+    return numerator / denominator;
+  }
+
+  const value = aspectRatioValues[key];
+  if (value === undefined) throw new Error(`Invalid aspect ratio key: ${key}`);
+  return value;
+};
+
+const aspect = {
+  custom_: (key: string | number): AspectRatio => {
+    return { aspectRatio: getAspectRatioValue(key) };
+  },
+} as { [key: string]: AspectRatio } & {
+  custom_: (key: string | number) => AspectRatio;
+};
+
+Object.keys(aspectRatioValues).forEach((key) => {
+  aspect[key] = { aspectRatio: getAspectRatioValue(key) };
+});
+
+// Example usage
+// const autoAspectRatio = aspect.auto; // { aspectRatio: 'auto' }
+// const squareAspectRatio = aspect.square; // { aspectRatio: 1 }
+// const videoAspectRatio = aspect.video; // { aspectRatio: 16 / 9 }
+// const customAspectRatio = aspect.custom_('4/3'); // { aspectRatio: 4 / 3 }
+// const customAspectRatioNumber = aspect.custom_(3); // { aspectRatio: 3 }
+// const customAspectRatioString = aspect.custom_('3'); // { aspectRatio: 3 }
+
+export default aspect;

src/layout/display.ts

@@ -1,22 +1,10 @@
 import type { Display } from '../types/layout';
 
-const displayValues: { [key: string]: Display['display'] } = {
-  hidden: 'none',
-  flex: 'flex',
+const display: { [key: string]: Display } = {
+  hidden: { display: 'none' },
+  flex: { display: 'flex' },
 };
 
-const getDisplayValue = (key: string): Display => {
-  const value = displayValues[key];
-  if (value === undefined) throw new Error(`Invalid display key: ${key}`);
-  return { display: value };
-};
-
-const display: { [key: string]: Display } = {};
-
-Object.keys(displayValues).forEach((key) => {
-  display[key] = getDisplayValue(key);
-});
-
 // Example usage
 // const hiddenDisplay = display.hidden; // { display: 'none' }
 // const flexDisplay = display.flex; // { display: 'flex' }

src/layout/position.ts

@@ -1,15 +1,11 @@
 import type { PositionValue } from '../types/layout';
 
-const positions = {
+const positions: { [key: string]: number } = {
   '0': 0,
   'px': 1,
-  '0.5': 2,
   '1': 4,
-  '1.5': 6,
   '2': 8,
-  '2.5': 10,
   '3': 12,
-  '3.5': 14,
   '4': 16,
   '5': 20,
   '6': 24,
@@ -36,25 +32,6 @@ const positions = {
   '72': 288,
   '80': 320,
   '96': 384,
-  'auto': 'auto',
-  '1/2': '50%',
-  '1/3': '33.333333%',
-  '2/3': '66.666667%',
-  '1/4': '25%',
-  '2/4': '50%',
-  '3/4': '75%',
-  'full': '100%',
-};
-
-// Magik
-const generatePositionProperties = (
-  key: string
-): { [key: string]: PositionValue } => {
-  const values: { [key: string]: PositionValue } = {};
-  for (const [posKey, posValue] of Object.entries(positions)) {
-    values[`${key}_${posKey.replace('/', '_')}`] = { [key]: posValue };
-  }
-  return values;
 };
 
 // Now explicitly include the custom methods and the index signature for dynamically generated properties
@@ -63,10 +40,6 @@ const pos: {
   absolute: { position: string };
   fixed: { position: string };
   sticky: { position: string };
-  r_custom: (value: number) => PositionValue;
-  t_custom: (value: number) => PositionValue;
-  l_custom: (value: number) => PositionValue;
-  b_custom: (value: number) => PositionValue;
   [key: string]:
     | PositionValue
     | { position: string }
@@ -78,30 +51,43 @@ const pos: {
   fixed: { position: 'fixed' },
   sticky: { position: 'sticky' },
 
-  ...generatePositionProperties('right'),
-  ...generatePositionProperties('top'),
-  ...generatePositionProperties('left'),
-  ...generatePositionProperties('bottom'),
-
-  r_custom(value: number): PositionValue {
-    return { right: value };
+  r_(value: number | string): PositionValue {
+    return { right: Number(value) };
   },
-  t_custom(value: number): PositionValue {
-    return { top: value };
+  t_(value: number): PositionValue {
+    return { top: Number(value) };
   },
-  l_custom(value: number): PositionValue {
-    return { left: value };
+  l_(value: number): PositionValue {
+    return { left: Number(value) };
   },
-  b_custom(value: number): PositionValue {
-    return { bottom: value };
+  b_(value: number): PositionValue {
+    return { bottom: Number(value) };
   },
 };
 
+Object.keys(positions).forEach((posKey) => {
+  pos[`t_${posKey}`] = {
+    top: positions[posKey],
+  } as PositionValue;
+
+  pos[`r_${posKey}`] = {
+    right: positions[posKey],
+  } as PositionValue;
+
+  pos[`b_${posKey}`] = {
+    bottom: positions[posKey],
+  } as PositionValue;
+
+  pos[`l_${posKey}`] = {
+    left: positions[posKey],
+  } as PositionValue;
+});
+
 // Example usage
 // console.log(pos.relative); // { position: 'relative' }
 // console.log(pos.right_1); // { right: 4 }
 // console.log(pos.top_2); // { top: 8 }
-// console.log(pos.left_1_2); // { left: '50%' }
-// console.log(pos.b_custom(20)); // { bottom: 20 }
+// console.log(pos.left_1); // { left: '50%' }
+// console.log(pos.b_(20)); // { bottom: 20 }
 
 export default pos;

src/layout/z-index.ts

@@ -1,20 +1,27 @@
-const zIndex = {
-  z_0: { zIndex: 0 },
-  z_10: { zIndex: 10 },
-  z_20: { zIndex: 20 },
-  z_30: { zIndex: 30 },
-  z_40: { zIndex: 40 },
-  z_50: { zIndex: 50 },
-  z_auto: { zIndex: 'auto' },
+const z = {
+  index_0: { zIndex: 0 },
+  index_10: { zIndex: 10 },
+  index_20: { zIndex: 20 },
+  index_30: { zIndex: 30 },
+  index_40: { zIndex: 40 },
+  index_50: { zIndex: 50 },
+  index_auto: { zIndex: 'auto' },
+
+  index_(value: number | string): { zIndex: number | 'auto' } {
+    if (value === 'auto') {
+      return { zIndex: 'auto' };
+    } else if (!isNaN(Number(value))) {
+      return { zIndex: Number(value) };
+    } else {
+      throw new Error('Invalid zIndex value');
+    }
+  },
 };
 
 // Example usage
-// console.log(zIndex.z_0); // { zIndex: 0 }
-// console.log(zIndex.z_10); // { zIndex: 10 }
-// console.log(zIndex.z_20); // { zIndex: 20 }
-// console.log(zIndex.z_30); // { zIndex: 30 }
-// console.log(zIndex.z_40); // { zIndex: 40 }
-// console.log(zIndex.z_50); // { zIndex: 50 }
-// console.log(zIndex.z_auto); // { zIndex: 'auto' }
+// console.log(z.index_(10)); // { zIndex: 10 }
+// console.log(z.index_('auto')); // { zIndex: 'auto' }
+// console.log(z.index_('20')); // { zIndex: 20 }
+// console.log(z.index_('invalid')); // Error: Invalid zIndex value
 
-export default zIndex;
+export default z;