@common-origin/design-system 2.0.1 → 2.3.0

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

@@ -0,0 +1,82 @@
+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';
+/**
+ * Size options for CategoryBadge
+ */
+export type CategorySize = 'small' | 'medium';
+/**
+ * Props for the CategoryBadge component
+ */
+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;
+    /**
+     * Size of the badge
+     * @default 'medium'
+     */
+    size?: CategorySize;
+    /**
+     * Optional icon name to display
+     */
+    icon?: IconName;
+    /**
+     * Optional click handler (makes badge interactive)
+     */
+    onClick?: () => void;
+    /**
+     * Whether the badge is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+    /**
+     * Accessible label for the badge
+     */
+    'aria-label'?: string;
+}
+/**
+ * CategoryBadge component for displaying transaction categories
+ *
+ * Supports 8 color options, 3 visual variants, optional icons, and interactive behavior.
+ * Perfect for categorizing financial transactions or content.
+ *
+ * @example
+ * ```tsx
+ * <CategoryBadge color="orange" icon="restaurant">
+ *   Food & Dining
+ * </CategoryBadge>
+ *
+ * <CategoryBadge
+ *   color="blue"
+ *   variant="outlined"
+ *   size="small"
+ *   onClick={() => filterByCategory('travel')}
+ * >
+ *   Travel
+ * </CategoryBadge>
+ * ```
+ */
+export declare const CategoryBadge: React.FC<CategoryBadgeProps>;

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

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

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/StatusBadge/StatusBadge.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Status type options for StatusBadge
+ */
+export type StatusType = 'pending' | 'completed' | 'failed' | 'cancelled' | 'processing' | 'scheduled';
+/**
+ * Size options for StatusBadge
+ */
+export type StatusSize = 'small' | 'medium';
+/**
+ * Props for the StatusBadge component
+ */
+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;
+    /**
+     * Whether to show the icon
+     * @default true
+     */
+    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
+ *   status="failed"
+ *   showIcon={false}
+ *   liveRegion={true}
+ * />
+ * ```
+ */
+export declare const StatusBadge: React.FC<StatusBadgeProps>;

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

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

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

@@ -2,14 +2,17 @@ export * from './Avatar';
 export * from './Badge';
 export * from './Box';
 export * from './Button';
+export * from './CategoryBadge';
 export * from './Chip';
 export * from './Container';
 export * from './Picture';
 export * from './DateFormatter';
 export * from './Icon';
 export * from './IconButton';
+export * from './MoneyDisplay';
 export * from './ProgressBar';
 export * from './Divider';
 export * from './Stack';
+export * from './StatusBadge';
 export * from './Tag';
 export * from './Typography';

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/ActionSheet/ActionSheet.d.ts

@@ -0,0 +1,110 @@
+import { type IconName } from '../../../types/icons';
+/**
+ * Action item for the action sheet
+ */
+export interface Action {
+    /**
+     * Unique identifier
+     */
+    id: string;
+    /**
+     * Display label
+     */
+    label: string;
+    /**
+     * Optional icon
+     */
+    icon?: IconName;
+    /**
+     * Whether this is a destructive action (shown in red)
+     * @default false
+     */
+    destructive?: boolean;
+    /**
+     * Whether this action is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback when action is selected
+     */
+    onSelect: () => void;
+}
+/**
+ * Props for the ActionSheet component
+ */
+export interface ActionSheetProps {
+    /**
+     * Whether the action sheet is open
+     */
+    isOpen: boolean;
+    /**
+     * Callback when the action sheet should close
+     */
+    onClose: () => void;
+    /**
+     * Title of the action sheet
+     */
+    title?: string;
+    /**
+     * Optional description
+     */
+    description?: string;
+    /**
+     * Array of actions
+     */
+    actions: Action[];
+    /**
+     * Whether to close on overlay click
+     * @default true
+     */
+    closeOnOverlayClick?: boolean;
+    /**
+     * Whether to close on Escape key
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Show close button in header
+     * @default true
+     */
+    showCloseButton?: boolean;
+    /**
+     * Test identifier
+     */
+    'data-testid'?: string;
+}
+/**
+ * ActionSheet component for bottom sheet modals
+ *
+ * Displays a modal action sheet that slides up from the bottom,
+ * providing a list of actions for the user to choose from.
+ * Includes focus trapping, keyboard navigation, and accessibility features.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false)
+ *
+ * <ActionSheet
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Choose an action"
+ *   actions={[
+ *     {
+ *       id: 'edit',
+ *       label: 'Edit',
+ *       icon: 'edit',
+ *       onSelect: () => console.log('Edit')
+ *     },
+ *     {
+ *       id: 'delete',
+ *       label: 'Delete',
+ *       icon: 'trash',
+ *       destructive: true,
+ *       onSelect: () => console.log('Delete')
+ *     }
+ *   ]}
+ * />
+ * ```
+ */
+export declare const ActionSheet: ({ isOpen, onClose, title, description, actions, closeOnOverlayClick, closeOnEscape, showCloseButton, "data-testid": dataTestId }: ActionSheetProps) => import("react").ReactPortal | null;

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

@@ -0,0 +1,2 @@
+export { ActionSheet } from './ActionSheet';
+export type { ActionSheetProps, Action } from './ActionSheet';

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/SearchField/SearchField.d.ts

@@ -0,0 +1,108 @@
+import { InputHTMLAttributes } from 'react';
+/**
+ * Suggestion item for autocomplete
+ */
+export interface Suggestion {
+    /**
+     * Unique identifier
+     */
+    id: string;
+    /**
+     * Display text
+     */
+    label: string;
+    /**
+     * Optional secondary text
+     */
+    description?: string;
+    /**
+     * Optional category for grouping
+     */
+    category?: string;
+}
+/**
+ * Props for the SearchField component
+ */
+export interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
+    /**
+     * Current search value
+     */
+    value: string;
+    /**
+     * Callback when value changes
+     */
+    onChange: (value: string) => void;
+    /**
+     * Suggestions to display
+     */
+    suggestions?: Suggestion[];
+    /**
+     * Whether to show recent searches
+     * @default true
+     */
+    showRecentSearches?: boolean;
+    /**
+     * Array of recent search terms
+     */
+    recentSearches?: string[];
+    /**
+     * Callback when a suggestion is selected
+     */
+    onSuggestionSelect?: (suggestion: Suggestion | string) => void;
+    /**
+     * Callback to clear recent searches
+     */
+    onClearRecentSearches?: () => void;
+    /**
+     * Debounce delay in milliseconds
+     * @default 300
+     */
+    debounceMs?: number;
+    /**
+     * Placeholder text
+     * @default 'Search...'
+     */
+    placeholder?: string;
+    /**
+     * Whether the field is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to show loading state
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Accessible label
+     */
+    'aria-label'?: string;
+    /**
+     * Test identifier
+     */
+    'data-testid'?: string;
+}
+/**
+ * SearchField component with autocomplete and recent searches
+ *
+ * Provides intelligent search with debouncing, keyboard navigation,
+ * suggestions, and recent search history. Fully accessible with ARIA.
+ *
+ * @example
+ * ```tsx
+ * const [search, setSearch] = useState('')
+ * const [suggestions] = useState([
+ *   { id: '1', label: 'Apple', category: 'Fruit' },
+ *   { id: '2', label: 'Banana', category: 'Fruit' }
+ * ])
+ *
+ * <SearchField
+ *   value={search}
+ *   onChange={setSearch}
+ *   suggestions={suggestions}
+ *   recentSearches={['coffee', 'tea']}
+ *   onSuggestionSelect={(item) => console.log('Selected:', item)}
+ * />
+ * ```
+ */
+export declare const SearchField: import("react").ForwardRefExoticComponent<SearchFieldProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,2 @@
+export { SearchField } from './SearchField';
+export type { SearchFieldProps, Suggestion } from './SearchField';