@zag-js/slider 0.1.9 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/slider",
-  "version": "0.1.9",
+  "version": "0.1.12",
   "description": "Core logic for the slider widget implemented as a state machine",
   "keywords": [
     "js",
@@ -29,19 +29,23 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "0.1.7",
-    "@zag-js/dom-utils": "0.1.6",
-    "@zag-js/number-utils": "0.1.2",
-    "@zag-js/types": "0.2.1",
-    "@zag-js/utils": "0.1.2"
+    "@zag-js/core": "0.1.9",
+    "@zag-js/types": "0.2.3"
+  },
+  "devDependencies": {
+    "@zag-js/dom-utils": "0.1.9",
+    "@zag-js/form-utils": "0.1.0",
+    "@zag-js/number-utils": "0.1.3",
+    "@zag-js/utils": "0.1.3"
   },
   "scripts": {
-    "build:fast": "zag build",
-    "start": "zag build --watch",
-    "build": "zag build --prod",
+    "build-fast": "tsup src/index.ts --format=esm,cjs",
+    "start": "pnpm build --watch",
+    "build": "tsup src/index.ts --format=esm,cjs --dts",
     "test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
     "lint": "eslint src --ext .ts,.tsx",
-    "test:ci": "yarn test --ci --runInBand",
-    "test:watch": "yarn test --watch --updateSnapshot"
+    "test-ci": "pnpm test --ci --runInBand",
+    "test-watch": "pnpm test --watch -u",
+    "typecheck": "tsc --noEmit"
   }
-}
+}

package/dist/slider.connect.d.ts

@@ -1,25 +0,0 @@
-import type { NormalizeProps, PropTypes } from "@zag-js/types";
-import type { Send, State } from "./slider.types";
-export 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"];
-};

package/dist/slider.dom.d.ts

@@ -1,29 +0,0 @@
-import type { MachineContext as Ctx, Point } from "./slider.types";
-export declare const dom: {
-    getDoc: (ctx: Ctx) => Document;
-    getRootNode: (ctx: Ctx) => Document | ShadowRoot;
-    getRootId: (ctx: Ctx) => string;
-    getThumbId: (ctx: Ctx) => string;
-    getControlId: (ctx: Ctx) => string;
-    getInputId: (ctx: Ctx) => string;
-    getOutputId: (ctx: Ctx) => string;
-    getTrackId: (ctx: Ctx) => string;
-    getRangeId: (ctx: Ctx) => string;
-    getLabelId: (ctx: Ctx) => string;
-    getMarkerId: (ctx: Ctx, value: number) => string;
-    getRootEl: (ctx: Ctx) => HTMLElement;
-    getThumbEl: (ctx: Ctx) => HTMLElement;
-    getControlEl: (ctx: Ctx) => HTMLElement;
-    getInputEl: (ctx: Ctx) => HTMLInputElement;
-    getValueFromPoint(ctx: Ctx, point: Point): number | undefined;
-    dispatchChangeEvent(ctx: Ctx): void;
-    getThumbOffset: (ctx: import("./slider.types").SharedContext) => string;
-    getControlStyle: () => JSX.CSSProperties;
-    getThumbStyle: (ctx: import("./slider.types").SharedContext) => JSX.CSSProperties;
-    getRangeStyle: (ctx: Pick<import("./slider.types").SharedContext, "isVertical" | "isRtl">) => JSX.CSSProperties;
-    getRootStyle: (ctx: Ctx) => JSX.CSSProperties;
-    getMarkerStyle: (ctx: Pick<import("./slider.types").SharedContext, "isHorizontal" | "isRtl">, percent: number) => JSX.CSSProperties;
-    getLabelStyle: () => JSX.CSSProperties;
-    getTrackStyle: () => JSX.CSSProperties;
-    getMarkerGroupStyle: () => JSX.CSSProperties;
-};

package/dist/slider.machine.d.ts

@@ -1,2 +0,0 @@
-import type { MachineContext, MachineState, UserDefinedContext } from "./slider.types";
-export declare function machine(ctx?: UserDefinedContext): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;

package/dist/slider.style.d.ts

@@ -1,23 +0,0 @@
-import type { Style } from "@zag-js/types";
-import type { MachineContext as Ctx, SharedContext } from "./slider.types";
-declare function getThumbOffset(ctx: SharedContext): string;
-declare function getThumbStyle(ctx: SharedContext): Style;
-declare function getRangeStyle(ctx: Pick<SharedContext, "isVertical" | "isRtl">): Style;
-declare function getControlStyle(): Style;
-declare function getRootStyle(ctx: Ctx): Style;
-declare function getMarkerStyle(ctx: Pick<SharedContext, "isHorizontal" | "isRtl">, percent: number): Style;
-declare function getLabelStyle(): Style;
-declare function getTrackStyle(): Style;
-declare function getMarkerGroupStyle(): Style;
-export declare const styles: {
-    getThumbOffset: typeof getThumbOffset;
-    getControlStyle: typeof getControlStyle;
-    getThumbStyle: typeof getThumbStyle;
-    getRangeStyle: typeof getRangeStyle;
-    getRootStyle: typeof getRootStyle;
-    getMarkerStyle: typeof getMarkerStyle;
-    getLabelStyle: typeof getLabelStyle;
-    getTrackStyle: typeof getTrackStyle;
-    getMarkerGroupStyle: typeof getMarkerGroupStyle;
-};
-export {};

package/dist/slider.types.d.ts

@@ -1,173 +0,0 @@
-import type { StateMachine as S } from "@zag-js/core";
-import type { Context, DirectionProperty } from "@zag-js/types";
-declare type ElementIds = Partial<{
-    root: string;
-    thumb: string;
-    control: string;
-    track: string;
-    range: string;
-    label: string;
-    output: string;
-}>;
-declare type PublicContext = DirectionProperty & {
-    /**
-     * 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";
-};
-export declare type UserDefinedContext = Partial<PublicContext>;
-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<{
-    /**
-     * @internal The move threshold of the slider thumb before it is considered to be moved
-     */
-    threshold: number;
-    /**
-     * @internal The slider thumb dimensions
-     */
-    thumbSize: {
-        width: number;
-        height: number;
-    } | null;
-    /**
-     * @internal
-     * The value of the slider when it was initially rendered.
-     * Used when the `form.reset(...)` is called.
-     */
-    initialValue: number | null;
-}>;
-export declare type MachineContext = PublicContext & ComputedContext & PrivateContext;
-export declare type MachineState = {
-    value: "unknown" | "idle" | "dragging" | "focus";
-};
-export declare type State = S.State<MachineContext, MachineState>;
-export declare type Send = S.Send<S.AnyEventObject>;
-export 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;
-};
-export declare type Point = {
-    x: number;
-    y: number;
-};
-export {};

package/dist/slider.utils.d.ts

@@ -1,8 +0,0 @@
-import type { MachineContext as Ctx } from "./slider.types";
-export declare const utils: {
-    fromPercent(ctx: Ctx, percent: number): number;
-    clamp(ctx: Ctx, value: number): number;
-    convert(ctx: Ctx, value: number): number;
-    decrement(ctx: Ctx, step?: number): number;
-    increment(ctx: Ctx, step?: number): number;
-};