harebear-ui 0.9.0 → 0.11.0

package/dist/components/auth/auth.js

@@ -4,10 +4,9 @@ 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 { PasswordInput } from "../ui/password-input.js";
-import { Spinner } from "../ui/spinner.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 }) {
@@ -71,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"),
@@ -79,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}`]
@@ -120,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, {
@@ -185,74 +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(PasswordInput, {
 				id: `${id}-password`,
 				name: "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,64 +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(PasswordInput, {
-					id: `${id}-password`,
-					name: "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(PasswordInput, {
-				id: `${id}-confirm`,
-				name: "confirm",
-				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/day-strip.d.ts

@@ -13,10 +13,15 @@ export interface DayStripProps extends React.ComponentProps<"nav"> {
   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, className, "aria-label": ariaLabel, ...props }: DayStripProps): React.JSX.Element;
+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

@@ -1,5 +1,5 @@
 "use client";
-import { parseLocalDate } from "../../lib/date.js";
+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
@@ -7,12 +7,17 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * 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, className, "aria-label": ariaLabel, ...props }) {
+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"
@@ -25,7 +30,7 @@ function DayStrip({ days, value, onValueChange, className, "aria-label": ariaLab
 	return /* @__PURE__ */ jsx("nav", {
 		"data-slot": "day-strip",
 		"aria-label": ariaLabel ?? "Jump to a day",
-		className: cn("min-w-0 overflow-x-auto", className),
+		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",
@@ -42,15 +47,20 @@ function DayStrip({ days, value, onValueChange, className, "aria-label": ariaLab
 					children: /* @__PURE__ */ jsxs("a", {
 						href: `#${day.id}`,
 						"aria-current": selected ? "true" : void 0,
-						"aria-label": day.hasPlans ? `${label}, has plans` : label,
 						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-4 focus-visible:ring-ring/20 motion-reduce:transition-none", selected ? "bg-primary text-primary-foreground" : "bg-card text-foreground shadow-card hover:bg-muted"),
+						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()
 							}),

package/dist/components/layout/collapse.js

@@ -16,7 +16,7 @@ function Collapse({ open, contentClassName, className, children, ...props }) {
 		className: cn("grid transition-[grid-template-rows,opacity] duration-200 ease-out motion-reduce:transition-none", open ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0", className),
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
-			className: cn("min-h-0 overflow-hidden", contentClassName),
+			className: cn("min-h-0 min-w-0 overflow-x-visible overflow-y-clip", contentClassName),
 			children
 		})
 	});

package/dist/components/layout/text.d.ts

@@ -29,9 +29,9 @@ export interface TextProps extends Omit<React.ComponentProps<"span">, "ref"> {
 /** Text with props instead of classes: size, tone, weight, mono, truncate, lines. */
 declare function Text({ size, tone, weight, mono, truncate, lines, tabular, as: As, className, ...props }: TextProps): React.JSX.Element;
 export interface HeadingProps extends React.ComponentProps<"h3"> {
-  /** 3: a section title in a card. 4: a small uppercase label over a group. */
-  level?: 3 | 4;
+  /** 2: a page section title under the page's h1. 3: a section title in a card. 4: a small uppercase label over a group. */
+  level?: 2 | 3 | 4;
 }
-/** Section heading inside a card or panel. */
+/** Section heading on a page (2) or inside a card or panel (3, 4). */
 declare function Heading({ level, className, ...props }: HeadingProps): React.JSX.Element;
 export { Heading, Text };

package/dist/components/layout/text.js

@@ -36,8 +36,13 @@ function Text({ size = "base", tone = "default", weight = "normal", mono, trunca
 		...props
 	});
 }
-/** Section heading inside a card or panel. */
+/** Section heading on a page (2) or inside a card or panel (3, 4). */
 function Heading({ level = 3, className, ...props }) {
+	if (level === 2) return /* @__PURE__ */ jsx("h2", {
+		"data-slot": "heading",
+		className: cn("text-lg leading-snug font-semibold", className),
+		...props
+	});
 	if (level === 4) return /* @__PURE__ */ jsx("h4", {
 		"data-slot": "heading",
 		className: cn("text-xs font-medium tracking-wide text-muted-foreground uppercase", className),

package/dist/components/ui/button.js

@@ -5,7 +5,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
 // src/components/ui/button.tsx
-const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-[background-color,color,box-shadow,border-color] outline-none select-none focus-visible:ring-4 focus-visible:ring-ring/20 focus-visible:border-ring active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[18px]", {
+const buttonVariants = cva("group/button relative inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-[background-color,color,box-shadow,border-color] outline-none select-none focus-visible:ring-4 focus-visible:ring-ring/20 focus-visible:border-ring active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[18px] pointer-coarse:after:absolute pointer-coarse:after:inset-[min(0px,calc(50%-1.375rem))]", {
 	variants: {
 		variant: {
 			default: "bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--primary),black_10%)]",

package/dist/components/ui/check-circle.js

@@ -24,7 +24,7 @@ function CheckCircle({ tone = "default", className, onCheckedChange, onAnimation
 			setPop(false);
 			onAnimationEnd?.(e);
 		},
-		className: cn("peer relative grid size-6 shrink-0 place-items-center rounded-full border-2 border-muted-foreground/45 bg-card text-primary-foreground transition-[background-color,border-color,box-shadow] outline-none after:absolute after:-inset-2.5 hover:border-primary focus-visible:border-primary focus-visible:ring-4 focus-visible:ring-primary/20 disabled:cursor-not-allowed disabled:opacity-50 data-[tone=important]:border-warning data-[tone=important]:bg-warning/10 data-checked:border-primary data-checked:bg-primary data-[pop]:animate-check-pop", className),
+		className: cn("peer relative grid size-6 shrink-0 place-items-center rounded-full border-2 border-muted-foreground/45 bg-card text-primary-foreground transition-[background-color,border-color] outline-none after:absolute after:-inset-3 hover:border-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary focus-visible:outline-solid motion-reduce:transition-none disabled:cursor-not-allowed disabled:opacity-50 data-[tone=important]:border-warning data-[tone=important]:bg-warning/10 data-checked:border-primary data-checked:bg-primary motion-safe:data-[pop]:animate-check-pop", className),
 		...props,
 		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
 			"data-slot": "check-circle-indicator",

package/dist/components/ui/code-block.js

@@ -39,7 +39,7 @@ function CodeBlockTitle({ className, ...props }) {
 function CodeBlockActions({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "code-block-actions",
-		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),
+		className: cn("-my-1 ms-auto -me-1.5 flex shrink-0 items-center gap-1 pointer-coarse:my-0 [[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),
 		...props
 	});
 }
@@ -57,7 +57,7 @@ function CodeBlockCopyButton({ value, variant = "ghost", size = "icon-xs", type
 		variant,
 		size,
 		"aria-label": copied ? "Copied" : "Copy",
-		className: cn(className),
+		className: cn("pointer-coarse:size-11", className),
 		onClick: (event) => {
 			onClick?.(event);
 			navigator.clipboard.writeText(value).then(() => setCopied(true)).catch(() => {});

package/dist/components/ui/combobox.js

@@ -49,6 +49,7 @@ function ComboboxInput({ className, children, disabled = false, showTrigger = tr
 					variant: "ghost",
 					asChild: true,
 					"data-slot": "input-group-button",
+					"aria-label": "Show options",
 					className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent",
 					disabled,
 					children: /* @__PURE__ */ jsx(ComboboxTrigger, {})

package/dist/components/ui/dialog.d.ts

@@ -5,7 +5,7 @@ declare function DialogTrigger({ ...props }: React.ComponentProps<typeof Dialog$
 declare function DialogPortal({ ...props }: React.ComponentProps<typeof Dialog$1.Portal>): React.JSX.Element;
 declare function DialogClose({ ...props }: React.ComponentProps<typeof Dialog$1.Close>): React.JSX.Element;
 declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof Dialog$1.Overlay>): React.JSX.Element;
-declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof Dialog$1.Content> & {
+declare function DialogContent({ className, children, showCloseButton, onInteractOutside, ...props }: React.ComponentProps<typeof Dialog$1.Content> & {
   showCloseButton?: boolean;
 }): React.JSX.Element;
 declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/components/ui/dialog.js

@@ -1,4 +1,5 @@
 "use client";
+import { keepOpenOnToast } from "../../lib/internal/toast-clearance.js";
 import { cn } from "../../lib/utils.js";
 import { Button } from "./button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -36,11 +37,12 @@ function DialogOverlay({ className, ...props }) {
 		...props
 	});
 }
-function DialogContent({ className, children, showCloseButton = true, ...props }) {
+function DialogContent({ className, children, showCloseButton = true, onInteractOutside, ...props }) {
 	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog$1.Content, {
 		"data-slot": "dialog-content",
 		className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
 		...props,
+		onInteractOutside: keepOpenOnToast(onInteractOutside),
 		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
 			"data-slot": "dialog-close",
 			asChild: true,

package/dist/components/ui/drawer.d.ts

@@ -5,7 +5,7 @@ declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof Drawer$
 declare function DrawerPortal({ ...props }: React.ComponentProps<typeof Drawer$1.Portal>): React.JSX.Element;
 declare function DrawerClose({ ...props }: React.ComponentProps<typeof Drawer$1.Close>): React.JSX.Element;
 declare function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof Drawer$1.Overlay>): React.JSX.Element;
-declare function DrawerContent({ className, children, ...props }: React.ComponentProps<typeof Drawer$1.Content>): React.JSX.Element;
+declare function DrawerContent({ className, children, onInteractOutside, ...props }: React.ComponentProps<typeof Drawer$1.Content>): React.JSX.Element;
 declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof Drawer$1.Title>): React.JSX.Element;

package/dist/components/ui/drawer.js

@@ -1,4 +1,5 @@
 "use client";
+import { keepOpenOnToast } from "../../lib/internal/toast-clearance.js";
 import { cn } from "../../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Drawer as Drawer$1 } from "vaul";
@@ -34,13 +35,14 @@ function DrawerOverlay({ className, ...props }) {
 		...props
 	});
 }
-function DrawerContent({ className, children, ...props }) {
+function DrawerContent({ className, children, onInteractOutside, ...props }) {
 	return /* @__PURE__ */ jsxs(DrawerPortal, {
 		"data-slot": "drawer-portal",
 		children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsxs(Drawer$1.Content, {
 			"data-slot": "drawer-content",
 			className: cn("group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm", className),
 			...props,
+			onInteractOutside: keepOpenOnToast(onInteractOutside),
 			children: [/* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), children]
 		})]
 	});