@ark-ui/solid 0.1.0 → 0.2.0

package/dist/popover/popover-anchor.d.ts

@@ -1,5 +1,6 @@
-import type { ChildrenReturn, type JSX } from 'solid-js';
+import type { ResolvedChildren } from 'solid-js/types/reactive/signal';
+import { type JSX } from 'solid-js';
 export type PopoverAnchorProps = {
     children: JSX.Element;
 };
-export declare const PopoverAnchor: (props: PopoverAnchorProps) => ChildrenReturn;
+export declare const PopoverAnchor: (props: PopoverAnchorProps) => ResolvedChildren;

package/dist/popover/popover-anchor.mjs

@@ -13,7 +13,7 @@ const PopoverAnchor = props => {
       spread(children, anchorProps);
     }
   });
-  return getChildren;
+  return getChildren();
 };
 
 export { PopoverAnchor };

package/dist/popover/popover-close-trigger.cjs

@@ -17,7 +17,7 @@ const PopoverCloseTrigger = props => {
       web.spread(children, triggerProps);
     }
   });
-  return getChildren;
+  return getChildren();
 };
 
 exports.PopoverCloseTrigger = PopoverCloseTrigger;

package/dist/popover/popover-close-trigger.d.ts

@@ -1,5 +1,6 @@
-import type { ChildrenReturn, type JSX } from 'solid-js';
+import type { ResolvedChildren } from 'solid-js/types/reactive/signal';
+import { type JSX } from 'solid-js';
 export type PopoverCloseTriggerProps = {
     children: JSX.Element;
 };
-export declare const PopoverCloseTrigger: (props: PopoverCloseTriggerProps) => ChildrenReturn;
+export declare const PopoverCloseTrigger: (props: PopoverCloseTriggerProps) => ResolvedChildren;

package/dist/popover/popover-close-trigger.mjs

@@ -13,7 +13,7 @@ const PopoverCloseTrigger = props => {
       spread(children, triggerProps);
     }
   });
-  return getChildren;
+  return getChildren();
 };
 
 export { PopoverCloseTrigger };

package/dist/popover/popover-trigger.cjs

@@ -17,7 +17,7 @@ const PopoverTrigger = props => {
       spread.spread(children, triggerProps);
     }
   });
-  return getChildren;
+  return getChildren();
 };
 
 exports.PopoverTrigger = PopoverTrigger;

package/dist/popover/popover-trigger.d.ts

@@ -1,5 +1,6 @@
-import type { ChildrenReturn, type JSX } from 'solid-js';
+import type { ResolvedChildren } from 'solid-js/types/reactive/signal';
+import { type JSX } from 'solid-js';
 export type PopoverTriggerProps = {
     children: JSX.Element;
 };
-export declare const PopoverTrigger: (props: PopoverTriggerProps) => ChildrenReturn;
+export declare const PopoverTrigger: (props: PopoverTriggerProps) => ResolvedChildren;

package/dist/popover/popover-trigger.mjs

@@ -13,7 +13,7 @@ const PopoverTrigger = props => {
       spread(children, triggerProps);
     }
   });
-  return getChildren;
+  return getChildren();
 };
 
 export { PopoverTrigger };

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,14 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const factory = require('../factory.cjs');
+const rangeSliderContext = require('./range-slider-context.cjs');
+
+const RangeSliderControl = props => {
+  const slider = rangeSliderContext.useRangeSliderContext();
+  return web.createComponent(factory.ark.div, web.mergeProps(() => slider().controlProps, props));
+};
+
+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,10 @@
+import { createComponent, mergeProps } from 'solid-js/web';
+import { ark } from '../factory.mjs';
+import { useRangeSliderContext } from './range-slider-context.mjs';
+
+const RangeSliderControl = props => {
+  const slider = useRangeSliderContext();
+  return createComponent(ark.div, mergeProps(() => slider().controlProps, props));
+};
+
+export { RangeSliderControl };

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

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const factory = require('../factory.cjs');
+const rangeSliderContext = require('./range-slider-context.cjs');
+
+const RangeSliderLabel = props => {
+  const slider = rangeSliderContext.useRangeSliderContext();
+  return web.createComponent(factory.ark.label, web.mergeProps(() => slider().labelProps, props));
+};
+
+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,10 @@
+import { createComponent, mergeProps } from 'solid-js/web';
+import { ark } from '../factory.mjs';
+import { useRangeSliderContext } from './range-slider-context.mjs';
+
+const RangeSliderLabel = props => {
+  const slider = useRangeSliderContext();
+  return createComponent(ark.label, mergeProps(() => slider().labelProps, props));
+};
+
+export { RangeSliderLabel };

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

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const factory = require('../factory.cjs');
+const rangeSliderContext = require('./range-slider-context.cjs');
+
+const RangeSliderMarkerGroup = props => {
+  const slider = rangeSliderContext.useRangeSliderContext();
+  return web.createComponent(factory.ark.div, web.mergeProps(() => slider().markerGroupProps, props));
+};
+
+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,10 @@
+import { createComponent, mergeProps } from 'solid-js/web';
+import { ark } from '../factory.mjs';
+import { useRangeSliderContext } from './range-slider-context.mjs';
+
+const RangeSliderMarkerGroup = props => {
+  const slider = useRangeSliderContext();
+  return createComponent(ark.div, mergeProps(() => slider().markerGroupProps, props));
+};
+
+export { RangeSliderMarkerGroup };

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

@@ -0,0 +1,16 @@
+'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 rangeSliderContext = require('./range-slider-context.cjs');
+
+const RangeSliderMarker = props => {
+  const [markerProps, spanProps] = createSplitProps.createSplitProps()(props, ['value']);
+  const slider = rangeSliderContext.useRangeSliderContext();
+  return web.createComponent(factory.ark.span, web.mergeProps(() => slider().getMarkerProps(markerProps), spanProps));
+};
+
+exports.RangeSliderMarker = RangeSliderMarker;

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

@@ -0,0 +1,9 @@
+import type { JSX } from 'solid-js';
+import { type Assign } from '@polymorphic-factory/solid';
+import { type HTMLArkProps } from '../factory';
+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,12 @@
+import { createComponent, mergeProps } from 'solid-js/web';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { useRangeSliderContext } from './range-slider-context.mjs';
+
+const RangeSliderMarker = props => {
+  const [markerProps, spanProps] = createSplitProps()(props, ['value']);
+  const slider = useRangeSliderContext();
+  return createComponent(ark.span, mergeProps(() => slider().getMarkerProps(markerProps), spanProps));
+};
+
+export { RangeSliderMarker };

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const factory = require('../factory.cjs');
+const rangeSliderContext = require('./range-slider-context.cjs');
+
+const RangeSliderRange = props => {
+  const slider = rangeSliderContext.useRangeSliderContext();
+  return web.createComponent(factory.ark.div, web.mergeProps(() => slider().rangeProps, props));
+};
+
+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,10 @@
+import { createComponent, mergeProps } from 'solid-js/web';
+import { ark } from '../factory.mjs';
+import { useRangeSliderContext } from './range-slider-context.mjs';
+
+const RangeSliderRange = props => {
+  const slider = useRangeSliderContext();
+  return createComponent(ark.div, mergeProps(() => slider().rangeProps, props));
+};
+
+export { RangeSliderRange };

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

@@ -0,0 +1,16 @@
+'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 rangeSliderContext = require('./range-slider-context.cjs');
+
+const RangeSliderThumb = props => {
+  const [thumbParams, divProps] = createSplitProps.createSplitProps()(props, ['index']);
+  const slider = rangeSliderContext.useRangeSliderContext();
+  return web.createComponent(factory.ark.div, web.mergeProps(() => slider().getThumbProps(thumbParams.index()), divProps));
+};
+
+exports.RangeSliderThumb = RangeSliderThumb;

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

@@ -0,0 +1,9 @@
+import { type Assign } from '@polymorphic-factory/solid';
+import type { JSX, type Accessor } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+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,12 @@
+import { createComponent, mergeProps } from 'solid-js/web';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { useRangeSliderContext } from './range-slider-context.mjs';
+
+const RangeSliderThumb = props => {
+  const [thumbParams, divProps] = createSplitProps()(props, ['index']);
+  const slider = useRangeSliderContext();
+  return createComponent(ark.div, mergeProps(() => slider().getThumbProps(thumbParams.index()), divProps));
+};
+
+export { RangeSliderThumb };

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

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const factory = require('../factory.cjs');
+const rangeSliderContext = require('./range-slider-context.cjs');
+
+const RangeSliderTrack = props => {
+  const slider = rangeSliderContext.useRangeSliderContext();
+  return web.createComponent(factory.ark.div, web.mergeProps(() => slider().trackProps, props));
+};
+
+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,10 @@
+import { createComponent, mergeProps } from 'solid-js/web';
+import { ark } from '../factory.mjs';
+import { useRangeSliderContext } from './range-slider-context.mjs';
+
+const RangeSliderTrack = props => {
+  const slider = useRangeSliderContext();
+  return createComponent(ark.div, mergeProps(() => slider().trackProps, props));
+};
+
+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,27 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solidJs = require('solid-js');
+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 slider = useRangeSlider.useRangeSlider(useRangeSliderProps);
+  const view = () => solidJs.children(() => runIfFn.runIfFn(props.children, slider()));
+  return web.createComponent(rangeSliderContext.RangeSliderProvider, {
+    value: slider,
+    get children() {
+      return web.createComponent(factory.ark.div, web.mergeProps(() => slider().rootProps, divProps, {
+        children: view
+      }));
+    }
+  });
+};
+
+exports.RangeSlider = RangeSlider;

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

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

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

@@ -0,0 +1,23 @@
+import { createComponent, mergeProps } from 'solid-js/web';
+import { children } from 'solid-js';
+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 slider = useRangeSlider(useRangeSliderProps);
+  const view = () => children(() => runIfFn(props.children, slider()));
+  return createComponent(RangeSliderProvider, {
+    value: slider,
+    get children() {
+      return createComponent(ark.div, mergeProps(() => slider().rootProps, divProps, {
+        children: view
+      }));
+    }
+  });
+};
+
+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 };