@hoardodile/ui 0.0.0

package/src/components/confirm-by-typing-dialog.tsx

@@ -0,0 +1,130 @@
+import { AppDialog } from "@hoardodile/ui/components/app-dialog"
+import { Button } from "@hoardodile/ui/components/button"
+import { Input } from "@hoardodile/ui/components/input"
+import { type ReactNode } from "react"
+import { Trans, useTranslation } from "react-i18next"
+
+export type ConfirmByTypingDialogProps = Readonly<{
+	open: boolean
+	onOpenChange(open: boolean): void
+	title: string
+	description: string
+	/** Exact string the user must type to enable the confirm button. */
+	expectedInput: string
+	/**
+	 * The target name rendered in bold inside the one-line confirm prompt.
+	 */
+	targetName: string
+	confirmLabel: string
+	pendingLabel: string
+	pending: boolean
+	/** When true the dialog takes the danger register (destructive header
+	    ink) and the confirm button uses the destructive variant. */
+	destructive?: boolean
+	typed: string
+	onTypedChange(value: string): void
+	onConfirm(): void
+	/**
+	 * The one-line confirm prompt (rendered below the description) —
+	 * defaults to the shared "Type <name>…</name> to confirm" copy with
+	 * the target name bolded.
+	 */
+	prompt?: ReactNode
+	/** Cancel button label — defaults to the shared "Cancel" copy. */
+	cancelLabel?: ReactNode
+	inputTestId?: string
+	confirmTestId?: string
+	/** Forwarded to the dialog content (e.g. theme scope classes). */
+	contentClassName?: string
+}>
+
+/**
+ * Shared "type the name to confirm" dialog for any operation that
+ * requires the user to re-read a target name and type it back. The
+ * type-to-confirm anatomy: the consequence reads in the header
+ * description, the target name sits in bold inside the one-line prompt
+ * (`Type “harbor” to confirm`), and the confirm stays gated until the
+ * input matches. The prompt is rendered uniformly; only the bold target
+ * name varies.
+ */
+export function ConfirmByTypingDialog(props: ConfirmByTypingDialogProps) {
+	const {
+		open,
+		onOpenChange,
+		title,
+		description,
+		expectedInput,
+		confirmLabel,
+		pendingLabel,
+		pending,
+		destructive = true,
+		typed,
+		onTypedChange,
+		onConfirm,
+		targetName,
+		prompt,
+		cancelLabel,
+		inputTestId,
+		confirmTestId,
+		contentClassName,
+	} = props
+	const { t } = useTranslation("ui", { useSuspense: false })
+	const canConfirm = !pending && typed === expectedInput
+	function handleOpenChange(next: boolean) {
+		if (pending && !next) return
+		onOpenChange(next)
+	}
+	return (
+		<AppDialog
+			open={open}
+			onOpenChange={handleOpenChange}
+			title={title}
+			description={description}
+			danger={destructive}
+			contentClassName={contentClassName}
+			footer={
+				<>
+					<Button
+						variant="secondary"
+						onClick={() => onOpenChange(false)}
+						disabled={pending}
+					>
+						{cancelLabel ?? t("dialog.cancel")}
+					</Button>
+					<Button
+						variant={destructive ? "destructive" : "default"}
+						disabled={!canConfirm}
+						onClick={onConfirm}
+						data-testid={confirmTestId}
+					>
+						{pending ? pendingLabel : confirmLabel}
+					</Button>
+				</>
+			}
+		>
+			<div className="flex flex-col gap-1.5">
+				<span className="text-xs text-muted-foreground">
+					{prompt ?? (
+						<Trans
+							ns="ui"
+							i18nKey="confirmByTyping.prompt"
+							values={{ name: targetName }}
+							components={{
+								name: (
+									<span className="font-semibold text-foreground" />
+								),
+							}}
+						/>
+					)}
+				</span>
+				<Input
+					autoFocus
+					value={typed}
+					onChange={(e) => onTypedChange(e.target.value)}
+					autoComplete="off"
+					data-testid={inputTestId}
+				/>
+			</div>
+		</AppDialog>
+	)
+}

package/src/components/confirm-dialog.test.tsx

@@ -0,0 +1,39 @@
+import { screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { describe, expect, it, vi } from "vitest"
+import { testI18n, renderWithI18n } from "../test/i18n"
+import { ConfirmDialog } from "./confirm-dialog"
+
+function renderDialog(
+	overrides: Partial<Parameters<typeof ConfirmDialog>[0]> = {},
+) {
+	const onOpenChange = vi.fn()
+	const onConfirm = vi.fn()
+	renderWithI18n(
+		<ConfirmDialog
+			open
+			onOpenChange={onOpenChange}
+			title="Title"
+			confirmLabel="Confirm"
+			isPending={false}
+			onConfirm={onConfirm}
+			{...overrides}
+		/>,
+	)
+	return { onOpenChange, onConfirm }
+}
+
+describe("ConfirmDialog", () => {
+	it("defaults the cancel button to the shared cancel copy", async () => {
+		const { onOpenChange } = renderDialog()
+		await userEvent.click(screen.getByRole("button", { name: "Cancel" }))
+		expect(onOpenChange).toHaveBeenCalledWith(false)
+	})
+
+	it("uses the localized cancel copy in another language", async () => {
+		await testI18n.changeLanguage("zh")
+		renderDialog()
+		expect(screen.getByRole("button", { name: "取消" })).toBeInTheDocument()
+		await testI18n.changeLanguage("en")
+	})
+})

package/src/components/confirm-dialog.tsx

@@ -0,0 +1,98 @@
+import { AppDialog } from "@hoardodile/ui/components/app-dialog"
+import { Button } from "@hoardodile/ui/components/button"
+import { type ReactNode } from "react"
+import { useTranslation } from "react-i18next"
+
+export type ConfirmDialogProps = Readonly<{
+	open: boolean
+	onOpenChange: (open: boolean) => void
+	title: ReactNode
+	description?: ReactNode
+	body?: ReactNode
+	confirmLabel: ReactNode
+	pendingLabel?: ReactNode
+	/** Cancel button label; defaults to the shared "Cancel" copy. */
+	cancelLabel?: ReactNode
+	isPending: boolean
+	destructive?: boolean
+	confirmDisabled?: boolean
+	onConfirm: () => void
+	confirmTestId?: string
+	cancelTestId?: string
+	contentClassName?: string
+	overlayClassName?: string
+	contentMotion?: "default" | "minimal"
+	suppressAutoFocus?: boolean
+	/** When true, closing while pending is blocked. Defaults to true. */
+	lockWhilePending?: boolean
+}>
+
+/**
+ * Cancel + primary action dialog. Disables and (by default) blocks
+ * dismissal while `isPending` so a user does not double-submit a
+ * destructive action.
+ */
+export function ConfirmDialog(props: ConfirmDialogProps) {
+	const {
+		open,
+		onOpenChange,
+		title,
+		description,
+		body,
+		confirmLabel,
+		pendingLabel,
+		cancelLabel,
+		isPending,
+		destructive = false,
+		confirmDisabled = false,
+		onConfirm,
+		confirmTestId,
+		cancelTestId,
+		contentClassName,
+		overlayClassName,
+		contentMotion,
+		suppressAutoFocus,
+		lockWhilePending = true,
+	} = props
+	const { t } = useTranslation("ui", { useSuspense: false })
+	function handleOpenChange(next: boolean) {
+		if (lockWhilePending && isPending && !next) return
+		onOpenChange(next)
+	}
+	const footer = (
+		<>
+			<Button
+				variant="secondary"
+				onClick={() => handleOpenChange(false)}
+				disabled={isPending}
+				data-testid={cancelTestId}
+			>
+				{cancelLabel ?? t("dialog.cancel")}
+			</Button>
+			<Button
+				variant={destructive ? "destructive" : "default"}
+				onClick={onConfirm}
+				disabled={isPending || confirmDisabled}
+				data-testid={confirmTestId}
+			>
+				{isPending && pendingLabel !== undefined ? pendingLabel : confirmLabel}
+			</Button>
+		</>
+	)
+	return (
+		<AppDialog
+			open={open}
+			onOpenChange={handleOpenChange}
+			title={title}
+			description={description}
+			danger={destructive}
+			footer={footer}
+			contentClassName={contentClassName}
+			overlayClassName={overlayClassName}
+			contentMotion={contentMotion}
+			suppressAutoFocus={suppressAutoFocus}
+		>
+			{body}
+		</AppDialog>
+	)
+}

package/src/components/count-badge.tsx

@@ -0,0 +1,23 @@
+import { cn } from "@hoardodile/ui/lib/utils"
+
+export type CountBadgeProps = {
+	readonly count: number
+	readonly className?: string
+}
+
+/**
+ * Count badge — the inverted 16px pill worn by buttons to show how many
+ * filters are active, how many documents are pinned, etc.
+ */
+export function CountBadge(props: CountBadgeProps) {
+	return (
+		<span
+			className={cn(
+				"flex size-4 items-center justify-center rounded-full bg-foreground text-tiny text-background",
+				props.className,
+			)}
+		>
+			{props.count}
+		</span>
+	)
+}

package/src/components/dialog.tsx

@@ -0,0 +1,315 @@
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+import { useTranslation } from "react-i18next"
+
+import { cn } from "@hoardodile/ui/lib/utils"
+import { Button } from "@hoardodile/ui/components/button"
+import { useMobileBackToClose } from "@hoardodile/ui/hooks/useMobileBackToClose"
+import { Cross } from "@hoardodile/ui/icons/marks"
+
+function Dialog({
+  open,
+  defaultOpen,
+  onOpenChange,
+  ...props
+}: Omit<DialogPrimitive.Root.Props, "onOpenChange"> & {
+  /**
+   * `eventDetails` is absent for closes triggered by the mobile back
+   * gesture (a synthetic close with no underlying Base UI event).
+   */
+  onOpenChange?: (
+    open: boolean,
+    eventDetails?: DialogPrimitive.Root.ChangeEventDetails,
+  ) => void
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(
+    defaultOpen ?? false,
+  )
+  const isControlled = open !== undefined
+  const currentOpen = isControlled ? open : uncontrolledOpen
+  function handleOpenChange(
+    next: boolean,
+    eventDetails?: DialogPrimitive.Root.ChangeEventDetails,
+  ) {
+    if (!isControlled) setUncontrolledOpen(next)
+    onOpenChange?.(next, eventDetails)
+  }
+  useMobileBackToClose(currentOpen, handleOpenChange)
+  return (
+    <DialogPrimitive.Root
+      data-slot="dialog"
+      open={currentOpen}
+      onOpenChange={handleOpenChange}
+      {...props}
+    />
+  )
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        // The dialog layer: a static whisper-of-ink scrim plus
+        // backdrop blur — part of the surface definition, not motion.
+        "fixed inset-0 isolate z-50 bg-foreground/5 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  overlayClassName,
+  contentMotion = "default",
+  ...props
+}: DialogPrimitive.Popup.Props &
+  React.RefAttributes<HTMLDivElement> & {
+    showCloseButton?: boolean
+    /** Merged into {@link DialogOverlay}. Use to drop backdrop blur over heavy GPU layers (e.g. WebGL). */
+    overlayClassName?: string
+    /**
+     * `minimal` uses fade-only enter/exit (no slide/zoom) to reduce jank
+     * when opening over canvas/video or other expensive surfaces.
+     */
+    contentMotion?: "default" | "minimal"
+  }) {
+  const { t } = useTranslation("ui", { useSuspense: false })
+  // Auto-wrap "loose" body children (anything that is not a DialogHeader
+  // or DialogFooter) inside a DialogBody. This guarantees a single
+  // scroll container — historically callers relied on DialogContent
+  // itself scrolling and added their own nested `overflow-y-auto`
+  // wrappers, which produced a confusing two-scrollbar behaviour on
+  // touch devices. With a single inner scroller, header/footer stay
+  // pinned and only the middle region scrolls on every viewport.
+  const arranged = arrangeDialogChildren(children)
+  const motionClasses =
+    contentMotion === "minimal"
+      ? "data-ending-style:opacity-0 data-starting-style:opacity-0"
+      : cn(
+          "data-ending-style:translate-y-10 data-ending-style:opacity-0 data-starting-style:translate-y-10 data-starting-style:opacity-0",
+          // ≥ sm the popup is centred with -translate-y-1/2, so the
+          // starting/ending styles must keep that offset (zoom + fade
+          // only, no slide) instead of clobbering it with translate-y-0.
+          "sm:data-ending-style:-translate-y-1/2 sm:data-ending-style:scale-95 sm:data-starting-style:-translate-y-1/2 sm:data-starting-style:scale-95"
+        )
+  return (
+    <DialogPortal>
+      <DialogOverlay className={overlayClassName} />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          // The floating-card anatomy: `bg-card`
+          // hairline-bordered surface with the system's one deep shadow.
+          // Mobile: bottom sheet occupying most of the viewport so edit
+          // forms have room to breathe. The component never scrolls
+          // itself; only the inner DialogBody does. Header/body/footer
+          // parts are held apart by the card's section gap
+          // (`gap-4` between the header document, the body and the
+          // hairline footer).
+          "fixed z-50 flex flex-col gap-4 bg-card text-sm text-card-foreground shadow-dialog outline-hidden transition duration-200 ease-in-out",
+          "inset-x-0 bottom-0 max-h-[85svh] overflow-hidden rounded-t-2xl rounded-b-none border border-b-0 border-border",
+          motionClasses,
+          // ≥ sm: centred modal, allow up to 90vh.
+          "sm:inset-x-auto sm:bottom-auto sm:top-1/2 sm:left-1/2 sm:w-full sm:max-w-md sm:max-h-[90vh] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-2xl",
+          className
+        )}
+        {...props}
+      >
+        {arranged}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="absolute top-3 right-3 z-20 flex size-6 items-center justify-center rounded-md text-muted-foreground transition-colors duration-150 hover:bg-muted hover:text-foreground"
+          >
+            <Cross className="size-3" />
+            <span className="sr-only">{t("aria.close")}</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn(
+        // The header document: the card's `p-5`
+        // rhythm — 20px top and sides, no bottom padding — with the
+        // eyebrow, title row and description stacked tight; the section
+        // gap below separates it from the body.
+        "flex shrink-0 flex-col bg-card px-5 pt-5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * Scrolling body region for dialogs. The dialog itself never scrolls —
+ * only this element does — so touch users always interact with one
+ * obvious scroll surface. The card's `p-5` side rhythm lives here; the
+ * section gaps (`gap-4`) separate it from the header and footer.
+ */
+function DialogBody({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-body"
+      className={cn(
+        "flex-1 overflow-y-auto overscroll-contain px-5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  flush = false,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  flush?: boolean
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn("flex shrink-0 flex-col bg-card", className)}
+      {...props}
+    >
+      {/* Inset hairline: the same side padding as the content below, so
+          the divider never runs edge to edge. */}
+      <div
+        className={cn(
+          "border-t border-border",
+          flush ? "mx-4" : "mx-5"
+        )}
+      />
+      <div
+        className={cn(
+        // The hairline action bar: 16px above the
+        // buttons, the card's bottom padding (20px) below.
+          "flex flex-row justify-end flex-wrap gap-2",
+          flush ? "p-4" : "px-5 pt-4 pb-5"
+        )}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close render={<Button variant="outline" />}>
+            Close
+          </DialogPrimitive.Close>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-sm font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-xs leading-5 text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * Splits dialog children into header/footer/body groups so loose body
+ * nodes (passed by callers that pre-date `<DialogBody>`) get wrapped in
+ * a single scrolling region. Children already wrapped in
+ * `<DialogBody>` are passed through unchanged.
+ */
+function arrangeDialogChildren(children: React.ReactNode): React.ReactNode {
+  const headers: React.ReactNode[] = []
+  const footers: React.ReactNode[] = []
+  const bodyNodes: React.ReactNode[] = []
+  let hasExplicitBody = false
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) {
+      bodyNodes.push(child)
+      return
+    }
+    if (child.type === DialogHeader) {
+      headers.push(child)
+      return
+    }
+    if (child.type === DialogFooter) {
+      footers.push(child)
+      return
+    }
+    if (child.type === DialogBody) {
+      hasExplicitBody = true
+      bodyNodes.push(child)
+      return
+    }
+    bodyNodes.push(child)
+  })
+  const body = hasExplicitBody ? (
+    bodyNodes
+  ) : (
+    <DialogBody>{bodyNodes}</DialogBody>
+  )
+  return (
+    <>
+      {headers}
+      {body}
+      {footers}
+    </>
+  )
+}
+
+export {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}