@blips/ui 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +2675 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +514 -0
- package/dist/index.d.ts +514 -0
- package/dist/index.js +2418 -0
- package/dist/index.js.map +1 -0
- package/package.json +153 -0
- package/src/components/accordion.tsx +56 -0
- package/src/components/alert-dialog.tsx +138 -0
- package/src/components/alert.tsx +59 -0
- package/src/components/aspect-ratio.tsx +5 -0
- package/src/components/avatar.tsx +50 -0
- package/src/components/badge.tsx +36 -0
- package/src/components/breadcrumb.tsx +115 -0
- package/src/components/button.tsx +56 -0
- package/src/components/calendar.tsx +216 -0
- package/src/components/card.tsx +86 -0
- package/src/components/carousel.tsx +259 -0
- package/src/components/checkbox.tsx +28 -0
- package/src/components/collapsible.tsx +11 -0
- package/src/components/command.tsx +150 -0
- package/src/components/context-menu.tsx +198 -0
- package/src/components/dialog.tsx +122 -0
- package/src/components/drawer.tsx +116 -0
- package/src/components/dropdown-menu.tsx +200 -0
- package/src/components/hover-card.tsx +27 -0
- package/src/components/input-otp.tsx +69 -0
- package/src/components/input.tsx +22 -0
- package/src/components/label.tsx +26 -0
- package/src/components/menubar.tsx +254 -0
- package/src/components/navigation-menu.tsx +128 -0
- package/src/components/pagination.tsx +116 -0
- package/src/components/popover.tsx +29 -0
- package/src/components/progress.tsx +28 -0
- package/src/components/radio-group.tsx +42 -0
- package/src/components/resizable.tsx +45 -0
- package/src/components/scroll-area.tsx +46 -0
- package/src/components/select.tsx +160 -0
- package/src/components/separator.tsx +29 -0
- package/src/components/sheet.tsx +140 -0
- package/src/components/skeleton.tsx +15 -0
- package/src/components/slider.tsx +26 -0
- package/src/components/sonner.tsx +45 -0
- package/src/components/switch.tsx +27 -0
- package/src/components/table.tsx +117 -0
- package/src/components/tabs.tsx +53 -0
- package/src/components/textarea.tsx +22 -0
- package/src/components/toggle-group.tsx +60 -0
- package/src/components/toggle.tsx +43 -0
- package/src/components/tooltip.tsx +30 -0
- package/src/globals.css +77 -0
- package/src/index.ts +322 -0
- package/src/lib/utils.ts +6 -0
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import * as SheetPrimitive from "@radix-ui/react-dialog";
|
|
4
|
+
import { cva, type VariantProps } from "class-variance-authority";
|
|
5
|
+
import { X } from "lucide-react";
|
|
6
|
+
import * as React from "react";
|
|
7
|
+
|
|
8
|
+
import { cn } from "../lib/utils";
|
|
9
|
+
|
|
10
|
+
const Sheet = SheetPrimitive.Root;
|
|
11
|
+
|
|
12
|
+
const SheetTrigger = SheetPrimitive.Trigger;
|
|
13
|
+
|
|
14
|
+
const SheetClose = SheetPrimitive.Close;
|
|
15
|
+
|
|
16
|
+
const SheetPortal = SheetPrimitive.Portal;
|
|
17
|
+
|
|
18
|
+
const SheetOverlay = React.forwardRef<
|
|
19
|
+
React.ElementRef<typeof SheetPrimitive.Overlay>,
|
|
20
|
+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
|
|
21
|
+
>(({ className, ...props }, ref) => (
|
|
22
|
+
<SheetPrimitive.Overlay
|
|
23
|
+
className={cn(
|
|
24
|
+
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
25
|
+
className
|
|
26
|
+
)}
|
|
27
|
+
{...props}
|
|
28
|
+
ref={ref}
|
|
29
|
+
/>
|
|
30
|
+
));
|
|
31
|
+
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
|
|
32
|
+
|
|
33
|
+
const sheetVariants = cva(
|
|
34
|
+
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
|
35
|
+
{
|
|
36
|
+
variants: {
|
|
37
|
+
side: {
|
|
38
|
+
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
|
39
|
+
bottom:
|
|
40
|
+
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
|
41
|
+
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
|
|
42
|
+
right:
|
|
43
|
+
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
defaultVariants: {
|
|
47
|
+
side: "right",
|
|
48
|
+
},
|
|
49
|
+
}
|
|
50
|
+
);
|
|
51
|
+
|
|
52
|
+
interface SheetContentProps
|
|
53
|
+
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
|
|
54
|
+
VariantProps<typeof sheetVariants> {}
|
|
55
|
+
|
|
56
|
+
const SheetContent = React.forwardRef<
|
|
57
|
+
React.ElementRef<typeof SheetPrimitive.Content>,
|
|
58
|
+
SheetContentProps
|
|
59
|
+
>(({ side = "right", className, children, ...props }, ref) => (
|
|
60
|
+
<SheetPortal>
|
|
61
|
+
<SheetOverlay />
|
|
62
|
+
<SheetPrimitive.Content
|
|
63
|
+
ref={ref}
|
|
64
|
+
className={cn(sheetVariants({ side }), className)}
|
|
65
|
+
{...props}
|
|
66
|
+
>
|
|
67
|
+
{children}
|
|
68
|
+
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
|
|
69
|
+
<X className="h-4 w-4" />
|
|
70
|
+
<span className="sr-only">Close</span>
|
|
71
|
+
</SheetPrimitive.Close>
|
|
72
|
+
</SheetPrimitive.Content>
|
|
73
|
+
</SheetPortal>
|
|
74
|
+
));
|
|
75
|
+
SheetContent.displayName = SheetPrimitive.Content.displayName;
|
|
76
|
+
|
|
77
|
+
const SheetHeader = ({
|
|
78
|
+
className,
|
|
79
|
+
...props
|
|
80
|
+
}: React.HTMLAttributes<HTMLDivElement>) => (
|
|
81
|
+
<div
|
|
82
|
+
className={cn(
|
|
83
|
+
"flex flex-col space-y-2 text-center sm:text-left",
|
|
84
|
+
className
|
|
85
|
+
)}
|
|
86
|
+
{...props}
|
|
87
|
+
/>
|
|
88
|
+
);
|
|
89
|
+
SheetHeader.displayName = "SheetHeader";
|
|
90
|
+
|
|
91
|
+
const SheetFooter = ({
|
|
92
|
+
className,
|
|
93
|
+
...props
|
|
94
|
+
}: React.HTMLAttributes<HTMLDivElement>) => (
|
|
95
|
+
<div
|
|
96
|
+
className={cn(
|
|
97
|
+
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
|
98
|
+
className
|
|
99
|
+
)}
|
|
100
|
+
{...props}
|
|
101
|
+
/>
|
|
102
|
+
);
|
|
103
|
+
SheetFooter.displayName = "SheetFooter";
|
|
104
|
+
|
|
105
|
+
const SheetTitle = React.forwardRef<
|
|
106
|
+
React.ElementRef<typeof SheetPrimitive.Title>,
|
|
107
|
+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
|
|
108
|
+
>(({ className, ...props }, ref) => (
|
|
109
|
+
<SheetPrimitive.Title
|
|
110
|
+
ref={ref}
|
|
111
|
+
className={cn("text-lg font-semibold text-foreground", className)}
|
|
112
|
+
{...props}
|
|
113
|
+
/>
|
|
114
|
+
));
|
|
115
|
+
SheetTitle.displayName = SheetPrimitive.Title.displayName;
|
|
116
|
+
|
|
117
|
+
const SheetDescription = React.forwardRef<
|
|
118
|
+
React.ElementRef<typeof SheetPrimitive.Description>,
|
|
119
|
+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
|
|
120
|
+
>(({ className, ...props }, ref) => (
|
|
121
|
+
<SheetPrimitive.Description
|
|
122
|
+
ref={ref}
|
|
123
|
+
className={cn("text-sm text-muted-foreground", className)}
|
|
124
|
+
{...props}
|
|
125
|
+
/>
|
|
126
|
+
));
|
|
127
|
+
SheetDescription.displayName = SheetPrimitive.Description.displayName;
|
|
128
|
+
|
|
129
|
+
export {
|
|
130
|
+
Sheet,
|
|
131
|
+
SheetPortal,
|
|
132
|
+
SheetOverlay,
|
|
133
|
+
SheetTrigger,
|
|
134
|
+
SheetClose,
|
|
135
|
+
SheetContent,
|
|
136
|
+
SheetHeader,
|
|
137
|
+
SheetFooter,
|
|
138
|
+
SheetTitle,
|
|
139
|
+
SheetDescription,
|
|
140
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { cn } from "../lib/utils";
|
|
2
|
+
|
|
3
|
+
function Skeleton({
|
|
4
|
+
className,
|
|
5
|
+
...props
|
|
6
|
+
}: React.HTMLAttributes<HTMLDivElement>) {
|
|
7
|
+
return (
|
|
8
|
+
<div
|
|
9
|
+
className={cn("animate-pulse rounded-md bg-muted", className)}
|
|
10
|
+
{...props}
|
|
11
|
+
/>
|
|
12
|
+
);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export { Skeleton };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import * as SliderPrimitive from "@radix-ui/react-slider";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
|
|
4
|
+
import { cn } from "../lib/utils";
|
|
5
|
+
|
|
6
|
+
const Slider = React.forwardRef<
|
|
7
|
+
React.ElementRef<typeof SliderPrimitive.Root>,
|
|
8
|
+
React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
|
|
9
|
+
>(({ className, ...props }, ref) => (
|
|
10
|
+
<SliderPrimitive.Root
|
|
11
|
+
ref={ref}
|
|
12
|
+
className={cn(
|
|
13
|
+
"relative flex w-full touch-none select-none items-center",
|
|
14
|
+
className
|
|
15
|
+
)}
|
|
16
|
+
{...props}
|
|
17
|
+
>
|
|
18
|
+
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
|
|
19
|
+
<SliderPrimitive.Range className="absolute h-full bg-primary" />
|
|
20
|
+
</SliderPrimitive.Track>
|
|
21
|
+
<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" />
|
|
22
|
+
</SliderPrimitive.Root>
|
|
23
|
+
));
|
|
24
|
+
Slider.displayName = SliderPrimitive.Root.displayName;
|
|
25
|
+
|
|
26
|
+
export { Slider };
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import {
|
|
4
|
+
CircleCheck,
|
|
5
|
+
Info,
|
|
6
|
+
LoaderCircle,
|
|
7
|
+
OctagonX,
|
|
8
|
+
TriangleAlert,
|
|
9
|
+
} from "lucide-react";
|
|
10
|
+
import { useTheme } from "next-themes";
|
|
11
|
+
import { Toaster as Sonner } from "sonner";
|
|
12
|
+
|
|
13
|
+
type ToasterProps = React.ComponentProps<typeof Sonner>;
|
|
14
|
+
|
|
15
|
+
const Toaster = ({ ...props }: ToasterProps) => {
|
|
16
|
+
const { theme = "system" } = useTheme();
|
|
17
|
+
|
|
18
|
+
return (
|
|
19
|
+
<Sonner
|
|
20
|
+
theme={theme as ToasterProps["theme"]}
|
|
21
|
+
className="toaster group"
|
|
22
|
+
icons={{
|
|
23
|
+
success: <CircleCheck className="h-4 w-4" />,
|
|
24
|
+
info: <Info className="h-4 w-4" />,
|
|
25
|
+
warning: <TriangleAlert className="h-4 w-4" />,
|
|
26
|
+
error: <OctagonX className="h-4 w-4" />,
|
|
27
|
+
loading: <LoaderCircle className="h-4 w-4 animate-spin" />,
|
|
28
|
+
}}
|
|
29
|
+
toastOptions={{
|
|
30
|
+
classNames: {
|
|
31
|
+
toast:
|
|
32
|
+
"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
|
|
33
|
+
description: "group-[.toast]:text-muted-foreground",
|
|
34
|
+
actionButton:
|
|
35
|
+
"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
|
|
36
|
+
cancelButton:
|
|
37
|
+
"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
|
|
38
|
+
},
|
|
39
|
+
}}
|
|
40
|
+
{...props}
|
|
41
|
+
/>
|
|
42
|
+
);
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
export { Toaster };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import * as SwitchPrimitives from "@radix-ui/react-switch";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
|
|
4
|
+
import { cn } from "../lib/utils";
|
|
5
|
+
|
|
6
|
+
const Switch = React.forwardRef<
|
|
7
|
+
React.ElementRef<typeof SwitchPrimitives.Root>,
|
|
8
|
+
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
|
|
9
|
+
>(({ className, ...props }, ref) => (
|
|
10
|
+
<SwitchPrimitives.Root
|
|
11
|
+
className={cn(
|
|
12
|
+
"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",
|
|
13
|
+
className
|
|
14
|
+
)}
|
|
15
|
+
{...props}
|
|
16
|
+
ref={ref}
|
|
17
|
+
>
|
|
18
|
+
<SwitchPrimitives.Thumb
|
|
19
|
+
className={cn(
|
|
20
|
+
"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"
|
|
21
|
+
)}
|
|
22
|
+
/>
|
|
23
|
+
</SwitchPrimitives.Root>
|
|
24
|
+
));
|
|
25
|
+
Switch.displayName = SwitchPrimitives.Root.displayName;
|
|
26
|
+
|
|
27
|
+
export { Switch };
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
|
|
3
|
+
import { cn } from "../lib/utils";
|
|
4
|
+
|
|
5
|
+
const Table = React.forwardRef<
|
|
6
|
+
HTMLTableElement,
|
|
7
|
+
React.HTMLAttributes<HTMLTableElement>
|
|
8
|
+
>(({ className, ...props }, ref) => (
|
|
9
|
+
<div className="relative w-full overflow-auto">
|
|
10
|
+
<table
|
|
11
|
+
ref={ref}
|
|
12
|
+
className={cn("w-full caption-bottom text-sm", className)}
|
|
13
|
+
{...props}
|
|
14
|
+
/>
|
|
15
|
+
</div>
|
|
16
|
+
));
|
|
17
|
+
Table.displayName = "Table";
|
|
18
|
+
|
|
19
|
+
const TableHeader = React.forwardRef<
|
|
20
|
+
HTMLTableSectionElement,
|
|
21
|
+
React.HTMLAttributes<HTMLTableSectionElement>
|
|
22
|
+
>(({ className, ...props }, ref) => (
|
|
23
|
+
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
|
|
24
|
+
));
|
|
25
|
+
TableHeader.displayName = "TableHeader";
|
|
26
|
+
|
|
27
|
+
const TableBody = React.forwardRef<
|
|
28
|
+
HTMLTableSectionElement,
|
|
29
|
+
React.HTMLAttributes<HTMLTableSectionElement>
|
|
30
|
+
>(({ className, ...props }, ref) => (
|
|
31
|
+
<tbody
|
|
32
|
+
ref={ref}
|
|
33
|
+
className={cn("[&_tr:last-child]:border-0", className)}
|
|
34
|
+
{...props}
|
|
35
|
+
/>
|
|
36
|
+
));
|
|
37
|
+
TableBody.displayName = "TableBody";
|
|
38
|
+
|
|
39
|
+
const TableFooter = React.forwardRef<
|
|
40
|
+
HTMLTableSectionElement,
|
|
41
|
+
React.HTMLAttributes<HTMLTableSectionElement>
|
|
42
|
+
>(({ className, ...props }, ref) => (
|
|
43
|
+
<tfoot
|
|
44
|
+
ref={ref}
|
|
45
|
+
className={cn(
|
|
46
|
+
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
|
|
47
|
+
className
|
|
48
|
+
)}
|
|
49
|
+
{...props}
|
|
50
|
+
/>
|
|
51
|
+
));
|
|
52
|
+
TableFooter.displayName = "TableFooter";
|
|
53
|
+
|
|
54
|
+
const TableRow = React.forwardRef<
|
|
55
|
+
HTMLTableRowElement,
|
|
56
|
+
React.HTMLAttributes<HTMLTableRowElement>
|
|
57
|
+
>(({ className, ...props }, ref) => (
|
|
58
|
+
<tr
|
|
59
|
+
ref={ref}
|
|
60
|
+
className={cn(
|
|
61
|
+
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
|
62
|
+
className
|
|
63
|
+
)}
|
|
64
|
+
{...props}
|
|
65
|
+
/>
|
|
66
|
+
));
|
|
67
|
+
TableRow.displayName = "TableRow";
|
|
68
|
+
|
|
69
|
+
const TableHead = React.forwardRef<
|
|
70
|
+
HTMLTableCellElement,
|
|
71
|
+
React.ThHTMLAttributes<HTMLTableCellElement>
|
|
72
|
+
>(({ className, ...props }, ref) => (
|
|
73
|
+
<th
|
|
74
|
+
ref={ref}
|
|
75
|
+
className={cn(
|
|
76
|
+
"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
|
|
77
|
+
className
|
|
78
|
+
)}
|
|
79
|
+
{...props}
|
|
80
|
+
/>
|
|
81
|
+
));
|
|
82
|
+
TableHead.displayName = "TableHead";
|
|
83
|
+
|
|
84
|
+
const TableCell = React.forwardRef<
|
|
85
|
+
HTMLTableCellElement,
|
|
86
|
+
React.TdHTMLAttributes<HTMLTableCellElement>
|
|
87
|
+
>(({ className, ...props }, ref) => (
|
|
88
|
+
<td
|
|
89
|
+
ref={ref}
|
|
90
|
+
className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
|
|
91
|
+
{...props}
|
|
92
|
+
/>
|
|
93
|
+
));
|
|
94
|
+
TableCell.displayName = "TableCell";
|
|
95
|
+
|
|
96
|
+
const TableCaption = React.forwardRef<
|
|
97
|
+
HTMLTableCaptionElement,
|
|
98
|
+
React.HTMLAttributes<HTMLTableCaptionElement>
|
|
99
|
+
>(({ className, ...props }, ref) => (
|
|
100
|
+
<caption
|
|
101
|
+
ref={ref}
|
|
102
|
+
className={cn("mt-4 text-sm text-muted-foreground", className)}
|
|
103
|
+
{...props}
|
|
104
|
+
/>
|
|
105
|
+
));
|
|
106
|
+
TableCaption.displayName = "TableCaption";
|
|
107
|
+
|
|
108
|
+
export {
|
|
109
|
+
Table,
|
|
110
|
+
TableHeader,
|
|
111
|
+
TableBody,
|
|
112
|
+
TableFooter,
|
|
113
|
+
TableHead,
|
|
114
|
+
TableRow,
|
|
115
|
+
TableCell,
|
|
116
|
+
TableCaption,
|
|
117
|
+
};
|
|
@@ -0,0 +1,53 @@
|
|
|
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 };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
|
|
3
|
+
import { cn } from "../lib/utils";
|
|
4
|
+
|
|
5
|
+
const Textarea = React.forwardRef<
|
|
6
|
+
HTMLTextAreaElement,
|
|
7
|
+
React.ComponentProps<"textarea">
|
|
8
|
+
>(({ className, ...props }, ref) => {
|
|
9
|
+
return (
|
|
10
|
+
<textarea
|
|
11
|
+
className={cn(
|
|
12
|
+
"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",
|
|
13
|
+
className
|
|
14
|
+
)}
|
|
15
|
+
ref={ref}
|
|
16
|
+
{...props}
|
|
17
|
+
/>
|
|
18
|
+
);
|
|
19
|
+
});
|
|
20
|
+
Textarea.displayName = "Textarea";
|
|
21
|
+
|
|
22
|
+
export { Textarea };
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
|
|
4
|
+
import type { VariantProps } from "class-variance-authority";
|
|
5
|
+
import * as React from "react";
|
|
6
|
+
import { toggleVariants } from "./toggle";
|
|
7
|
+
import { cn } from "../lib/utils";
|
|
8
|
+
|
|
9
|
+
const ToggleGroupContext = React.createContext<
|
|
10
|
+
VariantProps<typeof toggleVariants>
|
|
11
|
+
>({
|
|
12
|
+
size: "default",
|
|
13
|
+
variant: "default",
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
const ToggleGroup = React.forwardRef<
|
|
17
|
+
React.ElementRef<typeof ToggleGroupPrimitive.Root>,
|
|
18
|
+
React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
|
|
19
|
+
VariantProps<typeof toggleVariants>
|
|
20
|
+
>(({ className, variant, size, children, ...props }, ref) => (
|
|
21
|
+
<ToggleGroupPrimitive.Root
|
|
22
|
+
ref={ref}
|
|
23
|
+
className={cn("flex items-center justify-center gap-1", className)}
|
|
24
|
+
{...props}
|
|
25
|
+
>
|
|
26
|
+
<ToggleGroupContext.Provider value={{ variant, size }}>
|
|
27
|
+
{children}
|
|
28
|
+
</ToggleGroupContext.Provider>
|
|
29
|
+
</ToggleGroupPrimitive.Root>
|
|
30
|
+
));
|
|
31
|
+
|
|
32
|
+
ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
|
|
33
|
+
|
|
34
|
+
const ToggleGroupItem = React.forwardRef<
|
|
35
|
+
React.ElementRef<typeof ToggleGroupPrimitive.Item>,
|
|
36
|
+
React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
|
|
37
|
+
VariantProps<typeof toggleVariants>
|
|
38
|
+
>(({ className, children, variant, size, ...props }, ref) => {
|
|
39
|
+
const context = React.useContext(ToggleGroupContext);
|
|
40
|
+
|
|
41
|
+
return (
|
|
42
|
+
<ToggleGroupPrimitive.Item
|
|
43
|
+
ref={ref}
|
|
44
|
+
className={cn(
|
|
45
|
+
toggleVariants({
|
|
46
|
+
variant: context.variant || variant,
|
|
47
|
+
size: context.size || size,
|
|
48
|
+
}),
|
|
49
|
+
className
|
|
50
|
+
)}
|
|
51
|
+
{...props}
|
|
52
|
+
>
|
|
53
|
+
{children}
|
|
54
|
+
</ToggleGroupPrimitive.Item>
|
|
55
|
+
);
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
|
|
59
|
+
|
|
60
|
+
export { ToggleGroup, ToggleGroupItem };
|
|
@@ -0,0 +1,43 @@
|
|
|
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:
|
|
14
|
+
"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
|
|
15
|
+
},
|
|
16
|
+
size: {
|
|
17
|
+
default: "h-10 px-3 min-w-10",
|
|
18
|
+
sm: "h-9 px-2.5 min-w-9",
|
|
19
|
+
lg: "h-11 px-5 min-w-11",
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
defaultVariants: {
|
|
23
|
+
variant: "default",
|
|
24
|
+
size: "default",
|
|
25
|
+
},
|
|
26
|
+
}
|
|
27
|
+
);
|
|
28
|
+
|
|
29
|
+
const Toggle = React.forwardRef<
|
|
30
|
+
React.ElementRef<typeof TogglePrimitive.Root>,
|
|
31
|
+
React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
|
|
32
|
+
VariantProps<typeof toggleVariants>
|
|
33
|
+
>(({ className, variant, size, ...props }, ref) => (
|
|
34
|
+
<TogglePrimitive.Root
|
|
35
|
+
ref={ref}
|
|
36
|
+
className={cn(toggleVariants({ variant, size, className }))}
|
|
37
|
+
{...props}
|
|
38
|
+
/>
|
|
39
|
+
));
|
|
40
|
+
|
|
41
|
+
Toggle.displayName = TogglePrimitive.Root.displayName;
|
|
42
|
+
|
|
43
|
+
export { Toggle, toggleVariants };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
|
|
6
|
+
import { cn } from "../lib/utils";
|
|
7
|
+
|
|
8
|
+
const TooltipProvider = TooltipPrimitive.Provider;
|
|
9
|
+
|
|
10
|
+
const Tooltip = TooltipPrimitive.Root;
|
|
11
|
+
|
|
12
|
+
const TooltipTrigger = TooltipPrimitive.Trigger;
|
|
13
|
+
|
|
14
|
+
const TooltipContent = React.forwardRef<
|
|
15
|
+
React.ElementRef<typeof TooltipPrimitive.Content>,
|
|
16
|
+
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
|
|
17
|
+
>(({ className, sideOffset = 4, ...props }, ref) => (
|
|
18
|
+
<TooltipPrimitive.Content
|
|
19
|
+
ref={ref}
|
|
20
|
+
sideOffset={sideOffset}
|
|
21
|
+
className={cn(
|
|
22
|
+
"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]",
|
|
23
|
+
className
|
|
24
|
+
)}
|
|
25
|
+
{...props}
|
|
26
|
+
/>
|
|
27
|
+
));
|
|
28
|
+
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
|
29
|
+
|
|
30
|
+
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
package/src/globals.css
ADDED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
|
|
3
|
+
@theme {
|
|
4
|
+
--color-background: hsl(0 0% 100%);
|
|
5
|
+
--color-foreground: hsl(240 10% 3.9%);
|
|
6
|
+
|
|
7
|
+
--color-card: hsl(0 0% 100%);
|
|
8
|
+
--color-card-foreground: hsl(240 10% 3.9%);
|
|
9
|
+
|
|
10
|
+
--color-popover: hsl(0 0% 100%);
|
|
11
|
+
--color-popover-foreground: hsl(240 10% 3.9%);
|
|
12
|
+
|
|
13
|
+
--color-primary: hsl(240 5.9% 10%);
|
|
14
|
+
--color-primary-foreground: hsl(0 0% 98%);
|
|
15
|
+
|
|
16
|
+
--color-secondary: hsl(240 4.8% 95.9%);
|
|
17
|
+
--color-secondary-foreground: hsl(240 5.9% 10%);
|
|
18
|
+
|
|
19
|
+
--color-muted: hsl(240 4.8% 95.9%);
|
|
20
|
+
--color-muted-foreground: hsl(240 3.8% 46.1%);
|
|
21
|
+
|
|
22
|
+
--color-accent: hsl(240 4.8% 95.9%);
|
|
23
|
+
--color-accent-foreground: hsl(240 5.9% 10%);
|
|
24
|
+
|
|
25
|
+
--color-destructive: hsl(0 84.2% 60.2%);
|
|
26
|
+
--color-destructive-foreground: hsl(0 0% 98%);
|
|
27
|
+
|
|
28
|
+
--color-border: hsl(240 5.9% 90%);
|
|
29
|
+
--color-input: hsl(240 5.9% 90%);
|
|
30
|
+
--color-ring: hsl(240 5.9% 10%);
|
|
31
|
+
|
|
32
|
+
--radius-sm: 0.25rem;
|
|
33
|
+
--radius-md: 0.375rem;
|
|
34
|
+
--radius-lg: 0.5rem;
|
|
35
|
+
--radius-xl: 0.75rem;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
@media (prefers-color-scheme: dark) {
|
|
39
|
+
@theme {
|
|
40
|
+
--color-background: hsl(240 10% 3.9%);
|
|
41
|
+
--color-foreground: hsl(0 0% 98%);
|
|
42
|
+
|
|
43
|
+
--color-card: hsl(240 10% 3.9%);
|
|
44
|
+
--color-card-foreground: hsl(0 0% 98%);
|
|
45
|
+
|
|
46
|
+
--color-popover: hsl(240 10% 3.9%);
|
|
47
|
+
--color-popover-foreground: hsl(0 0% 98%);
|
|
48
|
+
|
|
49
|
+
--color-primary: hsl(0 0% 98%);
|
|
50
|
+
--color-primary-foreground: hsl(240 5.9% 10%);
|
|
51
|
+
|
|
52
|
+
--color-secondary: hsl(240 3.7% 15.9%);
|
|
53
|
+
--color-secondary-foreground: hsl(0 0% 98%);
|
|
54
|
+
|
|
55
|
+
--color-muted: hsl(240 3.7% 15.9%);
|
|
56
|
+
--color-muted-foreground: hsl(240 5% 64.9%);
|
|
57
|
+
|
|
58
|
+
--color-accent: hsl(240 3.7% 15.9%);
|
|
59
|
+
--color-accent-foreground: hsl(0 0% 98%);
|
|
60
|
+
|
|
61
|
+
--color-destructive: hsl(0 62.8% 30.6%);
|
|
62
|
+
--color-destructive-foreground: hsl(0 0% 98%);
|
|
63
|
+
|
|
64
|
+
--color-border: hsl(240 3.7% 15.9%);
|
|
65
|
+
--color-input: hsl(240 3.7% 15.9%);
|
|
66
|
+
--color-ring: hsl(240 4.9% 83.9%);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
* {
|
|
71
|
+
border-color: var(--color-border);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
body {
|
|
75
|
+
background-color: var(--color-background);
|
|
76
|
+
color: var(--color-foreground);
|
|
77
|
+
}
|