harebear-ui 0.0.0-stage → 0.2.2

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

@@ -0,0 +1,63 @@
+"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
+/**
+* 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();
+	const lines = useHighlightedCode(code, highlight && language ? language : "text");
+	return /* @__PURE__ */ jsxs(CodeBlock, {
+		"data-slot": "code-snippet",
+		className,
+		...props,
+		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(CodeBlockContent, {
+			lineNumbers,
+			className: "pb-4.5",
+			children: lines.map((line, i) => /* @__PURE__ */ jsx(CodeBlockLine, { children: line }, i))
+		})]
+	});
+}
+/** Inline monospace span for commands and identifiers. */
+function InlineCode({ className, ...props }) {
+	return /* @__PURE__ */ jsx("code", {
+		"data-slot": "inline-code",
+		className: cn("rounded-[6px] bg-muted px-1.5 py-0.5 font-mono text-[12.5px]", className),
+		...props
+	});
+}
+/**
+* Typography for long-form and model output. Styles plain HTML children
+* (p, ul, ol, li, strong, a, code, pre, h1-h4, blockquote, table), so it works
+* with react-markdown or any HTML renderer.
+*/
+function Prose({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "prose",
+		className: cn("flex flex-col gap-3.5 text-[15px] leading-[1.65] 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),
+		...props
+	});
+}
+export { CodeSnippet, InlineCode, Prose };

package/dist/components/ai/conversation-list.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+export interface Conversation {
+  id: string;
+  title: string;
+}
+export interface ConversationGroup {
+  /** e.g. "Today", "Yesterday", "Previous 7 days". */
+  label: string;
+  items: Conversation[];
+}
+export interface ConversationListProps extends Omit<React.ComponentProps<"nav">, "onSelect"> {
+  groups: ConversationGroup[];
+  activeId?: string;
+  onSelect?: (id: string) => void;
+}
+/** Grouped list of chat threads for a sidebar. */
+declare function ConversationList({ groups, activeId, onSelect, className, ...props }: ConversationListProps): React.JSX.Element;
+export { ConversationList };

package/dist/components/ai/conversation-list.js

@@ -0,0 +1,30 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/ai/conversation-list.tsx
+/** Grouped list of chat threads for a sidebar. */
+function ConversationList({ groups, activeId, onSelect, className, ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"data-slot": "conversation-list",
+		"aria-label": "Conversations",
+		className: cn("flex flex-col gap-4.5", className),
+		...props,
+		children: groups.map((g) => /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-0.5",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "px-3 pb-1.5 text-xs font-medium text-muted-foreground",
+				children: g.label
+			}), g.items.map((c) => {
+				const active = c.id === activeId;
+				return /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-current": active ? "page" : void 0,
+					onClick: () => onSelect?.(c.id),
+					className: cn("w-full truncate rounded-md px-3 py-2.25 text-left font-medium text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/40", active && "bg-card text-foreground shadow-card hover:bg-card"),
+					children: c.title
+				}, c.id);
+			})]
+		}, g.label))
+	});
+}
+export { ConversationList };

package/dist/components/ai/model-picker.d.ts

@@ -0,0 +1,21 @@
+import { StatusTone } from "../admin/status.js";
+import * as React from "react";
+export interface ModelOption {
+  id: string;
+  /** Display name. Defaults to id. Rendered monospace. */
+  label?: string;
+  description?: React.ReactNode;
+  /** Availability dot. Default "success". */
+  status?: StatusTone;
+}
+export interface ModelPickerProps {
+  models: ModelOption[];
+  value: string;
+  onValueChange: (id: string) => void;
+  label?: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+}
+/** Pill button showing the active model with a status dot; opens a menu of models. */
+declare function ModelPicker({ models, value, onValueChange, label, className, disabled }: ModelPickerProps): React.JSX.Element;
+export { ModelPicker };

package/dist/components/ai/model-picker.js

@@ -0,0 +1,55 @@
+"use client";
+import { StatusDot } from "../admin/status.js";
+import { Button } from "../ui/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
+// src/components/ai/model-picker.tsx
+/** Pill button showing the active model with a status dot; opens a menu of models. */
+function ModelPicker({ models, value, onValueChange, label = "Model", className, disabled }) {
+	const current = models.find((m) => m.id === value);
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		disabled,
+		children: /* @__PURE__ */ jsxs(Button, {
+			variant: "outline",
+			size: "sm",
+			shape: "pill",
+			className: cn("gap-2 px-3", className),
+			children: [
+				/* @__PURE__ */ jsx(StatusDot, { tone: current?.status ?? "success" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "font-mono text-xs",
+					children: current?.label ?? value
+				}),
+				/* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-muted-foreground" })
+			]
+		})
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		align: "end",
+		className: "min-w-56",
+		children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: label }), models.map((m) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			onSelect: () => onValueChange(m.id),
+			className: "items-start gap-2.5",
+			children: [
+				/* @__PURE__ */ jsx(StatusDot, {
+					tone: m.status ?? "success",
+					className: "mt-1.5"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 flex-col",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "font-mono text-xs",
+						children: m.label ?? m.id
+					}), m.description && /* @__PURE__ */ jsx("span", {
+						className: "text-xs text-muted-foreground",
+						children: m.description
+					})]
+				}),
+				m.id === value && /* @__PURE__ */ jsx(CheckIcon, { className: "mt-0.5" })
+			]
+		}, m.id))]
+	})] });
+}
+export { ModelPicker };

package/dist/components/ai/prompt-input.d.ts

@@ -0,0 +1,27 @@
+import { Button } from "../ui/button.js";
+import * as React from "react";
+export interface PromptInputProps extends Omit<React.ComponentProps<"form">, "onSubmit" | "onChange"> {
+  value: string;
+  onValueChange: (value: string) => void;
+  /** Called with the trimmed text on Enter or the send button. Shift+Enter inserts a newline. */
+  onSubmit: (value: string) => void;
+  placeholder?: string;
+  /** While true, the send button becomes a stop button. */
+  loading?: boolean;
+  onStop?: () => void;
+  /** Shows a paperclip button. */
+  onAttach?: () => void;
+  /** Chips/toggles between the attach and send buttons, e.g. <PromptInputChip>. */
+  tools?: React.ReactNode;
+  /** Small text under the box, e.g. a disclaimer. */
+  footer?: React.ReactNode;
+  disabled?: boolean;
+  autoFocus?: boolean;
+}
+/** Chat composer: auto-growing textarea with attach, tool chips, and send/stop. */
+declare function PromptInput({ value, onValueChange, onSubmit, placeholder, loading, onStop, onAttach, tools, footer, disabled, autoFocus, className, ...props }: PromptInputProps): React.JSX.Element;
+/** Toggleable pill for the composer toolbar (web search, a knowledge source…). */
+declare function PromptInputChip({ active, className, ...props }: React.ComponentProps<typeof Button> & {
+  active?: boolean;
+}): React.JSX.Element;
+export { PromptInput, PromptInputChip };

package/dist/components/ai/prompt-input.js

@@ -0,0 +1,99 @@
+"use client";
+import { Button } from "../ui/button.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpIcon, PaperclipIcon, SquareIcon } from "lucide-react";
+// src/components/ai/prompt-input.tsx
+/** Chat composer: auto-growing textarea with attach, tool chips, and send/stop. */
+function PromptInput({ value, onValueChange, onSubmit, placeholder = "Send a message…", loading, onStop, onAttach, tools, footer, disabled, autoFocus, className, ...props }) {
+	const id = React.useId();
+	const canSend = value.trim().length > 0 && !disabled;
+	const submit = () => {
+		if (canSend && !loading) onSubmit(value.trim());
+	};
+	return /* @__PURE__ */ jsxs("form", {
+		"data-slot": "prompt-input",
+		className: cn("mx-auto flex w-full max-w-190 flex-col gap-2.5", className),
+		onSubmit: (e) => {
+			e.preventDefault();
+			submit();
+		},
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2 rounded-[calc(var(--radius-xl)*1.2)] bg-muted pt-3 pr-3 pb-2.5 pl-3.5 transition-shadow focus-within:ring-4 focus-within:ring-primary/12",
+			children: [
+				/* @__PURE__ */ jsx("label", {
+					htmlFor: id,
+					className: "sr-only",
+					children: "Message"
+				}),
+				/* @__PURE__ */ jsx("textarea", {
+					id,
+					rows: 2,
+					value,
+					disabled,
+					autoFocus,
+					placeholder,
+					onChange: (e) => onValueChange(e.target.value),
+					onKeyDown: (e) => {
+						if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+							e.preventDefault();
+							submit();
+						}
+					},
+					className: "field-sizing-content max-h-60 min-h-13 w-full resize-none border-0 bg-transparent px-1.5 py-1 text-[15px] leading-normal text-foreground outline-none placeholder:text-muted-foreground"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1.5",
+					children: [
+						onAttach && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon-sm",
+							shape: "pill",
+							"aria-label": "Attach file",
+							onClick: onAttach,
+							children: /* @__PURE__ */ jsx(PaperclipIcon, {})
+						}),
+						tools,
+						/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+						loading && onStop ? /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							size: "icon",
+							shape: "pill",
+							className: "size-9",
+							"aria-label": "Stop generating",
+							onClick: onStop,
+							children: /* @__PURE__ */ jsx(SquareIcon, { className: "fill-current" })
+						}) : /* @__PURE__ */ jsx(Button, {
+							type: "submit",
+							size: "icon",
+							shape: "pill",
+							className: "size-9",
+							"aria-label": "Send message",
+							disabled: !canSend || loading,
+							children: /* @__PURE__ */ jsx(ArrowUpIcon, {})
+						})
+					]
+				})
+			]
+		}), footer && /* @__PURE__ */ jsx("p", {
+			className: "text-center text-xs text-muted-foreground",
+			children: footer
+		})]
+	});
+}
+/** Toggleable pill for the composer toolbar (web search, a knowledge source…). */
+function PromptInputChip({ active, className, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		size: "sm",
+		shape: "pill",
+		variant: active ? "soft" : "outline",
+		"aria-pressed": active,
+		className: cn("h-8", className),
+		...props
+	});
+}
+export { PromptInput, PromptInputChip };

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