@codefast/ui 0.3.13-canary.2 → 0.3.13-canary.4
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/CHANGELOG.md +26 -0
- package/dist/components/accordion.d.mts +37 -0
- package/dist/components/accordion.mjs +53 -0
- package/dist/components/alert-dialog.d.mts +74 -0
- package/dist/components/alert-dialog.mjs +92 -0
- package/dist/components/alert.d.mts +30 -0
- package/dist/components/alert.mjs +49 -0
- package/dist/components/aspect-ratio.d.mts +10 -0
- package/dist/components/aspect-ratio.mjs +12 -0
- package/dist/components/avatar.d.mts +21 -0
- package/dist/components/avatar.mjs +28 -0
- package/dist/components/badge.d.mts +24 -0
- package/dist/components/badge.mjs +56 -0
- package/dist/components/breadcrumb.d.mts +44 -0
- package/dist/components/breadcrumb.mjs +67 -0
- package/dist/components/button-group.d.mts +34 -0
- package/dist/components/button-group.mjs +53 -0
- package/dist/components/button.d.mts +38 -0
- package/dist/components/button.mjs +99 -0
- package/dist/components/calendar.d.mts +27 -0
- package/dist/components/calendar.mjs +114 -0
- package/dist/components/card.d.mts +41 -0
- package/dist/components/card.mjs +55 -0
- package/dist/components/carousel.d.mts +68 -0
- package/dist/components/carousel.mjs +135 -0
- package/dist/components/chart.d.mts +93 -0
- package/dist/components/chart.mjs +189 -0
- package/dist/components/checkbox-cards.d.mts +17 -0
- package/dist/components/checkbox-cards.mjs +30 -0
- package/dist/components/checkbox-group.d.mts +16 -0
- package/dist/components/checkbox-group.mjs +27 -0
- package/dist/components/checkbox.d.mts +11 -0
- package/dist/components/checkbox.mjs +20 -0
- package/dist/components/collapsible.d.mts +18 -0
- package/dist/components/collapsible.mjs +24 -0
- package/dist/components/command.d.mts +57 -0
- package/dist/components/command.mjs +92 -0
- package/dist/components/context-menu.d.mts +91 -0
- package/dist/components/context-menu.mjs +122 -0
- package/dist/components/dialog.d.mts +65 -0
- package/dist/components/dialog.mjs +93 -0
- package/dist/components/drawer.d.mts +65 -0
- package/dist/components/drawer.mjs +78 -0
- package/dist/components/dropdown-menu.d.mts +92 -0
- package/dist/components/dropdown-menu.mjs +129 -0
- package/dist/components/empty.d.mts +44 -0
- package/dist/components/empty.mjs +64 -0
- package/dist/components/field.d.mts +79 -0
- package/dist/components/field.mjs +132 -0
- package/dist/components/form.d.mts +48 -0
- package/dist/components/form.mjs +92 -0
- package/dist/components/hover-card.d.mts +26 -0
- package/dist/components/hover-card.mjs +35 -0
- package/dist/components/input-group.d.mts +61 -0
- package/dist/components/input-group.mjs +142 -0
- package/dist/components/input-number.d.mts +28 -0
- package/dist/components/input-number.mjs +61 -0
- package/dist/components/input-otp.d.mts +29 -0
- package/dist/components/input-otp.mjs +48 -0
- package/dist/components/input-password.d.mts +13 -0
- package/dist/components/input-password.mjs +38 -0
- package/dist/components/input-search.d.mts +20 -0
- package/dist/components/input-search.mjs +50 -0
- package/dist/components/input.d.mts +11 -0
- package/dist/components/input.mjs +14 -0
- package/dist/components/item.d.mts +82 -0
- package/dist/components/item.mjs +137 -0
- package/dist/components/kbd.d.mts +15 -0
- package/dist/components/kbd.mjs +19 -0
- package/dist/components/label.d.mts +11 -0
- package/dist/components/label.mjs +14 -0
- package/dist/components/menubar.d.mts +100 -0
- package/dist/components/menubar.mjs +133 -0
- package/dist/components/native-select.d.mts +19 -0
- package/dist/components/native-select.mjs +34 -0
- package/dist/components/navigation-menu.d.mts +44 -0
- package/dist/components/navigation-menu.mjs +79 -0
- package/dist/components/pagination.d.mts +46 -0
- package/dist/components/pagination.mjs +71 -0
- package/dist/components/popover.d.mts +30 -0
- package/dist/components/popover.mjs +41 -0
- package/dist/components/progress-circle.d.mts +124 -0
- package/dist/components/progress-circle.mjs +120 -0
- package/dist/components/progress.d.mts +12 -0
- package/dist/components/progress.mjs +19 -0
- package/dist/components/{radio-cards.d.ts → radio-cards.d.mts} +10 -5
- package/dist/components/radio-cards.mjs +29 -0
- package/dist/components/radio-group.d.mts +16 -0
- package/dist/components/radio-group.mjs +25 -0
- package/dist/components/radio.d.mts +14 -0
- package/dist/components/radio.mjs +16 -0
- package/dist/components/resizable.d.mts +23 -0
- package/dist/components/resizable.mjs +32 -0
- package/dist/components/scroll-area.d.mts +40 -0
- package/dist/components/scroll-area.mjs +101 -0
- package/dist/components/select.d.mts +62 -0
- package/dist/components/select.mjs +101 -0
- package/dist/components/separator.d.mts +32 -0
- package/dist/components/separator.mjs +45 -0
- package/dist/components/sheet.d.mts +75 -0
- package/dist/components/sheet.mjs +134 -0
- package/dist/components/sidebar.d.mts +195 -0
- package/dist/components/sidebar.mjs +375 -0
- package/dist/components/skeleton.d.mts +10 -0
- package/dist/components/skeleton.mjs +12 -0
- package/dist/components/slider.d.mts +15 -0
- package/dist/components/slider.mjs +40 -0
- package/dist/components/sonner.d.mts +10 -0
- package/dist/components/sonner.mjs +21 -0
- package/dist/components/spinner.d.mts +14 -0
- package/dist/components/spinner.mjs +40 -0
- package/dist/components/switch.d.mts +11 -0
- package/dist/components/switch.mjs +18 -0
- package/dist/components/table.d.mts +45 -0
- package/dist/components/table.mjs +65 -0
- package/dist/components/tabs.d.mts +26 -0
- package/dist/components/tabs.mjs +35 -0
- package/dist/components/textarea.d.mts +10 -0
- package/dist/components/textarea.mjs +12 -0
- package/dist/components/toggle-group.d.mts +30 -0
- package/dist/components/toggle-group.mjs +53 -0
- package/dist/components/toggle.d.mts +28 -0
- package/dist/components/toggle.mjs +53 -0
- package/dist/components/tooltip.d.mts +30 -0
- package/dist/components/tooltip.mjs +42 -0
- package/dist/hooks/{use-animated-value.d.ts → use-animated-value.d.mts} +4 -2
- package/dist/hooks/use-animated-value.mjs +62 -0
- package/dist/hooks/{use-copy-to-clipboard.d.ts → use-copy-to-clipboard.d.mts} +11 -6
- package/dist/hooks/use-copy-to-clipboard.mjs +43 -0
- package/dist/hooks/{use-is-mobile.d.ts → use-is-mobile.d.mts} +4 -2
- package/dist/hooks/use-is-mobile.mjs +26 -0
- package/dist/hooks/{use-media-query.d.ts → use-media-query.d.mts} +4 -2
- package/dist/hooks/use-media-query.mjs +50 -0
- package/dist/hooks/{use-mutation-observer.d.ts → use-mutation-observer.d.mts} +6 -3
- package/dist/hooks/use-mutation-observer.mjs +41 -0
- package/dist/hooks/use-pagination.d.mts +44 -0
- package/dist/hooks/use-pagination.mjs +107 -0
- package/dist/index.d.mts +69 -0
- package/dist/index.mjs +69 -0
- package/dist/lib/utils.d.mts +13 -0
- package/dist/lib/utils.mjs +10 -0
- package/dist/node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/clsx.d.mts +6 -0
- package/dist/primitives/checkbox-group.d.mts +144 -0
- package/dist/primitives/checkbox-group.mjs +126 -0
- package/dist/primitives/input-number.d.mts +73 -0
- package/dist/primitives/input-number.mjs +514 -0
- package/dist/primitives/input.d.mts +72 -0
- package/dist/primitives/input.mjs +75 -0
- package/dist/primitives/progress-circle.d.mts +146 -0
- package/dist/primitives/progress-circle.mjs +178 -0
- package/package.json +164 -170
- package/dist/components/accordion.d.ts +0 -19
- package/dist/components/accordion.d.ts.map +0 -1
- package/dist/components/accordion.js +0 -26
- package/dist/components/alert-dialog.d.ts +0 -39
- package/dist/components/alert-dialog.d.ts.map +0 -1
- package/dist/components/alert-dialog.js +0 -39
- package/dist/components/alert.d.ts +0 -19
- package/dist/components/alert.d.ts.map +0 -1
- package/dist/components/alert.js +0 -41
- package/dist/components/aspect-ratio.d.ts +0 -7
- package/dist/components/aspect-ratio.d.ts.map +0 -1
- package/dist/components/aspect-ratio.js +0 -10
- package/dist/components/avatar.d.ts +0 -11
- package/dist/components/avatar.d.ts.map +0 -1
- package/dist/components/avatar.js +0 -17
- package/dist/components/badge.d.ts +0 -18
- package/dist/components/badge.d.ts.map +0 -1
- package/dist/components/badge.js +0 -59
- package/dist/components/breadcrumb.d.ts +0 -22
- package/dist/components/breadcrumb.d.ts.map +0 -1
- package/dist/components/breadcrumb.js +0 -31
- package/dist/components/button-group.d.ts +0 -20
- package/dist/components/button-group.d.ts.map +0 -1
- package/dist/components/button-group.js +0 -48
- package/dist/components/button.d.ts +0 -29
- package/dist/components/button.d.ts.map +0 -1
- package/dist/components/button.js +0 -92
- package/dist/components/calendar.d.ts +0 -13
- package/dist/components/calendar.d.ts.map +0 -1
- package/dist/components/calendar.js +0 -104
- package/dist/components/card.d.ts +0 -18
- package/dist/components/card.d.ts.map +0 -1
- package/dist/components/card.js +0 -27
- package/dist/components/carousel.d.ts +0 -38
- package/dist/components/carousel.d.ts.map +0 -1
- package/dist/components/carousel.js +0 -103
- package/dist/components/chart.d.ts +0 -58
- package/dist/components/chart.d.ts.map +0 -1
- package/dist/components/chart.js +0 -198
- package/dist/components/checkbox-cards.d.ts +0 -11
- package/dist/components/checkbox-cards.d.ts.map +0 -1
- package/dist/components/checkbox-cards.js +0 -16
- package/dist/components/checkbox-group.d.ts +0 -9
- package/dist/components/checkbox-group.d.ts.map +0 -1
- package/dist/components/checkbox-group.js +0 -15
- package/dist/components/checkbox.d.ts +0 -7
- package/dist/components/checkbox.d.ts.map +0 -1
- package/dist/components/checkbox.js +0 -12
- package/dist/components/collapsible.d.ts +0 -11
- package/dist/components/collapsible.d.ts.map +0 -1
- package/dist/components/collapsible.js +0 -16
- package/dist/components/command.d.ts +0 -26
- package/dist/components/command.d.ts.map +0 -1
- package/dist/components/command.js +0 -41
- package/dist/components/context-menu.d.ts +0 -42
- package/dist/components/context-menu.d.ts.map +0 -1
- package/dist/components/context-menu.js +0 -54
- package/dist/components/dialog.d.ts +0 -35
- package/dist/components/dialog.d.ts.map +0 -1
- package/dist/components/dialog.js +0 -41
- package/dist/components/drawer.d.ts +0 -34
- package/dist/components/drawer.d.ts.map +0 -1
- package/dist/components/drawer.js +0 -36
- package/dist/components/dropdown-menu.d.ts +0 -42
- package/dist/components/dropdown-menu.d.ts.map +0 -1
- package/dist/components/dropdown-menu.js +0 -54
- package/dist/components/empty.d.ts +0 -23
- package/dist/components/empty.d.ts.map +0 -1
- package/dist/components/empty.js +0 -47
- package/dist/components/field.d.ts +0 -42
- package/dist/components/field.d.ts.map +0 -1
- package/dist/components/field.js +0 -85
- package/dist/components/form.d.ts +0 -27
- package/dist/components/form.d.ts.map +0 -1
- package/dist/components/form.js +0 -76
- package/dist/components/hover-card.d.ts +0 -13
- package/dist/components/hover-card.d.ts.map +0 -1
- package/dist/components/hover-card.js +0 -20
- package/dist/components/input-group.d.ts +0 -37
- package/dist/components/input-group.d.ts.map +0 -1
- package/dist/components/input-group.js +0 -127
- package/dist/components/input-number.d.ts +0 -8
- package/dist/components/input-number.d.ts.map +0 -1
- package/dist/components/input-number.js +0 -20
- package/dist/components/input-otp.d.ts +0 -16
- package/dist/components/input-otp.d.ts.map +0 -1
- package/dist/components/input-otp.js +0 -25
- package/dist/components/input-password.d.ts +0 -7
- package/dist/components/input-password.d.ts.map +0 -1
- package/dist/components/input-password.js +0 -17
- package/dist/components/input-search.d.ts +0 -11
- package/dist/components/input-search.d.ts.map +0 -1
- package/dist/components/input-search.js +0 -22
- package/dist/components/input.d.ts +0 -6
- package/dist/components/input.d.ts.map +0 -1
- package/dist/components/input.js +0 -10
- package/dist/components/item.d.ts +0 -46
- package/dist/components/item.d.ts.map +0 -1
- package/dist/components/item.js +0 -94
- package/dist/components/kbd.d.ts +0 -8
- package/dist/components/kbd.d.ts.map +0 -1
- package/dist/components/kbd.js +0 -12
- package/dist/components/label.d.ts +0 -7
- package/dist/components/label.d.ts.map +0 -1
- package/dist/components/label.js +0 -11
- package/dist/components/menubar.d.ts +0 -44
- package/dist/components/menubar.d.ts.map +0 -1
- package/dist/components/menubar.js +0 -57
- package/dist/components/native-select.d.ts +0 -10
- package/dist/components/native-select.d.ts.map +0 -1
- package/dist/components/native-select.js +0 -16
- package/dist/components/navigation-menu.d.ts +0 -21
- package/dist/components/navigation-menu.d.ts.map +0 -1
- package/dist/components/navigation-menu.js +0 -43
- package/dist/components/pagination.d.ts +0 -26
- package/dist/components/pagination.d.ts.map +0 -1
- package/dist/components/pagination.js +0 -29
- package/dist/components/popover.d.ts +0 -15
- package/dist/components/popover.d.ts.map +0 -1
- package/dist/components/popover.js +0 -23
- package/dist/components/progress-circle.d.ts +0 -107
- package/dist/components/progress-circle.d.ts.map +0 -1
- package/dist/components/progress-circle.js +0 -83
- package/dist/components/progress.d.ts +0 -7
- package/dist/components/progress.d.ts.map +0 -1
- package/dist/components/progress.js +0 -13
- package/dist/components/radio-cards.d.ts.map +0 -1
- package/dist/components/radio-cards.js +0 -15
- package/dist/components/radio-group.d.ts +0 -9
- package/dist/components/radio-group.d.ts.map +0 -1
- package/dist/components/radio-group.js +0 -14
- package/dist/components/radio.d.ts +0 -8
- package/dist/components/radio.d.ts.map +0 -1
- package/dist/components/radio.js +0 -11
- package/dist/components/resizable.d.ts +0 -13
- package/dist/components/resizable.d.ts.map +0 -1
- package/dist/components/resizable.js +0 -18
- package/dist/components/scroll-area.d.ts +0 -28
- package/dist/components/scroll-area.d.ts.map +0 -1
- package/dist/components/scroll-area.js +0 -77
- package/dist/components/select.d.ts +0 -29
- package/dist/components/select.d.ts.map +0 -1
- package/dist/components/select.js +0 -49
- package/dist/components/separator.d.ts +0 -23
- package/dist/components/separator.d.ts.map +0 -1
- package/dist/components/separator.js +0 -36
- package/dist/components/sheet.d.ts +0 -43
- package/dist/components/sheet.d.ts.map +0 -1
- package/dist/components/sheet.js +0 -90
- package/dist/components/sidebar.d.ts +0 -102
- package/dist/components/sidebar.d.ts.map +0 -1
- package/dist/components/sidebar.js +0 -241
- package/dist/components/skeleton.d.ts +0 -6
- package/dist/components/skeleton.d.ts.map +0 -1
- package/dist/components/skeleton.js +0 -9
- package/dist/components/slider.d.ts +0 -7
- package/dist/components/slider.d.ts.map +0 -1
- package/dist/components/slider.js +0 -18
- package/dist/components/sonner.d.ts +0 -8
- package/dist/components/sonner.d.ts.map +0 -1
- package/dist/components/sonner.js +0 -18
- package/dist/components/spinner.d.ts +0 -8
- package/dist/components/spinner.d.ts.map +0 -1
- package/dist/components/spinner.js +0 -27
- package/dist/components/switch.d.ts +0 -7
- package/dist/components/switch.d.ts.map +0 -1
- package/dist/components/switch.js +0 -11
- package/dist/components/table.d.ts +0 -20
- package/dist/components/table.d.ts.map +0 -1
- package/dist/components/table.js +0 -30
- package/dist/components/tabs.d.ts +0 -13
- package/dist/components/tabs.d.ts.map +0 -1
- package/dist/components/tabs.js +0 -20
- package/dist/components/textarea.d.ts +0 -6
- package/dist/components/textarea.d.ts.map +0 -1
- package/dist/components/textarea.js +0 -9
- package/dist/components/toggle-group.d.ts +0 -16
- package/dist/components/toggle-group.d.ts.map +0 -1
- package/dist/components/toggle-group.js +0 -35
- package/dist/components/toggle.d.ts +0 -21
- package/dist/components/toggle.d.ts.map +0 -1
- package/dist/components/toggle.js +0 -49
- package/dist/components/tooltip.d.ts +0 -15
- package/dist/components/tooltip.d.ts.map +0 -1
- package/dist/components/tooltip.js +0 -23
- package/dist/hooks/use-animated-value.d.ts.map +0 -1
- package/dist/hooks/use-animated-value.js +0 -71
- package/dist/hooks/use-copy-to-clipboard.d.ts.map +0 -1
- package/dist/hooks/use-copy-to-clipboard.js +0 -46
- package/dist/hooks/use-is-mobile.d.ts.map +0 -1
- package/dist/hooks/use-is-mobile.js +0 -23
- package/dist/hooks/use-media-query.d.ts.map +0 -1
- package/dist/hooks/use-media-query.js +0 -53
- package/dist/hooks/use-mutation-observer.d.ts.map +0 -1
- package/dist/hooks/use-mutation-observer.js +0 -40
- package/dist/hooks/use-pagination.d.ts +0 -37
- package/dist/hooks/use-pagination.d.ts.map +0 -1
- package/dist/hooks/use-pagination.js +0 -107
- package/dist/index.d.ts +0 -131
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js +0 -68
- package/dist/lib/utils.d.ts +0 -10
- package/dist/lib/utils.d.ts.map +0 -1
- package/dist/lib/utils.js +0 -10
- package/dist/primitives/checkbox-group.d.ts +0 -123
- package/dist/primitives/checkbox-group.d.ts.map +0 -1
- package/dist/primitives/checkbox-group.js +0 -112
- package/dist/primitives/input-number.d.ts +0 -63
- package/dist/primitives/input-number.d.ts.map +0 -1
- package/dist/primitives/input-number.js +0 -458
- package/dist/primitives/input.d.ts +0 -67
- package/dist/primitives/input.d.ts.map +0 -1
- package/dist/primitives/input.js +0 -76
- package/dist/primitives/progress-circle.d.ts +0 -116
- package/dist/primitives/progress-circle.d.ts.map +0 -1
- package/dist/primitives/progress-circle.js +0 -163
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/utils.mjs";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { useTheme } from "next-themes";
|
|
5
|
+
import { Toaster as Toaster$1, toast, useSonner } from "sonner";
|
|
6
|
+
//#region src/components/sonner.tsx
|
|
7
|
+
function Toaster({ ...props }) {
|
|
8
|
+
const { theme = "system" } = useTheme();
|
|
9
|
+
return /* @__PURE__ */ jsx(Toaster$1, {
|
|
10
|
+
className: cn("group", "toaster"),
|
|
11
|
+
style: {
|
|
12
|
+
"--normal-bg": "var(--popover)",
|
|
13
|
+
"--normal-border": "var(--border)",
|
|
14
|
+
"--normal-text": "var(--popover-foreground)"
|
|
15
|
+
},
|
|
16
|
+
theme,
|
|
17
|
+
...props
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
//#endregion
|
|
21
|
+
export { Toaster, toast, useSonner };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ComponentProps, ReactNode } from "react";
|
|
2
|
+
|
|
3
|
+
//#region src/components/spinner.d.ts
|
|
4
|
+
interface SpinnerProps extends ComponentProps<"span"> {
|
|
5
|
+
loading?: boolean;
|
|
6
|
+
}
|
|
7
|
+
declare function Spinner({
|
|
8
|
+
children,
|
|
9
|
+
className,
|
|
10
|
+
loading,
|
|
11
|
+
...props
|
|
12
|
+
}: SpinnerProps): ReactNode;
|
|
13
|
+
//#endregion
|
|
14
|
+
export { Spinner, type SpinnerProps };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/utils.mjs";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
|
|
5
|
+
//#region src/components/spinner.tsx
|
|
6
|
+
const SPINNER_COUNT = 8;
|
|
7
|
+
function Spinner({ children, className, loading = true, ...props }) {
|
|
8
|
+
if (!loading) return children;
|
|
9
|
+
const spinner = /* @__PURE__ */ jsx("span", {
|
|
10
|
+
className: cn("relative flex size-4 items-center justify-center", "opacity-60", className),
|
|
11
|
+
...props,
|
|
12
|
+
children: Array.from({ length: SPINNER_COUNT }, (_, index) => /* @__PURE__ */ jsx("span", {
|
|
13
|
+
className: cn("absolute", "h-full rotate-(--spinner-rotate)", "before:block before:h-1/3 before:w-full before:animate-out before:rounded-full before:bg-current before:delay-(--spinner-delay) before:animation-duration-(--spinner-duration) before:fade-out-25 before:repeat-infinite"),
|
|
14
|
+
style: {
|
|
15
|
+
"--spinner-delay": `-${((SPINNER_COUNT - index) * 100).toString()}ms`,
|
|
16
|
+
"--spinner-duration": `${(SPINNER_COUNT * 100).toString()}ms`,
|
|
17
|
+
"--spinner-rotate": `${(360 / SPINNER_COUNT * index).toString()}deg`,
|
|
18
|
+
width: `${(100 / SPINNER_COUNT).toString()}%`
|
|
19
|
+
}
|
|
20
|
+
}, index))
|
|
21
|
+
});
|
|
22
|
+
if (children === void 0) return spinner;
|
|
23
|
+
return /* @__PURE__ */ jsxs("span", {
|
|
24
|
+
className: "relative",
|
|
25
|
+
children: [
|
|
26
|
+
/* @__PURE__ */ jsx("span", {
|
|
27
|
+
"aria-hidden": true,
|
|
28
|
+
className: cn("contents", "invisible"),
|
|
29
|
+
children
|
|
30
|
+
}),
|
|
31
|
+
/* @__PURE__ */ jsx(VisuallyHidden, { children }),
|
|
32
|
+
/* @__PURE__ */ jsx("span", {
|
|
33
|
+
className: cn("absolute flex items-center justify-center", "inset-0"),
|
|
34
|
+
children: spinner
|
|
35
|
+
})
|
|
36
|
+
]
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
//#endregion
|
|
40
|
+
export { Spinner };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ComponentProps, JSX } from "react";
|
|
2
|
+
import * as SwitchPrimitives from "@radix-ui/react-switch";
|
|
3
|
+
|
|
4
|
+
//#region src/components/switch.d.ts
|
|
5
|
+
type SwitchProps = ComponentProps<typeof SwitchPrimitives.Root>;
|
|
6
|
+
declare function Switch({
|
|
7
|
+
className,
|
|
8
|
+
...props
|
|
9
|
+
}: SwitchProps): JSX.Element;
|
|
10
|
+
//#endregion
|
|
11
|
+
export { Switch, type SwitchProps };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/utils.mjs";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import * as SwitchPrimitives from "@radix-ui/react-switch";
|
|
5
|
+
//#region src/components/switch.tsx
|
|
6
|
+
function Switch({ className, ...props }) {
|
|
7
|
+
return /* @__PURE__ */ jsx(SwitchPrimitives.Root, {
|
|
8
|
+
className: cn("peer inline-flex h-5 w-9 shrink-0 items-center p-0.75", "rounded-full border border-transparent shadow-xs outline-hidden", "transition-all", "focus-visible:ring-3 focus-visible:ring-ring/50", "focus-visible:not-data-checked:border-ring/60", "disabled:opacity-50", "data-checked:bg-primary", "data-checked:focus-visible:ring-primary/20", "dark:data-checked:focus-visible:ring-primary/40", "data-unchecked:bg-input", "dark:data-unchecked:bg-input/80", className),
|
|
9
|
+
"data-slot": "switch",
|
|
10
|
+
...props,
|
|
11
|
+
children: /* @__PURE__ */ jsx(SwitchPrimitives.Thumb, {
|
|
12
|
+
className: cn("block", "size-3.5", "rounded-full", "bg-background shadow-sm", "pointer-events-none transition-transform", "dark:not-data-checked:bg-foreground", "data-checked:translate-x-3.5", "data-unchecked:translate-x-0"),
|
|
13
|
+
"data-slot": "switch-thumb"
|
|
14
|
+
})
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
//#endregion
|
|
18
|
+
export { Switch };
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { ComponentProps, JSX } from "react";
|
|
2
|
+
|
|
3
|
+
//#region src/components/table.d.ts
|
|
4
|
+
type TableProps = ComponentProps<"table">;
|
|
5
|
+
declare function Table({
|
|
6
|
+
className,
|
|
7
|
+
...props
|
|
8
|
+
}: TableProps): JSX.Element;
|
|
9
|
+
type TableHeaderProps = ComponentProps<"thead">;
|
|
10
|
+
declare function TableHeader({
|
|
11
|
+
className,
|
|
12
|
+
...props
|
|
13
|
+
}: TableHeaderProps): JSX.Element;
|
|
14
|
+
type TableBodyProps = ComponentProps<"tbody">;
|
|
15
|
+
declare function TableBody({
|
|
16
|
+
className,
|
|
17
|
+
...props
|
|
18
|
+
}: TableBodyProps): JSX.Element;
|
|
19
|
+
type TableFooterProps = ComponentProps<"tfoot">;
|
|
20
|
+
declare function TableFooter({
|
|
21
|
+
className,
|
|
22
|
+
...props
|
|
23
|
+
}: TableFooterProps): JSX.Element;
|
|
24
|
+
type TableRowProps = ComponentProps<"tr">;
|
|
25
|
+
declare function TableRow({
|
|
26
|
+
className,
|
|
27
|
+
...props
|
|
28
|
+
}: TableRowProps): JSX.Element;
|
|
29
|
+
type TableHeadProps = ComponentProps<"th">;
|
|
30
|
+
declare function TableHead({
|
|
31
|
+
className,
|
|
32
|
+
...props
|
|
33
|
+
}: TableHeadProps): JSX.Element;
|
|
34
|
+
type TableCellProps = ComponentProps<"td">;
|
|
35
|
+
declare function TableCell({
|
|
36
|
+
className,
|
|
37
|
+
...props
|
|
38
|
+
}: TableCellProps): JSX.Element;
|
|
39
|
+
type TableCaptionProps = ComponentProps<"caption">;
|
|
40
|
+
declare function TableCaption({
|
|
41
|
+
className,
|
|
42
|
+
...props
|
|
43
|
+
}: TableCaptionProps): JSX.Element;
|
|
44
|
+
//#endregion
|
|
45
|
+
export { Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps };
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { cn } from "../lib/utils.mjs";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
//#region src/components/table.tsx
|
|
4
|
+
function Table({ className, ...props }) {
|
|
5
|
+
return /* @__PURE__ */ jsx("div", {
|
|
6
|
+
className: cn("relative", "w-full overflow-auto"),
|
|
7
|
+
"data-slot": "table-cotainer",
|
|
8
|
+
children: /* @__PURE__ */ jsx("table", {
|
|
9
|
+
className: cn("w-full text-sm", "caption-bottom", className),
|
|
10
|
+
"data-slot": "table",
|
|
11
|
+
...props
|
|
12
|
+
})
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
function TableHeader({ className, ...props }) {
|
|
16
|
+
return /* @__PURE__ */ jsx("thead", {
|
|
17
|
+
className: cn("*:border-b", "*:has-aria-expanded:bg-transparent", className),
|
|
18
|
+
"data-slot": "table-header",
|
|
19
|
+
...props
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
function TableBody({ className, ...props }) {
|
|
23
|
+
return /* @__PURE__ */ jsx("tbody", {
|
|
24
|
+
className: cn("*:last-child:border-0", className),
|
|
25
|
+
"data-slot": "table-body",
|
|
26
|
+
...props
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
function TableFooter({ className, ...props }) {
|
|
30
|
+
return /* @__PURE__ */ jsx("tfoot", {
|
|
31
|
+
className: cn("bg-muted/50 font-medium", "*:border-t *:border-b-0", "*:has-aria-expanded:bg-transparent", className),
|
|
32
|
+
"data-slot": "table-footer",
|
|
33
|
+
...props
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
function TableRow({ className, ...props }) {
|
|
37
|
+
return /* @__PURE__ */ jsx("tr", {
|
|
38
|
+
className: cn("border-b", "transition-colors", "hover:bg-muted/50", "has-aria-expanded:bg-muted/50", "data-selected:bg-muted", className),
|
|
39
|
+
"data-slot": "table-row",
|
|
40
|
+
...props
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
function TableHead({ className, ...props }) {
|
|
44
|
+
return /* @__PURE__ */ jsx("th", {
|
|
45
|
+
className: cn("p-2", "text-left align-middle font-medium", className),
|
|
46
|
+
"data-slot": "table-head",
|
|
47
|
+
...props
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
function TableCell({ className, ...props }) {
|
|
51
|
+
return /* @__PURE__ */ jsx("td", {
|
|
52
|
+
className: cn("p-2", "align-middle", className),
|
|
53
|
+
"data-slot": "table-cell",
|
|
54
|
+
...props
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
function TableCaption({ className, ...props }) {
|
|
58
|
+
return /* @__PURE__ */ jsx("caption", {
|
|
59
|
+
className: cn("mt-4", "text-sm text-muted-foreground", className),
|
|
60
|
+
"data-slot": "table-caption",
|
|
61
|
+
...props
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
//#endregion
|
|
65
|
+
export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { ComponentProps, JSX } from "react";
|
|
2
|
+
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
3
|
+
|
|
4
|
+
//#region src/components/tabs.d.ts
|
|
5
|
+
type TabsProps = ComponentProps<typeof TabsPrimitive.Root>;
|
|
6
|
+
declare function Tabs({
|
|
7
|
+
className,
|
|
8
|
+
...props
|
|
9
|
+
}: TabsProps): JSX.Element;
|
|
10
|
+
type TabsListProps = ComponentProps<typeof TabsPrimitive.List>;
|
|
11
|
+
declare function TabsList({
|
|
12
|
+
className,
|
|
13
|
+
...props
|
|
14
|
+
}: TabsListProps): JSX.Element;
|
|
15
|
+
type TabsTriggerProps = ComponentProps<typeof TabsPrimitive.Trigger>;
|
|
16
|
+
declare function TabsTrigger({
|
|
17
|
+
className,
|
|
18
|
+
...props
|
|
19
|
+
}: TabsTriggerProps): JSX.Element;
|
|
20
|
+
type TabsContentProps = ComponentProps<typeof TabsPrimitive.Content>;
|
|
21
|
+
declare function TabsContent({
|
|
22
|
+
className,
|
|
23
|
+
...props
|
|
24
|
+
}: TabsContentProps): JSX.Element;
|
|
25
|
+
//#endregion
|
|
26
|
+
export { Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/utils.mjs";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
5
|
+
//#region src/components/tabs.tsx
|
|
6
|
+
function Tabs({ className, ...props }) {
|
|
7
|
+
return /* @__PURE__ */ jsx(TabsPrimitive.Root, {
|
|
8
|
+
className: cn("flex flex-col gap-2", className),
|
|
9
|
+
"data-slot": "tabs",
|
|
10
|
+
...props
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
function TabsList({ className, ...props }) {
|
|
14
|
+
return /* @__PURE__ */ jsx(TabsPrimitive.List, {
|
|
15
|
+
className: cn("inline-flex w-fit items-center justify-center gap-1 px-1 py-1", "rounded-xl", "bg-muted text-muted-foreground", className),
|
|
16
|
+
"data-slot": "tabs-list",
|
|
17
|
+
...props
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
function TabsTrigger({ className, ...props }) {
|
|
21
|
+
return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, {
|
|
22
|
+
className: cn("inline-flex items-center justify-center gap-1.5", "px-2 py-1.5", "rounded-lg", "text-sm font-medium whitespace-nowrap text-muted-foreground", "transition", "not-dark:outline-hidden", "hover:not-disabled:text-foreground", "focus-visible:ring-3 focus-visible:ring-ring/50", "disabled:opacity-50", "dark:focus-visible:-outline-offset-1 dark:focus-visible:outline-ring", "data-active:bg-background data-active:text-foreground data-active:shadow-sm", "dark:data-active:bg-input/50", "dark:focus-visible:data-active:outline-1", "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
23
|
+
"data-slot": "tabs-trigger",
|
|
24
|
+
...props
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
function TabsContent({ className, ...props }) {
|
|
28
|
+
return /* @__PURE__ */ jsx(TabsPrimitive.Content, {
|
|
29
|
+
className: cn("mt-2", "rounded-xl ring-ring/50 outline-ring", "focus-visible:ring-4 focus-visible:outline-1", className),
|
|
30
|
+
"data-slot": "tabs-content",
|
|
31
|
+
...props
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
//#endregion
|
|
35
|
+
export { Tabs, TabsContent, TabsList, TabsTrigger };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ComponentProps, JSX } from "react";
|
|
2
|
+
|
|
3
|
+
//#region src/components/textarea.d.ts
|
|
4
|
+
type TextareaProps = ComponentProps<"textarea">;
|
|
5
|
+
declare function Textarea({
|
|
6
|
+
className,
|
|
7
|
+
...props
|
|
8
|
+
}: TextareaProps): JSX.Element;
|
|
9
|
+
//#endregion
|
|
10
|
+
export { Textarea, type TextareaProps };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { cn } from "../lib/utils.mjs";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
//#region src/components/textarea.tsx
|
|
4
|
+
function Textarea({ className, ...props }) {
|
|
5
|
+
return /* @__PURE__ */ jsx("textarea", {
|
|
6
|
+
className: cn("flex min-h-16 w-full grow px-3 py-2", "rounded-lg border border-input shadow-xs outline-hidden", "text-base", "transition", "placeholder:text-muted-foreground", "hover:not-disabled:not-focus-visible:border-ring/60", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "disabled:opacity-50", "aria-invalid:border-destructive", "focus-within:aria-invalid:ring-destructive/20", "hover:not-disabled:not-focus-within:aria-invalid:border-destructive/60", "md:text-sm", "dark:bg-input/30", "dark:focus-within:aria-invalid:ring-destructive/40", className),
|
|
7
|
+
"data-slot": "textarea",
|
|
8
|
+
...props
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
//#endregion
|
|
12
|
+
export { Textarea };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { ToggleVariants } from "./toggle.mjs";
|
|
2
|
+
import { ComponentProps, JSX } from "react";
|
|
3
|
+
import { Scope } from "@radix-ui/react-context";
|
|
4
|
+
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
|
|
5
|
+
|
|
6
|
+
//#region src/components/toggle-group.d.ts
|
|
7
|
+
type ScopedProps<P> = P & {
|
|
8
|
+
__scopeToggleGroup?: Scope;
|
|
9
|
+
};
|
|
10
|
+
type ToggleGroupProps = ComponentProps<typeof ToggleGroupPrimitive.Root> & ToggleVariants & {
|
|
11
|
+
spacing?: number;
|
|
12
|
+
};
|
|
13
|
+
declare function ToggleGroup({
|
|
14
|
+
__scopeToggleGroup,
|
|
15
|
+
children,
|
|
16
|
+
className,
|
|
17
|
+
size,
|
|
18
|
+
spacing,
|
|
19
|
+
variant,
|
|
20
|
+
...props
|
|
21
|
+
}: ScopedProps<ToggleGroupProps>): JSX.Element;
|
|
22
|
+
type ToggleGroupItemProps = ScopedProps<ComponentProps<typeof ToggleGroupPrimitive.Item>>;
|
|
23
|
+
declare function ToggleGroupItem({
|
|
24
|
+
__scopeToggleGroup,
|
|
25
|
+
children,
|
|
26
|
+
className,
|
|
27
|
+
...props
|
|
28
|
+
}: ToggleGroupItemProps): JSX.Element;
|
|
29
|
+
//#endregion
|
|
30
|
+
export { ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps };
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/utils.mjs";
|
|
3
|
+
import { toggleVariants } from "./toggle.mjs";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
import { createContextScope } from "@radix-ui/react-context";
|
|
6
|
+
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
|
|
7
|
+
import { createToggleGroupScope } from "@radix-ui/react-toggle-group";
|
|
8
|
+
//#region src/components/toggle-group.tsx
|
|
9
|
+
const TOGGLE_GROUP_NAME = "ToggleGroup";
|
|
10
|
+
const [createToggleGroupContext] = createContextScope(TOGGLE_GROUP_NAME, [createToggleGroupScope]);
|
|
11
|
+
const useToggleGroupScope = createToggleGroupScope();
|
|
12
|
+
const [ToggleGroupProvider, useToggleGroupContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
|
|
13
|
+
function ToggleGroup({ __scopeToggleGroup, children, className, size, spacing = 0, variant, ...props }) {
|
|
14
|
+
const toggleGroupScope = useToggleGroupScope(__scopeToggleGroup);
|
|
15
|
+
return /* @__PURE__ */ jsx(ToggleGroupProvider, {
|
|
16
|
+
scope: __scopeToggleGroup,
|
|
17
|
+
size,
|
|
18
|
+
spacing,
|
|
19
|
+
variant,
|
|
20
|
+
children: /* @__PURE__ */ jsx(ToggleGroupPrimitive.Root, {
|
|
21
|
+
className: cn("group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))]", "rounded-lg", "data-[spacing=default]:data-[variant=outline]:shadow-xs", className),
|
|
22
|
+
"data-size": size,
|
|
23
|
+
"data-slot": "toggle-group",
|
|
24
|
+
"data-spacing": spacing,
|
|
25
|
+
"data-variant": variant,
|
|
26
|
+
style: { "--gap": spacing },
|
|
27
|
+
...toggleGroupScope,
|
|
28
|
+
...props,
|
|
29
|
+
children
|
|
30
|
+
})
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
const TOGGLE_GROUP_ITEM_NAME = "ToggleGroupItem";
|
|
34
|
+
function ToggleGroupItem({ __scopeToggleGroup, children, className, ...props }) {
|
|
35
|
+
const { size, spacing, variant } = useToggleGroupContext(TOGGLE_GROUP_ITEM_NAME, __scopeToggleGroup);
|
|
36
|
+
const toggleGroupScope = useToggleGroupScope(__scopeToggleGroup);
|
|
37
|
+
return /* @__PURE__ */ jsx(ToggleGroupPrimitive.Item, {
|
|
38
|
+
className: cn("w-auto min-w-0 shrink-0 px-3", "focus:z-10", "focus-visible:z-10", "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none", "data-[spacing=0]:first:rounded-l-lg", "data-[spacing=0]:last:rounded-r-lg", "data-[spacing=0]:data-[variant=outline]:border-l-0", "data-[spacing=0]:data-[variant=outline]:first:border-l", toggleVariants({
|
|
39
|
+
className,
|
|
40
|
+
size,
|
|
41
|
+
variant
|
|
42
|
+
})),
|
|
43
|
+
"data-size": size,
|
|
44
|
+
"data-slot": "toggle-group-item",
|
|
45
|
+
"data-spacing": spacing,
|
|
46
|
+
"data-variant": variant,
|
|
47
|
+
...toggleGroupScope,
|
|
48
|
+
...props,
|
|
49
|
+
children
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
//#endregion
|
|
53
|
+
export { ToggleGroup, ToggleGroupItem };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { VariantProps } from "../lib/utils.mjs";
|
|
2
|
+
import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
|
|
3
|
+
import { ComponentProps, JSX } from "react";
|
|
4
|
+
import * as TogglePrimitive from "@radix-ui/react-toggle";
|
|
5
|
+
|
|
6
|
+
//#region src/components/toggle.d.ts
|
|
7
|
+
declare const toggleVariants: _$_codefast_tailwind_variants0.VariantFunctionType<{
|
|
8
|
+
size: {
|
|
9
|
+
default: string[];
|
|
10
|
+
lg: string[];
|
|
11
|
+
sm: string[];
|
|
12
|
+
};
|
|
13
|
+
variant: {
|
|
14
|
+
default: string;
|
|
15
|
+
outline: string[];
|
|
16
|
+
};
|
|
17
|
+
}, Record<string, never>>;
|
|
18
|
+
type ToggleVariants = VariantProps<typeof toggleVariants>;
|
|
19
|
+
interface ToggleProps extends ComponentProps<typeof TogglePrimitive.Root>, ToggleVariants {}
|
|
20
|
+
declare function Toggle({
|
|
21
|
+
children,
|
|
22
|
+
className,
|
|
23
|
+
size,
|
|
24
|
+
variant,
|
|
25
|
+
...props
|
|
26
|
+
}: ToggleProps): JSX.Element;
|
|
27
|
+
//#endregion
|
|
28
|
+
export { Toggle, type ToggleProps, type ToggleVariants, toggleVariants };
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { tv } from "../lib/utils.mjs";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import * as TogglePrimitive from "@radix-ui/react-toggle";
|
|
5
|
+
//#region src/components/toggle.tsx
|
|
6
|
+
const toggleVariants = tv({
|
|
7
|
+
base: [
|
|
8
|
+
"inline-flex items-center justify-center gap-2",
|
|
9
|
+
"rounded-lg outline-none",
|
|
10
|
+
"text-sm font-medium whitespace-nowrap",
|
|
11
|
+
"transition-[color,box-shadow]",
|
|
12
|
+
"hover:bg-muted hover:text-muted-foreground",
|
|
13
|
+
"focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
|
|
14
|
+
"disabled:pointer-events-none disabled:opacity-50",
|
|
15
|
+
"aria-invalid:border-destructive aria-invalid:ring-destructive/20",
|
|
16
|
+
"data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
|
|
17
|
+
"dark:aria-invalid:ring-destructive/40",
|
|
18
|
+
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
|
|
19
|
+
],
|
|
20
|
+
variants: {
|
|
21
|
+
size: {
|
|
22
|
+
default: ["h-9 min-w-9", "px-2"],
|
|
23
|
+
lg: ["h-10 min-w-10", "px-2.5"],
|
|
24
|
+
sm: ["h-8 min-w-8", "px-1.5"]
|
|
25
|
+
},
|
|
26
|
+
variant: {
|
|
27
|
+
default: "bg-transparent",
|
|
28
|
+
outline: [
|
|
29
|
+
"border border-input",
|
|
30
|
+
"bg-transparent shadow-xs",
|
|
31
|
+
"hover:bg-accent hover:text-accent-foreground"
|
|
32
|
+
]
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
defaultVariants: {
|
|
36
|
+
size: "default",
|
|
37
|
+
variant: "default"
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
function Toggle({ children, className, size, variant, ...props }) {
|
|
41
|
+
return /* @__PURE__ */ jsx(TogglePrimitive.Root, {
|
|
42
|
+
className: toggleVariants({
|
|
43
|
+
className,
|
|
44
|
+
size,
|
|
45
|
+
variant
|
|
46
|
+
}),
|
|
47
|
+
"data-slot": "toggle",
|
|
48
|
+
...props,
|
|
49
|
+
children
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
//#endregion
|
|
53
|
+
export { Toggle, toggleVariants };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { ComponentProps, JSX } from "react";
|
|
2
|
+
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
3
|
+
|
|
4
|
+
//#region src/components/tooltip.d.ts
|
|
5
|
+
type TooltipProviderProps = ComponentProps<typeof TooltipPrimitive.Provider>;
|
|
6
|
+
declare function TooltipProvider({
|
|
7
|
+
...props
|
|
8
|
+
}: TooltipProviderProps): JSX.Element;
|
|
9
|
+
type TooltipProps = ComponentProps<typeof TooltipPrimitive.Root>;
|
|
10
|
+
declare function Tooltip({
|
|
11
|
+
...props
|
|
12
|
+
}: TooltipProps): JSX.Element;
|
|
13
|
+
type TooltipTriggerProps = ComponentProps<typeof TooltipPrimitive.Trigger>;
|
|
14
|
+
declare function TooltipTrigger({
|
|
15
|
+
...props
|
|
16
|
+
}: TooltipTriggerProps): JSX.Element;
|
|
17
|
+
type TooltipContentProps = ComponentProps<typeof TooltipPrimitive.Content>;
|
|
18
|
+
declare function TooltipContent({
|
|
19
|
+
children,
|
|
20
|
+
className,
|
|
21
|
+
sideOffset,
|
|
22
|
+
...props
|
|
23
|
+
}: TooltipContentProps): JSX.Element;
|
|
24
|
+
type TooltipArrowProps = ComponentProps<typeof TooltipPrimitive.Arrow>;
|
|
25
|
+
declare function TooltipArrow({
|
|
26
|
+
className,
|
|
27
|
+
...props
|
|
28
|
+
}: TooltipArrowProps): JSX.Element;
|
|
29
|
+
//#endregion
|
|
30
|
+
export { Tooltip, TooltipArrow, type TooltipArrowProps, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps };
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/utils.mjs";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
5
|
+
//#region src/components/tooltip.tsx
|
|
6
|
+
function TooltipProvider({ ...props }) {
|
|
7
|
+
return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, {
|
|
8
|
+
"data-slot": "tooltip-provider",
|
|
9
|
+
...props
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
function Tooltip({ ...props }) {
|
|
13
|
+
return /* @__PURE__ */ jsx(TooltipPrimitive.Root, {
|
|
14
|
+
"data-slot": "tooltip",
|
|
15
|
+
...props
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
function TooltipTrigger({ ...props }) {
|
|
19
|
+
return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, {
|
|
20
|
+
"data-slot": "tooltip-trigger",
|
|
21
|
+
...props
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
function TooltipContent({ children, className, sideOffset = 4, ...props }) {
|
|
25
|
+
return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(TooltipPrimitive.Content, {
|
|
26
|
+
className: cn("z-50", "w-fit max-w-(--radix-tooltip-content-available-width) px-3 py-1.5", "rounded-md", "bg-primary text-xs text-balance text-primary-foreground", "ease-ui data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95", "data-[state=delayed-open]:data-side-top:slide-in-from-bottom-2", "data-[state=delayed-open]:data-side-right:slide-in-from-left-2", "data-[state=delayed-open]:data-side-bottom:slide-in-from-top-2", "data-[state=delayed-open]:data-side-left:slide-in-from-right-2", "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", "data-closed:data-side-top:slide-out-to-bottom-2", "data-closed:data-side-right:slide-out-to-left-2", "data-closed:data-side-bottom:slide-out-to-top-2", "data-closed:data-side-left:slide-out-to-right-2", "origin-(--radix-tooltip-content-transform-origin)", className),
|
|
27
|
+
collisionPadding: 8,
|
|
28
|
+
"data-slot": "tooltip-content",
|
|
29
|
+
sideOffset,
|
|
30
|
+
...props,
|
|
31
|
+
children: [children, /* @__PURE__ */ jsx(TooltipArrow, {})]
|
|
32
|
+
}) });
|
|
33
|
+
}
|
|
34
|
+
function TooltipArrow({ className, ...props }) {
|
|
35
|
+
return /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, {
|
|
36
|
+
className: cn("fill-primary", className),
|
|
37
|
+
"data-slot": "tooltip-arrow",
|
|
38
|
+
...props
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
//#endregion
|
|
42
|
+
export { Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger };
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
//#region src/hooks/use-animated-value.d.ts
|
|
1
2
|
/**
|
|
2
3
|
* Produce a smoothly animated numeric value in response to changes.
|
|
3
4
|
*
|
|
@@ -15,5 +16,6 @@
|
|
|
15
16
|
* return <div>{value}%</div>;
|
|
16
17
|
* ```
|
|
17
18
|
*/
|
|
18
|
-
|
|
19
|
-
//#
|
|
19
|
+
declare function useAnimatedValue(targetValue: null | number, duration: number, animate?: boolean): number;
|
|
20
|
+
//#endregion
|
|
21
|
+
export { useAnimatedValue };
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { useEffect, useRef, useState } from "react";
|
|
3
|
+
//#region src/hooks/use-animated-value.ts
|
|
4
|
+
/**
|
|
5
|
+
* Produce a smoothly animated numeric value in response to changes.
|
|
6
|
+
*
|
|
7
|
+
* Applies a time-based easing (easeOutQuad) between the current and target values
|
|
8
|
+
* over the specified duration. When disabled, the value updates immediately.
|
|
9
|
+
*
|
|
10
|
+
* @param targetValue - Target number to animate toward; null resolves to 0.
|
|
11
|
+
* @param duration - Animation duration in milliseconds.
|
|
12
|
+
* @param animate - When false, bypasses animation and sets the value directly.
|
|
13
|
+
* @returns The current (rounded) animated value.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```tsx
|
|
17
|
+
* const value = useAnimatedValue(75, 1000, true);
|
|
18
|
+
* return <div>{value}%</div>;
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
21
|
+
function useAnimatedValue(targetValue, duration, animate) {
|
|
22
|
+
const actualTargetValue = targetValue ?? 0;
|
|
23
|
+
const [animatedValue, setAnimatedValue] = useState(actualTargetValue);
|
|
24
|
+
const animatedValueRef = useRef(actualTargetValue);
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
animatedValueRef.current = animatedValue;
|
|
27
|
+
}, [animatedValue]);
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
if (!animate) {
|
|
30
|
+
setAnimatedValue(actualTargetValue);
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
const currentValue = animatedValueRef.current;
|
|
34
|
+
const valueRange = actualTargetValue - currentValue;
|
|
35
|
+
const startTime = performance.now();
|
|
36
|
+
if (duration <= 0 || valueRange === 0) {
|
|
37
|
+
setAnimatedValue(actualTargetValue);
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
let animationFrame;
|
|
41
|
+
const animateValue = (currentTime) => {
|
|
42
|
+
const elapsedTime = currentTime - startTime;
|
|
43
|
+
if (elapsedTime >= duration) setAnimatedValue(actualTargetValue);
|
|
44
|
+
else {
|
|
45
|
+
const progress = elapsedTime / duration;
|
|
46
|
+
setAnimatedValue(currentValue + valueRange * (1 - (1 - progress) * (1 - progress)));
|
|
47
|
+
animationFrame = requestAnimationFrame(animateValue);
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
animationFrame = requestAnimationFrame(animateValue);
|
|
51
|
+
return () => {
|
|
52
|
+
cancelAnimationFrame(animationFrame);
|
|
53
|
+
};
|
|
54
|
+
}, [
|
|
55
|
+
actualTargetValue,
|
|
56
|
+
duration,
|
|
57
|
+
animate
|
|
58
|
+
]);
|
|
59
|
+
return Math.round(animatedValue);
|
|
60
|
+
}
|
|
61
|
+
//#endregion
|
|
62
|
+
export { useAnimatedValue };
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
//#region src/hooks/use-copy-to-clipboard.d.ts
|
|
1
2
|
/**
|
|
2
3
|
* Provide clipboard copy capability with a transient copied state.
|
|
3
4
|
*
|
|
@@ -15,11 +16,15 @@
|
|
|
15
16
|
* <button onClick={() => copyToClipboard("Hello")}>{isCopied ? "Copied" : "Copy"}</button>
|
|
16
17
|
* ```
|
|
17
18
|
*/
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
declare function useCopyToClipboard({
|
|
20
|
+
onCopy,
|
|
21
|
+
timeout
|
|
22
|
+
}?: {
|
|
23
|
+
onCopy?: () => void;
|
|
24
|
+
timeout?: number;
|
|
21
25
|
}): {
|
|
22
|
-
|
|
23
|
-
|
|
26
|
+
copyToClipboard: (value: string) => Promise<void>;
|
|
27
|
+
isCopied: boolean;
|
|
24
28
|
};
|
|
25
|
-
//#
|
|
29
|
+
//#endregion
|
|
30
|
+
export { useCopyToClipboard };
|