@alfadocs/ui-kit 0.1.9 → 0.2.0

package/dist/_chunks/{theme-toggle.agent-btmXTWdW.js → theme-toggle-B9zzCnvl.js}

@@ -1,31 +1,32 @@
-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";
+import { jsx as t, jsxs as m, Fragment as M } from "react/jsx-runtime";
+import { forwardRef as N, useRef as w, useImperativeHandle as R, useMemo as V, useCallback as S } from "react";
+import { c as P } from "./index-D2ZczOXr.js";
+import { useTranslation as g } from "react-i18next";
+import { I as b } from "./icon-button-C4CGcYuz.js";
+import { I as z } from "./icon-button-group-DeV3FpNY.js";
+import { S as j } from "./switch-C0psfIQF.js";
+import { D as o } from "./dropdown-menu-CpiF6CPz.js";
+import { u as K } from "./use-theme-B1cwAXJR.js";
+import { u as L } from "./registry-C9nwlNyL.js";
+import { c as C } 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 = [
+const D = [
   ["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);
+], _ = C("monitor", D);
 /**
  * @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 = [
+const H = [
   [
     "path",
     {
@@ -33,14 +34,14 @@ const j = [
       key: "kfwtm"
     }
   ]
-], T = k("moon", j);
+], f = C("moon", H);
 /**
  * @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 = [
+const q = [
   ["circle", { cx: "12", cy: "12", r: "4", key: "4exip2" }],
   ["path", { d: "M12 2v2", key: "tus03m" }],
   ["path", { d: "M12 20v2", key: "1lh1kg" }],
@@ -50,7 +51,56 @@ const K = [
   ["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", {
+], k = C("sun", q), B = {
+  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."
+    }
+  }
+}, A = P("ds:inline-flex ds:items-center", {
   variants: {
     variant: {
       menu: "",
@@ -60,77 +110,77 @@ const K = [
   },
   defaultVariants: { variant: "menu" }
 });
-function L(e) {
+function G(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) => {
+    onAccessibilityChange: a
+  } = e, i = K(), u = n ?? i.theme, p = c ?? i.accessibility, l = i.setTheme, v = i.setAccessibility, d = S(
+    (r) => {
       if (s) {
-        s(l);
+        s(r);
         return;
       }
-      o(l);
+      l(r);
     },
-    [s, o]
-  ), d = w(
-    (l) => {
-      if (i) {
-        i(l);
+    [s, l]
+  ), h = S(
+    (r) => {
+      if (a) {
+        a(r);
         return;
       }
-      g(l);
+      v(r);
     },
-    [i, g]
+    [a, v]
   );
   return {
-    theme: p,
-    accessibility: y,
-    resolvedTheme: a.resolvedTheme,
-    setTheme: m,
-    setAccessibility: d
+    theme: u,
+    accessibility: p,
+    resolvedTheme: i.resolvedTheme,
+    setTheme: d,
+    setAccessibility: h
   };
 }
-function _({
+function I({
   value: e,
   onValueChange: n,
   ariaLabel: c,
   size: s = "md"
 }) {
-  const { t: i } = u();
-  return /* @__PURE__ */ h(
-    R,
+  const { t: a } = g();
+  return /* @__PURE__ */ m(
+    z,
     {
       "aria-label": c,
       role: "radiogroup",
       mode: "toggle-single",
       size: s,
       value: e,
-      onValueChange: (a) => n(a),
+      onValueChange: (i) => n(i),
       children: [
         /* @__PURE__ */ t(
           b,
           {
-            icon: /* @__PURE__ */ t(f, { "aria-hidden": !0 }),
-            "aria-label": i("ui.navigation.themeToggle.appearance.light"),
+            icon: /* @__PURE__ */ t(k, { "aria-hidden": !0 }),
+            "aria-label": a("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"),
+            icon: /* @__PURE__ */ t(f, { "aria-hidden": !0 }),
+            "aria-label": a("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"),
+            icon: /* @__PURE__ */ t(_, { "aria-hidden": !0 }),
+            "aria-label": a("ui.navigation.themeToggle.appearance.system"),
             value: "system"
           }
         )
@@ -138,79 +188,79 @@ function _({
     }
   );
 }
-function D({
+function $({
   value: e,
   onValueChange: n,
   size: c = "md"
 }) {
-  const { t: s } = u(), i = e === "accessible";
+  const { t: s } = g(), a = e === "accessible";
   return /* @__PURE__ */ t(
-    V,
+    j,
     {
       label: s("ui.navigation.themeToggle.accessibility.label"),
       labelSide: "start",
       size: c,
-      checked: i,
-      onCheckedChange: (a) => n(a ? "accessible" : "default")
+      checked: a,
+      onCheckedChange: (i) => n(i ? "accessible" : "default")
     }
   );
 }
-function q({
+function F({
   state: e,
   className: n,
   rest: c,
   forwardedRef: s,
-  showAccessibility: i
+  showAccessibility: a
 }) {
-  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";
+  const { t: i } = g(), u = e.resolvedTheme === "dark" || e.resolvedTheme === "dark-accessible" ? /* @__PURE__ */ t(f, { "aria-hidden": !0 }) : /* @__PURE__ */ t(k, { "aria-hidden": !0 }), p = e.accessibility === "accessible";
   return /* @__PURE__ */ t(
     "div",
     {
       ref: s,
       "data-component": "theme-toggle",
       "data-component-id": c.id,
-      className: C({ variant: "menu", className: n }),
+      className: A({ variant: "menu", className: n }),
       ...c,
-      children: /* @__PURE__ */ h(r.Root, { children: [
-        /* @__PURE__ */ t(r.Trigger, { asChild: !0, children: /* @__PURE__ */ t(
+      children: /* @__PURE__ */ m(o.Root, { children: [
+        /* @__PURE__ */ t(o.Trigger, { asChild: !0, children: /* @__PURE__ */ t(
           b,
           {
-            icon: p,
-            "aria-label": a("ui.navigation.themeToggle.trigger")
+            icon: u,
+            "aria-label": i("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,
+        /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ m(o.Content, { align: "end", sideOffset: 8, children: [
+          /* @__PURE__ */ t(o.Label, { children: i("ui.navigation.themeToggle.appearance.label") }),
+          /* @__PURE__ */ m(
+            o.RadioGroup,
             {
               value: e.theme,
-              onValueChange: (o) => e.setTheme(o),
+              onValueChange: (l) => e.setTheme(l),
               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__ */ m(o.RadioItem, { value: "light", children: [
+                  /* @__PURE__ */ t(k, { "aria-hidden": !0, className: "ds:size-4" }),
+                  i("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__ */ m(o.RadioItem, { value: "dark", children: [
+                  /* @__PURE__ */ t(f, { "aria-hidden": !0, className: "ds:size-4" }),
+                  i("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")
+                /* @__PURE__ */ m(o.RadioItem, { value: "system", children: [
+                  /* @__PURE__ */ t(_, { "aria-hidden": !0, className: "ds:size-4" }),
+                  i("ui.navigation.themeToggle.appearance.system")
                 ] })
               ]
             }
           ),
-          i ? /* @__PURE__ */ h(I, { children: [
-            /* @__PURE__ */ t(r.Separator, {}),
+          a ? /* @__PURE__ */ m(M, { children: [
+            /* @__PURE__ */ t(o.Separator, {}),
             /* @__PURE__ */ t(
-              r.CheckboxItem,
+              o.CheckboxItem,
               {
-                checked: y,
-                onCheckedChange: (o) => e.setAccessibility(o ? "accessible" : "default"),
-                onSelect: (o) => o.preventDefault(),
-                children: a("ui.navigation.themeToggle.accessibility.label")
+                checked: p,
+                onCheckedChange: (l) => e.setAccessibility(l ? "accessible" : "default"),
+                onSelect: (l) => l.preventDefault(),
+                children: i("ui.navigation.themeToggle.accessibility.label")
               }
             )
           ] }) : null
@@ -219,59 +269,59 @@ function q({
     }
   );
 }
-function B({
+function O({
   state: e,
   className: n,
   rest: c,
   forwardedRef: s
 }) {
-  const { t: i } = u();
+  const { t: a } = g();
   return /* @__PURE__ */ t(
     "div",
     {
       ref: s,
       "data-component": "theme-toggle",
       "data-component-id": c.id,
-      className: C({ variant: "compact", className: n }),
+      className: A({ variant: "compact", className: n }),
       ...c,
       children: /* @__PURE__ */ t(
-        _,
+        I,
         {
           value: e.theme,
           onValueChange: e.setTheme,
-          ariaLabel: i("ui.navigation.themeToggle.appearance.label")
+          ariaLabel: a("ui.navigation.themeToggle.appearance.label")
         }
       )
     }
   );
 }
-function G({
+function E({
   state: e,
   className: n,
   rest: c,
   forwardedRef: s,
-  showAccessibility: i
+  showAccessibility: a
 }) {
-  const { t: a } = u();
-  return /* @__PURE__ */ h(
+  const { t: i } = g();
+  return /* @__PURE__ */ m(
     "div",
     {
       ref: s,
       "data-component": "theme-toggle",
       "data-component-id": c.id,
-      className: C({ variant: "split", className: n }),
+      className: A({ variant: "split", className: n }),
       ...c,
       children: [
         /* @__PURE__ */ t(
-          _,
+          I,
           {
             value: e.theme,
             onValueChange: e.setTheme,
-            ariaLabel: a("ui.navigation.themeToggle.appearance.label")
+            ariaLabel: i("ui.navigation.themeToggle.appearance.label")
           }
         ),
-        i ? /* @__PURE__ */ t(
-          D,
+        a ? /* @__PURE__ */ t(
+          $,
           {
             value: e.accessibility,
             onValueChange: e.setAccessibility
@@ -281,114 +331,66 @@ function G({
     }
   );
 }
-const H = x(
+const J = N(
   (e, n) => {
     const {
       variant: c = "menu",
       showAccessibility: s = !0,
-      className: i,
+      className: a,
+      id: i,
       // Strip controlled props from the spread — they are read by the
       // adapter, not by the DOM element.
-      theme: a,
+      theme: u,
       accessibility: p,
-      onThemeChange: y,
-      onAccessibilityChange: o,
-      ...g
-    } = e, m = L(e), d = A(m);
-    d.current = m, N(
-      n,
+      onThemeChange: l,
+      onAccessibilityChange: v,
+      ...d
+    } = e, h = G(e), r = w(h);
+    r.current = h;
+    const y = w(null);
+    R(n, () => y.current, []);
+    const x = V(
       () => ({
-        getCurrentTheme: () => d.current.theme,
-        getCurrentAccessibility: () => d.current.accessibility,
-        setTheme: (v) => d.current.setTheme(v),
-        setAccessibility: (v) => d.current.setAccessibility(v)
+        getCurrentTheme: () => r.current.theme,
+        getCurrentAccessibility: () => r.current.accessibility,
+        setTheme: (T) => r.current.setTheme(T),
+        setAccessibility: (T) => r.current.setAccessibility(T)
       }),
       []
     );
-    const l = A(null);
-    return c === "compact" ? /* @__PURE__ */ t(
-      B,
+    return L(B, x, i), c === "compact" ? /* @__PURE__ */ t(
+      O,
       {
-        state: m,
-        className: i,
-        rest: g,
-        forwardedRef: l,
+        state: h,
+        className: a,
+        rest: d,
+        forwardedRef: y,
         showAccessibility: s
       }
     ) : c === "split" ? /* @__PURE__ */ t(
-      G,
+      E,
       {
-        state: m,
-        className: i,
-        rest: g,
-        forwardedRef: l,
+        state: h,
+        className: a,
+        rest: d,
+        forwardedRef: y,
         showAccessibility: s
       }
     ) : /* @__PURE__ */ t(
-      q,
+      F,
       {
-        state: m,
-        className: i,
-        rest: g,
-        forwardedRef: l,
+        state: h,
+        className: a,
+        rest: d,
+        forwardedRef: y,
         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."
-    }
-  }
-};
+J.displayName = "ThemeToggle";
 export {
-  H as T,
-  Z as t
+  J as T,
+  B as t
 };
-//# sourceMappingURL=theme-toggle.agent-btmXTWdW.js.map
+//# sourceMappingURL=theme-toggle-B9zzCnvl.js.map