@common-origin/design-system 2.15.0 → 2.16.0

package/dist/components/atoms/Button/Button.d.ts

@@ -1,7 +1,19 @@
 import React from 'react';
 import { type IconName } from '../Icon';
+/**
+ * Button variants. `accent` is the blue call to action one level above `primary`;
+ * use at most one per view (decision 0016).
+ */
+export type ButtonVariant = 'primary' | 'secondary' | 'naked' | 'accent'
+/** @deprecated Use `accent`. `emphasis` will be removed in 3.0. */
+ | 'emphasis' | 'danger';
 export interface BaseButtonProps {
-    variant?: 'primary' | 'secondary' | 'naked' | 'emphasis' | 'danger';
+    /**
+     * Visual style. `accent` is the blue call to action above `primary` (at most one per view).
+     * `emphasis` is a deprecated alias for `accent` and will be removed in 3.0.
+     * @default 'primary'
+     */
+    variant?: ButtonVariant;
     size?: 'small' | 'medium' | 'large';
     url?: string;
     purpose?: 'button' | 'link';

package/dist/components/atoms/CategoryBadge/CategoryBadge.d.ts

@@ -1,69 +1,29 @@
-import { ReactNode } from 'react';
-import type { IconName } from '../../../types/icons';
-/**
- * Category color options for CategoryBadge
- */
-export type CategoryColor = 'blue' | 'purple' | 'pink' | 'yellow' | 'green' | 'red' | 'orange' | 'gray';
-/**
- * Visual variant options for CategoryBadge
- */
-export type CategoryVariant = 'filled' | 'outlined' | 'minimal';
+import React from 'react';
+import { type CategoryLabelProps } from '../CategoryLabel/CategoryLabel';
+export type { CategoryColor, CategoryVariant } from '../CategoryLabel/CategoryLabel';
 /**
  * Size options for CategoryBadge
+ * @deprecated Use `CategoryLabelSize`: CategoryBadge `small` is CategoryLabel `medium`, and
+ * `medium` is `large` (decision 0018).
  */
 export type CategorySize = 'small' | 'medium';
 /**
  * Props for the CategoryBadge component
+ * @deprecated Use `CategoryLabelProps`. CategoryBadge is renamed CategoryLabel and is removed in
+ * 3.0 (decision 0018).
  */
-export interface CategoryBadgeProps {
-    /**
-     * The category text to display
-     */
-    children: ReactNode;
-    /**
-     * Color scheme for the badge
-     * @default 'blue'
-     */
-    color?: CategoryColor;
-    /**
-     * Visual variant of the badge
-     * @default 'filled'
-     */
-    variant?: CategoryVariant;
+export interface CategoryBadgeProps extends Omit<CategoryLabelProps, 'size'> {
     /**
      * Size of the badge
      * @default 'medium'
      */
     size?: CategorySize;
-    /**
-     * Optional icon name to display
-     */
-    icon?: IconName;
-    /**
-     * Test identifier for automated testing
-     */
-    'data-testid'?: string;
-    /**
-     * Accessible label for the badge
-     */
-    'aria-label'?: string;
 }
 /**
- * CategoryBadge component for displaying transaction categories
- *
- * A static label for categorizing content with support for 8 color options,
- * 3 visual variants, and optional icons. Perfect for categorizing
- * financial transactions or content types.
- *
- * @example
- * ```tsx
- * <CategoryBadge color="orange" icon="restaurant">
- *   Food & Dining
- * </CategoryBadge>
+ * CategoryBadge displays a category label.
  *
- * <CategoryBadge color="blue" variant="outlined" size="small">
- *   Travel
- * </CategoryBadge>
- * ```
+ * @deprecated Renamed to `CategoryLabel` (same `color` and `variant`). Map `size="small"` to
+ * `"medium"`, and `size="medium"` (or no size) to `"large"`, CategoryLabel's default.
+ * CategoryBadge is removed in 3.0 (decision 0018).
  */
 export declare const CategoryBadge: React.FC<CategoryBadgeProps>;

package/dist/components/atoms/CategoryBadge/index.d.ts

@@ -1,2 +1,2 @@
 export { CategoryBadge } from './CategoryBadge';
-export type { CategoryBadgeProps, CategoryColor, CategoryVariant, CategorySize } from './CategoryBadge';
+export type { CategoryBadgeProps, CategorySize } from './CategoryBadge';

package/dist/components/atoms/CategoryLabel/CategoryLabel.d.ts

@@ -0,0 +1,69 @@
+import { ReactNode } from 'react';
+import type { IconName } from '../../../types/icons';
+/**
+ * Category color options for CategoryLabel
+ */
+export type CategoryColor = 'blue' | 'purple' | 'pink' | 'yellow' | 'green' | 'red' | 'orange' | 'gray';
+/**
+ * Visual variant options for CategoryLabel
+ */
+export type CategoryVariant = 'filled' | 'outlined' | 'minimal';
+/**
+ * Size options for CategoryLabel: medium (24px) or large (32px), on the decision 0018 scale
+ */
+export type CategoryLabelSize = 'medium' | 'large';
+/**
+ * Props for the CategoryLabel component
+ */
+export interface CategoryLabelProps {
+    /**
+     * The category text to display
+     */
+    children: ReactNode;
+    /**
+     * Color scheme for the label
+     * @default 'blue'
+     */
+    color?: CategoryColor;
+    /**
+     * Visual variant of the label
+     * @default 'filled'
+     */
+    variant?: CategoryVariant;
+    /**
+     * Size: medium (24px) or large (32px)
+     * @default 'large'
+     */
+    size?: CategoryLabelSize;
+    /**
+     * Optional icon name to display
+     */
+    icon?: IconName;
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+    /**
+     * Accessible label, announced instead of the visible text (for example "Category: Food & Dining").
+     * Rendered as visually hidden text, because a plain label has no role that can be named (#78).
+     */
+    'aria-label'?: string;
+}
+/**
+ * CategoryLabel colour-codes an item's category, such as a transaction's (decision 0018).
+ *
+ * A static, chip-like label with 8 category colours, 3 visual variants and an optional icon.
+ * Category colours carry no status meaning; for status use StatusLabel.
+ *
+ * @example
+ * ```tsx
+ * <CategoryLabel color="orange" icon="creditCard">
+ *   Shopping
+ * </CategoryLabel>
+ *
+ * <CategoryLabel color="blue" variant="outlined" size="medium">
+ *   Travel
+ * </CategoryLabel>
+ * ```
+ */
+export declare const CategoryLabel: React.FC<CategoryLabelProps>;

package/dist/components/atoms/CategoryLabel/index.d.ts

@@ -0,0 +1,2 @@
+export { CategoryLabel } from './CategoryLabel';
+export type { CategoryLabelProps, CategoryColor, CategoryVariant, CategoryLabelSize } from './CategoryLabel';

package/dist/components/atoms/Chip/BooleanChip.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { BaseChipProps } from './shared/types';
+/** @deprecated Becomes `FilterChipProps` in 3.0 (decision 0016). */
 export interface BooleanChipProps extends BaseChipProps {
     /** Whether the chip is in selected state */
     selected: boolean;
@@ -18,6 +19,10 @@ export interface BooleanChipProps extends BaseChipProps {
  * - Entire chip is clickable to toggle
  * - Keyboard activation with Space or Enter
  * - Uses checkbox role with aria-checked
- * - Visual background change when selected
+ * - Light-blue fill and blue text when selected and enabled; disabled colours when disabled
+ *
+ * @deprecated Becomes `FilterChip` in 3.0, with the same props. Keep using `BooleanChip`
+ * until you upgrade; in 3.0, replace `FilterChip` with `InputChip` first, then
+ * `BooleanChip` with `FilterChip` (decision 0016).
  */
 export declare const BooleanChip: React.FC<BooleanChipProps>;

package/dist/components/atoms/Chip/Chip.d.ts

@@ -1,9 +1,17 @@
 import React from 'react';
 import { BaseChipProps, ChipVariant, LegacyVariant } from './shared/types';
 export interface ChipProps extends BaseChipProps {
-    /** Visual style variant */
+    /**
+     * Visual style. Only `default` stays in 3.0. `emphasis`, `subtle`, `interactive`, `light`
+     * and `dark` are deprecated and will be removed (decision 0016).
+     * @default 'default'
+     */
     variant?: ChipVariant | LegacyVariant;
-    /** Click handler for interactive chips */
+    /**
+     * Click handler.
+     * @deprecated Removed in 3.0: the static Chip is not interactive. For a clickable action use a
+     * Button; for a toggle use `BooleanChip` (`FilterChip` in 3.0).
+     */
     onClick?: () => void;
     /** Custom ARIA role override */
     role?: string;
@@ -11,18 +19,15 @@ export interface ChipProps extends BaseChipProps {
     title?: string;
 }
 /**
- * Chip - Compact element for displaying tags, categories, and labels
+ * Chip - a static, non-interactive label for tags, categories and metadata.
  *
- * Use this component for static display chips or simple interactive chips.
- * For specialized filtering patterns, use:
- * - FilterChip: Dismissible chips for showing applied filters
- * - BooleanChip: Toggleable chips for quick filter controls
+ * Chips are classified by job (decision 0016):
+ * - Chip: a static label (`default` variant only)
+ * - InputChip: a removable value, such as an applied filter (formerly `FilterChip`)
+ * - BooleanChip: toggles a filter on and off (becomes `FilterChip` in 3.0)
  *
- * Variants:
- * - default: Standard gray background
- * - emphasis: High-contrast dark background
- * - subtle: Light background for secondary info
- * - interactive: Blue background with hover states
+ * The `emphasis`, `subtle`, `interactive`, `light` and `dark` variants and `onClick` are
+ * deprecated and will be removed in 3.0.
  */
 export declare const Chip: React.FC<ChipProps>;
 export interface LegacyChipProps {

package/dist/components/atoms/Chip/FilterChip.d.ts

@@ -1,27 +1,13 @@
-import React from 'react';
-import { BaseChipProps } from './shared/types';
-export interface FilterChipProps extends BaseChipProps {
-    /** Whether the filter is in selected/applied state */
-    selected?: boolean;
-    /** Callback function when the chip is dismissed via close button or keyboard */
-    onDismiss?: () => void;
-    /** Custom ARIA role override */
-    role?: string;
-}
+import { type InputChipProps } from './InputChip';
 /**
- * FilterChip - Chip for displaying filters with selected state and optional dismissal
- *
- * Use this component to show filters that can be selected/deselected.
- * When selected, displays a checkmark and light blue background.
- * Optionally dismissible when onDismiss is provided.
+ * @deprecated Renamed to `InputChipProps`. In 3.0 `FilterChipProps` becomes the props of the toggle chip.
+ */
+export type FilterChipProps = InputChipProps;
+/**
+ * FilterChip - a removable chip with an optional selected state.
  *
- * Features:
- * - Shows checkmark icon when selected
- * - Light blue background when selected
- * - Optional close (×) button when onDismiss is provided
- * - Keyboard dismissal with Delete or Backspace keys (when dismissible)
- * - Non-clickable body (only close button is interactive when present)
- * - Uses subtle/interactive background styling based on selected state
- * - Announces as "status" to screen readers
+ * @deprecated Renamed to `InputChip`; in 3.0 `FilterChip` becomes the toggle chip (today's
+ * `BooleanChip`). Replace `FilterChip` with `InputChip` first, then `BooleanChip` with
+ * `FilterChip` when you upgrade to 3.0 (decision 0016).
  */
-export declare const FilterChip: React.FC<FilterChipProps>;
+export declare const FilterChip: import("react").FC<InputChipProps>;

package/dist/components/atoms/Chip/InputChip.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { BaseChipProps } from './shared/types';
+export interface InputChipProps extends BaseChipProps {
+    /** Whether the filter is in selected/applied state */
+    selected?: boolean;
+    /** Callback function when the chip is dismissed via close button or keyboard */
+    onDismiss?: () => void;
+    /** Custom ARIA role override */
+    role?: string;
+}
+/**
+ * InputChip - A removable value, such as an applied filter, with an optional selected state
+ *
+ * Use this component to show values the user has entered or applied, such as filters.
+ * When selected, displays a checkmark on the light-blue selected treatment (decision 0016).
+ * A selected disabled chip uses the disabled colours and keeps its checkmark.
+ * Optionally dismissible when onDismiss is provided.
+ *
+ * Features:
+ * - Shows checkmark icon when selected
+ * - Light-blue fill and blue text when selected and enabled; disabled colours when disabled
+ * - Optional close (×) button when onDismiss is provided
+ * - Keyboard dismissal with Delete or Backspace keys (when dismissible)
+ * - Non-clickable body (only close button is interactive when present)
+ * - Announces as "status" to screen readers
+ */
+export declare const InputChip: React.FC<InputChipProps>;

package/dist/components/atoms/Chip/index.d.ts

@@ -1,3 +1,4 @@
 export * from './Chip';
+export * from './InputChip';
 export * from './FilterChip';
 export * from './BooleanChip';

package/dist/components/atoms/Chip/shared/types.d.ts

@@ -7,7 +7,17 @@ export interface BaseChipProps {
     'aria-label'?: string;
     'aria-describedby'?: string;
 }
-export type ChipVariant = 'default' | 'emphasis' | 'subtle' | 'interactive';
+/**
+ * Visual variants for the static Chip. Only `default` stays in 3.0 (decision 0016):
+ * chips are classified by job, not emphasis.
+ */
+export type ChipVariant = 'default'
+/** @deprecated Removed in 3.0. Chips have no emphasis levels; use `default`. */
+ | 'emphasis'
+/** @deprecated Removed in 3.0. Use `default`. */
+ | 'subtle'
+/** @deprecated Removed in 3.0. For a clickable action use a Button; for a toggle use `BooleanChip` (`FilterChip` in 3.0). */
+ | 'interactive';
 export interface InternalStyledProps {
     $variant: ChipVariant;
     $size: BaseChipProps['size'];
@@ -15,4 +25,8 @@ export interface InternalStyledProps {
     $clickable?: boolean;
     $selected?: boolean;
 }
+/**
+ * Legacy Chip variants.
+ * @deprecated Removed in 3.0. `light` is the same as `default`; `dark` maps to the deprecated `emphasis`. Use `default`.
+ */
 export type LegacyVariant = 'light' | 'dark';

package/dist/components/atoms/Chip/shared/utils.d.ts

@@ -1,88 +1,4 @@
 import { ChipVariant, BaseChipProps } from './types';
-declare const chip: {
-    closeButton: {
-        size: string;
-    };
-    default: {
-        backgroundColor: string;
-        textColor: string;
-        borderRadius: string;
-        padding: string;
-        font: string;
-    };
-    hover: {
-        backgroundColor: string;
-    };
-    active: {
-        backgroundColor: string;
-    };
-    focus: {
-        outline: string;
-        outlineOffset: string;
-    };
-    disabled: {
-        backgroundColor: string;
-        textColor: string;
-    };
-    variants: {
-        emphasis: {
-            backgroundColor: string;
-            textColor: string;
-            hover: {
-                backgroundColor: string;
-            };
-            active: {
-                backgroundColor: string;
-            };
-            disabled: {
-                backgroundColor: string;
-                textColor: string;
-            };
-        };
-        subtle: {
-            backgroundColor: string;
-            textColor: string;
-            hover: {
-                backgroundColor: string;
-            };
-            active: {
-                backgroundColor: string;
-            };
-            disabled: {
-                backgroundColor: string;
-                textColor: string;
-            };
-        };
-        interactive: {
-            backgroundColor: string;
-            textColor: string;
-            hover: {
-                backgroundColor: string;
-            };
-            active: {
-                backgroundColor: string;
-            };
-            disabled: {
-                backgroundColor: string;
-                textColor: string;
-            };
-        };
-    };
-    sizes: {
-        small: {
-            padding: string;
-            font: string;
-        };
-        medium: {
-            padding: string;
-            font: string;
-        };
-        large: {
-            padding: string;
-            font: string;
-        };
-    };
-};
 interface StyledChipProps {
     $variant: ChipVariant;
     $size: BaseChipProps['size'];
@@ -92,4 +8,4 @@ interface StyledChipProps {
 }
 export declare const getVariantStyles: ({ $variant, $selected, $clickable, $disabled }: StyledChipProps) => string;
 export declare const getSizeStyles: ({ $size }: StyledChipProps) => string;
-export { chip as chipTokens };
+export {};

package/dist/components/atoms/StatusBadge/StatusBadge.d.ts

@@ -1,69 +1,23 @@
 import React from 'react';
-/**
- * Status type options for StatusBadge
- */
-export type StatusType = 'pending' | 'completed' | 'failed' | 'cancelled' | 'processing' | 'scheduled';
-/**
- * Size options for StatusBadge
- */
-export type StatusSize = 'small' | 'medium';
+import { type StatusLabelProps } from '../StatusLabel/StatusLabelBase';
+export type { StatusType, StatusSize } from '../StatusLabel/StatusLabelBase';
 /**
  * Props for the StatusBadge component
+ * @deprecated Use `StatusLabelProps`. StatusBadge is renamed StatusLabel and is removed in 3.0
+ * (decision 0018).
  */
-export interface StatusBadgeProps {
-    /**
-     * The status type to display
-     */
-    status: StatusType;
-    /**
-     * Optional custom label (defaults to status name)
-     */
-    label?: string;
-    /**
-     * Size of the badge
-     * @default 'medium'
-     */
-    size?: StatusSize;
+export interface StatusBadgeProps extends StatusLabelProps {
     /**
      * Whether to show the icon
      * @default true
+     * @deprecated StatusLabel always shows the icon, so status is never conveyed by colour alone.
      */
     showIcon?: boolean;
-    /**
-     * Whether status changes should be announced to screen readers
-     * @default true
-     */
-    liveRegion?: boolean;
-    /**
-     * Test identifier for automated testing
-     */
-    'data-testid'?: string;
-    /**
-     * Accessible label override
-     */
-    'aria-label'?: string;
 }
 /**
- * StatusBadge component for displaying transaction or task status
- *
- * Displays status with appropriate color, icon, and supports live updates for screen readers.
- * Maps to 6 common status types with semantic color tokens.
- *
- * @example
- * ```tsx
- * <StatusBadge status="completed" />
- *
- * <StatusBadge
- *   status="pending"
- *   label="Awaiting approval"
- *   size="small"
- * />
+ * StatusBadge displays a transaction or task status.
  *
- * <StatusBadge
- *   status="failed"
- *   showIcon={false}
- *   liveRegion={true}
- * />
- * ```
+ * @deprecated Renamed to `StatusLabel` (same `status`, `size`, `label`, `liveRegion`), which always
+ * shows the icon. StatusBadge is removed in 3.0 (decision 0018).
  */
 export declare const StatusBadge: React.FC<StatusBadgeProps>;

package/dist/components/atoms/StatusBadge/index.d.ts

@@ -1,2 +1,2 @@
 export { StatusBadge } from './StatusBadge';
-export type { StatusBadgeProps, StatusType, StatusSize } from './StatusBadge';
+export type { StatusBadgeProps } from './StatusBadge';

package/dist/components/atoms/StatusLabel/StatusLabel.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { type StatusLabelProps } from './StatusLabelBase';
+export type { StatusLabelProps, StatusType, StatusSize } from './StatusLabelBase';
+/**
+ * StatusLabel conveys the status of something, such as a transaction or task (decision 0018).
+ *
+ * Uses only the status colour tokens and always shows an icon with its text, so status is never
+ * conveyed by colour alone. Not interactive. Announces changes politely to screen readers.
+ *
+ * @example
+ * ```tsx
+ * <StatusLabel status="completed" />
+ *
+ * <StatusLabel status="pending" label="Awaiting approval" size="small" />
+ * ```
+ */
+export declare const StatusLabel: React.FC<StatusLabelProps>;

package/dist/components/atoms/StatusLabel/StatusLabelBase.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+/**
+ * Status type options for StatusLabel
+ */
+export type StatusType = 'pending' | 'completed' | 'failed' | 'cancelled' | 'processing' | 'scheduled';
+/**
+ * Size options for StatusLabel
+ */
+export type StatusSize = 'small' | 'medium';
+/**
+ * Props shared by StatusLabel and the deprecated StatusBadge
+ */
+export interface StatusLabelProps {
+    /**
+     * The status type to display
+     */
+    status: StatusType;
+    /**
+     * Optional custom label (defaults to status name)
+     */
+    label?: string;
+    /**
+     * Size: small (20px) or medium (24px)
+     * @default 'medium'
+     */
+    size?: StatusSize;
+    /**
+     * Whether status changes should be announced to screen readers
+     * @default true
+     */
+    liveRegion?: boolean;
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+    /**
+     * Accessible label override. Used as the status's name and announced instead of the visible
+     * text and icon (#78).
+     */
+    'aria-label'?: string;
+}
+/**
+ * Shared implementation of StatusLabel and the deprecated StatusBadge. Internal: not exported
+ * from the package. `showIcon` exists only for StatusBadge; StatusLabel always shows the icon
+ * (decision 0018).
+ */
+export declare const StatusLabelBase: React.FC<StatusLabelProps & {
+    showIcon?: boolean;
+}>;

package/dist/components/atoms/StatusLabel/index.d.ts

@@ -0,0 +1,2 @@
+export { StatusLabel } from './StatusLabel';
+export type { StatusLabelProps, StatusType, StatusSize } from './StatusLabel';

package/dist/components/atoms/Tag/Tag.d.ts

@@ -14,6 +14,11 @@ export interface TagProps {
      * @default true
      */
     border?: boolean;
+    /**
+     * Size: small (20px) for dense layouts, or medium (24px). Decision 0018 size scale.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium';
     /**
      * Test identifier for automated testing
      */

package/dist/components/atoms/index.d.ts

@@ -3,6 +3,7 @@ export * from './Badge';
 export * from './Box';
 export * from './Button';
 export * from './CategoryBadge';
+export * from './CategoryLabel';
 export * from './Chip';
 export * from './Container';
 export * from './Picture';
@@ -14,5 +15,6 @@ export * from './ProgressBar';
 export * from './Divider';
 export * from './Stack';
 export * from './StatusBadge';
+export * from './StatusLabel';
 export * from './Tag';
 export * from './Typography';