@alfadocs/ui-kit 0.65.0 → 0.67.0

package/dist/_chunks/{scroll-area-BWqCkEGz.js → scroll-area-eccd_Uf-.js}

@@ -1,6 +1,6 @@
 import { jsx as s, jsxs as g } from "react/jsx-runtime";
 import { forwardRef as v, useRef as z } from "react";
-import * as o from "@radix-ui/react-scroll-area";
+import * as r from "@radix-ui/react-scroll-area";
 import { c as b } from "./index-D2ZczOXr.js";
 import { u as p } from "./use-direction-Dp8h70PP.js";
 const u = b(
@@ -43,72 +43,82 @@ const u = b(
     'ds:before:absolute ds:before:content-[""] ds:before:inset-inline-[calc((var(--min-target-size)-100%)/-2)]',
     "ds:before:inset-block-[calc((var(--min-target-size)-100%)/-2)]"
   ].join(" ")
-), w = (r) => r === "auto" || r === void 0 ? "hover" : r, S = {
+), w = (o) => o === "auto" || o === void 0 ? "hover" : o, S = {
   vertical: "ds:overflow-y-auto",
   horizontal: "ds:overflow-x-auto",
   both: "ds:overflow-auto"
 }, m = v(
   ({
-    orientation: r = "vertical",
+    orientation: o = "vertical",
     size: e = "md",
-    type: i = "auto",
-    className: l,
+    type: l = "auto",
+    className: i,
     children: t,
     scrollHideDelay: n,
     ...d
   }, c) => {
     const a = z(null), h = p(a);
     return /* @__PURE__ */ g(
-      o.Root,
+      r.Root,
       {
         ref: a,
-        type: w(i),
+        type: w(l),
         dir: h,
         scrollHideDelay: n,
         "data-component": "scroll-area",
         className: [
           "ds:relative ds:overflow-hidden",
           "ds:min-w-0 ds:min-h-0",
-          l
+          i
         ].filter(Boolean).join(" "),
         ...d,
         children: [
           /* @__PURE__ */ s(
-            o.Viewport,
+            r.Viewport,
             {
               ref: c,
               tabIndex: 0,
               className: [
                 "ds:h-full ds:w-full ds:rounded-[inherit]",
+                // Radix wraps the viewport content in an inline
+                // `display:table; min-width:100%` div that grows to the content's
+                // MAX-content width. In a vertical-only scroll area the Root's
+                // overflow-x is hidden, so anything wider than the viewport is
+                // silently CLIPPED — not scrollable (seen in the AiToolsRail inbox
+                // panel once accessible-mode type pushed content past the panel
+                // width). Forcing that wrapper to `block` makes content wrap to the
+                // viewport width instead. Horizontal / both keep the table wrapper
+                // so they can still scroll on the x-axis.
+                o === "vertical" ? "ds:[&>div]:!block" : "",
                 // keyboard focus ring on the scroll container
                 "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:forced-colors:focus-visible:outline-[Highlight]"
-              ].join(" "),
+              ].filter(Boolean).join(" "),
               children: t
             }
           ),
-          (r === "vertical" || r === "both") && // forceMount keeps the element in the DOM so CSS opacity transition
+          (o === "vertical" || o === "both") && // forceMount keeps the element in the DOM so CSS opacity transition
           // can animate the show/hide instead of mount/unmount snapping.
           /* @__PURE__ */ s(
-            o.Scrollbar,
+            r.Scrollbar,
             {
               forceMount: !0,
               orientation: "vertical",
               className: u({ size: e }),
-              children: /* @__PURE__ */ s(o.Thumb, { className: f() })
+              children: /* @__PURE__ */ s(r.Thumb, { className: f() })
             }
           ),
-          (r === "horizontal" || r === "both") && /* @__PURE__ */ s(
-            o.Scrollbar,
+          (o === "horizontal" || o === "both") && /* @__PURE__ */ s(
+            r.Scrollbar,
             {
               forceMount: !0,
               orientation: "horizontal",
               className: u({ size: e }),
-              children: /* @__PURE__ */ s(o.Thumb, { className: f() })
+              children: /* @__PURE__ */ s(r.Thumb, { className: f() })
             }
           ),
-          /* @__PURE__ */ s(o.Corner, {})
+          /* @__PURE__ */ s(r.Corner, {})
         ]
       }
     );
@@ -116,24 +126,24 @@ const u = b(
 );
 m.displayName = "RadixScrollArea";
 const x = v(
-  (r, e) => {
+  (o, e) => {
     const {
-      orientation: i = "vertical",
-      type: l = "auto",
+      orientation: l = "vertical",
+      type: i = "auto",
       className: t,
       children: n,
       scrollHideDelay: d,
       size: c,
       ...a
-    } = r;
-    return l === "native" ? /* @__PURE__ */ s(
+    } = o;
+    return i === "native" ? /* @__PURE__ */ s(
       "div",
       {
         ref: e,
         "data-component": "scroll-area",
         tabIndex: 0,
         className: [
-          S[i],
+          S[l],
           "ds:min-w-0 ds:min-h-0",
           "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)]",
@@ -143,17 +153,17 @@ const x = v(
         ...a,
         children: n
       }
-    ) : /* @__PURE__ */ s(m, { ref: e, ...r });
+    ) : /* @__PURE__ */ s(m, { ref: e, ...o });
   }
 );
 x.displayName = "ScrollArea";
-const R = o.Root, T = o.Viewport, V = o.Scrollbar, H = o.Thumb, B = o.Corner;
+const R = r.Root, T = r.Viewport, V = r.Scrollbar, B = r.Thumb, H = r.Corner;
 export {
   x as S,
-  B as a,
+  H as a,
   R as b,
   V as c,
-  H as d,
+  B as d,
   T as e
 };
-//# sourceMappingURL=scroll-area-BWqCkEGz.js.map
+//# sourceMappingURL=scroll-area-eccd_Uf-.js.map

package/dist/_chunks/{sidebar-DPEHzxLZ.js → sidebar-CGjIk_FQ.js}

@@ -1,8 +1,8 @@
 import { jsx as s, jsxs as c, Fragment as $ } from "react/jsx-runtime";
-import { forwardRef as g, useState as _, useEffect as W, useCallback as J, useRef as U, useMemo as O, useId as is, useContext as Q, createContext as ss } from "react";
+import { forwardRef as g, useState as P, useEffect as W, useCallback as J, useRef as U, useMemo as O, useId as is, useContext as Q, createContext as ss } from "react";
 import * as R from "@radix-ui/react-dialog";
 import * as K from "@radix-ui/react-collapsible";
-import * as P from "@radix-ui/react-accordion";
+import * as E from "@radix-ui/react-accordion";
 import * as b from "@radix-ui/react-tooltip";
 import { a as ns } from "./accordion-9lJSMMsZ.js";
 import { Slot as os } from "@radix-ui/react-slot";
@@ -119,6 +119,9 @@ const X = T(
     // solid background (e.g. AppFrame's `<main>` surface), otherwise
     // the shadow that projects towards the inline-end gets covered.
     "ds:relative ds:z-[1] ds:shadow-[var(--shadow-md)]",
+    // Accessible (AAA) theme prefers a solid border over a soft shadow as the
+    // separation cue — swap the resting elevation for a real 1px `border-e`.
+    "ds:[.theme-accessible_&]:border-e ds:[.theme-accessible_&]:shadow-none",
     "ds:h-full",
     "ds:transition-[inline-size] ds:duration-[var(--animation-duration)]",
     "ds:motion-reduce:transition-none",
@@ -170,7 +173,7 @@ const X = T(
     id: p,
     ...h
   }, N) => {
-    const { t: x } = B(), d = e !== void 0, [w, z] = _(
+    const { t: x } = B(), d = e !== void 0, [w, z] = P(
       () => d ? e : ws(a)
     ), v = d ? e : w;
     W(() => {
@@ -196,7 +199,7 @@ const X = T(
       [S]
     );
     cs(ys, F, p);
-    const D = U(null), A = O(() => ls(N, D), [N]), { separatorProps: L, isResizing: E } = ts({
+    const D = U(null), A = O(() => ls(N, D), [N]), { separatorProps: L, isResizing: _ } = ts({
       edge: "inline-end",
       targetRef: D,
       cssProperty: "--sidebar-modern-expanded-size",
@@ -289,7 +292,7 @@ const X = T(
             "data-component-id": p,
             "data-mode": v,
             "data-density": i,
-            "data-resizing": E ? "" : void 0,
+            "data-resizing": _ ? "" : void 0,
             className: [
               X({ mode: v, density: i }),
               i === "compact" ? "ds:density-compact" : "",
@@ -303,7 +306,7 @@ const X = T(
                 {
                   ...L,
                   "aria-label": x("navigation.sidebar.resize"),
-                  "data-resizing": E ? "" : void 0,
+                  "data-resizing": _ ? "" : void 0,
                   className: ks
                 }
               ) : null
@@ -435,7 +438,7 @@ const Bs = [
       ] });
     const d = "section";
     return /* @__PURE__ */ s(
-      P.Root,
+      E.Root,
       {
         type: "single",
         collapsible: !0,
@@ -443,8 +446,8 @@ const Bs = [
         value: n === void 0 ? void 0 : n ? d : "",
         onValueChange: t ? (w) => t(w === d) : void 0,
         asChild: !0,
-        children: /* @__PURE__ */ s("div", { ref: f, className: x, ...u, children: /* @__PURE__ */ c(P.Item, { value: d, children: [
-          /* @__PURE__ */ s(P.Header, { className: "ds:flex", children: /* @__PURE__ */ c(P.Trigger, { className: Bs, children: [
+        children: /* @__PURE__ */ s("div", { ref: f, className: x, ...u, children: /* @__PURE__ */ c(E.Item, { value: d, children: [
+          /* @__PURE__ */ s(E.Header, { className: "ds:flex", children: /* @__PURE__ */ c(E.Trigger, { className: Bs, children: [
             a ? /* @__PURE__ */ s("span", { "aria-hidden": "true", className: Y, children: a }) : null,
             /* @__PURE__ */ s("span", { className: "ds:flex-1 ds:text-start", children: e }),
             /* @__PURE__ */ s(
@@ -547,7 +550,7 @@ const Ds = [
   }
 );
 As.displayName = "SidebarGroup";
-const Es = T(
+const _s = T(
   [
     // Every row is a pin-hover parent so inline pin / reorder affordances can
     // fade in on hover of the whole row — keep `group/item` on this selector.
@@ -626,7 +629,7 @@ const Es = T(
         ref: f,
         "aria-current": a ? "page" : void 0,
         "aria-label": o,
-        className: Es({
+        className: _s({
           mode: p,
           density: h,
           isActive: a,
@@ -679,7 +682,7 @@ const Es = T(
   }
 );
 rs.displayName = "SidebarItem";
-const Ps = g(({ className: e, children: a, ...r }, i) => /* @__PURE__ */ s(
+const Es = g(({ className: e, children: a, ...r }, i) => /* @__PURE__ */ s(
   "span",
   {
     ref: i,
@@ -700,8 +703,8 @@ const Ps = g(({ className: e, children: a, ...r }, i) => /* @__PURE__ */ s(
     children: a
   }
 ));
-Ps.displayName = "SidebarItemIcon";
-const _s = g(({ className: e, children: a, ...r }, i) => {
+Es.displayName = "SidebarItemIcon";
+const Ps = g(({ className: e, children: a, ...r }, i) => {
   const { mode: n } = y();
   return /* @__PURE__ */ s(
     "span",
@@ -719,7 +722,7 @@ const _s = g(({ className: e, children: a, ...r }, i) => {
     }
   );
 });
-_s.displayName = "SidebarItemLabel";
+Ps.displayName = "SidebarItemLabel";
 const Hs = g(({ className: e, children: a, ...r }, i) => {
   const { mode: n } = y(), t = n === "icon";
   return /* @__PURE__ */ s(
@@ -854,6 +857,17 @@ Vs.displayName = "SidebarPrimaryAction";
 const Ks = [
   "ds:inline-flex ds:items-center ds:justify-center ds:shrink-0",
   "ds:size-6 ds:rounded-[var(--radius-sm)]",
+  // Lift above the Sidebar's opt-in resize handle (z-[2]). When `resizable`,
+  // that handle's ::before hit-area reaches ~--min-target-size/2 inward from
+  // the inline-end edge — exactly where these end-aligned pin stars sit — so
+  // without a higher stacking order the separator swallows the click and
+  // pinning silently fails. Pointer-events stay off until the row is hovered
+  // or the star is focused, so the handle is still fully grabbable at rest
+  // (including touch, where the star never reveals). On a NON-resizable
+  // sidebar there's no handle to clear, but the same gating is inert — the
+  // star reveals and accepts clicks on hover/focus exactly as before.
+  "ds:relative ds:z-[3]",
+  "ds:pointer-events-none ds:group-hover/item:pointer-events-auto ds:focus-visible:pointer-events-auto",
   // Pin stars carry the accent tint to match every other icon in the rail.
   // Stays quiet via opacity — reveals only on row hover / focus.
   "ds:text-[var(--accent)]",
@@ -896,7 +910,7 @@ const Ks = [
 Z.displayName = "SidebarPinButton";
 const ds = ss(null), Us = () => Q(ds), Os = g(
   ({ heading: e, emptyMessage: a, onReorder: r, className: i, children: n, ...t }, l) => {
-    const { t: o } = B(), u = e ?? o("navigation.sidebar.favorites", "Favourites"), f = Array.isArray(n) ? n.filter(Boolean) : n ? [n] : [], p = f.length, h = p > 0, [N, x] = _(null), [d, w] = _(""), z = U(!1), v = J((j) => {
+    const { t: o } = B(), u = e ?? o("navigation.sidebar.favorites", "Favourites"), f = Array.isArray(n) ? n.filter(Boolean) : n ? [n] : [], p = f.length, h = p > 0, [N, x] = P(null), [d, w] = P(""), z = U(!1), v = J((j) => {
       z.current = !z.current, w(z.current ? j : `${j}​`);
     }, []), S = O(
       () => ({ onReorder: r, count: p, dragSource: N, setDragSource: x, announce: v }),
@@ -965,7 +979,7 @@ const Gs = T(
     children: f,
     ...p
   }, h) => {
-    const { t: N } = B(), { mode: x } = y(), d = Us(), [w, z] = _(!1), v = !!(d != null && d.onReorder) && x !== "icon", S = i ?? o ?? "", j = is(), k = (m, I) => {
+    const { t: N } = B(), { mode: x } = y(), d = Us(), [w, z] = P(!1), v = !!(d != null && d.onReorder) && x !== "icon", S = i ?? o ?? "", j = is(), k = (m, I) => {
       if (!(d != null && d.onReorder)) return;
       const V = Math.max(0, Math.min(d.count - 1, I));
       V !== m && (d.onReorder(m, V), d.announce(
@@ -983,7 +997,7 @@ const Gs = T(
       d == null || d.setDragSource(null), z(!1);
     }, L = (m) => {
       !v || (d == null ? void 0 : d.dragSource) === null || (m.preventDefault(), m.dataTransfer && (m.dataTransfer.dropEffect = "move"), z(!0));
-    }, E = () => z(!1), M = (m) => {
+    }, _ = () => z(!1), M = (m) => {
       if (!v) return;
       m.preventDefault();
       const I = d == null ? void 0 : d.dragSource;
@@ -1000,7 +1014,7 @@ const Gs = T(
         onDragStart: v ? D : void 0,
         onDragEnd: v ? A : void 0,
         onDragOver: L,
-        onDragLeave: E,
+        onDragLeave: _,
         onDrop: M,
         children: [
           /* @__PURE__ */ s(
@@ -1261,8 +1275,8 @@ export {
   Ts as g,
   rs as h,
   Hs as i,
-  Ps as j,
-  _s as k,
+  Es as j,
+  Ps as k,
   Z as l,
   Vs as m,
   Ws as n,
@@ -1272,4 +1286,4 @@ export {
   ys as s,
   y as u
 };
-//# sourceMappingURL=sidebar-DPEHzxLZ.js.map
+//# sourceMappingURL=sidebar-CGjIk_FQ.js.map

package/dist/_chunks/{suggestion-chip-C4kxWUIs.js → suggestion-chip-Bk4PmYTg.js}

@@ -23,9 +23,9 @@ const Q = q(
   {
     variants: {
       intent: {
-        default: "ds:bg-muted/20 ds:text-foreground ds:border-transparent ds:hover:bg-accent/10",
-        suggestion: "ds:bg-[color:var(--primary)]/10 ds:text-foreground ds:border-transparent ds:hover:bg-[color:var(--primary)]/15",
-        followup: "ds:bg-muted/30 ds:text-foreground ds:border-transparent ds:hover:bg-muted/40"
+        default: "ds:bg-muted/20 ds:text-foreground ds:border-[color:var(--border)] ds:hover:bg-accent/10",
+        suggestion: "ds:bg-[color:var(--primary)]/10 ds:text-foreground ds:border-[color:var(--foreground)] ds:hover:bg-[color:var(--primary)]/15",
+        followup: "ds:bg-muted/30 ds:text-foreground ds:border-[color:var(--border)] ds:hover:bg-muted/40"
       },
       // Weight, family, tracking, line-height all come from `.type-label` on the base.
       // Size variants override --type-label-size to shift the ramp step.
@@ -38,34 +38,34 @@ const Q = q(
     defaultVariants: { intent: "default", size: "md" }
   }
 ), F = B(null), W = V(({ label: k, className: I, children: A, ...C }, g) => {
-  const { t: p, i18n: a } = J(), v = a.dir() === "rtl", [n, m] = T([]), [i, d] = T(null), l = j(/* @__PURE__ */ new Map()), x = f((t) => {
+  const { t: p, i18n: d } = J(), v = d.dir() === "rtl", [o, m] = T([]), [i, a] = T(null), l = j(/* @__PURE__ */ new Map()), x = f((t) => {
     m((r) => r.includes(t) ? r : [...r, t]);
   }, []), z = f((t) => {
     m((r) => r.filter((u) => u !== t)), l.current.delete(t);
-  }, []), o = f((t) => d(t), []);
+  }, []), n = f((t) => a(t), []);
   G(() => {
-    !i && n.length > 0 && d(n[0]), i && !n.includes(i) && d(n[0] ?? null);
-  }, [i, n]);
+    !i && o.length > 0 && a(o[0]), i && !o.includes(i) && a(o[0] ?? null);
+  }, [i, o]);
   const e = f(
     (t, r) => {
-      const u = n.indexOf(t);
+      const u = o.indexOf(t);
       if (u === -1) return;
       let c = u;
-      r === "next" && (c = (u + 1) % n.length), r === "prev" && (c = (u - 1 + n.length) % n.length), r === "first" && (c = 0), r === "last" && (c = n.length - 1);
-      const b = n[c];
-      d(b);
+      r === "next" && (c = (u + 1) % o.length), r === "prev" && (c = (u - 1 + o.length) % o.length), r === "first" && (c = 0), r === "last" && (c = o.length - 1);
+      const b = o[c];
+      a(b);
       const w = l.current.get(b);
       w == null || w.focus();
     },
-    [n]
+    [o]
   ), h = f(
     (t, r) => {
       r ? l.current.set(t, r) : l.current.delete(t);
     },
     []
   ), N = U(
-    () => ({ register: x, unregister: z, focusedId: i, setFocus: o, onArrowMove: e, isRTL: v }),
-    [x, z, i, o, e, v]
+    () => ({ register: x, unregister: z, focusedId: i, setFocus: n, onArrowMove: e, isRTL: v }),
+    [x, z, i, n, e, v]
   );
   return /* @__PURE__ */ y(E.Provider, { value: h, children: /* @__PURE__ */ y(F.Provider, { value: N, children: /* @__PURE__ */ y(
     "div",
@@ -92,28 +92,28 @@ const E = B(null), X = V(
     startIcon: C,
     children: g,
     onSelect: p,
-    onRemove: a,
+    onRemove: d,
     keepOnSelect: v = !1,
-    className: n,
+    className: o,
     disabled: m,
     onKeyDown: i,
-    onFocus: d,
+    onFocus: a,
     onClick: l,
     ...x
   }, z) => {
-    const o = O(), e = L(F), h = L(E), [N, t] = T(!1), r = j(null), u = (s) => {
-      r.current = s, h == null || h(o, s);
+    const n = O(), e = L(F), h = L(E), [N, t] = T(!1), r = j(null), u = (s) => {
+      r.current = s, h == null || h(n, s);
     }, c = j(e);
     c.current = e, G(() => {
       const s = c.current;
       if (s)
-        return s.register(o), () => s.unregister(o);
-    }, [o]);
-    const b = e ? e.focusedId === o : !0, w = e ? b ? 0 : -1 : 0, M = typeof A == "string" ? A : typeof g == "string" ? g : "", R = f(() => {
-      p == null || p(M), a ? a() : v || t(!0);
-    }, [p, M, a, v]), D = f(() => {
-      a ? a() : t(!0);
-    }, [a]);
+        return s.register(n), () => s.unregister(n);
+    }, [n]);
+    const b = e ? e.focusedId === n : !0, w = e ? b ? 0 : -1 : 0, M = typeof A == "string" ? A : typeof g == "string" ? g : "", R = f(() => {
+      p == null || p(M), d ? d() : v || t(!0);
+    }, [p, M, d, v]), D = f(() => {
+      d ? d() : t(!0);
+    }, [d]);
     return S(
       z,
       () => ({
@@ -135,14 +135,14 @@ const E = B(null), X = V(
         onKeyDown: (s) => {
           if (i == null || i(s), !e) return;
           const H = e.isRTL ? "ArrowLeft" : "ArrowRight", P = e.isRTL ? "ArrowRight" : "ArrowLeft";
-          s.key === H || s.key === "ArrowDown" ? (s.preventDefault(), e.onArrowMove(o, "next")) : s.key === P || s.key === "ArrowUp" ? (s.preventDefault(), e.onArrowMove(o, "prev")) : s.key === "Home" ? (s.preventDefault(), e.onArrowMove(o, "first")) : s.key === "End" && (s.preventDefault(), e.onArrowMove(o, "last"));
+          s.key === H || s.key === "ArrowDown" ? (s.preventDefault(), e.onArrowMove(n, "next")) : s.key === P || s.key === "ArrowUp" ? (s.preventDefault(), e.onArrowMove(n, "prev")) : s.key === "Home" ? (s.preventDefault(), e.onArrowMove(n, "first")) : s.key === "End" && (s.preventDefault(), e.onArrowMove(n, "last"));
         },
         onFocus: (s) => {
-          d == null || d(s), e && !b && e.setFocus(o);
+          a == null || a(s), e && !b && e.setFocus(n);
         },
         "data-component": "suggestion-chip",
         "data-component-id": x.id,
-        className: Q({ intent: k, size: I, className: n }),
+        className: Q({ intent: k, size: I, className: o }),
         ...x,
         children: [
           C ? /* @__PURE__ */ y(
@@ -164,4 +164,4 @@ export {
   X as S,
   W as a
 };
-//# sourceMappingURL=suggestion-chip-C4kxWUIs.js.map
+//# sourceMappingURL=suggestion-chip-Bk4PmYTg.js.map

package/dist/_chunks/{tab-bar-Xetknddo.js → tab-bar-B1ovILzh.js}

@@ -1,7 +1,7 @@
 import { jsx as a, jsxs as u, Fragment as b } from "react/jsx-runtime";
 import { forwardRef as h, Fragment as x } from "react";
 import { c as o } from "./index-D2ZczOXr.js";
-import { B as C } from "./badge-zsf5i5bH.js";
+import { B as C } from "./badge-CqGsX32l.js";
 function w(r) {
   return r > 99 ? "99+" : String(r);
 }
@@ -102,4 +102,4 @@ j.displayName = "TabBar";
 export {
   j as T
 };
-//# sourceMappingURL=tab-bar-Xetknddo.js.map
+//# sourceMappingURL=tab-bar-B1ovILzh.js.map