@cmgfi/clear-ds 1.2.5 → 1.3.0

package/dist/index.d.ts

@@ -96,8 +96,31 @@ export declare interface AUSChipProps {
     color: AUSChipColor;
 }
 
+export declare const Badge: default_2.ForwardRefExoticComponent<BadgeProps & default_2.RefAttributes<HTMLSpanElement>>;
+
+export declare interface BadgeProps extends Omit<default_2.HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /**
+     * Value to display inside the badge. Omit to render as a dot indicator.
+     */
+    value?: string | number;
+    /**
+     * Severity variant controlling background and text color.
+     * @default 'secondary'
+     */
+    severity?: BadgeSeverity;
+    /**
+     * Size of the badge.
+     * @default 'normal'
+     */
+    size?: BadgeSize;
+}
+
+export declare type BadgeSeverity = 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'contrast';
+
 export declare type BadgeShape = 'square' | 'diamond' | 'circle';
 
+export declare type BadgeSize = 'xs' | 'normal' | 'large';
+
 export declare function BannerAlert({ severity, title, detail, closable, onClose }: BannerAlertProps): JSX_2.Element;
 
 export declare namespace BannerAlert {
@@ -333,6 +356,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 +380,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.
@@ -2234,12 +2274,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
  *
@@ -2270,6 +2312,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>>;
 
@@ -2286,40 +2344,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'> {
@@ -2342,6 +2376,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;
 }
 
 /**