typewritingclass 0.2.0 → 0.2.2

package/src/utilities/backgrounds.ts

@@ -2,6 +2,7 @@ import type { StyleRule } from '../types.ts'
 import type { DynamicValue } from '../dynamic.ts'
 import { createRule, createDynamicRule } from '../rule.ts'
 import { isDynamic } from '../dynamic.ts'
+import { resolveColor } from './colors.ts'
 
 export function bgAttachment(value: string): StyleRule {
   return createRule({ 'background-attachment': value })
@@ -51,7 +52,7 @@ export function bgImage(value: string | DynamicValue): StyleRule {
 
 export function bgGradient(direction: string = 'to right'): StyleRule {
   return createRule({
-    'background-image': `linear-gradient(${direction}, var(--twc-gradient-from, transparent), var(--twc-gradient-via, transparent), var(--twc-gradient-to, transparent))`,
+    'background-image': `linear-gradient(${direction}, var(--twc-gradient-stops, var(--twc-gradient-from, transparent), var(--twc-gradient-to, transparent)))`,
   })
 }
 
@@ -62,17 +63,17 @@ export function gradientFrom(color: string | DynamicValue): StyleRule {
       { [color.__id]: String(color.__value) },
     )
   }
-  return createRule({ '--twc-gradient-from': color })
+  return createRule({ '--twc-gradient-from': resolveColor(color) })
 }
 
 export function gradientVia(color: string | DynamicValue): StyleRule {
   if (isDynamic(color)) {
     return createDynamicRule(
-      { '--twc-gradient-via': `var(${color.__id})` },
+      { '--twc-gradient-via': `var(${color.__id})`, '--twc-gradient-stops': 'var(--twc-gradient-from, transparent), var(--twc-gradient-via), var(--twc-gradient-to, transparent)' },
       { [color.__id]: String(color.__value) },
     )
   }
-  return createRule({ '--twc-gradient-via': color })
+  return createRule({ '--twc-gradient-via': resolveColor(color), '--twc-gradient-stops': 'var(--twc-gradient-from, transparent), var(--twc-gradient-via), var(--twc-gradient-to, transparent)' })
 }
 
 export function gradientTo(color: string | DynamicValue): StyleRule {
@@ -82,5 +83,5 @@ export function gradientTo(color: string | DynamicValue): StyleRule {
       { [color.__id]: String(color.__value) },
     )
   }
-  return createRule({ '--twc-gradient-to': color })
+  return createRule({ '--twc-gradient-to': resolveColor(color) })
 }

package/src/utilities/borders.ts

@@ -1,8 +1,25 @@
 import type { StyleRule } from '../types.ts'
 import type { DynamicValue } from '../dynamic.ts'
 import { createRule, createDynamicRule, wrapWithSelectorTemplate } from '../rule.ts'
-import { DEFAULT as defaultRadius } from '../theme/borders.ts'
+import * as borderRadii from '../theme/borders.ts'
 import { isDynamic } from '../dynamic.ts'
+import { resolveColor } from './colors.ts'
+
+function px(value: string | number): string {
+  return typeof value === 'number' ? `${value}px` : value
+}
+
+const radiusMap: Record<string, string> = {
+  none: borderRadii.none, sm: borderRadii.sm, DEFAULT: borderRadii.DEFAULT,
+  md: borderRadii.md, lg: borderRadii.lg, xl: borderRadii.xl,
+  '2xl': borderRadii._2xl, '3xl': borderRadii._3xl, full: borderRadii.full,
+}
+
+function resolveRadius(value?: string | DynamicValue): string {
+  if (value == null) return borderRadii.DEFAULT
+  if (typeof value === 'string') return radiusMap[value] ?? value
+  return value as unknown as string // DynamicValue handled before this
+}
 
 /**
  * Sets the `border-radius` on all corners of an element.
@@ -49,7 +66,7 @@ export function rounded(value?: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   }
-  return createRule({ 'border-radius': (value as string | undefined) ?? defaultRadius })
+  return createRule({ 'border-radius': resolveRadius(value) })
 }
 
 /**
@@ -91,7 +108,7 @@ export function roundedT(value?: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   }
-  const v = (value as string | undefined) ?? defaultRadius
+  const v = resolveRadius(value)
   return createRule({ 'border-top-left-radius': v, 'border-top-right-radius': v })
 }
 
@@ -134,7 +151,7 @@ export function roundedB(value?: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   }
-  const v = (value as string | undefined) ?? defaultRadius
+  const v = resolveRadius(value)
   return createRule({ 'border-bottom-left-radius': v, 'border-bottom-right-radius': v })
 }
 
@@ -177,7 +194,7 @@ export function roundedL(value?: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   }
-  const v = (value as string | undefined) ?? defaultRadius
+  const v = resolveRadius(value)
   return createRule({ 'border-top-left-radius': v, 'border-bottom-left-radius': v })
 }
 
@@ -220,7 +237,7 @@ export function roundedR(value?: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   }
-  const v = (value as string | undefined) ?? defaultRadius
+  const v = resolveRadius(value)
   return createRule({ 'border-top-right-radius': v, 'border-bottom-right-radius': v })
 }
 
@@ -247,8 +264,8 @@ export function roundedR(value?: string | DynamicValue): StyleRule {
  * // CSS: border-width: 2px; border-style: solid;
  * ```
  */
-export function border(width?: string): StyleRule {
-  return createRule({ 'border-width': width ?? '1px', 'border-style': 'solid' })
+export function border(width?: string | number): StyleRule {
+  return createRule({ 'border-width': width != null ? px(width) : '1px', 'border-style': 'solid' })
 }
 
 /**
@@ -274,8 +291,8 @@ export function border(width?: string): StyleRule {
  * // CSS: border-top-width: 2px; border-style: solid;
  * ```
  */
-export function borderT(width?: string): StyleRule {
-  return createRule({ 'border-top-width': width ?? '1px', 'border-style': 'solid' })
+export function borderT(width?: string | number): StyleRule {
+  return createRule({ 'border-top-width': width != null ? px(width) : '1px', 'border-style': 'solid' })
 }
 
 /**
@@ -301,8 +318,8 @@ export function borderT(width?: string): StyleRule {
  * // CSS: border-right-width: 3px; border-style: solid;
  * ```
  */
-export function borderR(width?: string): StyleRule {
-  return createRule({ 'border-right-width': width ?? '1px', 'border-style': 'solid' })
+export function borderR(width?: string | number): StyleRule {
+  return createRule({ 'border-right-width': width != null ? px(width) : '1px', 'border-style': 'solid' })
 }
 
 /**
@@ -328,8 +345,8 @@ export function borderR(width?: string): StyleRule {
  * // CSS: border-bottom-width: 2px; border-style: solid;
  * ```
  */
-export function borderB(width?: string): StyleRule {
-  return createRule({ 'border-bottom-width': width ?? '1px', 'border-style': 'solid' })
+export function borderB(width?: string | number): StyleRule {
+  return createRule({ 'border-bottom-width': width != null ? px(width) : '1px', 'border-style': 'solid' })
 }
 
 /**
@@ -355,8 +372,8 @@ export function borderB(width?: string): StyleRule {
  * // CSS: border-left-width: 4px; border-style: solid;
  * ```
  */
-export function borderL(width?: string): StyleRule {
-  return createRule({ 'border-left-width': width ?? '1px', 'border-style': 'solid' })
+export function borderL(width?: string | number): StyleRule {
+  return createRule({ 'border-left-width': width != null ? px(width) : '1px', 'border-style': 'solid' })
 }
 
 /**
@@ -389,8 +406,8 @@ export function borderL(width?: string): StyleRule {
  * // CSS: box-shadow: 0 0 0 1px #3b82f6;
  * ```
  */
-export function ring(width?: string, color?: string): StyleRule {
-  const w = width ?? '3px'
+export function ring(width?: string | number, color?: string): StyleRule {
+  const w = width != null ? px(width) : '3px'
   const c = color ?? '#3b82f6'
   return createRule({ 'box-shadow': `0 0 0 ${w} ${c}` })
 }
@@ -404,7 +421,7 @@ export function roundedTL(value?: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   }
-  return createRule({ 'border-top-left-radius': (value as string | undefined) ?? defaultRadius })
+  return createRule({ 'border-top-left-radius': resolveRadius(value) })
 }
 
 export function roundedTR(value?: string | DynamicValue): StyleRule {
@@ -414,7 +431,7 @@ export function roundedTR(value?: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   }
-  return createRule({ 'border-top-right-radius': (value as string | undefined) ?? defaultRadius })
+  return createRule({ 'border-top-right-radius': resolveRadius(value) })
 }
 
 export function roundedBR(value?: string | DynamicValue): StyleRule {
@@ -424,7 +441,7 @@ export function roundedBR(value?: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   }
-  return createRule({ 'border-bottom-right-radius': (value as string | undefined) ?? defaultRadius })
+  return createRule({ 'border-bottom-right-radius': resolveRadius(value) })
 }
 
 export function roundedBL(value?: string | DynamicValue): StyleRule {
@@ -434,7 +451,7 @@ export function roundedBL(value?: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   }
-  return createRule({ 'border-bottom-left-radius': (value as string | undefined) ?? defaultRadius })
+  return createRule({ 'border-bottom-left-radius': resolveRadius(value) })
 }
 
 export function roundedSS(value?: string | DynamicValue): StyleRule {
@@ -444,7 +461,7 @@ export function roundedSS(value?: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   }
-  const v = (value as string | undefined) ?? defaultRadius
+  const v = resolveRadius(value)
   return createRule({ 'border-start-start-radius': v, 'border-end-start-radius': v })
 }
 
@@ -455,7 +472,7 @@ export function roundedSE(value?: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   }
-  const v = (value as string | undefined) ?? defaultRadius
+  const v = resolveRadius(value)
   return createRule({ 'border-start-end-radius': v, 'border-end-end-radius': v })
 }
 
@@ -466,7 +483,7 @@ export function roundedEE(value?: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   }
-  const v = (value as string | undefined) ?? defaultRadius
+  const v = resolveRadius(value)
   return createRule({ 'border-start-end-radius': v, 'border-end-end-radius': v })
 }
 
@@ -477,26 +494,28 @@ export function roundedES(value?: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   }
-  const v = (value as string | undefined) ?? defaultRadius
+  const v = resolveRadius(value)
   return createRule({ 'border-end-start-radius': v, 'border-start-start-radius': v })
 }
 
 // --- Directional border width utilities ---
 
-export function borderX(width?: string): StyleRule {
-  return createRule({ 'border-left-width': width ?? '1px', 'border-right-width': width ?? '1px', 'border-style': 'solid' })
+export function borderX(width?: string | number): StyleRule {
+  const w = width != null ? px(width) : '1px'
+  return createRule({ 'border-left-width': w, 'border-right-width': w, 'border-style': 'solid' })
 }
 
-export function borderY(width?: string): StyleRule {
-  return createRule({ 'border-top-width': width ?? '1px', 'border-bottom-width': width ?? '1px', 'border-style': 'solid' })
+export function borderY(width?: string | number): StyleRule {
+  const w = width != null ? px(width) : '1px'
+  return createRule({ 'border-top-width': w, 'border-bottom-width': w, 'border-style': 'solid' })
 }
 
-export function borderS(width?: string): StyleRule {
-  return createRule({ 'border-inline-start-width': width ?? '1px', 'border-style': 'solid' })
+export function borderS(width?: string | number): StyleRule {
+  return createRule({ 'border-inline-start-width': width != null ? px(width) : '1px', 'border-style': 'solid' })
 }
 
-export function borderE(width?: string): StyleRule {
-  return createRule({ 'border-inline-end-width': width ?? '1px', 'border-style': 'solid' })
+export function borderE(width?: string | number): StyleRule {
+  return createRule({ 'border-inline-end-width': width != null ? px(width) : '1px', 'border-style': 'solid' })
 }
 
 export function borderStyle(value: string): StyleRule {
@@ -505,8 +524,8 @@ export function borderStyle(value: string): StyleRule {
 
 // --- Outline utilities ---
 
-export function outlineWidth(value: string): StyleRule {
-  return createRule({ 'outline-width': value })
+export function outlineWidth(value: string | number): StyleRule {
+  return createRule({ 'outline-width': px(value) })
 }
 
 export function outlineColor(value: string | DynamicValue): StyleRule {
@@ -516,20 +535,20 @@ export function outlineColor(value: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   }
-  return createRule({ 'outline-color': value })
+  return createRule({ 'outline-color': resolveColor(value) })
 }
 
 export function outlineStyle(value: string): StyleRule {
   return createRule({ 'outline-style': value })
 }
 
-export function outlineOffset(value: string): StyleRule {
-  return createRule({ 'outline-offset': value })
+export function outlineOffset(value: string | number): StyleRule {
+  return createRule({ 'outline-offset': px(value) })
 }
 
-export function outline(width?: string, style?: string, color?: string): StyleRule {
+export function outline(width?: string | number, style?: string, color?: string): StyleRule {
   const decls: Record<string, string> = {}
-  decls['outline-width'] = width ?? '1px'
+  decls['outline-width'] = width != null ? px(width) : '2px'
   decls['outline-style'] = style ?? 'solid'
   if (color) decls['outline-color'] = color
   return createRule(decls)
@@ -552,11 +571,11 @@ export function ringColor(value: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   }
-  return createRule({ '--twc-ring-color': value })
+  return createRule({ '--twc-ring-color': resolveColor(value) })
 }
 
-export function ringOffsetWidth(value: string): StyleRule {
-  return createRule({ '--twc-ring-offset-width': value })
+export function ringOffsetWidth(value: string | number): StyleRule {
+  return createRule({ '--twc-ring-offset-width': px(value) })
 }
 
 export function ringOffsetColor(value: string | DynamicValue): StyleRule {
@@ -566,18 +585,18 @@ export function ringOffsetColor(value: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   }
-  return createRule({ '--twc-ring-offset-color': value })
+  return createRule({ '--twc-ring-offset-color': resolveColor(value) })
 }
 
 // --- Divide utilities (selector-template-based) ---
 
-export function divideX(width?: string): StyleRule {
-  const rule = createRule({ 'border-left-width': width ?? '1px', 'border-style': 'solid' })
+export function divideX(width?: string | number): StyleRule {
+  const rule = createRule({ 'border-left-width': width != null ? px(width) : '1px', 'border-style': 'solid' })
   return wrapWithSelectorTemplate(rule, '& > :not([hidden]) ~ :not([hidden])')
 }
 
-export function divideY(width?: string): StyleRule {
-  const rule = createRule({ 'border-top-width': width ?? '1px', 'border-style': 'solid' })
+export function divideY(width?: string | number): StyleRule {
+  const rule = createRule({ 'border-top-width': width != null ? px(width) : '1px', 'border-style': 'solid' })
   return wrapWithSelectorTemplate(rule, '& > :not([hidden]) ~ :not([hidden])')
 }
 
@@ -589,7 +608,7 @@ export function divideColor(value: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   } else {
-    rule = createRule({ 'border-color': value })
+    rule = createRule({ 'border-color': resolveColor(value) })
   }
   return wrapWithSelectorTemplate(rule, '& > :not([hidden]) ~ :not([hidden])')
 }

package/src/utilities/colors.ts

@@ -2,6 +2,30 @@ import type { StyleRule } from '../types.ts'
 import type { DynamicValue } from '../dynamic.ts'
 import { createRule, createDynamicRule } from '../rule.ts'
 import { isDynamic } from '../dynamic.ts'
+import * as colors from '../theme/colors.ts'
+
+const colorMap: Record<string, string> = {}
+const colorScales: Record<string, colors.ColorScale> = {
+  slate: colors.slate, gray: colors.gray, zinc: colors.zinc, neutral: colors.neutral,
+  stone: colors.stone, red: colors.red, orange: colors.orange, amber: colors.amber,
+  yellow: colors.yellow, lime: colors.lime, green: colors.green, emerald: colors.emerald,
+  teal: colors.teal, cyan: colors.cyan, sky: colors.sky, blue: colors.blue,
+  indigo: colors.indigo, violet: colors.violet, purple: colors.purple, fuchsia: colors.fuchsia,
+  pink: colors.pink, rose: colors.rose,
+}
+for (const [name, scale] of Object.entries(colorScales)) {
+  for (const [shade, hex] of Object.entries(scale)) {
+    colorMap[`${name}-${shade}`] = hex
+  }
+}
+colorMap['white'] = colors.white
+colorMap['black'] = colors.black
+colorMap['transparent'] = 'transparent'
+colorMap['current'] = 'currentColor'
+
+export function resolveColor(value: string): string {
+  return colorMap[value] ?? value
+}
 
 /**
  * Sets the background color of an element.
@@ -41,7 +65,7 @@ export function bg(color: string | DynamicValue): StyleRule {
       { [color.__id]: String(color.__value) },
     )
   }
-  return createRule({ 'background-color': color })
+  return createRule({ 'background-color': resolveColor(color) })
 }
 
 /**
@@ -82,7 +106,7 @@ export function textColor(color: string | DynamicValue): StyleRule {
       { [color.__id]: String(color.__value) },
     )
   }
-  return createRule({ color })
+  return createRule({ color: resolveColor(color) })
 }
 
 /**
@@ -123,5 +147,5 @@ export function borderColor(color: string | DynamicValue): StyleRule {
       { [color.__id]: String(color.__value) },
     )
   }
-  return createRule({ 'border-color': color })
+  return createRule({ 'border-color': resolveColor(color) })
 }

package/src/utilities/effects.ts

@@ -1,8 +1,20 @@
 import type { StyleRule } from '../types.ts'
 import type { DynamicValue } from '../dynamic.ts'
 import { createRule, createDynamicRule } from '../rule.ts'
-import { DEFAULT as defaultShadow } from '../theme/shadows.ts'
+import * as shadows from '../theme/shadows.ts'
 import { isDynamic } from '../dynamic.ts'
+import { resolveColor } from './colors.ts'
+
+const shadowMap: Record<string, string> = {
+  sm: shadows.sm, DEFAULT: shadows.DEFAULT, md: shadows.md,
+  lg: shadows.lg, xl: shadows.xl, '2xl': shadows._2xl,
+  inner: shadows.inner, none: shadows.none,
+}
+
+function resolveShadow(value?: string): string {
+  if (value == null) return shadows.DEFAULT
+  return shadowMap[value] ?? value
+}
 
 /**
  * Sets the `box-shadow` of an element.
@@ -50,7 +62,7 @@ export function shadow(value?: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   }
-  return createRule({ 'box-shadow': (value as string | undefined) ?? defaultShadow })
+  return createRule({ 'box-shadow': resolveShadow(value as string | undefined) })
 }
 
 /**
@@ -157,7 +169,7 @@ export function shadowColor(value: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   }
-  return createRule({ '--twc-shadow-color': value })
+  return createRule({ '--twc-shadow-color': resolveColor(value) })
 }
 
 export function mixBlendMode(value: string): StyleRule {

package/src/utilities/filters.ts

@@ -2,6 +2,20 @@ import type { StyleRule } from '../types.ts'
 import type { DynamicValue } from '../dynamic.ts'
 import { createRule, createDynamicRule } from '../rule.ts'
 import { isDynamic } from '../dynamic.ts'
+import { blur as blurSizes, dropShadow as dropShadowSizes } from '../theme/filters.ts'
+
+const blurMap: Record<string, string> = {
+  none: blurSizes.none, sm: blurSizes.sm, DEFAULT: blurSizes.DEFAULT,
+  md: blurSizes.md, lg: blurSizes.lg, xl: blurSizes.xl,
+  '2xl': blurSizes._2xl, '3xl': blurSizes._3xl,
+}
+
+const dropShadowMap: Record<string, string> = {
+  sm: dropShadowSizes.sm, DEFAULT: dropShadowSizes.DEFAULT,
+  md: dropShadowSizes.md, lg: dropShadowSizes.lg,
+  xl: dropShadowSizes.xl, '2xl': dropShadowSizes._2xl,
+  none: dropShadowSizes.none,
+}
 
 function filterRule(fn: string, value: string | DynamicValue, prop: 'filter' | 'backdrop-filter' = 'filter'): StyleRule {
   if (isDynamic(value)) {
@@ -16,6 +30,7 @@ function filterRule(fn: string, value: string | DynamicValue, prop: 'filter' | '
 // --- Filter utilities ---
 
 export function blur(value: string | DynamicValue = '8px'): StyleRule {
+  if (!isDynamic(value)) return filterRule('blur', blurMap[value] ?? value)
   return filterRule('blur', value)
 }
 
@@ -27,14 +42,15 @@ export function contrast(value: string | DynamicValue): StyleRule {
   return filterRule('contrast', value)
 }
 
-export function dropShadow(value: string | DynamicValue): StyleRule {
+export function dropShadow(value: string | DynamicValue = 'DEFAULT'): StyleRule {
   if (isDynamic(value)) {
     return createDynamicRule(
       { filter: `drop-shadow(var(${value.__id}))` },
       { [value.__id]: String(value.__value) },
     )
   }
-  return createRule({ filter: `drop-shadow(${value})` })
+  const resolved = dropShadowMap[value] ?? value
+  return createRule({ filter: `drop-shadow(${resolved})` })
 }
 
 export function grayscale(value: string | DynamicValue = '100%'): StyleRule {
@@ -60,6 +76,7 @@ export function sepia(value: string | DynamicValue = '100%'): StyleRule {
 // --- Backdrop filter utilities ---
 
 export function backdropBlur(value: string | DynamicValue = '8px'): StyleRule {
+  if (!isDynamic(value)) return filterRule('blur', blurMap[value] ?? value, 'backdrop-filter')
   return filterRule('blur', value, 'backdrop-filter')
 }
 

package/src/utilities/interactivity.ts

@@ -3,6 +3,7 @@ import type { DynamicValue } from '../dynamic.ts'
 import { createRule, createDynamicRule } from '../rule.ts'
 import { isDynamic } from '../dynamic.ts'
 import { resolveSpacing } from '../theme/spacing.ts'
+import { resolveColor } from './colors.ts'
 
 /**
  * Sets the `cursor` style of an element.
@@ -112,7 +113,7 @@ export function accentColor(value: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   }
-  return createRule({ 'accent-color': value })
+  return createRule({ 'accent-color': resolveColor(value) })
 }
 
 export function appearance(value: string): StyleRule {
@@ -126,7 +127,7 @@ export function caretColor(value: string | DynamicValue): StyleRule {
       { [value.__id]: String(value.__value) },
     )
   }
-  return createRule({ 'caret-color': value })
+  return createRule({ 'caret-color': resolveColor(value) })
 }
 
 export function resize(value: string): StyleRule {

package/src/utilities/layout.ts

@@ -3,15 +3,54 @@ import type { DynamicValue } from '../dynamic.ts'
 import { createRule, createDynamicRule } from '../rule.ts'
 import { resolveSpacing } from '../theme/spacing.ts'
 import { isDynamic } from '../dynamic.ts'
-
-function resolveSize(value: number | string | DynamicValue): string | DynamicValue {
+import { maxWidths } from '../theme/sizes.ts'
+
+const sizeMap: Record<string, string> = {
+  full: '100%',
+  auto: 'auto',
+  min: 'min-content',
+  max: 'max-content',
+  fit: 'fit-content',
+  '1/2': '50%',
+  '1/3': '33.333333%',
+  '2/3': '66.666667%',
+  '1/4': '25%',
+  '2/4': '50%',
+  '3/4': '75%',
+  '1/5': '20%',
+  '2/5': '40%',
+  '3/5': '60%',
+  '4/5': '80%',
+  '1/6': '16.666667%',
+  '2/6': '33.333333%',
+  '3/6': '50%',
+  '4/6': '66.666667%',
+  '5/6': '83.333333%',
+  '1/12': '8.333333%',
+  '2/12': '16.666667%',
+  '3/12': '25%',
+  '4/12': '33.333333%',
+  '5/12': '41.666667%',
+  '6/12': '50%',
+  '7/12': '58.333333%',
+  '8/12': '66.666667%',
+  '9/12': '75%',
+  '10/12': '83.333333%',
+  '11/12': '91.666667%',
+}
+
+const widthSizeMap: Record<string, string> = { ...sizeMap, screen: '100vw' }
+const heightSizeMap: Record<string, string> = { ...sizeMap, screen: '100vh' }
+const maxWidthMap: Record<string, string> = { ...sizeMap, ...maxWidths }
+
+function resolveSize(value: number | string | DynamicValue, nameMap?: Record<string, string>): string | DynamicValue {
   if (isDynamic(value)) return value
-  if (typeof value === 'string') return value
+  if (typeof value === 'string') return (nameMap && nameMap[value]) ?? sizeMap[value] ?? value
   return resolveSpacing(value)
 }
 
-function sizeRule(prop: string, value: number | string | DynamicValue): StyleRule {
-  const v = resolveSize(value)
+function sizeRule(prop: string, value: number | string | DynamicValue, nameMap?: Record<string, string>): StyleRule {
+  const v = resolveSize(value, nameMap)
   if (isDynamic(v)) {
     return createDynamicRule(
       { [prop]: `var(${v.__id})` },
@@ -21,8 +60,8 @@ function sizeRule(prop: string, value: number | string | DynamicValue): StyleRul
   return createRule({ [prop]: v as string })
 }
 
-function sizeRuleMulti(props: string[], value: number | string | DynamicValue): StyleRule {
-  const v = resolveSize(value)
+function sizeRuleMulti(props: string[], value: number | string | DynamicValue, nameMap?: Record<string, string>): StyleRule {
+  const v = resolveSize(value, nameMap)
   if (isDynamic(v)) {
     const decls: Record<string, string> = {}
     for (const prop of props) decls[prop] = `var(${v.__id})`
@@ -228,7 +267,7 @@ export function gridRows(n: number): StyleRule {
  * ```
  */
 export function w(value: number | string | DynamicValue): StyleRule {
-  return sizeRule('width', value)
+  return sizeRule('width', value, widthSizeMap)
 }
 
 /**
@@ -264,7 +303,7 @@ export function w(value: number | string | DynamicValue): StyleRule {
  * ```
  */
 export function h(value: number | string | DynamicValue): StyleRule {
-  return sizeRule('height', value)
+  return sizeRule('height', value, heightSizeMap)
 }
 
 /**
@@ -372,7 +411,7 @@ export function minW(value: number | string | DynamicValue): StyleRule {
  * ```
  */
 export function minH(value: number | string | DynamicValue): StyleRule {
-  return sizeRule('min-height', value)
+  return sizeRule('min-height', value, heightSizeMap)
 }
 
 /**
@@ -408,7 +447,7 @@ export function minH(value: number | string | DynamicValue): StyleRule {
  * ```
  */
 export function maxW(value: number | string | DynamicValue): StyleRule {
-  return sizeRule('max-width', value)
+  return sizeRule('max-width', value, maxWidthMap)
 }
 
 /**
@@ -444,7 +483,7 @@ export function maxW(value: number | string | DynamicValue): StyleRule {
  * ```
  */
 export function maxH(value: number | string | DynamicValue): StyleRule {
-  return sizeRule('max-height', value)
+  return sizeRule('max-height', value, heightSizeMap)
 }
 
 /**
@@ -932,8 +971,14 @@ export function z(value: number | string | DynamicValue): StyleRule {
 
 // --- Additional layout utilities ---
 
+const aspectRatioMap: Record<string, string> = {
+  auto: 'auto',
+  square: '1 / 1',
+  video: '16 / 9',
+}
+
 export function aspectRatio(value: string): StyleRule {
-  return createRule({ 'aspect-ratio': value })
+  return createRule({ 'aspect-ratio': aspectRatioMap[value] ?? value })
 }
 
 export function columns(value: string | number): StyleRule {