@ark-ui/react 0.15.0 → 1.0.0-beta.1

package/select/select-context.d.ts

@@ -2,5 +2,6 @@ import { Provider } from 'react';
 /// <reference types="react" />
 import type { CollectionItem } from '../types';
 import { type UseSelectReturn } from './use-select';
-export type SelectContext<T extends CollectionItem> = UseSelectReturn<T>;
+export interface SelectContext<T extends CollectionItem> extends UseSelectReturn<T> {
+}
 export declare const SelectProvider: Provider<SelectContext<any>>, useSelectContext: () => SelectContext<any>;

package/select/select-control.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type SelectControlProps = HTMLArkProps<'div'>;
-export declare const SelectControl: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export interface SelectControlProps extends HTMLArkProps<'div'> {
+}
+export declare const SelectControl: ForwardRefExoticComponent<SelectControlProps & RefAttributes<HTMLDivElement>>;

package/{range-slider/range-slider-track.cjs → select/select-indicator.cjs}

@@ -7,13 +7,13 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-const rangeSliderContext = require('./range-slider-context.cjs');
+const selectContext = require('./select-context.cjs');
 
-const RangeSliderTrack = react.forwardRef((props, ref) => {
-  const { trackProps } = rangeSliderContext.useRangeSliderContext();
-  const mergedProps = react$1.mergeProps(trackProps, props);
+const SelectIndicator = react.forwardRef((props, ref) => {
+  const api = selectContext.useSelectContext();
+  const mergedProps = react$1.mergeProps(api.indicatorProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
-RangeSliderTrack.displayName = "RangeSliderTrack";
+SelectIndicator.displayName = "SelectIndicator";
 
-exports.RangeSliderTrack = RangeSliderTrack;
+exports.SelectIndicator = SelectIndicator;

package/select/select-indicator.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface SelectIndicatorProps extends HTMLArkProps<'div'> {
+}
+export declare const SelectIndicator: ForwardRefExoticComponent<SelectIndicatorProps & RefAttributes<HTMLDivElement>>;

package/select/select-indicator.mjs

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

package/select/select-item-context.d.ts

@@ -1,5 +1,6 @@
 import { Provider } from 'react';
 /// <reference types="react" />
 import type { ItemProps } from '@zag-js/select';
-export type SelectItemContext = ItemProps;
+export interface SelectItemContext extends ItemProps {
+}
 export declare const SelectItemProvider: Provider<SelectItemContext>, useSelectItemContext: () => SelectItemContext;

package/select/select-item-group-label.d.ts

@@ -3,5 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import type { ItemGroupLabelProps } from '@zag-js/select';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export type SelectItemGroupLabelProps = Assign<HTMLArkProps<'div'>, ItemGroupLabelProps>;
-export declare const SelectItemGroupLabel: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "htmlFor"> & ItemGroupLabelProps & RefAttributes<HTMLDivElement>>;
+export interface SelectItemGroupLabelProps extends Assign<HTMLArkProps<'div'>, ItemGroupLabelProps> {
+}
+export declare const SelectItemGroupLabel: ForwardRefExoticComponent<SelectItemGroupLabelProps & RefAttributes<HTMLDivElement>>;

package/select/select-item-group.d.ts

@@ -3,5 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import type { ItemGroupProps } from '@zag-js/select';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export type SelectItemGroupProps = Assign<HTMLArkProps<'div'>, ItemGroupProps>;
-export declare const SelectItemGroup: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "id"> & ItemGroupProps & RefAttributes<HTMLDivElement>>;
+export interface SelectItemGroupProps extends Assign<HTMLArkProps<'div'>, ItemGroupProps> {
+}
+export declare const SelectItemGroup: ForwardRefExoticComponent<SelectItemGroupProps & RefAttributes<HTMLDivElement>>;

package/select/select-item-indicator.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type SelectItemIndicatorProps = HTMLArkProps<'div'>;
-export declare const SelectItemIndicator: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export interface SelectItemIndicatorProps extends HTMLArkProps<'div'> {
+}
+export declare const SelectItemIndicator: ForwardRefExoticComponent<SelectItemIndicatorProps & RefAttributes<HTMLDivElement>>;

package/select/select-item-text.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type SelectItemTextProps = HTMLArkProps<'span'>;
-export declare const SelectItemText: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export interface SelectItemTextProps extends HTMLArkProps<'span'> {
+}
+export declare const SelectItemText: ForwardRefExoticComponent<SelectItemTextProps & RefAttributes<HTMLDivElement>>;

package/select/select-item.d.ts

@@ -1,11 +1,10 @@
-import { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import type { ItemProps, ItemState } from '@zag-js/select';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export type SelectItemProps = Assign<HTMLArkProps<'div'>, {
+export interface SelectItemProps extends Assign<HTMLArkProps<'div'>, {
     children?: React.ReactNode | ((props: ItemState) => React.ReactNode);
-}> & ItemProps;
-export declare const SelectItem: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "children"> & {
-    children?: ReactNode | ((props: ItemState) => React.ReactNode);
-} & ItemProps & RefAttributes<HTMLDivElement>>;
+}>, ItemProps {
+}
+export declare const SelectItem: ForwardRefExoticComponent<SelectItemProps & RefAttributes<HTMLDivElement>>;

package/select/select-label.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type SelectLabelProps = HTMLArkProps<'label'>;
-export declare const SelectLabel: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLLabelElement>>;
+export interface SelectLabelProps extends HTMLArkProps<'label'> {
+}
+export declare const SelectLabel: ForwardRefExoticComponent<SelectLabelProps & RefAttributes<HTMLLabelElement>>;

package/select/select-positioner.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type SelectPositionerProps = HTMLArkProps<'div'>;
-export declare const SelectPositioner: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export interface SelectPositionerProps extends HTMLArkProps<'div'> {
+}
+export declare const SelectPositioner: ForwardRefExoticComponent<SelectPositionerProps & RefAttributes<HTMLDivElement>>;

package/select/select-trigger.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type SelectTriggerProps = HTMLArkProps<'button'>;
-export declare const SelectTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLButtonElement>>;
+export interface SelectTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const SelectTrigger: ForwardRefExoticComponent<SelectTriggerProps & RefAttributes<HTMLButtonElement>>;

package/select/{select-value.cjs → select-value-text.cjs}

@@ -4,16 +4,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const anatomy = require('@ark-ui/anatomy');
 const react = require('react');
 const factory = require('../factory.cjs');
 const selectContext = require('./select-context.cjs');
-const select_anatomy = require('./select.anatomy.cjs');
 
-const SelectValue = react.forwardRef((props, ref) => {
+const SelectValueText = react.forwardRef((props, ref) => {
   const { children, placeholder, ...rest } = props;
   const api = selectContext.useSelectContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...select_anatomy.parts.value.attrs, ...rest, ref, children: children || api.valueAsString || placeholder });
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...anatomy.selectAnatomy.build().valueText.attrs, ...rest, ref, children: children || api.valueAsString || placeholder });
 });
-SelectValue.displayName = "SelectValue";
+SelectValueText.displayName = "SelectValueText";
 
-exports.SelectValue = SelectValue;
+exports.SelectValueText = SelectValueText;

package/select/select-value-text.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface SelectValueTextProps extends HTMLArkProps<'span'> {
+}
+export declare const SelectValueText: ForwardRefExoticComponent<SelectValueTextProps & RefAttributes<HTMLSpanElement>>;

package/select/select-value-text.mjs

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { selectAnatomy } from '@ark-ui/anatomy';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useSelectContext } from './select-context.mjs';
+
+const SelectValueText = forwardRef((props, ref) => {
+  const { children, placeholder, ...rest } = props;
+  const api = useSelectContext();
+  return /* @__PURE__ */ jsx(ark.span, { ...selectAnatomy.build().valueText.attrs, ...rest, ref, children: children || api.valueAsString || placeholder });
+});
+SelectValueText.displayName = "SelectValueText";
+
+export { SelectValueText };

package/select/select.cjs

@@ -33,13 +33,12 @@ const SelectImpl = (props, ref) => {
       "loop",
       "multiple",
       "name",
-      "onChange",
-      "onClose",
       "onFocusOutside",
-      "onHighlight",
+      "onHighlightChange",
       "onInteractOutside",
-      "onOpen",
+      "onOpenChange",
       "onPointerDownOutside",
+      "onValueChange",
       "open",
       "positioning",
       "readOnly",

package/select/select.d.ts

@@ -2,9 +2,10 @@ import { type ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type Assign, type CollectionItem } from '../types';
 import { type UseSelectProps, type UseSelectReturn } from './use-select';
-export type SelectProps<T extends CollectionItem> = Assign<HTMLArkProps<'div'>, UseSelectProps<T>> & {
+export interface SelectProps<T extends CollectionItem> extends Assign<HTMLArkProps<'div'>, UseSelectProps<T> & {
     children?: ReactNode | ((state: UseSelectReturn<T>) => ReactNode);
-};
+}> {
+}
 export interface SelectComponent {
     <T extends CollectionItem>(props: SelectProps<T> & React.RefAttributes<HTMLDivElement>): JSX.Element;
 }

package/select/select.mjs

@@ -29,13 +29,12 @@ const SelectImpl = (props, ref) => {
       "loop",
       "multiple",
       "name",
-      "onChange",
-      "onClose",
       "onFocusOutside",
-      "onHighlight",
+      "onHighlightChange",
       "onInteractOutside",
-      "onOpen",
+      "onOpenChange",
       "onPointerDownOutside",
+      "onValueChange",
       "open",
       "positioning",
       "readOnly",

package/select/use-select.cjs

@@ -8,6 +8,7 @@ const select = require('@zag-js/select');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 require('../environment/index.cjs');
+const useEvent = require('../use-event.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -36,11 +37,14 @@ const useSelect = (props) => {
     "itemToString",
     "items"
   ]);
-  const collection = select__namespace.collection(collectionOptions);
-  const getRootNode = environmentContext.useEnvironmentContext();
+  const collection = react.useMemo(
+    () => select__namespace.collection(collectionOptions),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    Object.values(collectionOptions)
+  );
   const initialContext = {
     id: react.useId(),
-    getRootNode,
+    getRootNode: environmentContext.useEnvironmentContext(),
     collection,
     ...rest,
     value: props.defaultValue
@@ -48,7 +52,10 @@ const useSelect = (props) => {
   const context = {
     ...initialContext,
     collection,
-    value: props.value
+    value: props.value,
+    onValueChange: useEvent.useEvent(props.onValueChange, { sync: true }),
+    onHighlightChange: useEvent.useEvent(props.onHighlightChange),
+    onOpenChange: useEvent.useEvent(props.onOpenChange)
   };
   const [state, send] = react$1.useMachine(select__namespace.machine(initialContext), {
     context

package/select/use-select.d.ts

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

package/select/use-select.mjs

@@ -1,9 +1,10 @@
 'use client';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import * as select from '@zag-js/select';
-import { useId } from 'react';
+import { useMemo, useId } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import '../environment/index.mjs';
+import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useSelect = (props) => {
@@ -13,11 +14,14 @@ const useSelect = (props) => {
     "itemToString",
     "items"
   ]);
-  const collection = select.collection(collectionOptions);
-  const getRootNode = useEnvironmentContext();
+  const collection = useMemo(
+    () => select.collection(collectionOptions),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    Object.values(collectionOptions)
+  );
   const initialContext = {
     id: useId(),
-    getRootNode,
+    getRootNode: useEnvironmentContext(),
     collection,
     ...rest,
     value: props.defaultValue
@@ -25,7 +29,10 @@ const useSelect = (props) => {
   const context = {
     ...initialContext,
     collection,
-    value: props.value
+    value: props.value,
+    onValueChange: useEvent(props.onValueChange, { sync: true }),
+    onHighlightChange: useEvent(props.onHighlightChange),
+    onOpenChange: useEvent(props.onOpenChange)
   };
   const [state, send] = useMachine(select.machine(initialContext), {
     context

package/setup-test.d.ts

@@ -0,0 +1,3 @@
+import type { AnatomyInstance } from '@ark-ui/anatomy';
+export declare const getParts: (anatomy: AnatomyInstance<string>) => string[];
+export declare const getExports: <T extends string>(anatomy: AnatomyInstance<T>) => Capitalize<T>[];

package/slider/index.cjs

@@ -3,7 +3,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const slider$1 = require('./slider.cjs');
+const slider = require('./slider.cjs');
 const sliderContext = require('./slider-context.cjs');
 const sliderControl = require('./slider-control.cjs');
 const sliderLabel = require('./slider-label.cjs');
@@ -13,10 +13,9 @@ const sliderOutput = require('./slider-output.cjs');
 const sliderRange = require('./slider-range.cjs');
 const sliderThumb = require('./slider-thumb.cjs');
 const sliderTrack = require('./slider-track.cjs');
-const slider = require('@zag-js/slider');
 
-const Slider = Object.assign(slider$1.Slider, {
-  Root: slider$1.Slider,
+const Slider = Object.assign(slider.Slider, {
+  Root: slider.Slider,
   Control: sliderControl.SliderControl,
   Label: sliderLabel.SliderLabel,
   Marker: sliderMarker.SliderMarker,
@@ -36,8 +35,4 @@ exports.SliderOutput = sliderOutput.SliderOutput;
 exports.SliderRange = sliderRange.SliderRange;
 exports.SliderThumb = sliderThumb.SliderThumb;
 exports.SliderTrack = sliderTrack.SliderTrack;
-Object.defineProperty(exports, 'sliderAnatomy', {
-  enumerable: true,
-  get: () => slider.anatomy
-});
 exports.Slider = Slider;

package/slider/index.d.ts

@@ -1,10 +1,7 @@
-import { UseSliderProps, UseSliderReturn } from './use-slider';
-import { HTMLArkProps } from '..';
-import { Assign } from '../types';
-import { ForwardRefExoticComponent, ReactNode, RefAttributes, DetailedHTMLProps, HTMLAttributes, LabelHTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type SliderProps } from './slider';
-import { useSliderContext } from './slider-context';
+import { useSliderContext, type SliderContext } from './slider-context';
 import { SliderControl, type SliderControlProps } from './slider-control';
 import { SliderLabel, type SliderLabelProps } from './slider-label';
 import { SliderMarker, type SliderMarkerProps } from './slider-marker';
@@ -13,37 +10,16 @@ import { SliderOutput, type SliderOutputProps } from './slider-output';
 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<HTMLArkProps<"div">, UseSliderProps>, "children"> & {
-    children?: ReactNode | ((context: UseSliderReturn) => ReactNode);
-} & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<Omit<Assign<HTMLArkProps<"div">, UseSliderProps>, "children"> & {
-        children?: ReactNode | ((context: UseSliderReturn) => ReactNode);
-    } & RefAttributes<HTMLDivElement>>;
-    Control: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    Label: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLLabelElement>>;
-    Marker: ForwardRefExoticComponent<Omit<HTMLArkProps<"span">, "value"> & {
-        value: number;
-    } & RefAttributes<HTMLSpanElement>>;
-    MarkerGroup: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    Output: ForwardRefExoticComponent<Omit<HTMLArkProps<"output">, "children"> & {
-        children?: ReactNode | ((context: UseSliderReturn) => ReactNode);
-    } & RefAttributes<HTMLOutputElement>>;
-    Range: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    Thumb: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    Track: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
+declare const Slider: ForwardRefExoticComponent<SliderProps & RefAttributes<HTMLDivElement>> & {
+    Root: ForwardRefExoticComponent<SliderProps & RefAttributes<HTMLDivElement>>;
+    Control: ForwardRefExoticComponent<SliderControlProps & RefAttributes<HTMLDivElement>>;
+    Label: ForwardRefExoticComponent<SliderLabelProps & RefAttributes<HTMLLabelElement>>;
+    Marker: ForwardRefExoticComponent<SliderMarkerProps & RefAttributes<HTMLSpanElement>>;
+    MarkerGroup: ForwardRefExoticComponent<SliderMarkerGroupProps & RefAttributes<HTMLDivElement>>;
+    Output: ForwardRefExoticComponent<SliderOutputProps & RefAttributes<HTMLOutputElement>>;
+    Range: ForwardRefExoticComponent<SliderRangeProps & RefAttributes<HTMLDivElement>>;
+    Thumb: ForwardRefExoticComponent<SliderThumbProps & RefAttributes<HTMLDivElement>>;
+    Track: ForwardRefExoticComponent<SliderTrackProps & 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, };
+export { Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderOutput, SliderRange, SliderThumb, SliderTrack, useSliderContext, };
+export type { SliderContext, SliderControlProps, SliderLabelProps, SliderMarkerGroupProps, SliderMarkerProps, SliderOutputProps, SliderProps, SliderRangeProps, SliderThumbProps, SliderTrackProps, };

package/slider/index.mjs

@@ -9,7 +9,6 @@ import { SliderOutput } from './slider-output.mjs';
 import { SliderRange } from './slider-range.mjs';
 import { SliderThumb } from './slider-thumb.mjs';
 import { SliderTrack } from './slider-track.mjs';
-export { anatomy as sliderAnatomy } from '@zag-js/slider';
 
 const Slider = Object.assign(Slider$1, {
   Root: Slider$1,

package/slider/slider-context.d.ts

@@ -1,5 +1,6 @@
 import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseSliderReturn } from './use-slider';
-export type SliderContext = UseSliderReturn;
-export declare const SliderProvider: Provider<UseSliderReturn>, useSliderContext: () => UseSliderReturn;
+export interface SliderContext extends UseSliderReturn {
+}
+export declare const SliderProvider: Provider<SliderContext>, useSliderContext: () => SliderContext;

package/slider/slider-control.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const sliderContext = require('./slider-context.cjs');
 
 const SliderControl = react.forwardRef((props, ref) => {
-  const { controlProps } = sliderContext.useSliderContext();
-  const mergedProps = react$1.mergeProps(controlProps, props);
+  const api = sliderContext.useSliderContext();
+  const mergedProps = react$1.mergeProps(api.controlProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 SliderControl.displayName = "SliderControl";

package/slider/slider-control.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, 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;
-} & RefAttributes<HTMLDivElement>>;
+export interface SliderControlProps extends HTMLArkProps<'div'> {
+}
+export declare const SliderControl: ForwardRefExoticComponent<SliderControlProps & RefAttributes<HTMLDivElement>>;

package/slider/slider-control.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
 const SliderControl = forwardRef((props, ref) => {
-  const { controlProps } = useSliderContext();
-  const mergedProps = mergeProps(controlProps, props);
+  const api = useSliderContext();
+  const mergedProps = mergeProps(api.controlProps, props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 SliderControl.displayName = "SliderControl";

package/slider/slider-label.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const sliderContext = require('./slider-context.cjs');
 
 const SliderLabel = react.forwardRef((props, ref) => {
-  const { labelProps } = sliderContext.useSliderContext();
-  const mergedProps = react$1.mergeProps(labelProps, props);
+  const api = sliderContext.useSliderContext();
+  const mergedProps = react$1.mergeProps(api.labelProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
 });
 SliderLabel.displayName = "SliderLabel";

package/slider/slider-label.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, 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;
-} & RefAttributes<HTMLLabelElement>>;
+export interface SliderLabelProps extends HTMLArkProps<'label'> {
+}
+export declare const SliderLabel: ForwardRefExoticComponent<SliderLabelProps & RefAttributes<HTMLLabelElement>>;

package/slider/slider-label.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
 const SliderLabel = forwardRef((props, ref) => {
-  const { labelProps } = useSliderContext();
-  const mergedProps = mergeProps(labelProps, props);
+  const api = useSliderContext();
+  const mergedProps = mergeProps(api.labelProps, props);
   return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
 });
 SliderLabel.displayName = "SliderLabel";

package/slider/slider-marker-group.cjs

@@ -11,8 +11,8 @@ const sliderContext = require('./slider-context.cjs');
 
 const SliderMarkerGroup = react.forwardRef(
   (props, ref) => {
-    const { markerGroupProps } = sliderContext.useSliderContext();
-    const mergedProps = react$1.mergeProps(markerGroupProps, props);
+    const api = sliderContext.useSliderContext();
+    const mergedProps = react$1.mergeProps(api.markerGroupProps, props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );

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

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, 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;
-} & RefAttributes<HTMLDivElement>>;
+export interface SliderMarkerGroupProps extends HTMLArkProps<'div'> {
+}
+export declare const SliderMarkerGroup: ForwardRefExoticComponent<SliderMarkerGroupProps & RefAttributes<HTMLDivElement>>;

package/slider/slider-marker-group.mjs

@@ -7,8 +7,8 @@ import { useSliderContext } from './slider-context.mjs';
 
 const SliderMarkerGroup = forwardRef(
   (props, ref) => {
-    const { markerGroupProps } = useSliderContext();
-    const mergedProps = mergeProps(markerGroupProps, props);
+    const api = useSliderContext();
+    const mergedProps = mergeProps(api.markerGroupProps, props);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );