@pixpilot/shadcn-ui 0.64.0 → 0.67.1
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/Button.cjs +11 -77
- package/dist/Button.d.cts +1 -24
- package/dist/Button.d.ts +3 -26
- package/dist/Button.js +13 -78
- package/dist/ButtonExtended.cjs +104 -0
- package/dist/ButtonExtended.d.cts +58 -0
- package/dist/ButtonExtended.d.ts +58 -0
- package/dist/ButtonExtended.js +99 -0
- package/dist/ColorPickerBase/hooks/use-color-picker-base-value.cjs +1 -0
- package/dist/ColorPickerBase/hooks/use-color-picker-base-value.js +1 -0
- package/dist/ColorSelect.d.cts +2 -2
- package/dist/ColorSelect.d.ts +2 -2
- package/dist/ContentCard.d.cts +2 -2
- package/dist/ContentCard.d.ts +2 -2
- package/dist/DatePicker.d.cts +2 -2
- package/dist/DatePicker.d.ts +2 -2
- package/dist/IconToggle.cjs +44 -66
- package/dist/IconToggle.d.cts +2 -46
- package/dist/IconToggle.d.ts +2 -46
- package/dist/IconToggle.js +45 -66
- package/dist/Rating.d.cts +4 -4
- package/dist/Rating.d.ts +4 -4
- package/dist/Select.d.cts +2 -2
- package/dist/Select.d.ts +2 -2
- package/dist/ToggleButton.cjs +46 -0
- package/dist/ToggleButton.d.cts +41 -0
- package/dist/ToggleButton.d.ts +41 -0
- package/dist/ToggleButton.js +43 -0
- package/dist/dialog/Dialog.d.cts +4 -4
- package/dist/dialog/Dialog.d.ts +4 -4
- package/dist/file-upload/FileUpload.d.cts +2 -2
- package/dist/file-upload/FileUpload.d.ts +2 -2
- package/dist/file-upload-inline/FileUploadInline.d.ts +2 -2
- package/dist/file-upload-root/FileUploadRoot.d.ts +2 -2
- package/dist/index.cjs +4 -0
- package/dist/index.d.cts +4 -2
- package/dist/index.d.ts +4 -2
- package/dist/index.js +3 -1
- package/dist/input/Input.d.cts +2 -2
- package/dist/input/Input.d.ts +2 -2
- package/dist/tags-input/TagsInput.d.cts +2 -2
- package/dist/tags-input/TagsInputInline.d.cts +2 -2
- package/dist/tags-input/TagsInputInline.d.ts +2 -2
- package/dist/theme-toggle/ThemeModeDropdown.d.cts +2 -2
- package/dist/theme-toggle/ThemeModeSwitchInside.d.cts +2 -2
- package/dist/theme-toggle/ThemeModeSwitchOutside.d.cts +2 -2
- package/dist/theme-toggle/ThemeModeToggleButton.d.cts +2 -2
- package/dist/theme-toggle/ThemeModeToggleButton.d.ts +2 -2
- package/package.json +2 -2
package/dist/Button.cjs
CHANGED
|
@@ -2,101 +2,35 @@ const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
|
|
|
2
2
|
const require_AbsoluteFill = require('./AbsoluteFill.cjs');
|
|
3
3
|
let __pixpilot_shadcn = require("@pixpilot/shadcn");
|
|
4
4
|
__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
|
|
5
|
-
let lucide_react = require("lucide-react");
|
|
6
|
-
lucide_react = require_rolldown_runtime.__toESM(lucide_react);
|
|
7
5
|
let react = require("react");
|
|
8
6
|
react = require_rolldown_runtime.__toESM(react);
|
|
9
7
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
10
8
|
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
11
9
|
|
|
12
10
|
//#region src/Button.tsx
|
|
13
|
-
const LOADER_SIZE_SM = 14;
|
|
14
|
-
const LOADER_SIZE_DEFAULT = 16;
|
|
15
|
-
const LOADER_SIZE_LG = 20;
|
|
16
|
-
/**
|
|
17
|
-
* Get loader size based on button size
|
|
18
|
-
*/
|
|
19
|
-
function getLoaderSize(size) {
|
|
20
|
-
if (size === "xs" || size === "sm" || size === "icon-xs" || size === "icon-sm") return LOADER_SIZE_SM;
|
|
21
|
-
if (size === "lg" || size === "icon-lg") return LOADER_SIZE_LG;
|
|
22
|
-
return LOADER_SIZE_DEFAULT;
|
|
23
|
-
}
|
|
24
|
-
/**
|
|
25
|
-
* Render tooltip content. If it's a string containing newlines, split into
|
|
26
|
-
* paragraphs; otherwise render the node as-is.
|
|
27
|
-
*/
|
|
28
|
-
async function renderTooltipContent(content) {
|
|
29
|
-
if (typeof content === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: content.split("\n").map((line, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: line }, i)) });
|
|
30
|
-
return content;
|
|
31
|
-
}
|
|
32
11
|
function Button(props) {
|
|
33
|
-
const { children, disabled, onClick,
|
|
34
|
-
const { placement: loaderPlacement = "end" } = loaderProps || {};
|
|
12
|
+
const { children, disabled, onClick, onDisabledClick, title, slots, className, variant, size, ref,...rest } = props;
|
|
35
13
|
const handleClick = (0, react.useCallback)((e) => {
|
|
36
14
|
if (onClick && !disabled) onClick(e);
|
|
37
15
|
}, [disabled, onClick]);
|
|
38
|
-
|
|
39
|
-
const hasTooltip = Boolean(tooltip);
|
|
40
|
-
const hasDisabledTooltip = Boolean(disabledTooltip) && isDisabled;
|
|
41
|
-
const showTooltip = hasTooltip || hasDisabledTooltip;
|
|
42
|
-
const tooltipContent = hasDisabledTooltip ? disabledTooltip : tooltip;
|
|
43
|
-
const hasArea = variant !== "ghost" && variant !== "link";
|
|
44
|
-
const Loader = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
45
|
-
"data-slot": "button-loader",
|
|
46
|
-
className: (0, __pixpilot_shadcn.cn)("flex items-center justify-center", loaderPlacement === "center" && "rounded-0 absolute inset-0", hasArea && loaderPlacement === "start" && "mr-1", hasArea && loaderPlacement === "end" && "ml-1"),
|
|
47
|
-
...slots?.loaderContainer,
|
|
48
|
-
children: slots?.loader ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, {
|
|
49
|
-
className: "animate-spin",
|
|
50
|
-
style: {
|
|
51
|
-
height: getLoaderSize(size),
|
|
52
|
-
width: getLoaderSize(size)
|
|
53
|
-
}
|
|
54
|
-
})
|
|
55
|
-
});
|
|
56
|
-
const buttonContent = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
|
|
16
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
|
|
57
17
|
...rest,
|
|
58
18
|
ref,
|
|
59
|
-
disabled
|
|
19
|
+
disabled,
|
|
60
20
|
onClick: handleClick,
|
|
61
21
|
className: (0, __pixpilot_shadcn.cn)("relative", className),
|
|
62
22
|
variant,
|
|
63
23
|
size,
|
|
64
24
|
title,
|
|
65
|
-
children: [
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
style: {
|
|
74
|
-
pointerEvents: "all",
|
|
75
|
-
cursor: "not-allowed"
|
|
76
|
-
}
|
|
77
|
-
})
|
|
78
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TooltipContent, {
|
|
79
|
-
...slots?.tooltipContent,
|
|
80
|
-
children: renderTooltipContent(disabledTooltip)
|
|
81
|
-
})]
|
|
82
|
-
}),
|
|
83
|
-
loading && loaderPlacement === "start" && Loader,
|
|
84
|
-
children,
|
|
85
|
-
loading && (loaderPlacement === "end" || loaderPlacement === "center") && Loader
|
|
86
|
-
]
|
|
87
|
-
});
|
|
88
|
-
if (showTooltip && !(Boolean(disabledTooltip) && isDisabled)) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Tooltip, {
|
|
89
|
-
...slots?.tooltip,
|
|
90
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TooltipTrigger, {
|
|
91
|
-
asChild: true,
|
|
92
|
-
...slots?.tooltipTrigger,
|
|
93
|
-
children: buttonContent
|
|
94
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TooltipContent, {
|
|
95
|
-
...slots?.tooltipContent,
|
|
96
|
-
children: renderTooltipContent(tooltipContent)
|
|
97
|
-
})]
|
|
25
|
+
children: [Boolean(disabled) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AbsoluteFill.AbsoluteFill, {
|
|
26
|
+
title,
|
|
27
|
+
onClick: onDisabledClick,
|
|
28
|
+
style: {
|
|
29
|
+
pointerEvents: "all",
|
|
30
|
+
cursor: "not-allowed"
|
|
31
|
+
}
|
|
32
|
+
}), children]
|
|
98
33
|
});
|
|
99
|
-
return buttonContent;
|
|
100
34
|
}
|
|
101
35
|
Button.displayName = "Button";
|
|
102
36
|
|
package/dist/Button.d.cts
CHANGED
|
@@ -4,30 +4,7 @@ import React from "react";
|
|
|
4
4
|
import { VariantProps } from "class-variance-authority";
|
|
5
5
|
|
|
6
6
|
//#region src/Button.d.ts
|
|
7
|
-
interface ButtonLoaderProps {
|
|
8
|
-
/**
|
|
9
|
-
* Position of the loader relative to button content
|
|
10
|
-
* @default 'end'
|
|
11
|
-
*/
|
|
12
|
-
placement?: 'start' | 'end' | 'center';
|
|
13
|
-
}
|
|
14
7
|
interface ButtonProps extends React.ComponentProps<typeof Button>, VariantProps<typeof buttonVariants> {
|
|
15
|
-
/**
|
|
16
|
-
* Tooltip message to show when button is disabled
|
|
17
|
-
*/
|
|
18
|
-
disabledTooltip?: React.ReactNode;
|
|
19
|
-
/**
|
|
20
|
-
* Regular tooltip message
|
|
21
|
-
*/
|
|
22
|
-
tooltip?: React.ReactNode;
|
|
23
|
-
/**
|
|
24
|
-
* Loading state
|
|
25
|
-
*/
|
|
26
|
-
loading?: boolean;
|
|
27
|
-
/**
|
|
28
|
-
* Loader configuration
|
|
29
|
-
*/
|
|
30
|
-
loaderProps?: ButtonLoaderProps;
|
|
31
8
|
/**
|
|
32
9
|
* Click handler for when disabled button is clicked
|
|
33
10
|
*/
|
|
@@ -55,4 +32,4 @@ declare namespace Button$1 {
|
|
|
55
32
|
var displayName: string;
|
|
56
33
|
}
|
|
57
34
|
//#endregion
|
|
58
|
-
export { Button$1 as Button,
|
|
35
|
+
export { Button$1 as Button, ButtonProps };
|
package/dist/Button.d.ts
CHANGED
|
@@ -1,33 +1,10 @@
|
|
|
1
1
|
import { Button, Tooltip, TooltipContent, TooltipTrigger, buttonVariants } from "@pixpilot/shadcn";
|
|
2
2
|
import React from "react";
|
|
3
|
-
import * as
|
|
3
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
4
4
|
import { VariantProps } from "class-variance-authority";
|
|
5
5
|
|
|
6
6
|
//#region src/Button.d.ts
|
|
7
|
-
interface ButtonLoaderProps {
|
|
8
|
-
/**
|
|
9
|
-
* Position of the loader relative to button content
|
|
10
|
-
* @default 'end'
|
|
11
|
-
*/
|
|
12
|
-
placement?: 'start' | 'end' | 'center';
|
|
13
|
-
}
|
|
14
7
|
interface ButtonProps extends React.ComponentProps<typeof Button>, VariantProps<typeof buttonVariants> {
|
|
15
|
-
/**
|
|
16
|
-
* Tooltip message to show when button is disabled
|
|
17
|
-
*/
|
|
18
|
-
disabledTooltip?: React.ReactNode;
|
|
19
|
-
/**
|
|
20
|
-
* Regular tooltip message
|
|
21
|
-
*/
|
|
22
|
-
tooltip?: React.ReactNode;
|
|
23
|
-
/**
|
|
24
|
-
* Loading state
|
|
25
|
-
*/
|
|
26
|
-
loading?: boolean;
|
|
27
|
-
/**
|
|
28
|
-
* Loader configuration
|
|
29
|
-
*/
|
|
30
|
-
loaderProps?: ButtonLoaderProps;
|
|
31
8
|
/**
|
|
32
9
|
* Click handler for when disabled button is clicked
|
|
33
10
|
*/
|
|
@@ -50,9 +27,9 @@ interface ButtonProps extends React.ComponentProps<typeof Button>, VariantProps<
|
|
|
50
27
|
}
|
|
51
28
|
declare function Button$1(props: ButtonProps & {
|
|
52
29
|
ref?: React.Ref<HTMLButtonElement>;
|
|
53
|
-
}):
|
|
30
|
+
}): react_jsx_runtime0.JSX.Element;
|
|
54
31
|
declare namespace Button$1 {
|
|
55
32
|
var displayName: string;
|
|
56
33
|
}
|
|
57
34
|
//#endregion
|
|
58
|
-
export { Button$1 as Button,
|
|
35
|
+
export { Button$1 as Button, ButtonProps };
|
package/dist/Button.js
CHANGED
|
@@ -1,97 +1,32 @@
|
|
|
1
1
|
import { AbsoluteFill } from "./AbsoluteFill.js";
|
|
2
|
-
import { Button,
|
|
3
|
-
import { Loader2 } from "lucide-react";
|
|
2
|
+
import { Button, cn } from "@pixpilot/shadcn";
|
|
4
3
|
import React, { useCallback } from "react";
|
|
5
|
-
import {
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
5
|
|
|
7
6
|
//#region src/Button.tsx
|
|
8
|
-
const LOADER_SIZE_SM = 14;
|
|
9
|
-
const LOADER_SIZE_DEFAULT = 16;
|
|
10
|
-
const LOADER_SIZE_LG = 20;
|
|
11
|
-
/**
|
|
12
|
-
* Get loader size based on button size
|
|
13
|
-
*/
|
|
14
|
-
function getLoaderSize(size) {
|
|
15
|
-
if (size === "xs" || size === "sm" || size === "icon-xs" || size === "icon-sm") return LOADER_SIZE_SM;
|
|
16
|
-
if (size === "lg" || size === "icon-lg") return LOADER_SIZE_LG;
|
|
17
|
-
return LOADER_SIZE_DEFAULT;
|
|
18
|
-
}
|
|
19
|
-
/**
|
|
20
|
-
* Render tooltip content. If it's a string containing newlines, split into
|
|
21
|
-
* paragraphs; otherwise render the node as-is.
|
|
22
|
-
*/
|
|
23
|
-
async function renderTooltipContent(content) {
|
|
24
|
-
if (typeof content === "string") return /* @__PURE__ */ jsx(Fragment, { children: content.split("\n").map((line, i) => /* @__PURE__ */ jsx("p", { children: line }, i)) });
|
|
25
|
-
return content;
|
|
26
|
-
}
|
|
27
7
|
function Button$1(props) {
|
|
28
|
-
const { children, disabled, onClick,
|
|
29
|
-
const { placement: loaderPlacement = "end" } = loaderProps || {};
|
|
8
|
+
const { children, disabled, onClick, onDisabledClick, title, slots, className, variant, size, ref,...rest } = props;
|
|
30
9
|
const handleClick = useCallback((e) => {
|
|
31
10
|
if (onClick && !disabled) onClick(e);
|
|
32
11
|
}, [disabled, onClick]);
|
|
33
|
-
|
|
34
|
-
const hasTooltip = Boolean(tooltip);
|
|
35
|
-
const hasDisabledTooltip = Boolean(disabledTooltip) && isDisabled;
|
|
36
|
-
const showTooltip = hasTooltip || hasDisabledTooltip;
|
|
37
|
-
const tooltipContent = hasDisabledTooltip ? disabledTooltip : tooltip;
|
|
38
|
-
const hasArea = variant !== "ghost" && variant !== "link";
|
|
39
|
-
const Loader = /* @__PURE__ */ jsx("div", {
|
|
40
|
-
"data-slot": "button-loader",
|
|
41
|
-
className: cn("flex items-center justify-center", loaderPlacement === "center" && "rounded-0 absolute inset-0", hasArea && loaderPlacement === "start" && "mr-1", hasArea && loaderPlacement === "end" && "ml-1"),
|
|
42
|
-
...slots?.loaderContainer,
|
|
43
|
-
children: slots?.loader ?? /* @__PURE__ */ jsx(Loader2, {
|
|
44
|
-
className: "animate-spin",
|
|
45
|
-
style: {
|
|
46
|
-
height: getLoaderSize(size),
|
|
47
|
-
width: getLoaderSize(size)
|
|
48
|
-
}
|
|
49
|
-
})
|
|
50
|
-
});
|
|
51
|
-
const buttonContent = /* @__PURE__ */ jsxs(Button, {
|
|
12
|
+
return /* @__PURE__ */ jsxs(Button, {
|
|
52
13
|
...rest,
|
|
53
14
|
ref,
|
|
54
|
-
disabled
|
|
15
|
+
disabled,
|
|
55
16
|
onClick: handleClick,
|
|
56
17
|
className: cn("relative", className),
|
|
57
18
|
variant,
|
|
58
19
|
size,
|
|
59
20
|
title,
|
|
60
|
-
children: [
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
style: {
|
|
69
|
-
pointerEvents: "all",
|
|
70
|
-
cursor: "not-allowed"
|
|
71
|
-
}
|
|
72
|
-
})
|
|
73
|
-
}), /* @__PURE__ */ jsx(TooltipContent, {
|
|
74
|
-
...slots?.tooltipContent,
|
|
75
|
-
children: renderTooltipContent(disabledTooltip)
|
|
76
|
-
})]
|
|
77
|
-
}),
|
|
78
|
-
loading && loaderPlacement === "start" && Loader,
|
|
79
|
-
children,
|
|
80
|
-
loading && (loaderPlacement === "end" || loaderPlacement === "center") && Loader
|
|
81
|
-
]
|
|
82
|
-
});
|
|
83
|
-
if (showTooltip && !(Boolean(disabledTooltip) && isDisabled)) return /* @__PURE__ */ jsxs(Tooltip, {
|
|
84
|
-
...slots?.tooltip,
|
|
85
|
-
children: [/* @__PURE__ */ jsx(TooltipTrigger, {
|
|
86
|
-
asChild: true,
|
|
87
|
-
...slots?.tooltipTrigger,
|
|
88
|
-
children: buttonContent
|
|
89
|
-
}), /* @__PURE__ */ jsx(TooltipContent, {
|
|
90
|
-
...slots?.tooltipContent,
|
|
91
|
-
children: renderTooltipContent(tooltipContent)
|
|
92
|
-
})]
|
|
21
|
+
children: [Boolean(disabled) && /* @__PURE__ */ jsx(AbsoluteFill, {
|
|
22
|
+
title,
|
|
23
|
+
onClick: onDisabledClick,
|
|
24
|
+
style: {
|
|
25
|
+
pointerEvents: "all",
|
|
26
|
+
cursor: "not-allowed"
|
|
27
|
+
}
|
|
28
|
+
}), children]
|
|
93
29
|
});
|
|
94
|
-
return buttonContent;
|
|
95
30
|
}
|
|
96
31
|
Button$1.displayName = "Button";
|
|
97
32
|
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
|
|
2
|
+
const require_AbsoluteFill = require('./AbsoluteFill.cjs');
|
|
3
|
+
let __pixpilot_shadcn = require("@pixpilot/shadcn");
|
|
4
|
+
__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
|
|
5
|
+
let lucide_react = require("lucide-react");
|
|
6
|
+
lucide_react = require_rolldown_runtime.__toESM(lucide_react);
|
|
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/ButtonExtended.tsx
|
|
13
|
+
const LOADER_SIZE_SM = 14;
|
|
14
|
+
const LOADER_SIZE_DEFAULT = 16;
|
|
15
|
+
const LOADER_SIZE_LG = 20;
|
|
16
|
+
/**
|
|
17
|
+
* Get loader size based on button size
|
|
18
|
+
*/
|
|
19
|
+
function getLoaderSize(size) {
|
|
20
|
+
if (size === "xs" || size === "sm" || size === "icon-xs" || size === "icon-sm") return LOADER_SIZE_SM;
|
|
21
|
+
if (size === "lg" || size === "icon-lg") return LOADER_SIZE_LG;
|
|
22
|
+
return LOADER_SIZE_DEFAULT;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Render tooltip content. If it's a string containing newlines, split into
|
|
26
|
+
* paragraphs; otherwise render the node as-is.
|
|
27
|
+
*/
|
|
28
|
+
async function renderTooltipContent(content) {
|
|
29
|
+
if (typeof content === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: content.split("\n").map((line, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: line }, i)) });
|
|
30
|
+
return content;
|
|
31
|
+
}
|
|
32
|
+
function ButtonExtended(props) {
|
|
33
|
+
const { children, disabled, onClick, disabledTooltip, loading, loaderProps, onDisabledClick, tooltip, title, slots, className, variant, size, ref,...rest } = props;
|
|
34
|
+
const { placement: loaderPlacement = "end" } = loaderProps || {};
|
|
35
|
+
const handleClick = (0, react.useCallback)((e) => {
|
|
36
|
+
if (onClick && !disabled) onClick(e);
|
|
37
|
+
}, [disabled, onClick]);
|
|
38
|
+
const isDisabled = disabled || loading;
|
|
39
|
+
const hasTooltip = Boolean(tooltip);
|
|
40
|
+
const hasDisabledTooltip = Boolean(disabledTooltip) && isDisabled;
|
|
41
|
+
const showTooltip = hasTooltip || hasDisabledTooltip;
|
|
42
|
+
const tooltipContent = hasDisabledTooltip ? disabledTooltip : tooltip;
|
|
43
|
+
const hasArea = variant !== "ghost" && variant !== "link";
|
|
44
|
+
const Loader = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
45
|
+
"data-slot": "button-loader",
|
|
46
|
+
className: (0, __pixpilot_shadcn.cn)("flex items-center justify-center", loaderPlacement === "center" && "rounded-0 absolute inset-0", hasArea && loaderPlacement === "start" && "mr-1", hasArea && loaderPlacement === "end" && "ml-1"),
|
|
47
|
+
...slots?.loaderContainer,
|
|
48
|
+
children: slots?.loader ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, {
|
|
49
|
+
className: "animate-spin",
|
|
50
|
+
style: {
|
|
51
|
+
height: getLoaderSize(size),
|
|
52
|
+
width: getLoaderSize(size)
|
|
53
|
+
}
|
|
54
|
+
})
|
|
55
|
+
});
|
|
56
|
+
const buttonContent = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
|
|
57
|
+
...rest,
|
|
58
|
+
ref,
|
|
59
|
+
disabled: isDisabled,
|
|
60
|
+
onClick: handleClick,
|
|
61
|
+
className: (0, __pixpilot_shadcn.cn)("relative", className),
|
|
62
|
+
variant,
|
|
63
|
+
size,
|
|
64
|
+
title,
|
|
65
|
+
children: [
|
|
66
|
+
Boolean(disabledTooltip) && isDisabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Tooltip, {
|
|
67
|
+
...slots?.tooltip,
|
|
68
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TooltipTrigger, {
|
|
69
|
+
asChild: true,
|
|
70
|
+
...slots?.tooltipTrigger,
|
|
71
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AbsoluteFill.AbsoluteFill, {
|
|
72
|
+
onClick: onDisabledClick,
|
|
73
|
+
style: {
|
|
74
|
+
pointerEvents: "all",
|
|
75
|
+
cursor: "not-allowed"
|
|
76
|
+
}
|
|
77
|
+
})
|
|
78
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TooltipContent, {
|
|
79
|
+
...slots?.tooltipContent,
|
|
80
|
+
children: renderTooltipContent(disabledTooltip)
|
|
81
|
+
})]
|
|
82
|
+
}),
|
|
83
|
+
loading && loaderPlacement === "start" && Loader,
|
|
84
|
+
children,
|
|
85
|
+
loading && (loaderPlacement === "end" || loaderPlacement === "center") && Loader
|
|
86
|
+
]
|
|
87
|
+
});
|
|
88
|
+
if (showTooltip && !(Boolean(disabledTooltip) && isDisabled)) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Tooltip, {
|
|
89
|
+
...slots?.tooltip,
|
|
90
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TooltipTrigger, {
|
|
91
|
+
asChild: true,
|
|
92
|
+
...slots?.tooltipTrigger,
|
|
93
|
+
children: buttonContent
|
|
94
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TooltipContent, {
|
|
95
|
+
...slots?.tooltipContent,
|
|
96
|
+
children: renderTooltipContent(tooltipContent)
|
|
97
|
+
})]
|
|
98
|
+
});
|
|
99
|
+
return buttonContent;
|
|
100
|
+
}
|
|
101
|
+
ButtonExtended.displayName = "ButtonExtended";
|
|
102
|
+
|
|
103
|
+
//#endregion
|
|
104
|
+
exports.ButtonExtended = ButtonExtended;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import * as react_jsx_runtime1 from "react/jsx-runtime";
|
|
2
|
+
import { Button, Tooltip, TooltipContent, TooltipTrigger, buttonVariants } from "@pixpilot/shadcn";
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { VariantProps } from "class-variance-authority";
|
|
5
|
+
|
|
6
|
+
//#region src/ButtonExtended.d.ts
|
|
7
|
+
interface ButtonExtendedLoaderProps {
|
|
8
|
+
/**
|
|
9
|
+
* Position of the loader relative to button content
|
|
10
|
+
* @default 'end'
|
|
11
|
+
*/
|
|
12
|
+
placement?: 'start' | 'end' | 'center';
|
|
13
|
+
}
|
|
14
|
+
interface ButtonExtendedProps extends React.ComponentProps<typeof Button>, VariantProps<typeof buttonVariants> {
|
|
15
|
+
/**
|
|
16
|
+
* Tooltip message to show when button is disabled
|
|
17
|
+
*/
|
|
18
|
+
disabledTooltip?: React.ReactNode;
|
|
19
|
+
/**
|
|
20
|
+
* Regular tooltip message
|
|
21
|
+
*/
|
|
22
|
+
tooltip?: React.ReactNode;
|
|
23
|
+
/**
|
|
24
|
+
* Loading state
|
|
25
|
+
*/
|
|
26
|
+
loading?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Loader configuration
|
|
29
|
+
*/
|
|
30
|
+
loaderProps?: ButtonExtendedLoaderProps;
|
|
31
|
+
/**
|
|
32
|
+
* Click handler for when disabled button is clicked
|
|
33
|
+
*/
|
|
34
|
+
onDisabledClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
|
35
|
+
/**
|
|
36
|
+
* Props to pass to the tooltip component
|
|
37
|
+
*/
|
|
38
|
+
/**
|
|
39
|
+
* Slots to customize tooltip components and their props.
|
|
40
|
+
*/
|
|
41
|
+
slots?: {
|
|
42
|
+
tooltip?: Omit<React.ComponentProps<typeof Tooltip>, 'children' | 'delayDuration'>;
|
|
43
|
+
tooltipTrigger?: Omit<React.ComponentProps<typeof TooltipTrigger>, 'children'>;
|
|
44
|
+
tooltipContent?: React.ComponentProps<typeof TooltipContent>;
|
|
45
|
+
/** Props applied to the loader container element */
|
|
46
|
+
loaderContainer?: React.HTMLAttributes<HTMLDivElement>;
|
|
47
|
+
/** Custom loader node to render instead of the default `Loader2` */
|
|
48
|
+
loader?: React.ReactNode;
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
declare function ButtonExtended(props: ButtonExtendedProps & {
|
|
52
|
+
ref?: React.Ref<HTMLButtonElement>;
|
|
53
|
+
}): react_jsx_runtime1.JSX.Element;
|
|
54
|
+
declare namespace ButtonExtended {
|
|
55
|
+
var displayName: string;
|
|
56
|
+
}
|
|
57
|
+
//#endregion
|
|
58
|
+
export { ButtonExtended, ButtonExtendedLoaderProps, ButtonExtendedProps };
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { Button, Tooltip, TooltipContent, TooltipTrigger, buttonVariants } from "@pixpilot/shadcn";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import * as react_jsx_runtime1 from "react/jsx-runtime";
|
|
4
|
+
import { VariantProps } from "class-variance-authority";
|
|
5
|
+
|
|
6
|
+
//#region src/ButtonExtended.d.ts
|
|
7
|
+
interface ButtonExtendedLoaderProps {
|
|
8
|
+
/**
|
|
9
|
+
* Position of the loader relative to button content
|
|
10
|
+
* @default 'end'
|
|
11
|
+
*/
|
|
12
|
+
placement?: 'start' | 'end' | 'center';
|
|
13
|
+
}
|
|
14
|
+
interface ButtonExtendedProps extends React.ComponentProps<typeof Button>, VariantProps<typeof buttonVariants> {
|
|
15
|
+
/**
|
|
16
|
+
* Tooltip message to show when button is disabled
|
|
17
|
+
*/
|
|
18
|
+
disabledTooltip?: React.ReactNode;
|
|
19
|
+
/**
|
|
20
|
+
* Regular tooltip message
|
|
21
|
+
*/
|
|
22
|
+
tooltip?: React.ReactNode;
|
|
23
|
+
/**
|
|
24
|
+
* Loading state
|
|
25
|
+
*/
|
|
26
|
+
loading?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Loader configuration
|
|
29
|
+
*/
|
|
30
|
+
loaderProps?: ButtonExtendedLoaderProps;
|
|
31
|
+
/**
|
|
32
|
+
* Click handler for when disabled button is clicked
|
|
33
|
+
*/
|
|
34
|
+
onDisabledClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
|
35
|
+
/**
|
|
36
|
+
* Props to pass to the tooltip component
|
|
37
|
+
*/
|
|
38
|
+
/**
|
|
39
|
+
* Slots to customize tooltip components and their props.
|
|
40
|
+
*/
|
|
41
|
+
slots?: {
|
|
42
|
+
tooltip?: Omit<React.ComponentProps<typeof Tooltip>, 'children' | 'delayDuration'>;
|
|
43
|
+
tooltipTrigger?: Omit<React.ComponentProps<typeof TooltipTrigger>, 'children'>;
|
|
44
|
+
tooltipContent?: React.ComponentProps<typeof TooltipContent>;
|
|
45
|
+
/** Props applied to the loader container element */
|
|
46
|
+
loaderContainer?: React.HTMLAttributes<HTMLDivElement>;
|
|
47
|
+
/** Custom loader node to render instead of the default `Loader2` */
|
|
48
|
+
loader?: React.ReactNode;
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
declare function ButtonExtended(props: ButtonExtendedProps & {
|
|
52
|
+
ref?: React.Ref<HTMLButtonElement>;
|
|
53
|
+
}): react_jsx_runtime1.JSX.Element;
|
|
54
|
+
declare namespace ButtonExtended {
|
|
55
|
+
var displayName: string;
|
|
56
|
+
}
|
|
57
|
+
//#endregion
|
|
58
|
+
export { ButtonExtended, ButtonExtendedLoaderProps, ButtonExtendedProps };
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import { AbsoluteFill } from "./AbsoluteFill.js";
|
|
2
|
+
import { Button, Tooltip, TooltipContent, TooltipTrigger, cn } from "@pixpilot/shadcn";
|
|
3
|
+
import { Loader2 } from "lucide-react";
|
|
4
|
+
import React, { useCallback } from "react";
|
|
5
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
|
|
7
|
+
//#region src/ButtonExtended.tsx
|
|
8
|
+
const LOADER_SIZE_SM = 14;
|
|
9
|
+
const LOADER_SIZE_DEFAULT = 16;
|
|
10
|
+
const LOADER_SIZE_LG = 20;
|
|
11
|
+
/**
|
|
12
|
+
* Get loader size based on button size
|
|
13
|
+
*/
|
|
14
|
+
function getLoaderSize(size) {
|
|
15
|
+
if (size === "xs" || size === "sm" || size === "icon-xs" || size === "icon-sm") return LOADER_SIZE_SM;
|
|
16
|
+
if (size === "lg" || size === "icon-lg") return LOADER_SIZE_LG;
|
|
17
|
+
return LOADER_SIZE_DEFAULT;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Render tooltip content. If it's a string containing newlines, split into
|
|
21
|
+
* paragraphs; otherwise render the node as-is.
|
|
22
|
+
*/
|
|
23
|
+
async function renderTooltipContent(content) {
|
|
24
|
+
if (typeof content === "string") return /* @__PURE__ */ jsx(Fragment, { children: content.split("\n").map((line, i) => /* @__PURE__ */ jsx("p", { children: line }, i)) });
|
|
25
|
+
return content;
|
|
26
|
+
}
|
|
27
|
+
function ButtonExtended(props) {
|
|
28
|
+
const { children, disabled, onClick, disabledTooltip, loading, loaderProps, onDisabledClick, tooltip, title, slots, className, variant, size, ref,...rest } = props;
|
|
29
|
+
const { placement: loaderPlacement = "end" } = loaderProps || {};
|
|
30
|
+
const handleClick = useCallback((e) => {
|
|
31
|
+
if (onClick && !disabled) onClick(e);
|
|
32
|
+
}, [disabled, onClick]);
|
|
33
|
+
const isDisabled = disabled || loading;
|
|
34
|
+
const hasTooltip = Boolean(tooltip);
|
|
35
|
+
const hasDisabledTooltip = Boolean(disabledTooltip) && isDisabled;
|
|
36
|
+
const showTooltip = hasTooltip || hasDisabledTooltip;
|
|
37
|
+
const tooltipContent = hasDisabledTooltip ? disabledTooltip : tooltip;
|
|
38
|
+
const hasArea = variant !== "ghost" && variant !== "link";
|
|
39
|
+
const Loader = /* @__PURE__ */ jsx("div", {
|
|
40
|
+
"data-slot": "button-loader",
|
|
41
|
+
className: cn("flex items-center justify-center", loaderPlacement === "center" && "rounded-0 absolute inset-0", hasArea && loaderPlacement === "start" && "mr-1", hasArea && loaderPlacement === "end" && "ml-1"),
|
|
42
|
+
...slots?.loaderContainer,
|
|
43
|
+
children: slots?.loader ?? /* @__PURE__ */ jsx(Loader2, {
|
|
44
|
+
className: "animate-spin",
|
|
45
|
+
style: {
|
|
46
|
+
height: getLoaderSize(size),
|
|
47
|
+
width: getLoaderSize(size)
|
|
48
|
+
}
|
|
49
|
+
})
|
|
50
|
+
});
|
|
51
|
+
const buttonContent = /* @__PURE__ */ jsxs(Button, {
|
|
52
|
+
...rest,
|
|
53
|
+
ref,
|
|
54
|
+
disabled: isDisabled,
|
|
55
|
+
onClick: handleClick,
|
|
56
|
+
className: cn("relative", className),
|
|
57
|
+
variant,
|
|
58
|
+
size,
|
|
59
|
+
title,
|
|
60
|
+
children: [
|
|
61
|
+
Boolean(disabledTooltip) && isDisabled && /* @__PURE__ */ jsxs(Tooltip, {
|
|
62
|
+
...slots?.tooltip,
|
|
63
|
+
children: [/* @__PURE__ */ jsx(TooltipTrigger, {
|
|
64
|
+
asChild: true,
|
|
65
|
+
...slots?.tooltipTrigger,
|
|
66
|
+
children: /* @__PURE__ */ jsx(AbsoluteFill, {
|
|
67
|
+
onClick: onDisabledClick,
|
|
68
|
+
style: {
|
|
69
|
+
pointerEvents: "all",
|
|
70
|
+
cursor: "not-allowed"
|
|
71
|
+
}
|
|
72
|
+
})
|
|
73
|
+
}), /* @__PURE__ */ jsx(TooltipContent, {
|
|
74
|
+
...slots?.tooltipContent,
|
|
75
|
+
children: renderTooltipContent(disabledTooltip)
|
|
76
|
+
})]
|
|
77
|
+
}),
|
|
78
|
+
loading && loaderPlacement === "start" && Loader,
|
|
79
|
+
children,
|
|
80
|
+
loading && (loaderPlacement === "end" || loaderPlacement === "center") && Loader
|
|
81
|
+
]
|
|
82
|
+
});
|
|
83
|
+
if (showTooltip && !(Boolean(disabledTooltip) && isDisabled)) return /* @__PURE__ */ jsxs(Tooltip, {
|
|
84
|
+
...slots?.tooltip,
|
|
85
|
+
children: [/* @__PURE__ */ jsx(TooltipTrigger, {
|
|
86
|
+
asChild: true,
|
|
87
|
+
...slots?.tooltipTrigger,
|
|
88
|
+
children: buttonContent
|
|
89
|
+
}), /* @__PURE__ */ jsx(TooltipContent, {
|
|
90
|
+
...slots?.tooltipContent,
|
|
91
|
+
children: renderTooltipContent(tooltipContent)
|
|
92
|
+
})]
|
|
93
|
+
});
|
|
94
|
+
return buttonContent;
|
|
95
|
+
}
|
|
96
|
+
ButtonExtended.displayName = "ButtonExtended";
|
|
97
|
+
|
|
98
|
+
//#endregion
|
|
99
|
+
export { ButtonExtended };
|
|
@@ -28,6 +28,7 @@ function useColorPickerBaseValue(params) {
|
|
|
28
28
|
if (propValue !== lastPropValueRef.current) {
|
|
29
29
|
lastPropValueRef.current = propValue;
|
|
30
30
|
isApplyingControlledValueRef.current = true;
|
|
31
|
+
lastNotifiedValueRef.current = void 0;
|
|
31
32
|
}
|
|
32
33
|
(0, react.useEffect)(() => {
|
|
33
34
|
isApplyingControlledValueRef.current = false;
|
|
@@ -26,6 +26,7 @@ function useColorPickerBaseValue(params) {
|
|
|
26
26
|
if (propValue !== lastPropValueRef.current) {
|
|
27
27
|
lastPropValueRef.current = propValue;
|
|
28
28
|
isApplyingControlledValueRef.current = true;
|
|
29
|
+
lastNotifiedValueRef.current = void 0;
|
|
29
30
|
}
|
|
30
31
|
useEffect(() => {
|
|
31
32
|
isApplyingControlledValueRef.current = false;
|
package/dist/ColorSelect.d.cts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime2 from "react/jsx-runtime";
|
|
2
2
|
import { Select, SelectContent } from "@pixpilot/shadcn";
|
|
3
3
|
import React, { ComponentProps } from "react";
|
|
4
4
|
|
|
@@ -15,6 +15,6 @@ type BaseColorSelectProps = {
|
|
|
15
15
|
placeholder?: string;
|
|
16
16
|
keyboardMode?: 'cycle' | 'dropdown';
|
|
17
17
|
} & Omit<ComponentProps<typeof Select>, 'value' | 'onValueChange' | 'children'>;
|
|
18
|
-
declare function ColorSelect(props: BaseColorSelectProps):
|
|
18
|
+
declare function ColorSelect(props: BaseColorSelectProps): react_jsx_runtime2.JSX.Element;
|
|
19
19
|
//#endregion
|
|
20
20
|
export { BaseColorSelectProps, ColorSelect, ColorSelectOption };
|