@hirobius/design-system 0.13.1 → 0.15.0

package/README.md

@@ -14,7 +14,7 @@ A publishable React + TypeScript component library backed by a governed design-t
 
 - **108** public component modules, exported from `src/index.ts`
 - **362** DTCG tokens in `hirobius.tokens.json`, compiled to CSS variables and TypeScript constants
-- **442** Storybook stories in **112** story files, reviewed visually in Chromatic
+- **447** Storybook stories in **113** story files, reviewed visually in Chromatic
 
 <!-- auto:end:front-door-counts -->
 
@@ -153,11 +153,54 @@ Source-of-truth files:
 
 Each component has one Figma source: `figmaUrl` in `public/hds-manifest.json`, which `pnpm manifest:generate` sets from the `@figma` tag in the component JSDoc. `pnpm figma:links` keeps this table current and Storybook reads the same field (`parameters.design`). The Figma-side links (dev resources and component descriptions) exist only once someone runs their steps in [`figma/README.md`](figma/README.md).
 
-**1 of 120** components link a Figma node.
-
-| Component | Figma node                                                                                       | Story                                              | Source                                    |
-| --------- | ------------------------------------------------------------------------------------------------ | -------------------------------------------------- | ----------------------------------------- |
-| `Alert`   | [33:34](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=33-34) | [alert.stories.tsx](src/stories/alert.stories.tsx) | [alert.tsx](src/app/components/alert.tsx) |
+**44 of 139** components link a Figma node.
+
+| Component          | Figma node                                                                                         | Story                                                                      | Source                                                            |
+| ------------------ | -------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------- |
+| `Alert`            | [33:34](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=33-34)   | [alert.stories.tsx](src/stories/alert.stories.tsx)                         | [alert.tsx](src/app/components/alert.tsx)                         |
+| `Avatar`           | [34:18](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=34-18)   | [avatar.stories.tsx](src/stories/avatar.stories.tsx)                       | [avatar.tsx](src/app/components/avatar.tsx)                       |
+| `Badge`            | [31:15](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=31-15)   | [badge.stories.tsx](src/stories/badge.stories.tsx)                         | [badge.tsx](src/app/components/badge.tsx)                         |
+| `Breadcrumb`       | [86:159](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-159) | [breadcrumb.stories.tsx](src/stories/breadcrumb.stories.tsx)               | [breadcrumb.tsx](src/app/components/breadcrumb.tsx)               |
+| `Button`           | [28:138](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=28-138) | [button.stories.tsx](src/stories/button.stories.tsx)                       | [button.tsx](src/app/components/button.tsx)                       |
+| `Callout`          | [88:85](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-85)   | [callout.stories.tsx](src/stories/callout.stories.tsx)                     | [callout.tsx](src/app/components/callout.tsx)                     |
+| `Card`             | [39:11](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=39-11)   | [card.stories.tsx](src/stories/card.stories.tsx)                           | [card.tsx](src/app/components/card.tsx)                           |
+| `CodeBlock`        | [89:154](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-154) | [code-block.stories.tsx](src/stories/code-block.stories.tsx)               | [code-block.tsx](src/app/components/code-block.tsx)               |
+| `Combobox`         | [82:237](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-237) | [combobox.stories.tsx](src/stories/combobox.stories.tsx)                   | [combobox.tsx](src/app/components/combobox.tsx)                   |
+| `Dialog`           | [93:27](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-27)   | [dialog.stories.tsx](src/stories/dialog.stories.tsx)                       | [dialog.tsx](src/app/components/dialog.tsx)                       |
+| `Disclosure`       | [88:453](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-453) | [disclosure.stories.tsx](src/stories/disclosure.stories.tsx)               | [disclosure.tsx](src/app/components/disclosure.tsx)               |
+| `Divider`          | [89:26](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-26)   | [divider.stories.tsx](src/stories/divider.stories.tsx)                     | [divider.tsx](src/app/components/divider.tsx)                     |
+| `EmptyState`       | [88:352](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-352) | [empty-state.stories.tsx](src/stories/empty-state.stories.tsx)             | [empty-state.tsx](src/app/components/empty-state.tsx)             |
+| `Field`            | [85:81](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-81)   | [field.stories.tsx](src/stories/field.stories.tsx)                         | [field.tsx](src/app/components/field.tsx)                         |
+| `Form`             | [85:94](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-94)   | [form.stories.tsx](src/stories/form.stories.tsx)                           | [form.tsx](src/app/components/form.tsx)                           |
+| `HdsCheckbox`      | [35:29](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=35-29)   | [checkbox.stories.tsx](src/stories/checkbox.stories.tsx)                   | [checkbox.tsx](src/app/components/checkbox.tsx)                   |
+| `HdsRadio`         | [36:17](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=36-17)   | [radio.stories.tsx](src/stories/radio.stories.tsx)                         | [radio.tsx](src/app/components/radio.tsx)                         |
+| `HdsSelect`        | [82:49](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-49)   | [select.stories.tsx](src/stories/select.stories.tsx)                       | [select.tsx](src/app/components/select.tsx)                       |
+| `HdsSlider`        | [82:265](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-265) | [slider.stories.tsx](src/stories/slider.stories.tsx)                       | [slider.tsx](src/app/components/slider.tsx)                       |
+| `HdsToggle`        | [37:19](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=37-19)   | [toggle.stories.tsx](src/stories/toggle.stories.tsx)                       | [toggle.tsx](src/app/components/toggle.tsx)                       |
+| `IconButton`       | [40:39](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=40-39)   | [icon-button.stories.tsx](src/stories/icon-button.stories.tsx)             | [icon-button.tsx](src/app/components/icon-button.tsx)             |
+| `InlineCode`       | [89:155](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-155) | [inline-code.stories.tsx](src/stories/inline-code.stories.tsx)             | [inline-code.tsx](src/app/components/inline-code.tsx)             |
+| `InlineLink`       | [89:161](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-161) | [inline-link.stories.tsx](src/stories/inline-link.stories.tsx)             | [inline-link.tsx](src/app/components/inline-link.tsx)             |
+| `Input`            | [38:20](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=38-20)   | [input.stories.tsx](src/stories/input.stories.tsx)                         | [input.tsx](src/app/components/input.tsx)                         |
+| `Menu`             | [93:59](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-59)   | [menu.stories.tsx](src/stories/menu.stories.tsx)                           | [menu.tsx](src/app/components/menu.tsx)                           |
+| `NavGroup`         | [86:304](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-304) | [nav-group.stories.tsx](src/stories/nav-group.stories.tsx)                 | [nav-group.tsx](src/app/components/nav-group.tsx)                 |
+| `NavItem`          | [86:258](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-258) | [nav-item.stories.tsx](src/stories/nav-item.stories.tsx)                   | [nav-item.tsx](src/app/components/nav-item.tsx)                   |
+| `Pagination`       | [86:194](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-194) | [pagination.stories.tsx](src/stories/pagination.stories.tsx)               | [pagination.tsx](src/app/components/pagination.tsx)               |
+| `Popover`          | [93:32](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-32)   | [popover.stories.tsx](src/stories/popover.stories.tsx)                     | [popover.tsx](src/app/components/popover.tsx)                     |
+| `Progress`         | [88:91](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-91)   | [progress.stories.tsx](src/stories/progress.stories.tsx)                   | [progress.tsx](src/app/components/progress.tsx)                   |
+| `SegmentedControl` | [82:334](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-334) | [segmented-control.stories.tsx](src/stories/segmented-control.stories.tsx) | [segmented-control.tsx](src/app/components/segmented-control.tsx) |
+| `SideNav`          | [86:332](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-332) | [side-nav.stories.tsx](src/stories/side-nav.stories.tsx)                   | [side-nav.tsx](src/app/components/side-nav.tsx)                   |
+| `Skeleton`         | [88:95](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-95)   | [skeleton.stories.tsx](src/stories/skeleton.stories.tsx)                   | [skeleton.tsx](src/app/components/skeleton.tsx)                   |
+| `Spinner`          | [88:106](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-106) | [spinner.stories.tsx](src/stories/spinner.stories.tsx)                     | [spinner.tsx](src/app/components/spinner.tsx)                     |
+| `Stat`             | [88:247](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-247) | [stat.stories.tsx](src/stories/stat.stories.tsx)                           | [stat.tsx](src/app/components/stat.tsx)                           |
+| `StatusListItem`   | [88:350](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-350) | [status-list-item.stories.tsx](src/stories/status-list-item.stories.tsx)   | [status-list-item.tsx](src/app/components/status-list-item.tsx)   |
+| `StatusTile`       | [88:292](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-292) | [status-tile.stories.tsx](src/stories/status-tile.stories.tsx)             | [status-tile.tsx](src/app/components/status-tile.tsx)             |
+| `StepperField`     | [82:425](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-425) | [stepper-field.stories.tsx](src/stories/stepper-field.stories.tsx)         | [stepper-field.tsx](src/app/components/stepper-field.tsx)         |
+| `Surface`          | [89:27](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-27)   | [surface.stories.tsx](src/stories/surface.stories.tsx)                     | [surface.tsx](src/app/components/surface.tsx)                     |
+| `Table`            | [89:300](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-300) | [table.stories.tsx](src/stories/table.stories.tsx)                         | [table.tsx](src/app/components/table.tsx)                         |
+| `Tabs`             | [86:89](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-89)   | [tabs.stories.tsx](src/stories/tabs.stories.tsx)                           | [tabs.tsx](src/app/components/tabs.tsx)                           |
+| `Tag`              | [32:11](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=32-11)   | [tag.stories.tsx](src/stories/tag.stories.tsx)                             | [tag.tsx](src/app/components/tag.tsx)                             |
+| `Textarea`         | [85:14](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-14)   | [textarea.stories.tsx](src/stories/textarea.stories.tsx)                   | [textarea.tsx](src/app/components/textarea.tsx)                   |
+| `ToastProvider`    | [93:367](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-367) | [toast.stories.tsx](src/stories/toast.stories.tsx)                         | [toast.tsx](src/app/components/toast.tsx)                         |
 
 <!-- design-links:end -->
 

package/dist/chunks/TokenDisplayContext-B3gxyQN7.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as r } from "react/jsx-runtime";
 import { useContext as i, createContext as a, forwardRef as w, useState as l, useEffect as L, useCallback as c } from "react";
 const d = a(null);

package/dist/chunks/form-DnGRy27o.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as m, jsxs as u } from "react/jsx-runtime";
 import * as s from "react";
 import { cn as p } from "../cn.js";

package/dist/contexts.js

@@ -1,7 +1,8 @@
-import { jsx as f, Fragment as M } from "react/jsx-runtime";
-import { useState as u, useCallback as s, useEffect as a, useContext as S, createContext as D } from "react";
-import { F as K, H as Y, L as j, T as q, b as J, u as Q, a as W, c as X } from "./chunks/TokenDisplayContext-B3gxyQN7.js";
-const L = ["system", "light", "dark"], m = "hds-theme-mode", x = "hds-theme", _ = D({
+'use client';
+import { jsx as l, Fragment as I } from "react/jsx-runtime";
+import { useState as i, useCallback as a, useEffect as s, useContext as E, createContext as S } from "react";
+import { F as j, H as q, L as N, T as V, b as J, u as Q, a as U, c as W } from "./chunks/TokenDisplayContext-B3gxyQN7.js";
+const x = ["system", "light", "dark"], d = "hds-theme-mode", P = "hds-theme", T = S({
   isDark: !0,
   toggleDark: () => {
   },
@@ -14,22 +15,22 @@ const L = ["system", "light", "dark"], m = "hds-theme-mode", x = "hds-theme", _
   setDensity: () => {
   }
 });
-function T() {
+function y() {
   try {
-    const t = localStorage.getItem(m);
-    if (t && L.includes(t)) return t;
+    const t = localStorage.getItem(d);
+    if (t && x.includes(t)) return t;
   } catch {
   }
   return "system";
 }
-function P() {
+function L() {
   var t;
   return typeof window > "u" ? !1 : !!((t = window.matchMedia) != null && t.call(window, "(prefers-color-scheme: dark)").matches);
 }
-function E(t) {
-  return t === "dark" ? !0 : t === "light" ? !1 : P();
+function D(t) {
+  return t === "dark" ? !0 : t === "light" ? !1 : L();
 }
-function N() {
+function C() {
   try {
     const t = localStorage.getItem("hds-density");
     if (t === "compact" || t === "comfortable") return t;
@@ -38,100 +39,102 @@ function N() {
   return "comfortable";
 }
 function F({ children: t }) {
-  const [n, g] = u(T), [r, i] = u(() => E(T())), [c, h] = u(N), y = s((e) => {
+  const [n, f] = i(y), [r, u] = i(() => D(y())), [c, h] = i(C), g = a((e) => {
     const o = e ? "dark" : "light";
     try {
-      localStorage.setItem(x, o);
+      localStorage.setItem(P, o);
     } catch {
     }
     document.documentElement.setAttribute("data-theme", o), document.documentElement.classList.toggle("dark", e);
   }, []);
-  a(() => {
+  s(() => {
     try {
       localStorage.setItem("hds-density", c);
     } catch {
     }
     document.documentElement.setAttribute("data-density", c);
-  }, [c]), a(() => {
-    y(r);
-  }, [r, y]), a(() => {
+  }, [c]), s(() => {
+    g(r);
+  }, [r, g]), s(() => {
     if (n !== "system" || typeof window > "u" || !window.matchMedia) return;
     const e = window.matchMedia("(prefers-color-scheme: dark)"), o = () => {
-      i(e.matches);
+      u(e.matches);
     };
     return e.addEventListener("change", o), () => {
       e.removeEventListener("change", o);
     };
   }, [n]);
-  const A = s(() => {
+  const b = a(() => {
     const e = !r, o = e ? "dark" : "light";
-    g(o), i(e);
+    f(o), u(e);
     try {
-      localStorage.setItem(m, o);
+      localStorage.setItem(d, o);
     } catch {
     }
-  }, [r]), b = s((e) => {
-    g(e), i(E(e));
+  }, [r]), A = a((e) => {
+    f(e), u(D(e));
     try {
-      localStorage.setItem(m, e);
+      localStorage.setItem(d, e);
     } catch {
     }
-  }, []), I = s(
+  }, []), w = a(
     () => h((e) => e === "comfortable" ? "compact" : "comfortable"),
     []
-  ), w = s((e) => h(e), []);
-  return /* @__PURE__ */ f(
-    _.Provider,
+  ), M = a((e) => h(e), []);
+  return /* @__PURE__ */ l(
+    T.Provider,
     {
-      value: { isDark: r, toggleDark: A, mode: n, setMode: b, density: c, toggleDensity: I, setDensity: w },
+      value: { isDark: r, toggleDark: b, mode: n, setMode: A, density: c, toggleDensity: w, setDensity: M },
       children: t
     }
   );
 }
-function G() {
-  return S(_);
+function O() {
+  return E(T);
 }
-const d = {}, v = D({ tenantSlug: null }), p = ["data-brand", "data-tenant"];
-function l(t) {
-  for (const n of p) document.documentElement.setAttribute(n, t);
+const k = S({ tenantSlug: null }), v = ["data-brand", "data-tenant"];
+function m(t) {
+  for (const n of v) document.documentElement.setAttribute(n, t);
 }
-function k() {
-  for (const t of p) document.documentElement.removeAttribute(t);
+function p() {
+  for (const t of v) document.documentElement.removeAttribute(t);
 }
-function O({ children: t }) {
-  const n = typeof d.VITE_TENANT_SLUG == "string" && d.VITE_TENANT_SLUG.trim().length > 0 ? d.VITE_TENANT_SLUG.trim() : null;
-  return a(() => {
+function B({
+  children: t,
+  slug: n = null
+}) {
+  return s(() => {
     if (n)
-      return l(n), () => k();
-  }, [n]), /* @__PURE__ */ f(v.Provider, { value: { tenantSlug: n }, children: t });
+      return m(n), () => p();
+  }, [n]), /* @__PURE__ */ l(k.Provider, { value: { tenantSlug: n }, children: t });
 }
-function B() {
-  return S(v);
+function H() {
+  return E(k);
 }
-function H(t) {
-  a(() => {
+function z(t) {
+  s(() => {
     const n = document.documentElement.getAttribute("data-brand");
-    return l(t), () => {
-      n !== null ? l(n) : k();
+    return m(t), () => {
+      n !== null ? m(n) : p();
     };
   }, [t]);
 }
-function V({ children: t }) {
-  return /* @__PURE__ */ f(M, { children: t });
+function G({ children: t }) {
+  return /* @__PURE__ */ l(I, { children: t });
 }
 export {
-  V as FontProvider,
-  K as FreezeState,
-  Y as HdsRouterProvider,
-  j as LanguageProvider,
-  O as TenantProvider,
+  G as FontProvider,
+  j as FreezeState,
+  q as HdsRouterProvider,
+  N as LanguageProvider,
+  B as TenantProvider,
   F as ThemeProvider,
-  q as TokenDisplayProvider,
+  V as TokenDisplayProvider,
   J as useFrozenState,
   Q as useHdsRouter,
-  W as useLanguage,
-  B as useTenant,
-  H as useTenantOnDocument,
-  G as useTheme,
-  X as useTokenDisplay
+  U as useLanguage,
+  H as useTenant,
+  z as useTenantOnDocument,
+  O as useTheme,
+  W as useTokenDisplay
 };

package/dist/form.js

@@ -1,3 +1,4 @@
+'use client';
 import { useForm as f, FormProvider as h, useController as v } from "react-hook-form";
 import { zodResolver as b } from "@hookform/resolvers/zod";
 import { jsx as t } from "react/jsx-runtime";