import { FormTextField, FormDateField, FormMaskField, FormSwitch } from 'form-input-fields';

import { Formik, Field } from 'formik';
import { FormTextField } from 'form-input-fields';

<Formik initialValues={{ username: '' }} onSubmit={values => console.log(values)}>
  <Field
    component={FormTextField}
    name="username"
    label="Username"
    placeholder="Enter your username"
  />
</Formik>;

<Field
  component={FormTextField}
  name="username"
  label="Username"
  placeholder="Enter your username"
  fullWidth
  margin="normal"
  variant="outlined" // <-- Example with outlined variant
/>

<Formik
  initialValues={{ email: '' }}
  validate={values => {
    const errors = {};
    if (!values.email) {
      errors.email = 'Required';
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
      errors.email = 'Invalid email address';
    }
    return errors;
  }}
  onSubmit={values => console.log(values)}
>
  {({ errors, touched }) => (
    <Field
      component={FormTextField}
      name="email"
      label="Email"
      type="email"
      error={touched.email && Boolean(errors.email)}
      helperText={touched.email && errors.email}
      required
    />
  )}
</Formik>

<Field
  component={FormTextField}
  name="password"
  label="Password"
  type="password"
  inputProps={{
    minLength: 8,
    pattern: '(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}',
  }}
  helperText="Must contain at least 8 characters, including uppercase, lowercase, and numbers"
  required
/>

import { Formik, Field } from 'formik';
import { FormDropDownField } from 'form-input-fields';

const items = [
  { id: '1', description: 'Option 1' },
  { id: '2', description: 'Option 2' },
  { id: '3', description: 'Option 3' },
];

<Formik initialValues={{ category: '' }} onSubmit={values => console.log(values)}>
  <Field
    component={FormDropDownField}
    name="category"
    label="Category"
    items={items}
    addInputSelect={true}
  />
</Formik>;

const items = [
  { id: 'us', description: 'United States' },
  { id: 'ca', description: 'Canada' },
  { id: 'uk', description: 'United Kingdom' },
];

<Field
  component={FormDropDownField}
  name="country"
  label="Country"
  items={items}
  fullWidth
  variant="outlined" // <-- Example with outlined variant
/>;

<Field
  component={FormDropDownField}
  name="category"
  label="Category"
  items={categories}
  addInputSelect={true}
  selectText="Select a category"
  helperText="Please select a category from the list"
/>

<Formik
  initialValues={{ department: '' }}
  validationSchema={Yup.object({
    department: Yup.string().required('Department is required'),
  })}
  onSubmit={values => console.log(values)}
>
  {({ errors, touched }) => (
    <Form>
      <Field
        component={FormDropDownField}
        name="department"
        label="Department"
        items={departments}
        addInputSelect={true}
        required
        error={touched.department && Boolean(errors.department)}
        helperText={touched.department && errors.department}
      />
      <Button type="submit" variant="contained" color="primary">
        Submit
      </Button>
    </Form>
  )}
</Formik>

import {
  FORM_DATE_FORMAT,
  DATE_PICKER_DATE_FORMAT,
  DATE_PICKER_MONTH_YEAR_FORMAT
} from "form-input-fields/date";

// Use predefined formats
<Field
  component={FormDateField}
  name="birthDate"
  format={FORM_DATE_FORMAT.short}  // 'YYYY-MM-DD'
/>

// Or use custom format
<Field
  component={FormDateField}
  name="eventDate"
  format="DD/MM/YYYY HH:mm"  // Custom format
/>

import { Formik, Field } from 'formik';
import { FormDateField, FormDateFieldProps } from 'form-input-fields';
import { FORM_DATE_FORMAT } from 'form-input-fields/date';
import dayjs from 'dayjs';

<Formik
  initialValues={{ birthDate: null, appointmentDate: null }}
  onSubmit={values => console.log(values)}
>
  {/* Basic usage */}
  <Field
    component={FormDateField}
    name="birthDate"
    label="Birth Date"
    format={FORM_DATE_FORMAT.short}
  />

  {/* Advanced usage with validation */}
  <Field
    component={FormDateField}
    name="appointmentDate"
    label="Appointment Date"
    format="DD/MM/YYYY"
    minDate={dayjs()}
    disablePast={true}
    showTodayButton={true}
    showDateFormat={true}
    onChange={(value, context) => {
      console.log('Selected date:', value);
      console.log('Formatted value:', context.formattedValue);
    }}
  />
</Formik>;

<Field component={FormDateField} name="birthDate" label="Birth Date" format="DD/MM/YYYY" />

<Field
  component={FormDateField}
  name="startDate"
  label="Start Date"
  minDate={dayjs()}
  disablePast={true}
  showDateFormat={true}
  helperText="Select a future date"
/>

<Field
  component={FormDateField}
  name="appointmentDate"
  label="Appointment Date"
  format="DD MMMM YYYY"
  minDate={dayjs().add(1, 'day')}
  maxDate={dayjs().add(3, 'month')}
  showTodayButton={true}
  showDateFormat={true}
/>

<Field
  component={FormDateField}
  name="createdDate"
  label="Created Date"
  format="DD/MM/YYYY HH:mm"
  readOnly={true}
/>

<Field
  component={FormDateField}
  name="eventDate"
  label="Event Date"
  format="YYYY-MM-DD"
  onChange={(value, context) => {
    console.log('Selected date:', value);
    console.log('Formatted value:', context.formattedValue);
    console.log('Validation error:', context.validationError);

    // Custom logic here
    if (value && value.day() === 0) {
      alert('Events cannot be scheduled on Sundays');
    }
  }}
/>

<Field
  component={FormDateField}
  name="startDate"
  label="Start Date"
  format="DD/MM/YYYY"
  maxDate={values.endDate ? dayjs(values.endDate) : undefined}
/>

<Field
  component={FormDateField}
  name="endDate"
  label="End Date"
  format="DD/MM/YYYY"
  minDate={values.startDate ? dayjs(values.startDate) : undefined}
/>

import { Formik, Field } from 'formik';
import { FormCheckboxField } from 'form-input-fields';

// Basic usage
<FormCheckboxField
  id="terms"
  label="I agree to the terms and conditions"
  checked={false}
  onChange={(e) => console.log('Checked:', e.target.checked)}
/>

// With Formik
<Formik
  initialValues={{ termsAccepted: false }}
  onSubmit={(values) => console.log(values)}
>
  {({ values }) => (
    <Field
      name="termsAccepted"
      component={({ field, form }) => (
        <FormCheckboxField
          {...field}
          label="I agree to the terms and conditions"
          checked={field.value}
          onChange={(e) => {
            form.setFieldValue(field.name, e.target.checked);
          }}
        />
      )}
    />
  )}
</Formik>

<FormCheckboxField
  id="notifications"
  label="Enable email notifications"
  checked={notificationsEnabled}
  onChange={e => setNotificationsEnabled(e.target.checked)}
  color="secondary"
/>

<Formik
  initialValues={{
    termsAccepted: false,
    newsletter: true,
    notifications: false,
  }}
  onSubmit={values => console.log('Form values:', values)}
>
  {({ values }) => (
    <Form>
      <Field
        name="termsAccepted"
        component={({ field, form }) => (
          <FormCheckboxField
            {...field}
            label="I agree to the terms and conditions"
            checked={field.value}
            onChange={e => form.setFieldValue(field.name, e.target.checked)}
            required
          />
        )}
      />

      <Field
        name="newsletter"
        component={({ field, form }) => (
          <FormCheckboxField
            {...field}
            label="Subscribe to newsletter"
            checked={field.value}
            onChange={e => form.setFieldValue(field.name, e.target.checked)}
            color="secondary"
          />
        )}
      />

      <Button type="submit" variant="contained" color="primary">
        Submit
      </Button>
    </Form>
  )}
</Formik>

import { makeStyles } from '@mui/styles';

const useStyles = makeStyles(theme => ({
  root: {
    margin: theme.spacing(1),
  },
  labelRoot: {
    color: theme.palette.primary.main,
    fontWeight: 500,
  },
}));

function CustomCheckbox() {
  const classes = useStyles();

  return (
    <FormCheckboxField
      id="custom-checkbox"
      label="Custom Styled Checkbox"
      checked={false}
      onChange={() => {}}
      classes={{
        root: classes.root,
        label: classes.labelRoot,
      }}
      color="primary"
    />
  );
}

import { Formik, Field } from 'formik';
import { FormSwitch } from 'form-input-fields';

// Basic usage
<FormSwitch
  label="Enable Notifications"
  checked={notificationsEnabled}
  onChange={(e, checked) => setNotificationsEnabled(checked)}
/>

// With Formik
<Formik
  initialValues={{ notifications: false }}
  onSubmit={(values) => console.log(values)}
>
  <Field
    component={FormSwitch}
    name="notifications"
    label="Enable Notifications"
    helperText="Receive email notifications"
  />
</Formik>

<FormSwitch
  label="Enable Dark Mode"
  checked={darkModeEnabled}
  onChange={(e, checked) => setDarkModeEnabled(checked)}
  color="secondary"
  size="small"
/>

<Formik
  initialValues={{
    notifications: false,
    darkMode: true,
    autoSave: false,
  }}
  onSubmit={values => console.log('Form values:', values)}
>
  <Form>
    <Field
      component={FormSwitch}
      name="notifications"
      label="Enable Notifications"
      helperText="Receive email notifications"
      color="primary"
    />

    <Field
      component={FormSwitch}
      name="darkMode"
      label="Dark Mode"
      helperText="Use dark theme"
      color="secondary"
      labelPlacement="start"
    />

    <Field
      component={FormSwitch}
      name="autoSave"
      label="Auto Save"
      helperText="Automatically save changes"
      color="success"
      size="small"
    />

    <Button type="submit" variant="contained" color="primary">
      Save Settings
    </Button>
  </Form>
</Formik>

<FormSwitch
  label="Custom Styled Switch"
  checked={false}
  onChange={(e, checked) => console.log('Switch toggled:', checked)}
  className="custom-switch-class"
  color="warning"
  labelPlacement="top"
  helperText="This is a custom styled switch"
/>

<Field
  component={FormSwitch}
  name="advancedMode"
  label="Advanced Mode"
  onChange={(e, checked, context) => {
    console.log('Field name:', context.fieldName);
    console.log('Formik value:', context.formikValue);
    // Custom logic here
  }}
  helperText="Enable advanced features"
/>

<Formik
  initialValues={{ termsAccepted: false }}
  validate={values => {
    const errors = {};
    if (!values.termsAccepted) {
      errors.termsAccepted = 'You must accept the terms to continue';
    }
    return errors;
  }}
  onSubmit={values => console.log(values)}
>
  <Form>
    <Field
      component={FormSwitch}
      name="termsAccepted"
      label="I accept the terms and conditions"
      helperText="Please read and accept the terms"
      required
    />

    <Button type="submit" variant="contained" color="primary">
      Continue
    </Button>
  </Form>
</Formik>

import { Formik, Field } from 'formik';
import { FormDateTextField } from 'form-input-fields';

<Formik initialValues={{ eventDate: '' }} onSubmit={values => console.log(values)}>
  <Field component={FormDateTextField} name="eventDate" label="Event Date" format="MM/DD/YYYY" />
</Formik>;

<FormDateTextField
  name="birthDate"
  label="Birth Date"
  format="YYYY-MM-DD"
  helperText="Enter your date of birth"
  required
/>

import { Formik, Form, Field } from 'formik';
import { FormDateTextField, FormTextField } from 'form-input-fields';
import { Button } from '@mui/material';

const EventForm = () => (
  <Formik
    initialValues={{
      eventName: '',
      eventDate: '',
    }}
    onSubmit={values => {
      console.log('Form submitted:', values);
    }}
  >
    {({ isSubmitting }) => (
      <Form>
        <Field
          name="eventName"
          label="Event Name"
          component={FormTextField}
          fullWidth
          margin="normal"
        />

        <Field
          component={FormDateTextField}
          name="eventDate"
          label="Event Date"
          format="MM/DD/YYYY"
          required
          helperText="Select the event date"
          margin="normal"
        />

        <Button type="submit" variant="contained" color="primary" disabled={isSubmitting}>
          Submit
        </Button>
      </Form>
    )}
  </Formik>
);

<FormDateTextField
  name="appointmentTime"
  label="Appointment Time"
  format="dddd, MMMM D, YYYY h:mm A"
  helperText="Example: Monday, January 1, 2023 2:30 PM"
  required
/>

<FormDateTextField
  name="purchaseDate"
  label="Purchase Date"
  value="2023-05-15"
  disabled
  helperText="This field cannot be modified"
/>

<FormDateTextField
  name="expiryDate"
  label="Expiry Date"
  error={!!errors.expiryDate && touched.expiryDate}
  helperText={touched.expiryDate && errors.expiryDate}
  format="MM/DD/YYYY"
  required
/>

import { Formik, Field } from 'formik';
import { FormMaskField } from 'form-input-fields';

<Formik initialValues={{ phoneNumber: '', gameCode: '' }} onSubmit={values => console.log(values)}>
  <Field
    component={FormMaskField}
    name="phoneNumber"
    label="Phone Number"
    mask="(999) 999-9999"
    placeholder="Enter phone number"
  />

  <Field
    component={FormMaskField}
    name="gameCode"
    label="Game Code"
    mask="AAAAA"
    toUpperCase={true}
    returnCleanValue={true}
  />
</Formik>;

<Field
  component={FormMaskField}
  name="phone"
  label="Phone Number"
  mask="(999) 999-9999"
  placeholder="(555) 123-4567"
  variant="outlined" // <-- Example with outlined variant
/>

<Field
  component={FormMaskField}
  name="date"
  label="Date"
  mask="99/99/9999"
  placeholder="MM/DD/YYYY"
/>

<Field
  component={FormMaskField}
  name="productCode"
  label="Product Code"
  mask="AAA-999-AAA"
  toUpperCase={true}
  returnCleanValue={true}
/>

<Field
  component={FormMaskField}
  name="creditCard"
  label="Credit Card"
  mask="9999 9999 9999 9999"
  placeholder="1234 5678 9012 3456"
/>

<Field
  component={FormMaskField}
  name="customField"
  label="Custom Field"
  mask="999-AAA"
  onChange={event => {
    console.log('Masked value:', event.target.value);
    console.log('Clean value:', event.target.cleanValue);
    console.log('Raw input:', event.target.rawValue);
  }}
  variant="outlined" // <-- Example with outlined variant
/>

<Field
  component={FormMaskField}
  name="gameCode"
  label="Game Code"
  mask="AAA-999"
  showMaskPattern={true}
  toUpperCase={true}
/>
// This will show "Pattern: AAA-999" as helper text below the input

<Field
  component={FormMaskField}
  name="phoneNumber"
  label="Phone Number"
  mask="(999) 999-9999"
  showPlaceholder={true}
/>
// This will show "(___) ___-____" as placeholder text in the input field

import React from 'react';
import { Formik, Form, Field, FormikHelpers, FormikErrors } from 'formik';
import Container from '@mui/material/Container';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import { Grid } from '@mui/material';
import Paper from '@mui/material/Paper';
import Alert from '@mui/material/Alert';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { FormMaskField } from 'form-input-fields';
import './App.css';

interface FormValues {
  phone: string;
  date: string;
  creditCard: string;
  licensePlate: string;
  hexColor: string;
  customCode: string;
  socialSecurity: string;
  postalCode: string;
}

interface FormFieldEvent extends Omit<React.ChangeEvent<HTMLInputElement>, 'target'> {
  target: HTMLInputElement & {
    value: string;
    cleanValue: string;
    rawValue: string;
    name: string;
  };
}

// Create a Material-UI theme
const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
  },
});

// Validation schema
const validateForm = (values: FormValues): FormikErrors<FormValues> => {
  const errors: Partial<FormValues> = {};

  if (!values.phone) {
    errors.phone = 'Phone number is required';
  } else if (values.phone.replace(/\D/g, '').length < 10) {
    errors.phone = 'Phone number must be 10 digits';
  }

  if (!values.date) {
    errors.date = 'Date is required';
  }

  if (!values.creditCard) {
    errors.creditCard = 'Credit card is required';
  } else if (values.creditCard.replace(/\D/g, '').length < 16) {
    errors.creditCard = 'Credit card must be 16 digits';
  }

  if (!values.licensePlate) {
    errors.licensePlate = 'License plate is required';
  }

  return errors;
};

function App() {
  const initialValues: FormValues = {
    phone: '',
    date: '',
    creditCard: '',
    licensePlate: '',
    hexColor: '',
    customCode: '',
    socialSecurity: '',
    postalCode: '',
  };

  const handleSubmit = (values: FormValues, { setSubmitting }: FormikHelpers<FormValues>) => {
    console.log('Form Values:', values);
    setTimeout(() => {
      alert('Form submitted! Check console for values.');
      setSubmitting(false);
    }, 400);
  };

  const handleCustomChange = (fieldName: keyof FormValues) => (event: FormFieldEvent) => {
    console.log(`${fieldName} changed:`, {
      masked: event.target.value,
      clean: event.target.cleanValue,
      raw: event.target.rawValue,
    });
    return event;
  };

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Container maxWidth="lg" sx={{ py: 4 }}>
        <Typography variant="h3" component="h1" gutterBottom align="center">
          FormMaskField Demo
        </Typography>

        <Typography variant="subtitle1" align="center" color="text.secondary" paragraph>
          A comprehensive example showcasing the FormMaskField component with various mask patterns
          and configurations
        </Typography>

        <Formik initialValues={initialValues} validate={validateForm} onSubmit={handleSubmit}>
          {({ values, isSubmitting, errors, touched }) => (
            <Form>
              <Grid container spacing={3}>
                {/* Basic Masks Section */}
                <Grid>
                  <Paper elevation={2} sx={{ p: 3 }}>
                    <Typography variant="h5" gutterBottom>
                      Basic Input Masks
                    </Typography>

                    <Grid container spacing={2}>
                      <Grid>
                        <Field
                          name="phone"
                          component={FormMaskField}
                          label="Phone Number"
                          mask="(999) 999-9999"
                          showMaskPattern={true}
                          showPlaceholder={true}
                          helperText="US phone number format"
                          onChange={handleCustomChange('phone')}
                          variant="outlined" // <-- Example with outlined variant
                        />
                      </Grid>

                      <Grid>
                        <Field
                          name="date"
                          component={FormMaskField}
                          label="Date"
                          mask="99/99/9999"
                          showMaskPattern={true}
                          showPlaceholder={true}
                          helperText="MM/DD/YYYY format"
                        />
                      </Grid>

                      <Grid>
                        <Field
                          name="socialSecurity"
                          component={FormMaskField}
                          label="Social Security Number"
                          mask="999-99-9999"
                          showMaskPattern={true}
                          showPlaceholder={true}
                          returnCleanValue={true}
                          helperText="Clean value returned (no dashes)"
                        />
                      </Grid>

                      <Grid>
                        <Field
                          name="postalCode"
                          component={FormMaskField}
                          label="ZIP Code"
                          mask="99999-9999"
                          showMaskPattern={true}
                          showPlaceholder={true}
                          helperText="US ZIP+4 format"
                        />
                      </Grid>
                    </Grid>
                  </Paper>
                </Grid>

                {/* Advanced Masks Section */}
                <Grid>
                  <Paper elevation={2} sx={{ p: 3 }}>
                    <Typography variant="h5" gutterBottom>
                      Advanced Input Masks
                    </Typography>

                    <Grid container spacing={2}>
                      <Grid>
                        <Field
                          name="creditCard"
                          component={FormMaskField}
                          label="Credit Card Number"
                          mask="9999-9999-9999-9999"
                          showMaskPattern={true}
                          showPlaceholder={true}
                          helperText="16-digit credit card number"
                          onChange={handleCustomChange('creditCard')}
                        />
                      </Grid>

                      <Grid>
                        <Field
                          name="licensePlate"
                          component={FormMaskField}
                          label="License Plate"
                          mask="AAA-999"
                          toUpperCase={true}
                          showMaskPattern={true}
                          showPlaceholder={true}
                          helperText="3 letters + 3 numbers (auto uppercase)"
                          onChange={handleCustomChange('licensePlate')}
                        />
                      </Grid>

                      <Grid>
                        <Field
                          name="hexColor"
                          component={FormMaskField}
                          label="Hex Color Code"
                          mask="#######"
                          toUpperCase={true}
                          showMaskPattern={true}
                          showPlaceholder={true}
                          placeholderChar="0"
                          helperText="6-digit hex color code"
                        />
                      </Grid>

                      <Grid>
                        <Field
                          name="customCode"
                          component={FormMaskField}
                          label="Custom Code"
                          mask="**-999-AA"
                          toUpperCase={true}
                          returnCleanValue={true}
                          showMaskPattern={true}
                          showPlaceholder={true}
                          helperText="Alphanumeric + digits + letters"
                          onChange={handleCustomChange('customCode')}
                        />
                      </Grid>
                    </Grid>
                  </Paper>
                </Grid>

                {/* Current Values Display */}
                <Grid>
                  <Paper elevation={2} sx={{ p: 3 }}>
                    <Typography variant="h5" gutterBottom>
                      Current Form Values
                    </Typography>

                    <Box sx={{ mt: 2 }}>
                      <Typography
                        variant="body2"
                        component="pre"
                        sx={{
                          backgroundColor: '#f5f5f5',
                          p: 2,
                          borderRadius: 1,
                          overflow: 'auto',
                          fontSize: '0.875rem',
                        }}
                      >
                        {JSON.stringify(values, null, 2)}
                      </Typography>
                    </Box>
                  </Paper>
                </Grid>

                {/* Form Errors Display */}
                {Object.keys(errors).length > 0 && Object.keys(touched).length > 0 && (
                  <Grid>
                    <Alert severity="error">
                      <Typography variant="h6" gutterBottom>
                        Form Validation Errors:
                      </Typography>
                      <ul>
                        {Object.entries(errors).map(
                          ([field, error]) =>
                            touched[field] && (
                              <li key={field}>
                                <strong>{field}:</strong> {error}
                              </li>
                            ),
                        )}
                      </ul>
                    </Alert>
                  </Grid>
                )}

                {/* Submit Button */}
                <Grid>
                  <Box sx={{ display: 'flex', justifyContent: 'center', mt: 2 }}>
                    <Button
                      type="submit"
                      variant="contained"
                      size="large"
                      disabled={isSubmitting}
                      sx={{ minWidth: 200 }}
                    >
                      {isSubmitting ? 'Submitting...' : 'Submit Form'}
                    </Button>
                  </Box>
                </Grid>
              </Grid>
            </Form>
          )}
        </Formik>
      </Container>
    </ThemeProvider>
  );
}

export default App;

import { Formik, Field } from 'formik';
import { FormTextField, FormDropDownField, FormSwitch } from 'form-input-fields';

// Basic sx prop usage
<Field
  component={FormTextField}
  name="username"
  label="Username"
  sx={{
    backgroundColor: 'background.paper',
    borderRadius: 2,
    '& .MuiOutlinedInput-root': {
      '& fieldset': {
        borderColor: 'primary.main',
      },
    },
  }}
/>

// Responsive styling with sx
<Field
  component={FormDropDownField}
  name="category"
  label="Category"
  items={categories}
  sx={{
    width: { xs: '100%', md: '50%' },
    mx: { xs: 0, md: 2 },
  }}
/>

// Conditional styling with sx
<Field
  component={FormSwitch}
  name="notifications"
  label="Enable Notifications"
  sx={{
    '& .MuiSwitch-switchBase.Mui-checked': {
      color: 'success.main',
    },
    '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
      backgroundColor: 'success.main',
    },
  }}
/>

// Before (inconsistent structure)
<div className="custom-field">
  <label>Field Label</label>
  <input />
  <span className="error">Error message</span>
</div>

// After (standardized FormControl wrapper)
<FormControl
  error={hasError}
  fullWidth
  variant="outlined"
  sx={{ mb: 2 }}
>
  <InputLabel htmlFor="field-id">Field Label</InputLabel>
  <Field
    component={FormTextField}
    id="field-id"
    name="fieldName"
    label="Field Label"
  />
  <FormHelperText>{hasError ? errorMessage : helperText}</FormHelperText>
</FormControl>

import { useTheme } from '@mui/material/styles';

function ThemedForm() {
  const theme = useTheme();

  return (
    <Field
      component={FormTextField}
      name="customField"
      label="Custom Styled Field"
      sx={{
        // Using theme values
        backgroundColor: theme.palette.grey[50],
        borderColor: theme.palette.primary.main,

        // Hover effects
        '&:hover': {
          backgroundColor: theme.palette.grey[100],
        },

        // Focus styles
        '& .Mui-focused': {
          borderColor: theme.palette.secondary.main,
        },

        // Custom styles for different states
        '&.Mui-error': {
          borderColor: theme.palette.error.main,
        },
      }}
    />
  );
}

<Box sx={{ display: 'flex', flexDirection: { xs: 'column', md: 'row' }, gap: 2 }}>
  <Field
    component={FormTextField}
    name="firstName"
    label="First Name"
    sx={{
      flex: 1,
      // Mobile-first responsive design
      minWidth: { xs: '100%', sm: 200 },
    }}
  />

  <Field
    component={FormTextField}
    name="lastName"
    label="Last Name"
    sx={{
      flex: 1,
      minWidth: { xs: '100%', sm: 200 },
    }}
  />
</Box>

<Field
  component={FormSwitch}
  name="premiumFeature"
  label="Enable Premium Features"
  sx={{
    // Style based on checked state
    '& .MuiSwitch-switchBase': {
      color: theme => (premiumEnabled ? theme.palette.success.main : 'default'),
    },

    // Animation for state changes
    transition: 'all 0.3s ease',

    // Custom styling when disabled
    '&.Mui-disabled': {
      opacity: 0.6,
    },
  }}
/>

// Before
<Field component={FormTextField} name="username" className="custom-text-field" label="Username" />

// After
<Field
  component={FormTextField}
  name="username"
  label="Username"
  sx={{
    backgroundColor: 'background.paper',
    borderRadius: 2,
    '& .MuiOutlinedInput-root': {
      '& fieldset': {
        borderColor: 'primary.main',
      },
    },
  }}
/>