@bfrs/agentic-components 0.1.1 → 0.1.3

package/BFRS_AGENTIC_COMPONENTS.md

@@ -45,7 +45,7 @@ import { Button, Input, Modal, DataTable, DateRangePicker, ToastProvider, useToa
 - 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`, `border: 1px solid #D3DFD7` (`border-border-card`), `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.
+- **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";
@@ -1104,7 +1104,13 @@ Branded full-screen loading screen. Use during auth redirects and account setup.
 
 #### `BusinessInfoDisplayCard`
 
-Rich business identity card with centered profile identity, metadata chips, and compact label-value details. Uses the standard card surface (`border-border-card`, white gradient background, green-glow shadow) and the Figma-derived green header wash.
+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.
+
+Built-in loading behavior:
+- `businessName=""` renders a shimmer placeholder in the name slot.
+- Missing or empty `initials` renders a shimmer avatar circle when no `logoSrc` is provided.
+- `sections={[]}` renders six shimmer detail rows.
+- `value: undefined` renders the label and separator with a shimmer placeholder for that value.
 
 ```tsx
 <BusinessInfoDisplayCard
@@ -1122,6 +1128,22 @@ Rich business identity card with centered profile identity, metadata chips, and
     },
   ]}
 />
+
+<BusinessInfoDisplayCard businessName="" sections={[]} />
+
+<BusinessInfoDisplayCard
+  businessName="Deedoodle"
+  initials="DD"
+  sections={[
+    {
+      title: "Account Details",
+      items: [
+        { label: "Phone", value: "9876543210" },
+        { label: "GST Number", value: undefined },
+      ],
+    },
+  ]}
+/>
 ```
 
 | Prop | Type | Default |
@@ -1140,7 +1162,7 @@ Rich business identity card with centered profile identity, metadata chips, and
 
 `BusinessInfoSection`:
 ```ts
-{ title?: ReactNode; items: { label: ReactNode; value: ReactNode }[] }
+{ title?: ReactNode; items: { label: ReactNode; value?: ReactNode }[] }
 ```
 
 ---

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

@@ -5,7 +5,7 @@ export type BusinessInfoChip = {
 };
 export type BusinessInfoItem = {
     label: ReactNode;
-    value: ReactNode;
+    value?: ReactNode;
 };
 export type BusinessInfoSection = {
     title?: ReactNode;