typewritingclass 0.3.4 → 0.3.5

package/README.md

@@ -1,149 +1,70 @@
 # Typewriting Class
 
-Core library for the Typewriting Class CSS-in-TS framework. Provides utility functions, modifiers, theme tokens, and the composition API.
+CSS-in-TypeScript with full autocomplete. Design tokens as properties, not strings.
 
-## Installation
+## Install
 
 ```bash
 pnpm add typewritingclass
 ```
 
-## Usage
-
-### Chainable API (recommended)
+## Use
 
 ```ts
+import 'typewritingclass/inject'
 import { tw } from 'typewritingclass'
 
-const card = tw
-  .bg.white.rounded.lg.p(6).flex.gap(4)
-  .hover(tw.bg('blue-50'))
-  .md.p(8)
-  .dark(tw.bg('slate-800'))
+const card = tw.bg.white.rounded.lg.p(6).shadow.md
 ```
 
-### Property-access tokens
-
-Design tokens are accessed via property names — no strings needed:
+## Property-access tokens
 
 ```ts
 tw.bg.blue500            // background-color: #3b82f6
 tw.textColor.slate900    // color: #0f172a
 tw.rounded.lg            // border-radius: 0.5rem
 tw.shadow.md             // box-shadow: ...
-tw.text.lg               // font-size: 1.125rem; line-height: 1.75rem
+tw.text.lg               // font-size + line-height
 tw.font.bold             // font-weight: 700
 tw.items.center          // align-items: center
-tw.justify.between       // justify-content: space-between
 tw.cursor.pointer        // cursor: pointer
-```
-
-Color tokens support opacity via callable syntax:
-
-```ts
-tw.bg.blue500(50)        // background-color: rgb(59 130 246 / 0.5)
-```
 
-### Individual imports with property-access tokens
-
-```ts
-import { cx, bg, rounded, p, when, hover } from 'typewritingclass'
-
-cx(bg.blue500, rounded.lg, p(4))
-
-// With opacity
-cx(bg.blue500(25), rounded.lg, p(4))
+tw.bg.blue500(50)        // 50% opacity
 ```
 
-### Arbitrary / custom values
+Any CSS value works as a string argument: `tw.bg('#ff6347')`.
 
-Pass any CSS value as a string argument:
+## Modifiers
 
 ```ts
-tw.bg('white').rounded('lg').p(6).shadow('md')
+tw.hover.bg.blue500
+tw.dark.bg.slate900
+tw.md.p(8)
+tw.hover(tw.bg.blue500.textColor.white)
 ```
 
-### Individual imports (functional style)
+## Standalone utilities
 
 ```ts
-import { cx, p, bg, textColor, rounded, flex, gap, when } from 'typewritingclass'
-import { hover, md, dark } from 'typewritingclass'
-import { blue, white, slate } from 'typewritingclass/theme/colors'
-
-const card = cx(
-  p(6), bg(white), rounded('lg'),
-  flex(), gap(4),
-  when(hover)(bg(blue[50])),
-  when(md)(p(8)),
-  when(dark)(bg(slate[800])),
-)
-```
+import { cx, bg, rounded, p } from 'typewritingclass'
 
-## API
-
-### Chainable builder
-
-- **`tw`** — proxy-based chainable API with access to all utilities and modifiers via a single import
-  - Property-access tokens: `tw.bg.blue500`, `tw.rounded.lg`, `tw.font.bold`
-  - Property syntax for modifiers: `tw.hover.bg.blue500`
-  - Function syntax for multi-utility modifiers: `tw.hover(tw.bg.blue500.textColor.white)`
-  - Value-less utilities as properties: `tw.flex.flexCol.relative`
-  - Arbitrary values: `tw.bg('custom-color').p(6)`
-  - Resolves to class string via `.toString()`, `.value`, `.className`, or template literals
-
-### Composition
-
-- **`cx(...rules)`** — compose utilities into a single class name
-- **`when(...modifiers)(...rules)`** — apply styles conditionally
-
-### Utilities
-
-| Category | Functions |
-|---|---|
-| Spacing | `p`, `px`, `py`, `pt`, `pr`, `pb`, `pl`, `m`, `mx`, `my`, `mt`, `mr`, `mb`, `ml`, `gap`, `gapX`, `gapY` |
-| Colors | `bg`, `textColor`, `borderColor` |
-| Typography | `text`, `font`, `tracking`, `leading`, `textAlign` |
-| Layout | `flex`, `flexCol`, `flexRow`, `grid`, `gridCols`, `gridRows`, `display`, `items`, `justify`, `self` |
-| Sizing | `w`, `h`, `size`, `minW`, `minH`, `maxW`, `maxH` |
-| Position | `relative`, `absolute`, `fixed`, `sticky`, `top`, `right`, `bottom`, `left`, `inset`, `z` |
-| Borders | `rounded`, `roundedT`, `roundedB`, `roundedL`, `roundedR`, `border`, `borderT`, `borderR`, `borderB`, `borderL`, `ring` |
-| Effects | `shadow`, `opacity`, `backdrop` |
-| Interactivity | `cursor`, `select`, `pointerEvents` |
-| Overflow | `overflow`, `overflowX`, `overflowY` |
-
-### Modifiers
-
-| Type | Modifiers |
-|---|---|
-| Pseudo-classes | `hover`, `focus`, `active`, `disabled`, `focusVisible`, `focusWithin`, `firstChild`, `lastChild` |
-| Responsive | `sm` (640px), `md` (768px), `lg` (1024px), `xl` (1280px), `_2xl` (1536px) |
-| Color scheme | `dark` |
-
-### Theme tokens
-
-```ts
-import { blue, slate } from 'typewritingclass/theme/colors'
-import { bold, lg } from 'typewritingclass/theme/typography'
-import { md } from 'typewritingclass/theme/shadows'
-import { lg as lgRadius } from 'typewritingclass/theme/borders'
+cx(bg.blue500, rounded.lg, p(4))
+cx(bg.blue500(25), rounded.lg, p(4))
 ```
 
-### Custom themes
+## Immutable chains
 
 ```ts
-import { createTheme } from 'typewritingclass/theme/createTheme'
-
-const theme = createTheme({
-  colors: { brand: { 500: '#6366f1' } },
-})
+const base = tw.flex.flexCol
+const a = base.gap(4)  // base unchanged
+const b = base.gap(8)
 ```
 
-### Dynamic values
+## Dynamic values
 
 ```ts
 import { dcx, bg, p, dynamic } from 'typewritingclass'
 
-// Wrap a runtime value with dynamic(), then compose via dcx()
 const { className, style } = dcx(p(4), bg(dynamic(userColor)))
 ```
 
@@ -151,16 +72,12 @@ const { className, style } = dcx(p(4), bg(dynamic(userColor)))
 
 | Path | Contents |
 |---|---|
-| `typewritingclass` | Core API (`cx`, `when`, all utilities and modifiers) |
-| `typewritingclass/theme` | All theme token exports |
+| `typewritingclass` | Core API (`tw`, `cx`, `when`, all utilities and modifiers) |
+| `typewritingclass/inject` | Runtime style injection (import once in your entry file) |
+| `typewritingclass/preflight.css` | Optional CSS reset |
 | `typewritingclass/theme/colors` | Color scales |
 | `typewritingclass/theme/typography` | Font sizes, weights, line heights |
 | `typewritingclass/theme/shadows` | Shadow presets |
 | `typewritingclass/theme/borders` | Border radius tokens |
-| `typewritingclass/theme/sizes` | Named sizes |
-| `typewritingclass/theme/animations` | Animation keyframe presets |
-| `typewritingclass/theme/filters` | Filter presets |
-| `typewritingclass/theme/createTheme` | `createTheme()` |
-| `typewritingclass/inject` | Runtime style injection (auto-initializing side-effect import) |
-| `typewritingclass/runtime` | `__twcDynamic()` (internal compiler helper) |
-| `typewritingclass/rule` | `createRule()`, `createDynamicRule()`, `wrapWithSelector()`, `wrapWithMediaQuery()` |
+| `typewritingclass/theme/createTheme` | `createTheme()` for custom themes |
+| `typewritingclass/rule` | `createRule()`, `wrapWithSelector()`, etc. for custom utilities |

package/dist/index.cjs

@@ -458,6 +458,16 @@ var textTransformTokens = {
   capitalize: "capitalize",
   none: "none"
 };
+var gradientDirectionTokens = {
+  toRight: "to right",
+  toLeft: "to left",
+  toTop: "to top",
+  toBottom: "to bottom",
+  toTopRight: "to top right",
+  toTopLeft: "to top left",
+  toBottomRight: "to bottom right",
+  toBottomLeft: "to bottom left"
+};
 var UTIL_TOKENS = {
   // Color utilities
   bg: { tokens: colorTokens, supportsOpacity: true },
@@ -508,7 +518,8 @@ var UTIL_TOKENS = {
   self: { tokens: selfTokens },
   textWrap: { tokens: textWrapTokens },
   textOverflow: { tokens: textOverflowTokens },
-  textTransform: { tokens: textTransformTokens }
+  textTransform: { tokens: textTransformTokens },
+  bgGradient: { tokens: gradientDirectionTokens }
 };
 
 // src/utilities/colors.ts

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { S as StyleRule, D as DynamicResult, M as Modifier, C as ColorTokenKey, T as TextSizeTokens, F as FontWeightTokens, a as TrackingTokens, L as LeadingTokens, b as TextAlignTokens, c as FontFamilyTokens, d as TextTransformTokens, e as TextOverflowTokens, f as TextWrapTokens, g as DisplayTokens, A as AlignItemsTokens, J as JustifyTokens, h as SelfTokens, O as OverflowTokens, i as ObjectFitTokens, R as RadiusTokens, j as ShadowTokens, k as CursorTokens, l as DynamicValue } from './types-B-eG4WLT.cjs';
-export { B as Brand, m as CSSColor, n as CSSFontWeight, o as CSSLength, p as CSSShadow, q as ColorInput, r as RadiusInput, s as ShadowInput, t as SizeInput, u as SpacingInput, U as Utility, v as dynamic, w as isDynamic } from './types-B-eG4WLT.cjs';
+import { S as StyleRule, D as DynamicResult, M as Modifier, C as ColorTokenKey, T as TextSizeTokens, F as FontWeightTokens, a as TrackingTokens, L as LeadingTokens, b as TextAlignTokens, c as FontFamilyTokens, d as TextTransformTokens, e as TextOverflowTokens, f as TextWrapTokens, g as DisplayTokens, A as AlignItemsTokens, J as JustifyTokens, h as SelfTokens, O as OverflowTokens, i as ObjectFitTokens, R as RadiusTokens, j as ShadowTokens, k as CursorTokens, G as GradientDirectionTokens, l as DynamicValue } from './types-uXRYakpo.cjs';
+export { B as Brand, m as CSSColor, n as CSSFontWeight, o as CSSLength, p as CSSShadow, q as ColorInput, r as RadiusInput, s as ShadowInput, t as SizeInput, u as SpacingInput, U as Utility, v as dynamic, w as isDynamic } from './types-uXRYakpo.cjs';
 export { ThemeConfig, ThemeResult, ThemeVars, createTheme } from './theme/createTheme.cjs';
 export { i as injectTheme, s as setTheme } from './inject-theme-CTzyfQH0.cjs';
 
@@ -293,6 +293,9 @@ type TwTextOverflowUtility = TwUtility & {
 type TwTextTransformUtility = TwUtility & {
     [K in keyof TextTransformTokens]: TwChainString;
 };
+type TwGradientDirectionUtility = TwUtility & {
+    [K in keyof GradientDirectionTokens]: 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. */
@@ -550,7 +553,7 @@ interface TwChain {
     readonly bgRepeat: TwUtility;
     readonly bgSize: TwUtility;
     readonly bgImage: TwUtility;
-    readonly bgGradient: TwUtility;
+    readonly bgGradient: TwGradientDirectionUtility;
     readonly gradientFrom: TwColorUtilityNoOpacity;
     readonly gradientVia: TwColorUtilityNoOpacity;
     readonly gradientTo: TwColorUtilityNoOpacity;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { S as StyleRule, D as DynamicResult, M as Modifier, C as ColorTokenKey, T as TextSizeTokens, F as FontWeightTokens, a as TrackingTokens, L as LeadingTokens, b as TextAlignTokens, c as FontFamilyTokens, d as TextTransformTokens, e as TextOverflowTokens, f as TextWrapTokens, g as DisplayTokens, A as AlignItemsTokens, J as JustifyTokens, h as SelfTokens, O as OverflowTokens, i as ObjectFitTokens, R as RadiusTokens, j as ShadowTokens, k as CursorTokens, l as DynamicValue } from './types-B-eG4WLT.js';
-export { B as Brand, m as CSSColor, n as CSSFontWeight, o as CSSLength, p as CSSShadow, q as ColorInput, r as RadiusInput, s as ShadowInput, t as SizeInput, u as SpacingInput, U as Utility, v as dynamic, w as isDynamic } from './types-B-eG4WLT.js';
+import { S as StyleRule, D as DynamicResult, M as Modifier, C as ColorTokenKey, T as TextSizeTokens, F as FontWeightTokens, a as TrackingTokens, L as LeadingTokens, b as TextAlignTokens, c as FontFamilyTokens, d as TextTransformTokens, e as TextOverflowTokens, f as TextWrapTokens, g as DisplayTokens, A as AlignItemsTokens, J as JustifyTokens, h as SelfTokens, O as OverflowTokens, i as ObjectFitTokens, R as RadiusTokens, j as ShadowTokens, k as CursorTokens, G as GradientDirectionTokens, l as DynamicValue } from './types-uXRYakpo.js';
+export { B as Brand, m as CSSColor, n as CSSFontWeight, o as CSSLength, p as CSSShadow, q as ColorInput, r as RadiusInput, s as ShadowInput, t as SizeInput, u as SpacingInput, U as Utility, v as dynamic, w as isDynamic } from './types-uXRYakpo.js';
 export { ThemeConfig, ThemeResult, ThemeVars, createTheme } from './theme/createTheme.js';
 export { i as injectTheme, s as setTheme } from './inject-theme-CTzyfQH0.js';
 
@@ -293,6 +293,9 @@ type TwTextOverflowUtility = TwUtility & {
 type TwTextTransformUtility = TwUtility & {
     [K in keyof TextTransformTokens]: TwChainString;
 };
+type TwGradientDirectionUtility = TwUtility & {
+    [K in keyof GradientDirectionTokens]: 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. */
@@ -550,7 +553,7 @@ interface TwChain {
     readonly bgRepeat: TwUtility;
     readonly bgSize: TwUtility;
     readonly bgImage: TwUtility;
-    readonly bgGradient: TwUtility;
+    readonly bgGradient: TwGradientDirectionUtility;
     readonly gradientFrom: TwColorUtilityNoOpacity;
     readonly gradientVia: TwColorUtilityNoOpacity;
     readonly gradientTo: TwColorUtilityNoOpacity;

package/dist/index.js

@@ -458,6 +458,16 @@ var textTransformTokens = {
   capitalize: "capitalize",
   none: "none"
 };
+var gradientDirectionTokens = {
+  toRight: "to right",
+  toLeft: "to left",
+  toTop: "to top",
+  toBottom: "to bottom",
+  toTopRight: "to top right",
+  toTopLeft: "to top left",
+  toBottomRight: "to bottom right",
+  toBottomLeft: "to bottom left"
+};
 var UTIL_TOKENS = {
   // Color utilities
   bg: { tokens: colorTokens, supportsOpacity: true },
@@ -508,7 +518,8 @@ var UTIL_TOKENS = {
   self: { tokens: selfTokens },
   textWrap: { tokens: textWrapTokens },
   textOverflow: { tokens: textOverflowTokens },
-  textTransform: { tokens: textTransformTokens }
+  textTransform: { tokens: textTransformTokens },
+  bgGradient: { tokens: gradientDirectionTokens }
 };
 
 // src/utilities/colors.ts

package/dist/rule.d.cts

@@ -1,4 +1,4 @@
-import { S as StyleRule } from './types-B-eG4WLT.cjs';
+import { S as StyleRule } from './types-uXRYakpo.cjs';
 
 /**
  * Creates a static {@link StyleRule} from a set of CSS declarations.

package/dist/rule.d.ts

@@ -1,4 +1,4 @@
-import { S as StyleRule } from './types-B-eG4WLT.js';
+import { S as StyleRule } from './types-uXRYakpo.js';
 
 /**
  * Creates a static {@link StyleRule} from a set of CSS declarations.

package/dist/runtime.d.cts

@@ -1,4 +1,4 @@
-import { D as DynamicResult } from './types-B-eG4WLT.cjs';
+import { D as DynamicResult } from './types-uXRYakpo.cjs';
 
 /**
  * Runtime helper injected by the compiler when `dynamic()` values are used.

package/dist/runtime.d.ts

@@ -1,4 +1,4 @@
-import { D as DynamicResult } from './types-B-eG4WLT.js';
+import { D as DynamicResult } from './types-uXRYakpo.js';
 
 /**
  * Runtime helper injected by the compiler when `dynamic()` values are used.

package/dist/{types-B-eG4WLT.d.cts → types-uXRYakpo.d.cts}

@@ -346,6 +346,16 @@ interface TextTransformTokens {
     capitalize: string;
     none: string;
 }
+interface GradientDirectionTokens {
+    toRight: string;
+    toLeft: string;
+    toTop: string;
+    toBottom: string;
+    toTopRight: string;
+    toTopLeft: string;
+    toBottomRight: string;
+    toBottomLeft: string;
+}
 /**
  * A self-contained CSS rule produced by utility functions or modifier
  * composition.
@@ -512,4 +522,4 @@ interface DynamicResult {
     style: Record<string, string>;
 }
 
-export { type AlignItemsTokens as A, type Brand as B, type ColorTokenKey as C, type DynamicResult as D, type FontWeightTokens as F, type JustifyTokens as J, type LeadingTokens as L, type Modifier as M, type OverflowTokens as O, type RadiusTokens as R, type StyleRule as S, type TextSizeTokens as T, type Utility as U, type TrackingTokens as a, type TextAlignTokens as b, type FontFamilyTokens as c, type TextTransformTokens as d, type TextOverflowTokens as e, type TextWrapTokens as f, type DisplayTokens as g, type SelfTokens as h, type ObjectFitTokens as i, type ShadowTokens as j, type CursorTokens as k, type DynamicValue as l, type CSSColor as m, type CSSFontWeight as n, type CSSLength as o, type CSSShadow as p, type ColorInput as q, type RadiusInput as r, type ShadowInput as s, type SizeInput as t, type SpacingInput as u, dynamic as v, isDynamic as w };
+export { type AlignItemsTokens as A, type Brand as B, type ColorTokenKey as C, type DynamicResult as D, type FontWeightTokens as F, type GradientDirectionTokens as G, type JustifyTokens as J, type LeadingTokens as L, type Modifier as M, type OverflowTokens as O, type RadiusTokens as R, type StyleRule as S, type TextSizeTokens as T, type Utility as U, type TrackingTokens as a, type TextAlignTokens as b, type FontFamilyTokens as c, type TextTransformTokens as d, type TextOverflowTokens as e, type TextWrapTokens as f, type DisplayTokens as g, type SelfTokens as h, type ObjectFitTokens as i, type ShadowTokens as j, type CursorTokens as k, type DynamicValue as l, type CSSColor as m, type CSSFontWeight as n, type CSSLength as o, type CSSShadow as p, type ColorInput as q, type RadiusInput as r, type ShadowInput as s, type SizeInput as t, type SpacingInput as u, dynamic as v, isDynamic as w };

package/dist/{types-B-eG4WLT.d.ts → types-uXRYakpo.d.ts}

@@ -346,6 +346,16 @@ interface TextTransformTokens {
     capitalize: string;
     none: string;
 }
+interface GradientDirectionTokens {
+    toRight: string;
+    toLeft: string;
+    toTop: string;
+    toBottom: string;
+    toTopRight: string;
+    toTopLeft: string;
+    toBottomRight: string;
+    toBottomLeft: string;
+}
 /**
  * A self-contained CSS rule produced by utility functions or modifier
  * composition.
@@ -512,4 +522,4 @@ interface DynamicResult {
     style: Record<string, string>;
 }
 
-export { type AlignItemsTokens as A, type Brand as B, type ColorTokenKey as C, type DynamicResult as D, type FontWeightTokens as F, type JustifyTokens as J, type LeadingTokens as L, type Modifier as M, type OverflowTokens as O, type RadiusTokens as R, type StyleRule as S, type TextSizeTokens as T, type Utility as U, type TrackingTokens as a, type TextAlignTokens as b, type FontFamilyTokens as c, type TextTransformTokens as d, type TextOverflowTokens as e, type TextWrapTokens as f, type DisplayTokens as g, type SelfTokens as h, type ObjectFitTokens as i, type ShadowTokens as j, type CursorTokens as k, type DynamicValue as l, type CSSColor as m, type CSSFontWeight as n, type CSSLength as o, type CSSShadow as p, type ColorInput as q, type RadiusInput as r, type ShadowInput as s, type SizeInput as t, type SpacingInput as u, dynamic as v, isDynamic as w };
+export { type AlignItemsTokens as A, type Brand as B, type ColorTokenKey as C, type DynamicResult as D, type FontWeightTokens as F, type GradientDirectionTokens as G, type JustifyTokens as J, type LeadingTokens as L, type Modifier as M, type OverflowTokens as O, type RadiusTokens as R, type StyleRule as S, type TextSizeTokens as T, type Utility as U, type TrackingTokens as a, type TextAlignTokens as b, type FontFamilyTokens as c, type TextTransformTokens as d, type TextOverflowTokens as e, type TextWrapTokens as f, type DisplayTokens as g, type SelfTokens as h, type ObjectFitTokens as i, type ShadowTokens as j, type CursorTokens as k, type DynamicValue as l, type CSSColor as m, type CSSFontWeight as n, type CSSLength as o, type CSSShadow as p, type ColorInput as q, type RadiusInput as r, type ShadowInput as s, type SizeInput as t, type SpacingInput as u, dynamic as v, isDynamic as w };

package/package.json

@@ -1,7 +1,22 @@
 {
   "name": "typewritingclass",
-  "version": "0.3.4",
+  "version": "0.3.5",
+  "description": "CSS-in-TypeScript with full autocomplete and type checking",
+  "license": "MIT",
   "type": "module",
+  "keywords": [
+    "css",
+    "css-in-ts",
+    "css-in-js",
+    "typescript",
+    "styling",
+    "tailwind",
+    "utility-css",
+    "autocomplete"
+  ],
+  "homepage": "https://github.com/corysimmons/typewritingclass",
+  "bugs": "https://github.com/corysimmons/typewritingclass/issues",
+  "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/corysimmons/typewritingclass",