@cmgfi/clear-ds 1.1.3 → 1.1.5

package/README.md

@@ -6,7 +6,7 @@ The UI foundation for CMG's internal loan origination platform. Built from scrat
 
 - **npm:** [`@cmgfi/clear-ds`](https://www.npmjs.com/package/@cmgfi/clear-ds)
 - **Storybook:** [clear-pimkxt5rp-cmgprojects.vercel.app](https://clear-pimkxt5rp-cmgprojects.vercel.app)
-- **Version:** 1.0.1
+- **Version:** 1.1.3
 - **License:** UNLICENSED (CMG Financial internal)
 
 ---
@@ -78,14 +78,32 @@ import { Button, InputText, Modal, DataTable } from '@cmgfi/clear-ds';
 
 ### Buttons
 
-| Component | Description |
-|---|---|
-| `Button` | Primary action button. Variants: `primary`, `secondary`, `ghost`, `danger`. Sizes: `sm`, `md`, `lg`. |
-| `IconButton` | Square button containing a single PrimeIcon. |
-| `DropdownButton` | Button that opens a dropdown action menu. |
-| `SplitButton` | Combined primary action + dropdown trigger in one control. |
-| `LightningButton` | Quick-action button with a lightning icon affordance. |
-| `CloseButton` | Compact `×` dismiss button used inside overlays and alerts. |
+All button components share a canonical three-size ramp:
+
+| Size | Height | Font | Padding |
+|------|--------|------|---------|
+| `sm` | 24px   | 10px | `4px 12px` |
+| `md` | 36px   | 12px | `8px 14px` (default) |
+| `lg` | 40px   | 15px | `10px 16px` |
+
+Icon sizes are explicitly defined per button size using design tokens:
+
+| Button size | Icon token | Value |
+|-------------|------------|-------|
+| `sm`        | `--icon-size-md` | 14px |
+| `md`        | `--icon-size-lg` | 18px |
+| `lg`        | `--icon-size-lg` | 18px |
+
+Pass any React node to icon props — PrimeIcons (`<i className="pi pi-*" />`) are the standard.
+
+| Component | Props | Description |
+|---|---|---|
+| `Button` | `variant`, `size`, `leadingIcon`, `trailingIcon`, `badge` | Primary action button. Variants: `primary` (default), `secondary`, `ghost`, `danger`, `link`. Sizes: `sm`, `md` (default), `lg`. Optional leading/trailing PrimeIcon slots and a notification badge. |
+| `IconButton` | `icon`, `size`, `variant` | Circular icon-only button. Sizes: `sm` (24×24px), `md` (36×36px, default), `lg` (40×40px). |
+| `DropdownButton` | `label`, `items`, `size`, `variant`, `leadingIcon`, `disabled` | Button that opens a dropdown action menu. Chevron uses `pi pi-chevron-down`. Sizes: `sm`, `md` (default), `lg`. |
+| `SplitButton` | `label`, `items`, `size`, `variant`, `leadingIcon`, `disabled` | Two joined pill buttons: main action (left) + dropdown trigger (right). `primary` — both halves dark teal. `secondary` — both halves light teal. Sizes: `sm`, `md` (default), `lg`. Chevron rotates 180° when open. |
+| `LightningButton` | `items`, `size`, `variant`, `disabled` | Icon-only quick-action button with `pi pi-bolt` + `pi pi-chevron-down`. Variants: `basic`, `filled`. Sizes: `sm`, `md` (default), `lg`. |
+| `CloseButton` | `size`, `disabled` | Circular `pi pi-times` dismiss button. Default size is `sm` (24×24px). Sizes: `sm` (default), `md` (36×36px), `lg` (40×40px). |
 
 ### Form Controls
 
@@ -98,7 +116,7 @@ import { Button, InputText, Modal, DataTable } from '@cmgfi/clear-ds';
 | `Select` | Single-select dropdown. |
 | `MultiSelect` | Multi-select dropdown with chip display and search. |
 | `ListBox` | Inline scrollable single or multi-select list. |
-| `SelectButton` | Segmented button group for mutually exclusive options. |
+| `SelectButton` | Segmented button group for mutually exclusive options. Variants: `group` (joined toggles) and `options` (split button + dropdown). `size` prop (`sm`/`md`/`lg`). Each option accepts an optional `icon?: React.ReactNode` rendered before its label. |
 | `DatePicker` | Date input with calendar popover. |
 | `ToggleSwitch` | On/off toggle. |
 | `FileUpload` | Drag-and-drop file upload with type validation. |