@overdoser/react-toolkit 0.0.7 → 0.0.9

package/AGENTS.md

@@ -112,6 +112,7 @@ Full copy-paste-able files live alongside this doc. Each is one self-contained f
 - [recipes/interactive-area-chart.tsx](./recipes/interactive-area-chart.tsx) — Data-range filter (not series toggle): all series stay visible, the selector picks the time window. Three selector UIs exported: `InteractiveAreaChartTiles`, `InteractiveAreaChartNavigator`, `InteractiveAreaChartDropdown`.
 - [recipes/interactive-pie-chart.tsx](./recipes/interactive-pie-chart.tsx) — Metric/period filter for `PieChart`: all slices stay visible, the selector picks which metric drives the pie. Three exports: `InteractivePieChartTiles`, `InteractivePieChartNavigator`, `InteractivePieChartDropdown`.
 - [recipes/trading-chart.tsx](./recipes/trading-chart.tsx) — Full-stack `TradingChart` with a resolution selector, in-memory datafeed adapter, and the SMA/EMA/Bollinger/RSI/Volume indicator stack. Swap `createMemoryDatafeed` for your own REST/WebSocket adapter; everything else carries over.
+- [recipes/tag-input.tsx](./recipes/tag-input.tsx) — Tag-input pattern via `<Select multiple allowCreate>`: pick from existing tags or type a new one + Enter to create. `onCreate` persists the new tag back into the options list. Wired through `<FormField>` for react-hook-form integration.
 
 ## Anti-patterns to refuse
 

package/components/Popover/Popover.d.ts

@@ -5,8 +5,23 @@ export interface PopoverClasses {
     popover: string;
 }
 export interface PopoverProps {
-    /** Trigger content. Wrapped in an internal `<button>`. */
+    /**
+     * Trigger content. By default, wrapped in an internal `<button>` — pass any
+     * `ReactNode` (string, icon, fragment). If you need to pass your own
+     * interactive element (e.g. a `<Button>`) without the extra wrapping that
+     * would nest `<button>` inside `<button>`, set `asChild` and pass a single
+     * React element instead.
+     */
     trigger: React.ReactNode;
+    /**
+     * Render the trigger as-is (no internal `<button>` wrapper) and merge the
+     * onClick / `aria-*` handlers + ref into it. The trigger MUST be a single
+     * React element whose root is interactive (e.g. a `<button>`, `<a>`, or a
+     * `role="button"` element). Use this when nesting `<button>` inside
+     * `<button>` would otherwise produce a hydration warning.
+     * @default false
+     */
+    asChild?: boolean;
     /** Panel content. Rendered inside a `[role="dialog"]` when open. */
     content: React.ReactNode;
     /** Side of the trigger to anchor the panel to. @default 'bottom' */

package/components/inputs/Select/Select.d.ts

@@ -46,6 +46,24 @@ export interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, 'onCh
     onValuesChange?: (values: string[]) => void;
     /** Clear the search query after each toggle in multi mode. @default true */
     clearSearchOnSelect?: boolean;
+    /**
+     * Multi-mode only. When `true`, an extra "Create '<query>'" row appears
+     * in the menu whenever the search query doesn't match an existing option.
+     * Pressing Enter (or clicking the row) adds the trimmed query as a new
+     * selected value and fires `onCreate`. @default false
+     */
+    allowCreate?: boolean;
+    /**
+     * Multi-mode only. Called with the newly-created value when `allowCreate`
+     * is true and the user creates a new tag. Consumers typically persist the
+     * new value (e.g. push it into their options list).
+     */
+    onCreate?: (value: string) => void;
+    /**
+     * Multi-mode only. Custom render function for the "Create" row body.
+     * @default (q) => `Create "${q}"`
+     */
+    createLabel?: (query: string) => React.ReactNode;
 }
 /**
  * Three internal modes, picked automatically: