@pixpilot/shadcn-ui 1.25.0 → 1.26.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/LoadingOverlay.cjs +10 -29
- package/dist/LoadingOverlay.d.cts +7 -2
- package/dist/LoadingOverlay.d.ts +7 -2
- package/dist/LoadingOverlay.js +11 -30
- package/dist/Rating.d.cts +1 -1
- package/dist/Rating.d.ts +1 -1
- 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-inline/FileUploadInline.d.cts +2 -2
- package/dist/file-upload-inline/FileUploadInline.d.ts +2 -2
- package/dist/file-upload-root/FileUploadRoot.d.cts +2 -2
- package/dist/hooks/index.cjs +1 -0
- package/dist/hooks/index.d.cts +1 -0
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.js +1 -0
- package/dist/hooks/use-delayed-visibility.cjs +57 -0
- package/dist/hooks/use-delayed-visibility.d.cts +35 -0
- package/dist/hooks/use-delayed-visibility.d.ts +35 -0
- package/dist/hooks/use-delayed-visibility.js +55 -0
- package/dist/icon-selector/icon-picker-content.cjs +1 -1
- package/dist/icon-selector/icon-picker-content.js +1 -1
- package/dist/index.cjs +2 -0
- package/dist/index.d.cts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/input/Input.d.cts +2 -2
- package/dist/tags-input/TagsInput.d.cts +2 -2
- package/dist/tags-input/TagsInput.d.ts +2 -2
- package/dist/tags-input/TagsInputInline.d.ts +2 -2
- package/dist/theme-toggle/ThemeModeDropdown.d.cts +2 -2
- package/dist/theme-toggle/ThemeModeDropdown.d.ts +2 -2
- package/dist/theme-toggle/ThemeModeSwitchInside.d.cts +2 -2
- package/dist/theme-toggle/ThemeModeSwitchInside.d.ts +2 -2
- package/dist/theme-toggle/ThemeModeSwitchOutside.d.cts +2 -2
- package/dist/theme-toggle/ThemeModeSwitchOutside.d.ts +2 -2
- package/dist/theme-toggle/ThemeModeToggleButton.d.cts +2 -2
- package/dist/theme-toggle/ThemeModeToggleButton.d.ts +2 -2
- package/package.json +3 -3
package/dist/LoadingOverlay.cjs
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
|
|
5
|
+
const require_use_delayed_visibility = require('./hooks/use-delayed-visibility.cjs');
|
|
6
|
+
require('./hooks/index.cjs');
|
|
5
7
|
let __pixpilot_shadcn = require("@pixpilot/shadcn");
|
|
6
8
|
__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
|
|
7
9
|
let lucide_react = require("lucide-react");
|
|
@@ -15,35 +17,14 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
|
15
17
|
const DEFAULT_DELAY = 0;
|
|
16
18
|
const FADE_DURATION = 300;
|
|
17
19
|
const LoadingOverlay = (props) => {
|
|
18
|
-
const { backdrop = true, placement = "center",
|
|
20
|
+
const { backdrop = true, placement = "center", show, inDelay = DEFAULT_DELAY, outDelay = DEFAULT_DELAY, message, scope = "container", size = "default", className, slots } = props;
|
|
19
21
|
const contentProps = slots?.content || {};
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
setMounted(true);
|
|
27
|
-
requestAnimationFrame(() => {
|
|
28
|
-
requestAnimationFrame(() => {
|
|
29
|
-
setVisible(true);
|
|
30
|
-
});
|
|
31
|
-
});
|
|
32
|
-
}, delay);
|
|
33
|
-
else {
|
|
34
|
-
setVisible(false);
|
|
35
|
-
timeoutId = setTimeout(() => {
|
|
36
|
-
setMounted(false);
|
|
37
|
-
}, mounted ? FADE_DURATION : 0);
|
|
38
|
-
}
|
|
39
|
-
return () => {
|
|
40
|
-
clearTimeout(timeoutId);
|
|
41
|
-
};
|
|
42
|
-
}, [
|
|
43
|
-
loading,
|
|
44
|
-
delay,
|
|
45
|
-
mounted
|
|
46
|
-
]);
|
|
22
|
+
const { mounted, visible } = require_use_delayed_visibility.useDelayedVisibility({
|
|
23
|
+
show,
|
|
24
|
+
inDelay,
|
|
25
|
+
outDelay,
|
|
26
|
+
fadeDuration: FADE_DURATION
|
|
27
|
+
});
|
|
47
28
|
const positionClass = {
|
|
48
29
|
top: "items-start pt-[50px]",
|
|
49
30
|
center: "items-center",
|
|
@@ -66,7 +47,7 @@ const LoadingOverlay = (props) => {
|
|
|
66
47
|
style: { transitionDuration: `${FADE_DURATION}ms` },
|
|
67
48
|
role: "status",
|
|
68
49
|
"aria-live": "polite",
|
|
69
|
-
"aria-busy":
|
|
50
|
+
"aria-busy": show,
|
|
70
51
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
71
52
|
"data-slot": "loading-overlay-content",
|
|
72
53
|
...contentProps,
|
|
@@ -16,7 +16,7 @@ interface LoadingOverlayProps {
|
|
|
16
16
|
/**
|
|
17
17
|
* Whether to show the loader
|
|
18
18
|
*/
|
|
19
|
-
|
|
19
|
+
show: boolean;
|
|
20
20
|
/**
|
|
21
21
|
* Optional loading message to display below spinner
|
|
22
22
|
*/
|
|
@@ -25,7 +25,12 @@ interface LoadingOverlayProps {
|
|
|
25
25
|
* Delay in milliseconds before showing the loader
|
|
26
26
|
* @default 0
|
|
27
27
|
*/
|
|
28
|
-
|
|
28
|
+
inDelay?: number;
|
|
29
|
+
/**
|
|
30
|
+
* Delay in milliseconds before hiding the loader after loading becomes false
|
|
31
|
+
* @default 0
|
|
32
|
+
*/
|
|
33
|
+
outDelay?: number;
|
|
29
34
|
/**
|
|
30
35
|
* Scope of the loader overlay
|
|
31
36
|
* - 'container': Fills parent container (requires parent with position: relative)
|
package/dist/LoadingOverlay.d.ts
CHANGED
|
@@ -16,7 +16,7 @@ interface LoadingOverlayProps {
|
|
|
16
16
|
/**
|
|
17
17
|
* Whether to show the loader
|
|
18
18
|
*/
|
|
19
|
-
|
|
19
|
+
show: boolean;
|
|
20
20
|
/**
|
|
21
21
|
* Optional loading message to display below spinner
|
|
22
22
|
*/
|
|
@@ -25,7 +25,12 @@ interface LoadingOverlayProps {
|
|
|
25
25
|
* Delay in milliseconds before showing the loader
|
|
26
26
|
* @default 0
|
|
27
27
|
*/
|
|
28
|
-
|
|
28
|
+
inDelay?: number;
|
|
29
|
+
/**
|
|
30
|
+
* Delay in milliseconds before hiding the loader after loading becomes false
|
|
31
|
+
* @default 0
|
|
32
|
+
*/
|
|
33
|
+
outDelay?: number;
|
|
29
34
|
/**
|
|
30
35
|
* Scope of the loader overlay
|
|
31
36
|
* - 'container': Fills parent container (requires parent with position: relative)
|
package/dist/LoadingOverlay.js
CHANGED
|
@@ -1,44 +1,25 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
3
|
|
|
4
|
+
import { useDelayedVisibility } from "./hooks/use-delayed-visibility.js";
|
|
5
|
+
import "./hooks/index.js";
|
|
4
6
|
import { cn } from "@pixpilot/shadcn";
|
|
5
7
|
import { Loader2 } from "lucide-react";
|
|
6
|
-
import React
|
|
8
|
+
import React from "react";
|
|
7
9
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
10
|
|
|
9
11
|
//#region src/LoadingOverlay.tsx
|
|
10
12
|
const DEFAULT_DELAY = 0;
|
|
11
13
|
const FADE_DURATION = 300;
|
|
12
14
|
const LoadingOverlay = (props) => {
|
|
13
|
-
const { backdrop = true, placement = "center",
|
|
15
|
+
const { backdrop = true, placement = "center", show, inDelay = DEFAULT_DELAY, outDelay = DEFAULT_DELAY, message, scope = "container", size = "default", className, slots } = props;
|
|
14
16
|
const contentProps = slots?.content || {};
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
setMounted(true);
|
|
22
|
-
requestAnimationFrame(() => {
|
|
23
|
-
requestAnimationFrame(() => {
|
|
24
|
-
setVisible(true);
|
|
25
|
-
});
|
|
26
|
-
});
|
|
27
|
-
}, delay);
|
|
28
|
-
else {
|
|
29
|
-
setVisible(false);
|
|
30
|
-
timeoutId = setTimeout(() => {
|
|
31
|
-
setMounted(false);
|
|
32
|
-
}, mounted ? FADE_DURATION : 0);
|
|
33
|
-
}
|
|
34
|
-
return () => {
|
|
35
|
-
clearTimeout(timeoutId);
|
|
36
|
-
};
|
|
37
|
-
}, [
|
|
38
|
-
loading,
|
|
39
|
-
delay,
|
|
40
|
-
mounted
|
|
41
|
-
]);
|
|
17
|
+
const { mounted, visible } = useDelayedVisibility({
|
|
18
|
+
show,
|
|
19
|
+
inDelay,
|
|
20
|
+
outDelay,
|
|
21
|
+
fadeDuration: FADE_DURATION
|
|
22
|
+
});
|
|
42
23
|
const positionClass = {
|
|
43
24
|
top: "items-start pt-[50px]",
|
|
44
25
|
center: "items-center",
|
|
@@ -61,7 +42,7 @@ const LoadingOverlay = (props) => {
|
|
|
61
42
|
style: { transitionDuration: `${FADE_DURATION}ms` },
|
|
62
43
|
role: "status",
|
|
63
44
|
"aria-live": "polite",
|
|
64
|
-
"aria-busy":
|
|
45
|
+
"aria-busy": show,
|
|
65
46
|
children: /* @__PURE__ */ jsxs("div", {
|
|
66
47
|
"data-slot": "loading-overlay-content",
|
|
67
48
|
...contentProps,
|
package/dist/Rating.d.cts
CHANGED
|
@@ -10,7 +10,7 @@ interface RatingOption {
|
|
|
10
10
|
value: number;
|
|
11
11
|
}
|
|
12
12
|
declare const ratingVariants: (props?: ({
|
|
13
|
-
size?: "
|
|
13
|
+
size?: "default" | "sm" | "lg" | "xl" | null | undefined;
|
|
14
14
|
} & class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
15
15
|
type RatingSize = VariantProps<typeof ratingVariants>['size'];
|
|
16
16
|
type IconType = 'star' | 'circle';
|
package/dist/Rating.d.ts
CHANGED
|
@@ -10,7 +10,7 @@ interface RatingOption {
|
|
|
10
10
|
value: number;
|
|
11
11
|
}
|
|
12
12
|
declare const ratingVariants: (props?: ({
|
|
13
|
-
size?: "
|
|
13
|
+
size?: "default" | "sm" | "lg" | "xl" | null | undefined;
|
|
14
14
|
} & class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
15
15
|
type RatingSize = VariantProps<typeof ratingVariants>['size'];
|
|
16
16
|
type IconType = 'star' | 'circle';
|
package/dist/dialog/Dialog.d.cts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime9 from "react/jsx-runtime";
|
|
2
2
|
import { DialogContent } from "@pixpilot/shadcn";
|
|
3
3
|
import * as React$1 from "react";
|
|
4
4
|
import * as _radix_ui_react_dialog0 from "@radix-ui/react-dialog";
|
|
@@ -13,14 +13,14 @@ declare const DialogContent$1: React$1.ForwardRefExoticComponent<Omit<_radix_ui_
|
|
|
13
13
|
declare function DialogHeader({
|
|
14
14
|
className,
|
|
15
15
|
...props
|
|
16
|
-
}: React$1.HTMLAttributes<HTMLDivElement>):
|
|
16
|
+
}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime9.JSX.Element;
|
|
17
17
|
declare function DialogBody({
|
|
18
18
|
className,
|
|
19
19
|
...props
|
|
20
|
-
}: React$1.HTMLAttributes<HTMLDivElement>):
|
|
20
|
+
}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime9.JSX.Element;
|
|
21
21
|
declare function DialogFooter({
|
|
22
22
|
className,
|
|
23
23
|
...props
|
|
24
|
-
}: React$1.HTMLAttributes<HTMLDivElement>):
|
|
24
|
+
}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime9.JSX.Element;
|
|
25
25
|
//#endregion
|
|
26
26
|
export { DialogBody, DialogContent$1 as DialogContent, DialogContentProps, DialogFooter, DialogHeader };
|
package/dist/dialog/Dialog.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { DialogContent } from "@pixpilot/shadcn";
|
|
2
2
|
import * as React$1 from "react";
|
|
3
|
-
import * as
|
|
3
|
+
import * as react_jsx_runtime10 from "react/jsx-runtime";
|
|
4
4
|
import * as _radix_ui_react_dialog0 from "@radix-ui/react-dialog";
|
|
5
5
|
|
|
6
6
|
//#region src/dialog/Dialog.d.ts
|
|
@@ -13,14 +13,14 @@ declare const DialogContent$1: React$1.ForwardRefExoticComponent<Omit<_radix_ui_
|
|
|
13
13
|
declare function DialogHeader$1({
|
|
14
14
|
className,
|
|
15
15
|
...props
|
|
16
|
-
}: React$1.HTMLAttributes<HTMLDivElement>):
|
|
16
|
+
}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime10.JSX.Element;
|
|
17
17
|
declare function DialogBody({
|
|
18
18
|
className,
|
|
19
19
|
...props
|
|
20
|
-
}: React$1.HTMLAttributes<HTMLDivElement>):
|
|
20
|
+
}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime10.JSX.Element;
|
|
21
21
|
declare function DialogFooter$1({
|
|
22
22
|
className,
|
|
23
23
|
...props
|
|
24
|
-
}: React$1.HTMLAttributes<HTMLDivElement>):
|
|
24
|
+
}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime10.JSX.Element;
|
|
25
25
|
//#endregion
|
|
26
26
|
export { DialogBody, DialogContent$1 as DialogContent, DialogContentProps, DialogFooter$1 as DialogFooter, DialogHeader$1 as DialogHeader };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FileUploadProps } from "./types/index.cjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime20 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/file-upload/FileUpload.d.ts
|
|
5
|
-
declare function FileUpload(props: FileUploadProps):
|
|
5
|
+
declare function FileUpload(props: FileUploadProps): react_jsx_runtime20.JSX.Element;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { FileUpload };
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { FileUploadInlineProps } from "./types.cjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime13 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/file-upload-inline/FileUploadInline.d.ts
|
|
5
5
|
/**
|
|
6
6
|
* FileUploadInline - An inline file upload component using FileUpload primitives
|
|
7
7
|
*/
|
|
8
|
-
declare function FileUploadInline(props: FileUploadInlineProps):
|
|
8
|
+
declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime13.JSX.Element;
|
|
9
9
|
//#endregion
|
|
10
10
|
export { FileUploadInline };
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { FileUploadInlineProps } from "./types.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime9 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/file-upload-inline/FileUploadInline.d.ts
|
|
5
5
|
/**
|
|
6
6
|
* FileUploadInline - An inline file upload component using FileUpload primitives
|
|
7
7
|
*/
|
|
8
|
-
declare function FileUploadInline(props: FileUploadInlineProps):
|
|
8
|
+
declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime9.JSX.Element;
|
|
9
9
|
//#endregion
|
|
10
10
|
export { FileUploadInline };
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { FileUploadRootProps } from "./types.cjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime12 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/file-upload-root/FileUploadRoot.d.ts
|
|
5
5
|
/**
|
|
6
6
|
* FileUploadInline - An inline file upload component using FileUpload primitives
|
|
7
7
|
*/
|
|
8
|
-
declare function FileUploadRoot(props: FileUploadRootProps):
|
|
8
|
+
declare function FileUploadRoot(props: FileUploadRootProps): react_jsx_runtime12.JSX.Element;
|
|
9
9
|
declare namespace FileUploadRoot {
|
|
10
10
|
var displayName: string;
|
|
11
11
|
}
|
package/dist/hooks/index.cjs
CHANGED
package/dist/hooks/index.d.cts
CHANGED
package/dist/hooks/index.d.ts
CHANGED
package/dist/hooks/index.js
CHANGED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
|
|
2
|
+
let react = require("react");
|
|
3
|
+
react = require_rolldown_runtime.__toESM(react);
|
|
4
|
+
|
|
5
|
+
//#region src/hooks/use-delayed-visibility.ts
|
|
6
|
+
const DEFAULT_DELAY = 0;
|
|
7
|
+
function useDelayedVisibility(options) {
|
|
8
|
+
const { show, inDelay = DEFAULT_DELAY, outDelay = DEFAULT_DELAY, fadeDuration = DEFAULT_DELAY } = options;
|
|
9
|
+
const hasInDelay = inDelay > 0;
|
|
10
|
+
const [mounted, setMounted] = (0, react.useState)(() => !hasInDelay && show);
|
|
11
|
+
const [visible, setVisible] = (0, react.useState)(() => !hasInDelay && show);
|
|
12
|
+
(0, react.useEffect)(() => {
|
|
13
|
+
const timeoutIds = [];
|
|
14
|
+
const animationFrameIds = [];
|
|
15
|
+
const scheduleTimeout = (callback, timeout) => {
|
|
16
|
+
const timeoutId = setTimeout(callback, timeout);
|
|
17
|
+
timeoutIds.push(timeoutId);
|
|
18
|
+
};
|
|
19
|
+
const scheduleAnimationFrame = (callback) => {
|
|
20
|
+
const animationFrameId = requestAnimationFrame(callback);
|
|
21
|
+
animationFrameIds.push(animationFrameId);
|
|
22
|
+
};
|
|
23
|
+
if (show) scheduleTimeout(() => {
|
|
24
|
+
setMounted(true);
|
|
25
|
+
scheduleAnimationFrame(() => {
|
|
26
|
+
scheduleAnimationFrame(() => {
|
|
27
|
+
setVisible(true);
|
|
28
|
+
});
|
|
29
|
+
});
|
|
30
|
+
}, inDelay);
|
|
31
|
+
else scheduleTimeout(() => {
|
|
32
|
+
setVisible(false);
|
|
33
|
+
scheduleTimeout(() => {
|
|
34
|
+
setMounted(false);
|
|
35
|
+
}, mounted ? fadeDuration : DEFAULT_DELAY);
|
|
36
|
+
}, mounted ? outDelay : DEFAULT_DELAY);
|
|
37
|
+
return () => {
|
|
38
|
+
timeoutIds.forEach((timeoutId) => clearTimeout(timeoutId));
|
|
39
|
+
animationFrameIds.forEach((animationFrameId) => {
|
|
40
|
+
cancelAnimationFrame(animationFrameId);
|
|
41
|
+
});
|
|
42
|
+
};
|
|
43
|
+
}, [
|
|
44
|
+
show,
|
|
45
|
+
inDelay,
|
|
46
|
+
outDelay,
|
|
47
|
+
fadeDuration,
|
|
48
|
+
mounted
|
|
49
|
+
]);
|
|
50
|
+
return {
|
|
51
|
+
mounted,
|
|
52
|
+
visible
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
//#endregion
|
|
57
|
+
exports.useDelayedVisibility = useDelayedVisibility;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
//#region src/hooks/use-delayed-visibility.d.ts
|
|
2
|
+
interface UseDelayedVisibilityOptions {
|
|
3
|
+
/**
|
|
4
|
+
* Whether the target should be shown.
|
|
5
|
+
*/
|
|
6
|
+
show: boolean;
|
|
7
|
+
/**
|
|
8
|
+
* Delay in milliseconds before showing.
|
|
9
|
+
* @default 0
|
|
10
|
+
*/
|
|
11
|
+
inDelay?: number;
|
|
12
|
+
/**
|
|
13
|
+
* Delay in milliseconds before hiding.
|
|
14
|
+
* @default 0
|
|
15
|
+
*/
|
|
16
|
+
outDelay?: number;
|
|
17
|
+
/**
|
|
18
|
+
* Time in milliseconds to keep mounted after hiding starts.
|
|
19
|
+
* @default 0
|
|
20
|
+
*/
|
|
21
|
+
fadeDuration?: number;
|
|
22
|
+
}
|
|
23
|
+
interface UseDelayedVisibilityResult {
|
|
24
|
+
/**
|
|
25
|
+
* Whether the target should be rendered.
|
|
26
|
+
*/
|
|
27
|
+
mounted: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Whether the target should be visually visible.
|
|
30
|
+
*/
|
|
31
|
+
visible: boolean;
|
|
32
|
+
}
|
|
33
|
+
declare function useDelayedVisibility(options: UseDelayedVisibilityOptions): UseDelayedVisibilityResult;
|
|
34
|
+
//#endregion
|
|
35
|
+
export { UseDelayedVisibilityOptions, UseDelayedVisibilityResult, useDelayedVisibility };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
//#region src/hooks/use-delayed-visibility.d.ts
|
|
2
|
+
interface UseDelayedVisibilityOptions {
|
|
3
|
+
/**
|
|
4
|
+
* Whether the target should be shown.
|
|
5
|
+
*/
|
|
6
|
+
show: boolean;
|
|
7
|
+
/**
|
|
8
|
+
* Delay in milliseconds before showing.
|
|
9
|
+
* @default 0
|
|
10
|
+
*/
|
|
11
|
+
inDelay?: number;
|
|
12
|
+
/**
|
|
13
|
+
* Delay in milliseconds before hiding.
|
|
14
|
+
* @default 0
|
|
15
|
+
*/
|
|
16
|
+
outDelay?: number;
|
|
17
|
+
/**
|
|
18
|
+
* Time in milliseconds to keep mounted after hiding starts.
|
|
19
|
+
* @default 0
|
|
20
|
+
*/
|
|
21
|
+
fadeDuration?: number;
|
|
22
|
+
}
|
|
23
|
+
interface UseDelayedVisibilityResult {
|
|
24
|
+
/**
|
|
25
|
+
* Whether the target should be rendered.
|
|
26
|
+
*/
|
|
27
|
+
mounted: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Whether the target should be visually visible.
|
|
30
|
+
*/
|
|
31
|
+
visible: boolean;
|
|
32
|
+
}
|
|
33
|
+
declare function useDelayedVisibility(options: UseDelayedVisibilityOptions): UseDelayedVisibilityResult;
|
|
34
|
+
//#endregion
|
|
35
|
+
export { UseDelayedVisibilityOptions, UseDelayedVisibilityResult, useDelayedVisibility };
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { useEffect, useState } from "react";
|
|
2
|
+
|
|
3
|
+
//#region src/hooks/use-delayed-visibility.ts
|
|
4
|
+
const DEFAULT_DELAY = 0;
|
|
5
|
+
function useDelayedVisibility(options) {
|
|
6
|
+
const { show, inDelay = DEFAULT_DELAY, outDelay = DEFAULT_DELAY, fadeDuration = DEFAULT_DELAY } = options;
|
|
7
|
+
const hasInDelay = inDelay > 0;
|
|
8
|
+
const [mounted, setMounted] = useState(() => !hasInDelay && show);
|
|
9
|
+
const [visible, setVisible] = useState(() => !hasInDelay && show);
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
const timeoutIds = [];
|
|
12
|
+
const animationFrameIds = [];
|
|
13
|
+
const scheduleTimeout = (callback, timeout) => {
|
|
14
|
+
const timeoutId = setTimeout(callback, timeout);
|
|
15
|
+
timeoutIds.push(timeoutId);
|
|
16
|
+
};
|
|
17
|
+
const scheduleAnimationFrame = (callback) => {
|
|
18
|
+
const animationFrameId = requestAnimationFrame(callback);
|
|
19
|
+
animationFrameIds.push(animationFrameId);
|
|
20
|
+
};
|
|
21
|
+
if (show) scheduleTimeout(() => {
|
|
22
|
+
setMounted(true);
|
|
23
|
+
scheduleAnimationFrame(() => {
|
|
24
|
+
scheduleAnimationFrame(() => {
|
|
25
|
+
setVisible(true);
|
|
26
|
+
});
|
|
27
|
+
});
|
|
28
|
+
}, inDelay);
|
|
29
|
+
else scheduleTimeout(() => {
|
|
30
|
+
setVisible(false);
|
|
31
|
+
scheduleTimeout(() => {
|
|
32
|
+
setMounted(false);
|
|
33
|
+
}, mounted ? fadeDuration : DEFAULT_DELAY);
|
|
34
|
+
}, mounted ? outDelay : DEFAULT_DELAY);
|
|
35
|
+
return () => {
|
|
36
|
+
timeoutIds.forEach((timeoutId) => clearTimeout(timeoutId));
|
|
37
|
+
animationFrameIds.forEach((animationFrameId) => {
|
|
38
|
+
cancelAnimationFrame(animationFrameId);
|
|
39
|
+
});
|
|
40
|
+
};
|
|
41
|
+
}, [
|
|
42
|
+
show,
|
|
43
|
+
inDelay,
|
|
44
|
+
outDelay,
|
|
45
|
+
fadeDuration,
|
|
46
|
+
mounted
|
|
47
|
+
]);
|
|
48
|
+
return {
|
|
49
|
+
mounted,
|
|
50
|
+
visible
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
//#endregion
|
|
55
|
+
export { useDelayedVisibility };
|
|
@@ -132,7 +132,7 @@ const IconPickerContent = ({ id, providers: providersProp, onChange, onSelect, m
|
|
|
132
132
|
}),
|
|
133
133
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LoadingOverlay.LoadingOverlay, {
|
|
134
134
|
message: "Loading icons...",
|
|
135
|
-
|
|
135
|
+
show: isLoading
|
|
136
136
|
}),
|
|
137
137
|
isSearching && providers.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_virtualized_icon_grid.default, {
|
|
138
138
|
icons: filteredData,
|
|
@@ -127,7 +127,7 @@ const IconPickerContent = ({ id, providers: providersProp, onChange, onSelect, m
|
|
|
127
127
|
}),
|
|
128
128
|
/* @__PURE__ */ jsx(LoadingOverlay, {
|
|
129
129
|
message: "Loading icons...",
|
|
130
|
-
|
|
130
|
+
show: isLoading
|
|
131
131
|
}),
|
|
132
132
|
isSearching && providers.length > 0 && /* @__PURE__ */ jsx(virtualized_icon_grid_default, {
|
|
133
133
|
icons: filteredData,
|
package/dist/index.cjs
CHANGED
|
@@ -46,6 +46,7 @@ const require_FileUploadRoot = require('./file-upload-root/FileUploadRoot.cjs');
|
|
|
46
46
|
require('./file-upload-root/index.cjs');
|
|
47
47
|
const require_FileUploadInline = require('./file-upload-inline/FileUploadInline.cjs');
|
|
48
48
|
require('./file-upload-inline/index.cjs');
|
|
49
|
+
const require_use_delayed_visibility = require('./hooks/use-delayed-visibility.cjs');
|
|
49
50
|
const require_use_media_query = require('./hooks/use-media-query.cjs');
|
|
50
51
|
require('./hooks/index.cjs');
|
|
51
52
|
const require_Input = require('./input/Input.cjs');
|
|
@@ -205,6 +206,7 @@ exports.showConfirmDialog = require_confirmation_dialogs.showConfirmDialog;
|
|
|
205
206
|
exports.svgMarkupToMaskUrl = require_svg.svgMarkupToMaskUrl;
|
|
206
207
|
exports.toast = require_toast.toast;
|
|
207
208
|
exports.useColorPickerContext = require_color_picker_context.useColorPickerContext;
|
|
209
|
+
exports.useDelayedVisibility = require_use_delayed_visibility.useDelayedVisibility;
|
|
208
210
|
exports.useMediaQuery = require_use_media_query.useMediaQuery;
|
|
209
211
|
exports.useSelectKeyboard = require_use_select_keyboard.useSelectKeyboard;
|
|
210
212
|
exports.useTabsContext = require_TabsContext.useTabsContext;
|
package/dist/index.d.cts
CHANGED
|
@@ -48,6 +48,7 @@ import "./file-upload-root/index.cjs";
|
|
|
48
48
|
import { FileUploadInlineBaseProps, FileUploadInlineProps } from "./file-upload-inline/types.cjs";
|
|
49
49
|
import { FileUploadInline } from "./file-upload-inline/FileUploadInline.cjs";
|
|
50
50
|
import "./file-upload-inline/index.cjs";
|
|
51
|
+
import { UseDelayedVisibilityOptions, UseDelayedVisibilityResult, useDelayedVisibility } from "./hooks/use-delayed-visibility.cjs";
|
|
51
52
|
import { useMediaQuery } from "./hooks/use-media-query.cjs";
|
|
52
53
|
import { useSelectKeyboard } from "./hooks/use-select-keyboard.cjs";
|
|
53
54
|
import "./hooks/index.cjs";
|
|
@@ -102,4 +103,4 @@ import { ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, T
|
|
|
102
103
|
import { getId } from "./utils/get-id.cjs";
|
|
103
104
|
import { isSvgMarkupString, svgMarkupToMaskUrl } from "./utils/svg.cjs";
|
|
104
105
|
import { cn } from "@pixpilot/shadcn";
|
|
105
|
-
export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertToastProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonExtended, ButtonExtendedLoaderProps, ButtonExtendedProps, ButtonGroup, ButtonGroupProps, ButtonGroupSeparator, ButtonGroupText, ButtonProps, COLOR_PICKER_PALETTE_BUTTON_CLASSES, COMMON_COLORS, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerButton, ColorPickerButtonProps, ColorPickerColorPalette, ColorPickerColorPaletteProps, ColorPickerCompactControls, ColorPickerCompactControlsProps, ColorPickerContent, ColorPickerContentProps, ColorPickerContext, Consumer as ColorPickerContextContextConsumer, Provider as ColorPickerContextContextProvider, ColorPickerContextStates, ColorPickerControls, ColorPickerControlsProps, ColorPickerEyeDropper, ColorPickerFormatControls, ColorPickerFormatControlsProps, ColorPickerFormatInput, ColorPickerFormatInputProps, ColorPickerFormatSelect, ColorPickerFullControls, ColorPickerFullControlsProps, ColorPickerHueSlider, ColorPickerInput, ColorPickerInputProps, ColorPickerPaletteButton, ColorPickerPaletteButtonProps, ColorPickerPaletteSwatch, ColorPickerProps, ColorPickerResetOptions, ColorPickerRoot, ColorPickerRootProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ConfirmationDialogVariant, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, Dialog, DialogBody, DialogClose, DialogContent, DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogProvider, DialogProviderProps, DialogTitle, DialogTrigger, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadCallbacks, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, FileUploadRoot, FileUploadRootItem, FileUploadRootItemProps, FileUploadRootProps, FileUploadRootPropsBaseProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, IconToggle, IconToggleProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoadingOverlay, LoadingOverlayProps, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, Popover, PopoverAnchor, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverContentUnstyled, PopoverTrigger, PresetColor, Rating, RatingButton, RatingButtonProps, RatingColor, RatingOption, RatingProps, RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectContentProps, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputInline, TagsInputInlineItem, TagsInputInlineProps, TagsInputProps, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastFunction, ToastMessage, Toaster, ToggleButton, ToggleButtonProps, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, ToggleGroupValue, ToolbarItems, cn, getId, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, useColorPickerContext, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
|
|
106
|
+
export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertToastProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonExtended, ButtonExtendedLoaderProps, ButtonExtendedProps, ButtonGroup, ButtonGroupProps, ButtonGroupSeparator, ButtonGroupText, ButtonProps, COLOR_PICKER_PALETTE_BUTTON_CLASSES, COMMON_COLORS, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerButton, ColorPickerButtonProps, ColorPickerColorPalette, ColorPickerColorPaletteProps, ColorPickerCompactControls, ColorPickerCompactControlsProps, ColorPickerContent, ColorPickerContentProps, ColorPickerContext, Consumer as ColorPickerContextContextConsumer, Provider as ColorPickerContextContextProvider, ColorPickerContextStates, ColorPickerControls, ColorPickerControlsProps, ColorPickerEyeDropper, ColorPickerFormatControls, ColorPickerFormatControlsProps, ColorPickerFormatInput, ColorPickerFormatInputProps, ColorPickerFormatSelect, ColorPickerFullControls, ColorPickerFullControlsProps, ColorPickerHueSlider, ColorPickerInput, ColorPickerInputProps, ColorPickerPaletteButton, ColorPickerPaletteButtonProps, ColorPickerPaletteSwatch, ColorPickerProps, ColorPickerResetOptions, ColorPickerRoot, ColorPickerRootProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ConfirmationDialogVariant, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, Dialog, DialogBody, DialogClose, DialogContent, DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogProvider, DialogProviderProps, DialogTitle, DialogTrigger, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadCallbacks, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, FileUploadRoot, FileUploadRootItem, FileUploadRootItemProps, FileUploadRootProps, FileUploadRootPropsBaseProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, IconToggle, IconToggleProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoadingOverlay, LoadingOverlayProps, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, Popover, PopoverAnchor, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverContentUnstyled, PopoverTrigger, PresetColor, Rating, RatingButton, RatingButtonProps, RatingColor, RatingOption, RatingProps, RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectContentProps, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputInline, TagsInputInlineItem, TagsInputInlineProps, TagsInputProps, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastFunction, ToastMessage, Toaster, ToggleButton, ToggleButtonProps, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, ToggleGroupValue, ToolbarItems, UseDelayedVisibilityOptions, UseDelayedVisibilityResult, cn, getId, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, useColorPickerContext, useDelayedVisibility, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
|
package/dist/index.d.ts
CHANGED
|
@@ -48,6 +48,7 @@ import "./file-upload-root/index.js";
|
|
|
48
48
|
import { FileUploadInlineBaseProps, FileUploadInlineProps } from "./file-upload-inline/types.js";
|
|
49
49
|
import { FileUploadInline } from "./file-upload-inline/FileUploadInline.js";
|
|
50
50
|
import "./file-upload-inline/index.js";
|
|
51
|
+
import { UseDelayedVisibilityOptions, UseDelayedVisibilityResult, useDelayedVisibility } from "./hooks/use-delayed-visibility.js";
|
|
51
52
|
import { useMediaQuery } from "./hooks/use-media-query.js";
|
|
52
53
|
import { useSelectKeyboard } from "./hooks/use-select-keyboard.js";
|
|
53
54
|
import "./hooks/index.js";
|
|
@@ -102,4 +103,4 @@ import { ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, T
|
|
|
102
103
|
import { getId } from "./utils/get-id.js";
|
|
103
104
|
import { isSvgMarkupString, svgMarkupToMaskUrl } from "./utils/svg.js";
|
|
104
105
|
import { cn } from "@pixpilot/shadcn";
|
|
105
|
-
export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertToastProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonExtended, ButtonExtendedLoaderProps, ButtonExtendedProps, ButtonGroup, ButtonGroupProps, ButtonGroupSeparator, ButtonGroupText, ButtonProps, COLOR_PICKER_PALETTE_BUTTON_CLASSES, COMMON_COLORS, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerButton, ColorPickerButtonProps, ColorPickerColorPalette, ColorPickerColorPaletteProps, ColorPickerCompactControls, ColorPickerCompactControlsProps, ColorPickerContent, ColorPickerContentProps, ColorPickerContext, Consumer as ColorPickerContextContextConsumer, Provider as ColorPickerContextContextProvider, ColorPickerContextStates, ColorPickerControls, ColorPickerControlsProps, ColorPickerEyeDropper, ColorPickerFormatControls, ColorPickerFormatControlsProps, ColorPickerFormatInput, ColorPickerFormatInputProps, ColorPickerFormatSelect, ColorPickerFullControls, ColorPickerFullControlsProps, ColorPickerHueSlider, ColorPickerInput, ColorPickerInputProps, ColorPickerPaletteButton, ColorPickerPaletteButtonProps, ColorPickerPaletteSwatch, ColorPickerProps, ColorPickerResetOptions, ColorPickerRoot, ColorPickerRootProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ConfirmationDialogVariant, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, Dialog, DialogBody, DialogClose, DialogContent, DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogProvider, DialogProviderProps, DialogTitle, DialogTrigger, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadCallbacks, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, FileUploadRoot, FileUploadRootItem, FileUploadRootItemProps, FileUploadRootProps, FileUploadRootPropsBaseProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, IconToggle, IconToggleProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoadingOverlay, LoadingOverlayProps, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, Popover, PopoverAnchor, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverContentUnstyled, PopoverTrigger, PresetColor, Rating, RatingButton, RatingButtonProps, RatingColor, RatingOption, RatingProps, RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectContentProps, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputInline, TagsInputInlineItem, TagsInputInlineProps, TagsInputProps, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastFunction, ToastMessage, Toaster, ToggleButton, ToggleButtonProps, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, ToggleGroupValue, ToolbarItems, cn, getId, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, useColorPickerContext, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
|
|
106
|
+
export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertToastProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonExtended, ButtonExtendedLoaderProps, ButtonExtendedProps, ButtonGroup, ButtonGroupProps, ButtonGroupSeparator, ButtonGroupText, ButtonProps, COLOR_PICKER_PALETTE_BUTTON_CLASSES, COMMON_COLORS, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerButton, ColorPickerButtonProps, ColorPickerColorPalette, ColorPickerColorPaletteProps, ColorPickerCompactControls, ColorPickerCompactControlsProps, ColorPickerContent, ColorPickerContentProps, ColorPickerContext, Consumer as ColorPickerContextContextConsumer, Provider as ColorPickerContextContextProvider, ColorPickerContextStates, ColorPickerControls, ColorPickerControlsProps, ColorPickerEyeDropper, ColorPickerFormatControls, ColorPickerFormatControlsProps, ColorPickerFormatInput, ColorPickerFormatInputProps, ColorPickerFormatSelect, ColorPickerFullControls, ColorPickerFullControlsProps, ColorPickerHueSlider, ColorPickerInput, ColorPickerInputProps, ColorPickerPaletteButton, ColorPickerPaletteButtonProps, ColorPickerPaletteSwatch, ColorPickerProps, ColorPickerResetOptions, ColorPickerRoot, ColorPickerRootProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ConfirmationDialogVariant, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, Dialog, DialogBody, DialogClose, DialogContent, DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogProvider, DialogProviderProps, DialogTitle, DialogTrigger, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadCallbacks, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, FileUploadRoot, FileUploadRootItem, FileUploadRootItemProps, FileUploadRootProps, FileUploadRootPropsBaseProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, IconToggle, IconToggleProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoadingOverlay, LoadingOverlayProps, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, Popover, PopoverAnchor, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverContentUnstyled, PopoverTrigger, PresetColor, Rating, RatingButton, RatingButtonProps, RatingColor, RatingOption, RatingProps, RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectContentProps, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputInline, TagsInputInlineItem, TagsInputInlineProps, TagsInputProps, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastFunction, ToastMessage, Toaster, ToggleButton, ToggleButtonProps, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, ToggleGroupValue, ToolbarItems, UseDelayedVisibilityOptions, UseDelayedVisibilityResult, cn, getId, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, useColorPickerContext, useDelayedVisibility, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
|
package/dist/index.js
CHANGED
|
@@ -45,6 +45,7 @@ import { FileUploadRoot } from "./file-upload-root/FileUploadRoot.js";
|
|
|
45
45
|
import "./file-upload-root/index.js";
|
|
46
46
|
import { FileUploadInline } from "./file-upload-inline/FileUploadInline.js";
|
|
47
47
|
import "./file-upload-inline/index.js";
|
|
48
|
+
import { useDelayedVisibility } from "./hooks/use-delayed-visibility.js";
|
|
48
49
|
import { useMediaQuery } from "./hooks/use-media-query.js";
|
|
49
50
|
import "./hooks/index.js";
|
|
50
51
|
import { Input } from "./input/Input.js";
|
|
@@ -94,4 +95,4 @@ import "./toast/index.js";
|
|
|
94
95
|
import { ToggleGroup, ToggleGroupItem } from "./ToggleGroup.js";
|
|
95
96
|
import { cn } from "@pixpilot/shadcn";
|
|
96
97
|
|
|
97
|
-
export { AbsoluteFill, Alert, AvatarUpload, Button, ButtonExtended, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, COLOR_PICKER_PALETTE_BUTTON_CLASSES, COMMON_COLORS, CircleLoader, CloseButtonAbsolute, CloseButtonRounded, ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerBase, ColorPickerButton, ColorPickerColorPalette, ColorPickerCompactControls, ColorPickerContent, ColorPickerContext, Consumer as ColorPickerContextContextConsumer, Provider as ColorPickerContextContextProvider, ColorPickerControls, ColorPickerEyeDropper, ColorPickerFormatControls, ColorPickerFormatInput, ColorPickerFormatSelect, ColorPickerFullControls, ColorPickerHueSlider, ColorPickerInput, ColorPickerPaletteButton, ColorPickerPaletteSwatch, ColorPickerRoot, ColorSelect, Combobox, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogProvider, DialogTitle, DialogTrigger, FileUpload, FileUploadInline, FileUploadRoot, FileUploadRootItem, IconPicker, IconToggle, Input, Layout, LayoutFooter, LayoutHeader, LayoutMain, LoadingOverlay, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverContentUnstyled, PopoverTrigger, Rating, RatingButton, RichTextEditor, ScaledPreview, Select, Slider, SliderInput, SliderSelect, Tabs, TabsContent, TabsContext, TabsList, TabsTrigger, TagsInput, TagsInputInline, ThemeModeDropdown, ThemeModeSwitchInside, ThemeModeSwitchOutside, ThemeModeToggleButton, ThemeProvider, Toaster, ToggleButton, ToggleGroup, ToggleGroupItem, cn, getId, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, useColorPickerContext, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
|
|
98
|
+
export { AbsoluteFill, Alert, AvatarUpload, Button, ButtonExtended, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, COLOR_PICKER_PALETTE_BUTTON_CLASSES, COMMON_COLORS, CircleLoader, CloseButtonAbsolute, CloseButtonRounded, ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerBase, ColorPickerButton, ColorPickerColorPalette, ColorPickerCompactControls, ColorPickerContent, ColorPickerContext, Consumer as ColorPickerContextContextConsumer, Provider as ColorPickerContextContextProvider, ColorPickerControls, ColorPickerEyeDropper, ColorPickerFormatControls, ColorPickerFormatInput, ColorPickerFormatSelect, ColorPickerFullControls, ColorPickerHueSlider, ColorPickerInput, ColorPickerPaletteButton, ColorPickerPaletteSwatch, ColorPickerRoot, ColorSelect, Combobox, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogProvider, DialogTitle, DialogTrigger, FileUpload, FileUploadInline, FileUploadRoot, FileUploadRootItem, IconPicker, IconToggle, Input, Layout, LayoutFooter, LayoutHeader, LayoutMain, LoadingOverlay, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverContentUnstyled, PopoverTrigger, Rating, RatingButton, RichTextEditor, ScaledPreview, Select, Slider, SliderInput, SliderSelect, Tabs, TabsContent, TabsContext, TabsList, TabsTrigger, TagsInput, TagsInputInline, ThemeModeDropdown, ThemeModeSwitchInside, ThemeModeSwitchOutside, ThemeModeToggleButton, ThemeProvider, Toaster, ToggleButton, ToggleGroup, ToggleGroupItem, cn, getId, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, useColorPickerContext, useDelayedVisibility, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
|
package/dist/input/Input.d.cts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime8 from "react/jsx-runtime";
|
|
2
2
|
import { InputProps } from "@pixpilot/shadcn";
|
|
3
3
|
import * as React$1 from "react";
|
|
4
4
|
|
|
@@ -10,6 +10,6 @@ type InputProps$1 = InputProps & {
|
|
|
10
10
|
prefixClassName?: string;
|
|
11
11
|
suffixClassName?: string;
|
|
12
12
|
};
|
|
13
|
-
declare function Input(props: InputProps$1):
|
|
13
|
+
declare function Input(props: InputProps$1): react_jsx_runtime8.JSX.Element;
|
|
14
14
|
//#endregion
|
|
15
15
|
export { Input, InputProps$1 as InputProps };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CommandOptionListItem } from "../CommandOptionList.cjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime14 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/tags-input/TagsInput.d.ts
|
|
5
5
|
interface TagsInputProps {
|
|
@@ -59,6 +59,6 @@ declare function TagsInput({
|
|
|
59
59
|
addOnTab,
|
|
60
60
|
onValidate,
|
|
61
61
|
addButtonVisibility
|
|
62
|
-
}: TagsInputProps):
|
|
62
|
+
}: TagsInputProps): react_jsx_runtime14.JSX.Element;
|
|
63
63
|
//#endregion
|
|
64
64
|
export { TagsInput, TagsInputProps };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CommandOptionListItem } from "../CommandOptionList.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime16 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/tags-input/TagsInput.d.ts
|
|
5
5
|
interface TagsInputProps {
|
|
@@ -59,6 +59,6 @@ declare function TagsInput({
|
|
|
59
59
|
addOnTab,
|
|
60
60
|
onValidate,
|
|
61
61
|
addButtonVisibility
|
|
62
|
-
}: TagsInputProps):
|
|
62
|
+
}: TagsInputProps): react_jsx_runtime16.JSX.Element;
|
|
63
63
|
//#endregion
|
|
64
64
|
export { TagsInput, TagsInputProps };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ChangeEventHandler, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, Ref } from "react";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime15 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/tags-input/TagsInputInline.d.ts
|
|
5
5
|
interface TagsInputInlineItem {
|
|
@@ -77,6 +77,6 @@ declare function TagsInputInline({
|
|
|
77
77
|
canAddCurrentValue,
|
|
78
78
|
onAddCurrentInput,
|
|
79
79
|
showClear
|
|
80
|
-
}: TagsInputInlineProps):
|
|
80
|
+
}: TagsInputInlineProps): react_jsx_runtime15.JSX.Element;
|
|
81
81
|
//#endregion
|
|
82
82
|
export { TagsInputInline, TagsInputInlineItem, TagsInputInlineProps };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime17 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region src/theme-toggle/ThemeModeDropdown.d.ts
|
|
4
4
|
interface ThemeModeDropdownProps {
|
|
@@ -18,7 +18,7 @@ interface ThemeModeDropdownProps {
|
|
|
18
18
|
* Provides Light / Dark / System options.
|
|
19
19
|
* Pure component - requires themeValue and onChange props.
|
|
20
20
|
*/
|
|
21
|
-
declare function ThemeModeDropdown(props: ThemeModeDropdownProps):
|
|
21
|
+
declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime17.JSX.Element;
|
|
22
22
|
declare namespace ThemeModeDropdown {
|
|
23
23
|
var displayName: string;
|
|
24
24
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime18 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region src/theme-toggle/ThemeModeDropdown.d.ts
|
|
4
4
|
interface ThemeModeDropdownProps {
|
|
@@ -18,7 +18,7 @@ interface ThemeModeDropdownProps {
|
|
|
18
18
|
* Provides Light / Dark / System options.
|
|
19
19
|
* Pure component - requires themeValue and onChange props.
|
|
20
20
|
*/
|
|
21
|
-
declare function ThemeModeDropdown(props: ThemeModeDropdownProps):
|
|
21
|
+
declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime18.JSX.Element;
|
|
22
22
|
declare namespace ThemeModeDropdown {
|
|
23
23
|
var displayName: string;
|
|
24
24
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime18 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region src/theme-toggle/ThemeModeSwitchInside.d.ts
|
|
4
4
|
type ThemeModeSwitchInsideSize = 'sm' | 'md' | 'lg';
|
|
@@ -26,7 +26,7 @@ interface ThemeModeSwitchInsideProps {
|
|
|
26
26
|
* Icons are embedded within the switch control.
|
|
27
27
|
* Pure component - requires value and onChange props.
|
|
28
28
|
*/
|
|
29
|
-
declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps):
|
|
29
|
+
declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime18.JSX.Element;
|
|
30
30
|
declare namespace ThemeModeSwitchInside {
|
|
31
31
|
var displayName: string;
|
|
32
32
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime19 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region src/theme-toggle/ThemeModeSwitchInside.d.ts
|
|
4
4
|
type ThemeModeSwitchInsideSize = 'sm' | 'md' | 'lg';
|
|
@@ -26,7 +26,7 @@ interface ThemeModeSwitchInsideProps {
|
|
|
26
26
|
* Icons are embedded within the switch control.
|
|
27
27
|
* Pure component - requires value and onChange props.
|
|
28
28
|
*/
|
|
29
|
-
declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps):
|
|
29
|
+
declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime19.JSX.Element;
|
|
30
30
|
declare namespace ThemeModeSwitchInside {
|
|
31
31
|
var displayName: string;
|
|
32
32
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime19 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region src/theme-toggle/ThemeModeSwitchOutside.d.ts
|
|
4
4
|
interface ThemeModeSwitchOutsideProps {
|
|
@@ -23,7 +23,7 @@ interface ThemeModeSwitchOutsideProps {
|
|
|
23
23
|
* Icons flank the switch control on either side.
|
|
24
24
|
* Pure component - requires value and onChange props.
|
|
25
25
|
*/
|
|
26
|
-
declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps):
|
|
26
|
+
declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime19.JSX.Element;
|
|
27
27
|
declare namespace ThemeModeSwitchOutside {
|
|
28
28
|
var displayName: string;
|
|
29
29
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime20 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region src/theme-toggle/ThemeModeSwitchOutside.d.ts
|
|
4
4
|
interface ThemeModeSwitchOutsideProps {
|
|
@@ -23,7 +23,7 @@ interface ThemeModeSwitchOutsideProps {
|
|
|
23
23
|
* Icons flank the switch control on either side.
|
|
24
24
|
* Pure component - requires value and onChange props.
|
|
25
25
|
*/
|
|
26
|
-
declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps):
|
|
26
|
+
declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime20.JSX.Element;
|
|
27
27
|
declare namespace ThemeModeSwitchOutside {
|
|
28
28
|
var displayName: string;
|
|
29
29
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime16 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region src/theme-toggle/ThemeModeToggleButton.d.ts
|
|
4
4
|
interface ThemeModeToggleButtonProps {
|
|
@@ -14,7 +14,7 @@ interface ThemeModeToggleButtonProps {
|
|
|
14
14
|
* Light/Dark toggle button.
|
|
15
15
|
* Pure component - toggles between light and dark.
|
|
16
16
|
*/
|
|
17
|
-
declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps):
|
|
17
|
+
declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime16.JSX.Element;
|
|
18
18
|
declare namespace ThemeModeToggleButton {
|
|
19
19
|
var displayName: string;
|
|
20
20
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime17 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region src/theme-toggle/ThemeModeToggleButton.d.ts
|
|
4
4
|
interface ThemeModeToggleButtonProps {
|
|
@@ -14,7 +14,7 @@ interface ThemeModeToggleButtonProps {
|
|
|
14
14
|
* Light/Dark toggle button.
|
|
15
15
|
* Pure component - toggles between light and dark.
|
|
16
16
|
*/
|
|
17
|
-
declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps):
|
|
17
|
+
declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime17.JSX.Element;
|
|
18
18
|
declare namespace ThemeModeToggleButton {
|
|
19
19
|
var displayName: string;
|
|
20
20
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pixpilot/shadcn-ui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.26.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",
|
|
@@ -67,8 +67,8 @@
|
|
|
67
67
|
"@internal/hooks": "0.0.0",
|
|
68
68
|
"@internal/prettier-config": "0.0.1",
|
|
69
69
|
"@internal/tsconfig": "0.1.0",
|
|
70
|
-
"@internal/
|
|
71
|
-
"@internal/
|
|
70
|
+
"@internal/tsdown-config": "0.1.0",
|
|
71
|
+
"@internal/vitest-config": "0.1.0"
|
|
72
72
|
},
|
|
73
73
|
"prettier": "@internal/prettier-config",
|
|
74
74
|
"scripts": {
|