vite-shadcn-ui-cli 1.0.0
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/README.md +52 -0
- package/components.json +21 -0
- package/eslint.config.js +28 -0
- package/index.html +13 -0
- package/package.json +55 -0
- package/postcss.config.js +6 -0
- package/public/vite.svg +1 -0
- package/src/App.css +5 -0
- package/src/App.tsx +14 -0
- package/src/assets/react.svg +1 -0
- package/src/components/ui/accordion.tsx +58 -0
- package/src/components/ui/alert-dialog.tsx +141 -0
- package/src/components/ui/alert.tsx +59 -0
- package/src/components/ui/aspect-ratio.tsx +7 -0
- package/src/components/ui/avatar.tsx +50 -0
- package/src/components/ui/badge.tsx +36 -0
- package/src/components/ui/breadcrumb.tsx +115 -0
- package/src/components/ui/button.tsx +57 -0
- package/src/components/ui/calendar.tsx +66 -0
- package/src/components/ui/card.tsx +79 -0
- package/src/components/ui/carousel.tsx +262 -0
- package/src/components/ui/chart.tsx +365 -0
- package/src/components/ui/checkbox.tsx +30 -0
- package/src/components/ui/collapsible.tsx +11 -0
- package/src/components/ui/command.tsx +155 -0
- package/src/components/ui/context-menu.tsx +200 -0
- package/src/components/ui/dialog.tsx +122 -0
- package/src/components/ui/drawer.tsx +118 -0
- package/src/components/ui/dropdown-menu.tsx +200 -0
- package/src/components/ui/form.tsx +178 -0
- package/src/components/ui/hover-card.tsx +29 -0
- package/src/components/ui/input-otp.tsx +71 -0
- package/src/components/ui/input.tsx +25 -0
- package/src/components/ui/label.tsx +26 -0
- package/src/components/ui/menubar.tsx +236 -0
- package/src/components/ui/navigation-menu.tsx +128 -0
- package/src/components/ui/pagination.tsx +67 -0
- package/src/components/ui/popover.tsx +31 -0
- package/src/components/ui/progress.tsx +28 -0
- package/src/components/ui/radio-group.tsx +44 -0
- package/src/components/ui/resizable.tsx +45 -0
- package/src/components/ui/scroll-area.tsx +48 -0
- package/src/components/ui/select.tsx +160 -0
- package/src/components/ui/separator.tsx +31 -0
- package/src/components/ui/sheet.tsx +140 -0
- package/src/components/ui/skeleton.tsx +15 -0
- package/src/components/ui/slider.tsx +28 -0
- package/src/components/ui/sonner.tsx +31 -0
- package/src/components/ui/switch.tsx +29 -0
- package/src/components/ui/table.tsx +117 -0
- package/src/components/ui/tabs.tsx +55 -0
- package/src/components/ui/textarea.tsx +24 -0
- package/src/components/ui/toast.tsx +129 -0
- package/src/components/ui/toaster.tsx +35 -0
- package/src/components/ui/toggle-group.tsx +61 -0
- package/src/components/ui/toggle.tsx +45 -0
- package/src/components/ui/tooltip.tsx +30 -0
- package/src/index.css +93 -0
- package/src/lib/utils.ts +6 -0
- package/src/main.tsx +10 -0
- package/src/vite-env.d.ts +1 -0
- package/tailwind.config.js +57 -0
- package/tsconfig.app.json +32 -0
- package/tsconfig.json +17 -0
- package/tsconfig.node.json +24 -0
- package/vite.config.ts +12 -0
@@ -0,0 +1,67 @@
|
|
1
|
+
import * as React from 'react'
|
2
|
+
import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'
|
3
|
+
|
4
|
+
import { cn } from '@/lib/utils'
|
5
|
+
import { ButtonProps, buttonVariants } from '@/components/ui/button'
|
6
|
+
|
7
|
+
const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
|
8
|
+
<nav role="navigation" aria-label="pagination" className={cn('mx-auto flex w-full justify-center', className)} {...props} />
|
9
|
+
)
|
10
|
+
Pagination.displayName = 'Pagination'
|
11
|
+
|
12
|
+
const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(({ className, ...props }, ref) => (
|
13
|
+
<ul ref={ref} className={cn('flex flex-row items-center gap-1', className)} {...props} />
|
14
|
+
))
|
15
|
+
PaginationContent.displayName = 'PaginationContent'
|
16
|
+
|
17
|
+
const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(({ className, ...props }, ref) => (
|
18
|
+
<li ref={ref} className={cn('', className)} {...props} />
|
19
|
+
))
|
20
|
+
PaginationItem.displayName = 'PaginationItem'
|
21
|
+
|
22
|
+
type PaginationLinkProps = {
|
23
|
+
isActive?: boolean
|
24
|
+
} & Pick<ButtonProps, 'size'> &
|
25
|
+
React.ComponentProps<'a'>
|
26
|
+
|
27
|
+
const PaginationLink = ({ className, isActive, size = 'icon', ...props }: PaginationLinkProps) => (
|
28
|
+
<a
|
29
|
+
aria-current={isActive ? 'page' : undefined}
|
30
|
+
className={cn(
|
31
|
+
buttonVariants({
|
32
|
+
variant: isActive ? 'outline' : 'ghost',
|
33
|
+
size,
|
34
|
+
}),
|
35
|
+
'hover:cursor-pointer',
|
36
|
+
className
|
37
|
+
)}
|
38
|
+
{...props}
|
39
|
+
/>
|
40
|
+
)
|
41
|
+
PaginationLink.displayName = 'PaginationLink'
|
42
|
+
|
43
|
+
const PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
|
44
|
+
<PaginationLink aria-label="Go to previous page" size="default" className={cn('gap-1 pl-2.5', className)} {...props}>
|
45
|
+
<ChevronLeft className="h-4 w-4" />
|
46
|
+
<span>Previous</span>
|
47
|
+
</PaginationLink>
|
48
|
+
)
|
49
|
+
PaginationPrevious.displayName = 'PaginationPrevious'
|
50
|
+
|
51
|
+
const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
|
52
|
+
<PaginationLink aria-label="Go to next page" size="default" className={cn('gap-1 pr-2.5', className)} {...props}>
|
53
|
+
<span>Next</span>
|
54
|
+
<ChevronRight className="h-4 w-4" />
|
55
|
+
</PaginationLink>
|
56
|
+
)
|
57
|
+
PaginationNext.displayName = 'PaginationNext'
|
58
|
+
|
59
|
+
const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (
|
60
|
+
<span aria-hidden className={cn('flex h-9 w-9 items-center justify-center', className)} {...props}>
|
61
|
+
<MoreHorizontal className="h-4 w-4" />
|
62
|
+
<span className="sr-only">More pages</span>
|
63
|
+
</span>
|
64
|
+
)
|
65
|
+
PaginationEllipsis.displayName = 'PaginationEllipsis'
|
66
|
+
|
67
|
+
export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious }
|
@@ -0,0 +1,31 @@
|
|
1
|
+
"use client"
|
2
|
+
|
3
|
+
import * as React from "react"
|
4
|
+
import * as PopoverPrimitive from "@radix-ui/react-popover"
|
5
|
+
|
6
|
+
import { cn } from "@/lib/utils"
|
7
|
+
|
8
|
+
const Popover = PopoverPrimitive.Root
|
9
|
+
|
10
|
+
const PopoverTrigger = PopoverPrimitive.Trigger
|
11
|
+
|
12
|
+
const PopoverContent = React.forwardRef<
|
13
|
+
React.ElementRef<typeof PopoverPrimitive.Content>,
|
14
|
+
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
|
15
|
+
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
|
16
|
+
<PopoverPrimitive.Portal>
|
17
|
+
<PopoverPrimitive.Content
|
18
|
+
ref={ref}
|
19
|
+
align={align}
|
20
|
+
sideOffset={sideOffset}
|
21
|
+
className={cn(
|
22
|
+
"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
23
|
+
className
|
24
|
+
)}
|
25
|
+
{...props}
|
26
|
+
/>
|
27
|
+
</PopoverPrimitive.Portal>
|
28
|
+
))
|
29
|
+
PopoverContent.displayName = PopoverPrimitive.Content.displayName
|
30
|
+
|
31
|
+
export { Popover, PopoverTrigger, PopoverContent }
|
@@ -0,0 +1,28 @@
|
|
1
|
+
"use client"
|
2
|
+
|
3
|
+
import * as React from "react"
|
4
|
+
import * as ProgressPrimitive from "@radix-ui/react-progress"
|
5
|
+
|
6
|
+
import { cn } from "@/lib/utils"
|
7
|
+
|
8
|
+
const Progress = React.forwardRef<
|
9
|
+
React.ElementRef<typeof ProgressPrimitive.Root>,
|
10
|
+
React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
|
11
|
+
>(({ className, value, ...props }, ref) => (
|
12
|
+
<ProgressPrimitive.Root
|
13
|
+
ref={ref}
|
14
|
+
className={cn(
|
15
|
+
"relative h-4 w-full overflow-hidden rounded-full bg-secondary",
|
16
|
+
className
|
17
|
+
)}
|
18
|
+
{...props}
|
19
|
+
>
|
20
|
+
<ProgressPrimitive.Indicator
|
21
|
+
className="h-full w-full flex-1 bg-primary transition-all"
|
22
|
+
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
23
|
+
/>
|
24
|
+
</ProgressPrimitive.Root>
|
25
|
+
))
|
26
|
+
Progress.displayName = ProgressPrimitive.Root.displayName
|
27
|
+
|
28
|
+
export { Progress }
|
@@ -0,0 +1,44 @@
|
|
1
|
+
"use client"
|
2
|
+
|
3
|
+
import * as React from "react"
|
4
|
+
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
|
5
|
+
import { Circle } from "lucide-react"
|
6
|
+
|
7
|
+
import { cn } from "@/lib/utils"
|
8
|
+
|
9
|
+
const RadioGroup = React.forwardRef<
|
10
|
+
React.ElementRef<typeof RadioGroupPrimitive.Root>,
|
11
|
+
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
|
12
|
+
>(({ className, ...props }, ref) => {
|
13
|
+
return (
|
14
|
+
<RadioGroupPrimitive.Root
|
15
|
+
className={cn("grid gap-2", className)}
|
16
|
+
{...props}
|
17
|
+
ref={ref}
|
18
|
+
/>
|
19
|
+
)
|
20
|
+
})
|
21
|
+
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
|
22
|
+
|
23
|
+
const RadioGroupItem = React.forwardRef<
|
24
|
+
React.ElementRef<typeof RadioGroupPrimitive.Item>,
|
25
|
+
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
|
26
|
+
>(({ className, ...props }, ref) => {
|
27
|
+
return (
|
28
|
+
<RadioGroupPrimitive.Item
|
29
|
+
ref={ref}
|
30
|
+
className={cn(
|
31
|
+
"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
32
|
+
className
|
33
|
+
)}
|
34
|
+
{...props}
|
35
|
+
>
|
36
|
+
<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
|
37
|
+
<Circle className="h-2.5 w-2.5 fill-current text-current" />
|
38
|
+
</RadioGroupPrimitive.Indicator>
|
39
|
+
</RadioGroupPrimitive.Item>
|
40
|
+
)
|
41
|
+
})
|
42
|
+
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
|
43
|
+
|
44
|
+
export { RadioGroup, RadioGroupItem }
|
@@ -0,0 +1,45 @@
|
|
1
|
+
"use client"
|
2
|
+
|
3
|
+
import { GripVertical } from "lucide-react"
|
4
|
+
import * as ResizablePrimitive from "react-resizable-panels"
|
5
|
+
|
6
|
+
import { cn } from "@/lib/utils"
|
7
|
+
|
8
|
+
const ResizablePanelGroup = ({
|
9
|
+
className,
|
10
|
+
...props
|
11
|
+
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
|
12
|
+
<ResizablePrimitive.PanelGroup
|
13
|
+
className={cn(
|
14
|
+
"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
|
15
|
+
className
|
16
|
+
)}
|
17
|
+
{...props}
|
18
|
+
/>
|
19
|
+
)
|
20
|
+
|
21
|
+
const ResizablePanel = ResizablePrimitive.Panel
|
22
|
+
|
23
|
+
const ResizableHandle = ({
|
24
|
+
withHandle,
|
25
|
+
className,
|
26
|
+
...props
|
27
|
+
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
|
28
|
+
withHandle?: boolean
|
29
|
+
}) => (
|
30
|
+
<ResizablePrimitive.PanelResizeHandle
|
31
|
+
className={cn(
|
32
|
+
"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
|
33
|
+
className
|
34
|
+
)}
|
35
|
+
{...props}
|
36
|
+
>
|
37
|
+
{withHandle && (
|
38
|
+
<div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
|
39
|
+
<GripVertical className="h-2.5 w-2.5" />
|
40
|
+
</div>
|
41
|
+
)}
|
42
|
+
</ResizablePrimitive.PanelResizeHandle>
|
43
|
+
)
|
44
|
+
|
45
|
+
export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
|
@@ -0,0 +1,48 @@
|
|
1
|
+
"use client"
|
2
|
+
|
3
|
+
import * as React from "react"
|
4
|
+
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
|
5
|
+
|
6
|
+
import { cn } from "@/lib/utils"
|
7
|
+
|
8
|
+
const ScrollArea = React.forwardRef<
|
9
|
+
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
|
10
|
+
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
|
11
|
+
>(({ className, children, ...props }, ref) => (
|
12
|
+
<ScrollAreaPrimitive.Root
|
13
|
+
ref={ref}
|
14
|
+
className={cn("relative overflow-hidden", className)}
|
15
|
+
{...props}
|
16
|
+
>
|
17
|
+
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
|
18
|
+
{children}
|
19
|
+
</ScrollAreaPrimitive.Viewport>
|
20
|
+
<ScrollBar />
|
21
|
+
<ScrollAreaPrimitive.Corner />
|
22
|
+
</ScrollAreaPrimitive.Root>
|
23
|
+
))
|
24
|
+
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
|
25
|
+
|
26
|
+
const ScrollBar = React.forwardRef<
|
27
|
+
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
|
28
|
+
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
|
29
|
+
>(({ className, orientation = "vertical", ...props }, ref) => (
|
30
|
+
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
31
|
+
ref={ref}
|
32
|
+
orientation={orientation}
|
33
|
+
className={cn(
|
34
|
+
"flex touch-none select-none transition-colors",
|
35
|
+
orientation === "vertical" &&
|
36
|
+
"h-full w-2.5 border-l border-l-transparent p-[1px]",
|
37
|
+
orientation === "horizontal" &&
|
38
|
+
"h-2.5 flex-col border-t border-t-transparent p-[1px]",
|
39
|
+
className
|
40
|
+
)}
|
41
|
+
{...props}
|
42
|
+
>
|
43
|
+
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
|
44
|
+
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
45
|
+
))
|
46
|
+
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
|
47
|
+
|
48
|
+
export { ScrollArea, ScrollBar }
|
@@ -0,0 +1,160 @@
|
|
1
|
+
"use client"
|
2
|
+
|
3
|
+
import * as React from "react"
|
4
|
+
import * as SelectPrimitive from "@radix-ui/react-select"
|
5
|
+
import { Check, ChevronDown, ChevronUp } from "lucide-react"
|
6
|
+
|
7
|
+
import { cn } from "@/lib/utils"
|
8
|
+
|
9
|
+
const Select = SelectPrimitive.Root
|
10
|
+
|
11
|
+
const SelectGroup = SelectPrimitive.Group
|
12
|
+
|
13
|
+
const SelectValue = SelectPrimitive.Value
|
14
|
+
|
15
|
+
const SelectTrigger = React.forwardRef<
|
16
|
+
React.ElementRef<typeof SelectPrimitive.Trigger>,
|
17
|
+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
|
18
|
+
>(({ className, children, ...props }, ref) => (
|
19
|
+
<SelectPrimitive.Trigger
|
20
|
+
ref={ref}
|
21
|
+
className={cn(
|
22
|
+
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground placeholder:opacity-30 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
23
|
+
className
|
24
|
+
)}
|
25
|
+
{...props}
|
26
|
+
>
|
27
|
+
{children}
|
28
|
+
<SelectPrimitive.Icon asChild>
|
29
|
+
<ChevronDown className="h-4 w-4 opacity-50" />
|
30
|
+
</SelectPrimitive.Icon>
|
31
|
+
</SelectPrimitive.Trigger>
|
32
|
+
))
|
33
|
+
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
|
34
|
+
|
35
|
+
const SelectScrollUpButton = React.forwardRef<
|
36
|
+
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
|
37
|
+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
|
38
|
+
>(({ className, ...props }, ref) => (
|
39
|
+
<SelectPrimitive.ScrollUpButton
|
40
|
+
ref={ref}
|
41
|
+
className={cn(
|
42
|
+
"flex cursor-default items-center justify-center py-1",
|
43
|
+
className
|
44
|
+
)}
|
45
|
+
{...props}
|
46
|
+
>
|
47
|
+
<ChevronUp className="h-4 w-4" />
|
48
|
+
</SelectPrimitive.ScrollUpButton>
|
49
|
+
))
|
50
|
+
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
|
51
|
+
|
52
|
+
const SelectScrollDownButton = React.forwardRef<
|
53
|
+
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
|
54
|
+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
|
55
|
+
>(({ className, ...props }, ref) => (
|
56
|
+
<SelectPrimitive.ScrollDownButton
|
57
|
+
ref={ref}
|
58
|
+
className={cn(
|
59
|
+
"flex cursor-default items-center justify-center py-1",
|
60
|
+
className
|
61
|
+
)}
|
62
|
+
{...props}
|
63
|
+
>
|
64
|
+
<ChevronDown className="h-4 w-4" />
|
65
|
+
</SelectPrimitive.ScrollDownButton>
|
66
|
+
))
|
67
|
+
SelectScrollDownButton.displayName =
|
68
|
+
SelectPrimitive.ScrollDownButton.displayName
|
69
|
+
|
70
|
+
const SelectContent = React.forwardRef<
|
71
|
+
React.ElementRef<typeof SelectPrimitive.Content>,
|
72
|
+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
|
73
|
+
>(({ className, children, position = "popper", ...props }, ref) => (
|
74
|
+
<SelectPrimitive.Portal>
|
75
|
+
<SelectPrimitive.Content
|
76
|
+
ref={ref}
|
77
|
+
className={cn(
|
78
|
+
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
79
|
+
position === "popper" &&
|
80
|
+
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
81
|
+
className
|
82
|
+
)}
|
83
|
+
position={position}
|
84
|
+
{...props}
|
85
|
+
>
|
86
|
+
<SelectScrollUpButton />
|
87
|
+
<SelectPrimitive.Viewport
|
88
|
+
className={cn(
|
89
|
+
"p-1",
|
90
|
+
position === "popper" &&
|
91
|
+
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
92
|
+
)}
|
93
|
+
>
|
94
|
+
{children}
|
95
|
+
</SelectPrimitive.Viewport>
|
96
|
+
<SelectScrollDownButton />
|
97
|
+
</SelectPrimitive.Content>
|
98
|
+
</SelectPrimitive.Portal>
|
99
|
+
))
|
100
|
+
SelectContent.displayName = SelectPrimitive.Content.displayName
|
101
|
+
|
102
|
+
const SelectLabel = React.forwardRef<
|
103
|
+
React.ElementRef<typeof SelectPrimitive.Label>,
|
104
|
+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
|
105
|
+
>(({ className, ...props }, ref) => (
|
106
|
+
<SelectPrimitive.Label
|
107
|
+
ref={ref}
|
108
|
+
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
|
109
|
+
{...props}
|
110
|
+
/>
|
111
|
+
))
|
112
|
+
SelectLabel.displayName = SelectPrimitive.Label.displayName
|
113
|
+
|
114
|
+
const SelectItem = React.forwardRef<
|
115
|
+
React.ElementRef<typeof SelectPrimitive.Item>,
|
116
|
+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
|
117
|
+
>(({ className, children, ...props }, ref) => (
|
118
|
+
<SelectPrimitive.Item
|
119
|
+
ref={ref}
|
120
|
+
className={cn(
|
121
|
+
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
122
|
+
className
|
123
|
+
)}
|
124
|
+
{...props}
|
125
|
+
>
|
126
|
+
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
127
|
+
<SelectPrimitive.ItemIndicator>
|
128
|
+
<Check className="h-4 w-4" />
|
129
|
+
</SelectPrimitive.ItemIndicator>
|
130
|
+
</span>
|
131
|
+
|
132
|
+
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
133
|
+
</SelectPrimitive.Item>
|
134
|
+
))
|
135
|
+
SelectItem.displayName = SelectPrimitive.Item.displayName
|
136
|
+
|
137
|
+
const SelectSeparator = React.forwardRef<
|
138
|
+
React.ElementRef<typeof SelectPrimitive.Separator>,
|
139
|
+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
|
140
|
+
>(({ className, ...props }, ref) => (
|
141
|
+
<SelectPrimitive.Separator
|
142
|
+
ref={ref}
|
143
|
+
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
144
|
+
{...props}
|
145
|
+
/>
|
146
|
+
))
|
147
|
+
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
|
148
|
+
|
149
|
+
export {
|
150
|
+
Select,
|
151
|
+
SelectGroup,
|
152
|
+
SelectValue,
|
153
|
+
SelectTrigger,
|
154
|
+
SelectContent,
|
155
|
+
SelectLabel,
|
156
|
+
SelectItem,
|
157
|
+
SelectSeparator,
|
158
|
+
SelectScrollUpButton,
|
159
|
+
SelectScrollDownButton,
|
160
|
+
}
|
@@ -0,0 +1,31 @@
|
|
1
|
+
"use client"
|
2
|
+
|
3
|
+
import * as React from "react"
|
4
|
+
import * as SeparatorPrimitive from "@radix-ui/react-separator"
|
5
|
+
|
6
|
+
import { cn } from "@/lib/utils"
|
7
|
+
|
8
|
+
const Separator = React.forwardRef<
|
9
|
+
React.ElementRef<typeof SeparatorPrimitive.Root>,
|
10
|
+
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
|
11
|
+
>(
|
12
|
+
(
|
13
|
+
{ className, orientation = "horizontal", decorative = true, ...props },
|
14
|
+
ref
|
15
|
+
) => (
|
16
|
+
<SeparatorPrimitive.Root
|
17
|
+
ref={ref}
|
18
|
+
decorative={decorative}
|
19
|
+
orientation={orientation}
|
20
|
+
className={cn(
|
21
|
+
"shrink-0 bg-border",
|
22
|
+
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
|
23
|
+
className
|
24
|
+
)}
|
25
|
+
{...props}
|
26
|
+
/>
|
27
|
+
)
|
28
|
+
)
|
29
|
+
Separator.displayName = SeparatorPrimitive.Root.displayName
|
30
|
+
|
31
|
+
export { Separator }
|
@@ -0,0 +1,140 @@
|
|
1
|
+
"use client"
|
2
|
+
|
3
|
+
import * as React from "react"
|
4
|
+
import * as SheetPrimitive from "@radix-ui/react-dialog"
|
5
|
+
import { cva, type VariantProps } from "class-variance-authority"
|
6
|
+
import { X } from "lucide-react"
|
7
|
+
|
8
|
+
import { cn } from "@/lib/utils"
|
9
|
+
|
10
|
+
const Sheet = SheetPrimitive.Root
|
11
|
+
|
12
|
+
const SheetTrigger = SheetPrimitive.Trigger
|
13
|
+
|
14
|
+
const SheetClose = SheetPrimitive.Close
|
15
|
+
|
16
|
+
const SheetPortal = SheetPrimitive.Portal
|
17
|
+
|
18
|
+
const SheetOverlay = React.forwardRef<
|
19
|
+
React.ElementRef<typeof SheetPrimitive.Overlay>,
|
20
|
+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
|
21
|
+
>(({ className, ...props }, ref) => (
|
22
|
+
<SheetPrimitive.Overlay
|
23
|
+
className={cn(
|
24
|
+
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
25
|
+
className
|
26
|
+
)}
|
27
|
+
{...props}
|
28
|
+
ref={ref}
|
29
|
+
/>
|
30
|
+
))
|
31
|
+
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
|
32
|
+
|
33
|
+
const sheetVariants = cva(
|
34
|
+
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
35
|
+
{
|
36
|
+
variants: {
|
37
|
+
side: {
|
38
|
+
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
39
|
+
bottom:
|
40
|
+
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
41
|
+
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
|
42
|
+
right:
|
43
|
+
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
|
44
|
+
},
|
45
|
+
},
|
46
|
+
defaultVariants: {
|
47
|
+
side: "right",
|
48
|
+
},
|
49
|
+
}
|
50
|
+
)
|
51
|
+
|
52
|
+
interface SheetContentProps
|
53
|
+
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
|
54
|
+
VariantProps<typeof sheetVariants> {}
|
55
|
+
|
56
|
+
const SheetContent = React.forwardRef<
|
57
|
+
React.ElementRef<typeof SheetPrimitive.Content>,
|
58
|
+
SheetContentProps
|
59
|
+
>(({ side = "right", className, children, ...props }, ref) => (
|
60
|
+
<SheetPortal>
|
61
|
+
<SheetOverlay />
|
62
|
+
<SheetPrimitive.Content
|
63
|
+
ref={ref}
|
64
|
+
className={cn(sheetVariants({ side }), className)}
|
65
|
+
{...props}
|
66
|
+
>
|
67
|
+
{children}
|
68
|
+
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
|
69
|
+
<X className="h-4 w-4" />
|
70
|
+
<span className="sr-only">Close</span>
|
71
|
+
</SheetPrimitive.Close>
|
72
|
+
</SheetPrimitive.Content>
|
73
|
+
</SheetPortal>
|
74
|
+
))
|
75
|
+
SheetContent.displayName = SheetPrimitive.Content.displayName
|
76
|
+
|
77
|
+
const SheetHeader = ({
|
78
|
+
className,
|
79
|
+
...props
|
80
|
+
}: React.HTMLAttributes<HTMLDivElement>) => (
|
81
|
+
<div
|
82
|
+
className={cn(
|
83
|
+
"flex flex-col space-y-2 text-center sm:text-left",
|
84
|
+
className
|
85
|
+
)}
|
86
|
+
{...props}
|
87
|
+
/>
|
88
|
+
)
|
89
|
+
SheetHeader.displayName = "SheetHeader"
|
90
|
+
|
91
|
+
const SheetFooter = ({
|
92
|
+
className,
|
93
|
+
...props
|
94
|
+
}: React.HTMLAttributes<HTMLDivElement>) => (
|
95
|
+
<div
|
96
|
+
className={cn(
|
97
|
+
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
98
|
+
className
|
99
|
+
)}
|
100
|
+
{...props}
|
101
|
+
/>
|
102
|
+
)
|
103
|
+
SheetFooter.displayName = "SheetFooter"
|
104
|
+
|
105
|
+
const SheetTitle = React.forwardRef<
|
106
|
+
React.ElementRef<typeof SheetPrimitive.Title>,
|
107
|
+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
|
108
|
+
>(({ className, ...props }, ref) => (
|
109
|
+
<SheetPrimitive.Title
|
110
|
+
ref={ref}
|
111
|
+
className={cn("text-lg font-semibold text-foreground", className)}
|
112
|
+
{...props}
|
113
|
+
/>
|
114
|
+
))
|
115
|
+
SheetTitle.displayName = SheetPrimitive.Title.displayName
|
116
|
+
|
117
|
+
const SheetDescription = React.forwardRef<
|
118
|
+
React.ElementRef<typeof SheetPrimitive.Description>,
|
119
|
+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
|
120
|
+
>(({ className, ...props }, ref) => (
|
121
|
+
<SheetPrimitive.Description
|
122
|
+
ref={ref}
|
123
|
+
className={cn("text-sm text-muted-foreground", className)}
|
124
|
+
{...props}
|
125
|
+
/>
|
126
|
+
))
|
127
|
+
SheetDescription.displayName = SheetPrimitive.Description.displayName
|
128
|
+
|
129
|
+
export {
|
130
|
+
Sheet,
|
131
|
+
SheetPortal,
|
132
|
+
SheetOverlay,
|
133
|
+
SheetTrigger,
|
134
|
+
SheetClose,
|
135
|
+
SheetContent,
|
136
|
+
SheetHeader,
|
137
|
+
SheetFooter,
|
138
|
+
SheetTitle,
|
139
|
+
SheetDescription,
|
140
|
+
}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import { cn } from "@/lib/utils"
|
2
|
+
|
3
|
+
function Skeleton({
|
4
|
+
className,
|
5
|
+
...props
|
6
|
+
}: React.HTMLAttributes<HTMLDivElement>) {
|
7
|
+
return (
|
8
|
+
<div
|
9
|
+
className={cn("animate-pulse rounded-md bg-muted", className)}
|
10
|
+
{...props}
|
11
|
+
/>
|
12
|
+
)
|
13
|
+
}
|
14
|
+
|
15
|
+
export { Skeleton }
|
@@ -0,0 +1,28 @@
|
|
1
|
+
"use client"
|
2
|
+
|
3
|
+
import * as React from "react"
|
4
|
+
import * as SliderPrimitive from "@radix-ui/react-slider"
|
5
|
+
|
6
|
+
import { cn } from "@/lib/utils"
|
7
|
+
|
8
|
+
const Slider = React.forwardRef<
|
9
|
+
React.ElementRef<typeof SliderPrimitive.Root>,
|
10
|
+
React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
|
11
|
+
>(({ className, ...props }, ref) => (
|
12
|
+
<SliderPrimitive.Root
|
13
|
+
ref={ref}
|
14
|
+
className={cn(
|
15
|
+
"relative flex w-full touch-none select-none items-center",
|
16
|
+
className
|
17
|
+
)}
|
18
|
+
{...props}
|
19
|
+
>
|
20
|
+
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
|
21
|
+
<SliderPrimitive.Range className="absolute h-full bg-primary" />
|
22
|
+
</SliderPrimitive.Track>
|
23
|
+
<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
|
24
|
+
</SliderPrimitive.Root>
|
25
|
+
))
|
26
|
+
Slider.displayName = SliderPrimitive.Root.displayName
|
27
|
+
|
28
|
+
export { Slider }
|
@@ -0,0 +1,31 @@
|
|
1
|
+
"use client"
|
2
|
+
|
3
|
+
import { useTheme } from "next-themes"
|
4
|
+
import { Toaster as Sonner } from "sonner"
|
5
|
+
|
6
|
+
type ToasterProps = React.ComponentProps<typeof Sonner>
|
7
|
+
|
8
|
+
const Toaster = ({ ...props }: ToasterProps) => {
|
9
|
+
const { theme = "system" } = useTheme()
|
10
|
+
|
11
|
+
return (
|
12
|
+
<Sonner
|
13
|
+
theme={theme as ToasterProps["theme"]}
|
14
|
+
className="toaster group"
|
15
|
+
toastOptions={{
|
16
|
+
classNames: {
|
17
|
+
toast:
|
18
|
+
"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
|
19
|
+
description: "group-[.toast]:text-muted-foreground",
|
20
|
+
actionButton:
|
21
|
+
"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
|
22
|
+
cancelButton:
|
23
|
+
"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
|
24
|
+
},
|
25
|
+
}}
|
26
|
+
{...props}
|
27
|
+
/>
|
28
|
+
)
|
29
|
+
}
|
30
|
+
|
31
|
+
export { Toaster }
|