@devalok/shilp-sutra 0.36.1 → 0.37.0-next.1

package/MIGRATION.md

@@ -0,0 +1,346 @@
+# Migration Guide
+
+This page indexes all breaking changes across `@devalok/shilp-sutra` versions. For the full changelog, see [CHANGELOG.md](./CHANGELOG.md).
+
+> **Upgrading from < 0.36?** Start here, then read each intermediate version section. Breaking changes stack — skipping versions means stacking migrations.
+
+## v0.37.0 — Tailwind 4 CSS-first migration
+
+0.37 completes the Tailwind 3 → 4 migration that started in 0.34. The JS preset is gone. Tokens now ship as `@theme` CSS variables that TW4 consumes directly. **This is a breaking setup change; component APIs are unchanged.**
+
+> **During the RC window, 0.37 lives on the `@next` dist-tag.** Use `@devalok/shilp-sutra@next` in the commands below. Once stable promotes to `@latest`, plain `@devalok/shilp-sutra` or `@latest` resolves to 0.37.x too. Pin via `@0.37.0` only after the stable release announcement.
+
+### Before you start — two constraints inherited from Tailwind 4 itself
+
+- **Browser support.** Tailwind 4 requires **Safari 16.4+, Chrome 111+, Firefox 128+**. Consumer apps that must support older browsers should stay on 0.36 (via the `latest-0.36` dist-tag) until they can drop those targets.
+- **PostCSS plugin rename.** If your app had a TW3-style `postcss.config.js` like this:
+  ```js
+  // TW3 — no longer works in v4
+  module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } }
+  ```
+  update to the v4 plugin:
+  ```js
+  // TW4 — required
+  module.exports = { plugins: { '@tailwindcss/postcss': {} } }
+  ```
+  Install: `pnpm add -D @tailwindcss/postcss`. Next.js 15+ / Vite users whose build already handles this transparently can skip this step.
+
+### Quick migration checklist
+
+1. Install the new required peers:
+   ```sh
+   pnpm add framer-motion @devalok/shilp-sutra@next
+   # if you use toasts:
+   pnpm add sonner
+   ```
+2. Rewrite `app/globals.css`:
+   ```diff
+   - @import "tailwindcss";
+   - @config "./tailwind.config.ts";
+   + @import "tailwindcss";
+   + @import "@devalok/shilp-sutra/css";
+   ```
+3. **Delete `tailwind.config.ts`** — unless you have your own plugins (see "Keeping your own plugins" below).
+4. Verify `next.config.ts` transpiles BOTH packages:
+   ```ts
+   transpilePackages: ['@devalok/shilp-sutra', '@devalok/shilp-sutra-brand'],
+   ```
+5. Run `pnpm why framer-motion` and confirm **a single version** (see "Framer-motion single-copy check").
+6. Run a dark-mode sanity check (see below).
+7. `pnpm build` — should succeed with no warnings mentioning shilp-sutra.
+
+### Before / after: globals.css
+
+**Before (0.36.x):**
+```css
+@import "tailwindcss";
+@config "./tailwind.config.ts";
+```
+
+**After (0.37.0):**
+```css
+@import "tailwindcss";
+@import "@devalok/shilp-sutra/css";
+
+/* Optional — your own plugins or content globs go here */
+@plugin "@tailwindcss/typography";
+@source "./app/**/*.{ts,tsx}";
+```
+
+`@import "@devalok/shilp-sutra/css"` pulls in our full token set (`@theme` blocks for color, spacing-ds, text-ds, leading-ds, radius, shadow, ease, duration, breakpoints, z-layers, animate), custom utilities (typography composites, focus-ring, touch-target, safe-area insets, z-layer utilities), the dark-mode `@custom-variant`, and a `@source` directive that scans our compiled classes.
+
+### Delete tailwind.config.ts
+
+You **no longer need** `tailwind.config.ts` for shilp-sutra. TW4 config is CSS-first via `@theme`. Delete it if that was its only purpose.
+
+### Keeping your own plugins
+
+If you had TW plugins of your own (e.g., `@tailwindcss/typography`, `@tailwindcss/forms`), keep them with the TW4 CSS directive:
+
+```css
+@plugin "@tailwindcss/typography";
+@plugin "@tailwindcss/forms";
+```
+
+No JS config file required. If you had custom theme extensions, translate them to `@theme` blocks inside your `globals.css`.
+
+### Legacy TW3 config APIs removed in v4
+
+If your old `tailwind.config.ts` used any of these, they no longer exist:
+
+| Removed API | Replacement |
+|---|---|
+| `corePlugins: { … }` | Omit utilities you don't want by not including them; use `@source not "..."` or custom variants to exclude patterns |
+| `safelist: [...]` | `@source inline("bg-red-500 text-lg")` in globals.css |
+| `separator: ':'` | Not configurable; always `:` |
+| `prefix: 'tw-'` | `@import "tailwindcss" prefix(tw);` at top of globals.css |
+| `resolveConfig()` / `defaultTheme` helpers | Read `@theme` CSS vars at runtime via `getComputedStyle(document.documentElement)` |
+| `content: [...]` | `@source "./app/**/*.{ts,tsx}"` in globals.css |
+| `darkMode: 'class'` | `@custom-variant dark (&:where(.dark, .dark *));` (already included in our `/css` bundle) |
+
+If you relied on `resolveConfig()` for runtime theme access in TypeScript (e.g., to pull brand colors into framer-motion variants), migrate to reading CSS custom properties directly — they're all declared on `:root` / `.dark` by the `/css` import.
+
+### Peer dependency changes
+
+| Dep | 0.36.x | 0.37.0 |
+|---|---|---|
+| `framer-motion` | bundled | **required peer** (`^12.0.0`) |
+| `sonner` | bundled | **optional peer** (`^2.0.0`) — only if you render a `<Toaster />` |
+| `tailwindcss` | `^3.4.0 \|\| ^4.0.0` | **`^4.0.0` only** |
+| `use-sync-external-store` | optional peer | now in `dependencies` (auto-installed) |
+
+**Why framer-motion moved to peer:** module-scoped React contexts (`MotionConfig`, `AnimatePresence`, `LayoutGroup`) fail silently if two copies resolve. Making it a peer means *you* pin the version and pnpm dedupes it.
+
+### Framer-motion single-copy check
+
+Run:
+```sh
+pnpm why framer-motion
+```
+
+**Expected:** one version, one instance. If you see two different versions, run:
+```sh
+pnpm dedupe
+```
+If dedupe doesn't collapse them (version ranges don't overlap), pin `framer-motion` at the top of your app's `package.json` `dependencies`, then `pnpm install`.
+
+> **Note:** `pnpm why` reports what the lockfile resolved. Under strict-hoist, two copies can still coexist if they satisfy different peer ranges. If animations feel "stuck" or `AnimatePresence` exits don't fire, check `pnpm list framer-motion --depth=Infinity` as a second-level verification.
+
+### Dark mode sanity check
+
+Our `.dark` variant now uses `@custom-variant dark (&:where(.dark *))`. After upgrading, render a representative screen with `.dark` toggled on `<html>` (or your usual ancestor) and verify:
+
+- Card backgrounds re-theme (not stuck on light)
+- Solid buttons keep contrast
+- Input borders are visible in dark
+- Toast colors invert correctly
+- Any surface shadows still appear (check `shadow-raised`, `shadow-overlay`)
+
+If any of these is stuck on light, the `.dark` class isn't on an ancestor — add it to `<html>` (recommended) or `<body>`.
+
+### Token collisions
+
+Our spacing scale is namespaced `--spacing-ds-*` (→ `p-ds-03`, `gap-ds-04` etc.) to avoid colliding with TW4's default numeric spacing (`p-4`, `gap-6`). **If you define your own `--spacing-4` in `@theme`, it wins** — our utilities are `p-ds-04` not `p-4`. Typography uses `--text-ds-*`, `--leading-ds-*`. Radius is unprefixed (`--radius`, `--radius-ds-*`) because bare `rounded` / `rounded-ds-md` are the common idiom.
+
+### Source class changes (in consumer code too)
+
+If your own app code used any of these TW3-era patterns, update:
+
+| TW3 (dead in TW4) | TW4 |
+|---|---|
+| `w-[--my-var]` | `w-(--my-var)` |
+| `theme(spacing.4)` inside `w-[…]` | literal value (e.g., `1rem`) |
+| `bg-gradient-to-r` | `bg-linear-to-r` |
+| bare `shadow` | `shadow-sm`, `shadow-raised`, etc. |
+| `outline-none` | `outline-hidden` |
+| `rounded-sm` | `rounded-xs` |
+| `!prefix` | `suffix!` |
+
+Quick grep in your repo:
+```sh
+grep -rn 'w-\[--\|bg-gradient-to-\|theme(spacing' src/
+```
+
+### Troubleshooting
+
+| Symptom | Cause | Fix |
+|---|---|---|
+| `Module not found: Can't resolve 'framer-motion'` on `next build` | framer-motion moved to peer, not installed | `pnpm add framer-motion` |
+| `Module not found: Can't resolve 'sonner'` on `next build` | You import `Toaster`/`toast` from shilp-sutra but sonner isn't installed (optional peer) | `pnpm add sonner` |
+| Toasts render without styling / `toast()` no-ops in dev | Same as above, but you didn't notice the build warning | `pnpm add sonner` |
+| Classes like `p-ds-03` produce no CSS | missing `@import "@devalok/shilp-sutra/css"` in globals.css | add it |
+| Classes like `p-ds-03` produce no CSS (import present) | pnpm strict-hoist hiding our dist from `@source` | verify `node_modules/.pnpm/@devalok+shilp-sutra@0.37.0/node_modules/@devalok/shilp-sutra/dist/` exists |
+| Dark mode not switching | `.dark` not on an ancestor of the component | add `.dark` to `<html>` via `next-themes` or your color-mode hook |
+| Animations feel broken / exits don't fire | two framer-motion copies | see "Framer-motion single-copy check" |
+| `@config` warning on build | legacy config import in your CSS | remove `@config "..."` and use `@import "@devalok/shilp-sutra/css"` |
+| `Unknown at-rule @theme` / `Unknown at-rule @utility` | PostCSS config still references `tailwindcss` + `autoprefixer` (TW3 style). TW4 uses a single plugin. | Install `@tailwindcss/postcss` and replace both plugins with `'@tailwindcss/postcss': {}` in `postcss.config.js`. See "Before you start" above. |
+| `[@devalok/shilp-sutra] DEPRECATION: The JS preset at "./tailwind"...` notice on build | your `tailwind.config.ts` still has `presets: [shilpSutra]`, or a dependency's does | delete that line AND add `@import "@devalok/shilp-sutra/css"` to globals.css (both steps — the preset is a no-op stub in 0.37, removed in 0.38) |
+| **App renders unstyled after upgrade; no build error** | You upgraded the package but did not add `@import "@devalok/shilp-sutra/css"` to `globals.css`. TW4 silently drops unknown utilities, so every `bg-surface-raised`/`p-ds-*`/`shadow-raised` class is emitting zero CSS. | Add the `@import` per step 2 above. If you see the DEPRECATION notice in your build output, heed it — that's the signal for exactly this scenario. |
+| Dark mode no longer switches (worked on 0.36) | Same as above — the `@custom-variant dark` declaration lives in the DS `/css` bundle. Without the import, `dark:*` utilities also silently no-op. | Add `@import "@devalok/shilp-sutra/css"` to globals.css. |
+
+### Upgrading from &lt; 0.36
+
+Read the intermediate sections below (0.34, 0.33, 0.32, 0.30, 0.29, 0.23, 0.9) in order. Each has component-level breakage you'll need to resolve before 0.37's setup-level breakage matters.
+
+### Need to pin 0.36 temporarily?
+
+Use the `latest-0.36` dist-tag:
+```sh
+pnpm add @devalok/shilp-sutra@latest-0.36
+```
+This keeps you on the last TW3-compatible minor. We will backport critical security fixes to the `latest-0.36` line through at least 2026-10-01.
+
+### Rollback recipe (for maintainers)
+
+See [`docs/rollback.md`](./docs/rollback.md) for the executable playbook.
+
+## v0.34.0 (Tailwind 4 + Toolchain)
+
+**Tailwind CSS 3 → 4:**
+- `outline-none` → `outline-hidden`
+- `rounded-sm` → `rounded-xs`
+- `backdrop-blur-sm` → `backdrop-blur-xs`
+- `!prefix` → `suffix!` important syntax
+- Replace `darkMode: 'class'` with `@variant dark (&:is(.dark *))` in CSS
+- Add `@import "tailwindcss"` + `@config` to your CSS entry point
+- Peer dep accepts both `^3.4.0 || ^4.0.0`
+
+**Other toolchain:**
+- `tailwind-merge` 3.0 → 3.5 (required for TW4 class recognition)
+- TypeScript 5.7 → 6.0.2 (`types` defaults to `[]` — add `"types": ["node"]` to tsconfig if needed)
+- ESLint 9 → 10 (config lookup starts from linted file directory, not CWD)
+- `react-zoom-pan-pinch` 3 → 4 (`onTransformed` → `onTransform`)
+
+## v0.33.0
+
+**2 breaking changes:**
+
+### EmojiSuggestion factory pattern
+
+```diff
+- import { EmojiSuggestion } from '@devalok/shilp-sutra/composed'
++ import { createEmojiSuggestion } from '@devalok/shilp-sutra/composed'
++ const EmojiSuggestion = createEmojiSuggestion()  // or createEmojiSuggestion('apple')
+```
+
+### Emoji HTML output changed
+
+Non-native `emojiSet` renders emoji as `<span data-emoji-id="..." role="img">` nodes, not raw Unicode. `plainText` still returns Unicode.
+
+## v0.32.0
+
+**6 breaking changes:**
+
+### Button variant/color rename
+
+```diff
+- <Button variant="default">        →  <Button variant="solid">
+- <Button variant="destructive">    →  <Button variant="solid" color="error">
+- <Button color="default">          →  <Button color="accent">
+```
+
+### Chip removed — use Badge
+
+```diff
+- import { Chip } from '@devalok/shilp-sutra/ui'
++ import { Badge } from '@devalok/shilp-sutra/ui'
+```
+
+### SegmentedControl rewritten
+
+```diff
+- <SegmentedControl variant="filled">   →  <SegmentedControl variant="accent">
+- <SegmentedControl variant="tonal">    →  <SegmentedControl variant="default">
+- <SegmentedControlItem>                →  (no longer exported — use options array)
+- size="small|medium|big"               →  size="sm|md|lg"
+```
+
+### TopBar renders as `<header>`
+
+Was `<div>`, now `<header>`. If you had a wrapping `<header>`, remove it to avoid nested landmarks.
+
+### Surface token rename
+
+```diff
+- bg-surface-1  →  bg-surface-base
+- bg-surface-2  →  bg-surface-raised
+- bg-surface-3  →  bg-surface-raised-hover
+- bg-surface-4  →  bg-surface-raised-active
+```
+
+### Shadow token rename
+
+```diff
+- shadow-01  →  shadow-raised
+- shadow-02  →  shadow-raised-hover
+- shadow-03  →  shadow-floating
+- shadow-04  →  shadow-overlay
+```
+
+## v0.30.0
+
+- **`@devalok/shilp-sutra-karm` removed** — Domain components moved to Karm app repo. The npm package is deprecated at v0.9.0.
+
+No component API breakage. Drop-in upgrade from 0.29.0.
+
+## v0.29.0
+
+**4 breaking changes:**
+
+### Warning color remapped (yellow → amber-bright)
+
+`warning-*` tokens now use warm amber (OKLCH hue 65-70) instead of yellow (hue 85). If you hardcoded any `--yellow-*` primitives for warning states, switch to `--amber-bright-*` or the semantic `warning-*` tokens.
+
+### Button icon API change
+
+```tsx
+// Before (0.28.x)
+<Button startIcon={<IconPlus />}>Add</Button>
+
+// After (0.29.0)
+<Button startIcon={<Icon icon={IconPlus} />}>Add</Button>
+```
+
+### Badge rewrite
+
+```tsx
+// Before (0.28.x)
+<Badge variant="secondary">Tag</Badge>
+<Badge variant="destructive">Error</Badge>
+
+// After (0.29.0)
+<Badge variant="subtle">Tag</Badge>
+<Badge variant="solid" color="error">Error</Badge>
+```
+
+Removed: `variant="secondary"`, `variant="destructive"`, `color="brand"`.
+Added: `variant="soft"`, `color="custom"`, interactive props, `Badge.Indicator`, `Badge.Group`.
+
+### Chip deprecated
+
+```tsx
+// Before
+<Chip label="Tag" onDelete={fn} />
+
+// After
+<Badge onClick={fn} onDismiss={fn}>Tag</Badge>
+```
+
+## v0.23.0
+
+**Surface and shadow token migration.** See the detailed guide: [plans/2026-03-16-surface-shadow-consistency-design.md](plans/2026-03-16-surface-shadow-consistency-design.md).
+
+Key renames:
+- `bg-surface-1` → `bg-surface-base`
+- `bg-surface-2` → `bg-surface-raised`
+- `bg-surface-3` → `bg-surface-raised-hover`
+- `bg-surface-4` → `bg-surface-raised-active`
+- `shadow-01` through `shadow-05` → `shadow-raised`, `shadow-raised-hover`, `shadow-floating`, `shadow-overlay`
+
+## v0.9.0
+
+**Dependency bundling.** All runtime deps now bundled into dist. Only React + peer deps stay external. Fixes React #527 in Next.js + pnpm. No API changes, but consumers should add to `next.config.js`:
+
+```js
+transpilePackages: ["@devalok/shilp-sutra", "@devalok/shilp-sutra-brand"]
+```

package/README.md

@@ -11,42 +11,45 @@ For full documentation, setup guides, and architecture details, see the [monorep
 ## Install
 
 ```bash
-pnpm add @devalok/shilp-sutra
+pnpm add @devalok/shilp-sutra framer-motion
+# Only if you render a <Toaster />:
+pnpm add sonner
 ```
 
+> **Upgrading from &lt; 0.37?** 0.37 is a Tailwind 4 CSS-first release — the setup has changed. Read [MIGRATION.md](https://github.com/devalok-design/shilp-sutra/blob/main/MIGRATION.md#v0370--tailwind-4-css-first-migration).
+
 ## Quick Start
 
-```ts
-// tailwind.config.ts
-import shilpSutra from '@devalok/shilp-sutra/tailwind'
+```css
+/* app/globals.css */
+@import "tailwindcss";
+@import "@devalok/shilp-sutra/css";
+```
 
+```ts
+// next.config.ts
 export default {
-  presets: [shilpSutra],
-  content: [
-    './app/**/*.{ts,tsx}',
-    './node_modules/@devalok/shilp-sutra/dist/**/*.js',
-  ],
+  transpilePackages: ['@devalok/shilp-sutra', '@devalok/shilp-sutra-brand'],
 }
 ```
 
-```tsx
-// app/layout.tsx
-import '@devalok/shilp-sutra/tokens'
-```
-
 ```tsx
 // Any component
 import { Button } from '@devalok/shilp-sutra/ui/button'
 ```
 
+No `tailwind.config.ts` required from us. Your own plugins or content globs go in `globals.css` via TW4 directives (`@plugin`, `@source`, `@theme`).
+
 ## Peer Dependencies
 
 ### Required
 
-| Package | Version |
-|---------|---------|
-| `react` | `^18 \|\| ^19` |
-| `react-dom` | `^18 \|\| ^19` |
+| Package | Version | Why |
+|---|---|---|
+| `react` | `^18 \|\| ^19` | |
+| `react-dom` | `^18 \|\| ^19` | |
+| `tailwindcss` | `^4.0.0` | We ship TW4 `@theme` CSS; TW3 is not supported |
+| `framer-motion` | `^12.0.0` | Shared-state motion contexts must be single-copy |
 
 ### Optional
 
@@ -54,28 +57,22 @@ Install only what you use:
 
 | Feature | Packages |
 |---------|----------|
+| Toasts (`./ui/toaster`, `./ui/toast`) | `sonner` |
 | Charts (`./ui/charts`) | `d3-array`, `d3-axis`, `d3-format`, `d3-interpolate`, `d3-scale`, `d3-selection`, `d3-shape`, `d3-time-format`, `d3-transition` |
-| Rich Text Editor (`./composed/rich-text-editor`) | `@tiptap/react`, `@tiptap/starter-kit`, `@tiptap/extension-placeholder` |
+| Rich Text Editor (`./composed/rich-text-editor`) | `@tiptap/react`, `@tiptap/starter-kit` |
 | DataTable (`./ui/data-table`) | `@tanstack/react-table`, `@tanstack/react-virtual` |
 | Icons | `@tabler/icons-react` |
 | Date components (`./composed/date-picker`) | `date-fns` |
 | OTP Input (`./ui/input-otp`) | `input-otp` |
-| Markdown rendering | `react-markdown` |
-
-## Next.js
-
-Add to `next.config.js`:
-
-```js
-transpilePackages: ["@devalok/shilp-sutra", "@devalok/shilp-sutra-brand"]
-```
+| Markdown rendering | `react-markdown`, `remark-gfm` |
+| PDF preview (`./composed/file-preview`) | `react-pdf`, `react-zoom-pan-pinch` |
 
 ## Links
 
 - [Storybook](https://devalok-design.github.io/shilp-sutra/) -- interactive component docs
 - [Monorepo README](https://github.com/devalok-design/shilp-sutra#readme) -- full docs, architecture, component list
 - [Changelog](https://github.com/devalok-design/shilp-sutra/blob/main/CHANGELOG.md)
-- [Migration Guide](https://github.com/devalok-design/shilp-sutra/blob/main/docs/MIGRATION.md)
+- [Migration Guide](https://github.com/devalok-design/shilp-sutra/blob/main/MIGRATION.md)
 
 ## License
 

package/dist/_chunks/badge-group.js

@@ -1,14 +1,14 @@
 "use client";
 import { Hn as e } from "./primitives.js";
-import { a as t, c as n, n as r } from "./framer.js";
-import { durations as i, springs as a } from "../ui/lib/motion.js";
-import { t as o } from "./vendor-utils.js";
-import { cn as s } from "../ui/lib/utils.js";
-import { Icon as c } from "../ui/icon.js";
-import { BadgeIndicator as l } from "../ui/badge-indicator.js";
-import * as u from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { IconCheck as p, IconX as m } from "@tabler/icons-react";
+import { durations as t, springs as n } from "../ui/lib/motion.js";
+import { t as r } from "./vendor-utils.js";
+import { cn as i } from "../ui/lib/utils.js";
+import { Icon as a } from "../ui/icon.js";
+import { BadgeIndicator as o } from "../ui/badge-indicator.js";
+import * as s from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { IconCheck as u, IconX as d } from "@tabler/icons-react";
+import { AnimatePresence as f, motion as p, useReducedMotion as m } from "framer-motion";
 //#region src/ui/badge.tsx
 var h = {
 	default: {
@@ -114,13 +114,13 @@ function g(e, t) {
 	if (t === "custom") return "";
 	let n = h[t];
 	switch (e) {
-		case "subtle": return s(n.bg, n.fg, n.border);
-		case "solid": return s(n.solid, n.solidFg, "border-transparent");
-		case "outline": return s("bg-transparent", n.fg, n.border);
-		case "soft": return s(n.bg, n.fg, "border-transparent");
+		case "subtle": return i(n.bg, n.fg, n.border);
+		case "solid": return i(n.solid, n.solidFg, "border-transparent");
+		case "outline": return i("bg-transparent", n.fg, n.border);
+		case "soft": return i(n.bg, n.fg, "border-transparent");
 	}
 }
-var _ = o("relative inline-flex items-center rounded-full font-sans font-medium overflow-hidden isolate transition-[color,background-color,border-color,padding] duration-fast-02 ease-productive-standard select-none [&>span:not([data-grain])]:relative [&>span:not([data-grain])]:z-[2]", {
+var _ = r("relative inline-flex items-center rounded-full font-sans font-medium overflow-hidden isolate transition-[color,background-color,border-color,padding] duration-fast-02 ease-productive-standard select-none [&>span:not([data-grain])]:relative [&>span:not([data-grain])]:z-[2]", {
 	variants: {
 		variant: {
 			subtle: "border",
@@ -154,8 +154,8 @@ var _ = o("relative inline-flex items-center rounded-full font-sans font-medium
 	sm: "pr-ds-02",
 	md: "pr-ds-02",
 	lg: "pr-ds-02b"
-}, x = u.forwardRef(({ className: o, variant: l, color: u, size: h, asChild: x, startIcon: S, endIcon: C, dot: w, onDismiss: T, onClick: E, selected: D, disabled: O, maxWidth: k, truncate: A, circle: j, children: M, style: N, ...P }, F) => {
-	let I = r(), L = l ?? "subtle", R = u ?? "default", z = h ?? "md", B = x ? e : E && T ? "div" : E ? "button" : "span", V = R === "custom" ? {
+}, x = s.forwardRef(({ className: r, variant: o, color: s, size: h, asChild: x, startIcon: S, endIcon: C, dot: w, onDismiss: T, onClick: E, selected: D, disabled: O, maxWidth: k, truncate: A, circle: j, children: M, style: N, ...P }, F) => {
+	let I = m(), L = o ?? "subtle", R = s ?? "default", z = h ?? "md", B = x ? e : E && T ? "div" : E ? "button" : "span", V = R === "custom" ? {
 		...L === "subtle" && {
 			backgroundColor: "color-mix(in oklch, var(--badge-color) 15%, transparent)",
 			color: "var(--badge-color)",
@@ -179,12 +179,12 @@ var _ = o("relative inline-flex items-center rounded-full font-sans font-medium
 	} : void 0, H = E && T ? (e) => {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), O || E(e)), P.onKeyDown?.(e);
 	} : P.onKeyDown, U = !!(w || S || E && D && !S && !w), W = !!(T || C);
-	return /* @__PURE__ */ f(B, {
+	return /* @__PURE__ */ l(B, {
 		ref: F,
-		className: s(_({
+		className: i(_({
 			variant: L,
 			size: z
-		}), g(L, R), U && y[z], W && b[z], E && "cursor-pointer hover:brightness-[0.97] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 transition-[color,background-color,border-color,transform,filter] duration-moderate-01 ease-productive-exit hover:duration-fast-02 hover:ease-productive-entrance active:scale-[0.95] active:brightness-[0.92] active:duration-[0ms]", D && "ring-1 ring-current/20 transition-shadow duration-fast-02", O && "opacity-action-disabled pointer-events-none saturate-[0.3]", j && "justify-center px-0 aspect-square", o),
+		}), g(L, R), U && y[z], W && b[z], E && "cursor-pointer hover:brightness-[0.97] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 transition-[color,background-color,border-color,transform,filter] duration-moderate-01 ease-productive-exit hover:duration-fast-02 hover:ease-productive-entrance active:scale-[0.95] active:brightness-[0.92] active:duration-[0ms]", D && "ring-1 ring-current/20 transition-shadow duration-fast-02", O && "opacity-action-disabled pointer-events-none saturate-[0.3]", j && "justify-center px-0 aspect-square", r),
 		style: {
 			...N,
 			...V,
@@ -200,14 +200,14 @@ var _ = o("relative inline-flex items-center rounded-full font-sans font-medium
 		} : {},
 		...P,
 		children: [
-			/* @__PURE__ */ d(n, { children: w && /* @__PURE__ */ f(t.span, {
+			/* @__PURE__ */ c(f, { children: w && /* @__PURE__ */ l(p.span, {
 				initial: { scale: 0 },
 				animate: { scale: 1 },
 				exit: { scale: 0 },
-				transition: a.snappy,
+				transition: n.snappy,
 				className: "relative inline-flex h-1.5 w-1.5 shrink-0",
 				"aria-hidden": "true",
-				children: [/* @__PURE__ */ d(t.span, {
+				children: [/* @__PURE__ */ c(p.span, {
 					className: "absolute inset-0 rounded-full bg-current",
 					animate: I ? void 0 : {
 						scale: [1, 2.5],
@@ -224,9 +224,9 @@ var _ = o("relative inline-flex items-center rounded-full font-sans font-medium
 							1
 						]
 					}
-				}), /* @__PURE__ */ d("span", { className: "relative h-1.5 w-1.5 rounded-full bg-current" })]
+				}), /* @__PURE__ */ c("span", { className: "relative h-1.5 w-1.5 rounded-full bg-current" })]
 			}, "dot") }),
-			E && !S && !w && /* @__PURE__ */ d(t.span, {
+			E && !S && !w && /* @__PURE__ */ c(p.span, {
 				initial: !1,
 				animate: D ? {
 					opacity: 1,
@@ -241,7 +241,7 @@ var _ = o("relative inline-flex items-center rounded-full font-sans font-medium
 				},
 				transition: {
 					type: "tween",
-					duration: i.moderate01,
+					duration: t.moderate01,
 					ease: [
 						.2,
 						0,
@@ -251,33 +251,33 @@ var _ = o("relative inline-flex items-center rounded-full font-sans font-medium
 				},
 				className: "inline-flex shrink-0 overflow-hidden",
 				"aria-hidden": !D,
-				children: /* @__PURE__ */ d(c, {
-					icon: p,
+				children: /* @__PURE__ */ c(a, {
+					icon: u,
 					size: "xs"
 				})
 			}),
-			S && /* @__PURE__ */ d("span", {
-				className: s("shrink-0", v[z]),
+			S && /* @__PURE__ */ c("span", {
+				className: i("shrink-0", v[z]),
 				children: S
 			}),
-			A || k ? /* @__PURE__ */ d("span", {
+			A || k ? /* @__PURE__ */ c("span", {
 				className: "truncate",
 				title: typeof M == "string" ? M : void 0,
 				children: M
 			}) : M,
-			C && /* @__PURE__ */ d("span", {
-				className: s("shrink-0", v[z]),
+			C && /* @__PURE__ */ c("span", {
+				className: i("shrink-0", v[z]),
 				children: C
 			}),
-			T && /* @__PURE__ */ d("button", {
+			T && /* @__PURE__ */ c("button", {
 				type: "button",
 				onClick: (e) => {
 					e.stopPropagation(), T();
 				},
-				className: s("shrink-0 rounded-full text-current/60 hover:text-current hover:bg-current/10 transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent-9", z === "xs" ? "p-0 -mr-0.5 min-w-[16px] min-h-[16px]" : "p-px"),
+				className: i("shrink-0 rounded-full text-current/60 hover:text-current hover:bg-current/10 transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent-9", z === "xs" ? "p-0 -mr-0.5 min-w-[16px] min-h-[16px]" : "p-px"),
 				"aria-label": `Remove ${typeof M == "string" ? M : ""}`.trim() || "Remove",
-				children: /* @__PURE__ */ d(c, {
-					icon: m,
+				children: /* @__PURE__ */ c(a, {
+					icon: d,
 					size: "xs"
 				})
 			})
@@ -286,18 +286,18 @@ var _ = o("relative inline-flex items-center rounded-full font-sans font-medium
 });
 x.displayName = "Badge";
 var S = Object.assign(x, {
-	Indicator: l,
+	Indicator: o,
 	Group: w
 }), C = {
 	tight: "gap-1",
 	default: "gap-1.5",
 	loose: "gap-2"
 };
-function w({ max: e, gap: t = "default", size: n, onOverflowClick: r, className: i, children: a }) {
-	let o = u.Children.toArray(a), c = o.length, l = e !== void 0 && c > e, d = l ? o.slice(0, e) : o, p = l ? c - e : 0;
-	return /* @__PURE__ */ f("div", {
-		className: s("flex flex-wrap items-center", C[t], i),
-		children: [d, l && /* @__PURE__ */ f(S, {
+function w({ max: e, gap: t = "default", size: n, onOverflowClick: r, className: a, children: o }) {
+	let c = s.Children.toArray(o), u = c.length, d = e !== void 0 && u > e, f = d ? c.slice(0, e) : c, p = d ? u - e : 0;
+	return /* @__PURE__ */ l("div", {
+		className: i("flex flex-wrap items-center", C[t], a),
+		children: [f, d && /* @__PURE__ */ l(S, {
 			variant: "outline",
 			color: "neutral",
 			size: n ?? "sm",