harebear-ui 0.0.0-stage → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +66 -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 +151 -0
- package/dist/components/ai/code-block.d.ts +27 -0
- package/dist/components/ai/code-block.js +63 -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/auth/auth.d.ts +85 -0
- package/dist/components/auth/auth.js +325 -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 +21 -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/attachment.d.ts +24 -0
- package/dist/components/ui/attachment.js +100 -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/bubble.d.ts +17 -0
- package/dist/components/ui/bubble.js +71 -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/code-block.d.ts +26 -0
- package/dist/components/ui/code-block.js +123 -0
- package/dist/components/ui/collapsible.d.ts +5 -0
- package/dist/components/ui/collapsible.js +23 -0
- package/dist/components/ui/combobox.d.ts +24 -0
- package/dist/components/ui/combobox.js +162 -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/direction.d.ts +7 -0
- package/dist/components/ui/direction.js +12 -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/marker.d.ts +11 -0
- package/dist/components/ui/marker.js +39 -0
- package/dist/components/ui/menubar.d.ts +30 -0
- package/dist/components/ui/menubar.js +133 -0
- package/dist/components/ui/message-scroller.d.ts +10 -0
- package/dist/components/ui/message-scroller.js +59 -0
- package/dist/components/ui/message.d.ts +10 -0
- package/dist/components/ui/message.js +48 -0
- package/dist/components/ui/native-select.d.ts +8 -0
- package/dist/components/ui/native-select.js +37 -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/questionnaire.d.ts +19 -0
- package/dist/components/ui/questionnaire.js +168 -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/components/ui/trace.d.ts +18 -0
- package/dist/components/ui/trace.js +74 -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-highlighted-code.d.ts +2 -0
- package/dist/hooks/use-highlighted-code.js +54 -0
- package/dist/hooks/use-mobile.d.ts +1 -0
- package/dist/hooks/use-mobile.js +17 -0
- package/dist/index.d.ts +94 -0
- package/dist/index.js +94 -0
- package/dist/lib/highlighter.d.ts +9 -0
- package/dist/lib/highlighter.js +77 -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 +405 -0
- package/llms.txt +36 -0
- package/package.json +119 -4
- package/skills/harebear-ui/SKILL.md +34 -0
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../../lib/utils.js";
|
|
3
|
+
import { Button } from "./button.js";
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
import { CheckIcon, CopyIcon } from "lucide-react";
|
|
7
|
+
import { cva } from "class-variance-authority";
|
|
8
|
+
// src/components/ui/code-block.tsx
|
|
9
|
+
const codeBlockVariants = cva("group/code-block relative flex w-full min-w-0 flex-col overflow-hidden rounded-lg text-sm has-[>[data-slot=code-block-content]:focus-visible]:ring-3 has-[>[data-slot=code-block-content]:focus-visible]:ring-ring/50 data-[size=sm]:text-xs", {
|
|
10
|
+
variants: { variant: {
|
|
11
|
+
default: "bg-muted text-foreground",
|
|
12
|
+
destructive: "border border-destructive/30 text-destructive dark:border-destructive/40"
|
|
13
|
+
} },
|
|
14
|
+
defaultVariants: { variant: "default" }
|
|
15
|
+
});
|
|
16
|
+
function CodeBlock({ className, variant = "default", size = "default", ...props }) {
|
|
17
|
+
return /* @__PURE__ */ jsx("div", {
|
|
18
|
+
"data-slot": "code-block",
|
|
19
|
+
"data-variant": variant,
|
|
20
|
+
"data-size": size,
|
|
21
|
+
className: cn(codeBlockVariants({ variant }), className),
|
|
22
|
+
...props
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
function CodeBlockHeader({ className, ...props }) {
|
|
26
|
+
return /* @__PURE__ */ jsx("div", {
|
|
27
|
+
"data-slot": "code-block-header",
|
|
28
|
+
className: cn("flex min-w-0 shrink-0 items-center gap-2 pt-2 pr-2 pl-4.5 text-muted-foreground group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:pt-2.5 group-data-[variant=destructive]/code-block:text-destructive *:has-[>[data-slot=code-block-title]]:min-w-0", className),
|
|
29
|
+
...props
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
function CodeBlockTitle({ className, ...props }) {
|
|
33
|
+
return /* @__PURE__ */ jsx("div", {
|
|
34
|
+
"data-slot": "code-block-title",
|
|
35
|
+
className: cn("min-w-0 truncate font-sans text-sm font-medium text-foreground group-data-[size=sm]/code-block:text-xs group-data-[variant=destructive]/code-block:text-destructive [&_svg]:pointer-events-none [&_svg]:inline-block [&_svg]:align-middle [&_svg:not([class*='size-'])]:size-3.5 *:[svg]:me-1.5", className),
|
|
36
|
+
...props
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
function CodeBlockActions({ className, ...props }) {
|
|
40
|
+
return /* @__PURE__ */ jsx("div", {
|
|
41
|
+
"data-slot": "code-block-actions",
|
|
42
|
+
className: cn("-my-1 ms-auto -me-1.5 flex shrink-0 items-center gap-1 [[data-slot=code-block]>&]:absolute [[data-slot=code-block]>&]:end-2 [[data-slot=code-block]>&]:top-2 [[data-slot=code-block]>&]:z-10 [[data-slot=code-block]>&]:m-0 [[data-slot=code-block]>&]:opacity-0 [[data-slot=code-block]>&]:transition-opacity [[data-slot=code-block]>&]:group-focus-within/code-block:opacity-100 [[data-slot=code-block]>&]:group-hover/code-block:opacity-100 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:end-1.5 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:top-1.5 [[data-slot=code-block]>&]:pointer-coarse:opacity-100 [[data-slot=code-block]>&]:*:[button]:bg-background [[data-slot=code-block]>&]:*:[button]:ring-1 [[data-slot=code-block]>&]:*:[button]:ring-foreground/10", className),
|
|
43
|
+
...props
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
function CodeBlockCopyButton({ value, variant = "ghost", size = "icon-xs", type = "button", className, onClick, ...props }) {
|
|
47
|
+
const [copied, setCopied] = React.useState(false);
|
|
48
|
+
React.useEffect(() => {
|
|
49
|
+
if (!copied) return;
|
|
50
|
+
const timeout = setTimeout(() => setCopied(false), 2e3);
|
|
51
|
+
return () => clearTimeout(timeout);
|
|
52
|
+
}, [copied]);
|
|
53
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
|
|
54
|
+
"data-slot": "code-block-copy-button",
|
|
55
|
+
"data-copied": copied || void 0,
|
|
56
|
+
type,
|
|
57
|
+
variant,
|
|
58
|
+
size,
|
|
59
|
+
"aria-label": copied ? "Copied" : "Copy",
|
|
60
|
+
className: cn(className),
|
|
61
|
+
onClick: (event) => {
|
|
62
|
+
onClick?.(event);
|
|
63
|
+
navigator.clipboard.writeText(value).then(() => setCopied(true)).catch(() => {});
|
|
64
|
+
},
|
|
65
|
+
...props,
|
|
66
|
+
children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
|
|
67
|
+
}), /* @__PURE__ */ jsx("span", {
|
|
68
|
+
"aria-live": "polite",
|
|
69
|
+
className: "sr-only",
|
|
70
|
+
children: copied ? "Copied" : ""
|
|
71
|
+
})] });
|
|
72
|
+
}
|
|
73
|
+
function CodeBlockContent({ className, children, style, wrap = false, lineNumbers = false, startLine = 1, ...props }) {
|
|
74
|
+
return /* @__PURE__ */ jsx("pre", {
|
|
75
|
+
"data-slot": "code-block-content",
|
|
76
|
+
"data-wrap": wrap || void 0,
|
|
77
|
+
"data-numbered": lineNumbers || void 0,
|
|
78
|
+
dir: "ltr",
|
|
79
|
+
tabIndex: 0,
|
|
80
|
+
style: {
|
|
81
|
+
counterReset: `line ${startLine - 1}`,
|
|
82
|
+
...style
|
|
83
|
+
},
|
|
84
|
+
className: cn("min-h-0 min-w-0 scroll-fade-x scrollbar-thin overflow-auto px-4.5 py-3 text-start font-mono text-[13px] leading-[1.7] outline-none group-has-data-[slot=code-block-footer]/code-block:pb-2 group-has-data-[slot=code-block-header]/code-block:pt-2 group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:py-2.5 group-data-[size=sm]/code-block:group-has-data-[slot=code-block-header]/code-block:pt-1.5 data-wrap:scroll-fade-y data-wrap:wrap-break-word data-wrap:whitespace-pre-wrap", className),
|
|
85
|
+
...props,
|
|
86
|
+
children: /* @__PURE__ */ jsx("code", {
|
|
87
|
+
"data-slot": "code-block-code",
|
|
88
|
+
className: "grid min-h-lh min-w-max content-start in-data-numbered:grid-cols-[auto_1fr] in-data-wrap:min-w-0",
|
|
89
|
+
children: lineNumbers && typeof children === "string" ? children.replace(/\n$/, "").split("\n").map((line, index) => /* @__PURE__ */ jsx(CodeBlockLine, { children: line }, index)) : children
|
|
90
|
+
})
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
const codeBlockLineVariants = cva("relative -mx-4.5 block min-h-lh px-4.5 group-data-[size=sm]/code-block:-mx-2.5 group-data-[size=sm]/code-block:px-2.5 before:min-w-6 before:text-end before:text-muted-foreground after:absolute after:start-1 after:top-0 after:text-muted-foreground after:select-none in-data-numbered:col-span-2 in-data-numbered:grid in-data-numbered:grid-cols-subgrid in-data-numbered:gap-x-3 in-data-numbered:[counter-increment:line] in-data-numbered:before:content-[counter(line)] in-data-numbered:before:select-none in-data-numbered:supports-[content:counter(line)_/_'']:before:content-[counter(line)_/_'']", {
|
|
94
|
+
variants: { variant: {
|
|
95
|
+
default: "",
|
|
96
|
+
added: "bg-success/12 after:text-success after:content-['+']",
|
|
97
|
+
removed: "bg-destructive/10 after:text-destructive after:content-['−']",
|
|
98
|
+
highlighted: "bg-primary-soft"
|
|
99
|
+
} },
|
|
100
|
+
defaultVariants: { variant: "default" }
|
|
101
|
+
});
|
|
102
|
+
function CodeBlockLine({ className, variant = "default", children, ...props }) {
|
|
103
|
+
const empty = children === void 0 || children === null || children === "" || Array.isArray(children) && children.length === 0;
|
|
104
|
+
return /* @__PURE__ */ jsx("span", {
|
|
105
|
+
"data-slot": "code-block-line",
|
|
106
|
+
"data-variant": variant,
|
|
107
|
+
className: cn(codeBlockLineVariants({ variant }), className),
|
|
108
|
+
...props,
|
|
109
|
+
children: /* @__PURE__ */ jsx("span", {
|
|
110
|
+
"data-slot": "code-block-line-content",
|
|
111
|
+
className: "min-w-0",
|
|
112
|
+
children: empty ? "\n" : children
|
|
113
|
+
})
|
|
114
|
+
});
|
|
115
|
+
}
|
|
116
|
+
function CodeBlockFooter({ className, ...props }) {
|
|
117
|
+
return /* @__PURE__ */ jsx("div", {
|
|
118
|
+
"data-slot": "code-block-footer",
|
|
119
|
+
className: cn("flex min-w-0 shrink-0 items-center gap-2 px-3 pb-3 text-muted-foreground group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:pb-2.5", className),
|
|
120
|
+
...props
|
|
121
|
+
});
|
|
122
|
+
}
|
|
123
|
+
export { CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { Collapsible as Collapsible$1 } from "radix-ui";
|
|
2
|
+
declare function Collapsible({ ...props }: React.ComponentProps<typeof Collapsible$1.Root>): import("react").JSX.Element;
|
|
3
|
+
declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof Collapsible$1.CollapsibleTrigger>): import("react").JSX.Element;
|
|
4
|
+
declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof Collapsible$1.CollapsibleContent>): import("react").JSX.Element;
|
|
5
|
+
export { Collapsible, CollapsibleContent, CollapsibleTrigger };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { Collapsible as Collapsible$1 } from "radix-ui";
|
|
4
|
+
// src/components/ui/collapsible.tsx
|
|
5
|
+
function Collapsible({ ...props }) {
|
|
6
|
+
return /* @__PURE__ */ jsx(Collapsible$1.Root, {
|
|
7
|
+
"data-slot": "collapsible",
|
|
8
|
+
...props
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
function CollapsibleTrigger({ ...props }) {
|
|
12
|
+
return /* @__PURE__ */ jsx(Collapsible$1.CollapsibleTrigger, {
|
|
13
|
+
"data-slot": "collapsible-trigger",
|
|
14
|
+
...props
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
function CollapsibleContent({ ...props }) {
|
|
18
|
+
return /* @__PURE__ */ jsx(Collapsible$1.CollapsibleContent, {
|
|
19
|
+
"data-slot": "collapsible-content",
|
|
20
|
+
...props
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
export { Collapsible, CollapsibleContent, CollapsibleTrigger };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Combobox as Combobox$1 } from "@base-ui/react";
|
|
3
|
+
declare const Combobox: typeof Combobox$1.Root;
|
|
4
|
+
declare function ComboboxValue({ ...props }: Combobox$1.Value.Props): React.JSX.Element;
|
|
5
|
+
declare function ComboboxTrigger({ className, children, ...props }: Combobox$1.Trigger.Props): React.JSX.Element;
|
|
6
|
+
declare function ComboboxInput({ className, children, disabled, showTrigger, showClear, ...props }: Combobox$1.Input.Props & {
|
|
7
|
+
showTrigger?: boolean;
|
|
8
|
+
showClear?: boolean;
|
|
9
|
+
}): React.JSX.Element;
|
|
10
|
+
declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, ...props }: Combobox$1.Popup.Props & Pick<Combobox$1.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor">): React.JSX.Element;
|
|
11
|
+
declare function ComboboxList({ className, ...props }: Combobox$1.List.Props): React.JSX.Element;
|
|
12
|
+
declare function ComboboxItem({ className, children, ...props }: Combobox$1.Item.Props): React.JSX.Element;
|
|
13
|
+
declare function ComboboxGroup({ className, ...props }: Combobox$1.Group.Props): React.JSX.Element;
|
|
14
|
+
declare function ComboboxLabel({ className, ...props }: Combobox$1.GroupLabel.Props): React.JSX.Element;
|
|
15
|
+
declare function ComboboxCollection({ ...props }: Combobox$1.Collection.Props): React.JSX.Element;
|
|
16
|
+
declare function ComboboxEmpty({ className, ...props }: Combobox$1.Empty.Props): React.JSX.Element;
|
|
17
|
+
declare function ComboboxSeparator({ className, ...props }: Combobox$1.Separator.Props): React.JSX.Element;
|
|
18
|
+
declare function ComboboxChips({ className, ...props }: React.ComponentPropsWithRef<typeof Combobox$1.Chips> & Combobox$1.Chips.Props): React.JSX.Element;
|
|
19
|
+
declare function ComboboxChip({ className, children, showRemove, ...props }: Combobox$1.Chip.Props & {
|
|
20
|
+
showRemove?: boolean;
|
|
21
|
+
}): React.JSX.Element;
|
|
22
|
+
declare function ComboboxChipsInput({ className, ...props }: Combobox$1.Input.Props): React.JSX.Element;
|
|
23
|
+
declare function useComboboxAnchor(): React.RefObject<HTMLDivElement | null>;
|
|
24
|
+
export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor };
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../../lib/utils.js";
|
|
3
|
+
import { Button } from "./button.js";
|
|
4
|
+
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
|
|
5
|
+
import * as React from "react";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
|
|
8
|
+
import { Combobox as Combobox$1 } from "@base-ui/react";
|
|
9
|
+
// src/components/ui/combobox.tsx
|
|
10
|
+
const Combobox = Combobox$1.Root;
|
|
11
|
+
function ComboboxValue({ ...props }) {
|
|
12
|
+
return /* @__PURE__ */ jsx(Combobox$1.Value, {
|
|
13
|
+
"data-slot": "combobox-value",
|
|
14
|
+
...props
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
function ComboboxTrigger({ className, children, ...props }) {
|
|
18
|
+
return /* @__PURE__ */ jsxs(Combobox$1.Trigger, {
|
|
19
|
+
"data-slot": "combobox-trigger",
|
|
20
|
+
className: cn("[&_svg:not([class*='size-'])]:size-4", className),
|
|
21
|
+
...props,
|
|
22
|
+
children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" })]
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
function ComboboxClear({ className, ...props }) {
|
|
26
|
+
return /* @__PURE__ */ jsx(Combobox$1.Clear, {
|
|
27
|
+
"data-slot": "combobox-clear",
|
|
28
|
+
render: /* @__PURE__ */ jsx(InputGroupButton, {
|
|
29
|
+
variant: "ghost",
|
|
30
|
+
size: "icon-xs"
|
|
31
|
+
}),
|
|
32
|
+
className: cn(className),
|
|
33
|
+
...props,
|
|
34
|
+
children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none" })
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
|
|
38
|
+
return /* @__PURE__ */ jsxs(InputGroup, {
|
|
39
|
+
className: cn("w-auto", className),
|
|
40
|
+
children: [
|
|
41
|
+
/* @__PURE__ */ jsx(Combobox$1.Input, {
|
|
42
|
+
render: /* @__PURE__ */ jsx(InputGroupInput, { disabled }),
|
|
43
|
+
...props
|
|
44
|
+
}),
|
|
45
|
+
/* @__PURE__ */ jsxs(InputGroupAddon, {
|
|
46
|
+
align: "inline-end",
|
|
47
|
+
children: [showTrigger && /* @__PURE__ */ jsx(InputGroupButton, {
|
|
48
|
+
size: "icon-xs",
|
|
49
|
+
variant: "ghost",
|
|
50
|
+
asChild: true,
|
|
51
|
+
"data-slot": "input-group-button",
|
|
52
|
+
className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent",
|
|
53
|
+
disabled,
|
|
54
|
+
children: /* @__PURE__ */ jsx(ComboboxTrigger, {})
|
|
55
|
+
}), showClear && /* @__PURE__ */ jsx(ComboboxClear, { disabled })]
|
|
56
|
+
}),
|
|
57
|
+
children
|
|
58
|
+
]
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
|
|
62
|
+
return /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Combobox$1.Positioner, {
|
|
63
|
+
side,
|
|
64
|
+
sideOffset,
|
|
65
|
+
align,
|
|
66
|
+
alignOffset,
|
|
67
|
+
anchor,
|
|
68
|
+
className: "isolate z-50",
|
|
69
|
+
children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
|
|
70
|
+
"data-slot": "combobox-content",
|
|
71
|
+
"data-chips": !!anchor,
|
|
72
|
+
className: cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none 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),
|
|
73
|
+
...props
|
|
74
|
+
})
|
|
75
|
+
}) });
|
|
76
|
+
}
|
|
77
|
+
function ComboboxList({ className, ...props }) {
|
|
78
|
+
return /* @__PURE__ */ jsx(Combobox$1.List, {
|
|
79
|
+
"data-slot": "combobox-list",
|
|
80
|
+
className: cn("no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0", className),
|
|
81
|
+
...props
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
function ComboboxItem({ className, children, ...props }) {
|
|
85
|
+
return /* @__PURE__ */ jsxs(Combobox$1.Item, {
|
|
86
|
+
"data-slot": "combobox-item",
|
|
87
|
+
className: cn("relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
88
|
+
...props,
|
|
89
|
+
children: [children, /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, {
|
|
90
|
+
render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
|
|
91
|
+
children: /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none" })
|
|
92
|
+
})]
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
function ComboboxGroup({ className, ...props }) {
|
|
96
|
+
return /* @__PURE__ */ jsx(Combobox$1.Group, {
|
|
97
|
+
"data-slot": "combobox-group",
|
|
98
|
+
className: cn(className),
|
|
99
|
+
...props
|
|
100
|
+
});
|
|
101
|
+
}
|
|
102
|
+
function ComboboxLabel({ className, ...props }) {
|
|
103
|
+
return /* @__PURE__ */ jsx(Combobox$1.GroupLabel, {
|
|
104
|
+
"data-slot": "combobox-label",
|
|
105
|
+
className: cn("px-2 py-1.5 text-xs text-muted-foreground", className),
|
|
106
|
+
...props
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
function ComboboxCollection({ ...props }) {
|
|
110
|
+
return /* @__PURE__ */ jsx(Combobox$1.Collection, {
|
|
111
|
+
"data-slot": "combobox-collection",
|
|
112
|
+
...props
|
|
113
|
+
});
|
|
114
|
+
}
|
|
115
|
+
function ComboboxEmpty({ className, ...props }) {
|
|
116
|
+
return /* @__PURE__ */ jsx(Combobox$1.Empty, {
|
|
117
|
+
"data-slot": "combobox-empty",
|
|
118
|
+
className: cn("hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex", className),
|
|
119
|
+
...props
|
|
120
|
+
});
|
|
121
|
+
}
|
|
122
|
+
function ComboboxSeparator({ className, ...props }) {
|
|
123
|
+
return /* @__PURE__ */ jsx(Combobox$1.Separator, {
|
|
124
|
+
"data-slot": "combobox-separator",
|
|
125
|
+
className: cn("-mx-1 my-1 h-px bg-border", className),
|
|
126
|
+
...props
|
|
127
|
+
});
|
|
128
|
+
}
|
|
129
|
+
function ComboboxChips({ className, ...props }) {
|
|
130
|
+
return /* @__PURE__ */ jsx(Combobox$1.Chips, {
|
|
131
|
+
"data-slot": "combobox-chips",
|
|
132
|
+
className: cn("flex min-h-10 flex-wrap items-center gap-1 rounded-md border border-transparent bg-muted bg-clip-padding px-3.5 py-1 text-sm transition-[border-color,box-shadow,background-color] focus-within:border-primary focus-within:bg-card focus-within:ring-4 focus-within:ring-primary/15 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40", className),
|
|
133
|
+
...props
|
|
134
|
+
});
|
|
135
|
+
}
|
|
136
|
+
function ComboboxChip({ className, children, showRemove = true, ...props }) {
|
|
137
|
+
return /* @__PURE__ */ jsxs(Combobox$1.Chip, {
|
|
138
|
+
"data-slot": "combobox-chip",
|
|
139
|
+
className: cn("flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0", className),
|
|
140
|
+
...props,
|
|
141
|
+
children: [children, showRemove && /* @__PURE__ */ jsx(Combobox$1.ChipRemove, {
|
|
142
|
+
render: /* @__PURE__ */ jsx(Button, {
|
|
143
|
+
variant: "ghost",
|
|
144
|
+
size: "icon-xs"
|
|
145
|
+
}),
|
|
146
|
+
className: "-ml-1 opacity-50 hover:opacity-100",
|
|
147
|
+
"data-slot": "combobox-chip-remove",
|
|
148
|
+
children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none" })
|
|
149
|
+
})]
|
|
150
|
+
});
|
|
151
|
+
}
|
|
152
|
+
function ComboboxChipsInput({ className, ...props }) {
|
|
153
|
+
return /* @__PURE__ */ jsx(Combobox$1.Input, {
|
|
154
|
+
"data-slot": "combobox-chip-input",
|
|
155
|
+
className: cn("min-w-16 flex-1 outline-none", className),
|
|
156
|
+
...props
|
|
157
|
+
});
|
|
158
|
+
}
|
|
159
|
+
function useComboboxAnchor() {
|
|
160
|
+
return React.useRef(null);
|
|
161
|
+
}
|
|
162
|
+
export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Dialog } from "./dialog.js";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { Command as Command$1 } from "cmdk";
|
|
4
|
+
declare function Command({ className, ...props }: React.ComponentProps<typeof Command$1>): React.JSX.Element;
|
|
5
|
+
declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: React.ComponentProps<typeof Dialog> & {
|
|
6
|
+
title?: string;
|
|
7
|
+
description?: string;
|
|
8
|
+
className?: string;
|
|
9
|
+
showCloseButton?: boolean;
|
|
10
|
+
}): React.JSX.Element;
|
|
11
|
+
declare function CommandInput({ className, ...props }: React.ComponentProps<typeof Command$1.Input>): React.JSX.Element;
|
|
12
|
+
declare function CommandList({ className, ...props }: React.ComponentProps<typeof Command$1.List>): React.JSX.Element;
|
|
13
|
+
declare function CommandEmpty({ className, ...props }: React.ComponentProps<typeof Command$1.Empty>): React.JSX.Element;
|
|
14
|
+
declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof Command$1.Group>): React.JSX.Element;
|
|
15
|
+
declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof Command$1.Separator>): React.JSX.Element;
|
|
16
|
+
declare function CommandItem({ className, children, ...props }: React.ComponentProps<typeof Command$1.Item>): React.JSX.Element;
|
|
17
|
+
declare function CommandShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
18
|
+
export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../../lib/utils.js";
|
|
3
|
+
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog.js";
|
|
4
|
+
import { InputGroup, InputGroupAddon } from "./input-group.js";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
import { CheckIcon, SearchIcon } from "lucide-react";
|
|
7
|
+
import { Command as Command$1 } from "cmdk";
|
|
8
|
+
// src/components/ui/command.tsx
|
|
9
|
+
function Command({ className, ...props }) {
|
|
10
|
+
return /* @__PURE__ */ jsx(Command$1, {
|
|
11
|
+
"data-slot": "command",
|
|
12
|
+
className: cn("flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground", className),
|
|
13
|
+
...props
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, className, showCloseButton = false, ...props }) {
|
|
17
|
+
return /* @__PURE__ */ jsxs(Dialog, {
|
|
18
|
+
...props,
|
|
19
|
+
children: [/* @__PURE__ */ jsxs(DialogHeader, {
|
|
20
|
+
className: "sr-only",
|
|
21
|
+
children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), /* @__PURE__ */ jsx(DialogDescription, { children: description })]
|
|
22
|
+
}), /* @__PURE__ */ jsx(DialogContent, {
|
|
23
|
+
className: cn("top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0", className),
|
|
24
|
+
showCloseButton,
|
|
25
|
+
children
|
|
26
|
+
})]
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
function CommandInput({ className, ...props }) {
|
|
30
|
+
return /* @__PURE__ */ jsx("div", {
|
|
31
|
+
"data-slot": "command-input-wrapper",
|
|
32
|
+
className: "p-1 pb-0",
|
|
33
|
+
children: /* @__PURE__ */ jsxs(InputGroup, {
|
|
34
|
+
className: "h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!",
|
|
35
|
+
children: [/* @__PURE__ */ jsx(Command$1.Input, {
|
|
36
|
+
"data-slot": "command-input",
|
|
37
|
+
className: cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
|
|
38
|
+
...props
|
|
39
|
+
}), /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }) })]
|
|
40
|
+
})
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
function CommandList({ className, ...props }) {
|
|
44
|
+
return /* @__PURE__ */ jsx(Command$1.List, {
|
|
45
|
+
"data-slot": "command-list",
|
|
46
|
+
className: cn("no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none", className),
|
|
47
|
+
...props
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
function CommandEmpty({ className, ...props }) {
|
|
51
|
+
return /* @__PURE__ */ jsx(Command$1.Empty, {
|
|
52
|
+
"data-slot": "command-empty",
|
|
53
|
+
className: cn("py-6 text-center text-sm", className),
|
|
54
|
+
...props
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
function CommandGroup({ className, ...props }) {
|
|
58
|
+
return /* @__PURE__ */ jsx(Command$1.Group, {
|
|
59
|
+
"data-slot": "command-group",
|
|
60
|
+
className: cn("overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground", className),
|
|
61
|
+
...props
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
function CommandSeparator({ className, ...props }) {
|
|
65
|
+
return /* @__PURE__ */ jsx(Command$1.Separator, {
|
|
66
|
+
"data-slot": "command-separator",
|
|
67
|
+
className: cn("-mx-1 h-px bg-border", className),
|
|
68
|
+
...props
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
function CommandItem({ className, children, ...props }) {
|
|
72
|
+
return /* @__PURE__ */ jsxs(Command$1.Item, {
|
|
73
|
+
"data-slot": "command-item",
|
|
74
|
+
className: cn("group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground", className),
|
|
75
|
+
...props,
|
|
76
|
+
children: [children, /* @__PURE__ */ jsx(CheckIcon, { className: "ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" })]
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
function CommandShortcut({ className, ...props }) {
|
|
80
|
+
return /* @__PURE__ */ jsx("span", {
|
|
81
|
+
"data-slot": "command-shortcut",
|
|
82
|
+
className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground", className),
|
|
83
|
+
...props
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { ContextMenu as ContextMenu$1 } from "radix-ui";
|
|
3
|
+
declare function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenu$1.Root>): React.JSX.Element;
|
|
4
|
+
declare function ContextMenuTrigger({ className, ...props }: React.ComponentProps<typeof ContextMenu$1.Trigger>): React.JSX.Element;
|
|
5
|
+
declare function ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenu$1.Group>): React.JSX.Element;
|
|
6
|
+
declare function ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenu$1.Portal>): React.JSX.Element;
|
|
7
|
+
declare function ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenu$1.Sub>): React.JSX.Element;
|
|
8
|
+
declare function ContextMenuRadioGroup({ ...props }: React.ComponentProps<typeof ContextMenu$1.RadioGroup>): React.JSX.Element;
|
|
9
|
+
declare function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof ContextMenu$1.Content> & {
|
|
10
|
+
side?: "top" | "right" | "bottom" | "left";
|
|
11
|
+
}): React.JSX.Element;
|
|
12
|
+
declare function ContextMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof ContextMenu$1.Item> & {
|
|
13
|
+
inset?: boolean;
|
|
14
|
+
variant?: "default" | "destructive";
|
|
15
|
+
}): React.JSX.Element;
|
|
16
|
+
declare function ContextMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof ContextMenu$1.SubTrigger> & {
|
|
17
|
+
inset?: boolean;
|
|
18
|
+
}): React.JSX.Element;
|
|
19
|
+
declare function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenu$1.SubContent>): React.JSX.Element;
|
|
20
|
+
declare function ContextMenuCheckboxItem({ className, children, checked, inset, ...props }: React.ComponentProps<typeof ContextMenu$1.CheckboxItem> & {
|
|
21
|
+
inset?: boolean;
|
|
22
|
+
}): React.JSX.Element;
|
|
23
|
+
declare function ContextMenuRadioItem({ className, children, inset, ...props }: React.ComponentProps<typeof ContextMenu$1.RadioItem> & {
|
|
24
|
+
inset?: boolean;
|
|
25
|
+
}): React.JSX.Element;
|
|
26
|
+
declare function ContextMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof ContextMenu$1.Label> & {
|
|
27
|
+
inset?: boolean;
|
|
28
|
+
}): React.JSX.Element;
|
|
29
|
+
declare function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenu$1.Separator>): React.JSX.Element;
|
|
30
|
+
declare function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
31
|
+
export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };
|
|
@@ -0,0 +1,123 @@
|
|
|
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 { ContextMenu as ContextMenu$1 } from "radix-ui";
|
|
6
|
+
// src/components/ui/context-menu.tsx
|
|
7
|
+
function ContextMenu({ ...props }) {
|
|
8
|
+
return /* @__PURE__ */ jsx(ContextMenu$1.Root, {
|
|
9
|
+
"data-slot": "context-menu",
|
|
10
|
+
...props
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
function ContextMenuTrigger({ className, ...props }) {
|
|
14
|
+
return /* @__PURE__ */ jsx(ContextMenu$1.Trigger, {
|
|
15
|
+
"data-slot": "context-menu-trigger",
|
|
16
|
+
className: cn("select-none", className),
|
|
17
|
+
...props
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
function ContextMenuGroup({ ...props }) {
|
|
21
|
+
return /* @__PURE__ */ jsx(ContextMenu$1.Group, {
|
|
22
|
+
"data-slot": "context-menu-group",
|
|
23
|
+
...props
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
function ContextMenuPortal({ ...props }) {
|
|
27
|
+
return /* @__PURE__ */ jsx(ContextMenu$1.Portal, {
|
|
28
|
+
"data-slot": "context-menu-portal",
|
|
29
|
+
...props
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
function ContextMenuSub({ ...props }) {
|
|
33
|
+
return /* @__PURE__ */ jsx(ContextMenu$1.Sub, {
|
|
34
|
+
"data-slot": "context-menu-sub",
|
|
35
|
+
...props
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
function ContextMenuRadioGroup({ ...props }) {
|
|
39
|
+
return /* @__PURE__ */ jsx(ContextMenu$1.RadioGroup, {
|
|
40
|
+
"data-slot": "context-menu-radio-group",
|
|
41
|
+
...props
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
function ContextMenuContent({ className, ...props }) {
|
|
45
|
+
return /* @__PURE__ */ jsx(ContextMenu$1.Portal, { children: /* @__PURE__ */ jsx(ContextMenu$1.Content, {
|
|
46
|
+
"data-slot": "context-menu-content",
|
|
47
|
+
className: cn("z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-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-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),
|
|
48
|
+
...props
|
|
49
|
+
}) });
|
|
50
|
+
}
|
|
51
|
+
function ContextMenuItem({ className, inset, variant = "default", ...props }) {
|
|
52
|
+
return /* @__PURE__ */ jsx(ContextMenu$1.Item, {
|
|
53
|
+
"data-slot": "context-menu-item",
|
|
54
|
+
"data-inset": inset,
|
|
55
|
+
"data-variant": variant,
|
|
56
|
+
className: cn("group/context-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 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 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive", className),
|
|
57
|
+
...props
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
function ContextMenuSubTrigger({ className, inset, children, ...props }) {
|
|
61
|
+
return /* @__PURE__ */ jsxs(ContextMenu$1.SubTrigger, {
|
|
62
|
+
"data-slot": "context-menu-sub-trigger",
|
|
63
|
+
"data-inset": inset,
|
|
64
|
+
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 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),
|
|
65
|
+
...props,
|
|
66
|
+
children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
function ContextMenuSubContent({ className, ...props }) {
|
|
70
|
+
return /* @__PURE__ */ jsx(ContextMenu$1.SubContent, {
|
|
71
|
+
"data-slot": "context-menu-sub-content",
|
|
72
|
+
className: cn("z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg 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),
|
|
73
|
+
...props
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
function ContextMenuCheckboxItem({ className, children, checked, inset, ...props }) {
|
|
77
|
+
return /* @__PURE__ */ jsxs(ContextMenu$1.CheckboxItem, {
|
|
78
|
+
"data-slot": "context-menu-checkbox-item",
|
|
79
|
+
"data-inset": inset,
|
|
80
|
+
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 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),
|
|
81
|
+
checked,
|
|
82
|
+
...props,
|
|
83
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
84
|
+
className: "pointer-events-none absolute right-2",
|
|
85
|
+
children: /* @__PURE__ */ jsx(ContextMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
|
|
86
|
+
}), children]
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
function ContextMenuRadioItem({ className, children, inset, ...props }) {
|
|
90
|
+
return /* @__PURE__ */ jsxs(ContextMenu$1.RadioItem, {
|
|
91
|
+
"data-slot": "context-menu-radio-item",
|
|
92
|
+
"data-inset": inset,
|
|
93
|
+
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 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),
|
|
94
|
+
...props,
|
|
95
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
96
|
+
className: "pointer-events-none absolute right-2",
|
|
97
|
+
children: /* @__PURE__ */ jsx(ContextMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
|
|
98
|
+
}), children]
|
|
99
|
+
});
|
|
100
|
+
}
|
|
101
|
+
function ContextMenuLabel({ className, inset, ...props }) {
|
|
102
|
+
return /* @__PURE__ */ jsx(ContextMenu$1.Label, {
|
|
103
|
+
"data-slot": "context-menu-label",
|
|
104
|
+
"data-inset": inset,
|
|
105
|
+
className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className),
|
|
106
|
+
...props
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
function ContextMenuSeparator({ className, ...props }) {
|
|
110
|
+
return /* @__PURE__ */ jsx(ContextMenu$1.Separator, {
|
|
111
|
+
"data-slot": "context-menu-separator",
|
|
112
|
+
className: cn("-mx-1 my-1 h-px bg-border", className),
|
|
113
|
+
...props
|
|
114
|
+
});
|
|
115
|
+
}
|
|
116
|
+
function ContextMenuShortcut({ className, ...props }) {
|
|
117
|
+
return /* @__PURE__ */ jsx("span", {
|
|
118
|
+
"data-slot": "context-menu-shortcut",
|
|
119
|
+
className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground", className),
|
|
120
|
+
...props
|
|
121
|
+
});
|
|
122
|
+
}
|
|
123
|
+
export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };
|
|
@@ -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 };
|