harebear-ui 0.8.1 → 0.10.0

package/dist/components/admin/comment-thread.js

@@ -0,0 +1,68 @@
+"use client";
+import { MemberAvatar } from "./user-chip.js";
+import { Markdown } from "../ai/markdown.js";
+import { Button } from "../ui/button.js";
+import { Textarea } from "../ui/textarea.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/admin/comment-thread.tsx
+/** Comments on a record, oldest first, with a box to add one. Bodies are Markdown. */
+function CommentThread({ comments, onSubmit, placeholder = "Add a comment", submitLabel = "Comment", className, ...props }) {
+	const [text, setText] = React.useState("");
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "comment-thread",
+		className: cn("flex flex-col gap-4", className),
+		...props,
+		children: [comments.length > 0 && /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-col gap-4",
+			children: comments.map((c) => /* @__PURE__ */ jsxs("li", {
+				className: "flex min-w-0 items-start gap-3",
+				children: [/* @__PURE__ */ jsx(MemberAvatar, {
+					size: "sm",
+					name: c.author.name,
+					avatarUrl: c.author.avatarUrl,
+					color: c.author.color,
+					"aria-hidden": true
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 flex-col gap-0.5",
+					children: [/* @__PURE__ */ jsxs("p", {
+						className: "text-sm",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "font-medium",
+							children: c.author.name
+						}), c.meta && /* @__PURE__ */ jsxs("span", {
+							className: "text-xs text-muted-foreground",
+							children: [" · ", c.meta]
+						})]
+					}), /* @__PURE__ */ jsx(Markdown, {
+						className: "gap-2 text-sm leading-6",
+						children: c.body
+					})]
+				})]
+			}, c.id))
+		}), /* @__PURE__ */ jsxs("form", {
+			className: "flex flex-col gap-2",
+			onSubmit: (e) => {
+				e.preventDefault();
+				const value = text.trim();
+				if (!value) return;
+				onSubmit(value);
+				setText("");
+			},
+			children: [/* @__PURE__ */ jsx(Textarea, {
+				value: text,
+				onChange: (e) => setText(e.target.value),
+				placeholder,
+				"aria-label": placeholder
+			}), /* @__PURE__ */ jsx(Button, {
+				type: "submit",
+				variant: "outline",
+				className: "self-end pointer-coarse:h-11",
+				disabled: !text.trim(),
+				children: submitLabel
+			})]
+		})]
+	});
+}
+export { CommentThread };

package/dist/components/admin/copy-field.d.ts

@@ -11,7 +11,9 @@ export interface CopyFieldProps extends Omit<React.ComponentProps<typeof InputGr
   "aria-label"?: string;
   /** Monospace text. Default true. */
   mono?: boolean;
+  /** Shown next to the button, and its accessible name, for a moment after copying. Default "Copied". */
+  copiedLabel?: string;
 }
 /** Read-only value with a copy button: IDs, paths, tokens' public parts, URLs. */
-declare function CopyField({ value, display, label, mono, "aria-label": name, className, ...props }: CopyFieldProps): React.JSX.Element;
+declare function CopyField({ value, display, label, mono, copiedLabel, "aria-label": name, className, ...props }: CopyFieldProps): React.JSX.Element;
 export { CopyField };

package/dist/components/admin/copy-field.js

@@ -6,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, CopyIcon } from "lucide-react";
 // src/components/admin/copy-field.tsx
 /** Read-only value with a copy button: IDs, paths, tokens' public parts, URLs. */
-function CopyField({ value, display, label, mono = true, "aria-label": name = "Value", className, ...props }) {
+function CopyField({ value, display, label, mono = true, copiedLabel = "Copied", "aria-label": name = "Value", className, ...props }) {
 	const { copied, copy } = useCopyToClipboard();
 	return /* @__PURE__ */ jsxs(InputGroup, {
 		"data-slot": "copy-field",
@@ -22,14 +22,19 @@ function CopyField({ value, display, label, mono = true, "aria-label": name = "V
 				className: cn(mono && "font-mono"),
 				onFocus: (e) => e.currentTarget.select()
 			}),
-			/* @__PURE__ */ jsx(InputGroupAddon, {
+			/* @__PURE__ */ jsxs(InputGroupAddon, {
 				align: "inline-end",
-				children: /* @__PURE__ */ jsx(InputGroupButton, {
+				children: [/* @__PURE__ */ jsx(InputGroupText, {
+					"data-slot": "copy-field-status",
+					"aria-hidden": "true",
+					className: "text-xs empty:hidden",
+					children: copied ? copiedLabel : null
+				}), /* @__PURE__ */ jsx(InputGroupButton, {
 					size: "icon-xs",
-					"aria-label": `Copy ${name.toLowerCase()}`,
+					"aria-label": copied ? copiedLabel : `Copy ${name.toLowerCase()}`,
 					onClick: () => copy(value),
 					children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
-				})
+				})]
 			})
 		]
 	});

package/dist/components/admin/date-time-picker.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+/** A floating local date and optional time, e.g. `{ date: "2026-11-12", time: "09:30" }`. No time zone. */
+export interface DateTimeValue {
+  /** `YYYY-MM-DD` */
+  date: string;
+  /** `HH:MM`, 24-hour. */
+  time?: string;
+}
+export interface DateTimePickerProps extends Omit<React.ComponentProps<"button">, "value" | "onChange"> {
+  value: DateTimeValue | null;
+  /** Called with the new value, or null when cleared. */
+  onValueChange: (value: DateTimeValue | null) => void;
+  /** Show a time field under the calendar. */
+  withTime?: boolean;
+  /** Trigger text when there is no value. Default "Pick a date". */
+  placeholder?: string;
+}
+/** Date field: a button that opens a Calendar in a Popover, with an optional time field and Clear. */
+declare function DateTimePicker({ value, onValueChange, withTime, placeholder, className, ...props }: DateTimePickerProps): React.JSX.Element;
+export { DateTimePicker };

package/dist/components/admin/date-time-picker.js

@@ -0,0 +1,97 @@
+"use client";
+import { Button } from "../ui/button.js";
+import { Calendar } from "../ui/calendar.js";
+import { Input } from "../ui/input.js";
+import { Label } from "../ui/label.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
+import { parseLocalDate } from "../../lib/internal/date.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CalendarIcon } from "lucide-react";
+// src/components/admin/date-time-picker.tsx
+const pad = (n) => String(n).padStart(2, "0");
+const toISODate = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+function formatValue({ date, time }) {
+	const at = parseLocalDate(date, time);
+	const day = at.toLocaleDateString(void 0, {
+		weekday: "short",
+		day: "numeric",
+		month: "short",
+		year: "numeric"
+	});
+	return time ? `${day}, ${at.toLocaleTimeString(void 0, {
+		hour: "numeric",
+		minute: "2-digit"
+	})}` : day;
+}
+/** Date field: a button that opens a Calendar in a Popover, with an optional time field and Clear. */
+function DateTimePicker({ value, onValueChange, withTime, placeholder = "Pick a date", className, ...props }) {
+	const [open, setOpen] = React.useState(false);
+	const timeId = React.useId();
+	const selected = value ? parseLocalDate(value.date) : void 0;
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"data-slot": "date-time-picker",
+				"data-empty": value ? void 0 : "",
+				className: cn("flex h-10 w-full min-w-0 items-center gap-2.5 rounded-md border border-transparent bg-muted px-3.5 text-left text-base transition-[border-color,box-shadow,background-color] outline-none focus-visible:border-primary focus-visible:bg-card focus-visible:ring-4 focus-visible:ring-primary/15 disabled:pointer-events-none disabled:opacity-50 data-empty:text-muted-foreground md:text-sm [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-muted-foreground", className),
+				...props,
+				children: [/* @__PURE__ */ jsx(CalendarIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: value ? formatValue(value) : placeholder
+				})]
+			})
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			align: "start",
+			className: "w-auto gap-3 p-3",
+			children: [
+				/* @__PURE__ */ jsx(Calendar, {
+					mode: "single",
+					required: true,
+					selected,
+					defaultMonth: selected,
+					onSelect: (d) => {
+						onValueChange({
+							date: toISODate(d),
+							...value?.time ? { time: value.time } : {}
+						});
+						if (!withTime) setOpen(false);
+					},
+					className: "p-0 [--cell-size:--spacing(11)] md:[--cell-size:--spacing(9)]"
+				}),
+				withTime && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ jsx(Label, {
+						htmlFor: timeId,
+						className: "shrink-0",
+						children: "Time"
+					}), /* @__PURE__ */ jsx(Input, {
+						id: timeId,
+						type: "time",
+						disabled: !value,
+						value: value?.time ?? "",
+						onChange: (e) => value && onValueChange({
+							date: value.date,
+							...e.target.value ? { time: e.target.value } : {}
+						})
+					})]
+				}),
+				value && /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					className: "max-md:h-11",
+					onClick: () => {
+						onValueChange(null);
+						setOpen(false);
+					},
+					children: "Clear"
+				})
+			]
+		})]
+	});
+}
+export { DateTimePicker };

package/dist/components/admin/detail-sheet.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+export interface DetailSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Heading and accessible name, e.g. "To-do". */
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** Pinned under the scrolling body, e.g. a Delete button. */
+  footer?: React.ReactNode;
+  className?: string;
+  children: React.ReactNode;
+}
+/**
+ * A record's details: a floating side sheet from 768px up, a full-screen drawer on phones.
+ * Both have a close button and a scrolling body.
+ */
+declare function DetailSheet({ open, onOpenChange, title, description, footer, className, children }: DetailSheetProps): React.JSX.Element;
+export { DetailSheet };

package/dist/components/admin/detail-sheet.js

@@ -0,0 +1,80 @@
+"use client";
+import { Button } from "../ui/button.js";
+import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerTitle } from "../ui/drawer.js";
+import { Sheet, SheetContent, SheetDescription, SheetTitle } from "../ui/sheet.js";
+import { useMediaQuery } from "../../hooks/use-media-query.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+// src/components/admin/detail-sheet.tsx
+/**
+* A record's details: a floating side sheet from 768px up, a full-screen drawer on phones.
+* Both have a close button and a scrolling body.
+*/
+function DetailSheet({ open, onOpenChange, title, description, footer, className, children }) {
+	const desktop = useMediaQuery("(min-width: 768px)");
+	const noDescription = description ? {} : { "aria-describedby": void 0 };
+	const body = (padBottom) => /* @__PURE__ */ jsx("div", {
+		className: cn("min-h-0 flex-1 overflow-y-auto px-6 pb-6", !footer && padBottom),
+		children
+	});
+	const foot = (padBottom) => footer && /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-wrap items-center gap-2 border-t px-6 py-4", padBottom),
+		children: footer
+	});
+	if (desktop) return /* @__PURE__ */ jsx(Sheet, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(SheetContent, {
+			"data-slot": "detail-sheet",
+			"data-layout": "sheet",
+			...noDescription,
+			className: cn("gap-0 data-[side=right]:inset-y-4 data-[side=right]:right-4 data-[side=right]:h-auto data-[side=right]:w-[min(420px,calc(100%-32px))] data-[side=right]:rounded-xl data-[side=right]:border data-[side=right]:sm:max-w-none", className),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1 p-6 pr-14",
+					children: [/* @__PURE__ */ jsx(SheetTitle, {
+						className: "text-lg font-semibold",
+						children: title
+					}), description && /* @__PURE__ */ jsx(SheetDescription, { children: description })]
+				}),
+				body(),
+				foot()
+			]
+		})
+	});
+	return /* @__PURE__ */ jsx(Drawer, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DrawerContent, {
+			"data-slot": "detail-sheet",
+			"data-layout": "drawer",
+			...noDescription,
+			className: cn("h-dvh data-[vaul-drawer-direction=bottom]:mt-0 data-[vaul-drawer-direction=bottom]:max-h-none data-[vaul-drawer-direction=bottom]:rounded-none data-[vaul-drawer-direction=bottom]:border-t-0", className),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-start gap-2 px-6 pt-[max(0.5rem,env(safe-area-inset-top))] pb-4",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 flex-1 flex-col gap-1 pt-2.5",
+						children: [/* @__PURE__ */ jsx(DrawerTitle, {
+							className: "text-lg font-semibold",
+							children: title
+						}), description && /* @__PURE__ */ jsx(DrawerDescription, { children: description })]
+					}), /* @__PURE__ */ jsx(DrawerClose, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "icon-lg",
+							"aria-label": "Close",
+							className: "-mr-2.5",
+							children: /* @__PURE__ */ jsx(XIcon, {})
+						})
+					})]
+				}),
+				body("pb-[max(1.5rem,env(safe-area-inset-bottom))]"),
+				foot("pb-[max(1rem,env(safe-area-inset-bottom))]")
+			]
+		})
+	});
+}
+export { DetailSheet };

package/dist/components/admin/markdown-editor.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export interface MarkdownEditorProps extends Omit<React.ComponentProps<"textarea">, "value" | "defaultValue" | "onChange"> {
+  value: string;
+  onValueChange: (value: string) => void;
+  /** Custom Preview renderer; the result is wrapped in Prose. Default: the library's `Markdown`. */
+  renderPreview?: (markdown: string) => React.ReactNode;
+  /** Classes for the wrapping Tabs. `className` goes to the textarea. */
+  wrapperClassName?: string;
+}
+/** Markdown field with Write and Preview tabs. Other props go to the Textarea (id, placeholder, aria-*). */
+declare function MarkdownEditor({ value, onValueChange, renderPreview, className, wrapperClassName, ...props }: MarkdownEditorProps): React.JSX.Element;
+export { MarkdownEditor };

package/dist/components/admin/markdown-editor.js

@@ -0,0 +1,46 @@
+"use client";
+import { Prose } from "../ai/code-block.js";
+import { Markdown } from "../ai/markdown.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs.js";
+import { Textarea } from "../ui/textarea.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/admin/markdown-editor.tsx
+/** Markdown field with Write and Preview tabs. Other props go to the Textarea (id, placeholder, aria-*). */
+function MarkdownEditor({ value, onValueChange, renderPreview, className, wrapperClassName, ...props }) {
+	return /* @__PURE__ */ jsxs(Tabs, {
+		"data-slot": "markdown-editor",
+		defaultValue: "write",
+		className: cn("gap-3", wrapperClassName),
+		children: [
+			/* @__PURE__ */ jsxs(TabsList, {
+				className: "pointer-coarse:group-data-horizontal/tabs:h-13",
+				children: [/* @__PURE__ */ jsx(TabsTrigger, {
+					value: "write",
+					children: "Write"
+				}), /* @__PURE__ */ jsx(TabsTrigger, {
+					value: "preview",
+					children: "Preview"
+				})]
+			}),
+			/* @__PURE__ */ jsx(TabsContent, {
+				value: "write",
+				children: /* @__PURE__ */ jsx(Textarea, {
+					value,
+					onChange: (e) => onValueChange(e.target.value),
+					className: cn("min-h-48", className),
+					...props
+				})
+			}),
+			/* @__PURE__ */ jsx(TabsContent, {
+				value: "preview",
+				className: "min-h-48 rounded-md border px-3.5 py-3",
+				children: !value.trim() ? /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground",
+					children: "Nothing to preview."
+				}) : renderPreview ? /* @__PURE__ */ jsx(Prose, { children: renderPreview(value) }) : /* @__PURE__ */ jsx(Markdown, { children: value })
+			})
+		]
+	});
+}
+export { MarkdownEditor };

package/dist/components/admin/page-header.d.ts

@@ -8,7 +8,9 @@ export interface PageHeaderProps extends Omit<React.ComponentProps<"section">, "
   actions?: React.ReactNode;
   /** Text above the title, e.g. a date. */
   eyebrow?: React.ReactNode;
+  /** Leading mark before the title, e.g. a CategoryDot, an icon tile or a MemberAvatar. */
+  icon?: React.ReactNode;
 }
 /** Page title row with description and actions. Wraps on narrow screens. */
-declare function PageHeader({ title, description, count, actions, eyebrow, className, ...props }: PageHeaderProps): React.JSX.Element;
+declare function PageHeader({ title, description, count, actions, eyebrow, icon, className, ...props }: PageHeaderProps): React.JSX.Element;
 export { PageHeader };

package/dist/components/admin/page-header.js

@@ -4,7 +4,7 @@ import { cn } from "../../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/admin/page-header.tsx
 /** Page title row with description and actions. Wraps on narrow screens. */
-function PageHeader({ title, description, count, actions, eyebrow, className, ...props }) {
+function PageHeader({ title, description, count, actions, eyebrow, icon, className, ...props }) {
 	return /* @__PURE__ */ jsxs("section", {
 		"data-slot": "page-header",
 		className: cn("flex flex-wrap items-end justify-between gap-4", className),
@@ -18,14 +18,22 @@ function PageHeader({ title, description, count, actions, eyebrow, className, ..
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-3",
-					children: [/* @__PURE__ */ jsx("h1", {
-						className: "text-[28px] leading-tight font-semibold tracking-[-0.02em]",
-						children: title
-					}), count !== void 0 && /* @__PURE__ */ jsx(Badge, {
-						variant: "secondary",
-						className: "tabular-nums",
-						children: count
-					})]
+					children: [
+						icon && /* @__PURE__ */ jsx("span", {
+							"data-slot": "page-header-icon",
+							className: "flex shrink-0 items-center [&_svg:not([class*='size-'])]:size-6",
+							children: icon
+						}),
+						/* @__PURE__ */ jsx("h1", {
+							className: "text-[28px] leading-tight font-semibold tracking-[-0.02em]",
+							children: title
+						}),
+						count !== void 0 && /* @__PURE__ */ jsx(Badge, {
+							variant: "secondary",
+							className: "tabular-nums",
+							children: count
+						})
+					]
 				}),
 				description && /* @__PURE__ */ jsx("p", {
 					className: "text-muted-foreground",

package/dist/components/admin/page.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+export interface PageProps extends React.ComponentProps<"div"> {
+  /** Column width. Default "md" (42rem), like FocusLayout. */
+  width?: "sm" | "md" | "lg";
+}
+/** The page column inside AppNav or SidebarLayout: centred, 16px gutters on phones, children spaced like sections. */
+declare function Page({ width, className, ...props }: PageProps): React.JSX.Element;
+export interface PageSectionProps extends Omit<React.ComponentProps<"section">, "title"> {
+  /** The section's h2, which also names the region. */
+  title: React.ReactNode;
+  /** At the right of the heading, e.g. a small ghost Button "See all". */
+  action?: React.ReactNode;
+}
+/** A titled part of a page: a region named by its h2 (under the PageHeader h1), an optional action, then children. */
+declare function PageSection({ title, action, className, children, ...props }: PageSectionProps): React.JSX.Element;
+export { Page, PageSection };

package/dist/components/admin/page.js

@@ -0,0 +1,42 @@
+"use client";
+import { Heading } from "../layout/text.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/admin/page.tsx
+const widthClass = {
+	sm: "max-w-xl",
+	md: "max-w-2xl",
+	lg: "max-w-4xl"
+};
+/** The page column inside AppNav or SidebarLayout: centred, 16px gutters on phones, children spaced like sections. */
+function Page({ width = "md", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "page",
+		className: cn("mx-auto flex w-full flex-col gap-7 px-4 py-6 md:px-8 md:py-10", widthClass[width], className),
+		...props
+	});
+}
+/** A titled part of a page: a region named by its h2 (under the PageHeader h1), an optional action, then children. */
+function PageSection({ title, action, className, children, ...props }) {
+	const id = React.useId();
+	return /* @__PURE__ */ jsxs("section", {
+		"data-slot": "page-section",
+		"aria-labelledby": id,
+		className: cn("flex min-w-0 flex-col gap-3", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 items-center gap-2",
+			children: [/* @__PURE__ */ jsx(Heading, {
+				level: 2,
+				id,
+				className: "min-w-0 flex-1",
+				children: title
+			}), action && /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center pointer-coarse:[&>*]:min-h-11",
+				children: action
+			})]
+		}), children]
+	});
+}
+export { Page, PageSection };

package/dist/components/admin/prompt-dialog.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+export interface PromptDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** Label of the text field. */
+  label: React.ReactNode;
+  /** Starting text, e.g. the current name when renaming. */
+  defaultValue?: string;
+  submitLabel?: React.ReactNode;
+  cancelLabel?: React.ReactNode;
+  maxLength?: number;
+  /** Gets the trimmed text. The dialog closes when it returns or resolves; a thrown error's message shows under the field. */
+  onSubmit: (value: string) => void | Promise<void>;
+}
+/** Controlled dialog that asks for one line of text: New list, Rename, Add section. Sibling of ConfirmDialog. */
+declare function PromptDialog({ open, onOpenChange, ...props }: PromptDialogProps): React.JSX.Element;
+export { PromptDialog };

package/dist/components/admin/prompt-dialog.js

@@ -0,0 +1,83 @@
+"use client";
+import { Button } from "../ui/button.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog.js";
+import { Field, FieldError, FieldLabel } from "../ui/field.js";
+import { Input } from "../ui/input.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/admin/prompt-dialog.tsx
+/** Controlled dialog that asks for one line of text: New list, Rename, Add section. Sibling of ConfirmDialog. */
+function PromptDialog({ open, onOpenChange, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsx(DialogContent, {
+			"data-slot": "prompt-dialog",
+			children: /* @__PURE__ */ jsx(PromptForm, {
+				onDone: () => onOpenChange(false),
+				...props
+			})
+		})
+	});
+}
+function PromptForm({ title, description, label, defaultValue = "", submitLabel = "Save", cancelLabel = "Cancel", maxLength, onSubmit, onDone }) {
+	const id = React.useId();
+	const [value, setValue] = React.useState(defaultValue);
+	const [error, setError] = React.useState(null);
+	const [busy, setBusy] = React.useState(false);
+	return /* @__PURE__ */ jsxs("form", {
+		className: "grid gap-4",
+		onSubmit: async (e) => {
+			e.preventDefault();
+			setBusy(true);
+			setError(null);
+			try {
+				await onSubmit(value.trim());
+				onDone();
+			} catch (err) {
+				setError(err instanceof Error ? err.message : String(err));
+				setBusy(false);
+			}
+		},
+		children: [
+			/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), description && /* @__PURE__ */ jsx(DialogDescription, { children: description })] }),
+			/* @__PURE__ */ jsxs(Field, {
+				"data-invalid": error ? true : void 0,
+				children: [
+					/* @__PURE__ */ jsx(FieldLabel, {
+						htmlFor: id,
+						children: label
+					}),
+					/* @__PURE__ */ jsx(Input, {
+						id,
+						value,
+						onChange: (e) => setValue(e.target.value),
+						maxLength,
+						autoComplete: "off",
+						required: true,
+						"aria-invalid": error ? true : void 0,
+						"aria-describedby": error ? `${id}-error` : void 0
+					}),
+					error && /* @__PURE__ */ jsx(FieldError, {
+						id: `${id}-error`,
+						children: error
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(DialogClose, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					children: cancelLabel
+				})
+			}), /* @__PURE__ */ jsx(Button, {
+				type: "submit",
+				loading: busy,
+				disabled: !value.trim(),
+				children: submitLabel
+			})] })
+		]
+	});
+}
+export { PromptDialog };

package/dist/components/admin/settings.d.ts

@@ -15,6 +15,8 @@ export interface SettingsRowProps extends Omit<React.ComponentProps<"div">, "con
   htmlFor?: string;
   /** The control at the right: Switch, Select, ToggleGroup, Button. */
   control?: React.ReactNode;
+  /** Always shown under the label, full width, with no toggle (a list of connections, a hint, a short form). */
+  body?: React.ReactNode;
   /**
    * Inline content that expands under the row (change password, add a connection). Without a `control`, the row
    * gets a toggle button (`expandLabel` / "Cancel").
@@ -26,6 +28,6 @@ export interface SettingsRowProps extends Omit<React.ComponentProps<"div">, "con
   /** Label of the default toggle button. Default "Change". */
   expandLabel?: React.ReactNode;
 }
-/** One setting: label and description at the left, a control at the right, optional expandable content. */
-declare function SettingsRow({ label, description, htmlFor, control, content, open: openProp, defaultOpen, onOpenChange, expandLabel, className, ...props }: SettingsRowProps): React.JSX.Element;
+/** One setting: label and description at the left, a control at the right, optional body and expandable content. */
+declare function SettingsRow({ label, description, htmlFor, control, body, content, open: openProp, defaultOpen, onOpenChange, expandLabel, className, ...props }: SettingsRowProps): React.JSX.Element;
 export { SettingsRow, SettingsSection };