@bfrs/agentic-components 0.2.2 → 0.2.4

package/BFRS_AGENTIC_COMPONENTS.md

@@ -25,9 +25,23 @@ import "@bfrs/agentic-components/styles";
 Import components by name:
 
 ```tsx
-import { Button, Input, 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:
+
+```ts
+import { applyAgenticTheme, createAgenticThemeVariables } from "@bfrs/agentic-components/theme";
+
+applyAgenticTheme({
+  colors: { primary: "#5B45C2", primarySoft: "#F1ECFB", borderFocus: "#5B45C2" },
+  radius: { control: "14px", card: "18px" },
+  shadows: { card: "0 12px 32px rgb(91 69 194 / 0.16)" }
+});
+```
+
+Plain CSS variable overrides are also supported. Direct `--color-*` overrides should use HSL channels because component styles call them through `hsl(var(--color-...))`.
+
 **Peer dependencies required:** `react >= 18.2.0`, `react-dom >= 18.2.0`
 
 ### Angular / Custom Elements
@@ -82,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-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`, `helper-text`, `prefix`, `suffix`. Use `[props]` or the `props` JSON attribute for structured props like `options`, `items`, `columns`, `data`, `sections`, `steps`, and `toasts`.
+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`.
 
@@ -495,6 +509,133 @@ Combobox with search. Use when options list is long (10+).
 
 ---
 
+#### `Slider`
+
+Controlled numeric range control. Use instead of raw `<input type="range">`.
+
+```tsx
+<Slider
+  label="Confidence threshold"
+  value={confidence}
+  min={0}
+  max={100}
+  step={5}
+  formatValue={(value) => `${value}%`}
+  onValueChange={setConfidence}
+/>
+```
+
+| Prop | Type | Default |
+|------|------|---------|
+| `value` | `number` | **required** |
+| `onValueChange` | `(value: number) => void` | **required** |
+| `min` | `number` | `0` |
+| `max` | `number` | `100` |
+| `step` | `number` | `1` |
+| `size` | `"xs" \| "sm" \| "md" \| "lg"` | `"md"` |
+| `label` | `ReactNode` | — |
+| `helperText` | `ReactNode` | — |
+| `errorText` | `ReactNode` | — |
+| `formatValue` | `(value: number) => ReactNode` | — |
+| `disabled` | `boolean` | `false` |
+
+Uses a native range input internally for keyboard and assistive technology support.
+
+Angular:
+
+```html
+<bfrs-slider
+  label="Confidence threshold"
+  min="0"
+  max="100"
+  step="5"
+  [value]="confidence"
+  (value-change)="confidence = $event.detail.value">
+</bfrs-slider>
+```
+
+---
+
+#### `ColorPicker`
+
+Controlled single-color selector. Use instead of raw `<input type="color">`.
+
+```tsx
+<ColorPicker
+  label="Brand color"
+  value={brandColor}
+  onValueChange={setBrandColor}
+  helperText="Accepts six-digit hex values."
+/>
+```
+
+| Prop | Type | Default |
+|------|------|---------|
+| `value` | `string` | **required** |
+| `onValueChange` | `(value: string) => void` | **required** |
+| `label` | `ReactNode` | — |
+| `helperText` | `ReactNode` | — |
+| `errorText` | `ReactNode` | — |
+| `size` | `"xs" \| "sm" \| "md" \| "lg"` | `"md"` |
+| `disabled` | `boolean` | `false` |
+
+Accepts six-digit hex values such as `#2563eb`. Renders a visible swatch, native color input, and editable hex value field internally.
+
+Angular:
+
+```html
+<bfrs-color-picker
+  label="Brand color"
+  [value]="brandColor"
+  (value-change)="brandColor = $event.detail.value">
+</bfrs-color-picker>
+```
+
+---
+
+#### `ColorSwatchGroup`
+
+Controlled radio-style color or palette picker. Use instead of raw palette buttons with `role="radio"`.
+
+```tsx
+const options = [
+  "#5B45C2",
+  "#2563EB",
+  ["#5B45C2", "#2563EB", "#059669"]
+];
+
+<ColorSwatchGroup
+  label="Palette"
+  value={palette}
+  options={options}
+  onValueChange={setPalette}
+/>
+```
+
+| Prop | Type | Default |
+|------|------|---------|
+| `value` | `string \| string[]` | **required** |
+| `onValueChange` | `(value: string \| string[]) => void` | **required** |
+| `options` | `Array<string \| string[]>` | **required** |
+| `label` | `ReactNode` | — |
+| `disabled` | `boolean` | `false` |
+| `getOptionLabel` | `(option, index) => string` | generated label |
+| `aria-label` | `string` | `"Color options"` when `label` is absent |
+
+Uses a Radix radio group internally, so arrow-key navigation and selected-state semantics are handled by the component.
+
+Angular:
+
+```html
+<bfrs-color-swatch-group
+  label="Palette"
+  [props]="{ options: paletteOptions, value: palette }"
+  (value-change)="palette = $event.detail.value">
+</bfrs-color-swatch-group>
+```
+
+---
+
 #### `Checkbox`
 
 Square checklist control for independent true/false decisions or multi-select choices.
@@ -1175,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,41 @@ 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-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
+
+The package exposes a framework-neutral theme helper for app-wide token overrides. Use it from React, Angular, or plain TypeScript without importing the React component entry:
+
+```ts
+import { applyAgenticTheme } from "@bfrs/agentic-components/theme";
+
+applyAgenticTheme({
+  colors: {
+    primary: "#5B45C2",
+    primaryHover: "#4C35AE",
+    primarySoft: "#F1ECFB",
+    borderFocus: "#5B45C2"
+  },
+  radius: {
+    control: "14px",
+    card: "18px"
+  },
+  shadows: {
+    card: "0 12px 32px rgb(91 69 194 / 0.16)"
+  }
+});
+```
+
+The helper accepts hex, rgb, hsl, or raw HSL channel values for semantic color tokens. Plain CSS variable overrides also work:
+
+```css
+:root {
+  --color-primary: 251 51% 52%;
+  --radius-control: 14px;
+  --shadow-card: 0 12px 32px rgb(91 69 194 / 0.16);
+}
+```
 
 ### Validated Forms
 

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

@@ -0,0 +1,28 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+export type ColorPickerSize = "xs" | "sm" | "md" | "lg";
+export type ColorPickerProps = Omit<InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "onChange" | "size" | "type" | "value"> & {
+    value: string;
+    onValueChange: (value: string) => void;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    errorText?: ReactNode;
+    disabled?: boolean;
+    size?: ColorPickerSize;
+    containerClassName?: string;
+    labelClassName?: string;
+    inputClassName?: string;
+    swatchClassName?: string;
+};
+export declare const ColorPicker: import('react').ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "onChange" | "value" | "size" | "type"> & {
+    value: string;
+    onValueChange: (value: string) => void;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    errorText?: ReactNode;
+    disabled?: boolean;
+    size?: ColorPickerSize;
+    containerClassName?: string;
+    labelClassName?: string;
+    inputClassName?: string;
+    swatchClassName?: string;
+} & import('react').RefAttributes<HTMLInputElement>>;

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

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

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

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+export type ColorSwatchValue = string | string[];
+export type ColorSwatchGroupProps = Omit<RadioGroupPrimitive.RadioGroupProps, "defaultValue" | "disabled" | "onValueChange" | "value"> & {
+    value: ColorSwatchValue;
+    onValueChange: (value: ColorSwatchValue) => void;
+    options: ColorSwatchValue[];
+    label?: ReactNode;
+    disabled?: boolean;
+    getOptionLabel?: (option: ColorSwatchValue, index: number) => string;
+    optionClassName?: string;
+};
+export declare function ColorSwatchGroup({ className, optionClassName, value, onValueChange, options, label, disabled, getOptionLabel, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ColorSwatchGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ColorSwatchGroup {
+    var displayName: string;
+}

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

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

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

@@ -0,0 +1,36 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+export type SliderSize = "xs" | "sm" | "md" | "lg";
+export type SliderProps = Omit<InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "max" | "min" | "onChange" | "size" | "step" | "type" | "value"> & {
+    value: number;
+    onValueChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    errorText?: ReactNode;
+    size?: SliderSize;
+    formatValue?: (value: number) => ReactNode;
+    containerClassName?: string;
+    labelClassName?: string;
+    valueClassName?: string;
+    inputClassName?: string;
+};
+export declare const Slider: import('react').ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "onChange" | "value" | "size" | "type" | "step" | "max" | "min"> & {
+    value: number;
+    onValueChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    errorText?: ReactNode;
+    size?: SliderSize;
+    formatValue?: (value: number) => ReactNode;
+    containerClassName?: string;
+    labelClassName?: string;
+    valueClassName?: string;
+    inputClassName?: string;
+} & import('react').RefAttributes<HTMLInputElement>>;

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

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

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

@@ -17,6 +17,9 @@ export * from './forms/SearchableSelect';
 export * from './forms/Checkbox';
 export * from './forms/Radio';
 export * from './forms/Switch';
+export * from './forms/Slider';
+export * from './forms/ColorPicker';
+export * from './forms/ColorSwatchGroup';
 export * from './feedback/Chip';
 export * from './feedback/Badge';
 export * from './feedback/Alert';
@@ -51,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

@@ -1,3 +1,4 @@
+import { ColorSwatchValue } from './components/ui/forms/ColorSwatchGroup';
 type UnknownProps = Record<string, unknown>;
 type CheckedValue = boolean | "indeterminate";
 export type BfrsCustomElementRegistryOptions = {
@@ -60,6 +61,26 @@ export declare class BfrsInputElement extends ReactCustomElement {
     protected renderElement(): unknown;
     private dispatchValueChange;
 }
+export declare class BfrsSliderElement extends ReactCustomElement {
+    static readonly tagName = "slider";
+    static get observedAttributes(): string[];
+    private controlledValue;
+    get value(): number;
+    set value(value: number);
+    attributeChangedCallback(name?: string, oldValue?: string | null, newValue?: string | null): void;
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsColorPickerElement extends ReactCustomElement {
+    static readonly tagName = "color-picker";
+    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 BfrsBadgeElement extends ReactCustomElement {
     static readonly tagName = "badge";
     static get observedAttributes(): string[];
@@ -213,6 +234,16 @@ export declare class BfrsRadioElement extends ValueCustomElement {
     static get observedAttributes(): string[];
     protected renderElement(): unknown;
 }
+export declare class BfrsColorSwatchGroupElement extends ReactCustomElement {
+    static readonly tagName = "color-swatch-group";
+    static get observedAttributes(): string[];
+    private controlledValue;
+    get value(): ColorSwatchValue;
+    set value(value: ColorSwatchValue);
+    attributeChangedCallback(name?: string, oldValue?: string | null, newValue?: string | null): void;
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
 export declare class BfrsSwitchElement extends ReactCustomElement {
     static readonly tagName = "switch";
     static get observedAttributes(): string[];
@@ -411,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[];
@@ -460,6 +496,8 @@ declare global {
         "bfrs-chat-composer": BfrsChatComposerElement;
         "bfrs-checkbox": BfrsCheckboxElement;
         "bfrs-chip": BfrsChipElement;
+        "bfrs-color-picker": BfrsColorPickerElement;
+        "bfrs-color-swatch-group": BfrsColorSwatchGroupElement;
         "bfrs-command-menu": BfrsCommandMenuElement;
         "bfrs-confirm-dialog": BfrsConfirmDialogElement;
         "bfrs-container": BfrsContainerElement;
@@ -490,10 +528,12 @@ 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;
         "bfrs-side-nav": BfrsSideNavElement;
+        "bfrs-slider": BfrsSliderElement;
         "bfrs-skeleton": BfrsSkeletonElement;
         "bfrs-spinner": BfrsSpinnerElement;
         "bfrs-stack": BfrsStackElement;