@hirobius/design-system 0.19.1 → 0.20.0

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
 };