@bfrs/agentic-components 0.1.6 → 0.1.8

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/components/navigation/ActionMenu/ActionMenu.types.d.ts

@@ -17,6 +17,6 @@ export type ActionMenuProps = {
     items: ActionMenuItem[];
     align?: "start" | "center" | "end";
     side?: "top" | "right" | "bottom" | "left";
-    size?: "sm" | "md" | "lg";
+    size?: "xs" | "sm" | "md" | "lg";
     className?: string;
 };

package/dist/components/navigation/Tabs/Tabs.types.d.ts

@@ -10,7 +10,7 @@ export type TabItem = {
 export type TabsProps = RadixTabs.TabsProps & {
     items?: TabItem[];
     variant?: "line" | "pill";
-    size?: "sm" | "md" | "lg";
+    size?: "xs" | "sm" | "md" | "lg";
     listClassName?: string;
     triggerClassName?: string;
     contentClassName?: string;

package/dist/components/primitives/Badge/Badge.types.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { Tone } from '../../../tokens';
-export type BadgeSize = "sm" | "md" | "lg";
+export type BadgeSize = "xs" | "sm" | "md" | "lg";
 export type BadgeTone = Tone;
 export type BadgeVariant = "default" | BadgeTone;
 export type BadgeProps = HTMLAttributes<HTMLSpanElement> & {

package/dist/components/primitives/Button/Button.types.d.ts

@@ -1,6 +1,6 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
 export type ButtonVariant = "primary" | "secondary" | "tertiary" | "outline" | "ghost" | "destructive" | "danger" | "link";
-export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonSize = "xs" | "sm" | "md" | "lg";
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     variant?: ButtonVariant;
     size?: ButtonSize;

package/dist/components/primitives/Chip/Chip.types.d.ts

@@ -1,6 +1,6 @@
 import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
 import { Tone } from '../../../tokens';
-export type ChipSize = "sm" | "md" | "lg";
+export type ChipSize = "xs" | "sm" | "md" | "lg";
 export type ChipVariant = "default" | "soft" | "outline" | "filled";
 export type ChipProps = HTMLAttributes<HTMLSpanElement> & {
     variant?: ChipVariant;

package/dist/components/primitives/Input/Input.types.d.ts

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes, ReactNode } from 'react';
-export type InputSize = "sm" | "md" | "lg";
+export type InputSize = "xs" | "sm" | "md" | "lg";
 export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
     size?: InputSize;
     label?: ReactNode;

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
 export type BusinessInfoChip = {
-    label: ReactNode;
+    label?: ReactNode;
     icon?: ReactNode;
 };
 export type BusinessInfoItem = {

package/dist/components/ui/primitives/Icon/Icon.d.ts

@@ -7,7 +7,7 @@ export type PhosphorIconComponent = ComponentType<{
 }>;
 export type IconProps = {
     icon: PhosphorIconComponent;
-    size?: "sm" | "md" | "lg" | number;
+    size?: "xs" | "sm" | "md" | "lg" | number;
     weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone";
     className?: string;
     decorative?: boolean;