@ichaingo/ui 1.2.0 → 1.2.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/package.json +5 -1
- package/.babelrc +0 -12
- package/components.json +0 -21
- package/eslint.config.mjs +0 -12
- package/postcss.config.js +0 -6
- package/src/components/ui/accordion.tsx +0 -64
- package/src/components/ui/alert-dialog.tsx +0 -155
- package/src/components/ui/alert.tsx +0 -66
- package/src/components/ui/aspect-ratio.tsx +0 -9
- package/src/components/ui/avatar.tsx +0 -51
- package/src/components/ui/badge.tsx +0 -46
- package/src/components/ui/breadcrumb.tsx +0 -109
- package/src/components/ui/button.tsx +0 -59
- package/src/components/ui/calendar.tsx +0 -211
- package/src/components/ui/card.tsx +0 -92
- package/src/components/ui/carousel.tsx +0 -239
- package/src/components/ui/checkbox.tsx +0 -30
- package/src/components/ui/collapsible.tsx +0 -31
- package/src/components/ui/command.tsx +0 -182
- package/src/components/ui/context-menu.tsx +0 -250
- package/src/components/ui/dialog.tsx +0 -141
- package/src/components/ui/dropdown-menu.tsx +0 -255
- package/src/components/ui/form.tsx +0 -165
- package/src/components/ui/hover-card.tsx +0 -42
- package/src/components/ui/input.tsx +0 -21
- package/src/components/ui/label.tsx +0 -24
- package/src/components/ui/menubar.tsx +0 -274
- package/src/components/ui/navigation-menu.tsx +0 -168
- package/src/components/ui/pagination.tsx +0 -125
- package/src/components/ui/popover.tsx +0 -46
- package/src/components/ui/progress.tsx +0 -29
- package/src/components/ui/radio-group.tsx +0 -43
- package/src/components/ui/resizable.tsx +0 -54
- package/src/components/ui/scroll-area.tsx +0 -56
- package/src/components/ui/select.tsx +0 -183
- package/src/components/ui/separator.tsx +0 -26
- package/src/components/ui/sheet.tsx +0 -137
- package/src/components/ui/skeleton.tsx +0 -13
- package/src/components/ui/slider.tsx +0 -61
- package/src/components/ui/sonner.tsx +0 -23
- package/src/components/ui/switch.tsx +0 -29
- package/src/components/ui/table.tsx +0 -114
- package/src/components/ui/tabs.tsx +0 -64
- package/src/components/ui/textarea.tsx +0 -18
- package/src/components/ui/toggle-group.tsx +0 -71
- package/src/components/ui/toggle.tsx +0 -45
- package/src/components/ui/tooltip.tsx +0 -59
- package/src/index.ts +0 -46
- package/src/lib/utils.ts +0 -6
- package/src/style.css +0 -0
- package/tailwind.config.js +0 -52
- package/tsconfig.json +0 -19
- package/tsconfig.lib.json +0 -54
- package/tsconfig.spec.json +0 -32
- package/vite.config.ts +0 -136
package/package.json
CHANGED
package/.babelrc
DELETED
package/components.json
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://ui.shadcn.com/schema.json",
|
|
3
|
-
"style": "new-york",
|
|
4
|
-
"rsc": false,
|
|
5
|
-
"tsx": true,
|
|
6
|
-
"tailwind": {
|
|
7
|
-
"config": "tailwind.config.js",
|
|
8
|
-
"css": "src/styles.css",
|
|
9
|
-
"baseColor": "neutral",
|
|
10
|
-
"cssVariables": true,
|
|
11
|
-
"prefix": ""
|
|
12
|
-
},
|
|
13
|
-
"aliases": {
|
|
14
|
-
"components": "@/components",
|
|
15
|
-
"utils": "@/lib/utils",
|
|
16
|
-
"ui": "@/components/ui",
|
|
17
|
-
"lib": "@/lib",
|
|
18
|
-
"hooks": "@/hooks"
|
|
19
|
-
},
|
|
20
|
-
"iconLibrary": "lucide"
|
|
21
|
-
}
|
package/eslint.config.mjs
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import nx from '@nx/eslint-plugin';
|
|
2
|
-
import baseConfig from '../../eslint.config.mjs';
|
|
3
|
-
|
|
4
|
-
export default [
|
|
5
|
-
...baseConfig,
|
|
6
|
-
...nx.configs['flat/react'],
|
|
7
|
-
{
|
|
8
|
-
files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
|
|
9
|
-
// Override or add rules here
|
|
10
|
-
rules: {},
|
|
11
|
-
},
|
|
12
|
-
];
|
package/postcss.config.js
DELETED
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
import * as AccordionPrimitive from "@radix-ui/react-accordion"
|
|
3
|
-
import { ChevronDownIcon } from "lucide-react"
|
|
4
|
-
|
|
5
|
-
import { cn } from "@/lib/utils"
|
|
6
|
-
|
|
7
|
-
function Accordion({
|
|
8
|
-
...props
|
|
9
|
-
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
|
|
10
|
-
return <AccordionPrimitive.Root data-slot="accordion" {...props} />
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
function AccordionItem({
|
|
14
|
-
className,
|
|
15
|
-
...props
|
|
16
|
-
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
|
|
17
|
-
return (
|
|
18
|
-
<AccordionPrimitive.Item
|
|
19
|
-
data-slot="accordion-item"
|
|
20
|
-
className={cn("border-b last:border-b-0", className)}
|
|
21
|
-
{...props}
|
|
22
|
-
/>
|
|
23
|
-
)
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
function AccordionTrigger({
|
|
27
|
-
className,
|
|
28
|
-
children,
|
|
29
|
-
...props
|
|
30
|
-
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
|
|
31
|
-
return (
|
|
32
|
-
<AccordionPrimitive.Header className="flex">
|
|
33
|
-
<AccordionPrimitive.Trigger
|
|
34
|
-
data-slot="accordion-trigger"
|
|
35
|
-
className={cn(
|
|
36
|
-
"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
|
|
37
|
-
className
|
|
38
|
-
)}
|
|
39
|
-
{...props}
|
|
40
|
-
>
|
|
41
|
-
{children}
|
|
42
|
-
<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
|
|
43
|
-
</AccordionPrimitive.Trigger>
|
|
44
|
-
</AccordionPrimitive.Header>
|
|
45
|
-
)
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
function AccordionContent({
|
|
49
|
-
className,
|
|
50
|
-
children,
|
|
51
|
-
...props
|
|
52
|
-
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
|
|
53
|
-
return (
|
|
54
|
-
<AccordionPrimitive.Content
|
|
55
|
-
data-slot="accordion-content"
|
|
56
|
-
className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
|
|
57
|
-
{...props}
|
|
58
|
-
>
|
|
59
|
-
<div className={cn("pt-0 pb-4", className)}>{children}</div>
|
|
60
|
-
</AccordionPrimitive.Content>
|
|
61
|
-
)
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
|
|
@@ -1,155 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
|
|
3
|
-
|
|
4
|
-
import { cn } from "@/lib/utils"
|
|
5
|
-
import { buttonVariants } from "@/components/ui/button"
|
|
6
|
-
|
|
7
|
-
function AlertDialog({
|
|
8
|
-
...props
|
|
9
|
-
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
|
|
10
|
-
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
function AlertDialogTrigger({
|
|
14
|
-
...props
|
|
15
|
-
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
|
|
16
|
-
return (
|
|
17
|
-
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
|
|
18
|
-
)
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
function AlertDialogPortal({
|
|
22
|
-
...props
|
|
23
|
-
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
|
|
24
|
-
return (
|
|
25
|
-
<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
|
|
26
|
-
)
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
function AlertDialogOverlay({
|
|
30
|
-
className,
|
|
31
|
-
...props
|
|
32
|
-
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
|
|
33
|
-
return (
|
|
34
|
-
<AlertDialogPrimitive.Overlay
|
|
35
|
-
data-slot="alert-dialog-overlay"
|
|
36
|
-
className={cn(
|
|
37
|
-
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
|
38
|
-
className
|
|
39
|
-
)}
|
|
40
|
-
{...props}
|
|
41
|
-
/>
|
|
42
|
-
)
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
function AlertDialogContent({
|
|
46
|
-
className,
|
|
47
|
-
...props
|
|
48
|
-
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
|
|
49
|
-
return (
|
|
50
|
-
<AlertDialogPortal>
|
|
51
|
-
<AlertDialogOverlay />
|
|
52
|
-
<AlertDialogPrimitive.Content
|
|
53
|
-
data-slot="alert-dialog-content"
|
|
54
|
-
className={cn(
|
|
55
|
-
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
|
56
|
-
className
|
|
57
|
-
)}
|
|
58
|
-
{...props}
|
|
59
|
-
/>
|
|
60
|
-
</AlertDialogPortal>
|
|
61
|
-
)
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
function AlertDialogHeader({
|
|
65
|
-
className,
|
|
66
|
-
...props
|
|
67
|
-
}: React.ComponentProps<"div">) {
|
|
68
|
-
return (
|
|
69
|
-
<div
|
|
70
|
-
data-slot="alert-dialog-header"
|
|
71
|
-
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
|
72
|
-
{...props}
|
|
73
|
-
/>
|
|
74
|
-
)
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
function AlertDialogFooter({
|
|
78
|
-
className,
|
|
79
|
-
...props
|
|
80
|
-
}: React.ComponentProps<"div">) {
|
|
81
|
-
return (
|
|
82
|
-
<div
|
|
83
|
-
data-slot="alert-dialog-footer"
|
|
84
|
-
className={cn(
|
|
85
|
-
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
|
86
|
-
className
|
|
87
|
-
)}
|
|
88
|
-
{...props}
|
|
89
|
-
/>
|
|
90
|
-
)
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
function AlertDialogTitle({
|
|
94
|
-
className,
|
|
95
|
-
...props
|
|
96
|
-
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
|
|
97
|
-
return (
|
|
98
|
-
<AlertDialogPrimitive.Title
|
|
99
|
-
data-slot="alert-dialog-title"
|
|
100
|
-
className={cn("text-lg font-semibold", className)}
|
|
101
|
-
{...props}
|
|
102
|
-
/>
|
|
103
|
-
)
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
function AlertDialogDescription({
|
|
107
|
-
className,
|
|
108
|
-
...props
|
|
109
|
-
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
|
|
110
|
-
return (
|
|
111
|
-
<AlertDialogPrimitive.Description
|
|
112
|
-
data-slot="alert-dialog-description"
|
|
113
|
-
className={cn("text-muted-foreground text-sm", className)}
|
|
114
|
-
{...props}
|
|
115
|
-
/>
|
|
116
|
-
)
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
function AlertDialogAction({
|
|
120
|
-
className,
|
|
121
|
-
...props
|
|
122
|
-
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
|
|
123
|
-
return (
|
|
124
|
-
<AlertDialogPrimitive.Action
|
|
125
|
-
className={cn(buttonVariants(), className)}
|
|
126
|
-
{...props}
|
|
127
|
-
/>
|
|
128
|
-
)
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
function AlertDialogCancel({
|
|
132
|
-
className,
|
|
133
|
-
...props
|
|
134
|
-
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
|
|
135
|
-
return (
|
|
136
|
-
<AlertDialogPrimitive.Cancel
|
|
137
|
-
className={cn(buttonVariants({ variant: "outline" }), className)}
|
|
138
|
-
{...props}
|
|
139
|
-
/>
|
|
140
|
-
)
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
export {
|
|
144
|
-
AlertDialog,
|
|
145
|
-
AlertDialogPortal,
|
|
146
|
-
AlertDialogOverlay,
|
|
147
|
-
AlertDialogTrigger,
|
|
148
|
-
AlertDialogContent,
|
|
149
|
-
AlertDialogHeader,
|
|
150
|
-
AlertDialogFooter,
|
|
151
|
-
AlertDialogTitle,
|
|
152
|
-
AlertDialogDescription,
|
|
153
|
-
AlertDialogAction,
|
|
154
|
-
AlertDialogCancel,
|
|
155
|
-
}
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
import { cva, type VariantProps } from "class-variance-authority"
|
|
3
|
-
|
|
4
|
-
import { cn } from "@/lib/utils"
|
|
5
|
-
|
|
6
|
-
const alertVariants = cva(
|
|
7
|
-
"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
|
|
8
|
-
{
|
|
9
|
-
variants: {
|
|
10
|
-
variant: {
|
|
11
|
-
default: "bg-card text-card-foreground",
|
|
12
|
-
destructive:
|
|
13
|
-
"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
|
|
14
|
-
},
|
|
15
|
-
},
|
|
16
|
-
defaultVariants: {
|
|
17
|
-
variant: "default",
|
|
18
|
-
},
|
|
19
|
-
}
|
|
20
|
-
)
|
|
21
|
-
|
|
22
|
-
function Alert({
|
|
23
|
-
className,
|
|
24
|
-
variant,
|
|
25
|
-
...props
|
|
26
|
-
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
|
|
27
|
-
return (
|
|
28
|
-
<div
|
|
29
|
-
data-slot="alert"
|
|
30
|
-
role="alert"
|
|
31
|
-
className={cn(alertVariants({ variant }), className)}
|
|
32
|
-
{...props}
|
|
33
|
-
/>
|
|
34
|
-
)
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
|
|
38
|
-
return (
|
|
39
|
-
<div
|
|
40
|
-
data-slot="alert-title"
|
|
41
|
-
className={cn(
|
|
42
|
-
"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
|
|
43
|
-
className
|
|
44
|
-
)}
|
|
45
|
-
{...props}
|
|
46
|
-
/>
|
|
47
|
-
)
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
function AlertDescription({
|
|
51
|
-
className,
|
|
52
|
-
...props
|
|
53
|
-
}: React.ComponentProps<"div">) {
|
|
54
|
-
return (
|
|
55
|
-
<div
|
|
56
|
-
data-slot="alert-description"
|
|
57
|
-
className={cn(
|
|
58
|
-
"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
|
|
59
|
-
className
|
|
60
|
-
)}
|
|
61
|
-
{...props}
|
|
62
|
-
/>
|
|
63
|
-
)
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
export { Alert, AlertTitle, AlertDescription }
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
|
|
2
|
-
|
|
3
|
-
function AspectRatio({
|
|
4
|
-
...props
|
|
5
|
-
}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
|
|
6
|
-
return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
export { AspectRatio }
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
import * as AvatarPrimitive from "@radix-ui/react-avatar"
|
|
3
|
-
|
|
4
|
-
import { cn } from "@/lib/utils"
|
|
5
|
-
|
|
6
|
-
function Avatar({
|
|
7
|
-
className,
|
|
8
|
-
...props
|
|
9
|
-
}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
|
|
10
|
-
return (
|
|
11
|
-
<AvatarPrimitive.Root
|
|
12
|
-
data-slot="avatar"
|
|
13
|
-
className={cn(
|
|
14
|
-
"relative flex size-8 shrink-0 overflow-hidden rounded-full",
|
|
15
|
-
className
|
|
16
|
-
)}
|
|
17
|
-
{...props}
|
|
18
|
-
/>
|
|
19
|
-
)
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
function AvatarImage({
|
|
23
|
-
className,
|
|
24
|
-
...props
|
|
25
|
-
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
|
|
26
|
-
return (
|
|
27
|
-
<AvatarPrimitive.Image
|
|
28
|
-
data-slot="avatar-image"
|
|
29
|
-
className={cn("aspect-square size-full", className)}
|
|
30
|
-
{...props}
|
|
31
|
-
/>
|
|
32
|
-
)
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
function AvatarFallback({
|
|
36
|
-
className,
|
|
37
|
-
...props
|
|
38
|
-
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
|
|
39
|
-
return (
|
|
40
|
-
<AvatarPrimitive.Fallback
|
|
41
|
-
data-slot="avatar-fallback"
|
|
42
|
-
className={cn(
|
|
43
|
-
"bg-muted flex size-full items-center justify-center rounded-full",
|
|
44
|
-
className
|
|
45
|
-
)}
|
|
46
|
-
{...props}
|
|
47
|
-
/>
|
|
48
|
-
)
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
export { Avatar, AvatarImage, AvatarFallback }
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
import { Slot } from "@radix-ui/react-slot"
|
|
3
|
-
import { cva, type VariantProps } from "class-variance-authority"
|
|
4
|
-
|
|
5
|
-
import { cn } from "@/lib/utils"
|
|
6
|
-
|
|
7
|
-
const badgeVariants = cva(
|
|
8
|
-
"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
|
9
|
-
{
|
|
10
|
-
variants: {
|
|
11
|
-
variant: {
|
|
12
|
-
default:
|
|
13
|
-
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
|
14
|
-
secondary:
|
|
15
|
-
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
|
16
|
-
destructive:
|
|
17
|
-
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
18
|
-
outline:
|
|
19
|
-
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
|
20
|
-
},
|
|
21
|
-
},
|
|
22
|
-
defaultVariants: {
|
|
23
|
-
variant: "default",
|
|
24
|
-
},
|
|
25
|
-
}
|
|
26
|
-
)
|
|
27
|
-
|
|
28
|
-
function Badge({
|
|
29
|
-
className,
|
|
30
|
-
variant,
|
|
31
|
-
asChild = false,
|
|
32
|
-
...props
|
|
33
|
-
}: React.ComponentProps<"span"> &
|
|
34
|
-
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
|
35
|
-
const Comp = asChild ? Slot : "span"
|
|
36
|
-
|
|
37
|
-
return (
|
|
38
|
-
<Comp
|
|
39
|
-
data-slot="badge"
|
|
40
|
-
className={cn(badgeVariants({ variant }), className)}
|
|
41
|
-
{...props}
|
|
42
|
-
/>
|
|
43
|
-
)
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
export { Badge, badgeVariants }
|
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
import { Slot } from "@radix-ui/react-slot"
|
|
3
|
-
import { ChevronRight, MoreHorizontal } from "lucide-react"
|
|
4
|
-
|
|
5
|
-
import { cn } from "@/lib/utils"
|
|
6
|
-
|
|
7
|
-
function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
|
|
8
|
-
return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
|
|
12
|
-
return (
|
|
13
|
-
<ol
|
|
14
|
-
data-slot="breadcrumb-list"
|
|
15
|
-
className={cn(
|
|
16
|
-
"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
|
|
17
|
-
className
|
|
18
|
-
)}
|
|
19
|
-
{...props}
|
|
20
|
-
/>
|
|
21
|
-
)
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
|
|
25
|
-
return (
|
|
26
|
-
<li
|
|
27
|
-
data-slot="breadcrumb-item"
|
|
28
|
-
className={cn("inline-flex items-center gap-1.5", className)}
|
|
29
|
-
{...props}
|
|
30
|
-
/>
|
|
31
|
-
)
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
function BreadcrumbLink({
|
|
35
|
-
asChild,
|
|
36
|
-
className,
|
|
37
|
-
...props
|
|
38
|
-
}: React.ComponentProps<"a"> & {
|
|
39
|
-
asChild?: boolean
|
|
40
|
-
}) {
|
|
41
|
-
const Comp = asChild ? Slot : "a"
|
|
42
|
-
|
|
43
|
-
return (
|
|
44
|
-
<Comp
|
|
45
|
-
data-slot="breadcrumb-link"
|
|
46
|
-
className={cn("hover:text-foreground transition-colors", className)}
|
|
47
|
-
{...props}
|
|
48
|
-
/>
|
|
49
|
-
)
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
|
|
53
|
-
return (
|
|
54
|
-
<span
|
|
55
|
-
data-slot="breadcrumb-page"
|
|
56
|
-
role="link"
|
|
57
|
-
aria-disabled="true"
|
|
58
|
-
aria-current="page"
|
|
59
|
-
className={cn("text-foreground font-normal", className)}
|
|
60
|
-
{...props}
|
|
61
|
-
/>
|
|
62
|
-
)
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
function BreadcrumbSeparator({
|
|
66
|
-
children,
|
|
67
|
-
className,
|
|
68
|
-
...props
|
|
69
|
-
}: React.ComponentProps<"li">) {
|
|
70
|
-
return (
|
|
71
|
-
<li
|
|
72
|
-
data-slot="breadcrumb-separator"
|
|
73
|
-
role="presentation"
|
|
74
|
-
aria-hidden="true"
|
|
75
|
-
className={cn("[&>svg]:size-3.5", className)}
|
|
76
|
-
{...props}
|
|
77
|
-
>
|
|
78
|
-
{children ?? <ChevronRight />}
|
|
79
|
-
</li>
|
|
80
|
-
)
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
function BreadcrumbEllipsis({
|
|
84
|
-
className,
|
|
85
|
-
...props
|
|
86
|
-
}: React.ComponentProps<"span">) {
|
|
87
|
-
return (
|
|
88
|
-
<span
|
|
89
|
-
data-slot="breadcrumb-ellipsis"
|
|
90
|
-
role="presentation"
|
|
91
|
-
aria-hidden="true"
|
|
92
|
-
className={cn("flex size-9 items-center justify-center", className)}
|
|
93
|
-
{...props}
|
|
94
|
-
>
|
|
95
|
-
<MoreHorizontal className="size-4" />
|
|
96
|
-
<span className="sr-only">More</span>
|
|
97
|
-
</span>
|
|
98
|
-
)
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
export {
|
|
102
|
-
Breadcrumb,
|
|
103
|
-
BreadcrumbList,
|
|
104
|
-
BreadcrumbItem,
|
|
105
|
-
BreadcrumbLink,
|
|
106
|
-
BreadcrumbPage,
|
|
107
|
-
BreadcrumbSeparator,
|
|
108
|
-
BreadcrumbEllipsis,
|
|
109
|
-
}
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
import { Slot } from "@radix-ui/react-slot"
|
|
3
|
-
import { cva, type VariantProps } from "class-variance-authority"
|
|
4
|
-
|
|
5
|
-
import { cn } from "@/lib/utils"
|
|
6
|
-
|
|
7
|
-
const buttonVariants = cva(
|
|
8
|
-
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
9
|
-
{
|
|
10
|
-
variants: {
|
|
11
|
-
variant: {
|
|
12
|
-
default:
|
|
13
|
-
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
|
14
|
-
destructive:
|
|
15
|
-
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
16
|
-
outline:
|
|
17
|
-
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
|
18
|
-
secondary:
|
|
19
|
-
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
|
20
|
-
ghost:
|
|
21
|
-
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
|
22
|
-
link: "text-primary underline-offset-4 hover:underline",
|
|
23
|
-
},
|
|
24
|
-
size: {
|
|
25
|
-
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
26
|
-
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
|
27
|
-
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
|
28
|
-
icon: "size-9",
|
|
29
|
-
},
|
|
30
|
-
},
|
|
31
|
-
defaultVariants: {
|
|
32
|
-
variant: "default",
|
|
33
|
-
size: "default",
|
|
34
|
-
},
|
|
35
|
-
}
|
|
36
|
-
)
|
|
37
|
-
|
|
38
|
-
function Button({
|
|
39
|
-
className,
|
|
40
|
-
variant,
|
|
41
|
-
size,
|
|
42
|
-
asChild = false,
|
|
43
|
-
...props
|
|
44
|
-
}: React.ComponentProps<"button"> &
|
|
45
|
-
VariantProps<typeof buttonVariants> & {
|
|
46
|
-
asChild?: boolean
|
|
47
|
-
}) {
|
|
48
|
-
const Comp = asChild ? Slot : "button"
|
|
49
|
-
|
|
50
|
-
return (
|
|
51
|
-
<Comp
|
|
52
|
-
data-slot="button"
|
|
53
|
-
className={cn(buttonVariants({ variant, size, className }))}
|
|
54
|
-
{...props}
|
|
55
|
-
/>
|
|
56
|
-
)
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
export { Button, buttonVariants }
|