@ark-ui/react 0.14.0 → 0.15.0

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.d.ts

@@ -1,17 +1,10 @@
-import { Context } from '@zag-js/range-slider';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type UseRangeSliderProps, type UseRangeSliderReturn } from './use-range-slider';
-export type RangeSliderProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, UseRangeSliderProps & {
+export type RangeSliderProps = Assign<HTMLArkProps<'div'>, UseRangeSliderProps & {
     children?: ((api: UseRangeSliderReturn) => ReactNode) | ReactNode;
 }>;
-export 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;
-} & {
+export declare const RangeSlider: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "children" | keyof UseRangeSliderProps> & UseRangeSliderProps & {
     children?: ReactNode | ((api: UseRangeSliderReturn) => ReactNode);
 } & RefAttributes<HTMLDivElement>>;

package/range-slider/use-range-slider.cjs

@@ -7,6 +7,7 @@ const rangeSlider = require('@zag-js/range-slider');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 require('../environment/index.cjs');
+const useEvent = require('../use-event.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -38,7 +39,8 @@ const useRangeSlider = (props) => {
   };
   const context = {
     ...initialContext,
-    value: props.value
+    value: props.value,
+    onChange: useEvent.useEvent(props.onChange, { sync: true })
   };
   const [state, send] = react$1.useMachine(rangeSlider__namespace.machine(initialContext), {
     context

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

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

package/range-slider/use-range-slider.mjs

@@ -3,6 +3,7 @@ import * as rangeSlider from '@zag-js/range-slider';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
 import '../environment/index.mjs';
+import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useRangeSlider = (props) => {
@@ -15,7 +16,8 @@ const useRangeSlider = (props) => {
   };
   const context = {
     ...initialContext,
-    value: props.value
+    value: props.value,
+    onChange: useEvent(props.onChange, { sync: true })
   };
   const [state, send] = useMachine(rangeSlider.machine(initialContext), {
     context

package/rating-group/index.d.ts

@@ -1,6 +1,7 @@
-import { UseRatingGroupReturn } from './use-rating-group';
-import { Context, ItemProps, ItemState } from '@zag-js/rating-group';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, ReactNode, LabelHTMLAttributes } from 'react';
+import { ItemProps, ItemState } from '@zag-js/rating-group';
+import { UseRatingGroupProps, UseRatingGroupReturn } from './use-rating-group';
+import { HTMLArkProps } from '..';
+import { ForwardRefExoticComponent, RefAttributes, ReactNode, DetailedHTMLProps, LabelHTMLAttributes } from 'react';
 /// <reference types="react" />
 import { Rating, type RatingProps } from './rating';
 import { useRatingContext } from './rating-context';
@@ -9,37 +10,15 @@ import { useRatingGroupContext } from './rating-group-context';
 import { RatingGroupControl, type RatingGroupControlProps } from './rating-group-control';
 import { RatingGroupLabel, type RatingGroupLabelProps } from './rating-group-label';
 import { ratingGroupAnatomy } from './rating-group.anatomy';
-declare const RatingGroup: 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" | "autoFocus" | "dir" | "onChange" | "max" | "readOnly" | "translations" | "allowHalf" | "onHover"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-    defaultValue?: number | undefined;
-} & 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" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "defaultValue" | "autoFocus" | "dir" | "onChange" | "max" | "readOnly" | "translations" | "allowHalf" | "onHover"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-        defaultValue?: number | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    Control: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, "children"> & {
+declare const RatingGroup: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseRatingGroupProps> & UseRatingGroupProps & RefAttributes<HTMLDivElement>> & {
+    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseRatingGroupProps> & UseRatingGroupProps & RefAttributes<HTMLDivElement>>;
+    Control: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "children"> & {
         children?: ReactNode | ((context: UseRatingGroupReturn) => ReactNode);
     } & 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>>;
-    Rating: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        ref?: RefObject<HTMLSpanElement> | ((instance: HTMLSpanElement | null) => void) | null | undefined;
-    } & {
+    Label: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, "children" | "index"> & ItemProps & {
+    } & RefAttributes<HTMLLabelElement>>;
+    Rating: ForwardRefExoticComponent<Omit<HTMLArkProps<"span">, "children" | "index"> & ItemProps & {
         children: (state: ItemState) => ReactNode;
     } & RefAttributes<HTMLSpanElement>>;
 };

package/rating-group/rating-group-control.cjs

@@ -13,13 +13,10 @@ const ratingGroupContext = require('./rating-group-context.cjs');
 const RatingGroupControl = react.forwardRef(
   (props, ref) => {
     const { children, ...divProps } = props;
-    const ratingGroup = ratingGroupContext.useRatingGroupContext();
-    const mergedProps = react$1.mergeProps(ratingGroup.controlProps, divProps);
-    const view = runIfFn.runIfFn(children, ratingGroup);
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }),
-      /* @__PURE__ */ jsxRuntime.jsx("input", { ...ratingGroup.hiddenInputProps })
-    ] });
+    const api = ratingGroupContext.useRatingGroupContext();
+    const mergedProps = react$1.mergeProps(api.controlProps, divProps);
+    const view = runIfFn.runIfFn(children, api);
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
   }
 );
 RatingGroupControl.displayName = "RatingGroupControl";

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

@@ -1,13 +1,9 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
 import { type RatingGroupContext } from './rating-group-context';
-export type RatingGroupControlProps = Omit<ComponentPropsWithoutRef<typeof ark.div>, 'children'> & {
+export type RatingGroupControlProps = Omit<HTMLArkProps<'div'>, 'children'> & {
     children?: ReactNode | ((context: RatingGroupContext) => ReactNode);
 };
-export declare const RatingGroupControl: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "children"> & {
+export declare const RatingGroupControl: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "children"> & {
     children?: ReactNode | ((context: RatingGroupContext) => ReactNode);
 } & RefAttributes<HTMLDivElement>>;

package/rating-group/rating-group-control.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
@@ -9,13 +9,10 @@ import { useRatingGroupContext } from './rating-group-context.mjs';
 const RatingGroupControl = forwardRef(
   (props, ref) => {
     const { children, ...divProps } = props;
-    const ratingGroup = useRatingGroupContext();
-    const mergedProps = mergeProps(ratingGroup.controlProps, divProps);
-    const view = runIfFn(children, ratingGroup);
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }),
-      /* @__PURE__ */ jsx("input", { ...ratingGroup.hiddenInputProps })
-    ] });
+    const api = useRatingGroupContext();
+    const mergedProps = mergeProps(api.controlProps, divProps);
+    const view = runIfFn(children, api);
+    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
   }
 );
 RatingGroupControl.displayName = "RatingGroupControl";

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

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

package/rating-group/rating-group.cjs

@@ -30,9 +30,12 @@ const RatingGroup = react.forwardRef((props, ref) => {
     "translations",
     "value"
   ]);
-  const ratingGroup = useRatingGroup.useRatingGroup(useRatingProps);
-  const mergedProps = react$1.mergeProps(ratingGroup.rootProps, inputProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(ratingGroupContext.RatingGroupProvider, { value: ratingGroup, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: props.children }) });
+  const api = useRatingGroup.useRatingGroup(useRatingProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, inputProps);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ratingGroupContext.RatingGroupProvider, { value: api, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.hiddenInputProps })
+  ] });
 });
 RatingGroup.displayName = "RatingGroup";
 

package/rating-group/rating-group.d.ts

@@ -1,13 +1,7 @@
-import { Context } from '@zag-js/rating-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 UseRatingGroupProps } from './use-rating-group';
-export type RatingGroupProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, UseRatingGroupProps>;
-export declare const RatingGroup: 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" | "autoFocus" | "dir" | "onChange" | "max" | "readOnly" | "translations" | "allowHalf" | "onHover"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-    defaultValue?: number | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export type RatingGroupProps = Assign<HTMLArkProps<'div'>, UseRatingGroupProps>;
+export declare const RatingGroup: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseRatingGroupProps> & UseRatingGroupProps & RefAttributes<HTMLDivElement>>;

package/rating-group/rating-group.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
@@ -26,9 +26,12 @@ const RatingGroup = forwardRef((props, ref) => {
     "translations",
     "value"
   ]);
-  const ratingGroup = useRatingGroup(useRatingProps);
-  const mergedProps = mergeProps(ratingGroup.rootProps, inputProps);
-  return /* @__PURE__ */ jsx(RatingGroupProvider, { value: ratingGroup, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: props.children }) });
+  const api = useRatingGroup(useRatingProps);
+  const mergedProps = mergeProps(api.rootProps, inputProps);
+  return /* @__PURE__ */ jsxs(RatingGroupProvider, { value: api, children: [
+    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }),
+    /* @__PURE__ */ jsx("input", { ...api.hiddenInputProps })
+  ] });
 });
 RatingGroup.displayName = "RatingGroup";
 

package/rating-group/rating-group.stories.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { RatingGroup } from '.';
+import { RatingGroup } from './';
 type RatingGroupType = typeof RatingGroup;
 declare const meta: Meta<RatingGroupType>;
 export default meta;

package/rating-group/rating.d.ts

@@ -1,15 +1,11 @@
 import type { ItemProps } from '@zag-js/rating-group';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type RatingContext } from './rating-context';
-export type RatingProps = Assign<ComponentPropsWithoutRef<typeof ark.span>, ItemProps & {
+export type RatingProps = Assign<HTMLArkProps<'span'>, ItemProps & {
     children: (state: RatingContext) => ReactNode | ReactNode;
 }>;
-export declare const Rating: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: RefObject<HTMLSpanElement> | ((instance: HTMLSpanElement | null) => void) | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "children" | "index"> & ItemProps & {
+export declare const Rating: ForwardRefExoticComponent<Omit<HTMLArkProps<"span">, "children" | "index"> & ItemProps & {
     children: (state: RatingContext) => ReactNode | ReactNode;
 } & RefAttributes<HTMLSpanElement>>;

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

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

package/run-if-fn.d.ts

@@ -1,2 +1 @@
-export type AnyFunction<Arg = unknown, ReturnValue = unknown> = (...args: Arg[]) => ReturnValue;
 export declare const runIfFn: <MaybeReturnValue, FunctionArgs>(valueOrFn: MaybeReturnValue | ((...fnArgs: FunctionArgs[]) => MaybeReturnValue), ...args: FunctionArgs[]) => MaybeReturnValue;

package/segment-group/index.d.ts

@@ -1,64 +1,32 @@
-import { Context } from '@zag-js/radio-group';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, LabelHTMLAttributes } from 'react';
+import { RadioProps } from '@zag-js/radio-group';
+import { UseSegmentGroupProps } from './use-segment-group';
+import { HTMLArkProps } from '..';
+import { ForwardRefExoticComponent, RefAttributes, DetailedHTMLProps, LabelHTMLAttributes, HTMLAttributes } from 'react';
 /// <reference types="react" />
 import { Segment, type SegmentProps } from './segment';
-import { useSegmentContext } from './segment-context';
+import { useSegmentContext, type SegmentContext } from './segment-context';
 import { SegmentControl, type SegmentControlProps } from './segment-control';
 import { type SegmentGroupProps } from './segment-group';
-import { useSegmentGroupContext } from './segment-group-context';
+import { useSegmentGroupContext, type SegmentGroupContext } from './segment-group-context';
 import { SegmentGroupIndicator, type SegmentGroupIndicatorProps } from './segment-group-indicator';
 import { SegmentGroupLabel, type SegmentGroupLabelProps } from './segment-group-label';
 import { segmentGroupAnatomy } from './segment-group.anatomy';
 import { SegmentLabel, type SegmentLabelProps } from './segment-label';
-declare const SegmentGroup: 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 SegmentGroup: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseSegmentGroupProps> & UseSegmentGroupProps & RefAttributes<HTMLDivElement>> & {
+    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseSegmentGroupProps> & UseSegmentGroupProps & 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>>;
-    Indicator: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    Segment: 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>>;
-    SegmentLabel: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        ref?: RefObject<HTMLSpanElement> | ((instance: HTMLSpanElement | null) => void) | null | undefined;
-    } & {
+    Indicator: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLSpanElement>>;
-    SegmentControl: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    Segment: ForwardRefExoticComponent<Omit<HTMLArkProps<"label">, keyof RadioProps> & RadioProps & RefAttributes<HTMLLabelElement>>;
+    SegmentLabel: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        asChild?: boolean | undefined;
+    } & RefAttributes<HTMLSpanElement>>;
+    SegmentControl: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
+    } & RefAttributes<HTMLDivElement>>;
 };
 export { Segment, SegmentControl, SegmentGroup, SegmentGroupIndicator, SegmentGroupLabel, SegmentLabel, segmentGroupAnatomy, useSegmentContext, useSegmentGroupContext, };
-export type { SegmentControlProps, SegmentGroupIndicatorProps, SegmentGroupLabelProps, SegmentGroupProps, SegmentLabelProps, SegmentProps, };
+export type { SegmentContext, SegmentControlProps, SegmentGroupContext, SegmentGroupIndicatorProps, SegmentGroupLabelProps, SegmentGroupProps, SegmentLabelProps, SegmentProps, };

package/segment-group/segment-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 SegmentContext = Parameters<ReturnType<typeof connect>['getRadioProps']>[0];
-export declare const SegmentProvider: Provider<{
-    value: string;
-    disabled?: boolean | undefined;
-    readOnly?: boolean | undefined;
-    invalid?: boolean | undefined;
-}>, useSegmentContext: () => {
-    value: string;
-    disabled?: boolean | undefined;
-    readOnly?: boolean | undefined;
-    invalid?: boolean | undefined;
-};
+export declare const SegmentProvider: Provider<RadioProps>, useSegmentContext: () => RadioProps;

package/segment-group/segment-control.cjs

@@ -12,13 +12,10 @@ const segmentGroupContext = require('./segment-group-context.cjs');
 const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 
 const SegmentControl = react.forwardRef((props, ref) => {
-  const { getRadioControlProps, getRadioHiddenInputProps } = segmentGroupContext.useSegmentGroupContext();
-  const context = segmentContext.useSegmentContext();
-  const mergedProps = react$1.mergeProps(getRadioControlProps(context), props);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ...segmentGroup_anatomy.parts.radioControl.attrs, ref }),
-    /* @__PURE__ */ jsxRuntime.jsx("input", { ...getRadioHiddenInputProps(context) })
-  ] });
+  const api = segmentGroupContext.useSegmentGroupContext();
+  const segmentProps = segmentContext.useSegmentContext();
+  const mergedProps = react$1.mergeProps(api.getRadioControlProps(segmentProps), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ...segmentGroup_anatomy.parts.radioControl.attrs, ref });
 });
 SegmentControl.displayName = "SegmentControl";
 

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

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

package/segment-group/segment-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';
@@ -8,13 +8,10 @@ import { useSegmentGroupContext } from './segment-group-context.mjs';
 import { parts } from './segment-group.anatomy.mjs';
 
 const SegmentControl = forwardRef((props, ref) => {
-  const { getRadioControlProps, getRadioHiddenInputProps } = useSegmentGroupContext();
-  const context = useSegmentContext();
-  const mergedProps = mergeProps(getRadioControlProps(context), props);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ...parts.radioControl.attrs, ref }),
-    /* @__PURE__ */ jsx("input", { ...getRadioHiddenInputProps(context) })
-  ] });
+  const api = useSegmentGroupContext();
+  const segmentProps = useSegmentContext();
+  const mergedProps = mergeProps(api.getRadioControlProps(segmentProps), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ...parts.radioControl.attrs, ref });
 });
 SegmentControl.displayName = "SegmentControl";
 

package/segment-group/segment-group-indicator.d.ts

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