@bfrs/agentic-components 0.5.0 → 0.5.1

package/BFRS_AGENTIC_COMPONENTS.md

@@ -215,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.
@@ -655,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
@@ -691,6 +692,11 @@ 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"` |
 
 ---
 
@@ -1245,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>
@@ -1267,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`
@@ -1636,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;