@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,51 +0,0 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card"
|
|
4
|
-
|
|
5
|
-
import { cn } from "../../lib/utils"
|
|
6
|
-
|
|
7
|
-
function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
|
|
8
|
-
return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {
|
|
12
|
-
return (
|
|
13
|
-
<PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
|
|
14
|
-
)
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
function HoverCardContent({
|
|
18
|
-
className,
|
|
19
|
-
side = "bottom",
|
|
20
|
-
sideOffset = 4,
|
|
21
|
-
align = "center",
|
|
22
|
-
alignOffset = 4,
|
|
23
|
-
...props
|
|
24
|
-
}: PreviewCardPrimitive.Popup.Props &
|
|
25
|
-
Pick<
|
|
26
|
-
PreviewCardPrimitive.Positioner.Props,
|
|
27
|
-
"align" | "alignOffset" | "side" | "sideOffset"
|
|
28
|
-
>) {
|
|
29
|
-
return (
|
|
30
|
-
<PreviewCardPrimitive.Portal data-slot="hover-card-portal">
|
|
31
|
-
<PreviewCardPrimitive.Positioner
|
|
32
|
-
align={align}
|
|
33
|
-
alignOffset={alignOffset}
|
|
34
|
-
side={side}
|
|
35
|
-
sideOffset={sideOffset}
|
|
36
|
-
className="isolate z-50"
|
|
37
|
-
>
|
|
38
|
-
<PreviewCardPrimitive.Popup
|
|
39
|
-
data-slot="hover-card-content"
|
|
40
|
-
className={cn(
|
|
41
|
-
"z-50 w-72 origin-(--transform-origin) 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",
|
|
42
|
-
className
|
|
43
|
-
)}
|
|
44
|
-
{...props}
|
|
45
|
-
/>
|
|
46
|
-
</PreviewCardPrimitive.Positioner>
|
|
47
|
-
</PreviewCardPrimitive.Portal>
|
|
48
|
-
)
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
export { HoverCard, HoverCardTrigger, HoverCardContent }
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./hover-card"
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./input"
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
import { Input as InputPrimitive } from "@base-ui/react/input"
|
|
3
|
-
|
|
4
|
-
import { cn } from "../../lib/utils"
|
|
5
|
-
|
|
6
|
-
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
|
7
|
-
return (
|
|
8
|
-
<InputPrimitive
|
|
9
|
-
type={type}
|
|
10
|
-
data-slot="input"
|
|
11
|
-
className={cn(
|
|
12
|
-
"h-9 w-full min-w-0 rounded-4xl border border-input bg-input/30 px-3 py-1 text-base transition-colors outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-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 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
|
|
13
|
-
className
|
|
14
|
-
)}
|
|
15
|
-
{...props}
|
|
16
|
-
/>
|
|
17
|
-
)
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
export { Input }
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./input-group"
|
|
@@ -1,157 +0,0 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import * as React from "react"
|
|
4
|
-
import { cva, type VariantProps } from "class-variance-authority"
|
|
5
|
-
|
|
6
|
-
import { cn } from "../../lib/utils"
|
|
7
|
-
import { Button } from "../button"
|
|
8
|
-
import { Input } from "../input"
|
|
9
|
-
import { Textarea } from "../textarea"
|
|
10
|
-
|
|
11
|
-
function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
|
|
12
|
-
return (
|
|
13
|
-
<div
|
|
14
|
-
data-slot="input-group"
|
|
15
|
-
role="group"
|
|
16
|
-
className={cn(
|
|
17
|
-
"group/input-group relative flex h-9 w-full min-w-0 items-center rounded-4xl border border-input bg-input/30 transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-2xl has-data-[align=block-start]:rounded-2xl has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[textarea]:rounded-xl has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5",
|
|
18
|
-
className
|
|
19
|
-
)}
|
|
20
|
-
{...props}
|
|
21
|
-
/>
|
|
22
|
-
)
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
const inputGroupAddonVariants = cva(
|
|
26
|
-
"flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-4xl **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4",
|
|
27
|
-
{
|
|
28
|
-
variants: {
|
|
29
|
-
align: {
|
|
30
|
-
"inline-start":
|
|
31
|
-
"order-first ps-3 has-[>button]:-ms-1 has-[>kbd]:ms-[-0.15rem]",
|
|
32
|
-
"inline-end":
|
|
33
|
-
"order-last pe-3 has-[>button]:-me-1 has-[>kbd]:me-[-0.15rem]",
|
|
34
|
-
"block-start":
|
|
35
|
-
"order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-3 [.border-b]:pb-3",
|
|
36
|
-
"block-end":
|
|
37
|
-
"order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-3 [.border-t]:pt-3",
|
|
38
|
-
},
|
|
39
|
-
},
|
|
40
|
-
defaultVariants: {
|
|
41
|
-
align: "inline-start",
|
|
42
|
-
},
|
|
43
|
-
}
|
|
44
|
-
)
|
|
45
|
-
|
|
46
|
-
function InputGroupAddon({
|
|
47
|
-
className,
|
|
48
|
-
align = "inline-start",
|
|
49
|
-
...props
|
|
50
|
-
}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
|
|
51
|
-
return (
|
|
52
|
-
<div
|
|
53
|
-
role="group"
|
|
54
|
-
data-slot="input-group-addon"
|
|
55
|
-
data-align={align}
|
|
56
|
-
className={cn(inputGroupAddonVariants({ align }), className)}
|
|
57
|
-
onClick={(e) => {
|
|
58
|
-
if ((e.target as HTMLElement).closest("button")) {
|
|
59
|
-
return
|
|
60
|
-
}
|
|
61
|
-
e.currentTarget.parentElement?.querySelector("input")?.focus()
|
|
62
|
-
}}
|
|
63
|
-
{...props}
|
|
64
|
-
/>
|
|
65
|
-
)
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
const inputGroupButtonVariants = cva(
|
|
69
|
-
"flex items-center gap-2 rounded-4xl text-sm shadow-none",
|
|
70
|
-
{
|
|
71
|
-
variants: {
|
|
72
|
-
size: {
|
|
73
|
-
xs: "h-6 gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
|
|
74
|
-
sm: "",
|
|
75
|
-
"icon-xs": "size-6 p-0 has-[>svg]:p-0",
|
|
76
|
-
"icon-sm": "size-8 p-0 has-[>svg]:p-0",
|
|
77
|
-
},
|
|
78
|
-
},
|
|
79
|
-
defaultVariants: {
|
|
80
|
-
size: "xs",
|
|
81
|
-
},
|
|
82
|
-
}
|
|
83
|
-
)
|
|
84
|
-
|
|
85
|
-
function InputGroupButton({
|
|
86
|
-
className,
|
|
87
|
-
type = "button",
|
|
88
|
-
variant = "ghost",
|
|
89
|
-
size = "xs",
|
|
90
|
-
...props
|
|
91
|
-
}: Omit<React.ComponentProps<typeof Button>, "size" | "type"> &
|
|
92
|
-
VariantProps<typeof inputGroupButtonVariants> & {
|
|
93
|
-
type?: "button" | "submit" | "reset"
|
|
94
|
-
}) {
|
|
95
|
-
return (
|
|
96
|
-
<Button
|
|
97
|
-
type={type}
|
|
98
|
-
data-size={size}
|
|
99
|
-
variant={variant}
|
|
100
|
-
className={cn(inputGroupButtonVariants({ size }), className)}
|
|
101
|
-
{...props}
|
|
102
|
-
/>
|
|
103
|
-
)
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
|
|
107
|
-
return (
|
|
108
|
-
<span
|
|
109
|
-
className={cn(
|
|
110
|
-
"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
|
|
111
|
-
className
|
|
112
|
-
)}
|
|
113
|
-
{...props}
|
|
114
|
-
/>
|
|
115
|
-
)
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
function InputGroupInput({
|
|
119
|
-
className,
|
|
120
|
-
...props
|
|
121
|
-
}: React.ComponentProps<"input">) {
|
|
122
|
-
return (
|
|
123
|
-
<Input
|
|
124
|
-
data-slot="input-group-control"
|
|
125
|
-
className={cn(
|
|
126
|
-
"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
|
|
127
|
-
className
|
|
128
|
-
)}
|
|
129
|
-
{...props}
|
|
130
|
-
/>
|
|
131
|
-
)
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
function InputGroupTextarea({
|
|
135
|
-
className,
|
|
136
|
-
...props
|
|
137
|
-
}: React.ComponentProps<"textarea">) {
|
|
138
|
-
return (
|
|
139
|
-
<Textarea
|
|
140
|
-
data-slot="input-group-control"
|
|
141
|
-
className={cn(
|
|
142
|
-
"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
|
|
143
|
-
className
|
|
144
|
-
)}
|
|
145
|
-
{...props}
|
|
146
|
-
/>
|
|
147
|
-
)
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
export {
|
|
151
|
-
InputGroup,
|
|
152
|
-
InputGroupAddon,
|
|
153
|
-
InputGroupButton,
|
|
154
|
-
InputGroupText,
|
|
155
|
-
InputGroupInput,
|
|
156
|
-
InputGroupTextarea,
|
|
157
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./input-otp"
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
import { OTPInput, OTPInputContext } from "input-otp"
|
|
3
|
-
|
|
4
|
-
import { cn } from "../../lib/utils"
|
|
5
|
-
import { MinusIcon } from "lucide-react"
|
|
6
|
-
|
|
7
|
-
function InputOTP({
|
|
8
|
-
className,
|
|
9
|
-
containerClassName,
|
|
10
|
-
...props
|
|
11
|
-
}: React.ComponentProps<typeof OTPInput> & {
|
|
12
|
-
containerClassName?: string
|
|
13
|
-
}) {
|
|
14
|
-
return (
|
|
15
|
-
<OTPInput
|
|
16
|
-
data-slot="input-otp"
|
|
17
|
-
containerClassName={cn(
|
|
18
|
-
"cn-input-otp flex items-center has-disabled:opacity-50",
|
|
19
|
-
containerClassName
|
|
20
|
-
)}
|
|
21
|
-
spellCheck={false}
|
|
22
|
-
className={cn("disabled:cursor-not-allowed", className)}
|
|
23
|
-
{...props}
|
|
24
|
-
/>
|
|
25
|
-
)
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
|
|
29
|
-
return (
|
|
30
|
-
<div
|
|
31
|
-
data-slot="input-otp-group"
|
|
32
|
-
className={cn(
|
|
33
|
-
"flex items-center rounded-4xl has-aria-invalid:border-destructive has-aria-invalid:ring-[3px] has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40",
|
|
34
|
-
className
|
|
35
|
-
)}
|
|
36
|
-
{...props}
|
|
37
|
-
/>
|
|
38
|
-
)
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
function InputOTPSlot({
|
|
42
|
-
index,
|
|
43
|
-
className,
|
|
44
|
-
...props
|
|
45
|
-
}: React.ComponentProps<"div"> & {
|
|
46
|
-
index: number
|
|
47
|
-
}) {
|
|
48
|
-
const inputOTPContext = React.useContext(OTPInputContext)
|
|
49
|
-
const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
|
|
50
|
-
|
|
51
|
-
return (
|
|
52
|
-
<div
|
|
53
|
-
data-slot="input-otp-slot"
|
|
54
|
-
data-active={isActive}
|
|
55
|
-
className={cn(
|
|
56
|
-
"relative flex size-9 items-center justify-center border-y border-e border-input bg-input/30 text-sm transition-all outline-none first:rounded-s-4xl first:border-s last:rounded-e-4xl aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40",
|
|
57
|
-
className
|
|
58
|
-
)}
|
|
59
|
-
{...props}
|
|
60
|
-
>
|
|
61
|
-
{char}
|
|
62
|
-
{hasFakeCaret && (
|
|
63
|
-
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
|
|
64
|
-
<div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
|
|
65
|
-
</div>
|
|
66
|
-
)}
|
|
67
|
-
</div>
|
|
68
|
-
)
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
|
|
72
|
-
return (
|
|
73
|
-
<div
|
|
74
|
-
data-slot="input-otp-separator"
|
|
75
|
-
className="flex items-center [&_svg:not([class*='size-'])]:size-4"
|
|
76
|
-
role="separator"
|
|
77
|
-
{...props}
|
|
78
|
-
>
|
|
79
|
-
<MinusIcon />
|
|
80
|
-
</div>
|
|
81
|
-
)
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./item"
|
|
@@ -1,201 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
import { mergeProps } from "@base-ui/react/merge-props"
|
|
3
|
-
import { useRender } from "@base-ui/react/use-render"
|
|
4
|
-
import { cva, type VariantProps } from "class-variance-authority"
|
|
5
|
-
|
|
6
|
-
import { cn } from "../../lib/utils"
|
|
7
|
-
import { Separator } from "../separator"
|
|
8
|
-
|
|
9
|
-
function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
|
|
10
|
-
return (
|
|
11
|
-
<div
|
|
12
|
-
role="list"
|
|
13
|
-
data-slot="item-group"
|
|
14
|
-
className={cn(
|
|
15
|
-
"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
|
|
16
|
-
className
|
|
17
|
-
)}
|
|
18
|
-
{...props}
|
|
19
|
-
/>
|
|
20
|
-
)
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
function ItemSeparator({
|
|
24
|
-
className,
|
|
25
|
-
...props
|
|
26
|
-
}: React.ComponentProps<typeof Separator>) {
|
|
27
|
-
return (
|
|
28
|
-
<Separator
|
|
29
|
-
data-slot="item-separator"
|
|
30
|
-
orientation="horizontal"
|
|
31
|
-
className={cn("my-2", className)}
|
|
32
|
-
{...props}
|
|
33
|
-
/>
|
|
34
|
-
)
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
const itemVariants = cva(
|
|
38
|
-
"group/item flex w-full flex-wrap items-center rounded-2xl border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
|
|
39
|
-
{
|
|
40
|
-
variants: {
|
|
41
|
-
variant: {
|
|
42
|
-
default: "border-transparent",
|
|
43
|
-
outline: "border-border",
|
|
44
|
-
muted: "border-transparent bg-muted/50",
|
|
45
|
-
},
|
|
46
|
-
size: {
|
|
47
|
-
default: "gap-3.5 px-4 py-3.5",
|
|
48
|
-
sm: "gap-3.5 px-3.5 py-3",
|
|
49
|
-
xs: "gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0",
|
|
50
|
-
},
|
|
51
|
-
},
|
|
52
|
-
defaultVariants: {
|
|
53
|
-
variant: "default",
|
|
54
|
-
size: "default",
|
|
55
|
-
},
|
|
56
|
-
}
|
|
57
|
-
)
|
|
58
|
-
|
|
59
|
-
function Item({
|
|
60
|
-
className,
|
|
61
|
-
variant = "default",
|
|
62
|
-
size = "default",
|
|
63
|
-
render,
|
|
64
|
-
...props
|
|
65
|
-
}: useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>) {
|
|
66
|
-
return useRender({
|
|
67
|
-
defaultTagName: "div",
|
|
68
|
-
props: mergeProps<"div">(
|
|
69
|
-
{
|
|
70
|
-
className: cn(itemVariants({ variant, size, className })),
|
|
71
|
-
},
|
|
72
|
-
props
|
|
73
|
-
),
|
|
74
|
-
render,
|
|
75
|
-
state: {
|
|
76
|
-
slot: "item",
|
|
77
|
-
variant,
|
|
78
|
-
size,
|
|
79
|
-
},
|
|
80
|
-
})
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
const itemMediaVariants = cva(
|
|
84
|
-
"flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
|
|
85
|
-
{
|
|
86
|
-
variants: {
|
|
87
|
-
variant: {
|
|
88
|
-
default: "bg-transparent",
|
|
89
|
-
icon: "[&_svg:not([class*='size-'])]:size-4",
|
|
90
|
-
image:
|
|
91
|
-
"size-10 overflow-hidden rounded-lg group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 group-data-[size=xs]/item:rounded-md [&_img]:size-full [&_img]:object-cover",
|
|
92
|
-
},
|
|
93
|
-
},
|
|
94
|
-
defaultVariants: {
|
|
95
|
-
variant: "default",
|
|
96
|
-
},
|
|
97
|
-
}
|
|
98
|
-
)
|
|
99
|
-
|
|
100
|
-
function ItemMedia({
|
|
101
|
-
className,
|
|
102
|
-
variant = "default",
|
|
103
|
-
...props
|
|
104
|
-
}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
|
|
105
|
-
return (
|
|
106
|
-
<div
|
|
107
|
-
data-slot="item-media"
|
|
108
|
-
data-variant={variant}
|
|
109
|
-
className={cn(itemMediaVariants({ variant, className }))}
|
|
110
|
-
{...props}
|
|
111
|
-
/>
|
|
112
|
-
)
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
|
|
116
|
-
return (
|
|
117
|
-
<div
|
|
118
|
-
data-slot="item-content"
|
|
119
|
-
className={cn(
|
|
120
|
-
"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0.5 [&+[data-slot=item-content]]:flex-none",
|
|
121
|
-
className
|
|
122
|
-
)}
|
|
123
|
-
{...props}
|
|
124
|
-
/>
|
|
125
|
-
)
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
|
|
129
|
-
return (
|
|
130
|
-
<div
|
|
131
|
-
data-slot="item-title"
|
|
132
|
-
className={cn(
|
|
133
|
-
"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
|
|
134
|
-
className
|
|
135
|
-
)}
|
|
136
|
-
{...props}
|
|
137
|
-
/>
|
|
138
|
-
)
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
|
|
142
|
-
return (
|
|
143
|
-
<p
|
|
144
|
-
data-slot="item-description"
|
|
145
|
-
className={cn(
|
|
146
|
-
"line-clamp-2 text-start text-sm font-normal text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
|
|
147
|
-
className
|
|
148
|
-
)}
|
|
149
|
-
{...props}
|
|
150
|
-
/>
|
|
151
|
-
)
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
|
|
155
|
-
return (
|
|
156
|
-
<div
|
|
157
|
-
data-slot="item-actions"
|
|
158
|
-
className={cn("flex items-center gap-2", className)}
|
|
159
|
-
{...props}
|
|
160
|
-
/>
|
|
161
|
-
)
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
165
|
-
return (
|
|
166
|
-
<div
|
|
167
|
-
data-slot="item-header"
|
|
168
|
-
className={cn(
|
|
169
|
-
"flex basis-full items-center justify-between gap-2",
|
|
170
|
-
className
|
|
171
|
-
)}
|
|
172
|
-
{...props}
|
|
173
|
-
/>
|
|
174
|
-
)
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
|
|
178
|
-
return (
|
|
179
|
-
<div
|
|
180
|
-
data-slot="item-footer"
|
|
181
|
-
className={cn(
|
|
182
|
-
"flex basis-full items-center justify-between gap-2",
|
|
183
|
-
className
|
|
184
|
-
)}
|
|
185
|
-
{...props}
|
|
186
|
-
/>
|
|
187
|
-
)
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
export {
|
|
191
|
-
Item,
|
|
192
|
-
ItemMedia,
|
|
193
|
-
ItemContent,
|
|
194
|
-
ItemActions,
|
|
195
|
-
ItemGroup,
|
|
196
|
-
ItemSeparator,
|
|
197
|
-
ItemTitle,
|
|
198
|
-
ItemDescription,
|
|
199
|
-
ItemHeader,
|
|
200
|
-
ItemFooter,
|
|
201
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./kbd"
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { cn } from "../../lib/utils"
|
|
2
|
-
|
|
3
|
-
function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
|
|
4
|
-
return (
|
|
5
|
-
<kbd
|
|
6
|
-
data-slot="kbd"
|
|
7
|
-
className={cn(
|
|
8
|
-
"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
|
|
9
|
-
className
|
|
10
|
-
)}
|
|
11
|
-
{...props}
|
|
12
|
-
/>
|
|
13
|
-
)
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
|
|
17
|
-
return (
|
|
18
|
-
<kbd
|
|
19
|
-
data-slot="kbd-group"
|
|
20
|
-
className={cn("inline-flex items-center gap-1", className)}
|
|
21
|
-
{...props}
|
|
22
|
-
/>
|
|
23
|
-
)
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
export { Kbd, KbdGroup }
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./label"
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import * as React from "react"
|
|
4
|
-
|
|
5
|
-
import { cn } from "../../lib/utils"
|
|
6
|
-
|
|
7
|
-
function Label({ className, ...props }: React.ComponentProps<"label">) {
|
|
8
|
-
return (
|
|
9
|
-
<label
|
|
10
|
-
data-slot="label"
|
|
11
|
-
className={cn(
|
|
12
|
-
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
|
13
|
-
className
|
|
14
|
-
)}
|
|
15
|
-
{...props}
|
|
16
|
-
/>
|
|
17
|
-
)
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
export { Label }
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./menubar"
|