typewritingclass 0.2.2 → 0.2.6

package/dist/index.d.ts

@@ -0,0 +1,3542 @@
+import { S as StyleRule, D as DynamicResult, M as Modifier, a as DynamicValue } from './types-FfRD4Hbd.js';
+export { B as Brand, C as CSSColor, b as CSSFontWeight, c as CSSLength, d as CSSShadow, e as ColorInput, R as RadiusInput, f as ShadowInput, g as SizeInput, h as SpacingInput, U as Utility, i as dynamic, j as isDynamic } from './types-FfRD4Hbd.js';
+export { ThemeConfig, ThemeResult, ThemeVars, createTheme } from './theme/createTheme.js';
+export { i as injectTheme, s as setTheme } from './inject-theme-CTzyfQH0.js';
+import { T as TextSize } from './typography-C8wipcCK.js';
+
+/**
+ * Assigns an explicit layer priority to a style rule.
+ *
+ * By default, rules receive auto-incremented layer numbers based on
+ * declaration order. Use `layer()` to override this and force a rule
+ * to a specific priority level. Higher numbers = higher priority
+ * (overrides lower).
+ *
+ * @param priority - The explicit layer number to assign.
+ * @returns A function that accepts style rules and wraps them with the given layer.
+ *
+ * @example Force a reset to lowest priority
+ * ```ts
+ * import { cx, layer, p, bg } from 'typewritingclass'
+ *
+ * cx(layer(0)(bg('white')), p(4))
+ * // bg('white') is forced to layer 0, p(4) gets auto-assigned layer 1
+ * // p(4) overrides any conflicting property from bg('white')
+ * ```
+ *
+ * @example Force an override to highest priority
+ * ```ts
+ * cx(p(4), layer(1000)(p(8)))
+ * // p(8) at layer 1000 always overrides p(4)
+ * ```
+ */
+declare function layer(priority: number): (...rules: StyleRule[]) => StyleRule;
+
+/**
+ * Composes style rules and string class names into a single CSS class string.
+ *
+ * Each {@link StyleRule} is registered in the global stylesheet and assigned a
+ * unique, deterministic class name. Later arguments override earlier ones when
+ * CSS properties conflict -- order is your specificity.
+ *
+ * Plain strings are passed through unchanged, so you can mix generated rules
+ * with external or hand-written class names.
+ *
+ * @param args - Style rules from utility functions, or plain class name strings.
+ * @returns A space-separated class string ready for `className` or `class`.
+ *
+ * @example Basic composition
+ * ```ts
+ * import { cx, p, bg, rounded } from 'typewritingclass'
+ * import { blue } from 'typewritingclass/theme/colors'
+ * import { lg } from 'typewritingclass/theme/borders'
+ *
+ * const className = cx(p(4), bg(blue[500]), rounded(lg))
+ * // => "_a1b2c _d3e4f _g5h6i"
+ * // CSS: padding: 1rem; background-color: #3b82f6; border-radius: 0.5rem;
+ * ```
+ *
+ * @example Override earlier rules
+ * ```ts
+ * import { cx, p } from 'typewritingclass'
+ *
+ * cx(p(4), p(2))
+ * // Only p(2) applies -- later rules are placed on a higher layer
+ * // CSS: padding: 0.5rem;
+ * ```
+ *
+ * @example Mix string classes with rules
+ * ```ts
+ * import { cx, p, bg } from 'typewritingclass'
+ * import { white } from 'typewritingclass/theme/colors'
+ *
+ * cx('my-component', p(4), bg(white))
+ * // => "my-component _a1b2c _d3e4f"
+ * ```
+ *
+ * @example With modifiers
+ * ```ts
+ * import { cx, p, bg, when, hover, md } from 'typewritingclass'
+ * import { blue } from 'typewritingclass/theme/colors'
+ *
+ * cx(
+ *   p(4),
+ *   when(hover)(bg(blue[600])),
+ *   when(md)(p(8)),
+ * )
+ * // CSS:
+ * //   .cls1 { padding: 1rem; }
+ * //   .cls2:hover { background-color: #2563eb; }
+ * //   @media (min-width: 768px) { .cls3 { padding: 2rem; } }
+ * ```
+ */
+declare function cx(...args: (StyleRule | string)[]): string;
+
+/**
+ * Composes style rules into a class string **and** an inline style object,
+ * supporting runtime-dynamic CSS values.
+ *
+ * Works exactly like {@link cx} for static rules, but also collects
+ * `dynamicBindings` from any rule that references a {@link DynamicValue}.
+ * The returned `style` object maps CSS custom properties to their current
+ * values and must be spread onto the element's `style` attribute so the
+ * generated `var()` references resolve correctly.
+ *
+ * Use `dcx` instead of `cx` whenever at least one of your style rules was
+ * built with {@link dynamic}.
+ *
+ * @param args - Style rules from utility functions, or plain class name strings.
+ * @returns A {@link DynamicResult} with `className` (space-separated class string)
+ *          and `style` (CSS custom property assignments for inline styles).
+ *
+ * @example Dynamic background color
+ * ```ts
+ * import { dcx, bg, p, dynamic } from 'typewritingclass'
+ *
+ * const userColor = dynamic('#e11d48')
+ * const { className, style } = dcx(p(4), bg(userColor))
+ * // className => "_a1b2c _d3e4f"
+ * // style     => { '--twc-d0': '#e11d48' }
+ *
+ * // In React JSX:
+ * // <div className={className} style={style} />
+ * // CSS: ._d3e4f { background-color: var(--twc-d0); }
+ * // Inline: style="--twc-d0: #e11d48;"
+ * ```
+ *
+ * @example Mixing static and dynamic rules
+ * ```ts
+ * import { dcx, p, bg, rounded, dynamic } from 'typewritingclass'
+ * import { blue } from 'typewritingclass/theme/colors'
+ *
+ * const radius = dynamic('12px')
+ * const { className, style } = dcx(p(4), bg(blue[500]), rounded(radius))
+ * // className => "_a1b2c _d3e4f _g5h6i"
+ * // style     => { '--twc-d0': '12px' }
+ * // CSS: ._g5h6i { border-radius: var(--twc-d0); }
+ * ```
+ *
+ * @example No dynamic values -- style is an empty object
+ * ```ts
+ * import { dcx, p } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(p(4))
+ * // className => "_a1b2c"
+ * // style     => {}
+ * ```
+ */
+declare function dcx(...args: (StyleRule | string)[]): DynamicResult;
+
+/**
+ * Creates a conditional style applicator by composing one or more modifiers.
+ *
+ * Returns a function that accepts style rules and wraps them with the given
+ * modifiers applied right-to-left (innermost modifier listed first). This
+ * lets you express multi-condition rules like "on hover at the `md` breakpoint"
+ * in a readable, composable way.
+ *
+ * Multiple style rules passed to the returned function are merged into a single
+ * combined rule before modifiers are applied, so selectors and media queries
+ * are shared across all declarations.
+ *
+ * @param modifiers - One or more {@link Modifier} functions (e.g. `hover`, `md`, `dark`)
+ *                    applied right-to-left around the inner rules.
+ * @returns A function that accepts {@link StyleRule}s and returns a single
+ *          modifier-wrapped `StyleRule`.
+ *
+ * @example Single modifier -- hover state
+ * ```ts
+ * import { cx, bg, when, hover } from 'typewritingclass'
+ * import { blue } from 'typewritingclass/theme/colors'
+ *
+ * cx(when(hover)(bg(blue[600])))
+ * // CSS: .cls:hover { background-color: #2563eb; }
+ * ```
+ *
+ * @example Stacked modifiers -- hover at medium breakpoint
+ * ```ts
+ * import { cx, bg, p, when, hover, md } from 'typewritingclass'
+ * import { blue } from 'typewritingclass/theme/colors'
+ *
+ * cx(when(hover, md)(bg(blue[700]), p(8)))
+ * // CSS:
+ * //   @media (min-width: 768px) {
+ * //     .cls:hover { background-color: #1d4ed8; padding: 2rem; }
+ * //   }
+ * ```
+ *
+ * @example Dark mode styling
+ * ```ts
+ * import { cx, bg, textColor, when, dark } from 'typewritingclass'
+ * import { slate, white } from 'typewritingclass/theme/colors'
+ *
+ * cx(
+ *   bg(white),
+ *   textColor(slate[900]),
+ *   when(dark)(bg(slate[900]), textColor(white)),
+ * )
+ * // CSS:
+ * //   .cls1 { background-color: #ffffff; }
+ * //   .cls2 { color: #0f172a; }
+ * //   .dark .cls3 { background-color: #0f172a; color: #ffffff; }
+ * ```
+ */
+declare function when(...modifiers: Modifier[]): (...rules: StyleRule[]) => StyleRule;
+
+/**
+ * Creates a {@link StyleRule} from a plain object of CSS declarations.
+ *
+ * Use this overload when you want to write raw CSS property-value pairs
+ * without reaching for a specific utility function.
+ *
+ * @param declarations - A record mapping CSS property names to their values.
+ * @returns A {@link StyleRule} containing the given declarations.
+ *
+ * @example Object of declarations
+ * ```ts
+ * import { cx, css } from 'typewritingclass'
+ *
+ * cx(css({ display: 'grid', 'grid-template-columns': '1fr 1fr', gap: '1rem' }))
+ * // CSS: display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
+ * ```
+ */
+declare function css(declarations: Record<string, string>): StyleRule;
+/**
+ * Creates a {@link StyleRule} from a tagged template literal of CSS declarations.
+ *
+ * Interpolated values can be plain strings, numbers, or {@link DynamicValue}
+ * instances. Dynamic values are replaced with `var(--twc-dN)` references in
+ * the generated CSS and must be applied to the element via inline styles
+ * (see {@link dcx}).
+ *
+ * @param strings - The static portions of the template literal (provided automatically).
+ * @param values - Interpolated expressions -- strings, numbers, or {@link DynamicValue}s.
+ * @returns A {@link StyleRule} with parsed declarations (and `dynamicBindings`
+ *          if any interpolated value was created with {@link dynamic}).
+ *
+ * @example Tagged template with static values
+ * ```ts
+ * import { cx, css } from 'typewritingclass'
+ *
+ * cx(css`
+ *   display: flex;
+ *   align-items: center;
+ *   gap: 0.5rem;
+ * `)
+ * // CSS: display: flex; align-items: center; gap: 0.5rem;
+ * ```
+ *
+ * @example Tagged template with interpolated values
+ * ```ts
+ * import { cx, css } from 'typewritingclass'
+ * import { blue } from 'typewritingclass/theme/colors'
+ *
+ * const size = '2rem'
+ * cx(css`
+ *   width: ${size};
+ *   height: ${size};
+ *   background-color: ${blue[500]};
+ * `)
+ * // CSS: width: 2rem; height: 2rem; background-color: #3b82f6;
+ * ```
+ *
+ * @example Tagged template with dynamic values
+ * ```ts
+ * import { dcx, css, dynamic } from 'typewritingclass'
+ *
+ * const color = dynamic('#e11d48')
+ * const { className, style } = dcx(css`
+ *   background-color: ${color};
+ *   padding: 1rem;
+ * `)
+ * // className => "_a1b2c"
+ * // style     => { '--twc-d0': '#e11d48' }
+ * // CSS: ._a1b2c { background-color: var(--twc-d0); padding: 1rem; }
+ * ```
+ */
+declare function css(strings: TemplateStringsArray, ...values: (string | number | DynamicValue)[]): StyleRule;
+
+/**
+ * Generates a complete CSS stylesheet string from all registered rules.
+ *
+ * Rules are sorted by their layer number (ascending) so that later-declared
+ * utilities naturally override earlier ones in the cascade. Rules are
+ * separated by blank lines.
+ *
+ * @internal
+ * @returns The full CSS string for all registered style rules, or an empty
+ *   string if no rules have been registered.
+ *
+ * @example
+ * ```ts
+ * register('_a', createRule({ padding: '1rem' }), 0)
+ * register('_b', createRule({ margin: '0' }), 1)
+ *
+ * generateCSS()
+ * // "._a {\n  padding: 1rem;\n}\n\n._b {\n  margin: 0;\n}"
+ * ```
+ */
+declare function generateCSS(): string;
+
+/** @internal A utility that accepts arguments and returns a chain. Also chainable without calling (for optional-arg utilities like `shadow`). */
+/**
+ * A TwChain that is also assignable to `string`, so it can be used directly
+ * in `className={tw.p(4)}` without wrapping in a template literal.
+ * At runtime, the Proxy's `toString()` is called when string coercion occurs.
+ */
+type TwChainString = TwChain & string;
+type TwUtility = ((...args: any[]) => TwChainString) & TwChainString;
+/** @internal A modifier usable as a property (`tw.hover.bg(…)`) or function (`tw.hover(tw.bg(…))`). */
+type TwModifier = TwChainString & ((...chains: (TwChain | string)[]) => TwChainString);
+/** @internal A parameterized modifier that requires arguments before it becomes a modifier. */
+type TwParamModifier = (...args: any[]) => TwChainString;
+/**
+ * A chainable style builder created by the `tw` proxy.
+ *
+ * Every property access or method call returns a new `TwChain` with the
+ * accumulated styles. When used in a string context (template literal,
+ * `className=`, `String()`, etc.) it resolves to a class name string via `cx`.
+ *
+ * Modifiers can be used as properties for single-utility application
+ * (`tw.hover.bg('red-500')`) or as functions accepting another chain
+ * for multi-utility application (`tw.hover(tw.bg('red-500').textColor('white'))`).
+ *
+ * **Keep in sync with the UTILS, VALUELESS, MODS, and PARAM_MODS lookup tables.**
+ */
+interface TwChain {
+    /** @internal Accumulated style rules */
+    readonly _rules: readonly (StyleRule | string)[];
+    /** @internal Brand marker */
+    readonly [Symbol.toStringTag]: 'TwChain';
+    /** Resolves the chain to a class name string */
+    toString(): string;
+    /** Resolves the chain to a class name string */
+    readonly value: string;
+    /** Resolves the chain to a class name string */
+    readonly className: string;
+    /** Allow the chain to be called as a function */
+    (...args: any[]): TwChainString;
+    readonly p: TwUtility;
+    readonly px: TwUtility;
+    readonly py: TwUtility;
+    readonly pt: TwUtility;
+    readonly pr: TwUtility;
+    readonly pb: TwUtility;
+    readonly pl: TwUtility;
+    readonly m: TwUtility;
+    readonly mx: TwUtility;
+    readonly my: TwUtility;
+    readonly mt: TwUtility;
+    readonly mr: TwUtility;
+    readonly mb: TwUtility;
+    readonly ml: TwUtility;
+    readonly gap: TwUtility;
+    readonly gapX: TwUtility;
+    readonly gapY: TwUtility;
+    readonly ps: TwUtility;
+    readonly pe: TwUtility;
+    readonly ms: TwUtility;
+    readonly me: TwUtility;
+    readonly spaceX: TwUtility;
+    readonly spaceY: TwUtility;
+    readonly bg: TwUtility;
+    readonly textColor: TwUtility;
+    readonly borderColor: TwUtility;
+    readonly text: TwUtility;
+    readonly font: TwUtility;
+    readonly tracking: TwUtility;
+    readonly leading: TwUtility;
+    readonly textAlign: TwUtility;
+    readonly fontFamily: TwUtility;
+    readonly lineClamp: TwUtility;
+    readonly listStyleImage: TwUtility;
+    readonly listStylePosition: TwUtility;
+    readonly listStyleType: TwUtility;
+    readonly textDecoration: TwUtility;
+    readonly textDecorationColor: TwUtility;
+    readonly textDecorationStyle: TwUtility;
+    readonly textDecorationThickness: TwUtility;
+    readonly textUnderlineOffset: TwUtility;
+    readonly textTransform: TwUtility;
+    readonly textOverflow: TwUtility;
+    readonly textWrap: TwUtility;
+    readonly textIndent: TwUtility;
+    readonly verticalAlign: TwUtility;
+    readonly whitespace: TwUtility;
+    readonly wordBreak: TwUtility;
+    readonly hyphens: TwUtility;
+    readonly content: TwUtility;
+    readonly grid: TwUtility;
+    readonly gridCols: TwUtility;
+    readonly gridRows: TwUtility;
+    readonly w: TwUtility;
+    readonly h: TwUtility;
+    readonly size: TwUtility;
+    readonly minW: TwUtility;
+    readonly minH: TwUtility;
+    readonly maxW: TwUtility;
+    readonly maxH: TwUtility;
+    readonly display: TwUtility;
+    readonly items: TwUtility;
+    readonly justify: TwUtility;
+    readonly self: TwUtility;
+    readonly overflow: TwUtility;
+    readonly overflowX: TwUtility;
+    readonly overflowY: TwUtility;
+    readonly top: TwUtility;
+    readonly right: TwUtility;
+    readonly bottom: TwUtility;
+    readonly left: TwUtility;
+    readonly inset: TwUtility;
+    readonly z: TwUtility;
+    readonly aspectRatio: TwUtility;
+    readonly columns: TwUtility;
+    readonly breakAfter: TwUtility;
+    readonly breakBefore: TwUtility;
+    readonly breakInside: TwUtility;
+    readonly boxDecorationBreak: TwUtility;
+    readonly boxSizing: TwUtility;
+    readonly float: TwUtility;
+    readonly clear: TwUtility;
+    readonly objectFit: TwUtility;
+    readonly objectPosition: TwUtility;
+    readonly overscrollBehavior: TwUtility;
+    readonly overscrollX: TwUtility;
+    readonly overscrollY: TwUtility;
+    readonly insetX: TwUtility;
+    readonly insetY: TwUtility;
+    readonly start: TwUtility;
+    readonly end: TwUtility;
+    readonly flexBasis: TwUtility;
+    readonly grow: TwUtility;
+    readonly shrink: TwUtility;
+    readonly order: TwUtility;
+    readonly colSpan: TwUtility;
+    readonly colStart: TwUtility;
+    readonly colEnd: TwUtility;
+    readonly rowSpan: TwUtility;
+    readonly rowStart: TwUtility;
+    readonly rowEnd: TwUtility;
+    readonly gridFlow: TwUtility;
+    readonly autoCols: TwUtility;
+    readonly autoRows: TwUtility;
+    readonly justifyItems: TwUtility;
+    readonly justifySelf: TwUtility;
+    readonly alignContent: TwUtility;
+    readonly placeContent: TwUtility;
+    readonly placeItems: TwUtility;
+    readonly placeSelf: TwUtility;
+    readonly rounded: TwUtility;
+    readonly roundedT: TwUtility;
+    readonly roundedB: TwUtility;
+    readonly roundedL: TwUtility;
+    readonly roundedR: TwUtility;
+    readonly roundedTL: TwUtility;
+    readonly roundedTR: TwUtility;
+    readonly roundedBR: TwUtility;
+    readonly roundedBL: TwUtility;
+    readonly roundedSS: TwUtility;
+    readonly roundedSE: TwUtility;
+    readonly roundedEE: TwUtility;
+    readonly roundedES: TwUtility;
+    readonly border: TwUtility;
+    readonly borderT: TwUtility;
+    readonly borderR: TwUtility;
+    readonly borderB: TwUtility;
+    readonly borderL: TwUtility;
+    readonly borderX: TwUtility;
+    readonly borderY: TwUtility;
+    readonly borderS: TwUtility;
+    readonly borderE: TwUtility;
+    readonly borderStyle: TwUtility;
+    readonly ring: TwUtility;
+    readonly ringColor: TwUtility;
+    readonly ringOffsetWidth: TwUtility;
+    readonly ringOffsetColor: TwUtility;
+    readonly outlineWidth: TwUtility;
+    readonly outlineColor: TwUtility;
+    readonly outlineStyle: TwUtility;
+    readonly outlineOffset: TwUtility;
+    readonly outline: TwUtility;
+    readonly divideX: TwUtility;
+    readonly divideY: TwUtility;
+    readonly divideColor: TwUtility;
+    readonly divideStyle: TwUtility;
+    readonly shadow: TwUtility;
+    readonly opacity: TwUtility;
+    readonly backdrop: TwUtility;
+    readonly shadowColor: TwUtility;
+    readonly mixBlendMode: TwUtility;
+    readonly bgBlendMode: TwUtility;
+    readonly cursor: TwUtility;
+    readonly select: TwUtility;
+    readonly pointerEvents: TwUtility;
+    readonly accentColor: TwUtility;
+    readonly appearance: TwUtility;
+    readonly caretColor: TwUtility;
+    readonly resize: TwUtility;
+    readonly scrollBehavior: TwUtility;
+    readonly scrollMargin: TwUtility;
+    readonly scrollMarginX: TwUtility;
+    readonly scrollMarginY: TwUtility;
+    readonly scrollMarginT: TwUtility;
+    readonly scrollMarginR: TwUtility;
+    readonly scrollMarginB: TwUtility;
+    readonly scrollMarginL: TwUtility;
+    readonly scrollPadding: TwUtility;
+    readonly scrollPaddingX: TwUtility;
+    readonly scrollPaddingY: TwUtility;
+    readonly scrollPaddingT: TwUtility;
+    readonly scrollPaddingR: TwUtility;
+    readonly scrollPaddingB: TwUtility;
+    readonly scrollPaddingL: TwUtility;
+    readonly snapAlign: TwUtility;
+    readonly snapStop: TwUtility;
+    readonly snapType: TwUtility;
+    readonly touchAction: TwUtility;
+    readonly willChange: TwUtility;
+    readonly blur: TwUtility;
+    readonly brightness: TwUtility;
+    readonly contrast: TwUtility;
+    readonly dropShadow: TwUtility;
+    readonly grayscale: TwUtility;
+    readonly hueRotate: TwUtility;
+    readonly invert: TwUtility;
+    readonly saturate: TwUtility;
+    readonly sepia: TwUtility;
+    readonly backdropBlur: TwUtility;
+    readonly backdropBrightness: TwUtility;
+    readonly backdropContrast: TwUtility;
+    readonly backdropGrayscale: TwUtility;
+    readonly backdropHueRotate: TwUtility;
+    readonly backdropInvert: TwUtility;
+    readonly backdropOpacity: TwUtility;
+    readonly backdropSaturate: TwUtility;
+    readonly backdropSepia: TwUtility;
+    readonly scale: TwUtility;
+    readonly scaleX: TwUtility;
+    readonly scaleY: TwUtility;
+    readonly rotate: TwUtility;
+    readonly translateX: TwUtility;
+    readonly translateY: TwUtility;
+    readonly skewX: TwUtility;
+    readonly skewY: TwUtility;
+    readonly transformOrigin: TwUtility;
+    readonly transition: TwUtility;
+    readonly duration: TwUtility;
+    readonly ease: TwUtility;
+    readonly delay: TwUtility;
+    readonly animate: TwUtility;
+    readonly borderSpacing: TwUtility;
+    readonly borderSpacingX: TwUtility;
+    readonly borderSpacingY: TwUtility;
+    readonly tableLayout: TwUtility;
+    readonly captionSide: TwUtility;
+    readonly fill: TwUtility;
+    readonly stroke: TwUtility;
+    readonly strokeWidth: TwUtility;
+    readonly forcedColorAdjust: TwUtility;
+    readonly bgAttachment: TwUtility;
+    readonly bgClip: TwUtility;
+    readonly bgOrigin: TwUtility;
+    readonly bgPosition: TwUtility;
+    readonly bgRepeat: TwUtility;
+    readonly bgSize: TwUtility;
+    readonly bgImage: TwUtility;
+    readonly bgGradient: TwUtility;
+    readonly gradientFrom: TwUtility;
+    readonly gradientVia: TwUtility;
+    readonly gradientTo: TwUtility;
+    readonly flex: TwChainString;
+    readonly flexCol: TwChainString;
+    readonly flexRow: TwChainString;
+    readonly flexWrap: TwChainString;
+    readonly inlineFlex: TwChainString;
+    readonly relative: TwChainString;
+    readonly absolute: TwChainString;
+    readonly fixed: TwChainString;
+    readonly sticky: TwChainString;
+    readonly static: TwChainString;
+    readonly visible: TwChainString;
+    readonly invisible: TwChainString;
+    readonly collapse: TwChainString;
+    readonly isolate: TwChainString;
+    readonly isolationAuto: TwChainString;
+    readonly container: TwChainString;
+    readonly flexRowReverse: TwChainString;
+    readonly flexColReverse: TwChainString;
+    readonly flexWrapReverse: TwChainString;
+    readonly flexNowrap: TwChainString;
+    readonly flex1: TwChainString;
+    readonly flexAuto: TwChainString;
+    readonly flexInitial: TwChainString;
+    readonly flexNone: TwChainString;
+    readonly antialiased: TwChainString;
+    readonly subpixelAntialiased: TwChainString;
+    readonly italic: TwChainString;
+    readonly notItalic: TwChainString;
+    readonly truncate: TwChainString;
+    readonly normalNums: TwChainString;
+    readonly ordinal: TwChainString;
+    readonly slashedZero: TwChainString;
+    readonly liningNums: TwChainString;
+    readonly oldstyleNums: TwChainString;
+    readonly proportionalNums: TwChainString;
+    readonly tabularNums: TwChainString;
+    readonly diagonalFractions: TwChainString;
+    readonly stackedFractions: TwChainString;
+    readonly ringInset: TwChainString;
+    readonly outlineNone: TwChainString;
+    readonly borderCollapse: TwChainString;
+    readonly borderSeparate: TwChainString;
+    readonly spaceXReverse: TwChainString;
+    readonly spaceYReverse: TwChainString;
+    readonly divideXReverse: TwChainString;
+    readonly divideYReverse: TwChainString;
+    readonly transformGpu: TwChainString;
+    readonly transformNone: TwChainString;
+    readonly transitionAll: TwChainString;
+    readonly transitionColors: TwChainString;
+    readonly transitionOpacity: TwChainString;
+    readonly transitionShadow: TwChainString;
+    readonly transitionTransform: TwChainString;
+    readonly transitionNone: TwChainString;
+    readonly srOnly: TwChainString;
+    readonly notSrOnly: TwChainString;
+    readonly group: TwChainString;
+    readonly peer: TwChainString;
+    readonly hover: TwModifier;
+    readonly focus: TwModifier;
+    readonly active: TwModifier;
+    readonly disabled: TwModifier;
+    readonly focusVisible: TwModifier;
+    readonly focusWithin: TwModifier;
+    readonly firstChild: TwModifier;
+    readonly lastChild: TwModifier;
+    readonly visited: TwModifier;
+    readonly checked: TwModifier;
+    readonly indeterminate: TwModifier;
+    readonly default: TwModifier;
+    readonly required: TwModifier;
+    readonly valid: TwModifier;
+    readonly invalid: TwModifier;
+    readonly inRange: TwModifier;
+    readonly outOfRange: TwModifier;
+    readonly placeholderShown: TwModifier;
+    readonly autofill: TwModifier;
+    readonly readOnly: TwModifier;
+    readonly empty: TwModifier;
+    readonly even: TwModifier;
+    readonly odd: TwModifier;
+    readonly firstOfType: TwModifier;
+    readonly lastOfType: TwModifier;
+    readonly onlyChild: TwModifier;
+    readonly onlyOfType: TwModifier;
+    readonly target: TwModifier;
+    readonly open: TwModifier;
+    readonly sm: TwModifier;
+    readonly md: TwModifier;
+    readonly lg: TwModifier;
+    readonly xl: TwModifier;
+    readonly _2xl: TwModifier;
+    readonly maxSm: TwModifier;
+    readonly maxMd: TwModifier;
+    readonly maxLg: TwModifier;
+    readonly maxXl: TwModifier;
+    readonly max2xl: TwModifier;
+    readonly dark: TwModifier;
+    readonly motionReduce: TwModifier;
+    readonly motionSafe: TwModifier;
+    readonly print: TwModifier;
+    readonly portrait: TwModifier;
+    readonly landscape: TwModifier;
+    readonly contrastMore: TwModifier;
+    readonly contrastLess: TwModifier;
+    readonly forcedColors: TwModifier;
+    readonly before: TwModifier;
+    readonly after: TwModifier;
+    readonly placeholder: TwModifier;
+    readonly file: TwModifier;
+    readonly marker: TwModifier;
+    readonly selection: TwModifier;
+    readonly firstLine: TwModifier;
+    readonly firstLetter: TwModifier;
+    readonly backdropEl: TwModifier;
+    readonly ariaChecked: TwModifier;
+    readonly ariaDisabled: TwModifier;
+    readonly ariaExpanded: TwModifier;
+    readonly ariaHidden: TwModifier;
+    readonly ariaPressed: TwModifier;
+    readonly ariaReadonly: TwModifier;
+    readonly ariaRequired: TwModifier;
+    readonly ariaSelected: TwModifier;
+    readonly groupHover: TwModifier;
+    readonly groupFocus: TwModifier;
+    readonly groupActive: TwModifier;
+    readonly groupFocusVisible: TwModifier;
+    readonly groupFocusWithin: TwModifier;
+    readonly groupDisabled: TwModifier;
+    readonly groupChecked: TwModifier;
+    readonly groupEmpty: TwModifier;
+    readonly groupFirst: TwModifier;
+    readonly groupLast: TwModifier;
+    readonly groupOdd: TwModifier;
+    readonly groupEven: TwModifier;
+    readonly groupOpen: TwModifier;
+    readonly groupVisited: TwModifier;
+    readonly peerHover: TwModifier;
+    readonly peerFocus: TwModifier;
+    readonly peerActive: TwModifier;
+    readonly peerFocusVisible: TwModifier;
+    readonly peerDisabled: TwModifier;
+    readonly peerChecked: TwModifier;
+    readonly peerInvalid: TwModifier;
+    readonly peerRequired: TwModifier;
+    readonly peerPlaceholderShown: TwModifier;
+    readonly peerFocusWithin: TwModifier;
+    readonly peerEmpty: TwModifier;
+    readonly peerFirst: TwModifier;
+    readonly peerLast: TwModifier;
+    readonly peerOdd: TwModifier;
+    readonly peerEven: TwModifier;
+    readonly peerOpen: TwModifier;
+    readonly peerVisited: TwModifier;
+    readonly rtl: TwModifier;
+    readonly ltr: TwModifier;
+    readonly has: TwParamModifier;
+    readonly aria: TwParamModifier;
+    readonly data: TwParamModifier;
+    readonly supports: TwParamModifier;
+    readonly groupHas: TwParamModifier;
+    readonly peerHas: TwParamModifier;
+    /** Fallback: unknown properties are treated as raw class names */
+    [key: string]: any;
+}
+/**
+ * Proxy-based chainable style builder.
+ *
+ * An alternative to importing individual utility and modifier functions.
+ * One import gives you access to every utility, modifier, and value-less
+ * shorthand through a fluent, chainable API.
+ *
+ * @example Basic chaining — any order
+ * ```ts
+ * import { tw } from 'typewritingclass'
+ *
+ * const card = tw.bg('slate-50').rounded('xl').p(6).shadow('md')
+ * ```
+ *
+ * @example Single-utility modifier (property syntax)
+ * ```ts
+ * const title = tw.textColor('slate-900').hover.textColor('blue-600')
+ * ```
+ *
+ * @example Multi-utility modifier (function syntax)
+ * ```ts
+ * const card = tw
+ *   .bg('slate-50')
+ *   .rounded('xl')
+ *   .p(6)
+ *   .hover(tw.bg('slate-100').shadow('lg').scale(105))
+ *   .focus(tw.ring(2).ringColor('blue-500'))
+ * ```
+ *
+ * @example Value-less utilities
+ * ```ts
+ * const wrapper = tw.group.flex.flexCol.relative
+ * ```
+ *
+ * @example Group/peer modifiers
+ * ```ts
+ * const icon = tw.opacity(0.5).groupHover.opacity(1)
+ * ```
+ *
+ * @example Resolves to class string automatically
+ * ```ts
+ * <div className={tw.p(4).bg('blue-500')} />
+ * <div className={`${tw.p(4)} extra-class`} />
+ * const classes = tw.p(4).bg('blue-500').toString()
+ * const classes = tw.p(4).bg('blue-500').value
+ * ```
+ */
+declare const tw: TwChainString;
+
+/**
+ * Loads a Google Font and returns the font family name for use with {@link fontFamily}.
+ *
+ * In browser environments this injects a `<link>` tag for the Google Fonts CSS.
+ * The returned string is the font family name, ready to pass to `fontFamily()`.
+ *
+ * @param family - The Google Font family name, e.g. `'Inter'` or `'Fira Code'`.
+ * @param options - Optional settings for weights and display strategy.
+ * @returns The font family name string.
+ *
+ * @example
+ * ```ts
+ * import { tw, googleFonts } from 'typewritingclass'
+ *
+ * const heading = tw.fontFamily(googleFonts('Inter'))
+ * ```
+ *
+ * @example With specific weights
+ * ```ts
+ * const body = tw.fontFamily(googleFonts('Roboto', { weights: [400, 700] }))
+ * ```
+ */
+declare function googleFonts(family: string, options?: {
+    weights?: number[];
+    display?: string;
+}): string;
+
+/**
+ * Sets padding on all sides.
+ *
+ * Accepts a theme spacing scale number (maps to the spacing scale), a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'2.5rem'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `padding`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, p } from 'typewritingclass'
+ *
+ * cx(p(4))
+ * // CSS: padding: 1rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(p('2.5rem'))
+ * // CSS: padding: 2.5rem;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, p, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(p(dynamic(spacing)))
+ * // CSS: padding: var(--twc-d0);
+ * // style: { '--twc-d0': spacing }
+ * ```
+ */
+declare function p(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets horizontal padding (left and right).
+ *
+ * Accepts a theme spacing scale number, a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'20px'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `padding-left` and `padding-right`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, px } from 'typewritingclass'
+ *
+ * cx(px(6))
+ * // CSS: padding-left: 1.5rem; padding-right: 1.5rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(px('10px'))
+ * // CSS: padding-left: 10px; padding-right: 10px;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, px, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(px(dynamic(spacing)))
+ * // CSS: padding-left: var(--twc-d0); padding-right: var(--twc-d0);
+ * // style: { '--twc-d0': spacing }
+ * ```
+ */
+declare function px(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets vertical padding (top and bottom).
+ *
+ * Accepts a theme spacing scale number, a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'20px'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `padding-top` and `padding-bottom`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, py } from 'typewritingclass'
+ *
+ * cx(py(2))
+ * // CSS: padding-top: 0.5rem; padding-bottom: 0.5rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(py('1em'))
+ * // CSS: padding-top: 1em; padding-bottom: 1em;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, py, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(py(dynamic(spacing)))
+ * // CSS: padding-top: var(--twc-d0); padding-bottom: var(--twc-d0);
+ * // style: { '--twc-d0': spacing }
+ * ```
+ */
+declare function py(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets top padding.
+ *
+ * Accepts a theme spacing scale number, a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'8px'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `padding-top`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, pt } from 'typewritingclass'
+ *
+ * cx(pt(8))
+ * // CSS: padding-top: 2rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(pt('0.5em'))
+ * // CSS: padding-top: 0.5em;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, pt, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(pt(dynamic(spacing)))
+ * // CSS: padding-top: var(--twc-d0);
+ * // style: { '--twc-d0': spacing }
+ * ```
+ */
+declare function pt(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets right padding.
+ *
+ * Accepts a theme spacing scale number, a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'12px'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `padding-right`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, pr } from 'typewritingclass'
+ *
+ * cx(pr(3))
+ * // CSS: padding-right: 0.75rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(pr('1rem'))
+ * // CSS: padding-right: 1rem;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, pr, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(pr(dynamic(spacing)))
+ * // CSS: padding-right: var(--twc-d0);
+ * // style: { '--twc-d0': spacing }
+ * ```
+ */
+declare function pr(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets bottom padding.
+ *
+ * Accepts a theme spacing scale number, a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'16px'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `padding-bottom`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, pb } from 'typewritingclass'
+ *
+ * cx(pb(10))
+ * // CSS: padding-bottom: 2.5rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(pb('2em'))
+ * // CSS: padding-bottom: 2em;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, pb, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(pb(dynamic(spacing)))
+ * // CSS: padding-bottom: var(--twc-d0);
+ * // style: { '--twc-d0': spacing }
+ * ```
+ */
+declare function pb(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets left padding.
+ *
+ * Accepts a theme spacing scale number, a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'24px'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `padding-left`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, pl } from 'typewritingclass'
+ *
+ * cx(pl(5))
+ * // CSS: padding-left: 1.25rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(pl('3ch'))
+ * // CSS: padding-left: 3ch;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, pl, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(pl(dynamic(spacing)))
+ * // CSS: padding-left: var(--twc-d0);
+ * // style: { '--twc-d0': spacing }
+ * ```
+ */
+declare function pl(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets margin on all sides.
+ *
+ * Accepts a theme spacing scale number, a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'auto'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `margin`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, m } from 'typewritingclass'
+ *
+ * cx(m(4))
+ * // CSS: margin: 1rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(m('auto'))
+ * // CSS: margin: auto;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, m, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(m(dynamic(spacing)))
+ * // CSS: margin: var(--twc-d0);
+ * // style: { '--twc-d0': spacing }
+ * ```
+ */
+declare function m(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets horizontal margin (left and right).
+ *
+ * Accepts a theme spacing scale number, a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'auto'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `margin-left` and `margin-right`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, mx } from 'typewritingclass'
+ *
+ * cx(mx(8))
+ * // CSS: margin-left: 2rem; margin-right: 2rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(mx('auto'))
+ * // CSS: margin-left: auto; margin-right: auto;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, mx, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(mx(dynamic(spacing)))
+ * // CSS: margin-left: var(--twc-d0); margin-right: var(--twc-d0);
+ * // style: { '--twc-d0': spacing }
+ * ```
+ */
+declare function mx(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets vertical margin (top and bottom).
+ *
+ * Accepts a theme spacing scale number, a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'2em'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `margin-top` and `margin-bottom`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, my } from 'typewritingclass'
+ *
+ * cx(my(6))
+ * // CSS: margin-top: 1.5rem; margin-bottom: 1.5rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(my('0.5em'))
+ * // CSS: margin-top: 0.5em; margin-bottom: 0.5em;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, my, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(my(dynamic(spacing)))
+ * // CSS: margin-top: var(--twc-d0); margin-bottom: var(--twc-d0);
+ * // style: { '--twc-d0': spacing }
+ * ```
+ */
+declare function my(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets top margin.
+ *
+ * Accepts a theme spacing scale number, a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'1em'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `margin-top`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, mt } from 'typewritingclass'
+ *
+ * cx(mt(2))
+ * // CSS: margin-top: 0.5rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(mt('10px'))
+ * // CSS: margin-top: 10px;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, mt, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(mt(dynamic(spacing)))
+ * // CSS: margin-top: var(--twc-d0);
+ * // style: { '--twc-d0': spacing }
+ * ```
+ */
+declare function mt(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets right margin.
+ *
+ * Accepts a theme spacing scale number, a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'1em'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `margin-right`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, mr } from 'typewritingclass'
+ *
+ * cx(mr(3))
+ * // CSS: margin-right: 0.75rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(mr('auto'))
+ * // CSS: margin-right: auto;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, mr, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(mr(dynamic(spacing)))
+ * // CSS: margin-right: var(--twc-d0);
+ * // style: { '--twc-d0': spacing }
+ * ```
+ */
+declare function mr(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets bottom margin.
+ *
+ * Accepts a theme spacing scale number, a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'2em'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `margin-bottom`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, mb } from 'typewritingclass'
+ *
+ * cx(mb(4))
+ * // CSS: margin-bottom: 1rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(mb('20px'))
+ * // CSS: margin-bottom: 20px;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, mb, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(mb(dynamic(spacing)))
+ * // CSS: margin-bottom: var(--twc-d0);
+ * // style: { '--twc-d0': spacing }
+ * ```
+ */
+declare function mb(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets left margin.
+ *
+ * Accepts a theme spacing scale number, a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'auto'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `margin-left`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, ml } from 'typewritingclass'
+ *
+ * cx(ml(12))
+ * // CSS: margin-left: 3rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(ml('auto'))
+ * // CSS: margin-left: auto;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, ml, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(ml(dynamic(spacing)))
+ * // CSS: margin-left: var(--twc-d0);
+ * // style: { '--twc-d0': spacing }
+ * ```
+ */
+declare function ml(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets gap between flex or grid children on both axes.
+ *
+ * Accepts a theme spacing scale number, a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'20px'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `gap`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, gap } from 'typewritingclass'
+ *
+ * cx(gap(4))
+ * // CSS: gap: 1rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(gap('1.5em'))
+ * // CSS: gap: 1.5em;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, gap, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(gap(dynamic(spacing)))
+ * // CSS: gap: var(--twc-d0);
+ * // style: { '--twc-d0': spacing }
+ * ```
+ */
+declare function gap(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets horizontal (column) gap between flex or grid children.
+ *
+ * Accepts a theme spacing scale number, a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'10px'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `column-gap`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, gapX } from 'typewritingclass'
+ *
+ * cx(gapX(2))
+ * // CSS: column-gap: 0.5rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(gapX('12px'))
+ * // CSS: column-gap: 12px;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, gapX, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(gapX(dynamic(spacing)))
+ * // CSS: column-gap: var(--twc-d0);
+ * // style: { '--twc-d0': spacing }
+ * ```
+ */
+declare function gapX(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets vertical (row) gap between flex or grid children.
+ *
+ * Accepts a theme spacing scale number, a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'10px'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `row-gap`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, gapY } from 'typewritingclass'
+ *
+ * cx(gapY(3))
+ * // CSS: row-gap: 0.75rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(gapY('8px'))
+ * // CSS: row-gap: 8px;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, gapY, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(gapY(dynamic(spacing)))
+ * // CSS: row-gap: var(--twc-d0);
+ * // style: { '--twc-d0': spacing }
+ * ```
+ */
+declare function gapY(value: number | string | DynamicValue): StyleRule;
+declare function ps(value: number | string | DynamicValue): StyleRule;
+declare function pe(value: number | string | DynamicValue): StyleRule;
+declare function ms(value: number | string | DynamicValue): StyleRule;
+declare function me(value: number | string | DynamicValue): StyleRule;
+declare function spaceX(value: number | string | DynamicValue): StyleRule;
+declare function spaceY(value: number | string | DynamicValue): StyleRule;
+declare function spaceXReverse(): StyleRule;
+declare function spaceYReverse(): StyleRule;
+
+/**
+ * Sets the background color of an element.
+ *
+ * Accepts a raw CSS color string or a {@link DynamicValue} for runtime values.
+ *
+ * @param color - CSS color string (e.g. `'#3b82f6'`, `'red'`, `'rgb(59, 130, 246)'`) or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `background-color`.
+ *
+ * @example CSS color string
+ * ```ts
+ * import { cx, bg } from 'typewritingclass'
+ *
+ * cx(bg('#3b82f6'))
+ * // CSS: background-color: #3b82f6;
+ * ```
+ *
+ * @example Named color
+ * ```ts
+ * cx(bg('transparent'))
+ * // CSS: background-color: transparent;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, bg, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(bg(dynamic(themeColor)))
+ * // CSS: background-color: var(--twc-d0);
+ * // style: { '--twc-d0': themeColor }
+ * ```
+ */
+declare function bg(color: string | DynamicValue): StyleRule;
+/**
+ * Sets the text color of an element.
+ *
+ * Accepts a raw CSS color string or a {@link DynamicValue} for runtime values.
+ *
+ * @param color - CSS color string (e.g. `'#111827'`, `'white'`, `'rgb(17, 24, 39)'`) or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `color`.
+ *
+ * @example CSS color string
+ * ```ts
+ * import { cx, textColor } from 'typewritingclass'
+ *
+ * cx(textColor('#111827'))
+ * // CSS: color: #111827;
+ * ```
+ *
+ * @example Named color
+ * ```ts
+ * cx(textColor('inherit'))
+ * // CSS: color: inherit;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, textColor, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(textColor(dynamic(themeColor)))
+ * // CSS: color: var(--twc-d0);
+ * // style: { '--twc-d0': themeColor }
+ * ```
+ */
+declare function textColor(color: string | DynamicValue): StyleRule;
+/**
+ * Sets the border color of an element.
+ *
+ * Accepts a raw CSS color string or a {@link DynamicValue} for runtime values.
+ *
+ * @param color - CSS color string (e.g. `'#e5e7eb'`, `'red'`, `'rgb(229, 231, 235)'`) or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `border-color`.
+ *
+ * @example CSS color string
+ * ```ts
+ * import { cx, borderColor } from 'typewritingclass'
+ *
+ * cx(borderColor('#e5e7eb'))
+ * // CSS: border-color: #e5e7eb;
+ * ```
+ *
+ * @example Named color
+ * ```ts
+ * cx(borderColor('currentColor'))
+ * // CSS: border-color: currentColor;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, borderColor, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(borderColor(dynamic(themeColor)))
+ * // CSS: border-color: var(--twc-d0);
+ * // style: { '--twc-d0': themeColor }
+ * ```
+ */
+declare function borderColor(color: string | DynamicValue): StyleRule;
+
+/**
+ * Sets the font size (and optionally line height) of an element.
+ *
+ * Accepts a {@link TextSize} object from the typography theme (which sets both
+ * `font-size` and `line-height`), a raw CSS string for `font-size` only,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param size - A {@link TextSize} preset (e.g. `typography.base`), a raw CSS string (`'1.5rem'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `font-size` and optionally `line-height`.
+ *
+ * @example TextSize preset
+ * ```ts
+ * import { cx, text } from 'typewritingclass'
+ * import * as typography from 'typewritingclass/theme/typography'
+ *
+ * cx(text(typography.lg))
+ * // CSS: font-size: 1.125rem; line-height: 1.75rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(text('2rem'))
+ * // CSS: font-size: 2rem;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, text, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(text(dynamic(fontSize)))
+ * // CSS: font-size: var(--twc-d0);
+ * // style: { '--twc-d0': fontSize }
+ * ```
+ */
+declare function text(size: TextSize | string | DynamicValue): StyleRule;
+/**
+ * Sets the font weight of an element.
+ *
+ * Accepts a raw CSS font-weight string or a {@link DynamicValue} for runtime values.
+ * Use the typography theme exports (e.g. `typography.bold`) for standard weights.
+ *
+ * @param weight - A font-weight string (`'700'`, `'bold'`) or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `font-weight`.
+ *
+ * @example Typography theme weight
+ * ```ts
+ * import { cx, font } from 'typewritingclass'
+ * import * as typography from 'typewritingclass/theme/typography'
+ *
+ * cx(font(typography.bold))
+ * // CSS: font-weight: 700;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(font('600'))
+ * // CSS: font-weight: 600;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, font, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(font(dynamic(weight)))
+ * // CSS: font-weight: var(--twc-d0);
+ * // style: { '--twc-d0': weight }
+ * ```
+ */
+declare function font(weight: string | DynamicValue): StyleRule;
+/**
+ * Sets the letter spacing (tracking) of an element.
+ *
+ * Accepts a raw CSS letter-spacing string or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - A CSS letter-spacing string (`'-0.025em'`, `'0.05em'`) or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `letter-spacing`.
+ *
+ * @example Raw value
+ * ```ts
+ * import { cx, tracking } from 'typewritingclass'
+ *
+ * cx(tracking('-0.025em'))
+ * // CSS: letter-spacing: -0.025em;
+ * ```
+ *
+ * @example Wide tracking
+ * ```ts
+ * cx(tracking('0.1em'))
+ * // CSS: letter-spacing: 0.1em;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, tracking, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(tracking(dynamic(letterSpacing)))
+ * // CSS: letter-spacing: var(--twc-d0);
+ * // style: { '--twc-d0': letterSpacing }
+ * ```
+ */
+declare function tracking(value: string | DynamicValue): StyleRule;
+/**
+ * Sets the line height (leading) of an element.
+ *
+ * Accepts a raw CSS line-height string or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - A CSS line-height string (`'1.5'`, `'2rem'`) or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `line-height`.
+ *
+ * @example Unitless ratio
+ * ```ts
+ * import { cx, leading } from 'typewritingclass'
+ *
+ * cx(leading('1.5'))
+ * // CSS: line-height: 1.5;
+ * ```
+ *
+ * @example Fixed value
+ * ```ts
+ * cx(leading('2rem'))
+ * // CSS: line-height: 2rem;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, leading, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(leading(dynamic(lineHeight)))
+ * // CSS: line-height: var(--twc-d0);
+ * // style: { '--twc-d0': lineHeight }
+ * ```
+ */
+declare function leading(value: string | number | DynamicValue): StyleRule;
+/**
+ * Sets the text alignment of an element.
+ *
+ * Accepts a raw CSS text-align string.
+ *
+ * @param value - A CSS text-align value (`'left'`, `'center'`, `'right'`, `'justify'`).
+ * @returns A {@link StyleRule} that sets `text-align`.
+ *
+ * @example Center alignment
+ * ```ts
+ * import { cx, textAlign } from 'typewritingclass'
+ *
+ * cx(textAlign('center'))
+ * // CSS: text-align: center;
+ * ```
+ *
+ * @example Right alignment
+ * ```ts
+ * cx(textAlign('right'))
+ * // CSS: text-align: right;
+ * ```
+ */
+declare function textAlign(value: string): StyleRule;
+declare function fontFamily(value: string | DynamicValue): StyleRule;
+declare function antialiased(): StyleRule;
+declare function subpixelAntialiased(): StyleRule;
+declare function italic(): StyleRule;
+declare function notItalic(): StyleRule;
+declare function normalNums(): StyleRule;
+declare function ordinal(): StyleRule;
+declare function slashedZero(): StyleRule;
+declare function liningNums(): StyleRule;
+declare function oldstyleNums(): StyleRule;
+declare function proportionalNums(): StyleRule;
+declare function tabularNums(): StyleRule;
+declare function diagonalFractions(): StyleRule;
+declare function stackedFractions(): StyleRule;
+declare function lineClamp(value: number): StyleRule;
+declare function listStyleImage(value: string): StyleRule;
+declare function listStylePosition(value: string): StyleRule;
+declare function listStyleType(value: string): StyleRule;
+declare function textDecoration(value: string): StyleRule;
+declare function textDecorationColor(value: string | DynamicValue): StyleRule;
+declare function textDecorationStyle(value: string): StyleRule;
+declare function textDecorationThickness(value: string | DynamicValue): StyleRule;
+declare function textUnderlineOffset(value: string | DynamicValue): StyleRule;
+declare function textTransform(value: string): StyleRule;
+declare function textOverflow(value: string): StyleRule;
+declare function textWrap(value: string): StyleRule;
+declare function textIndent(value: string | DynamicValue): StyleRule;
+declare function verticalAlign(value: string): StyleRule;
+declare function whitespace(value: string): StyleRule;
+declare function wordBreak(value: string): StyleRule;
+declare function hyphens(value: string): StyleRule;
+declare function content_(value: string): StyleRule;
+declare function truncate(): StyleRule;
+
+/**
+ * Sets the element to `display: flex`.
+ *
+ * Takes no arguments and produces a single flex display declaration.
+ *
+ * @returns A {@link StyleRule} that sets `display: flex`.
+ *
+ * @example
+ * ```ts
+ * import { cx, flex } from 'typewritingclass'
+ *
+ * cx(flex())
+ * // CSS: display: flex;
+ * ```
+ */
+declare function flex(): StyleRule;
+/**
+ * Sets `flex-direction: column` on a flex container.
+ *
+ * Takes no arguments. Use with `flex()` to create a column-oriented flex container.
+ *
+ * @returns A {@link StyleRule} that sets `flex-direction: column`.
+ *
+ * @example
+ * ```ts
+ * import { cx, flex, flexCol } from 'typewritingclass'
+ *
+ * cx(flex(), flexCol())
+ * // CSS: display: flex; flex-direction: column;
+ * ```
+ */
+declare function flexCol(): StyleRule;
+/**
+ * Sets `flex-direction: row` on a flex container.
+ *
+ * Takes no arguments. Use with `flex()` to create a row-oriented flex container.
+ *
+ * @returns A {@link StyleRule} that sets `flex-direction: row`.
+ *
+ * @example
+ * ```ts
+ * import { cx, flex, flexRow } from 'typewritingclass'
+ *
+ * cx(flex(), flexRow())
+ * // CSS: display: flex; flex-direction: row;
+ * ```
+ */
+declare function flexRow(): StyleRule;
+/**
+ * Sets `flex-wrap: wrap` on a flex container to allow children to wrap.
+ *
+ * Takes no arguments.
+ *
+ * @returns A {@link StyleRule} that sets `flex-wrap: wrap`.
+ *
+ * @example
+ * ```ts
+ * import { cx, flexWrap } from 'typewritingclass'
+ *
+ * cx(flexWrap())
+ * // CSS: flex-wrap: wrap;
+ * ```
+ */
+declare function flexWrap(): StyleRule;
+/**
+ * Sets the element to `display: inline-flex`.
+ *
+ * Takes no arguments and produces an inline-level flex container.
+ *
+ * @returns A {@link StyleRule} that sets `display: inline-flex`.
+ *
+ * @example
+ * ```ts
+ * import { cx, inlineFlex } from 'typewritingclass'
+ *
+ * cx(inlineFlex())
+ * // CSS: display: inline-flex;
+ * ```
+ */
+declare function inlineFlex(): StyleRule;
+/**
+ * Sets the element to `display: grid`, optionally defining equal-width columns.
+ *
+ * When called without arguments, sets only `display: grid`. When called with a
+ * column count, also sets `grid-template-columns` with equal-width `1fr` columns.
+ *
+ * @param cols - Optional number of equal-width columns.
+ * @returns A {@link StyleRule} that sets `display: grid` and optionally `grid-template-columns`.
+ *
+ * @example Grid without columns
+ * ```ts
+ * import { cx, grid } from 'typewritingclass'
+ *
+ * cx(grid())
+ * // CSS: display: grid;
+ * ```
+ *
+ * @example Grid with columns
+ * ```ts
+ * cx(grid(3))
+ * // CSS: display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
+ * ```
+ */
+declare function grid(cols?: number): StyleRule;
+/**
+ * Sets the number of equal-width grid columns.
+ *
+ * @param n - The number of columns.
+ * @returns A {@link StyleRule} that sets `grid-template-columns`.
+ *
+ * @example
+ * ```ts
+ * import { cx, gridCols } from 'typewritingclass'
+ *
+ * cx(gridCols(4))
+ * // CSS: grid-template-columns: repeat(4, minmax(0, 1fr));
+ * ```
+ */
+declare function gridCols(n: number): StyleRule;
+/**
+ * Sets the number of equal-height grid rows.
+ *
+ * @param n - The number of rows.
+ * @returns A {@link StyleRule} that sets `grid-template-rows`.
+ *
+ * @example
+ * ```ts
+ * import { cx, gridRows } from 'typewritingclass'
+ *
+ * cx(gridRows(3))
+ * // CSS: grid-template-rows: repeat(3, minmax(0, 1fr));
+ * ```
+ */
+declare function gridRows(n: number): StyleRule;
+/**
+ * Sets the width of an element.
+ *
+ * Accepts a theme spacing scale number (maps to the spacing scale), a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'100%'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `width`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, w } from 'typewritingclass'
+ *
+ * cx(w(64))
+ * // CSS: width: 16rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(w('100%'))
+ * // CSS: width: 100%;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, w, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(w(dynamic(width)))
+ * // CSS: width: var(--twc-d0);
+ * // style: { '--twc-d0': width }
+ * ```
+ */
+declare function w(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets the height of an element.
+ *
+ * Accepts a theme spacing scale number (maps to the spacing scale), a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'100vh'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `height`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, h } from 'typewritingclass'
+ *
+ * cx(h(12))
+ * // CSS: height: 3rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(h('100vh'))
+ * // CSS: height: 100vh;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, h, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(h(dynamic(height)))
+ * // CSS: height: var(--twc-d0);
+ * // style: { '--twc-d0': height }
+ * ```
+ */
+declare function h(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets both width and height of an element to the same value.
+ *
+ * Accepts a theme spacing scale number (maps to the spacing scale), a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'48px'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets both `width` and `height`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, size } from 'typewritingclass'
+ *
+ * cx(size(10))
+ * // CSS: width: 2.5rem; height: 2.5rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(size('48px'))
+ * // CSS: width: 48px; height: 48px;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, size, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(size(dynamic(dim)))
+ * // CSS: width: var(--twc-d0); height: var(--twc-d0);
+ * // style: { '--twc-d0': dim }
+ * ```
+ */
+declare function size(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets the minimum width of an element.
+ *
+ * Accepts a theme spacing scale number (maps to the spacing scale), a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'200px'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `min-width`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, minW } from 'typewritingclass'
+ *
+ * cx(minW(48))
+ * // CSS: min-width: 12rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(minW('0'))
+ * // CSS: min-width: 0;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, minW, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(minW(dynamic(minWidth)))
+ * // CSS: min-width: var(--twc-d0);
+ * // style: { '--twc-d0': minWidth }
+ * ```
+ */
+declare function minW(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets the minimum height of an element.
+ *
+ * Accepts a theme spacing scale number (maps to the spacing scale), a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'100vh'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `min-height`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, minH } from 'typewritingclass'
+ *
+ * cx(minH(96))
+ * // CSS: min-height: 24rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(minH('100vh'))
+ * // CSS: min-height: 100vh;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, minH, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(minH(dynamic(minHeight)))
+ * // CSS: min-height: var(--twc-d0);
+ * // style: { '--twc-d0': minHeight }
+ * ```
+ */
+declare function minH(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets the maximum width of an element.
+ *
+ * Accepts a theme spacing scale number (maps to the spacing scale), a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'768px'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `max-width`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, maxW } from 'typewritingclass'
+ *
+ * cx(maxW(80))
+ * // CSS: max-width: 20rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(maxW('768px'))
+ * // CSS: max-width: 768px;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, maxW, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(maxW(dynamic(maxWidth)))
+ * // CSS: max-width: var(--twc-d0);
+ * // style: { '--twc-d0': maxWidth }
+ * ```
+ */
+declare function maxW(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets the maximum height of an element.
+ *
+ * Accepts a theme spacing scale number (maps to the spacing scale), a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'100vh'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `max-height`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, maxH } from 'typewritingclass'
+ *
+ * cx(maxH(40))
+ * // CSS: max-height: 10rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(maxH('100vh'))
+ * // CSS: max-height: 100vh;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, maxH, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(maxH(dynamic(maxHeight)))
+ * // CSS: max-height: var(--twc-d0);
+ * // style: { '--twc-d0': maxHeight }
+ * ```
+ */
+declare function maxH(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets the CSS `display` property of an element.
+ *
+ * Accepts any valid CSS display value as a string.
+ *
+ * @param value - A CSS display value (`'block'`, `'none'`, `'inline-block'`, etc.).
+ * @returns A {@link StyleRule} that sets `display`.
+ *
+ * @example Block display
+ * ```ts
+ * import { cx, display } from 'typewritingclass'
+ *
+ * cx(display('block'))
+ * // CSS: display: block;
+ * ```
+ *
+ * @example Hide element
+ * ```ts
+ * cx(display('none'))
+ * // CSS: display: none;
+ * ```
+ */
+declare function display(value: string): StyleRule;
+/**
+ * Sets the `align-items` property on a flex or grid container.
+ *
+ * Accepts any valid CSS align-items value as a string.
+ *
+ * @param value - A CSS align-items value (`'center'`, `'flex-start'`, `'stretch'`, etc.).
+ * @returns A {@link StyleRule} that sets `align-items`.
+ *
+ * @example Center alignment
+ * ```ts
+ * import { cx, items } from 'typewritingclass'
+ *
+ * cx(items('center'))
+ * // CSS: align-items: center;
+ * ```
+ *
+ * @example Start alignment
+ * ```ts
+ * cx(items('flex-start'))
+ * // CSS: align-items: flex-start;
+ * ```
+ */
+declare function items(value: string): StyleRule;
+/**
+ * Sets the `justify-content` property on a flex or grid container.
+ *
+ * Accepts any valid CSS justify-content value as a string.
+ *
+ * @param value - A CSS justify-content value (`'center'`, `'space-between'`, `'flex-end'`, etc.).
+ * @returns A {@link StyleRule} that sets `justify-content`.
+ *
+ * @example Center justification
+ * ```ts
+ * import { cx, justify } from 'typewritingclass'
+ *
+ * cx(justify('center'))
+ * // CSS: justify-content: center;
+ * ```
+ *
+ * @example Space between
+ * ```ts
+ * cx(justify('space-between'))
+ * // CSS: justify-content: space-between;
+ * ```
+ */
+declare function justify(value: string): StyleRule;
+/**
+ * Sets the `align-self` property on a flex or grid child.
+ *
+ * Accepts any valid CSS align-self value as a string.
+ *
+ * @param value - A CSS align-self value (`'center'`, `'flex-start'`, `'stretch'`, etc.).
+ * @returns A {@link StyleRule} that sets `align-self`.
+ *
+ * @example Center self-alignment
+ * ```ts
+ * import { cx, self } from 'typewritingclass'
+ *
+ * cx(self('center'))
+ * // CSS: align-self: center;
+ * ```
+ *
+ * @example End self-alignment
+ * ```ts
+ * cx(self('flex-end'))
+ * // CSS: align-self: flex-end;
+ * ```
+ */
+declare function self(value: string): StyleRule;
+/**
+ * Sets the `overflow` behavior on both axes of an element.
+ *
+ * Accepts any valid CSS overflow value as a string.
+ *
+ * @param value - A CSS overflow value (`'hidden'`, `'auto'`, `'scroll'`, `'visible'`).
+ * @returns A {@link StyleRule} that sets `overflow`.
+ *
+ * @example Hidden overflow
+ * ```ts
+ * import { cx, overflow } from 'typewritingclass'
+ *
+ * cx(overflow('hidden'))
+ * // CSS: overflow: hidden;
+ * ```
+ *
+ * @example Auto overflow
+ * ```ts
+ * cx(overflow('auto'))
+ * // CSS: overflow: auto;
+ * ```
+ */
+declare function overflow(value: string): StyleRule;
+/**
+ * Sets the horizontal overflow behavior of an element.
+ *
+ * Accepts any valid CSS overflow-x value as a string.
+ *
+ * @param value - A CSS overflow-x value (`'hidden'`, `'auto'`, `'scroll'`, `'visible'`).
+ * @returns A {@link StyleRule} that sets `overflow-x`.
+ *
+ * @example Auto horizontal scroll
+ * ```ts
+ * import { cx, overflowX } from 'typewritingclass'
+ *
+ * cx(overflowX('auto'))
+ * // CSS: overflow-x: auto;
+ * ```
+ *
+ * @example Hidden horizontal overflow
+ * ```ts
+ * cx(overflowX('hidden'))
+ * // CSS: overflow-x: hidden;
+ * ```
+ */
+declare function overflowX(value: string): StyleRule;
+/**
+ * Sets the vertical overflow behavior of an element.
+ *
+ * Accepts any valid CSS overflow-y value as a string.
+ *
+ * @param value - A CSS overflow-y value (`'hidden'`, `'auto'`, `'scroll'`, `'visible'`).
+ * @returns A {@link StyleRule} that sets `overflow-y`.
+ *
+ * @example Scrollable vertical overflow
+ * ```ts
+ * import { cx, overflowY } from 'typewritingclass'
+ *
+ * cx(overflowY('scroll'))
+ * // CSS: overflow-y: scroll;
+ * ```
+ *
+ * @example Hidden vertical overflow
+ * ```ts
+ * cx(overflowY('hidden'))
+ * // CSS: overflow-y: hidden;
+ * ```
+ */
+declare function overflowY(value: string): StyleRule;
+/**
+ * Sets the element to `position: relative`.
+ *
+ * Takes no arguments. Creates a positioning context for absolutely positioned children.
+ *
+ * @returns A {@link StyleRule} that sets `position: relative`.
+ *
+ * @example
+ * ```ts
+ * import { cx, relative } from 'typewritingclass'
+ *
+ * cx(relative())
+ * // CSS: position: relative;
+ * ```
+ */
+declare function relative(): StyleRule;
+/**
+ * Sets the element to `position: absolute`.
+ *
+ * Takes no arguments. Removes the element from normal flow and positions it
+ * relative to its nearest positioned ancestor.
+ *
+ * @returns A {@link StyleRule} that sets `position: absolute`.
+ *
+ * @example
+ * ```ts
+ * import { cx, absolute } from 'typewritingclass'
+ *
+ * cx(absolute())
+ * // CSS: position: absolute;
+ * ```
+ */
+declare function absolute(): StyleRule;
+/**
+ * Sets the element to `position: fixed`.
+ *
+ * Takes no arguments. Removes the element from normal flow and positions it
+ * relative to the viewport.
+ *
+ * @returns A {@link StyleRule} that sets `position: fixed`.
+ *
+ * @example
+ * ```ts
+ * import { cx, fixed } from 'typewritingclass'
+ *
+ * cx(fixed())
+ * // CSS: position: fixed;
+ * ```
+ */
+declare function fixed(): StyleRule;
+/**
+ * Sets the element to `position: sticky`.
+ *
+ * Takes no arguments. The element is treated as relative until it crosses a
+ * specified threshold, then treated as fixed.
+ *
+ * @returns A {@link StyleRule} that sets `position: sticky`.
+ *
+ * @example
+ * ```ts
+ * import { cx, sticky } from 'typewritingclass'
+ *
+ * cx(sticky())
+ * // CSS: position: sticky;
+ * ```
+ */
+declare function sticky(): StyleRule;
+/**
+ * Sets the `top` position offset of a positioned element.
+ *
+ * Accepts a theme spacing scale number (maps to the spacing scale), a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'0'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `top`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, top } from 'typewritingclass'
+ *
+ * cx(top(0))
+ * // CSS: top: 0px;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(top('50%'))
+ * // CSS: top: 50%;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, top, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(top(dynamic(offset)))
+ * // CSS: top: var(--twc-d0);
+ * // style: { '--twc-d0': offset }
+ * ```
+ */
+declare function top(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets the `right` position offset of a positioned element.
+ *
+ * Accepts a theme spacing scale number (maps to the spacing scale), a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'0'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `right`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, right } from 'typewritingclass'
+ *
+ * cx(right(4))
+ * // CSS: right: 1rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(right('0'))
+ * // CSS: right: 0;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, right, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(right(dynamic(offset)))
+ * // CSS: right: var(--twc-d0);
+ * // style: { '--twc-d0': offset }
+ * ```
+ */
+declare function right(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets the `bottom` position offset of a positioned element.
+ *
+ * Accepts a theme spacing scale number (maps to the spacing scale), a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'0'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `bottom`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, bottom } from 'typewritingclass'
+ *
+ * cx(bottom(0))
+ * // CSS: bottom: 0px;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(bottom('2rem'))
+ * // CSS: bottom: 2rem;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, bottom, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(bottom(dynamic(offset)))
+ * // CSS: bottom: var(--twc-d0);
+ * // style: { '--twc-d0': offset }
+ * ```
+ */
+declare function bottom(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets the `left` position offset of a positioned element.
+ *
+ * Accepts a theme spacing scale number (maps to the spacing scale), a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`4` -> `1rem`), raw string (`'0'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `left`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, left } from 'typewritingclass'
+ *
+ * cx(left(4))
+ * // CSS: left: 1rem;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(left('50%'))
+ * // CSS: left: 50%;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, left, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(left(dynamic(offset)))
+ * // CSS: left: var(--twc-d0);
+ * // style: { '--twc-d0': offset }
+ * ```
+ */
+declare function left(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets the `inset` shorthand property (top, right, bottom, left) on a positioned element.
+ *
+ * Accepts a theme spacing scale number (maps to the spacing scale), a raw CSS string,
+ * or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Spacing scale number (`0` -> `0px`), raw string (`'0'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `inset`.
+ *
+ * @example Theme scale
+ * ```ts
+ * import { cx, inset } from 'typewritingclass'
+ *
+ * cx(inset(0))
+ * // CSS: inset: 0px;
+ * ```
+ *
+ * @example Raw value
+ * ```ts
+ * cx(inset('0'))
+ * // CSS: inset: 0;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, inset, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(inset(dynamic(offset)))
+ * // CSS: inset: var(--twc-d0);
+ * // style: { '--twc-d0': offset }
+ * ```
+ */
+declare function inset(value: number | string | DynamicValue): StyleRule;
+/**
+ * Sets the `z-index` stacking order of an element.
+ *
+ * Accepts a numeric z-index value, a raw string, or a {@link DynamicValue}
+ * for runtime values. Numeric values are converted to strings.
+ *
+ * @param value - A z-index number (`10`, `50`), raw string (`'auto'`), or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `z-index`.
+ *
+ * @example Numeric z-index
+ * ```ts
+ * import { cx, z } from 'typewritingclass'
+ *
+ * cx(z(10))
+ * // CSS: z-index: 10;
+ * ```
+ *
+ * @example String z-index
+ * ```ts
+ * cx(z('auto'))
+ * // CSS: z-index: auto;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, z, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(z(dynamic(zIndex)))
+ * // CSS: z-index: var(--twc-d0);
+ * // style: { '--twc-d0': zIndex }
+ * ```
+ */
+declare function z(value: number | string | DynamicValue): StyleRule;
+declare function aspectRatio(value: string): StyleRule;
+declare function columns(value: string | number): StyleRule;
+declare function breakAfter(value: string): StyleRule;
+declare function breakBefore(value: string): StyleRule;
+declare function breakInside(value: string): StyleRule;
+declare function boxDecorationBreak(value: string): StyleRule;
+declare function boxSizing(value: string): StyleRule;
+declare function float_(value: string): StyleRule;
+declare function clear_(value: string): StyleRule;
+declare function isolate(): StyleRule;
+declare function isolationAuto(): StyleRule;
+declare function objectFit(value: string): StyleRule;
+declare function objectPosition(value: string): StyleRule;
+declare function overscrollBehavior(value: string): StyleRule;
+declare function overscrollX(value: string): StyleRule;
+declare function overscrollY(value: string): StyleRule;
+declare function static_(): StyleRule;
+declare function insetX(value: number | string | DynamicValue): StyleRule;
+declare function insetY(value: number | string | DynamicValue): StyleRule;
+declare function start(value: number | string | DynamicValue): StyleRule;
+declare function end(value: number | string | DynamicValue): StyleRule;
+declare function visible(): StyleRule;
+declare function invisible(): StyleRule;
+declare function collapse_(): StyleRule;
+declare function flexBasis(value: number | string | DynamicValue): StyleRule;
+declare function flexRowReverse(): StyleRule;
+declare function flexColReverse(): StyleRule;
+declare function flexWrapReverse(): StyleRule;
+declare function flexNowrap(): StyleRule;
+declare function flex1(): StyleRule;
+declare function flexAuto(): StyleRule;
+declare function flexInitial(): StyleRule;
+declare function flexNone(): StyleRule;
+declare function grow(value?: string | number): StyleRule;
+declare function shrink(value?: string | number): StyleRule;
+declare function order(value: number | string | DynamicValue): StyleRule;
+declare function colSpan(value: number | string): StyleRule;
+declare function colStart(value: number | string): StyleRule;
+declare function colEnd(value: number | string): StyleRule;
+declare function rowSpan(value: number | string): StyleRule;
+declare function rowStart(value: number | string): StyleRule;
+declare function rowEnd(value: number | string): StyleRule;
+declare function gridFlow(value: string): StyleRule;
+declare function autoCols(value: string): StyleRule;
+declare function autoRows(value: string): StyleRule;
+declare function justifyItems(value: string): StyleRule;
+declare function justifySelf(value: string): StyleRule;
+declare function alignContent(value: string): StyleRule;
+declare function placeContent(value: string): StyleRule;
+declare function placeItems(value: string): StyleRule;
+declare function placeSelf(value: string): StyleRule;
+declare function container(): StyleRule;
+
+/**
+ * Sets the `border-radius` on all corners of an element.
+ *
+ * When called without arguments, uses the default border radius (`0.25rem`).
+ * Accepts an optional raw CSS string or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Optional CSS border-radius string (`'0.5rem'`, `'9999px'`) or `dynamic()` value. Defaults to `'0.25rem'`.
+ * @returns A {@link StyleRule} that sets `border-radius`.
+ *
+ * @example Default radius
+ * ```ts
+ * import { cx, rounded } from 'typewritingclass'
+ *
+ * cx(rounded())
+ * // CSS: border-radius: 0.25rem;
+ * ```
+ *
+ * @example Custom radius
+ * ```ts
+ * cx(rounded('0.5rem'))
+ * // CSS: border-radius: 0.5rem;
+ * ```
+ *
+ * @example Full rounding (pill shape)
+ * ```ts
+ * cx(rounded('9999px'))
+ * // CSS: border-radius: 9999px;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, rounded, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(rounded(dynamic(radius)))
+ * // CSS: border-radius: var(--twc-d0);
+ * // style: { '--twc-d0': radius }
+ * ```
+ */
+declare function rounded(value?: string | DynamicValue): StyleRule;
+/**
+ * Sets the `border-radius` on the top-left and top-right corners of an element.
+ *
+ * When called without arguments, uses the default border radius (`0.25rem`).
+ * Accepts an optional raw CSS string or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Optional CSS border-radius string (`'0.5rem'`) or `dynamic()` value. Defaults to `'0.25rem'`.
+ * @returns A {@link StyleRule} that sets `border-top-left-radius` and `border-top-right-radius`.
+ *
+ * @example Default radius
+ * ```ts
+ * import { cx, roundedT } from 'typewritingclass'
+ *
+ * cx(roundedT())
+ * // CSS: border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem;
+ * ```
+ *
+ * @example Custom radius
+ * ```ts
+ * cx(roundedT('1rem'))
+ * // CSS: border-top-left-radius: 1rem; border-top-right-radius: 1rem;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, roundedT, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(roundedT(dynamic(radius)))
+ * // CSS: border-top-left-radius: var(--twc-d0); border-top-right-radius: var(--twc-d0);
+ * // style: { '--twc-d0': radius }
+ * ```
+ */
+declare function roundedT(value?: string | DynamicValue): StyleRule;
+/**
+ * Sets the `border-radius` on the bottom-left and bottom-right corners of an element.
+ *
+ * When called without arguments, uses the default border radius (`0.25rem`).
+ * Accepts an optional raw CSS string or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Optional CSS border-radius string (`'0.5rem'`) or `dynamic()` value. Defaults to `'0.25rem'`.
+ * @returns A {@link StyleRule} that sets `border-bottom-left-radius` and `border-bottom-right-radius`.
+ *
+ * @example Default radius
+ * ```ts
+ * import { cx, roundedB } from 'typewritingclass'
+ *
+ * cx(roundedB())
+ * // CSS: border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem;
+ * ```
+ *
+ * @example Custom radius
+ * ```ts
+ * cx(roundedB('1rem'))
+ * // CSS: border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, roundedB, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(roundedB(dynamic(radius)))
+ * // CSS: border-bottom-left-radius: var(--twc-d0); border-bottom-right-radius: var(--twc-d0);
+ * // style: { '--twc-d0': radius }
+ * ```
+ */
+declare function roundedB(value?: string | DynamicValue): StyleRule;
+/**
+ * Sets the `border-radius` on the top-left and bottom-left corners of an element.
+ *
+ * When called without arguments, uses the default border radius (`0.25rem`).
+ * Accepts an optional raw CSS string or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Optional CSS border-radius string (`'0.5rem'`) or `dynamic()` value. Defaults to `'0.25rem'`.
+ * @returns A {@link StyleRule} that sets `border-top-left-radius` and `border-bottom-left-radius`.
+ *
+ * @example Default radius
+ * ```ts
+ * import { cx, roundedL } from 'typewritingclass'
+ *
+ * cx(roundedL())
+ * // CSS: border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;
+ * ```
+ *
+ * @example Custom radius
+ * ```ts
+ * cx(roundedL('0.75rem'))
+ * // CSS: border-top-left-radius: 0.75rem; border-bottom-left-radius: 0.75rem;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, roundedL, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(roundedL(dynamic(radius)))
+ * // CSS: border-top-left-radius: var(--twc-d0); border-bottom-left-radius: var(--twc-d0);
+ * // style: { '--twc-d0': radius }
+ * ```
+ */
+declare function roundedL(value?: string | DynamicValue): StyleRule;
+/**
+ * Sets the `border-radius` on the top-right and bottom-right corners of an element.
+ *
+ * When called without arguments, uses the default border radius (`0.25rem`).
+ * Accepts an optional raw CSS string or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Optional CSS border-radius string (`'0.5rem'`) or `dynamic()` value. Defaults to `'0.25rem'`.
+ * @returns A {@link StyleRule} that sets `border-top-right-radius` and `border-bottom-right-radius`.
+ *
+ * @example Default radius
+ * ```ts
+ * import { cx, roundedR } from 'typewritingclass'
+ *
+ * cx(roundedR())
+ * // CSS: border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem;
+ * ```
+ *
+ * @example Custom radius
+ * ```ts
+ * cx(roundedR('0.75rem'))
+ * // CSS: border-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, roundedR, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(roundedR(dynamic(radius)))
+ * // CSS: border-top-right-radius: var(--twc-d0); border-bottom-right-radius: var(--twc-d0);
+ * // style: { '--twc-d0': radius }
+ * ```
+ */
+declare function roundedR(value?: string | DynamicValue): StyleRule;
+/**
+ * Sets a solid border on all sides of an element.
+ *
+ * When called without arguments, defaults to `1px` width. Sets both
+ * `border-width` and `border-style: solid`.
+ *
+ * @param width - Optional CSS border-width string (`'2px'`). Defaults to `'1px'`.
+ * @returns A {@link StyleRule} that sets `border-width` and `border-style`.
+ *
+ * @example Default width
+ * ```ts
+ * import { cx, border } from 'typewritingclass'
+ *
+ * cx(border())
+ * // CSS: border-width: 1px; border-style: solid;
+ * ```
+ *
+ * @example Custom width
+ * ```ts
+ * cx(border('2px'))
+ * // CSS: border-width: 2px; border-style: solid;
+ * ```
+ */
+declare function border(width?: string | number): StyleRule;
+/**
+ * Sets a solid border on the top side of an element.
+ *
+ * When called without arguments, defaults to `1px` width. Sets both
+ * `border-top-width` and `border-style: solid`.
+ *
+ * @param width - Optional CSS border-width string (`'2px'`). Defaults to `'1px'`.
+ * @returns A {@link StyleRule} that sets `border-top-width` and `border-style`.
+ *
+ * @example Default width
+ * ```ts
+ * import { cx, borderT } from 'typewritingclass'
+ *
+ * cx(borderT())
+ * // CSS: border-top-width: 1px; border-style: solid;
+ * ```
+ *
+ * @example Custom width
+ * ```ts
+ * cx(borderT('2px'))
+ * // CSS: border-top-width: 2px; border-style: solid;
+ * ```
+ */
+declare function borderT(width?: string | number): StyleRule;
+/**
+ * Sets a solid border on the right side of an element.
+ *
+ * When called without arguments, defaults to `1px` width. Sets both
+ * `border-right-width` and `border-style: solid`.
+ *
+ * @param width - Optional CSS border-width string (`'2px'`). Defaults to `'1px'`.
+ * @returns A {@link StyleRule} that sets `border-right-width` and `border-style`.
+ *
+ * @example Default width
+ * ```ts
+ * import { cx, borderR } from 'typewritingclass'
+ *
+ * cx(borderR())
+ * // CSS: border-right-width: 1px; border-style: solid;
+ * ```
+ *
+ * @example Custom width
+ * ```ts
+ * cx(borderR('3px'))
+ * // CSS: border-right-width: 3px; border-style: solid;
+ * ```
+ */
+declare function borderR(width?: string | number): StyleRule;
+/**
+ * Sets a solid border on the bottom side of an element.
+ *
+ * When called without arguments, defaults to `1px` width. Sets both
+ * `border-bottom-width` and `border-style: solid`.
+ *
+ * @param width - Optional CSS border-width string (`'2px'`). Defaults to `'1px'`.
+ * @returns A {@link StyleRule} that sets `border-bottom-width` and `border-style`.
+ *
+ * @example Default width
+ * ```ts
+ * import { cx, borderB } from 'typewritingclass'
+ *
+ * cx(borderB())
+ * // CSS: border-bottom-width: 1px; border-style: solid;
+ * ```
+ *
+ * @example Custom width
+ * ```ts
+ * cx(borderB('2px'))
+ * // CSS: border-bottom-width: 2px; border-style: solid;
+ * ```
+ */
+declare function borderB(width?: string | number): StyleRule;
+/**
+ * Sets a solid border on the left side of an element.
+ *
+ * When called without arguments, defaults to `1px` width. Sets both
+ * `border-left-width` and `border-style: solid`.
+ *
+ * @param width - Optional CSS border-width string (`'2px'`). Defaults to `'1px'`.
+ * @returns A {@link StyleRule} that sets `border-left-width` and `border-style`.
+ *
+ * @example Default width
+ * ```ts
+ * import { cx, borderL } from 'typewritingclass'
+ *
+ * cx(borderL())
+ * // CSS: border-left-width: 1px; border-style: solid;
+ * ```
+ *
+ * @example Custom width
+ * ```ts
+ * cx(borderL('4px'))
+ * // CSS: border-left-width: 4px; border-style: solid;
+ * ```
+ */
+declare function borderL(width?: string | number): StyleRule;
+/**
+ * Creates a focus-ring-style `box-shadow` around an element.
+ *
+ * When called without arguments, defaults to `3px` width and `#3b82f6` (blue) color.
+ * Produces a `box-shadow` with zero offset and zero blur, acting as an outline alternative.
+ *
+ * @param width - Optional ring width string (`'2px'`). Defaults to `'3px'`.
+ * @param color - Optional ring color string (`'#ef4444'`). Defaults to `'#3b82f6'`.
+ * @returns A {@link StyleRule} that sets `box-shadow`.
+ *
+ * @example Default ring
+ * ```ts
+ * import { cx, ring } from 'typewritingclass'
+ *
+ * cx(ring())
+ * // CSS: box-shadow: 0 0 0 3px #3b82f6;
+ * ```
+ *
+ * @example Custom width and color
+ * ```ts
+ * cx(ring('2px', '#ef4444'))
+ * // CSS: box-shadow: 0 0 0 2px #ef4444;
+ * ```
+ *
+ * @example Custom width only
+ * ```ts
+ * cx(ring('1px'))
+ * // CSS: box-shadow: 0 0 0 1px #3b82f6;
+ * ```
+ */
+declare function ring(width?: string | number, color?: string): StyleRule;
+declare function roundedTL(value?: string | DynamicValue): StyleRule;
+declare function roundedTR(value?: string | DynamicValue): StyleRule;
+declare function roundedBR(value?: string | DynamicValue): StyleRule;
+declare function roundedBL(value?: string | DynamicValue): StyleRule;
+declare function roundedSS(value?: string | DynamicValue): StyleRule;
+declare function roundedSE(value?: string | DynamicValue): StyleRule;
+declare function roundedEE(value?: string | DynamicValue): StyleRule;
+declare function roundedES(value?: string | DynamicValue): StyleRule;
+declare function borderX(width?: string | number): StyleRule;
+declare function borderY(width?: string | number): StyleRule;
+declare function borderS(width?: string | number): StyleRule;
+declare function borderE(width?: string | number): StyleRule;
+declare function borderStyle(value: string): StyleRule;
+declare function outlineWidth(value: string | number): StyleRule;
+declare function outlineColor(value: string | DynamicValue): StyleRule;
+declare function outlineStyle(value: string): StyleRule;
+declare function outlineOffset(value: string | number): StyleRule;
+declare function outline(width?: string | number, style?: string, color?: string): StyleRule;
+declare function outlineNone(): StyleRule;
+declare function ringInset(): StyleRule;
+declare function ringColor(value: string | DynamicValue): StyleRule;
+declare function ringOffsetWidth(value: string | number): StyleRule;
+declare function ringOffsetColor(value: string | DynamicValue): StyleRule;
+declare function divideX(width?: string | number): StyleRule;
+declare function divideY(width?: string | number): StyleRule;
+declare function divideColor(value: string | DynamicValue): StyleRule;
+declare function divideStyle(value: string): StyleRule;
+declare function divideXReverse(): StyleRule;
+declare function divideYReverse(): StyleRule;
+
+/**
+ * Sets the `box-shadow` of an element.
+ *
+ * When called without arguments, uses the default shadow from the shadows theme
+ * (`0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)`).
+ * Accepts an optional raw CSS string or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - Optional CSS box-shadow string or `dynamic()` value. Defaults to the theme's `DEFAULT` shadow.
+ * @returns A {@link StyleRule} that sets `box-shadow`.
+ *
+ * @example Default shadow
+ * ```ts
+ * import { cx, shadow } from 'typewritingclass'
+ *
+ * cx(shadow())
+ * // CSS: box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+ * ```
+ *
+ * @example Custom shadow
+ * ```ts
+ * cx(shadow('0 4px 6px -1px rgb(0 0 0 / 0.1)'))
+ * // CSS: box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+ * ```
+ *
+ * @example No shadow
+ * ```ts
+ * cx(shadow('none'))
+ * // CSS: box-shadow: none;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, shadow, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(shadow(dynamic(shadowValue)))
+ * // CSS: box-shadow: var(--twc-d0);
+ * // style: { '--twc-d0': shadowValue }
+ * ```
+ */
+declare function shadow(value?: string | DynamicValue): StyleRule;
+/**
+ * Sets the `opacity` of an element.
+ *
+ * Accepts a numeric opacity value (between `0` and `1`) or a {@link DynamicValue}
+ * for runtime values. The numeric value is converted to a string for the CSS declaration.
+ *
+ * @param value - A numeric opacity (`0` to `1`) or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `opacity`.
+ *
+ * @example Fully opaque
+ * ```ts
+ * import { cx, opacity } from 'typewritingclass'
+ *
+ * cx(opacity(1))
+ * // CSS: opacity: 1;
+ * ```
+ *
+ * @example Semi-transparent
+ * ```ts
+ * cx(opacity(0.5))
+ * // CSS: opacity: 0.5;
+ * ```
+ *
+ * @example Hidden
+ * ```ts
+ * cx(opacity(0))
+ * // CSS: opacity: 0;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, opacity, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(opacity(dynamic(opacityValue)))
+ * // CSS: opacity: var(--twc-d0);
+ * // style: { '--twc-d0': opacityValue }
+ * ```
+ */
+declare function opacity(value: number | DynamicValue): StyleRule;
+/**
+ * Sets the `backdrop-filter` CSS property on an element.
+ *
+ * Applies graphical effects (such as blurring or color shifting) to the area
+ * behind the element. Accepts a raw CSS backdrop-filter string or a
+ * {@link DynamicValue} for runtime values.
+ *
+ * @param value - A CSS backdrop-filter string (`'blur(8px)'`, `'saturate(180%)'`) or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `backdrop-filter`.
+ *
+ * @example Blur backdrop
+ * ```ts
+ * import { cx, backdrop } from 'typewritingclass'
+ *
+ * cx(backdrop('blur(8px)'))
+ * // CSS: backdrop-filter: blur(8px);
+ * ```
+ *
+ * @example Saturate backdrop
+ * ```ts
+ * cx(backdrop('saturate(180%)'))
+ * // CSS: backdrop-filter: saturate(180%);
+ * ```
+ *
+ * @example Combined filters
+ * ```ts
+ * cx(backdrop('blur(12px) saturate(150%)'))
+ * // CSS: backdrop-filter: blur(12px) saturate(150%);
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, backdrop, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(backdrop(dynamic(filterValue)))
+ * // CSS: backdrop-filter: var(--twc-d0);
+ * // style: { '--twc-d0': filterValue }
+ * ```
+ */
+declare function backdrop(value: string | DynamicValue): StyleRule;
+declare function shadowColor(value: string | DynamicValue): StyleRule;
+declare function mixBlendMode(value: string): StyleRule;
+declare function bgBlendMode(value: string): StyleRule;
+
+/**
+ * Sets the `cursor` style of an element.
+ *
+ * Accepts a raw CSS cursor string or a {@link DynamicValue} for runtime values.
+ *
+ * @param value - A CSS cursor value (`'pointer'`, `'grab'`, `'not-allowed'`, etc.) or `dynamic()` value.
+ * @returns A {@link StyleRule} that sets `cursor`.
+ *
+ * @example Pointer cursor
+ * ```ts
+ * import { cx, cursor } from 'typewritingclass'
+ *
+ * cx(cursor('pointer'))
+ * // CSS: cursor: pointer;
+ * ```
+ *
+ * @example Not-allowed cursor
+ * ```ts
+ * cx(cursor('not-allowed'))
+ * // CSS: cursor: not-allowed;
+ * ```
+ *
+ * @example Dynamic value
+ * ```ts
+ * import { dcx, cursor, dynamic } from 'typewritingclass'
+ *
+ * const { className, style } = dcx(cursor(dynamic(cursorType)))
+ * // CSS: cursor: var(--twc-d0);
+ * // style: { '--twc-d0': cursorType }
+ * ```
+ */
+declare function cursor(value: string | DynamicValue): StyleRule;
+/**
+ * Sets the `user-select` behavior of an element.
+ *
+ * Controls whether the user can select text within the element.
+ * Accepts a raw CSS user-select string.
+ *
+ * @param value - A CSS user-select value (`'none'`, `'text'`, `'all'`, `'auto'`).
+ * @returns A {@link StyleRule} that sets `user-select`.
+ *
+ * @example Prevent selection
+ * ```ts
+ * import { cx, select } from 'typewritingclass'
+ *
+ * cx(select('none'))
+ * // CSS: user-select: none;
+ * ```
+ *
+ * @example Allow text selection
+ * ```ts
+ * cx(select('text'))
+ * // CSS: user-select: text;
+ * ```
+ *
+ * @example Select all on click
+ * ```ts
+ * cx(select('all'))
+ * // CSS: user-select: all;
+ * ```
+ */
+declare function select(value: string): StyleRule;
+/**
+ * Sets the `pointer-events` behavior of an element.
+ *
+ * Controls whether the element can be the target of pointer events (clicks, hovers, etc.).
+ * Accepts a raw CSS pointer-events string.
+ *
+ * @param value - A CSS pointer-events value (`'none'`, `'auto'`).
+ * @returns A {@link StyleRule} that sets `pointer-events`.
+ *
+ * @example Disable pointer events
+ * ```ts
+ * import { cx, pointerEvents } from 'typewritingclass'
+ *
+ * cx(pointerEvents('none'))
+ * // CSS: pointer-events: none;
+ * ```
+ *
+ * @example Enable pointer events
+ * ```ts
+ * cx(pointerEvents('auto'))
+ * // CSS: pointer-events: auto;
+ * ```
+ */
+declare function pointerEvents(value: string): StyleRule;
+declare function accentColor(value: string | DynamicValue): StyleRule;
+declare function appearance(value: string): StyleRule;
+declare function caretColor(value: string | DynamicValue): StyleRule;
+declare function resize(value: string): StyleRule;
+declare function scrollBehavior(value: string): StyleRule;
+declare function scrollMargin(value: number | string | DynamicValue): StyleRule;
+declare function scrollMarginX(value: number | string | DynamicValue): StyleRule;
+declare function scrollMarginY(value: number | string | DynamicValue): StyleRule;
+declare function scrollMarginT(value: number | string | DynamicValue): StyleRule;
+declare function scrollMarginR(value: number | string | DynamicValue): StyleRule;
+declare function scrollMarginB(value: number | string | DynamicValue): StyleRule;
+declare function scrollMarginL(value: number | string | DynamicValue): StyleRule;
+declare function scrollPadding(value: number | string | DynamicValue): StyleRule;
+declare function scrollPaddingX(value: number | string | DynamicValue): StyleRule;
+declare function scrollPaddingY(value: number | string | DynamicValue): StyleRule;
+declare function scrollPaddingT(value: number | string | DynamicValue): StyleRule;
+declare function scrollPaddingR(value: number | string | DynamicValue): StyleRule;
+declare function scrollPaddingB(value: number | string | DynamicValue): StyleRule;
+declare function scrollPaddingL(value: number | string | DynamicValue): StyleRule;
+declare function snapAlign(value: string): StyleRule;
+declare function snapStop(value: string): StyleRule;
+declare function snapType(value: string): StyleRule;
+declare function touchAction(value: string): StyleRule;
+declare function willChange(value: string): StyleRule;
+
+declare function blur(value?: string | DynamicValue): StyleRule;
+declare function brightness(value: string | DynamicValue): StyleRule;
+declare function contrast(value: string | DynamicValue): StyleRule;
+declare function dropShadow(value?: string | DynamicValue): StyleRule;
+declare function grayscale(value?: string | DynamicValue): StyleRule;
+declare function hueRotate(value: string | DynamicValue): StyleRule;
+declare function invert(value?: string | DynamicValue): StyleRule;
+declare function saturate(value: string | DynamicValue): StyleRule;
+declare function sepia(value?: string | DynamicValue): StyleRule;
+declare function backdropBlur(value?: string | DynamicValue): StyleRule;
+declare function backdropBrightness(value: string | DynamicValue): StyleRule;
+declare function backdropContrast(value: string | DynamicValue): StyleRule;
+declare function backdropGrayscale(value?: string | DynamicValue): StyleRule;
+declare function backdropHueRotate(value: string | DynamicValue): StyleRule;
+declare function backdropInvert(value?: string | DynamicValue): StyleRule;
+declare function backdropOpacity(value: string | DynamicValue): StyleRule;
+declare function backdropSaturate(value: string | DynamicValue): StyleRule;
+declare function backdropSepia(value?: string | DynamicValue): StyleRule;
+
+declare function scale(value: string | number | DynamicValue): StyleRule;
+declare function scaleX(value: string | number | DynamicValue): StyleRule;
+declare function scaleY(value: string | number | DynamicValue): StyleRule;
+declare function rotate(value: string | DynamicValue): StyleRule;
+declare function translateX(value: string | number | DynamicValue): StyleRule;
+declare function translateY(value: string | number | DynamicValue): StyleRule;
+declare function skewX(value: string | DynamicValue): StyleRule;
+declare function skewY(value: string | DynamicValue): StyleRule;
+declare function transformOrigin(value: string | DynamicValue): StyleRule;
+declare function transformGpu(): StyleRule;
+declare function transformNone(): StyleRule;
+
+declare function transition(): StyleRule;
+declare function transitionAll(): StyleRule;
+declare function transitionColors(): StyleRule;
+declare function transitionOpacity(): StyleRule;
+declare function transitionShadow(): StyleRule;
+declare function transitionTransform(): StyleRule;
+declare function transitionNone(): StyleRule;
+declare function duration(value: string | number | DynamicValue): StyleRule;
+declare function ease(value: string | DynamicValue): StyleRule;
+declare function delay(value: string | number | DynamicValue): StyleRule;
+declare function animate(value: string | DynamicValue): StyleRule;
+
+declare function borderCollapse(): StyleRule;
+declare function borderSeparate(): StyleRule;
+declare function borderSpacing(value: number | string | DynamicValue): StyleRule;
+declare function borderSpacingX(value: number | string | DynamicValue): StyleRule;
+declare function borderSpacingY(value: number | string | DynamicValue): StyleRule;
+declare function tableLayout(value: string): StyleRule;
+declare function captionSide(value: string): StyleRule;
+
+declare function fill(value: string | DynamicValue): StyleRule;
+declare function stroke(value: string | DynamicValue): StyleRule;
+declare function strokeWidth(value: string | number | DynamicValue): StyleRule;
+
+declare function srOnly(): StyleRule;
+declare function notSrOnly(): StyleRule;
+declare function forcedColorAdjust(value: string): StyleRule;
+
+declare function bgAttachment(value: string): StyleRule;
+declare function bgClip(value: string): StyleRule;
+declare function bgOrigin(value: string): StyleRule;
+declare function bgPosition(value: string | DynamicValue): StyleRule;
+declare function bgRepeat(value: string): StyleRule;
+declare function bgSize(value: string | DynamicValue): StyleRule;
+declare function bgImage(value: string | DynamicValue): StyleRule;
+declare function bgGradient(direction?: string): StyleRule;
+declare function gradientFrom(color: string | DynamicValue): StyleRule;
+declare function gradientVia(color: string | DynamicValue): StyleRule;
+declare function gradientTo(color: string | DynamicValue): StyleRule;
+
+/**
+ * Applies styles only when the element is hovered.
+ *
+ * Use with {@link when} to conditionally apply style rules on `:hover`.
+ *
+ * @param rule - The style rule to apply on hover.
+ * @returns A new {@link StyleRule} scoped to the `:hover` pseudo-class.
+ *
+ * @example
+ * ```ts
+ * import { cx, bg, when, hover } from 'typewritingclass'
+ *
+ * cx(bg('#3b82f6'), when(hover)(bg('#2563eb')))
+ * // CSS: .abc { background-color: #3b82f6; }
+ * //      .def:hover { background-color: #2563eb; }
+ * ```
+ */
+declare const hover: Modifier;
+/**
+ * Applies styles only when the element has keyboard or pointer focus.
+ *
+ * Use with {@link when} to conditionally apply style rules on `:focus`.
+ *
+ * @param rule - The style rule to apply on focus.
+ * @returns A new {@link StyleRule} scoped to the `:focus` pseudo-class.
+ *
+ * @example
+ * ```ts
+ * import { cx, borderColor, when, focus } from 'typewritingclass'
+ *
+ * cx(borderColor('#d1d5db'), when(focus)(borderColor('#3b82f6')))
+ * // CSS: .abc { border-color: #d1d5db; }
+ * //      .def:focus { border-color: #3b82f6; }
+ * ```
+ */
+declare const focus: Modifier;
+/**
+ * Applies styles only when the element is being actively pressed.
+ *
+ * Use with {@link when} to conditionally apply style rules on `:active`.
+ *
+ * @param rule - The style rule to apply while the element is active.
+ * @returns A new {@link StyleRule} scoped to the `:active` pseudo-class.
+ *
+ * @example
+ * ```ts
+ * import { cx, bg, when, active } from 'typewritingclass'
+ *
+ * cx(bg('#3b82f6'), when(active)(bg('#1d4ed8')))
+ * // CSS: .abc { background-color: #3b82f6; }
+ * //      .def:active { background-color: #1d4ed8; }
+ * ```
+ */
+declare const active: Modifier;
+/**
+ * Applies styles only when the element is disabled.
+ *
+ * Use with {@link when} to conditionally apply style rules on `:disabled`.
+ * Commonly used for form controls such as buttons and inputs.
+ *
+ * @param rule - The style rule to apply when disabled.
+ * @returns A new {@link StyleRule} scoped to the `:disabled` pseudo-class.
+ *
+ * @example
+ * ```ts
+ * import { cx, opacity, when, disabled } from 'typewritingclass'
+ *
+ * cx(opacity('1'), when(disabled)(opacity('0.5')))
+ * // CSS: .abc { opacity: 1; }
+ * //      .def:disabled { opacity: 0.5; }
+ * ```
+ */
+declare const disabled: Modifier;
+/**
+ * Applies styles only when the element has visible focus (typically keyboard focus).
+ *
+ * Use with {@link when} to conditionally apply style rules on `:focus-visible`.
+ * Unlike {@link focus}, this only matches when the user agent determines that
+ * focus should be visibly indicated (e.g., keyboard navigation, not mouse clicks).
+ *
+ * @param rule - The style rule to apply on visible focus.
+ * @returns A new {@link StyleRule} scoped to the `:focus-visible` pseudo-class.
+ *
+ * @example
+ * ```ts
+ * import { cx, outline, when, focusVisible } from 'typewritingclass'
+ *
+ * cx(when(focusVisible)(outline('2px solid #3b82f6')))
+ * // CSS: .abc:focus-visible { outline: 2px solid #3b82f6; }
+ * ```
+ */
+declare const focusVisible: Modifier;
+/**
+ * Applies styles when the element or any of its descendants has focus.
+ *
+ * Use with {@link when} to conditionally apply style rules on `:focus-within`.
+ * Useful for styling a parent container when a child input receives focus.
+ *
+ * @param rule - The style rule to apply when focus is within the element.
+ * @returns A new {@link StyleRule} scoped to the `:focus-within` pseudo-class.
+ *
+ * @example
+ * ```ts
+ * import { cx, borderColor, when, focusWithin } from 'typewritingclass'
+ *
+ * cx(borderColor('#d1d5db'), when(focusWithin)(borderColor('#3b82f6')))
+ * // CSS: .abc { border-color: #d1d5db; }
+ * //      .def:focus-within { border-color: #3b82f6; }
+ * ```
+ */
+declare const focusWithin: Modifier;
+/**
+ * Applies styles only when the element is the first child of its parent.
+ *
+ * Use with {@link when} to conditionally apply style rules on `:first-child`.
+ *
+ * @param rule - The style rule to apply to the first child.
+ * @returns A new {@link StyleRule} scoped to the `:first-child` pseudo-class.
+ *
+ * @example
+ * ```ts
+ * import { cx, mt, when, firstChild } from 'typewritingclass'
+ *
+ * cx(mt('1rem'), when(firstChild)(mt('0')))
+ * // CSS: .abc { margin-top: 1rem; }
+ * //      .def:first-child { margin-top: 0; }
+ * ```
+ */
+declare const firstChild: Modifier;
+/**
+ * Applies styles only when the element is the last child of its parent.
+ *
+ * Use with {@link when} to conditionally apply style rules on `:last-child`.
+ *
+ * @param rule - The style rule to apply to the last child.
+ * @returns A new {@link StyleRule} scoped to the `:last-child` pseudo-class.
+ *
+ * @example
+ * ```ts
+ * import { cx, mb, when, lastChild } from 'typewritingclass'
+ *
+ * cx(mb('1rem'), when(lastChild)(mb('0')))
+ * // CSS: .abc { margin-bottom: 1rem; }
+ * //      .def:last-child { margin-bottom: 0; }
+ * ```
+ */
+declare const lastChild: Modifier;
+declare const visited: Modifier;
+declare const checked: Modifier;
+declare const indeterminate: Modifier;
+declare const default_: Modifier;
+declare const required_: Modifier;
+declare const valid: Modifier;
+declare const invalid: Modifier;
+declare const inRange: Modifier;
+declare const outOfRange: Modifier;
+declare const placeholderShown: Modifier;
+declare const autofill: Modifier;
+declare const readOnly: Modifier;
+declare const empty: Modifier;
+declare const even: Modifier;
+declare const odd: Modifier;
+declare const firstOfType: Modifier;
+declare const lastOfType: Modifier;
+declare const onlyChild: Modifier;
+declare const onlyOfType: Modifier;
+declare const target: Modifier;
+declare const open_: Modifier;
+declare function has_(selector: string): Modifier;
+
+/**
+ * Applies styles at the **small** breakpoint and above (`min-width: 640px`).
+ *
+ * Use with {@link when} to make style rules responsive. Wraps the rule in a
+ * `@media (min-width: 640px)` query.
+ *
+ * @param rule - The style rule to apply at `>=640px`.
+ * @returns A new {@link StyleRule} wrapped in the small-breakpoint media query.
+ *
+ * @example
+ * ```ts
+ * import { cx, p, when, sm } from 'typewritingclass'
+ *
+ * cx(p('1rem'), when(sm)(p('2rem')))
+ * // CSS: .abc { padding: 1rem; }
+ * //      @media (min-width: 640px) { .def { padding: 2rem; } }
+ * ```
+ */
+declare const sm: Modifier;
+/**
+ * Applies styles at the **medium** breakpoint and above (`min-width: 768px`).
+ *
+ * Use with {@link when} to make style rules responsive. Wraps the rule in a
+ * `@media (min-width: 768px)` query.
+ *
+ * @param rule - The style rule to apply at `>=768px`.
+ * @returns A new {@link StyleRule} wrapped in the medium-breakpoint media query.
+ *
+ * @example
+ * ```ts
+ * import { cx, grid, gridCols, when, md } from 'typewritingclass'
+ *
+ * cx(gridCols('1'), when(md)(gridCols('2')))
+ * // CSS: .abc { grid-template-columns: 1; }
+ * //      @media (min-width: 768px) { .def { grid-template-columns: 2; } }
+ * ```
+ */
+declare const md: Modifier;
+/**
+ * Applies styles at the **large** breakpoint and above (`min-width: 1024px`).
+ *
+ * Use with {@link when} to make style rules responsive. Wraps the rule in a
+ * `@media (min-width: 1024px)` query.
+ *
+ * @param rule - The style rule to apply at `>=1024px`.
+ * @returns A new {@link StyleRule} wrapped in the large-breakpoint media query.
+ *
+ * @example
+ * ```ts
+ * import { cx, maxW, when, lg } from 'typewritingclass'
+ *
+ * cx(maxW('100%'), when(lg)(maxW('1024px')))
+ * // CSS: .abc { max-width: 100%; }
+ * //      @media (min-width: 1024px) { .def { max-width: 1024px; } }
+ * ```
+ */
+declare const lg: Modifier;
+/**
+ * Applies styles at the **extra-large** breakpoint and above (`min-width: 1280px`).
+ *
+ * Use with {@link when} to make style rules responsive. Wraps the rule in a
+ * `@media (min-width: 1280px)` query.
+ *
+ * @param rule - The style rule to apply at `>=1280px`.
+ * @returns A new {@link StyleRule} wrapped in the extra-large-breakpoint media query.
+ *
+ * @example
+ * ```ts
+ * import { cx, maxW, when, xl } from 'typewritingclass'
+ *
+ * cx(maxW('100%'), when(xl)(maxW('1280px')))
+ * // CSS: .abc { max-width: 100%; }
+ * //      @media (min-width: 1280px) { .def { max-width: 1280px; } }
+ * ```
+ */
+declare const xl: Modifier;
+/**
+ * Applies styles at the **2x-large** breakpoint and above (`min-width: 1536px`).
+ *
+ * Use with {@link when} to make style rules responsive. Wraps the rule in a
+ * `@media (min-width: 1536px)` query.
+ *
+ * Exported as `_2xl` because identifiers cannot start with a digit in JavaScript.
+ *
+ * @param rule - The style rule to apply at `>=1536px`.
+ * @returns A new {@link StyleRule} wrapped in the 2xl-breakpoint media query.
+ *
+ * @example
+ * ```ts
+ * import { cx, maxW, when, _2xl } from 'typewritingclass'
+ *
+ * cx(maxW('100%'), when(_2xl)(maxW('1536px')))
+ * // CSS: .abc { max-width: 100%; }
+ * //      @media (min-width: 1536px) { .def { max-width: 1536px; } }
+ * ```
+ */
+declare const _2xl: Modifier;
+declare const maxSm: Modifier;
+declare const maxMd: Modifier;
+declare const maxLg: Modifier;
+declare const maxXl: Modifier;
+declare const max2xl: Modifier;
+
+/**
+ * Applies styles only when the user's operating system or browser is set to a dark color scheme.
+ *
+ * Use with {@link when} to conditionally apply style rules inside a
+ * `@media (prefers-color-scheme: dark)` query. This responds to the user's
+ * system-level preference, not a manual theme toggle. For manual theme switching,
+ * see {@link setTheme} and the theme API.
+ *
+ * @param rule - The style rule to apply in dark mode.
+ * @returns A new {@link StyleRule} wrapped in the `prefers-color-scheme: dark` media query.
+ *
+ * @example
+ * ```ts
+ * import { cx, bg, color, when, dark } from 'typewritingclass'
+ *
+ * cx(
+ *   bg('#ffffff'),
+ *   color('#111827'),
+ *   when(dark)(bg('#111827')),
+ *   when(dark)(color('#f9fafb')),
+ * )
+ * // CSS: .abc { background-color: #ffffff; }
+ * //      .def { color: #111827; }
+ * //      @media (prefers-color-scheme: dark) { .ghi { background-color: #111827; } }
+ * //      @media (prefers-color-scheme: dark) { .jkl { color: #f9fafb; } }
+ * ```
+ */
+declare const dark: Modifier;
+
+declare const motionReduce: Modifier;
+declare const motionSafe: Modifier;
+declare const print_: Modifier;
+declare const portrait: Modifier;
+declare const landscape: Modifier;
+declare const contrastMore: Modifier;
+declare const contrastLess: Modifier;
+declare const forcedColors: Modifier;
+
+declare const before: Modifier;
+declare const after: Modifier;
+declare const placeholder_: Modifier;
+declare const file_: Modifier;
+declare const marker: Modifier;
+declare const selection_: Modifier;
+declare const firstLine: Modifier;
+declare const firstLetter: Modifier;
+declare const backdrop_: Modifier;
+
+declare const ariaChecked: Modifier;
+declare const ariaDisabled: Modifier;
+declare const ariaExpanded: Modifier;
+declare const ariaHidden: Modifier;
+declare const ariaPressed: Modifier;
+declare const ariaReadonly: Modifier;
+declare const ariaRequired: Modifier;
+declare const ariaSelected: Modifier;
+declare function aria(attr: string): Modifier;
+
+declare function data(attr: string): Modifier;
+
+declare function supports(query: string): Modifier;
+
+declare const groupHover: Modifier;
+declare const groupFocus: Modifier;
+declare const groupActive: Modifier;
+declare const groupFocusVisible: Modifier;
+declare const groupFocusWithin: Modifier;
+declare const groupDisabled: Modifier;
+declare const groupChecked: Modifier;
+declare const groupEmpty: Modifier;
+declare const groupFirst: Modifier;
+declare const groupLast: Modifier;
+declare const groupOdd: Modifier;
+declare const groupEven: Modifier;
+declare const groupOpen: Modifier;
+declare const groupVisited: Modifier;
+declare function groupHas(selector: string): Modifier;
+
+declare const peerHover: Modifier;
+declare const peerFocus: Modifier;
+declare const peerActive: Modifier;
+declare const peerFocusVisible: Modifier;
+declare const peerDisabled: Modifier;
+declare const peerChecked: Modifier;
+declare const peerInvalid: Modifier;
+declare const peerRequired: Modifier;
+declare const peerPlaceholderShown: Modifier;
+declare const peerFocusWithin: Modifier;
+declare const peerEmpty: Modifier;
+declare const peerFirst: Modifier;
+declare const peerLast: Modifier;
+declare const peerOdd: Modifier;
+declare const peerEven: Modifier;
+declare const peerOpen: Modifier;
+declare const peerVisited: Modifier;
+declare function peerHas(selector: string): Modifier;
+
+declare const rtl: Modifier;
+declare const ltr: Modifier;
+
+export { DynamicResult, DynamicValue, Modifier, StyleRule, type TwChain, _2xl, absolute, accentColor, active, after, alignContent, animate, antialiased, appearance, aria, ariaChecked, ariaDisabled, ariaExpanded, ariaHidden, ariaPressed, ariaReadonly, ariaRequired, ariaSelected, aspectRatio, autoCols, autoRows, autofill, backdrop, backdropBlur, backdropBrightness, backdropContrast, backdropGrayscale, backdropHueRotate, backdropInvert, backdropOpacity, backdropSaturate, backdropSepia, backdrop_, before, bg, bgAttachment, bgBlendMode, bgClip, bgGradient, bgImage, bgOrigin, bgPosition, bgRepeat, bgSize, blur, border, borderB, borderCollapse, borderColor, borderE, borderL, borderR, borderS, borderSeparate, borderSpacing, borderSpacingX, borderSpacingY, borderStyle, borderT, borderX, borderY, bottom, boxDecorationBreak, boxSizing, breakAfter, breakBefore, breakInside, brightness, captionSide, caretColor, checked, clear_, colEnd, colSpan, colStart, collapse_, columns, container, content_, contrast, contrastLess, contrastMore, css, cursor, cx, dark, data, dcx, default_, delay, diagonalFractions, disabled, display, divideColor, divideStyle, divideX, divideXReverse, divideY, divideYReverse, dropShadow, duration, ease, empty, end, even, file_, fill, firstChild, firstLetter, firstLine, firstOfType, fixed, flex, flex1, flexAuto, flexBasis, flexCol, flexColReverse, flexInitial, flexNone, flexNowrap, flexRow, flexRowReverse, flexWrap, flexWrapReverse, float_, focus, focusVisible, focusWithin, font, fontFamily, forcedColorAdjust, forcedColors, gap, gapX, gapY, generateCSS, googleFonts, gradientFrom, gradientTo, gradientVia, grayscale, grid, gridCols, gridFlow, gridRows, groupActive, groupChecked, groupDisabled, groupEmpty, groupEven, groupFirst, groupFocus, groupFocusVisible, groupFocusWithin, groupHas, groupHover, groupLast, groupOdd, groupOpen, groupVisited, grow, h, has_, hover, hueRotate, hyphens, inRange, indeterminate, inlineFlex, inset, insetX, insetY, invalid, invert, invisible, isolate, isolationAuto, italic, items, justify, justifyItems, justifySelf, landscape, lastChild, lastOfType, layer, leading, left, lg, lineClamp, liningNums, listStyleImage, listStylePosition, listStyleType, ltr, m, marker, max2xl, maxH, maxLg, maxMd, maxSm, maxW, maxXl, mb, md, me, minH, minW, mixBlendMode, ml, motionReduce, motionSafe, mr, ms, mt, mx, my, normalNums, notItalic, notSrOnly, objectFit, objectPosition, odd, oldstyleNums, onlyChild, onlyOfType, opacity, open_, order, ordinal, outOfRange, outline, outlineColor, outlineNone, outlineOffset, outlineStyle, outlineWidth, overflow, overflowX, overflowY, overscrollBehavior, overscrollX, overscrollY, p, pb, pe, peerActive, peerChecked, peerDisabled, peerEmpty, peerEven, peerFirst, peerFocus, peerFocusVisible, peerFocusWithin, peerHas, peerHover, peerInvalid, peerLast, peerOdd, peerOpen, peerPlaceholderShown, peerRequired, peerVisited, pl, placeContent, placeItems, placeSelf, placeholderShown, placeholder_, pointerEvents, portrait, pr, print_, proportionalNums, ps, pt, px, py, readOnly, relative, required_, resize, right, ring, ringColor, ringInset, ringOffsetColor, ringOffsetWidth, rotate, rounded, roundedB, roundedBL, roundedBR, roundedEE, roundedES, roundedL, roundedR, roundedSE, roundedSS, roundedT, roundedTL, roundedTR, rowEnd, rowSpan, rowStart, rtl, saturate, scale, scaleX, scaleY, scrollBehavior, scrollMargin, scrollMarginB, scrollMarginL, scrollMarginR, scrollMarginT, scrollMarginX, scrollMarginY, scrollPadding, scrollPaddingB, scrollPaddingL, scrollPaddingR, scrollPaddingT, scrollPaddingX, scrollPaddingY, select, selection_, self, sepia, shadow, shadowColor, shrink, size, skewX, skewY, slashedZero, sm, snapAlign, snapStop, snapType, spaceX, spaceXReverse, spaceY, spaceYReverse, srOnly, stackedFractions, start, static_, sticky, stroke, strokeWidth, subpixelAntialiased, supports, tableLayout, tabularNums, target, text, textAlign, textColor, textDecoration, textDecorationColor, textDecorationStyle, textDecorationThickness, textIndent, textOverflow, textTransform, textUnderlineOffset, textWrap, top, touchAction, tracking, transformGpu, transformNone, transformOrigin, transition, transitionAll, transitionColors, transitionNone, transitionOpacity, transitionShadow, transitionTransform, translateX, translateY, truncate, tw, valid, verticalAlign, visible, visited, w, when, whitespace, willChange, wordBreak, xl, z };