@spark-ui/components 10.8.2 → 10.10.0

package/dist/{chunk-T26TYEWV.mjs → chunk-I7UIKCZK.mjs}

@@ -13,14 +13,18 @@ import { useEffect, useRef } from "react";
 import { createContext, useContext, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 var DialogContext = createContext(null);
-var DialogProvider = ({ children: childrenProp }) => {
+var DialogProvider = ({
+  children: childrenProp,
+  withFade = false
+}) => {
   const [isFullScreen, setIsFullScreen] = useState(false);
   return /* @__PURE__ */ jsx(
     DialogContext.Provider,
     {
       value: {
         isFullScreen,
-        setIsFullScreen
+        setIsFullScreen,
+        withFade
       },
       children: childrenProp
     }
@@ -36,7 +40,7 @@ var useDialog = () => {
 
 // src/dialog/Dialog.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-var Dialog = ({ children, ...rest }) => {
+var Dialog = ({ children, withFade = false, ...rest }) => {
   const open = rest.open;
   const activeElementRef = useRef(null);
   function handleActiveElementFocus() {
@@ -51,42 +55,52 @@ var Dialog = ({ children, ...rest }) => {
     }
   }
   useEffect(handleActiveElementFocus, [open]);
-  return /* @__PURE__ */ jsx2(DialogProvider, { children: /* @__PURE__ */ jsx2(RadixDialog.Root, { ...rest, children }) });
+  return /* @__PURE__ */ jsx2(DialogProvider, { withFade, children: /* @__PURE__ */ jsx2(RadixDialog.Root, { ...rest, children }) });
 };
 Dialog.displayName = "Dialog.Root";
 
-// src/dialog/DialogBody.styles.ts
-import { cva } from "class-variance-authority";
-var dialogBodyStyles = cva(
-  ["grow", "overflow-y-auto", "outline-hidden", "focus-visible:u-outline"],
-  {
-    variants: {
-      inset: {
-        true: "",
-        false: "px-xl py-lg"
-      }
-    }
-  }
-);
-
 // src/dialog/DialogBody.tsx
+import { useMergeRefs } from "@spark-ui/hooks/use-merge-refs";
+import { useScrollOverflow } from "@spark-ui/hooks/use-scroll-overflow";
+import { cx } from "class-variance-authority";
+import { useRef as useRef2 } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var Body = ({
   children,
   className,
   inset = false,
-  ref,
+  ref: forwardedRef,
   ...rest
-}) => /* @__PURE__ */ jsx3(
-  "div",
-  {
-    "data-spark-component": "dialog-body",
-    ref,
-    className: dialogBodyStyles({ inset, className }),
-    ...rest,
-    children
-  }
-);
+}) => {
+  const scrollAreaRef = useRef2(null);
+  const ref = useMergeRefs(forwardedRef, scrollAreaRef);
+  const { withFade } = useDialog();
+  const overflow = useScrollOverflow(scrollAreaRef);
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-spark-component": "dialog-body",
+      ref,
+      className: cx(
+        "focus-visible:u-outline relative grow overflow-y-auto outline-hidden",
+        "transition-all duration-300",
+        {
+          ["px-xl py-lg"]: !inset
+        },
+        className
+      ),
+      style: {
+        ...withFade && {
+          maskImage: "linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))",
+          maskSize: `100% calc(100% + ${overflow.top ? "0px" : "44px"} + ${overflow.bottom ? "0px" : "44px"})`,
+          maskPosition: `0 ${overflow.top ? "0px" : "-44px"}`
+        }
+      },
+      ...rest,
+      children
+    }
+  );
+};
 Body.displayName = "Dialog.Body";
 
 // src/dialog/DialogClose.tsx
@@ -97,7 +111,7 @@ Close.displayName = "Dialog.Close";
 
 // src/dialog/DialogCloseButton.tsx
 import { Close as CloseSVG } from "@spark-ui/icons/Close";
-import { cx } from "class-variance-authority";
+import { cx as cx2 } from "class-variance-authority";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var Root = ({
   "aria-label": ariaLabel,
@@ -115,7 +129,7 @@ var Root = ({
       "data-spark-component": "dialog-close-button",
       "data-part": "close",
       ref,
-      className: cx(["absolute", "top-md", "right-xl"], className),
+      className: cx2(["absolute", "top-md", "right-xl"], className),
       asChild: true,
       ...rest,
       children: /* @__PURE__ */ jsx5(IconButton, { intent, size, design, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx5(Icon, { children }) })
@@ -132,8 +146,8 @@ import { Dialog as RadixDialog3 } from "radix-ui";
 import { useEffect as useEffect2 } from "react";
 
 // src/dialog/DialogContent.styles.tsx
-import { cva as cva2 } from "class-variance-authority";
-var dialogContentStyles = cva2(
+import { cva } from "class-variance-authority";
+var dialogContentStyles = cva(
   [
     "z-modal flex flex-col bg-surface group",
     "focus-visible:outline-hidden focus-visible:u-outline",
@@ -224,14 +238,14 @@ var Description = (props) => /* @__PURE__ */ jsx7(RadixDialog4.Description, { "d
 Description.displayName = "Dialog.Description";
 
 // src/dialog/DialogFooter.tsx
-import { cx as cx2 } from "class-variance-authority";
+import { cx as cx3 } from "class-variance-authority";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var Footer = ({ children, className, ref, ...rest }) => /* @__PURE__ */ jsx8(
   "footer",
   {
     "data-spark-component": "dialog-footer",
     ref,
-    className: cx2(className, ["px-xl", "py-lg"]),
+    className: cx3(className, ["px-xl", "py-lg"]),
     ...rest,
     children
   }
@@ -239,14 +253,14 @@ var Footer = ({ children, className, ref, ...rest }) => /* @__PURE__ */ jsx8(
 Footer.displayName = "Dialog.Footer";
 
 // src/dialog/DialogHeader.tsx
-import { cx as cx3 } from "class-variance-authority";
+import { cx as cx4 } from "class-variance-authority";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var Header = ({ children, className, ref, ...rest }) => /* @__PURE__ */ jsx9(
   "header",
   {
     "data-spark-component": "dialog-header",
     ref,
-    className: cx3(className, ["px-xl", "py-lg"]),
+    className: cx4(className, ["px-xl", "py-lg"]),
     ...rest,
     children
   }
@@ -254,7 +268,7 @@ var Header = ({ children, className, ref, ...rest }) => /* @__PURE__ */ jsx9(
 Header.displayName = "Dialog.Header";
 
 // src/dialog/DialogOverlay.tsx
-import { cx as cx4 } from "class-variance-authority";
+import { cx as cx5 } from "class-variance-authority";
 import { Dialog as RadixDialog5 } from "radix-ui";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var Overlay = ({ className, ref, ...rest }) => {
@@ -264,7 +278,7 @@ var Overlay = ({ className, ref, ...rest }) => {
     {
       "data-spark-component": "dialog-overlay",
       ref,
-      className: cx4(
+      className: cx5(
         isFullScreen ? "hidden" : "fixed",
         ["top-0", "left-0", "w-screen", "h-screen", "z-overlay"],
         ["bg-overlay/dim-1"],
@@ -285,7 +299,7 @@ var Portal = ({ children, ...rest }) => /* @__PURE__ */ jsx11(RadixDialog6.Porta
 Portal.displayName = "Dialog.Portal";
 
 // src/dialog/DialogTitle.tsx
-import { cx as cx5 } from "class-variance-authority";
+import { cx as cx6 } from "class-variance-authority";
 import { Dialog as RadixDialog7 } from "radix-ui";
 import { jsx as jsx12 } from "react/jsx-runtime";
 var Title = ({ className, ref, ...others }) => {
@@ -294,7 +308,7 @@ var Title = ({ className, ref, ...others }) => {
     {
       "data-spark-component": "dialog-title",
       ref,
-      className: cx5(
+      className: cx6(
         "text-headline-1 text-on-surface",
         "group-has-data-[part=close]:pr-3xl",
         className
@@ -341,4 +355,4 @@ Description.displayName = "Dialog.Description";
 export {
   Dialog2 as Dialog
 };
-//# sourceMappingURL=chunk-T26TYEWV.mjs.map
+//# sourceMappingURL=chunk-I7UIKCZK.mjs.map

package/dist/chunk-I7UIKCZK.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dialog/Dialog.tsx","../src/dialog/DialogContext.tsx","../src/dialog/DialogBody.tsx","../src/dialog/DialogClose.tsx","../src/dialog/DialogCloseButton.tsx","../src/dialog/DialogContent.tsx","../src/dialog/DialogContent.styles.tsx","../src/dialog/DialogDescription.tsx","../src/dialog/DialogFooter.tsx","../src/dialog/DialogHeader.tsx","../src/dialog/DialogOverlay.tsx","../src/dialog/DialogPortal.tsx","../src/dialog/DialogTitle.tsx","../src/dialog/DialogTrigger.tsx","../src/dialog/index.ts"],"sourcesContent":["import { Dialog as RadixDialog } from 'radix-ui'\nimport { type ReactElement, useEffect, useRef } from 'react'\n\nimport { DialogProvider } from './DialogContext'\n\nexport interface DialogProps {\n  /**\n   * Children of the component.\n   */\n  children?: RadixDialog.DialogProps['children']\n  /**\n   * Specifies if the dialog is open or not.\n   */\n  open?: RadixDialog.DialogProps['open']\n  /**\n   * Default open state.\n   */\n  defaultOpen?: RadixDialog.DialogProps['defaultOpen']\n  /**\n   * Handler executen on every dialog open state change.\n   */\n  onOpenChange?: RadixDialog.DialogProps['onOpenChange']\n  /**\n   * Specifies if the dialog is a modal.\n   */\n  modal?: RadixDialog.DialogProps['modal']\n  /**\n   * Specifies if the dialog should have a fade animation on its body (in case it is scrollable).\n   */\n  withFade?: boolean\n}\n\nexport const Dialog = ({ children, withFade = false, ...rest }: DialogProps): ReactElement => {\n  const open = rest.open\n  const activeElementRef = useRef<Element>(null)\n\n  /**\n   * This function captures the active element when the Dialog is opened\n   * and sets focus back to it when the Dialog is closed.\n   */\n  function handleActiveElementFocus() {\n    if (open && document.activeElement) {\n      activeElementRef.current = document.activeElement\n    }\n\n    if (!open) {\n      setTimeout(() => {\n        if (!(activeElementRef.current instanceof HTMLElement)) return\n        activeElementRef.current.focus()\n      }, 0)\n    }\n  }\n\n  useEffect(handleActiveElementFocus, [open])\n\n  return (\n    <DialogProvider withFade={withFade}>\n      <RadixDialog.Root {...rest}>{children}</RadixDialog.Root>\n    </DialogProvider>\n  )\n}\n\nDialog.displayName = 'Dialog.Root'\n","import { createContext, type ReactNode, useContext, useState } from 'react'\n\nexport interface DialogContextState {\n  isFullScreen: boolean\n  setIsFullScreen: (value: boolean) => void\n  withFade: boolean\n}\n\nconst DialogContext = createContext<DialogContextState | null>(null)\n\nexport const DialogProvider = ({\n  children: childrenProp,\n  withFade = false,\n}: {\n  children: ReactNode\n  withFade?: boolean\n}) => {\n  const [isFullScreen, setIsFullScreen] = useState(false)\n\n  return (\n    <DialogContext.Provider\n      value={{\n        isFullScreen,\n        setIsFullScreen,\n        withFade,\n      }}\n    >\n      {childrenProp}\n    </DialogContext.Provider>\n  )\n}\n\nexport const useDialog = () => {\n  const context = useContext(DialogContext)\n\n  if (!context) {\n    throw Error('useDialog must be used within a Dialog provider')\n  }\n\n  return context\n}\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { useScrollOverflow } from '@spark-ui/hooks/use-scroll-overflow'\nimport { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref, useRef } from 'react'\n\nimport { useDialog } from './DialogContext'\n\nexport interface BodyProps {\n  children: ReactNode\n  className?: string\n  tabIndex?: number\n  ref?: Ref<HTMLDivElement>\n  inset?: boolean\n}\n\nexport const Body = ({\n  children,\n  className,\n  inset = false,\n  ref: forwardedRef,\n  ...rest\n}: BodyProps): ReactElement => {\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n  const { withFade } = useDialog()\n\n  const overflow = useScrollOverflow(scrollAreaRef)\n\n  return (\n    <div\n      data-spark-component=\"dialog-body\"\n      ref={ref}\n      className={cx(\n        'focus-visible:u-outline relative grow overflow-y-auto outline-hidden',\n        'transition-all duration-300',\n        {\n          ['px-xl py-lg']: !inset,\n        },\n        className\n      )}\n      style={{\n        ...(withFade && {\n          maskImage:\n            'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))',\n          maskSize: `100% calc(100% + ${overflow.top ? '0px' : '44px'} + ${overflow.bottom ? '0px' : '44px'})`,\n          maskPosition: `0 ${overflow.top ? '0px' : '-44px'}`,\n        }),\n      }}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nBody.displayName = 'Dialog.Body'\n","import { Dialog as RadixDialog } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type CloseProps = RadixDialog.DialogCloseProps & {\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const Close = (props: CloseProps) => <RadixDialog.Close {...props} />\n\nClose.displayName = 'Dialog.Close'\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport { IconButton, type IconButtonProps } from '../icon-button'\nimport { Close, CloseProps } from './DialogClose'\n\nexport type CloseButtonProps = CloseProps &\n  Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>\n\nconst Root = ({\n  'aria-label': ariaLabel,\n  className,\n  size = 'md',\n  intent = 'neutral',\n  design = 'ghost',\n  children = <CloseSVG />,\n  ref,\n  ...rest\n}: CloseButtonProps) => {\n  return (\n    <Close\n      data-spark-component=\"dialog-close-button\"\n      data-part=\"close\"\n      ref={ref}\n      className={cx(['absolute', 'top-md', 'right-xl'], className)}\n      asChild\n      {...rest}\n    >\n      <IconButton intent={intent} size={size} design={design} aria-label={ariaLabel}>\n        <Icon>{children}</Icon>\n      </IconButton>\n    </Close>\n  )\n}\n\nexport const CloseButton = Object.assign(Root, {\n  id: 'CloseButton',\n})\n\nRoot.displayName = 'Dialog.CloseButton'\n","import { Dialog as RadixDialog } from 'radix-ui'\nimport { type ReactElement, Ref, useEffect } from 'react'\n\nimport { dialogContentStyles, type DialogContentStylesProps } from './DialogContent.styles'\nimport { useDialog } from './DialogContext'\n\nexport interface ContentProps extends RadixDialog.DialogContentProps, DialogContentStylesProps {\n  /**\n   * When set to true, the content will adjust its width to fit the content rather than taking up the full available width.\n   */\n  isNarrow?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Content = ({\n  children,\n  className,\n  isNarrow = false,\n  size = 'md',\n  onInteractOutside,\n  ref,\n  ...rest\n}: ContentProps): ReactElement => {\n  const { setIsFullScreen } = useDialog()\n\n  useEffect(() => {\n    if (size === 'fullscreen') setIsFullScreen(true)\n\n    return () => setIsFullScreen(false)\n  }, [setIsFullScreen, size])\n\n  return (\n    <RadixDialog.Content\n      data-spark-component=\"dialog-content\"\n      ref={ref}\n      className={dialogContentStyles({\n        className,\n        isNarrow,\n        size,\n      })}\n      onInteractOutside={e => {\n        const isForegroundElement = (e.target as HTMLElement).closest('.z-toast, .z-popover')\n\n        /**\n         * The focus trap of the dialog applies `pointer-events-none` on the body of the page in the background, but\n         * some components with an higher z-index have `pointer-events-auto` applied on them to remain interactive and ignore the focust trap (ex: a Snackbar with actions).\n         *\n         * Clicking on the snackbar will be considered as an \"outside click\" and close the dialog. We want to prevent this.\n         */\n        if (isForegroundElement) {\n          e.preventDefault()\n        }\n\n        onInteractOutside?.(e)\n      }}\n      {...rest}\n    >\n      {children}\n    </RadixDialog.Content>\n  )\n}\n\nContent.displayName = 'Dialog.Content'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const dialogContentStyles = cva(\n  [\n    'z-modal flex flex-col bg-surface group',\n    'focus-visible:outline-hidden focus-visible:u-outline',\n    '[&:not(:has(footer))]:pb-lg',\n    '[&:not(:has(header))]:pt-lg',\n  ],\n  {\n    variants: {\n      size: {\n        fullscreen: 'fixed size-full top-0 left-0',\n        sm: 'max-w-sz-480',\n        md: 'max-w-sz-672',\n        lg: 'max-w-sz-864',\n      },\n      isNarrow: {\n        true: [],\n        false: [],\n      },\n    },\n    compoundVariants: [\n      {\n        size: ['sm', 'md', 'lg'],\n        class: [\n          'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n          'max-h-[80%]',\n          'shadow-md rounded-lg',\n          'data-[state=open]:animate-fade-in',\n          'data-[state=closed]:animate-fade-out',\n        ],\n      },\n      {\n        size: ['sm', 'md', 'lg'],\n        isNarrow: false,\n        class: ['w-full'],\n      },\n    ],\n    defaultVariants: {\n      size: 'md',\n      isNarrow: false,\n    },\n  }\n)\n\nexport type DialogContentStylesProps = VariantProps<typeof dialogContentStyles>\n","import { Dialog as RadixDialog } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type DescriptionProps = RadixDialog.DialogDescriptionProps & {\n  ref?: Ref<HTMLParagraphElement>\n}\n\nexport const Description = (props: DescriptionProps) => (\n  <RadixDialog.Description data-spark-component=\"dialog-description\" {...props} />\n)\n\nDescription.displayName = 'Dialog.Description'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface FooterProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Footer = ({ children, className, ref, ...rest }: FooterProps): ReactElement => (\n  <footer\n    data-spark-component=\"dialog-footer\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </footer>\n)\n\nFooter.displayName = 'Dialog.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface HeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Header = ({ children, className, ref, ...rest }: HeaderProps): ReactElement => (\n  <header\n    data-spark-component=\"dialog-header\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </header>\n)\n\nHeader.displayName = 'Dialog.Header'\n","import { cx } from 'class-variance-authority'\nimport { Dialog as RadixDialog } from 'radix-ui'\nimport { type ReactElement, Ref } from 'react'\n\nimport { useDialog } from './DialogContext'\n\nexport type OverlayProps = RadixDialog.DialogOverlayProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Overlay = ({ className, ref, ...rest }: OverlayProps): ReactElement | null => {\n  const { isFullScreen } = useDialog()\n\n  return (\n    <RadixDialog.Overlay\n      data-spark-component=\"dialog-overlay\"\n      ref={ref}\n      className={cx(\n        isFullScreen ? 'hidden' : 'fixed',\n        ['top-0', 'left-0', 'w-screen', 'h-screen', 'z-overlay'],\n        ['bg-overlay/dim-1'],\n        ['data-[state=open]:animate-fade-in'],\n        ['data-[state=closed]:animate-fade-out'],\n        className\n      )}\n      {...rest}\n    />\n  )\n}\n\nOverlay.displayName = 'Dialog.Overlay'\n","import { Dialog as RadixDialog } from 'radix-ui'\nimport { type ReactElement } from 'react'\n\nexport type PortalProps = RadixDialog.DialogPortalProps\n\nexport const Portal = ({ children, ...rest }: PortalProps): ReactElement => (\n  <RadixDialog.Portal {...rest}>{children}</RadixDialog.Portal>\n)\n\nPortal.displayName = 'Dialog.Portal'\n","import { cx } from 'class-variance-authority'\nimport { Dialog as RadixDialog } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type TitleProps = RadixDialog.DialogTitleProps & {\n  ref?: Ref<HTMLHeadingElement>\n}\n\nexport const Title = ({ className, ref, ...others }: TitleProps) => {\n  return (\n    <RadixDialog.Title\n      data-spark-component=\"dialog-title\"\n      ref={ref}\n      className={cx(\n        'text-headline-1 text-on-surface',\n        'group-has-data-[part=close]:pr-3xl',\n        className\n      )}\n      {...others}\n    />\n  )\n}\n\nTitle.displayName = 'Dialog.Title'\n","import { Dialog as RadixDialog } from 'radix-ui'\nimport { type ReactElement, ReactNode, Ref } from 'react'\n\nexport interface TriggerProps {\n  /**\n   * Children of the component.\n   */\n  children?: ReactNode\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: RadixDialog.DialogTriggerProps['asChild']\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const Trigger = (props: TriggerProps): ReactElement => (\n  <RadixDialog.Trigger data-spark-component=\"dialog-trigger\" {...props} />\n)\n\nTrigger.displayName = 'Dialog.Trigger'\n","import { Dialog as Root } from './Dialog'\nimport { Body } from './DialogBody'\nimport { Close } from './DialogClose'\nimport { CloseButton } from './DialogCloseButton'\nimport { Content } from './DialogContent'\nimport { Description } from './DialogDescription' // aria-describedby\nimport { Footer } from './DialogFooter'\nimport { Header } from './DialogHeader'\nimport { Overlay } from './DialogOverlay'\nimport { Portal } from './DialogPortal'\nimport { Title } from './DialogTitle' // aria-labelledby\nimport { Trigger } from './DialogTrigger'\n\nexport const Dialog: typeof Root & {\n  Trigger: typeof Trigger\n  Portal: typeof Portal\n  Overlay: typeof Overlay\n  Content: typeof Content\n  Header: typeof Header\n  Body: typeof Body\n  Footer: typeof Footer\n  Close: typeof Close\n  CloseButton: typeof CloseButton\n  Title: typeof Title\n  Description: typeof Description\n} = Object.assign(Root, {\n  Trigger,\n  Portal,\n  Overlay,\n  Content,\n  Header,\n  Body,\n  Footer,\n  Close,\n  CloseButton,\n  Title,\n  Description,\n})\n\nDialog.displayName = 'Dialog'\nDialog.Trigger.displayName = 'Dialog.Trigger'\nTrigger.displayName = 'Dialog.Trigger'\nPortal.displayName = 'Dialog.Portal'\nOverlay.displayName = 'Dialog.Overlay'\nContent.displayName = 'Dialog.Content'\nHeader.displayName = 'Dialog.Header'\nBody.displayName = 'Dialog.Body'\nFooter.displayName = 'Dialog.Footer'\nCloseButton.displayName = 'Dialog.CloseButton'\nTitle.displayName = 'Dialog.Title'\nDescription.displayName = 'Dialog.Description'\n\nexport { type DialogProps } from './Dialog'\nexport { type ContentProps as DialogContentProps } from './DialogContent'\nexport { type HeaderProps as DialogHeaderProps } from './DialogHeader'\nexport { type BodyProps as DialogBodyProps } from './DialogBody'\nexport { type FooterProps as DialogFooterProps } from './DialogFooter'\nexport { type TriggerProps as DialogTriggerProps } from './DialogTrigger'\nexport { type OverlayProps as DialogOverlayProps } from './DialogOverlay'\nexport { type PortalProps as DialogPortalProps } from './DialogPortal'\nexport { type TitleProps as DialogTitleProps } from './DialogTitle'\nexport { type DescriptionProps as DialogDescriptionProps } from './DialogDescription'\nexport { type CloseProps as DialogCloseProps } from './DialogClose'\nexport { type CloseButtonProps as DialogCloseButtonProps } from './DialogCloseButton'\n"],"mappings":";;;;;;;;AAAA,SAAS,UAAU,mBAAmB;AACtC,SAA4B,WAAW,cAAc;;;ACDrD,SAAS,eAA+B,YAAY,gBAAgB;AAoBhE;AAZJ,IAAM,gBAAgB,cAAyC,IAAI;AAE5D,IAAM,iBAAiB,CAAC;AAAA,EAC7B,UAAU;AAAA,EACV,WAAW;AACb,MAGM;AACJ,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,SACE;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEO,IAAM,YAAY,MAAM;AAC7B,QAAM,UAAU,WAAW,aAAa;AAExC,MAAI,CAAC,SAAS;AACZ,UAAM,MAAM,iDAAiD;AAAA,EAC/D;AAEA,SAAO;AACT;;;ADiBM,gBAAAA,YAAA;AAzBC,IAAM,SAAS,CAAC,EAAE,UAAU,WAAW,OAAO,GAAG,KAAK,MAAiC;AAC5F,QAAM,OAAO,KAAK;AAClB,QAAM,mBAAmB,OAAgB,IAAI;AAM7C,WAAS,2BAA2B;AAClC,QAAI,QAAQ,SAAS,eAAe;AAClC,uBAAiB,UAAU,SAAS;AAAA,IACtC;AAEA,QAAI,CAAC,MAAM;AACT,iBAAW,MAAM;AACf,YAAI,EAAE,iBAAiB,mBAAmB,aAAc;AACxD,yBAAiB,QAAQ,MAAM;AAAA,MACjC,GAAG,CAAC;AAAA,IACN;AAAA,EACF;AAEA,YAAU,0BAA0B,CAAC,IAAI,CAAC;AAE1C,SACE,gBAAAA,KAAC,kBAAe,UACd,0BAAAA,KAAC,YAAY,MAAZ,EAAkB,GAAG,MAAO,UAAS,GACxC;AAEJ;AAEA,OAAO,cAAc;;;AE9DrB,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAClC,SAAS,UAAU;AACnB,SAAiD,UAAAC,eAAc;AA2B3D,gBAAAC,YAAA;AAfG,IAAM,OAAO,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,GAAG;AACL,MAA+B;AAC7B,QAAM,gBAAgBC,QAAuB,IAAI;AACjD,QAAM,MAAM,aAAa,cAAc,aAAa;AAEpD,QAAM,EAAE,SAAS,IAAI,UAAU;AAE/B,QAAM,WAAW,kBAAkB,aAAa;AAEhD,SACE,gBAAAD;AAAA,IAAC;AAAA;AAAA,MACC,wBAAqB;AAAA,MACrB;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,UACE,CAAC,aAAa,GAAG,CAAC;AAAA,QACpB;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL,GAAI,YAAY;AAAA,UACd,WACE;AAAA,UACF,UAAU,oBAAoB,SAAS,MAAM,QAAQ,MAAM,MAAM,SAAS,SAAS,QAAQ,MAAM;AAAA,UACjG,cAAc,KAAK,SAAS,MAAM,QAAQ,OAAO;AAAA,QACnD;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,KAAK,cAAc;;;ACxDnB,SAAS,UAAUE,oBAAmB;AAOM,gBAAAC,YAAA;AAArC,IAAM,QAAQ,CAAC,UAAsB,gBAAAA,KAACD,aAAY,OAAZ,EAAmB,GAAG,OAAO;AAE1E,MAAM,cAAc;;;ACTpB,SAAS,SAAS,gBAAgB;AAClC,SAAS,MAAAE,WAAU;AAeN,gBAAAC,YAAA;AANb,IAAM,OAAO,CAAC;AAAA,EACZ,cAAc;AAAA,EACd;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW,gBAAAA,KAAC,YAAS;AAAA,EACrB;AAAA,EACA,GAAG;AACL,MAAwB;AACtB,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,wBAAqB;AAAA,MACrB,aAAU;AAAA,MACV;AAAA,MACA,WAAWC,IAAG,CAAC,YAAY,UAAU,UAAU,GAAG,SAAS;AAAA,MAC3D,SAAO;AAAA,MACN,GAAG;AAAA,MAEJ,0BAAAD,KAAC,cAAW,QAAgB,MAAY,QAAgB,cAAY,WAClE,0BAAAA,KAAC,QAAM,UAAS,GAClB;AAAA;AAAA,EACF;AAEJ;AAEO,IAAM,cAAc,OAAO,OAAO,MAAM;AAAA,EAC7C,IAAI;AACN,CAAC;AAED,KAAK,cAAc;;;ACxCnB,SAAS,UAAUE,oBAAmB;AACtC,SAAiC,aAAAC,kBAAiB;;;ACDlD,SAAS,WAAyB;AAE3B,IAAM,sBAAsB;AAAA,EACjC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,UAAU;AAAA,QACR,MAAM,CAAC;AAAA,QACP,OAAO,CAAC;AAAA,MACV;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,MAChB;AAAA,QACE,MAAM,CAAC,MAAM,MAAM,IAAI;AAAA,QACvB,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,MACA;AAAA,QACE,MAAM,CAAC,MAAM,MAAM,IAAI;AAAA,QACvB,UAAU;AAAA,QACV,OAAO,CAAC,QAAQ;AAAA,MAClB;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,EACF;AACF;;;ADZI,gBAAAC,YAAA;AAlBG,IAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAkC;AAChC,QAAM,EAAE,gBAAgB,IAAI,UAAU;AAEtC,EAAAC,WAAU,MAAM;AACd,QAAI,SAAS,aAAc,iBAAgB,IAAI;AAE/C,WAAO,MAAM,gBAAgB,KAAK;AAAA,EACpC,GAAG,CAAC,iBAAiB,IAAI,CAAC;AAE1B,SACE,gBAAAD;AAAA,IAACE,aAAY;AAAA,IAAZ;AAAA,MACC,wBAAqB;AAAA,MACrB;AAAA,MACA,WAAW,oBAAoB;AAAA,QAC7B;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,MACD,mBAAmB,OAAK;AACtB,cAAM,sBAAuB,EAAE,OAAuB,QAAQ,sBAAsB;AAQpF,YAAI,qBAAqB;AACvB,YAAE,eAAe;AAAA,QACnB;AAEA,4BAAoB,CAAC;AAAA,MACvB;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,QAAQ,cAAc;;;AE9DtB,SAAS,UAAUC,oBAAmB;AAQpC,gBAAAC,YAAA;AADK,IAAM,cAAc,CAAC,UAC1B,gBAAAA,KAACD,aAAY,aAAZ,EAAwB,wBAAqB,sBAAsB,GAAG,OAAO;AAGhF,YAAY,cAAc;;;ACX1B,SAAS,MAAAE,WAAU;AAUjB,gBAAAC,YAAA;AADK,IAAM,SAAS,CAAC,EAAE,UAAU,WAAW,KAAK,GAAG,KAAK,MACzD,gBAAAA;AAAA,EAAC;AAAA;AAAA,IACC,wBAAqB;AAAA,IACrB;AAAA,IACA,WAAWD,IAAG,WAAW,CAAC,SAAS,OAAO,CAAC;AAAA,IAC1C,GAAG;AAAA,IAEH;AAAA;AACH;AAGF,OAAO,cAAc;;;ACpBrB,SAAS,MAAAE,WAAU;AAUjB,gBAAAC,YAAA;AADK,IAAM,SAAS,CAAC,EAAE,UAAU,WAAW,KAAK,GAAG,KAAK,MACzD,gBAAAA;AAAA,EAAC;AAAA;AAAA,IACC,wBAAqB;AAAA,IACrB;AAAA,IACA,WAAWD,IAAG,WAAW,CAAC,SAAS,OAAO,CAAC;AAAA,IAC1C,GAAG;AAAA,IAEH;AAAA;AACH;AAGF,OAAO,cAAc;;;ACpBrB,SAAS,MAAAE,WAAU;AACnB,SAAS,UAAUC,oBAAmB;AAalC,gBAAAC,aAAA;AAJG,IAAM,UAAU,CAAC,EAAE,WAAW,KAAK,GAAG,KAAK,MAAyC;AACzF,QAAM,EAAE,aAAa,IAAI,UAAU;AAEnC,SACE,gBAAAA;AAAA,IAACC,aAAY;AAAA,IAAZ;AAAA,MACC,wBAAqB;AAAA,MACrB;AAAA,MACA,WAAWC;AAAA,QACT,eAAe,WAAW;AAAA,QAC1B,CAAC,SAAS,UAAU,YAAY,YAAY,WAAW;AAAA,QACvD,CAAC,kBAAkB;AAAA,QACnB,CAAC,mCAAmC;AAAA,QACpC,CAAC,sCAAsC;AAAA,QACvC;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,QAAQ,cAAc;;;AC9BtB,SAAS,UAAUC,oBAAmB;AAMpC,gBAAAC,aAAA;AADK,IAAM,SAAS,CAAC,EAAE,UAAU,GAAG,KAAK,MACzC,gBAAAA,MAACD,aAAY,QAAZ,EAAoB,GAAG,MAAO,UAAS;AAG1C,OAAO,cAAc;;;ACTrB,SAAS,MAAAE,WAAU;AACnB,SAAS,UAAUC,oBAAmB;AASlC,gBAAAC,aAAA;AAFG,IAAM,QAAQ,CAAC,EAAE,WAAW,KAAK,GAAG,OAAO,MAAkB;AAClE,SACE,gBAAAA;AAAA,IAACD,aAAY;AAAA,IAAZ;AAAA,MACC,wBAAqB;AAAA,MACrB;AAAA,MACA,WAAWD;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,MAAM,cAAc;;;ACvBpB,SAAS,UAAUG,oBAAmB;AAgBpC,gBAAAC,aAAA;AADK,IAAM,UAAU,CAAC,UACtB,gBAAAA,MAACD,aAAY,SAAZ,EAAoB,wBAAqB,kBAAkB,GAAG,OAAO;AAGxE,QAAQ,cAAc;;;ACNf,IAAME,UAYT,OAAO,OAAO,QAAM;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAEDA,QAAO,cAAc;AACrBA,QAAO,QAAQ,cAAc;AAC7B,QAAQ,cAAc;AACtB,OAAO,cAAc;AACrB,QAAQ,cAAc;AACtB,QAAQ,cAAc;AACtB,OAAO,cAAc;AACrB,KAAK,cAAc;AACnB,OAAO,cAAc;AACrB,YAAY,cAAc;AAC1B,MAAM,cAAc;AACpB,YAAY,cAAc;","names":["jsx","useRef","jsx","useRef","RadixDialog","jsx","cx","jsx","cx","RadixDialog","useEffect","jsx","useEffect","RadixDialog","RadixDialog","jsx","cx","jsx","cx","jsx","cx","RadixDialog","jsx","RadixDialog","cx","RadixDialog","jsx","cx","RadixDialog","jsx","RadixDialog","jsx","Dialog"]}

package/dist/collapsible/index.d.mts

@@ -1,60 +1,43 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as collapsible from '@zag-js/collapsible';
-import { ComponentProps, Ref, ComponentPropsWithoutRef } from 'react';
+import { Collapsible as Collapsible$1 } from '@base-ui-components/react/collapsible';
+import { ComponentProps } from 'react';
 
-interface CollapsibleProps extends ComponentProps<'div'> {
+interface ContentProps extends ComponentProps<typeof Collapsible$1.Panel> {
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
      */
     asChild?: boolean;
-    /**
-     * The open state of the collapsible when it is initially rendered. Use when you do not need to control its open state.
-     */
-    defaultOpen?: boolean;
-    /**
-     * When `true`, prevents the user from interacting with the collapsible.
-     */
-    disabled?: boolean;
-    /**
-     * Event handler called when the open state of the collapsible changes.
-     */
-    onOpenChange?: (open: boolean) => void;
-    /**
-     * The controlled open state of the collapsible. Must be used in conjunction with `onOpenChange`.
-     */
-    open?: boolean;
-    /**
-     * The ids of the elements in the collapsible. Useful for composition
-     */
-    ids?: collapsible.Props['ids'];
-    ref?: Ref<HTMLDivElement>;
 }
-declare const Collapsible$1: {
-    ({ asChild, children, defaultOpen, disabled, onOpenChange, open, ids, ref, ...props }: CollapsibleProps): react_jsx_runtime.JSX.Element;
+declare const Content: {
+    ({ asChild, className, children, hiddenUntilFound, ...props }: ContentProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-interface CollapsibleContentProps extends ComponentPropsWithoutRef<'div'> {
+interface RootProps extends ComponentProps<typeof Collapsible$1.Root> {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
     asChild?: boolean;
-    ref?: Ref<HTMLDivElement>;
 }
-declare const Content: {
-    ({ asChild, className, children, ref, ...props }: CollapsibleContentProps): react_jsx_runtime.JSX.Element;
+declare const Root: {
+    ({ asChild, children, ...props }: RootProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-interface CollapsibleTriggerProps extends ComponentPropsWithoutRef<'button'> {
+interface TriggerProps extends ComponentProps<'button'> {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
     asChild?: boolean;
-    ref?: Ref<HTMLButtonElement>;
 }
 declare const Trigger: {
-    ({ asChild, children, ref, ...props }: CollapsibleTriggerProps): react_jsx_runtime.JSX.Element;
+    ({ asChild, children, ...props }: TriggerProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-declare const Collapsible: typeof Collapsible$1 & {
+declare const Collapsible: typeof Root & {
     Trigger: typeof Trigger;
     Content: typeof Content;
 };
 
-export { Collapsible, type CollapsibleContentProps, type CollapsibleProps, type CollapsibleTriggerProps };
+export { Collapsible };

package/dist/collapsible/index.d.ts

@@ -1,60 +1,43 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as collapsible from '@zag-js/collapsible';
-import { ComponentProps, Ref, ComponentPropsWithoutRef } from 'react';
+import { Collapsible as Collapsible$1 } from '@base-ui-components/react/collapsible';
+import { ComponentProps } from 'react';
 
-interface CollapsibleProps extends ComponentProps<'div'> {
+interface ContentProps extends ComponentProps<typeof Collapsible$1.Panel> {
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
      */
     asChild?: boolean;
-    /**
-     * The open state of the collapsible when it is initially rendered. Use when you do not need to control its open state.
-     */
-    defaultOpen?: boolean;
-    /**
-     * When `true`, prevents the user from interacting with the collapsible.
-     */
-    disabled?: boolean;
-    /**
-     * Event handler called when the open state of the collapsible changes.
-     */
-    onOpenChange?: (open: boolean) => void;
-    /**
-     * The controlled open state of the collapsible. Must be used in conjunction with `onOpenChange`.
-     */
-    open?: boolean;
-    /**
-     * The ids of the elements in the collapsible. Useful for composition
-     */
-    ids?: collapsible.Props['ids'];
-    ref?: Ref<HTMLDivElement>;
 }
-declare const Collapsible$1: {
-    ({ asChild, children, defaultOpen, disabled, onOpenChange, open, ids, ref, ...props }: CollapsibleProps): react_jsx_runtime.JSX.Element;
+declare const Content: {
+    ({ asChild, className, children, hiddenUntilFound, ...props }: ContentProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-interface CollapsibleContentProps extends ComponentPropsWithoutRef<'div'> {
+interface RootProps extends ComponentProps<typeof Collapsible$1.Root> {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
     asChild?: boolean;
-    ref?: Ref<HTMLDivElement>;
 }
-declare const Content: {
-    ({ asChild, className, children, ref, ...props }: CollapsibleContentProps): react_jsx_runtime.JSX.Element;
+declare const Root: {
+    ({ asChild, children, ...props }: RootProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-interface CollapsibleTriggerProps extends ComponentPropsWithoutRef<'button'> {
+interface TriggerProps extends ComponentProps<'button'> {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
     asChild?: boolean;
-    ref?: Ref<HTMLButtonElement>;
 }
 declare const Trigger: {
-    ({ asChild, children, ref, ...props }: CollapsibleTriggerProps): react_jsx_runtime.JSX.Element;
+    ({ asChild, children, ...props }: TriggerProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-declare const Collapsible: typeof Collapsible$1 & {
+declare const Collapsible: typeof Root & {
     Trigger: typeof Trigger;
     Content: typeof Content;
 };
 
-export { Collapsible, type CollapsibleContentProps, type CollapsibleProps, type CollapsibleTriggerProps };
+export { Collapsible };

package/dist/collapsible/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,27 +15,18 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/collapsible/index.ts
 var collapsible_exports = {};
 __export(collapsible_exports, {
-  Collapsible: () => Collapsible2
+  Collapsible: () => Collapsible4
 });
 module.exports = __toCommonJS(collapsible_exports);
 
-// src/collapsible/Collapsible.tsx
-var collapsible = __toESM(require("@zag-js/collapsible"));
-var import_react2 = require("@zag-js/react");
-var import_react3 = require("react");
+// src/collapsible/Content.tsx
+var import_collapsible = require("@base-ui-components/react/collapsible");
+var import_class_variance_authority = require("class-variance-authority");
 
 // src/slot/Slot.tsx
 var import_radix_ui = require("radix-ui");
@@ -48,89 +37,69 @@ var Slot = ({ ref, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
 };
 
-// src/collapsible/Collapsible.tsx
+// src/collapsible/useRenderSlot.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var CollapsibleContext = (0, import_react3.createContext)(null);
-var Collapsible = ({
-  asChild = false,
-  children,
-  defaultOpen = false,
-  disabled = false,
-  onOpenChange,
-  open,
-  ids,
-  ref,
-  ...props
-}) => {
-  const service = (0, import_react2.useMachine)(collapsible.machine, {
-    open,
-    defaultOpen,
-    disabled,
-    id: (0, import_react3.useId)(),
-    ids,
-    onOpenChange(details) {
-      onOpenChange?.(details.open);
-    }
-  });
-  const api = collapsible.connect(service, import_react2.normalizeProps);
-  const Component = asChild ? Slot : "div";
-  const mergedProps = (0, import_react2.mergeProps)(api.getRootProps(), props);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CollapsibleContext.Provider, { value: api, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { "data-spark-component": "collapsible", ref, ...mergedProps, children }) });
-};
-Collapsible.displayName = "Collapsible";
-var useCollapsibleContext = () => {
-  const context = (0, import_react3.useContext)(CollapsibleContext);
-  if (!context) {
-    throw Error("useCollapsibleContext must be used within a Collapsible provider");
-  }
-  return context;
-};
+function useRenderSlot(asChild, defaultTag) {
+  const Component = asChild ? Slot : defaultTag;
+  return asChild ? ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ...props }) : void 0;
+}
 
-// src/collapsible/CollapsibleContent.tsx
-var import_react4 = require("@zag-js/react");
-var import_class_variance_authority = require("class-variance-authority");
+// src/collapsible/Content.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Content = ({
   asChild = false,
   className,
   children,
-  ref,
+  hiddenUntilFound = true,
   ...props
 }) => {
-  const { getContentProps } = useCollapsibleContext();
-  const Component = asChild ? Slot : "div";
-  const contentProps = getContentProps();
-  const mergedProps = (0, import_react4.mergeProps)(contentProps, {
-    className: (0, import_class_variance_authority.cx)(
-      "overflow-hidden",
-      "motion-reduce:animate-none!",
-      "[&[hidden]]:hidden",
-      "data-[state=open]:animate-standalone-collapse-in data-[state=closed]:animate-standalone-collapse-out",
-      className
-    ),
-    ...props
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ref, "data-spark-component": "collapsible-content", ...mergedProps, children });
+  const renderSlot = useRenderSlot(asChild, "div");
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_collapsible.Collapsible.Panel,
+    {
+      "data-spark-component": "collapsible-content",
+      className: (0, import_class_variance_authority.cx)(
+        "overflow-hidden",
+        "h-[var(--collapsible-panel-height)]",
+        "transition-all duration-200",
+        "motion-reduce:transition-none",
+        "data-[starting-style]:h-0",
+        "data-[ending-style]:h-0",
+        className
+      ),
+      render: renderSlot,
+      hiddenUntilFound,
+      ...props,
+      children
+    }
+  );
 };
 Content.displayName = "Collapsible.Content";
 
-// src/collapsible/CollapsibleTrigger.tsx
-var import_react5 = require("@zag-js/react");
+// src/collapsible/Root.tsx
+var import_collapsible2 = require("@base-ui-components/react/collapsible");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Trigger = ({ asChild = false, children, ref, ...props }) => {
-  const collapsibleContext = useCollapsibleContext();
-  const Component = asChild ? Slot : "button";
-  const mergedProps = (0, import_react5.mergeProps)(collapsibleContext.getTriggerProps(), props);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { ref, "data-spark-component": "collapsible-trigger", ...mergedProps, children });
+var Root = ({ asChild = false, children, ...props }) => {
+  const renderSlot = useRenderSlot(asChild, "div");
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_collapsible2.Collapsible.Root, { "data-spark-component": "collapsible", render: renderSlot, ...props, children });
+};
+Root.displayName = "Collapsible";
+
+// src/collapsible/Trigger.tsx
+var import_collapsible3 = require("@base-ui-components/react/collapsible");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Trigger = ({ asChild = false, children, ...props }) => {
+  const renderSlot = useRenderSlot(asChild, "button");
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_collapsible3.Collapsible.Trigger, { "data-spark-component": "collapsible-trigger", render: renderSlot, ...props, children });
 };
 Trigger.displayName = "Collapsible.Trigger";
 
 // src/collapsible/index.ts
-var Collapsible2 = Object.assign(Collapsible, {
+var Collapsible4 = Object.assign(Root, {
   Trigger,
   Content
 });
-Collapsible2.displayName = "Collapsible";
+Collapsible4.displayName = "Collapsible";
 Trigger.displayName = "Collapsible.Trigger";
 Content.displayName = "Collapsible.Content";
 // Annotate the CommonJS export names for ESM import in node: