@common-origin/design-system 2.4.2 → 2.6.1

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

@@ -32,7 +32,7 @@ export interface BoxProps {
     right?: string;
     bottom?: string;
     left?: string;
-    borderRadius?: keyof typeof tokens.base.border.radius;
+    borderRadius?: keyof typeof tokens.semantic.border.radius;
     border?: keyof typeof tokens.semantic.color.border;
     borderTop?: keyof typeof tokens.semantic.color.border;
     borderRight?: keyof typeof tokens.semantic.color.border;
@@ -40,10 +40,10 @@ 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;
+    shadow?: keyof typeof tokens.semantic.elevation;
     cursor?: 'auto' | 'default' | 'pointer' | 'wait' | 'text' | 'move' | 'help' | 'not-allowed';
     transition?: string;
-    hoverShadow?: keyof typeof tokens.base.shadow;
+    hoverShadow?: keyof typeof tokens.semantic.elevation;
     hoverTransform?: string;
     overflow?: 'visible' | 'hidden' | 'scroll' | 'auto';
     overflowX?: 'visible' | 'hidden' | 'scroll' | 'auto';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type IconName } from '../Icon';
 export interface BaseButtonProps {
-    variant?: 'primary' | 'secondary' | 'naked';
+    variant?: 'primary' | 'secondary' | 'naked' | 'emphasis' | 'danger';
     size?: 'small' | 'medium' | 'large';
     url?: string;
     purpose?: 'button' | 'link';

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

@@ -39,15 +39,6 @@ export interface CategoryBadgeProps {
      * 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
      */
@@ -60,8 +51,9 @@ export interface CategoryBadgeProps {
 /**
  * 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.
+ * A static label for categorizing content with support for 8 color options,
+ * 3 visual variants, and optional icons. Perfect for categorizing
+ * financial transactions or content types.
  *
  * @example
  * ```tsx
@@ -69,12 +61,7 @@ export interface CategoryBadgeProps {
  *   Food & Dining
  * </CategoryBadge>
  *
- * <CategoryBadge
- *   color="blue"
- *   variant="outlined"
- *   size="small"
- *   onClick={() => filterByCategory('travel')}
- * >
+ * <CategoryBadge color="blue" variant="outlined" size="small">
  *   Travel
  * </CategoryBadge>
  * ```

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

@@ -7,18 +7,62 @@ declare const chip: {
         padding: string;
         font: string;
     };
+    hover: {
+        backgroundColor: string;
+    };
+    active: {
+        backgroundColor: string;
+    };
+    focus: {
+        outline: string;
+        outlineOffset: string;
+    };
+    disabled: {
+        backgroundColor: string;
+        textColor: string;
+    };
     variants: {
         emphasis: {
             backgroundColor: string;
             textColor: string;
+            hover: {
+                backgroundColor: string;
+            };
+            active: {
+                backgroundColor: string;
+            };
+            disabled: {
+                backgroundColor: string;
+                textColor: string;
+            };
         };
         subtle: {
             backgroundColor: string;
             textColor: string;
+            hover: {
+                backgroundColor: string;
+            };
+            active: {
+                backgroundColor: string;
+            };
+            disabled: {
+                backgroundColor: string;
+                textColor: string;
+            };
         };
         interactive: {
             backgroundColor: string;
             textColor: string;
+            hover: {
+                backgroundColor: string;
+            };
+            active: {
+                backgroundColor: string;
+            };
+            disabled: {
+                backgroundColor: string;
+                textColor: string;
+            };
         };
     };
     sizes: {
@@ -43,6 +87,6 @@ interface StyledChipProps {
     $clickable?: boolean;
     $selected?: boolean;
 }
-export declare const getVariantStyles: ({ $variant, $selected }: StyledChipProps) => string;
+export declare const getVariantStyles: ({ $variant, $selected, $clickable, $disabled }: StyledChipProps) => string;
 export declare const getSizeStyles: ({ $size }: StyledChipProps) => string;
 export { chip as chipTokens };

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

@@ -1,3 +1,4 @@
+import React from 'react';
 /**
  * Status type options for StatusBadge
  */

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { type IconName } from '../../../types/icons';
 /**
  * Action item for the action sheet
@@ -107,4 +108,4 @@ export interface ActionSheetProps {
  * />
  * ```
  */
-export declare const ActionSheet: ({ isOpen, onClose, title, description, actions, closeOnOverlayClick, closeOnEscape, showCloseButton, "data-testid": dataTestId }: ActionSheetProps) => import("react").ReactPortal | null;
+export declare const ActionSheet: ({ isOpen, onClose, title, description, actions, closeOnOverlayClick, closeOnEscape, showCloseButton, "data-testid": dataTestId }: ActionSheetProps) => React.ReactPortal | null;

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

@@ -3,15 +3,44 @@ export interface CodeBlockProps {
     children: string;
     showCopyButton?: boolean;
     onCopy?: () => void;
+    /**
+     * Maximum height in pixels before content is collapsed.
+     * When set, enables expand/collapse functionality.
+     */
+    maxHeight?: number;
+    /**
+     * Initial expanded state when maxHeight is set.
+     * @default false
+     */
+    defaultExpanded?: boolean;
     'data-testid'?: string;
 }
 /**
  * CodeBlock component for displaying formatted code with optional copy functionality
+ * and expandable content for long code blocks.
  *
  * @param children - The code content to display
  * @param showCopyButton - Whether to show the copy button (default: true)
  * @param onCopy - Optional callback when code is copied
+ * @param maxHeight - Maximum height in pixels before enabling expand/collapse
+ * @param defaultExpanded - Initial expanded state when maxHeight is set
  * @param data-testid - Test identifier for the code block
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <CodeBlock>const x = 1;</CodeBlock>
+ *
+ * // With max height and expand/collapse
+ * <CodeBlock maxHeight={200}>
+ *   {longCodeString}
+ * </CodeBlock>
+ *
+ * // Start expanded
+ * <CodeBlock maxHeight={200} defaultExpanded>
+ *   {longCodeString}
+ * </CodeBlock>
+ * ```
  */
 export declare const CodeBlock: React.FC<CodeBlockProps>;
 export default CodeBlock;

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

@@ -49,6 +49,12 @@ export interface ListItemProps {
      * @default false
      */
     selected?: boolean;
+    /**
+     * Destructive/danger state (e.g., delete actions)
+     * Displays text and icon in error color
+     * @default false
+     */
+    destructive?: boolean;
     /**
      * Spacing variant from parent List
      * @default 'comfortable'
@@ -89,6 +95,6 @@ export interface ListItemProps {
     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, role: customRole, "aria-selected": ariaSelected, id, tabIndex: customTabIndex, onKeyDown: customOnKeyDown, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+    ({ primary, secondary, badge, icon, expandable, expanded, onToggle, interactive, onClick, disabled, selected, destructive, 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/index.d.ts

@@ -368,6 +368,34 @@ export declare const tokens: {
                         textColor: string;
                     };
                 };
+                emphasis: {
+                    backgroundColor: string;
+                    textColor: string;
+                    hover: {
+                        backgroundColor: string;
+                    };
+                    active: {
+                        backgroundColor: string;
+                    };
+                    disabled: {
+                        backgroundColor: string;
+                        textColor: string;
+                    };
+                };
+                danger: {
+                    backgroundColor: string;
+                    textColor: string;
+                    hover: {
+                        backgroundColor: string;
+                    };
+                    active: {
+                        backgroundColor: string;
+                    };
+                    disabled: {
+                        backgroundColor: string;
+                        textColor: string;
+                    };
+                };
             };
             sizes: {
                 small: {
@@ -392,18 +420,62 @@ export declare const tokens: {
                 padding: string;
                 font: string;
             };
+            hover: {
+                backgroundColor: string;
+            };
+            active: {
+                backgroundColor: string;
+            };
+            focus: {
+                outline: string;
+                outlineOffset: string;
+            };
+            disabled: {
+                backgroundColor: string;
+                textColor: string;
+            };
             variants: {
                 emphasis: {
                     backgroundColor: string;
                     textColor: string;
+                    hover: {
+                        backgroundColor: string;
+                    };
+                    active: {
+                        backgroundColor: string;
+                    };
+                    disabled: {
+                        backgroundColor: string;
+                        textColor: string;
+                    };
                 };
                 subtle: {
                     backgroundColor: string;
                     textColor: string;
+                    hover: {
+                        backgroundColor: string;
+                    };
+                    active: {
+                        backgroundColor: string;
+                    };
+                    disabled: {
+                        backgroundColor: string;
+                        textColor: string;
+                    };
                 };
                 interactive: {
                     backgroundColor: string;
                     textColor: string;
+                    hover: {
+                        backgroundColor: string;
+                    };
+                    active: {
+                        backgroundColor: string;
+                    };
+                    disabled: {
+                        backgroundColor: string;
+                        textColor: string;
+                    };
                 };
             };
             sizes: {
@@ -581,12 +653,31 @@ export declare const tokens: {
         $ref: string;
     };
     semantic: {
+        elevation: {
+            none: string;
+            inset: string;
+            raised: string;
+            floating: string;
+            overlay: string;
+            sticky: string;
+        };
         border: {
             default: string;
             subtle: string;
             strong: string;
             focus: string;
             tooltip: string;
+            radius: {
+                none: string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+                "2xl": string;
+                "3xl": string;
+                circle: string;
+            };
         };
         size: {
             icon: {