@overdoser/react-toolkit 0.0.7 → 0.0.9

package/llms.txt

@@ -222,7 +222,8 @@ Mode B example:
 Import: `import { Popover } from '@overdoser/react-toolkit'`
 
 Props:
-- `trigger: ReactNode` — required. Wrapped in an internal `<button>`.
+- `trigger: ReactNode` — required. By default, wrapped in an internal `<button>` (so a plain `'Help'` string or an icon is fine).
+- `asChild?: boolean` — default `false`. When `true` and `trigger` is a single React element, the trigger is rendered **as-is** with click/aria/ref merged into it via `cloneElement` (no wrapping `<button>`). Use this when you want to pass your own interactive element (e.g. a `<Button>`) without producing `<button>` nested inside `<button>` (a hydration error).
 - `content: ReactNode` — required. Rendered inside an `[role="dialog"]` panel when open.
 - `position?: 'top' | 'bottom' | 'left' | 'right'` — default `'bottom'`
 - `open?: boolean` — controlled.
@@ -233,11 +234,20 @@ Closes on outside click and Escape. Auto-focuses the first focusable child of `c
 
 `children` is intentionally typed as `never` — pass via `content`.
 
-Example:
+Example — string trigger (default wrapping):
 ```tsx
 <Popover trigger="Help" content={<p>Some help text</p>} position="right" />
 ```
 
+Example — passing a `<Button>` without nested-button warning:
+```tsx
+<Popover
+  asChild
+  trigger={<Button iconOnly aria-label="Settings"><GearIcon /></Button>}
+  content={<Settings />}
+/>
+```
+
 ### Modal
 Import: `import { Modal } from '@overdoser/react-toolkit'`
 
@@ -357,6 +367,9 @@ Props:
 - `onValueChange?: (value: string) => void` — single-mode value-only callback.
 - `onValuesChange?: (values: string[]) => void` — multi-mode callback.
 - `clearSearchOnSelect?: boolean` — default `true`. Multi-mode only.
+- `allowCreate?: boolean` — default `false`. Multi-mode only. Adds a "Create '<query>'" row when the search query doesn't match an existing option. Pressing Enter (or clicking the row) pushes the trimmed query into `onValuesChange` and fires `onCreate`.
+- `onCreate?: (value: string) => void` — Multi-mode only, paired with `allowCreate`. Fires with the new value; consumers typically persist it (e.g. push it back into `options`).
+- `createLabel?: (query: string) => ReactNode` — Multi-mode only. Custom render for the create row. Default: `Create "<query>"`.
 - `classes?: Partial<SelectClasses>` where `SelectClasses = { wrapper, root, arrow, search, menu, item, chip, chipRemove }`
 
 Searchable example:

package/manifest.json

@@ -143,7 +143,8 @@
       "import": "import { Popover } from '@overdoser/react-toolkit'",
       "element": "div",
       "props": {
-        "trigger": { "type": "ReactNode", "required": true },
+        "trigger": { "type": "ReactNode", "required": true, "notes": "Default mode wraps the value in an internal <button>. Set asChild=true to pass your own interactive element instead." },
+        "asChild": { "type": "boolean", "default": false, "notes": "When true and trigger is a single React element, the element is rendered as-is with onClick/aria-*/ref cloned onto it (no wrapping <button>). Use to avoid the button-in-button hydration warning when passing <Button> as the trigger." },
         "content": { "type": "ReactNode", "required": true },
         "position": { "type": "enum", "values": ["top", "bottom", "left", "right"], "default": "bottom" },
         "open": { "type": "boolean", "notes": "Controlled mode." },
@@ -252,6 +253,9 @@
         "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." },
+        "allowCreate": { "type": "boolean", "default": false, "notes": "Multi-mode only. Adds a 'Create <query>' row when the query doesn't match an existing option; pressing Enter (or clicking it) pushes the trimmed query into onValuesChange and fires onCreate." },
+        "onCreate": { "type": "(value: string) => void", "notes": "Multi-mode only. Paired with allowCreate." },
+        "createLabel": { "type": "(query: string) => ReactNode", "notes": "Multi-mode only. Custom render for the Create row." },
         "classes": { "type": "Partial<SelectClasses>", "shape": ["wrapper", "root", "arrow", "search", "menu", "item", "chip", "chipRemove"] }
       }
     },
@@ -658,6 +662,7 @@
     "recipes/interactive-line-chart.tsx",
     "recipes/interactive-area-chart.tsx",
     "recipes/interactive-pie-chart.tsx",
-    "recipes/trading-chart.tsx"
+    "recipes/trading-chart.tsx",
+    "recipes/tag-input.tsx"
   ]
 }

package/package.json

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

package/recipes/tag-input.tsx

@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { Button, Form, FormField, Select } from '@overdoser/react-toolkit';
+
+interface TagOption {
+  value: string;
+  label: string;
+}
+
+const INITIAL_TAGS: TagOption[] = [
+  { value: 'react', label: 'React' },
+  { value: 'typescript', label: 'TypeScript' },
+  { value: 'rust', label: 'Rust' },
+  { value: 'go', label: 'Go' },
+  { value: 'python', label: 'Python' },
+];
+
+/**
+ * Tag-input pattern using `<Select multiple allowCreate>`. Users can pick
+ * from existing tags or type a new one + Enter to create it. The freshly
+ * created value is selected immediately; the consumer persists it back into
+ * `options` via `onCreate` so future searches surface it.
+ *
+ * Wired through `<FormField>` to show react-hook-form integration. The
+ * standalone uncontrolled form (no `<Form>`) works just as well — just use
+ * `useState` for the selected values + the options list.
+ */
+export function TagInputRecipe({
+  onSubmit,
+}: {
+  onSubmit?: (values: { tags: string[] }) => void;
+}) {
+  const form = useForm<{ tags: string[] }>({ defaultValues: { tags: [] } });
+  const [options, setOptions] = useState<TagOption[]>(INITIAL_TAGS);
+
+  return (
+    <Form
+      form={form}
+      onSubmit={(values) => onSubmit?.(values)}
+    >
+      <FormField
+        name="tags"
+        label="Tags"
+        helperText="Pick existing tags or type a new one and press Enter"
+      >
+        <Select
+          multiple
+          allowCreate
+          options={options}
+          onCreate={(value) => {
+            // Persist the new tag back into the option list so future searches
+            // find it. Avoid duplicating if a race added it elsewhere.
+            setOptions((prev) =>
+              prev.some((o) => o.value === value) ? prev : [...prev, { value, label: value }],
+            );
+          }}
+          placeholder="Pick or create tags…"
+          searchPlaceholder="Type a tag…"
+          createLabel={(q) => (
+            <>
+              Add tag &ldquo;<strong>{q}</strong>&rdquo;
+            </>
+          )}
+        />
+      </FormField>
+      <Button type="submit" variant="primary">
+        Save
+      </Button>
+    </Form>
+  );
+}