@bfrs/agentic-components 0.2.3 → 0.2.4

package/BFRS_AGENTIC_COMPONENTS.md

@@ -25,7 +25,7 @@ import "@bfrs/agentic-components/styles";
 Import components by name:
 
 ```tsx
-import { Button, Input, Slider, ColorPicker, ColorSwatchGroup, Modal, DataTable, DateRangePicker, ToastProvider, useToast } from "@bfrs/agentic-components";
+import { Button, Input, Slider, ColorPicker, ColorSwatchGroup, RevealAndCopy, Modal, DataTable, DateRangePicker, ToastProvider, useToast } from "@bfrs/agentic-components";
 ```
 
 For whole-app theme overrides, import the framework-neutral theme helper:
@@ -96,11 +96,11 @@ Use native Angular DOM event bindings for interactions. Do not pass React-style
 <bfrs-paper (click)="openDetails()">Open details</bfrs-paper>
 ```
 
-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-slider`, `bfrs-color-picker`, `bfrs-color-swatch-group`, `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`.
+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-slider`, `bfrs-color-picker`, `bfrs-color-swatch-group`, `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`, `bfrs-reveal-and-copy`, and `bfrs-step-progress-card`.
 
 Use attributes for simple props: `variant`, `size`, `tone`, `label`, `loading`, `disabled`, `required`, `error-message`, `error-text`, `helper-text`, `prefix`, `suffix`, `min`, `max`, `step`, and `value`. Use `[props]` or the `props` JSON attribute for structured props like `options`, palette arrays, `items`, `columns`, `data`, `sections`, `steps`, and `toasts`.
 
-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`.
+Common component events: `(value-change)`, `(checked-change)`, `(open-change)`, `(reveal-change)`, `(copy)`, `(copy-error)`, `(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`.
 
@@ -1316,6 +1316,54 @@ Branded full-screen loading screen. Use during auth redirects and account setup.
 
 ---
 
+#### `RevealAndCopy`
+
+Masked sensitive-value display with a reveal action and optional clipboard copy. Use for phone numbers, email addresses, tokens, and other values that should not render as plaintext until the user asks to reveal them. The plaintext value is not placed in the DOM while masked.
+
+```tsx
+<RevealAndCopy value={customer.phone} allowCopy />
+
+<RevealAndCopy
+  value={customer.email}
+  allowCopy={false}
+  revealLabel="Show email"
+/>
+```
+
+| Prop | Type | Default |
+|------|------|---------|
+| `value` | `string \| null` | — |
+| `allowCopy` | `boolean` | `true` |
+| `defaultRevealed` | `boolean` | `false` |
+| `revealed` | `boolean` | — |
+| `onRevealChange` | `(revealed: boolean) => void` | — |
+| `onCopy` | `(value: string) => void` | — |
+| `onCopyError` | `(error: unknown) => void` | — |
+| `copyValue` | `string` | `value` |
+| `emptyValue` | `ReactNode` | `"—"` |
+| `maskCharacter` | `string` | `"X"` |
+| `minMaskLength` | `number` | `4` |
+| `stopPropagation` | `boolean` | `true` |
+| `size` | `"xs" \| "sm" \| "md"` | `"sm"` |
+| `revealLabel` | `string` | `"Show value"` |
+| `copyLabel` | `string` | `"Copy value"` |
+| `copiedLabel` | `string` | `"Copied"` |
+
+Angular:
+
+```html
+<bfrs-reveal-and-copy
+  value="9876543210"
+  allow-copy="true"
+  (reveal-change)="revealed = $event.detail.revealed"
+  (copy)="lastCopied = $event.detail.value">
+</bfrs-reveal-and-copy>
+```
+
+Use `allow-copy="false"` when the user should only reveal the value. The component treats empty strings and `—` as missing values and renders `emptyValue`.
+
+---
+
 #### `BusinessInfoDisplayCard`
 
 Rich business identity card with centered profile identity, metadata chips, and compact label-value details. Uses the standard card surface (faded green-grey gradient stroke, white gradient background, green-glow shadow) and the Figma-derived green header wash.

package/README.md

@@ -112,7 +112,7 @@ Use simple attributes for primitive values and `[props]` for structured values o
 </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-slider`, `bfrs-color-picker`, `bfrs-color-swatch-group`, `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`.
+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-slider`, `bfrs-color-picker`, `bfrs-color-swatch-group`, `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`, `bfrs-reveal-and-copy`, and `bfrs-step-progress-card`.
 
 ## Theme Overrides
 

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

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

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

@@ -0,0 +1,66 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type RevealAndCopySize = "xs" | "sm" | "md";
+export type RevealAndCopyProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "onCopy"> & {
+    /** The sensitive value to keep masked until the user reveals it. */
+    value?: string | null;
+    /** Enables the copy action after reveal. */
+    allowCopy?: boolean;
+    /** Initial reveal state for uncontrolled usage. */
+    defaultRevealed?: boolean;
+    /** Controlled reveal state. */
+    revealed?: boolean;
+    /** Called when the user reveals the value. */
+    onRevealChange?: (revealed: boolean) => void;
+    /** Called after a successful copy action. */
+    onCopy?: (value: string) => void;
+    /** Called when clipboard copy fails. */
+    onCopyError?: (error: unknown) => void;
+    /** Value written to the clipboard. Defaults to `value`. */
+    copyValue?: string;
+    /** Visible fallback for missing values. */
+    emptyValue?: ReactNode;
+    /** Character used to build the masked value. */
+    maskCharacter?: string;
+    /** Minimum masked length. */
+    minMaskLength?: number;
+    /** Stops button clicks from bubbling to parent rows/cards. */
+    stopPropagation?: boolean;
+    size?: RevealAndCopySize;
+    revealLabel?: string;
+    copyLabel?: string;
+    copiedLabel?: string;
+    valueClassName?: string;
+    actionClassName?: string;
+};
+export declare const RevealAndCopy: import('react').ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "onCopy"> & {
+    /** The sensitive value to keep masked until the user reveals it. */
+    value?: string | null;
+    /** Enables the copy action after reveal. */
+    allowCopy?: boolean;
+    /** Initial reveal state for uncontrolled usage. */
+    defaultRevealed?: boolean;
+    /** Controlled reveal state. */
+    revealed?: boolean;
+    /** Called when the user reveals the value. */
+    onRevealChange?: (revealed: boolean) => void;
+    /** Called after a successful copy action. */
+    onCopy?: (value: string) => void;
+    /** Called when clipboard copy fails. */
+    onCopyError?: (error: unknown) => void;
+    /** Value written to the clipboard. Defaults to `value`. */
+    copyValue?: string;
+    /** Visible fallback for missing values. */
+    emptyValue?: ReactNode;
+    /** Character used to build the masked value. */
+    maskCharacter?: string;
+    /** Minimum masked length. */
+    minMaskLength?: number;
+    /** Stops button clicks from bubbling to parent rows/cards. */
+    stopPropagation?: boolean;
+    size?: RevealAndCopySize;
+    revealLabel?: string;
+    copyLabel?: string;
+    copiedLabel?: string;
+    valueClassName?: string;
+    actionClassName?: string;
+} & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export { RevealAndCopy } from './RevealAndCopy';
+export type { RevealAndCopyProps, RevealAndCopySize } from './RevealAndCopy';

package/dist/custom-elements.d.ts

@@ -442,6 +442,11 @@ export declare class BfrsBusinessInfoDisplayCardSkeletonElement extends ReactCus
     static get observedAttributes(): string[];
     protected renderElement(): unknown;
 }
+export declare class BfrsRevealAndCopyElement extends ReactCustomElement {
+    static readonly tagName = "reveal-and-copy";
+    static get observedAttributes(): string[];
+    protected renderElement(): unknown;
+}
 export declare class BfrsStepProgressCardElement extends ReactCustomElement {
     static readonly tagName = "step-progress-card";
     static get observedAttributes(): string[];
@@ -523,6 +528,7 @@ declare global {
         "bfrs-paper": BfrsPaperElement;
         "bfrs-popover": BfrsPopoverElement;
         "bfrs-radio": BfrsRadioElement;
+        "bfrs-reveal-and-copy": BfrsRevealAndCopyElement;
         "bfrs-searchable-select": BfrsSearchableSelectElement;
         "bfrs-section-header": BfrsSectionHeaderElement;
         "bfrs-select": BfrsSelectElement;