@rakeyshgidwani/roger-ui-bank-theme-jeremy 0.5.3

package/CHANGELOG.md

@@ -0,0 +1,23 @@
+# Changelog
+
+All notable changes to the jeremy theme package will be documented in this file.
+
+## [0.5.3] - 2025-12-26
+
+### Added
+- Initial release of jeremy theme package
+- Complete component library with jeremy styling
+- TypeScript definitions included
+- CSS custom properties support
+- Pre-configured theme provider
+
+### Features
+- Fully themed components
+- Consistent design system
+- Accessibility compliance
+- Dark mode support (if applicable)
+- Responsive design
+
+## Future Releases
+
+Check back for updates and new features!

package/README.md

@@ -0,0 +1,137 @@
+# @rakeyshgidwani/roger-ui-theme-jeremy
+
+> 🎨 Complete Roger UI theme package with jeremy styling - Ready for AI agents and human developers
+
+## 🚀 Quick Start
+
+```bash
+npm install @rakeyshgidwani/roger-ui-theme-jeremy
+```
+
+```typescript
+import { Button, Card, Provider } from '@rakeyshgidwani/roger-ui-theme-jeremy';
+
+function App() {
+  return (
+    <Provider>
+      <Card>
+        <Button variant="primary">Themed Button</Button>
+      </Card>
+    </Provider>
+  );
+}
+```
+
+## 🤖 AI Agent Instructions
+
+This package is optimized for AI agents. Key files for AI consumption:
+
+- `docs/ai-metadata/package-info.json` - Complete package metadata
+- `docs/ai-metadata/component-inventory.json` - All available components
+- `docs/ai-metadata/usage-patterns.json` - Common usage patterns
+- `docs/api/theme-specification.json` - Complete theme structure
+
+### For AI Agents: Quick Component Reference
+
+```typescript
+// Available components (see docs/ai-metadata/component-inventory.json for complete list)
+import {
+  Button, Card, Input, Modal, Dropdown,
+  Navbar, Sidebar, Tabs, Badge, Alert,
+  Provider // Pre-configured theme provider
+} from '@rakeyshgidwani/roger-ui-theme-jeremy';
+
+// Theme access
+import { JeremyTheme } from '@rakeyshgidwani/roger-ui-theme-jeremy/theme';
+```
+
+## 📦 Package Contents
+
+| File | Purpose | AI Readable |
+|------|---------|-------------|
+| `dist/index.js` | Main entry point | ✅ |
+| `dist/styles.css` | Complete theme styles | ✅ |
+| `dist/theme.js` | Theme configuration | ✅ |
+| `docs/ai-metadata/` | AI-specific metadata | ✅ |
+| `docs/components/` | Component documentation | ✅ |
+| `docs/guides/` | Usage guides | ✅ |
+
+## 🎨 Theme Features
+
+- **🎯 Pre-configured**: Works out of the box
+- **🔧 Customizable**: Override any theme value
+- **♿ Accessible**: WCAG 2.1 AA compliant
+- **📱 Responsive**: Mobile-first design
+- **🌙 Dark Mode**: Built-in support (if applicable)
+- **🤖 AI-Friendly**: Structured metadata for AI agents
+
+## 📖 Documentation Structure
+
+```
+docs/
+├── ai-metadata/           # AI agent metadata
+│   ├── package-info.json
+│   ├── component-inventory.json
+│   └── usage-patterns.json
+├── components/            # Component documentation
+├── guides/               # Usage guides
+├── examples/             # Code examples
+└── api/                  # API reference
+```
+
+## 🔧 Customization
+
+```typescript
+import { Provider } from '@rakeyshgidwani/roger-ui-theme-jeremy';
+import { JeremyTheme } from '@rakeyshgidwani/roger-ui-theme-jeremy/theme';
+
+const customTheme = {
+  ...JeremyTheme,
+  colors: {
+    ...JeremyTheme.colors,
+    primary: '#your-color'
+  }
+};
+
+function App() {
+  return (
+    <Provider theme={customTheme}>
+      {/* Your app */}
+    </Provider>
+  );
+}
+```
+
+## 🤝 For AI Agents
+
+This package includes comprehensive metadata for AI agents:
+
+1. **Component Inventory**: Complete list of available components with props
+2. **Usage Patterns**: Common patterns and best practices
+3. **Theme Structure**: Detailed theme configuration
+4. **Code Examples**: Ready-to-use code snippets
+5. **Accessibility Info**: ARIA labels, keyboard support, etc.
+
+See `docs/ai-metadata/` for structured data.
+
+## 📚 Additional Resources
+
+- [Component Documentation](./docs/components/)
+- [Usage Guide](./docs/guides/usage-guide.md)
+- [Customization Guide](./docs/guides/customization-guide.md)
+- [API Reference](./docs/api/)
+- [Accessibility Guide](./docs/guides/accessibility-guide.md)
+
+## 🔗 Links
+
+- [Package on npm](https://www.npmjs.com/package/@rakeyshgidwani/roger-ui-theme-jeremy)
+- [GitHub Repository](https://github.com/roger-ui/design-system)
+- [Documentation](https://roger-ui.dev/themes/jeremy)
+
+## 📄 License
+
+MIT © Roger UI Team
+
+---
+
+**Generated automatically by Roger UI automation system**

package/dist/components/ui/accessibility-demo.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+interface AccessibilityDemoProps {
+    className?: string;
+}
+export declare const AccessibilityDemo: React.FC<AccessibilityDemoProps>;
+export {};
+//# sourceMappingURL=accessibility-demo.d.ts.map

package/dist/components/ui/accessibility-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accessibility-demo.d.ts","sourceRoot":"","sources":["../../../src/components/ui/accessibility-demo.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,UAAU,sBAAsB;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA8P9D,CAAC"}

package/dist/components/ui/accessibility-demo.esm.js

@@ -0,0 +1,95 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+;
+import { Card } from './card.js';
+import { Button } from './button.js';
+import { Badge } from './badge.js';
+import { Input } from './input.js';
+import { accessibilityManager } from '../../themes/accessibility.js';
+import { screenReaderOptimizer } from '../../themes/screen-reader.js';
+import { highContrastThemeManager } from '../../themes/high-contrast.js';
+import { focusManager } from '../../themes/focus-management.js';
+import { motionReductionManager } from '../../themes/motion-reduction.js';
+import { ARIAUtils as AriaPatternGenerator } from '../../themes/aria-patterns.js';
+export const AccessibilityDemo = ({ className = '' }) => {
+    const [currentFocus, setCurrentFocus] = useState('');
+    const [announcements, setAnnouncements] = useState([]);
+    const [accessibilityConfig, setAccessibilityConfig] = useState(accessibilityManager.getConfig());
+    const [highContrastEnabled, setHighContrastEnabled] = useState(highContrastThemeManager.isHighContrastEnabled());
+    const [motionReduced, setMotionReduced] = useState(motionReductionManager.isMotionReduced());
+    useEffect(() => {
+        // Subscribe to accessibility changes
+        const unsubscribeAccessibility = accessibilityManager.subscribe(() => {
+            setAccessibilityConfig(accessibilityManager.getConfig());
+        });
+        // Update state periodically since some managers don't have subscribe methods
+        const interval = setInterval(() => {
+            setHighContrastEnabled(highContrastThemeManager.isHighContrastEnabled());
+            setMotionReduced(motionReductionManager.isMotionReduced());
+            const focusInfo = focusManager.getCurrentFocusInfo();
+            if (focusInfo.element) {
+                setCurrentFocus(focusInfo.element.textContent || focusInfo.element.tagName);
+            }
+        }, 1000);
+        return () => {
+            unsubscribeAccessibility();
+            clearInterval(interval);
+        };
+    }, []);
+    const addAnnouncement = (message) => {
+        setAnnouncements(prev => [message, ...prev.slice(0, 9)]);
+    };
+    const toggleHighContrast = () => {
+        if (highContrastEnabled) {
+            highContrastThemeManager.disable();
+            addAnnouncement('High contrast mode disabled');
+        }
+        else {
+            highContrastThemeManager.enable();
+            addAnnouncement('High contrast mode enabled');
+        }
+    };
+    const toggleMotionReduction = () => {
+        if (motionReduced) {
+            motionReductionManager.disable();
+            addAnnouncement('Motion reduction disabled');
+        }
+        else {
+            motionReductionManager.enable();
+            addAnnouncement('Motion reduction enabled');
+        }
+    };
+    const testScreenReaderAnnouncement = () => {
+        const message = 'This is a test announcement for screen readers';
+        screenReaderOptimizer.announce(message, 'normal');
+        addAnnouncement(`Announced: ${message}`);
+    };
+    const testFocusManagement = () => {
+        const container = document.getElementById('accessibility-demo-container');
+        if (container) {
+            // Focus management is already active by default
+            addAnnouncement('Focus management is active for this container');
+        }
+    };
+    const testAriaPatterns = () => {
+        const button = document.getElementById('test-aria-button');
+        if (button) {
+            const ariaProps = AriaPatternGenerator.generateAriaAttributes({
+                disabled: false,
+                readonly: false,
+                required: true,
+                invalid: false,
+                label: 'Test button for ARIA patterns',
+                describedby: 'button-description'
+            });
+            Object.entries(ariaProps).forEach(([key, value]) => {
+                if (value !== undefined) {
+                    button.setAttribute(key, String(value));
+                }
+            });
+            addAnnouncement('ARIA patterns applied to test button');
+        }
+    };
+    return (_jsxs("div", { id: "accessibility-demo-container", className: `accessibility-demo ${className} max-w-full overflow-hidden`, children: [_jsxs(Card, { className: "mb-6", children: [_jsx("h2", { className: "text-2xl font-bold mb-4 break-words", children: "Accessibility Features Demo" }), _jsx("p", { className: "text-gray-600 mb-4 break-words", children: "This component demonstrates all the accessibility features implemented in the design system." }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 mb-6", children: [_jsxs("div", { className: "p-4 bg-gray-50 rounded-lg", children: [_jsx("h3", { className: "font-semibold mb-2", children: "Current Focus" }), _jsx("p", { className: "text-sm text-gray-600 break-words", children: currentFocus || 'No focus' })] }), _jsxs("div", { className: "p-4 bg-gray-50 rounded-lg", children: [_jsx("h3", { className: "font-semibold mb-2", children: "High Contrast" }), _jsx(Badge, { variant: highContrastEnabled ? 'default' : 'secondary', children: highContrastEnabled ? 'Enabled' : 'Disabled' })] }), _jsxs("div", { className: "p-4 bg-gray-50 rounded-lg", children: [_jsx("h3", { className: "font-semibold mb-2", children: "Motion Reduction" }), _jsx(Badge, { variant: motionReduced ? 'destructive' : 'secondary', children: motionReduced ? 'Enabled' : 'Disabled' })] })] }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h3", { className: "font-semibold mb-3 break-words", children: "Accessibility Controls" }), _jsxs("div", { className: "space-y-3", children: [_jsxs(Button, { onClick: toggleHighContrast, variant: "outline", className: "w-full", children: [highContrastEnabled ? 'Disable' : 'Enable', " High Contrast"] }), _jsxs(Button, { onClick: toggleMotionReduction, variant: "outline", className: "w-full", children: [motionReduced ? 'Disable' : 'Enable', " Motion Reduction"] }), _jsx(Button, { onClick: testScreenReaderAnnouncement, variant: "outline", className: "w-full", children: "Test Screen Reader Announcement" }), _jsx(Button, { onClick: testFocusManagement, variant: "outline", className: "w-full", children: "Activate Focus Management" }), _jsx(Button, { onClick: testAriaPatterns, variant: "outline", className: "w-full", children: "Test ARIA Patterns" })] })] }), _jsxs("div", { className: "min-w-0", children: [_jsx("h3", { className: "font-semibold mb-3 break-words", children: "Test Interactive Elements" }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { placeholder: "Test input field", "aria-label": "Test input for accessibility", "aria-describedby": "input-description" }), _jsx("p", { id: "input-description", className: "text-sm text-gray-500 break-words", children: "This input field has proper ARIA labels and descriptions." }), _jsx(Button, { id: "test-aria-button", variant: "default", "aria-describedby": "button-description", children: "Test Button" }), _jsx("p", { id: "button-description", className: "text-sm text-gray-500 break-words", children: "This button will have ARIA patterns applied when you click the test button above." })] })] })] }), _jsxs("div", { className: "mb-6", children: [_jsx("h3", { className: "font-semibold mb-3", children: "Current Accessibility Configuration" }), _jsx("div", { className: "bg-blue-50 p-4 rounded-lg border-2 border-blue-300", children: _jsxs("div", { className: "text-sm text-blue-800", children: [_jsxs("p", { className: "mb-2", children: [_jsx("strong", { children: "High Contrast:" }), " ", accessibilityConfig.highContrast ? '✅ Enabled' : '❌ Disabled'] }), _jsxs("p", { className: "mb-2", children: [_jsx("strong", { children: "Reduced Motion:" }), " ", accessibilityConfig.reducedMotion ? '✅ Enabled' : '❌ Disabled'] }), _jsxs("p", { className: "mb-2", children: [_jsx("strong", { children: "Focus Visible:" }), " ", accessibilityConfig.focusVisible ? '✅ Enabled' : '❌ Disabled'] }), _jsxs("p", { className: "mb-2", children: [_jsx("strong", { children: "Contrast Target:" }), " ", accessibilityConfig.contrast.target, ":1 ratio"] }), _jsxs("p", { className: "mb-0", children: [_jsx("strong", { children: "Touch Target Size:" }), " ", accessibilityConfig.spacing.touchTarget] })] }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold mb-3", children: "Recent Screen Reader Announcements" }), _jsx("div", { className: "bg-gray-50 p-4 rounded-lg max-h-40 overflow-y-auto", children: announcements.length === 0 ? (_jsx("p", { className: "text-gray-500 text-sm", children: "No announcements yet. Use the controls above to test." })) : (_jsx("div", { className: "space-y-2", children: announcements.map((announcement, index) => (_jsx("div", { className: "text-sm text-gray-700 p-2 bg-white rounded border break-words", children: announcement }, index))) })) })] })] }), _jsxs(Card, { children: [_jsx("h3", { className: "text-xl font-semibold mb-4 break-words", children: "Accessibility Features Overview" }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h4", { className: "font-semibold mb-2 break-words", children: "High Contrast Support" }), _jsxs("ul", { className: "text-sm text-gray-600 space-y-1", children: [_jsx("li", { className: "break-words", children: "\u2022 Automatic system preference detection" }), _jsx("li", { className: "break-words", children: "\u2022 Enhanced color palettes for better visibility" }), _jsx("li", { className: "break-words", children: "\u2022 WCAG AAA contrast ratio compliance" }), _jsx("li", { className: "break-words", children: "\u2022 Border and text emphasis options" })] })] }), _jsxs("div", { className: "min-w-0", children: [_jsx("h4", { className: "font-semibold mb-2 break-words", children: "Motion Reduction" }), _jsxs("ul", { className: "text-sm text-gray-600 space-y-1", children: [_jsx("li", { className: "break-words", children: "\u2022 Respects user's motion preferences" }), _jsx("li", { className: "break-words", children: "\u2022 Reduces animation and transition durations" }), _jsx("li", { className: "break-words", children: "\u2022 Maintains essential motion for functionality" }), _jsx("li", { className: "break-words", children: "\u2022 Customizable reduction levels" })] })] }), _jsxs("div", { className: "min-w-0", children: [_jsx("h4", { className: "font-semibold mb-2 break-words", children: "Focus Management" }), _jsxs("ul", { className: "text-sm text-gray-600 space-y-1", children: [_jsx("li", { className: "break-words", children: "\u2022 Comprehensive focus tracking" }), _jsx("li", { className: "break-words", children: "\u2022 Focus trap implementation" }), _jsx("li", { className: "break-words", children: "\u2022 Focus restoration and history" }), _jsx("li", { className: "break-words", children: "\u2022 Keyboard navigation support" })] })] }), _jsxs("div", { className: "min-w-0", children: [_jsx("h4", { className: "font-semibold mb-2 break-words", children: "Screen Reader Optimization" }), _jsxs("ul", { className: "text-sm text-gray-600 space-y-1", children: [_jsx("li", { className: "break-words", children: "\u2022 Live region announcements" }), _jsx("li", { className: "break-words", children: "\u2022 Priority-based messaging" }), _jsx("li", { className: "break-words", children: "\u2022 Context-aware information" }), _jsx("li", { className: "break-words", children: "\u2022 Comprehensive ARIA support" })] })] })] })] })] }));
+};

package/dist/components/ui/accessibility-demo.js

@@ -0,0 +1,95 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+;
+import { Card } from './card.js';
+import { Button } from './button.js';
+import { Badge } from './badge.js';
+import { Input } from './input.js';
+import { accessibilityManager } from '../../themes/accessibility.js';
+import { screenReaderOptimizer } from '../../themes/screen-reader.js';
+import { highContrastThemeManager } from '../../themes/high-contrast.js';
+import { focusManager } from '../../themes/focus-management.js';
+import { motionReductionManager } from '../../themes/motion-reduction.js';
+import { ARIAUtils as AriaPatternGenerator } from '../../themes/aria-patterns.js';
+export const AccessibilityDemo = ({ className = '' }) => {
+    const [currentFocus, setCurrentFocus] = useState('');
+    const [announcements, setAnnouncements] = useState([]);
+    const [accessibilityConfig, setAccessibilityConfig] = useState(accessibilityManager.getConfig());
+    const [highContrastEnabled, setHighContrastEnabled] = useState(highContrastThemeManager.isHighContrastEnabled());
+    const [motionReduced, setMotionReduced] = useState(motionReductionManager.isMotionReduced());
+    useEffect(() => {
+        // Subscribe to accessibility changes
+        const unsubscribeAccessibility = accessibilityManager.subscribe(() => {
+            setAccessibilityConfig(accessibilityManager.getConfig());
+        });
+        // Update state periodically since some managers don't have subscribe methods
+        const interval = setInterval(() => {
+            setHighContrastEnabled(highContrastThemeManager.isHighContrastEnabled());
+            setMotionReduced(motionReductionManager.isMotionReduced());
+            const focusInfo = focusManager.getCurrentFocusInfo();
+            if (focusInfo.element) {
+                setCurrentFocus(focusInfo.element.textContent || focusInfo.element.tagName);
+            }
+        }, 1000);
+        return () => {
+            unsubscribeAccessibility();
+            clearInterval(interval);
+        };
+    }, []);
+    const addAnnouncement = (message) => {
+        setAnnouncements(prev => [message, ...prev.slice(0, 9)]);
+    };
+    const toggleHighContrast = () => {
+        if (highContrastEnabled) {
+            highContrastThemeManager.disable();
+            addAnnouncement('High contrast mode disabled');
+        }
+        else {
+            highContrastThemeManager.enable();
+            addAnnouncement('High contrast mode enabled');
+        }
+    };
+    const toggleMotionReduction = () => {
+        if (motionReduced) {
+            motionReductionManager.disable();
+            addAnnouncement('Motion reduction disabled');
+        }
+        else {
+            motionReductionManager.enable();
+            addAnnouncement('Motion reduction enabled');
+        }
+    };
+    const testScreenReaderAnnouncement = () => {
+        const message = 'This is a test announcement for screen readers';
+        screenReaderOptimizer.announce(message, 'normal');
+        addAnnouncement(`Announced: ${message}`);
+    };
+    const testFocusManagement = () => {
+        const container = document.getElementById('accessibility-demo-container');
+        if (container) {
+            // Focus management is already active by default
+            addAnnouncement('Focus management is active for this container');
+        }
+    };
+    const testAriaPatterns = () => {
+        const button = document.getElementById('test-aria-button');
+        if (button) {
+            const ariaProps = AriaPatternGenerator.generateAriaAttributes({
+                disabled: false,
+                readonly: false,
+                required: true,
+                invalid: false,
+                label: 'Test button for ARIA patterns',
+                describedby: 'button-description'
+            });
+            Object.entries(ariaProps).forEach(([key, value]) => {
+                if (value !== undefined) {
+                    button.setAttribute(key, String(value));
+                }
+            });
+            addAnnouncement('ARIA patterns applied to test button');
+        }
+    };
+    return (_jsxs("div", { id: "accessibility-demo-container", className: `accessibility-demo ${className} max-w-full overflow-hidden`, children: [_jsxs(Card, { className: "mb-6", children: [_jsx("h2", { className: "text-2xl font-bold mb-4 break-words", children: "Accessibility Features Demo" }), _jsx("p", { className: "text-gray-600 mb-4 break-words", children: "This component demonstrates all the accessibility features implemented in the design system." }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 mb-6", children: [_jsxs("div", { className: "p-4 bg-gray-50 rounded-lg", children: [_jsx("h3", { className: "font-semibold mb-2", children: "Current Focus" }), _jsx("p", { className: "text-sm text-gray-600 break-words", children: currentFocus || 'No focus' })] }), _jsxs("div", { className: "p-4 bg-gray-50 rounded-lg", children: [_jsx("h3", { className: "font-semibold mb-2", children: "High Contrast" }), _jsx(Badge, { variant: highContrastEnabled ? 'default' : 'secondary', children: highContrastEnabled ? 'Enabled' : 'Disabled' })] }), _jsxs("div", { className: "p-4 bg-gray-50 rounded-lg", children: [_jsx("h3", { className: "font-semibold mb-2", children: "Motion Reduction" }), _jsx(Badge, { variant: motionReduced ? 'destructive' : 'secondary', children: motionReduced ? 'Enabled' : 'Disabled' })] })] }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h3", { className: "font-semibold mb-3 break-words", children: "Accessibility Controls" }), _jsxs("div", { className: "space-y-3", children: [_jsxs(Button, { onClick: toggleHighContrast, variant: "outline", className: "w-full", children: [highContrastEnabled ? 'Disable' : 'Enable', " High Contrast"] }), _jsxs(Button, { onClick: toggleMotionReduction, variant: "outline", className: "w-full", children: [motionReduced ? 'Disable' : 'Enable', " Motion Reduction"] }), _jsx(Button, { onClick: testScreenReaderAnnouncement, variant: "outline", className: "w-full", children: "Test Screen Reader Announcement" }), _jsx(Button, { onClick: testFocusManagement, variant: "outline", className: "w-full", children: "Activate Focus Management" }), _jsx(Button, { onClick: testAriaPatterns, variant: "outline", className: "w-full", children: "Test ARIA Patterns" })] })] }), _jsxs("div", { className: "min-w-0", children: [_jsx("h3", { className: "font-semibold mb-3 break-words", children: "Test Interactive Elements" }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { placeholder: "Test input field", "aria-label": "Test input for accessibility", "aria-describedby": "input-description" }), _jsx("p", { id: "input-description", className: "text-sm text-gray-500 break-words", children: "This input field has proper ARIA labels and descriptions." }), _jsx(Button, { id: "test-aria-button", variant: "default", "aria-describedby": "button-description", children: "Test Button" }), _jsx("p", { id: "button-description", className: "text-sm text-gray-500 break-words", children: "This button will have ARIA patterns applied when you click the test button above." })] })] })] }), _jsxs("div", { className: "mb-6", children: [_jsx("h3", { className: "font-semibold mb-3", children: "Current Accessibility Configuration" }), _jsx("div", { className: "bg-blue-50 p-4 rounded-lg border-2 border-blue-300", children: _jsxs("div", { className: "text-sm text-blue-800", children: [_jsxs("p", { className: "mb-2", children: [_jsx("strong", { children: "High Contrast:" }), " ", accessibilityConfig.highContrast ? '✅ Enabled' : '❌ Disabled'] }), _jsxs("p", { className: "mb-2", children: [_jsx("strong", { children: "Reduced Motion:" }), " ", accessibilityConfig.reducedMotion ? '✅ Enabled' : '❌ Disabled'] }), _jsxs("p", { className: "mb-2", children: [_jsx("strong", { children: "Focus Visible:" }), " ", accessibilityConfig.focusVisible ? '✅ Enabled' : '❌ Disabled'] }), _jsxs("p", { className: "mb-2", children: [_jsx("strong", { children: "Contrast Target:" }), " ", accessibilityConfig.contrast.target, ":1 ratio"] }), _jsxs("p", { className: "mb-0", children: [_jsx("strong", { children: "Touch Target Size:" }), " ", accessibilityConfig.spacing.touchTarget] })] }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold mb-3", children: "Recent Screen Reader Announcements" }), _jsx("div", { className: "bg-gray-50 p-4 rounded-lg max-h-40 overflow-y-auto", children: announcements.length === 0 ? (_jsx("p", { className: "text-gray-500 text-sm", children: "No announcements yet. Use the controls above to test." })) : (_jsx("div", { className: "space-y-2", children: announcements.map((announcement, index) => (_jsx("div", { className: "text-sm text-gray-700 p-2 bg-white rounded border break-words", children: announcement }, index))) })) })] })] }), _jsxs(Card, { children: [_jsx("h3", { className: "text-xl font-semibold mb-4 break-words", children: "Accessibility Features Overview" }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h4", { className: "font-semibold mb-2 break-words", children: "High Contrast Support" }), _jsxs("ul", { className: "text-sm text-gray-600 space-y-1", children: [_jsx("li", { className: "break-words", children: "\u2022 Automatic system preference detection" }), _jsx("li", { className: "break-words", children: "\u2022 Enhanced color palettes for better visibility" }), _jsx("li", { className: "break-words", children: "\u2022 WCAG AAA contrast ratio compliance" }), _jsx("li", { className: "break-words", children: "\u2022 Border and text emphasis options" })] })] }), _jsxs("div", { className: "min-w-0", children: [_jsx("h4", { className: "font-semibold mb-2 break-words", children: "Motion Reduction" }), _jsxs("ul", { className: "text-sm text-gray-600 space-y-1", children: [_jsx("li", { className: "break-words", children: "\u2022 Respects user's motion preferences" }), _jsx("li", { className: "break-words", children: "\u2022 Reduces animation and transition durations" }), _jsx("li", { className: "break-words", children: "\u2022 Maintains essential motion for functionality" }), _jsx("li", { className: "break-words", children: "\u2022 Customizable reduction levels" })] })] }), _jsxs("div", { className: "min-w-0", children: [_jsx("h4", { className: "font-semibold mb-2 break-words", children: "Focus Management" }), _jsxs("ul", { className: "text-sm text-gray-600 space-y-1", children: [_jsx("li", { className: "break-words", children: "\u2022 Comprehensive focus tracking" }), _jsx("li", { className: "break-words", children: "\u2022 Focus trap implementation" }), _jsx("li", { className: "break-words", children: "\u2022 Focus restoration and history" }), _jsx("li", { className: "break-words", children: "\u2022 Keyboard navigation support" })] })] }), _jsxs("div", { className: "min-w-0", children: [_jsx("h4", { className: "font-semibold mb-2 break-words", children: "Screen Reader Optimization" }), _jsxs("ul", { className: "text-sm text-gray-600 space-y-1", children: [_jsx("li", { className: "break-words", children: "\u2022 Live region announcements" }), _jsx("li", { className: "break-words", children: "\u2022 Priority-based messaging" }), _jsx("li", { className: "break-words", children: "\u2022 Context-aware information" }), _jsx("li", { className: "break-words", children: "\u2022 Comprehensive ARIA support" })] })] })] })] })] }));
+};

package/dist/components/ui/advanced-component-architecture-demo.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare const AdvancedComponentArchitectureDemo: React.FC;
+export default AdvancedComponentArchitectureDemo;
+//# sourceMappingURL=advanced-component-architecture-demo.d.ts.map

package/dist/components/ui/advanced-component-architecture-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"advanced-component-architecture-demo.d.ts","sourceRoot":"","sources":["../../../src/components/ui/advanced-component-architecture-demo.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,eAAO,MAAM,iCAAiC,EAAE,KAAK,CAAC,EAu4BrD,CAAA;AAED,eAAe,iCAAiC,CAAA"}