@devalok/shilp-sutra 0.2.1 → 0.3.0

package/README.md

@@ -0,0 +1,239 @@
+# @devalok/shilp-sutra
+
+Devalok Design System -- tokens, components, and patterns for React & Next.js.
+
+[![npm](https://img.shields.io/npm/v/@devalok/shilp-sutra)](https://www.npmjs.com/package/@devalok/shilp-sutra)
+[![Storybook](https://img.shields.io/badge/Storybook-ff4785?logo=storybook&logoColor=white)](https://devalok-design.github.io/shilp-sutra/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+---
+
+## Quick Setup
+
+### 1. Install
+
+```bash
+pnpm add @devalok/shilp-sutra
+```
+
+### 2. Add Tailwind Preset
+
+```ts
+// tailwind.config.ts
+import shilpSutra from '@devalok/shilp-sutra/tailwind'
+
+export default {
+  presets: [shilpSutra],
+  content: [
+    './app/**/*.{ts,tsx}',
+    './node_modules/@devalok/shilp-sutra/dist/**/*.js',
+  ],
+}
+```
+
+### 3. Import Tokens
+
+```tsx
+// app/layout.tsx (Next.js) or main entry point
+import '@devalok/shilp-sutra/tokens'
+import './globals.css'
+```
+
+Done. Start using components.
+
+---
+
+## Import Patterns
+
+### Per-component import (recommended)
+
+Best for tree-shaking, Server Components, and fast builds:
+
+```tsx
+import { Button } from '@devalok/shilp-sutra/ui/button'
+import { Dialog } from '@devalok/shilp-sutra/ui/dialog'
+import { DatePicker } from '@devalok/shilp-sutra/composed/date-picker'
+import { TopBar } from '@devalok/shilp-sutra/shell/top-bar'
+```
+
+### Barrel import
+
+Convenient for client components that use many primitives:
+
+```tsx
+import { Button, Dialog, Input, Badge } from '@devalok/shilp-sutra/ui'
+import { PageHeader, DatePicker } from '@devalok/shilp-sutra/composed'
+import { AppSidebar, TopBar } from '@devalok/shilp-sutra/shell'
+```
+
+### Root import
+
+Shorthand for UI components only:
+
+```tsx
+import { Button, Input } from '@devalok/shilp-sutra'
+```
+
+---
+
+## Mental Model
+
+The design system is organized into three tiers:
+
+| Layer | Import | What it contains |
+|-------|--------|------------------|
+| **ui** | `@devalok/shilp-sutra/ui` | 60+ atomic primitives -- buttons, inputs, dialogs, cards, tables, badges, charts, navigation menus |
+| **composed** | `@devalok/shilp-sutra/composed` | 14 multi-component patterns -- date picker, rich text editor, command palette, page header, skeletons |
+| **shell** | `@devalok/shilp-sutra/shell` | 7 app-level layout components -- sidebar, top bar, bottom navbar, notification center, command palette |
+
+Additional exports:
+
+| Import | Contents |
+|--------|----------|
+| `@devalok/shilp-sutra/tokens` | CSS custom properties (primitives, semantic, typography) |
+| `@devalok/shilp-sutra/tailwind` | Tailwind CSS preset with all design tokens |
+| `@devalok/shilp-sutra/hooks` | `useToast`, `useColorMode`, `useIsMobile` |
+| `@devalok/shilp-sutra/fonts/*` | Inter and Ranade variable fonts (WOFF2) |
+
+---
+
+## Peer Dependencies
+
+### Required
+
+| Package | Version |
+|---------|---------|
+| `react` | `^18 \|\| ^19` |
+| `react-dom` | `^18 \|\| ^19` |
+
+### Optional
+
+Install only what you use:
+
+| Feature | Packages |
+|---------|----------|
+| 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` |
+| DataTable (`./ui/data-table`) | `@tanstack/react-table`, `@tanstack/react-virtual` |
+| Icons (various components) | `@tabler/icons-react` |
+| Date components (`./composed/date-picker`) | `date-fns` |
+| OTP Input (`./ui/input-otp`) | `input-otp` |
+| Markdown rendering | `react-markdown` |
+
+Example -- install only charts deps:
+
+```bash
+pnpm add d3-array d3-axis d3-format d3-interpolate d3-scale d3-selection d3-shape d3-time-format d3-transition
+```
+
+---
+
+## Server-Safe Components
+
+These components work in React Server Components when imported via their per-component path. They do **not** include `"use client"` directives:
+
+### ui
+
+| Component | Import |
+|-----------|--------|
+| Text | `@devalok/shilp-sutra/ui/text` |
+| Skeleton | `@devalok/shilp-sutra/ui/skeleton` |
+| Spinner | `@devalok/shilp-sutra/ui/spinner` |
+| Stack | `@devalok/shilp-sutra/ui/stack` |
+| Container | `@devalok/shilp-sutra/ui/container` |
+| Table | `@devalok/shilp-sutra/ui/table` |
+| Code | `@devalok/shilp-sutra/ui/code` |
+| VisuallyHidden | `@devalok/shilp-sutra/ui/visually-hidden` |
+
+### composed
+
+| Component | Import |
+|-----------|--------|
+| ContentCard | `@devalok/shilp-sutra/composed/content-card` |
+| EmptyState | `@devalok/shilp-sutra/composed/empty-state` |
+| PageHeader | `@devalok/shilp-sutra/composed/page-header` |
+| LoadingSkeleton | `@devalok/shilp-sutra/composed/loading-skeleton` |
+| PageSkeletons | `@devalok/shilp-sutra/composed/page-skeletons` |
+| PriorityIndicator | `@devalok/shilp-sutra/composed/priority-indicator` |
+| StatusBadge | `@devalok/shilp-sutra/composed/status-badge` |
+
+All other components require client-side React and include `"use client"`.
+
+---
+
+## Dark Mode
+
+The design system uses CSS custom properties with a `.dark` class toggle. All semantic tokens have dark mode overrides built in.
+
+### Setup
+
+Add the `.dark` class to your `<html>` or a parent element:
+
+```html
+<html class="dark">
+```
+
+### Next.js with next-themes
+
+```tsx
+// app/layout.tsx
+import { ThemeProvider } from 'next-themes'
+
+export default function RootLayout({ children }) {
+  return (
+    <html suppressHydrationWarning>
+      <body>
+        <ThemeProvider attribute="class" defaultTheme="system">
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}
+```
+
+### Programmatic toggle
+
+```tsx
+import { useColorMode } from '@devalok/shilp-sutra/hooks'
+
+function ThemeToggle() {
+  const { mode, toggle } = useColorMode()
+  return <button onClick={toggle}>{mode === 'dark' ? 'Light' : 'Dark'}</button>
+}
+```
+
+---
+
+## TypeScript
+
+Full TypeScript support works out of the box. No special `tsconfig.json` settings required.
+
+All component props are exported as named types:
+
+```tsx
+import { type ButtonProps } from '@devalok/shilp-sutra/ui/button'
+import { type DatePickerProps } from '@devalok/shilp-sutra/composed/date-picker'
+```
+
+---
+
+## Token Architecture
+
+Three-tier CSS custom property system:
+
+1. **Primitives** (`primitives.css`) -- Raw palette values (50-950 scales). Never used directly in components.
+2. **Semantic** (`semantic.css`) -- Intent-based tokens (`--color-interactive`, `--color-text-primary`). Includes dark mode via `.dark` class.
+3. **Typography** (`typography.css`) -- Font-face declarations, type scale (T1-T7, B1-B8, L1-L6, P1-P7).
+
+---
+
+## Links
+
+- [Storybook](https://devalok-design.github.io/shilp-sutra/) -- interactive component docs
+- [GitHub](https://github.com/devalok-design/shilp-sutra)
+- [Changelog](https://github.com/devalok-design/shilp-sutra/blob/main/CHANGELOG.md)
+
+## License
+
+MIT -- Copyright 2026 Devalok Design & Strategy Studios

package/dist/composed/content-card.d.ts

@@ -1,8 +1,8 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const contentCardVariants: (props?: ({
-    variant?: "ghost" | "default" | "outline" | null | undefined;
-    padding?: "none" | "default" | "compact" | "spacious" | null | undefined;
+    variant?: "outline" | "ghost" | "default" | null | undefined;
+    padding?: "default" | "none" | "compact" | "spacious" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ContentCardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof contentCardVariants> {
     header?: React.ReactNode;

package/dist/composed/error-boundary.js

@@ -94,7 +94,7 @@ const C = g.forwardRef(
           o && /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-04", children: /* @__PURE__ */ s(
             b,
             {
-              variant: "secondary",
+              variant: "outline",
               size: "md",
               onClick: o,
               children: "Try Again"

package/dist/shell/notification-preferences.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsxs as t, Fragment as B, jsx as e } from "react/jsx-runtime";
-import { useState as c } from "react";
+import { useState as i } from "react";
 import { Button as b } from "../ui/button.js";
-import { Select as d, SelectTrigger as o, SelectValue as m, SelectContent as h, SelectItem as i } from "../ui/select.js";
+import { Select as d, SelectTrigger as o, SelectValue as m, SelectContent as h, SelectItem as c } from "../ui/select.js";
 import { Dialog as D, DialogContent as z, DialogHeader as q, DialogTitle as J, DialogDescription as K } from "../ui/dialog.js";
 import { Switch as k } from "../ui/switch.js";
 import { Card as Q, CardHeader as W, CardTitle as X, CardContent as Y } from "../ui/card.js";
@@ -21,12 +21,12 @@ function te({
   projects: v = [],
   isLoading: L = !1,
   onSave: C,
-  onToggleMute: x,
-  onUpdateTier: u,
+  onToggleMute: u,
+  onUpdateTier: x,
   onDelete: p,
   className: T
 }) {
-  const [E, s] = c(!1), [N, g] = c("global"), [I, w] = c("IN_APP"), [y, A] = c("INFO"), [P, j] = c(!1), [S, O] = c(!1), R = async () => {
+  const [E, s] = i(!1), [N, g] = i("global"), [I, w] = i("IN_APP"), [y, A] = i("INFO"), [P, j] = i(!1), [S, O] = i(!1), R = async () => {
     if (C) {
       O(!0);
       try {
@@ -57,7 +57,7 @@ function te({
           b,
           {
             size: "sm",
-            variant: "secondary",
+            variant: "outline",
             onClick: () => s(!0),
             children: [
               /* @__PURE__ */ e(Z, { className: "mr-ds-02b h-ico-sm w-ico-sm" }),
@@ -85,10 +85,10 @@ function te({
                 d,
                 {
                   value: l.minTier,
-                  onValueChange: (r) => u == null ? void 0 : u(l, r),
+                  onValueChange: (r) => x == null ? void 0 : x(l, r),
                   children: [
                     /* @__PURE__ */ e(o, { className: "h-ds-xs-plus w-[130px] text-ds-sm", children: /* @__PURE__ */ e(m, {}) }),
-                    /* @__PURE__ */ e(h, { children: Object.entries(G).map(([r, V]) => /* @__PURE__ */ e(i, { value: r, children: V }, r)) })
+                    /* @__PURE__ */ e(h, { children: Object.entries(G).map(([r, V]) => /* @__PURE__ */ e(c, { value: r, children: V }, r)) })
                   ]
                 }
               ),
@@ -98,7 +98,7 @@ function te({
                   k,
                   {
                     checked: !l.muted,
-                    onCheckedChange: () => x == null ? void 0 : x(l)
+                    onCheckedChange: () => u == null ? void 0 : u(l)
                   }
                 )
               ] }),
@@ -128,8 +128,8 @@ function te({
           /* @__PURE__ */ t(d, { value: N, onValueChange: g, children: [
             /* @__PURE__ */ e(o, { id: "pref-scope", children: /* @__PURE__ */ e(m, { placeholder: "Select scope" }) }),
             /* @__PURE__ */ t(h, { children: [
-              /* @__PURE__ */ e(i, { value: "global", children: "Global (all projects)" }),
-              v.map((l) => /* @__PURE__ */ e(i, { value: l.id, children: l.title }, l.id))
+              /* @__PURE__ */ e(c, { value: "global", children: "Global (all projects)" }),
+              v.map((l) => /* @__PURE__ */ e(c, { value: l.id, children: l.title }, l.id))
             ] })
           ] })
         ] }),
@@ -138,8 +138,8 @@ function te({
           /* @__PURE__ */ t(d, { value: I, onValueChange: w, children: [
             /* @__PURE__ */ e(o, { id: "pref-channel", children: /* @__PURE__ */ e(m, {}) }),
             /* @__PURE__ */ t(h, { children: [
-              /* @__PURE__ */ e(i, { value: "IN_APP", children: "In-App" }),
-              /* @__PURE__ */ e(i, { value: "GOOGLE_CHAT", children: "Google Chat" })
+              /* @__PURE__ */ e(c, { value: "IN_APP", children: "In-App" }),
+              /* @__PURE__ */ e(c, { value: "GOOGLE_CHAT", children: "Google Chat" })
             ] })
           ] })
         ] }),
@@ -147,7 +147,7 @@ function te({
           /* @__PURE__ */ e("label", { htmlFor: "pref-min-tier", className: "text-ds-sm font-medium text-text-secondary", children: "Minimum Tier" }),
           /* @__PURE__ */ t(d, { value: y, onValueChange: A, children: [
             /* @__PURE__ */ e(o, { id: "pref-min-tier", children: /* @__PURE__ */ e(m, {}) }),
-            /* @__PURE__ */ e(h, { children: Object.entries(G).map(([l, n]) => /* @__PURE__ */ e(i, { value: l, children: n }, l)) })
+            /* @__PURE__ */ e(h, { children: Object.entries(G).map(([l, n]) => /* @__PURE__ */ e(c, { value: l, children: n }, l)) })
           ] })
         ] }),
         /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [

package/dist/tailwind/index.cjs

@@ -1,17 +1,22 @@
 const r = {
+  /**
+   * Dark mode uses the `.dark` class strategy. If your app uses `darkMode: 'media'`,
+   * set it explicitly in your own tailwind.config — your config takes precedence.
+   */
   darkMode: "class",
   theme: {
-    // Breakpoints must be static values — CSS custom properties cannot be used
-    // in @media queries (compiled at build time). These mirror the tokens in
-    // semantic.css (--breakpoint-sm … --breakpoint-2xl).
-    screens: {
-      sm: "640px",
-      md: "768px",
-      lg: "1024px",
-      xl: "1280px",
-      "2xl": "1536px"
-    },
     extend: {
+      // Breakpoints must be static values — CSS custom properties cannot be used
+      // in @media queries (compiled at build time). These mirror the tokens in
+      // semantic.css (--breakpoint-sm … --breakpoint-2xl).
+      // Placed inside `extend` so deployer breakpoints are merged, not replaced.
+      screens: {
+        sm: "640px",
+        md: "768px",
+        lg: "1024px",
+        xl: "1280px",
+        "2xl": "1536px"
+      },
       fontFamily: {
         sans: ["var(--font-sans)", "system-ui", "sans-serif"],
         display: ["var(--font-display)", "system-ui", "sans-serif"],

package/dist/tailwind/preset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/tailwind/preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CAkV3B,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/tailwind/preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CAuV3B,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/tailwind/preset.js

@@ -1,17 +1,22 @@
 const r = {
+  /**
+   * Dark mode uses the `.dark` class strategy. If your app uses `darkMode: 'media'`,
+   * set it explicitly in your own tailwind.config — your config takes precedence.
+   */
   darkMode: "class",
   theme: {
-    // Breakpoints must be static values — CSS custom properties cannot be used
-    // in @media queries (compiled at build time). These mirror the tokens in
-    // semantic.css (--breakpoint-sm … --breakpoint-2xl).
-    screens: {
-      sm: "640px",
-      md: "768px",
-      lg: "1024px",
-      xl: "1280px",
-      "2xl": "1536px"
-    },
     extend: {
+      // Breakpoints must be static values — CSS custom properties cannot be used
+      // in @media queries (compiled at build time). These mirror the tokens in
+      // semantic.css (--breakpoint-sm … --breakpoint-2xl).
+      // Placed inside `extend` so deployer breakpoints are merged, not replaced.
+      screens: {
+        sm: "640px",
+        md: "768px",
+        lg: "1024px",
+        xl: "1280px",
+        "2xl": "1536px"
+      },
       fontFamily: {
         sans: ["var(--font-sans)", "system-ui", "sans-serif"],
         display: ["var(--font-display)", "system-ui", "sans-serif"],

package/dist/tokens/index.css

@@ -1,3 +1,4 @@
 @import './primitives.css';
 @import './semantic.css';
+@import './typography.css';
 @import './typography-semantic.css';

package/dist/tokens/semantic.css

@@ -2,9 +2,9 @@
   color-scheme: light;
 
   /* Font families — override these with next/font CSS variables */
-  --font-sans:    "Google Sans", system-ui, sans-serif;
-  --font-display: "Google Sans", system-ui, sans-serif;
-  --font-body:    "Google Sans", system-ui, sans-serif;
+  --font-sans:    "Inter", system-ui, sans-serif;
+  --font-display: "Inter", system-ui, sans-serif;
+  --font-body:    "Inter", system-ui, sans-serif;
   --font-accent:  Ranade, sans-serif;
   --font-mono:    "SF Mono", "Fira Code", monospace;
 

package/dist/tokens/typography.css

@@ -8,17 +8,17 @@
 
 /* ── Font Faces ─────────────────────────────────────────────────── */
 
-/* Google Sans (primary UI font) — Variable font: supports weights 100-900 */
+/* Inter (primary UI font) — Variable font: supports weights 100-900 */
 @font-face {
-  font-family: 'Google Sans';
-  src: url('../../fonts/GoogleSans-Variable.ttf') format('truetype');
+  font-family: 'Inter';
+  src: url('../../fonts/Inter-Variable.woff2') format('woff2');
   font-weight: 100 900;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
-  font-family: 'Google Sans';
-  src: url('../../fonts/GoogleSans-Italic-Variable.ttf') format('truetype');
+  font-family: 'Inter';
+  src: url('../../fonts/Inter-Italic-Variable.woff2') format('woff2');
   font-weight: 100 900;
   font-style: italic;
   font-display: swap;
@@ -27,13 +27,13 @@
 /* Ranade (accent — brand moments, hero headings, special callouts) */
 @font-face {
   font-family: 'Ranade';
-  src: url('../../fonts/Ranade-Variable.ttf') format('truetype');
+  src: url('../../fonts/Ranade-Variable.woff2') format('woff2');
   font-weight: 100 900;
   font-display: swap;
 }
 @font-face {
   font-family: 'Ranade';
-  src: url('../../fonts/Ranade-VariableItalic.ttf') format('truetype');
+  src: url('../../fonts/Ranade-VariableItalic.woff2') format('woff2');
   font-weight: 100 900;
   font-style: italic;
   font-display: swap;

package/dist/ui/alert.d.ts

@@ -2,14 +2,14 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const alertVariants: (props?: ({
-    variant?: "error" | "warning" | "success" | "info" | "neutral" | null | undefined;
+    color?: "error" | "warning" | "success" | "info" | "neutral" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
  * Props for Alert — an inline message block with a colored icon, optional title, optional body,
  * and an optional dismiss button. Renders with `role="alert"` for screen reader announcements.
  *
- * **Variants:** `info` (default, blue tones) | `success` | `warning` | `error` | `neutral`
- * The matching icon (info circle, checkmark, triangle, alert circle) is auto-selected by variant.
+ * **Colors:** `info` (default, blue tones) | `success` | `warning` | `error` | `neutral`
+ * The matching icon (info circle, checkmark, triangle, alert circle) is auto-selected by color.
  *
  * **Alert vs Banner:** Alert is inline (inside page content). Banner is a full-width notification
  * strip rendered at the top of a page/section (see `<Banner>`).
@@ -18,25 +18,25 @@ declare const alertVariants: (props?: ({
  *
  * @example
  * // Informational tip inside a settings form:
- * <Alert title="Tip" variant="info">
+ * <Alert title="Tip" color="info">
  *   Changes take effect after you save and reload the page.
  * </Alert>
  *
  * @example
  * // Error feedback after a failed API call (dismissible):
- * <Alert variant="error" title="Save failed" onDismiss={() => setError(null)}>
+ * <Alert color="error" title="Save failed" onDismiss={() => setError(null)}>
  *   Your changes could not be saved. Please try again.
  * </Alert>
  *
  * @example
  * // Success confirmation after publishing:
- * <Alert variant="success" title="Published!">
+ * <Alert color="success" title="Published!">
  *   Your post is now live and visible to all subscribers.
  * </Alert>
  *
  * @example
  * // Neutral inline note (no colored intent):
- * <Alert variant="neutral">This field is auto-populated from your profile.</Alert>
+ * <Alert color="neutral">This field is auto-populated from your profile.</Alert>
  * // These are just a few ways — feel free to combine props creatively!
  */
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {

package/dist/ui/alert.js

@@ -4,11 +4,11 @@ import { IconInfoCircle as i, IconAlertCircle as m, IconAlertTriangle as f, Icon
 import * as x from "react";
 import { cva as g } from "class-variance-authority";
 import { cn as p } from "./lib/utils.js";
-const v = g(
+const h = g(
   "relative flex gap-ds-04 rounded-ds-lg border p-ds-05",
   {
     variants: {
-      variant: {
+      color: {
         info: "bg-info-surface border-info-border text-info-text",
         success: "bg-success-surface border-success-border text-success-text",
         warning: "bg-warning-surface border-warning-border text-warning-text",
@@ -16,29 +16,29 @@ const v = g(
         neutral: "bg-layer-02 border-border text-text-primary [&>svg]:text-text-secondary"
       }
     },
-    defaultVariants: { variant: "info" }
+    defaultVariants: { color: "info" }
   }
-), h = {
+), v = {
   info: i,
   success: b,
   warning: f,
   error: m,
   neutral: i
 }, w = x.forwardRef(
-  ({ className: n, variant: e = "info", title: o, onDismiss: s, children: a, ...c }, d) => {
-    const l = h[e ?? "info"];
-    return /* @__PURE__ */ t("div", { ref: d, className: p(v({ variant: e }), n), role: "alert", ...c, children: [
+  ({ className: n, color: e = "info", title: o, onDismiss: s, children: c, ...a }, d) => {
+    const l = v[e ?? "info"];
+    return /* @__PURE__ */ t("div", { ref: d, className: p(h({ color: e }), n), role: "alert", ...a, children: [
       /* @__PURE__ */ r(l, { className: "mt-ds-01 h-ico-md w-ico-md shrink-0", "aria-hidden": "true" }),
       /* @__PURE__ */ t("div", { className: "flex-1 min-w-0", children: [
         o && /* @__PURE__ */ r("p", { className: "text-ds-md font-semibold mb-ds-01", children: o }),
-        /* @__PURE__ */ r("div", { className: "text-ds-md opacity-[0.9]", children: a })
+        /* @__PURE__ */ r("div", { className: "text-ds-md opacity-[0.9]", children: c })
       ] }),
       s && /* @__PURE__ */ r(
         "button",
         {
           type: "button",
           onClick: s,
-          className: "shrink-0 rounded-ds-sm text-icon-secondary transition-colors hover:text-icon-primary hover:bg-field focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus",
+          className: "shrink-0 min-h-6 min-w-6 flex items-center justify-center rounded-ds-sm text-icon-secondary transition-colors hover:text-icon-primary hover:bg-field focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus",
           "aria-label": "Dismiss",
           children: /* @__PURE__ */ r(u, { className: "h-ico-sm w-ico-sm" })
         }
@@ -49,5 +49,5 @@ const v = g(
 w.displayName = "Alert";
 export {
   w as Alert,
-  v as alertVariants
+  h as alertVariants
 };

package/dist/ui/autocomplete.d.ts

@@ -21,7 +21,7 @@ type AutocompleteOption = {
  * <Autocomplete
  *   options={[{ value: 'mumbai', label: 'Mumbai' }, { value: 'delhi', label: 'Delhi' }]}
  *   value={selectedCity}
- *   onChange={(opt) => setSelectedCity(opt)}
+ *   onValueChange={(opt) => setSelectedCity(opt)}
  *   placeholder="Search cities..."
  * />
  *
@@ -29,7 +29,7 @@ type AutocompleteOption = {
  * // Employee name lookup with custom empty text:
  * <Autocomplete
  *   options={employees.map(e => ({ value: e.id, label: e.fullName }))}
- *   onChange={(opt) => setAssignee(opt.value)}
+ *   onValueChange={(opt) => setAssignee(opt.value)}
  *   emptyText="No employees found"
  *   placeholder="Search employees..."
  * />
@@ -38,7 +38,7 @@ type AutocompleteOption = {
 type AutocompleteProps = {
     options: AutocompleteOption[];
     value?: AutocompleteOption | null;
-    onChange?: (option: AutocompleteOption) => void;
+    onValueChange?: (option: AutocompleteOption) => void;
     placeholder?: string;
     emptyText?: string;
     disabled?: boolean;

package/dist/ui/autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../src/ui/autocomplete.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,kBAAkB,EAAE,CAAA;IAC7B,KAAK,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAA;IACjC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAA;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,QAAA,MAAM,YAAY,4FAyKjB,CAAA;AAGD,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../src/ui/autocomplete.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,kBAAkB,EAAE,CAAA;IAC7B,KAAK,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAA;IACjC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAA;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,QAAA,MAAM,YAAY,4FAyKjB,CAAA;AAGD,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,CAAA"}

package/dist/ui/autocomplete.js

@@ -6,7 +6,7 @@ const T = t.forwardRef(
   ({
     options: x,
     value: o,
-    onChange: u,
+    onValueChange: u,
     placeholder: D,
     emptyText: I = "No options",
     disabled: h,