@common-origin/design-system 1.13.0 → 1.15.1

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

@@ -0,0 +1,54 @@
+import React from 'react';
+export interface AlertProps {
+    /**
+     * Visual style variant affecting background, border, and icon colors
+     * - error: Critical issues, validation errors (crossCircle icon)
+     * - warning: Cautions, potential issues (bell icon)
+     * - info: Tips, helper text, neutral information (info icon)
+     * - success: Confirmations, successful operations (checkRing icon)
+     * @default 'info'
+     */
+    variant?: 'error' | 'warning' | 'info' | 'success';
+    /**
+     * Alert message content
+     */
+    children: React.ReactNode;
+    /**
+     * Optional title/heading for the alert
+     */
+    title?: string;
+    /**
+     * Show close/dismiss button
+     * @default false
+     */
+    dismissible?: boolean;
+    /**
+     * Callback function when alert is dismissed
+     */
+    onDismiss?: () => void;
+    /**
+     * Optional action button or component
+     */
+    action?: React.ReactNode;
+    /**
+     * Compact inline variant with reduced padding
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * ARIA live region behavior
+     * - polite: Non-urgent announcements
+     * - assertive: Important, time-sensitive information
+     * - off: Not announced
+     * @default 'polite'
+     */
+    ariaLive?: 'polite' | 'assertive' | 'off';
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+}
+export declare const Alert: {
+    ({ variant, children, title, dismissible, onDismiss, action, inline, ariaLive, "data-testid": dataTestId, ...props }: AlertProps): React.JSX.Element | null;
+    displayName: string;
+};

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

@@ -0,0 +1 @@
+export * from './Alert';

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

@@ -0,0 +1,29 @@
+import React from 'react';
+export interface ListProps {
+    /**
+     * ListItem components
+     */
+    children: React.ReactNode;
+    /**
+     * Show dividers between items
+     * @default true
+     */
+    dividers?: boolean;
+    /**
+     * Vertical spacing between items
+     * @default 'comfortable'
+     */
+    spacing?: 'compact' | 'comfortable';
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+}
+export declare const List: {
+    ({ children, dividers, spacing, className, "data-testid": dataTestId, ...props }: ListProps): React.JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,73 @@
+import React from 'react';
+export interface ListItemProps {
+    /**
+     * Main text/content
+     */
+    primary: React.ReactNode;
+    /**
+     * Secondary text (smaller, subdued color)
+     */
+    secondary?: React.ReactNode;
+    /**
+     * Badge/chip component on the right
+     */
+    badge?: React.ReactNode;
+    /**
+     * Left icon or avatar component
+     */
+    icon?: React.ReactNode;
+    /**
+     * Can be expanded to show children content
+     * @default false
+     */
+    expandable?: boolean;
+    /**
+     * Expansion state (controlled)
+     * @default false
+     */
+    expanded?: boolean;
+    /**
+     * Called when expansion is toggled
+     */
+    onToggle?: () => void;
+    /**
+     * Enable hover/click interactive states
+     * @default false
+     */
+    interactive?: boolean;
+    /**
+     * Click handler for interactive items
+     */
+    onClick?: () => void;
+    /**
+     * Disabled state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Selected/active state
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Spacing variant from parent List
+     * @default 'comfortable'
+     */
+    spacing?: 'compact' | 'comfortable';
+    /**
+     * Expanded content (shown when expanded=true)
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+}
+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;
+    displayName: string;
+};

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

@@ -0,0 +1,4 @@
+export { List } from './List';
+export type { ListProps } from './List';
+export { ListItem } from './ListItem';
+export type { ListItemProps } from './ListItem';

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

@@ -0,0 +1,96 @@
+import { ReactNode } from 'react';
+/**
+ * Props for the Sheet component
+ */
+export interface SheetProps {
+    /**
+     * Whether the sheet is open
+     */
+    isOpen: boolean;
+    /**
+     * Callback fired when the sheet should close
+     */
+    onClose: () => void;
+    /**
+     * Position of the sheet
+     * @default 'right'
+     */
+    position?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Variant of the sheet
+     * - 'sheet': Full height/width edge-to-edge
+     * - 'drawer': Floating with rounded corners and margin
+     * @default 'sheet'
+     */
+    variant?: 'sheet' | 'drawer';
+    /**
+     * Width of the sheet (for left/right positions)
+     * @default '400px'
+     */
+    width?: string;
+    /**
+     * Height of the sheet (for top/bottom positions)
+     * @default '400px'
+     */
+    height?: string;
+    /**
+     * Content to display in the sheet
+     */
+    children?: ReactNode;
+    /**
+     * Whether clicking the overlay should close the sheet
+     * @default true
+     */
+    closeOnOverlayClick?: boolean;
+    /**
+     * Whether pressing Escape should close the sheet
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Optional title for the sheet (improves accessibility)
+     */
+    title?: string;
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+    /**
+     * Accessible label for the sheet
+     */
+    'aria-label'?: string;
+    /**
+     * ID of element describing the sheet
+     */
+    'aria-describedby'?: string;
+}
+/**
+ * Sheet component for side panels and drawers
+ *
+ * Provides a sliding panel that appears from any edge of the screen.
+ * Can be used for navigation menus, filters, forms, or additional content.
+ *
+ * @example
+ * ```tsx
+ * // Right-positioned sheet (default)
+ * <Sheet isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <h2>Sheet Content</h2>
+ *   <p>Your content here</p>
+ * </Sheet>
+ *
+ * // Drawer variant from bottom
+ * <Sheet
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   position="bottom"
+ *   variant="drawer"
+ *   height="60vh"
+ * >
+ *   <h2>Mobile Menu</h2>
+ * </Sheet>
+ * ```
+ */
+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;
+    displayName: string;
+};

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

@@ -0,0 +1,2 @@
+export { Sheet } from './Sheet';
+export type { SheetProps } from './Sheet';

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

@@ -1,3 +1,4 @@
+export * from './Alert';
 export * from './Breadcrumbs';
 export * from './CardSmall';
 export * from './CardLarge';
@@ -6,8 +7,10 @@ export * from './ChipGroup';
 export * from './CodeBlock';
 export * from './FeatureBlock';
 export * from './Dropdown';
+export * from './List';
 export * from './NumberInput';
 export * from './PageTitle';
 export * from './PasswordField';
+export * from './Sheet';
 export * from './Slider';
 export * from './TextField';