@bfrs/agentic-components 0.3.7 → 0.3.9

package/README.md

@@ -262,7 +262,30 @@ The standalone helpers are available as `bfrs-table-toolbar`,
 `bfrs-table-row-actions`, `bfrs-table-bulk-actions`, and
 `bfrs-table-column-visibility`.
 
-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-data-table`, `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`, 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-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-data-table`, `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:
+
+```tsx
+import { HorizontalStepper } from "@bfrs/agentic-components";
+
+<HorizontalStepper
+  announcement="Great Choice! Early COD Remittance activation in progress.."
+  closeButton
+  onClose={handleClose}
+  currentStep={0}
+  title="Select a Plan"
+  subheading="Get guaranteed remittance from the shipment delivered date."
+  size="sm"
+  variant="primary"
+  steps={[
+    { label: "Select Plan", secondaryText: "Choose payout speed" },
+    { label: "Verify OTP", secondaryText: "Confirm activation" }
+  ]}
+/>
+```
+
+Use `variant="primary" | "success" | "info" | "warning" | "neutral"` for semantic color treatment, and `size="sm" | "md"` for compact or roomier layouts.
 
 ## Theme Overrides
 
@@ -357,10 +380,10 @@ function SaveButton() {
 
 ### Checkbox
 
-Use `Checkbox` for independent true/false decisions or multi-select choices. It renders as a square checklist control, while `Radio` renders circular options for single-choice groups.
+Use `Checkbox` for independent true/false decisions or multi-select choices. It renders as a square checklist control, while `Radio` renders circular options for single-choice groups. Both support primary text plus secondary description text.
 
 ```tsx
-import { Checkbox } from "@bfrs/agentic-components";
+import { Checkbox, Radio } from "@bfrs/agentic-components";
 
 <Checkbox
   label="Accept terms"
@@ -370,6 +393,14 @@ import { Checkbox } from "@bfrs/agentic-components";
 />
 
 <Checkbox label="Partially selected" checked="indeterminate" />
+
+<Radio
+  options={[
+    { value: "registered", label: "Registered business", description: "Company GST and business KYC are available." },
+    { value: "individual", label: "Individual seller", description: "Use personal details for seller verification." }
+  ]}
+  defaultValue="registered"
+/>
 ```
 
 ## Development

package/dist/components/data-display/DataTable/DataTable.types.d.ts

@@ -3,6 +3,7 @@ import { ActionMenuItem } from '../../navigation/ActionMenu';
 export type SortDirection = "asc" | "desc";
 export type TableDensity = "compact" | "default" | "comfortable";
 export type TableAlign = "left" | "center" | "right";
+export type TablePaginationVariant = "indexed" | "simple";
 export type DataTableSorting = {
     columnId: string;
     direction: SortDirection;
@@ -45,6 +46,8 @@ export type DataTableLeadingColumn<Row> = {
 export type DataTablePagination = {
     page: number;
     totalPages: number;
+    /** "indexed" shows Prev, page numbers, and Next. "simple" shows only Prev and Next. */
+    variant?: TablePaginationVariant;
     pageSize?: number;
     totalItems?: number;
     pageSizeOptions?: number[];

package/dist/components/data-display/DataTable/TablePagination.d.ts

@@ -1,2 +1,2 @@
 import { TablePaginationProps } from './DataTable.types';
-export declare function TablePagination({ page, totalPages, pageSize, totalItems, pageSizeOptions, onPageChange, onPageSizeChange, itemLabel, itemsPerPageLabel, className, pageSizeControl, showPageNavigation }: TablePaginationProps): import("react/jsx-runtime").JSX.Element;
+export declare function TablePagination({ page, totalPages, variant, pageSize, totalItems, pageSizeOptions, onPageChange, onPageSizeChange, itemLabel, itemsPerPageLabel, className, pageSizeControl, showPageNavigation }: TablePaginationProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-display/DataTable/TableSaveView.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { TableColumnVisibilityColumn } from './DataTable.types';
+export type TableSaveViewPayload = {
+    name: string;
+    visibleColumnIds: string[];
+    hiddenColumnCount: number;
+    filtersCount: number;
+    appliedSettingLabels: string[];
+};
+export type TableSaveViewProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onClose?: () => void;
+    trigger?: ReactNode;
+    triggerLabel?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    viewName?: string;
+    defaultViewName?: string;
+    onViewNameChange?: (viewName: string) => void;
+    viewNameLabel?: ReactNode;
+    viewNamePlaceholder?: string;
+    appliedLabel?: ReactNode;
+    appliedSettings?: ReactNode;
+    appliedSettingLabels?: string[];
+    columns?: TableColumnVisibilityColumn[];
+    visibleColumnIds?: string[];
+    hiddenColumnCount?: number;
+    filtersCount?: number;
+    cancelLabel?: ReactNode;
+    saveLabel?: ReactNode;
+    onCancel?: () => void;
+    onSave?: (payload: TableSaveViewPayload) => void | Promise<void>;
+    loading?: boolean;
+    disabled?: boolean;
+    closeOnSave?: boolean;
+    closeOnOverlayClick?: boolean;
+    closeOnEscape?: boolean;
+    preventClose?: boolean;
+    className?: string;
+    triggerClassName?: string;
+};
+export declare function TableSaveView({ open, defaultOpen, onOpenChange, onClose, trigger, triggerLabel, title, description, viewName, defaultViewName, onViewNameChange, viewNameLabel, viewNamePlaceholder, appliedLabel, appliedSettings, appliedSettingLabels, columns, visibleColumnIds, hiddenColumnCount, filtersCount, cancelLabel, saveLabel, onCancel, onSave, loading, disabled, closeOnSave, closeOnOverlayClick, closeOnEscape, preventClose, className, triggerClassName }: TableSaveViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-display/DataTable/index.d.ts

@@ -8,3 +8,4 @@ export * from './TableErrorState';
 export * from './TableRowActions';
 export * from './TableBulkActions';
 export * from './TableColumnVisibility';
+export * from './TableSaveView';

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

@@ -2,6 +2,7 @@ import { HTMLAttributes, ReactNode } from 'react';
 import { VariantProps } from 'class-variance-authority';
 declare const alertVariants: (props?: ({
     tone?: "success" | "warning" | "danger" | "info" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & VariantProps<typeof alertVariants> & {
     title?: ReactNode;
@@ -10,6 +11,7 @@ export type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & Variant
 };
 export declare const Alert: import('react').ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title"> & VariantProps<(props?: ({
     tone?: "success" | "warning" | "danger" | "info" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & {
     title?: ReactNode;
     action?: ReactNode;

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

@@ -1,7 +1,9 @@
+import { ReactNode } from 'react';
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 export type RadioOption = {
     value: string;
-    label: string;
+    label: ReactNode;
+    description?: ReactNode;
     disabled?: boolean;
 };
 export type RadioProps = RadioGroupPrimitive.RadioGroupProps & {

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

@@ -66,6 +66,7 @@ export * from './patterns/ChatBubble';
 export * from './patterns/ChatComposer';
 export * from './patterns/FullPageLoader';
 export * from './patterns/BusinessInfoDisplayCard';
+export * from './patterns/HorizontalStepper';
 export * from './patterns/StepProgressCard';
 export * from './patterns/RevealAndCopy';
 export * from './patterns/Collapsible';

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

@@ -0,0 +1,45 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type HorizontalStepperState = "done" | "active" | "pending" | "disabled";
+export type HorizontalStepperVariant = "primary" | "success" | "info" | "warning" | "neutral";
+export type HorizontalStepperSize = "sm" | "md";
+export type HorizontalStepperStep = {
+    id?: string;
+    label: ReactNode;
+    secondaryText?: ReactNode;
+    /** Backwards-compatible alias for secondaryText. Prefer secondaryText for new code. */
+    description?: ReactNode;
+    status?: HorizontalStepperState;
+    disabled?: boolean;
+};
+export type HorizontalStepperProps = HTMLAttributes<HTMLElement> & {
+    steps: HorizontalStepperStep[];
+    currentStep?: number;
+    title?: ReactNode;
+    subheading?: ReactNode;
+    /** Backwards-compatible alias for subheading. Prefer subheading for new code. */
+    description?: ReactNode;
+    announcement?: ReactNode;
+    closeButton?: boolean;
+    closeLabel?: string;
+    onClose?: () => void;
+    onStepSelect?: (step: HorizontalStepperStep, index: number) => void;
+    size?: HorizontalStepperSize;
+    surface?: "card" | "plain";
+    variant?: HorizontalStepperVariant;
+};
+export declare const HorizontalStepper: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    steps: HorizontalStepperStep[];
+    currentStep?: number;
+    title?: ReactNode;
+    subheading?: ReactNode;
+    /** Backwards-compatible alias for subheading. Prefer subheading for new code. */
+    description?: ReactNode;
+    announcement?: ReactNode;
+    closeButton?: boolean;
+    closeLabel?: string;
+    onClose?: () => void;
+    onStepSelect?: (step: HorizontalStepperStep, index: number) => void;
+    size?: HorizontalStepperSize;
+    surface?: "card" | "plain";
+    variant?: HorizontalStepperVariant;
+} & import('react').RefAttributes<HTMLElement>>;

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

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

package/dist/custom-elements.d.ts

@@ -607,6 +607,12 @@ export declare class BfrsTableColumnVisibilityElement extends ReactCustomElement
     static get observedAttributes(): string[];
     protected renderElement(): unknown;
 }
+export declare class BfrsTableSaveViewElement extends OpenCustomElement {
+    static readonly tagName = "table-save-view";
+    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[];
@@ -755,6 +761,7 @@ export declare class BfrsAccordionElement extends ReactCustomElement {
     static get observedAttributes(): string[];
     protected defaultDisplay(): string;
     private accordionDefaultValue;
+    private accordionValue;
     protected renderElement(): unknown;
 }
 export declare class BfrsSummaryBarElement extends ReactCustomElement {
@@ -780,6 +787,12 @@ export declare class BfrsStepProgressCardElement extends ReactCustomElement {
     protected defaultDisplay(): string;
     protected renderElement(): unknown;
 }
+export declare class BfrsHorizontalStepperElement extends ReactCustomElement {
+    static readonly tagName = "horizontal-stepper";
+    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[];
@@ -877,6 +890,7 @@ declare global {
         "bfrs-skeleton": BfrsSkeletonElement;
         "bfrs-spinner": BfrsSpinnerElement;
         "bfrs-stack": BfrsStackElement;
+        "bfrs-horizontal-stepper": BfrsHorizontalStepperElement;
         "bfrs-step-progress-card": BfrsStepProgressCardElement;
         "bfrs-step-progress-card-skeleton": BfrsStepProgressCardSkeletonElement;
         "bfrs-suggest-input": BfrsSuggestInputElement;
@@ -890,6 +904,7 @@ declare global {
         "bfrs-table-row-actions": BfrsTableRowActionsElement;
         "bfrs-table-bulk-actions": BfrsTableBulkActionsElement;
         "bfrs-table-column-visibility": BfrsTableColumnVisibilityElement;
+        "bfrs-table-save-view": BfrsTableSaveViewElement;
         "bfrs-tabs": BfrsTabsElement;
         "bfrs-tabs-list": BfrsTabsListElement;
         "bfrs-tabs-trigger": BfrsTabsTriggerElement;