@common-origin/design-system 1.13.0 → 1.14.0

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

@@ -9,5 +9,6 @@ export * from './Dropdown';
 export * from './NumberInput';
 export * from './PageTitle';
 export * from './PasswordField';
+export * from './Sheet';
 export * from './Slider';
 export * from './TextField';