@devalok/shilp-sutra 0.1.0

package/dist/ui/breadcrumb.js

@@ -0,0 +1,83 @@
+import { jsx as s, jsxs as i } from "react/jsx-runtime";
+import { Root as c } from "../primitives/react-slot.js";
+import { IconDots as n, IconChevronRight as d } from "@tabler/icons-react";
+import * as m from "react";
+import { cn as o } from "./lib/utils.js";
+const l = m.forwardRef(({ ...e }, r) => /* @__PURE__ */ s("nav", { ref: r, "aria-label": "breadcrumb", ...e }));
+l.displayName = "Breadcrumb";
+const p = m.forwardRef(
+  ({ className: e, ...r }, a) => /* @__PURE__ */ s(
+    "ol",
+    {
+      ref: a,
+      className: o(
+        "flex flex-wrap items-center gap-ds-02b break-words text-ds-md text-text-secondary sm:gap-ds-03",
+        e
+      ),
+      ...r
+    }
+  )
+);
+p.displayName = "BreadcrumbList";
+const u = m.forwardRef(
+  ({ className: e, ...r }, a) => /* @__PURE__ */ s("li", { ref: a, className: o("inline-flex items-center gap-ds-02b", e), ...r })
+);
+u.displayName = "BreadcrumbItem";
+const f = m.forwardRef(({ className: e, asChild: r = !1, ...a }, t) => /* @__PURE__ */ s(
+  r ? c : "a",
+  {
+    ref: t,
+    className: o(
+      "transition-colors hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus rounded-ds-sm",
+      e
+    ),
+    ...a
+  }
+));
+f.displayName = "BreadcrumbLink";
+const b = m.forwardRef(
+  ({ className: e, ...r }, a) => /* @__PURE__ */ s(
+    "span",
+    {
+      ref: a,
+      "aria-current": "page",
+      className: o("font-normal text-text-primary", e),
+      ...r
+    }
+  )
+);
+b.displayName = "BreadcrumbPage";
+const N = ({ children: e, className: r, ...a }) => /* @__PURE__ */ s(
+  "li",
+  {
+    role: "presentation",
+    "aria-hidden": "true",
+    className: o("[&>svg]:h-ico-sm [&>svg]:w-ico-sm", r),
+    ...a,
+    children: e ?? /* @__PURE__ */ s(d, {})
+  }
+);
+N.displayName = "BreadcrumbSeparator";
+const x = ({ className: e, ...r }) => /* @__PURE__ */ i(
+  "span",
+  {
+    role: "presentation",
+    "aria-hidden": "true",
+    className: o("flex h-ds-sm-plus w-ds-sm-plus items-center justify-center", e),
+    ...r,
+    children: [
+      /* @__PURE__ */ s(n, { className: "h-ico-sm w-ico-sm" }),
+      /* @__PURE__ */ s("span", { className: "sr-only", children: "More" })
+    ]
+  }
+);
+x.displayName = "BreadcrumbEllipsis";
+export {
+  l as Breadcrumb,
+  x as BreadcrumbEllipsis,
+  u as BreadcrumbItem,
+  f as BreadcrumbLink,
+  p as BreadcrumbList,
+  b as BreadcrumbPage,
+  N as BreadcrumbSeparator
+};

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

@@ -0,0 +1,51 @@
+import { ButtonProps } from './button';
+import * as React from 'react';
+interface ButtonGroupContextValue {
+    variant?: ButtonProps['variant'];
+    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.
+ *
+ * **Context propagation:** Child `<Button>` components automatically inherit `variant` and `size`
+ * from ButtonGroup. Individual children can still override by passing their own `variant` or `size`.
+ *
+ * **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">
+ *   <Button startIcon={<IconBold />}>Bold</Button>
+ *   <Button startIcon={<IconItalic />}>Italic</Button>
+ *   <Button startIcon={<IconUnderline />}>Underline</Button>
+ * </ButtonGroup>
+ *
+ * @example
+ * // Vertical action group for a sidebar panel:
+ * <ButtonGroup orientation="vertical" variant="ghost" size="md">
+ *   <Button>Profile</Button>
+ *   <Button>Settings</Button>
+ *   <Button variant="error-ghost">Danger zone</Button>
+ * </ButtonGroup>
+ *
+ * @example
+ * // Split button pattern (primary action + dropdown trigger):
+ * <ButtonGroup variant="primary" size="md">
+ *   <Button onClick={handlePublish}>Publish</Button>
+ *   <Button size="icon-md" aria-label="More publish options"><IconChevronDown /></Button>
+ * </ButtonGroup>
+ * // These are just a few ways — feel free to combine props creatively!
+ */
+export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Shared variant applied to all child Buttons (children can override) */
+    variant?: ButtonProps['variant'];
+    /** Shared size applied to all child Buttons (children can override) */
+    size?: ButtonProps['size'];
+    /** Layout direction. Default: 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+}
+declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+export { ButtonGroup };
+//# sourceMappingURL=button-group.d.ts.map

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

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

package/dist/ui/button-group.js

@@ -0,0 +1,41 @@
+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);
+}
+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(
+      "div",
+      {
+        ref: c,
+        role: "group",
+        className: f(
+          "inline-flex",
+          u === "horizontal" ? [
+            "flex-row",
+            "[&>*:not(:first-child)]:rounded-l-none",
+            "[&>*:not(:last-child)]:rounded-r-none",
+            "[&>*:not(:first-child)]:-ml-px"
+          ] : [
+            "flex-col",
+            "[&>*:not(:first-child)]:rounded-t-none",
+            "[&>*:not(:last-child)]:rounded-b-none",
+            "[&>*:not(:first-child)]:-mt-px"
+          ],
+          l
+        ),
+        ...d,
+        children: i
+      }
+    ) });
+  }
+);
+a.displayName = "ButtonGroup";
+export {
+  a as ButtonGroup,
+  x as useButtonGroup
+};

package/dist/ui/button.d.ts

@@ -0,0 +1,63 @@
+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;
+    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.
+ *
+ * **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)
+ *
+ * **Sizes:** `sm` | `md` (default) | `lg` for text buttons;
+ * `icon-sm` | `icon-md` | `icon-lg` for square icon-only buttons (prefer `IconButton` for icon-only).
+ *
+ * **Loading:** When `loading={true}` the button is disabled and aria-busy is set.
+ * Use `loadingPosition` to control where the spinner appears.
+ *
+ * @example
+ * // Primary save action (default variant):
+ * <Button onClick={handleSave}>Save changes</Button>
+ *
+ * @example
+ * // Destructive delete with confirmation icon and loading state:
+ * <Button variant="error" startIcon={<IconTrash />} loading={isDeleting}>
+ *   Delete project
+ * </Button>
+ *
+ * @example
+ * // Ghost toolbar action (compact icon-adjacent button):
+ * <Button variant="ghost" size="sm" startIcon={<IconEdit />}>
+ *   Edit
+ * </Button>
+ *
+ * @example
+ * // Full-width form submit with centered loading spinner:
+ * <Button fullWidth loading={isPending} loadingPosition="center">
+ *   Sign in
+ * </Button>
+ *
+ * @example
+ * // Link variant for inline text actions (renders as a <button>):
+ * <Button variant="link" onClick={openTerms}>View terms of service</Button>
+ * // These are just a few ways — feel free to combine props creatively!
+ */
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+    /** Icon element rendered before children */
+    startIcon?: React.ReactNode;
+    /** Icon element rendered after children */
+    endIcon?: React.ReactNode;
+    /** Show loading spinner and disable button */
+    loading?: boolean;
+    /** Where to render the spinner: replaces startIcon, endIcon, or centers over children */
+    loadingPosition?: 'start' | 'end' | 'center';
+    /** Stretch to full width of parent */
+    fullWidth?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button };
+//# sourceMappingURL=button.d.ts.map

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

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

package/dist/ui/button.js

@@ -0,0 +1,105 @@
+import { jsx as r, jsxs as g } 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(
+  "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",
+        link: "text-text-link underline-offset-4 hover:underline active:opacity-80"
+      },
+      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",
+        lg: "h-ds-lg rounded-ds-lg px-ds-06 text-ds-base",
+        "icon-sm": "h-ds-sm w-ds-sm rounded-ds-md",
+        "icon-md": "h-ds-md w-ds-md rounded-ds-md",
+        "icon-lg": "h-ds-lg w-ds-lg rounded-ds-lg"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+), M = {
+  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 = {
+  sm: "sm",
+  md: "sm",
+  lg: "md",
+  "icon-sm": "sm",
+  "icon-md": "sm",
+  "icon-lg": "md"
+}, A = V.forwardRef(
+  ({
+    className: c,
+    variant: x,
+    size: w,
+    asChild: y = !1,
+    startIcon: a,
+    endIcon: d,
+    loading: e = !1,
+    loadingPosition: o = "start",
+    fullWidth: m = !1,
+    disabled: l,
+    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 }),
+          m && "w-full"
+        ),
+        ref: u,
+        disabled: l || e,
+        "aria-busy": e || void 0,
+        ...v
+      };
+      return /* @__PURE__ */ r(C, { ...k, children: /* @__PURE__ */ r(R, { 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: [
+      /* @__PURE__ */ r("span", { className: "invisible", children: i }),
+      /* @__PURE__ */ r("span", { className: "absolute inset-0 flex items-center justify-center", children: n })
+    ] }) : i;
+    return /* @__PURE__ */ g(
+      "button",
+      {
+        className: t(
+          p({ variant: f, size: s, className: c }),
+          m && "w-full"
+        ),
+        ref: u,
+        disabled: l || e,
+        "aria-busy": e || void 0,
+        ...v,
+        children: [
+          S(),
+          j(),
+          N()
+        ]
+      }
+    );
+  }
+);
+A.displayName = "Button";
+export {
+  A as Button,
+  p as buttonVariants
+};

package/dist/ui/card.d.ts

@@ -0,0 +1,64 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const cardVariants: (props?: ({
+    variant?: "flat" | "default" | "elevated" | "outlined" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Props for Card — a general-purpose content container with 4 elevation/style variants and
+ * an optional interactive hover state.
+ *
+ * **Variants:** `default` (subtle border + shadow-01) | `elevated` (stronger shadow-02) |
+ * `outlined` (2px solid border, no shadow) | `flat` (filled background, no shadow)
+ *
+ * **Composition:** Use sub-components `<CardHeader>`, `<CardTitle>`, `<CardDescription>`,
+ * `<CardContent>`, and `<CardFooter>` for consistent internal spacing.
+ *
+ * **Interactive:** Pass `interactive` to enable hover shadow lift and pointer cursor —
+ * useful for clickable cards in grids.
+ *
+ * @example
+ * // Standard content card with header and body:
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Project Alpha</CardTitle>
+ *     <CardDescription>Last updated 2 hours ago</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>
+ *     <p>Sprint 4 is in progress with 12 open tasks.</p>
+ *   </CardContent>
+ * </Card>
+ *
+ * @example
+ * // Elevated card for a dashboard stat widget:
+ * <Card variant="elevated">
+ *   <CardContent>
+ *     <StatCard label="Revenue" value="$12,400" delta={{ value: "+8%", direction: "up" }} />
+ *   </CardContent>
+ * </Card>
+ *
+ * @example
+ * // Clickable card in a project grid (interactive hover effect):
+ * <Card interactive onClick={() => router.push(`/projects/${id}`)}>
+ *   <CardHeader>
+ *     <CardTitle>{project.name}</CardTitle>
+ *   </CardHeader>
+ * </Card>
+ *
+ * @example
+ * // Flat card for a sidebar panel section (no shadow):
+ * <Card variant="flat" className="p-ds-05">
+ *   <p className="text-text-secondary text-ds-sm">No recent activity</p>
+ * </Card>
+ * // These are just a few ways — feel free to combine props creatively!
+ */
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
+    interactive?: boolean;
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Card, cardVariants, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+//# sourceMappingURL=card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/ui/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,YAAY;;8EAajB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,WAAW,SACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,QAAA,MAAM,IAAI,kFAaT,CAAA;AAGD,QAAA,MAAM,UAAU,6GASd,CAAA;AAGF,QAAA,MAAM,SAAS,6GASb,CAAA;AAGF,QAAA,MAAM,eAAe,6GASnB,CAAA;AAGF,QAAA,MAAM,WAAW,6GAKf,CAAA;AAGF,QAAA,MAAM,UAAU,6GASd,CAAA;AAGF,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,CAAA"}

package/dist/ui/card.js

@@ -0,0 +1,79 @@
+import { jsx as d } from "react/jsx-runtime";
+import * as t from "react";
+import { cva as i } from "class-variance-authority";
+import { cn as o } from "./lib/utils.js";
+const l = i(
+  "rounded-ds-lg text-text-primary",
+  {
+    variants: {
+      variant: {
+        default: "bg-layer-01 border border-border-subtle shadow-01",
+        elevated: "bg-layer-01 border border-border-subtle shadow-02",
+        outlined: "bg-transparent border-2 border-border shadow-none",
+        flat: "bg-layer-02 border-none shadow-none"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+), f = t.forwardRef(
+  ({ className: r, variant: a, interactive: e, ...s }, n) => /* @__PURE__ */ d(
+    "div",
+    {
+      ref: n,
+      className: o(
+        l({ variant: a }),
+        e && "hover:shadow-02 hover:border-border-strong cursor-pointer transition-shadow duration-fast-01",
+        r
+      ),
+      ...s
+    }
+  )
+);
+f.displayName = "Card";
+const c = t.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ d(
+  "div",
+  {
+    ref: e,
+    className: o("flex flex-col space-y-ds-02b p-ds-06", r),
+    ...a
+  }
+));
+c.displayName = "CardHeader";
+const m = t.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ d(
+  "div",
+  {
+    ref: e,
+    className: o("font-sans font-semibold leading-none tracking-tight text-text-primary", r),
+    ...a
+  }
+));
+m.displayName = "CardTitle";
+const p = t.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ d(
+  "div",
+  {
+    ref: e,
+    className: o("text-ds-md text-text-secondary", r),
+    ...a
+  }
+));
+p.displayName = "CardDescription";
+const b = t.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ d("div", { ref: e, className: o("p-ds-06 pt-0", r), ...a }));
+b.displayName = "CardContent";
+const C = t.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ d(
+  "div",
+  {
+    ref: e,
+    className: o("flex items-center p-ds-06 pt-0", r),
+    ...a
+  }
+));
+C.displayName = "CardFooter";
+export {
+  f as Card,
+  b as CardContent,
+  p as CardDescription,
+  C as CardFooter,
+  c as CardHeader,
+  m as CardTitle,
+  l as cardVariants
+};

package/dist/ui/charts/_internal/animation.d.ts

@@ -0,0 +1,5 @@
+/** Hook to detect prefers-reduced-motion */
+export declare function useReducedMotion(): boolean;
+/** Get transition duration respecting reduced motion preference */
+export declare function getTransitionDuration(reducedMotion: boolean, duration?: number): number;
+//# sourceMappingURL=animation.d.ts.map

package/dist/ui/charts/_internal/animation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../../../src/ui/charts/_internal/animation.ts"],"names":[],"mappings":"AAEA,4CAA4C;AAC5C,wBAAgB,gBAAgB,IAAI,OAAO,CAY1C;AAED,mEAAmE;AACnE,wBAAgB,qBAAqB,CAAC,aAAa,EAAE,OAAO,EAAE,QAAQ,SAAM,GAAG,MAAM,CAEpF"}

package/dist/ui/charts/_internal/animation.js

@@ -0,0 +1,17 @@
+import { useState as o, useEffect as d } from "react";
+function u() {
+  const [t, e] = o(!1);
+  return d(() => {
+    const n = window.matchMedia("(prefers-reduced-motion: reduce)");
+    e(n.matches);
+    const r = (c) => e(c.matches);
+    return n.addEventListener("change", r), () => n.removeEventListener("change", r);
+  }, []), t;
+}
+function a(t, e = 300) {
+  return t ? 0 : e;
+}
+export {
+  a as getTransitionDuration,
+  u as useReducedMotion
+};

package/dist/ui/charts/_internal/axes.d.ts

@@ -0,0 +1,17 @@
+import { ScaleLinear, ScaleBand, ScalePoint, ScaleTime } from 'd3-scale';
+export type AnyScale = ScaleLinear<number, number> | ScaleBand<string> | ScalePoint<string> | ScaleTime<number, number>;
+interface AxisProps {
+    scale: AnyScale;
+    orientation: 'top' | 'right' | 'bottom' | 'left';
+    transform?: string;
+    tickCount?: number;
+    tickFormat?: (value: unknown) => string;
+    label?: string;
+    className?: string;
+}
+export declare function Axis({ scale, orientation, transform, tickCount, tickFormat, label, className, }: AxisProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Axis {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=axes.d.ts.map

package/dist/ui/charts/_internal/axes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"axes.d.ts","sourceRoot":"","sources":["../../../../src/ui/charts/_internal/axes.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAE7E,MAAM,MAAM,QAAQ,GAChB,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,GAC3B,SAAS,CAAC,MAAM,CAAC,GACjB,UAAU,CAAC,MAAM,CAAC,GAClB,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAE7B,UAAU,SAAS;IACjB,KAAK,EAAE,QAAQ,CAAA;IACf,WAAW,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAChD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAAA;IACvC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,WAAW,EACX,SAAS,EACT,SAAS,EACT,UAAU,EACV,KAAK,EACL,SAAS,GACV,EAAE,SAAS,2CAoDX;yBA5De,IAAI"}

package/dist/ui/charts/_internal/axes.js

@@ -0,0 +1,41 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useRef as m, useEffect as d } from "react";
+import { axisLeft as p, axisBottom as u, axisRight as b, axisTop as v } from "d3-axis";
+import { select as A } from "d3-selection";
+function h({
+  scale: i,
+  orientation: r,
+  transform: c,
+  tickCount: o,
+  tickFormat: l,
+  label: f,
+  className: x
+}) {
+  const s = m(null);
+  return d(() => {
+    if (!s.current) return;
+    const n = {
+      top: v,
+      right: b,
+      bottom: u,
+      left: p
+    }[r];
+    let t = n(i);
+    o && (t = t.ticks(o)), l && (t = t.tickFormat(l));
+    const e = A(s.current);
+    e.call(t), e.selectAll(".tick line").attr("stroke", "var(--color-border-subtle)"), e.selectAll(".tick text").attr("fill", "var(--color-text-secondary)").attr("font-size", "var(--font-size-xs)"), e.selectAll(".domain").attr("stroke", "var(--color-border-default)");
+  }, [i, r, o, l]), /* @__PURE__ */ a("g", { ref: s, transform: c, className: x, children: f && /* @__PURE__ */ a(
+    "text",
+    {
+      textAnchor: "middle",
+      fill: "var(--color-text-secondary)",
+      fontSize: "var(--font-size-sm)",
+      ...r === "bottom" ? { x: "50%", dy: 35 } : r === "left" ? { transform: "rotate(-90)", y: -40, x: 0 } : {},
+      children: f
+    }
+  ) });
+}
+h.displayName = "Axis";
+export {
+  h as Axis
+};

package/dist/ui/charts/_internal/colors.d.ts

@@ -0,0 +1,8 @@
+import { ChartColor } from './types';
+/** Get CSS variable reference for a chart color token */
+export declare function getChartColor(color: ChartColor): string;
+/** Get an array of chart color CSS variable references, cycling if needed */
+export declare function getChartColors(count: number): string[];
+/** Resolve a color prop — if it's a ChartColor token name, convert to var(); otherwise pass through */
+export declare function resolveColor(color: string | ChartColor | undefined, index?: number): string;
+//# sourceMappingURL=colors.d.ts.map

package/dist/ui/charts/_internal/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../src/ui/charts/_internal/colors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAazC,yDAAyD;AACzD,wBAAgB,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAEvD;AAED,6EAA6E;AAC7E,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAItD;AAED,uGAAuG;AACvG,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,EAAE,KAAK,GAAE,MAAU,GAAG,MAAM,CAI9F"}

package/dist/ui/charts/_internal/colors.js

@@ -0,0 +1,20 @@
+const t = [
+  "chart-1",
+  "chart-2",
+  "chart-3",
+  "chart-4",
+  "chart-5",
+  "chart-6",
+  "chart-7",
+  "chart-8"
+];
+function n(r) {
+  return `var(--${r})`;
+}
+function e(r, a = 0) {
+  return r ? t.includes(r) ? n(r) : r : n(t[a % t.length]);
+}
+export {
+  n as getChartColor,
+  e as resolveColor
+};

package/dist/ui/charts/_internal/grid-lines.d.ts

@@ -0,0 +1,16 @@
+import { ScaleLinear, ScaleTime } from 'd3-scale';
+type TickableScale = ScaleLinear<number, number> | ScaleTime<number, number>;
+interface GridLinesProps {
+    width: number;
+    height: number;
+    xScale?: TickableScale;
+    yScale?: TickableScale;
+    horizontal?: boolean;
+    vertical?: boolean;
+}
+export declare function GridLines({ width, height, xScale, yScale, horizontal, vertical, }: GridLinesProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace GridLines {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=grid-lines.d.ts.map

package/dist/ui/charts/_internal/grid-lines.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-lines.d.ts","sourceRoot":"","sources":["../../../../src/ui/charts/_internal/grid-lines.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEtD,KAAK,aAAa,GAAG,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAE5E,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAM,EACN,MAAM,EACN,MAAM,EACN,UAAiB,EACjB,QAAgB,GACjB,EAAE,cAAc,2CAiChB;yBAxCe,SAAS"}