@bfrs/agentic-components 0.1.3 → 0.1.5

package/BFRS_AGENTIC_COMPONENTS.md

@@ -39,7 +39,7 @@ import { Button, Input, Modal, DataTable, DateRangePicker, ToastProvider, useToa
 
 ## Design System Conventions
 
-- **Sizes** are always `"sm" | "md" | "lg"` — default is `"md"` unless noted
+- **Control sizes** use `"xs" | "sm" | "md" | "lg"` where supported — default is `"md"` unless noted. Use `xs` for extra-compact dashboard toolbar/filter controls.
 - **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
@@ -173,7 +173,7 @@ import { MagnifyingGlass } from "@phosphor-icons/react";
 | Prop | Type | Default |
 |------|------|---------|
 | `icon` | `PhosphorIconComponent` | **required** |
-| `size` | `"sm" \| "md" \| "lg" \| number` | `"md"` |
+| `size` | `"xs" \| "sm" \| "md" \| "lg" \| number` | `"md"` |
 | `weight` | `"thin" \| "light" \| "regular" \| "bold" \| "fill" \| "duotone"` | `"regular"` |
 | `decorative` | `boolean` | `true` |
 
@@ -208,7 +208,7 @@ Primary interactive element. Covers all CTA patterns.
 | Prop | Type | Default |
 |------|------|---------|
 | `variant` | `"primary" \| "secondary" \| "tertiary" \| "outline" \| "ghost" \| "danger" \| "destructive" \| "link"` | `"primary"` |
-| `size` | `"sm" \| "md" \| "lg"` | `"md"` |
+| `size` | `"xs" \| "sm" \| "md" \| "lg"` | `"md"` |
 | `fullWidth` | `boolean` | `false` |
 | `leftIcon` | `ReactNode` | — |
 | `rightIcon` | `ReactNode` | — |
@@ -236,7 +236,7 @@ Square button for icon-only actions. Always provide `aria-label`.
 | `icon` | `ReactNode` | **required** |
 | `aria-label` | `string` | **required** |
 | `variant` | `"primary" \| "secondary" \| "outline" \| "ghost" \| "danger"` | `"ghost"` |
-| `size` | `"sm" \| "md" \| "lg"` | `"md"` |
+| `size` | `"xs" \| "sm" \| "md" \| "lg"` | `"md"` |
 | `loading` | `boolean` | `false` |
 
 ---
@@ -305,7 +305,7 @@ Standard text input.
 
 | Prop | Type | Default |
 |------|------|---------|
-| `size` | `"sm" \| "md" \| "lg"` | `"md"` |
+| `size` | `"xs" \| "sm" \| "md" \| "lg"` | `"md"` |
 | `error` | `boolean` | `false` |
 | `prefix` | `ReactNode` | — |
 | `suffix` | `ReactNode` | — |
@@ -387,7 +387,7 @@ const [range, setRange] = useState<DateRangeValue>({
 | `value` | `DateRangeValue` | — |
 | `onChange` | `(value: DateRangeValue) => void` | — |
 | `presets` | `DateRangePreset[]` | default presets |
-| `size` | `"sm" \| "md" \| "lg"` | `"sm"` |
+| `size` | `"xs" \| "sm" \| "md" \| "lg"` | `"sm"` |
 | `maxRangeDays` | `number` | — |
 | `months` | `1 \| 2` | `2` |
 | `open` / `onOpenChange` | controlled popover state | — |
@@ -515,7 +515,7 @@ Small inline status label.
 
 | Prop | Type | Default |
 |------|------|---------|
-| `size` | `"sm" \| "md" \| "lg"` | `"sm"` |
+| `size` | `"xs" \| "sm" \| "md" \| "lg"` | `"sm"` |
 | `variant` | `"default" \| "neutral" \| "primary" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"default"` |
 | `tone` | `"neutral" \| "primary" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` |
 | `dot` | `boolean` | `false` |
@@ -543,6 +543,7 @@ Removable tag. Use in filter bars and multi-select UIs.
 |------|------|---------|
 | `variant` | `"default" \| "filled" \| "soft" \| "outline"` | `"default"` |
 | `tone` | `"neutral" \| "primary" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` |
+| `size` | `"xs" \| "sm" \| "md" \| "lg"` | `"sm"` |
 | `leftIcon` | `ReactNode` | — |
 | `removable` | `boolean` | `false` |
 | `onRemove` | `() => void` | — |
@@ -635,11 +636,13 @@ Shimmer placeholder while content loads. Match the variant to the shape of the r
 <Skeleton variant="card" />   // card-height block
 <Skeleton variant="avatar" /> // circle
 <Skeleton variant="block" />  // rectangular block
+<Skeleton variant="text" animated={false} /> // static shimmer
 ```
 
 | Prop | Type | Default |
 |------|------|---------|
 | `variant` | `"text" \| "block" \| "card" \| "avatar"` | `"block"` |
+| `animated` | `boolean` | `true` |
 
 ---
 
@@ -753,7 +756,7 @@ Context menu attached to a trigger. Items support destructive and checked states
 | `trigger` | `ReactNode` | **required** |
 | `items` | `{ label: string; onSelect: () => void; disabled?: boolean; destructive?: boolean; checked?: boolean }[]` | **required** |
 | `align` | `"start" \| "center" \| "end"` | `"end"` |
-| `size` | `"sm" \| "md" \| "lg"` | `"md"` |
+| `size` | `"xs" \| "sm" \| "md" \| "lg"` | `"md"` |
 
 ---
 
@@ -941,6 +944,7 @@ Tabbed content switcher.
 |------|------|---------|
 | `items` | `{ value: string; label: ReactNode; content?: ReactNode; badge?: ReactNode }[]` | — |
 | `variant` | `"line" \| "pill"` | `"line"` |
+| `size` | `"xs" \| "sm" \| "md" \| "lg"` | `"md"` |
 | `defaultValue` | `string` | — |
 | `value` | `string` | — |
 | `onValueChange` | `(value: string) => void` | — |
@@ -1107,10 +1111,9 @@ Branded full-screen loading screen. Use during auth redirects and account setup.
 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.
+- Bootstrap loading with `businessName=""` and `sections={[]}` renders static shimmer placeholders for avatar, name, subtitle/email, order-volume chip, category chip, and six detail rows.
+- Missing or empty `initials` renders a static shimmer avatar circle when no `logoSrc` is provided.
+- Missing item values (`value: undefined`, `null`, `false`, or `""`) render skeletons for both the key and value. Field labels only appear once their values are present.
 
 ```tsx
 <BusinessInfoDisplayCard

package/dist/components/ui/feedback/Skeleton/Skeleton.d.ts

@@ -3,8 +3,12 @@ import { VariantProps } from 'class-variance-authority';
 declare const skeletonVariants: (props?: ({
     variant?: "text" | "block" | "card" | "avatar" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export type SkeletonProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof skeletonVariants>;
+export type SkeletonProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof skeletonVariants> & {
+    animated?: boolean;
+};
 export declare const Skeleton: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
     variant?: "text" | "block" | "card" | "avatar" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string> & import('react').RefAttributes<HTMLDivElement>>;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & {
+    animated?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>>;
 export {};