@justanarthur/modo-ui 0.0.0-stage → 0.1.0

package/dist/shared/components-vktws5r6.js

@@ -0,0 +1,667 @@
+import {
+  SizeProvider
+} from "./components-vb033rns.js";
+import {
+  useIcon
+} from "./components-m5br529r.js";
+import {
+  GooFilter
+} from "./components-jxgznftn.js";
+import {
+  FluidHoverHighlight
+} from "./components-r22vtgqc.js";
+import {
+  useFluidHover,
+  useRegisterFluidHoverItem
+} from "./components-e46kf6cp.js";
+import {
+  useShape
+} from "./components-7zp99w5d.js";
+import {
+  useControllableState
+} from "./components-dg0w8g5p.js";
+import {
+  GOO_BLUR_RATIO
+} from "./components-7nww01w4.js";
+import {
+  useReduceMotion
+} from "./components-nnnd2xef.js";
+import {
+  spring
+} from "./components-vc1k7yv2.js";
+import {
+  useSize
+} from "./components-x3rz4cyn.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// components/navigation/accordion/index.tsx
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { AnimatePresence, animate, motion, useMotionValue, useTransform } from "motion/react";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var useIsoLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+var AccordionGroupContext = createContext(null);
+function useAccordionGroup() {
+  return useContext(AccordionGroupContext);
+}
+var AccordionItemContext = createContext(null);
+function useAccordionItemContext() {
+  const ctx = useContext(AccordionItemContext);
+  if (!ctx)
+    throw new Error("AccordionTrigger/AccordionContent must be used within an AccordionItem");
+  return ctx;
+}
+var AccordionGroup = forwardRef((props, ref) => {
+  const { children, highlight = "item", type = "single", size, className, ...rest } = props;
+  const containerRef = useRef(null);
+  const fullItemElementsRef = useRef(new Map);
+  const [openItemRects, setOpenItemRects] = useState(new Map);
+  const openItemRectsRef = useRef(openItemRects);
+  const hover = useFluidHover(containerRef);
+  const { activeIndex, setActiveIndex, itemRects, handlers, registerItem, measureItems } = hover;
+  const registerFullItem = useCallback((index, element) => {
+    if (element) {
+      fullItemElementsRef.current.set(index, element);
+    } else {
+      fullItemElementsRef.current.delete(index);
+    }
+  }, []);
+  const measureFullItems = useCallback(() => {
+    if (!containerRef.current)
+      return;
+    const next = new Map;
+    fullItemElementsRef.current.forEach((el, idx) => {
+      next.set(idx, {
+        top: el.offsetTop,
+        left: el.offsetLeft,
+        width: el.offsetWidth,
+        height: el.offsetHeight
+      });
+    });
+    const prev = openItemRectsRef.current;
+    let changed = prev.size !== next.size;
+    if (!changed) {
+      for (const [idx, r] of next) {
+        const p = prev.get(idx);
+        if (!p || p.top !== r.top || p.left !== r.left || p.width !== r.width || p.height !== r.height) {
+          changed = true;
+          break;
+        }
+      }
+    }
+    if (!changed)
+      return;
+    openItemRectsRef.current = next;
+    setOpenItemRects(next);
+  }, []);
+  const sp = props;
+  const mp = props;
+  const [singleValue, setSingleValue] = useControllableState(type === "single" ? sp.value : undefined, type === "single" ? sp.defaultValue ?? "" : "", type === "single" ? sp.onValueChange : undefined);
+  const [multipleValue, setMultipleValue] = useControllableState(type === "multiple" ? mp.value : undefined, type === "multiple" ? mp.defaultValue ?? [] : [], type === "multiple" ? mp.onValueChange : undefined);
+  const openValuesList = type === "multiple" ? multipleValue : singleValue ? [singleValue] : [];
+  const openValuesKey = openValuesList.join(",");
+  const openValues = useMemo(() => new Set(openValuesList), [openValuesKey]);
+  useEffect(() => {
+    measureItems();
+    measureFullItems();
+  }, [measureItems, measureFullItems, children]);
+  useEffect(() => {
+    measureItems();
+    measureFullItems();
+  }, [measureItems, measureFullItems, openValuesKey]);
+  const [focusedIndex, setFocusedIndex] = useState(null);
+  const focusRect = focusedIndex !== null ? itemRects[focusedIndex] : null;
+  const expandedRects = highlight === "trigger" ? new Map([...openItemRects.keys()].flatMap((idx) => {
+    const rect = idx === activeIndex ? itemRects[idx] : null;
+    return rect ? [[idx, rect]] : [];
+  })) : new Map;
+  const isHoveringNonOpen = activeIndex !== null && !openItemRects.has(activeIndex);
+  const shape = useShape();
+  const {
+    value: _value,
+    defaultValue: _defaultValue,
+    onValueChange: _onValueChange,
+    collapsible: _collapsible,
+    type: _type,
+    ...htmlProps
+  } = rest;
+  const baseValue = openValuesList;
+  const baseOnValueChange = (next) => {
+    if (type === "multiple")
+      setMultipleValue(next);
+    else
+      setSingleValue(next[0] ?? "");
+  };
+  const [reflowing, setReflowing] = useState(false);
+  const remeasure = useCallback(() => {
+    setReflowing(true);
+    measureItems();
+    measureFullItems();
+  }, [measureItems, measureFullItems]);
+  const groupContextValue = useMemo(() => ({
+    registerItem,
+    registerFullItem,
+    activeIndex,
+    grouped: true,
+    remeasure,
+    openValues,
+    openItemRects,
+    highlight,
+    dimOpen: isHoveringNonOpen
+  }), [registerItem, registerFullItem, activeIndex, remeasure, openValues, openItemRects, highlight, isHoveringNonOpen]);
+  const group = /* @__PURE__ */ jsx(AccordionGroupContext.Provider, {
+    value: groupContextValue,
+    children: /* @__PURE__ */ jsx(AccordionPrimitive.Root, {
+      value: baseValue,
+      onValueChange: baseOnValueChange,
+      multiple: type === "multiple",
+      render: (rootProps) => {
+        const {
+          style: _baseStyle,
+          onDrag: _onDrag,
+          onDragStart: _onDragStart,
+          onDragEnd: _onDragEnd,
+          onAnimationStart: _onAnimationStart,
+          onAnimationEnd: _onAnimationEnd,
+          onAnimationIteration: _onAnimationIteration,
+          ...restRoot
+        } = rootProps;
+        return /* @__PURE__ */ jsxs("div", {
+          ...restRoot,
+          ref: (node) => {
+            containerRef.current = node;
+            if (typeof ref === "function")
+              ref(node);
+            else if (ref)
+              ref.current = node;
+          },
+          onMouseEnter: handlers.onMouseEnter,
+          onMouseMove: (e) => {
+            setReflowing(false);
+            const container = containerRef.current;
+            if (container) {
+              const cRect = container.getBoundingClientRect();
+              const layoutH = container.offsetHeight;
+              const visualH = cRect.height;
+              const scale = layoutH > 0 ? visualH / layoutH : 1;
+              const localY = (e.clientY - cRect.top) / scale + container.scrollTop;
+              for (const [idx, full] of openItemRects) {
+                const trigger = itemRects[idx];
+                if (!trigger)
+                  continue;
+                const contentTop = trigger.top + trigger.height;
+                const contentBottom = full.top + full.height;
+                if (localY >= contentTop && localY <= contentBottom) {
+                  setActiveIndex(null);
+                  return;
+                }
+              }
+            }
+            handlers.onMouseMove(e);
+          },
+          onMouseLeave: handlers.onMouseLeave,
+          onFocus: (e) => {
+            setReflowing(false);
+            const indexAttr = e.target.closest("[data-fluid-hover-index]")?.getAttribute("data-fluid-hover-index");
+            if (indexAttr != null) {
+              const idx = Number(indexAttr);
+              setActiveIndex(idx);
+              setFocusedIndex(e.target.matches(":focus-visible") ? idx : null);
+            }
+          },
+          onBlur: (e) => {
+            if (containerRef.current?.contains(e.relatedTarget))
+              return;
+            setFocusedIndex(null);
+            setActiveIndex(null);
+          },
+          className: cn("relative flex flex-col w-72 max-w-full", className),
+          ...htmlProps,
+          children: [
+            /* @__PURE__ */ jsx(AnimatePresence, {
+              children: [...expandedRects.entries()].map(([idx, rect]) => /* @__PURE__ */ jsx(motion.div, {
+                className: `absolute ${shape.bg} bg-accent/20 dark:bg-accent/12 pointer-events-none`,
+                initial: {
+                  top: rect.top,
+                  left: rect.left,
+                  width: rect.width,
+                  height: rect.height,
+                  opacity: 0
+                },
+                animate: {
+                  top: rect.top,
+                  left: rect.left,
+                  width: rect.width,
+                  height: rect.height,
+                  opacity: isHoveringNonOpen ? 0.7 : 1
+                },
+                exit: { opacity: 0, transition: spring.moderate.exit },
+                transition: {
+                  top: { duration: 0 },
+                  left: { duration: 0 },
+                  width: { duration: 0 },
+                  height: { duration: 0 },
+                  opacity: { duration: spring.moderate.exit.duration }
+                }
+              }, `expanded-${idx}`))
+            }),
+            /* @__PURE__ */ jsx(FluidHoverHighlight, {
+              hover,
+              className: cn(shape.bg, "z-1"),
+              transition: reflowing ? false : undefined
+            }),
+            /* @__PURE__ */ jsx(AnimatePresence, {
+              children: focusRect && /* @__PURE__ */ jsx(motion.div, {
+                className: `absolute ${shape.focusRing} pointer-events-none z-20 border border-focus-ring`,
+                initial: false,
+                animate: {
+                  left: focusRect.left - 2,
+                  top: focusRect.top - 2,
+                  width: focusRect.width + 4,
+                  height: focusRect.height + 4
+                },
+                exit: { opacity: 0, transition: spring.fast.exit },
+                transition: {
+                  ...reflowing ? { duration: 0 } : spring.fast,
+                  opacity: { duration: spring.fast.duration }
+                }
+              })
+            }),
+            children
+          ]
+        });
+      }
+    })
+  });
+  return size ? /* @__PURE__ */ jsx(SizeProvider, {
+    size,
+    children: group
+  }) : group;
+});
+AccordionGroup.displayName = "AccordionGroup";
+var Accordion = forwardRef(({
+  children,
+  type = "single",
+  collapsible = true,
+  defaultValue,
+  value,
+  onValueChange,
+  highlight,
+  size,
+  className,
+  ...props
+}, ref) => {
+  const [singleValue, setSingleValue] = useControllableState(type === "single" ? value : undefined, type === "single" ? defaultValue ?? "" : "", type === "single" ? onValueChange : undefined);
+  const [multipleValue, setMultipleValue] = useControllableState(type === "multiple" ? value : undefined, type === "multiple" ? defaultValue ?? [] : [], type === "multiple" ? onValueChange : undefined);
+  const openValues = new Set(type === "multiple" ? multipleValue : singleValue ? [singleValue] : []);
+  const baseValue = [...openValues];
+  const baseOnValueChange = (next) => {
+    if (type === "multiple")
+      setMultipleValue(next);
+    else
+      setSingleValue(next[0] ?? "");
+  };
+  const root = /* @__PURE__ */ jsx(AccordionPrimitive.Root, {
+    value: baseValue,
+    onValueChange: baseOnValueChange,
+    multiple: type === "multiple",
+    render: (rootProps) => {
+      const { style: _s, ...restRoot } = rootProps;
+      return /* @__PURE__ */ jsx("div", {
+        ...restRoot,
+        ref,
+        className: cn("w-72 max-w-full flex flex-col", className),
+        ...props,
+        children: /* @__PURE__ */ jsx(StandaloneOpenContext.Provider, {
+          value: openValues,
+          children: /* @__PURE__ */ jsx(StandaloneHighlightContext.Provider, {
+            value: highlight,
+            children
+          })
+        })
+      });
+    }
+  });
+  return size ? /* @__PURE__ */ jsx(SizeProvider, {
+    size,
+    children: root
+  }) : root;
+});
+Accordion.displayName = "Accordion";
+var StandaloneOpenContext = createContext(new Set);
+var StandaloneHighlightContext = createContext(undefined);
+var AccordionItem = forwardRef(({ value, index, disabled, highlight: highlightProp, children, className, ...props }, ref) => {
+  const internalRef = useRef(null);
+  const groupCtx = useAccordionGroup();
+  const standaloneOpen = useContext(StandaloneOpenContext);
+  const standaloneHighlight = useContext(StandaloneHighlightContext);
+  const highlight = groupCtx ? groupCtx.highlight : highlightProp ?? standaloneHighlight ?? "item";
+  const isOpen = groupCtx?.grouped ? groupCtx.openValues.has(value) : standaloneOpen.has(value);
+  const triggerRef = useRef(null);
+  const press = useRef(null);
+  useRegisterFluidHoverItem(groupCtx?.grouped ? groupCtx.registerItem : undefined, index, triggerRef);
+  useEffect(() => {
+    if (groupCtx?.grouped && index !== undefined) {
+      if (isOpen) {
+        groupCtx.registerFullItem(index, internalRef.current);
+      } else {
+        groupCtx.registerFullItem(index, null);
+      }
+      return () => groupCtx.registerFullItem(index, null);
+    }
+  }, [index, groupCtx, isOpen]);
+  return /* @__PURE__ */ jsx(AccordionItemContext.Provider, {
+    value: { index, value, isOpen, triggerRef, highlight, press },
+    children: /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
+      ref: (node) => {
+        internalRef.current = node;
+        if (typeof ref === "function")
+          ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      value,
+      disabled,
+      render: (itemProps) => {
+        const { style: _s, ...restItem } = itemProps;
+        return /* @__PURE__ */ jsx("div", {
+          ...restItem,
+          "data-fluid-hover-index": index,
+          className: cn("relative", className),
+          ...props,
+          children
+        });
+      }
+    })
+  });
+});
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = forwardRef(({ children, className, ...props }, ref) => {
+  const ChevronRight = useIcon("chevron-right");
+  const groupCtx = useAccordionGroup();
+  const { index, isOpen, triggerRef, highlight, press } = useAccordionItemContext();
+  const shape = useShape();
+  const sizeClasses = useSize();
+  const [isHovered, setIsHovered] = useState(false);
+  const isActive = groupCtx?.grouped ? groupCtx.activeIndex === index : isHovered;
+  const capture = (event) => {
+    const row = event.currentTarget;
+    const box = row.getBoundingClientRect();
+    press.current = (event.clientX - box.left) * row.offsetWidth / box.width;
+  };
+  const triggerContent = /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
+    render: /* @__PURE__ */ jsx("div", {}),
+    children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, {
+      ref,
+      className: cn(`relative z-10 flex items-center ${sizeClasses.gap} ${shape.item} ${sizeClasses.px} ${sizeClasses.variant === "compact" ? "py-1" : "py-2"} w-full cursor-pointer outline-none select-none`, !groupCtx?.grouped && "focus-visible:ring-1 focus-visible:ring-focus-ring focus-visible:ring-offset-0", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("span", {
+          className: cn("inline-grid flex-1 text-left", sizeClasses.text),
+          children: [
+            /* @__PURE__ */ jsx("span", {
+              className: "col-start-1 row-start-1 invisible weight-semibold",
+              "aria-hidden": "true",
+              children
+            }),
+            /* @__PURE__ */ jsx("span", {
+              className: cn("col-start-1 row-start-1 transition-[color,font-variation-settings] duration-fast", isOpen || isActive ? "text-foreground" : "text-muted-foreground", isOpen ? "weight-semibold" : "weight-normal"),
+              children
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx(motion.span, {
+          className: "shrink-0 inline-flex items-center justify-center",
+          animate: { rotate: isOpen ? 90 : 0 },
+          transition: spring.fast,
+          children: /* @__PURE__ */ jsx(ChevronRight, {
+            size: sizeClasses.icon,
+            strokeWidth: isOpen || isActive ? 2 : 1.5,
+            className: cn("transition-[color,stroke-width] duration-fast", isOpen || isActive ? "text-foreground" : "text-muted-foreground")
+          })
+        })
+      ]
+    })
+  });
+  if (groupCtx?.grouped) {
+    return /* @__PURE__ */ jsx("div", {
+      ref: triggerRef,
+      onPointerDown: capture,
+      children: triggerContent
+    });
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    className: "relative",
+    onPointerDown: capture,
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false),
+    children: [
+      /* @__PURE__ */ jsx(AnimatePresence, {
+        children: isOpen && highlight === "trigger" && isHovered && /* @__PURE__ */ jsx(motion.div, {
+          className: `absolute inset-0 ${shape.bg} bg-accent/20 dark:bg-accent/12 pointer-events-none`,
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0, transition: spring.moderate.exit },
+          transition: { duration: spring.moderate.exit.duration }
+        })
+      }),
+      /* @__PURE__ */ jsx(AnimatePresence, {
+        children: isHovered && /* @__PURE__ */ jsx(motion.div, {
+          className: `absolute inset-0 z-1 ${shape.bg} bg-hover pointer-events-none`,
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0, transition: spring.fast.exit },
+          transition: { duration: spring.fast.duration }
+        })
+      }),
+      triggerContent
+    ]
+  });
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+function grow(a, b, t) {
+  const p = Math.min(1, t);
+  const at = (from, to) => from + (to - from) * p;
+  const w = at(a.w, b.w);
+  const h = at(a.h, b.h);
+  return { x: at(a.x, b.x), y: at(a.y, b.y), w, h, r: Math.min(at(a.r, b.r), w / 2, h / 2) };
+}
+function place(el, { x, y, w, h, r }) {
+  if (!el)
+    return;
+  el.style.left = `${x}px`;
+  el.style.top = `${y}px`;
+  el.style.width = `${w}px`;
+  el.style.height = `${h}px`;
+  el.style.borderRadius = `${r}px`;
+}
+var AccordionContent = forwardRef(({ children, className, effect = "goo", tier = "slow", ...props }, ref) => {
+  const groupCtx = useAccordionGroup();
+  const { isOpen, highlight, press } = useAccordionItemContext();
+  const shape = useShape();
+  const sizeClasses = useSize();
+  const reduceMotion = useReduceMotion();
+  const gooId = `accordion-goo-${useId().replace(/:/g, "")}`;
+  const progress = useMotionValue(isOpen ? 1 : 0);
+  const tint = useTransform(progress, [0, 0.3], [0, 1]);
+  const tinted = highlight === "item";
+  const remeasure = useRef(groupCtx?.remeasure);
+  remeasure.current = groupCtx?.remeasure;
+  const refs = {
+    panel: useRef(null),
+    content: useRef(null),
+    rest: useRef(null),
+    goo: useRef(null),
+    row: useRef(null),
+    shape: useRef(null)
+  };
+  useImperativeHandle(ref, () => refs.panel.current, []);
+  const geometry = useRef({ x: 0, width: 0, row: 0, body: 0 });
+  const render = (p) => {
+    const { x, width, row, body } = geometry.current;
+    const rect = grow({ x, y: row / 2, w: 0, h: 0, r: width }, { x: 0, y: 0, w: width, h: row + body, r: shape.bgRadius }, p);
+    const reach = rect.y + rect.h - row;
+    const { panel, content } = refs;
+    if (panel.current)
+      panel.current.style.height = `${Math.max(0, reach)}px`;
+    if (content.current) {
+      content.current.style.clipPath = `inset(${rect.y - row}px ${width - rect.x - rect.w}px ${body - reach}px ${rect.x}px round ${rect.r}px)`;
+    }
+    place(refs.shape.current, rect);
+    remeasure.current?.();
+  };
+  const [exitComplete, setExitComplete] = useState(!isOpen);
+  if (isOpen && exitComplete) {
+    setExitComplete(false);
+  }
+  const settle = (open) => {
+    const { panel, content, goo, rest } = refs;
+    if (panel.current)
+      panel.current.style.height = open ? "" : "0px";
+    if (content.current)
+      content.current.style.clipPath = open ? "" : "inset(50%)";
+    if (goo.current)
+      goo.current.style.display = "";
+    if (rest.current)
+      rest.current.style.display = "";
+    remeasure.current?.();
+    if (!open)
+      setExitComplete(true);
+  };
+  const wasOpen = useRef(isOpen);
+  useIsoLayoutEffect(() => {
+    if (wasOpen.current === isOpen)
+      return;
+    wasOpen.current = isOpen;
+    const { panel, content, goo, rest, row } = refs;
+    if (!panel.current || !content.current)
+      return;
+    const g = geometry.current;
+    g.width = panel.current.offsetWidth;
+    g.row = panel.current.offsetTop;
+    g.body = content.current.offsetHeight;
+    if (isOpen && progress.get() === 0)
+      g.x = press.current ?? g.width / 2;
+    press.current = null;
+    if (reduceMotion) {
+      progress.set(isOpen ? 1 : 0);
+      settle(isOpen);
+      return;
+    }
+    if (goo.current)
+      goo.current.style.display = "block";
+    if (rest.current)
+      rest.current.style.display = "none";
+    if (row.current)
+      row.current.style.height = `${g.row}px`;
+    render(progress.get());
+    const { exit, ...enter } = spring[tier];
+    const controls = animate(progress, isOpen ? 1 : 0, {
+      ...isOpen ? enter : exit,
+      onUpdate: render,
+      onComplete: () => settle(isOpen)
+    });
+    return () => controls.stop();
+  }, [isOpen]);
+  useIsoLayoutEffect(() => {
+    const content = refs.content.current;
+    if (!content)
+      return;
+    const observer = new ResizeObserver(() => {
+      if (content.offsetHeight > 0)
+        geometry.current.body = content.offsetHeight;
+      remeasure.current?.();
+    });
+    observer.observe(content);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Panel, {
+    keepMounted: true,
+    render: (panelProps) => {
+      const {
+        hidden: _baseHidden,
+        style: _baseStyle,
+        ...restPanel
+      } = panelProps;
+      return /* @__PURE__ */ jsx("div", {
+        ...restPanel,
+        hidden: !isOpen && exitComplete,
+        children: /* @__PURE__ */ jsxs("div", {
+          ref: refs.panel,
+          className,
+          ...props,
+          children: [
+            tinted && /* @__PURE__ */ jsx(motion.div, {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute inset-0",
+              initial: false,
+              animate: { opacity: groupCtx?.dimOpen ? 0.7 : 1 },
+              transition: { duration: spring.moderate.exit.duration },
+              children: /* @__PURE__ */ jsx(motion.div, {
+                className: "absolute inset-0",
+                style: { opacity: tint },
+                children: /* @__PURE__ */ jsxs("div", {
+                  className: "absolute inset-0 opacity-20 dark:opacity-12",
+                  children: [
+                    /* @__PURE__ */ jsx("div", {
+                      ref: refs.rest,
+                      className: cn("absolute inset-0 bg-accent", shape.bg)
+                    }),
+                    effect === "goo" && /* @__PURE__ */ jsx(GooFilter, {
+                      id: gooId,
+                      blur: shape.bgRadius * GOO_BLUR_RATIO
+                    }),
+                    /* @__PURE__ */ jsxs("div", {
+                      ref: refs.goo,
+                      className: "absolute inset-0 hidden",
+                      style: effect === "goo" ? { filter: `url(#${gooId})` } : undefined,
+                      children: [
+                        /* @__PURE__ */ jsx("div", {
+                          ref: refs.row,
+                          className: cn("absolute inset-x-0 top-0 bg-accent", shape.bg)
+                        }),
+                        /* @__PURE__ */ jsx("div", {
+                          ref: refs.shape,
+                          className: "absolute bg-accent"
+                        })
+                      ]
+                    })
+                  ]
+                })
+              })
+            }),
+            /* @__PURE__ */ jsx("div", {
+              ref: refs.content,
+              className: cn("relative pt-1 text-muted-foreground", sizeClasses.px, sizeClasses.text, sizeClasses.variant === "compact" ? "pb-2.5" : "pb-3"),
+              children
+            })
+          ]
+        })
+      });
+    }
+  });
+});
+AccordionContent.displayName = "AccordionContent";
+Object.assign(Accordion, {
+  Group: AccordionGroup,
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  Content: AccordionContent
+});
+var accordion_default = Accordion;
+
+export { AccordionGroup, Accordion, AccordionItem, AccordionTrigger, AccordionContent, accordion_default };