@windrun-huaiin/base-ui 3.3.0 → 3.5.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.
Files changed (60) hide show
  1. package/dist/index.d.mts +2 -38
  2. package/dist/index.d.ts +2 -38
  3. package/dist/index.js +187 -4263
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +184 -4037
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/ui/index.d.mts +37 -711
  8. package/dist/ui/index.d.ts +37 -711
  9. package/dist/ui/index.js +172 -4248
  10. package/dist/ui/index.js.map +1 -1
  11. package/dist/ui/index.mjs +171 -4024
  12. package/dist/ui/index.mjs.map +1 -1
  13. package/package.json +2 -36
  14. package/src/ui/index.ts +2 -48
  15. package/src/ui/accordion.tsx +0 -58
  16. package/src/ui/alert.tsx +0 -59
  17. package/src/ui/aspect-ratio.tsx +0 -7
  18. package/src/ui/avatar.tsx +0 -50
  19. package/src/ui/badge.tsx +0 -36
  20. package/src/ui/breadcrumb.tsx +0 -115
  21. package/src/ui/calendar.tsx +0 -66
  22. package/src/ui/card.tsx +0 -79
  23. package/src/ui/carousel.tsx +0 -262
  24. package/src/ui/chart.tsx +0 -365
  25. package/src/ui/checkbox.tsx +0 -30
  26. package/src/ui/collapsible.tsx +0 -11
  27. package/src/ui/command.tsx +0 -153
  28. package/src/ui/context-menu.tsx +0 -200
  29. package/src/ui/dialog.tsx +0 -122
  30. package/src/ui/drawer.tsx +0 -118
  31. package/src/ui/form.tsx +0 -178
  32. package/src/ui/hover-card.tsx +0 -29
  33. package/src/ui/input-otp.tsx +0 -71
  34. package/src/ui/input.tsx +0 -22
  35. package/src/ui/menubar.tsx +0 -236
  36. package/src/ui/navigation-menu.tsx +0 -128
  37. package/src/ui/pagination.tsx +0 -117
  38. package/src/ui/popover.tsx +0 -31
  39. package/src/ui/progress.tsx +0 -28
  40. package/src/ui/radio-group.tsx +0 -44
  41. package/src/ui/resizable.tsx +0 -45
  42. package/src/ui/scroll-area.tsx +0 -48
  43. package/src/ui/select.tsx +0 -160
  44. package/src/ui/separator.tsx +0 -31
  45. package/src/ui/sheet.tsx +0 -140
  46. package/src/ui/sidebar.tsx +0 -763
  47. package/src/ui/skeleton.tsx +0 -15
  48. package/src/ui/slider.tsx +0 -28
  49. package/src/ui/sonner.tsx +0 -31
  50. package/src/ui/switch.tsx +0 -29
  51. package/src/ui/table.tsx +0 -117
  52. package/src/ui/tabs.tsx +0 -55
  53. package/src/ui/textarea.tsx +0 -22
  54. package/src/ui/toast.tsx +0 -129
  55. package/src/ui/toaster.tsx +0 -35
  56. package/src/ui/toggle-group.tsx +0 -61
  57. package/src/ui/toggle.tsx +0 -45
  58. package/src/ui/tooltip.tsx +0 -30
  59. package/src/ui/use-mobile.tsx +0 -19
  60. package/src/ui/use-toast.ts +0 -194
@@ -1,117 +0,0 @@
1
- import * as React from "react"
2
- import { globalLucideIcons as icons } from "@base-ui/components/global-icon"
3
-
4
- import { cn } from "@lib/utils"
5
- import { ButtonProps, buttonVariants } from "@base-ui/ui/button"
6
-
7
- const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
8
- <nav
9
- role="navigation"
10
- aria-label="pagination"
11
- className={cn("mx-auto flex w-full justify-center", className)}
12
- {...props}
13
- />
14
- )
15
- Pagination.displayName = "Pagination"
16
-
17
- const PaginationContent = React.forwardRef<
18
- HTMLUListElement,
19
- React.ComponentProps<"ul">
20
- >(({ className, ...props }, ref) => (
21
- <ul
22
- ref={ref}
23
- className={cn("flex flex-row items-center gap-1", className)}
24
- {...props}
25
- />
26
- ))
27
- PaginationContent.displayName = "PaginationContent"
28
-
29
- const PaginationItem = React.forwardRef<
30
- HTMLLIElement,
31
- React.ComponentProps<"li">
32
- >(({ className, ...props }, ref) => (
33
- <li ref={ref} className={cn("", className)} {...props} />
34
- ))
35
- PaginationItem.displayName = "PaginationItem"
36
-
37
- type PaginationLinkProps = {
38
- isActive?: boolean
39
- } & Pick<ButtonProps, "size"> &
40
- React.ComponentProps<"a">
41
-
42
- const PaginationLink = ({
43
- className,
44
- isActive,
45
- size = "icon",
46
- ...props
47
- }: PaginationLinkProps) => (
48
- <a
49
- aria-current={isActive ? "page" : undefined}
50
- className={cn(
51
- buttonVariants({
52
- variant: isActive ? "outline" : "ghost",
53
- size,
54
- }),
55
- className
56
- )}
57
- {...props}
58
- />
59
- )
60
- PaginationLink.displayName = "PaginationLink"
61
-
62
- const PaginationPrevious = ({
63
- className,
64
- ...props
65
- }: React.ComponentProps<typeof PaginationLink>) => (
66
- <PaginationLink
67
- aria-label="Go to previous page"
68
- size="default"
69
- className={cn("gap-1 pl-2.5", className)}
70
- {...props}
71
- >
72
- <icons.ChevronLeft className="h-4 w-4" />
73
- <span>Previous</span>
74
- </PaginationLink>
75
- )
76
- PaginationPrevious.displayName = "PaginationPrevious"
77
-
78
- const PaginationNext = ({
79
- className,
80
- ...props
81
- }: React.ComponentProps<typeof PaginationLink>) => (
82
- <PaginationLink
83
- aria-label="Go to next page"
84
- size="default"
85
- className={cn("gap-1 pr-2.5", className)}
86
- {...props}
87
- >
88
- <span>Next</span>
89
- <icons.ChevronRight className="h-4 w-4" />
90
- </PaginationLink>
91
- )
92
- PaginationNext.displayName = "PaginationNext"
93
-
94
- const PaginationEllipsis = ({
95
- className,
96
- ...props
97
- }: React.ComponentProps<"span">) => (
98
- <span
99
- aria-hidden
100
- className={cn("flex h-9 w-9 items-center justify-center", className)}
101
- {...props}
102
- >
103
- <icons.MoreHorizontal className="h-4 w-4" />
104
- <span className="sr-only">More pages</span>
105
- </span>
106
- )
107
- PaginationEllipsis.displayName = "PaginationEllipsis"
108
-
109
- export {
110
- Pagination,
111
- PaginationContent,
112
- PaginationEllipsis,
113
- PaginationItem,
114
- PaginationLink,
115
- PaginationNext,
116
- PaginationPrevious,
117
- }
@@ -1,31 +0,0 @@
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-hidden 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 }
@@ -1,28 +0,0 @@
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 }
@@ -1,44 +0,0 @@
1
- "use client"
2
-
3
- import * as React from "react"
4
- import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
5
- import { globalLucideIcons as icons } from "@base-ui/components/global-icon"
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-hidden 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
- <icons.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 }
@@ -1,45 +0,0 @@
1
- "use client"
2
-
3
- import { globalLucideIcons as icons } from "@base-ui/components/global-icon"
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-hidden 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
- <icons.GripVertical className="h-2.5 w-2.5" />
40
- </div>
41
- )}
42
- </ResizablePrimitive.PanelResizeHandle>
43
- )
44
-
45
- export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
@@ -1,48 +0,0 @@
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 }
package/src/ui/select.tsx DELETED
@@ -1,160 +0,0 @@
1
- "use client"
2
-
3
- import * as React from "react"
4
- import * as SelectPrimitive from "@radix-ui/react-select"
5
- import { globalLucideIcons as icons } from "@base-ui/components/global-icon"
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 focus:outline-hidden 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
- <icons.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
- <icons.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
- <icons.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-hidden 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
- <icons.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
- }
@@ -1,31 +0,0 @@
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 }
package/src/ui/sheet.tsx DELETED
@@ -1,140 +0,0 @@
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 { globalLucideIcons as icons } from "@base-ui/components/global-icon"
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-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
69
- <icons.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
- }