@zyncat/ui 0.10.0 → 0.12.0

package/README.md

@@ -3,17 +3,46 @@
 A premium React design system - modern CSS + a small, closed token vocabulary, applied
 consistently. Restraint, calm motion, no Tailwind, no CSS-in-JS, no UI libraries.
 
-**React 19 - TypeScript - ships compiled ESM + types.** Import the whole library or a single
-component; link one base stylesheet - each component loads its own CSS automatically.
+**React 19 - TypeScript - ships compiled ESM + types.** Import one component per subpath;
+link one base stylesheet - each component loads its own CSS automatically.
+
+## What this is, and who it is for
+
+Zyncat UI is built first for my own applications. Every component exists because a real
+product needed it, and the API is the one that made that product simpler - not the one that
+covers the widest set of hypothetical uses. That it also serves as a portfolio piece is a
+side effect, not the goal.
+
+That focus is the point. The token vocabulary stays small because one person has to hold it
+in their head; the component set stays narrow because every component is a permanent
+maintenance surface; the motion engine is small because the alternative was a dependency
+with a hundred features I would not use. A design system built to please everyone ends up
+with a settings panel instead of a point of view.
+
+**On licensing and openness.** The code here is MIT-licensed and you are welcome to use it.
+It is not, however, run as a community open-source project: there is no public roadmap, no
+support commitment, no issue triage and no contribution process, and none of those are
+planned right now. Development is driven by what my own applications need. Parts of it may
+later move to an open-core or commercial arrangement - that decision has not been made. Use
+it with those expectations, and pin a version.
 
 ## Install
 
+One command, run inside your React project - installing the package is part of it, so there is no
+separate `pnpm add` step:
+
 ```bash
-pnpm add @zyncat/ui
-# peers (you likely already have them):
-pnpm add react react-dom
+pnpm dlx zyncat-ui init
+# or: npx zyncat-ui init · yarn dlx zyncat-ui init · bunx zyncat-ui init
 ```
 
+It installs `@zyncat/ui` with your package manager (and React 19, if the project needs it), imports
+the base stylesheet at your app root, installs the agent skill into `.claude/skills/`, registers the
+bundled MCP server in `.mcp.json`, and scaffolds a typed `zyncat.theme.ts`. Every step is idempotent
+and printed as it lands - re-run the command after upgrading to refresh the skill and theme types.
+Non-interactive shells get plain logs and no prompts; pass `--yes` to accept every default and
+`--pm <pnpm|npm|yarn|bun>` to pin the package manager.
+
 | Peer                  | Range | Used for                                                             |
 | --------------------- | ----- | -------------------------------------------------------------------- |
 | `react` / `react-dom` | `^19` | components; `createRoot`/`createPortal` for imperative toast/tooltip |
@@ -28,30 +57,58 @@ No bundler config and no `transpilePackages` - the package ships built ESM with
 directives intact, so Next.js App Router boundaries just work.
 
 ```tsx
-import { Button, toast } from '@zyncat/ui';
-import '@zyncat/ui/styles.css'; // base layer - link once, at the app root
+import { Button } from '@zyncat/ui/button';
+import { toast } from '@zyncat/ui/toast-store';
+
+import '@zyncat/ui/styles.css'; // base layer - init adds this at the app root for you
 ```
 
 `styles.css` is the **base layer only** - fonts, design tokens (the `:root` custom
-properties) and the shared `glass` utility. Link it exactly once at the app root.
+properties) and the shared `glass` utility. It is linked exactly once at the app root -
+`init` inserts the import above your own stylesheets so yours keep winning the cascade.
 
 You never import per-component CSS: every component imports its own stylesheet, so your
 bundler code-splits and lazy-loads it with the component. Import `@zyncat/ui/dialog` and
-only `dialog.css` ships (plus the `overlay`/`icon` styles it reuses, deduped) - not the
-other 30 components' CSS.
+only `dialog.css` ships (plus the `overlay`/`icon` styles it reuses, deduped) - not every
+other component's CSS.
+
+## Theme it
 
-### Import a single component
+```tsx
+import { defineTheme, ZyncatTheme } from '@zyncat/ui/theme';
+
+const base = defineTheme({
+  color: { accent: 'oklch(0.58 0.19 292)', accentHover: 'oklch(0.5 0.19 292)' },
+  radius: { radiusMd: '0.5rem' },
+  components: { odometer: { accent: 'var(--warning)' } },
+});
+const dark = defineTheme({ color: { bgApp: 'oklch(0.19 0.008 198)', textBody: 'oklch(0.92 0.004 198)' } });
+
+// once, at the app root
+<ZyncatTheme theme={{ base, dark }} />;
+```
+
+Every token is a typed key, grouped by what it does: hover shows the default, a typo is a
+compile error, and values take any CSS. `base` lands on `:root` and every other key becomes a
+`[data-theme='<key>']` block, so switching themes - globally or for one subtree - is setting
+that attribute. The types are generated from the token stylesheets, so upgrading the package
+surfaces new tokens rather than drifting from them.
 
-Every component is also a subpath export, so you can pull just one:
+`ZyncatTheme` is a plain component that renders a `<style>` element: it server-renders (no
+flash, no client hook), needs no PostCSS plugin, bundler plugin or build step, and adds about
+a kilobyte. Durations you repoint keep their `prefers-reduced-motion` collapse automatically.
+
+### One subpath per component
 
 ```tsx
 import { Button } from '@zyncat/ui/button';
 import { DateField } from '@zyncat/ui/date-field';
 ```
 
-The barrel is side-effect-free and tree-shakes, so `import { Button } from '@zyncat/ui'` is
-equally lean in a bundler - subpaths help in non-bundled or explicit setups. CSS follows the
-same module graph: components you don't use drop their stylesheets too.
+**There is no barrel entry, deliberately.** `import … from '@zyncat/ui'` does not resolve.
+A barrel makes it possible for one import to pull in modules - and stylesheets - the app
+never asked for, and no amount of tree-shaking makes that guarantee hold across every
+bundler and every non-bundled setup. Subpaths make it structural instead.
 
 ## Components
 
@@ -61,39 +118,56 @@ same module graph: components you don't use drop their stylesheets too.
 | Forms               | TextField, NumberField, OtpField, Textarea, Checkbox, Toggle, RadioGroup, Select, MultiSelect |
 | Data                | Avatar, AvatarGroup, Tag, ToggleTag, Table, Pagination                                        |
 | Date, time & tabs   | DateField, DateTimeField, DateRangeField, TimeField, Tabs                                     |
-| Overlays & feedback | Alert, Toast, Tooltip, Dialog, Popover, Sheet                                                 |
+| Overlays & feedback | Alert, Toast, Tooltip, Dialog, Popover, Sheet, Dropdown, EmojiPickerPanel                     |
+| Expressive          | Odometer, TypingLines, Lens, MorphingText, WeightField, FlowField, Confetti                   |
+| Compound            | SupportRail                                                                                   |
+| Replicas            | FacebookFeed, InstagramFeed, TikTok, YouTube                                                  |
+| Motion & dev        | Glide / GlidePill, MotionDevtools                                                             |
+
+Each is a named export from its own subpath (`@zyncat/ui/<kebab-name>`). Props are documented
+inline in the types; each component also ships a usage doc (`*.usage.md` beside its source) with
+a maintainer-written example.
 
-Each is a named export from the barrel and a subpath (`@zyncat/ui/<kebab-name>`). Props are
-documented inline in the types; see [`llms.txt`](./llms.txt) for per-component examples.
+The **Replicas** row is the exception to the token rule: those four reproduce a real platform
+surface, so their metrics are pinned constants and your theme deliberately cannot move them.
+Everything else answers to the token vocabulary.
 
 ## For AI coding agents
 
-**MCP server (preferred).** The package bundles a zero-dependency MCP server (stdio) so agents
-query the API surface instead of grepping `node_modules`: `list_components` (index + conventions),
-`get_component` (usage docs + complete prop types, shared type chunks inlined), `search_api`
-(which component owns a prop/type/token), `get_tokens` (the token vocabulary with real values).
-Register it in the consuming project - for Claude Code, `.mcp.json` at the project root:
+The same `init` from [Install](#install) is the whole agent setup: it installs the `zyncat-ui`
+agent skill into `./.claude/skills/` (the component map, picker tables, recipes, theming guide -
+the knowledge that should sit in the agent's context) and registers the bundled MCP server in
+`./.mcp.json` (the live truth). Re-run it after upgrading the package so the skill matches the
+installed version.
+
+**The MCP server** is zero-dependency (stdio), also exposed as the `zyncat-ui-mcp` bin, and works
+with any MCP client:
 
 ```json
 { "mcpServers": { "zyncat-ui": { "command": "node", "args": ["./node_modules/@zyncat/ui/dist/mcp.js"] } } }
 ```
 
-Any MCP client works (also exposed as the `zyncat-ui-mcp` bin). The server reads the installed
-package's `llms.txt`, `dist/*.d.ts` and `src/tokens/*.css` at call time, so answers always match
-the installed version.
+Three tools: `get_component` (batch - the full current API for every component a change touches:
+maintainer usage doc, live docs URL, complete prop types with the shared type chunks inlined;
+an unknown name returns the whole catalog), `search_api` (ranked keyword search across usage
+docs, prop types and tokens), `get_tokens` (the token vocabulary with real values plus the
+theming levels). The server reads the installed package's usage docs, `dist/types/` declarations
+and `src/tokens/*.css` at call time, so answers always match the installed version.
 
 Without MCP, the same contract is readable directly:
 
-- **`node_modules/@zyncat/ui/dist/*.d.ts`** - every component's props carry inline TSDoc. This is
-  the machine-readable source of truth (e.g. `dist/button.d.ts` fully describes `ButtonProps`).
-- **`llms.txt`** (package root) - a compact, per-component index: purpose - import - a minimal
-  example. Cheaper to scan than every `.d.ts`.
+- **Declaration files under `node_modules/@zyncat/ui/dist/types/`** - every component's props carry
+  inline TSDoc, and this is the machine-readable source of truth. Each subpath's `types` entry in
+  `package.json` points straight at its file: `./button` resolves to
+  `dist/types/components/primitives/button/Button.d.ts`, which fully describes `ButtonProps`.
+- **Usage docs** - `node_modules/@zyncat/ui/src/**/*.usage.md`, one per component: purpose, when
+  to pick it, a verified example, the live docs URL.
 - This README.
 
 ## Copy-paste instead
 
 The tarball also ships `src/`, so you can lift a component straight from
-`node_modules/@zyncat/ui/src/components/<name>/` into your project. Components aren't fully
+`node_modules/@zyncat/ui/src/components/<tier>/<name>/` into your project. Components aren't fully
 self-contained - they share `src/tokens/`, the `motion-tokens` bridge, the internal `icon/`, and a
 few `*-core` helpers - so copy those alongside. (A shadcn-style registry/CLI could automate this
 later.)
@@ -108,11 +182,14 @@ your own node - any `ReactNode` (e.g. an `@phosphor-icons/react` element, if you
 ## What's inside
 
 ```
-src/                source (also shipped, for copy-paste)
--- index.ts         public barrel
+src/                source (also shipped, for reading)
 -- styles.css       base layer: fonts + tokens + glass (link once)
--- tokens/          CSS custom properties + motion-tokens.ts (JS and CSS motion bridge)
--- components/      <domain>/Name.tsx + name.css (each Tsx imports its own CSS -> lazy-loaded)
+-- tokens/          CSS custom properties + the TypeScript readers that mirror them
+-- engine/          the WAAPI motion engine
+-- motion/          the React motion layer: Presence, Motion, presets
+-- components/      primitives/ composites/ compound/ expressive/ internal/ - each Tsx imports its own CSS
+-- mcp/             the bundled MCP server
+skills/             the agent skill `npx zyncat-ui init` installs into a consumer project
 dist/               compiled ESM + .d.ts - what you import
 ```
 
@@ -120,14 +197,32 @@ dist/               compiled ESM + .d.ts - what you import
 
 - **Fonts.** `src/tokens/fonts.css` pulls Geist + Geist Mono from Google Fonts via a remote
   `@import`. Self-host the families to drop the render-blocking network hop.
-- **Styling is token-driven.** Re-skin by overriding the CSS custom properties in your own
-  stylesheet loaded after `@zyncat/ui/styles.css` - never fork the source.
+- **Four ways to override, and you never fork the source.** Load your stylesheet after
+  `@zyncat/ui/styles.css`, then take the lowest level that works. **0** - every shipped rule
+  sits in `@layer zyncat.components`, and unlayered CSS beats every layer at any specificity,
+  so `.btn { border-radius: 0 }` just lands. **1** - repoint the tokens to retheme the system,
+  in TypeScript with `defineTheme` (below) or on `:root` in your own CSS; the motion engine
+  reads the same values, so animation retimes with them.
+  **2** - retune one expressive or compound component through its `--<component>-*` properties.
+  **3** - `className` and `style` per instance (`htmlProps` for an overlay's panel).
+  [`skills/zyncat-ui/references/theming.md`](./skills/zyncat-ui/references/theming.md) has the
+  full vocabulary, and `get_tokens` prints it with live values.
+- **Reduced motion is handled at the token layer.** Every `--duration-*` collapses to 1ms under
+  `prefers-reduced-motion`, so components need no per-component media query - but that collapse
+  targets `:root`, so repoint durations there and not on a nested scope.
 
 ## Develop
 
 ```bash
 pnpm install
-pnpm build       # tsup - dist/ (ESM + .d.ts)
-pnpm typecheck   # tsc --noEmit
-pnpm format      # prettier --write
+pnpm build            # tsup - dist/ (ESM + .d.ts)
+pnpm typecheck        # tsc --noEmit
+pnpm format           # prettier --write
+pnpm check:css        # every rendered class is reachable from its own module
+pnpm check:usage      # every subpath has a usage doc, and its example props are real
+pnpm check:authoring  # docs/authoring + CLAUDE.md still match the code
+pnpm verify           # every gate above, in order
 ```
+
+Contributing to this repo? Start at [`CLAUDE.md`](CLAUDE.md), then
+[`docs/authoring/`](docs/authoring/).

package/dist/alert.css

@@ -1,132 +1,137 @@
-/* alert.css - the persistent in-flow status message: a lit tinted pane per tone. */
+@layer zyncat.tokens, zyncat.components;
 
-.alert-shell {
-  overflow: hidden;
-}
+@layer zyncat.components {
+  /* alert.css - the persistent in-flow status message: a lit tinted pane per tone. */
 
-.alert {
-  /* tone hooks - repointed by [data-tone] below; info is the default */
-  --alert-hue: var(--info);
-  --alert-fg: var(--info-text);
-  --alert-bg: var(--info-subtle);
-  --alert-wash: var(--accent-wash); /* info's wash = accent (teal) */
+  .alert-shell {
+    overflow: hidden;
+  }
 
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  padding: var(--space-3) var(--space-4);
-  /* the lit pane: top-light gradient over the tint + 1px inner highlight (Button's lighting model) */
-  background: linear-gradient(180deg, color-mix(in oklab, var(--bg-surface) 45%, var(--alert-bg)), var(--alert-bg));
-  border: var(--border-hairline) solid color-mix(in oklab, var(--alert-hue) 30%, transparent);
-  border-radius: var(--radius-lg);
-  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.55);
-}
+  .alert {
+    /* tone hooks - repointed by [data-tone] below; info is the default */
+    --alert-hue: var(--info);
+    --alert-fg: var(--info-text);
+    --alert-bg: var(--info-subtle);
+    --alert-wash: var(--accent-wash); /* info's wash = accent (teal) */
+    --alert-sheen: rgb(255 255 255 / 0.55);
 
-.alert[data-tone='success'] {
-  --alert-hue: var(--success);
-  --alert-fg: var(--success-text);
-  --alert-bg: var(--success-subtle);
-  --alert-wash: var(--success-wash);
-}
-.alert[data-tone='warning'] {
-  --alert-hue: var(--warning);
-  --alert-fg: var(--warning-text);
-  --alert-bg: var(--warning-subtle);
-  --alert-wash: var(--warning-wash);
-}
-.alert[data-tone='danger'] {
-  --alert-hue: var(--danger);
-  --alert-fg: var(--danger-text);
-  --alert-bg: var(--danger-subtle);
-  --alert-wash: var(--danger-wash);
-}
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
+    /* the lit pane: top-light gradient over the tint + 1px inner highlight (Button's lighting model) */
+    background: linear-gradient(180deg, color-mix(in oklab, var(--bg-surface) 45%, var(--alert-bg)), var(--alert-bg));
+    border: var(--border-hairline) solid color-mix(in oklab, var(--alert-hue) 30%, transparent);
+    border-radius: var(--radius-lg);
+    box-shadow: inset 0 1px 0 0 var(--alert-sheen);
+  }
 
-/* with a description: glyph rides the title line, controls stay centered */
-.alert:has(.alert__desc) {
-  align-items: flex-start;
-}
-.alert:has(.alert__desc) .alert__action,
-.alert:has(.alert__desc) .alert__close {
-  align-self: center;
-}
+  .alert[data-tone='success'] {
+    --alert-hue: var(--success);
+    --alert-fg: var(--success-text);
+    --alert-bg: var(--success-subtle);
+    --alert-wash: var(--success-wash);
+  }
+  .alert[data-tone='warning'] {
+    --alert-hue: var(--warning);
+    --alert-fg: var(--warning-text);
+    --alert-bg: var(--warning-subtle);
+    --alert-wash: var(--warning-wash);
+  }
+  .alert[data-tone='danger'] {
+    --alert-hue: var(--danger);
+    --alert-fg: var(--danger-text);
+    --alert-bg: var(--danger-subtle);
+    --alert-wash: var(--danger-wash);
+  }
 
-.alert--banner {
-  border-radius: 0;
-  border-block-start: 0;
-  border-inline: 0;
-  padding-inline: var(--space-6);
-}
+  /* with a description: glyph rides the title line, controls stay centered */
+  .alert:has(.alert__desc) {
+    align-items: flex-start;
+  }
+  .alert:has(.alert__desc) .alert__action,
+  .alert:has(.alert__desc) .alert__close {
+    align-self: center;
+  }
 
-/* Glyph - one --leading-body tall so it centers on the title line. */
-.alert__icon {
-  flex: none;
-  display: grid;
-  place-items: center;
-  height: var(--leading-body);
-  color: var(--alert-hue);
-}
+  .alert--banner {
+    border-radius: 0;
+    border-block-start: 0;
+    border-inline: 0;
+    padding-inline: var(--space-6);
+  }
 
-.alert__body {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-.alert__title {
-  margin: 0;
-  font: var(--type-label);
-  color: var(--alert-fg);
-  text-wrap: pretty;
-}
-.alert__desc {
-  margin: var(--space-1) 0 0;
-  font: var(--type-caption);
-  color: color-mix(in oklab, var(--alert-fg) 56%, var(--text-body));
-  text-wrap: pretty;
-}
+  /* Glyph - one --leading-body tall so it centers on the title line. */
+  .alert__icon {
+    flex: none;
+    display: grid;
+    place-items: center;
+    height: var(--leading-body);
+    color: var(--alert-hue);
+  }
 
-/* Action - the system .btn .btn--sm re-skinned to the pane's tone (alert-local chrome, not a global Button variant). */
-.alert__action {
-  flex: none;
-  color: var(--alert-fg);
-  background: transparent;
-}
-.alert__action:hover:not(:disabled) {
-  color: var(--alert-fg);
-  background: var(--alert-wash);
-}
-.alert__action:active:not(:disabled) {
-  background: color-mix(in oklab, var(--alert-hue) 16%, transparent);
-  transform: translateY(var(--space-px));
-}
-.alert[data-tone='danger'] .alert__action {
-  --btn-ring: var(--ring-danger);
-}
+  .alert__body {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  .alert__title {
+    margin: 0;
+    font: var(--type-label);
+    color: var(--alert-fg);
+    text-wrap: pretty;
+  }
+  .alert__desc {
+    margin: var(--space-1) 0 0;
+    font: var(--type-caption);
+    color: color-mix(in oklab, var(--alert-fg) 56%, var(--text-body));
+    text-wrap: pretty;
+  }
 
-/* Dismiss - always visible (alerts persist; no hover-reveal like toast). */
-.alert__close {
-  flex: none;
-  appearance: none;
-  display: grid;
-  place-items: center;
-  width: var(--space-6);
-  height: var(--space-6);
-  margin: 0;
-  padding: 0;
-  border: none;
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: color-mix(in oklab, var(--alert-fg) 64%, transparent);
-  cursor: pointer;
-  transition: var(--transition-control);
-}
-.alert__close:hover {
-  background: color-mix(in oklab, var(--alert-fg) 9%, transparent);
-  color: var(--alert-fg);
-}
-.alert__close:active {
-  background: color-mix(in oklab, var(--alert-fg) 14%, transparent);
-}
-.alert__close:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
+  /* Action - the system .btn .btn--sm re-skinned to the pane's tone (alert-local chrome, not a global Button variant). */
+  .alert__action {
+    flex: none;
+    color: var(--alert-fg);
+    background: transparent;
+  }
+  .alert__action:hover:not(:disabled) {
+    color: var(--alert-fg);
+    background: var(--alert-wash);
+  }
+  .alert__action:active:not(:disabled) {
+    background: color-mix(in oklab, var(--alert-hue) 16%, transparent);
+    transform: translateY(var(--space-px));
+  }
+  .alert[data-tone='danger'] .alert__action {
+    --btn-ring: var(--ring-danger);
+  }
+
+  /* Dismiss - always visible (alerts persist; no hover-reveal like toast). */
+  .alert__close {
+    flex: none;
+    appearance: none;
+    display: grid;
+    place-items: center;
+    width: var(--space-6);
+    height: var(--space-6);
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: color-mix(in oklab, var(--alert-fg) 64%, transparent);
+    cursor: pointer;
+    transition: var(--transition-control);
+  }
+  .alert__close:hover {
+    background: color-mix(in oklab, var(--alert-fg) 9%, transparent);
+    color: var(--alert-fg);
+  }
+  .alert__close:active {
+    background: color-mix(in oklab, var(--alert-fg) 14%, transparent);
+  }
+  .alert__close:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+  }
 }

package/dist/alert.js

@@ -1,14 +1,15 @@
-'use client';import { resolveMotionTiming } from './chunk-NEF5XAHG.js';
-import { Presence } from './chunk-356HZMT4.js';
-import { Motion } from './chunk-2QWJ6FAX.js';
-import './chunk-XWUWYSCT.js';
-import './chunk-YGCVWGUG.js';
-import { IconSlot } from './chunk-2ERBBFZS.js';
-import { Icon } from './chunk-3SBCBYB7.js';
+'use client';import { popOut } from './chunk-HDSFWZ7L.js';
+import { Presence } from './chunk-DDRSMHN4.js';
+import { resolveMotionTiming } from './chunk-TUTXXC3W.js';
+import { Motion } from './chunk-5PZ43DCG.js';
+import './chunk-M43IOM5C.js';
+import './chunk-IJS7TPGV.js';
+import { IconSlot } from './chunk-3MPF7FZV.js';
+import { Icon } from './chunk-EAI4POPB.js';
 import { useControllable } from './chunk-MMRIQNEN.js';
-import './chunk-S5ZTZANS.js';
-import { Button } from './chunk-2F5PITAO.js';
-import './chunk-VTJTGVZZ.js';
+import { UIMotion } from './chunk-7IZJERGA.js';
+import { Button } from './chunk-HY5MPISE.js';
+import './chunk-DMX2F6B4.js';
 import { cx } from './chunk-QGNC7LH5.js';
 import './alert.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -56,10 +57,7 @@ function Alert({
         { height: [0, "auto"], timing: h.open },
         { opacity: [0, 1], timing: o.open }
       ],
-      exit: [
-        { height: ["auto", 0], timing: h.close },
-        { opacity: [1, 0], timing: o.close }
-      ],
+      exit: [popOut(UIMotion.scale.floating, o.close)],
       children: /* @__PURE__ */ jsxs("div", { className: cls, style, "data-tone": tone, role: TONE_ROLE[tone] || "status", ...htmlProps, children: [
         icon === null ? null : /* @__PURE__ */ jsx("span", { className: "alert__icon", "aria-hidden": "true", children: icon !== void 0 ? /* @__PURE__ */ jsx(IconSlot, { size: "md", children: icon }) : /* @__PURE__ */ jsx(Icon, { name: TONE_GLYPH[tone] || "info", size: "md" }) }),
         /* @__PURE__ */ jsxs("div", { className: "alert__body", children: [

package/dist/alert.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/composites/alert/Alert.tsx"],"names":[],"mappings":"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","file":"alert.js","sourcesContent":["'use client';\n\nimport './alert.css';\nimport type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\nimport { Presence } from '../../../motion/presence';\nimport { Motion } from '../../../motion/element';\nimport { resolveMotionTiming } from '../../../motion/motion-timing';\nimport type { DisableableAnimation } from '../../../motion/timing';\nimport { Icon, type IconName } from '../../internal/icon/Icon';\nimport { Button } from '../../primitives/button/Button';\nimport { IconSlot } from '../../internal/icon/IconSlot';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\nexport type AlertTone = 'info' | 'success' | 'warning' | 'danger';\n\nexport interface AlertAction {\n  /** Sentence-case label, e.g. \"Update billing\". */\n  label: string;\n  onClick?: () => void;\n}\n\ninterface AlertOwnProps {\n  /** Status of the message; info/success are polite, warning/danger assertive. Default 'info'. */\n  tone?: AlertTone;\n  /** The message - sentence case, ideally one line. */\n  title: ReactNode;\n  /** Optional description; stays neutral - tone marks the message, not the prose. */\n  children?: ReactNode;\n  /** One action max, rendered as the system secondary small button. */\n  action?: AlertAction;\n  /** Renders the always-visible close button. Uncontrolled unless `open` is given. */\n  dismissible?: boolean;\n  /** Fires on dismiss. With `open` set, the parent owns hiding the alert. */\n  onDismiss?: () => void;\n  /** Controlled visibility; omit for uncontrolled. Exit eases shut (height collapse). */\n  open?: boolean;\n  /** App-level strip: square corners, hairline below only. Paint modifier. */\n  banner?: boolean;\n  /** Override the tone glyph; pass null to render no glyph. */\n  icon?: ReactNode | null;\n  /** Extra class(es) merged onto the alert. */\n  className?: string;\n  /** Inline styles merged onto the alert. */\n  style?: CSSProperties;\n  /** Enter/exit timing - motion tokens only, or `null` to disable (the height collapse snaps).\n   *  @default height 'slow'/'entrance'; opacity in 'base'/'entrance', out 'fast'/'exit' */\n  animation?: DisableableAnimation;\n}\n\nexport interface AlertProps extends AlertOwnProps {\n  /** Standard <div> attributes (aria-*, data-*, ...) forwarded to the alert. */\n  htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof AlertOwnProps> & DataAttributes;\n}\n\nconst ALERT_HEIGHT_TIMING = {\n  open: { duration: 'slow', ease: 'entrance' },\n  close: { duration: 'slow', ease: 'entrance' },\n} as const;\nconst ALERT_OPACITY_TIMING = {\n  open: { duration: 'base', ease: 'entrance' },\n  close: { duration: 'fast', ease: 'exit' },\n} as const;\n\nconst TONE_GLYPH: Record<AlertTone, IconName> = {\n  info: 'info',\n  success: 'check-circle',\n  warning: 'warning',\n  danger: 'warning-circle',\n};\nconst TONE_ROLE: Record<AlertTone, string> = { info: 'status', success: 'status', warning: 'alert', danger: 'alert' };\n\nexport function Alert({\n  tone = 'info',\n  title,\n  children = null,\n  action = null,\n  dismissible = false,\n  onDismiss,\n  open,\n  banner = false,\n  icon,\n  className = '',\n  style,\n  htmlProps,\n  animation,\n}: AlertProps) {\n  const [isOpen, setOpen] = useControllable(open, true, onDismiss);\n  const dismiss = () => setOpen(false);\n\n  const h = resolveMotionTiming(animation, ALERT_HEIGHT_TIMING);\n  const o = resolveMotionTiming(animation, ALERT_OPACITY_TIMING);\n\n  const cls = cx('alert', banner && 'alert--banner', className);\n\n  return (\n    <Presence initial={false}>\n      {isOpen && (\n        <Motion\n          key=\"alert-shell\"\n          className=\"alert-shell\"\n          animate={[\n            { height: [0, 'auto'], timing: h.open },\n            { opacity: [0, 1], timing: o.open },\n          ]}\n          exit={[\n            { height: ['auto', 0], timing: h.close },\n            { opacity: [1, 0], timing: o.close },\n          ]}\n        >\n          <div className={cls} style={style} data-tone={tone} role={TONE_ROLE[tone] || 'status'} {...htmlProps}>\n            {icon === null ? null : (\n              <span className=\"alert__icon\" aria-hidden=\"true\">\n                {icon !== undefined ? (\n                  <IconSlot size=\"md\">{icon}</IconSlot>\n                ) : (\n                  <Icon name={TONE_GLYPH[tone] || 'info'} size=\"md\" />\n                )}\n              </span>\n            )}\n            <div className=\"alert__body\">\n              <p className=\"alert__title\">{title}</p>\n              {children != null && <p className=\"alert__desc\">{children}</p>}\n            </div>\n            {action && (\n              <Button variant=\"unstyled\" size=\"sm\" className=\"alert__action\" onClick={action.onClick}>\n                {action.label}\n              </Button>\n            )}\n            {dismissible && (\n              <button type=\"button\" className=\"alert__close\" aria-label=\"Dismiss\" onClick={dismiss}>\n                <Icon name=\"close\" size=\"sm\" />\n              </button>\n            )}\n          </div>\n        </Motion>\n      )}\n    </Presence>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/composites/alert/Alert.tsx"],"names":[],"mappings":"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","file":"alert.js","sourcesContent":["'use client';\n\nimport './alert.css';\n\nimport type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nimport type { DataAttributes } from '../../../dom-props';\nimport { Motion } from '../../../motion/element';\nimport { resolveMotionTiming } from '../../../motion/motion-timing';\nimport { Presence } from '../../../motion/presence';\nimport { popOut } from '../../../motion/presets';\nimport type { DisableableAnimation } from '../../../motion/timing';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { Icon, type IconName } from '../../internal/icon/Icon';\nimport { IconSlot } from '../../internal/icon/IconSlot';\nimport { cx } from '../../internal/utils/cx';\nimport { Button } from '../../primitives/button/Button';\n\nexport type AlertTone = 'info' | 'success' | 'warning' | 'danger';\n\nexport interface AlertAction {\n  /** Sentence-case label, e.g. \"Update billing\". */\n  label: string;\n  onClick?: () => void;\n}\n\ninterface AlertOwnProps {\n  /** Status of the message; info/success are polite, warning/danger assertive. Default 'info'. */\n  tone?: AlertTone;\n  /** The message - sentence case, ideally one line. */\n  title: ReactNode;\n  /** Optional description; stays neutral - tone marks the message, not the prose. */\n  children?: ReactNode;\n  /** One action max, rendered as the system secondary small button. */\n  action?: AlertAction;\n  /** Renders the always-visible close button. Uncontrolled unless `open` is given. */\n  dismissible?: boolean;\n  /** Fires on dismiss. With `open` set, the parent owns hiding the alert. */\n  onDismiss?: () => void;\n  /** Controlled visibility; omit for uncontrolled. Exit scales down and fades; the slot it\n   *  occupied is released when it unmounts, so content below moves up then rather than during. */\n  open?: boolean;\n  /** App-level strip: square corners, hairline below only. Paint modifier. */\n  banner?: boolean;\n  /** Override the tone glyph; pass null to render no glyph. */\n  icon?: ReactNode | null;\n  /** Extra class(es) merged onto the alert. */\n  className?: string;\n  /** Inline styles merged onto the alert. */\n  style?: CSSProperties;\n  /** Enter/exit timing - motion tokens only, or `null` to disable (enter and exit snap).\n   *  @default entrance height 'slow'/'entrance' + opacity 'base'/'entrance'; exit scale + opacity 'fast'/'exit' */\n  animation?: DisableableAnimation;\n}\n\nexport interface AlertProps extends AlertOwnProps {\n  /** Standard <div> attributes (aria-*, data-*, ...) forwarded to the alert. */\n  htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof AlertOwnProps> & DataAttributes;\n}\n\nconst ALERT_HEIGHT_TIMING = {\n  open: { duration: 'slow', ease: 'entrance' },\n  close: { duration: 'slow', ease: 'entrance' },\n} as const;\nconst ALERT_OPACITY_TIMING = {\n  open: { duration: 'base', ease: 'entrance' },\n  close: { duration: 'fast', ease: 'exit' },\n} as const;\n\nconst TONE_GLYPH: Record<AlertTone, IconName> = {\n  info: 'info',\n  success: 'check-circle',\n  warning: 'warning',\n  danger: 'warning-circle',\n};\nconst TONE_ROLE: Record<AlertTone, string> = { info: 'status', success: 'status', warning: 'alert', danger: 'alert' };\n\nexport function Alert({\n  tone = 'info',\n  title,\n  children = null,\n  action = null,\n  dismissible = false,\n  onDismiss,\n  open,\n  banner = false,\n  icon,\n  className = '',\n  style,\n  htmlProps,\n  animation,\n}: AlertProps) {\n  const [isOpen, setOpen] = useControllable(open, true, onDismiss);\n  const dismiss = () => setOpen(false);\n\n  const h = resolveMotionTiming(animation, ALERT_HEIGHT_TIMING);\n  const o = resolveMotionTiming(animation, ALERT_OPACITY_TIMING);\n\n  const cls = cx('alert', banner && 'alert--banner', className);\n\n  return (\n    <Presence initial={false}>\n      {isOpen && (\n        <Motion\n          key=\"alert-shell\"\n          className=\"alert-shell\"\n          animate={[\n            { height: [0, 'auto'], timing: h.open },\n            { opacity: [0, 1], timing: o.open },\n          ]}\n          exit={[popOut(UIMotion.scale.floating, o.close)]}\n        >\n          <div className={cls} style={style} data-tone={tone} role={TONE_ROLE[tone] || 'status'} {...htmlProps}>\n            {icon === null ? null : (\n              <span className=\"alert__icon\" aria-hidden=\"true\">\n                {icon !== undefined ? (\n                  <IconSlot size=\"md\">{icon}</IconSlot>\n                ) : (\n                  <Icon name={TONE_GLYPH[tone] || 'info'} size=\"md\" />\n                )}\n              </span>\n            )}\n            <div className=\"alert__body\">\n              <p className=\"alert__title\">{title}</p>\n              {children != null && <p className=\"alert__desc\">{children}</p>}\n            </div>\n            {action && (\n              <Button variant=\"unstyled\" size=\"sm\" className=\"alert__action\" onClick={action.onClick}>\n                {action.label}\n              </Button>\n            )}\n            {dismissible && (\n              <button type=\"button\" className=\"alert__close\" aria-label=\"Dismiss\" onClick={dismiss}>\n                <Icon name=\"close\" size=\"sm\" />\n              </button>\n            )}\n          </div>\n        </Motion>\n      )}\n    </Presence>\n  );\n}\n"]}

package/dist/avatar-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/primitives/avatar/AvatarGroup.tsx"],"names":[],"mappings":";;;;;AAkCO,SAAS,WAAA,CAAY,EAAE,QAAA,EAAU,GAAA,GAAM,CAAA,EAAG,IAAA,GAAO,IAAA,EAAM,SAAA,GAAY,EAAA,EAAI,KAAA,EAAO,SAAA,EAAU,EAAqB;AAClH,EAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA;AACvC,EAAA,MAAM,UAAU,GAAA,GAAM,CAAA,GAAI,MAAM,KAAA,CAAM,CAAA,EAAG,GAAG,CAAA,GAAI,KAAA;AAChD,EAAA,MAAM,QAAA,GAAW,KAAA,CAAM,MAAA,GAAS,OAAA,CAAQ,MAAA;AAExC,EAAA,uBACE,IAAA,CAAC,UAAK,SAAA,EAAW,EAAA,CAAG,gBAAgB,SAAS,CAAA,EAAG,KAAA,EAAe,GAAG,SAAA,EAC/D,QAAA,EAAA;AAAA,IAAA,OAAA,CAAQ,GAAA;AAAA,MAAI,CAAC,KAAA,EAAO,CAAA,KACnB,cAAA,CAAe,KAAK,CAAA,GAChB,YAAA,CAAa,KAAA,EAA8C,EAAE,MAAM,GAAA,EAAK,KAAA,CAAM,GAAA,IAAO,CAAA,EAAG,CAAA,GACxF;AAAA,KACN;AAAA,IACC,QAAA,GAAW,qBACV,GAAA,CAAC,MAAA,EAAA,EAAK,WAAW,CAAA,eAAA,EAAkB,IAAI,qBAAqB,IAAA,EAAK,KAAA,EAAM,cAAY,CAAA,EAAG,QAAQ,SAC5F,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,cAAA,EACd,QAAA,kBAAA,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,kBAAA,EAAmB,QAAA,EAAA;AAAA,MAAA,GAAA;AAAA,MAAE;AAAA,KAAA,EAAS,GAChD,CAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ","file":"avatar-group.js","sourcesContent":["'use client';\n\nimport './avatar.css';\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport type { AvatarSize } from './Avatar';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\ninterface AvatarGroupOwnProps {\n  /** The `Avatar` elements to stack; each is cloned to force `size`, then sliced to `max`. */\n  children: ReactNode;\n  /** Max visible avatars before \"+N\" overflow chip. Default 5. */\n  max?: number;\n  /** Uniform size applied to all children. Default 'md'. */\n  size?: AvatarSize;\n  /** Extra class(es) merged onto the group wrapper. */\n  className?: string;\n  /** Inline styles merged onto the group wrapper. */\n  style?: CSSProperties;\n}\n\nexport interface AvatarGroupProps extends AvatarGroupOwnProps {\n  /** Standard <span> attributes forwarded to the group wrapper. */\n  htmlProps?: Omit<HTMLAttributes<HTMLSpanElement>, keyof AvatarGroupOwnProps> & DataAttributes;\n}\n\nexport function AvatarGroup({ children, max = 5, size = 'md', className = '', style, htmlProps }: AvatarGroupProps) {\n  const items = Children.toArray(children);\n  const visible = max > 0 ? items.slice(0, max) : items;\n  const overflow = items.length - visible.length;\n\n  return (\n    <span className={cx('avatar-group', className)} style={style} {...htmlProps}>\n      {visible.map((child, i) =>\n        isValidElement(child)\n          ? cloneElement(child as ReactElement<{ size?: AvatarSize }>, { size, key: child.key ?? i })\n          : child,\n      )}\n      {overflow > 0 && (\n        <span className={`avatar avatar--${size} avatar--overflow`} role=\"img\" aria-label={`${overflow} more`}>\n          <span className=\"avatar__face\">\n            <span className=\"avatar__initials\">+{overflow}</span>\n          </span>\n        </span>\n      )}\n    </span>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/primitives/avatar/AvatarGroup.tsx"],"names":[],"mappings":";;;;;AAoCO,SAAS,WAAA,CAAY,EAAE,QAAA,EAAU,GAAA,GAAM,CAAA,EAAG,IAAA,GAAO,IAAA,EAAM,SAAA,GAAY,EAAA,EAAI,KAAA,EAAO,SAAA,EAAU,EAAqB;AAClH,EAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA;AACvC,EAAA,MAAM,UAAU,GAAA,GAAM,CAAA,GAAI,MAAM,KAAA,CAAM,CAAA,EAAG,GAAG,CAAA,GAAI,KAAA;AAChD,EAAA,MAAM,QAAA,GAAW,KAAA,CAAM,MAAA,GAAS,OAAA,CAAQ,MAAA;AAExC,EAAA,uBACE,IAAA,CAAC,UAAK,SAAA,EAAW,EAAA,CAAG,gBAAgB,SAAS,CAAA,EAAG,KAAA,EAAe,GAAG,SAAA,EAC/D,QAAA,EAAA;AAAA,IAAA,OAAA,CAAQ,GAAA;AAAA,MAAI,CAAC,KAAA,EAAO,CAAA,KACnB,cAAA,CAAe,KAAK,CAAA,GAChB,YAAA,CAAa,KAAA,EAA8C,EAAE,MAAM,GAAA,EAAK,KAAA,CAAM,GAAA,IAAO,CAAA,EAAG,CAAA,GACxF;AAAA,KACN;AAAA,IACC,QAAA,GAAW,qBACV,GAAA,CAAC,MAAA,EAAA,EAAK,WAAW,CAAA,eAAA,EAAkB,IAAI,qBAAqB,IAAA,EAAK,KAAA,EAAM,cAAY,CAAA,EAAG,QAAQ,SAC5F,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,cAAA,EACd,QAAA,kBAAA,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,kBAAA,EAAmB,QAAA,EAAA;AAAA,MAAA,GAAA;AAAA,MAAE;AAAA,KAAA,EAAS,GAChD,CAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ","file":"avatar-group.js","sourcesContent":["'use client';\n\nimport './avatar.css';\n\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\n\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\nimport type { AvatarSize } from './Avatar';\n\ninterface AvatarGroupOwnProps {\n  /** The `Avatar` elements to stack; each is cloned to force `size`, then sliced to `max`. */\n  children: ReactNode;\n  /** Max visible avatars before \"+N\" overflow chip. Default 5. */\n  max?: number;\n  /** Uniform size applied to all children. Default 'md'. */\n  size?: AvatarSize;\n  /** Extra class(es) merged onto the group wrapper. */\n  className?: string;\n  /** Inline styles merged onto the group wrapper. */\n  style?: CSSProperties;\n}\n\nexport interface AvatarGroupProps extends AvatarGroupOwnProps {\n  /** Standard <span> attributes forwarded to the group wrapper. */\n  htmlProps?: Omit<HTMLAttributes<HTMLSpanElement>, keyof AvatarGroupOwnProps> & DataAttributes;\n}\n\nexport function AvatarGroup({ children, max = 5, size = 'md', className = '', style, htmlProps }: AvatarGroupProps) {\n  const items = Children.toArray(children);\n  const visible = max > 0 ? items.slice(0, max) : items;\n  const overflow = items.length - visible.length;\n\n  return (\n    <span className={cx('avatar-group', className)} style={style} {...htmlProps}>\n      {visible.map((child, i) =>\n        isValidElement(child)\n          ? cloneElement(child as ReactElement<{ size?: AvatarSize }>, { size, key: child.key ?? i })\n          : child,\n      )}\n      {overflow > 0 && (\n        <span className={`avatar avatar--${size} avatar--overflow`} role=\"img\" aria-label={`${overflow} more`}>\n          <span className=\"avatar__face\">\n            <span className=\"avatar__initials\">+{overflow}</span>\n          </span>\n        </span>\n      )}\n    </span>\n  );\n}\n"]}