@devalok/shilp-sutra 0.28.0 → 0.30.0

package/dist/ui/badge-indicator.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsxs as d, jsx as n } from "react/jsx-runtime";
+import { cn as r } from "./lib/utils.js";
+import { springs as x } from "./lib/motion.js";
+import { u as b, A as u, m as h } from "../_chunks/framer.js";
+const y = {
+  "top-right": "-top-1 -right-1",
+  "top-left": "-top-1 -left-1",
+  "bottom-right": "-bottom-1 -right-1",
+  "bottom-left": "-bottom-1 -left-1"
+}, w = {
+  error: "bg-error-9 text-error-fg",
+  success: "bg-success-9 text-success-fg",
+  warning: "bg-warning-9 text-warning-fg",
+  accent: "bg-accent-9 text-accent-fg",
+  info: "bg-info-9 text-info-fg"
+};
+function S({
+  count: t,
+  max: o = 99,
+  dot: e = !1,
+  color: s = "error",
+  invisible: a = !1,
+  showZero: c = !1,
+  placement: f = "top-right",
+  className: l,
+  children: p
+}) {
+  const i = b(), g = !a && (e || t !== void 0 && (t > 0 || c)), m = t !== void 0 && t > o ? `${o}+` : t;
+  return /* @__PURE__ */ d("span", { className: r("relative inline-flex", l), children: [
+    p,
+    /* @__PURE__ */ n(u, { children: g && /* @__PURE__ */ n(
+      h.span,
+      {
+        initial: i ? { opacity: 0 } : { scale: 0, opacity: 0 },
+        animate: i ? { opacity: 1 } : { scale: 1, opacity: 1 },
+        exit: i ? { opacity: 0 } : { scale: 0, opacity: 0 },
+        transition: x.bouncy,
+        className: r(
+          "absolute flex items-center justify-center rounded-full font-sans font-semibold ring-2 ring-surface-raised",
+          w[s],
+          y[f],
+          e ? "h-2.5 w-2.5" : "min-w-[18px] h-[18px] px-1 text-[11px] leading-none"
+        ),
+        children: !e && m
+      },
+      "indicator"
+    ) })
+  ] });
+}
+S.displayName = "BadgeIndicator";
+export {
+  S as BadgeIndicator
+};

package/dist/ui/badge.d.ts

@@ -1,47 +1,50 @@
 "use client";
 import { VariantProps } from 'class-variance-authority';
+import { BadgeIndicator } from './badge-indicator';
+import { BadgeGroup } from './badge-group';
 import * as React from 'react';
 declare const badgeVariants: (props?: ({
-    variant?: "outline" | "solid" | "subtle" | "secondary" | "destructive" | null | undefined;
-    color?: "accent" | "default" | "error" | "cyan" | "indigo" | "orange" | "teal" | "info" | "success" | "warning" | "brand" | "amber" | "slate" | "emerald" | null | undefined;
+    variant?: "outline" | "solid" | "subtle" | "soft" | null | undefined;
+    color?: "default" | "accent" | "success" | "error" | "custom" | "cyan" | "indigo" | "orange" | "teal" | "info" | "warning" | "neutral" | "amber" | "slate" | "emerald" | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
- * Props for Badge — a compact inline label with a two-axis variant system, an optional
- * leading dot indicator, and a dismissible close button.
+ * Badge — a compact inline label with a two-axis variant system.
  *
  * **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"`
+ * - `variant` controls **visual style**: `"subtle"` | `"solid"` | `"outline"` | `"soft"`
+ * - `color` controls **semantic intent/category**: 16 built-in colors + `"custom"` (CSS variable)
  *
- * **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.
- *
- * **Dismissible:** Provide `onDismiss` to show an × button. Badge does NOT include a `dismissible`
- * boolean prop — the presence of `onDismiss` is the signal.
+ * **Interactive:** Pass `onClick` to make it a button. Pass `selected` for toggle state.
+ * **Dismissible:** Pass `onDismiss` to show a dismiss button.
+ * **Custom colors:** Set `color="custom"` and CSS variable `--badge-color` on a parent or via `style`.
+ * For light custom colors on solid variant, set `--badge-fg-color` to a dark value.
  *
  * @example
- * // Status badge in a table cell:
  * <Badge color="success">Active</Badge>
  *
  * @example
- * // Notification count with dot indicator (solid fill for high contrast):
  * <Badge variant="solid" size="sm" dot>3 new</Badge>
  *
  * @example
- * // Dismissible category filter (e.g. in a filter bar):
- * <Badge color="teal" onDismiss={() => removeFilter('teal')}>Teal team</Badge>
- *
- * @example
- * // Error badge for a failed job in a pipeline view:
- * <Badge color="error" size="lg">Build failed</Badge>
- * // These are just a few ways — feel free to combine props creatively!
+ * <Badge color="custom" style={{ '--badge-color': '#8b5cf6' } as React.CSSProperties}>
+ *   Custom
+ * </Badge>
  */
-export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>, VariantProps<typeof badgeVariants> {
+interface BadgeProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, VariantProps<typeof badgeVariants> {
+    asChild?: boolean;
+    startIcon?: React.ReactElement | null;
+    endIcon?: React.ReactElement | null;
     dot?: boolean;
     onDismiss?: () => void;
+    selected?: boolean;
+    disabled?: boolean;
+    maxWidth?: number;
+    circle?: boolean;
 }
-declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
-export { Badge, badgeVariants };
+declare const BadgeCompound: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLElement>> & {
+    Indicator: typeof BadgeIndicator;
+    Group: typeof BadgeGroup;
+};
+export { BadgeCompound as Badge, badgeVariants, type BadgeProps };
 //# sourceMappingURL=badge.d.ts.map

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;AAIjE,QAAA,MAAM,aAAa;;;;8EA4FlB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC,EAC1D,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,KAAK,oFA4BV,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,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,QAAA,MAAM,aAAa;;;;8EAyGlB,CAAA;AA0BD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,UAAU,UACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,EACtD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACrC,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACnC,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AA6LD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,QAAA,MAAM,aAAa;;;CAGjB,CAAA;AAEF,OAAO,EAAE,aAAa,IAAI,KAAK,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,CAAA"}

package/dist/ui/badge.js

@@ -1,132 +1,16 @@
 "use client";
-import { jsxs as t, jsx as a } from "react/jsx-runtime";
-import { IconX as g } from "@tabler/icons-react";
-import * as b from "react";
-import { c as m } from "../_chunks/vendor-utils.js";
-import { cn as u } from "./lib/utils.js";
-import { m as f } from "../_chunks/framer.js";
-const x = m(
-  "inline-flex items-center gap-ds-02b font-sans font-medium rounded-ds-full border transition-colors duration-fast-01 ease-productive-standard",
-  {
-    variants: {
-      variant: {
-        subtle: "",
-        secondary: "",
-        // alias → subtle
-        solid: "",
-        outline: "",
-        destructive: ""
-        // alias → solid + error
-      },
-      color: {
-        default: "",
-        info: "",
-        success: "",
-        error: "",
-        warning: "",
-        brand: "",
-        accent: "",
-        teal: "",
-        amber: "",
-        slate: "",
-        indigo: "",
-        cyan: "",
-        orange: "",
-        emerald: ""
-      },
-      size: {
-        xs: "h-[16px] px-ds-02b text-ds-xs",
-        sm: "h-[20px] px-ds-03 text-ds-xs",
-        md: "h-ds-xs px-ds-03 text-ds-sm",
-        lg: "h-ds-xs-plus px-ds-04 text-ds-md"
-      }
-    },
-    compoundVariants: [
-      // subtle (surface bg)
-      { variant: "subtle", color: "default", className: "bg-surface-raised-hover text-surface-fg-muted border-surface-border-strong" },
-      // "secondary" alias → same as subtle + default
-      { variant: "secondary", color: "default", className: "bg-surface-raised-hover text-surface-fg-muted border-surface-border-strong" },
-      // "destructive" alias → solid + error
-      { variant: "destructive", color: "default", className: "bg-error-9 text-accent-fg border-transparent" },
-      { variant: "destructive", color: "error", className: "bg-error-9 text-accent-fg border-transparent" },
-      { variant: "subtle", color: "info", className: "bg-info-3 text-info-11 border-info-7" },
-      { variant: "subtle", color: "success", className: "bg-success-3 text-success-11 border-success-7" },
-      { variant: "subtle", color: "error", className: "bg-error-3 text-error-11 border-error-7" },
-      { variant: "subtle", color: "warning", className: "bg-warning-3 text-warning-11 border-warning-7" },
-      { variant: "subtle", color: "brand", className: "bg-accent-2 text-accent-11 border-accent-7" },
-      { variant: "subtle", color: "accent", className: "bg-accent-2 text-accent-11 border-accent-7" },
-      { variant: "subtle", color: "teal", className: "bg-category-teal-3 text-category-teal-11 border-category-teal-7" },
-      { variant: "subtle", color: "amber", className: "bg-category-amber-3 text-category-amber-11 border-category-amber-7" },
-      { variant: "subtle", color: "slate", className: "bg-category-slate-3 text-category-slate-11 border-category-slate-7" },
-      { variant: "subtle", color: "indigo", className: "bg-category-indigo-3 text-category-indigo-11 border-category-indigo-7" },
-      { variant: "subtle", color: "cyan", className: "bg-category-cyan-3 text-category-cyan-11 border-category-cyan-7" },
-      { variant: "subtle", color: "orange", className: "bg-category-orange-3 text-category-orange-11 border-category-orange-7" },
-      { variant: "subtle", color: "emerald", className: "bg-category-emerald-3 text-category-emerald-11 border-category-emerald-7" },
-      // solid (filled bg)
-      { variant: "solid", color: "default", className: "bg-accent-9 text-accent-fg border-transparent" },
-      { variant: "solid", color: "info", className: "bg-info-9 text-accent-fg border-transparent" },
-      { variant: "solid", color: "success", className: "bg-success-9 text-accent-fg border-transparent" },
-      { variant: "solid", color: "error", className: "bg-error-9 text-accent-fg border-transparent" },
-      { variant: "solid", color: "warning", className: "bg-warning-9 text-accent-fg border-transparent" },
-      { variant: "solid", color: "brand", className: "bg-accent-9 text-accent-fg border-transparent" },
-      { variant: "solid", color: "accent", className: "bg-accent-9 text-accent-fg border-transparent" },
-      { variant: "solid", color: "teal", className: "bg-category-teal-9 text-accent-fg border-transparent" },
-      { variant: "solid", color: "amber", className: "bg-category-amber-9 text-accent-fg border-transparent" },
-      { variant: "solid", color: "slate", className: "bg-category-slate-9 text-accent-fg border-transparent" },
-      { variant: "solid", color: "indigo", className: "bg-category-indigo-9 text-accent-fg border-transparent" },
-      { variant: "solid", color: "cyan", className: "bg-category-cyan-9 text-accent-fg border-transparent" },
-      { variant: "solid", color: "orange", className: "bg-category-orange-9 text-accent-fg border-transparent" },
-      { variant: "solid", color: "emerald", className: "bg-category-emerald-9 text-accent-fg border-transparent" },
-      // outline (border only)
-      { variant: "outline", color: "default", className: "bg-transparent text-surface-fg-muted border-surface-border-strong" },
-      { variant: "outline", color: "info", className: "bg-transparent text-info-11 border-info-7" },
-      { variant: "outline", color: "success", className: "bg-transparent text-success-11 border-success-7" },
-      { variant: "outline", color: "error", className: "bg-transparent text-error-11 border-error-7" },
-      { variant: "outline", color: "warning", className: "bg-transparent text-warning-11 border-warning-7" },
-      { variant: "outline", color: "brand", className: "bg-transparent text-accent-11 border-accent-7" },
-      { variant: "outline", color: "accent", className: "bg-transparent text-accent-11 border-accent-7" },
-      { variant: "outline", color: "teal", className: "bg-transparent text-category-teal-11 border-category-teal-7" },
-      { variant: "outline", color: "amber", className: "bg-transparent text-category-amber-11 border-category-amber-7" },
-      { variant: "outline", color: "slate", className: "bg-transparent text-category-slate-11 border-category-slate-7" },
-      { variant: "outline", color: "indigo", className: "bg-transparent text-category-indigo-11 border-category-indigo-7" },
-      { variant: "outline", color: "cyan", className: "bg-transparent text-category-cyan-11 border-category-cyan-7" },
-      { variant: "outline", color: "orange", className: "bg-transparent text-category-orange-11 border-category-orange-7" },
-      { variant: "outline", color: "emerald", className: "bg-transparent text-category-emerald-11 border-category-emerald-7" }
-    ],
-    defaultVariants: {
-      variant: "subtle",
-      color: "default",
-      size: "md"
-    }
-  }
-), v = b.forwardRef(
-  ({ className: o, variant: s, color: n, size: c, dot: l, onDismiss: r, children: e, ...i }, d) => /* @__PURE__ */ t("span", { ref: d, className: u(x({ variant: s, color: n, size: c }), o), ...i, children: [
-    l && /* @__PURE__ */ t("span", { className: "relative inline-flex h-ds-02b w-ds-02b shrink-0", "aria-hidden": "true", children: [
-      /* @__PURE__ */ a(
-        f.span,
-        {
-          className: "absolute inset-0 rounded-ds-full bg-current",
-          animate: { scale: [1, 2.5], opacity: [0.4, 0] },
-          transition: { repeat: 1 / 0, duration: 1.5, ease: "easeOut" }
-        }
-      ),
-      /* @__PURE__ */ a("span", { className: "relative h-ds-02b w-ds-02b rounded-ds-full bg-current" })
-    ] }),
-    e,
-    r && /* @__PURE__ */ a(
-      "button",
-      {
-        type: "button",
-        onClick: r,
-        className: "ml-ds-01 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-full text-current/60 hover:text-current hover:bg-current/10 transition-[color,background-color,transform] duration-fast-02 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9",
-        "aria-label": `Remove ${typeof e == "string" ? e : ""}`.trim() || "Remove",
-        children: /* @__PURE__ */ a(g, { className: "h-ico-sm w-ico-sm" })
-      }
-    )
-  ] })
-);
-v.displayName = "Badge";
+import "react/jsx-runtime";
+import "@tabler/icons-react";
+import "../_chunks/vendor-utils.js";
+import "./lib/motion.js";
+import "../_chunks/primitives.js";
+import "react";
+import "./icon.js";
+import "./lib/utils.js";
+import "./badge-indicator.js";
+import { B, b as f } from "../_chunks/badge-group.js";
+import "../_chunks/framer.js";
 export {
-  v as Badge,
-  x as badgeVariants
+  B as Badge,
+  f as badgeVariants
 };

package/dist/ui/banner.d.ts

@@ -2,7 +2,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const bannerVariants: (props?: ({
-    color?: "error" | "info" | "success" | "warning" | "neutral" | null | undefined;
+    color?: "success" | "error" | "info" | "warning" | "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

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

@@ -1 +1 @@
-{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../src/ui/banner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,cAAc;;8EAmBnB,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,wCAAwC;IACxC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,iGAAiG;IACjG,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,MAAM,oFA0CX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../src/ui/banner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,QAAA,MAAM,cAAc;;8EAmBnB,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,wCAAwC;IACxC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,iGAAiG;IACjG,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,MAAM,oFA0CX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/dist/ui/banner.js

@@ -1,12 +1,13 @@
 "use client";
-import { jsx as e, jsxs as p } from "react/jsx-runtime";
-import { IconInfoCircle as n, IconAlertCircle as h, IconAlertTriangle as x, IconCircleCheck as v, IconX as w } from "@tabler/icons-react";
+import { jsx as e, jsxs as x } from "react/jsx-runtime";
+import { IconInfoCircle as t, IconAlertCircle as h, IconAlertTriangle as v, IconCircleCheck as w, IconX as I } from "@tabler/icons-react";
 import * as r from "react";
-import { c as N } from "../_chunks/vendor-utils.js";
-import { cn as I } from "./lib/utils.js";
-import { springs as C, motionProps as y } from "./lib/motion.js";
-import { A as k, m as A } from "../_chunks/framer.js";
-const _ = N(
+import { a as N } from "../_chunks/vendor-utils.js";
+import { cn as C } from "./lib/utils.js";
+import { springs as y, motionProps as k } from "./lib/motion.js";
+import { Icon as i } from "./icon.js";
+import { A, m as _ } from "../_chunks/framer.js";
+const B = N(
   "flex flex-wrap items-center gap-ds-04 px-ds-06 py-ds-04 text-ds-md font-medium border-b",
   {
     variants: {
@@ -21,38 +22,38 @@ const _ = N(
     defaultVariants: { color: "info" }
   }
 ), V = {
-  info: n,
-  success: v,
-  warning: x,
+  info: t,
+  success: w,
+  warning: v,
   error: h,
-  neutral: n
+  neutral: t
 }, j = r.forwardRef(
-  ({ className: i, color: s = "info", action: a, actions: c, onDismiss: o, children: d, ...l }, m) => {
-    const t = c ?? a, u = V[s ?? "info"], [f, b] = r.useState(!0), g = r.useCallback(() => {
-      b(!1);
+  ({ className: a, color: s = "info", action: c, actions: d, onDismiss: n, children: l, ...m }, f) => {
+    const o = d ?? c, u = V[s ?? "info"], [b, p] = r.useState(!0), g = r.useCallback(() => {
+      p(!1);
     }, []);
-    return /* @__PURE__ */ e(k, { onExitComplete: o, children: f && /* @__PURE__ */ p(
-      A.div,
+    return /* @__PURE__ */ e(A, { onExitComplete: n, children: b && /* @__PURE__ */ x(
+      _.div,
       {
-        ref: m,
+        ref: f,
         initial: { height: "auto", opacity: 1 },
         exit: { height: 0, opacity: 0 },
-        transition: C.snappy,
-        className: I(_({ color: s }), "overflow-hidden", i),
+        transition: y.snappy,
+        className: C(B({ color: s }), "overflow-hidden", a),
         role: "alert",
-        ...y(l),
+        ...k(m),
         children: [
-          /* @__PURE__ */ e(u, { className: "h-ico-md w-ico-md shrink-0", "aria-hidden": "true" }),
-          /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: d }),
-          t && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-ds-02 [&_button]:transition-colors [&_button]:duration-moderate-01 [&_button]:ease-productive-standard [&_button:hover]:bg-current/10", children: t }),
-          o && /* @__PURE__ */ e(
+          /* @__PURE__ */ e(i, { icon: u, size: "md", className: "shrink-0" }),
+          /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: l }),
+          o && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-ds-02 [&_button]:transition-colors [&_button]:duration-moderate-01 [&_button]:ease-productive-standard [&_button:hover]:bg-current/10", children: o }),
+          n && /* @__PURE__ */ e(
             "button",
             {
               type: "button",
               onClick: g,
               className: "shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm transition-colors duration-moderate-01 ease-productive-standard hover:bg-current/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9",
               "aria-label": "Dismiss",
-              children: /* @__PURE__ */ e(w, { className: "h-ico-sm w-ico-sm" })
+              children: /* @__PURE__ */ e(i, { icon: I, size: "sm" })
             }
           )
         ]
@@ -63,5 +64,5 @@ const _ = N(
 j.displayName = "Banner";
 export {
   j as Banner,
-  _ as bannerVariants
+  B as bannerVariants
 };

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../src/ui/breadcrumb.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,QAAA,MAAM,UAAU;gBAEwC,KAAK,CAAC,SAAS;qCACO,CAAA;AAG9E,QAAA,MAAM,cAAc,2KAWnB,CAAA;AAGD,QAAA,MAAM,cAAc,kKAInB,CAAA;AAGD,QAAA,MAAM,cAAc;cAEgC,OAAO;2CAczD,CAAA;AAGF,QAAA,MAAM,cAAc,sKASnB,CAAA;AAGD,QAAA,MAAM,mBAAmB;wCAAuC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;;CASzF,CAAA;AAGD,QAAA,MAAM,kBAAkB;8BAA6B,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC;;CAUhF,CAAA;AAGD,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AACnE,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAA;AAErE,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,kBAAkB,GACnB,CAAA"}
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../src/ui/breadcrumb.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,QAAA,MAAM,UAAU;gBAEwC,KAAK,CAAC,SAAS;qCACO,CAAA;AAG9E,QAAA,MAAM,cAAc,2KAWnB,CAAA;AAGD,QAAA,MAAM,cAAc,kKAInB,CAAA;AAGD,QAAA,MAAM,cAAc;cAEgC,OAAO;2CAczD,CAAA;AAGF,QAAA,MAAM,cAAc,sKASnB,CAAA;AAGD,QAAA,MAAM,mBAAmB;wCAAuC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;;CASzF,CAAA;AAGD,QAAA,MAAM,kBAAkB;8BAA6B,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC;;CAUhF,CAAA;AAGD,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AACnE,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAA;AAErE,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,kBAAkB,GACnB,CAAA"}

package/dist/ui/breadcrumb.js

@@ -1,17 +1,18 @@
 "use client";
-import { jsx as s, jsxs as t } from "react/jsx-runtime";
-import { S as c } from "../_chunks/primitives.js";
-import { IconDots as d, IconChevronRight as n } from "@tabler/icons-react";
-import * as i from "react";
-import { cn as m } from "./lib/utils.js";
-const l = i.forwardRef(({ ...e }, r) => /* @__PURE__ */ s("nav", { ref: r, "aria-label": "breadcrumb", ...e }));
-l.displayName = "Breadcrumb";
-const u = i.forwardRef(
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { S as d } from "../_chunks/primitives.js";
+import { IconDots as n, IconChevronRight as l } from "@tabler/icons-react";
+import * as o from "react";
+import { cn as i } from "./lib/utils.js";
+import { Icon as m } from "./icon.js";
+const u = o.forwardRef(({ ...e }, r) => /* @__PURE__ */ s("nav", { ref: r, "aria-label": "breadcrumb", ...e }));
+u.displayName = "Breadcrumb";
+const f = o.forwardRef(
   ({ className: e, ...r }, a) => /* @__PURE__ */ s(
     "ol",
     {
       ref: a,
-      className: m(
+      className: i(
         "flex flex-wrap items-center gap-ds-02b break-words text-ds-md text-surface-fg-muted sm:gap-ds-03",
         e
       ),
@@ -19,66 +20,66 @@ const u = i.forwardRef(
     }
   )
 );
-u.displayName = "BreadcrumbList";
-const f = i.forwardRef(
-  ({ className: e, ...r }, a) => /* @__PURE__ */ s("li", { ref: a, className: m("inline-flex items-center gap-ds-03", e), ...r })
+f.displayName = "BreadcrumbList";
+const p = o.forwardRef(
+  ({ className: e, ...r }, a) => /* @__PURE__ */ s("li", { ref: a, className: i("inline-flex items-center gap-ds-03", e), ...r })
 );
-f.displayName = "BreadcrumbItem";
-const p = i.forwardRef(({ className: e, asChild: r = !1, ...a }, o) => /* @__PURE__ */ s(
-  r ? c : "a",
+p.displayName = "BreadcrumbItem";
+const b = o.forwardRef(({ className: e, asChild: r = !1, ...a }, t) => /* @__PURE__ */ s(
+  r ? d : "a",
   {
-    ref: o,
-    className: m(
+    ref: t,
+    className: i(
       "transition-colors duration-fast-01 ease-productive-standard hover:text-surface-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 rounded-ds-sm",
       e
     ),
     ...a
   }
 ));
-p.displayName = "BreadcrumbLink";
-const b = i.forwardRef(
+b.displayName = "BreadcrumbLink";
+const g = o.forwardRef(
   ({ className: e, ...r }, a) => /* @__PURE__ */ s(
     "span",
     {
       ref: a,
       "aria-current": "page",
-      className: m("font-medium text-surface-fg", e),
+      className: i("font-medium text-surface-fg", e),
       ...r
     }
   )
 );
-b.displayName = "BreadcrumbPage";
-const N = ({ children: e, className: r, ...a }) => /* @__PURE__ */ s(
+g.displayName = "BreadcrumbPage";
+const B = ({ children: e, className: r, ...a }) => /* @__PURE__ */ s(
   "li",
   {
     role: "presentation",
     "aria-hidden": "true",
-    className: m("[&>svg]:h-ico-sm [&>svg]:w-ico-sm", r),
+    className: i("[&>svg]:h-ico-sm [&>svg]:w-ico-sm", r),
     ...a,
-    children: e ?? /* @__PURE__ */ s(n, {})
+    children: e ?? /* @__PURE__ */ s(m, { icon: l, size: "sm" })
   }
 );
-N.displayName = "BreadcrumbSeparator";
-const g = ({ className: e, ...r }) => /* @__PURE__ */ t(
+B.displayName = "BreadcrumbSeparator";
+const N = ({ className: e, ...r }) => /* @__PURE__ */ c(
   "span",
   {
     role: "presentation",
     "aria-hidden": "true",
-    className: m("flex h-ds-sm-plus w-ds-sm-plus items-center justify-center", e),
+    className: i("flex h-ds-sm-plus w-ds-sm-plus items-center justify-center", e),
     ...r,
     children: [
-      /* @__PURE__ */ s(d, { className: "h-ico-sm w-ico-sm" }),
+      /* @__PURE__ */ s(m, { icon: n, size: "sm" }),
       /* @__PURE__ */ s("span", { className: "sr-only", children: "More" })
     ]
   }
 );
-g.displayName = "BreadcrumbEllipsis";
+N.displayName = "BreadcrumbEllipsis";
 export {
-  l as Breadcrumb,
-  g as BreadcrumbEllipsis,
-  f as BreadcrumbItem,
-  p as BreadcrumbLink,
-  u as BreadcrumbList,
-  b as BreadcrumbPage,
-  N as BreadcrumbSeparator
+  u as Breadcrumb,
+  N as BreadcrumbEllipsis,
+  p as BreadcrumbItem,
+  b as BreadcrumbLink,
+  f as BreadcrumbList,
+  g as BreadcrumbPage,
+  B as BreadcrumbSeparator
 };

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

@@ -4,24 +4,26 @@ import * as React from 'react';
 interface ButtonGroupContextValue {
     variant?: ButtonProps['variant'];
     color?: ButtonProps['color'];
+    weight?: ButtonProps['weight'];
+    shape?: ButtonProps['shape'];
     size?: ButtonProps['size'];
 }
 export declare function useButtonGroup(): ButtonGroupContextValue;
 /**
  * Props for ButtonGroup — a container that visually merges adjacent `<Button>` components into
- * a single connected unit, and propagates a shared `variant` and `size` via context.
+ * a single connected unit, and propagates shared props (`variant`, `color`, `weight`, `shape`, `size`) via context.
  *
- * **Context propagation:** Child `<Button>` components automatically inherit `variant` and `size`
- * from ButtonGroup. Individual children can still override by passing their own `variant` or `size`.
+ * **Context propagation:** Child `<Button>` components automatically inherit `variant`, `color`,
+ * `weight`, `shape`, and `size` from ButtonGroup. Individual children can still override any prop.
  *
  * **Visual joining:** Adjacent button borders are merged with negative margins and border-radius overrides.
  *
  * @example
  * // 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>
+ *   <Button startIcon={<Icon icon={IconBold} />}>Bold</Button>
+ *   <Button startIcon={<Icon icon={IconItalic} />}>Italic</Button>
+ *   <Button startIcon={<Icon icon={IconUnderline} />}>Underline</Button>
  * </ButtonGroup>
  *
  * @example
@@ -45,6 +47,10 @@ export interface ButtonGroupProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     variant?: ButtonProps['variant'];
     /** Shared color applied to all child Buttons (children can override) */
     color?: ButtonProps['color'];
+    /** Shared weight applied to all child Buttons (children can override) */
+    weight?: ButtonProps['weight'];
+    /** Shared shape applied to all child Buttons (children can override) */
+    shape?: ButtonProps['shape'];
     /** 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,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,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC3F,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"}
+{"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,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAA;IAC9B,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,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC3F,0EAA0E;IAC1E,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAChC,wEAAwE;IACxE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC5B,yEAAyE;IACzE,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAA;IAC9B,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 { jsx as u } from "react/jsx-runtime";
 import * as o from "react";
-import { cn as a } from "./lib/utils.js";
-const l = o.createContext({});
-function h() {
-  return o.useContext(l);
+import { cn as p } from "./lib/utils.js";
+const d = o.createContext({});
+function G() {
+  return o.useContext(d);
 }
-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(
+const x = o.forwardRef(
+  ({ className: i, variant: t, color: n, weight: r, shape: e, size: l, orientation: c = "horizontal", children: s, ...f }, a) => {
+    const m = o.useMemo(() => ({ variant: t, color: n, weight: r, shape: e, size: l }), [t, n, r, e, l]);
+    return /* @__PURE__ */ u(d.Provider, { value: m, children: /* @__PURE__ */ u(
       "div",
       {
-        ref: s,
+        ref: a,
         role: "group",
-        className: a(
+        className: p(
           "inline-flex",
-          i === "horizontal" ? [
+          c === "horizontal" ? [
             "flex-row",
             "[&>*:not(:first-child)]:rounded-l-none",
             "[&>*:not(:last-child)]:rounded-r-none",
@@ -27,16 +27,16 @@ const p = o.forwardRef(
             "[&>*:not(:last-child)]:rounded-b-none",
             "[&>*:not(:first-child)]:-mt-px"
           ],
-          u
+          i
         ),
-        ...c,
-        children: d
+        ...f,
+        children: s
       }
     ) });
   }
 );
-p.displayName = "ButtonGroup";
+x.displayName = "ButtonGroup";
 export {
-  p as ButtonGroup,
-  h as useButtonGroup
+  x as ButtonGroup,
+  G as useButtonGroup
 };