@pixpilot/shadcn-ui 0.15.0 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +4 -1
- package/dist/index.d.cts +4 -2
- package/dist/index.d.ts +4 -2
- package/dist/index.js +4 -2
- package/dist/{Slider.cjs → slider/Slider.cjs} +2 -2
- package/dist/{Slider.d.cts → slider/Slider.d.cts} +1 -1
- package/dist/{Slider.d.ts → slider/Slider.d.ts} +1 -1
- package/dist/{Slider.js → slider/Slider.js} +1 -1
- package/dist/slider/SliderInput.cjs +83 -0
- package/dist/slider/SliderInput.d.cts +16 -0
- package/dist/slider/SliderInput.d.ts +16 -0
- package/dist/slider/SliderInput.js +79 -0
- package/dist/slider/index.cjs +2 -0
- package/dist/slider/index.d.cts +2 -0
- package/dist/slider/index.d.ts +2 -0
- package/dist/slider/index.js +2 -0
- package/package.json +5 -5
package/dist/index.cjs
CHANGED
|
@@ -38,7 +38,9 @@ const require_RichTextEditor = require('./rich-text-editor/RichTextEditor.cjs');
|
|
|
38
38
|
require('./rich-text-editor/index.cjs');
|
|
39
39
|
const require_ScaledPreview = require('./ScaledPreview.cjs');
|
|
40
40
|
const require_Select = require('./Select.cjs');
|
|
41
|
-
const require_Slider = require('./Slider.cjs');
|
|
41
|
+
const require_Slider = require('./slider/Slider.cjs');
|
|
42
|
+
const require_SliderInput = require('./slider/SliderInput.cjs');
|
|
43
|
+
require('./slider/index.cjs');
|
|
42
44
|
const require_TabsContext = require('./tabs/TabsContext.cjs');
|
|
43
45
|
const require_TabsList = require('./tabs/TabsList.cjs');
|
|
44
46
|
const require_TabsTrigger = require('./tabs/TabsTrigger.cjs');
|
|
@@ -81,6 +83,7 @@ exports.RichTextEditor = require_RichTextEditor.RichTextEditor;
|
|
|
81
83
|
exports.ScaledPreview = require_ScaledPreview.ScaledPreview;
|
|
82
84
|
exports.Select = require_Select.Select;
|
|
83
85
|
exports.Slider = require_Slider.Slider;
|
|
86
|
+
exports.SliderInput = require_SliderInput.SliderInput;
|
|
84
87
|
exports.Tabs = __pixpilot_shadcn.Tabs;
|
|
85
88
|
exports.TabsContent = __pixpilot_shadcn.TabsContent;
|
|
86
89
|
exports.TabsContext = require_TabsContext.TabsContext;
|
package/dist/index.d.cts
CHANGED
|
@@ -39,7 +39,9 @@ import { RichTextEditor, RichTextEditorProps, ToolbarOption } from "./rich-text-
|
|
|
39
39
|
import "./rich-text-editor/index.cjs";
|
|
40
40
|
import { ScaledPreview, ScaledPreviewProps, ScaledPreviewSize } from "./ScaledPreview.cjs";
|
|
41
41
|
import { Select, SelectOption } from "./Select.cjs";
|
|
42
|
-
import { Slider, SliderProps } from "./Slider.cjs";
|
|
42
|
+
import { Slider, SliderProps } from "./slider/Slider.cjs";
|
|
43
|
+
import { SliderInput, SliderInputProps } from "./slider/SliderInput.cjs";
|
|
44
|
+
import "./slider/index.cjs";
|
|
43
45
|
import { Tabs } from "./tabs/Tabs.cjs";
|
|
44
46
|
import { TabsContent } from "./tabs/TabsContent.cjs";
|
|
45
47
|
import { BaseTabsTriggerProps, TabsVariant } from "./tabs/types.cjs";
|
|
@@ -54,4 +56,4 @@ import { ThemeToggle } from "./ThemeToggle.cjs";
|
|
|
54
56
|
import { DEFAULT_ALERT_DURATION, ToastMessage, toast, toastError, toastInfo, toastSuccess, toastWarning } from "./toast/toast.cjs";
|
|
55
57
|
import "./toast/index.cjs";
|
|
56
58
|
import { cn } from "@pixpilot/shadcn";
|
|
57
|
-
export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, RichTextEditor, RichTextEditorProps, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderProps, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTabsContext, useTheme };
|
|
59
|
+
export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, RichTextEditor, RichTextEditorProps, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTabsContext, useTheme };
|
package/dist/index.d.ts
CHANGED
|
@@ -42,7 +42,9 @@ import { RichTextEditor, RichTextEditorProps, ToolbarOption } from "./rich-text-
|
|
|
42
42
|
import "./rich-text-editor/index.js";
|
|
43
43
|
import { ScaledPreview, ScaledPreviewProps, ScaledPreviewSize } from "./ScaledPreview.js";
|
|
44
44
|
import { Select, SelectOption } from "./Select.js";
|
|
45
|
-
import { Slider, SliderProps } from "./Slider.js";
|
|
45
|
+
import { Slider, SliderProps } from "./slider/Slider.js";
|
|
46
|
+
import { SliderInput, SliderInputProps } from "./slider/SliderInput.js";
|
|
47
|
+
import "./slider/index.js";
|
|
46
48
|
import { Tabs } from "./tabs/Tabs.js";
|
|
47
49
|
import { TabsContent } from "./tabs/TabsContent.js";
|
|
48
50
|
import { BaseTabsTriggerProps, TabsVariant } from "./tabs/types.js";
|
|
@@ -57,4 +59,4 @@ import { ThemeToggle } from "./ThemeToggle.js";
|
|
|
57
59
|
import { DEFAULT_ALERT_DURATION, ToastMessage, toast, toastError, toastInfo, toastSuccess, toastWarning } from "./toast/toast.js";
|
|
58
60
|
import "./toast/index.js";
|
|
59
61
|
import { cn } from "@pixpilot/shadcn";
|
|
60
|
-
export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, RichTextEditor, RichTextEditorProps, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderProps, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTabsContext, useTheme };
|
|
62
|
+
export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, RichTextEditor, RichTextEditorProps, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTabsContext, useTheme };
|
package/dist/index.js
CHANGED
|
@@ -37,7 +37,9 @@ import { RichTextEditor } from "./rich-text-editor/RichTextEditor.js";
|
|
|
37
37
|
import "./rich-text-editor/index.js";
|
|
38
38
|
import { ScaledPreview } from "./ScaledPreview.js";
|
|
39
39
|
import { Select } from "./Select.js";
|
|
40
|
-
import { Slider } from "./Slider.js";
|
|
40
|
+
import { Slider } from "./slider/Slider.js";
|
|
41
|
+
import { SliderInput } from "./slider/SliderInput.js";
|
|
42
|
+
import "./slider/index.js";
|
|
41
43
|
import { Tabs } from "./tabs/Tabs.js";
|
|
42
44
|
import { TabsContent } from "./tabs/TabsContent.js";
|
|
43
45
|
import { TabsContext, useTabsContext } from "./tabs/TabsContext.js";
|
|
@@ -52,4 +54,4 @@ import { DEFAULT_ALERT_DURATION, toast, toastError, toastInfo, toastSuccess, toa
|
|
|
52
54
|
import "./toast/index.js";
|
|
53
55
|
import { cn } from "@pixpilot/shadcn";
|
|
54
56
|
|
|
55
|
-
export { AbsoluteFill, Alert, AvatarUpload, Button, CircleLoader, CloseButtonAbsolute, CloseButtonRounded, ColorPicker, ColorPickerBase, Combobox, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DialogProvider, FileUpload, FileUploadInline, IconPicker, Layout, LayoutFooter, LayoutHeader, LayoutMain, LoadingOverlay, Pagination, RichTextEditor, ScaledPreview, Select, Slider, Tabs, TabsContent, TabsContext, TabsList, TabsTrigger, TagsInput, ThemeProvider, ThemeToggle, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTabsContext, useTheme };
|
|
57
|
+
export { AbsoluteFill, Alert, AvatarUpload, Button, CircleLoader, CloseButtonAbsolute, CloseButtonRounded, ColorPicker, ColorPickerBase, Combobox, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DialogProvider, FileUpload, FileUploadInline, IconPicker, Layout, LayoutFooter, LayoutHeader, LayoutMain, LoadingOverlay, Pagination, RichTextEditor, ScaledPreview, Select, Slider, SliderInput, Tabs, TabsContent, TabsContext, TabsList, TabsTrigger, TagsInput, ThemeProvider, ThemeToggle, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTabsContext, useTheme };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const require_rolldown_runtime = require('
|
|
1
|
+
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
|
|
2
2
|
let __pixpilot_shadcn = require("@pixpilot/shadcn");
|
|
3
3
|
__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
|
|
4
4
|
let react = require("react");
|
|
@@ -6,7 +6,7 @@ react = require_rolldown_runtime.__toESM(react);
|
|
|
6
6
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
7
7
|
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
8
8
|
|
|
9
|
-
//#region src/Slider.tsx
|
|
9
|
+
//#region src/slider/Slider.tsx
|
|
10
10
|
const Slider = (props) => {
|
|
11
11
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Slider, {
|
|
12
12
|
...props,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Slider } from "@pixpilot/shadcn";
|
|
2
2
|
import React from "react";
|
|
3
3
|
|
|
4
|
-
//#region src/Slider.d.ts
|
|
4
|
+
//#region src/slider/Slider.d.ts
|
|
5
5
|
interface SliderProps extends React.ComponentProps<typeof Slider> {}
|
|
6
6
|
declare const Slider$1: React.FC<SliderProps>;
|
|
7
7
|
//#endregion
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Slider } from "@pixpilot/shadcn";
|
|
2
2
|
import React from "react";
|
|
3
3
|
|
|
4
|
-
//#region src/Slider.d.ts
|
|
4
|
+
//#region src/slider/Slider.d.ts
|
|
5
5
|
interface SliderProps extends React.ComponentProps<typeof Slider> {}
|
|
6
6
|
declare const Slider$1: React.FC<SliderProps>;
|
|
7
7
|
//#endregion
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
|
|
2
|
+
const require_use_controlled = require('../hooks/src/use-controlled.cjs');
|
|
3
|
+
require('../hooks/src/index.cjs');
|
|
4
|
+
const require_Slider = require('./Slider.cjs');
|
|
5
|
+
let __pixpilot_shadcn = require("@pixpilot/shadcn");
|
|
6
|
+
__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
|
|
7
|
+
let react = require("react");
|
|
8
|
+
react = require_rolldown_runtime.__toESM(react);
|
|
9
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
10
|
+
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
11
|
+
|
|
12
|
+
//#region src/slider/SliderInput.tsx
|
|
13
|
+
function clampNumber(input, min, max) {
|
|
14
|
+
let value = input;
|
|
15
|
+
if (typeof min === "number") value = Math.max(min, value);
|
|
16
|
+
if (typeof max === "number") value = Math.min(max, value);
|
|
17
|
+
return value;
|
|
18
|
+
}
|
|
19
|
+
const SliderInput = (props) => {
|
|
20
|
+
const { showInput = true, min, max, step, value: valueProp, defaultValue, disabled, className, style, id, input, slider,...rest } = props;
|
|
21
|
+
const inputKeysRef = react.default.useRef([]);
|
|
22
|
+
const nextKeyIdRef = react.default.useRef(0);
|
|
23
|
+
const [currentValue, setCurrentValue] = require_use_controlled.default({
|
|
24
|
+
controlled: valueProp,
|
|
25
|
+
default: react.default.useMemo(() => {
|
|
26
|
+
if (Array.isArray(defaultValue)) return defaultValue;
|
|
27
|
+
if (Array.isArray(valueProp)) return valueProp;
|
|
28
|
+
return [typeof min === "number" ? min : 0];
|
|
29
|
+
}, [
|
|
30
|
+
defaultValue,
|
|
31
|
+
valueProp,
|
|
32
|
+
min
|
|
33
|
+
]),
|
|
34
|
+
name: "SliderInput",
|
|
35
|
+
state: "value"
|
|
36
|
+
});
|
|
37
|
+
if (inputKeysRef.current.length !== currentValue.length) if (inputKeysRef.current.length < currentValue.length) {
|
|
38
|
+
const toAdd = currentValue.length - inputKeysRef.current.length;
|
|
39
|
+
for (let j = 0; j < toAdd; j += 1) inputKeysRef.current.push(`slider-input-${nextKeyIdRef.current++}`);
|
|
40
|
+
} else inputKeysRef.current = inputKeysRef.current.slice(0, currentValue.length);
|
|
41
|
+
const handleValueChange = (next) => {
|
|
42
|
+
setCurrentValue(next);
|
|
43
|
+
props.onValueChange?.(next);
|
|
44
|
+
};
|
|
45
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
46
|
+
id,
|
|
47
|
+
className: "flex items-center gap-2",
|
|
48
|
+
style,
|
|
49
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Slider.Slider, {
|
|
50
|
+
...rest,
|
|
51
|
+
className: slider?.className,
|
|
52
|
+
id: id ?? `${id}-slider`,
|
|
53
|
+
min,
|
|
54
|
+
max,
|
|
55
|
+
step,
|
|
56
|
+
disabled,
|
|
57
|
+
value: currentValue,
|
|
58
|
+
onValueChange: handleValueChange
|
|
59
|
+
}), showInput && Array.isArray(currentValue) && currentValue.map((v, i) => /* @__PURE__ */ (0, react.createElement)(__pixpilot_shadcn.Input, {
|
|
60
|
+
...input,
|
|
61
|
+
id: id ?? `${id}-input-${i}`,
|
|
62
|
+
key: inputKeysRef.current[i],
|
|
63
|
+
type: "number",
|
|
64
|
+
value: v,
|
|
65
|
+
min,
|
|
66
|
+
max,
|
|
67
|
+
step,
|
|
68
|
+
disabled,
|
|
69
|
+
onChange: (e) => {
|
|
70
|
+
const nextNumber = e.currentTarget.valueAsNumber;
|
|
71
|
+
if (Number.isNaN(nextNumber)) return;
|
|
72
|
+
const next = [...currentValue];
|
|
73
|
+
next[i] = clampNumber(nextNumber, min, max);
|
|
74
|
+
handleValueChange(next);
|
|
75
|
+
},
|
|
76
|
+
className: (0, __pixpilot_shadcn.cn)("w-25", input?.className)
|
|
77
|
+
}))]
|
|
78
|
+
});
|
|
79
|
+
};
|
|
80
|
+
SliderInput.displayName = "SliderInput";
|
|
81
|
+
|
|
82
|
+
//#endregion
|
|
83
|
+
exports.SliderInput = SliderInput;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { Slider } from "./Slider.cjs";
|
|
2
|
+
import React from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/slider/SliderInput.d.ts
|
|
5
|
+
interface SliderInputProps extends React.ComponentProps<typeof Slider> {
|
|
6
|
+
showInput?: boolean;
|
|
7
|
+
input?: {
|
|
8
|
+
className?: string;
|
|
9
|
+
};
|
|
10
|
+
slider?: {
|
|
11
|
+
className?: string;
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
declare const SliderInput: React.FC<SliderInputProps>;
|
|
15
|
+
//#endregion
|
|
16
|
+
export { SliderInput, SliderInputProps };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { Slider } from "./Slider.js";
|
|
2
|
+
import React from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/slider/SliderInput.d.ts
|
|
5
|
+
interface SliderInputProps extends React.ComponentProps<typeof Slider> {
|
|
6
|
+
showInput?: boolean;
|
|
7
|
+
input?: {
|
|
8
|
+
className?: string;
|
|
9
|
+
};
|
|
10
|
+
slider?: {
|
|
11
|
+
className?: string;
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
declare const SliderInput: React.FC<SliderInputProps>;
|
|
15
|
+
//#endregion
|
|
16
|
+
export { SliderInput, SliderInputProps };
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import useControlled from "../hooks/src/use-controlled.js";
|
|
2
|
+
import "../hooks/src/index.js";
|
|
3
|
+
import { Slider as Slider$1 } from "./Slider.js";
|
|
4
|
+
import { Input, cn } from "@pixpilot/shadcn";
|
|
5
|
+
import React, { createElement } from "react";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
|
|
8
|
+
//#region src/slider/SliderInput.tsx
|
|
9
|
+
function clampNumber(input, min, max) {
|
|
10
|
+
let value = input;
|
|
11
|
+
if (typeof min === "number") value = Math.max(min, value);
|
|
12
|
+
if (typeof max === "number") value = Math.min(max, value);
|
|
13
|
+
return value;
|
|
14
|
+
}
|
|
15
|
+
const SliderInput = (props) => {
|
|
16
|
+
const { showInput = true, min, max, step, value: valueProp, defaultValue, disabled, className, style, id, input, slider,...rest } = props;
|
|
17
|
+
const inputKeysRef = React.useRef([]);
|
|
18
|
+
const nextKeyIdRef = React.useRef(0);
|
|
19
|
+
const [currentValue, setCurrentValue] = useControlled({
|
|
20
|
+
controlled: valueProp,
|
|
21
|
+
default: React.useMemo(() => {
|
|
22
|
+
if (Array.isArray(defaultValue)) return defaultValue;
|
|
23
|
+
if (Array.isArray(valueProp)) return valueProp;
|
|
24
|
+
return [typeof min === "number" ? min : 0];
|
|
25
|
+
}, [
|
|
26
|
+
defaultValue,
|
|
27
|
+
valueProp,
|
|
28
|
+
min
|
|
29
|
+
]),
|
|
30
|
+
name: "SliderInput",
|
|
31
|
+
state: "value"
|
|
32
|
+
});
|
|
33
|
+
if (inputKeysRef.current.length !== currentValue.length) if (inputKeysRef.current.length < currentValue.length) {
|
|
34
|
+
const toAdd = currentValue.length - inputKeysRef.current.length;
|
|
35
|
+
for (let j = 0; j < toAdd; j += 1) inputKeysRef.current.push(`slider-input-${nextKeyIdRef.current++}`);
|
|
36
|
+
} else inputKeysRef.current = inputKeysRef.current.slice(0, currentValue.length);
|
|
37
|
+
const handleValueChange = (next) => {
|
|
38
|
+
setCurrentValue(next);
|
|
39
|
+
props.onValueChange?.(next);
|
|
40
|
+
};
|
|
41
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
42
|
+
id,
|
|
43
|
+
className: "flex items-center gap-2",
|
|
44
|
+
style,
|
|
45
|
+
children: [/* @__PURE__ */ jsx(Slider$1, {
|
|
46
|
+
...rest,
|
|
47
|
+
className: slider?.className,
|
|
48
|
+
id: id ?? `${id}-slider`,
|
|
49
|
+
min,
|
|
50
|
+
max,
|
|
51
|
+
step,
|
|
52
|
+
disabled,
|
|
53
|
+
value: currentValue,
|
|
54
|
+
onValueChange: handleValueChange
|
|
55
|
+
}), showInput && Array.isArray(currentValue) && currentValue.map((v, i) => /* @__PURE__ */ createElement(Input, {
|
|
56
|
+
...input,
|
|
57
|
+
id: id ?? `${id}-input-${i}`,
|
|
58
|
+
key: inputKeysRef.current[i],
|
|
59
|
+
type: "number",
|
|
60
|
+
value: v,
|
|
61
|
+
min,
|
|
62
|
+
max,
|
|
63
|
+
step,
|
|
64
|
+
disabled,
|
|
65
|
+
onChange: (e) => {
|
|
66
|
+
const nextNumber = e.currentTarget.valueAsNumber;
|
|
67
|
+
if (Number.isNaN(nextNumber)) return;
|
|
68
|
+
const next = [...currentValue];
|
|
69
|
+
next[i] = clampNumber(nextNumber, min, max);
|
|
70
|
+
handleValueChange(next);
|
|
71
|
+
},
|
|
72
|
+
className: cn("w-25", input?.className)
|
|
73
|
+
}))]
|
|
74
|
+
});
|
|
75
|
+
};
|
|
76
|
+
SliderInput.displayName = "SliderInput";
|
|
77
|
+
|
|
78
|
+
//#endregion
|
|
79
|
+
export { SliderInput };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pixpilot/shadcn-ui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.16.0",
|
|
5
5
|
"description": "Custom UI components and utilities built with shadcn/ui.",
|
|
6
6
|
"author": "m.doaie <m.doaie@hotmail.com>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -44,8 +44,7 @@
|
|
|
44
44
|
"pretty-bytes": "^7.1.0",
|
|
45
45
|
"react-responsive": "^10.0.1",
|
|
46
46
|
"sonner": "2.0.7",
|
|
47
|
-
"@
|
|
48
|
-
"@pixpilot/shadcn": "0.6.0"
|
|
47
|
+
"@pixpilot/shadcn": "0.6.1"
|
|
49
48
|
},
|
|
50
49
|
"devDependencies": {
|
|
51
50
|
"@storybook/react": "^8.6.14",
|
|
@@ -58,10 +57,11 @@
|
|
|
58
57
|
"react-dom": "19.2.0",
|
|
59
58
|
"tsdown": "^0.15.12",
|
|
60
59
|
"typescript": "^5.9.3",
|
|
61
|
-
"@internal/eslint-config": "0.3.0",
|
|
62
60
|
"@internal/prettier-config": "0.0.1",
|
|
63
|
-
"@internal/
|
|
61
|
+
"@internal/hooks": "0.0.0",
|
|
62
|
+
"@internal/eslint-config": "0.3.0",
|
|
64
63
|
"@internal/tsdown-config": "0.1.0",
|
|
64
|
+
"@internal/tsconfig": "0.1.0",
|
|
65
65
|
"@internal/vitest-config": "0.1.0"
|
|
66
66
|
},
|
|
67
67
|
"prettier": "@internal/prettier-config",
|