@fabio.caffarello/react-design-system 1.8.0 → 1.9.0

package/README.md

@@ -34,12 +34,23 @@ This repository is a modern, scalable, and flexible Design System built with Rea
 src/
   ui/
     atoms/        # Basic components (Button, Input, Text, etc.)
-    molecules/    # Combinations of atoms (InputWithLabel, etc.)
-    organisms/    # Complex blocks (LoginBox, etc.)
-  assets/         # Images, icons, etc.
+    molecules/    # Combinations of atoms (Card, SearchInput, Form, etc.)
+    organisms/    # Complex blocks (Table, SideNavbar, Modal, etc.)
+    templates/    # Complete page layouts (DashboardLayout, etc.)
+    patterns/     # Design patterns (FormWizardPattern, DataTablePattern, etc.)
+    layouts/      # Structure components (Container, Stack, etc.)
+    utilities/    # Utility components (Portal, etc.)
+    providers/    # Context providers (AppProvider, ThemeProvider, etc.)
+    extensions/   # Specialized extensions (flow/, etc.)
+    tokens/       # Design tokens (colors, spacing, typography, etc.)
+    hooks/        # Custom hooks (useContextSelector, etc.)
+    playgrounds/  # Interactive playgrounds (Theme, Typography, Spacing, Colors)
+    tools/        # Development tools (ThemeBuilder, etc.)
+    a11y/         # Accessibility examples and stories
   style.css       # TailwindCSS and custom theme variables
-public/           # Static files
 .storybook/       # Storybook configuration
+scripts/          # Validation and generation scripts
+docs/             # Documentation (ARCHITECTURE.md, ACCESSIBILITY.md, etc.)
 plop-templates/   # Component and story templates
 ```
 
@@ -111,41 +122,98 @@ Explore the live documentation and interactive components:
 
 [Storybook on GitHub Pages](https://fabiocaffarello.github.io/react-design-system)
 
+### Flow Playground
+
+The Storybook includes an interactive **Flow Playground** for creating and testing flow diagrams:
+
+- **Interactive Editor**: Add, edit, and remove nodes and edges in real-time
+- **Customization**: Modify node properties (labels, variants, etc.)
+- **Validation**: Validate flow structure and connection rules
+- **Export/Import**: Save and load flows as JSON
+- **Themes**: Switch between light and dark themes
+- **Statistics**: View real-time flow statistics
+
+Access it in Storybook: `Extensions/Flow/FlowPlayground`
+
+See the [Flow Playground Guide](./src/ui/extensions/flow/PLAYGROUND_GUIDE.md) for detailed usage instructions.
+
 ## Features
 
+### Interactive Playgrounds
+
+The Storybook includes interactive playgrounds for experimenting with design tokens:
+
+- **Theme Playground**: Adjust colors, spacing, and typography in real-time
+- **Typography Playground**: Preview all font sizes, weights, and line heights
+- **Spacing Playground**: Visualize and test spacing scale
+- **Colors Playground**: Explore color palettes and test contrast ratios
+
+Access them in Storybook: `Playgrounds/`
+
+### Theme Builder
+
+Interactive tool for building custom themes:
+
+- **Real-time Preview**: See changes instantly in component preview
+- **Export Options**: Export themes as JSON, CSS variables, or TypeScript
+- **Accessibility Validation**: Check WCAG contrast ratios
+
+Access it in Storybook: `Tools/Theme Builder`
+
 ### Accessibility
 
-- **WCAG 2.1 AA Compliance**: All components meet accessibility standards
+- **WCAG 2.1 AA Compliance**: All components meet accessibility standards (60+ rules configured)
 - **Keyboard Navigation**: Full keyboard support for all interactive components
 - **ARIA Attributes**: Proper ARIA labels, roles, and states
 - **Screen Reader Support**: Optimized for assistive technologies
 - **Focus Management**: Proper focus trapping and restoration
+- **Accessibility Stories**: Dedicated stories for testing a11y patterns
+
+See [Accessibility Guide](./docs/ACCESSIBILITY.md) for complete documentation.
 
 ### Testing
 
 - **High Test Coverage**: > 80% coverage for all components
-- **Accessibility Tests**: Automated a11y testing with @testing-library/jest-dom
-- **Storybook Tests**: Visual regression and interaction testing
+- **Accessibility Tests**: Automated a11y testing with @storybook/addon-a11y
+- **Storybook Tests**: Visual regression and interaction testing with play functions
 - **Edge Cases**: Comprehensive test coverage including error states
+- **Visual Regression**: Chromatic integration for visual testing
 
 ### Documentation
 
 - **Storybook**: Interactive documentation with live examples
 - **MDX Docs**: Detailed documentation for complex components
+- **Mermaid Diagrams**: Visual documentation of state machines, composition, and data flow
 - **JSDoc**: Complete inline documentation
 - **Type Safety**: Full TypeScript support with strict types
 
+See [Architecture Documentation](./docs/ARCHITECTURE.md) for system architecture details.
+
 ## Scripts
 
+### Development
 - `npm run dev` - Start development server
-- `npm run build` - Build for production
 - `npm run storybook` - Start Storybook
-- `npm run build-storybook` - Build static Storybook
-- `npm test` - Run tests
+- `npm run test` - Run tests
 - `npm run test:coverage` - Run tests with coverage report
 - `npm run test:watch` - Run tests in watch mode
 - `npm run lint` - Lint code
+
+### Build
+- `npm run build` - Build for production
+- `npm run build-storybook` - Build static Storybook
+
+### Validation
+- `npm run validate:all` - Run all validation scripts
+- `npm run validate-stories` - Validate story structure
+- `npm run validate-architecture` - Validate component architecture
+- `npm run validate-a11y` - Validate accessibility patterns
+- `npm run validate-themes` - Validate theme tokens
+
+### Generation
 - `npm run plop` - Generate new components
+- `npm run generate-story-index` - Generate story index
+- `npm run generate-context-diagram` - Generate context hierarchy diagram
 
 ## Quality Standards
 
@@ -155,15 +223,103 @@ Explore the live documentation and interactive components:
 - **Code Quality**: ESLint + Prettier enforced
 - **Documentation**: All components documented in Storybook
 
+## Flow Components
+
+The design system includes a comprehensive Flow/Graph system built on React Flow:
+
+- **FlowCanvas**: Main canvas component with compound pattern
+- **FlowProvider**: Context provider with state management
+- **Custom Nodes & Edges**: Pre-built components with design system integration
+- **Layout Engines**: Support for Dagre, ELK, and Force-Directed layouts
+- **Validation**: Connection rules and flow validation
+- **Playground**: Interactive playground in Storybook
+
+### Quick Start with Flow
+
+```tsx
+import { FlowCanvas, FlowProvider } from '@fabio.caffarello/react-design-system';
+import { useNodesState, useEdgesState } from '@xyflow/react';
+
+function MyFlow() {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  
+  return (
+    <FlowProvider nodes={nodes} edges={edges}>
+      <FlowCanvas.Root>
+        <FlowCanvas.Background />
+        <FlowCanvas.Controls />
+        <FlowCanvas.MiniMap />
+      </FlowCanvas.Root>
+    </FlowProvider>
+  );
+}
+```
+
+See [Flow Documentation](./src/ui/organisms/Flow/Flow.mdx) for complete API reference.
+
+## Documentation
+
+### Quick Start
+- [**Documentation Index**](./docs/INDEX.md) - Índice completo de documentação
+- [**Quick Start MCP**](./docs/QUICK_START_MCP.md) - Comece a usar MCPs em 5 minutos
+
+### Core Documentation
+- [Architecture Guide](./docs/ARCHITECTURE.md) - System architecture and component organization
+- [Accessibility Guide](./docs/ACCESSIBILITY.md) - WCAG 2.1 AA compliance and patterns
+- [Storybook Guide](./docs/STORYBOOK_GUIDE.md) - Storybook usage and best practices
+- [Storybook Addons](./docs/STORYBOOK_ADDONS.md) - Complete guide to all addons
+- [Events & States Guide](./docs/EVENTS_STATES_GUIDE.md) - Component events and states documentation
+- [Categorization Guide](./docs/CATEGORIZATION_GUIDE.md) - Component categorization rules
+- [Advanced Composition](./docs/ADVANCED_COMPOSITION.md) - Advanced composition patterns
+
+### MCP & Automation
+- [MCP Strategy](./docs/MCP_STRATEGY.md) - Complete MCP strategy
+- [MCP Setup](./docs/MCP_SETUP.md) - MCP configuration guide
+- [MCP Automations](./docs/MCP_AUTOMATIONS.md) - Available automations
+- [Figma MCP Integration](./docs/FIGMA_MCP_INTEGRATION.md) - Figma MCP server
+- [Design Systems MCP](./docs/DESIGN_SYSTEMS_MCP.md) - Design Systems MCP
+
+### Testing & Quality
+- [Testing Strategy](./docs/TESTING_STRATEGY.md) - Complete testing strategy
+- [E2E Testing](./docs/E2E_TESTING.md) - End-to-end testing with Playwright
+- [Performance Guide](./docs/PERFORMANCE_GUIDE.md) - Performance optimization
+- [Visual Regression Testing](./docs/VISUAL_REGRESSION_TESTING.md) - Chromatic setup
+
+### Integration & Migration
+- [Figma Integration](./docs/FIGMA_INTEGRATION.md) - Figma integration guide
+- [Migration Guides](./docs/MIGRATION_GUIDES.md) - Version migration guides
+- [Token Versioning](./docs/TOKENS_VERSIONING.md) - Design token versioning
+
+### Processes
+- [Release Process](./docs/RELEASE_PROCESS.md) - Release and versioning process
+- [CI/CD Pipeline](./docs/CI_CD_PIPELINE.md) - Continuous integration and deployment
+- [Roadmap](./docs/ROADMAP.md) - Public roadmap
+
 ## Roadmap
 
 - [x] Atomic Design structure
-- [x] Storybook integration
+- [x] Storybook integration with advanced addons
 - [x] Automated unit and story testing
 - [x] TailwindCSS theming
 - [x] Accessibility improvements (WCAG 2.1 AA)
 - [x] Comprehensive test coverage
 - [x] MDX documentation for complex components
-- [ ] Create Publish npm package cd step
-- [ ] Customizable themes and dark mode
-- [ ] Performance optimizations (code splitting)
+- [x] Flow/Graph components with playground
+- [x] Interactive playgrounds (Theme, Typography, Spacing, Colors)
+- [x] Theme Builder tool
+- [x] Mermaid diagrams for documentation
+- [x] CI/CD pipeline with automated validations
+- [x] Performance optimizations (code splitting)
+- [x] E2E testing framework (Playwright)
+- [x] MCP (Model Context Protocol) integration
+- [x] Component Registry System
+- [x] Design Tokens Versioning
+- [x] Figma Integration
+- [x] Advanced documentation (Composition, Migration Guides)
+- [ ] Additional playgrounds and tools
+- [ ] Storybook Composition
+- [ ] Custom addons development
+- [ ] Advanced performance monitoring
+
+See [ROADMAP.md](./docs/ROADMAP.md) for detailed roadmap.

package/dist/App.d.ts

@@ -1,3 +1,14 @@
-import "./App.css";
-declare function App(): import("react/jsx-runtime").JSX.Element;
-export default App;
+/**
+ * Flow Playground Application
+ *
+ * Standalone Vite application for developing and testing flow components.
+ * This app provides a dedicated environment for building and improving the graph layer.
+ */
+/**
+ * Main Application Component
+ *
+ * This is the entry point for the Flow Playground standalone application.
+ * It provides a full-screen playground environment for developing and testing
+ * flow components, which helps improve both the components themselves and the Storybook.
+ */
+export declare function App(): import("react/jsx-runtime").JSX.Element;

package/dist/docs/components/ComponentStatusTable.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 interface ComponentStatusTableProps {
     components: Array<{
         name: string;
@@ -7,5 +8,5 @@ interface ComponentStatusTableProps {
         docs: boolean;
     }>;
 }
-export declare function ComponentStatusTable({ components }: ComponentStatusTableProps): import("react/jsx-runtime").JSX.Element;
+export declare function ComponentStatusTable({ components }: ComponentStatusTableProps): React.JSX.Element;
 export {};

package/dist/main.d.ts

@@ -1 +1,7 @@
-import "./style.css";
+/**
+ * Main Entry Point for Flow Playground Application
+ *
+ * This file is the entry point for the standalone Vite application.
+ * It renders the Flow Playground app for development and testing.
+ */
+import './style.css';

package/dist/ui/a11y/AccessibilityStories.d.ts

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+/**
+ * Keyboard Navigation Example
+ *
+ * Demonstrates proper keyboard navigation patterns.
+ * Test with Tab, Shift+Tab, Enter, and Space keys.
+ */
+export declare const KeyboardNavigation: Story;
+/**
+ * Focus Management Example
+ *
+ * Demonstrates proper focus trapping in modals.
+ */
+export declare const FocusManagement: Story;
+/**
+ * ARIA Labels Example
+ *
+ * Demonstrates proper use of ARIA attributes.
+ */
+export declare const AriaLabels: Story;
+/**
+ * Color Contrast Example
+ *
+ * Demonstrates proper color contrast ratios.
+ */
+export declare const ColorContrast: Story;
+/**
+ * Screen Reader Example
+ *
+ * Demonstrates semantic HTML and screen reader announcements.
+ */
+export declare const ScreenReaderSupport: Story;

package/dist/ui/atoms/Avatar/Avatar.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, ReactNode } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface AvatarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     src?: string;
@@ -27,4 +27,5 @@ export interface AvatarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
  * <Avatar src="/user.jpg" size="lg" />
  * ```
  */
-export default function Avatar({ src, alt, fallback, size, variant, 'aria-label': ariaLabel, className, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Avatar;

package/dist/ui/atoms/Avatar/Avatar.stories.d.ts

@@ -11,3 +11,9 @@ export declare const WithFallback: Story;
 export declare const ImageError: Story;
 export declare const Group: Story;
 export declare const GroupSpacing: Story;
+export declare const WithEvents: Story;
+export declare const WithImageState: Story;
+export declare const WithFallbackState: Story;
+export declare const CircleState: Story;
+export declare const RoundedState: Story;
+export declare const SquareState: Story;

package/dist/ui/atoms/Avatar/AvatarGroup.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, ReactNode } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
 import { type AvatarProps } from './Avatar';
 export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;

package/dist/ui/atoms/Avatar/AvatarGroup.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AvatarGroup } from "./AvatarGroup";
+declare const meta: Meta<typeof AvatarGroup>;
+export default meta;
+type Story = StoryObj<typeof AvatarGroup>;
+export declare const Default: Story;
+export declare const WithMax: Story;
+export declare const DifferentSizes: Story;
+export declare const DifferentSpacing: Story;
+export declare const WithImages: Story;
+export declare const MixedImagesAndFallbacks: Story;
+export declare const WithOverflow: Story;
+export declare const DifferentVariants: Story;
+export declare const DefaultState: Story;
+export declare const WithOverflowState: Story;
+export declare const NoSpacingState: Story;
+export declare const MediumSpacingState: Story;

package/dist/ui/atoms/Badge/Badge.d.ts

@@ -7,20 +7,7 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     size?: BadgeSize;
     style?: BadgeStyle;
     children: ReactNode;
+    'aria-label'?: string;
 }
-/**
- * Badge Component
- *
- * A versatile badge component for displaying status, priority, and other labels.
- * Follows Atomic Design principles as an Atom component.
- * Uses tokens for consistent theming.
- *
- * @example
- * ```tsx
- * <Badge variant="success">Active</Badge>
- * <Badge variant="error" size="lg">Critical</Badge>
- * <Badge variant="info" style="outline">New</Badge>
- * ```
- */
-declare const Badge: import("react").NamedExoticComponent<BadgeProps>;
+declare const Badge: import("react").NamedExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default Badge;

package/dist/ui/atoms/Badge/Badge.stories.d.ts

@@ -8,3 +8,10 @@ export declare const Variants: Story;
 export declare const Sizes: Story;
 export declare const Styles: Story;
 export declare const AllCombinations: Story;
+export declare const Accessibility: Story;
+export declare const WithNonStringChildren: Story;
+export declare const SolidState: Story;
+export declare const OutlineState: Story;
+export declare const SmallState: Story;
+export declare const MediumState: Story;
+export declare const LargeState: Story;

package/dist/ui/atoms/BoxWrapper/BoxWrapper.d.ts

@@ -1,4 +1,6 @@
+import React from "react";
 import type { HTMLAttributes } from "react";
 export interface BoxWrapperProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
 }
-export default function BoxWrapper({ className, ...props }: BoxWrapperProps): import("react/jsx-runtime").JSX.Element;
+export default function BoxWrapper({ className, ...props }: BoxWrapperProps): React.JSX.Element;

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

@@ -1,5 +1,5 @@
 import type { ButtonHTMLAttributes, ReactNode, ElementType } from 'react';
-export type ButtonVariant = 'primary' | 'regular' | 'secondary' | 'error' | 'outline' | 'ghost' | 'iconOnly';
+export type ButtonVariant = 'primary' | 'secondary' | 'error' | 'outline' | 'ghost' | 'iconOnly';
 export type ButtonSize = 'sm' | 'md' | 'lg';
 export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'as'> {
     variant?: ButtonVariant;
@@ -47,5 +47,5 @@ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
  * <Button variant="iconOnly" leftIcon={<Icon />} aria-label="Close" />
  * ```
  */
-declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const Button: import("react").NamedExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/ui/atoms/Button/Button.stories.d.ts

@@ -18,3 +18,12 @@ export declare const FullWidth: Story;
 export declare const AllVariants: Story;
 export declare const Accessibility: Story;
 export declare const KeyboardNavigation: Story;
+export declare const LoadingStates: Story;
+export declare const Polymorphic: Story;
+export declare const WithEvents: Story;
+export declare const DefaultState: Story;
+export declare const HoverState: Story;
+export declare const ActiveState: Story;
+export declare const FocusState: Story;
+export declare const DisabledState: Story;
+export declare const LoadingState: Story;

package/dist/ui/atoms/Checkbox/Checkbox.d.ts

@@ -22,4 +22,5 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
  * />
  * ```
  */
-export default function Checkbox({ id, label, error, helperText, className, disabled, indeterminate, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+declare const Checkbox: import("react").NamedExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+export default Checkbox;

package/dist/ui/atoms/Checkbox/Checkbox.stories.d.ts

@@ -8,3 +8,15 @@ export declare const Checked: Story;
 export declare const WithError: Story;
 export declare const Disabled: Story;
 export declare const WithoutLabel: Story;
+export declare const Indeterminate: Story;
+export declare const Controlled: Story;
+export declare const AllStates: Story;
+export declare const Uncontrolled: Story;
+export declare const KeyboardNavigation: Story;
+export declare const IndeterminateState: Story;
+export declare const WithEvents: Story;
+export declare const UncheckedState: Story;
+export declare const CheckedState: Story;
+export declare const IndeterminateStateStory: Story;
+export declare const DisabledState: Story;
+export declare const FocusState: Story;

package/dist/ui/atoms/Chip/Chip.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+export type ChipVariant = 'default' | 'outlined' | 'filled';
+export type ChipSize = 'sm' | 'md' | 'lg';
+export interface ChipProps {
+    children: ReactNode;
+    variant?: ChipVariant;
+    size?: ChipSize;
+    onRemove?: () => void;
+    selected?: boolean;
+    disabled?: boolean;
+    className?: string;
+    'aria-label'?: string;
+    onClick?: () => void;
+    tabIndex?: number;
+}
+declare const Chip: import("react").ForwardRefExoticComponent<ChipProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Chip;

package/dist/ui/atoms/Chip/Chip.stories.d.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Chip from './Chip';
+declare const meta: Meta<typeof Chip>;
+export default meta;
+type Story = StoryObj<typeof Chip>;
+export declare const Default: Story;
+export declare const Removable: Story;
+export declare const Variants: Story;
+export declare const Sizes: Story;
+export declare const Selected: Story;
+export declare const Disabled: Story;
+export declare const Clickable: Story;
+export declare const ClickableAndRemovable: Story;
+export declare const Accessibility: Story;
+export declare const KeyboardNavigation: Story;
+export declare const WithEvents: Story;
+export declare const DefaultState: Story;
+export declare const SelectedState: Story;
+export declare const DisabledState: Story;
+export declare const RemovableState: Story;

package/dist/ui/atoms/Chip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Chip } from './Chip';
+export type { ChipProps, ChipVariant, ChipSize } from './Chip';

package/dist/ui/atoms/Collapsible/Collapsible.stories.d.ts

@@ -8,4 +8,9 @@ export declare const WithStorage: StoryObj<typeof Collapsible>;
 export declare const Disabled: StoryObj<typeof Collapsible>;
 export declare const Accessibility: StoryObj<typeof Collapsible>;
 export declare const KeyboardNavigation: StoryObj<typeof Collapsible>;
+export declare const Uncontrolled: StoryObj<typeof Collapsible>;
+export declare const WithEvents: StoryObj<typeof Collapsible>;
+export declare const ClosedState: StoryObj<typeof Collapsible>;
+export declare const OpenState: StoryObj<typeof Collapsible>;
+export declare const DisabledState: StoryObj<typeof Collapsible>;
 export default meta;

package/dist/ui/atoms/Drawer/Drawer.d.ts

@@ -0,0 +1,44 @@
+import { type ReactNode } from 'react';
+import DrawerContent from './DrawerContent';
+import DrawerHeader from './DrawerHeader';
+import DrawerFooter from './DrawerFooter';
+export type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';
+export interface DrawerProps {
+    children: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    position?: DrawerPosition;
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    closeOnOverlayClick?: boolean;
+    closeOnEscape?: boolean;
+}
+/**
+ * Drawer Component
+ *
+ * A side drawer component that slides in from different positions.
+ * Follows Atomic Design principles as an Atom component.
+ * Uses Compound Component pattern.
+ *
+ * @example
+ * ```tsx
+ * <Drawer>
+ *   <DrawerContent>
+ *     <DrawerHeader>
+ *       <h2>Title</h2>
+ *     </DrawerHeader>
+ *     <p>Content goes here</p>
+ *     <DrawerFooter>
+ *       <Button>Close</Button>
+ *     </DrawerFooter>
+ *   </DrawerContent>
+ * </Drawer>
+ * ```
+ */
+declare function Drawer({ children, open: controlledOpen, defaultOpen, onOpenChange, position, size, closeOnOverlayClick, closeOnEscape, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Drawer {
+    var Content: typeof DrawerContent;
+    var Header: typeof DrawerHeader;
+    var Footer: typeof DrawerFooter;
+}
+export default Drawer;

package/dist/ui/atoms/Drawer/Drawer.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Drawer from './Drawer';
+declare const meta: Meta<typeof Drawer>;
+export default meta;
+type Story = StoryObj<typeof Drawer>;
+export declare const Default: Story;
+export declare const WithCloseButton: Story;
+export declare const Positions: Story;
+export declare const Sizes: Story;
+export declare const WithoutOverlayClose: Story;
+export declare const ComplexContent: Story;

package/dist/ui/atoms/Drawer/DrawerContent.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+export interface DrawerContentProps {
+    children: ReactNode;
+    className?: string;
+    showCloseButton?: boolean;
+}
+/**
+ * DrawerContent Component
+ *
+ * The main content container for the drawer.
+ * Renders in a portal with overlay.
+ */
+export default function DrawerContent({ children, className, showCloseButton, }: DrawerContentProps): import("react").ReactPortal | null;

package/dist/ui/atoms/Drawer/DrawerContext.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+import type { DrawerPosition } from './Drawer';
+export interface DrawerContextValue {
+    isOpen: boolean;
+    closeDrawer: () => void;
+    position: DrawerPosition;
+    size: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    closeOnOverlayClick: boolean;
+    closeOnEscape: boolean;
+}
+export declare function DrawerProvider({ children, value, }: {
+    children: ReactNode;
+    value: DrawerContextValue;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useDrawerContext(): DrawerContextValue;

package/dist/ui/atoms/Drawer/DrawerFooter.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode, type HTMLAttributes } from 'react';
+export interface DrawerFooterProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/**
+ * DrawerFooter Component
+ *
+ * Footer section for drawer content, typically contains action buttons.
+ *
+ * @example
+ * ```tsx
+ * <DrawerFooter>
+ *   <Button>Save</Button>
+ *   <Button variant="outline">Cancel</Button>
+ * </DrawerFooter>
+ * ```
+ */
+export default function DrawerFooter({ children, className, ...props }: DrawerFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/atoms/Drawer/DrawerHeader.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode, type HTMLAttributes } from 'react';
+export interface DrawerHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/**
+ * DrawerHeader Component
+ *
+ * Header section for drawer content.
+ *
+ * @example
+ * ```tsx
+ * <DrawerHeader>
+ *   <h2>Drawer Title</h2>
+ * </DrawerHeader>
+ * ```
+ */
+export default function DrawerHeader({ children, className, ...props }: DrawerHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/atoms/Drawer/index.d.ts

@@ -0,0 +1,8 @@
+export { default as Drawer } from './Drawer';
+export type { DrawerProps, DrawerPosition } from './Drawer';
+export { default as DrawerContent } from './DrawerContent';
+export type { DrawerContentProps } from './DrawerContent';
+export { default as DrawerHeader } from './DrawerHeader';
+export type { DrawerHeaderProps } from './DrawerHeader';
+export { default as DrawerFooter } from './DrawerFooter';
+export type { DrawerFooterProps } from './DrawerFooter';