harebear-ui 0.0.0-stage → 0.1.0
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/AGENTS.md +63 -0
- package/LICENSE +21 -0
- package/README.md +92 -2
- package/bin/harebear-ui.mjs +125 -0
- package/dist/components/admin/activity-feed.d.ts +15 -0
- package/dist/components/admin/activity-feed.js +50 -0
- package/dist/components/admin/app-shell.d.ts +47 -0
- package/dist/components/admin/app-shell.js +108 -0
- package/dist/components/admin/callout.d.ts +7 -0
- package/dist/components/admin/callout.js +18 -0
- package/dist/components/admin/key-value-grid.d.ts +11 -0
- package/dist/components/admin/key-value-grid.js +23 -0
- package/dist/components/admin/link-tile.d.ts +17 -0
- package/dist/components/admin/link-tile.js +36 -0
- package/dist/components/admin/page-header.d.ts +14 -0
- package/dist/components/admin/page-header.js +41 -0
- package/dist/components/admin/search-input.d.ts +12 -0
- package/dist/components/admin/search-input.js +32 -0
- package/dist/components/admin/stat-card.d.ts +20 -0
- package/dist/components/admin/stat-card.js +53 -0
- package/dist/components/admin/status.d.ts +12 -0
- package/dist/components/admin/status.js +32 -0
- package/dist/components/admin/timeline.d.ts +13 -0
- package/dist/components/admin/timeline.js +36 -0
- package/dist/components/admin/usage-meter.d.ts +17 -0
- package/dist/components/admin/usage-meter.js +43 -0
- package/dist/components/admin/user-chip.d.ts +14 -0
- package/dist/components/admin/user-chip.js +38 -0
- package/dist/components/ai/chat.d.ts +44 -0
- package/dist/components/ai/chat.js +147 -0
- package/dist/components/ai/code-block.d.ts +21 -0
- package/dist/components/ai/code-block.js +53 -0
- package/dist/components/ai/conversation-list.d.ts +18 -0
- package/dist/components/ai/conversation-list.js +30 -0
- package/dist/components/ai/model-picker.d.ts +21 -0
- package/dist/components/ai/model-picker.js +55 -0
- package/dist/components/ai/prompt-input.d.ts +27 -0
- package/dist/components/ai/prompt-input.js +99 -0
- package/dist/components/data/bar-list.d.ts +14 -0
- package/dist/components/data/bar-list.js +27 -0
- package/dist/components/data/data-table.d.ts +70 -0
- package/dist/components/data/data-table.js +208 -0
- package/dist/components/data/sparkline.d.ts +16 -0
- package/dist/components/data/sparkline.js +72 -0
- package/dist/components/data/status-bars.d.ts +17 -0
- package/dist/components/data/status-bars.js +37 -0
- package/dist/components/data/trend-chart.d.ts +31 -0
- package/dist/components/data/trend-chart.js +136 -0
- package/dist/components/theme/theme-provider.d.ts +42 -0
- package/dist/components/theme/theme-provider.js +110 -0
- package/dist/components/theme/theme-toggle.d.ts +5 -0
- package/dist/components/theme/theme-toggle.js +20 -0
- package/dist/components/ui/accordion.d.ts +7 -0
- package/dist/components/ui/accordion.js +53 -0
- package/dist/components/ui/alert-dialog.d.ts +18 -0
- package/dist/components/ui/alert-dialog.js +99 -0
- package/dist/components/ui/alert.d.ts +10 -0
- package/dist/components/ui/alert.js +42 -0
- package/dist/components/ui/aspect-ratio.d.ts +3 -0
- package/dist/components/ui/aspect-ratio.js +11 -0
- package/dist/components/ui/avatar.d.ts +11 -0
- package/dist/components/ui/avatar.js +49 -0
- package/dist/components/ui/badge.d.ts +9 -0
- package/dist/components/ui/badge.js +30 -0
- package/dist/components/ui/breadcrumb.d.ts +11 -0
- package/dist/components/ui/breadcrumb.js +70 -0
- package/dist/components/ui/button-group.d.ts +11 -0
- package/dist/components/ui/button-group.js +39 -0
- package/dist/components/ui/button.d.ts +11 -0
- package/dist/components/ui/button.js +55 -0
- package/dist/components/ui/calendar.d.ts +10 -0
- package/dist/components/ui/calendar.js +108 -0
- package/dist/components/ui/card.d.ts +11 -0
- package/dist/components/ui/card.js +55 -0
- package/dist/components/ui/carousel.d.ts +28 -0
- package/dist/components/ui/carousel.js +131 -0
- package/dist/components/ui/chart.d.ts +44 -0
- package/dist/components/ui/chart.js +148 -0
- package/dist/components/ui/checkbox.d.ts +4 -0
- package/dist/components/ui/checkbox.js +19 -0
- package/dist/components/ui/collapsible.d.ts +5 -0
- package/dist/components/ui/collapsible.js +23 -0
- package/dist/components/ui/command.d.ts +18 -0
- package/dist/components/ui/command.js +86 -0
- package/dist/components/ui/context-menu.d.ts +31 -0
- package/dist/components/ui/context-menu.js +123 -0
- package/dist/components/ui/dialog.d.ts +17 -0
- package/dist/components/ui/dialog.js +94 -0
- package/dist/components/ui/drawer.d.ts +13 -0
- package/dist/components/ui/drawer.js +76 -0
- package/dist/components/ui/dropdown-menu.d.ts +29 -0
- package/dist/components/ui/dropdown-menu.js +126 -0
- package/dist/components/ui/empty.d.ts +11 -0
- package/dist/components/ui/empty.js +59 -0
- package/dist/components/ui/field.d.ts +24 -0
- package/dist/components/ui/field.js +109 -0
- package/dist/components/ui/hover-card.d.ts +6 -0
- package/dist/components/ui/hover-card.js +30 -0
- package/dist/components/ui/input-group.d.ts +16 -0
- package/dist/components/ui/input-group.js +77 -0
- package/dist/components/ui/input-otp.d.ts +11 -0
- package/dist/components/ui/input-otp.js +46 -0
- package/dist/components/ui/input.d.ts +3 -0
- package/dist/components/ui/input.js +13 -0
- package/dist/components/ui/item.d.ts +23 -0
- package/dist/components/ui/item.js +117 -0
- package/dist/components/ui/kbd.d.ts +3 -0
- package/dist/components/ui/kbd.js +19 -0
- package/dist/components/ui/label.d.ts +4 -0
- package/dist/components/ui/label.js +13 -0
- package/dist/components/ui/menubar.d.ts +30 -0
- package/dist/components/ui/menubar.js +133 -0
- package/dist/components/ui/navigation-menu.d.ts +14 -0
- package/dist/components/ui/navigation-menu.js +79 -0
- package/dist/components/ui/pagination.d.ts +17 -0
- package/dist/components/ui/pagination.js +79 -0
- package/dist/components/ui/popover.d.ts +10 -0
- package/dist/components/ui/popover.js +54 -0
- package/dist/components/ui/progress.d.ts +4 -0
- package/dist/components/ui/progress.js +18 -0
- package/dist/components/ui/radio-group.d.ts +5 -0
- package/dist/components/ui/radio-group.js +25 -0
- package/dist/components/ui/resizable.d.ts +7 -0
- package/dist/components/ui/resizable.js +27 -0
- package/dist/components/ui/scroll-area.d.ts +5 -0
- package/dist/components/ui/scroll-area.js +35 -0
- package/dist/components/ui/select.d.ts +15 -0
- package/dist/components/ui/select.js +98 -0
- package/dist/components/ui/separator.d.ts +4 -0
- package/dist/components/ui/separator.js +15 -0
- package/dist/components/ui/sheet.d.ts +14 -0
- package/dist/components/ui/sheet.js +88 -0
- package/dist/components/ui/sidebar.d.ts +69 -0
- package/dist/components/ui/sidebar.js +377 -0
- package/dist/components/ui/skeleton.d.ts +2 -0
- package/dist/components/ui/skeleton.js +12 -0
- package/dist/components/ui/slider.d.ts +4 -0
- package/dist/components/ui/slider.js +35 -0
- package/dist/components/ui/sonner.d.ts +3 -0
- package/dist/components/ui/sonner.js +29 -0
- package/dist/components/ui/spinner.d.ts +2 -0
- package/dist/components/ui/spinner.js +15 -0
- package/dist/components/ui/switch.d.ts +6 -0
- package/dist/components/ui/switch.js +18 -0
- package/dist/components/ui/table.d.ts +10 -0
- package/dist/components/ui/table.js +65 -0
- package/dist/components/ui/tabs.d.ts +11 -0
- package/dist/components/ui/tabs.js +45 -0
- package/dist/components/ui/textarea.d.ts +3 -0
- package/dist/components/ui/textarea.js +12 -0
- package/dist/components/ui/toggle-group.d.ts +10 -0
- package/dist/components/ui/toggle-group.js +50 -0
- package/dist/components/ui/toggle.d.ts +9 -0
- package/dist/components/ui/toggle.js +35 -0
- package/dist/components/ui/tooltip.d.ts +7 -0
- package/dist/components/ui/tooltip.js +34 -0
- package/dist/hooks/use-copy-to-clipboard.d.ts +5 -0
- package/dist/hooks/use-copy-to-clipboard.js +24 -0
- package/dist/hooks/use-mobile.d.ts +1 -0
- package/dist/hooks/use-mobile.js +17 -0
- package/dist/index.d.ts +80 -0
- package/dist/index.js +80 -0
- package/dist/lib/utils.d.ts +3 -0
- package/dist/lib/utils.js +8 -0
- package/dist/shadcn-base.css +638 -0
- package/dist/styles.css +188 -0
- package/docs/COMPONENTS.md +352 -0
- package/llms.txt +34 -0
- package/package.json +116 -4
- package/skills/harebear-ui/SKILL.md +33 -0
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Dialog as Dialog$1 } from "radix-ui";
|
|
3
|
+
declare function Dialog({ ...props }: React.ComponentProps<typeof Dialog$1.Root>): React.JSX.Element;
|
|
4
|
+
declare function DialogTrigger({ ...props }: React.ComponentProps<typeof Dialog$1.Trigger>): React.JSX.Element;
|
|
5
|
+
declare function DialogPortal({ ...props }: React.ComponentProps<typeof Dialog$1.Portal>): React.JSX.Element;
|
|
6
|
+
declare function DialogClose({ ...props }: React.ComponentProps<typeof Dialog$1.Close>): React.JSX.Element;
|
|
7
|
+
declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof Dialog$1.Overlay>): React.JSX.Element;
|
|
8
|
+
declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof Dialog$1.Content> & {
|
|
9
|
+
showCloseButton?: boolean;
|
|
10
|
+
}): React.JSX.Element;
|
|
11
|
+
declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
12
|
+
declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<"div"> & {
|
|
13
|
+
showCloseButton?: boolean;
|
|
14
|
+
}): React.JSX.Element;
|
|
15
|
+
declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof Dialog$1.Title>): React.JSX.Element;
|
|
16
|
+
declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof Dialog$1.Description>): React.JSX.Element;
|
|
17
|
+
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../../lib/utils.js";
|
|
3
|
+
import { Button } from "./button.js";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
import { XIcon } from "lucide-react";
|
|
6
|
+
import { Dialog as Dialog$1 } from "radix-ui";
|
|
7
|
+
// src/components/ui/dialog.tsx
|
|
8
|
+
function Dialog({ ...props }) {
|
|
9
|
+
return /* @__PURE__ */ jsx(Dialog$1.Root, {
|
|
10
|
+
"data-slot": "dialog",
|
|
11
|
+
...props
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
function DialogTrigger({ ...props }) {
|
|
15
|
+
return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
|
|
16
|
+
"data-slot": "dialog-trigger",
|
|
17
|
+
...props
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
function DialogPortal({ ...props }) {
|
|
21
|
+
return /* @__PURE__ */ jsx(Dialog$1.Portal, {
|
|
22
|
+
"data-slot": "dialog-portal",
|
|
23
|
+
...props
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
function DialogClose({ ...props }) {
|
|
27
|
+
return /* @__PURE__ */ jsx(Dialog$1.Close, {
|
|
28
|
+
"data-slot": "dialog-close",
|
|
29
|
+
...props
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
function DialogOverlay({ className, ...props }) {
|
|
33
|
+
return /* @__PURE__ */ jsx(Dialog$1.Overlay, {
|
|
34
|
+
"data-slot": "dialog-overlay",
|
|
35
|
+
className: cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className),
|
|
36
|
+
...props
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
function DialogContent({ className, children, showCloseButton = true, ...props }) {
|
|
40
|
+
return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog$1.Content, {
|
|
41
|
+
"data-slot": "dialog-content",
|
|
42
|
+
className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm 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),
|
|
43
|
+
...props,
|
|
44
|
+
children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
|
|
45
|
+
"data-slot": "dialog-close",
|
|
46
|
+
asChild: true,
|
|
47
|
+
children: /* @__PURE__ */ jsxs(Button, {
|
|
48
|
+
variant: "ghost",
|
|
49
|
+
className: "absolute top-2 right-2",
|
|
50
|
+
size: "icon-sm",
|
|
51
|
+
children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
|
|
52
|
+
className: "sr-only",
|
|
53
|
+
children: "Close"
|
|
54
|
+
})]
|
|
55
|
+
})
|
|
56
|
+
})]
|
|
57
|
+
})] });
|
|
58
|
+
}
|
|
59
|
+
function DialogHeader({ className, ...props }) {
|
|
60
|
+
return /* @__PURE__ */ jsx("div", {
|
|
61
|
+
"data-slot": "dialog-header",
|
|
62
|
+
className: cn("flex flex-col gap-2", className),
|
|
63
|
+
...props
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
function DialogFooter({ className, showCloseButton = false, children, ...props }) {
|
|
67
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
68
|
+
"data-slot": "dialog-footer",
|
|
69
|
+
className: cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end", className),
|
|
70
|
+
...props,
|
|
71
|
+
children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
|
|
72
|
+
asChild: true,
|
|
73
|
+
children: /* @__PURE__ */ jsx(Button, {
|
|
74
|
+
variant: "outline",
|
|
75
|
+
children: "Close"
|
|
76
|
+
})
|
|
77
|
+
})]
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
function DialogTitle({ className, ...props }) {
|
|
81
|
+
return /* @__PURE__ */ jsx(Dialog$1.Title, {
|
|
82
|
+
"data-slot": "dialog-title",
|
|
83
|
+
className: cn("text-base leading-none font-medium", className),
|
|
84
|
+
...props
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
function DialogDescription({ className, ...props }) {
|
|
88
|
+
return /* @__PURE__ */ jsx(Dialog$1.Description, {
|
|
89
|
+
"data-slot": "dialog-description",
|
|
90
|
+
className: cn("text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className),
|
|
91
|
+
...props
|
|
92
|
+
});
|
|
93
|
+
}
|
|
94
|
+
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Drawer as Drawer$1 } from "vaul";
|
|
3
|
+
declare function Drawer({ ...props }: React.ComponentProps<typeof Drawer$1.Root>): React.JSX.Element;
|
|
4
|
+
declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof Drawer$1.Trigger>): React.JSX.Element;
|
|
5
|
+
declare function DrawerPortal({ ...props }: React.ComponentProps<typeof Drawer$1.Portal>): React.JSX.Element;
|
|
6
|
+
declare function DrawerClose({ ...props }: React.ComponentProps<typeof Drawer$1.Close>): React.JSX.Element;
|
|
7
|
+
declare function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof Drawer$1.Overlay>): React.JSX.Element;
|
|
8
|
+
declare function DrawerContent({ className, children, ...props }: React.ComponentProps<typeof Drawer$1.Content>): React.JSX.Element;
|
|
9
|
+
declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
10
|
+
declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
11
|
+
declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof Drawer$1.Title>): React.JSX.Element;
|
|
12
|
+
declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof Drawer$1.Description>): React.JSX.Element;
|
|
13
|
+
export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../../lib/utils.js";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
import { Drawer as Drawer$1 } from "vaul";
|
|
5
|
+
// src/components/ui/drawer.tsx
|
|
6
|
+
function Drawer({ ...props }) {
|
|
7
|
+
return /* @__PURE__ */ jsx(Drawer$1.Root, {
|
|
8
|
+
"data-slot": "drawer",
|
|
9
|
+
...props
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
function DrawerTrigger({ ...props }) {
|
|
13
|
+
return /* @__PURE__ */ jsx(Drawer$1.Trigger, {
|
|
14
|
+
"data-slot": "drawer-trigger",
|
|
15
|
+
...props
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
function DrawerPortal({ ...props }) {
|
|
19
|
+
return /* @__PURE__ */ jsx(Drawer$1.Portal, {
|
|
20
|
+
"data-slot": "drawer-portal",
|
|
21
|
+
...props
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
function DrawerClose({ ...props }) {
|
|
25
|
+
return /* @__PURE__ */ jsx(Drawer$1.Close, {
|
|
26
|
+
"data-slot": "drawer-close",
|
|
27
|
+
...props
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
function DrawerOverlay({ className, ...props }) {
|
|
31
|
+
return /* @__PURE__ */ jsx(Drawer$1.Overlay, {
|
|
32
|
+
"data-slot": "drawer-overlay",
|
|
33
|
+
className: cn("fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className),
|
|
34
|
+
...props
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
function DrawerContent({ className, children, ...props }) {
|
|
38
|
+
return /* @__PURE__ */ jsxs(DrawerPortal, {
|
|
39
|
+
"data-slot": "drawer-portal",
|
|
40
|
+
children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsxs(Drawer$1.Content, {
|
|
41
|
+
"data-slot": "drawer-content",
|
|
42
|
+
className: cn("group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm", className),
|
|
43
|
+
...props,
|
|
44
|
+
children: [/* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), children]
|
|
45
|
+
})]
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
function DrawerHeader({ className, ...props }) {
|
|
49
|
+
return /* @__PURE__ */ jsx("div", {
|
|
50
|
+
"data-slot": "drawer-header",
|
|
51
|
+
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-0.5 md:text-left", className),
|
|
52
|
+
...props
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
function DrawerFooter({ className, ...props }) {
|
|
56
|
+
return /* @__PURE__ */ jsx("div", {
|
|
57
|
+
"data-slot": "drawer-footer",
|
|
58
|
+
className: cn("mt-auto flex flex-col gap-2 p-4", className),
|
|
59
|
+
...props
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
function DrawerTitle({ className, ...props }) {
|
|
63
|
+
return /* @__PURE__ */ jsx(Drawer$1.Title, {
|
|
64
|
+
"data-slot": "drawer-title",
|
|
65
|
+
className: cn("text-base font-medium text-foreground", className),
|
|
66
|
+
...props
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
function DrawerDescription({ className, ...props }) {
|
|
70
|
+
return /* @__PURE__ */ jsx(Drawer$1.Description, {
|
|
71
|
+
"data-slot": "drawer-description",
|
|
72
|
+
className: cn("text-sm text-muted-foreground", className),
|
|
73
|
+
...props
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { DropdownMenu as DropdownMenu$1 } from "radix-ui";
|
|
3
|
+
declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenu$1.Root>): React.JSX.Element;
|
|
4
|
+
declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenu$1.Portal>): React.JSX.Element;
|
|
5
|
+
declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenu$1.Trigger>): React.JSX.Element;
|
|
6
|
+
declare function DropdownMenuContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenu$1.Content>): React.JSX.Element;
|
|
7
|
+
declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenu$1.Group>): React.JSX.Element;
|
|
8
|
+
declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenu$1.Item> & {
|
|
9
|
+
inset?: boolean;
|
|
10
|
+
variant?: "default" | "destructive";
|
|
11
|
+
}): React.JSX.Element;
|
|
12
|
+
declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: React.ComponentProps<typeof DropdownMenu$1.CheckboxItem> & {
|
|
13
|
+
inset?: boolean;
|
|
14
|
+
}): React.JSX.Element;
|
|
15
|
+
declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenu$1.RadioGroup>): React.JSX.Element;
|
|
16
|
+
declare function DropdownMenuRadioItem({ className, children, inset, ...props }: React.ComponentProps<typeof DropdownMenu$1.RadioItem> & {
|
|
17
|
+
inset?: boolean;
|
|
18
|
+
}): React.JSX.Element;
|
|
19
|
+
declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenu$1.Label> & {
|
|
20
|
+
inset?: boolean;
|
|
21
|
+
}): React.JSX.Element;
|
|
22
|
+
declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenu$1.Separator>): React.JSX.Element;
|
|
23
|
+
declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
24
|
+
declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenu$1.Sub>): React.JSX.Element;
|
|
25
|
+
declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenu$1.SubTrigger> & {
|
|
26
|
+
inset?: boolean;
|
|
27
|
+
}): React.JSX.Element;
|
|
28
|
+
declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenu$1.SubContent>): React.JSX.Element;
|
|
29
|
+
export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../../lib/utils.js";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
import { CheckIcon, ChevronRightIcon } from "lucide-react";
|
|
5
|
+
import { DropdownMenu as DropdownMenu$1 } from "radix-ui";
|
|
6
|
+
// src/components/ui/dropdown-menu.tsx
|
|
7
|
+
function DropdownMenu({ ...props }) {
|
|
8
|
+
return /* @__PURE__ */ jsx(DropdownMenu$1.Root, {
|
|
9
|
+
"data-slot": "dropdown-menu",
|
|
10
|
+
...props
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
function DropdownMenuPortal({ ...props }) {
|
|
14
|
+
return /* @__PURE__ */ jsx(DropdownMenu$1.Portal, {
|
|
15
|
+
"data-slot": "dropdown-menu-portal",
|
|
16
|
+
...props
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
function DropdownMenuTrigger({ ...props }) {
|
|
20
|
+
return /* @__PURE__ */ jsx(DropdownMenu$1.Trigger, {
|
|
21
|
+
"data-slot": "dropdown-menu-trigger",
|
|
22
|
+
...props
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
function DropdownMenuContent({ className, align = "start", sideOffset = 4, ...props }) {
|
|
26
|
+
return /* @__PURE__ */ jsx(DropdownMenu$1.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu$1.Content, {
|
|
27
|
+
"data-slot": "dropdown-menu-content",
|
|
28
|
+
sideOffset,
|
|
29
|
+
align,
|
|
30
|
+
className: cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 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 data-[state=closed]:overflow-hidden 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),
|
|
31
|
+
...props
|
|
32
|
+
}) });
|
|
33
|
+
}
|
|
34
|
+
function DropdownMenuGroup({ ...props }) {
|
|
35
|
+
return /* @__PURE__ */ jsx(DropdownMenu$1.Group, {
|
|
36
|
+
"data-slot": "dropdown-menu-group",
|
|
37
|
+
...props
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
|
|
41
|
+
return /* @__PURE__ */ jsx(DropdownMenu$1.Item, {
|
|
42
|
+
"data-slot": "dropdown-menu-item",
|
|
43
|
+
"data-inset": inset,
|
|
44
|
+
"data-variant": variant,
|
|
45
|
+
className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className),
|
|
46
|
+
...props
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }) {
|
|
50
|
+
return /* @__PURE__ */ jsxs(DropdownMenu$1.CheckboxItem, {
|
|
51
|
+
"data-slot": "dropdown-menu-checkbox-item",
|
|
52
|
+
"data-inset": inset,
|
|
53
|
+
className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
54
|
+
checked,
|
|
55
|
+
...props,
|
|
56
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
57
|
+
className: "pointer-events-none absolute right-2 flex items-center justify-center",
|
|
58
|
+
"data-slot": "dropdown-menu-checkbox-item-indicator",
|
|
59
|
+
children: /* @__PURE__ */ jsx(DropdownMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
|
|
60
|
+
}), children]
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
function DropdownMenuRadioGroup({ ...props }) {
|
|
64
|
+
return /* @__PURE__ */ jsx(DropdownMenu$1.RadioGroup, {
|
|
65
|
+
"data-slot": "dropdown-menu-radio-group",
|
|
66
|
+
...props
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
function DropdownMenuRadioItem({ className, children, inset, ...props }) {
|
|
70
|
+
return /* @__PURE__ */ jsxs(DropdownMenu$1.RadioItem, {
|
|
71
|
+
"data-slot": "dropdown-menu-radio-item",
|
|
72
|
+
"data-inset": inset,
|
|
73
|
+
className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
74
|
+
...props,
|
|
75
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
76
|
+
className: "pointer-events-none absolute right-2 flex items-center justify-center",
|
|
77
|
+
"data-slot": "dropdown-menu-radio-item-indicator",
|
|
78
|
+
children: /* @__PURE__ */ jsx(DropdownMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
|
|
79
|
+
}), children]
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
function DropdownMenuLabel({ className, inset, ...props }) {
|
|
83
|
+
return /* @__PURE__ */ jsx(DropdownMenu$1.Label, {
|
|
84
|
+
"data-slot": "dropdown-menu-label",
|
|
85
|
+
"data-inset": inset,
|
|
86
|
+
className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className),
|
|
87
|
+
...props
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
function DropdownMenuSeparator({ className, ...props }) {
|
|
91
|
+
return /* @__PURE__ */ jsx(DropdownMenu$1.Separator, {
|
|
92
|
+
"data-slot": "dropdown-menu-separator",
|
|
93
|
+
className: cn("-mx-1 my-1 h-px bg-border", className),
|
|
94
|
+
...props
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
function DropdownMenuShortcut({ className, ...props }) {
|
|
98
|
+
return /* @__PURE__ */ jsx("span", {
|
|
99
|
+
"data-slot": "dropdown-menu-shortcut",
|
|
100
|
+
className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", className),
|
|
101
|
+
...props
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
function DropdownMenuSub({ ...props }) {
|
|
105
|
+
return /* @__PURE__ */ jsx(DropdownMenu$1.Sub, {
|
|
106
|
+
"data-slot": "dropdown-menu-sub",
|
|
107
|
+
...props
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
|
|
111
|
+
return /* @__PURE__ */ jsxs(DropdownMenu$1.SubTrigger, {
|
|
112
|
+
"data-slot": "dropdown-menu-sub-trigger",
|
|
113
|
+
"data-inset": inset,
|
|
114
|
+
className: cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
115
|
+
...props,
|
|
116
|
+
children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
function DropdownMenuSubContent({ className, ...props }) {
|
|
120
|
+
return /* @__PURE__ */ jsx(DropdownMenu$1.SubContent, {
|
|
121
|
+
"data-slot": "dropdown-menu-sub-content",
|
|
122
|
+
className: cn("z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 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 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),
|
|
123
|
+
...props
|
|
124
|
+
});
|
|
125
|
+
}
|
|
126
|
+
export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { VariantProps } from "class-variance-authority";
|
|
2
|
+
declare function Empty({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
|
|
3
|
+
declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): import("react").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.Element;
|
|
8
|
+
declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
|
|
9
|
+
declare function EmptyDescription({ className, ...props }: React.ComponentProps<"p">): import("react").JSX.Element;
|
|
10
|
+
declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
|
|
11
|
+
export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../../lib/utils.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { cva } from "class-variance-authority";
|
|
5
|
+
// src/components/ui/empty.tsx
|
|
6
|
+
function Empty({ className, ...props }) {
|
|
7
|
+
return /* @__PURE__ */ jsx("div", {
|
|
8
|
+
"data-slot": "empty",
|
|
9
|
+
className: cn("flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance", className),
|
|
10
|
+
...props
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
function EmptyHeader({ className, ...props }) {
|
|
14
|
+
return /* @__PURE__ */ jsx("div", {
|
|
15
|
+
"data-slot": "empty-header",
|
|
16
|
+
className: cn("flex max-w-sm flex-col items-center gap-2", className),
|
|
17
|
+
...props
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
const emptyMediaVariants = cva("mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
|
|
21
|
+
variants: { variant: {
|
|
22
|
+
default: "bg-transparent",
|
|
23
|
+
icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4"
|
|
24
|
+
} },
|
|
25
|
+
defaultVariants: { variant: "default" }
|
|
26
|
+
});
|
|
27
|
+
function EmptyMedia({ className, variant = "default", ...props }) {
|
|
28
|
+
return /* @__PURE__ */ jsx("div", {
|
|
29
|
+
"data-slot": "empty-icon",
|
|
30
|
+
"data-variant": variant,
|
|
31
|
+
className: cn(emptyMediaVariants({
|
|
32
|
+
variant,
|
|
33
|
+
className
|
|
34
|
+
})),
|
|
35
|
+
...props
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
function EmptyTitle({ className, ...props }) {
|
|
39
|
+
return /* @__PURE__ */ jsx("div", {
|
|
40
|
+
"data-slot": "empty-title",
|
|
41
|
+
className: cn("text-sm font-medium tracking-tight", className),
|
|
42
|
+
...props
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
function EmptyDescription({ className, ...props }) {
|
|
46
|
+
return /* @__PURE__ */ jsx("div", {
|
|
47
|
+
"data-slot": "empty-description",
|
|
48
|
+
className: cn("text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
|
|
49
|
+
...props
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
function EmptyContent({ className, ...props }) {
|
|
53
|
+
return /* @__PURE__ */ jsx("div", {
|
|
54
|
+
"data-slot": "empty-content",
|
|
55
|
+
className: cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance", className),
|
|
56
|
+
...props
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { Label } from "./label.js";
|
|
2
|
+
import { VariantProps } from "class-variance-authority";
|
|
3
|
+
declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): import("react").JSX.Element;
|
|
4
|
+
declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
|
|
5
|
+
variant?: "legend" | "label";
|
|
6
|
+
}): import("react").JSX.Element;
|
|
7
|
+
declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
|
|
8
|
+
declare const fieldVariants: (props?: ({
|
|
9
|
+
orientation?: "horizontal" | "responsive" | "vertical" | 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.Element;
|
|
12
|
+
declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
|
|
13
|
+
declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react").JSX.Element;
|
|
14
|
+
declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
|
|
15
|
+
declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): import("react").JSX.Element;
|
|
16
|
+
declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
|
|
17
|
+
children?: React.ReactNode;
|
|
18
|
+
}): import("react").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.Element | null;
|
|
24
|
+
export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../../lib/utils.js";
|
|
3
|
+
import { Label } from "./label.js";
|
|
4
|
+
import { Separator } from "./separator.js";
|
|
5
|
+
import { useMemo } from "react";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import { cva } from "class-variance-authority";
|
|
8
|
+
// src/components/ui/field.tsx
|
|
9
|
+
function FieldSet({ className, ...props }) {
|
|
10
|
+
return /* @__PURE__ */ jsx("fieldset", {
|
|
11
|
+
"data-slot": "field-set",
|
|
12
|
+
className: cn("flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className),
|
|
13
|
+
...props
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
function FieldLegend({ className, variant = "legend", ...props }) {
|
|
17
|
+
return /* @__PURE__ */ jsx("legend", {
|
|
18
|
+
"data-slot": "field-legend",
|
|
19
|
+
"data-variant": variant,
|
|
20
|
+
className: cn("mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className),
|
|
21
|
+
...props
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
function FieldGroup({ className, ...props }) {
|
|
25
|
+
return /* @__PURE__ */ jsx("div", {
|
|
26
|
+
"data-slot": "field-group",
|
|
27
|
+
className: cn("group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4", className),
|
|
28
|
+
...props
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
const fieldVariants = cva("group/field flex w-full gap-2 data-[invalid=true]:text-destructive", {
|
|
32
|
+
variants: { orientation: {
|
|
33
|
+
vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
|
|
34
|
+
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",
|
|
35
|
+
responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
|
|
36
|
+
} },
|
|
37
|
+
defaultVariants: { orientation: "vertical" }
|
|
38
|
+
});
|
|
39
|
+
function Field({ className, orientation = "vertical", ...props }) {
|
|
40
|
+
return /* @__PURE__ */ jsx("div", {
|
|
41
|
+
role: "group",
|
|
42
|
+
"data-slot": "field",
|
|
43
|
+
"data-orientation": orientation,
|
|
44
|
+
className: cn(fieldVariants({ orientation }), className),
|
|
45
|
+
...props
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
function FieldContent({ className, ...props }) {
|
|
49
|
+
return /* @__PURE__ */ jsx("div", {
|
|
50
|
+
"data-slot": "field-content",
|
|
51
|
+
className: cn("group/field-content flex flex-1 flex-col gap-0.5 leading-snug", className),
|
|
52
|
+
...props
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
function FieldLabel({ className, ...props }) {
|
|
56
|
+
return /* @__PURE__ */ jsx(Label, {
|
|
57
|
+
"data-slot": "field-label",
|
|
58
|
+
className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className),
|
|
59
|
+
...props
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
function FieldTitle({ className, ...props }) {
|
|
63
|
+
return /* @__PURE__ */ jsx("div", {
|
|
64
|
+
"data-slot": "field-label",
|
|
65
|
+
className: cn("flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50", className),
|
|
66
|
+
...props
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
function FieldDescription({ className, ...props }) {
|
|
70
|
+
return /* @__PURE__ */ jsx("p", {
|
|
71
|
+
"data-slot": "field-description",
|
|
72
|
+
className: cn("text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
|
|
73
|
+
...props
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
function FieldSeparator({ children, className, ...props }) {
|
|
77
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
78
|
+
"data-slot": "field-separator",
|
|
79
|
+
"data-content": !!children,
|
|
80
|
+
className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className),
|
|
81
|
+
...props,
|
|
82
|
+
children: [/* @__PURE__ */ jsx(Separator, { className: "absolute inset-0 top-1/2" }), children && /* @__PURE__ */ jsx("span", {
|
|
83
|
+
className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground",
|
|
84
|
+
"data-slot": "field-separator-content",
|
|
85
|
+
children
|
|
86
|
+
})]
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
function FieldError({ className, children, errors, ...props }) {
|
|
90
|
+
const content = useMemo(() => {
|
|
91
|
+
if (children) return children;
|
|
92
|
+
if (!errors?.length) return null;
|
|
93
|
+
const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
|
|
94
|
+
if (uniqueErrors?.length == 1) return uniqueErrors[0]?.message;
|
|
95
|
+
return /* @__PURE__ */ jsx("ul", {
|
|
96
|
+
className: "ml-4 flex list-disc flex-col gap-1",
|
|
97
|
+
children: uniqueErrors.map((error, index) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, index))
|
|
98
|
+
});
|
|
99
|
+
}, [children, errors]);
|
|
100
|
+
if (!content) return null;
|
|
101
|
+
return /* @__PURE__ */ jsx("div", {
|
|
102
|
+
role: "alert",
|
|
103
|
+
"data-slot": "field-error",
|
|
104
|
+
className: cn("text-sm font-normal text-destructive", className),
|
|
105
|
+
...props,
|
|
106
|
+
children: content
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { HoverCard as HoverCard$1 } from "radix-ui";
|
|
3
|
+
declare function HoverCard({ ...props }: React.ComponentProps<typeof HoverCard$1.Root>): React.JSX.Element;
|
|
4
|
+
declare function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCard$1.Trigger>): React.JSX.Element;
|
|
5
|
+
declare function HoverCardContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof HoverCard$1.Content>): React.JSX.Element;
|
|
6
|
+
export { HoverCard, HoverCardContent, HoverCardTrigger };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../../lib/utils.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { HoverCard as HoverCard$1 } from "radix-ui";
|
|
5
|
+
// src/components/ui/hover-card.tsx
|
|
6
|
+
function HoverCard({ ...props }) {
|
|
7
|
+
return /* @__PURE__ */ jsx(HoverCard$1.Root, {
|
|
8
|
+
"data-slot": "hover-card",
|
|
9
|
+
...props
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
function HoverCardTrigger({ ...props }) {
|
|
13
|
+
return /* @__PURE__ */ jsx(HoverCard$1.Trigger, {
|
|
14
|
+
"data-slot": "hover-card-trigger",
|
|
15
|
+
...props
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
function HoverCardContent({ className, align = "center", sideOffset = 4, ...props }) {
|
|
19
|
+
return /* @__PURE__ */ jsx(HoverCard$1.Portal, {
|
|
20
|
+
"data-slot": "hover-card-portal",
|
|
21
|
+
children: /* @__PURE__ */ jsx(HoverCard$1.Content, {
|
|
22
|
+
"data-slot": "hover-card-content",
|
|
23
|
+
align,
|
|
24
|
+
sideOffset,
|
|
25
|
+
className: cn("z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 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 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),
|
|
26
|
+
...props
|
|
27
|
+
})
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
export { HoverCard, HoverCardContent, HoverCardTrigger };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { Button } from "./button.js";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { VariantProps } from "class-variance-authority";
|
|
4
|
+
declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
5
|
+
declare const inputGroupAddonVariants: (props?: ({
|
|
6
|
+
align?: "block-end" | "block-start" | "inline-end" | "inline-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>): React.JSX.Element;
|
|
9
|
+
declare const inputGroupButtonVariants: (props?: ({
|
|
10
|
+
size?: "icon-sm" | "icon-xs" | "sm" | "xs" | 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"> & VariantProps<typeof inputGroupButtonVariants>): React.JSX.Element;
|
|
13
|
+
declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
14
|
+
declare function InputGroupInput({ className, ...props }: React.ComponentProps<"input">): React.JSX.Element;
|
|
15
|
+
declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
|
|
16
|
+
export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };
|