@cmgfi/clear-ds 1.1.3 → 1.1.4

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,24 @@ 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 slots use design token vars for sizing: `--icon-size-sm` (12px), `--icon-size-md` (14px), `--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`, `lg`. Optional leading/trailing PrimeIcon slots and a notification badge. |
+| `IconButton` | `icon`, `size`, `variant` | Circular button containing a single PrimeIcon. Sizes: `sm` (24×24px), `md` (36×36px), `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`, `lg`. |
+| `SplitButton` | `label`, `items`, `size`, `variant`, `leadingIcon`, `disabled` | Two joined pill buttons: main action (left) + dropdown trigger (right). Variants: `primary`, `secondary`. Sizes: `sm`, `md`, `lg`. Chevron rotates 180° when open. |
+| `LightningButton` | `label`, `size`, `variant`, `items`, `disabled` | Quick-action button with a `pi pi-bolt` affordance and a `pi pi-chevron-down` dropdown. Variants: `filled`, `basic`. Sizes: `sm`, `md`, `lg`. |
+| `CloseButton` | `size`, `disabled` | Circular `pi pi-times` dismiss button used inside overlays and alerts. Sizes: `sm` (24×24px), `md` (36×36px), `lg` (40×40px). |
 
 ### Form Controls
 
@@ -98,7 +108,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. |