@cube-dev/ui-kit 0.114.0 → 0.115.0

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

@@ -0,0 +1,61 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { Gradation } from "./Gradation.js";
+import { _SliderBase } from "./SliderBase.js";
+import { SliderThumb } from "./SliderThumb.js";
+import { SliderTrack } from "./SliderTrack.js";
+import { forwardRef, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/fields/Slider/RangeSlider.tsx
+const INTL_MESSAGES = {
+	minimum: "Minimum",
+	maximum: "Maximum"
+};
+function RangeSlider(props, ref) {
+	let { isDisabled, styles, gradation, ...otherProps } = props;
+	const minThumbInputRef = useRef(null);
+	const maxThumbInputRef = useRef(null);
+	return /* @__PURE__ */ jsx(_SliderBase, {
+		ref,
+		...otherProps,
+		children: ({ trackRef, inputRef, state }) => {
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(Gradation, {
+					state,
+					ranges: [0, 1],
+					values: gradation
+				}),
+				/* @__PURE__ */ jsx(SliderTrack, {
+					state,
+					isDisabled,
+					orientation: props.orientation
+				}),
+				/* @__PURE__ */ jsx(SliderThumb, {
+					index: 0,
+					"aria-label": INTL_MESSAGES["minimum"],
+					state,
+					inputRef: minThumbInputRef,
+					trackRef,
+					isDisabled
+				}),
+				/* @__PURE__ */ jsx(SliderThumb, {
+					index: 1,
+					"aria-label": INTL_MESSAGES["maximum"],
+					state,
+					inputRef: maxThumbInputRef,
+					trackRef,
+					isDisabled
+				})
+			] });
+		}
+	});
+}
+const _RangeSlider = forwardRef(RangeSlider);
+const __RangeSlider = Object.assign(_RangeSlider, {
+	cubeInputType: "Number",
+	displayName: "RangeSlider"
+});
+
+//#endregion
+export { __RangeSlider };
+//# sourceMappingURL=RangeSlider.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,25 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import { Tokens } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import { CubeSliderBaseProps } from "./types.js";
+import * as react from "react";
+import * as _react_types_shared0 from "@react-types/shared";
+
+//#region src/components/fields/Slider/Slider.d.ts
+interface CubeSliderProps extends CubeSliderBaseProps<number> {
+  gradation?: string[];
+  /** Custom styles for the track element */
+  trackStyles?: Styles;
+  /** Custom styles for the thumb element */
+  thumbStyles?: Styles;
+  /** Custom tokens for the thumb element (e.g., #slider-thumb for fill color) */
+  thumbTokens?: Tokens;
+}
+declare const __Slider: react.ForwardRefExoticComponent<Omit<CubeSliderProps, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLDivElement, HTMLDivElement>>> & {
+  cubeInputType: string;
+  displayName: string;
+};
+//#endregion
+export { CubeSliderProps, __Slider };
+//# sourceMappingURL=Slider.d.ts.map

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

@@ -0,0 +1,67 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles } from "../../../tasty/utils/styles.js";
+import { OUTER_STYLES } from "../../../tasty/styles/list.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 { 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 }) => {
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(Gradation, {
+					state,
+					ranges: [0, 1],
+					values: gradation
+				}),
+				/* @__PURE__ */ jsx(SliderTrack, {
+					state,
+					isDisabled,
+					orientation,
+					styles: trackStyles
+				}),
+				/* @__PURE__ */ jsx(SliderThumb, {
+					index: 0,
+					state,
+					inputRef,
+					trackRef,
+					isDisabled,
+					styles: thumbStyles,
+					tokens: thumbTokens
+				})
+			] });
+		}
+	});
+}
+const _Slider = forwardRef(Slider);
+const __Slider = Object.assign(_Slider, {
+	cubeInputType: "Number",
+	displayName: "Slider"
+});
+
+//#endregion
+export { __Slider };
+//# sourceMappingURL=Slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","names":["SliderBase"],"sources":["../../../../src/components/fields/Slider/Slider.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { extractStyles, OUTER_STYLES, Styles, Tokens } from '../../../tasty';\nimport { mergeProps } from '../../../utils/react/index';\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":";;;;;;;;;;;;AA2BA,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"}

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

@@ -0,0 +1,119 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles } from "../../../tasty/utils/styles.js";
+import { OUTER_STYLES } from "../../../tasty/styles/list.js";
+import { tasty } from "../../../tasty/tasty.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 { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
+import { wrapWithField } from "../../form/wrapper.js";
+import { SliderControlsElement, SliderElement } from "./elements.js";
+import { useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useNumberFormatter, useSlider } from "react-aria";
+import { useFocusableRef } from "@react-spectrum/utils";
+import { useSliderState } from "react-stately";
+
+//#region src/components/fields/Slider/SliderBase.tsx
+const LabelValueElement = tasty(_Text, { styles: {
+	display: "block",
+	textAlign: "right"
+} });
+function SliderBase(allProps, ref) {
+	let props = useFormProps(allProps);
+	props = useFieldProps(props, {
+		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 orientation = allProps.orientation || "horizontal";
+	if (Math.abs(Math.sign(minValue) - Math.sign(maxValue)) === 2) if (formatOptions != null) {
+		if (!("signDisplay" in formatOptions)) formatOptions = {
+			...formatOptions,
+			signDisplay: "exceptZero"
+		};
+	} else formatOptions = { signDisplay: "exceptZero" };
+	const formatter = useNumberFormatter(formatOptions);
+	const state = useSliderState({
+		...props,
+		orientation,
+		numberFormatter: formatter,
+		minValue,
+		maxValue
+	});
+	const trackRef = useRef(null);
+	let { groupProps, trackProps, labelProps, outputProps } = useSlider(props, state, trackRef);
+	const inputRef = useRef(null);
+	let domRef = useFocusableRef(ref, inputRef);
+	let displayValue = "";
+	let maxLabelLength = 0;
+	if (typeof getValueLabel === "function") {
+		displayValue = getValueLabel(state.values);
+		switch (state.values.length) {
+			case 1:
+				maxLabelLength = Math.max(getValueLabel([minValue]).length, getValueLabel([maxValue]).length);
+				break;
+			case 2:
+				maxLabelLength = Math.max(getValueLabel([minValue, minValue]).length, getValueLabel([minValue, maxValue]).length, getValueLabel([maxValue, minValue]).length, getValueLabel([maxValue, maxValue]).length);
+				break;
+			default: throw new Error("Only sliders with 1 or 2 handles are supported!");
+		}
+	} else {
+		maxLabelLength = Math.max([...formatter.format(minValue)].length, [...formatter.format(maxValue)].length);
+		switch (state.values.length) {
+			case 1:
+				displayValue = state.getThumbValueLabel(0);
+				break;
+			case 2:
+				displayValue = `${state.getThumbValueLabel(0)} – ${state.getThumbValueLabel(1)}`;
+				maxLabelLength = 3 + 2 * Math.max(maxLabelLength, [...formatter.format(minValue)].length, [...formatter.format(maxValue)].length);
+				break;
+			default: throw new Error("Only sliders with 1 or 2 handles are supported!");
+		}
+	}
+	extra = extra != null || !showValueLabel ? extra : /* @__PURE__ */ jsx(LabelValueElement, {
+		...outputProps,
+		style: maxLabelLength ? {
+			width: `${maxLabelLength + 1}ch`,
+			minWidth: `${maxLabelLength + 1}ch`
+		} : void 0,
+		children: displayValue
+	});
+	const mods = useMemo(() => ({
+		"side-label": labelPosition === "side",
+		horizontal: orientation === "horizontal"
+	}), [labelPosition, orientation]);
+	styles = extractStyles(otherProps, OUTER_STYLES, styles);
+	return wrapWithField(/* @__PURE__ */ jsx(SliderElement, {
+		ref: domRef,
+		id: props.id,
+		...groupProps,
+		mods,
+		styles,
+		"data-input-type": "slider",
+		children: /* @__PURE__ */ jsx(SliderControlsElement, {
+			...trackProps,
+			ref: trackRef,
+			mods,
+			children: children({
+				trackRef,
+				inputRef,
+				state
+			})
+		})
+	}), ref, {
+		...props,
+		extra,
+		labelProps: mergeProps$1(labelProps, userLabelProps)
+	});
+}
+const _SliderBase = forwardRefWithGenerics(SliderBase);
+_SliderBase.displayName = "SliderBase";
+
+//#endregion
+export { _SliderBase };
+//# sourceMappingURL=SliderBase.js.map

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

@@ -0,0 +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 {\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 { extractStyles, OUTER_STYLES, tasty } from '../../../tasty';\nimport { forwardRefWithGenerics, mergeProps } from '../../../utils/react';\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":"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"}

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

@@ -0,0 +1,51 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { SliderThumbElement } from "./elements.js";
+import { useMemo, 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) {
+	let { state, index, inputRef, isDisabled, styles, tokens } = props;
+	const backupRef = useRef(null);
+	inputRef = inputRef || backupRef;
+	const { thumbProps, inputProps, isDragging, isFocused } = useSliderThumb({
+		...props,
+		inputRef
+	}, state);
+	const { hoverProps, isHovered } = useHover({ isDisabled });
+	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
+			};
+		}, [
+			isHovered,
+			isCollapsed,
+			isStuck,
+			isDragging,
+			isFocused,
+			isDisabled
+		]),
+		styles,
+		tokens,
+		...mergeProps$1(thumbProps, hoverProps),
+		role: "presentation",
+		children: /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", {
+			ref: inputRef,
+			...inputProps
+		}) })
+	});
+}
+
+//#endregion
+export { SliderThumb };
+//# sourceMappingURL=SliderThumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SliderThumb.js","names":["mergeProps"],"sources":["../../../../src/components/fields/Slider/SliderThumb.tsx"],"sourcesContent":["import { RefObject, useMemo, useRef } from 'react';\nimport {\n  AriaSliderThumbOptions,\n  useHover,\n  useSliderThumb,\n  VisuallyHidden,\n} from 'react-aria';\n\nimport { Styles, Tokens } from '../../../tasty';\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"}

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

@@ -0,0 +1,27 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+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 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]),
+		styles,
+		style: showRangeTrack ? {
+			"--slider-range-start": `${selectedTrack[0] * 100}%`,
+			"--slider-range-end": `${selectedTrack[1] * 100}%`
+		} : { "--slider-value": `${selectedTrack[0] * 100}%` }
+	});
+}
+
+//#endregion
+export { SliderTrack };
+//# sourceMappingURL=SliderTrack.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SliderTrack.js","names":[],"sources":["../../../../src/components/fields/Slider/SliderTrack.tsx"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { Styles } from '../../../tasty';\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":";;;;;;AAeA,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"}

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

@@ -0,0 +1,152 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+
+//#region src/components/fields/Slider/elements.ts
+const SliderThumbElement = tasty({
+	qa: "SliderThumb",
+	styles: {
+		top: "$slider-thumb-offset-top",
+		left: "$slider-thumb-offset-left",
+		width: "2x",
+		height: "2x",
+		fill: {
+			"": "(#slider-thumb, #primary)",
+			hovered: "(#slider-thumb-hovered, #primary-text)",
+			dragged: "(#slider-thumb, #primary)",
+			disabled: "#dark-04"
+		},
+		cursor: "$pointer",
+		outline: {
+			"": "1bw #primary-text.0",
+			focused: "1bw #primary-text"
+		},
+		outlineOffset: 1,
+		radius: "50%",
+		transition: "theme",
+		zIndex: {
+			"": 0,
+			"collapsed & !stuck": 1
+		}
+	}
+});
+const SliderTrackContainerElement = tasty({
+	qa: "SliderTrackContainer",
+	styles: {
+		top: {
+			"": "0",
+			horizontal: "0.875x"
+		},
+		left: {
+			"": "0.875x",
+			horizontal: "0"
+		},
+		position: "absolute",
+		fill: "#dark-05",
+		height: {
+			"": "initial 10x 100%",
+			horizontal: "2px"
+		},
+		width: {
+			"": "2px",
+			horizontal: "100%"
+		},
+		radius: true,
+		Fill: {
+			$: "::before",
+			content: "\"\"",
+			display: "block",
+			position: "absolute",
+			inset: {
+				"": "auto 0 0 0",
+				horizontal: "0 auto 0 0",
+				range: "auto 0 $slider-range-start 0",
+				"range & horizontal": "0 auto 0 $slider-range-start"
+			},
+			fill: "#primary",
+			width: {
+				"": "auto",
+				horizontal: "$slider-value",
+				range: "auto",
+				"range & horizontal": "($slider-range-end - $slider-range-start)"
+			},
+			height: {
+				"": "$slider-value",
+				horizontal: "auto",
+				range: "($slider-range-end - $slider-range-start)",
+				"range & horizontal": "auto"
+			}
+		}
+	}
+});
+const SliderGradationElement = tasty({
+	qa: "SliderGradation",
+	styles: {
+		position: "absolute",
+		top: "2x",
+		left: 0,
+		right: 0,
+		display: "flex",
+		placeContent: "space-between"
+	}
+});
+const SliderGradeElement = tasty({
+	qa: "SliderGrade",
+	styles: {
+		display: "grid",
+		width: "max 0",
+		placeContent: "center",
+		preset: "c2",
+		color: "#dark-03"
+	}
+});
+const SliderControlsElement = tasty({
+	qa: "SliderControls",
+	styles: {
+		position: "relative",
+		height: {
+			"": "initial 8x 100%",
+			horizontal: "2x"
+		},
+		width: {
+			"": "2x",
+			horizontal: "(100% - 2x)"
+		},
+		"$slider-thumb-offset-top": {
+			"": "0",
+			horizontal: "1x"
+		},
+		"$slider-thumb-offset-left": {
+			"": "1x",
+			horizontal: "0"
+		}
+	}
+});
+const SliderElement = tasty({
+	qa: "RangeSlider",
+	as: "section",
+	styles: {
+		display: "inline-flex",
+		verticalAlign: {
+			"": "middle",
+			"side-label & !horizontal": "top"
+		},
+		position: "relative",
+		height: {
+			"": "initial 10x 100%",
+			horizontal: "2x"
+		},
+		width: {
+			"": "2x",
+			horizontal: "100%"
+		},
+		alignItems: "center",
+		flow: {
+			"": "column",
+			inputs: "row"
+		}
+	}
+});
+
+//#endregion
+export { SliderControlsElement, SliderElement, SliderGradationElement, SliderGradeElement, SliderThumbElement, SliderTrackContainerElement };
+//# sourceMappingURL=elements.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"elements.js","names":[],"sources":["../../../../src/components/fields/Slider/elements.ts"],"sourcesContent":["import { tasty } from '../../../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: '#dark-04',\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: '#primary',\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;GACN,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.d.ts

@@ -0,0 +1,7 @@
+
+import { AriaSliderProps, CubeSliderBaseProps } from "./types.js";
+import { CubeRangeSliderProps, __RangeSlider } from "./RangeSlider.js";
+import { CubeSliderProps, __Slider } from "./Slider.js";
+import { CubeHueSliderProps, __HueSlider } from "./HueSlider.js";
+import { SliderState, useSliderState as useSliderState$1 } from "react-stately";
+export { type SliderState, useSliderState$1 as useSliderState };

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

@@ -0,0 +1,7 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { __RangeSlider } from "./RangeSlider.js";
+import { __Slider } from "./Slider.js";
+import { __HueSlider } from "./HueSlider.js";
+import { useSliderState as useSliderState$1 } from "react-stately";
+
+export { useSliderState$1 as useSliderState };

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

@@ -0,0 +1,25 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import { BasePropsWithoutChildren, BlockStyleProps, OuterStyleProps } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import { FieldBaseProps } from "../../../shared/form.js";
+import "../../../shared/index.js";
+import { AriaSliderProps } from "react-aria";
+
+//#region src/components/fields/Slider/types.d.ts
+interface CubeSliderBaseProps<T> extends Omit<AriaSliderProps<T>, 'label'>, BasePropsWithoutChildren, OuterStyleProps, FieldBaseProps, BlockStyleProps {
+  inputStyles?: Styles;
+  gradation?: string[];
+  inputWidth?: string;
+  /**
+   * The display format of the value label.
+   */
+  formatOptions?: Intl.NumberFormatOptions;
+  /** Whether the value's label is displayed. True by default if there's a `label`, false by default if not. */
+  showValueLabel?: boolean;
+  /** A function that returns the content to display as the value's label. Overrides default formatted number. */
+  getValueLabel?: (value: T) => string;
+}
+//#endregion
+export { type AriaSliderProps, CubeSliderBaseProps };
+//# sourceMappingURL=types.d.ts.map

package/dist/components/fields/Switch/Switch.d.ts

@@ -0,0 +1,26 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import { BaseProps, BlockStyleProps, OuterStyleProps } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import { FieldBaseProps } from "../../../shared/form.js";
+import "../../../shared/index.js";
+import * as react from "react";
+import { AriaSwitchProps, useSwitch } from "react-aria";
+
+//#region src/components/fields/Switch/Switch.d.ts
+interface CubeSwitchProps extends BaseProps, OuterStyleProps, BlockStyleProps, FieldBaseProps, AriaSwitchProps {
+  inputStyles?: Styles;
+  isLoading?: boolean;
+  size?: 'large' | 'medium' | 'small';
+}
+/**
+ * Switches allow users to turn an individual option on or off.
+ * They are usually used to activate or deactivate a specific setting.
+ */
+declare let _Switch: react.ForwardRefExoticComponent<Omit<CubeSwitchProps, "isSelected" | "defaultSelected"> & {
+  isSelected?: T["isSelected"] | any;
+  defaultSelected?: T["defaultSelected"] | any;
+} & react.RefAttributes<unknown>>;
+//#endregion
+export { type AriaSwitchProps, CubeSwitchProps, _Switch, useSwitch };
+//# sourceMappingURL=Switch.d.ts.map