harebear-ui 0.9.0 → 0.10.0

package/dist/components/admin/settings.js

@@ -29,8 +29,8 @@ function SettingsSection({ title, description, className, children, ...props })
 		})]
 	});
 }
-/** One setting: label and description at the left, a control at the right, optional expandable content. */
-function SettingsRow({ label, description, htmlFor, control, content, open: openProp, defaultOpen = false, onOpenChange, expandLabel = "Change", className, ...props }) {
+/** One setting: label and description at the left, a control at the right, optional body and expandable content. */
+function SettingsRow({ label, description, htmlFor, control, body, content, open: openProp, defaultOpen = false, onOpenChange, expandLabel = "Change", className, ...props }) {
 	const [openState, setOpenState] = React.useState(defaultOpen);
 	const open = openProp ?? openState;
 	const setOpen = (next) => {
@@ -44,35 +44,42 @@ function SettingsRow({ label, description, htmlFor, control, content, open: open
 		"data-state": content ? open ? "open" : "closed" : void 0,
 		className: cn("py-3.5", className),
 		...props,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex flex-wrap items-center gap-x-4 gap-y-2",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex min-w-0 flex-1 basis-48 flex-col",
-				children: [/* @__PURE__ */ jsx(Label, {
-					htmlFor,
-					className: "text-sm font-medium",
-					children: label
-				}), description && /* @__PURE__ */ jsx("span", {
-					className: "text-[13px] text-muted-foreground",
-					children: description
-				})]
-			}), control ?? (content ? /* @__PURE__ */ jsx(Button, {
-				type: "button",
-				variant: "outline",
-				size: "sm",
-				"aria-expanded": open,
-				"aria-controls": contentId,
-				onClick: () => setOpen(!open),
-				children: open ? "Cancel" : expandLabel
-			}) : null)]
-		}), content && /* @__PURE__ */ jsx(Collapse, {
-			open,
-			id: contentId,
-			children: /* @__PURE__ */ jsx("div", {
-				className: "pt-3.5",
-				children: content
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-x-4 gap-y-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 basis-48 flex-col",
+					children: [/* @__PURE__ */ jsx(Label, {
+						htmlFor,
+						className: "text-sm font-medium",
+						children: label
+					}), description && /* @__PURE__ */ jsx("span", {
+						className: "text-[13px] text-muted-foreground",
+						children: description
+					})]
+				}), control ?? (content ? /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					size: "sm",
+					"aria-expanded": open,
+					"aria-controls": contentId,
+					onClick: () => setOpen(!open),
+					children: open ? "Cancel" : expandLabel
+				}) : null)]
+			}),
+			body && /* @__PURE__ */ jsx("div", {
+				className: "pt-3",
+				children: body
+			}),
+			content && /* @__PURE__ */ jsx(Collapse, {
+				open,
+				id: contentId,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "pt-3.5",
+					children: content
+				})
 			})
-		})]
+		]
 	});
 }
 export { SettingsRow, SettingsSection };

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+export interface TimeZonePickerProps {
+  /** IANA name, e.g. "America/Vancouver". */
+  value: string;
+  onValueChange: (value: string) => void;
+  /** id of the search input, for a FieldLabel or SettingsRow `htmlFor`. */
+  id?: string;
+  className?: string;
+}
+/** Searchable IANA time zone list (Intl.supportedValuesOf("timeZone")), built on Combobox. */
+declare function TimeZonePicker({ value, onValueChange, id, className }: TimeZonePickerProps): React.JSX.Element;
+export { TimeZonePicker };

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

@@ -0,0 +1,31 @@
+"use client";
+import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "../ui/combobox.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/admin/time-zone-picker.tsx
+const label = (zone) => zone.replaceAll("_", " ");
+/** Searchable IANA time zone list (Intl.supportedValuesOf("timeZone")), built on Combobox. */
+function TimeZonePicker({ value, onValueChange, id, className }) {
+	const zones = React.useMemo(() => {
+		const all = Intl.supportedValuesOf("timeZone");
+		return value && !all.includes(value) ? [value, ...all] : all;
+	}, [value]);
+	return /* @__PURE__ */ jsxs(Combobox, {
+		items: zones,
+		value,
+		onValueChange: (next) => next && onValueChange(next),
+		itemToStringLabel: label,
+		children: [/* @__PURE__ */ jsx(ComboboxInput, {
+			id,
+			placeholder: "Search time zones",
+			showTrigger: false,
+			className: cn("w-full", className)
+		}), /* @__PURE__ */ jsxs(ComboboxContent, { children: [/* @__PURE__ */ jsx(ComboboxEmpty, { children: "No matching time zone." }), /* @__PURE__ */ jsx(ComboboxList, { children: (zone) => /* @__PURE__ */ jsx(ComboboxItem, {
+			value: zone,
+			className: "pointer-coarse:min-h-11",
+			children: label(zone)
+		}, zone) })] })]
+	});
+}
+export { TimeZonePicker };

package/dist/components/admin/user-menu.d.ts

@@ -15,11 +15,13 @@ export interface UserMenuProps {
   onSignOut?: () => void;
   /** Default "Sign out". */
   signOutLabel?: React.ReactNode;
+  /** Trigger is just the avatar (44px on touch screens) and the menu opens below it, e.g. in a phone page header. */
+  compact?: boolean;
   className?: string;
 }
 /**
  * The signed-in user as a menu button, for a sidebar footer or top bar: theme choice, app items such as
  * Settings, and sign out. In a sidebar icon rail the trigger is just the avatar and the menu opens to the side.
  */
-declare function UserMenu({ name, subtitle, avatarUrl, color, children, themeSwitch, onSignOut, signOutLabel, className }: UserMenuProps): React.JSX.Element;
+declare function UserMenu({ name, subtitle, avatarUrl, color, children, themeSwitch, onSignOut, signOutLabel, compact, className }: UserMenuProps): React.JSX.Element;
 export { UserMenu };

package/dist/components/admin/user-menu.js

@@ -1,6 +1,8 @@
 "use client";
-import { UserChip } from "./user-chip.js";
+import { categoryBg } from "./category.js";
+import { UserChip, initials } from "./user-chip.js";
 import { useTheme } from "../theme/theme-provider.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
 import { useSidebarOptional } from "../ui/sidebar.js";
 import { cn } from "../../lib/utils.js";
@@ -28,26 +30,35 @@ const themes = [
 * The signed-in user as a menu button, for a sidebar footer or top bar: theme choice, app items such as
 * Settings, and sign out. In a sidebar icon rail the trigger is just the avatar and the menu opens to the side.
 */
-function UserMenu({ name, subtitle, avatarUrl, color, children, themeSwitch = true, onSignOut, signOutLabel = "Sign out", className }) {
+function UserMenu({ name, subtitle, avatarUrl, color, children, themeSwitch = true, onSignOut, signOutLabel = "Sign out", compact = false, className }) {
 	const { mode, setMode } = useTheme();
 	const sidebar = useSidebarOptional();
 	const rail = sidebar?.state === "collapsed" && !sidebar.isMobile;
-	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
 		"data-slot": "user-menu-trigger",
-		"aria-label": `Account menu for ${name}`,
-		className: cn("flex w-full min-w-0 items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/40 data-[state=open]:bg-muted group-data-[collapsible=icon]:mx-auto group-data-[collapsible=icon]:size-10 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:rounded-full group-data-[collapsible=icon]:p-0", className),
-		children: [/* @__PURE__ */ jsx(UserChip, {
+		"aria-label": compact ? `Account menu for ${name}` : rail ? name : void 0,
+		className: cn(compact ? "grid size-10 shrink-0 place-items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background pointer-coarse:size-11" : "flex w-full min-w-0 items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-muted group-data-[collapsible=icon]:mx-auto group-data-[collapsible=icon]:size-10 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:rounded-full group-data-[collapsible=icon]:p-0", className),
+		children: compact || rail ? /* @__PURE__ */ jsxs(Avatar, {
+			"aria-hidden": "true",
+			children: [avatarUrl && /* @__PURE__ */ jsx(AvatarImage, {
+				src: avatarUrl,
+				alt: ""
+			}), /* @__PURE__ */ jsx(AvatarFallback, {
+				"data-initials": initials(name),
+				className: cn("after:content-[attr(data-initials)]", color && [categoryBg[color], "text-category-foreground"])
+			})]
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(UserChip, {
 			name,
 			subtitle,
 			avatarUrl,
 			color,
 			className: "flex-1"
-		}), /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "size-4 shrink-0 text-muted-foreground group-data-[collapsible=icon]:hidden" })]
+		}), /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "size-4 shrink-0 text-muted-foreground group-data-[collapsible=icon]:hidden" })] })
 	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
 		"data-slot": "user-menu",
-		side: rail ? "right" : "top",
-		align: rail ? "end" : "start",
-		className: "w-(--radix-dropdown-menu-trigger-width) min-w-60",
+		side: compact ? "bottom" : rail ? "right" : "top",
+		align: compact || rail ? "end" : "start",
+		className: compact ? "min-w-60" : "w-(--radix-dropdown-menu-trigger-width) min-w-60",
 		children: [
 			/* @__PURE__ */ jsxs(DropdownMenuLabel, {
 				className: "flex min-w-0 flex-col font-normal",

package/dist/components/ai/assistant.js

@@ -2,7 +2,7 @@
 import { AskBox } from "./ask-box.js";
 import { AssistantAvatar, ChatMessage, ChatThread, TypingIndicator } from "./chat.js";
 import { Button } from "../ui/button.js";
-import { useToastClearance } from "../../lib/toast-clearance.js";
+import { useToastClearance } from "../../lib/internal/toast-clearance.js";
 import { cn } from "../../lib/utils.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -30,9 +30,9 @@ function CodeSnippet({ code, language, highlight = true, lineNumbers, hideCopy,
 				type: "button",
 				variant: "ghost",
 				size: "sm",
-				className: "ms-auto",
+				className: "ms-auto pointer-coarse:h-11",
 				onClick: () => copy(code),
-				"aria-label": "Copy code",
+				"aria-label": copied ? void 0 : "Copy code",
 				children: [copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {}), copied ? "Copied" : "Copy"]
 			})]
 		}), /* @__PURE__ */ jsx(CodeBlockContent, {
@@ -106,7 +106,7 @@ function withTips(children) {
 function Prose({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "prose",
-		className: cn("flex min-w-0 flex-col gap-3.5 text-[15px] leading-[1.65] wrap-anywhere text-foreground", "[&_ol]:flex [&_ol]:list-decimal [&_ol]:flex-col [&_ol]:gap-2 [&_ol]:pl-5.5", "[&_ul]:flex [&_ul]:list-disc [&_ul]:flex-col [&_ul]:gap-2 [&_ul]:pl-5.5", "[&_strong]:font-semibold [&_a]:text-primary [&_a]:underline-offset-4 hover:[&_a]:underline", "[&_h1]:text-xl [&_h1]:font-semibold [&_h2]:text-lg [&_h2]:font-semibold [&_h3]:font-semibold [&_h4]:font-semibold", "[&_blockquote]:border-l-2 [&_blockquote]:pl-4 [&_blockquote]:text-muted-foreground", "[&_:not(pre)>code]:rounded-[6px] [&_:not(pre)>code]:bg-muted [&_:not(pre)>code]:px-1.5 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:font-mono [&_:not(pre)>code]:text-[12.5px]", "[&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-muted [&_pre]:p-4.5 [&_pre]:font-mono [&_pre]:text-[13px]", "[&_table]:w-full [&_table]:text-sm [&_td]:border-b [&_td]:py-2 [&_th]:border-b [&_th]:py-2 [&_th]:text-left [&_th]:font-medium", className),
+		className: cn("flex min-w-0 flex-col gap-3.5 text-[15px] leading-[1.65] wrap-anywhere text-foreground", "[&_ol]:flex [&_ol]:list-decimal [&_ol]:flex-col [&_ol]:gap-2 [&_ol]:pl-5.5", "[&_ul]:flex [&_ul]:list-disc [&_ul]:flex-col [&_ul]:gap-2 [&_ul]:pl-5.5", "[&_strong]:font-semibold [&_a]:text-primary [&_a]:underline [&_a]:decoration-primary/40 [&_a]:underline-offset-4 hover:[&_a]:decoration-primary [&_a]:rounded-sm [&_a:focus-visible]:outline-2 [&_a:focus-visible]:outline-offset-2 [&_a:focus-visible]:outline-ring", "[&_h1]:text-xl [&_h1]:font-semibold [&_h2]:text-lg [&_h2]:font-semibold [&_h3]:font-semibold [&_h4]:font-semibold", "[&_blockquote]:border-l-2 [&_blockquote]:pl-4 [&_blockquote]:text-muted-foreground", "[&_:not(pre)>code]:rounded-[6px] [&_:not(pre)>code]:bg-muted [&_:not(pre)>code]:px-1.5 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:font-mono [&_:not(pre)>code]:text-[12.5px]", "[&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-muted [&_pre]:p-4.5 [&_pre]:font-mono [&_pre]:text-[13px]", "[&_table]:w-full [&_table]:text-sm [&_td]:border-b [&_td]:py-2 [&_th]:border-b [&_th]:py-2 [&_th]:text-left [&_th]:font-medium", className),
 		...props,
 		children: withTips(children)
 	});

package/dist/components/ai/markdown.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export interface MarkdownProps extends Omit<React.ComponentProps<"div">, "children"> {
+  /** The Markdown source. GitHub flavoured (tables, task lists, strikethrough, autolinks). Raw HTML is dropped. */
+  children: string;
+  /** Component for in-app links (href without a scheme, e.g. "/lists/2"), e.g. Next.js or React Router Link. Gets `href`. */
+  linkComponent?: React.ElementType;
+}
+/**
+ * Renders Markdown safely inside Prose: no raw HTML, unsafe URLs (javascript:) removed, `> Tip:` blockquotes as
+ * a Callout. Other props go to the Prose wrapper.
+ */
+declare function Markdown({ children, linkComponent: Link, ...props }: MarkdownProps): React.JSX.Element;
+export { Markdown };

package/dist/components/ai/markdown.js

@@ -0,0 +1,41 @@
+"use client";
+import { Prose, ProseBlockquote } from "./code-block.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+// src/components/ai/markdown.tsx
+const plugins = [remarkGfm];
+const SCHEME = /^([a-z][a-z\d+.-]*:|\/\/)/i;
+/**
+* Renders Markdown safely inside Prose: no raw HTML, unsafe URLs (javascript:) removed, `> Tip:` blockquotes as
+* a Callout. Other props go to the Prose wrapper.
+*/
+function Markdown({ children, linkComponent: Link, ...props }) {
+	const components = React.useMemo(() => ({
+		blockquote: ProseBlockquote,
+		a: ({ node: _node, href = "", ...rest }) => Link && !SCHEME.test(href) ? /* @__PURE__ */ jsx(Link, {
+			href,
+			...rest
+		}) : /* @__PURE__ */ jsx("a", {
+			href,
+			...rest
+		}),
+		input: ({ node: _node, checked, ...rest }) => /* @__PURE__ */ jsx("input", {
+			...rest,
+			checked,
+			"aria-label": checked ? "Done" : "Not done"
+		})
+	}), [Link]);
+	return /* @__PURE__ */ jsx(Prose, {
+		"data-slot": "markdown",
+		...props,
+		children: /* @__PURE__ */ jsx(ReactMarkdown, {
+			remarkPlugins: plugins,
+			components,
+			skipHtml: true,
+			children
+		})
+	});
+}
+export { Markdown };

package/dist/components/auth/auth.d.ts

@@ -33,6 +33,23 @@ declare function GitHubIcon(props: React.ComponentProps<"svg">): React.JSX.Eleme
 declare function GoogleIcon(props: React.ComponentProps<"svg">): React.JSX.Element;
 /** Apple mark, for AuthProvider icons. */
 declare function AppleIcon(props: React.ComponentProps<"svg">): React.JSX.Element;
+export interface AuthFormProps extends Omit<React.ComponentProps<"form">, "onSubmit" | "title"> {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** The fields. Give each a `name`; they arrive in onSubmit's FormData. */
+  children?: React.ReactNode;
+  /** Form-level error, e.g. "Invalid email or password". */
+  error?: React.ReactNode;
+  submitLabel: React.ReactNode;
+  /** Shows a spinner on the submit button and disables every control. */
+  loading?: boolean;
+  /** Called with the form's data once the browser's validation passes. Omit to submit natively (e.g. to an `action`). */
+  onSubmit?: (data: FormData) => void | Promise<void>;
+  /** Under the submit button: provider buttons, a "Sign in" link. */
+  footer?: React.ReactNode;
+}
+/** The shell LoginForm, SignupForm and NewPasswordForm share: heading, your fields, error, submit button. */
+declare function AuthForm({ title, description, children, error, submitLabel, loading, onSubmit, footer, className, ...props }: AuthFormProps): React.JSX.Element;
 interface AuthFormBase extends Omit<React.ComponentProps<"form">, "onSubmit" | "title"> {
   title?: React.ReactNode;
   description?: React.ReactNode;
@@ -51,7 +68,7 @@ export interface LoginValues {
   /** Absent in "email-only" mode. */
   password?: string;
 }
-export interface LoginFormProps extends AuthFormBase {
+export interface LoginFormProps extends Omit<AuthFormBase, "children"> {
   /** Called with the entered values. Omit to let the form submit natively (e.g. to an `action`). */
   onSubmit?: (values: LoginValues) => void | Promise<void>;
   /** "email-only" drops the password field for magic-link or OTP flows (shadcn login-05). */
@@ -61,14 +78,17 @@ export interface LoginFormProps extends AuthFormBase {
   submitLabel?: React.ReactNode;
 }
 /** Email + password sign-in form with optional SSO buttons. Pair with AuthLayout. */
-declare function LoginForm({ title, description, onSubmit, mode, providers, onProviderClick, providersFirst, forgotPasswordHref, signupHref, submitLabel, loading, error, className, ...props }: LoginFormProps): React.JSX.Element;
+declare function LoginForm({ title, description, onSubmit, mode, providers, onProviderClick, providersFirst, forgotPasswordHref, signupHref, submitLabel, ...props }: LoginFormProps): React.JSX.Element;
 export interface SignupValues {
   name?: string;
   email: string;
   password: string;
 }
 export interface SignupFormProps extends AuthFormBase {
-  onSubmit?: (values: SignupValues) => void | Promise<void>;
+  /** `data` holds every field, including your own `children` fields. */
+  onSubmit?: (values: SignupValues, data: FormData) => void | Promise<void>;
+  /** Extra fields shown before the name field (e.g. a household name). Give each a `name`; read it from `data`. */
+  children?: React.ReactNode;
   /** Ask for a full name. Default true. */
   nameField?: boolean;
   /** Ask for the password twice; mismatches are reported before onSubmit. Default true. */
@@ -81,5 +101,21 @@ export interface SignupFormProps extends AuthFormBase {
   submitLabel?: React.ReactNode;
 }
 /** Account creation form: name, email, password (+ confirm), optional SSO. Pair with AuthLayout. */
-declare function SignupForm({ title, description, onSubmit, nameField, confirmPassword, passwordHint, minPasswordLength, providers, onProviderClick, providersFirst, loginHref, submitLabel, loading, error, className, ...props }: SignupFormProps): React.JSX.Element;
-export { AppleIcon, AuthLayout, GitHubIcon, GoogleIcon, LoginForm, SignupForm };
+declare function SignupForm({ title, description, onSubmit, children, nameField, confirmPassword, passwordHint, minPasswordLength, providers, onProviderClick, providersFirst, loginHref, submitLabel, ...props }: SignupFormProps): React.JSX.Element;
+export interface NewPasswordFormProps extends Omit<React.ComponentProps<"form">, "onSubmit" | "title" | "children">, Pick<AuthFormProps, "description" | "error" | "loading"> {
+  /** Default "Choose a new password". */
+  title?: React.ReactNode;
+  /** Called once both fields match. */
+  onSubmit?: (values: {
+    password: string;
+  }) => void | Promise<void>;
+  /** Minimum length enforced by the browser. Default 8. */
+  minPasswordLength?: number;
+  /** Hint under the password field. Default "At least N characters." */
+  passwordHint?: React.ReactNode;
+  /** Default "Save password". */
+  submitLabel?: React.ReactNode;
+}
+/** Password reset or first password: new password + confirm. Pair with AuthLayout. */
+declare function NewPasswordForm({ title, onSubmit, minPasswordLength, passwordHint, submitLabel, ...props }: NewPasswordFormProps): React.JSX.Element;
+export { AppleIcon, AuthForm, AuthLayout, GitHubIcon, GoogleIcon, LoginForm, NewPasswordForm, SignupForm };