@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.10 → 0.2.16

package/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 All notable changes to the stan-design theme package will be documented in this file.
 
-## [0.2.10] - 2025-10-02
+## [0.2.16] - 2025-10-03
 
 ### Added
 - Initial release of stan-design theme package

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

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
 import { Card } from './card';
 import { Button } from './button';
 import { Badge } from './badge';
@@ -9,263 +10,84 @@ import { highContrastThemeManager } from '../../themes/high-contrast';
 import { focusManager } from '../../themes/focus-management';
 import { motionReductionManager } from '../../themes/motion-reduction';
 import { ARIAUtils as AriaPatternGenerator } from '../../themes/aria-patterns';
-
-interface AccessibilityDemoProps {
-  className?: string;
-}
-
-export const AccessibilityDemo: React.FC<AccessibilityDemoProps> = ({ className = '' }) => {
-  const [currentFocus, setCurrentFocus] = useState<string>('');
-  const [announcements, setAnnouncements] = useState<string[]>([]);
-  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);
+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 addAnnouncement = (message: string) => {
-    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));
+    const toggleHighContrast = () => {
+        if (highContrastEnabled) {
+            highContrastThemeManager.disable();
+            addAnnouncement('High contrast mode disabled');
         }
-      });
-      
-      addAnnouncement('ARIA patterns applied to test button');
-    }
-  };
-
-  return (
-    <div id="accessibility-demo-container" className={`accessibility-demo ${className} max-w-full overflow-hidden`}>
-      <Card className="mb-6">
-        <h2 className="text-2xl font-bold mb-4 break-words">Accessibility Features Demo</h2>
-        <p className="text-gray-600 mb-4 break-words">
-          This component demonstrates all the accessibility features implemented in the design system.
-        </p>
-        
-        {/* Current Status */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-          <div className="p-4 bg-gray-50 rounded-lg">
-            <h3 className="font-semibold mb-2">Current Focus</h3>
-            <p className="text-sm text-gray-600 break-words">{currentFocus || 'No focus'}</p>
-          </div>
-          
-          <div className="p-4 bg-gray-50 rounded-lg">
-            <h3 className="font-semibold mb-2">High Contrast</h3>
-            <Badge variant={highContrastEnabled ? 'default' : 'secondary'}>
-              {highContrastEnabled ? 'Enabled' : 'Disabled'}
-            </Badge>
-          </div>
-          
-          <div className="p-4 bg-gray-50 rounded-lg">
-            <h3 className="font-semibold mb-2">Motion Reduction</h3>
-            <Badge variant={motionReduced ? 'destructive' : 'secondary'}>
-              {motionReduced ? 'Enabled' : 'Disabled'}
-            </Badge>
-          </div>
-        </div>
-
-        {/* Accessibility Controls */}
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
-          <div className="min-w-0">
-            <h3 className="font-semibold mb-3 break-words">Accessibility Controls</h3>
-            <div className="space-y-3">
-              <Button onClick={toggleHighContrast} variant="outline" className="w-full">
-                {highContrastEnabled ? 'Disable' : 'Enable'} High Contrast
-              </Button>
-              
-              <Button onClick={toggleMotionReduction} variant="outline" className="w-full">
-                {motionReduced ? 'Disable' : 'Enable'} Motion Reduction
-              </Button>
-              
-              <Button onClick={testScreenReaderAnnouncement} variant="outline" className="w-full">
-                Test Screen Reader Announcement
-              </Button>
-              
-              <Button onClick={testFocusManagement} variant="outline" className="w-full">
-                Activate Focus Management
-              </Button>
-              
-              <Button onClick={testAriaPatterns} variant="outline" className="w-full">
-                Test ARIA Patterns
-              </Button>
-            </div>
-          </div>
-
-          <div className="min-w-0">
-            <h3 className="font-semibold mb-3 break-words">Test Interactive Elements</h3>
-            <div className="space-y-3">
-              <Input
-                placeholder="Test input field"
-                aria-label="Test input for accessibility"
-                aria-describedby="input-description"
-              />
-              <p id="input-description" className="text-sm text-gray-500 break-words">
-                This input field has proper ARIA labels and descriptions.
-              </p>
-              
-              <Button
-                id="test-aria-button"
-                variant="default"
-                aria-describedby="button-description"
-              >
-                Test Button
-              </Button>
-              <p id="button-description" className="text-sm text-gray-500 break-words">
-                This button will have ARIA patterns applied when you click the test button above.
-              </p>
-            </div>
-          </div>
-        </div>
-
-        {/* Accessibility Configuration */}
-        <div className="mb-6">
-          <h3 className="font-semibold mb-3">Current Accessibility Configuration</h3>
-          <div className="bg-blue-50 p-4 rounded-lg border-2 border-blue-300">
-            <div className="text-sm text-blue-800">
-              <p className="mb-2"><strong>High Contrast:</strong> {accessibilityConfig.highContrast ? '✅ Enabled' : '❌ Disabled'}</p>
-              <p className="mb-2"><strong>Reduced Motion:</strong> {accessibilityConfig.reducedMotion ? '✅ Enabled' : '❌ Disabled'}</p>
-              <p className="mb-2"><strong>Focus Visible:</strong> {accessibilityConfig.focusVisible ? '✅ Enabled' : '❌ Disabled'}</p>
-              <p className="mb-2"><strong>Contrast Target:</strong> {accessibilityConfig.contrast.target}:1 ratio</p>
-              <p className="mb-0"><strong>Touch Target Size:</strong> {accessibilityConfig.spacing.touchTarget}</p>
-            </div>
-          </div>
-        </div>
-
-        {/* Recent Announcements */}
-        <div>
-          <h3 className="font-semibold mb-3">Recent Screen Reader Announcements</h3>
-          <div className="bg-gray-50 p-4 rounded-lg max-h-40 overflow-y-auto">
-            {announcements.length === 0 ? (
-              <p className="text-gray-500 text-sm">No announcements yet. Use the controls above to test.</p>
-            ) : (
-              <div className="space-y-2">
-                {announcements.map((announcement, index) => (
-                  <div key={index} className="text-sm text-gray-700 p-2 bg-white rounded border break-words">
-                    {announcement}
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
-      </Card>
-
-      {/* Accessibility Information */}
-      <Card>
-        <h3 className="text-xl font-semibold mb-4 break-words">Accessibility Features Overview</h3>
-        
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          <div className="min-w-0">
-            <h4 className="font-semibold mb-2 break-words">High Contrast Support</h4>
-            <ul className="text-sm text-gray-600 space-y-1">
-              <li className="break-words">• Automatic system preference detection</li>
-              <li className="break-words">• Enhanced color palettes for better visibility</li>
-              <li className="break-words">• WCAG AAA contrast ratio compliance</li>
-              <li className="break-words">• Border and text emphasis options</li>
-            </ul>
-          </div>
-          
-          <div className="min-w-0">
-            <h4 className="font-semibold mb-2 break-words">Motion Reduction</h4>
-            <ul className="text-sm text-gray-600 space-y-1">
-              <li className="break-words">• Respects user's motion preferences</li>
-              <li className="break-words">• Reduces animation and transition durations</li>
-              <li className="break-words">• Maintains essential motion for functionality</li>
-              <li className="break-words">• Customizable reduction levels</li>
-            </ul>
-          </div>
-          
-          <div className="min-w-0">
-            <h4 className="font-semibold mb-2 break-words">Focus Management</h4>
-            <ul className="text-sm text-gray-600 space-y-1">
-              <li className="break-words">• Comprehensive focus tracking</li>
-              <li className="break-words">• Focus trap implementation</li>
-              <li className="break-words">• Focus restoration and history</li>
-              <li className="break-words">• Keyboard navigation support</li>
-            </ul>
-          </div>
-          
-          <div className="min-w-0">
-            <h4 className="font-semibold mb-2 break-words">Screen Reader Optimization</h4>
-            <ul className="text-sm text-gray-600 space-y-1">
-              <li className="break-words">• Live region announcements</li>
-              <li className="break-words">• Priority-based messaging</li>
-              <li className="break-words">• Context-aware information</li>
-              <li className="break-words">• Comprehensive ARIA support</li>
-            </ul>
-          </div>
-        </div>
-      </Card>
-    </div>
-  );
+        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" })] })] })] })] })] }));
 };