@common-origin/design-system 2.2.5 → 2.4.0

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

@@ -40,6 +40,11 @@ export interface BoxProps {
     borderLeft?: keyof typeof tokens.semantic.color.border;
     bg?: keyof typeof tokens.semantic.color.background;
     color?: keyof typeof tokens.semantic.color.text;
+    shadow?: keyof typeof tokens.base.shadow;
+    cursor?: 'auto' | 'default' | 'pointer' | 'wait' | 'text' | 'move' | 'help' | 'not-allowed';
+    transition?: string;
+    hoverShadow?: keyof typeof tokens.base.shadow;
+    hoverTransform?: string;
     overflow?: 'visible' | 'hidden' | 'scroll' | 'auto';
     overflowX?: 'visible' | 'hidden' | 'scroll' | 'auto';
     overflowY?: 'visible' | 'hidden' | 'scroll' | 'auto';
@@ -47,6 +52,11 @@ export interface BoxProps {
     children?: React.ReactNode;
     id?: string;
     style?: React.CSSProperties;
+    onClick?: (event: React.MouseEvent) => void;
+    onKeyDown?: (event: React.KeyboardEvent) => void;
+    tabIndex?: number;
+    role?: string;
+    'aria-label'?: string;
     'data-testid'?: string;
 }
 export declare const Box: React.FC<BoxProps>;

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

@@ -3,4 +3,4 @@ export type ContainerProps = {
     children?: React.ReactNode;
     'data-testid'?: string;
 } & React.HTMLAttributes<HTMLDivElement>;
-export declare const Container: ({ children, ...props }: ContainerProps) => React.JSX.Element;
+export declare const Container: ({ children, ...props }: ContainerProps) => import("react/jsx-runtime").JSX.Element;

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,6 +2,7 @@ export * from './Avatar';
 export * from './Badge';
 export * from './Box';
 export * from './Button';
+export * from './CategoryBadge';
 export * from './Chip';
 export * from './Container';
 export * from './Picture';
@@ -12,5 +13,6 @@ 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/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/Alert/Alert.d.ts

@@ -49,6 +49,6 @@ export interface AlertProps {
     'data-testid'?: string;
 }
 export declare const Alert: {
-    ({ variant, children, title, dismissible, onDismiss, action, inline, ariaLive, "data-testid": dataTestId, ...props }: AlertProps): React.JSX.Element | null;
+    ({ variant, children, title, dismissible, onDismiss, action, inline, ariaLive, "data-testid": dataTestId, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

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

@@ -7,4 +7,4 @@ export type CardLargeProps = {
     onImageClick?: () => void;
     imageHref?: string;
 };
-export declare const CardLarge: ({ title, excerpt, subtitle, labels, picture, onImageClick, imageHref, }: CardLargeProps) => import("react").JSX.Element;
+export declare const CardLarge: ({ title, excerpt, subtitle, labels, picture, onImageClick, imageHref, }: CardLargeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -24,6 +24,6 @@ export interface ListProps {
     'data-testid'?: string;
 }
 export declare const List: {
-    ({ children, dividers, spacing, className, "data-testid": dataTestId, ...props }: ListProps): React.JSX.Element;
+    ({ children, dividers, spacing, className, "data-testid": dataTestId, ...props }: ListProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/molecules/List/ListItem.d.ts

@@ -66,8 +66,29 @@ export interface ListItemProps {
      * Test identifier for automated testing
      */
     'data-testid'?: string;
+    /**
+     * Custom ARIA role (e.g., 'option' for combobox)
+     * @default 'listitem'
+     */
+    role?: string;
+    /**
+     * ARIA selected state (for role="option")
+     */
+    'aria-selected'?: boolean;
+    /**
+     * Custom ID for ARIA references
+     */
+    id?: string;
+    /**
+     * Custom tabIndex for focus management
+     */
+    tabIndex?: number;
+    /**
+     * Keyboard event handler
+     */
+    onKeyDown?: (e: React.KeyboardEvent) => void;
 }
 export declare const ListItem: {
-    ({ primary, secondary, badge, icon, expandable, expanded, onToggle, interactive, onClick, disabled, selected, spacing, children, className, "data-testid": dataTestId, ...props }: ListItemProps): React.JSX.Element;
+    ({ primary, secondary, badge, icon, expandable, expanded, onToggle, interactive, onClick, disabled, selected, spacing, children, className, "data-testid": dataTestId, role: customRole, "aria-selected": ariaSelected, id, tabIndex: customTabIndex, onKeyDown: customOnKeyDown, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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';

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

@@ -91,6 +91,6 @@ export interface SheetProps {
  * ```
  */
 export declare const Sheet: {
-    ({ isOpen, onClose, position, variant, width, height, children, closeOnOverlayClick, closeOnEscape, title, "data-testid": dataTestId, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }: SheetProps): import("react").JSX.Element | null;
+    ({ isOpen, onClose, position, variant, width, height, children, closeOnOverlayClick, closeOnEscape, title, "data-testid": dataTestId, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }: SheetProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

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

@@ -97,6 +97,6 @@ export interface SliderProps {
  * ```
  */
 export declare const Slider: {
-    ({ min, max, step, value: controlledValue, defaultValue, rangeValue: controlledRangeValue, defaultRangeValue, onChange, onRangeChange, disabled, label, showValueLabel, formatValue, "data-testid": dataTestId, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }: SliderProps): import("react").JSX.Element;
+    ({ min, max, step, value: controlledValue, defaultValue, rangeValue: controlledRangeValue, defaultRangeValue, onChange, onRangeChange, disabled, label, showValueLabel, formatValue, "data-testid": dataTestId, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }: SliderProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -0,0 +1,79 @@
+/**
+ * Tab variant options for TabBar
+ */
+export type TabVariant = 'default' | 'pills' | 'underline';
+/**
+ * Individual tab configuration
+ */
+export interface Tab {
+    /**
+     * Unique identifier for the tab
+     */
+    id: string;
+    /**
+     * Tab label text
+     */
+    label: string;
+    /**
+     * Optional badge count to display
+     */
+    badge?: number;
+    /**
+     * Whether this tab is disabled
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * Props for the TabBar component
+ */
+export interface TabBarProps {
+    /**
+     * Array of tab configurations
+     */
+    tabs: Tab[];
+    /**
+     * Currently active tab ID
+     */
+    activeTab: string;
+    /**
+     * Callback when tab changes
+     */
+    onTabChange: (tabId: string) => void;
+    /**
+     * Visual variant of the tabs
+     * @default 'default'
+     */
+    variant?: TabVariant;
+    /**
+     * Accessible label for the tab list
+     */
+    'aria-label'?: string;
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+}
+/**
+ * TabBar component for tabbed navigation
+ *
+ * Provides accessible tab navigation with 3 visual variants, keyboard support,
+ * and optional badge counts. Follows ARIA tablist pattern.
+ *
+ * @example
+ * ```tsx
+ * const [activeTab, setActiveTab] = useState('all')
+ *
+ * <TabBar
+ *   tabs={[
+ *     { id: 'all', label: 'All', badge: 42 },
+ *     { id: 'pending', label: 'Pending', badge: 5 },
+ *     { id: 'completed', label: 'Completed' }
+ *   ]}
+ *   activeTab={activeTab}
+ *   onTabChange={setActiveTab}
+ *   variant="pills"
+ * />
+ * ```
+ */
+export declare const TabBar: React.FC<TabBarProps>;

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

@@ -0,0 +1,2 @@
+export { TabBar } from './TabBar';
+export type { TabBarProps, Tab, TabVariant } from './TabBar';

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

@@ -1,4 +1,5 @@
 export * from './AccountCard';
+export * from './ActionSheet';
 export * from './Alert';
 export * from './Breadcrumbs';
 export * from './CardSmall';
@@ -14,7 +15,9 @@ export * from './List';
 export * from './NumberInput';
 export * from './PageTitle';
 export * from './PasswordField';
+export * from './SearchField';
 export * from './Sheet';
 export * from './Slider';
+export * from './TabBar';
 export * from './TextField';
 export * from './TransactionListItem';