@camox/ui 0.36.0 → 0.36.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/alert-dialog.d.ts +58 -0
- package/dist/components/alert-dialog.js +96 -0
- package/dist/components/alert.d.ts +28 -0
- package/dist/components/alert.js +45 -0
- package/dist/components/avatar.d.ts +34 -0
- package/dist/components/avatar.js +52 -0
- package/dist/components/badge.d.ts +19 -0
- package/dist/components/badge.js +44 -0
- package/dist/components/button-group.d.ts +28 -0
- package/dist/components/button-group.js +43 -0
- package/dist/components/button.d.ts +18 -0
- package/dist/components/button.js +46 -0
- package/dist/components/command.d.ts +58 -0
- package/dist/components/command.js +89 -0
- package/dist/components/dialog.d.ts +53 -0
- package/dist/components/dialog.js +93 -0
- package/dist/components/dropdown-menu.d.ts +90 -0
- package/dist/components/dropdown-menu.js +138 -0
- package/dist/components/floating-toolbar.d.ts +9 -0
- package/dist/components/floating-toolbar.js +15 -0
- package/dist/components/input-group.d.ts +45 -0
- package/dist/components/input-group.js +82 -0
- package/dist/components/input.d.ts +11 -0
- package/dist/components/input.js +17 -0
- package/dist/components/kbd.d.ts +13 -0
- package/dist/components/kbd.js +21 -0
- package/dist/components/label.d.ts +10 -0
- package/dist/components/label.js +15 -0
- package/dist/components/panel.d.ts +50 -0
- package/dist/components/panel.js +56 -0
- package/dist/components/popover.d.ts +34 -0
- package/dist/components/popover.js +57 -0
- package/dist/components/select.d.ts +55 -0
- package/dist/components/select.js +99 -0
- package/dist/components/separator.d.ts +11 -0
- package/dist/components/separator.js +16 -0
- package/dist/components/sheet.d.ts +46 -0
- package/dist/components/sheet.js +93 -0
- package/dist/components/skeleton.d.ts +9 -0
- package/dist/components/skeleton.js +14 -0
- package/dist/components/spinner.d.ts +9 -0
- package/dist/components/spinner.js +16 -0
- package/dist/components/switch.d.ts +13 -0
- package/dist/components/switch.js +20 -0
- package/dist/components/tabs.d.ts +29 -0
- package/dist/components/tabs.js +46 -0
- package/dist/components/textarea.d.ts +10 -0
- package/dist/components/textarea.js +15 -0
- package/dist/components/toaster.d.ts +11 -0
- package/dist/components/toaster.js +21 -0
- package/dist/components/toggle.d.ts +18 -0
- package/dist/components/toggle.js +37 -0
- package/dist/components/tooltip.d.ts +25 -0
- package/dist/components/tooltip.js +42 -0
- package/dist/lib/utils.d.ts +10 -0
- package/dist/lib/utils.js +14 -0
- package/package.json +61 -58
- package/src/components/alert-dialog.tsx +0 -160
- package/src/components/alert.tsx +0 -73
- package/src/components/avatar.tsx +0 -91
- package/src/components/badge.tsx +0 -56
- package/src/components/button-group.tsx +0 -78
- package/src/components/button.tsx +0 -58
- package/src/components/command.tsx +0 -176
- package/src/components/dialog.tsx +0 -135
- package/src/components/dropdown-menu.tsx +0 -256
- package/src/components/floating-toolbar.tsx +0 -17
- package/src/components/input-group.tsx +0 -146
- package/src/components/input.tsx +0 -20
- package/src/components/kbd.tsx +0 -26
- package/src/components/label.tsx +0 -18
- package/src/components/panel.tsx +0 -109
- package/src/components/popover.tsx +0 -80
- package/src/components/select.tsx +0 -188
- package/src/components/separator.tsx +0 -20
- package/src/components/sheet.tsx +0 -127
- package/src/components/skeleton.tsx +0 -13
- package/src/components/spinner.tsx +0 -16
- package/src/components/switch.tsx +0 -30
- package/src/components/tabs.tsx +0 -73
- package/src/components/textarea.tsx +0 -18
- package/src/components/toaster.tsx +0 -24
- package/src/components/toggle.tsx +0 -43
- package/src/components/tooltip.tsx +0 -52
- package/src/lib/utils.ts +0 -15
- package/src/styles/globals.css +0 -144
|
@@ -1,188 +0,0 @@
|
|
|
1
|
-
import { Select as SelectPrimitive } from "@base-ui/react/select";
|
|
2
|
-
import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
|
|
5
|
-
import { cn } from "../lib/utils";
|
|
6
|
-
|
|
7
|
-
const Select = SelectPrimitive.Root;
|
|
8
|
-
|
|
9
|
-
function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
|
|
10
|
-
return (
|
|
11
|
-
<SelectPrimitive.Group
|
|
12
|
-
data-slot="select-group"
|
|
13
|
-
className={cn("scroll-my-1 p-1", className)}
|
|
14
|
-
{...props}
|
|
15
|
-
/>
|
|
16
|
-
);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
|
|
20
|
-
return (
|
|
21
|
-
<SelectPrimitive.Value
|
|
22
|
-
data-slot="select-value"
|
|
23
|
-
className={cn("flex flex-1 text-left", className)}
|
|
24
|
-
{...props}
|
|
25
|
-
/>
|
|
26
|
-
);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
function SelectTrigger({
|
|
30
|
-
className,
|
|
31
|
-
size = "default",
|
|
32
|
-
children,
|
|
33
|
-
...props
|
|
34
|
-
}: SelectPrimitive.Trigger.Props & {
|
|
35
|
-
size?: "sm" | "default";
|
|
36
|
-
}) {
|
|
37
|
-
return (
|
|
38
|
-
<SelectPrimitive.Trigger
|
|
39
|
-
data-slot="select-trigger"
|
|
40
|
-
data-size={size}
|
|
41
|
-
className={cn(
|
|
42
|
-
"flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
43
|
-
className,
|
|
44
|
-
)}
|
|
45
|
-
{...props}
|
|
46
|
-
>
|
|
47
|
-
{children}
|
|
48
|
-
<SelectPrimitive.Icon
|
|
49
|
-
render={<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />}
|
|
50
|
-
/>
|
|
51
|
-
</SelectPrimitive.Trigger>
|
|
52
|
-
);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
function SelectContent({
|
|
56
|
-
className,
|
|
57
|
-
children,
|
|
58
|
-
side = "bottom",
|
|
59
|
-
sideOffset = 4,
|
|
60
|
-
align = "center",
|
|
61
|
-
alignOffset = 0,
|
|
62
|
-
alignItemWithTrigger = true,
|
|
63
|
-
...props
|
|
64
|
-
}: SelectPrimitive.Popup.Props &
|
|
65
|
-
Pick<
|
|
66
|
-
SelectPrimitive.Positioner.Props,
|
|
67
|
-
"align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
|
|
68
|
-
>) {
|
|
69
|
-
return (
|
|
70
|
-
<SelectPrimitive.Portal>
|
|
71
|
-
<SelectPrimitive.Positioner
|
|
72
|
-
side={side}
|
|
73
|
-
sideOffset={sideOffset}
|
|
74
|
-
align={align}
|
|
75
|
-
alignOffset={alignOffset}
|
|
76
|
-
alignItemWithTrigger={alignItemWithTrigger}
|
|
77
|
-
className="isolate z-50"
|
|
78
|
-
>
|
|
79
|
-
<SelectPrimitive.Popup
|
|
80
|
-
data-slot="select-content"
|
|
81
|
-
data-align-trigger={alignItemWithTrigger}
|
|
82
|
-
className={cn(
|
|
83
|
-
"relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-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:fade-out-0 data-closed:zoom-out-95",
|
|
84
|
-
className,
|
|
85
|
-
)}
|
|
86
|
-
{...props}
|
|
87
|
-
>
|
|
88
|
-
<SelectScrollUpButton />
|
|
89
|
-
<SelectPrimitive.List>{children}</SelectPrimitive.List>
|
|
90
|
-
<SelectScrollDownButton />
|
|
91
|
-
</SelectPrimitive.Popup>
|
|
92
|
-
</SelectPrimitive.Positioner>
|
|
93
|
-
</SelectPrimitive.Portal>
|
|
94
|
-
);
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
function SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props) {
|
|
98
|
-
return (
|
|
99
|
-
<SelectPrimitive.GroupLabel
|
|
100
|
-
data-slot="select-label"
|
|
101
|
-
className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
|
|
102
|
-
{...props}
|
|
103
|
-
/>
|
|
104
|
-
);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props) {
|
|
108
|
-
return (
|
|
109
|
-
<SelectPrimitive.Item
|
|
110
|
-
data-slot="select-item"
|
|
111
|
-
className={cn(
|
|
112
|
-
"relative flex w-full 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 not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
|
113
|
-
className,
|
|
114
|
-
)}
|
|
115
|
-
{...props}
|
|
116
|
-
>
|
|
117
|
-
<SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
|
|
118
|
-
{children}
|
|
119
|
-
</SelectPrimitive.ItemText>
|
|
120
|
-
<SelectPrimitive.ItemIndicator
|
|
121
|
-
render={
|
|
122
|
-
<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
|
|
123
|
-
}
|
|
124
|
-
>
|
|
125
|
-
<CheckIcon className="pointer-events-none" />
|
|
126
|
-
</SelectPrimitive.ItemIndicator>
|
|
127
|
-
</SelectPrimitive.Item>
|
|
128
|
-
);
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props) {
|
|
132
|
-
return (
|
|
133
|
-
<SelectPrimitive.Separator
|
|
134
|
-
data-slot="select-separator"
|
|
135
|
-
className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
|
|
136
|
-
{...props}
|
|
137
|
-
/>
|
|
138
|
-
);
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
function SelectScrollUpButton({
|
|
142
|
-
className,
|
|
143
|
-
...props
|
|
144
|
-
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
|
|
145
|
-
return (
|
|
146
|
-
<SelectPrimitive.ScrollUpArrow
|
|
147
|
-
data-slot="select-scroll-up-button"
|
|
148
|
-
className={cn(
|
|
149
|
-
"top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
|
|
150
|
-
className,
|
|
151
|
-
)}
|
|
152
|
-
{...props}
|
|
153
|
-
>
|
|
154
|
-
<ChevronUpIcon />
|
|
155
|
-
</SelectPrimitive.ScrollUpArrow>
|
|
156
|
-
);
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
function SelectScrollDownButton({
|
|
160
|
-
className,
|
|
161
|
-
...props
|
|
162
|
-
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
|
|
163
|
-
return (
|
|
164
|
-
<SelectPrimitive.ScrollDownArrow
|
|
165
|
-
data-slot="select-scroll-down-button"
|
|
166
|
-
className={cn(
|
|
167
|
-
"bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
|
|
168
|
-
className,
|
|
169
|
-
)}
|
|
170
|
-
{...props}
|
|
171
|
-
>
|
|
172
|
-
<ChevronDownIcon />
|
|
173
|
-
</SelectPrimitive.ScrollDownArrow>
|
|
174
|
-
);
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
export {
|
|
178
|
-
Select,
|
|
179
|
-
SelectContent,
|
|
180
|
-
SelectGroup,
|
|
181
|
-
SelectItem,
|
|
182
|
-
SelectLabel,
|
|
183
|
-
SelectScrollDownButton,
|
|
184
|
-
SelectScrollUpButton,
|
|
185
|
-
SelectSeparator,
|
|
186
|
-
SelectTrigger,
|
|
187
|
-
SelectValue,
|
|
188
|
-
};
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
|
|
2
|
-
|
|
3
|
-
import { cn } from "../lib/utils";
|
|
4
|
-
|
|
5
|
-
function Separator({ className, orientation = "horizontal", ...props }: SeparatorPrimitive.Props) {
|
|
6
|
-
return (
|
|
7
|
-
<SeparatorPrimitive
|
|
8
|
-
data-slot="separator"
|
|
9
|
-
orientation={orientation}
|
|
10
|
-
className={cn(
|
|
11
|
-
"bg-border shrink-0",
|
|
12
|
-
orientation === "horizontal" ? "h-px w-full" : "w-px self-stretch",
|
|
13
|
-
className,
|
|
14
|
-
)}
|
|
15
|
-
{...props}
|
|
16
|
-
/>
|
|
17
|
-
);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
export { Separator };
|
package/src/components/sheet.tsx
DELETED
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
|
|
2
|
-
import { XIcon } from "lucide-react";
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
|
|
5
|
-
import { cn } from "../lib/utils";
|
|
6
|
-
import { Button } from "./button";
|
|
7
|
-
|
|
8
|
-
function Sheet({ ...props }: SheetPrimitive.Root.Props) {
|
|
9
|
-
return <SheetPrimitive.Root data-slot="sheet" {...props} />;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
|
|
13
|
-
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
|
|
17
|
-
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
|
|
21
|
-
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
|
|
25
|
-
return (
|
|
26
|
-
<SheetPrimitive.Backdrop
|
|
27
|
-
data-slot="sheet-overlay"
|
|
28
|
-
className={cn(
|
|
29
|
-
"fixed inset-0 z-50 bg-black/66 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0",
|
|
30
|
-
className,
|
|
31
|
-
)}
|
|
32
|
-
{...props}
|
|
33
|
-
/>
|
|
34
|
-
);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
function SheetContent({
|
|
38
|
-
className,
|
|
39
|
-
children,
|
|
40
|
-
side = "right",
|
|
41
|
-
showCloseButton = true,
|
|
42
|
-
showOverlay = true,
|
|
43
|
-
keepMounted = false,
|
|
44
|
-
...props
|
|
45
|
-
}: SheetPrimitive.Popup.Props & {
|
|
46
|
-
side?: "top" | "right" | "bottom" | "left";
|
|
47
|
-
showCloseButton?: boolean;
|
|
48
|
-
showOverlay?: boolean;
|
|
49
|
-
keepMounted?: boolean;
|
|
50
|
-
}) {
|
|
51
|
-
return (
|
|
52
|
-
<SheetPortal keepMounted={keepMounted}>
|
|
53
|
-
{showOverlay && <SheetOverlay />}
|
|
54
|
-
<SheetPrimitive.Popup
|
|
55
|
-
data-slot="sheet-content"
|
|
56
|
-
data-side={side}
|
|
57
|
-
className={cn(
|
|
58
|
-
"fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-300 ease-in-out data-open:duration-500 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-full data-[side=bottom]:data-starting-style:translate-y-full data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:-translate-x-full data-[side=left]:data-starting-style:-translate-x-full data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-full data-[side=right]:data-starting-style:translate-x-full data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:-translate-y-full data-[side=top]:data-starting-style:-translate-y-full data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
|
|
59
|
-
className,
|
|
60
|
-
)}
|
|
61
|
-
{...props}
|
|
62
|
-
>
|
|
63
|
-
{children}
|
|
64
|
-
{showCloseButton && (
|
|
65
|
-
<SheetPrimitive.Close
|
|
66
|
-
data-slot="sheet-close"
|
|
67
|
-
render={<Button variant="ghost" className="absolute top-4 right-4" size="icon-sm" />}
|
|
68
|
-
>
|
|
69
|
-
<XIcon />
|
|
70
|
-
<span className="sr-only">Close</span>
|
|
71
|
-
</SheetPrimitive.Close>
|
|
72
|
-
)}
|
|
73
|
-
</SheetPrimitive.Popup>
|
|
74
|
-
</SheetPortal>
|
|
75
|
-
);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
79
|
-
return (
|
|
80
|
-
<div
|
|
81
|
-
data-slot="sheet-header"
|
|
82
|
-
className={cn("flex flex-col gap-1.5 p-4", className)}
|
|
83
|
-
{...props}
|
|
84
|
-
/>
|
|
85
|
-
);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
|
|
89
|
-
return (
|
|
90
|
-
<div
|
|
91
|
-
data-slot="sheet-footer"
|
|
92
|
-
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
|
93
|
-
{...props}
|
|
94
|
-
/>
|
|
95
|
-
);
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
|
|
99
|
-
return (
|
|
100
|
-
<SheetPrimitive.Title
|
|
101
|
-
data-slot="sheet-title"
|
|
102
|
-
className={cn("font-medium text-foreground", className)}
|
|
103
|
-
{...props}
|
|
104
|
-
/>
|
|
105
|
-
);
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
function SheetDescription({ className, ...props }: SheetPrimitive.Description.Props) {
|
|
109
|
-
return (
|
|
110
|
-
<SheetPrimitive.Description
|
|
111
|
-
data-slot="sheet-description"
|
|
112
|
-
className={cn("text-sm text-muted-foreground", className)}
|
|
113
|
-
{...props}
|
|
114
|
-
/>
|
|
115
|
-
);
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
export {
|
|
119
|
-
Sheet,
|
|
120
|
-
SheetTrigger,
|
|
121
|
-
SheetClose,
|
|
122
|
-
SheetContent,
|
|
123
|
-
SheetHeader,
|
|
124
|
-
SheetFooter,
|
|
125
|
-
SheetTitle,
|
|
126
|
-
SheetDescription,
|
|
127
|
-
};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { cn } from "../lib/utils";
|
|
2
|
-
|
|
3
|
-
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
|
|
4
|
-
return (
|
|
5
|
-
<div
|
|
6
|
-
data-slot="skeleton"
|
|
7
|
-
className={cn("animate-pulse rounded-md bg-muted", className)}
|
|
8
|
-
{...props}
|
|
9
|
-
/>
|
|
10
|
-
);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export { Skeleton };
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { Loader2Icon } from "lucide-react";
|
|
2
|
-
|
|
3
|
-
import { cn } from "../lib/utils";
|
|
4
|
-
|
|
5
|
-
function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
|
|
6
|
-
return (
|
|
7
|
-
<Loader2Icon
|
|
8
|
-
role="status"
|
|
9
|
-
aria-label="Loading"
|
|
10
|
-
className={cn("size-4 animate-spin", className)}
|
|
11
|
-
{...props}
|
|
12
|
-
/>
|
|
13
|
-
);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export { Spinner };
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
|
|
2
|
-
|
|
3
|
-
import { cn } from "../lib/utils";
|
|
4
|
-
|
|
5
|
-
function Switch({
|
|
6
|
-
className,
|
|
7
|
-
size = "default",
|
|
8
|
-
...props
|
|
9
|
-
}: SwitchPrimitive.Root.Props & {
|
|
10
|
-
size?: "sm" | "default";
|
|
11
|
-
}) {
|
|
12
|
-
return (
|
|
13
|
-
<SwitchPrimitive.Root
|
|
14
|
-
data-slot="switch"
|
|
15
|
-
data-size={size}
|
|
16
|
-
className={cn(
|
|
17
|
-
"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
|
|
18
|
-
className,
|
|
19
|
-
)}
|
|
20
|
-
{...props}
|
|
21
|
-
>
|
|
22
|
-
<SwitchPrimitive.Thumb
|
|
23
|
-
data-slot="switch-thumb"
|
|
24
|
-
className="bg-background dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0"
|
|
25
|
-
/>
|
|
26
|
-
</SwitchPrimitive.Root>
|
|
27
|
-
);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
export { Switch };
|
package/src/components/tabs.tsx
DELETED
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
|
|
2
|
-
import { cva, type VariantProps } from "class-variance-authority";
|
|
3
|
-
|
|
4
|
-
import { cn } from "../lib/utils";
|
|
5
|
-
|
|
6
|
-
function Tabs({ className, orientation = "horizontal", ...props }: TabsPrimitive.Root.Props) {
|
|
7
|
-
return (
|
|
8
|
-
<TabsPrimitive.Root
|
|
9
|
-
data-slot="tabs"
|
|
10
|
-
data-orientation={orientation}
|
|
11
|
-
className={cn("group/tabs flex gap-2 data-horizontal:flex-col", className)}
|
|
12
|
-
{...props}
|
|
13
|
-
/>
|
|
14
|
-
);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
const tabsListVariants = cva(
|
|
18
|
-
"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
|
|
19
|
-
{
|
|
20
|
-
variants: {
|
|
21
|
-
variant: {
|
|
22
|
-
default: "bg-muted",
|
|
23
|
-
line: "gap-1 bg-transparent",
|
|
24
|
-
},
|
|
25
|
-
},
|
|
26
|
-
defaultVariants: {
|
|
27
|
-
variant: "default",
|
|
28
|
-
},
|
|
29
|
-
},
|
|
30
|
-
);
|
|
31
|
-
|
|
32
|
-
function TabsList({
|
|
33
|
-
className,
|
|
34
|
-
variant = "default",
|
|
35
|
-
...props
|
|
36
|
-
}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
|
|
37
|
-
return (
|
|
38
|
-
<TabsPrimitive.List
|
|
39
|
-
data-slot="tabs-list"
|
|
40
|
-
data-variant={variant}
|
|
41
|
-
className={cn(tabsListVariants({ variant }), className)}
|
|
42
|
-
{...props}
|
|
43
|
-
/>
|
|
44
|
-
);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
|
|
48
|
-
return (
|
|
49
|
-
<TabsPrimitive.Tab
|
|
50
|
-
data-slot="tabs-trigger"
|
|
51
|
-
className={cn(
|
|
52
|
-
"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
53
|
-
"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
|
|
54
|
-
"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
|
|
55
|
-
"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
|
|
56
|
-
className,
|
|
57
|
-
)}
|
|
58
|
-
{...props}
|
|
59
|
-
/>
|
|
60
|
-
);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
|
|
64
|
-
return (
|
|
65
|
-
<TabsPrimitive.Panel
|
|
66
|
-
data-slot="tabs-content"
|
|
67
|
-
className={cn("flex-1 text-sm outline-none", className)}
|
|
68
|
-
{...props}
|
|
69
|
-
/>
|
|
70
|
-
);
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
|
|
3
|
-
import { cn } from "../lib/utils";
|
|
4
|
-
|
|
5
|
-
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
|
6
|
-
return (
|
|
7
|
-
<textarea
|
|
8
|
-
data-slot="textarea"
|
|
9
|
-
className={cn(
|
|
10
|
-
"flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 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",
|
|
11
|
-
className,
|
|
12
|
-
)}
|
|
13
|
-
{...props}
|
|
14
|
-
/>
|
|
15
|
-
);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export { Textarea };
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import type { ToasterProps } from "sonner";
|
|
2
|
-
import { Toaster as Sonner, toast } from "sonner";
|
|
3
|
-
|
|
4
|
-
import { cn } from "../lib/utils";
|
|
5
|
-
|
|
6
|
-
const Toaster = ({ theme = "system", className, ...props }: ToasterProps) => {
|
|
7
|
-
return (
|
|
8
|
-
<Sonner
|
|
9
|
-
theme={theme as ToasterProps["theme"]}
|
|
10
|
-
className={cn("toaster group camox-studio-theme", theme === "dark" && "dark", className)}
|
|
11
|
-
style={
|
|
12
|
-
{
|
|
13
|
-
"--normal-bg": "var(--popover)",
|
|
14
|
-
"--normal-text": "var(--popover-foreground)",
|
|
15
|
-
"--normal-border": "var(--border)",
|
|
16
|
-
} as React.CSSProperties
|
|
17
|
-
}
|
|
18
|
-
position="top-center"
|
|
19
|
-
{...props}
|
|
20
|
-
/>
|
|
21
|
-
);
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
export { Toaster, toast };
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
|
|
2
|
-
import { cva, type VariantProps } from "class-variance-authority";
|
|
3
|
-
|
|
4
|
-
import { cn } from "../lib/utils";
|
|
5
|
-
|
|
6
|
-
const toggleVariants = cva(
|
|
7
|
-
"group/toggle inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-accent dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
8
|
-
{
|
|
9
|
-
variants: {
|
|
10
|
-
variant: {
|
|
11
|
-
default: "bg-transparent",
|
|
12
|
-
outline: "border border-input bg-transparent shadow-xs hover:bg-accent",
|
|
13
|
-
},
|
|
14
|
-
size: {
|
|
15
|
-
default:
|
|
16
|
-
"h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
|
17
|
-
sm: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
|
|
18
|
-
lg: "h-10 min-w-10 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
|
19
|
-
},
|
|
20
|
-
},
|
|
21
|
-
defaultVariants: {
|
|
22
|
-
variant: "default",
|
|
23
|
-
size: "default",
|
|
24
|
-
},
|
|
25
|
-
},
|
|
26
|
-
);
|
|
27
|
-
|
|
28
|
-
function Toggle({
|
|
29
|
-
className,
|
|
30
|
-
variant = "default",
|
|
31
|
-
size = "default",
|
|
32
|
-
...props
|
|
33
|
-
}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
|
|
34
|
-
return (
|
|
35
|
-
<TogglePrimitive
|
|
36
|
-
data-slot="toggle"
|
|
37
|
-
className={cn(toggleVariants({ variant, size, className }))}
|
|
38
|
-
{...props}
|
|
39
|
-
/>
|
|
40
|
-
);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
export { Toggle, toggleVariants };
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
|
|
2
|
-
|
|
3
|
-
import { cn } from "../lib/utils";
|
|
4
|
-
|
|
5
|
-
function TooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {
|
|
6
|
-
return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
|
|
10
|
-
return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
|
|
14
|
-
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
function TooltipContent({
|
|
18
|
-
className,
|
|
19
|
-
side = "top",
|
|
20
|
-
sideOffset = 4,
|
|
21
|
-
align = "center",
|
|
22
|
-
alignOffset = 0,
|
|
23
|
-
children,
|
|
24
|
-
...props
|
|
25
|
-
}: TooltipPrimitive.Popup.Props &
|
|
26
|
-
Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
|
|
27
|
-
return (
|
|
28
|
-
<TooltipPrimitive.Portal>
|
|
29
|
-
<TooltipPrimitive.Positioner
|
|
30
|
-
align={align}
|
|
31
|
-
alignOffset={alignOffset}
|
|
32
|
-
side={side}
|
|
33
|
-
sideOffset={sideOffset}
|
|
34
|
-
className="isolate z-50"
|
|
35
|
-
>
|
|
36
|
-
<TooltipPrimitive.Popup
|
|
37
|
-
data-slot="tooltip-content"
|
|
38
|
-
className={cn(
|
|
39
|
-
"z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 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-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
40
|
-
className,
|
|
41
|
-
)}
|
|
42
|
-
{...props}
|
|
43
|
-
>
|
|
44
|
-
{children}
|
|
45
|
-
<TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
|
|
46
|
-
</TooltipPrimitive.Popup>
|
|
47
|
-
</TooltipPrimitive.Positioner>
|
|
48
|
-
</TooltipPrimitive.Portal>
|
|
49
|
-
);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
package/src/lib/utils.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import type { ClassValue } from "clsx";
|
|
2
|
-
import { clsx } from "clsx";
|
|
3
|
-
import { twMerge } from "tailwind-merge";
|
|
4
|
-
|
|
5
|
-
export function cn(...inputs: Array<ClassValue>) {
|
|
6
|
-
return twMerge(clsx(inputs));
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
/** Shared focus-ring + validation styles for all input-like elements (Input, Textarea, ContentEditable, etc.) */
|
|
10
|
-
export const INPUT_FOCUS_STYLES =
|
|
11
|
-
"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";
|
|
12
|
-
|
|
13
|
-
/** Shared base styles for input-like elements (border, text, shadow, transition, outline) */
|
|
14
|
-
export const INPUT_BASE_STYLES =
|
|
15
|
-
"border-input placeholder:text-muted-foreground rounded-md border bg-transparent text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm";
|