@ark-ui/react 2.1.1 → 2.2.1

package/CHANGELOG.md

@@ -6,6 +6,59 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [2.2.1] - 2024-02-27
+
+### Changed
+
+- Updated to latest `@ark-ui/anatomy` version.
+
+## [2.2.0] - 2024-02-27
+
+### Added
+
+- Added `Collapsible` component.
+- Added support for `defaultExpandedIds` in the `TreeView` component.
+
+### Changed
+
+- Enhanced the performance of the Ark `factory` by utilizing `memo` to avoid unnecessary re-renders.
+- Integrated `Collapsible` into `Accordion`, allowing the `Accordion` component to utilize `Collapsible` for animating the opening and closing of content.d
+
+```css
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+[data-scope='accordion'][data-part='item-content'][data-state='open'] {
+  animation: slideDown 250ms;
+}
+
+[data-scope='accordion'][data-part='item-content'][data-state='closed'] {
+  animation: slideUp 200ms;
+}
+```
+
+### Fixed
+
+- Updated the return type of `createToaster` for comprehensive IntelliSense support when styling the `Toaster` component.
+- Revised `TreeView` to utilize `defaultSelectedIds` instead of `defaultFocusedId`.
+- Resolved an issue with using `factory` in Next.js projects.
+- Fixed a bug where the disabled `Tooltip` would flash upon hovering and clicking the trigger.
+
 ## [2.1.1] - 2024-02-14
 
 ### Fixed

package/accordion/accordion-context.d.ts

@@ -1,7 +1,6 @@
 import { Provider } from 'react';
 /// <reference types="react" />
-import type { UsePresenceProps } from '../presence';
 import { type UseAccordionReturn } from './use-accordion';
-export interface AccordionContext extends UseAccordionReturn, UsePresenceProps {
+export interface AccordionContext extends UseAccordionReturn {
 }
 export declare const AccordionProvider: Provider<AccordionContext>, useAccordionContext: () => AccordionContext;

package/accordion/accordion-item-content.cjs

@@ -6,8 +6,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
-const factory = require('../factory.cjs');
-const presenceContext = require('../presence/presence-context.cjs');
+const collapsibleContent = require('../collapsible/collapsible-content.cjs');
 const accordionContext = require('./accordion-context.cjs');
 const accordionItemContext = require('./accordion-item-context.cjs');
 
@@ -15,16 +14,9 @@ const AccordionItemContent = react.forwardRef(
   (props, ref) => {
     const api = accordionContext.useAccordionContext();
     const accordionItem = accordionItemContext.useAccordionItemContext();
-    const presenceApi = presenceContext.usePresenceContext();
-    const mergedProps = react$1.mergeProps(
-      api.getItemContentProps(accordionItem),
-      presenceApi.getPresenceProps(ref),
-      props
-    );
-    if (presenceApi.isUnmounted) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps });
+    const { hidden: _, ...itemContentProps } = api.getItemContentProps(accordionItem);
+    const mergedProps = react$1.mergeProps(itemContentProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(collapsibleContent.CollapsibleContent, { ref, ...mergedProps });
   }
 );
 AccordionItemContent.displayName = "AccordionItemContent";

package/accordion/accordion-item-content.mjs

@@ -2,8 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
-import { ark } from '../factory.mjs';
-import { usePresenceContext } from '../presence/presence-context.mjs';
+import { CollapsibleContent } from '../collapsible/collapsible-content.mjs';
 import { useAccordionContext } from './accordion-context.mjs';
 import { useAccordionItemContext } from './accordion-item-context.mjs';
 
@@ -11,16 +10,9 @@ const AccordionItemContent = forwardRef(
   (props, ref) => {
     const api = useAccordionContext();
     const accordionItem = useAccordionItemContext();
-    const presenceApi = usePresenceContext();
-    const mergedProps = mergeProps(
-      api.getItemContentProps(accordionItem),
-      presenceApi.getPresenceProps(ref),
-      props
-    );
-    if (presenceApi.isUnmounted) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps });
+    const { hidden: _, ...itemContentProps } = api.getItemContentProps(accordionItem);
+    const mergedProps = mergeProps(itemContentProps, props);
+    return /* @__PURE__ */ jsx(CollapsibleContent, { ref, ...mergedProps });
   }
 );
 AccordionItemContent.displayName = "AccordionItemContent";

package/accordion/accordion-item-trigger.cjs

@@ -6,21 +6,21 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
+const collapsibleContext = require('../collapsible/collapsible-context.cjs');
 const factory = require('../factory.cjs');
-const presenceContext = require('../presence/presence-context.cjs');
 const accordionContext = require('./accordion-context.cjs');
 const accordionItemContext = require('./accordion-item-context.cjs');
 
 const AccordionItemTrigger = react.forwardRef(
   (props, ref) => {
     const api = accordionContext.useAccordionContext();
+    const collapsible = collapsibleContext.useCollapsibleContext();
     const accordionItem = accordionItemContext.useAccordionItemContext();
-    const presenceApi = presenceContext.usePresenceContext();
     const triggerProps = api.getItemTriggerProps(accordionItem);
     const mergedProps = react$1.mergeProps(
       {
         ...triggerProps,
-        "aria-controls": presenceApi.isUnmounted ? void 0 : triggerProps["aria-controls"]
+        "aria-controls": collapsible.isUnmounted ? void 0 : triggerProps["aria-controls"]
       },
       props
     );

package/accordion/accordion-item-trigger.mjs

@@ -2,21 +2,21 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
+import { useCollapsibleContext } from '../collapsible/collapsible-context.mjs';
 import { ark } from '../factory.mjs';
-import { usePresenceContext } from '../presence/presence-context.mjs';
 import { useAccordionContext } from './accordion-context.mjs';
 import { useAccordionItemContext } from './accordion-item-context.mjs';
 
 const AccordionItemTrigger = forwardRef(
   (props, ref) => {
     const api = useAccordionContext();
+    const collapsible = useCollapsibleContext();
     const accordionItem = useAccordionItemContext();
-    const presenceApi = usePresenceContext();
     const triggerProps = api.getItemTriggerProps(accordionItem);
     const mergedProps = mergeProps(
       {
         ...triggerProps,
-        "aria-controls": presenceApi.isUnmounted ? void 0 : triggerProps["aria-controls"]
+        "aria-controls": collapsible.isUnmounted ? void 0 : triggerProps["aria-controls"]
       },
       props
     );

package/accordion/accordion-item.cjs

@@ -4,29 +4,37 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const accordion = require('@zag-js/accordion');
 const react$1 = require('@zag-js/react');
 const react = require('react');
-const createSplitProps = require('../create-split-props.cjs');
-const factory = require('../factory.cjs');
-const presenceContext = require('../presence/presence-context.cjs');
-const presencePropsContext = require('../presence/presence-props-context.cjs');
-const usePresence = require('../presence/use-presence.cjs');
+const collapsibleRoot = require('../collapsible/collapsible-root.cjs');
+const splitCollapsibleProps = require('../collapsible/split-collapsible-props.cjs');
+const renderStrategy = require('../render-strategy.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const accordionContext = require('./accordion-context.cjs');
 const accordionItemContext = require('./accordion-item-context.cjs');
 
 const AccordionItem = react.forwardRef((props, ref) => {
-  const [itemProps, { children, ...localProps }] = createSplitProps.createSplitProps()(props, [
-    "value",
-    "disabled"
-  ]);
+  const [collapsibleProps, accordionItemProps] = splitCollapsibleProps.splitCollapsibleProps(props);
+  const [itemProps, { children, ...localProps }] = accordion.splitItemProps(accordionItemProps);
   const api = accordionContext.useAccordionContext();
+  const renderStrategyProps = renderStrategy.useRenderStrategyContext();
+  const mergedItemProps = react$1.mergeProps(api.getItemProps(itemProps), localProps);
+  const mergedCollapsibleProps = react$1.mergeProps(renderStrategyProps, collapsibleProps);
   const itemState = api.getItemState(itemProps);
-  const mergedProps = react$1.mergeProps(api.getItemProps(itemProps), localProps);
   const view = runIfFn.runIfFn(children, itemState);
-  const presenceProps = presencePropsContext.usePresencePropsContext();
-  const presenceApi = usePresence.usePresence({ ...presenceProps, present: itemState.isOpen });
-  return /* @__PURE__ */ jsxRuntime.jsx(accordionItemContext.AccordionItemProvider, { value: itemProps, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) }) });
+  const itemContentProps = api.getItemContentProps(itemProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(accordionItemContext.AccordionItemProvider, { value: itemProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+    collapsibleRoot.CollapsibleRoot,
+    {
+      ref,
+      open: itemState.isOpen,
+      ids: { content: itemContentProps.id },
+      ...mergedItemProps,
+      ...mergedCollapsibleProps,
+      children: view
+    }
+  ) });
 });
 AccordionItem.displayName = "AccordionItem";
 

package/accordion/accordion-item.d.ts

@@ -1,9 +1,10 @@
-import type { ItemProps, ItemState } from '@zag-js/accordion';
+import { type ItemProps, type ItemState } from '@zag-js/accordion';
 import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import type { UseCollapsibleProps } from '../collapsible/use-collapsible';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export interface AccordionItemProps extends Assign<HTMLArkProps<'div'>, {
+export interface AccordionItemProps extends Assign<Assign<HTMLArkProps<'div'>, {
     children?: ReactNode | ((state: ItemState) => ReactNode);
-}>, ItemProps {
+}>, UseCollapsibleProps>, ItemProps {
 }
 export declare const AccordionItem: ForwardRefExoticComponent<AccordionItemProps & RefAttributes<HTMLDivElement>>;

package/accordion/accordion-item.mjs

@@ -1,28 +1,36 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { splitItemProps } from '@zag-js/accordion';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
-import { createSplitProps } from '../create-split-props.mjs';
-import { ark } from '../factory.mjs';
-import { PresenceProvider } from '../presence/presence-context.mjs';
-import { usePresencePropsContext } from '../presence/presence-props-context.mjs';
-import { usePresence } from '../presence/use-presence.mjs';
+import { CollapsibleRoot } from '../collapsible/collapsible-root.mjs';
+import { splitCollapsibleProps } from '../collapsible/split-collapsible-props.mjs';
+import { useRenderStrategyContext } from '../render-strategy.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { useAccordionContext } from './accordion-context.mjs';
 import { AccordionItemProvider } from './accordion-item-context.mjs';
 
 const AccordionItem = forwardRef((props, ref) => {
-  const [itemProps, { children, ...localProps }] = createSplitProps()(props, [
-    "value",
-    "disabled"
-  ]);
+  const [collapsibleProps, accordionItemProps] = splitCollapsibleProps(props);
+  const [itemProps, { children, ...localProps }] = splitItemProps(accordionItemProps);
   const api = useAccordionContext();
+  const renderStrategyProps = useRenderStrategyContext();
+  const mergedItemProps = mergeProps(api.getItemProps(itemProps), localProps);
+  const mergedCollapsibleProps = mergeProps(renderStrategyProps, collapsibleProps);
   const itemState = api.getItemState(itemProps);
-  const mergedProps = mergeProps(api.getItemProps(itemProps), localProps);
   const view = runIfFn(children, itemState);
-  const presenceProps = usePresencePropsContext();
-  const presenceApi = usePresence({ ...presenceProps, present: itemState.isOpen });
-  return /* @__PURE__ */ jsx(AccordionItemProvider, { value: itemProps, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) }) });
+  const itemContentProps = api.getItemContentProps(itemProps);
+  return /* @__PURE__ */ jsx(AccordionItemProvider, { value: itemProps, children: /* @__PURE__ */ jsx(
+    CollapsibleRoot,
+    {
+      ref,
+      open: itemState.isOpen,
+      ids: { content: itemContentProps.id },
+      ...mergedItemProps,
+      ...mergedCollapsibleProps,
+      children: view
+    }
+  ) });
 });
 AccordionItem.displayName = "AccordionItem";
 

package/accordion/accordion-root.cjs

@@ -8,13 +8,12 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
-const presencePropsContext = require('../presence/presence-props-context.cjs');
-const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const renderStrategy = require('../render-strategy.cjs');
 const accordionContext = require('./accordion-context.cjs');
 const useAccordion = require('./use-accordion.cjs');
 
 const AccordionRoot = react.forwardRef((props, ref) => {
-  const [presenceProps, accordionProps] = splitPresenceProps.splitPresenceProps(props);
+  const [renderStrategyProps, accordionProps] = renderStrategy.splitRenderStrategyProps(props);
   const [useAccordionProps, localProps] = createSplitProps.createSplitProps()(accordionProps, [
     "collapsible",
     "defaultValue",
@@ -31,7 +30,7 @@ const AccordionRoot = react.forwardRef((props, ref) => {
   ]);
   const api = useAccordion.useAccordion(useAccordionProps);
   const mergedProps = react$1.mergeProps(api.rootProps, localProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(accordionContext.AccordionProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presencePropsContext.PresencePropsProvider, { value: presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(accordionContext.AccordionProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(renderStrategy.RenderStrategyProvider, { value: renderStrategyProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
 });
 AccordionRoot.displayName = "AccordionRoot";
 

package/accordion/accordion-root.d.ts

@@ -1,9 +1,9 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-import { type UsePresenceProps } from '../presence';
+import { type RenderStrategyProps } from '../render-strategy';
 import type { Assign } from '../types';
 import { type UseAccordionProps } from './use-accordion';
-export interface AccordionRootProps extends Assign<HTMLArkProps<'div'>, UseAccordionProps>, UsePresenceProps {
+export interface AccordionRootProps extends Assign<HTMLArkProps<'div'>, UseAccordionProps>, RenderStrategyProps {
 }
 export declare const AccordionRoot: ForwardRefExoticComponent<AccordionRootProps & RefAttributes<HTMLDivElement>>;

package/accordion/accordion-root.mjs

@@ -4,13 +4,12 @@ import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
-import { PresencePropsProvider } from '../presence/presence-props-context.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { splitRenderStrategyProps, RenderStrategyProvider } from '../render-strategy.mjs';
 import { AccordionProvider } from './accordion-context.mjs';
 import { useAccordion } from './use-accordion.mjs';
 
 const AccordionRoot = forwardRef((props, ref) => {
-  const [presenceProps, accordionProps] = splitPresenceProps(props);
+  const [renderStrategyProps, accordionProps] = splitRenderStrategyProps(props);
   const [useAccordionProps, localProps] = createSplitProps()(accordionProps, [
     "collapsible",
     "defaultValue",
@@ -27,7 +26,7 @@ const AccordionRoot = forwardRef((props, ref) => {
   ]);
   const api = useAccordion(useAccordionProps);
   const mergedProps = mergeProps(api.rootProps, localProps);
-  return /* @__PURE__ */ jsx(AccordionProvider, { value: api, children: /* @__PURE__ */ jsx(PresencePropsProvider, { value: presenceProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
+  return /* @__PURE__ */ jsx(AccordionProvider, { value: api, children: /* @__PURE__ */ jsx(RenderStrategyProvider, { value: renderStrategyProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
 });
 AccordionRoot.displayName = "AccordionRoot";
 

package/clipboard/clipboard-indicator.cjs

@@ -17,6 +17,6 @@ const ClipboardIndicator = react.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: api.isCopied ? copied : children });
   }
 );
-ClipboardIndicator.displayName = "Clipb oardIndicator";
+ClipboardIndicator.displayName = "ClipboardIndicator";
 
 exports.ClipboardIndicator = ClipboardIndicator;

package/clipboard/clipboard-indicator.mjs

@@ -13,6 +13,6 @@ const ClipboardIndicator = forwardRef(
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: api.isCopied ? copied : children });
   }
 );
-ClipboardIndicator.displayName = "Clipb oardIndicator";
+ClipboardIndicator.displayName = "ClipboardIndicator";
 
 export { ClipboardIndicator };

package/collapsible/collapsible-content.cjs

@@ -0,0 +1,24 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const collapsibleContext = require('./collapsible-context.cjs');
+
+const CollapsibleContent = react.forwardRef(
+  (props, ref) => {
+    const api = collapsibleContext.useCollapsibleContext();
+    if (api.isUnmounted) {
+      return null;
+    }
+    const mergedProps = react$1.mergeProps(api.contentProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  }
+);
+CollapsibleContent.displayName = "CollapsibleContent";
+
+exports.CollapsibleContent = CollapsibleContent;

package/collapsible/collapsible-content.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface CollapsibleContentProps extends HTMLArkProps<'div'> {
+}
+export declare const CollapsibleContent: ForwardRefExoticComponent<CollapsibleContentProps & RefAttributes<HTMLDivElement>>;

package/collapsible/collapsible-content.mjs

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useCollapsibleContext } from './collapsible-context.mjs';
+
+const CollapsibleContent = forwardRef(
+  (props, ref) => {
+    const api = useCollapsibleContext();
+    if (api.isUnmounted) {
+      return null;
+    }
+    const mergedProps = mergeProps(api.contentProps, props);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
+CollapsibleContent.displayName = "CollapsibleContent";
+
+export { CollapsibleContent };

package/collapsible/collapsible-context.cjs

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../create-context.cjs');
+
+const [CollapsibleProvider, useCollapsibleContext] = createContext.createContext({
+  name: "CollapsibleContext",
+  hookName: "useCollapsibleContext",
+  providerName: "<CollapsibleProvider />"
+});
+
+exports.CollapsibleProvider = CollapsibleProvider;
+exports.useCollapsibleContext = useCollapsibleContext;

package/collapsible/collapsible-context.d.ts

@@ -0,0 +1,6 @@
+import { Provider } from 'react';
+/// <reference types="react" />
+import { type UseCollapsibleReturn } from './use-collapsible';
+export interface CollapsibleContext extends UseCollapsibleReturn {
+}
+export declare const CollapsibleProvider: Provider<CollapsibleContext>, useCollapsibleContext: () => CollapsibleContext;

package/collapsible/collapsible-context.mjs

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../create-context.mjs';
+
+const [CollapsibleProvider, useCollapsibleContext] = createContext({
+  name: "CollapsibleContext",
+  hookName: "useCollapsibleContext",
+  providerName: "<CollapsibleProvider />"
+});
+
+export { CollapsibleProvider, useCollapsibleContext };

package/collapsible/collapsible-root.cjs

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const collapsibleContext = require('./collapsible-context.cjs');
+const splitCollapsibleProps = require('./split-collapsible-props.cjs');
+const useCollapsible = require('./use-collapsible.cjs');
+
+const CollapsibleRoot = react.forwardRef((props, ref) => {
+  const [useCollapsibleProps, localProps] = splitCollapsibleProps.splitCollapsibleProps(props);
+  const api = useCollapsible.useCollapsible(useCollapsibleProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(collapsibleContext.CollapsibleProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+});
+CollapsibleRoot.displayName = "CollapsibleRoot";
+
+exports.CollapsibleRoot = CollapsibleRoot;

package/collapsible/collapsible-root.d.ts

@@ -0,0 +1,8 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+import { type Assign } from '../types';
+import { type UseCollapsibleProps } from './use-collapsible';
+export interface CollapsibleRootProps extends Assign<HTMLArkProps<'div'>, UseCollapsibleProps> {
+}
+export declare const CollapsibleRoot: ForwardRefExoticComponent<CollapsibleRootProps & RefAttributes<HTMLDivElement>>;

package/collapsible/collapsible-root.mjs

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { CollapsibleProvider } from './collapsible-context.mjs';
+import { splitCollapsibleProps } from './split-collapsible-props.mjs';
+import { useCollapsible } from './use-collapsible.mjs';
+
+const CollapsibleRoot = forwardRef((props, ref) => {
+  const [useCollapsibleProps, localProps] = splitCollapsibleProps(props);
+  const api = useCollapsible(useCollapsibleProps);
+  const mergedProps = mergeProps(api.rootProps, localProps);
+  return /* @__PURE__ */ jsx(CollapsibleProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+});
+CollapsibleRoot.displayName = "CollapsibleRoot";
+
+export { CollapsibleRoot };

package/collapsible/collapsible-trigger.cjs

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const collapsibleContext = require('./collapsible-context.cjs');
+
+const CollapsibleTrigger = react.forwardRef(
+  (props, ref) => {
+    const api = collapsibleContext.useCollapsibleContext();
+    const mergedProps = react$1.mergeProps(api.triggerProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+  }
+);
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+
+exports.CollapsibleTrigger = CollapsibleTrigger;

package/collapsible/collapsible-trigger.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface CollapsibleTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const CollapsibleTrigger: ForwardRefExoticComponent<CollapsibleTriggerProps & RefAttributes<HTMLButtonElement>>;

package/collapsible/collapsible-trigger.mjs

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useCollapsibleContext } from './collapsible-context.mjs';
+
+const CollapsibleTrigger = forwardRef(
+  (props, ref) => {
+    const api = useCollapsibleContext();
+    const mergedProps = mergeProps(api.triggerProps, props);
+    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+  }
+);
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+
+export { CollapsibleTrigger };

package/collapsible/collapsible.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const collapsibleContent = require('./collapsible-content.cjs');
+const collapsibleRoot = require('./collapsible-root.cjs');
+const collapsibleTrigger = require('./collapsible-trigger.cjs');
+
+
+
+exports.Content = collapsibleContent.CollapsibleContent;
+exports.Root = collapsibleRoot.CollapsibleRoot;
+exports.Trigger = collapsibleTrigger.CollapsibleTrigger;

package/collapsible/collapsible.d.ts

@@ -0,0 +1,4 @@
+import { CollapsibleContent as Content } from './collapsible-content';
+import { CollapsibleRoot as Root } from './collapsible-root';
+import { CollapsibleTrigger as Trigger } from './collapsible-trigger';
+export { Content, Root, Trigger };

package/collapsible/collapsible.mjs

@@ -0,0 +1,3 @@
+export { CollapsibleContent as Content } from './collapsible-content.mjs';
+export { CollapsibleRoot as Root } from './collapsible-root.mjs';
+export { CollapsibleTrigger as Trigger } from './collapsible-trigger.mjs';

package/collapsible/index.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const collapsibleContent = require('./collapsible-content.cjs');
+const collapsibleContext = require('./collapsible-context.cjs');
+const collapsibleRoot = require('./collapsible-root.cjs');
+const collapsibleTrigger = require('./collapsible-trigger.cjs');
+const collapsible = require('./collapsible.cjs');
+
+
+
+exports.CollapsibleContent = collapsibleContent.CollapsibleContent;
+exports.useCollapsibleContext = collapsibleContext.useCollapsibleContext;
+exports.CollapsibleRoot = collapsibleRoot.CollapsibleRoot;
+exports.CollapsibleTrigger = collapsibleTrigger.CollapsibleTrigger;
+exports.Collapsible = collapsible;

package/collapsible/index.d.ts

@@ -0,0 +1,8 @@
+import type { OpenChangeDetails as CollapsibleOpenChangeDetails } from '@zag-js/collapsible';
+import { CollapsibleContent, type CollapsibleContentProps } from './collapsible-content';
+import { useCollapsibleContext, type CollapsibleContext } from './collapsible-context';
+import { CollapsibleRoot, type CollapsibleRootProps } from './collapsible-root';
+import { CollapsibleTrigger, type CollapsibleTriggerProps } from './collapsible-trigger';
+export * as Collapsible from './collapsible';
+export { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, useCollapsibleContext };
+export type { CollapsibleContentProps, CollapsibleContext, CollapsibleOpenChangeDetails, CollapsibleRootProps, CollapsibleTriggerProps, };