@devalok/shilp-sutra 0.1.0

package/dist/ui/alert.js

@@ -0,0 +1,52 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { IconInfoCircle as i, IconAlertCircle as m, IconAlertTriangle as f, 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";
+const v = g(
+  "relative flex gap-ds-04 rounded-ds-lg border p-ds-05",
+  {
+    variants: {
+      variant: {
+        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",
+        error: "bg-error-surface border-error-border text-error-text",
+        neutral: "bg-layer-02 border-border text-text-primary [&>svg]:text-text-secondary"
+      }
+    },
+    defaultVariants: { variant: "info" }
+  }
+), h = {
+  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: [
+      /* @__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-90", children: a })
+      ] }),
+      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",
+          "aria-label": "Dismiss",
+          children: /* @__PURE__ */ r(u, { className: "h-ico-sm w-ico-sm" })
+        }
+      )
+    ] });
+  }
+);
+w.displayName = "Alert";
+export {
+  w as Alert,
+  v as alertVariants
+};

package/dist/ui/aspect-ratio.d.ts

@@ -0,0 +1,4 @@
+import * as AspectRatioPrimitive from '@primitives/react-aspect-ratio';
+declare const AspectRatio: import('react').ForwardRefExoticComponent<AspectRatioPrimitive.AspectRatioProps & import('react').RefAttributes<HTMLDivElement>>;
+export { AspectRatio };
+//# sourceMappingURL=aspect-ratio.d.ts.map

package/dist/ui/aspect-ratio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio.d.ts","sourceRoot":"","sources":["../../src/ui/aspect-ratio.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,oBAAoB,MAAM,gCAAgC,CAAA;AAEtE,QAAA,MAAM,WAAW,kIAA4B,CAAA;AAG7C,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/ui/aspect-ratio.js

@@ -0,0 +1,6 @@
+import { Root as o } from "../primitives/react-aspect-ratio.js";
+const t = o;
+t.displayName = "AspectRatio";
+export {
+  t as AspectRatio
+};

package/dist/ui/autocomplete.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+type AutocompleteOption = {
+    label: string;
+    value: string;
+};
+/**
+ * Props for Autocomplete — a free-text input with a live-filtered dropdown list, keyboard
+ * navigation, and ARIA combobox semantics. Suitable for "type to search" fields where the
+ * full list is known ahead of time (client-side filtering only).
+ *
+ * **Key distinction from Combobox:** Autocomplete allows free-text input (no forced selection),
+ * while `<Combobox>` enforces selection from the list. Use Autocomplete for search-as-you-type
+ * with suggestions; use Combobox for structured single or multi-select dropdowns.
+ *
+ * **`value`:** A full `AutocompleteOption` object (or null), not just the string value.
+ * The input's text is synced to `value.label` on mount.
+ *
+ * @example
+ * // City search autocomplete:
+ * <Autocomplete
+ *   options={[{ value: 'mumbai', label: 'Mumbai' }, { value: 'delhi', label: 'Delhi' }]}
+ *   value={selectedCity}
+ *   onChange={(opt) => setSelectedCity(opt)}
+ *   placeholder="Search cities..."
+ * />
+ *
+ * @example
+ * // Employee name lookup with custom empty text:
+ * <Autocomplete
+ *   options={employees.map(e => ({ value: e.id, label: e.fullName }))}
+ *   onChange={(opt) => setAssignee(opt.value)}
+ *   emptyText="No employees found"
+ *   placeholder="Search employees..."
+ * />
+ * // These are just a few ways — feel free to combine props creatively!
+ */
+type AutocompleteProps = {
+    options: AutocompleteOption[];
+    value?: AutocompleteOption | null;
+    onChange?: (option: AutocompleteOption) => void;
+    placeholder?: string;
+    emptyText?: string;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+};
+declare const Autocomplete: React.ForwardRefExoticComponent<AutocompleteProps & React.RefAttributes<HTMLInputElement>>;
+export { Autocomplete, type AutocompleteProps, type AutocompleteOption };
+//# sourceMappingURL=autocomplete.d.ts.map

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

@@ -0,0 +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"}

package/dist/ui/autocomplete.js

@@ -0,0 +1,124 @@
+import { jsxs as K, jsx as p } from "react/jsx-runtime";
+import * as t from "react";
+import { cn as b } from "./lib/utils.js";
+const O = t.forwardRef(
+  ({
+    options: x,
+    value: s,
+    onChange: u,
+    placeholder: D,
+    emptyText: I = "No options",
+    disabled: y,
+    className: R,
+    id: N
+  }, i) => {
+    const E = t.useId(), w = N || E, g = `${w}-listbox`, v = `${w}-option`, [f, k] = t.useState((s == null ? void 0 : s.label) ?? ""), [c, a] = t.useState(!1), [r, l] = t.useState(-1), $ = t.useRef(null), A = t.useRef(null), h = t.useRef(), M = t.useCallback(
+      (e) => {
+        $.current = e, typeof i == "function" ? i(e) : i && (i.current = e);
+      },
+      [i]
+    );
+    t.useEffect(() => () => {
+      h.current && clearTimeout(h.current);
+    }, []);
+    const n = t.useMemo(
+      () => f ? x.filter((e) => e.label.toLowerCase().includes(f.toLowerCase())) : x,
+      [x, f]
+    ), m = t.useCallback(
+      (e) => {
+        k(e.label), a(!1), l(-1), u == null || u(e);
+      },
+      [u]
+    ), z = t.useCallback(
+      (e) => {
+        if (!c) {
+          (e.key === "ArrowDown" || e.key === "Enter") && a(!0);
+          return;
+        }
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault(), l((o) => Math.min(o + 1, n.length - 1));
+            break;
+          case "ArrowUp":
+            e.preventDefault(), l((o) => Math.max(o - 1, 0));
+            break;
+          case "Enter":
+            e.preventDefault(), r >= 0 && n[r] && m(n[r]);
+            break;
+          case "Escape":
+            a(!1), l(-1);
+            break;
+        }
+      },
+      [c, n, r, m]
+    ), S = r >= 0 ? `${v}-${r}` : void 0;
+    return /* @__PURE__ */ K("div", { className: b("relative", R), children: [
+      /* @__PURE__ */ p(
+        "input",
+        {
+          ref: M,
+          type: "text",
+          role: "combobox",
+          "aria-expanded": c,
+          "aria-autocomplete": "list",
+          "aria-controls": c ? g : void 0,
+          "aria-activedescendant": S,
+          value: f,
+          placeholder: D,
+          disabled: y,
+          className: b(
+            "flex h-ds-md w-full rounded-ds-md border border-border bg-field px-ds-04 py-ds-03 font-sans text-[length:var(--font-size-md)] text-text-primary placeholder:text-text-placeholder",
+            "outline-none focus:ring-2 focus:ring-focus focus:ring-offset-[var(--border-focus-offset)]",
+            "transition-colors duration-fast-01",
+            y && "opacity-[var(--action-disabled-opacity,0.38)] cursor-not-allowed"
+          ),
+          onChange: (e) => {
+            k(e.target.value), a(!0), l(-1);
+          },
+          onFocus: () => a(!0),
+          onBlur: () => {
+            h.current = setTimeout(() => a(!1), 150);
+          },
+          onKeyDown: z
+        }
+      ),
+      c && /* @__PURE__ */ p(
+        "ul",
+        {
+          id: g,
+          ref: A,
+          role: "listbox",
+          className: b(
+            "absolute z-dropdown mt-ds-02 w-full overflow-auto rounded-ds-md border border-border bg-layer-01 shadow-02",
+            "max-h-60"
+          ),
+          children: n.length === 0 ? /* @__PURE__ */ p("li", { className: "px-ds-04 py-ds-03 text-[length:var(--font-size-md)] text-text-secondary", children: I }) : n.map((e, o) => /* @__PURE__ */ p(
+            "li",
+            {
+              id: `${v}-${o}`,
+              role: "option",
+              "aria-selected": r === o,
+              className: b(
+                "cursor-pointer px-ds-04 py-ds-03 text-[length:var(--font-size-md)] text-text-primary transition-colors duration-fast-01",
+                r === o && "bg-interactive-selected",
+                (s == null ? void 0 : s.value) === e.value && "font-[number:var(--font-weight-semibold)]"
+              ),
+              onMouseDown: (d) => d.preventDefault(),
+              onClick: () => m(e),
+              onKeyDown: (d) => {
+                (d.key === "Enter" || d.key === " ") && (d.preventDefault(), m(e));
+              },
+              onMouseEnter: () => l(o),
+              children: e.label
+            },
+            e.value
+          ))
+        }
+      )
+    ] });
+  }
+);
+O.displayName = "Autocomplete";
+export {
+  O as Autocomplete
+};

package/dist/ui/avatar.d.ts

@@ -0,0 +1,51 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+import * as AvatarPrimitive from "@primitives/react-avatar";
+export declare const avatarVariants: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    shape?: "rounded" | "square" | "circle" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
+/**
+ * Props for Avatar — a user/entity image container with size, shape, and presence-status variants.
+ *
+ * **Sizes:** `xs` | `sm` | `md` (default) | `lg` | `xl` — the status dot scales with the avatar size.
+ *
+ * **Shapes:** `circle` (default, round) | `square` (sharp corners) | `rounded` (rounded corners, for bots/apps)
+ *
+ * **Status dot:** `status="online"` (green) | `"offline"` (muted) | `"busy"` (red) | `"away"` (amber).
+ * The dot renders with `role="img"` and an accessible `aria-label` — it is not purely decorative.
+ *
+ * **Children:** Use `<AvatarImage>` for the photo and `<AvatarFallback>` for initials when the image fails.
+ *
+ * @example
+ * // User avatar with photo and fallback initials:
+ * <Avatar size="md">
+ *   <AvatarImage src={user.avatarUrl} alt={user.name} />
+ *   <AvatarFallback>JD</AvatarFallback>
+ * </Avatar>
+ *
+ * @example
+ * // Online presence indicator in a team roster:
+ * <Avatar size="lg" status="online">
+ *   <AvatarImage src={user.photoUrl} alt={user.name} />
+ *   <AvatarFallback>{user.initials}</AvatarFallback>
+ * </Avatar>
+ *
+ * @example
+ * // Square shape for a bot/integration logo:
+ * <Avatar shape="square" size="xl">
+ *   <AvatarImage src="/logos/github.png" alt="GitHub" />
+ * </Avatar>
+ * // These are just a few ways — feel free to combine props creatively!
+ */
+export interface AvatarProps extends Omit<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, 'children'>, VariantProps<typeof avatarVariants> {
+    /** Optional status indicator displayed as a dot at the bottom-right corner */
+    status?: AvatarStatus;
+    children?: React.ReactNode;
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export { Avatar, AvatarImage, AvatarFallback };
+//# sourceMappingURL=avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/ui/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,eAAO,MAAM,cAAc;;;8EAmB1B,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AA4BjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,EACnF,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,8EAA8E;IAC9E,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,MAAM,qFAwBV,CAAA;AAGF,QAAA,MAAM,WAAW,gKASf,CAAA;AAGF,QAAA,MAAM,cAAc,iKAYlB,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,CAAA"}

package/dist/ui/avatar.js

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

package/dist/ui/badge.d.ts

@@ -0,0 +1,43 @@
+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;
+    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
+ * 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`
+ *
+ * **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.
+ *
+ * @example
+ * // Status badge in a table cell:
+ * <Badge variant="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 variant="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>
+ * // These are just a few ways — feel free to combine props creatively!
+ */
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+    dot?: boolean;
+    onDismiss?: () => void;
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export { Badge, badgeVariants };
+//# sourceMappingURL=badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/ui/badge.tsx"],"names":[],"mappings":"AACA,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"}

package/dist/ui/badge.js

@@ -0,0 +1,64 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { IconX as b } 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(
+  "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"
+      },
+      size: {
+        sm: "h-5 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"
+      }
+    },
+    defaultVariants: {
+      variant: "neutral",
+      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(
+      "span",
+      {
+        className: "h-ds-02b w-ds-02b rounded-ds-full bg-current opacity-70 shrink-0",
+        "aria-hidden": "true"
+      }
+    ),
+    c,
+    r && /* @__PURE__ */ e(
+      "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",
+        "aria-label": "Remove",
+        children: /* @__PURE__ */ e(b, { className: "h-3 w-3" })
+      }
+    )
+  ] })
+);
+f.displayName = "Badge";
+export {
+  f as Badge,
+  u as badgeVariants
+};

package/dist/ui/banner.d.ts

@@ -0,0 +1,43 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const bannerVariants: (props?: ({
+    variant?: "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`
+ *
+ * **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.
+ *
+ * **`action` slot:** Accepts any React node — typically a `<Button variant="ghost" size="sm">` or a link.
+ * **Dismissible:** Provide `onDismiss` to show an × button.
+ *
+ * @example
+ * // Maintenance warning at top of the dashboard:
+ * <Banner variant="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>}>
+ *   Your export is ready.
+ * </Banner>
+ *
+ * @example
+ * // Dismissible info banner for a new feature announcement:
+ * <Banner variant="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!
+ */
+export interface BannerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof bannerVariants> {
+    action?: React.ReactNode;
+    onDismiss?: () => void;
+}
+declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>;
+export { Banner, bannerVariants };
+//# sourceMappingURL=banner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../src/ui/banner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,cAAc;;8EAmBnB,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,MAAM,oFAsBX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/dist/ui/banner.js

@@ -0,0 +1,50 @@
+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 * as x from "react";
+import { cva as g } from "class-variance-authority";
+import { cn as p } from "./lib/utils.js";
+const h = g(
+  "flex items-center gap-ds-04 px-ds-06 py-ds-04 text-ds-md font-medium border-b",
+  {
+    variants: {
+      variant: {
+        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",
+        error: "bg-error-surface border-error-border text-error-text",
+        neutral: "bg-layer-02 border-border text-text-primary [&>svg]:text-text-secondary"
+      }
+    },
+    defaultVariants: { variant: "info" }
+  }
+), v = {
+  info: n,
+  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" }),
+      /* @__PURE__ */ r("span", { className: "flex-1", children: i }),
+      o && /* @__PURE__ */ r("span", { className: "shrink-0", children: o }),
+      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",
+          "aria-label": "Dismiss",
+          children: /* @__PURE__ */ r(u, { className: "h-ico-sm w-ico-sm" })
+        }
+      )
+    ] });
+  }
+);
+N.displayName = "Banner";
+export {
+  N as Banner,
+  h as bannerVariants
+};

package/dist/ui/breadcrumb.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+declare const Breadcrumb: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    separator?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>;
+declare const BreadcrumbList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const BreadcrumbLink: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLAnchorElement>>;
+declare const BreadcrumbPage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const BreadcrumbSeparator: {
+    ({ children, className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const BreadcrumbEllipsis: {
+    ({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };
+//# sourceMappingURL=breadcrumb.d.ts.map

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

@@ -0,0 +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,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,kBAAkB,GACnB,CAAA"}