shadcn-packaged 0.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +50 -0
- package/hooks/use-mobile.d.ts +1 -0
- package/hooks/use-mobile.jsx +15 -0
- package/hooks/use-toast.d.ts +44 -0
- package/hooks/use-toast.js +128 -0
- package/index.d.ts +51 -0
- package/lib/utils.d.ts +2 -0
- package/lib/utils.js +5 -0
- package/package.json +76 -0
- package/tailwind.config.js +89 -0
- package/ui/accordion.d.ts +7 -0
- package/ui/accordion.jsx +20 -0
- package/ui/alert-dialog.d.ts +20 -0
- package/ui/alert-dialog.jsx +29 -0
- package/ui/alert.d.ts +8 -0
- package/ui/alert.jsx +21 -0
- package/ui/aspect-ratio.d.ts +3 -0
- package/ui/aspect-ratio.jsx +4 -0
- package/ui/avatar.d.ts +6 -0
- package/ui/avatar.jsx +11 -0
- package/ui/badge.d.ts +9 -0
- package/ui/badge.jsx +20 -0
- package/ui/breadcrumb.d.ts +19 -0
- package/ui/breadcrumb.jsx +27 -0
- package/ui/button.d.ts +11 -0
- package/ui/button.jsx +32 -0
- package/ui/calendar.d.ts +8 -0
- package/ui/calendar.jsx +37 -0
- package/ui/card.d.ts +8 -0
- package/ui/card.jsx +15 -0
- package/ui/carousel.d.ts +18 -0
- package/ui/carousel.jsx +110 -0
- package/ui/chart.d.ts +62 -0
- package/ui/chart.jsx +164 -0
- package/ui/checkbox.d.ts +4 -0
- package/ui/checkbox.jsx +12 -0
- package/ui/collapsible.d.ts +5 -0
- package/ui/collapsible.jsx +6 -0
- package/ui/command.d.ts +80 -0
- package/ui/command.jsx +37 -0
- package/ui/context-menu.d.ts +27 -0
- package/ui/context-menu.jsx +52 -0
- package/ui/dialog.d.ts +19 -0
- package/ui/dialog.jsx +31 -0
- package/ui/drawer.d.ts +22 -0
- package/ui/drawer.jsx +28 -0
- package/ui/dropdown-menu.d.ts +27 -0
- package/ui/dropdown-menu.jsx +54 -0
- package/ui/form.d.ts +23 -0
- package/ui/form.jsx +68 -0
- package/ui/hover-card.d.ts +6 -0
- package/ui/hover-card.jsx +9 -0
- package/ui/input-otp.d.ts +34 -0
- package/ui/input-otp.jsx +25 -0
- package/ui/input.d.ts +3 -0
- package/ui/input.jsx +7 -0
- package/ui/label.d.ts +5 -0
- package/ui/label.jsx +9 -0
- package/ui/menubar.d.ts +33 -0
- package/ui/menubar.jsx +54 -0
- package/ui/navigation-menu.d.ts +12 -0
- package/ui/navigation-menu.jsx +33 -0
- package/ui/pagination.d.ts +28 -0
- package/ui/pagination.jsx +31 -0
- package/ui/popover.d.ts +6 -0
- package/ui/popover.jsx +11 -0
- package/ui/progress.d.ts +4 -0
- package/ui/progress.jsx +9 -0
- package/ui/radio-group.d.ts +5 -0
- package/ui/radio-group.jsx +18 -0
- package/ui/resizable.d.ts +23 -0
- package/ui/resizable.jsx +12 -0
- package/ui/scroll-area.d.ts +5 -0
- package/ui/scroll-area.jsx +19 -0
- package/ui/select.d.ts +13 -0
- package/ui/select.jsx +51 -0
- package/ui/separator.d.ts +4 -0
- package/ui/separator.jsx +7 -0
- package/ui/sheet.d.ts +25 -0
- package/ui/sheet.jsx +45 -0
- package/ui/sidebar.d.ts +66 -0
- package/ui/sidebar.jsx +253 -0
- package/ui/skeleton.d.ts +2 -0
- package/ui/skeleton.jsx +5 -0
- package/ui/slider.d.ts +4 -0
- package/ui/slider.jsx +12 -0
- package/ui/sonner.d.ts +4 -0
- package/ui/sonner.jsx +15 -0
- package/ui/switch.d.ts +4 -0
- package/ui/switch.jsx +9 -0
- package/ui/table.d.ts +10 -0
- package/ui/table.jsx +21 -0
- package/ui/tabs.d.ts +7 -0
- package/ui/tabs.jsx +12 -0
- package/ui/textarea.d.ts +3 -0
- package/ui/textarea.jsx +7 -0
- package/ui/toast.d.ts +15 -0
- package/ui/toast.jsx +35 -0
- package/ui/toaster.d.ts +1 -0
- package/ui/toaster.jsx +19 -0
- package/ui/toggle-group.d.ts +12 -0
- package/ui/toggle-group.jsx +26 -0
- package/ui/toggle.d.ts +12 -0
- package/ui/toggle.jsx +25 -0
- package/ui/tooltip.d.ts +7 -0
- package/ui/tooltip.jsx +10 -0
package/ui/sidebar.jsx
ADDED
@@ -0,0 +1,253 @@
|
|
1
|
+
"use client";
|
2
|
+
import * as React from "react";
|
3
|
+
import { Slot } from "@radix-ui/react-slot";
|
4
|
+
import { cva } from "class-variance-authority";
|
5
|
+
import { PanelLeft } from "lucide-react";
|
6
|
+
import { useIsMobile } from "../hooks/use-mobile";
|
7
|
+
import { cn } from "../lib/utils";
|
8
|
+
import { Button } from "../ui/button";
|
9
|
+
import { Input } from "../ui/input";
|
10
|
+
import { Separator } from "../ui/separator";
|
11
|
+
import { Sheet, SheetContent } from "../ui/sheet";
|
12
|
+
import { Skeleton } from "../ui/skeleton";
|
13
|
+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../ui/tooltip";
|
14
|
+
const SIDEBAR_COOKIE_NAME = "sidebar:state";
|
15
|
+
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
16
|
+
const SIDEBAR_WIDTH = "16rem";
|
17
|
+
const SIDEBAR_WIDTH_MOBILE = "18rem";
|
18
|
+
const SIDEBAR_WIDTH_ICON = "3rem";
|
19
|
+
const SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
20
|
+
const SidebarContext = React.createContext(null);
|
21
|
+
function useSidebar() {
|
22
|
+
const context = React.useContext(SidebarContext);
|
23
|
+
if (!context) {
|
24
|
+
throw new Error("useSidebar must be used within a SidebarProvider.");
|
25
|
+
}
|
26
|
+
return context;
|
27
|
+
}
|
28
|
+
const SidebarProvider = React.forwardRef(({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }, ref) => {
|
29
|
+
const isMobile = useIsMobile();
|
30
|
+
const [openMobile, setOpenMobile] = React.useState(false);
|
31
|
+
// This is the internal state of the sidebar.
|
32
|
+
// We use openProp and setOpenProp for control from outside the component.
|
33
|
+
const [_open, _setOpen] = React.useState(defaultOpen);
|
34
|
+
const open = openProp ?? _open;
|
35
|
+
const setOpen = React.useCallback((value) => {
|
36
|
+
const openState = typeof value === "function" ? value(open) : value;
|
37
|
+
if (setOpenProp) {
|
38
|
+
setOpenProp(openState);
|
39
|
+
}
|
40
|
+
else {
|
41
|
+
_setOpen(openState);
|
42
|
+
}
|
43
|
+
// This sets the cookie to keep the sidebar state.
|
44
|
+
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
|
45
|
+
}, [setOpenProp, open]);
|
46
|
+
// Helper to toggle the sidebar.
|
47
|
+
const toggleSidebar = React.useCallback(() => {
|
48
|
+
return isMobile
|
49
|
+
? setOpenMobile((open) => !open)
|
50
|
+
: setOpen((open) => !open);
|
51
|
+
}, [isMobile, setOpen, setOpenMobile]);
|
52
|
+
// Adds a keyboard shortcut to toggle the sidebar.
|
53
|
+
React.useEffect(() => {
|
54
|
+
const handleKeyDown = (event) => {
|
55
|
+
if (event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
|
56
|
+
(event.metaKey || event.ctrlKey)) {
|
57
|
+
event.preventDefault();
|
58
|
+
toggleSidebar();
|
59
|
+
}
|
60
|
+
};
|
61
|
+
window.addEventListener("keydown", handleKeyDown);
|
62
|
+
return () => window.removeEventListener("keydown", handleKeyDown);
|
63
|
+
}, [toggleSidebar]);
|
64
|
+
// We add a state so that we can do data-state="expanded" or "collapsed".
|
65
|
+
// This makes it easier to style the sidebar with Tailwind classes.
|
66
|
+
const state = open ? "expanded" : "collapsed";
|
67
|
+
const contextValue = React.useMemo(() => ({
|
68
|
+
state,
|
69
|
+
open,
|
70
|
+
setOpen,
|
71
|
+
isMobile,
|
72
|
+
openMobile,
|
73
|
+
setOpenMobile,
|
74
|
+
toggleSidebar,
|
75
|
+
}), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]);
|
76
|
+
return (<SidebarContext.Provider value={contextValue}>
|
77
|
+
<TooltipProvider delayDuration={0}>
|
78
|
+
<div style={{
|
79
|
+
"--sidebar-width": SIDEBAR_WIDTH,
|
80
|
+
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
81
|
+
...style,
|
82
|
+
}} className={cn("group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar", className)} ref={ref} {...props}>
|
83
|
+
{children}
|
84
|
+
</div>
|
85
|
+
</TooltipProvider>
|
86
|
+
</SidebarContext.Provider>);
|
87
|
+
});
|
88
|
+
SidebarProvider.displayName = "SidebarProvider";
|
89
|
+
const Sidebar = React.forwardRef(({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }, ref) => {
|
90
|
+
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
91
|
+
if (collapsible === "none") {
|
92
|
+
return (<div className={cn("flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground", className)} ref={ref} {...props}>
|
93
|
+
{children}
|
94
|
+
</div>);
|
95
|
+
}
|
96
|
+
if (isMobile) {
|
97
|
+
return (<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
|
98
|
+
<SheetContent data-sidebar="sidebar" data-mobile="true" className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden" style={{
|
99
|
+
"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
|
100
|
+
}} side={side}>
|
101
|
+
<div className="flex h-full w-full flex-col">{children}</div>
|
102
|
+
</SheetContent>
|
103
|
+
</Sheet>);
|
104
|
+
}
|
105
|
+
return (<div ref={ref} className="group peer hidden md:block text-sidebar-foreground" data-state={state} data-collapsible={state === "collapsed" ? collapsible : ""} data-variant={variant} data-side={side}>
|
106
|
+
{/* This is what handles the sidebar gap on desktop */}
|
107
|
+
<div className={cn("duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset"
|
108
|
+
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
|
109
|
+
: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]")}/>
|
110
|
+
<div className={cn("duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex", side === "left"
|
111
|
+
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
|
112
|
+
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
113
|
+
// Adjust the padding for floating and inset variants.
|
114
|
+
variant === "floating" || variant === "inset"
|
115
|
+
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
|
116
|
+
: "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l", className)} {...props}>
|
117
|
+
<div data-sidebar="sidebar" className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow">
|
118
|
+
{children}
|
119
|
+
</div>
|
120
|
+
</div>
|
121
|
+
</div>);
|
122
|
+
});
|
123
|
+
Sidebar.displayName = "Sidebar";
|
124
|
+
const SidebarTrigger = React.forwardRef(({ className, onClick, ...props }, ref) => {
|
125
|
+
const { toggleSidebar } = useSidebar();
|
126
|
+
return (<Button ref={ref} data-sidebar="trigger" variant="ghost" size="icon" className={cn("h-7 w-7", className)} onClick={(event) => {
|
127
|
+
onClick?.(event);
|
128
|
+
toggleSidebar();
|
129
|
+
}} {...props}>
|
130
|
+
<PanelLeft />
|
131
|
+
<span className="sr-only">Toggle Sidebar</span>
|
132
|
+
</Button>);
|
133
|
+
});
|
134
|
+
SidebarTrigger.displayName = "SidebarTrigger";
|
135
|
+
const SidebarRail = React.forwardRef(({ className, ...props }, ref) => {
|
136
|
+
const { toggleSidebar } = useSidebar();
|
137
|
+
return (<button ref={ref} data-sidebar="rail" aria-label="Toggle Sidebar" tabIndex={-1} onClick={toggleSidebar} title="Toggle Sidebar" className={cn("absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex", "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className)} {...props}/>);
|
138
|
+
});
|
139
|
+
SidebarRail.displayName = "SidebarRail";
|
140
|
+
const SidebarInset = React.forwardRef(({ className, ...props }, ref) => {
|
141
|
+
return (<main ref={ref} className={cn("relative flex min-h-svh flex-1 flex-col bg-background", "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow", className)} {...props}/>);
|
142
|
+
});
|
143
|
+
SidebarInset.displayName = "SidebarInset";
|
144
|
+
const SidebarInput = React.forwardRef(({ className, ...props }, ref) => {
|
145
|
+
return (<Input ref={ref} data-sidebar="input" className={cn("h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring", className)} {...props}/>);
|
146
|
+
});
|
147
|
+
SidebarInput.displayName = "SidebarInput";
|
148
|
+
const SidebarHeader = React.forwardRef(({ className, ...props }, ref) => {
|
149
|
+
return (<div ref={ref} data-sidebar="header" className={cn("flex flex-col gap-2 p-2", className)} {...props}/>);
|
150
|
+
});
|
151
|
+
SidebarHeader.displayName = "SidebarHeader";
|
152
|
+
const SidebarFooter = React.forwardRef(({ className, ...props }, ref) => {
|
153
|
+
return (<div ref={ref} data-sidebar="footer" className={cn("flex flex-col gap-2 p-2", className)} {...props}/>);
|
154
|
+
});
|
155
|
+
SidebarFooter.displayName = "SidebarFooter";
|
156
|
+
const SidebarSeparator = React.forwardRef(({ className, ...props }, ref) => {
|
157
|
+
return (<Separator ref={ref} data-sidebar="separator" className={cn("mx-2 w-auto bg-sidebar-border", className)} {...props}/>);
|
158
|
+
});
|
159
|
+
SidebarSeparator.displayName = "SidebarSeparator";
|
160
|
+
const SidebarContent = React.forwardRef(({ className, ...props }, ref) => {
|
161
|
+
return (<div ref={ref} data-sidebar="content" className={cn("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className)} {...props}/>);
|
162
|
+
});
|
163
|
+
SidebarContent.displayName = "SidebarContent";
|
164
|
+
const SidebarGroup = React.forwardRef(({ className, ...props }, ref) => {
|
165
|
+
return (<div ref={ref} data-sidebar="group" className={cn("relative flex w-full min-w-0 flex-col p-2", className)} {...props}/>);
|
166
|
+
});
|
167
|
+
SidebarGroup.displayName = "SidebarGroup";
|
168
|
+
const SidebarGroupLabel = React.forwardRef(({ className, asChild = false, ...props }, ref) => {
|
169
|
+
const Comp = asChild ? Slot : "div";
|
170
|
+
return (<Comp ref={ref} data-sidebar="group-label" className={cn("duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", className)} {...props}/>);
|
171
|
+
});
|
172
|
+
SidebarGroupLabel.displayName = "SidebarGroupLabel";
|
173
|
+
const SidebarGroupAction = React.forwardRef(({ className, asChild = false, ...props }, ref) => {
|
174
|
+
const Comp = asChild ? Slot : "button";
|
175
|
+
return (<Comp ref={ref} data-sidebar="group-action" className={cn("absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
176
|
+
// Increases the hit area of the button on mobile.
|
177
|
+
"after:absolute after:-inset-2 after:md:hidden", "group-data-[collapsible=icon]:hidden", className)} {...props}/>);
|
178
|
+
});
|
179
|
+
SidebarGroupAction.displayName = "SidebarGroupAction";
|
180
|
+
const SidebarGroupContent = React.forwardRef(({ className, ...props }, ref) => (<div ref={ref} data-sidebar="group-content" className={cn("w-full text-sm", className)} {...props}/>));
|
181
|
+
SidebarGroupContent.displayName = "SidebarGroupContent";
|
182
|
+
const SidebarMenu = React.forwardRef(({ className, ...props }, ref) => (<ul ref={ref} data-sidebar="menu" className={cn("flex w-full min-w-0 flex-col gap-1", className)} {...props}/>));
|
183
|
+
SidebarMenu.displayName = "SidebarMenu";
|
184
|
+
const SidebarMenuItem = React.forwardRef(({ className, ...props }, ref) => (<li ref={ref} data-sidebar="menu-item" className={cn("group/menu-item relative", className)} {...props}/>));
|
185
|
+
SidebarMenuItem.displayName = "SidebarMenuItem";
|
186
|
+
const sidebarMenuButtonVariants = cva("peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", {
|
187
|
+
variants: {
|
188
|
+
variant: {
|
189
|
+
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
190
|
+
outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
|
191
|
+
},
|
192
|
+
size: {
|
193
|
+
default: "h-8 text-sm",
|
194
|
+
sm: "h-7 text-xs",
|
195
|
+
lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
|
196
|
+
},
|
197
|
+
},
|
198
|
+
defaultVariants: {
|
199
|
+
variant: "default",
|
200
|
+
size: "default",
|
201
|
+
},
|
202
|
+
});
|
203
|
+
const SidebarMenuButton = React.forwardRef(({ asChild = false, isActive = false, variant = "default", size = "default", tooltip, className, ...props }, ref) => {
|
204
|
+
const Comp = asChild ? Slot : "button";
|
205
|
+
const { isMobile, state } = useSidebar();
|
206
|
+
const button = (<Comp ref={ref} data-sidebar="menu-button" data-size={size} data-active={isActive} className={cn(sidebarMenuButtonVariants({ variant, size }), className)} {...props}/>);
|
207
|
+
if (!tooltip) {
|
208
|
+
return button;
|
209
|
+
}
|
210
|
+
if (typeof tooltip === "string") {
|
211
|
+
tooltip = {
|
212
|
+
children: tooltip,
|
213
|
+
};
|
214
|
+
}
|
215
|
+
return (<Tooltip>
|
216
|
+
<TooltipTrigger asChild>{button}</TooltipTrigger>
|
217
|
+
<TooltipContent side="right" align="center" hidden={state !== "collapsed" || isMobile} {...tooltip}/>
|
218
|
+
</Tooltip>);
|
219
|
+
});
|
220
|
+
SidebarMenuButton.displayName = "SidebarMenuButton";
|
221
|
+
const SidebarMenuAction = React.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
|
222
|
+
const Comp = asChild ? Slot : "button";
|
223
|
+
return (<Comp ref={ref} data-sidebar="menu-action" className={cn("absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
|
224
|
+
// Increases the hit area of the button on mobile.
|
225
|
+
"after:absolute after:-inset-2 after:md:hidden", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", showOnHover &&
|
226
|
+
"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0", className)} {...props}/>);
|
227
|
+
});
|
228
|
+
SidebarMenuAction.displayName = "SidebarMenuAction";
|
229
|
+
const SidebarMenuBadge = React.forwardRef(({ className, ...props }, ref) => (<div ref={ref} data-sidebar="menu-badge" className={cn("absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none", "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", className)} {...props}/>));
|
230
|
+
SidebarMenuBadge.displayName = "SidebarMenuBadge";
|
231
|
+
const SidebarMenuSkeleton = React.forwardRef(({ className, showIcon = false, ...props }, ref) => {
|
232
|
+
// Random width between 50 to 90%.
|
233
|
+
const width = React.useMemo(() => {
|
234
|
+
return `${Math.floor(Math.random() * 40) + 50}%`;
|
235
|
+
}, []);
|
236
|
+
return (<div ref={ref} data-sidebar="menu-skeleton" className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)} {...props}>
|
237
|
+
{showIcon && (<Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon"/>)}
|
238
|
+
<Skeleton className="h-4 flex-1 max-w-[--skeleton-width]" data-sidebar="menu-skeleton-text" style={{
|
239
|
+
"--skeleton-width": width,
|
240
|
+
}}/>
|
241
|
+
</div>);
|
242
|
+
});
|
243
|
+
SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
|
244
|
+
const SidebarMenuSub = React.forwardRef(({ className, ...props }, ref) => (<ul ref={ref} data-sidebar="menu-sub" className={cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5", "group-data-[collapsible=icon]:hidden", className)} {...props}/>));
|
245
|
+
SidebarMenuSub.displayName = "SidebarMenuSub";
|
246
|
+
const SidebarMenuSubItem = React.forwardRef(({ ...props }, ref) => <li ref={ref} {...props}/>);
|
247
|
+
SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
|
248
|
+
const SidebarMenuSubButton = React.forwardRef(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
|
249
|
+
const Comp = asChild ? Slot : "a";
|
250
|
+
return (<Comp ref={ref} data-sidebar="menu-sub-button" data-size={size} data-active={isActive} className={cn("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground", size === "sm" && "text-xs", size === "md" && "text-sm", "group-data-[collapsible=icon]:hidden", className)} {...props}/>);
|
251
|
+
});
|
252
|
+
SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
|
253
|
+
export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };
|
package/ui/skeleton.d.ts
ADDED
package/ui/skeleton.jsx
ADDED
package/ui/slider.d.ts
ADDED
@@ -0,0 +1,4 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import * as SliderPrimitive from "@radix-ui/react-slider";
|
3
|
+
declare const Slider: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
4
|
+
export { Slider };
|
package/ui/slider.jsx
ADDED
@@ -0,0 +1,12 @@
|
|
1
|
+
"use client";
|
2
|
+
import * as React from "react";
|
3
|
+
import * as SliderPrimitive from "@radix-ui/react-slider";
|
4
|
+
import { cn } from "../lib/utils";
|
5
|
+
const Slider = React.forwardRef(({ className, ...props }, ref) => (<SliderPrimitive.Root ref={ref} className={cn("relative flex w-full touch-none select-none items-center", className)} {...props}>
|
6
|
+
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
|
7
|
+
<SliderPrimitive.Range className="absolute h-full bg-primary"/>
|
8
|
+
</SliderPrimitive.Track>
|
9
|
+
<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"/>
|
10
|
+
</SliderPrimitive.Root>));
|
11
|
+
Slider.displayName = SliderPrimitive.Root.displayName;
|
12
|
+
export { Slider };
|
package/ui/sonner.d.ts
ADDED
package/ui/sonner.jsx
ADDED
@@ -0,0 +1,15 @@
|
|
1
|
+
"use client";
|
2
|
+
import { useTheme } from "next-themes";
|
3
|
+
import { Toaster as Sonner } from "sonner";
|
4
|
+
const Toaster = ({ ...props }) => {
|
5
|
+
const { theme = "system" } = useTheme();
|
6
|
+
return (<Sonner theme={theme} className="toaster group" toastOptions={{
|
7
|
+
classNames: {
|
8
|
+
toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
|
9
|
+
description: "group-[.toast]:text-muted-foreground",
|
10
|
+
actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
|
11
|
+
cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
|
12
|
+
},
|
13
|
+
}} {...props}/>);
|
14
|
+
};
|
15
|
+
export { Toaster };
|
package/ui/switch.d.ts
ADDED
@@ -0,0 +1,4 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import * as SwitchPrimitives from "@radix-ui/react-switch";
|
3
|
+
declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
4
|
+
export { Switch };
|
package/ui/switch.jsx
ADDED
@@ -0,0 +1,9 @@
|
|
1
|
+
"use client";
|
2
|
+
import * as React from "react";
|
3
|
+
import * as SwitchPrimitives from "@radix-ui/react-switch";
|
4
|
+
import { cn } from "../lib/utils";
|
5
|
+
const Switch = React.forwardRef(({ className, ...props }, ref) => (<SwitchPrimitives.Root className={cn("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", className)} {...props} ref={ref}>
|
6
|
+
<SwitchPrimitives.Thumb className={cn("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")}/>
|
7
|
+
</SwitchPrimitives.Root>));
|
8
|
+
Switch.displayName = SwitchPrimitives.Root.displayName;
|
9
|
+
export { Switch };
|
package/ui/table.d.ts
ADDED
@@ -0,0 +1,10 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
|
3
|
+
declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
|
4
|
+
declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
|
5
|
+
declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
|
6
|
+
declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
|
7
|
+
declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
|
8
|
+
declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
|
9
|
+
declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
|
10
|
+
export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };
|
package/ui/table.jsx
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import { cn } from "../lib/utils";
|
3
|
+
const Table = React.forwardRef(({ className, ...props }, ref) => (<div className="relative w-full overflow-auto">
|
4
|
+
<table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props}/>
|
5
|
+
</div>));
|
6
|
+
Table.displayName = "Table";
|
7
|
+
const TableHeader = React.forwardRef(({ className, ...props }, ref) => (<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props}/>));
|
8
|
+
TableHeader.displayName = "TableHeader";
|
9
|
+
const TableBody = React.forwardRef(({ className, ...props }, ref) => (<tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props}/>));
|
10
|
+
TableBody.displayName = "TableBody";
|
11
|
+
const TableFooter = React.forwardRef(({ className, ...props }, ref) => (<tfoot ref={ref} className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)} {...props}/>));
|
12
|
+
TableFooter.displayName = "TableFooter";
|
13
|
+
const TableRow = React.forwardRef(({ className, ...props }, ref) => (<tr ref={ref} className={cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className)} {...props}/>));
|
14
|
+
TableRow.displayName = "TableRow";
|
15
|
+
const TableHead = React.forwardRef(({ className, ...props }, ref) => (<th ref={ref} className={cn("h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", className)} {...props}/>));
|
16
|
+
TableHead.displayName = "TableHead";
|
17
|
+
const TableCell = React.forwardRef(({ className, ...props }, ref) => (<td ref={ref} className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props}/>));
|
18
|
+
TableCell.displayName = "TableCell";
|
19
|
+
const TableCaption = React.forwardRef(({ className, ...props }, ref) => (<caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props}/>));
|
20
|
+
TableCaption.displayName = "TableCaption";
|
21
|
+
export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };
|
package/ui/tabs.d.ts
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
3
|
+
declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
|
4
|
+
declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
5
|
+
declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
6
|
+
declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
7
|
+
export { Tabs, TabsList, TabsTrigger, TabsContent };
|
package/ui/tabs.jsx
ADDED
@@ -0,0 +1,12 @@
|
|
1
|
+
"use client";
|
2
|
+
import * as React from "react";
|
3
|
+
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
4
|
+
import { cn } from "../lib/utils";
|
5
|
+
const Tabs = TabsPrimitive.Root;
|
6
|
+
const TabsList = React.forwardRef(({ className, ...props }, ref) => (<TabsPrimitive.List ref={ref} className={cn("inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground", className)} {...props}/>));
|
7
|
+
TabsList.displayName = TabsPrimitive.List.displayName;
|
8
|
+
const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (<TabsPrimitive.Trigger ref={ref} className={cn("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", className)} {...props}/>));
|
9
|
+
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
|
10
|
+
const TabsContent = React.forwardRef(({ className, ...props }, ref) => (<TabsPrimitive.Content ref={ref} className={cn("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className)} {...props}/>));
|
11
|
+
TabsContent.displayName = TabsPrimitive.Content.displayName;
|
12
|
+
export { Tabs, TabsList, TabsTrigger, TabsContent };
|
package/ui/textarea.d.ts
ADDED
package/ui/textarea.jsx
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import { cn } from "../lib/utils";
|
3
|
+
const Textarea = React.forwardRef(({ className, ...props }, ref) => {
|
4
|
+
return (<textarea className={cn("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", className)} ref={ref} {...props}/>);
|
5
|
+
});
|
6
|
+
Textarea.displayName = "Textarea";
|
7
|
+
export { Textarea };
|
package/ui/toast.d.ts
ADDED
@@ -0,0 +1,15 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import * as ToastPrimitives from "@radix-ui/react-toast";
|
3
|
+
import { type VariantProps } from "class-variance-authority";
|
4
|
+
declare const ToastProvider: React.FC<ToastPrimitives.ToastProviderProps>;
|
5
|
+
declare const ToastViewport: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastViewportProps & React.RefAttributes<HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
|
6
|
+
declare const Toast: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastProps & React.RefAttributes<HTMLLIElement>, "ref"> & VariantProps<(props?: {
|
7
|
+
variant?: "default" | "destructive";
|
8
|
+
} & import("class-variance-authority/dist/types").ClassProp) => string> & React.RefAttributes<HTMLLIElement>>;
|
9
|
+
declare const ToastAction: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
10
|
+
declare const ToastClose: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
11
|
+
declare const ToastTitle: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastTitleProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
12
|
+
declare const ToastDescription: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastDescriptionProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
13
|
+
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
|
14
|
+
type ToastActionElement = React.ReactElement<typeof ToastAction>;
|
15
|
+
export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, };
|
package/ui/toast.jsx
ADDED
@@ -0,0 +1,35 @@
|
|
1
|
+
"use client";
|
2
|
+
import * as React from "react";
|
3
|
+
import * as ToastPrimitives from "@radix-ui/react-toast";
|
4
|
+
import { cva } from "class-variance-authority";
|
5
|
+
import { X } from "lucide-react";
|
6
|
+
import { cn } from "../lib/utils";
|
7
|
+
const ToastProvider = ToastPrimitives.Provider;
|
8
|
+
const ToastViewport = React.forwardRef(({ className, ...props }, ref) => (<ToastPrimitives.Viewport ref={ref} className={cn("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]", className)} {...props}/>));
|
9
|
+
ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
|
10
|
+
const toastVariants = cva("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", {
|
11
|
+
variants: {
|
12
|
+
variant: {
|
13
|
+
default: "border bg-background text-foreground",
|
14
|
+
destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
|
15
|
+
},
|
16
|
+
},
|
17
|
+
defaultVariants: {
|
18
|
+
variant: "default",
|
19
|
+
},
|
20
|
+
});
|
21
|
+
const Toast = React.forwardRef(({ className, variant, ...props }, ref) => {
|
22
|
+
return (<ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props}/>);
|
23
|
+
});
|
24
|
+
Toast.displayName = ToastPrimitives.Root.displayName;
|
25
|
+
const ToastAction = React.forwardRef(({ className, ...props }, ref) => (<ToastPrimitives.Action ref={ref} className={cn("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", className)} {...props}/>));
|
26
|
+
ToastAction.displayName = ToastPrimitives.Action.displayName;
|
27
|
+
const ToastClose = React.forwardRef(({ className, ...props }, ref) => (<ToastPrimitives.Close ref={ref} className={cn("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", className)} toast-close="" {...props}>
|
28
|
+
<X className="h-4 w-4"/>
|
29
|
+
</ToastPrimitives.Close>));
|
30
|
+
ToastClose.displayName = ToastPrimitives.Close.displayName;
|
31
|
+
const ToastTitle = React.forwardRef(({ className, ...props }, ref) => (<ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props}/>));
|
32
|
+
ToastTitle.displayName = ToastPrimitives.Title.displayName;
|
33
|
+
const ToastDescription = React.forwardRef(({ className, ...props }, ref) => (<ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props}/>));
|
34
|
+
ToastDescription.displayName = ToastPrimitives.Description.displayName;
|
35
|
+
export { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, };
|
package/ui/toaster.d.ts
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
export declare function Toaster(): import("react").JSX.Element;
|
package/ui/toaster.jsx
ADDED
@@ -0,0 +1,19 @@
|
|
1
|
+
"use client";
|
2
|
+
import { useToast } from "../hooks/use-toast";
|
3
|
+
import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, } from "../ui/toast";
|
4
|
+
export function Toaster() {
|
5
|
+
const { toasts } = useToast();
|
6
|
+
return (<ToastProvider>
|
7
|
+
{toasts.map(function ({ id, title, description, action, ...props }) {
|
8
|
+
return (<Toast key={id} {...props}>
|
9
|
+
<div className="grid gap-1">
|
10
|
+
{title && <ToastTitle>{title}</ToastTitle>}
|
11
|
+
{description && (<ToastDescription>{description}</ToastDescription>)}
|
12
|
+
</div>
|
13
|
+
{action}
|
14
|
+
<ToastClose />
|
15
|
+
</Toast>);
|
16
|
+
})}
|
17
|
+
<ToastViewport />
|
18
|
+
</ToastProvider>);
|
19
|
+
}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
|
3
|
+
import { type VariantProps } from "class-variance-authority";
|
4
|
+
declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: {
|
5
|
+
variant?: "default" | "outline";
|
6
|
+
size?: "default" | "sm" | "lg";
|
7
|
+
} & import("class-variance-authority/dist/types").ClassProp) => string>) & React.RefAttributes<HTMLDivElement>>;
|
8
|
+
declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: {
|
9
|
+
variant?: "default" | "outline";
|
10
|
+
size?: "default" | "sm" | "lg";
|
11
|
+
} & import("class-variance-authority/dist/types").ClassProp) => string> & React.RefAttributes<HTMLButtonElement>>;
|
12
|
+
export { ToggleGroup, ToggleGroupItem };
|
@@ -0,0 +1,26 @@
|
|
1
|
+
"use client";
|
2
|
+
import * as React from "react";
|
3
|
+
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
|
4
|
+
import { cn } from "../lib/utils";
|
5
|
+
import { toggleVariants } from "../ui/toggle";
|
6
|
+
const ToggleGroupContext = React.createContext({
|
7
|
+
size: "default",
|
8
|
+
variant: "default",
|
9
|
+
});
|
10
|
+
const ToggleGroup = React.forwardRef(({ className, variant, size, children, ...props }, ref) => (<ToggleGroupPrimitive.Root ref={ref} className={cn("flex items-center justify-center gap-1", className)} {...props}>
|
11
|
+
<ToggleGroupContext.Provider value={{ variant, size }}>
|
12
|
+
{children}
|
13
|
+
</ToggleGroupContext.Provider>
|
14
|
+
</ToggleGroupPrimitive.Root>));
|
15
|
+
ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
|
16
|
+
const ToggleGroupItem = React.forwardRef(({ className, children, variant, size, ...props }, ref) => {
|
17
|
+
const context = React.useContext(ToggleGroupContext);
|
18
|
+
return (<ToggleGroupPrimitive.Item ref={ref} className={cn(toggleVariants({
|
19
|
+
variant: context.variant || variant,
|
20
|
+
size: context.size || size,
|
21
|
+
}), className)} {...props}>
|
22
|
+
{children}
|
23
|
+
</ToggleGroupPrimitive.Item>);
|
24
|
+
});
|
25
|
+
ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
|
26
|
+
export { ToggleGroup, ToggleGroupItem };
|
package/ui/toggle.d.ts
ADDED
@@ -0,0 +1,12 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import * as TogglePrimitive from "@radix-ui/react-toggle";
|
3
|
+
import { type VariantProps } from "class-variance-authority";
|
4
|
+
declare const toggleVariants: (props?: {
|
5
|
+
variant?: "default" | "outline";
|
6
|
+
size?: "default" | "sm" | "lg";
|
7
|
+
} & import("class-variance-authority/dist/types").ClassProp) => string;
|
8
|
+
declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: {
|
9
|
+
variant?: "default" | "outline";
|
10
|
+
size?: "default" | "sm" | "lg";
|
11
|
+
} & import("class-variance-authority/dist/types").ClassProp) => string> & React.RefAttributes<HTMLButtonElement>>;
|
12
|
+
export { Toggle, toggleVariants };
|
package/ui/toggle.jsx
ADDED
@@ -0,0 +1,25 @@
|
|
1
|
+
"use client";
|
2
|
+
import * as React from "react";
|
3
|
+
import * as TogglePrimitive from "@radix-ui/react-toggle";
|
4
|
+
import { cva } from "class-variance-authority";
|
5
|
+
import { cn } from "../lib/utils";
|
6
|
+
const toggleVariants = cva("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", {
|
7
|
+
variants: {
|
8
|
+
variant: {
|
9
|
+
default: "bg-transparent",
|
10
|
+
outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
|
11
|
+
},
|
12
|
+
size: {
|
13
|
+
default: "h-10 px-3 min-w-10",
|
14
|
+
sm: "h-9 px-2.5 min-w-9",
|
15
|
+
lg: "h-11 px-5 min-w-11",
|
16
|
+
},
|
17
|
+
},
|
18
|
+
defaultVariants: {
|
19
|
+
variant: "default",
|
20
|
+
size: "default",
|
21
|
+
},
|
22
|
+
});
|
23
|
+
const Toggle = React.forwardRef(({ className, variant, size, ...props }, ref) => (<TogglePrimitive.Root ref={ref} className={cn(toggleVariants({ variant, size, className }))} {...props}/>));
|
24
|
+
Toggle.displayName = TogglePrimitive.Root.displayName;
|
25
|
+
export { Toggle, toggleVariants };
|
package/ui/tooltip.d.ts
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
3
|
+
declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
|
4
|
+
declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
|
5
|
+
declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
6
|
+
declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
7
|
+
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
package/ui/tooltip.jsx
ADDED
@@ -0,0 +1,10 @@
|
|
1
|
+
"use client";
|
2
|
+
import * as React from "react";
|
3
|
+
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
4
|
+
import { cn } from "../lib/utils";
|
5
|
+
const TooltipProvider = TooltipPrimitive.Provider;
|
6
|
+
const Tooltip = TooltipPrimitive.Root;
|
7
|
+
const TooltipTrigger = TooltipPrimitive.Trigger;
|
8
|
+
const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (<TooltipPrimitive.Content ref={ref} sideOffset={sideOffset} className={cn("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", className)} {...props}/>));
|
9
|
+
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
10
|
+
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|