@ark-ui/solid 0.8.1 → 0.10.0

package/pressable/index.d.ts

@@ -1,2 +1,8 @@
-export { Pressable, type PressableProps } from './pressable';
-export { usePressable, type UsePressableProps, type UsePressableReturn } from './use-pressable';
+import { JSX } from 'solid-js';
+import { type PressableProps } from './pressable';
+import { usePressable, type UsePressableProps, type UsePressableReturn } from './use-pressable';
+declare const Pressable: ((props: PressableProps) => JSX.Element) & {
+    Root: (props: PressableProps) => JSX.Element;
+};
+export { Pressable, usePressable };
+export type { PressableProps, UsePressableProps, UsePressableReturn };

package/pressable/index.mjs

@@ -1,2 +1,8 @@
-export { Pressable } from './pressable.mjs';
+import { Pressable as Pressable$1 } from './pressable.mjs';
 export { usePressable } from './use-pressable.mjs';
+
+const Pressable = Object.assign(Pressable$1, {
+  Root: Pressable$1
+});
+
+export { Pressable };

package/pressable/pressable.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type UsePressableProps } from './use-pressable';

package/pressable/pressable.stories.d.ts

@@ -0,0 +1,5 @@
+import { JSX } from 'solid-js';
+import type { Meta } from 'storybook-solidjs';
+declare const meta: Meta;
+export default meta;
+export declare const Basic: () => JSX.Element;

package/pressable/pressable.test.d.ts

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

package/pressable/use-pressable.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const pressable = require('@zag-js/pressable');
 const solid = require('@zag-js/solid');
 const solidJs = require('solid-js');
+require('../environment/index.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {

package/pressable/use-pressable.d.ts

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

package/pressable/use-pressable.mjs

@@ -1,6 +1,7 @@
 import * as pressable from '@zag-js/pressable';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
 import { createUniqueId, createMemo } from 'solid-js';
+import '../environment/index.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const usePressable = props => {

package/radio-group/index.cjs

@@ -3,22 +3,30 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const radio = require('./radio.cjs');
+const radioContext = require('./radio-context.cjs');
 const radioControl = require('./radio-control.cjs');
 const radioGroup = require('./radio-group.cjs');
+const radioGroupContext = require('./radio-group-context.cjs');
 const radioGroupLabel = require('./radio-group-label.cjs');
-const radioInput = require('./radio-input.cjs');
 const radioLabel = require('./radio-label.cjs');
 const radio$1 = require('@zag-js/radio-group');
 
-
+const RadioGroup = Object.assign(radioGroup.RadioGroup, {
+  Root: radioGroup.RadioGroup,
+  Label: radioGroupLabel.RadioGroupLabel,
+  Radio: radio.Radio,
+  RadioLabel: radioLabel.RadioLabel,
+  RadioControl: radioControl.RadioControl
+});
 
 exports.Radio = radio.Radio;
+exports.useRadioContext = radioContext.useRadioContext;
 exports.RadioControl = radioControl.RadioControl;
-exports.RadioGroup = radioGroup.RadioGroup;
+exports.useRadioGroupContext = radioGroupContext.useRadioGroupContext;
 exports.RadioGroupLabel = radioGroupLabel.RadioGroupLabel;
-exports.RadioInput = radioInput.RadioInput;
 exports.RadioLabel = radioLabel.RadioLabel;
 Object.defineProperty(exports, 'radioGroupAnatomy', {
-	enumerable: true,
-	get: () => radio$1.anatomy
+  enumerable: true,
+  get: () => radio$1.anatomy
 });
+exports.RadioGroup = RadioGroup;

package/radio-group/index.d.ts

@@ -1,7 +1,18 @@
-export { Radio, type RadioProps } from './radio';
-export { RadioControl, type RadioControlProps } from './radio-control';
-export { RadioGroup, type RadioGroupProps } from './radio-group';
-export { RadioGroupLabel, type RadioGroupLabelProps } from './radio-group-label';
-export { radioGroupAnatomy } from './radio-group.anatomy';
-export { RadioInput, type RadioInputProps } from './radio-input';
-export { RadioLabel, type RadioLabelProps } from './radio-label';
+import { JSX } from 'solid-js';
+import { Radio, type RadioProps } from './radio';
+import { useRadioContext } from './radio-context';
+import { RadioControl, type RadioControlProps } from './radio-control';
+import { type RadioGroupProps } from './radio-group';
+import { useRadioGroupContext } from './radio-group-context';
+import { RadioGroupLabel, type RadioGroupLabelProps } from './radio-group-label';
+import { radioGroupAnatomy } from './radio-group.anatomy';
+import { RadioLabel, type RadioLabelProps } from './radio-label';
+declare const RadioGroup: ((props: RadioGroupProps) => JSX.Element) & {
+    Root: (props: RadioGroupProps) => JSX.Element;
+    Label: (props: RadioGroupLabelProps) => JSX.Element;
+    Radio: (props: RadioProps) => JSX.Element;
+    RadioLabel: (props: RadioLabelProps) => JSX.Element;
+    RadioControl: (props: RadioControlProps) => JSX.Element;
+};
+export { Radio, RadioControl, RadioGroup, RadioGroupLabel, RadioLabel, radioGroupAnatomy, useRadioContext, useRadioGroupContext, };
+export type { RadioControlProps, RadioGroupLabelProps, RadioGroupProps, RadioLabelProps, RadioProps, };

package/radio-group/index.mjs

@@ -1,7 +1,18 @@
-export { Radio } from './radio.mjs';
-export { RadioControl } from './radio-control.mjs';
-export { RadioGroup } from './radio-group.mjs';
-export { RadioGroupLabel } from './radio-group-label.mjs';
-export { RadioInput } from './radio-input.mjs';
-export { RadioLabel } from './radio-label.mjs';
+import { Radio } from './radio.mjs';
+export { useRadioContext } from './radio-context.mjs';
+import { RadioControl } from './radio-control.mjs';
+import { RadioGroup as RadioGroup$1 } from './radio-group.mjs';
+export { useRadioGroupContext } from './radio-group-context.mjs';
+import { RadioGroupLabel } from './radio-group-label.mjs';
+import { RadioLabel } from './radio-label.mjs';
 export { anatomy as radioGroupAnatomy } from '@zag-js/radio-group';
+
+const RadioGroup = Object.assign(RadioGroup$1, {
+  Root: RadioGroup$1,
+  Label: RadioGroupLabel,
+  Radio,
+  RadioLabel,
+  RadioControl
+});
+
+export { Radio, RadioControl, RadioGroup, RadioGroupLabel, RadioLabel };

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

@@ -1,5 +1,14 @@
-import type { RadioProps } from '@zag-js/radio-group/dist/radio-group.types';
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from 'solid-js';
 import { type connect } from '@zag-js/radio-group';
 export type RadioContext = Parameters<ReturnType<typeof connect>['getRadioProps']>[0];
-export declare const RadioProvider: ContextProviderComponent<RadioProps>, useRadioContext: () => RadioProps;
+export declare const RadioProvider: ContextProviderComponent<{
+    value: string;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    invalid?: boolean | undefined;
+}>, useRadioContext: () => {
+    value: string;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    invalid?: boolean | undefined;
+};

package/radio-group/radio-control.cjs

@@ -8,11 +8,16 @@ const factory = require('../factory.cjs');
 const radioContext = require('./radio-context.cjs');
 const radioGroupContext = require('./radio-group-context.cjs');
 
+const _tmpl$ = /*#__PURE__*/web.template(`<input>`);
 const RadioControl = props => {
   const api = radioGroupContext.useRadioGroupContext();
-  const radioParams = radioContext.useRadioContext();
-  const controlProps = solid.mergeProps(() => api().getRadioControlProps(radioParams), props);
-  return web.createComponent(factory.ark.div, controlProps);
+  const context = radioContext.useRadioContext();
+  const controlProps = solid.mergeProps(() => api().getRadioControlProps(context), props);
+  return [web.createComponent(factory.ark.div, controlProps), (() => {
+    const _el$ = _tmpl$();
+    web.spread(_el$, web.mergeProps(() => api().getRadioHiddenInputProps(context)), false, false);
+    return _el$;
+  })()];
 };
 
 exports.RadioControl = RadioControl;

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

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

package/radio-group/radio-control.mjs

@@ -1,14 +1,19 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, spread, mergeProps as mergeProps$1, template } 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 _tmpl$ = /*#__PURE__*/template(`<input>`);
 const RadioControl = props => {
   const api = useRadioGroupContext();
-  const radioParams = useRadioContext();
-  const controlProps = mergeProps(() => api().getRadioControlProps(radioParams), props);
-  return createComponent(ark.div, controlProps);
+  const context = useRadioContext();
+  const controlProps = mergeProps(() => api().getRadioControlProps(context), props);
+  return [createComponent(ark.div, controlProps), (() => {
+    const _el$ = _tmpl$();
+    spread(_el$, mergeProps$1(() => api().getRadioHiddenInputProps(context)), false, false);
+    return _el$;
+  })()];
 };
 
 export { RadioControl };

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

@@ -1,52 +1,4 @@
-import type { RadioProps, InputProps } from '@zag-js/radio-group/dist/radio-group.types';
-import type { Accessor, JSX } from 'solid-js';
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from 'solid-js';
 import { type UseRadioGroupReturn } from './use-radio-group';
 export type RadioGroupContext = UseRadioGroupReturn;
-export declare const RadioGroupProvider: ContextProviderComponent<Accessor<{
-    value: string | null;
-    setValue(value: string): void;
-    clearValue(): void;
-    focus: () => void;
-    blur(): void;
-    getRadioState: <T_1 extends RadioProps>(props: T_1) => {
-        isInteractive: boolean;
-        isReadOnly: boolean | undefined;
-        isInvalid: boolean | undefined;
-        isDisabled: boolean | undefined;
-        isChecked: boolean;
-        isFocused: boolean;
-        isHovered: boolean;
-        isActive: boolean;
-    };
-    rootProps: JSX.HTMLAttributes<any>;
-    labelProps: JSX.HTMLAttributes<any>;
-    getRadioProps(props: RadioProps): JSX.LabelHTMLAttributes<HTMLLabelElement>;
-    getRadioLabelProps(props: RadioProps): JSX.HTMLAttributes<any>;
-    getRadioControlProps(props: RadioProps): JSX.HTMLAttributes<any>;
-    getRadioInputProps(props: InputProps): JSX.InputHTMLAttributes<HTMLInputElement>;
-    indicatorProps: JSX.HTMLAttributes<any>;
-}>>, useRadioGroupContext: () => Accessor<{
-    value: string | null;
-    setValue(value: string): void;
-    clearValue(): void;
-    focus: () => void;
-    blur(): void;
-    getRadioState: <T_1 extends RadioProps>(props: T_1) => {
-        isInteractive: boolean;
-        isReadOnly: boolean | undefined;
-        isInvalid: boolean | undefined;
-        isDisabled: boolean | undefined;
-        isChecked: boolean;
-        isFocused: boolean;
-        isHovered: boolean;
-        isActive: boolean;
-    };
-    rootProps: JSX.HTMLAttributes<any>;
-    labelProps: JSX.HTMLAttributes<any>;
-    getRadioProps(props: RadioProps): JSX.LabelHTMLAttributes<HTMLLabelElement>;
-    getRadioLabelProps(props: RadioProps): JSX.HTMLAttributes<any>;
-    getRadioControlProps(props: RadioProps): JSX.HTMLAttributes<any>;
-    getRadioInputProps(props: InputProps): JSX.InputHTMLAttributes<HTMLInputElement>;
-    indicatorProps: JSX.HTMLAttributes<any>;
-}>;
+export declare const RadioGroupProvider: ContextProviderComponent<UseRadioGroupReturn>, useRadioGroupContext: () => UseRadioGroupReturn;

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

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

package/radio-group/radio-group.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type UseRadioGroupProps } from './use-radio-group';

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

@@ -0,0 +1,6 @@
+import { JSX } from 'solid-js';
+import type { Meta } from 'storybook-solidjs';
+declare const meta: Meta;
+export default meta;
+export declare const Basic: () => JSX.Element;
+export declare const Disabled: () => JSX.Element;

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

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

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

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

package/radio-group/radio.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type RadioContext } from './radio-context';

package/radio-group/use-radio-group.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const radio = require('@zag-js/radio-group');
 const solid = require('@zag-js/solid');
 const solidJs = require('solid-js');
+require('../environment/index.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {

package/radio-group/use-radio-group.d.ts

@@ -1,30 +1,7 @@
-import type { RadioProps, InputProps } from '@zag-js/radio-group/dist/radio-group.types';
-import type { Accessor, JSX } from 'solid-js';
 import * as radio from '@zag-js/radio-group';
+import { type PropTypes } from '@zag-js/solid';
+import { type Accessor } from 'solid-js';
 import { type Optional } from '../types';
 export type UseRadioGroupProps = Optional<radio.Context, 'id'>;
-export type UseRadioGroupReturn = ReturnType<typeof useRadioGroup>;
-export declare const useRadioGroup: (props: UseRadioGroupProps) => Accessor<{
-    value: string | null;
-    setValue(value: string): void;
-    clearValue(): void;
-    focus: () => void;
-    blur(): void;
-    getRadioState: <T_1 extends RadioProps>(props: T_1) => {
-        isInteractive: boolean;
-        isReadOnly: boolean | undefined;
-        isInvalid: boolean | undefined;
-        isDisabled: boolean | undefined;
-        isChecked: boolean;
-        isFocused: boolean;
-        isHovered: boolean;
-        isActive: boolean;
-    };
-    rootProps: JSX.HTMLAttributes<any>;
-    labelProps: JSX.HTMLAttributes<any>;
-    getRadioProps(props: RadioProps): JSX.LabelHTMLAttributes<HTMLLabelElement>;
-    getRadioLabelProps(props: RadioProps): JSX.HTMLAttributes<any>;
-    getRadioControlProps(props: RadioProps): JSX.HTMLAttributes<any>;
-    getRadioInputProps(props: InputProps): JSX.InputHTMLAttributes<HTMLInputElement>;
-    indicatorProps: JSX.HTMLAttributes<any>;
-}>;
+export type UseRadioGroupReturn = Accessor<radio.Api<PropTypes>>;
+export declare const useRadioGroup: (props: UseRadioGroupProps) => UseRadioGroupReturn;

package/radio-group/use-radio-group.mjs

@@ -1,6 +1,7 @@
 import * as radio from '@zag-js/radio-group';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
 import { createUniqueId, createMemo } from 'solid-js';
+import '../environment/index.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useRadioGroup = props => {

package/range-slider/index.cjs

@@ -2,7 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const rangeSlider = require('./range-slider.cjs');
+const rangeSlider$1 = require('./range-slider.cjs');
+const rangeSliderContext = require('./range-slider-context.cjs');
 const rangeSliderControl = require('./range-slider-control.cjs');
 const rangeSliderLabel = require('./range-slider-label.cjs');
 const rangeSliderMarker = require('./range-slider-marker.cjs');
@@ -11,11 +12,21 @@ const rangeSliderOutput = require('./range-slider-output.cjs');
 const rangeSliderRange = require('./range-slider-range.cjs');
 const rangeSliderThumb = require('./range-slider-thumb.cjs');
 const rangeSliderTrack = require('./range-slider-track.cjs');
-const rangeSlider$1 = require('@zag-js/range-slider');
-
+const rangeSlider = require('@zag-js/range-slider');
 
+const RangeSlider = Object.assign(rangeSlider$1.RangeSlider, {
+  Root: rangeSlider$1.RangeSlider,
+  Control: rangeSliderControl.RangeSliderControl,
+  Label: rangeSliderLabel.RangeSliderLabel,
+  Marker: rangeSliderMarker.RangeSliderMarker,
+  MarkerGroup: rangeSliderMarkerGroup.RangeSliderMarkerGroup,
+  Output: rangeSliderOutput.RangeSliderOutput,
+  Range: rangeSliderRange.RangeSliderRange,
+  Thumb: rangeSliderThumb.RangeSliderThumb,
+  Track: rangeSliderTrack.RangeSliderTrack
+});
 
-exports.RangeSlider = rangeSlider.RangeSlider;
+exports.useRangeSliderContext = rangeSliderContext.useRangeSliderContext;
 exports.RangeSliderControl = rangeSliderControl.RangeSliderControl;
 exports.RangeSliderLabel = rangeSliderLabel.RangeSliderLabel;
 exports.RangeSliderMarker = rangeSliderMarker.RangeSliderMarker;
@@ -26,5 +37,6 @@ exports.RangeSliderThumb = rangeSliderThumb.RangeSliderThumb;
 exports.RangeSliderTrack = rangeSliderTrack.RangeSliderTrack;
 Object.defineProperty(exports, 'rangeSliderAnatomy', {
   enumerable: true,
-  get: () => rangeSlider$1.anatomy
+  get: () => rangeSlider.anatomy
 });
+exports.RangeSlider = RangeSlider;

package/range-slider/index.d.ts

@@ -1,10 +1,25 @@
-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';
+import { JSX } from 'solid-js';
+import { type RangeSliderProps } from './range-slider';
+import { useRangeSliderContext } from './range-slider-context';
+import { RangeSliderControl, type RangeSliderControlProps } from './range-slider-control';
+import { RangeSliderLabel, type RangeSliderLabelProps } from './range-slider-label';
+import { RangeSliderMarker, type RangeSliderMarkerProps } from './range-slider-marker';
+import { RangeSliderMarkerGroup, type RangeSliderMarkerGroupProps } from './range-slider-marker-group';
+import { RangeSliderOutput, type RangeSliderOutputProps } from './range-slider-output';
+import { RangeSliderRange, type RangeSliderRangeProps } from './range-slider-range';
+import { RangeSliderThumb, type RangeSliderThumbProps } from './range-slider-thumb';
+import { RangeSliderTrack, type RangeSliderTrackProps } from './range-slider-track';
+import { rangeSliderAnatomy } from './range-slider.anatomy';
+declare const RangeSlider: ((props: RangeSliderProps) => JSX.Element) & {
+    Root: (props: RangeSliderProps) => JSX.Element;
+    Control: (props: RangeSliderControlProps) => JSX.Element;
+    Label: (props: RangeSliderLabelProps) => JSX.Element;
+    Marker: (props: RangeSliderMarkerProps) => JSX.Element;
+    MarkerGroup: (props: RangeSliderMarkerGroupProps) => JSX.Element;
+    Output: (props: RangeSliderOutputProps) => JSX.Element;
+    Range: (props: RangeSliderRangeProps) => JSX.Element;
+    Thumb: (props: RangeSliderThumbProps) => JSX.Element;
+    Track: (props: RangeSliderTrackProps) => JSX.Element;
+};
+export { RangeSlider, RangeSliderControl, RangeSliderLabel, RangeSliderMarker, RangeSliderMarkerGroup, RangeSliderOutput, RangeSliderRange, RangeSliderThumb, RangeSliderTrack, rangeSliderAnatomy, useRangeSliderContext, };
+export type { RangeSliderControlProps, RangeSliderLabelProps, RangeSliderMarkerGroupProps, RangeSliderMarkerProps, RangeSliderOutputProps, RangeSliderProps, RangeSliderRangeProps, RangeSliderThumbProps, RangeSliderTrackProps, };

package/range-slider/index.mjs

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 type GetMarkerPropsArgs = {

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

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

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

@@ -8,11 +8,16 @@ const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const rangeSliderContext = require('./range-slider-context.cjs');
 
+const _tmpl$ = /*#__PURE__*/web.template(`<input>`);
 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);
+  const thumbProps = solid.mergeProps(() => api().getThumbProps(thumbParams.index), restProps);
+  return [web.createComponent(factory.ark.div, thumbProps), (() => {
+    const _el$ = _tmpl$();
+    web.spread(_el$, web.mergeProps(() => api().getHiddenInputProps(thumbParams.index)), false, false);
+    return _el$;
+  })()];
 };
 
 exports.RangeSliderThumb = RangeSliderThumb;