@slugbase/ui 0.0.0

package/src/components/ConfirmDialog.tsx

@@ -0,0 +1,67 @@
+import type { ReactNode } from "react";
+
+import { Button } from "./Button.js";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+} from "./Dialog.js";
+
+export type ConfirmDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description?: string;
+  confirmLabel: string;
+  cancelLabel: string;
+  onConfirm: () => void;
+  destructive?: boolean;
+  busy?: boolean;
+  testId?: string;
+  body?: ReactNode;
+};
+
+/** Keyboard-friendly destructive / high-impact confirmation (Radix dialog + focus trap). */
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel,
+  cancelLabel,
+  onConfirm,
+  destructive = false,
+  busy = false,
+  testId = "confirm-dialog",
+  body,
+}: ConfirmDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent title={title} description={description} testId={testId}>
+        {body ? (
+          <div
+            className="px-sp-8 py-sp-6"
+            style={{ fontSize: "var(--text-body)", lineHeight: "var(--lh-body)" }}
+          >
+            {body}
+          </div>
+        ) : null}
+        <div className="flex flex-wrap justify-end gap-sp-3 border-t border-[color:var(--border-subtle)] px-sp-8 py-sp-6">
+          <DialogClose asChild>
+            <Button variant="ghost" disabled={busy} type="button">
+              {cancelLabel}
+            </Button>
+          </DialogClose>
+          <Button
+            variant={destructive ? "danger" : "primary"}
+            disabled={busy}
+            onClick={onConfirm}
+            type="button"
+          >
+            {confirmLabel}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/Dialog.tsx

@@ -0,0 +1,63 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import type { ReactNode } from "react";
+
+export const Dialog = DialogPrimitive.Root;
+export const DialogTrigger = DialogPrimitive.Trigger;
+export const DialogClose = DialogPrimitive.Close;
+
+export type DialogContentProps = {
+  children: ReactNode;
+  title: string;
+  description?: string;
+  className?: string;
+  testId?: string;
+};
+
+export function DialogOverlay({
+  className = "",
+  ...props
+}: DialogPrimitive.DialogOverlayProps) {
+  return (
+    <DialogPrimitive.Overlay
+      className={`fixed inset-0 z-[110] bg-[color:var(--overlay-scrim)] backdrop-blur-[3px] ${className}`}
+      {...props}
+    />
+  );
+}
+
+export function DialogContent({
+  children,
+  title,
+  description,
+  className = "",
+  testId,
+}: DialogContentProps) {
+  return (
+    <DialogPrimitive.Portal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-testid={testId}
+        {...(description ? {} : { "aria-describedby": undefined })}
+        className={`fixed left-1/2 top-1/2 z-[120] flex max-h-[min(90vh,720px)] w-[min(560px,92vw)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xl border border-[color:var(--border-strong)] bg-overlay shadow-overlay focus:outline-none ${className}`}
+      >
+        <div className="border-b border-[color:var(--border-subtle)] px-sp-8 py-sp-6">
+          <DialogPrimitive.Title
+            className="text-fg font-semibold"
+            style={{ fontSize: "var(--text-h2)", lineHeight: "var(--lh-h2)" }}
+          >
+            {title}
+          </DialogPrimitive.Title>
+          {description ? (
+            <DialogPrimitive.Description
+              className="mt-sp-3 text-fg-muted"
+              style={{ fontSize: "var(--text-body)", lineHeight: "var(--lh-body)" }}
+            >
+              {description}
+            </DialogPrimitive.Description>
+          ) : null}
+        </div>
+        {children}
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  );
+}

package/src/components/EmptyState.spec.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { EmptyState } from "./EmptyState.js";
+
+describe("EmptyState", () => {
+  it("renders title, description, and actions with accessible structure", () => {
+    render(
+      <EmptyState
+        title="No bookmarks yet"
+        description="Save your first link."
+        actions={<button type="button">New bookmark</button>}
+        testId="bookmarks-empty"
+      />,
+    );
+
+    expect(screen.getByTestId("bookmarks-empty")).toBeTruthy();
+    expect(screen.getByRole("heading", { name: "No bookmarks yet" })).toBeTruthy();
+    expect(screen.getByText("Save your first link.")).toBeTruthy();
+    expect(screen.getByRole("button", { name: "New bookmark" })).toBeTruthy();
+  });
+});

package/src/components/EmptyState.tsx

@@ -0,0 +1,54 @@
+import type { ReactNode } from "react";
+
+export type EmptyStateProps = {
+  title: ReactNode;
+  description?: ReactNode;
+  illustration?: ReactNode;
+  actions?: ReactNode;
+  testId?: string;
+  compact?: boolean;
+};
+
+/** Centered empty state - prototype `.empty` pattern (spec §23). */
+export function EmptyState({
+  title,
+  description,
+  illustration,
+  actions,
+  testId = "empty-state",
+  compact = false,
+}: EmptyStateProps) {
+  return (
+    <div
+      className={`mx-auto flex max-w-[420px] flex-col items-center justify-center text-center ${
+        compact ? "gap-sp-4 px-sp-6 py-sp-8" : "gap-sp-5 px-sp-6 py-sp-10"
+      }`}
+      data-testid={testId}
+    >
+      {illustration ? (
+        <div className="mb-sp-3 text-fg-faint" aria-hidden="true">
+          {illustration}
+        </div>
+      ) : null}
+      <h3
+        className="m-0 font-semibold text-fg"
+        style={{ fontSize: "var(--text-h2)", lineHeight: "var(--lh-h2)" }}
+      >
+        {title}
+      </h3>
+      {description ? (
+        <p
+          className="m-0 text-fg-subtle"
+          style={{ fontSize: "var(--text-body-lg)", lineHeight: "1.5" }}
+        >
+          {description}
+        </p>
+      ) : null}
+      {actions ? (
+        <div className="mt-sp-3 flex flex-wrap items-center justify-center gap-sp-4">
+          {actions}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/FieldError.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+
+export type FieldErrorProps = {
+  id?: string;
+  children: ReactNode;
+};
+
+export function FieldError({ id, children }: FieldErrorProps) {
+  return (
+    <p
+      id={id}
+      role="alert"
+      className="text-danger-text"
+      style={{ fontSize: "var(--text-small)", lineHeight: "var(--lh-small)" }}
+    >
+      {children}
+    </p>
+  );
+}

package/src/components/FolderGlyph.tsx

@@ -0,0 +1,38 @@
+import { LucideIcon } from "../icons/lucide-icon.js";
+
+export type FolderGlyphProps = {
+  icon: string | null;
+  color: string | null;
+  size?: number;
+  className?: string;
+};
+
+export function FolderGlyph({
+  icon,
+  color,
+  size = 22,
+  className = "",
+}: FolderGlyphProps) {
+  const iconSize = Math.round(size * 0.59);
+  return (
+    <span
+      aria-hidden
+      className={[
+        "inline-grid shrink-0 place-items-center rounded-md",
+        className,
+      ].join(" ")}
+      style={{
+        width: size,
+        height: size,
+        background: color ?? "var(--accent-subtle)",
+      }}
+    >
+      <LucideIcon
+        name={icon ?? "folder"}
+        size={iconSize}
+        className="text-[color:var(--accent-fg)]"
+        strokeWidth={2}
+      />
+    </span>
+  );
+}

package/src/components/IconButton.tsx

@@ -0,0 +1,42 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+export type IconButtonSize = "default" | "sm";
+
+export type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  size?: IconButtonSize;
+  active?: boolean;
+  children: ReactNode;
+  "aria-label": string;
+};
+
+const sizeClasses: Record<IconButtonSize, string> = {
+  default: "h-[34px] w-[34px]",
+  sm: "h-[28px] w-[28px]",
+};
+
+/**
+ * Icon-only action button - matches prototype `.icon-btn` pattern from app.css.
+ * Requires `aria-label` for accessibility.
+ */
+export function IconButton({
+  size = "default",
+  active = false,
+  className = "",
+  type = "button",
+  children,
+  ...props
+}: IconButtonProps) {
+  return (
+    <button
+      type={type}
+      className={`inline-grid cursor-pointer place-items-center rounded-md border border-transparent bg-transparent transition-[background,color,border-color] duration-micro ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas disabled:cursor-not-allowed disabled:opacity-50 ${
+        active
+          ? "bg-accent-subtle text-accent-text"
+          : "text-fg-muted hover:bg-raised hover:text-fg"
+      } ${sizeClasses[size]} ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/IconPicker.spec.tsx

@@ -0,0 +1,54 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { IconPicker } from "./IconPicker.js";
+
+const labels = {
+  searchPlaceholder: "Search icons…",
+  noResults: "No icons match your search",
+  clear: "Remove icon",
+};
+
+describe("IconPicker", () => {
+  afterEach(() => {
+    cleanup();
+  });
+  it("filters icons by search query and selects an icon", () => {
+    const onChange = vi.fn();
+
+    render(<IconPicker value={null} onChange={onChange} labels={labels} />);
+
+    expect(screen.getByTestId("icon-picker-option-palette")).toBeTruthy();
+    expect(screen.queryByTestId("icon-picker-option-folder")).toBeTruthy();
+
+    fireEvent.change(screen.getByTestId("icon-picker-search"), {
+      target: { value: "palette" },
+    });
+
+    expect(screen.getByTestId("icon-picker-option-palette")).toBeTruthy();
+    expect(screen.queryByTestId("icon-picker-option-folder")).toBeNull();
+
+    fireEvent.click(screen.getByTestId("icon-picker-option-palette"));
+    expect(onChange).toHaveBeenCalledWith("palette");
+  });
+
+  it("shows no-results message when search matches nothing", () => {
+    render(<IconPicker value={null} onChange={vi.fn()} labels={labels} />);
+
+    fireEvent.change(screen.getByTestId("icon-picker-search"), {
+      target: { value: "xyzzy404" },
+    });
+
+    expect(screen.getByTestId("icon-picker-no-results").textContent).toBe(labels.noResults);
+    expect(screen.queryByTestId("icon-picker-grid")).toBeNull();
+  });
+
+  it("clears the selected icon", () => {
+    const onChange = vi.fn();
+
+    render(<IconPicker value="palette" onChange={onChange} labels={labels} />);
+
+    fireEvent.click(screen.getByTestId("icon-picker-clear"));
+    expect(onChange).toHaveBeenCalledWith(null);
+  });
+});

package/src/components/IconPicker.tsx

@@ -0,0 +1,132 @@
+import { useMemo, useState } from "react";
+import { CheckIcon, SearchIcon, XIcon } from "lucide-react";
+
+import { FOLDER_ICON_NAMES } from "../icons/folder-icon-names.js";
+import { LucideIcon } from "../icons/lucide-icon.js";
+
+export type IconPickerLabels = {
+  searchPlaceholder: string;
+  noResults: string;
+  clear: string;
+};
+
+export type IconPickerProps = {
+  value: string | null;
+  onChange: (icon: string | null) => void;
+  labels: IconPickerLabels;
+  id?: string;
+  testId?: string;
+};
+
+function filterIconNames(query: string): readonly string[] {
+  const normalized = query.trim().toLowerCase();
+  if (!normalized) return FOLDER_ICON_NAMES;
+  return FOLDER_ICON_NAMES.filter((name) => name.includes(normalized));
+}
+
+export function IconPicker({
+  value,
+  onChange,
+  labels,
+  id,
+  testId = "icon-picker",
+}: IconPickerProps) {
+  const [query, setQuery] = useState("");
+  const matches = useMemo(() => filterIconNames(query), [query]);
+
+  return (
+    <div className="flex flex-col gap-sp-3" data-testid={testId}>
+      <div className="relative">
+        <SearchIcon
+          size={15}
+          className="pointer-events-none absolute left-sp-3 top-1/2 -translate-y-1/2 text-fg-muted"
+          aria-hidden
+        />
+        <input
+          id={id}
+          type="search"
+          value={query}
+          onChange={(event) => {
+            setQuery(event.target.value);
+          }}
+          placeholder={labels.searchPlaceholder}
+          className="w-full rounded-md border border-[color:var(--border)] bg-[color:var(--base)] py-sp-3 pl-sp-9 pr-sp-4 text-fg focus:outline-none focus:ring-2 focus:ring-[color:var(--accent)]"
+          style={{ fontSize: "var(--text-body)" }}
+          data-testid={`${testId}-search`}
+        />
+      </div>
+
+      {value ? (
+        <div className="flex items-center justify-between gap-sp-3">
+          <span className="inline-flex items-center gap-sp-3 text-fg-muted" style={{ fontSize: "var(--text-small)" }}>
+            <LucideIcon name={value} size={18} aria-hidden />
+            <span className="font-mono">{value}</span>
+          </span>
+          <button
+            type="button"
+            className="inline-flex items-center gap-sp-2 text-fg-muted transition-colors hover:text-fg"
+            style={{ fontSize: "var(--text-small)" }}
+            onClick={() => {
+              onChange(null);
+            }}
+            data-testid={`${testId}-clear`}
+          >
+            <XIcon size={14} aria-hidden />
+            {labels.clear}
+          </button>
+        </div>
+      ) : null}
+
+      {matches.length === 0 ? (
+        <p
+          className="py-sp-5 text-center text-fg-subtle"
+          style={{ fontSize: "var(--text-small)" }}
+          data-testid={`${testId}-no-results`}
+        >
+          {labels.noResults}
+        </p>
+      ) : (
+        <div
+          className="grid max-h-[200px] grid-cols-8 gap-sp-2 overflow-y-auto rounded-md border border-[color:var(--border-subtle)] bg-[color:var(--base)] p-sp-3"
+          role="listbox"
+          aria-label={labels.searchPlaceholder}
+          data-testid={`${testId}-grid`}
+        >
+          {matches.map((name) => {
+            const selected = value === name;
+            return (
+              <button
+                key={name}
+                type="button"
+                role="option"
+                aria-selected={selected}
+                title={name}
+                className={[
+                  "relative inline-grid h-9 w-9 place-items-center rounded-md border transition-colors",
+                  selected
+                    ? "border-[color:var(--accent)] bg-[color:var(--accent-subtle)] text-[color:var(--accent-text)]"
+                    : "border-transparent text-fg-muted hover:border-[color:var(--border)] hover:bg-[color:var(--raised-2)] hover:text-fg",
+                ].join(" ")}
+                onClick={() => {
+                  onChange(selected ? null : name);
+                }}
+                data-testid={`${testId}-option-${name}`}
+              >
+                <LucideIcon name={name} size={18} aria-hidden />
+                {selected ? (
+                  <CheckIcon
+                    size={10}
+                    className="absolute right-0.5 top-0.5 text-[color:var(--accent-text)]"
+                    aria-hidden
+                  />
+                ) : null}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { filterIconNames };

package/src/components/Input.tsx

@@ -0,0 +1,76 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+
+export type InputSize = "default" | "lg";
+
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
+  invalid?: boolean;
+  size?: InputSize;
+  startIcon?: ReactNode;
+  endIcon?: ReactNode;
+};
+
+const sizeHeight: Record<InputSize, string> = {
+  default: "34px",
+  lg: "42px",
+};
+
+const sizeFontSize: Record<InputSize, string> = {
+  default: "var(--text-body)",
+  lg: "var(--text-body-lg)",
+};
+
+export function Input({
+  invalid = false,
+  size = "default",
+  startIcon,
+  endIcon,
+  className = "",
+  ...props
+}: InputProps) {
+  const borderColor = invalid
+    ? "var(--danger)"
+    : "var(--border)";
+  const focusBorderColor = invalid
+    ? "var(--danger)"
+    : "var(--accent-border)";
+  const focusShadow = invalid
+    ? "0 0 0 3px var(--danger-subtle)"
+    : "0 0 0 3px var(--accent-subtle)";
+
+  return (
+    <div
+      className={`flex w-full items-center gap-sp-4 rounded-md border bg-raised px-sp-4 transition-[border-color,box-shadow] duration-micro ease-in-out focus-within:outline-none has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 ${className}`}
+      style={{
+        height: sizeHeight[size],
+        borderColor,
+      }}
+      onFocus={(e) => {
+        e.currentTarget.style.borderColor = focusBorderColor;
+        e.currentTarget.style.boxShadow = focusShadow;
+      }}
+      onBlur={(e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+          e.currentTarget.style.borderColor = borderColor;
+          e.currentTarget.style.boxShadow = "";
+        }
+      }}
+    >
+      {startIcon ? (
+        <span aria-hidden="true" className="shrink-0 text-fg-subtle">
+          {startIcon}
+        </span>
+      ) : null}
+      <input
+        className="min-w-0 flex-1 bg-transparent text-fg placeholder:text-fg-faint focus:outline-none disabled:cursor-not-allowed"
+        aria-invalid={invalid || undefined}
+        style={{ fontSize: sizeFontSize[size], lineHeight: "var(--lh-body)" }}
+        {...props}
+      />
+      {endIcon ? (
+        <span aria-hidden="true" className="shrink-0 text-fg-subtle">
+          {endIcon}
+        </span>
+      ) : null}
+    </div>
+  );
+}

package/src/components/Kbd.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+
+export type KbdProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+/**
+ * Keyboard hint badge - 11px mono, canvas bg, 3D bottom border.
+ * Matches prototype `.kbd` from app.css.
+ */
+export function Kbd({ children, className = "" }: KbdProps) {
+  return (
+    <kbd
+      className={[
+        "inline-flex min-h-[18px] min-w-[18px] items-center justify-center gap-[2px] rounded-sm",
+        "border border-[color:var(--border)] bg-canvas",
+        "font-mono font-medium leading-none text-fg-muted",
+        className,
+      ].join(" ")}
+      style={{
+        fontSize: "11px",
+        padding: "3px 5px",
+        borderBottomWidth: "2px",
+      }}
+    >
+      {children}
+    </kbd>
+  );
+}

package/src/components/Label.tsx

@@ -0,0 +1,17 @@
+import type { LabelHTMLAttributes, ReactNode } from "react";
+
+export type LabelProps = LabelHTMLAttributes<HTMLLabelElement> & {
+  children: ReactNode;
+};
+
+export function Label({ className = "", children, ...props }: LabelProps) {
+  return (
+    <label
+      className={`font-medium text-fg-muted ${className}`}
+      style={{ fontSize: "var(--text-small)", lineHeight: "var(--lh-small)" }}
+      {...props}
+    >
+      {children}
+    </label>
+  );
+}

package/src/components/Popover.tsx

@@ -0,0 +1,35 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import type { ReactNode } from "react";
+
+export const Popover = PopoverPrimitive.Root;
+export const PopoverTrigger = PopoverPrimitive.Trigger;
+export const PopoverClose = PopoverPrimitive.Close;
+
+export type PopoverContentProps = {
+  children: ReactNode;
+  className?: string;
+  testId?: string;
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+};
+
+export function PopoverContent({
+  children,
+  className = "",
+  testId,
+  align = "start",
+  sideOffset = 4,
+}: PopoverContentProps) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-testid={testId}
+        align={align}
+        sideOffset={sideOffset}
+        className={`z-[130] max-h-[min(360px,70vh)] w-[min(320px,92vw)] overflow-y-auto rounded-lg border border-[color:var(--border)] bg-[color:var(--overlay)] p-sp-4 shadow-lg focus:outline-none ${className}`}
+      >
+        {children}
+      </PopoverPrimitive.Content>
+    </PopoverPrimitive.Portal>
+  );
+}

package/src/components/Skeleton.spec.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { SkeletonCardGrid, SkeletonList } from "./Skeleton.js";
+
+describe("Skeleton", () => {
+  it("exposes busy list skeleton for assistive tech", () => {
+    render(<SkeletonList rows={2} testId="list-skeleton" />);
+    const root = screen.getByTestId("list-skeleton");
+    expect(root.getAttribute("aria-busy")).toBe("true");
+    expect(root.getAttribute("aria-live")).toBe("polite");
+  });
+
+  it("renders card grid placeholders", () => {
+    render(<SkeletonCardGrid count={3} testId="grid-skeleton" />);
+    expect(screen.getByTestId("grid-skeleton").children.length).toBe(3);
+  });
+});