@zag-js/slider 0.10.5 → 0.11.0

package/dist/index.d.mts

@@ -0,0 +1,275 @@
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+import * as _zag_js_types from '@zag-js/types';
+import { RequiredBy, DirectionProperty, CommonProperties, Context, PropTypes, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { StateMachine } from '@zag-js/core';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "thumb" | "hiddenInput" | "output" | "track" | "range" | "control" | "markerGroup" | "marker">;
+
+type ElementIds = Partial<{
+    root: string;
+    thumb: string;
+    control: string;
+    track: string;
+    range: string;
+    label: string;
+    output: string;
+    hiddenInput: string;
+}>;
+type PublicContext = DirectionProperty & CommonProperties & {
+    /**
+     * The ids of the elements in the slider. Useful for composition.
+     */
+    ids?: ElementIds;
+    /**
+     * The value of the slider
+     */
+    value: number;
+    /**
+     * The name associated with the slider (when used in a form)
+     */
+    name?: string;
+    /**
+     * The associate form of the underlying input element.
+     */
+    form?: string;
+    /**
+     * Whether the slider is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the slider is read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the slider value is invalid
+     */
+    invalid?: boolean;
+    /**
+     * The minimum value of the slider
+     */
+    min: number;
+    /**
+     * The maximum value of the slider
+     */
+    max: number;
+    /**
+     * The step value of the slider
+     */
+    step: number;
+    /**
+     * The orientation of the slider
+     */
+    orientation?: "vertical" | "horizontal";
+    /**
+     * - "start": Useful when the value represents an absolute value
+     * - "center": Useful when the value represents an offset (relative)
+     */
+    origin?: "start" | "center";
+    /**
+     * The aria-label of the slider. Useful for providing an accessible name to the slider
+     */
+    "aria-label"?: string;
+    /**
+     * The `id` of the element that labels the slider. Useful for providing an accessible name to the slider
+     */
+    "aria-labelledby"?: string;
+    /**
+     * Whether to focus the slider thumb after interaction (scrub and keyboard)
+     */
+    focusThumbOnChange?: boolean;
+    /**
+     * Function that returns a human readable value for the slider
+     */
+    getAriaValueText?(value: number): string;
+    /**
+     * Function invoked when the value of the slider changes
+     */
+    onChange?(details: {
+        value: number;
+    }): void;
+    /**
+     * Function invoked when the slider value change is done
+     */
+    onChangeEnd?(details: {
+        value: number;
+    }): void;
+    /**
+     * Function invoked when the slider value change is started
+     */
+    onChangeStart?(details: {
+        value: number;
+    }): void;
+    /**
+     * The alignment of the slider thumb relative to the track
+     * - `center`: the thumb will extend beyond the bounds of the slider track.
+     * - `contain`: the thumb will be contained within the bounds of the track.
+     */
+    thumbAlignment?: "contain" | "center";
+};
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type ComputedContext = Readonly<{
+    /**
+     * @computed
+     * Whether the slider is interactive
+     */
+    readonly isInteractive: boolean;
+    /**
+     * @computed
+     * Whether the thumb size has been measured
+     */
+    readonly hasMeasuredThumbSize: boolean;
+    /**
+     * @computed
+     * Whether the slider is horizontal
+     */
+    readonly isHorizontal: boolean;
+    /**
+     * @computed
+     * Whether the slider is vertical
+     */
+    readonly isVertical: boolean;
+    /**
+     * @computed
+     * Whether the slider is in RTL mode
+     */
+    readonly isRtl: boolean;
+    /**
+     * @computed
+     * The value of the slider as a percentage
+     */
+    readonly valuePercent: number;
+}>;
+type PrivateContext = Context<{}>;
+type MachineContext = PublicContext & ComputedContext & PrivateContext;
+type MachineState = {
+    value: "idle" | "dragging" | "focus";
+};
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+type SharedContext = {
+    min: number;
+    max: number;
+    step: number;
+    dir?: "ltr" | "rtl";
+    isRtl: boolean;
+    isVertical: boolean;
+    isHorizontal: boolean;
+    value: number;
+    thumbSize: {
+        width: number;
+        height: number;
+    } | null;
+    thumbAlignment?: "contain" | "center";
+    orientation?: "horizontal" | "vertical";
+    readonly hasMeasuredThumbSize: boolean;
+};
+type Point = {
+    x: number;
+    y: number;
+};
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    /**
+     * Whether the slider is focused.
+     */
+    isFocused: boolean;
+    /**
+     * Whether the slider is being dragged.
+     */
+    isDragging: boolean;
+    /**
+     * The value of the slider.
+     */
+    value: number;
+    /**
+     * The value of the slider as a percent.
+     */
+    percent: number;
+    /**
+     * Function to set the value of the slider.
+     */
+    setValue(value: number): void;
+    /**
+     * Returns the value of the slider at the given percent.
+     */
+    getPercentValue: (percent: number) => number;
+    /**
+     * Returns the percent of the slider at the given value.
+     */
+    getValuePercent: (value: number) => number;
+    /**
+     * Function to focus the slider.
+     */
+    focus(): void;
+    /**
+     * Function to increment the value of the slider by the step.
+     */
+    increment(): void;
+    /**
+     * Function to decrement the value of the slider by the step.
+     */
+    decrement(): void;
+    rootProps: T["element"];
+    labelProps: T["label"];
+    thumbProps: T["element"];
+    hiddenInputProps: T["input"];
+    outputProps: T["output"];
+    trackProps: T["element"];
+    rangeProps: T["element"];
+    controlProps: T["element"];
+    markerGroupProps: T["element"];
+    getMarkerProps({ value }: {
+        value: number;
+    }): T["element"];
+};
+
+declare const dom: {
+    getRootNode: (ctx: {
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
+    }) => Document | ShadowRoot;
+    getDoc: (ctx: {
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
+    }) => Document;
+    getWin: (ctx: {
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
+    }) => Window & typeof globalThis;
+    getActiveElement: (ctx: {
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
+    }) => HTMLElement | null;
+    getById: <T extends HTMLElement = HTMLElement>(ctx: {
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
+    }, id: string) => T | null;
+    queryById: <T_1 extends HTMLElement = HTMLElement>(ctx: {
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
+    }, id: string) => T_1;
+} & {
+    getRootId: (ctx: MachineContext) => string;
+    getThumbId: (ctx: MachineContext) => string;
+    getControlId: (ctx: MachineContext) => string;
+    getHiddenInputId: (ctx: MachineContext) => string;
+    getOutputId: (ctx: MachineContext) => string;
+    getTrackId: (ctx: MachineContext) => string;
+    getRangeId: (ctx: MachineContext) => string;
+    getLabelId: (ctx: MachineContext) => string;
+    getMarkerId: (ctx: MachineContext, value: number) => string;
+    getRootEl: (ctx: MachineContext) => HTMLElement | null;
+    getThumbEl: (ctx: MachineContext) => HTMLElement | null;
+    getControlEl: (ctx: MachineContext) => HTMLElement;
+    getHiddenInputEl: (ctx: MachineContext) => HTMLInputElement | null;
+    getValueFromPoint(ctx: MachineContext, point: Point): number | undefined;
+    dispatchChangeEvent(ctx: MachineContext): void;
+    getThumbOffset: (ctx: SharedContext) => string;
+    getControlStyle: () => _zag_js_types.JSX.CSSProperties;
+    getThumbStyle: (ctx: SharedContext) => _zag_js_types.JSX.CSSProperties;
+    getRangeStyle: (ctx: Pick<SharedContext, "isVertical" | "isRtl">) => _zag_js_types.JSX.CSSProperties;
+    getRootStyle: (ctx: MachineContext) => _zag_js_types.JSX.CSSProperties;
+    getMarkerStyle: (ctx: Pick<SharedContext, "isHorizontal" | "isRtl">, percent: number) => _zag_js_types.JSX.CSSProperties;
+    getLabelStyle: () => _zag_js_types.JSX.CSSProperties;
+    getTrackStyle: () => _zag_js_types.JSX.CSSProperties;
+    getMarkerGroupStyle: () => _zag_js_types.JSX.CSSProperties;
+};
+
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+export { UserDefinedContext as Context, anatomy, connect, machine, dom as unstable__dom };

package/dist/index.d.ts

@@ -1,5 +1,275 @@
-export { anatomy } from "./slider.anatomy";
-export { connect } from "./slider.connect";
-export { dom as unstable__dom } from "./slider.dom";
-export { machine } from "./slider.machine";
-export type { UserDefinedContext as Context } from "./slider.types";
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+import * as _zag_js_types from '@zag-js/types';
+import { RequiredBy, DirectionProperty, CommonProperties, Context, PropTypes, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { StateMachine } from '@zag-js/core';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "thumb" | "hiddenInput" | "output" | "track" | "range" | "control" | "markerGroup" | "marker">;
+
+type ElementIds = Partial<{
+    root: string;
+    thumb: string;
+    control: string;
+    track: string;
+    range: string;
+    label: string;
+    output: string;
+    hiddenInput: string;
+}>;
+type PublicContext = DirectionProperty & CommonProperties & {
+    /**
+     * The ids of the elements in the slider. Useful for composition.
+     */
+    ids?: ElementIds;
+    /**
+     * The value of the slider
+     */
+    value: number;
+    /**
+     * The name associated with the slider (when used in a form)
+     */
+    name?: string;
+    /**
+     * The associate form of the underlying input element.
+     */
+    form?: string;
+    /**
+     * Whether the slider is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the slider is read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the slider value is invalid
+     */
+    invalid?: boolean;
+    /**
+     * The minimum value of the slider
+     */
+    min: number;
+    /**
+     * The maximum value of the slider
+     */
+    max: number;
+    /**
+     * The step value of the slider
+     */
+    step: number;
+    /**
+     * The orientation of the slider
+     */
+    orientation?: "vertical" | "horizontal";
+    /**
+     * - "start": Useful when the value represents an absolute value
+     * - "center": Useful when the value represents an offset (relative)
+     */
+    origin?: "start" | "center";
+    /**
+     * The aria-label of the slider. Useful for providing an accessible name to the slider
+     */
+    "aria-label"?: string;
+    /**
+     * The `id` of the element that labels the slider. Useful for providing an accessible name to the slider
+     */
+    "aria-labelledby"?: string;
+    /**
+     * Whether to focus the slider thumb after interaction (scrub and keyboard)
+     */
+    focusThumbOnChange?: boolean;
+    /**
+     * Function that returns a human readable value for the slider
+     */
+    getAriaValueText?(value: number): string;
+    /**
+     * Function invoked when the value of the slider changes
+     */
+    onChange?(details: {
+        value: number;
+    }): void;
+    /**
+     * Function invoked when the slider value change is done
+     */
+    onChangeEnd?(details: {
+        value: number;
+    }): void;
+    /**
+     * Function invoked when the slider value change is started
+     */
+    onChangeStart?(details: {
+        value: number;
+    }): void;
+    /**
+     * The alignment of the slider thumb relative to the track
+     * - `center`: the thumb will extend beyond the bounds of the slider track.
+     * - `contain`: the thumb will be contained within the bounds of the track.
+     */
+    thumbAlignment?: "contain" | "center";
+};
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type ComputedContext = Readonly<{
+    /**
+     * @computed
+     * Whether the slider is interactive
+     */
+    readonly isInteractive: boolean;
+    /**
+     * @computed
+     * Whether the thumb size has been measured
+     */
+    readonly hasMeasuredThumbSize: boolean;
+    /**
+     * @computed
+     * Whether the slider is horizontal
+     */
+    readonly isHorizontal: boolean;
+    /**
+     * @computed
+     * Whether the slider is vertical
+     */
+    readonly isVertical: boolean;
+    /**
+     * @computed
+     * Whether the slider is in RTL mode
+     */
+    readonly isRtl: boolean;
+    /**
+     * @computed
+     * The value of the slider as a percentage
+     */
+    readonly valuePercent: number;
+}>;
+type PrivateContext = Context<{}>;
+type MachineContext = PublicContext & ComputedContext & PrivateContext;
+type MachineState = {
+    value: "idle" | "dragging" | "focus";
+};
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+type SharedContext = {
+    min: number;
+    max: number;
+    step: number;
+    dir?: "ltr" | "rtl";
+    isRtl: boolean;
+    isVertical: boolean;
+    isHorizontal: boolean;
+    value: number;
+    thumbSize: {
+        width: number;
+        height: number;
+    } | null;
+    thumbAlignment?: "contain" | "center";
+    orientation?: "horizontal" | "vertical";
+    readonly hasMeasuredThumbSize: boolean;
+};
+type Point = {
+    x: number;
+    y: number;
+};
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    /**
+     * Whether the slider is focused.
+     */
+    isFocused: boolean;
+    /**
+     * Whether the slider is being dragged.
+     */
+    isDragging: boolean;
+    /**
+     * The value of the slider.
+     */
+    value: number;
+    /**
+     * The value of the slider as a percent.
+     */
+    percent: number;
+    /**
+     * Function to set the value of the slider.
+     */
+    setValue(value: number): void;
+    /**
+     * Returns the value of the slider at the given percent.
+     */
+    getPercentValue: (percent: number) => number;
+    /**
+     * Returns the percent of the slider at the given value.
+     */
+    getValuePercent: (value: number) => number;
+    /**
+     * Function to focus the slider.
+     */
+    focus(): void;
+    /**
+     * Function to increment the value of the slider by the step.
+     */
+    increment(): void;
+    /**
+     * Function to decrement the value of the slider by the step.
+     */
+    decrement(): void;
+    rootProps: T["element"];
+    labelProps: T["label"];
+    thumbProps: T["element"];
+    hiddenInputProps: T["input"];
+    outputProps: T["output"];
+    trackProps: T["element"];
+    rangeProps: T["element"];
+    controlProps: T["element"];
+    markerGroupProps: T["element"];
+    getMarkerProps({ value }: {
+        value: number;
+    }): T["element"];
+};
+
+declare const dom: {
+    getRootNode: (ctx: {
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
+    }) => Document | ShadowRoot;
+    getDoc: (ctx: {
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
+    }) => Document;
+    getWin: (ctx: {
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
+    }) => Window & typeof globalThis;
+    getActiveElement: (ctx: {
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
+    }) => HTMLElement | null;
+    getById: <T extends HTMLElement = HTMLElement>(ctx: {
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
+    }, id: string) => T | null;
+    queryById: <T_1 extends HTMLElement = HTMLElement>(ctx: {
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
+    }, id: string) => T_1;
+} & {
+    getRootId: (ctx: MachineContext) => string;
+    getThumbId: (ctx: MachineContext) => string;
+    getControlId: (ctx: MachineContext) => string;
+    getHiddenInputId: (ctx: MachineContext) => string;
+    getOutputId: (ctx: MachineContext) => string;
+    getTrackId: (ctx: MachineContext) => string;
+    getRangeId: (ctx: MachineContext) => string;
+    getLabelId: (ctx: MachineContext) => string;
+    getMarkerId: (ctx: MachineContext, value: number) => string;
+    getRootEl: (ctx: MachineContext) => HTMLElement | null;
+    getThumbEl: (ctx: MachineContext) => HTMLElement | null;
+    getControlEl: (ctx: MachineContext) => HTMLElement;
+    getHiddenInputEl: (ctx: MachineContext) => HTMLInputElement | null;
+    getValueFromPoint(ctx: MachineContext, point: Point): number | undefined;
+    dispatchChangeEvent(ctx: MachineContext): void;
+    getThumbOffset: (ctx: SharedContext) => string;
+    getControlStyle: () => _zag_js_types.JSX.CSSProperties;
+    getThumbStyle: (ctx: SharedContext) => _zag_js_types.JSX.CSSProperties;
+    getRangeStyle: (ctx: Pick<SharedContext, "isVertical" | "isRtl">) => _zag_js_types.JSX.CSSProperties;
+    getRootStyle: (ctx: MachineContext) => _zag_js_types.JSX.CSSProperties;
+    getMarkerStyle: (ctx: Pick<SharedContext, "isHorizontal" | "isRtl">, percent: number) => _zag_js_types.JSX.CSSProperties;
+    getLabelStyle: () => _zag_js_types.JSX.CSSProperties;
+    getTrackStyle: () => _zag_js_types.JSX.CSSProperties;
+    getMarkerGroupStyle: () => _zag_js_types.JSX.CSSProperties;
+};
+
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+export { UserDefinedContext as Context, anatomy, connect, machine, dom as unstable__dom };