@fabio.caffarello/react-design-system 1.7.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,14 +122,204 @@ 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 (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 @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 storybook` - Start Storybook
+- `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
+
+- **Type Safety**: Zero use of `any` (except where absolutely necessary)
+- **Test Coverage**: Minimum 80% coverage required
+- **Accessibility**: WCAG 2.1 AA compliance
+- **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
-- [ ] Create Publish npm package cd step
-- [ ] Improve components design
-- [ ] New components (Cards, Modals, etc.)
-- [ ] Customizable themes and dark mode
-- [ ] Accessibility improvements
+- [x] Accessibility improvements (WCAG 2.1 AA)
+- [x] Comprehensive test coverage
+- [x] MDX documentation for complex components
+- [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

@@ -0,0 +1,12 @@
+import React from 'react';
+interface ComponentStatusTableProps {
+    components: Array<{
+        name: string;
+        status: string;
+        accessibility: string;
+        tests: string;
+        docs: boolean;
+    }>;
+}
+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/Accordion/Accordion.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from 'react';
+export type AccordionType = 'single' | 'multiple';
+export interface AccordionItem {
+    id: string;
+    title: string;
+    content: ReactNode;
+    disabled?: boolean;
+}
+export interface AccordionProps {
+    items: AccordionItem[];
+    type?: AccordionType;
+    defaultOpen?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    className?: string;
+}
+/**
+ * Accordion Component
+ *
+ * A collapsible content component that can display multiple items.
+ * Supports single and multiple selection modes.
+ * Follows Atomic Design principles as an Atom component.
+ *
+ * @example
+ * ```tsx
+ * <Accordion
+ *   type="single"
+ *   items={[
+ *     { id: '1', title: 'Item 1', content: 'Content 1' },
+ *     { id: '2', title: 'Item 2', content: 'Content 2' },
+ *   ]}
+ * />
+ * ```
+ */
+export default function Accordion({ items, type, defaultOpen, onValueChange, className, }: AccordionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Accordion from './Accordion';
+declare const meta: Meta<typeof Accordion>;
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+export declare const Default: Story;
+export declare const Multiple: Story;
+export declare const WithDefaultOpen: Story;
+export declare const WithDisabledItems: Story;
+export declare const RichContent: Story;
+export declare const LongContent: Story;

package/dist/ui/atoms/Accordion/Accordion.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { default } from './Accordion';
+export type { AccordionProps, AccordionItem, AccordionType } from './Accordion';

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

@@ -0,0 +1,31 @@
+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;
+    alt?: string;
+    fallback?: string | ReactNode;
+    size?: AvatarSize;
+    variant?: 'circle' | 'square' | 'rounded';
+    'aria-label'?: string;
+}
+/**
+ * Avatar Component
+ *
+ * A versatile avatar component for displaying user profile images or initials.
+ * Supports fallback display when image fails to load or is not provided.
+ * Fully accessible with ARIA attributes.
+ *
+ * @example
+ * ```tsx
+ * // With image
+ * <Avatar src="/user.jpg" alt="John Doe" />
+ *
+ * // With fallback initials
+ * <Avatar fallback="JD" alt="John Doe" />
+ *
+ * // Custom size
+ * <Avatar src="/user.jpg" size="lg" />
+ * ```
+ */
+declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Avatar;

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Avatar from './Avatar';
+declare const meta: Meta<typeof Avatar>;
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+export declare const Default: Story;
+export declare const WithImage: Story;
+export declare const Sizes: Story;
+export declare const Variants: Story;
+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/Avatar.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,26 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type AvatarProps } from './Avatar';
+export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    max?: number;
+    size?: AvatarProps['size'];
+    variant?: AvatarProps['variant'];
+    spacing?: 'none' | 'sm' | 'md' | 'lg';
+}
+/**
+ * AvatarGroup Component
+ *
+ * Container for displaying multiple avatars in a group.
+ * Supports collapsing when there are too many avatars.
+ *
+ * @example
+ * ```tsx
+ * <AvatarGroup max={3}>
+ *   <Avatar src="/user1.jpg" alt="User 1" />
+ *   <Avatar src="/user2.jpg" alt="User 2" />
+ *   <Avatar src="/user3.jpg" alt="User 3" />
+ *   <Avatar src="/user4.jpg" alt="User 4" />
+ * </AvatarGroup>
+ * ```
+ */
+export declare function AvatarGroup({ children, max, size, variant, spacing, className, ...props }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element;

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/Avatar/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Avatar Components
+ *
+ * Avatar component with fallback, sizes, and group support.
+ */
+export { default as Avatar } from './Avatar';
+export type { AvatarProps, AvatarSize } from './Avatar';
+export { AvatarGroup } from './AvatarGroup';
+export type { AvatarGroupProps } from './AvatarGroup';

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

@@ -1,18 +1,13 @@
-import type { HTMLAttributes } from "react";
-interface Props extends HTMLAttributes<HTMLSpanElement> {
-    variant?: "success" | "warning" | "error" | "info" | "neutral";
+import type { HTMLAttributes, ReactNode } from 'react';
+export type BadgeVariant = 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'secondary';
+export type BadgeSize = 'sm' | 'md' | 'lg';
+export type BadgeStyle = 'solid' | 'outline';
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    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.
- *
- * @example
- * ```tsx
- * <Badge variant="success">Active</Badge>
- * <Badge variant="error">Critical</Badge>
- * ```
- */
-export default function Badge({ variant, className, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const Badge: import("react").NamedExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
+export default Badge;

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

@@ -1,11 +1,17 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import Badge from "./Badge";
+import type { Meta, StoryObj } from '@storybook/react';
+import Badge from './Badge';
 declare const meta: Meta<typeof Badge>;
-export declare const Success: StoryObj<typeof Badge>;
-export declare const Warning: StoryObj<typeof Badge>;
-export declare const Error: StoryObj<typeof Badge>;
-export declare const Info: StoryObj<typeof Badge>;
-export declare const Neutral: StoryObj<typeof Badge>;
-export declare const AllVariants: StoryObj<typeof Badge>;
-export declare const WithCustomContent: StoryObj<typeof Badge>;
 export default meta;
+type Story = StoryObj<typeof Badge>;
+export declare const Default: Story;
+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";
-type Props = HTMLAttributes<HTMLDivElement>;
-export default function BoxWrapper({ className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+export interface BoxWrapperProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+export default function BoxWrapper({ className, ...props }: BoxWrapperProps): React.JSX.Element;

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,29 +1,51 @@
-import type { ButtonHTMLAttributes, ReactNode } from 'react';
-export type ButtonVariant = 'primary' | 'regular' | 'secondary' | 'error' | 'outline' | 'ghost';
+import type { ButtonHTMLAttributes, ReactNode, ElementType } from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'error' | 'outline' | 'ghost' | 'iconOnly';
 export type ButtonSize = 'sm' | 'md' | 'lg';
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'as'> {
     variant?: ButtonVariant;
     size?: ButtonSize;
     isLoading?: boolean;
+    loadingText?: string;
+    loadingIcon?: ReactNode;
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
+    fullWidth?: boolean;
+    as?: ElementType;
+    href?: string;
 }
 /**
  * Button Component
  *
- * A styled button component with variants and sizes.
+ * A styled button component with variants, sizes, and loading states.
  * Follows Atomic Design principles as an Atom component.
  * Uses Builder Pattern for class construction.
+ * Supports polymorphic `as` prop for rendering as different elements (Link, NextLink, etc.).
  *
  * @example
  * ```tsx
- * <Button
- *   variant="primary"
- *   size="md"
- *   onClick={handleClick}
- * >
+ * // Basic usage
+ * <Button variant="primary" size="md" onClick={handleClick}>
  *   Click me
  * </Button>
+ *
+ * // With icons
+ * <Button leftIcon={<Icon />} rightIcon={<Icon />}>
+ *   Action
+ * </Button>
+ *
+ * // Loading state
+ * <Button isLoading loadingText="Saving...">
+ *   Save
+ * </Button>
+ *
+ * // As Link
+ * <Button as={Link} href="/page">
+ *   Navigate
+ * </Button>
+ *
+ * // Icon only
+ * <Button variant="iconOnly" leftIcon={<Icon />} aria-label="Close" />
  * ```
  */
-export default function Button({ variant, size, isLoading, leftIcon, rightIcon, className, disabled, children, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+declare const Button: import("react").NamedExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default Button;

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

@@ -8,6 +8,22 @@ export declare const Secondary: Story;
 export declare const Error: Story;
 export declare const Outline: Story;
 export declare const Ghost: Story;
+export declare const IconOnly: Story;
 export declare const Sizes: Story;
+export declare const WithIcons: Story;
 export declare const Loading: Story;
+export declare const LoadingWithText: Story;
 export declare const Disabled: Story;
+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/Button/Button.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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