@common-origin/design-system 2.0.1 → 2.3.0

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/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,5 @@
+export * from './AccountCard';
+export * from './ActionSheet';
 export * from './Alert';
 export * from './Breadcrumbs';
 export * from './CardSmall';
@@ -5,12 +7,17 @@ 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';
 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;
@@ -639,6 +684,54 @@ export declare const tokens: {
                 success: string;
                 warning: string;
             };
+            financial: {
+                credit: string;
+                "credit-hover": string;
+                debit: string;
+                "debit-hover": string;
+                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;