typewritingclass 0.3.3 → 0.3.5

package/README.md

@@ -1,106 +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
-bun add typewritingclass
+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
 ```
 
-### Individual imports
+## Property-access tokens
 
 ```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])),
-)
+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 + line-height
+tw.font.bold             // font-weight: 700
+tw.items.center          // align-items: center
+tw.cursor.pointer        // cursor: pointer
+
+tw.bg.blue500(50)        // 50% opacity
 ```
 
-## API
-
-### Chainable builder
-
-- **`tw`** — proxy-based chainable API with access to all utilities and modifiers via a single import
-  - Property syntax for modifiers: `tw.hover.bg('blue-500')`
-  - Function syntax for multi-utility modifiers: `tw.hover(tw.bg('blue-500').textColor('white'))`
-  - Value-less utilities as properties: `tw.flex.flexCol.relative`
-  - Resolves to class string via `.toString()`, `.value`, `.className`, or template literals
+Any CSS value works as a string argument: `tw.bg('#ff6347')`.
 
-### Composition
+## Modifiers
 
-- **`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` |
+```ts
+tw.hover.bg.blue500
+tw.dark.bg.slate900
+tw.md.p(8)
+tw.hover(tw.bg.blue500.textColor.white)
+```
 
-### Theme tokens
+## Standalone utilities
 
 ```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'
+import { cx, bg, rounded, p } from 'typewritingclass'
+
+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)))
 ```
 
@@ -108,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 |