@cmgfi/clear-ds 1.2.4 → 1.2.7

package/dist/index.d.ts

@@ -333,6 +333,15 @@ export declare interface CalendarProps {
  *   <p>Click anywhere to open.</p>
  * </Card>
  * ```
+ * @example
+ *
+ * ```tsx
+ * // Dark stat tile — for a dark dashboard band. Compose the stat content.
+ * <Card tone="dark">
+ *   <span className="label">Prospect</span>
+ *   <span className="value">97,686</span>
+ * </Card>
+ * ```
  */
 export declare const Card: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>>;
 
@@ -348,6 +357,14 @@ export declare interface CardProps {
     footer?: React.ReactNode;
     /** Card body content. Accepts any ReactNode. */
     children?: React.ReactNode;
+    /**
+     * Surface tone.
+     * - `'light'` (default): white surface with navy text.
+     * - `'dark'`: dark navy surface with light text — for cards placed on a
+     *   dark or saturated dashboard band. Built-in title/subtitle/content text
+     *   colors flip to readable light values; compose your own content inside.
+     */
+    tone?: 'light' | 'dark';
     /**
      * Makes the entire card interactive — adds a pointer cursor and a subtle
      * shadow lift on hover. Pass a handler to opt into this mode.
@@ -1891,29 +1908,6 @@ export declare interface RuleFilterValue {
     rules: FilterRule[];
 }
 
-/**
- * Select — Clear Design System
- *
- * A single-value dropdown. Selecting an option closes the dropdown immediately.
- * Supports an optional live-search filter, three sizes, and full state coverage:
- * idle, hover, active/open, filled, invalid, and disabled.
- *
- * @example
- *
- * ```tsx
- * <Select options={opts} value={val} onChange={setVal} label="Loan type" />
- * ```
- * @example
- *
- * ```tsx
- * <Select options={opts} value={val} onChange={setVal} required invalid helperText="Required." />
- * ```
- * @example
- *
- * ```tsx
- * <Select options={opts} value={val} onChange={setVal} filter size="lg" />
- * ```
- */
 export declare const Select: ForwardRefExoticComponent<SelectProps & RefAttributes<HTMLDivElement>>;
 
 /**
@@ -2042,6 +2036,8 @@ export declare interface SelectProps {
     filterPlaceholder?: string;
     /** Size variant. sm = 10px / md = 12px (default) / lg = 14px. */
     size?: 'sm' | 'md' | 'lg';
+    /** Icon rendered on the left side of the trigger. Pass `true` for the default search icon, or any React node for a custom icon. */
+    leadingIcon?: React.ReactNode | boolean;
     className?: string;
     style?: React.CSSProperties;
 }
@@ -2255,12 +2251,14 @@ export declare interface TabItem {
  * Tabs — Clear Design System
  *
  * Standard underline-style tab strip. Fully controlled — the parent owns
- * which tab is active. Two variants:
+ * which tab is active. Three variants:
  * - `'panel'` (default): renders the active tab's `content` below the strip.
  *   Use for sub-section switching inside a page.
  * - `'nav'`: page-level navigation with larger padding/font; the active
  *   tab's `content` is not rendered (each tab is a route/page). Renders
  *   as `<nav>` for the right semantics.
+ * - `'pills'`: pill-shaped segmented switcher on a dark/colored host surface.
+ *   Strip-only (no content panel); `count` renders as a red circular badge.
  *
  * @example
  *
@@ -2291,6 +2289,22 @@ export declare interface TabItem {
  *   onChange={setPage}
  * />
  * ```
+ * @example
+ *
+ * ```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}
+ * />
+ * ```
  */
 export declare const Tabs: ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>>;
 
@@ -2307,40 +2321,16 @@ export declare interface TabsProps {
      * - `'nav'`: navigation-only strip with larger padding/font; the active
      *   tab's `content` is **not** rendered (each tab represents a page or
      *   route). Renders as `<nav>` for the right semantics.
+     * - `'pills'`: pill-shaped segmented switcher on a dark/colored host
+     *   surface — translucent glass track, a solid light pill behind the active
+     *   segment, and `count` rendered as a red circular badge. Strip-only (no
+     *   content panel). Designed to sit on a saturated or dark background.
      */
-    variant?: 'panel' | 'nav';
+    variant?: 'panel' | 'nav' | 'pills';
     className?: string;
     style?: React.CSSProperties;
 }
 
-/**
- * TextArea — Clear Design System
- *
- * A multi-line text input with label, helper text, character counter (when
- * `maxLength` is set), and full state coverage: default, hover, focus, filled,
- * invalid, and disabled. Supports optional auto-grow behaviour.
- *
- * @example
- *
- * ```tsx
- * <TextArea label="Loan notes" placeholder="Enter notes…" rows={4} />
- * ```
- * @example
- *
- * ```tsx
- * <TextArea label="Comments" maxLength={500} />
- * ```
- * @example
- *
- * ```tsx
- * <TextArea label="Description" autoGrow />
- * ```
- * @example
- *
- * ```tsx
- * <TextArea label="Notes" invalid helperText="This field is required." />
- * ```
- */
 export declare const TextArea: ForwardRefExoticComponent<TextAreaProps & RefAttributes<HTMLTextAreaElement>>;
 
 export declare interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {
@@ -2363,6 +2353,8 @@ export declare interface TextAreaProps extends Omit<React.TextareaHTMLAttributes
     autoGrow?: boolean;
     /** Controls where the character counter renders. 'inside' pins it to the bottom-right of the field; 'outside' (default) places it below the field in the bottom row. */
     counterPlacement?: 'inside' | 'outside';
+    /** Icon rendered on the left side of the field, top-aligned. Pass `true` for the default pencil icon, or any React node for a custom icon. */
+    leadingIcon?: React.ReactNode | boolean;
 }
 
 /**