@hirobius/design-system 0.18.0 → 0.19.1

package/dist/patterns.js

@@ -1,18 +1,21 @@
 'use client';
-import { A as T, D as F, F as L, C as $, G as R, H as A, J as P, K as j, E as D, L as E, M as H, N as W, O as z, P as _, R as B, Q as M, U as O, V as X, W as G, X as q, a8 as K, a9 as U, aa as J, ab as Q, ac as Y, ad as Z, af as ee, ag as ae, ah as re, ai as te, aj as se, ak as ie, al as oe, am as le, an as ce, ao as ne, ap as de, aq as he, ar as pe, as as ue, at as ve, au as me, av as fe } from "./chunks/activity-feed-C8_e-Btq.js";
-import { F as be, a as we, b as ye, u as xe } from "./chunks/form-DnGRy27o.js";
-import { jsxs as o, Fragment as m, jsx as e } from "react/jsx-runtime";
-import { useRef as c, useEffect as v } from "react";
-import d from "./tokens.js";
-const h = 280, b = 380, n = 24, f = 3.5, w = `
+import { S as I, C as u, a as _, b as V, G as E, T as S, A as p, B as w, E as P, c as z } from "./chunks/activity-feed-BGQ6v3wc.js";
+import { d as he, e as pe, f as ue, g as me, h as ge, i as fe, j as ve, D as ye, k as be, F as we, L as xe, N as ke, O as Se, P as Ce, R as Te, l as Ne, m as Ie, n as Ve, o as Ae, p as Me, q as Re, r as $e, s as Fe, t as je, u as De, v as He, w as Le, x as _e, y as Ee, z as Pe, H as ze, I as Be, J as We, K as Oe, M as Ge, Q as Ue, U as Xe, V as Ye, W as qe, X as Ke, Y as Je, Z as Qe, _ as Ze } from "./chunks/activity-feed-BGQ6v3wc.js";
+import { F as aa, b as ta, a as ra, u as ia } from "./chunks/form-COP3vK9_.js";
+import { jsxs as o, Fragment as A, jsx as e } from "react/jsx-runtime";
+import * as d from "react";
+import { useRef as x, useEffect as N } from "react";
+import v from "./tokens.js";
+import { cn as M } from "./cn.js";
+const C = 280, B = 380, k = 24, R = 3.5, W = `
   .hds-scr-outer {
     position: relative;
     overflow: hidden;
     width: 100%; /* audit-ok: percentage fill in CSS template */
-    --card-width: ${h}px;
-    --card-height: ${b}px;
-    --card-gap: ${n}px;
-    --visible-count: ${f};
+    --card-width: ${C}px;
+    --card-height: ${B}px;
+    --card-gap: ${k}px;
+    --visible-count: ${R};
   }
 
   /* Vertical scroll container — maps vertical scrolling to a horizontal strip */
@@ -60,7 +63,7 @@ const h = 280, b = 380, n = 24, f = 3.5, w = `
   .hds-scr-track {
     display: flex;
     align-items: center;
-    padding: 0 ${n}px;
+    padding: 0 ${k}px;
     gap: var(--card-gap);
     /* Wide enough to hold all cards plus padding */
     min-width: max-content;
@@ -82,7 +85,7 @@ const h = 280, b = 380, n = 24, f = 3.5, w = `
   .hds-scr-card-inner {
     width: 100%; /* audit-ok: percentage fill in CSS template */
     height: 100%; /* audit-ok: percentage fill in CSS template */
-    border-radius: ${d.borderRadius[8]};
+    border-radius: ${v.borderRadius[8]};
     background: var(--semantic-color-surface-raised);
     border: 1px solid var(--semantic-color-border-default);
     box-shadow: var(--semantic-shadow-subtle);
@@ -199,10 +202,10 @@ const h = 280, b = 380, n = 24, f = 3.5, w = `
     overflow-y: visible;
   }
   .hds-scr-outer[data-fallback="true"] .hds-scr-track {
-    padding: 12px ${n}px;
+    padding: 12px ${k}px;
   }
 `;
-function y() {
+function O() {
   return /* @__PURE__ */ e("div", { className: "hds-scr-cover-placeholder", "aria-hidden": "true", children: /* @__PURE__ */ o(
     "svg",
     {
@@ -248,36 +251,36 @@ function y() {
     }
   ) });
 }
-function x({ card: a, index: t, total: l }) {
-  const i = /* @__PURE__ */ o(m, { children: [
-    /* @__PURE__ */ e("div", { className: "hds-scr-cover", children: a.coverImage ? /* @__PURE__ */ e(
+function G({ card: r, index: a, total: s }) {
+  const t = /* @__PURE__ */ o(A, { children: [
+    /* @__PURE__ */ e("div", { className: "hds-scr-cover", children: r.coverImage ? /* @__PURE__ */ e(
       "img",
       {
-        src: a.coverImage,
-        alt: a.title,
-        loading: t < 4 ? "eager" : "lazy",
+        src: r.coverImage,
+        alt: r.title,
+        loading: a < 4 ? "eager" : "lazy",
         decoding: "async"
       }
-    ) : /* @__PURE__ */ e(y, {}) }),
+    ) : /* @__PURE__ */ e(O, {}) }),
     /* @__PURE__ */ o("div", { className: "hds-scr-meta", children: [
-      a.category && /* @__PURE__ */ e(
+      r.category && /* @__PURE__ */ e(
         "span",
         {
           style: {
-            ...d.typeStyles.eyebrow,
+            ...v.typeStyles.eyebrow,
             color: "var(--semantic-color-content-secondary)"
           },
-          children: a.category
+          children: r.category
         }
       ),
       /* @__PURE__ */ e(
         "span",
         {
           style: {
-            ...d.typeStyles.heading3,
+            ...v.typeStyles.heading3,
             color: "var(--semantic-color-content-primary)"
           },
-          children: a.title
+          children: r.title
         }
       )
     ] })
@@ -286,12 +289,12 @@ function x({ card: a, index: t, total: l }) {
     "div",
     {
       className: "hds-scr-card",
-      style: { "--card-index": t },
-      "aria-label": `${a.title}${a.category ? `, ${a.category}` : ""}, card ${t + 1} of ${l}`,
-      children: a.href ? /* @__PURE__ */ e(
+      style: { "--card-index": a },
+      "aria-label": `${r.title}${r.category ? `, ${r.category}` : ""}, card ${a + 1} of ${s}`,
+      children: r.href ? /* @__PURE__ */ e(
         "a",
         {
-          href: a.href,
+          href: r.href,
           className: "hds-focus hds-scr-card-inner",
           style: {
             display: "flex",
@@ -300,34 +303,34 @@ function x({ card: a, index: t, total: l }) {
             textDecoration: "none",
             color: "inherit"
           },
-          children: i
+          children: t
         }
-      ) : /* @__PURE__ */ e("div", { className: "hds-scr-card-inner", children: i })
+      ) : /* @__PURE__ */ e("div", { className: "hds-scr-card-inner", children: t })
     }
   );
 }
-function V({ cards: a }) {
-  const t = c(null), l = c(null), i = c(null), p = a.length, g = h * p + /* trailing breathing room */
-  h * f;
-  return v(() => {
-    const r = l.current, s = i.current;
-    if (!r || !s) return;
-    function u() {
-      !r || !s || (s.scrollLeft = r.scrollTop);
+function te({ cards: r }) {
+  const a = x(null), s = x(null), t = x(null), n = r.length, c = C * n + /* trailing breathing room */
+  C * R;
+  return N(() => {
+    const i = s.current, l = t.current;
+    if (!i || !l) return;
+    function h() {
+      !i || !l || (l.scrollLeft = i.scrollTop);
     }
-    return r.addEventListener("scroll", u, { passive: !0 }), () => {
-      r.removeEventListener("scroll", u);
+    return i.addEventListener("scroll", h, { passive: !0 }), () => {
+      i.removeEventListener("scroll", h);
     };
-  }, []), v(() => {
-    const r = t.current;
-    if (!r) return;
-    typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("animation-timeline", "scroll()") || r.setAttribute("data-fallback", "true");
-  }, []), /* @__PURE__ */ o(m, { children: [
-    /* @__PURE__ */ e("style", { dangerouslySetInnerHTML: { __html: w } }),
+  }, []), N(() => {
+    const i = a.current;
+    if (!i) return;
+    typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("animation-timeline", "scroll()") || i.setAttribute("data-fallback", "true");
+  }, []), /* @__PURE__ */ o(A, { children: [
+    /* @__PURE__ */ e("style", { dangerouslySetInnerHTML: { __html: W } }),
     /* @__PURE__ */ e(
       "div",
       {
-        ref: t,
+        ref: a,
         className: "hds-scr-outer",
         style: {
           height: "calc(var(--card-height) + 48px)"
@@ -337,7 +340,7 @@ function V({ cards: a }) {
         children: /* @__PURE__ */ o(
           "div",
           {
-            ref: l,
+            ref: s,
             className: "hds-scr-yscroll",
             role: "region",
             "aria-label": "Project cards, vertical scroll",
@@ -349,19 +352,19 @@ function V({ cards: a }) {
                 {
                   className: "hds-scr-spacer",
                   style: {
-                    "--hds-scr-spacer-height": `${g}px`
+                    "--hds-scr-spacer-height": `${c}px`
                   }
                 }
               ),
               /* @__PURE__ */ e(
                 "div",
                 {
-                  ref: i,
+                  ref: t,
                   className: "hds-scr-strip",
                   role: "region",
                   "aria-label": "Project cards, horizontal scroll",
                   tabIndex: 0,
-                  children: /* @__PURE__ */ e("div", { className: "hds-scr-track", role: "list", children: a.map((r, s) => /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(x, { card: r, index: s, total: p }) }, r.id)) })
+                  children: /* @__PURE__ */ e("div", { className: "hds-scr-track", role: "list", children: r.map((i, l) => /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(G, { card: i, index: l, total: n }) }, i.id)) })
                 }
               )
             ]
@@ -371,53 +374,233 @@ function V({ cards: a }) {
     )
   ] });
 }
+const re = /* @__PURE__ */ d.forwardRef(
+  function({ breadcrumb: a, title: s, status: t, actions: n, level: c = 1, className: i, ...l }, h) {
+    const g = `h${c}`;
+    return /* @__PURE__ */ e(
+      "header",
+      {
+        ref: h,
+        "data-hds-component": "PageHeader",
+        className: M("w-full", i),
+        ...l,
+        children: /* @__PURE__ */ o(I, { gap: "tight", children: [
+          a ? /* @__PURE__ */ e("div", { "data-slot": "breadcrumb", children: a }) : null,
+          /* @__PURE__ */ o(u, { gap: "normal", align: "start", justify: "space-between", children: [
+            /* @__PURE__ */ o(u, { gap: "tight", align: "center", children: [
+              /* @__PURE__ */ e(
+                g,
+                {
+                  style: {
+                    ...v.typeStyles.heading2,
+                    margin: 0,
+                    color: "var(--semantic-color-content-primary)"
+                  },
+                  children: s
+                }
+              ),
+              t ? /* @__PURE__ */ e("div", { "data-slot": "status", children: t }) : null
+            ] }),
+            n ? /* @__PURE__ */ e("div", { "data-slot": "actions", className: "ml-auto", children: /* @__PURE__ */ e(u, { gap: "tight", align: "center", justify: "end", children: n }) }) : null
+          ] })
+        ] })
+      }
+    );
+  }
+), U = 4, X = "calc(var(--primitive-size-96) + var(--primitive-size-24))", Y = " ", ie = /* @__PURE__ */ d.forwardRef(
+  function({ label: a, value: s, sub: t, tone: n = "neutral", style: c, ...i }, l) {
+    return /* @__PURE__ */ e(
+      _,
+      {
+        ref: l,
+        padding: "item",
+        "data-hds-component": "MetricTile",
+        "data-tone": n,
+        style: { minHeight: X, ...c },
+        ...i,
+        children: /* @__PURE__ */ e(
+          V.Metric,
+          {
+            label: a,
+            value: s,
+            sub: t ?? Y,
+            tone: n,
+            className: "px-0"
+          }
+        )
+      }
+    );
+  }
+);
+function $(r) {
+  return d.Children.toArray(r).reduce((a, s) => d.isValidElement(s) ? s.type === d.Fragment ? a + $(s.props.children) : a + 1 : a, 0);
+}
+const se = /* @__PURE__ */ d.forwardRef(
+  function({ children: a, ...s }, t) {
+    const n = Math.min(Math.max($(a), 1), U);
+    return /* @__PURE__ */ e("div", { ref: t, "data-hds-component": "MetricTiles", ...s, children: /* @__PURE__ */ e(E, { columns: n, gap: "tight", children: a }) });
+  }
+), ne = /* @__PURE__ */ d.forwardRef(
+  function({ primary: a, secondary: s, destructive: t, sticky: n = !1, className: c, style: i, ...l }, h) {
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        ref: h,
+        "data-hds-component": "FormActions",
+        "data-sticky": n ? "true" : void 0,
+        className: M(n && "border-t border-border bg-background py-3", c),
+        style: n ? { position: "sticky", bottom: 0, ...i } : i,
+        ...l,
+        children: /* @__PURE__ */ o(u, { gap: "tight", align: "center", justify: t ? "space-between" : "end", children: [
+          t ? /* @__PURE__ */ e("div", { "data-slot": "destructive", children: t }) : null,
+          /* @__PURE__ */ e("div", { "data-slot": "group", className: "ml-auto", children: /* @__PURE__ */ o(u, { gap: "tight", align: "center", justify: "end", children: [
+            s,
+            a
+          ] }) })
+        ] })
+      }
+    );
+  }
+), oe = /* @__PURE__ */ d.forwardRef(function({
+  title: a,
+  description: s,
+  actionLabel: t,
+  confirmLabel: n,
+  confirmBody: c,
+  onConfirm: i,
+  cancelLabel: l = "Cancel",
+  level: h = 2,
+  ...g
+}, y) {
+  const m = d.useId();
+  return /* @__PURE__ */ e(
+    "section",
+    {
+      ref: y,
+      "data-hds-component": "DestructiveSection",
+      "aria-labelledby": m,
+      ...g,
+      children: /* @__PURE__ */ e(V, { tone: "danger", children: /* @__PURE__ */ o(u, { gap: "normal", align: "center", justify: "space-between", children: [
+        /* @__PURE__ */ o("div", { "data-slot": "copy", className: "min-w-0 grow basis-64", children: [
+          /* @__PURE__ */ e(S, { id: m, as: `h${h}`, variant: "heading3", children: a }),
+          /* @__PURE__ */ e(S, { as: "p", variant: "caption", className: "text-muted-foreground", children: s })
+        ] }),
+        /* @__PURE__ */ e("div", { "data-slot": "action", className: "shrink-0", children: /* @__PURE__ */ o(p, { children: [
+          /* @__PURE__ */ e(p.Trigger, { asChild: !0, children: /* @__PURE__ */ e(w, { variant: "secondary", tone: "danger", children: t ?? n }) }),
+          /* @__PURE__ */ o(p.Content, { children: [
+            /* @__PURE__ */ o(p.Header, { children: [
+              /* @__PURE__ */ e(p.Title, { children: a }),
+              /* @__PURE__ */ e(p.Description, { children: c })
+            ] }),
+            /* @__PURE__ */ o(p.Footer, { children: [
+              /* @__PURE__ */ e(p.Cancel, { asChild: !0, children: /* @__PURE__ */ e(w, { variant: "secondary", children: l }) }),
+              /* @__PURE__ */ e(p.Action, { asChild: !0, children: /* @__PURE__ */ e(w, { variant: "primary", tone: "danger", onClick: i, children: n }) })
+            ] })
+          ] })
+        ] }) })
+      ] }) })
+    }
+  );
+}), q = "8rem", K = "6rem", le = /* @__PURE__ */ d.forwardRef(function({
+  title: a,
+  toolbar: s,
+  columns: t,
+  rows: n,
+  actionsLabel: c = "Actions",
+  emptyTitle: i = "Nothing here yet",
+  emptyDescription: l,
+  level: h = 2,
+  ...g
+}, y) {
+  const m = d.useId(), b = n.some((f) => f.actions != null), F = b ? [...t, { key: "__actions", label: c, align: "right", width: "max-content" }] : t, j = n.map((f) => ({
+    key: f.key,
+    cells: [
+      ...f.cells.map((H, L) => {
+        var T;
+        return {
+          slot: "custom",
+          content: H,
+          align: (T = t[L]) == null ? void 0 : T.align
+        };
+      }),
+      ...b ? [
+        {
+          slot: "action",
+          align: "right",
+          content: /* @__PURE__ */ e(u, { gap: "tight", align: "center", justify: "end", children: f.actions })
+        }
+      ] : []
+    ]
+  })), D = `calc(${t.length} * ${q}${b ? ` + ${K}` : ""})`;
+  return /* @__PURE__ */ e("section", { ref: y, "data-hds-component": "DataTableSection", "aria-labelledby": m, ...g, children: /* @__PURE__ */ o(I, { gap: "tight", children: [
+    /* @__PURE__ */ o(u, { gap: "normal", align: "center", justify: "space-between", children: [
+      /* @__PURE__ */ e(S, { id: m, as: `h${h}`, variant: "heading3", children: a }),
+      s ? /* @__PURE__ */ e("div", { "data-slot": "toolbar", className: "ml-auto", children: /* @__PURE__ */ e(u, { gap: "tight", align: "center", justify: "end", children: s }) }) : null
+    ] }),
+    n.length === 0 ? /* @__PURE__ */ e(P, { title: i, description: l }) : /* @__PURE__ */ e(
+      z,
+      {
+        columns: F,
+        rows: j,
+        minWidth: D,
+        labelledBy: m
+      }
+    )
+  ] }) });
+});
 export {
-  T as ActivityFeed,
-  F as AppShell,
-  L as AssetImg,
-  $ as Calendar,
-  R as Carousel,
-  A as CodeBlock,
-  P as CommandPalette,
-  j as DocLinkCard,
-  D as ErrorPattern,
-  E as FileInput,
-  be as Form,
-  we as FormField,
-  ye as FormFieldShell,
-  H as Lightbox,
-  W as NavItem,
-  z as OverflowList,
-  _ as Page,
-  B as Reveal,
-  M as SideNav,
-  V as StackedCardRail,
-  O as Stepper,
-  X as Toolbar,
-  G as TopNav,
-  q as TreeList,
-  K as activityAvatarVariants,
-  U as activityToneVariants,
-  J as appShellVariants,
-  Q as blockCodeTextVariants,
-  Y as blockContainerVariants,
-  Z as blockHeaderVariants,
-  ee as carouselControlVariants,
-  ae as chevronVariants,
-  re as cmdkDescriptionVariants,
-  te as cmdkKindBadgeVariants,
-  se as cmdkRowVariants,
-  ie as collapsibleToggleVariants,
-  oe as copyButtonVariants,
-  le as defaultActivityEvents,
-  ce as docLinkCardVariants,
-  ne as fileInputVariants,
-  de as inlineCodeTextVariants,
-  he as inlineWrapperVariants,
-  pe as navIndicatorVariants,
-  ue as navItemVariants,
-  ve as prePanelVariants,
-  me as sideNavVariants,
-  fe as stepMarkerVariants,
-  xe as useFieldWiring
+  he as ActivityFeed,
+  pe as AppShell,
+  ue as AssetImg,
+  me as Calendar,
+  ge as Carousel,
+  fe as CodeBlock,
+  ve as CommandPalette,
+  le as DataTableSection,
+  oe as DestructiveSection,
+  ye as DocLinkCard,
+  be as ErrorPattern,
+  we as FileInput,
+  aa as Form,
+  ne as FormActions,
+  ta as FormField,
+  ra as FormFieldShell,
+  xe as Lightbox,
+  ie as MetricTile,
+  se as MetricTiles,
+  ke as NavItem,
+  Se as OverflowList,
+  Ce as Page,
+  re as PageHeader,
+  Te as Reveal,
+  Ne as SideNav,
+  te as StackedCardRail,
+  Ie as Stepper,
+  Ve as Toolbar,
+  Ae as TopNav,
+  Me as TreeList,
+  Re as activityAvatarVariants,
+  $e as activityToneVariants,
+  Fe as appShellVariants,
+  je as blockCodeTextVariants,
+  De as blockContainerVariants,
+  He as blockHeaderVariants,
+  Le as carouselControlVariants,
+  _e as chevronVariants,
+  Ee as cmdkDescriptionVariants,
+  Pe as cmdkKindBadgeVariants,
+  ze as cmdkRowVariants,
+  Be as collapsibleToggleVariants,
+  We as copyButtonVariants,
+  Oe as defaultActivityEvents,
+  Ge as docLinkCardVariants,
+  Ue as fileInputVariants,
+  Xe as inlineCodeTextVariants,
+  Ye as inlineWrapperVariants,
+  qe as navIndicatorVariants,
+  Ke as navItemVariants,
+  Je as prePanelVariants,
+  Qe as sideNavVariants,
+  Ze as stepMarkerVariants,
+  ia as useFieldWiring
 };

package/dist/static.css

@@ -137,9 +137,9 @@
   height: 100%;
   flex-direction: column;
   box-sizing: border-box;
-  border-radius: var(
-    --primitive-radius-8
-  ); /* tier-ok: REACT_COMPONENTS.md Card recipe mandates var(--primitive-radius-8) directly (no semantic radius alias for the 8px card corner) */
+  border-radius: calc(
+    var(--role-radius) + 4px
+  ); /* tier-ok: same container radius as the React Card's rounded-lg (role radius + 4px); the offset has no token */
   background-color: var(--role-card);
   color: var(--role-card-foreground);
   border-style: solid;