@bfrs/agentic-components 0.4.9 → 0.5.1

package/BFRS_AGENTIC_COMPONENTS.md

@@ -49,6 +49,7 @@ import {
   NumberStepper,
   SuggestInput,
   TagInput,
+  TagsInput,
   FileDropzone,
   RevealField,
   RevealAndCopy,
@@ -214,6 +215,7 @@ For validated forms, keep client validation, API validation, and submit side eff
 
 - **Control sizes** use `"xs" | "sm" | "md" | "lg"` where supported — default is `"md"` unless noted. Use `xs` for extra-compact dashboard toolbar/filter controls.
 - **Tones** are always `"neutral" | "primary" | "brand" | "success" | "warning" | "danger" | "info"`
+- **Warning visuals** use the shared 11px triangle warning SVG with `#D97706`, `background: rgba(217, 119, 6, 0.08)`, and `border: 1px solid rgba(217, 119, 6, 0.2)` for warning surfaces. Dot, progress, and accent-only warning treatments use the same `#D97706` accent.
 - **Variants** control visual style (filled vs. outline vs. ghost, etc.)
 - All interactive components forward refs and spread native HTML props
 - Styling uses **Tailwind CSS** + **CVA** with the `bfrs-` utility prefix. Use classes such as `bfrs-flex`, `hover:bfrs-bg-primary`, and `bfrs-animate-shimmer` when you intentionally depend on library utilities. Unprefixed classes are treated as host-app classes.
@@ -654,7 +656,7 @@ Combobox with search. Use when options list is long (10+).
 #### `MultiSelect`
 
 Searchable multi-value select. Use for channel/category filters or any bounded list where more than one option can be selected.
-The popover keeps the embedded search input on the same 28px field style as `Input` and `Select`, scrolls only the option list, and keeps Apply/Clear footer actions visible.
+The popover keeps the embedded search input on the same 28px field style as `Input` and `Select`, scrolls only the option list, and keeps Apply/Cancel footer actions visible. In apply mode, Cancel closes the dropdown and discards the draft while Apply commits it; the two default footer buttons each take half of the full dropdown width.
 
 ```tsx
 <MultiSelect
@@ -690,20 +692,26 @@ Angular custom element:
 | `error` | `boolean` | `false` |
 | `clearable` | `boolean` | `true` |
 | `maxVisibleValues` | `number` | `2` |
+| `commitMode` | `"change" \| "apply"` | `"change"` |
+| `applyLabel` | `string` | `"Apply"` |
+| `cancelLabel` | `string` | `"Cancel"` |
+| `applyVariant` | `ButtonVariant` | `"primary"` |
+| `cancelVariant` | `ButtonVariant` | `"secondary"` |
 
 ---
 
-#### `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 +723,7 @@ React Hook Form:
   name="order_tag"
   control={control}
   render={({ field }) => (
-    <TagInput
+    <TagsInput
       value={field.value ?? []}
       onChange={field.onChange}
       suggestions={allTags}
@@ -730,7 +738,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 +748,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 +923,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 +968,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>
@@ -1241,15 +1251,18 @@ Angular: use `left-icon="package"` / `right-icon="arrow-right"` for named Phosph
 #### `Alert`
 
 Contextual message banner. Auto-selects an icon based on tone.
+The warning tone uses the shared 11px triangle warning SVG with `#D97706`, `background: rgba(217, 119, 6, 0.08)`, and `border: 1px solid rgba(217, 119, 6, 0.2)`.
 
 ```tsx
 <Alert
   tone="warning"
   title="Your trial ends in 3 days"
+  message="Upgrade to keep access to all features."
   action={<Button size="sm">Upgrade now</Button>}
->
-  Upgrade to keep access to all features.
-</Alert>
+/>
+
+{/* Title-only single-line alert */}
+<Alert tone="danger" title="Payment failed" />
 
 {/* Sizes: xs | sm | md (default) | lg */}
 <Alert size="xs" tone="info" title="XSmall">Ultra-compact inline alert.</Alert>
@@ -1263,9 +1276,18 @@ Contextual message banner. Auto-selects an icon based on tone.
 | `tone` | `"info" \| "success" \| "warning" \| "danger"` | `"info"` |
 | `size` | `"xs" \| "sm" \| "md" \| "lg"` | `"md"` |
 | `title` | `ReactNode` | — |
+| `message` | `ReactNode` | — |
+| `description` | `ReactNode` | — |
 | `action` | `ReactNode` | — |
 | `icon` | `ReactNode` | auto (from tone) |
 
+Angular: use the default slot for supporting text, or use `message` / `description` attributes for inline body copy. Omit supporting text for a single-line alert.
+
+```html
+<bfrs-alert tone="danger" title="Payment failed" message="Update payment details and retry."></bfrs-alert>
+<bfrs-alert tone="warning" title="Review required"></bfrs-alert>
+```
+
 ---
 
 #### `InfoCard`
@@ -1632,7 +1654,7 @@ Angular: `items-per-page-label` attribute.
 
 Generic data table with sorting, loading skeleton, row actions, selection, pagination, and empty/error states.
 
-DataTable has one default visual density, matching the Figma orders table: 8px outer radius, strong `#D3DFD7` outer/header stroke, 46px header, 64px rows, 12px header/body type, 0.24px header letter spacing, 12px selection checkboxes, and a 146px sticky actions column headed `Actions`.
+DataTable has one default visual density, matching the Figma orders table: 8px outer radius, strong `#D3DFD7` outer/header stroke, 38px header, 64px rows, 12px header/body type, 0.24px header letter spacing, 12px selection checkboxes, and a 146px sticky actions column headed `Actions`.
 
 ```tsx
 <DataTable

package/README.md

@@ -257,7 +257,7 @@ save() {
 
 DataTable also accepts declarative `leadingColumn`, `rowActions`,
 `rowClassRules`, `rowIdKey`, `accessorPath`, and `sortValueKey` configuration.
-The default table chrome matches Shiprocket 4.0 Figma: 8px outer radius, strong `#D3DFD7` outer/header stroke, 46px header, 64px rows, 12px text, 12px selection checkboxes, and a 146px sticky actions column headed `Actions`.
+The default table chrome matches Shiprocket 4.0 Figma: 8px outer radius, strong `#D3DFD7` outer/header stroke, 38px header, 64px rows, 12px text, 12px selection checkboxes, and a 146px sticky actions column headed `Actions`.
 The standalone helpers are available as `bfrs-table-toolbar`,
 `bfrs-table-empty-state`, `bfrs-table-error-state`, `bfrs-table-skeleton`,
 `bfrs-table-row-actions`, `bfrs-table-bulk-actions`, and

package/dist/components/ui/feedback/Alert/Alert.d.ts

@@ -6,6 +6,8 @@ declare const alertVariants: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & VariantProps<typeof alertVariants> & {
     title?: ReactNode;
+    message?: ReactNode;
+    description?: ReactNode;
     action?: ReactNode;
     icon?: ReactNode;
 };
@@ -14,6 +16,8 @@ export declare const Alert: import('react').ForwardRefExoticComponent<Omit<HTMLA
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & {
     title?: ReactNode;
+    message?: ReactNode;
+    description?: ReactNode;
     action?: ReactNode;
     icon?: ReactNode;
 } & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/ui/feedback/warningVisual.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+export declare const warningAccentColor = "#D97706";
+export declare const warningSurfaceBackground = "rgba(217, 119, 6, 0.08)";
+export declare const warningSurfaceBorder = "1px solid rgba(217, 119, 6, 0.2)";
+export declare const warningSurfaceBorderColor = "rgba(217, 119, 6, 0.2)";
+export declare const warningSurfaceStyle: CSSProperties;
+export declare const warningSurfaceTextStyle: CSSProperties;
+export declare const warningTextStyle: CSSProperties;
+export declare const warningAccentBackgroundStyle: CSSProperties;
+export declare const warningAccentBorderStyle: CSSProperties;
+export declare const warningSoftBorderStyle: CSSProperties;
+export declare function WarningAlertIcon(): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/forms/MultiSelect/MultiSelect.d.ts

@@ -6,7 +6,7 @@ import { SelectMenuWidth, SelectOption } from '../Select';
  * - `"change"` (default) — on every toggle, immediately.
  * - `"apply"` — only when the user confirms with the Apply button (or a custom
  *   footer action). Toggles update an internal draft; closing without applying
- *   discards the draft. A Clear/Apply footer is shown automatically.
+ *   discards the draft. An Apply/Cancel footer is shown automatically.
  */
 export type MultiSelectCommitMode = "change" | "apply";
 export type MultiSelectProps = {
@@ -30,13 +30,15 @@ export type MultiSelectProps = {
     menuWidth?: SelectMenuWidth;
     /** Defer committing the value until applied. Defaults to `"change"`. */
     commitMode?: MultiSelectCommitMode;
-    /** Custom popover footer. Overrides the default Clear/Apply footer. */
+    /** Custom popover footer. Overrides the default Apply/Cancel footer. */
     footer?: ReactNode;
     applyLabel?: string;
+    cancelLabel?: string;
     clearLabel?: string;
     /** Button variant for the default footer Apply action. Defaults to `"primary"`. */
     applyVariant?: ButtonVariant;
-    /** Button variant for the default footer Clear action. Defaults to `"ghost"`. */
+    /** Button variant for the default footer Cancel action. Defaults to `"secondary"`. */
+    cancelVariant?: ButtonVariant;
     clearVariant?: ButtonVariant;
     className?: string;
     id?: string;

package/dist/components/ui/forms/TagInput/TagInput.d.ts

@@ -0,0 +1,23 @@
+export type TagInputProps = {
+    /** Current tags (controlled). */
+    value: string[];
+    /** Fired with the updated list on add / remove. */
+    onChange: (value: string[]) => void;
+    /** Optional existing-tag suggestions for autocomplete (filtered as you type). */
+    suggestions?: string[];
+    /** Allow committing values outside `suggestions` (default true). */
+    creatable?: boolean;
+    placeholder?: string;
+    /** Max suggestions shown in the dropdown (default 8). */
+    maxSuggestions?: number;
+    size?: "sm" | "md";
+    disabled?: boolean;
+    error?: boolean;
+    className?: string;
+    id?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: boolean;
+};
+export declare const TagInput: import('react').ForwardRefExoticComponent<TagInputProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const TagsInput: import('react').ForwardRefExoticComponent<TagInputProps & import('react').RefAttributes<HTMLDivElement>>;
+export type TagsInputProps = TagInputProps;

package/dist/components/ui/forms/TagInput/index.d.ts

@@ -0,0 +1,2 @@
+export { TagInput, TagsInput } from './TagInput';
+export type { TagInputProps, TagsInputProps } from './TagInput';

package/dist/components/ui/index.d.ts

@@ -17,6 +17,7 @@ export * from './forms/FormField';
 export * from './forms/Select';
 export * from './forms/SearchableSelect';
 export * from './forms/MultiSelect';
+export * from './forms/TagInput';
 export * from './forms/SuggestInput';
 export * from './forms/OptionCardGroup';
 export * from './forms/SelectableChipGroup';

package/dist/custom-elements.d.ts

@@ -375,6 +375,20 @@ export declare class BfrsMultiSelectElement extends ReactCustomElement {
     private propsValues;
     private attributeValues;
 }
+export declare class BfrsTagInputElement extends ReactCustomElement {
+    static readonly tagName = "tag-input";
+    static get observedAttributes(): string[];
+    private controlledValues;
+    get values(): string[];
+    set values(values: string[] | undefined);
+    get value(): string[] | string | undefined;
+    set value(value: string[] | string | undefined);
+    attributeChangedCallback(name?: string, oldValue?: string | null, newValue?: string | null): void;
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+    private propsValues;
+    private attributeValues;
+}
 export declare class BfrsSuggestInputElement extends ValueCustomElement {
     static readonly tagName = "suggest-input";
     static get observedAttributes(): string[];
@@ -939,6 +953,7 @@ declare global {
         "bfrs-step-progress-card": BfrsStepProgressCardElement;
         "bfrs-step-progress-card-skeleton": BfrsStepProgressCardSkeletonElement;
         "bfrs-suggest-input": BfrsSuggestInputElement;
+        "bfrs-tag-input": BfrsTagInputElement;
         "bfrs-summary-bar": BfrsSummaryBarElement;
         "bfrs-switch": BfrsSwitchElement;
         "bfrs-table": BfrsTableElement;