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

package/range-slider/index.d.ts

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

package/range-slider/index.mjs

@@ -1,11 +1,25 @@
-export { RangeSlider } from './range-slider.mjs';
+import { RangeSlider as RangeSlider$1 } from './range-slider.mjs';
 export { useRangeSliderContext } from './range-slider-context.mjs';
-export { RangeSliderControl } from './range-slider-control.mjs';
-export { RangeSliderLabel } from './range-slider-label.mjs';
-export { RangeSliderMarker } from './range-slider-marker.mjs';
-export { RangeSliderMarkerGroup } from './range-slider-marker-group.mjs';
-export { RangeSliderOutput } from './range-slider-output.mjs';
-export { RangeSliderRange } from './range-slider-range.mjs';
-export { RangeSliderThumb } from './range-slider-thumb.mjs';
-export { RangeSliderTrack } from './range-slider-track.mjs';
+import { RangeSliderControl } from './range-slider-control.mjs';
+import { RangeSliderLabel } from './range-slider-label.mjs';
+import { RangeSliderMarker } from './range-slider-marker.mjs';
+import { RangeSliderMarkerGroup } from './range-slider-marker-group.mjs';
+import { RangeSliderOutput } from './range-slider-output.mjs';
+import { RangeSliderRange } from './range-slider-range.mjs';
+import { RangeSliderThumb } from './range-slider-thumb.mjs';
+import { RangeSliderTrack } from './range-slider-track.mjs';
 export { anatomy as rangeSliderAnatomy } from '@zag-js/range-slider';
+
+const RangeSlider = Object.assign(RangeSlider$1, {
+  Root: RangeSlider$1,
+  Control: RangeSliderControl,
+  Label: RangeSliderLabel,
+  Marker: RangeSliderMarker,
+  MarkerGroup: RangeSliderMarkerGroup,
+  Output: RangeSliderOutput,
+  Range: RangeSliderRange,
+  Thumb: RangeSliderThumb,
+  Track: RangeSliderTrack
+});
+
+export { RangeSlider, RangeSliderControl, RangeSliderLabel, RangeSliderMarker, RangeSliderMarkerGroup, RangeSliderOutput, RangeSliderRange, RangeSliderThumb, RangeSliderTrack };

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

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

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

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+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"> & {

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

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+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"> & {

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

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+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"> & {

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

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

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

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, OutputHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef,  type ReactNode } from 'react';
+import { 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';

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

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+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"> & {

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

@@ -11,22 +11,13 @@ const rangeSliderContext = require('./range-slider-context.cjs');
 
 const RangeSliderThumb = react.forwardRef((props, ref) => {
   const { index, ...divProps } = props;
-  const { getThumbProps } = rangeSliderContext.useRangeSliderContext();
+  const { getThumbProps, getHiddenInputProps } = rangeSliderContext.useRangeSliderContext();
   const mergedProps = react$1.mergeProps(getThumbProps(index), divProps);
-  return /* @__PURE__ */ jsxRuntime.jsxs(factory.ark.div, { ...mergedProps, ref, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RangeSliderHiddenInput, { index }),
-    props.children
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: props.children }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ...getHiddenInputProps(index) })
   ] });
 });
 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,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 import { type Assign } from '../types';
 export type RangeSliderThumbProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, {

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

@@ -1,5 +1,5 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
@@ -7,22 +7,13 @@ import { useRangeSliderContext } from './range-slider-context.mjs';
 
 const RangeSliderThumb = forwardRef((props, ref) => {
   const { index, ...divProps } = props;
-  const { getThumbProps } = useRangeSliderContext();
+  const { getThumbProps, getHiddenInputProps } = useRangeSliderContext();
   const mergedProps = mergeProps(getThumbProps(index), divProps);
-  return /* @__PURE__ */ jsxs(ark.div, { ...mergedProps, ref, children: [
-    /* @__PURE__ */ jsx(RangeSliderHiddenInput, { index }),
-    props.children
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: props.children }),
+    /* @__PURE__ */ jsx("input", { ...getHiddenInputProps(index) })
   ] });
 });
 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.d.ts

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+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"> & {

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

@@ -1,5 +1,5 @@
-import type { Context } from '@zag-js/range-slider';
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef,  type ReactNode } from 'react';
+import { Context } from '@zag-js/range-slider';
+import { 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';
@@ -10,7 +10,7 @@ export declare const RangeSlider: ForwardRefExoticComponent<Omit<Omit<Omit<Detai
     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"> & {
+}, "ref">, "name" | "value" | "children" | "getRootNode" | "form" | "id" | "ids" | "aria-label" | "disabled" | "max" | "min" | "orientation" | "aria-labelledby" | "onChange" | "defaultValue" | "dir" | "readOnly" | "step" | "invalid" | "onChangeEnd" | "onChangeStart" | "getAriaValueText" | "minStepsBetweenThumbs" | "thumbAlignment"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
     defaultValue?: number[] | undefined;
 } & {
     children?: ReactNode | ((api: UseRangeSliderReturn) => ReactNode);

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

@@ -0,0 +1,8 @@
+import { JSX } from 'react/jsx-runtime';
+import type { Meta } from '@storybook/react';
+import { RangeSlider } from './';
+type RangeSliderType = typeof RangeSlider;
+declare const meta: Meta<RangeSliderType>;
+export default meta;
+export declare const Basic: () => JSX.Element;
+export declare const WithDefaultValue: () => JSX.Element;

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

@@ -0,0 +1 @@
+export {};

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const rangeSlider = require('@zag-js/range-slider');
 const react$1 = require('@zag-js/react');
 const react = require('react');
+require('../environment/index.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {

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

@@ -1,4 +1,5 @@
-import type { HTMLAttributes, CSSProperties } from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
+/// <reference types="react" />
 import * as rangeSlider from '@zag-js/range-slider';
 import { type Optional } from '../types';
 export type UseRangeSliderProps = Optional<rangeSlider.Context, 'id'> & {

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

@@ -2,6 +2,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 { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useRangeSlider = (props) => {

package/rating-group/index.cjs

@@ -4,21 +4,26 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const rating = require('./rating.cjs');
 const ratingContext = require('./rating-context.cjs');
-const ratingGroup = require('./rating-group.cjs');
+const ratingGroup$1 = require('./rating-group.cjs');
 const ratingGroupContext = require('./rating-group-context.cjs');
 const ratingGroupControl = require('./rating-group-control.cjs');
 const ratingGroupLabel = require('./rating-group-label.cjs');
-const ratingGroup$1 = require('@zag-js/rating-group');
-
+const ratingGroup = require('@zag-js/rating-group');
 
+const RatingGroup = Object.assign(ratingGroup$1.RatingGroup, {
+  Root: ratingGroup$1.RatingGroup,
+  Control: ratingGroupControl.RatingGroupControl,
+  Label: ratingGroupLabel.RatingGroupLabel,
+  Rating: rating.Rating
+});
 
 exports.Rating = rating.Rating;
 exports.useRatingContext = ratingContext.useRatingContext;
-exports.RatingGroup = ratingGroup.RatingGroup;
 exports.useRatingGroupContext = ratingGroupContext.useRatingGroupContext;
 exports.RatingGroupControl = ratingGroupControl.RatingGroupControl;
 exports.RatingGroupLabel = ratingGroupLabel.RatingGroupLabel;
 Object.defineProperty(exports, 'ratingGroupAnatomy', {
-	enumerable: true,
-	get: () => ratingGroup$1.anatomy
+  enumerable: true,
+  get: () => ratingGroup.anatomy
 });
+exports.RatingGroup = RatingGroup;

package/rating-group/index.d.ts

@@ -1,7 +1,49 @@
-export { Rating, type RatingProps } from './rating';
-export { useRatingContext } from './rating-context';
-export { RatingGroup, type RatingGroupProps } from './rating-group';
-export { useRatingGroupContext } from './rating-group-context';
-export { RatingGroupControl, type RatingGroupControlProps } from './rating-group-control';
-export { RatingGroupLabel, type RatingGroupLabelProps } from './rating-group-label';
-export { ratingGroupAnatomy } from './rating-group.anatomy';
+import { Context, PublicApi, ItemProps, ItemState } from '@zag-js/rating-group';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, ReactNode, CSSProperties, LabelHTMLAttributes } from 'react';
+/// <reference types="react" />
+import { Rating, type RatingProps } from './rating';
+import { useRatingContext } from './rating-context';
+import { type RatingGroupProps } from './rating-group';
+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" | "max" | "onChange" | "defaultValue" | "autoFocus" | "dir" | "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" | "max" | "onChange" | "defaultValue" | "autoFocus" | "dir" | "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"> & {
+        children: ReactNode | ((context: PublicApi<JSX.IntrinsicElements & {
+            element: HTMLAttributes<HTMLElement>;
+            style: CSSProperties;
+        }>) => 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;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref">, "children" | "index"> & ItemProps & {
+        children: (state: ItemState) => ReactNode;
+    } & RefAttributes<HTMLSpanElement>>;
+};
+export { Rating, RatingGroup, RatingGroupControl, RatingGroupLabel, ratingGroupAnatomy, useRatingContext, useRatingGroupContext, };
+export type { RatingGroupControlProps, RatingGroupLabelProps, RatingGroupProps, RatingProps };

package/rating-group/index.mjs

@@ -1,7 +1,16 @@
-export { Rating } from './rating.mjs';
+import { Rating } from './rating.mjs';
 export { useRatingContext } from './rating-context.mjs';
-export { RatingGroup } from './rating-group.mjs';
+import { RatingGroup as RatingGroup$1 } from './rating-group.mjs';
 export { useRatingGroupContext } from './rating-group-context.mjs';
-export { RatingGroupControl } from './rating-group-control.mjs';
-export { RatingGroupLabel } from './rating-group-label.mjs';
+import { RatingGroupControl } from './rating-group-control.mjs';
+import { RatingGroupLabel } from './rating-group-label.mjs';
 export { anatomy as ratingGroupAnatomy } from '@zag-js/rating-group';
+
+const RatingGroup = Object.assign(RatingGroup$1, {
+  Root: RatingGroup$1,
+  Control: RatingGroupControl,
+  Label: RatingGroupLabel,
+  Rating
+});
+
+export { Rating, RatingGroup, RatingGroupControl, RatingGroupLabel };

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

@@ -1,4 +1,5 @@
-import type { Provider } from 'react';
-import type { ItemState, type connect } from '@zag-js/rating-group';
+import { Provider } from 'react';
+/// <reference types="react" />
+import { ItemState, type connect } from '@zag-js/rating-group';
 export type RatingContext = ReturnType<ReturnType<typeof connect>['getRatingState']>;
 export declare const RatingProvider: Provider<ItemState>, useRatingContext: () => ItemState;

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

@@ -1,5 +1,6 @@
-import type { PublicApi } from '@zag-js/rating-group';
-import type { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { PublicApi } from '@zag-js/rating-group';
+import { Provider, HTMLAttributes, CSSProperties } from 'react';
+/// <reference types="react" />
 import { type UseRatingGroupReturn } from './use-rating-group';
 export type RatingGroupContext = UseRatingGroupReturn;
 export declare const RatingGroupProvider: Provider<PublicApi<JSX.IntrinsicElements & {

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

@@ -16,7 +16,10 @@ const RatingGroupControl = react.forwardRef(
     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 });
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }),
+      /* @__PURE__ */ jsxRuntime.jsx("input", { ...ratingGroup.hiddenInputProps })
+    ] });
   }
 );
 RatingGroupControl.displayName = "RatingGroupControl";

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

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef,  type ReactNode } from 'react';
+import { 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<ComponentPropsWithoutRef<typeof ark.div>, 'children'> & {

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

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

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

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+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"> & {

package/rating-group/rating-group.cjs

@@ -32,10 +32,7 @@ const RatingGroup = react.forwardRef((props, ref) => {
   ]);
   const ratingGroup = useRatingGroup.useRatingGroup(useRatingProps);
   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
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(ratingGroupContext.RatingGroupProvider, { value: ratingGroup, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: props.children }) });
 });
 RatingGroup.displayName = "RatingGroup";
 

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

@@ -1,13 +1,13 @@
-import type { Context } from '@zag-js/rating-group';
-import type { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { Context } from '@zag-js/rating-group';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, 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<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;
+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" | "form" | "id" | "max" | "onChange" | "defaultValue" | "autoFocus" | "dir" | "disabled" | "readOnly" | "getRootNode" | "ids" | "translations" | "allowHalf" | "onHover"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+}, "ref">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "max" | "onChange" | "defaultValue" | "autoFocus" | "dir" | "readOnly" | "translations" | "allowHalf" | "onHover"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
     defaultValue?: number | undefined;
-} & RefAttributes<HTMLInputElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/rating-group/rating-group.mjs

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

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

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

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

@@ -0,0 +1 @@
+export {};

package/rating-group/rating.d.ts

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