@ark-ui/solid 0.1.0 → 0.3.0

package/dist/range-slider/range-slider-marker.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const rangeSliderContext = require('./range-slider-context.cjs');
+
+const RangeSliderMarker = props => {
+  const [markerParams, spanProps] = createSplitProps.createSplitProps()(props, ['value']);
+  const api = rangeSliderContext.useRangeSliderContext();
+  const markerProps = solid.mergeProps(() => api().getMarkerProps(markerParams), spanProps);
+  return web.createComponent(factory.ark.span, markerProps);
+};
+
+exports.RangeSliderMarker = RangeSliderMarker;

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

@@ -0,0 +1,9 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+type GetMarkerPropsArgs = {
+    value: number;
+};
+export type RangeSliderMarkerProps = Assign<HTMLArkProps<'span'>, GetMarkerPropsArgs>;
+export declare const RangeSliderMarker: (props: RangeSliderMarkerProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,14 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { useRangeSliderContext } from './range-slider-context.mjs';
+
+const RangeSliderMarker = props => {
+  const [markerParams, spanProps] = createSplitProps()(props, ['value']);
+  const api = useRangeSliderContext();
+  const markerProps = mergeProps(() => api().getMarkerProps(markerParams), spanProps);
+  return createComponent(ark.span, markerProps);
+};
+
+export { RangeSliderMarker };

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

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const runIfFn = require('../run-if-fn.cjs');
+const rangeSliderContext = require('./range-slider-context.cjs');
+
+const RangeSliderOutput = props => {
+  const api = rangeSliderContext.useRangeSliderContext();
+  const getChildren = () => runIfFn.runIfFn(props.children, api);
+  const outputProps = solid.mergeProps(() => api().outputProps, props);
+  return web.createComponent(factory.ark.output, web.mergeProps(outputProps, {
+    get children() {
+      return getChildren();
+    }
+  }));
+};
+
+exports.RangeSliderOutput = RangeSliderOutput;

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

@@ -0,0 +1,8 @@
+import { type JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type UseRangeSliderReturn } from './use-range-slider';
+export type RangeSliderOutputProps = Assign<HTMLArkProps<'output'>, {
+    children?: JSX.Element | ((api: UseRangeSliderReturn) => JSX.Element);
+}>;
+export declare const RangeSliderOutput: (props: RangeSliderOutputProps) => JSX.Element;

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

@@ -0,0 +1,18 @@
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
+import { useRangeSliderContext } from './range-slider-context.mjs';
+
+const RangeSliderOutput = props => {
+  const api = useRangeSliderContext();
+  const getChildren = () => runIfFn(props.children, api);
+  const outputProps = mergeProps(() => api().outputProps, props);
+  return createComponent(ark.output, mergeProps$1(outputProps, {
+    get children() {
+      return getChildren();
+    }
+  }));
+};
+
+export { RangeSliderOutput };

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

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const rangeSliderContext = require('./range-slider-context.cjs');
+
+const RangeSliderRange = props => {
+  const slider = rangeSliderContext.useRangeSliderContext();
+  const rangeProps = solid.mergeProps(() => slider().rangeProps, props);
+  return web.createComponent(factory.ark.div, rangeProps);
+};
+
+exports.RangeSliderRange = RangeSliderRange;

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

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type RangeSliderRangeProps = HTMLArkProps<'div'>;
+export declare const RangeSliderRange: (props: RangeSliderRangeProps) => JSX.Element;

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

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useRangeSliderContext } from './range-slider-context.mjs';
+
+const RangeSliderRange = props => {
+  const slider = useRangeSliderContext();
+  const rangeProps = mergeProps(() => slider().rangeProps, props);
+  return createComponent(ark.div, rangeProps);
+};
+
+export { RangeSliderRange };

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

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const rangeSliderContext = require('./range-slider-context.cjs');
+
+const RangeSliderThumb = props => {
+  const [thumbParams, restProps] = createSplitProps.createSplitProps()(props, ['index']);
+  const api = rangeSliderContext.useRangeSliderContext();
+  const thumbProps = solid.mergeProps(() => api().getThumbProps(thumbParams.index()), restProps);
+  return web.createComponent(factory.ark.div, thumbProps);
+};
+
+exports.RangeSliderThumb = RangeSliderThumb;

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

@@ -0,0 +1,9 @@
+import type { JSX, type Accessor } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+type RangeSliderThumbParams = {
+    index: Accessor<number>;
+};
+export type RangeSliderThumbProps = Assign<HTMLArkProps<'div'>, RangeSliderThumbParams>;
+export declare const RangeSliderThumb: (props: RangeSliderThumbProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,14 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { useRangeSliderContext } from './range-slider-context.mjs';
+
+const RangeSliderThumb = props => {
+  const [thumbParams, restProps] = createSplitProps()(props, ['index']);
+  const api = useRangeSliderContext();
+  const thumbProps = mergeProps(() => api().getThumbProps(thumbParams.index()), restProps);
+  return createComponent(ark.div, thumbProps);
+};
+
+export { RangeSliderThumb };

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

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const rangeSliderContext = require('./range-slider-context.cjs');
+
+const RangeSliderTrack = props => {
+  const slider = rangeSliderContext.useRangeSliderContext();
+  const trackProps = solid.mergeProps(() => slider().trackProps, props);
+  return web.createComponent(factory.ark.div, trackProps);
+};
+
+exports.RangeSliderTrack = RangeSliderTrack;

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

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type RangeSliderTrackProps = HTMLArkProps<'div'>;
+export declare const RangeSliderTrack: (props: RangeSliderTrackProps) => JSX.Element;

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

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useRangeSliderContext } from './range-slider-context.mjs';
+
+const RangeSliderTrack = props => {
+  const slider = useRangeSliderContext();
+  const trackProps = mergeProps(() => slider().trackProps, props);
+  return createComponent(ark.div, trackProps);
+};
+
+export { RangeSliderTrack };

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

@@ -0,0 +1 @@
+export { anatomy as rangeSliderAnatomy } from '@zag-js/range-slider';

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

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const runIfFn = require('../run-if-fn.cjs');
+const rangeSliderContext = require('./range-slider-context.cjs');
+const useRangeSlider = require('./use-range-slider.cjs');
+
+const RangeSlider = props => {
+  const [useRangeSliderProps, divProps] = createSplitProps.createSplitProps()(props, ['aria-label', 'aria-labelledby', 'dir', 'disabled', 'form', 'getAriaValueText', 'getRootNode', 'id', 'ids', 'invalid', 'max', 'min', 'minStepsBetweenThumbs', 'name', 'onChange', 'onChangeEnd', 'onChangeStart', 'orientation', 'readOnly', 'step', 'thumbAlignment', 'value']);
+  const api = useRangeSlider.useRangeSlider(useRangeSliderProps);
+  const getChildren = () => runIfFn.runIfFn(props.children, api);
+  return web.createComponent(rangeSliderContext.RangeSliderProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(factory.ark.div, web.mergeProps(() => api().rootProps, divProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+exports.RangeSlider = RangeSlider;

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

@@ -0,0 +1,8 @@
+import { type JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type UseRangeSliderProps, type UseRangeSliderReturn } from './use-range-slider';
+export type RangeSliderProps = Assign<HTMLArkProps<'div'>, UseRangeSliderProps & {
+    children?: JSX.Element | ((api: UseRangeSliderReturn) => JSX.Element);
+}>;
+export declare const RangeSlider: (props: RangeSliderProps) => JSX.Element;

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

@@ -0,0 +1,24 @@
+import { createComponent, mergeProps } from 'solid-js/web';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
+import { RangeSliderProvider } from './range-slider-context.mjs';
+import { useRangeSlider } from './use-range-slider.mjs';
+
+const RangeSlider = props => {
+  const [useRangeSliderProps, divProps] = createSplitProps()(props, ['aria-label', 'aria-labelledby', 'dir', 'disabled', 'form', 'getAriaValueText', 'getRootNode', 'id', 'ids', 'invalid', 'max', 'min', 'minStepsBetweenThumbs', 'name', 'onChange', 'onChangeEnd', 'onChangeStart', 'orientation', 'readOnly', 'step', 'thumbAlignment', 'value']);
+  const api = useRangeSlider(useRangeSliderProps);
+  const getChildren = () => runIfFn(props.children, api);
+  return createComponent(RangeSliderProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergeProps(() => api().rootProps, divProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+export { RangeSlider };

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

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const rangeSlider = require('@zag-js/range-slider');
+const solid = require('@zag-js/solid');
+const solidJs = require('solid-js');
+const environmentContext = require('../environment/environment-context.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const rangeSlider__namespace = /*#__PURE__*/_interopNamespaceDefault(rangeSlider);
+
+const useRangeSlider = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
+  const context = solidJs.mergeProps({ id: solidJs.createUniqueId(), values: props.value, getRootNode }, props);
+  const [state, send] = solid.useMachine(rangeSlider__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => rangeSlider__namespace.connect(state, send, solid.normalizeProps));
+};
+
+exports.useRangeSlider = useRangeSlider;

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

@@ -0,0 +1,34 @@
+import type { Accessor, JSX } from 'solid-js';
+import * as rangeSlider from '@zag-js/range-slider';
+import { type Optional } from '../types';
+export type UseRangeSliderProps = Optional<rangeSlider.Context, 'id'>;
+export type UseRangeSliderReturn = ReturnType<typeof useRangeSlider>;
+export declare const useRangeSlider: (props: UseRangeSliderProps) => Accessor<{
+    value: number[];
+    isDragging: boolean;
+    isFocused: boolean;
+    setValue(value: number[]): void;
+    getThumbValue(index: number): number;
+    setThumbValue(index: number, value: number): void;
+    getValuePercent: (value: number) => number;
+    getPercentValue: (percent: number) => number;
+    getThumbPercent(index: number): number;
+    setThumbPercent(index: number, percent: number): void;
+    getThumbMin(index: number): number;
+    getThumbMax(index: number): number;
+    increment(index: number): void;
+    decrement(index: number): void;
+    focus(): void;
+    labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
+    rootProps: JSX.HTMLAttributes<any>;
+    outputProps: JSX.OutputHTMLAttributes<HTMLElement>;
+    trackProps: JSX.HTMLAttributes<any>;
+    getThumbProps(index: number): JSX.HTMLAttributes<any>;
+    getHiddenInputProps(index: number): JSX.InputHTMLAttributes<HTMLInputElement>;
+    rangeProps: JSX.HTMLAttributes<any>;
+    controlProps: JSX.HTMLAttributes<any>;
+    markerGroupProps: JSX.HTMLAttributes<any>;
+    getMarkerProps({ value }: {
+        value: number;
+    }): JSX.HTMLAttributes<any>;
+}>;

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

@@ -0,0 +1,15 @@
+import * as rangeSlider from '@zag-js/range-slider';
+import { useMachine, normalizeProps } from '@zag-js/solid';
+import { mergeProps, createUniqueId, createMemo } from 'solid-js';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
+
+const useRangeSlider = (props) => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps({ id: createUniqueId(), values: props.value, getRootNode }, props);
+  const [state, send] = useMachine(rangeSlider.machine(context), {
+    context
+  });
+  return createMemo(() => rangeSlider.connect(state, send, normalizeProps));
+};
+
+export { useRangeSlider };

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

@@ -1,16 +1,17 @@
 import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
 import { type connect } from '@zag-js/rating-group';
+import type { Accessor } from 'solid-js';
 export type RatingContext = ReturnType<ReturnType<typeof connect>['getRatingState']>;
-export declare const RatingProvider: ContextProviderComponent<{
+export declare const RatingProvider: ContextProviderComponent<Accessor<{
     isEqual: boolean;
     isValueEmpty: boolean;
     isHighlighted: boolean;
     isHalf: boolean;
     isChecked: boolean;
-}>, useRatingContext: () => {
+}>>, useRatingContext: () => Accessor<{
     isEqual: boolean;
     isValueEmpty: boolean;
     isHighlighted: boolean;
     isHalf: boolean;
     isChecked: boolean;
-};
+}>;

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

@@ -3,17 +3,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
-const solidJs = require('solid-js');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const ratingGroupContext = require('./rating-group-context.cjs');
 
 const RatingGroupControl = props => {
-  const ratingGroup = ratingGroupContext.useRatingGroupContext();
-  const view = solidJs.children(() => runIfFn.runIfFn(props.children, ratingGroup));
-  return web.createComponent(factory.ark.div, web.mergeProps(() => ratingGroup().controlProps, props, {
+  const api = ratingGroupContext.useRatingGroupContext();
+  const getChildren = () => runIfFn.runIfFn(props.children, api);
+  const controlProps = solid.mergeProps(() => api().controlProps, props);
+  return web.createComponent(factory.ark.div, web.mergeProps(controlProps, {
     get children() {
-      return view();
+      return getChildren();
     }
   }));
 };

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

@@ -1,7 +1,8 @@
 import { type JSX } from 'solid-js/jsx-runtime';
 import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
 import { type RatingGroupContext } from './rating-group-context';
-export type RatingGroupControlProps = Omit<HTMLArkProps<'div'>, 'children'> & {
+export type RatingGroupControlProps = Assign<HTMLArkProps<'div'>, {
     children: JSX.Element | ((context: RatingGroupContext) => JSX.Element);
-};
+}>;
 export declare const RatingGroupControl: (props: RatingGroupControlProps) => JSX.Element;

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

@@ -1,15 +1,16 @@
-import { createComponent, mergeProps } from 'solid-js/web';
-import { children } from 'solid-js';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { useRatingGroupContext } from './rating-group-context.mjs';
 
 const RatingGroupControl = props => {
-  const ratingGroup = useRatingGroupContext();
-  const view = children(() => runIfFn(props.children, ratingGroup));
-  return createComponent(ark.div, mergeProps(() => ratingGroup().controlProps, props, {
+  const api = useRatingGroupContext();
+  const getChildren = () => runIfFn(props.children, api);
+  const controlProps = mergeProps(() => api().controlProps, props);
+  return createComponent(ark.div, mergeProps$1(controlProps, {
     get children() {
-      return view();
+      return getChildren();
     }
   }));
 };

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

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const ratingGroupContext = require('./rating-group-context.cjs');
 
 const RatingGroupLabel = props => {
   const ratingGroup = ratingGroupContext.useRatingGroupContext();
-  return web.createComponent(factory.ark.label, web.mergeProps(() => ratingGroup().labelProps, props));
+  const labelProps = solid.mergeProps(() => ratingGroup().labelProps, props);
+  return web.createComponent(factory.ark.label, labelProps);
 };
 
 exports.RatingGroupLabel = RatingGroupLabel;

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

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useRatingGroupContext } from './rating-group-context.mjs';
 
 const RatingGroupLabel = props => {
   const ratingGroup = useRatingGroupContext();
-  return createComponent(ark.label, mergeProps(() => ratingGroup().labelProps, props));
+  const labelProps = mergeProps(() => ratingGroup().labelProps, props);
+  return createComponent(ark.label, labelProps);
 };
 
 export { RatingGroupLabel };

package/dist/rating-group/rating-group.cjs

@@ -3,20 +3,22 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const ratingGroupContext = require('./rating-group-context.cjs');
 const useRatingGroup = require('./use-rating-group.cjs');
 
 const RatingGroup = props => {
-  const [useRatingGroupProps, inputProps] = createSplitProps.createSplitProps()(props, ['allowHalf', 'autoFocus', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'max', 'name', 'onChange', 'onHover', 'readOnly', 'translations', 'value']);
-  const ratingGroup = useRatingGroup.useRatingGroup(useRatingGroupProps);
+  const [ratingParams, restProps] = createSplitProps.createSplitProps()(props, ['allowHalf', 'autoFocus', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'max', 'name', 'onChange', 'onHover', 'readOnly', 'translations', 'value']);
+  const api = useRatingGroup.useRatingGroup(ratingParams);
+  const rootProps = solid.mergeProps(() => api().rootProps, restProps);
   return web.createComponent(ratingGroupContext.RatingGroupProvider, {
-    value: ratingGroup,
+    value: api,
     get children() {
-      return web.createComponent(factory.ark.div, web.mergeProps(() => ratingGroup().rootProps, {
+      return web.createComponent(factory.ark.div, web.mergeProps(rootProps, {
         get children() {
-          return [web.memo(() => props.children), web.createComponent(factory.ark.input, web.mergeProps(() => ratingGroup().hiddenInputProps, inputProps))];
+          return [web.memo(() => restProps.children), web.createComponent(factory.ark.input, web.mergeProps(() => api().hiddenInputProps))];
         }
       }));
     }

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

@@ -1,6 +1,6 @@
 import type { JSX } from 'solid-js';
-import { type Assign } from '@polymorphic-factory/solid';
 import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
 import { type UseRatingGroupProps } from './use-rating-group';
-export type RatingGroupProps = Assign<HTMLArkProps<'input'>, UseRatingGroupProps>;
+export type RatingGroupProps = Assign<HTMLArkProps<'div'>, UseRatingGroupProps>;
 export declare const RatingGroup: (props: RatingGroupProps) => JSX.Element;

package/dist/rating-group/rating-group.mjs

@@ -1,18 +1,20 @@
-import { createComponent, mergeProps, memo } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1, memo } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { RatingGroupProvider } from './rating-group-context.mjs';
 import { useRatingGroup } from './use-rating-group.mjs';
 
 const RatingGroup = props => {
-  const [useRatingGroupProps, inputProps] = createSplitProps()(props, ['allowHalf', 'autoFocus', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'max', 'name', 'onChange', 'onHover', 'readOnly', 'translations', 'value']);
-  const ratingGroup = useRatingGroup(useRatingGroupProps);
+  const [ratingParams, restProps] = createSplitProps()(props, ['allowHalf', 'autoFocus', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'max', 'name', 'onChange', 'onHover', 'readOnly', 'translations', 'value']);
+  const api = useRatingGroup(ratingParams);
+  const rootProps = mergeProps(() => api().rootProps, restProps);
   return createComponent(RatingGroupProvider, {
-    value: ratingGroup,
+    value: api,
     get children() {
-      return createComponent(ark.div, mergeProps(() => ratingGroup().rootProps, {
+      return createComponent(ark.div, mergeProps$1(rootProps, {
         get children() {
-          return [memo(() => props.children), createComponent(ark.input, mergeProps(() => ratingGroup().hiddenInputProps, inputProps))];
+          return [memo(() => restProps.children), createComponent(ark.input, mergeProps$1(() => api().hiddenInputProps))];
         }
       }));
     }

package/dist/rating-group/rating.cjs

@@ -3,24 +3,25 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
-const solidJs = require('solid-js');
+const solid = require('@zag-js/solid');
+const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const ratingContext = require('./rating-context.cjs');
 const ratingGroupContext = require('./rating-group-context.cjs');
 
 const Rating = props => {
-  const ratingGroup = ratingGroupContext.useRatingGroupContext();
-  const ratingState = ratingGroup().getRatingState(props.index);
-  const view = solidJs.children(() => runIfFn.runIfFn(props.children, ratingState));
-  return web.createComponent(factory.ark.span, web.mergeProps(() => ratingGroup().getRatingProps({
-    index: props.index
-  }), props, {
+  const [ratingParams, restProps] = createSplitProps.createSplitProps()(props, ['index']);
+  const api = ratingGroupContext.useRatingGroupContext();
+  const ratingState = () => api().getRatingState(ratingParams.index);
+  const getChildren = () => runIfFn.runIfFn(restProps.children, ratingState);
+  const ratingProps = solid.mergeProps(() => api().getRatingProps(ratingParams), restProps);
+  return web.createComponent(factory.ark.span, web.mergeProps(ratingProps, {
     get children() {
       return web.createComponent(ratingContext.RatingProvider, {
         value: ratingState,
         get children() {
-          return view();
+          return getChildren();
         }
       });
     }

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

@@ -1,8 +1,10 @@
+import type { Accessor } from 'solid-js';
 import { type JSX } from 'solid-js/jsx-runtime';
 import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
 import { type RatingContext } from './rating-context';
-export type RatingProps = Omit<HTMLArkProps<'span'>, 'children'> & {
+export type RatingProps = Assign<HTMLArkProps<'span'>, {
     index: number;
-    children: (state: RatingContext) => JSX.Element | JSX.Element;
-};
+    children: (state: Accessor<RatingContext>) => JSX.Element | JSX.Element;
+}>;
 export declare const Rating: (props: RatingProps) => JSX.Element;