@ark-ui/react 0.13.1 → 0.15.0-beta.0

package/radio-group/radio-control.cjs

@@ -11,13 +11,10 @@ const radioContext = require('./radio-context.cjs');
 const radioGroupContext = require('./radio-group-context.cjs');
 
 const RadioControl = react.forwardRef((props, ref) => {
-  const { getRadioControlProps, getRadioHiddenInputProps } = radioGroupContext.useRadioGroupContext();
-  const context = radioContext.useRadioContext();
-  const mergedProps = react$1.mergeProps(getRadioControlProps(context), props);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }),
-    /* @__PURE__ */ jsxRuntime.jsx("input", { ...getRadioHiddenInputProps(context) })
-  ] });
+  const api = radioGroupContext.useRadioGroupContext();
+  const radioProps = radioContext.useRadioContext();
+  const mergedProps = react$1.mergeProps(api.getRadioControlProps(radioProps), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 RadioControl.displayName = "RadioControl";
 

package/radio-group/radio-control.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type RadioControlProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const RadioControl: 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 RadioControlProps = HTMLArkProps<'div'>;
+export declare const RadioControl: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/radio-group/radio-control.mjs

@@ -1,5 +1,5 @@
 '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';
@@ -7,13 +7,10 @@ import { useRadioContext } from './radio-context.mjs';
 import { useRadioGroupContext } from './radio-group-context.mjs';
 
 const RadioControl = forwardRef((props, ref) => {
-  const { getRadioControlProps, getRadioHiddenInputProps } = useRadioGroupContext();
-  const context = useRadioContext();
-  const mergedProps = mergeProps(getRadioControlProps(context), props);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }),
-    /* @__PURE__ */ jsx("input", { ...getRadioHiddenInputProps(context) })
-  ] });
+  const api = useRadioGroupContext();
+  const radioProps = useRadioContext();
+  const mergedProps = mergeProps(api.getRadioControlProps(radioProps), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 RadioControl.displayName = "RadioControl";
 

package/radio-group/radio-group-context.d.ts

@@ -1,12 +1,5 @@
-import { PublicApi } from '@zag-js/radio-group';
-import { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseRadioGroupReturn } from './use-radio-group';
 export type RadioGroupContext = UseRadioGroupReturn;
-export declare const RadioGroupProvider: Provider<PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>>, useRadioGroupContext: () => PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export declare const RadioGroupProvider: Provider<UseRadioGroupReturn>, useRadioGroupContext: () => UseRadioGroupReturn;

package/radio-group/radio-group-label.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type RadioGroupLabelProps = ComponentPropsWithoutRef<typeof ark.label>;
-export declare const RadioGroupLabel: 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 RadioGroupLabelProps = HTMLArkProps<'label'>;
+export declare const RadioGroupLabel: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLLabelElement>>;
+} & RefAttributes<HTMLLabelElement>>;

package/radio-group/radio-group.cjs

@@ -23,7 +23,6 @@ const RadioGroup = react.forwardRef((props, ref) => {
     "name",
     "onChange",
     "orientation",
-    "readOnly",
     "value"
   ]);
   const radioGroup = useRadioGroup.useRadioGroup(useRadioGroupProps);

package/radio-group/radio-group.d.ts

@@ -1,13 +1,7 @@
-import { Context } from '@zag-js/radio-group';
-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';
 import { type UseRadioGroupProps } from './use-radio-group';
-export type RadioGroupProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, UseRadioGroupProps>;
-export declare const RadioGroup: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "orientation" | "onChange" | "defaultValue" | "dir" | "readOnly"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-    defaultValue?: string | null | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export type RadioGroupProps = Assign<HTMLArkProps<'div'>, UseRadioGroupProps>;
+export declare const RadioGroup: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseRadioGroupProps> & UseRadioGroupProps & RefAttributes<HTMLDivElement>>;

package/radio-group/radio-group.mjs

@@ -19,7 +19,6 @@ const RadioGroup = forwardRef((props, ref) => {
     "name",
     "onChange",
     "orientation",
-    "readOnly",
     "value"
   ]);
   const radioGroup = useRadioGroup(useRadioGroupProps);

package/radio-group/radio-label.d.ts

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

package/radio-group/radio.cjs

@@ -6,15 +6,23 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
+const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const radioContext = require('./radio-context.cjs');
 const radioGroupContext = require('./radio-group-context.cjs');
 
 const Radio = react.forwardRef((props, ref) => {
-  const { value, disabled, invalid, readOnly, ...divProps } = props;
-  const { getRadioProps } = radioGroupContext.useRadioGroupContext();
-  const mergedProps = react$1.mergeProps(getRadioProps({ value, disabled }), divProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(radioContext.RadioProvider, { value: { value, disabled, invalid, readOnly }, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref }) });
+  const [radioProps, localProps] = createSplitProps.createSplitProps()(props, [
+    "value",
+    "disabled",
+    "invalid"
+  ]);
+  const api = radioGroupContext.useRadioGroupContext();
+  const mergedProps = react$1.mergeProps(api.getRadioProps(radioProps), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsxs(radioContext.RadioProvider, { value: props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.getRadioHiddenInputProps(radioProps) })
+  ] });
 });
 Radio.displayName = "Radio";
 

package/radio-group/radio.d.ts

@@ -1,20 +1,8 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { RadioProps } from '@zag-js/radio-group';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type RadioContext } from './radio-context';
-export type RadioProps = Assign<ComponentPropsWithoutRef<typeof ark.label>, RadioContext>;
-export declare const Radio: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-    ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, keyof {
-    value: string;
-    disabled?: boolean | undefined;
-    readOnly?: boolean | undefined;
-    invalid?: boolean | undefined;
-}> & {
-    value: string;
-    disabled?: boolean | undefined;
-    readOnly?: boolean | undefined;
-    invalid?: boolean | undefined;
-} & RefAttributes<HTMLLabelElement>>;
+export type RadioProps = Assign<HTMLArkProps<'label'>, RadioContext>;
+export declare const Radio: ForwardRefExoticComponent<Omit<HTMLArkProps<"label">, keyof RadioProps> & RadioProps & RefAttributes<HTMLLabelElement>>;

package/radio-group/radio.mjs

@@ -1,16 +1,24 @@
 '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';
 import { ark } from '../factory.mjs';
 import { RadioProvider } from './radio-context.mjs';
 import { useRadioGroupContext } from './radio-group-context.mjs';
 
 const Radio = forwardRef((props, ref) => {
-  const { value, disabled, invalid, readOnly, ...divProps } = props;
-  const { getRadioProps } = useRadioGroupContext();
-  const mergedProps = mergeProps(getRadioProps({ value, disabled }), divProps);
-  return /* @__PURE__ */ jsx(RadioProvider, { value: { value, disabled, invalid, readOnly }, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref }) });
+  const [radioProps, localProps] = createSplitProps()(props, [
+    "value",
+    "disabled",
+    "invalid"
+  ]);
+  const api = useRadioGroupContext();
+  const mergedProps = mergeProps(api.getRadioProps(radioProps), localProps);
+  return /* @__PURE__ */ jsxs(RadioProvider, { value: props, children: [
+    /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref }),
+    /* @__PURE__ */ jsx("input", { ...api.getRadioHiddenInputProps(radioProps) })
+  ] });
 });
 Radio.displayName = "Radio";
 

package/radio-group/use-radio-group.d.ts

@@ -1,12 +1,7 @@
-import { HTMLAttributes, CSSProperties } from 'react';
-/// <reference types="react" />
 import * as radio from '@zag-js/radio-group';
 import { type Optional } from '../types';
-export type UseRadioGroupProps = Optional<radio.Context, 'id'> & {
+export interface UseRadioGroupProps extends Optional<radio.Context, 'id'> {
     defaultValue?: radio.Context['value'];
-};
-export type UseRadioGroupReturn = ReturnType<typeof useRadioGroup>;
-export declare const useRadioGroup: (props: UseRadioGroupProps) => radio.PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+}
+export type UseRadioGroupReturn = radio.Api;
+export declare const useRadioGroup: (props: UseRadioGroupProps) => UseRadioGroupReturn;

package/range-slider/index.d.ts

@@ -1,8 +1,9 @@
-import { Context, PublicApi } from '@zag-js/range-slider';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, CSSProperties, RefAttributes, LabelHTMLAttributes, OutputHTMLAttributes } from 'react';
+import { UseRangeSliderProps, UseRangeSliderReturn } from './use-range-slider';
+import { HTMLArkProps } from '..';
+import { ForwardRefExoticComponent, ReactNode, RefAttributes, DetailedHTMLProps, HTMLAttributes, LabelHTMLAttributes } from 'react';
 /// <reference types="react" />
 import { type RangeSliderProps } from './range-slider';
-import { useRangeSliderContext } from './range-slider-context';
+import { useRangeSliderContext, type RangeSliderContext } from './range-slider-context';
 import { RangeSliderControl, type RangeSliderControlProps } from './range-slider-control';
 import { RangeSliderLabel, type RangeSliderLabelProps } from './range-slider-label';
 import { RangeSliderMarker, type RangeSliderMarkerProps } from './range-slider-marker';
@@ -12,79 +13,36 @@ import { RangeSliderRange, type RangeSliderRangeProps } from './range-slider-ran
 import { RangeSliderThumb, type RangeSliderThumbProps } from './range-slider-thumb';
 import { RangeSliderTrack, type RangeSliderTrackProps } from './range-slider-track';
 import { rangeSliderAnatomy } from './range-slider.anatomy';
-declare const RangeSlider: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "children" | "getRootNode" | "form" | "id" | "ids" | "aria-label" | "disabled" | "max" | "min" | "orientation" | "aria-labelledby" | "onChange" | "defaultValue" | "dir" | "readOnly" | "step" | "invalid" | "onChangeEnd" | "onChangeStart" | "getAriaValueText" | "minStepsBetweenThumbs" | "thumbAlignment"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-    defaultValue?: number[] | undefined;
-} & {
-    children?: ReactNode | ((api: PublicApi<JSX.IntrinsicElements & {
-        element: HTMLAttributes<HTMLElement>;
-        style: CSSProperties;
-    }>) => ReactNode);
+declare const RangeSlider: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "children" | keyof UseRangeSliderProps> & UseRangeSliderProps & {
+    children?: ReactNode | ((api: UseRangeSliderReturn) => ReactNode);
 } & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, "name" | "value" | "children" | "getRootNode" | "form" | "id" | "ids" | "aria-label" | "disabled" | "max" | "min" | "orientation" | "aria-labelledby" | "onChange" | "defaultValue" | "dir" | "readOnly" | "step" | "invalid" | "onChangeEnd" | "onChangeStart" | "getAriaValueText" | "minStepsBetweenThumbs" | "thumbAlignment"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-        defaultValue?: number[] | undefined;
-    } & {
-        children?: ReactNode | ((api: PublicApi<JSX.IntrinsicElements & {
-            element: HTMLAttributes<HTMLElement>;
-            style: CSSProperties;
-        }>) => ReactNode);
+    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "children" | keyof UseRangeSliderProps> & UseRangeSliderProps & {
+        children?: ReactNode | ((api: UseRangeSliderReturn) => 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"> & {
-        children?: ReactNode | ((api: PublicApi<JSX.IntrinsicElements & {
-            element: HTMLAttributes<HTMLElement>;
-            style: CSSProperties;
-        }>) => ReactNode);
+    } & RefAttributes<HTMLDivElement>>;
+    Output: ForwardRefExoticComponent<Omit<HTMLArkProps<"output">, "children"> & {
+        children?: ReactNode | ((api: UseRangeSliderReturn) => ReactNode);
     } & RefAttributes<HTMLOutputElement>>;
-    Range: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    Thumb: ForwardRefExoticComponent<Omit<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">, "index"> & {
+    } & RefAttributes<HTMLDivElement>>;
+    Thumb: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "index"> & {
         index: number;
     } & RefAttributes<HTMLDivElement>>;
-    Track: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    Track: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
+    } & RefAttributes<HTMLDivElement>>;
 };
 export { RangeSlider, RangeSliderControl, RangeSliderLabel, RangeSliderMarker, RangeSliderMarkerGroup, RangeSliderOutput, RangeSliderRange, RangeSliderThumb, RangeSliderTrack, rangeSliderAnatomy, useRangeSliderContext, };
-export type { RangeSliderControlProps, RangeSliderLabelProps, RangeSliderMarkerGroupProps, RangeSliderMarkerProps, RangeSliderOutputProps, RangeSliderProps, RangeSliderRangeProps, RangeSliderThumbProps, RangeSliderTrackProps, };
+export type { RangeSliderContext, RangeSliderControlProps, RangeSliderLabelProps, RangeSliderMarkerGroupProps, RangeSliderMarkerProps, RangeSliderOutputProps, RangeSliderProps, RangeSliderRangeProps, RangeSliderThumbProps, RangeSliderTrackProps, };

package/range-slider/range-slider-context.d.ts

@@ -1,12 +1,5 @@
-import { PublicApi } from '@zag-js/range-slider';
-import { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseRangeSliderReturn } from './use-range-slider';
 export type RangeSliderContext = UseRangeSliderReturn;
-export declare const RangeSliderProvider: Provider<PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>>, useRangeSliderContext: () => PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export declare const RangeSliderProvider: Provider<UseRangeSliderReturn>, useRangeSliderContext: () => UseRangeSliderReturn;

package/range-slider/range-slider-control.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type RangeSliderControlProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const RangeSliderControl: 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 RangeSliderControlProps = HTMLArkProps<'div'>;
+export declare const RangeSliderControl: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/range-slider/range-slider-label.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type RangeSliderLabelProps = ComponentPropsWithoutRef<typeof ark.label>;
-export declare const RangeSliderLabel: 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 RangeSliderLabelProps = HTMLArkProps<'label'>;
+export declare const RangeSliderLabel: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLLabelElement>>;
+} & RefAttributes<HTMLLabelElement>>;

package/range-slider/range-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 RangeSliderMarkerGroupProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const RangeSliderMarkerGroup: 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 RangeSliderMarkerGroupProps = HTMLArkProps<'div'>;
+export declare const RangeSliderMarkerGroup: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/range-slider/range-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 RangeSliderMarkerProps = Assign<ComponentPropsWithoutRef<typeof ark.span>, {
+export type RangeSliderMarkerProps = Assign<HTMLArkProps<'span'>, {
     value: number;
 }>;
-export declare const RangeSliderMarker: 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 RangeSliderMarker: ForwardRefExoticComponent<Omit<HTMLArkProps<"span">, "value"> & {
     value: number;
 } & RefAttributes<HTMLSpanElement>>;

package/range-slider/range-slider-output.d.ts

@@ -1,14 +1,10 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, OutputHTMLAttributes, 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 UseRangeSliderReturn } from './use-range-slider';
-export type RangeSliderOutputProps = Assign<ComponentPropsWithoutRef<typeof ark.output>, {
+export type RangeSliderOutputProps = Assign<HTMLArkProps<'output'>, {
     children?: ((api: UseRangeSliderReturn) => ReactNode) | ReactNode;
 }>;
-export declare const RangeSliderOutput: 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 RangeSliderOutput: ForwardRefExoticComponent<Omit<HTMLArkProps<"output">, "children"> & {
     children?: ReactNode | ((api: UseRangeSliderReturn) => ReactNode);
 } & RefAttributes<HTMLOutputElement>>;

package/range-slider/range-slider-range.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type RangeSliderRangeProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const RangeSliderRange: 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 RangeSliderRangeProps = HTMLArkProps<'div'>;
+export declare const RangeSliderRange: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/range-slider/range-slider-thumb.cjs

@@ -10,12 +10,12 @@ const factory = require('../factory.cjs');
 const rangeSliderContext = require('./range-slider-context.cjs');
 
 const RangeSliderThumb = react.forwardRef((props, ref) => {
-  const { index, ...divProps } = props;
-  const { getThumbProps, getHiddenInputProps } = rangeSliderContext.useRangeSliderContext();
-  const mergedProps = react$1.mergeProps(getThumbProps(index), divProps);
+  const { index, ...localProps } = props;
+  const api = rangeSliderContext.useRangeSliderContext();
+  const mergedProps = react$1.mergeProps(api.getThumbProps(index), localProps);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: props.children }),
-    /* @__PURE__ */ jsxRuntime.jsx("input", { ...getHiddenInputProps(index) })
+    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.getHiddenInputProps(index) })
   ] });
 });
 RangeSliderThumb.displayName = "RangeSliderThumb";

package/range-slider/range-slider-thumb.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 RangeSliderThumbProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, {
+export type RangeSliderThumbProps = Assign<HTMLArkProps<'div'>, {
     index: number;
 }>;
-export declare const RangeSliderThumb: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "index"> & {
+export declare const RangeSliderThumb: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "index"> & {
     index: number;
 } & RefAttributes<HTMLDivElement>>;

package/range-slider/range-slider-thumb.mjs

@@ -6,12 +6,12 @@ import { ark } from '../factory.mjs';
 import { useRangeSliderContext } from './range-slider-context.mjs';
 
 const RangeSliderThumb = forwardRef((props, ref) => {
-  const { index, ...divProps } = props;
-  const { getThumbProps, getHiddenInputProps } = useRangeSliderContext();
-  const mergedProps = mergeProps(getThumbProps(index), divProps);
+  const { index, ...localProps } = props;
+  const api = useRangeSliderContext();
+  const mergedProps = mergeProps(api.getThumbProps(index), localProps);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: props.children }),
-    /* @__PURE__ */ jsx("input", { ...getHiddenInputProps(index) })
+    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }),
+    /* @__PURE__ */ jsx("input", { ...api.getHiddenInputProps(index) })
   ] });
 });
 RangeSliderThumb.displayName = "RangeSliderThumb";

package/range-slider/range-slider-track.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type RangeSliderTrackProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const RangeSliderTrack: 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 RangeSliderTrackProps = HTMLArkProps<'div'>;
+export declare const RangeSliderTrack: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/range-slider/range-slider.cjs

@@ -34,10 +34,13 @@ const RangeSlider = react.forwardRef((props, ref) => {
       "onChange",
       "onChangeEnd",
       "onChangeStart",
+      "onFocusChange",
       "orientation",
       "readOnly",
       "step",
       "thumbAlignment",
+      "thumbAlignment",
+      "thumbSize",
       "value"
     ]
   );