@bfrs/agentic-components 0.1.7 → 0.1.9

package/BFRS_AGENTIC_COMPONENTS.md

@@ -8,12 +8,7 @@ correct, idiomatic UI code without guessing.
 
 ## Installation
 
-Configure npm auth in the consuming app:
-
-```ini
-registry=https://registry.npmjs.org/
-//registry.npmjs.org/:_authToken=${NPM_TOKEN}
-```
+Install from the public npm registry:
 
 ```bash
 npm install @bfrs/agentic-components
@@ -35,6 +30,60 @@ import { Button, Input, Modal, DataTable, DateRangePicker, ToastProvider, useToa
 
 **Peer dependencies required:** `react >= 18.2.0`, `react-dom >= 18.2.0`
 
+### Angular / Custom Elements
+
+Angular consumers should use the Custom Elements bridge instead of importing React components directly:
+
+```ts
+// main.ts
+import "@bfrs/agentic-components/custom-elements";
+```
+
+```scss
+/* styles.scss */
+@import "@bfrs/agentic-components/styles";
+```
+
+Add `CUSTOM_ELEMENTS_SCHEMA` where the tags are rendered:
+
+```ts
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from "@angular/core";
+
+@Component({
+  selector: "app-agentic-example",
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `
+    <bfrs-input label="Pickup pincode" (value-change)="pickup = $event.detail.value"></bfrs-input>
+    <bfrs-button variant="primary" (click)="continue()">Continue</bfrs-button>
+  `
+})
+export class AgenticExampleComponent {
+  pickup = "";
+  continue() {}
+}
+```
+
+Registered tags cover the documented component surface: `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`.
+
+Use attributes for simple props: `variant`, `size`, `tone`, `label`, `loading`, `disabled`, `required`, `error-message`, `helper-text`, `prefix`, `suffix`. Use `[props]` or the `props` JSON attribute for structured props like `options`, `items`, `columns`, `data`, `sections`, `steps`, and `toasts`.
+
+Common Angular 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)`.
+
+```html
+<bfrs-select
+  placeholder="Channel"
+  [props]="{ options: channelOptions, value: channel }"
+  (value-change)="channel = $event.detail.value">
+</bfrs-select>
+
+<bfrs-data-table
+  [props]="{ data: orders, columns: orderColumns, selection: true }"
+  (row-click)="openOrder($event.detail.row)"
+  (sort-change)="sorting = $event.detail.sorting">
+</bfrs-data-table>
+```
+
 ---
 
 ## Design System Conventions

package/README.md

@@ -1,21 +1,14 @@
 # Agentic Components
 
-Production-grade React component library for Shiprocket agentic interfaces.
+Production-grade component library for Shiprocket agentic interfaces. React consumers use the native React exports; Angular consumers use the packaged Custom Elements bridge.
 
 - Repository: https://github.com/bfrs/agentic-components
-- Showcase: https://bfrs.github.io/agentic-components/
+- Showcase: https://agentic-components.vercel.app/
 - Package: `@bfrs/agentic-components`
 
 ## Install
 
-Configure npm auth in the consuming app:
-
-```ini
-registry=https://registry.npmjs.org/
-//registry.npmjs.org/:_authToken=${NPM_TOKEN}
-```
-
-Then install:
+Install from the public npm registry:
 
 ```bash
 npm install @bfrs/agentic-components
@@ -27,7 +20,7 @@ During install, the package writes `BFRS_AGENTIC_COMPONENTS.md` into the consumi
 Use BFRS_AGENTIC_COMPONENTS.md for knowledge regarding the component library.
 ```
 
-## Usage
+## React Usage
 
 ```tsx
 import "@bfrs/agentic-components/styles";
@@ -49,6 +42,60 @@ Most DOM-backed components forward compatible React props such as `onClick`, `on
 
 Size-aware controls support `sm`, `md`, and `lg`. `sm` is the compact dashboard size for dense controls and filters.
 
+## Angular Usage
+
+Angular apps should import the custom element registry once and include the shared stylesheet globally:
+
+```ts
+// main.ts
+import "@bfrs/agentic-components/custom-elements";
+```
+
+```scss
+/* styles.scss */
+@import "@bfrs/agentic-components/styles";
+```
+
+Add `CUSTOM_ELEMENTS_SCHEMA` to the module or standalone component that renders the tags:
+
+```ts
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from "@angular/core";
+
+@Component({
+  selector: "app-example",
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `
+    <bfrs-input label="Pickup pincode" (value-change)="pickup = $event.detail.value"></bfrs-input>
+    <bfrs-button variant="primary" (click)="continue()">Continue</bfrs-button>
+  `
+})
+export class ExampleComponent {
+  pickup = "";
+  continue() {}
+}
+```
+
+The custom-elements entrypoint registers Angular-friendly tags for the documented component surface, including layout, forms, feedback, overlays, filters, data display, navigation, and agentic pattern components.
+
+Use simple attributes for primitive values and `[props]` for structured values or callback-capable advanced props:
+
+```html
+<bfrs-select
+  placeholder="Channel"
+  [props]="{ options: channelOptions, value: channel }"
+  (value-change)="channel = $event.detail.value">
+</bfrs-select>
+
+<bfrs-data-table
+  [props]="{ data: orders, columns: orderColumns, selection: true }"
+  (row-click)="openOrder($event.detail.row)"
+  (sort-change)="sorting = $event.detail.sorting">
+</bfrs-data-table>
+```
+
+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`.
+
 ### DateRangePicker
 
 Use `DateRangePicker` for preset and custom date-range filters. Keep API date formatting in the consuming app.
@@ -114,7 +161,7 @@ npm run build:demo
 
 ## Publishing
 
-Package publishing is configured for npmjs private packages. Publish only through the controlled release flow:
+Package publishing is configured for npmjs public packages. Publish only through the controlled release flow:
 
 ```bash
 npm run changeset
@@ -127,6 +174,10 @@ The `Publish Package` GitHub Action publishes to npmjs on version tags, publishe
 
 ## Showcase Deployment
 
-The `Deploy Showcase` GitHub Action builds `dist-demo` and deploys it to GitHub Pages on pushes to `main`.
+The public documentation is hosted at https://agentic-components.vercel.app/.
+
+The showcase build target is `dist-demo`:
 
-In the GitHub repository settings, set Pages source to **GitHub Actions**.
+```bash
+npm run build:demo
+```

package/dist/custom-elements.d.ts

@@ -0,0 +1,484 @@
+type UnknownProps = Record<string, unknown>;
+type CheckedValue = boolean | "indeterminate";
+export type BfrsCustomElementRegistryOptions = {
+    prefix?: string;
+};
+declare abstract class ReactCustomElement extends HTMLElement {
+    private root;
+    private initialText;
+    private initialHtml;
+    private propertyProps;
+    get props(): UnknownProps;
+    set props(value: UnknownProps);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    protected abstract renderElement(): unknown;
+    protected defaultDisplay(): string;
+    protected update(): void;
+    protected textAttribute(name: string, fallback?: string): string | undefined;
+    protected classNameAttribute(): string | undefined;
+    protected slottedText(fallback?: string): string | undefined;
+    protected htmlContent(fallback?: string): unknown;
+    protected booleanAttribute(name: string, fallback?: boolean): boolean;
+    protected numberAttribute(name: string): number | undefined;
+    protected jsonAttribute<Value>(name: string, fallback: Value): Value;
+    protected mergedProps(): {
+        [x: string]: unknown;
+    };
+    protected propValue<Value>(name: string, fallback?: Value): Value | undefined;
+    protected arrayValue<Value>(name: string, fallback?: Value[]): Value[];
+    protected objectValue<Value extends UnknownProps>(name: string, fallback: Value): Value;
+    protected emit(name: string, detail?: unknown): void;
+    private applyDefaultDisplay;
+}
+declare abstract class ComponentCustomElement extends ReactCustomElement {
+    protected abstract component(): unknown;
+    protected attributeProps(): UnknownProps;
+    protected contentNode(): unknown;
+    protected renderElement(): unknown;
+}
+export declare class BfrsButtonElement extends ReactCustomElement {
+    static readonly tagName = "button";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
+export declare class BfrsInputElement extends ReactCustomElement {
+    static readonly tagName = "input";
+    static get observedAttributes(): string[];
+    private controlledValue;
+    get value(): string;
+    set value(value: string);
+    attributeChangedCallback(name?: string, oldValue?: string | null, newValue?: string | null): void;
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+    private dispatchValueChange;
+}
+export declare class BfrsBadgeElement extends ReactCustomElement {
+    static readonly tagName = "badge";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
+export declare class BfrsChipElement extends ReactCustomElement {
+    static readonly tagName = "chip";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
+export declare class BfrsAlertElement extends ReactCustomElement {
+    static readonly tagName = "alert";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsSkeletonElement extends ReactCustomElement {
+    static readonly tagName = "skeleton";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
+declare abstract class OpenCustomElement extends ReactCustomElement {
+    private controlledOpen;
+    get open(): boolean;
+    set open(value: boolean);
+    attributeChangedCallback(name?: string, oldValue?: string | null, newValue?: string | null): void;
+    protected handleOpenChange: (open: boolean) => void;
+}
+declare abstract class ValueCustomElement extends ReactCustomElement {
+    private controlledValue;
+    get value(): string | undefined;
+    set value(value: string | undefined);
+    attributeChangedCallback(name?: string, oldValue?: string | null, newValue?: string | null): void;
+}
+export declare class BfrsBoxElement extends ComponentCustomElement {
+    static readonly tagName = "box";
+    static get observedAttributes(): string[];
+    protected component(): unknown;
+    protected attributeProps(): UnknownProps;
+}
+export declare class BfrsContainerElement extends ComponentCustomElement {
+    static readonly tagName = "container";
+    static get observedAttributes(): string[];
+    protected component(): unknown;
+    protected defaultDisplay(): string;
+    protected attributeProps(): UnknownProps;
+}
+export declare class BfrsPaperElement extends ComponentCustomElement {
+    static readonly tagName = "paper";
+    static get observedAttributes(): string[];
+    protected component(): unknown;
+    protected defaultDisplay(): string;
+    protected attributeProps(): UnknownProps;
+}
+export declare class BfrsStackElement extends ComponentCustomElement {
+    static readonly tagName = "stack";
+    static get observedAttributes(): string[];
+    protected component(): unknown;
+    protected defaultDisplay(): string;
+    protected attributeProps(): UnknownProps;
+}
+export declare class BfrsGridElement extends ComponentCustomElement {
+    static readonly tagName = "grid";
+    static get observedAttributes(): string[];
+    protected component(): unknown;
+    protected defaultDisplay(): string;
+    protected attributeProps(): UnknownProps;
+}
+export declare class BfrsTextElement extends ComponentCustomElement {
+    static readonly tagName = "text";
+    static get observedAttributes(): string[];
+    protected component(): unknown;
+    protected attributeProps(): UnknownProps;
+}
+export declare class BfrsIconElement extends ReactCustomElement {
+    static readonly tagName = "icon";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
+export declare class BfrsIconButtonElement extends ReactCustomElement {
+    static readonly tagName = "icon-button";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
+export declare class BfrsCardElement extends ComponentCustomElement {
+    static readonly tagName = "card";
+    static get observedAttributes(): string[];
+    protected component(): unknown;
+    protected defaultDisplay(): string;
+    protected attributeProps(): UnknownProps;
+}
+export declare class BfrsCardHeaderElement extends ComponentCustomElement {
+    static readonly tagName = "card-header";
+    static get observedAttributes(): string[];
+    protected component(): unknown;
+}
+export declare class BfrsCardContentElement extends ComponentCustomElement {
+    static readonly tagName = "card-content";
+    static get observedAttributes(): string[];
+    protected component(): unknown;
+}
+export declare class BfrsCardFooterElement extends ComponentCustomElement {
+    static readonly tagName = "card-footer";
+    static get observedAttributes(): string[];
+    protected component(): unknown;
+}
+export declare class BfrsLabelElement extends ComponentCustomElement {
+    static readonly tagName = "label";
+    static get observedAttributes(): string[];
+    protected component(): unknown;
+    protected attributeProps(): UnknownProps;
+}
+export declare class BfrsTextareaElement extends ReactCustomElement {
+    static readonly tagName = "textarea";
+    static get observedAttributes(): string[];
+    private controlledValue;
+    get value(): string;
+    set value(value: string);
+    attributeChangedCallback(name?: string, oldValue?: string | null, newValue?: string | null): void;
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsFormFieldElement extends ReactCustomElement {
+    static readonly tagName = "form-field";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsSelectElement extends ValueCustomElement {
+    static readonly tagName = "select";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsSearchableSelectElement extends ValueCustomElement {
+    static readonly tagName = "searchable-select";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
+export declare class BfrsCheckboxElement extends ReactCustomElement {
+    static readonly tagName = "checkbox";
+    static get observedAttributes(): string[];
+    private checkedValue;
+    get checked(): CheckedValue;
+    set checked(value: CheckedValue);
+    attributeChangedCallback(name?: string, oldValue?: string | null, newValue?: string | null): void;
+    protected renderElement(): unknown;
+}
+export declare class BfrsRadioElement extends ValueCustomElement {
+    static readonly tagName = "radio";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
+export declare class BfrsSwitchElement extends ReactCustomElement {
+    static readonly tagName = "switch";
+    static get observedAttributes(): string[];
+    private checkedValue;
+    get checked(): boolean;
+    set checked(value: boolean);
+    attributeChangedCallback(name?: string, oldValue?: string | null, newValue?: string | null): void;
+    protected renderElement(): unknown;
+}
+export declare class BfrsSpinnerElement extends ReactCustomElement {
+    static readonly tagName = "spinner";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
+export declare class BfrsEmptyStateElement extends ReactCustomElement {
+    static readonly tagName = "empty-state";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsErrorStateElement extends ReactCustomElement {
+    static readonly tagName = "error-state";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsLoadingStateElement extends ReactCustomElement {
+    static readonly tagName = "loading-state";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsToastManagerElement extends ReactCustomElement {
+    static readonly tagName = "toast-manager";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
+export declare class BfrsModalElement extends OpenCustomElement {
+    static readonly tagName = "modal";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsDrawerElement extends OpenCustomElement {
+    static readonly tagName = "drawer";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsConfirmDialogElement extends OpenCustomElement {
+    static readonly tagName = "confirm-dialog";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
+export declare class BfrsDropdownElement extends ReactCustomElement {
+    static readonly tagName = "dropdown";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
+export declare class BfrsActionMenuElement extends ReactCustomElement {
+    static readonly tagName = "action-menu";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
+export declare class BfrsTooltipElement extends ReactCustomElement {
+    static readonly tagName = "tooltip";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
+export declare class BfrsPopoverElement extends ReactCustomElement {
+    static readonly tagName = "popover";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
+export declare class BfrsAvatarElement extends ReactCustomElement {
+    static readonly tagName = "avatar";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
+export declare class BfrsMetricCardElement extends ReactCustomElement {
+    static readonly tagName = "metric-card";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsTablePaginationElement extends ReactCustomElement {
+    static readonly tagName = "table-pagination";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsDataTableElement extends ReactCustomElement {
+    static readonly tagName = "data-table";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsTabsElement extends ValueCustomElement {
+    static readonly tagName = "tabs";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
+export declare class BfrsBreadcrumbsElement extends ReactCustomElement {
+    static readonly tagName = "breadcrumbs";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
+export declare class BfrsPageHeaderElement extends ReactCustomElement {
+    static readonly tagName = "page-header";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsSectionHeaderElement extends ReactCustomElement {
+    static readonly tagName = "section-header";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsFormSectionElement extends ReactCustomElement {
+    static readonly tagName = "form-section";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsFieldLabelElement extends ComponentCustomElement {
+    static readonly tagName = "field-label";
+    static get observedAttributes(): string[];
+    protected component(): unknown;
+    protected attributeProps(): UnknownProps;
+}
+export declare class BfrsHelperTextElement extends ComponentCustomElement {
+    static readonly tagName = "helper-text";
+    static get observedAttributes(): string[];
+    protected component(): unknown;
+}
+export declare class BfrsInlineErrorElement extends ComponentCustomElement {
+    static readonly tagName = "inline-error";
+    static get observedAttributes(): string[];
+    protected component(): unknown;
+}
+export declare class BfrsFilterBarElement extends ReactCustomElement {
+    static readonly tagName = "filter-bar";
+    static get observedAttributes(): string[];
+    private searchValue;
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsFilterDrawerElement extends OpenCustomElement {
+    static readonly tagName = "filter-drawer";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
+export declare class BfrsDateRangePickerElement extends OpenCustomElement {
+    static readonly tagName = "date-range-picker";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
+export declare class BfrsLayoutShellElement extends ReactCustomElement {
+    static readonly tagName = "layout-shell";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsChatBubbleElement extends ReactCustomElement {
+    static readonly tagName = "chat-bubble";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsChatComposerElement extends ReactCustomElement {
+    static readonly tagName = "chat-composer";
+    static get observedAttributes(): string[];
+    private controlledValue;
+    get value(): string;
+    set value(value: string);
+    attributeChangedCallback(name?: string, oldValue?: string | null, newValue?: string | null): void;
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsFullPageLoaderElement extends ReactCustomElement {
+    static readonly tagName = "full-page-loader";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsBusinessInfoDisplayCardElement extends ReactCustomElement {
+    static readonly tagName = "business-info-display-card";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsBusinessInfoDisplayCardSkeletonElement extends ReactCustomElement {
+    static readonly tagName = "business-info-display-card-skeleton";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
+export declare class BfrsStepProgressCardElement extends ReactCustomElement {
+    static readonly tagName = "step-progress-card";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsStepProgressCardSkeletonElement extends ReactCustomElement {
+    static readonly tagName = "step-progress-card-skeleton";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
+export declare function defineBfrsAgenticElements(options?: BfrsCustomElementRegistryOptions): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        "bfrs-action-menu": BfrsActionMenuElement;
+        "bfrs-alert": BfrsAlertElement;
+        "bfrs-avatar": BfrsAvatarElement;
+        "bfrs-badge": BfrsBadgeElement;
+        "bfrs-box": BfrsBoxElement;
+        "bfrs-breadcrumbs": BfrsBreadcrumbsElement;
+        "bfrs-business-info-display-card": BfrsBusinessInfoDisplayCardElement;
+        "bfrs-business-info-display-card-skeleton": BfrsBusinessInfoDisplayCardSkeletonElement;
+        "bfrs-button": BfrsButtonElement;
+        "bfrs-card": BfrsCardElement;
+        "bfrs-card-content": BfrsCardContentElement;
+        "bfrs-card-footer": BfrsCardFooterElement;
+        "bfrs-card-header": BfrsCardHeaderElement;
+        "bfrs-chat-bubble": BfrsChatBubbleElement;
+        "bfrs-chat-composer": BfrsChatComposerElement;
+        "bfrs-checkbox": BfrsCheckboxElement;
+        "bfrs-chip": BfrsChipElement;
+        "bfrs-confirm-dialog": BfrsConfirmDialogElement;
+        "bfrs-container": BfrsContainerElement;
+        "bfrs-data-table": BfrsDataTableElement;
+        "bfrs-date-range-picker": BfrsDateRangePickerElement;
+        "bfrs-drawer": BfrsDrawerElement;
+        "bfrs-dropdown": BfrsDropdownElement;
+        "bfrs-empty-state": BfrsEmptyStateElement;
+        "bfrs-error-state": BfrsErrorStateElement;
+        "bfrs-field-label": BfrsFieldLabelElement;
+        "bfrs-filter-bar": BfrsFilterBarElement;
+        "bfrs-filter-drawer": BfrsFilterDrawerElement;
+        "bfrs-form-field": BfrsFormFieldElement;
+        "bfrs-form-section": BfrsFormSectionElement;
+        "bfrs-full-page-loader": BfrsFullPageLoaderElement;
+        "bfrs-grid": BfrsGridElement;
+        "bfrs-helper-text": BfrsHelperTextElement;
+        "bfrs-icon": BfrsIconElement;
+        "bfrs-icon-button": BfrsIconButtonElement;
+        "bfrs-inline-error": BfrsInlineErrorElement;
+        "bfrs-input": BfrsInputElement;
+        "bfrs-label": BfrsLabelElement;
+        "bfrs-layout-shell": BfrsLayoutShellElement;
+        "bfrs-loading-state": BfrsLoadingStateElement;
+        "bfrs-metric-card": BfrsMetricCardElement;
+        "bfrs-modal": BfrsModalElement;
+        "bfrs-page-header": BfrsPageHeaderElement;
+        "bfrs-paper": BfrsPaperElement;
+        "bfrs-popover": BfrsPopoverElement;
+        "bfrs-radio": BfrsRadioElement;
+        "bfrs-searchable-select": BfrsSearchableSelectElement;
+        "bfrs-section-header": BfrsSectionHeaderElement;
+        "bfrs-select": BfrsSelectElement;
+        "bfrs-skeleton": BfrsSkeletonElement;
+        "bfrs-spinner": BfrsSpinnerElement;
+        "bfrs-stack": BfrsStackElement;
+        "bfrs-step-progress-card": BfrsStepProgressCardElement;
+        "bfrs-step-progress-card-skeleton": BfrsStepProgressCardSkeletonElement;
+        "bfrs-switch": BfrsSwitchElement;
+        "bfrs-table-pagination": BfrsTablePaginationElement;
+        "bfrs-tabs": BfrsTabsElement;
+        "bfrs-text": BfrsTextElement;
+        "bfrs-textarea": BfrsTextareaElement;
+        "bfrs-toast-manager": BfrsToastManagerElement;
+        "bfrs-tooltip": BfrsTooltipElement;
+    }
+}
+export {};