@pattern-stack/frontend-patterns 0.0.1

package/README.md

@@ -0,0 +1,310 @@
+# 🚀 React Frontend Template
+
+[![React 18.3+](https://img.shields.io/badge/React-18.3+-blue.svg)](https://reactjs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-green.svg)](https://www.typescriptlang.org/)
+[![Code style: Prettier](https://img.shields.io/badge/code%20style-prettier-000000.svg)](https://github.com/prettier/prettier)
+
+A production-ready React frontend template with atomic architecture patterns. Build ultra-lean applications by importing shared UI foundation patterns instead of copying boilerplate code.
+
+## 🎯 Philosophy
+
+**Importable Frontend Foundation** - Just like your backend template, create a shared React foundation that your applications import as a dependency, keeping individual apps ultra-lean and architecturally consistent.
+
+## ⚡ Quick Start
+
+### Create a New Application
+
+```typescript
+// main.tsx
+import { createReactApp } from '@pattern-stack/frontend-patterns'
+
+const app = createReactApp({
+  title: "Analytics Dashboard",
+  description: "Business analytics application",
+  version: "1.0.0",
+  enableAuth: true,
+  apiUrl: "http://localhost:8080/api/v1"
+})
+
+// Add your business logic
+import { DashboardRoutes, ReportsRoutes } from './routes'
+app.addRoutes("/dashboard", DashboardRoutes)
+app.addRoutes("/reports", ReportsRoutes)
+```
+
+### Installation
+
+```bash
+# Install from GitHub (requires built dist/ folder)
+npm install git+https://github.com/pattern-stack/frontend-patterns.git
+
+# Or for local development/testing
+npm install file:../path/to/frontend-patterns
+
+# Or link for active development
+npm link ../path/to/frontend-patterns
+```
+
+## 🏗️ Template Architecture
+
+```
+frontend-patterns/
+├── atoms/                    # Foundation primitives
+│   ├── shared/              # Common dependencies (settings, events, infrastructure)
+│   ├── ui/                  # UI base components (Button, Card, Input)
+│   ├── types/               # Shared enums and types
+│   └── security/            # JWT, auth utilities
+├── molecules/               # Composed functionality
+│   ├── auth/                # Authentication workflows
+│   ├── forms/               # Form composition patterns
+│   └── layout/              # Layout composition patterns
+├── organisms/               # Complete interface modules
+│   ├── providers/           # React context providers
+│   ├── routing/             # Route management patterns
+│   └── theming/             # Design system enforcement
+├── template/                # Template-specific utilities
+│   └── factory.tsx          # Configurable React app factory
+└── examples/                # Example implementations
+```
+
+## 🎨 What You Get
+
+### ✅ Production-Ready Infrastructure
+- **Authentication**: JWT tokens, user workflows, protected routes
+- **Design System**: 8 semantic color palettes with enforcement via ESLint
+- **Type Safety**: Generated types from OpenAPI specifications
+- **State Management**: TanStack Query for server state, Zustand patterns
+- **Theming**: CSS custom properties with dark mode support
+- **Routing**: File-based routing with authentication guards
+
+### ❌ What You DON'T Need to Build
+- Auth system (JWT, middleware, user models) - from template
+- UI components (Button, Card, Form primitives) - from template
+- Layout components (AppHeader, Sidebar, navigation) - from template
+- Design system (colors, spacing, theming) - from template
+- API client setup (axios, interceptors, types) - from template
+- State management (global state, async patterns) - from template
+
+## 🚀 Service Examples
+
+### Minimal Application
+```typescript
+import { createReactApp } from '@pattern-stack/frontend-patterns'
+
+const app = createReactApp("Simple Dashboard")
+
+export default app.render()
+```
+
+### Full-Featured Application
+```typescript
+import { 
+  createReactApp,
+  AuthProvider,
+  QueryProvider
+} from '@pattern-stack/frontend-patterns'
+
+const app = createReactApp({
+  title: "User Management Dashboard",
+  description: "Complete user management with analytics",
+  enableAuth: true,
+  enableQuery: true,
+  apiUrl: "http://localhost:8080/api/v1",
+  theme: "corporate"
+})
+
+// Your business logic only
+import { UserRoutes, AnalyticsRoutes } from './routes'
+app.addRoutes("/users", UserRoutes)
+app.addRoutes("/analytics", AnalyticsRoutes)
+```
+
+## 🔧 Template Features
+
+### Configurable App Factory
+```typescript
+createReactApp({
+  title: "My Service",
+  description: "Service description",
+  version: "1.0.0",
+  
+  // Core features
+  enableAuth: true,
+  enableQuery: true,
+  enableTheming: true,
+  enableRouting: true,
+  
+  // API configuration
+  apiUrl: "http://localhost:8080/api/v1",
+  apiTimeout: 10000,
+  
+  // Theme configuration
+  theme: "corporate",
+  darkMode: true,
+  
+  // Custom providers
+  customProviders: [MyCustomProvider]
+})
+```
+
+### Authentication Patterns
+```typescript
+import { useAuth, ProtectedRoute } from '@pattern-stack/frontend-patterns'
+
+function MyAuthComponent() {
+  const { user, login, logout, isAuthenticated } = useAuth()
+  
+  return (
+    <ProtectedRoute>
+      <Dashboard user={user} />
+    </ProtectedRoute>
+  )
+}
+```
+
+### Type-Safe API Patterns
+```typescript
+import { useApiQuery, ApiClient } from '@pattern-stack/frontend-patterns'
+import type { User, CreateUserRequest } from '@pattern-stack/frontend-patterns/types'
+
+function UserManagement() {
+  const { data: users } = useApiQuery<User[]>('/api/users')
+  const createUser = useApiMutation<User, CreateUserRequest>('/api/users')
+  
+  return <UserList users={users} onCreate={createUser.mutate} />
+}
+```
+
+## 🔥 Template Benefits
+
+### 🔐 Centralized Security
+- Update JWT logic once, all apps get it
+- Consistent authentication patterns
+- Security best practices enforced
+
+### 🚀 Rapid Development  
+- New app = business logic only
+- No authentication or UI component boilerplate
+- Production-ready from day one
+
+### 📊 Unified Design System
+- Same component library across apps
+- Consistent user experience
+- Design system compliance enforced
+
+### 🛡️ Consistent Quality
+- Template enforces code patterns
+- Shared linting and formatting rules
+- Centralized dependency management
+
+### ⚡ Easy Updates
+- Update template version, all apps benefit
+- Breaking changes managed centrally
+- Feature rollouts across entire platform
+
+## 🎯 Use Cases
+
+Perfect for:
+- **Micro-frontend architectures** with shared patterns
+- **Platform teams** providing infrastructure to product teams
+- **Startups** needing rapid, consistent development
+- **Enterprise** standardizing frontend patterns
+
+## 📚 Examples
+
+Check out the `examples/` directory for complete app implementations:
+
+- **Simple App**: Minimal template usage
+- **Auth App**: Complete authentication with user management
+- **Dashboard App**: Full business dashboard with charts and data
+- **Multi-tenant App**: Tenant isolation patterns
+
+## 🔄 Template Versioning
+
+```bash
+# Pin to specific version for stability
+@pattern-stack/frontend-patterns @ git+https://github.com/pattern-stack/frontend-patterns.git@v1.2.0
+
+# Use latest for new development
+@pattern-stack/frontend-patterns @ git+https://github.com/pattern-stack/frontend-patterns.git@main
+```
+
+### Version History
+- **v1.0.0** - Initial release with auth + design system patterns
+- **v1.1.0** - Added advanced routing + state management
+- **v1.2.0** - Enhanced theming + performance optimizations
+- **v2.0.0** - Breaking: Redesigned component API patterns
+
+## 🛠️ Development & Testing
+
+### Building the Library
+
+```bash
+# Clean and build distribution files
+npm run build:lib
+
+# Clean dist folder only
+npm run clean
+
+# Development server (for template development)
+npm run dev
+```
+
+### Testing Locally Before Publishing
+
+```bash
+# 1. Build the library
+npm run build:lib
+
+# 2. Create a test application
+mkdir test-app && cd test-app
+npm init -y
+npm install react react-dom @types/react @types/react-dom
+
+# 3. Install the local template
+npm install file:../path/to/frontend-patterns
+
+# 4. Create test app
+cat > main.tsx << 'EOF'
+import { createReactApp } from '@pattern-stack/frontend-patterns'
+
+const app = createReactApp({
+  title: "Test App",
+  enableAuth: true
+})
+
+export default app
+EOF
+
+# 5. Test imports work
+npx tsc --noEmit main.tsx
+```
+
+### Package Contents Verification
+
+```bash
+# Check what will be published
+npm pack --dry-run
+
+# Verify dist folder contents
+ls -la dist/
+```
+
+## 🤝 Contributing
+
+1. Fork the template repository
+2. Create a feature branch
+3. Add your enhancement to the appropriate layer (atoms/molecules/organisms)
+4. **Build and test locally** with `npm run build:lib`
+5. Add tests and documentation
+6. Submit a pull request
+
+## 📄 License
+
+MIT License - see LICENSE file for details.
+
+---
+
+**Built with ❤️ for the micro-frontend era**
+
+This template enables the Netflix/Airbnb model for frontend development - shared foundation, app-specific innovation, zero architectural drift! 🎯

package/dist/atoms/composed/Accordion/Accordion.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface AccordionItem {
+    id: string;
+    title: string;
+    content: React.ReactNode;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+}
+export interface AccordionProps {
+    items: AccordionItem[];
+    variant?: 'default' | 'bordered' | 'filled';
+    allowMultiple?: boolean;
+    defaultOpen?: string | string[];
+    collapsible?: boolean;
+    category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    className?: string;
+    onItemToggle?: (itemId: string, isOpen: boolean) => void;
+}
+export declare const Accordion: ({ items, variant, allowMultiple, defaultOpen, collapsible, category, className, onItemToggle }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Accordion.d.ts.map

package/dist/atoms/composed/Accordion/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/atoms/composed/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAK3D,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC5C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1D;AAED,eAAO,MAAM,SAAS,GAAI,gGASvB,cAAc,4CA8HhB,CAAC"}

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

@@ -0,0 +1,2 @@
+export { Accordion, type AccordionProps, type AccordionItem } from './Accordion';
+//# sourceMappingURL=index.d.ts.map

package/dist/atoms/composed/Accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/atoms/composed/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC"}

package/dist/atoms/composed/Alert/Alert.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export interface AlertProps {
+    /** Alert content */
+    children: React.ReactNode;
+    /** Alert status type */
+    status?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
+    /** Alert title */
+    title?: string;
+    /** Whether alert can be dismissed */
+    dismissible?: boolean;
+    /** Dismiss handler */
+    onDismiss?: () => void;
+    /** Visual variant */
+    variant?: 'filled' | 'outlined' | 'soft';
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional CSS classes */
+    className?: string;
+    /** Custom icon */
+    icon?: React.ReactNode;
+    /** Hide default icon */
+    hideIcon?: boolean;
+}
+export declare const Alert: React.FC<AlertProps>;
+//# sourceMappingURL=Alert.d.ts.map

package/dist/atoms/composed/Alert/Alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../src/atoms/composed/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,WAAW,UAAU;IACzB,oBAAoB;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wBAAwB;IACxB,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IAC9D,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sBAAsB;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,qBAAqB;IACrB,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IACzC,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAUD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA8FtC,CAAC"}

package/dist/atoms/composed/Alert/index.d.ts

@@ -0,0 +1,2 @@
+export { Alert, type AlertProps } from './Alert';
+//# sourceMappingURL=index.d.ts.map

package/dist/atoms/composed/Alert/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/atoms/composed/Alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/atoms/composed/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    active?: boolean;
+}
+interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    showHome?: boolean;
+    homeHref?: string;
+    className?: string;
+    separator?: React.ReactNode;
+    category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+}
+export declare const Breadcrumb: React.FC<BreadcrumbProps>;
+export {};
+//# sourceMappingURL=Breadcrumb.d.ts.map

package/dist/atoms/composed/Breadcrumb/Breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../../../src/atoms/composed/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,eAAe;IACvB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC1C;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA+DhD,CAAC"}

package/dist/atoms/composed/Breadcrumb/index.d.ts

@@ -0,0 +1,2 @@
+export { Breadcrumb, type BreadcrumbItem } from './Breadcrumb';
+//# sourceMappingURL=index.d.ts.map

package/dist/atoms/composed/Breadcrumb/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/atoms/composed/Breadcrumb/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC"}

package/dist/atoms/composed/Chart/Chart.d.ts

@@ -0,0 +1,37 @@
+import type { ILoadable } from '../../types';
+import { DASHBOARD_CHART_HEIGHTS } from '../../shared/config/dashboard-sizes';
+export type ChartType = 'line' | 'bar' | 'area' | 'pie';
+export type ChartVariant = 'default' | 'minimal' | 'detailed';
+export interface ChartDataPoint {
+    label: string;
+    value: number;
+    category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    color?: string;
+}
+export interface ChartProps extends ILoadable {
+    title: string;
+    subtitle?: string;
+    data: ChartDataPoint[];
+    type: ChartType;
+    variant?: ChartVariant;
+    category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    showLegend?: boolean;
+    showValues?: boolean;
+    showTrend?: boolean;
+    trend?: {
+        value: number;
+        label?: string;
+    };
+    /** Chart height - use standardized sizes from dashboard-sizes.ts */
+    height?: number | keyof typeof DASHBOARD_CHART_HEIGHTS;
+    onClick?: () => void;
+    className?: string;
+    /** Enable accessibility features like data table fallback */
+    includeDataTable?: boolean;
+    /** Custom color overrides for data points */
+    colorOverrides?: string[];
+    /** Don't render the outer Card wrapper (for embedded use) */
+    noWrapper?: boolean;
+}
+export declare const Chart: ({ title, subtitle, data, type, variant, category, showLegend, showValues, showTrend, trend, height, onClick, className, includeDataTable, colorOverrides, isLoading, noWrapper }: ChartProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Chart.d.ts.map

package/dist/atoms/composed/Chart/Chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../../../src/atoms/composed/Chart/Chart.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAG9E,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,OAAO,uBAAuB,CAAC;IACvD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6CAA6C;IAC7C,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,KAAK,GAAI,kLAkBnB,UAAU,4CAsWZ,CAAC"}

package/dist/atoms/composed/Chart/index.d.ts

@@ -0,0 +1,3 @@
+export { Chart } from './Chart';
+export type { ChartProps, ChartDataPoint, ChartType, ChartVariant } from './Chart';
+//# sourceMappingURL=index.d.ts.map

package/dist/atoms/composed/Chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/atoms/composed/Chart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}

package/dist/atoms/composed/ColorSwatch/ColorSwatch.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface ColorSwatchProps {
+    /** CSS color value (hex, hsl, rgb, or CSS variable) */
+    color: string;
+    /** Display name for the color */
+    name: string;
+    /** Optional size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Optional label to show below the swatch */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Whether the swatch is interactive */
+    interactive?: boolean;
+    /** Click handler for interactive swatches */
+    onClick?: () => void;
+}
+export declare const ColorSwatch: React.FC<ColorSwatchProps>;
+//# sourceMappingURL=ColorSwatch.d.ts.map

package/dist/atoms/composed/ColorSwatch/ColorSwatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSwatch.d.ts","sourceRoot":"","sources":["../../../../src/atoms/composed/ColorSwatch/ColorSwatch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,gBAAgB;IAC/B,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,4BAA4B;IAC5B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmDlD,CAAC"}

package/dist/atoms/composed/ColorSwatch/index.d.ts

@@ -0,0 +1,2 @@
+export { ColorSwatch, type ColorSwatchProps } from './ColorSwatch';
+//# sourceMappingURL=index.d.ts.map

package/dist/atoms/composed/ColorSwatch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/atoms/composed/ColorSwatch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/dist/atoms/composed/DarkModeToggle.d.ts

@@ -0,0 +1,4 @@
+export declare const DarkModeToggle: ({ className }: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DarkModeToggle.d.ts.map

package/dist/atoms/composed/DarkModeToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DarkModeToggle.d.ts","sourceRoot":"","sources":["../../../src/atoms/composed/DarkModeToggle.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,GAAI,eAAe;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,4CA6DnE,CAAC"}

package/dist/atoms/composed/DataBadge/DataBadge.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface DataBadgeProps {
+    children: React.ReactNode;
+    variant?: 'category' | 'status';
+    category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    status?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
+    size?: 'sm' | 'md' | 'lg';
+    interactive?: boolean;
+    onClick?: () => void;
+    className?: string;
+}
+export declare const DataBadge: ({ children, variant, category, status, size, interactive, onClick, className }: DataBadgeProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DataBadge.d.ts.map

package/dist/atoms/composed/DataBadge/DataBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataBadge.d.ts","sourceRoot":"","sources":["../../../../src/atoms/composed/DataBadge/DataBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IAC9D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,GAAI,gFASvB,cAAc,4CAuDhB,CAAC"}

package/dist/atoms/composed/DataBadge/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DataBadge';
+//# sourceMappingURL=index.d.ts.map

package/dist/atoms/composed/DataBadge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/atoms/composed/DataBadge/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/atoms/composed/DataTable/DataTable.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { IListLoadable } from '../../types';
+export interface Column<T> {
+    key: string;
+    header: string | React.ReactNode;
+    cell?: (item: T) => React.ReactNode;
+    sortable?: boolean;
+    filterable?: boolean;
+    width?: string;
+    /** Auto-render badges for status/category columns */
+    type?: 'status' | 'category' | 'default';
+}
+interface DataTableProps<T> extends IListLoadable {
+    data: T[];
+    columns: Column<T>[];
+    searchPlaceholder?: string;
+    pageSize?: number;
+    showPagination?: boolean;
+    showSearch?: boolean;
+    onRowClick?: (item: T) => void;
+    emptyMessage?: string;
+    className?: string;
+    /** Enable hover effects on table rows */
+    hover?: boolean;
+}
+export declare function DataTable<T extends Record<string, unknown>>({ data, columns, searchPlaceholder, pageSize, showPagination, showSearch, onRowClick, emptyMessage, className, hover, isLoading, loadingItemCount }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DataTable.d.ts.map

package/dist/atoms/composed/DataTable/DataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../../src/atoms/composed/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAcjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AASjD,MAAM,WAAW,MAAM,CAAC,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;CAC1C;AAED,UAAU,cAAc,CAAC,CAAC,CAAE,SAAQ,aAAa;IAC/C,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAID,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC3D,IAAI,EACJ,OAAO,EACP,iBAA+B,EAC/B,QAAa,EACb,cAAqB,EACrB,UAAiB,EACjB,UAAU,EACV,YAAkC,EAClC,SAAc,EACd,KAAa,EACb,SAAiB,EACjB,gBAAoB,EACrB,EAAE,cAAc,CAAC,CAAC,CAAC,2CA0UnB"}

package/dist/atoms/composed/DataTable/TableCellWithTooltip.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface TableCellWithTooltipProps {
+    children: React.ReactNode;
+    className?: string;
+    /** Maximum width before truncating */
+    maxWidth?: string;
+}
+export declare const TableCellWithTooltip: React.FC<TableCellWithTooltipProps>;
+export {};
+//# sourceMappingURL=TableCellWithTooltip.d.ts.map

package/dist/atoms/composed/DataTable/TableCellWithTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellWithTooltip.d.ts","sourceRoot":"","sources":["../../../../src/atoms/composed/DataTable/TableCellWithTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,yBAAyB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA4BpE,CAAC"}

package/dist/atoms/composed/DataTable/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DataTable';
+export * from './TableCellWithTooltip';
+//# sourceMappingURL=index.d.ts.map

package/dist/atoms/composed/DataTable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/atoms/composed/DataTable/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC"}

package/dist/atoms/composed/DateTimePicker/DateTimePicker.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+export interface DateTimePickerProps {
+    /** Current selected date/time value */
+    value?: Date;
+    /** Callback when date/time changes */
+    onChange?: (date: Date | null) => void;
+    /** Picker mode */
+    mode?: 'date' | 'time' | 'datetime';
+    /** Visual variant */
+    variant?: 'default' | 'compact' | 'inline';
+    /** Date format for display */
+    dateFormat?: 'MM/dd/yyyy' | 'dd/MM/yyyy' | 'yyyy-MM-dd';
+    /** Time format */
+    timeFormat?: '12h' | '24h';
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Enable date range selection */
+    isRange?: boolean;
+    /** Range values for range mode */
+    rangeValue?: {
+        start: Date | null;
+        end: Date | null;
+    };
+    /** Callback for range changes */
+    onRangeChange?: (range: {
+        start: Date | null;
+        end: Date | null;
+    }) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Error state */
+    error?: boolean;
+    /** Clear button */
+    clearable?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** ARIA label */
+    'aria-label'?: string;
+}
+export declare const DateTimePicker: React.FC<DateTimePickerProps>;
+//# sourceMappingURL=DateTimePicker.d.ts.map

package/dist/atoms/composed/DateTimePicker/DateTimePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../../../../src/atoms/composed/DateTimePicker/DateTimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,MAAM,WAAW,mBAAmB;IAClC,uCAAuC;IACvC,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACvC,kBAAkB;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;IACpC,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC3C,8BAA8B;IAC9B,UAAU,CAAC,EAAE,YAAY,GAAG,YAAY,GAAG,YAAY,CAAC;IACxD,kBAAkB;IAClB,UAAU,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC3B,8BAA8B;IAC9B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,8BAA8B;IAC9B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,UAAU,CAAC,EAAE;QAAE,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;QAAC,GAAG,EAAE,IAAI,GAAG,IAAI,CAAA;KAAE,CAAC;IACtD,iCAAiC;IACjC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;QAAC,GAAG,EAAE,IAAI,GAAG,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1E,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mBAAmB;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AASD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgjBxD,CAAC"}

package/dist/atoms/composed/DateTimePicker/index.d.ts

@@ -0,0 +1,3 @@
+export { DateTimePicker } from './DateTimePicker';
+export type { DateTimePickerProps } from './DateTimePicker';
+//# sourceMappingURL=index.d.ts.map

package/dist/atoms/composed/DateTimePicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/atoms/composed/DateTimePicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}