@alfadocs/ui-kit 1.47.1 → 1.48.0

package/dist/_chunks/{tabs-BnRaLT0y.js → tabs-CFsuMQ5H.js}

@@ -1,16 +1,17 @@
 import { jsx as a, jsxs as C } from "react/jsx-runtime";
-import { forwardRef as V, useContext as P, useRef as O, useState as B, useEffect as H, useMemo as _, Children as K, isValidElement as Q, useCallback as U, createContext as W } from "react";
+import { forwardRef as V, useContext as I, useRef as A, useState as M, useEffect as q, useMemo as _, Children as F, isValidElement as J, useCallback as K, createContext as Q } from "react";
 import * as j from "@radix-ui/react-tabs";
 import * as k from "@radix-ui/react-dropdown-menu";
-import { a as N, c as M } from "./index-D2ZczOXr.js";
+import { a as N, c as B } from "./index-D2ZczOXr.js";
 import { useTranslation as Y } from "react-i18next";
 import { c as Z } from "./compose-refs-C0k0tdqF.js";
-import { S as D } from "./select-CLSUnKjF.js";
-import { u as ee } from "./registry-DvAUVLHh.js";
-import { X as te } from "./x-B5YnXwCz.js";
-import { u as se } from "./use-direction-Dp8h70PP.js";
-import { C as ae } from "./chevron-down-DWE7GSq9.js";
-const re = {
+import { S as D } from "./select-upNAltly.js";
+import { b as ee } from "./menu-row-BAr8bx1I.js";
+import { u as te } from "./registry-DvAUVLHh.js";
+import { X as se } from "./x-B5YnXwCz.js";
+import { u as ae } from "./use-direction-Dp8h70PP.js";
+import { C as re } from "./chevron-down-DWE7GSq9.js";
+const oe = {
   id: "tabs",
   capabilities: ["select_single"],
   state: {
@@ -50,7 +51,7 @@ const re = {
       description: "Each Tab.Trigger emits its value as data-tab-id."
     }
   }
-}, q = M("ds:relative ds:flex", {
+}, P = B("ds:relative ds:flex", {
   variants: {
     variant: {
       // Shadcn-style segmented control: light container, white active card
@@ -69,7 +70,7 @@ const re = {
     variant: "default",
     orientation: "horizontal"
   }
-}), X = M(
+}), G = B(
   [
     "ds:relative ds:inline-flex ds:items-center ds:justify-center ds:whitespace-nowrap ds:border-0",
     "ds:gap-2 ds:font-medium ds:transition-colors",
@@ -117,7 +118,7 @@ const re = {
       orientation: "horizontal"
     }
   }
-), A = W({
+), O = Q({
   variant: "default",
   size: "md",
   orientation: "horizontal",
@@ -125,32 +126,32 @@ const re = {
   value: "",
   setValue: () => {
   }
-}), L = V(
+}), H = V(
   ({
     variant: o = "default",
     size: s = "md",
-    orientation: d = "horizontal",
-    overflow: n = "dropdown",
+    orientation: n = "horizontal",
+    overflow: d = "dropdown",
     className: i,
     children: u,
     value: t,
     defaultValue: m,
     onValueChange: l,
     id: f,
-    ...b
+    ...g
   }, w) => {
-    const g = O(null), v = Z(w, g), y = se(g), p = t !== void 0, [h, z] = B(
+    const b = A(null), v = Z(w, b), y = ae(b), p = t !== void 0, [h, z] = M(
       m ?? ""
-    ), r = p ? t ?? "" : h, e = U(
+    ), r = p ? t ?? "" : h, e = K(
       (T) => {
         p || z(T), l == null || l(T);
       },
       [p, l]
     ), x = _(
-      () => ({ variant: o, size: s, orientation: d, overflow: n, value: r, setValue: e }),
-      [o, s, d, n, r, e]
-    ), c = O(r);
-    H(() => {
+      () => ({ variant: o, size: s, orientation: n, overflow: d, value: r, setValue: e }),
+      [o, s, n, d, r, e]
+    ), c = A(r);
+    q(() => {
       c.current = r;
     }, [r]);
     const R = _(
@@ -160,11 +161,11 @@ const re = {
       }),
       [e]
     );
-    return ee(re, R, f), /* @__PURE__ */ a(A.Provider, { value: x, children: /* @__PURE__ */ a(
+    return te(oe, R, f), /* @__PURE__ */ a(O.Provider, { value: x, children: /* @__PURE__ */ a(
       j.Root,
       {
         ref: v,
-        orientation: d,
+        orientation: n,
         dir: y,
         value: r,
         onValueChange: e,
@@ -173,34 +174,34 @@ const re = {
         "data-component-id": f,
         className: N(
           "ds:flex",
-          d === "vertical" ? "ds:flex-row ds:gap-[var(--spacing-md)]" : "ds:flex-col",
+          n === "vertical" ? "ds:flex-row ds:gap-[var(--spacing-md)]" : "ds:flex-col",
           i
         ),
-        ...b,
+        ...g,
         children: u
       }
     ) });
   }
 );
-L.displayName = "Tabs";
-const $ = V(
-  ({ className: o, children: s, "aria-label": d, ...n }, i) => {
-    const { variant: u, size: t, orientation: m, overflow: l, value: f, setValue: b } = P(A), { t: w } = Y(), g = O(null), [v, y] = B([]), p = m === "horizontal", h = l === "dropdown" && p;
-    H(() => {
+H.displayName = "Tabs";
+const U = V(
+  ({ className: o, children: s, "aria-label": n, ...d }, i) => {
+    const { variant: u, size: t, orientation: m, overflow: l, value: f, setValue: g } = I(O), { t: w } = Y(), b = A(null), [v, y] = M([]), p = m === "horizontal", h = l === "dropdown" && p;
+    q(() => {
       if (!h) {
         y([]);
         return;
       }
-      const e = g.current;
+      const e = b.current;
       if (!e) return;
       const x = () => {
         const R = e.getBoundingClientRect().right, T = [];
         e.querySelectorAll('[role="tab"]').forEach(
           (S) => {
-            var E;
+            var L;
             if (S.getBoundingClientRect().right > R + 2) {
-              const I = S.getAttribute("data-value") ?? S.dataset.value ?? "", J = ((E = S.textContent) == null ? void 0 : E.trim()) ?? I;
-              T.push({ value: I, label: J });
+              const E = S.getAttribute("data-value") ?? S.dataset.value ?? "", $ = ((L = S.textContent) == null ? void 0 : L.trim()) ?? E;
+              T.push({ value: E, label: $ });
             }
           }
         ), y(T);
@@ -208,9 +209,9 @@ const $ = V(
       return c.observe(e), x(), () => c.disconnect();
     }, [h, s]);
     const z = (e) => {
-      g.current = e, typeof i == "function" ? i(e) : i && (i.current = e);
-    }, r = _(() => l !== "select" ? [] : K.toArray(s).filter(
-      (e) => Q(e)
+      b.current = e, typeof i == "function" ? i(e) : i && (i.current = e);
+    }, r = _(() => l !== "select" ? [] : F.toArray(s).filter(
+      (e) => J(e)
     ).filter(
       (e) => typeof e.props.value == "string" && e.props.value.length > 0
     ).map((e) => {
@@ -224,19 +225,19 @@ const $ = V(
           options: r,
           value: f,
           onValueChange: (e) => {
-            typeof e == "string" && e.length > 0 && b(e);
+            typeof e == "string" && e.length > 0 && g(e);
           },
           size: t,
-          "aria-label": d ?? w("tabs.selectLabel")
+          "aria-label": n ?? w("tabs.selectLabel")
         }
       ) }),
       /* @__PURE__ */ a("div", { className: "ds:hidden ds:@[448px]/tabs:flex ds:relative ds:items-center", children: /* @__PURE__ */ a(
         j.List,
         {
           ref: z,
-          "aria-label": d,
-          className: q({ variant: u, orientation: m, className: o }),
-          ...n,
+          "aria-label": n,
+          className: P({ variant: u, orientation: m, className: o }),
+          ...d,
           children: s
         }
       ) })
@@ -245,14 +246,14 @@ const $ = V(
         j.List,
         {
           ref: z,
-          "aria-label": d,
-          className: q({ variant: u, orientation: m, className: o }),
-          ...n,
+          "aria-label": n,
+          className: P({ variant: u, orientation: m, className: o }),
+          ...d,
           children: s
         }
       ),
       h && v.length > 0 && /* @__PURE__ */ a(
-        oe,
+        ne,
         {
           tabs: v,
           label: w("tabs.moreTabs"),
@@ -262,21 +263,21 @@ const $ = V(
     ] });
   }
 );
-$.displayName = "TabsList";
-function oe({ tabs: o, label: s, size: d }) {
-  const { variant: n } = P(A);
+U.displayName = "TabsList";
+function ne({ tabs: o, label: s, size: n }) {
+  const { variant: d } = I(O);
   return /* @__PURE__ */ C(k.Root, { children: [
     /* @__PURE__ */ C(
       k.Trigger,
       {
         className: N(
-          X({ variant: n, size: d, orientation: "horizontal" }),
+          G({ variant: d, size: n, orientation: "horizontal" }),
           "ds:shrink-0 ds:ms-1"
         ),
         "aria-label": s,
         children: [
           s,
-          /* @__PURE__ */ a(ae, { "aria-hidden": "true", className: "ds:size-4" })
+          /* @__PURE__ */ a(re, { "aria-hidden": "true", className: "ds:size-4" })
         ]
       }
     ),
@@ -285,7 +286,7 @@ function oe({ tabs: o, label: s, size: d }) {
       {
         sideOffset: 4,
         className: N(
-          "ds:z-50 ds:min-w-40 ds:overflow-hidden ds:rounded-[var(--radius-md)]",
+          "ds:z-[var(--z-dropdown)] ds:min-w-40 ds:overflow-hidden ds:rounded-[var(--radius-md)]",
           "ds:border ds:border-border ds:bg-popover ds:p-1 ds:shadow-md",
           "ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out",
           "ds:data-[state=closed]:fade-out-0 ds:data-[state=open]:fade-in-0",
@@ -298,7 +299,7 @@ function oe({ tabs: o, label: s, size: d }) {
               "ds:relative ds:flex ds:cursor-pointer ds:select-none ds:items-center",
               "ds:rounded-[var(--radius-sm)] ds:px-[var(--spacing-sm)] ds:py-[var(--spacing-xs)]",
               "ds:text-[var(--font-size-sm)] ds:text-foreground ds:outline-none",
-              "ds:hover:bg-muted ds:focus:bg-muted",
+              ee.highlighted,
               "ds:data-[disabled]:pointer-events-none ds:data-[disabled]:opacity-50"
             ),
             onSelect: () => {
@@ -315,32 +316,32 @@ function oe({ tabs: o, label: s, size: d }) {
     ) })
   ] });
 }
-const F = V(
+const W = V(
   ({
     variant: o,
     size: s,
-    orientation: d,
-    icon: n,
+    orientation: n,
+    icon: d,
     badge: i,
     dismissible: u = !1,
     onDismiss: t,
     className: m,
     children: l,
     value: f,
-    onKeyDown: b,
+    onKeyDown: g,
     ...w
-  }, g) => {
-    const v = P(A), y = o ?? v.variant, p = s ?? v.size, h = d ?? v.orientation, z = (r) => {
-      u && (r.key === "Delete" || r.key === "Backspace") && (r.preventDefault(), t == null || t()), b == null || b(r);
+  }, b) => {
+    const v = I(O), y = o ?? v.variant, p = s ?? v.size, h = n ?? v.orientation, z = (r) => {
+      u && (r.key === "Delete" || r.key === "Backspace") && (r.preventDefault(), t == null || t()), g == null || g(r);
     };
     return /* @__PURE__ */ C(
       j.Trigger,
       {
-        ref: g,
+        ref: b,
         value: f,
         "data-value": f,
         "data-tab-id": f,
-        className: X({
+        className: G({
           variant: y,
           size: p,
           orientation: h,
@@ -349,7 +350,7 @@ const F = V(
         onKeyDown: z,
         ...w,
         children: [
-          n && /* @__PURE__ */ a("span", { "aria-hidden": "true", className: "ds:shrink-0 ds:size-4", children: n }),
+          d && /* @__PURE__ */ a("span", { "aria-hidden": "true", className: "ds:shrink-0 ds:size-4", children: d }),
           l,
           i && /* @__PURE__ */ a("span", { className: "ds:shrink-0", children: i }),
           u && // Visual-only dismiss indicator — pointer dismiss fires here; keyboard dismiss fires via Delete/Backspace on the trigger above.
@@ -366,7 +367,7 @@ const F = V(
               onPointerDown: (r) => {
                 r.stopPropagation(), r.preventDefault(), t == null || t();
               },
-              children: /* @__PURE__ */ a(te, { className: "ds:size-3.5" })
+              children: /* @__PURE__ */ a(se, { className: "ds:size-3.5" })
             }
           )
         ]
@@ -374,35 +375,35 @@ const F = V(
     );
   }
 );
-F.displayName = "TabsTrigger";
-const G = V(
-  ({ className: o, children: s, ...d }, n) => /* @__PURE__ */ a(
+W.displayName = "TabsTrigger";
+const X = V(
+  ({ className: o, children: s, ...n }, d) => /* @__PURE__ */ a(
     j.Content,
     {
-      ref: n,
+      ref: d,
       className: N(
         "ds:mt-[var(--spacing-sm)] ds:outline-none",
         "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
         "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
         o
       ),
-      ...d,
+      ...n,
       children: s
     }
   )
 );
-G.displayName = "TabsContent";
-const ge = Object.assign(L, {
-  Root: L,
-  List: $,
-  Trigger: F,
-  Content: G
+X.displayName = "TabsContent";
+const xe = Object.assign(H, {
+  Root: H,
+  List: U,
+  Trigger: W,
+  Content: X
 });
 export {
-  ge as T,
-  G as a,
-  $ as b,
-  F as c,
-  re as t
+  xe as T,
+  X as a,
+  U as b,
+  W as c,
+  oe as t
 };
-//# sourceMappingURL=tabs-BnRaLT0y.js.map
+//# sourceMappingURL=tabs-CFsuMQ5H.js.map

package/dist/_chunks/{tag-Ci3xJPcH.js → tag-B65tLWvD.js}

@@ -1,9 +1,10 @@
 import { jsx as e, jsxs as f } from "react/jsx-runtime";
-import { forwardRef as X, useRef as q, useState as E, useEffect as F } from "react";
+import { forwardRef as A, useRef as H, useState as j, useEffect as P } from "react";
 import { c as B } from "./index-D2ZczOXr.js";
-import { useTranslation as G } from "react-i18next";
+import { useTranslation as U } from "react-i18next";
 import { T as v } from "./tooltip-Cp-PLePW.js";
-import { X as H } from "./x-B5YnXwCz.js";
+import { M as X } from "./menu-row-BAr8bx1I.js";
+import { X as q } from "./x-B5YnXwCz.js";
 const V = B(
   [
     "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]",
@@ -13,7 +14,9 @@ const V = B(
     "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
     "ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
     "ds:aria-disabled:cursor-not-allowed ds:aria-disabled:opacity-50",
-    "ds:disabled:cursor-not-allowed ds:disabled:opacity-50"
+    "ds:disabled:cursor-not-allowed ds:disabled:opacity-50",
+    // On a lit menu row every tone shows as an outline in the row's ink.
+    X
   ].join(" "),
   {
     variants: {
@@ -111,7 +114,7 @@ const V = B(
       size: "md"
     }
   }
-), J = B(
+), F = B(
   [
     "ds:inline-flex ds:items-center ds:justify-center ds:shrink-0 ds:rounded-full",
     // Negative end margin keeps the button flush with the pill edge
@@ -132,7 +135,7 @@ const V = B(
     },
     defaultVariants: { size: "md" }
   }
-), L = X(
+), G = A(
   ({
     label: o,
     variant: g = "neutral",
@@ -145,18 +148,18 @@ const V = B(
     maxInlineSize: n = "none",
     className: h
   }, i) => {
-    const { t: w } = G(), y = q(null), [D, C] = E(!1), [O, R] = E("");
-    F(() => {
+    const { t: w } = U(), y = H(null), [C, D] = j(!1), [O, R] = j("");
+    P(() => {
       const s = y.current;
       if (!s || n === "none") return;
-      const z = () => C(s.scrollWidth > s.clientWidth), j = new ResizeObserver(z);
-      return j.observe(s), z(), () => j.disconnect();
+      const z = () => D(s.scrollWidth > s.clientWidth), E = new ResizeObserver(z);
+      return E.observe(s), z(), () => E.disconnect();
     }, [n]);
     const W = (s) => {
       (s.key === "Backspace" || s.key === "Delete") && a && !r && (s.preventDefault(), x(), setTimeout(a, 100));
     }, x = () => {
       R(w("tag.removed", { label: o }));
-    }, K = () => {
+    }, _ = () => {
       !r && a && (x(), setTimeout(a, 100));
     }, d = !!a, N = !!b && !d, T = V({
       variant: g,
@@ -181,18 +184,18 @@ const V = B(
         style: n !== "none" ? { maxInlineSize: n } : void 0,
         children: o
       }
-    ), _ = /* @__PURE__ */ e("span", { role: "status", "aria-live": "polite", className: "ds:sr-only", children: O }), A = d ? /* @__PURE__ */ e(
+    ), K = /* @__PURE__ */ e("span", { role: "status", "aria-live": "polite", className: "ds:sr-only", children: O }), M = d ? /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         "aria-label": w("tag.remove", { label: o }),
-        onClick: K,
+        onClick: _,
         disabled: r,
         tabIndex: -1,
-        className: J({ size: t }),
-        children: /* @__PURE__ */ e(H, { "aria-hidden": "true" })
+        className: F({ size: t }),
+        children: /* @__PURE__ */ e(q, { "aria-hidden": "true" })
       }
-    ) : null, u = n !== "none" && D;
+    ) : null, u = n !== "none" && C;
     if (N) {
       const s = /* @__PURE__ */ f(
         "button",
@@ -226,10 +229,10 @@ const V = B(
             "data-component": "tag",
             className: T,
             children: [
-              _,
+              K,
               l,
               c,
-              A
+              M
             ]
           }
         )
@@ -251,8 +254,8 @@ const V = B(
     return u ? /* @__PURE__ */ e(v, { label: o, children: k }) : k;
   }
 );
-L.displayName = "Tag";
+G.displayName = "Tag";
 export {
-  L as T
+  G as T
 };
-//# sourceMappingURL=tag-Ci3xJPcH.js.map
+//# sourceMappingURL=tag-B65tLWvD.js.map