@overdoser/react-toolkit 0.0.2 → 0.0.4

package/manifest.json

@@ -0,0 +1,360 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "name": "@overdoser/react-toolkit",
+  "version": "0.0.2",
+  "description": "Machine-readable manifest of components, props, allowed values, and hooks. Generated for tooling and AI assistants.",
+  "themeCssImport": "@overdoser/react-toolkit/theme.css",
+  "peerDependencies": {
+    "required": ["react", "react-dom"],
+    "optional": ["react-hook-form"]
+  },
+  "components": {
+    "Button": {
+      "import": "import { Button } from '@overdoser/react-toolkit'",
+      "element": "button",
+      "extendsNativeProps": "button",
+      "forwardsRef": true,
+      "props": {
+        "variant": { "type": "enum", "values": ["primary", "secondary", "danger", "ghost"], "default": "primary" },
+        "size": { "type": "enum", "values": ["sm", "md", "lg"], "default": "md" },
+        "loading": { "type": "boolean", "default": false, "notes": "Disables the button and sets aria-busy." },
+        "loadingStyle": { "type": "enum", "values": ["dots", "shimmer", "border"], "default": "dots", "notes": "Only used when loading=true." },
+        "fullWidth": { "type": "boolean", "default": false },
+        "classes": { "type": "Partial<ButtonClasses>", "shape": ["root", "content", "shimmer", "dots", "dot"] }
+      }
+    },
+    "Link": {
+      "import": "import { Link } from '@overdoser/react-toolkit'",
+      "element": "a",
+      "extendsNativeProps": "a",
+      "forwardsRef": true,
+      "props": {
+        "variant": { "type": "enum", "values": ["default", "muted", "danger"], "default": "default" },
+        "external": { "type": "boolean", "default": false, "notes": "Adds target=_blank, rel=noopener noreferrer, and an sr-only 'opens in a new tab' suffix." }
+      }
+    },
+    "Typography": {
+      "import": "import { Typography } from '@overdoser/react-toolkit'",
+      "element": "dynamic (variant)",
+      "extendsNativeProps": "p (without color)",
+      "forwardsRef": true,
+      "props": {
+        "variant": { "type": "enum", "values": ["h1", "h2", "h3", "h4", "h5", "h6", "p", "span", "label"], "default": "p" },
+        "weight": { "type": "enum", "values": ["normal", "medium", "semibold", "bold"] },
+        "color": { "type": "enum", "values": ["default", "muted", "primary", "danger", "success"], "notes": "For arbitrary colors, use style or className." },
+        "align": { "type": "enum", "values": ["left", "center", "right"] },
+        "truncate": { "type": "boolean", "default": false }
+      }
+    },
+    "List": {
+      "import": "import { List } from '@overdoser/react-toolkit'",
+      "element": "ul or ol",
+      "extendsNativeProps": "ul",
+      "forwardsRef": true,
+      "props": {
+        "variant": { "type": "enum", "values": ["unordered", "ordered", "none"], "default": "unordered" },
+        "spacing": { "type": "enum", "values": ["sm", "md", "lg"], "default": "md" }
+      }
+    },
+    "ListItem": {
+      "import": "import { ListItem } from '@overdoser/react-toolkit'",
+      "element": "li",
+      "extendsNativeProps": "li",
+      "forwardsRef": true,
+      "props": {}
+    },
+    "Table": {
+      "import": "import { Table, type ColumnDef, type SortConfig } from '@overdoser/react-toolkit'",
+      "element": "table (inside wrapper div)",
+      "generic": "T extends Record<string, unknown>",
+      "props": {
+        "data": { "type": "T[]", "required": true },
+        "columns": { "type": "ColumnDef<T>[]", "required": true },
+        "sortConfig": { "type": "SortConfig[]", "notes": "Controlled sort. Provide with onSort for server-side mode." },
+        "onSort": { "type": "(config: SortConfig[]) => void", "notes": "When set, Table is fully controlled — does not sort or paginate data internally." },
+        "multiSort": { "type": "boolean", "default": true, "notes": "Ctrl/Cmd+click a sortable header to add a secondary sort." },
+        "striped": { "type": "boolean", "default": false },
+        "hoverable": { "type": "boolean", "default": false },
+        "compact": { "type": "boolean", "default": false },
+        "rowKey": { "type": "keyof T & string" },
+        "emptyMessage": { "type": "ReactNode", "default": "No data" },
+        "pagination": { "type": "PaginationConfig" },
+        "classes": { "type": "Partial<TableClasses>", "shape": ["wrapper", "root", "headerCell", "row", "cell", "emptyCell", "paginator", "pageButton"] }
+      },
+      "subTypes": {
+        "ColumnDef<T>": {
+          "key": { "type": "keyof T & string", "required": true },
+          "header": { "type": "ReactNode", "required": true },
+          "sortable": { "type": "boolean" },
+          "render": { "type": "(value, row, index) => ReactNode" },
+          "width": { "type": "string | number" },
+          "align": { "type": "enum", "values": ["left", "center", "right"] }
+        },
+        "SortConfig": {
+          "key": { "type": "string", "required": true },
+          "direction": { "type": "enum", "values": ["asc", "desc"], "required": true }
+        },
+        "PaginationConfig": {
+          "page": { "type": "number", "required": true, "notes": "1-based" },
+          "pageSize": { "type": "number", "required": true },
+          "totalRows": { "type": "number", "notes": "Required for server-side mode; defaults to data.length client-side." },
+          "pageSizeOptions": { "type": "number[]", "default": [10, 25, 50, 100] },
+          "onPageChange": { "type": "(page: number, pageSize: number) => void", "required": true }
+        }
+      },
+      "behavior": {
+        "sortCycle": "none → asc → desc → none",
+        "controlledMode": "Activated when onSort is provided. Table renders data as-is and does not slice for pagination."
+      }
+    },
+    "Dropdown": {
+      "import": "import { Dropdown, DropdownItem } from '@overdoser/react-toolkit'",
+      "element": "div",
+      "modes": {
+        "menu": "Pass `trigger` plus <DropdownItem> children.",
+        "select": "Pass `options` + `value` + `onChange`. Trigger label shows the selected option."
+      },
+      "props": {
+        "trigger": { "type": "ReactNode", "notes": "Required for menu mode; ignored when `options` is provided." },
+        "options": { "type": "{ value: string; label: ReactNode; disabled?: boolean }[]" },
+        "value": { "type": "string", "notes": "Select-mode controlled value." },
+        "onChange": { "type": "(value: string) => void", "notes": "Select-mode callback." },
+        "placeholder": { "type": "ReactNode", "default": "Select..." },
+        "align": { "type": "enum", "values": ["left", "right"], "default": "left" },
+        "error": { "type": "boolean", "default": false },
+        "fullWidth": { "type": "boolean", "default": true },
+        "id": { "type": "string" },
+        "onOpen": { "type": "() => void" },
+        "onClose": { "type": "() => void" },
+        "classes": { "type": "Partial<DropdownClasses>", "shape": ["root", "trigger", "triggerLabel", "chevron", "menu", "item"] }
+      }
+    },
+    "DropdownItem": {
+      "import": "import { DropdownItem } from '@overdoser/react-toolkit'",
+      "element": "button",
+      "extendsNativeProps": "button",
+      "forwardsRef": true,
+      "props": {
+        "disabled": { "type": "boolean", "default": false }
+      }
+    },
+    "Popover": {
+      "import": "import { Popover } from '@overdoser/react-toolkit'",
+      "element": "div",
+      "props": {
+        "trigger": { "type": "ReactNode", "required": true },
+        "content": { "type": "ReactNode", "required": true },
+        "position": { "type": "enum", "values": ["top", "bottom", "left", "right"], "default": "bottom" },
+        "open": { "type": "boolean", "notes": "Controlled mode." },
+        "onOpenChange": { "type": "(open: boolean) => void" },
+        "classes": { "type": "Partial<PopoverClasses>", "shape": ["root", "trigger", "popover"] }
+      },
+      "behavior": {
+        "closesOn": ["outside click", "Escape"],
+        "childrenTyped": "never — pass via `content` prop"
+      }
+    },
+    "Modal": {
+      "import": "import { Modal } from '@overdoser/react-toolkit'",
+      "element": "div (portal at document.body)",
+      "compoundComponents": ["Modal.Header", "Modal.Body", "Modal.Footer"],
+      "props": {
+        "open": { "type": "boolean", "required": true },
+        "onClose": { "type": "() => void", "required": true },
+        "closeOnBackdrop": { "type": "boolean", "default": true },
+        "closeOnEscape": { "type": "boolean", "default": true },
+        "size": { "type": "enum", "values": ["sm", "md", "lg", "fullscreen"], "default": "md" },
+        "aria-label": { "type": "string" },
+        "aria-labelledby": { "type": "string" },
+        "classes": { "type": "Partial<ModalClasses>", "shape": ["backdrop", "modal", "header", "closeButton", "body", "footer"] }
+      },
+      "subComponents": {
+        "Modal.Header": {
+          "props": {
+            "children": { "type": "ReactNode", "required": true },
+            "onClose": { "type": "() => void", "notes": "When set, renders an × close button." }
+          }
+        },
+        "Modal.Body": { "props": { "children": { "type": "ReactNode", "required": true } } },
+        "Modal.Footer": { "props": { "children": { "type": "ReactNode", "required": true } } }
+      },
+      "behavior": ["body scroll lock", "focus trap", "restores prior focus on close"]
+    },
+    "Form": {
+      "import": "import { Form } from '@overdoser/react-toolkit'",
+      "requires": "react-hook-form",
+      "generic": "T extends FieldValues",
+      "props": {
+        "form": { "type": "UseFormReturn<T>", "required": true, "notes": "The result of useForm()." },
+        "onSubmit": { "type": "SubmitHandler<T>", "required": true },
+        "errors": { "type": "ReactNode[]", "notes": "Top-of-form errors rendered above children with role=alert." }
+      }
+    },
+    "FormField": {
+      "import": "import { FormField } from '@overdoser/react-toolkit'",
+      "requires": "react-hook-form (must be inside <Form>)",
+      "props": {
+        "name": { "type": "string", "required": true },
+        "label": { "type": "ReactNode" },
+        "helperText": { "type": "ReactNode" },
+        "required": { "type": "boolean", "notes": "Adds a * indicator next to the label." },
+        "rules": { "type": "Record<string, unknown>", "notes": "Passed to react-hook-form's useController." },
+        "children": { "type": "ReactElement", "required": true, "notes": "Exactly one input element. FormField clones it to inject value/onChange/id/name/error/aria-*." },
+        "classes": { "type": "Partial<FormFieldClasses>", "shape": ["field", "label", "error", "helperText"] }
+      },
+      "behavior": {
+        "supportedChildren": ["Input", "Textarea", "Select", "Dropdown (select-mode)", "Checkbox", "Radio", "RadioGroup"],
+        "bridges": {
+          "onValueChange": "Bridged to react-hook-form onChange (Select single, Dropdown).",
+          "onValuesChange": "Bridged to react-hook-form onChange (Select multi).",
+          "checked": "Auto-set from value when value is boolean (Checkbox)."
+        }
+      }
+    },
+    "FormRow": {
+      "import": "import { FormRow } from '@overdoser/react-toolkit'",
+      "props": { "children": { "type": "ReactNode", "required": true } }
+    },
+    "Input": {
+      "import": "import { Input } from '@overdoser/react-toolkit'",
+      "element": "input",
+      "extendsNativeProps": "input (without prefix)",
+      "forwardsRef": true,
+      "props": {
+        "inputSize": { "type": "enum", "values": ["sm", "md", "lg"], "default": "md", "notes": "Toolkit size scale; independent of the native `size` HTML attribute." },
+        "error": { "type": "boolean", "default": false },
+        "prefix": { "type": "ReactNode" },
+        "suffix": { "type": "ReactNode" },
+        "classes": { "type": "Partial<InputClasses>", "shape": ["root", "wrapper", "prefix", "suffix"] }
+      }
+    },
+    "Select": {
+      "import": "import { Select } from '@overdoser/react-toolkit'",
+      "element": "select (or custom for searchable/multi)",
+      "extendsNativeProps": "select (without value/onChange)",
+      "forwardsRef": true,
+      "modes": {
+        "native": "Default — wraps a native <select>.",
+        "searchable": "When `searchable=true`. Custom dropdown with text filter.",
+        "multi": "When `multiple=true`. Chip-based multi with text filter."
+      },
+      "props": {
+        "inputSize": { "type": "enum", "values": ["sm", "md", "lg"], "default": "md" },
+        "error": { "type": "boolean", "default": false },
+        "options": { "type": "{ value: string; label: string; content?: ReactNode; disabled?: boolean }[]" },
+        "placeholder": { "type": "string", "default": "Select..." },
+        "searchable": { "type": "boolean", "default": false },
+        "searchPlaceholder": { "type": "string", "default": "Search..." },
+        "multiple": { "type": "boolean", "default": false },
+        "value": { "type": "string | string[]", "notes": "string for single-mode, string[] for multi." },
+        "onChange": { "type": "(e: ChangeEvent<HTMLSelectElement>) => void", "notes": "Native + searchable (synthetic for searchable)." },
+        "onValueChange": { "type": "(value: string) => void", "notes": "Single-mode value-only callback." },
+        "onValuesChange": { "type": "(values: string[]) => void", "notes": "Multi-mode callback." },
+        "clearSearchOnSelect": { "type": "boolean", "default": true, "notes": "Multi-mode only." },
+        "classes": { "type": "Partial<SelectClasses>", "shape": ["wrapper", "root", "arrow", "search", "menu", "item", "chip", "chipRemove"] }
+      }
+    },
+    "Checkbox": {
+      "import": "import { Checkbox } from '@overdoser/react-toolkit'",
+      "element": "input[type=checkbox] inside label",
+      "extendsNativeProps": "input",
+      "forwardsRef": true,
+      "props": {
+        "label": { "type": "ReactNode" },
+        "indeterminate": { "type": "boolean", "default": false },
+        "classes": { "type": "Partial<CheckboxClasses>", "shape": ["root", "input", "label"] }
+      }
+    },
+    "Radio": {
+      "import": "import { Radio } from '@overdoser/react-toolkit'",
+      "element": "input[type=radio] inside label",
+      "extendsNativeProps": "input (without type)",
+      "forwardsRef": true,
+      "props": {
+        "value": { "type": "string", "required": true },
+        "label": { "type": "ReactNode" },
+        "classes": { "type": "Partial<RadioClasses>", "shape": ["root", "input", "label"] }
+      },
+      "behavior": "Inside a <RadioGroup>, name/checked/onChange come from context — do not pass them on Radio."
+    },
+    "RadioGroup": {
+      "import": "import { RadioGroup } from '@overdoser/react-toolkit'",
+      "element": "div[role=radiogroup]",
+      "props": {
+        "name": { "type": "string", "required": true },
+        "value": { "type": "string", "notes": "Controlled selected value." },
+        "onChange": { "type": "(value: string) => void" },
+        "id": { "type": "string" },
+        "aria-label": { "type": "string" },
+        "aria-labelledby": { "type": "string" },
+        "required": { "type": "boolean" }
+      }
+    },
+    "Textarea": {
+      "import": "import { Textarea } from '@overdoser/react-toolkit'",
+      "element": "textarea",
+      "extendsNativeProps": "textarea",
+      "forwardsRef": true,
+      "props": {
+        "inputSize": { "type": "enum", "values": ["sm", "md", "lg"], "default": "md" },
+        "error": { "type": "boolean", "default": false },
+        "resize": { "type": "enum", "values": ["none", "vertical", "horizontal", "both"], "default": "vertical", "notes": "Ignored when autoExpand=true." },
+        "autoExpand": { "type": "boolean", "default": true, "notes": "When true, auto-grows height to fit content." }
+      }
+    }
+  },
+  "hooks": {
+    "useClickOutside": {
+      "import": "import { useClickOutside } from '@overdoser/react-toolkit'",
+      "signature": "useClickOutside(ref: RefObject<HTMLElement | null>, handler: () => void, enabled?: boolean): void",
+      "params": {
+        "ref": "Element to monitor.",
+        "handler": "Called on mousedown outside the ref element.",
+        "enabled": "Pause the listener without unmounting (default true)."
+      }
+    },
+    "useFocusTrap": {
+      "import": "import { useFocusTrap } from '@overdoser/react-toolkit'",
+      "signature": "useFocusTrap(ref: RefObject<HTMLElement | null>, active: boolean): void",
+      "behavior": "Cycles Tab / Shift+Tab inside ref. Restores prior focus on deactivation."
+    },
+    "useKeyboard": {
+      "import": "import { useKeyboard } from '@overdoser/react-toolkit'",
+      "signature": "useKeyboard(handlers: Record<string, (e: KeyboardEvent) => void>, active?: boolean): void",
+      "params": {
+        "handlers": "Map keyed by KeyboardEvent.key (e.g., 'Escape', 'Enter').",
+        "active": "Default true. Pass false to disable without unmounting."
+      }
+    },
+    "useTableSort": {
+      "import": "import { useTableSort } from '@overdoser/react-toolkit'",
+      "signature": "useTableSort<T>(data: T[], initialSort?: SortConfig[])",
+      "returns": {
+        "sortedData": "T[]",
+        "sortConfig": "SortConfig[]",
+        "requestSort": "(key) => void — single-column; cycles asc → desc → cleared.",
+        "requestMultiSort": "(key) => void — adds/toggles a column in multi-sort.",
+        "resetSort": "() => void"
+      },
+      "notes": "Only needed if you want to manage sort state outside <Table>."
+    }
+  },
+  "conventions": [
+    "Inputs use `inputSize` for the toolkit size scale; the native `size` HTML attribute is independent.",
+    "Typography color accepts only the preset tokens; for arbitrary colors use `style` or `className`.",
+    "Dropdown has two modes: with `options` + `value` + `onChange` it acts as a select input (the `trigger` prop is unused); without `options`, pass `trigger` and `<DropdownItem>` children.",
+    "Popover content goes through the `content` prop.",
+    "Modal content lives in Modal.Header / Modal.Body / Modal.Footer compound components.",
+    "FormField clones a single child element to inject form props — pass exactly one input element.",
+    "Server-side Table mode (when `onSort` is provided): the consumer is responsible for sorting and slicing `data` server-side.",
+    "Theme stylesheet is imported separately: '@overdoser/react-toolkit/theme.css'."
+  ],
+  "recipes": [
+    "recipes/login-form.tsx",
+    "recipes/paginated-table.tsx",
+    "recipes/server-side-table.tsx",
+    "recipes/confirm-modal.tsx",
+    "recipes/searchable-multi-select.tsx",
+    "recipes/dropdown-menu.tsx"
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@overdoser/react-toolkit",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "main": "./index.js",
   "module": "./index.mjs",

package/recipes/confirm-modal.tsx

@@ -0,0 +1,63 @@
+import { useState } from 'react';
+import { Modal, Button, Typography } from '@overdoser/react-toolkit';
+
+interface ConfirmModalProps {
+  open: boolean;
+  title: string;
+  message: React.ReactNode;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  destructive?: boolean;
+  onConfirm: () => void | Promise<void>;
+  onClose: () => void;
+}
+
+export function ConfirmModal({
+  open,
+  title,
+  message,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  destructive = false,
+  onConfirm,
+  onClose,
+}: ConfirmModalProps) {
+  const [busy, setBusy] = useState(false);
+
+  const handleConfirm = async () => {
+    setBusy(true);
+    try {
+      await onConfirm();
+      onClose();
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Modal open={open} onClose={onClose} size="sm" closeOnBackdrop={!busy} closeOnEscape={!busy}>
+      <Modal.Header onClose={busy ? undefined : onClose}>
+        <Typography variant="h3" weight="semibold">
+          {title}
+        </Typography>
+      </Modal.Header>
+      <Modal.Body>
+        <Typography variant="p" color="muted">
+          {message}
+        </Typography>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="ghost" onClick={onClose} disabled={busy}>
+          {cancelLabel}
+        </Button>
+        <Button
+          variant={destructive ? 'danger' : 'primary'}
+          onClick={handleConfirm}
+          loading={busy}
+        >
+          {confirmLabel}
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}

package/recipes/dropdown-menu.tsx

@@ -0,0 +1,36 @@
+import { Dropdown, DropdownItem } from '@overdoser/react-toolkit';
+
+interface RowActionsProps {
+  rowId: string;
+  onEdit: (id: string) => void;
+  onArchive: (id: string) => void;
+  onDelete: (id: string) => void;
+  canDelete?: boolean;
+}
+
+export function RowActions({
+  rowId,
+  onEdit,
+  onArchive,
+  onDelete,
+  canDelete = true,
+}: RowActionsProps) {
+  return (
+    <Dropdown
+      align="right"
+      fullWidth={false}
+      trigger={
+        <span aria-label="Row actions">
+          {/* Replace with an icon component from your codebase */}
+          ⋯
+        </span>
+      }
+    >
+      <DropdownItem onClick={() => onEdit(rowId)}>Edit</DropdownItem>
+      <DropdownItem onClick={() => onArchive(rowId)}>Archive</DropdownItem>
+      <DropdownItem disabled={!canDelete} onClick={() => onDelete(rowId)}>
+        Delete
+      </DropdownItem>
+    </Dropdown>
+  );
+}

package/recipes/login-form.tsx

@@ -0,0 +1,51 @@
+import { useForm } from 'react-hook-form';
+import { Form, FormField, Input, Button } from '@overdoser/react-toolkit';
+
+interface LoginFields {
+  email: string;
+  password: string;
+}
+
+export function LoginForm({ onLogin }: { onLogin: (values: LoginFields) => Promise<void> }) {
+  const form = useForm<LoginFields>({
+    defaultValues: { email: '', password: '' },
+    mode: 'onTouched',
+  });
+
+  return (
+    <Form
+      form={form}
+      onSubmit={async (values) => {
+        await onLogin(values);
+      }}
+    >
+      <FormField
+        name="email"
+        label="Email"
+        required
+        rules={{
+          required: 'Email is required',
+          pattern: { value: /^\S+@\S+\.\S+$/, message: 'Enter a valid email' },
+        }}
+      >
+        <Input type="email" autoComplete="email" />
+      </FormField>
+
+      <FormField
+        name="password"
+        label="Password"
+        required
+        rules={{
+          required: 'Password is required',
+          minLength: { value: 8, message: 'Min 8 characters' },
+        }}
+      >
+        <Input type="password" autoComplete="current-password" />
+      </FormField>
+
+      <Button type="submit" variant="primary" loading={form.formState.isSubmitting} fullWidth>
+        Sign in
+      </Button>
+    </Form>
+  );
+}

package/recipes/paginated-table.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { Table, type ColumnDef } from '@overdoser/react-toolkit';
+
+interface User extends Record<string, unknown> {
+  id: string;
+  name: string;
+  email: string;
+  role: 'admin' | 'member';
+  lastSeen: string;
+}
+
+const columns: ColumnDef<User>[] = [
+  { key: 'name', header: 'Name', sortable: true },
+  { key: 'email', header: 'Email', sortable: true },
+  { key: 'role', header: 'Role', sortable: true, width: 120 },
+  {
+    key: 'lastSeen',
+    header: 'Last seen',
+    sortable: true,
+    align: 'right',
+    width: 160,
+    render: (value) => new Date(value as string).toLocaleString(),
+  },
+];
+
+export function PaginatedTable({ users }: { users: User[] }) {
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  return (
+    <Table
+      data={users}
+      columns={columns}
+      rowKey="id"
+      striped
+      hoverable
+      pagination={{
+        page,
+        pageSize,
+        onPageChange: (nextPage, nextPageSize) => {
+          setPage(nextPage);
+          setPageSize(nextPageSize);
+        },
+      }}
+      emptyMessage="No users yet."
+    />
+  );
+}

package/recipes/searchable-multi-select.tsx

@@ -0,0 +1,42 @@
+import { useForm } from 'react-hook-form';
+import { Form, FormField, Select, Button } from '@overdoser/react-toolkit';
+
+interface TagFormValues {
+  tags: string[];
+}
+
+const TAG_OPTIONS = [
+  { value: 'react', label: 'React' },
+  { value: 'typescript', label: 'TypeScript' },
+  { value: 'rust', label: 'Rust' },
+  { value: 'go', label: 'Go' },
+  { value: 'python', label: 'Python' },
+  { value: 'css', label: 'CSS' },
+  { value: 'graphql', label: 'GraphQL' },
+];
+
+export function TagPicker({ onSave }: { onSave: (tags: string[]) => Promise<void> }) {
+  const form = useForm<TagFormValues>({ defaultValues: { tags: [] } });
+
+  return (
+    <Form
+      form={form}
+      onSubmit={async ({ tags }) => {
+        await onSave(tags);
+      }}
+    >
+      <FormField
+        name="tags"
+        label="Tags"
+        helperText="Pick all that apply"
+        rules={{ validate: (v: string[]) => v.length > 0 || 'Pick at least one tag' }}
+      >
+        <Select multiple options={TAG_OPTIONS} placeholder="Choose tags…" />
+      </FormField>
+
+      <Button type="submit" loading={form.formState.isSubmitting}>
+        Save tags
+      </Button>
+    </Form>
+  );
+}