@zag-js/slider 0.74.2 → 0.75.0

package/dist/index.d.mts

@@ -3,7 +3,7 @@ import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, NormalizePr
 import * as _zag_js_core from '@zag-js/core';
 import { Machine, StateMachine } from '@zag-js/core';
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "thumb" | "valueText" | "track" | "range" | "control" | "markerGroup" | "marker">;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "thumb" | "valueText" | "track" | "range" | "control" | "markerGroup" | "marker" | "draggingIndicator">;
 
 interface ValueChangeDetails {
     value: number[];
@@ -31,23 +31,23 @@ interface PublicContext extends DirectionProperty, CommonProperties {
     /**
      * The ids of the elements in the range slider. Useful for composition.
      */
-    ids?: ElementIds;
+    ids?: ElementIds | undefined;
     /**
      * The aria-label of each slider thumb. Useful for providing an accessible name to the slider
      */
-    "aria-label"?: string[];
+    "aria-label"?: string[] | undefined;
     /**
      * The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider
      */
-    "aria-labelledby"?: string[];
+    "aria-labelledby"?: string[] | undefined;
     /**
      * The name associated with each slider thumb (when used in a form)
      */
-    name?: string;
+    name?: string | undefined;
     /**
      * The associate form of the underlying input element.
      */
-    form?: string;
+    form?: string | undefined;
     /**
      * The value of the range slider
      */
@@ -55,15 +55,15 @@ interface PublicContext extends DirectionProperty, CommonProperties {
     /**
      * Whether the slider is disabled
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Whether the slider is read-only
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
     /**
      * Whether the slider is invalid
      */
-    invalid?: boolean;
+    invalid?: boolean | undefined;
     /**
      * Function invoked when the value of the slider changes
      */
@@ -112,7 +112,7 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      *
      * @default "start"
      */
-    origin?: "start" | "center";
+    origin?: "start" | "center" | undefined;
     /**
      * The alignment of the slider thumb relative to the track
      * - `center`: the thumb will extend beyond the bounds of the slider track.
@@ -120,7 +120,7 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      *
      * @default "contain"
      */
-    thumbAlignment?: "contain" | "center";
+    thumbAlignment?: "contain" | "center" | undefined;
     /**
      * The slider thumbs dimensions
      */
@@ -182,7 +182,10 @@ interface MarkerProps {
 }
 interface ThumbProps {
     index: number;
-    name?: string;
+    name?: string | undefined;
+}
+interface DraggingIndicatorProps {
+    index: number;
 }
 interface MachineApi<T extends PropTypes = PropTypes> {
     /**
@@ -255,6 +258,7 @@ interface MachineApi<T extends PropTypes = PropTypes> {
     getControlProps(): T["element"];
     getMarkerGroupProps(): T["element"];
     getMarkerProps(props: MarkerProps): T["element"];
+    getDraggingIndicatorProps(props: DraggingIndicatorProps): T["element"];
 }
 
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
@@ -266,4 +270,4 @@ declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Pro
 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 ElementIds, type FocusChangeDetails, type MarkerProps, type Service, type ThumbProps, type ValueChangeDetails, type ValueTextDetails, anatomy, connect, machine, props, splitProps, splitThumbProps, 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 };

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, NormalizePr
 import * as _zag_js_core from '@zag-js/core';
 import { Machine, StateMachine } from '@zag-js/core';
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "thumb" | "valueText" | "track" | "range" | "control" | "markerGroup" | "marker">;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "thumb" | "valueText" | "track" | "range" | "control" | "markerGroup" | "marker" | "draggingIndicator">;
 
 interface ValueChangeDetails {
     value: number[];
@@ -31,23 +31,23 @@ interface PublicContext extends DirectionProperty, CommonProperties {
     /**
      * The ids of the elements in the range slider. Useful for composition.
      */
-    ids?: ElementIds;
+    ids?: ElementIds | undefined;
     /**
      * The aria-label of each slider thumb. Useful for providing an accessible name to the slider
      */
-    "aria-label"?: string[];
+    "aria-label"?: string[] | undefined;
     /**
      * The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider
      */
-    "aria-labelledby"?: string[];
+    "aria-labelledby"?: string[] | undefined;
     /**
      * The name associated with each slider thumb (when used in a form)
      */
-    name?: string;
+    name?: string | undefined;
     /**
      * The associate form of the underlying input element.
      */
-    form?: string;
+    form?: string | undefined;
     /**
      * The value of the range slider
      */
@@ -55,15 +55,15 @@ interface PublicContext extends DirectionProperty, CommonProperties {
     /**
      * Whether the slider is disabled
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Whether the slider is read-only
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
     /**
      * Whether the slider is invalid
      */
-    invalid?: boolean;
+    invalid?: boolean | undefined;
     /**
      * Function invoked when the value of the slider changes
      */
@@ -112,7 +112,7 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      *
      * @default "start"
      */
-    origin?: "start" | "center";
+    origin?: "start" | "center" | undefined;
     /**
      * The alignment of the slider thumb relative to the track
      * - `center`: the thumb will extend beyond the bounds of the slider track.
@@ -120,7 +120,7 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      *
      * @default "contain"
      */
-    thumbAlignment?: "contain" | "center";
+    thumbAlignment?: "contain" | "center" | undefined;
     /**
      * The slider thumbs dimensions
      */
@@ -182,7 +182,10 @@ interface MarkerProps {
 }
 interface ThumbProps {
     index: number;
-    name?: string;
+    name?: string | undefined;
+}
+interface DraggingIndicatorProps {
+    index: number;
 }
 interface MachineApi<T extends PropTypes = PropTypes> {
     /**
@@ -255,6 +258,7 @@ interface MachineApi<T extends PropTypes = PropTypes> {
     getControlProps(): T["element"];
     getMarkerGroupProps(): T["element"];
     getMarkerProps(props: MarkerProps): T["element"];
+    getDraggingIndicatorProps(props: DraggingIndicatorProps): T["element"];
 }
 
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
@@ -266,4 +270,4 @@ declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Pro
 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 ElementIds, type FocusChangeDetails, type MarkerProps, type Service, type ThumbProps, type ValueChangeDetails, type ValueTextDetails, anatomy, connect, machine, props, splitProps, splitThumbProps, 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 };

package/dist/index.js

@@ -20,7 +20,8 @@ var anatomy = anatomy$1.createAnatomy("slider").parts(
   "range",
   "control",
   "markerGroup",
-  "marker"
+  "marker",
+  "draggingIndicator"
 );
 var parts = anatomy.build();
 function getBounds(value) {
@@ -509,6 +510,19 @@ function connect(state, send, normalize) {
         "data-state": markerState,
         style
       });
+    },
+    getDraggingIndicatorProps(props2) {
+      const { index = 0 } = props2;
+      const isDragging = index === state.context.focusedIndex && dragging;
+      return normalize.element({
+        ...parts.draggingIndicator.attrs,
+        role: "presentation",
+        dir: state.context.dir,
+        hidden: !isDragging,
+        "data-orientation": state.context.orientation,
+        "data-state": isDragging ? "open" : "closed",
+        style: dom.getThumbStyle(state.context, index)
+      });
     }
   };
 }

package/dist/index.mjs

@@ -18,7 +18,8 @@ var anatomy = createAnatomy("slider").parts(
   "range",
   "control",
   "markerGroup",
-  "marker"
+  "marker",
+  "draggingIndicator"
 );
 var parts = anatomy.build();
 function getBounds(value) {
@@ -507,6 +508,19 @@ function connect(state, send, normalize) {
         "data-state": markerState,
         style
       });
+    },
+    getDraggingIndicatorProps(props2) {
+      const { index = 0 } = props2;
+      const isDragging = index === state.context.focusedIndex && dragging;
+      return normalize.element({
+        ...parts.draggingIndicator.attrs,
+        role: "presentation",
+        dir: state.context.dir,
+        hidden: !isDragging,
+        "data-orientation": state.context.orientation,
+        "data-state": isDragging ? "open" : "closed",
+        style: dom.getThumbStyle(state.context, index)
+      });
     }
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/slider",
-  "version": "0.74.2",
+  "version": "0.75.0",
   "description": "Core logic for the slider widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,15 +27,15 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.74.2",
-    "@zag-js/core": "0.74.2",
-    "@zag-js/form-utils": "0.74.2",
-    "@zag-js/dom-query": "0.74.2",
-    "@zag-js/dom-event": "0.74.2",
-    "@zag-js/utils": "0.74.2",
-    "@zag-js/numeric-range": "0.74.2",
-    "@zag-js/element-size": "0.74.2",
-    "@zag-js/types": "0.74.2"
+    "@zag-js/anatomy": "0.75.0",
+    "@zag-js/core": "0.75.0",
+    "@zag-js/form-utils": "0.75.0",
+    "@zag-js/dom-query": "0.75.0",
+    "@zag-js/dom-event": "0.75.0",
+    "@zag-js/utils": "0.75.0",
+    "@zag-js/numeric-range": "0.75.0",
+    "@zag-js/element-size": "0.75.0",
+    "@zag-js/types": "0.75.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"