@ark-ui/solid 0.1.0 → 0.3.0

package/dist/pressable/pressable.mjs

@@ -1,14 +1,14 @@
-import { createComponent, mergeProps } 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 { usePressable } from './use-pressable.mjs';
 
 const Pressable = props => {
-  const [usePressableProps, buttonProps] = createSplitProps()(props, ['allowTextSelectionOnPress', 'cancelOnPointerExit', 'dir', 'disabled', 'getRootNode', 'id', 'onLongPress', 'onPress', 'onPressEnd', 'onPressStart', 'onPressUp', 'preventFocusOnPress']);
-  const {
-    pressableProps
-  } = usePressable(usePressableProps);
-  return createComponent(ark.button, mergeProps(pressableProps, buttonProps));
+  const [pressableParams, restProps] = createSplitProps()(props, ['allowTextSelectionOnPress', 'cancelOnPointerExit', 'dir', 'disabled', 'getRootNode', 'id', 'onLongPress', 'onPress', 'onPressEnd', 'onPressStart', 'onPressUp', 'preventFocusOnPress']);
+  const api = usePressable(pressableParams);
+  const buttonProps = mergeProps(() => api().pressableProps, restProps);
+  return createComponent(ark.button, buttonProps);
 };
 
 export { Pressable };

package/dist/pressable/use-pressable.cjs

@@ -35,7 +35,7 @@ const usePressable = props => {
   const [state, send] = solid.useMachine(pressable__namespace.machine(context), {
     context
   });
-  return pressable__namespace.connect(state, send, solid.normalizeProps);
+  return solidJs.createMemo(() => pressable__namespace.connect(state, send, solid.normalizeProps));
 };
 
 exports.usePressable = usePressable;

package/dist/pressable/use-pressable.d.ts

@@ -1,9 +1,9 @@
-import type { JSX } from 'solid-js';
+import type { Accessor, JSX } from 'solid-js';
 import * as pressable from '@zag-js/pressable';
 import { type Optional } from '../types';
 export type UsePressableProps = Optional<pressable.Context, 'id'>;
 export type UsePressableReturn = ReturnType<typeof usePressable>;
-export declare const usePressable: (props?: UsePressableProps) => {
+export declare const usePressable: (props?: UsePressableProps) => Accessor<{
     isPressed: boolean;
     pressableProps: JSX.HTMLAttributes<any>;
-};
+}>;

package/dist/pressable/use-pressable.mjs

@@ -1,6 +1,6 @@
 import * as pressable from '@zag-js/pressable';
 import { useMachine, normalizeProps } from '@zag-js/solid';
-import { mergeProps, createUniqueId } from 'solid-js';
+import { mergeProps, createUniqueId, createMemo } from 'solid-js';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const usePressable = props => {
@@ -12,7 +12,7 @@ const usePressable = props => {
   const [state, send] = useMachine(pressable.machine(context), {
     context
   });
-  return pressable.connect(state, send, normalizeProps);
+  return createMemo(() => pressable.connect(state, send, normalizeProps));
 };
 
 export { usePressable };

package/dist/prop-trap.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const solidJs = require('solid-js');
+
+function trueFn() {
+  return true;
+}
+const propTraps = {
+  get(_, property, receiver) {
+    if (property === solidJs.$PROXY)
+      return receiver;
+    return _.get(property);
+  },
+  has(_, property) {
+    return _.has(property);
+  },
+  set: trueFn,
+  deleteProperty: trueFn,
+  getOwnPropertyDescriptor(_, property) {
+    return {
+      configurable: true,
+      enumerable: true,
+      get() {
+        return _.get(property);
+      },
+      set: trueFn,
+      deleteProperty: trueFn
+    };
+  },
+  ownKeys(_) {
+    return _.keys();
+  }
+};
+
+exports.propTraps = propTraps;

package/dist/prop-trap.d.ts

@@ -0,0 +1,5 @@
+export declare const propTraps: ProxyHandler<{
+    get: (k: string | number | symbol) => any;
+    has: (k: string | number | symbol) => boolean;
+    keys: () => string[];
+}>;

package/dist/prop-trap.mjs

@@ -0,0 +1,33 @@
+import { $PROXY } from 'solid-js';
+
+function trueFn() {
+  return true;
+}
+const propTraps = {
+  get(_, property, receiver) {
+    if (property === $PROXY)
+      return receiver;
+    return _.get(property);
+  },
+  has(_, property) {
+    return _.has(property);
+  },
+  set: trueFn,
+  deleteProperty: trueFn,
+  getOwnPropertyDescriptor(_, property) {
+    return {
+      configurable: true,
+      enumerable: true,
+      get() {
+        return _.get(property);
+      },
+      set: trueFn,
+      deleteProperty: trueFn
+    };
+  },
+  ownKeys(_) {
+    return _.keys();
+  }
+};
+
+export { propTraps };

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

@@ -3,14 +3,16 @@
 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 radioContext = require('./radio-context.cjs');
 const radioGroupContext = require('./radio-group-context.cjs');
 
 const RadioControl = props => {
-  const radioGroup = radioGroupContext.useRadioGroupContext();
-  const context = radioContext.useRadioContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => radioGroup().getRadioControlProps(context), props));
+  const api = radioGroupContext.useRadioGroupContext();
+  const radioParams = radioContext.useRadioContext();
+  const controlProps = solid.mergeProps(() => api().getRadioControlProps(radioParams), props);
+  return web.createComponent(factory.ark.div, controlProps);
 };
 
 exports.RadioControl = RadioControl;

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

@@ -1,12 +1,14 @@
-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 { useRadioContext } from './radio-context.mjs';
 import { useRadioGroupContext } from './radio-group-context.mjs';
 
 const RadioControl = props => {
-  const radioGroup = useRadioGroupContext();
-  const context = useRadioContext();
-  return createComponent(ark.div, mergeProps(() => radioGroup().getRadioControlProps(context), props));
+  const api = useRadioGroupContext();
+  const radioParams = useRadioContext();
+  const controlProps = mergeProps(() => api().getRadioControlProps(radioParams), props);
+  return createComponent(ark.div, controlProps);
 };
 
 export { RadioControl };

package/dist/radio-group/radio-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 radioGroupContext = require('./radio-group-context.cjs');
 
 const RadioGroupLabel = props => {
-  const radioGroup = radioGroupContext.useRadioGroupContext();
-  return web.createComponent(factory.ark.label, web.mergeProps(() => radioGroup().labelProps, props));
+  const api = radioGroupContext.useRadioGroupContext();
+  const labelProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(factory.ark.label, labelProps);
 };
 
 exports.RadioGroupLabel = RadioGroupLabel;

package/dist/radio-group/radio-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 { useRadioGroupContext } from './radio-group-context.mjs';
 
 const RadioGroupLabel = props => {
-  const radioGroup = useRadioGroupContext();
-  return createComponent(ark.label, mergeProps(() => radioGroup().labelProps, props));
+  const api = useRadioGroupContext();
+  const labelProps = mergeProps(() => api().labelProps, props);
+  return createComponent(ark.label, labelProps);
 };
 
 export { RadioGroupLabel };

package/dist/radio-group/radio-group.cjs

@@ -3,18 +3,20 @@
 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 radioGroupContext = require('./radio-group-context.cjs');
 const useRadioGroup = require('./use-radio-group.cjs');
 
 const RadioGroup = props => {
-  const [useRadioGroupProps, divProps] = createSplitProps.createSplitProps()(props, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onChange', 'orientation', 'readOnly', 'value']);
-  const radioGroup = useRadioGroup.useRadioGroup(useRadioGroupProps);
+  const [groupParams, restProps] = createSplitProps.createSplitProps()(props, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onChange', 'orientation', 'readOnly', 'value']);
+  const api = useRadioGroup.useRadioGroup(groupParams);
+  const rootProps = solid.mergeProps(() => api().rootProps, restProps);
   return web.createComponent(radioGroupContext.RadioGroupProvider, {
-    value: radioGroup,
+    value: api,
     get children() {
-      return web.createComponent(factory.ark.div, web.mergeProps(() => radioGroup().rootProps, divProps));
+      return web.createComponent(factory.ark.div, rootProps);
     }
   });
 };

package/dist/radio-group/radio-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 UseRadioGroupProps } from './use-radio-group';
 export type RadioGroupProps = Assign<HTMLArkProps<'div'>, UseRadioGroupProps>;
 export declare const RadioGroup: (props: RadioGroupProps) => JSX.Element;

package/dist/radio-group/radio-group.mjs

@@ -1,16 +1,18 @@
-import { createComponent, mergeProps } 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 { RadioGroupProvider } from './radio-group-context.mjs';
 import { useRadioGroup } from './use-radio-group.mjs';
 
 const RadioGroup = props => {
-  const [useRadioGroupProps, divProps] = createSplitProps()(props, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onChange', 'orientation', 'readOnly', 'value']);
-  const radioGroup = useRadioGroup(useRadioGroupProps);
+  const [groupParams, restProps] = createSplitProps()(props, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onChange', 'orientation', 'readOnly', 'value']);
+  const api = useRadioGroup(groupParams);
+  const rootProps = mergeProps(() => api().rootProps, restProps);
   return createComponent(RadioGroupProvider, {
-    value: radioGroup,
+    value: api,
     get children() {
-      return createComponent(ark.div, mergeProps(() => radioGroup().rootProps, divProps));
+      return createComponent(ark.div, rootProps);
     }
   });
 };

package/dist/radio-group/radio-input.cjs

@@ -3,14 +3,16 @@
 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 radioContext = require('./radio-context.cjs');
 const radioGroupContext = require('./radio-group-context.cjs');
 
 const RadioInput = props => {
-  const radioGroup = radioGroupContext.useRadioGroupContext();
-  const context = radioContext.useRadioContext();
-  return web.createComponent(factory.ark.input, web.mergeProps(() => radioGroup().getRadioInputProps(context), props));
+  const api = radioGroupContext.useRadioGroupContext();
+  const radioParams = radioContext.useRadioContext();
+  const inputProps = solid.mergeProps(() => api().getRadioInputProps(radioParams), props);
+  return web.createComponent(factory.ark.input, inputProps);
 };
 
 exports.RadioInput = RadioInput;

package/dist/radio-group/radio-input.mjs

@@ -1,12 +1,14 @@
-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 { useRadioContext } from './radio-context.mjs';
 import { useRadioGroupContext } from './radio-group-context.mjs';
 
 const RadioInput = props => {
-  const radioGroup = useRadioGroupContext();
-  const context = useRadioContext();
-  return createComponent(ark.input, mergeProps(() => radioGroup().getRadioInputProps(context), props));
+  const api = useRadioGroupContext();
+  const radioParams = useRadioContext();
+  const inputProps = mergeProps(() => api().getRadioInputProps(radioParams), props);
+  return createComponent(ark.input, inputProps);
 };
 
 export { RadioInput };

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

@@ -3,14 +3,16 @@
 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 radioContext = require('./radio-context.cjs');
 const radioGroupContext = require('./radio-group-context.cjs');
 
 const RadioLabel = props => {
-  const radioGroup = radioGroupContext.useRadioGroupContext();
-  const context = radioContext.useRadioContext();
-  return web.createComponent(factory.ark.span, web.mergeProps(() => radioGroup().getRadioLabelProps(context), props));
+  const api = radioGroupContext.useRadioGroupContext();
+  const radioParams = radioContext.useRadioContext();
+  const labelProps = solid.mergeProps(() => api().getRadioLabelProps(radioParams), props);
+  return web.createComponent(factory.ark.span, labelProps);
 };
 
 exports.RadioLabel = RadioLabel;

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

@@ -1,12 +1,14 @@
-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 { useRadioContext } from './radio-context.mjs';
 import { useRadioGroupContext } from './radio-group-context.mjs';
 
 const RadioLabel = props => {
-  const radioGroup = useRadioGroupContext();
-  const context = useRadioContext();
-  return createComponent(ark.span, mergeProps(() => radioGroup().getRadioLabelProps(context), props));
+  const api = useRadioGroupContext();
+  const radioParams = useRadioContext();
+  const labelProps = mergeProps(() => api().getRadioLabelProps(radioParams), props);
+  return createComponent(ark.span, labelProps);
 };
 
 export { RadioLabel };

package/dist/radio-group/radio.cjs

@@ -3,21 +3,20 @@
 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 radioContext = require('./radio-context.cjs');
 const radioGroupContext = require('./radio-group-context.cjs');
 
 const Radio = props => {
-  const [contextProps, labelProps] = createSplitProps.createSplitProps()(props, ['value', 'disabled', 'invalid', 'readOnly']);
-  const radioGroup = radioGroupContext.useRadioGroupContext();
+  const [contextProps, restProps] = createSplitProps.createSplitProps()(props, ['value', 'disabled', 'invalid', 'readOnly']);
+  const api = radioGroupContext.useRadioGroupContext();
+  const radioProps = solid.mergeProps(() => api().getRadioProps(contextProps), restProps);
   return web.createComponent(radioContext.RadioProvider, {
     value: contextProps,
     get children() {
-      return web.createComponent(factory.ark.label, web.mergeProps(() => radioGroup().getRadioProps({
-        value: contextProps.value,
-        disabled: contextProps.disabled
-      }), labelProps));
+      return web.createComponent(factory.ark.label, radioProps);
     }
   });
 };

package/dist/radio-group/radio.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 RadioContext } from './radio-context';
 export type RadioProps = Assign<HTMLArkProps<'label'>, RadioContext>;
 export declare const Radio: (props: RadioProps) => JSX.Element;

package/dist/radio-group/radio.mjs

@@ -1,19 +1,18 @@
-import { createComponent, mergeProps } 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 { RadioProvider } from './radio-context.mjs';
 import { useRadioGroupContext } from './radio-group-context.mjs';
 
 const Radio = props => {
-  const [contextProps, labelProps] = createSplitProps()(props, ['value', 'disabled', 'invalid', 'readOnly']);
-  const radioGroup = useRadioGroupContext();
+  const [contextProps, restProps] = createSplitProps()(props, ['value', 'disabled', 'invalid', 'readOnly']);
+  const api = useRadioGroupContext();
+  const radioProps = mergeProps(() => api().getRadioProps(contextProps), restProps);
   return createComponent(RadioProvider, {
     value: contextProps,
     get children() {
-      return createComponent(ark.label, mergeProps(() => radioGroup().getRadioProps({
-        value: contextProps.value,
-        disabled: contextProps.disabled
-      }), labelProps));
+      return createComponent(ark.label, radioProps);
     }
   });
 };

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

@@ -0,0 +1,10 @@
+export { RangeSlider, type RangeSliderProps } from './range-slider';
+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';

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

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../create-context.cjs');
+
+const [RangeSliderProvider, useRangeSliderContext] = createContext.createContext({
+  hookName: "useRangeSliderContext",
+  providerName: "<RangeSliderProvider />"
+});
+
+exports.RangeSliderProvider = RangeSliderProvider;
+exports.useRangeSliderContext = useRangeSliderContext;

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

@@ -0,0 +1,61 @@
+import type { Accessor, JSX } from 'solid-js';
+import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { type UseRangeSliderReturn } from './use-range-slider';
+export type RangeSliderContext = UseRangeSliderReturn;
+export declare const RangeSliderProvider: ContextProviderComponent<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>;
+}>>, useRangeSliderContext: () => 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/range-slider-context.mjs

@@ -0,0 +1,8 @@
+import { createContext } from '../create-context.mjs';
+
+const [RangeSliderProvider, useRangeSliderContext] = createContext({
+  hookName: "useRangeSliderContext",
+  providerName: "<RangeSliderProvider />"
+});
+
+export { RangeSliderProvider, useRangeSliderContext };

package/dist/range-slider/range-slider-control.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 RangeSliderControl = props => {
+  const slider = rangeSliderContext.useRangeSliderContext();
+  const controlProps = solid.mergeProps(() => slider().controlProps, props);
+  return web.createComponent(factory.ark.div, controlProps);
+};
+
+exports.RangeSliderControl = RangeSliderControl;

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

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

package/dist/range-slider/range-slider-control.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 RangeSliderControl = props => {
+  const slider = useRangeSliderContext();
+  const controlProps = mergeProps(() => slider().controlProps, props);
+  return createComponent(ark.div, controlProps);
+};
+
+export { RangeSliderControl };

package/dist/range-slider/range-slider-label.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 RangeSliderLabel = props => {
+  const slider = rangeSliderContext.useRangeSliderContext();
+  const labelProps = solid.mergeProps(() => slider().labelProps, props);
+  return web.createComponent(factory.ark.label, labelProps);
+};
+
+exports.RangeSliderLabel = RangeSliderLabel;

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

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

package/dist/range-slider/range-slider-label.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 RangeSliderLabel = props => {
+  const slider = useRangeSliderContext();
+  const labelProps = mergeProps(() => slider().labelProps, props);
+  return createComponent(ark.label, labelProps);
+};
+
+export { RangeSliderLabel };

package/dist/range-slider/range-slider-marker-group.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 RangeSliderMarkerGroup = props => {
+  const slider = rangeSliderContext.useRangeSliderContext();
+  const groupProps = solid.mergeProps(() => slider().markerGroupProps, props);
+  return web.createComponent(factory.ark.div, groupProps);
+};
+
+exports.RangeSliderMarkerGroup = RangeSliderMarkerGroup;

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

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

package/dist/range-slider/range-slider-marker-group.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 RangeSliderMarkerGroup = props => {
+  const slider = useRangeSliderContext();
+  const groupProps = mergeProps(() => slider().markerGroupProps, props);
+  return createComponent(ark.div, groupProps);
+};
+
+export { RangeSliderMarkerGroup };