@hirobius/design-system 0.19.1 → 0.21.0

package/dist/chunks/form-By82qZcC.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import * as s from "react";
+import { cn as m } from "../cn.js";
+const I = /* @__PURE__ */ s.forwardRef(function({ className: e, ...n }, o) {
+  return /* @__PURE__ */ f("form", { ref: o, className: m("flex flex-col gap-4", e), ...n });
+});
+function x({
+  htmlFor: c,
+  childId: e,
+  description: n,
+  error: o
+}) {
+  const i = s.useId(), r = c ?? e ?? i, d = `${r}-description`, t = `${r}-error`, a = [n ? d : null, o ? t : null].filter(Boolean).join(" ") || void 0;
+  return { controlId: r, descriptionId: d, errorId: t, describedBy: a };
+}
+const b = /* @__PURE__ */ s.forwardRef(
+  function({ controlId: e, label: n, description: o, error: i, required: r = !1, className: d, children: t }, a) {
+    const l = `${e}-description`, u = `${e}-error`;
+    return /* @__PURE__ */ p("div", { ref: a, className: m("flex flex-col gap-2", d), children: [
+      /* @__PURE__ */ p("label", { htmlFor: e, className: "hds-type-ui text-foreground", children: [
+        n,
+        r ? /* @__PURE__ */ p("span", { "aria-hidden": "true", className: "text-destructive", children: [
+          " ",
+          "*"
+        ] }) : null
+      ] }),
+      t,
+      o && !i ? /* @__PURE__ */ f("p", { id: l, className: "hds-type-caption text-muted-foreground", children: o }) : null,
+      i ? /* @__PURE__ */ f("p", { id: u, role: "alert", className: "hds-type-caption text-destructive", children: i }) : null
+    ] });
+  }
+), g = /* @__PURE__ */ s.forwardRef(
+  function({ label: e, children: n, htmlFor: o, description: i, error: r, required: d = !1, className: t }, a) {
+    const l = s.Children.only(n), { controlId: u, describedBy: h } = x({
+      htmlFor: o,
+      childId: l.props.id,
+      description: i,
+      error: r
+    }), F = s.cloneElement(l, {
+      id: u,
+      required: l.props.required ?? d,
+      "aria-invalid": r ? !0 : l.props["aria-invalid"],
+      "aria-describedby": [l.props["aria-describedby"], h].filter(Boolean).join(" ") || void 0
+    });
+    return /* @__PURE__ */ f(
+      b,
+      {
+        ref: a,
+        controlId: u,
+        label: e,
+        description: i,
+        error: r,
+        required: d,
+        className: t,
+        children: F
+      }
+    );
+  }
+);
+export {
+  I as F,
+  b as a,
+  g as b,
+  x as u
+};

package/dist/contexts.js

@@ -1,9 +1,8 @@
 'use client';
-import { jsx as l, Fragment as x } 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, u as V, a as J, b as Q } from "./chunks/LanguageContext-BxdCwiFg.js";
-import { T as W, u as X } from "./chunks/TokenDisplayContext-DKYJMVWk.js";
-const I = ["system", "light", "dark"], d = "hds-theme-mode", P = "hds-theme", T = /* @__PURE__ */ S({
+import { jsx as m, Fragment as P } from "react/jsx-runtime";
+import { useState as l, useCallback as a, useEffect as u, useContext as h, createContext as y } from "react";
+import { F as X, H as Z, u as $, a as tt } from "./chunks/DemoStateContext-Cz5TmrYu.js";
+const M = ["system", "light", "dark"], D = "hds-theme-mode", R = "hds-theme", b = /* @__PURE__ */ y({
   isDark: !0,
   toggleDark: () => {
   },
@@ -16,22 +15,22 @@ const I = ["system", "light", "dark"], d = "hds-theme-mode", P = "hds-theme", T
   setDensity: () => {
   }
 });
-function y() {
+function S() {
   try {
-    const t = localStorage.getItem(d);
-    if (t && I.includes(t)) return t;
+    const t = localStorage.getItem(D);
+    if (t && M.includes(t)) return t;
   } catch {
   }
   return "system";
 }
-function L() {
+function _() {
   var t;
   return typeof window > "u" ? !1 : !!((t = window.matchMedia) != null && t.call(window, "(prefers-color-scheme: dark)").matches);
 }
-function D(t) {
-  return t === "dark" ? !0 : t === "light" ? !1 : L();
+function v(t) {
+  return t === "dark" ? !0 : t === "light" ? !1 : _();
 }
-function C() {
+function O() {
   try {
     const t = localStorage.getItem("hds-density");
     if (t === "compact" || t === "comfortable") return t;
@@ -39,103 +38,183 @@ function C() {
   }
   return "comfortable";
 }
-function F({ children: t }) {
-  const [n, f] = i(y), [r, u] = i(() => D(y())), [c, h] = i(C), g = a((e) => {
-    const o = e ? "dark" : "light";
+function H({ children: t }) {
+  const [e, r] = l(S), [o, d] = l(() => v(S())), [c, g] = l(O), f = a((n) => {
+    const s = n ? "dark" : "light";
     try {
-      localStorage.setItem(P, o);
+      localStorage.setItem(R, s);
     } catch {
     }
-    document.documentElement.setAttribute("data-theme", o), document.documentElement.classList.toggle("dark", e);
+    document.documentElement.setAttribute("data-theme", s), document.documentElement.classList.toggle("dark", n);
   }, []);
-  s(() => {
+  u(() => {
     try {
       localStorage.setItem("hds-density", c);
     } catch {
     }
     document.documentElement.setAttribute("data-density", c);
-  }, [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 = () => {
-      u(e.matches);
+  }, [c]), u(() => {
+    f(o);
+  }, [o, f]), u(() => {
+    if (e !== "system" || typeof window > "u" || !window.matchMedia) return;
+    const n = window.matchMedia("(prefers-color-scheme: dark)"), s = () => {
+      d(n.matches);
     };
-    return e.addEventListener("change", o), () => {
-      e.removeEventListener("change", o);
+    return n.addEventListener("change", s), () => {
+      n.removeEventListener("change", s);
     };
-  }, [n]);
-  const b = a(() => {
-    const e = !r, o = e ? "dark" : "light";
-    f(o), u(e);
+  }, [e]);
+  const i = a(() => {
+    const n = !o, s = n ? "dark" : "light";
+    r(s), d(n);
     try {
-      localStorage.setItem(d, o);
+      localStorage.setItem(D, s);
     } catch {
     }
-  }, [r]), A = a((e) => {
-    f(e), u(D(e));
+  }, [o]), I = a((n) => {
+    r(n), d(v(n));
     try {
-      localStorage.setItem(d, e);
+      localStorage.setItem(D, n);
     } catch {
     }
-  }, []), w = a(
-    () => h((e) => e === "comfortable" ? "compact" : "comfortable"),
+  }, []), x = a(
+    () => g((n) => n === "comfortable" ? "compact" : "comfortable"),
     []
-  ), M = a((e) => h(e), []);
-  return /* @__PURE__ */ l(
-    T.Provider,
+  ), L = a((n) => g(n), []);
+  return /* @__PURE__ */ m(
+    b.Provider,
     {
-      value: { isDark: r, toggleDark: b, mode: n, setMode: A, density: c, toggleDensity: w, setDensity: M },
+      value: { isDark: o, toggleDark: i, mode: e, setMode: I, density: c, toggleDensity: x, setDensity: L },
       children: t
     }
   );
 }
-function O() {
-  return E(T);
+function N() {
+  return h(b);
 }
-const k = /* @__PURE__ */ S({ tenantSlug: null }), p = ["data-brand", "data-tenant"];
-function m(t) {
-  for (const n of p) document.documentElement.setAttribute(n, t);
+const p = {
+  en: {
+    language: "en",
+    dir: "ltr",
+    label: "English",
+    nativeLabel: "English"
+  }
+}, A = /* @__PURE__ */ y({
+  language: "en",
+  direction: "ltr",
+  isRtl: !1,
+  setLanguage: () => {
+  },
+  setDirection: () => {
+  },
+  toggleDirection: () => {
+  },
+  options: p
+});
+function F() {
+  try {
+    const t = localStorage.getItem("hds-direction");
+    if (t === "ltr" || t === "rtl") return t;
+  } catch {
+  }
+  return "ltr";
 }
-function v() {
-  for (const t of p) document.documentElement.removeAttribute(t);
+function z({ children: t }) {
+  const [e, r] = l(F), o = "en", d = e === "rtl";
+  u(() => {
+    try {
+      localStorage.setItem("hds-direction", e);
+    } catch {
+    }
+    document.documentElement.setAttribute("lang", "en"), document.documentElement.setAttribute("data-language", "en"), document.documentElement.setAttribute("dir", e), document.documentElement.setAttribute("data-reading-direction", e);
+  }, [e]);
+  const c = a((i) => {
+  }, []), g = a((i) => {
+    r(i);
+  }, []), f = a(() => {
+    r((i) => i === "ltr" ? "rtl" : "ltr");
+  }, []);
+  return /* @__PURE__ */ m(
+    A.Provider,
+    {
+      value: {
+        language: o,
+        direction: e,
+        isRtl: d,
+        setLanguage: c,
+        setDirection: g,
+        toggleDirection: f,
+        options: p
+      },
+      children: t
+    }
+  );
+}
+function K() {
+  return h(A);
 }
-function B({
+const T = /* @__PURE__ */ y({ tenantSlug: null }), k = ["data-brand", "data-tenant"];
+function E(t) {
+  for (const e of k) document.documentElement.setAttribute(e, t);
+}
+function w() {
+  for (const t of k) document.documentElement.removeAttribute(t);
+}
+function Y({
   children: t,
-  slug: n = null
+  slug: e = null
 }) {
-  return s(() => {
-    if (n)
-      return m(n), () => v();
-  }, [n]), /* @__PURE__ */ l(k.Provider, { value: { tenantSlug: n }, children: t });
-}
-function H() {
-  return E(k);
-}
-function z(t) {
-  s(() => {
-    const n = document.documentElement.getAttribute("data-brand");
-    return m(t), () => {
-      n !== null ? m(n) : v();
+  return u(() => {
+    if (e)
+      return E(e), () => w();
+  }, [e]), /* @__PURE__ */ m(T.Provider, { value: { tenantSlug: e }, children: t });
+}
+function j() {
+  return h(T);
+}
+function q(t) {
+  u(() => {
+    const e = document.documentElement.getAttribute("data-brand");
+    return E(t), () => {
+      e !== null ? E(e) : w();
     };
   }, [t]);
 }
-function G({ children: t }) {
-  return /* @__PURE__ */ l(x, { children: t });
+function U({ children: t }) {
+  return /* @__PURE__ */ m(P, { children: t });
+}
+const C = /* @__PURE__ */ y(
+  void 0
+);
+function V({ children: t }) {
+  const [e, r] = l(!1);
+  return /* @__PURE__ */ m(
+    C.Provider,
+    {
+      value: { showCss: e, setShowCss: r, toggleCss: () => r((o) => !o) },
+      children: t
+    }
+  );
+}
+function J() {
+  const t = h(C);
+  return t || { showCss: !1, setShowCss: () => {
+  }, toggleCss: () => {
+  } };
 }
 export {
-  G as FontProvider,
-  j as FreezeState,
-  q as HdsRouterProvider,
-  N as LanguageProvider,
-  B as TenantProvider,
-  F as ThemeProvider,
-  W as TokenDisplayProvider,
-  V as useFrozenState,
-  J as useHdsRouter,
-  Q as useLanguage,
-  H as useTenant,
-  z as useTenantOnDocument,
-  O as useTheme,
-  X as useTokenDisplay
+  U as FontProvider,
+  X as FreezeState,
+  Z as HdsRouterProvider,
+  z as LanguageProvider,
+  Y as TenantProvider,
+  H as ThemeProvider,
+  V as TokenDisplayProvider,
+  $ as useFrozenState,
+  tt as useHdsRouter,
+  K as useLanguage,
+  j as useTenant,
+  q as useTenantOnDocument,
+  N as useTheme,
+  J as useTokenDisplay
 };

package/dist/fonts.css

@@ -0,0 +1,53 @@
+/* @hirobius/design-system/fonts.css — OPTIONAL brand fonts: Satoshi 400/500/700
+ * and Geist Mono 400. tokens.css and styles.css do not include them. Import this
+ * once at the app root for the HDS faces, or skip it and load your own; the
+ * font-family variables in tokens.css fall back to the family stack either way.
+ * The woff2 URLs are relative to this file so your bundler resolves and hashes them. */
+/* Hirobius Design System — font-face declarations.
+ *
+ * Faces (type ramp, Adrian 2026-10-07, hds#483):
+ *   - Satoshi 400 — body
+ *   - Satoshi 500 — ui, caption
+ *   - Satoshi 700 — display, title
+ *   - Geist Mono 400 — mono
+ *
+ * Audit gate: scripts/audit-typography-overrides.mjs fails on inline
+ * fontWeight / textTransform outside the sketches lab and a small allowlist.
+ */
+
+/* Satoshi — Indian Type Foundry, ITF Free Font License via Fontshare. */
+/* Satoshi Regular — body (400), hds#483 type ramp. */
+@font-face {
+  font-family: 'Satoshi';
+  src: url('./fonts/satoshi-400.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Satoshi Medium — ui and caption (500). */
+@font-face {
+  font-family: 'Satoshi';
+  src: url('./fonts/satoshi-500.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Satoshi Bold — display/heading weight (700), replaces Clash Display (#48). */
+@font-face {
+  font-family: 'Satoshi';
+  src: url('./fonts/satoshi-700.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Geist Mono — Vercel, OFL-1.1. */
+@font-face {
+  font-family: 'Geist Mono'; /* impeccable-disable-line overused-font -- deliberate brand choice (Adrian directive 2026-05-04, see file header) */
+  src: url('./fonts/geist-mono-400.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}

package/dist/form.js

@@ -2,7 +2,7 @@
 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";
-import { F as p, u as g, a as S } from "./chunks/form-COP3vK9_.js";
+import { F as p, u as g, a as S } from "./chunks/form-By82qZcC.js";
 function y(r, e) {
   return f({
     mode: "onTouched",