@zag-js/slider 0.82.2 → 1.0.1

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, NormalizeProps } from '@zag-js/types';
+import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
-import { Machine, StateMachine } from '@zag-js/core';
+import { Service, Machine, EventObject } from '@zag-js/core';
 
 declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "thumb" | "valueText" | "track" | "range" | "control" | "markerGroup" | "marker" | "draggingIndicator">;
 
@@ -27,9 +27,9 @@ type ElementIds = Partial<{
     valueText: string;
     marker(index: number): string;
 }>;
-interface PublicContext extends DirectionProperty, CommonProperties {
+interface SliderProps extends DirectionProperty, CommonProperties {
     /**
-     * The ids of the elements in the range slider. Useful for composition.
+     * The ids of the elements in the slider. Useful for composition.
      */
     ids?: ElementIds | undefined;
     /**
@@ -49,9 +49,14 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      */
     form?: string | undefined;
     /**
-     * The value of the range slider
+     * The controlled value of the slider
      */
-    value: number[];
+    value?: number[] | undefined;
+    /**
+     * The initial value of the slider when rendered.
+     * Use when you don't need to control the value of the slider.
+     */
+    defaultValue?: number[] | undefined;
     /**
      * Whether the slider is disabled
      */
@@ -84,27 +89,27 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      * The minimum value of the slider
      * @default 0
      */
-    min: number;
+    min?: number | undefined;
     /**
      * The maximum value of the slider
      * @default 100
      */
-    max: number;
+    max?: number | undefined;
     /**
      * The step value of the slider
      * @default 1
      */
-    step: number;
+    step?: number | undefined;
     /**
      * The minimum permitted steps between multiple thumbs.
      * @default 0
      */
-    minStepsBetweenThumbs: number;
+    minStepsBetweenThumbs?: number | undefined;
     /**
      * The orientation of the slider
      * @default "horizontal"
      */
-    orientation: "vertical" | "horizontal";
+    orientation?: "vertical" | "horizontal" | undefined;
     /**
      * The origin of the slider range
      * - "start": Useful when the value represents an absolute value
@@ -124,13 +129,13 @@ interface PublicContext extends DirectionProperty, CommonProperties {
     /**
      * The slider thumbs dimensions
      */
-    thumbSize: {
+    thumbSize?: {
         width: number;
         height: number;
-    } | null;
+    } | undefined;
 }
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
-type ComputedContext = Readonly<{
+type PropsWithDefault = "dir" | "min" | "max" | "step" | "orientation" | "defaultValue" | "origin" | "thumbAlignment" | "minStepsBetweenThumbs";
+type Computed = Readonly<{
     /**
      * @computed
      * Whether the slider thumb has been measured
@@ -167,16 +172,37 @@ type ComputedContext = Readonly<{
      */
     isDisabled: boolean;
 }>;
-interface PrivateContext {
+interface Context {
+    /**
+     * The active index of the range slider. This represents
+     * the currently dragged/focused thumb.
+     */
+    focusedIndex: number;
+    /**
+     * The value of the range slider
+     */
+    value: number[];
+    /**
+     * The size of the slider thumbs
+     */
+    thumbSize: Size | null;
 }
-interface MachineContext extends PublicContext, ComputedContext, PrivateContext {
+interface SliderSchema {
+    state: "idle" | "dragging" | "focus";
+    props: RequiredBy<SliderProps, PropsWithDefault>;
+    context: Context;
+    computed: Computed;
+    event: EventObject;
+    action: string;
+    effect: string;
+    guard: string;
 }
-interface MachineState {
-    value: "idle" | "dragging" | "focus";
+type SliderService = Service<SliderSchema>;
+type SliderMachine = Machine<SliderSchema>;
+interface Size {
+    width: number;
+    height: number;
 }
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
 interface MarkerProps {
     value: number;
 }
@@ -187,7 +213,7 @@ interface ThumbProps {
 interface DraggingIndicatorProps {
     index: number;
 }
-interface MachineApi<T extends PropTypes = PropTypes> {
+interface SliderApi<T extends PropTypes = PropTypes> {
     /**
      * The value of the slider.
      */
@@ -261,13 +287,13 @@ interface MachineApi<T extends PropTypes = PropTypes> {
     getDraggingIndicatorProps(props: DraggingIndicatorProps): T["element"];
 }
 
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+declare function connect<T extends PropTypes>(service: SliderService, normalize: NormalizeProps<T>): SliderApi<T>;
 
-declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+declare const machine: _zag_js_core.Machine<SliderSchema>;
 
-declare const props: ("disabled" | "step" | "form" | "dir" | "id" | "aria-label" | "aria-labelledby" | "max" | "min" | "name" | "origin" | "value" | "orientation" | "getRootNode" | "invalid" | "ids" | "readOnly" | "onValueChange" | "onValueChangeEnd" | "onFocusChange" | "getAriaValueText" | "minStepsBetweenThumbs" | "thumbAlignment" | "thumbSize")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "disabled" | "step" | "form" | "dir" | "id" | "aria-label" | "aria-labelledby" | "max" | "min" | "name" | "origin" | "value" | "orientation" | "getRootNode" | "invalid" | "ids" | "readOnly" | "onValueChange" | "onValueChangeEnd" | "onFocusChange" | "getAriaValueText" | "minStepsBetweenThumbs" | "thumbAlignment" | "thumbSize">];
+declare const props: (keyof SliderProps)[];
+declare const splitProps: <Props extends Partial<SliderProps>>(props: Props) => [Partial<SliderProps>, Omit<Props, keyof SliderProps>];
 declare const thumbProps: (keyof ThumbProps)[];
 declare const splitThumbProps: <Props extends ThumbProps>(props: Props) => [ThumbProps, Omit<Props, keyof ThumbProps>];
 
-export { type MachineApi as Api, type UserDefinedContext as Context, type DraggingIndicatorProps, type ElementIds, type FocusChangeDetails, type MarkerProps, type Service, type ThumbProps, type ValueChangeDetails, type ValueTextDetails, anatomy, connect, machine, props, splitProps, splitThumbProps, thumbProps };
+export { type SliderApi as Api, type DraggingIndicatorProps, type ElementIds, type FocusChangeDetails, type SliderMachine as Machine, type MarkerProps, type SliderProps as Props, type SliderService as Service, type ThumbProps, type ValueChangeDetails, type ValueTextDetails, anatomy, connect, machine, props, splitProps, splitThumbProps, thumbProps };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, NormalizeProps } from '@zag-js/types';
+import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
-import { Machine, StateMachine } from '@zag-js/core';
+import { Service, Machine, EventObject } from '@zag-js/core';
 
 declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "thumb" | "valueText" | "track" | "range" | "control" | "markerGroup" | "marker" | "draggingIndicator">;
 
@@ -27,9 +27,9 @@ type ElementIds = Partial<{
     valueText: string;
     marker(index: number): string;
 }>;
-interface PublicContext extends DirectionProperty, CommonProperties {
+interface SliderProps extends DirectionProperty, CommonProperties {
     /**
-     * The ids of the elements in the range slider. Useful for composition.
+     * The ids of the elements in the slider. Useful for composition.
      */
     ids?: ElementIds | undefined;
     /**
@@ -49,9 +49,14 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      */
     form?: string | undefined;
     /**
-     * The value of the range slider
+     * The controlled value of the slider
      */
-    value: number[];
+    value?: number[] | undefined;
+    /**
+     * The initial value of the slider when rendered.
+     * Use when you don't need to control the value of the slider.
+     */
+    defaultValue?: number[] | undefined;
     /**
      * Whether the slider is disabled
      */
@@ -84,27 +89,27 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      * The minimum value of the slider
      * @default 0
      */
-    min: number;
+    min?: number | undefined;
     /**
      * The maximum value of the slider
      * @default 100
      */
-    max: number;
+    max?: number | undefined;
     /**
      * The step value of the slider
      * @default 1
      */
-    step: number;
+    step?: number | undefined;
     /**
      * The minimum permitted steps between multiple thumbs.
      * @default 0
      */
-    minStepsBetweenThumbs: number;
+    minStepsBetweenThumbs?: number | undefined;
     /**
      * The orientation of the slider
      * @default "horizontal"
      */
-    orientation: "vertical" | "horizontal";
+    orientation?: "vertical" | "horizontal" | undefined;
     /**
      * The origin of the slider range
      * - "start": Useful when the value represents an absolute value
@@ -124,13 +129,13 @@ interface PublicContext extends DirectionProperty, CommonProperties {
     /**
      * The slider thumbs dimensions
      */
-    thumbSize: {
+    thumbSize?: {
         width: number;
         height: number;
-    } | null;
+    } | undefined;
 }
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
-type ComputedContext = Readonly<{
+type PropsWithDefault = "dir" | "min" | "max" | "step" | "orientation" | "defaultValue" | "origin" | "thumbAlignment" | "minStepsBetweenThumbs";
+type Computed = Readonly<{
     /**
      * @computed
      * Whether the slider thumb has been measured
@@ -167,16 +172,37 @@ type ComputedContext = Readonly<{
      */
     isDisabled: boolean;
 }>;
-interface PrivateContext {
+interface Context {
+    /**
+     * The active index of the range slider. This represents
+     * the currently dragged/focused thumb.
+     */
+    focusedIndex: number;
+    /**
+     * The value of the range slider
+     */
+    value: number[];
+    /**
+     * The size of the slider thumbs
+     */
+    thumbSize: Size | null;
 }
-interface MachineContext extends PublicContext, ComputedContext, PrivateContext {
+interface SliderSchema {
+    state: "idle" | "dragging" | "focus";
+    props: RequiredBy<SliderProps, PropsWithDefault>;
+    context: Context;
+    computed: Computed;
+    event: EventObject;
+    action: string;
+    effect: string;
+    guard: string;
 }
-interface MachineState {
-    value: "idle" | "dragging" | "focus";
+type SliderService = Service<SliderSchema>;
+type SliderMachine = Machine<SliderSchema>;
+interface Size {
+    width: number;
+    height: number;
 }
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
 interface MarkerProps {
     value: number;
 }
@@ -187,7 +213,7 @@ interface ThumbProps {
 interface DraggingIndicatorProps {
     index: number;
 }
-interface MachineApi<T extends PropTypes = PropTypes> {
+interface SliderApi<T extends PropTypes = PropTypes> {
     /**
      * The value of the slider.
      */
@@ -261,13 +287,13 @@ interface MachineApi<T extends PropTypes = PropTypes> {
     getDraggingIndicatorProps(props: DraggingIndicatorProps): T["element"];
 }
 
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+declare function connect<T extends PropTypes>(service: SliderService, normalize: NormalizeProps<T>): SliderApi<T>;
 
-declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+declare const machine: _zag_js_core.Machine<SliderSchema>;
 
-declare const props: ("disabled" | "step" | "form" | "dir" | "id" | "aria-label" | "aria-labelledby" | "max" | "min" | "name" | "origin" | "value" | "orientation" | "getRootNode" | "invalid" | "ids" | "readOnly" | "onValueChange" | "onValueChangeEnd" | "onFocusChange" | "getAriaValueText" | "minStepsBetweenThumbs" | "thumbAlignment" | "thumbSize")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "disabled" | "step" | "form" | "dir" | "id" | "aria-label" | "aria-labelledby" | "max" | "min" | "name" | "origin" | "value" | "orientation" | "getRootNode" | "invalid" | "ids" | "readOnly" | "onValueChange" | "onValueChangeEnd" | "onFocusChange" | "getAriaValueText" | "minStepsBetweenThumbs" | "thumbAlignment" | "thumbSize">];
+declare const props: (keyof SliderProps)[];
+declare const splitProps: <Props extends Partial<SliderProps>>(props: Props) => [Partial<SliderProps>, Omit<Props, keyof SliderProps>];
 declare const thumbProps: (keyof ThumbProps)[];
 declare const splitThumbProps: <Props extends ThumbProps>(props: Props) => [ThumbProps, Omit<Props, keyof ThumbProps>];
 
-export { type MachineApi as Api, type UserDefinedContext as Context, type DraggingIndicatorProps, type ElementIds, type FocusChangeDetails, type MarkerProps, type Service, type ThumbProps, type ValueChangeDetails, type ValueTextDetails, anatomy, connect, machine, props, splitProps, splitThumbProps, thumbProps };
+export { type SliderApi as Api, type DraggingIndicatorProps, type ElementIds, type FocusChangeDetails, type SliderMachine as Machine, type MarkerProps, type SliderProps as Props, type SliderService as Service, type ThumbProps, type ValueChangeDetails, type ValueTextDetails, anatomy, connect, machine, props, splitProps, splitThumbProps, thumbProps };