harebear-ui 0.1.0 → 0.2.2

package/AGENTS.md

@@ -6,14 +6,14 @@ Consumers get compiled ESM + types from `dist/` and a Tailwind stylesheet (`hare
 
 ## Commands
 
-| Command                  | What it does                                                                                                  |
-| ------------------------ | ------------------------------------------------------------------------------------------------------------- |
-| `pnpm dev`               | Playground at http://localhost:5199 with the four reference screens (`#admin`, `#chat`, `#records`, `#home`). |
-| `pnpm check`             | Everything CI runs: lint, typecheck, tests, build, publint, attw. Run before you say you're done.             |
-| `pnpm test`              | Vitest. `pnpm test -u` updates the export snapshot after an intended API change.                              |
-| `pnpm gen`               | Regenerate `src/index.ts` from component export lists. Run after adding or renaming exports.                  |
-| `pnpm format`            | Biome format + safe fixes.                                                                                    |
-| `pnpm shadcn add <name>` | Pull a new shadcn component into `src/components/ui/`.                                                        |
+| Command                  | What it does                                                                                      |
+| ------------------------ | ------------------------------------------------------------------------------------------------- |
+| `pnpm dev`               | Playground at http://localhost:5199 with the reference screens.                                   |
+| `pnpm check`             | Everything CI runs: lint, typecheck, tests, build, publint, attw. Run before you say you're done. |
+| `pnpm test`              | Vitest. `pnpm test -u` updates the export snapshot after an intended API change.                  |
+| `pnpm gen`               | Regenerate `src/index.ts` from component export lists. Run after adding or renaming exports.      |
+| `pnpm format`            | Biome format + safe fixes.                                                                        |
+| `pnpm shadcn add <name>` | Pull a new shadcn component into `src/components/ui/`.                                            |
 
 ## Layout
 
@@ -26,9 +26,10 @@ src/
   components/theme/     ThemeProvider, ThemeToggle, ThemeScript.
   components/admin/     Layout and dashboard composites (AppShell, StatCard, PageHeader...).
   components/data/      DataTable, TrendChart, Sparkline, BarList, StatusBars.
-  components/ai/        Chat composites (ChatThread, ChatMessage, PromptInput, ModelPicker...).
+  components/ai/        Chat composites (ChatThread, ChatMessage, PromptInput, ModelPicker, CodeSnippet...).
+  components/auth/      AuthLayout, LoginForm, SignupForm (parameterized shadcn login/signup blocks).
   hooks/, lib/utils.ts  Shared hooks and cn().
-playground/screens/     Reference screens that use only public exports. They are the visual spec and usage examples.
+playground/screens/     Reference screens that use only public exports (#admin, #chat, #records, #home, #auth, #catalog). Visual spec and usage examples.
 docs/COMPONENTS.md      Consumer-facing catalog. Shipped. Test-enforced to mention every export.
 llms.txt, skills/       Consumer-facing agent docs. Shipped.
 bin/harebear-ui.mjs     `npx harebear-ui init|docs` for consuming apps.
@@ -37,7 +38,7 @@ test/                   Vitest: API snapshot, docs coverage, token integrity, be
 
 ## Adding a component
 
-1. Pick the folder by purpose (`admin`, `data`, `ai`; `ui` only for shadcn primitives).
+1. Pick the folder by purpose (`admin`, `data`, `ai`, `auth`; `ui` only for shadcn primitives).
 2. Follow the existing files: `"use client"` first line, named function component, props interface exported as `<Name>Props`, `data-slot="<kebab-name>"` on the root, `className` merged last with `cn()`, rest props spread on the root.
 3. Style only with tokens (`bg-card`, `text-muted-foreground`, `bg-primary-soft`, `shadow-card`, `rounded-xl`). No hex, no palette colors. Status takes a `tone` (`success | warning | danger | info | neutral`).
 4. `pnpm gen`, then add the component to `docs/COMPONENTS.md` (the docs test fails otherwise) and to the index in `llms.txt`.
@@ -50,6 +51,8 @@ test/                   Vitest: API snapshot, docs coverage, token integrity, be
 - Keep upstream file structure so `pnpm shadcn add <name> -o` diffs stay readable. Change class strings, add variants; avoid restructuring.
 - shadcn sometimes rewrites the utils import to `from "cn"`. It must be `from "@/lib/utils"`. Remove any `cn` dependency it adds. Same for `next-themes` (sonner uses our `useTheme`).
 - New shadcn files need `"use client"` as the first line.
+- Restyle new primitives to harebear's look: form controls are 40px `rounded-md bg-muted border-transparent` with `focus-visible:border-primary focus-visible:bg-card focus-visible:ring-4 focus-visible:ring-primary/15`; replace `border-input` / `dark:bg-input/30` patterns; selected states use `bg-primary-soft`.
+- The package includes every `registry:ui` item. Check for gaps with `pnpm shadcn list @shadcn --json` and compare names against `src/components/ui/`.
 
 ## Gotchas
 

package/dist/components/ai/chat.js

@@ -81,6 +81,7 @@ function MessageActions({ copyText, onRegenerate, onFeedback, feedback, classNam
 		...props,
 		children: [
 			copyText !== void 0 && /* @__PURE__ */ jsx(Button, {
+				type: "button",
 				variant: "ghost",
 				size: "icon-sm",
 				"aria-label": "Copy response",
@@ -88,6 +89,7 @@ function MessageActions({ copyText, onRegenerate, onFeedback, feedback, classNam
 				children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
 			}),
 			onRegenerate && /* @__PURE__ */ jsx(Button, {
+				type: "button",
 				variant: "ghost",
 				size: "icon-sm",
 				"aria-label": "Regenerate",
@@ -95,6 +97,7 @@ function MessageActions({ copyText, onRegenerate, onFeedback, feedback, classNam
 				children: /* @__PURE__ */ jsx(RefreshCwIcon, {})
 			}),
 			onFeedback && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+				type: "button",
 				variant: "ghost",
 				size: "icon-sm",
 				"aria-label": "Good response",
@@ -103,6 +106,7 @@ function MessageActions({ copyText, onRegenerate, onFeedback, feedback, classNam
 				onClick: () => onFeedback("up"),
 				children: /* @__PURE__ */ jsx(ThumbsUpIcon, {})
 			}), /* @__PURE__ */ jsx(Button, {
+				type: "button",
 				variant: "ghost",
 				size: "icon-sm",
 				"aria-label": "Bad response",

package/dist/components/ai/code-block.d.ts

@@ -1,15 +1,21 @@
+import { CodeBlock } from "../ui/code-block.js";
 import * as React from "react";
-export interface CodeBlockProps extends Omit<React.ComponentProps<"div">, "children"> {
+export interface CodeSnippetProps extends Omit<React.ComponentProps<typeof CodeBlock>, "children"> {
   code: string;
-  /** Label shown top-left, e.g. "bash". */
+  /** Language for the label and syntax highlighting, e.g. "bash", "tsx". Unknown languages render plain. */
   language?: string;
-  /** Pre-highlighted content (e.g. from shiki). Falls back to plain `code`. */
-  children?: React.ReactNode;
+  /** Turn syntax highlighting off. Default on. */
+  highlight?: boolean;
+  lineNumbers?: boolean;
   /** Hide the copy button. */
   hideCopy?: boolean;
 }
-/** Code panel with language label and copy button. No highlighter bundled; pass highlighted children if you have one. */
-declare function CodeBlock({ code, language, children, hideCopy, className, ...props }: CodeBlockProps): React.JSX.Element;
+/**
+ * One-prop code panel: language label, copy button, shiki highlighting (loaded
+ * lazily per language). Built on the CodeBlock primitives; use those directly
+ * for diffs, highlighted lines, or custom headers.
+ */
+declare function CodeSnippet({ code, language, highlight, lineNumbers, hideCopy, className, ...props }: CodeSnippetProps): React.JSX.Element;
 /** Inline monospace span for commands and identifiers. */
 declare function InlineCode({ className, ...props }: React.ComponentProps<"code">): React.JSX.Element;
 /**
@@ -18,4 +24,4 @@ declare function InlineCode({ className, ...props }: React.ComponentProps<"code"
  * with react-markdown or any HTML renderer.
  */
 declare function Prose({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-export { CodeBlock, InlineCode, Prose };
+export { CodeSnippet, InlineCode, Prose };

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

@@ -1,32 +1,42 @@
 "use client";
 import { Button } from "../ui/button.js";
+import { CodeBlock, CodeBlockContent, CodeBlockHeader, CodeBlockLine, CodeBlockTitle } from "../ui/code-block.js";
 import { useCopyToClipboard } from "../../hooks/use-copy-to-clipboard.js";
+import { useHighlightedCode } from "../../hooks/use-highlighted-code.js";
 import { cn } from "../../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, CopyIcon } from "lucide-react";
 // src/components/ai/code-block.tsx
-/** Code panel with language label and copy button. No highlighter bundled; pass highlighted children if you have one. */
-function CodeBlock({ code, language, children, hideCopy, className, ...props }) {
+/**
+* One-prop code panel: language label, copy button, shiki highlighting (loaded
+* lazily per language). Built on the CodeBlock primitives; use those directly
+* for diffs, highlighted lines, or custom headers.
+*/
+function CodeSnippet({ code, language, highlight = true, lineNumbers, hideCopy, className, ...props }) {
 	const { copied, copy } = useCopyToClipboard();
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "code-block",
-		className: cn("overflow-hidden rounded-lg bg-muted", className),
+	const lines = useHighlightedCode(code, highlight && language ? language : "text");
+	return /* @__PURE__ */ jsxs(CodeBlock, {
+		"data-slot": "code-snippet",
+		className,
 		...props,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex min-h-10 items-center justify-between pt-2 pr-2 pl-4.5",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "font-mono text-xs font-medium text-muted-foreground",
+		children: [(language || !hideCopy) && /* @__PURE__ */ jsxs(CodeBlockHeader, {
+			className: "min-h-10",
+			children: [/* @__PURE__ */ jsx(CodeBlockTitle, {
+				className: "font-mono text-xs text-muted-foreground",
 				children: language
 			}), !hideCopy && /* @__PURE__ */ jsxs(Button, {
+				type: "button",
 				variant: "ghost",
 				size: "sm",
+				className: "ms-auto",
 				onClick: () => copy(code),
 				"aria-label": "Copy code",
 				children: [copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {}), copied ? "Copied" : "Copy"]
 			})]
-		}), /* @__PURE__ */ jsx("pre", {
-			className: "m-0 overflow-x-auto px-4.5 pt-1 pb-4.5 font-mono text-[13px] leading-[1.7]",
-			children: /* @__PURE__ */ jsx("code", { children: children ?? code })
+		}), /* @__PURE__ */ jsx(CodeBlockContent, {
+			lineNumbers,
+			className: "pb-4.5",
+			children: lines.map((line, i) => /* @__PURE__ */ jsx(CodeBlockLine, { children: line }, i))
 		})]
 	});
 }
@@ -50,4 +60,4 @@ function Prose({ className, ...props }) {
 		...props
 	});
 }
-export { CodeBlock, InlineCode, Prose };
+export { CodeSnippet, InlineCode, Prose };

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

@@ -0,0 +1,85 @@
+import * as React from "react";
+export interface AuthLayoutProps {
+  /**
+   * - "centered": form in a card, centered on the page (shadcn login-01 / signup-01)
+   * - "muted": same on a muted page background (login-03 / signup-03)
+   * - "split": two columns, form left and a cover image right; no card (login-02 / signup-02)
+   * - "card-image": one wide card with the form and an image side by side (login-04 / signup-04)
+   */
+  variant?: "centered" | "muted" | "split" | "card-image";
+  /** Logo/product name shown above the form (top-left in "split"). Usually <AppBrand />. */
+  brand?: React.ReactNode;
+  /** Cover image for "split" and "card-image". */
+  image?: {
+    src: string;
+    alt: string;
+  };
+  /** Small print under the form, e.g. terms links. */
+  footer?: React.ReactNode;
+  className?: string;
+  children: React.ReactNode;
+}
+/** Full-page wrapper for sign-in and sign-up screens. Put LoginForm or SignupForm inside. */
+declare function AuthLayout({ variant, brand, image, footer, className, children }: AuthLayoutProps): React.JSX.Element;
+export interface AuthProvider {
+  /** Passed to onProviderClick, e.g. "github". */
+  id: string;
+  /** Display name, e.g. "GitHub". */
+  label: string;
+  icon?: React.ReactNode;
+}
+/** GitHub mark, for AuthProvider icons. */
+declare function GitHubIcon(props: React.ComponentProps<"svg">): React.JSX.Element;
+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;
+interface AuthFormBase extends Omit<React.ComponentProps<"form">, "onSubmit" | "title"> {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  /** Social/SSO buttons shown under the main button. */
+  providers?: AuthProvider[];
+  onProviderClick?: (id: string) => void;
+  /** Shows a spinner on the submit button and disables the form. */
+  loading?: boolean;
+  /** Form-level error, e.g. "Invalid email or password". */
+  error?: React.ReactNode;
+  /** Put the provider buttons above the email form instead of below. */
+  providersFirst?: boolean;
+}
+export interface LoginValues {
+  email: string;
+  /** Absent in "email-only" mode. */
+  password?: string;
+}
+export interface LoginFormProps extends AuthFormBase {
+  /** 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). */
+  mode?: "password" | "email-only";
+  forgotPasswordHref?: string;
+  signupHref?: string;
+  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;
+export interface SignupValues {
+  name?: string;
+  email: string;
+  password: string;
+}
+export interface SignupFormProps extends AuthFormBase {
+  onSubmit?: (values: SignupValues) => void | Promise<void>;
+  /** Ask for a full name. Default true. */
+  nameField?: boolean;
+  /** Ask for the password twice; mismatches are reported before onSubmit. Default true. */
+  confirmPassword?: boolean;
+  /** Hint under the password field. */
+  passwordHint?: React.ReactNode;
+  /** Minimum password length enforced by the browser. Default 8. */
+  minPasswordLength?: number;
+  loginHref?: string;
+  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 };

package/dist/components/auth/auth.js

@@ -0,0 +1,325 @@
+"use client";
+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 { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { 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 }) {
+	const img = image && /* @__PURE__ */ jsx("img", {
+		src: image.src,
+		alt: image.alt,
+		className: "absolute inset-0 size-full object-cover dark:brightness-[0.6] dark:grayscale-[0.3]"
+	});
+	const small = footer && /* @__PURE__ */ jsx("div", {
+		className: "text-center text-xs text-balance text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-foreground",
+		children: footer
+	});
+	if (variant === "split") return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "auth-layout",
+		"data-variant": variant,
+		className: cn("grid min-h-svh lg:grid-cols-2", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4 p-6 md:p-10",
+			children: [brand && /* @__PURE__ */ jsx("div", {
+				className: "flex justify-center md:justify-start",
+				children: brand
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex flex-1 items-center justify-center",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex w-full max-w-sm flex-col gap-6",
+					children: [children, small]
+				})
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "relative hidden bg-muted lg:block",
+			children: img
+		})]
+	});
+	const wide = variant === "card-image";
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "auth-layout",
+		"data-variant": variant,
+		className: cn("flex min-h-svh flex-col items-center justify-center p-6 md:p-10", variant === "muted" && "bg-muted", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("flex w-full flex-col gap-6", wide ? "max-w-sm md:max-w-4xl" : "max-w-sm"),
+			children: [
+				brand && /* @__PURE__ */ jsx("div", {
+					className: "flex justify-center",
+					children: brand
+				}),
+				wide ? /* @__PURE__ */ jsx(Card, {
+					className: "overflow-hidden py-0",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "grid md:grid-cols-2",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "p-6 md:p-8",
+							children
+						}), /* @__PURE__ */ jsx("div", {
+							className: "relative hidden min-h-80 bg-muted md:block",
+							children: img
+						})]
+					})
+				}) : /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { children }) }),
+				small
+			]
+		})
+	});
+}
+function ProviderButtons({ providers, verb, onProviderClick, disabled }) {
+	const compact = providers.length >= 3 && providers.every((p) => p.icon);
+	return /* @__PURE__ */ jsx(Field, {
+		className: cn(compact && "grid gap-3"),
+		style: compact ? { gridTemplateColumns: `repeat(${providers.length}, minmax(0, 1fr))` } : void 0,
+		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}`]
+		}, p.id))
+	});
+}
+function BrandSvg({ d, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			d,
+			fill: "currentColor"
+		})
+	});
+}
+/** GitHub mark, for AuthProvider icons. */
+function GitHubIcon(props) {
+	return /* @__PURE__ */ jsx(BrandSvg, {
+		d: "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12",
+		...props
+	});
+}
+/** Google "G" mark, for AuthProvider icons. */
+const GOOGLE_PATH = "M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z";
+function GoogleIcon(props) {
+	return /* @__PURE__ */ jsx(BrandSvg, {
+		d: GOOGLE_PATH,
+		...props
+	});
+}
+const APPLE_PATH = "M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701";
+/** Apple mark, for AuthProvider icons. */
+function AppleIcon(props) {
+	return /* @__PURE__ */ jsx(BrandSvg, {
+		d: APPLE_PATH,
+		...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
+		})]
+	});
+}
+function readForm(form) {
+	return Object.fromEntries([...new FormData(form).entries()].map(([k, v]) => [k, typeof v === "string" ? v : ""]));
+}
+/** 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 }) {
+	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
+	});
+	return /* @__PURE__ */ jsx("form", {
+		"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,
+		...props,
+		children: /* @__PURE__ */ jsxs(FieldGroup, { children: [
+			/* @__PURE__ */ jsx(Header, {
+				title,
+				description: desc
+			}),
+			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
+			})] }),
+			!emailOnly && /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center",
+				children: [/* @__PURE__ */ jsx(FieldLabel, {
+					htmlFor: `${id}-password`,
+					children: "Password"
+				}), forgotPasswordHref && /* @__PURE__ */ jsx("a", {
+					href: forgotPasswordHref,
+					className: "ms-auto text-sm text-muted-foreground underline-offset-4 hover:text-foreground hover:underline",
+					children: "Forgot password?"
+				})]
+			}), /* @__PURE__ */ jsx(Input, {
+				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"
+				})]
+			})
+		] })
+	});
+}
+/** 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 }) {
+	const id = React.useId();
+	const sso = providers.length > 0 && /* @__PURE__ */ jsx(ProviderButtons, {
+		providers,
+		verb: "Sign up",
+		onProviderClick,
+		disabled: loading
+	});
+	return /* @__PURE__ */ jsx("form", {
+		"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,
+		...props,
+		children: /* @__PURE__ */ jsxs(FieldGroup, { children: [
+			/* @__PURE__ */ jsx(Header, {
+				title,
+				description
+			}),
+			providersFirst && sso,
+			providersFirst && sso && /* @__PURE__ */ jsx(FieldSeparator, { children: "Or sign up with email" }),
+			nameField && /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(FieldLabel, {
+				htmlFor: `${id}-name`,
+				children: "Full name"
+			}), /* @__PURE__ */ jsx(Input, {
+				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
+			})] }),
+			/* @__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"
+				})]
+			})
+		] })
+	});
+}
+export { AppleIcon, AuthLayout, GitHubIcon, GoogleIcon, LoginForm, SignupForm };

package/dist/components/theme/theme-toggle.js

@@ -9,6 +9,7 @@ function ThemeToggle(props) {
 	const { resolvedMode, toggleMode } = useTheme();
 	const dark = resolvedMode === "dark";
 	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
 		variant: "ghost",
 		size: "icon",
 		"aria-label": dark ? "Switch to light mode" : "Switch to dark mode",

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

@@ -0,0 +1,24 @@
+import { Button } from "./button.js";
+import * as React from "react";
+import { VariantProps } from "class-variance-authority";
+declare const attachmentVariants: (props?: ({
+  size?: "default" | "sm" | "xs" | null | undefined;
+  orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Attachment({ className, state, size, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof attachmentVariants> & {
+  state?: "idle" | "uploading" | "processing" | "error" | "done";
+}): React.JSX.Element;
+declare const attachmentMediaVariants: (props?: ({
+  variant?: "icon" | "image" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function AttachmentMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof attachmentMediaVariants>): React.JSX.Element;
+declare function AttachmentContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AttachmentTitle({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AttachmentDescription({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AttachmentActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AttachmentAction({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function AttachmentTrigger({ className, asChild, type, ...props }: React.ComponentProps<"button"> & {
+  asChild?: boolean;
+}): React.JSX.Element;
+declare function AttachmentGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger };