@veeqo/ui 13.11.2 → 13.12.0

package/dist/components/Slider/components/SliderHandle/SliderHandle.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var React = require('react');
+var buildClassnames = require('../../../../utils/buildClassnames.cjs');
+var SliderHandle_module = require('./SliderHandle.module.scss.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+/**
+ * Slider handle component that renders the draggable handle and optional value label.
+ * Positioned dynamically based on the slider value.
+ */
+const SliderHandle = React__default.default.forwardRef(({ horizontalPosition, value, min, max, disabled, isActive, showLabel, className, ariaLabel, ariaLabelledBy, onMouseDown, onMouseEnter, onMouseLeave, onFocus, onBlur, onKeyDown, }, ref) => {
+    const positionStyle = { left: `${horizontalPosition}%` };
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        showLabel && (React__default.default.createElement("div", { className: SliderHandle_module.valueLabel, style: positionStyle, "data-testid": "slider-value-label" }, value)),
+        React__default.default.createElement("div", { ref: ref, role: "slider", "aria-orientation": "horizontal", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: buildClassnames.buildClassnames([SliderHandle_module.slider, className]), style: positionStyle, "data-disabled": disabled, "data-active": isActive, "data-testid": "slider-handle", tabIndex: disabled ? -1 : 0, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-disabled": disabled, onMouseDown: onMouseDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown })));
+});
+SliderHandle.displayName = 'SliderHandle';
+
+exports.SliderHandle = SliderHandle;
+//# sourceMappingURL=SliderHandle.cjs.map

package/dist/components/Slider/components/SliderHandle/SliderHandle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderHandle.cjs","sources":["../../../../../src/components/Slider/components/SliderHandle/SliderHandle.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\nimport styles from './SliderHandle.module.scss';\nimport { SliderHandleProps } from './types';\n\n/**\n * Slider handle component that renders the draggable handle and optional value label.\n * Positioned dynamically based on the slider value.\n */\nexport const SliderHandle = React.forwardRef<HTMLDivElement, SliderHandleProps>(\n  (\n    {\n      horizontalPosition,\n      value,\n      min,\n      max,\n      disabled,\n      isActive,\n      showLabel,\n      className,\n      ariaLabel,\n      ariaLabelledBy,\n      onMouseDown,\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n      onKeyDown,\n    },\n    ref,\n  ) => {\n    const positionStyle = { left: `${horizontalPosition}%` };\n\n    return (\n      <>\n        {showLabel && (\n          <div className={styles.valueLabel} style={positionStyle} data-testid=\"slider-value-label\">\n            {value}\n          </div>\n        )}\n        <div\n          ref={ref}\n          role=\"slider\"\n          aria-orientation=\"horizontal\"\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          className={buildClassnames([styles.slider, className])}\n          style={positionStyle}\n          data-disabled={disabled}\n          data-active={isActive}\n          data-testid=\"slider-handle\"\n          tabIndex={disabled ? -1 : 0}\n          aria-valuemin={min}\n          aria-valuemax={max}\n          aria-valuenow={value}\n          aria-disabled={disabled}\n          onMouseDown={onMouseDown}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          onKeyDown={onKeyDown}\n        />\n      </>\n    );\n  },\n);\n\nSliderHandle.displayName = 'SliderHandle';\n"],"names":["React","styles","buildClassnames"],"mappings":";;;;;;;;;;AAKA;;;AAGG;MACU,YAAY,GAAGA,sBAAK,CAAC,UAAU,CAC1C,CACE,EACE,kBAAkB,EAClB,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACT,cAAc,EACd,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,SAAS,GACV,EACD,GAAG,KACD;IACF,MAAM,aAAa,GAAG,EAAE,IAAI,EAAE,CAAG,EAAA,kBAAkB,CAAG,CAAA,CAAA,EAAE;AAExD,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;AACG,QAAA,SAAS,KACRA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,mBAAM,CAAC,UAAU,EAAE,KAAK,EAAE,aAAa,EAAA,aAAA,EAAc,oBAAoB,EACtF,EAAA,KAAK,CACF,CACP;AACD,QAAAD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACI,kBAAA,EAAA,YAAY,EACjB,YAAA,EAAA,SAAS,qBACJ,cAAc,EAC/B,SAAS,EAAEE,+BAAe,CAAC,CAACD,mBAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EACtD,KAAK,EAAE,aAAa,EAAA,eAAA,EACL,QAAQ,EAAA,aAAA,EACV,QAAQ,EACT,aAAA,EAAA,eAAe,EAC3B,QAAQ,EAAE,QAAQ,GAAG,EAAE,GAAG,CAAC,EAAA,eAAA,EACZ,GAAG,EACH,eAAA,EAAA,GAAG,EACH,eAAA,EAAA,KAAK,mBACL,QAAQ,EACvB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,CAAA,CACD;AAEP,CAAC;AAGH,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}

package/dist/components/Slider/components/SliderHandle/SliderHandle.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SliderHandleProps } from './types';
+/**
+ * Slider handle component that renders the draggable handle and optional value label.
+ * Positioned dynamically based on the slider value.
+ */
+export declare const SliderHandle: React.ForwardRefExoticComponent<SliderHandleProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Slider/components/SliderHandle/SliderHandle.js

@@ -0,0 +1,18 @@
+import React__default from 'react';
+import { buildClassnames } from '../../../../utils/buildClassnames.js';
+import styles from './SliderHandle.module.scss.js';
+
+/**
+ * Slider handle component that renders the draggable handle and optional value label.
+ * Positioned dynamically based on the slider value.
+ */
+const SliderHandle = React__default.forwardRef(({ horizontalPosition, value, min, max, disabled, isActive, showLabel, className, ariaLabel, ariaLabelledBy, onMouseDown, onMouseEnter, onMouseLeave, onFocus, onBlur, onKeyDown, }, ref) => {
+    const positionStyle = { left: `${horizontalPosition}%` };
+    return (React__default.createElement(React__default.Fragment, null,
+        showLabel && (React__default.createElement("div", { className: styles.valueLabel, style: positionStyle, "data-testid": "slider-value-label" }, value)),
+        React__default.createElement("div", { ref: ref, role: "slider", "aria-orientation": "horizontal", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: buildClassnames([styles.slider, className]), style: positionStyle, "data-disabled": disabled, "data-active": isActive, "data-testid": "slider-handle", tabIndex: disabled ? -1 : 0, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-disabled": disabled, onMouseDown: onMouseDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown })));
+});
+SliderHandle.displayName = 'SliderHandle';
+
+export { SliderHandle };
+//# sourceMappingURL=SliderHandle.js.map

package/dist/components/Slider/components/SliderHandle/SliderHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderHandle.js","sources":["../../../../../src/components/Slider/components/SliderHandle/SliderHandle.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\nimport styles from './SliderHandle.module.scss';\nimport { SliderHandleProps } from './types';\n\n/**\n * Slider handle component that renders the draggable handle and optional value label.\n * Positioned dynamically based on the slider value.\n */\nexport const SliderHandle = React.forwardRef<HTMLDivElement, SliderHandleProps>(\n  (\n    {\n      horizontalPosition,\n      value,\n      min,\n      max,\n      disabled,\n      isActive,\n      showLabel,\n      className,\n      ariaLabel,\n      ariaLabelledBy,\n      onMouseDown,\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n      onKeyDown,\n    },\n    ref,\n  ) => {\n    const positionStyle = { left: `${horizontalPosition}%` };\n\n    return (\n      <>\n        {showLabel && (\n          <div className={styles.valueLabel} style={positionStyle} data-testid=\"slider-value-label\">\n            {value}\n          </div>\n        )}\n        <div\n          ref={ref}\n          role=\"slider\"\n          aria-orientation=\"horizontal\"\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          className={buildClassnames([styles.slider, className])}\n          style={positionStyle}\n          data-disabled={disabled}\n          data-active={isActive}\n          data-testid=\"slider-handle\"\n          tabIndex={disabled ? -1 : 0}\n          aria-valuemin={min}\n          aria-valuemax={max}\n          aria-valuenow={value}\n          aria-disabled={disabled}\n          onMouseDown={onMouseDown}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          onKeyDown={onKeyDown}\n        />\n      </>\n    );\n  },\n);\n\nSliderHandle.displayName = 'SliderHandle';\n"],"names":["React"],"mappings":";;;;AAKA;;;AAGG;MACU,YAAY,GAAGA,cAAK,CAAC,UAAU,CAC1C,CACE,EACE,kBAAkB,EAClB,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACT,cAAc,EACd,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,SAAS,GACV,EACD,GAAG,KACD;IACF,MAAM,aAAa,GAAG,EAAE,IAAI,EAAE,CAAG,EAAA,kBAAkB,CAAG,CAAA,CAAA,EAAE;AAExD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;AACG,QAAA,SAAS,KACRA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,KAAK,EAAE,aAAa,EAAA,aAAA,EAAc,oBAAoB,EACtF,EAAA,KAAK,CACF,CACP;AACD,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACI,kBAAA,EAAA,YAAY,EACjB,YAAA,EAAA,SAAS,qBACJ,cAAc,EAC/B,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EACtD,KAAK,EAAE,aAAa,EAAA,eAAA,EACL,QAAQ,EAAA,aAAA,EACV,QAAQ,EACT,aAAA,EAAA,eAAe,EAC3B,QAAQ,EAAE,QAAQ,GAAG,EAAE,GAAG,CAAC,EAAA,eAAA,EACZ,GAAG,EACH,eAAA,EAAA,GAAG,EACH,eAAA,EAAA,KAAK,mBACL,QAAQ,EACvB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,CAAA,CACD;AAEP,CAAC;AAGH,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}

package/dist/components/Slider/components/SliderHandle/SliderHandle.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._slider_19zn5_1 {\n  position: absolute;\n  top: calc((var(--slider-size) - var(--track-height)) / 2);\n  width: var(--slider-size);\n  height: var(--slider-size);\n  background: white;\n  border: var(--border-size) solid var(--colors-secondary-blue-base);\n  border-radius: var(--radius-full);\n  cursor: pointer;\n  pointer-events: auto;\n  transform: translateX(-50%);\n}\n\n._slider_19zn5_1[data-active=true] {\n  box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n._slider_19zn5_1:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n._slider_19zn5_1[data-disabled=true] {\n  border-color: var(--colors-neutral-grey-base);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n._valueLabel_19zn5_29 {\n  position: absolute;\n  top: calc(var(--sizes-7) * -1);\n  transform: translateX(-50%);\n  background: var(--colors-secondary-blue-base);\n  color: white;\n  padding: var(--sizes-1) var(--sizes-2);\n  border-radius: var(--sizes-1);\n  font-size: var(--sizes-3);\n  white-space: nowrap;\n}");
+var styles = {"slider":"_slider_19zn5_1","valueLabel":"_valueLabel_19zn5_29"};
+
+module.exports = styles;
+//# sourceMappingURL=SliderHandle.module.scss.cjs.map

package/dist/components/Slider/components/SliderHandle/SliderHandle.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderHandle.module.scss.cjs","sources":["../../../../../src/components/Slider/components/SliderHandle/SliderHandle.module.scss"],"sourcesContent":[".slider {\n  position: absolute;\n  top: calc((var(--slider-size) - var(--track-height)) / 2);\n  width: var(--slider-size);\n  height: var(--slider-size);\n  background: white;\n  border: var(--border-size) solid var(--colors-secondary-blue-base);\n  border-radius: var(--radius-full);\n  cursor: pointer;\n  pointer-events: auto;\n  transform: translateX(-50%);\n}\n\n.slider[data-active='true'] {\n  box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n.slider:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n.slider[data-disabled='true'] {\n  border-color: var(--colors-neutral-grey-base);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.valueLabel {\n  position: absolute;\n  top: calc(var(--sizes-7) * -1);\n  transform: translateX(-50%);\n  background: var(--colors-secondary-blue-base);\n  color: white;\n  padding: var(--sizes-1) var(--sizes-2);\n  border-radius: var(--sizes-1);\n  font-size: var(--sizes-3);\n  white-space: nowrap;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,2jCAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,sBAAA;;;;"}

package/dist/components/Slider/components/SliderHandle/SliderHandle.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../../../_virtual/____insertStyle.js';
+
+insertStyle("._slider_19zn5_1 {\n  position: absolute;\n  top: calc((var(--slider-size) - var(--track-height)) / 2);\n  width: var(--slider-size);\n  height: var(--slider-size);\n  background: white;\n  border: var(--border-size) solid var(--colors-secondary-blue-base);\n  border-radius: var(--radius-full);\n  cursor: pointer;\n  pointer-events: auto;\n  transform: translateX(-50%);\n}\n\n._slider_19zn5_1[data-active=true] {\n  box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n._slider_19zn5_1:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n._slider_19zn5_1[data-disabled=true] {\n  border-color: var(--colors-neutral-grey-base);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n._valueLabel_19zn5_29 {\n  position: absolute;\n  top: calc(var(--sizes-7) * -1);\n  transform: translateX(-50%);\n  background: var(--colors-secondary-blue-base);\n  color: white;\n  padding: var(--sizes-1) var(--sizes-2);\n  border-radius: var(--sizes-1);\n  font-size: var(--sizes-3);\n  white-space: nowrap;\n}");
+var styles = {"slider":"_slider_19zn5_1","valueLabel":"_valueLabel_19zn5_29"};
+
+export { styles as default };
+//# sourceMappingURL=SliderHandle.module.scss.js.map

package/dist/components/Slider/components/SliderHandle/SliderHandle.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderHandle.module.scss.js","sources":["../../../../../src/components/Slider/components/SliderHandle/SliderHandle.module.scss"],"sourcesContent":[".slider {\n  position: absolute;\n  top: calc((var(--slider-size) - var(--track-height)) / 2);\n  width: var(--slider-size);\n  height: var(--slider-size);\n  background: white;\n  border: var(--border-size) solid var(--colors-secondary-blue-base);\n  border-radius: var(--radius-full);\n  cursor: pointer;\n  pointer-events: auto;\n  transform: translateX(-50%);\n}\n\n.slider[data-active='true'] {\n  box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n.slider:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n.slider[data-disabled='true'] {\n  border-color: var(--colors-neutral-grey-base);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.valueLabel {\n  position: absolute;\n  top: calc(var(--sizes-7) * -1);\n  transform: translateX(-50%);\n  background: var(--colors-secondary-blue-base);\n  color: white;\n  padding: var(--sizes-1) var(--sizes-2);\n  border-radius: var(--sizes-1);\n  font-size: var(--sizes-3);\n  white-space: nowrap;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,2jCAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,sBAAA;;;;"}

package/dist/components/Slider/components/SliderHandle/index.d.ts

@@ -0,0 +1 @@
+export { SliderHandle } from './SliderHandle';

package/dist/components/Slider/components/SliderHandle/types.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export type SliderHandleProps = {
+    horizontalPosition: number;
+    value: number;
+    min: number;
+    max: number;
+    disabled: boolean;
+    isActive: boolean;
+    showLabel: boolean;
+    className?: string;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    onMouseDown: (e: React.MouseEvent) => void;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    onKeyDown: (e: React.KeyboardEvent) => void;
+};

package/dist/components/Slider/components/SliderTrack/SliderTrack.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var React = require('react');
+var buildClassnames = require('../../../../utils/buildClassnames.cjs');
+var SliderTrack_module = require('./SliderTrack.module.scss.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+/**
+ * SliderTrack component renders the blue, filled track portion of a slider.
+ * It visually represents the active range between slider handles.
+ */
+const SliderTrack = ({ left, width, disabled, className }) => (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([SliderTrack_module.range, className]), style: { left: `${left}%`, width: `${width}%` }, "data-disabled": disabled, "data-testid": "slider-track" }));
+
+exports.SliderTrack = SliderTrack;
+//# sourceMappingURL=SliderTrack.cjs.map

package/dist/components/Slider/components/SliderTrack/SliderTrack.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderTrack.cjs","sources":["../../../../../src/components/Slider/components/SliderTrack/SliderTrack.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\nimport styles from './SliderTrack.module.scss';\nimport { SliderTrackProps } from './types';\n\n/**\n * SliderTrack component renders the blue, filled track portion of a slider.\n * It visually represents the active range between slider handles.\n */\nexport const SliderTrack = ({ left, width, disabled, className }: SliderTrackProps) => (\n  <div\n    className={buildClassnames([styles.range, className])}\n    style={{ left: `${left}%`, width: `${width}%` }}\n    data-disabled={disabled}\n    data-testid=\"slider-track\"\n  />\n);\n"],"names":["React","buildClassnames","styles"],"mappings":";;;;;;;;;;AAKA;;;AAGG;AACU,MAAA,WAAW,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAoB,MAChFA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEC,+BAAe,CAAC,CAACC,kBAAM,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,EACrD,KAAK,EAAE,EAAE,IAAI,EAAE,CAAA,EAAG,IAAI,CAAA,CAAA,CAAG,EAAE,KAAK,EAAE,CAAG,EAAA,KAAK,CAAG,CAAA,CAAA,EAAE,EAChC,eAAA,EAAA,QAAQ,EACX,aAAA,EAAA,cAAc,EAC1B,CAAA;;;;"}

package/dist/components/Slider/components/SliderTrack/SliderTrack.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SliderTrackProps } from './types';
+/**
+ * SliderTrack component renders the blue, filled track portion of a slider.
+ * It visually represents the active range between slider handles.
+ */
+export declare const SliderTrack: ({ left, width, disabled, className }: SliderTrackProps) => React.JSX.Element;

package/dist/components/Slider/components/SliderTrack/SliderTrack.js

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import { buildClassnames } from '../../../../utils/buildClassnames.js';
+import styles from './SliderTrack.module.scss.js';
+
+/**
+ * SliderTrack component renders the blue, filled track portion of a slider.
+ * It visually represents the active range between slider handles.
+ */
+const SliderTrack = ({ left, width, disabled, className }) => (React__default.createElement("div", { className: buildClassnames([styles.range, className]), style: { left: `${left}%`, width: `${width}%` }, "data-disabled": disabled, "data-testid": "slider-track" }));
+
+export { SliderTrack };
+//# sourceMappingURL=SliderTrack.js.map

package/dist/components/Slider/components/SliderTrack/SliderTrack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderTrack.js","sources":["../../../../../src/components/Slider/components/SliderTrack/SliderTrack.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\nimport styles from './SliderTrack.module.scss';\nimport { SliderTrackProps } from './types';\n\n/**\n * SliderTrack component renders the blue, filled track portion of a slider.\n * It visually represents the active range between slider handles.\n */\nexport const SliderTrack = ({ left, width, disabled, className }: SliderTrackProps) => (\n  <div\n    className={buildClassnames([styles.range, className])}\n    style={{ left: `${left}%`, width: `${width}%` }}\n    data-disabled={disabled}\n    data-testid=\"slider-track\"\n  />\n);\n"],"names":["React"],"mappings":";;;;AAKA;;;AAGG;AACU,MAAA,WAAW,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAoB,MAChFA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,EACrD,KAAK,EAAE,EAAE,IAAI,EAAE,CAAA,EAAG,IAAI,CAAA,CAAA,CAAG,EAAE,KAAK,EAAE,CAAG,EAAA,KAAK,CAAG,CAAA,CAAA,EAAE,EAChC,eAAA,EAAA,QAAQ,EACX,aAAA,EAAA,cAAc,EAC1B,CAAA;;;;"}

package/dist/components/Slider/components/SliderTrack/SliderTrack.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._range_1wyjy_1 {\n  position: relative;\n  background: var(--colors-secondary-blue-light);\n  height: var(--track-height);\n  bottom: var(--track-height);\n  border-radius: var(--radius-base);\n}\n\n._range_1wyjy_1[data-disabled=true] {\n  background: var(--colors-neutral-grey-base);\n}");
+var styles = {"range":"_range_1wyjy_1"};
+
+module.exports = styles;
+//# sourceMappingURL=SliderTrack.module.scss.cjs.map

package/dist/components/Slider/components/SliderTrack/SliderTrack.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderTrack.module.scss.cjs","sources":["../../../../../src/components/Slider/components/SliderTrack/SliderTrack.module.scss"],"sourcesContent":[".range {\n  position: relative;\n  background: var(--colors-secondary-blue-light);\n  height: var(--track-height);\n  bottom: var(--track-height);\n  border-radius: var(--radius-base);\n}\n\n.range[data-disabled='true'] {\n  background: var(--colors-neutral-grey-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,kSAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}

package/dist/components/Slider/components/SliderTrack/SliderTrack.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../../../_virtual/____insertStyle.js';
+
+insertStyle("._range_1wyjy_1 {\n  position: relative;\n  background: var(--colors-secondary-blue-light);\n  height: var(--track-height);\n  bottom: var(--track-height);\n  border-radius: var(--radius-base);\n}\n\n._range_1wyjy_1[data-disabled=true] {\n  background: var(--colors-neutral-grey-base);\n}");
+var styles = {"range":"_range_1wyjy_1"};
+
+export { styles as default };
+//# sourceMappingURL=SliderTrack.module.scss.js.map

package/dist/components/Slider/components/SliderTrack/SliderTrack.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderTrack.module.scss.js","sources":["../../../../../src/components/Slider/components/SliderTrack/SliderTrack.module.scss"],"sourcesContent":[".range {\n  position: relative;\n  background: var(--colors-secondary-blue-light);\n  height: var(--track-height);\n  bottom: var(--track-height);\n  border-radius: var(--radius-base);\n}\n\n.range[data-disabled='true'] {\n  background: var(--colors-neutral-grey-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,kSAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}

package/dist/components/Slider/components/SliderTrack/index.d.ts

@@ -0,0 +1 @@
+export { SliderTrack } from './SliderTrack';

package/dist/components/Slider/components/SliderTrack/types.d.ts

@@ -0,0 +1,6 @@
+export type SliderTrackProps = {
+    left: number;
+    width: number;
+    disabled: boolean;
+    className?: string;
+};

package/dist/components/Slider/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useSliderDrag } from './useSliderDrag';
+export { useSliderKeyboard } from './useSliderKeyboard';

package/dist/components/Slider/hooks/types.d.ts

@@ -0,0 +1,24 @@
+import { RefObject } from 'react';
+import { DraggingHandle } from '../types';
+export type UseSliderDragProps = {
+    containerRef: RefObject<HTMLDivElement>;
+    value: number | number[];
+    min: number;
+    max: number;
+    step: number;
+    disabled: boolean;
+    onChange: (value: number | number[]) => void;
+    onSlideStart?: () => void;
+    onSlideEnd?: () => void;
+};
+export type UseSliderKeyboardProps = {
+    value: number | number[];
+    min: number;
+    max: number;
+    step: number;
+    disabled: boolean;
+    onChange: (value: number | number[]) => void;
+    setFocusedHandle: (handle: DraggingHandle) => void;
+    startHandleRef: React.RefObject<HTMLDivElement>;
+    endHandleRef: React.RefObject<HTMLDivElement>;
+};

package/dist/components/Slider/hooks/useSliderDrag.cjs

@@ -0,0 +1,85 @@
+'use strict';
+
+var React = require('react');
+var calculateSliderValue = require('../utils/calculateSliderValue.cjs');
+
+/**
+ * Hook that manages mouse drag interactions for slider handles.
+ * Handles value updates, step snapping, boundary constraints, and handle crossing logic.
+ * Returns the current dragging state and a mouseDown handler to attach to slider handles.
+ */
+const useSliderDrag = ({ containerRef, value, min, max, step, disabled, onChange, onSlideStart, onSlideEnd, }) => {
+    const [isDraggingHandle, setIsDraggingHandle] = React.useState(null);
+    /**
+     * Calculates new value based on mouse position and updates slider state.
+     * Applies step snapping, boundary constraints, and handles crossing when values equal.
+     */
+    const handleMouseMove = React.useCallback((e) => {
+        if (!isDraggingHandle || !containerRef.current)
+            return;
+        let sliderValue;
+        if (Array.isArray(value)) {
+            sliderValue = isDraggingHandle === 'start' ? value[0] : value[1];
+        }
+        else {
+            sliderValue = value;
+        }
+        const containerRect = containerRef.current.getBoundingClientRect();
+        // Slider position relative to the container in percentage
+        const positionPercent = ((e.pageX - containerRect.x) * 100) / containerRect.width;
+        // Calculate new value from mouse position
+        const targetValue = (max - min) * (positionPercent / 100) + min;
+        const newValue = calculateSliderValue.calculateSliderValue({
+            currentValue: sliderValue,
+            targetValue,
+            min,
+            max,
+            step,
+        });
+        if (sliderValue === newValue)
+            return;
+        let resultValue;
+        if (Array.isArray(value)) {
+            const newStart = isDraggingHandle === 'start' ? newValue : value[0];
+            const newEnd = isDraggingHandle === 'end' ? newValue : value[1];
+            // If handles cross, swap them and switch dragging to continue movement
+            if (newStart > newEnd) {
+                resultValue = [newEnd, newStart];
+                setIsDraggingHandle(isDraggingHandle === 'start' ? 'end' : 'start');
+            }
+            else {
+                resultValue = [newStart, newEnd];
+            }
+        }
+        else {
+            resultValue = newValue;
+        }
+        onChange(resultValue);
+    }, [containerRef, isDraggingHandle, max, min, onChange, step, value]);
+    const handleMouseUp = React.useCallback(() => {
+        setIsDraggingHandle(null);
+        onSlideEnd === null || onSlideEnd === undefined ? undefined : onSlideEnd();
+    }, [onSlideEnd]);
+    const handleMouseDown = React.useCallback((handle) => (e) => {
+        if (disabled)
+            return;
+        onSlideStart === null || onSlideStart === undefined ? undefined : onSlideStart();
+        setIsDraggingHandle(handle);
+        e.preventDefault();
+    }, [onSlideStart, disabled]);
+    React.useEffect(() => {
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [handleMouseMove, handleMouseUp]);
+    return {
+        isDraggingHandle,
+        handleMouseDown,
+    };
+};
+
+exports.useSliderDrag = useSliderDrag;
+//# sourceMappingURL=useSliderDrag.cjs.map

package/dist/components/Slider/hooks/useSliderDrag.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSliderDrag.cjs","sources":["../../../../src/components/Slider/hooks/useSliderDrag.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { DraggingHandle } from '../types';\nimport { UseSliderDragProps } from './types';\nimport { calculateSliderValue } from '../utils';\n\n/**\n * Hook that manages mouse drag interactions for slider handles.\n * Handles value updates, step snapping, boundary constraints, and handle crossing logic.\n * Returns the current dragging state and a mouseDown handler to attach to slider handles.\n */\nexport const useSliderDrag = ({\n  containerRef,\n  value,\n  min,\n  max,\n  step,\n  disabled,\n  onChange,\n  onSlideStart,\n  onSlideEnd,\n}: UseSliderDragProps) => {\n  const [isDraggingHandle, setIsDraggingHandle] = useState<DraggingHandle>(null);\n\n  /**\n   * Calculates new value based on mouse position and updates slider state.\n   * Applies step snapping, boundary constraints, and handles crossing when values equal.\n   */\n  const handleMouseMove = useCallback(\n    (e: MouseEvent) => {\n      if (!isDraggingHandle || !containerRef.current) return;\n\n      let sliderValue: number;\n      if (Array.isArray(value)) {\n        sliderValue = isDraggingHandle === 'start' ? value[0] : value[1];\n      } else {\n        sliderValue = value as number;\n      }\n\n      const containerRect = containerRef.current.getBoundingClientRect();\n\n      // Slider position relative to the container in percentage\n      const positionPercent = ((e.pageX - containerRect.x) * 100) / containerRect.width;\n\n      // Calculate new value from mouse position\n      const targetValue = (max - min) * (positionPercent / 100) + min;\n\n      const newValue = calculateSliderValue({\n        currentValue: sliderValue,\n        targetValue,\n        min,\n        max,\n        step,\n      });\n\n      if (sliderValue === newValue) return;\n\n      let resultValue: number | number[];\n\n      if (Array.isArray(value)) {\n        const newStart = isDraggingHandle === 'start' ? newValue : value[0];\n        const newEnd = isDraggingHandle === 'end' ? newValue : value[1];\n\n        // If handles cross, swap them and switch dragging to continue movement\n        if (newStart > newEnd) {\n          resultValue = [newEnd, newStart];\n          setIsDraggingHandle(isDraggingHandle === 'start' ? 'end' : 'start');\n        } else {\n          resultValue = [newStart, newEnd];\n        }\n      } else {\n        resultValue = newValue;\n      }\n\n      onChange(resultValue);\n    },\n    [containerRef, isDraggingHandle, max, min, onChange, step, value],\n  );\n\n  const handleMouseUp = useCallback(() => {\n    setIsDraggingHandle(null);\n    onSlideEnd?.();\n  }, [onSlideEnd]);\n\n  const handleMouseDown = useCallback(\n    (handle: DraggingHandle) => (e: React.MouseEvent) => {\n      if (disabled) return;\n      onSlideStart?.();\n      setIsDraggingHandle(handle);\n      e.preventDefault();\n    },\n    [onSlideStart, disabled],\n  );\n\n  useEffect(() => {\n    document.addEventListener('mousemove', handleMouseMove);\n    document.addEventListener('mouseup', handleMouseUp);\n    return () => {\n      document.removeEventListener('mousemove', handleMouseMove);\n      document.removeEventListener('mouseup', handleMouseUp);\n    };\n  }, [handleMouseMove, handleMouseUp]);\n\n  return {\n    isDraggingHandle,\n    handleMouseDown,\n  };\n};\n"],"names":["useState","useCallback","calculateSliderValue","useEffect"],"mappings":"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"}

package/dist/components/Slider/hooks/useSliderDrag.d.ts

@@ -0,0 +1,11 @@
+import { DraggingHandle } from '../types';
+import { UseSliderDragProps } from './types';
+/**
+ * Hook that manages mouse drag interactions for slider handles.
+ * Handles value updates, step snapping, boundary constraints, and handle crossing logic.
+ * Returns the current dragging state and a mouseDown handler to attach to slider handles.
+ */
+export declare const useSliderDrag: ({ containerRef, value, min, max, step, disabled, onChange, onSlideStart, onSlideEnd, }: UseSliderDragProps) => {
+    isDraggingHandle: DraggingHandle;
+    handleMouseDown: (handle: DraggingHandle) => (e: React.MouseEvent) => void;
+};

package/dist/components/Slider/hooks/useSliderDrag.js

@@ -0,0 +1,83 @@
+import { useState, useCallback, useEffect } from 'react';
+import { calculateSliderValue } from '../utils/calculateSliderValue.js';
+
+/**
+ * Hook that manages mouse drag interactions for slider handles.
+ * Handles value updates, step snapping, boundary constraints, and handle crossing logic.
+ * Returns the current dragging state and a mouseDown handler to attach to slider handles.
+ */
+const useSliderDrag = ({ containerRef, value, min, max, step, disabled, onChange, onSlideStart, onSlideEnd, }) => {
+    const [isDraggingHandle, setIsDraggingHandle] = useState(null);
+    /**
+     * Calculates new value based on mouse position and updates slider state.
+     * Applies step snapping, boundary constraints, and handles crossing when values equal.
+     */
+    const handleMouseMove = useCallback((e) => {
+        if (!isDraggingHandle || !containerRef.current)
+            return;
+        let sliderValue;
+        if (Array.isArray(value)) {
+            sliderValue = isDraggingHandle === 'start' ? value[0] : value[1];
+        }
+        else {
+            sliderValue = value;
+        }
+        const containerRect = containerRef.current.getBoundingClientRect();
+        // Slider position relative to the container in percentage
+        const positionPercent = ((e.pageX - containerRect.x) * 100) / containerRect.width;
+        // Calculate new value from mouse position
+        const targetValue = (max - min) * (positionPercent / 100) + min;
+        const newValue = calculateSliderValue({
+            currentValue: sliderValue,
+            targetValue,
+            min,
+            max,
+            step,
+        });
+        if (sliderValue === newValue)
+            return;
+        let resultValue;
+        if (Array.isArray(value)) {
+            const newStart = isDraggingHandle === 'start' ? newValue : value[0];
+            const newEnd = isDraggingHandle === 'end' ? newValue : value[1];
+            // If handles cross, swap them and switch dragging to continue movement
+            if (newStart > newEnd) {
+                resultValue = [newEnd, newStart];
+                setIsDraggingHandle(isDraggingHandle === 'start' ? 'end' : 'start');
+            }
+            else {
+                resultValue = [newStart, newEnd];
+            }
+        }
+        else {
+            resultValue = newValue;
+        }
+        onChange(resultValue);
+    }, [containerRef, isDraggingHandle, max, min, onChange, step, value]);
+    const handleMouseUp = useCallback(() => {
+        setIsDraggingHandle(null);
+        onSlideEnd === null || onSlideEnd === undefined ? undefined : onSlideEnd();
+    }, [onSlideEnd]);
+    const handleMouseDown = useCallback((handle) => (e) => {
+        if (disabled)
+            return;
+        onSlideStart === null || onSlideStart === undefined ? undefined : onSlideStart();
+        setIsDraggingHandle(handle);
+        e.preventDefault();
+    }, [onSlideStart, disabled]);
+    useEffect(() => {
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [handleMouseMove, handleMouseUp]);
+    return {
+        isDraggingHandle,
+        handleMouseDown,
+    };
+};
+
+export { useSliderDrag };
+//# sourceMappingURL=useSliderDrag.js.map

package/dist/components/Slider/hooks/useSliderDrag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSliderDrag.js","sources":["../../../../src/components/Slider/hooks/useSliderDrag.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { DraggingHandle } from '../types';\nimport { UseSliderDragProps } from './types';\nimport { calculateSliderValue } from '../utils';\n\n/**\n * Hook that manages mouse drag interactions for slider handles.\n * Handles value updates, step snapping, boundary constraints, and handle crossing logic.\n * Returns the current dragging state and a mouseDown handler to attach to slider handles.\n */\nexport const useSliderDrag = ({\n  containerRef,\n  value,\n  min,\n  max,\n  step,\n  disabled,\n  onChange,\n  onSlideStart,\n  onSlideEnd,\n}: UseSliderDragProps) => {\n  const [isDraggingHandle, setIsDraggingHandle] = useState<DraggingHandle>(null);\n\n  /**\n   * Calculates new value based on mouse position and updates slider state.\n   * Applies step snapping, boundary constraints, and handles crossing when values equal.\n   */\n  const handleMouseMove = useCallback(\n    (e: MouseEvent) => {\n      if (!isDraggingHandle || !containerRef.current) return;\n\n      let sliderValue: number;\n      if (Array.isArray(value)) {\n        sliderValue = isDraggingHandle === 'start' ? value[0] : value[1];\n      } else {\n        sliderValue = value as number;\n      }\n\n      const containerRect = containerRef.current.getBoundingClientRect();\n\n      // Slider position relative to the container in percentage\n      const positionPercent = ((e.pageX - containerRect.x) * 100) / containerRect.width;\n\n      // Calculate new value from mouse position\n      const targetValue = (max - min) * (positionPercent / 100) + min;\n\n      const newValue = calculateSliderValue({\n        currentValue: sliderValue,\n        targetValue,\n        min,\n        max,\n        step,\n      });\n\n      if (sliderValue === newValue) return;\n\n      let resultValue: number | number[];\n\n      if (Array.isArray(value)) {\n        const newStart = isDraggingHandle === 'start' ? newValue : value[0];\n        const newEnd = isDraggingHandle === 'end' ? newValue : value[1];\n\n        // If handles cross, swap them and switch dragging to continue movement\n        if (newStart > newEnd) {\n          resultValue = [newEnd, newStart];\n          setIsDraggingHandle(isDraggingHandle === 'start' ? 'end' : 'start');\n        } else {\n          resultValue = [newStart, newEnd];\n        }\n      } else {\n        resultValue = newValue;\n      }\n\n      onChange(resultValue);\n    },\n    [containerRef, isDraggingHandle, max, min, onChange, step, value],\n  );\n\n  const handleMouseUp = useCallback(() => {\n    setIsDraggingHandle(null);\n    onSlideEnd?.();\n  }, [onSlideEnd]);\n\n  const handleMouseDown = useCallback(\n    (handle: DraggingHandle) => (e: React.MouseEvent) => {\n      if (disabled) return;\n      onSlideStart?.();\n      setIsDraggingHandle(handle);\n      e.preventDefault();\n    },\n    [onSlideStart, disabled],\n  );\n\n  useEffect(() => {\n    document.addEventListener('mousemove', handleMouseMove);\n    document.addEventListener('mouseup', handleMouseUp);\n    return () => {\n      document.removeEventListener('mousemove', handleMouseMove);\n      document.removeEventListener('mouseup', handleMouseUp);\n    };\n  }, [handleMouseMove, handleMouseUp]);\n\n  return {\n    isDraggingHandle,\n    handleMouseDown,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Slider/hooks/useSliderKeyboard.cjs

@@ -0,0 +1,85 @@
+'use strict';
+
+var React = require('react');
+var calculateSliderValue = require('../utils/calculateSliderValue.cjs');
+
+/**
+ * Hook that manages keyboard navigation for slider handles.
+ * Handles arrow keys, Home, and End keys with proper boundary constraints.
+ * Returns a keyboard event handler to attach to slider handles.
+ */
+const useSliderKeyboard = ({ value, min, max, step, disabled, onChange, setFocusedHandle, startHandleRef, endHandleRef, }) => {
+    const handleKeyDown = React.useCallback((handle) => (e) => {
+        var _a;
+        if (disabled)
+            return;
+        let currentValue;
+        if (Array.isArray(value)) {
+            currentValue = handle === 'start' ? value[0] : value[1];
+        }
+        else {
+            currentValue = value;
+        }
+        let newValue;
+        switch (e.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                e.preventDefault();
+                newValue = calculateSliderValue.calculateSliderValue({
+                    currentValue,
+                    targetValue: currentValue + step,
+                    min,
+                    max,
+                    step,
+                });
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                e.preventDefault();
+                newValue = calculateSliderValue.calculateSliderValue({
+                    currentValue,
+                    targetValue: currentValue - step,
+                    min,
+                    max,
+                    step,
+                });
+                break;
+            case 'Home':
+                e.preventDefault();
+                newValue = min;
+                break;
+            case 'End':
+                e.preventDefault();
+                newValue = max;
+                break;
+            default:
+                return;
+        }
+        let resultValue;
+        if (Array.isArray(value)) {
+            const newStart = handle === 'start' ? newValue : value[0];
+            const newEnd = handle === 'end' ? newValue : value[1];
+            // If handles cross, swap them and switch focus to continue movement
+            if (newStart > newEnd) {
+                resultValue = [newEnd, newStart];
+                const newHandle = handle === 'start' ? 'end' : 'start';
+                setFocusedHandle(newHandle);
+                const targetRef = newHandle === 'start' ? startHandleRef : endHandleRef;
+                (_a = targetRef.current) === null || _a === undefined ? undefined : _a.focus();
+            }
+            else {
+                resultValue = [newStart, newEnd];
+            }
+        }
+        else {
+            resultValue = newValue;
+        }
+        onChange(resultValue);
+    }, [value, min, max, step, disabled, onChange, setFocusedHandle, startHandleRef, endHandleRef]);
+    return {
+        handleKeyDown,
+    };
+};
+
+exports.useSliderKeyboard = useSliderKeyboard;
+//# sourceMappingURL=useSliderKeyboard.cjs.map

package/dist/components/Slider/hooks/useSliderKeyboard.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSliderKeyboard.cjs","sources":["../../../../src/components/Slider/hooks/useSliderKeyboard.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { calculateSliderValue } from '../utils';\nimport { UseSliderKeyboardProps } from './types';\n\n/**\n * Hook that manages keyboard navigation for slider handles.\n * Handles arrow keys, Home, and End keys with proper boundary constraints.\n * Returns a keyboard event handler to attach to slider handles.\n */\nexport const useSliderKeyboard = ({\n  value,\n  min,\n  max,\n  step,\n  disabled,\n  onChange,\n  setFocusedHandle,\n  startHandleRef,\n  endHandleRef,\n}: UseSliderKeyboardProps) => {\n  const handleKeyDown = useCallback(\n    (handle: 'start' | 'end') => (e: React.KeyboardEvent) => {\n      if (disabled) return;\n\n      let currentValue: number;\n      if (Array.isArray(value)) {\n        currentValue = handle === 'start' ? value[0] : value[1];\n      } else {\n        currentValue = value as number;\n      }\n\n      let newValue: number;\n\n      switch (e.key) {\n        case 'ArrowRight':\n        case 'ArrowUp':\n          e.preventDefault();\n          newValue = calculateSliderValue({\n            currentValue,\n            targetValue: currentValue + step,\n            min,\n            max,\n            step,\n          });\n          break;\n        case 'ArrowLeft':\n        case 'ArrowDown':\n          e.preventDefault();\n          newValue = calculateSliderValue({\n            currentValue,\n            targetValue: currentValue - step,\n            min,\n            max,\n            step,\n          });\n          break;\n        case 'Home':\n          e.preventDefault();\n          newValue = min;\n          break;\n        case 'End':\n          e.preventDefault();\n          newValue = max;\n          break;\n        default:\n          return;\n      }\n\n      let resultValue: number | number[];\n\n      if (Array.isArray(value)) {\n        const newStart = handle === 'start' ? newValue : value[0];\n        const newEnd = handle === 'end' ? newValue : value[1];\n\n        // If handles cross, swap them and switch focus to continue movement\n        if (newStart > newEnd) {\n          resultValue = [newEnd, newStart];\n          const newHandle = handle === 'start' ? 'end' : 'start';\n          setFocusedHandle(newHandle);\n          const targetRef = newHandle === 'start' ? startHandleRef : endHandleRef;\n          targetRef.current?.focus();\n        } else {\n          resultValue = [newStart, newEnd];\n        }\n      } else {\n        resultValue = newValue;\n      }\n\n      onChange(resultValue);\n    },\n    [value, min, max, step, disabled, onChange, setFocusedHandle, startHandleRef, endHandleRef],\n  );\n\n  return {\n    handleKeyDown,\n  };\n};\n"],"names":["useCallback","calculateSliderValue"],"mappings":";;;;;AAIA;;;;AAIG;AACU,MAAA,iBAAiB,GAAG,CAAC,EAChC,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,cAAc,EACd,YAAY,GACW,KAAI;AAC3B,IAAA,MAAM,aAAa,GAAGA,iBAAW,CAC/B,CAAC,MAAuB,KAAK,CAAC,CAAsB,KAAI;;AACtD,QAAA,IAAI,QAAQ;YAAE;AAEd,QAAA,IAAI,YAAoB;AACxB,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AACxB,YAAA,YAAY,GAAG,MAAM,KAAK,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC;AACxD;AAAM,aAAA;YACL,YAAY,GAAG,KAAe;AAC/B;AAED,QAAA,IAAI,QAAgB;QAEpB,QAAQ,CAAC,CAAC,GAAG;AACX,YAAA,KAAK,YAAY;AACjB,YAAA,KAAK,SAAS;gBACZ,CAAC,CAAC,cAAc,EAAE;gBAClB,QAAQ,GAAGC,yCAAoB,CAAC;oBAC9B,YAAY;oBACZ,WAAW,EAAE,YAAY,GAAG,IAAI;oBAChC,GAAG;oBACH,GAAG;oBACH,IAAI;AACL,iBAAA,CAAC;gBACF;AACF,YAAA,KAAK,WAAW;AAChB,YAAA,KAAK,WAAW;gBACd,CAAC,CAAC,cAAc,EAAE;gBAClB,QAAQ,GAAGA,yCAAoB,CAAC;oBAC9B,YAAY;oBACZ,WAAW,EAAE,YAAY,GAAG,IAAI;oBAChC,GAAG;oBACH,GAAG;oBACH,IAAI;AACL,iBAAA,CAAC;gBACF;AACF,YAAA,KAAK,MAAM;gBACT,CAAC,CAAC,cAAc,EAAE;gBAClB,QAAQ,GAAG,GAAG;gBACd;AACF,YAAA,KAAK,KAAK;gBACR,CAAC,CAAC,cAAc,EAAE;gBAClB,QAAQ,GAAG,GAAG;gBACd;AACF,YAAA;gBACE;AACH;AAED,QAAA,IAAI,WAA8B;AAElC,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AACxB,YAAA,MAAM,QAAQ,GAAG,MAAM,KAAK,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC;AACzD,YAAA,MAAM,MAAM,GAAG,MAAM,KAAK,KAAK,GAAG,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC;;YAGrD,IAAI,QAAQ,GAAG,MAAM,EAAE;AACrB,gBAAA,WAAW,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC;AAChC,gBAAA,MAAM,SAAS,GAAG,MAAM,KAAK,OAAO,GAAG,KAAK,GAAG,OAAO;gBACtD,gBAAgB,CAAC,SAAS,CAAC;AAC3B,gBAAA,MAAM,SAAS,GAAG,SAAS,KAAK,OAAO,GAAG,cAAc,GAAG,YAAY;AACvE,gBAAA,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,KAAK,EAAE;AAC3B;AAAM,iBAAA;AACL,gBAAA,WAAW,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAC;AACjC;AACF;AAAM,aAAA;YACL,WAAW,GAAG,QAAQ;AACvB;QAED,QAAQ,CAAC,WAAW,CAAC;KACtB,EACD,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,cAAc,EAAE,YAAY,CAAC,CAC5F;IAED,OAAO;QACL,aAAa;KACd;AACH;;;;"}

package/dist/components/Slider/hooks/useSliderKeyboard.d.ts

@@ -0,0 +1,9 @@
+import { UseSliderKeyboardProps } from './types';
+/**
+ * Hook that manages keyboard navigation for slider handles.
+ * Handles arrow keys, Home, and End keys with proper boundary constraints.
+ * Returns a keyboard event handler to attach to slider handles.
+ */
+export declare const useSliderKeyboard: ({ value, min, max, step, disabled, onChange, setFocusedHandle, startHandleRef, endHandleRef, }: UseSliderKeyboardProps) => {
+    handleKeyDown: (handle: 'start' | 'end') => (e: React.KeyboardEvent) => void;
+};