@common-origin/design-system 2.0.0 → 2.2.5

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

@@ -3,6 +3,6 @@ import { InternalStyledProps } from './types';
 export declare const BaseChipStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    $disabled?: boolean | undefined;
+    $disabled?: boolean;
 }>> & string;
 export declare const StyledChipWrapper: React.FC<React.PropsWithChildren<InternalStyledProps & React.HTMLAttributes<HTMLSpanElement>>>;

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

@@ -40,7 +40,7 @@ export declare const getVariantStylesAsObject: (variant: ChipVariant, selected?:
     backgroundColor: string;
     color: string;
 };
-export declare const getSizeStylesAsObject: (size: BaseChipProps['size']) => {
+export declare const getSizeStylesAsObject: (size: BaseChipProps["size"]) => {
     font: string;
     padding: string;
 };

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

@@ -1,9 +1,12 @@
 import React from 'react';
+export type DateFormatMode = 'absolute' | 'relative' | 'smart';
 export interface DateFormatterProps {
     /** ISO date string to format */
     dateString: string;
     /** Format pattern (defaults to 'yyyy') */
     formatString?: string;
+    /** Date formatting mode: 'absolute' uses formatString, 'relative' shows "Today"/"Yesterday", 'smart' combines both */
+    mode?: DateFormatMode;
     /** Optional data-testid for testing */
     'data-testid'?: string;
 }

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

@@ -0,0 +1,26 @@
+import React from 'react';
+export type MoneyDisplayVariant = 'default' | 'positive' | 'negative' | 'neutral';
+export type MoneyDisplaySize = 'small' | 'medium' | 'large' | 'xlarge';
+export type MoneyDisplayWeight = 'regular' | 'medium' | 'bold';
+export type MoneyDisplayAlign = 'left' | 'center' | 'right';
+export interface MoneyDisplayProps {
+    /** The monetary amount to display */
+    amount: number;
+    /** Currency code (ISO 4217) */
+    currency?: string;
+    /** Visual variant affecting color and style */
+    variant?: MoneyDisplayVariant;
+    /** Show +/- sign prefix */
+    showSign?: boolean;
+    /** Size of the amount display */
+    size?: MoneyDisplaySize;
+    /** Font weight */
+    weight?: MoneyDisplayWeight;
+    /** Locale for number formatting */
+    locale?: string;
+    /** Align text */
+    align?: MoneyDisplayAlign;
+    /** Data test id for testing */
+    'data-testid'?: string;
+}
+export declare const MoneyDisplay: React.FC<MoneyDisplayProps>;

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

@@ -0,0 +1,2 @@
+export { MoneyDisplay } from './MoneyDisplay';
+export type { MoneyDisplayProps, MoneyDisplayVariant, MoneyDisplaySize, MoneyDisplayWeight, MoneyDisplayAlign } from './MoneyDisplay';

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

@@ -8,6 +8,7 @@ export * from './Picture';
 export * from './DateFormatter';
 export * from './Icon';
 export * from './IconButton';
+export * from './MoneyDisplay';
 export * from './ProgressBar';
 export * from './Divider';
 export * from './Stack';

package/dist/components/molecules/AccountCard/AccountCard.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { IconName } from '../../atoms/Icon';
+export type AccountType = 'checking' | 'savings' | 'credit' | 'investment' | 'loan';
+export type TrendDirection = 'up' | 'down' | 'neutral';
+export interface AccountCardAction {
+    label: string;
+    onClick: () => void;
+    icon?: IconName;
+    variant?: 'primary' | 'secondary' | 'naked';
+}
+export interface AccountCardProps {
+    /** Type of account */
+    accountType: AccountType;
+    /** Display name of the account */
+    accountName: string;
+    /** Account balance */
+    balance: number;
+    /** Optional account number (last 4 digits) */
+    accountNumber?: string;
+    /** Trend direction for balance change */
+    trend?: TrendDirection;
+    /** Trend value (e.g., percentage or amount) */
+    trendValue?: string;
+    /** Primary action button */
+    action?: AccountCardAction;
+    /** Secondary action button */
+    secondaryAction?: AccountCardAction;
+    /** Currency code */
+    currency?: string;
+    /** Whether the card should be interactive (clickable) */
+    onClick?: () => void;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+}
+/**
+ * AccountCard component
+ *
+ * Displays account information in a card format with account type icon,
+ * name, balance, optional trend indicator, and action buttons. Minimum
+ * 300x200px with elevation and hover effects.
+ *
+ * Composes: Stack, Box, Icon, Typography, MoneyDisplay, Button
+ */
+export declare const AccountCard: React.FC<AccountCardProps>;

package/dist/components/molecules/AccountCard/index.d.ts

@@ -0,0 +1,2 @@
+export { AccountCard } from './AccountCard';
+export type { AccountCardProps, AccountType, TrendDirection, AccountCardAction } from './AccountCard';

package/dist/components/molecules/Checkbox/SelectableInputBase.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type SelectableInputState = 'default' | 'error' | 'disabled';
 interface StyledCheckboxInputProps {
     $state: SelectableInputState;
@@ -22,7 +21,7 @@ export declare const StyledCheckbox: import("styled-components/dist/types").ISty
  */
 export declare const StyledCheckboxContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
     $disabled: boolean;
-    $labelPosition: 'left' | 'right';
+    $labelPosition: "left" | "right";
 }>> & string;
 /**
  * Label text with proper typography

package/dist/components/molecules/DateGroup/DateGroup.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { DateFormatMode } from '../../atoms/DateFormatter';
+export interface DateGroupProps {
+    /** The date for this group (used for formatting the header) */
+    date: Date | string;
+    /** Children to render under the date header (typically transactions) */
+    children: React.ReactNode;
+    /** Format mode for date display */
+    format?: DateFormatMode;
+    /** Whether to show total amount for this date group */
+    showTotal?: boolean;
+    /** Total amount for this date group (shown if showTotal is true) */
+    totalAmount?: number;
+    /** Whether to show count of items in this group */
+    showCount?: boolean;
+    /** Count of items in this group (shown if showCount is true) */
+    count?: number;
+    /** Whether to make the header sticky (useful for scrolling lists) */
+    sticky?: boolean;
+    /** Currency for total amount display */
+    currency?: string;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+}
+/**
+ * DateGroup component
+ *
+ * Groups related content (typically transactions) under a formatted date header
+ * with optional total amount and item count displays. Supports sticky headers
+ * for scrolling lists.
+ *
+ * Composes: DateFormatter, MoneyDisplay, Stack, Typography
+ */
+export declare const DateGroup: React.FC<DateGroupProps>;

package/dist/components/molecules/DateGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { DateGroup } from './DateGroup';
+export type { DateGroupProps } from './DateGroup';

package/dist/components/molecules/EmptyState/EmptyState.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { type IconName } from '../../../types/icons';
+export type EmptyStateIllustration = 'search' | 'transactions' | 'notifications' | 'empty' | 'error' | 'custom';
+export type EmptyStateVariant = 'default' | 'error' | 'success';
+export type EmptyStateSize = 'small' | 'medium' | 'large';
+export interface EmptyStateAction {
+    label: string;
+    onClick: () => void;
+    variant?: 'primary' | 'secondary';
+    icon?: IconName;
+}
+export interface EmptyStateProps {
+    /** Predefined illustration type */
+    illustration?: EmptyStateIllustration;
+    /** Custom illustration (SVG string or React node) */
+    customIllustration?: React.ReactNode;
+    /** Main heading */
+    title: string;
+    /** Descriptive text */
+    description: string;
+    /** Primary call-to-action */
+    action?: EmptyStateAction;
+    /** Secondary action */
+    secondaryAction?: EmptyStateAction;
+    /** Visual variant */
+    variant?: EmptyStateVariant;
+    /** Size of the component */
+    size?: EmptyStateSize;
+    /** Data test id for testing */
+    'data-testid'?: string;
+}
+export declare const EmptyState: React.FC<EmptyStateProps>;

package/dist/components/molecules/EmptyState/index.d.ts

@@ -0,0 +1,2 @@
+export { EmptyState } from './EmptyState';
+export type { EmptyStateProps, EmptyStateIllustration, EmptyStateVariant, EmptyStateSize, EmptyStateAction } from './EmptyState';

package/dist/components/molecules/TextField/InputBase.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Shared input states for text-based form controls
  */

package/dist/components/molecules/TransactionListItem/TransactionListItem.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+export type TransactionStatus = 'completed' | 'pending' | 'failed';
+export type TransactionCategory = 'shopping' | 'dining' | 'transport' | 'entertainment' | 'bills' | 'other';
+export interface TransactionListItemProps {
+    /** Merchant or transaction name */
+    merchant: string;
+    /** Transaction amount (positive for income, negative for expense) */
+    amount: number;
+    /** Transaction date */
+    date: Date | string;
+    /** Transaction status */
+    status?: TransactionStatus;
+    /** Transaction category */
+    category?: TransactionCategory;
+    /** Optional merchant logo URL */
+    merchantLogo?: string;
+    /** Optional description or note */
+    description?: string;
+    /** Whether this transaction has a receipt attached */
+    hasReceipt?: boolean;
+    /** Whether this transaction has notes attached */
+    hasNote?: boolean;
+    /** Currency code */
+    currency?: string;
+    /** Click handler for the transaction */
+    onClick?: () => void;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+}
+/**
+ * TransactionListItem component
+ *
+ * Displays a single transaction in a list with merchant info, amount, date,
+ * status, and optional metadata (category, receipt, notes). Minimum height 72px
+ * with interactive states for clickable items.
+ *
+ * Composes: Avatar, Badge, MoneyDisplay, Icon, DateFormatter, Typography, Stack
+ */
+export declare const TransactionListItem: React.FC<TransactionListItemProps>;

package/dist/components/molecules/TransactionListItem/index.d.ts

@@ -0,0 +1,2 @@
+export { TransactionListItem } from './TransactionListItem';
+export type { TransactionListItemProps, TransactionStatus, TransactionCategory } from './TransactionListItem';

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

@@ -1,3 +1,4 @@
+export * from './AccountCard';
 export * from './Alert';
 export * from './Breadcrumbs';
 export * from './CardSmall';
@@ -5,6 +6,8 @@ export * from './CardLarge';
 export * from './Checkbox';
 export * from './ChipGroup';
 export * from './CodeBlock';
+export * from './DateGroup';
+export * from './EmptyState';
 export * from './FeatureBlock';
 export * from './Dropdown';
 export * from './List';
@@ -14,3 +17,4 @@ export * from './PasswordField';
 export * from './Sheet';
 export * from './Slider';
 export * from './TextField';
+export * from './TransactionListItem';

package/dist/index.d.ts

@@ -639,6 +639,14 @@ export declare const tokens: {
                 success: string;
                 warning: string;
             };
+            financial: {
+                credit: string;
+                "credit-hover": string;
+                debit: string;
+                "debit-hover": string;
+                pending: string;
+                neutral: string;
+            };
         };
         typography: {
             display: string;