@godxjp/ui 19.6.0 → 20.0.0

package/dist/components/navigation/tabs.js

@@ -1,9 +1,18 @@
 "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 { 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,34 +21,57 @@ 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 Tabs({
   className,
   orientation = "horizontal",
   items,
   value,
   defaultValue,
+  onValueChange,
+  activationMode,
+  dir,
   variant = "default",
   listClassName,
   contentClassName,
+  children,
   ...props
 }) {
   const resolvedDefault = resolveFallbackTabValue(items, defaultValue);
-  return /* @__PURE__ */ jsx(
-    TabsPrimitive.Root,
+  const selectionSuppressed = value === void 0 && items != null && items.length > 0 && resolvedDefault === void 0;
+  const frame = React.useMemo(
+    () => ({ orientation, selectionSuppressed }),
+    [orientation, selectionSuppressed]
+  );
+  return /* @__PURE__ */ jsx(TabsFrameContext.Provider, { value: frame, children: /* @__PURE__ */ jsx(
+    AriaTabs,
     {
-      "data-slot": "tabs",
-      "data-orientation": orientation,
-      "data-variant": variant,
       orientation,
-      value,
-      defaultValue: value === void 0 ? resolvedDefault : void 0,
+      keyboardActivation: activationMode,
+      selectedKey: value,
+      defaultSelectedKey: value === void 0 ? resolvedDefault : void 0,
+      onSelectionChange: onValueChange ? (key) => {
+        onValueChange(String(key));
+      } : void 0,
       className: cn(
         // Structure only.
         // live in src/styles/navigation-layout.css so the gap reads --tabs-root-gap and a service
         "group/tabs flex data-[orientation=horizontal]:flex-col",
         className
       ),
-      ...props,
+      render: (domProps) => withDomProps("div", "tabs", { dir, ...props }, domProps, {
+        "data-orientation": orientation,
+        "data-variant": variant
+      }),
       children: items ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
           TabsList,
@@ -103,91 +135,121 @@ function Tabs({
           },
           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, ...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,
+          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 {};

package/dist/components/ui/accordion.js

@@ -1,45 +1,251 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { chain, mergeRefs } from "@react-aria/utils";
+import {
+  ButtonContext,
+  Disclosure,
+  DisclosureGroup,
+  DisclosureGroupStateContext,
+  DisclosurePanel,
+  DisclosureStateContext,
+  useSlottedContext
+} from "react-aria-components";
 import { ChevronDown } from "lucide-react";
 import { cn } from "../../lib/utils.js";
-const Accordion = AccordionPrimitive.Root;
-const AccordionItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  AccordionPrimitive.Item,
-  {
-    ref,
-    "data-slot": "accordion-item",
-    className: cn("ui-accordion-item", className),
-    ...props
+import { Slot } from "../../lib/slot.js";
+const AccordionGroupContext = React.createContext({
+  orientation: "vertical"
+});
+const AccordionItemContext = React.createContext(null);
+function useAccordionItem(component) {
+  const item = React.useContext(AccordionItemContext);
+  const state = React.useContext(DisclosureStateContext);
+  if (!item || !state) {
+    throw new Error(`\`${component}\` ph\u1EA3i n\u1EB1m trong \`AccordionItem\`.`);
   }
-));
-AccordionItem.displayName = "AccordionItem";
-const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "ui-accordion-header", children: /* @__PURE__ */ jsxs(
-  AccordionPrimitive.Trigger,
-  {
-    ref,
-    "data-slot": "accordion-trigger",
-    className: cn("ui-accordion-trigger", className),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx(ChevronDown, { className: "ui-accordion-chevron", "aria-hidden": "true" })
-    ]
+  return { item, state };
+}
+const TRIGGER_SELECTOR = '[data-slot="accordion-trigger"]:not([disabled])';
+function toArray(value) {
+  if (value === void 0) {
+    return [];
   }
-) }));
-AccordionTrigger.displayName = "AccordionTrigger";
-const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
-  AccordionPrimitive.Content,
-  {
+  return Array.isArray(value) ? value : [value];
+}
+function Accordion(accordionProps) {
+  const {
+    type,
+    value,
+    defaultValue,
+    onValueChange,
+    collapsible,
+    orientation = "vertical",
+    dir,
+    disabled,
+    onKeyDown,
+    children,
     ref,
-    "data-slot": "accordion-content",
-    className: cn("ui-accordion-content", className),
-    ...props,
-    children: /* @__PURE__ */ jsx("div", { className: "ui-accordion-content-inner", children })
+    ...props
+  } = accordionProps;
+  const [uncontrolled, setUncontrolled] = React.useState(() => toArray(defaultValue));
+  const isControlled = value !== void 0;
+  const expandedKeys = new Set(isControlled ? toArray(value) : uncontrolled);
+  function handleExpandedChange(keys) {
+    const next = [...keys].map(String);
+    if (type === "single" && !collapsible && next.length === 0) {
+      return;
+    }
+    if (!isControlled) {
+      setUncontrolled(next);
+    }
+    onValueChange?.(type === "multiple" ? next : next[0] ?? "");
+  }
+  function moveFocus(event) {
+    const from = event.target.closest?.(TRIGGER_SELECTOR);
+    if (!from) {
+      return;
+    }
+    const horizontal = orientation === "horizontal";
+    const forward = horizontal ? dir === "rtl" ? "ArrowLeft" : "ArrowRight" : "ArrowDown";
+    const backward = horizontal ? dir === "rtl" ? "ArrowRight" : "ArrowLeft" : "ArrowUp";
+    const triggers = [...event.currentTarget.querySelectorAll(TRIGGER_SELECTOR)];
+    const at = triggers.indexOf(from);
+    if (at < 0) {
+      return;
+    }
+    let to;
+    if (event.key === forward) {
+      to = (at + 1) % triggers.length;
+    } else if (event.key === backward) {
+      to = (at - 1 + triggers.length) % triggers.length;
+    } else if (event.key === "Home") {
+      to = 0;
+    } else if (event.key === "End") {
+      to = triggers.length - 1;
+    } else {
+      return;
+    }
+    event.preventDefault();
+    triggers[to].focus();
   }
-));
-AccordionContent.displayName = "AccordionContent";
+  return /* @__PURE__ */ jsx(
+    DisclosureGroup,
+    {
+      allowsMultipleExpanded: type === "multiple",
+      expandedKeys,
+      onExpandedChange: handleExpandedChange,
+      isDisabled: disabled,
+      render: (racProps) => {
+        const {
+          className: _racClass,
+          "data-rac": _rac,
+          ref: racRef,
+          ...rest
+        } = racProps;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...props,
+            ...rest,
+            ref: mergeRefs(ref, racRef),
+            dir,
+            "data-orientation": orientation,
+            onKeyDown: chain(onKeyDown, moveFocus)
+          }
+        );
+      },
+      children: /* @__PURE__ */ jsx(AccordionGroupContext.Provider, { value: { orientation }, children })
+    }
+  );
+}
+function AccordionItem({
+  className,
+  disabled,
+  value,
+  children,
+  ref,
+  ...props
+}) {
+  const { orientation } = React.useContext(AccordionGroupContext);
+  const groupState = React.useContext(DisclosureGroupStateContext);
+  const isDisabled = Boolean(disabled || groupState?.isDisabled);
+  return /* @__PURE__ */ jsx(
+    Disclosure,
+    {
+      id: value,
+      isDisabled,
+      render: (racProps, { isExpanded }) => {
+        const {
+          className: _racClass,
+          "data-rac": _rac,
+          ref: racRef,
+          ...rest
+        } = racProps;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "accordion-item",
+            className: cn("ui-accordion-item", className),
+            ...props,
+            ...rest,
+            ref: mergeRefs(ref, racRef),
+            "data-state": isExpanded ? "open" : "closed",
+            "data-disabled": isDisabled ? "" : void 0,
+            "data-orientation": orientation,
+            children: /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value: { orientation, isDisabled }, children })
+          }
+        );
+      }
+    }
+  );
+}
+function AccordionTrigger({
+  asChild,
+  className,
+  children,
+  onClick,
+  ...props
+}) {
+  const { item, state } = useAccordionItem("AccordionTrigger");
+  const trigger = useSlottedContext(ButtonContext, "trigger");
+  const Comp = asChild ? Slot : "button";
+  const dataState = state.isExpanded ? "open" : "closed";
+  const dataDisabled = item.isDisabled ? "" : void 0;
+  return /* @__PURE__ */ jsx(
+    "h3",
+    {
+      className: "ui-accordion-header",
+      "data-orientation": item.orientation,
+      "data-state": dataState,
+      "data-disabled": dataDisabled,
+      children: /* @__PURE__ */ jsxs(
+        Comp,
+        {
+          type: "button",
+          id: trigger?.id,
+          "aria-controls": state.isExpanded ? trigger?.["aria-controls"] : void 0,
+          "aria-expanded": state.isExpanded,
+          "data-slot": "accordion-trigger",
+          "data-state": dataState,
+          "data-disabled": dataDisabled,
+          "data-orientation": item.orientation,
+          disabled: item.isDisabled,
+          className: cn("ui-accordion-trigger", className),
+          ...props,
+          onClick: chain(onClick, () => {
+            if (!item.isDisabled) {
+              state.toggle();
+            }
+          }),
+          children: [
+            children,
+            /* @__PURE__ */ jsx(ChevronDown, { className: "ui-accordion-chevron", "aria-hidden": "true" })
+          ]
+        }
+      )
+    }
+  );
+}
+function AccordionContent({
+  className,
+  forceMount,
+  children,
+  ref,
+  ...props
+}) {
+  const { item, state } = useAccordionItem("AccordionContent");
+  return /* @__PURE__ */ jsx(
+    DisclosurePanel,
+    {
+      role: "region",
+      render: (racProps) => {
+        const {
+          className: _racClass,
+          "data-rac": _rac,
+          children: _racChildren,
+          ref: racRef,
+          ...rest
+        } = racProps;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "accordion-content",
+            className: cn("ui-accordion-content", className),
+            ...props,
+            ...rest,
+            ref: mergeRefs(ref, racRef),
+            "data-state": state.isExpanded ? "open" : "closed",
+            "data-disabled": item.isDisabled ? "" : void 0,
+            "data-orientation": item.orientation,
+            children: state.isExpanded || forceMount ? /* @__PURE__ */ jsx("div", { className: "ui-accordion-content-inner", children }) : null
+          }
+        );
+      },
+      children: null
+    }
+  );
+}
 export {
   Accordion,
   AccordionContent,