react-vite-themes/dist/pages/Documentation/InputDocumentation.js

A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { Input, DateInput } from '../../components/atoms/Input';
import { GroupedInput } from '../../components/molecules/GroupedInput';
import { Card } from '../../components/atoms/Card';
import { Icon } from '../../components/atoms/Icon';
import { Button } from '../../components/atoms/Button';
import { Alert } from '../../components/atoms/Alert';
import { CodeBlock } from '../../components/atoms/CodeBlock';
import './ComponentDocumentation.scss';
const InputDocumentation = () => {
    const [inputValue, setInputValue] = useState('');
    const sizes = [
        { name: 'sm', description: 'Small input' },
        { name: 'md', description: 'Medium input (default)' },
        { name: 'lg', description: 'Large input' }
    ];
    return (_jsx("div", { className: "component-documentation", children: _jsxs("div", { className: "container", children: [_jsxs("div", { className: "doc-header", children: [_jsxs(Link, { to: "/documentation", className: "back-link", children: [_jsx(Icon, { name: "arrow-left", size: "sm" }), "Back to Documentation"] }), _jsx("h1", { children: "Input Component" }), _jsx("p", { className: "component-description", children: "A flexible input component with multiple variants, sizes, and states. Supports icons, validation states, and helper text." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "import-section", children: [_jsx("h2", { children: "Import" }), _jsx(CodeBlock, { code: "import { Input } from '../../components/atoms/Input';", language: "typescript" })] }), _jsxs("section", { className: "usage-section", children: [_jsx("h2", { children: "Basic Usage" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Input, { placeholder: "Enter your name" }), _jsx(Input, { type: "email", placeholder: "Enter your email" }), _jsx(Input, { type: "password", placeholder: "Enter your password" })] }), _jsx(CodeBlock, { code: `<Input placeholder="Enter your name" />
<Input type="email" placeholder="Enter your email" />
<Input type="password" placeholder="Enter your password" />`, language: "tsx" })] })] }), _jsxs("section", { className: "variants-section", children: [_jsx("h2", { children: "Variants" }), _jsx("p", { children: "Choose from different input visual styles using the variant prop." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Input, { placeholder: "Outline variant (default)", variant: "outline", size: "md" }), _jsx(Input, { placeholder: "Filled variant", variant: "filled", size: "md" }), _jsx(Input, { placeholder: "Flushed variant", variant: "flushed", size: "md" })] }), _jsx(CodeBlock, { code: `<Input placeholder="Outline variant (default)" variant="outline" />
<Input placeholder="Filled variant" variant="filled" />
<Input placeholder="Flushed variant" variant="flushed" />`, language: "tsx" })] })] }), _jsxs("section", { className: "sizes-section", children: [_jsx("h2", { children: "Sizes" }), _jsx("p", { children: "Control the input size using the size prop." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: sizes.map((size) => (_jsx(Input, { placeholder: `${size.name} input`, size: size.name }, size.name))) }), _jsx(CodeBlock, { code: `<Input placeholder="small input" size="sm" />
<Input placeholder="medium input" size="md" />
<Input placeholder="large input" size="lg" />`, language: "tsx" })] })] }), _jsxs("section", { className: "icons-section", children: [_jsx("h2", { children: "Icons" }), _jsx("p", { children: "Add icons to inputs using the leftIcon and rightIcon props." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Input, { placeholder: "Search...", leftIcon: "search", leftIconSize: "sm", size: "md" }), _jsx(Input, { type: "email", placeholder: "Enter email", leftIcon: "mail", leftIconSize: "sm", rightIcon: "check", rightIconSize: "sm", size: "md" }), _jsx(Input, { type: "password", placeholder: "Enter password", leftIcon: "lock", leftIconSize: "sm", showPasswordToggle: true, size: "md" })] }), _jsx(CodeBlock, { code: `<Input 
  placeholder="Search..."
  leftIcon="search"
  leftIconSize="sm"
/>

<Input 
  type="email"
  placeholder="Enter email"
  leftIcon="mail"
  leftIconSize="sm"
  rightIcon="check"
  rightIconSize="sm"
/>

<Input 
  type="password"
  placeholder="Enter password"
  leftIcon="lock"
  leftIconSize="sm"
  showPasswordToggle={true}
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "validation-section", children: [_jsx("h2", { children: "Validation States" }), _jsx("p", { children: "Show validation states with visual feedback." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Input, { placeholder: "Valid input", value: inputValue, onChange: (e) => setInputValue(e.target.value), size: "md" }), _jsx(Input, { placeholder: "Invalid input", style: { borderColor: 'var(--color-error)' }, size: "md" }), _jsx(Input, { placeholder: "Disabled input", disabled: true, size: "md" })] }), _jsx(CodeBlock, { code: `<Input placeholder="Valid input" />
<Input placeholder="Invalid input" style={{ borderColor: 'var(--color-error)' }} />
<Input placeholder="Disabled input" disabled />`, language: "tsx" })] })] }), _jsxs("section", { className: "labels-messages-section", children: [_jsx("h2", { children: "Labels and Messages" }), _jsx("p", { children: "Use labels, helper text, and error messages to provide better user guidance." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' }, children: _jsx(Input, { placeholder: "Enter your email", label: "Email Address", helperText: "We'll never share your email with anyone else.", size: "md" }) }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' }, children: _jsx(Input, { placeholder: "Enter your password", label: "Password", errorMessage: "Password must be at least 8 characters long.", size: "md" }) }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' }, children: _jsx(Input, { placeholder: "Enter your username", label: "Username", helperText: "Choose a unique username for your account.", size: "md" }) })] }), _jsx(CodeBlock, { code: `<Input 
  placeholder="Enter your email"
  label="Email Address"
  helperText="We'll never share your email with anyone else."
/>

<Input 
  placeholder="Enter your password"
  label="Password"
  errorMessage="Password must be at least 8 characters long."
/>

<Input 
  placeholder="Enter your username"
  label="Username"
  helperText="Choose a unique username for your account."
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "helper-text-section", children: [_jsx("h2", { children: "Helper Text" }), _jsx("p", { children: "Add helper text to provide additional context or instructions." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' }, children: [_jsx(Input, { placeholder: "Enter your email", size: "md" }), _jsx("small", { style: { color: 'var(--color-text-secondary)', fontSize: '0.875rem' }, children: "We'll never share your email with anyone else." })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' }, children: [_jsx(Input, { placeholder: "Enter your password", size: "md" }), _jsx("small", { style: { color: 'var(--color-error)', fontSize: '0.875rem' }, children: "Password must be at least 8 characters long." })] })] }), _jsx(CodeBlock, { code: `<div>
  <Input type="email" placeholder="Enter your email" />
  <small>We'll never share your email with anyone else.</small>
</div>

<div>
  <Input type="password" placeholder="Enter your password" />
  <small style={{ color: 'var(--color-error)' }}>
    Password must be at least 8 characters long.
  </small>
</div>`, language: "tsx" })] })] }), _jsxs("section", { className: "password-toggle-section", children: [_jsx("h2", { children: "Password Toggle" }), _jsxs("p", { children: ["Easily toggle password visibility with the ", _jsx("code", { children: "showPasswordToggle" }), " prop. The eye icon automatically switches between show/hide states."] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Input, { type: "password", placeholder: "Enter your password", leftIcon: "lock", leftIconSize: "sm", showPasswordToggle: true, size: "md" }), _jsx(Input, { type: "password", placeholder: "Confirm password", leftIcon: "shield", leftIconSize: "sm", showPasswordToggle: true, size: "md" })] }), _jsx(CodeBlock, { code: `<Input 
  type="password"
  placeholder="Enter your password"
  leftIcon="lock"
  leftIconSize="sm"
  showPasswordToggle={true}
/>

<Input 
  type="password"
  placeholder="Confirm password"
  leftIcon="shield"
  leftIconSize="sm"
  showPasswordToggle={true}
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "textarea-section", children: [_jsx("h2", { children: "Textarea" }), _jsx("p", { children: "Use the as prop to render a textarea instead of an input." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: _jsx(Input, { as: "textarea", placeholder: "Enter your message...", rows: 4, size: "md" }) }), _jsx(CodeBlock, { code: `<Input 
  as="textarea"
  placeholder="Enter your message..."
  rows={4}
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "date-input-section", children: [_jsx("h2", { children: "Date Input" }), _jsx("p", { children: "Enhanced date inputs with automatic calendar icon and improved styling. Choose between native browser calendar or our custom calendar component." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Input, { type: "date", placeholder: "Select a date", size: "md" }), _jsx(Input, { type: "date", placeholder: "Birth date", leftIcon: "user", leftIconSize: "sm", size: "md" }), _jsx(Input, { type: "date", placeholder: "Event date", minDate: "2024-01-01", maxDate: "2024-12-31", size: "md" }), _jsx(Input, { type: "date", placeholder: "Custom date", showDateIcon: false, size: "md" })] }), _jsx(CodeBlock, { code: `// Basic date input with auto calendar icon
<Input type="date" placeholder="Select a date" />

// Date input with custom left icon
<Input 
  type="date"
  placeholder="Birth date"
  leftIcon="user"
  leftIconSize="sm"
/>

// Date input with min/max constraints
<Input 
  type="date"
  placeholder="Event date"
  minDate="2024-01-01"
  maxDate="2024-12-31"
/>

// Date input without auto calendar icon
<Input 
  type="date"
  placeholder="Custom date"
  showDateIcon={false}
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "custom-calendar-section", children: [_jsx("h2", { children: "Custom Calendar Component" }), _jsx("p", { children: "Use our custom Calendar component for a more modern and consistent experience across all browsers." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(DateInput, { placeholder: "Select date with custom calendar", leftIcon: "calendar", leftIconSize: "sm" }), _jsx(DateInput, { placeholder: "Birth date with constraints", leftIcon: "user", leftIconSize: "sm", maxDate: new Date().toISOString().split('T')[0] }), _jsx(DateInput, { placeholder: "Event date with styling", leftIcon: "calendar", leftIconSize: "sm", minDate: new Date().toISOString().split('T')[0], variant: "elevated" })] }), _jsx(CodeBlock, { code: `import { DateInput } from '../../components/atoms/Input';

// Custom calendar with DateInput component
<DateInput 
  placeholder="Select date with custom calendar"
  leftIcon="calendar"
  leftIconSize="sm"
/>

// DateInput with constraints
<DateInput 
  placeholder="Birth date with constraints"
  leftIcon="user"
  leftIconSize="sm"
  maxDate={new Date().toISOString().split('T')[0]}
/>

// DateInput with custom styling
<DateInput 
  placeholder="Event date with styling"
  leftIcon="calendar"
  leftIconSize="sm"
  minDate={new Date().toISOString().split('T')[0]}
  variant="elevated"
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "file-input-section", children: [_jsx("h2", { children: "File Input" }), _jsx("p", { children: "Use type=\"file\" to create file upload inputs with custom styling." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Input, { type: "file", accept: ".pdf,.doc,.docx", size: "md" }), _jsx(Input, { type: "file", accept: "image/*", multiple: true, size: "md" })] }), _jsx(CodeBlock, { code: `<Input 
  type="file"
  accept=".pdf,.doc,.docx"
/>

<Input 
  type="file"
  accept="image/*"
  multiple
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "grouped-input-section", children: [_jsx("h2", { children: "Grouped Input" }), _jsx("p", { children: "Use the dedicated GroupedInput component for inputs with buttons. This provides better styling and no text overlap issues." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(GroupedInput, { placeholder: "Search products...", leftButton: true, leftButtonContent: "\uD83D\uDD0D", leftButtonVariant: "white", leftButtonColorScheme: "outline", size: "md" }), _jsx(GroupedInput, { placeholder: "Enter amount", rightButton: true, rightButtonContent: "USD", rightButtonVariant: "secondary", rightButtonColorScheme: "solid", size: "md" }), _jsx(GroupedInput, { placeholder: "Enter URL", leftButton: true, leftButtonContent: "\uD83C\uDF10", leftButtonVariant: "info", rightButton: true, rightButtonContent: "Go", rightButtonVariant: "success", rightButtonColorScheme: "solid", size: "md" }), _jsx(GroupedInput, { placeholder: "Rounded grouped input", leftButton: true, leftButtonContent: "\u26A0\uFE0F", leftButtonVariant: "warning", leftButtonColorScheme: "outline", rightButton: true, rightButtonContent: "Clear", rightButtonVariant: "error", rightButtonColorScheme: "solid", isRounded: true, size: "md" })] }), _jsx(CodeBlock, { code: `import { GroupedInput } from '../../components/atoms/Input';

<GroupedInput 
  placeholder="Search products..."
  leftButton={true}
  leftButtonContent="🔍"
  leftButtonVariant="white"
  leftButtonColorScheme="outline"
/>

<GroupedInput 
  placeholder="Enter amount"
  rightButton={true}
  rightButtonContent="USD"
  rightButtonVariant="secondary"
  rightButtonColorScheme="solid"
/>

<GroupedInput 
  placeholder="Enter URL"
  leftButton={true}
  leftButtonContent="🌐"
  leftButtonVariant="info"
  rightButton={true}
  rightButtonContent="Go"
  rightButtonVariant="success"
  rightButtonColorScheme="solid"
/>

<GroupedInput 
  placeholder="Rounded grouped input"
  leftButton={true}
  leftButtonContent="⚠️"
  leftButtonVariant="warning"
  leftButtonColorScheme="outline"
  rightButton={true}
  rightButtonContent="Clear"
  rightButtonVariant="error"
  rightButtonColorScheme="solid"
  isRounded
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "rounded-section", children: [_jsx("h2", { children: "Rounded Inputs" }), _jsx("p", { children: "Use the isRounded prop for rounded input fields." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Input, { placeholder: "Rounded input", isRounded: true, size: "md" }), _jsx(Input, { placeholder: "Rounded with icon", leftIcon: "search", leftIconSize: "sm", isRounded: true, size: "md" }), _jsx(GroupedInput, { placeholder: "Rounded grouped input", leftButton: true, leftButtonContent: "\uD83D\uDD0D", leftButtonVariant: "primary", leftButtonColorScheme: "solid", isRounded: true, size: "md" })] }), _jsx(CodeBlock, { code: `<Input placeholder="Rounded input" isRounded />
<Input 
  placeholder="Rounded with icon"
  leftIcon="search"
  leftIconSize="sm"
  isRounded
/>
<GroupedInput 
  placeholder="Rounded grouped input"
  leftButton
  leftButtonContent="🔍"
  leftButtonVariant="primary"
  leftButtonColorScheme="solid"
  isRounded
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "controlled-section", children: [_jsx("h2", { children: "Controlled Inputs" }), _jsx("p", { children: "Use controlled inputs with state management." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Input, { placeholder: "Controlled input", value: inputValue, onChange: (e) => setInputValue(e.target.value), size: "md" }), _jsxs("p", { style: { margin: '0.5rem 0', fontSize: '0.875rem', color: 'var(--color-text-secondary)' }, children: ["Value: ", inputValue || '(empty)'] })] }), _jsx(CodeBlock, { code: `const [value, setValue] = useState('');

<Input 
  placeholder="Controlled input"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "advanced-date-section", children: [_jsx("h2", { children: "Advanced Date Input Examples" }), _jsx("p", { children: "Complex date input scenarios with validation and constraints." }), _jsxs("div", { className: "date-examples-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "date-example-card", children: [_jsx("h3", { children: "Event Planning Form" }), _jsxs("form", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: '0.5rem', fontWeight: '500' }, children: "Event Start Date" }), _jsx(Input, { type: "date", placeholder: "Select start date", minDate: new Date().toISOString().split('T')[0], leftIcon: "calendar", leftIconSize: "sm", size: "md" })] }), _jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: '0.5rem', fontWeight: '500' }, children: "Event End Date" }), _jsx(Input, { type: "date", placeholder: "Select end date", minDate: new Date().toISOString().split('T')[0], leftIcon: "calendar", leftIconSize: "sm", size: "md" })] }), _jsx(Button, { variant: "primary", size: "md", children: "Create Event" })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "date-example-card", children: [_jsx("h3", { children: "Booking System" }), _jsxs("form", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: '0.5rem', fontWeight: '500' }, children: "Check-in Date" }), _jsx(Input, { type: "date", placeholder: "Select check-in date", minDate: new Date().toISOString().split('T')[0], leftIcon: "home", leftIconSize: "sm", size: "md" })] }), _jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: '0.5rem', fontWeight: '500' }, children: "Check-out Date" }), _jsx(Input, { type: "date", placeholder: "Select check-out date", minDate: new Date().toISOString().split('T')[0], leftIcon: "home", leftIconSize: "sm", size: "md" })] }), _jsx(Button, { variant: "success", size: "md", children: "Book Now" })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "date-example-card", children: [_jsx("h3", { children: "User Profile" }), _jsxs("form", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: '0.5rem', fontWeight: '500' }, children: "Date of Birth" }), _jsx(Input, { type: "date", placeholder: "Select your birth date", maxDate: new Date().toISOString().split('T')[0], leftIcon: "user", leftIconSize: "sm", size: "md" })] }), _jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: '0.5rem', fontWeight: '500' }, children: "Anniversary Date" }), _jsx(Input, { type: "date", placeholder: "Select anniversary date", leftIcon: "heart", leftIconSize: "sm", size: "md" })] }), _jsx(Button, { variant: "primary", size: "md", children: "Update Profile" })] })] })] })] }), _jsxs("section", { className: "form-examples-section", children: [_jsx("h2", { children: "Form Examples" }), _jsx("p", { children: "Real-world examples of input usage in forms." }), _jsxs("div", { className: "form-examples-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "form-example-card", children: [_jsx("h3", { children: "Contact Form" }), _jsxs("form", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: '0.5rem', fontWeight: '500' }, children: "Name" }), _jsx(Input, { placeholder: "Enter your full name", leftIcon: "user", leftIconSize: "sm", size: "md" })] }), _jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: '0.5rem', fontWeight: '500' }, children: "Email" }), _jsx(Input, { placeholder: "Enter your email", leftIcon: "mail", leftIconSize: "sm", size: "md" })] }), _jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: '0.5rem', fontWeight: '500' }, children: "Message" }), _jsx(Input, { as: "textarea", placeholder: "Enter your message...", rows: 4, size: "md" })] }), _jsx(Button, { variant: "primary", size: "md", children: "Send Message" })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "form-example-card", children: [_jsx("h3", { children: "Search Form" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsxs("div", { style: { display: 'flex', gap: '0.5rem' }, children: [_jsx(Input, { placeholder: "Search products...", leftIcon: "search", isRounded: true, size: "md", style: { flex: 1 } }), _jsx(Button, { variant: "primary", size: "md", children: "Search" })] }), _jsx(GroupedInput, { placeholder: "Advanced search with filters...", leftButton: true, leftButtonContent: _jsx(Icon, { name: "search", size: "sm" }), leftButtonVariant: "white", leftButtonColorScheme: "outline", rightButton: true, rightButtonContent: "Filters", rightButtonVariant: "secondary", rightButtonColorScheme: "outline", isRounded: true, size: "md" })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "form-example-card", children: [_jsx("h3", { children: "Login Form" }), _jsxs("form", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: '0.5rem', fontWeight: '500' }, children: "Email" }), _jsx(Input, { placeholder: "Enter your email", leftIcon: "mail", leftIconSize: "sm", size: "md" })] }), _jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: '0.5rem', fontWeight: '500' }, children: "Password" }), _jsx(Input, { placeholder: "Enter your password", leftIcon: "lock", leftIconSize: "sm", rightIcon: "eye", rightIconSize: "sm", size: "md" })] }), _jsx(Button, { variant: "primary", size: "md", isFullWidth: true, children: "Sign In" })] })] })] })] }), _jsxs("section", { className: "props-section", children: [_jsx("h2", { children: "Props" }), _jsx(Card, { variant: "neutral", style: "elevated", className: "props-card", children: _jsx("div", { className: "props-table", children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Prop" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Default" }), _jsx("th", { children: "Description" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { children: "as" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'input'" }), _jsx("td", { children: "Render as 'input' or 'textarea'" })] }), _jsxs("tr", { children: [_jsx("td", { children: "variant" }), _jsx("td", { children: "'outline' | 'filled' | 'flushed'" }), _jsx("td", { children: "'outline'" }), _jsx("td", { children: "Input visual style variant" })] }), _jsxs("tr", { children: [_jsx("td", { children: "size" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'md'" }), _jsx("td", { children: "Input size (sm, md, lg)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "leftIcon" }), _jsx("td", { children: "ReactNode | string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Icon to display on the left (can be icon name string or React component)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "leftIconSize" }), _jsx("td", { children: "'sm' | 'md' | 'lg'" }), _jsx("td", { children: "'sm'" }), _jsx("td", { children: "Size of the left icon" })] }), _jsxs("tr", { children: [_jsx("td", { children: "rightIcon" }), _jsx("td", { children: "ReactNode | string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Icon to display on the right (can be icon name string or React component)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "rightIconSize" }), _jsx("td", { children: "'sm' | 'md' | 'lg'" }), _jsx("td", { children: "'sm'" }), _jsx("td", { children: "Size of the right icon" })] }), _jsxs("tr", { children: [_jsx("td", { children: "leftElement" }), _jsx("td", { children: "ReactNode" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Custom element to display on the left" })] }), _jsxs("tr", { children: [_jsx("td", { children: "rightElement" }), _jsx("td", { children: "ReactNode" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Custom element to display on the right" })] }), _jsxs("tr", { children: [_jsx("td", { children: "label" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Input label text" })] }), _jsxs("tr", { children: [_jsx("td", { children: "helperText" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Helper text below the input" })] }), _jsxs("tr", { children: [_jsx("td", { children: "errorMessage" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Error message to display" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isRounded" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Apply rounded corners" })] }), _jsxs("tr", { children: [_jsx("td", { children: "showDateIcon" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "true" }), _jsx("td", { children: "Show calendar icon for date inputs (auto-applied)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "useCustomCalendar" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Use custom calendar component instead of native browser calendar" })] }), _jsxs("tr", { children: [_jsx("td", { children: "dateFormat" }), _jsx("td", { children: "'YYYY-MM-DD' | 'MM/DD/YYYY' | 'DD/MM/YYYY'" }), _jsx("td", { children: "'YYYY-MM-DD'" }), _jsx("td", { children: "Date format for display (future feature)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "minDate" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Minimum allowed date (YYYY-MM-DD format)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "maxDate" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Maximum allowed date (YYYY-MM-DD format)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isInvalid" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Show invalid state" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isDisabled" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Disable input interaction" })] }), _jsxs("tr", { children: [_jsx("td", { children: "showPasswordToggle" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Enable password visibility toggle (eye/eye-off icons)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "className" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Additional CSS classes" })] }), _jsxs("tr", { children: [_jsx("td", { children: "...props" }), _jsx("td", { children: 'HTMLInputProps | HTMLTextareaProps' }), _jsx("td", { children: "-" }), _jsx("td", { children: "All standard HTML input/textarea props" })] })] })] }) }) })] }), _jsxs("section", { className: "grouped-input-props-section", children: [_jsx("h2", { children: "GroupedInput Props" }), _jsx(Card, { variant: "neutral", style: "elevated", className: "props-card", children: _jsx("div", { className: "props-table", children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Prop" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Default" }), _jsx("th", { children: "Description" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { children: "size" }), _jsx("td", { children: "'sm' | 'md' | 'lg'" }), _jsx("td", { children: "'md'" }), _jsx("td", { children: "Input and button size" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isRounded" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Apply rounded corners to input and buttons" })] }), _jsxs("tr", { children: [_jsx("td", { children: "leftButton" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Show left button" })] }), _jsxs("tr", { children: [_jsx("td", { children: "leftButtonContent" }), _jsx("td", { children: "ReactNode" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Content for left button" })] }), _jsxs("tr", { children: [_jsx("td", { children: "leftButtonVariant" }), _jsx("td", { children: "Variant" }), _jsx("td", { children: "'primary'" }), _jsx("td", { children: "Variant for left button" })] }), _jsxs("tr", { children: [_jsx("td", { children: "leftButtonSize" }), _jsx("td", { children: "'sm' | 'md' | 'lg'" }), _jsx("td", { children: "'sm'" }), _jsx("td", { children: "Size for left button" })] }), _jsxs("tr", { children: [_jsx("td", { children: "leftButtonColorScheme" }), _jsx("td", { children: "'solid' | 'outline' | 'ghost'" }), _jsx("td", { children: "'solid'" }), _jsx("td", { children: "Color scheme for left button" })] }), _jsxs("tr", { children: [_jsx("td", { children: "rightButton" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Show right button" })] }), _jsxs("tr", { children: [_jsx("td", { children: "rightButtonContent" }), _jsx("td", { children: "ReactNode" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Content for right button" })] }), _jsxs("tr", { children: [_jsx("td", { children: "rightButtonVariant" }), _jsx("td", { children: "Variant" }), _jsx("td", { children: "'primary'" }), _jsx("td", { children: "Variant for right button" })] }), _jsxs("tr", { children: [_jsx("td", { children: "rightButtonSize" }), _jsx("td", { children: "'sm' | 'md' | 'lg'" }), _jsx("td", { children: "'sm'" }), _jsx("td", { children: "Size for right button" })] }), _jsxs("tr", { children: [_jsx("td", { children: "rightButtonColorScheme" }), _jsx("td", { children: "'solid' | 'outline' | 'ghost'" }), _jsx("td", { children: "'solid'" }), _jsx("td", { children: "Color scheme for right button" })] }), _jsxs("tr", { children: [_jsx("td", { children: "inputClassName" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Additional CSS classes for the input element" })] }), _jsxs("tr", { children: [_jsx("td", { children: "wrapperClassName" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Additional CSS classes for the wrapper element" })] }), _jsxs("tr", { children: [_jsx("td", { children: "...props" }), _jsx("td", { children: "HTMLInputProps" }), _jsx("td", { children: "-" }), _jsx("td", { children: "All standard HTML input props" })] })] })] }) }) })] }), _jsxs("section", { className: "best-practices-section", children: [_jsx("h2", { children: "Best Practices" }), _jsxs("div", { className: "practices-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "practice-card", children: [_jsx("h3", { children: "\u2705 Do" }), _jsxs("ul", { children: [_jsx("li", { children: "Use appropriate input types (email, password, etc.)" }), _jsx("li", { children: "Provide clear placeholder text" }), _jsx("li", { children: "Use icons to enhance visual clarity" }), _jsx("li", { children: "Show validation states clearly" }), _jsx("li", { children: "Use helper text for complex inputs" }), _jsx("li", { children: "Make inputs accessible with proper labels" }), _jsx("li", { children: "Use controlled inputs for form state management" })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "practice-card", children: [_jsx("h3", { children: "\u274C Don't" }), _jsxs("ul", { children: [_jsx("li", { children: "Don't use vague placeholder text" }), _jsx("li", { children: "Don't use too many icons in one input" }), _jsx("li", { children: "Don't use rounded inputs for formal applications" }), _jsx("li", { children: "Don't disable inputs without clear indication why" }), _jsx("li", { children: "Don't use validation states without proper feedback" }), _jsx("li", { children: "Don't use inputs without proper labels" }), _jsx("li", { children: "Don't use uncontrolled inputs for important forms" })] })] })] })] }), _jsxs("section", { className: "accessibility-section", children: [_jsx("h2", { children: "Accessibility" }), _jsxs(Alert, { variant: "info", title: "Accessibility Features", children: ["The Input component includes several accessibility features:", _jsxs("ul", { children: [_jsx("li", { children: "Proper ARIA attributes for validation states" }), _jsx("li", { children: "Keyboard navigation support" }), _jsx("li", { children: "Focus management with visible focus indicators" }), _jsx("li", { children: "Screen reader support for input states" }), _jsx("li", { children: "High contrast support for all variants" }), _jsx("li", { children: "Proper label association" })] })] })] })] }) }));
};
export default InputDocumentation;