@overdoser/react-toolkit 0.0.8 → 0.0.9

package/llms.txt

@@ -367,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

@@ -253,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"] }
       }
     },
@@ -659,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.8",
+  "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>
+  );
+}