@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
@@ -0,0 +1,58 @@
1
+ import { Button } from "./button.js";
2
+ import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
3
+ import * as React from "react";
4
+ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
5
+
6
+ //#region src/components/alert-dialog.d.ts
7
+ declare function AlertDialog({
8
+ ...props
9
+ }: AlertDialog$1.Root.Props): _$react_jsx_runtime0.JSX.Element;
10
+ declare function AlertDialogTrigger({
11
+ ...props
12
+ }: AlertDialog$1.Trigger.Props): _$react_jsx_runtime0.JSX.Element;
13
+ declare function AlertDialogPortal({
14
+ ...props
15
+ }: AlertDialog$1.Portal.Props): _$react_jsx_runtime0.JSX.Element;
16
+ declare function AlertDialogOverlay({
17
+ className,
18
+ ...props
19
+ }: AlertDialog$1.Backdrop.Props): _$react_jsx_runtime0.JSX.Element;
20
+ declare function AlertDialogContent({
21
+ className,
22
+ size,
23
+ ...props
24
+ }: AlertDialog$1.Popup.Props & {
25
+ size?: "default" | "sm";
26
+ }): _$react_jsx_runtime0.JSX.Element;
27
+ declare function AlertDialogHeader({
28
+ className,
29
+ ...props
30
+ }: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
31
+ declare function AlertDialogFooter({
32
+ className,
33
+ ...props
34
+ }: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
35
+ declare function AlertDialogMedia({
36
+ className,
37
+ ...props
38
+ }: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
39
+ declare function AlertDialogTitle({
40
+ className,
41
+ ...props
42
+ }: React.ComponentProps<typeof AlertDialog$1.Title>): _$react_jsx_runtime0.JSX.Element;
43
+ declare function AlertDialogDescription({
44
+ className,
45
+ ...props
46
+ }: React.ComponentProps<typeof AlertDialog$1.Description>): _$react_jsx_runtime0.JSX.Element;
47
+ declare function AlertDialogAction({
48
+ className,
49
+ ...props
50
+ }: React.ComponentProps<typeof Button>): _$react_jsx_runtime0.JSX.Element;
51
+ declare function AlertDialogCancel({
52
+ className,
53
+ variant,
54
+ size,
55
+ ...props
56
+ }: AlertDialog$1.Close.Props & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): _$react_jsx_runtime0.JSX.Element;
57
+ //#endregion
58
+ export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
@@ -0,0 +1,96 @@
1
+ import { cn } from "../lib/utils.js";
2
+ import { Button } from "./button.js";
3
+ import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
4
+ import "react";
5
+ import { jsx, jsxs } from "react/jsx-runtime";
6
+
7
+ //#region src/components/alert-dialog.tsx
8
+ function AlertDialog({ ...props }) {
9
+ return /* @__PURE__ */ jsx(AlertDialog$1.Root, {
10
+ "data-slot": "alert-dialog",
11
+ ...props
12
+ });
13
+ }
14
+ function AlertDialogTrigger({ ...props }) {
15
+ return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, {
16
+ "data-slot": "alert-dialog-trigger",
17
+ ...props
18
+ });
19
+ }
20
+ function AlertDialogPortal({ ...props }) {
21
+ return /* @__PURE__ */ jsx(AlertDialog$1.Portal, {
22
+ "data-slot": "alert-dialog-portal",
23
+ ...props
24
+ });
25
+ }
26
+ function AlertDialogOverlay({ className, ...props }) {
27
+ return /* @__PURE__ */ jsx(AlertDialog$1.Backdrop, {
28
+ "data-slot": "alert-dialog-overlay",
29
+ className: cn("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", className),
30
+ ...props
31
+ });
32
+ }
33
+ function AlertDialogContent({ className, size = "default", ...props }) {
34
+ return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
35
+ "data-slot": "alert-dialog-content",
36
+ "data-size": size,
37
+ className: cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-popover p-6 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg 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", className),
38
+ ...props
39
+ })] });
40
+ }
41
+ function AlertDialogHeader({ className, ...props }) {
42
+ return /* @__PURE__ */ jsx("div", {
43
+ "data-slot": "alert-dialog-header",
44
+ className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className),
45
+ ...props
46
+ });
47
+ }
48
+ function AlertDialogFooter({ className, ...props }) {
49
+ return /* @__PURE__ */ jsx("div", {
50
+ "data-slot": "alert-dialog-footer",
51
+ className: cn("flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className),
52
+ ...props
53
+ });
54
+ }
55
+ function AlertDialogMedia({ className, ...props }) {
56
+ return /* @__PURE__ */ jsx("div", {
57
+ "data-slot": "alert-dialog-media",
58
+ className: cn("mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8", className),
59
+ ...props
60
+ });
61
+ }
62
+ function AlertDialogTitle({ className, ...props }) {
63
+ return /* @__PURE__ */ jsx(AlertDialog$1.Title, {
64
+ "data-slot": "alert-dialog-title",
65
+ className: cn("text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className),
66
+ ...props
67
+ });
68
+ }
69
+ function AlertDialogDescription({ className, ...props }) {
70
+ return /* @__PURE__ */ jsx(AlertDialog$1.Description, {
71
+ "data-slot": "alert-dialog-description",
72
+ className: cn("text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className),
73
+ ...props
74
+ });
75
+ }
76
+ function AlertDialogAction({ className, ...props }) {
77
+ return /* @__PURE__ */ jsx(Button, {
78
+ "data-slot": "alert-dialog-action",
79
+ className: cn(className),
80
+ ...props
81
+ });
82
+ }
83
+ function AlertDialogCancel({ className, variant = "outline", size = "default", ...props }) {
84
+ return /* @__PURE__ */ jsx(AlertDialog$1.Close, {
85
+ "data-slot": "alert-dialog-cancel",
86
+ className: cn(className),
87
+ render: /* @__PURE__ */ jsx(Button, {
88
+ variant,
89
+ size
90
+ }),
91
+ ...props
92
+ });
93
+ }
94
+
95
+ //#endregion
96
+ export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
@@ -0,0 +1,28 @@
1
+ import * as React from "react";
2
+ import { VariantProps } from "class-variance-authority";
3
+ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
4
+ import * as _$class_variance_authority_types0 from "class-variance-authority/types";
5
+
6
+ //#region src/components/alert.d.ts
7
+ declare const alertVariants: (props?: ({
8
+ variant?: "default" | "destructive" | null | undefined;
9
+ } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
10
+ declare function Alert({
11
+ className,
12
+ variant,
13
+ ...props
14
+ }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): _$react_jsx_runtime0.JSX.Element;
15
+ declare function AlertTitle({
16
+ className,
17
+ ...props
18
+ }: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
19
+ declare function AlertDescription({
20
+ className,
21
+ ...props
22
+ }: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
23
+ declare function AlertAction({
24
+ className,
25
+ ...props
26
+ }: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
27
+ //#endregion
28
+ export { Alert, AlertAction, AlertDescription, AlertTitle };
@@ -0,0 +1,45 @@
1
+ import { cn } from "../lib/utils.js";
2
+ import "react";
3
+ import { cva } from "class-variance-authority";
4
+ import { jsx } from "react/jsx-runtime";
5
+
6
+ //#region src/components/alert.tsx
7
+ const alertVariants = cva("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
+ variants: { variant: {
9
+ default: "bg-card text-card-foreground",
10
+ destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current"
11
+ } },
12
+ defaultVariants: { variant: "default" }
13
+ });
14
+ function Alert({ className, variant, ...props }) {
15
+ return /* @__PURE__ */ jsx("div", {
16
+ "data-slot": "alert",
17
+ role: "alert",
18
+ className: cn(alertVariants({ variant }), className),
19
+ ...props
20
+ });
21
+ }
22
+ function AlertTitle({ className, ...props }) {
23
+ return /* @__PURE__ */ jsx("div", {
24
+ "data-slot": "alert-title",
25
+ className: cn("font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground", className),
26
+ ...props
27
+ });
28
+ }
29
+ function AlertDescription({ className, ...props }) {
30
+ return /* @__PURE__ */ jsx("div", {
31
+ "data-slot": "alert-description",
32
+ className: cn("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", className),
33
+ ...props
34
+ });
35
+ }
36
+ function AlertAction({ className, ...props }) {
37
+ return /* @__PURE__ */ jsx("div", {
38
+ "data-slot": "alert-action",
39
+ className: cn("absolute top-2.5 right-3", className),
40
+ ...props
41
+ });
42
+ }
43
+
44
+ //#endregion
45
+ export { Alert, AlertAction, AlertDescription, AlertTitle };
@@ -0,0 +1,34 @@
1
+ import * as React from "react";
2
+ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
3
+ import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
4
+
5
+ //#region src/components/avatar.d.ts
6
+ declare function Avatar({
7
+ className,
8
+ size,
9
+ ...props
10
+ }: Avatar$1.Root.Props & {
11
+ size?: "default" | "sm" | "lg";
12
+ }): _$react_jsx_runtime0.JSX.Element;
13
+ declare function AvatarImage({
14
+ className,
15
+ ...props
16
+ }: Avatar$1.Image.Props): _$react_jsx_runtime0.JSX.Element;
17
+ declare function AvatarFallback({
18
+ className,
19
+ ...props
20
+ }: Avatar$1.Fallback.Props): _$react_jsx_runtime0.JSX.Element;
21
+ declare function AvatarBadge({
22
+ className,
23
+ ...props
24
+ }: React.ComponentProps<"span">): _$react_jsx_runtime0.JSX.Element;
25
+ declare function AvatarGroup({
26
+ className,
27
+ ...props
28
+ }: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
29
+ declare function AvatarGroupCount({
30
+ className,
31
+ ...props
32
+ }: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
33
+ //#endregion
34
+ export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };
@@ -0,0 +1,52 @@
1
+ import { cn } from "../lib/utils.js";
2
+ import "react";
3
+ import { jsx } from "react/jsx-runtime";
4
+ import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
5
+
6
+ //#region src/components/avatar.tsx
7
+ function Avatar({ className, size = "default", ...props }) {
8
+ return /* @__PURE__ */ jsx(Avatar$1.Root, {
9
+ "data-slot": "avatar",
10
+ "data-size": size,
11
+ className: cn("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", className),
12
+ ...props
13
+ });
14
+ }
15
+ function AvatarImage({ className, ...props }) {
16
+ return /* @__PURE__ */ jsx(Avatar$1.Image, {
17
+ "data-slot": "avatar-image",
18
+ className: cn("aspect-square size-full rounded-full object-cover", className),
19
+ ...props
20
+ });
21
+ }
22
+ function AvatarFallback({ className, ...props }) {
23
+ return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
24
+ "data-slot": "avatar-fallback",
25
+ className: cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", className),
26
+ ...props
27
+ });
28
+ }
29
+ function AvatarBadge({ className, ...props }) {
30
+ return /* @__PURE__ */ jsx("span", {
31
+ "data-slot": "avatar-badge",
32
+ className: cn("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", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className),
33
+ ...props
34
+ });
35
+ }
36
+ function AvatarGroup({ className, ...props }) {
37
+ return /* @__PURE__ */ jsx("div", {
38
+ "data-slot": "avatar-group",
39
+ className: cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className),
40
+ ...props
41
+ });
42
+ }
43
+ function AvatarGroupCount({ className, ...props }) {
44
+ return /* @__PURE__ */ jsx("div", {
45
+ "data-slot": "avatar-group-count",
46
+ className: cn("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", className),
47
+ ...props
48
+ });
49
+ }
50
+
51
+ //#endregion
52
+ export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };
@@ -0,0 +1,19 @@
1
+ import * as _$react from "react";
2
+ import { VariantProps } from "class-variance-authority";
3
+ import { useRender } from "@base-ui/react/use-render";
4
+ import * as _$class_variance_authority_types0 from "class-variance-authority/types";
5
+
6
+ //#region src/components/badge.d.ts
7
+ declare const badgeVariants: (props?: ({
8
+ variant?: "default" | "destructive" | "secondary" | "outline" | "ghost" | "link" | null | undefined;
9
+ size?: "default" | "sm" | null | undefined;
10
+ } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
11
+ declare function Badge({
12
+ className,
13
+ variant,
14
+ size,
15
+ render,
16
+ ...props
17
+ }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>>;
18
+ //#endregion
19
+ export { Badge, badgeVariants };
@@ -0,0 +1,44 @@
1
+ import { cn } from "../lib/utils.js";
2
+ import { cva } from "class-variance-authority";
3
+ import { mergeProps } from "@base-ui/react/merge-props";
4
+ import { useRender } from "@base-ui/react/use-render";
5
+
6
+ //#region src/components/badge.tsx
7
+ const badgeVariants = cva("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!", {
8
+ variants: {
9
+ variant: {
10
+ default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
11
+ secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
12
+ destructive: "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",
13
+ outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
14
+ ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
15
+ link: "text-primary underline-offset-4 hover:underline"
16
+ },
17
+ size: {
18
+ default: "h-5 px-2 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
19
+ sm: "h-4 px-1.5 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1"
20
+ }
21
+ },
22
+ defaultVariants: {
23
+ variant: "default",
24
+ size: "default"
25
+ }
26
+ });
27
+ function Badge({ className, variant = "default", size = "default", render, ...props }) {
28
+ return useRender({
29
+ defaultTagName: "span",
30
+ props: mergeProps({ className: cn(badgeVariants({
31
+ variant,
32
+ size
33
+ }), className) }, props),
34
+ render,
35
+ state: {
36
+ slot: "badge",
37
+ variant,
38
+ size
39
+ }
40
+ });
41
+ }
42
+
43
+ //#endregion
44
+ export { Badge, badgeVariants };
@@ -0,0 +1,28 @@
1
+ import { Separator } from "./separator.js";
2
+ import * as _$react from "react";
3
+ import { VariantProps } from "class-variance-authority";
4
+ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
5
+ import { useRender } from "@base-ui/react/use-render";
6
+ import * as _$class_variance_authority_types0 from "class-variance-authority/types";
7
+
8
+ //#region src/components/button-group.d.ts
9
+ declare const buttonGroupVariants: (props?: ({
10
+ orientation?: "horizontal" | "vertical" | null | undefined;
11
+ } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
12
+ declare function ButtonGroup({
13
+ className,
14
+ orientation,
15
+ ...props
16
+ }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): _$react_jsx_runtime0.JSX.Element;
17
+ declare function ButtonGroupText({
18
+ className,
19
+ render,
20
+ ...props
21
+ }: useRender.ComponentProps<"div">): _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>>;
22
+ declare function ButtonGroupSeparator({
23
+ className,
24
+ orientation,
25
+ ...props
26
+ }: React.ComponentProps<typeof Separator>): _$react_jsx_runtime0.JSX.Element;
27
+ //#endregion
28
+ export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
@@ -0,0 +1,43 @@
1
+ import { cn } from "../lib/utils.js";
2
+ import { Separator } from "./separator.js";
3
+ import { cva } from "class-variance-authority";
4
+ import { jsx } from "react/jsx-runtime";
5
+ import { mergeProps } from "@base-ui/react/merge-props";
6
+ import { useRender } from "@base-ui/react/use-render";
7
+
8
+ //#region src/components/button-group.tsx
9
+ const buttonGroupVariants = cva("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
+ variants: { orientation: {
11
+ horizontal: "*: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",
12
+ vertical: "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"
13
+ } },
14
+ defaultVariants: { orientation: "horizontal" }
15
+ });
16
+ function ButtonGroup({ className, orientation, ...props }) {
17
+ return /* @__PURE__ */ jsx("div", {
18
+ role: "group",
19
+ "data-slot": "button-group",
20
+ "data-orientation": orientation,
21
+ className: cn(buttonGroupVariants({ orientation }), className),
22
+ ...props
23
+ });
24
+ }
25
+ function ButtonGroupText({ className, render, ...props }) {
26
+ return useRender({
27
+ defaultTagName: "div",
28
+ props: mergeProps({ className: cn("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", className) }, props),
29
+ render,
30
+ state: { slot: "button-group-text" }
31
+ });
32
+ }
33
+ function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
34
+ return /* @__PURE__ */ jsx(Separator, {
35
+ "data-slot": "button-group-separator",
36
+ orientation,
37
+ className: cn("relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto", className),
38
+ ...props
39
+ });
40
+ }
41
+
42
+ //#endregion
43
+ export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
@@ -0,0 +1,18 @@
1
+ import { Button as Button$1 } from "@base-ui/react/button";
2
+ import { VariantProps } from "class-variance-authority";
3
+ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
4
+ import * as _$class_variance_authority_types0 from "class-variance-authority/types";
5
+
6
+ //#region src/components/button.d.ts
7
+ declare const buttonVariants: (props?: ({
8
+ variant?: "default" | "destructive" | "secondary" | "outline" | "ghost" | "link" | null | undefined;
9
+ size?: "default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
10
+ } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
11
+ declare function Button({
12
+ className,
13
+ variant,
14
+ size,
15
+ ...props
16
+ }: Button$1.Props & VariantProps<typeof buttonVariants>): _$react_jsx_runtime0.JSX.Element;
17
+ //#endregion
18
+ export { Button, buttonVariants };
@@ -0,0 +1,46 @@
1
+ import { cn } from "../lib/utils.js";
2
+ import { Button as Button$1 } from "@base-ui/react/button";
3
+ import { cva } from "class-variance-authority";
4
+ import { jsx } from "react/jsx-runtime";
5
+
6
+ //#region src/components/button.tsx
7
+ const buttonVariants = cva("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
+ variants: {
9
+ variant: {
10
+ default: "bg-primary text-primary-foreground hover:bg-primary/80",
11
+ outline: "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",
12
+ secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
13
+ ghost: "hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground dark:hover:bg-accent/50",
14
+ destructive: "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",
15
+ link: "text-primary underline-offset-4 hover:underline"
16
+ },
17
+ size: {
18
+ default: "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",
19
+ 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",
20
+ 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",
21
+ lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
22
+ icon: "size-9",
23
+ "icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
24
+ "icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
25
+ "icon-lg": "size-10"
26
+ }
27
+ },
28
+ defaultVariants: {
29
+ variant: "default",
30
+ size: "default"
31
+ }
32
+ });
33
+ function Button({ className, variant = "default", size = "default", ...props }) {
34
+ return /* @__PURE__ */ jsx(Button$1, {
35
+ "data-slot": "button",
36
+ className: cn(buttonVariants({
37
+ variant,
38
+ size,
39
+ className
40
+ })),
41
+ ...props
42
+ });
43
+ }
44
+
45
+ //#endregion
46
+ export { Button, buttonVariants };
@@ -0,0 +1,58 @@
1
+ import { Dialog } from "./dialog.js";
2
+ import * as React from "react";
3
+ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
4
+ import { Command as Command$1 } from "cmdk";
5
+
6
+ //#region src/components/command.d.ts
7
+ declare function Command({
8
+ className,
9
+ ...props
10
+ }: React.ComponentProps<typeof Command$1>): _$react_jsx_runtime0.JSX.Element;
11
+ declare function CommandDialog({
12
+ title,
13
+ description,
14
+ children,
15
+ className,
16
+ showCloseButton,
17
+ ...props
18
+ }: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
19
+ title?: string;
20
+ description?: string;
21
+ className?: string;
22
+ showCloseButton?: boolean;
23
+ children: React.ReactNode;
24
+ }): _$react_jsx_runtime0.JSX.Element;
25
+ declare function CommandInput({
26
+ className,
27
+ ...props
28
+ }: React.ComponentProps<typeof Command$1.Input>): _$react_jsx_runtime0.JSX.Element;
29
+ declare function CommandList({
30
+ className,
31
+ ...props
32
+ }: React.ComponentProps<typeof Command$1.List>): _$react_jsx_runtime0.JSX.Element;
33
+ declare function CommandEmpty({
34
+ className,
35
+ ...props
36
+ }: React.ComponentProps<typeof Command$1.Empty>): _$react_jsx_runtime0.JSX.Element;
37
+ declare function CommandGroup({
38
+ className,
39
+ ...props
40
+ }: React.ComponentProps<typeof Command$1.Group>): _$react_jsx_runtime0.JSX.Element;
41
+ declare function CommandSeparator({
42
+ className,
43
+ ...props
44
+ }: React.ComponentProps<typeof Command$1.Separator>): _$react_jsx_runtime0.JSX.Element;
45
+ declare function CommandItem({
46
+ className,
47
+ children,
48
+ hideCheck,
49
+ ...props
50
+ }: React.ComponentProps<typeof Command$1.Item> & {
51
+ hideCheck?: boolean;
52
+ }): _$react_jsx_runtime0.JSX.Element;
53
+ declare function CommandShortcut({
54
+ className,
55
+ ...props
56
+ }: React.ComponentProps<"span">): _$react_jsx_runtime0.JSX.Element;
57
+ //#endregion
58
+ export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };