harebear-ui 0.8.0 → 0.9.0

package/AGENTS.md

@@ -26,7 +26,7 @@ src/
   components/ui/        shadcn primitives (radix-nova style), restyled. Keep upstream structure.
   components/theme/     ThemeProvider, ThemeToggle, ThemeScript.
   components/admin/     Layout and dashboard composites (AppShell, AppNav, FocusLayout, SettingsSection, StatCard...).
-  components/data/      DataTable, TrendChart, Sparkline, BarList, StatusBars, TaskRow, SectionedList.
+  components/data/      DataTable, TrendChart, Sparkline, BarList, StatusBars, TaskRow, SectionedList, AgendaRow, DayStrip.
   components/ai/        Chat composites (ChatThread, ChatMessage, PromptInput...) and the assistant layer (AssistantProvider, AssistantDock, AskBox, DictationButton, ActionReceipt).
   components/auth/      AuthLayout, LoginForm, SignupForm (parameterized shadcn login/signup blocks).
   components/layout/    Prop-driven layout and text (Stack, Text, Metric, ShowMore, Collapse).
@@ -50,7 +50,7 @@ test/                   Vitest: API snapshot, docs coverage, token integrity, be
 4. Floors: checks 24px, phone touch targets 44px, no text under 12px, icon-only buttons have `aria-label`.
 5. `pnpm gen`, then add the component to `docs/COMPONENTS.md` (the docs test fails otherwise) and to the index in `llms.txt`. Use a heading like ``### `Name` `` or a table row with the name in backticks, so `npx harebear-ui docs Name` finds it.
 6. Use it in a playground screen if it is visual, and look at it in light and dark mode and at 375px width.
-7. Add a behavior test in `test/` if it has logic (`components.test.tsx`, `building-blocks.test.tsx`, `household.test.tsx` for the household and assistant layer). `pnpm test -u` to accept the new export in the snapshot.
+7. Add a behavior test in `test/` if it has logic (`components.test.tsx`, `building-blocks.test.tsx`, `household.test.tsx` for the household and assistant layer, `people.test.tsx` (avatars, category colours), `forms.test.tsx` (form fields, DetailSheet, Prose tips)). `pnpm test -u` to accept the new export in the snapshot.
 8. `pnpm check`.
 
 ## Looking at your work

package/dist/components/admin/app-nav.d.ts

@@ -6,6 +6,8 @@ export interface AppNavPlace extends Omit<AppNavItem, "badge"> {
   count?: number;
   /** Show in the phone tab bar. Default true; the first 5 that are not false are shown. */
   tab?: boolean;
+  /** Show in the desktop sidebar. Default true; false makes a tab-bar-only place, e.g. Lists when the sidebar has a Lists group. */
+  sidebar?: boolean;
 }
 export interface AppNavGroup {
   /** Group heading, e.g. "Lists". */
@@ -22,6 +24,8 @@ export interface AppNavAction {
   label: string;
   icon: React.ReactNode;
   onSelect: () => void;
+  /** Show the button in the desktop sidebar. Default true; false keeps only the round phone button. */
+  sidebar?: boolean;
 }
 export interface AppNavProps {
   /** Product mark at the top of the sidebar, usually <AppBrand />. */

package/dist/components/admin/app-nav.js

@@ -4,6 +4,7 @@ import { Badge } from "../ui/badge.js";
 import { Button } from "../ui/button.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar.js";
+import { useToastClearance } from "../../lib/toast-clearance.js";
 import { cn } from "../../lib/utils.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -18,6 +19,8 @@ const TAB_LIMIT = 5;
 */
 function AppNav({ brand, places, group, footer, action, label = "Main", linkComponent = "a", collapsible, storageKey, defaultOpen, width = "15.75rem", className, children }) {
 	const tabs = places.filter((p) => p.tab !== false).slice(0, TAB_LIMIT);
+	useToastClearance("--hb-toast-nav", "calc(4.5rem + env(safe-area-inset-bottom))", tabs.length > 0);
+	useToastClearance("--hb-toast-fab", "4.5rem", Boolean(action));
 	return /* @__PURE__ */ jsxs(SidebarLayout, {
 		brand,
 		collapsible,
@@ -25,7 +28,7 @@ function AppNav({ brand, places, group, footer, action, label = "Main", linkComp
 		defaultOpen,
 		width,
 		sidebarFooter: footer,
-		sidebarActions: action && /* @__PURE__ */ jsxs(Button, {
+		sidebarActions: action && action.sidebar !== false && /* @__PURE__ */ jsxs(Button, {
 			type: "button",
 			"aria-label": action.label,
 			onClick: action.onSelect,
@@ -41,7 +44,7 @@ function AppNav({ brand, places, group, footer, action, label = "Main", linkComp
 			className: "flex flex-col gap-5",
 			children: [/* @__PURE__ */ jsx(SidebarMenu, {
 				className: "gap-1 group-data-[collapsible=icon]:items-center",
-				children: places.map((place) => /* @__PURE__ */ jsx(PlaceItem, {
+				children: places.filter((p) => p.sidebar !== false).map((place) => /* @__PURE__ */ jsx(PlaceItem, {
 					place,
 					Link: linkComponent
 				}, place.label))

package/dist/components/admin/avatar-upload.d.ts

@@ -0,0 +1,32 @@
+import { CategoryColor } from "./category.js";
+import * as React from "react";
+/**
+ * Crops an image to its centred square and scales it to `size` (default 256) pixels, as a JPEG. With `maxBytes`,
+ * steps the quality down until it fits, or rejects with "That photo is too big.".
+ */
+export declare function cropImageToSquare(file: Blob, { size, maxBytes }?: {
+  size?: number;
+  maxBytes?: number;
+}): Promise<Blob>;
+export interface AvatarUploadProps extends Omit<React.ComponentProps<"div">, "onChange" | "onError" | "color"> {
+  /** Whose photo; gives the initials shown without one. */
+  name: string;
+  /** Category colour behind the initials. */
+  color?: CategoryColor;
+  /** The current photo. */
+  avatarUrl?: string;
+  /** Called with a 256x256 JPEG after a photo is chosen, or `null` after Remove photo. */
+  onChange: (photo: Blob | null) => void;
+  /** Largest photo to hand back, in bytes; JPEG quality steps down to fit. */
+  maxBytes?: number;
+  /** Called when the file is not an image or cannot be made small enough. */
+  onError?: (error: Error) => void;
+  /** A line under the buttons. */
+  description?: React.ReactNode;
+}
+/**
+ * Profile photo picker: a large avatar, "Upload a photo" / "Change photo" and "Remove photo". The chosen image is
+ * cropped to a centred square in the browser and previewed right away.
+ */
+declare function AvatarUpload({ name, color, avatarUrl, onChange, maxBytes, onError, description, className, ...props }: AvatarUploadProps): React.JSX.Element;
+export { AvatarUpload };

package/dist/components/admin/avatar-upload.js

@@ -0,0 +1,121 @@
+"use client";
+import { MemberAvatar } from "./user-chip.js";
+import { Button } from "../ui/button.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/admin/avatar-upload.tsx
+/**
+* Crops an image to its centred square and scales it to `size` (default 256) pixels, as a JPEG. With `maxBytes`,
+* steps the quality down until it fits, or rejects with "That photo is too big.".
+*/
+async function cropImageToSquare(file, { size = 256, maxBytes } = {}) {
+	const image = await createImageBitmap(file).catch(() => {
+		throw new Error("Could not read that image.");
+	});
+	const side = Math.min(image.width, image.height);
+	const canvas = document.createElement("canvas");
+	canvas.width = size;
+	canvas.height = size;
+	const ctx = canvas.getContext("2d");
+	if (!ctx) throw new Error("Could not read that image.");
+	ctx.fillStyle = "#fff";
+	ctx.fillRect(0, 0, size, size);
+	ctx.imageSmoothingQuality = "high";
+	ctx.drawImage(image, (image.width - side) / 2, (image.height - side) / 2, side, side, 0, 0, size, size);
+	image.close();
+	for (const quality of [
+		.9,
+		.8,
+		.7,
+		.6,
+		.5
+	]) {
+		const blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/jpeg", quality));
+		if (!blob) throw new Error("Could not read that image.");
+		if (!maxBytes || blob.size <= maxBytes) return blob;
+	}
+	throw new Error("That photo is too big.");
+}
+/**
+* Profile photo picker: a large avatar, "Upload a photo" / "Change photo" and "Remove photo". The chosen image is
+* cropped to a centred square in the browser and previewed right away.
+*/
+function AvatarUpload({ name, color, avatarUrl, onChange, maxBytes, onError, description, className, ...props }) {
+	const input = React.useRef(null);
+	const [preview, setPreview] = React.useState();
+	const [busy, setBusy] = React.useState(false);
+	const shown = preview === void 0 ? avatarUrl : preview ?? void 0;
+	React.useEffect(() => {
+		if (!preview) return;
+		return () => URL.revokeObjectURL(preview);
+	}, [preview]);
+	React.useEffect(() => setPreview(void 0), [avatarUrl]);
+	async function choose(file) {
+		setBusy(true);
+		try {
+			const blob = await cropImageToSquare(file, { maxBytes });
+			setPreview(URL.createObjectURL(blob));
+			onChange(blob);
+		} catch (error) {
+			onError?.(error);
+		} finally {
+			setBusy(false);
+		}
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "avatar-upload",
+		className: cn("flex flex-wrap items-center gap-5", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(MemberAvatar, {
+			name,
+			avatarUrl: shown,
+			color,
+			size: "lg",
+			"aria-label": shown ? `${name}'s photo` : name,
+			className: "data-[size=lg]:size-18 *:data-[slot=avatar-fallback]:text-2xl"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-[1_1_14rem] flex-col gap-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap gap-2",
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						ref: input,
+						type: "file",
+						accept: "image/*",
+						hidden: true,
+						"data-slot": "avatar-upload-input",
+						onChange: (e) => {
+							const file = e.target.files?.[0];
+							e.target.value = "";
+							if (file) choose(file);
+						}
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						className: "max-md:h-11",
+						loading: busy,
+						onClick: () => input.current?.click(),
+						children: shown ? "Change photo" : "Upload a photo"
+					}),
+					shown && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						className: "max-md:h-11",
+						disabled: busy,
+						onClick: () => {
+							setPreview(null);
+							onChange(null);
+						},
+						children: "Remove photo"
+					})
+				]
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "text-[13px] text-muted-foreground",
+				children: description
+			})]
+		})]
+	});
+}
+export { AvatarUpload, cropImageToSquare };

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

@@ -0,0 +1,17 @@
+import * as React from "react";
+/** One of the six category colours (`category-1..6`) for members, lists and calendars. */
+export type CategoryColor = 1 | 2 | 3 | 4 | 5 | 6;
+/** `bg-category-N` per colour, as complete class names so Tailwind generates them. */
+export declare const categoryBg: Record<CategoryColor, string>;
+export interface CategoryDotProps extends Omit<React.ComponentProps<"span">, "color"> {
+  color: CategoryColor;
+  /** Accessible name when the colour means something on its own, e.g. whose event it is. Decorative without it. */
+  label?: string;
+  /** Adds a lock after the dot, for something only you can see. */
+  locked?: boolean;
+  /** Accessible name of the lock. Default "Only you". */
+  lockLabel?: string;
+}
+/** A small dot in a category colour, e.g. before a list name in a sidebar, with an optional lock for private ones. */
+declare function CategoryDot({ color, label, locked, lockLabel, className, ...props }: CategoryDotProps): React.JSX.Element;
+export { CategoryDot };

package/dist/components/admin/category.js

@@ -0,0 +1,35 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { LockIcon } from "lucide-react";
+// src/components/admin/category.tsx
+/** `bg-category-N` per colour, as complete class names so Tailwind generates them. */
+const categoryBg = {
+	1: "bg-category-1",
+	2: "bg-category-2",
+	3: "bg-category-3",
+	4: "bg-category-4",
+	5: "bg-category-5",
+	6: "bg-category-6"
+};
+/** A small dot in a category colour, e.g. before a list name in a sidebar, with an optional lock for private ones. */
+function CategoryDot({ color, label, locked, lockLabel = "Only you", className, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "category-dot",
+		className: cn("inline-flex shrink-0 items-center gap-1.5", className),
+		...props,
+		children: [label ? /* @__PURE__ */ jsx("span", {
+			role: "img",
+			"aria-label": label,
+			className: cn("size-2.5 shrink-0 rounded-full", categoryBg[color])
+		}) : /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: cn("size-2.5 shrink-0 rounded-full", categoryBg[color])
+		}), locked && /* @__PURE__ */ jsx(LockIcon, {
+			role: "img",
+			"aria-label": lockLabel,
+			className: "size-3.5 text-muted-foreground"
+		})]
+	});
+}
+export { CategoryDot, categoryBg };

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

@@ -0,0 +1,7 @@
+import * as React from "react";
+/** Plays one confetti burst on the mounted `<Celebration />`. Does nothing under prefers-reduced-motion. */
+declare function celebrate(): void;
+export type CelebrationProps = React.ComponentProps<"div">;
+/** Confetti layer for `celebrate()`. Mount once near the root, like Toaster. Renders nothing between bursts. */
+declare function Celebration({ className, ...props }: CelebrationProps): React.JSX.Element | null;
+export { Celebration, celebrate };

package/dist/components/admin/celebration.js

@@ -0,0 +1,61 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/admin/celebration.tsx
+const DURATION_MS = 1600;
+const COLORS = [
+	"bg-category-1",
+	"bg-category-2",
+	"bg-category-3",
+	"bg-category-4",
+	"bg-category-5",
+	"bg-category-6"
+];
+const PIECES = Array.from({ length: 36 }, (_, i) => {
+	const angle = i / 36 * Math.PI * 2 + i % 3 * .3;
+	const reach = 120 + i * 47 % 160;
+	return {
+		color: COLORS[i % COLORS.length],
+		style: {
+			"--hb-x": `${Math.round(Math.cos(angle) * reach)}px`,
+			"--hb-y": `${Math.round(Math.sin(angle) * reach * .8 - 120)}px`,
+			"--hb-r": `${i * 137 % 720 - 360}deg`,
+			animationDelay: `${i % 6 * 25}ms`
+		}
+	};
+});
+const listeners = /* @__PURE__ */ new Set();
+/** Plays one confetti burst on the mounted `<Celebration />`. Does nothing under prefers-reduced-motion. */
+function celebrate() {
+	if (typeof window === "undefined" || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+	for (const listener of listeners) listener();
+}
+/** Confetti layer for `celebrate()`. Mount once near the root, like Toaster. Renders nothing between bursts. */
+function Celebration({ className, ...props }) {
+	const [burst, setBurst] = React.useState(0);
+	React.useEffect(() => {
+		const listener = () => setBurst((b) => b + 1);
+		listeners.add(listener);
+		return () => {
+			listeners.delete(listener);
+		};
+	}, []);
+	React.useEffect(() => {
+		if (!burst) return;
+		const t = setTimeout(() => setBurst(0), DURATION_MS);
+		return () => clearTimeout(t);
+	}, [burst]);
+	if (!burst) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "celebration",
+		"aria-hidden": "true",
+		className: cn("pointer-events-none fixed inset-0 z-[100] overflow-hidden motion-reduce:hidden", className),
+		...props,
+		children: PIECES.map((p, i) => /* @__PURE__ */ jsx("span", {
+			className: cn("absolute top-1/2 left-1/2 h-3 w-2 rounded-[2px] opacity-0 animate-confetti", p.color),
+			style: p.style
+		}, i))
+	}, burst);
+}
+export { Celebration, celebrate };

package/dist/components/admin/color-swatch-picker.d.ts

@@ -0,0 +1,15 @@
+import { CategoryColor } from "./category.js";
+import * as React from "react";
+import { RadioGroup } from "radix-ui";
+export interface ColorSwatchPickerProps extends Omit<React.ComponentProps<typeof RadioGroup.Root>, "value" | "defaultValue" | "onValueChange" | "children"> {
+  value?: CategoryColor;
+  onValueChange?: (color: CategoryColor) => void;
+  /** Colours someone else already uses, as colour -> their name. Shown with their initial and disabled. */
+  taken?: Partial<Record<CategoryColor, string>>;
+}
+/**
+ * The six category colours as a radio group (arrow keys move between free colours). Name it with `aria-label` or
+ * `aria-labelledby`. 32px swatches with 44px touch targets; the chosen one shows a check and a ring.
+ */
+declare function ColorSwatchPicker({ value, onValueChange, taken, className, ...props }: ColorSwatchPickerProps): React.JSX.Element;
+export { ColorSwatchPicker };

package/dist/components/admin/color-swatch-picker.js

@@ -0,0 +1,68 @@
+"use client";
+import { categoryBg } from "./category.js";
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+import { RadioGroup } from "radix-ui";
+// src/components/admin/color-swatch-picker.tsx
+const colors = [
+	{
+		value: 1,
+		name: "Blue"
+	},
+	{
+		value: 2,
+		name: "Teal"
+	},
+	{
+		value: 3,
+		name: "Violet"
+	},
+	{
+		value: 4,
+		name: "Rose"
+	},
+	{
+		value: 5,
+		name: "Slate"
+	},
+	{
+		value: 6,
+		name: "Cyan"
+	}
+];
+/**
+* The six category colours as a radio group (arrow keys move between free colours). Name it with `aria-label` or
+* `aria-labelledby`. 32px swatches with 44px touch targets; the chosen one shows a check and a ring.
+*/
+function ColorSwatchPicker({ value, onValueChange, taken, className, ...props }) {
+	return /* @__PURE__ */ jsx(RadioGroup.Root, {
+		"data-slot": "color-swatch-picker",
+		value: value ? String(value) : "",
+		onValueChange: (v) => onValueChange?.(Number(v)),
+		className: cn("flex flex-wrap gap-3", className),
+		...props,
+		children: colors.map((c) => {
+			const by = taken?.[c.value];
+			return /* @__PURE__ */ jsx(RadioGroup.Item, {
+				value: String(c.value),
+				disabled: !!by,
+				"aria-label": by ? `${c.name}, taken by ${by}` : c.name,
+				title: by ? `${c.name}, taken by ${by}` : void 0,
+				className: cn("relative grid size-8 shrink-0 place-items-center rounded-full text-category-foreground outline-none after:absolute after:-inset-1.5 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary focus-visible:outline-solid disabled:cursor-not-allowed disabled:opacity-50 data-checked:ring-2 data-checked:ring-foreground data-checked:ring-offset-2 data-checked:ring-offset-card", categoryBg[c.value]),
+				children: by ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "text-xs leading-none font-semibold",
+					children: by.trim()[0]?.toUpperCase()
+				}) : /* @__PURE__ */ jsx(RadioGroup.Indicator, {
+					className: "grid place-items-center",
+					children: /* @__PURE__ */ jsx(CheckIcon, {
+						className: "size-4",
+						strokeWidth: 3
+					})
+				})
+			}, c.value);
+		})
+	});
+}
+export { ColorSwatchPicker };

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/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 };