@bfrs/agentic-components 0.1.0 → 0.1.2

package/BFRS_AGENTIC_COMPONENTS.md

@@ -40,11 +40,12 @@ import { Button, Input, Modal, DataTable, DateRangePicker, ToastProvider, useToa
 ## Design System Conventions
 
 - **Sizes** are always `"sm" | "md" | "lg"` — default is `"md"` unless noted
-- **Tones** are always `"neutral" | "primary" | "success" | "warning" | "danger" | "info"`
+- **Tones** are always `"neutral" | "primary" | "brand" | "success" | "warning" | "danger" | "info"`
 - **Variants** control visual style (filled vs. outline vs. ghost, etc.)
 - All interactive components forward refs and spread native HTML props
 - Styling uses **Tailwind CSS** + **CVA** — do not add raw Tailwind classes on top of variant-controlled elements
 - Use the `cn()` utility from the library for conditional class merging
+- **Card surface standard** — all card-like components (`Card`, `MetricCard`, `FormSection`, `BusinessInfoDisplayCard`, and `StepProgressCard` when `surface="card"`) share the same surface style: `border-radius: 12px`, a faded green-grey gradient stroke (`dcl-faded-card-border`), `background: linear-gradient(168deg, #FFF 8.6%, #FFFFFD 97.41%)`, `box-shadow: 0 0 21.7px 0 rgba(24, 240, 64, 0.03)`. Do not override these properties unless intentionally switching to a `muted` or `soft` variant.
 
 ```tsx
 import { cn } from "@bfrs/agentic-components";
@@ -193,10 +194,12 @@ Primary interactive element. Covers all CTA patterns.
   Save changes
 </Button>
 
-<Button variant="destructive" loading={isDeleting}>
+<Button variant="danger" loading={isDeleting}>
   Delete account
 </Button>
 
+<Button variant="tertiary">Save this view</Button>
+
 <Button variant="outline" leftIcon={<Icon icon={Plus} />}>
   Add item
 </Button>
@@ -204,7 +207,7 @@ Primary interactive element. Covers all CTA patterns.
 
 | Prop | Type | Default |
 |------|------|---------|
-| `variant` | `"primary" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "link"` | `"primary"` |
+| `variant` | `"primary" \| "secondary" \| "tertiary" \| "outline" \| "ghost" \| "danger" \| "destructive" \| "link"` | `"primary"` |
 | `size` | `"sm" \| "md" \| "lg"` | `"md"` |
 | `fullWidth` | `boolean` | `false` |
 | `leftIcon` | `ReactNode` | — |
@@ -296,16 +299,19 @@ Standard text input.
   leftIcon={<Icon icon={MagnifyingGlass} />}
 />
 
-<Input value={val} state="error" onChange={…} />
+<Input prefix="₹" suffix="INR" placeholder="0.00" />
+<Input error value={val} onChange={…} />
 ```
 
 | Prop | Type | Default |
 |------|------|---------|
 | `size` | `"sm" \| "md" \| "lg"` | `"md"` |
-| `state` | `"default" \| "error"` | `"default"` |
 | `error` | `boolean` | `false` |
+| `prefix` | `ReactNode` | — |
+| `suffix` | `ReactNode` | — |
 | `leftIcon` | `ReactNode` | — |
 | `rightIcon` | `ReactNode` | — |
+| `loading` | `boolean` | `false` |
 
 Accepts all native `<input>` props.
 
@@ -504,12 +510,16 @@ Small inline status label.
 <Badge tone="success">Active</Badge>
 <Badge tone="warning">Pending</Badge>
 <Badge tone="danger">Blocked</Badge>
+<Badge count={3} aria-label="3 active filters" />
 ```
 
 | Prop | Type | Default |
 |------|------|---------|
 | `size` | `"sm" \| "md" \| "lg"` | `"sm"` |
-| `tone` | `"neutral" \| "primary" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` |
+| `variant` | `"default" \| "neutral" \| "primary" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"default"` |
+| `tone` | `"neutral" \| "primary" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` |
+| `dot` | `boolean` | `false` |
+| `count` | `number` | — |
 
 ---
 
@@ -522,6 +532,7 @@ Removable tag. Use in filter bars and multi-select UIs.
   tone="primary"
   variant="soft"
   leftIcon={<Icon icon={Tag} />}
+  removable
   onRemove={() => removeFilter("status")}
 >
   Status: Active
@@ -530,9 +541,10 @@ Removable tag. Use in filter bars and multi-select UIs.
 
 | Prop | Type | Default |
 |------|------|---------|
-| `variant` | `"filled" \| "soft" \| "outline"` | `"soft"` |
-| `tone` | `"neutral" \| "primary" \| "success" \| "warning" \| "danger"` | `"neutral"` |
+| `variant` | `"default" \| "filled" \| "soft" \| "outline"` | `"default"` |
+| `tone` | `"neutral" \| "primary" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` |
 | `leftIcon` | `ReactNode` | — |
+| `removable` | `boolean` | `false` |
 | `onRemove` | `() => void` | — |
 | `removeLabel` | `string` | `"Remove"` |
 
@@ -914,11 +926,20 @@ Tabbed content switcher.
     { value: "settings", label: "Settings", content: <Settings /> },
   ]}
 />
+
+<Tabs defaultValue="overview">
+  <Tabs.List>
+    <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
+    <Tabs.Trigger value="orders" badge={<Badge count={12} />}>Orders</Tabs.Trigger>
+  </Tabs.List>
+  <Tabs.Content value="overview">...</Tabs.Content>
+  <Tabs.Content value="orders">...</Tabs.Content>
+</Tabs>
 ```
 
 | Prop | Type | Default |
 |------|------|---------|
-| `items` | `{ value: string; label: ReactNode; content: ReactNode }[]` | **required** |
+| `items` | `{ value: string; label: ReactNode; content?: ReactNode; badge?: ReactNode }[]` | — |
 | `variant` | `"line" \| "pill"` | `"line"` |
 | `defaultValue` | `string` | — |
 | `value` | `string` | — |
@@ -1001,11 +1022,13 @@ Full-page app shell with sticky header and collapsible sidebar.
 
 #### `ChatBubble`
 
-Chat message bubble. Renders differently for `user`, `assistant`, and `system` senders.
+Chat message bubble. Renders differently for `user`, `assistant`, and `system` senders. Assistant messages support a Figma-derived identity block with an uppercase eyebrow, title, and muted body copy.
 
 ```tsx
-<ChatBubble sender="assistant" timestamp="2:34 PM" loading={isStreaming}>
-  Here's a summary of your recent orders…
+<ChatBubble sender="assistant" eyebrow="Identity" title="Your details are ready" timestamp="2:34 PM" loading={isStreaming}>
+  We've found your name and email linked to your number.
+  <br />
+  Review and continue, or edit if needed.
 </ChatBubble>
 
 <ChatBubble sender="user" timestamp="2:35 PM">
@@ -1016,7 +1039,9 @@ Chat message bubble. Renders differently for `user`, `assistant`, and `system` s
 | Prop | Type | Default |
 |------|------|---------|
 | `sender` | `"user" \| "assistant" \| "system"` | **required** |
-| `children` | `ReactNode` | **required** |
+| `children` | `ReactNode` | — |
+| `eyebrow` | `ReactNode` | — |
+| `title` | `ReactNode` | — |
 | `timestamp` | `ReactNode` | — |
 | `status` | `ReactNode` | — |
 | `loading` | `boolean` | `false` |
@@ -1079,19 +1104,20 @@ Branded full-screen loading screen. Use during auth redirects and account setup.
 
 #### `BusinessInfoDisplayCard`
 
-Rich business identity card with header, logo, chips, and info sections.
+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.
 
 ```tsx
 <BusinessInfoDisplayCard
-  businessName="Acme Corp"
-  initials="AC"
-  chips={[{ label: "Verified", tone: "success" }]}
+  businessName="Deeksha Gahlot"
+  subtitle="deekshagahlot@gmail.com"
+  initials="DG"
+  chips={[{ label: "30-100/ month" }, { label: "Starting Up" }]}
   sections={[
     {
-      title: "Contact",
       items: [
-        { label: "Email", value: "hello@acme.com" },
-        { label: "Phone", value: "+91 98765 43210" },
+        { label: "Business Type", value: "Registered" },
+        { label: "Company Name", value: "Deedoodle" },
+        { label: "Pickup Pincode", value: "122099" },
       ],
     },
   ]}
@@ -1102,10 +1128,11 @@ Rich business identity card with header, logo, chips, and info sections.
 |------|------|---------|
 | `businessName` | `ReactNode` | **required** |
 | `sections` | `BusinessInfoSection[]` | **required** |
+| `subtitle` | `ReactNode` | — |
 | `initials` | `string` | — |
 | `logoSrc` | `string` | — |
 | `logoAlt` | `string` | — |
-| `chips` | `{ label: string; tone?: Tone }[]` | — |
+| `chips` | `{ label: ReactNode; icon?: ReactNode }[]` | `"30-100/ month"`, `"Starting Up"` |
 | `background` | `string` | — |
 | `gradient` | `string` | — |
 | `headerBackground` | `string` | — |
@@ -1113,36 +1140,37 @@ Rich business identity card with header, logo, chips, and info sections.
 
 `BusinessInfoSection`:
 ```ts
-{ title: string; items: { label: string; value: ReactNode }[] }
+{ title?: ReactNode; items: { label: ReactNode; value: ReactNode }[] }
 ```
 
 ---
 
 #### `StepProgressCard`
 
-Step-by-step progress indicator. Calculates `complete` / `current` / `upcoming` state automatically from `currentStep`.
+Step-by-step progress indicator. Calculates `done` / `active` / `pending` state automatically from `currentStep` and preserves the animated completed-dot, active-star, and rail-fill transitions. Defaults to the Figma-derived plain progress block; pass `surface="card"` for the standard card wrapper.
 
 ```tsx
 <StepProgressCard
-  eyebrow="Onboarding"
-  title="Let's get you set up"
+  eyebrow="Identity & Contact"
+  title="Getting your details ready…"
   currentStep={1}
   animated
   steps={[
-    { label: "Create account" },
-    { label: "Verify email" },
-    { label: "Add your first product" },
+    { label: "Securely Fetching to your account" },
+    { label: "Verifying your identity" },
+    { label: "Retrieving business details" },
+    { label: "Validating your information" },
   ]}
 />
 ```
 
 | Prop | Type | Default |
 |------|------|---------|
-| `steps` | `{ label: ReactNode; description?: ReactNode }[]` | **required** |
+| `steps` | `{ label: ReactNode; status?: "done" \| "active" \| "pending" \| "disabled"; disabled?: boolean }[]` | **required** |
 | `currentStep` | `number` | `0` |
-| `eyebrow` | `ReactNode` | `"Account Summary"` |
+| `eyebrow` | `ReactNode` | `"Identity & Contact"` |
 | `title` | `ReactNode` | `"Getting your details ready…"` |
-| `surface` | `"card" \| "plain"` | `"card"` |
+| `surface` | `"card" \| "plain"` | `"plain"` |
 | `animated` | `boolean` | `true` |
 
 ---

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

@@ -1,2 +1,20 @@
-import { TabsProps } from './Tabs.types';
-export declare function Tabs({ items, variant, size, className, listClassName, triggerClassName, contentClassName, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+import { ReactElement } from 'react';
+import { TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps } from './Tabs.types';
+declare function TabsList({ className, ...props }: TabsListProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TabsList {
+    var displayName: string;
+}
+declare function TabsTrigger({ className, badge, children, ...props }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TabsTrigger {
+    var displayName: string;
+}
+declare function TabsContent({ className, ...props }: TabsContentProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TabsContent {
+    var displayName: string;
+}
+export declare const Tabs: ((props: TabsProps) => ReactElement) & {
+    List: typeof TabsList;
+    Trigger: typeof TabsTrigger;
+    Content: typeof TabsContent;
+};
+export {};

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

@@ -8,10 +8,15 @@ export type TabItem = {
     badge?: ReactNode;
 };
 export type TabsProps = RadixTabs.TabsProps & {
-    items: TabItem[];
+    items?: TabItem[];
     variant?: "line" | "pill";
     size?: "sm" | "md" | "lg";
     listClassName?: string;
     triggerClassName?: string;
     contentClassName?: string;
 };
+export type TabsListProps = RadixTabs.TabsListProps;
+export type TabsTriggerProps = RadixTabs.TabsTriggerProps & {
+    badge?: ReactNode;
+};
+export type TabsContentProps = RadixTabs.TabsContentProps;

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

@@ -1,6 +1,7 @@
+import { BadgeTone } from './Badge.types';
 export declare const Badge: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLSpanElement> & {
     variant?: import('./Badge.types').BadgeVariant;
-    tone?: import('./Badge.types').BadgeVariant;
+    tone?: BadgeTone;
     size?: import('./Badge.types').BadgeSize;
     dot?: boolean;
     count?: number;

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

@@ -1,10 +1,11 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { Tone } from '../../../tokens';
 export type BadgeSize = "sm" | "md" | "lg";
-export type BadgeVariant = Tone;
+export type BadgeTone = Tone;
+export type BadgeVariant = "default" | BadgeTone;
 export type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
     variant?: BadgeVariant;
-    tone?: BadgeVariant;
+    tone?: BadgeTone;
     size?: BadgeSize;
     dot?: boolean;
     count?: number;

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

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

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

@@ -5,6 +5,7 @@ export declare const Chip: import('react').ForwardRefExoticComponent<import('rea
     leftIcon?: import('react').ReactNode;
     rightIcon?: import('react').ReactNode;
     selected?: boolean;
+    removable?: boolean;
     onRemove?: import('react').ButtonHTMLAttributes<HTMLButtonElement>["onClick"];
     removeLabel?: string;
 } & import('react').RefAttributes<HTMLSpanElement>>;

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

@@ -9,6 +9,7 @@ export type ChipProps = HTMLAttributes<HTMLSpanElement> & {
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
     selected?: boolean;
+    removable?: boolean;
     onRemove?: ButtonHTMLAttributes<HTMLButtonElement>["onClick"];
     removeLabel?: string;
 };

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

@@ -5,8 +5,11 @@ export declare const Input: import('react').ForwardRefExoticComponent<Omit<impor
     errorMessage?: import('react').ReactNode;
     error?: boolean;
     required?: boolean;
+    prefix?: import('react').ReactNode;
+    suffix?: import('react').ReactNode;
     leftIcon?: import('react').ReactNode;
     rightIcon?: import('react').ReactNode;
+    loading?: boolean;
     onClear?: () => void;
     clearLabel?: string;
     fullWidth?: boolean;

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

@@ -7,8 +7,11 @@ export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
     errorMessage?: ReactNode;
     error?: boolean;
     required?: boolean;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
+    loading?: boolean;
     onClear?: () => void;
     clearLabel?: string;
     fullWidth?: boolean;

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

@@ -1,2 +1,2 @@
 export { Tabs } from '../../../navigation/Tabs';
-export type { TabItem, TabsProps } from '../../../navigation/Tabs';
+export type { TabItem, TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps } from '../../../navigation/Tabs';

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

@@ -8,11 +8,12 @@ export type BusinessInfoItem = {
     value: ReactNode;
 };
 export type BusinessInfoSection = {
-    title: ReactNode;
+    title?: ReactNode;
     items: BusinessInfoItem[];
 };
 export type BusinessInfoDisplayCardProps = HTMLAttributes<HTMLDivElement> & {
     businessName: ReactNode;
+    subtitle?: ReactNode;
     initials?: string;
     logoSrc?: string;
     logoAlt?: string;
@@ -25,6 +26,7 @@ export type BusinessInfoDisplayCardProps = HTMLAttributes<HTMLDivElement> & {
 };
 export declare const BusinessInfoDisplayCard: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     businessName: ReactNode;
+    subtitle?: ReactNode;
     initials?: string;
     logoSrc?: string;
     logoAlt?: string;

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

@@ -1,11 +1,13 @@
 import { ReactNode } from 'react';
 export type ChatBubbleProps = {
     sender: "user" | "assistant" | "system";
-    children: ReactNode;
+    children?: ReactNode;
+    eyebrow?: ReactNode;
+    title?: ReactNode;
     timestamp?: ReactNode;
     status?: ReactNode;
     loading?: boolean;
     errorAction?: ReactNode;
     className?: string;
 };
-export declare function ChatBubble({ sender, children, timestamp, status, loading, errorAction, className }: ChatBubbleProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatBubble({ sender, children, eyebrow, title, timestamp, status, loading, errorAction, className }: ChatBubbleProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/patterns/StepProgressCard/StepProgressCardSkeleton.d.ts

@@ -1,7 +1,9 @@
 import { HTMLAttributes } from 'react';
 export type StepProgressCardSkeletonProps = HTMLAttributes<HTMLDivElement> & {
     steps?: number;
+    surface?: "card" | "plain";
 };
 export declare const StepProgressCardSkeleton: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     steps?: number;
+    surface?: "card" | "plain";
 } & import('react').RefAttributes<HTMLDivElement>>;