@ark-ui/react 0.9.0 → 0.10.0-beta.1

package/range-slider/range-slider-marker.mjs

@@ -1,15 +1,18 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useRangeSliderContext } from './range-slider-context.mjs';
 
-const RangeSliderMarker = forwardRef((props, ref) => {
-  const { value, ...spanProps } = props;
-  const { getMarkerProps } = useRangeSliderContext();
-  const mergedProps = mergeProps(getMarkerProps({ value }), spanProps);
-  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
-});
+const RangeSliderMarker = forwardRef(
+  (props, ref) => {
+    const { value, ...spanProps } = props;
+    const { getMarkerProps } = useRangeSliderContext();
+    const mergedProps = mergeProps(getMarkerProps({ value }), spanProps);
+    return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
+  }
+);
+RangeSliderMarker.displayName = "RangeSliderMarker";
 
 export { RangeSliderMarker };

package/range-slider/range-slider-output.cjs

@@ -4,19 +4,21 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
-require('react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const rangeSliderContext = require('./range-slider-context.cjs');
 
-const RangeSliderOutput = forwardRef.forwardRef((props, ref) => {
-  const { children, ...rest } = props;
-  const rangeSlider = rangeSliderContext.useRangeSliderContext();
-  const mergedProps = react.mergeProps(rangeSlider.outputProps, rest);
-  const view = runIfFn.runIfFn(children, rangeSlider);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.output, { ...mergedProps, ref, children: view });
-});
+const RangeSliderOutput = react.forwardRef(
+  (props, ref) => {
+    const { children, ...rest } = props;
+    const rangeSlider = rangeSliderContext.useRangeSliderContext();
+    const mergedProps = react$1.mergeProps(rangeSlider.outputProps, rest);
+    const view = runIfFn.runIfFn(children, rangeSlider);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.output, { ...mergedProps, ref, children: view });
+  }
+);
+RangeSliderOutput.displayName = "RangeSliderOutput";
 
 exports.RangeSliderOutput = RangeSliderOutput;

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

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

package/range-slider/range-slider-output.mjs

@@ -1,18 +1,20 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
-import 'react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { useRangeSliderContext } from './range-slider-context.mjs';
 
-const RangeSliderOutput = forwardRef((props, ref) => {
-  const { children, ...rest } = props;
-  const rangeSlider = useRangeSliderContext();
-  const mergedProps = mergeProps(rangeSlider.outputProps, rest);
-  const view = runIfFn(children, rangeSlider);
-  return /* @__PURE__ */ jsx(ark.output, { ...mergedProps, ref, children: view });
-});
+const RangeSliderOutput = forwardRef(
+  (props, ref) => {
+    const { children, ...rest } = props;
+    const rangeSlider = useRangeSliderContext();
+    const mergedProps = mergeProps(rangeSlider.outputProps, rest);
+    const view = runIfFn(children, rangeSlider);
+    return /* @__PURE__ */ jsx(ark.output, { ...mergedProps, ref, children: view });
+  }
+);
+RangeSliderOutput.displayName = "RangeSliderOutput";
 
 export { RangeSliderOutput };

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

@@ -4,15 +4,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const rangeSliderContext = require('./range-slider-context.cjs');
 
-const RangeSliderRange = forwardRef.forwardRef((props, ref) => {
+const RangeSliderRange = react.forwardRef((props, ref) => {
   const { rangeProps } = rangeSliderContext.useRangeSliderContext();
-  const mergedProps = react.mergeProps(rangeProps, props);
+  const mergedProps = react$1.mergeProps(rangeProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
+RangeSliderRange.displayName = "RangeSliderRange";
 
 exports.RangeSliderRange = RangeSliderRange;

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

@@ -1,5 +1,8 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
-export type RangeSliderRangeProps = HTMLArkProps<'div'>;
-export declare const RangeSliderRange: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, RangeSliderRangeProps>>;
+import type { 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;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLDivElement>>;

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

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useRangeSliderContext } from './range-slider-context.mjs';
 
 const RangeSliderRange = forwardRef((props, ref) => {
@@ -10,5 +10,6 @@ const RangeSliderRange = forwardRef((props, ref) => {
   const mergedProps = mergeProps(rangeProps, props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
+RangeSliderRange.displayName = "RangeSliderRange";
 
 export { RangeSliderRange };

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

@@ -4,19 +4,29 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const rangeSliderContext = require('./range-slider-context.cjs');
 
-const RangeSliderThumb = forwardRef.forwardRef((props, ref) => {
+const RangeSliderThumb = react.forwardRef((props, ref) => {
   const { index, ...divProps } = props;
-  const { getThumbProps, getHiddenInputProps } = rangeSliderContext.useRangeSliderContext();
-  const mergedProps = react.mergeProps(getThumbProps(index), divProps);
+  const { getThumbProps } = rangeSliderContext.useRangeSliderContext();
+  const mergedProps = react$1.mergeProps(getThumbProps(index), divProps);
   return /* @__PURE__ */ jsxRuntime.jsxs(factory.ark.div, { ...mergedProps, ref, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...getHiddenInputProps(index) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RangeSliderHiddenInput, { index }),
     props.children
   ] });
 });
+RangeSliderThumb.displayName = "RangeSliderThumb";
+const RangeSliderHiddenInput = react.forwardRef(
+  (props, ref) => {
+    const { index, ...inputProps } = props;
+    const { getHiddenInputProps } = rangeSliderContext.useRangeSliderContext();
+    const mergedProps = react$1.mergeProps(getHiddenInputProps(index), inputProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
+  }
+);
+RangeSliderHiddenInput.displayName = "RangeSliderHiddenInput";
 
 exports.RangeSliderThumb = RangeSliderThumb;

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

@@ -1,7 +1,13 @@
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
 import { type Assign } from '../types';
-export type RangeSliderThumbProps = Assign<HTMLArkProps<'div'>, {
+export type RangeSliderThumbProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, {
     index: number;
 }>;
-export declare const RangeSliderThumb: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, RangeSliderThumbProps>>;
+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"> & {
+    index: number;
+} & RefAttributes<HTMLDivElement>>;

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

@@ -1,18 +1,28 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useRangeSliderContext } from './range-slider-context.mjs';
 
 const RangeSliderThumb = forwardRef((props, ref) => {
   const { index, ...divProps } = props;
-  const { getThumbProps, getHiddenInputProps } = useRangeSliderContext();
+  const { getThumbProps } = useRangeSliderContext();
   const mergedProps = mergeProps(getThumbProps(index), divProps);
   return /* @__PURE__ */ jsxs(ark.div, { ...mergedProps, ref, children: [
-    /* @__PURE__ */ jsx(ark.input, { ...getHiddenInputProps(index) }),
+    /* @__PURE__ */ jsx(RangeSliderHiddenInput, { index }),
     props.children
   ] });
 });
+RangeSliderThumb.displayName = "RangeSliderThumb";
+const RangeSliderHiddenInput = forwardRef(
+  (props, ref) => {
+    const { index, ...inputProps } = props;
+    const { getHiddenInputProps } = useRangeSliderContext();
+    const mergedProps = mergeProps(getHiddenInputProps(index), inputProps);
+    return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+  }
+);
+RangeSliderHiddenInput.displayName = "RangeSliderHiddenInput";
 
 export { RangeSliderThumb };

package/range-slider/range-slider-track.cjs

@@ -4,15 +4,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const rangeSliderContext = require('./range-slider-context.cjs');
 
-const RangeSliderTrack = forwardRef.forwardRef((props, ref) => {
+const RangeSliderTrack = react.forwardRef((props, ref) => {
   const { trackProps } = rangeSliderContext.useRangeSliderContext();
-  const mergedProps = react.mergeProps(trackProps, props);
+  const mergedProps = react$1.mergeProps(trackProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
+RangeSliderTrack.displayName = "RangeSliderTrack";
 
 exports.RangeSliderTrack = RangeSliderTrack;

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

@@ -1,5 +1,8 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
-export type RangeSliderTrackProps = HTMLArkProps<'div'>;
-export declare const RangeSliderTrack: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, RangeSliderTrackProps>>;
+import type { 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;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLDivElement>>;

package/range-slider/range-slider-track.mjs

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useRangeSliderContext } from './range-slider-context.mjs';
 
 const RangeSliderTrack = forwardRef((props, ref) => {
@@ -10,5 +10,6 @@ const RangeSliderTrack = forwardRef((props, ref) => {
   const mergedProps = mergeProps(trackProps, props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
+RangeSliderTrack.displayName = "RangeSliderTrack";
 
 export { RangeSliderTrack };

package/range-slider/range-slider.cjs

@@ -4,16 +4,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
-require('react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const rangeSliderContext = require('./range-slider-context.cjs');
 const useRangeSlider = require('./use-range-slider.cjs');
 
-const RangeSlider = forwardRef.forwardRef((props, ref) => {
+const RangeSlider = react.forwardRef((props, ref) => {
   const [useRangeSliderProps, { children, ...divProps }] = createSplitProps.createSplitProps()(
     props,
     [
@@ -43,9 +42,10 @@ const RangeSlider = forwardRef.forwardRef((props, ref) => {
     ]
   );
   const slider = useRangeSlider.useRangeSlider(useRangeSliderProps);
-  const mergedProps = react.mergeProps(slider.rootProps, divProps);
+  const mergedProps = react$1.mergeProps(slider.rootProps, divProps);
   const view = runIfFn.runIfFn(children, slider);
   return /* @__PURE__ */ jsxRuntime.jsx(rangeSliderContext.RangeSliderProvider, { value: slider, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
 });
+RangeSlider.displayName = "RangeSlider";
 
 exports.RangeSlider = RangeSlider;

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

@@ -1,8 +1,17 @@
-import type { ForwardRefExoticComponent, type ReactNode } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { Context } from '@zag-js/range-slider';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef,  type ReactNode } from 'react';
+import { ark } from '../factory';
 import { type Assign } from '../types';
 import { type UseRangeSliderProps, type UseRangeSliderReturn } from './use-range-slider';
-export type RangeSliderProps = Assign<HTMLArkProps<'div'>, UseRangeSliderProps & {
+export type RangeSliderProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, UseRangeSliderProps & {
     children?: ((api: UseRangeSliderReturn) => ReactNode) | ReactNode;
 }>;
-export declare const RangeSlider: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, RangeSliderProps>>;
+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" | "form" | "id" | "max" | "min" | "orientation" | "aria-label" | "aria-labelledby" | "onChange" | "defaultValue" | "dir" | "disabled" | "readOnly" | "step" | "getRootNode" | "ids" | "invalid" | "onChangeEnd" | "onChangeStart" | "getAriaValueText" | "minStepsBetweenThumbs" | "thumbAlignment"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+    defaultValue?: number[] | undefined;
+} & {
+    children?: ReactNode | ((api: UseRangeSliderReturn) => ReactNode);
+} & RefAttributes<HTMLDivElement>>;

package/range-slider/range-slider.mjs

@@ -1,10 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
-import 'react';
+import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { RangeSliderProvider } from './range-slider-context.mjs';
 import { useRangeSlider } from './use-range-slider.mjs';
@@ -43,5 +42,6 @@ const RangeSlider = forwardRef((props, ref) => {
   const view = runIfFn(children, slider);
   return /* @__PURE__ */ jsx(RangeSliderProvider, { value: slider, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
 });
+RangeSlider.displayName = "RangeSlider";
 
 export { RangeSlider };

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

@@ -4,8 +4,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const rangeSlider = require('@zag-js/range-slider');
-const react = require('@zag-js/react');
-const React = require('react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -30,7 +30,7 @@ const rangeSlider__namespace = /*#__PURE__*/_interopNamespaceDefault(rangeSlider
 const useRangeSlider = (props) => {
   const getRootNode = environmentContext.useEnvironmentContext();
   const initialContext = {
-    id: React.useId(),
+    id: react.useId(),
     getRootNode,
     ...props,
     value: props.defaultValue
@@ -39,10 +39,10 @@ const useRangeSlider = (props) => {
     ...initialContext,
     value: props.value
   };
-  const [state, send] = react.useMachine(rangeSlider__namespace.machine(initialContext), {
+  const [state, send] = react$1.useMachine(rangeSlider__namespace.machine(initialContext), {
     context
   });
-  return rangeSlider__namespace.connect(state, send, react.normalizeProps);
+  return rangeSlider__namespace.connect(state, send, react$1.normalizeProps);
 };
 
 exports.useRangeSlider = useRangeSlider;

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

@@ -4,19 +4,21 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
-require('react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const ratingGroupContext = require('./rating-group-context.cjs');
 
-const RatingGroupControl = forwardRef.forwardRef((props, ref) => {
-  const { children, ...divProps } = props;
-  const ratingGroup = ratingGroupContext.useRatingGroupContext();
-  const mergedProps = react.mergeProps(ratingGroup.controlProps, divProps);
-  const view = runIfFn.runIfFn(children, ratingGroup);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view });
-});
+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.jsx(factory.ark.div, { ...mergedProps, ref, children: view });
+  }
+);
+RatingGroupControl.displayName = "RatingGroupControl";
 
 exports.RatingGroupControl = RatingGroupControl;

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

@@ -1,8 +1,13 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent, type ReactNode } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef,  type ReactNode } from 'react';
+import { ark } from '../factory';
 import { type RatingGroupContext } from './rating-group-context';
-export type RatingGroupControlProps = Omit<HTMLArkProps<'div'>, 'children'> & {
+export type RatingGroupControlProps = Omit<ComponentPropsWithoutRef<typeof ark.div>, 'children'> & {
     children: ReactNode | ((context: RatingGroupContext) => ReactNode);
 };
-export declare const RatingGroupControl: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, RatingGroupControlProps>>;
+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"> & {
+    children: ReactNode | ((context: RatingGroupContext) => ReactNode);
+} & RefAttributes<HTMLDivElement>>;

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

@@ -1,18 +1,20 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
-import 'react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 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__ */ jsx(ark.div, { ...mergedProps, ref, children: view });
-});
+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__ */ jsx(ark.div, { ...mergedProps, ref, children: view });
+  }
+);
+RatingGroupControl.displayName = "RatingGroupControl";
 
 export { RatingGroupControl };

package/rating-group/rating-group-label.cjs

@@ -4,15 +4,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const ratingGroupContext = require('./rating-group-context.cjs');
 
-const RatingGroupLabel = forwardRef.forwardRef((props, ref) => {
-  const { labelProps } = ratingGroupContext.useRatingGroupContext();
-  const mergedProps = react.mergeProps(labelProps, props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
-});
+const RatingGroupLabel = react.forwardRef(
+  (props, ref) => {
+    const { labelProps } = ratingGroupContext.useRatingGroupContext();
+    const mergedProps = react$1.mergeProps(labelProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
+  }
+);
+RatingGroupLabel.displayName = "RatingGroupLabel";
 
 exports.RatingGroupLabel = RatingGroupLabel;

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

@@ -1,5 +1,8 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
-export type RatingGroupLabelProps = HTMLArkProps<'label'>;
-export declare const RatingGroupLabel: ForwardRefExoticComponent<Assign<AsChildComponentProps<"label">, RatingGroupLabelProps>>;
+import type { 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;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLLabelElement>>;

package/rating-group/rating-group-label.mjs

@@ -1,14 +1,17 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useRatingGroupContext } from './rating-group-context.mjs';
 
-const RatingGroupLabel = forwardRef((props, ref) => {
-  const { labelProps } = useRatingGroupContext();
-  const mergedProps = mergeProps(labelProps, props);
-  return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
-});
+const RatingGroupLabel = forwardRef(
+  (props, ref) => {
+    const { labelProps } = useRatingGroupContext();
+    const mergedProps = mergeProps(labelProps, props);
+    return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
+  }
+);
+RatingGroupLabel.displayName = "RatingGroupLabel";
 
 export { RatingGroupLabel };

package/rating-group/rating-group.cjs

@@ -4,14 +4,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const ratingGroupContext = require('./rating-group-context.cjs');
 const useRatingGroup = require('./use-rating-group.cjs');
 
-const RatingGroup = forwardRef.forwardRef((props, ref) => {
+const RatingGroup = react.forwardRef((props, ref) => {
   const [useRatingProps, inputProps] = createSplitProps.createSplitProps()(props, [
     "allowHalf",
     "autoFocus",
@@ -31,11 +31,12 @@ const RatingGroup = forwardRef.forwardRef((props, ref) => {
     "value"
   ]);
   const ratingGroup = useRatingGroup.useRatingGroup(useRatingProps);
-  const mergedProps = react.mergeProps(ratingGroup.rootProps, inputProps);
+  const mergedProps = react$1.mergeProps(ratingGroup.rootProps, inputProps);
   return /* @__PURE__ */ jsxRuntime.jsx(ratingGroupContext.RatingGroupProvider, { value: ratingGroup, children: /* @__PURE__ */ jsxRuntime.jsxs(factory.ark.div, { ...mergedProps, children: [
     /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...ratingGroup.hiddenInputProps, ref }),
     props.children
   ] }) });
 });
+RatingGroup.displayName = "RatingGroup";
 
 exports.RatingGroup = RatingGroup;

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

@@ -1,6 +1,13 @@
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { Context } from '@zag-js/rating-group';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
 import { type Assign } from '../types';
 import { type UseRatingGroupProps } from './use-rating-group';
-export type RatingGroupProps = Assign<HTMLArkProps<'input'>, UseRatingGroupProps>;
-export declare const RatingGroup: ForwardRefExoticComponent<Assign<AsChildComponentProps<"input">, RatingGroupProps>>;
+export type RatingGroupProps = Assign<ComponentPropsWithoutRef<typeof ark.input>, UseRatingGroupProps>;
+export declare const RatingGroup: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, "name" | "value" | "form" | "id" | "max" | "onChange" | "defaultValue" | "autoFocus" | "dir" | "disabled" | "readOnly" | "getRootNode" | "ids" | "translations" | "allowHalf" | "onHover"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+    defaultValue?: number | undefined;
+} & RefAttributes<HTMLInputElement>>;