@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,88 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
|
|
3
|
-
|
|
4
|
-
import { cn } from "../../lib/utils"
|
|
5
|
-
|
|
6
|
-
function Popover({ ...props }: PopoverPrimitive.Root.Props) {
|
|
7
|
-
return <PopoverPrimitive.Root data-slot="popover" {...props} />
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
|
|
11
|
-
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
function PopoverContent({
|
|
15
|
-
className,
|
|
16
|
-
align = "center",
|
|
17
|
-
alignOffset = 0,
|
|
18
|
-
side = "bottom",
|
|
19
|
-
sideOffset = 4,
|
|
20
|
-
...props
|
|
21
|
-
}: PopoverPrimitive.Popup.Props &
|
|
22
|
-
Pick<
|
|
23
|
-
PopoverPrimitive.Positioner.Props,
|
|
24
|
-
"align" | "alignOffset" | "side" | "sideOffset"
|
|
25
|
-
>) {
|
|
26
|
-
return (
|
|
27
|
-
<PopoverPrimitive.Portal>
|
|
28
|
-
<PopoverPrimitive.Positioner
|
|
29
|
-
align={align}
|
|
30
|
-
alignOffset={alignOffset}
|
|
31
|
-
side={side}
|
|
32
|
-
sideOffset={sideOffset}
|
|
33
|
-
className="isolate z-50"
|
|
34
|
-
>
|
|
35
|
-
<PopoverPrimitive.Popup
|
|
36
|
-
data-slot="popover-content"
|
|
37
|
-
className={cn(
|
|
38
|
-
"z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-2xl bg-popover p-4 text-sm text-popover-foreground shadow-2xl ring-1 ring-foreground/5 outline-hidden 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 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
39
|
-
className
|
|
40
|
-
)}
|
|
41
|
-
{...props}
|
|
42
|
-
/>
|
|
43
|
-
</PopoverPrimitive.Positioner>
|
|
44
|
-
</PopoverPrimitive.Portal>
|
|
45
|
-
)
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
49
|
-
return (
|
|
50
|
-
<div
|
|
51
|
-
data-slot="popover-header"
|
|
52
|
-
className={cn("flex flex-col gap-1 text-sm", className)}
|
|
53
|
-
{...props}
|
|
54
|
-
/>
|
|
55
|
-
)
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
|
|
59
|
-
return (
|
|
60
|
-
<PopoverPrimitive.Title
|
|
61
|
-
data-slot="popover-title"
|
|
62
|
-
className={cn("text-base font-medium", className)}
|
|
63
|
-
{...props}
|
|
64
|
-
/>
|
|
65
|
-
)
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
function PopoverDescription({
|
|
69
|
-
className,
|
|
70
|
-
...props
|
|
71
|
-
}: PopoverPrimitive.Description.Props) {
|
|
72
|
-
return (
|
|
73
|
-
<PopoverPrimitive.Description
|
|
74
|
-
data-slot="popover-description"
|
|
75
|
-
className={cn("text-muted-foreground", className)}
|
|
76
|
-
{...props}
|
|
77
|
-
/>
|
|
78
|
-
)
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
export {
|
|
82
|
-
Popover,
|
|
83
|
-
PopoverContent,
|
|
84
|
-
PopoverDescription,
|
|
85
|
-
PopoverHeader,
|
|
86
|
-
PopoverTitle,
|
|
87
|
-
PopoverTrigger,
|
|
88
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./progress"
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
|
|
4
|
-
|
|
5
|
-
import { cn } from "../../lib/utils"
|
|
6
|
-
|
|
7
|
-
function Progress({
|
|
8
|
-
className,
|
|
9
|
-
children,
|
|
10
|
-
value,
|
|
11
|
-
...props
|
|
12
|
-
}: ProgressPrimitive.Root.Props) {
|
|
13
|
-
return (
|
|
14
|
-
<ProgressPrimitive.Root
|
|
15
|
-
value={value}
|
|
16
|
-
data-slot="progress"
|
|
17
|
-
className={cn("flex flex-wrap gap-3", className)}
|
|
18
|
-
{...props}
|
|
19
|
-
>
|
|
20
|
-
{children}
|
|
21
|
-
<ProgressTrack>
|
|
22
|
-
<ProgressIndicator />
|
|
23
|
-
</ProgressTrack>
|
|
24
|
-
</ProgressPrimitive.Root>
|
|
25
|
-
)
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
|
|
29
|
-
return (
|
|
30
|
-
<ProgressPrimitive.Track
|
|
31
|
-
className={cn(
|
|
32
|
-
"relative flex h-3 w-full items-center overflow-x-hidden rounded-4xl bg-muted",
|
|
33
|
-
className
|
|
34
|
-
)}
|
|
35
|
-
data-slot="progress-track"
|
|
36
|
-
{...props}
|
|
37
|
-
/>
|
|
38
|
-
)
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
function ProgressIndicator({
|
|
42
|
-
className,
|
|
43
|
-
...props
|
|
44
|
-
}: ProgressPrimitive.Indicator.Props) {
|
|
45
|
-
return (
|
|
46
|
-
<ProgressPrimitive.Indicator
|
|
47
|
-
data-slot="progress-indicator"
|
|
48
|
-
className={cn("h-full bg-primary transition-all", className)}
|
|
49
|
-
{...props}
|
|
50
|
-
/>
|
|
51
|
-
)
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
|
|
55
|
-
return (
|
|
56
|
-
<ProgressPrimitive.Label
|
|
57
|
-
className={cn("text-sm font-medium", className)}
|
|
58
|
-
data-slot="progress-label"
|
|
59
|
-
{...props}
|
|
60
|
-
/>
|
|
61
|
-
)
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
|
|
65
|
-
return (
|
|
66
|
-
<ProgressPrimitive.Value
|
|
67
|
-
className={cn(
|
|
68
|
-
"ms-auto text-sm text-muted-foreground tabular-nums",
|
|
69
|
-
className
|
|
70
|
-
)}
|
|
71
|
-
data-slot="progress-value"
|
|
72
|
-
{...props}
|
|
73
|
-
/>
|
|
74
|
-
)
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
export {
|
|
78
|
-
Progress,
|
|
79
|
-
ProgressTrack,
|
|
80
|
-
ProgressIndicator,
|
|
81
|
-
ProgressLabel,
|
|
82
|
-
ProgressValue,
|
|
83
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./radio-group"
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { Radio as RadioPrimitive } from "@base-ui/react/radio"
|
|
2
|
-
import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group"
|
|
3
|
-
|
|
4
|
-
import { cn } from "../../lib/utils"
|
|
5
|
-
|
|
6
|
-
function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
|
|
7
|
-
return (
|
|
8
|
-
<RadioGroupPrimitive
|
|
9
|
-
data-slot="radio-group"
|
|
10
|
-
className={cn("grid w-full gap-3", className)}
|
|
11
|
-
{...props}
|
|
12
|
-
/>
|
|
13
|
-
)
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
|
|
17
|
-
return (
|
|
18
|
-
<RadioPrimitive.Root
|
|
19
|
-
data-slot="radio-group-item"
|
|
20
|
-
className={cn(
|
|
21
|
-
"group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
|
|
22
|
-
className
|
|
23
|
-
)}
|
|
24
|
-
{...props}
|
|
25
|
-
>
|
|
26
|
-
<RadioPrimitive.Indicator
|
|
27
|
-
data-slot="radio-group-indicator"
|
|
28
|
-
className="flex size-4 items-center justify-center"
|
|
29
|
-
>
|
|
30
|
-
<span className="absolute start-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground rtl:translate-x-1/2" />
|
|
31
|
-
</RadioPrimitive.Indicator>
|
|
32
|
-
</RadioPrimitive.Root>
|
|
33
|
-
)
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
export { RadioGroup, RadioGroupItem }
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./resizable"
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import * as ResizablePrimitive from "react-resizable-panels"
|
|
4
|
-
|
|
5
|
-
import { cn } from "../../lib/utils"
|
|
6
|
-
|
|
7
|
-
function ResizablePanelGroup({
|
|
8
|
-
className,
|
|
9
|
-
...props
|
|
10
|
-
}: ResizablePrimitive.GroupProps) {
|
|
11
|
-
return (
|
|
12
|
-
<ResizablePrimitive.Group
|
|
13
|
-
data-slot="resizable-panel-group"
|
|
14
|
-
className={cn(
|
|
15
|
-
"flex h-full w-full aria-[orientation=vertical]:flex-col",
|
|
16
|
-
className
|
|
17
|
-
)}
|
|
18
|
-
{...props}
|
|
19
|
-
/>
|
|
20
|
-
)
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
|
|
24
|
-
return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
function ResizableHandle({
|
|
28
|
-
withHandle,
|
|
29
|
-
className,
|
|
30
|
-
...props
|
|
31
|
-
}: ResizablePrimitive.SeparatorProps & {
|
|
32
|
-
withHandle?: boolean
|
|
33
|
-
}) {
|
|
34
|
-
return (
|
|
35
|
-
<ResizablePrimitive.Separator
|
|
36
|
-
data-slot="resizable-handle"
|
|
37
|
-
className={cn(
|
|
38
|
-
"relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:start-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:start-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 rtl:after:translate-x-1/2 rtl:aria-[orientation=horizontal]:after:-translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90",
|
|
39
|
-
className
|
|
40
|
-
)}
|
|
41
|
-
{...props}
|
|
42
|
-
>
|
|
43
|
-
{withHandle && (
|
|
44
|
-
<div className="z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" />
|
|
45
|
-
)}
|
|
46
|
-
</ResizablePrimitive.Separator>
|
|
47
|
-
)
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
export { ResizableHandle, ResizablePanel, ResizablePanelGroup }
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./scroll-area"
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
|
|
3
|
-
|
|
4
|
-
import { cn } from "../../lib/utils"
|
|
5
|
-
|
|
6
|
-
function ScrollArea({
|
|
7
|
-
className,
|
|
8
|
-
children,
|
|
9
|
-
...props
|
|
10
|
-
}: ScrollAreaPrimitive.Root.Props) {
|
|
11
|
-
return (
|
|
12
|
-
<ScrollAreaPrimitive.Root
|
|
13
|
-
data-slot="scroll-area"
|
|
14
|
-
className={cn("relative", className)}
|
|
15
|
-
{...props}
|
|
16
|
-
>
|
|
17
|
-
<ScrollAreaPrimitive.Viewport
|
|
18
|
-
data-slot="scroll-area-viewport"
|
|
19
|
-
className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
|
|
20
|
-
>
|
|
21
|
-
{children}
|
|
22
|
-
</ScrollAreaPrimitive.Viewport>
|
|
23
|
-
<ScrollBar />
|
|
24
|
-
<ScrollAreaPrimitive.Corner />
|
|
25
|
-
</ScrollAreaPrimitive.Root>
|
|
26
|
-
)
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
function ScrollBar({
|
|
30
|
-
className,
|
|
31
|
-
orientation = "vertical",
|
|
32
|
-
...props
|
|
33
|
-
}: ScrollAreaPrimitive.Scrollbar.Props) {
|
|
34
|
-
return (
|
|
35
|
-
<ScrollAreaPrimitive.Scrollbar
|
|
36
|
-
data-slot="scroll-area-scrollbar"
|
|
37
|
-
data-orientation={orientation}
|
|
38
|
-
orientation={orientation}
|
|
39
|
-
className={cn(
|
|
40
|
-
"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-s data-vertical:border-s-transparent",
|
|
41
|
-
className
|
|
42
|
-
)}
|
|
43
|
-
{...props}
|
|
44
|
-
>
|
|
45
|
-
<ScrollAreaPrimitive.Thumb
|
|
46
|
-
data-slot="scroll-area-thumb"
|
|
47
|
-
className="relative flex-1 rounded-full bg-border"
|
|
48
|
-
/>
|
|
49
|
-
</ScrollAreaPrimitive.Scrollbar>
|
|
50
|
-
)
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
export { ScrollArea, ScrollBar }
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./select"
|
|
@@ -1,205 +0,0 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import * as React from "react"
|
|
4
|
-
import { Select as SelectPrimitive } from "@base-ui/react/select"
|
|
5
|
-
|
|
6
|
-
import { cn } from "../../lib/utils"
|
|
7
|
-
import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
|
|
8
|
-
|
|
9
|
-
const Select = SelectPrimitive.Root
|
|
10
|
-
|
|
11
|
-
function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
|
|
12
|
-
return (
|
|
13
|
-
<SelectPrimitive.Group
|
|
14
|
-
data-slot="select-group"
|
|
15
|
-
className={cn("scroll-my-1 p-1", className)}
|
|
16
|
-
{...props}
|
|
17
|
-
/>
|
|
18
|
-
)
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
|
|
22
|
-
return (
|
|
23
|
-
<SelectPrimitive.Value
|
|
24
|
-
data-slot="select-value"
|
|
25
|
-
className={cn("flex flex-1 text-start", className)}
|
|
26
|
-
{...props}
|
|
27
|
-
/>
|
|
28
|
-
)
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
function SelectTrigger({
|
|
32
|
-
className,
|
|
33
|
-
size = "default",
|
|
34
|
-
children,
|
|
35
|
-
...props
|
|
36
|
-
}: SelectPrimitive.Trigger.Props & {
|
|
37
|
-
size?: "sm" | "default"
|
|
38
|
-
}) {
|
|
39
|
-
return (
|
|
40
|
-
<SelectPrimitive.Trigger
|
|
41
|
-
data-slot="select-trigger"
|
|
42
|
-
data-size={size}
|
|
43
|
-
className={cn(
|
|
44
|
-
"flex w-fit items-center justify-between gap-1.5 rounded-4xl border border-input bg-input/30 px-3 py-2 text-sm whitespace-nowrap transition-colors outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
45
|
-
className
|
|
46
|
-
)}
|
|
47
|
-
{...props}
|
|
48
|
-
>
|
|
49
|
-
{children}
|
|
50
|
-
<SelectPrimitive.Icon
|
|
51
|
-
render={
|
|
52
|
-
<ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
|
|
53
|
-
}
|
|
54
|
-
/>
|
|
55
|
-
</SelectPrimitive.Trigger>
|
|
56
|
-
)
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
function SelectContent({
|
|
60
|
-
className,
|
|
61
|
-
children,
|
|
62
|
-
side = "bottom",
|
|
63
|
-
sideOffset = 4,
|
|
64
|
-
align = "center",
|
|
65
|
-
alignOffset = 0,
|
|
66
|
-
alignItemWithTrigger = true,
|
|
67
|
-
...props
|
|
68
|
-
}: SelectPrimitive.Popup.Props &
|
|
69
|
-
Pick<
|
|
70
|
-
SelectPrimitive.Positioner.Props,
|
|
71
|
-
"align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
|
|
72
|
-
>) {
|
|
73
|
-
return (
|
|
74
|
-
<SelectPrimitive.Portal>
|
|
75
|
-
<SelectPrimitive.Positioner
|
|
76
|
-
side={side}
|
|
77
|
-
sideOffset={sideOffset}
|
|
78
|
-
align={align}
|
|
79
|
-
alignOffset={alignOffset}
|
|
80
|
-
alignItemWithTrigger={alignItemWithTrigger}
|
|
81
|
-
className="isolate z-50"
|
|
82
|
-
>
|
|
83
|
-
<SelectPrimitive.Popup
|
|
84
|
-
data-slot="select-content"
|
|
85
|
-
data-align-trigger={alignItemWithTrigger}
|
|
86
|
-
className={cn(
|
|
87
|
-
"relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl bg-popover text-popover-foreground shadow-2xl ring-1 ring-foreground/5 duration-100 data-[align-trigger=true]:animate-none 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 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
88
|
-
className
|
|
89
|
-
)}
|
|
90
|
-
{...props}
|
|
91
|
-
>
|
|
92
|
-
<SelectScrollUpButton />
|
|
93
|
-
<SelectPrimitive.List>{children}</SelectPrimitive.List>
|
|
94
|
-
<SelectScrollDownButton />
|
|
95
|
-
</SelectPrimitive.Popup>
|
|
96
|
-
</SelectPrimitive.Positioner>
|
|
97
|
-
</SelectPrimitive.Portal>
|
|
98
|
-
)
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
function SelectLabel({
|
|
102
|
-
className,
|
|
103
|
-
...props
|
|
104
|
-
}: SelectPrimitive.GroupLabel.Props) {
|
|
105
|
-
return (
|
|
106
|
-
<SelectPrimitive.GroupLabel
|
|
107
|
-
data-slot="select-label"
|
|
108
|
-
className={cn("px-3 py-2.5 text-xs text-muted-foreground", className)}
|
|
109
|
-
{...props}
|
|
110
|
-
/>
|
|
111
|
-
)
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
function SelectItem({
|
|
115
|
-
className,
|
|
116
|
-
children,
|
|
117
|
-
...props
|
|
118
|
-
}: SelectPrimitive.Item.Props) {
|
|
119
|
-
return (
|
|
120
|
-
<SelectPrimitive.Item
|
|
121
|
-
data-slot="select-item"
|
|
122
|
-
className={cn(
|
|
123
|
-
"relative flex w-full cursor-default items-center gap-2.5 rounded-xl py-2 ps-3 pe-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
|
124
|
-
className
|
|
125
|
-
)}
|
|
126
|
-
{...props}
|
|
127
|
-
>
|
|
128
|
-
<SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
|
|
129
|
-
{children}
|
|
130
|
-
</SelectPrimitive.ItemText>
|
|
131
|
-
<SelectPrimitive.ItemIndicator
|
|
132
|
-
render={
|
|
133
|
-
<span className="pointer-events-none absolute end-2 flex size-4 items-center justify-center" />
|
|
134
|
-
}
|
|
135
|
-
>
|
|
136
|
-
<CheckIcon className="pointer-events-none" />
|
|
137
|
-
</SelectPrimitive.ItemIndicator>
|
|
138
|
-
</SelectPrimitive.Item>
|
|
139
|
-
)
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
function SelectSeparator({
|
|
143
|
-
className,
|
|
144
|
-
...props
|
|
145
|
-
}: SelectPrimitive.Separator.Props) {
|
|
146
|
-
return (
|
|
147
|
-
<SelectPrimitive.Separator
|
|
148
|
-
data-slot="select-separator"
|
|
149
|
-
className={cn(
|
|
150
|
-
"pointer-events-none -mx-1 my-1 h-px bg-border/50",
|
|
151
|
-
className
|
|
152
|
-
)}
|
|
153
|
-
{...props}
|
|
154
|
-
/>
|
|
155
|
-
)
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
function SelectScrollUpButton({
|
|
159
|
-
className,
|
|
160
|
-
...props
|
|
161
|
-
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
|
|
162
|
-
return (
|
|
163
|
-
<SelectPrimitive.ScrollUpArrow
|
|
164
|
-
data-slot="select-scroll-up-button"
|
|
165
|
-
className={cn(
|
|
166
|
-
"top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
|
|
167
|
-
className
|
|
168
|
-
)}
|
|
169
|
-
{...props}
|
|
170
|
-
>
|
|
171
|
-
<ChevronUpIcon />
|
|
172
|
-
</SelectPrimitive.ScrollUpArrow>
|
|
173
|
-
)
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
function SelectScrollDownButton({
|
|
177
|
-
className,
|
|
178
|
-
...props
|
|
179
|
-
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
|
|
180
|
-
return (
|
|
181
|
-
<SelectPrimitive.ScrollDownArrow
|
|
182
|
-
data-slot="select-scroll-down-button"
|
|
183
|
-
className={cn(
|
|
184
|
-
"bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
|
|
185
|
-
className
|
|
186
|
-
)}
|
|
187
|
-
{...props}
|
|
188
|
-
>
|
|
189
|
-
<ChevronDownIcon />
|
|
190
|
-
</SelectPrimitive.ScrollDownArrow>
|
|
191
|
-
)
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
export {
|
|
195
|
-
Select,
|
|
196
|
-
SelectContent,
|
|
197
|
-
SelectGroup,
|
|
198
|
-
SelectItem,
|
|
199
|
-
SelectLabel,
|
|
200
|
-
SelectScrollDownButton,
|
|
201
|
-
SelectScrollUpButton,
|
|
202
|
-
SelectSeparator,
|
|
203
|
-
SelectTrigger,
|
|
204
|
-
SelectValue,
|
|
205
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./separator"
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
|
|
2
|
-
|
|
3
|
-
import { cn } from "../../lib/utils"
|
|
4
|
-
|
|
5
|
-
function Separator({
|
|
6
|
-
className,
|
|
7
|
-
orientation = "horizontal",
|
|
8
|
-
...props
|
|
9
|
-
}: SeparatorPrimitive.Props) {
|
|
10
|
-
return (
|
|
11
|
-
<SeparatorPrimitive
|
|
12
|
-
data-slot="separator"
|
|
13
|
-
orientation={orientation}
|
|
14
|
-
className={cn(
|
|
15
|
-
"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
|
|
16
|
-
className
|
|
17
|
-
)}
|
|
18
|
-
{...props}
|
|
19
|
-
/>
|
|
20
|
-
)
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
export { Separator }
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./sheet"
|