@kayleai/ui 0.0.1
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/LICENSE +21 -0
- package/README.md +15 -0
- package/dist/accordion.d.ts +7 -0
- package/dist/accordion.d.ts.map +1 -0
- package/dist/accordion.js +17 -0
- package/dist/alert-dialog.d.ts +19 -0
- package/dist/alert-dialog.d.ts.map +1 -0
- package/dist/alert-dialog.js +41 -0
- package/dist/alert.d.ts +11 -0
- package/dist/alert.d.ts.map +1 -0
- package/dist/alert.js +27 -0
- package/dist/aspect-ratio.d.ts +5 -0
- package/dist/aspect-ratio.d.ts.map +1 -0
- package/dist/aspect-ratio.js +8 -0
- package/dist/avatar.d.ts +12 -0
- package/dist/avatar.d.ts.map +1 -0
- package/dist/avatar.js +23 -0
- package/dist/badge.d.ts +8 -0
- package/dist/badge.d.ts.map +1 -0
- package/dist/badge.js +33 -0
- package/dist/breadcrumb.d.ts +11 -0
- package/dist/breadcrumb.d.ts.map +1 -0
- package/dist/breadcrumb.js +38 -0
- package/dist/button-group.d.ts +11 -0
- package/dist/button-group.d.ts.map +1 -0
- package/dist/button-group.js +38 -0
- package/dist/button.d.ts +9 -0
- package/dist/button.d.ts.map +1 -0
- package/dist/button.js +34 -0
- package/dist/calendar.d.ts +8 -0
- package/dist/calendar.d.ts.map +1 -0
- package/dist/calendar.js +81 -0
- package/dist/card.d.ts +12 -0
- package/dist/card.d.ts.map +1 -0
- package/dist/card.js +24 -0
- package/dist/carousel.d.ts +28 -0
- package/dist/carousel.d.ts.map +1 -0
- package/dist/carousel.js +95 -0
- package/dist/chart.d.ts +41 -0
- package/dist/chart.d.ts.map +1 -0
- package/dist/chart.js +135 -0
- package/dist/checkbox.d.ts +4 -0
- package/dist/checkbox.d.ts.map +1 -0
- package/dist/checkbox.js +8 -0
- package/dist/collapsible.d.ts +6 -0
- package/dist/collapsible.d.ts.map +1 -0
- package/dist/collapsible.js +13 -0
- package/dist/combobox.d.ts +24 -0
- package/dist/combobox.d.ts.map +1 -0
- package/dist/combobox.js +58 -0
- package/dist/command.d.ts +20 -0
- package/dist/command.d.ts.map +1 -0
- package/dist/command.js +35 -0
- package/dist/context-menu.d.ts +26 -0
- package/dist/context-menu.d.ts.map +1 -0
- package/dist/context-menu.js +50 -0
- package/dist/css/index.css +129 -0
- package/dist/dialog.d.ts +18 -0
- package/dist/dialog.d.ts.map +1 -0
- package/dist/dialog.js +37 -0
- package/dist/drawer.d.ts +14 -0
- package/dist/drawer.d.ts.map +1 -0
- package/dist/drawer.js +35 -0
- package/dist/dropdown-menu.d.ts +26 -0
- package/dist/dropdown-menu.d.ts.map +1 -0
- package/dist/dropdown-menu.js +50 -0
- package/dist/empty.d.ts +12 -0
- package/dist/empty.d.ts.map +1 -0
- package/dist/empty.js +33 -0
- package/dist/field.d.ts +25 -0
- package/dist/field.d.ts.map +1 -0
- package/dist/field.js +72 -0
- package/dist/hover-card.d.ts +6 -0
- package/dist/hover-card.d.ts.map +1 -0
- package/dist/hover-card.js +14 -0
- package/dist/input-group.d.ts +19 -0
- package/dist/input-group.d.ts.map +1 -0
- package/dist/input-group.js +60 -0
- package/dist/input-otp.d.ts +11 -0
- package/dist/input-otp.d.ts.map +1 -0
- package/dist/input-otp.js +24 -0
- package/dist/input.d.ts +4 -0
- package/dist/input.d.ts.map +1 -0
- package/dist/input.js +7 -0
- package/dist/item.d.ts +23 -0
- package/dist/item.d.ts.map +1 -0
- package/dist/item.js +80 -0
- package/dist/kbd.d.ts +4 -0
- package/dist/kbd.d.ts.map +1 -0
- package/dist/kbd.js +9 -0
- package/dist/label.d.ts +4 -0
- package/dist/label.d.ts.map +1 -0
- package/dist/label.js +9 -0
- package/dist/menubar.d.ts +24 -0
- package/dist/menubar.d.ts.map +1 -0
- package/dist/menubar.js +55 -0
- package/dist/navigation-menu.d.ts +12 -0
- package/dist/navigation-menu.d.ts.map +1 -0
- package/dist/navigation-menu.js +31 -0
- package/dist/pagination.d.ts +14 -0
- package/dist/pagination.d.ts.map +1 -0
- package/dist/pagination.js +26 -0
- package/dist/popover.d.ts +10 -0
- package/dist/popover.d.ts.map +1 -0
- package/dist/popover.js +22 -0
- package/dist/progress.d.ts +8 -0
- package/dist/progress.d.ts.map +1 -0
- package/dist/progress.js +20 -0
- package/dist/radio-group.d.ts +6 -0
- package/dist/radio-group.d.ts.map +1 -0
- package/dist/radio-group.js +12 -0
- package/dist/resizable.d.ts +9 -0
- package/dist/resizable.d.ts.map +1 -0
- package/dist/resizable.js +14 -0
- package/dist/scroll-area.d.ts +5 -0
- package/dist/scroll-area.d.ts.map +1 -0
- package/dist/scroll-area.js +10 -0
- package/dist/select.d.ts +16 -0
- package/dist/select.d.ts.map +1 -0
- package/dist/select.js +34 -0
- package/dist/separator.d.ts +4 -0
- package/dist/separator.d.ts.map +1 -0
- package/dist/separator.js +7 -0
- package/dist/sheet.d.ts +15 -0
- package/dist/sheet.d.ts.map +1 -0
- package/dist/sheet.js +36 -0
- package/dist/sidebar.d.ts +63 -0
- package/dist/sidebar.d.ts.map +1 -0
- package/dist/sidebar.js +256 -0
- package/dist/skeleton.d.ts +3 -0
- package/dist/skeleton.d.ts.map +1 -0
- package/dist/skeleton.js +6 -0
- package/dist/slider.d.ts +4 -0
- package/dist/slider.d.ts.map +1 -0
- package/dist/slider.js +15 -0
- package/dist/sonner.d.ts +4 -0
- package/dist/sonner.d.ts.map +1 -0
- package/dist/sonner.js +20 -0
- package/dist/spinner.d.ts +3 -0
- package/dist/spinner.d.ts.map +1 -0
- package/dist/spinner.js +7 -0
- package/dist/switch.d.ts +6 -0
- package/dist/switch.d.ts.map +1 -0
- package/dist/switch.js +8 -0
- package/dist/table.d.ts +11 -0
- package/dist/table.d.ts.map +1 -0
- package/dist/table.js +27 -0
- package/dist/tabs.d.ts +11 -0
- package/dist/tabs.d.ts.map +1 -0
- package/dist/tabs.js +29 -0
- package/dist/textarea.d.ts +4 -0
- package/dist/textarea.d.ts.map +1 -0
- package/dist/textarea.js +6 -0
- package/dist/toggle-group.d.ts +11 -0
- package/dist/toggle-group.d.ts.map +1 -0
- package/dist/toggle-group.js +24 -0
- package/dist/toggle.d.ts +9 -0
- package/dist/toggle.d.ts.map +1 -0
- package/dist/toggle.js +25 -0
- package/dist/tooltip.d.ts +7 -0
- package/dist/tooltip.d.ts.map +1 -0
- package/dist/tooltip.js +17 -0
- package/dist/utils/cn.d.ts +3 -0
- package/dist/utils/cn.d.ts.map +1 -0
- package/dist/utils/cn.js +5 -0
- package/dist/utils/is-mobile.d.ts +2 -0
- package/dist/utils/is-mobile.d.ts.map +1 -0
- package/dist/utils/is-mobile.js +4 -0
- package/package.json +77 -0
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
|
|
3
|
+
import { CheckIcon, ChevronRightIcon } from "lucide-react";
|
|
4
|
+
import { cn } from "./utils/cn";
|
|
5
|
+
function ContextMenu({ ...props }) {
|
|
6
|
+
return _jsx(ContextMenuPrimitive.Root, { "data-slot": "context-menu", ...props });
|
|
7
|
+
}
|
|
8
|
+
function ContextMenuPortal({ ...props }) {
|
|
9
|
+
return (_jsx(ContextMenuPrimitive.Portal, { "data-slot": "context-menu-portal", ...props }));
|
|
10
|
+
}
|
|
11
|
+
function ContextMenuTrigger({ className, ...props }) {
|
|
12
|
+
return (_jsx(ContextMenuPrimitive.Trigger, { className: cn("select-none", className), "data-slot": "context-menu-trigger", ...props }));
|
|
13
|
+
}
|
|
14
|
+
function ContextMenuContent({ className, align = "start", alignOffset = 4, side = "right", sideOffset = 0, ...props }) {
|
|
15
|
+
return (_jsx(ContextMenuPrimitive.Portal, { children: _jsx(ContextMenuPrimitive.Positioner, { align: align, alignOffset: alignOffset, className: "isolate z-50 outline-none", side: side, sideOffset: sideOffset, children: _jsx(ContextMenuPrimitive.Popup, { className: cn("data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 z-50 max-h-(--available-height) min-w-48 origin-(--transform-origin) overflow-y-auto overflow-x-hidden rounded-2xl bg-popover p-1 text-popover-foreground shadow-2xl outline-none ring-1 ring-foreground/5 duration-100 data-closed:animate-out data-open:animate-in", className), "data-slot": "context-menu-content", ...props }) }) }));
|
|
16
|
+
}
|
|
17
|
+
function ContextMenuGroup({ ...props }) {
|
|
18
|
+
return (_jsx(ContextMenuPrimitive.Group, { "data-slot": "context-menu-group", ...props }));
|
|
19
|
+
}
|
|
20
|
+
function ContextMenuLabel({ className, inset, ...props }) {
|
|
21
|
+
return (_jsx(ContextMenuPrimitive.GroupLabel, { className: cn("px-3 py-2.5 text-muted-foreground text-xs data-[inset]:pl-8", className), "data-inset": inset, "data-slot": "context-menu-label", ...props }));
|
|
22
|
+
}
|
|
23
|
+
function ContextMenuItem({ className, inset, variant = "default", ...props }) {
|
|
24
|
+
return (_jsx(ContextMenuPrimitive.Item, { className: cn("group/context-menu-item relative flex cursor-default select-none items-center gap-2.5 rounded-xl px-3 py-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-disabled:opacity-50 data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive", className), "data-inset": inset, "data-slot": "context-menu-item", "data-variant": variant, ...props }));
|
|
25
|
+
}
|
|
26
|
+
function ContextMenuSub({ ...props }) {
|
|
27
|
+
return (_jsx(ContextMenuPrimitive.SubmenuRoot, { "data-slot": "context-menu-sub", ...props }));
|
|
28
|
+
}
|
|
29
|
+
function ContextMenuSubTrigger({ className, inset, children, ...props }) {
|
|
30
|
+
return (_jsxs(ContextMenuPrimitive.SubmenuTrigger, { className: cn("flex cursor-default select-none items-center rounded-xl px-3 py-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-[inset]:pl-8 data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), "data-inset": inset, "data-slot": "context-menu-sub-trigger", ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
|
|
31
|
+
}
|
|
32
|
+
function ContextMenuSubContent({ ...props }) {
|
|
33
|
+
return (_jsx(ContextMenuContent, { className: "shadow-lg", "data-slot": "context-menu-sub-content", side: "right", ...props }));
|
|
34
|
+
}
|
|
35
|
+
function ContextMenuCheckboxItem({ className, children, checked, ...props }) {
|
|
36
|
+
return (_jsxs(ContextMenuPrimitive.CheckboxItem, { checked: checked, className: cn("relative flex cursor-default select-none items-center gap-2 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), "data-slot": "context-menu-checkbox-item", ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2", children: _jsx(ContextMenuPrimitive.CheckboxItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
|
|
37
|
+
}
|
|
38
|
+
function ContextMenuRadioGroup({ ...props }) {
|
|
39
|
+
return (_jsx(ContextMenuPrimitive.RadioGroup, { "data-slot": "context-menu-radio-group", ...props }));
|
|
40
|
+
}
|
|
41
|
+
function ContextMenuRadioItem({ className, children, ...props }) {
|
|
42
|
+
return (_jsxs(ContextMenuPrimitive.RadioItem, { className: cn("relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), "data-slot": "context-menu-radio-item", ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2", children: _jsx(ContextMenuPrimitive.RadioItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
|
|
43
|
+
}
|
|
44
|
+
function ContextMenuSeparator({ className, ...props }) {
|
|
45
|
+
return (_jsx(ContextMenuPrimitive.Separator, { className: cn("-mx-1 my-1 h-px bg-border/50", className), "data-slot": "context-menu-separator", ...props }));
|
|
46
|
+
}
|
|
47
|
+
function ContextMenuShortcut({ className, ...props }) {
|
|
48
|
+
return (_jsx("span", { className: cn("ml-auto text-muted-foreground text-xs tracking-widest group-focus/context-menu-item:text-accent-foreground", className), "data-slot": "context-menu-shortcut", ...props }));
|
|
49
|
+
}
|
|
50
|
+
export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
@import "tw-animate-css";
|
|
3
|
+
@import "shadcn/tailwind.css";
|
|
4
|
+
@import "@fontsource-variable/inter";
|
|
5
|
+
|
|
6
|
+
@custom-variant dark (&:is(.dark *));
|
|
7
|
+
|
|
8
|
+
:root {
|
|
9
|
+
--background: oklch(1 0 0);
|
|
10
|
+
--foreground: oklch(0.141 0.005 285.823);
|
|
11
|
+
--card: oklch(1 0 0);
|
|
12
|
+
--card-foreground: oklch(0.141 0.005 285.823);
|
|
13
|
+
--popover: oklch(1 0 0);
|
|
14
|
+
--popover-foreground: oklch(0.141 0.005 285.823);
|
|
15
|
+
--primary: oklch(0.21 0.006 285.885);
|
|
16
|
+
--primary-foreground: oklch(0.985 0 0);
|
|
17
|
+
--secondary: oklch(0.967 0.001 286.375);
|
|
18
|
+
--secondary-foreground: oklch(0.21 0.006 285.885);
|
|
19
|
+
--muted: oklch(0.967 0.001 286.375);
|
|
20
|
+
--muted-foreground: oklch(0.552 0.016 285.938);
|
|
21
|
+
--accent: oklch(0.967 0.001 286.375);
|
|
22
|
+
--accent-foreground: oklch(0.21 0.006 285.885);
|
|
23
|
+
--destructive: oklch(0.577 0.245 27.325);
|
|
24
|
+
--border: oklch(0.92 0.004 286.32);
|
|
25
|
+
--input: oklch(0.92 0.004 286.32);
|
|
26
|
+
--ring: oklch(0.705 0.015 286.067);
|
|
27
|
+
--chart-1: oklch(0.646 0.222 41.116);
|
|
28
|
+
--chart-2: oklch(0.6 0.118 184.704);
|
|
29
|
+
--chart-3: oklch(0.398 0.07 227.392);
|
|
30
|
+
--chart-4: oklch(0.828 0.189 84.429);
|
|
31
|
+
--chart-5: oklch(0.769 0.188 70.08);
|
|
32
|
+
--radius: 0.875rem;
|
|
33
|
+
--sidebar: oklch(0.985 0 0);
|
|
34
|
+
--sidebar-foreground: oklch(0.141 0.005 285.823);
|
|
35
|
+
--sidebar-primary: oklch(0.21 0.006 285.885);
|
|
36
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
37
|
+
--sidebar-accent: oklch(0.967 0.001 286.375);
|
|
38
|
+
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
|
39
|
+
--sidebar-border: oklch(0.92 0.004 286.32);
|
|
40
|
+
--sidebar-ring: oklch(0.705 0.015 286.067);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.dark {
|
|
44
|
+
--background: oklch(0.141 0.005 285.823);
|
|
45
|
+
--foreground: oklch(0.985 0 0);
|
|
46
|
+
--card: oklch(0.21 0.006 285.885);
|
|
47
|
+
--card-foreground: oklch(0.985 0 0);
|
|
48
|
+
--popover: oklch(0.21 0.006 285.885);
|
|
49
|
+
--popover-foreground: oklch(0.985 0 0);
|
|
50
|
+
--primary: oklch(0.92 0.004 286.32);
|
|
51
|
+
--primary-foreground: oklch(0.21 0.006 285.885);
|
|
52
|
+
--secondary: oklch(0.274 0.006 286.033);
|
|
53
|
+
--secondary-foreground: oklch(0.985 0 0);
|
|
54
|
+
--muted: oklch(0.274 0.006 286.033);
|
|
55
|
+
--muted-foreground: oklch(0.705 0.015 286.067);
|
|
56
|
+
--accent: oklch(0.274 0.006 286.033);
|
|
57
|
+
--accent-foreground: oklch(0.985 0 0);
|
|
58
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
59
|
+
--border: oklch(1 0 0 / 10%);
|
|
60
|
+
--input: oklch(1 0 0 / 15%);
|
|
61
|
+
--ring: oklch(0.552 0.016 285.938);
|
|
62
|
+
--chart-1: oklch(0.488 0.243 264.376);
|
|
63
|
+
--chart-2: oklch(0.696 0.17 162.48);
|
|
64
|
+
--chart-3: oklch(0.769 0.188 70.08);
|
|
65
|
+
--chart-4: oklch(0.627 0.265 303.9);
|
|
66
|
+
--chart-5: oklch(0.645 0.246 16.439);
|
|
67
|
+
--sidebar: oklch(0.21 0.006 285.885);
|
|
68
|
+
--sidebar-foreground: oklch(0.985 0 0);
|
|
69
|
+
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
70
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
71
|
+
--sidebar-accent: oklch(0.274 0.006 286.033);
|
|
72
|
+
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
73
|
+
--sidebar-border: oklch(1 0 0 / 10%);
|
|
74
|
+
--sidebar-ring: oklch(0.552 0.016 285.938);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
@theme inline {
|
|
78
|
+
--font-sans: "Inter Variable", sans-serif;
|
|
79
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
80
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
81
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
82
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
83
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
84
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
85
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
86
|
+
--color-sidebar: var(--sidebar);
|
|
87
|
+
--color-chart-5: var(--chart-5);
|
|
88
|
+
--color-chart-4: var(--chart-4);
|
|
89
|
+
--color-chart-3: var(--chart-3);
|
|
90
|
+
--color-chart-2: var(--chart-2);
|
|
91
|
+
--color-chart-1: var(--chart-1);
|
|
92
|
+
--color-ring: var(--ring);
|
|
93
|
+
--color-input: var(--input);
|
|
94
|
+
--color-border: var(--border);
|
|
95
|
+
--color-destructive: var(--destructive);
|
|
96
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
97
|
+
--color-accent: var(--accent);
|
|
98
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
99
|
+
--color-muted: var(--muted);
|
|
100
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
101
|
+
--color-secondary: var(--secondary);
|
|
102
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
103
|
+
--color-primary: var(--primary);
|
|
104
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
105
|
+
--color-popover: var(--popover);
|
|
106
|
+
--color-card-foreground: var(--card-foreground);
|
|
107
|
+
--color-card: var(--card);
|
|
108
|
+
--color-foreground: var(--foreground);
|
|
109
|
+
--color-background: var(--background);
|
|
110
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
111
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
112
|
+
--radius-lg: var(--radius);
|
|
113
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
114
|
+
--radius-2xl: calc(var(--radius) + 8px);
|
|
115
|
+
--radius-3xl: calc(var(--radius) + 12px);
|
|
116
|
+
--radius-4xl: calc(var(--radius) + 16px);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
@layer base {
|
|
120
|
+
* {
|
|
121
|
+
@apply border-border outline-ring/50;
|
|
122
|
+
}
|
|
123
|
+
body {
|
|
124
|
+
@apply font-sans bg-background text-foreground;
|
|
125
|
+
}
|
|
126
|
+
html {
|
|
127
|
+
@apply font-sans;
|
|
128
|
+
}
|
|
129
|
+
}
|
package/dist/dialog.d.ts
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
|
|
2
|
+
import type * as React from "react";
|
|
3
|
+
declare function Dialog({ ...props }: DialogPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function DialogPortal({ ...props }: DialogPrimitive.Portal.Props): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function DialogClose({ ...props }: DialogPrimitive.Close.Props): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function DialogContent({ className, children, showCloseButton, ...props }: DialogPrimitive.Popup.Props & {
|
|
9
|
+
showCloseButton?: boolean;
|
|
10
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<"div"> & {
|
|
13
|
+
showCloseButton?: boolean;
|
|
14
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
declare function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
declare function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
|
|
18
|
+
//# sourceMappingURL=dialog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../src/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAElE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,iBAAS,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,2CAEvD;AAED,iBAAS,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,OAAO,CAAC,KAAK,2CAEjE;AAED,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,MAAM,CAAC,KAAK,2CAE/D;AAED,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,2CAE7D;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,QAAQ,CAAC,KAAK,2CAWhC;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,eAAsB,EACtB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,GAAG;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,2CA+BA;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQzE;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,eAAuB,EACvB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,2CAkBA;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,2CAQxE;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,WAAW,CAAC,KAAK,2CAWnC;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAC"}
|
package/dist/dialog.js
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
|
|
4
|
+
import { XIcon } from "lucide-react";
|
|
5
|
+
import { Button } from "./button";
|
|
6
|
+
import { cn } from "./utils/cn";
|
|
7
|
+
function Dialog({ ...props }) {
|
|
8
|
+
return _jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
|
|
9
|
+
}
|
|
10
|
+
function DialogTrigger({ ...props }) {
|
|
11
|
+
return _jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
|
|
12
|
+
}
|
|
13
|
+
function DialogPortal({ ...props }) {
|
|
14
|
+
return _jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
|
|
15
|
+
}
|
|
16
|
+
function DialogClose({ ...props }) {
|
|
17
|
+
return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
|
|
18
|
+
}
|
|
19
|
+
function DialogOverlay({ className, ...props }) {
|
|
20
|
+
return (_jsx(DialogPrimitive.Backdrop, { className: cn("data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/80 duration-100 data-closed:animate-out data-open:animate-in supports-backdrop-filter:backdrop-blur-xs", className), "data-slot": "dialog-overlay", ...props }));
|
|
21
|
+
}
|
|
22
|
+
function DialogContent({ className, children, showCloseButton = true, ...props }) {
|
|
23
|
+
return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Popup, { className: cn("data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 -translate-x-1/2 -translate-y-1/2 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] gap-6 rounded-4xl bg-background p-6 text-sm outline-none ring-1 ring-foreground/5 duration-100 data-closed:animate-out data-open:animate-in sm:max-w-md", className), "data-slot": "dialog-content", ...props, children: [children, showCloseButton ? (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", render: _jsx(Button, { className: "absolute top-4 right-4", size: "icon-sm", variant: "ghost" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] })) : null] })] }));
|
|
24
|
+
}
|
|
25
|
+
function DialogHeader({ className, ...props }) {
|
|
26
|
+
return (_jsx("div", { className: cn("flex flex-col gap-2", className), "data-slot": "dialog-header", ...props }));
|
|
27
|
+
}
|
|
28
|
+
function DialogFooter({ className, showCloseButton = false, children, ...props }) {
|
|
29
|
+
return (_jsxs("div", { className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), "data-slot": "dialog-footer", ...props, children: [children, showCloseButton ? (_jsx(DialogPrimitive.Close, { render: _jsx(Button, { variant: "outline" }), children: "Close" })) : null] }));
|
|
30
|
+
}
|
|
31
|
+
function DialogTitle({ className, ...props }) {
|
|
32
|
+
return (_jsx(DialogPrimitive.Title, { className: cn("font-medium text-base leading-none", className), "data-slot": "dialog-title", ...props }));
|
|
33
|
+
}
|
|
34
|
+
function DialogDescription({ className, ...props }) {
|
|
35
|
+
return (_jsx(DialogPrimitive.Description, { className: cn("text-muted-foreground text-sm *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className), "data-slot": "dialog-description", ...props }));
|
|
36
|
+
}
|
|
37
|
+
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
|
package/dist/drawer.d.ts
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type * as React from "react";
|
|
2
|
+
import { Drawer as DrawerPrimitive } from "vaul";
|
|
3
|
+
declare function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function DrawerContent({ className, children, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };
|
|
14
|
+
//# sourceMappingURL=drawer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../src/drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAC;AAIjD,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAEnD;AAED,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAEtD;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,2CAErD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAWtD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAiBtD;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWzE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQzE;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQpD;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,2CAQ1D;AAED,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAC"}
|
package/dist/drawer.js
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Drawer as DrawerPrimitive } from "vaul";
|
|
4
|
+
import { cn } from "./utils/cn";
|
|
5
|
+
function Drawer({ ...props }) {
|
|
6
|
+
return _jsx(DrawerPrimitive.Root, { "data-slot": "drawer", ...props });
|
|
7
|
+
}
|
|
8
|
+
function DrawerTrigger({ ...props }) {
|
|
9
|
+
return _jsx(DrawerPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
|
|
10
|
+
}
|
|
11
|
+
function DrawerPortal({ ...props }) {
|
|
12
|
+
return _jsx(DrawerPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
|
|
13
|
+
}
|
|
14
|
+
function DrawerClose({ ...props }) {
|
|
15
|
+
return _jsx(DrawerPrimitive.Close, { "data-slot": "drawer-close", ...props });
|
|
16
|
+
}
|
|
17
|
+
function DrawerOverlay({ className, ...props }) {
|
|
18
|
+
return (_jsx(DrawerPrimitive.Overlay, { className: cn("data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/80 data-closed:animate-out data-open:animate-in supports-backdrop-filter:backdrop-blur-xs", className), "data-slot": "drawer-overlay", ...props }));
|
|
19
|
+
}
|
|
20
|
+
function DrawerContent({ className, children, ...props }) {
|
|
21
|
+
return (_jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [_jsx(DrawerOverlay, {}), _jsxs(DrawerPrimitive.Content, { className: cn("before:-z-10 group/drawer-content relative z-50 flex h-auto flex-col bg-transparent p-4 text-sm before:absolute before:inset-2 before:rounded-4xl before:bg-background data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm", className), "data-slot": "drawer-content", ...props, children: [_jsx("div", { className: "mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), children] })] }));
|
|
22
|
+
}
|
|
23
|
+
function DrawerHeader({ className, ...props }) {
|
|
24
|
+
return (_jsx("div", { className: cn("flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left", className), "data-slot": "drawer-header", ...props }));
|
|
25
|
+
}
|
|
26
|
+
function DrawerFooter({ className, ...props }) {
|
|
27
|
+
return (_jsx("div", { className: cn("mt-auto flex flex-col gap-2 p-4", className), "data-slot": "drawer-footer", ...props }));
|
|
28
|
+
}
|
|
29
|
+
function DrawerTitle({ className, ...props }) {
|
|
30
|
+
return (_jsx(DrawerPrimitive.Title, { className: cn("font-medium text-base text-foreground", className), "data-slot": "drawer-title", ...props }));
|
|
31
|
+
}
|
|
32
|
+
function DrawerDescription({ className, ...props }) {
|
|
33
|
+
return (_jsx(DrawerPrimitive.Description, { className: cn("text-muted-foreground text-sm", className), "data-slot": "drawer-description", ...props }));
|
|
34
|
+
}
|
|
35
|
+
export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { Menu as MenuPrimitive } from "@base-ui/react/menu";
|
|
2
|
+
import type * as React from "react";
|
|
3
|
+
declare function DropdownMenu({ ...props }: MenuPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function DropdownMenuContent({ align, alignOffset, side, sideOffset, className, ...props }: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function DropdownMenuLabel({ className, inset, ...props }: MenuPrimitive.GroupLabel.Props & {
|
|
9
|
+
inset?: boolean;
|
|
10
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
declare function DropdownMenuItem({ className, inset, variant, ...props }: MenuPrimitive.Item.Props & {
|
|
12
|
+
inset?: boolean;
|
|
13
|
+
variant?: "default" | "destructive";
|
|
14
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
declare function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: MenuPrimitive.SubmenuTrigger.Props & {
|
|
17
|
+
inset?: boolean;
|
|
18
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
declare function DropdownMenuSubContent({ align, alignOffset, side, sideOffset, className, ...props }: React.ComponentProps<typeof DropdownMenuContent>): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: MenuPrimitive.CheckboxItem.Props): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
declare function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
declare function DropdownMenuRadioItem({ className, children, ...props }: MenuPrimitive.RadioItem.Props): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
declare function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
|
|
26
|
+
//# sourceMappingURL=dropdown-menu.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../src/dropdown-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,2CAE3D;AAED,iBAAS,kBAAkB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,2CAEnE;AAED,iBAAS,mBAAmB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,2CAErE;AAED,iBAAS,mBAAmB,CAAC,EAC3B,KAAe,EACf,WAAe,EACf,IAAe,EACf,UAAc,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,GAC1B,IAAI,CACF,aAAa,CAAC,UAAU,CAAC,KAAK,EAC9B,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAChD,2CAqBF;AAED,iBAAS,iBAAiB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,2CAEjE;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,aAAa,CAAC,UAAU,CAAC,KAAK,GAAG;IAClC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,2CAYA;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,KAAK,EACL,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,GAAG;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CACrC,2CAaA;AAED,iBAAS,eAAe,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,WAAW,CAAC,KAAK,2CAErE;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,aAAa,CAAC,cAAc,CAAC,KAAK,GAAG;IACtC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,2CAeA;AAED,iBAAS,sBAAsB,CAAC,EAC9B,KAAe,EACf,WAAgB,EAChB,IAAc,EACd,UAAc,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,2CAelD;AAED,iBAAS,wBAAwB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACT,EAAE,aAAa,CAAC,YAAY,CAAC,KAAK,2CAsBlC;AAED,iBAAS,sBAAsB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,UAAU,CAAC,KAAK,2CAO3E;AAED,iBAAS,qBAAqB,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,aAAa,CAAC,SAAS,CAAC,KAAK,2CAqB/B;AAED,iBAAS,qBAAqB,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,aAAa,CAAC,SAAS,CAAC,KAAK,2CAQ/B;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAW9B;AAED,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,wBAAwB,EACxB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,sBAAsB,GACvB,CAAC"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Menu as MenuPrimitive } from "@base-ui/react/menu";
|
|
3
|
+
import { CheckIcon, ChevronRightIcon } from "lucide-react";
|
|
4
|
+
import { cn } from "./utils/cn";
|
|
5
|
+
function DropdownMenu({ ...props }) {
|
|
6
|
+
return _jsx(MenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
|
|
7
|
+
}
|
|
8
|
+
function DropdownMenuPortal({ ...props }) {
|
|
9
|
+
return _jsx(MenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
|
|
10
|
+
}
|
|
11
|
+
function DropdownMenuTrigger({ ...props }) {
|
|
12
|
+
return _jsx(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
|
|
13
|
+
}
|
|
14
|
+
function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, ...props }) {
|
|
15
|
+
return (_jsx(MenuPrimitive.Portal, { children: _jsx(MenuPrimitive.Positioner, { align: align, alignOffset: alignOffset, className: "isolate z-50 outline-none", side: side, sideOffset: sideOffset, children: _jsx(MenuPrimitive.Popup, { className: cn("data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 z-50 max-h-(--available-height) w-(--anchor-width) min-w-48 origin-(--transform-origin) overflow-y-auto overflow-x-hidden rounded-2xl bg-popover p-1 text-popover-foreground shadow-2xl outline-none ring-1 ring-foreground/5 duration-100 data-closed:animate-out data-open:animate-in data-closed:overflow-hidden", className), "data-slot": "dropdown-menu-content", ...props }) }) }));
|
|
16
|
+
}
|
|
17
|
+
function DropdownMenuGroup({ ...props }) {
|
|
18
|
+
return _jsx(MenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
|
|
19
|
+
}
|
|
20
|
+
function DropdownMenuLabel({ className, inset, ...props }) {
|
|
21
|
+
return (_jsx(MenuPrimitive.GroupLabel, { className: cn("px-3 py-2.5 text-muted-foreground text-xs data-[inset]:pl-8", className), "data-inset": inset, "data-slot": "dropdown-menu-label", ...props }));
|
|
22
|
+
}
|
|
23
|
+
function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
|
|
24
|
+
return (_jsx(MenuPrimitive.Item, { className: cn("group/dropdown-menu-item relative flex cursor-default select-none items-center gap-2.5 rounded-xl px-3 py-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-disabled:opacity-50 data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=destructive]:*:[svg]:text-destructive", className), "data-inset": inset, "data-slot": "dropdown-menu-item", "data-variant": variant, ...props }));
|
|
25
|
+
}
|
|
26
|
+
function DropdownMenuSub({ ...props }) {
|
|
27
|
+
return _jsx(MenuPrimitive.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...props });
|
|
28
|
+
}
|
|
29
|
+
function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
|
|
30
|
+
return (_jsxs(MenuPrimitive.SubmenuTrigger, { className: cn("flex cursor-default select-none items-center gap-2 rounded-xl px-3 py-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-open:bg-accent data-[inset]:pl-8 data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), "data-inset": inset, "data-slot": "dropdown-menu-sub-trigger", ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
|
|
31
|
+
}
|
|
32
|
+
function DropdownMenuSubContent({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }) {
|
|
33
|
+
return (_jsx(DropdownMenuContent, { align: align, alignOffset: alignOffset, className: cn("data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 w-auto min-w-36 rounded-2xl bg-popover p-1 text-popover-foreground shadow-2xl ring-1 ring-foreground/5 duration-100 data-closed:animate-out data-open:animate-in", className), "data-slot": "dropdown-menu-sub-content", side: side, sideOffset: sideOffset, ...props }));
|
|
34
|
+
}
|
|
35
|
+
function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
|
|
36
|
+
return (_jsxs(MenuPrimitive.CheckboxItem, { checked: checked, className: cn("relative flex cursor-default select-none items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), "data-slot": "dropdown-menu-checkbox-item", ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-checkbox-item-indicator", children: _jsx(MenuPrimitive.CheckboxItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
|
|
37
|
+
}
|
|
38
|
+
function DropdownMenuRadioGroup({ ...props }) {
|
|
39
|
+
return (_jsx(MenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props }));
|
|
40
|
+
}
|
|
41
|
+
function DropdownMenuRadioItem({ className, children, ...props }) {
|
|
42
|
+
return (_jsxs(MenuPrimitive.RadioItem, { className: cn("relative flex cursor-default select-none items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), "data-slot": "dropdown-menu-radio-item", ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-radio-item-indicator", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
|
|
43
|
+
}
|
|
44
|
+
function DropdownMenuSeparator({ className, ...props }) {
|
|
45
|
+
return (_jsx(MenuPrimitive.Separator, { className: cn("-mx-1 my-1 h-px bg-border/50", className), "data-slot": "dropdown-menu-separator", ...props }));
|
|
46
|
+
}
|
|
47
|
+
function DropdownMenuShortcut({ className, ...props }) {
|
|
48
|
+
return (_jsx("span", { className: cn("ml-auto text-muted-foreground text-xs tracking-widest group-focus/dropdown-menu-item:text-accent-foreground", className), "data-slot": "dropdown-menu-shortcut", ...props }));
|
|
49
|
+
}
|
|
50
|
+
export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
|
package/dist/empty.d.ts
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { type VariantProps } from "class-variance-authority";
|
|
2
|
+
declare function Empty({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare const emptyMediaVariants: (props?: ({
|
|
5
|
+
variant?: "default" | "icon" | null | undefined;
|
|
6
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
|
+
declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
declare function EmptyDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia, };
|
|
12
|
+
//# sourceMappingURL=empty.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"empty.d.ts","sourceRoot":"","sources":["../src/empty.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWlE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQxE;AAED,QAAA,MAAM,kBAAkB;;8EAavB,CAAC;AAEF,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,2CASvE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQvE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAW3E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWzE;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,UAAU,GACX,CAAC"}
|
package/dist/empty.js
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cva } from "class-variance-authority";
|
|
3
|
+
import { cn } from "./utils/cn";
|
|
4
|
+
function Empty({ className, ...props }) {
|
|
5
|
+
return (_jsx("div", { className: cn("flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 text-balance rounded-lg border-dashed p-12 text-center", className), "data-slot": "empty", ...props }));
|
|
6
|
+
}
|
|
7
|
+
function EmptyHeader({ className, ...props }) {
|
|
8
|
+
return (_jsx("div", { className: cn("flex max-w-sm flex-col items-center gap-2", className), "data-slot": "empty-header", ...props }));
|
|
9
|
+
}
|
|
10
|
+
const emptyMediaVariants = cva("mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
|
|
11
|
+
variants: {
|
|
12
|
+
variant: {
|
|
13
|
+
default: "bg-transparent",
|
|
14
|
+
icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6",
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
defaultVariants: {
|
|
18
|
+
variant: "default",
|
|
19
|
+
},
|
|
20
|
+
});
|
|
21
|
+
function EmptyMedia({ className, variant = "default", ...props }) {
|
|
22
|
+
return (_jsx("div", { className: cn(emptyMediaVariants({ variant, className })), "data-slot": "empty-icon", "data-variant": variant, ...props }));
|
|
23
|
+
}
|
|
24
|
+
function EmptyTitle({ className, ...props }) {
|
|
25
|
+
return (_jsx("div", { className: cn("font-medium text-lg tracking-tight", className), "data-slot": "empty-title", ...props }));
|
|
26
|
+
}
|
|
27
|
+
function EmptyDescription({ className, ...props }) {
|
|
28
|
+
return (_jsx("div", { className: cn("text-muted-foreground text-sm/relaxed [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className), "data-slot": "empty-description", ...props }));
|
|
29
|
+
}
|
|
30
|
+
function EmptyContent({ className, ...props }) {
|
|
31
|
+
return (_jsx("div", { className: cn("flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm", className), "data-slot": "empty-content", ...props }));
|
|
32
|
+
}
|
|
33
|
+
export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia, };
|
package/dist/field.d.ts
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { type VariantProps } from "class-variance-authority";
|
|
2
|
+
import { Label } from "./label";
|
|
3
|
+
declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
|
|
5
|
+
variant?: "legend" | "label";
|
|
6
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare const fieldVariants: (props?: ({
|
|
9
|
+
orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
|
|
10
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
11
|
+
declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
|
|
17
|
+
children?: React.ReactNode;
|
|
18
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
|
|
20
|
+
errors?: Array<{
|
|
21
|
+
message?: string;
|
|
22
|
+
} | undefined>;
|
|
23
|
+
}): import("react/jsx-runtime").JSX.Element | null;
|
|
24
|
+
export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, };
|
|
25
|
+
//# sourceMappingURL=field.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../src/field.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAIhC,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,2CAW1E;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CAAE,2CAYnE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,QAAA,MAAM,aAAa;;8EAgBlB,CAAC;AAEF,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,WAAwB,EACxB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,2CAWlE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWzE;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,2CAYpC;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAa3E;AAED,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,2CAsBA;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,MAAM,CAAC,EAAE,KAAK,CAAC;QAAE,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC,CAAC;CAClD,kDA0CA;AAED,OAAO,EACL,KAAK,EACL,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,WAAW,EACX,cAAc,EACd,QAAQ,EACR,YAAY,EACZ,UAAU,GACX,CAAC"}
|
package/dist/field.js
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
import { useMemo } from "react";
|
|
5
|
+
import { Label } from "./label";
|
|
6
|
+
import { Separator } from "./separator";
|
|
7
|
+
import { cn } from "./utils/cn";
|
|
8
|
+
function FieldSet({ className, ...props }) {
|
|
9
|
+
return (_jsx("fieldset", { className: cn("flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className), "data-slot": "field-set", ...props }));
|
|
10
|
+
}
|
|
11
|
+
function FieldLegend({ className, variant = "legend", ...props }) {
|
|
12
|
+
return (_jsx("legend", { className: cn("mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className), "data-slot": "field-legend", "data-variant": variant, ...props }));
|
|
13
|
+
}
|
|
14
|
+
function FieldGroup({ className, ...props }) {
|
|
15
|
+
return (_jsx("div", { className: cn("group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4", className), "data-slot": "field-group", ...props }));
|
|
16
|
+
}
|
|
17
|
+
const fieldVariants = cva("group/field flex w-full gap-3 data-[invalid=true]:text-destructive", {
|
|
18
|
+
variants: {
|
|
19
|
+
orientation: {
|
|
20
|
+
vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
|
|
21
|
+
horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
|
22
|
+
responsive: "@md/field-group:flex-row flex-col @md/field-group:items-center @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:[&>*]:w-auto [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
defaultVariants: {
|
|
26
|
+
orientation: "vertical",
|
|
27
|
+
},
|
|
28
|
+
});
|
|
29
|
+
function Field({ className, orientation = "vertical", ...props }) {
|
|
30
|
+
return (
|
|
31
|
+
// biome-ignore lint/a11y: intentional
|
|
32
|
+
_jsx("div", { className: cn(fieldVariants({ orientation }), className), "data-orientation": orientation, "data-slot": "field", role: "group", ...props }));
|
|
33
|
+
}
|
|
34
|
+
function FieldContent({ className, ...props }) {
|
|
35
|
+
return (_jsx("div", { className: cn("group/field-content flex flex-1 flex-col gap-1 leading-snug", className), "data-slot": "field-content", ...props }));
|
|
36
|
+
}
|
|
37
|
+
function FieldLabel({ className, ...props }) {
|
|
38
|
+
return (_jsx(Label, { className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug has-[>[data-slot=field]]:rounded-xl has-[>[data-slot=field]]:border has-data-checked:border-primary/50 has-data-checked:bg-primary/5 group-data-[disabled=true]/field:opacity-50 dark:has-data-checked:bg-primary/10 [&>*]:data-[slot=field]:p-4", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className), "data-slot": "field-label", ...props }));
|
|
39
|
+
}
|
|
40
|
+
function FieldTitle({ className, ...props }) {
|
|
41
|
+
return (_jsx("div", { className: cn("flex w-fit items-center gap-2 font-medium text-sm leading-snug group-data-[disabled=true]/field:opacity-50", className), "data-slot": "field-label", ...props }));
|
|
42
|
+
}
|
|
43
|
+
function FieldDescription({ className, ...props }) {
|
|
44
|
+
return (_jsx("p", { className: cn("[[data-variant=legend]+&]:-mt-1.5 text-left font-normal text-muted-foreground text-sm leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance", "nth-last-2:-mt-1 last:mt-0", "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className), "data-slot": "field-description", ...props }));
|
|
45
|
+
}
|
|
46
|
+
function FieldSeparator({ children, className, ...props }) {
|
|
47
|
+
return (_jsxs("div", { className: cn("-my-2 group-data-[variant=outline]/field-group:-mb-2 relative h-5 text-sm", className), "data-content": !!children, "data-slot": "field-separator", ...props, children: [_jsx(Separator, { className: "absolute inset-0 top-1/2" }), children ? (_jsx("span", { className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground", "data-slot": "field-separator-content", children: children })) : null] }));
|
|
48
|
+
}
|
|
49
|
+
function FieldError({ className, children, errors, ...props }) {
|
|
50
|
+
const content = useMemo(() => {
|
|
51
|
+
if (children) {
|
|
52
|
+
return children;
|
|
53
|
+
}
|
|
54
|
+
if (!errors?.length) {
|
|
55
|
+
return null;
|
|
56
|
+
}
|
|
57
|
+
const uniqueErrors = [
|
|
58
|
+
...new Map(errors.map((error) => [error?.message, error])).values(),
|
|
59
|
+
];
|
|
60
|
+
if (uniqueErrors?.length === 1) {
|
|
61
|
+
return uniqueErrors[0]?.message;
|
|
62
|
+
}
|
|
63
|
+
return (_jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map((error, index) =>
|
|
64
|
+
// biome-ignore lint/suspicious/noArrayIndexKey: intentional
|
|
65
|
+
error?.message ? _jsx("li", { children: error.message }, index) : null) }));
|
|
66
|
+
}, [children, errors]);
|
|
67
|
+
if (!content) {
|
|
68
|
+
return null;
|
|
69
|
+
}
|
|
70
|
+
return (_jsx("div", { className: cn("font-normal text-destructive text-sm", className), "data-slot": "field-error", role: "alert", ...props, children: content }));
|
|
71
|
+
}
|
|
72
|
+
export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
|
|
2
|
+
declare function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
declare function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function HoverCardContent({ className, side, sideOffset, align, alignOffset, ...props }: PreviewCardPrimitive.Popup.Props & Pick<PreviewCardPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export { HoverCard, HoverCardTrigger, HoverCardContent };
|
|
6
|
+
//# sourceMappingURL=hover-card.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../src/hover-card.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAIlF,iBAAS,SAAS,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,IAAI,CAAC,KAAK,2CAE/D;AAED,iBAAS,gBAAgB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,OAAO,CAAC,KAAK,2CAIzE;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,IAAe,EACf,UAAc,EACd,KAAgB,EAChB,WAAe,EACf,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,KAAK,CAAC,KAAK,GACjC,IAAI,CACF,oBAAoB,CAAC,UAAU,CAAC,KAAK,EACrC,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAChD,2CAqBF;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
|
|
4
|
+
import { cn } from "./utils/cn";
|
|
5
|
+
function HoverCard({ ...props }) {
|
|
6
|
+
return _jsx(PreviewCardPrimitive.Root, { "data-slot": "hover-card", ...props });
|
|
7
|
+
}
|
|
8
|
+
function HoverCardTrigger({ ...props }) {
|
|
9
|
+
return (_jsx(PreviewCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", ...props }));
|
|
10
|
+
}
|
|
11
|
+
function HoverCardContent({ className, side = "bottom", sideOffset = 4, align = "center", alignOffset = 4, ...props }) {
|
|
12
|
+
return (_jsx(PreviewCardPrimitive.Portal, { "data-slot": "hover-card-portal", children: _jsx(PreviewCardPrimitive.Positioner, { align: align, alignOffset: alignOffset, className: "isolate z-50", side: side, sideOffset: sideOffset, children: _jsx(PreviewCardPrimitive.Popup, { className: cn("data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 z-50 w-72 origin-(--transform-origin) rounded-2xl bg-popover p-4 text-popover-foreground text-sm shadow-2xl outline-hidden ring-1 ring-foreground/5 duration-100 data-closed:animate-out data-open:animate-in", className), "data-slot": "hover-card-content", ...props }) }) }));
|
|
13
|
+
}
|
|
14
|
+
export { HoverCard, HoverCardTrigger, HoverCardContent };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { type VariantProps } from "class-variance-authority";
|
|
2
|
+
import type * as React from "react";
|
|
3
|
+
import { Button } from "./button";
|
|
4
|
+
declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare const inputGroupAddonVariants: (props?: ({
|
|
6
|
+
align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
|
|
7
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
|
+
declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
declare const inputGroupButtonVariants: (props?: ({
|
|
10
|
+
size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
|
|
11
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
12
|
+
declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size" | "type"> & VariantProps<typeof inputGroupButtonVariants> & {
|
|
13
|
+
type?: "button" | "submit" | "reset";
|
|
14
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
declare function InputGroupInput({ className, ...props }: React.ComponentProps<"input">): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };
|
|
19
|
+
//# sourceMappingURL=input-group.d.ts.map
|