@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
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { VariantProps } from "class-variance-authority";
|
|
2
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
|
+
import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
|
|
4
|
+
import * as _$class_variance_authority_types0 from "class-variance-authority/types";
|
|
5
|
+
|
|
6
|
+
//#region src/components/tabs.d.ts
|
|
7
|
+
declare function Tabs({
|
|
8
|
+
className,
|
|
9
|
+
orientation,
|
|
10
|
+
...props
|
|
11
|
+
}: Tabs$1.Root.Props): _$react_jsx_runtime0.JSX.Element;
|
|
12
|
+
declare const tabsListVariants: (props?: ({
|
|
13
|
+
variant?: "default" | "line" | null | undefined;
|
|
14
|
+
} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
15
|
+
declare function TabsList({
|
|
16
|
+
className,
|
|
17
|
+
variant,
|
|
18
|
+
...props
|
|
19
|
+
}: Tabs$1.List.Props & VariantProps<typeof tabsListVariants>): _$react_jsx_runtime0.JSX.Element;
|
|
20
|
+
declare function TabsTrigger({
|
|
21
|
+
className,
|
|
22
|
+
...props
|
|
23
|
+
}: Tabs$1.Tab.Props): _$react_jsx_runtime0.JSX.Element;
|
|
24
|
+
declare function TabsContent({
|
|
25
|
+
className,
|
|
26
|
+
...props
|
|
27
|
+
}: Tabs$1.Panel.Props): _$react_jsx_runtime0.JSX.Element;
|
|
28
|
+
//#endregion
|
|
29
|
+
export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants };
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { cn } from "../lib/utils.js";
|
|
2
|
+
import { cva } from "class-variance-authority";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
|
|
5
|
+
|
|
6
|
+
//#region src/components/tabs.tsx
|
|
7
|
+
function Tabs({ className, orientation = "horizontal", ...props }) {
|
|
8
|
+
return /* @__PURE__ */ jsx(Tabs$1.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
|
+
const tabsListVariants = cva("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", {
|
|
16
|
+
variants: { variant: {
|
|
17
|
+
default: "bg-muted",
|
|
18
|
+
line: "gap-1 bg-transparent"
|
|
19
|
+
} },
|
|
20
|
+
defaultVariants: { variant: "default" }
|
|
21
|
+
});
|
|
22
|
+
function TabsList({ className, variant = "default", ...props }) {
|
|
23
|
+
return /* @__PURE__ */ jsx(Tabs$1.List, {
|
|
24
|
+
"data-slot": "tabs-list",
|
|
25
|
+
"data-variant": variant,
|
|
26
|
+
className: cn(tabsListVariants({ variant }), className),
|
|
27
|
+
...props
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
function TabsTrigger({ className, ...props }) {
|
|
31
|
+
return /* @__PURE__ */ jsx(Tabs$1.Tab, {
|
|
32
|
+
"data-slot": "tabs-trigger",
|
|
33
|
+
className: cn("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", "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", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", "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", className),
|
|
34
|
+
...props
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
function TabsContent({ className, ...props }) {
|
|
38
|
+
return /* @__PURE__ */ jsx(Tabs$1.Panel, {
|
|
39
|
+
"data-slot": "tabs-content",
|
|
40
|
+
className: cn("flex-1 text-sm outline-none", className),
|
|
41
|
+
...props
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
//#endregion
|
|
46
|
+
export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
|
+
|
|
4
|
+
//#region src/components/textarea.d.ts
|
|
5
|
+
declare function Textarea({
|
|
6
|
+
className,
|
|
7
|
+
...props
|
|
8
|
+
}: React.ComponentProps<"textarea">): _$react_jsx_runtime0.JSX.Element;
|
|
9
|
+
//#endregion
|
|
10
|
+
export { Textarea };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { cn } from "../lib/utils.js";
|
|
2
|
+
import "react";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
|
|
5
|
+
//#region src/components/textarea.tsx
|
|
6
|
+
function Textarea({ className, ...props }) {
|
|
7
|
+
return /* @__PURE__ */ jsx("textarea", {
|
|
8
|
+
"data-slot": "textarea",
|
|
9
|
+
className: cn("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", className),
|
|
10
|
+
...props
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
//#endregion
|
|
15
|
+
export { Textarea };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
|
+
import { ToasterProps, toast } from "sonner";
|
|
3
|
+
|
|
4
|
+
//#region src/components/toaster.d.ts
|
|
5
|
+
declare const Toaster: ({
|
|
6
|
+
theme,
|
|
7
|
+
className,
|
|
8
|
+
...props
|
|
9
|
+
}: ToasterProps) => _$react_jsx_runtime0.JSX.Element;
|
|
10
|
+
//#endregion
|
|
11
|
+
export { Toaster, toast };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { cn } from "../lib/utils.js";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { Toaster as Toaster$1, toast } from "sonner";
|
|
4
|
+
|
|
5
|
+
//#region src/components/toaster.tsx
|
|
6
|
+
const Toaster = ({ theme = "system", className, ...props }) => {
|
|
7
|
+
return /* @__PURE__ */ jsx(Toaster$1, {
|
|
8
|
+
theme,
|
|
9
|
+
className: cn("toaster group camox-studio-theme", theme === "dark" && "dark", className),
|
|
10
|
+
style: {
|
|
11
|
+
"--normal-bg": "var(--popover)",
|
|
12
|
+
"--normal-text": "var(--popover-foreground)",
|
|
13
|
+
"--normal-border": "var(--border)"
|
|
14
|
+
},
|
|
15
|
+
position: "top-center",
|
|
16
|
+
...props
|
|
17
|
+
});
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
//#endregion
|
|
21
|
+
export { Toaster, toast };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { VariantProps } from "class-variance-authority";
|
|
2
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
|
+
import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
|
|
4
|
+
import * as _$class_variance_authority_types0 from "class-variance-authority/types";
|
|
5
|
+
|
|
6
|
+
//#region src/components/toggle.d.ts
|
|
7
|
+
declare const toggleVariants: (props?: ({
|
|
8
|
+
variant?: "default" | "outline" | null | undefined;
|
|
9
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
10
|
+
} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
11
|
+
declare function Toggle({
|
|
12
|
+
className,
|
|
13
|
+
variant,
|
|
14
|
+
size,
|
|
15
|
+
...props
|
|
16
|
+
}: Toggle$1.Props & VariantProps<typeof toggleVariants>): _$react_jsx_runtime0.JSX.Element;
|
|
17
|
+
//#endregion
|
|
18
|
+
export { Toggle, toggleVariants };
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { cn } from "../lib/utils.js";
|
|
2
|
+
import { cva } from "class-variance-authority";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
|
|
5
|
+
|
|
6
|
+
//#region src/components/toggle.tsx
|
|
7
|
+
const toggleVariants = cva("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
|
+
variants: {
|
|
9
|
+
variant: {
|
|
10
|
+
default: "bg-transparent",
|
|
11
|
+
outline: "border border-input bg-transparent shadow-xs hover:bg-accent"
|
|
12
|
+
},
|
|
13
|
+
size: {
|
|
14
|
+
default: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
|
15
|
+
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",
|
|
16
|
+
lg: "h-10 min-w-10 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
defaultVariants: {
|
|
20
|
+
variant: "default",
|
|
21
|
+
size: "default"
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
function Toggle({ className, variant = "default", size = "default", ...props }) {
|
|
25
|
+
return /* @__PURE__ */ jsx(Toggle$1, {
|
|
26
|
+
"data-slot": "toggle",
|
|
27
|
+
className: cn(toggleVariants({
|
|
28
|
+
variant,
|
|
29
|
+
size,
|
|
30
|
+
className
|
|
31
|
+
})),
|
|
32
|
+
...props
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
//#endregion
|
|
37
|
+
export { Toggle, toggleVariants };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
|
+
import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
|
|
3
|
+
|
|
4
|
+
//#region src/components/tooltip.d.ts
|
|
5
|
+
declare function TooltipProvider({
|
|
6
|
+
delay,
|
|
7
|
+
...props
|
|
8
|
+
}: Tooltip$1.Provider.Props): _$react_jsx_runtime0.JSX.Element;
|
|
9
|
+
declare function Tooltip({
|
|
10
|
+
...props
|
|
11
|
+
}: Tooltip$1.Root.Props): _$react_jsx_runtime0.JSX.Element;
|
|
12
|
+
declare function TooltipTrigger({
|
|
13
|
+
...props
|
|
14
|
+
}: Tooltip$1.Trigger.Props): _$react_jsx_runtime0.JSX.Element;
|
|
15
|
+
declare function TooltipContent({
|
|
16
|
+
className,
|
|
17
|
+
side,
|
|
18
|
+
sideOffset,
|
|
19
|
+
align,
|
|
20
|
+
alignOffset,
|
|
21
|
+
children,
|
|
22
|
+
...props
|
|
23
|
+
}: Tooltip$1.Popup.Props & Pick<Tooltip$1.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): _$react_jsx_runtime0.JSX.Element;
|
|
24
|
+
//#endregion
|
|
25
|
+
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { cn } from "../lib/utils.js";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
|
|
4
|
+
|
|
5
|
+
//#region src/components/tooltip.tsx
|
|
6
|
+
function TooltipProvider({ delay = 0, ...props }) {
|
|
7
|
+
return /* @__PURE__ */ jsx(Tooltip$1.Provider, {
|
|
8
|
+
"data-slot": "tooltip-provider",
|
|
9
|
+
delay,
|
|
10
|
+
...props
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
function Tooltip({ ...props }) {
|
|
14
|
+
return /* @__PURE__ */ jsx(Tooltip$1.Root, {
|
|
15
|
+
"data-slot": "tooltip",
|
|
16
|
+
...props
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
function TooltipTrigger({ ...props }) {
|
|
20
|
+
return /* @__PURE__ */ jsx(Tooltip$1.Trigger, {
|
|
21
|
+
"data-slot": "tooltip-trigger",
|
|
22
|
+
...props
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
|
|
26
|
+
return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
|
|
27
|
+
align,
|
|
28
|
+
alignOffset,
|
|
29
|
+
side,
|
|
30
|
+
sideOffset,
|
|
31
|
+
className: "isolate z-50",
|
|
32
|
+
children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, {
|
|
33
|
+
"data-slot": "tooltip-content",
|
|
34
|
+
className: cn("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", className),
|
|
35
|
+
...props,
|
|
36
|
+
children: [children, /* @__PURE__ */ jsx(Tooltip$1.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" })]
|
|
37
|
+
})
|
|
38
|
+
}) });
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
//#endregion
|
|
42
|
+
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ClassValue } from "clsx";
|
|
2
|
+
|
|
3
|
+
//#region src/lib/utils.d.ts
|
|
4
|
+
declare function cn(...inputs: Array<ClassValue>): string;
|
|
5
|
+
/** Shared focus-ring + validation styles for all input-like elements (Input, Textarea, ContentEditable, etc.) */
|
|
6
|
+
declare const INPUT_FOCUS_STYLES = "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";
|
|
7
|
+
/** Shared base styles for input-like elements (border, text, shadow, transition, outline) */
|
|
8
|
+
declare const INPUT_BASE_STYLES = "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";
|
|
9
|
+
//#endregion
|
|
10
|
+
export { INPUT_BASE_STYLES, INPUT_FOCUS_STYLES, cn };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { clsx } from "clsx";
|
|
2
|
+
import { twMerge } from "tailwind-merge";
|
|
3
|
+
|
|
4
|
+
//#region src/lib/utils.ts
|
|
5
|
+
function cn(...inputs) {
|
|
6
|
+
return twMerge(clsx(inputs));
|
|
7
|
+
}
|
|
8
|
+
/** Shared focus-ring + validation styles for all input-like elements (Input, Textarea, ContentEditable, etc.) */
|
|
9
|
+
const INPUT_FOCUS_STYLES = "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";
|
|
10
|
+
/** Shared base styles for input-like elements (border, text, shadow, transition, outline) */
|
|
11
|
+
const INPUT_BASE_STYLES = "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";
|
|
12
|
+
|
|
13
|
+
//#endregion
|
|
14
|
+
export { INPUT_BASE_STYLES, INPUT_FOCUS_STYLES, cn };
|
package/package.json
CHANGED
|
@@ -1,123 +1,123 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@camox/ui",
|
|
3
|
-
"version": "0.36.
|
|
3
|
+
"version": "0.36.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"files": [
|
|
6
|
-
"
|
|
6
|
+
"dist"
|
|
7
7
|
],
|
|
8
8
|
"type": "module",
|
|
9
9
|
"exports": {
|
|
10
10
|
"./utils": {
|
|
11
|
-
"types": "./
|
|
12
|
-
"default": "./
|
|
11
|
+
"types": "./dist/lib/utils.d.ts",
|
|
12
|
+
"default": "./dist/lib/utils.js"
|
|
13
13
|
},
|
|
14
14
|
"./alert-dialog": {
|
|
15
|
-
"types": "./
|
|
16
|
-
"default": "./
|
|
15
|
+
"types": "./dist/components/alert-dialog.d.ts",
|
|
16
|
+
"default": "./dist/components/alert-dialog.js"
|
|
17
17
|
},
|
|
18
18
|
"./alert": {
|
|
19
|
-
"types": "./
|
|
20
|
-
"default": "./
|
|
19
|
+
"types": "./dist/components/alert.d.ts",
|
|
20
|
+
"default": "./dist/components/alert.js"
|
|
21
21
|
},
|
|
22
22
|
"./avatar": {
|
|
23
|
-
"types": "./
|
|
24
|
-
"default": "./
|
|
23
|
+
"types": "./dist/components/avatar.d.ts",
|
|
24
|
+
"default": "./dist/components/avatar.js"
|
|
25
25
|
},
|
|
26
26
|
"./badge": {
|
|
27
|
-
"types": "./
|
|
28
|
-
"default": "./
|
|
27
|
+
"types": "./dist/components/badge.d.ts",
|
|
28
|
+
"default": "./dist/components/badge.js"
|
|
29
29
|
},
|
|
30
30
|
"./button-group": {
|
|
31
|
-
"types": "./
|
|
32
|
-
"default": "./
|
|
31
|
+
"types": "./dist/components/button-group.d.ts",
|
|
32
|
+
"default": "./dist/components/button-group.js"
|
|
33
33
|
},
|
|
34
34
|
"./button": {
|
|
35
|
-
"types": "./
|
|
36
|
-
"default": "./
|
|
35
|
+
"types": "./dist/components/button.d.ts",
|
|
36
|
+
"default": "./dist/components/button.js"
|
|
37
37
|
},
|
|
38
38
|
"./command": {
|
|
39
|
-
"types": "./
|
|
40
|
-
"default": "./
|
|
39
|
+
"types": "./dist/components/command.d.ts",
|
|
40
|
+
"default": "./dist/components/command.js"
|
|
41
41
|
},
|
|
42
42
|
"./dialog": {
|
|
43
|
-
"types": "./
|
|
44
|
-
"default": "./
|
|
43
|
+
"types": "./dist/components/dialog.d.ts",
|
|
44
|
+
"default": "./dist/components/dialog.js"
|
|
45
45
|
},
|
|
46
46
|
"./dropdown-menu": {
|
|
47
|
-
"types": "./
|
|
48
|
-
"default": "./
|
|
47
|
+
"types": "./dist/components/dropdown-menu.d.ts",
|
|
48
|
+
"default": "./dist/components/dropdown-menu.js"
|
|
49
49
|
},
|
|
50
50
|
"./floating-toolbar": {
|
|
51
|
-
"types": "./
|
|
52
|
-
"default": "./
|
|
51
|
+
"types": "./dist/components/floating-toolbar.d.ts",
|
|
52
|
+
"default": "./dist/components/floating-toolbar.js"
|
|
53
53
|
},
|
|
54
54
|
"./input-group": {
|
|
55
|
-
"types": "./
|
|
56
|
-
"default": "./
|
|
55
|
+
"types": "./dist/components/input-group.d.ts",
|
|
56
|
+
"default": "./dist/components/input-group.js"
|
|
57
57
|
},
|
|
58
58
|
"./input": {
|
|
59
|
-
"types": "./
|
|
60
|
-
"default": "./
|
|
59
|
+
"types": "./dist/components/input.d.ts",
|
|
60
|
+
"default": "./dist/components/input.js"
|
|
61
61
|
},
|
|
62
62
|
"./kbd": {
|
|
63
|
-
"types": "./
|
|
64
|
-
"default": "./
|
|
63
|
+
"types": "./dist/components/kbd.d.ts",
|
|
64
|
+
"default": "./dist/components/kbd.js"
|
|
65
65
|
},
|
|
66
66
|
"./label": {
|
|
67
|
-
"types": "./
|
|
68
|
-
"default": "./
|
|
67
|
+
"types": "./dist/components/label.d.ts",
|
|
68
|
+
"default": "./dist/components/label.js"
|
|
69
69
|
},
|
|
70
70
|
"./panel": {
|
|
71
|
-
"types": "./
|
|
72
|
-
"default": "./
|
|
71
|
+
"types": "./dist/components/panel.d.ts",
|
|
72
|
+
"default": "./dist/components/panel.js"
|
|
73
73
|
},
|
|
74
74
|
"./popover": {
|
|
75
|
-
"types": "./
|
|
76
|
-
"default": "./
|
|
75
|
+
"types": "./dist/components/popover.d.ts",
|
|
76
|
+
"default": "./dist/components/popover.js"
|
|
77
77
|
},
|
|
78
78
|
"./select": {
|
|
79
|
-
"types": "./
|
|
80
|
-
"default": "./
|
|
79
|
+
"types": "./dist/components/select.d.ts",
|
|
80
|
+
"default": "./dist/components/select.js"
|
|
81
81
|
},
|
|
82
82
|
"./separator": {
|
|
83
|
-
"types": "./
|
|
84
|
-
"default": "./
|
|
83
|
+
"types": "./dist/components/separator.d.ts",
|
|
84
|
+
"default": "./dist/components/separator.js"
|
|
85
85
|
},
|
|
86
86
|
"./sheet": {
|
|
87
|
-
"types": "./
|
|
88
|
-
"default": "./
|
|
87
|
+
"types": "./dist/components/sheet.d.ts",
|
|
88
|
+
"default": "./dist/components/sheet.js"
|
|
89
89
|
},
|
|
90
90
|
"./skeleton": {
|
|
91
|
-
"types": "./
|
|
92
|
-
"default": "./
|
|
91
|
+
"types": "./dist/components/skeleton.d.ts",
|
|
92
|
+
"default": "./dist/components/skeleton.js"
|
|
93
93
|
},
|
|
94
94
|
"./spinner": {
|
|
95
|
-
"types": "./
|
|
96
|
-
"default": "./
|
|
95
|
+
"types": "./dist/components/spinner.d.ts",
|
|
96
|
+
"default": "./dist/components/spinner.js"
|
|
97
97
|
},
|
|
98
98
|
"./switch": {
|
|
99
|
-
"types": "./
|
|
100
|
-
"default": "./
|
|
99
|
+
"types": "./dist/components/switch.d.ts",
|
|
100
|
+
"default": "./dist/components/switch.js"
|
|
101
101
|
},
|
|
102
102
|
"./tabs": {
|
|
103
|
-
"types": "./
|
|
104
|
-
"default": "./
|
|
103
|
+
"types": "./dist/components/tabs.d.ts",
|
|
104
|
+
"default": "./dist/components/tabs.js"
|
|
105
105
|
},
|
|
106
106
|
"./textarea": {
|
|
107
|
-
"types": "./
|
|
108
|
-
"default": "./
|
|
107
|
+
"types": "./dist/components/textarea.d.ts",
|
|
108
|
+
"default": "./dist/components/textarea.js"
|
|
109
109
|
},
|
|
110
110
|
"./toaster": {
|
|
111
|
-
"types": "./
|
|
112
|
-
"default": "./
|
|
111
|
+
"types": "./dist/components/toaster.d.ts",
|
|
112
|
+
"default": "./dist/components/toaster.js"
|
|
113
113
|
},
|
|
114
114
|
"./toggle": {
|
|
115
|
-
"types": "./
|
|
116
|
-
"default": "./
|
|
115
|
+
"types": "./dist/components/toggle.d.ts",
|
|
116
|
+
"default": "./dist/components/toggle.js"
|
|
117
117
|
},
|
|
118
118
|
"./tooltip": {
|
|
119
|
-
"types": "./
|
|
120
|
-
"default": "./
|
|
119
|
+
"types": "./dist/components/tooltip.d.ts",
|
|
120
|
+
"default": "./dist/components/tooltip.js"
|
|
121
121
|
}
|
|
122
122
|
},
|
|
123
123
|
"dependencies": {
|
|
@@ -141,5 +141,8 @@
|
|
|
141
141
|
"tags": [
|
|
142
142
|
"type:pkg"
|
|
143
143
|
]
|
|
144
|
+
},
|
|
145
|
+
"scripts": {
|
|
146
|
+
"build": "vp pack"
|
|
144
147
|
}
|
|
145
148
|
}
|
|
@@ -1,160 +0,0 @@
|
|
|
1
|
-
import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
|
|
4
|
-
import { cn } from "../lib/utils";
|
|
5
|
-
import { Button } from "./button";
|
|
6
|
-
|
|
7
|
-
function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
|
|
8
|
-
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
|
|
12
|
-
return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
|
|
16
|
-
return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) {
|
|
20
|
-
return (
|
|
21
|
-
<AlertDialogPrimitive.Backdrop
|
|
22
|
-
data-slot="alert-dialog-overlay"
|
|
23
|
-
className={cn(
|
|
24
|
-
"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",
|
|
25
|
-
className,
|
|
26
|
-
)}
|
|
27
|
-
{...props}
|
|
28
|
-
/>
|
|
29
|
-
);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
function AlertDialogContent({
|
|
33
|
-
className,
|
|
34
|
-
size = "default",
|
|
35
|
-
...props
|
|
36
|
-
}: AlertDialogPrimitive.Popup.Props & {
|
|
37
|
-
size?: "default" | "sm";
|
|
38
|
-
}) {
|
|
39
|
-
return (
|
|
40
|
-
<AlertDialogPortal>
|
|
41
|
-
<AlertDialogOverlay />
|
|
42
|
-
<AlertDialogPrimitive.Popup
|
|
43
|
-
data-slot="alert-dialog-content"
|
|
44
|
-
data-size={size}
|
|
45
|
-
className={cn(
|
|
46
|
-
"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",
|
|
47
|
-
className,
|
|
48
|
-
)}
|
|
49
|
-
{...props}
|
|
50
|
-
/>
|
|
51
|
-
</AlertDialogPortal>
|
|
52
|
-
);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
56
|
-
return (
|
|
57
|
-
<div
|
|
58
|
-
data-slot="alert-dialog-header"
|
|
59
|
-
className={cn(
|
|
60
|
-
"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]",
|
|
61
|
-
className,
|
|
62
|
-
)}
|
|
63
|
-
{...props}
|
|
64
|
-
/>
|
|
65
|
-
);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
|
|
69
|
-
return (
|
|
70
|
-
<div
|
|
71
|
-
data-slot="alert-dialog-footer"
|
|
72
|
-
className={cn(
|
|
73
|
-
"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",
|
|
74
|
-
className,
|
|
75
|
-
)}
|
|
76
|
-
{...props}
|
|
77
|
-
/>
|
|
78
|
-
);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">) {
|
|
82
|
-
return (
|
|
83
|
-
<div
|
|
84
|
-
data-slot="alert-dialog-media"
|
|
85
|
-
className={cn(
|
|
86
|
-
"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",
|
|
87
|
-
className,
|
|
88
|
-
)}
|
|
89
|
-
{...props}
|
|
90
|
-
/>
|
|
91
|
-
);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
function AlertDialogTitle({
|
|
95
|
-
className,
|
|
96
|
-
...props
|
|
97
|
-
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
|
|
98
|
-
return (
|
|
99
|
-
<AlertDialogPrimitive.Title
|
|
100
|
-
data-slot="alert-dialog-title"
|
|
101
|
-
className={cn(
|
|
102
|
-
"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",
|
|
103
|
-
className,
|
|
104
|
-
)}
|
|
105
|
-
{...props}
|
|
106
|
-
/>
|
|
107
|
-
);
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
function AlertDialogDescription({
|
|
111
|
-
className,
|
|
112
|
-
...props
|
|
113
|
-
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
|
|
114
|
-
return (
|
|
115
|
-
<AlertDialogPrimitive.Description
|
|
116
|
-
data-slot="alert-dialog-description"
|
|
117
|
-
className={cn(
|
|
118
|
-
"text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
|
|
119
|
-
className,
|
|
120
|
-
)}
|
|
121
|
-
{...props}
|
|
122
|
-
/>
|
|
123
|
-
);
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>) {
|
|
127
|
-
return <Button data-slot="alert-dialog-action" className={cn(className)} {...props} />;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
function AlertDialogCancel({
|
|
131
|
-
className,
|
|
132
|
-
variant = "outline",
|
|
133
|
-
size = "default",
|
|
134
|
-
...props
|
|
135
|
-
}: AlertDialogPrimitive.Close.Props &
|
|
136
|
-
Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
|
|
137
|
-
return (
|
|
138
|
-
<AlertDialogPrimitive.Close
|
|
139
|
-
data-slot="alert-dialog-cancel"
|
|
140
|
-
className={cn(className)}
|
|
141
|
-
render={<Button variant={variant} size={size} />}
|
|
142
|
-
{...props}
|
|
143
|
-
/>
|
|
144
|
-
);
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
export {
|
|
148
|
-
AlertDialog,
|
|
149
|
-
AlertDialogAction,
|
|
150
|
-
AlertDialogCancel,
|
|
151
|
-
AlertDialogContent,
|
|
152
|
-
AlertDialogDescription,
|
|
153
|
-
AlertDialogFooter,
|
|
154
|
-
AlertDialogHeader,
|
|
155
|
-
AlertDialogMedia,
|
|
156
|
-
AlertDialogOverlay,
|
|
157
|
-
AlertDialogPortal,
|
|
158
|
-
AlertDialogTitle,
|
|
159
|
-
AlertDialogTrigger,
|
|
160
|
-
};
|