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

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@rakeyshgidwani/roger-ui-bank-theme-jeremy",
+  "version": "0.5.3",
+  "description": "Roger UI jeremy theme - Complete design system with components, styles, and utilities",
+  "keywords": [
+    "design-system",
+    "react",
+    "ui-components",
+    "theme",
+    "jeremy",
+    "typescript",
+    "css-variables",
+    "accessibility"
+  ],
+  "author": "Roger UI Team",
+  "license": "MIT",
+  "homepage": "https://roger-ui.dev/themes/jeremy",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/roger-ui/packages.git",
+    "directory": "packages/theme-jeremy"
+  },
+  "bugs": {
+    "url": "https://github.com/roger-ui/packages/issues"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./dist/styles.css",
+    "./theme": {
+      "import": "./dist/theme.esm.js",
+      "require": "./dist/theme.js",
+      "types": "./dist/theme.d.ts"
+    },
+    "./provider": {
+      "import": "./dist/provider.esm.js",
+      "require": "./dist/provider.js",
+      "types": "./dist/provider.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/",
+    "src/",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": [
+    "*.css",
+    "./dist/styles.css"
+  ],
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-label": "^2.0.2",
+    "@heroicons/react": "^2.0.18",
+    "lucide-react": "^0.294.0",
+    "clsx": "^2.0.0",
+    "class-variance-authority": "^0.7.1",
+    "tailwind-merge": "^2.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/node": "^20.0.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "engines": {
+    "node": ">=18.0.0",
+    "npm": ">=8.0.0"
+  },
+  "browserslist": [
+    "defaults",
+    "not ie 11",
+    "not dead"
+  ]
+}

package/src/components/ui/accessibility-demo.tsx

@@ -0,0 +1,274 @@
+'use client'
+
+import * as React from 'react';
+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';
+
+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);
+    };
+  }, []);
+
+  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));
+        }
+      });
+      
+      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>
+  );
+};