@lindle/linoardo 1.0.16 → 1.0.18
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/dist/ExpansionPanelItem-Bd6ZWGkR.d.cts +58 -0
- package/dist/ExpansionPanelItem-DOjgDeB6.d.ts +58 -0
- package/dist/button.cjs +214 -0
- package/dist/button.cjs.map +1 -0
- package/dist/button.d.cts +20 -0
- package/dist/button.d.ts +20 -0
- package/dist/button.js +4 -0
- package/dist/button.js.map +1 -0
- package/dist/card.cjs +87 -0
- package/dist/card.cjs.map +1 -0
- package/dist/card.d.cts +34 -0
- package/dist/card.d.ts +34 -0
- package/dist/card.js +3 -0
- package/dist/card.js.map +1 -0
- package/dist/chip.cjs +247 -0
- package/dist/chip.cjs.map +1 -0
- package/dist/chip.d.cts +368 -0
- package/dist/chip.d.ts +368 -0
- package/dist/chip.js +4 -0
- package/dist/chip.js.map +1 -0
- package/dist/chunk-32KFNI6K.js +114 -0
- package/dist/chunk-32KFNI6K.js.map +1 -0
- package/dist/chunk-5GY2JCBO.js +92 -0
- package/dist/chunk-5GY2JCBO.js.map +1 -0
- package/dist/chunk-AOHXZ7OM.js +126 -0
- package/dist/chunk-AOHXZ7OM.js.map +1 -0
- package/dist/chunk-E32P5AHO.js +125 -0
- package/dist/chunk-E32P5AHO.js.map +1 -0
- package/dist/chunk-GA6HSRN6.js +235 -0
- package/dist/chunk-GA6HSRN6.js.map +1 -0
- package/dist/chunk-IEILIKS2.js +8 -0
- package/dist/chunk-IEILIKS2.js.map +1 -0
- package/dist/chunk-N65GNKRG.js +143 -0
- package/dist/chunk-N65GNKRG.js.map +1 -0
- package/dist/chunk-PWK6MLZT.js +239 -0
- package/dist/chunk-PWK6MLZT.js.map +1 -0
- package/dist/chunk-PYG5SDNO.js +98 -0
- package/dist/chunk-PYG5SDNO.js.map +1 -0
- package/dist/chunk-QGQ66FJD.js +155 -0
- package/dist/chunk-QGQ66FJD.js.map +1 -0
- package/dist/chunk-SZU6OYLS.js +187 -0
- package/dist/chunk-SZU6OYLS.js.map +1 -0
- package/dist/chunk-U6NAIIDI.js +99 -0
- package/dist/chunk-U6NAIIDI.js.map +1 -0
- package/dist/chunk-V4BVJOSC.js +85 -0
- package/dist/chunk-V4BVJOSC.js.map +1 -0
- package/dist/chunk-XFPBICJG.js +127 -0
- package/dist/chunk-XFPBICJG.js.map +1 -0
- package/dist/dialog.cjs +121 -0
- package/dist/dialog.cjs.map +1 -0
- package/dist/dialog.d.cts +17 -0
- package/dist/dialog.d.ts +17 -0
- package/dist/dialog.js +3 -0
- package/dist/dialog.js.map +1 -0
- package/dist/expansion-panel/item.cjs +195 -0
- package/dist/expansion-panel/item.cjs.map +1 -0
- package/dist/expansion-panel/item.d.cts +3 -0
- package/dist/expansion-panel/item.d.ts +3 -0
- package/dist/expansion-panel/item.js +3 -0
- package/dist/expansion-panel/item.js.map +1 -0
- package/dist/expansion-panel.cjs +356 -0
- package/dist/expansion-panel.cjs.map +1 -0
- package/dist/expansion-panel.d.cts +8 -0
- package/dist/expansion-panel.d.ts +8 -0
- package/dist/expansion-panel.js +4 -0
- package/dist/expansion-panel.js.map +1 -0
- package/dist/global.types-E2uVLemv.d.cts +7 -0
- package/dist/global.types-E2uVLemv.d.ts +7 -0
- package/dist/index-Md3BuoGM.d.cts +32 -0
- package/dist/index-d_JuI06O.d.ts +32 -0
- package/dist/index.cjs +557 -160
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +15 -549
- package/dist/index.d.ts +15 -549
- package/dist/index.js +14 -1330
- package/dist/index.js.map +1 -1
- package/dist/input.cjs +106 -0
- package/dist/input.cjs.map +1 -0
- package/dist/input.d.cts +22 -0
- package/dist/input.d.ts +22 -0
- package/dist/input.js +4 -0
- package/dist/input.js.map +1 -0
- package/dist/list/item.cjs +149 -0
- package/dist/list/item.cjs.map +1 -0
- package/dist/list/item.d.cts +3 -0
- package/dist/list/item.d.ts +3 -0
- package/dist/list/item.js +3 -0
- package/dist/list/item.js.map +1 -0
- package/dist/list.cjs +235 -0
- package/dist/list.cjs.map +1 -0
- package/dist/list.d.cts +17 -0
- package/dist/list.d.ts +17 -0
- package/dist/list.js +4 -0
- package/dist/list.js.map +1 -0
- package/dist/menu.cjs +177 -0
- package/dist/menu.cjs.map +1 -0
- package/dist/menu.d.cts +20 -0
- package/dist/menu.d.ts +20 -0
- package/dist/menu.js +3 -0
- package/dist/menu.js.map +1 -0
- package/dist/slider.cjs +128 -0
- package/dist/slider.cjs.map +1 -0
- package/dist/slider.d.cts +42 -0
- package/dist/slider.d.ts +42 -0
- package/dist/slider.js +3 -0
- package/dist/slider.js.map +1 -0
- package/dist/styles.css +334 -44
- package/dist/switch.cjs +145 -0
- package/dist/switch.cjs.map +1 -0
- package/dist/switch.d.cts +16 -0
- package/dist/switch.d.ts +16 -0
- package/dist/switch.js +3 -0
- package/dist/switch.js.map +1 -0
- package/dist/tooltip.cjs +136 -0
- package/dist/tooltip.cjs.map +1 -0
- package/dist/tooltip.d.cts +19 -0
- package/dist/tooltip.d.ts +19 -0
- package/dist/tooltip.js +3 -0
- package/dist/tooltip.js.map +1 -0
- package/package.json +67 -2
package/dist/slider.cjs
ADDED
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var react = require('react');
|
|
4
|
+
var tailwindMerge = require('tailwind-merge');
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
|
|
7
|
+
// src/Form/Slider/index.tsx
|
|
8
|
+
var paletteValues = {
|
|
9
|
+
primary: { fill: "var(--color-primary, #6366f1)", ring: "rgba(99, 102, 241, 0.28)", thumbBorder: "#6366f1" },
|
|
10
|
+
neutral: { fill: "#4b5563", ring: "rgba(75, 85, 99, 0.28)", thumbBorder: "#4b5563" },
|
|
11
|
+
info: { fill: "#0284c7", ring: "rgba(2, 132, 199, 0.28)", thumbBorder: "#0284c7" },
|
|
12
|
+
success: { fill: "#059669", ring: "rgba(5, 150, 105, 0.24)", thumbBorder: "#059669" },
|
|
13
|
+
warning: { fill: "#d97706", ring: "rgba(217, 119, 6, 0.24)", thumbBorder: "#d97706" },
|
|
14
|
+
danger: { fill: "#dc2626", ring: "rgba(220, 38, 38, 0.24)", thumbBorder: "#dc2626" },
|
|
15
|
+
surface: { fill: "#0f172a", ring: "rgba(15, 23, 42, 0.22)", thumbBorder: "#0f172a" },
|
|
16
|
+
bw: { fill: "#000000", ring: "rgba(0, 0, 0, 0.26)", thumbBorder: "#000000" }
|
|
17
|
+
};
|
|
18
|
+
var sizeTokens = {
|
|
19
|
+
small: { trackHeight: "0.375rem", thumbSize: "1.1rem", trackClass: "h-1.5", valueClass: "text-xs" },
|
|
20
|
+
medium: { trackHeight: "0.5rem", thumbSize: "1.25rem", trackClass: "h-2", valueClass: "text-sm" },
|
|
21
|
+
large: { trackHeight: "0.6rem", thumbSize: "1.4rem", trackClass: "h-[0.65rem]", valueClass: "text-base" }
|
|
22
|
+
};
|
|
23
|
+
var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
|
|
24
|
+
var toNumber = (value, fallback) => {
|
|
25
|
+
if (typeof value === "number" && Number.isFinite(value)) {
|
|
26
|
+
return value;
|
|
27
|
+
}
|
|
28
|
+
const parsed = Number(value);
|
|
29
|
+
return Number.isFinite(parsed) ? parsed : fallback;
|
|
30
|
+
};
|
|
31
|
+
var Slider = ({
|
|
32
|
+
color = "primary",
|
|
33
|
+
size = "medium",
|
|
34
|
+
label,
|
|
35
|
+
hint,
|
|
36
|
+
showValue = true,
|
|
37
|
+
valueLabel,
|
|
38
|
+
wrapperClassName,
|
|
39
|
+
className,
|
|
40
|
+
trackColor,
|
|
41
|
+
onChange,
|
|
42
|
+
disabled,
|
|
43
|
+
min = 0,
|
|
44
|
+
max = 100,
|
|
45
|
+
step = 1,
|
|
46
|
+
...rest
|
|
47
|
+
}) => {
|
|
48
|
+
const palette = paletteValues[color] ?? paletteValues.primary;
|
|
49
|
+
const sizeToken = sizeTokens[size] ?? sizeTokens.medium;
|
|
50
|
+
const { value, defaultValue, ...inputProps } = rest;
|
|
51
|
+
const resolvedMin = toNumber(min, 0);
|
|
52
|
+
const resolvedMax = toNumber(max, resolvedMin < 100 ? 100 : resolvedMin);
|
|
53
|
+
const resolvedStep = toNumber(step, 1);
|
|
54
|
+
const isControlled = typeof value === "number";
|
|
55
|
+
const [internalValue, setInternalValue] = react.useState(
|
|
56
|
+
clamp(
|
|
57
|
+
typeof value === "number" ? value : typeof defaultValue === "number" ? defaultValue : resolvedMin,
|
|
58
|
+
resolvedMin,
|
|
59
|
+
resolvedMax
|
|
60
|
+
)
|
|
61
|
+
);
|
|
62
|
+
react.useEffect(() => {
|
|
63
|
+
if (isControlled && typeof value === "number") {
|
|
64
|
+
setInternalValue(clamp(value, resolvedMin, resolvedMax));
|
|
65
|
+
}
|
|
66
|
+
}, [isControlled, value, resolvedMin, resolvedMax]);
|
|
67
|
+
react.useEffect(() => {
|
|
68
|
+
if (!isControlled) {
|
|
69
|
+
setInternalValue((prev) => clamp(prev, resolvedMin, resolvedMax));
|
|
70
|
+
}
|
|
71
|
+
}, [isControlled, resolvedMin, resolvedMax]);
|
|
72
|
+
const currentValue = isControlled && typeof value === "number" ? clamp(value, resolvedMin, resolvedMax) : internalValue;
|
|
73
|
+
const percentage = resolvedMax === resolvedMin ? 0 : (currentValue - resolvedMin) / (resolvedMax - resolvedMin) * 100;
|
|
74
|
+
const cssVars = {
|
|
75
|
+
"--slider-color": palette.fill,
|
|
76
|
+
"--slider-ring-color": palette.ring,
|
|
77
|
+
"--slider-thumb-border": palette.thumbBorder,
|
|
78
|
+
"--slider-track-color": trackColor ?? "#e5e7eb",
|
|
79
|
+
"--slider-track-height": sizeToken.trackHeight,
|
|
80
|
+
"--slider-thumb-size": sizeToken.thumbSize,
|
|
81
|
+
"--slider-percentage": `${percentage}%`
|
|
82
|
+
};
|
|
83
|
+
if (disabled) {
|
|
84
|
+
cssVars["--slider-disabled-fill"] = "#d1d5db";
|
|
85
|
+
cssVars["--slider-thumb-border"] = "#d1d5db";
|
|
86
|
+
cssVars["--slider-track-color-disabled"] = "#e5e7eb";
|
|
87
|
+
}
|
|
88
|
+
const handleChange = (event) => {
|
|
89
|
+
const nextValue = Number(event.target.value);
|
|
90
|
+
if (!isControlled) {
|
|
91
|
+
setInternalValue(nextValue);
|
|
92
|
+
}
|
|
93
|
+
onChange?.(nextValue, event);
|
|
94
|
+
};
|
|
95
|
+
const displayValue = valueLabel ? valueLabel(currentValue) : currentValue;
|
|
96
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex flex-col gap-2", wrapperClassName), children: [
|
|
97
|
+
(label || showValue) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
|
|
98
|
+
label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900", children: label }),
|
|
99
|
+
showValue && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("tabular-nums text-gray-900", sizeToken.valueClass), children: displayValue })
|
|
100
|
+
] }),
|
|
101
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
102
|
+
"input",
|
|
103
|
+
{
|
|
104
|
+
...inputProps,
|
|
105
|
+
type: "range",
|
|
106
|
+
min: resolvedMin,
|
|
107
|
+
max: resolvedMax,
|
|
108
|
+
step: resolvedStep,
|
|
109
|
+
value: currentValue,
|
|
110
|
+
onChange: handleChange,
|
|
111
|
+
disabled,
|
|
112
|
+
className: tailwindMerge.twMerge(
|
|
113
|
+
"slider-control focus-visible:outline-none rounded-full",
|
|
114
|
+
sizeToken.trackClass,
|
|
115
|
+
disabled ? "cursor-not-allowed opacity-70" : "cursor-pointer",
|
|
116
|
+
className
|
|
117
|
+
),
|
|
118
|
+
style: cssVars
|
|
119
|
+
}
|
|
120
|
+
),
|
|
121
|
+
hint && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-600", children: hint })
|
|
122
|
+
] });
|
|
123
|
+
};
|
|
124
|
+
var Slider_default = Slider;
|
|
125
|
+
|
|
126
|
+
module.exports = Slider_default;
|
|
127
|
+
//# sourceMappingURL=slider.cjs.map
|
|
128
|
+
//# sourceMappingURL=slider.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Form/Slider/index.tsx"],"names":["useState","useEffect","twMerge","jsxs","jsx"],"mappings":"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","file":"slider.cjs","sourcesContent":["import { type ChangeEvent, type CSSProperties, useEffect, useState } from 'react';\nimport type { Palette } from '@lindle/linoardo/global.types';\nimport { twMerge } from 'tailwind-merge';\nimport type { SliderProps, SliderSize } from './types.slider';\n\nconst paletteValues: Record<Palette, { fill: string; ring: string; thumbBorder: string }> = {\n primary: { fill: 'var(--color-primary, #6366f1)', ring: 'rgba(99, 102, 241, 0.28)', thumbBorder: '#6366f1' },\n neutral: { fill: '#4b5563', ring: 'rgba(75, 85, 99, 0.28)', thumbBorder: '#4b5563' },\n info: { fill: '#0284c7', ring: 'rgba(2, 132, 199, 0.28)', thumbBorder: '#0284c7' },\n success: { fill: '#059669', ring: 'rgba(5, 150, 105, 0.24)', thumbBorder: '#059669' },\n warning: { fill: '#d97706', ring: 'rgba(217, 119, 6, 0.24)', thumbBorder: '#d97706' },\n danger: { fill: '#dc2626', ring: 'rgba(220, 38, 38, 0.24)', thumbBorder: '#dc2626' },\n surface: { fill: '#0f172a', ring: 'rgba(15, 23, 42, 0.22)', thumbBorder: '#0f172a' },\n bw: { fill: '#000000', ring: 'rgba(0, 0, 0, 0.26)', thumbBorder: '#000000' }\n};\n\nconst sizeTokens: Record<\n SliderSize,\n { trackHeight: string; thumbSize: string; trackClass: string; valueClass: string }\n> = {\n small: { trackHeight: '0.375rem', thumbSize: '1.1rem', trackClass: 'h-1.5', valueClass: 'text-xs' },\n medium: { trackHeight: '0.5rem', thumbSize: '1.25rem', trackClass: 'h-2', valueClass: 'text-sm' },\n large: { trackHeight: '0.6rem', thumbSize: '1.4rem', trackClass: 'h-[0.65rem]', valueClass: 'text-base' }\n};\n\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\n\nconst toNumber = (value: number | string | undefined, fallback: number) => {\n if (typeof value === 'number' && Number.isFinite(value)) {\n return value;\n }\n\n const parsed = Number(value);\n return Number.isFinite(parsed) ? parsed : fallback;\n};\n\ntype SliderCssVariables = CSSProperties & Record<string, string>;\n\nconst Slider: React.FC<SliderProps> = ({\n color = 'primary',\n size = 'medium',\n label,\n hint,\n showValue = true,\n valueLabel,\n wrapperClassName,\n className,\n trackColor,\n onChange,\n disabled,\n min = 0,\n max = 100,\n step = 1,\n ...rest\n}) => {\n const palette = paletteValues[color] ?? paletteValues.primary;\n const sizeToken = sizeTokens[size] ?? sizeTokens.medium;\n const { value, defaultValue, ...inputProps } = rest;\n const resolvedMin = toNumber(min, 0);\n const resolvedMax = toNumber(max, resolvedMin < 100 ? 100 : resolvedMin);\n const resolvedStep = toNumber(step, 1);\n const isControlled = typeof value === 'number';\n const [internalValue, setInternalValue] = useState<number>(\n clamp(\n typeof value === 'number'\n ? value\n : typeof defaultValue === 'number'\n ? defaultValue\n : resolvedMin,\n resolvedMin,\n resolvedMax\n )\n );\n\n useEffect(() => {\n if (isControlled && typeof value === 'number') {\n setInternalValue(clamp(value, resolvedMin, resolvedMax));\n }\n }, [isControlled, value, resolvedMin, resolvedMax]);\n\n useEffect(() => {\n if (!isControlled) {\n setInternalValue(prev => clamp(prev, resolvedMin, resolvedMax));\n }\n }, [isControlled, resolvedMin, resolvedMax]);\n\n const currentValue =\n isControlled && typeof value === 'number' ? clamp(value, resolvedMin, resolvedMax) : internalValue;\n const percentage = resolvedMax === resolvedMin ? 0 : ((currentValue - resolvedMin) / (resolvedMax - resolvedMin)) * 100;\n const cssVars: SliderCssVariables = {\n '--slider-color': palette.fill,\n '--slider-ring-color': palette.ring,\n '--slider-thumb-border': palette.thumbBorder,\n '--slider-track-color': trackColor ?? '#e5e7eb',\n '--slider-track-height': sizeToken.trackHeight,\n '--slider-thumb-size': sizeToken.thumbSize,\n '--slider-percentage': `${percentage}%`\n };\n\n if (disabled) {\n cssVars['--slider-disabled-fill'] = '#d1d5db';\n cssVars['--slider-thumb-border'] = '#d1d5db';\n cssVars['--slider-track-color-disabled'] = '#e5e7eb';\n }\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const nextValue = Number(event.target.value);\n if (!isControlled) {\n setInternalValue(nextValue);\n }\n onChange?.(nextValue, event);\n };\n\n const displayValue = valueLabel ? valueLabel(currentValue) : currentValue;\n\n return (\n <div className={twMerge('flex flex-col gap-2', wrapperClassName)}>\n {(label || showValue) && (\n <div className='flex items-center justify-between'>\n {label && <span className='text-sm font-medium text-gray-900'>{label}</span>}\n {showValue && <span className={twMerge('tabular-nums text-gray-900', sizeToken.valueClass)}>{displayValue}</span>}\n </div>\n )}\n\n <input\n {...inputProps}\n type='range'\n min={resolvedMin}\n max={resolvedMax}\n step={resolvedStep}\n value={currentValue}\n onChange={handleChange}\n disabled={disabled}\n className={twMerge(\n 'slider-control focus-visible:outline-none rounded-full',\n sizeToken.trackClass,\n disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer',\n className\n )}\n style={cssVars}\n />\n\n {hint && <p className='text-xs text-gray-600'>{hint}</p>}\n </div>\n );\n};\n\nexport default Slider;\n"]}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { P as Palette } from './global.types-E2uVLemv.cjs';
|
|
2
|
+
|
|
3
|
+
type SliderSize = 'small' | 'medium' | 'large';
|
|
4
|
+
type SliderProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange' | 'value' | 'defaultValue'> & {
|
|
5
|
+
value?: number;
|
|
6
|
+
defaultValue?: number;
|
|
7
|
+
color?: Palette;
|
|
8
|
+
size?: SliderSize;
|
|
9
|
+
/**
|
|
10
|
+
* Label shown above the slider, similar to Vuetify's `label`.
|
|
11
|
+
*/
|
|
12
|
+
label?: React.ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Optional hint text below the slider.
|
|
15
|
+
*/
|
|
16
|
+
hint?: React.ReactNode;
|
|
17
|
+
/**
|
|
18
|
+
* When true (default), renders the current value on the right side.
|
|
19
|
+
*/
|
|
20
|
+
showValue?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Custom formatter used when `showValue` is enabled.
|
|
23
|
+
*/
|
|
24
|
+
valueLabel?: (value: number) => React.ReactNode;
|
|
25
|
+
/**
|
|
26
|
+
* Additional class applied to the wrapper element.
|
|
27
|
+
*/
|
|
28
|
+
wrapperClassName?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Class applied directly to the range input element.
|
|
31
|
+
*/
|
|
32
|
+
className?: string;
|
|
33
|
+
/**
|
|
34
|
+
* Override the unfilled track color.
|
|
35
|
+
*/
|
|
36
|
+
trackColor?: string;
|
|
37
|
+
onChange?: (value: number, event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
declare const Slider: React.FC<SliderProps>;
|
|
41
|
+
|
|
42
|
+
export { Slider as default };
|
package/dist/slider.d.ts
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { P as Palette } from './global.types-E2uVLemv.js';
|
|
2
|
+
|
|
3
|
+
type SliderSize = 'small' | 'medium' | 'large';
|
|
4
|
+
type SliderProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange' | 'value' | 'defaultValue'> & {
|
|
5
|
+
value?: number;
|
|
6
|
+
defaultValue?: number;
|
|
7
|
+
color?: Palette;
|
|
8
|
+
size?: SliderSize;
|
|
9
|
+
/**
|
|
10
|
+
* Label shown above the slider, similar to Vuetify's `label`.
|
|
11
|
+
*/
|
|
12
|
+
label?: React.ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Optional hint text below the slider.
|
|
15
|
+
*/
|
|
16
|
+
hint?: React.ReactNode;
|
|
17
|
+
/**
|
|
18
|
+
* When true (default), renders the current value on the right side.
|
|
19
|
+
*/
|
|
20
|
+
showValue?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Custom formatter used when `showValue` is enabled.
|
|
23
|
+
*/
|
|
24
|
+
valueLabel?: (value: number) => React.ReactNode;
|
|
25
|
+
/**
|
|
26
|
+
* Additional class applied to the wrapper element.
|
|
27
|
+
*/
|
|
28
|
+
wrapperClassName?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Class applied directly to the range input element.
|
|
31
|
+
*/
|
|
32
|
+
className?: string;
|
|
33
|
+
/**
|
|
34
|
+
* Override the unfilled track color.
|
|
35
|
+
*/
|
|
36
|
+
trackColor?: string;
|
|
37
|
+
onChange?: (value: number, event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
declare const Slider: React.FC<SliderProps>;
|
|
41
|
+
|
|
42
|
+
export { Slider as default };
|
package/dist/slider.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"slider.js"}
|