@alfadocs/ui-kit 0.1.8 → 0.1.9

package/dist/_chunks/theme-toggle.agent-btmXTWdW.js

@@ -0,0 +1,394 @@
+import { jsx as t, jsxs as h, Fragment as I } from "react/jsx-runtime";
+import { forwardRef as x, useRef as A, useImperativeHandle as N, useCallback as w } from "react";
+import { c as M } from "./index-D2ZczOXr.js";
+import { useTranslation as u } from "react-i18next";
+import { I as b } from "./icon-button-Wnnde5lc.js";
+import { I as R } from "./icon-button-group-DeV3FpNY.js";
+import { S as V } from "./switch-BYEH8I53.js";
+import { D as r } from "./dropdown-menu-C7AZipNz.js";
+import { u as P } from "./use-theme-BMUhembX.js";
+import { c as k } from "./createLucideIcon-CrFbzy84.js";
+/**
+ * @license lucide-react v1.8.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const z = [
+  ["rect", { width: "20", height: "14", x: "2", y: "3", rx: "2", key: "48i651" }],
+  ["line", { x1: "8", x2: "16", y1: "21", y2: "21", key: "1svkeh" }],
+  ["line", { x1: "12", x2: "12", y1: "17", y2: "21", key: "vw1qmm" }]
+], S = k("monitor", z);
+/**
+ * @license lucide-react v1.8.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const j = [
+  [
+    "path",
+    {
+      d: "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401",
+      key: "kfwtm"
+    }
+  ]
+], T = k("moon", j);
+/**
+ * @license lucide-react v1.8.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const K = [
+  ["circle", { cx: "12", cy: "12", r: "4", key: "4exip2" }],
+  ["path", { d: "M12 2v2", key: "tus03m" }],
+  ["path", { d: "M12 20v2", key: "1lh1kg" }],
+  ["path", { d: "m4.93 4.93 1.41 1.41", key: "149t6j" }],
+  ["path", { d: "m17.66 17.66 1.41 1.41", key: "ptbguv" }],
+  ["path", { d: "M2 12h2", key: "1t8f8n" }],
+  ["path", { d: "M20 12h2", key: "1q8mjw" }],
+  ["path", { d: "m6.34 17.66-1.41 1.41", key: "1m8zz5" }],
+  ["path", { d: "m19.07 4.93-1.41 1.41", key: "1shlcs" }]
+], f = k("sun", K), C = M("ds:inline-flex ds:items-center", {
+  variants: {
+    variant: {
+      menu: "",
+      compact: "",
+      split: "ds:gap-[var(--spacing-md)]"
+    }
+  },
+  defaultVariants: { variant: "menu" }
+});
+function L(e) {
+  const {
+    theme: n,
+    accessibility: c,
+    onThemeChange: s,
+    onAccessibilityChange: i
+  } = e, a = P(), p = n ?? a.theme, y = c ?? a.accessibility, o = a.setTheme, g = a.setAccessibility, m = w(
+    (l) => {
+      if (s) {
+        s(l);
+        return;
+      }
+      o(l);
+    },
+    [s, o]
+  ), d = w(
+    (l) => {
+      if (i) {
+        i(l);
+        return;
+      }
+      g(l);
+    },
+    [i, g]
+  );
+  return {
+    theme: p,
+    accessibility: y,
+    resolvedTheme: a.resolvedTheme,
+    setTheme: m,
+    setAccessibility: d
+  };
+}
+function _({
+  value: e,
+  onValueChange: n,
+  ariaLabel: c,
+  size: s = "md"
+}) {
+  const { t: i } = u();
+  return /* @__PURE__ */ h(
+    R,
+    {
+      "aria-label": c,
+      role: "radiogroup",
+      mode: "toggle-single",
+      size: s,
+      value: e,
+      onValueChange: (a) => n(a),
+      children: [
+        /* @__PURE__ */ t(
+          b,
+          {
+            icon: /* @__PURE__ */ t(f, { "aria-hidden": !0 }),
+            "aria-label": i("ui.navigation.themeToggle.appearance.light"),
+            value: "light"
+          }
+        ),
+        /* @__PURE__ */ t(
+          b,
+          {
+            icon: /* @__PURE__ */ t(T, { "aria-hidden": !0 }),
+            "aria-label": i("ui.navigation.themeToggle.appearance.dark"),
+            value: "dark"
+          }
+        ),
+        /* @__PURE__ */ t(
+          b,
+          {
+            icon: /* @__PURE__ */ t(S, { "aria-hidden": !0 }),
+            "aria-label": i("ui.navigation.themeToggle.appearance.system"),
+            value: "system"
+          }
+        )
+      ]
+    }
+  );
+}
+function D({
+  value: e,
+  onValueChange: n,
+  size: c = "md"
+}) {
+  const { t: s } = u(), i = e === "accessible";
+  return /* @__PURE__ */ t(
+    V,
+    {
+      label: s("ui.navigation.themeToggle.accessibility.label"),
+      labelSide: "start",
+      size: c,
+      checked: i,
+      onCheckedChange: (a) => n(a ? "accessible" : "default")
+    }
+  );
+}
+function q({
+  state: e,
+  className: n,
+  rest: c,
+  forwardedRef: s,
+  showAccessibility: i
+}) {
+  const { t: a } = u(), p = e.resolvedTheme === "dark" || e.resolvedTheme === "dark-accessible" ? /* @__PURE__ */ t(T, { "aria-hidden": !0 }) : /* @__PURE__ */ t(f, { "aria-hidden": !0 }), y = e.accessibility === "accessible";
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ref: s,
+      "data-component": "theme-toggle",
+      "data-component-id": c.id,
+      className: C({ variant: "menu", className: n }),
+      ...c,
+      children: /* @__PURE__ */ h(r.Root, { children: [
+        /* @__PURE__ */ t(r.Trigger, { asChild: !0, children: /* @__PURE__ */ t(
+          b,
+          {
+            icon: p,
+            "aria-label": a("ui.navigation.themeToggle.trigger")
+          }
+        ) }),
+        /* @__PURE__ */ t(r.Portal, { children: /* @__PURE__ */ h(r.Content, { align: "end", sideOffset: 8, children: [
+          /* @__PURE__ */ t(r.Label, { children: a("ui.navigation.themeToggle.appearance.label") }),
+          /* @__PURE__ */ h(
+            r.RadioGroup,
+            {
+              value: e.theme,
+              onValueChange: (o) => e.setTheme(o),
+              children: [
+                /* @__PURE__ */ h(r.RadioItem, { value: "light", children: [
+                  /* @__PURE__ */ t(f, { "aria-hidden": !0, className: "ds:size-4" }),
+                  a("ui.navigation.themeToggle.appearance.light")
+                ] }),
+                /* @__PURE__ */ h(r.RadioItem, { value: "dark", children: [
+                  /* @__PURE__ */ t(T, { "aria-hidden": !0, className: "ds:size-4" }),
+                  a("ui.navigation.themeToggle.appearance.dark")
+                ] }),
+                /* @__PURE__ */ h(r.RadioItem, { value: "system", children: [
+                  /* @__PURE__ */ t(S, { "aria-hidden": !0, className: "ds:size-4" }),
+                  a("ui.navigation.themeToggle.appearance.system")
+                ] })
+              ]
+            }
+          ),
+          i ? /* @__PURE__ */ h(I, { children: [
+            /* @__PURE__ */ t(r.Separator, {}),
+            /* @__PURE__ */ t(
+              r.CheckboxItem,
+              {
+                checked: y,
+                onCheckedChange: (o) => e.setAccessibility(o ? "accessible" : "default"),
+                onSelect: (o) => o.preventDefault(),
+                children: a("ui.navigation.themeToggle.accessibility.label")
+              }
+            )
+          ] }) : null
+        ] }) })
+      ] })
+    }
+  );
+}
+function B({
+  state: e,
+  className: n,
+  rest: c,
+  forwardedRef: s
+}) {
+  const { t: i } = u();
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ref: s,
+      "data-component": "theme-toggle",
+      "data-component-id": c.id,
+      className: C({ variant: "compact", className: n }),
+      ...c,
+      children: /* @__PURE__ */ t(
+        _,
+        {
+          value: e.theme,
+          onValueChange: e.setTheme,
+          ariaLabel: i("ui.navigation.themeToggle.appearance.label")
+        }
+      )
+    }
+  );
+}
+function G({
+  state: e,
+  className: n,
+  rest: c,
+  forwardedRef: s,
+  showAccessibility: i
+}) {
+  const { t: a } = u();
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      ref: s,
+      "data-component": "theme-toggle",
+      "data-component-id": c.id,
+      className: C({ variant: "split", className: n }),
+      ...c,
+      children: [
+        /* @__PURE__ */ t(
+          _,
+          {
+            value: e.theme,
+            onValueChange: e.setTheme,
+            ariaLabel: a("ui.navigation.themeToggle.appearance.label")
+          }
+        ),
+        i ? /* @__PURE__ */ t(
+          D,
+          {
+            value: e.accessibility,
+            onValueChange: e.setAccessibility
+          }
+        ) : null
+      ]
+    }
+  );
+}
+const H = x(
+  (e, n) => {
+    const {
+      variant: c = "menu",
+      showAccessibility: s = !0,
+      className: i,
+      // Strip controlled props from the spread — they are read by the
+      // adapter, not by the DOM element.
+      theme: a,
+      accessibility: p,
+      onThemeChange: y,
+      onAccessibilityChange: o,
+      ...g
+    } = e, m = L(e), d = A(m);
+    d.current = m, N(
+      n,
+      () => ({
+        getCurrentTheme: () => d.current.theme,
+        getCurrentAccessibility: () => d.current.accessibility,
+        setTheme: (v) => d.current.setTheme(v),
+        setAccessibility: (v) => d.current.setAccessibility(v)
+      }),
+      []
+    );
+    const l = A(null);
+    return c === "compact" ? /* @__PURE__ */ t(
+      B,
+      {
+        state: m,
+        className: i,
+        rest: g,
+        forwardedRef: l,
+        showAccessibility: s
+      }
+    ) : c === "split" ? /* @__PURE__ */ t(
+      G,
+      {
+        state: m,
+        className: i,
+        rest: g,
+        forwardedRef: l,
+        showAccessibility: s
+      }
+    ) : /* @__PURE__ */ t(
+      q,
+      {
+        state: m,
+        className: i,
+        rest: g,
+        forwardedRef: l,
+        showAccessibility: s
+      }
+    );
+  }
+);
+H.displayName = "ThemeToggle";
+const Z = {
+  id: "theme-toggle",
+  capabilities: ["view_change"],
+  state: {
+    currentTheme: {
+      type: "ThemePreference",
+      descriptionKey: "ui.agent.themeToggle.state.currentTheme",
+      description: "Active theme preference: light, dark, or system.",
+      read: (e) => e.getCurrentTheme()
+    },
+    currentAccessibility: {
+      type: "AccessibilityPreference",
+      descriptionKey: "ui.agent.themeToggle.state.currentAccessibility",
+      description: "Active accessibility preference: default or accessible.",
+      read: (e) => e.getCurrentAccessibility()
+    }
+  },
+  actions: {
+    set_theme: {
+      safety: "write",
+      argsType: '{ theme: "light" | "dark" | "system" }',
+      descriptionKey: "ui.agent.themeToggle.actions.setTheme",
+      description: "Switch the theme preference.",
+      invoke: (e, n) => {
+        e.setTheme(n.theme);
+      }
+    },
+    set_accessibility: {
+      safety: "write",
+      argsType: '{ accessibility: "default" | "accessible" }',
+      descriptionKey: "ui.agent.themeToggle.actions.setAccessibility",
+      description: "Switch the accessibility preference.",
+      invoke: (e, n) => {
+        e.setAccessibility(n.accessibility);
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "theme-toggle",
+      description: "Marks the ThemeToggle wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+};
+export {
+  H as T,
+  Z as t
+};
+//# sourceMappingURL=theme-toggle.agent-btmXTWdW.js.map