@enya-learning/nova 0.4.0 → 0.4.2
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/{button-npy7isi3nsvlhf86.js → button-kvgr8g13fe959ju0.js} +19 -19
- package/dist/chunks/{button-npy7isi3nsvlhf86.js.map → button-kvgr8g13fe959ju0.js.map} +1 -1
- package/dist/chunks/vendor-utils-egkaeebaqpft6cxj.js +473 -0
- package/dist/chunks/vendor-utils-egkaeebaqpft6cxj.js.map +1 -0
- package/dist/components/button.js +1 -1
- package/dist/components/enya-logo.js +1 -1
- package/dist/index.js +6782 -7036
- package/dist/index.js.map +1 -1
- package/package.json +26 -11
- package/changelog.md +0 -44
- package/components.json +0 -23
- package/dist/chunks/vendor-base-ui-efqwzv4oinwg1f0d.js +0 -16049
- package/dist/chunks/vendor-base-ui-efqwzv4oinwg1f0d.js.map +0 -1
- 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/{Readme.md → README.md} +0 -0
- /package/{src → dist}/styles/globals.css +0 -0
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./skeleton"
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { cn } from "../../lib/utils"
|
|
2
|
-
|
|
3
|
-
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
|
|
4
|
-
return (
|
|
5
|
-
<div
|
|
6
|
-
data-slot="skeleton"
|
|
7
|
-
className={cn("animate-pulse rounded-xl bg-muted", className)}
|
|
8
|
-
{...props}
|
|
9
|
-
/>
|
|
10
|
-
)
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export { Skeleton }
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./slider"
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import { Slider as SliderPrimitive } from "@base-ui/react/slider"
|
|
2
|
-
|
|
3
|
-
import { cn } from "../../lib/utils"
|
|
4
|
-
|
|
5
|
-
function Slider({
|
|
6
|
-
className,
|
|
7
|
-
defaultValue,
|
|
8
|
-
value,
|
|
9
|
-
min = 0,
|
|
10
|
-
max = 100,
|
|
11
|
-
...props
|
|
12
|
-
}: SliderPrimitive.Root.Props) {
|
|
13
|
-
const _values = Array.isArray(value)
|
|
14
|
-
? value
|
|
15
|
-
: Array.isArray(defaultValue)
|
|
16
|
-
? defaultValue
|
|
17
|
-
: [min, max]
|
|
18
|
-
|
|
19
|
-
return (
|
|
20
|
-
<SliderPrimitive.Root
|
|
21
|
-
className={cn("data-horizontal:w-full data-vertical:h-full", className)}
|
|
22
|
-
data-slot="slider"
|
|
23
|
-
defaultValue={defaultValue}
|
|
24
|
-
value={value}
|
|
25
|
-
min={min}
|
|
26
|
-
max={max}
|
|
27
|
-
thumbAlignment="edge"
|
|
28
|
-
{...props}
|
|
29
|
-
>
|
|
30
|
-
<SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">
|
|
31
|
-
<SliderPrimitive.Track
|
|
32
|
-
data-slot="slider-track"
|
|
33
|
-
className="relative grow overflow-hidden rounded-4xl bg-muted select-none data-horizontal:h-3 data-horizontal:w-full data-vertical:h-full data-vertical:w-3"
|
|
34
|
-
>
|
|
35
|
-
<SliderPrimitive.Indicator
|
|
36
|
-
data-slot="slider-range"
|
|
37
|
-
className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"
|
|
38
|
-
/>
|
|
39
|
-
</SliderPrimitive.Track>
|
|
40
|
-
{Array.from({ length: _values.length }, (_, index) => (
|
|
41
|
-
<SliderPrimitive.Thumb
|
|
42
|
-
data-slot="slider-thumb"
|
|
43
|
-
key={index}
|
|
44
|
-
className="block size-4 shrink-0 rounded-4xl border border-primary bg-nova-white shadow-sm ring-ring/50 transition-colors select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
|
|
45
|
-
/>
|
|
46
|
-
))}
|
|
47
|
-
</SliderPrimitive.Control>
|
|
48
|
-
</SliderPrimitive.Root>
|
|
49
|
-
)
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
export { Slider }
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./sonner"
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import { useTheme } from "next-themes"
|
|
4
|
-
import { Toaster as Sonner, type ToasterProps } from "sonner"
|
|
5
|
-
import {
|
|
6
|
-
CircleCheckIcon,
|
|
7
|
-
InfoIcon,
|
|
8
|
-
TriangleAlertIcon,
|
|
9
|
-
OctagonXIcon,
|
|
10
|
-
Loader2Icon,
|
|
11
|
-
} from "lucide-react"
|
|
12
|
-
|
|
13
|
-
const Toaster = ({ ...props }: ToasterProps) => {
|
|
14
|
-
const { theme = "system" } = useTheme()
|
|
15
|
-
|
|
16
|
-
return (
|
|
17
|
-
<Sonner
|
|
18
|
-
theme={theme as ToasterProps["theme"]}
|
|
19
|
-
className="toaster group"
|
|
20
|
-
icons={{
|
|
21
|
-
success: <CircleCheckIcon className="size-4" />,
|
|
22
|
-
info: <InfoIcon className="size-4" />,
|
|
23
|
-
warning: <TriangleAlertIcon className="size-4" />,
|
|
24
|
-
error: <OctagonXIcon className="size-4" />,
|
|
25
|
-
loading: <Loader2Icon className="size-4 animate-spin" />,
|
|
26
|
-
}}
|
|
27
|
-
style={
|
|
28
|
-
{
|
|
29
|
-
"--normal-bg": "var(--popover)",
|
|
30
|
-
"--normal-text": "var(--popover-foreground)",
|
|
31
|
-
"--normal-border": "var(--border)",
|
|
32
|
-
"--border-radius": "var(--radius)",
|
|
33
|
-
} as React.CSSProperties
|
|
34
|
-
}
|
|
35
|
-
toastOptions={{
|
|
36
|
-
classNames: {
|
|
37
|
-
toast: "cn-toast",
|
|
38
|
-
},
|
|
39
|
-
}}
|
|
40
|
-
{...props}
|
|
41
|
-
/>
|
|
42
|
-
)
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
export { Toaster }
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./spinner"
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { cn } from "../../lib/utils"
|
|
2
|
-
import { Loader2Icon } from "lucide-react"
|
|
3
|
-
|
|
4
|
-
function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
|
|
5
|
-
return (
|
|
6
|
-
<Loader2Icon
|
|
7
|
-
role="status"
|
|
8
|
-
aria-label="Loading"
|
|
9
|
-
className={cn("size-4 animate-spin", className)}
|
|
10
|
-
{...props}
|
|
11
|
-
/>
|
|
12
|
-
)
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
export { Spinner }
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./switch"
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
|
|
2
|
-
|
|
3
|
-
import { cn } from "../../lib/utils"
|
|
4
|
-
|
|
5
|
-
function Switch({
|
|
6
|
-
className,
|
|
7
|
-
size = "default",
|
|
8
|
-
...props
|
|
9
|
-
}: SwitchPrimitive.Root.Props & {
|
|
10
|
-
size?: "sm" | "default"
|
|
11
|
-
}) {
|
|
12
|
-
return (
|
|
13
|
-
<SwitchPrimitive.Root
|
|
14
|
-
data-slot="switch"
|
|
15
|
-
data-size={size}
|
|
16
|
-
className={cn(
|
|
17
|
-
"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
|
|
18
|
-
className
|
|
19
|
-
)}
|
|
20
|
-
{...props}
|
|
21
|
-
>
|
|
22
|
-
<SwitchPrimitive.Thumb
|
|
23
|
-
data-slot="switch-thumb"
|
|
24
|
-
className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] rtl:group-data-[size=default]/switch:data-checked:-translate-x-[calc(100%-2px)] rtl:group-data-[size=sm]/switch:data-checked:-translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 rtl:group-data-[size=default]/switch:data-unchecked:-translate-x-0 rtl:group-data-[size=sm]/switch:data-unchecked:-translate-x-0 dark:data-unchecked:bg-foreground"
|
|
25
|
-
/>
|
|
26
|
-
</SwitchPrimitive.Root>
|
|
27
|
-
)
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
export { Switch }
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./table"
|
|
@@ -1,116 +0,0 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import * as React from "react"
|
|
4
|
-
|
|
5
|
-
import { cn } from "../../lib/utils"
|
|
6
|
-
|
|
7
|
-
function Table({ className, ...props }: React.ComponentProps<"table">) {
|
|
8
|
-
return (
|
|
9
|
-
<div
|
|
10
|
-
data-slot="table-container"
|
|
11
|
-
className="relative w-full overflow-x-auto"
|
|
12
|
-
>
|
|
13
|
-
<table
|
|
14
|
-
data-slot="table"
|
|
15
|
-
className={cn("w-full caption-bottom text-sm", className)}
|
|
16
|
-
{...props}
|
|
17
|
-
/>
|
|
18
|
-
</div>
|
|
19
|
-
)
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
|
|
23
|
-
return (
|
|
24
|
-
<thead
|
|
25
|
-
data-slot="table-header"
|
|
26
|
-
className={cn("[&_tr]:border-b", className)}
|
|
27
|
-
{...props}
|
|
28
|
-
/>
|
|
29
|
-
)
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
|
|
33
|
-
return (
|
|
34
|
-
<tbody
|
|
35
|
-
data-slot="table-body"
|
|
36
|
-
className={cn("[&_tr:last-child]:border-0", className)}
|
|
37
|
-
{...props}
|
|
38
|
-
/>
|
|
39
|
-
)
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
|
|
43
|
-
return (
|
|
44
|
-
<tfoot
|
|
45
|
-
data-slot="table-footer"
|
|
46
|
-
className={cn(
|
|
47
|
-
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
|
|
48
|
-
className
|
|
49
|
-
)}
|
|
50
|
-
{...props}
|
|
51
|
-
/>
|
|
52
|
-
)
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
|
|
56
|
-
return (
|
|
57
|
-
<tr
|
|
58
|
-
data-slot="table-row"
|
|
59
|
-
className={cn(
|
|
60
|
-
"border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
|
|
61
|
-
className
|
|
62
|
-
)}
|
|
63
|
-
{...props}
|
|
64
|
-
/>
|
|
65
|
-
)
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
function TableHead({ className, ...props }: React.ComponentProps<"th">) {
|
|
69
|
-
return (
|
|
70
|
-
<th
|
|
71
|
-
data-slot="table-head"
|
|
72
|
-
className={cn(
|
|
73
|
-
"h-12 px-3 text-start align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pe-0",
|
|
74
|
-
className
|
|
75
|
-
)}
|
|
76
|
-
{...props}
|
|
77
|
-
/>
|
|
78
|
-
)
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
function TableCell({ className, ...props }: React.ComponentProps<"td">) {
|
|
82
|
-
return (
|
|
83
|
-
<td
|
|
84
|
-
data-slot="table-cell"
|
|
85
|
-
className={cn(
|
|
86
|
-
"p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0",
|
|
87
|
-
className
|
|
88
|
-
)}
|
|
89
|
-
{...props}
|
|
90
|
-
/>
|
|
91
|
-
)
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
function TableCaption({
|
|
95
|
-
className,
|
|
96
|
-
...props
|
|
97
|
-
}: React.ComponentProps<"caption">) {
|
|
98
|
-
return (
|
|
99
|
-
<caption
|
|
100
|
-
data-slot="table-caption"
|
|
101
|
-
className={cn("mt-4 text-sm text-muted-foreground", className)}
|
|
102
|
-
{...props}
|
|
103
|
-
/>
|
|
104
|
-
)
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
export {
|
|
108
|
-
Table,
|
|
109
|
-
TableHeader,
|
|
110
|
-
TableBody,
|
|
111
|
-
TableFooter,
|
|
112
|
-
TableHead,
|
|
113
|
-
TableRow,
|
|
114
|
-
TableCell,
|
|
115
|
-
TableCaption,
|
|
116
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./tabs"
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
|
|
2
|
-
import { cva, type VariantProps } from "class-variance-authority"
|
|
3
|
-
|
|
4
|
-
import { cn } from "../../lib/utils"
|
|
5
|
-
|
|
6
|
-
function Tabs({
|
|
7
|
-
className,
|
|
8
|
-
orientation = "horizontal",
|
|
9
|
-
...props
|
|
10
|
-
}: TabsPrimitive.Root.Props) {
|
|
11
|
-
return (
|
|
12
|
-
<TabsPrimitive.Root
|
|
13
|
-
data-slot="tabs"
|
|
14
|
-
data-orientation={orientation}
|
|
15
|
-
className={cn(
|
|
16
|
-
"group/tabs flex gap-2 data-horizontal:flex-col",
|
|
17
|
-
className
|
|
18
|
-
)}
|
|
19
|
-
{...props}
|
|
20
|
-
/>
|
|
21
|
-
)
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
const tabsListVariants = cva(
|
|
25
|
-
"group/tabs-list inline-flex w-fit items-center justify-center rounded-4xl p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col group-data-vertical/tabs:rounded-2xl data-[variant=line]:rounded-none",
|
|
26
|
-
{
|
|
27
|
-
variants: {
|
|
28
|
-
variant: {
|
|
29
|
-
default: "bg-muted",
|
|
30
|
-
line: "gap-1 bg-transparent",
|
|
31
|
-
},
|
|
32
|
-
},
|
|
33
|
-
defaultVariants: {
|
|
34
|
-
variant: "default",
|
|
35
|
-
},
|
|
36
|
-
}
|
|
37
|
-
)
|
|
38
|
-
|
|
39
|
-
function TabsList({
|
|
40
|
-
className,
|
|
41
|
-
variant = "default",
|
|
42
|
-
...props
|
|
43
|
-
}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
|
|
44
|
-
return (
|
|
45
|
-
<TabsPrimitive.List
|
|
46
|
-
data-slot="tabs-list"
|
|
47
|
-
data-variant={variant}
|
|
48
|
-
className={cn(tabsListVariants({ variant }), className)}
|
|
49
|
-
{...props}
|
|
50
|
-
/>
|
|
51
|
-
)
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
|
|
55
|
-
return (
|
|
56
|
-
<TabsPrimitive.Tab
|
|
57
|
-
data-slot="tabs-trigger"
|
|
58
|
-
className={cn(
|
|
59
|
-
"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:px-2.5 group-data-vertical/tabs:py-1.5 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
60
|
-
"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
|
|
61
|
-
"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
|
|
62
|
-
"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-end-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
|
|
63
|
-
className
|
|
64
|
-
)}
|
|
65
|
-
{...props}
|
|
66
|
-
/>
|
|
67
|
-
)
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
|
|
71
|
-
return (
|
|
72
|
-
<TabsPrimitive.Panel
|
|
73
|
-
data-slot="tabs-content"
|
|
74
|
-
className={cn("flex-1 text-sm outline-none", className)}
|
|
75
|
-
{...props}
|
|
76
|
-
/>
|
|
77
|
-
)
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./textarea"
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
|
|
3
|
-
import { cn } from "../../lib/utils"
|
|
4
|
-
|
|
5
|
-
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
|
6
|
-
return (
|
|
7
|
-
<textarea
|
|
8
|
-
data-slot="textarea"
|
|
9
|
-
className={cn(
|
|
10
|
-
"flex field-sizing-content min-h-16 w-full resize-none rounded-xl border border-input bg-input/30 px-3 py-3 text-base transition-colors outline-none placeholder:text-muted-foreground 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 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
|
|
11
|
-
className
|
|
12
|
-
)}
|
|
13
|
-
{...props}
|
|
14
|
-
/>
|
|
15
|
-
)
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export { Textarea }
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./toggle"
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
|
|
4
|
-
import { cva, type VariantProps } from "class-variance-authority"
|
|
5
|
-
|
|
6
|
-
import { cn } from "../../lib/utils"
|
|
7
|
-
|
|
8
|
-
const toggleVariants = cva(
|
|
9
|
-
"group/toggle inline-flex items-center justify-center gap-1 rounded-4xl text-sm font-medium whitespace-nowrap transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
10
|
-
{
|
|
11
|
-
variants: {
|
|
12
|
-
variant: {
|
|
13
|
-
default: "bg-transparent",
|
|
14
|
-
outline: "border border-input bg-transparent hover:bg-muted",
|
|
15
|
-
},
|
|
16
|
-
size: {
|
|
17
|
-
default:
|
|
18
|
-
"h-9 min-w-9 px-3 has-data-[icon=inline-end]:pe-2.5 has-data-[icon=inline-start]:ps-2.5",
|
|
19
|
-
sm: "h-8 min-w-8 px-3 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
|
|
20
|
-
lg: "h-10 min-w-10 px-4 has-data-[icon=inline-end]:pe-3 has-data-[icon=inline-start]:ps-3",
|
|
21
|
-
},
|
|
22
|
-
},
|
|
23
|
-
defaultVariants: {
|
|
24
|
-
variant: "default",
|
|
25
|
-
size: "default",
|
|
26
|
-
},
|
|
27
|
-
}
|
|
28
|
-
)
|
|
29
|
-
|
|
30
|
-
function Toggle({
|
|
31
|
-
className,
|
|
32
|
-
variant = "default",
|
|
33
|
-
size = "default",
|
|
34
|
-
...props
|
|
35
|
-
}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
|
|
36
|
-
return (
|
|
37
|
-
<TogglePrimitive
|
|
38
|
-
data-slot="toggle"
|
|
39
|
-
className={cn(toggleVariants({ variant, size, className }))}
|
|
40
|
-
{...props}
|
|
41
|
-
/>
|
|
42
|
-
)
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
export { Toggle, toggleVariants }
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./toggle-group"
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
|
|
3
|
-
import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"
|
|
4
|
-
import { type VariantProps } from "class-variance-authority"
|
|
5
|
-
|
|
6
|
-
import { cn } from "../../lib/utils"
|
|
7
|
-
import { toggleVariants } from "../toggle"
|
|
8
|
-
|
|
9
|
-
const ToggleGroupContext = React.createContext<
|
|
10
|
-
VariantProps<typeof toggleVariants> & {
|
|
11
|
-
spacing?: number
|
|
12
|
-
orientation?: "horizontal" | "vertical"
|
|
13
|
-
}
|
|
14
|
-
>({
|
|
15
|
-
size: "default",
|
|
16
|
-
variant: "default",
|
|
17
|
-
spacing: 2,
|
|
18
|
-
orientation: "horizontal",
|
|
19
|
-
})
|
|
20
|
-
|
|
21
|
-
function ToggleGroup({
|
|
22
|
-
className,
|
|
23
|
-
variant,
|
|
24
|
-
size,
|
|
25
|
-
spacing = 2,
|
|
26
|
-
orientation = "horizontal",
|
|
27
|
-
children,
|
|
28
|
-
...props
|
|
29
|
-
}: ToggleGroupPrimitive.Props &
|
|
30
|
-
VariantProps<typeof toggleVariants> & {
|
|
31
|
-
spacing?: number
|
|
32
|
-
orientation?: "horizontal" | "vertical"
|
|
33
|
-
}) {
|
|
34
|
-
return (
|
|
35
|
-
<ToggleGroupPrimitive
|
|
36
|
-
data-slot="toggle-group"
|
|
37
|
-
data-variant={variant}
|
|
38
|
-
data-size={size}
|
|
39
|
-
data-spacing={spacing}
|
|
40
|
-
data-orientation={orientation}
|
|
41
|
-
style={{ "--gap": spacing } as React.CSSProperties}
|
|
42
|
-
className={cn(
|
|
43
|
-
"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[spacing=0]:data-[variant=outline]:rounded-4xl data-vertical:flex-col data-vertical:items-stretch",
|
|
44
|
-
className
|
|
45
|
-
)}
|
|
46
|
-
{...props}
|
|
47
|
-
>
|
|
48
|
-
<ToggleGroupContext.Provider
|
|
49
|
-
value={{ variant, size, spacing, orientation }}
|
|
50
|
-
>
|
|
51
|
-
{children}
|
|
52
|
-
</ToggleGroupContext.Provider>
|
|
53
|
-
</ToggleGroupPrimitive>
|
|
54
|
-
)
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
function ToggleGroupItem({
|
|
58
|
-
className,
|
|
59
|
-
children,
|
|
60
|
-
variant = "default",
|
|
61
|
-
size = "default",
|
|
62
|
-
...props
|
|
63
|
-
}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
|
|
64
|
-
const context = React.useContext(ToggleGroupContext)
|
|
65
|
-
|
|
66
|
-
return (
|
|
67
|
-
<TogglePrimitive
|
|
68
|
-
data-slot="toggle-group-item"
|
|
69
|
-
data-variant={context.variant || variant}
|
|
70
|
-
data-size={context.size || size}
|
|
71
|
-
data-spacing={context.spacing}
|
|
72
|
-
className={cn(
|
|
73
|
-
"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-3 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pe-2.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:ps-2.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-s-3xl group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-3xl group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-e-3xl group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-3xl data-[state=on]:bg-muted group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-s-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-s group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
|
|
74
|
-
toggleVariants({
|
|
75
|
-
variant: context.variant || variant,
|
|
76
|
-
size: context.size || size,
|
|
77
|
-
}),
|
|
78
|
-
className
|
|
79
|
-
)}
|
|
80
|
-
{...props}
|
|
81
|
-
>
|
|
82
|
-
{children}
|
|
83
|
-
</TogglePrimitive>
|
|
84
|
-
)
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
export { ToggleGroup, ToggleGroupItem }
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./tooltip"
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
|
|
2
|
-
|
|
3
|
-
import { cn } from "../../lib/utils"
|
|
4
|
-
|
|
5
|
-
function TooltipProvider({
|
|
6
|
-
delay = 0,
|
|
7
|
-
...props
|
|
8
|
-
}: TooltipPrimitive.Provider.Props) {
|
|
9
|
-
return (
|
|
10
|
-
<TooltipPrimitive.Provider
|
|
11
|
-
data-slot="tooltip-provider"
|
|
12
|
-
delay={delay}
|
|
13
|
-
{...props}
|
|
14
|
-
/>
|
|
15
|
-
)
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
|
|
19
|
-
return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
|
|
23
|
-
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
function TooltipContent({
|
|
27
|
-
className,
|
|
28
|
-
side = "top",
|
|
29
|
-
sideOffset = 4,
|
|
30
|
-
align = "center",
|
|
31
|
-
alignOffset = 0,
|
|
32
|
-
children,
|
|
33
|
-
...props
|
|
34
|
-
}: TooltipPrimitive.Popup.Props &
|
|
35
|
-
Pick<
|
|
36
|
-
TooltipPrimitive.Positioner.Props,
|
|
37
|
-
"align" | "alignOffset" | "side" | "sideOffset"
|
|
38
|
-
>) {
|
|
39
|
-
return (
|
|
40
|
-
<TooltipPrimitive.Portal>
|
|
41
|
-
<TooltipPrimitive.Positioner
|
|
42
|
-
align={align}
|
|
43
|
-
alignOffset={alignOffset}
|
|
44
|
-
side={side}
|
|
45
|
-
sideOffset={sideOffset}
|
|
46
|
-
className="isolate z-50"
|
|
47
|
-
>
|
|
48
|
-
<TooltipPrimitive.Popup
|
|
49
|
-
data-slot="tooltip-content"
|
|
50
|
-
className={cn(
|
|
51
|
-
"z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-2xl bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 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-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-4xl data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 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",
|
|
52
|
-
className
|
|
53
|
-
)}
|
|
54
|
-
{...props}
|
|
55
|
-
>
|
|
56
|
-
{children}
|
|
57
|
-
<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:-start-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:translate-x-[1.5px] data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:-end-1 data-[side=inline-start]:top-1/2! data-[side=inline-start]:translate-x-[-1.5px] data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:translate-x-[-1.5px] data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:translate-x-[1.5px] data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5 rtl:data-[side=inline-end]:-translate-x-[1.5px] rtl:data-[side=inline-start]:-translate-x-[-1.5px] rtl:data-[side=left]:-translate-x-[-1.5px] rtl:data-[side=right]:-translate-x-[1.5px]" />
|
|
58
|
-
</TooltipPrimitive.Popup>
|
|
59
|
-
</TooltipPrimitive.Positioner>
|
|
60
|
-
</TooltipPrimitive.Portal>
|
|
61
|
-
)
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
|
package/src/hooks/use-mobile.ts
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
|
|
3
|
-
const MOBILE_BREAKPOINT = 768
|
|
4
|
-
|
|
5
|
-
export function useIsMobile() {
|
|
6
|
-
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(() => {
|
|
7
|
-
if (typeof window === "undefined") return undefined
|
|
8
|
-
return window.innerWidth < MOBILE_BREAKPOINT
|
|
9
|
-
})
|
|
10
|
-
|
|
11
|
-
React.useEffect(() => {
|
|
12
|
-
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
|
|
13
|
-
const onChange = () => {
|
|
14
|
-
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
|
15
|
-
}
|
|
16
|
-
mql.addEventListener("change", onChange)
|
|
17
|
-
return () => mql.removeEventListener("change", onChange)
|
|
18
|
-
}, [])
|
|
19
|
-
|
|
20
|
-
return !!isMobile
|
|
21
|
-
}
|