@zag-js/slider 0.1.8 → 0.1.11

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Chakra UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -1,4 +1,228 @@
-export { dom as unstable__dom } from "./slider.dom";
-export { connect } from "./slider.connect";
-export { machine } from "./slider.machine";
-export type { UserDefinedContext as Context } from "./slider.types";
+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 type ElementIds = Partial<{
+    root: string;
+    thumb: string;
+    control: string;
+    track: string;
+    range: string;
+    label: string;
+    output: string;
+}>;
+declare 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;
+    /**
+     * 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";
+};
+declare type UserDefinedContext = RequiredBy<PublicContext, "id">;
+declare 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;
+}>;
+declare type PrivateContext = Context<{}>;
+declare type MachineContext = PublicContext & ComputedContext & PrivateContext;
+declare type MachineState = {
+    value: "unknown" | "idle" | "dragging" | "focus";
+};
+declare type State = StateMachine.State<MachineContext, MachineState>;
+declare type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+declare 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;
+};
+declare type Point = {
+    x: number;
+    y: number;
+};
+
+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_1 = HTMLElement>(ctx: {
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
+    }, id: string) => T_1 | null;
+} & {
+    getRootId: (ctx: MachineContext) => string;
+    getThumbId: (ctx: MachineContext) => string;
+    getControlId: (ctx: MachineContext) => string;
+    getInputId: (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 | null;
+    getInputEl: (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 connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    isFocused: boolean;
+    isDragging: boolean;
+    value: number;
+    percent: number;
+    setValue(value: number): void;
+    getPercentValue(percent: number): number;
+    focus(): void;
+    increment(): void;
+    decrement(): void;
+    rootProps: T["element"];
+    labelProps: T["label"];
+    thumbProps: T["element"];
+    inputProps: T["input"];
+    outputProps: T["output"];
+    trackProps: T["element"];
+    rangeProps: T["element"];
+    controlProps: T["element"];
+    markerGroupProps: T["element"];
+    getMarkerProps({ value }: {
+        value: number;
+    }): T["element"];
+};
+
+declare function machine(ctx: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+export { UserDefinedContext as Context, connect, machine, dom as unstable__dom };