@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.
- 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
package/src/components/alert.tsx
DELETED
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { cva, type VariantProps } from "class-variance-authority";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
|
|
4
|
-
import { cn } from "../lib/utils";
|
|
5
|
-
|
|
6
|
-
const alertVariants = cva(
|
|
7
|
-
"group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
|
|
8
|
-
{
|
|
9
|
-
variants: {
|
|
10
|
-
variant: {
|
|
11
|
-
default: "bg-card text-card-foreground",
|
|
12
|
-
destructive:
|
|
13
|
-
"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
|
|
14
|
-
},
|
|
15
|
-
},
|
|
16
|
-
defaultVariants: {
|
|
17
|
-
variant: "default",
|
|
18
|
-
},
|
|
19
|
-
},
|
|
20
|
-
);
|
|
21
|
-
|
|
22
|
-
function Alert({
|
|
23
|
-
className,
|
|
24
|
-
variant,
|
|
25
|
-
...props
|
|
26
|
-
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
|
|
27
|
-
return (
|
|
28
|
-
<div
|
|
29
|
-
data-slot="alert"
|
|
30
|
-
role="alert"
|
|
31
|
-
className={cn(alertVariants({ variant }), className)}
|
|
32
|
-
{...props}
|
|
33
|
-
/>
|
|
34
|
-
);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
|
|
38
|
-
return (
|
|
39
|
-
<div
|
|
40
|
-
data-slot="alert-title"
|
|
41
|
-
className={cn(
|
|
42
|
-
"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
|
|
43
|
-
className,
|
|
44
|
-
)}
|
|
45
|
-
{...props}
|
|
46
|
-
/>
|
|
47
|
-
);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
|
|
51
|
-
return (
|
|
52
|
-
<div
|
|
53
|
-
data-slot="alert-description"
|
|
54
|
-
className={cn(
|
|
55
|
-
"text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
|
|
56
|
-
className,
|
|
57
|
-
)}
|
|
58
|
-
{...props}
|
|
59
|
-
/>
|
|
60
|
-
);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
|
|
64
|
-
return (
|
|
65
|
-
<div
|
|
66
|
-
data-slot="alert-action"
|
|
67
|
-
className={cn("absolute top-2.5 right-3", className)}
|
|
68
|
-
{...props}
|
|
69
|
-
/>
|
|
70
|
-
);
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
export { Alert, AlertTitle, AlertDescription, AlertAction };
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
|
|
4
|
-
import { cn } from "../lib/utils";
|
|
5
|
-
|
|
6
|
-
function Avatar({
|
|
7
|
-
className,
|
|
8
|
-
size = "default",
|
|
9
|
-
...props
|
|
10
|
-
}: AvatarPrimitive.Root.Props & {
|
|
11
|
-
size?: "default" | "sm" | "lg";
|
|
12
|
-
}) {
|
|
13
|
-
return (
|
|
14
|
-
<AvatarPrimitive.Root
|
|
15
|
-
data-slot="avatar"
|
|
16
|
-
data-size={size}
|
|
17
|
-
className={cn(
|
|
18
|
-
"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
|
|
19
|
-
className,
|
|
20
|
-
)}
|
|
21
|
-
{...props}
|
|
22
|
-
/>
|
|
23
|
-
);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
|
|
27
|
-
return (
|
|
28
|
-
<AvatarPrimitive.Image
|
|
29
|
-
data-slot="avatar-image"
|
|
30
|
-
className={cn("aspect-square size-full rounded-full object-cover", className)}
|
|
31
|
-
{...props}
|
|
32
|
-
/>
|
|
33
|
-
);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props) {
|
|
37
|
-
return (
|
|
38
|
-
<AvatarPrimitive.Fallback
|
|
39
|
-
data-slot="avatar-fallback"
|
|
40
|
-
className={cn(
|
|
41
|
-
"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
|
|
42
|
-
className,
|
|
43
|
-
)}
|
|
44
|
-
{...props}
|
|
45
|
-
/>
|
|
46
|
-
);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
|
|
50
|
-
return (
|
|
51
|
-
<span
|
|
52
|
-
data-slot="avatar-badge"
|
|
53
|
-
className={cn(
|
|
54
|
-
"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
|
|
55
|
-
"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
|
|
56
|
-
"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
|
|
57
|
-
"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
|
|
58
|
-
className,
|
|
59
|
-
)}
|
|
60
|
-
{...props}
|
|
61
|
-
/>
|
|
62
|
-
);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
|
|
66
|
-
return (
|
|
67
|
-
<div
|
|
68
|
-
data-slot="avatar-group"
|
|
69
|
-
className={cn(
|
|
70
|
-
"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
|
|
71
|
-
className,
|
|
72
|
-
)}
|
|
73
|
-
{...props}
|
|
74
|
-
/>
|
|
75
|
-
);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">) {
|
|
79
|
-
return (
|
|
80
|
-
<div
|
|
81
|
-
data-slot="avatar-group-count"
|
|
82
|
-
className={cn(
|
|
83
|
-
"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
|
|
84
|
-
className,
|
|
85
|
-
)}
|
|
86
|
-
{...props}
|
|
87
|
-
/>
|
|
88
|
-
);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge };
|
package/src/components/badge.tsx
DELETED
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import { mergeProps } from "@base-ui/react/merge-props";
|
|
2
|
-
import { useRender } from "@base-ui/react/use-render";
|
|
3
|
-
import { cva, type VariantProps } from "class-variance-authority";
|
|
4
|
-
|
|
5
|
-
import { cn } from "../lib/utils";
|
|
6
|
-
|
|
7
|
-
const badgeVariants = cva(
|
|
8
|
-
"group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
|
|
9
|
-
{
|
|
10
|
-
variants: {
|
|
11
|
-
variant: {
|
|
12
|
-
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
|
13
|
-
secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
|
|
14
|
-
destructive:
|
|
15
|
-
"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
|
|
16
|
-
outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
|
|
17
|
-
ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
|
|
18
|
-
link: "text-primary underline-offset-4 hover:underline",
|
|
19
|
-
},
|
|
20
|
-
size: {
|
|
21
|
-
default: "h-5 px-2 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
|
|
22
|
-
sm: "h-4 px-1.5 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1",
|
|
23
|
-
},
|
|
24
|
-
},
|
|
25
|
-
defaultVariants: {
|
|
26
|
-
variant: "default",
|
|
27
|
-
size: "default",
|
|
28
|
-
},
|
|
29
|
-
},
|
|
30
|
-
);
|
|
31
|
-
|
|
32
|
-
function Badge({
|
|
33
|
-
className,
|
|
34
|
-
variant = "default",
|
|
35
|
-
size = "default",
|
|
36
|
-
render,
|
|
37
|
-
...props
|
|
38
|
-
}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
|
|
39
|
-
return useRender({
|
|
40
|
-
defaultTagName: "span",
|
|
41
|
-
props: mergeProps<"span">(
|
|
42
|
-
{
|
|
43
|
-
className: cn(badgeVariants({ variant, size }), className),
|
|
44
|
-
},
|
|
45
|
-
props,
|
|
46
|
-
),
|
|
47
|
-
render,
|
|
48
|
-
state: {
|
|
49
|
-
slot: "badge",
|
|
50
|
-
variant,
|
|
51
|
-
size,
|
|
52
|
-
},
|
|
53
|
-
});
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
export { Badge, badgeVariants };
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
import { mergeProps } from "@base-ui/react/merge-props";
|
|
2
|
-
import { useRender } from "@base-ui/react/use-render";
|
|
3
|
-
import { cva, type VariantProps } from "class-variance-authority";
|
|
4
|
-
|
|
5
|
-
import { cn } from "../lib/utils";
|
|
6
|
-
import { Separator } from "./separator";
|
|
7
|
-
|
|
8
|
-
const buttonGroupVariants = cva(
|
|
9
|
-
"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
|
|
10
|
-
{
|
|
11
|
-
variants: {
|
|
12
|
-
orientation: {
|
|
13
|
-
horizontal:
|
|
14
|
-
"*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
|
|
15
|
-
vertical:
|
|
16
|
-
"flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
|
|
17
|
-
},
|
|
18
|
-
},
|
|
19
|
-
defaultVariants: {
|
|
20
|
-
orientation: "horizontal",
|
|
21
|
-
},
|
|
22
|
-
},
|
|
23
|
-
);
|
|
24
|
-
|
|
25
|
-
function ButtonGroup({
|
|
26
|
-
className,
|
|
27
|
-
orientation,
|
|
28
|
-
...props
|
|
29
|
-
}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
|
|
30
|
-
return (
|
|
31
|
-
<div
|
|
32
|
-
role="group"
|
|
33
|
-
data-slot="button-group"
|
|
34
|
-
data-orientation={orientation}
|
|
35
|
-
className={cn(buttonGroupVariants({ orientation }), className)}
|
|
36
|
-
{...props}
|
|
37
|
-
/>
|
|
38
|
-
);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
function ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<"div">) {
|
|
42
|
-
return useRender({
|
|
43
|
-
defaultTagName: "div",
|
|
44
|
-
props: mergeProps<"div">(
|
|
45
|
-
{
|
|
46
|
-
className: cn(
|
|
47
|
-
"flex items-center gap-2 rounded-md border bg-muted px-2.5 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
|
|
48
|
-
className,
|
|
49
|
-
),
|
|
50
|
-
},
|
|
51
|
-
props,
|
|
52
|
-
),
|
|
53
|
-
render,
|
|
54
|
-
state: {
|
|
55
|
-
slot: "button-group-text",
|
|
56
|
-
},
|
|
57
|
-
});
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
function ButtonGroupSeparator({
|
|
61
|
-
className,
|
|
62
|
-
orientation = "vertical",
|
|
63
|
-
...props
|
|
64
|
-
}: React.ComponentProps<typeof Separator>) {
|
|
65
|
-
return (
|
|
66
|
-
<Separator
|
|
67
|
-
data-slot="button-group-separator"
|
|
68
|
-
orientation={orientation}
|
|
69
|
-
className={cn(
|
|
70
|
-
"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
|
|
71
|
-
className,
|
|
72
|
-
)}
|
|
73
|
-
{...props}
|
|
74
|
-
/>
|
|
75
|
-
);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import { Button as ButtonPrimitive } from "@base-ui/react/button";
|
|
2
|
-
import { cva, type VariantProps } from "class-variance-authority";
|
|
3
|
-
|
|
4
|
-
import { cn } from "../lib/utils";
|
|
5
|
-
|
|
6
|
-
const buttonVariants = cva(
|
|
7
|
-
"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 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",
|
|
8
|
-
{
|
|
9
|
-
variants: {
|
|
10
|
-
variant: {
|
|
11
|
-
default: "bg-primary text-primary-foreground hover:bg-primary/80",
|
|
12
|
-
outline:
|
|
13
|
-
"border-border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-accent/50",
|
|
14
|
-
secondary:
|
|
15
|
-
"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
|
16
|
-
ghost:
|
|
17
|
-
"hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground dark:hover:bg-accent/50",
|
|
18
|
-
destructive:
|
|
19
|
-
"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
|
20
|
-
link: "text-primary underline-offset-4 hover:underline",
|
|
21
|
-
},
|
|
22
|
-
size: {
|
|
23
|
-
default:
|
|
24
|
-
"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
|
25
|
-
xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
|
26
|
-
sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
|
|
27
|
-
lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
|
28
|
-
icon: "size-9",
|
|
29
|
-
"icon-xs":
|
|
30
|
-
"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
|
|
31
|
-
"icon-sm":
|
|
32
|
-
"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
|
|
33
|
-
"icon-lg": "size-10",
|
|
34
|
-
},
|
|
35
|
-
},
|
|
36
|
-
defaultVariants: {
|
|
37
|
-
variant: "default",
|
|
38
|
-
size: "default",
|
|
39
|
-
},
|
|
40
|
-
},
|
|
41
|
-
);
|
|
42
|
-
|
|
43
|
-
function Button({
|
|
44
|
-
className,
|
|
45
|
-
variant = "default",
|
|
46
|
-
size = "default",
|
|
47
|
-
...props
|
|
48
|
-
}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
|
|
49
|
-
return (
|
|
50
|
-
<ButtonPrimitive
|
|
51
|
-
data-slot="button"
|
|
52
|
-
className={cn(buttonVariants({ variant, size, className }))}
|
|
53
|
-
{...props}
|
|
54
|
-
/>
|
|
55
|
-
);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
export { Button, buttonVariants };
|
|
@@ -1,176 +0,0 @@
|
|
|
1
|
-
import { Command as CommandPrimitive } from "cmdk";
|
|
2
|
-
import { SearchIcon, CheckIcon } from "lucide-react";
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
|
|
5
|
-
import { cn } from "../lib/utils";
|
|
6
|
-
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog";
|
|
7
|
-
import { InputGroup, InputGroupAddon } from "./input-group";
|
|
8
|
-
|
|
9
|
-
function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
|
|
10
|
-
return (
|
|
11
|
-
<CommandPrimitive
|
|
12
|
-
data-slot="command"
|
|
13
|
-
className={cn(
|
|
14
|
-
"flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground",
|
|
15
|
-
className,
|
|
16
|
-
)}
|
|
17
|
-
{...props}
|
|
18
|
-
/>
|
|
19
|
-
);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
function CommandDialog({
|
|
23
|
-
title = "Command Palette",
|
|
24
|
-
description = "Search for a command to run...",
|
|
25
|
-
children,
|
|
26
|
-
className,
|
|
27
|
-
showCloseButton = false,
|
|
28
|
-
...props
|
|
29
|
-
}: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
|
|
30
|
-
title?: string;
|
|
31
|
-
description?: string;
|
|
32
|
-
className?: string;
|
|
33
|
-
showCloseButton?: boolean;
|
|
34
|
-
children: React.ReactNode;
|
|
35
|
-
}) {
|
|
36
|
-
return (
|
|
37
|
-
<Dialog {...props}>
|
|
38
|
-
<DialogHeader className="sr-only">
|
|
39
|
-
<DialogTitle>{title}</DialogTitle>
|
|
40
|
-
<DialogDescription>{description}</DialogDescription>
|
|
41
|
-
</DialogHeader>
|
|
42
|
-
<DialogContent
|
|
43
|
-
className={cn("top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0", className)}
|
|
44
|
-
showCloseButton={showCloseButton}
|
|
45
|
-
>
|
|
46
|
-
{children}
|
|
47
|
-
</DialogContent>
|
|
48
|
-
</Dialog>
|
|
49
|
-
);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
function CommandInput({
|
|
53
|
-
className,
|
|
54
|
-
...props
|
|
55
|
-
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
|
|
56
|
-
return (
|
|
57
|
-
<div data-slot="command-input-wrapper" className="p-1 pb-0">
|
|
58
|
-
<InputGroup className="border-input/30 bg-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!">
|
|
59
|
-
<CommandPrimitive.Input
|
|
60
|
-
data-slot="command-input"
|
|
61
|
-
className={cn(
|
|
62
|
-
"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
|
|
63
|
-
className,
|
|
64
|
-
)}
|
|
65
|
-
{...props}
|
|
66
|
-
/>
|
|
67
|
-
<InputGroupAddon>
|
|
68
|
-
<SearchIcon className="size-4 shrink-0 opacity-50" />
|
|
69
|
-
</InputGroupAddon>
|
|
70
|
-
</InputGroup>
|
|
71
|
-
</div>
|
|
72
|
-
);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
|
|
76
|
-
return (
|
|
77
|
-
<CommandPrimitive.List
|
|
78
|
-
data-slot="command-list"
|
|
79
|
-
className={cn(
|
|
80
|
-
"no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none",
|
|
81
|
-
className,
|
|
82
|
-
)}
|
|
83
|
-
{...props}
|
|
84
|
-
/>
|
|
85
|
-
);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
function CommandEmpty({
|
|
89
|
-
className,
|
|
90
|
-
...props
|
|
91
|
-
}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
|
|
92
|
-
return (
|
|
93
|
-
<CommandPrimitive.Empty
|
|
94
|
-
data-slot="command-empty"
|
|
95
|
-
className={cn("py-6 text-center text-sm", className)}
|
|
96
|
-
{...props}
|
|
97
|
-
/>
|
|
98
|
-
);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
function CommandGroup({
|
|
102
|
-
className,
|
|
103
|
-
...props
|
|
104
|
-
}: React.ComponentProps<typeof CommandPrimitive.Group>) {
|
|
105
|
-
return (
|
|
106
|
-
<CommandPrimitive.Group
|
|
107
|
-
data-slot="command-group"
|
|
108
|
-
className={cn(
|
|
109
|
-
"overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
|
|
110
|
-
className,
|
|
111
|
-
)}
|
|
112
|
-
{...props}
|
|
113
|
-
/>
|
|
114
|
-
);
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
function CommandSeparator({
|
|
118
|
-
className,
|
|
119
|
-
...props
|
|
120
|
-
}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
|
|
121
|
-
return (
|
|
122
|
-
<CommandPrimitive.Separator
|
|
123
|
-
data-slot="command-separator"
|
|
124
|
-
className={cn("-mx-1 h-px w-auto bg-border", className)}
|
|
125
|
-
{...props}
|
|
126
|
-
/>
|
|
127
|
-
);
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
function CommandItem({
|
|
131
|
-
className,
|
|
132
|
-
children,
|
|
133
|
-
hideCheck,
|
|
134
|
-
...props
|
|
135
|
-
}: React.ComponentProps<typeof CommandPrimitive.Item> & { hideCheck?: boolean }) {
|
|
136
|
-
return (
|
|
137
|
-
<CommandPrimitive.Item
|
|
138
|
-
data-slot="command-item"
|
|
139
|
-
className={cn(
|
|
140
|
-
"group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
141
|
-
className,
|
|
142
|
-
)}
|
|
143
|
-
{...props}
|
|
144
|
-
>
|
|
145
|
-
{children}
|
|
146
|
-
{!hideCheck && (
|
|
147
|
-
<CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
|
|
148
|
-
)}
|
|
149
|
-
</CommandPrimitive.Item>
|
|
150
|
-
);
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
function CommandShortcut({ className, ...props }: React.ComponentProps<"span">) {
|
|
154
|
-
return (
|
|
155
|
-
<span
|
|
156
|
-
data-slot="command-shortcut"
|
|
157
|
-
className={cn(
|
|
158
|
-
"ml-auto text-xs text-muted-foreground group-data-selected/command-item:text-foreground *:data-[slot=kbd]:bg-transparent *:data-[slot=kbd]:p-0 *:data-[slot=kbd]:min-w-0",
|
|
159
|
-
className,
|
|
160
|
-
)}
|
|
161
|
-
{...props}
|
|
162
|
-
/>
|
|
163
|
-
);
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
export {
|
|
167
|
-
Command,
|
|
168
|
-
CommandDialog,
|
|
169
|
-
CommandInput,
|
|
170
|
-
CommandList,
|
|
171
|
-
CommandEmpty,
|
|
172
|
-
CommandGroup,
|
|
173
|
-
CommandItem,
|
|
174
|
-
CommandShortcut,
|
|
175
|
-
CommandSeparator,
|
|
176
|
-
};
|
|
@@ -1,135 +0,0 @@
|
|
|
1
|
-
import { Dialog as DialogPrimitive } 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 Dialog({ ...props }: DialogPrimitive.Root.Props) {
|
|
9
|
-
return <DialogPrimitive.Root data-slot="dialog" {...props} />;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
|
|
13
|
-
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
|
|
17
|
-
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
|
|
21
|
-
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {
|
|
25
|
-
return (
|
|
26
|
-
<DialogPrimitive.Backdrop
|
|
27
|
-
data-slot="dialog-overlay"
|
|
28
|
-
className={cn(
|
|
29
|
-
"fixed inset-0 isolate z-50 bg-black/66 duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
|
|
30
|
-
className,
|
|
31
|
-
)}
|
|
32
|
-
{...props}
|
|
33
|
-
/>
|
|
34
|
-
);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
function DialogContent({
|
|
38
|
-
className,
|
|
39
|
-
children,
|
|
40
|
-
showCloseButton = true,
|
|
41
|
-
forceOverlay = false,
|
|
42
|
-
...props
|
|
43
|
-
}: DialogPrimitive.Popup.Props & {
|
|
44
|
-
showCloseButton?: boolean;
|
|
45
|
-
forceOverlay?: boolean;
|
|
46
|
-
}) {
|
|
47
|
-
return (
|
|
48
|
-
<DialogPortal>
|
|
49
|
-
<DialogOverlay forceRender={forceOverlay || undefined} />
|
|
50
|
-
<DialogPrimitive.Popup
|
|
51
|
-
data-slot="dialog-content"
|
|
52
|
-
className={cn(
|
|
53
|
-
"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-popover p-6 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md 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",
|
|
54
|
-
className,
|
|
55
|
-
)}
|
|
56
|
-
{...props}
|
|
57
|
-
>
|
|
58
|
-
{children}
|
|
59
|
-
{showCloseButton && (
|
|
60
|
-
<DialogPrimitive.Close
|
|
61
|
-
data-slot="dialog-close"
|
|
62
|
-
render={<Button variant="ghost" className="absolute top-4 right-4" size="icon-sm" />}
|
|
63
|
-
>
|
|
64
|
-
<XIcon />
|
|
65
|
-
<span className="sr-only">Close</span>
|
|
66
|
-
</DialogPrimitive.Close>
|
|
67
|
-
)}
|
|
68
|
-
</DialogPrimitive.Popup>
|
|
69
|
-
</DialogPortal>
|
|
70
|
-
);
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
74
|
-
return (
|
|
75
|
-
<div data-slot="dialog-header" className={cn("flex flex-col gap-2", className)} {...props} />
|
|
76
|
-
);
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
function DialogFooter({
|
|
80
|
-
className,
|
|
81
|
-
showCloseButton = false,
|
|
82
|
-
children,
|
|
83
|
-
...props
|
|
84
|
-
}: React.ComponentProps<"div"> & {
|
|
85
|
-
showCloseButton?: boolean;
|
|
86
|
-
}) {
|
|
87
|
-
return (
|
|
88
|
-
<div
|
|
89
|
-
data-slot="dialog-footer"
|
|
90
|
-
className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
|
|
91
|
-
{...props}
|
|
92
|
-
>
|
|
93
|
-
{children}
|
|
94
|
-
{showCloseButton && (
|
|
95
|
-
<DialogPrimitive.Close render={<Button variant="outline" />}>Close</DialogPrimitive.Close>
|
|
96
|
-
)}
|
|
97
|
-
</div>
|
|
98
|
-
);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
|
|
102
|
-
return (
|
|
103
|
-
<DialogPrimitive.Title
|
|
104
|
-
data-slot="dialog-title"
|
|
105
|
-
className={cn("leading-none font-medium", className)}
|
|
106
|
-
{...props}
|
|
107
|
-
/>
|
|
108
|
-
);
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props) {
|
|
112
|
-
return (
|
|
113
|
-
<DialogPrimitive.Description
|
|
114
|
-
data-slot="dialog-description"
|
|
115
|
-
className={cn(
|
|
116
|
-
"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
|
|
117
|
-
className,
|
|
118
|
-
)}
|
|
119
|
-
{...props}
|
|
120
|
-
/>
|
|
121
|
-
);
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
export {
|
|
125
|
-
Dialog,
|
|
126
|
-
DialogClose,
|
|
127
|
-
DialogContent,
|
|
128
|
-
DialogDescription,
|
|
129
|
-
DialogFooter,
|
|
130
|
-
DialogHeader,
|
|
131
|
-
DialogOverlay,
|
|
132
|
-
DialogPortal,
|
|
133
|
-
DialogTitle,
|
|
134
|
-
DialogTrigger,
|
|
135
|
-
};
|