@devalok/shilp-sutra 0.2.1 → 0.3.0

package/dist/ui/badge.d.ts

@@ -2,15 +2,18 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const badgeVariants: (props?: ({
-    variant?: "accent" | "error" | "warning" | "success" | "cyan" | "indigo" | "orange" | "teal" | "solid" | "info" | "neutral" | "brand" | "amber" | "slate" | "emerald" | null | undefined;
+    variant?: "solid" | "outline" | "subtle" | null | undefined;
+    color?: "accent" | "default" | "error" | "warning" | "success" | "cyan" | "indigo" | "orange" | "teal" | "info" | "brand" | "amber" | "slate" | "emerald" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
- * Props for Badge — a compact inline label with 15 semantic + categorical variants, an optional
+ * Props for Badge — a compact inline label with a two-axis variant system, an optional
  * leading dot indicator, and a dismissible close button.
  *
- * **15 variants:** `neutral` (default) | `solid` (brand fill) | `info` | `success` | `error` |
- * `warning` | `brand` | `accent` | `teal` | `amber` | `slate` | `indigo` | `cyan` | `orange` | `emerald`
+ * **Two axes:**
+ * - `variant` controls **visual style**: `"subtle"` (default, surface bg) | `"solid"` (filled) | `"outline"` (border only)
+ * - `color` controls **semantic intent/category**: `"default"` | `"info"` | `"success"` | `"error"` |
+ *   `"warning"` | `"brand"` | `"accent"` | `"teal"` | `"amber"` | `"slate"` | `"indigo"` | `"cyan"` | `"orange"` | `"emerald"`
  *
  * **Comparison with Chip:** Badge is a pure display label (no onClick, no delete handler).
  * Chip (`<Chip>`) is interactive — use Chip when users can click or dismiss the tag.
@@ -20,7 +23,7 @@ declare const badgeVariants: (props?: ({
  *
  * @example
  * // Status badge in a table cell:
- * <Badge variant="success">Active</Badge>
+ * <Badge color="success">Active</Badge>
  *
  * @example
  * // Notification count with dot indicator (solid fill for high contrast):
@@ -28,11 +31,11 @@ declare const badgeVariants: (props?: ({
  *
  * @example
  * // Dismissible category filter (e.g. in a filter bar):
- * <Badge variant="teal" onDismiss={() => removeFilter('teal')}>Teal team</Badge>
+ * <Badge color="teal" onDismiss={() => removeFilter('teal')}>Teal team</Badge>
  *
  * @example
  * // Error badge for a failed job in a pipeline view:
- * <Badge variant="error" size="lg">Build failed</Badge>
+ * <Badge color="error" size="lg">Build failed</Badge>
  * // These are just a few ways — feel free to combine props creatively!
  */
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {

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

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/ui/badge.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,aAAa;;;8EA+ClB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAC3C,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,KAAK,oFAwBV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/ui/badge.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,aAAa;;;;8EAoFlB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAC3C,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,KAAK,oFAwBV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/ui/badge.js

@@ -1,29 +1,33 @@
 "use client";
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { IconX as b } from "@tabler/icons-react";
+import { jsxs as b, jsx as r } from "react/jsx-runtime";
+import { IconX as d } from "@tabler/icons-react";
 import * as g from "react";
-import { cva as l } from "class-variance-authority";
-import { cn as x } from "./lib/utils.js";
-const u = l(
+import { cva as x } from "class-variance-authority";
+import { cn as m } from "./lib/utils.js";
+const u = x(
   "inline-flex items-center gap-ds-02b font-sans font-medium rounded-ds-full border",
   {
     variants: {
       variant: {
-        neutral: "bg-field text-text-secondary border-border",
-        solid: "bg-interactive text-text-on-interactive border-transparent",
-        info: "bg-info-surface text-info-text border-info-border",
-        success: "bg-success-surface text-success-text border-success-border",
-        error: "bg-error-surface text-error-text border-error-border",
-        warning: "bg-warning-surface text-warning-text border-warning-border",
-        brand: "bg-interactive-subtle text-text-brand border-interactive",
-        accent: "bg-accent-subtle text-accent border-accent",
-        teal: "bg-category-teal-surface text-category-teal-text border-category-teal-border",
-        amber: "bg-category-amber-surface text-category-amber-text border-category-amber-border",
-        slate: "bg-category-slate-surface text-category-slate-text border-category-slate-border",
-        indigo: "bg-category-indigo-surface text-category-indigo-text border-category-indigo-border",
-        cyan: "bg-category-cyan-surface text-category-cyan-text border-category-cyan-border",
-        orange: "bg-category-orange-surface text-category-orange-text border-category-orange-border",
-        emerald: "bg-category-emerald-surface text-category-emerald-text border-category-emerald-border"
+        subtle: "",
+        solid: "",
+        outline: ""
+      },
+      color: {
+        default: "",
+        info: "",
+        success: "",
+        error: "",
+        warning: "",
+        brand: "",
+        accent: "",
+        teal: "",
+        amber: "",
+        slate: "",
+        indigo: "",
+        cyan: "",
+        orange: "",
+        emerald: ""
       },
       size: {
         sm: "h-[20px] px-ds-03 text-ds-xs",
@@ -31,14 +35,62 @@ const u = l(
         lg: "h-ds-xs-plus px-ds-04 text-ds-md"
       }
     },
+    compoundVariants: [
+      // subtle (surface bg)
+      { variant: "subtle", color: "default", className: "bg-field text-text-secondary border-border" },
+      { variant: "subtle", color: "info", className: "bg-info-surface text-info-text border-info-border" },
+      { variant: "subtle", color: "success", className: "bg-success-surface text-success-text border-success-border" },
+      { variant: "subtle", color: "error", className: "bg-error-surface text-error-text border-error-border" },
+      { variant: "subtle", color: "warning", className: "bg-warning-surface text-warning-text border-warning-border" },
+      { variant: "subtle", color: "brand", className: "bg-interactive-subtle text-text-brand border-interactive" },
+      { variant: "subtle", color: "accent", className: "bg-accent-subtle text-accent border-accent" },
+      { variant: "subtle", color: "teal", className: "bg-category-teal-surface text-category-teal-text border-category-teal-border" },
+      { variant: "subtle", color: "amber", className: "bg-category-amber-surface text-category-amber-text border-category-amber-border" },
+      { variant: "subtle", color: "slate", className: "bg-category-slate-surface text-category-slate-text border-category-slate-border" },
+      { variant: "subtle", color: "indigo", className: "bg-category-indigo-surface text-category-indigo-text border-category-indigo-border" },
+      { variant: "subtle", color: "cyan", className: "bg-category-cyan-surface text-category-cyan-text border-category-cyan-border" },
+      { variant: "subtle", color: "orange", className: "bg-category-orange-surface text-category-orange-text border-category-orange-border" },
+      { variant: "subtle", color: "emerald", className: "bg-category-emerald-surface text-category-emerald-text border-category-emerald-border" },
+      // solid (filled bg)
+      { variant: "solid", color: "default", className: "bg-interactive text-text-on-color border-transparent" },
+      { variant: "solid", color: "info", className: "bg-info text-text-on-color border-transparent" },
+      { variant: "solid", color: "success", className: "bg-success text-text-on-color border-transparent" },
+      { variant: "solid", color: "error", className: "bg-error text-text-on-color border-transparent" },
+      { variant: "solid", color: "warning", className: "bg-warning text-text-on-color border-transparent" },
+      { variant: "solid", color: "brand", className: "bg-interactive text-text-on-color border-transparent" },
+      { variant: "solid", color: "accent", className: "bg-accent text-text-on-color border-transparent" },
+      { variant: "solid", color: "teal", className: "bg-category-teal text-text-on-color border-transparent" },
+      { variant: "solid", color: "amber", className: "bg-category-amber text-text-on-color border-transparent" },
+      { variant: "solid", color: "slate", className: "bg-category-slate text-text-on-color border-transparent" },
+      { variant: "solid", color: "indigo", className: "bg-category-indigo text-text-on-color border-transparent" },
+      { variant: "solid", color: "cyan", className: "bg-category-cyan text-text-on-color border-transparent" },
+      { variant: "solid", color: "orange", className: "bg-category-orange text-text-on-color border-transparent" },
+      { variant: "solid", color: "emerald", className: "bg-category-emerald text-text-on-color border-transparent" },
+      // outline (border only)
+      { variant: "outline", color: "default", className: "bg-transparent text-text-secondary border-border" },
+      { variant: "outline", color: "info", className: "bg-transparent text-info-text border-info-border" },
+      { variant: "outline", color: "success", className: "bg-transparent text-success-text border-success-border" },
+      { variant: "outline", color: "error", className: "bg-transparent text-error-text border-error-border" },
+      { variant: "outline", color: "warning", className: "bg-transparent text-warning-text border-warning-border" },
+      { variant: "outline", color: "brand", className: "bg-transparent text-text-brand border-interactive" },
+      { variant: "outline", color: "accent", className: "bg-transparent text-accent border-accent" },
+      { variant: "outline", color: "teal", className: "bg-transparent text-category-teal-text border-category-teal-border" },
+      { variant: "outline", color: "amber", className: "bg-transparent text-category-amber-text border-category-amber-border" },
+      { variant: "outline", color: "slate", className: "bg-transparent text-category-slate-text border-category-slate-border" },
+      { variant: "outline", color: "indigo", className: "bg-transparent text-category-indigo-text border-category-indigo-border" },
+      { variant: "outline", color: "cyan", className: "bg-transparent text-category-cyan-text border-category-cyan-border" },
+      { variant: "outline", color: "orange", className: "bg-transparent text-category-orange-text border-category-orange-border" },
+      { variant: "outline", color: "emerald", className: "bg-transparent text-category-emerald-text border-category-emerald-border" }
+    ],
     defaultVariants: {
-      variant: "neutral",
+      variant: "subtle",
+      color: "default",
       size: "md"
     }
   }
-), f = g.forwardRef(
-  ({ className: t, variant: a, size: o, dot: s, onDismiss: r, children: c, ...d }, n) => /* @__PURE__ */ i("span", { ref: n, className: x(u({ variant: a, size: o }), t), ...d, children: [
-    s && /* @__PURE__ */ e(
+), y = g.forwardRef(
+  ({ className: t, variant: a, color: o, size: s, dot: n, onDismiss: e, children: c, ...l }, i) => /* @__PURE__ */ b("span", { ref: i, className: m(u({ variant: a, color: o, size: s }), t), ...l, children: [
+    n && /* @__PURE__ */ r(
       "span",
       {
         className: "h-ds-02b w-ds-02b rounded-ds-full bg-current opacity-[0.7] shrink-0",
@@ -46,20 +98,20 @@ const u = l(
       }
     ),
     c,
-    r && /* @__PURE__ */ e(
+    e && /* @__PURE__ */ r(
       "button",
       {
         type: "button",
-        onClick: r,
-        className: "ml-ds-01 rounded-ds-full text-icon-secondary transition-colors hover:text-icon-primary hover:bg-field focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus",
+        onClick: e,
+        className: "ml-ds-01 min-h-6 min-w-6 flex items-center justify-center rounded-ds-full 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": "Remove",
-        children: /* @__PURE__ */ e(b, { className: "h-ico-sm w-ico-sm" })
+        children: /* @__PURE__ */ r(d, { className: "h-ico-sm w-ico-sm" })
       }
     )
   ] })
 );
-f.displayName = "Badge";
+y.displayName = "Badge";
 export {
-  f as Badge,
+  y as Badge,
   u as badgeVariants
 };

package/dist/ui/banner.d.ts

@@ -2,13 +2,13 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const bannerVariants: (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 Banner — a full-width notification strip with a colored icon, message, optional
  * action slot, and an optional dismiss button. Renders with `role="alert"`.
  *
- * **Variants:** `info` (default) | `success` | `warning` | `error` | `neutral`
+ * **Colors:** `info` (default) | `success` | `warning` | `error` | `neutral`
  *
  * **Banner vs Alert:** Banner spans the full width of its container (e.g., top of a page or section).
  * Alert is an inline block inside page content. Use Banner for system-level announcements.
@@ -18,19 +18,19 @@ declare const bannerVariants: (props?: ({
  *
  * @example
  * // Maintenance warning at top of the dashboard:
- * <Banner variant="warning">
+ * <Banner color="warning">
  *   Scheduled maintenance on Sunday 2am–4am UTC. Expect brief downtime.
  * </Banner>
  *
  * @example
  * // Success banner with a CTA action button:
- * <Banner variant="success" action={<Button variant="ghost" size="sm">View report</Button>}>
+ * <Banner color="success" action={<Button variant="ghost" size="sm">View report</Button>}>
  *   Your export is ready.
  * </Banner>
  *
  * @example
  * // Dismissible info banner for a new feature announcement:
- * <Banner variant="info" onDismiss={() => markAsSeen('feature-x')}>
+ * <Banner color="info" onDismiss={() => markAsSeen('feature-x')}>
  *   New: You can now assign tasks directly from the calendar view.
  * </Banner>
  * // These are just a few ways — feel free to combine props creatively!

package/dist/ui/banner.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { IconInfoCircle as n, IconAlertCircle as f, IconAlertTriangle as m, IconCircleCheck as b, IconX as u } from "@tabler/icons-react";
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { IconInfoCircle as s, IconAlertCircle as f, IconAlertTriangle as m, IconCircleCheck as b, IconX as u } from "@tabler/icons-react";
 import * as x from "react";
 import { cva as g } from "class-variance-authority";
 import { cn as p } from "./lib/utils.js";
@@ -8,7 +8,7 @@ const h = g(
   "flex items-center gap-ds-04 px-ds-06 py-ds-04 text-ds-md font-medium border-b",
   {
     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,27 +16,27 @@ const h = g(
         neutral: "bg-layer-02 border-border text-text-primary [&>svg]:text-text-secondary"
       }
     },
-    defaultVariants: { variant: "info" }
+    defaultVariants: { color: "info" }
   }
-), v = {
-  info: n,
+), N = {
+  info: s,
   success: b,
   warning: m,
   error: f,
-  neutral: n
-}, N = x.forwardRef(
-  ({ className: t, variant: e = "info", action: o, onDismiss: s, children: i, ...a }, c) => {
-    const d = v[e ?? "info"];
-    return /* @__PURE__ */ l("div", { ref: c, className: p(h({ variant: e }), t), role: "alert", ...a, children: [
-      /* @__PURE__ */ r(d, { className: "h-ico-md w-ico-md shrink-0", "aria-hidden": "true" }),
+  neutral: s
+}, v = x.forwardRef(
+  ({ className: t, color: e = "info", action: o, onDismiss: n, children: i, ...c }, a) => {
+    const l = N[e ?? "info"];
+    return /* @__PURE__ */ d("div", { ref: a, className: p(h({ color: e }), t), role: "alert", ...c, children: [
+      /* @__PURE__ */ r(l, { className: "h-ico-md w-ico-md shrink-0", "aria-hidden": "true" }),
       /* @__PURE__ */ r("span", { className: "flex-1", children: i }),
       o && /* @__PURE__ */ r("span", { className: "shrink-0", children: o }),
-      s && /* @__PURE__ */ r(
+      n && /* @__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",
+          onClick: n,
+          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" })
         }
@@ -44,8 +44,8 @@ const h = g(
     ] });
   }
 );
-N.displayName = "Banner";
+v.displayName = "Banner";
 export {
-  N as Banner,
+  v as Banner,
   h as bannerVariants
 };

package/dist/ui/button-group.d.ts

@@ -3,6 +3,7 @@ import { ButtonProps } from './button';
 import * as React from 'react';
 interface ButtonGroupContextValue {
     variant?: ButtonProps['variant'];
+    color?: ButtonProps['color'];
     size?: ButtonProps['size'];
 }
 export declare function useButtonGroup(): ButtonGroupContextValue;
@@ -16,8 +17,8 @@ export declare function useButtonGroup(): ButtonGroupContextValue;
  * **Visual joining:** Adjacent button borders are merged with negative margins and border-radius overrides.
  *
  * @example
- * // Horizontal toolbar action group (secondary variant shared):
- * <ButtonGroup variant="secondary" size="sm">
+ * // Horizontal toolbar action group (outline variant shared):
+ * <ButtonGroup variant="outline" size="sm">
  *   <Button startIcon={<IconBold />}>Bold</Button>
  *   <Button startIcon={<IconItalic />}>Italic</Button>
  *   <Button startIcon={<IconUnderline />}>Underline</Button>
@@ -28,12 +29,12 @@ export declare function useButtonGroup(): ButtonGroupContextValue;
  * <ButtonGroup orientation="vertical" variant="ghost" size="md">
  *   <Button>Profile</Button>
  *   <Button>Settings</Button>
- *   <Button variant="error-ghost">Danger zone</Button>
+ *   <Button variant="ghost" color="error">Danger zone</Button>
  * </ButtonGroup>
  *
  * @example
- * // Split button pattern (primary action + dropdown trigger):
- * <ButtonGroup variant="primary" size="md">
+ * // Split button pattern (solid action + dropdown trigger):
+ * <ButtonGroup variant="solid" size="md">
  *   <Button onClick={handlePublish}>Publish</Button>
  *   <Button size="icon-md" aria-label="More publish options"><IconChevronDown /></Button>
  * </ButtonGroup>
@@ -42,6 +43,8 @@ export declare function useButtonGroup(): ButtonGroupContextValue;
 export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Shared variant applied to all child Buttons (children can override) */
     variant?: ButtonProps['variant'];
+    /** Shared color applied to all child Buttons (children can override) */
+    color?: ButtonProps['color'];
     /** Shared size applied to all child Buttons (children can override) */
     size?: ButtonProps['size'];
     /** Layout direction. Default: 'horizontal' */

package/dist/ui/button-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../src/ui/button-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAE3C,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAChC,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;CAC3B;AAID,wBAAgB,cAAc,4BAE7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,0EAA0E;IAC1E,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAChC,uEAAuE;IACvE,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC1B,8CAA8C;IAC9C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;CACxC;AAED,QAAA,MAAM,WAAW,yFAiChB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../src/ui/button-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAE3C,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAChC,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC5B,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;CAC3B;AAID,wBAAgB,cAAc,4BAE7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,0EAA0E;IAC1E,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAChC,wEAAwE;IACxE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC5B,uEAAuE;IACvE,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC1B,8CAA8C;IAC9C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;CACxC;AAED,QAAA,MAAM,WAAW,yFAiChB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/ui/button-group.js

@@ -1,22 +1,22 @@
 "use client";
 import { jsx as r } from "react/jsx-runtime";
 import * as o from "react";
-import { cn as f } from "./lib/utils.js";
-const e = o.createContext({});
-function x() {
-  return o.useContext(e);
+import { cn as a } from "./lib/utils.js";
+const l = o.createContext({});
+function h() {
+  return o.useContext(l);
 }
-const a = o.forwardRef(
-  ({ className: l, variant: t, size: n, orientation: u = "horizontal", children: i, ...d }, c) => {
-    const s = o.useMemo(() => ({ variant: t, size: n }), [t, n]);
-    return /* @__PURE__ */ r(e.Provider, { value: s, children: /* @__PURE__ */ r(
+const p = o.forwardRef(
+  ({ className: u, variant: t, color: n, size: e, orientation: i = "horizontal", children: d, ...c }, s) => {
+    const f = o.useMemo(() => ({ variant: t, color: n, size: e }), [t, n, e]);
+    return /* @__PURE__ */ r(l.Provider, { value: f, children: /* @__PURE__ */ r(
       "div",
       {
-        ref: c,
+        ref: s,
         role: "group",
-        className: f(
+        className: a(
           "inline-flex",
-          u === "horizontal" ? [
+          i === "horizontal" ? [
             "flex-row",
             "[&>*:not(:first-child)]:rounded-l-none",
             "[&>*:not(:last-child)]:rounded-r-none",
@@ -27,16 +27,16 @@ const a = o.forwardRef(
             "[&>*:not(:last-child)]:rounded-b-none",
             "[&>*:not(:first-child)]:-mt-px"
           ],
-          l
+          u
         ),
-        ...d,
-        children: i
+        ...c,
+        children: d
       }
     ) });
   }
 );
-a.displayName = "ButtonGroup";
+p.displayName = "ButtonGroup";
 export {
-  a as ButtonGroup,
-  x as useButtonGroup
+  p as ButtonGroup,
+  h as useButtonGroup
 };

package/dist/ui/button.d.ts

@@ -2,16 +2,18 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 export declare const buttonVariants: (props?: ({
-    variant?: "link" | "primary" | "secondary" | "ghost" | "error" | "error-ghost" | null | undefined;
+    variant?: "link" | "solid" | "outline" | "ghost" | null | undefined;
+    color?: "default" | "error" | null | undefined;
     size?: "sm" | "md" | "lg" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
- * Props for Button — the primary action component with 6 variants, 6 size options, icon slots,
- * and a built-in loading state that disables interaction and shows a spinner.
+ * Props for Button — the primary action component with a two-axis variant system,
+ * 6 size options, icon slots, and a built-in loading state.
  *
- * **Variants:** `primary` (pink brand glow, default) | `secondary` (outlined interactive) |
- * `ghost` (transparent, for toolbars) | `error` (destructive fill) | `error-ghost` (outlined error) |
- * `link` (underline, inline text actions)
+ * **Two axes:**
+ * - `variant` controls **visual style**: `"solid"` (default, filled brand) | `"outline"` (bordered) |
+ *   `"ghost"` (transparent, for toolbars) | `"link"` (underline, inline text actions)
+ * - `color` controls **semantic intent**: `"default"` (brand interactive) | `"error"` (destructive)
  *
  * **Sizes:** `sm` | `md` (default) | `lg` for text buttons;
  * `icon-sm` | `icon-md` | `icon-lg` for square icon-only buttons (prefer `IconButton` for icon-only).
@@ -20,12 +22,12 @@ export declare const buttonVariants: (props?: ({
  * Use `loadingPosition` to control where the spinner appears.
  *
  * @example
- * // Primary save action (default variant):
+ * // Primary save action (default variant + color):
  * <Button onClick={handleSave}>Save changes</Button>
  *
  * @example
  * // Destructive delete with confirmation icon and loading state:
- * <Button variant="error" startIcon={<IconTrash />} loading={isDeleting}>
+ * <Button variant="solid" color="error" startIcon={<IconTrash />} loading={isDeleting}>
  *   Delete project
  * </Button>
  *

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,eAAO,MAAM,cAAc;;;8EA+B1B,CAAA;AAsBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yFAAyF;IACzF,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IAC5C,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,QAAA,MAAM,MAAM,uFA4GX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,eAAO,MAAM,cAAc;;;;8EA2C1B,CAAA;AAsBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yFAAyF;IACzF,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IAC5C,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,QAAA,MAAM,MAAM,uFA8GX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,CAAA"}