@bfrs/agentic-components 0.2.2 → 0.2.3

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, 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,9 +96,9 @@ 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`, 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`.
 
@@ -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.

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`, 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';

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[];
@@ -460,6 +491,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;
@@ -494,6 +527,7 @@ declare global {
         "bfrs-section-header": BfrsSectionHeaderElement;
         "bfrs-select": BfrsSelectElement;
         "bfrs-side-nav": BfrsSideNavElement;
+        "bfrs-slider": BfrsSliderElement;
         "bfrs-skeleton": BfrsSkeletonElement;
         "bfrs-spinner": BfrsSpinnerElement;
         "bfrs-stack": BfrsStackElement;