@alfadocs/ui-kit 0.25.0 → 0.25.1

package/dist/agent-catalog.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "packageVersion": "0.25.0",
+  "packageVersion": "0.25.1",
   "components": [
     {
       "kind": "component",

package/dist/components/header-settings/index.js

@@ -1,18 +1,18 @@
 import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { forwardRef as T, useRef as g, useImperativeHandle as A, useCallback as C, useMemo as I } from "react";
+import { forwardRef as A, useRef as p, useImperativeHandle as C, useCallback as x, useMemo as I } from "react";
 import { c as N } from "../../_chunks/index-D2ZczOXr.js";
 import { useTranslation as E } from "react-i18next";
 import { I as o } from "../../_chunks/icon-button-C4CGcYuz.js";
 import { I as R } from "../../_chunks/icon-button-group-DeV3FpNY.js";
 import { D as r } from "../../_chunks/dropdown-menu-DZxwF23X.js";
-import { S as x } from "../../_chunks/switch-D916VW86.js";
-import { c as v, a as M, L as _ } from "../../_chunks/locale-picker-BxEUUPW7.js";
-import { u as H } from "../../_chunks/use-locale-BkCIHujH.js";
-import { u as O } from "../../_chunks/use-theme-B1cwAXJR.js";
-import { u as P } from "../../_chunks/registry-C9nwlNyL.js";
+import { S as M } from "../../_chunks/switch-D916VW86.js";
+import { c as v, a as _, L as H } from "../../_chunks/locale-picker-BxEUUPW7.js";
+import { u as O } from "../../_chunks/use-locale-BkCIHujH.js";
+import { u as P } from "../../_chunks/use-theme-B1cwAXJR.js";
+import { u as j } from "../../_chunks/registry-C9nwlNyL.js";
 import { S as K } from "../../_chunks/settings-ca2Yi9R8.js";
-import { S as j, M as D, a as V } from "../../_chunks/sun-Eweh5fvi.js";
-const z = {
+import { S as D, M as z, a as V } from "../../_chunks/sun-Eweh5fvi.js";
+const B = {
   id: "header-settings",
   capabilities: ["view_change"],
   state: {},
@@ -53,19 +53,19 @@ const z = {
     }
   }
 };
-function B(t, i) {
+function G(t, i) {
   if (!(typeof window > "u"))
     try {
       window.localStorage.setItem(t, i);
     } catch {
     }
 }
-function G(t) {
+function W(t) {
   if (typeof document > "u") return;
   const i = document.documentElement;
   i.lang = t, i.dir = v[t].dir;
 }
-const W = N("ds:inline-flex ds:items-center", {
+const F = N("ds:inline-flex ds:items-center", {
   variants: {
     align: {
       start: "",
@@ -73,30 +73,31 @@ const W = N("ds:inline-flex ds:items-center", {
     }
   },
   defaultVariants: { align: "end" }
-}), F = [
+}), U = [
   "ds:w-[20rem] ds:p-[var(--spacing-xs)]",
   "ds:rounded-[var(--radius-md)] ds:border ds:border-border",
   "ds:bg-background ds:text-foreground ds:shadow-[var(--shadow-lg)]"
-].join(" "), U = T(
+].join(" "), Y = A(
   (t, i) => {
     const {
-      align: p = "end",
-      disabled: y = !1,
-      className: S,
+      align: g = "end",
+      size: y = "md",
+      disabled: S = !1,
+      className: w,
       id: m,
-      ...w
-    } = t, { t: s } = E(), n = O(), { setLocale: h } = H(), u = g(null);
-    A(i, () => u.current, []);
-    const f = C(
+      ...L
+    } = t, { t: s } = E(), n = P(), { setLocale: h } = O(), u = p(null);
+    C(i, () => u.current, []);
+    const f = x(
       (a) => {
-        h(a), G(a), B(_, a);
+        h(a), W(a), G(H, a);
       },
       [h]
-    ), b = g(f);
+    ), b = p(f);
     b.current = f;
-    const c = g(n);
+    const c = p(n);
     c.current = n;
-    const L = I(
+    const k = I(
       () => ({
         setLocale: (a) => {
           Object.prototype.hasOwnProperty.call(v, a) && b.current(a);
@@ -106,21 +107,22 @@ const W = N("ds:inline-flex ds:items-center", {
       }),
       []
     );
-    P(z, L, m);
-    const k = n.accessibility === "accessible";
+    j(B, k, m);
+    const T = n.accessibility === "accessible";
     return /* @__PURE__ */ e(
       "div",
       {
         ref: u,
         "data-component": "header-settings",
         "data-component-id": m,
-        className: W({ align: p, className: S }),
-        ...w,
+        className: F({ align: g, className: w }),
+        ...L,
         children: /* @__PURE__ */ d(r.Root, { children: [
           /* @__PURE__ */ e(r.Trigger, { asChild: !0, children: /* @__PURE__ */ e(
             o,
             {
-              disabled: y,
+              size: y,
+              disabled: S,
               icon: /* @__PURE__ */ e(K, { "aria-hidden": !0 }),
               "aria-label": s("navigation.headerSettings.trigger")
             }
@@ -128,9 +130,9 @@ const W = N("ds:inline-flex ds:items-center", {
           /* @__PURE__ */ e(r.Portal, { children: /* @__PURE__ */ d(
             r.Content,
             {
-              align: p,
+              align: g,
               sideOffset: 8,
-              className: F,
+              className: U,
               onKeyDownCapture: (a) => {
                 const l = a.target;
                 (l == null ? void 0 : l.tagName) === "INPUT" && // Always allow Escape so the menu can close.
@@ -143,8 +145,17 @@ const W = N("ds:inline-flex ds:items-center", {
                   {
                     role: "group",
                     "aria-label": s("navigation.headerSettings.language.label"),
-                    className: "ds:py-[var(--spacing-xs)]",
-                    children: /* @__PURE__ */ e(M.SearchList, {})
+                    className: [
+                      "ds:px-[var(--spacing-sm)] ds:py-[var(--spacing-xs)]",
+                      // Stretch the compact LocalePicker to the full menu
+                      // width so it reads as a single row affordance (not
+                      // a centred pill). The picker's root is
+                      // inline-flex; the `*:` child selector + `flex-1`
+                      // gives it `flex: 1 1 0%` once it's a child of the
+                      // flex container we make this div into.
+                      "ds:flex ds:[&>*]:flex-1"
+                    ].join(" "),
+                    children: /* @__PURE__ */ e(_, { variant: "compact" })
                   }
                 ),
                 /* @__PURE__ */ e(r.Separator, {}),
@@ -168,7 +179,7 @@ const W = N("ds:inline-flex ds:items-center", {
                           /* @__PURE__ */ e(
                             o,
                             {
-                              icon: /* @__PURE__ */ e(j, { "aria-hidden": !0 }),
+                              icon: /* @__PURE__ */ e(D, { "aria-hidden": !0 }),
                               "aria-label": s("navigation.headerSettings.appearance.light"),
                               value: "light"
                             }
@@ -176,7 +187,7 @@ const W = N("ds:inline-flex ds:items-center", {
                           /* @__PURE__ */ e(
                             o,
                             {
-                              icon: /* @__PURE__ */ e(D, { "aria-hidden": !0 }),
+                              icon: /* @__PURE__ */ e(z, { "aria-hidden": !0 }),
                               "aria-label": s("navigation.headerSettings.appearance.dark"),
                               value: "dark"
                             }
@@ -206,12 +217,12 @@ const W = N("ds:inline-flex ds:items-center", {
                     ),
                     className: "ds:px-[var(--spacing-sm)] ds:py-[var(--spacing-sm)]",
                     children: /* @__PURE__ */ e(
-                      x,
+                      M,
                       {
                         label: s("navigation.headerSettings.appearance.accessible"),
                         labelSide: "start",
                         size: "sm",
-                        checked: k,
+                        checked: T,
                         onCheckedChange: (a) => n.setAccessibility(a ? "accessible" : "default")
                       }
                     )
@@ -225,8 +236,8 @@ const W = N("ds:inline-flex ds:items-center", {
     );
   }
 );
-U.displayName = "HeaderSettings";
+Y.displayName = "HeaderSettings";
 export {
-  U as HeaderSettings
+  Y as HeaderSettings
 };
 //# sourceMappingURL=index.js.map