@drivy/cobalt 2.0.0-beta.1 → 2.0.0-beta.2
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.
- package/components/Form/Slider.js +40 -3
- package/components/Form/Slider.js.map +1 -1
- package/helpers/index.js +14 -0
- package/helpers/index.js.map +1 -0
- package/index.js +1 -0
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/styles/components/Form/Slider.scss +46 -5
- package/types/src/components/Form/Slider.d.ts +5 -1
- package/types/src/helpers/index.d.ts +4 -0
- package/types/src/index.d.ts +1 -0
|
@@ -1,9 +1,12 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
1
|
+
import React, { useState, useMemo } from 'react';
|
|
2
2
|
import { Slider as Slider$1 } from '@ark-ui/react';
|
|
3
3
|
import cx from 'classnames';
|
|
4
4
|
import { FieldWrapper } from './field.js';
|
|
5
5
|
|
|
6
|
-
const
|
|
6
|
+
const MIN_BAR_HEIGHT_PERCENT = 3;
|
|
7
|
+
const Slider = ({ defaultValue: _defaultValue, value: _value, min, max, disabled, onValueChange, renderValue, ariaLabel, hint, label, status, className, step, bars, ...restProps }) => {
|
|
8
|
+
const sliderMinValue = min || 0;
|
|
9
|
+
const sliderMaxValue = max || 100;
|
|
7
10
|
const value = Array.isArray(_value)
|
|
8
11
|
? _value
|
|
9
12
|
: _value !== undefined && !isNaN(_value)
|
|
@@ -24,11 +27,34 @@ const Slider = ({ defaultValue: _defaultValue, value: _value, min, max, disabled
|
|
|
24
27
|
return [0];
|
|
25
28
|
}
|
|
26
29
|
const [sliderValue, setSliderValue] = useState(() => initValue());
|
|
30
|
+
const barsData = useMemo(() => {
|
|
31
|
+
if (!bars || bars.step <= 0 || sliderMinValue >= sliderMaxValue)
|
|
32
|
+
return null;
|
|
33
|
+
const barsCount = (sliderMaxValue - sliderMinValue) / bars.step;
|
|
34
|
+
let maxBars = 0;
|
|
35
|
+
const rawValues = [];
|
|
36
|
+
for (let i = 0; i < barsCount; i++) {
|
|
37
|
+
const binValue = bars.bins[i * bars.step + sliderMinValue];
|
|
38
|
+
if (binValue) {
|
|
39
|
+
maxBars = Math.max(maxBars, binValue);
|
|
40
|
+
rawValues.push(binValue);
|
|
41
|
+
}
|
|
42
|
+
else {
|
|
43
|
+
rawValues.push(0);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
if (maxBars === 0) {
|
|
47
|
+
return rawValues.map(() => 0); // all values are zero, so all bars are 0%
|
|
48
|
+
}
|
|
49
|
+
const scaleFactor = 100 - MIN_BAR_HEIGHT_PERCENT;
|
|
50
|
+
return rawValues.map((v) => v > 0 ? (v / maxBars) * scaleFactor + MIN_BAR_HEIGHT_PERCENT : 0);
|
|
51
|
+
}, [bars, sliderMinValue, sliderMaxValue]);
|
|
27
52
|
return (React.createElement(FieldWrapper, { ...restProps, status: status, label: label, hint: hint },
|
|
28
53
|
React.createElement(Slider$1.Root, { ...restProps, className: cx("cobalt-slider", className, {
|
|
29
54
|
"cobalt-slider--disabled": disabled,
|
|
30
55
|
"cobalt-slider--withHint": hint,
|
|
31
|
-
|
|
56
|
+
"cobalt-slider--withBars": !!bars,
|
|
57
|
+
}), thumbAlignment: "contain", disabled: disabled, "aria-label": [ariaLabel], value: sliderValue, min: min, max: max, step: step,
|
|
32
58
|
// Need to force disbplaying in smaller spaces like popovers
|
|
33
59
|
thumbSize: {
|
|
34
60
|
width: 24,
|
|
@@ -41,6 +67,17 @@ const Slider = ({ defaultValue: _defaultValue, value: _value, min, max, disabled
|
|
|
41
67
|
React.createElement(Slider$1.Label, { className: FieldWrapper.labelClassName }, label),
|
|
42
68
|
renderValue && (React.createElement("div", { className: "cobalt-slider__value-container" }, renderValue((sliderValue.length === 1 ? sliderValue[0] : sliderValue), status))),
|
|
43
69
|
React.createElement(Slider$1.Control, null,
|
|
70
|
+
React.createElement("div", { className: "cobalt-slider__bars" }, barsData &&
|
|
71
|
+
barsData.map((val, i) => {
|
|
72
|
+
const barsStep = (bars === null || bars === void 0 ? void 0 : bars.step) || 1;
|
|
73
|
+
return (React.createElement("div", { key: i, className: cx("cobalt-slider__bar", {
|
|
74
|
+
"cobalt-slider__bar--active": i * barsStep + sliderMinValue >= sliderValue[0] &&
|
|
75
|
+
(i + 1) * barsStep + sliderMinValue <= sliderValue[1],
|
|
76
|
+
}), style: {
|
|
77
|
+
width: `calc(${100 / barsData.length}%)`,
|
|
78
|
+
height: `${val}%`,
|
|
79
|
+
} }));
|
|
80
|
+
})),
|
|
44
81
|
React.createElement(Slider$1.Track, null,
|
|
45
82
|
React.createElement(Slider$1.Range, null)),
|
|
46
83
|
sliderValue.map((_v, i) => (React.createElement(Slider$1.Thumb, { key: i, index: i },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sources":["../../../src/components/Form/Slider.tsx"],"sourcesContent":["import React, { PropsWithChildren, useState } from \"react\"\nimport { Slider as ArkSlider, SliderRootProps } from \"@ark-ui/react\"\nimport cx from \"classnames\"\nimport { FieldWrapper, FieldWrapperProps } from \"./field\"\n\nexport type SliderPropsType<T extends number | number[]> = {\n /**\n * mandatory for A11y\n */\n value?: T\n defaultValue?: T\n ariaLabel: string\n /**\n * values interval\n */\n step?: number\n disabled?: boolean\n /**\n * Listener called when the value is changed\n */\n onValueChange?: (newValue: T) => void\n /**\n * Function used to visually display the slider value\n */\n renderValue?: (\n value: T,\n status: FieldWrapperProps[\"status\"]\n ) => React.ReactElement\n\n onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void\n} & FieldWrapperProps &\n Omit<SliderRootProps, \"value\" | \"defaultValue\" | \"onValueChange\">\n\nconst Slider = <T extends number | number[]>({\n defaultValue: _defaultValue,\n value: _value,\n min,\n max,\n disabled,\n onValueChange,\n renderValue,\n ariaLabel,\n hint,\n label,\n status,\n className,\n ...restProps\n}: SliderPropsType<T>) => {\n const value: number[] | undefined = Array.isArray(_value)\n ? _value\n : _value !== undefined && !isNaN(_value)\n ? [_value]\n : undefined\n const defaultValue: number[] | undefined = Array.isArray(_defaultValue)\n ? _defaultValue\n : _defaultValue !== undefined && !isNaN(_defaultValue)\n ? [_defaultValue]\n : undefined\n function initValue(): number[] {\n if (value !== undefined) return value\n if (defaultValue !== undefined) return defaultValue\n if (min !== undefined) return [min]\n return [0]\n }\n\n const [sliderValue, setSliderValue] = useState(() => initValue())\n\n return (\n <FieldWrapper {...restProps} status={status} label={label} hint={hint}>\n <ArkSlider.Root\n {...restProps}\n className={cx(\"cobalt-slider\", className, {\n \"cobalt-slider--disabled\": disabled,\n \"cobalt-slider--withHint\": hint,\n })}\n thumbAlignment=\"contain\"\n disabled={disabled}\n aria-label={[ariaLabel]}\n value={sliderValue}\n min={min}\n max={max}\n // Need to force disbplaying in smaller spaces like popovers\n thumbSize={{\n width: 24,\n height: 24,\n }}\n onValueChange={({ value: newValueArr }) => {\n setSliderValue(newValueArr)\n const newValue =\n newValueArr.length === 1 ? newValueArr[0] : newValueArr\n onValueChange && onValueChange(newValue as T)\n }}\n >\n <ArkSlider.Label className={FieldWrapper.labelClassName}>\n {label}\n </ArkSlider.Label>\n {renderValue && (\n <div className=\"cobalt-slider__value-container\">\n {renderValue(\n (sliderValue.length === 1 ? sliderValue[0] : sliderValue) as T,\n status\n )}\n </div>\n )}\n <ArkSlider.Control>\n <ArkSlider.Track>\n <ArkSlider.Range />\n </ArkSlider.Track>\n {sliderValue.map((_v, i) => (\n <ArkSlider.Thumb key={i} index={i}>\n <ArkSlider.HiddenInput />\n </ArkSlider.Thumb>\n ))}\n </ArkSlider.Control>\n </ArkSlider.Root>\n </FieldWrapper>\n )\n}\n\nexport default Slider\n\nexport const SliderValueMeta = ({ children }: PropsWithChildren) => {\n return <span className=\"cobalt-slider__value-meta\">{children}</span>\n}\n"],"names":["ArkSlider"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"Slider.js","sources":["../../../src/components/Form/Slider.tsx"],"sourcesContent":["import React, { PropsWithChildren, useState, useMemo } from \"react\"\nimport { Slider as ArkSlider, SliderRootProps } from \"@ark-ui/react\"\nimport cx from \"classnames\"\nimport { FieldWrapper, FieldWrapperProps } from \"./field\"\n\nconst MIN_BAR_HEIGHT_PERCENT = 3\n\nexport type SliderPropsType<T extends number | number[]> = {\n /**\n * mandatory for A11y\n */\n value?: T\n defaultValue?: T\n ariaLabel: string\n /**\n * values interval\n */\n step?: number\n disabled?: boolean\n bars?: {\n step: number\n bins: Record<number, number>\n }\n /**\n * Listener called when the value is changed\n */\n onValueChange?: (newValue: T) => void\n /**\n * Function used to visually display the slider value\n */\n renderValue?: (\n value: T,\n status: FieldWrapperProps[\"status\"]\n ) => React.ReactElement\n\n onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void\n} & FieldWrapperProps &\n Omit<SliderRootProps, \"value\" | \"defaultValue\" | \"onValueChange\">\n\nconst Slider = <T extends number | number[]>({\n defaultValue: _defaultValue,\n value: _value,\n min,\n max,\n disabled,\n onValueChange,\n renderValue,\n ariaLabel,\n hint,\n label,\n status,\n className,\n step,\n bars,\n ...restProps\n}: SliderPropsType<T>) => {\n const sliderMinValue = min || 0\n const sliderMaxValue = max || 100\n const value: number[] | undefined = Array.isArray(_value)\n ? _value\n : _value !== undefined && !isNaN(_value)\n ? [_value]\n : undefined\n const defaultValue: number[] | undefined = Array.isArray(_defaultValue)\n ? _defaultValue\n : _defaultValue !== undefined && !isNaN(_defaultValue)\n ? [_defaultValue]\n : undefined\n function initValue(): number[] {\n if (value !== undefined) return value\n if (defaultValue !== undefined) return defaultValue\n if (min !== undefined) return [min]\n return [0]\n }\n\n const [sliderValue, setSliderValue] = useState(() => initValue())\n\n const barsData = useMemo(() => {\n if (!bars || bars.step <= 0 || sliderMinValue >= sliderMaxValue) return null\n\n const barsCount = (sliderMaxValue - sliderMinValue) / bars.step\n\n let maxBars = 0\n const rawValues = []\n\n for (let i = 0; i < barsCount; i++) {\n const binValue = bars.bins[i * bars.step + sliderMinValue]\n if (binValue) {\n maxBars = Math.max(maxBars, binValue)\n rawValues.push(binValue)\n } else {\n rawValues.push(0)\n }\n }\n\n if (maxBars === 0) {\n return rawValues.map(() => 0) // all values are zero, so all bars are 0%\n }\n\n const scaleFactor = 100 - MIN_BAR_HEIGHT_PERCENT\n\n return rawValues.map((v) =>\n v > 0 ? (v / maxBars) * scaleFactor + MIN_BAR_HEIGHT_PERCENT : 0\n )\n }, [bars, sliderMinValue, sliderMaxValue])\n\n return (\n <FieldWrapper {...restProps} status={status} label={label} hint={hint}>\n <ArkSlider.Root\n {...restProps}\n className={cx(\"cobalt-slider\", className, {\n \"cobalt-slider--disabled\": disabled,\n \"cobalt-slider--withHint\": hint,\n \"cobalt-slider--withBars\": !!bars,\n })}\n thumbAlignment=\"contain\"\n disabled={disabled}\n aria-label={[ariaLabel]}\n value={sliderValue}\n min={min}\n max={max}\n step={step}\n // Need to force disbplaying in smaller spaces like popovers\n thumbSize={{\n width: 24,\n height: 24,\n }}\n onValueChange={({ value: newValueArr }) => {\n setSliderValue(newValueArr)\n const newValue =\n newValueArr.length === 1 ? newValueArr[0] : newValueArr\n onValueChange && onValueChange(newValue as T)\n }}\n >\n <ArkSlider.Label className={FieldWrapper.labelClassName}>\n {label}\n </ArkSlider.Label>\n {renderValue && (\n <div className=\"cobalt-slider__value-container\">\n {renderValue(\n (sliderValue.length === 1 ? sliderValue[0] : sliderValue) as T,\n status\n )}\n </div>\n )}\n <ArkSlider.Control>\n <div className=\"cobalt-slider__bars\">\n {barsData &&\n barsData.map((val, i) => {\n const barsStep = bars?.step || 1\n return (\n <div\n key={i}\n className={cx(\"cobalt-slider__bar\", {\n \"cobalt-slider__bar--active\":\n i * barsStep + sliderMinValue >= sliderValue[0] &&\n (i + 1) * barsStep + sliderMinValue <= sliderValue[1],\n })}\n style={{\n width: `calc(${100 / barsData.length}%)`,\n height: `${val}%`,\n }}\n ></div>\n )\n })}\n </div>\n <ArkSlider.Track>\n <ArkSlider.Range />\n </ArkSlider.Track>\n {sliderValue.map((_v, i) => (\n <ArkSlider.Thumb key={i} index={i}>\n <ArkSlider.HiddenInput />\n </ArkSlider.Thumb>\n ))}\n </ArkSlider.Control>\n </ArkSlider.Root>\n </FieldWrapper>\n )\n}\n\nexport default Slider\n\nexport const SliderValueMeta = ({ children }: PropsWithChildren) => {\n return <span className=\"cobalt-slider__value-meta\">{children}</span>\n}\n"],"names":["ArkSlider"],"mappings":"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"}
|
package/helpers/index.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
const getCSSVariableThemeColor = (colorThemeName) => {
|
|
2
|
+
return `var(--c-${colorThemeName})`;
|
|
3
|
+
};
|
|
4
|
+
const getComputedThemeColor = (colorThemeName) => {
|
|
5
|
+
if (colorThemeName === "current")
|
|
6
|
+
return "currentColor";
|
|
7
|
+
if (colorThemeName === "transparent")
|
|
8
|
+
return "transparent";
|
|
9
|
+
const styles = getComputedStyle(document.documentElement);
|
|
10
|
+
return styles.getPropertyValue(`--c-${colorThemeName}`);
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export { getCSSVariableThemeColor, getComputedThemeColor };
|
|
14
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/helpers/index.ts"],"sourcesContent":["import { theme } from \"../tokens\"\n\nexport type ColorsType = keyof typeof theme | \"transparent\" | \"current\"\n\nexport const getCSSVariableThemeColor = (colorThemeName: ColorsType) => {\n return `var(--c-${colorThemeName})`\n}\n\nexport const getComputedThemeColor = (colorThemeName: ColorsType) => {\n if (colorThemeName === \"current\") return \"currentColor\"\n if (colorThemeName === \"transparent\") return \"transparent\"\n\n const styles = getComputedStyle(document.documentElement)\n return styles.getPropertyValue(`--c-${colorThemeName}`)\n}\n"],"names":[],"mappings":"AAIa,MAAA,wBAAwB,GAAG,CAAC,cAA0B,KAAI;IACrE,OAAO,CAAA,QAAA,EAAW,cAAc,CAAA,CAAA,CAAG,CAAA;AACrC,EAAC;AAEY,MAAA,qBAAqB,GAAG,CAAC,cAA0B,KAAI;IAClE,IAAI,cAAc,KAAK,SAAS;AAAE,QAAA,OAAO,cAAc,CAAA;IACvD,IAAI,cAAc,KAAK,aAAa;AAAE,QAAA,OAAO,aAAa,CAAA;IAE1D,MAAM,MAAM,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAA;IACzD,OAAO,MAAM,CAAC,gBAAgB,CAAC,OAAO,cAAc,CAAA,CAAE,CAAC,CAAA;AACzD;;;;"}
|
package/index.js
CHANGED
|
@@ -56,6 +56,7 @@ export { default as LayoutStack } from './components/Layout/Components/LayoutSta
|
|
|
56
56
|
export { Fixed, Flexible, FlexibleWithConstraint } from './components/Layout/Surfaces/index.js';
|
|
57
57
|
export { default as useBreakpoint } from './hooks/useBreakpoint.js';
|
|
58
58
|
export { getMonthDaysByWeeks, getWeekDays } from './components/Calendar/utils.js';
|
|
59
|
+
export { getCSSVariableThemeColor, getComputedThemeColor } from './helpers/index.js';
|
|
59
60
|
export { default as MultiStepModal } from './components/Modal/MultiStepModal.js';
|
|
60
61
|
export { default as AccountDetailsIcon } from './components/Icon/__generated__/AccountDetailsIcon.js';
|
|
61
62
|
export { default as AddPictureIcon } from './components/Icon/__generated__/AddPictureIcon.js';
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,8 +1,21 @@
|
|
|
1
1
|
.cobalt-slider {
|
|
2
|
+
$slider-thumb-size: theme("spacing.md");
|
|
3
|
+
$slider-control-padding-bottom: theme("spacing.sm");
|
|
4
|
+
--slider-control-track-height: 3px;
|
|
5
|
+
$slider-chart-height: theme("spacing.2xl");
|
|
6
|
+
|
|
7
|
+
position: relative;
|
|
8
|
+
|
|
2
9
|
width: 100%;
|
|
3
10
|
display: flex;
|
|
4
11
|
flex-direction: column;
|
|
5
12
|
|
|
13
|
+
&--withBars {
|
|
14
|
+
[data-part="control"] {
|
|
15
|
+
margin-top: calc($slider-chart-height - 10px);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
6
19
|
&--withHint {
|
|
7
20
|
@apply c-pb-sm;
|
|
8
21
|
}
|
|
@@ -22,12 +35,13 @@
|
|
|
22
35
|
}
|
|
23
36
|
|
|
24
37
|
[data-part="control"] {
|
|
25
|
-
@apply c-
|
|
38
|
+
@apply c-pt-sm c-flex c-items-center;
|
|
39
|
+
padding-bottom: $slider-control-padding-bottom;
|
|
26
40
|
}
|
|
27
41
|
|
|
28
42
|
[data-part="track"] {
|
|
29
43
|
@apply c-bg-surfaceContainerVariant c-flex-1 c-rounded-full;
|
|
30
|
-
height:
|
|
44
|
+
height: var(--slider-control-track-height);
|
|
31
45
|
|
|
32
46
|
&[data-disabled] {
|
|
33
47
|
@apply c-bg-disabled;
|
|
@@ -36,7 +50,7 @@
|
|
|
36
50
|
|
|
37
51
|
[data-part="range"] {
|
|
38
52
|
@apply c-bg-primary c-rounded-full;
|
|
39
|
-
height:
|
|
53
|
+
height: var(--slider-control-track-height);
|
|
40
54
|
|
|
41
55
|
&[data-disabled] {
|
|
42
56
|
@apply c-bg-primaryContainer;
|
|
@@ -45,8 +59,8 @@
|
|
|
45
59
|
|
|
46
60
|
[data-part="thumb"] {
|
|
47
61
|
@apply c-border c-border-outline c-shadow;
|
|
48
|
-
width:
|
|
49
|
-
height:
|
|
62
|
+
width: $slider-thumb-size;
|
|
63
|
+
height: $slider-thumb-size;
|
|
50
64
|
|
|
51
65
|
// The handle will always be white in any cases
|
|
52
66
|
background: #fff;
|
|
@@ -63,4 +77,31 @@
|
|
|
63
77
|
outline: none;
|
|
64
78
|
}
|
|
65
79
|
}
|
|
80
|
+
|
|
81
|
+
&__bars {
|
|
82
|
+
position: absolute;
|
|
83
|
+
|
|
84
|
+
bottom: calc(
|
|
85
|
+
var(--slider-control-track-height) + $slider-control-padding-bottom
|
|
86
|
+
);
|
|
87
|
+
|
|
88
|
+
width: 100%;
|
|
89
|
+
height: $slider-chart-height;
|
|
90
|
+
|
|
91
|
+
display: flex;
|
|
92
|
+
align-items: end;
|
|
93
|
+
|
|
94
|
+
padding: 0 calc($slider-thumb-size / 2);
|
|
95
|
+
gap: 1px;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
&__bar {
|
|
99
|
+
@apply c-bg-surfaceContainerVariant;
|
|
100
|
+
|
|
101
|
+
border-radius: 2px 2px 0 0;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
&__bar--active {
|
|
105
|
+
@apply c-bg-primary;
|
|
106
|
+
}
|
|
66
107
|
}
|
|
@@ -13,6 +13,10 @@ export type SliderPropsType<T extends number | number[]> = {
|
|
|
13
13
|
*/
|
|
14
14
|
step?: number;
|
|
15
15
|
disabled?: boolean;
|
|
16
|
+
bars?: {
|
|
17
|
+
step: number;
|
|
18
|
+
bins: Record<number, number>;
|
|
19
|
+
};
|
|
16
20
|
/**
|
|
17
21
|
* Listener called when the value is changed
|
|
18
22
|
*/
|
|
@@ -23,6 +27,6 @@ export type SliderPropsType<T extends number | number[]> = {
|
|
|
23
27
|
renderValue?: (value: T, status: FieldWrapperProps["status"]) => React.ReactElement;
|
|
24
28
|
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
25
29
|
} & FieldWrapperProps & Omit<SliderRootProps, "value" | "defaultValue" | "onValueChange">;
|
|
26
|
-
declare const Slider: <T extends number | number[]>({ defaultValue: _defaultValue, value: _value, min, max, disabled, onValueChange, renderValue, ariaLabel, hint, label, status, className, ...restProps }: SliderPropsType<T>) => React.JSX.Element;
|
|
30
|
+
declare const Slider: <T extends number | number[]>({ defaultValue: _defaultValue, value: _value, min, max, disabled, onValueChange, renderValue, ariaLabel, hint, label, status, className, step, bars, ...restProps }: SliderPropsType<T>) => React.JSX.Element;
|
|
27
31
|
export default Slider;
|
|
28
32
|
export declare const SliderValueMeta: ({ children }: PropsWithChildren) => React.JSX.Element;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { theme } from "../tokens";
|
|
2
|
+
export type ColorsType = keyof typeof theme | "transparent" | "current";
|
|
3
|
+
export declare const getCSSVariableThemeColor: (colorThemeName: ColorsType) => string;
|
|
4
|
+
export declare const getComputedThemeColor: (colorThemeName: ColorsType) => string;
|
package/types/src/index.d.ts
CHANGED