@devalok/shilp-sutra 0.17.2 → 0.18.1

package/llms.txt

@@ -4,6 +4,35 @@
 > Built on the same primitives as shadcn/ui but with key API differences.
 > Read this file BEFORE writing any UI code. Do NOT guess from shadcn/ui knowledge.
 
+## BREAKING CHANGES (v0.18.0 — Framer Motion + OKLCH)
+
+**New runtime dependency:** `framer-motion@^12.36.0` (bundled). Karm consumers must install `framer-motion@^12.0.0` as peer dep.
+
+**Transitions removed:** `Fade`, `Collapse`, `Grow`, `Slide` from `./ui/transitions` no longer exist. Use `MotionFade`, `MotionCollapse`, `MotionSlide` from `@devalok/shilp-sutra/motion/primitives`.
+
+**CSS keyframe animations removed:** 18 keyframes (`fade-in`, `fade-out`, `slide-up`, `scale-in`, etc.) and their `animate-*` utilities removed from Tailwind preset. Use motion primitives instead.
+
+**`useReducedMotion()` removed:** Use `<MotionProvider reducedMotion="user">` at app root.
+
+**New motion system:**
+- `import { MotionProvider, springs, tweens } from '@devalok/shilp-sutra/motion'`
+- `import { MotionFade, MotionCollapse, MotionSlide, MotionPop, MotionScale, MotionStagger } from '@devalok/shilp-sutra/motion/primitives'`
+- Springs: `springs.snappy`, `springs.smooth`, `springs.bouncy`, `springs.gentle`
+- Tweens: `tweens.fade`, `tweens.colorShift`
+
+**Spinner v2:** New props `state?: 'spinning' | 'success' | 'error'`, `variant?: 'filled' | 'bare'`, `delay?: number`, `onComplete?: () => void`
+
+**Button `onClickAsync`:** New prop `onClickAsync?: (e) => Promise<void>` — auto-manages loading → success/error → idle states. `asyncFeedbackDuration?: number` (default 1500ms).
+
+**Server safety changes:** EmptyState, StatusBadge, Spinner are NO LONGER server-safe (they now use Framer Motion). Remove from RSC imports.
+
+**Build:** `framer-motion` and `sonner` moved from `dependencies` to `devDependencies` (bundled at build time — no consumer install needed for core, but karm consumers must install `framer-motion` as peer dep).
+
+**New APIs in v0.18.0:**
+- Combobox: `accessibleLabel?: string` — custom aria-label for trigger (falls back to placeholder)
+- Slider: multi-thumb support — pass array `defaultValue={[25, 75]}` for range sliders
+- StreamingText (karm): `isComplete?: boolean` — debounces aria-live, announces only on completion
+
 ## CHANGES (v0.16.0)
 - **DataTable server-side features**: `onSort` callback (manual sorting), `pagination` prop (server-side pagination with page/total/onPageChange), `selectedIds` + `selectableFilter` (controlled selection), `loading` shimmer, `emptyState` ReactNode, `singleExpand`, `stickyHeader`, `onRowClick`, `bulkActions` floating bar
 - **ActivityFeed**: New composed component — `@devalok/shilp-sutra/composed/activity-feed` — vertical timeline with colored dots, actor avatars, expandable detail, compact mode, load more
@@ -44,6 +73,18 @@
 - StatusBadge: Pass either `status` OR `color`, not both (discriminated union).
 - Input/Textarea: Now auto-inherit state, aria-describedby, aria-required from FormField context. Explicit props override.
 
+## BREAKING CHANGES (v0.18.0 — OKLCH token migration, continued)
+- All color primitives migrated from hex (50-950 shades) to OKLCH (12 functional steps)
+- Old shade numbers: --pink-50..950. New step numbers: --pink-1..12 (OKLCH values)
+- Step purposes: 1=app-bg, 2=subtle-bg, 3=component-bg, 4=hover, 5=active, 6=border-subtle, 7=border, 8=border-strong, 9=solid/accent, 10=solid-hover, 11=lo-contrast-text, 12=hi-contrast-text
+- New semantic tokens: --color-accent-{1-12}, --color-secondary-{1-12}, --color-surface-{1-4}, --color-surface-fg/fg-muted/fg-subtle/border
+- Status tokens: --color-error-{3,7,9,11,fg}, --color-success-{3,7,9,11,fg}, --color-warning-{3,7,9,11,fg}, --color-info-{3,7,9,11,fg}
+- New Tailwind utilities: accent-1..12, secondary-1..12, surface-1..4, status/category step utilities
+- Backward compat: ALL old semantic token names preserved as aliases. --color-interactive still works → maps to --color-accent-9
+- Consumer rebranding: override --color-accent-1..12 CSS vars OR use generateScale() utility with a seed color
+- Dark mode: algorithmically derived (OKLCH curves), NOT hex overrides. Surfaces lighten with elevation.
+- If you reference --pink-500 etc directly, migrate: 50→1, 100→2, 200→3, 300→4, 400→5, 500→7, 600→8, 700→9, 800→10, 900→11, 950→12
+
 ## Install & Setup
 
 pnpm add @devalok/shilp-sutra
@@ -63,8 +104,10 @@ import { Button } from '@devalok/shilp-sutra/ui/button'
 import { PageHeader } from '@devalok/shilp-sutra/composed/page-header'
 import { TopBar } from '@devalok/shilp-sutra/shell/top-bar'
 
+// Toast (imperative, no hook needed):
+import { toast } from '@devalok/shilp-sutra/ui/toast'
+
 // Hooks:
-import { useToast } from '@devalok/shilp-sutra/hooks/use-toast'
 import { useColorMode } from '@devalok/shilp-sutra/hooks/use-color-mode'
 
 // CSS tokens (import once at app root):
@@ -83,7 +126,7 @@ If you have shadcn/ui knowledge, these are the differences that WILL trip you up
 | size="default" | size="md" | All sizes: sm, md, lg (never "default") |
 | <Select size="lg"> | <SelectTrigger size="lg"> | Size goes on trigger, NOT root |
 | <Chip>text</Chip> | <Chip label="text" /> | Chip uses label prop, NOT children |
-| Toast variant="destructive" | Toast color="error" | Toast uses color= not variant= |
+| useToast() + toast({ variant }) | toast.success('msg') | Imperative API, no hook needed |
 | Badge variant="destructive" | Badge variant="solid" color="error" | Two-axis: variant + color |
 | Alert + AlertTitle + AlertDescription | <Alert title="..." color="error"> | Single component, not compound |
 | Form + FormField + FormItem + FormLabel + FormControl + FormDescription + FormMessage | FormField + Label + Input + FormHelperText + useFormField() | Simpler API, hook-based a11y wiring |
@@ -101,7 +144,7 @@ Examples:
   <Badge variant="solid" color="success">Active</Badge>      // green solid badge
   <Alert variant="filled" color="warning">Warning!</Alert>   // yellow filled alert
 
-Components with two-axis system: Button, Badge, Alert, Chip, Toast, Banner, Progress, StatusBadge
+Components with two-axis system: Button, Badge, Alert, Chip, Banner, Progress, StatusBadge
 
 ## Component Quick Reference
 
@@ -125,14 +168,14 @@ Components with two-axis system: Button, Badge, Alert, Chip, Toast, Banner, Prog
 ### Feedback & Notifications
 - Alert: variant(subtle|filled|outline) color(info|success|warning|error|neutral) + title, onDismiss
 - Banner: color(info|success|warning|error|neutral) + title, onDismiss
-- Toast: color(neutral|success|warning|error|info) — REQUIRES <Toaster> at layout root + useToast()
+- Toast: imperative API via toast.success/error/warning/info/loading/message/undo/promise/upload/custom — REQUIRES <Toaster> at layout root
 - Spinner: size(sm|md|lg) — renders with role="status"
 - Progress: track size(sm|md|lg), indicator color(default|success|warning|error)
 
 NOTIFICATION SELECTION GUIDE:
   - Alert: inline contextual feedback within a form or page section
   - Banner: persistent page-level notification above content
-  - Toast: transient notification triggered by user action (needs Toaster + useToast)
+  - Toast: transient notification triggered by user action (needs <Toaster>, then call toast.success() etc.)
 
 ### Data Display
 - Badge: variant(subtle|solid|outline) color(default|info|success|error|warning|brand|accent + 7 category colors) size(xs|sm|md|lg) + onDismiss
@@ -192,8 +235,8 @@ NOTIFICATION SELECTION GUIDE:
 - MonthPicker: month grid — currentYear, selectedMonth(0-11), onMonthSelect, minDate, maxDate
 - Presets: date range quick-select buttons — presets(PresetKey[]), onSelect(start, end). Keys: today, yesterday, last7days, last30days, thisMonth, lastMonth, thisYear
 - useCalendar: hook for calendar month state — returns currentMonth, goToPreviousMonth, goToNextMonth, goToMonth, goToYear
-- UploadProgress: file upload tracker — files(UploadFile[]), onRemove, onRetry, onDismissAll, variant(default|compact), showSize. Status: pending|uploading|processing|complete|error. Also exports formatFileSize()
-- RichTextEditor: Tiptap editor — bold/italic/underline/strike/highlight, headings, blockquote, lists (bullet/ordered/task), code, links, images (paste/drop/upload), file attachments, @mentions, emoji picker + :shortcode:, text alignment, HR. Props: onImageUpload?, onFileUpload?, mentions?, onMentionSearch?, onMentionSelect?
+- (UploadProgress REMOVED — upload tracking is now built into toast.upload())
+- RichTextEditor: Tiptap editor — bold/italic/underline/strike/highlight, headings, blockquote, lists (bullet/ordered/task), code, links, images (paste/drop/upload), file attachments, @mentions, emoji picker + :shortcode:, text alignment, HR. Props: onImageUpload?, onFileUpload?, mentions?, onMentionSearch?, onMentionSelect?(item: MentionItem)
 - RichTextViewer: read-only renderer for RichTextEditor HTML content (renders all above content types)
 - ActivityFeed: items(ActivityItem[]), onLoadMore, loading, hasMore, emptyState, compact, maxInitialItems. Type: ActivityItem = { id, actor?, action, timestamp, icon?, color?, detail? }
 - CommandPalette, MemberPicker
@@ -221,11 +264,21 @@ NOTIFICATION SELECTION GUIDE:
 - AppCommandPalette: user, isAdmin, onNavigate, onSearch, searchResults, isSearching, onSearchResultSelect. Types: SearchResult = { id, title, snippet?, entityType, projectId?, metadata? }, AppCommandPaletteUser = { name, role? }
 - LinkProvider: wraps app with router-agnostic Link component — component(ForwardRefComponent), children. useLink() hook returns the Link component.
 
-### Motion Tokens
-- motion(category, mode) => CSS cubic-bezier string. duration(token) => CSS duration string. easings: Record<MotionMode, Record<MotionCategory, string>>. durations: Record<DurationToken, string> = { instant: '0ms', fast-01: '70ms', fast-02: '110ms', moderate-01: '150ms', moderate-02: '240ms', slow-01: '400ms', slow-02: '700ms' }
+### Motion System (Framer Motion)
+- Setup: Wrap app root with `<MotionProvider>` from `@devalok/shilp-sutra/motion`. Handles reduced-motion detection globally.
+- Import presets: `import { springs, tweens, stagger } from '@devalok/shilp-sutra/motion'`
+- Import primitives: `import { MotionFade, MotionScale, MotionPop, MotionSlide, MotionCollapse, MotionStagger, MotionStaggerItem } from '@devalok/shilp-sutra/motion/primitives'`
+- Spring presets (spatial: position, scale, size): snappy (buttons/hover), smooth (dialogs/panels), bouncy (toasts/pop-ins), gentle (collapse/expand)
+- Tween presets (non-spatial: opacity, color): fade (opacity enter/exit), colorShift (hover color/bg)
+- All primitives take `show: boolean` to control mount/unmount via AnimatePresence
+- MotionSlide: additional `direction` prop (up|down|left|right)
+- MotionStagger + MotionStaggerItem: orchestrated stagger with configurable `delay` (default 0.04s)
+- All primitives support `layout`, `layoutId`, `whileInView`, `viewportOnce`, `preset` props
+- useMotion() hook returns { springs, tweens, reducedMotion: boolean }
+- Old Fade/Collapse/Grow/Slide from @devalok/shilp-sutra/ui/transitions are REMOVED — use Motion* equivalents
 
 ### Hooks
-- useToast(): returns { toast, toasts, dismiss } — toast({ title, description, color }). Also: import { toast } from '@devalok/shilp-sutra/hooks/use-toast' for imperative usage without hook
+- toast: imperative API — import { toast } from '@devalok/shilp-sutra/ui/toast'. Methods: toast.success/error/warning/info/loading/message/undo/promise/upload/custom/dismiss. useToast() is deprecated.
 - useColorMode(): returns { colorMode, setColorMode, toggleColorMode }
 - useMobile(): returns boolean (true if viewport < 768px)
 - useLink(): returns router-agnostic Link component from LinkProvider context (shell/link-context)
@@ -233,8 +286,8 @@ NOTIFICATION SELECTION GUIDE:
 ## Server-Safe Components (no "use client")
 
 These can be imported directly in Next.js Server Components:
-- UI: Text, Skeleton, Spinner, Stack, Container, Table (and sub-components), Code, VisuallyHidden
-- Composed: ContentCard, EmptyState, PageHeader, LoadingSkeleton, PageSkeletons, PriorityIndicator, StatusBadge
+- UI: Text, Skeleton, Stack, Container, Table (and sub-components), Code, VisuallyHidden
+- Composed: ContentCard, PageHeader, LoadingSkeleton, PageSkeletons, PriorityIndicator
 
 Use per-component imports for server components:
   import { Text } from '@devalok/shilp-sutra/ui/text'
@@ -248,8 +301,8 @@ DO NOT use barrel imports in Server Components — they include "use client" com
 - DO NOT use size="default" — use size="md" (or sm, lg)
 - DO NOT put size on <Select> — put it on <SelectTrigger size="md">
 - DO NOT use <Chip>text</Chip> — use <Chip label="text" />
-- DO NOT use <Toast variant="..."> — use <Toast color="error">
-- DO NOT use color="danger" — use color="error"
+- DO NOT use useToast() hook — use import { toast } from '@devalok/shilp-sutra/ui/toast' (imperative)
+- DO NOT use toast({ title, color }) object syntax — use toast.success('message'), toast.error('message'), etc.
 - DO NOT call toast() without <Toaster /> mounted at your layout root
 - DO NOT use <Alert><AlertTitle>...</AlertTitle></Alert> — use <Alert title="..." />
 - DO NOT import from barrel in Next.js Server Components — use per-component imports

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devalok/shilp-sutra",
-  "version": "0.17.2",
+  "version": "0.18.1",
   "description": "Devalok Design System — tokens, components, and patterns for Next.js",
   "license": "MIT",
   "type": "module",
@@ -308,6 +308,11 @@
       "default": "./dist/ui/toast.js",
       "types": "./dist/ui/toast.d.ts"
     },
+    "./ui/toast-types": {
+      "import": "./dist/ui/toast-types.js",
+      "default": "./dist/ui/toast-types.js",
+      "types": "./dist/ui/toast-types.d.ts"
+    },
     "./ui/toaster": {
       "import": "./dist/ui/toaster.js",
       "default": "./dist/ui/toaster.js",
@@ -328,11 +333,6 @@
       "default": "./dist/ui/tooltip.js",
       "types": "./dist/ui/tooltip.d.ts"
     },
-    "./ui/transitions": {
-      "import": "./dist/ui/transitions.js",
-      "default": "./dist/ui/transitions.js",
-      "types": "./dist/ui/transitions.d.ts"
-    },
     "./ui/visually-hidden": {
       "import": "./dist/ui/visually-hidden.js",
       "default": "./dist/ui/visually-hidden.js",
@@ -353,6 +353,11 @@
       "default": "./dist/composed/index.js",
       "types": "./dist/composed/index.d.ts"
     },
+    "./composed/activity-feed": {
+      "import": "./dist/composed/activity-feed.js",
+      "default": "./dist/composed/activity-feed.js",
+      "types": "./dist/composed/activity-feed.d.ts"
+    },
     "./composed/avatar-group": {
       "import": "./dist/composed/avatar-group.js",
       "default": "./dist/composed/avatar-group.js",
@@ -478,6 +483,11 @@
       "default": "./dist/shell/top-bar.js",
       "types": "./dist/shell/top-bar.d.ts"
     },
+    "./shell/command-registry": {
+      "import": "./dist/shell/command-registry.js",
+      "default": "./dist/shell/command-registry.js",
+      "types": "./dist/shell/command-registry.d.ts"
+    },
     "./hooks": {
       "import": "./dist/hooks/index.js",
       "default": "./dist/hooks/index.js",
@@ -504,6 +514,12 @@
       "default": "./dist/tailwind/index.js",
       "types": "./dist/tailwind/index.d.ts"
     },
+    "./tailwind/preset": {
+      "require": "./dist/tailwind/index.cjs",
+      "import": "./dist/tailwind/preset.js",
+      "default": "./dist/tailwind/preset.js",
+      "types": "./dist/tailwind/preset.d.ts"
+    },
     "./utils": {
       "import": "./dist/ui/lib/utils.js",
       "default": "./dist/ui/lib/utils.js",
@@ -515,10 +531,30 @@
       "default": "./dist/ui/lib/utils.js",
       "types": "./dist/ui/lib/utils.d.ts"
     },
+    "./ui/lib/motion": {
+      "import": "./dist/ui/lib/motion.js",
+      "default": "./dist/ui/lib/motion.js",
+      "types": "./dist/ui/lib/motion.d.ts"
+    },
+    "./ui/lib/date-utils": {
+      "import": "./dist/ui/lib/date-utils.js",
+      "default": "./dist/ui/lib/date-utils.js",
+      "types": "./dist/ui/lib/date-utils.d.ts"
+    },
     "./composed/lib/string-utils": {
       "import": "./dist/composed/lib/string-utils.js",
       "default": "./dist/composed/lib/string-utils.js",
       "types": "./dist/composed/lib/string-utils.d.ts"
+    },
+    "./motion": {
+      "import": "./dist/motion/index.js",
+      "default": "./dist/motion/index.js",
+      "types": "./dist/motion/index.d.ts"
+    },
+    "./motion/primitives": {
+      "import": "./dist/motion/primitives-index.js",
+      "default": "./dist/motion/primitives-index.js",
+      "types": "./dist/motion/primitives-index.d.ts"
     }
   },
   "files": [
@@ -529,8 +565,10 @@
     "llms-full.txt"
   ],
   "scripts": {
-    "build": "vite build && pnpm build:tokens && node scripts/fix-dts-primitives.mjs && node scripts/inject-use-client.mjs && node scripts/build-tailwind-cjs.mjs",
+    "build": "vite build && pnpm build:tokens && node scripts/fix-dts-primitives.mjs && node scripts/inject-use-client.mjs && node scripts/build-tailwind-cjs.mjs && pnpm build:docs",
     "build:tokens": "node scripts/copy-tokens.mjs",
+    "build:docs": "node scripts/build-component-docs.mjs",
+    "build:docs:check": "node scripts/build-component-docs.mjs --check",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src/",
     "test": "vitest run",
@@ -647,10 +685,13 @@
     "input-otp": "^1.4.2",
     "react-markdown": "^10.1.0",
     "react-remove-scroll": "^2.6.3",
-    "tailwind-merge": "^3.0.1"
+    "tailwind-merge": "^3.0.1",
+    "framer-motion": "^12.36.0",
+    "sonner": "^2.0.7"
   },
   "engines": {
     "node": ">=20.0.0"
   },
-  "packageManager": "pnpm@10.0.0"
+  "packageManager": "pnpm@10.0.0",
+  "dependencies": {}
 }

package/dist/_chunks/avatar.js

@@ -1,50 +0,0 @@
-"use client";
-import { jsxs as p, jsx as l } from "react/jsx-runtime";
-import * as i from "react";
-import { R as n, I as o, F as t } from "./primitives.js";
-import { e as u } from "./vendor-utils.js";
-import { c as r } from "./utils.js";
-const h = u("relative flex shrink-0 overflow-hidden", {
-  variants: {
-    size: {
-      xs: "h-ds-xs w-ds-xs",
-      sm: "h-ds-sm w-ds-sm",
-      md: "h-ds-md w-ds-md",
-      lg: "h-ds-lg w-ds-lg",
-      xl: "h-ds-xl w-ds-xl"
-    },
-    shape: {
-      circle: "rounded-ds-full",
-      square: "rounded-ds-none",
-      rounded: "rounded-ds-md"
-    }
-  },
-  defaultVariants: { size: "md", shape: "circle" }
-}), w = {
-  online: "bg-success",
-  offline: "bg-layer-03",
-  busy: "bg-error",
-  away: "bg-warning"
-}, x = {
-  online: "Online",
-  offline: "Offline",
-  busy: "Busy",
-  away: "Away"
-}, b = {
-  xs: "h-ds-02b w-ds-02b",
-  sm: "h-[8px] w-[8px]",
-  md: "h-ds-03 w-ds-03",
-  lg: "h-[12px] w-[12px]",
-  xl: "h-ds-04 w-ds-04"
-}, g = i.forwardRef(({ className: a, size: s, shape: e, status: d, children: m, ...f }, c) => p("span", { className: "relative inline-flex shrink-0", children: [l(n, { ref: c, className: r(h({ size: s, shape: e }), a), ...f, children: m }), d && l("span", { className: r("absolute bottom-0 right-0 rounded-ds-full ring-2 ring-layer-01", w[d], b[s ?? "md"]), role: "img", "aria-label": x[d] })] }));
-g.displayName = n.displayName;
-const y = i.forwardRef(({ className: a, ...s }, e) => l(o, { ref: e, className: r("aspect-square h-full w-full", a), ...s }));
-y.displayName = o.displayName;
-const v = i.forwardRef(({ className: a, ...s }, e) => l(t, { ref: e, className: r("flex h-full w-full items-center justify-center rounded-ds-full bg-interactive-subtle text-interactive", a), ...s }));
-v.displayName = t.displayName;
-export {
-  g as A,
-  y as a,
-  v as b,
-  h as c
-};

package/dist/_chunks/button.js

@@ -1,95 +0,0 @@
-"use client";
-import { jsx as r, jsxs as x } from "react/jsx-runtime";
-import { e as V } from "./vendor-utils.js";
-import { S as R, a as E } from "./primitives.js";
-import * as G from "react";
-import { u as M, S as q } from "./spinner.js";
-import { c as s } from "./utils.js";
-const p = V("inline-flex items-center justify-center gap-ds-03 whitespace-nowrap font-sans font-semibold select-none border border-transparent transition-[color,background-color,border-color,box-shadow,transform] duration-fast-01 ease-productive-standard active:translate-y-px focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-[0.38]", {
-  variants: {
-    variant: {
-      solid: "",
-      default: "",
-      // alias → solid
-      outline: "",
-      ghost: "",
-      destructive: "",
-      // alias → solid + error
-      link: "text-text-link underline-offset-4 hover:underline active:opacity-[0.8]"
-    },
-    color: {
-      default: "",
-      error: ""
-    },
-    size: {
-      sm: "h-ds-sm rounded-ds-md px-ds-04 text-ds-sm",
-      md: "h-ds-md rounded-ds-md px-ds-05 text-ds-md",
-      lg: "h-ds-lg rounded-ds-lg px-ds-06 text-ds-base",
-      icon: "h-ds-md w-ds-md rounded-ds-md",
-      // alias → icon-md
-      "icon-sm": "h-ds-sm w-ds-sm rounded-ds-md",
-      "icon-md": "h-ds-md w-ds-md rounded-ds-md",
-      "icon-lg": "h-ds-lg w-ds-lg rounded-ds-lg"
-    }
-  },
-  compoundVariants: [
-    // solid + default (primary)
-    { variant: "solid", color: "default", className: "bg-interactive text-text-on-color hover:bg-interactive-hover active:bg-interactive-active shadow-01 hover:shadow-brand" },
-    // "default" alias → same as solid + default
-    { variant: "default", color: "default", className: "bg-interactive text-text-on-color hover:bg-interactive-hover active:bg-interactive-active shadow-01 hover:shadow-brand" },
-    { variant: "default", color: "error", className: "bg-error text-text-on-color hover:bg-error-hover active:bg-error-hover shadow-01" },
-    // "destructive" alias → solid + error
-    { variant: "destructive", color: "default", className: "bg-error text-text-on-color hover:bg-error-hover active:bg-error-hover shadow-01" },
-    { variant: "destructive", color: "error", className: "bg-error text-text-on-color hover:bg-error-hover active:bg-error-hover shadow-01" },
-    // solid + error
-    { variant: "solid", color: "error", className: "bg-error text-text-on-color hover:bg-error-hover active:bg-error-hover shadow-01" },
-    // outline + default (secondary)
-    { variant: "outline", color: "default", className: "bg-transparent text-interactive border-border-interactive hover:bg-interactive-subtle active:bg-layer-active" },
-    // outline + error (error-ghost)
-    { variant: "outline", color: "error", className: "bg-transparent text-error border border-border-error hover:bg-error-surface active:bg-error-surface" },
-    // ghost + default
-    { variant: "ghost", color: "default", className: "bg-transparent text-text-secondary hover:bg-layer-02 hover:text-text-primary active:bg-layer-active" },
-    // ghost + error
-    { variant: "ghost", color: "error", className: "bg-transparent text-error hover:bg-error-surface hover:text-error active:bg-error-surface" }
-  ],
-  defaultVariants: {
-    variant: "solid",
-    color: "default",
-    size: "md"
-  }
-}), A = {
-  sm: "h-ico-sm w-ico-sm [&>svg]:h-ico-sm [&>svg]:w-ico-sm",
-  md: "h-ico-sm w-ico-sm [&>svg]:h-ico-sm [&>svg]:w-ico-sm",
-  lg: "h-ico-md w-ico-md [&>svg]:h-ico-md [&>svg]:w-ico-md",
-  icon: "h-ico-sm w-ico-sm [&>svg]:h-ico-sm [&>svg]:w-ico-sm",
-  "icon-sm": "h-ico-sm w-ico-sm [&>svg]:h-ico-sm [&>svg]:w-ico-sm",
-  "icon-md": "h-ico-sm w-ico-sm [&>svg]:h-ico-sm [&>svg]:w-ico-sm",
-  "icon-lg": "h-ico-md w-ico-md [&>svg]:h-ico-md [&>svg]:w-ico-md"
-}, D = {
-  sm: "sm",
-  md: "sm",
-  lg: "md",
-  icon: "sm",
-  "icon-sm": "sm",
-  "icon-md": "sm",
-  "icon-lg": "md"
-}, F = G.forwardRef(({ className: c, variant: w, color: N, size: y, asChild: S = !1, startIcon: d, endIcon: l, loading: e = !1, loadingPosition: t = "start", fullWidth: m = !1, disabled: v, children: a, ...u }, h) => {
-  const i = M(), b = w ?? i.variant, f = N ?? i.color, o = y ?? i.size ?? "md", g = A[o], z = D[o], n = e ? r(q, { size: z }) : null;
-  if (S) {
-    const C = {
-      className: s(p({ variant: b, color: f, size: o }), m && "w-full", c),
-      ref: h,
-      disabled: v || e,
-      "aria-busy": e || void 0,
-      ...u
-    };
-    return r(R, { ...C, children: r(E, { children: a }) });
-  }
-  const j = () => e && t === "start" ? n : d ? r("span", { className: s("inline-flex shrink-0 items-center justify-center", g), children: d }) : null, k = () => e && t === "end" ? n : l ? r("span", { className: s("inline-flex shrink-0 items-center justify-center", g), children: l }) : null, B = () => e && t === "center" ? x("span", { className: "relative inline-flex items-center justify-center", children: [r("span", { className: "invisible", children: a }), r("span", { className: "absolute inset-0 flex items-center justify-center", children: n })] }) : a;
-  return x("button", { className: s(p({ variant: b, color: f, size: o }), m && "w-full", c), ref: h, disabled: v || e, "aria-busy": e || void 0, ...u, children: [j(), B(), k()] });
-});
-F.displayName = "Button";
-export {
-  F as B,
-  p as b
-};

package/dist/_chunks/checkbox.js

@@ -1,14 +0,0 @@
-"use client";
-import { jsx as e } from "react/jsx-runtime";
-import { C as r, b as d } from "./primitives.js";
-import { IconMinus as m, IconCheck as l } from "@tabler/icons-react";
-import * as f from "react";
-import { c as b } from "./utils.js";
-const h = f.forwardRef(({ className: i, error: o, indeterminate: a, checked: c, ...s }, n) => {
-  const t = a ? "indeterminate" : c;
-  return e(r, { ref: n, checked: t, className: b("peer flex items-center justify-center h-ico-md w-ico-md shrink-0 rounded-ds-sm", "border border-border-strong", "bg-field", "transition-colors duration-fast-01", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-[0.38]", "data-[state=checked]:bg-interactive data-[state=checked]:border-interactive data-[state=checked]:text-text-on-color", "data-[state=indeterminate]:bg-interactive data-[state=indeterminate]:border-interactive data-[state=indeterminate]:text-text-on-color", o && "border-border-error", i), ...s, children: e(d, { className: "flex items-center justify-center text-current animate-check-pop", children: t === "indeterminate" ? e(m, { className: "h-ico-sm w-ico-sm" }) : e(l, { className: "h-3 w-3" }) }) });
-});
-h.displayName = r.displayName;
-export {
-  h as C
-};

package/dist/_chunks/form.js

@@ -1,27 +0,0 @@
-"use client";
-import { jsx as c } from "react/jsx-runtime";
-import * as e from "react";
-import { c as i } from "./utils.js";
-const x = e.createContext({}), m = e.forwardRef(({ className: s, helperTextId: o, state: a = "helper", required: l, children: n, ...t }, r) => {
-  const d = e.useId(), p = o || `${d}-helper`;
-  return c(x.Provider, { value: { state: a, helperTextId: p, required: l }, children: c("div", { ref: r, className: i("flex flex-col gap-ds-02", s), ...t, children: n }) });
-});
-m.displayName = "FormField";
-const u = {
-  helper: "text-text-helper",
-  error: "text-text-error",
-  warning: "text-text-warning",
-  success: "text-text-success"
-}, f = e.forwardRef(({ className: s, id: o, state: a, ...l }, n) => {
-  const t = e.useContext(x), r = a ?? t.state ?? "helper", d = o ?? t.helperTextId;
-  return c("p", { ref: n, id: d, role: r === "error" ? "alert" : void 0, className: i("text-ds-sm", u[r], s), ...l });
-});
-f.displayName = "FormHelperText";
-function C() {
-  return e.useContext(x);
-}
-export {
-  m as F,
-  f as a,
-  C as u
-};