@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,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 };
@@ -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 };
@@ -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";