@ark-ui/react 0.14.0 → 0.15.0

package/pressable/index.d.ts

@@ -1,30 +1,10 @@
-import { PressEvent, Context } from '@zag-js/pressable';
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes } from 'react';
+import { HTMLArkProps } from '..';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type PressableProps } from './pressable';
 import { usePressable, type UsePressableProps, type UsePressableReturn } from './use-pressable';
-declare const Pressable: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "getRootNode" | "id" | "disabled" | "dir" | keyof {
-    onPress?: ((event: PressEvent) => void) | undefined;
-    onPressStart?: ((event: PressEvent) => void) | undefined;
-    onPressEnd?: ((event: PressEvent) => void) | undefined;
-    onPressUp?: ((event: PressEvent) => void) | undefined;
-    onLongPress?: ((event: PressEvent) => void) | undefined;
-} | "preventFocusOnPress" | "cancelOnPointerExit" | "allowTextSelectionOnPress" | "longPressDelay"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & RefAttributes<HTMLButtonElement>> & {
-    Root: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, "getRootNode" | "id" | "disabled" | "dir" | keyof {
-        onPress?: ((event: PressEvent) => void) | undefined;
-        onPressStart?: ((event: PressEvent) => void) | undefined;
-        onPressEnd?: ((event: PressEvent) => void) | undefined;
-        onPressUp?: ((event: PressEvent) => void) | undefined;
-        onLongPress?: ((event: PressEvent) => void) | undefined;
-    } | "preventFocusOnPress" | "cancelOnPointerExit" | "allowTextSelectionOnPress" | "longPressDelay"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & RefAttributes<HTMLButtonElement>>;
+declare const Pressable: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof UsePressableProps> & UsePressableProps & RefAttributes<HTMLButtonElement>> & {
+    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof UsePressableProps> & UsePressableProps & RefAttributes<HTMLButtonElement>>;
 };
 export { Pressable, usePressable };
 export type { PressableProps, UsePressableProps, UsePressableReturn };

package/pressable/pressable.d.ts

@@ -1,17 +1,7 @@
-import { PressEvent, Context } from '@zag-js/pressable';
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, 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 UsePressableProps } from './use-pressable';
-export type PressableProps = Assign<ComponentPropsWithoutRef<typeof ark.button>, UsePressableProps>;
-export declare const Pressable: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "getRootNode" | "id" | "disabled" | "dir" | keyof {
-    onPress?: ((event: PressEvent) => void) | undefined;
-    onPressStart?: ((event: PressEvent) => void) | undefined;
-    onPressEnd?: ((event: PressEvent) => void) | undefined;
-    onPressUp?: ((event: PressEvent) => void) | undefined;
-    onLongPress?: ((event: PressEvent) => void) | undefined;
-} | "preventFocusOnPress" | "cancelOnPointerExit" | "allowTextSelectionOnPress" | "longPressDelay"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & RefAttributes<HTMLButtonElement>>;
+export type PressableProps = Assign<HTMLArkProps<'button'>, UsePressableProps>;
+export declare const Pressable: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof UsePressableProps> & UsePressableProps & RefAttributes<HTMLButtonElement>>;

package/pressable/use-pressable.d.ts

@@ -1,5 +1,6 @@
 import * as pressable from '@zag-js/pressable';
 import { type Optional } from '../types';
-export type UsePressableProps = Optional<pressable.Context, 'id'>;
+export interface UsePressableProps extends Optional<pressable.Context, 'id'> {
+}
 export type UsePressableReturn = pressable.Api;
 export declare const usePressable: (props?: UsePressableProps) => UsePressableReturn;

package/radio-group/index.d.ts

@@ -1,58 +1,28 @@
-import { Context } from '@zag-js/radio-group';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, LabelHTMLAttributes } from 'react';
+import { RadioProps } from '@zag-js/radio-group';
+import { UseRadioGroupProps } from './use-radio-group';
+import { HTMLArkProps } from '..';
+import { ForwardRefExoticComponent, RefAttributes, DetailedHTMLProps, LabelHTMLAttributes, HTMLAttributes } from 'react';
 /// <reference types="react" />
 import { Radio, type RadioProps } from './radio';
-import { useRadioContext } from './radio-context';
+import { useRadioContext, type RadioContext } from './radio-context';
 import { RadioControl, type RadioControlProps } from './radio-control';
 import { type RadioGroupProps } from './radio-group';
-import { useRadioGroupContext } from './radio-group-context';
+import { useRadioGroupContext, type RadioGroupContext } from './radio-group-context';
 import { RadioGroupLabel, type RadioGroupLabelProps } from './radio-group-label';
 import { radioGroupAnatomy } from './radio-group.anatomy';
 import { RadioLabel, type RadioLabelProps } from './radio-label';
-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" | "defaultValue" | "dir" | "onChange" | "readOnly" | "orientation"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-    defaultValue?: string | null | undefined;
-} & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+declare const RadioGroup: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseRadioGroupProps> & UseRadioGroupProps & RefAttributes<HTMLDivElement>> & {
+    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseRadioGroupProps> & UseRadioGroupProps & RefAttributes<HTMLDivElement>>;
+    Label: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "defaultValue" | "dir" | "onChange" | "readOnly" | "orientation"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-        defaultValue?: string | null | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    Label: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-        ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLLabelElement>>;
-    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>>;
-    RadioLabel: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        ref?: RefObject<HTMLSpanElement> | ((instance: HTMLSpanElement | null) => void) | null | undefined;
-    } & {
+    Radio: ForwardRefExoticComponent<Omit<HTMLArkProps<"label">, keyof RadioProps> & RadioProps & RefAttributes<HTMLLabelElement>>;
+    RadioLabel: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLSpanElement>>;
-    RadioControl: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLSpanElement>>;
+    RadioControl: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
+    } & RefAttributes<HTMLDivElement>>;
 };
 export { Radio, RadioControl, RadioGroup, RadioGroupLabel, RadioLabel, radioGroupAnatomy, useRadioContext, useRadioGroupContext, };
-export type { RadioControlProps, RadioGroupLabelProps, RadioGroupProps, RadioLabelProps, RadioProps, };
+export type { RadioContext, RadioControlProps, RadioGroupContext, RadioGroupLabelProps, RadioGroupProps, RadioLabelProps, RadioProps, };

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

@@ -1,15 +1,5 @@
 import { Provider } from 'react';
 /// <reference types="react" />
-import { type connect } from '@zag-js/radio-group';
+import { RadioProps, type connect } from '@zag-js/radio-group';
 export type RadioContext = Parameters<ReturnType<typeof connect>['getRadioProps']>[0];
-export declare const RadioProvider: Provider<{
-    value: string;
-    disabled?: boolean | undefined;
-    readOnly?: boolean | undefined;
-    invalid?: boolean | undefined;
-}>, useRadioContext: () => {
-    value: string;
-    disabled?: boolean | undefined;
-    readOnly?: boolean | undefined;
-    invalid?: boolean | undefined;
-};
+export declare const RadioProvider: Provider<RadioProps>, useRadioContext: () => RadioProps;

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-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" | "defaultValue" | "dir" | "onChange" | "readOnly" | "orientation"> & 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,7 +1,7 @@
 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 = radio.Api;
 export declare const useRadioGroup: (props: UseRadioGroupProps) => UseRadioGroupReturn;

package/range-slider/index.d.ts

@@ -1,9 +1,9 @@
-import { UseRangeSliderReturn } from './use-range-slider';
-import { Context } from '@zag-js/range-slider';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, 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';
@@ -13,70 +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" | "defaultValue" | "dir" | "aria-labelledby" | "onChange" | "max" | "min" | "readOnly" | "step" | "orientation" | "onFocusChange" | "invalid" | "onChangeEnd" | "onChangeStart" | "getAriaValueText" | "minStepsBetweenThumbs" | "thumbAlignment" | "thumbSize"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-    defaultValue?: number[] | undefined;
-} & {
+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" | "defaultValue" | "dir" | "aria-labelledby" | "onChange" | "max" | "min" | "readOnly" | "step" | "orientation" | "onFocusChange" | "invalid" | "onChangeEnd" | "onChangeStart" | "getAriaValueText" | "minStepsBetweenThumbs" | "thumbAlignment" | "thumbSize"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-        defaultValue?: number[] | undefined;
-    } & {
+    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"> & {
+    } & 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-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>>;