@bfrs/agentic-components 0.4.8 → 0.5.0

package/BFRS_AGENTIC_COMPONENTS.md

@@ -48,6 +48,8 @@ import {
   SelectableChipGroup,
   NumberStepper,
   SuggestInput,
+  TagInput,
+  TagsInput,
   FileDropzone,
   RevealField,
   RevealAndCopy,
@@ -437,7 +439,7 @@ Icon-only buttons inherit the same compact control scale: `xs` is 26px, `sm` is
 
 Wraps any form control with label, helper, and error text. Connects them via `aria-describedby`.
 
-The label always renders on its own block row with a `6px` vertical gap before the control. This applies consistently to full-width controls such as `Input` and inline controls such as `NumberStepper`; do not add manual margins between the label and control.
+The label always renders on its own block row with a `6px` vertical gap before the control. This applies consistently to full-width controls such as `Input` and inline controls such as `NumberStepper`; do not add manual margins between the label and control. Form labels use the primary text token, which resolves to `rgb(41, 52, 61)`.
 
 ```tsx
 <FormField
@@ -692,6 +694,63 @@ Angular custom element:
 
 ---
 
+#### `TagInput` / `TagsInput`
+
+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[]>([]);
+
+<TagsInput
+  value={tags}
+  onChange={setTags}
+  suggestions={existingTags}
+  creatable
+  placeholder="Add Tag"
+/>
+```
+
+React Hook Form:
+
+```tsx
+<Controller
+  name="order_tag"
+  control={control}
+  render={({ field }) => (
+    <TagsInput
+      value={field.value ?? []}
+      onChange={field.onChange}
+      suggestions={allTags}
+      placeholder="Add Tag"
+    />
+  )}
+/>
+```
+
+Angular custom element:
+
+```html
+<bfrs-tag-input
+  placeholder="Add Tag"
+  [props]="{ values: orderTags, suggestions: allTags, creatable: true }"
+  (value-change)="orderTags = $event.detail.values">
+</bfrs-tag-input>
+```
+
+| Prop | Type | Default |
+|------|------|---------|
+| `value` | `string[]` | **required** |
+| `onChange` | `(value: string[]) => void` | **required** |
+| `suggestions` | `string[]` | `[]` |
+| `creatable` | `boolean` | `true` |
+| `placeholder` | `string` | `"Add tag"` |
+| `maxSuggestions` | `number` | `8` |
+| `size` | `"sm" \| "md"` | `"md"` |
+| `disabled` | `boolean` | `false` |
+| `error` | `boolean` | `false` |
+
+---
+
 #### `OptionCardGroup`
 
 Bordered selectable option cards for radio-style choices. Supports optional description, icon, disabled state, and help tooltip text.
@@ -856,6 +915,16 @@ Use `FormField` around controls that do not own a label. This keeps Quantity and
         onValueChange={setCity}
       />
     </FormField>
+
+    <FormField label="Order tags">
+      <TagsInput
+        value={orderTags}
+        onChange={setOrderTags}
+        suggestions={allTags}
+        creatable
+        placeholder="Add Tag"
+      />
+    </FormField>
   </Grid>
 
   <FileDropzone
@@ -890,6 +959,13 @@ Angular / Custom Elements:
       (value-change)="city = $event.detail.value">
     </bfrs-suggest-input>
   </bfrs-form-field>
+
+  <bfrs-form-field label="Order tags">
+    <bfrs-tag-input
+      [props]="{ values: orderTags, suggestions: allTags, creatable: true }"
+      (value-change)="orderTags = $event.detail.values">
+    </bfrs-tag-input>
+  </bfrs-form-field>
 </bfrs-grid>
 ```
 

package/README.md

@@ -266,7 +266,7 @@ For custom Angular table layouts where `bfrs-data-table` is too prescriptive,
 use the primitive table tags: `bfrs-table`, `bfrs-thead`, `bfrs-tbody`,
 `bfrs-tfoot`, `bfrs-tr`, `bfrs-th`, and `bfrs-td`.
 
-Registered tags include `bfrs-box`, `bfrs-container`, `bfrs-paper`, `bfrs-stack`, `bfrs-grid`, `bfrs-text`, `bfrs-icon`, `bfrs-button`, `bfrs-button-group`, `bfrs-icon-button`, `bfrs-form-field`, `bfrs-label`, `bfrs-input`, `bfrs-slider`, `bfrs-color-picker`, `bfrs-color-swatch-group`, `bfrs-textarea`, `bfrs-select`, `bfrs-date-range-picker`, `bfrs-searchable-select`, `bfrs-multi-select`, `bfrs-suggest-input`, `bfrs-option-card-group`, `bfrs-selectable-chip-group`, `bfrs-number-stepper`, `bfrs-file-dropzone`, `bfrs-reveal-field`, `bfrs-checkbox`, `bfrs-radio`, `bfrs-switch`, `bfrs-badge`, `bfrs-chip`, `bfrs-alert`, `bfrs-info-card`, `bfrs-tip`, `bfrs-toast-manager`, `bfrs-toast-provider`, `bfrs-spinner`, `bfrs-skeleton`, `bfrs-empty-state`, `bfrs-error-state`, `bfrs-loading-state`, `bfrs-modal`, `bfrs-drawer`, `bfrs-confirm-dialog`, `bfrs-dropdown`, `bfrs-tooltip`, `bfrs-popover`, `bfrs-avatar`, `bfrs-metric-card`, `bfrs-table-pagination`, `bfrs-table-toolbar`, `bfrs-table-empty-state`, `bfrs-table-error-state`, `bfrs-table-skeleton`, `bfrs-table-row-actions`, `bfrs-table-bulk-actions`, `bfrs-table-column-visibility`, `bfrs-table-save-view`, `bfrs-data-table`, `bfrs-table`, `bfrs-thead`, `bfrs-tbody`, `bfrs-tfoot`, `bfrs-tr`, `bfrs-th`, `bfrs-td`, `bfrs-tabs`, `bfrs-tabs-list`, `bfrs-tabs-trigger`, `bfrs-tabs-content`, `bfrs-breadcrumbs`, `bfrs-action-menu`, `bfrs-page-header`, `bfrs-section-header`, `bfrs-layout-shell`, `bfrs-form-section`, `bfrs-filter-bar`, `bfrs-filter-drawer`, `bfrs-chat-bubble`, `bfrs-chat-composer`, `bfrs-full-page-loader`, `bfrs-business-info-display-card`, `bfrs-collapsible`, `bfrs-accordion`, `bfrs-summary-bar`, `bfrs-entity-display-card`, `bfrs-reveal-and-copy`, `bfrs-horizontal-stepper`, and `bfrs-step-progress-card`.
+Registered tags include `bfrs-box`, `bfrs-container`, `bfrs-paper`, `bfrs-stack`, `bfrs-grid`, `bfrs-text`, `bfrs-icon`, `bfrs-button`, `bfrs-button-group`, `bfrs-icon-button`, `bfrs-form-field`, `bfrs-label`, `bfrs-input`, `bfrs-slider`, `bfrs-color-picker`, `bfrs-color-swatch-group`, `bfrs-textarea`, `bfrs-select`, `bfrs-date-range-picker`, `bfrs-searchable-select`, `bfrs-multi-select`, `bfrs-tag-input`, `bfrs-suggest-input`, `bfrs-option-card-group`, `bfrs-selectable-chip-group`, `bfrs-number-stepper`, `bfrs-file-dropzone`, `bfrs-reveal-field`, `bfrs-checkbox`, `bfrs-radio`, `bfrs-switch`, `bfrs-badge`, `bfrs-chip`, `bfrs-alert`, `bfrs-info-card`, `bfrs-tip`, `bfrs-toast-manager`, `bfrs-toast-provider`, `bfrs-spinner`, `bfrs-skeleton`, `bfrs-empty-state`, `bfrs-error-state`, `bfrs-loading-state`, `bfrs-modal`, `bfrs-drawer`, `bfrs-confirm-dialog`, `bfrs-dropdown`, `bfrs-tooltip`, `bfrs-popover`, `bfrs-avatar`, `bfrs-metric-card`, `bfrs-table-pagination`, `bfrs-table-toolbar`, `bfrs-table-empty-state`, `bfrs-table-error-state`, `bfrs-table-skeleton`, `bfrs-table-row-actions`, `bfrs-table-bulk-actions`, `bfrs-table-column-visibility`, `bfrs-table-save-view`, `bfrs-data-table`, `bfrs-table`, `bfrs-thead`, `bfrs-tbody`, `bfrs-tfoot`, `bfrs-tr`, `bfrs-th`, `bfrs-td`, `bfrs-tabs`, `bfrs-tabs-list`, `bfrs-tabs-trigger`, `bfrs-tabs-content`, `bfrs-breadcrumbs`, `bfrs-action-menu`, `bfrs-page-header`, `bfrs-section-header`, `bfrs-layout-shell`, `bfrs-form-section`, `bfrs-filter-bar`, `bfrs-filter-drawer`, `bfrs-chat-bubble`, `bfrs-chat-composer`, `bfrs-full-page-loader`, `bfrs-business-info-display-card`, `bfrs-collapsible`, `bfrs-accordion`, `bfrs-summary-bar`, `bfrs-entity-display-card`, `bfrs-reveal-and-copy`, `bfrs-horizontal-stepper`, and `bfrs-step-progress-card`.
 
 `HorizontalStepper` provides the compact horizontal flow layout with an optional announcement banner and parent-owned `onClose` / `onStepSelect` behavior:
 

package/package.json

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