@bfrs/agentic-components 0.2.0 → 0.2.2

package/BFRS_AGENTIC_COMPONENTS.md

@@ -88,6 +88,8 @@ Use attributes for simple props: `variant`, `size`, `tone`, `label`, `loading`,
 
 Common component events: `(value-change)`, `(checked-change)`, `(open-change)`, `(close)`, `(confirm)`, `(cancel)`, `(row-click)`, `(sort-change)`, `(page-change)`, `(page-size-change)`, `(action-select)`, `(dropdown-select)`, `(date-range-change)`, `(search-change)`, `(open-filters)`, `(apply)`, `(reset)`, and `(submit)`. Payloads are available on `$event.detail`.
 
+For validated forms, keep client validation, API validation, and submit side effects in the consuming app. In React, pass field errors through `FormField errorText` and set `Input error`. In Angular, use `bfrs-input` with `[attr.error]` and `[attr.error-message]`, listen to `(value-change)`, and manage success/failure notifications with `bfrs-toast-manager`.
+
 ```html
 <bfrs-select
   placeholder="Channel"

package/README.md

@@ -114,6 +114,28 @@ Use simple attributes for primitive values and `[props]` for structured values o
 
 Registered tags include `bfrs-box`, `bfrs-container`, `bfrs-paper`, `bfrs-stack`, `bfrs-grid`, `bfrs-text`, `bfrs-icon`, `bfrs-button`, `bfrs-icon-button`, `bfrs-form-field`, `bfrs-label`, `bfrs-input`, `bfrs-textarea`, `bfrs-select`, `bfrs-date-range-picker`, `bfrs-searchable-select`, `bfrs-checkbox`, `bfrs-radio`, `bfrs-switch`, `bfrs-badge`, `bfrs-chip`, `bfrs-alert`, `bfrs-toast-manager`, `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-data-table`, `bfrs-tabs`, `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`, and `bfrs-step-progress-card`.
 
+### Validated Forms
+
+Keep form validation and API checks in the app. Render field errors below inputs, then show success or failure through the toast API.
+
+```tsx
+<FormField label="Pickup pincode" errorText={errors.pickupPincode}>
+  <Input error={Boolean(errors.pickupPincode)} value={pickupPincode} onChange={updatePickupPincode} />
+</FormField>
+```
+
+```html
+<bfrs-input
+  label="Pickup pincode"
+  [value]="pickupPincode"
+  [attr.error]="errors.pickupPincode ? true : null"
+  [attr.error-message]="errors.pickupPincode || null"
+  (value-change)="pickupPincode = $event.detail.value">
+</bfrs-input>
+
+<bfrs-toast-manager [props]="{ toasts: toasts }" (dismiss)="dismissToast($event.detail.id)"></bfrs-toast-manager>
+```
+
 ### DateRangePicker
 
 Use `DateRangePicker` for preset and custom date-range filters. Keep API date formatting in the consuming app.

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

@@ -51,3 +51,6 @@ export * from './patterns/ChatComposer';
 export * from './patterns/FullPageLoader';
 export * from './patterns/BusinessInfoDisplayCard';
 export * from './patterns/StepProgressCard';
+export * from './patterns/CommandMenu';
+export * from './patterns/WorkspaceHeader';
+export * from './patterns/SideNav';

package/dist/components/ui/patterns/CommandMenu/CommandMenu.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+export type CommandMenuTone = "neutral" | "primary" | "success" | "warning" | "danger" | "info";
+export type CommandMenuItem = {
+    /** Stable id for the item. */
+    id: string;
+    /** Primary label, e.g. a command name. */
+    label: ReactNode;
+    /** Secondary description line. */
+    description?: ReactNode;
+    /** Leading icon node, rendered inside a tinted square. */
+    icon?: ReactNode;
+    /** Extra text used for filtering (in addition to a string `label`). */
+    keywords?: string;
+    /** Optional trailing status badge. */
+    status?: {
+        label: ReactNode;
+        tone?: CommandMenuTone;
+    };
+    disabled?: boolean;
+};
+export type CommandMenuProps = {
+    /** Items to render. */
+    items: CommandMenuItem[];
+    /** Current filter query. When set and `filter` is not false, items are filtered. */
+    query?: string;
+    /** Optional uppercase title shown above the list. */
+    title?: ReactNode;
+    /** Text shown when no items match. */
+    emptyText?: ReactNode;
+    /** Whether to internally filter `items` by `query`. Defaults to true. */
+    filter?: boolean;
+    /** Called when an item is selected. */
+    onSelect?: (item: CommandMenuItem) => void;
+    className?: string;
+};
+/**
+ * Searchable command / option palette. Renders a floating-style surface with a
+ * list of icon + label + description rows and optional status badges. Filtering
+ * is internal by default; pass `filter={false}` to control the list yourself.
+ *
+ * The component is position-agnostic — wrap it (or pass `className`) to place it
+ * as a popover above an input, in a dropdown, etc.
+ */
+export declare function CommandMenu({ items, query, title, emptyText, filter, onSelect, className }: CommandMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CommandMenu {
+    var displayName: string;
+}

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

@@ -0,0 +1 @@
+export * from './CommandMenu';

package/dist/components/ui/patterns/SideNav/SideNav.d.ts

@@ -0,0 +1,52 @@
+import { CSSProperties, ReactNode } from 'react';
+export type SideNavSubItem = {
+    id: string;
+    label: ReactNode;
+    onSelect?: () => void;
+};
+export type SideNavItem = {
+    id: string;
+    label: ReactNode;
+    /** Leading icon node. */
+    icon?: ReactNode;
+    active?: boolean;
+    /** Trailing badge/slot (hidden when collapsed). */
+    badge?: ReactNode;
+    /** Hover flyout entries. When present, clicking the row does not call `onSelect`. */
+    nested?: SideNavSubItem[];
+    onSelect?: () => void;
+};
+export type SideNavSection = {
+    id?: string;
+    /** Uppercase section title (hidden when collapsed). */
+    title?: ReactNode;
+    items: SideNavItem[];
+    /** Optional action row shown under the items (e.g. "Create new"). Hidden when collapsed. */
+    action?: ReactNode;
+};
+export type SideNavProps = {
+    sections: SideNavSection[];
+    collapsed?: boolean;
+    /** Expanded width in px. Defaults to 240. */
+    width?: number;
+    /** Collapsed width in px. Defaults to 56. */
+    collapsedWidth?: number;
+    /** Top slot, above the scrollable nav (e.g. a primary CTA). */
+    header?: ReactNode;
+    /** Extra content rendered inside the scroll area after the sections (e.g. a recents list). */
+    children?: ReactNode;
+    /** Bottom slot (e.g. user + settings). */
+    footer?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * Collapsible application sidebar navigation. Renders grouped sections of items
+ * with active state, optional badges, and hover flyouts for nested items, plus
+ * dedicated `header` and `footer` slots. All data (labels, icons, handlers) is
+ * passed in — the component owns layout, collapse behavior, and chrome only.
+ */
+export declare function SideNav({ sections, collapsed, width, collapsedWidth, header, children, footer, className, style }: SideNavProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SideNav {
+    var displayName: string;
+}

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

@@ -0,0 +1 @@
+export * from './SideNav';

package/dist/components/ui/patterns/WorkspaceHeader/WorkspaceHeader.d.ts

@@ -0,0 +1,35 @@
+import { CSSProperties, ReactNode } from 'react';
+export type WorkspaceHeaderProps = {
+    /** Brand block (logo + product name) rendered at the far left. */
+    brand?: ReactNode;
+    /** Fixed width (px) for the brand rail, e.g. to align with a sidebar. Auto when omitted. */
+    brandWidth?: number;
+    /** When provided, renders a sidebar-toggle button next to the brand. */
+    onToggleSidebar?: () => void;
+    /** Accessible label for the sidebar-toggle button. */
+    toggleLabel?: string;
+    /** Optional tab strip, rendered as its own bordered column after the brand. */
+    tabs?: ReactNode;
+    /** Fixed width (px) for the tabs column, e.g. to align with a secondary pane. Auto when omitted. */
+    tabsWidth?: number;
+    /** Search control, placed at the start of the trailing actions area. */
+    search?: ReactNode;
+    /** Trailing action controls (wallet, apps, avatar, …). */
+    actions?: ReactNode;
+    /** Free-form content placed in the main (flex) region before the spacer. */
+    children?: ReactNode;
+    /** Header height in px. Defaults to 52. */
+    height?: number;
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * Application top bar for workspace-style layouts. Slot-based: drop in a brand
+ * block, an optional sidebar toggle, a tab strip, a search control, and trailing
+ * actions. All product-specific logic (which tabs exist, wallet balance, etc.)
+ * stays in the consuming app — this component only owns layout and chrome.
+ */
+export declare function WorkspaceHeader({ brand, brandWidth, onToggleSidebar, toggleLabel, tabs, tabsWidth, search, actions, children, height, className, style }: WorkspaceHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace WorkspaceHeader {
+    var displayName: string;
+}

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

@@ -0,0 +1 @@
+export * from './WorkspaceHeader';

package/dist/custom-elements.d.ts

@@ -422,6 +422,24 @@ export declare class BfrsStepProgressCardSkeletonElement extends ReactCustomElem
     static get observedAttributes(): string[];
     protected renderElement(): unknown;
 }
+export declare class BfrsCommandMenuElement extends ReactCustomElement {
+    static readonly tagName = "command-menu";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsWorkspaceHeaderElement extends ReactCustomElement {
+    static readonly tagName = "workspace-header";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsSideNavElement extends ReactCustomElement {
+    static readonly tagName = "side-nav";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
 export declare function defineBfrsAgenticElements(options?: BfrsCustomElementRegistryOptions): void;
 declare global {
     interface HTMLElementTagNameMap {
@@ -442,6 +460,7 @@ declare global {
         "bfrs-chat-composer": BfrsChatComposerElement;
         "bfrs-checkbox": BfrsCheckboxElement;
         "bfrs-chip": BfrsChipElement;
+        "bfrs-command-menu": BfrsCommandMenuElement;
         "bfrs-confirm-dialog": BfrsConfirmDialogElement;
         "bfrs-container": BfrsContainerElement;
         "bfrs-data-table": BfrsDataTableElement;
@@ -474,6 +493,7 @@ declare global {
         "bfrs-searchable-select": BfrsSearchableSelectElement;
         "bfrs-section-header": BfrsSectionHeaderElement;
         "bfrs-select": BfrsSelectElement;
+        "bfrs-side-nav": BfrsSideNavElement;
         "bfrs-skeleton": BfrsSkeletonElement;
         "bfrs-spinner": BfrsSpinnerElement;
         "bfrs-stack": BfrsStackElement;
@@ -486,6 +506,7 @@ declare global {
         "bfrs-textarea": BfrsTextareaElement;
         "bfrs-toast-manager": BfrsToastManagerElement;
         "bfrs-tooltip": BfrsTooltipElement;
+        "bfrs-workspace-header": BfrsWorkspaceHeaderElement;
     }
 }
 export {};