@cmgfi/clear-ds 1.2.5 → 1.3.0

package/dist/llms.txt

@@ -716,6 +716,7 @@ Props:
 - `subTitle`: ReactNode — muted subtitle below the title
 - `footer`: ReactNode — action area at the bottom (typically buttons)
 - `children`: ReactNode — card body
+- `tone`: `'light' | 'dark'` — default `'light'`. `dark` renders a dark navy surface with light text (built-in title/subtitle/content flip to readable light values) for cards on a dark/saturated dashboard band; compose stat content (label + value) inside.
 - `onClick`: `React.MouseEventHandler<HTMLDivElement>` — makes the card interactive with hover shadow lift
 
 ```tsx
@@ -726,6 +727,12 @@ Props:
 <Card title="Open Application" onClick={() => navigate('/app/123')}>
   <p>Click anywhere to open.</p>
 </Card>
+
+// Dark stat tile on a dashboard band
+<Card tone="dark">
+  <span className="label">Prospect</span>
+  <span className="value">97,686</span>
+</Card>
 ```
 
 ---
@@ -774,6 +781,10 @@ Props:
 - `tabs`: `TabItem[]` — `{ id: string; label: string; icon?: ReactNode; count?: number; icon2?: ReactNode; content?: ReactNode; disabled?: boolean }`
 - `activeTab`: string — controlled active tab ID
 - `onChange`: `(id: string) => void`
+- `variant`: `'panel' | 'nav' | 'pills'` (default `'panel'`)
+  - `'panel'`: underline strip + the active tab's `content` rendered below.
+  - `'nav'`: page-level navigation strip (larger padding, renders as `<nav>`, no content panel).
+  - `'pills'`: pill-shaped segmented switcher for a dark/colored host surface — translucent glass track, a solid light pill behind the active segment, and `count` shown as a red circular badge. Strip-only (no content panel). Place it on a saturated or dark background.
 
 ```tsx
 const [active, setActive] = useState('tab1');
@@ -788,6 +799,21 @@ const [active, setActive] = useState('tab1');
 />
 ```
 
+```tsx
+// Pills variant — segmented view switcher on a dark/colored band.
+<Tabs
+  variant="pills"
+  tabs={[
+    { id: 'overview',   label: 'Overview' },
+    { id: 'processing', label: 'To Processing' },
+    { id: 'closing',    label: 'To Closing' },
+    { id: 'reminders',  label: 'Reminders', count: 20 },
+  ]}
+  activeTab={view}
+  onChange={setView}
+/>
+```
+
 ---
 
 ### BannerTabs

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmgfi/clear-ds",
-  "version": "1.2.5",
+  "version": "1.3.0",
   "description": "CMG Financial — Clear Design System React component library",
   "keywords": [
     "cmg",