@ark-ui/react 0.14.0 → 0.15.0

package/select/select.mjs

@@ -1,40 +1,53 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import 'react';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { SelectProvider } from './select-context.mjs';
 import { useSelect } from './use-select.mjs';
 
-const Select = (props) => {
-  const [useSelectProps, { children }] = createSplitProps()(props, [
-    "closeOnSelect",
-    "defaultValue",
-    "dir",
-    "disabled",
-    "form",
-    "getRootNode",
-    "highlightedOption",
-    "id",
-    "ids",
-    "invalid",
-    "loop",
-    "name",
-    "onChange",
-    "onClose",
-    "onFocusOutside",
-    "onHighlight",
-    "onInteractOutside",
-    "onOpen",
-    "onPointerDownOutside",
-    "positioning",
-    "readOnly",
-    "selectedOption",
-    "selectOnTab"
-  ]);
-  const select = useSelect(useSelectProps);
-  const view = runIfFn(children, select);
-  return /* @__PURE__ */ jsx(SelectProvider, { value: select, children: view });
+const SelectImpl = (props, ref) => {
+  const [useSelectProps, { children, ...localProps }] = createSplitProps()(
+    props,
+    [
+      "closeOnSelect",
+      "defaultValue",
+      "dir",
+      "disabled",
+      "form",
+      "getRootNode",
+      "highlightedValue",
+      "id",
+      "ids",
+      "invalid",
+      "isItemDisabled",
+      "items",
+      "itemToString",
+      "itemToValue",
+      "loop",
+      "multiple",
+      "name",
+      "onChange",
+      "onClose",
+      "onFocusOutside",
+      "onHighlight",
+      "onInteractOutside",
+      "onOpen",
+      "onPointerDownOutside",
+      "open",
+      "positioning",
+      "readOnly",
+      "selectOnBlur",
+      "value"
+    ]
+  );
+  const api = useSelect(useSelectProps);
+  const view = runIfFn(children, api);
+  const mergedProps = mergeProps(api.rootProps, localProps);
+  return /* @__PURE__ */ jsx(SelectProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
 };
+const Select = forwardRef(SelectImpl);
 
 export { Select };

package/select/select.stories.d.ts

@@ -5,3 +5,6 @@ type SelectType = typeof Select;
 declare const meta: Meta<SelectType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const Advanced: () => JSX.Element;
+export declare const Controlled: () => JSX.Element;
+export declare const Multiple: () => JSX.Element;

package/select/use-select.cjs

@@ -6,6 +6,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const react$1 = require('@zag-js/react');
 const select = require('@zag-js/select');
 const react = require('react');
+const createSplitProps = require('../create-split-props.cjs');
 require('../environment/index.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
@@ -29,16 +30,25 @@ function _interopNamespaceDefault(e) {
 const select__namespace = /*#__PURE__*/_interopNamespaceDefault(select);
 
 const useSelect = (props) => {
+  const [collectionOptions, rest] = createSplitProps.createSplitProps()(props, [
+    "isItemDisabled",
+    "itemToValue",
+    "itemToString",
+    "items"
+  ]);
+  const collection = select__namespace.collection(collectionOptions);
   const getRootNode = environmentContext.useEnvironmentContext();
   const initialContext = {
     id: react.useId(),
     getRootNode,
-    ...props,
-    selectedOption: props.defaultValue
+    collection,
+    ...rest,
+    value: props.defaultValue
   };
   const context = {
     ...initialContext,
-    selectedOption: props.selectedOption
+    collection,
+    value: props.value
   };
   const [state, send] = react$1.useMachine(select__namespace.machine(initialContext), {
     context

package/select/use-select.d.ts

@@ -1,7 +1,9 @@
+import { type PropTypes } from '@zag-js/react';
+import type { CollectionOptions } from '@zag-js/select';
 import * as select from '@zag-js/select';
-import { type Optional } from '../types';
-export type UseSelectProps = Optional<select.Context, 'id'> & {
-    defaultValue?: select.Context['selectedOption'];
-};
-export type UseSelectReturn = select.Api;
-export declare const useSelect: (props: UseSelectProps) => UseSelectReturn;
+import { type CollectionItem, type Optional } from '../types';
+export interface UseSelectProps<T extends CollectionItem> extends CollectionOptions<T>, Omit<Optional<select.Context<T>, 'id'>, 'collection'> {
+    defaultValue?: select.Context<T>['value'];
+}
+export type UseSelectReturn<T extends CollectionItem> = select.Api<PropTypes, T>;
+export declare const useSelect: <T extends CollectionItem>(props: UseSelectProps<T>) => UseSelectReturn<T>;

package/select/use-select.mjs

@@ -2,20 +2,30 @@
 import { useMachine, normalizeProps } from '@zag-js/react';
 import * as select from '@zag-js/select';
 import { useId } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
 import '../environment/index.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useSelect = (props) => {
+  const [collectionOptions, rest] = createSplitProps()(props, [
+    "isItemDisabled",
+    "itemToValue",
+    "itemToString",
+    "items"
+  ]);
+  const collection = select.collection(collectionOptions);
   const getRootNode = useEnvironmentContext();
   const initialContext = {
     id: useId(),
     getRootNode,
-    ...props,
-    selectedOption: props.defaultValue
+    collection,
+    ...rest,
+    value: props.defaultValue
   };
   const context = {
     ...initialContext,
-    selectedOption: props.selectedOption
+    collection,
+    value: props.value
   };
   const [state, send] = useMachine(select.machine(initialContext), {
     context

package/slider/index.d.ts

@@ -1,6 +1,7 @@
 import { UseSliderProps, UseSliderReturn } from './use-slider';
+import { HTMLArkProps } from '..';
 import { Assign } from '../types';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, RefAttributes, LabelHTMLAttributes, OutputHTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, ReactNode, RefAttributes, DetailedHTMLProps, HTMLAttributes, LabelHTMLAttributes } from 'react';
 /// <reference types="react" />
 import { type SliderProps } from './slider';
 import { useSliderContext } from './slider-context';
@@ -13,64 +14,36 @@ import { SliderRange, type SliderRangeProps } from './slider-range';
 import { SliderThumb, type SliderThumbProps } from './slider-thumb';
 import { SliderTrack, type SliderTrackProps } from './slider-track';
 import { sliderAnatomy } from './slider.anatomy';
-declare const Slider: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, UseSliderProps>, "children"> & {
+declare const Slider: ForwardRefExoticComponent<Omit<Assign<HTMLArkProps<"div">, UseSliderProps>, "children"> & {
     children?: ReactNode | ((context: UseSliderReturn) => ReactNode);
 } & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, UseSliderProps>, "children"> & {
+    Root: ForwardRefExoticComponent<Omit<Assign<HTMLArkProps<"div">, UseSliderProps>, "children"> & {
         children?: ReactNode | ((context: UseSliderReturn) => ReactNode);
     } & RefAttributes<HTMLDivElement>>;
-    Control: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    Label: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-        ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
-    } & {
+    Control: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLLabelElement>>;
-    Marker: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        ref?: RefObject<HTMLSpanElement> | ((instance: HTMLSpanElement | null) => void) | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    Label: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, "value"> & {
+    } & RefAttributes<HTMLLabelElement>>;
+    Marker: ForwardRefExoticComponent<Omit<HTMLArkProps<"span">, "value"> & {
         value: number;
     } & RefAttributes<HTMLSpanElement>>;
-    MarkerGroup: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    Output: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<OutputHTMLAttributes<HTMLOutputElement>, HTMLOutputElement>, "ref"> & {
-        ref?: ((instance: HTMLOutputElement | null) => void) | RefObject<HTMLOutputElement> | null | undefined;
-    } & {
+    MarkerGroup: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, "children"> & {
+    } & RefAttributes<HTMLDivElement>>;
+    Output: ForwardRefExoticComponent<Omit<HTMLArkProps<"output">, "children"> & {
         children?: ReactNode | ((context: UseSliderReturn) => ReactNode);
     } & RefAttributes<HTMLOutputElement>>;
-    Range: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    Range: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    Thumb: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    Thumb: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    Track: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    Track: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
+    } & RefAttributes<HTMLDivElement>>;
 };
 export { Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderOutput, SliderRange, SliderThumb, SliderTrack, sliderAnatomy, useSliderContext, };
 export type { SliderControlProps, SliderLabelProps, SliderMarkerGroupProps, SliderMarkerProps, SliderOutputProps, SliderProps, SliderRangeProps, SliderThumbProps, SliderTrackProps, };

package/slider/slider-control.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type SliderControlProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const SliderControl: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type SliderControlProps = HTMLArkProps<'div'>;
+export declare const SliderControl: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/slider/slider-label.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type SliderLabelProps = ComponentPropsWithoutRef<typeof ark.label>;
-export declare const SliderLabel: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-    ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type SliderLabelProps = HTMLArkProps<'label'>;
+export declare const SliderLabel: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLLabelElement>>;
+} & RefAttributes<HTMLLabelElement>>;

package/slider/slider-marker-group.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type SliderMarkerGroupProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const SliderMarkerGroup: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type SliderMarkerGroupProps = HTMLArkProps<'div'>;
+export declare const SliderMarkerGroup: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/slider/slider-marker.d.ts

@@ -1,13 +1,10 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export type SliderMarkerProps = Assign<ComponentPropsWithoutRef<typeof ark.span>, {
+export type SliderMarkerProps = Assign<HTMLArkProps<'span'>, {
     value: number;
 }>;
-export declare const SliderMarker: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: RefObject<HTMLSpanElement> | ((instance: HTMLSpanElement | null) => void) | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "value"> & {
+export declare const SliderMarker: ForwardRefExoticComponent<Omit<HTMLArkProps<"span">, "value"> & {
     value: number;
 } & RefAttributes<HTMLSpanElement>>;

package/slider/slider-output.d.ts

@@ -1,14 +1,11 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, OutputHTMLAttributes, RefObject, ReactNode, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type SliderContext } from './slider-context';
-export type SliderOutputProps = Assign<ComponentPropsWithoutRef<typeof ark.output>, {
+export type SliderOutputProps = Assign<HTMLArkProps<'output'>, {
     children?: ((context: SliderContext) => React.ReactNode) | React.ReactNode;
 }>;
-export declare const SliderOutput: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<OutputHTMLAttributes<HTMLOutputElement>, HTMLOutputElement>, "ref"> & {
-    ref?: ((instance: HTMLOutputElement | null) => void) | RefObject<HTMLOutputElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "children"> & {
+export declare const SliderOutput: ForwardRefExoticComponent<Omit<HTMLArkProps<"output">, "children"> & {
     children?: ReactNode | ((context: SliderContext) => React.ReactNode);
 } & RefAttributes<HTMLOutputElement>>;

package/slider/slider-range.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type SliderRangeProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const SliderRange: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type SliderRangeProps = HTMLArkProps<'div'>;
+export declare const SliderRange: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/slider/slider-thumb.cjs

@@ -10,12 +10,9 @@ const factory = require('../factory.cjs');
 const sliderContext = require('./slider-context.cjs');
 
 const SliderThumb = react.forwardRef((props, ref) => {
-  const { thumbProps, hiddenInputProps } = sliderContext.useSliderContext();
-  const mergedProps = react$1.mergeProps(thumbProps, props);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: props.children }),
-    /* @__PURE__ */ jsxRuntime.jsx("input", { ...hiddenInputProps })
-  ] });
+  const api = sliderContext.useSliderContext();
+  const mergedProps = react$1.mergeProps(api.thumbProps, props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 SliderThumb.displayName = "SliderThumb";
 

package/slider/slider-thumb.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type SliderThumbProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const SliderThumb: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type SliderThumbProps = HTMLArkProps<'div'>;
+export declare const SliderThumb: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/slider/slider-thumb.mjs

@@ -1,17 +1,14 @@
 'use client';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
 const SliderThumb = forwardRef((props, ref) => {
-  const { thumbProps, hiddenInputProps } = useSliderContext();
-  const mergedProps = mergeProps(thumbProps, props);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: props.children }),
-    /* @__PURE__ */ jsx("input", { ...hiddenInputProps })
-  ] });
+  const api = useSliderContext();
+  const mergedProps = mergeProps(api.thumbProps, props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 SliderThumb.displayName = "SliderThumb";
 

package/slider/slider-track.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type SliderTrackProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const SliderTrack: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type SliderTrackProps = HTMLArkProps<'div'>;
+export declare const SliderTrack: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/slider/slider.cjs

@@ -42,10 +42,13 @@ const Slider = react.forwardRef((props, ref) => {
     "thumbSize",
     "value"
   ]);
-  const slider = useSlider.useSlider(useSliderProps);
-  const mergedProps = react$1.mergeProps(slider.rootProps, divProps);
-  const view = runIfFn.runIfFn(children, slider);
-  return /* @__PURE__ */ jsxRuntime.jsx(sliderContext.SliderProvider, { value: slider, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
+  const api = useSlider.useSlider(useSliderProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, divProps);
+  const view = runIfFn.runIfFn(children, api);
+  return /* @__PURE__ */ jsxRuntime.jsxs(sliderContext.SliderProvider, { value: api, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.hiddenInputProps })
+  ] });
 });
 Slider.displayName = "Slider";
 

package/slider/slider.d.ts

@@ -1,15 +1,11 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type SliderContext } from './slider-context';
 import { type UseSliderProps } from './use-slider';
-export type SliderProps = Assign<Assign<ComponentPropsWithoutRef<typeof ark.div>, UseSliderProps>, {
+export type SliderProps = Assign<Assign<HTMLArkProps<'div'>, UseSliderProps>, {
     children?: ((context: SliderContext) => ReactNode) | ReactNode;
 }>;
-export declare const Slider: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, UseSliderProps>, "children"> & {
+export declare const Slider: ForwardRefExoticComponent<Omit<Assign<HTMLArkProps<"div">, UseSliderProps>, "children"> & {
     children?: ReactNode | ((context: SliderContext) => ReactNode);
 } & RefAttributes<HTMLDivElement>>;

package/slider/slider.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
@@ -38,10 +38,13 @@ const Slider = forwardRef((props, ref) => {
     "thumbSize",
     "value"
   ]);
-  const slider = useSlider(useSliderProps);
-  const mergedProps = mergeProps(slider.rootProps, divProps);
-  const view = runIfFn(children, slider);
-  return /* @__PURE__ */ jsx(SliderProvider, { value: slider, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
+  const api = useSlider(useSliderProps);
+  const mergedProps = mergeProps(api.rootProps, divProps);
+  const view = runIfFn(children, api);
+  return /* @__PURE__ */ jsxs(SliderProvider, { value: api, children: [
+    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }),
+    /* @__PURE__ */ jsx("input", { ...api.hiddenInputProps })
+  ] });
 });
 Slider.displayName = "Slider";
 

package/slider/use-slider.cjs

@@ -6,8 +6,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const react$1 = require('@zag-js/react');
 const slider = require('@zag-js/slider');
 const react = require('react');
-const reactDom = require('react-dom');
 require('../environment/index.cjs');
+const useEvent = require('../use-event.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -37,15 +37,10 @@ const useSlider = (props) => {
     ...props,
     value: props.defaultValue ?? props.value
   };
-  const onChange = props.onChange;
-  const onChangeWithFlushSync = react.useCallback(
-    (e) => reactDom.flushSync(() => onChange?.(e)),
-    [onChange]
-  );
   const context = {
     ...initialContext,
     value: props.value,
-    onChange: onChangeWithFlushSync
+    onChange: useEvent.useEvent(props.onChange, { sync: true })
   };
   const [state, send] = react$1.useMachine(slider__namespace.machine(initialContext), { context });
   return slider__namespace.connect(state, send, react$1.normalizeProps);

package/slider/use-slider.d.ts

@@ -1,7 +1,7 @@
 import * as slider from '@zag-js/slider';
 import { type Optional } from '../types';
-export type UseSliderProps = Optional<slider.Context, 'id'> & {
+export interface UseSliderProps extends Optional<slider.Context, 'id'> {
     defaultValue?: slider.Context['value'];
-};
+}
 export type UseSliderReturn = slider.Api;
 export declare const useSlider: (props: UseSliderProps) => UseSliderReturn;

package/slider/use-slider.mjs

@@ -1,9 +1,9 @@
 'use client';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import * as slider from '@zag-js/slider';
-import { useId, useCallback } from 'react';
-import { flushSync } from 'react-dom';
+import { useId } from 'react';
 import '../environment/index.mjs';
+import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useSlider = (props) => {
@@ -14,15 +14,10 @@ const useSlider = (props) => {
     ...props,
     value: props.defaultValue ?? props.value
   };
-  const onChange = props.onChange;
-  const onChangeWithFlushSync = useCallback(
-    (e) => flushSync(() => onChange?.(e)),
-    [onChange]
-  );
   const context = {
     ...initialContext,
     value: props.value,
-    onChange: onChangeWithFlushSync
+    onChange: useEvent(props.onChange, { sync: true })
   };
   const [state, send] = useMachine(slider.machine(initialContext), { context });
   return slider.connect(state, send, normalizeProps);