@sonamu-kit/react-components 0.1.0 → 0.1.2
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/components/index.d.ts +65 -0
- package/dist/components/ui/accordion.d.ts +7 -0
- package/dist/components/ui/alert-dialog.d.ts +20 -0
- package/dist/components/ui/alert.d.ts +8 -0
- package/dist/components/ui/aspect-ratio.d.ts +3 -0
- package/dist/components/ui/async-select.d.ts +36 -0
- package/dist/components/ui/avatar.d.ts +6 -0
- package/dist/components/ui/badge.d.ts +9 -0
- package/dist/components/ui/breadcrumb.d.ts +19 -0
- package/dist/components/ui/button.d.ts +13 -0
- package/dist/components/ui/calendar.d.ts +5 -0
- package/dist/components/ui/card.d.ts +9 -0
- package/dist/components/ui/carousel.d.ts +18 -0
- package/dist/components/ui/checkbox.d.ts +8 -0
- package/dist/components/ui/collapsible.d.ts +5 -0
- package/dist/components/ui/combobox.d.ts +20 -0
- package/dist/components/ui/command.d.ts +80 -0
- package/dist/components/ui/common-modal.d.ts +28 -0
- package/dist/components/ui/context-menu.d.ts +27 -0
- package/dist/components/ui/date-input.d.ts +7 -0
- package/dist/components/ui/date-picker.d.ts +26 -0
- package/dist/components/ui/date-selector-multiple.d.ts +38 -0
- package/dist/components/ui/dialog.d.ts +19 -0
- package/dist/components/ui/drawer.d.ts +22 -0
- package/dist/components/ui/dropdown-menu.d.ts +27 -0
- package/dist/components/ui/form.d.ts +23 -0
- package/dist/components/ui/hover-card.d.ts +6 -0
- package/dist/components/ui/image-uploader.d.ts +14 -0
- package/dist/components/ui/input-otp.d.ts +34 -0
- package/dist/components/ui/input.d.ts +7 -0
- package/dist/components/ui/label.d.ts +5 -0
- package/dist/components/ui/menubar.d.ts +28 -0
- package/dist/components/ui/month-picker-multiple.d.ts +41 -0
- package/dist/components/ui/multi-image-uploader.d.ts +15 -0
- package/dist/components/ui/multi-select.d.ts +229 -0
- package/dist/components/ui/navigation-menu.d.ts +12 -0
- package/dist/components/ui/pagination.d.ts +10 -0
- package/dist/components/ui/popover.d.ts +7 -0
- package/dist/components/ui/progress.d.ts +4 -0
- package/dist/components/ui/radio-group.d.ts +5 -0
- package/dist/components/ui/resizable.d.ts +23 -0
- package/dist/components/ui/scroll-area.d.ts +5 -0
- package/dist/components/ui/select.d.ts +20 -0
- package/dist/components/ui/separator.d.ts +4 -0
- package/dist/components/ui/sheet.d.ts +25 -0
- package/dist/components/ui/sidebar.d.ts +69 -0
- package/dist/components/ui/skeleton.d.ts +2 -0
- package/dist/components/ui/slider.d.ts +8 -0
- package/dist/components/ui/sonner.d.ts +4 -0
- package/dist/components/ui/switch.d.ts +8 -0
- package/dist/components/ui/table.d.ts +24 -0
- package/dist/components/ui/tabs.d.ts +7 -0
- package/dist/components/ui/textarea.d.ts +7 -0
- package/dist/components/ui/toast.d.ts +15 -0
- package/dist/components/ui/toaster.d.ts +1 -0
- package/dist/components/ui/toggle-group.d.ts +12 -0
- package/dist/components/ui/toggle.d.ts +12 -0
- package/dist/components/ui/tooltip.d.ts +7 -0
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/use-toast.d.ts +44 -0
- package/dist/index.d.ts +3 -0
- package/dist/lib/caster.d.ts +3 -0
- package/dist/lib/helpers.d.ts +72 -0
- package/dist/lib/index.d.ts +6 -0
- package/{src/lib/lazy-upload.ts → dist/lib/lazy-upload.d.ts} +1 -12
- package/dist/lib/use-mobile.d.ts +1 -0
- package/dist/lib/utils.d.ts +2 -0
- package/dist/react-components.es.js +28375 -0
- package/package.json +105 -76
- package/COMPONENTS_LIST.md +0 -106
- package/COMPONENTS_STATUS.md +0 -114
- package/HELPERS_GUIDE.md +0 -489
- package/MIGRATION_PLAN.md +0 -404
- package/SETUP_GUIDE.md +0 -125
- package/components.json +0 -21
- package/postcss.config.js +0 -6
- package/src/components/index.ts +0 -315
- package/src/components/ui/accordion.tsx +0 -54
- package/src/components/ui/alert-dialog.tsx +0 -115
- package/src/components/ui/alert.tsx +0 -49
- package/src/components/ui/aspect-ratio.tsx +0 -5
- package/src/components/ui/async-select.tsx +0 -186
- package/src/components/ui/avatar.tsx +0 -45
- package/src/components/ui/badge.tsx +0 -38
- package/src/components/ui/breadcrumb.tsx +0 -102
- package/src/components/ui/button.tsx +0 -54
- package/src/components/ui/calendar.tsx +0 -193
- package/src/components/ui/card.tsx +0 -65
- package/src/components/ui/carousel.tsx +0 -243
- package/src/components/ui/checkbox.tsx +0 -67
- package/src/components/ui/collapsible.tsx +0 -9
- package/src/components/ui/combobox.tsx +0 -135
- package/src/components/ui/command.tsx +0 -143
- package/src/components/ui/common-modal.tsx +0 -95
- package/src/components/ui/context-menu.tsx +0 -189
- package/src/components/ui/date-picker.tsx +0 -112
- package/src/components/ui/date-selector-multiple.tsx +0 -197
- package/src/components/ui/dialog.tsx +0 -104
- package/src/components/ui/drawer.tsx +0 -100
- package/src/components/ui/dropdown-menu.tsx +0 -189
- package/src/components/ui/form.tsx +0 -171
- package/src/components/ui/hover-card.tsx +0 -27
- package/src/components/ui/image-uploader.tsx +0 -251
- package/src/components/ui/input-otp.tsx +0 -69
- package/src/components/ui/input.tsx +0 -38
- package/src/components/ui/label.tsx +0 -19
- package/src/components/ui/menubar.tsx +0 -231
- package/src/components/ui/month-picker-multiple.tsx +0 -351
- package/src/components/ui/multi-image-uploader.tsx +0 -283
- package/src/components/ui/multi-select.tsx +0 -1143
- package/src/components/ui/navigation-menu.tsx +0 -120
- package/src/components/ui/pagination.tsx +0 -72
- package/src/components/ui/popover.tsx +0 -42
- package/src/components/ui/progress.tsx +0 -25
- package/src/components/ui/radio-group.tsx +0 -38
- package/src/components/ui/resizable.tsx +0 -42
- package/src/components/ui/scroll-area.tsx +0 -46
- package/src/components/ui/select.tsx +0 -235
- package/src/components/ui/separator.tsx +0 -24
- package/src/components/ui/sheet.tsx +0 -119
- package/src/components/ui/sidebar.tsx +0 -683
- package/src/components/ui/skeleton.tsx +0 -7
- package/src/components/ui/slider.tsx +0 -57
- package/src/components/ui/sonner.tsx +0 -39
- package/src/components/ui/switch.tsx +0 -63
- package/src/components/ui/table.tsx +0 -94
- package/src/components/ui/tabs.tsx +0 -53
- package/src/components/ui/textarea.tsx +0 -34
- package/src/components/ui/toast.tsx +0 -122
- package/src/components/ui/toaster.tsx +0 -29
- package/src/components/ui/toggle-group.tsx +0 -55
- package/src/components/ui/toggle.tsx +0 -41
- package/src/components/ui/tooltip.tsx +0 -28
- package/src/hooks/index.ts +0 -2
- package/src/hooks/use-toast.ts +0 -189
- package/src/icons.d.ts +0 -1
- package/src/index.ts +0 -4
- package/src/lib/caster.ts +0 -66
- package/src/lib/helpers.ts +0 -394
- package/src/lib/index.ts +0 -31
- package/src/lib/use-mobile.ts +0 -19
- package/src/lib/utils.ts +0 -6
- package/src/styles/globals.css +0 -658
- package/tailwind.config.ts +0 -8
- package/tsconfig.json +0 -31
- package/tsconfig.node.json +0 -11
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import * as SliderPrimitive from "@radix-ui/react-slider";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
import type { Override } from "../../lib/helpers";
|
|
4
|
-
import { cn } from "../../lib/utils";
|
|
5
|
-
|
|
6
|
-
type SliderProps = Override<
|
|
7
|
-
React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,
|
|
8
|
-
{
|
|
9
|
-
name?: string;
|
|
10
|
-
onValueChange?: (value: number) => void;
|
|
11
|
-
onBlur?: React.FocusEventHandler<HTMLInputElement>;
|
|
12
|
-
}
|
|
13
|
-
>;
|
|
14
|
-
|
|
15
|
-
const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
|
|
16
|
-
({ className, name, value, defaultValue, onValueChange, onBlur, ...props }, ref) => {
|
|
17
|
-
const inputRef = React.useRef<HTMLInputElement>(null);
|
|
18
|
-
|
|
19
|
-
// biome-ignore lint/style/noNonNullAssertion: useImperativeHandle은 ref가 할당된 후 실행되므로 안전함
|
|
20
|
-
React.useImperativeHandle(ref, () => inputRef.current!);
|
|
21
|
-
|
|
22
|
-
const handleValueChange = (values: number[]) => {
|
|
23
|
-
onValueChange?.(values[0]);
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
return (
|
|
27
|
-
<>
|
|
28
|
-
<input
|
|
29
|
-
type="range"
|
|
30
|
-
ref={inputRef}
|
|
31
|
-
name={name}
|
|
32
|
-
defaultValue={defaultValue?.[0]}
|
|
33
|
-
onBlur={onBlur}
|
|
34
|
-
className="sr-only"
|
|
35
|
-
tabIndex={-1}
|
|
36
|
-
aria-hidden="true"
|
|
37
|
-
/>
|
|
38
|
-
<SliderPrimitive.Root
|
|
39
|
-
value={value}
|
|
40
|
-
defaultValue={defaultValue}
|
|
41
|
-
onValueChange={handleValueChange}
|
|
42
|
-
className={cn("relative flex w-full touch-none select-none items-center", className)}
|
|
43
|
-
{...props}
|
|
44
|
-
>
|
|
45
|
-
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
|
|
46
|
-
<SliderPrimitive.Range className="absolute h-full bg-primary" />
|
|
47
|
-
</SliderPrimitive.Track>
|
|
48
|
-
<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
|
|
49
|
-
</SliderPrimitive.Root>
|
|
50
|
-
</>
|
|
51
|
-
);
|
|
52
|
-
},
|
|
53
|
-
);
|
|
54
|
-
|
|
55
|
-
Slider.displayName = "Slider";
|
|
56
|
-
|
|
57
|
-
export { Slider };
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { useTheme } from "next-themes";
|
|
2
|
-
import { Toaster as Sonner } from "sonner";
|
|
3
|
-
import CircleCheckIcon from "~icons/lucide/circle-check";
|
|
4
|
-
import InfoIcon from "~icons/lucide/info";
|
|
5
|
-
import LoaderCircleIcon from "~icons/lucide/loader-circle";
|
|
6
|
-
import OctagonXIcon from "~icons/lucide/octagon-x";
|
|
7
|
-
import TriangleAlertIcon from "~icons/lucide/triangle-alert";
|
|
8
|
-
|
|
9
|
-
type ToasterProps = React.ComponentProps<typeof Sonner>;
|
|
10
|
-
|
|
11
|
-
const Toaster = ({ ...props }: ToasterProps) => {
|
|
12
|
-
const { theme = "system" } = useTheme();
|
|
13
|
-
|
|
14
|
-
return (
|
|
15
|
-
<Sonner
|
|
16
|
-
theme={theme as ToasterProps["theme"]}
|
|
17
|
-
className="toaster group"
|
|
18
|
-
icons={{
|
|
19
|
-
success: <CircleCheckIcon className="h-4 w-4" />,
|
|
20
|
-
info: <InfoIcon className="h-4 w-4" />,
|
|
21
|
-
warning: <TriangleAlertIcon className="h-4 w-4" />,
|
|
22
|
-
error: <OctagonXIcon className="h-4 w-4" />,
|
|
23
|
-
loading: <LoaderCircleIcon className="h-4 w-4 animate-spin" />,
|
|
24
|
-
}}
|
|
25
|
-
toastOptions={{
|
|
26
|
-
classNames: {
|
|
27
|
-
toast:
|
|
28
|
-
"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
|
|
29
|
-
description: "group-[.toast]:text-muted-foreground",
|
|
30
|
-
actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
|
|
31
|
-
cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
|
|
32
|
-
},
|
|
33
|
-
}}
|
|
34
|
-
{...props}
|
|
35
|
-
/>
|
|
36
|
-
);
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
export { Toaster };
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import * as SwitchPrimitives from "@radix-ui/react-switch";
|
|
4
|
-
import * as React from "react";
|
|
5
|
-
import type { Override } from "../../lib/helpers";
|
|
6
|
-
import { cn } from "../../lib/utils";
|
|
7
|
-
|
|
8
|
-
type SwitchProps = Override<
|
|
9
|
-
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>,
|
|
10
|
-
{
|
|
11
|
-
name?: string;
|
|
12
|
-
onValueChange?: (checked: boolean) => void;
|
|
13
|
-
onBlur?: React.FocusEventHandler<HTMLInputElement>;
|
|
14
|
-
}
|
|
15
|
-
>;
|
|
16
|
-
|
|
17
|
-
const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
|
|
18
|
-
({ className, name, checked, defaultChecked, onValueChange, onBlur, ...props }, ref) => {
|
|
19
|
-
const inputRef = React.useRef<HTMLInputElement>(null);
|
|
20
|
-
|
|
21
|
-
// biome-ignore lint/style/noNonNullAssertion: useImperativeHandle은 ref가 할당된 후 실행되므로 안전함
|
|
22
|
-
React.useImperativeHandle(ref, () => inputRef.current!);
|
|
23
|
-
|
|
24
|
-
const handleCheckedChange = (newChecked: boolean) => {
|
|
25
|
-
onValueChange?.(newChecked);
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
return (
|
|
29
|
-
<>
|
|
30
|
-
<input
|
|
31
|
-
type="checkbox"
|
|
32
|
-
ref={inputRef}
|
|
33
|
-
name={name}
|
|
34
|
-
defaultChecked={defaultChecked}
|
|
35
|
-
onBlur={onBlur}
|
|
36
|
-
className="sr-only"
|
|
37
|
-
tabIndex={-1}
|
|
38
|
-
aria-hidden="true"
|
|
39
|
-
/>
|
|
40
|
-
<SwitchPrimitives.Root
|
|
41
|
-
checked={checked}
|
|
42
|
-
defaultChecked={defaultChecked}
|
|
43
|
-
onCheckedChange={handleCheckedChange}
|
|
44
|
-
className={cn(
|
|
45
|
-
"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
|
|
46
|
-
className,
|
|
47
|
-
)}
|
|
48
|
-
{...props}
|
|
49
|
-
>
|
|
50
|
-
<SwitchPrimitives.Thumb
|
|
51
|
-
className={cn(
|
|
52
|
-
"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
|
|
53
|
-
)}
|
|
54
|
-
/>
|
|
55
|
-
</SwitchPrimitives.Root>
|
|
56
|
-
</>
|
|
57
|
-
);
|
|
58
|
-
},
|
|
59
|
-
);
|
|
60
|
-
|
|
61
|
-
Switch.displayName = "Switch";
|
|
62
|
-
|
|
63
|
-
export { Switch };
|
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import type * as React from "react";
|
|
4
|
-
|
|
5
|
-
import { cn } from "../../lib/utils";
|
|
6
|
-
|
|
7
|
-
function Table({ className, ...props }: React.ComponentProps<"table">) {
|
|
8
|
-
return (
|
|
9
|
-
<div data-slot="table-container" className="relative w-full overflow-x-auto">
|
|
10
|
-
<table
|
|
11
|
-
data-slot="table"
|
|
12
|
-
className={cn("w-full caption-bottom text-sm", className)}
|
|
13
|
-
{...props}
|
|
14
|
-
/>
|
|
15
|
-
</div>
|
|
16
|
-
);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
|
|
20
|
-
return <thead data-slot="table-header" className={cn("[&_tr]:border-b", className)} {...props} />;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
|
|
24
|
-
return (
|
|
25
|
-
<tbody
|
|
26
|
-
data-slot="table-body"
|
|
27
|
-
className={cn("[&_tr:last-child]:border-0", className)}
|
|
28
|
-
{...props}
|
|
29
|
-
/>
|
|
30
|
-
);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
|
|
34
|
-
return (
|
|
35
|
-
<tfoot
|
|
36
|
-
data-slot="table-footer"
|
|
37
|
-
className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
|
|
38
|
-
{...props}
|
|
39
|
-
/>
|
|
40
|
-
);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
|
|
44
|
-
return (
|
|
45
|
-
<tr
|
|
46
|
-
data-slot="table-row"
|
|
47
|
-
className={cn(
|
|
48
|
-
"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
|
|
49
|
-
className,
|
|
50
|
-
)}
|
|
51
|
-
{...props}
|
|
52
|
-
/>
|
|
53
|
-
);
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
function TableHead({ className, ...props }: React.ComponentProps<"th">) {
|
|
57
|
-
return (
|
|
58
|
-
<th
|
|
59
|
-
data-slot="table-head"
|
|
60
|
-
className={cn(
|
|
61
|
-
"text-foreground h-10 px-2 text-left font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]",
|
|
62
|
-
className,
|
|
63
|
-
)}
|
|
64
|
-
style={{ verticalAlign: "middle" }}
|
|
65
|
-
{...props}
|
|
66
|
-
/>
|
|
67
|
-
);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
function TableCell({ className, ...props }: React.ComponentProps<"td">) {
|
|
71
|
-
return (
|
|
72
|
-
<td
|
|
73
|
-
data-slot="table-cell"
|
|
74
|
-
className={cn(
|
|
75
|
-
"p-2 whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]",
|
|
76
|
-
className,
|
|
77
|
-
)}
|
|
78
|
-
style={{ verticalAlign: "middle" }}
|
|
79
|
-
{...props}
|
|
80
|
-
/>
|
|
81
|
-
);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
|
|
85
|
-
return (
|
|
86
|
-
<caption
|
|
87
|
-
data-slot="table-caption"
|
|
88
|
-
className={cn("text-muted-foreground mt-4 text-sm", className)}
|
|
89
|
-
{...props}
|
|
90
|
-
/>
|
|
91
|
-
);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
|
|
4
|
-
import { cn } from "../../lib/utils";
|
|
5
|
-
|
|
6
|
-
const Tabs = TabsPrimitive.Root;
|
|
7
|
-
|
|
8
|
-
const TabsList = React.forwardRef<
|
|
9
|
-
React.ElementRef<typeof TabsPrimitive.List>,
|
|
10
|
-
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
|
|
11
|
-
>(({ className, ...props }, ref) => (
|
|
12
|
-
<TabsPrimitive.List
|
|
13
|
-
ref={ref}
|
|
14
|
-
className={cn(
|
|
15
|
-
"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
|
|
16
|
-
className,
|
|
17
|
-
)}
|
|
18
|
-
{...props}
|
|
19
|
-
/>
|
|
20
|
-
));
|
|
21
|
-
TabsList.displayName = TabsPrimitive.List.displayName;
|
|
22
|
-
|
|
23
|
-
const TabsTrigger = React.forwardRef<
|
|
24
|
-
React.ElementRef<typeof TabsPrimitive.Trigger>,
|
|
25
|
-
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
|
|
26
|
-
>(({ className, ...props }, ref) => (
|
|
27
|
-
<TabsPrimitive.Trigger
|
|
28
|
-
ref={ref}
|
|
29
|
-
className={cn(
|
|
30
|
-
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
|
|
31
|
-
className,
|
|
32
|
-
)}
|
|
33
|
-
{...props}
|
|
34
|
-
/>
|
|
35
|
-
));
|
|
36
|
-
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
|
|
37
|
-
|
|
38
|
-
const TabsContent = React.forwardRef<
|
|
39
|
-
React.ElementRef<typeof TabsPrimitive.Content>,
|
|
40
|
-
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
|
|
41
|
-
>(({ className, ...props }, ref) => (
|
|
42
|
-
<TabsPrimitive.Content
|
|
43
|
-
ref={ref}
|
|
44
|
-
className={cn(
|
|
45
|
-
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
46
|
-
className,
|
|
47
|
-
)}
|
|
48
|
-
{...props}
|
|
49
|
-
/>
|
|
50
|
-
));
|
|
51
|
-
TabsContent.displayName = TabsPrimitive.Content.displayName;
|
|
52
|
-
|
|
53
|
-
export { Tabs, TabsList, TabsTrigger, TabsContent };
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import type { Override } from "../../lib/helpers";
|
|
3
|
-
import { cn } from "../../lib/utils";
|
|
4
|
-
|
|
5
|
-
export type TextareaProps = Override<
|
|
6
|
-
React.ComponentProps<"textarea">,
|
|
7
|
-
{
|
|
8
|
-
onValueChange?: (value: string) => void;
|
|
9
|
-
}
|
|
10
|
-
>;
|
|
11
|
-
|
|
12
|
-
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
|
13
|
-
({ className, onValueChange, onChange, ...props }, ref) => {
|
|
14
|
-
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
|
15
|
-
onValueChange?.(e.target.value);
|
|
16
|
-
onChange?.(e);
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
return (
|
|
20
|
-
<textarea
|
|
21
|
-
className={cn(
|
|
22
|
-
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
|
23
|
-
className,
|
|
24
|
-
)}
|
|
25
|
-
ref={ref}
|
|
26
|
-
{...props}
|
|
27
|
-
onChange={handleChange}
|
|
28
|
-
/>
|
|
29
|
-
);
|
|
30
|
-
},
|
|
31
|
-
);
|
|
32
|
-
Textarea.displayName = "Textarea";
|
|
33
|
-
|
|
34
|
-
export { Textarea };
|
|
@@ -1,122 +0,0 @@
|
|
|
1
|
-
import * as ToastPrimitives from "@radix-ui/react-toast";
|
|
2
|
-
import { cva, type VariantProps } from "class-variance-authority";
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
import XIcon from "~icons/lucide/x";
|
|
5
|
-
|
|
6
|
-
import { cn } from "../../lib/utils";
|
|
7
|
-
|
|
8
|
-
const ToastProvider = ToastPrimitives.Provider;
|
|
9
|
-
|
|
10
|
-
const ToastViewport = React.forwardRef<
|
|
11
|
-
React.ElementRef<typeof ToastPrimitives.Viewport>,
|
|
12
|
-
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
|
|
13
|
-
>(({ className, ...props }, ref) => (
|
|
14
|
-
<ToastPrimitives.Viewport
|
|
15
|
-
ref={ref}
|
|
16
|
-
className={cn(
|
|
17
|
-
"fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
|
|
18
|
-
className,
|
|
19
|
-
)}
|
|
20
|
-
{...props}
|
|
21
|
-
/>
|
|
22
|
-
));
|
|
23
|
-
ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
|
|
24
|
-
|
|
25
|
-
const toastVariants = cva(
|
|
26
|
-
"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
|
|
27
|
-
{
|
|
28
|
-
variants: {
|
|
29
|
-
variant: {
|
|
30
|
-
default: "border bg-background text-foreground",
|
|
31
|
-
destructive:
|
|
32
|
-
"destructive group border-destructive bg-destructive text-destructive-foreground",
|
|
33
|
-
},
|
|
34
|
-
},
|
|
35
|
-
defaultVariants: {
|
|
36
|
-
variant: "default",
|
|
37
|
-
},
|
|
38
|
-
},
|
|
39
|
-
);
|
|
40
|
-
|
|
41
|
-
const Toast = React.forwardRef<
|
|
42
|
-
React.ElementRef<typeof ToastPrimitives.Root>,
|
|
43
|
-
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
|
|
44
|
-
>(({ className, variant, ...props }, ref) => {
|
|
45
|
-
return (
|
|
46
|
-
<ToastPrimitives.Root
|
|
47
|
-
ref={ref}
|
|
48
|
-
className={cn(toastVariants({ variant }), className)}
|
|
49
|
-
{...props}
|
|
50
|
-
/>
|
|
51
|
-
);
|
|
52
|
-
});
|
|
53
|
-
Toast.displayName = ToastPrimitives.Root.displayName;
|
|
54
|
-
|
|
55
|
-
const ToastAction = React.forwardRef<
|
|
56
|
-
React.ElementRef<typeof ToastPrimitives.Action>,
|
|
57
|
-
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
|
|
58
|
-
>(({ className, ...props }, ref) => (
|
|
59
|
-
<ToastPrimitives.Action
|
|
60
|
-
ref={ref}
|
|
61
|
-
className={cn(
|
|
62
|
-
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
|
|
63
|
-
className,
|
|
64
|
-
)}
|
|
65
|
-
{...props}
|
|
66
|
-
/>
|
|
67
|
-
));
|
|
68
|
-
ToastAction.displayName = ToastPrimitives.Action.displayName;
|
|
69
|
-
|
|
70
|
-
const ToastClose = React.forwardRef<
|
|
71
|
-
React.ElementRef<typeof ToastPrimitives.Close>,
|
|
72
|
-
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
|
|
73
|
-
>(({ className, ...props }, ref) => (
|
|
74
|
-
<ToastPrimitives.Close
|
|
75
|
-
ref={ref}
|
|
76
|
-
className={cn(
|
|
77
|
-
"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
|
|
78
|
-
className,
|
|
79
|
-
)}
|
|
80
|
-
toast-close=""
|
|
81
|
-
{...props}
|
|
82
|
-
>
|
|
83
|
-
<XIcon className="h-4 w-4" />
|
|
84
|
-
</ToastPrimitives.Close>
|
|
85
|
-
));
|
|
86
|
-
ToastClose.displayName = ToastPrimitives.Close.displayName;
|
|
87
|
-
|
|
88
|
-
const ToastTitle = React.forwardRef<
|
|
89
|
-
React.ElementRef<typeof ToastPrimitives.Title>,
|
|
90
|
-
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
|
|
91
|
-
>(({ className, ...props }, ref) => (
|
|
92
|
-
<ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
|
|
93
|
-
));
|
|
94
|
-
ToastTitle.displayName = ToastPrimitives.Title.displayName;
|
|
95
|
-
|
|
96
|
-
const ToastDescription = React.forwardRef<
|
|
97
|
-
React.ElementRef<typeof ToastPrimitives.Description>,
|
|
98
|
-
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
|
|
99
|
-
>(({ className, ...props }, ref) => (
|
|
100
|
-
<ToastPrimitives.Description
|
|
101
|
-
ref={ref}
|
|
102
|
-
className={cn("text-sm opacity-90", className)}
|
|
103
|
-
{...props}
|
|
104
|
-
/>
|
|
105
|
-
));
|
|
106
|
-
ToastDescription.displayName = ToastPrimitives.Description.displayName;
|
|
107
|
-
|
|
108
|
-
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
|
|
109
|
-
|
|
110
|
-
type ToastActionElement = React.ReactElement<typeof ToastAction>;
|
|
111
|
-
|
|
112
|
-
export {
|
|
113
|
-
type ToastProps,
|
|
114
|
-
type ToastActionElement,
|
|
115
|
-
ToastProvider,
|
|
116
|
-
ToastViewport,
|
|
117
|
-
Toast,
|
|
118
|
-
ToastTitle,
|
|
119
|
-
ToastDescription,
|
|
120
|
-
ToastClose,
|
|
121
|
-
ToastAction,
|
|
122
|
-
};
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { useToast } from "../../hooks/use-toast";
|
|
2
|
-
import {
|
|
3
|
-
Toast,
|
|
4
|
-
ToastClose,
|
|
5
|
-
ToastDescription,
|
|
6
|
-
ToastProvider,
|
|
7
|
-
ToastTitle,
|
|
8
|
-
ToastViewport,
|
|
9
|
-
} from "./toast";
|
|
10
|
-
|
|
11
|
-
export function Toaster() {
|
|
12
|
-
const { toasts } = useToast();
|
|
13
|
-
|
|
14
|
-
return (
|
|
15
|
-
<ToastProvider>
|
|
16
|
-
{toasts.map(({ id, title, description, action, ...props }) => (
|
|
17
|
-
<Toast key={id} {...props}>
|
|
18
|
-
<div className="grid gap-1">
|
|
19
|
-
{title && <ToastTitle>{title}</ToastTitle>}
|
|
20
|
-
{description && <ToastDescription>{description}</ToastDescription>}
|
|
21
|
-
</div>
|
|
22
|
-
{action}
|
|
23
|
-
<ToastClose />
|
|
24
|
-
</Toast>
|
|
25
|
-
))}
|
|
26
|
-
<ToastViewport />
|
|
27
|
-
</ToastProvider>
|
|
28
|
-
);
|
|
29
|
-
}
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
|
|
2
|
-
import type { VariantProps } from "class-variance-authority";
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
|
|
5
|
-
import { cn } from "../../lib/utils";
|
|
6
|
-
import { toggleVariants } from "./toggle";
|
|
7
|
-
|
|
8
|
-
const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
|
|
9
|
-
size: "default",
|
|
10
|
-
variant: "default",
|
|
11
|
-
});
|
|
12
|
-
|
|
13
|
-
const ToggleGroup = React.forwardRef<
|
|
14
|
-
React.ElementRef<typeof ToggleGroupPrimitive.Root>,
|
|
15
|
-
React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
|
|
16
|
-
VariantProps<typeof toggleVariants>
|
|
17
|
-
>(({ className, variant, size, children, ...props }, ref) => (
|
|
18
|
-
<ToggleGroupPrimitive.Root
|
|
19
|
-
ref={ref}
|
|
20
|
-
className={cn("flex items-center justify-center gap-1", className)}
|
|
21
|
-
{...props}
|
|
22
|
-
>
|
|
23
|
-
<ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
|
|
24
|
-
</ToggleGroupPrimitive.Root>
|
|
25
|
-
));
|
|
26
|
-
|
|
27
|
-
ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
|
|
28
|
-
|
|
29
|
-
const ToggleGroupItem = React.forwardRef<
|
|
30
|
-
React.ElementRef<typeof ToggleGroupPrimitive.Item>,
|
|
31
|
-
React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
|
|
32
|
-
VariantProps<typeof toggleVariants>
|
|
33
|
-
>(({ className, children, variant, size, ...props }, ref) => {
|
|
34
|
-
const context = React.useContext(ToggleGroupContext);
|
|
35
|
-
|
|
36
|
-
return (
|
|
37
|
-
<ToggleGroupPrimitive.Item
|
|
38
|
-
ref={ref}
|
|
39
|
-
className={cn(
|
|
40
|
-
toggleVariants({
|
|
41
|
-
variant: context.variant || variant,
|
|
42
|
-
size: context.size || size,
|
|
43
|
-
}),
|
|
44
|
-
className,
|
|
45
|
-
)}
|
|
46
|
-
{...props}
|
|
47
|
-
>
|
|
48
|
-
{children}
|
|
49
|
-
</ToggleGroupPrimitive.Item>
|
|
50
|
-
);
|
|
51
|
-
});
|
|
52
|
-
|
|
53
|
-
ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
|
|
54
|
-
|
|
55
|
-
export { ToggleGroup, ToggleGroupItem };
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import * as TogglePrimitive from "@radix-ui/react-toggle";
|
|
2
|
-
import { cva, type VariantProps } from "class-variance-authority";
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
|
|
5
|
-
import { cn } from "../../lib/utils";
|
|
6
|
-
|
|
7
|
-
const toggleVariants = cva(
|
|
8
|
-
"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
|
|
9
|
-
{
|
|
10
|
-
variants: {
|
|
11
|
-
variant: {
|
|
12
|
-
default: "bg-transparent",
|
|
13
|
-
outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
|
|
14
|
-
},
|
|
15
|
-
size: {
|
|
16
|
-
default: "h-10 px-3 min-w-10",
|
|
17
|
-
sm: "h-9 px-2.5 min-w-9",
|
|
18
|
-
lg: "h-11 px-5 min-w-11",
|
|
19
|
-
},
|
|
20
|
-
},
|
|
21
|
-
defaultVariants: {
|
|
22
|
-
variant: "default",
|
|
23
|
-
size: "default",
|
|
24
|
-
},
|
|
25
|
-
},
|
|
26
|
-
);
|
|
27
|
-
|
|
28
|
-
const Toggle = React.forwardRef<
|
|
29
|
-
React.ElementRef<typeof TogglePrimitive.Root>,
|
|
30
|
-
React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
|
|
31
|
-
>(({ className, variant, size, ...props }, ref) => (
|
|
32
|
-
<TogglePrimitive.Root
|
|
33
|
-
ref={ref}
|
|
34
|
-
className={cn(toggleVariants({ variant, size, className }))}
|
|
35
|
-
{...props}
|
|
36
|
-
/>
|
|
37
|
-
));
|
|
38
|
-
|
|
39
|
-
Toggle.displayName = TogglePrimitive.Root.displayName;
|
|
40
|
-
|
|
41
|
-
export { Toggle, toggleVariants };
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
|
|
4
|
-
import { cn } from "../../lib/utils";
|
|
5
|
-
|
|
6
|
-
const TooltipProvider = TooltipPrimitive.Provider;
|
|
7
|
-
|
|
8
|
-
const Tooltip = TooltipPrimitive.Root;
|
|
9
|
-
|
|
10
|
-
const TooltipTrigger = TooltipPrimitive.Trigger;
|
|
11
|
-
|
|
12
|
-
const TooltipContent = React.forwardRef<
|
|
13
|
-
React.ElementRef<typeof TooltipPrimitive.Content>,
|
|
14
|
-
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
|
|
15
|
-
>(({ className, sideOffset = 4, ...props }, ref) => (
|
|
16
|
-
<TooltipPrimitive.Content
|
|
17
|
-
ref={ref}
|
|
18
|
-
sideOffset={sideOffset}
|
|
19
|
-
className={cn(
|
|
20
|
-
"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
|
|
21
|
-
className,
|
|
22
|
-
)}
|
|
23
|
-
{...props}
|
|
24
|
-
/>
|
|
25
|
-
));
|
|
26
|
-
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
|
27
|
-
|
|
28
|
-
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
package/src/hooks/index.ts
DELETED