@authdog/react-elements 0.0.10 → 0.0.12

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 (41) hide show
  1. package/.turbo/turbo-build.log +33 -25
  2. package/CHANGELOG.md +18 -0
  3. package/dist/components/ui/avatar.js +3 -0
  4. package/dist/components/ui/avatar.js.map +1 -0
  5. package/dist/components/ui/avatar.mjs +3 -0
  6. package/dist/components/ui/avatar.mjs.map +1 -0
  7. package/dist/components/ui/button.js +1 -0
  8. package/dist/components/ui/button.js.map +1 -1
  9. package/dist/components/ui/button.mjs +1 -0
  10. package/dist/components/ui/button.mjs.map +1 -1
  11. package/dist/components/ui/dropdown-menu.js +3 -0
  12. package/dist/components/ui/dropdown-menu.js.map +1 -0
  13. package/dist/components/ui/dropdown-menu.mjs +3 -0
  14. package/dist/components/ui/dropdown-menu.mjs.map +1 -0
  15. package/dist/components/ui/sheet.js +3 -0
  16. package/dist/components/ui/sheet.js.map +1 -0
  17. package/dist/components/ui/sheet.mjs +3 -0
  18. package/dist/components/ui/sheet.mjs.map +1 -0
  19. package/dist/index.d.mts +35 -4
  20. package/dist/index.d.ts +35 -4
  21. package/dist/index.js +2 -1
  22. package/dist/index.js.map +1 -1
  23. package/dist/index.mjs +2 -1
  24. package/dist/index.mjs.map +1 -1
  25. package/dist/lib/utils.js +1 -0
  26. package/dist/lib/utils.js.map +1 -1
  27. package/dist/lib/utils.mjs +1 -0
  28. package/dist/lib/utils.mjs.map +1 -1
  29. package/dist/styles.css +499 -0
  30. package/package.json +25 -7
  31. package/src/components/core/navbar.tsx +154 -0
  32. package/src/components/ui/avatar.tsx +53 -0
  33. package/src/components/ui/button.tsx +1 -1
  34. package/src/components/ui/dropdown-menu.tsx +262 -0
  35. package/src/components/ui/sheet.tsx +142 -0
  36. package/src/index.ts +1 -0
  37. package/tsup.config.ts +16 -5
  38. package/dist/components/ui/button.d.mts +0 -14
  39. package/dist/components/ui/button.d.ts +0 -14
  40. package/dist/lib/utils.d.mts +0 -5
  41. package/dist/lib/utils.d.ts +0 -5
@@ -0,0 +1,154 @@
1
+ "use client"
2
+
3
+ import type React from "react"
4
+
5
+ import { useState } from "react"
6
+ import * as LucideIcons from "lucide-react"
7
+
8
+ import { cn } from "../../lib/utils"
9
+ import { Avatar, AvatarFallback, AvatarImage } from "../../components/ui/avatar"
10
+ import { Button } from "../../components/ui/button"
11
+ import {
12
+ DropdownMenu,
13
+ DropdownMenuContent,
14
+ DropdownMenuGroup,
15
+ DropdownMenuItem,
16
+ DropdownMenuLabel,
17
+ DropdownMenuSeparator,
18
+ DropdownMenuTrigger,
19
+ } from "../../components/ui/dropdown-menu"
20
+ import { Sheet, SheetContent, SheetTrigger } from "../../components/ui/sheet"
21
+
22
+ interface NavItem {
23
+ title: string
24
+ href: string
25
+ disabled?: boolean
26
+ }
27
+
28
+ interface NavbarProps {
29
+ items?: NavItem[]
30
+ children?: React.ReactNode
31
+ className?: string
32
+ logoText?: string
33
+ user?: {
34
+ name?: string
35
+ email?: string
36
+ image?: string
37
+ }
38
+ onLogout?: () => void
39
+ }
40
+
41
+ export function Navbar({
42
+ items = [
43
+ { title: "Dashboard", href: "/dashboard" },
44
+ { title: "Projects", href: "/projects" },
45
+ { title: "Team", href: "/team" },
46
+ { title: "Reports", href: "/reports" },
47
+ ],
48
+ children,
49
+ className,
50
+ logoText = "Company",
51
+ user = {
52
+ name: "John Doe",
53
+ email: "john@example.com",
54
+ image: "/placeholder.svg?height=32&width=32",
55
+ },
56
+ onLogout = () => console.log("Logout clicked"),
57
+ }: NavbarProps) {
58
+ const [open, setOpen] = useState(false)
59
+ const UserIcon = LucideIcons.User as any
60
+ const SettingsIcon = LucideIcons.Settings as any
61
+ const LogOutIcon = LucideIcons.LogOut as any
62
+ const MenuIcon = LucideIcons.Menu as any
63
+
64
+ return (
65
+ <header className={cn("border-b bg-background", className)}>
66
+ <div className="container flex h-16 items-center justify-between px-4 md:px-6">
67
+ <div className="flex items-center gap-4">
68
+ {/* <Link href="/" className="flex items-center gap-2">
69
+ <span className="text-xl font-bold">{logoText}</span>
70
+ </Link> */}
71
+ <nav className="hidden md:flex gap-6">
72
+ {items?.map((item, index) => (
73
+ // <Link
74
+ // key={index}
75
+ // href={item.href}
76
+ // className={cn(
77
+ // "text-sm font-medium transition-colors hover:text-primary",
78
+ // item.disabled && "cursor-not-allowed opacity-80",
79
+ // )}
80
+ // >
81
+ // {item.title}
82
+ // </Link>
83
+ <a href={item?.href}>
84
+ {item.title}
85
+ </a>
86
+ ))}
87
+ </nav>
88
+ </div>
89
+ <div className="flex items-center gap-4">
90
+ {children}
91
+ <DropdownMenu>
92
+ <DropdownMenuTrigger asChild>
93
+ <Button variant="ghost" className="relative h-8 w-8 rounded-full">
94
+ <Avatar className="h-8 w-8">
95
+ <AvatarImage src={user.image || "/placeholder.svg"} alt={user.name} />
96
+ <AvatarFallback>{user.name?.charAt(0)}</AvatarFallback>
97
+ </Avatar>
98
+ </Button>
99
+ </DropdownMenuTrigger>
100
+ <DropdownMenuContent className="w-56" align="end" forceMount>
101
+ <DropdownMenuLabel className="font-normal">
102
+ <div className="flex flex-col space-y-1">
103
+ <p className="text-sm font-medium leading-none">{user.name}</p>
104
+ <p className="text-xs leading-none text-muted-foreground">{user.email}</p>
105
+ </div>
106
+ </DropdownMenuLabel>
107
+ <DropdownMenuSeparator />
108
+ <DropdownMenuGroup>
109
+ <DropdownMenuItem>
110
+ <UserIcon className="mr-2 h-4 w-4" />
111
+ <span>Profile</span>
112
+ </DropdownMenuItem>
113
+ <DropdownMenuItem>
114
+ <SettingsIcon className="mr-2 h-4 w-4" />
115
+ <span>Settings</span>
116
+ </DropdownMenuItem>
117
+ </DropdownMenuGroup>
118
+ <DropdownMenuSeparator />
119
+ <DropdownMenuItem onClick={onLogout}>
120
+ <LogOutIcon className="mr-2 h-4 w-4" />
121
+ <span>Log out</span>
122
+ </DropdownMenuItem>
123
+ </DropdownMenuContent>
124
+ </DropdownMenu>
125
+ <Sheet open={open} onOpenChange={setOpen}>
126
+ <SheetTrigger asChild>
127
+ <Button variant="ghost" size="icon" className="md:hidden" aria-label="Open Menu">
128
+ <MenuIcon className="h-5 w-5" />
129
+ </Button>
130
+ </SheetTrigger>
131
+ <SheetContent side="left" className="pr-0">
132
+ <nav className="grid gap-2 py-6">
133
+ {items?.map((item, index) => (
134
+ // <Link
135
+ // key={index}
136
+ // href={item.href}
137
+ // className={cn(
138
+ // "flex w-full items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-accent",
139
+ // item.disabled && "cursor-not-allowed opacity-80",
140
+ // )}
141
+ // onClick={() => setOpen(false)}
142
+ // >
143
+ // {item.title}
144
+ // </Link>
145
+ <a href="https://www.goo.bar" />
146
+ ))}
147
+ </nav>
148
+ </SheetContent>
149
+ </Sheet>
150
+ </div>
151
+ </div>
152
+ </header>
153
+ )
154
+ }
@@ -0,0 +1,53 @@
1
+ "use client"
2
+
3
+ import * as React from "react"
4
+ import * as AvatarPrimitive from "@radix-ui/react-avatar"
5
+
6
+ import { cn } from "@authdog/react-elements/lib/utils"
7
+
8
+ function Avatar({
9
+ className,
10
+ ...props
11
+ }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
12
+ return (
13
+ <AvatarPrimitive.Root
14
+ data-slot="avatar"
15
+ className={cn(
16
+ "relative flex size-8 shrink-0 overflow-hidden rounded-full",
17
+ className
18
+ )}
19
+ {...props}
20
+ />
21
+ )
22
+ }
23
+
24
+ function AvatarImage({
25
+ className,
26
+ ...props
27
+ }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
28
+ return (
29
+ <AvatarPrimitive.Image
30
+ data-slot="avatar-image"
31
+ className={cn("aspect-square size-full", className)}
32
+ {...props}
33
+ />
34
+ )
35
+ }
36
+
37
+ function AvatarFallback({
38
+ className,
39
+ ...props
40
+ }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
41
+ return (
42
+ <AvatarPrimitive.Fallback
43
+ data-slot="avatar-fallback"
44
+ className={cn(
45
+ "bg-muted flex size-full items-center justify-center rounded-full",
46
+ className
47
+ )}
48
+ {...props}
49
+ />
50
+ )
51
+ }
52
+
53
+ export { Avatar, AvatarImage, AvatarFallback }
@@ -2,7 +2,7 @@ import * as React from "react";
2
2
  import { Slot } from "@radix-ui/react-slot";
3
3
  import { cva, type VariantProps } from "class-variance-authority";
4
4
 
5
- import { cn } from "@authdog/react-elements/lib/utils";
5
+ import { cn } from "../../lib/utils";
6
6
 
7
7
  const buttonVariants = cva(
8
8
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium 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",
@@ -0,0 +1,262 @@
1
+ "use client"
2
+
3
+ import * as React from "react"
4
+ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
5
+ import { Check, ChevronRight, Circle } from "lucide-react"
6
+ import type { ComponentType } from "react"
7
+
8
+ import { cn } from "@authdog/react-elements/lib/utils"
9
+
10
+ const CheckIcon = Check as ComponentType<React.SVGProps<SVGSVGElement>>
11
+ const CircleIcon = Circle as ComponentType<React.SVGProps<SVGSVGElement>>
12
+ const ChevronRightIcon = ChevronRight as ComponentType<React.SVGProps<SVGSVGElement>>
13
+
14
+ function DropdownMenu({
15
+ ...props
16
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
17
+ return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
18
+ }
19
+
20
+ function DropdownMenuPortal({
21
+ ...props
22
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
23
+ return (
24
+ <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
25
+ )
26
+ }
27
+
28
+ function DropdownMenuTrigger({
29
+ ...props
30
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
31
+ return (
32
+ <DropdownMenuPrimitive.Trigger
33
+ data-slot="dropdown-menu-trigger"
34
+ {...props}
35
+ />
36
+ )
37
+ }
38
+
39
+ function DropdownMenuContent({
40
+ className,
41
+ sideOffset = 4,
42
+ ...props
43
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
44
+ return (
45
+ <DropdownMenuPrimitive.Portal>
46
+ <DropdownMenuPrimitive.Content
47
+ data-slot="dropdown-menu-content"
48
+ sideOffset={sideOffset}
49
+ className={cn(
50
+ "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
51
+ className
52
+ )}
53
+ {...props}
54
+ />
55
+ </DropdownMenuPrimitive.Portal>
56
+ )
57
+ }
58
+
59
+ function DropdownMenuGroup({
60
+ ...props
61
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
62
+ return (
63
+ <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
64
+ )
65
+ }
66
+
67
+ function DropdownMenuItem({
68
+ className,
69
+ inset,
70
+ variant = "default",
71
+ ...props
72
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
73
+ inset?: boolean
74
+ variant?: "default" | "destructive"
75
+ }) {
76
+ return (
77
+ <DropdownMenuPrimitive.Item
78
+ data-slot="dropdown-menu-item"
79
+ data-inset={inset}
80
+ data-variant={variant}
81
+ className={cn(
82
+ "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
83
+ className
84
+ )}
85
+ {...props}
86
+ />
87
+ )
88
+ }
89
+
90
+ function DropdownMenuCheckboxItem({
91
+ className,
92
+ children,
93
+ checked,
94
+ ...props
95
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
96
+ return (
97
+ <DropdownMenuPrimitive.CheckboxItem
98
+ data-slot="dropdown-menu-checkbox-item"
99
+ className={cn(
100
+ "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
101
+ className
102
+ )}
103
+ checked={checked}
104
+ {...props}
105
+ >
106
+ <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
107
+ <DropdownMenuPrimitive.ItemIndicator>
108
+ <CheckIcon className="size-4" />
109
+ </DropdownMenuPrimitive.ItemIndicator>
110
+ </span>
111
+ {children}
112
+ </DropdownMenuPrimitive.CheckboxItem>
113
+ )
114
+ }
115
+
116
+ function DropdownMenuRadioGroup({
117
+ ...props
118
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
119
+ return (
120
+ <DropdownMenuPrimitive.RadioGroup
121
+ data-slot="dropdown-menu-radio-group"
122
+ {...props}
123
+ />
124
+ )
125
+ }
126
+
127
+ function DropdownMenuRadioItem({
128
+ className,
129
+ children,
130
+ ...props
131
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
132
+ return (
133
+ <DropdownMenuPrimitive.RadioItem
134
+ data-slot="dropdown-menu-radio-item"
135
+ className={cn(
136
+ "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
137
+ className
138
+ )}
139
+ {...props}
140
+ >
141
+ <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
142
+ <DropdownMenuPrimitive.ItemIndicator>
143
+ <CircleIcon className="size-2 fill-current" />
144
+ </DropdownMenuPrimitive.ItemIndicator>
145
+ </span>
146
+ {children}
147
+ </DropdownMenuPrimitive.RadioItem>
148
+ )
149
+ }
150
+
151
+ function DropdownMenuLabel({
152
+ className,
153
+ inset,
154
+ ...props
155
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
156
+ inset?: boolean
157
+ }) {
158
+ return (
159
+ <DropdownMenuPrimitive.Label
160
+ data-slot="dropdown-menu-label"
161
+ data-inset={inset}
162
+ className={cn(
163
+ "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
164
+ className
165
+ )}
166
+ {...props}
167
+ />
168
+ )
169
+ }
170
+
171
+ function DropdownMenuSeparator({
172
+ className,
173
+ ...props
174
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
175
+ return (
176
+ <DropdownMenuPrimitive.Separator
177
+ data-slot="dropdown-menu-separator"
178
+ className={cn("bg-border -mx-1 my-1 h-px", className)}
179
+ {...props}
180
+ />
181
+ )
182
+ }
183
+
184
+ function DropdownMenuShortcut({
185
+ className,
186
+ ...props
187
+ }: React.ComponentProps<"span">) {
188
+ return (
189
+ <span
190
+ data-slot="dropdown-menu-shortcut"
191
+ className={cn(
192
+ "text-muted-foreground ml-auto text-xs tracking-widest",
193
+ className
194
+ )}
195
+ {...props}
196
+ />
197
+ )
198
+ }
199
+
200
+ function DropdownMenuSub({
201
+ ...props
202
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
203
+ return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
204
+ }
205
+
206
+ function DropdownMenuSubTrigger({
207
+ className,
208
+ inset,
209
+ children,
210
+ ...props
211
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
212
+ inset?: boolean
213
+ }) {
214
+ return (
215
+ <DropdownMenuPrimitive.SubTrigger
216
+ data-slot="dropdown-menu-sub-trigger"
217
+ data-inset={inset}
218
+ className={cn(
219
+ "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
220
+ className
221
+ )}
222
+ {...props}
223
+ >
224
+ {children}
225
+ <ChevronRightIcon className="ml-auto size-4" />
226
+ </DropdownMenuPrimitive.SubTrigger>
227
+ )
228
+ }
229
+
230
+ function DropdownMenuSubContent({
231
+ className,
232
+ ...props
233
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
234
+ return (
235
+ <DropdownMenuPrimitive.SubContent
236
+ data-slot="dropdown-menu-sub-content"
237
+ className={cn(
238
+ "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
239
+ className
240
+ )}
241
+ {...props}
242
+ />
243
+ )
244
+ }
245
+
246
+ export {
247
+ DropdownMenu,
248
+ DropdownMenuPortal,
249
+ DropdownMenuTrigger,
250
+ DropdownMenuContent,
251
+ DropdownMenuGroup,
252
+ DropdownMenuLabel,
253
+ DropdownMenuItem,
254
+ DropdownMenuCheckboxItem,
255
+ DropdownMenuRadioGroup,
256
+ DropdownMenuRadioItem,
257
+ DropdownMenuSeparator,
258
+ DropdownMenuShortcut,
259
+ DropdownMenuSub,
260
+ DropdownMenuSubTrigger,
261
+ DropdownMenuSubContent,
262
+ }
@@ -0,0 +1,142 @@
1
+ "use client"
2
+
3
+ import * as React from "react"
4
+ import * as SheetPrimitive from "@radix-ui/react-dialog"
5
+ import { X } from "lucide-react"
6
+ import type { ComponentType } from "react"
7
+
8
+ import { cn } from "@authdog/react-elements/lib/utils"
9
+
10
+ const XIcon = X as ComponentType<React.SVGProps<SVGSVGElement>>
11
+
12
+ function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
13
+ return <SheetPrimitive.Root data-slot="sheet" {...props} />
14
+ }
15
+
16
+ function SheetTrigger({
17
+ ...props
18
+ }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
19
+ return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
20
+ }
21
+
22
+ function SheetClose({
23
+ ...props
24
+ }: React.ComponentProps<typeof SheetPrimitive.Close>) {
25
+ return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
26
+ }
27
+
28
+ function SheetPortal({
29
+ ...props
30
+ }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
31
+ return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
32
+ }
33
+
34
+ function SheetOverlay({
35
+ className,
36
+ ...props
37
+ }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
38
+ return (
39
+ <SheetPrimitive.Overlay
40
+ data-slot="sheet-overlay"
41
+ className={cn(
42
+ "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
43
+ className
44
+ )}
45
+ {...props}
46
+ />
47
+ )
48
+ }
49
+
50
+ function SheetContent({
51
+ className,
52
+ children,
53
+ side = "right",
54
+ ...props
55
+ }: React.ComponentProps<typeof SheetPrimitive.Content> & {
56
+ side?: "top" | "right" | "bottom" | "left"
57
+ }) {
58
+ return (
59
+ <SheetPortal>
60
+ <SheetOverlay />
61
+ <SheetPrimitive.Content
62
+ data-slot="sheet-content"
63
+ className={cn(
64
+ "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
65
+ side === "right" &&
66
+ "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
67
+ side === "left" &&
68
+ "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
69
+ side === "top" &&
70
+ "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
71
+ side === "bottom" &&
72
+ "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
73
+ className
74
+ )}
75
+ {...props}
76
+ >
77
+ {children}
78
+ <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
79
+ <XIcon className="size-4" />
80
+ <span className="sr-only">Close</span>
81
+ </SheetPrimitive.Close>
82
+ </SheetPrimitive.Content>
83
+ </SheetPortal>
84
+ )
85
+ }
86
+
87
+ function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
88
+ return (
89
+ <div
90
+ data-slot="sheet-header"
91
+ className={cn("flex flex-col gap-1.5 p-4", className)}
92
+ {...props}
93
+ />
94
+ )
95
+ }
96
+
97
+ function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
98
+ return (
99
+ <div
100
+ data-slot="sheet-footer"
101
+ className={cn("mt-auto flex flex-col gap-2 p-4", className)}
102
+ {...props}
103
+ />
104
+ )
105
+ }
106
+
107
+ function SheetTitle({
108
+ className,
109
+ ...props
110
+ }: React.ComponentProps<typeof SheetPrimitive.Title>) {
111
+ return (
112
+ <SheetPrimitive.Title
113
+ data-slot="sheet-title"
114
+ className={cn("text-foreground font-semibold", className)}
115
+ {...props}
116
+ />
117
+ )
118
+ }
119
+
120
+ function SheetDescription({
121
+ className,
122
+ ...props
123
+ }: React.ComponentProps<typeof SheetPrimitive.Description>) {
124
+ return (
125
+ <SheetPrimitive.Description
126
+ data-slot="sheet-description"
127
+ className={cn("text-muted-foreground text-sm", className)}
128
+ {...props}
129
+ />
130
+ )
131
+ }
132
+
133
+ export {
134
+ Sheet,
135
+ SheetTrigger,
136
+ SheetClose,
137
+ SheetContent,
138
+ SheetHeader,
139
+ SheetFooter,
140
+ SheetTitle,
141
+ SheetDescription,
142
+ }
package/src/index.ts CHANGED
@@ -1 +1,2 @@
1
1
  export * from "./components/ui/button";
2
+ export {Navbar} from "./components/core/navbar"
package/tsup.config.ts CHANGED
@@ -6,8 +6,13 @@ export default defineConfig({
6
6
  "src/components/ui/*.tsx",
7
7
  "src/lib/*.ts"
8
8
  ], // Build all entry points
9
- format: ["cjs", "esm"],
10
- dts: true,
9
+ format: ["esm", "cjs"],
10
+ dts: {
11
+ resolve: true,
12
+ entry: {
13
+ index: "src/index.ts",
14
+ },
15
+ },
11
16
  splitting: false,
12
17
  sourcemap: true,
13
18
  minify: true,
@@ -16,8 +21,14 @@ export default defineConfig({
16
21
  external: ["react", "react-dom"],
17
22
  outDir: "dist",
18
23
  platform: "browser",
19
- outExtension: ({ format }) => ({
20
- js: format === "esm" ? ".mjs" : ".js",
21
- }),
24
+ esbuildOptions(options) {
25
+ options.banner = {
26
+ js: '"use client";',
27
+ };
28
+ options.define = {
29
+ 'process.env.NODE_ENV': '"production"',
30
+ };
31
+ options.resolveExtensions = ['.tsx', '.ts', '.jsx', '.js', '.json'];
32
+ },
22
33
  onSuccess: "cp src/global.css dist/global.css && cp postcss.config.mjs dist/postcss.config.mjs && cp tailwind.config.ts dist/tailwind.config.ts"
23
34
  });
@@ -1,14 +0,0 @@
1
- import * as class_variance_authority_types from 'class-variance-authority/types';
2
- import * as React from 'react';
3
- import { VariantProps } from 'class-variance-authority';
4
-
5
- declare const buttonVariants: (props?: ({
6
- variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
7
- size?: "default" | "sm" | "lg" | "icon" | null | undefined;
8
- } & class_variance_authority_types.ClassProp) | undefined) => string;
9
- interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
10
- asChild?: boolean;
11
- }
12
- declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
13
-
14
- export { Button, type ButtonProps, buttonVariants };
@@ -1,14 +0,0 @@
1
- import * as class_variance_authority_types from 'class-variance-authority/types';
2
- import * as React from 'react';
3
- import { VariantProps } from 'class-variance-authority';
4
-
5
- declare const buttonVariants: (props?: ({
6
- variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
7
- size?: "default" | "sm" | "lg" | "icon" | null | undefined;
8
- } & class_variance_authority_types.ClassProp) | undefined) => string;
9
- interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
10
- asChild?: boolean;
11
- }
12
- declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
13
-
14
- export { Button, type ButtonProps, buttonVariants };