@ark-ui/react 4.9.2 → 5.0.1

package/dist/components/checkbox/checkbox-root-provider.js

@@ -6,15 +6,11 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { CheckboxProvider } from './use-checkbox-context.js';
 
-const CheckboxRootProvider = forwardRef(
-  (props, ref) => {
-    const [{ value: checkbox }, localProps] = createSplitProps()(props, [
-      "value"
-    ]);
-    const mergedProps = mergeProps(checkbox.getRootProps(), localProps);
-    return /* @__PURE__ */ jsx(CheckboxProvider, { value: checkbox, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref }) });
-  }
-);
+const CheckboxRootProvider = forwardRef((props, ref) => {
+  const [{ value: checkbox }, localProps] = createSplitProps()(props, ["value"]);
+  const mergedProps = mergeProps(checkbox.getRootProps(), localProps);
+  return /* @__PURE__ */ jsx(CheckboxProvider, { value: checkbox, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref }) });
+});
 CheckboxRootProvider.displayName = "CheckboxRootProvider";
 
 export { CheckboxRootProvider };

package/dist/components/checkbox/checkbox.anatomy.d.cts

@@ -1,2 +1,2 @@
 import { AnatomyInstance } from '@zag-js/anatomy';
-export declare const checkboxAnatomy: AnatomyInstance<"label" | "group" | "root" | "control" | "indicator">;
+export declare const checkboxAnatomy: AnatomyInstance<"label" | "root" | "group" | "indicator" | "control">;

package/dist/components/checkbox/checkbox.anatomy.d.ts

@@ -1,2 +1,2 @@
 import { AnatomyInstance } from '@zag-js/anatomy';
-export declare const checkboxAnatomy: AnatomyInstance<"label" | "group" | "root" | "control" | "indicator">;
+export declare const checkboxAnatomy: AnatomyInstance<"label" | "root" | "group" | "indicator" | "control">;

package/dist/components/checkbox/checkbox.d.cts

@@ -1,5 +1,5 @@
 export type { CheckedChangeDetails, CheckedState } from '@zag-js/checkbox';
-export { CheckboxContext as Context, type CheckboxContextProps as ContextProps, } from './checkbox-context';
+export { CheckboxContext as Context, type CheckboxContextProps as ContextProps } from './checkbox-context';
 export { CheckboxControl as Control, type CheckboxControlBaseProps as ControlBaseProps, type CheckboxControlProps as ControlProps, } from './checkbox-control';
 export { CheckboxGroup as Group, type CheckboxGroupBaseProps as GroupBaseProps, type CheckboxGroupProps as GroupProps, } from './checkbox-group';
 export { CheckboxHiddenInput as HiddenInput, type CheckboxHiddenInputBaseProps as HiddenInputBaseProps, type CheckboxHiddenInputProps as HiddenInputProps, } from './checkbox-hidden-input';

package/dist/components/checkbox/checkbox.d.ts

@@ -1,5 +1,5 @@
 export type { CheckedChangeDetails, CheckedState } from '@zag-js/checkbox';
-export { CheckboxContext as Context, type CheckboxContextProps as ContextProps, } from './checkbox-context';
+export { CheckboxContext as Context, type CheckboxContextProps as ContextProps } from './checkbox-context';
 export { CheckboxControl as Control, type CheckboxControlBaseProps as ControlBaseProps, type CheckboxControlProps as ControlProps, } from './checkbox-control';
 export { CheckboxGroup as Group, type CheckboxGroupBaseProps as GroupBaseProps, type CheckboxGroupProps as GroupProps, } from './checkbox-group';
 export { CheckboxHiddenInput as HiddenInput, type CheckboxHiddenInputBaseProps as HiddenInputBaseProps, type CheckboxHiddenInputProps as HiddenInputProps, } from './checkbox-hidden-input';

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

@@ -1,15 +1,15 @@
 export type { CheckedChangeDetails as CheckboxCheckedChangeDetails, CheckedState as CheckboxCheckedState, } from '@zag-js/checkbox';
 export { CheckboxContext, type CheckboxContextProps } from './checkbox-context';
-export { CheckboxControl, type CheckboxControlBaseProps, type CheckboxControlProps, } from './checkbox-control';
-export { CheckboxGroup, type CheckboxGroupBaseProps, type CheckboxGroupProps, } from './checkbox-group';
+export { CheckboxControl, type CheckboxControlBaseProps, type CheckboxControlProps } from './checkbox-control';
+export { CheckboxGroup, type CheckboxGroupBaseProps, type CheckboxGroupProps } from './checkbox-group';
 export { CheckboxHiddenInput, type CheckboxHiddenInputBaseProps, type CheckboxHiddenInputProps, } from './checkbox-hidden-input';
-export { CheckboxIndicator, type CheckboxIndicatorBaseProps, type CheckboxIndicatorProps, } from './checkbox-indicator';
-export { CheckboxLabel, type CheckboxLabelBaseProps, type CheckboxLabelProps, } from './checkbox-label';
+export { CheckboxIndicator, type CheckboxIndicatorBaseProps, type CheckboxIndicatorProps } from './checkbox-indicator';
+export { CheckboxLabel, type CheckboxLabelBaseProps, type CheckboxLabelProps } from './checkbox-label';
 export { CheckboxRoot, type CheckboxRootBaseProps, type CheckboxRootProps } from './checkbox-root';
 export { CheckboxRootProvider, type CheckboxRootProviderBaseProps, type CheckboxRootProviderProps, } from './checkbox-root-provider';
 export { checkboxAnatomy } from './checkbox.anatomy';
 export { useCheckbox, type UseCheckboxProps, type UseCheckboxReturn } from './use-checkbox';
 export { useCheckboxContext, type UseCheckboxContext } from './use-checkbox-context';
-export { useCheckboxGroup, type UseCheckboxGroupProps, type UseCheckboxGroupReturn, } from './use-checkbox-group';
+export { useCheckboxGroup, type UseCheckboxGroupProps, type UseCheckboxGroupReturn } from './use-checkbox-group';
 export { useCheckboxGroupContext, type UseCheckboxGroupContext } from './use-checkbox-group-context';
 export * as Checkbox from './checkbox';

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

@@ -1,15 +1,15 @@
 export type { CheckedChangeDetails as CheckboxCheckedChangeDetails, CheckedState as CheckboxCheckedState, } from '@zag-js/checkbox';
 export { CheckboxContext, type CheckboxContextProps } from './checkbox-context';
-export { CheckboxControl, type CheckboxControlBaseProps, type CheckboxControlProps, } from './checkbox-control';
-export { CheckboxGroup, type CheckboxGroupBaseProps, type CheckboxGroupProps, } from './checkbox-group';
+export { CheckboxControl, type CheckboxControlBaseProps, type CheckboxControlProps } from './checkbox-control';
+export { CheckboxGroup, type CheckboxGroupBaseProps, type CheckboxGroupProps } from './checkbox-group';
 export { CheckboxHiddenInput, type CheckboxHiddenInputBaseProps, type CheckboxHiddenInputProps, } from './checkbox-hidden-input';
-export { CheckboxIndicator, type CheckboxIndicatorBaseProps, type CheckboxIndicatorProps, } from './checkbox-indicator';
-export { CheckboxLabel, type CheckboxLabelBaseProps, type CheckboxLabelProps, } from './checkbox-label';
+export { CheckboxIndicator, type CheckboxIndicatorBaseProps, type CheckboxIndicatorProps } from './checkbox-indicator';
+export { CheckboxLabel, type CheckboxLabelBaseProps, type CheckboxLabelProps } from './checkbox-label';
 export { CheckboxRoot, type CheckboxRootBaseProps, type CheckboxRootProps } from './checkbox-root';
 export { CheckboxRootProvider, type CheckboxRootProviderBaseProps, type CheckboxRootProviderProps, } from './checkbox-root-provider';
 export { checkboxAnatomy } from './checkbox.anatomy';
 export { useCheckbox, type UseCheckboxProps, type UseCheckboxReturn } from './use-checkbox';
 export { useCheckboxContext, type UseCheckboxContext } from './use-checkbox-context';
-export { useCheckboxGroup, type UseCheckboxGroupProps, type UseCheckboxGroupReturn, } from './use-checkbox-group';
+export { useCheckboxGroup, type UseCheckboxGroupProps, type UseCheckboxGroupReturn } from './use-checkbox-group';
 export { useCheckboxGroupContext, type UseCheckboxGroupContext } from './use-checkbox-group-context';
 export * as Checkbox from './checkbox';

package/dist/components/checkbox/use-checkbox-group.cjs

@@ -7,15 +7,7 @@ const useControllableState = require('../../utils/use-controllable-state.cjs');
 const useEvent = require('../../utils/use-event.cjs');
 
 function useCheckboxGroup(props = {}) {
-  const {
-    defaultValue,
-    value: controlledValue,
-    onValueChange,
-    disabled,
-    readOnly,
-    name,
-    invalid
-  } = props;
+  const { defaultValue, value: controlledValue, onValueChange, disabled, readOnly, name, invalid } = props;
   const interactive = !(disabled || readOnly);
   const onChangeProp = useEvent.useEvent(onValueChange, { sync: true });
   const [value, setValue] = useControllableState.useControllableState({

package/dist/components/checkbox/use-checkbox-group.js

@@ -3,15 +3,7 @@ import { useControllableState } from '../../utils/use-controllable-state.js';
 import { useEvent } from '../../utils/use-event.js';
 
 function useCheckboxGroup(props = {}) {
-  const {
-    defaultValue,
-    value: controlledValue,
-    onValueChange,
-    disabled,
-    readOnly,
-    name,
-    invalid
-  } = props;
+  const { defaultValue, value: controlledValue, onValueChange, disabled, readOnly, name, invalid } = props;
   const interactive = !(disabled || readOnly);
   const onChangeProp = useEvent(onValueChange, { sync: true });
   const [value, setValue] = useControllableState({

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

@@ -8,7 +8,6 @@ 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');
 const useFieldContext = require('../field/use-field-context.cjs');
 const useCheckboxGroupContext = require('./use-checkbox-group-context.cjs');
 
@@ -37,10 +36,11 @@ const useCheckbox = (ownProps = {}) => {
   const props = react.useMemo(() => {
     return react$1.mergeProps(ownProps, checkboxGroup?.getItemProps({ value: ownProps.value }) ?? {});
   }, [ownProps, checkboxGroup]);
+  const id = react.useId();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
-  const initialContext = {
-    id: react.useId(),
+  const machineProps = {
+    id,
     ids: {
       label: field?.ids.label,
       hiddenInput: field?.ids.control
@@ -51,16 +51,10 @@ const useCheckbox = (ownProps = {}) => {
     invalid: field?.invalid,
     required: field?.required,
     getRootNode,
-    checked: props.defaultChecked,
     ...props
   };
-  const context = {
-    ...initialContext,
-    checked: props.checked,
-    onCheckedChange: useEvent.useEvent(props.onCheckedChange, { sync: true })
-  };
-  const [state, send] = react$1.useMachine(checkbox__namespace.machine(initialContext), { context });
-  return checkbox__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(checkbox__namespace.machine, machineProps);
+  return checkbox__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.useCheckbox = useCheckbox;

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

@@ -1,12 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as checkbox from '@zag-js/checkbox';
-export interface UseCheckboxProps extends Optional<Omit<checkbox.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The checked state of the checkbox when it is first rendered.
-     * Use this when you do not need to control the state of the checkbox.
-     */
-    defaultChecked?: checkbox.Context['checked'];
+export interface UseCheckboxProps extends Optional<Omit<checkbox.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseCheckboxReturn extends checkbox.Api<PropTypes> {
 }

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

@@ -1,12 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as checkbox from '@zag-js/checkbox';
-export interface UseCheckboxProps extends Optional<Omit<checkbox.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The checked state of the checkbox when it is first rendered.
-     * Use this when you do not need to control the state of the checkbox.
-     */
-    defaultChecked?: checkbox.Context['checked'];
+export interface UseCheckboxProps extends Optional<Omit<checkbox.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseCheckboxReturn extends checkbox.Api<PropTypes> {
 }

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

@@ -4,7 +4,6 @@ import { mergeProps, useMachine, normalizeProps } from '@zag-js/react';
 import { useMemo, 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';
 import { useFieldContext } from '../field/use-field-context.js';
 import { useCheckboxGroupContext } from './use-checkbox-group-context.js';
 
@@ -14,10 +13,11 @@ const useCheckbox = (ownProps = {}) => {
   const props = useMemo(() => {
     return mergeProps(ownProps, checkboxGroup?.getItemProps({ value: ownProps.value }) ?? {});
   }, [ownProps, checkboxGroup]);
+  const id = useId();
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
-  const initialContext = {
-    id: useId(),
+  const machineProps = {
+    id,
     ids: {
       label: field?.ids.label,
       hiddenInput: field?.ids.control
@@ -28,16 +28,10 @@ const useCheckbox = (ownProps = {}) => {
     invalid: field?.invalid,
     required: field?.required,
     getRootNode,
-    checked: props.defaultChecked,
     ...props
   };
-  const context = {
-    ...initialContext,
-    checked: props.checked,
-    onCheckedChange: useEvent(props.onCheckedChange, { sync: true })
-  };
-  const [state, send] = useMachine(checkbox.machine(initialContext), { context });
-  return checkbox.connect(state, send, normalizeProps);
+  const service = useMachine(checkbox.machine, machineProps);
+  return checkbox.connect(service, normalizeProps);
 };
 
 export { useCheckbox };

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

@@ -9,17 +9,12 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const useClipboardContext = require('./use-clipboard-context.cjs');
 
-const ClipboardIndicator = react.forwardRef(
-  (props, ref) => {
-    const { children, copied, ...localProps } = props;
-    const clipboard = useClipboardContext.useClipboardContext();
-    const mergedProps = react$1.mergeProps(
-      clipboard.getIndicatorProps({ copied: clipboard.copied }),
-      localProps
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: clipboard.copied ? copied : children });
-  }
-);
+const ClipboardIndicator = react.forwardRef((props, ref) => {
+  const { children, copied, ...localProps } = props;
+  const clipboard = useClipboardContext.useClipboardContext();
+  const mergedProps = react$1.mergeProps(clipboard.getIndicatorProps({ copied: clipboard.copied }), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: clipboard.copied ? copied : children });
+});
 ClipboardIndicator.displayName = "ClipboardIndicator";
 
 exports.ClipboardIndicator = ClipboardIndicator;

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

@@ -5,17 +5,12 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useClipboardContext } from './use-clipboard-context.js';
 
-const ClipboardIndicator = forwardRef(
-  (props, ref) => {
-    const { children, copied, ...localProps } = props;
-    const clipboard = useClipboardContext();
-    const mergedProps = mergeProps(
-      clipboard.getIndicatorProps({ copied: clipboard.copied }),
-      localProps
-    );
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: clipboard.copied ? copied : children });
-  }
-);
+const ClipboardIndicator = forwardRef((props, ref) => {
+  const { children, copied, ...localProps } = props;
+  const clipboard = useClipboardContext();
+  const mergedProps = mergeProps(clipboard.getIndicatorProps({ copied: clipboard.copied }), localProps);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: clipboard.copied ? copied : children });
+});
 ClipboardIndicator.displayName = "ClipboardIndicator";
 
 export { ClipboardIndicator };

package/dist/components/clipboard/clipboard-root-provider.cjs

@@ -10,15 +10,11 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useClipboardContext = require('./use-clipboard-context.cjs');
 
-const ClipboardRootProvider = react.forwardRef(
-  (props, ref) => {
-    const [{ value: clipboard }, localProps] = createSplitProps.createSplitProps()(props, [
-      "value"
-    ]);
-    const mergedProps = react$1.mergeProps(clipboard.getRootProps(), localProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(useClipboardContext.ClipboardProvider, { value: clipboard, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ref, ...mergedProps }) });
-  }
-);
+const ClipboardRootProvider = react.forwardRef((props, ref) => {
+  const [{ value: clipboard }, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const mergedProps = react$1.mergeProps(clipboard.getRootProps(), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useClipboardContext.ClipboardProvider, { value: clipboard, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ref, ...mergedProps }) });
+});
 ClipboardRootProvider.displayName = "ClipboardRootProvider";
 
 exports.ClipboardRootProvider = ClipboardRootProvider;

package/dist/components/clipboard/clipboard-root-provider.js

@@ -6,15 +6,11 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { ClipboardProvider } from './use-clipboard-context.js';
 
-const ClipboardRootProvider = forwardRef(
-  (props, ref) => {
-    const [{ value: clipboard }, localProps] = createSplitProps()(props, [
-      "value"
-    ]);
-    const mergedProps = mergeProps(clipboard.getRootProps(), localProps);
-    return /* @__PURE__ */ jsx(ClipboardProvider, { value: clipboard, children: /* @__PURE__ */ jsx(ark.div, { ref, ...mergedProps }) });
-  }
-);
+const ClipboardRootProvider = forwardRef((props, ref) => {
+  const [{ value: clipboard }, localProps] = createSplitProps()(props, ["value"]);
+  const mergedProps = mergeProps(clipboard.getRootProps(), localProps);
+  return /* @__PURE__ */ jsx(ClipboardProvider, { value: clipboard, children: /* @__PURE__ */ jsx(ark.div, { ref, ...mergedProps }) });
+});
 ClipboardRootProvider.displayName = "ClipboardRootProvider";
 
 export { ClipboardRootProvider };

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

@@ -13,9 +13,11 @@ const useClipboardContext = require('./use-clipboard-context.cjs');
 
 const ClipboardRoot = react.forwardRef((props, ref) => {
   const [useClipboardProps, localProps] = createSplitProps.createSplitProps()(props, [
+    "defaultValue",
     "id",
     "ids",
     "onStatusChange",
+    "onValueChange",
     "timeout",
     "value"
   ]);

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

@@ -1,8 +1,9 @@
+import { Assign } from '../../types';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { UseClipboardProps } from './use-clipboard';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface ClipboardRootBaseProps extends UseClipboardProps, PolymorphicProps {
 }
-export interface ClipboardRootProps extends HTMLProps<'div'>, ClipboardRootBaseProps {
+export interface ClipboardRootProps extends Assign<HTMLProps<'div'>, ClipboardRootBaseProps> {
 }
 export declare const ClipboardRoot: ForwardRefExoticComponent<ClipboardRootProps & RefAttributes<HTMLDivElement>>;

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

@@ -1,8 +1,9 @@
+import { Assign } from '../../types';
 import { HTMLProps, PolymorphicProps } from '../factory';
 import { UseClipboardProps } from './use-clipboard';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface ClipboardRootBaseProps extends UseClipboardProps, PolymorphicProps {
 }
-export interface ClipboardRootProps extends HTMLProps<'div'>, ClipboardRootBaseProps {
+export interface ClipboardRootProps extends Assign<HTMLProps<'div'>, ClipboardRootBaseProps> {
 }
 export declare const ClipboardRoot: ForwardRefExoticComponent<ClipboardRootProps & RefAttributes<HTMLDivElement>>;

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

@@ -9,9 +9,11 @@ import { ClipboardProvider } from './use-clipboard-context.js';
 
 const ClipboardRoot = forwardRef((props, ref) => {
   const [useClipboardProps, localProps] = createSplitProps()(props, [
+    "defaultValue",
     "id",
     "ids",
     "onStatusChange",
+    "onValueChange",
     "timeout",
     "value"
   ]);

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

@@ -9,13 +9,11 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const useClipboardContext = require('./use-clipboard-context.cjs');
 
-const ClipboardTrigger = react.forwardRef(
-  (props, ref) => {
-    const clipboard = useClipboardContext.useClipboardContext();
-    const mergedProps = react$1.mergeProps(clipboard.getTriggerProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
-  }
-);
+const ClipboardTrigger = react.forwardRef((props, ref) => {
+  const clipboard = useClipboardContext.useClipboardContext();
+  const mergedProps = react$1.mergeProps(clipboard.getTriggerProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+});
 ClipboardTrigger.displayName = "ClipboardTrigger";
 
 exports.ClipboardTrigger = ClipboardTrigger;

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

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useClipboardContext } from './use-clipboard-context.js';
 
-const ClipboardTrigger = forwardRef(
-  (props, ref) => {
-    const clipboard = useClipboardContext();
-    const mergedProps = mergeProps(clipboard.getTriggerProps(), props);
-    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
-  }
-);
+const ClipboardTrigger = forwardRef((props, ref) => {
+  const clipboard = useClipboardContext();
+  const mergedProps = mergeProps(clipboard.getTriggerProps(), props);
+  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+});
 ClipboardTrigger.displayName = "ClipboardTrigger";
 
 export { ClipboardTrigger };

package/dist/components/clipboard/clipboard-value-text.cjs

@@ -8,12 +8,10 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const useClipboardContext = require('./use-clipboard-context.cjs');
 
-const ClipboardValueText = react.forwardRef(
-  (props, ref) => {
-    const clipboard = useClipboardContext.useClipboardContext();
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...props, ref, children: props.children || clipboard.value });
-  }
-);
+const ClipboardValueText = react.forwardRef((props, ref) => {
+  const clipboard = useClipboardContext.useClipboardContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...props, ref, children: props.children || clipboard.value });
+});
 ClipboardValueText.displayName = "ClipboardValueText";
 
 exports.ClipboardValueText = ClipboardValueText;

package/dist/components/clipboard/clipboard-value-text.js

@@ -4,12 +4,10 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useClipboardContext } from './use-clipboard-context.js';
 
-const ClipboardValueText = forwardRef(
-  (props, ref) => {
-    const clipboard = useClipboardContext();
-    return /* @__PURE__ */ jsx(ark.span, { ...props, ref, children: props.children || clipboard.value });
-  }
-);
+const ClipboardValueText = forwardRef((props, ref) => {
+  const clipboard = useClipboardContext();
+  return /* @__PURE__ */ jsx(ark.span, { ...props, ref, children: props.children || clipboard.value });
+});
 ClipboardValueText.displayName = "ClipboardValueText";
 
 export { ClipboardValueText };

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

@@ -1,5 +1,5 @@
 export type { CopyStatusDetails } from '@zag-js/clipboard';
-export { ClipboardContext as Context, type ClipboardContextProps as ContextProps, } from './clipboard-context';
+export { ClipboardContext as Context, type ClipboardContextProps as ContextProps } from './clipboard-context';
 export { ClipboardControl as Control, type ClipboardControlBaseProps as ControlBaseProps, type ClipboardControlProps as ControlProps, } from './clipboard-control';
 export { ClipboardIndicator as Indicator, type ClipboardIndicatorBaseProps as IndicatorBaseProps, type ClipboardIndicatorProps as IndicatorProps, } from './clipboard-indicator';
 export { ClipboardInput as Input, type ClipboardInputBaseProps as InputBaseProps, type ClipboardInputProps as InputProps, } from './clipboard-input';

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

@@ -1,5 +1,5 @@
 export type { CopyStatusDetails } from '@zag-js/clipboard';
-export { ClipboardContext as Context, type ClipboardContextProps as ContextProps, } from './clipboard-context';
+export { ClipboardContext as Context, type ClipboardContextProps as ContextProps } from './clipboard-context';
 export { ClipboardControl as Control, type ClipboardControlBaseProps as ControlBaseProps, type ClipboardControlProps as ControlProps, } from './clipboard-control';
 export { ClipboardIndicator as Indicator, type ClipboardIndicatorBaseProps as IndicatorBaseProps, type ClipboardIndicatorProps as IndicatorProps, } from './clipboard-indicator';
 export { ClipboardInput as Input, type ClipboardInputBaseProps as InputBaseProps, type ClipboardInputProps as InputProps, } from './clipboard-input';

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

@@ -1,12 +1,12 @@
 export type { CopyStatusDetails as ClipboardCopyStatusDetails } from '@zag-js/clipboard';
 export { ClipboardContext, type ClipboardContextProps } from './clipboard-context';
-export { ClipboardControl, type ClipboardControlBaseProps, type ClipboardControlProps, } from './clipboard-control';
+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';
-export { ClipboardLabel, type ClipboardLabelBaseProps, type ClipboardLabelProps, } from './clipboard-label';
-export { ClipboardRoot, type ClipboardRootBaseProps, type ClipboardRootProps, } from './clipboard-root';
+export { ClipboardInput, type ClipboardInputBaseProps, type ClipboardInputProps } from './clipboard-input';
+export { ClipboardLabel, type ClipboardLabelBaseProps, type ClipboardLabelProps } from './clipboard-label';
+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 { 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';

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

@@ -1,12 +1,12 @@
 export type { CopyStatusDetails as ClipboardCopyStatusDetails } from '@zag-js/clipboard';
 export { ClipboardContext, type ClipboardContextProps } from './clipboard-context';
-export { ClipboardControl, type ClipboardControlBaseProps, type ClipboardControlProps, } from './clipboard-control';
+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';
-export { ClipboardLabel, type ClipboardLabelBaseProps, type ClipboardLabelProps, } from './clipboard-label';
-export { ClipboardRoot, type ClipboardRootBaseProps, type ClipboardRootProps, } from './clipboard-root';
+export { ClipboardInput, type ClipboardInputBaseProps, type ClipboardInputProps } from './clipboard-input';
+export { ClipboardLabel, type ClipboardLabelBaseProps, type ClipboardLabelProps } from './clipboard-label';
+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 { 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';

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

@@ -27,18 +27,16 @@ function _interopNamespaceDefault(e) {
 
 const clipboard__namespace = /*#__PURE__*/_interopNamespaceDefault(clipboard);
 
-const useClipboard = (props = {}) => {
+const useClipboard = (props) => {
+  const id = react.useId();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
-  const initialContext = {
-    id: react.useId(),
+  const machineProps = {
+    id,
     getRootNode,
     ...props
   };
-  const context = {
-    ...initialContext
-  };
-  const [state, send] = react$1.useMachine(clipboard__namespace.machine(initialContext), { context });
-  return clipboard__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(clipboard__namespace.machine, machineProps);
+  return clipboard__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.useClipboard = useClipboard;

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

@@ -1,8 +1,8 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as clipboard from '@zag-js/clipboard';
-export interface UseClipboardProps extends Optional<Omit<clipboard.Context, 'getRootNode'>, 'id'> {
+export interface UseClipboardProps extends Optional<Omit<clipboard.Props, 'getRootNode'>, 'id'> {
 }
 export interface UseClipboardReturn extends clipboard.Api<PropTypes> {
 }
-export declare const useClipboard: (props?: UseClipboardProps) => clipboard.Api<PropTypes>;
+export declare const useClipboard: (props?: UseClipboardProps) => UseClipboardReturn;

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

@@ -1,8 +1,8 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as clipboard from '@zag-js/clipboard';
-export interface UseClipboardProps extends Optional<Omit<clipboard.Context, 'getRootNode'>, 'id'> {
+export interface UseClipboardProps extends Optional<Omit<clipboard.Props, 'getRootNode'>, 'id'> {
 }
 export interface UseClipboardReturn extends clipboard.Api<PropTypes> {
 }
-export declare const useClipboard: (props?: UseClipboardProps) => clipboard.Api<PropTypes>;
+export declare const useClipboard: (props?: UseClipboardProps) => UseClipboardReturn;

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

@@ -4,18 +4,16 @@ import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 
-const useClipboard = (props = {}) => {
+const useClipboard = (props) => {
+  const id = useId();
   const { getRootNode } = useEnvironmentContext();
-  const initialContext = {
-    id: useId(),
+  const machineProps = {
+    id,
     getRootNode,
     ...props
   };
-  const context = {
-    ...initialContext
-  };
-  const [state, send] = useMachine(clipboard.machine(initialContext), { context });
-  return clipboard.connect(state, send, normalizeProps);
+  const service = useMachine(clipboard.machine, machineProps);
+  return clipboard.connect(service, normalizeProps);
 };
 
 export { useClipboard };