npm - @cube-dev/ui-kit - Versions diffs - 0.147.3 → 0.148.0 - Mend

@cube-dev/ui-kit 0.147.3 → 0.148.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (557) hide show

package/dist/components/fields/Slider/RangeSlider.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { Gradation } from "./Gradation.js";
 import { _SliderBase } from "./SliderBase.js";
 import { SliderThumb } from "./SliderThumb.js";
@@ -18,7 +18,7 @@ function RangeSlider(props, ref) {
 	return /* @__PURE__ */ jsx(_SliderBase, {
 		ref,
 		...otherProps,
-		children: ({ trackRef, inputRef, state }) => {
+		children: ({ trackRef, inputRef, state, isInvalid, isValid }) => {
 			return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx(Gradation, {
 					state,
@@ -28,6 +28,8 @@ function RangeSlider(props, ref) {
 				/* @__PURE__ */ jsx(SliderTrack, {
 					state,
 					isDisabled,
+					isInvalid,
+					isValid,
 					orientation: props.orientation
 				}),
 				/* @__PURE__ */ jsx(SliderThumb, {
@@ -36,7 +38,9 @@ function RangeSlider(props, ref) {
 					state,
 					inputRef: minThumbInputRef,
 					trackRef,
-					isDisabled
+					isDisabled,
+					isInvalid,
+					isValid
 				}),
 				/* @__PURE__ */ jsx(SliderThumb, {
 					index: 1,
@@ -44,7 +48,9 @@ function RangeSlider(props, ref) {
 					state,
 					inputRef: maxThumbInputRef,
 					trackRef,
-					isDisabled
+					isDisabled,
+					isInvalid,
+					isValid
 				})
 			] });
 		}

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

	@@ -1 +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 {({ trackRef, inputRef, state }: SliderBaseChildArguments) => {\n return (\n <>\n <Gradation state={state} ranges={[0, 1]} values={gradation} />\n <SliderTrack\n state={state}\n isDisabled={isDisabled}\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 />\n <SliderThumb\n index={1}\n aria-label={INTL_MESSAGES['maximum']}\n state={state}\n inputRef={maxThumbInputRef}\n trackRef={trackRef}\n isDisabled={isDisabled}\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,~~EAAE~~,~~UAAU~~,~~UAAU~~,~~YAAsC~~;~~AAC5D~~,UACE;IACE,oBAAC;KAAiB;KAAO,QAAQ,CAAC,GAAG,EAAE;KAAE,QAAQ;MAAa;IAC9D,oBAAC;KACQ;KACK;~~KACZ~~,aAAa,MAAM;MACnB;IACF,oBAAC;KACC,OAAO;KACP,cAAY,cAAc;KACnB;KACP,UAAU;KACA;KACE;~~MACZ~~;IACF,oBAAC;KACC,OAAO;KACP,cAAY,cAAc;KACnB;KACP,UAAU;KACA;KACE;~~MACZ~~;OACD;;GAGI;;AAIjB,MAAM,eAAe,WAAW,YAAY;AAE5C,MAAM,gBAAgB,OAAO,OAAO,cAAqC;CACvE,eAAe;CACf,aAAa;CACd,CAAC"}
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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { Gradation } from "./Gradation.js";
@@ -30,7 +30,7 @@ function Slider(props, ref) {
 		ref,
 		orientation,
 		styles: extractedStyles,
-		children: ({ trackRef, inputRef, state }) => {
+		children: ({ trackRef, inputRef, state, isInvalid, isValid }) => {
 			return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx(Gradation, {
 					state,
@@ -40,6 +40,8 @@ function Slider(props, ref) {
 				/* @__PURE__ */ jsx(SliderTrack, {
 					state,
 					isDisabled,
+					isInvalid,
+					isValid,
 					orientation,
 					styles: trackStyles
 				}),
@@ -49,6 +51,8 @@ function Slider(props, ref) {
 					inputRef,
 					trackRef,
 					isDisabled,
+					isInvalid,
+					isValid,
 					styles: thumbStyles,
 					tokens: thumbTokens
 				})

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

	@@ -1 +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 {({ trackRef, inputRef, state }: SliderBaseChildArguments) => {\n return (\n <>\n <Gradation state={state} ranges={[0, 1]} values={gradation} />\n <SliderTrack\n state={state}\n isDisabled={isDisabled}\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 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,~~EAAE~~,~~UAAU~~,~~UAAU~~,~~YAAsC~~;~~AAC5D~~,UACE;IACE,oBAAC;KAAiB;KAAO,QAAQ,CAAC,GAAG,EAAE;KAAE,QAAQ;MAAa;IAC9D,oBAAC;KACQ;KACK;~~KACC~~;KACb,QAAQ;MACR;IACF,oBAAC;KACC,OAAO;KACA;KACG;KACA;KACE;~~KACZ~~,QAAQ;KACR,QAAQ;MACR;OACD;;GAGI;;AAIjB,MAAM,UAAU,WAAW,OAAO;AAElC,MAAM,WAAW,OAAO,OAAO,SAA2B;CACxD,eAAe;CACf,aAAa;CACd,CAAC"}
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"}

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

@@ -1,9 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.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";
 import { _Text } from "../../content/Text.js";
-import { useFormProps } from "../../form/Form/Form.js";
+import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
 import { SliderControlsElement, SliderElement } from "./elements.js";
@@ -20,15 +20,14 @@ const LabelValueElement = tasty(_Text, { styles: {
 	textAlign: "right"
 } });
 function SliderBase(allProps, ref) {
-	let props = useFormProps(allProps);
-	props = useFieldProps(props, {
+	let props = useFieldProps(allProps, {
 		defaultValidationTrigger: "onChange",
 		valuePropsMapper: ({ value, onChange }) => ({
 			value: value != null ? value : void 0,
 			onChange
 		})
 	});
-	let { labelPosition, label, extra, styles, isRequired, validationState, message, description, requiredMark, labelSuffix, labelStyles, necessityIndicator, gradation, isDisabled, 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, 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 = {
@@ -84,8 +83,17 @@ function SliderBase(allProps, ref) {
 	});
 	const mods = useMemo(() => ({
 		"side-label": labelPosition === "side",
-		horizontal: orientation === "horizontal"
-	}), [labelPosition, orientation]);
+		horizontal: orientation === "horizontal",
+		...getValidationMods({
+			isInvalid,
+			isValid
+		})
+	}), [
+		labelPosition,
+		orientation,
+		isInvalid,
+		isValid
+	]);
 	styles = extractStyles(otherProps, OUTER_STYLES, styles);
 	return wrapWithField(/* @__PURE__ */ jsx(SliderElement, {
 		ref: domRef,
@@ -101,7 +109,9 @@ function SliderBase(allProps, ref) {
 			children: children({
 				trackRef,
 				inputRef,
-				state
+				state,
+				isInvalid,
+				isValid
 			})
 		})
 	}), ref, {

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

	@@ -1 +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 { ~~useFieldProps~~, ~~useFormProps~~, 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>;\n trackRef: RefObject<HTMLElement>;\n state: SliderState;\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 = ~~useFormProps~~(allProps~~);\n props = useFieldProps(props~~, {\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 ~~validationState,\n~~ message,\n description,\n requiredMark,\n labelSuffix,\n labelStyles,\n necessityIndicator,\n gradation,\n isDisabled,\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 }),\n [labelPosition, orientation],\n );\n\n styles = extractStyles(otherProps, OUTER_STYLES, styles);\n\n const sliderField = (\n <SliderElement\n ref={domRef}\n id={props.id}\n {...groupProps}\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 })}\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":";;;;;;;;;;;;;;;;;~~AAkCA~~,MAAM,oBAAoB,MAAMA,OAAM,EACpC,QAAQ;CACN,SAAS;CACT,WAAW;CACZ,EACF,CAAC;AAEF,SAAS,WAAW,UAA2B,KAA6B;CAC1E,IAAI,QAAQ,~~aAAa,SAAS;AAClC,SAAQ,~~cAAc,~~OAAO~~;~~EAC3B~~,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GAC1C,OAAO,SAAS,OAAO,QAAQ;GACrB;GACX;EACF,CAAC;CAEF,IAAI,EACF,eACA,OACA,OACA,QACA,YACA,~~iBACA,~~SACA,aACA,cACA,aACA,aACA,oBACA,WACA,YACA,aACA,WAAW,GACX,WAAW,KACX,YACA,eACA,eACA,UACA,aACA,UACA,iBAAiB,MACjB,aAAa,iBACb,MACA,YAAY,gBACZ,GAAG,eACD;CAEJ,IAAI,cAAc,SAAS,eAAe;AAK1C,KADE,KAAK,IAAI,KAAK,KAAK,SAAS,GAAG,KAAK,KAAK,SAAS,CAAC,KAAK,EAExD,KAAI,iBAAiB,MACnB;MAAI,EAAE,iBAAiB,eACrB,iBAAgB;GACd,GAAG;GACH,aAAa;GACd;OAGH,iBAAgB,EAAE,aAAa,cAAc;CAIjD,MAAM,YAAY,mBAAmB,cAAc;CAEnD,MAAM,QAAQ,eAAe;EAC3B,GAAG;EACH;EACA,iBAAiB;EACjB;EACA;EACD,CAAC;CAEF,MAAM,WAAW,OAAoB,KAAK;CAE1C,IAAI,EAAE,YAAY,YAAY,YAAY,gBAAgB,UACxD,OACA,OACA,SACD;CAED,MAAM,WAAW,OAAyB,KAAK;CAE/C,IAAI,SAAS,gBAAgB,KAAY,SAAS;CAElD,IAAI,eAAe;CACnB,IAAI,iBAAiB;AAErB,KAAI,OAAO,kBAAkB,YAAY;AACvC,iBAAe,cAAc,MAAM,OAAO;AAC1C,UAAQ,MAAM,OAAO,QAArB;GACE,KAAK;AACH,qBAAiB,KAAK,IACpB,cAAc,CAAC,SAAS,CAAC,CAAC,QAC1B,cAAc,CAAC,SAAS,CAAC,CAAC,OAC3B;AACD;GACF,KAAK;AAEH,qBAAiB,KAAK,IACpB,cAAc,CAAC,UAAU,SAAS,CAAC,CAAC,QACpC,cAAc,CAAC,UAAU,SAAS,CAAC,CAAC,QACpC,cAAc,CAAC,UAAU,SAAS,CAAC,CAAC,QACpC,cAAc,CAAC,UAAU,SAAS,CAAC,CAAC,OACrC;AACD;GACF,QACE,OAAM,IAAI,MAAM,kDAAkD;;QAEjE;AACL,mBAAiB,KAAK,IACpB,CAAC,GAAG,UAAU,OAAO,SAAS,CAAC,CAAC,QAChC,CAAC,GAAG,UAAU,OAAO,SAAS,CAAC,CAAC,OACjC;AACD,UAAQ,MAAM,OAAO,QAArB;GACE,KAAK;AACH,mBAAe,MAAM,mBAAmB,EAAE;AAC1C;GACF,KAAK;AAIH,mBAAe,GAAG,MAAM,mBACtB,EACD,CAAC,KAAK,MAAM,mBAAmB,EAAE;AAClC,qBACE,IACA,IACE,KAAK,IACH,gBACA,CAAC,GAAG,UAAU,OAAO,SAAS,CAAC,CAAC,QAChC,CAAC,GAAG,UAAU,OAAO,SAAS,CAAC,CAAC,OACjC;AACL;GACF,QACE,OAAM,IAAI,MAAM,kDAAkD;;;AAIxE,SACE,SAAS,QAAQ,CAAC,iBAChB,QAEA,oBAAC;EACC,GAAI;EACJ,OACE,iBACI;GACE,OAAO,GAAG,iBAAiB,EAAE;GAC7B,UAAU,GAAG,iBAAiB,EAAE;GACjC,GACD;YAGL;GACiB;CAGxB,MAAM,OAAO,eACJ;EACL,cAAc,kBAAkB;EAChC,YAAY,gBAAgB;~~EAC7B~~,~~GACD~~,CAAC,~~eAAe~~,~~YAAY,CAC7B~~;AAED,UAAS,cAAc,YAAY,cAAc,OAAO;~~AAqBxD~~,QAAO,~~cAlBL~~,oBAAC;EACC,KAAK;EACL,IAAI,MAAM;EACV,GAAI;EACE;EACE;EACR,mBAAgB;YAEhB,oBAAC;GAAsB,GAAI;GAAY,KAAK;GAAgB;aACzD,SAAS;IACR;IACA;IACA;IACD,CAAC;IACoB;GACV,EAGgB,KAAK;EACrC,GAAG;EACH;EACA,YAAYC,aAAW,YAAY,eAAe;EACnD,CAAC;;AAGJ,MAAM,cAAc,uBAAuB,WAAW;AAEtD,AAAC,YAAoB,cAAc"}
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 id={props.id}\n {...groupProps}\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 CHANGED Viewed

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.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 { jsx } from "react/jsx-runtime";
@@ -7,7 +8,7 @@ import { VisuallyHidden, useHover, useSliderThumb } from "react-aria";
 //#region src/components/fields/Slider/SliderThumb.tsx
 function SliderThumb(props) {
-	let { state, index, inputRef, isDisabled, styles, tokens } = props;
+	let { state, index, inputRef, isDisabled, isInvalid, isValid, styles, tokens } = props;
 	const backupRef = useRef(null);
 	inputRef = inputRef || backupRef;
 	const { thumbProps, inputProps, isDragging, isFocused } = useSliderThumb({
@@ -25,7 +26,11 @@ function SliderThumb(props) {
 				focused: !isDragging && isFocused,
 				disabled: isDisabled,
 				collapsed: isCollapsed,
-				stuck: isStuck
+				stuck: isStuck,
+				...getValidationMods({
+					isInvalid,
+					isValid
+				})
 			};
 		}, [
 			isHovered,
@@ -33,7 +38,9 @@ function SliderThumb(props) {
 			isStuck,
 			isDragging,
 			isFocused,
-			isDisabled
+			isDisabled,
+			isInvalid,
+			isValid
 		]),
 		styles,
 		tokens,

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

	@@ -1 +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';\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 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 { state, index, inputRef, isDisabled, styles, tokens } = 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 };\n }, [isHovered, isCollapsed, isStuck, isDragging, isFocused, isDisabled]);\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":"~~;;;;;;;;AAyBA~~,SAAgB,YAAY,OAAyB;CACnD,IAAI,~~EAAE~~,~~OAAO~~,~~OAAO~~,~~UAAU~~,~~YAAY~~,~~QAAQ~~,~~WAAW~~;~~CAE7D~~,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;~~AAavD~~,QACE,oBAAC;EACC,~~MAbS~~,cAAc;AACzB,UAAO;IACL,SAAS;IACT,SAAS;IACT,SAAS,CAAC,cAAc;IACxB,UAAU;IACV,WAAW;IACX,OAAO;~~IACR~~;KACA;~~GAAC~~;~~GAAW~~;~~GAAa~~;~~GAAS~~;~~GAAY~~;~~GAAW~~;~~GAAW~~,CAAC;~~EAK5D~~;EACA;EACR,GAAIA,aAAW,YAAY,WAAW;EACtC,MAAK;YAEL,oBAAC,4BACC,oBAAC;GAAM,KAAK;GAAU,GAAI;IAAc,GACzB;GACE"}
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"}

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

@@ -1,19 +1,30 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
+import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
 import { SliderTrackContainerElement } from "./elements.js";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/fields/Slider/SliderTrack.tsx
 function SliderTrack(props) {
-	const { isDisabled, state, orientation = "horizontal", styles } = 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
-		}), [isDisabled, showRangeTrack]),
+			range: showRangeTrack,
+			...getValidationMods({
+				isInvalid,
+				isValid
+			})
+		}), [
+			isDisabled,
+			showRangeTrack,
+			orientation,
+			isInvalid,
+			isValid
+		]),
 		styles,
 		style: showRangeTrack ? {
 			"--slider-range-start": `${selectedTrack[0] * 100}%`,

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

	@@ -1 +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 { 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 styles?: Styles;\n};\n\nexport function SliderTrack(props: SliderTrackProps) {\n const { isDisabled, state, orientation = 'horizontal', styles } = 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 }),\n [isDisabled, showRangeTrack],\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":"~~;;;;;;AAcA~~,SAAgB,YAAY,OAAyB;CACnD,MAAM,~~EAAE~~,~~YAAY~~,~~OAAO~~,~~cAAc~~,cAAc,~~WAAW~~;~~CAClE~~,MAAM,gBAAgB,CAAC,MAAM,gBAAgB,EAAE,EAAE,MAAM,gBAAgB,EAAE,CAAC;CAE1E,MAAM,iBAAiB,CAAC,OAAO,MAAM,cAAc,GAAG;~~AAWtD~~,QACE,oBAAC;EACC,~~MAXS~~,eACJ;GACL,UAAU;GACV,YAAY,gBAAgB;GAC5B,OAAO;~~GACR~~,~~GACD~~,CAAC,~~YAAY~~,~~eAAe,CAC7B~~;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"}
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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 //#region src/components/fields/Slider/elements.ts
@@ -13,6 +13,8 @@ const SliderThumbElement = tasty({
 			"": "(#slider-thumb, #primary)",
 			hovered: "(#slider-thumb-hovered, #primary-text)",
 			dragged: "(#slider-thumb, #primary)",
+			valid: "#success",
+			invalid: "#danger",
 			disabled: "#disabled-surface-text"
 		},
 		cursor: "$pointer",
@@ -64,6 +66,8 @@ const SliderTrackContainerElement = tasty({
 			},
 			fill: {
 				"": "#primary",
+				valid: "#success",
+				invalid: "#danger",
 				disabled: "#disabled-surface-text"
 			},
 			width: {

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

	@@ -1 +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 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 '': 'auto 0 0 0',\n horizontal: '0 auto 0 0',\n range: 'auto 0 $slider-range-start 0',\n 'range & horizontal': '0 auto 0 $slider-range-start',\n },\n fill: {\n '': '#primary',\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,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,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"}
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 '': 'auto 0 0 0',\n horizontal: '0 auto 0 0',\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"}

package/dist/components/fields/Slider/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { __RangeSlider } from "./RangeSlider.js";
 import { __Slider } from "./Slider.js";
 import { __HueSlider } from "./HueSlider.js";

package/dist/components/fields/Switch/Switch.js CHANGED Viewed

@@ -1,12 +1,11 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useId as useId$2 } from "../../../utils/react/useId.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _Text } from "../../content/Text.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
 import { LoadingIcon } from "../../../icons/LoadingIcon.js";
-import { useProviderProps } from "../../../provider.js";
-import { useFormProps } from "../../form/Form/Form.js";
+import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
 import { castNullableIsSelected } from "../../../utils/react/nullableValue.js";
@@ -44,6 +43,8 @@ const SwitchElement = tasty({
 		fill: {
 			"": "#surface",
 			checked: "#primary",
+			"invalid & checked": "#danger",
+			"valid & checked": "#success",
 			disabled: "#border.5",
 			"disabled & checked": "#border"
 		},
@@ -55,7 +56,8 @@ const SwitchElement = tasty({
 			"": "#dark-05",
 			checked: "#primary-text",
 			disabled: "#dark-05.5",
-			invalid: "#danger"
+			invalid: "#danger",
+			valid: "#success"
 		},
 		width: {
 			"": "5x 5x",
@@ -113,8 +115,6 @@ const SwitchElement = tasty({
 const PROP_STYLES = [...OUTER_STYLES, ...BLOCK_STYLES];
 function Switch(props, ref) {
 	props = castNullableIsSelected(props);
-	props = useProviderProps(props);
-	props = useFormProps(props);
 	props = useFieldProps(props, {
 		defaultValidationTrigger: "onChange",
 		valuePropsMapper: ({ value, onChange }) => ({
@@ -123,7 +123,7 @@ function Switch(props, ref) {
 			onChange
 		})
 	});
-	let { qa, isDisabled = false, children, label, insideForm, isLoading, labelPosition, inputStyles, validationState, size = "medium", form } = props;
+	let { qa, isDisabled = false, children, label, insideForm, isLoading, labelPosition, inputStyles, isInvalid, isValid, size = "medium", form } = props;
 	const id = useId$2(props.id);
 	let styles = extractStyles(props, PROP_STYLES);
 	let { isFocused, focusProps } = useFocus$1({ isDisabled }, true);
@@ -136,8 +136,10 @@ function Switch(props, ref) {
 		disabled: isDisabled,
 		hovered: isHovered,
 		focused: isFocused,
-		invalid: validationState === "invalid",
-		valid: validationState === "valid",
+		...getValidationMods({
+			isInvalid,
+			isValid
+		}),
 		"inside-form": insideForm,
 		"side-label": labelPosition === "side"
 	};

package/dist/components/fields/Switch/Switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch.js","names":["useId","useFocus","mergeProps","Text"],"sources":["../../../../src/components/fields/Switch/Switch.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport {\n BaseProps,\n BLOCK_STYLES,\n BlockStyleProps,\n OUTER_STYLES,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport { AriaSwitchProps, useHover, useSwitch } from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { LoadingIcon } from '../../../icons';\nimport { ~~useProviderProps } from '../../../provider';\nimport {~~ FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n castNullableIsSelected,\n WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { useId } from '../../../utils/react/useId';\nimport { extractStyles } from '../../../utils/styles';\nimport { Text } from '../../content/Text';\nimport { ~~useFieldProps~~, ~~useFormProps~~, wrapWithField } from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\n\nconst SwitchWrapperElement = tasty({\n as: 'label',\n styles: {\n display: 'flex',\n position: 'relative',\n placeItems: {\n '': 'center stretch',\n 'side-label': 'baseline stretch',\n },\n gap: '1x',\n width: 'max max-content',\n color: '#dark-02',\n },\n});\n\nconst SwitchElement = tasty({\n qa: 'Switch',\n styles: {\n boxSizing: 'border-box',\n position: 'relative',\n verticalAlign: 'baseline',\n placeSelf: 'center',\n radius: 'round',\n fill: {\n '': '#surface',\n checked: '#primary',\n disabled: '#border.5',\n 'disabled & checked': '#border',\n },\n color: {\n '': '#dark-03',\n checked: '#white',\n },\n border: {\n '': '#dark-05',\n checked: '#primary-text',\n disabled: '#dark-05.5',\n invalid: '#danger',\n },\n width: {\n '': '5x 5x',\n 'size=medium': '4x 4x',\n 'size=small': '3x 3x',\n },\n height: {\n '': '3x 3x',\n 'size=medium': '2.5x 2.5x',\n 'size=small': '2x 2x',\n },\n outline: {\n '': '#primary-text.0',\n focused: '1bw #primary-text',\n },\n outlineOffset: 1,\n transition: 'theme',\n cursor: '$pointer',\n\n Thumb: {\n position: 'absolute',\n width: {\n '': '2x 2x',\n 'size=medium': '1.5x 1.5x',\n 'size=small': '1.25x 1.25x',\n },\n height: {\n '': '2x 2x',\n 'size=medium': '1.5x 1.5x',\n 'size=small': '1.25x 1.25x',\n },\n radius: 'round',\n fill: {\n '': 'currentColor',\n disabled: '#current.5',\n 'disabled & checked': '#white.8',\n },\n top: {\n '': '.375x',\n 'size=medium': '.375x',\n 'size=small': '.25x',\n },\n left: {\n '': '.375x',\n 'size=medium': '.375x',\n 'size=small': '.25x',\n checked: '2.25x',\n 'checked & size=medium': '1.75x',\n 'checked & size=small': '1.25x',\n },\n transition: 'left, theme',\n cursor: '$pointer',\n },\n },\n});\n\nconst PROP_STYLES = [...OUTER_STYLES, ...BLOCK_STYLES];\n\nexport interface CubeSwitchProps\n extends BaseProps,\n OuterStyleProps,\n BlockStyleProps,\n FieldBaseProps,\n AriaSwitchProps {\n inputStyles?: Styles;\n isLoading?: boolean;\n size?: 'large' \| 'medium' \| 'small';\n}\n\nfunction Switch(props: WithNullableSelected<CubeSwitchProps>, ref) {\n props = castNullableIsSelected(props);\n props = ~~useProviderProps(props);\n props = useFormProps(props);\n props =~~ useFieldProps(props, {\n defaultValidationTrigger: 'onChange',\n valuePropsMapper: ({ value, onChange }) => ({\n isSelected: value != null ? value : false,\n isIndeterminate: false,\n onChange: onChange,\n }),\n });\n\n let {\n qa,\n isDisabled = false,\n children,\n label,\n insideForm,\n isLoading,\n labelPosition,\n inputStyles,\n ~~validationState~~,\n size = 'medium',\n form,\n } = props;\n\n const id = useId(props.id);\n\n let styles = extractStyles(props, PROP_STYLES);\n\n let { isFocused, focusProps } = useFocus({ isDisabled }, true);\n let { hoverProps, isHovered } = useHover({ isDisabled });\n\n let inputRef = useRef(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let { inputProps } = useSwitch(props, useToggleState(props), inputRef);\n\n const mods = {\n checked: inputProps.checked,\n disabled: isDisabled,\n hovered: isHovered,\n focused: isFocused,\n ~~invalid:~~ ~~validationState~~ ~~===~~ ~~'invalid'~~,\n ~~valid: validationState ===~~ '~~valid',\n '~~inside-form': insideForm,\n 'side-label': labelPosition === 'side',\n };\n\n const switchField = (\n <SwitchWrapperElement\n qa=\"SwitchWrapper\"\n mods={mods}\n data-size={size}\n styles={styles}\n {...hoverProps}\n >\n <HiddenInput\n qa={qa \|\| 'Switch'}\n data-input-type=\"switch\"\n {...mergeProps(inputProps, focusProps)}\n ref={inputRef}\n id={id}\n />\n <SwitchElement mods={mods} data-size={size} styles={inputStyles}>\n <div data-element=\"Thumb\" aria-hidden=\"true\" />\n </SwitchElement>\n {children ? <Text nowrap>{children}</Text> : null}\n {isLoading ? (\n <>\n {label ? <> </> : null}\n <LoadingIcon />\n </>\n ) : null}\n </SwitchWrapperElement>\n );\n\n return wrapWithField(switchField, domRef, {\n ...props,\n id,\n labelProps: {\n ...props.labelProps,\n for: id,\n },\n children: null,\n inputStyles,\n });\n}\n\n/*\n Switches allow users to turn an individual option on or off.\n * They are usually used to activate or deactivate a specific setting.\n */\nlet _Switch = forwardRef(Switch);\n\n(_Switch as any).cubeInputType = 'Checkbox';\n_Switch.displayName = 'Switch';\n\nexport { _Switch as Switch };\nexport type { AriaSwitchProps };\nexport { useSwitch };\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;AA6BA~~,MAAM,uBAAuB,MAAM;CACjC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,UAAU;EACV,YAAY;GACV,IAAI;GACJ,cAAc;GACf;EACD,KAAK;EACL,OAAO;EACP,OAAO;EACR;CACF,CAAC;AAEF,MAAM,gBAAgB,MAAM;CAC1B,IAAI;CACJ,QAAQ;EACN,WAAW;EACX,UAAU;EACV,eAAe;EACf,WAAW;EACX,QAAQ;EACR,MAAM;GACJ,IAAI;GACJ,SAAS;GACT,UAAU;GACV,sBAAsB;GACvB;EACD,OAAO;GACL,IAAI;GACJ,SAAS;GACV;EACD,QAAQ;GACN,IAAI;GACJ,SAAS;GACT,UAAU;GACV,SAAS;~~GACV~~;EACD,OAAO;GACL,IAAI;GACJ,eAAe;GACf,cAAc;GACf;EACD,QAAQ;GACN,IAAI;GACJ,eAAe;GACf,cAAc;GACf;EACD,SAAS;GACP,IAAI;GACJ,SAAS;GACV;EACD,eAAe;EACf,YAAY;EACZ,QAAQ;EAER,OAAO;GACL,UAAU;GACV,OAAO;IACL,IAAI;IACJ,eAAe;IACf,cAAc;IACf;GACD,QAAQ;IACN,IAAI;IACJ,eAAe;IACf,cAAc;IACf;GACD,QAAQ;GACR,MAAM;IACJ,IAAI;IACJ,UAAU;IACV,sBAAsB;IACvB;GACD,KAAK;IACH,IAAI;IACJ,eAAe;IACf,cAAc;IACf;GACD,MAAM;IACJ,IAAI;IACJ,eAAe;IACf,cAAc;IACd,SAAS;IACT,yBAAyB;IACzB,wBAAwB;IACzB;GACD,YAAY;GACZ,QAAQ;GACT;EACF;CACF,CAAC;AAEF,MAAM,cAAc,CAAC,GAAG,cAAc,GAAG,aAAa;AAatD,SAAS,OAAO,OAA8C,KAAK;AACjE,SAAQ,uBAAuB,MAAM;AACrC,SAAQ,~~iBAAiB,MAAM;AAC/B,SAAQ,aAAa,MAAM;AAC3B,SAAQ,~~cAAc,OAAO;EAC3B,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GAC1C,YAAY,SAAS,OAAO,QAAQ;GACpC,iBAAiB;GACP;GACX;EACF,CAAC;CAEF,IAAI,EACF,IACA,aAAa,OACb,UACA,OACA,YACA,WACA,eACA,aACA,~~iBACA~~,OAAO,UACP,SACE;CAEJ,MAAM,KAAKA,QAAM,MAAM,GAAG;CAE1B,IAAI,SAAS,cAAc,OAAO,YAAY;CAE9C,IAAI,EAAE,WAAW,eAAeC,WAAS,EAAE,YAAY,EAAE,KAAK;CAC9D,IAAI,EAAE,YAAY,cAAc,SAAS,EAAE,YAAY,CAAC;CAExD,IAAI,WAAW,OAAO,KAAK;CAC3B,IAAI,SAAS,gBAAgB,KAAK,SAAS;CAE3C,IAAI,EAAE,eAAe,UAAU,OAAO,eAAe,MAAM,EAAE,SAAS;CAEtE,MAAM,OAAO;EACX,SAAS,WAAW;EACpB,UAAU;EACV,SAAS;EACT,SAAS;EACT,~~SAAS~~,~~oBAAoB~~;~~EAC7B~~,~~OAAO,oBAAoB~~;~~EAC3B~~,eAAe;EACf,cAAc,kBAAkB;EACjC;AA8BD,QAAO,cA3BL,qBAAC;EACC,IAAG;EACG;EACN,aAAW;EACH;EACR,GAAI;;GAEJ,oBAAC;IACC,IAAI,MAAM;IACV,mBAAgB;IAChB,GAAIC,aAAW,YAAY,WAAW;IACtC,KAAK;IACD;KACJ;GACF,oBAAC;IAAoB;IAAM,aAAW;IAAM,QAAQ;cAClD,oBAAC;KAAI,gBAAa;KAAQ,eAAY;MAAS;KACjC;GACf,WAAW,oBAACC;IAAK;IAAQ;KAAgB,GAAG;GAC5C,YACC,8CACG,QAAQ,4CAAE,SAAS,GAAG,MACvB,oBAAC,gBAAc,IACd,GACD;;GACiB,EAGS,QAAQ;EACxC,GAAG;EACH;EACA,YAAY;GACV,GAAG,MAAM;GACT,KAAK;GACN;EACD,UAAU;EACV;EACD,CAAC;;;;;;AAOJ,IAAI,UAAU,WAAW,OAAO;AAEhC,AAAC,QAAgB,gBAAgB;AACjC,QAAQ,cAAc"}
1	+ {"version":3,"file":"Switch.js","names":["useId","useFocus","mergeProps","Text"],"sources":["../../../../src/components/fields/Switch/Switch.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport {\n BaseProps,\n BLOCK_STYLES,\n BlockStyleProps,\n OUTER_STYLES,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport { AriaSwitchProps, useHover, useSwitch } from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { LoadingIcon } from '../../../icons';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n castNullableIsSelected,\n WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { useId } from '../../../utils/react/useId';\nimport { extractStyles } from '../../../utils/styles';\nimport { Text } from '../../content/Text';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\n\nconst SwitchWrapperElement = tasty({\n as: 'label',\n styles: {\n display: 'flex',\n position: 'relative',\n placeItems: {\n '': 'center stretch',\n 'side-label': 'baseline stretch',\n },\n gap: '1x',\n width: 'max max-content',\n color: '#dark-02',\n },\n});\n\nconst SwitchElement = tasty({\n qa: 'Switch',\n styles: {\n boxSizing: 'border-box',\n position: 'relative',\n verticalAlign: 'baseline',\n placeSelf: 'center',\n radius: 'round',\n fill: {\n '': '#surface',\n checked: '#primary',\n 'invalid & checked': '#danger',\n 'valid & checked': '#success',\n disabled: '#border.5',\n 'disabled & checked': '#border',\n },\n color: {\n '': '#dark-03',\n checked: '#white',\n },\n border: {\n '': '#dark-05',\n checked: '#primary-text',\n disabled: '#dark-05.5',\n invalid: '#danger',\n valid: '#success',\n },\n width: {\n '': '5x 5x',\n 'size=medium': '4x 4x',\n 'size=small': '3x 3x',\n },\n height: {\n '': '3x 3x',\n 'size=medium': '2.5x 2.5x',\n 'size=small': '2x 2x',\n },\n outline: {\n '': '#primary-text.0',\n focused: '1bw #primary-text',\n },\n outlineOffset: 1,\n transition: 'theme',\n cursor: '$pointer',\n\n Thumb: {\n position: 'absolute',\n width: {\n '': '2x 2x',\n 'size=medium': '1.5x 1.5x',\n 'size=small': '1.25x 1.25x',\n },\n height: {\n '': '2x 2x',\n 'size=medium': '1.5x 1.5x',\n 'size=small': '1.25x 1.25x',\n },\n radius: 'round',\n fill: {\n '': 'currentColor',\n disabled: '#current.5',\n 'disabled & checked': '#white.8',\n },\n top: {\n '': '.375x',\n 'size=medium': '.375x',\n 'size=small': '.25x',\n },\n left: {\n '': '.375x',\n 'size=medium': '.375x',\n 'size=small': '.25x',\n checked: '2.25x',\n 'checked & size=medium': '1.75x',\n 'checked & size=small': '1.25x',\n },\n transition: 'left, theme',\n cursor: '$pointer',\n },\n },\n});\n\nconst PROP_STYLES = [...OUTER_STYLES, ...BLOCK_STYLES];\n\nexport interface CubeSwitchProps\n extends BaseProps,\n OuterStyleProps,\n BlockStyleProps,\n FieldBaseProps,\n AriaSwitchProps {\n inputStyles?: Styles;\n isLoading?: boolean;\n size?: 'large' \| 'medium' \| 'small';\n}\n\nfunction Switch(props: WithNullableSelected<CubeSwitchProps>, ref) {\n props = castNullableIsSelected(props);\n props = useFieldProps(props, {\n defaultValidationTrigger: 'onChange',\n valuePropsMapper: ({ value, onChange }) => ({\n isSelected: value != null ? value : false,\n isIndeterminate: false,\n onChange: onChange,\n }),\n });\n\n let {\n qa,\n isDisabled = false,\n children,\n label,\n insideForm,\n isLoading,\n labelPosition,\n inputStyles,\n isInvalid,\n isValid,\n size = 'medium',\n form,\n } = props;\n\n const id = useId(props.id);\n\n let styles = extractStyles(props, PROP_STYLES);\n\n let { isFocused, focusProps } = useFocus({ isDisabled }, true);\n let { hoverProps, isHovered } = useHover({ isDisabled });\n\n let inputRef = useRef(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let { inputProps } = useSwitch(props, useToggleState(props), inputRef);\n\n const mods = {\n checked: inputProps.checked,\n disabled: isDisabled,\n hovered: isHovered,\n focused: isFocused,\n ...getValidationMods({ isInvalid, isValid }),\n 'inside-form': insideForm,\n 'side-label': labelPosition === 'side',\n };\n\n const switchField = (\n <SwitchWrapperElement\n qa=\"SwitchWrapper\"\n mods={mods}\n data-size={size}\n styles={styles}\n {...hoverProps}\n >\n <HiddenInput\n qa={qa \|\| 'Switch'}\n data-input-type=\"switch\"\n {...mergeProps(inputProps, focusProps)}\n ref={inputRef}\n id={id}\n />\n <SwitchElement mods={mods} data-size={size} styles={inputStyles}>\n <div data-element=\"Thumb\" aria-hidden=\"true\" />\n </SwitchElement>\n {children ? <Text nowrap>{children}</Text> : null}\n {isLoading ? (\n <>\n {label ? <> </> : null}\n <LoadingIcon />\n </>\n ) : null}\n </SwitchWrapperElement>\n );\n\n return wrapWithField(switchField, domRef, {\n ...props,\n id,\n labelProps: {\n ...props.labelProps,\n for: id,\n },\n children: null,\n inputStyles,\n });\n}\n\n/*\n Switches allow users to turn an individual option on or off.\n * They are usually used to activate or deactivate a specific setting.\n */\nlet _Switch = forwardRef(Switch);\n\n(_Switch as any).cubeInputType = 'Checkbox';\n_Switch.displayName = 'Switch';\n\nexport { _Switch as Switch };\nexport type { AriaSwitchProps };\nexport { useSwitch };\n"],"mappings":"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"}

package/dist/components/fields/TextArea/TextArea.js CHANGED Viewed

@@ -1,8 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
-import { useProviderProps } from "../../../provider.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { castNullableStringValue } from "../../../utils/react/nullableValue.js";
 import { TextInputBase } from "../TextInput/TextInputBase.js";
@@ -13,7 +12,6 @@ import { useTextField } from "react-aria";
 //#region src/components/fields/TextArea/TextArea.tsx
 function TextArea(props, ref) {
 	props = castNullableStringValue(props);
-	props = useProviderProps(props);
 	props = useFieldProps(props, {
 		defaultValidationTrigger: "onBlur",
 		valuePropsMapper: ({ value, onChange }) => ({

package/dist/components/fields/TextArea/TextArea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.js","names":["mergeProps"],"sources":["../../../../src/components/fields/TextArea/TextArea.tsx"],"sourcesContent":["import {\n ForwardedRef,\n forwardRef,\n useEffect,\n useLayoutEffect,\n useRef,\n} from 'react';\nimport { useTextField } from 'react-aria';\n\nimport { useEvent } from '../../../_internal/index';\nimport { ~~useProviderProps } from '../../../provider';\nimport {~~ chain, mergeProps } from '../../../utils/react';\nimport {\n castNullableStringValue,\n WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { useFieldProps } from '../../form';\nimport { CubeTextInputBaseProps, TextInputBase } from '../TextInput';\n\nexport interface CubeTextAreaProps extends CubeTextInputBaseProps {\n /** Whether the textarea should change its size depends on the content /\n autoSize?: boolean;\n /* Max number of visible rows when autoSize is `true`. Defaults to 10 /\n maxRows?: number;\n /* The `rows` attribute in HTML is used to specify the number of visible text lines for the\n * control i.e. the number of rows to display. Defaults to 3 /\n rows?: number;\n}\n\nfunction TextArea(\n props: WithNullableValue<CubeTextAreaProps>,\n ref: ForwardedRef<HTMLElement>,\n) {\n props = castNullableStringValue(props);\n props = ~~useProviderProps(props);\n props =~~ useFieldProps(props, {\n defaultValidationTrigger: 'onBlur',\n valuePropsMapper: ({ value, onChange }) => ({\n onChange,\n value: value?.toString() ?? '',\n }),\n });\n let {\n autoSize = false,\n isDisabled = false,\n isReadOnly = false,\n isRequired = false,\n onChange,\n maxRows = 10,\n rows = 3,\n labelProps: userLabelProps,\n inputRef: propsInputRef,\n value,\n ...otherProps\n } = props;\n\n rows = Math.max(rows, 1);\n maxRows = Math.max(maxRows, rows);\n\n let localInputRef = useRef<HTMLTextAreaElement>(null);\n let inputRef = propsInputRef ?? localInputRef;\n\n const adjustHeight = useEvent(() => {\n const textarea = inputRef.current;\n\n if (!textarea \|\| !autoSize) return;\n\n // Reset height to get the correct scrollHeight\n textarea.style.height = 'auto';\n\n // Get computed styles to account for padding\n const computedStyle = getComputedStyle(textarea);\n const paddingTop = parseFloat(computedStyle.paddingTop) \|\| 0;\n const paddingBottom = parseFloat(computedStyle.paddingBottom) \|\| 0;\n const borderTop = parseFloat(computedStyle.borderTopWidth) \|\| 0;\n const borderBottom = parseFloat(computedStyle.borderBottomWidth) \|\| 0;\n\n // Calculate line height (approximately)\n const lineHeight = parseInt(computedStyle.lineHeight) \|\| 20;\n\n // Calculate content height (excluding padding and border)\n const contentHeight = textarea.scrollHeight - paddingTop - paddingBottom;\n\n // Calculate rows based on content height\n const computedRows = Math.ceil(contentHeight / lineHeight);\n\n // Apply min/max constraints\n const targetRows = Math.max(Math.min(computedRows, maxRows), rows);\n\n // Set the height including padding and border\n const totalHeight =\n targetRows lineHeight +\n paddingTop +\n paddingBottom +\n borderTop +\n borderBottom;\n\n textarea.style.height = `${totalHeight}px`;\n });\n\n let { labelProps, inputProps } = useTextField(\n {\n ...otherProps,\n value,\n isDisabled,\n isReadOnly,\n isRequired,\n onChange: chain(onChange, adjustHeight),\n inputElementType: 'textarea',\n },\n inputRef,\n );\n\n // Merge user-provided labelProps with aria labelProps\n const mergedLabelProps = mergeProps(labelProps, userLabelProps);\n\n const useEnvironmentalEffect =\n typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\n // Also call adjustHeight on element resize as that can affect wrapping\n useEnvironmentalEffect(() => {\n if (!autoSize \|\| !inputRef.current) return;\n\n adjustHeight();\n\n const resizeObserver = new ResizeObserver(adjustHeight);\n\n resizeObserver.observe(inputRef?.current);\n\n return () => resizeObserver.disconnect();\n }, [autoSize, inputRef?.current]);\n\n // Adjust height when value changes programmatically (controlled mode with autoSize)\n useEnvironmentalEffect(() => {\n if (autoSize && inputRef.current) {\n adjustHeight();\n }\n }, [value]);\n\n return (\n <TextInputBase\n ref={ref}\n {...otherProps}\n multiLine\n inputRef={inputRef}\n labelProps={mergedLabelProps}\n inputProps={{ ...inputProps, 'data-input-type': 'textarea' }}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n isRequired={isRequired}\n rows={rows}\n />\n );\n}\n\n/*\n TextInputs are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nconst _TextArea = forwardRef(TextArea);\n\n(_TextArea as any).cubeInputType = 'Text';\n_TextArea.displayName = 'TextArea';\n\nexport { _TextArea as TextArea };\n"],"mappings":"~~;;;;;;;;;;;;;AA6BA~~,SAAS,SACP,OACA,KACA;AACA,SAAQ,wBAAwB,MAAM;AACtC,SAAQ,~~iBAAiB,MAAM;AAC/B,SAAQ,~~cAAc,OAAO;EAC3B,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GAC1C;GACA,OAAO,OAAO,UAAU,IAAI;GAC7B;EACF,CAAC;CACF,IAAI,EACF,WAAW,OACX,aAAa,OACb,aAAa,OACb,aAAa,OACb,UACA,UAAU,IACV,OAAO,GACP,YAAY,gBACZ,UAAU,eACV,OACA,GAAG,eACD;AAEJ,QAAO,KAAK,IAAI,MAAM,EAAE;AACxB,WAAU,KAAK,IAAI,SAAS,KAAK;CAEjC,IAAI,gBAAgB,OAA4B,KAAK;CACrD,IAAI,WAAW,iBAAiB;CAEhC,MAAM,eAAe,eAAe;EAClC,MAAM,WAAW,SAAS;AAE1B,MAAI,CAAC,YAAY,CAAC,SAAU;AAG5B,WAAS,MAAM,SAAS;EAGxB,MAAM,gBAAgB,iBAAiB,SAAS;EAChD,MAAM,aAAa,WAAW,cAAc,WAAW,IAAI;EAC3D,MAAM,gBAAgB,WAAW,cAAc,cAAc,IAAI;EACjE,MAAM,YAAY,WAAW,cAAc,eAAe,IAAI;EAC9D,MAAM,eAAe,WAAW,cAAc,kBAAkB,IAAI;EAGpE,MAAM,aAAa,SAAS,cAAc,WAAW,IAAI;EAGzD,MAAM,gBAAgB,SAAS,eAAe,aAAa;EAG3D,MAAM,eAAe,KAAK,KAAK,gBAAgB,WAAW;EAM1D,MAAM,cAHa,KAAK,IAAI,KAAK,IAAI,cAAc,QAAQ,EAAE,KAAK,GAInD,aACb,aACA,gBACA,YACA;AAEF,WAAS,MAAM,SAAS,GAAG,YAAY;GACvC;CAEF,IAAI,EAAE,YAAY,eAAe,aAC/B;EACE,GAAG;EACH;EACA;EACA;EACA;EACA,UAAU,MAAM,UAAU,aAAa;EACvC,kBAAkB;EACnB,EACD,SACD;CAGD,MAAM,mBAAmBA,aAAW,YAAY,eAAe;CAE/D,MAAM,yBACJ,OAAO,WAAW,cAAc,kBAAkB;AAGpD,8BAA6B;AAC3B,MAAI,CAAC,YAAY,CAAC,SAAS,QAAS;AAEpC,gBAAc;EAEd,MAAM,iBAAiB,IAAI,eAAe,aAAa;AAEvD,iBAAe,QAAQ,UAAU,QAAQ;AAEzC,eAAa,eAAe,YAAY;IACvC,CAAC,UAAU,UAAU,QAAQ,CAAC;AAGjC,8BAA6B;AAC3B,MAAI,YAAY,SAAS,QACvB,eAAc;IAEf,CAAC,MAAM,CAAC;AAEX,QACE,oBAAC;EACM;EACL,GAAI;EACJ;EACU;EACV,YAAY;EACZ,YAAY;GAAE,GAAG;GAAY,mBAAmB;GAAY;EAChD;EACA;EACA;EACN;GACN;;;;;;;AASN,MAAM,YAAY,WAAW,SAAS;AAEtC,AAAC,UAAkB,gBAAgB;AACnC,UAAU,cAAc"}
1	+ {"version":3,"file":"TextArea.js","names":["mergeProps"],"sources":["../../../../src/components/fields/TextArea/TextArea.tsx"],"sourcesContent":["import {\n ForwardedRef,\n forwardRef,\n useEffect,\n useLayoutEffect,\n useRef,\n} from 'react';\nimport { useTextField } from 'react-aria';\n\nimport { useEvent } from '../../../_internal/index';\nimport { chain, mergeProps } from '../../../utils/react';\nimport {\n castNullableStringValue,\n WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { useFieldProps } from '../../form';\nimport { CubeTextInputBaseProps, TextInputBase } from '../TextInput';\n\nexport interface CubeTextAreaProps extends CubeTextInputBaseProps {\n /** Whether the textarea should change its size depends on the content /\n autoSize?: boolean;\n /* Max number of visible rows when autoSize is `true`. Defaults to 10 /\n maxRows?: number;\n /* The `rows` attribute in HTML is used to specify the number of visible text lines for the\n * control i.e. the number of rows to display. Defaults to 3 /\n rows?: number;\n}\n\nfunction TextArea(\n props: WithNullableValue<CubeTextAreaProps>,\n ref: ForwardedRef<HTMLElement>,\n) {\n props = castNullableStringValue(props);\n props = useFieldProps(props, {\n defaultValidationTrigger: 'onBlur',\n valuePropsMapper: ({ value, onChange }) => ({\n onChange,\n value: value?.toString() ?? '',\n }),\n });\n let {\n autoSize = false,\n isDisabled = false,\n isReadOnly = false,\n isRequired = false,\n onChange,\n maxRows = 10,\n rows = 3,\n labelProps: userLabelProps,\n inputRef: propsInputRef,\n value,\n ...otherProps\n } = props;\n\n rows = Math.max(rows, 1);\n maxRows = Math.max(maxRows, rows);\n\n let localInputRef = useRef<HTMLTextAreaElement>(null);\n let inputRef = propsInputRef ?? localInputRef;\n\n const adjustHeight = useEvent(() => {\n const textarea = inputRef.current;\n\n if (!textarea \|\| !autoSize) return;\n\n // Reset height to get the correct scrollHeight\n textarea.style.height = 'auto';\n\n // Get computed styles to account for padding\n const computedStyle = getComputedStyle(textarea);\n const paddingTop = parseFloat(computedStyle.paddingTop) \|\| 0;\n const paddingBottom = parseFloat(computedStyle.paddingBottom) \|\| 0;\n const borderTop = parseFloat(computedStyle.borderTopWidth) \|\| 0;\n const borderBottom = parseFloat(computedStyle.borderBottomWidth) \|\| 0;\n\n // Calculate line height (approximately)\n const lineHeight = parseInt(computedStyle.lineHeight) \|\| 20;\n\n // Calculate content height (excluding padding and border)\n const contentHeight = textarea.scrollHeight - paddingTop - paddingBottom;\n\n // Calculate rows based on content height\n const computedRows = Math.ceil(contentHeight / lineHeight);\n\n // Apply min/max constraints\n const targetRows = Math.max(Math.min(computedRows, maxRows), rows);\n\n // Set the height including padding and border\n const totalHeight =\n targetRows lineHeight +\n paddingTop +\n paddingBottom +\n borderTop +\n borderBottom;\n\n textarea.style.height = `${totalHeight}px`;\n });\n\n let { labelProps, inputProps } = useTextField(\n {\n ...otherProps,\n value,\n isDisabled,\n isReadOnly,\n isRequired,\n onChange: chain(onChange, adjustHeight),\n inputElementType: 'textarea',\n },\n inputRef,\n );\n\n // Merge user-provided labelProps with aria labelProps\n const mergedLabelProps = mergeProps(labelProps, userLabelProps);\n\n const useEnvironmentalEffect =\n typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\n // Also call adjustHeight on element resize as that can affect wrapping\n useEnvironmentalEffect(() => {\n if (!autoSize \|\| !inputRef.current) return;\n\n adjustHeight();\n\n const resizeObserver = new ResizeObserver(adjustHeight);\n\n resizeObserver.observe(inputRef?.current);\n\n return () => resizeObserver.disconnect();\n }, [autoSize, inputRef?.current]);\n\n // Adjust height when value changes programmatically (controlled mode with autoSize)\n useEnvironmentalEffect(() => {\n if (autoSize && inputRef.current) {\n adjustHeight();\n }\n }, [value]);\n\n return (\n <TextInputBase\n ref={ref}\n {...otherProps}\n multiLine\n inputRef={inputRef}\n labelProps={mergedLabelProps}\n inputProps={{ ...inputProps, 'data-input-type': 'textarea' }}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n isRequired={isRequired}\n rows={rows}\n />\n );\n}\n\n/*\n TextInputs are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nconst _TextArea = forwardRef(TextArea);\n\n(_TextArea as any).cubeInputType = 'Text';\n_TextArea.displayName = 'TextArea';\n\nexport { _TextArea as TextArea };\n"],"mappings":";;;;;;;;;;;;AA4BA,SAAS,SACP,OACA,KACA;AACA,SAAQ,wBAAwB,MAAM;AACtC,SAAQ,cAAc,OAAO;EAC3B,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GAC1C;GACA,OAAO,OAAO,UAAU,IAAI;GAC7B;EACF,CAAC;CACF,IAAI,EACF,WAAW,OACX,aAAa,OACb,aAAa,OACb,aAAa,OACb,UACA,UAAU,IACV,OAAO,GACP,YAAY,gBACZ,UAAU,eACV,OACA,GAAG,eACD;AAEJ,QAAO,KAAK,IAAI,MAAM,EAAE;AACxB,WAAU,KAAK,IAAI,SAAS,KAAK;CAEjC,IAAI,gBAAgB,OAA4B,KAAK;CACrD,IAAI,WAAW,iBAAiB;CAEhC,MAAM,eAAe,eAAe;EAClC,MAAM,WAAW,SAAS;AAE1B,MAAI,CAAC,YAAY,CAAC,SAAU;AAG5B,WAAS,MAAM,SAAS;EAGxB,MAAM,gBAAgB,iBAAiB,SAAS;EAChD,MAAM,aAAa,WAAW,cAAc,WAAW,IAAI;EAC3D,MAAM,gBAAgB,WAAW,cAAc,cAAc,IAAI;EACjE,MAAM,YAAY,WAAW,cAAc,eAAe,IAAI;EAC9D,MAAM,eAAe,WAAW,cAAc,kBAAkB,IAAI;EAGpE,MAAM,aAAa,SAAS,cAAc,WAAW,IAAI;EAGzD,MAAM,gBAAgB,SAAS,eAAe,aAAa;EAG3D,MAAM,eAAe,KAAK,KAAK,gBAAgB,WAAW;EAM1D,MAAM,cAHa,KAAK,IAAI,KAAK,IAAI,cAAc,QAAQ,EAAE,KAAK,GAInD,aACb,aACA,gBACA,YACA;AAEF,WAAS,MAAM,SAAS,GAAG,YAAY;GACvC;CAEF,IAAI,EAAE,YAAY,eAAe,aAC/B;EACE,GAAG;EACH;EACA;EACA;EACA;EACA,UAAU,MAAM,UAAU,aAAa;EACvC,kBAAkB;EACnB,EACD,SACD;CAGD,MAAM,mBAAmBA,aAAW,YAAY,eAAe;CAE/D,MAAM,yBACJ,OAAO,WAAW,cAAc,kBAAkB;AAGpD,8BAA6B;AAC3B,MAAI,CAAC,YAAY,CAAC,SAAS,QAAS;AAEpC,gBAAc;EAEd,MAAM,iBAAiB,IAAI,eAAe,aAAa;AAEvD,iBAAe,QAAQ,UAAU,QAAQ;AAEzC,eAAa,eAAe,YAAY;IACvC,CAAC,UAAU,UAAU,QAAQ,CAAC;AAGjC,8BAA6B;AAC3B,MAAI,YAAY,SAAS,QACvB,eAAc;IAEf,CAAC,MAAM,CAAC;AAEX,QACE,oBAAC;EACM;EACL,GAAI;EACJ;EACU;EACV,YAAY;EACZ,YAAY;GAAE,GAAG;GAAY,mBAAmB;GAAY;EAChD;EACA;EACA;EACN;GACN;;;;;;;AASN,MAAM,YAAY,WAAW,SAAS;AAEtC,AAAC,UAAkB,gBAAgB;AACnC,UAAU,cAAc"}

package/dist/components/fields/TextInput/TextInput.js CHANGED Viewed

@@ -1,6 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
-import { useProviderProps } from "../../../provider.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { castNullableStringValue } from "../../../utils/react/nullableValue.js";
 import { TextInputBase } from "./TextInputBase.js";
@@ -11,7 +10,6 @@ import { useTextField as useTextField$1 } from "react-aria";
 //#region src/components/fields/TextInput/TextInput.tsx
 const TextInput = forwardRef(function TextInput(props, ref) {
 	props = castNullableStringValue(props);
-	props = useProviderProps(props);
 	props = useFieldProps(props, {
 		defaultValidationTrigger: "onBlur",
 		valuePropsMapper: ({ value, onChange }) => ({

package/dist/components/fields/TextInput/TextInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextInput.js","names":["useTextField","mergeProps"],"sources":["../../../../src/components/fields/TextInput/TextInput.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, useRef } from 'react';\nimport { useTextField } from 'react-aria';\n\nimport { ~~useProviderProps } from '../../../provider';\nimport {~~ mergeProps } from '../../../utils/react';\nimport {\n castNullableStringValue,\n WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { useFieldProps } from '../../form';\n\nimport { CubeTextInputBaseProps, TextInputBase } from './TextInputBase';\n\nexport type CubeTextInputProps = WithNullableValue<CubeTextInputBaseProps>;\n\nexport { useTextField };\n\nexport const TextInput = forwardRef(function TextInput(\n props: CubeTextInputProps,\n ref: ForwardedRef<HTMLElement>,\n) {\n props = castNullableStringValue(props);\n props = ~~useProviderProps(props);\n props =~~ useFieldProps(props, {\n defaultValidationTrigger: 'onBlur',\n valuePropsMapper: ({ value, onChange }) => ({\n onChange,\n value: value?.toString() ?? '',\n }),\n });\n\n let {\n labelProps: userLabelProps,\n inputRef: propsInputRef,\n form,\n ...restProps\n } = props;\n let localInputRef = useRef<HTMLTextAreaElement \| HTMLInputElement>(null);\n let inputRef = propsInputRef ?? localInputRef;\n\n let { labelProps, inputProps } = useTextField(restProps, inputRef);\n\n // Merge user-provided labelProps with aria labelProps\n const mergedLabelProps = mergeProps(labelProps, userLabelProps);\n\n return (\n <TextInputBase\n {...restProps}\n ref={ref}\n labelProps={mergedLabelProps}\n inputProps={inputProps}\n inputRef={inputRef}\n />\n );\n});\n\n/*\n TextInputs are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\n\n(TextInput as any).cubeInputType = 'Text';\n"],"mappings":"~~;;;;;;;;;;;AAiBA~~,MAAa,YAAY,WAAW,SAAS,UAC3C,OACA,KACA;AACA,SAAQ,wBAAwB,MAAM;AACtC,SAAQ,~~iBAAiB,MAAM;AAC/B,SAAQ,~~cAAc,OAAO;EAC3B,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GAC1C;GACA,OAAO,OAAO,UAAU,IAAI;GAC7B;EACF,CAAC;CAEF,IAAI,EACF,YAAY,gBACZ,UAAU,eACV,MACA,GAAG,cACD;CACJ,IAAI,gBAAgB,OAA+C,KAAK;CACxE,IAAI,WAAW,iBAAiB;CAEhC,IAAI,EAAE,YAAY,eAAeA,eAAa,WAAW,SAAS;CAGlE,MAAM,mBAAmBC,aAAW,YAAY,eAAe;AAE/D,QACE,oBAAC;EACC,GAAI;EACC;EACL,YAAY;EACA;EACF;GACV;EAEJ;;;;;;AAQF,AAAC,UAAkB,gBAAgB"}
1	+ {"version":3,"file":"TextInput.js","names":["useTextField","mergeProps"],"sources":["../../../../src/components/fields/TextInput/TextInput.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, useRef } from 'react';\nimport { useTextField } from 'react-aria';\n\nimport { mergeProps } from '../../../utils/react';\nimport {\n castNullableStringValue,\n WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { useFieldProps } from '../../form';\n\nimport { CubeTextInputBaseProps, TextInputBase } from './TextInputBase';\n\nexport type CubeTextInputProps = WithNullableValue<CubeTextInputBaseProps>;\n\nexport { useTextField };\n\nexport const TextInput = forwardRef(function TextInput(\n props: CubeTextInputProps,\n ref: ForwardedRef<HTMLElement>,\n) {\n props = castNullableStringValue(props);\n props = useFieldProps(props, {\n defaultValidationTrigger: 'onBlur',\n valuePropsMapper: ({ value, onChange }) => ({\n onChange,\n value: value?.toString() ?? '',\n }),\n });\n\n let {\n labelProps: userLabelProps,\n inputRef: propsInputRef,\n form,\n ...restProps\n } = props;\n let localInputRef = useRef<HTMLTextAreaElement \| HTMLInputElement>(null);\n let inputRef = propsInputRef ?? localInputRef;\n\n let { labelProps, inputProps } = useTextField(restProps, inputRef);\n\n // Merge user-provided labelProps with aria labelProps\n const mergedLabelProps = mergeProps(labelProps, userLabelProps);\n\n return (\n <TextInputBase\n {...restProps}\n ref={ref}\n labelProps={mergedLabelProps}\n inputProps={inputProps}\n inputRef={inputRef}\n />\n );\n});\n\n/*\n TextInputs are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\n\n(TextInput as any).cubeInputType = 'Text';\n"],"mappings":";;;;;;;;;;AAgBA,MAAa,YAAY,WAAW,SAAS,UAC3C,OACA,KACA;AACA,SAAQ,wBAAwB,MAAM;AACtC,SAAQ,cAAc,OAAO;EAC3B,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GAC1C;GACA,OAAO,OAAO,UAAU,IAAI;GAC7B;EACF,CAAC;CAEF,IAAI,EACF,YAAY,gBACZ,UAAU,eACV,MACA,GAAG,cACD;CACJ,IAAI,gBAAgB,OAA+C,KAAK;CACxE,IAAI,WAAW,iBAAiB;CAEhC,IAAI,EAAE,YAAY,eAAeA,eAAa,WAAW,SAAS;CAGlE,MAAM,mBAAmBC,aAAW,YAAY,eAAe;AAE/D,QACE,oBAAC;EACC,GAAI;EACC;EACL,YAAY;EACA;EACF;GACV;EAEJ;;;;;;AAQF,AAAC,UAAkB,gBAAgB"}