@hoardodile/ui 0.0.0

package/src/components/section-tabs.test.tsx

@@ -0,0 +1,154 @@
+import { fireEvent, render, screen } from "@testing-library/react"
+import { describe, expect, it, vi } from "vitest"
+import { SectionTabs } from "./section-tabs"
+
+const ITEMS = [
+	{ value: "a", label: "Alpha" },
+	{ value: "b", label: "Beta" },
+	{ value: "c", label: "Gamma" },
+]
+
+describe("SectionTabs", () => {
+	it("renders a tablist with one tab per item and the active state", () => {
+		render(<SectionTabs value="b" items={ITEMS} />)
+		expect(screen.getByRole("tablist")).toBeInTheDocument()
+		expect(screen.getByRole("tab", { name: "Alpha" })).toHaveAttribute(
+			"aria-selected",
+			"false",
+		)
+		const beta = screen.getByRole("tab", { name: "Beta" })
+		expect(beta).toHaveAttribute("aria-selected", "true")
+		expect(beta).toHaveAttribute("tabindex", "0")
+		expect(screen.getByRole("tab", { name: "Alpha" })).toHaveAttribute(
+			"tabindex",
+			"-1",
+		)
+	})
+
+	it("reports the picked value through onChange", () => {
+		const onChange = vi.fn()
+		render(<SectionTabs value="a" items={ITEMS} onChange={onChange} />)
+		fireEvent.click(screen.getByRole("tab", { name: "Gamma" }))
+		expect(onChange).toHaveBeenCalledWith("c")
+	})
+
+	it("moves activation and focus with the arrow keys", () => {
+		const onChange = vi.fn()
+		const { rerender } = render(
+			<SectionTabs value="a" items={ITEMS} onChange={onChange} />,
+		)
+		const alpha = () => screen.getByRole("tab", { name: "Alpha" })
+		const beta = () => screen.getByRole("tab", { name: "Beta" })
+		const gamma = () => screen.getByRole("tab", { name: "Gamma" })
+
+		fireEvent.keyDown(alpha(), { key: "ArrowRight" })
+		expect(onChange).toHaveBeenLastCalledWith("b")
+		expect(beta()).toHaveFocus()
+		rerender(<SectionTabs value="b" items={ITEMS} onChange={onChange} />)
+
+		fireEvent.keyDown(beta(), { key: "ArrowLeft" })
+		expect(onChange).toHaveBeenLastCalledWith("a")
+		expect(alpha()).toHaveFocus()
+		rerender(<SectionTabs value="a" items={ITEMS} onChange={onChange} />)
+
+		fireEvent.keyDown(alpha(), { key: "ArrowLeft" })
+		expect(onChange).toHaveBeenLastCalledWith("c")
+		rerender(<SectionTabs value="c" items={ITEMS} onChange={onChange} />)
+
+		fireEvent.keyDown(gamma(), { key: "Home" })
+		expect(onChange).toHaveBeenLastCalledWith("a")
+		rerender(<SectionTabs value="a" items={ITEMS} onChange={onChange} />)
+
+		fireEvent.keyDown(alpha(), { key: "End" })
+		expect(onChange).toHaveBeenLastCalledWith("c")
+	})
+
+	it("mounts only the active panel and links it to the active tab", () => {
+		const { rerender } = render(
+			<SectionTabs
+				value="a"
+				items={[
+					{ ...ITEMS[0]!, panel: <p>Panel Alpha</p> },
+					{ ...ITEMS[1]!, panel: <p>Panel Beta</p> },
+				]}
+			/>,
+		)
+		const panel = screen.getByRole("tabpanel")
+		expect(panel).toHaveTextContent("Panel Alpha")
+		expect(panel).toHaveAttribute(
+			"aria-labelledby",
+			screen.getByRole("tab", { name: "Alpha" }).id,
+		)
+		expect(screen.queryByText("Panel Beta")).not.toBeInTheDocument()
+
+		rerender(
+			<SectionTabs
+				value="b"
+				items={[
+					{ ...ITEMS[0]!, panel: <p>Panel Alpha</p> },
+					{ ...ITEMS[1]!, panel: <p>Panel Beta</p> },
+				]}
+			/>,
+		)
+		expect(screen.getByRole("tabpanel")).toHaveTextContent("Panel Beta")
+		expect(screen.queryByText("Panel Alpha")).not.toBeInTheDocument()
+	})
+
+	it("replaces the default panel spacing per item", () => {
+		render(
+			<SectionTabs
+				value="a"
+				items={[
+					{
+						...ITEMS[0]!,
+						panelClassName: "pt-3",
+						panel: <p>Panel Alpha</p>,
+					},
+				]}
+			/>,
+		)
+		expect(screen.getByRole("tabpanel").className).toContain("pt-3")
+		expect(screen.getByRole("tabpanel").className).not.toContain("mt-4")
+	})
+
+	it("lets a render slot replace the trigger with ARIA props to spread", () => {
+		render(
+			<SectionTabs
+				value="a"
+				items={[
+					{
+						...ITEMS[0]!,
+						testId: "link-tab",
+						render: (active, className, trigger) => (
+							<a
+								href="/alpha"
+								{...trigger}
+								className={className}
+								data-active={active}
+							>
+								Alpha link
+							</a>
+						),
+					},
+					{ ...ITEMS[1]!, label: "Beta" },
+				]}
+			/>,
+		)
+		const link = screen.getByTestId("link-tab")
+		expect(link).toHaveAttribute("role", "tab")
+		expect(link).toHaveAttribute("aria-selected", "true")
+		expect(link.className).toContain("uppercase")
+		expect(screen.getByRole("tab", { name: "Beta" })).toBeInTheDocument()
+	})
+
+	it("renders the right-hand controls in the tab row", () => {
+		render(
+			<SectionTabs
+				value="a"
+				items={ITEMS}
+				controls={<span data-testid="row-control">Sort</span>}
+			/>,
+		)
+		expect(screen.getByTestId("row-control")).toBeInTheDocument()
+	})
+})

package/src/components/section-tabs.tsx

@@ -0,0 +1,190 @@
+import { cn } from "@hoardodile/ui/lib/utils"
+import {
+	Fragment,
+	type KeyboardEvent,
+	type ReactNode,
+	useId,
+	useRef,
+} from "react"
+
+export type SectionTabTriggerProps = {
+	readonly id: string
+	readonly role: "tab"
+	readonly tabIndex: number
+	readonly "aria-selected": boolean
+	readonly "aria-controls": string | undefined
+	readonly "data-testid": string | undefined
+	readonly onKeyDown: (event: KeyboardEvent<HTMLElement>) => void
+}
+
+export type SectionTabItem<T extends string> = {
+	readonly value: T
+	readonly label: ReactNode
+	readonly testId?: string
+	/** Replaces the trigger element (e.g. a router Link) — receives the
+	    active state, the trigger classes and the ARIA/keyboard props to
+	    spread onto the element. */
+	readonly render?: (
+		active: boolean,
+		className: string,
+		trigger: SectionTabTriggerProps,
+	) => ReactNode
+	/** Content panel; mounted only while the tab is active. */
+	readonly panel?: ReactNode
+	/** Panel wrapper classes, replacing the default `mt-4`. */
+	readonly panelClassName?: string
+}
+
+export type SectionTabsProps<T extends string> = {
+	readonly value: T
+	readonly items: readonly SectionTabItem<T>[]
+	readonly onChange?: (value: T) => void
+	readonly className?: string
+	readonly panelClassName?: string
+	/** Overrides for the tab bar itself (e.g. an indented side-panel bar). */
+	readonly listClassName?: string
+	/** Right-hand controls sharing the tab row (e.g. a sort toggle). */
+	readonly controls?: ReactNode
+	readonly ariaLabel?: string
+}
+
+const TRIGGER_CLASSES =
+	"relative inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-none border-0 bg-transparent px-0.5 pt-1 pb-3 text-xs font-semibold uppercase tracking-[0.1em] text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 after:absolute after:inset-x-0 after:-bottom-[2px] after:h-0.5 after:bg-foreground after:opacity-0 after:transition-opacity"
+
+function triggerClassName(active: boolean): string {
+	return cn(TRIGGER_CLASSES, active && "text-foreground after:opacity-100")
+}
+
+/**
+ * Section-mode tab bar: uppercase 12px labels, a 2px underline on the
+ * active tab over a 2px strong bottom edge, and a hidden horizontal
+ * scrollbar on overflow. Standalone replacement for the shadcn tabs'
+ * `section` variant — the group-data variant chains it leaned on were
+ * too fragile to extend.
+ */
+export function SectionTabs<T extends string>(props: SectionTabsProps<T>) {
+	const {
+		value,
+		items,
+		onChange,
+		className,
+		panelClassName,
+		listClassName,
+		controls,
+		ariaLabel,
+	} = props
+	const baseId = useId()
+	const listRef = useRef<HTMLDivElement>(null)
+
+	const activeIndex = items.findIndex((item) => item.value === value)
+	const activeItem = activeIndex >= 0 ? items[activeIndex] : undefined
+
+	function activate(next: T): void {
+		if (next !== value) onChange?.(next)
+	}
+
+	function focusTriggerAt(index: number): void {
+		const trigger =
+			listRef.current?.querySelectorAll<HTMLElement>('[role="tab"]')[index]
+		trigger?.focus()
+	}
+
+	function handleKeyDown(event: KeyboardEvent<HTMLElement>): void {
+		const from = activeIndex < 0 ? 0 : activeIndex
+		const count = items.length
+		let nextIndex: number
+		switch (event.key) {
+			case "ArrowRight":
+				nextIndex = (from + 1) % count
+				break
+			case "ArrowLeft":
+				nextIndex = (from - 1 + count) % count
+				break
+			case "Home":
+				nextIndex = 0
+				break
+			case "End":
+				nextIndex = count - 1
+				break
+			default:
+				return
+		}
+		event.preventDefault()
+		const next = items[nextIndex]
+		if (next === undefined) return
+		activate(next.value)
+		focusTriggerAt(nextIndex)
+	}
+
+	return (
+		<div className={cn("flex min-w-0 flex-col gap-2", className)}>
+			<div className="flex items-center gap-6">
+				<div
+					ref={listRef}
+					role="tablist"
+					aria-label={ariaLabel}
+					className={cn(
+						// The 2px strong edge is an inset shadow over the bottom
+						// padding zone: the active underline (positioned 2px
+						// below the trigger) lands inside the padding box —
+						// a border would be outside it and get clipped by the
+						// scroll list's overflow-y-hidden. The color reads the
+						// runtime palette variable directly (what border-border
+						// compiles to), not the @theme mirror — the mirror
+						// lives in a cascade layer and is not reliable here.
+						"flex min-w-0 flex-1 items-center gap-6 overflow-x-auto overflow-y-hidden no-scrollbar pb-0.5 shadow-[inset_0_-2px_0_0_var(--border)]",
+						listClassName,
+					)}
+				>
+					{items.map((item, index) => {
+						const active = item.value === value
+						const triggerProps: SectionTabTriggerProps = {
+							id: `${baseId}-tab-${index}`,
+							role: "tab",
+							tabIndex: active ? 0 : -1,
+							"aria-selected": active,
+							"aria-controls":
+								item.panel !== undefined
+									? `${baseId}-panel-${index}`
+									: undefined,
+							"data-testid": item.testId,
+							onKeyDown: handleKeyDown,
+						}
+						if (item.render !== undefined) {
+							return (
+								<Fragment key={item.value}>
+									{item.render(active, triggerClassName(active), triggerProps)}
+								</Fragment>
+							)
+						}
+						return (
+							<button
+								key={item.value}
+								type="button"
+								{...triggerProps}
+								onClick={() => activate(item.value)}
+								className={triggerClassName(active)}
+							>
+								{item.label}
+							</button>
+						)
+					})}
+				</div>
+				{controls}
+			</div>
+			{activeItem?.panel !== undefined ? (
+				<div
+					role="tabpanel"
+					id={`${baseId}-panel-${activeIndex}`}
+					aria-labelledby={`${baseId}-tab-${activeIndex}`}
+					className={cn(
+						"flex-1 text-sm outline-none",
+						activeItem.panelClassName ?? panelClassName ?? "mt-4",
+					)}
+				>
+					{activeItem.panel}
+				</div>
+			) : null}
+		</div>
+	)
+}

package/src/components/separator.tsx

@@ -0,0 +1,38 @@
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+
+import { cn } from "@hoardodile/ui/lib/utils"
+
+export type SeparatorSize = "hairline" | "seam"
+
+/**
+ * Horizontal/vertical divider: hairlines are 1px and quiet; the 2px
+ * `seam` tier marks only structural seams (tab bars, panel sections,
+ * pinned action bars).
+ */
+function Separator({
+  className,
+  orientation = "horizontal",
+  size = "hairline",
+  ...props
+}: SeparatorPrimitive.Props & {
+  readonly size?: SeparatorSize
+}) {
+  const thickness =
+    size === "seam"
+      ? "data-horizontal:h-0.5 data-vertical:w-0.5"
+      : "data-horizontal:h-px data-vertical:w-px"
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:w-full data-vertical:self-stretch",
+        thickness,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

package/src/components/sheet.tsx

@@ -0,0 +1,170 @@
+import * as React from "react"
+import { Dialog as SheetPrimitive } 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 Sheet({
+  open,
+  defaultOpen,
+  onOpenChange,
+  ...props
+}: Omit<SheetPrimitive.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?: SheetPrimitive.Root.ChangeEventDetails,
+  ) => void
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(
+    defaultOpen ?? false,
+  )
+  const isControlled = open !== undefined
+  const currentOpen = isControlled ? open : uncontrolledOpen
+  function handleOpenChange(
+    next: boolean,
+    eventDetails?: SheetPrimitive.Root.ChangeEventDetails,
+  ) {
+    if (!isControlled) setUncontrolledOpen(next)
+    onOpenChange?.(next, eventDetails)
+  }
+  useMobileBackToClose(currentOpen, handleOpenChange)
+  return (
+    <SheetPrimitive.Root
+      data-slot="sheet"
+      open={currentOpen}
+      onOpenChange={handleOpenChange}
+      {...props}
+    />
+  )
+}
+
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
+  return (
+    <SheetPrimitive.Backdrop
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: SheetPrimitive.Popup.Props & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  const { t } = useTranslation("ui", { useSuspense: false })
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Popup
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close
+            data-slot="sheet-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-4 right-4"
+                size="icon-sm"
+              />
+            }
+          >
+            <Cross
+            />
+            <span className="sr-only">{t("aria.close")}</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Popup>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("font-heading font-medium text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: SheetPrimitive.Description.Props) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}