@pattern-stack/frontend-patterns 0.0.4 → 0.0.6

package/dist/molecules/layout/DashboardWithSidePanel/DashboardWithSidePanel.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface DashboardWithSidePanelProps {
+    /** Main dashboard content */
+    children: React.ReactNode;
+    /** Side panel component to display */
+    sidePanel?: React.ReactNode;
+    /** Whether to show the side panel */
+    showSidePanel?: boolean;
+    /** Side panel width in Tailwind units (e.g., 72, 80) */
+    sidePanelWidth?: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const DashboardWithSidePanel: React.FC<DashboardWithSidePanelProps>;
+export {};
+//# sourceMappingURL=DashboardWithSidePanel.d.ts.map

package/dist/molecules/layout/DashboardWithSidePanel/DashboardWithSidePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardWithSidePanel.d.ts","sourceRoot":"","sources":["../../../../src/molecules/layout/DashboardWithSidePanel/DashboardWithSidePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,2BAA2B;IACnC,6BAA6B;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,sCAAsC;IACtC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,qCAAqC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wDAAwD;IACxD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAyBxE,CAAC"}

package/dist/molecules/layout/DashboardWithSidePanel/index.d.ts

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

package/dist/molecules/layout/DashboardWithSidePanel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecules/layout/DashboardWithSidePanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/molecules/layout/NavigationContext.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+import type { NavigationConfig, NavigationItem } from '../../atoms/types';
+interface NavigationContextType {
+    navigation: NavigationConfig;
+    setNavigation: (config: NavigationConfig) => void;
+}
+interface NavigationProviderProps {
+    children: ReactNode;
+    initialNavigation?: NavigationConfig;
+}
+export declare const NavigationProvider: ({ children, initialNavigation }: NavigationProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useNavigation: () => NavigationContextType;
+export declare const getNavigationItems: (config: NavigationConfig) => NavigationItem[];
+export {};
+//# sourceMappingURL=NavigationContext.d.ts.map

package/dist/molecules/layout/NavigationContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationContext.d.ts","sourceRoot":"","sources":["../../../src/molecules/layout/NavigationContext.tsx"],"names":[],"mappings":"AAAA,OAAc,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACxE,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAEzE,UAAU,qBAAqB;IAC7B,UAAU,EAAE,gBAAgB,CAAA;IAC5B,aAAa,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAA;CAClD;AAID,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,SAAS,CAAA;IACnB,iBAAiB,CAAC,EAAE,gBAAgB,CAAA;CACrC;AAaD,eAAO,MAAM,kBAAkB,GAAI,iCAAiC,uBAAuB,4CAc1F,CAAA;AAED,eAAO,MAAM,aAAa,6BAMzB,CAAA;AAGD,eAAO,MAAM,kBAAkB,GAAI,QAAQ,gBAAgB,KAAG,cAAc,EAW3E,CAAA"}

package/dist/molecules/layout/Sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/molecules/layout/Sidebar.tsx"],"names":[],"mappings":"AAqBA,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,OAAO,GAAI,eAAe,YAAY,4CAsHlD,CAAC"}
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/molecules/layout/Sidebar.tsx"],"names":[],"mappings":"AAQA,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,OAAO,GAAI,eAAe,YAAY,4CAsHlD,CAAC"}

package/dist/molecules/layout/SidebarButton/SidebarButton.d.ts

@@ -7,6 +7,8 @@ interface SidebarButtonProps {
     expanded?: boolean;
     onClick?: () => void;
     className?: string;
+    badge?: string | number;
+    disabled?: boolean;
 }
 export declare const SidebarButton: React.FC<SidebarButtonProps>;
 export {};

package/dist/molecules/layout/SidebarButton/SidebarButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarButton.d.ts","sourceRoot":"","sources":["../../../../src/molecules/layout/SidebarButton/SidebarButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,kBAAkB;IAC1B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAoFtD,CAAC"}
+{"version":3,"file":"SidebarButton.d.ts","sourceRoot":"","sources":["../../../../src/molecules/layout/SidebarButton/SidebarButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,kBAAkB;IAC1B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAwGtD,CAAC"}

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

@@ -1,8 +1,11 @@
 export { PageTemplate, type PageTemplateProps } from './PageTemplate';
 export { ShowcaseSection } from './ShowcaseSection';
 export { AppLayout } from './AppLayout';
+export { DashboardWithSidePanel } from './DashboardWithSidePanel';
 export { SectionHeader } from './SectionHeader';
 export { SidebarButton } from './SidebarButton';
 export { AppHeader } from './AppHeader';
 export { SidebarProvider, useSidebar } from './SidebarContext';
+export { NavigationProvider, useNavigation, getNavigationItems } from './NavigationContext';
+export { Sidebar } from './Sidebar';
 //# sourceMappingURL=index.d.ts.map

package/dist/molecules/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecules/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecules/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAC5F,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/dist/templates/factory.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ReactNode } from 'react';
-import type { AuthConfig } from '../atoms/types';
+import type { AuthConfig, NavigationConfig } from '../atoms/types';
 export interface AppConfig {
     title: string;
     description?: string;
@@ -14,6 +14,7 @@ export interface AppConfig {
     theme?: string;
     darkMode?: boolean;
     auth?: AuthConfig;
+    navigation?: NavigationConfig;
     customProviders?: React.ComponentType<{
         children: ReactNode;
     }>[];

package/dist/templates/factory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../src/templates/factory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAStC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAGhD,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,EAAE,CAAA;CACjE;AAGD,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,SAAS,CAAA;IACvB,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,KAAK,IAAI,CAAA;IACvD,KAAK,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CACpC;AAGD,wBAAgB,cAAc,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,GAAG,WAAW,CA6HtE;AAGD,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,CAE1D"}
+{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../src/templates/factory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQtC,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAGlE,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,UAAU,CAAC,EAAE,gBAAgB,CAAA;IAC7B,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,EAAE,CAAA;CACjE;AAGD,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,SAAS,CAAA;IACvB,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,KAAK,IAAI,CAAA;IACvD,KAAK,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CACpC;AAGD,wBAAgB,cAAc,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,GAAG,WAAW,CAoItE;AAGD,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,CAE1D"}

package/dist/templates/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EACL,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,EACxB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,WAAW,EACX,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACtB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,EAC7B,MAAM,gBAAgB,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,OAAO,EACL,cAAc,EACd,eAAe,EACf,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EACL,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,EACxB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,WAAW,EACX,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACtB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,EAC7B,MAAM,gBAAgB,CAAC;AAGxB,cAAc,SAAS,CAAC;AAOxB,OAAO,EACL,cAAc,EACd,eAAe,EACf,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,WAAW,CAAC"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@pattern-stack/frontend-patterns",
   "description": "Production-ready React frontend template with atomic architecture patterns. Build ultra-lean applications by importing shared UI foundation patterns.",
   "private": false,
-  "version": "0.0.4",
+  "version": "0.0.6",
   "keywords": [
     "react",
     "typescript",
@@ -44,7 +44,8 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "build:lib": "npm run clean && vite build --mode library && tsc -p tsconfig.lib.json",
+    "build:lib": "npm run clean && vite build --mode library && npm run build:types",
+    "build:types": "tsc --project tsconfig.lib.json",
     "clean": "rm -rf dist",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
@@ -102,9 +103,12 @@
     "@vitejs/plugin-react": "^4.4.1",
     "@vitest/coverage-v8": "^3.2.1",
     "autoprefixer": "^10.4.21",
+    "concurrently": "^9.1.2",
+    "cors": "^2.8.5",
     "eslint": "^9.25.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
+    "express": "^5.1.0",
     "globals": "^16.0.0",
     "jsdom": "^26.1.0",
     "postcss": "^8.5.3",
@@ -115,4 +119,4 @@
     "vite": "^6.3.5",
     "vitest": "^3.2.1"
   }
-}
+}

package/src/App.tsx

@@ -15,8 +15,12 @@ import {
   ComponentShowcase, 
   AdminDashboardShowcase, 
   AdminCRUDShowcase, 
-  AdminDetailShowcase 
+  AdminDetailShowcase,
+  SalesPerformanceDashboard,
+  EntityPerformanceShowcase,
+  EntityManagementShowcase
 } from './pages';
+import { EntityTemplateExample } from './pages/EntityTemplateExample';
 
 function App() {
   return (
@@ -41,6 +45,12 @@ function App() {
             <Route path="admin/dashboard" element={<ErrorBoundary><AdminDashboardShowcase /></ErrorBoundary>} />
             <Route path="admin/users" element={<ErrorBoundary><AdminCRUDShowcase /></ErrorBoundary>} />
             <Route path="admin/user/:id" element={<ErrorBoundary><AdminDetailShowcase /></ErrorBoundary>} />
+            <Route path="admin/sales" element={<ErrorBoundary><SalesPerformanceDashboard /></ErrorBoundary>} />
+            
+            {/* Entity Template Showcases */}
+            <Route path="entity/performance" element={<ErrorBoundary><EntityPerformanceShowcase /></ErrorBoundary>} />
+            <Route path="entity/management" element={<ErrorBoundary><EntityManagementShowcase /></ErrorBoundary>} />
+            <Route path="entity/template-example" element={<ErrorBoundary><EntityTemplateExample /></ErrorBoundary>} />
             
             {/* Fallback */}
             <Route path="*" element={<ErrorBoundary><ComponentShowcasePage /></ErrorBoundary>} />

package/src/__tests__/atoms/composed/databadge.test.tsx

@@ -0,0 +1,106 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '../../utils'
+import { DataBadge } from '../../../atoms/composed/DataBadge'
+
+describe('DataBadge (Composed)', () => {
+  describe('status variant', () => {
+    it('renders success status badge', () => {
+      render(<DataBadge variant="status" status="success">Active</DataBadge>)
+      
+      const badge = screen.getByText('Active')
+      expect(badge).toBeInTheDocument()
+      expect(badge.className).toContain('status-success')
+    })
+
+    it('renders warning status badge', () => {
+      render(<DataBadge variant="status" status="warning">Pending</DataBadge>)
+      
+      const badge = screen.getByText('Pending')
+      expect(badge.className).toContain('status-warning')
+    })
+
+    it('renders error status badge', () => {
+      render(<DataBadge variant="status" status="error">Failed</DataBadge>)
+      
+      const badge = screen.getByText('Failed')
+      expect(badge.className).toContain('status-error')
+    })
+
+    it('renders info status badge', () => {
+      render(<DataBadge variant="status" status="info">Processing</DataBadge>)
+      
+      const badge = screen.getByText('Processing')
+      expect(badge.className).toContain('status-info')
+    })
+
+    it('renders neutral status badge', () => {
+      render(<DataBadge variant="status" status="neutral">Draft</DataBadge>)
+      
+      const badge = screen.getByText('Draft')
+      expect(badge.className).toContain('status-neutral')
+    })
+  })
+
+  describe('category variant', () => {
+    it('renders category 1 badge', () => {
+      render(<DataBadge variant="category" category={1}>Category 1</DataBadge>)
+      
+      const badge = screen.getByText('Category 1')
+      expect(badge).toBeInTheDocument()
+      expect(badge.className).toContain('badge-category-1')
+    })
+
+    it('renders category 5 badge', () => {
+      render(<DataBadge variant="category" category={5}>Category 5</DataBadge>)
+      
+      const badge = screen.getByText('Category 5')
+      expect(badge.className).toContain('badge-category-5')
+    })
+
+    it('renders category 8 badge', () => {
+      render(<DataBadge variant="category" category={8}>Category 8</DataBadge>)
+      
+      const badge = screen.getByText('Category 8')
+      expect(badge.className).toContain('badge-category-8')
+    })
+  })
+
+  it('applies additional className props', () => {
+    render(
+      <DataBadge variant="status" status="success" className="custom-class">
+        Custom
+      </DataBadge>
+    )
+    
+    const badge = screen.getByText('Custom')
+    expect(badge.className).toContain('custom-class')
+  })
+
+  it('renders with component data attribute', () => {
+    render(
+      <DataBadge variant="status" status="info">
+        Test
+      </DataBadge>
+    )
+    
+    expect(screen.getByText('Test')).toHaveAttribute('data-component-name', 'DataBadge')
+  })
+
+  it('automatically uses default category', () => {
+    render(<DataBadge>Default</DataBadge>)
+    
+    const badge = screen.getByText('Default')
+    expect(badge.className).toContain('badge-category-1')
+  })
+
+  it('handles string and number status values', () => {
+    const { rerender } = render(
+      <DataBadge variant="status" status="success">String Status</DataBadge>
+    )
+    
+    expect(screen.getByText('String Status')).toBeInTheDocument()
+    
+    rerender(<DataBadge variant="category" category={3}>Number Category</DataBadge>)
+    expect(screen.getByText('Number Category')).toBeInTheDocument()
+  })
+})

package/src/__tests__/atoms/composed/statcard.test.tsx

@@ -0,0 +1,133 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, userEvent } from '../../utils'
+import { StatCard } from '../../../atoms/composed/StatCard'
+
+describe('StatCard (Composed)', () => {
+  it('renders basic stat card with title and value', () => {
+    render(<StatCard title="Total Users" value="1,234" />)
+    
+    expect(screen.getByText('Total Users')).toBeInTheDocument()
+    expect(screen.getByText('1,234')).toBeInTheDocument()
+  })
+
+  it('renders with subtitle', () => {
+    render(
+      <StatCard 
+        title="Revenue" 
+        value="$45,678" 
+        subtitle="+12% from last month" 
+      />
+    )
+    
+    expect(screen.getByText('Revenue')).toBeInTheDocument()
+    expect(screen.getByText('$45,678')).toBeInTheDocument()
+    expect(screen.getByText('+12% from last month')).toBeInTheDocument()
+  })
+
+  it('renders with icon', () => {
+    render(
+      <StatCard 
+        title="Orders" 
+        value="567" 
+        icon="ShoppingCart"
+      />
+    )
+    
+    expect(screen.getByText('Orders')).toBeInTheDocument()
+    expect(screen.getByText('567')).toBeInTheDocument()
+    // Icon should be rendered (we can't easily test the actual icon, but we can test it doesn't crash)
+  })
+
+  it('applies category theming', () => {
+    render(<StatCard title="Test" value="123" category={3} />)
+    
+    const card = screen.getByText('Test').closest('[data-component-name="StatCard"]')
+    expect(card).toBeInTheDocument()
+    expect(card).toHaveAttribute('data-component-name', 'StatCard')
+  })
+
+  it('handles click events', async () => {
+    const user = userEvent.setup()
+    const handleClick = vi.fn()
+    
+    render(
+      <StatCard 
+        title="Clickable Card" 
+        value="999" 
+        onClick={handleClick}
+      />
+    )
+    
+    const card = screen.getByText('Clickable Card').closest('[role="button"]')
+    expect(card).toBeInTheDocument()
+    
+    await user.click(card!)
+    expect(handleClick).toHaveBeenCalledOnce()
+  })
+
+  it('applies hover effects when clickable', () => {
+    render(
+      <StatCard 
+        title="Hoverable" 
+        value="555" 
+        onClick={() => {}}
+      />
+    )
+    
+    const card = screen.getByText('Hoverable').closest('[role="button"]')
+    expect(card).toHaveClass('cursor-pointer')
+    expect(card).toHaveClass('hover:shadow-md')
+  })
+
+  it('does not apply click styles when not clickable', () => {
+    render(<StatCard title="Static Card" value="111" />)
+    
+    const card = screen.getByText('Static Card').closest('div')
+    expect(card).not.toHaveAttribute('role', 'button')
+    expect(card).not.toHaveClass('cursor-pointer')
+  })
+
+  it('displays numbers as provided', () => {
+    render(<StatCard title="Big Number" value={1234567} />)
+    
+    expect(screen.getByText('1234567')).toBeInTheDocument()
+  })
+
+  it('handles string and number values', () => {
+    const { rerender } = render(<StatCard title="String" value="Custom Text" />)
+    expect(screen.getByText('Custom Text')).toBeInTheDocument()
+    
+    rerender(<StatCard title="Number" value={42} />)
+    expect(screen.getByText('42')).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    render(
+      <StatCard 
+        title="Custom" 
+        value="123" 
+        className="custom-stat-card"
+      />
+    )
+    
+    const card = screen.getByText('Custom').closest('.custom-stat-card')
+    expect(card).toBeInTheDocument()
+  })
+
+  it('renders loading state', () => {
+    render(<StatCard title="Loading" value="..." isLoading={true} />)
+    
+    const card = screen.getByText('Loading').closest('[data-component-name="StatCard"]')
+    expect(card).toBeInTheDocument()
+    // Check for skeleton elements in loading state
+    const skeletons = card?.querySelectorAll('.animate-pulse')
+    expect(skeletons?.length).toBeGreaterThan(0)
+  })
+
+  it('renders with data component name', () => {
+    render(<StatCard title="Test Card" value="123" />)
+    
+    const card = screen.getByText('Test Card').closest('[data-component-name="StatCard"]')
+    expect(card).toHaveAttribute('data-component-name', 'StatCard')
+  })
+})

package/src/__tests__/atoms/utils/icon-resolver.test.tsx

@@ -0,0 +1,140 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '../../utils'
+import { Icon, getIcon, iconMap } from '../../../atoms/utils/icon-resolver'
+
+// Mock console.warn to avoid noise in tests
+const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+describe('Icon Resolver', () => {
+  afterEach(() => {
+    consoleSpy.mockClear()
+  })
+
+  describe('Icon component', () => {
+    it('renders valid icon', () => {
+      render(<Icon name="Home" data-testid="home-icon" />)
+      
+      const icon = screen.getByTestId('home-icon')
+      expect(icon).toBeInTheDocument()
+    })
+
+    it('applies default className', () => {
+      render(<Icon name="Users" data-testid="users-icon" />)
+      
+      const icon = screen.getByTestId('users-icon')
+      expect(icon).toHaveClass('w-5', 'h-5')
+    })
+
+    it('applies custom className', () => {
+      render(<Icon name="Settings" className="w-8 h-8 text-blue-500" data-testid="settings-icon" />)
+      
+      const icon = screen.getByTestId('settings-icon')
+      expect(icon).toHaveClass('w-8', 'h-8', 'text-blue-500')
+    })
+
+    it('applies size prop', () => {
+      render(<Icon name="Search" size={24} data-testid="search-icon" />)
+      
+      const icon = screen.getByTestId('search-icon')
+      expect(icon).toHaveAttribute('width', '24')
+      expect(icon).toHaveAttribute('height', '24')
+    })
+
+    it('renders fallback icon for invalid name', () => {
+      render(<Icon name="InvalidIcon" data-testid="fallback-icon" />)
+      
+      const icon = screen.getByTestId('fallback-icon')
+      expect(icon).toBeInTheDocument()
+      expect(consoleSpy).toHaveBeenCalledWith('Icon "InvalidIcon" not found. Using default Menu icon.')
+    })
+
+    it('handles undefined icon name gracefully', () => {
+      render(<Icon name={undefined as any} data-testid="undefined-icon" />)
+      
+      const icon = screen.getByTestId('undefined-icon')
+      expect(icon).toBeInTheDocument()
+      expect(consoleSpy).toHaveBeenCalled()
+    })
+  })
+
+  describe('getIcon function', () => {
+    it('returns icon component for valid name', () => {
+      const HomeIcon = getIcon('Home')
+      expect(HomeIcon).toBeDefined()
+      expect(typeof HomeIcon).toBe('function')
+    })
+
+    it('returns Menu icon for invalid name', () => {
+      const InvalidIcon = getIcon('InvalidIcon' as any)
+      expect(InvalidIcon).toBeDefined()
+      expect(typeof InvalidIcon).toBe('function')
+    })
+
+    it('returns Menu icon for undefined name', () => {
+      const UndefinedIcon = getIcon(undefined as any)
+      expect(UndefinedIcon).toBeDefined()
+    })
+  })
+
+  describe('iconMap', () => {
+    it('contains expected common icons', () => {
+      const expectedIcons = [
+        'Home', 'Users', 'Settings', 'Search', 'Menu',
+        'ChevronDown', 'ChevronRight', 'X', 'Plus',
+        'ShoppingCart', 'Calendar', 'Mail', 'Phone'
+      ]
+
+      expectedIcons.forEach(iconName => {
+        expect(iconMap).toHaveProperty(iconName)
+        expect(typeof iconMap[iconName]).toBe('function')
+      })
+    })
+
+    it('has reasonable number of icons', () => {
+      const iconCount = Object.keys(iconMap).length
+      expect(iconCount).toBeGreaterThan(30)
+      expect(iconCount).toBeLessThan(100) // Keep it manageable
+    })
+
+    it('all icon map values are functions', () => {
+      Object.values(iconMap).forEach(iconComponent => {
+        expect(typeof iconComponent).toBe('function')
+      })
+    })
+  })
+
+  describe('Icon rendering variations', () => {
+    const testIcons = ['Home', 'Users', 'Settings', 'Search', 'Bell']
+
+    testIcons.forEach(iconName => {
+      it(`renders ${iconName} icon without errors`, () => {
+        render(<Icon name={iconName} data-testid={`${iconName.toLowerCase()}-icon`} />)
+        
+        const icon = screen.getByTestId(`${iconName.toLowerCase()}-icon`)
+        expect(icon).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Integration with real icon names', () => {
+    it('renders navigation icons correctly', () => {
+      const navIcons = ['Home', 'Users', 'Settings', 'FileText', 'BarChart']
+      
+      navIcons.forEach(iconName => {
+        const { unmount } = render(<Icon name={iconName} />)
+        // If it renders without throwing, it's valid
+        unmount()
+      })
+    })
+
+    it('renders action icons correctly', () => {
+      const actionIcons = ['Plus', 'Edit', 'Trash2', 'Save', 'Download']
+      
+      actionIcons.forEach(iconName => {
+        const { unmount } = render(<Icon name={iconName} />)
+        // If it renders without throwing, it's valid
+        unmount()
+      })
+    })
+  })
+})