@common-origin/design-system 2.2.5 → 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/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/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/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';

package/dist/index.d.ts

@@ -169,6 +169,51 @@ export declare const tokens: {
                 "1200": string;
                 "1300": string;
             };
+            purple: {
+                "100": string;
+                "200": string;
+                "300": string;
+                "400": string;
+                "500": string;
+                "600": string;
+                "700": string;
+                "800": string;
+                "900": string;
+                "1000": string;
+                "1100": string;
+                "1200": string;
+                "1300": string;
+            };
+            pink: {
+                "100": string;
+                "200": string;
+                "300": string;
+                "400": string;
+                "500": string;
+                "600": string;
+                "700": string;
+                "800": string;
+                "900": string;
+                "1000": string;
+                "1100": string;
+                "1200": string;
+                "1300": string;
+            };
+            yellow: {
+                "100": string;
+                "200": string;
+                "300": string;
+                "400": string;
+                "500": string;
+                "600": string;
+                "700": string;
+                "800": string;
+                "900": string;
+                "1000": string;
+                "1100": string;
+                "1200": string;
+                "1300": string;
+            };
         };
         spacing: {
             "0": string;
@@ -647,6 +692,46 @@ export declare const tokens: {
                 pending: string;
                 neutral: string;
             };
+            category: {
+                blue: string;
+                "blue-emphasis": string;
+                "blue-subtle": string;
+                purple: string;
+                "purple-emphasis": string;
+                "purple-subtle": string;
+                pink: string;
+                "pink-emphasis": string;
+                "pink-subtle": string;
+                yellow: string;
+                "yellow-emphasis": string;
+                "yellow-subtle": string;
+                green: string;
+                "green-emphasis": string;
+                "green-subtle": string;
+                red: string;
+                "red-emphasis": string;
+                "red-subtle": string;
+                orange: string;
+                "orange-emphasis": string;
+                "orange-subtle": string;
+                gray: string;
+                "gray-emphasis": string;
+                "gray-subtle": string;
+            };
+            status: {
+                pending: string;
+                "pending-bg": string;
+                completed: string;
+                "completed-bg": string;
+                failed: string;
+                "failed-bg": string;
+                cancelled: string;
+                "cancelled-bg": string;
+                processing: string;
+                "processing-bg": string;
+                scheduled: string;
+                "scheduled-bg": string;
+            };
         };
         typography: {
             display: string;