@godxjp/ui 19.6.0 → 20.1.0

package/dist/components/navigation/tabs.js

@@ -1,9 +1,20 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
+import {
+  Tab as AriaTab,
+  TabList as AriaTabList,
+  TabPanel as AriaTabPanel,
+  Tabs as AriaTabs
+} from "react-aria-components";
+import { Plus, X } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { useKeepActiveTabVisible } from "./tabs-scroll.js";
+const TabsFrameContext = React.createContext({
+  orientation: "horizontal",
+  selectionSuppressed: false
+});
 function resolveFallbackTabValue(items, requested) {
   if (!items || items.length === 0) return requested;
   if (requested !== void 0) {
@@ -12,182 +23,401 @@ function resolveFallbackTabValue(items, requested) {
   }
   return items.find((item) => !item.disabled)?.value;
 }
+function withDomProps(element, slot, raw, domProps, own) {
+  const dom = domProps;
+  return React.createElement(element, {
+    "data-slot": slot,
+    ...raw,
+    ...dom,
+    id: raw.id ?? dom.id,
+    ...own
+  });
+}
+function resolveTabsExtra(extra) {
+  if (extra === void 0 || extra === null || extra === false) return {};
+  const isSlotMap = typeof extra === "object" && !React.isValidElement(extra) && !Array.isArray(extra) && ("start" in extra || "end" in extra);
+  if (isSlotMap) return extra;
+  return { end: extra };
+}
+function resolveTabsAxis(tabPlacement, orientation) {
+  if (tabPlacement) {
+    return {
+      placement: tabPlacement,
+      orientation: orientation ?? (tabPlacement === "start" || tabPlacement === "end" ? "vertical" : "horizontal")
+    };
+  }
+  return {
+    placement: orientation === "vertical" ? "start" : "top",
+    orientation: orientation ?? "horizontal"
+  };
+}
 function Tabs({
   className,
-  orientation = "horizontal",
+  orientation,
   items,
   value,
   defaultValue,
+  onValueChange,
+  activationMode,
+  dir,
   variant = "default",
+  tabPlacement,
+  size = "md",
+  centered,
+  extra,
+  destroyOnHidden = true,
+  onEdit,
+  addIcon,
+  hideAdd,
   listClassName,
   contentClassName,
+  children,
   ...props
 }) {
+  const { t } = useTranslation();
   const resolvedDefault = resolveFallbackTabValue(items, defaultValue);
-  return /* @__PURE__ */ jsx(
-    TabsPrimitive.Root,
+  const { placement, orientation: resolvedOrientation } = resolveTabsAxis(
+    tabPlacement,
+    orientation
+  );
+  const selectionSuppressed = value === void 0 && items != null && items.length > 0 && resolvedDefault === void 0;
+  const frame = React.useMemo(
+    () => ({ orientation: resolvedOrientation, selectionSuppressed }),
+    [resolvedOrientation, selectionSuppressed]
+  );
+  const editable = variant === "editable-card";
+  const [mirroredValue, setMirroredValue] = React.useState(
+    value ?? resolvedDefault
+  );
+  React.useEffect(() => {
+    if (value !== void 0) setMirroredValue(value);
+  }, [value]);
+  const activeValue = value ?? mirroredValue;
+  const handleValueChange = React.useCallback(
+    (next) => {
+      setMirroredValue(next);
+      onValueChange?.(next);
+    },
+    [onValueChange]
+  );
+  const { start: extraStart, end: extraEnd } = resolveTabsExtra(extra);
+  const showAdd = editable && !hideAdd && Boolean(onEdit);
+  const needsBar = Boolean(extraStart || extraEnd || showAdd);
+  const card = variant === "card" || variant === "editable-card";
+  const sizeTriggerClassName = cn(
+    size === "sm" && "min-h-[var(--tabs-trigger-height-sm)] px-[var(--tabs-trigger-padding-x-sm)] text-[length:var(--tabs-trigger-font-size-sm)]",
+    size === "md" && "min-h-[var(--tabs-trigger-height-md)] px-[var(--tabs-trigger-padding-x-md)] text-[length:var(--tabs-trigger-font-size-md)]",
+    size === "lg" && "min-h-[var(--tabs-trigger-height-lg)] px-[var(--tabs-trigger-padding-x-lg)] text-[length:var(--tabs-trigger-font-size-lg)]"
+  );
+  const list = items ? /* @__PURE__ */ jsx(
+    TabsList,
+    {
+      "data-slot": "tabs-list",
+      variant: variant === "line" ? "line" : "default",
+      className: cn(
+        // The inset override is an arbitrary value reading the knob (never `p-0`): it must
+        // stay a UTILITY so tailwind-merge still drops the strip's own padding step.
+        //
+        // IT IS SPLIT INTO `px-`/`py-` FOR THE FOCUS RING (gh#376). The strip clips its
+        // block axis (`overflow-y: hidden` beside `overflow-x: auto`), and this variant's
+        // inset is 0px, so a focused trigger had NO block headroom at all — measured in
+        // Chromium, 0px top and bottom, i.e. the entire ring was shaved. The headroom has to
+        // come from layout: `overflow-y: visible` next to `overflow-x: auto` computes back
+        // to `auto` per spec (a second scroll container, not a ring), and Chromium honours
+        // `overflow-clip-margin` only when BOTH axes are `clip`. So the block padding carries
+        // the ring's outer reach and an equal negative block margin hands it straight back —
+        // the ring paints inside the scrollport and the strip's OUTER box is unchanged
+        // (measured: 38px before and after). Both values read the same token the ring is
+        // sized from, so the two can never drift apart.
+        //
+        // The cost, recorded rather than hidden: the rail hairline (`border-b`, drawn at the
+        // border box) now sits the ring's reach below the triggers instead of flush. That is
+        // where a hand-composed <TabsList variant="line"> already put it — its `p-1` gives
+        // the same block inset — so the two construction paths now agree. A service that
+        // wants the active bar parked back on the hairline raises `--tabs-indicator-offset`,
+        // which exists for exactly that.
+        variant === "line" && "my-[calc(-1_*_var(--tabs-list-focus-ring-space-inset,calc(var(--focus-ring-width)_+_var(--focus-ring-glow-width))))] h-auto w-full justify-start border-b px-[var(--tabs-list-line-space-inset)] py-[calc(var(--tabs-list-line-space-inset)_+_var(--tabs-list-focus-ring-space-inset,calc(var(--focus-ring-width)_+_var(--focus-ring-glow-width))))]",
+        // CARD strip. The list keeps `data-variant="default"` on purpose (a hand-composed
+        // <TabsList> must be unaffected), so the card face is selected from the ROOT — but the
+        // three properties the base list already claims as utilities (`bg-muted`, `p-1`,
+        // `rounded-lg`) have to be replaced with utilities too, or the components layer loses.
+        card && "w-full items-end justify-start gap-[var(--tabs-card-list-space-gap)] rounded-[var(--tabs-card-list-radius)] p-[var(--tabs-card-list-space-inset)] data-[variant=default]:bg-transparent",
+        // CENTERED. Two independent moves, because the strip has two shapes: the pill/card strip
+        // is `w-fit` (auto inline margins centre the BOX) and the line strip is `w-full`
+        // (`justify-content` centres its CONTENT). `safe` keeps the overflow rule the strip
+        // already depends on — plain `center` strands the leading tab outside the scrollport.
+        centered && "mx-auto justify-center-safe",
+        listClassName
+      ),
+      children: items.map((item) => {
+        const removable = editable && Boolean(onEdit) && item.closable !== false && !item.disabled;
+        return /* @__PURE__ */ jsxs(
+          TabsTrigger,
+          {
+            value: item.value,
+            disabled: item.disabled,
+            "aria-keyshortcuts": removable ? "Delete" : void 0,
+            onKeyDown: removable ? (event) => {
+              if (event.key !== "Delete" && event.key !== "Backspace") return;
+              event.preventDefault();
+              onEdit?.(item.value, "remove");
+            } : void 0,
+            className: cn(
+              // Geometry only — the active underline is the token-owned `::after` bar the
+              // line variant already owns (never a second, hand-rolled border-b indicator).
+              // They are arbitrary-value utilities so tailwind-merge keeps dropping the pill
+              // trigger's own radius / padding steps from the base class list.
+              variant === "line" && "rounded-[var(--tabs-trigger-line-radius)] px-[var(--tabs-trigger-line-padding-x)] py-[var(--tabs-trigger-line-padding-y)]",
+              sizeTriggerClassName,
+              // A centred strip must let its triggers SHRINK to their labels first. The base
+              // trigger is `flex-1`, so on a full-width (`line`) strip they already fill every
+              // pixel and `justify-content` has nothing left to centre — measured, the leading and
+              // trailing gaps were both 0px with `centered` on and off.
+              centered && "flex-none",
+              // CARD face: a real boundary on every side, rounded on the leading block edge only.
+              // The ACTIVE face's block-end edge is the SURFACE colour, never `transparent`: the
+              // rail is an inset shadow at the strip's padding-box edge, so a see-through border
+              // would let that 1px of rail run straight across the tab it is joined to.
+              card && "data-[state=active]:border-b-background rounded-[var(--tabs-card-radius)_var(--tabs-card-radius)_0_0] border-[color:hsl(var(--border))] bg-[hsl(var(--tabs-card-background,var(--muted)))]"
+            ),
+            children: [
+              item.icon ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-slot": "tabs-trigger-icon",
+                  className: "ui-tabs-trigger-icon",
+                  "aria-hidden": "true",
+                  children: item.icon
+                }
+              ) : null,
+              item.label,
+              removable ? (
+                // A POINTER SHORTCUT, not a control — and that is measured, not stylistic. antd's own
+                // TabNode puts a real <button> beside the role="tab" element; rendered through
+                // vitest-axe that markup fails `aria-required-children`, because a tablist may own
+                // nothing but tabs and axe walks straight through the generic wrapper to find the
+                // button. Putting the button INSIDE the tab is worse still (`nested-interactive`,
+                // plus a <button> in a <button> is invalid HTML). So the × is an aria-hidden span and
+                // the real, announced route is the Delete/Backspace shortcut above — the WAI-ARIA APG
+                // "tabs with deletion" shape.
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-slot": "tabs-tab-remove",
+                    className: "ui-tabs-tab-remove",
+                    "aria-hidden": "true",
+                    title: t("navigation.tabs.removeTab"),
+                    onPointerDown: (event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                    },
+                    onMouseDown: (event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                    },
+                    onClick: (event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      onEdit?.(item.value, "remove");
+                    },
+                    children: item.closeIcon ?? /* @__PURE__ */ jsx(X, { className: "ui-tabs-tab-remove-icon", "aria-hidden": "true" })
+                  }
+                )
+              ) : null
+            ]
+          },
+          item.value
+        );
+      })
+    }
+  ) : null;
+  return /* @__PURE__ */ jsx(TabsFrameContext.Provider, { value: frame, children: /* @__PURE__ */ jsx(
+    AriaTabs,
     {
       "data-slot": "tabs",
-      "data-orientation": orientation,
+      "data-orientation": resolvedOrientation,
       "data-variant": variant,
-      orientation,
-      value,
-      defaultValue: value === void 0 ? resolvedDefault : void 0,
+      "data-placement": placement,
+      "data-size": size,
+      "data-centered": centered ? "true" : void 0,
+      orientation: resolvedOrientation,
+      keyboardActivation: activationMode,
+      selectedKey: value,
+      defaultSelectedKey: value === void 0 ? resolvedDefault : void 0,
+      onSelectionChange: (key) => handleValueChange(String(key)),
       className: cn(
-        // Structure only.
-        // live in src/styles/navigation-layout.css so the gap reads --tabs-root-gap and a service
+        // Structure only. The paint (and the placement flip, which is `order`/`flex-direction`)
+        // lives in src/styles/navigation-layout.css so the gap reads --tabs-root-gap and a service
+        // can retune it.
         "group/tabs flex data-[orientation=horizontal]:flex-col",
+        // PLACEMENT is a flex REVERSAL, never a re-ordered tree: the strip stays first in the DOM
+        // at every placement, so reading order and the APG tablist → tabpanel relationship do not
+        // depend on which edge the bar is painted on. Both classes carry the same modifier as the
+        // base step they replace, so tailwind-merge drops that step instead of stacking two
+        // flex-direction values on one element.
+        placement === "bottom" && "data-[orientation=horizontal]:flex-col-reverse",
+        placement === "end" && "flex-row-reverse",
         className
       ),
-      ...props,
+      render: (domProps) => withDomProps("div", "tabs", { dir, ...props }, domProps, {
+        "data-orientation": resolvedOrientation,
+        "data-variant": variant,
+        "data-placement": placement,
+        "data-size": size,
+        "data-centered": centered ? "true" : void 0
+      }),
       children: items ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          TabsList,
-          {
-            "data-slot": "tabs-list",
-            variant: variant === "line" ? "line" : "default",
-            className: cn(
-              // The inset override is an arbitrary value reading the knob (never `p-0`): it must
-              // stay a UTILITY so tailwind-merge still drops the strip's own padding step.
-              //
-              // IT IS SPLIT INTO `px-`/`py-` FOR THE FOCUS RING (gh#376). The strip clips its
-              // block axis (`overflow-y: hidden` beside `overflow-x: auto`), and this variant's
-              // inset is 0px, so a focused trigger had NO block headroom at all — measured in
-              // Chromium, 0px top and bottom, i.e. the entire ring was shaved. The headroom has to
-              // come from layout: `overflow-y: visible` next to `overflow-x: auto` computes back
-              // to `auto` per spec (a second scroll container, not a ring), and Chromium honours
-              // `overflow-clip-margin` only when BOTH axes are `clip`. So the block padding carries
-              // the ring's outer reach and an equal negative block margin hands it straight back —
-              // the ring paints inside the scrollport and the strip's OUTER box is unchanged
-              // (measured: 38px before and after). Both values read the same token the ring is
-              // sized from, so the two can never drift apart.
-              //
-              // The cost, recorded rather than hidden: the rail hairline (`border-b`, drawn at the
-              // border box) now sits the ring's reach below the triggers instead of flush. That is
-              // where a hand-composed <TabsList variant="line"> already put it — its `p-1` gives
-              // the same block inset — so the two construction paths now agree. A service that
-              // wants the active bar parked back on the hairline raises `--tabs-indicator-offset`,
-              // which exists for exactly that.
-              variant === "line" && "my-[calc(-1_*_var(--tabs-list-focus-ring-space-inset,calc(var(--focus-ring-width)_+_var(--focus-ring-glow-width))))] h-auto w-full justify-start border-b px-[var(--tabs-list-line-space-inset)] py-[calc(var(--tabs-list-line-space-inset)_+_var(--tabs-list-focus-ring-space-inset,calc(var(--focus-ring-width)_+_var(--focus-ring-glow-width))))]",
-              variant === "card" && "w-full justify-start",
-              listClassName
-            ),
-            children: items.map((item) => /* @__PURE__ */ jsx(
-              TabsTrigger,
-              {
-                value: item.value,
-                disabled: item.disabled,
-                className: cn(
-                  // Geometry only — the active underline is the token-owned `::after` bar the
-                  // line variant already owns (never a second, hand-rolled border-b indicator).
-                  // utilities so tailwind-merge keeps dropping the pill trigger's own radius /
-                  // padding steps from the base class list.
-                  // `card` adds NOTHING here — its list is forwarded as data-variant="default", so
-                  // the active lift already comes from the base trigger's
-                  // `group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm`.
-                  variant === "line" && "rounded-[var(--tabs-trigger-line-radius)] px-[var(--tabs-trigger-line-padding-x)] py-[var(--tabs-trigger-line-padding-y)]"
-                ),
-                children: item.label
-              },
-              item.value
-            ))
-          }
-        ),
+        needsBar ? /* @__PURE__ */ jsxs("div", { "data-slot": "tabs-bar", className: "ui-tabs-bar", children: [
+          extraStart ? /* @__PURE__ */ jsx("div", { "data-slot": "tabs-extra", "data-side": "start", className: "ui-tabs-extra", children: extraStart }) : null,
+          list,
+          showAdd ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-slot": "tabs-add",
+              className: "ui-tabs-add",
+              "aria-label": t("navigation.tabs.addTab"),
+              onClick: (event) => onEdit?.(event, "add"),
+              children: addIcon ?? /* @__PURE__ */ jsx(Plus, { className: "ui-tabs-add-icon", "aria-hidden": "true" })
+            }
+          ) : null,
+          extraEnd ? /* @__PURE__ */ jsx("div", { "data-slot": "tabs-extra", "data-side": "end", className: "ui-tabs-extra", children: extraEnd }) : null
+        ] }) : list,
         items.map((item) => /* @__PURE__ */ jsx(
           TabsContent,
           {
             value: item.value,
             "data-slot": "tabs-panel",
+            forceMount: destroyOnHidden ? void 0 : true,
+            hidden: destroyOnHidden ? void 0 : item.value !== activeValue,
             className: contentClassName,
             children: item.content
           },
           item.value
         ))
-      ] }) : props.children
+      ] }) : children
     }
-  );
+  ) });
 }
-const TabsList = React.forwardRef(({ className, variant = "default", ...props }, ref) => {
-  const listRef = React.useRef(null);
-  const setListRef = React.useCallback(
-    (node) => {
-      listRef.current = node;
-      if (typeof ref === "function") ref(node);
-      else if (ref) ref.current = node;
-    },
-    [ref]
-  );
-  useKeepActiveTabVisible(listRef);
-  return /* @__PURE__ */ jsx(
-    TabsPrimitive.List,
-    {
-      ref: setListRef,
-      "data-slot": "tabs-list",
-      "data-variant": variant,
-      className: cn(
-        // `min-w-0 max-w-full` let the list shrink to (and never exceed) whatever width its
-        // ancestors actually give it instead of forcing them wider; horizontal orientation then
-        // scrolls its own overflow rather than clipping/hiding long localized labels in a narrow
-        // Hidden scrollbar keeps the strip visually clean while staying
-        // swipeable on touch and reachable via keyboard (arrow-key roving focus still scrolls the
-        // newly-focused trigger into view natively); `useKeepActiveTabVisible` above re-pins the
-        // Vertical
-        // orientation is untouched — it already stacks in a column and is sized by its own
-        // `h-*`/`w-*` overrides.
-        // justify-center-SAFE: the strip is a centred flex box that also scrolls. Plain `center`
-        // splits the overflow across BOTH edges, and scrollLeft only ever covers the trailing one
-        // — so the leading tab sat permanently outside the scrollport (an unreachable control at
-        // 320px, WCAG 2.2 SC 2.1.1). `safe` falls back to start alignment exactly when it
-        // overflows, and still centres whenever the tabs fit.
-        "group/tabs-list text-muted-foreground data-[variant=default]:bg-muted inline-flex w-fit max-w-full min-w-0 items-center justify-center-safe rounded-lg p-1 group-data-[orientation=vertical]/tabs:flex-col data-[orientation=horizontal]:[scrollbar-width:none] data-[orientation=horizontal]:overflow-x-auto data-[orientation=horizontal]:overflow-y-hidden data-[variant=line]:gap-1 data-[variant=line]:rounded-none data-[variant=line]:bg-transparent [&[data-orientation=horizontal]::-webkit-scrollbar]:hidden",
-        className
-      ),
-      ...props
-    }
-  );
-});
-TabsList.displayName = TabsPrimitive.List.displayName;
-const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.Trigger,
-  {
-    ref,
-    "data-slot": "tabs-trigger",
-    className: cn(
-      // SELECTED IS A BORDER TINT, NOT A RING — and that is a WCAG fix, not a style preference.
-      // It used to be `ring-1 ring-primary/25`, which writes `--tw-ring-shadow` in the UTILITIES
-      // layer and therefore overwrote the focus ring that focus-ring.css feeds from `components`.
-      // Measured: a focused ACTIVE tab painted `oklab(… / 0.25) 0 0 0 1px` and nothing else — a
-      // 1px indicator at 25% alpha, failing both clauses of SC 2.4.13 (2px perimeter, ≥3:1),
-      // while every other control in the library carried a full 2px ring. The trigger already
-      // owns `border border-transparent`, so tinting that border reproduces the selected hairline
-      // at the same colour and width with no layout change, and leaves `--tw-ring-shadow` free for
-      // the focus ring. `shadow-sm` stays: its composite READS `--tw-ring-shadow`, so the lift and
-      // the ring coexist.
-      //
-      // No `focus-visible:outline-1` either. It was the fallback that survived the clobber — a 1px
-      // currentColor line squeezed between the border and the ring once both paint. The ring is
-      // the indicator now; two marks for one state is what this pass exists to remove.
-      //
-      // The line indicator lives in src/styles/navigation-layout.css so it reads --tabs-indicator-*.
-      // Selected and focused stay visually distinct (WCAG 2.4.7): selected is a 1px hairline in the
-      // border, focused is the 2px ring plus its halo outside it.
-      "text-muted-foreground ring-offset-background hover:text-foreground ui-focus-ring data-[state=active]:bg-background data-[state=active]:text-foreground group-data-[variant=default]/tabs-list:data-[state=active]:border-primary/25 relative inline-flex flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=line]/tabs-list:border-e-0 group-data-[variant=line]/tabs-list:border-b-0 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
-      className
-    ),
-    ...props
+const TabsList = React.forwardRef(
+  ({ className, variant = "default", loop: _loop, children, ...props }, ref) => {
+    const listRef = React.useRef(null);
+    const setListRef = React.useCallback(
+      (node) => {
+        listRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    useKeepActiveTabVisible(listRef);
+    return /* @__PURE__ */ jsx(
+      AriaTabList,
+      {
+        ref: setListRef,
+        className: cn(
+          // `min-w-0 max-w-full` let the list shrink to (and never exceed) whatever width its
+          // ancestors actually give it instead of forcing them wider; horizontal orientation then
+          // scrolls its own overflow rather than clipping/hiding long localized labels in a narrow
+          // Hidden scrollbar keeps the strip visually clean while staying
+          // swipeable on touch and reachable via keyboard (arrow-key roving focus still scrolls the
+          // newly-focused trigger into view natively); `useKeepActiveTabVisible` above re-pins the
+          // Vertical
+          // orientation is untouched — it already stacks in a column and is sized by its own
+          // `h-*`/`w-*` overrides.
+          // justify-center-SAFE: the strip is a centred flex box that also scrolls. Plain `center`
+          // splits the overflow across BOTH edges, and scrollLeft only ever covers the trailing one
+          // — so the leading tab sat permanently outside the scrollport (an unreachable control at
+          // 320px, WCAG 2.2 SC 2.1.1). `safe` falls back to start alignment exactly when it
+          // overflows, and still centres whenever the tabs fit.
+          "group/tabs-list text-muted-foreground data-[variant=default]:bg-muted inline-flex w-fit max-w-full min-w-0 items-center justify-center-safe rounded-lg p-1 group-data-[orientation=vertical]/tabs:flex-col data-[orientation=horizontal]:[scrollbar-width:none] data-[orientation=horizontal]:overflow-x-auto data-[orientation=horizontal]:overflow-y-hidden data-[variant=line]:gap-1 data-[variant=line]:rounded-none data-[variant=line]:bg-transparent [&[data-orientation=horizontal]::-webkit-scrollbar]:hidden",
+          className
+        ),
+        render: (domProps) => withDomProps("div", "tabs-list", props, domProps, { "data-variant": variant }),
+        children
+      }
+    );
+  }
+);
+TabsList.displayName = "TabsList";
+const TabsTrigger = React.forwardRef(
+  ({ className, value, disabled, children, onKeyDown, ...props }, ref) => {
+    const { orientation, selectionSuppressed } = React.useContext(TabsFrameContext);
+    return /* @__PURE__ */ jsx(
+      AriaTab,
+      {
+        ref,
+        id: value,
+        isDisabled: disabled,
+        className: cn(
+          // SELECTED IS A BORDER TINT, NOT A RING — and that is a WCAG fix, not a style preference.
+          // It used to be `ring-1 ring-primary/25`, which writes `--tw-ring-shadow` in the UTILITIES
+          // layer and therefore overwrote the focus ring that focus-ring.css feeds from `components`.
+          // Measured: a focused ACTIVE tab painted `oklab(… / 0.25) 0 0 0 1px` and nothing else — a
+          // 1px indicator at 25% alpha, failing both clauses of SC 2.4.13 (2px perimeter, ≥3:1),
+          // while every other control in the library carried a full 2px ring. The trigger already
+          // owns `border border-transparent`, so tinting that border reproduces the selected hairline
+          // at the same colour and width with no layout change, and leaves `--tw-ring-shadow` free for
+          // the focus ring. `shadow-sm` stays: its composite READS `--tw-ring-shadow`, so the lift and
+          // the ring coexist.
+          //
+          // No `focus-visible:outline-1` either. It was the fallback that survived the clobber — a 1px
+          // currentColor line squeezed between the border and the ring once both paint. The ring is
+          // the indicator now; two marks for one state is what this pass exists to remove.
+          //
+          // The line indicator lives in src/styles/navigation-layout.css so it reads --tabs-indicator-*.
+          // Selected and focused stay visually distinct (WCAG 2.4.7): selected is a 1px hairline in the
+          // border, focused is the 2px ring plus its halo outside it.
+          "text-muted-foreground ring-offset-background hover:text-foreground ui-focus-ring data-[state=active]:bg-background data-[state=active]:text-foreground group-data-[variant=default]/tabs-list:data-[state=active]:border-primary/25 relative inline-flex flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=line]/tabs-list:border-e-0 group-data-[variant=line]/tabs-list:border-b-0 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
+          className
+        ),
+        render: (domProps, renderProps) => withDomProps("button", "tabs-trigger", { type: "button", ...props }, domProps, {
+          // `data-state` is what `src/styles/navigation-layout.css` and `tabs-scroll.ts` both
+          // key on. RAC only writes `data-selected` on the selected tab, so it is re-emitted
+          // here for BOTH states, exactly as Radix did.
+          "data-state": renderProps.isSelected && !selectionSuppressed ? "active" : "inactive",
+          "aria-selected": renderProps.isSelected && !selectionSuppressed,
+          "data-orientation": orientation,
+          disabled,
+          onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (!event.defaultPrevented) {
+              domProps.onKeyDown?.(
+                event
+              );
+            }
+          },
+          tabIndex: props.tabIndex ?? domProps.tabIndex
+        }),
+        children
+      }
+    );
   }
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.Content,
-  {
-    ref,
-    "data-slot": "tabs-content",
-    className: cn("ui-focus-ring flex-1 outline-none", className),
-    ...props
+);
+TabsTrigger.displayName = "TabsTrigger";
+const TabsContent = React.forwardRef(
+  ({ className, value, forceMount, children, ...props }, ref) => {
+    const { orientation, selectionSuppressed } = React.useContext(TabsFrameContext);
+    if (selectionSuppressed && !forceMount) return null;
+    return /* @__PURE__ */ jsx(
+      AriaTabPanel,
+      {
+        ref,
+        id: value,
+        shouldForceMount: forceMount,
+        className: cn("ui-focus-ring flex-1 outline-none", className),
+        render: (domProps, renderProps) => withDomProps("div", "tabs-content", props, domProps, {
+          // A force-mounted panel whose tab is not selected: Radix marked it `data-state="inactive"`
+          // and `hidden`; RAC marks it inert. The state hook is re-emitted so CSS keys the same way.
+          "data-state": renderProps.isInert || selectionSuppressed ? "inactive" : "active",
+          "data-orientation": orientation
+        }),
+        children
+      }
+    );
   }
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
+);
+TabsContent.displayName = "TabsContent";
 export {
   Tabs,
   TabsContent,

package/dist/components/ui/accordion.d.ts

@@ -1,6 +1,51 @@
 import * as React from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-export declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionMultipleProps | AccordionPrimitive.AccordionSingleProps) & React.RefAttributes<HTMLDivElement>>;
-export declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface AccordionBaseProps extends Omit<React.ComponentPropsWithRef<"div">, "dir"> {
+    /** Trục xếp mục — đổi cặp phím mũi tên điều hướng. */
+    orientation?: "vertical" | "horizontal";
+    /** Chiều viết; chỉ đổi mũi tên trái/phải khi `orientation="horizontal"`. */
+    dir?: "ltr" | "rtl";
+    /** Khoá mọi mục. */
+    disabled?: boolean;
+}
+interface AccordionSingleProps extends AccordionBaseProps {
+    /** Chỉ một mục mở tại một thời điểm. */
+    type: "single";
+    /** Mục đang mở, có kiểm soát. */
+    value?: string;
+    /** Mục mở ban đầu khi không kiểm soát. */
+    defaultValue?: string;
+    /** Gọi khi mục đang mở đổi; chuỗi rỗng nghĩa là đã đóng hết. */
+    onValueChange?: (value: string) => void;
+    /** Cho phép đóng chính mục đang mở. Mặc định sai, như Radix. */
+    collapsible?: boolean;
+}
+interface AccordionMultipleProps extends AccordionBaseProps {
+    /** Nhiều mục mở độc lập. */
+    type: "multiple";
+    /** Các mục đang mở, có kiểm soát. */
+    value?: string[];
+    /** Các mục mở ban đầu khi không kiểm soát. */
+    defaultValue?: string[];
+    /** Gọi khi tập mục đang mở đổi. */
+    onValueChange?: (value: string[]) => void;
+}
+type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
+export declare function Accordion(accordionProps: AccordionProps): React.JSX.Element;
+interface AccordionItemProps extends React.ComponentPropsWithRef<"div"> {
+    /** Khoá riêng mục này. */
+    disabled?: boolean;
+    /** Khoá định danh của mục — khớp với `value` của `Accordion`. */
+    value: string;
+}
+export declare function AccordionItem({ className, disabled, value, children, ref, ...props }: AccordionItemProps): React.JSX.Element;
+interface AccordionTriggerProps extends React.ComponentPropsWithRef<"button"> {
+    /** Mượn thẻ của con thay vì dựng `<button>` riêng. */
+    asChild?: boolean;
+}
+export declare function AccordionTrigger({ asChild, className, children, onClick, ...props }: AccordionTriggerProps): React.JSX.Element;
+interface AccordionContentProps extends React.ComponentPropsWithRef<"div"> {
+    /** Giữ nội dung trong DOM cả khi đóng. */
+    forceMount?: true;
+}
+export declare function AccordionContent({ className, forceMount, children, ref, ...props }: AccordionContentProps): React.JSX.Element;
+export {};