impact-nova 1.6.4 → 1.6.6

package/dist/components/ui/dialog.js

@@ -1,63 +1,66 @@
 import { jsxs as l, jsx as o } from "react/jsx-runtime";
 import * as n from "react";
-import * as t from "@radix-ui/react-dialog";
-import { X as f } from "lucide-react";
+import * as a from "@radix-ui/react-dialog";
+import { X as y } from "lucide-react";
 import { cn as i } from "../../lib/utils.js";
-import { Tooltip as g, TooltipTrigger as y, TooltipContent as x } from "./tooltip.js";
-import { useImpactNovaI18n as u } from "../../i18n/ImpactNovaI18nContext.js";
-const P = t.Root, B = t.Trigger, N = t.Portal, F = t.Close, r = n.forwardRef(({ className: e, ...a }, s) => /* @__PURE__ */ o(
-  t.Overlay,
+import { Tooltip as u, TooltipTrigger as x, TooltipContent as N } from "./tooltip.js";
+import { useImpactNovaI18n as v } from "../../i18n/ImpactNovaI18nContext.js";
+const B = a.Root, H = a.Trigger, D = a.Portal, I = a.Close, c = n.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ o(
+  a.Overlay,
   {
     ref: s,
     className: i(
       "fixed inset-0 z-50 bg-scrim  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       e
     ),
-    ...a
+    ...t
   }
 ));
-r.displayName = t.Overlay.displayName;
-const v = n.forwardRef(({ className: e, children: a, hideClose: s, ...c }, m) => {
-  const { t: p } = u(), d = p("aria.close");
-  return /* @__PURE__ */ l(N, { children: [
-    /* @__PURE__ */ o(r, {}),
+c.displayName = a.Overlay.displayName;
+const b = n.forwardRef(({ className: e, children: t, hideClose: s, onOpenAutoFocus: m, ...p }, f) => {
+  const { t: g } = v(), d = g("aria.close");
+  return /* @__PURE__ */ l(D, { children: [
+    /* @__PURE__ */ o(c, {}),
     /* @__PURE__ */ l(
-      t.Content,
+      a.Content,
       {
-        ref: m,
+        ref: f,
         "aria-describedby": void 0,
         "data-component": "dialog-content",
+        onOpenAutoFocus: (r) => {
+          r.preventDefault(), m?.(r);
+        },
         className: i(
           "fixed left-[50%] top-[50%] z-50 flex flex-col w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-canvas shadow-xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg overflow-hidden",
           e
         ),
-        ...c,
+        ...p,
         children: [
-          a,
-          !s && /* @__PURE__ */ l(g, { children: [
-            /* @__PURE__ */ o(y, { asChild: !0, children: /* @__PURE__ */ l(
-              t.Close,
+          t,
+          !s && /* @__PURE__ */ l(u, { children: [
+            /* @__PURE__ */ o(x, { asChild: !0, children: /* @__PURE__ */ l(
+              a.Close,
               {
                 "data-component": "dialog-close",
                 className: "absolute right-4 top-4 rounded-sm opacity-50 ring-offset-canvas transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-focus-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-content-muted",
                 "aria-label": d,
                 children: [
-                  /* @__PURE__ */ o(f, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ o(y, { className: "h-4 w-4" }),
                   /* @__PURE__ */ o("span", { className: "sr-only", children: d })
                 ]
               }
             ) }),
-            /* @__PURE__ */ o(x, { variant: "tertiary", side: "top", children: d })
+            /* @__PURE__ */ o(N, { variant: "tertiary", side: "top", children: d })
           ] })
         ]
       }
     )
   ] });
 });
-v.displayName = t.Content.displayName;
-const D = ({
+b.displayName = a.Content.displayName;
+const h = ({
   className: e,
-  ...a
+  ...t
 }) => /* @__PURE__ */ o(
   "div",
   {
@@ -65,24 +68,24 @@ const D = ({
       "flex flex-col text-center sm:text-left bg-canvas-tint p-4 border-b",
       e
     ),
-    ...a
+    ...t
   }
 );
-D.displayName = "DialogHeader";
-const b = ({
+h.displayName = "DialogHeader";
+const w = ({
   className: e,
-  ...a
+  ...t
 }) => /* @__PURE__ */ o(
   "div",
   {
     className: i("px-6 py-6 flex-1 overflow-y-auto min-h-0", e),
-    ...a
+    ...t
   }
 );
-b.displayName = "DialogBody";
-const h = ({
+w.displayName = "DialogBody";
+const T = ({
   className: e,
-  ...a
+  ...t
 }) => /* @__PURE__ */ o(
   "div",
   {
@@ -90,12 +93,12 @@ const h = ({
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:items-center sm:space-x-2 px-4 py-3 bg-canvas-elevated",
       e
     ),
-    ...a
+    ...t
   }
 );
-h.displayName = "DialogFooter";
-const w = n.forwardRef(({ className: e, ...a }, s) => /* @__PURE__ */ o(
-  t.Title,
+T.displayName = "DialogFooter";
+const C = n.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ o(
+  a.Title,
   {
     ref: s,
     "data-component": "dialog-title",
@@ -103,29 +106,29 @@ const w = n.forwardRef(({ className: e, ...a }, s) => /* @__PURE__ */ o(
       "text-md font-bold leading-none tracking-tight text-content",
       e
     ),
-    ...a
+    ...t
   }
 ));
-w.displayName = t.Title.displayName;
-const T = n.forwardRef(({ className: e, ...a }, s) => /* @__PURE__ */ o(
-  t.Description,
+C.displayName = a.Title.displayName;
+const R = n.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ o(
+  a.Description,
   {
     ref: s,
     className: i("text-sm text-content-secondary leading-relaxed", e),
-    ...a
+    ...t
   }
 ));
-T.displayName = t.Description.displayName;
+R.displayName = a.Description.displayName;
 export {
-  P as Dialog,
-  b as DialogBody,
-  F as DialogClose,
-  v as DialogContent,
-  T as DialogDescription,
-  h as DialogFooter,
-  D as DialogHeader,
-  r as DialogOverlay,
-  N as DialogPortal,
-  w as DialogTitle,
-  B as DialogTrigger
+  B as Dialog,
+  w as DialogBody,
+  I as DialogClose,
+  b as DialogContent,
+  R as DialogDescription,
+  T as DialogFooter,
+  h as DialogHeader,
+  c as DialogOverlay,
+  D as DialogPortal,
+  C as DialogTitle,
+  H as DialogTrigger
 };

package/dist/components/ui/filter-strip/filter-strip.js

@@ -17,10 +17,10 @@ const E = ({
   onSavedFiltersScroll: f,
   onViewAll: d,
   onOverflowClick: x,
-  selectedFilter: N,
-  onSelectedFilterChange: w,
-  onDropdownOpenChange: g,
-  isLoadingFilterPreferencesList: v,
+  selectedFilter: w,
+  onSelectedFilterChange: N,
+  onDropdownOpenChange: v,
+  isLoadingFilterPreferencesList: g,
   isLoading: k,
   onEditSavedFilter: b,
   onDeleteSavedFilter: u,
@@ -66,22 +66,22 @@ const E = ({
     {
       "data-component": "filter-strip",
       className: l(
-        "flex w-full h-12 items-center gap-3 bg-canvas-elevated px-6 py-2",
+        "flex w-full h-12 items-center gap-3 bg-canvas-elevated px-6 py-2 overflow-visible",
         a
       ),
       children: [
         /* @__PURE__ */ e(
           I,
           {
-            selectedFilter: N,
-            onSelectedFilterChange: w,
+            selectedFilter: w,
+            onSelectedFilterChange: N,
             savedFilters: o,
             recentFilters: p,
             onApplySavedFilter: c,
             onSavedFilterSearch: h,
             onSavedFiltersScroll: f,
-            onDropdownOpenChange: g,
-            isLoadingFilterPreferencesList: v,
+            onDropdownOpenChange: v,
+            isLoadingFilterPreferencesList: g,
             onEditSavedFilter: b,
             onDeleteSavedFilter: u,
             onSetDefaultSavedFilter: S

package/dist/components/ui/filter-strip/filter-summary.js

@@ -106,7 +106,7 @@ const he = ({
     return /* @__PURE__ */ e(
       "div",
       {
-        className: "flex max-h-[160px] flex-col overflow-y-auto",
+        className: "flex max-h-[160px] flex-col gap-1 overflow-y-auto px-1",
         onScroll: P,
         children: a.map((t) => {
           const o = i?.label === t.label;
@@ -115,7 +115,7 @@ const he = ({
             {
               type: "button",
               className: b(
-                "mb-1 flex justify-between cursor-pointer rounded-lg px-3 py-2 text-sm font-medium font-['Manrope'] hover:bg-[#f5f6fa] w-full text-left bg-transparent border-none",
+                "flex justify-between cursor-pointer rounded-lg px-3 py-2 text-sm font-medium font-['Manrope'] hover:bg-[#f5f6fa] w-full text-left bg-transparent border-none",
                 o ? "bg-[#edf0ff]" : "text-[#1f2b4d]"
               ),
               onClick: () => x({ label: t.label, savedItem: t }),
@@ -171,7 +171,7 @@ const he = ({
       H,
       {
         align: "start",
-        className: "w-[280px] p-0 shadow-[0_0_4px_0_rgba(0,0,0,0.12)]",
+        className: "w-[280px] p-0 shadow-[0_0_4px_0_rgba(0,0,0,0.12)] overflow-visible",
         sideOffset: 8,
         children: /* @__PURE__ */ l("div", { className: "flex w-full flex-col py-[8px] px-[6px]", children: [
           Q(),

package/dist/components/ui/input.js

@@ -1,10 +1,10 @@
-import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
 import * as b from "react";
 import { Info as h } from "../../icons/index.js";
 import { cva as v } from "class-variance-authority";
 import { cn as e } from "../../lib/utils.js";
 const g = v(
-  "flex w-full items-center gap-1 rounded-md border bg-transparent px-3 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-content-muted focus-within:outline-none hover:border-brand disabled:cursor-not-allowed disabled:bg-disabled-surface disabled:text-disabled-foreground disabled:border-stroke",
+  "flex w-full items-center gap-1 rounded-md border bg-transparent px-3 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-content-muted focus-within:outline-none focus-within:border-brand hover:border-brand disabled:cursor-not-allowed disabled:bg-disabled-surface disabled:text-disabled-foreground disabled:border-stroke",
   {
     variants: {
       isError: {
@@ -28,7 +28,7 @@ const g = v(
     }
   }
 ), N = b.forwardRef(
-  ({ className: u, type: f, label: n, helperText: o, isError: t, size: p, disabled: r, prefix: s, suffix: i, prefixClick: l, suffixClick: c, ...m }, x) => /* @__PURE__ */ d(
+  ({ className: m, type: f, label: d, helperText: o, isError: t, size: p, disabled: r, prefix: s, suffix: i, prefixClick: l, suffixClick: c, ...u }, x) => /* @__PURE__ */ n(
     "div",
     {
       className: "flex w-full flex-col gap-[6px]",
@@ -36,8 +36,8 @@ const g = v(
       "data-disabled": r || void 0,
       "data-invalid": t || void 0,
       children: [
-        /* @__PURE__ */ d("div", { className: "flex flex-col gap-[6px]", children: [
-          n && /* @__PURE__ */ d(
+        /* @__PURE__ */ n("div", { className: "flex flex-col gap-[6px]", children: [
+          d && /* @__PURE__ */ n(
             "label",
             {
               className: e(
@@ -46,17 +46,18 @@ const g = v(
                 t && "text-destructive"
               ),
               children: [
-                n,
+                d,
                 " ",
-                m.required && /* @__PURE__ */ a("span", { className: "text-destructive", children: "*" })
+                u.required && /* @__PURE__ */ a("span", { className: "text-destructive", children: "*" })
               ]
             }
           ),
-          /* @__PURE__ */ d(
+          /* @__PURE__ */ n(
             "div",
             {
+              "data-component": "input-border",
               className: e(
-                g({ size: p, isError: t, disabled: r, className: u }),
+                g({ size: p, isError: t, disabled: r, className: m }),
                 "bg-canvas",
                 r && "bg-disabled-surface"
               ),
@@ -80,7 +81,7 @@ const g = v(
                     ref: x,
                     disabled: !!r,
                     "data-form-control": "input",
-                    ...m
+                    ...u
                   }
                 ),
                 i && /* @__PURE__ */ a(
@@ -95,7 +96,7 @@ const g = v(
             }
           )
         ] }),
-        o && /* @__PURE__ */ d(
+        o && /* @__PURE__ */ n(
           "div",
           {
             className: e(

package/dist/components/ui/sheet.js

@@ -1,16 +1,16 @@
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
 import * as n from "react";
 import * as o from "@radix-ui/react-dialog";
-import { cva as v } from "class-variance-authority";
-import { ChevronDown as S, ChevronUp as w, X as C } from "lucide-react";
+import { cva as S } from "class-variance-authority";
+import { ChevronDown as w, ChevronUp as C, X as T } from "lucide-react";
 import { cn as r } from "../../lib/utils.js";
-import { Tooltip as g, TooltipTrigger as x, TooltipContent as b } from "./tooltip.js";
-import { useImpactNovaI18n as T } from "../../i18n/ImpactNovaI18nContext.js";
-const y = n.createContext({
+import { Tooltip as x, TooltipTrigger as b, TooltipContent as y } from "./tooltip.js";
+import { useImpactNovaI18n as k } from "../../i18n/ImpactNovaI18nContext.js";
+const N = n.createContext({
   isExpanded: !1,
   expandable: !1,
   side: "right"
-}), X = o.Root, q = o.Trigger, k = o.Close, E = o.Portal, N = n.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ e(
+}), X = o.Root, q = o.Trigger, D = o.Close, E = o.Portal, v = n.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ e(
   o.Overlay,
   {
     className: r(
@@ -21,8 +21,8 @@ const y = n.createContext({
     ref: s
   }
 ));
-N.displayName = o.Overlay.displayName;
-const R = v(
+v.displayName = o.Overlay.displayName;
+const R = S(
   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
   {
     variants: {
@@ -37,79 +37,82 @@ const R = v(
       side: "right"
     }
   }
-), D = n.forwardRef(({ side: t = "right", className: a, children: s, expandable: d = !1, defaultExpanded: l = !1, ...f }, u) => {
-  const [h, c] = n.useState(l), m = n.useCallback(() => {
-    c((p) => !p);
+), L = n.forwardRef(({ side: t = "right", className: a, children: s, expandable: c = !1, defaultExpanded: l = !1, onOpenAutoFocus: f, ...u }, g) => {
+  const [d, p] = n.useState(l), m = n.useCallback(() => {
+    p((h) => !h);
   }, []);
-  return /* @__PURE__ */ e(y.Provider, { value: { isExpanded: h, onExpandToggle: m, expandable: d, side: t || void 0 }, children: /* @__PURE__ */ i(E, { children: [
-    /* @__PURE__ */ e(N, {}),
+  return /* @__PURE__ */ e(N.Provider, { value: { isExpanded: d, onExpandToggle: m, expandable: c, side: t || void 0 }, children: /* @__PURE__ */ i(E, { children: [
+    /* @__PURE__ */ e(v, {}),
     /* @__PURE__ */ e(
       o.Content,
       {
-        ref: u,
+        ref: g,
         "data-component": "sheet-content",
+        onOpenAutoFocus: (h) => {
+          h.preventDefault(), f?.(h);
+        },
         className: r(
           R({ side: t }),
           "flex flex-col p-0 transition-all duration-300",
-          t === "bottom" && (h ? "h-[96vh]" : "h-[40vh]"),
+          t === "bottom" && (d ? "h-[96vh]" : "h-[40vh]"),
           a
         ),
-        ...f,
+        ...u,
         children: s
       }
     )
   ] }) });
 });
-D.displayName = o.Content.displayName;
-const L = ({
+L.displayName = o.Content.displayName;
+const j = ({
   className: t,
   children: a,
   ...s
 }) => {
-  const { t: d } = T(), { isExpanded: l, onExpandToggle: f, expandable: u, side: h } = n.useContext(y), c = d("aria.close"), m = d("nestedList.expand"), p = d("nestedList.collapse");
+  const { t: c } = k(), { isExpanded: l, onExpandToggle: f, expandable: u, side: g } = n.useContext(N), d = c("aria.close"), p = c("nestedList.expand"), m = c("nestedList.collapse");
   return /* @__PURE__ */ i(
     "div",
     {
       className: r(
         "flex px-4 py-4 shrink-0 items-center justify-between bg-light-blue border-b",
-        h === "bottom" && "rounded-t-lg",
+        g === "bottom" && "rounded-t-lg",
         t
       ),
       ...s,
       children: [
         /* @__PURE__ */ e("div", { className: "flex flex-col space-y-1 text-center sm:text-left", children: a }),
         /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
-          u && /* @__PURE__ */ i(g, { children: [
-            /* @__PURE__ */ e(x, { asChild: !0, children: /* @__PURE__ */ i(
+          u && /* @__PURE__ */ i(x, { children: [
+            /* @__PURE__ */ e(b, { asChild: !0, children: /* @__PURE__ */ i(
               "button",
               {
                 type: "button",
                 "data-component": "sheet-expand-toggle",
                 onClick: f,
                 className: "rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none",
-                "aria-label": l ? p : m,
+                "aria-label": l ? m : p,
                 children: [
-                  l ? /* @__PURE__ */ e(S, { className: "h-4 w-4" }) : /* @__PURE__ */ e(w, { className: "h-4 w-4" }),
-                  /* @__PURE__ */ e("span", { className: "sr-only", children: l ? p : m })
+                  l ? /* @__PURE__ */ e(w, { className: "h-4 w-4" }) : /* @__PURE__ */ e(C, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ e("span", { className: "sr-only", children: l ? m : p })
                 ]
               }
             ) }),
-            /* @__PURE__ */ e(b, { variant: "tertiary", side: "top", children: l ? p : m })
+            /* @__PURE__ */ e(y, { variant: "tertiary", side: "top", children: l ? m : p })
           ] }),
-          /* @__PURE__ */ i(g, { children: [
-            /* @__PURE__ */ e(x, { asChild: !0, children: /* @__PURE__ */ i(k, { "data-component": "sheet-close", className: "rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", "aria-label": c, children: [
-              /* @__PURE__ */ e(C, { className: "h-4 w-4" }),
-              /* @__PURE__ */ e("span", { className: "sr-only", children: c })
+          /* @__PURE__ */ i(x, { children: [
+            /* @__PURE__ */ e(b, { asChild: !0, children: /* @__PURE__ */ i(D, { "data-component": "sheet-close", className: "rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", "aria-label": d, children: [
+              /* @__PURE__ */ e(T, { className: "h-4 w-4" }),
+              /* @__PURE__ */ e("span", { className: "sr-only", children: d })
             ] }) }),
-            /* @__PURE__ */ e(b, { variant: "tertiary", side: "top", children: c })
+            /* @__PURE__ */ e(y, { variant: "tertiary", side: "top", children: d })
           ] })
         ] })
       ]
     }
   );
 };
-L.displayName = "SheetHeader";
-const j = ({
+j.displayName = "SheetHeader";
+const O = ({
   className: t,
   ...a
 }) => /* @__PURE__ */ e(
@@ -119,7 +122,7 @@ const j = ({
     ...a
   }
 );
-j.displayName = "SheetBody";
+O.displayName = "SheetBody";
 const P = ({
   className: t,
   ...a
@@ -135,7 +138,7 @@ const P = ({
   }
 );
 P.displayName = "SheetFooter";
-const I = n.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ e(
+const F = n.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ e(
   o.Title,
   {
     ref: s,
@@ -144,8 +147,8 @@ const I = n.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ e(
     ...a
   }
 ));
-I.displayName = o.Title.displayName;
-const O = n.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ e(
+F.displayName = o.Title.displayName;
+const I = n.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ e(
   o.Description,
   {
     ref: s,
@@ -153,17 +156,17 @@ const O = n.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ e(
     ...a
   }
 ));
-O.displayName = o.Description.displayName;
+I.displayName = o.Description.displayName;
 export {
   X as Sheet,
-  j as SheetBody,
-  k as SheetClose,
-  D as SheetContent,
-  O as SheetDescription,
+  O as SheetBody,
+  D as SheetClose,
+  L as SheetContent,
+  I as SheetDescription,
   P as SheetFooter,
-  L as SheetHeader,
-  N as SheetOverlay,
+  j as SheetHeader,
+  v as SheetOverlay,
   E as SheetPortal,
-  I as SheetTitle,
+  F as SheetTitle,
   q as SheetTrigger
 };

package/dist/components/ui/sidebar.js

@@ -471,7 +471,7 @@ const D = n.forwardRef(
 );
 D.displayName = "SidebarMenuCollapsible";
 const pe = H(
-  "peer/menu-button flex w-full items-center gap-[22px] overflow-hidden py-[14px] px-[22px] text-left text-[14px] outline-none ring-navigation-ring transition-[width,height,padding,background-color] hover:bg-navigation-item-active hover:text-navigation-on-hover focus-visible:ring-2 disabled:pointer-events-none disabled:text-navigation-muted group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:text-navigation-muted aria-disabled:opacity-50 hover:aria-disabled:bg-transparent data-[active=true]:bg-navigation-item-active data-[active=true]:font-medium data-[active=true]:text-navigation-on-hover cursor-pointer group-data-[state=collapsed]:!w-[var(--sidebar-width-icon)] group-data-[state=collapsed]:!h-12 group-data-[state=collapsed]:!p-0 group-data-[state=collapsed]:!pl-[22px] [&>span:last-child]:truncate [&>svg]:size-5 [&>img]:size-5 [&>svg]:shrink-0 [&>svg]:text-inherit group-data-[state=collapsed]:[&>span]:hidden group-data-[state=collapsed]:[&>svg:not(:first-of-type)]:hidden [&>[data-sidebar=menu-button-chevron]]:ml-auto [&>[data-sidebar=menu-button-chevron]]:size-4 [&>[data-sidebar=menu-button-chevron]]:transition-transform [&>[data-sidebar=menu-button-chevron]]:duration-200 [&>[data-sidebar=menu-button-chevron]]:rotate-90 data-[state=open]:[&>[data-sidebar=menu-button-chevron]]:rotate-[270deg] before:absolute before:left-0 before:top-0 before:w-1 before:bg-success before:rounded-r-[4px] before:transition-[height] before:duration-200 before:linear before:z-20 data-[active=false]:before:h-0 data-[active=true]:before:h-full",
+  "peer/menu-button flex w-full items-center gap-[22px] overflow-visible py-[14px] px-[22px] text-left text-[14px] outline-none ring-navigation-ring transition-[width,height,padding,background-color] hover:bg-navigation-item-active hover:text-navigation-on-hover focus-visible:ring-2 disabled:pointer-events-none disabled:text-navigation-muted group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:text-navigation-muted aria-disabled:opacity-50 hover:aria-disabled:bg-transparent data-[active=true]:bg-navigation-item-active data-[active=true]:font-medium data-[active=true]:text-navigation-on-hover cursor-pointer group-data-[state=collapsed]:!w-[var(--sidebar-width-icon)] group-data-[state=collapsed]:!h-12 group-data-[state=collapsed]:!p-0 group-data-[state=collapsed]:!pl-[22px] [&>span:last-child]:truncate [&>svg]:size-5 [&>img]:size-5 [&>svg]:shrink-0 [&>svg]:text-inherit group-data-[state=collapsed]:[&>span]:hidden group-data-[state=collapsed]:[&>svg:not(:first-of-type)]:hidden [&>[data-sidebar=menu-button-chevron]]:ml-auto [&>[data-sidebar=menu-button-chevron]]:size-4 [&>[data-sidebar=menu-button-chevron]]:transition-transform [&>[data-sidebar=menu-button-chevron]]:duration-200 [&>[data-sidebar=menu-button-chevron]]:rotate-90 data-[state=open]:[&>[data-sidebar=menu-button-chevron]]:rotate-[270deg] before:absolute before:left-0 before:top-0 before:w-1 before:bg-success before:rounded-r-[4px] before:transition-[height] before:duration-200 before:linear before:z-20 data-[active=false]:before:h-0 data-[active=true]:before:h-full",
   {
     variants: {
       variant: {
@@ -684,7 +684,7 @@ const G = n.forwardRef(({ asChild: t = !1, size: r = "md", isActive: e, classNam
     "data-size": r,
     "data-active": e,
     className: l(
-      "relative flex h-auto min-w-0 items-center gap-2 overflow-hidden py-[14px] px-5 text-navigation-foreground outline-none transition-colors hover:bg-navigation-item-hover focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 cursor-pointer [&>span]:truncate [&>span]:shrink [&>span]:text-[14px] [&>span]:whitespace-nowrap [&>svg]:size-4 [&>svg]:shrink-0",
+      "relative flex h-auto min-w-0 items-center gap-2 overflow-visible py-[14px] px-5 text-navigation-foreground outline-none transition-colors hover:bg-navigation-item-hover focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 cursor-pointer [&>span]:truncate [&>span]:shrink [&>span]:text-[14px] [&>span]:whitespace-nowrap [&>svg]:size-4 [&>svg]:shrink-0",
       "data-[active=true]:font-medium data-[active=true]:text-success",
       "group-data-[state=collapsed]:hidden",
       "before:absolute before:left-0 before:top-0 before:w-1 before:transition-all before:duration-200 before:h-full before:z-10",

package/dist/components/ui/tabs.js

@@ -2,25 +2,25 @@ import { jsx as r, jsxs as u, Fragment as j } from "react/jsx-runtime";
 import * as s from "react";
 import * as c from "@radix-ui/react-tabs";
 import { cn as p } from "../../lib/utils.js";
-import { Tooltip as W, TooltipTrigger as z, TooltipContent as I } from "./tooltip.js";
+import { Tooltip as W, TooltipTrigger as I, TooltipContent as z } from "./tooltip.js";
 const N = s.createContext({
   variant: "line",
   size: "default"
 }), L = (e, a) => {
   const t = e.split(/\s+/);
   return t.length <= a ? e : t.slice(0, a).join(" ") + "...";
-}, S = s.forwardRef(({ variant: e = "line", size: a = "default", hideInactiveLabel: t = !1, tooltipClassName: n, maxWords: o, value: i, defaultValue: x, onValueChange: g, ...d }, h) => {
+}, S = s.forwardRef(({ variant: e = "line", size: a = "default", hideInactiveLabel: t = !1, tooltipClassName: n, maxWords: o, value: i, defaultValue: x, onValueChange: h, ...d }, g) => {
   const [y, b] = s.useState(i || x);
   s.useEffect(() => {
     i !== void 0 && b(i);
   }, [i]);
-  const w = (f) => {
-    i === void 0 && b(f), g?.(f);
+  const w = (v) => {
+    i === void 0 && b(v), h?.(v);
   };
   return /* @__PURE__ */ r(N.Provider, { value: { variant: e, size: a, activeValue: y, hideInactiveLabel: t, tooltipClassName: n, maxWords: o }, children: /* @__PURE__ */ r(
     c.Root,
     {
-      ref: h,
+      ref: g,
       value: i,
       defaultValue: x,
       onValueChange: w,
@@ -42,15 +42,16 @@ const F = s.forwardRef(({ className: e, ...a }, t) => {
         "inline-flex items-center justify-center rounded-lg",
         n === "line" && "h-[38px] bg-canvas-elevated border w-full justify-start gap-2 px-2 shrink-0 py-0",
         n === "pill" && "h-[38px] p-1 bg-brand-tint text-brand gap-1",
-        n === "outline" && "bg-transparent gap-2 p-0 w-full justify-start",
+        n === "outline" && "bg-transparent gap-2 w-full justify-start",
         n === "box" && "h-auto bg-transparent border-0 w-full justify-start gap-[16px] p-0 shrink-0",
         e
       ),
+      style: { overflow: "visible" },
       ...a
     }
   );
-}), $ = s.forwardRef(({ className: e, icon: a, children: t, maxWords: n, activeColor: o, style: i, ...x }, g) => {
-  const { variant: d, size: h, activeValue: y, hideInactiveLabel: b, tooltipClassName: w, maxWords: f } = s.useContext(N), v = n ?? f, m = y === x.value, T = typeof t == "string", R = T && v ? L(t, v) : t, k = T && v && t.split(/\s+/).length > v, V = b && !m || k, l = { ...i };
+}), $ = s.forwardRef(({ className: e, icon: a, children: t, maxWords: n, activeColor: o, style: i, ...x }, h) => {
+  const { variant: d, size: g, activeValue: y, hideInactiveLabel: b, tooltipClassName: w, maxWords: v } = s.useContext(N), f = n ?? v, m = y === x.value, T = typeof t == "string", R = T && f ? L(t, f) : t, k = T && f && t.split(/\s+/).length > f, V = b && !m || k, l = { ...i };
   d === "box" && o && (l["--tab-border"] = o.border, l["--tab-bg"] = o.bg, l["--tab-text"] = o.text, l["--tab-hover-border"] = `color-mix(in srgb, ${o.border} 40%, transparent)`, l["--tab-hover-bg"] = `color-mix(in srgb, ${o.bg} 50%, white)`, l["--tab-hover-text"] = `color-mix(in srgb, ${o.text} 60%, var(--color-foreground-tertiary))`);
   const C = d === "box" ? /* @__PURE__ */ u(j, { children: [
     t,
@@ -68,7 +69,7 @@ const F = s.forwardRef(({ className: e, ...a }, t) => {
   return /* @__PURE__ */ r(
     c.Trigger,
     {
-      ref: g,
+      ref: h,
       "data-tabs": "trigger",
       className: p(
         "relative inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
@@ -86,7 +87,7 @@ const F = s.forwardRef(({ className: e, ...a }, t) => {
           "rounded-full border border-content-badge bg-canvas-elevated text-content-badge font-['Manrope']",
           "hover:bg-canvas-muted hover:text-content",
           "data-[state=active]:border-brand data-[state=active]:text-brand",
-          h === "sm" ? "h-[24px] px-[8px] py-[2px] text-xs" : "h-9 px-4 py-2"
+          g === "sm" ? "h-[24px] px-[8px] py-[2px] text-xs" : "h-9 px-4 py-2"
         ],
         d === "box" && [
           "group flex flex-row items-center justify-between min-w-[231px] w-fit gap-4 min-h-[45px] h-auto py-2 px-[16px] rounded-[8px] bg-canvas-elevated text-content-tertiary transition-none overflow-visible",
@@ -102,8 +103,8 @@ const F = s.forwardRef(({ className: e, ...a }, t) => {
       style: l,
       ...x,
       children: V ? /* @__PURE__ */ u(W, { children: [
-        /* @__PURE__ */ r(z, { asChild: !0, children: /* @__PURE__ */ r("span", { className: "inline-flex items-center justify-center h-full w-full", children: C }) }),
-        /* @__PURE__ */ r(I, { variant: "tertiary", className: w, children: t })
+        /* @__PURE__ */ r(I, { asChild: !0, children: /* @__PURE__ */ r("span", { className: "inline-flex items-center justify-center h-full w-full", children: C }) }),
+        /* @__PURE__ */ r(z, { variant: "tertiary", className: w, children: t })
       ] }) : C
     }
   );
@@ -114,8 +115,9 @@ const M = s.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r(
   {
     ref: t,
     "data-tabs": "content",
+    tabIndex: -1,
     className: p(
-      "mt-2 ring-offset-canvas focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2",
+      "mt-2 focus-visible:outline-none focus:outline-none",
       e
     ),
     ...a