@bfrs/agentic-components 0.4.9 → 0.5.0

package/BFRS_AGENTIC_COMPONENTS.md

@@ -49,6 +49,7 @@ import {
   NumberStepper,
   SuggestInput,
   TagInput,
+  TagsInput,
   FileDropzone,
   RevealField,
   RevealAndCopy,
@@ -693,17 +694,18 @@ Angular custom element:
 
 ---
 
-#### `TagInput`
+#### `TagInput` / `TagsInput`
 
-Controlled chip input for free-form tags. Type and press Enter or comma to add, press Backspace on an empty input to remove the last tag, or remove individual chips with the chip close action. Pass `suggestions` to show an autocomplete list filtered by the current input.
+Controlled chip input for free-form tags. This is intentionally separate from `MultiSelect`: `MultiSelect` selects bounded options, while `TagInput` / `TagsInput` can create arbitrary values and still autocomplete existing tags. Type and press Enter or comma to add, press Backspace on an empty input to remove the last tag, or remove individual chips with the chip close action. Pass `suggestions` to show an autocomplete list filtered by the current input. `creatable` defaults to `true`; set it to `false` to only commit suggestions.
 
 ```tsx
 const [tags, setTags] = useState<string[]>([]);
 
-<TagInput
+<TagsInput
   value={tags}
   onChange={setTags}
   suggestions={existingTags}
+  creatable
   placeholder="Add Tag"
 />
 ```
@@ -715,7 +717,7 @@ React Hook Form:
   name="order_tag"
   control={control}
   render={({ field }) => (
-    <TagInput
+    <TagsInput
       value={field.value ?? []}
       onChange={field.onChange}
       suggestions={allTags}
@@ -730,7 +732,7 @@ Angular custom element:
 ```html
 <bfrs-tag-input
   placeholder="Add Tag"
-  [props]="{ values: orderTags, suggestions: allTags }"
+  [props]="{ values: orderTags, suggestions: allTags, creatable: true }"
   (value-change)="orderTags = $event.detail.values">
 </bfrs-tag-input>
 ```
@@ -740,6 +742,7 @@ Angular custom element:
 | `value` | `string[]` | **required** |
 | `onChange` | `(value: string[]) => void` | **required** |
 | `suggestions` | `string[]` | `[]` |
+| `creatable` | `boolean` | `true` |
 | `placeholder` | `string` | `"Add tag"` |
 | `maxSuggestions` | `number` | `8` |
 | `size` | `"sm" \| "md"` | `"md"` |
@@ -914,10 +917,11 @@ Use `FormField` around controls that do not own a label. This keeps Quantity and
     </FormField>
 
     <FormField label="Order tags">
-      <TagInput
+      <TagsInput
         value={orderTags}
         onChange={setOrderTags}
         suggestions={allTags}
+        creatable
         placeholder="Add Tag"
       />
     </FormField>
@@ -958,7 +962,7 @@ Angular / Custom Elements:
 
   <bfrs-form-field label="Order tags">
     <bfrs-tag-input
-      [props]="{ values: orderTags, suggestions: allTags }"
+      [props]="{ values: orderTags, suggestions: allTags, creatable: true }"
       (value-change)="orderTags = $event.detail.values">
     </bfrs-tag-input>
   </bfrs-form-field>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bfrs/agentic-components",
-  "version": "0.4.9",
+  "version": "0.5.0",
   "private": false,
   "description": "Shiprocket agentic component library and documentation showcase.",
   "keywords": [