@camox/ui 0.36.1 → 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.
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,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 };
@@ -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
- };