@orion-ds/react 4.9.2 → 4.9.3

package/dist/components/List/List.types.d.ts

@@ -0,0 +1,113 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * List size variants
+ */
+export type ListSize = "sm" | "md" | "lg";
+/**
+ * List variant
+ */
+export type ListVariant = "default" | "bordered" | "divided";
+/**
+ * List item
+ */
+export interface ListItem {
+    /**
+     * Unique identifier
+     */
+    id: string;
+    /**
+     * Primary content (text or element)
+     */
+    primary: ReactNode;
+    /**
+     * Secondary content (smaller text below primary)
+     */
+    secondary?: ReactNode;
+    /**
+     * Icon or avatar on the left
+     */
+    leading?: ReactNode;
+    /**
+     * Content on the right (icon, badge, etc.)
+     */
+    trailing?: ReactNode;
+    /**
+     * Whether this item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether this item is selected (for selectable lists)
+     */
+    selected?: boolean;
+    /**
+     * Click handler for the item
+     */
+    onClick?: () => void;
+    /**
+     * Additional class name for the item
+     */
+    className?: string;
+}
+/**
+ * List component props
+ *
+ * @example
+ * ```tsx
+ * <List
+ *   items={[
+ *     { id: '1', primary: 'Item 1', secondary: 'Description' },
+ *     { id: '2', primary: 'Item 2', leading: <UserIcon /> },
+ *   ]}
+ * />
+ * ```
+ */
+export interface ListProps extends Omit<HTMLAttributes<HTMLUListElement>, "onSelect"> {
+    /**
+     * List items
+     */
+    items: ListItem[];
+    /**
+     * Size variant
+     * @default 'md'
+     */
+    size?: ListSize;
+    /**
+     * Visual variant
+     * @default 'default'
+     */
+    variant?: ListVariant;
+    /**
+     * Whether the list items are interactive (hoverable/clickable)
+     * @default false
+     */
+    interactive?: boolean;
+    /**
+     * Whether items can be selected
+     * @default false
+     */
+    selectable?: boolean;
+    /**
+     * Callback when an item is selected
+     */
+    onSelect?: (item: ListItem) => void;
+    /**
+     * Render custom list item content
+     */
+    renderItem?: (item: ListItem, index: number) => ReactNode;
+    /**
+     * Custom empty state when no items
+     */
+    emptyContent?: ReactNode;
+}
+/**
+ * List Item component props (internal)
+ */
+export interface ListItemProps {
+    item: ListItem;
+    size: ListSize;
+    interactive: boolean;
+    selectable: boolean;
+    onClick?: () => void;
+}
+//# sourceMappingURL=List.types.d.ts.map

package/dist/components/List/List.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.types.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAE7D;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,cAAc,CAAC,gBAAgB,CAAC,EAChC,UAAU,CACX;IACC;;OAEG;IACH,KAAK,EAAE,QAAQ,EAAE,CAAC;IAElB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAEpC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAE1D;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,QAAQ,CAAC;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}

package/dist/components/List/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * List Component - Vertical item list display.
+ *
+ * @example
+ * ```tsx
+ * import { List } from '@orion-ds/react';
+ * import { User, Settings, LogOut } from 'lucide-react';
+ *
+ * <List
+ *   items={[
+ *     { id: '1', label: 'Profile', icon: <User size={18} />, onClick: goToProfile },
+ *     { id: '2', label: 'Settings', icon: <Settings size={18} />, onClick: goToSettings },
+ *     { id: '3', label: 'Log out', icon: <LogOut size={18} />, onClick: handleLogout },
+ *   ]}
+ * />
+ * ```
+ */
+export { List } from './List';
+export type { ListProps, ListItem, ListSize, ListVariant } from './List.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/List/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/List/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/MetricCards/MetricCards.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),M=require("react"),b=require("lucide-react"),s=require("./MetricCards.module.css.cjs"),y=({data:a})=>{if(!a||a.length<2)return null;const c=Math.max(...a),d=Math.min(...a),u=c-d||1,t=a[0],l=a[a.length-1],i=24,r=64,n=r/(a.length-1),o=a.map((f,h)=>{const m=h*n,j=i-(f-d)/u*i;return`${m},${j}`}).join(" "),x=t!==void 0&&l!==void 0&&l>=t;return e.jsx("svg",{className:s.default.sparkline,width:r,height:i,viewBox:`0 0 ${r} ${i}`,children:e.jsx("polyline",{fill:"none",stroke:x?"var(--text-success)":"var(--text-error)",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",points:o})})},N=M.forwardRef(({metric:a,variant:c="default",loading:d=!1,className:u,...t},l)=>{const{label:i,value:r,change:n,icon:o,sparkline:x,href:f,onClick:h,description:m,loading:j}=a,p=d||j,C=f||h,v=[s.default.card,s.default[`variant-${c}`],C&&s.default.interactive,p&&s.default.loading,u].filter(Boolean).join(" "),g=e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:s.default.cardHeader,children:[o&&e.jsx("span",{className:s.default.cardIcon,children:o}),e.jsx("span",{className:s.default.label,children:i})]}),e.jsx("div",{className:s.default.cardBody,children:p?e.jsx("div",{className:s.default.skeleton}):e.jsxs(e.Fragment,{children:[e.jsx("span",{className:s.default.value,children:r}),x&&c==="detailed"&&e.jsx(y,{data:x})]})}),(n||m)&&!p&&e.jsxs("div",{className:s.default.cardFooter,children:[n&&e.jsxs("span",{className:`${s.default.change} ${n.positive?s.default.positive:s.default.negative}`,children:[n.positive?e.jsx(b.TrendingUp,{size:12}):e.jsx(b.TrendingDown,{size:12}),e.jsx("span",{children:n.value}),n.label&&e.jsx("span",{className:s.default.changeLabel,children:n.label})]}),m&&c==="detailed"&&e.jsx("span",{className:s.default.description,children:m})]})]});return f?e.jsx("a",{ref:l,href:f,className:v,...t,children:g}):h?e.jsx("button",{ref:l,type:"button",onClick:h,className:v,...t,children:g}):e.jsx("div",{ref:l,className:v,...t,children:g})});N.displayName="MetricCard";const k=M.forwardRef(({metrics:a,columns:c=4,variant:d="default",loading:u=!1,className:t,...l},i)=>{const r=[s.default.metricCards,s.default[`cols-${c}`],t].filter(Boolean).join(" ");return e.jsx("div",{ref:i,className:r,...l,children:a.map((n,o)=>e.jsx(N,{metric:n,variant:d,loading:u},n.id||n.label||o))})});k.displayName="MetricCards";exports.MetricCard=N;exports.MetricCards=k;

package/dist/components/MetricCards/MetricCards.d.ts

@@ -0,0 +1,6 @@
+import { MetricCardsProps, MetricCardProps } from './MetricCards.types';
+
+declare const MetricCard: import('react').ForwardRefExoticComponent<MetricCardProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const MetricCards: import('react').ForwardRefExoticComponent<MetricCardsProps & import('react').RefAttributes<HTMLDivElement>>;
+export { MetricCard };
+//# sourceMappingURL=MetricCards.d.ts.map

package/dist/components/MetricCards/MetricCards.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricCards.d.ts","sourceRoot":"","sources":["../../../src/components/MetricCards/MetricCards.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAiD7E,QAAA,MAAM,UAAU,4GA4Gf,CAAC;AAKF,eAAO,MAAM,WAAW,6GAiCvB,CAAC;AAIF,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/MetricCards/MetricCards.mjs

@@ -0,0 +1,125 @@
+import { jsxs as u, Fragment as b, jsx as n } from "react/jsx-runtime";
+import { forwardRef as $ } from "react";
+import { TrendingUp as C, TrendingDown as M } from "lucide-react";
+import e from "./MetricCards.module.css.mjs";
+const L = ({ data: s }) => {
+  if (!s || s.length < 2) return null;
+  const r = Math.max(...s), o = Math.min(...s), m = r - o || 1, a = s[0], l = s[s.length - 1], c = 24, t = 64, i = t / (s.length - 1), d = s.map((h, p) => {
+    const v = p * i, g = c - (h - o) / m * c;
+    return `${v},${g}`;
+  }).join(" "), N = a !== void 0 && l !== void 0 && l >= a;
+  return /* @__PURE__ */ n(
+    "svg",
+    {
+      className: e.sparkline,
+      width: t,
+      height: c,
+      viewBox: `0 0 ${t} ${c}`,
+      children: /* @__PURE__ */ n(
+        "polyline",
+        {
+          fill: "none",
+          stroke: N ? "var(--text-success)" : "var(--text-error)",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          points: d
+        }
+      )
+    }
+  );
+}, y = $(
+  ({ metric: s, variant: r = "default", loading: o = !1, className: m, ...a }, l) => {
+    const {
+      label: c,
+      value: t,
+      change: i,
+      icon: d,
+      sparkline: N,
+      href: h,
+      onClick: p,
+      description: v,
+      loading: g
+    } = s, f = o || g, j = h || p, k = [
+      e.card,
+      e[`variant-${r}`],
+      j && e.interactive,
+      f && e.loading,
+      m
+    ].filter(Boolean).join(" "), x = /* @__PURE__ */ u(b, { children: [
+      /* @__PURE__ */ u("div", { className: e.cardHeader, children: [
+        d && /* @__PURE__ */ n("span", { className: e.cardIcon, children: d }),
+        /* @__PURE__ */ n("span", { className: e.label, children: c })
+      ] }),
+      /* @__PURE__ */ n("div", { className: e.cardBody, children: f ? /* @__PURE__ */ n("div", { className: e.skeleton }) : /* @__PURE__ */ u(b, { children: [
+        /* @__PURE__ */ n("span", { className: e.value, children: t }),
+        N && r === "detailed" && /* @__PURE__ */ n(L, { data: N })
+      ] }) }),
+      (i || v) && !f && /* @__PURE__ */ u("div", { className: e.cardFooter, children: [
+        i && /* @__PURE__ */ u(
+          "span",
+          {
+            className: `${e.change} ${i.positive ? e.positive : e.negative}`,
+            children: [
+              i.positive ? /* @__PURE__ */ n(C, { size: 12 }) : /* @__PURE__ */ n(M, { size: 12 }),
+              /* @__PURE__ */ n("span", { children: i.value }),
+              i.label && /* @__PURE__ */ n("span", { className: e.changeLabel, children: i.label })
+            ]
+          }
+        ),
+        v && r === "detailed" && /* @__PURE__ */ n("span", { className: e.description, children: v })
+      ] })
+    ] });
+    return h ? /* @__PURE__ */ n(
+      "a",
+      {
+        ref: l,
+        href: h,
+        className: k,
+        ...a,
+        children: x
+      }
+    ) : p ? /* @__PURE__ */ n(
+      "button",
+      {
+        ref: l,
+        type: "button",
+        onClick: p,
+        className: k,
+        ...a,
+        children: x
+      }
+    ) : /* @__PURE__ */ n("div", { ref: l, className: k, ...a, children: x });
+  }
+);
+y.displayName = "MetricCard";
+const w = $(
+  ({
+    metrics: s,
+    columns: r = 4,
+    variant: o = "default",
+    loading: m = !1,
+    className: a,
+    ...l
+  }, c) => {
+    const t = [
+      e.metricCards,
+      e[`cols-${r}`],
+      a
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ n("div", { ref: c, className: t, ...l, children: s.map((i, d) => /* @__PURE__ */ n(
+      y,
+      {
+        metric: i,
+        variant: o,
+        loading: m
+      },
+      i.id || i.label || d
+    )) });
+  }
+);
+w.displayName = "MetricCards";
+export {
+  y as MetricCard,
+  w as MetricCards
+};

package/dist/components/MetricCards/MetricCards.module.css

@@ -0,0 +1 @@
+._metricCards_11kio_8{display:grid;gap:var(--mode-spacing-element)}._cols-2_11kio_13{grid-template-columns:repeat(2,1fr)}._cols-3_11kio_17{grid-template-columns:repeat(3,1fr)}._cols-4_11kio_21{grid-template-columns:repeat(4,1fr)}._cols-5_11kio_25{grid-template-columns:repeat(5,1fr)}._card_11kio_33{display:flex;flex-direction:column;gap:var(--spacing-2);padding:var(--mode-spacing-element);background:var(--surface-base);border:1px solid var(--border-subtle);border-radius:var(--radius-control);text-decoration:none;color:inherit;box-shadow:var(--mode-shadow-default);transition:box-shadow var(--mode-hover-duration),border-color var(--mode-hover-duration)}._interactive_11kio_49{cursor:pointer}._interactive_11kio_49:hover{border-color:var(--border-moderate);box-shadow:var(--mode-shadow-hover)}._interactive_11kio_49:focus-visible{outline:2px solid var(--interactive-primary);outline-offset:2px}._loading_11kio_63{pointer-events:none}._cardHeader_11kio_71{display:flex;align-items:center;gap:var(--spacing-2)}._cardIcon_11kio_77{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--surface-subtle);border-radius:var(--radius-sm);color:var(--text-secondary)}._label_11kio_88{font-family:var(--font-secondary);font-size:var(--font-size-13);font-weight:var(--font-weight-medium);color:var(--text-secondary);line-height:var(--line-height-tight)}._cardBody_11kio_100{display:flex;align-items:baseline;gap:var(--spacing-4);min-height:36px}._value_11kio_107{font-family:var(--font-secondary);font-size:clamp(1.5rem,2vw,1.75rem);font-weight:600;color:var(--text-primary);line-height:1;letter-spacing:-.02em}._skeleton_11kio_116{width:100px;height:32px;background:var(--surface-subtle);border-radius:var(--radius-sm);animation:_pulse_11kio_1 1.5s ease-in-out infinite}@keyframes _pulse_11kio_1{0%,to{opacity:1}50%{opacity:.5}}._sparkline_11kio_134{flex-shrink:0;opacity:.8}._cardFooter_11kio_143{display:flex;flex-direction:column;gap:var(--spacing-1);margin-top:var(--spacing-1)}._change_11kio_150{display:inline-flex;align-items:center;gap:var(--spacing-1);font-family:var(--font-secondary);font-size:var(--font-size-12);font-weight:var(--font-weight-medium)}._positive_11kio_159{color:var(--text-success)}._negative_11kio_163{color:var(--text-error)}._changeLabel_11kio_167{color:var(--text-tertiary);font-weight:var(--font-weight-normal);margin-left:var(--spacing-1)}._description_11kio_173{font-family:var(--font-secondary);font-size:var(--font-size-12);color:var(--text-tertiary);line-height:var(--line-height-relaxed)}._variant-compact_11kio_184{padding:var(--spacing-3);gap:var(--spacing-1)}._variant-compact_11kio_184 ._cardIcon_11kio_77{width:24px;height:24px}._variant-compact_11kio_184 ._label_11kio_88{font-size:var(--font-size-12)}._variant-compact_11kio_184 ._cardBody_11kio_100{min-height:28px}._variant-compact_11kio_184 ._value_11kio_107{font-size:var(--font-size-20)}._variant-compact_11kio_184 ._change_11kio_150{font-size:var(--font-size-11)}._variant-detailed_11kio_214{padding:var(--spacing-5);gap:var(--spacing-3)}._variant-detailed_11kio_214 ._cardIcon_11kio_77{width:40px;height:40px}._variant-detailed_11kio_214 ._cardBody_11kio_100{justify-content:space-between}._variant-detailed_11kio_214 ._value_11kio_107{font-size:var(--font-size-32)}@media(max-width:1200px){._cols-5_11kio_25{grid-template-columns:repeat(3,1fr)}._cols-4_11kio_21{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){._cols-5_11kio_25,._cols-4_11kio_21,._cols-3_11kio_17{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){._cols-5_11kio_25,._cols-4_11kio_21,._cols-3_11kio_17,._cols-2_11kio_13{grid-template-columns:1fr}._card_11kio_33{padding:var(--spacing-4)}}

package/dist/components/MetricCards/MetricCards.module.css.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="_metricCards_11kio_8",o="_card_11kio_33",a="_interactive_11kio_49",c="_loading_11kio_63",i="_cardHeader_11kio_71",_="_cardIcon_11kio_77",t="_label_11kio_88",n="_cardBody_11kio_100",r="_value_11kio_107",s="_skeleton_11kio_116",l="_pulse_11kio_1",d="_sparkline_11kio_134",k="_cardFooter_11kio_143",v="_change_11kio_150",p="_positive_11kio_159",g="_negative_11kio_163",u="_changeLabel_11kio_167",b="_description_11kio_173",h={metricCards:e,"cols-2":"_cols-2_11kio_13","cols-3":"_cols-3_11kio_17","cols-4":"_cols-4_11kio_21","cols-5":"_cols-5_11kio_25",card:o,interactive:a,loading:c,cardHeader:i,cardIcon:_,label:t,cardBody:n,value:r,skeleton:s,pulse:l,sparkline:d,cardFooter:k,change:v,positive:p,negative:g,changeLabel:u,description:b,"variant-compact":"_variant-compact_11kio_184","variant-detailed":"_variant-detailed_11kio_214"};exports.card=o;exports.cardBody=n;exports.cardFooter=k;exports.cardHeader=i;exports.cardIcon=_;exports.change=v;exports.changeLabel=u;exports.default=h;exports.description=b;exports.interactive=a;exports.label=t;exports.loading=c;exports.metricCards=e;exports.negative=g;exports.positive=p;exports.pulse=l;exports.skeleton=s;exports.sparkline=d;exports.value=r;

package/dist/components/MetricCards/MetricCards.module.css.mjs

@@ -0,0 +1,47 @@
+const o = "_metricCards_11kio_8", _ = "_card_11kio_33", c = "_interactive_11kio_49", e = "_loading_11kio_63", a = "_cardHeader_11kio_71", i = "_cardIcon_11kio_77", t = "_label_11kio_88", n = "_cardBody_11kio_100", s = "_value_11kio_107", r = "_skeleton_11kio_116", l = "_pulse_11kio_1", d = "_sparkline_11kio_134", k = "_cardFooter_11kio_143", v = "_change_11kio_150", p = "_positive_11kio_159", g = "_negative_11kio_163", u = "_changeLabel_11kio_167", b = "_description_11kio_173", h = {
+  metricCards: o,
+  "cols-2": "_cols-2_11kio_13",
+  "cols-3": "_cols-3_11kio_17",
+  "cols-4": "_cols-4_11kio_21",
+  "cols-5": "_cols-5_11kio_25",
+  card: _,
+  interactive: c,
+  loading: e,
+  cardHeader: a,
+  cardIcon: i,
+  label: t,
+  cardBody: n,
+  value: s,
+  skeleton: r,
+  pulse: l,
+  sparkline: d,
+  cardFooter: k,
+  change: v,
+  positive: p,
+  negative: g,
+  changeLabel: u,
+  description: b,
+  "variant-compact": "_variant-compact_11kio_184",
+  "variant-detailed": "_variant-detailed_11kio_214"
+};
+export {
+  _ as card,
+  n as cardBody,
+  k as cardFooter,
+  a as cardHeader,
+  i as cardIcon,
+  v as change,
+  u as changeLabel,
+  h as default,
+  b as description,
+  c as interactive,
+  t as label,
+  e as loading,
+  o as metricCards,
+  g as negative,
+  p as positive,
+  l as pulse,
+  r as skeleton,
+  d as sparkline,
+  s as value
+};

package/dist/components/MetricCards/MetricCards.types.d.ts

@@ -0,0 +1,134 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Trend indicator for a metric
+ */
+export interface MetricTrend {
+    /**
+     * Trend value (e.g., "+12%", "-5%")
+     */
+    value: string;
+    /**
+     * Whether the trend is positive
+     * @default true
+     */
+    positive?: boolean;
+    /**
+     * Comparison period label (e.g., "vs last month")
+     */
+    label?: string;
+}
+/**
+ * Sparkline data point
+ */
+export type SparklineData = number[];
+/**
+ * Individual metric item
+ */
+export interface MetricItem {
+    /**
+     * Unique identifier
+     */
+    id?: string;
+    /**
+     * Metric label
+     */
+    label: string;
+    /**
+     * Main value (e.g., "$12,345", "89%", "1,234")
+     */
+    value: string | number;
+    /**
+     * Optional change/trend indicator
+     */
+    change?: MetricTrend;
+    /**
+     * Optional icon element
+     */
+    icon?: ReactNode;
+    /**
+     * Optional sparkline data
+     */
+    sparkline?: SparklineData;
+    /**
+     * Optional link to detailed view
+     */
+    href?: string;
+    /**
+     * Click handler (alternative to href)
+     */
+    onClick?: () => void;
+    /**
+     * Additional description
+     */
+    description?: string;
+    /**
+     * Loading state for this metric
+     */
+    loading?: boolean;
+}
+/**
+ * MetricCards column count
+ */
+export type MetricCardsColumns = 2 | 3 | 4 | 5;
+/**
+ * MetricCards visual variant
+ */
+export type MetricCardsVariant = "default" | "compact" | "detailed";
+/**
+ * MetricCards section props
+ *
+ * @example
+ * ```tsx
+ * <MetricCards
+ *   metrics={[
+ *     { label: 'Revenue', value: '$12,345', change: { value: '+12%', positive: true } },
+ *     { label: 'Users', value: '1,234', change: { value: '+5%', positive: true } },
+ *     { label: 'Conversion', value: '3.2%', change: { value: '-0.5%', positive: false } }
+ *   ]}
+ *   columns={3}
+ * />
+ * ```
+ */
+export interface MetricCardsProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Array of metric items
+     */
+    metrics: MetricItem[];
+    /**
+     * Number of grid columns
+     * @default 4
+     */
+    columns?: MetricCardsColumns;
+    /**
+     * Visual variant
+     * - default: Standard cards with borders
+     * - compact: Smaller padding and text
+     * - detailed: Includes sparklines and descriptions
+     * @default 'default'
+     */
+    variant?: MetricCardsVariant;
+    /**
+     * Loading state for all cards
+     * @default false
+     */
+    loading?: boolean;
+}
+/**
+ * Individual MetricCard props (internal component)
+ */
+export interface MetricCardProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Metric data
+     */
+    metric: MetricItem;
+    /**
+     * Visual variant
+     */
+    variant?: MetricCardsVariant;
+    /**
+     * Loading state
+     */
+    loading?: boolean;
+}
+//# sourceMappingURL=MetricCards.types.d.ts.map

package/dist/components/MetricCards/MetricCards.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricCards.types.d.ts","sourceRoot":"","sources":["../../../src/components/MetricCards/MetricCards.types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,EAAE,CAAC;AAErC;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE/C;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAEpE;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE;;OAEG;IACH,OAAO,EAAE,UAAU,EAAE,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAE7B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAE7B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE;;OAEG;IACH,MAAM,EAAE,UAAU,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAE7B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/components/MetricCards/index.d.ts

@@ -0,0 +1,3 @@
+export { MetricCards, MetricCard } from './MetricCards';
+export type { MetricCardsProps, MetricCardProps, MetricItem, MetricTrend, SparklineData, MetricCardsColumns, MetricCardsVariant, } from './MetricCards.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MetricCards/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MetricCards/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACxD,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,UAAU,EACV,WAAW,EACX,aAAa,EACb,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,qBAAqB,CAAC"}

package/dist/components/Modal/Modal.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),n=require("react"),o=require("./Modal.module.css.cjs"),r=({open:e,onClose:a,size:t="md",closeOnBackdrop:m=!0,closeOnEscape:s=!0,showCloseButton:f=!0,children:y,className:v})=>{if(n.useEffect(()=>{if(!e||!s)return;const d=b=>{b.key==="Escape"&&a()};return document.addEventListener("keydown",d),()=>document.removeEventListener("keydown",d)},[e,s,a]),n.useEffect(()=>(e?document.body.style.overflow="hidden":document.body.style.overflow="",()=>{document.body.style.overflow=""}),[e]),!e)return null;const N=[o.default.modal,o.default[t],v].filter(Boolean).join(" "),j=d=>{m&&d.target===d.currentTarget&&a()};return l.jsx("div",{className:o.default.backdrop,onClick:j,role:"dialog","aria-modal":"true",children:l.jsxs("div",{className:N,children:[f&&l.jsx("button",{type:"button",className:o.default.closeButton,onClick:a,"aria-label":"Close modal",style:{position:"absolute",top:"var(--spacing-4)",right:"var(--spacing-4)"},children:"×"}),y]})})},i=({className:e,children:a})=>{const t=[o.default.header,e].filter(Boolean).join(" ");return l.jsx("div",{className:t,children:a})},c=({className:e,children:a})=>{const t=[o.default.body,e].filter(Boolean).join(" ");return l.jsx("div",{className:t,children:a})},u=({className:e,children:a})=>{const t=[o.default.footer,e].filter(Boolean).join(" ");return l.jsx("div",{className:t,children:a})};r.Header=i;r.Body=c;r.Footer=u;r.displayName="Modal";i.displayName="Modal.Header";c.displayName="Modal.Body";u.displayName="Modal.Footer";exports.Modal=r;

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { ModalProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps } from './Modal.types';
+
+export declare const Modal: React.FC<ModalProps> & {
+    Header: React.FC<ModalHeaderProps>;
+    Body: React.FC<ModalBodyProps>;
+    Footer: React.FC<ModalFooterProps>;
+};
+//# sourceMappingURL=Modal.d.ts.map

package/dist/components/Modal/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,KAAK,EACV,UAAU,EACV,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EACjB,MAAM,eAAe,CAAC;AAIvB,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG;IACzC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC;IACnC,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;IAC/B,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC;CA+EpC,CAAC"}

package/dist/components/Modal/Modal.mjs

@@ -0,0 +1,72 @@
+import { jsx as l, jsxs as B } from "react/jsx-runtime";
+import { useEffect as n } from "react";
+import t from "./Modal.module.css.mjs";
+const s = ({
+  open: e,
+  onClose: o,
+  size: a = "md",
+  closeOnBackdrop: u = !0,
+  closeOnEscape: d = !0,
+  showCloseButton: y = !0,
+  children: f,
+  className: v
+}) => {
+  if (n(() => {
+    if (!e || !d) return;
+    const r = (b) => {
+      b.key === "Escape" && o();
+    };
+    return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
+  }, [e, d, o]), n(() => (e ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
+    document.body.style.overflow = "";
+  }), [e]), !e) return null;
+  const N = [t.modal, t[a], v].filter(Boolean).join(" "), p = (r) => {
+    u && r.target === r.currentTarget && o();
+  };
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: t.backdrop,
+      onClick: p,
+      role: "dialog",
+      "aria-modal": "true",
+      children: /* @__PURE__ */ B("div", { className: N, children: [
+        y && /* @__PURE__ */ l(
+          "button",
+          {
+            type: "button",
+            className: t.closeButton,
+            onClick: o,
+            "aria-label": "Close modal",
+            style: {
+              position: "absolute",
+              top: "var(--spacing-4)",
+              right: "var(--spacing-4)"
+            },
+            children: "×"
+          }
+        ),
+        f
+      ] })
+    }
+  );
+}, i = ({ className: e, children: o }) => {
+  const a = [t.header, e].filter(Boolean).join(" ");
+  return /* @__PURE__ */ l("div", { className: a, children: o });
+}, c = ({ className: e, children: o }) => {
+  const a = [t.body, e].filter(Boolean).join(" ");
+  return /* @__PURE__ */ l("div", { className: a, children: o });
+}, m = ({ className: e, children: o }) => {
+  const a = [t.footer, e].filter(Boolean).join(" ");
+  return /* @__PURE__ */ l("div", { className: a, children: o });
+};
+s.Header = i;
+s.Body = c;
+s.Footer = m;
+s.displayName = "Modal";
+i.displayName = "Modal.Header";
+c.displayName = "Modal.Body";
+m.displayName = "Modal.Footer";
+export {
+  s as Modal
+};

package/dist/components/Modal/Modal.module.css

@@ -0,0 +1 @@
+._backdrop_cst6l_8{position:fixed;inset:0;z-index:var(--z-modal-backdrop);display:flex;align-items:center;justify-content:center;background:var(--surface-overlay);-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm));animation:_fadeIn_cst6l_1 .2s ease;padding:var(--spacing-4);overflow-y:auto}@keyframes _fadeIn_cst6l_1{0%{opacity:0}to{opacity:1}}._modal_cst6l_32{position:relative;display:flex;flex-direction:column;width:100%;max-height:calc(100vh - var(--spacing-8));background:var(--surface-base);border-radius:var(--radius-container);box-shadow:var(--shadow-xl);animation:_slideUp_cst6l_1 .2s ease}@keyframes _slideUp_cst6l_1{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){._backdrop_cst6l_8,._modal_cst6l_32{animation:none}}._sm_cst6l_67{max-width:400px}._md_cst6l_71{max-width:560px}._lg_cst6l_75{max-width:720px}._xl_cst6l_79{max-width:960px}._full_cst6l_83{max-width:100%;margin:var(--spacing-4)}._header_cst6l_93{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-6);border-bottom:1px solid var(--border-subtle);font-size:var(--font-size-20);font-weight:600;color:var(--text-primary)}._closeButton_cst6l_105{display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin-left:var(--spacing-4);flex-shrink:0;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-tertiary);cursor:pointer;font-size:var(--font-size-20);line-height:1;transition:all var(--transition-fast)}._closeButton_cst6l_105:hover{background:var(--interactive-ghost-hover);color:var(--text-primary)}._closeButton_cst6l_105:active{transform:scale(.95)}._closeButton_cst6l_105:focus-visible{outline:2px solid var(--interactive-primary);outline-offset:2px}._body_cst6l_145{padding:var(--spacing-6);overflow-y:auto;flex:1;color:var(--text-primary)}._footer_cst6l_153{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing-3);padding:var(--spacing-6);border-top:1px solid var(--border-subtle)}

package/dist/components/Modal/Modal.module.css.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l="_backdrop_cst6l_8",t="_fadeIn_cst6l_1",o="_modal_cst6l_32",s="_slideUp_cst6l_1",_="_sm_cst6l_67",e="_md_cst6l_71",c="_lg_cst6l_75",d="_xl_cst6l_79",n="_full_cst6l_83",a="_header_cst6l_93",r="_closeButton_cst6l_105",u="_body_cst6l_145",f="_footer_cst6l_153",m={backdrop:l,fadeIn:t,modal:o,slideUp:s,sm:_,md:e,lg:c,xl:d,full:n,header:a,closeButton:r,body:u,footer:f};exports.backdrop=l;exports.body=u;exports.closeButton=r;exports.default=m;exports.fadeIn=t;exports.footer=f;exports.full=n;exports.header=a;exports.lg=c;exports.md=e;exports.modal=o;exports.slideUp=s;exports.sm=_;exports.xl=d;

package/dist/components/Modal/Modal.module.css.mjs

@@ -0,0 +1,31 @@
+const s = "_backdrop_cst6l_8", t = "_fadeIn_cst6l_1", _ = "_modal_cst6l_32", l = "_slideUp_cst6l_1", o = "_sm_cst6l_67", c = "_md_cst6l_71", d = "_lg_cst6l_75", e = "_xl_cst6l_79", n = "_full_cst6l_83", a = "_header_cst6l_93", f = "_closeButton_cst6l_105", r = "_body_cst6l_145", m = "_footer_cst6l_153", p = {
+  backdrop: s,
+  fadeIn: t,
+  modal: _,
+  slideUp: l,
+  sm: o,
+  md: c,
+  lg: d,
+  xl: e,
+  full: n,
+  header: a,
+  closeButton: f,
+  body: r,
+  footer: m
+};
+export {
+  s as backdrop,
+  r as body,
+  f as closeButton,
+  p as default,
+  t as fadeIn,
+  m as footer,
+  n as full,
+  a as header,
+  d as lg,
+  c as md,
+  _ as modal,
+  l as slideUp,
+  o as sm,
+  e as xl
+};