@ark-ui/react 4.9.2 → 5.0.1

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

@@ -8,7 +8,6 @@ const select = require('@zag-js/select');
 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');
 
 function _interopNamespaceDefault(e) {
@@ -31,12 +30,12 @@ function _interopNamespaceDefault(e) {
 const select__namespace = /*#__PURE__*/_interopNamespaceDefault(select);
 
 const useSelect = (props) => {
-  const { collection, ...selectProps } = props;
-  const locale = useLocaleContext.useLocaleContext();
-  const environment = useEnvironmentContext.useEnvironmentContext();
+  const id = react.useId();
+  const { dir } = useLocaleContext.useLocaleContext();
+  const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const field = useFieldContext.useFieldContext();
-  const initialContext = {
-    id: react.useId(),
+  const machineProps = {
+    id,
     ids: {
       label: field?.ids.label,
       hiddenSelect: field?.ids.control
@@ -45,31 +44,12 @@ const useSelect = (props) => {
     readOnly: field?.readOnly,
     invalid: field?.invalid,
     required: field?.required,
-    dir: locale.dir,
-    getRootNode: environment.getRootNode,
-    collection,
-    open: props.defaultOpen,
-    value: props.defaultValue,
-    "open.controlled": props.open !== void 0,
-    ...selectProps
+    dir,
+    getRootNode,
+    ...props
   };
-  const context = (() => {
-    const { collection: _, ...restProps } = initialContext;
-    return {
-      ...restProps,
-      value: props.value,
-      onValueChange: useEvent.useEvent(props.onValueChange, { sync: true }),
-      onHighlightChange: useEvent.useEvent(props.onHighlightChange),
-      onOpenChange: useEvent.useEvent(props.onOpenChange)
-    };
-  })();
-  const [state, send, service] = react$1.useMachine(select__namespace.machine(initialContext), {
-    context
-  });
-  react.useEffect(() => {
-    service.setContext({ collection });
-  }, [collection]);
-  return select__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(select__namespace.machine, machineProps);
+  return select__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.useSelect = useSelect;

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

@@ -2,17 +2,7 @@ import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import { CollectionItem, ListCollection } from '../collection';
 import * as select from '@zag-js/select';
-export interface UseSelectProps<T extends CollectionItem> extends Optional<Omit<select.Context<T>, 'dir' | 'getRootNode' | 'open.controlled' | 'collection'>, 'id'> {
-    /**
-     * The initial open state of the select when it is first rendered.
-     * Use when you do not need to control its open state.
-     */
-    defaultOpen?: select.Context['open'];
-    /**
-     * The initial value of the select when it is first rendered.
-     * Use when you do not need to control the state of the select.
-     */
-    defaultValue?: select.Context<T>['value'];
+export interface UseSelectProps<T extends CollectionItem> extends Optional<Omit<select.Props<T>, 'dir' | 'getRootNode' | 'collection'>, 'id'> {
     /**
      * The collection of items
      */
@@ -20,4 +10,4 @@ export interface UseSelectProps<T extends CollectionItem> extends Optional<Omit<
 }
 export interface UseSelectReturn<T extends CollectionItem> extends select.Api<PropTypes, T> {
 }
-export declare const useSelect: <T extends unknown>(props: UseSelectProps<T>) => UseSelectReturn<T>;
+export declare const useSelect: <T extends CollectionItem>(props: UseSelectProps<T>) => UseSelectReturn<T>;

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

@@ -2,17 +2,7 @@ import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import { CollectionItem, ListCollection } from '../collection';
 import * as select from '@zag-js/select';
-export interface UseSelectProps<T extends CollectionItem> extends Optional<Omit<select.Context<T>, 'dir' | 'getRootNode' | 'open.controlled' | 'collection'>, 'id'> {
-    /**
-     * The initial open state of the select when it is first rendered.
-     * Use when you do not need to control its open state.
-     */
-    defaultOpen?: select.Context['open'];
-    /**
-     * The initial value of the select when it is first rendered.
-     * Use when you do not need to control the state of the select.
-     */
-    defaultValue?: select.Context<T>['value'];
+export interface UseSelectProps<T extends CollectionItem> extends Optional<Omit<select.Props<T>, 'dir' | 'getRootNode' | 'collection'>, 'id'> {
     /**
      * The collection of items
      */
@@ -20,4 +10,4 @@ export interface UseSelectProps<T extends CollectionItem> extends Optional<Omit<
 }
 export interface UseSelectReturn<T extends CollectionItem> extends select.Api<PropTypes, T> {
 }
-export declare const useSelect: <T extends unknown>(props: UseSelectProps<T>) => UseSelectReturn<T>;
+export declare const useSelect: <T extends CollectionItem>(props: UseSelectProps<T>) => UseSelectReturn<T>;

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

@@ -1,19 +1,18 @@
 'use client';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import * as select from '@zag-js/select';
-import { useId, useEffect } from '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';
 import { useFieldContext } from '../field/use-field-context.js';
 
 const useSelect = (props) => {
-  const { collection, ...selectProps } = props;
-  const locale = useLocaleContext();
-  const environment = useEnvironmentContext();
+  const id = useId();
+  const { dir } = useLocaleContext();
+  const { getRootNode } = useEnvironmentContext();
   const field = useFieldContext();
-  const initialContext = {
-    id: useId(),
+  const machineProps = {
+    id,
     ids: {
       label: field?.ids.label,
       hiddenSelect: field?.ids.control
@@ -22,31 +21,12 @@ const useSelect = (props) => {
     readOnly: field?.readOnly,
     invalid: field?.invalid,
     required: field?.required,
-    dir: locale.dir,
-    getRootNode: environment.getRootNode,
-    collection,
-    open: props.defaultOpen,
-    value: props.defaultValue,
-    "open.controlled": props.open !== void 0,
-    ...selectProps
+    dir,
+    getRootNode,
+    ...props
   };
-  const context = (() => {
-    const { collection: _, ...restProps } = initialContext;
-    return {
-      ...restProps,
-      value: props.value,
-      onValueChange: useEvent(props.onValueChange, { sync: true }),
-      onHighlightChange: useEvent(props.onHighlightChange),
-      onOpenChange: useEvent(props.onOpenChange)
-    };
-  })();
-  const [state, send, service] = useMachine(select.machine(initialContext), {
-    context
-  });
-  useEffect(() => {
-    service.setContext({ collection });
-  }, [collection]);
-  return select.connect(state, send, normalizeProps);
+  const service = useMachine(select.machine, machineProps);
+  return select.connect(service, normalizeProps);
 };
 
 export { useSelect };

package/dist/components/signature-pad/index.d.cts

@@ -2,13 +2,13 @@ export type { DrawDetails as SignaturePadDrawDetails, DrawEndDetails as Signatur
 export { SignaturePadClearTrigger, type SignaturePadClearTriggerBaseProps, type SignaturePadClearTriggerProps, } from './signature-pad-clear-trigger';
 export { SignaturePadContext, type SignaturePadContextProps } from './signature-pad-context';
 export { SignaturePadControl, type SignaturePadControlBaseProps, type SignaturePadControlProps, } from './signature-pad-control';
-export { SignaturePadGuide, type SignaturePadGuideBaseProps, type SignaturePadGuideProps, } from './signature-pad-guide';
+export { SignaturePadGuide, type SignaturePadGuideBaseProps, type SignaturePadGuideProps } from './signature-pad-guide';
 export { SignaturePadHiddenInput, type SignaturePadHiddenInputBaseProps, type SignaturePadHiddenInputProps, } from './signature-pad-hidden-input';
-export { SignaturePadLabel, type SignaturePadLabelBaseProps, type SignaturePadLabelProps, } from './signature-pad-label';
-export { SignaturePadRoot, type SignaturePadRootBaseProps, type SignaturePadRootProps, } from './signature-pad-root';
+export { SignaturePadLabel, type SignaturePadLabelBaseProps, type SignaturePadLabelProps } from './signature-pad-label';
+export { SignaturePadRoot, type SignaturePadRootBaseProps, type SignaturePadRootProps } from './signature-pad-root';
 export { SignaturePadRootProvider, type SignaturePadRootProviderBaseProps, type SignaturePadRootProviderProps, } from './signature-pad-root-provider';
 export { SignaturePadSegment, type SignaturePadSegmentBaseProps, type SignaturePadSegmentProps, } from './signature-pad-segment';
 export { signaturePadAnatomy } from './signature-pad.anatomy';
-export { useSignaturePad, type UseSignaturePadProps, type UseSignaturePadReturn, } from './use-signature-pad';
+export { useSignaturePad, type UseSignaturePadProps, type UseSignaturePadReturn } from './use-signature-pad';
 export { useSignaturePadContext, type UseSignaturePadContext } from './use-signature-pad-context';
 export * as SignaturePad from './signature-pad';

package/dist/components/signature-pad/index.d.ts

@@ -2,13 +2,13 @@ export type { DrawDetails as SignaturePadDrawDetails, DrawEndDetails as Signatur
 export { SignaturePadClearTrigger, type SignaturePadClearTriggerBaseProps, type SignaturePadClearTriggerProps, } from './signature-pad-clear-trigger';
 export { SignaturePadContext, type SignaturePadContextProps } from './signature-pad-context';
 export { SignaturePadControl, type SignaturePadControlBaseProps, type SignaturePadControlProps, } from './signature-pad-control';
-export { SignaturePadGuide, type SignaturePadGuideBaseProps, type SignaturePadGuideProps, } from './signature-pad-guide';
+export { SignaturePadGuide, type SignaturePadGuideBaseProps, type SignaturePadGuideProps } from './signature-pad-guide';
 export { SignaturePadHiddenInput, type SignaturePadHiddenInputBaseProps, type SignaturePadHiddenInputProps, } from './signature-pad-hidden-input';
-export { SignaturePadLabel, type SignaturePadLabelBaseProps, type SignaturePadLabelProps, } from './signature-pad-label';
-export { SignaturePadRoot, type SignaturePadRootBaseProps, type SignaturePadRootProps, } from './signature-pad-root';
+export { SignaturePadLabel, type SignaturePadLabelBaseProps, type SignaturePadLabelProps } from './signature-pad-label';
+export { SignaturePadRoot, type SignaturePadRootBaseProps, type SignaturePadRootProps } from './signature-pad-root';
 export { SignaturePadRootProvider, type SignaturePadRootProviderBaseProps, type SignaturePadRootProviderProps, } from './signature-pad-root-provider';
 export { SignaturePadSegment, type SignaturePadSegmentBaseProps, type SignaturePadSegmentProps, } from './signature-pad-segment';
 export { signaturePadAnatomy } from './signature-pad.anatomy';
-export { useSignaturePad, type UseSignaturePadProps, type UseSignaturePadReturn, } from './use-signature-pad';
+export { useSignaturePad, type UseSignaturePadProps, type UseSignaturePadReturn } from './use-signature-pad';
 export { useSignaturePadContext, type UseSignaturePadContext } from './use-signature-pad-context';
 export * as SignaturePad from './signature-pad';

package/dist/components/signature-pad/signature-pad-control.cjs

@@ -9,13 +9,11 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const useSignaturePadContext = require('./use-signature-pad-context.cjs');
 
-const SignaturePadControl = react.forwardRef(
-  (props, ref) => {
-    const signaturePad = useSignaturePadContext.useSignaturePadContext();
-    const mergedProps = react$1.mergeProps(signaturePad.getControlProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
+const SignaturePadControl = react.forwardRef((props, ref) => {
+  const signaturePad = useSignaturePadContext.useSignaturePadContext();
+  const mergedProps = react$1.mergeProps(signaturePad.getControlProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 SignaturePadControl.displayName = "SignaturePadControl";
 
 exports.SignaturePadControl = SignaturePadControl;

package/dist/components/signature-pad/signature-pad-control.js

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useSignaturePadContext } from './use-signature-pad-context.js';
 
-const SignaturePadControl = forwardRef(
-  (props, ref) => {
-    const signaturePad = useSignaturePadContext();
-    const mergedProps = mergeProps(signaturePad.getControlProps(), props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const SignaturePadControl = forwardRef((props, ref) => {
+  const signaturePad = useSignaturePadContext();
+  const mergedProps = mergeProps(signaturePad.getControlProps(), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 SignaturePadControl.displayName = "SignaturePadControl";
 
 export { SignaturePadControl };

package/dist/components/signature-pad/signature-pad-guide.cjs

@@ -9,13 +9,11 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const useSignaturePadContext = require('./use-signature-pad-context.cjs');
 
-const SignaturePadGuide = react.forwardRef(
-  (props, ref) => {
-    const signaturePad = useSignaturePadContext.useSignaturePadContext();
-    const mergedProps = react$1.mergeProps(signaturePad.getGuideProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
+const SignaturePadGuide = react.forwardRef((props, ref) => {
+  const signaturePad = useSignaturePadContext.useSignaturePadContext();
+  const mergedProps = react$1.mergeProps(signaturePad.getGuideProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 SignaturePadGuide.displayName = "SignaturePadGuide";
 
 exports.SignaturePadGuide = SignaturePadGuide;

package/dist/components/signature-pad/signature-pad-guide.js

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useSignaturePadContext } from './use-signature-pad-context.js';
 
-const SignaturePadGuide = forwardRef(
-  (props, ref) => {
-    const signaturePad = useSignaturePadContext();
-    const mergedProps = mergeProps(signaturePad.getGuideProps(), props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const SignaturePadGuide = forwardRef((props, ref) => {
+  const signaturePad = useSignaturePadContext();
+  const mergedProps = mergeProps(signaturePad.getGuideProps(), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 SignaturePadGuide.displayName = "SignaturePadGuide";
 
 export { SignaturePadGuide };

package/dist/components/signature-pad/signature-pad-hidden-input.cjs

@@ -11,15 +11,13 @@ const factory = require('../factory.cjs');
 const useFieldContext = require('../field/use-field-context.cjs');
 const useSignaturePadContext = require('./use-signature-pad-context.cjs');
 
-const SignaturePadHiddenInput = react.forwardRef(
-  (props, ref) => {
-    const [hiddenInputProps, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
-    const signaturePad = useSignaturePadContext.useSignaturePadContext();
-    const mergedProps = react$1.mergeProps(signaturePad.getHiddenInputProps(hiddenInputProps), localProps);
-    const field = useFieldContext.useFieldContext();
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
-  }
-);
+const SignaturePadHiddenInput = react.forwardRef((props, ref) => {
+  const [hiddenInputProps, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const signaturePad = useSignaturePadContext.useSignaturePadContext();
+  const mergedProps = react$1.mergeProps(signaturePad.getHiddenInputProps(hiddenInputProps), localProps);
+  const field = useFieldContext.useFieldContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
+});
 SignaturePadHiddenInput.displayName = "SignaturePadHiddenInput";
 
 exports.SignaturePadHiddenInput = SignaturePadHiddenInput;

package/dist/components/signature-pad/signature-pad-hidden-input.js

@@ -7,15 +7,13 @@ import { ark } from '../factory.js';
 import { useFieldContext } from '../field/use-field-context.js';
 import { useSignaturePadContext } from './use-signature-pad-context.js';
 
-const SignaturePadHiddenInput = forwardRef(
-  (props, ref) => {
-    const [hiddenInputProps, localProps] = createSplitProps()(props, ["value"]);
-    const signaturePad = useSignaturePadContext();
-    const mergedProps = mergeProps(signaturePad.getHiddenInputProps(hiddenInputProps), localProps);
-    const field = useFieldContext();
-    return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
-  }
-);
+const SignaturePadHiddenInput = forwardRef((props, ref) => {
+  const [hiddenInputProps, localProps] = createSplitProps()(props, ["value"]);
+  const signaturePad = useSignaturePadContext();
+  const mergedProps = mergeProps(signaturePad.getHiddenInputProps(hiddenInputProps), localProps);
+  const field = useFieldContext();
+  return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
+});
 SignaturePadHiddenInput.displayName = "SignaturePadHiddenInput";
 
 export { SignaturePadHiddenInput };

package/dist/components/signature-pad/signature-pad-label.cjs

@@ -9,13 +9,11 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const useSignaturePadContext = require('./use-signature-pad-context.cjs');
 
-const SignaturePadLabel = react.forwardRef(
-  (props, ref) => {
-    const signaturePad = useSignaturePadContext.useSignaturePadContext();
-    const mergedProps = react$1.mergeProps(signaturePad.getLabelProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
-  }
-);
+const SignaturePadLabel = react.forwardRef((props, ref) => {
+  const signaturePad = useSignaturePadContext.useSignaturePadContext();
+  const mergedProps = react$1.mergeProps(signaturePad.getLabelProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
+});
 SignaturePadLabel.displayName = "SignaturePadLabel";
 
 exports.SignaturePadLabel = SignaturePadLabel;

package/dist/components/signature-pad/signature-pad-label.js

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useSignaturePadContext } from './use-signature-pad-context.js';
 
-const SignaturePadLabel = forwardRef(
-  (props, ref) => {
-    const signaturePad = useSignaturePadContext();
-    const mergedProps = mergeProps(signaturePad.getLabelProps(), props);
-    return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
-  }
-);
+const SignaturePadLabel = forwardRef((props, ref) => {
+  const signaturePad = useSignaturePadContext();
+  const mergedProps = mergeProps(signaturePad.getLabelProps(), props);
+  return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
+});
 SignaturePadLabel.displayName = "SignaturePadLabel";
 
 export { SignaturePadLabel };

package/dist/components/signature-pad/signature-pad-root-provider.cjs

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

package/dist/components/signature-pad/signature-pad-root-provider.js

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

package/dist/components/signature-pad/signature-pad-segment.cjs

@@ -9,17 +9,15 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const useSignaturePadContext = require('./use-signature-pad-context.cjs');
 
-const SignaturePadSegment = react.forwardRef(
-  (props, ref) => {
-    const signaturePad = useSignaturePadContext.useSignaturePadContext();
-    const mergedProps = react$1.mergeProps(signaturePad.getSegmentProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsxs(factory.ark.svg, { ...mergedProps, ref, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Signature" }),
-      signaturePad.paths.map((path, i) => /* @__PURE__ */ jsxRuntime.jsx("path", { ...signaturePad.getSegmentPathProps({ path }) }, i)),
-      signaturePad.currentPath && /* @__PURE__ */ jsxRuntime.jsx("path", { ...signaturePad.getSegmentPathProps({ path: signaturePad.currentPath }) })
-    ] });
-  }
-);
+const SignaturePadSegment = react.forwardRef((props, ref) => {
+  const signaturePad = useSignaturePadContext.useSignaturePadContext();
+  const mergedProps = react$1.mergeProps(signaturePad.getSegmentProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsxs(factory.ark.svg, { ...mergedProps, ref, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Signature" }),
+    signaturePad.paths.map((path, i) => /* @__PURE__ */ jsxRuntime.jsx("path", { ...signaturePad.getSegmentPathProps({ path }) }, i)),
+    signaturePad.currentPath && /* @__PURE__ */ jsxRuntime.jsx("path", { ...signaturePad.getSegmentPathProps({ path: signaturePad.currentPath }) })
+  ] });
+});
 SignaturePadSegment.displayName = "SignaturePadSegment";
 
 exports.SignaturePadSegment = SignaturePadSegment;

package/dist/components/signature-pad/signature-pad-segment.js

@@ -5,17 +5,15 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useSignaturePadContext } from './use-signature-pad-context.js';
 
-const SignaturePadSegment = forwardRef(
-  (props, ref) => {
-    const signaturePad = useSignaturePadContext();
-    const mergedProps = mergeProps(signaturePad.getSegmentProps(), props);
-    return /* @__PURE__ */ jsxs(ark.svg, { ...mergedProps, ref, children: [
-      /* @__PURE__ */ jsx("title", { children: "Signature" }),
-      signaturePad.paths.map((path, i) => /* @__PURE__ */ jsx("path", { ...signaturePad.getSegmentPathProps({ path }) }, i)),
-      signaturePad.currentPath && /* @__PURE__ */ jsx("path", { ...signaturePad.getSegmentPathProps({ path: signaturePad.currentPath }) })
-    ] });
-  }
-);
+const SignaturePadSegment = forwardRef((props, ref) => {
+  const signaturePad = useSignaturePadContext();
+  const mergedProps = mergeProps(signaturePad.getSegmentProps(), props);
+  return /* @__PURE__ */ jsxs(ark.svg, { ...mergedProps, ref, children: [
+    /* @__PURE__ */ jsx("title", { children: "Signature" }),
+    signaturePad.paths.map((path, i) => /* @__PURE__ */ jsx("path", { ...signaturePad.getSegmentPathProps({ path }) }, i)),
+    signaturePad.currentPath && /* @__PURE__ */ jsx("path", { ...signaturePad.getSegmentPathProps({ path: signaturePad.currentPath }) })
+  ] });
+});
 SignaturePadSegment.displayName = "SignaturePadSegment";
 
 export { SignaturePadSegment };

package/dist/components/signature-pad/signature-pad.d.cts

@@ -1,6 +1,6 @@
 export type { DrawDetails, DrawEndDetails, DrawingOptions } from '@zag-js/signature-pad';
 export { SignaturePadClearTrigger as ClearTrigger, type SignaturePadClearTriggerBaseProps as ClearTriggerBaseProps, type SignaturePadClearTriggerProps as ClearTriggerProps, } from './signature-pad-clear-trigger';
-export { SignaturePadContext as Context, type SignaturePadContextProps as ContextProps, } from './signature-pad-context';
+export { SignaturePadContext as Context, type SignaturePadContextProps as ContextProps } from './signature-pad-context';
 export { SignaturePadControl as Control, type SignaturePadControlBaseProps as ControlBaseProps, type SignaturePadControlProps as ControlProps, } from './signature-pad-control';
 export { SignaturePadGuide as Guide, type SignaturePadGuideBaseProps as GuideBaseProps, type SignaturePadGuideProps as GuideProps, } from './signature-pad-guide';
 export { SignaturePadHiddenInput as HiddenInput, type SignaturePadHiddenInputBaseProps as HiddenInputBaseProps, type SignaturePadHiddenInputProps as HiddenInputProps, } from './signature-pad-hidden-input';

package/dist/components/signature-pad/signature-pad.d.ts

@@ -1,6 +1,6 @@
 export type { DrawDetails, DrawEndDetails, DrawingOptions } from '@zag-js/signature-pad';
 export { SignaturePadClearTrigger as ClearTrigger, type SignaturePadClearTriggerBaseProps as ClearTriggerBaseProps, type SignaturePadClearTriggerProps as ClearTriggerProps, } from './signature-pad-clear-trigger';
-export { SignaturePadContext as Context, type SignaturePadContextProps as ContextProps, } from './signature-pad-context';
+export { SignaturePadContext as Context, type SignaturePadContextProps as ContextProps } from './signature-pad-context';
 export { SignaturePadControl as Control, type SignaturePadControlBaseProps as ControlBaseProps, type SignaturePadControlProps as ControlProps, } from './signature-pad-control';
 export { SignaturePadGuide as Guide, type SignaturePadGuideBaseProps as GuideBaseProps, type SignaturePadGuideProps as GuideProps, } from './signature-pad-guide';
 export { SignaturePadHiddenInput as HiddenInput, type SignaturePadHiddenInputBaseProps as HiddenInputBaseProps, type SignaturePadHiddenInputProps as HiddenInputProps, } from './signature-pad-hidden-input';

package/dist/components/signature-pad/use-signature-pad-context.cjs

@@ -5,13 +5,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const createContext = require('../../utils/create-context.cjs');
 
-const [SignaturePadProvider, useSignaturePadContext] = createContext.createContext(
-  {
-    name: "SignaturePadContext",
-    hookName: "useSignaturePadContext",
-    providerName: "<SignaturePadProvider />"
-  }
-);
+const [SignaturePadProvider, useSignaturePadContext] = createContext.createContext({
+  name: "SignaturePadContext",
+  hookName: "useSignaturePadContext",
+  providerName: "<SignaturePadProvider />"
+});
 
 exports.SignaturePadProvider = SignaturePadProvider;
 exports.useSignaturePadContext = useSignaturePadContext;

package/dist/components/signature-pad/use-signature-pad-context.js

@@ -1,12 +1,10 @@
 'use client';
 import { createContext } from '../../utils/create-context.js';
 
-const [SignaturePadProvider, useSignaturePadContext] = createContext(
-  {
-    name: "SignaturePadContext",
-    hookName: "useSignaturePadContext",
-    providerName: "<SignaturePadProvider />"
-  }
-);
+const [SignaturePadProvider, useSignaturePadContext] = createContext({
+  name: "SignaturePadContext",
+  hookName: "useSignaturePadContext",
+  providerName: "<SignaturePadProvider />"
+});
 
 export { SignaturePadProvider, useSignaturePadContext };

package/dist/components/signature-pad/use-signature-pad.cjs

@@ -8,7 +8,6 @@ const signaturePad = require('@zag-js/signature-pad');
 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');
 
 function _interopNamespaceDefault(e) {
@@ -30,12 +29,13 @@ function _interopNamespaceDefault(e) {
 
 const signaturePad__namespace = /*#__PURE__*/_interopNamespaceDefault(signaturePad);
 
-const useSignaturePad = (props = {}) => {
+const useSignaturePad = (props) => {
+  const id = react.useId();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
   const field = useFieldContext.useFieldContext();
-  const initialContext = {
-    id: react.useId(),
+  const machineProps = {
+    id,
     ids: {
       label: field?.ids.label,
       hiddenInput: field?.ids.control
@@ -47,14 +47,8 @@ const useSignaturePad = (props = {}) => {
     getRootNode,
     ...props
   };
-  const context = {
-    ...initialContext,
-    drawing: props.drawing,
-    onDraw: useEvent.useEvent(props.onDraw),
-    onDrawEnd: useEvent.useEvent(props.onDrawEnd)
-  };
-  const [state, send] = react$1.useMachine(signaturePad__namespace.machine(initialContext), { context });
-  return signaturePad__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(signaturePad__namespace.machine, machineProps);
+  return signaturePad__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.useSignaturePad = useSignaturePad;

package/dist/components/signature-pad/use-signature-pad.d.cts

@@ -1,7 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as signaturePad from '@zag-js/signature-pad';
-export interface UseSignaturePadProps extends Optional<Omit<signaturePad.Context, 'dir' | 'getRootNode'>, 'id'> {
+export interface UseSignaturePadProps extends Optional<Omit<signaturePad.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseSignaturePadReturn extends signaturePad.Api<PropTypes> {
 }

package/dist/components/signature-pad/use-signature-pad.d.ts

@@ -1,7 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as signaturePad from '@zag-js/signature-pad';
-export interface UseSignaturePadProps extends Optional<Omit<signaturePad.Context, 'dir' | 'getRootNode'>, 'id'> {
+export interface UseSignaturePadProps extends Optional<Omit<signaturePad.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseSignaturePadReturn extends signaturePad.Api<PropTypes> {
 }