@ark-ui/react 5.2.0 → 5.3.0

package/dist/components/collapsible/collapsible-indicator.cjs

@@ -0,0 +1,19 @@
+'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 useCollapsibleContext = require('./use-collapsible-context.cjs');
+
+const CollapsibleIndicator = react.forwardRef((props, ref) => {
+  const collapsible = useCollapsibleContext.useCollapsibleContext();
+  const mergedProps = react$1.mergeProps(collapsible.getIndicatorProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
+CollapsibleIndicator.displayName = "CollapsibleIndicator";
+
+exports.CollapsibleIndicator = CollapsibleIndicator;

package/dist/components/collapsible/collapsible-indicator.d.cts

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface CollapsibleIndicatorBaseProps extends PolymorphicProps {
+}
+export interface CollapsibleIndicatorProps extends HTMLProps<'div'>, CollapsibleIndicatorBaseProps {
+}
+export declare const CollapsibleIndicator: ForwardRefExoticComponent<CollapsibleIndicatorProps & RefAttributes<HTMLDivElement>>;

package/dist/components/collapsible/collapsible-indicator.d.ts

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface CollapsibleIndicatorBaseProps extends PolymorphicProps {
+}
+export interface CollapsibleIndicatorProps extends HTMLProps<'div'>, CollapsibleIndicatorBaseProps {
+}
+export declare const CollapsibleIndicator: ForwardRefExoticComponent<CollapsibleIndicatorProps & RefAttributes<HTMLDivElement>>;

package/dist/components/collapsible/collapsible-indicator.js

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

package/dist/components/collapsible/collapsible.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const collapsibleContent = require('./collapsible-content.cjs');
 const collapsibleContext = require('./collapsible-context.cjs');
+const collapsibleIndicator = require('./collapsible-indicator.cjs');
 const collapsibleRoot = require('./collapsible-root.cjs');
 const collapsibleRootProvider = require('./collapsible-root-provider.cjs');
 const collapsibleTrigger = require('./collapsible-trigger.cjs');
@@ -12,6 +13,7 @@ const collapsibleTrigger = require('./collapsible-trigger.cjs');
 
 exports.Content = collapsibleContent.CollapsibleContent;
 exports.Context = collapsibleContext.CollapsibleContext;
+exports.Indicator = collapsibleIndicator.CollapsibleIndicator;
 exports.Root = collapsibleRoot.CollapsibleRoot;
 exports.RootProvider = collapsibleRootProvider.CollapsibleRootProvider;
 exports.Trigger = collapsibleTrigger.CollapsibleTrigger;

package/dist/components/collapsible/collapsible.d.cts

@@ -1,6 +1,7 @@
 export type { OpenChangeDetails } from '@zag-js/collapsible';
 export { CollapsibleContent as Content, type CollapsibleContentBaseProps as ContentBaseProps, type CollapsibleContentProps as ContentProps, } from './collapsible-content';
 export { CollapsibleContext as Context, type CollapsibleContextProps as ContextProps } from './collapsible-context';
+export { CollapsibleIndicator as Indicator, type CollapsibleIndicatorBaseProps as IndicatorBaseProps, type CollapsibleIndicatorProps as IndicatorProps, } from './collapsible-indicator';
 export { CollapsibleRoot as Root, type CollapsibleRootBaseProps as RootBaseProps, type CollapsibleRootProps as RootProps, } from './collapsible-root';
 export { CollapsibleRootProvider as RootProvider, type CollapsibleRootProviderBaseProps as RootProviderBaseProps, type CollapsibleRootProviderProps as RootProviderProps, } from './collapsible-root-provider';
 export { CollapsibleTrigger as Trigger, type CollapsibleTriggerBaseProps as TriggerBaseProps, type CollapsibleTriggerProps as TriggerProps, } from './collapsible-trigger';

package/dist/components/collapsible/collapsible.d.ts

@@ -1,6 +1,7 @@
 export type { OpenChangeDetails } from '@zag-js/collapsible';
 export { CollapsibleContent as Content, type CollapsibleContentBaseProps as ContentBaseProps, type CollapsibleContentProps as ContentProps, } from './collapsible-content';
 export { CollapsibleContext as Context, type CollapsibleContextProps as ContextProps } from './collapsible-context';
+export { CollapsibleIndicator as Indicator, type CollapsibleIndicatorBaseProps as IndicatorBaseProps, type CollapsibleIndicatorProps as IndicatorProps, } from './collapsible-indicator';
 export { CollapsibleRoot as Root, type CollapsibleRootBaseProps as RootBaseProps, type CollapsibleRootProps as RootProps, } from './collapsible-root';
 export { CollapsibleRootProvider as RootProvider, type CollapsibleRootProviderBaseProps as RootProviderBaseProps, type CollapsibleRootProviderProps as RootProviderProps, } from './collapsible-root-provider';
 export { CollapsibleTrigger as Trigger, type CollapsibleTriggerBaseProps as TriggerBaseProps, type CollapsibleTriggerProps as TriggerProps, } from './collapsible-trigger';

package/dist/components/collapsible/collapsible.js

@@ -1,5 +1,6 @@
 export { CollapsibleContent as Content } from './collapsible-content.js';
 export { CollapsibleContext as Context } from './collapsible-context.js';
+export { CollapsibleIndicator as Indicator } from './collapsible-indicator.js';
 export { CollapsibleRoot as Root } from './collapsible-root.js';
 export { CollapsibleRootProvider as RootProvider } from './collapsible-root-provider.js';
 export { CollapsibleTrigger as Trigger } from './collapsible-trigger.js';

package/dist/components/collapsible/index.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const collapsibleContent = require('./collapsible-content.cjs');
 const collapsibleContext = require('./collapsible-context.cjs');
+const collapsibleIndicator = require('./collapsible-indicator.cjs');
 const collapsibleRoot = require('./collapsible-root.cjs');
 const collapsibleRootProvider = require('./collapsible-root-provider.cjs');
 const collapsibleTrigger = require('./collapsible-trigger.cjs');
@@ -16,6 +17,7 @@ const collapsible = require('@zag-js/collapsible');
 
 exports.CollapsibleContent = collapsibleContent.CollapsibleContent;
 exports.CollapsibleContext = collapsibleContext.CollapsibleContext;
+exports.CollapsibleIndicator = collapsibleIndicator.CollapsibleIndicator;
 exports.CollapsibleRoot = collapsibleRoot.CollapsibleRoot;
 exports.CollapsibleRootProvider = collapsibleRootProvider.CollapsibleRootProvider;
 exports.CollapsibleTrigger = collapsibleTrigger.CollapsibleTrigger;

package/dist/components/collapsible/index.d.cts

@@ -1,6 +1,7 @@
 export type { OpenChangeDetails as CollapsibleOpenChangeDetails } from '@zag-js/collapsible';
 export { CollapsibleContent, type CollapsibleContentBaseProps, type CollapsibleContentProps, } from './collapsible-content';
 export { CollapsibleContext, type CollapsibleContextProps } from './collapsible-context';
+export { CollapsibleIndicator, type CollapsibleIndicatorBaseProps, type CollapsibleIndicatorProps, } from './collapsible-indicator';
 export { CollapsibleRoot, type CollapsibleRootBaseProps, type CollapsibleRootProps } from './collapsible-root';
 export { CollapsibleRootProvider, type CollapsibleRootProviderBaseProps, type CollapsibleRootProviderProps, } from './collapsible-root-provider';
 export { CollapsibleTrigger, type CollapsibleTriggerBaseProps, type CollapsibleTriggerProps, } from './collapsible-trigger';

package/dist/components/collapsible/index.d.ts

@@ -1,6 +1,7 @@
 export type { OpenChangeDetails as CollapsibleOpenChangeDetails } from '@zag-js/collapsible';
 export { CollapsibleContent, type CollapsibleContentBaseProps, type CollapsibleContentProps, } from './collapsible-content';
 export { CollapsibleContext, type CollapsibleContextProps } from './collapsible-context';
+export { CollapsibleIndicator, type CollapsibleIndicatorBaseProps, type CollapsibleIndicatorProps, } from './collapsible-indicator';
 export { CollapsibleRoot, type CollapsibleRootBaseProps, type CollapsibleRootProps } from './collapsible-root';
 export { CollapsibleRootProvider, type CollapsibleRootProviderBaseProps, type CollapsibleRootProviderProps, } from './collapsible-root-provider';
 export { CollapsibleTrigger, type CollapsibleTriggerBaseProps, type CollapsibleTriggerProps, } from './collapsible-trigger';

package/dist/components/collapsible/index.js

@@ -1,5 +1,6 @@
 export { CollapsibleContent } from './collapsible-content.js';
 export { CollapsibleContext } from './collapsible-context.js';
+export { CollapsibleIndicator } from './collapsible-indicator.js';
 export { CollapsibleRoot } from './collapsible-root.js';
 export { CollapsibleRootProvider } from './collapsible-root-provider.js';
 export { CollapsibleTrigger } from './collapsible-trigger.js';

package/dist/components/color-picker/color-picker-value-text.cjs

@@ -10,10 +10,11 @@ const factory = require('../factory.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 
 const ColorPickerValueText = react.forwardRef((props, ref) => {
-  const { children, ...localprops } = props;
+  const { children, format, ...localprops } = props;
   const colorPicker = useColorPickerContext.useColorPickerContext();
   const mergedProps = react$1.mergeProps(colorPicker.getValueTextProps(), localprops);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: props.children || colorPicker.valueAsString });
+  const valueAsString = format ? colorPicker.value.toString(format) : colorPicker.valueAsString;
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: props.children || valueAsString });
 });
 ColorPickerValueText.displayName = "ColorPickerValueText";
 

package/dist/components/color-picker/color-picker-value-text.d.cts

@@ -1,6 +1,8 @@
+import { ColorStringFormat } from '@zag-js/color-utils';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface ColorPickerValueTextBaseProps extends PolymorphicProps {
+    format?: ColorStringFormat;
 }
 export interface ColorPickerValueTextProps extends HTMLProps<'span'>, ColorPickerValueTextBaseProps {
 }

package/dist/components/color-picker/color-picker-value-text.d.ts

@@ -1,6 +1,8 @@
+import { ColorStringFormat } from '@zag-js/color-utils';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface ColorPickerValueTextBaseProps extends PolymorphicProps {
+    format?: ColorStringFormat;
 }
 export interface ColorPickerValueTextProps extends HTMLProps<'span'>, ColorPickerValueTextBaseProps {
 }

package/dist/components/color-picker/color-picker-value-text.js

@@ -6,10 +6,11 @@ import { ark } from '../factory.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 
 const ColorPickerValueText = forwardRef((props, ref) => {
-  const { children, ...localprops } = props;
+  const { children, format, ...localprops } = props;
   const colorPicker = useColorPickerContext();
   const mergedProps = mergeProps(colorPicker.getValueTextProps(), localprops);
-  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: props.children || colorPicker.valueAsString });
+  const valueAsString = format ? colorPicker.value.toString(format) : colorPicker.valueAsString;
+  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: props.children || valueAsString });
 });
 ColorPickerValueText.displayName = "ColorPickerValueText";
 

package/dist/components/download-trigger/download-trigger.cjs

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

package/dist/components/download-trigger/download-trigger.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { downloadFile } from '@zag-js/file-utils';
 import { isFunction } from '../../node_modules/@zag-js/utils/dist/index.js';

package/dist/components/index.cjs

@@ -65,6 +65,7 @@ const useClipboardContext = require('./clipboard/use-clipboard-context.cjs');
 const clipboard$1 = require('./clipboard/clipboard.cjs');
 const collapsibleContent = require('./collapsible/collapsible-content.cjs');
 const collapsibleContext = require('./collapsible/collapsible-context.cjs');
+const collapsibleIndicator = require('./collapsible/collapsible-indicator.cjs');
 const collapsibleRoot = require('./collapsible/collapsible-root.cjs');
 const collapsibleRootProvider = require('./collapsible/collapsible-root-provider.cjs');
 const collapsibleTrigger = require('./collapsible/collapsible-trigger.cjs');
@@ -705,6 +706,7 @@ exports.useClipboardContext = useClipboardContext.useClipboardContext;
 exports.Clipboard = clipboard$1;
 exports.CollapsibleContent = collapsibleContent.CollapsibleContent;
 exports.CollapsibleContext = collapsibleContext.CollapsibleContext;
+exports.CollapsibleIndicator = collapsibleIndicator.CollapsibleIndicator;
 exports.CollapsibleRoot = collapsibleRoot.CollapsibleRoot;
 exports.CollapsibleRootProvider = collapsibleRootProvider.CollapsibleRootProvider;
 exports.CollapsibleTrigger = collapsibleTrigger.CollapsibleTrigger;

package/dist/components/index.js

@@ -66,6 +66,7 @@ import * as clipboard from './clipboard/clipboard.js';
 export { clipboard as Clipboard };
 export { CollapsibleContent } from './collapsible/collapsible-content.js';
 export { CollapsibleContext } from './collapsible/collapsible-context.js';
+export { CollapsibleIndicator } from './collapsible/collapsible-indicator.js';
 export { CollapsibleRoot } from './collapsible/collapsible-root.js';
 export { CollapsibleRootProvider } from './collapsible/collapsible-root-provider.js';
 export { CollapsibleTrigger } from './collapsible/collapsible-trigger.js';

package/dist/index.cjs

@@ -65,6 +65,7 @@ const useClipboardContext = require('./components/clipboard/use-clipboard-contex
 const clipboard$1 = require('./components/clipboard/clipboard.cjs');
 const collapsibleContent = require('./components/collapsible/collapsible-content.cjs');
 const collapsibleContext = require('./components/collapsible/collapsible-context.cjs');
+const collapsibleIndicator = require('./components/collapsible/collapsible-indicator.cjs');
 const collapsibleRoot = require('./components/collapsible/collapsible-root.cjs');
 const collapsibleRootProvider = require('./components/collapsible/collapsible-root-provider.cjs');
 const collapsibleTrigger = require('./components/collapsible/collapsible-trigger.cjs');
@@ -709,6 +710,7 @@ exports.useClipboardContext = useClipboardContext.useClipboardContext;
 exports.Clipboard = clipboard$1;
 exports.CollapsibleContent = collapsibleContent.CollapsibleContent;
 exports.CollapsibleContext = collapsibleContext.CollapsibleContext;
+exports.CollapsibleIndicator = collapsibleIndicator.CollapsibleIndicator;
 exports.CollapsibleRoot = collapsibleRoot.CollapsibleRoot;
 exports.CollapsibleRootProvider = collapsibleRootProvider.CollapsibleRootProvider;
 exports.CollapsibleTrigger = collapsibleTrigger.CollapsibleTrigger;

package/dist/index.js

@@ -66,6 +66,7 @@ import * as clipboard from './components/clipboard/clipboard.js';
 export { clipboard as Clipboard };
 export { CollapsibleContent } from './components/collapsible/collapsible-content.js';
 export { CollapsibleContext } from './components/collapsible/collapsible-context.js';
+export { CollapsibleIndicator } from './components/collapsible/collapsible-indicator.js';
 export { CollapsibleRoot } from './components/collapsible/collapsible-root.js';
 export { CollapsibleRootProvider } from './components/collapsible/collapsible-root-provider.js';
 export { CollapsibleTrigger } from './components/collapsible/collapsible-trigger.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ark-ui/react",
   "type": "module",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -148,58 +148,58 @@
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.7.0",
-    "@zag-js/accordion": "1.5.0",
-    "@zag-js/anatomy": "1.5.0",
-    "@zag-js/auto-resize": "1.5.0",
-    "@zag-js/avatar": "1.5.0",
-    "@zag-js/carousel": "1.5.0",
-    "@zag-js/checkbox": "1.5.0",
-    "@zag-js/clipboard": "1.5.0",
-    "@zag-js/collapsible": "1.5.0",
-    "@zag-js/collection": "1.5.0",
-    "@zag-js/color-picker": "1.5.0",
-    "@zag-js/color-utils": "1.5.0",
-    "@zag-js/combobox": "1.5.0",
-    "@zag-js/core": "1.5.0",
-    "@zag-js/date-picker": "1.5.0",
-    "@zag-js/date-utils": "1.5.0",
-    "@zag-js/dialog": "1.5.0",
-    "@zag-js/dom-query": "1.5.0",
-    "@zag-js/editable": "1.5.0",
-    "@zag-js/file-upload": "1.5.0",
-    "@zag-js/file-utils": "1.5.0",
-    "@zag-js/focus-trap": "1.5.0",
-    "@zag-js/highlight-word": "1.5.0",
-    "@zag-js/hover-card": "1.5.0",
-    "@zag-js/i18n-utils": "1.5.0",
-    "@zag-js/menu": "1.5.0",
-    "@zag-js/number-input": "1.5.0",
-    "@zag-js/pagination": "1.5.0",
-    "@zag-js/pin-input": "1.5.0",
-    "@zag-js/popover": "1.5.0",
-    "@zag-js/presence": "1.5.0",
-    "@zag-js/progress": "1.5.0",
-    "@zag-js/qr-code": "1.5.0",
-    "@zag-js/radio-group": "1.5.0",
-    "@zag-js/rating-group": "1.5.0",
-    "@zag-js/react": "1.5.0",
-    "@zag-js/select": "1.5.0",
-    "@zag-js/signature-pad": "1.5.0",
-    "@zag-js/slider": "1.5.0",
-    "@zag-js/splitter": "1.5.0",
-    "@zag-js/steps": "1.5.0",
-    "@zag-js/switch": "1.5.0",
-    "@zag-js/tabs": "1.5.0",
-    "@zag-js/tags-input": "1.5.0",
-    "@zag-js/time-picker": "1.5.0",
-    "@zag-js/timer": "1.5.0",
-    "@zag-js/toast": "1.5.0",
-    "@zag-js/toggle": "1.5.0",
-    "@zag-js/toggle-group": "1.5.0",
-    "@zag-js/tooltip": "1.5.0",
-    "@zag-js/tour": "1.5.0",
-    "@zag-js/tree-view": "1.5.0",
-    "@zag-js/types": "1.5.0"
+    "@zag-js/accordion": "1.6.0",
+    "@zag-js/anatomy": "1.6.0",
+    "@zag-js/auto-resize": "1.6.0",
+    "@zag-js/avatar": "1.6.0",
+    "@zag-js/carousel": "1.6.0",
+    "@zag-js/checkbox": "1.6.0",
+    "@zag-js/clipboard": "1.6.0",
+    "@zag-js/collapsible": "1.6.0",
+    "@zag-js/collection": "1.6.0",
+    "@zag-js/color-picker": "1.6.0",
+    "@zag-js/color-utils": "1.6.0",
+    "@zag-js/combobox": "1.6.0",
+    "@zag-js/core": "1.6.0",
+    "@zag-js/date-picker": "1.6.0",
+    "@zag-js/date-utils": "1.6.0",
+    "@zag-js/dialog": "1.6.0",
+    "@zag-js/dom-query": "1.6.0",
+    "@zag-js/editable": "1.6.0",
+    "@zag-js/file-upload": "1.6.0",
+    "@zag-js/file-utils": "1.6.0",
+    "@zag-js/focus-trap": "1.6.0",
+    "@zag-js/highlight-word": "1.6.0",
+    "@zag-js/hover-card": "1.6.0",
+    "@zag-js/i18n-utils": "1.6.0",
+    "@zag-js/menu": "1.6.0",
+    "@zag-js/number-input": "1.6.0",
+    "@zag-js/pagination": "1.6.0",
+    "@zag-js/pin-input": "1.6.0",
+    "@zag-js/popover": "1.6.0",
+    "@zag-js/presence": "1.6.0",
+    "@zag-js/progress": "1.6.0",
+    "@zag-js/qr-code": "1.6.0",
+    "@zag-js/radio-group": "1.6.0",
+    "@zag-js/rating-group": "1.6.0",
+    "@zag-js/react": "1.6.0",
+    "@zag-js/select": "1.6.0",
+    "@zag-js/signature-pad": "1.6.0",
+    "@zag-js/slider": "1.6.0",
+    "@zag-js/splitter": "1.6.0",
+    "@zag-js/steps": "1.6.0",
+    "@zag-js/switch": "1.6.0",
+    "@zag-js/tabs": "1.6.0",
+    "@zag-js/tags-input": "1.6.0",
+    "@zag-js/time-picker": "1.6.0",
+    "@zag-js/timer": "1.6.0",
+    "@zag-js/toast": "1.6.0",
+    "@zag-js/toggle": "1.6.0",
+    "@zag-js/toggle-group": "1.6.0",
+    "@zag-js/tooltip": "1.6.0",
+    "@zag-js/tour": "1.6.0",
+    "@zag-js/tree-view": "1.6.0",
+    "@zag-js/types": "1.6.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
@@ -216,7 +216,7 @@
     "@types/react": "19.0.10",
     "@types/react-dom": "19.0.4",
     "@vitejs/plugin-react": "4.3.4",
-    "@zag-js/stringify-state": "1.5.0",
+    "@zag-js/stringify-state": "1.6.0",
     "clean-package": "2.2.0",
     "globby": "14.1.0",
     "happy-dom": "17.4.4",