@max-ts/kit 1.8.1 → 1.9.0

package/lib/components/RangeInput/RangeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RangeInput.d.ts","sourceRoot":"","sources":["../../../src/components/RangeInput/RangeInput.tsx"],"names":[],"mappings":"AAaA,MAAM,MAAM,eAAe,GAAG;IAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAChD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;CAChD,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAC1B,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAW,EACX,IAAS,EACT,IAAe,EACf,SAAS,EACT,QAAQ,EACR,WAAW,EACX,WAAW,GACX,EAAE,eAAe,+BAsEjB"}
+{"version":3,"file":"RangeInput.d.ts","sourceRoot":"","sources":["../../../src/components/RangeInput/RangeInput.tsx"],"names":[],"mappings":"AAaA,MAAM,MAAM,eAAe,GAAG;IAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAChD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;CAChD,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAC1B,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAW,EACX,IAAS,EACT,IAAe,EACf,SAAS,EACT,QAAQ,EACR,WAAW,EACX,WAAW,GACX,EAAE,eAAe,+BA0EjB"}

package/lib/components/RangeInput/useLogic/useLogic.d.ts

@@ -1,14 +1,16 @@
-import { type DetailedHTMLProps, type InputHTMLAttributes } from 'react';
+import { type ChangeEvent, type KeyboardEvent } from 'react';
+import type { SliderValue } from '../../Slider';
 import type { RangeInputProps } from '../RangeInput';
 export declare const useLogic: ({ min, max, maxValue, minValue, onChange, }: RangeInputProps) => {
     maxId: string;
     minId: string;
     minVal: number;
     maxVal: number;
-    onValueChange: (newValue: number[]) => void;
-    onMinValueChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onMaxValueChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onKeyDown: (event: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) => void;
-    onConfirm: (value: Array<number>) => void;
+    sliderValue: readonly [number, number];
+    onValueChange: (newValue: SliderValue) => void;
+    onMinValueChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onMaxValueChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onConfirm: (value: SliderValue) => void;
 };
 //# sourceMappingURL=useLogic.d.ts.map

package/lib/components/RangeInput/useLogic/useLogic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLogic.d.ts","sourceRoot":"","sources":["../../../../src/components/RangeInput/useLogic/useLogic.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,EAIxB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,eAAO,MAAM,QAAQ,GAAI,6CAMtB,eAAe;;;;;8BAOgB,MAAM,EAAE;8BASR,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC;8BAOnC,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC;uBAQ5D,iBAAiB,CACvB,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,gBAAgB,CAChB;uBASwB,KAAK,CAAC,MAAM,CAAC;CAmBvC,CAAC"}
+{"version":3,"file":"useLogic.d.ts","sourceRoot":"","sources":["../../../../src/components/RangeInput/useLogic/useLogic.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,WAAW,EAChB,KAAK,aAAa,EAKlB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAwCrD,eAAO,MAAM,QAAQ,GAAI,6CAMtB,eAAe;;;;;;8BAsB4B,WAAW;8BAkB/C,WAAW,CAAC,gBAAgB,CAAC;8BAY7B,WAAW,CAAC,gBAAgB,CAAC;uBAY7B,aAAa,CAAC,gBAAgB,CAAC;uBAW/B,WAAW;CA8BpB,CAAC"}

package/lib/components/Slider/Slider.d.ts

@@ -1,7 +1,8 @@
 import { Slider as SliderPrimitive } from '@base-ui/react/slider';
 import * as React from 'react';
-export type SliderProps = SliderPrimitive.Root.Props<number[]> & {
-    onValueCommit?: (value: number[]) => void;
+export type SliderValue = number | readonly number[];
+export type SliderProps = SliderPrimitive.Root.Props<SliderValue> & {
+    onValueCommit?: (value: SliderValue) => void;
 };
 export declare function Slider({ className, defaultValue, value, min, max, onValueCommit, onValueCommitted, ...props }: SliderProps): React.JSX.Element;
 //# sourceMappingURL=Slider.d.ts.map

package/lib/components/Slider/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAElE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,GAAG;IAChE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACtB,SAAS,EACT,YAAY,EACZ,KAAK,EACL,GAAO,EACP,GAAS,EACT,aAAa,EACb,gBAAgB,EAChB,GAAG,KAAK,EACR,EAAE,WAAW,qBAuDb"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAElE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,MAAM,EAAE,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG;IACnE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CAC7C,CAAC;AA2BF,wBAAgB,MAAM,CAAC,EACtB,SAAS,EACT,YAAY,EACZ,KAAK,EACL,GAAO,EACP,GAAS,EACT,aAAa,EACb,gBAAgB,EAChB,GAAG,KAAK,EACR,EAAE,WAAW,qBAkDb"}

package/lib/components/SliderInput/SliderInput.d.ts

@@ -0,0 +1,14 @@
+export type SliderInputProps = {
+    value?: number | null;
+    min: number;
+    max: number;
+    unit?: string;
+    onChange: (value: number) => void;
+    width?: number | string;
+    size?: 'small' | 'medium' | 'large';
+    className?: string;
+    isActive?: boolean;
+    inputRef?: React.RefObject<HTMLInputElement>;
+};
+export declare function SliderInput({ min, max, onChange, value, width, unit, size, className, isActive, inputRef, }: SliderInputProps): import("react").JSX.Element;
+//# sourceMappingURL=SliderInput.d.ts.map

package/lib/components/SliderInput/SliderInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderInput.d.ts","sourceRoot":"","sources":["../../../src/components/SliderInput/SliderInput.tsx"],"names":[],"mappings":"AAaA,MAAM,MAAM,gBAAgB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;CAC7C,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC3B,GAAG,EACH,GAAG,EACH,QAAQ,EACR,KAAK,EACL,KAAW,EACX,IAAS,EACT,IAAe,EACf,SAAS,EACT,QAAQ,EACR,QAAQ,GACR,EAAE,gBAAgB,+BAuDlB"}

package/lib/components/SliderInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SliderInput';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/SliderInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SliderInput/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/lib/components/SliderInput/styles.css.d.ts

@@ -0,0 +1,7 @@
+export declare const container: string;
+export declare const activeClass: string;
+export declare const sizes: Record<"small" | "medium" | "large", string>;
+export declare const inputClass: string;
+export declare const textClass: string;
+export declare const slider: string;
+//# sourceMappingURL=styles.css.d.ts.map

package/lib/components/SliderInput/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/SliderInput/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,QAgBpB,CAAC;AAEH,eAAO,MAAM,WAAW,QAEtB,CAAC;AAEH,eAAO,MAAM,KAAK,8CAgBhB,CAAC;AAEH,eAAO,MAAM,UAAU,QAgBrB,CAAC;AAEH,eAAO,MAAM,SAAS,QAEpB,CAAC;AAEH,eAAO,MAAM,MAAM,QAOjB,CAAC"}

package/lib/components/SliderInput/useLogic/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useLogic';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/SliderInput/useLogic/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SliderInput/useLogic/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/lib/components/SliderInput/useLogic/useLogic.d.ts

@@ -0,0 +1,12 @@
+import { type ChangeEvent, type KeyboardEvent } from 'react';
+import type { SliderValue } from '../../Slider';
+import type { SliderInputProps } from '../SliderInput';
+export declare const useLogic: ({ min, max, value, onChange }: SliderInputProps) => {
+    inputId: string;
+    inputValue: number;
+    onInputValueChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onValueChange: (newValue: SliderValue) => void;
+    onConfirm: (value: SliderValue) => void;
+};
+//# sourceMappingURL=useLogic.d.ts.map

package/lib/components/SliderInput/useLogic/useLogic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLogic.d.ts","sourceRoot":"","sources":["../../../../src/components/SliderInput/useLogic/useLogic.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,WAAW,EAChB,KAAK,aAAa,EAKlB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAmBvD,eAAO,MAAM,QAAQ,GAAI,+BAA+B,gBAAgB;;;gCAyB9D,WAAW,CAAC,gBAAgB,CAAC;uBAW7B,aAAa,CAAC,gBAAgB,CAAC;8BAtBK,WAAW;uBAiC/C,WAAW;CAwBpB,CAAC"}

package/lib/components/index.d.ts

@@ -47,6 +47,7 @@ export * from './Select';
 export * from './Sheet';
 export * from './Sidebar';
 export * from './Slider';
+export * from './SliderInput';
 export * from './Spinner';
 export * from './Switch';
 export * from './Tabs';

package/lib/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}

package/lib/index.mjs

@@ -4282,11 +4282,26 @@ var styles_css_range = 'style__h9oy583';
 var Slider_styles_css_root = 'style__h9oy580';
 var styles_css_thumb = 'style__h9oy584';
 var track = 'style__h9oy582';
+const getValues = (value, defaultValue, min, max)=>{
+    if ('number' == typeof value) return [
+        value
+    ];
+    if (Array.isArray(value)) return [
+        ...value
+    ];
+    if ('number' == typeof defaultValue) return [
+        defaultValue
+    ];
+    if (Array.isArray(defaultValue)) return [
+        ...defaultValue
+    ];
+    return [
+        min,
+        max
+    ];
+};
 function Slider_Slider({ className, defaultValue, value, min = 0, max = 100, onValueCommit, onValueCommitted, ...props }) {
-    const values = __rspack_external_react.useMemo(()=>Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [
-            min,
-            max
-        ], [
+    const values = __rspack_external_react.useMemo(()=>getValues(value, defaultValue, min, max), [
         value,
         defaultValue,
         min,
@@ -4343,37 +4358,84 @@ var RangeInput_styles_css_sizes = {
 };
 var sliderClass = 'style__1pnwkko7';
 var styles_css_textClass = 'style__1pnwkko5';
+const getNumberFromInputValue = (value)=>{
+    const numberValue = Number(value);
+    return Number.isNaN(numberValue) ? null : numberValue;
+};
+const clamp = (value, min, max)=>Math.min(Math.max(value, min), max);
+const normalizeRange = (minValue, maxValue)=>{
+    if (minValue <= maxValue) return [
+        minValue,
+        maxValue
+    ];
+    return [
+        maxValue,
+        minValue
+    ];
+};
+const getSliderValue = (minValue, maxValue, min, max)=>normalizeRange(clamp(minValue, min, max), clamp(maxValue, min, max));
+const getRangeValue = (value)=>{
+    if (!Array.isArray(value)) return null;
+    const [minValue, maxValue] = value;
+    if (void 0 === minValue || void 0 === maxValue) return null;
+    return [
+        minValue,
+        maxValue
+    ];
+};
 const RangeInput_useLogic_useLogic_useLogic = ({ min, max, maxValue, minValue, onChange })=>{
     const minId = useId();
     const maxId = useId();
-    const [minVal, setMinVal] = useState(min);
-    const [maxVal, setMaxVal] = useState(max);
-    const onValueChange = (newValue)=>{
-        if (newValue[0] === newValue[1]) return void onChange(newValue[0], newValue[1]);
-        setMinVal(newValue[0]);
-        setMaxVal(newValue[1]);
-    };
-    const onMinValueChange = (event)=>{
+    const [minVal, setMinVal] = useState(minValue ?? min);
+    const [maxVal, setMaxVal] = useState(maxValue ?? max);
+    const sliderValue = getSliderValue(minVal, maxVal, min, max);
+    const commit = useCallback((nextMinValue, nextMaxValue)=>{
+        const [normalizedMinValue, normalizedMaxValue] = normalizeRange(clamp(nextMinValue, min, max), clamp(nextMaxValue, min, max));
+        setMinVal(normalizedMinValue);
+        setMaxVal(normalizedMaxValue);
+        onChange(normalizedMinValue, normalizedMaxValue);
+    }, [
+        min,
+        max,
+        onChange
+    ]);
+    const onValueChange = useCallback((newValue)=>{
+        const rangeValue = getRangeValue(newValue);
+        if (null === rangeValue) return;
+        const [newMinValue, newMaxValue] = rangeValue;
+        const [normalizedMinValue, normalizedMaxValue] = normalizeRange(newMinValue, newMaxValue);
+        setMinVal(normalizedMinValue);
+        setMaxVal(normalizedMaxValue);
+    }, []);
+    const onMinValueChange = useCallback((event)=>{
         const { value } = event.target;
-        if (!Number.isNaN(+value)) setMinVal(+value);
-    };
-    const onMaxValueChange = (event)=>{
+        const numberValue = getNumberFromInputValue(value);
+        if (null !== numberValue) setMinVal(numberValue);
+    }, []);
+    const onMaxValueChange = useCallback((event)=>{
         const { value } = event.target;
-        if (!Number.isNaN(value)) setMaxVal(+value);
-    };
-    const onKeyDown = (event)=>{
-        if ('Enter' === event.key) {
-            const minValue = minVal >= min && minVal <= max ? minVal : min;
-            const maxValue = maxVal >= min && maxVal <= max ? maxVal : max;
-            onChange(minValue, maxValue);
-        }
-    };
-    const onConfirm = (value)=>{
-        onChange(value[0], value[1]);
-    };
+        const numberValue = getNumberFromInputValue(value);
+        if (null !== numberValue) setMaxVal(numberValue);
+    }, []);
+    const onKeyDown = useCallback((event)=>{
+        if ('Enter' !== event.key) return;
+        commit(minVal, maxVal);
+    }, [
+        commit,
+        minVal,
+        maxVal
+    ]);
+    const onConfirm = useCallback((value)=>{
+        const rangeValue = getRangeValue(value);
+        if (null === rangeValue) return;
+        const [nextMinValue, nextMaxValue] = rangeValue;
+        commit(nextMinValue, nextMaxValue);
+    }, [
+        commit
+    ]);
     useEffect(()=>{
-        setMinVal(minValue ? minValue : min);
-        setMaxVal(maxValue ? maxValue : max);
+        setMinVal(minValue ?? min);
+        setMaxVal(maxValue ?? max);
     }, [
         minValue,
         maxValue,
@@ -4385,6 +4447,7 @@ const RangeInput_useLogic_useLogic_useLogic = ({ min, max, maxValue, minValue, o
         minId,
         minVal,
         maxVal,
+        sliderValue,
         onValueChange,
         onMinValueChange,
         onMaxValueChange,
@@ -4393,7 +4456,7 @@ const RangeInput_useLogic_useLogic_useLogic = ({ min, max, maxValue, minValue, o
     };
 };
 function RangeInput({ min, max, onChange, minValue, maxValue, width = 150, unit = '', size = 'medium', className, isActive, minInputRef, maxInputRef }) {
-    const { onMinValueChange, onMaxValueChange, minVal, maxVal, onKeyDown, onValueChange, onConfirm, minId, maxId } = RangeInput_useLogic_useLogic_useLogic({
+    const { onMinValueChange, onMaxValueChange, minVal, maxVal, onKeyDown, onValueChange, onConfirm, sliderValue, minId, maxId } = RangeInput_useLogic_useLogic_useLogic({
         min,
         max,
         maxValue,
@@ -4401,6 +4464,7 @@ function RangeInput({ min, max, onChange, minValue, maxValue, width = 150, unit
         onChange
     });
     return /*#__PURE__*/ jsxs("div", {
+        "data-slot": "range-input",
         className: clsx(RangeInput_styles_css_container, RangeInput_styles_css_sizes[size], {
             [activeClass]: isActive
         }, className),
@@ -4415,6 +4479,7 @@ function RangeInput({ min, max, onChange, minValue, maxValue, width = 150, unit
                 children: "от"
             }),
             /*#__PURE__*/ jsx("input", {
+                "data-slot": "range-input-min-field",
                 className: inputClass,
                 type: "text",
                 id: minId,
@@ -4430,6 +4495,7 @@ function RangeInput({ min, max, onChange, minValue, maxValue, width = 150, unit
                 children: "до"
             }),
             /*#__PURE__*/ jsx("input", {
+                "data-slot": "range-input-max-field",
                 className: inputClass,
                 type: "text",
                 id: maxId,
@@ -4445,14 +4511,12 @@ function RangeInput({ min, max, onChange, minValue, maxValue, width = 150, unit
                 children: unit
             }),
             /*#__PURE__*/ jsx("div", {
+                "data-slot": "range-input-slider",
                 className: sliderClass,
                 children: /*#__PURE__*/ jsx(Slider_Slider, {
                     min: min,
                     max: max,
-                    value: [
-                        Number(minVal),
-                        Number(maxVal)
-                    ],
+                    value: sliderValue,
                     onValueChange: onValueChange,
                     onValueCommit: onConfirm
                 })
@@ -5426,6 +5490,118 @@ const Sidebar_Sidebar = Object.assign(SidebarRoot, {
     MenuSubItem: MenuSubItem,
     MenuSubButton: MenuSubButton
 });
+var styles_css_activeClass = 'style__pyzq971';
+var SliderInput_styles_css_container = 'style__pyzq970';
+var styles_css_inputClass = 'style__pyzq975';
+var SliderInput_styles_css_sizes = {
+    small: 'small__pyzq972',
+    medium: 'medium__pyzq973',
+    large: 'large__pyzq974'
+};
+var slider = 'style__pyzq977';
+var SliderInput_styles_css_textClass = 'style__pyzq976';
+const useLogic_getNumberFromInputValue = (value)=>{
+    const numberValue = Number(value);
+    return Number.isNaN(numberValue) ? null : numberValue;
+};
+const useLogic_clamp = (value, min, max)=>Math.min(Math.max(value, min), max);
+const getSingleValue = (value)=>{
+    if (Array.isArray(value)) return value[0] ?? null;
+    return value;
+};
+const SliderInput_useLogic_useLogic_useLogic = ({ min, max, value, onChange })=>{
+    const inputId = useId();
+    const [inputValue, setInputValue] = useState(value ?? min);
+    const commit = useCallback((nextValue)=>{
+        const normalizedValue = useLogic_clamp(nextValue, min, max);
+        setInputValue(normalizedValue);
+        onChange(normalizedValue);
+    }, [
+        min,
+        max,
+        onChange
+    ]);
+    const onValueChange = useCallback((newValue)=>{
+        const nextValue = getSingleValue(newValue);
+        if (null === nextValue) return;
+        setInputValue(nextValue);
+    }, []);
+    const onInputValueChange = useCallback((event)=>{
+        const numberValue = useLogic_getNumberFromInputValue(event.target.value);
+        if (null !== numberValue) setInputValue(numberValue);
+    }, []);
+    const onKeyDown = useCallback((event)=>{
+        if ('Enter' !== event.key) return;
+        commit(inputValue);
+    }, [
+        commit,
+        inputValue
+    ]);
+    const onConfirm = useCallback((value)=>{
+        const nextValue = getSingleValue(value);
+        if (null === nextValue) return;
+        commit(nextValue);
+    }, [
+        commit
+    ]);
+    useEffect(()=>{
+        setInputValue(value ?? min);
+    }, [
+        value,
+        min
+    ]);
+    return {
+        inputId,
+        inputValue,
+        onInputValueChange,
+        onKeyDown,
+        onValueChange,
+        onConfirm
+    };
+};
+function SliderInput({ min, max, onChange, value, width = 150, unit = '', size = 'medium', className, isActive, inputRef }) {
+    const { inputId, inputValue, onInputValueChange, onKeyDown, onValueChange, onConfirm } = SliderInput_useLogic_useLogic_useLogic({
+        min,
+        max,
+        value,
+        onChange
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        "data-slot": "slider-input",
+        className: clsx(SliderInput_styles_css_container, SliderInput_styles_css_sizes[size], {
+            [styles_css_activeClass]: isActive
+        }, className),
+        style: {
+            width
+        },
+        children: [
+            /*#__PURE__*/ jsx("input", {
+                "data-slot": "slider-input-field",
+                className: styles_css_inputClass,
+                type: "text",
+                id: inputId,
+                value: inputValue,
+                onChange: onInputValueChange,
+                onKeyDown: onKeyDown,
+                ref: inputRef
+            }),
+            unit ? /*#__PURE__*/ jsx(Typography, {
+                className: SliderInput_styles_css_textClass,
+                color: "disabled",
+                variant: "caption",
+                children: unit
+            }) : null,
+            /*#__PURE__*/ jsx(Slider_Slider, {
+                min: min,
+                max: max,
+                value: inputValue,
+                onValueChange: onValueChange,
+                onValueCommit: onConfirm,
+                className: slider
+            })
+        ]
+    });
+}
 var Switch_styles_css_root = 'style__gj1ia10';
 var Switch_styles_css_thumb = 'style__gj1ia11';
 function Switch_Switch({ className, size = 'medium', ...props }) {
@@ -5524,4 +5700,4 @@ const ToggleGroup = ({ value, onChange, options, size, className, label, multipl
         ]
     });
 };
-export { Accordion_Accordion as Accordion, AlertDialog_AlertDialog as AlertDialog, Autocomplete, Avatar_Avatar as Avatar, Badge_Badge as Badge, Breadcrumb, ButtonGroup, Button_Button as Button, Button_buttonSizes as buttonSizes, Button_buttonVariants as buttonVariants, Calendar, Card, Carousel, Checkbox_Checkbox as Checkbox, CircularProgress, Collapsible_Collapsible as Collapsible, Combobox_Combobox as Combobox, ConfirmAction, ContentState, CopyTypography, DEFAULT_SEPARATOR, DEFAULT_SYMBOL, DESCRIPTION_ROOT_CLASSNAME, DashboardLayout, DataGrid, DataGridActionCell, DataGridSortHeader, DataList, DatePicker, Description_Description as Description, Dialog_Dialog as Dialog, Drawer_Drawer as Drawer, DropdownMenu, Empty_Empty as Empty, ImageCarousel, Image_Image as Image, InputGroup, InputOTP, Input_Input as Input, Label, MaskField, NOTIFICATION_POSITIONS, NOTIFY_CLASSNAME, Notification, NotificationContainer, OverflowTypography, PageLayout, Pagination, PeriodPicker, Placeholder, Popover_Popover as Popover, RadioGroupItem, RadioGroup_RadioGroup as RadioGroup, RangeInput, ScrollTopButton, Select_Select as Select, Sheet, Sidebar_Sidebar as Sidebar, Slider_Slider as Slider, Spinner, Switch_Switch as Switch, Tabs_Tabs as Tabs, TextField, Textarea_Textarea as Textarea, ToggleGroup, Tooltip_Tooltip as Tooltip, Typography, alignments, badgeVariants, calculateSize, constants_NotificationVariantTypes as NotificationVariantTypes, createHandle, displays, negativeSpacing, notification, spacing, styles_css_colors as colors, styles_css_variants as variants, theme, transforms, useComboboxAnchor, useDashboard, useIsMobile, useOverflowed, useSidebar, weights };
+export { Accordion_Accordion as Accordion, AlertDialog_AlertDialog as AlertDialog, Autocomplete, Avatar_Avatar as Avatar, Badge_Badge as Badge, Breadcrumb, ButtonGroup, Button_Button as Button, Button_buttonSizes as buttonSizes, Button_buttonVariants as buttonVariants, Calendar, Card, Carousel, Checkbox_Checkbox as Checkbox, CircularProgress, Collapsible_Collapsible as Collapsible, Combobox_Combobox as Combobox, ConfirmAction, ContentState, CopyTypography, DEFAULT_SEPARATOR, DEFAULT_SYMBOL, DESCRIPTION_ROOT_CLASSNAME, DashboardLayout, DataGrid, DataGridActionCell, DataGridSortHeader, DataList, DatePicker, Description_Description as Description, Dialog_Dialog as Dialog, Drawer_Drawer as Drawer, DropdownMenu, Empty_Empty as Empty, ImageCarousel, Image_Image as Image, InputGroup, InputOTP, Input_Input as Input, Label, MaskField, NOTIFICATION_POSITIONS, NOTIFY_CLASSNAME, Notification, NotificationContainer, OverflowTypography, PageLayout, Pagination, PeriodPicker, Placeholder, Popover_Popover as Popover, RadioGroupItem, RadioGroup_RadioGroup as RadioGroup, RangeInput, ScrollTopButton, Select_Select as Select, Sheet, Sidebar_Sidebar as Sidebar, SliderInput, Slider_Slider as Slider, Spinner, Switch_Switch as Switch, Tabs_Tabs as Tabs, TextField, Textarea_Textarea as Textarea, ToggleGroup, Tooltip_Tooltip as Tooltip, Typography, alignments, badgeVariants, calculateSize, constants_NotificationVariantTypes as NotificationVariantTypes, createHandle, displays, negativeSpacing, notification, spacing, styles_css_colors as colors, styles_css_variants as variants, theme, transforms, useComboboxAnchor, useDashboard, useIsMobile, useOverflowed, useSidebar, weights };

package/lib/stories/SliderInput.stories.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { Meta } from 'storybook-react-rsbuild';
+import { SliderInput } from '../components/index.ts';
+declare const _default: Meta<typeof SliderInput>;
+export default _default;
+export declare function Demo(): React.JSX.Element;
+export declare function Active(): React.JSX.Element;
+//# sourceMappingURL=SliderInput.stories.d.ts.map

package/lib/stories/SliderInput.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderInput.stories.d.ts","sourceRoot":"","sources":["../../src/stories/SliderInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;wBAStC,IAAI,CAAC,OAAO,WAAW,CAAC;AAP7B,wBAO8B;AAE9B,wBAAgB,IAAI,sBAkCnB;AAED,wBAAgB,MAAM,sBAcrB"}

package/lib/styles.css

@@ -4254,6 +4254,10 @@ a.outline__1af895x4:hover {
   transform: translateX(-50%);
 }
 
+.style__1pnwkko7 [data-slot="slider-track"] {
+  height: 1px;
+}
+
 @media (width <= 600px) {
   .style__1pnwkko0 {
     width: 100%;
@@ -5542,6 +5546,79 @@ a.outline__1af895x4:hover {
   }
 }
 
+.style__pyzq970 {
+  align-items: center;
+  column-gap: var(--spacing-1);
+  background: var(--colors-background-paper);
+  border: 1px solid var(--colors-border);
+  border-radius: var(--borderRadius-md);
+  grid-template-columns: 1fr auto;
+  transition: border .2s;
+  display: grid;
+  position: relative;
+}
+
+.style__pyzq971 {
+  border-color: var(--colors-primary);
+}
+
+.small__pyzq972 {
+  height: 28px;
+  font-size: var(--fontSize-sm);
+  padding-inline: var(--spacing-2);
+}
+
+.medium__pyzq973 {
+  height: 32px;
+  font-size: var(--fontSize-base);
+  padding-inline: var(--spacing-2);
+}
+
+.large__pyzq974 {
+  height: 36px;
+  padding-inline: var(--spacing-3);
+  font-size: var(--fontSize-base);
+}
+
+.style__pyzq975 {
+  text-align: center;
+  width: 100%;
+  min-width: 24px;
+  font-size: inherit;
+  text-wrap: nowrap;
+  text-overflow: ellipsis;
+  border: none;
+  outline: none;
+  overflow: hidden;
+}
+
+.style__pyzq975:focus {
+  border: none;
+}
+
+.style__pyzq976 {
+  font-size: inherit;
+}
+
+.style__pyzq977 {
+  padding-inline: var(--spacing-2);
+  border-radius: 9999px;
+  position: absolute;
+  bottom: -1px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.style__pyzq977 [data-slot="slider-track"] {
+  height: 1px;
+}
+
+@media (width <= 600px) {
+  .style__pyzq970 {
+    width: 100%;
+  }
+}
+
 .style__gj1ia10 {
   cursor: pointer;
   border: 1px solid #0000;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@max-ts/kit",
-  "version": "1.8.1",
+  "version": "1.9.0",
   "main": "./lib/index.js",
   "module": "./lib/index.mjs",
   "types": "./lib/index.d.ts",