@devalok/shilp-sutra 0.2.1 → 0.3.1

package/dist/ui/button.js

@@ -1,23 +1,25 @@
 "use client";
-import { jsx as r, jsxs as g } from "react/jsx-runtime";
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
 import { cva as B } from "class-variance-authority";
-import { Root as C, Slottable as R } from "../primitives/react-slot.js";
-import * as V from "react";
-import { useButtonGroup as E } from "./button-group.js";
-import { cn as t } from "./lib/utils.js";
-import { Spinner as G } from "./spinner.js";
-const p = B(
+import { Root as R, Slottable as E } from "../primitives/react-slot.js";
+import * as G from "react";
+import { useButtonGroup as M } from "./button-group.js";
+import { cn as o } from "./lib/utils.js";
+import { Spinner as q } from "./spinner.js";
+const x = B(
   "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] duration-fast-01 ease-productive-standard 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: {
-        primary: "bg-interactive text-text-on-color hover:bg-interactive-hover active:bg-interactive-active shadow-01 hover:shadow-brand",
-        secondary: "bg-transparent text-interactive border-border-interactive hover:bg-interactive-subtle active:bg-layer-active",
-        ghost: "bg-transparent text-text-secondary hover:bg-layer-02 hover:text-text-primary active:bg-layer-active",
-        error: "bg-error text-text-on-color hover:bg-error-hover active:bg-error-hover shadow-01",
-        "error-ghost": "bg-transparent text-error border border-border-error hover:bg-error-surface active:bg-error-surface",
+        solid: "",
+        outline: "",
+        ghost: "",
         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",
@@ -27,80 +29,96 @@ const p = B(
         "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" },
+      // 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: "primary",
+      variant: "solid",
+      color: "default",
       size: "md"
     }
   }
-), M = {
+), 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-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"
-}, q = {
+}, D = {
   sm: "sm",
   md: "sm",
   lg: "md",
   "icon-sm": "sm",
   "icon-md": "sm",
   "icon-lg": "md"
-}, A = V.forwardRef(
+}, F = G.forwardRef(
   ({
     className: c,
-    variant: x,
-    size: w,
-    asChild: y = !1,
-    startIcon: a,
-    endIcon: d,
+    variant: w,
+    color: y,
+    size: N,
+    asChild: z = !1,
+    startIcon: d,
+    endIcon: l,
     loading: e = !1,
-    loadingPosition: o = "start",
+    loadingPosition: t = "start",
     fullWidth: m = !1,
-    disabled: l,
+    disabled: v,
     children: i,
-    ...v
-  }, u) => {
-    const b = E(), f = x ?? b.variant, s = w ?? b.size ?? "md", h = M[s], z = q[s], n = e ? /* @__PURE__ */ r(G, { size: z }) : null;
-    if (y) {
-      const k = {
-        className: t(
-          p({ variant: f, size: s, className: c }),
+    ...u
+  }, f) => {
+    const n = M(), b = w ?? n.variant, h = y ?? n.color, s = N ?? n.size ?? "md", g = A[s], S = D[s], a = e ? /* @__PURE__ */ r(q, { size: S }) : null;
+    if (z) {
+      const V = {
+        className: o(
+          x({ variant: b, color: h, size: s, className: c }),
           m && "w-full"
         ),
-        ref: u,
-        disabled: l || e,
+        ref: f,
+        disabled: v || e,
         "aria-busy": e || void 0,
-        ...v
+        ...u
       };
-      return /* @__PURE__ */ r(C, { ...k, children: /* @__PURE__ */ r(R, { children: i }) });
+      return /* @__PURE__ */ r(R, { ...V, children: /* @__PURE__ */ r(E, { children: i }) });
     }
-    const S = () => e && o === "start" ? n : a ? /* @__PURE__ */ r("span", { className: t("inline-flex shrink-0 items-center justify-center", h), children: a }) : null, N = () => e && o === "end" ? n : d ? /* @__PURE__ */ r("span", { className: t("inline-flex shrink-0 items-center justify-center", h), children: d }) : null, j = () => e && o === "center" ? /* @__PURE__ */ g("span", { className: "relative inline-flex items-center justify-center", children: [
+    const j = () => e && t === "start" ? a : d ? /* @__PURE__ */ r("span", { className: o("inline-flex shrink-0 items-center justify-center", g), children: d }) : null, k = () => e && t === "end" ? a : l ? /* @__PURE__ */ r("span", { className: o("inline-flex shrink-0 items-center justify-center", g), children: l }) : null, C = () => e && t === "center" ? /* @__PURE__ */ p("span", { className: "relative inline-flex items-center justify-center", children: [
       /* @__PURE__ */ r("span", { className: "invisible", children: i }),
-      /* @__PURE__ */ r("span", { className: "absolute inset-0 flex items-center justify-center", children: n })
+      /* @__PURE__ */ r("span", { className: "absolute inset-0 flex items-center justify-center", children: a })
     ] }) : i;
-    return /* @__PURE__ */ g(
+    return /* @__PURE__ */ p(
       "button",
       {
-        className: t(
-          p({ variant: f, size: s, className: c }),
+        className: o(
+          x({ variant: b, color: h, size: s, className: c }),
           m && "w-full"
         ),
-        ref: u,
-        disabled: l || e,
+        ref: f,
+        disabled: v || e,
         "aria-busy": e || void 0,
-        ...v,
+        ...u,
         children: [
-          S(),
           j(),
-          N()
+          C(),
+          k()
         ]
       }
     );
   }
 );
-A.displayName = "Button";
+F.displayName = "Button";
 export {
-  A as Button,
-  p as buttonVariants
+  F as Button,
+  x as buttonVariants
 };

package/dist/ui/chip.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 declare const chipVariants: (props?: ({
     variant?: "filled" | "outlined" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
-    color?: "primary" | "error" | "default" | "warning" | "success" | "cyan" | "indigo" | "orange" | "teal" | "info" | "amber" | "slate" | "emerald" | null | undefined;
+    color?: "default" | "error" | "warning" | "success" | "cyan" | "indigo" | "orange" | "teal" | "info" | "amber" | "slate" | "emerald" | "primary" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type ChipColor = 'default' | 'primary' | 'success' | 'error' | 'warning' | 'info' | 'teal' | 'amber' | 'slate' | 'indigo' | 'cyan' | 'orange' | 'emerald';
 /**
@@ -15,8 +15,8 @@ type ChipColor = 'default' | 'primary' | 'success' | 'error' | 'warning' | 'info
  * - `color` controls **intent/category**: `"default"` | `"primary"` | `"success"` | `"error"` |
  *   `"warning"` | `"info"` | `"teal"` | `"amber"` | `"slate"` | `"indigo"` | `"cyan"` | `"orange"` | `"emerald"`
  *
- * **Comparison with Badge:** Badge uses `variant=` for intent (e.g. `variant="success"`).
- * Chip uses `color=` for intent. They are different — don't mix them up.
+ * **Comparison with Badge:** Badge now uses `color=` for intent (e.g. `color="success"`), same as Chip.
+ * Badge also has `variant=` for visual style (`subtle` | `solid` | `outline`).
  *
  * **Important:** Use the `label` prop, NOT `children`. Chip does not render children.
  *
@@ -38,7 +38,7 @@ type ChipColor = 'default' | 'primary' | 'success' | 'error' | 'warning' | 'info
  * // <Chip>High Priority</Chip>
  *
  * // Badge comparison:
- * // <Badge variant="success">Done</Badge>  ← Badge uses variant= for intent
+ * // <Badge color="success">Done</Badge>  ← Badge uses color= for intent
  * // <Chip label="Done" color="success" />  ← Chip uses color= for intent
  */
 type ChipProps = Omit<VariantProps<typeof chipVariants>, 'color'> & {
@@ -53,7 +53,7 @@ type ChipProps = Omit<VariantProps<typeof chipVariants>, 'color'> & {
 declare const Chip: React.ForwardRefExoticComponent<Omit<VariantProps<(props?: ({
     variant?: "filled" | "outlined" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
-    color?: "primary" | "error" | "default" | "warning" | "success" | "cyan" | "indigo" | "orange" | "teal" | "info" | "amber" | "slate" | "emerald" | null | undefined;
+    color?: "default" | "error" | "warning" | "success" | "cyan" | "indigo" | "orange" | "teal" | "info" | "amber" | "slate" | "emerald" | "primary" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string>, "color"> & {
     label: string;
     color?: ChipColor;

package/dist/ui/chip.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { jsxs as u, jsx as r } from "react/jsx-runtime";
 import * as v from "react";
 import { IconX as p } from "@tabler/icons-react";
 import { cva as N } from "class-variance-authority";
@@ -67,29 +67,29 @@ const w = N(
   }
 ), C = v.forwardRef(
   ({ label: t, variant: l, size: i, color: n, icon: o, onClick: s, onDelete: c, disabled: a, className: d, ...g }, b) => {
-    const r = !!s, m = r ? "button" : "span", x = r && !a ? "cursor-pointer hover:bg-field-hover" : "", y = a ? "opacity-action-disabled cursor-not-allowed" : "";
+    const e = !!s, m = e ? "button" : "span", x = e && !a ? "cursor-pointer hover:bg-field-hover" : "", y = a ? "opacity-action-disabled cursor-not-allowed" : "";
     return /* @__PURE__ */ u(
       m,
       {
         ref: b,
         className: h(w({ variant: l, size: i, color: n }), x, y, d),
-        onClick: r ? s : void 0,
-        disabled: r ? a : void 0,
-        type: r ? "button" : void 0,
+        onClick: e ? s : void 0,
+        disabled: e ? a : void 0,
+        type: e ? "button" : void 0,
         ...g,
         children: [
-          o && /* @__PURE__ */ e("span", { className: "flex-shrink-0 [&>svg]:w-ico-sm [&>svg]:h-ico-sm", children: o }),
-          /* @__PURE__ */ e("span", { children: t }),
-          c && /* @__PURE__ */ e(
+          o && /* @__PURE__ */ r("span", { className: "flex-shrink-0 [&>svg]:w-ico-sm [&>svg]:h-ico-sm", children: o }),
+          /* @__PURE__ */ r("span", { children: t }),
+          c && /* @__PURE__ */ r(
             "button",
             {
               type: "button",
               "aria-label": `Remove ${t}`,
-              className: "flex-shrink-0 rounded-ds-full p-ds-01 hover:bg-layer-03 transition-colors duration-fast-01 [&>svg]:w-ico-sm [&>svg]:h-ico-sm",
+              className: "flex-shrink-0 min-h-6 min-w-6 flex items-center justify-center rounded-ds-full p-ds-01 hover:bg-layer-03 transition-colors duration-fast-01 [&>svg]:w-ico-sm [&>svg]:h-ico-sm",
               onClick: (f) => {
                 f.stopPropagation(), c();
               },
-              children: /* @__PURE__ */ e(p, { className: "h-ico-sm w-ico-sm" })
+              children: /* @__PURE__ */ r(p, { className: "h-ico-sm w-ico-sm" })
             }
           )
         ]

package/dist/ui/combobox.d.ts

@@ -18,7 +18,7 @@ export interface ComboboxOption {
  * **Single vs multi:** `multiple={false}` (default) — `value` is a `string`. When `multiple={true}`,
  * `value` is `string[]` and selected items appear as dismissible pills in the trigger.
  *
- * **`onChange` signature:** always `(value: string | string[]) => void`. Check `multiple` to determine
+ * **`onValueChange` signature:** always `(value: string | string[]) => void`. Check `multiple` to determine
  * which type you'll receive.
  *
  * **Custom rendering:** Use `renderOption` to return custom JSX per option (e.g. avatars, badges).
@@ -28,7 +28,7 @@ export interface ComboboxOption {
  * <Combobox
  *   options={[{ value: 'in', label: 'India' }, { value: 'us', label: 'United States' }]}
  *   value={country}
- *   onChange={(v) => setCountry(v as string)}
+ *   onValueChange={(v) => setCountry(v as string)}
  *   placeholder="Select country"
  * />
  *
@@ -38,7 +38,7 @@ export interface ComboboxOption {
  *   multiple
  *   options={tagOptions}
  *   value={selectedTags}
- *   onChange={(v) => setSelectedTags(v as string[])}
+ *   onValueChange={(v) => setSelectedTags(v as string[])}
  *   placeholder="Select tags..."
  * />
  *
@@ -47,7 +47,7 @@ export interface ComboboxOption {
  * <Combobox
  *   options={users.map(u => ({ value: u.id, label: u.name }))}
  *   value={assigneeId}
- *   onChange={(v) => setAssigneeId(v as string)}
+ *   onValueChange={(v) => setAssigneeId(v as string)}
  *   renderOption={(option, selected) => (
  *     <span className="flex items-center gap-ds-03">
  *       <Avatar size="xs"><AvatarFallback>{option.label[0]}</AvatarFallback></Avatar>
@@ -57,16 +57,15 @@ export interface ComboboxOption {
  * />
  * // These are just a few ways — feel free to combine props creatively!
  */
-export interface ComboboxProps {
+export interface ComboboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     options: ComboboxOption[];
     value?: string | string[];
-    onChange: (value: string | string[]) => void;
+    onValueChange: (value: string | string[]) => void;
     placeholder?: string;
     searchPlaceholder?: string;
     emptyMessage?: string;
     multiple?: boolean;
     disabled?: boolean;
-    className?: string;
     triggerClassName?: string;
     /** Max visible items in the dropdown before scroll (default 6) */
     maxVisible?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/ui/combobox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAA;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;CAC9E;AAQD,QAAA,MAAM,QAAQ,yFA2Xb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/ui/combobox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC3F,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACzB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAA;IACjD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;CAC9E;AAQD,QAAA,MAAM,QAAQ,yFA4Xb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/ui/combobox.js

@@ -1,14 +1,14 @@
 "use client";
-import { jsx as r, jsxs as d, Fragment as F } from "react/jsx-runtime";
+import { jsx as r, jsxs as d, Fragment as B } from "react/jsx-runtime";
 import * as a from "react";
-import { Root as V, Trigger as B, Portal as G, Content as U } from "../primitives/react-popover.js";
-import { IconChevronDown as q, IconSearch as J, IconCheck as Q, IconX as W } from "@tabler/icons-react";
+import { Root as G, Trigger as U, Portal as q, Content as J } from "../primitives/react-popover.js";
+import { IconChevronDown as Q, IconSearch as W, IconCheck as Y, IconX as Z } from "@tabler/icons-react";
 import { cn as x } from "./lib/utils.js";
-const P = 2, Y = 36, Z = a.forwardRef(
+const P = 2, V = 36, ee = a.forwardRef(
   ({
     options: u,
     value: f,
-    onChange: m,
+    onValueChange: m,
     placeholder: S = "Select...",
     searchPlaceholder: A = "Search...",
     emptyMessage: L = "No results found",
@@ -17,14 +17,15 @@ const P = 2, Y = 36, Z = a.forwardRef(
     className: T,
     triggerClassName: $,
     maxVisible: j = 6,
-    renderOption: E
-  }, H) => {
+    renderOption: E,
+    ...H
+  }, M) => {
     const [h, w] = a.useState(!1), [v, y] = a.useState(""), [i, c] = a.useState(-1), k = a.useRef(null), N = a.useRef(null), R = a.useId(), I = a.useId(), n = a.useMemo(() => f == null ? [] : Array.isArray(f) ? f : [f], [f]), o = a.useMemo(
       () => v ? u.filter(
         (e) => e.label.toLowerCase().includes(v.toLowerCase())
       ) : u,
       [u, v]
-    ), M = a.useCallback(
+    ), O = a.useCallback(
       (e) => n.includes(e),
       [n]
     ), g = a.useCallback(
@@ -36,14 +37,14 @@ const P = 2, Y = 36, Z = a.forwardRef(
           m(e), w(!1);
       },
       [b, n, m]
-    ), O = a.useCallback(
+    ), _ = a.useCallback(
       (e, t) => {
         e.stopPropagation(), e.preventDefault();
         const s = n.filter((l) => l !== t);
         m(s);
       },
       [n, m]
-    ), _ = a.useCallback(
+    ), z = a.useCallback(
       (e) => {
         p || (w(e), e || (y(""), c(-1)));
       },
@@ -70,7 +71,7 @@ const P = 2, Y = 36, Z = a.forwardRef(
         return e;
       },
       [o]
-    ), z = a.useCallback(
+    ), K = a.useCallback(
       (e) => {
         switch (e.key) {
           case "ArrowDown": {
@@ -121,11 +122,11 @@ const P = 2, Y = 36, Z = a.forwardRef(
         t && ((e = t.scrollIntoView) == null || e.call(t, { block: "nearest" }));
       }
     }, [i]);
-    const K = a.useCallback(() => {
+    const X = a.useCallback(() => {
       if (n.length === 0) return null;
       const e = u.find((t) => t.value === n[0]);
       return (e == null ? void 0 : e.label) ?? null;
-    }, [n, u]), X = () => {
+    }, [n, u]), F = () => {
       if (b && n.length > 0) {
         const e = n.slice(0, P), t = n.length - P;
         return /* @__PURE__ */ d("span", { className: "flex flex-1 flex-wrap items-center gap-ds-02 overflow-hidden", children: [
@@ -142,10 +143,10 @@ const P = 2, Y = 36, Z = a.forwardRef(
                     {
                       type: "button",
                       className: "inline-flex items-center justify-center rounded-ds-full outline-none hover:opacity-75",
-                      onClick: (D) => O(D, s),
+                      onClick: (D) => _(D, s),
                       "aria-label": `Remove ${l.label}`,
                       tabIndex: -1,
-                      children: /* @__PURE__ */ r(W, { className: "h-3 w-3", "aria-hidden": "true" })
+                      children: /* @__PURE__ */ r(Z, { className: "h-3 w-3", "aria-hidden": "true" })
                     }
                   )
                 ]
@@ -161,17 +162,17 @@ const P = 2, Y = 36, Z = a.forwardRef(
         ] });
       }
       if (!b && n.length === 1) {
-        const e = K();
+        const e = X();
         if (e)
           return /* @__PURE__ */ r("span", { className: "flex-1 truncate text-left", children: e });
       }
       return /* @__PURE__ */ r("span", { className: "flex-1 truncate text-left text-text-placeholder", children: S });
     };
-    return /* @__PURE__ */ r(V, { open: h, onOpenChange: _, children: /* @__PURE__ */ d("div", { className: x("relative", T), children: [
-      /* @__PURE__ */ r(B, { asChild: !0, disabled: p, children: /* @__PURE__ */ d(
+    return /* @__PURE__ */ r(G, { open: h, onOpenChange: z, children: /* @__PURE__ */ d("div", { className: x("relative", T), ...H, children: [
+      /* @__PURE__ */ r(U, { asChild: !0, disabled: p, children: /* @__PURE__ */ d(
         "button",
         {
-          ref: H,
+          ref: M,
           type: "button",
           role: "combobox",
           "aria-expanded": h,
@@ -187,13 +188,13 @@ const P = 2, Y = 36, Z = a.forwardRef(
             $
           ),
           children: [
-            X(),
-            /* @__PURE__ */ r(q, { className: x("ml-ds-02 h-ico-sm w-ico-sm shrink-0 opacity-[0.5] transition-transform duration-fast-01", h && "rotate-180"), "aria-hidden": "true" })
+            F(),
+            /* @__PURE__ */ r(Q, { className: x("ml-ds-02 h-ico-sm w-ico-sm shrink-0 opacity-[0.5] transition-transform duration-fast-01", h && "rotate-180"), "aria-hidden": "true" })
           ]
         }
       ) }),
-      /* @__PURE__ */ r(G, { children: /* @__PURE__ */ d(
-        U,
+      /* @__PURE__ */ r(q, { children: /* @__PURE__ */ d(
+        J,
         {
           className: x(
             "z-dropdown w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-ds-lg border border-border-subtle bg-layer-01 shadow-02",
@@ -207,7 +208,7 @@ const P = 2, Y = 36, Z = a.forwardRef(
           },
           children: [
             /* @__PURE__ */ d("div", { className: "flex items-center gap-ds-02 border-b border-border-subtle px-ds-04", children: [
-              /* @__PURE__ */ r(J, { className: "h-ico-sm w-ico-sm shrink-0 text-text-tertiary", "aria-hidden": "true" }),
+              /* @__PURE__ */ r(W, { className: "h-ico-sm w-ico-sm shrink-0 text-text-tertiary", "aria-hidden": "true" }),
               /* @__PURE__ */ r(
                 "input",
                 {
@@ -219,7 +220,7 @@ const P = 2, Y = 36, Z = a.forwardRef(
                   onChange: (e) => {
                     y(e.target.value), c(-1);
                   },
-                  onKeyDown: z,
+                  onKeyDown: K,
                   "aria-autocomplete": "list",
                   "aria-controls": I,
                   "aria-activedescendant": i >= 0 ? `${R}-option-${i}` : void 0,
@@ -235,9 +236,9 @@ const P = 2, Y = 36, Z = a.forwardRef(
                 role: "listbox",
                 "aria-multiselectable": b || void 0,
                 className: "overflow-auto p-ds-02",
-                style: { maxHeight: `${j * Y}px` },
+                style: { maxHeight: `${j * V}px` },
                 children: o.map((e, t) => {
-                  const s = M(e.value);
+                  const s = O(e.value);
                   return /* @__PURE__ */ d(
                     "li",
                     {
@@ -263,11 +264,11 @@ const P = 2, Y = 36, Z = a.forwardRef(
                       },
                       children: [
                         e.icon && /* @__PURE__ */ r("span", { className: "flex h-ico-sm w-ico-sm items-center justify-center shrink-0", children: e.icon }),
-                        /* @__PURE__ */ r("span", { className: "flex flex-1 flex-col", children: E ? E(e, s) : /* @__PURE__ */ d(F, { children: [
+                        /* @__PURE__ */ r("span", { className: "flex flex-1 flex-col", children: E ? E(e, s) : /* @__PURE__ */ d(B, { children: [
                           /* @__PURE__ */ r("span", { children: e.label }),
                           e.description && /* @__PURE__ */ r("span", { className: "text-ds-sm text-text-secondary", children: e.description })
                         ] }) }),
-                        s && /* @__PURE__ */ r(Q, { className: "h-ico-sm w-ico-sm shrink-0", "aria-hidden": "true" })
+                        s && /* @__PURE__ */ r(Y, { className: "h-ico-sm w-ico-sm shrink-0", "aria-hidden": "true" })
                       ]
                     },
                     e.value
@@ -281,7 +282,7 @@ const P = 2, Y = 36, Z = a.forwardRef(
     ] }) });
   }
 );
-Z.displayName = "Combobox";
+ee.displayName = "Combobox";
 export {
-  Z as Combobox
+  ee as Combobox
 };

package/dist/ui/dialog.d.ts

@@ -22,7 +22,7 @@ import * as DialogPrimitive from '../primitives/react-dialog';
  * // Confirmation dialog:
  * <Dialog>
  *   <DialogTrigger asChild>
- *     <Button variant="error">Delete project</Button>
+ *     <Button variant="solid" color="error">Delete project</Button>
  *   </DialogTrigger>
  *   <DialogContent>
  *     <DialogHeader>
@@ -32,8 +32,8 @@ import * as DialogPrimitive from '../primitives/react-dialog';
  *       </DialogDescription>
  *     </DialogHeader>
  *     <DialogFooter>
- *       <DialogClose asChild><Button variant="secondary">Cancel</Button></DialogClose>
- *       <Button variant="error" onClick={handleDelete}>Delete</Button>
+ *       <DialogClose asChild><Button variant="outline">Cancel</Button></DialogClose>
+ *       <Button variant="solid" color="error" onClick={handleDelete}>Delete</Button>
  *     </DialogFooter>
  *   </DialogContent>
  * </Dialog>
@@ -61,14 +61,8 @@ declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitiv
  * (e.g. CommandPalette in shared/).
  */
 declare const DialogContentRaw: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DialogHeader: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-declare const DialogFooter: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const DialogHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogContentRaw, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAK3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,QAAA,MAAM,MAAM,uCAAuB,CAAA;AAEnC,QAAA,MAAM,aAAa,8GAA0B,CAAA;AAE7C,QAAA,MAAM,YAAY,6CAAyB,CAAA;AAE3C,QAAA,MAAM,WAAW,4GAAwB,CAAA;AAEzC,QAAA,MAAM,aAAa,8JAYjB,CAAA;AAGF,QAAA,MAAM,aAAa,8JAqBjB,CAAA;AAGF;;;;;GAKG;AACH,QAAA,MAAM,gBAAgB,8JASpB,CAAA;AAGF,QAAA,MAAM,YAAY;8BAGf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAA;AAGD,QAAA,MAAM,YAAY;8BAGf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAA;AAGD,QAAA,MAAM,WAAW,oKAYf,CAAA;AAGF,QAAA,MAAM,iBAAiB,8KASrB,CAAA;AAGF,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAA"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAK3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,QAAA,MAAM,MAAM,uCAAuB,CAAA;AAEnC,QAAA,MAAM,aAAa,8GAA0B,CAAA;AAE7C,QAAA,MAAM,YAAY,6CAAyB,CAAA;AAE3C,QAAA,MAAM,WAAW,4GAAwB,CAAA;AAEzC,QAAA,MAAM,aAAa,8JAYjB,CAAA;AAGF,QAAA,MAAM,aAAa,8JAqBjB,CAAA;AAGF;;;;;GAKG;AACH,QAAA,MAAM,gBAAgB,8JASpB,CAAA;AAGF,QAAA,MAAM,YAAY,6GAWjB,CAAA;AAGD,QAAA,MAAM,YAAY,6GAWjB,CAAA;AAGD,QAAA,MAAM,WAAW,oKAYf,CAAA;AAGF,QAAA,MAAM,iBAAiB,8KASrB,CAAA;AAGF,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAA"}