@ark-ui/react 4.5.0 → 4.7.0

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

@@ -1,5 +1,5 @@
 export type { CopyStatusDetails as ClipboardCopyStatusDetails } from '@zag-js/clipboard';
-export { ClipboardContext, type ClipboardContextProps, } from './clipboard-context';
+export { ClipboardContext, type ClipboardContextProps } from './clipboard-context';
 export { ClipboardControl, type ClipboardControlBaseProps, type ClipboardControlProps, } from './clipboard-control';
 export { ClipboardIndicator, type ClipboardIndicatorBaseProps, type ClipboardIndicatorProps, } from './clipboard-indicator';
 export { ClipboardInput, type ClipboardInputBaseProps, type ClipboardInputProps, } from './clipboard-input';
@@ -7,6 +7,7 @@ export { ClipboardLabel, type ClipboardLabelBaseProps, type ClipboardLabelProps,
 export { ClipboardRoot, type ClipboardRootBaseProps, type ClipboardRootProps, } from './clipboard-root';
 export { ClipboardRootProvider, type ClipboardRootProviderBaseProps, type ClipboardRootProviderProps, } from './clipboard-root-provider';
 export { ClipboardTrigger, type ClipboardTriggerBaseProps, type ClipboardTriggerProps, } from './clipboard-trigger';
+export { ClipboardValueText, type ClipboardValueTextBaseProps, type ClipboardValueTextProps, } from './clipboard-value-text';
 export { clipboardAnatomy } from './clipboard.anatomy';
 export { useClipboard, type UseClipboardProps, type UseClipboardReturn } from './use-clipboard';
 export { useClipboardContext, type UseClipboardContext } from './use-clipboard-context';

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

@@ -1,5 +1,5 @@
 export type { CopyStatusDetails as ClipboardCopyStatusDetails } from '@zag-js/clipboard';
-export { ClipboardContext, type ClipboardContextProps, } from './clipboard-context';
+export { ClipboardContext, type ClipboardContextProps } from './clipboard-context';
 export { ClipboardControl, type ClipboardControlBaseProps, type ClipboardControlProps, } from './clipboard-control';
 export { ClipboardIndicator, type ClipboardIndicatorBaseProps, type ClipboardIndicatorProps, } from './clipboard-indicator';
 export { ClipboardInput, type ClipboardInputBaseProps, type ClipboardInputProps, } from './clipboard-input';
@@ -7,6 +7,7 @@ export { ClipboardLabel, type ClipboardLabelBaseProps, type ClipboardLabelProps,
 export { ClipboardRoot, type ClipboardRootBaseProps, type ClipboardRootProps, } from './clipboard-root';
 export { ClipboardRootProvider, type ClipboardRootProviderBaseProps, type ClipboardRootProviderProps, } from './clipboard-root-provider';
 export { ClipboardTrigger, type ClipboardTriggerBaseProps, type ClipboardTriggerProps, } from './clipboard-trigger';
+export { ClipboardValueText, type ClipboardValueTextBaseProps, type ClipboardValueTextProps, } from './clipboard-value-text';
 export { clipboardAnatomy } from './clipboard.anatomy';
 export { useClipboard, type UseClipboardProps, type UseClipboardReturn } from './use-clipboard';
 export { useClipboardContext, type UseClipboardContext } from './use-clipboard-context';

package/dist/components/clipboard/index.js

@@ -6,6 +6,7 @@ export { ClipboardLabel } from './clipboard-label.js';
 export { ClipboardRoot } from './clipboard-root.js';
 export { ClipboardRootProvider } from './clipboard-root-provider.js';
 export { ClipboardTrigger } from './clipboard-trigger.js';
+export { ClipboardValueText } from './clipboard-value-text.js';
 export { useClipboard } from './use-clipboard.js';
 export { useClipboardContext } from './use-clipboard-context.js';
 import * as clipboard from './clipboard.js';

package/dist/components/collection.d.cts

@@ -1,4 +1,4 @@
-import { CollectionOptions, FilePathTreeNode, ListCollection, TreeCollection, TreeCollectionOptions } from '@zag-js/collection';
+import { CollectionItem, CollectionOptions, FilePathTreeNode, ListCollection, TreeCollection, TreeCollectionOptions, TreeNode } from '@zag-js/collection';
 export type { CollectionItem, ListCollection } from '@zag-js/collection';
 export declare const createListCollection: <T extends unknown>(options: CollectionOptions<T>) => ListCollection<T>;
 export type { TreeCollection, TreeNode } from '@zag-js/collection';

package/dist/components/collection.d.ts

@@ -1,4 +1,4 @@
-import { CollectionOptions, FilePathTreeNode, ListCollection, TreeCollection, TreeCollectionOptions } from '@zag-js/collection';
+import { CollectionItem, CollectionOptions, FilePathTreeNode, ListCollection, TreeCollection, TreeCollectionOptions, TreeNode } from '@zag-js/collection';
 export type { CollectionItem, ListCollection } from '@zag-js/collection';
 export declare const createListCollection: <T extends unknown>(options: CollectionOptions<T>) => ListCollection<T>;
 export type { TreeCollection, TreeNode } from '@zag-js/collection';

package/dist/components/combobox/combobox-root.cjs

@@ -36,6 +36,7 @@ const ComboboxImpl = (props, ref) => {
     "loopFocus",
     "multiple",
     "name",
+    "navigate",
     "onFocusOutside",
     "onHighlightChange",
     "onInputValueChange",

package/dist/components/combobox/combobox-root.js

@@ -32,6 +32,7 @@ const ComboboxImpl = (props, ref) => {
     "loopFocus",
     "multiple",
     "name",
+    "navigate",
     "onFocusOutside",
     "onHighlightChange",
     "onInputValueChange",

package/dist/components/date-picker/date-picker.anatomy.d.cts

@@ -1,2 +1,2 @@
 import { AnatomyInstance } from '@zag-js/anatomy';
-export declare const datePickerAnatomy: AnatomyInstance<"input" | "label" | "table" | "view" | "content" | "root" | "trigger" | "nextTrigger" | "prevTrigger" | "control" | "positioner" | "clearTrigger" | "monthSelect" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger">;
+export declare const datePickerAnatomy: AnatomyInstance<"input" | "label" | "table" | "view" | "content" | "root" | "trigger" | "control" | "positioner" | "clearTrigger" | "monthSelect" | "nextTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger">;

package/dist/components/date-picker/date-picker.anatomy.d.ts

@@ -1,2 +1,2 @@
 import { AnatomyInstance } from '@zag-js/anatomy';
-export declare const datePickerAnatomy: AnatomyInstance<"input" | "label" | "table" | "view" | "content" | "root" | "trigger" | "nextTrigger" | "prevTrigger" | "control" | "positioner" | "clearTrigger" | "monthSelect" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger">;
+export declare const datePickerAnatomy: AnatomyInstance<"input" | "label" | "table" | "view" | "content" | "root" | "trigger" | "control" | "positioner" | "clearTrigger" | "monthSelect" | "nextTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger">;

package/dist/components/field/use-field.d.cts

@@ -44,7 +44,7 @@ export declare const useField: (props: UseFieldProps) => {
         helperText: string;
     };
     refs: {
-        rootRef: RefObject<HTMLDivElement>;
+        rootRef: RefObject<HTMLDivElement | null>;
     };
     disabled: boolean;
     invalid: boolean;

package/dist/components/field/use-field.d.ts

@@ -44,7 +44,7 @@ export declare const useField: (props: UseFieldProps) => {
         helperText: string;
     };
     refs: {
-        rootRef: RefObject<HTMLDivElement>;
+        rootRef: RefObject<HTMLDivElement | null>;
     };
     disabled: boolean;
     invalid: boolean;

package/dist/components/fieldset/use-fieldset.d.cts

@@ -17,7 +17,7 @@ export interface UseFieldsetProps {
 export type UseFieldsetReturn = ReturnType<typeof useFieldset>;
 export declare const useFieldset: (props: UseFieldsetProps) => {
     refs: {
-        rootRef: RefObject<HTMLFieldSetElement>;
+        rootRef: RefObject<HTMLFieldSetElement | null>;
     };
     disabled: boolean;
     invalid: boolean;

package/dist/components/fieldset/use-fieldset.d.ts

@@ -17,7 +17,7 @@ export interface UseFieldsetProps {
 export type UseFieldsetReturn = ReturnType<typeof useFieldset>;
 export declare const useFieldset: (props: UseFieldsetProps) => {
     refs: {
-        rootRef: RefObject<HTMLFieldSetElement>;
+        rootRef: RefObject<HTMLFieldSetElement | null>;
     };
     disabled: boolean;
     invalid: boolean;

package/dist/components/file-upload/file-upload-root.cjs

@@ -29,6 +29,7 @@ const FileUploadRoot = react.forwardRef((props, ref) => {
     "onFileAccept",
     "onFileChange",
     "onFileReject",
+    "preventDocumentDrop",
     "required",
     "translations",
     "validate"

package/dist/components/file-upload/file-upload-root.js

@@ -25,6 +25,7 @@ const FileUploadRoot = forwardRef((props, ref) => {
     "onFileAccept",
     "onFileChange",
     "onFileReject",
+    "preventDocumentDrop",
     "required",
     "translations",
     "validate"

package/dist/components/index.cjs

@@ -22,6 +22,7 @@ const avatarRootProvider = require('./avatar/avatar-root-provider.cjs');
 const useAvatar = require('./avatar/use-avatar.cjs');
 const useAvatarContext = require('./avatar/use-avatar-context.cjs');
 const avatar$1 = require('./avatar/avatar.cjs');
+const carouselAutoplayTrigger = require('./carousel/carousel-autoplay-trigger.cjs');
 const carouselContext = require('./carousel/carousel-context.cjs');
 const carouselControl = require('./carousel/carousel-control.cjs');
 const carouselIndicator = require('./carousel/carousel-indicator.cjs');
@@ -32,11 +33,9 @@ const carouselNextTrigger = require('./carousel/carousel-next-trigger.cjs');
 const carouselPrevTrigger = require('./carousel/carousel-prev-trigger.cjs');
 const carouselRoot = require('./carousel/carousel-root.cjs');
 const carouselRootProvider = require('./carousel/carousel-root-provider.cjs');
-const carouselViewport = require('./carousel/carousel-viewport.cjs');
-const carousel_anatomy = require('./carousel/carousel.anatomy.cjs');
 const useCarousel = require('./carousel/use-carousel.cjs');
 const useCarouselContext = require('./carousel/use-carousel-context.cjs');
-const carousel = require('./carousel/carousel.cjs');
+const carousel$1 = require('./carousel/carousel.cjs');
 const checkboxContext = require('./checkbox/checkbox-context.cjs');
 const checkboxControl = require('./checkbox/checkbox-control.cjs');
 const checkboxGroup = require('./checkbox/checkbox-group.cjs');
@@ -60,6 +59,7 @@ const clipboardLabel = require('./clipboard/clipboard-label.cjs');
 const clipboardRoot = require('./clipboard/clipboard-root.cjs');
 const clipboardRootProvider = require('./clipboard/clipboard-root-provider.cjs');
 const clipboardTrigger = require('./clipboard/clipboard-trigger.cjs');
+const clipboardValueText = require('./clipboard/clipboard-value-text.cjs');
 const useClipboard = require('./clipboard/use-clipboard.cjs');
 const useClipboardContext = require('./clipboard/use-clipboard-context.cjs');
 const clipboard$1 = require('./clipboard/clipboard.cjs');
@@ -337,6 +337,7 @@ const useProgress = require('./progress/use-progress.cjs');
 const useProgressContext = require('./progress/use-progress-context.cjs');
 const progress$1 = require('./progress/progress.cjs');
 const qrCodeContext = require('./qr-code/qr-code-context.cjs');
+const qrCodeDownloadTrigger = require('./qr-code/qr-code-download-trigger.cjs');
 const qrCodeFrame = require('./qr-code/qr-code-frame.cjs');
 const qrCodeOverlay = require('./qr-code/qr-code-overlay.cjs');
 const qrCodePattern = require('./qr-code/qr-code-pattern.cjs');
@@ -519,10 +520,10 @@ const useTimePicker = require('./time-picker/use-time-picker.cjs');
 const useTimePickerContext = require('./time-picker/use-time-picker-context.cjs');
 const timePicker$1 = require('./time-picker/time-picker.cjs');
 const timerActionTrigger = require('./timer/timer-action-trigger.cjs');
+const timerArea = require('./timer/timer-area.cjs');
 const timerContext = require('./timer/timer-context.cjs');
-const timerItem = require('./timer/timer-item.cjs');
 const timerControl = require('./timer/timer-control.cjs');
-const timerArea = require('./timer/timer-area.cjs');
+const timerItem = require('./timer/timer-item.cjs');
 const timerRoot = require('./timer/timer-root.cjs');
 const timerRootProvider = require('./timer/timer-root-provider.cjs');
 const timerSeparator = require('./timer/timer-separator.cjs');
@@ -585,6 +586,7 @@ const useTreeView = require('./tree-view/use-tree-view.cjs');
 const treeView$1 = require('./tree-view/tree-view.cjs');
 const accordion = require('@zag-js/accordion');
 const avatar = require('@zag-js/avatar');
+const carousel = require('@zag-js/carousel');
 const clipboard = require('@zag-js/clipboard');
 const collapsible = require('@zag-js/collapsible');
 const combobox = require('@zag-js/combobox');
@@ -638,6 +640,7 @@ exports.AvatarRootProvider = avatarRootProvider.AvatarRootProvider;
 exports.useAvatar = useAvatar.useAvatar;
 exports.useAvatarContext = useAvatarContext.useAvatarContext;
 exports.Avatar = avatar$1;
+exports.CarouselAutoplayTrigger = carouselAutoplayTrigger.CarouselAutoplayTrigger;
 exports.CarouselContext = carouselContext.CarouselContext;
 exports.CarouselControl = carouselControl.CarouselControl;
 exports.CarouselIndicator = carouselIndicator.CarouselIndicator;
@@ -648,11 +651,9 @@ exports.CarouselNextTrigger = carouselNextTrigger.CarouselNextTrigger;
 exports.CarouselPrevTrigger = carouselPrevTrigger.CarouselPrevTrigger;
 exports.CarouselRoot = carouselRoot.CarouselRoot;
 exports.CarouselRootProvider = carouselRootProvider.CarouselRootProvider;
-exports.CarouselViewport = carouselViewport.CarouselViewport;
-exports.carouselAnatomy = carousel_anatomy.carouselAnatomy;
 exports.useCarousel = useCarousel.useCarousel;
 exports.useCarouselContext = useCarouselContext.useCarouselContext;
-exports.Carousel = carousel;
+exports.Carousel = carousel$1;
 exports.CheckboxContext = checkboxContext.CheckboxContext;
 exports.CheckboxControl = checkboxControl.CheckboxControl;
 exports.CheckboxGroup = checkboxGroup.CheckboxGroup;
@@ -676,6 +677,7 @@ exports.ClipboardLabel = clipboardLabel.ClipboardLabel;
 exports.ClipboardRoot = clipboardRoot.ClipboardRoot;
 exports.ClipboardRootProvider = clipboardRootProvider.ClipboardRootProvider;
 exports.ClipboardTrigger = clipboardTrigger.ClipboardTrigger;
+exports.ClipboardValueText = clipboardValueText.ClipboardValueText;
 exports.useClipboard = useClipboard.useClipboard;
 exports.useClipboardContext = useClipboardContext.useClipboardContext;
 exports.Clipboard = clipboard$1;
@@ -963,6 +965,7 @@ exports.useProgress = useProgress.useProgress;
 exports.useProgressContext = useProgressContext.useProgressContext;
 exports.Progress = progress$1;
 exports.QrCodeContext = qrCodeContext.QrCodeContext;
+exports.QrCodeDownloadTrigger = qrCodeDownloadTrigger.QrCodeDownloadTrigger;
 exports.QrCodeFrame = qrCodeFrame.QrCodeFrame;
 exports.QrCodeOverlay = qrCodeOverlay.QrCodeOverlay;
 exports.QrCodePattern = qrCodePattern.QrCodePattern;
@@ -1148,10 +1151,10 @@ exports.useTimePicker = useTimePicker.useTimePicker;
 exports.useTimePickerContext = useTimePickerContext.useTimePickerContext;
 exports.TimePicker = timePicker$1;
 exports.TimerActionTrigger = timerActionTrigger.TimerActionTrigger;
+exports.TimerArea = timerArea.TimerArea;
 exports.TimerContext = timerContext.TimerContext;
-exports.TimerItem = timerItem.TimerItem;
 exports.TimerControl = timerControl.TimerControl;
-exports.TimerArea = timerArea.TimerArea;
+exports.TimerItem = timerItem.TimerItem;
 exports.TimerRoot = timerRoot.TimerRoot;
 exports.TimerRootProvider = timerRootProvider.TimerRootProvider;
 exports.TimerSeparator = timerSeparator.TimerSeparator;
@@ -1220,6 +1223,10 @@ Object.defineProperty(exports, "avatarAnatomy", {
 	enumerable: true,
 	get: () => avatar.anatomy
 });
+Object.defineProperty(exports, "carouselAnatomy", {
+	enumerable: true,
+	get: () => carousel.anatomy
+});
 Object.defineProperty(exports, "clipboardAnatomy", {
 	enumerable: true,
 	get: () => clipboard.anatomy

package/dist/components/index.js

@@ -20,6 +20,7 @@ export { useAvatar } from './avatar/use-avatar.js';
 export { useAvatarContext } from './avatar/use-avatar-context.js';
 import * as avatar from './avatar/avatar.js';
 export { avatar as Avatar };
+export { CarouselAutoplayTrigger } from './carousel/carousel-autoplay-trigger.js';
 export { CarouselContext } from './carousel/carousel-context.js';
 export { CarouselControl } from './carousel/carousel-control.js';
 export { CarouselIndicator } from './carousel/carousel-indicator.js';
@@ -30,8 +31,6 @@ export { CarouselNextTrigger } from './carousel/carousel-next-trigger.js';
 export { CarouselPrevTrigger } from './carousel/carousel-prev-trigger.js';
 export { CarouselRoot } from './carousel/carousel-root.js';
 export { CarouselRootProvider } from './carousel/carousel-root-provider.js';
-export { CarouselViewport } from './carousel/carousel-viewport.js';
-export { carouselAnatomy } from './carousel/carousel.anatomy.js';
 export { useCarousel } from './carousel/use-carousel.js';
 export { useCarouselContext } from './carousel/use-carousel-context.js';
 import * as carousel from './carousel/carousel.js';
@@ -60,6 +59,7 @@ export { ClipboardLabel } from './clipboard/clipboard-label.js';
 export { ClipboardRoot } from './clipboard/clipboard-root.js';
 export { ClipboardRootProvider } from './clipboard/clipboard-root-provider.js';
 export { ClipboardTrigger } from './clipboard/clipboard-trigger.js';
+export { ClipboardValueText } from './clipboard/clipboard-value-text.js';
 export { useClipboard } from './clipboard/use-clipboard.js';
 export { useClipboardContext } from './clipboard/use-clipboard-context.js';
 import * as clipboard from './clipboard/clipboard.js';
@@ -355,6 +355,7 @@ export { useProgressContext } from './progress/use-progress-context.js';
 import * as progress from './progress/progress.js';
 export { progress as Progress };
 export { QrCodeContext } from './qr-code/qr-code-context.js';
+export { QrCodeDownloadTrigger } from './qr-code/qr-code-download-trigger.js';
 export { QrCodeFrame } from './qr-code/qr-code-frame.js';
 export { QrCodeOverlay } from './qr-code/qr-code-overlay.js';
 export { QrCodePattern } from './qr-code/qr-code-pattern.js';
@@ -550,10 +551,10 @@ export { useTimePickerContext } from './time-picker/use-time-picker-context.js';
 import * as timePicker from './time-picker/time-picker.js';
 export { timePicker as TimePicker };
 export { TimerActionTrigger } from './timer/timer-action-trigger.js';
+export { TimerArea } from './timer/timer-area.js';
 export { TimerContext } from './timer/timer-context.js';
-export { TimerItem } from './timer/timer-item.js';
 export { TimerControl } from './timer/timer-control.js';
-export { TimerArea } from './timer/timer-area.js';
+export { TimerItem } from './timer/timer-item.js';
 export { TimerRoot } from './timer/timer-root.js';
 export { TimerRootProvider } from './timer/timer-root-provider.js';
 export { TimerSeparator } from './timer/timer-separator.js';
@@ -622,6 +623,7 @@ import * as treeView from './tree-view/tree-view.js';
 export { treeView as TreeView };
 export { anatomy as accordionAnatomy } from '@zag-js/accordion';
 export { anatomy as avatarAnatomy } from '@zag-js/avatar';
+export { anatomy as carouselAnatomy } from '@zag-js/carousel';
 export { anatomy as clipboardAnatomy } from '@zag-js/clipboard';
 export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible';
 export { anatomy as comboboxAnatomy } from '@zag-js/combobox';

package/dist/components/menu/menu-root.cjs

@@ -28,6 +28,7 @@ const MenuRoot = (props) => {
     "id",
     "ids",
     "loopFocus",
+    "navigate",
     "onEscapeKeyDown",
     "onFocusOutside",
     "onHighlightChange",

package/dist/components/menu/menu-root.js

@@ -24,6 +24,7 @@ const MenuRoot = (props) => {
     "id",
     "ids",
     "loopFocus",
+    "navigate",
     "onEscapeKeyDown",
     "onFocusOutside",
     "onHighlightChange",

package/dist/components/portal/portal.d.cts

@@ -1,6 +1,6 @@
 import { PropsWithChildren, RefObject } from 'react';
 export interface PortalProps {
     disabled?: boolean;
-    container?: RefObject<HTMLElement>;
+    container?: RefObject<HTMLElement | null>;
 }
 export declare const Portal: (props: PropsWithChildren<PortalProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/portal/portal.d.ts

@@ -1,6 +1,6 @@
 import { PropsWithChildren, RefObject } from 'react';
 export interface PortalProps {
     disabled?: boolean;
-    container?: RefObject<HTMLElement>;
+    container?: RefObject<HTMLElement | null>;
 }
 export declare const Portal: (props: PropsWithChildren<PortalProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/presence/use-presence.cjs

@@ -6,7 +6,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const presence = require('@zag-js/presence');
 const react$1 = require('@zag-js/react');
 const react = require('react');
-const useDebounce = require('../../utils/use-debounce.cjs');
 const useEvent = require('../../utils/use-event.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -29,9 +28,8 @@ function _interopNamespaceDefault(e) {
 const presence__namespace = /*#__PURE__*/_interopNamespaceDefault(presence);
 
 const usePresence = (props) => {
-  const { lazyMount, unmountOnExit, ...rest } = props;
+  const { lazyMount, unmountOnExit, present, ...rest } = props;
   const wasEverPresent = react.useRef(false);
-  const present = useDebounce.useDebounce(props.present, 0);
   const context = {
     ...rest,
     present,

package/dist/components/presence/use-presence.js

@@ -2,13 +2,11 @@
 import * as presence from '@zag-js/presence';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useRef } from 'react';
-import { useDebounce } from '../../utils/use-debounce.js';
 import { useEvent } from '../../utils/use-event.js';
 
 const usePresence = (props) => {
-  const { lazyMount, unmountOnExit, ...rest } = props;
+  const { lazyMount, unmountOnExit, present, ...rest } = props;
   const wasEverPresent = useRef(false);
-  const present = useDebounce(props.present, 0);
   const context = {
     ...rest,
     present,

package/dist/components/progress/examples/circular/controlled.d.cts

@@ -0,0 +1 @@
+export declare const Controlled: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/progress/examples/circular/controlled.d.ts

@@ -0,0 +1 @@
+export declare const Controlled: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/progress/examples/linear/controlled.d.cts

@@ -0,0 +1 @@
+export declare const Controlled: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/progress/examples/linear/controlled.d.ts

@@ -0,0 +1 @@
+export declare const Controlled: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/progress/examples/linear/root-provider.d.cts

@@ -1 +1 @@
-export declare const Basic: () => import("react/jsx-runtime").JSX.Element;
+export declare const RootProvider: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/progress/examples/linear/root-provider.d.ts

@@ -1 +1 @@
-export declare const Basic: () => import("react/jsx-runtime").JSX.Element;
+export declare const RootProvider: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/progress/progress-root.cjs

@@ -13,10 +13,12 @@ const useProgressContext = require('./use-progress-context.cjs');
 
 const ProgressRoot = react.forwardRef((props, ref) => {
   const [progressProps, localProps] = createSplitProps.createSplitProps()(props, [
+    "defaultValue",
     "id",
     "ids",
     "max",
     "min",
+    "onValueChange",
     "orientation",
     "translations",
     "value"

package/dist/components/progress/progress-root.d.cts

@@ -1,8 +1,9 @@
+import { Assign } from '../../types';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { UseProgressProps } from './use-progress';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface ProgressRootBaseProps extends UseProgressProps, PolymorphicProps {
 }
-export interface ProgressRootProps extends HTMLProps<'div'>, ProgressRootBaseProps {
+export interface ProgressRootProps extends Assign<HTMLProps<'div'>, ProgressRootBaseProps> {
 }
 export declare const ProgressRoot: ForwardRefExoticComponent<ProgressRootProps & RefAttributes<HTMLDivElement>>;

package/dist/components/progress/progress-root.d.ts

@@ -1,8 +1,9 @@
+import { Assign } from '../../types';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { UseProgressProps } from './use-progress';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface ProgressRootBaseProps extends UseProgressProps, PolymorphicProps {
 }
-export interface ProgressRootProps extends HTMLProps<'div'>, ProgressRootBaseProps {
+export interface ProgressRootProps extends Assign<HTMLProps<'div'>, ProgressRootBaseProps> {
 }
 export declare const ProgressRoot: ForwardRefExoticComponent<ProgressRootProps & RefAttributes<HTMLDivElement>>;

package/dist/components/progress/progress-root.js

@@ -9,10 +9,12 @@ import { ProgressProvider } from './use-progress-context.js';
 
 const ProgressRoot = forwardRef((props, ref) => {
   const [progressProps, localProps] = createSplitProps()(props, [
+    "defaultValue",
     "id",
     "ids",
     "max",
     "min",
+    "onValueChange",
     "orientation",
     "translations",
     "value"

package/dist/components/progress/use-progress.cjs

@@ -8,6 +8,7 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
+const useEvent = require('../../utils/use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -35,11 +36,13 @@ const useProgress = (props = {}) => {
     id: react.useId(),
     dir,
     getRootNode,
+    value: props.defaultValue,
     ...props
   };
   const context = {
     ...initialContext,
-    value: props.value
+    value: props.value,
+    onValueChange: useEvent.useEvent(props.onValueChange, { sync: true })
   };
   const [state, send] = react$1.useMachine(progress__namespace.machine(initialContext), { context });
   return progress__namespace.connect(state, send, react$1.normalizeProps);

package/dist/components/progress/use-progress.d.cts

@@ -2,6 +2,11 @@ import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as progress from '@zag-js/progress';
 export interface UseProgressProps extends Optional<Omit<progress.Context, 'dir' | 'getRootNode'>, 'id'> {
+    /**
+     * The initial value of the progress when it is first rendered.
+     * Use when you do not need to control the state of the progress.
+     */
+    defaultValue?: progress.Context['value'];
 }
 export interface UseProgressReturn extends progress.Api<PropTypes> {
 }

package/dist/components/progress/use-progress.d.ts

@@ -2,6 +2,11 @@ import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as progress from '@zag-js/progress';
 export interface UseProgressProps extends Optional<Omit<progress.Context, 'dir' | 'getRootNode'>, 'id'> {
+    /**
+     * The initial value of the progress when it is first rendered.
+     * Use when you do not need to control the state of the progress.
+     */
+    defaultValue?: progress.Context['value'];
 }
 export interface UseProgressReturn extends progress.Api<PropTypes> {
 }

package/dist/components/progress/use-progress.js

@@ -4,6 +4,7 @@ import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
+import { useEvent } from '../../utils/use-event.js';
 
 const useProgress = (props = {}) => {
   const { getRootNode } = useEnvironmentContext();
@@ -12,11 +13,13 @@ const useProgress = (props = {}) => {
     id: useId(),
     dir,
     getRootNode,
+    value: props.defaultValue,
     ...props
   };
   const context = {
     ...initialContext,
-    value: props.value
+    value: props.value,
+    onValueChange: useEvent(props.onValueChange, { sync: true })
   };
   const [state, send] = useMachine(progress.machine(initialContext), { context });
   return progress.connect(state, send, normalizeProps);

package/dist/components/qr-code/index.cjs

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const qrCodeContext = require('./qr-code-context.cjs');
+const qrCodeDownloadTrigger = require('./qr-code-download-trigger.cjs');
 const qrCodeFrame = require('./qr-code-frame.cjs');
 const qrCodeOverlay = require('./qr-code-overlay.cjs');
 const qrCodePattern = require('./qr-code-pattern.cjs');
@@ -16,6 +17,7 @@ const qrcode = require('@zag-js/qr-code');
 
 
 exports.QrCodeContext = qrCodeContext.QrCodeContext;
+exports.QrCodeDownloadTrigger = qrCodeDownloadTrigger.QrCodeDownloadTrigger;
 exports.QrCodeFrame = qrCodeFrame.QrCodeFrame;
 exports.QrCodeOverlay = qrCodeOverlay.QrCodeOverlay;
 exports.QrCodePattern = qrCodePattern.QrCodePattern;

package/dist/components/qr-code/index.d.cts

@@ -1,5 +1,6 @@
 export type { QrCodeGenerateOptions, QrCodeGenerateResult } from '@zag-js/qr-code';
 export { QrCodeContext, type QrCodeContextProps, } from './qr-code-context';
+export { QrCodeDownloadTrigger, type QrCodeDownloadTriggerBaseProps, type QrCodeDownloadTriggerProps, } from './qr-code-download-trigger';
 export { QrCodeFrame, type QrCodeFrameBaseProps, type QrCodeFrameProps, } from './qr-code-frame';
 export { QrCodeOverlay, type QrCodeOverlayBaseProps, type QrCodeOverlayProps, } from './qr-code-overlay';
 export { QrCodePattern, type QrCodePatternBaseProps, type QrCodePatternProps, } from './qr-code-pattern';

package/dist/components/qr-code/index.d.ts

@@ -1,5 +1,6 @@
 export type { QrCodeGenerateOptions, QrCodeGenerateResult } from '@zag-js/qr-code';
 export { QrCodeContext, type QrCodeContextProps, } from './qr-code-context';
+export { QrCodeDownloadTrigger, type QrCodeDownloadTriggerBaseProps, type QrCodeDownloadTriggerProps, } from './qr-code-download-trigger';
 export { QrCodeFrame, type QrCodeFrameBaseProps, type QrCodeFrameProps, } from './qr-code-frame';
 export { QrCodeOverlay, type QrCodeOverlayBaseProps, type QrCodeOverlayProps, } from './qr-code-overlay';
 export { QrCodePattern, type QrCodePatternBaseProps, type QrCodePatternProps, } from './qr-code-pattern';

package/dist/components/qr-code/index.js

@@ -1,4 +1,5 @@
 export { QrCodeContext } from './qr-code-context.js';
+export { QrCodeDownloadTrigger } from './qr-code-download-trigger.js';
 export { QrCodeFrame } from './qr-code-frame.js';
 export { QrCodeOverlay } from './qr-code-overlay.js';
 export { QrCodePattern } from './qr-code-pattern.js';

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

@@ -0,0 +1,27 @@
+'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 createSplitProps = require('../../utils/create-split-props.cjs');
+const factory = require('../factory.cjs');
+const useQrCodeContext = require('./use-qr-code-context.cjs');
+
+const QrCodeDownloadTrigger = react.forwardRef(
+  (props, ref) => {
+    const [downloadTriggerProps, localProps] = createSplitProps.createSplitProps()(props, [
+      "fileName",
+      "mimeType",
+      "quality"
+    ]);
+    const qrCode = useQrCodeContext.useQrCodeContext();
+    const mergedProps = react$1.mergeProps(qrCode.getDownloadTriggerProps(downloadTriggerProps), localProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+  }
+);
+QrCodeDownloadTrigger.displayName = "QrCodeDownloadTrigger";
+
+exports.QrCodeDownloadTrigger = QrCodeDownloadTrigger;

package/dist/components/qr-code/qr-code-download-trigger.d.cts

@@ -0,0 +1,8 @@
+import { DownloadTriggerProps } from '@zag-js/qr-code';
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface QrCodeDownloadTriggerBaseProps extends DownloadTriggerProps, PolymorphicProps {
+}
+export interface QrCodeDownloadTriggerProps extends HTMLProps<'button'>, QrCodeDownloadTriggerBaseProps {
+}
+export declare const QrCodeDownloadTrigger: ForwardRefExoticComponent<QrCodeDownloadTriggerProps & RefAttributes<HTMLButtonElement>>;