@ark-ui/solid 0.11.0 → 1.0.0-beta.1

package/select/select-item.mjs

@@ -0,0 +1,26 @@
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
+import { useSelectContext } from './select-context.mjs';
+import { SelectItemProvider } from './select-item-context.mjs';
+
+const SelectItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['item']);
+  const api = useSelectContext();
+  const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
+  const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
+  return createComponent(SelectItemProvider, {
+    value: itemProps,
+    get children() {
+      return createComponent(ark.div, mergeProps$1(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+export { SelectItem };

package/select/select-label.cjs

@@ -9,8 +9,8 @@ const selectContext = require('./select-context.cjs');
 
 const SelectLabel = props => {
   const api = selectContext.useSelectContext();
-  const labelProps = solid.mergeProps(() => api().labelProps, props);
-  return web.createComponent(factory.ark.label, labelProps);
+  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(factory.ark.label, mergedProps);
 };
 
 exports.SelectLabel = SelectLabel;

package/select/select-label.mjs

@@ -5,8 +5,8 @@ import { useSelectContext } from './select-context.mjs';
 
 const SelectLabel = props => {
   const api = useSelectContext();
-  const labelProps = mergeProps(() => api().labelProps, props);
-  return createComponent(ark.label, labelProps);
+  const mergedProps = mergeProps(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
 };
 
 export { SelectLabel };

package/select/select-positioner.cjs

@@ -9,8 +9,8 @@ const selectContext = require('./select-context.cjs');
 
 const SelectPositioner = props => {
   const api = selectContext.useSelectContext();
-  const positionerProps = solid.mergeProps(() => api().positionerProps, props);
-  return web.createComponent(factory.ark.div, positionerProps);
+  const mergedProps = solid.mergeProps(() => api().positionerProps, props);
+  return web.createComponent(factory.ark.div, mergedProps);
 };
 
 exports.SelectPositioner = SelectPositioner;

package/select/select-positioner.mjs

@@ -5,8 +5,8 @@ import { useSelectContext } from './select-context.mjs';
 
 const SelectPositioner = props => {
   const api = useSelectContext();
-  const positionerProps = mergeProps(() => api().positionerProps, props);
-  return createComponent(ark.div, positionerProps);
+  const mergedProps = mergeProps(() => api().positionerProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 export { SelectPositioner };

package/select/select-trigger.cjs

@@ -9,8 +9,8 @@ const selectContext = require('./select-context.cjs');
 
 const SelectTrigger = props => {
   const api = selectContext.useSelectContext();
-  const triggerProps = solid.mergeProps(() => api().triggerProps, props);
-  return web.createComponent(factory.ark.button, triggerProps);
+  const mergedProps = solid.mergeProps(() => api().triggerProps, props);
+  return web.createComponent(factory.ark.button, mergedProps);
 };
 
 exports.SelectTrigger = SelectTrigger;

package/select/select-trigger.mjs

@@ -5,8 +5,8 @@ import { useSelectContext } from './select-context.mjs';
 
 const SelectTrigger = props => {
   const api = useSelectContext();
-  const triggerProps = mergeProps(() => api().triggerProps, props);
-  return createComponent(ark.button, triggerProps);
+  const mergedProps = mergeProps(() => api().triggerProps, props);
+  return createComponent(ark.button, mergedProps);
 };
 
 export { SelectTrigger };

package/select/select-value-text.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const anatomy = require('@ark-ui/anatomy');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const selectContext = require('./select-context.cjs');
+
+const SelectValueText = props => {
+  const api = selectContext.useSelectContext();
+  const mergedProps = solid.mergeProps(() => anatomy.selectAnatomy.build().valueText.attrs, props);
+  return web.createComponent(factory.ark.span, web.mergeProps(mergedProps, {
+    get children() {
+      return api().valueAsString || props.placeholder;
+    }
+  }));
+};
+
+exports.SelectValueText = SelectValueText;

package/select/select-value-text.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export interface SelectValueTextProps extends HTMLArkProps<'span'> {
+    placeholder?: string;
+}
+export declare const SelectValueText: (props: SelectValueTextProps) => JSX.Element;

package/select/select-value-text.mjs

@@ -0,0 +1,17 @@
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { selectAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useSelectContext } from './select-context.mjs';
+
+const SelectValueText = props => {
+  const api = useSelectContext();
+  const mergedProps = mergeProps(() => selectAnatomy.build().valueText.attrs, props);
+  return createComponent(ark.span, mergeProps$1(mergedProps, {
+    get children() {
+      return api().valueAsString || props.placeholder;
+    }
+  }));
+};
+
+export { SelectValueText };

package/select/select.cjs

@@ -3,19 +3,26 @@
 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 runIfFn = require('../run-if-fn.cjs');
 const selectContext = require('./select-context.cjs');
 const useSelect = require('./use-select.cjs');
 
 const Select = props => {
-  const [selectParams, restProps] = createSplitProps.createSplitProps()(props, ['closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedOption', 'id', 'ids', 'invalid', 'loop', 'name', 'onChange', 'onClose', 'onFocusOutside', 'onHighlight', 'onInteractOutside', 'onInteractOutside', 'onOpen', 'onPointerDownOutside', 'positioning', 'readOnly', 'selectedOption', 'selectOnTab']);
-  const api = useSelect.useSelect(selectParams);
-  const getChildren = () => runIfFn.runIfFn(restProps.children, api);
+  const [selectProps, localProps] = createSplitProps.createSplitProps()(props, ['closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedValue', 'id', 'ids', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loop', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'positioning', 'readOnly', 'selectOnBlur', 'value']);
+  const api = useSelect.useSelect(selectProps);
+  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn.runIfFn(localProps.children, api);
   return web.createComponent(selectContext.SelectProvider, {
     value: api,
     get children() {
-      return getChildren();
+      return web.createComponent(factory.ark.div, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
     }
   });
 };

package/select/select.d.ts

@@ -1,8 +1,9 @@
 import { type JSX } from 'solid-js/jsx-runtime';
-import type { Assign } from '../types';
+import { type HTMLArkProps } from '../factory';
+import type { Assign, CollectionItem } from '../types';
 import { type SelectContext } from './select-context';
 import { type UseSelectProps } from './use-select';
-export type SelectProps = Assign<UseSelectProps, {
-    children?: JSX.Element | ((context: SelectContext) => JSX.Element);
-}>;
-export declare const Select: (props: SelectProps) => JSX.Element;
+export type SelectProps<T extends CollectionItem> = Assign<HTMLArkProps<'div'>, UseSelectProps<T>> & {
+    children?: JSX.Element | ((context: SelectContext<T>) => JSX.Element);
+};
+export declare const Select: <T extends CollectionItem>(props: SelectProps<T>) => JSX.Element;

package/select/select.mjs

@@ -1,17 +1,24 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { SelectProvider } from './select-context.mjs';
 import { useSelect } from './use-select.mjs';
 
 const Select = props => {
-  const [selectParams, restProps] = createSplitProps()(props, ['closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedOption', 'id', 'ids', 'invalid', 'loop', 'name', 'onChange', 'onClose', 'onFocusOutside', 'onHighlight', 'onInteractOutside', 'onInteractOutside', 'onOpen', 'onPointerDownOutside', 'positioning', 'readOnly', 'selectedOption', 'selectOnTab']);
-  const api = useSelect(selectParams);
-  const getChildren = () => runIfFn(restProps.children, api);
+  const [selectProps, localProps] = createSplitProps()(props, ['closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedValue', 'id', 'ids', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loop', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'positioning', 'readOnly', 'selectOnBlur', 'value']);
+  const api = useSelect(selectProps);
+  const mergedProps = mergeProps(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
   return createComponent(SelectProvider, {
     value: api,
     get children() {
-      return getChildren();
+      return createComponent(ark.div, mergeProps$1(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
     }
   });
 };

package/select/select.test.d.ts

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

package/select/use-select.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const select = require('@zag-js/select');
 const solid = require('@zag-js/solid');
 const solidJs = require('solid-js');
+const createSplitProps = require('../create-split-props.cjs');
 require('../environment/index.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
@@ -28,8 +29,15 @@ function _interopNamespaceDefault(e) {
 const select__namespace = /*#__PURE__*/_interopNamespaceDefault(select);
 
 const useSelect = (props) => {
+  const [collectionOptions, rest] = createSplitProps.createSplitProps()(props, [
+    "isItemDisabled",
+    "itemToValue",
+    "itemToString",
+    "items"
+  ]);
+  const collection = select__namespace.collection(collectionOptions);
   const getRootNode = environmentContext.useEnvironmentContext();
-  const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
+  const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode, collection }, rest);
   const [state, send] = solid.useMachine(select__namespace.machine(context), {
     context
   });

package/select/use-select.d.ts

@@ -1,7 +1,9 @@
+import type { CollectionOptions } from '@zag-js/select';
 import * as select from '@zag-js/select';
 import { type PropTypes } from '@zag-js/solid';
 import { type Accessor } from 'solid-js';
-import { type Optional } from '../types';
-export type UseSelectProps = Optional<select.Context, 'id'>;
-export type UseSelectReturn = Accessor<select.Api<PropTypes>>;
-export declare const useSelect: (props: UseSelectProps) => UseSelectReturn;
+import { type CollectionItem, type Optional } from '../types';
+export interface UseSelectProps<T extends CollectionItem> extends CollectionOptions<T>, Omit<Optional<select.Context<T>, 'id'>, 'collection'> {
+}
+export type UseSelectReturn<T extends CollectionItem> = Accessor<select.Api<PropTypes, T>>;
+export declare const useSelect: <T extends CollectionItem>(props: UseSelectProps<T>) => UseSelectReturn<T>;

package/select/use-select.mjs

@@ -1,12 +1,20 @@
 import * as select from '@zag-js/select';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
 import { createUniqueId, createMemo } from 'solid-js';
+import { createSplitProps } from '../create-split-props.mjs';
 import '../environment/index.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useSelect = (props) => {
+  const [collectionOptions, rest] = createSplitProps()(props, [
+    "isItemDisabled",
+    "itemToValue",
+    "itemToString",
+    "items"
+  ]);
+  const collection = select.collection(collectionOptions);
   const getRootNode = useEnvironmentContext();
-  const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+  const context = mergeProps({ id: createUniqueId(), getRootNode, collection }, rest);
   const [state, send] = useMachine(select.machine(context), {
     context
   });

package/setup-test.d.ts

@@ -0,0 +1,2 @@
+import type { AnatomyInstance } from '@ark-ui/anatomy';
+export declare const getParts: (anatomy: AnatomyInstance<string>) => string[];

package/slider/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const slider$1 = require('./slider.cjs');
+const slider = require('./slider.cjs');
 const sliderContext = require('./slider-context.cjs');
 const sliderControl = require('./slider-control.cjs');
 const sliderLabel = require('./slider-label.cjs');
@@ -12,10 +12,9 @@ const sliderOutput = require('./slider-output.cjs');
 const sliderRange = require('./slider-range.cjs');
 const sliderThumb = require('./slider-thumb.cjs');
 const sliderTrack = require('./slider-track.cjs');
-const slider = require('@zag-js/slider');
 
-const Slider = Object.assign(slider$1.Slider, {
-  Root: slider$1.Slider,
+const Slider = Object.assign(slider.Slider, {
+  Root: slider.Slider,
   Control: sliderControl.SliderControl,
   Label: sliderLabel.SliderLabel,
   Marker: sliderMarker.SliderMarker,
@@ -35,8 +34,4 @@ exports.SliderOutput = sliderOutput.SliderOutput;
 exports.SliderRange = sliderRange.SliderRange;
 exports.SliderThumb = sliderThumb.SliderThumb;
 exports.SliderTrack = sliderTrack.SliderTrack;
-Object.defineProperty(exports, 'sliderAnatomy', {
-  enumerable: true,
-  get: () => slider.anatomy
-});
 exports.Slider = Slider;

package/slider/index.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'solid-js';
 import { type SliderProps } from './slider';
-import { useSliderContext } from './slider-context';
+import { useSliderContext, type SliderContext } from './slider-context';
 import { SliderControl, type SliderControlProps } from './slider-control';
 import { SliderLabel, type SliderLabelProps } from './slider-label';
 import { SliderMarker, type SliderMarkerProps } from './slider-marker';
@@ -9,7 +9,6 @@ import { SliderOutput, type SliderOutputProps } from './slider-output';
 import { SliderRange, type SliderRangeProps } from './slider-range';
 import { SliderThumb, type SliderThumbProps } from './slider-thumb';
 import { SliderTrack, type SliderTrackProps } from './slider-track';
-import { sliderAnatomy } from './slider.anatomy';
 declare const Slider: ((props: SliderProps) => JSX.Element) & {
     Root: (props: SliderProps) => JSX.Element;
     Control: (props: SliderControlProps) => JSX.Element;
@@ -21,5 +20,5 @@ declare const Slider: ((props: SliderProps) => JSX.Element) & {
     Thumb: (props: SliderThumbProps) => JSX.Element;
     Track: (props: SliderTrackProps) => JSX.Element;
 };
-export { Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderOutput, SliderRange, SliderThumb, SliderTrack, sliderAnatomy, useSliderContext, };
-export type { SliderControlProps, SliderLabelProps, SliderMarkerGroupProps, SliderMarkerProps, SliderOutputProps, SliderProps, SliderRangeProps, SliderThumbProps, SliderTrackProps, };
+export { Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderOutput, SliderRange, SliderThumb, SliderTrack, useSliderContext, };
+export type { SliderContext, SliderControlProps, SliderLabelProps, SliderMarkerGroupProps, SliderMarkerProps, SliderOutputProps, SliderProps, SliderRangeProps, SliderThumbProps, SliderTrackProps, };

package/slider/index.mjs

@@ -8,7 +8,6 @@ import { SliderOutput } from './slider-output.mjs';
 import { SliderRange } from './slider-range.mjs';
 import { SliderThumb } from './slider-thumb.mjs';
 import { SliderTrack } from './slider-track.mjs';
-export { anatomy as sliderAnatomy } from '@zag-js/slider';
 
 const Slider = Object.assign(Slider$1, {
   Root: Slider$1,

package/slider/slider-control.cjs

@@ -9,8 +9,8 @@ const sliderContext = require('./slider-context.cjs');
 
 const SliderControl = props => {
   const api = sliderContext.useSliderContext();
-  const controlProps = solid.mergeProps(() => api().controlProps, props);
-  return web.createComponent(factory.ark.div, controlProps);
+  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  return web.createComponent(factory.ark.div, mergedProps);
 };
 
 exports.SliderControl = SliderControl;

package/slider/slider-control.mjs

@@ -5,8 +5,8 @@ import { useSliderContext } from './slider-context.mjs';
 
 const SliderControl = props => {
   const api = useSliderContext();
-  const controlProps = mergeProps(() => api().controlProps, props);
-  return createComponent(ark.div, controlProps);
+  const mergedProps = mergeProps(() => api().controlProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 export { SliderControl };

package/slider/slider-label.cjs

@@ -9,8 +9,8 @@ const sliderContext = require('./slider-context.cjs');
 
 const SliderLabel = props => {
   const api = sliderContext.useSliderContext();
-  const labelProps = solid.mergeProps(() => api().labelProps, props);
-  return web.createComponent(factory.ark.label, labelProps);
+  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(factory.ark.label, mergedProps);
 };
 
 exports.SliderLabel = SliderLabel;

package/slider/slider-label.mjs

@@ -5,8 +5,8 @@ import { useSliderContext } from './slider-context.mjs';
 
 const SliderLabel = props => {
   const api = useSliderContext();
-  const labelProps = mergeProps(() => api().labelProps, props);
-  return createComponent(ark.label, labelProps);
+  const mergedProps = mergeProps(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
 };
 
 export { SliderLabel };

package/slider/slider-marker-group.cjs

@@ -9,8 +9,8 @@ const sliderContext = require('./slider-context.cjs');
 
 const SliderMarkerGroup = props => {
   const api = sliderContext.useSliderContext();
-  const markerGroupProps = solid.mergeProps(() => api().markerGroupProps, props);
-  return web.createComponent(factory.ark.div, markerGroupProps);
+  const mergedProps = solid.mergeProps(() => api().markerGroupProps, props);
+  return web.createComponent(factory.ark.div, mergedProps);
 };
 
 exports.SliderMarkerGroup = SliderMarkerGroup;

package/slider/slider-marker-group.mjs

@@ -5,8 +5,8 @@ import { useSliderContext } from './slider-context.mjs';
 
 const SliderMarkerGroup = props => {
   const api = useSliderContext();
-  const markerGroupProps = mergeProps(() => api().markerGroupProps, props);
-  return createComponent(ark.div, markerGroupProps);
+  const mergedProps = mergeProps(() => api().markerGroupProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 export { SliderMarkerGroup };

package/slider/slider-marker.cjs

@@ -9,10 +9,10 @@ const factory = require('../factory.cjs');
 const sliderContext = require('./slider-context.cjs');
 
 const SliderMarker = props => {
-  const [markerParams, restProps] = createSplitProps.createSplitProps()(props, ['value']);
+  const [markerProps, localProps] = createSplitProps.createSplitProps()(props, ['value']);
   const api = sliderContext.useSliderContext();
-  const markerProps = solid.mergeProps(() => api().getMarkerProps(markerParams), restProps);
-  return web.createComponent(factory.ark.span, markerProps);
+  const mergedProps = solid.mergeProps(() => api().getMarkerProps(markerProps), localProps);
+  return web.createComponent(factory.ark.span, mergedProps);
 };
 
 exports.SliderMarker = SliderMarker;

package/slider/slider-marker.d.ts

@@ -1,9 +1,6 @@
 import { JSX } from 'solid-js';
+import type { MarkerProps } from '@zag-js/slider';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-type MarkerParams = {
-    value: number;
-};
-export type SliderMarkerProps = Assign<HTMLArkProps<'span'>, MarkerParams>;
+export type SliderMarkerProps = Assign<HTMLArkProps<'span'>, MarkerProps>;
 export declare const SliderMarker: (props: SliderMarkerProps) => JSX.Element;
-export {};

package/slider/slider-marker.mjs

@@ -5,10 +5,10 @@ import { ark } from '../factory.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
 const SliderMarker = props => {
-  const [markerParams, restProps] = createSplitProps()(props, ['value']);
+  const [markerProps, localProps] = createSplitProps()(props, ['value']);
   const api = useSliderContext();
-  const markerProps = mergeProps(() => api().getMarkerProps(markerParams), restProps);
-  return createComponent(ark.span, markerProps);
+  const mergedProps = mergeProps(() => api().getMarkerProps(markerProps), localProps);
+  return createComponent(ark.span, mergedProps);
 };
 
 export { SliderMarker };

package/slider/slider-range.cjs

@@ -8,9 +8,9 @@ const factory = require('../factory.cjs');
 const sliderContext = require('./slider-context.cjs');
 
 const SliderRange = props => {
-  const slider = sliderContext.useSliderContext();
-  const rangeProps = solid.mergeProps(() => slider().rangeProps, props);
-  return web.createComponent(factory.ark.div, rangeProps);
+  const api = sliderContext.useSliderContext();
+  const mergedProps = solid.mergeProps(() => api().rangeProps, props);
+  return web.createComponent(factory.ark.div, mergedProps);
 };
 
 exports.SliderRange = SliderRange;

package/slider/slider-range.mjs

@@ -4,9 +4,9 @@ import { ark } from '../factory.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
 const SliderRange = props => {
-  const slider = useSliderContext();
-  const rangeProps = mergeProps(() => slider().rangeProps, props);
-  return createComponent(ark.div, rangeProps);
+  const api = useSliderContext();
+  const mergedProps = mergeProps(() => api().rangeProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 export { SliderRange };

package/slider/slider-thumb.cjs

@@ -4,18 +4,15 @@ 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 sliderContext = require('./slider-context.cjs');
 
-const _tmpl$ = /*#__PURE__*/web.template(`<input>`);
 const SliderThumb = props => {
+  const [thumbProps, localProps] = createSplitProps.createSplitProps()(props, ['index']);
   const api = sliderContext.useSliderContext();
-  const mergePdrops = solid.mergeProps(() => api().thumbProps, props);
-  return [web.createComponent(factory.ark.div, mergePdrops), (() => {
-    const _el$ = _tmpl$();
-    web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
-    return _el$;
-  })()];
+  const mergePdrops = solid.mergeProps(() => api().getThumbProps(thumbProps), localProps);
+  return web.createComponent(factory.ark.div, mergePdrops);
 };
 
 exports.SliderThumb = SliderThumb;

package/slider/slider-thumb.d.ts

@@ -1,4 +1,6 @@
 import { JSX } from 'solid-js';
+import type { ThumbProps } from '@zag-js/slider';
 import { type HTMLArkProps } from '../factory';
-export type SliderThumbProps = HTMLArkProps<'div'>;
+import type { Assign } from '../types';
+export type SliderThumbProps = Assign<HTMLArkProps<'div'>, ThumbProps>;
 export declare const SliderThumb: (props: SliderThumbProps) => JSX.Element;

package/slider/slider-thumb.mjs

@@ -1,17 +1,14 @@
-import { createComponent, spread, mergeProps as mergeProps$1, template } from 'solid-js/web';
+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 { useSliderContext } from './slider-context.mjs';
 
-const _tmpl$ = /*#__PURE__*/template(`<input>`);
 const SliderThumb = props => {
+  const [thumbProps, localProps] = createSplitProps()(props, ['index']);
   const api = useSliderContext();
-  const mergePdrops = mergeProps(() => api().thumbProps, props);
-  return [createComponent(ark.div, mergePdrops), (() => {
-    const _el$ = _tmpl$();
-    spread(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
-    return _el$;
-  })()];
+  const mergePdrops = mergeProps(() => api().getThumbProps(thumbProps), localProps);
+  return createComponent(ark.div, mergePdrops);
 };
 
 export { SliderThumb };

package/slider/slider-track.cjs

@@ -8,9 +8,9 @@ const factory = require('../factory.cjs');
 const sliderContext = require('./slider-context.cjs');
 
 const SliderTrack = props => {
-  const slider = sliderContext.useSliderContext();
-  const trackProps = solid.mergeProps(() => slider().trackProps, props);
-  return web.createComponent(factory.ark.div, trackProps);
+  const api = sliderContext.useSliderContext();
+  const mergedProps = solid.mergeProps(() => api().trackProps, props);
+  return web.createComponent(factory.ark.div, mergedProps);
 };
 
 exports.SliderTrack = SliderTrack;

package/slider/slider-track.mjs

@@ -4,9 +4,9 @@ import { ark } from '../factory.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
 const SliderTrack = props => {
-  const slider = useSliderContext();
-  const trackProps = mergeProps(() => slider().trackProps, props);
-  return createComponent(ark.div, trackProps);
+  const api = useSliderContext();
+  const mergedProps = mergeProps(() => api().trackProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 export { SliderTrack };

package/slider/slider.cjs

@@ -11,14 +11,14 @@ const sliderContext = require('./slider-context.cjs');
 const useSlider = require('./use-slider.cjs');
 
 const Slider = props => {
-  const [sliderParams, restProps] = createSplitProps.createSplitProps()(props, ['aria-label', 'aria-labelledby', 'dir', 'disabled', 'focusThumbOnChange', 'form', 'getAriaValueText', 'getRootNode', 'id', 'ids', 'invalid', 'max', 'min', 'name', 'onChange', 'onChangeEnd', 'onChangeStart', 'orientation', 'origin', 'readOnly', 'step', 'thumbAlignment', 'thumbSize', 'value']);
+  const [sliderParams, restProps] = createSplitProps.createSplitProps()(props, ['aria-label', 'aria-labelledby', 'dir', 'disabled', 'form', 'getAriaValueText', 'getRootNode', 'id', 'ids', 'invalid', 'max', 'min', 'minStepsBetweenThumbs', 'name', 'onFocusChange', 'onValueChange', 'onValueChangeEnd', 'orientation', 'origin', 'readOnly', 'step', 'thumbAlignment', 'thumbAlignment', 'thumbSize', 'value']);
   const api = useSlider.useSlider(sliderParams);
-  const rootProps = solid.mergeProps(() => api().rootProps, restProps);
+  const mergedProps = solid.mergeProps(() => api().rootProps, restProps);
   const getChildren = () => runIfFn.runIfFn(restProps.children, api);
   return web.createComponent(sliderContext.SliderProvider, {
     value: api,
     get children() {
-      return web.createComponent(factory.ark.div, web.mergeProps(rootProps, {
+      return web.createComponent(factory.ark.div, web.mergeProps(mergedProps, {
         get children() {
           return getChildren();
         }