luan-ui 0.8.2 → 0.8.3
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.
|
@@ -6,6 +6,11 @@ export type SliderProps = ComponentProps<typeof SliderPrimitive.Root> & {
|
|
|
6
6
|
* @default true
|
|
7
7
|
*/
|
|
8
8
|
showMinMax?: boolean;
|
|
9
|
+
/**
|
|
10
|
+
* Whether to show the current value in a tooltip on each thumb
|
|
11
|
+
* @default true
|
|
12
|
+
*/
|
|
13
|
+
showTooltipValue?: boolean;
|
|
9
14
|
};
|
|
10
15
|
/**
|
|
11
16
|
* A customizable slider component built on top of Base UI's slider primitive.
|
|
@@ -25,8 +30,9 @@ export type SliderProps = ComponentProps<typeof SliderPrimitive.Root> & {
|
|
|
25
30
|
* @param {number} [props.min=0] - The minimum value of the slider
|
|
26
31
|
* @param {number} [props.max=100] - The maximum value of the slider
|
|
27
32
|
* @param {boolean} [props.showMinMax=true] - Whether to show min/max values below the slider
|
|
33
|
+
* @param {boolean} [props.showTooltipValue=true] - Whether to show the value in a tooltip on each thumb
|
|
28
34
|
* @param {string} [props.className] - Additional CSS classes to apply to the slider
|
|
29
35
|
* @returns {JSX.Element} A slider component with optional tooltips and min/max display
|
|
30
36
|
*/
|
|
31
|
-
declare function Slider({ className, defaultValue, min, max, showMinMax, disabled: initialDisabled, onValueChange, ref, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
declare function Slider({ className, defaultValue, min, max, showMinMax, showTooltipValue, disabled: initialDisabled, onValueChange, ref, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;
|
|
32
38
|
export { Slider };
|
|
@@ -22,10 +22,11 @@ import { useState } from "react";
|
|
|
22
22
|
* @param {number} [props.min=0] - The minimum value of the slider
|
|
23
23
|
* @param {number} [props.max=100] - The maximum value of the slider
|
|
24
24
|
* @param {boolean} [props.showMinMax=true] - Whether to show min/max values below the slider
|
|
25
|
+
* @param {boolean} [props.showTooltipValue=true] - Whether to show the value in a tooltip on each thumb
|
|
25
26
|
* @param {string} [props.className] - Additional CSS classes to apply to the slider
|
|
26
27
|
* @returns {JSX.Element} A slider component with optional tooltips and min/max display
|
|
27
28
|
*/
|
|
28
|
-
function Slider({ className, defaultValue, min = 0, max = 100, showMinMax = true, disabled: initialDisabled, onValueChange, ref, ...props }) {
|
|
29
|
+
function Slider({ className, defaultValue, min = 0, max = 100, showMinMax = true, showTooltipValue = true, disabled: initialDisabled, onValueChange, ref, ...props }) {
|
|
29
30
|
const normalizedDefault = Array.isArray(defaultValue)
|
|
30
31
|
? defaultValue
|
|
31
32
|
: defaultValue !== undefined
|
|
@@ -42,9 +43,12 @@ function Slider({ className, defaultValue, min = 0, max = 100, showMinMax = true
|
|
|
42
43
|
setValue(normalizedValue);
|
|
43
44
|
onValueChange?.(newValue, event);
|
|
44
45
|
};
|
|
45
|
-
return (_jsxs(_Fragment, { children: [_jsx(SliderPrimitive.Root, { ref: ref, value: value, onValueChange: handleValueChange, className: cn("relative flex w-full touch-none select-none flex-col items-center", className), disabled: disabled, min: min, max: max, ...props, children: _jsx(SliderPrimitive.Control, { className: "flex w-full items-center", children: _jsxs(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow rounded-full bg-primary/20 data-disabled:opacity-50", children: [_jsx(SliderPrimitive.Indicator, { className: "absolute h-full bg-primary" }), value.map((thumbValue, index) =>
|
|
46
|
-
|
|
47
|
-
|
|
46
|
+
return (_jsxs(_Fragment, { children: [_jsx(SliderPrimitive.Root, { ref: ref, value: value, onValueChange: handleValueChange, className: cn("relative flex w-full touch-none select-none flex-col items-center", className), disabled: disabled, min: min, max: max, ...props, children: _jsx(SliderPrimitive.Control, { className: "flex w-full items-center", children: _jsxs(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow rounded-full bg-primary/20 data-disabled:opacity-50", children: [_jsx(SliderPrimitive.Indicator, { className: "absolute h-full bg-primary" }), value.map((thumbValue, index) => {
|
|
47
|
+
const thumbClassName = "block h-4 w-4 rounded-full border border-primary bg-surface shadow outline-none transition-colors focus-within:ring-2 focus-within:ring-focus-ring focus-within:ring-offset-surface data-disabled:pointer-events-none";
|
|
48
|
+
return showTooltipValue ? (
|
|
49
|
+
// biome-ignore lint/suspicious/noArrayIndexKey: index is the only stable identifier for thumbs
|
|
50
|
+
_jsxs(Tooltip, { delayDuration: 0, children: [_jsx(TooltipTrigger, { render: _jsx(SliderPrimitive.Thumb, { index: index, className: thumbClassName }) }), _jsx(TooltipContent, { children: _jsx("p", { children: thumbValue }) })] }, index)) : (_jsx(SliderPrimitive.Thumb, { className: thumbClassName, index: index }, index));
|
|
51
|
+
})] }) }) }), showMinMax && (_jsxs("div", { className: "mt-2 flex w-full flex-row justify-between", children: [_jsx("p", { children: min }), _jsx("p", { children: max })] }))] }));
|
|
48
52
|
}
|
|
49
53
|
export { Slider };
|
|
50
54
|
//# sourceMappingURL=slider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider.js","sourceRoot":"/","sources":["components/slider/slider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EACN,OAAO,EACP,cAAc,EACd,cAAc,GACd,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAEtC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"slider.js","sourceRoot":"/","sources":["components/slider/slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Slider as SliderPrimitive } from \"@base-ui/react/slider\";\nimport { useFormContext } from \"@components/form-field/form-field-context\";\nimport {\n\tTooltip,\n\tTooltipContent,\n\tTooltipTrigger,\n} from \"@components/tooltip/tooltip\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\nimport { useState } from \"react\";\n\nexport type SliderProps = ComponentProps<typeof SliderPrimitive.Root> & {\n\t/**\n\t * Whether to show the minimum and maximum values below the slider\n\t * @default true\n\t */\n\tshowMinMax?: boolean;\n\t/**\n\t * Whether to show the current value in a tooltip on each thumb\n\t * @default true\n\t */\n\tshowTooltipValue?: boolean;\n};\n\n/**\n * A customizable slider component built on top of Base UI's slider primitive.\n *\n * @example\n * ```tsx\n * <Slider\n * min={0}\n * max={100}\n * defaultValue={50}\n * showMinMax={true}\n * />\n * ```\n *\n * @param {Object} props - The props for the Slider component\n * @param {number | number[]} [props.defaultValue] - The initial value of the slider\n * @param {number} [props.min=0] - The minimum value of the slider\n * @param {number} [props.max=100] - The maximum value of the slider\n * @param {boolean} [props.showMinMax=true] - Whether to show min/max values below the slider\n * @param {boolean} [props.showTooltipValue=true] - Whether to show the value in a tooltip on each thumb\n * @param {string} [props.className] - Additional CSS classes to apply to the slider\n * @returns {JSX.Element} A slider component with optional tooltips and min/max display\n */\nfunction Slider({\n\tclassName,\n\tdefaultValue,\n\tmin = 0,\n\tmax = 100,\n\tshowMinMax = true,\n\tshowTooltipValue = true,\n\tdisabled: initialDisabled,\n\tonValueChange,\n\tref,\n\t...props\n}: SliderProps) {\n\tconst normalizedDefault = Array.isArray(defaultValue)\n\t\t? defaultValue\n\t\t: defaultValue !== undefined\n\t\t\t? [defaultValue]\n\t\t\t: [0];\n\n\tconst [value, setValue] = useState<number[]>(normalizedDefault);\n\tconst { disabled } = useFormContext({\n\t\tdisabled: initialDisabled,\n\t});\n\n\tconst handleValueChange = (\n\t\tnewValue: number | readonly number[],\n\t\tevent: SliderPrimitive.Root.ChangeEventDetails,\n\t) => {\n\t\tconst normalizedValue = Array.isArray(newValue)\n\t\t\t? [...newValue]\n\t\t\t: [newValue];\n\t\tsetValue(normalizedValue);\n\t\tonValueChange?.(newValue, event);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SliderPrimitive.Root\n\t\t\t\tref={ref}\n\t\t\t\tvalue={value}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"relative flex w-full touch-none select-none flex-col items-center\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tmin={min}\n\t\t\t\tmax={max}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SliderPrimitive.Control className=\"flex w-full items-center\">\n\t\t\t\t\t<SliderPrimitive.Track className=\"relative h-1.5 w-full grow rounded-full bg-primary/20 data-disabled:opacity-50\">\n\t\t\t\t\t\t<SliderPrimitive.Indicator className=\"absolute h-full bg-primary\" />\n\t\t\t\t\t\t{value.map((thumbValue, index) => {\n\t\t\t\t\t\t\tconst thumbClassName =\n\t\t\t\t\t\t\t\t\"block h-4 w-4 rounded-full border border-primary bg-surface shadow outline-none transition-colors focus-within:ring-2 focus-within:ring-focus-ring focus-within:ring-offset-surface data-disabled:pointer-events-none\";\n\t\t\t\t\t\t\treturn showTooltipValue ? (\n\t\t\t\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: index is the only stable identifier for thumbs\n\t\t\t\t\t\t\t\t<Tooltip key={index} delayDuration={0}>\n\t\t\t\t\t\t\t\t\t<TooltipTrigger\n\t\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t\t<SliderPrimitive.Thumb\n\t\t\t\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={thumbClassName}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<TooltipContent>\n\t\t\t\t\t\t\t\t\t\t<p>{thumbValue}</p>\n\t\t\t\t\t\t\t\t\t</TooltipContent>\n\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<SliderPrimitive.Thumb\n\t\t\t\t\t\t\t\t\tclassName={thumbClassName}\n\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: index is the only stable identifier for thumbs\n\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</SliderPrimitive.Track>\n\t\t\t\t</SliderPrimitive.Control>\n\t\t\t</SliderPrimitive.Root>\n\t\t\t{showMinMax && (\n\t\t\t\t<div className=\"mt-2 flex w-full flex-row justify-between\">\n\t\t\t\t\t<p>{min}</p>\n\t\t\t\t\t<p>{max}</p>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t);\n}\n\nexport { Slider };\n"]}
|