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

package/dist/components/ui/mobile-input-demo.esm.js

@@ -1,201 +1,14 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card } from './card';
 import { MobileInput, mobileInputConfigs } from './mobile-input';
-
-export const MobileInputDemo: React.FC = () => {
-  return (
-    <div className="space-y-6">
-      <div className="text-center">
-        <h2 className="text-2xl font-bold text-cs-text-primary mb-2">
-          Mobile Input System Recovery
-        </h2>
-        <p className="text-cs-text-secondary">
-          Semantic Input Excellence - Recovered from original project
-        </p>
-      </div>
-
-      <Card className="p-6">
-        <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
-          Semantic Input Types
-        </h3>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-cs-text-secondary">Name Input</label>
-            <MobileInput
-              placeholder="Enter your full name"
-              mobileConfig={mobileInputConfigs.name}
-              className="w-full"
-            />
-            <p className="text-xs text-cs-text-muted">
-              Auto-capitalizes words, suggests name autocomplete
-            </p>
-          </div>
-
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-cs-text-secondary">Email Input</label>
-            <MobileInput
-              placeholder="Enter your email"
-              mobileConfig={mobileInputConfigs.email}
-              className="w-full"
-            />
-            <p className="text-xs text-cs-text-muted">
-              Email keyboard, no spell check, email autocomplete
-            </p>
-          </div>
-
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-cs-text-secondary">Phone Input</label>
-            <MobileInput
-              placeholder="Enter phone number"
-              mobileConfig={mobileInputConfigs.phone}
-              className="w-full"
-            />
-            <p className="text-xs text-cs-text-muted">
-              Numeric keyboard, phone autocomplete
-            </p>
-          </div>
-
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-cs-text-secondary">Password Input</label>
-            <MobileInput
-              placeholder="Enter new password"
-              mobileConfig={mobileInputConfigs.newPassword}
-              className="w-full"
-            />
-            <p className="text-xs text-cs-text-muted">
-              Password keyboard, new-password autocomplete
-            </p>
-          </div>
-
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-cs-text-secondary">Search Input</label>
-            <MobileInput
-              placeholder="Search..."
-              mobileConfig={mobileInputConfigs.search}
-              className="w-full"
-            />
-            <p className="text-xs text-cs-text-muted">
-              Search keyboard, no autocomplete
-            </p>
-          </div>
-
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-cs-text-secondary">Amount Input</label>
-            <MobileInput
-              placeholder="Enter amount"
-              mobileConfig={mobileInputConfigs.amount}
-              className="w-full"
-            />
-            <p className="text-xs text-cs-text-muted">
-              Decimal keyboard, no autocomplete
-            </p>
-          </div>
-        </div>
-      </Card>
-
-      <Card className="p-6">
-        <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
-          Custom Mobile Configurations
-        </h3>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-cs-text-secondary">Custom Input Mode</label>
-            <MobileInput
-              placeholder="Custom input mode"
-              mobileConfig={{
-                semanticType: 'email',
-                inputMode: 'tel',
-                spellCheck: true,
-                autoCapitalize: 'characters'
-              }}
-              className="w-full"
-            />
-            <p className="text-xs text-cs-text-muted">
-              Email type with tel input mode, spell check enabled
-            </p>
-          </div>
-
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-cs-text-secondary">Disabled Autocomplete</label>
-            <MobileInput
-              placeholder="No autocomplete"
-              mobileConfig={{
-                semanticType: 'name',
-                enableAutocomplete: false
-              }}
-              className="w-full"
-            />
-            <p className="text-xs text-cs-text-muted">
-              Name input with autocomplete disabled
-            </p>
-          </div>
-        </div>
-      </Card>
-
-      <Card className="p-6">
-        <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
-          Props Override Behavior
-        </h3>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-cs-text-secondary">Explicit Type Override</label>
-            <MobileInput
-              type="password"
-              placeholder="Password type overrides semantic"
-              mobileConfig={{ semanticType: 'email' }}
-              className="w-full"
-            />
-            <p className="text-xs text-cs-text-muted">
-              Explicit password type overrides email semantic type
-            </p>
-          </div>
-
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-cs-text-secondary">Custom Attributes</label>
-            <MobileInput
-              placeholder="Custom attributes"
-              mobileConfig={{ semanticType: 'name' }}
-              autoComplete="off"
-              spellCheck={true}
-              className="w-full"
-            />
-            <p className="text-xs text-cs-text-muted">
-              Custom autoComplete and spellCheck override mobile config
-            </p>
-          </div>
-        </div>
-      </Card>
-
-      <Card className="p-6">
-        <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
-          Mobile Optimization Features
-        </h3>
-        <div className="space-y-4">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
-            <div className="p-4 bg-cs-surface-bg rounded-lg">
-              <div className="text-2xl mb-2">📱</div>
-              <h4 className="font-medium text-cs-text-primary">Touch Optimized</h4>
-              <p className="text-sm text-cs-text-secondary">
-                44px touch targets, touch-manipulation CSS
-              </p>
-            </div>
-            <div className="p-4 bg-cs-surface-bg rounded-lg">
-              <div className="text-2xl mb-2">⌨️</div>
-              <h4 className="font-medium text-cs-text-primary">Smart Keyboards</h4>
-              <p className="text-sm text-cs-text-secondary">
-                Semantic input modes for optimal mobile keyboards
-              </p>
-            </div>
-            <div className="p-4 bg-cs-surface-bg rounded-lg">
-              <div className="text-2xl mb-2">🔍</div>
-              <h4 className="font-medium text-cs-text-primary">Autocomplete</h4>
-              <p className="text-sm text-cs-text-secondary">
-                Intelligent autocomplete suggestions for better UX
-              </p>
-            </div>
-          </div>
-        </div>
-      </Card>
-    </div>
-  );
+export const MobileInputDemo = () => {
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "text-center", children: [_jsx("h2", { className: "text-2xl font-bold text-cs-text-primary mb-2", children: "Mobile Input System Recovery" }), _jsx("p", { className: "text-cs-text-secondary", children: "Semantic Input Excellence - Recovered from original project" })] }), _jsxs(Card, { className: "p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary mb-4", children: "Semantic Input Types" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Name Input" }), _jsx(MobileInput, { placeholder: "Enter your full name", mobileConfig: mobileInputConfigs.name, className: "w-full" }), _jsx("p", { className: "text-xs text-cs-text-muted", children: "Auto-capitalizes words, suggests name autocomplete" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Email Input" }), _jsx(MobileInput, { placeholder: "Enter your email", mobileConfig: mobileInputConfigs.email, className: "w-full" }), _jsx("p", { className: "text-xs text-cs-text-muted", children: "Email keyboard, no spell check, email autocomplete" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Phone Input" }), _jsx(MobileInput, { placeholder: "Enter phone number", mobileConfig: mobileInputConfigs.phone, className: "w-full" }), _jsx("p", { className: "text-xs text-cs-text-muted", children: "Numeric keyboard, phone autocomplete" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Password Input" }), _jsx(MobileInput, { placeholder: "Enter new password", mobileConfig: mobileInputConfigs.newPassword, className: "w-full" }), _jsx("p", { className: "text-xs text-cs-text-muted", children: "Password keyboard, new-password autocomplete" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Search Input" }), _jsx(MobileInput, { placeholder: "Search...", mobileConfig: mobileInputConfigs.search, className: "w-full" }), _jsx("p", { className: "text-xs text-cs-text-muted", children: "Search keyboard, no autocomplete" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Amount Input" }), _jsx(MobileInput, { placeholder: "Enter amount", mobileConfig: mobileInputConfigs.amount, className: "w-full" }), _jsx("p", { className: "text-xs text-cs-text-muted", children: "Decimal keyboard, no autocomplete" })] })] })] }), _jsxs(Card, { className: "p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary mb-4", children: "Custom Mobile Configurations" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Custom Input Mode" }), _jsx(MobileInput, { placeholder: "Custom input mode", mobileConfig: {
+                                            semanticType: 'email',
+                                            inputMode: 'tel',
+                                            spellCheck: true,
+                                            autoCapitalize: 'characters'
+                                        }, className: "w-full" }), _jsx("p", { className: "text-xs text-cs-text-muted", children: "Email type with tel input mode, spell check enabled" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Disabled Autocomplete" }), _jsx(MobileInput, { placeholder: "No autocomplete", mobileConfig: {
+                                            semanticType: 'name',
+                                            enableAutocomplete: false
+                                        }, className: "w-full" }), _jsx("p", { className: "text-xs text-cs-text-muted", children: "Name input with autocomplete disabled" })] })] })] }), _jsxs(Card, { className: "p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary mb-4", children: "Props Override Behavior" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Explicit Type Override" }), _jsx(MobileInput, { type: "password", placeholder: "Password type overrides semantic", mobileConfig: { semanticType: 'email' }, className: "w-full" }), _jsx("p", { className: "text-xs text-cs-text-muted", children: "Explicit password type overrides email semantic type" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Custom Attributes" }), _jsx(MobileInput, { placeholder: "Custom attributes", mobileConfig: { semanticType: 'name' }, autoComplete: "off", spellCheck: true, className: "w-full" }), _jsx("p", { className: "text-xs text-cs-text-muted", children: "Custom autoComplete and spellCheck override mobile config" })] })] })] }), _jsxs(Card, { className: "p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary mb-4", children: "Mobile Optimization Features" }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 text-center", children: [_jsxs("div", { className: "p-4 bg-cs-surface-bg rounded-lg", children: [_jsx("div", { className: "text-2xl mb-2", children: "\uD83D\uDCF1" }), _jsx("h4", { className: "font-medium text-cs-text-primary", children: "Touch Optimized" }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "44px touch targets, touch-manipulation CSS" })] }), _jsxs("div", { className: "p-4 bg-cs-surface-bg rounded-lg", children: [_jsx("div", { className: "text-2xl mb-2", children: "\u2328\uFE0F" }), _jsx("h4", { className: "font-medium text-cs-text-primary", children: "Smart Keyboards" }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "Semantic input modes for optimal mobile keyboards" })] }), _jsxs("div", { className: "p-4 bg-cs-surface-bg rounded-lg", children: [_jsx("div", { className: "text-2xl mb-2", children: "\uD83D\uDD0D" }), _jsx("h4", { className: "font-medium text-cs-text-primary", children: "Autocomplete" }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "Intelligent autocomplete suggestions for better UX" })] })] }) })] })] }));
 };

package/dist/components/ui/mobile-input-demo.js

@@ -1,201 +1,14 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card } from './card';
 import { MobileInput, mobileInputConfigs } from './mobile-input';
-
-export const MobileInputDemo: React.FC = () => {
-  return (
-    <div className="space-y-6">
-      <div className="text-center">
-        <h2 className="text-2xl font-bold text-cs-text-primary mb-2">
-          Mobile Input System Recovery
-        </h2>
-        <p className="text-cs-text-secondary">
-          Semantic Input Excellence - Recovered from original project
-        </p>
-      </div>
-
-      <Card className="p-6">
-        <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
-          Semantic Input Types
-        </h3>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-cs-text-secondary">Name Input</label>
-            <MobileInput
-              placeholder="Enter your full name"
-              mobileConfig={mobileInputConfigs.name}
-              className="w-full"
-            />
-            <p className="text-xs text-cs-text-muted">
-              Auto-capitalizes words, suggests name autocomplete
-            </p>
-          </div>
-
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-cs-text-secondary">Email Input</label>
-            <MobileInput
-              placeholder="Enter your email"
-              mobileConfig={mobileInputConfigs.email}
-              className="w-full"
-            />
-            <p className="text-xs text-cs-text-muted">
-              Email keyboard, no spell check, email autocomplete
-            </p>
-          </div>
-
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-cs-text-secondary">Phone Input</label>
-            <MobileInput
-              placeholder="Enter phone number"
-              mobileConfig={mobileInputConfigs.phone}
-              className="w-full"
-            />
-            <p className="text-xs text-cs-text-muted">
-              Numeric keyboard, phone autocomplete
-            </p>
-          </div>
-
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-cs-text-secondary">Password Input</label>
-            <MobileInput
-              placeholder="Enter new password"
-              mobileConfig={mobileInputConfigs.newPassword}
-              className="w-full"
-            />
-            <p className="text-xs text-cs-text-muted">
-              Password keyboard, new-password autocomplete
-            </p>
-          </div>
-
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-cs-text-secondary">Search Input</label>
-            <MobileInput
-              placeholder="Search..."
-              mobileConfig={mobileInputConfigs.search}
-              className="w-full"
-            />
-            <p className="text-xs text-cs-text-muted">
-              Search keyboard, no autocomplete
-            </p>
-          </div>
-
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-cs-text-secondary">Amount Input</label>
-            <MobileInput
-              placeholder="Enter amount"
-              mobileConfig={mobileInputConfigs.amount}
-              className="w-full"
-            />
-            <p className="text-xs text-cs-text-muted">
-              Decimal keyboard, no autocomplete
-            </p>
-          </div>
-        </div>
-      </Card>
-
-      <Card className="p-6">
-        <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
-          Custom Mobile Configurations
-        </h3>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-cs-text-secondary">Custom Input Mode</label>
-            <MobileInput
-              placeholder="Custom input mode"
-              mobileConfig={{
-                semanticType: 'email',
-                inputMode: 'tel',
-                spellCheck: true,
-                autoCapitalize: 'characters'
-              }}
-              className="w-full"
-            />
-            <p className="text-xs text-cs-text-muted">
-              Email type with tel input mode, spell check enabled
-            </p>
-          </div>
-
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-cs-text-secondary">Disabled Autocomplete</label>
-            <MobileInput
-              placeholder="No autocomplete"
-              mobileConfig={{
-                semanticType: 'name',
-                enableAutocomplete: false
-              }}
-              className="w-full"
-            />
-            <p className="text-xs text-cs-text-muted">
-              Name input with autocomplete disabled
-            </p>
-          </div>
-        </div>
-      </Card>
-
-      <Card className="p-6">
-        <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
-          Props Override Behavior
-        </h3>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-cs-text-secondary">Explicit Type Override</label>
-            <MobileInput
-              type="password"
-              placeholder="Password type overrides semantic"
-              mobileConfig={{ semanticType: 'email' }}
-              className="w-full"
-            />
-            <p className="text-xs text-cs-text-muted">
-              Explicit password type overrides email semantic type
-            </p>
-          </div>
-
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-cs-text-secondary">Custom Attributes</label>
-            <MobileInput
-              placeholder="Custom attributes"
-              mobileConfig={{ semanticType: 'name' }}
-              autoComplete="off"
-              spellCheck={true}
-              className="w-full"
-            />
-            <p className="text-xs text-cs-text-muted">
-              Custom autoComplete and spellCheck override mobile config
-            </p>
-          </div>
-        </div>
-      </Card>
-
-      <Card className="p-6">
-        <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
-          Mobile Optimization Features
-        </h3>
-        <div className="space-y-4">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
-            <div className="p-4 bg-cs-surface-bg rounded-lg">
-              <div className="text-2xl mb-2">📱</div>
-              <h4 className="font-medium text-cs-text-primary">Touch Optimized</h4>
-              <p className="text-sm text-cs-text-secondary">
-                44px touch targets, touch-manipulation CSS
-              </p>
-            </div>
-            <div className="p-4 bg-cs-surface-bg rounded-lg">
-              <div className="text-2xl mb-2">⌨️</div>
-              <h4 className="font-medium text-cs-text-primary">Smart Keyboards</h4>
-              <p className="text-sm text-cs-text-secondary">
-                Semantic input modes for optimal mobile keyboards
-              </p>
-            </div>
-            <div className="p-4 bg-cs-surface-bg rounded-lg">
-              <div className="text-2xl mb-2">🔍</div>
-              <h4 className="font-medium text-cs-text-primary">Autocomplete</h4>
-              <p className="text-sm text-cs-text-secondary">
-                Intelligent autocomplete suggestions for better UX
-              </p>
-            </div>
-          </div>
-        </div>
-      </Card>
-    </div>
-  );
+export const MobileInputDemo = () => {
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "text-center", children: [_jsx("h2", { className: "text-2xl font-bold text-cs-text-primary mb-2", children: "Mobile Input System Recovery" }), _jsx("p", { className: "text-cs-text-secondary", children: "Semantic Input Excellence - Recovered from original project" })] }), _jsxs(Card, { className: "p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary mb-4", children: "Semantic Input Types" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Name Input" }), _jsx(MobileInput, { placeholder: "Enter your full name", mobileConfig: mobileInputConfigs.name, className: "w-full" }), _jsx("p", { className: "text-xs text-cs-text-muted", children: "Auto-capitalizes words, suggests name autocomplete" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Email Input" }), _jsx(MobileInput, { placeholder: "Enter your email", mobileConfig: mobileInputConfigs.email, className: "w-full" }), _jsx("p", { className: "text-xs text-cs-text-muted", children: "Email keyboard, no spell check, email autocomplete" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Phone Input" }), _jsx(MobileInput, { placeholder: "Enter phone number", mobileConfig: mobileInputConfigs.phone, className: "w-full" }), _jsx("p", { className: "text-xs text-cs-text-muted", children: "Numeric keyboard, phone autocomplete" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Password Input" }), _jsx(MobileInput, { placeholder: "Enter new password", mobileConfig: mobileInputConfigs.newPassword, className: "w-full" }), _jsx("p", { className: "text-xs text-cs-text-muted", children: "Password keyboard, new-password autocomplete" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Search Input" }), _jsx(MobileInput, { placeholder: "Search...", mobileConfig: mobileInputConfigs.search, className: "w-full" }), _jsx("p", { className: "text-xs text-cs-text-muted", children: "Search keyboard, no autocomplete" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Amount Input" }), _jsx(MobileInput, { placeholder: "Enter amount", mobileConfig: mobileInputConfigs.amount, className: "w-full" }), _jsx("p", { className: "text-xs text-cs-text-muted", children: "Decimal keyboard, no autocomplete" })] })] })] }), _jsxs(Card, { className: "p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary mb-4", children: "Custom Mobile Configurations" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Custom Input Mode" }), _jsx(MobileInput, { placeholder: "Custom input mode", mobileConfig: {
+                                            semanticType: 'email',
+                                            inputMode: 'tel',
+                                            spellCheck: true,
+                                            autoCapitalize: 'characters'
+                                        }, className: "w-full" }), _jsx("p", { className: "text-xs text-cs-text-muted", children: "Email type with tel input mode, spell check enabled" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Disabled Autocomplete" }), _jsx(MobileInput, { placeholder: "No autocomplete", mobileConfig: {
+                                            semanticType: 'name',
+                                            enableAutocomplete: false
+                                        }, className: "w-full" }), _jsx("p", { className: "text-xs text-cs-text-muted", children: "Name input with autocomplete disabled" })] })] })] }), _jsxs(Card, { className: "p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary mb-4", children: "Props Override Behavior" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Explicit Type Override" }), _jsx(MobileInput, { type: "password", placeholder: "Password type overrides semantic", mobileConfig: { semanticType: 'email' }, className: "w-full" }), _jsx("p", { className: "text-xs text-cs-text-muted", children: "Explicit password type overrides email semantic type" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Custom Attributes" }), _jsx(MobileInput, { placeholder: "Custom attributes", mobileConfig: { semanticType: 'name' }, autoComplete: "off", spellCheck: true, className: "w-full" }), _jsx("p", { className: "text-xs text-cs-text-muted", children: "Custom autoComplete and spellCheck override mobile config" })] })] })] }), _jsxs(Card, { className: "p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary mb-4", children: "Mobile Optimization Features" }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 text-center", children: [_jsxs("div", { className: "p-4 bg-cs-surface-bg rounded-lg", children: [_jsx("div", { className: "text-2xl mb-2", children: "\uD83D\uDCF1" }), _jsx("h4", { className: "font-medium text-cs-text-primary", children: "Touch Optimized" }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "44px touch targets, touch-manipulation CSS" })] }), _jsxs("div", { className: "p-4 bg-cs-surface-bg rounded-lg", children: [_jsx("div", { className: "text-2xl mb-2", children: "\u2328\uFE0F" }), _jsx("h4", { className: "font-medium text-cs-text-primary", children: "Smart Keyboards" }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "Semantic input modes for optimal mobile keyboards" })] }), _jsxs("div", { className: "p-4 bg-cs-surface-bg rounded-lg", children: [_jsx("div", { className: "text-2xl mb-2", children: "\uD83D\uDD0D" }), _jsx("h4", { className: "font-medium text-cs-text-primary", children: "Autocomplete" }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "Intelligent autocomplete suggestions for better UX" })] })] }) })] })] }));
 };