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

package/dist/components/ui/font-preview.js

@@ -5,13 +5,13 @@ import { useTheme } from '../../themes';
 import { FontConfig } from '../../themes/types';
 
 export interface FontPreviewProps {
-  fontConfig?;
-  fontType?;
-  showAllVariations?;
-  className?;
+  fontConfig?: FontConfig;
+  fontType?: 'primary' | 'secondary' | 'display' | 'body' | 'mono';
+  showAllVariations?: boolean;
+  className?: string;
 }
 
-export const FontPreview= ({
+export const FontPreview: React.FC<FontPreviewProps> = ({
   fontConfig,
   fontType = 'primary',
   showAllVariations = false,
@@ -37,7 +37,7 @@ export const FontPreview= ({
   // Build full font family string with fallbacks
   const fullFontFamily = fallbacks 
     ? `${family}, ${fallbacks.join(', ')}`
-    ;
+    : family;
 
   // Sample text for preview
   const sampleText = "The quick brown fox jumps over the lazy dog";
@@ -64,7 +64,7 @@ export const FontPreview= ({
           <span className="font-mono text-xs">{family}</span>
           {fallbacks && fallbacks.length > 0 && (
             <div className="mt-1 text-xs text-muted-foreground">
-              Fallbacks, 3).join(', ')}
+              Fallbacks: {fallbacks.slice(0, 3).join(', ')}
               {fallbacks.length > 3 && ` (+${fallbacks.length - 3} more)`}
             </div>
           )}
@@ -83,9 +83,10 @@ export const FontPreview= ({
                 </Badge>
                 <p 
                   style={{ 
-                    fontFamily,
-                    fontWeight,
-                    fontSize}}
+                    fontFamily: fullFontFamily,
+                    fontWeight: weight,
+                    fontSize: sizes?.md || '1rem'
+                  }}
                   className="flex-1"
                 >
                   {sampleText}
@@ -109,9 +110,9 @@ export const FontPreview= ({
                     <span className="text-xs text-muted-foreground w-16">{value}</span>
                     <p 
                       style={{ 
-                        fontFamily,
-                        fontSize,
-                        fontWeight] || 400
+                        fontFamily: fullFontFamily,
+                        fontSize: value,
+                        fontWeight: weights?.[0] || 400
                       }}
                     >
                       Sample text
@@ -135,10 +136,10 @@ export const FontPreview= ({
                     </div>
                     <p 
                       style={{ 
-                        fontFamily,
-                        fontSize,
-                        lineHeight,
-                        fontWeight] || 400
+                        fontFamily: fullFontFamily,
+                        fontSize: sizes?.md || '1rem',
+                        lineHeight: value,
+                        fontWeight: weights?.[0] || 400
                       }}
                       className="text-sm border-l-2 border-muted pl-4"
                     >
@@ -163,10 +164,10 @@ export const FontPreview= ({
                     <span className="text-xs text-muted-foreground w-16">{value}</span>
                     <p 
                       style={{ 
-                        fontFamily,
-                        fontSize,
-                        letterSpacing,
-                        fontWeight] || 400
+                        fontFamily: fullFontFamily,
+                        fontSize: sizes?.md || '1rem',
+                        letterSpacing: value,
+                        fontWeight: weights?.[0] || 400
                       }}
                       className="flex-1"
                     >
@@ -187,9 +188,9 @@ export const FontPreview= ({
               <span className="text-xs text-muted-foreground block mb-1">Alphabet</span>
               <p 
                 style={{ 
-                  fontFamily,
-                  fontSize,
-                  fontWeight] || 400
+                  fontFamily: fullFontFamily,
+                  fontSize: sizes?.md || '1rem',
+                  fontWeight: weights?.[0] || 400
                 }}
                 className="text-sm"
               >
@@ -201,10 +202,11 @@ export const FontPreview= ({
               <span className="text-xs text-muted-foreground block mb-1">Numbers</span>
               <p 
                 style={{ 
-                  fontFamily,
-                  fontSize,
-                  fontWeight] || 400,
-                  letterSpacing}}
+                  fontFamily: fullFontFamily,
+                  fontSize: sizes?.lg || '1.125rem',
+                  fontWeight: weights?.[0] || 400,
+                  letterSpacing: letterSpacing?.wide || '0.025em'
+                }}
                 className="text-sm"
               >
                 {sampleNumbers}
@@ -215,9 +217,9 @@ export const FontPreview= ({
               <span className="text-xs text-muted-foreground block mb-1">Special Characters</span>
               <p 
                 style={{ 
-                  fontFamily,
-                  fontSize,
-                  fontWeight] || 400
+                  fontFamily: fullFontFamily,
+                  fontSize: sizes?.sm || '0.875rem',
+                  fontWeight: weights?.[0] || 400
                 }}
                 className="text-sm"
               >
@@ -232,15 +234,15 @@ export const FontPreview= ({
           <div className="pt-4 border-t">
             <h4 className="text-sm font-medium mb-2">Font Loading</h4>
             <div className="space-y-1 text-xs text-muted-foreground">
-              <div>Source="capitalize">{source.type}</span></div>
-              {source.url && <div>URL}</div>}
+              <div>Source: <span className="capitalize">{source.type}</span></div>
+              {source.url && <div>URL: {source.url}</div>}
               {source.files && (
                 <div>
-                  Files).join(', ')}
+                  Files: {Object.keys(source.files).join(', ')}
                 </div>
               )}
               {config.display && (
-                <div>Display}</div>
+                <div>Display: {config.display}</div>
               )}
             </div>
           </div>
@@ -252,11 +254,11 @@ export const FontPreview= ({
 
 // Multi-font preview component
 export interface FontShowcaseProps {
-  showAllVariations?;
-  className?;
+  showAllVariations?: boolean;
+  className?: string;
 }
 
-export const FontShowcase= ({
+export const FontShowcase: React.FC<FontShowcaseProps> = ({
   showAllVariations = false,
   className = ''
 }) => {
@@ -270,7 +272,7 @@ export const FontShowcase= ({
     );
   }
 
-  const fontTypes= ['primary', 'secondary', 'display', 'body', 'mono'];
+  const fontTypes: Array<keyof typeof currentThemeConfig.fonts> = ['primary', 'secondary', 'display', 'body', 'mono'];
 
   return (
     <div className={`space-y-6 ${className}`}>

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

@@ -7,9 +7,9 @@ import MobileFormValidation, { MobileFormValidationRef } from './mobile-form-val
 
 import { InputType } from '../../hooks/use-semantic-input'
 
-export const FormDemo= () => {
+export const FormDemo: React.FC = () => {
   const [activeTab, setActiveTab] = useState<'basic' | 'advanced' | 'performance' | 'semantic'>('basic')
-  const [formResults, setFormResults] = useState<Array<{ type; data; timestamp}>>([])
+  const [formResults, setFormResults] = useState<Array<{ type: string; data: any; timestamp: Date }>>([])
   const [enableEnhancedFeatures, setEnableEnhancedFeatures] = useState(true)
   
   const basicFormRef = useRef<MobileFormValidationRef>(null)
@@ -18,21 +18,23 @@ export const FormDemo= () => {
   // Basic form fields
   const basicFields = [
     {
-      name,
-      label,
-      type} as InputType,
-      placeholder,
-      rules, message},
-        { type, value, message}
+      name: 'name',
+      label: 'Full Name',
+      type: { type: 'text' } as InputType,
+      placeholder: 'Enter your full name',
+      rules: [
+        { type: 'required' as const, message: 'Name is required' },
+        { type: 'minLength' as const, value: 2, message: 'Name must be at least 2 characters' }
       ]
     },
     {
-      name,
-      label,
-      type} as InputType,
-      placeholder,
-      rules, message},
-        { type, message}
+      name: 'email',
+      label: 'Email Address',
+      type: { type: 'email' } as InputType,
+      placeholder: 'Enter your email',
+      rules: [
+        { type: 'required' as const, message: 'Email is required' },
+        { type: 'email' as const, message: 'Please enter a valid email address' }
       ]
     }
   ]
@@ -40,91 +42,99 @@ export const FormDemo= () => {
   // Advanced form fields
   const advancedFields = [
     {
-      name,
-      label,
-      type} as InputType,
-      placeholder,
-      rules, message},
-        { type, value, message},
-        { type, value, message}
+      name: 'fullName',
+      label: 'Full Name',
+      type: { type: 'text' } as InputType,
+      placeholder: 'Enter your full name',
+      rules: [
+        { type: 'required' as const, message: 'Full name is required' },
+        { type: 'minLength' as const, value: 3, message: 'Name must be at least 3 characters' },
+        { type: 'maxLength' as const, value: 50, message: 'Name must be less than 50 characters' }
       ]
     },
     {
-      name,
-      label,
-      type} as InputType,
-      placeholder,
-      rules, message},
-        { type, message}
+      name: 'emailAddress',
+      label: 'Email Address',
+      type: { type: 'email' } as InputType,
+      placeholder: 'Enter your email address',
+      rules: [
+        { type: 'required' as const, message: 'Email is required' },
+        { type: 'email' as const, message: 'Please enter a valid email address' }
       ]
     },
     {
-      name,
-      label,
-      type} as InputType,
-      placeholder,
-      rules, message},
-        { type, value]?[0-9\s\-\(\)]{7,}$/, message}
+      name: 'phoneNumber',
+      label: 'Phone Number',
+      type: { type: 'tel' } as InputType,
+      placeholder: 'Enter your phone number',
+      rules: [
+        { type: 'required' as const, message: 'Phone number is required' },
+        { type: 'pattern' as const, value: /^[\+]?[0-9\s\-\(\)]{7,}$/, message: 'Please enter a valid phone number' }
       ]
     },
     {
-      name,
-      label,
-      type} as InputType,
-      placeholder,
-      rules, value, message}
+      name: 'website',
+      label: 'Website',
+      type: { type: 'url' } as InputType,
+      placeholder: 'Enter your website URL',
+      rules: [
+        { type: 'pattern' as const, value: /^https?:\/\/.+/, message: 'Please enter a valid URL starting with http:// or https://' }
       ]
     },
     {
-      name,
-      label,
-      type} as InputType,
-      placeholder,
-      rules, message},
-        { type, value, message},
-        { type, value, message}
+      name: 'age',
+      label: 'Age',
+      type: { type: 'number' } as InputType,
+      placeholder: 'Enter your age',
+      rules: [
+        { type: 'required' as const, message: 'Age is required' },
+        { type: 'minLength' as const, value: 1, message: 'Age must be at least 1' },
+        { type: 'maxLength' as const, value: 3, message: 'Age must be less than 1000' }
       ]
     },
     {
-      name,
-      label,
-      type} as InputType,
-      placeholder,
-      rules, message},
-        { type, value, message},
-        { type, value=.*[a-z])(?=.*[A-Z])(?=.*\d)/, message, uppercase, and number' }
+      name: 'password',
+      label: 'Password',
+      type: { type: 'password' } as InputType,
+      placeholder: 'Enter your password',
+      rules: [
+        { type: 'required' as const, message: 'Password is required' },
+        { type: 'minLength' as const, value: 8, message: 'Password must be at least 8 characters' },
+        { type: 'pattern' as const, value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/, message: 'Password must contain lowercase, uppercase, and number' }
       ]
     },
     {
-      name,
-      label,
-      type} as InputType,
-      placeholder,
-      rules, message},
-        { type, message, validator)=> {
+      name: 'confirmPassword',
+      label: 'Confirm Password',
+      type: { type: 'password' } as InputType,
+      placeholder: 'Confirm your password',
+      rules: [
+        { type: 'required' as const, message: 'Please confirm your password' },
+        { type: 'custom' as const, message: 'Passwords do not match', validator: (value: any): boolean => {
           const passwordField = advancedFields.find(f => f.name === 'password')
-          const passwordValue = passwordField ? (document.getElementById('password') as HTMLInputElement)?.value === passwordValue
+          const passwordValue = passwordField ? (document.getElementById('password') as HTMLInputElement)?.value : ''
+          return value === passwordValue
         }}
       ]
     }
   ]
 
   // Handle form submission
-  const handleFormSubmit = (formData, any>, formType) => {
+  const handleFormSubmit = (formData: Record<string, any>, formType: string) => {
     const result = {
-      type,
-      data,
-      timestamp)
+      type: formType,
+      data: formData,
+      timestamp: new Date()
     }
     
     setFormResults(prev => [result, ...prev.slice(0, 9)]) // Keep last 10 results
     
-    console.log(`${formType} form submitted, formData)
+    console.log(`${formType} form submitted:`, formData)
   }
 
   // Handle form validation change
-  const handleValidationChange = (isValid, formType) => {
-    console.log(`${formType} form validation, isValid ? 'Valid' )
+  const handleValidationChange = (isValid: boolean, formType: string) => {
+    console.log(`${formType} form validation:`, isValid ? 'Valid' : 'Invalid')
   }
 
   // Clear form results
@@ -133,32 +143,38 @@ export const FormDemo= () => {
   }
 
   // Test form submission programmatically
-  const testFormSubmission = async (formType) => {
-    const formRef = formType === 'basic' ? basicFormRef ) {
+  const testFormSubmission = async (formType: 'basic' | 'advanced') => {
+    const formRef = formType === 'basic' ? basicFormRef : advancedFormRef
+    
+    if (formRef.current) {
       try {
         const result = await formRef.current.submit()
-        console.log(`${formType} form test submission, result)
+        console.log(`${formType} form test submission:`, result)
       } catch (error) {
-        console.error(`${formType} form test submission error, error)
+        console.error(`${formType} form test submission error:`, error)
       }
     }
   }
 
   // Test form validation programmatically
-  const testFormValidation = async (formType) => {
-    const formRef = formType === 'basic' ? basicFormRef ) {
+  const testFormValidation = async (formType: 'basic' | 'advanced') => {
+    const formRef = formType === 'basic' ? basicFormRef : advancedFormRef
+    
+    if (formRef.current) {
       try {
         const isValid = await formRef.current.validate()
-        console.log(`${formType} form validation test, isValid ? 'Valid' )
+        console.log(`${formType} form validation test:`, isValid ? 'Valid' : 'Invalid')
       } catch (error) {
-        console.error(`${formType} form validation test error, error)
+        console.error(`${formType} form validation test error:`, error)
       }
     }
   }
 
   // Test form reset programmatically
-  const testFormReset = (formType) => {
-    const formRef = formType === 'basic' ? basicFormRef ) {
+  const testFormReset = (formType: 'basic' | 'advanced') => {
+    const formRef = formType === 'basic' ? basicFormRef : advancedFormRef
+    
+    if (formRef.current) {
       formRef.current.reset()
       console.log(`${formType} form reset`)
     }
@@ -173,14 +189,20 @@ export const FormDemo= () => {
           Advanced form system with mobile validation, animated feedback, and performance optimization
         </p>
         <Badge variant="outline" className="text-sm">
-          Story 6}
+          Story 6: Advanced Form System with Mobile Validation
+        </Badge>
+      </div>
+
+      {/* Enhanced Features Toggle */}
       <div className="flex justify-center">
         <div className="flex items-center gap-2 p-3 bg-gray-50 rounded-lg">
-          <span className="text-sm font-medium">Enhanced Features={enableEnhancedFeatures ? 'default' }
+          <span className="text-sm font-medium">Enhanced Features:</span>
+          <Button
+            variant={enableEnhancedFeatures ? 'default' : 'outline'}
             size="sm"
             onClick={() => setEnableEnhancedFeatures(!enableEnhancedFeatures)}
           >
-            {enableEnhancedFeatures ? 'Enabled' }
+            {enableEnhancedFeatures ? 'Enabled' : 'Disabled'}
           </Button>
         </div>
       </div>
@@ -189,9 +211,10 @@ export const FormDemo= () => {
       <Tabs 
         tabs={[
           {
-            id,
-            label,
-            content="space-y-4">
+            id: 'basic',
+            label: 'Basic Form',
+            content: (
+              <div className="space-y-4">
                 <Card>
                   <CardHeader>
                     <CardTitle className="flex items-center gap-2">
@@ -243,9 +266,10 @@ export const FormDemo= () => {
             )
           },
           {
-            id,
-            label,
-            content="space-y-4">
+            id: 'advanced',
+            label: 'Advanced Form',
+            content: (
+              <div className="space-y-4">
                 <Card>
                   <CardHeader>
                     <CardTitle className="flex items-center gap-2">
@@ -297,9 +321,10 @@ export const FormDemo= () => {
             )
           },
           {
-            id,
-            label,
-            content="space-y-4">
+            id: 'performance',
+            label: 'Performance',
+            content: (
+              <div className="space-y-4">
                 <Card>
                   <CardHeader>
                     <CardTitle className="flex items-center gap-2">
@@ -311,25 +336,30 @@ export const FormDemo= () => {
                     </CardDescription>
                   </CardHeader>
                   <CardContent className="space-y-4">
-                    <div className="grid grid-cols-1 md="space-y-3">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                      <div className="space-y-3">
                         <h4 className="font-semibold">Performance Features</h4>
                         <div className="space-y-2 text-sm">
                           <div className="flex justify-between">
-                            <span>Validation Throttling="default">Enabled</Badge>
+                            <span>Validation Throttling:</span>
+                            <Badge variant="default">Enabled</Badge>
                           </div>
                           <div className="flex justify-between">
-                            <span>Touch Event Optimization={enableEnhancedFeatures ? 'default' }>
-                              {enableEnhancedFeatures ? 'Enabled' }
+                            <span>Touch Event Optimization:</span>
+                            <Badge variant={enableEnhancedFeatures ? 'default' : 'secondary'}>
+                              {enableEnhancedFeatures ? 'Enabled' : 'Disabled'}
                             </Badge>
                           </div>
                           <div className="flex justify-between">
-                            <span>Memory Management={enableEnhancedFeatures ? 'default' }>
-                              {enableEnhancedFeatures ? 'Enabled' }
+                            <span>Memory Management:</span>
+                            <Badge variant={enableEnhancedFeatures ? 'default' : 'secondary'}>
+                              {enableEnhancedFeatures ? 'Enabled' : 'Disabled'}
                             </Badge>
                           </div>
                           <div className="flex justify-between">
-                            <span>Battery Optimization={enableEnhancedFeatures ? 'default' }>
-                              {enableEnhancedFeatures ? 'Enabled' }
+                            <span>Battery Optimization:</span>
+                            <Badge variant={enableEnhancedFeatures ? 'default' : 'secondary'}>
+                              {enableEnhancedFeatures ? 'Enabled' : 'Disabled'}
                             </Badge>
                           </div>
                         </div>
@@ -363,9 +393,10 @@ export const FormDemo= () => {
             )
           },
           {
-            id,
-            label,
-            content="space-y-4">
+            id: 'semantic',
+            label: 'Semantic Input',
+            content: (
+              <div className="space-y-4">
                 <Card>
                   <CardHeader>
                     <CardTitle className="flex items-center gap-2">
@@ -377,24 +408,29 @@ export const FormDemo= () => {
                     </CardDescription>
                   </CardHeader>
                   <CardContent className="space-y-4">
-                    <div className="grid grid-cols-1 md="space-y-3">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                      <div className="space-y-3">
                         <h4 className="font-semibold">Semantic Features</h4>
                         <div className="space-y-2 text-sm">
                           <div className="flex justify-between">
-                            <span>Auto Type Detection="default">Enabled</Badge>
+                            <span>Auto Type Detection:</span>
+                            <Badge variant="default">Enabled</Badge>
                           </div>
                           <div className="flex justify-between">
-                            <span>Keyboard Optimization={enableEnhancedFeatures ? 'default' }>
-                              {enableEnhancedFeatures ? 'Enabled' }
+                            <span>Keyboard Optimization:</span>
+                            <Badge variant={enableEnhancedFeatures ? 'default' : 'secondary'}>
+                              {enableEnhancedFeatures ? 'Enabled' : 'Disabled'}
                             </Badge>
                           </div>
                           <div className="flex justify-between">
-                            <span>Autocomplete Enhancement={enableEnhancedFeatures ? 'default' }>
-                              {enableEnhancedFeatures ? 'Enabled' }
+                            <span>Autocomplete Enhancement:</span>
+                            <Badge variant={enableEnhancedFeatures ? 'default' : 'secondary'}>
+                              {enableEnhancedFeatures ? 'Enabled' : 'Disabled'}
                             </Badge>
                           </div>
                           <div className="flex justify-between">
-                            <span>Touch Optimization="default">Enabled</Badge>
+                            <span>Touch Optimization:</span>
+                            <Badge variant="default">Enabled</Badge>
                           </div>
                         </div>
                       </div>
@@ -402,11 +438,11 @@ export const FormDemo= () => {
                       <div className="space-y-3">
                         <h4 className="font-semibold">Detection Examples</h4>
                         <div className="space-y-2 text-sm text-gray-600">
-                          <p>• <strong>Email, sets email keyboard</p>
-                          <p>• <strong>Phone, sets phone keyboard</p>
-                          <p>• <strong>URL, sets URL keyboard</p>
-                          <p>• <strong>Search, optimizes input</p>
-                          <p>• <strong>Number, sets numeric keyboard</p>
+                          <p>• <strong>Email:</strong> Detects @ symbol, sets email keyboard</p>
+                          <p>• <strong>Phone:</strong> Detects numeric patterns, sets phone keyboard</p>
+                          <p>• <strong>URL:</strong> Detects http/https, sets URL keyboard</p>
+                          <p>• <strong>Search:</strong> Detects search context, optimizes input</p>
+                          <p>• <strong>Number:</strong> Detects numeric patterns, sets numeric keyboard</p>
                         </div>
                       </div>
                     </div>
@@ -428,7 +464,7 @@ export const FormDemo= () => {
           }
         ]}
         activeTab={activeTab}
-        onTabChange={(tabId) => setActiveTab(tabId as 'basic' | 'advanced' | 'performance' | 'semantic')}
+        onTabChange={(tabId: string) => setActiveTab(tabId as 'basic' | 'advanced' | 'performance' | 'semantic')}
         className="w-full"
       />
 
@@ -479,7 +515,8 @@ export const FormDemo= () => {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <div className="grid grid-cols-1 md="space-y-3">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-3">
               <h4 className="font-semibold">✅ Completed Features</h4>
               <ul className="text-sm space-y-1 text-gray-600">
                 <li>• Mobile form validation system</li>