@bfrs/agentic-components 0.4.3 → 0.4.6

package/BFRS_AGENTIC_COMPONENTS.md

@@ -371,6 +371,8 @@ import { MagnifyingGlass } from "@phosphor-icons/react";
 
 Primary interactive element. Covers all CTA patterns.
 
+Default sizing follows the Shiprocket 4.0 compact control scale from Figma: `xs` is 26px high, `sm` is 28px, `md` is 30px, and `lg` remains 40px. `primary` is the dark `#29343D` CTA, `secondary` is the white soft-stroke control, and `outline` is the selected/active filter-style control.
+
 ```tsx
 <Button variant="primary" size="md" onClick={handleSave}>
   Save changes
@@ -403,6 +405,8 @@ Primary interactive element. Covers all CTA patterns.
 
 Square button for icon-only actions. Always provide `aria-label`.
 
+Icon-only buttons inherit the same compact control scale: `xs` is 26px, `sm` is 28px, `md` is 32px, and `lg` is 40px.
+
 ```tsx
 <IconButton
   icon={<Icon icon={Trash} />}
@@ -498,6 +502,9 @@ Standalone label. Prefer `FormField` which renders this automatically.
 
 Standard text input.
 
+Inputs use the same 28px Figma trigger height as select controls across native input types such as `text`, `number`, `email`, and `search`. Placeholders render in secondary text (`#64737E`).
+Focused inputs, affixed input chrome, and select-family triggers must show the focus border/ring; open select popovers keep that same visual state through `aria-expanded`.
+
 ```tsx
 <Input
   placeholder="Search…"
@@ -549,6 +556,10 @@ Accepts all native `<textarea>` props.
 
 Single-value dropdown. Options are `{ value: string; label: string }`.
 
+The Figma trigger style is the only select size: 28px high with 12.5px text, 7px radius, and a 10px chevron.
+The trigger chevron rotates 180deg while open. This open/close motion and focused/open border treatment is shared by `Select`, `SearchableSelect`, and `MultiSelect`.
+Selected option rows render with bold text across select-style listboxes: `Select`, `SearchableSelect`, `MultiSelect`, and `SuggestInput`.
+
 ```tsx
 <Select
   options={[
@@ -567,7 +578,9 @@ Single-value dropdown. Options are `{ value: string; label: string }`.
 | `value` | `string` | — |
 | `onValueChange` | `(value: string) => void` | — |
 | `placeholder` | `string` | `"Select"` |
-| `size` | `"sm" \| "md" \| "lg"` | `"md"` |
+| `open` | `boolean` | — |
+| `defaultOpen` | `boolean` | `false` |
+| `onOpenChange` | `(open: boolean) => void` | — |
 | `disabled` | `boolean` | `false` |
 | `error` | `boolean` | `false` |
 
@@ -579,6 +592,8 @@ The selected value never wraps: it truncates with an ellipsis when it is too lon
 
 Preset and custom calendar date-range filter. Presets commit immediately; custom ranges use Apply/Cancel.
 
+The trigger uses the neutral secondary compact button by default so date filters visually match the Figma filter bar.
+
 ```tsx
 import { DateRangePicker, presetToRange, type DateRangeValue } from "@bfrs/agentic-components";
 
@@ -632,13 +647,13 @@ Combobox with search. Use when options list is long (10+).
 | `disabled` | `boolean` | `false` |
 | `error` | `boolean` | `false` |
 | `clearable` | `boolean` | `true` |
-| `size` | `"sm" \| "md" \| "lg"` | `"md"` |
 
 ---
 
 #### `MultiSelect`
 
 Searchable multi-value select. Use for channel/category filters or any bounded list where more than one option can be selected.
+The popover keeps the embedded search input on the same 28px field style as `Input` and `Select`, scrolls only the option list, and keeps Apply/Clear footer actions visible.
 
 ```tsx
 <MultiSelect
@@ -674,7 +689,6 @@ Angular custom element:
 | `error` | `boolean` | `false` |
 | `clearable` | `boolean` | `true` |
 | `maxVisibleValues` | `number` | `2` |
-| `size` | `"sm" \| "md" \| "lg"` | `"md"` |
 
 ---
 
@@ -1013,6 +1027,8 @@ Angular:
 Square checklist control for independent true/false decisions or multi-select choices.
 Use `Radio` instead when exactly one option in a group can be selected.
 
+The default checkbox is the Figma `sm` control: 12px square, 0.8px secondary stroke (`#64737E`), and 2.5px radius.
+
 ```tsx
 <Checkbox
   checked={agreed}
@@ -1028,7 +1044,7 @@ Use `Radio` instead when exactly one option in a group can be selected.
 |------|------|---------|
 | `label` | `ReactNode` | — |
 | `description` | `ReactNode` | — |
-| `size` | `"sm" \| "md" \| "lg"` | `"md"` |
+| `size` | `"sm" \| "md" \| "lg"` | `"sm"` |
 | `error` | `boolean` | `false` |
 | `checked` | `boolean \| "indeterminate"` | — |
 | `onCheckedChange` | `(checked: boolean \| "indeterminate") => void` | — |
@@ -1511,6 +1527,8 @@ User avatar with image, initials fallback, and online status.
 
 Table page navigation. Handles ellipsis, edge pages, optional page-size controls, and two navigation variants: `indexed` (Prev, page indexes like `1 2 3 ... 10`, Next) and `simple` (Prev / Next only).
 
+Default pagination matches the Figma table footer: 40px row, 20px horizontal padding, 26px controls, active page background `#64737E`, and page-size labels such as `15 Orders` when `itemLabel="Orders"`.
+
 ```tsx
 <TablePagination
   page={currentPage}
@@ -1542,6 +1560,8 @@ Angular: `items-per-page-label` attribute.
 
 Generic data table with sorting, loading skeleton, row actions, selection, pagination, and empty/error states.
 
+DataTable has one default visual density, matching the Figma orders table: 8px outer radius, strong `#D3DFD7` outer/header stroke, 46px header, 64px rows, 12px header/body type, 0.24px header letter spacing, 12px selection checkboxes, and a 146px sticky actions column headed `Actions`.
+
 ```tsx
 <DataTable
   columns={[
@@ -1573,8 +1593,9 @@ Generic data table with sorting, loading skeleton, row actions, selection, pagin
 | `enableColumnReordering` | `boolean` | `true` |
 | `onRowClick` | `(row: T) => void` | — |
 | `rowActions` | `(row: T) => ReactNode` | — |
+| `rowActionsHeader` | `ReactNode` | `"Actions"` |
+| `rowActionsWidth` | `number \| string` | `146` |
 | `selection` | `boolean` | `false` |
-| `density` | `"compact" \| "default" \| "comfortable"` | `"default"` |
 | `emptyTitle` | `ReactNode` | `"No records found"` |
 | `emptyDescription` | `ReactNode` | — |
 | `defaultSorting` | `{ columnId: string; direction: "asc" \| "desc" } \| null` | `null` |
@@ -1854,6 +1875,8 @@ Navigation trail. Last item is rendered as plain text (current page).
 
 Standardized page title section. Use at the top of every page.
 
+Default chrome matches the Shiprocket 4.0 page row: 52px minimum height, `#FBFCFB` background, strong bottom divider, and a 20px semibold title.
+
 ```tsx
 <PageHeader
   eyebrow="Orders"
@@ -1899,7 +1922,7 @@ Full-page app shell with sticky header and collapsible sidebar.
 
 #### `WorkspaceHeader`
 
-Slot-based top bar for Agentic Platform workspaces. It preserves the standalone prototype chrome by default: 52px header height, 216px brand rail, 380px chat/workspace rail, 300px search slot, strong dividers, and compact 26px sidebar toggle. Product-specific brand, tab title/collapse controls, search internals, wallet, launcher, and avatar remain app-owned slots.
+Slot-based top bar for Agentic Platform workspaces. It preserves the Shiprocket 4.0 Figma chrome by default: 52px header height, 216px brand rail, 380px chat/workspace rail, 280px search slot, strong dividers, and compact 26px sidebar toggle. Product-specific brand, tab title/collapse controls, search internals, wallet, launcher, and avatar remain app-owned slots.
 
 ```tsx
 <WorkspaceHeader
@@ -1924,7 +1947,7 @@ Slot-based top bar for Agentic Platform workspaces. It preserves the standalone
 | `tabsCollapsed` | `boolean` | `false` |
 | `collapsedTabsWidth` | `number` | `40` |
 | `search` | `ReactNode` | — |
-| `searchWidth` | `number` | `300` |
+| `searchWidth` | `number` | `280` |
 | `actions` | `ReactNode` | — |
 | `children` | `ReactNode` | — |
 | `height` | `number` | `52` |
@@ -1937,6 +1960,8 @@ Use `brandCollapsed` and `tabsCollapsed` to mirror the standalone collapsed side
 
 Collapsible application sidebar navigation. Renders grouped sections of items with active state, badges, and hover flyouts for nested items, plus `header`, `footer`, and `children` slots. All data (labels, icons, handlers) is passed in — the component owns layout and collapse behavior.
 
+Expanded default width is 216px. Rows are 32px high with 8px radius, 12px labels, and active rows use the soft `#F6F9F6` surface.
+
 ```tsx
 <SideNav
   collapsed={collapsed}
@@ -1959,7 +1984,7 @@ Collapsible application sidebar navigation. Renders grouped sections of items wi
 |------|------|---------|
 | `sections` | `SideNavSection[]` | **required** |
 | `collapsed` | `boolean` | `false` |
-| `width` | `number` | `240` |
+| `width` | `number` | `216` |
 | `collapsedWidth` | `number` | `56` |
 | `header` | `ReactNode` | — |
 | `children` | `ReactNode` | — |

package/README.md

@@ -57,7 +57,7 @@ Most DOM-backed components forward compatible React props such as `onClick`, `on
 
 Library-owned Tailwind utilities are prefixed with `bfrs-`, for example `bfrs-flex`, `hover:bfrs-bg-primary`, and `bfrs-animate-shimmer`. Unprefixed classes passed through `className` are treated as host-app classes.
 
-Size-aware controls support `sm`, `md`, and `lg`. `sm` is the compact dashboard size for dense controls and filters.
+Size-aware controls support `xs`, `sm`, `md`, and `lg` where applicable. Text inputs and select-family triggers render at the Figma 28px field height; button-like controls keep their own compact scale by component family.
 
 ## Angular Usage
 
@@ -257,6 +257,7 @@ save() {
 
 DataTable also accepts declarative `leadingColumn`, `rowActions`,
 `rowClassRules`, `rowIdKey`, `accessorPath`, and `sortValueKey` configuration.
+The default table chrome matches Shiprocket 4.0 Figma: 8px outer radius, strong `#D3DFD7` outer/header stroke, 46px header, 64px rows, 12px text, 12px selection checkboxes, and a 146px sticky actions column headed `Actions`.
 The standalone helpers are available as `bfrs-table-toolbar`,
 `bfrs-table-empty-state`, `bfrs-table-error-state`, `bfrs-table-skeleton`,
 `bfrs-table-row-actions`, `bfrs-table-bulk-actions`, and
@@ -351,6 +352,7 @@ Keep form validation and API checks in the app. Render field errors below inputs
 ### DateRangePicker
 
 Use `DateRangePicker` for preset and custom date-range filters. Keep API date formatting in the consuming app.
+The trigger uses the neutral compact secondary control by default so it aligns with filter bar dropdowns.
 
 ```tsx
 import { DateRangePicker, presetToRange, type DateRangeValue } from "@bfrs/agentic-components";
@@ -384,6 +386,7 @@ function SaveButton() {
 ### Checkbox
 
 Use `Checkbox` for independent true/false decisions or multi-select choices. It renders as a square checklist control, while `Radio` renders circular options for single-choice groups. Both support primary text plus secondary description text.
+The default checkbox is the compact 12px Shiprocket 4.0 control with secondary stroke and 2.5px radius.
 
 ```tsx
 import { Checkbox, Radio } from "@bfrs/agentic-components";

package/dist/components/data-display/DataTable/DataTable.d.ts

@@ -1,2 +1,2 @@
 import { DataTableProps } from './DataTable.types';
-export declare function DataTable<Row>({ data, columns, getRowId, loading, error, emptyState, emptyTitle, emptyDescription, pagination, enableSorting, sorting, defaultSorting, onSortingChange, visibleColumnIds, columnOrder, defaultColumnOrder, onColumnOrderChange, enableColumnPinning, pinnedColumnCount, defaultPinnedColumnCount, onPinnedColumnCountChange, pinLeadingColumn, defaultPinLeadingColumn, onPinLeadingColumnChange, enableColumnReordering, resetKey, showSortIcon, leadingColumn, rowActions, rowActionsHeader, rowActionsWidth, stickyRowActions, selection, selectedRowIds, onSelectedRowIdsChange, stickyHeader, minWidth, maxHeight, density, className, tableClassName, headerClassName, rowClassName, cellClassName, onRowClick, "aria-label": ariaLabel }: DataTableProps<Row>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<Row>({ data, columns, getRowId, loading, error, emptyState, emptyTitle, emptyDescription, pagination, enableSorting, sorting, defaultSorting, onSortingChange, visibleColumnIds, columnOrder, defaultColumnOrder, onColumnOrderChange, enableColumnPinning, pinnedColumnCount, defaultPinnedColumnCount, onPinnedColumnCountChange, pinLeadingColumn, defaultPinLeadingColumn, onPinLeadingColumnChange, enableColumnReordering, resetKey, showSortIcon, leadingColumn, rowActions, rowActionsHeader, rowActionsWidth, stickyRowActions, selection, selectedRowIds, onSelectedRowIdsChange, stickyHeader, minWidth, maxHeight, className, tableClassName, headerClassName, rowClassName, cellClassName, onRowClick, "aria-label": ariaLabel }: DataTableProps<Row>): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-display/DataTable/DataTable.types.d.ts

@@ -98,7 +98,6 @@ export type DataTableProps<Row> = {
      * prop to keep the footer fixed below the scroll area.
      */
     maxHeight?: number | string;
-    density?: TableDensity;
     className?: string;
     tableClassName?: string;
     headerClassName?: string;
@@ -145,7 +144,6 @@ export type TableStateProps = {
 export type TableSkeletonProps = {
     rows?: number;
     columns?: number;
-    density?: TableDensity;
     colSpan?: number;
 };
 export type TableRowActionsProps<Row> = {

package/dist/components/data-display/DataTable/TableSkeleton.d.ts

@@ -1,2 +1,2 @@
 import { TableSkeletonProps } from './DataTable.types';
-export declare function TableSkeleton({ rows, columns, density, colSpan }: TableSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableSkeleton({ rows, columns, colSpan }: TableSkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/forms/MultiSelect/MultiSelect.d.ts

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
 import { ButtonVariant } from '../../../primitives/Button';
 import { SelectMenuWidth, SelectOption } from '../Select';
-export type MultiSelectSize = "sm" | "md" | "lg";
 /**
  * When the value is committed back to the consumer via `onValueChange`:
  * - `"change"` (default) — on every toggle, immediately.
@@ -25,8 +24,6 @@ export type MultiSelectProps = {
     error?: boolean;
     clearable?: boolean;
     maxVisibleValues?: number;
-    /** Trigger size. Defaults to `"md"`. */
-    size?: MultiSelectSize;
     /** Option popover width relative to the trigger. Defaults to `"auto"` (the
      * popover grows to fit its content and can be wider than the trigger). */
     menuWidth?: SelectMenuWidth;

package/dist/components/ui/forms/SearchableSelect/SearchableSelect.d.ts

@@ -1,5 +1,4 @@
 import { SelectMenuWidth, SelectOption } from '../Select';
-export type SearchableSelectSize = "sm" | "md" | "lg";
 export type SearchableSelectProps = {
     options: SelectOption[];
     value?: string;
@@ -11,8 +10,6 @@ export type SearchableSelectProps = {
     disabled?: boolean;
     error?: boolean;
     clearable?: boolean;
-    /** Trigger size. Defaults to `"md"`. */
-    size?: SearchableSelectSize;
     /** Option popover width relative to the trigger. Defaults to `"auto"`. */
     menuWidth?: SelectMenuWidth;
     className?: string;

package/dist/components/ui/forms/Select/Select.d.ts

@@ -24,7 +24,9 @@ export type SelectProps = {
     onValueChange?: (value: string) => void;
     options: SelectOption[];
     placeholder?: string;
-    size?: "sm" | "md" | "lg";
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
     /** Option popover width relative to the trigger. Defaults to `"auto"`. */
     menuWidth?: SelectMenuWidth;
     disabled?: boolean;

package/dist/components/ui/overlays/overlayPositioning.d.ts

@@ -5,4 +5,5 @@ export declare const popoverContentCollisionClassName = "bfrs-max-h-[min(32rem,v
 export declare const selectContentCollisionClassName = "bfrs-max-h-[min(20rem,var(--radix-select-content-available-height))]";
 export declare const searchableSelectContentCollisionClassName = "bfrs-max-h-[min(18rem,var(--radix-popover-content-available-height))] bfrs-w-[var(--radix-popover-trigger-width)] bfrs-overflow-hidden";
 export declare const searchableSelectListboxCollisionClassName = "bfrs-max-h-[min(14rem,max(4rem,calc(var(--radix-popover-content-available-height)-3rem)))] bfrs-overflow-auto";
+export declare const multiSelectListboxCollisionClassName = "bfrs-min-h-0 bfrs-flex-1 bfrs-max-h-[min(14rem,max(3rem,calc(var(--radix-popover-content-available-height)-6.5rem)))] bfrs-overflow-auto";
 export declare const tooltipContentCollisionClassName = "bfrs-max-w-[min(16rem,var(--radix-tooltip-content-available-width))]";