@camox/ui 0.36.1 → 0.36.3

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 (86) hide show
  1. package/dist/components/alert-dialog.d.ts +58 -0
  2. package/dist/components/alert-dialog.js +96 -0
  3. package/dist/components/alert.d.ts +28 -0
  4. package/dist/components/alert.js +45 -0
  5. package/dist/components/avatar.d.ts +34 -0
  6. package/dist/components/avatar.js +52 -0
  7. package/dist/components/badge.d.ts +19 -0
  8. package/dist/components/badge.js +44 -0
  9. package/dist/components/button-group.d.ts +28 -0
  10. package/dist/components/button-group.js +43 -0
  11. package/dist/components/button.d.ts +18 -0
  12. package/dist/components/button.js +46 -0
  13. package/dist/components/command.d.ts +58 -0
  14. package/dist/components/command.js +89 -0
  15. package/dist/components/dialog.d.ts +53 -0
  16. package/dist/components/dialog.js +93 -0
  17. package/dist/components/dropdown-menu.d.ts +90 -0
  18. package/dist/components/dropdown-menu.js +138 -0
  19. package/dist/components/floating-toolbar.d.ts +9 -0
  20. package/dist/components/floating-toolbar.js +15 -0
  21. package/dist/components/input-group.d.ts +45 -0
  22. package/dist/components/input-group.js +82 -0
  23. package/dist/components/input.d.ts +11 -0
  24. package/dist/components/input.js +17 -0
  25. package/dist/components/kbd.d.ts +13 -0
  26. package/dist/components/kbd.js +21 -0
  27. package/dist/components/label.d.ts +10 -0
  28. package/dist/components/label.js +15 -0
  29. package/dist/components/panel.d.ts +50 -0
  30. package/dist/components/panel.js +56 -0
  31. package/dist/components/popover.d.ts +34 -0
  32. package/dist/components/popover.js +57 -0
  33. package/dist/components/select.d.ts +55 -0
  34. package/dist/components/select.js +99 -0
  35. package/dist/components/separator.d.ts +11 -0
  36. package/dist/components/separator.js +16 -0
  37. package/dist/components/sheet.d.ts +46 -0
  38. package/dist/components/sheet.js +93 -0
  39. package/dist/components/skeleton.d.ts +9 -0
  40. package/dist/components/skeleton.js +14 -0
  41. package/dist/components/spinner.d.ts +9 -0
  42. package/dist/components/spinner.js +16 -0
  43. package/dist/components/switch.d.ts +13 -0
  44. package/dist/components/switch.js +20 -0
  45. package/dist/components/tabs.d.ts +29 -0
  46. package/dist/components/tabs.js +46 -0
  47. package/dist/components/textarea.d.ts +10 -0
  48. package/dist/components/textarea.js +15 -0
  49. package/dist/components/toaster.d.ts +11 -0
  50. package/dist/components/toaster.js +21 -0
  51. package/dist/components/toggle.d.ts +18 -0
  52. package/dist/components/toggle.js +37 -0
  53. package/dist/components/tooltip.d.ts +25 -0
  54. package/dist/components/tooltip.js +42 -0
  55. package/dist/lib/utils.d.ts +10 -0
  56. package/dist/lib/utils.js +14 -0
  57. package/package.json +61 -58
  58. package/src/components/alert-dialog.tsx +0 -160
  59. package/src/components/alert.tsx +0 -73
  60. package/src/components/avatar.tsx +0 -91
  61. package/src/components/badge.tsx +0 -56
  62. package/src/components/button-group.tsx +0 -78
  63. package/src/components/button.tsx +0 -58
  64. package/src/components/command.tsx +0 -176
  65. package/src/components/dialog.tsx +0 -135
  66. package/src/components/dropdown-menu.tsx +0 -256
  67. package/src/components/floating-toolbar.tsx +0 -17
  68. package/src/components/input-group.tsx +0 -146
  69. package/src/components/input.tsx +0 -20
  70. package/src/components/kbd.tsx +0 -26
  71. package/src/components/label.tsx +0 -18
  72. package/src/components/panel.tsx +0 -109
  73. package/src/components/popover.tsx +0 -80
  74. package/src/components/select.tsx +0 -188
  75. package/src/components/separator.tsx +0 -20
  76. package/src/components/sheet.tsx +0 -127
  77. package/src/components/skeleton.tsx +0 -13
  78. package/src/components/spinner.tsx +0 -16
  79. package/src/components/switch.tsx +0 -30
  80. package/src/components/tabs.tsx +0 -73
  81. package/src/components/textarea.tsx +0 -18
  82. package/src/components/toaster.tsx +0 -24
  83. package/src/components/toggle.tsx +0 -43
  84. package/src/components/tooltip.tsx +0 -52
  85. package/src/lib/utils.ts +0 -15
  86. package/src/styles/globals.css +0 -144
@@ -1,256 +0,0 @@
1
- import { Menu as MenuPrimitive } from "@base-ui/react/menu";
2
- import { ChevronRightIcon, CheckIcon } from "lucide-react";
3
- import * as React from "react";
4
-
5
- import { cn } from "../lib/utils";
6
-
7
- function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
8
- return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
9
- }
10
-
11
- function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
12
- return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
13
- }
14
-
15
- function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
16
- return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
17
- }
18
-
19
- function DropdownMenuContent({
20
- align = "start",
21
- alignOffset = 0,
22
- side = "bottom",
23
- sideOffset = 4,
24
- className,
25
- ...props
26
- }: MenuPrimitive.Popup.Props &
27
- Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
28
- return (
29
- <MenuPrimitive.Portal>
30
- <MenuPrimitive.Positioner
31
- className="isolate z-50 outline-none"
32
- align={align}
33
- alignOffset={alignOffset}
34
- side={side}
35
- sideOffset={sideOffset}
36
- >
37
- <MenuPrimitive.Popup
38
- data-slot="dropdown-menu-content"
39
- className={cn(
40
- "z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
41
- className,
42
- )}
43
- {...props}
44
- />
45
- </MenuPrimitive.Positioner>
46
- </MenuPrimitive.Portal>
47
- );
48
- }
49
-
50
- function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
51
- return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
52
- }
53
-
54
- function DropdownMenuLabel({
55
- className,
56
- inset,
57
- ...props
58
- }: MenuPrimitive.GroupLabel.Props & {
59
- inset?: boolean;
60
- }) {
61
- return (
62
- <MenuPrimitive.GroupLabel
63
- data-slot="dropdown-menu-label"
64
- data-inset={inset}
65
- className={cn(
66
- "px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8",
67
- className,
68
- )}
69
- {...props}
70
- />
71
- );
72
- }
73
-
74
- function DropdownMenuItem({
75
- className,
76
- inset,
77
- variant = "default",
78
- ...props
79
- }: MenuPrimitive.Item.Props & {
80
- inset?: boolean;
81
- variant?: "default" | "destructive";
82
- }) {
83
- return (
84
- <MenuPrimitive.Item
85
- data-slot="dropdown-menu-item"
86
- data-inset={inset}
87
- data-variant={variant}
88
- className={cn(
89
- "group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
90
- className,
91
- )}
92
- {...props}
93
- />
94
- );
95
- }
96
-
97
- function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
98
- return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
99
- }
100
-
101
- function DropdownMenuSubTrigger({
102
- className,
103
- inset,
104
- children,
105
- ...props
106
- }: MenuPrimitive.SubmenuTrigger.Props & {
107
- inset?: boolean;
108
- }) {
109
- return (
110
- <MenuPrimitive.SubmenuTrigger
111
- data-slot="dropdown-menu-sub-trigger"
112
- data-inset={inset}
113
- className={cn(
114
- "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
115
- className,
116
- )}
117
- {...props}
118
- >
119
- {children}
120
- <ChevronRightIcon className="ml-auto" />
121
- </MenuPrimitive.SubmenuTrigger>
122
- );
123
- }
124
-
125
- function DropdownMenuSubContent({
126
- align = "start",
127
- alignOffset = -3,
128
- side = "right",
129
- sideOffset = 0,
130
- className,
131
- ...props
132
- }: React.ComponentProps<typeof DropdownMenuContent>) {
133
- return (
134
- <DropdownMenuContent
135
- data-slot="dropdown-menu-sub-content"
136
- className={cn(
137
- "w-auto min-w-[96px] rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 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 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",
138
- className,
139
- )}
140
- align={align}
141
- alignOffset={alignOffset}
142
- side={side}
143
- sideOffset={sideOffset}
144
- {...props}
145
- />
146
- );
147
- }
148
-
149
- function DropdownMenuCheckboxItem({
150
- className,
151
- children,
152
- checked,
153
- inset,
154
- ...props
155
- }: MenuPrimitive.CheckboxItem.Props & {
156
- inset?: boolean;
157
- }) {
158
- return (
159
- <MenuPrimitive.CheckboxItem
160
- data-slot="dropdown-menu-checkbox-item"
161
- data-inset={inset}
162
- className={cn(
163
- "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
164
- className,
165
- )}
166
- checked={checked}
167
- {...props}
168
- >
169
- <span
170
- className="pointer-events-none absolute right-2 flex items-center justify-center"
171
- data-slot="dropdown-menu-checkbox-item-indicator"
172
- >
173
- <MenuPrimitive.CheckboxItemIndicator>
174
- <CheckIcon />
175
- </MenuPrimitive.CheckboxItemIndicator>
176
- </span>
177
- {children}
178
- </MenuPrimitive.CheckboxItem>
179
- );
180
- }
181
-
182
- function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
183
- return <MenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
184
- }
185
-
186
- function DropdownMenuRadioItem({
187
- className,
188
- children,
189
- inset,
190
- ...props
191
- }: MenuPrimitive.RadioItem.Props & {
192
- inset?: boolean;
193
- }) {
194
- return (
195
- <MenuPrimitive.RadioItem
196
- data-slot="dropdown-menu-radio-item"
197
- data-inset={inset}
198
- className={cn(
199
- "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
200
- className,
201
- )}
202
- {...props}
203
- >
204
- <span
205
- className="pointer-events-none absolute right-2 flex items-center justify-center"
206
- data-slot="dropdown-menu-radio-item-indicator"
207
- >
208
- <MenuPrimitive.RadioItemIndicator>
209
- <CheckIcon />
210
- </MenuPrimitive.RadioItemIndicator>
211
- </span>
212
- {children}
213
- </MenuPrimitive.RadioItem>
214
- );
215
- }
216
-
217
- function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {
218
- return (
219
- <MenuPrimitive.Separator
220
- data-slot="dropdown-menu-separator"
221
- className={cn("-mx-1 my-1 h-px bg-border", className)}
222
- {...props}
223
- />
224
- );
225
- }
226
-
227
- function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
228
- return (
229
- <span
230
- data-slot="dropdown-menu-shortcut"
231
- className={cn(
232
- "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
233
- className,
234
- )}
235
- {...props}
236
- />
237
- );
238
- }
239
-
240
- export {
241
- DropdownMenu,
242
- DropdownMenuPortal,
243
- DropdownMenuTrigger,
244
- DropdownMenuContent,
245
- DropdownMenuGroup,
246
- DropdownMenuLabel,
247
- DropdownMenuItem,
248
- DropdownMenuCheckboxItem,
249
- DropdownMenuRadioGroup,
250
- DropdownMenuRadioItem,
251
- DropdownMenuSeparator,
252
- DropdownMenuShortcut,
253
- DropdownMenuSub,
254
- DropdownMenuSubTrigger,
255
- DropdownMenuSubContent,
256
- };
@@ -1,17 +0,0 @@
1
- import { cn } from "../lib/utils";
2
-
3
- function FloatingToolbar({ className, ...props }: React.ComponentProps<"menu">) {
4
- return (
5
- <menu
6
- role="toolbar"
7
- data-slot="floating-toolbar"
8
- className={cn(
9
- "absolute left-[50%] z-30 flex translate-x-[-50%] items-center rounded-xl border-1 bg-background p-2 shadow-2xl transition-all duration-200",
10
- className,
11
- )}
12
- {...props}
13
- />
14
- );
15
- }
16
-
17
- export { FloatingToolbar };
@@ -1,146 +0,0 @@
1
- "use client";
2
-
3
- import { cva, type VariantProps } from "class-variance-authority";
4
- import * as React from "react";
5
-
6
- import { cn } from "../lib/utils";
7
- import { Button } from "./button";
8
- import { Input } from "./input";
9
- import { Textarea } from "./textarea";
10
-
11
- function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
12
- return (
13
- <div
14
- data-slot="input-group"
15
- role="group"
16
- className={cn(
17
- "group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
18
- className,
19
- )}
20
- {...props}
21
- />
22
- );
23
- }
24
-
25
- const inputGroupAddonVariants = cva(
26
- "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
27
- {
28
- variants: {
29
- align: {
30
- "inline-start": "order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]",
31
- "inline-end": "order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]",
32
- "block-start":
33
- "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
34
- "block-end":
35
- "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
36
- },
37
- },
38
- defaultVariants: {
39
- align: "inline-start",
40
- },
41
- },
42
- );
43
-
44
- function InputGroupAddon({
45
- className,
46
- align = "inline-start",
47
- ...props
48
- }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
49
- return (
50
- <div
51
- role="group"
52
- data-slot="input-group-addon"
53
- data-align={align}
54
- className={cn(inputGroupAddonVariants({ align }), className)}
55
- onClick={(e) => {
56
- if ((e.target as HTMLElement).closest("button")) {
57
- return;
58
- }
59
- e.currentTarget.parentElement?.querySelector("input")?.focus();
60
- }}
61
- {...props}
62
- />
63
- );
64
- }
65
-
66
- const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
67
- variants: {
68
- size: {
69
- xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
70
- sm: "",
71
- "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
72
- "icon-sm": "size-8 p-0 has-[>svg]:p-0",
73
- },
74
- },
75
- defaultVariants: {
76
- size: "xs",
77
- },
78
- });
79
-
80
- function InputGroupButton({
81
- className,
82
- type = "button",
83
- variant = "ghost",
84
- size = "xs",
85
- ...props
86
- }: Omit<React.ComponentProps<typeof Button>, "size" | "type"> &
87
- VariantProps<typeof inputGroupButtonVariants> & {
88
- type?: "button" | "submit" | "reset";
89
- }) {
90
- return (
91
- <Button
92
- type={type}
93
- data-size={size}
94
- variant={variant}
95
- className={cn(inputGroupButtonVariants({ size }), className)}
96
- {...props}
97
- />
98
- );
99
- }
100
-
101
- function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
102
- return (
103
- <span
104
- className={cn(
105
- "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
106
- className,
107
- )}
108
- {...props}
109
- />
110
- );
111
- }
112
-
113
- function InputGroupInput({ className, ...props }: React.ComponentProps<"input">) {
114
- return (
115
- <Input
116
- data-slot="input-group-control"
117
- className={cn(
118
- "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
119
- className,
120
- )}
121
- {...props}
122
- />
123
- );
124
- }
125
-
126
- function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">) {
127
- return (
128
- <Textarea
129
- data-slot="input-group-control"
130
- className={cn(
131
- "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
132
- className,
133
- )}
134
- {...props}
135
- />
136
- );
137
- }
138
-
139
- export {
140
- InputGroup,
141
- InputGroupAddon,
142
- InputGroupButton,
143
- InputGroupText,
144
- InputGroupInput,
145
- InputGroupTextarea,
146
- };
@@ -1,20 +0,0 @@
1
- import { Input as InputPrimitive } from "@base-ui/react/input";
2
- import * as React from "react";
3
-
4
- import { cn } from "../lib/utils";
5
-
6
- function Input({ className, type, ...props }: React.ComponentProps<"input">) {
7
- return (
8
- <InputPrimitive
9
- type={type}
10
- data-slot="input"
11
- className={cn(
12
- "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
13
- className,
14
- )}
15
- {...props}
16
- />
17
- );
18
- }
19
-
20
- export { Input };
@@ -1,26 +0,0 @@
1
- import { cn } from "../lib/utils";
2
-
3
- function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
4
- return (
5
- <kbd
6
- data-slot="kbd"
7
- className={cn(
8
- "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
9
- className,
10
- )}
11
- {...props}
12
- />
13
- );
14
- }
15
-
16
- function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
17
- return (
18
- <kbd
19
- data-slot="kbd-group"
20
- className={cn("inline-flex items-center gap-1", className)}
21
- {...props}
22
- />
23
- );
24
- }
25
-
26
- export { Kbd, KbdGroup };
@@ -1,18 +0,0 @@
1
- import * as React from "react";
2
-
3
- import { cn } from "../lib/utils";
4
-
5
- function Label({ className, ...props }: React.ComponentProps<"label">) {
6
- return (
7
- <label
8
- data-slot="label"
9
- className={cn(
10
- "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
11
- className,
12
- )}
13
- {...props}
14
- />
15
- );
16
- }
17
-
18
- export { Label };
@@ -1,109 +0,0 @@
1
- import * as React from "react";
2
-
3
- import { cn } from "../lib/utils";
4
-
5
- export const Panel = ({
6
- children,
7
- className,
8
- render,
9
- ...props
10
- }: Omit<React.ComponentProps<"section">, "children"> & {
11
- render?: React.ReactElement<{ className?: string }>;
12
- children?: React.ReactNode;
13
- }) => {
14
- if (render) {
15
- return React.cloneElement(render, {
16
- ...props,
17
- className: cn(
18
- "flex flex-col bg-background border-2 border-border shadow-xl rounded-lg overflow-hidden",
19
- className,
20
- render.props.className,
21
- ),
22
- children,
23
- } as Record<string, unknown>);
24
- }
25
-
26
- return (
27
- <section
28
- className={cn(
29
- "flex flex-col bg-background border-2 border-border shadow-xl rounded-lg overflow-hidden",
30
- className,
31
- )}
32
- {...props}
33
- >
34
- {children}
35
- </section>
36
- );
37
- };
38
-
39
- export const PanelHeader = ({
40
- children,
41
- className,
42
- render,
43
- ...props
44
- }: Omit<React.ComponentProps<"header">, "children"> & {
45
- render?: React.ReactElement<{ className?: string }>;
46
- children?: React.ReactNode;
47
- }) => {
48
- if (render) {
49
- return React.cloneElement(render, {
50
- ...props,
51
- className: cn("p-4 border-b-2 border-border", className, render.props.className),
52
- children,
53
- } as Record<string, unknown>);
54
- }
55
-
56
- return (
57
- <header className={cn("p-4 border-b-2 border-border", className)} {...props}>
58
- {children}
59
- </header>
60
- );
61
- };
62
-
63
- export const PanelTitle = ({
64
- children,
65
- className,
66
- render,
67
- ...props
68
- }: Omit<React.ComponentProps<"h3">, "children"> & {
69
- render?: React.ReactElement<{ className?: string }>;
70
- children?: React.ReactNode;
71
- }) => {
72
- if (render) {
73
- return React.cloneElement(render, {
74
- ...props,
75
- className: cn("text-lg leading-none font-semibold", className, render.props.className),
76
- children,
77
- } as Record<string, unknown>);
78
- }
79
-
80
- return (
81
- <h3 className={cn("text-lg leading-none font-semibold", className)} {...props}>
82
- {children}
83
- </h3>
84
- );
85
- };
86
-
87
- export const PanelContent = ({
88
- children,
89
- className,
90
- render,
91
- ...props
92
- }: Omit<React.ComponentProps<"main">, "children"> & {
93
- render?: React.ReactElement<{ className?: string }>;
94
- children?: React.ReactNode;
95
- }) => {
96
- if (render) {
97
- return React.cloneElement(render, {
98
- ...props,
99
- className: cn("grow overflow-auto", className, render.props.className),
100
- children,
101
- } as Record<string, unknown>);
102
- }
103
-
104
- return (
105
- <main className={cn("grow overflow-auto", className)} {...props}>
106
- {children}
107
- </main>
108
- );
109
- };
@@ -1,80 +0,0 @@
1
- import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
2
- import * as React from "react";
3
-
4
- import { cn } from "../lib/utils";
5
-
6
- function Popover({ ...props }: PopoverPrimitive.Root.Props) {
7
- return <PopoverPrimitive.Root data-slot="popover" {...props} />;
8
- }
9
-
10
- function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
11
- return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
12
- }
13
-
14
- function PopoverContent({
15
- className,
16
- align = "center",
17
- alignOffset = 0,
18
- side = "bottom",
19
- sideOffset = 4,
20
- anchor,
21
- ...props
22
- }: PopoverPrimitive.Popup.Props &
23
- Pick<
24
- PopoverPrimitive.Positioner.Props,
25
- "align" | "alignOffset" | "side" | "sideOffset" | "anchor"
26
- >) {
27
- return (
28
- <PopoverPrimitive.Portal>
29
- <PopoverPrimitive.Positioner
30
- align={align}
31
- alignOffset={alignOffset}
32
- side={side}
33
- sideOffset={sideOffset}
34
- anchor={anchor}
35
- className="isolate z-50"
36
- >
37
- <PopoverPrimitive.Popup
38
- data-slot="popover-content"
39
- className={cn(
40
- "z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
41
- className,
42
- )}
43
- {...props}
44
- />
45
- </PopoverPrimitive.Positioner>
46
- </PopoverPrimitive.Portal>
47
- );
48
- }
49
-
50
- function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
51
- return (
52
- <div
53
- data-slot="popover-header"
54
- className={cn("flex flex-col gap-1 text-sm", className)}
55
- {...props}
56
- />
57
- );
58
- }
59
-
60
- function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
61
- return (
62
- <PopoverPrimitive.Title
63
- data-slot="popover-title"
64
- className={cn("font-medium", className)}
65
- {...props}
66
- />
67
- );
68
- }
69
-
70
- function PopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props) {
71
- return (
72
- <PopoverPrimitive.Description
73
- data-slot="popover-description"
74
- className={cn("text-muted-foreground", className)}
75
- {...props}
76
- />
77
- );
78
- }
79
-
80
- export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };