@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.9 → 0.2.11

package/CHANGELOG.md

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

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

@@ -11,10 +11,10 @@ import { motionReductionManager } from '../../themes/motion-reduction';
 import { ARIAUtils as AriaPatternGenerator } from '../../themes/aria-patterns';
 
 interface AccessibilityDemoProps {
-  className?;
+  className?: string;
 }
 
-export const AccessibilityDemo= ({ className = '' }) => {
+export const AccessibilityDemo: React.FC<AccessibilityDemoProps> = ({ className = '' }) => {
   const [currentFocus, setCurrentFocus] = useState<string>('');
   const [announcements, setAnnouncements] = useState<string[]>([]);
   const [accessibilityConfig, setAccessibilityConfig] = useState(accessibilityManager.getConfig());
@@ -44,7 +44,7 @@ export const AccessibilityDemo= ({ className = '' }) => {
     };
   }, []);
 
-  const addAnnouncement = (message) => {
+  const addAnnouncement = (message: string) => {
     setAnnouncements(prev => [message, ...prev.slice(0, 9)]);
   };
 
@@ -71,7 +71,7 @@ export const AccessibilityDemo= ({ className = '' }) => {
   const testScreenReaderAnnouncement = () => {
     const message = 'This is a test announcement for screen readers';
     screenReaderOptimizer.announce(message, 'normal');
-    addAnnouncement(`Announced}`);
+    addAnnouncement(`Announced: ${message}`);
   };
 
   const testFocusManagement = () => {
@@ -86,12 +86,13 @@ export const AccessibilityDemo= ({ className = '' }) => {
     const button = document.getElementById('test-aria-button');
     if (button) {
       const ariaProps = AriaPatternGenerator.generateAriaAttributes({
-        disabled,
-        readonly,
-        required,
-        invalid,
-        label,
-        describedby});
+        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) {
@@ -112,36 +113,38 @@ export const AccessibilityDemo= ({ className = '' }) => {
         </p>
         
         {/* Current Status */}
-        <div className="grid grid-cols-1 md="p-4 bg-gray-50 rounded-lg">
+        <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' }>
-              {highContrastEnabled ? 'Enabled' }
+            <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' }>
-              {motionReduced ? 'Enabled' }
+            <Badge variant={motionReduced ? 'destructive' : 'secondary'}>
+              {motionReduced ? 'Enabled' : 'Disabled'}
             </Badge>
           </div>
         </div>
 
         {/* Accessibility Controls */}
-        <div className="grid grid-cols-1 lg="min-w-0">
+        <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' } High Contrast
+                {highContrastEnabled ? 'Disable' : 'Enable'} High Contrast
               </Button>
               
               <Button onClick={toggleMotionReduction} variant="outline" className="w-full">
-                {motionReduced ? 'Disable' } Motion Reduction
+                {motionReduced ? 'Disable' : 'Enable'} Motion Reduction
               </Button>
               
               <Button onClick={testScreenReaderAnnouncement} variant="outline" className="w-full">
@@ -189,10 +192,11 @@ export const AccessibilityDemo= ({ className = '' }) => {
           <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}</p>
-              <p className="mb-2"><strong>Reduced Motion}</p>
-              <p className="mb-2"><strong>Focus Visible}</p>
-              <p className="mb-2"><strong>Contrast Target}="mb-0"><strong>Touch Target Size}</p>
+              <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>
@@ -203,7 +207,8 @@ export const AccessibilityDemo= ({ className = '' }) => {
           <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>
-            ) ="space-y-2">
+            ) : (
+              <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}
@@ -219,7 +224,8 @@ export const AccessibilityDemo= ({ className = '' }) => {
       <Card>
         <h3 className="text-xl font-semibold mb-4 break-words">Accessibility Features Overview</h3>
         
-        <div className="grid grid-cols-1 lg="min-w-0">
+        <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>

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

@@ -11,10 +11,10 @@ import { motionReductionManager } from '../../themes/motion-reduction';
 import { ARIAUtils as AriaPatternGenerator } from '../../themes/aria-patterns';
 
 interface AccessibilityDemoProps {
-  className?;
+  className?: string;
 }
 
-export const AccessibilityDemo= ({ className = '' }) => {
+export const AccessibilityDemo: React.FC<AccessibilityDemoProps> = ({ className = '' }) => {
   const [currentFocus, setCurrentFocus] = useState<string>('');
   const [announcements, setAnnouncements] = useState<string[]>([]);
   const [accessibilityConfig, setAccessibilityConfig] = useState(accessibilityManager.getConfig());
@@ -44,7 +44,7 @@ export const AccessibilityDemo= ({ className = '' }) => {
     };
   }, []);
 
-  const addAnnouncement = (message) => {
+  const addAnnouncement = (message: string) => {
     setAnnouncements(prev => [message, ...prev.slice(0, 9)]);
   };
 
@@ -71,7 +71,7 @@ export const AccessibilityDemo= ({ className = '' }) => {
   const testScreenReaderAnnouncement = () => {
     const message = 'This is a test announcement for screen readers';
     screenReaderOptimizer.announce(message, 'normal');
-    addAnnouncement(`Announced}`);
+    addAnnouncement(`Announced: ${message}`);
   };
 
   const testFocusManagement = () => {
@@ -86,12 +86,13 @@ export const AccessibilityDemo= ({ className = '' }) => {
     const button = document.getElementById('test-aria-button');
     if (button) {
       const ariaProps = AriaPatternGenerator.generateAriaAttributes({
-        disabled,
-        readonly,
-        required,
-        invalid,
-        label,
-        describedby});
+        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) {
@@ -112,36 +113,38 @@ export const AccessibilityDemo= ({ className = '' }) => {
         </p>
         
         {/* Current Status */}
-        <div className="grid grid-cols-1 md="p-4 bg-gray-50 rounded-lg">
+        <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' }>
-              {highContrastEnabled ? 'Enabled' }
+            <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' }>
-              {motionReduced ? 'Enabled' }
+            <Badge variant={motionReduced ? 'destructive' : 'secondary'}>
+              {motionReduced ? 'Enabled' : 'Disabled'}
             </Badge>
           </div>
         </div>
 
         {/* Accessibility Controls */}
-        <div className="grid grid-cols-1 lg="min-w-0">
+        <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' } High Contrast
+                {highContrastEnabled ? 'Disable' : 'Enable'} High Contrast
               </Button>
               
               <Button onClick={toggleMotionReduction} variant="outline" className="w-full">
-                {motionReduced ? 'Disable' } Motion Reduction
+                {motionReduced ? 'Disable' : 'Enable'} Motion Reduction
               </Button>
               
               <Button onClick={testScreenReaderAnnouncement} variant="outline" className="w-full">
@@ -189,10 +192,11 @@ export const AccessibilityDemo= ({ className = '' }) => {
           <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}</p>
-              <p className="mb-2"><strong>Reduced Motion}</p>
-              <p className="mb-2"><strong>Focus Visible}</p>
-              <p className="mb-2"><strong>Contrast Target}="mb-0"><strong>Touch Target Size}</p>
+              <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>
@@ -203,7 +207,8 @@ export const AccessibilityDemo= ({ className = '' }) => {
           <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>
-            ) ="space-y-2">
+            ) : (
+              <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}
@@ -219,7 +224,8 @@ export const AccessibilityDemo= ({ className = '' }) => {
       <Card>
         <h3 className="text-xl font-semibold mb-4 break-words">Accessibility Features Overview</h3>
         
-        <div className="grid grid-cols-1 lg="min-w-0">
+        <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>