@cube-dev/ui-kit 0.181.0 → 0.183.0

package/dist/components/fields/Slider/RangeSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.js","names":["SliderBase"],"sources":["../../../../src/components/fields/Slider/RangeSlider.tsx"],"sourcesContent":["import { forwardRef, useRef } from 'react';\n\nimport { Gradation } from './Gradation';\nimport { SliderBase, SliderBaseChildArguments } from './SliderBase';\nimport { SliderThumb } from './SliderThumb';\nimport { SliderTrack } from './SliderTrack';\n\nimport type { FocusableRef } from '@react-types/shared';\nimport type { RangeValue } from '../../../shared';\nimport type { CubeSliderBaseProps } from './types';\n\nexport interface CubeRangeSliderProps\n  extends CubeSliderBaseProps<RangeValue<number>> {\n  gradation?: string[];\n}\n\nconst INTL_MESSAGES = {\n  minimum: 'Minimum',\n  maximum: 'Maximum',\n};\n\nfunction RangeSlider(\n  props: CubeRangeSliderProps,\n  ref: FocusableRef<HTMLDivElement>,\n) {\n  let { isDisabled, styles, gradation, ...otherProps } = props;\n\n  // Create separate refs for each thumb to enable proper focus management\n  const minThumbInputRef = useRef<HTMLInputElement>(null);\n  const maxThumbInputRef = useRef<HTMLInputElement>(null);\n\n  return (\n    <SliderBase ref={ref} {...(otherProps as CubeSliderBaseProps<number[]>)}>\n      {({\n        trackRef,\n        inputRef,\n        state,\n        isInvalid,\n        isValid,\n      }: SliderBaseChildArguments) => {\n        return (\n          <>\n            <Gradation state={state} ranges={[0, 1]} values={gradation} />\n            <SliderTrack\n              state={state}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              isValid={isValid}\n              orientation={props.orientation}\n            />\n            <SliderThumb\n              index={0}\n              aria-label={INTL_MESSAGES['minimum']}\n              state={state}\n              inputRef={minThumbInputRef}\n              trackRef={trackRef}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              isValid={isValid}\n            />\n            <SliderThumb\n              index={1}\n              aria-label={INTL_MESSAGES['maximum']}\n              state={state}\n              inputRef={maxThumbInputRef}\n              trackRef={trackRef}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              isValid={isValid}\n            />\n          </>\n        );\n      }}\n    </SliderBase>\n  );\n}\n\nconst _RangeSlider = forwardRef(RangeSlider);\n\nconst __RangeSlider = Object.assign(_RangeSlider as typeof _RangeSlider, {\n  cubeInputType: 'Number',\n  displayName: 'RangeSlider',\n});\n\nexport { __RangeSlider as RangeSlider };\n"],"mappings":";;;;;;;;;AAgBA,MAAM,gBAAgB;CACpB,SAAS;CACT,SAAS;CACV;AAED,SAAS,YACP,OACA,KACA;CACA,IAAI,EAAE,YAAY,QAAQ,WAAW,GAAG,eAAe;CAGvD,MAAM,mBAAmB,OAAyB,KAAK;CACvD,MAAM,mBAAmB,OAAyB,KAAK;AAEvD,QACE,oBAACA;EAAgB;EAAK,GAAK;aACvB,EACA,UACA,UACA,OACA,WACA,cAC8B;AAC9B,UACE;IACE,oBAAC;KAAiB;KAAO,QAAQ,CAAC,GAAG,EAAE;KAAE,QAAQ;MAAa;IAC9D,oBAAC;KACQ;KACK;KACD;KACF;KACT,aAAa,MAAM;MACnB;IACF,oBAAC;KACC,OAAO;KACP,cAAY,cAAc;KACnB;KACP,UAAU;KACA;KACE;KACD;KACF;MACT;IACF,oBAAC;KACC,OAAO;KACP,cAAY,cAAc;KACnB;KACP,UAAU;KACA;KACE;KACD;KACF;MACT;OACD;;GAGI;;AAIjB,MAAM,eAAe,WAAW,YAAY;AAE5C,MAAM,gBAAgB,OAAO,OAAO,cAAqC;CACvE,eAAe;CACf,aAAa;CACd,CAAC"}
+{"version":3,"file":"RangeSlider.js","names":["forwardRef","useRef","Gradation","SliderBase","SliderBaseChildArguments","SliderThumb","SliderTrack","FocusableRef","RangeValue","CubeSliderBaseProps","CubeRangeSliderProps","gradation","INTL_MESSAGES","minimum","maximum","RangeSlider","props","ref","$","_c","isDisabled","otherProps","t0","styles","t1","t2","minThumbInputRef","maxThumbInputRef","orientation","trackRef","state","isInvalid","isValid","_RangeSlider","__RangeSlider","Object","assign","cubeInputType","displayName"],"sources":["../../../../src/components/fields/Slider/RangeSlider.tsx"],"sourcesContent":["import { forwardRef, useRef } from 'react';\n\nimport { Gradation } from './Gradation';\nimport { SliderBase, SliderBaseChildArguments } from './SliderBase';\nimport { SliderThumb } from './SliderThumb';\nimport { SliderTrack } from './SliderTrack';\n\nimport type { FocusableRef } from '@react-types/shared';\nimport type { RangeValue } from '../../../shared';\nimport type { CubeSliderBaseProps } from './types';\n\nexport interface CubeRangeSliderProps\n  extends CubeSliderBaseProps<RangeValue<number>> {\n  gradation?: string[];\n}\n\nconst INTL_MESSAGES = {\n  minimum: 'Minimum',\n  maximum: 'Maximum',\n};\n\nfunction RangeSlider(\n  props: CubeRangeSliderProps,\n  ref: FocusableRef<HTMLDivElement>,\n) {\n  let { isDisabled, styles, gradation, ...otherProps } = props;\n\n  // Create separate refs for each thumb to enable proper focus management\n  const minThumbInputRef = useRef<HTMLInputElement>(null);\n  const maxThumbInputRef = useRef<HTMLInputElement>(null);\n\n  return (\n    <SliderBase ref={ref} {...(otherProps as CubeSliderBaseProps<number[]>)}>\n      {({\n        trackRef,\n        inputRef,\n        state,\n        isInvalid,\n        isValid,\n      }: SliderBaseChildArguments) => {\n        return (\n          <>\n            <Gradation state={state} ranges={[0, 1]} values={gradation} />\n            <SliderTrack\n              state={state}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              isValid={isValid}\n              orientation={props.orientation}\n            />\n            <SliderThumb\n              index={0}\n              aria-label={INTL_MESSAGES['minimum']}\n              state={state}\n              inputRef={minThumbInputRef}\n              trackRef={trackRef}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              isValid={isValid}\n            />\n            <SliderThumb\n              index={1}\n              aria-label={INTL_MESSAGES['maximum']}\n              state={state}\n              inputRef={maxThumbInputRef}\n              trackRef={trackRef}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              isValid={isValid}\n            />\n          </>\n        );\n      }}\n    </SliderBase>\n  );\n}\n\nconst _RangeSlider = forwardRef(RangeSlider);\n\nconst __RangeSlider = Object.assign(_RangeSlider as typeof _RangeSlider, {\n  cubeInputType: 'Number',\n  displayName: 'RangeSlider',\n});\n\nexport { __RangeSlider as RangeSlider };\n"],"mappings":";;;;;;;;;;AAgBA,MAAMY,gBAAgB;CACpBC,SAAS;CACTC,SAAS;CACV;AAED,SAAAC,YAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAA,IAAAR;CAAA,IAAAS;CAAA,IAAAC;AAAA,KAAAH,EAAA,OAAAF,OAAA;EAIE,MAAA,EAAAI,YAAAE,IAAAC,QAAAZ,WAAAa,IAAA,GAAAC,OAAuDT;AAAvDI,eAAAE;AAAAX,cAAAa;AAAAH,eAAAI;AAA6DP,IAAA,KAAAF;AAAAE,IAAA,KAAAP;AAAAO,IAAA,KAAAE;AAAAF,IAAA,KAAAG;QAAA;AAAAV,cAAAO,EAAA;AAAAE,eAAAF,EAAA;AAAAG,eAAAH,EAAA;;CAG7D,MAAAQ,mBAAyBzB,OAAyB,KAAK;CACvD,MAAA0B,mBAAyB1B,OAAyB,KAAK;CAG1B,MAAAqB,KAAAD;CAA2C,IAAAG;AAAA,KAAAN,EAAA,OAAAP,aAAAO,EAAA,OAAAE,cAAAF,EAAA,OAAAF,MAAAY,aAAA;AACnEJ,QAAAC,OAAA;GAAC,MAAA,EAAAI,UAAAC,OAAAC,WAAAC,YAAAP;AAMyB,UAEvB;IACE,oBAAC;KAAiBK;KAAe,QAAA,CAAC,GAAG,EAAC;KAAWnB,QAAAA;MACjD;wBAAC;KACQmB;KACKV;KACDW;KACFC;KACI,aAAAhB,MAAKY;MAEpB;wBAAC;KACQ,OAAA;KACK,cAAAhB,cAAaC;KAClBiB;KACGJ,UAAAA;KACAG;KACET;KACDW;KACFC;MAEX;wBAAC;KACQ,OAAA;KACK,cAAApB,cAAaE;KAClBgB;KACGH,UAAAA;KACAE;KACET;KACDW;KACFC;MACT;OACD;;AAENd,IAAA,KAAAP;AAAAO,IAAA,KAAAE;AAAAF,IAAA,KAAAF,MAAAY;AAAAV,IAAA,KAAAM;OAAAA,MAAAN,EAAA;CAAA,IAAAO;AAAA,KAAAP,EAAA,OAAAD,OAAAC,EAAA,OAAAI,MAAAJ,EAAA,QAAAM,IAAA;AAxCHC,OAAA,oBAAC;GAAgBR;GAAG,GAAOK;aACxBE;IAwCU;AAAAN,IAAA,KAAAD;AAAAC,IAAA,KAAAI;AAAAJ,IAAA,MAAAM;AAAAN,IAAA,MAAAO;OAAAA,MAAAP,EAAA;AAAA,QAzCbO;;AA6CJ,MAAMQ,eAAejC,WAAWe,YAAY;AAE5C,MAAMmB,gBAAgBC,OAAOC,OAAOH,cAAqC;CACvEI,eAAe;CACfC,aAAa;CACd,CAAC"}

package/dist/components/fields/Slider/Slider.js

@@ -1,36 +1,96 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { Gradation } from "./Gradation.js";
 import { _SliderBase } from "./SliderBase.js";
 import { SliderThumb } from "./SliderThumb.js";
 import { SliderTrack } from "./SliderTrack.js";
+import { c } from "react-compiler-runtime";
 import { OUTER_STYLES } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/fields/Slider/Slider.tsx
 function Slider(props, ref) {
-	const { onChange, onChangeEnd, value, defaultValue, getValueLabel, isDisabled, styles, gradation, orientation, trackStyles, thumbStyles, thumbTokens, ...otherProps } = props;
-	let baseProps = {
-		...otherProps,
-		value: value != null ? [value] : void 0,
-		defaultValue: defaultValue != null ? [defaultValue] : void 0,
-		onChange: (v) => {
-			onChange?.(v[0]);
-		},
-		onChangeEnd: (v) => {
-			onChangeEnd?.(v[0]);
-		},
-		getValueLabel: getValueLabel ? ([v]) => getValueLabel(v) : void 0
-	};
-	const extractedStyles = extractStyles(otherProps, OUTER_STYLES, styles);
-	return /* @__PURE__ */ jsx(_SliderBase, {
-		...mergeProps(otherProps, baseProps),
-		ref,
-		orientation,
-		styles: extractedStyles,
-		children: ({ trackRef, inputRef, state, isInvalid, isValid }) => {
+	const $ = c(30);
+	let T0;
+	let extractedStyles;
+	let gradation;
+	let isDisabled;
+	let orientation;
+	let t0;
+	let thumbStyles;
+	let thumbTokens;
+	let trackStyles;
+	if ($[0] !== props) {
+		const { onChange, onChangeEnd, value, defaultValue, getValueLabel, isDisabled: t1, styles, gradation: t2, orientation: t3, trackStyles: t4, thumbStyles: t5, thumbTokens: t6, ...otherProps } = props;
+		isDisabled = t1;
+		gradation = t2;
+		orientation = t3;
+		trackStyles = t4;
+		thumbStyles = t5;
+		thumbTokens = t6;
+		let t7;
+		if ($[10] !== onChange) {
+			t7 = (v) => {
+				onChange?.(v[0]);
+			};
+			$[10] = onChange;
+			$[11] = t7;
+		} else t7 = $[11];
+		let t8;
+		if ($[12] !== onChangeEnd) {
+			t8 = (v_0) => {
+				onChangeEnd?.(v_0[0]);
+			};
+			$[12] = onChangeEnd;
+			$[13] = t8;
+		} else t8 = $[13];
+		let t9;
+		if ($[14] !== getValueLabel) {
+			t9 = getValueLabel ? (t10) => {
+				const [v_1] = t10;
+				return getValueLabel(v_1);
+			} : void 0;
+			$[14] = getValueLabel;
+			$[15] = t9;
+		} else t9 = $[15];
+		const baseProps = {
+			...otherProps,
+			value: value != null ? [value] : void 0,
+			defaultValue: defaultValue != null ? [defaultValue] : void 0,
+			onChange: t7,
+			onChangeEnd: t8,
+			getValueLabel: t9
+		};
+		extractedStyles = extractStyles(otherProps, OUTER_STYLES, styles);
+		T0 = _SliderBase;
+		t0 = mergeProps(otherProps, baseProps);
+		$[0] = props;
+		$[1] = T0;
+		$[2] = extractedStyles;
+		$[3] = gradation;
+		$[4] = isDisabled;
+		$[5] = orientation;
+		$[6] = t0;
+		$[7] = thumbStyles;
+		$[8] = thumbTokens;
+		$[9] = trackStyles;
+	} else {
+		T0 = $[1];
+		extractedStyles = $[2];
+		gradation = $[3];
+		isDisabled = $[4];
+		orientation = $[5];
+		t0 = $[6];
+		thumbStyles = $[7];
+		thumbTokens = $[8];
+		trackStyles = $[9];
+	}
+	let t1;
+	if ($[16] !== gradation || $[17] !== isDisabled || $[18] !== orientation || $[19] !== thumbStyles || $[20] !== thumbTokens || $[21] !== trackStyles) {
+		t1 = (t2) => {
+			const { trackRef, inputRef, state, isInvalid, isValid } = t2;
 			return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx(Gradation, {
 					state,
@@ -57,8 +117,33 @@ function Slider(props, ref) {
 					tokens: thumbTokens
 				})
 			] });
-		}
-	});
+		};
+		$[16] = gradation;
+		$[17] = isDisabled;
+		$[18] = orientation;
+		$[19] = thumbStyles;
+		$[20] = thumbTokens;
+		$[21] = trackStyles;
+		$[22] = t1;
+	} else t1 = $[22];
+	let t2;
+	if ($[23] !== T0 || $[24] !== extractedStyles || $[25] !== orientation || $[26] !== ref || $[27] !== t0 || $[28] !== t1) {
+		t2 = /* @__PURE__ */ jsx(T0, {
+			...t0,
+			ref,
+			orientation,
+			styles: extractedStyles,
+			children: t1
+		});
+		$[23] = T0;
+		$[24] = extractedStyles;
+		$[25] = orientation;
+		$[26] = ref;
+		$[27] = t0;
+		$[28] = t1;
+		$[29] = t2;
+	} else t2 = $[29];
+	return t2;
 }
 const _Slider = forwardRef(Slider);
 const __Slider = Object.assign(_Slider, {

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["SliderBase"],"sources":["../../../../src/components/fields/Slider/Slider.tsx"],"sourcesContent":["import { OUTER_STYLES, Styles, Tokens } from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { mergeProps } from '../../../utils/react/index';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { Gradation } from './Gradation';\nimport {\n  SliderBase,\n  SliderBaseChildArguments,\n  SliderBaseProps,\n} from './SliderBase';\nimport { SliderThumb } from './SliderThumb';\nimport { SliderTrack } from './SliderTrack';\n\nimport type { FocusableRef } from '@react-types/shared';\nimport type { CubeSliderBaseProps } from './types';\n\nexport interface CubeSliderProps extends CubeSliderBaseProps<number> {\n  gradation?: string[];\n  /** Custom styles for the track element */\n  trackStyles?: Styles;\n  /** Custom styles for the thumb element */\n  thumbStyles?: Styles;\n  /** Custom tokens for the thumb element (e.g., #slider-thumb for fill color) */\n  thumbTokens?: Tokens;\n}\n\nfunction Slider(props: CubeSliderProps, ref: FocusableRef<HTMLDivElement>) {\n  const {\n    onChange,\n    onChangeEnd,\n    value,\n    defaultValue,\n    getValueLabel,\n    isDisabled,\n    styles,\n    gradation,\n    orientation,\n    trackStyles,\n    thumbStyles,\n    thumbTokens,\n    ...otherProps\n  } = props;\n\n  let baseProps: Omit<SliderBaseProps, 'children'> = {\n    ...otherProps,\n    // Normalize `value: number[]` to `value: number`\n    value: value != null ? [value] : undefined,\n    defaultValue: defaultValue != null ? [defaultValue] : undefined,\n    onChange: (v: number[]): void => {\n      onChange?.(v[0]);\n    },\n    onChangeEnd: (v: number[]): void => {\n      onChangeEnd?.(v[0]);\n    },\n    getValueLabel: getValueLabel ? ([v]) => getValueLabel(v) : undefined,\n  };\n\n  const extractedStyles = extractStyles(otherProps, OUTER_STYLES, styles);\n\n  return (\n    <SliderBase\n      {...mergeProps(otherProps, baseProps)}\n      ref={ref}\n      orientation={orientation}\n      styles={extractedStyles}\n    >\n      {({\n        trackRef,\n        inputRef,\n        state,\n        isInvalid,\n        isValid,\n      }: SliderBaseChildArguments) => {\n        return (\n          <>\n            <Gradation state={state} ranges={[0, 1]} values={gradation} />\n            <SliderTrack\n              state={state}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              isValid={isValid}\n              orientation={orientation}\n              styles={trackStyles}\n            />\n            <SliderThumb\n              index={0}\n              state={state}\n              inputRef={inputRef}\n              trackRef={trackRef}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              isValid={isValid}\n              styles={thumbStyles}\n              tokens={thumbTokens}\n            />\n          </>\n        );\n      }}\n    </SliderBase>\n  );\n}\n\nconst _Slider = forwardRef(Slider);\n\nconst __Slider = Object.assign(_Slider as typeof _Slider, {\n  cubeInputType: 'Number',\n  displayName: 'Slider',\n});\n\nexport { __Slider as Slider };\n"],"mappings":";;;;;;;;;;;;AA4BA,SAAS,OAAO,OAAwB,KAAmC;CACzE,MAAM,EACJ,UACA,aACA,OACA,cACA,eACA,YACA,QACA,WACA,aACA,aACA,aACA,aACA,GAAG,eACD;CAEJ,IAAI,YAA+C;EACjD,GAAG;EAEH,OAAO,SAAS,OAAO,CAAC,MAAM,GAAG;EACjC,cAAc,gBAAgB,OAAO,CAAC,aAAa,GAAG;EACtD,WAAW,MAAsB;AAC/B,cAAW,EAAE,GAAG;;EAElB,cAAc,MAAsB;AAClC,iBAAc,EAAE,GAAG;;EAErB,eAAe,iBAAiB,CAAC,OAAO,cAAc,EAAE,GAAG;EAC5D;CAED,MAAM,kBAAkB,cAAc,YAAY,cAAc,OAAO;AAEvE,QACE,oBAACA;EACC,GAAI,WAAW,YAAY,UAAU;EAChC;EACQ;EACb,QAAQ;aAEN,EACA,UACA,UACA,OACA,WACA,cAC8B;AAC9B,UACE;IACE,oBAAC;KAAiB;KAAO,QAAQ,CAAC,GAAG,EAAE;KAAE,QAAQ;MAAa;IAC9D,oBAAC;KACQ;KACK;KACD;KACF;KACI;KACb,QAAQ;MACR;IACF,oBAAC;KACC,OAAO;KACA;KACG;KACA;KACE;KACD;KACF;KACT,QAAQ;KACR,QAAQ;MACR;OACD;;GAGI;;AAIjB,MAAM,UAAU,WAAW,OAAO;AAElC,MAAM,WAAW,OAAO,OAAO,SAA2B;CACxD,eAAe;CACf,aAAa;CACd,CAAC"}
+{"version":3,"file":"Slider.js","names":["OUTER_STYLES","Styles","Tokens","forwardRef","mergeProps","extractStyles","Gradation","SliderBase","SliderBaseChildArguments","SliderBaseProps","SliderThumb","SliderTrack","FocusableRef","CubeSliderBaseProps","CubeSliderProps","gradation","trackStyles","thumbStyles","thumbTokens","Slider","props","ref","$","_c","T0","extractedStyles","isDisabled","orientation","t0","onChange","onChangeEnd","value","defaultValue","getValueLabel","t1","styles","t2","t3","t4","t5","t6","otherProps","t7","v","t8","v_0","t9","t10","v_1","undefined","baseProps","trackRef","inputRef","state","isInvalid","isValid","_Slider","__Slider","Object","assign","cubeInputType","displayName"],"sources":["../../../../src/components/fields/Slider/Slider.tsx"],"sourcesContent":["import { OUTER_STYLES, Styles, Tokens } from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { mergeProps } from '../../../utils/react/index';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { Gradation } from './Gradation';\nimport {\n  SliderBase,\n  SliderBaseChildArguments,\n  SliderBaseProps,\n} from './SliderBase';\nimport { SliderThumb } from './SliderThumb';\nimport { SliderTrack } from './SliderTrack';\n\nimport type { FocusableRef } from '@react-types/shared';\nimport type { CubeSliderBaseProps } from './types';\n\nexport interface CubeSliderProps extends CubeSliderBaseProps<number> {\n  gradation?: string[];\n  /** Custom styles for the track element */\n  trackStyles?: Styles;\n  /** Custom styles for the thumb element */\n  thumbStyles?: Styles;\n  /** Custom tokens for the thumb element (e.g., #slider-thumb for fill color) */\n  thumbTokens?: Tokens;\n}\n\nfunction Slider(props: CubeSliderProps, ref: FocusableRef<HTMLDivElement>) {\n  const {\n    onChange,\n    onChangeEnd,\n    value,\n    defaultValue,\n    getValueLabel,\n    isDisabled,\n    styles,\n    gradation,\n    orientation,\n    trackStyles,\n    thumbStyles,\n    thumbTokens,\n    ...otherProps\n  } = props;\n\n  let baseProps: Omit<SliderBaseProps, 'children'> = {\n    ...otherProps,\n    // Normalize `value: number[]` to `value: number`\n    value: value != null ? [value] : undefined,\n    defaultValue: defaultValue != null ? [defaultValue] : undefined,\n    onChange: (v: number[]): void => {\n      onChange?.(v[0]);\n    },\n    onChangeEnd: (v: number[]): void => {\n      onChangeEnd?.(v[0]);\n    },\n    getValueLabel: getValueLabel ? ([v]) => getValueLabel(v) : undefined,\n  };\n\n  const extractedStyles = extractStyles(otherProps, OUTER_STYLES, styles);\n\n  return (\n    <SliderBase\n      {...mergeProps(otherProps, baseProps)}\n      ref={ref}\n      orientation={orientation}\n      styles={extractedStyles}\n    >\n      {({\n        trackRef,\n        inputRef,\n        state,\n        isInvalid,\n        isValid,\n      }: SliderBaseChildArguments) => {\n        return (\n          <>\n            <Gradation state={state} ranges={[0, 1]} values={gradation} />\n            <SliderTrack\n              state={state}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              isValid={isValid}\n              orientation={orientation}\n              styles={trackStyles}\n            />\n            <SliderThumb\n              index={0}\n              state={state}\n              inputRef={inputRef}\n              trackRef={trackRef}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              isValid={isValid}\n              styles={thumbStyles}\n              tokens={thumbTokens}\n            />\n          </>\n        );\n      }}\n    </SliderBase>\n  );\n}\n\nconst _Slider = forwardRef(Slider);\n\nconst __Slider = Object.assign(_Slider as typeof _Slider, {\n  cubeInputType: 'Number',\n  displayName: 'Slider',\n});\n\nexport { __Slider as Slider };\n"],"mappings":"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"}

package/dist/components/fields/Slider/SliderBase.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { forwardRefWithGenerics } from "../../../utils/react/forwardRefWithGenerics.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
@@ -27,7 +27,7 @@ function SliderBase(allProps, ref) {
 			onChange
 		})
 	});
-	let { labelPosition, label, extra, styles, isRequired, message, description, requiredMark, labelSuffix, labelStyles, necessityIndicator, gradation, isDisabled, isInvalid, isValid, inputStyles, minValue = 0, maxValue = 100, inputWidth, formatOptions, getValueLabel, onChange, onChangeEnd, children, showValueLabel = true, orientation: formOrientation, form, labelProps: userLabelProps, ...otherProps } = props;
+	let { labelPosition, label, extra, styles, isRequired, message, description, requiredMark, labelSuffix, labelStyles, necessityIndicator, gradation, isDisabled, isInvalid, isValid, inputStyles, minValue = 0, maxValue = 100, inputWidth, formatOptions, getValueLabel, onChange: onChange_0, onChangeEnd, children, showValueLabel = true, orientation: formOrientation, form, labelProps: userLabelProps, ...otherProps } = props;
 	let orientation = allProps.orientation || "horizontal";
 	if (Math.abs(Math.sign(minValue) - Math.sign(maxValue)) === 2) if (formatOptions != null) {
 		if (!("signDisplay" in formatOptions)) formatOptions = {

package/dist/components/fields/Slider/SliderBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderBase.js","names":["Text","mergeProps"],"sources":["../../../../src/components/fields/Slider/SliderBase.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport { DOMRef, FocusableRef } from '@react-types/shared';\nimport { OUTER_STYLES, tasty } from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  RefObject,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useNumberFormatter, useSlider } from 'react-aria';\nimport { useSliderState } from 'react-stately';\n\nimport { forwardRefWithGenerics, mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { Text } from '../../content/Text';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\n\nimport { SliderControlsElement, SliderElement } from './elements';\n\nimport type { SliderState } from 'react-stately';\nimport type { CubeSliderBaseProps } from './types';\n\nexport interface SliderBaseChildArguments {\n  inputRef: RefObject<HTMLInputElement | null>;\n  trackRef: RefObject<HTMLElement | null>;\n  state: SliderState;\n  /** Resolved validation state. It is only known here, after `useFieldProps` merged the form state in. */\n  isInvalid?: boolean;\n  isValid?: boolean;\n}\n\nexport interface SliderBaseProps<T = number[]> extends CubeSliderBaseProps<T> {\n  children: (opts: SliderBaseChildArguments) => ReactNode;\n}\n\nconst LabelValueElement = tasty(Text, {\n  styles: {\n    display: 'block',\n    textAlign: 'right',\n  },\n});\n\nfunction SliderBase(allProps: SliderBaseProps, ref: DOMRef<HTMLDivElement>) {\n  let props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value != null ? value : undefined,\n      onChange: onChange,\n    }),\n  });\n\n  let {\n    labelPosition,\n    label,\n    extra,\n    styles,\n    isRequired,\n    message,\n    description,\n    requiredMark,\n    labelSuffix,\n    labelStyles,\n    necessityIndicator,\n    gradation,\n    isDisabled,\n    isInvalid,\n    isValid,\n    inputStyles,\n    minValue = 0,\n    maxValue = 100,\n    inputWidth,\n    formatOptions,\n    getValueLabel,\n    onChange,\n    onChangeEnd,\n    children,\n    showValueLabel = true,\n    orientation: formOrientation,\n    form,\n    labelProps: userLabelProps,\n    ...otherProps\n  } = props;\n\n  let orientation = allProps.orientation || 'horizontal';\n\n  // `Math.abs(Math.sign(a) - Math.sign(b)) === 2` is true if the values have a different sign.\n  let alwaysDisplaySign =\n    Math.abs(Math.sign(minValue) - Math.sign(maxValue)) === 2;\n  if (alwaysDisplaySign) {\n    if (formatOptions != null) {\n      if (!('signDisplay' in formatOptions)) {\n        formatOptions = {\n          ...formatOptions,\n          signDisplay: 'exceptZero',\n        };\n      }\n    } else {\n      formatOptions = { signDisplay: 'exceptZero' };\n    }\n  }\n\n  const formatter = useNumberFormatter(formatOptions);\n\n  const state = useSliderState({\n    ...props,\n    orientation,\n    numberFormatter: formatter,\n    minValue,\n    maxValue,\n  });\n\n  const trackRef = useRef<HTMLElement>(null);\n\n  let { groupProps, trackProps, labelProps, outputProps } = useSlider(\n    props,\n    state,\n    trackRef,\n  );\n\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  let domRef = useFocusableRef(ref as any, inputRef);\n\n  let displayValue = '';\n  let maxLabelLength = 0;\n\n  if (typeof getValueLabel === 'function') {\n    displayValue = getValueLabel(state.values);\n    switch (state.values.length) {\n      case 1:\n        maxLabelLength = Math.max(\n          getValueLabel([minValue]).length,\n          getValueLabel([maxValue]).length,\n        );\n        break;\n      case 2:\n        // Try all possible combinations of min and max values.\n        maxLabelLength = Math.max(\n          getValueLabel([minValue, minValue]).length,\n          getValueLabel([minValue, maxValue]).length,\n          getValueLabel([maxValue, minValue]).length,\n          getValueLabel([maxValue, maxValue]).length,\n        );\n        break;\n      default:\n        throw new Error('Only sliders with 1 or 2 handles are supported!');\n    }\n  } else {\n    maxLabelLength = Math.max(\n      [...formatter.format(minValue)].length,\n      [...formatter.format(maxValue)].length,\n    );\n    switch (state.values.length) {\n      case 1:\n        displayValue = state.getThumbValueLabel(0);\n        break;\n      case 2:\n        // This should really use the NumberFormat#formatRange proposal...\n        // https://github.com/tc39/ecma402/issues/393\n        // https://github.com/tc39/proposal-intl-numberformat-v3#formatrange-ecma-402-393\n        displayValue = `${state.getThumbValueLabel(\n          0,\n        )} – ${state.getThumbValueLabel(1)}`;\n        maxLabelLength =\n          3 +\n          2 *\n            Math.max(\n              maxLabelLength,\n              [...formatter.format(minValue)].length,\n              [...formatter.format(maxValue)].length,\n            );\n        break;\n      default:\n        throw new Error('Only sliders with 1 or 2 handles are supported!');\n    }\n  }\n\n  extra =\n    extra != null || !showValueLabel ? (\n      extra\n    ) : (\n      <LabelValueElement\n        {...outputProps}\n        style={\n          maxLabelLength\n            ? {\n                width: `${maxLabelLength + 1}ch`,\n                minWidth: `${maxLabelLength + 1}ch`,\n              }\n            : undefined\n        }\n      >\n        {displayValue}\n      </LabelValueElement>\n    );\n\n  const mods = useMemo(\n    () => ({\n      'side-label': labelPosition === 'side',\n      horizontal: orientation === 'horizontal',\n      ...getValidationMods({ isInvalid, isValid }),\n    }),\n    [labelPosition, orientation, isInvalid, isValid],\n  );\n\n  styles = extractStyles(otherProps, OUTER_STYLES, styles);\n\n  const sliderField = (\n    <SliderElement\n      ref={domRef}\n      {...groupProps}\n      // `useSlider` seeds the group id once; the current id follows the form\n      // binding, and the label points at it.\n      id={props.id ?? groupProps.id}\n      mods={mods}\n      styles={styles}\n      data-input-type=\"slider\"\n    >\n      <SliderControlsElement {...trackProps} ref={trackRef} mods={mods}>\n        {children({\n          trackRef,\n          inputRef,\n          state,\n          isInvalid,\n          isValid,\n        })}\n      </SliderControlsElement>\n    </SliderElement>\n  );\n\n  return wrapWithField(sliderField, ref, {\n    ...props,\n    extra,\n    labelProps: mergeProps(labelProps, userLabelProps),\n  });\n}\n\nconst _SliderBase = forwardRefWithGenerics(SliderBase);\n\n(_SliderBase as any).displayName = 'SliderBase';\n\nexport { _SliderBase as SliderBase };\nexport { useSlider };\n"],"mappings":"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"}
+{"version":3,"file":"SliderBase.js","names":["useFocusableRef","DOMRef","FocusableRef","OUTER_STYLES","tasty","ForwardedRef","forwardRef","ReactNode","RefObject","useMemo","useRef","useNumberFormatter","useSlider","useSliderState","forwardRefWithGenerics","mergeProps","extractStyles","Text","getValidationMods","useFieldProps","wrapWithField","SliderControlsElement","SliderElement","SliderState","CubeSliderBaseProps","SliderBaseChildArguments","inputRef","HTMLInputElement","trackRef","HTMLElement","state","isInvalid","isValid","SliderBaseProps","T","children","opts","LabelValueElement","styles","display","textAlign","SliderBase","allProps","ref","HTMLDivElement","props","defaultValidationTrigger","valuePropsMapper","value","onChange","undefined","labelPosition","label","extra","isRequired","message","description","requiredMark","labelSuffix","labelStyles","necessityIndicator","gradation","isDisabled","inputStyles","minValue","maxValue","inputWidth","formatOptions","getValueLabel","onChangeEnd","showValueLabel","orientation","formOrientation","form","labelProps","userLabelProps","otherProps","alwaysDisplaySign","Math","abs","sign","signDisplay","formatter","numberFormatter","groupProps","trackProps","outputProps","domRef","displayValue","maxLabelLength","values","length","max","Error","format","getThumbValueLabel","width","minWidth","mods","horizontal","sliderField","id","_SliderBase","displayName"],"sources":["../../../../src/components/fields/Slider/SliderBase.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport { DOMRef, FocusableRef } from '@react-types/shared';\nimport { OUTER_STYLES, tasty } from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  RefObject,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useNumberFormatter, useSlider } from 'react-aria';\nimport { useSliderState } from 'react-stately';\n\nimport { forwardRefWithGenerics, mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { Text } from '../../content/Text';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\n\nimport { SliderControlsElement, SliderElement } from './elements';\n\nimport type { SliderState } from 'react-stately';\nimport type { CubeSliderBaseProps } from './types';\n\nexport interface SliderBaseChildArguments {\n  inputRef: RefObject<HTMLInputElement | null>;\n  trackRef: RefObject<HTMLElement | null>;\n  state: SliderState;\n  /** Resolved validation state. It is only known here, after `useFieldProps` merged the form state in. */\n  isInvalid?: boolean;\n  isValid?: boolean;\n}\n\nexport interface SliderBaseProps<T = number[]> extends CubeSliderBaseProps<T> {\n  children: (opts: SliderBaseChildArguments) => ReactNode;\n}\n\nconst LabelValueElement = tasty(Text, {\n  styles: {\n    display: 'block',\n    textAlign: 'right',\n  },\n});\n\nfunction SliderBase(allProps: SliderBaseProps, ref: DOMRef<HTMLDivElement>) {\n  let props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value != null ? value : undefined,\n      onChange: onChange,\n    }),\n  });\n\n  let {\n    labelPosition,\n    label,\n    extra,\n    styles,\n    isRequired,\n    message,\n    description,\n    requiredMark,\n    labelSuffix,\n    labelStyles,\n    necessityIndicator,\n    gradation,\n    isDisabled,\n    isInvalid,\n    isValid,\n    inputStyles,\n    minValue = 0,\n    maxValue = 100,\n    inputWidth,\n    formatOptions,\n    getValueLabel,\n    onChange,\n    onChangeEnd,\n    children,\n    showValueLabel = true,\n    orientation: formOrientation,\n    form,\n    labelProps: userLabelProps,\n    ...otherProps\n  } = props;\n\n  let orientation = allProps.orientation || 'horizontal';\n\n  // `Math.abs(Math.sign(a) - Math.sign(b)) === 2` is true if the values have a different sign.\n  let alwaysDisplaySign =\n    Math.abs(Math.sign(minValue) - Math.sign(maxValue)) === 2;\n  if (alwaysDisplaySign) {\n    if (formatOptions != null) {\n      if (!('signDisplay' in formatOptions)) {\n        formatOptions = {\n          ...formatOptions,\n          signDisplay: 'exceptZero',\n        };\n      }\n    } else {\n      formatOptions = { signDisplay: 'exceptZero' };\n    }\n  }\n\n  const formatter = useNumberFormatter(formatOptions);\n\n  const state = useSliderState({\n    ...props,\n    orientation,\n    numberFormatter: formatter,\n    minValue,\n    maxValue,\n  });\n\n  const trackRef = useRef<HTMLElement>(null);\n\n  let { groupProps, trackProps, labelProps, outputProps } = useSlider(\n    props,\n    state,\n    trackRef,\n  );\n\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  let domRef = useFocusableRef(ref as any, inputRef);\n\n  let displayValue = '';\n  let maxLabelLength = 0;\n\n  if (typeof getValueLabel === 'function') {\n    displayValue = getValueLabel(state.values);\n    switch (state.values.length) {\n      case 1:\n        maxLabelLength = Math.max(\n          getValueLabel([minValue]).length,\n          getValueLabel([maxValue]).length,\n        );\n        break;\n      case 2:\n        // Try all possible combinations of min and max values.\n        maxLabelLength = Math.max(\n          getValueLabel([minValue, minValue]).length,\n          getValueLabel([minValue, maxValue]).length,\n          getValueLabel([maxValue, minValue]).length,\n          getValueLabel([maxValue, maxValue]).length,\n        );\n        break;\n      default:\n        throw new Error('Only sliders with 1 or 2 handles are supported!');\n    }\n  } else {\n    maxLabelLength = Math.max(\n      [...formatter.format(minValue)].length,\n      [...formatter.format(maxValue)].length,\n    );\n    switch (state.values.length) {\n      case 1:\n        displayValue = state.getThumbValueLabel(0);\n        break;\n      case 2:\n        // This should really use the NumberFormat#formatRange proposal...\n        // https://github.com/tc39/ecma402/issues/393\n        // https://github.com/tc39/proposal-intl-numberformat-v3#formatrange-ecma-402-393\n        displayValue = `${state.getThumbValueLabel(\n          0,\n        )} – ${state.getThumbValueLabel(1)}`;\n        maxLabelLength =\n          3 +\n          2 *\n            Math.max(\n              maxLabelLength,\n              [...formatter.format(minValue)].length,\n              [...formatter.format(maxValue)].length,\n            );\n        break;\n      default:\n        throw new Error('Only sliders with 1 or 2 handles are supported!');\n    }\n  }\n\n  extra =\n    extra != null || !showValueLabel ? (\n      extra\n    ) : (\n      <LabelValueElement\n        {...outputProps}\n        style={\n          maxLabelLength\n            ? {\n                width: `${maxLabelLength + 1}ch`,\n                minWidth: `${maxLabelLength + 1}ch`,\n              }\n            : undefined\n        }\n      >\n        {displayValue}\n      </LabelValueElement>\n    );\n\n  const mods = useMemo(\n    () => ({\n      'side-label': labelPosition === 'side',\n      horizontal: orientation === 'horizontal',\n      ...getValidationMods({ isInvalid, isValid }),\n    }),\n    [labelPosition, orientation, isInvalid, isValid],\n  );\n\n  styles = extractStyles(otherProps, OUTER_STYLES, styles);\n\n  const sliderField = (\n    <SliderElement\n      ref={domRef}\n      {...groupProps}\n      // `useSlider` seeds the group id once; the current id follows the form\n      // binding, and the label points at it.\n      id={props.id ?? groupProps.id}\n      mods={mods}\n      styles={styles}\n      data-input-type=\"slider\"\n    >\n      <SliderControlsElement {...trackProps} ref={trackRef} mods={mods}>\n        {children({\n          trackRef,\n          inputRef,\n          state,\n          isInvalid,\n          isValid,\n        })}\n      </SliderControlsElement>\n    </SliderElement>\n  );\n\n  return wrapWithField(sliderField, ref, {\n    ...props,\n    extra,\n    labelProps: mergeProps(labelProps, userLabelProps),\n  });\n}\n\nconst _SliderBase = forwardRefWithGenerics(SliderBase);\n\n(_SliderBase as any).displayName = 'SliderBase';\n\nexport { _SliderBase as SliderBase };\nexport { useSlider };\n"],"mappings":"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"}

package/dist/components/fields/Slider/SliderThumb.js

@@ -1,56 +1,115 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
 import { SliderThumbElement } from "./elements.js";
-import { useMemo, useRef } from "react";
+import { c } from "react-compiler-runtime";
+import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { VisuallyHidden, useHover, useSliderThumb } from "react-aria";
 
 //#region src/components/fields/Slider/SliderThumb.tsx
 function SliderThumb(props) {
+	const $ = c(31);
 	let { state, index, inputRef, isDisabled, isInvalid, isValid, styles, tokens } = props;
 	const backupRef = useRef(null);
 	inputRef = inputRef || backupRef;
-	const { thumbProps, inputProps, isDragging, isFocused } = useSliderThumb({
-		...props,
-		inputRef
-	}, state);
-	const { hoverProps, isHovered } = useHover({ isDisabled });
+	let t0;
+	if ($[0] !== inputRef || $[1] !== props) {
+		t0 = {
+			...props,
+			inputRef
+		};
+		$[0] = inputRef;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
+	const { thumbProps, inputProps, isDragging, isFocused } = useSliderThumb(t0, state);
+	let t1;
+	if ($[3] !== isDisabled) {
+		t1 = { isDisabled };
+		$[3] = isDisabled;
+		$[4] = t1;
+	} else t1 = $[4];
+	const { hoverProps, isHovered } = useHover(t1);
 	const isCollapsed = state.values[0] === state.values[1];
-	const isStuck = state.values[index] === state.getThumbMaxValue(index) && state.values[index] === state.getThumbMinValue(index);
-	return /* @__PURE__ */ jsx(SliderThumbElement, {
-		mods: useMemo(() => {
-			return {
-				hovered: isHovered,
-				dragged: isDragging,
-				focused: !isDragging && isFocused,
-				disabled: isDisabled,
-				collapsed: isCollapsed,
-				stuck: isStuck,
-				...getValidationMods({
-					isInvalid,
-					isValid
-				})
-			};
-		}, [
-			isHovered,
-			isCollapsed,
-			isStuck,
-			isDragging,
-			isFocused,
-			isDisabled,
+	let t2;
+	if ($[5] !== index || $[6] !== state) {
+		t2 = state.values[index] === state.getThumbMaxValue(index) && state.values[index] === state.getThumbMinValue(index);
+		$[5] = index;
+		$[6] = state;
+		$[7] = t2;
+	} else t2 = $[7];
+	const isStuck = t2;
+	const t3 = !isDragging && isFocused;
+	const t4 = isDisabled;
+	let t5;
+	if ($[8] !== isInvalid || $[9] !== isValid) {
+		t5 = getValidationMods({
 			isInvalid,
 			isValid
-		]),
-		styles,
-		tokens,
-		...mergeProps$1(thumbProps, hoverProps),
-		role: "presentation",
-		children: /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", {
+		});
+		$[8] = isInvalid;
+		$[9] = isValid;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== isCollapsed || $[12] !== isDisabled || $[13] !== isDragging || $[14] !== isHovered || $[15] !== isStuck || $[16] !== t3 || $[17] !== t5) {
+		t6 = {
+			hovered: isHovered,
+			dragged: isDragging,
+			focused: t3,
+			disabled: t4,
+			collapsed: isCollapsed,
+			stuck: isStuck,
+			...t5
+		};
+		$[11] = isCollapsed;
+		$[12] = isDisabled;
+		$[13] = isDragging;
+		$[14] = isHovered;
+		$[15] = isStuck;
+		$[16] = t3;
+		$[17] = t5;
+		$[18] = t6;
+	} else t6 = $[18];
+	const mods = t6;
+	const t7 = styles;
+	const t8 = tokens;
+	let t9;
+	if ($[19] !== hoverProps || $[20] !== thumbProps) {
+		t9 = mergeProps$1(thumbProps, hoverProps);
+		$[19] = hoverProps;
+		$[20] = thumbProps;
+		$[21] = t9;
+	} else t9 = $[21];
+	let t10;
+	if ($[22] !== inputProps || $[23] !== inputRef) {
+		t10 = /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", {
 			ref: inputRef,
 			...inputProps
-		}) })
-	});
+		}) });
+		$[22] = inputProps;
+		$[23] = inputRef;
+		$[24] = t10;
+	} else t10 = $[24];
+	let t11;
+	if ($[25] !== mods || $[26] !== styles || $[27] !== t10 || $[28] !== t9 || $[29] !== tokens) {
+		t11 = /* @__PURE__ */ jsx(SliderThumbElement, {
+			mods,
+			styles: t7,
+			tokens: t8,
+			...t9,
+			role: "presentation",
+			children: t10
+		});
+		$[25] = mods;
+		$[26] = styles;
+		$[27] = t10;
+		$[28] = t9;
+		$[29] = tokens;
+		$[30] = t11;
+	} else t11 = $[30];
+	return t11;
 }
 
 //#endregion

package/dist/components/fields/Slider/SliderThumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderThumb.js","names":["mergeProps"],"sources":["../../../../src/components/fields/Slider/SliderThumb.tsx"],"sourcesContent":["import { Styles, Tokens } from '@tenphi/tasty';\nimport { RefObject, useMemo, useRef } from 'react';\nimport {\n  AriaSliderThumbOptions,\n  useHover,\n  useSliderThumb,\n  VisuallyHidden,\n} from 'react-aria';\n\nimport { mergeProps } from '../../../utils/react';\nimport { getValidationMods } from '../../form';\n\nimport { SliderThumbElement } from './elements';\n\nimport type { SliderState } from 'react-stately';\n\nexport interface SliderThumbProps extends AriaSliderThumbOptions {\n  state: SliderState;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  isValid?: boolean;\n  trackRef: RefObject<HTMLElement | null>;\n  inputRef: RefObject<HTMLInputElement | null>;\n  index: number;\n  styles?: Styles;\n  tokens?: Tokens;\n}\n\nexport function SliderThumb(props: SliderThumbProps) {\n  let {\n    state,\n    index,\n    inputRef,\n    isDisabled,\n    isInvalid,\n    isValid,\n    styles,\n    tokens,\n  } = props;\n\n  const backupRef = useRef<HTMLInputElement>(null);\n\n  inputRef = inputRef || backupRef;\n\n  const { thumbProps, inputProps, isDragging, isFocused } = useSliderThumb(\n    {\n      ...props,\n      inputRef,\n    },\n    state,\n  );\n\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n\n  const isCollapsed = state.values[0] === state.values[1];\n  const isStuck =\n    state.values[index] === state.getThumbMaxValue(index) &&\n    state.values[index] === state.getThumbMinValue(index);\n\n  const mods = useMemo(() => {\n    return {\n      hovered: isHovered,\n      dragged: isDragging,\n      focused: !isDragging && isFocused,\n      disabled: isDisabled,\n      collapsed: isCollapsed,\n      stuck: isStuck,\n      ...getValidationMods({ isInvalid, isValid }),\n    };\n  }, [\n    isHovered,\n    isCollapsed,\n    isStuck,\n    isDragging,\n    isFocused,\n    isDisabled,\n    isInvalid,\n    isValid,\n  ]);\n\n  return (\n    <SliderThumbElement\n      mods={mods}\n      styles={styles}\n      tokens={tokens}\n      {...mergeProps(thumbProps, hoverProps)}\n      role=\"presentation\"\n    >\n      <VisuallyHidden>\n        <input ref={inputRef} {...inputProps} />\n      </VisuallyHidden>\n    </SliderThumbElement>\n  );\n}\n"],"mappings":";;;;;;;;;AA4BA,SAAgB,YAAY,OAAyB;CACnD,IAAI,EACF,OACA,OACA,UACA,YACA,WACA,SACA,QACA,WACE;CAEJ,MAAM,YAAY,OAAyB,KAAK;AAEhD,YAAW,YAAY;CAEvB,MAAM,EAAE,YAAY,YAAY,YAAY,cAAc,eACxD;EACE,GAAG;EACH;EACD,EACD,MACD;CAED,MAAM,EAAE,YAAY,cAAc,SAAS,EAAE,YAAY,CAAC;CAE1D,MAAM,cAAc,MAAM,OAAO,OAAO,MAAM,OAAO;CACrD,MAAM,UACJ,MAAM,OAAO,WAAW,MAAM,iBAAiB,MAAM,IACrD,MAAM,OAAO,WAAW,MAAM,iBAAiB,MAAM;AAuBvD,QACE,oBAAC;EACC,MAvBS,cAAc;AACzB,UAAO;IACL,SAAS;IACT,SAAS;IACT,SAAS,CAAC,cAAc;IACxB,UAAU;IACV,WAAW;IACX,OAAO;IACP,GAAG,kBAAkB;KAAE;KAAW;KAAS,CAAC;IAC7C;KACA;GACD;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EAKU;EACA;EACR,GAAIA,aAAW,YAAY,WAAW;EACtC,MAAK;YAEL,oBAAC,4BACC,oBAAC;GAAM,KAAK;GAAU,GAAI;IAAc,GACzB;GACE"}
+{"version":3,"file":"SliderThumb.js","names":["Styles","Tokens","RefObject","useMemo","useRef","AriaSliderThumbOptions","useHover","useSliderThumb","VisuallyHidden","mergeProps","getValidationMods","SliderThumbElement","SliderState","SliderThumbProps","state","isDisabled","isInvalid","isValid","trackRef","HTMLElement","inputRef","HTMLInputElement","index","styles","tokens","SliderThumb","props","$","_c","backupRef","t0","thumbProps","inputProps","isDragging","isFocused","t1","hoverProps","isHovered","isCollapsed","values","t2","getThumbMaxValue","getThumbMinValue","isStuck","t3","t5","t6","hovered","dragged","focused","disabled","collapsed","stuck","mods","t9","t10","t11"],"sources":["../../../../src/components/fields/Slider/SliderThumb.tsx"],"sourcesContent":["import { Styles, Tokens } from '@tenphi/tasty';\nimport { RefObject, useMemo, useRef } from 'react';\nimport {\n  AriaSliderThumbOptions,\n  useHover,\n  useSliderThumb,\n  VisuallyHidden,\n} from 'react-aria';\n\nimport { mergeProps } from '../../../utils/react';\nimport { getValidationMods } from '../../form';\n\nimport { SliderThumbElement } from './elements';\n\nimport type { SliderState } from 'react-stately';\n\nexport interface SliderThumbProps extends AriaSliderThumbOptions {\n  state: SliderState;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  isValid?: boolean;\n  trackRef: RefObject<HTMLElement | null>;\n  inputRef: RefObject<HTMLInputElement | null>;\n  index: number;\n  styles?: Styles;\n  tokens?: Tokens;\n}\n\nexport function SliderThumb(props: SliderThumbProps) {\n  let {\n    state,\n    index,\n    inputRef,\n    isDisabled,\n    isInvalid,\n    isValid,\n    styles,\n    tokens,\n  } = props;\n\n  const backupRef = useRef<HTMLInputElement>(null);\n\n  inputRef = inputRef || backupRef;\n\n  const { thumbProps, inputProps, isDragging, isFocused } = useSliderThumb(\n    {\n      ...props,\n      inputRef,\n    },\n    state,\n  );\n\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n\n  const isCollapsed = state.values[0] === state.values[1];\n  const isStuck =\n    state.values[index] === state.getThumbMaxValue(index) &&\n    state.values[index] === state.getThumbMinValue(index);\n\n  const mods = useMemo(() => {\n    return {\n      hovered: isHovered,\n      dragged: isDragging,\n      focused: !isDragging && isFocused,\n      disabled: isDisabled,\n      collapsed: isCollapsed,\n      stuck: isStuck,\n      ...getValidationMods({ isInvalid, isValid }),\n    };\n  }, [\n    isHovered,\n    isCollapsed,\n    isStuck,\n    isDragging,\n    isFocused,\n    isDisabled,\n    isInvalid,\n    isValid,\n  ]);\n\n  return (\n    <SliderThumbElement\n      mods={mods}\n      styles={styles}\n      tokens={tokens}\n      {...mergeProps(thumbProps, hoverProps)}\n      role=\"presentation\"\n    >\n      <VisuallyHidden>\n        <input ref={inputRef} {...inputProps} />\n      </VisuallyHidden>\n    </SliderThumbElement>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,36 +1,77 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
 import { SliderTrackContainerElement } from "./elements.js";
-import { useMemo } from "react";
+import { c } from "react-compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/fields/Slider/SliderTrack.tsx
 function SliderTrack(props) {
-	const { isDisabled, isInvalid, isValid, state, orientation = "horizontal", styles } = props;
-	const selectedTrack = [state.getThumbPercent(0), state.getThumbPercent(1)];
-	const showRangeTrack = !Number.isNaN(selectedTrack[1]);
-	return /* @__PURE__ */ jsx(SliderTrackContainerElement, {
-		mods: useMemo(() => ({
-			disabled: isDisabled,
-			horizontal: orientation === "horizontal",
-			range: showRangeTrack,
-			...getValidationMods({
-				isInvalid,
-				isValid
-			})
-		}), [
-			isDisabled,
-			showRangeTrack,
-			orientation,
+	const $ = c(19);
+	const { isDisabled, isInvalid, isValid, state, orientation: t0, styles } = props;
+	const orientation = t0 === void 0 ? "horizontal" : t0;
+	let selectedTrack;
+	let t1;
+	if ($[0] !== state) {
+		selectedTrack = [state.getThumbPercent(0), state.getThumbPercent(1)];
+		t1 = Number.isNaN(selectedTrack[1]);
+		$[0] = state;
+		$[1] = selectedTrack;
+		$[2] = t1;
+	} else {
+		selectedTrack = $[1];
+		t1 = $[2];
+	}
+	const showRangeTrack = !t1;
+	const t2 = orientation === "horizontal";
+	let t3;
+	if ($[3] !== isInvalid || $[4] !== isValid) {
+		t3 = getValidationMods({
 			isInvalid,
 			isValid
-		]),
-		styles,
-		style: showRangeTrack ? {
+		});
+		$[3] = isInvalid;
+		$[4] = isValid;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== isDisabled || $[7] !== showRangeTrack || $[8] !== t2 || $[9] !== t3) {
+		t4 = {
+			disabled: isDisabled,
+			horizontal: t2,
+			range: showRangeTrack,
+			...t3
+		};
+		$[6] = isDisabled;
+		$[7] = showRangeTrack;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	const mods = t4;
+	let t5;
+	if ($[11] !== selectedTrack[0] || $[12] !== selectedTrack[1] || $[13] !== showRangeTrack) {
+		t5 = showRangeTrack ? {
 			"--slider-range-start": `${selectedTrack[0] * 100}%`,
 			"--slider-range-end": `${selectedTrack[1] * 100}%`
-		} : { "--slider-value": `${selectedTrack[0] * 100}%` }
-	});
+		} : { "--slider-value": `${selectedTrack[0] * 100}%` };
+		$[11] = selectedTrack[0];
+		$[12] = selectedTrack[1];
+		$[13] = showRangeTrack;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== mods || $[16] !== styles || $[17] !== t5) {
+		t6 = /* @__PURE__ */ jsx(SliderTrackContainerElement, {
+			mods,
+			styles,
+			style: t5
+		});
+		$[15] = mods;
+		$[16] = styles;
+		$[17] = t5;
+		$[18] = t6;
+	} else t6 = $[18];
+	return t6;
 }
 
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"SliderTrack.js","names":[],"sources":["../../../../src/components/fields/Slider/SliderTrack.tsx"],"sourcesContent":["import { Styles } from '@tenphi/tasty';\nimport { useMemo } from 'react';\n\nimport { getValidationMods } from '../../form';\n\nimport { SliderTrackContainerElement } from './elements';\n\nimport type { SliderState } from 'react-stately';\n\nexport type SliderTrackProps = {\n  state: SliderState;\n  orientation?: 'horizontal' | 'vertical';\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  isValid?: boolean;\n  styles?: Styles;\n};\n\nexport function SliderTrack(props: SliderTrackProps) {\n  const {\n    isDisabled,\n    isInvalid,\n    isValid,\n    state,\n    orientation = 'horizontal',\n    styles,\n  } = props;\n  const selectedTrack = [state.getThumbPercent(0), state.getThumbPercent(1)];\n\n  const showRangeTrack = !Number.isNaN(selectedTrack[1]);\n\n  const mods = useMemo(\n    () => ({\n      disabled: isDisabled,\n      horizontal: orientation === 'horizontal',\n      range: showRangeTrack,\n      ...getValidationMods({ isInvalid, isValid }),\n    }),\n    [isDisabled, showRangeTrack, orientation, isInvalid, isValid],\n  );\n\n  return (\n    <SliderTrackContainerElement\n      mods={mods}\n      styles={styles}\n      style={\n        showRangeTrack\n          ? {\n              '--slider-range-start': `${selectedTrack[0] * 100}%`,\n              '--slider-range-end': `${selectedTrack[1] * 100}%`,\n            }\n          : {\n              '--slider-value': `${selectedTrack[0] * 100}%`,\n            }\n      }\n    />\n  );\n}\n"],"mappings":";;;;;;;AAkBA,SAAgB,YAAY,OAAyB;CACnD,MAAM,EACJ,YACA,WACA,SACA,OACA,cAAc,cACd,WACE;CACJ,MAAM,gBAAgB,CAAC,MAAM,gBAAgB,EAAE,EAAE,MAAM,gBAAgB,EAAE,CAAC;CAE1E,MAAM,iBAAiB,CAAC,OAAO,MAAM,cAAc,GAAG;AAYtD,QACE,oBAAC;EACC,MAZS,eACJ;GACL,UAAU;GACV,YAAY,gBAAgB;GAC5B,OAAO;GACP,GAAG,kBAAkB;IAAE;IAAW;IAAS,CAAC;GAC7C,GACD;GAAC;GAAY;GAAgB;GAAa;GAAW;GAAQ,CAC9D;EAKW;EACR,OACE,iBACI;GACE,wBAAwB,GAAG,cAAc,KAAK,IAAI;GAClD,sBAAsB,GAAG,cAAc,KAAK,IAAI;GACjD,GACD,EACE,kBAAkB,GAAG,cAAc,KAAK,IAAI,IAC7C;GAEP"}
+{"version":3,"file":"SliderTrack.js","names":["Styles","useMemo","getValidationMods","SliderTrackContainerElement","SliderState","SliderTrackProps","state","orientation","isDisabled","isInvalid","isValid","styles","SliderTrack","props","$","_c","t0","undefined","selectedTrack","t1","getThumbPercent","Number","isNaN","showRangeTrack","t2","t3","t4","disabled","horizontal","range","mods","t5","t6"],"sources":["../../../../src/components/fields/Slider/SliderTrack.tsx"],"sourcesContent":["import { Styles } from '@tenphi/tasty';\nimport { useMemo } from 'react';\n\nimport { getValidationMods } from '../../form';\n\nimport { SliderTrackContainerElement } from './elements';\n\nimport type { SliderState } from 'react-stately';\n\nexport type SliderTrackProps = {\n  state: SliderState;\n  orientation?: 'horizontal' | 'vertical';\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  isValid?: boolean;\n  styles?: Styles;\n};\n\nexport function SliderTrack(props: SliderTrackProps) {\n  const {\n    isDisabled,\n    isInvalid,\n    isValid,\n    state,\n    orientation = 'horizontal',\n    styles,\n  } = props;\n  const selectedTrack = [state.getThumbPercent(0), state.getThumbPercent(1)];\n\n  const showRangeTrack = !Number.isNaN(selectedTrack[1]);\n\n  const mods = useMemo(\n    () => ({\n      disabled: isDisabled,\n      horizontal: orientation === 'horizontal',\n      range: showRangeTrack,\n      ...getValidationMods({ isInvalid, isValid }),\n    }),\n    [isDisabled, showRangeTrack, orientation, isInvalid, isValid],\n  );\n\n  return (\n    <SliderTrackContainerElement\n      mods={mods}\n      styles={styles}\n      style={\n        showRangeTrack\n          ? {\n              '--slider-range-start': `${selectedTrack[0] * 100}%`,\n              '--slider-range-end': `${selectedTrack[1] * 100}%`,\n            }\n          : {\n              '--slider-value': `${selectedTrack[0] * 100}%`,\n            }\n      }\n    />\n  );\n}\n"],"mappings":";;;;;;;AAkBA,SAAOY,YAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CACL,MAAA,EAAAP,YAAAC,WAAAC,SAAAJ,OAAAC,aAAAS,IAAAL,WAOIE;CAFF,MAAAN,cAAAS,OAAAC,SAAA,eAAAD;CAA0B,IAAAE;CAAA,IAAAC;AAAA,KAAAL,EAAA,OAAAR,OAAA;AAG5BY,kBAAsB,CAACZ,MAAKc,gBAAiB,EAAE,EAAEd,MAAKc,gBAAiB,EAAE,CAAC;AAElDD,OAAAE,OAAMC,MAAOJ,cAAa,GAAI;AAAAJ,IAAA,KAAAR;AAAAQ,IAAA,KAAAI;AAAAJ,IAAA,KAAAK;QAAA;AAAAD,kBAAAJ,EAAA;AAAAK,OAAAL,EAAA;;CAAtD,MAAAS,iBAAuB,CAACJ;CAKR,MAAAK,KAAAjB,gBAAgB;CAAY,IAAAkB;AAAA,KAAAX,EAAA,OAAAL,aAAAK,EAAA,OAAAJ,SAAA;AAErCe,OAAAvB,kBAAkB;GAAAO;GAAAC;GAAsB,CAAC;AAAAI,IAAA,KAAAL;AAAAK,IAAA,KAAAJ;AAAAI,IAAA,KAAAW;OAAAA,MAAAX,EAAA;CAAA,IAAAY;AAAA,KAAAZ,EAAA,OAAAN,cAAAM,EAAA,OAAAS,kBAAAT,EAAA,OAAAU,MAAAV,EAAA,OAAAW,IAAA;AAJvCC,OAAA;GAAAC,UACKnB;GAAUoB,YACRJ;GAA4BK,OACjCN;GAAc,GAClBE;GACJ;AAAAX,IAAA,KAAAN;AAAAM,IAAA,KAAAS;AAAAT,IAAA,KAAAU;AAAAV,IAAA,KAAAW;AAAAX,IAAA,MAAAY;OAAAA,MAAAZ,EAAA;CANH,MAAAgB,OACSJ;CAOP,IAAAK;AAAA,KAAAjB,EAAA,QAAAI,cAAA,MAAAJ,EAAA,QAAAI,cAAA,MAAAJ,EAAA,QAAAS,gBAAA;AAOIQ,OAAAR,iBAAA;GAAA,wBAE8B,GAAGL,cAAa,KAAM,IAAG;GAAG,sBAC9B,GAAGA,cAAa,KAAM,IAAG;GAIhD,GAPL,EAAA,kBAMwB,GAAGA,cAAa,KAAM,IAAG,IAC5C;AAAAJ,IAAA,MAAAI,cAAA;AAAAJ,IAAA,MAAAI,cAAA;AAAAJ,IAAA,MAAAS;AAAAT,IAAA,MAAAiB;OAAAA,MAAAjB,EAAA;CAAA,IAAAkB;AAAA,KAAAlB,EAAA,QAAAgB,QAAAhB,EAAA,QAAAH,UAAAG,EAAA,QAAAiB,IAAA;AAXTC,OAAA,oBAAC;GACOF;GACEnB;GAEN,OAAAoB;IASF;AAAAjB,IAAA,MAAAgB;AAAAhB,IAAA,MAAAH;AAAAG,IAAA,MAAAiB;AAAAjB,IAAA,MAAAkB;OAAAA,MAAAlB,EAAA;AAAA,QAbFkB"}

package/dist/components/fields/Slider/elements.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 
 //#region src/components/fields/Slider/elements.ts

package/dist/components/fields/Slider/elements.js.map

@@ -1 +1 @@
-{"version":3,"file":"elements.js","names":[],"sources":["../../../../src/components/fields/Slider/elements.ts"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nexport const SliderThumbElement = tasty({\n  qa: 'SliderThumb',\n  styles: {\n    top: '$slider-thumb-offset-top',\n    left: '$slider-thumb-offset-left',\n    width: '2x',\n    height: '2x',\n    fill: {\n      '': '(#slider-thumb, #primary)',\n      hovered: '(#slider-thumb-hovered, #primary-text)',\n      dragged: '(#slider-thumb, #primary)',\n      valid: '#success',\n      invalid: '#danger',\n      disabled: '#disabled-surface-text',\n    },\n    cursor: '$pointer',\n    outline: {\n      '': '1bw #primary-text.0',\n      focused: '1bw #primary-text',\n    },\n    outlineOffset: 1,\n    radius: '50%',\n    transition: 'theme',\n    zIndex: {\n      '': 0,\n      'collapsed & !stuck': 1,\n    },\n  },\n});\n\nexport const SliderTrackContainerElement = tasty({\n  qa: 'SliderTrackContainer',\n  styles: {\n    top: {\n      '': '0',\n      horizontal: '0.875x',\n    },\n    left: {\n      '': '0.875x',\n      horizontal: '0',\n    },\n    position: 'absolute',\n    fill: '#dark-05',\n    height: {\n      '': 'initial 10x 100%',\n      horizontal: '2px',\n    },\n    width: {\n      '': '2px',\n      horizontal: '100%',\n    },\n    radius: true,\n\n    Fill: {\n      $: '&::before',\n      content: '\"\"',\n      display: 'block',\n      position: 'absolute',\n      inset: {\n        '': '0 bottom dock',\n        horizontal: '0 left dock',\n        range: 'auto 0 $slider-range-start 0',\n        'range & horizontal': '0 auto 0 $slider-range-start',\n      },\n      fill: {\n        '': '#primary',\n        valid: '#success',\n        invalid: '#danger',\n        disabled: '#disabled-surface-text',\n      },\n      width: {\n        '': 'auto',\n        horizontal: '$slider-value',\n        range: 'auto',\n        'range & horizontal': '($slider-range-end - $slider-range-start)',\n      },\n      height: {\n        '': '$slider-value',\n        horizontal: 'auto',\n        range: '($slider-range-end - $slider-range-start)',\n        'range & horizontal': 'auto',\n      },\n    },\n  },\n});\n\nexport const SliderGradationElement = tasty({\n  qa: 'SliderGradation',\n  styles: {\n    position: 'absolute',\n    top: '2x',\n    left: 0,\n    right: 0,\n\n    display: 'flex',\n    placeContent: 'space-between',\n  },\n});\n\nexport const SliderGradeElement = tasty({\n  qa: 'SliderGrade',\n  styles: {\n    display: 'grid',\n    width: 'max 0',\n    placeContent: 'center',\n    preset: 'c2',\n    color: '#dark-03',\n  },\n});\n\nexport const SliderControlsElement = tasty({\n  qa: 'SliderControls',\n  styles: {\n    position: 'relative',\n    height: {\n      '': 'initial 8x 100%',\n      horizontal: '2x',\n    },\n    width: {\n      '': '2x',\n      horizontal: '(100% - 2x)',\n    },\n\n    '$slider-thumb-offset-top': {\n      '': '0',\n      horizontal: '1x',\n    },\n    '$slider-thumb-offset-left': {\n      '': '1x',\n      horizontal: '0',\n    },\n  },\n});\n\nexport const SliderElement = tasty({\n  qa: 'RangeSlider',\n  as: 'section',\n  styles: {\n    display: 'inline-flex',\n    verticalAlign: {\n      '': 'middle',\n      'side-label & !horizontal': 'top',\n    },\n    position: 'relative',\n    height: {\n      '': 'initial 10x 100%',\n      horizontal: '2x',\n    },\n    width: {\n      '': '2x',\n      horizontal: '100%',\n    },\n\n    alignItems: 'center',\n    flow: {\n      '': 'column',\n      inputs: 'row',\n    },\n  },\n});\n"],"mappings":";;;;AAEA,MAAa,qBAAqB,MAAM;CACtC,IAAI;CACJ,QAAQ;EACN,KAAK;EACL,MAAM;EACN,OAAO;EACP,QAAQ;EACR,MAAM;GACJ,IAAI;GACJ,SAAS;GACT,SAAS;GACT,OAAO;GACP,SAAS;GACT,UAAU;GACX;EACD,QAAQ;EACR,SAAS;GACP,IAAI;GACJ,SAAS;GACV;EACD,eAAe;EACf,QAAQ;EACR,YAAY;EACZ,QAAQ;GACN,IAAI;GACJ,sBAAsB;GACvB;EACF;CACF,CAAC;AAEF,MAAa,8BAA8B,MAAM;CAC/C,IAAI;CACJ,QAAQ;EACN,KAAK;GACH,IAAI;GACJ,YAAY;GACb;EACD,MAAM;GACJ,IAAI;GACJ,YAAY;GACb;EACD,UAAU;EACV,MAAM;EACN,QAAQ;GACN,IAAI;GACJ,YAAY;GACb;EACD,OAAO;GACL,IAAI;GACJ,YAAY;GACb;EACD,QAAQ;EAER,MAAM;GACJ,GAAG;GACH,SAAS;GACT,SAAS;GACT,UAAU;GACV,OAAO;IACL,IAAI;IACJ,YAAY;IACZ,OAAO;IACP,sBAAsB;IACvB;GACD,MAAM;IACJ,IAAI;IACJ,OAAO;IACP,SAAS;IACT,UAAU;IACX;GACD,OAAO;IACL,IAAI;IACJ,YAAY;IACZ,OAAO;IACP,sBAAsB;IACvB;GACD,QAAQ;IACN,IAAI;IACJ,YAAY;IACZ,OAAO;IACP,sBAAsB;IACvB;GACF;EACF;CACF,CAAC;AAEF,MAAa,yBAAyB,MAAM;CAC1C,IAAI;CACJ,QAAQ;EACN,UAAU;EACV,KAAK;EACL,MAAM;EACN,OAAO;EAEP,SAAS;EACT,cAAc;EACf;CACF,CAAC;AAEF,MAAa,qBAAqB,MAAM;CACtC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,OAAO;EACP,cAAc;EACd,QAAQ;EACR,OAAO;EACR;CACF,CAAC;AAEF,MAAa,wBAAwB,MAAM;CACzC,IAAI;CACJ,QAAQ;EACN,UAAU;EACV,QAAQ;GACN,IAAI;GACJ,YAAY;GACb;EACD,OAAO;GACL,IAAI;GACJ,YAAY;GACb;EAED,4BAA4B;GAC1B,IAAI;GACJ,YAAY;GACb;EACD,6BAA6B;GAC3B,IAAI;GACJ,YAAY;GACb;EACF;CACF,CAAC;AAEF,MAAa,gBAAgB,MAAM;CACjC,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,eAAe;GACb,IAAI;GACJ,4BAA4B;GAC7B;EACD,UAAU;EACV,QAAQ;GACN,IAAI;GACJ,YAAY;GACb;EACD,OAAO;GACL,IAAI;GACJ,YAAY;GACb;EAED,YAAY;EACZ,MAAM;GACJ,IAAI;GACJ,QAAQ;GACT;EACF;CACF,CAAC"}
+{"version":3,"file":"elements.js","names":["tasty","SliderThumbElement","qa","styles","top","left","width","height","fill","hovered","dragged","valid","invalid","disabled","cursor","outline","focused","outlineOffset","radius","transition","zIndex","SliderTrackContainerElement","horizontal","position","Fill","$","content","display","inset","range","SliderGradationElement","right","placeContent","SliderGradeElement","preset","color","SliderControlsElement","SliderElement","as","verticalAlign","alignItems","flow","inputs"],"sources":["../../../../src/components/fields/Slider/elements.ts"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nexport const SliderThumbElement = tasty({\n  qa: 'SliderThumb',\n  styles: {\n    top: '$slider-thumb-offset-top',\n    left: '$slider-thumb-offset-left',\n    width: '2x',\n    height: '2x',\n    fill: {\n      '': '(#slider-thumb, #primary)',\n      hovered: '(#slider-thumb-hovered, #primary-text)',\n      dragged: '(#slider-thumb, #primary)',\n      valid: '#success',\n      invalid: '#danger',\n      disabled: '#disabled-surface-text',\n    },\n    cursor: '$pointer',\n    outline: {\n      '': '1bw #primary-text.0',\n      focused: '1bw #primary-text',\n    },\n    outlineOffset: 1,\n    radius: '50%',\n    transition: 'theme',\n    zIndex: {\n      '': 0,\n      'collapsed & !stuck': 1,\n    },\n  },\n});\n\nexport const SliderTrackContainerElement = tasty({\n  qa: 'SliderTrackContainer',\n  styles: {\n    top: {\n      '': '0',\n      horizontal: '0.875x',\n    },\n    left: {\n      '': '0.875x',\n      horizontal: '0',\n    },\n    position: 'absolute',\n    fill: '#dark-05',\n    height: {\n      '': 'initial 10x 100%',\n      horizontal: '2px',\n    },\n    width: {\n      '': '2px',\n      horizontal: '100%',\n    },\n    radius: true,\n\n    Fill: {\n      $: '&::before',\n      content: '\"\"',\n      display: 'block',\n      position: 'absolute',\n      inset: {\n        '': '0 bottom dock',\n        horizontal: '0 left dock',\n        range: 'auto 0 $slider-range-start 0',\n        'range & horizontal': '0 auto 0 $slider-range-start',\n      },\n      fill: {\n        '': '#primary',\n        valid: '#success',\n        invalid: '#danger',\n        disabled: '#disabled-surface-text',\n      },\n      width: {\n        '': 'auto',\n        horizontal: '$slider-value',\n        range: 'auto',\n        'range & horizontal': '($slider-range-end - $slider-range-start)',\n      },\n      height: {\n        '': '$slider-value',\n        horizontal: 'auto',\n        range: '($slider-range-end - $slider-range-start)',\n        'range & horizontal': 'auto',\n      },\n    },\n  },\n});\n\nexport const SliderGradationElement = tasty({\n  qa: 'SliderGradation',\n  styles: {\n    position: 'absolute',\n    top: '2x',\n    left: 0,\n    right: 0,\n\n    display: 'flex',\n    placeContent: 'space-between',\n  },\n});\n\nexport const SliderGradeElement = tasty({\n  qa: 'SliderGrade',\n  styles: {\n    display: 'grid',\n    width: 'max 0',\n    placeContent: 'center',\n    preset: 'c2',\n    color: '#dark-03',\n  },\n});\n\nexport const SliderControlsElement = tasty({\n  qa: 'SliderControls',\n  styles: {\n    position: 'relative',\n    height: {\n      '': 'initial 8x 100%',\n      horizontal: '2x',\n    },\n    width: {\n      '': '2x',\n      horizontal: '(100% - 2x)',\n    },\n\n    '$slider-thumb-offset-top': {\n      '': '0',\n      horizontal: '1x',\n    },\n    '$slider-thumb-offset-left': {\n      '': '1x',\n      horizontal: '0',\n    },\n  },\n});\n\nexport const SliderElement = tasty({\n  qa: 'RangeSlider',\n  as: 'section',\n  styles: {\n    display: 'inline-flex',\n    verticalAlign: {\n      '': 'middle',\n      'side-label & !horizontal': 'top',\n    },\n    position: 'relative',\n    height: {\n      '': 'initial 10x 100%',\n      horizontal: '2x',\n    },\n    width: {\n      '': '2x',\n      horizontal: '100%',\n    },\n\n    alignItems: 'center',\n    flow: {\n      '': 'column',\n      inputs: 'row',\n    },\n  },\n});\n"],"mappings":";;;;AAEA,MAAaC,qBAAqBD,MAAM;CACtCE,IAAI;CACJC,QAAQ;EACNC,KAAK;EACLC,MAAM;EACNC,OAAO;EACPC,QAAQ;EACRC,MAAM;GACJ,IAAI;GACJC,SAAS;GACTC,SAAS;GACTC,OAAO;GACPC,SAAS;GACTC,UAAU;GACX;EACDC,QAAQ;EACRC,SAAS;GACP,IAAI;GACJC,SAAS;GACV;EACDC,eAAe;EACfC,QAAQ;EACRC,YAAY;EACZC,QAAQ;GACN,IAAI;GACJ,sBAAsB;GACxB;EACF;CACD,CAAC;AAEF,MAAaC,8BAA8BrB,MAAM;CAC/CE,IAAI;CACJC,QAAQ;EACNC,KAAK;GACH,IAAI;GACJkB,YAAY;GACb;EACDjB,MAAM;GACJ,IAAI;GACJiB,YAAY;GACb;EACDC,UAAU;EACVf,MAAM;EACND,QAAQ;GACN,IAAI;GACJe,YAAY;GACb;EACDhB,OAAO;GACL,IAAI;GACJgB,YAAY;GACb;EACDJ,QAAQ;EAERM,MAAM;GACJC,GAAG;GACHC,SAAS;GACTC,SAAS;GACTJ,UAAU;GACVK,OAAO;IACL,IAAI;IACJN,YAAY;IACZO,OAAO;IACP,sBAAsB;IACvB;GACDrB,MAAM;IACJ,IAAI;IACJG,OAAO;IACPC,SAAS;IACTC,UAAU;IACX;GACDP,OAAO;IACL,IAAI;IACJgB,YAAY;IACZO,OAAO;IACP,sBAAsB;IACvB;GACDtB,QAAQ;IACN,IAAI;IACJe,YAAY;IACZO,OAAO;IACP,sBAAsB;IACxB;GACF;EACF;CACD,CAAC;AAEF,MAAaC,yBAAyB9B,MAAM;CAC1CE,IAAI;CACJC,QAAQ;EACNoB,UAAU;EACVnB,KAAK;EACLC,MAAM;EACN0B,OAAO;EAEPJ,SAAS;EACTK,cAAc;EAChB;CACD,CAAC;AAEF,MAAaC,qBAAqBjC,MAAM;CACtCE,IAAI;CACJC,QAAQ;EACNwB,SAAS;EACTrB,OAAO;EACP0B,cAAc;EACdE,QAAQ;EACRC,OAAO;EACT;CACD,CAAC;AAEF,MAAaC,wBAAwBpC,MAAM;CACzCE,IAAI;CACJC,QAAQ;EACNoB,UAAU;EACVhB,QAAQ;GACN,IAAI;GACJe,YAAY;GACb;EACDhB,OAAO;GACL,IAAI;GACJgB,YAAY;GACb;EAED,4BAA4B;GAC1B,IAAI;GACJA,YAAY;GACb;EACD,6BAA6B;GAC3B,IAAI;GACJA,YAAY;GACd;EACF;CACD,CAAC;AAEF,MAAae,gBAAgBrC,MAAM;CACjCE,IAAI;CACJoC,IAAI;CACJnC,QAAQ;EACNwB,SAAS;EACTY,eAAe;GACb,IAAI;GACJ,4BAA4B;GAC7B;EACDhB,UAAU;EACVhB,QAAQ;GACN,IAAI;GACJe,YAAY;GACb;EACDhB,OAAO;GACL,IAAI;GACJgB,YAAY;GACb;EAEDkB,YAAY;EACZC,MAAM;GACJ,IAAI;GACJC,QAAQ;GACV;EACF;CACD,CAAC"}