typewritingclass 0.2.0

package/src/utilities/tables.ts

@@ -0,0 +1,54 @@
+import type { StyleRule } from '../types.ts'
+import type { DynamicValue } from '../dynamic.ts'
+import { createRule, createDynamicRule } from '../rule.ts'
+import { resolveSpacing } from '../theme/spacing.ts'
+import { isDynamic } from '../dynamic.ts'
+
+export function borderCollapse(): StyleRule {
+  return createRule({ 'border-collapse': 'collapse' })
+}
+
+export function borderSeparate(): StyleRule {
+  return createRule({ 'border-collapse': 'separate' })
+}
+
+export function borderSpacing(value: number | string | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { 'border-spacing': `var(${value.__id})` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  const v = typeof value === 'number' ? resolveSpacing(value) : value
+  return createRule({ 'border-spacing': v })
+}
+
+export function borderSpacingX(value: number | string | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { 'border-spacing': `var(${value.__id}) 0` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  const v = typeof value === 'number' ? resolveSpacing(value) : value
+  return createRule({ 'border-spacing': `${v} 0` })
+}
+
+export function borderSpacingY(value: number | string | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { 'border-spacing': `0 var(${value.__id})` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  const v = typeof value === 'number' ? resolveSpacing(value) : value
+  return createRule({ 'border-spacing': `0 ${v}` })
+}
+
+export function tableLayout(value: string): StyleRule {
+  return createRule({ 'table-layout': value })
+}
+
+export function captionSide(value: string): StyleRule {
+  return createRule({ 'caption-side': value })
+}

package/src/utilities/transforms.ts

@@ -0,0 +1,85 @@
+import type { StyleRule } from '../types.ts'
+import type { DynamicValue } from '../dynamic.ts'
+import { createRule, createDynamicRule } from '../rule.ts'
+import { isDynamic } from '../dynamic.ts'
+
+function transformRule(fn: string, value: string | number | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { transform: `${fn}(var(${value.__id}))` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  return createRule({ transform: `${fn}(${value})` })
+}
+
+export function scale(value: string | number | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { transform: `scale(var(${value.__id}))` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  const v = typeof value === 'number' ? String(value / 100) : value
+  return createRule({ transform: `scale(${v})` })
+}
+
+export function scaleX(value: string | number | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { transform: `scaleX(var(${value.__id}))` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  const v = typeof value === 'number' ? String(value / 100) : value
+  return createRule({ transform: `scaleX(${v})` })
+}
+
+export function scaleY(value: string | number | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { transform: `scaleY(var(${value.__id}))` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  const v = typeof value === 'number' ? String(value / 100) : value
+  return createRule({ transform: `scaleY(${v})` })
+}
+
+export function rotate(value: string | DynamicValue): StyleRule {
+  return transformRule('rotate', value)
+}
+
+export function translateX(value: string | DynamicValue): StyleRule {
+  return transformRule('translateX', value)
+}
+
+export function translateY(value: string | DynamicValue): StyleRule {
+  return transformRule('translateY', value)
+}
+
+export function skewX(value: string | DynamicValue): StyleRule {
+  return transformRule('skewX', value)
+}
+
+export function skewY(value: string | DynamicValue): StyleRule {
+  return transformRule('skewY', value)
+}
+
+export function transformOrigin(value: string | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { 'transform-origin': `var(${value.__id})` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  return createRule({ 'transform-origin': value })
+}
+
+export function transformGpu(): StyleRule {
+  return createRule({ transform: 'translate3d(0, 0, 0)' })
+}
+
+export function transformNone(): StyleRule {
+  return createRule({ transform: 'none' })
+}

package/src/utilities/transitions.ts

@@ -0,0 +1,98 @@
+import type { StyleRule } from '../types.ts'
+import type { DynamicValue } from '../dynamic.ts'
+import { createRule, createDynamicRule } from '../rule.ts'
+import { isDynamic } from '../dynamic.ts'
+
+export function transition(): StyleRule {
+  return createRule({
+    'transition-property': 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
+    'transition-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)',
+    'transition-duration': '150ms',
+  })
+}
+
+export function transitionAll(): StyleRule {
+  return createRule({
+    'transition-property': 'all',
+    'transition-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)',
+    'transition-duration': '150ms',
+  })
+}
+
+export function transitionColors(): StyleRule {
+  return createRule({
+    'transition-property': 'color, background-color, border-color, text-decoration-color, fill, stroke',
+    'transition-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)',
+    'transition-duration': '150ms',
+  })
+}
+
+export function transitionOpacity(): StyleRule {
+  return createRule({
+    'transition-property': 'opacity',
+    'transition-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)',
+    'transition-duration': '150ms',
+  })
+}
+
+export function transitionShadow(): StyleRule {
+  return createRule({
+    'transition-property': 'box-shadow',
+    'transition-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)',
+    'transition-duration': '150ms',
+  })
+}
+
+export function transitionTransform(): StyleRule {
+  return createRule({
+    'transition-property': 'transform',
+    'transition-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)',
+    'transition-duration': '150ms',
+  })
+}
+
+export function transitionNone(): StyleRule {
+  return createRule({ 'transition-property': 'none' })
+}
+
+export function duration(value: string | number | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { 'transition-duration': `var(${value.__id})` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  const v = typeof value === 'number' ? `${value}ms` : value
+  return createRule({ 'transition-duration': v })
+}
+
+export function ease(value: string | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { 'transition-timing-function': `var(${value.__id})` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  return createRule({ 'transition-timing-function': value })
+}
+
+export function delay(value: string | number | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { 'transition-delay': `var(${value.__id})` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  const v = typeof value === 'number' ? `${value}ms` : value
+  return createRule({ 'transition-delay': v })
+}
+
+export function animate(value: string | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { animation: `var(${value.__id})` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  return createRule({ animation: value })
+}

package/src/utilities/typography.ts

@@ -0,0 +1,380 @@
+import type { StyleRule } from '../types.ts'
+import type { TextSize } from '../theme/typography.ts'
+import type { DynamicValue } from '../dynamic.ts'
+import { createRule, createDynamicRule } from '../rule.ts'
+import { isDynamic } from '../dynamic.ts'
+
+/**
+ * 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 }
+ * ```
+ */
+export function text(size: TextSize | string | DynamicValue): StyleRule {
+  if (isDynamic(size)) {
+    return createDynamicRule(
+      { 'font-size': `var(${size.__id})` },
+      { [size.__id]: String(size.__value) },
+    )
+  }
+  if (typeof size === 'string') {
+    return createRule({ 'font-size': size })
+  }
+  return createRule({ 'font-size': size.fontSize, 'line-height': size.lineHeight })
+}
+
+/**
+ * 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 }
+ * ```
+ */
+export function font(weight: string | DynamicValue): StyleRule {
+  if (isDynamic(weight)) {
+    return createDynamicRule(
+      { 'font-weight': `var(${weight.__id})` },
+      { [weight.__id]: String(weight.__value) },
+    )
+  }
+  return createRule({ 'font-weight': weight })
+}
+
+/**
+ * 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 }
+ * ```
+ */
+export function tracking(value: string | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { 'letter-spacing': `var(${value.__id})` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  return createRule({ 'letter-spacing': value })
+}
+
+/**
+ * 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 }
+ * ```
+ */
+export function leading(value: string | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { 'line-height': `var(${value.__id})` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  return createRule({ 'line-height': value })
+}
+
+/**
+ * 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;
+ * ```
+ */
+export function textAlign(value: string): StyleRule {
+  return createRule({ 'text-align': value })
+}
+
+export function fontFamily(value: string | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { 'font-family': `var(${value.__id})` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  return createRule({ 'font-family': value })
+}
+
+export function antialiased(): StyleRule {
+  return createRule({
+    '-webkit-font-smoothing': 'antialiased',
+    '-moz-osx-font-smoothing': 'grayscale',
+  })
+}
+
+export function subpixelAntialiased(): StyleRule {
+  return createRule({
+    '-webkit-font-smoothing': 'auto',
+    '-moz-osx-font-smoothing': 'auto',
+  })
+}
+
+export function italic(): StyleRule {
+  return createRule({ 'font-style': 'italic' })
+}
+
+export function notItalic(): StyleRule {
+  return createRule({ 'font-style': 'normal' })
+}
+
+export function normalNums(): StyleRule {
+  return createRule({ 'font-variant-numeric': 'normal' })
+}
+
+export function ordinal(): StyleRule {
+  return createRule({ 'font-variant-numeric': 'ordinal' })
+}
+
+export function slashedZero(): StyleRule {
+  return createRule({ 'font-variant-numeric': 'slashed-zero' })
+}
+
+export function liningNums(): StyleRule {
+  return createRule({ 'font-variant-numeric': 'lining-nums' })
+}
+
+export function oldstyleNums(): StyleRule {
+  return createRule({ 'font-variant-numeric': 'oldstyle-nums' })
+}
+
+export function proportionalNums(): StyleRule {
+  return createRule({ 'font-variant-numeric': 'proportional-nums' })
+}
+
+export function tabularNums(): StyleRule {
+  return createRule({ 'font-variant-numeric': 'tabular-nums' })
+}
+
+export function diagonalFractions(): StyleRule {
+  return createRule({ 'font-variant-numeric': 'diagonal-fractions' })
+}
+
+export function stackedFractions(): StyleRule {
+  return createRule({ 'font-variant-numeric': 'stacked-fractions' })
+}
+
+export function lineClamp(value: number): StyleRule {
+  return createRule({
+    overflow: 'hidden',
+    display: '-webkit-box',
+    '-webkit-box-orient': 'vertical',
+    '-webkit-line-clamp': String(value),
+  })
+}
+
+export function listStyleImage(value: string): StyleRule {
+  return createRule({ 'list-style-image': value })
+}
+
+export function listStylePosition(value: string): StyleRule {
+  return createRule({ 'list-style-position': value })
+}
+
+export function listStyleType(value: string): StyleRule {
+  return createRule({ 'list-style-type': value })
+}
+
+export function textDecoration(value: string): StyleRule {
+  return createRule({ 'text-decoration-line': value })
+}
+
+export function textDecorationColor(value: string | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { 'text-decoration-color': `var(${value.__id})` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  return createRule({ 'text-decoration-color': value })
+}
+
+export function textDecorationStyle(value: string): StyleRule {
+  return createRule({ 'text-decoration-style': value })
+}
+
+export function textDecorationThickness(value: string | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { 'text-decoration-thickness': `var(${value.__id})` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  return createRule({ 'text-decoration-thickness': value })
+}
+
+export function textUnderlineOffset(value: string | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { 'text-underline-offset': `var(${value.__id})` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  return createRule({ 'text-underline-offset': value })
+}
+
+export function textTransform(value: string): StyleRule {
+  return createRule({ 'text-transform': value })
+}
+
+export function textOverflow(value: string): StyleRule {
+  return createRule({ 'text-overflow': value })
+}
+
+export function textWrap(value: string): StyleRule {
+  return createRule({ 'text-wrap': value })
+}
+
+export function textIndent(value: string | DynamicValue): StyleRule {
+  if (isDynamic(value)) {
+    return createDynamicRule(
+      { 'text-indent': `var(${value.__id})` },
+      { [value.__id]: String(value.__value) },
+    )
+  }
+  return createRule({ 'text-indent': value })
+}
+
+export function verticalAlign(value: string): StyleRule {
+  return createRule({ 'vertical-align': value })
+}
+
+export function whitespace(value: string): StyleRule {
+  return createRule({ 'white-space': value })
+}
+
+export function wordBreak(value: string): StyleRule {
+  return createRule({ 'word-break': value })
+}
+
+export function hyphens(value: string): StyleRule {
+  return createRule({ hyphens: value })
+}
+
+export function content_(value: string): StyleRule {
+  return createRule({ content: value })
+}
+
+export function truncate(): StyleRule {
+  return createRule({
+    overflow: 'hidden',
+    'text-overflow': 'ellipsis',
+    'white-space': 'nowrap',
+  })
+}

package/src/when.ts

@@ -0,0 +1,63 @@
+import type { StyleRule, Modifier } from './types.ts'
+import { combineRules } from './rule.ts'
+
+/**
+ * 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; }
+ * ```
+ */
+export function when(...modifiers: Modifier[]) {
+  return (...rules: StyleRule[]): StyleRule => {
+    const combined = combineRules(rules)
+    return modifiers.reduceRight((acc, mod) => mod(acc), combined)
+  }
+}