@enya-learning/nova 0.4.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/vendor-base-ui-efqwzv4oinwg1f0d.js.map +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +26 -11
- package/changelog.md +0 -44
- package/components.json +0 -23
- package/eslint.config.js +0 -30
- package/plopfile.mjs +0 -49
- package/src/components/.gitkeep +0 -0
- package/src/components/accordion/accordion.mdx +0 -83
- package/src/components/accordion/accordion.tsx +0 -81
- package/src/components/accordion/index.ts +0 -1
- package/src/components/alert/alert.tsx +0 -76
- package/src/components/alert/index.ts +0 -1
- package/src/components/alert-dialog/alert-dialog.tsx +0 -187
- package/src/components/alert-dialog/index.ts +0 -1
- package/src/components/aspect-ratio/aspect-ratio.tsx +0 -22
- package/src/components/aspect-ratio/index.ts +0 -1
- package/src/components/avatar/avatar.tsx +0 -107
- package/src/components/avatar/index.ts +0 -1
- package/src/components/badge/badge.tsx +0 -52
- package/src/components/badge/index.ts +0 -1
- package/src/components/breadcrumb/breadcrumb.tsx +0 -122
- package/src/components/breadcrumb/index.ts +0 -1
- package/src/components/button/button.mdx +0 -255
- package/src/components/button/button.tsx +0 -59
- package/src/components/button/index.ts +0 -1
- package/src/components/button-group/button-group.tsx +0 -87
- package/src/components/button-group/index.ts +0 -1
- package/src/components/calendar/calendar.tsx +0 -228
- package/src/components/calendar/index.ts +0 -1
- package/src/components/card/card.tsx +0 -100
- package/src/components/card/index.ts +0 -1
- package/src/components/carousel/carousel.tsx +0 -243
- package/src/components/carousel/index.ts +0 -1
- package/src/components/chart/chart.tsx +0 -371
- package/src/components/chart/index.ts +0 -1
- package/src/components/checkbox/checkbox.tsx +0 -28
- package/src/components/checkbox/index.ts +0 -1
- package/src/components/collapsible/collapsible.tsx +0 -19
- package/src/components/collapsible/index.ts +0 -1
- package/src/components/combobox/combobox.tsx +0 -298
- package/src/components/combobox/index.ts +0 -1
- package/src/components/command/command.tsx +0 -193
- package/src/components/command/index.ts +0 -1
- package/src/components/context-menu/context-menu.tsx +0 -272
- package/src/components/context-menu/index.ts +0 -1
- package/src/components/dialog/dialog.tsx +0 -157
- package/src/components/dialog/index.ts +0 -1
- package/src/components/direction/direction.tsx +0 -4
- package/src/components/direction/index.ts +0 -1
- package/src/components/drawer/drawer.tsx +0 -134
- package/src/components/drawer/index.ts +0 -1
- package/src/components/dropdown-menu/dropdown-menu.tsx +0 -270
- package/src/components/dropdown-menu/index.ts +0 -1
- package/src/components/empty/empty.tsx +0 -104
- package/src/components/empty/index.ts +0 -1
- package/src/components/enya-logo/enya-logo.mdx +0 -174
- package/src/components/enya-logo/enya-logo.tsx +0 -383
- package/src/components/enya-logo/index.ts +0 -1
- package/src/components/field/field.tsx +0 -236
- package/src/components/field/index.ts +0 -1
- package/src/components/hover-card/hover-card.tsx +0 -51
- package/src/components/hover-card/index.ts +0 -1
- package/src/components/input/index.ts +0 -1
- package/src/components/input/input.tsx +0 -20
- package/src/components/input-group/index.ts +0 -1
- package/src/components/input-group/input-group.tsx +0 -157
- package/src/components/input-otp/index.ts +0 -1
- package/src/components/input-otp/input-otp.tsx +0 -84
- package/src/components/item/index.ts +0 -1
- package/src/components/item/item.tsx +0 -201
- package/src/components/kbd/index.ts +0 -1
- package/src/components/kbd/kbd.tsx +0 -26
- package/src/components/label/index.ts +0 -1
- package/src/components/label/label.tsx +0 -20
- package/src/components/menubar/index.ts +0 -1
- package/src/components/menubar/menubar.tsx +0 -281
- package/src/components/native-select/index.ts +0 -1
- package/src/components/native-select/native-select.tsx +0 -65
- package/src/components/navigation-menu/index.ts +0 -1
- package/src/components/navigation-menu/navigation-menu.tsx +0 -171
- package/src/components/pagination/index.ts +0 -1
- package/src/components/pagination/pagination.tsx +0 -133
- package/src/components/popover/index.ts +0 -1
- package/src/components/popover/popover.tsx +0 -88
- package/src/components/progress/index.ts +0 -1
- package/src/components/progress/progress.tsx +0 -83
- package/src/components/radio-group/index.ts +0 -1
- package/src/components/radio-group/radio-group.tsx +0 -36
- package/src/components/resizable/index.ts +0 -1
- package/src/components/resizable/resizable.tsx +0 -50
- package/src/components/scroll-area/index.ts +0 -1
- package/src/components/scroll-area/scroll-area.tsx +0 -53
- package/src/components/select/index.ts +0 -1
- package/src/components/select/select.tsx +0 -205
- package/src/components/separator/index.ts +0 -1
- package/src/components/separator/separator.tsx +0 -23
- package/src/components/sheet/index.ts +0 -1
- package/src/components/sheet/sheet.tsx +0 -137
- package/src/components/sidebar/index.ts +0 -1
- package/src/components/sidebar/sidebar.tsx +0 -722
- package/src/components/skeleton/index.ts +0 -1
- package/src/components/skeleton/skeleton.tsx +0 -13
- package/src/components/slider/index.ts +0 -1
- package/src/components/slider/slider.tsx +0 -52
- package/src/components/sonner/index.ts +0 -1
- package/src/components/sonner/sonner.tsx +0 -45
- package/src/components/spinner/index.ts +0 -1
- package/src/components/spinner/spinner.tsx +0 -15
- package/src/components/switch/index.ts +0 -1
- package/src/components/switch/switch.tsx +0 -30
- package/src/components/table/index.ts +0 -1
- package/src/components/table/table.tsx +0 -116
- package/src/components/tabs/index.ts +0 -1
- package/src/components/tabs/tabs.tsx +0 -80
- package/src/components/textarea/index.ts +0 -1
- package/src/components/textarea/textarea.tsx +0 -18
- package/src/components/toggle/index.ts +0 -1
- package/src/components/toggle/toggle.tsx +0 -45
- package/src/components/toggle-group/index.ts +0 -1
- package/src/components/toggle-group/toggle-group.tsx +0 -87
- package/src/components/tooltip/index.ts +0 -1
- package/src/components/tooltip/tooltip.tsx +0 -64
- package/src/hooks/use-mobile.ts +0 -21
- package/src/index.ts +0 -58
- package/src/lib/.gitkeep +0 -0
- package/src/lib/utils.ts +0 -6
- package/src/styles/nova-binding.css +0 -290
- package/src/styles/nova.css +0 -58
- package/src/styles/theme-nova.css +0 -201
- package/src/styles/typography.css +0 -215
- package/src/utils/index.ts +0 -1
- package/templates/component/component.tsx.hbs +0 -16
- package/templates/component/index.ts.hbs +0 -1
- package/templates/component/stories.tsx.hbs +0 -13
- package/tsconfig.json +0 -18
- package/tsconfig.lint.json +0 -14
- package/vite.config.ts +0 -101
- /package/{src → dist}/styles/globals.css +0 -0
|
@@ -1,281 +0,0 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import * as React from "react"
|
|
4
|
-
import { Menu as MenuPrimitive } from "@base-ui/react/menu"
|
|
5
|
-
import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar"
|
|
6
|
-
|
|
7
|
-
import { cn } from "../../lib/utils"
|
|
8
|
-
import {
|
|
9
|
-
DropdownMenu,
|
|
10
|
-
DropdownMenuContent,
|
|
11
|
-
DropdownMenuGroup,
|
|
12
|
-
DropdownMenuItem,
|
|
13
|
-
DropdownMenuLabel,
|
|
14
|
-
DropdownMenuPortal,
|
|
15
|
-
DropdownMenuRadioGroup,
|
|
16
|
-
DropdownMenuSeparator,
|
|
17
|
-
DropdownMenuShortcut,
|
|
18
|
-
DropdownMenuSub,
|
|
19
|
-
DropdownMenuSubContent,
|
|
20
|
-
DropdownMenuSubTrigger,
|
|
21
|
-
DropdownMenuTrigger,
|
|
22
|
-
} from "../dropdown-menu"
|
|
23
|
-
import { CheckIcon } from "lucide-react"
|
|
24
|
-
|
|
25
|
-
function Menubar({ className, ...props }: MenubarPrimitive.Props) {
|
|
26
|
-
return (
|
|
27
|
-
<MenubarPrimitive
|
|
28
|
-
data-slot="menubar"
|
|
29
|
-
className={cn("flex h-9 items-center rounded-4xl border p-1", className)}
|
|
30
|
-
{...props}
|
|
31
|
-
/>
|
|
32
|
-
)
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
function MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {
|
|
36
|
-
return <DropdownMenu data-slot="menubar-menu" {...props} />
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
function MenubarGroup({
|
|
40
|
-
...props
|
|
41
|
-
}: React.ComponentProps<typeof DropdownMenuGroup>) {
|
|
42
|
-
return <DropdownMenuGroup data-slot="menubar-group" {...props} />
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
function MenubarPortal({
|
|
46
|
-
...props
|
|
47
|
-
}: React.ComponentProps<typeof DropdownMenuPortal>) {
|
|
48
|
-
return <DropdownMenuPortal data-slot="menubar-portal" {...props} />
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
function MenubarTrigger({
|
|
52
|
-
className,
|
|
53
|
-
...props
|
|
54
|
-
}: React.ComponentProps<typeof DropdownMenuTrigger>) {
|
|
55
|
-
return (
|
|
56
|
-
<DropdownMenuTrigger
|
|
57
|
-
data-slot="menubar-trigger"
|
|
58
|
-
className={cn(
|
|
59
|
-
"flex items-center rounded-xl px-2 py-0.75 text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted",
|
|
60
|
-
className
|
|
61
|
-
)}
|
|
62
|
-
{...props}
|
|
63
|
-
/>
|
|
64
|
-
)
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
function MenubarContent({
|
|
68
|
-
className,
|
|
69
|
-
align = "start",
|
|
70
|
-
alignOffset = -4,
|
|
71
|
-
sideOffset = 8,
|
|
72
|
-
...props
|
|
73
|
-
}: React.ComponentProps<typeof DropdownMenuContent>) {
|
|
74
|
-
return (
|
|
75
|
-
<DropdownMenuContent
|
|
76
|
-
data-slot="menubar-content"
|
|
77
|
-
align={align}
|
|
78
|
-
alignOffset={alignOffset}
|
|
79
|
-
sideOffset={sideOffset}
|
|
80
|
-
className={cn(
|
|
81
|
-
"min-w-48 rounded-2xl bg-popover p-1 text-popover-foreground shadow-2xl ring-1 ring-foreground/5 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
|
|
82
|
-
className
|
|
83
|
-
)}
|
|
84
|
-
{...props}
|
|
85
|
-
/>
|
|
86
|
-
)
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
function MenubarItem({
|
|
90
|
-
className,
|
|
91
|
-
inset,
|
|
92
|
-
variant = "default",
|
|
93
|
-
...props
|
|
94
|
-
}: React.ComponentProps<typeof DropdownMenuItem>) {
|
|
95
|
-
return (
|
|
96
|
-
<DropdownMenuItem
|
|
97
|
-
data-slot="menubar-item"
|
|
98
|
-
data-inset={inset}
|
|
99
|
-
data-variant={variant}
|
|
100
|
-
className={cn(
|
|
101
|
-
"group/menubar-item gap-2.5 rounded-xl px-3 py-2 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:ps-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
|
|
102
|
-
className
|
|
103
|
-
)}
|
|
104
|
-
{...props}
|
|
105
|
-
/>
|
|
106
|
-
)
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
function MenubarCheckboxItem({
|
|
110
|
-
className,
|
|
111
|
-
children,
|
|
112
|
-
checked,
|
|
113
|
-
inset,
|
|
114
|
-
...props
|
|
115
|
-
}: MenuPrimitive.CheckboxItem.Props & {
|
|
116
|
-
inset?: boolean
|
|
117
|
-
}) {
|
|
118
|
-
return (
|
|
119
|
-
<MenuPrimitive.CheckboxItem
|
|
120
|
-
data-slot="menubar-checkbox-item"
|
|
121
|
-
data-inset={inset}
|
|
122
|
-
className={cn(
|
|
123
|
-
"relative flex cursor-default items-center gap-2.5 rounded-xl py-2 ps-9.5 pe-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
124
|
-
className
|
|
125
|
-
)}
|
|
126
|
-
checked={checked}
|
|
127
|
-
{...props}
|
|
128
|
-
>
|
|
129
|
-
<span className="pointer-events-none absolute start-3 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
|
|
130
|
-
<MenuPrimitive.CheckboxItemIndicator>
|
|
131
|
-
<CheckIcon />
|
|
132
|
-
</MenuPrimitive.CheckboxItemIndicator>
|
|
133
|
-
</span>
|
|
134
|
-
{children}
|
|
135
|
-
</MenuPrimitive.CheckboxItem>
|
|
136
|
-
)
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
function MenubarRadioGroup({
|
|
140
|
-
...props
|
|
141
|
-
}: React.ComponentProps<typeof DropdownMenuRadioGroup>) {
|
|
142
|
-
return <DropdownMenuRadioGroup data-slot="menubar-radio-group" {...props} />
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
function MenubarRadioItem({
|
|
146
|
-
className,
|
|
147
|
-
children,
|
|
148
|
-
inset,
|
|
149
|
-
...props
|
|
150
|
-
}: MenuPrimitive.RadioItem.Props & {
|
|
151
|
-
inset?: boolean
|
|
152
|
-
}) {
|
|
153
|
-
return (
|
|
154
|
-
<MenuPrimitive.RadioItem
|
|
155
|
-
data-slot="menubar-radio-item"
|
|
156
|
-
data-inset={inset}
|
|
157
|
-
className={cn(
|
|
158
|
-
"relative flex cursor-default items-center gap-2.5 rounded-xl py-2 ps-9.5 pe-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
159
|
-
className
|
|
160
|
-
)}
|
|
161
|
-
{...props}
|
|
162
|
-
>
|
|
163
|
-
<span className="pointer-events-none absolute start-3 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
|
|
164
|
-
<MenuPrimitive.RadioItemIndicator>
|
|
165
|
-
<CheckIcon />
|
|
166
|
-
</MenuPrimitive.RadioItemIndicator>
|
|
167
|
-
</span>
|
|
168
|
-
{children}
|
|
169
|
-
</MenuPrimitive.RadioItem>
|
|
170
|
-
)
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
function MenubarLabel({
|
|
174
|
-
className,
|
|
175
|
-
inset,
|
|
176
|
-
...props
|
|
177
|
-
}: React.ComponentProps<typeof DropdownMenuLabel> & {
|
|
178
|
-
inset?: boolean
|
|
179
|
-
}) {
|
|
180
|
-
return (
|
|
181
|
-
<DropdownMenuLabel
|
|
182
|
-
data-slot="menubar-label"
|
|
183
|
-
data-inset={inset}
|
|
184
|
-
className={cn(
|
|
185
|
-
"px-3.5 py-2.5 text-xs text-muted-foreground data-inset:ps-9.5",
|
|
186
|
-
className
|
|
187
|
-
)}
|
|
188
|
-
{...props}
|
|
189
|
-
/>
|
|
190
|
-
)
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
function MenubarSeparator({
|
|
194
|
-
className,
|
|
195
|
-
...props
|
|
196
|
-
}: React.ComponentProps<typeof DropdownMenuSeparator>) {
|
|
197
|
-
return (
|
|
198
|
-
<DropdownMenuSeparator
|
|
199
|
-
data-slot="menubar-separator"
|
|
200
|
-
className={cn("-mx-1 my-1 h-px bg-border/50", className)}
|
|
201
|
-
{...props}
|
|
202
|
-
/>
|
|
203
|
-
)
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
function MenubarShortcut({
|
|
207
|
-
className,
|
|
208
|
-
...props
|
|
209
|
-
}: React.ComponentProps<typeof DropdownMenuShortcut>) {
|
|
210
|
-
return (
|
|
211
|
-
<DropdownMenuShortcut
|
|
212
|
-
data-slot="menubar-shortcut"
|
|
213
|
-
className={cn(
|
|
214
|
-
"ms-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground",
|
|
215
|
-
className
|
|
216
|
-
)}
|
|
217
|
-
{...props}
|
|
218
|
-
/>
|
|
219
|
-
)
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
function MenubarSub({
|
|
223
|
-
...props
|
|
224
|
-
}: React.ComponentProps<typeof DropdownMenuSub>) {
|
|
225
|
-
return <DropdownMenuSub data-slot="menubar-sub" {...props} />
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
function MenubarSubTrigger({
|
|
229
|
-
className,
|
|
230
|
-
inset,
|
|
231
|
-
...props
|
|
232
|
-
}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {
|
|
233
|
-
inset?: boolean
|
|
234
|
-
}) {
|
|
235
|
-
return (
|
|
236
|
-
<DropdownMenuSubTrigger
|
|
237
|
-
data-slot="menubar-sub-trigger"
|
|
238
|
-
data-inset={inset}
|
|
239
|
-
className={cn(
|
|
240
|
-
"gap-2 rounded-xl px-3 py-2 text-sm focus:bg-accent focus:text-accent-foreground data-inset:ps-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
|
|
241
|
-
className
|
|
242
|
-
)}
|
|
243
|
-
{...props}
|
|
244
|
-
/>
|
|
245
|
-
)
|
|
246
|
-
}
|
|
247
|
-
|
|
248
|
-
function MenubarSubContent({
|
|
249
|
-
className,
|
|
250
|
-
...props
|
|
251
|
-
}: React.ComponentProps<typeof DropdownMenuSubContent>) {
|
|
252
|
-
return (
|
|
253
|
-
<DropdownMenuSubContent
|
|
254
|
-
data-slot="menubar-sub-content"
|
|
255
|
-
className={cn(
|
|
256
|
-
"min-w-32 rounded-2xl bg-popover p-1 text-popover-foreground shadow-2xl ring-1 ring-foreground/5 duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
257
|
-
className
|
|
258
|
-
)}
|
|
259
|
-
{...props}
|
|
260
|
-
/>
|
|
261
|
-
)
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
export {
|
|
265
|
-
Menubar,
|
|
266
|
-
MenubarPortal,
|
|
267
|
-
MenubarMenu,
|
|
268
|
-
MenubarTrigger,
|
|
269
|
-
MenubarContent,
|
|
270
|
-
MenubarGroup,
|
|
271
|
-
MenubarSeparator,
|
|
272
|
-
MenubarLabel,
|
|
273
|
-
MenubarItem,
|
|
274
|
-
MenubarShortcut,
|
|
275
|
-
MenubarCheckboxItem,
|
|
276
|
-
MenubarRadioGroup,
|
|
277
|
-
MenubarRadioItem,
|
|
278
|
-
MenubarSub,
|
|
279
|
-
MenubarSubTrigger,
|
|
280
|
-
MenubarSubContent,
|
|
281
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./native-select"
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
|
|
3
|
-
import { cn } from "../../lib/utils"
|
|
4
|
-
import { ChevronDownIcon } from "lucide-react"
|
|
5
|
-
|
|
6
|
-
type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
|
|
7
|
-
size?: "sm" | "default"
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
function NativeSelect({
|
|
11
|
-
className,
|
|
12
|
-
size = "default",
|
|
13
|
-
...props
|
|
14
|
-
}: NativeSelectProps) {
|
|
15
|
-
return (
|
|
16
|
-
<div
|
|
17
|
-
className={cn(
|
|
18
|
-
"group/native-select relative w-fit has-[select:disabled]:opacity-50",
|
|
19
|
-
className
|
|
20
|
-
)}
|
|
21
|
-
data-slot="native-select-wrapper"
|
|
22
|
-
data-size={size}
|
|
23
|
-
>
|
|
24
|
-
<select
|
|
25
|
-
data-slot="native-select"
|
|
26
|
-
data-size={size}
|
|
27
|
-
className="h-9 w-full min-w-0 appearance-none rounded-4xl border border-input bg-input/30 py-1 ps-3 pe-8 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 data-[size=sm]:h-8 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
|
|
28
|
-
{...props}
|
|
29
|
-
/>
|
|
30
|
-
<ChevronDownIcon
|
|
31
|
-
className="pointer-events-none absolute end-3.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground select-none"
|
|
32
|
-
aria-hidden="true"
|
|
33
|
-
data-slot="native-select-icon"
|
|
34
|
-
/>
|
|
35
|
-
</div>
|
|
36
|
-
)
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
function NativeSelectOption({
|
|
40
|
-
className,
|
|
41
|
-
...props
|
|
42
|
-
}: React.ComponentProps<"option">) {
|
|
43
|
-
return (
|
|
44
|
-
<option
|
|
45
|
-
data-slot="native-select-option"
|
|
46
|
-
className={cn("bg-[Canvas] text-[CanvasText]", className)}
|
|
47
|
-
{...props}
|
|
48
|
-
/>
|
|
49
|
-
)
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
function NativeSelectOptGroup({
|
|
53
|
-
className,
|
|
54
|
-
...props
|
|
55
|
-
}: React.ComponentProps<"optgroup">) {
|
|
56
|
-
return (
|
|
57
|
-
<optgroup
|
|
58
|
-
data-slot="native-select-optgroup"
|
|
59
|
-
className={cn("bg-[Canvas] text-[CanvasText]", className)}
|
|
60
|
-
{...props}
|
|
61
|
-
/>
|
|
62
|
-
)
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
export { NativeSelect, NativeSelectOptGroup, NativeSelectOption }
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./navigation-menu"
|
|
@@ -1,171 +0,0 @@
|
|
|
1
|
-
import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu"
|
|
2
|
-
import { cva } from "class-variance-authority"
|
|
3
|
-
|
|
4
|
-
import { cn } from "../../lib/utils"
|
|
5
|
-
import { ChevronDownIcon } from "lucide-react"
|
|
6
|
-
|
|
7
|
-
function NavigationMenu({
|
|
8
|
-
align = "start",
|
|
9
|
-
className,
|
|
10
|
-
children,
|
|
11
|
-
...props
|
|
12
|
-
}: NavigationMenuPrimitive.Root.Props &
|
|
13
|
-
Pick<NavigationMenuPrimitive.Positioner.Props, "align">) {
|
|
14
|
-
return (
|
|
15
|
-
<NavigationMenuPrimitive.Root
|
|
16
|
-
data-slot="navigation-menu"
|
|
17
|
-
className={cn(
|
|
18
|
-
"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
|
|
19
|
-
className
|
|
20
|
-
)}
|
|
21
|
-
{...props}
|
|
22
|
-
>
|
|
23
|
-
{children}
|
|
24
|
-
<NavigationMenuPositioner align={align} />
|
|
25
|
-
</NavigationMenuPrimitive.Root>
|
|
26
|
-
)
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
function NavigationMenuList({
|
|
30
|
-
className,
|
|
31
|
-
...props
|
|
32
|
-
}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) {
|
|
33
|
-
return (
|
|
34
|
-
<NavigationMenuPrimitive.List
|
|
35
|
-
data-slot="navigation-menu-list"
|
|
36
|
-
className={cn(
|
|
37
|
-
"group flex flex-1 list-none items-center justify-center gap-0",
|
|
38
|
-
className
|
|
39
|
-
)}
|
|
40
|
-
{...props}
|
|
41
|
-
/>
|
|
42
|
-
)
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
function NavigationMenuItem({
|
|
46
|
-
className,
|
|
47
|
-
...props
|
|
48
|
-
}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) {
|
|
49
|
-
return (
|
|
50
|
-
<NavigationMenuPrimitive.Item
|
|
51
|
-
data-slot="navigation-menu-item"
|
|
52
|
-
className={cn("relative", className)}
|
|
53
|
-
{...props}
|
|
54
|
-
/>
|
|
55
|
-
)
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
const navigationMenuTriggerStyle = cva(
|
|
59
|
-
"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
|
|
60
|
-
)
|
|
61
|
-
|
|
62
|
-
function NavigationMenuTrigger({
|
|
63
|
-
className,
|
|
64
|
-
children,
|
|
65
|
-
...props
|
|
66
|
-
}: NavigationMenuPrimitive.Trigger.Props) {
|
|
67
|
-
return (
|
|
68
|
-
<NavigationMenuPrimitive.Trigger
|
|
69
|
-
data-slot="navigation-menu-trigger"
|
|
70
|
-
className={cn(navigationMenuTriggerStyle(), "group", className)}
|
|
71
|
-
{...props}
|
|
72
|
-
>
|
|
73
|
-
{children}{" "}
|
|
74
|
-
<ChevronDownIcon
|
|
75
|
-
className="relative top-px ms-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180"
|
|
76
|
-
aria-hidden="true"
|
|
77
|
-
/>
|
|
78
|
-
</NavigationMenuPrimitive.Trigger>
|
|
79
|
-
)
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
function NavigationMenuContent({
|
|
83
|
-
className,
|
|
84
|
-
...props
|
|
85
|
-
}: NavigationMenuPrimitive.Content.Props) {
|
|
86
|
-
return (
|
|
87
|
-
<NavigationMenuPrimitive.Content
|
|
88
|
-
data-slot="navigation-menu-content"
|
|
89
|
-
className={cn(
|
|
90
|
-
"data-ending-style:data-activation-direction=left:translate-x-[50%] rtl:data-ending-style:data-activation-direction=left:-translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] rtl:data-ending-style:data-activation-direction=right:-translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] rtl:data-starting-style:data-activation-direction=left:-translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] rtl:data-starting-style:data-activation-direction=right:-translate-x-[50%] isolate z-50 h-full w-auto p-2.5 pe-3 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-2xl group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow-2xl group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/5 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
|
|
91
|
-
className
|
|
92
|
-
)}
|
|
93
|
-
{...props}
|
|
94
|
-
/>
|
|
95
|
-
)
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
function NavigationMenuPositioner({
|
|
99
|
-
className,
|
|
100
|
-
side = "bottom",
|
|
101
|
-
sideOffset = 8,
|
|
102
|
-
align = "start",
|
|
103
|
-
alignOffset = 0,
|
|
104
|
-
...props
|
|
105
|
-
}: NavigationMenuPrimitive.Positioner.Props) {
|
|
106
|
-
return (
|
|
107
|
-
<NavigationMenuPrimitive.Portal>
|
|
108
|
-
<NavigationMenuPrimitive.Positioner
|
|
109
|
-
side={side}
|
|
110
|
-
sideOffset={sideOffset}
|
|
111
|
-
align={align}
|
|
112
|
-
alignOffset={alignOffset}
|
|
113
|
-
className={cn(
|
|
114
|
-
"isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:start-0 data-[side=bottom]:before:end-0 data-[side=bottom]:before:top-[-10px]",
|
|
115
|
-
className
|
|
116
|
-
)}
|
|
117
|
-
{...props}
|
|
118
|
-
>
|
|
119
|
-
<NavigationMenuPrimitive.Popup className="data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-2xl bg-popover text-popover-foreground shadow ring-1 ring-foreground/5 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0">
|
|
120
|
-
<NavigationMenuPrimitive.Viewport className="relative size-full overflow-hidden" />
|
|
121
|
-
</NavigationMenuPrimitive.Popup>
|
|
122
|
-
</NavigationMenuPrimitive.Positioner>
|
|
123
|
-
</NavigationMenuPrimitive.Portal>
|
|
124
|
-
)
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
function NavigationMenuLink({
|
|
128
|
-
className,
|
|
129
|
-
...props
|
|
130
|
-
}: NavigationMenuPrimitive.Link.Props) {
|
|
131
|
-
return (
|
|
132
|
-
<NavigationMenuPrimitive.Link
|
|
133
|
-
data-slot="navigation-menu-link"
|
|
134
|
-
className={cn(
|
|
135
|
-
"flex items-center gap-1.5 rounded-2xl p-3 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-xl data-[active=true]:bg-muted/50 data-[active=true]:hover:bg-muted data-[active=true]:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
|
|
136
|
-
className
|
|
137
|
-
)}
|
|
138
|
-
{...props}
|
|
139
|
-
/>
|
|
140
|
-
)
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
function NavigationMenuIndicator({
|
|
144
|
-
className,
|
|
145
|
-
...props
|
|
146
|
-
}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>) {
|
|
147
|
-
return (
|
|
148
|
-
<NavigationMenuPrimitive.Icon
|
|
149
|
-
data-slot="navigation-menu-indicator"
|
|
150
|
-
className={cn(
|
|
151
|
-
"top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
|
|
152
|
-
className
|
|
153
|
-
)}
|
|
154
|
-
{...props}
|
|
155
|
-
>
|
|
156
|
-
<div className="relative top-[60%] h-2 w-2 rotate-45 rounded-ss-sm bg-border shadow-md" />
|
|
157
|
-
</NavigationMenuPrimitive.Icon>
|
|
158
|
-
)
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
export {
|
|
162
|
-
NavigationMenu,
|
|
163
|
-
NavigationMenuContent,
|
|
164
|
-
NavigationMenuIndicator,
|
|
165
|
-
NavigationMenuItem,
|
|
166
|
-
NavigationMenuLink,
|
|
167
|
-
NavigationMenuList,
|
|
168
|
-
NavigationMenuTrigger,
|
|
169
|
-
navigationMenuTriggerStyle,
|
|
170
|
-
NavigationMenuPositioner,
|
|
171
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./pagination"
|
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
|
|
3
|
-
import { cn } from "../../lib/utils"
|
|
4
|
-
import { Button } from "../button"
|
|
5
|
-
import {
|
|
6
|
-
ChevronLeftIcon,
|
|
7
|
-
ChevronRightIcon,
|
|
8
|
-
MoreHorizontalIcon,
|
|
9
|
-
} from "lucide-react"
|
|
10
|
-
|
|
11
|
-
function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
|
|
12
|
-
return (
|
|
13
|
-
<nav
|
|
14
|
-
role="navigation"
|
|
15
|
-
aria-label="pagination"
|
|
16
|
-
data-slot="pagination"
|
|
17
|
-
className={cn("mx-auto flex w-full justify-center", className)}
|
|
18
|
-
{...props}
|
|
19
|
-
/>
|
|
20
|
-
)
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
function PaginationContent({
|
|
24
|
-
className,
|
|
25
|
-
...props
|
|
26
|
-
}: React.ComponentProps<"ul">) {
|
|
27
|
-
return (
|
|
28
|
-
<ul
|
|
29
|
-
data-slot="pagination-content"
|
|
30
|
-
className={cn("flex items-center gap-1", className)}
|
|
31
|
-
{...props}
|
|
32
|
-
/>
|
|
33
|
-
)
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
function PaginationItem({ ...props }: React.ComponentProps<"li">) {
|
|
37
|
-
return <li data-slot="pagination-item" {...props} />
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
type PaginationLinkProps = {
|
|
41
|
-
isActive?: boolean
|
|
42
|
-
} & Pick<React.ComponentProps<typeof Button>, "size"> &
|
|
43
|
-
React.ComponentProps<"a">
|
|
44
|
-
|
|
45
|
-
function PaginationLink({
|
|
46
|
-
className,
|
|
47
|
-
isActive,
|
|
48
|
-
size = "icon",
|
|
49
|
-
...props
|
|
50
|
-
}: PaginationLinkProps) {
|
|
51
|
-
return (
|
|
52
|
-
<Button
|
|
53
|
-
variant={isActive ? "outline" : "ghost"}
|
|
54
|
-
size={size}
|
|
55
|
-
className={cn(className)}
|
|
56
|
-
nativeButton={false}
|
|
57
|
-
render={
|
|
58
|
-
<a
|
|
59
|
-
aria-current={isActive ? "page" : undefined}
|
|
60
|
-
data-slot="pagination-link"
|
|
61
|
-
data-active={isActive}
|
|
62
|
-
{...props}
|
|
63
|
-
/>
|
|
64
|
-
}
|
|
65
|
-
/>
|
|
66
|
-
)
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
function PaginationPrevious({
|
|
70
|
-
className,
|
|
71
|
-
text = "Previous",
|
|
72
|
-
...props
|
|
73
|
-
}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
|
|
74
|
-
return (
|
|
75
|
-
<PaginationLink
|
|
76
|
-
aria-label="Go to previous page"
|
|
77
|
-
size="default"
|
|
78
|
-
className={cn("ps-2!", className)}
|
|
79
|
-
{...props}
|
|
80
|
-
>
|
|
81
|
-
<ChevronLeftIcon data-icon="inline-start" className="rtl:rotate-180" />
|
|
82
|
-
<span className="hidden sm:block">{text}</span>
|
|
83
|
-
</PaginationLink>
|
|
84
|
-
)
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
function PaginationNext({
|
|
88
|
-
className,
|
|
89
|
-
text = "Next",
|
|
90
|
-
...props
|
|
91
|
-
}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
|
|
92
|
-
return (
|
|
93
|
-
<PaginationLink
|
|
94
|
-
aria-label="Go to next page"
|
|
95
|
-
size="default"
|
|
96
|
-
className={cn("pe-2!", className)}
|
|
97
|
-
{...props}
|
|
98
|
-
>
|
|
99
|
-
<span className="hidden sm:block">{text}</span>
|
|
100
|
-
<ChevronRightIcon data-icon="inline-end" className="rtl:rotate-180" />
|
|
101
|
-
</PaginationLink>
|
|
102
|
-
)
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
function PaginationEllipsis({
|
|
106
|
-
className,
|
|
107
|
-
...props
|
|
108
|
-
}: React.ComponentProps<"span">) {
|
|
109
|
-
return (
|
|
110
|
-
<span
|
|
111
|
-
aria-hidden
|
|
112
|
-
data-slot="pagination-ellipsis"
|
|
113
|
-
className={cn(
|
|
114
|
-
"flex size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
|
|
115
|
-
className
|
|
116
|
-
)}
|
|
117
|
-
{...props}
|
|
118
|
-
>
|
|
119
|
-
<MoreHorizontalIcon />
|
|
120
|
-
<span className="sr-only">More pages</span>
|
|
121
|
-
</span>
|
|
122
|
-
)
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
export {
|
|
126
|
-
Pagination,
|
|
127
|
-
PaginationContent,
|
|
128
|
-
PaginationEllipsis,
|
|
129
|
-
PaginationItem,
|
|
130
|
-
PaginationLink,
|
|
131
|
-
PaginationNext,
|
|
132
|
-
PaginationPrevious,
|
|
133
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./popover"
|