@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.
Files changed (53) hide show
  1. package/dist/index.cjs +2675 -0
  2. package/dist/index.cjs.map +1 -0
  3. package/dist/index.d.cts +514 -0
  4. package/dist/index.d.ts +514 -0
  5. package/dist/index.js +2418 -0
  6. package/dist/index.js.map +1 -0
  7. package/package.json +153 -0
  8. package/src/components/accordion.tsx +56 -0
  9. package/src/components/alert-dialog.tsx +138 -0
  10. package/src/components/alert.tsx +59 -0
  11. package/src/components/aspect-ratio.tsx +5 -0
  12. package/src/components/avatar.tsx +50 -0
  13. package/src/components/badge.tsx +36 -0
  14. package/src/components/breadcrumb.tsx +115 -0
  15. package/src/components/button.tsx +56 -0
  16. package/src/components/calendar.tsx +216 -0
  17. package/src/components/card.tsx +86 -0
  18. package/src/components/carousel.tsx +259 -0
  19. package/src/components/checkbox.tsx +28 -0
  20. package/src/components/collapsible.tsx +11 -0
  21. package/src/components/command.tsx +150 -0
  22. package/src/components/context-menu.tsx +198 -0
  23. package/src/components/dialog.tsx +122 -0
  24. package/src/components/drawer.tsx +116 -0
  25. package/src/components/dropdown-menu.tsx +200 -0
  26. package/src/components/hover-card.tsx +27 -0
  27. package/src/components/input-otp.tsx +69 -0
  28. package/src/components/input.tsx +22 -0
  29. package/src/components/label.tsx +26 -0
  30. package/src/components/menubar.tsx +254 -0
  31. package/src/components/navigation-menu.tsx +128 -0
  32. package/src/components/pagination.tsx +116 -0
  33. package/src/components/popover.tsx +29 -0
  34. package/src/components/progress.tsx +28 -0
  35. package/src/components/radio-group.tsx +42 -0
  36. package/src/components/resizable.tsx +45 -0
  37. package/src/components/scroll-area.tsx +46 -0
  38. package/src/components/select.tsx +160 -0
  39. package/src/components/separator.tsx +29 -0
  40. package/src/components/sheet.tsx +140 -0
  41. package/src/components/skeleton.tsx +15 -0
  42. package/src/components/slider.tsx +26 -0
  43. package/src/components/sonner.tsx +45 -0
  44. package/src/components/switch.tsx +27 -0
  45. package/src/components/table.tsx +117 -0
  46. package/src/components/tabs.tsx +53 -0
  47. package/src/components/textarea.tsx +22 -0
  48. package/src/components/toggle-group.tsx +60 -0
  49. package/src/components/toggle.tsx +43 -0
  50. package/src/components/tooltip.tsx +30 -0
  51. package/src/globals.css +77 -0
  52. package/src/index.ts +322 -0
  53. 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 };
@@ -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
+ }