harebear-ui 0.8.1 → 0.10.0

package/dist/components/auth/auth.js

@@ -3,10 +3,10 @@ import { Button } from "../ui/button.js";
 import { Card, CardContent } from "../ui/card.js";
 import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldSeparator } from "../ui/field.js";
 import { Input } from "../ui/input.js";
-import { Spinner } from "../ui/spinner.js";
+import { PasswordInput } from "../ui/password-input.js";
 import { cn } from "../../lib/utils.js";
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 // src/components/auth/auth.tsx
 /** Full-page wrapper for sign-in and sign-up screens. Put LoginForm or SignupForm inside. */
 function AuthLayout({ variant = "centered", brand, image, footer, className, children }) {
@@ -70,7 +70,7 @@ function AuthLayout({ variant = "centered", brand, image, footer, className, chi
 		})
 	});
 }
-function ProviderButtons({ providers, verb, onProviderClick, disabled }) {
+function ProviderButtons({ providers, verb, onProviderClick }) {
 	const compact = providers.length >= 3 && providers.every((p) => p.icon);
 	return /* @__PURE__ */ jsx(Field, {
 		className: cn(compact && "grid gap-3"),
@@ -78,7 +78,6 @@ function ProviderButtons({ providers, verb, onProviderClick, disabled }) {
 		children: providers.map((p) => /* @__PURE__ */ jsxs(Button, {
 			type: "button",
 			variant: "outline",
-			disabled,
 			onClick: () => onProviderClick?.(p.id),
 			"aria-label": compact ? `${verb} with ${p.label}` : void 0,
 			children: [p.icon, !compact && `${verb} with ${p.label}`]
@@ -119,64 +118,127 @@ function AppleIcon(props) {
 		...props
 	});
 }
-function Header({ title, description }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col items-center gap-1.5 text-center",
-		children: [/* @__PURE__ */ jsx("h1", {
-			className: "text-2xl font-semibold tracking-[-0.02em]",
-			children: title
-		}), description && /* @__PURE__ */ jsx("p", {
-			className: "text-sm text-balance text-muted-foreground",
-			children: description
-		})]
+/** The shell LoginForm, SignupForm and NewPasswordForm share: heading, your fields, error, submit button. */
+function AuthForm({ title, description, children, error, submitLabel, loading, onSubmit, footer, className, ...props }) {
+	return /* @__PURE__ */ jsx("form", {
+		"data-slot": "auth-form",
+		className: cn("flex flex-col gap-6", className),
+		onSubmit: (e) => {
+			if (!onSubmit) return;
+			e.preventDefault();
+			onSubmit(new FormData(e.currentTarget));
+		},
+		"aria-busy": loading || void 0,
+		...props,
+		children: /* @__PURE__ */ jsx("fieldset", {
+			disabled: loading,
+			className: "contents",
+			children: /* @__PURE__ */ jsxs(FieldGroup, { children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center gap-1.5 text-center",
+					children: [/* @__PURE__ */ jsx("h1", {
+						className: "text-2xl font-semibold tracking-[-0.02em]",
+						children: title
+					}), description && /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-balance text-muted-foreground",
+						children: description
+					})]
+				}),
+				children,
+				error && /* @__PURE__ */ jsx(FieldError, { children: error }),
+				/* @__PURE__ */ jsx(Field, { children: /* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					loading,
+					children: submitLabel
+				}) }),
+				footer
+			] })
+		})
 	});
 }
-function readForm(form) {
-	return Object.fromEntries([...new FormData(form).entries()].map(([k, v]) => [k, typeof v === "string" ? v : ""]));
+const text = (data, name) => {
+	const v = data.get(name);
+	return typeof v === "string" ? v : "";
+};
+function EmailField({ id }) {
+	return /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(FieldLabel, {
+		htmlFor: `${id}-email`,
+		children: "Email"
+	}), /* @__PURE__ */ jsx(Input, {
+		id: `${id}-email`,
+		name: "email",
+		type: "email",
+		autoComplete: "email",
+		placeholder: "you@example.com",
+		required: true
+	})] });
+}
+/** "password" and optional "confirm" fields; a mismatch makes "confirm" invalid so the browser blocks the submit. */
+function NewPasswordFields({ id, label, confirm, minLength, hint }) {
+	const check = (form) => {
+		const password = form?.elements.namedItem("password");
+		const again = form?.elements.namedItem("confirm");
+		again?.setCustomValidity(again.value && again.value !== password?.value ? "Passwords do not match" : "");
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Field, { children: [
+		/* @__PURE__ */ jsx(FieldLabel, {
+			htmlFor: `${id}-password`,
+			children: label
+		}),
+		/* @__PURE__ */ jsx(PasswordInput, {
+			id: `${id}-password`,
+			name: "password",
+			autoComplete: "new-password",
+			minLength,
+			required: true,
+			onInput: (e) => check(e.currentTarget.form)
+		}),
+		/* @__PURE__ */ jsx(FieldDescription, { children: hint ?? `At least ${minLength} characters.` })
+	] }), confirm && /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(FieldLabel, {
+		htmlFor: `${id}-confirm`,
+		children: "Confirm password"
+	}), /* @__PURE__ */ jsx(PasswordInput, {
+		id: `${id}-confirm`,
+		name: "confirm",
+		autoComplete: "new-password",
+		required: true,
+		onInput: (e) => check(e.currentTarget.form)
+	})] })] });
 }
 /** Email + password sign-in form with optional SSO buttons. Pair with AuthLayout. */
-function LoginForm({ title = "Welcome back", description, onSubmit, mode = "password", providers = [], onProviderClick, providersFirst, forgotPasswordHref, signupHref, submitLabel, loading, error, className, ...props }) {
+function LoginForm({ title = "Welcome back", description, onSubmit, mode = "password", providers = [], onProviderClick, providersFirst, forgotPasswordHref, signupHref, submitLabel, ...props }) {
 	const id = React.useId();
 	const emailOnly = mode === "email-only";
-	const desc = description ?? (emailOnly ? "Enter your email and we'll send you a sign-in link" : "Sign in to your account");
 	const sso = providers.length > 0 && /* @__PURE__ */ jsx(ProviderButtons, {
 		providers,
 		verb: "Continue",
-		onProviderClick,
-		disabled: loading
+		onProviderClick
 	});
-	return /* @__PURE__ */ jsx("form", {
+	return /* @__PURE__ */ jsxs(AuthForm, {
 		"data-slot": "login-form",
-		className: cn("flex flex-col gap-6", className),
-		onSubmit: onSubmit ? (e) => {
-			e.preventDefault();
-			const v = readForm(e.currentTarget);
-			onSubmit(emailOnly ? { email: v.email ?? "" } : {
-				email: v.email ?? "",
-				password: v.password ?? ""
-			});
-		} : void 0,
-		"aria-busy": loading || void 0,
+		title,
+		description: description ?? (emailOnly ? "Enter your email and we'll send you a sign-in link" : "Sign in to your account"),
+		submitLabel: submitLabel ?? (emailOnly ? "Send sign-in link" : "Sign in"),
+		onSubmit: onSubmit && ((data) => onSubmit(emailOnly ? { email: text(data, "email") } : {
+			email: text(data, "email"),
+			password: text(data, "password")
+		})),
+		footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+			!providersFirst && sso && /* @__PURE__ */ jsx(FieldSeparator, { children: "Or continue with" }),
+			!providersFirst && sso,
+			signupHref && /* @__PURE__ */ jsxs(FieldDescription, {
+				className: "text-center",
+				children: ["Don't have an account? ", /* @__PURE__ */ jsx("a", {
+					href: signupHref,
+					children: "Sign up"
+				})]
+			})
+		] }),
 		...props,
-		children: /* @__PURE__ */ jsxs(FieldGroup, { children: [
-			/* @__PURE__ */ jsx(Header, {
-				title,
-				description: desc
-			}),
+		children: [
 			providersFirst && sso,
 			providersFirst && sso && /* @__PURE__ */ jsx(FieldSeparator, { children: "Or continue with email" }),
-			/* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(FieldLabel, {
-				htmlFor: `${id}-email`,
-				children: "Email"
-			}), /* @__PURE__ */ jsx(Input, {
-				id: `${id}-email`,
-				name: "email",
-				type: "email",
-				autoComplete: "email",
-				placeholder: "you@example.com",
-				required: true,
-				disabled: loading
-			})] }),
+			/* @__PURE__ */ jsx(EmailField, { id }),
 			!emailOnly && /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center",
 				children: [/* @__PURE__ */ jsx(FieldLabel, {
@@ -184,75 +246,52 @@ function LoginForm({ title = "Welcome back", description, onSubmit, mode = "pass
 					children: "Password"
 				}), forgotPasswordHref && /* @__PURE__ */ jsx("a", {
 					href: forgotPasswordHref,
-					className: "ms-auto text-sm text-muted-foreground underline-offset-4 hover:text-foreground hover:underline",
+					className: "ms-auto rounded-sm text-sm text-muted-foreground underline-offset-4 outline-none hover:text-foreground hover:underline focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
 					children: "Forgot password?"
 				})]
-			}), /* @__PURE__ */ jsx(Input, {
+			}), /* @__PURE__ */ jsx(PasswordInput, {
 				id: `${id}-password`,
 				name: "password",
-				type: "password",
 				autoComplete: "current-password",
-				required: true,
-				disabled: loading
-			})] }),
-			error && /* @__PURE__ */ jsx(FieldError, { children: error }),
-			/* @__PURE__ */ jsx(Field, { children: /* @__PURE__ */ jsxs(Button, {
-				type: "submit",
-				disabled: loading,
-				children: [loading && /* @__PURE__ */ jsx(Spinner, {}), submitLabel ?? (emailOnly ? "Send sign-in link" : "Sign in")]
-			}) }),
-			!providersFirst && sso && /* @__PURE__ */ jsx(FieldSeparator, { children: "Or continue with" }),
-			!providersFirst && sso,
-			signupHref && /* @__PURE__ */ jsxs(FieldDescription, {
-				className: "text-center",
-				children: ["Don't have an account? ", /* @__PURE__ */ jsx("a", {
-					href: signupHref,
-					children: "Sign up"
-				})]
-			})
-		] })
+				required: true
+			})] })
+		]
 	});
 }
 /** Account creation form: name, email, password (+ confirm), optional SSO. Pair with AuthLayout. */
-function SignupForm({ title = "Create your account", description = "Enter your details to get started", onSubmit, nameField = true, confirmPassword = true, passwordHint, minPasswordLength = 8, providers = [], onProviderClick, providersFirst, loginHref, submitLabel = "Create account", loading, error, className, ...props }) {
+function SignupForm({ title = "Create your account", description = "Enter your details to get started", onSubmit, children, nameField = true, confirmPassword = true, passwordHint, minPasswordLength = 8, providers = [], onProviderClick, providersFirst, loginHref, submitLabel = "Create account", ...props }) {
 	const id = React.useId();
 	const sso = providers.length > 0 && /* @__PURE__ */ jsx(ProviderButtons, {
 		providers,
 		verb: "Sign up",
-		onProviderClick,
-		disabled: loading
+		onProviderClick
 	});
-	return /* @__PURE__ */ jsx("form", {
+	return /* @__PURE__ */ jsxs(AuthForm, {
 		"data-slot": "signup-form",
-		className: cn("flex flex-col gap-6", className),
-		onSubmit: (e) => {
-			const form = e.currentTarget;
-			const v = readForm(form);
-			const confirm = form.elements.namedItem("confirm");
-			if (confirm) {
-				confirm.setCustomValidity(v.confirm === v.password ? "" : "Passwords do not match");
-				if (!confirm.reportValidity()) {
-					e.preventDefault();
-					return;
-				}
-			}
-			if (!onSubmit) return;
-			e.preventDefault();
-			onSubmit({
-				...nameField ? { name: v.name ?? "" } : {},
-				email: v.email ?? "",
-				password: v.password ?? ""
-			});
-		},
-		"aria-busy": loading || void 0,
+		title,
+		description,
+		submitLabel,
+		onSubmit: onSubmit && ((data) => onSubmit({
+			...nameField ? { name: text(data, "name") } : {},
+			email: text(data, "email"),
+			password: text(data, "password")
+		}, data)),
+		footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+			!providersFirst && sso && /* @__PURE__ */ jsx(FieldSeparator, { children: "Or continue with" }),
+			!providersFirst && sso,
+			loginHref && /* @__PURE__ */ jsxs(FieldDescription, {
+				className: "text-center",
+				children: ["Already have an account? ", /* @__PURE__ */ jsx("a", {
+					href: loginHref,
+					children: "Sign in"
+				})]
+			})
+		] }),
 		...props,
-		children: /* @__PURE__ */ jsxs(FieldGroup, { children: [
-			/* @__PURE__ */ jsx(Header, {
-				title,
-				description
-			}),
+		children: [
 			providersFirst && sso,
 			providersFirst && sso && /* @__PURE__ */ jsx(FieldSeparator, { children: "Or sign up with email" }),
+			children,
 			nameField && /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(FieldLabel, {
 				htmlFor: `${id}-name`,
 				children: "Full name"
@@ -260,66 +299,35 @@ function SignupForm({ title = "Create your account", description = "Enter your d
 				id: `${id}-name`,
 				name: "name",
 				autoComplete: "name",
-				required: true,
-				disabled: loading
-			})] }),
-			/* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(FieldLabel, {
-				htmlFor: `${id}-email`,
-				children: "Email"
-			}), /* @__PURE__ */ jsx(Input, {
-				id: `${id}-email`,
-				name: "email",
-				type: "email",
-				autoComplete: "email",
-				placeholder: "you@example.com",
-				required: true,
-				disabled: loading
+				required: true
 			})] }),
-			/* @__PURE__ */ jsxs(Field, { children: [
-				/* @__PURE__ */ jsx(FieldLabel, {
-					htmlFor: `${id}-password`,
-					children: "Password"
-				}),
-				/* @__PURE__ */ jsx(Input, {
-					id: `${id}-password`,
-					name: "password",
-					type: "password",
-					autoComplete: "new-password",
-					onInput: (e) => (e.currentTarget.form?.elements.namedItem("confirm"))?.setCustomValidity(""),
-					minLength: minPasswordLength,
-					required: true,
-					disabled: loading
-				}),
-				/* @__PURE__ */ jsx(FieldDescription, { children: passwordHint ?? `At least ${minPasswordLength} characters.` })
-			] }),
-			confirmPassword && /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(FieldLabel, {
-				htmlFor: `${id}-confirm`,
-				children: "Confirm password"
-			}), /* @__PURE__ */ jsx(Input, {
-				id: `${id}-confirm`,
-				name: "confirm",
-				type: "password",
-				autoComplete: "new-password",
-				required: true,
-				disabled: loading,
-				onInput: (e) => e.currentTarget.setCustomValidity("")
-			})] }),
-			error && /* @__PURE__ */ jsx(FieldError, { children: error }),
-			/* @__PURE__ */ jsx(Field, { children: /* @__PURE__ */ jsxs(Button, {
-				type: "submit",
-				disabled: loading,
-				children: [loading && /* @__PURE__ */ jsx(Spinner, {}), submitLabel]
-			}) }),
-			!providersFirst && sso && /* @__PURE__ */ jsx(FieldSeparator, { children: "Or continue with" }),
-			!providersFirst && sso,
-			loginHref && /* @__PURE__ */ jsxs(FieldDescription, {
-				className: "text-center",
-				children: ["Already have an account? ", /* @__PURE__ */ jsx("a", {
-					href: loginHref,
-					children: "Sign in"
-				})]
+			/* @__PURE__ */ jsx(EmailField, { id }),
+			/* @__PURE__ */ jsx(NewPasswordFields, {
+				id,
+				label: "Password",
+				confirm: confirmPassword,
+				minLength: minPasswordLength,
+				hint: passwordHint
 			})
-		] })
+		]
+	});
+}
+/** Password reset or first password: new password + confirm. Pair with AuthLayout. */
+function NewPasswordForm({ title = "Choose a new password", onSubmit, minPasswordLength = 8, passwordHint, submitLabel = "Save password", ...props }) {
+	const id = React.useId();
+	return /* @__PURE__ */ jsx(AuthForm, {
+		"data-slot": "new-password-form",
+		title,
+		submitLabel,
+		onSubmit: onSubmit && ((data) => onSubmit({ password: text(data, "password") })),
+		...props,
+		children: /* @__PURE__ */ jsx(NewPasswordFields, {
+			id,
+			label: "New password",
+			confirm: true,
+			minLength: minPasswordLength,
+			hint: passwordHint
+		})
 	});
 }
-export { AppleIcon, AuthLayout, GitHubIcon, GoogleIcon, LoginForm, SignupForm };
+export { AppleIcon, AuthForm, AuthLayout, GitHubIcon, GoogleIcon, LoginForm, NewPasswordForm, SignupForm };

package/dist/components/data/agenda-row.d.ts

@@ -0,0 +1,26 @@
+import { CategoryColor } from "../admin/category.js";
+import * as React from "react";
+export interface AgendaRowWho {
+  name: string;
+  /** Category color of the member or calendar, 1 to 6. */
+  color: CategoryColor;
+}
+export interface AgendaRowProps extends Omit<React.ComponentProps<"div">, "title"> {
+  title: React.ReactNode;
+  /** Left column, e.g. "3:15" or "All day". */
+  time?: React.ReactNode;
+  /** One line under the title. Truncates. */
+  meta?: React.ReactNode;
+  /** Whose it is: a category-colored dot and the name at the right. */
+  who?: AgendaRowWho;
+  /** Pass with `onCheckedChange` to draw a to-do check instead of the event icon. */
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  /** Warning-tinted check. Also say it in words in `meta`. */
+  important?: boolean;
+  /** Makes the title a button, e.g. to open an event dialog or a DetailSheet. */
+  onOpen?: () => void;
+}
+/** One line of a day's agenda: time, event icon or to-do check, title, whose dot. */
+declare function AgendaRow({ title, time, meta, who, checked, onCheckedChange, important, onOpen, className, ...props }: AgendaRowProps): React.JSX.Element;
+export { AgendaRow };

package/dist/components/data/agenda-row.js

@@ -0,0 +1,62 @@
+"use client";
+import { CategoryDot } from "../admin/category.js";
+import { CheckCircle } from "../ui/check-circle.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/data/agenda-row.tsx
+/** One line of a day's agenda: time, event icon or to-do check, title, whose dot. */
+function AgendaRow({ title, time, meta, who, checked, onCheckedChange, important, onOpen, className, ...props }) {
+	const titleId = React.useId();
+	const titleClass = cn("text-[15px] leading-6 wrap-anywhere", checked ? "text-muted-foreground line-through decoration-muted-foreground/60" : "text-foreground");
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "agenda-row",
+		"data-checked": checked || void 0,
+		className: cn("flex min-w-0 items-start gap-3 rounded-lg px-2 py-2.5", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "w-14 shrink-0 text-[13px] leading-6 text-muted-foreground tabular-nums",
+				children: time
+			}),
+			onCheckedChange ? /* @__PURE__ */ jsx(CheckCircle, {
+				checked: !!checked,
+				onCheckedChange: (v) => onCheckedChange(v === true),
+				tone: important && !checked ? "important" : "default",
+				"aria-labelledby": titleId
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "flex size-6 shrink-0 items-center justify-center text-muted-foreground",
+				children: /* @__PURE__ */ jsx(CalendarIcon, {
+					"aria-hidden": "true",
+					className: "size-[18px]"
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col",
+				children: [onOpen ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					id: titleId,
+					onClick: onOpen,
+					className: cn(titleClass, "self-start rounded-sm text-left outline-none hover:underline hover:underline-offset-4 focus-visible:ring-4 focus-visible:ring-ring/20"),
+					children: title
+				}) : /* @__PURE__ */ jsx("span", {
+					id: titleId,
+					className: titleClass,
+					children: title
+				}), meta && /* @__PURE__ */ jsx("span", {
+					className: "truncate text-xs text-muted-foreground",
+					children: meta
+				})]
+			}),
+			who && /* @__PURE__ */ jsxs("span", {
+				className: "flex max-w-32 shrink-0 items-center gap-1.5 text-[13px] leading-6 text-muted-foreground",
+				children: [/* @__PURE__ */ jsx(CategoryDot, { color: who.color }), /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: who.name
+				})]
+			})
+		]
+	});
+}
+export { AgendaRow };

package/dist/components/data/day-strip.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+export interface DayStripDay {
+  /** DOM id of the element to jump to, e.g. a SectionedList section id. */
+  id: string;
+  /** Floating local date, `YYYY-MM-DD`. */
+  date: string;
+  /** Shows a dot under the date. */
+  hasPlans?: boolean;
+}
+export interface DayStripProps extends React.ComponentProps<"nav"> {
+  days: DayStripDay[];
+  /** Id of the selected day. */
+  value?: string;
+  /** Called with the day's id after it scrolls that element into view. */
+  onValueChange?: (id: string) => void;
+  /**
+   * Sticks to the top of the page (or `top-*` you pass) while it scrolls, and lands jumped-to days below the strip
+   * instead of under it. Works in any scroll container, the document included.
+   */
+  sticky?: boolean;
+}
+/**
+ * A row of day buttons (weekday, date, a dot when there are plans) that jump to the element with the day's id.
+ * Scrolls inside itself when the days do not fit. Smooth scrolling is off under prefers-reduced-motion.
+ */
+declare function DayStrip({ days, value, onValueChange, sticky, className, "aria-label": ariaLabel, ...props }: DayStripProps): React.JSX.Element;
+export { DayStrip };

package/dist/components/data/day-strip.js

@@ -0,0 +1,78 @@
+"use client";
+import { parseLocalDate } from "../../lib/internal/date.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/data/day-strip.tsx
+/**
+* A row of day buttons (weekday, date, a dot when there are plans) that jump to the element with the day's id.
+* Scrolls inside itself when the days do not fit. Smooth scrolling is off under prefers-reduced-motion.
+*/
+function DayStrip({ days, value, onValueChange, sticky = false, className, "aria-label": ariaLabel, ...props }) {
+	const jump = (e, id) => {
+		e.preventDefault();
+		const reduce = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+		const el = document.getElementById(id);
+		if (el) {
+			const strip = sticky ? e.currentTarget.closest("[data-slot=day-strip]") : null;
+			if (strip) {
+				const top = Number.parseFloat(getComputedStyle(strip).top) || 0;
+				el.style.scrollMarginTop = `${strip.offsetHeight + top + 8}px`;
+			}
+			el.scrollIntoView?.({
+				behavior: reduce ? "auto" : "smooth",
+				block: "start"
+			});
+			if (!el.hasAttribute("tabindex")) el.setAttribute("tabindex", "-1");
+			el.focus({ preventScroll: true });
+		}
+		onValueChange?.(id);
+	};
+	return /* @__PURE__ */ jsx("nav", {
+		"data-slot": "day-strip",
+		"aria-label": ariaLabel ?? "Jump to a day",
+		className: cn("min-w-0 overflow-x-auto", sticky && "sticky top-0 z-10 bg-background", className),
+		...props,
+		children: /* @__PURE__ */ jsx("ul", {
+			className: "flex gap-2 p-1",
+			children: days.map((day) => {
+				const selected = day.id === value;
+				const date = parseLocalDate(day.date);
+				const label = date.toLocaleDateString(void 0, {
+					weekday: "long",
+					month: "long",
+					day: "numeric"
+				});
+				return /* @__PURE__ */ jsx("li", {
+					className: "flex shrink-0 grow basis-18",
+					children: /* @__PURE__ */ jsxs("a", {
+						href: `#${day.id}`,
+						"aria-current": selected ? "true" : void 0,
+						onClick: (e) => jump(e, day.id),
+						className: cn("flex min-h-21 flex-1 flex-col items-center justify-center gap-0.5 rounded-xl px-1 py-2 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background motion-reduce:transition-none", selected ? "bg-primary text-primary-foreground" : "bg-card text-foreground shadow-card hover:bg-muted"),
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: day.hasPlans ? `${label}, has plans` : label
+							}),
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: cn("text-xs font-medium", selected ? "text-primary-foreground" : "text-muted-foreground"),
+								children: date.toLocaleDateString(void 0, { weekday: "short" })
+							}),
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: "text-[22px] leading-tight font-semibold tracking-tight tabular-nums",
+								children: date.getDate()
+							}),
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: cn("size-1.5 rounded-full", !day.hasPlans && "bg-transparent", day.hasPlans && (selected ? "bg-primary-foreground" : "bg-primary"))
+							})
+						]
+					})
+				}, day.id);
+			})
+		})
+	});
+}
+export { DayStrip };

package/dist/components/data/sectioned-list.d.ts

@@ -8,22 +8,36 @@ export interface SectionedListItem {
   important?: boolean;
   assignee?: TaskRowAssignee;
 }
-export interface SectionedListSection {
+export interface SectionedListSection<T extends SectionedListItem = SectionedListItem> {
+  /** Also the section's DOM id, so a DayStrip or `#id` link can jump to it. */
   id: string;
   /** Section heading, e.g. "Today" or "Groceries". Omit for a section without one. */
   title?: React.ReactNode;
-  items: SectionedListItem[];
+  /** At the right of the heading, e.g. a small ghost Button "Move to today". */
+  action?: React.ReactNode;
+  /** Keeps the section shown with this text when it has no open item, e.g. "Nothing planned". */
+  empty?: React.ReactNode;
+  items: T[];
 }
-export interface SectionedListProps extends Omit<React.ComponentProps<"div">, "onToggle"> {
-  sections: SectionedListSection[];
+export interface SectionedListProps<T extends SectionedListItem = SectionedListItem> extends Omit<React.ComponentProps<"div">, "onToggle"> {
+  sections: SectionedListSection<T>[];
   /** Called when an item's check changes. Update `done` in your data; the row folds away by itself. */
   onToggle: (id: string, done: boolean) => void;
+  /**
+   * Draws a row instead of TaskRow, e.g. an AgendaRow. Call `toggle(done)` from its check so the row lingers and
+   * folds away like a TaskRow. Items without `done` (events) always stay.
+   */
+  renderItem?: (item: T, toggle: (done: boolean) => void) => React.ReactNode;
+  /** How long a ticked row stays struck through before it folds away, e.g. about the length of an Undo toast. Default 600. */
+  lingerMs?: number;
   /** Makes item titles buttons, e.g. to open a DetailSheet. */
   onOpen?: (id: string) => void;
   /** Shows one add box at the top. Called with the trimmed text on Enter. */
   onAdd?: (text: string) => void;
   /** Add box placeholder and label. Default "Add a to-do". */
   addPlaceholder?: string;
+  /** Chips at the right of the add box while it has text, e.g. the date or person parsed from it. Like AskBox `chips`. */
+  addChips?: (text: string) => React.ReactNode;
   /** Shown when no item is open, e.g. <Empty /> or a line of text. */
   empty?: React.ReactNode;
   /** Start with the done items shown. Default false. */
@@ -31,7 +45,8 @@ export interface SectionedListProps extends Omit<React.ComponentProps<"div">, "o
 }
 /**
  * A to-do list: one add box, sections with headings, done items folded into a "Show N done" toggle, an empty
- * state. Rows fold in and out with Collapse, so nothing jumps.
+ * state. Rows fold in and out with Collapse, so nothing jumps. `renderItem` draws other rows (AgendaRow), so a week
+ * agenda is one SectionedList with a section per day.
  */
-declare function SectionedList({ sections, onToggle, onOpen, onAdd, addPlaceholder, empty, defaultShowDone, className, ...props }: SectionedListProps): React.JSX.Element;
+declare function SectionedList<T extends SectionedListItem = SectionedListItem>({ sections, onToggle, renderItem, lingerMs, onOpen, onAdd, addPlaceholder, addChips, empty, defaultShowDone, className, ...props }: SectionedListProps<T>): React.JSX.Element;
 export { SectionedList };