@catalystsoftware/ui 1.0.11 → 1.0.14

package/dist/components/catalyst-ui/x/input-x.tsx

@@ -0,0 +1,2263 @@
+import React, { useState, useEffect, useMemo, useRef, useId, ChangeEvent } from 'react'
+import { cva } from 'class-variance-authority'
+import { cn, inputVariants, Label, Input, Button, Field, FieldLabel, FieldDescription, FieldError, Select, useValidateCreditCard, useToasted  } from '~/components/catalyst-ui'
+import { 
+  UserIcon, MailIcon, EyeIcon, EyeOffIcon, 
+  SearchIcon, MicIcon, LoaderCircleIcon, 
+  SendHorizonalIcon, CircleXIcon, PlusIcon, 
+  MinusIcon, ChevronUpIcon, ChevronDownIcon,
+  CheckIcon, XIcon, CreditCardIcon, ArrowRightIcon,
+  DownloadIcon, SendIcon
+} from 'lucide-react'
+import { Asterisk, Abc } from '@catalystsoftware/icons'
+
+
+/**
+* ★ ━━━━ ☆ ━━━━ InputX ━━━━ ☆ ━━━━ ★
+* type InputType = 
+*   | 'Default' | 'Label' | 'Required' | 'Disabled' | 'ReadOnly' | 'HintText' | 'Error'               // Basic States
+*   | 'ColoredRing' | 'StartIcon' | 'EndIcon' | 'StartTextAddOn' | 'EndTextAddOn' | 'TextAddOns'       // Icons & Add-ons
+*   | 'StartAddOn' | 'EndAddOn' | 'AddOns' | 'Filled' | 'OverlappingLabel' | 'FloatingLabel'          // Layout
+*   | 'InsetLabel' | 'Password' | 'File' | 'StartSelect' | 'EndSelect' | 'EndInlineButton'           // Special Inputs
+*   | 'IconButton' | 'EndButton' | 'CharacterLimit' | 'CharacterLeft' | 'Clear' | 'Search'           // Interactive
+*   | 'SearchIcon' | 'SearchLoader' | 'PlusMinusButtons' | 'EndButtons' | 'StackedButtons'          // Number Inputs
+*   | 'PlusMinusButtonsRounded' | 'EndButtonsRounded' | 'StackedChevrons' | 'PasswordStrength'      // Enhanced
+*   | 'CcInput' | 'InputWithCharactersLeft' | 'EndHelperText'                                       // Advanced
+* 
+* ★ ━━━━ ☆ ━━━━ USAGE ━━━━ ☆ ━━━━ ★
+* 
+* ★ ━━━━━━━━━ Basic Inputs ━━━━━━━━━ ★
+* ```jsx
+* // Default Input
+* <InputX placeholder="Enter text" />
+* 
+* // Label Input
+* <InputX input="Label" label="Username" placeholder="Enter username" />
+* 
+* // Required Input
+* <InputX input="Required" label="Email" placeholder="Enter email" required />
+* 
+* // Disabled Input
+* <InputX input="Disabled" label="Disabled Field" value="Cannot edit" disabled />
+* 
+* // Read-only Input
+* <InputX input="ReadOnly" label="Read-only Field" value="Read only value" readOnly />
+* 
+* // Error State
+* <InputX input="Error" label="Email" error="Invalid email address" />
+* 
+* // Hint Text
+* <InputX input="HintText" label="Password" description="Must be at least 8 characters" />
+* ```
+* 
+* ★ ━━━━━━━━━ Icons & Add-ons ━━━━━━━━━ ★
+* ```jsx
+* // Start Icon
+* <InputX input="StartIcon" icon={UserIcon} label="Username" />
+* 
+* // End Icon
+* <InputX input="EndIcon" icon={MailIcon} label="Email" />
+* 
+* // Start Text Add-on (inline)
+* <InputX input="StartTextAddOn" addOnText="https://" label="Website" />
+* 
+* // End Text Add-on (inline)
+* <InputX input="EndTextAddOn" addOnText=".com" label="Domain" />
+* 
+* // Text Add-ons (both sides)
+* <InputX input="TextAddOns" startAddOn="https://" endAddOn=".com" label="Website" />
+* 
+* // Start Add-on (separated)
+* <InputX input="StartAddOn" addOnText="https://" label="Website" />
+* 
+* // End Add-on (separated)
+* <InputX input="EndAddOn" addOnText=".com" label="Domain" />
+* 
+* // Add-ons (both sides separated)
+* <InputX input="AddOns" startAddOn="https://" endAddOn=".com" label="Website" />
+* 
+* // Colored Focus Ring
+* <InputX input="ColoredRing" label="Custom Focus" />
+* 
+* // End Helper Text
+* <InputX input="EndHelperText" description="Helper text aligned right" />
+* ```
+* 
+* ★ ━━━━━━━━━ Label Variations ━━━━━━━━━ ★
+* ```jsx
+* // Filled Background
+* <InputX input="Filled" label="Filled Input" />
+* 
+* // Overlapping Label
+* <InputX input="OverlappingLabel" label="Overlapping Label" />
+* 
+* // Floating Label
+* <InputX input="FloatingLabel" label="Floating Label" />
+* 
+* // Inset Label
+* <InputX input="InsetLabel" label="Inset Label" />
+* ```
+* 
+* ★ ━━━━━━━━━ Special Input Types ━━━━━━━━━ ★
+* ```jsx
+* // Password with Visibility Toggle
+* const [password, setPassword] = useState('');
+* <InputX input="Password" value={password} setValue={setPassword} label="Password" />
+* 
+* // File Input
+* <InputX input="File" label="Upload File" />
+* 
+* // Email Input
+* <InputX input="Email" type="email" label="Email Address" />
+* 
+* // Start with Select
+* <InputX input="StartSelect" 
+*   selectOptions={['https://', 'http://']} 
+*   defaultSelectValue="https://" 
+*   label="Protocol" 
+* />
+* 
+* // End with Select
+* <InputX input="EndSelect" 
+*   selectOptions={['.com', '.org', '.net']} 
+*   defaultSelectValue=".com" 
+*   label="Domain" 
+* />
+* ```
+* 
+* ★ ━━━━━━━━━ Interactive Features ━━━━━━━━━ ★
+* ```jsx
+* // Clearable Input
+* const [value, setValue] = useState('Click to clear');
+* <InputX input="Clear" value={value} setValue={setValue} label="Clearable" />
+* 
+* // Character Limit
+* const [text, setText] = useState('');
+* <InputX input="CharacterLimit" value={text} setValue={setText} maxLength={50} label="Limited Text" />
+* 
+* // Characters Left Counter
+* <InputX input="CharacterLeft" value={text} setValue={setText} maxLength={30} label="Remaining Characters" />
+* 
+* // End Inline Button
+* <InputX input="EndInlineButton" 
+*   onClick={() => console.log('Submitted')}
+*   label="Subscribe" 
+* />
+* 
+* // End Button
+* <InputX input="EndButton" 
+*   buttonText="Submit"
+*   onClick={() => console.log('Submitted')}
+*   label="Form Input" 
+* />
+* 
+* // Icon Button
+* <InputX input="IconButton" 
+*   icon={SearchIcon}
+*   onClick={() => console.log('Search')}
+*   label="Search" 
+* />
+* ```
+* 
+* ★ ━━━━━━━━━ Search Inputs ━━━━━━━━━ ★
+* ```jsx
+* // Basic Search
+* <InputX input="Search" placeholder="Search..." />
+* 
+* // Search with Icon
+* <InputX input="SearchIcon" 
+*   onClick={() => console.log('Voice search')}
+*   label="Search with Voice" 
+* />
+* 
+* // Search with Loader
+* const [search, setSearch] = useState('');
+* <InputX input="SearchLoader" value={search} setValue={setSearch} label="Live Search" />
+* 
+* // Search with Icon and Button
+* <InputX input="SearchWithIconAndButton"
+*   icon={ArrowRightIcon}
+*   onClick={() => console.log('Search')}
+*   label="Advanced Search"
+* />
+* 
+* // Search with Keyboard Shortcut
+* <InputX input="SearchInputKBD" 
+*   shortcut="k"
+*   shortcutAction={() => console.log('Shortcut triggered')}
+*   label="Quick Search" 
+* />
+* 
+* // Search with Loader Indicator
+* <InputX input="SearchInputLoader"
+*   value={search}
+*   setValue={setSearch}
+*   label="Loading Search"
+* />
+* ```
+* 
+* ★ ━━━━━━━━━ Number Inputs ━━━━━━━━━ ★
+* ```jsx
+* // Plus/Minus Buttons
+* const [value, setValue] = useState(1024);
+* <InputX input="PlusMinusButtons" value={value} setValue={setValue} label="Quantity" />
+* 
+* // End Buttons
+* <InputX input="EndButtons" value={value} setValue={setValue} label="Amount" />
+* 
+* // Stacked Buttons
+* <InputX input="StackedButtons" value={value} setValue={setValue} label="Stacked Controls" />
+* 
+* // Plus/Minus Buttons (Rounded)
+* <InputX input="PlusMinusButtonsRounded" value={value} setValue={setValue} label="Rounded Style" />
+* 
+* // End Buttons (Rounded)
+* <InputX input="EndButtonsRounded" value={value} setValue={setValue} label="Inline Controls" />
+* 
+* // Stacked Chevrons
+* <InputX input="StackedChevrons" value={value} setValue={setValue} label="Chevron Controls" />
+* 
+* // Number with Plus/Minus Buttons
+* <InputX input="NumberWithPlusMinusButtons" value={value} setValue={setValue} label="Counter" />
+* 
+* // Number with Chevrons
+* <InputX input="NumberWithChevrons" value={value} setValue={setValue} label="Chevron Counter" />
+* ```
+* 
+* ★ ━━━━━━━━━ Advanced Inputs ━━━━━━━━━ ★
+* ```jsx
+* // Password Strength Indicator
+* const [password, setPassword] = useState('');
+* <InputX input="PasswordStrength" 
+*   password={password} 
+*   setPassword={setPassword} 
+*   label="Secure Password" 
+* />
+* 
+* // Credit Card Input
+* const [ccNumber, setCcNumber] = useState('');
+* <InputX input="CcInput" 
+*   value={ccNumber} 
+*   setValue={setCcNumber} 
+*   label="Credit Card" 
+* />
+* 
+* // Input with Characters Left
+* const [text, setText] = useState('');
+* <InputX input="InputWithCharactersLeft" 
+*   value={text} 
+*   setValue={setText} 
+*   maxLength={100}
+*   label="Description" 
+* />
+* 
+* // Input with End Inline Add-on
+* <InputX input="EndInlineAddOn" 
+*   addOnText=".com"
+*   label="Website" 
+* />
+* 
+* // Input with Inline Add-ons
+* <InputX input="InlineAddOns" 
+*   startAddOn="€" 
+*   endAddOn="EUR"
+*   label="Price" 
+* />
+* 
+* // Input with Inline Start and End Add-on
+* <InputX input="InlineStartAndEndAddOn" 
+*   startAddOn="https://" 
+*   endAddOn=".com"
+*   label="Website" 
+* />
+* 
+* // Input with Inner Tags
+* const [tagInput, setTagInput] = useState('');
+* const [tags, setTags] = useState(['Red', 'Blue']);
+* <InputX input="InnerTags" 
+*   value={tagInput} 
+*   setValue={setTagInput}
+*   tags={tags}
+*   setTags={setTags}
+*   label="Tags" 
+* />
+* 
+* // Input with Mask
+* const [masked, setMasked] = useState('');
+* <InputX input="Mask" 
+*   value={masked} 
+*   setValue={setMasked}
+*   mask="AA99 AAA"
+*   label="License Plate" 
+* />
+* 
+* // Input with Password Strength
+* <InputX input="PasswordStrengthIndicator" 
+*   password={password} 
+*   setPassword={setPassword} 
+*   label="Strong Password" 
+* />
+* 
+* // Input with Tags
+* const [tagValue, setTagValue] = useState('');
+* <InputX input="Tags" 
+*   value={tagValue} 
+*   setValue={setTagValue}
+*   tags={tags}
+*   setTags={setTags}
+*   label="Add Tags" 
+* />
+* ```
+* 
+* ★ ━━━━━━━━━ Props ━━━━━━━━━ ★
+* 
+* Common Props (available for most variants):
+* - `input`: InputType - Specifies which variant to use
+* - `label`: string - Input label text
+* - `description`: string - Helper/description text
+* - `error`: string - Error message text
+* - `value`: string | number - Input value (controlled)
+* - `setValue`: (value: string | number) => void - Value change callback
+* - `placeholder`: string - Placeholder text
+* - `variant`: string - Catalyst UI variant
+* - `size`: string - Input size
+* - `rounded`: string | boolean - Border radius
+* - `state`: string - Input state
+* - `className`: string - Additional CSS classes
+* - `disabled`: boolean - Disabled state
+* - `readOnly`: boolean - Read-only state
+* - `required`: boolean - Required field indicator
+* 
+* Variant-Specific Props:
+* 
+* Icon Variants:
+* - `icon`: IconComponent - Lucide icon component
+* - `iconCN`: string - Icon CSS classes
+* 
+* Add-on Variants:
+* - `addOnText`: string - Text to display as add-on
+* - `startAddOn`: string - Start add-on text
+* - `endAddOn`: string - End add-on text
+* 
+* Select Variants:
+* - `selectOptions`: string[] - Array of select options
+* - `defaultSelectValue`: string - Default selected value
+* 
+* Button Variants:
+* - `buttonText`: string - Button label text
+* - `onClick`: () => void - Button click handler
+* - `bCN`: string - Button CSS classes
+* 
+* Number Input Variants:
+* - `maxLength`: number - Character limit
+* - `mask`: string - Input mask pattern (e.g., "AA99 AAA")
+* 
+* Password Variants:
+* - `password`: string - Password value
+* - `setPassword`: (password: string) => void - Password update callback
+* 
+* Credit Card Input:
+* - Uses `useValidateCreditCard()` hook internally
+* 
+* Tag Input Variants:
+* - `tags`: string[] - Array of tags
+* - `setTags`: (tags: string[]) => void - Tags update callback
+* 
+* Search Variants:
+* - `shortcut`: string - Keyboard shortcut key
+* - `shortcutAction`: () => void - Shortcut action callback
+* 
+* ★ ━━━━━━━━━ Import & Dependencies ━━━━━━━━━ ★
+* ```javascript
+* import { InputX } from "./InputX";
+* 
+* // Required dependencies
+* import { 
+*   UserIcon, MailIcon, EyeIcon, EyeOffIcon, 
+*   SearchIcon, MicIcon, LoaderCircleIcon, 
+*   SendHorizonalIcon, CircleXIcon, PlusIcon, 
+*   MinusIcon, ChevronUpIcon, ChevronDownIcon,
+*   CheckIcon, XIcon, CreditCardIcon, ArrowRightIcon,
+*   DownloadIcon, SendIcon
+* } from 'lucide-react';
+* 
+* // For custom icons
+* import { Asterisk, Abc } from '@catalystsoftware/icons';
+* 
+* // Required hooks
+* import { useValidateCreditCard, useToasted } from '~/components/catalyst-ui';
+* ```
+* 
+* ★ ━━━━━━━━━ State Management Examples ━━━━━━━━━ ★
+* ```typescript
+* // Basic text input
+* const [value, setValue] = useState('');
+* 
+* // Number input with controls
+* const [numberValue, setNumberValue] = useState(0);
+* 
+* // Password with strength
+* const [password, setPassword] = useState('');
+* 
+* // Credit card input
+* const [ccNumber, setCcNumber] = useState('');
+* 
+* // Tags input
+* const [tagInput, setTagInput] = useState('');
+* const [tags, setTags] = useState<string[]>([]);
+* 
+* // Search with loading
+* const [search, setSearch] = useState('');
+* ```
+* 
+* ★ ━━━━━━━━━ Features ━━━━━━━━━ ★
+* - 🎨 **70+ variants**: Comprehensive input types for all use cases
+* - 🔒 **Password strength**: Visual indicator with requirements
+* - 💳 **Credit card validation**: Auto-detects card type
+* - 🔢 **Number controls**: Plus/minus buttons, chevrons, stacked controls
+* - 🔍 **Search variants**: With loading, voice, shortcuts
+* - 🏷️ **Tag support**: Inline and separate tag inputs
+* - 🎭 **Mask support**: Pattern-based input formatting
+* - ⌨️ **Keyboard shortcuts**: Configurable shortcut support
+* - 📱 **Responsive**: All variants work on mobile
+* - ♿ **Accessible**: Proper ARIA labels and focus management
+* 
+*/
+
+
+export function InputX({ input = 'Default', children, ...props }: any) {
+  switch (input) {
+    case 'Label':
+      return <LabelInput {...props} />
+    case 'Required':
+      return <InputRequired {...props} />
+    case 'Disabled':
+      return <InputDisabled {...props} />
+    case 'ReadOnly':
+      return <InputReadOnly {...props} />
+    case 'HintText':
+      return <InputHintText {...props} />
+    case 'Error':
+      return <InputError {...props} />
+    case 'ColoredRing':
+      return <InputColoredRing {...props} />
+    case 'StartIcon':
+      return <InputStartIcon {...props} />
+    case 'EndIcon':
+      return <InputEndIcon {...props} />
+    case 'StartTextAddOn':
+      return <InputStartTextAddOn {...props} />
+    case 'EndTextAddOn':
+      return <InputEndTextAddOn {...props} />
+    case 'TextAddOns':
+      return <InputTextAddOns {...props} />
+    case 'StartAddOn':
+      return <InputStartAddOn {...props} />
+    case 'EndAddOn':
+      return <InputEndAddOn {...props} />
+    case 'AddOns':
+      return <InputAddOns {...props} />
+    case 'Filled':
+      return <InputFilled {...props} />
+    case 'OverlappingLabel':
+      return <InputOverlappingLabel {...props} />
+    case 'FloatingLabel':
+      return <InputFloatingLabel {...props} />
+    case 'InsetLabel':
+      return <InputInsetLabel {...props} />
+    case 'Password':
+      return <InputPassword {...props} />
+    case 'File':
+      return <InputFile {...props} />
+    case 'StartSelect':
+      return <InputStartSelect {...props} />
+    case 'EndSelect':
+      return <InputEndSelect {...props} />
+    case 'EndInlineButton':
+      return <InputEndInlineButton {...props} />
+    case 'IconButton':
+      return <InputIconButton {...props} />
+    case 'EndButton':
+      return <InputEndButton {...props} />
+    case 'CharacterLimit':
+      return <InputCharacterLimit {...props} />
+    case 'CharacterLeft':
+      return <InputCharacterLeft {...props} />
+    case 'Clear':
+      return <InputClear {...props} />
+    case 'Search':
+      return <InputSearch {...props} />
+    case 'SearchIcon':
+      return <InputSearchIcon {...props} />
+    case 'SearchLoader':
+      return <InputSearchLoader {...props} />
+    case 'PlusMinusButtons':
+      return <InputPlusMinusButtons {...props} />
+    case 'EndButtons':
+      return <InputEndButtons {...props} />
+    case 'StackedButtons':
+      return <InputStackedButtons {...props} />
+    case 'PlusMinusButtonsRounded':
+      return <InputPlusMinusButtonsRounded {...props} />
+    case 'EndButtonsRounded':
+      return <InputEndButtonsRounded {...props} />
+    case 'StackedChevrons':
+      return <InputStackedChevrons {...props} />
+    case 'PasswordStrength':
+      return <InputPasswordStrength {...props} />
+    case 'CcInput':
+      return <CcInput {...props} />
+    case 'InputWithCharactersLeft':
+      return <InputWithCharactersLeft {...props} />
+    case 'EndButton':
+      return <InputWithEndButton {...props} />
+    case 'EndIconButton':
+      return <InputWithEndIconButton {...props} />
+    case 'EndInlineAddOn':
+      return <InputWithEndInlineAddOn {...props} />
+    case 'InlineAddOns':
+      return <InputWithInlineAddOns {...props} />
+    case 'InlineStartAndEndAddOn':
+      return <InputWithInlineStartAndEndAddOn {...props} />
+    case 'InnerTags':
+      return <InputWithInnerTags {...props} />
+    case 'Mask':
+      return <InputWithMask {...props} />
+    case 'PasswordStrengthIndicator':
+      return <InputWithPasswordStrengthIndicator {...props} />
+    case 'Tags':
+      return <InputWithTags {...props} />
+    case 'NumberWithChevrons':
+      return <NumberInputWithChevrons {...props} />
+    case 'NumberWithPlusMinusButtons':
+      return <NumberInputWithPlusMinusButtons {...props} />
+    case 'SearchWithIconAndButton':
+      return <InSearchInputWithIconAndButtonput {...props} />
+    case 'SearchInputKBD':
+      return <SearchInputWithKBD {...props} />
+    case 'SearchInputLoader':
+      return <SearchInputWithLoader {...props} />
+    case 'SearchInputWithIconAndButton':
+      return <SearchInputWithIconAndButton {...props} />
+    case 'PlusMinusButtons':
+      return <InputWithPlusMinusButtons {...props} />
+    case 'EndButtons':
+      return <InputWithEndButtons {...props} />
+    case 'StackedButtons':
+      return <InputWithStackedButtons {...props} />
+    case 'PlusMinusButtonsRounded':
+      return <InputWithPlusMinusButtonsRounded {...props} />
+    case 'EndButtonsRounded':
+      return <InputWithEndButtonsRounded {...props} />
+    case 'StackedChevrons':
+      return <InputWithStackedChevrons {...props} />
+    case 'Email':
+      return <Email {...props} />
+    case 'Email':
+      return <Email {...props} />
+    case 'EndHelperText':
+      return <InputEndHelperText {...props} />
+    default:
+      return <InputDefault {...props} />
+  }
+}
+// Password strength requirements
+const requirements = [
+  { regex: /.{8,}/, text: 'At least 8 characters' },
+  { regex: /[0-9]/, text: 'At least 1 number' },
+  { regex: /[a-z]/, text: 'At least 1 lowercase letter' },
+  { regex: /[A-Z]/, text: 'At least 1 uppercase letter' },
+  { regex: /[^A-Za-z0-9]/, text: 'At least 1 special character' }
+]
+
+const useCharacterLimit = ({ maxLength, value, setValue } ) => {
+  const [characterCount, setCharacterCount] = useState(0)
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.value.length <= maxLength) {
+      setValue(e.target.value)
+      setCharacterCount(e.target.value.length)
+    }
+  }
+
+  return { value, characterCount, handleChange, maxLength }
+}
+
+const InputDefault = ({ label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <Input className={cn(inputVariants({ variant, size, rounded, state }), className)} {...props} />
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const Email = ({ type = 'email', placeholder = 'Email address', label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <Input type={type} placeholder={placeholder} className={cn(inputVariants({ variant, size, rounded, state }), className)} {...props} />
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const LabelInput = ({ label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <Input className={cn(inputVariants({ variant, size, rounded, state }), className)} {...props} />
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputRequired = ({ label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  return (
+    <Field>
+      {label && <FieldLabel>{label} <span className='text-destructive'>*</span></FieldLabel>}
+      <Input className={cn(inputVariants({ variant, size, rounded, state }), className)} required {...props} />
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputDisabled = ({ label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  const id = useId()
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <Input className={cn(inputVariants({ variant, size, rounded, state }), className)} disabled {...props} />
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputReadOnly = ({ label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <Input className={cn(inputVariants({ variant, size, rounded, state }), 'read-only:bg-muted', className)} readOnly {...props} />
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputEndHelperText = ({ label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <Input className={cn(inputVariants({ variant, size, rounded, state }), className)} {...props} />
+      {description && <FieldDescription className='text-end'>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputHintText = ({ label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  const id = useId()
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      {description && <FieldDescription className='text-muted-foreground text-xs'>{description}</FieldDescription>}
+      <Input className={cn(inputVariants({ variant, size, rounded, state }), className)} {...props} />
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputError = ({  error, label, description, variant, size, rounded, state, className, ...props }: any) => {
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <Input className={cn(inputVariants({ variant, size, rounded, state }), className)} {...props} />
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputColoredRing = ({ label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  const id = useId()
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <Input className={cn(inputVariants({ variant, size, rounded, state }), 'focus-visible:border-indigo-500 focus-visible:ring-indigo-500/20 dark:focus-visible:ring-indigo-500/40', className)} {...props} />
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputStartIcon = ({ icon: Icon = UserIcon, iconCN, label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='relative'>
+        <div className='text-muted-foreground pointer-events-none absolute inset-y-0 left-0 flex items-center justify-center pl-3 peer-disabled:opacity-50'>
+          <Icon className={iconCN} />
+        </div>
+        <Input className={cn(inputVariants({ variant, size, rounded, state }), 'peer pl-9', className)} {...props} />
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputEndIcon = ({ icon: Icon = MailIcon, iconCN, label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='relative'>
+        <Input className={cn(inputVariants({ variant, size, rounded, state }), 'peer pr-9', className)} {...props} />
+        <div className='text-muted-foreground pointer-events-none absolute inset-y-0 right-0 flex items-center justify-center pr-3 peer-disabled:opacity-50'>
+          <Icon className={iconCN} />
+        </div>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputStartTextAddOn = ({ addOnText = 'https://', label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='relative'>
+        <Input className={cn(inputVariants({ variant, size, rounded, state }), 'peer pl-17', className)} {...props} />
+        <span className='pointer-events-none absolute inset-y-0 left-0 flex items-center justify-center pl-3 text-sm peer-disabled:opacity-50'>
+          {addOnText}
+        </span>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputEndTextAddOn = ({ addOnText = '.com', label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='relative'>
+        <Input className={cn(inputVariants({ variant, size, rounded, state }), 'peer pr-13', className)} {...props} />
+        <span className='pointer-events-none absolute inset-y-0 right-0 flex items-center justify-center pr-3 text-sm peer-disabled:opacity-50'>
+          {addOnText}
+        </span>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputTextAddOns = ({ startAddOn = 'https://', endAddOn = '.com', label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  const id = useId()
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='relative'>
+        <Input className={cn(inputVariants({ variant, size, rounded, state }), 'peer pr-13 pl-17', className)} {...props} />
+        <span className='pointer-events-none absolute inset-y-0 left-0 flex items-center justify-center pl-3 text-sm peer-disabled:opacity-50'>
+          {startAddOn}
+        </span>
+        <span className='pointer-events-none absolute inset-y-0 right-0 flex items-center justify-center pr-3 text-sm peer-disabled:opacity-50'>
+          {endAddOn}
+        </span>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputStartAddOn = ({ addOnText = 'https://', label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  const id = useId()
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='flex rounded-md shadow-xs'>
+        <span className='border-input bg-background text-muted-foreground -z-1 inline-flex items-center rounded-l-md border px-3 text-sm'>
+          {addOnText}
+        </span>
+        <Input className={cn(inputVariants({ variant, size, rounded, state }), '-ms-px rounded-l-none shadow-none', className)} {...props} />
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputEndAddOn = ({ addOnText = '.com', label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  const id = useId()
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='flex rounded-md shadow-xs'>
+        <Input className={cn(inputVariants({ variant, size, rounded, state }), '-me-px rounded-r-none shadow-none', className)} {...props} />
+        <span className='border-input bg-background text-muted-foreground -z-1 inline-flex items-center rounded-r-md border px-3 text-sm'>
+          {addOnText}
+        </span>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputAddOns = ({ startAddOn = 'https://', endAddOn = '.com', label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='flex rounded-md shadow-xs'>
+        <span className='border-input bg-background text-muted-foreground -z-1 inline-flex items-center rounded-l-md border px-3 text-sm'>
+          {startAddOn}
+        </span>
+        <Input className={cn(inputVariants({ variant, size, rounded, state }), '-mx-px rounded-none shadow-none', className)} {...props} />
+        <span className='border-input bg-background text-muted-foreground -z-1 inline-flex items-center rounded-r-md border px-3 text-sm'>
+          {endAddOn}
+        </span>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputFilled = ({ label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <Input className={cn(inputVariants({ variant, size, rounded, state }), 'bg-muted border-transparent shadow-none', className)} {...props} />
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputOverlappingLabel = ({ label = 'Input with overlapping label', description, error, variant, size, rounded, state, className, ...props }: any) => {
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      <div className='group relative w-full max-w-xs'>
+        <FieldLabel className='bg-background text-foreground absolute top-0 left-2 z-1 block -translate-y-1/2 px-1 text-xs'>{label}</FieldLabel>
+        <Input className={cn(inputVariants({ variant, size, rounded, state }), className)} {...props} />
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputFloatingLabel = ({ label = 'Input with floating label', description, error, variant, size, rounded, state, className, ...props }: any) => {
+  const id = useId()
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      <div className='group relative w-full max-w-xs'>
+        <label
+          htmlFor={id}
+          className='origin-start text-muted-foreground group-focus-within:text-foreground has-[+input:not(:placeholder-shown)]:text-foreground absolute top-1/2 block -translate-y-1/2 cursor-text px-2 text-sm transition-all group-focus-within:pointer-events-none group-focus-within:top-0 group-focus-within:cursor-default group-focus-within:text-xs group-focus-within:font-medium has-[+input:not(:placeholder-shown)]:pointer-events-none has-[+input:not(:placeholder-shown)]:top-0 has-[+input:not(:placeholder-shown)]:cursor-default has-[+input:not(:placeholder-shown)]:text-xs has-[+input:not(:placeholder-shown)]:font-medium'
+        >
+          <span className='bg-background inline-flex px-1'>{label}</span>
+        </label>
+        <Input className={cn(inputVariants({ variant, size, rounded, state }), className)} {...props} />
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+
+  )
+}
+const InputInsetLabel = ({ label = 'Input with inset label', description, error, variant, size, rounded, state, className, ...props }: any) => {
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      <div className='border-input bg-background focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive relative w-full max-w-xs rounded-md border shadow-xs transition-[color,box-shadow] outline-none focus-within:ring-[3px] has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-[input:is(:disabled)]:*:pointer-events-none'>
+        <label htmlFor={id} className='text-foreground dark:bg-input/30 block px-3 pt-1 text-xs font-medium'>
+          {label}
+        </label>
+        <Input className={cn(inputVariants({ variant, size, rounded, state }), 'text-foreground placeholder:text-muted-foreground dark:bg-input/30 flex h-9 w-full bg-transparent px-3 pb-1 text-sm focus-visible:outline-none', className)} {...props} />
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputPassword = ({ label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  const [isVisible, setIsVisible] = useState(false)
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='relative'>
+        <Input className={cn(inputVariants({ variant, size, rounded, state }), 'pr-9', className)} {...props} />
+        <Button
+          variant='ghost'
+          size='icon'
+          onClick={() => setIsVisible(prevState => !prevState)}
+          className='text-muted-foreground focus-visible:ring-ring/50 absolute inset-y-0 right-0 rounded-l-none hover:bg-transparent'
+        >
+          {isVisible ? <EyeOffIcon className='size-4' /> : <EyeIcon className='size-4' />}
+        </Button>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputFile = ({ label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <Input type='file' className={cn(inputVariants({ variant, size, rounded, state }), 'text-muted-foreground file:border-input file:text-foreground p-0 pr-3 italic file:mr-3 file:h-full file:border-0 file:border-r file:border-solid file:bg-transparent file:px-3 file:text-sm file:font-medium file:not-italic', className)} {...props} />
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputStartSelect = ({ selectOptions = ['https://', 'http://', 'ftp://', 'sftp://', 'ws://', 'wss://'], defaultSelectValue = 'https://', label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  const id = useId()
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='flex rounded-md shadow-xs'>
+        <Select defaultValue={defaultSelectValue} className='rounded-r-none shadow-none focus-visible:z-1'>
+          {selectOptions.map((option: string) => (
+            <option key={option} value={option}>{option}</option>
+          ))}
+        </Select>
+        <Input className={cn(inputVariants({ variant, size, rounded, state }), '-ms-px rounded-l-none shadow-none', className)} {...props} />
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputEndSelect = ({ selectOptions = ['.com', '.org', '.net'], defaultSelectValue = '.com', description, error, variant, size, rounded, state, className, ...props }: any) => {
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='flex rounded-md shadow-xs'>
+        <Input className={cn(inputVariants({ variant, size, rounded, state }), '-me-px rounded-r-none shadow-none focus-visible:z-1', className)} {...props} />
+        <Select defaultValue={defaultSelectValue} className='rounded-l-none shadow-none'>
+          {selectOptions.map((option: string) => (
+            <option key={option} value={option}>{option}</option>
+          ))}
+        </Select>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputEndInlineButton = ({ label, description, error, variant, size, rounded, state, className, onClick, buttonText = 'Subscribe', bCN = 'text-muted-foreground focus-visible:ring-ring/50 absolute inset-y-0 right-0 rounded-l-none hover:bg-transparent', ...props }) => {
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='relative'>
+        <Input className={cn(inputVariants({ variant, size, rounded, state }), 'pr-9', className)} {...props} />
+        <Button
+          variant='ghost'
+          size='icon'
+          onClick={onClick}
+          className={bCN}
+        >
+          <SendHorizonalIcon />
+        </Button>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputIconButton = ({ label, description, error, variant, size, rounded, state, className, icon: Icon = UserIcon, iconCN, onClick, ...props }) => {
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='flex rounded-md shadow-xs'>
+        <Input className={cn(inputVariants({ variant, size, rounded, state }), '-me-px rounded-r-none shadow-none focus-visible:z-1', className)} {...props} />
+        <Button variant='outline' size='icon' className='rounded-l-none' onClick={onClick}>
+          <Icon className={iconCN} />
+        </Button>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputEndButton = ({ label, description, error, variant, size, rounded, state, className, onClick, buttonText = 'Subscribe', ...props }) => {
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='flex rounded-md shadow-xs'>
+        <Input className={cn(inputVariants({ variant, size, rounded, state }), '-me-px rounded-r-none shadow-none focus-visible:z-1', className)} {...props} />
+        <Button onClick={onClick} className='rounded-l-none'>{buttonText}</Button>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputCharacterLimit = ({ value, setValue, label, description, error, variant, size, rounded, state, className, ...props }) => {
+  const [characterCount, setCharacterCount] = useState(value.length)
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.value.length <= maxLength) {
+      setValue(e.target.value)
+      setCharacterCount(e.target.value.length)
+    }
+  }
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='relative'>
+        <Input className={cn(inputVariants({ variant, size, rounded, state }), className)} onChange={handleChange} {...props} />
+        <FieldDescription className='text-muted-foreground pointer-events-none absolute inset-y-0 right-0 flex items-center justify-center pr-3 text-xs tabular-nums peer-disabled:opacity-50'>
+          {characterCount}/{maxLength}
+        </FieldDescription>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputCharacterLeft = ({ value, setValue, label, description, error, variant, size, rounded, state, className, maxLength = 30, ...props }) => {
+  const [characterCount, setCharacterCount] = useState(value.length)
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.value.length <= maxLength) {
+      setValue(e.target.value)
+      setCharacterCount(e.target.value.length)
+    }
+  }
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <Input className={cn(inputVariants({ variant, size, rounded, state }), className)} onChange={handleChange} maxLength={maxLength} {...props} />
+      <FieldDescription className='text-muted-foreground text-xs'><span className='tabular-nums'>{maxLength - characterCount}</span> characters left</FieldDescription>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputClear = ({ value = 'Click to clear', setValue, label, description, error, variant, size, rounded, state, className, ...props }) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const id = useId()
+  const handleClearInput = () => {
+    setValue('')
+    if (inputRef.current) {
+      inputRef.current.focus()
+    }
+  }
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='relative'>
+        <Input
+          value={value}
+          onChange={e => setValue(e.target.value)}
+          ref={inputRef}
+          className={cn(inputVariants({ variant, size, rounded, state }), 'pr-9', className)}
+          {...props} />
+        {value && (
+          <Button
+            variant='ghost'
+            size='icon'
+            onClick={handleClearInput}
+            className='text-muted-foreground focus-visible:ring-ring/50 absolute inset-y-0 right-0 rounded-l-none hover:bg-transparent'
+          >
+            <CircleXIcon />
+            <span className='sr-only'>Clear input</span>
+          </Button>
+        )}
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputSearch = ({ label, description, error, variant, size, rounded, state, className, ...props }) => {
+  return (
+        <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='relative'>
+        <Input  type='search' className={cn(inputVariants({ variant, size, rounded, state }), 'peer pr-11 [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none', className)} {...props} />
+        <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center justify-center pr-3 peer-disabled:opacity-50'>
+          <kbd className='text-muted-foreground bg-accent inline-flex h-5 max-h-full items-center rounded border px-1 font-[inherit] text-[0.625rem] font-medium'>
+            ⌘k
+          </kbd>
+        </div>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputSearchIcon = ({ label, description, error, variant, size, rounded, state,onClick, className, ...props }: any) => {
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='relative'>
+        <div className='text-muted-foreground pointer-events-none absolute inset-y-0 left-0 flex items-center justify-center pl-3 peer-disabled:opacity-50'>
+          <SearchIcon className='size-4' />
+          <span className='sr-only'>Search</span>
+        </div>
+        <Input
+          type='search'
+          className={cn(inputVariants({ variant, size, rounded, state }), 'peer pl-9 pr-9', className)}
+          {...props}
+        />
+        <Button
+          variant='ghost'
+          size='icon'
+          onClick={onClick}
+          className='text-muted-foreground focus-visible:ring-ring/50 absolute inset-y-0 right-0 rounded-l-none hover:bg-transparent'
+        >
+          <MicIcon className='size-4' />
+          <span className='sr-only'>Press to speak</span>
+        </Button>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputSearchLoader = ({value = '', setValue, label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  const [isLoading, setIsLoading] = useState(false)
+
+  useEffect(() => {
+    if (value) {
+      setIsLoading(true)
+      const timer = setTimeout(() => {
+        setIsLoading(false)
+      }, 500)
+
+      return () => clearTimeout(timer)
+    }
+    setIsLoading(false)
+  }, [value])
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='relative'>
+        <div className='text-muted-foreground pointer-events-none absolute inset-y-0 left-0 flex items-center justify-center pl-3 peer-disabled:opacity-50'>
+          <SearchIcon className='size-4' />
+          <span className='sr-only'>Search</span>
+        </div>
+        <Input
+          type='search'
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          className={cn(inputVariants({ variant, size, rounded, state }), 'peer pl-9 pr-9', className)}
+          {...props}
+        />
+        {isLoading && (
+          <div className='text-muted-foreground pointer-events-none absolute inset-y-0 right-0 flex items-center justify-center pr-3 peer-disabled:opacity-50'>
+            <LoaderCircleIcon className='size-4 animate-spin' />
+            <span className='sr-only'>Loading...</span>
+          </div>
+        )}
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputPlusMinusButtons = ({value = 1024, setValue,  label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+
+  const increment = () => setValue(prev => prev + 1)
+  const decrement = () => setValue(prev => Math.max(0, prev - 1))
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='flex rounded-md shadow-xs'>
+        <Button
+          variant='outline'
+          size='icon'
+          className='border-input rounded-r-none border-r-0'
+          onClick={decrement}
+        >
+          <MinusIcon className='size-4' />
+          <span className='sr-only'>Decrement</span>
+        </Button>
+        <Input
+          type='number'
+          value={value}
+          onChange={(e) => setValue(parseInt(e.target.value) || 0)}
+          className={cn(inputVariants({ variant, size, rounded, state }), 'rounded-none border-x-0 text-center tabular-nums shadow-none', className)}
+          {...props}
+        />
+        <Button
+          variant='outline'
+          size='icon'
+          className='border-input rounded-l-none border-l-0'
+          onClick={increment}
+        >
+          <PlusIcon className='size-4' />
+          <span className='sr-only'>Increment</span>
+        </Button>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputEndButtons = ({ value = 1024, setValue,  label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  const increment = () => setValue(prev => prev + 1)
+  const decrement = () => setValue(prev => Math.max(0, prev - 1))
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='flex rounded-md shadow-xs'>
+        <Input
+          type='number'
+          value={value}
+          onChange={(e) => setValue(parseInt(e.target.value) || 0)}
+          className={cn(inputVariants({ variant, size, rounded, state }), '-me-px rounded-r-none shadow-none focus-visible:z-1 text-center tabular-nums', className)}
+          {...props}
+        />
+        <Button
+          variant='outline'
+          size='icon'
+          className='border-input rounded-l-none border-l-0'
+          onClick={decrement}
+        >
+          <MinusIcon className='size-4' />
+          <span className='sr-only'>Decrement</span>
+        </Button>
+        <Button
+          variant='outline'
+          size='icon'
+          className='border-input rounded-l-none'
+          onClick={increment}
+        >
+          <PlusIcon className='size-4' />
+          <span className='sr-only'>Increment</span>
+        </Button>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputStackedButtons = ({value = 1024, setValue, label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  const increment = () => setValue(prev => prev + 1)
+  const decrement = () => setValue(prev => Math.max(0, prev - 1))
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='flex rounded-md shadow-xs'>
+        <Input
+          type='number'
+          value={value}
+          onChange={(e) => setValue(parseInt(e.target.value) || 0)}
+          className={cn(inputVariants({ variant, size, rounded, state }), '-me-px rounded-r-none shadow-none focus-visible:z-1 text-center tabular-nums', className)}
+          {...props}
+        />
+        <div className='flex flex-col'>
+          <Button
+            variant='outline'
+            size='icon'
+            className='border-input -me-px flex h-1/2 w-6 items-center justify-center rounded-none rounded-tr-md border text-sm'
+            onClick={increment}
+          >
+            <PlusIcon className='size-3' />
+            <span className='sr-only'>Increment</span>
+          </Button>
+          <Button
+            variant='outline'
+            size='icon'
+            className='border-input -me-px -mt-px flex h-1/2 w-6 items-center justify-center rounded-none rounded-br-md border text-sm'
+            onClick={decrement}
+          >
+            <MinusIcon className='size-3' />
+            <span className='sr-only'>Decrement</span>
+          </Button>
+        </div>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputPlusMinusButtonsRounded = ({value = 1024, setValue, label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  const increment = () => setValue(prev => prev + 1)
+  const decrement = () => setValue(prev => Math.max(0, prev - 1))
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='flex items-center rounded-md border border-input shadow-xs'>
+        <Button
+          variant='ghost'
+          size='icon'
+          className='ml-2 h-5 w-5 rounded-sm'
+          onClick={decrement}
+        >
+          <MinusIcon className='size-3' />
+          <span className='sr-only'>Decrement</span>
+        </Button>
+        <Input
+          type='number'
+          value={value}
+          onChange={(e) => setValue(parseInt(e.target.value) || 0)}
+          className={cn(inputVariants({ variant, size, rounded, state }), 'border-0 shadow-none text-center tabular-nums focus-visible:ring-0', className)}
+          {...props}
+        />
+        <Button
+          variant='ghost'
+          size='icon'
+          className='mr-2 h-5 w-5 rounded-sm'
+          onClick={increment}
+        >
+          <PlusIcon className='size-3' />
+          <span className='sr-only'>Increment</span>
+        </Button>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputEndButtonsRounded = ({ value = 1024, setValue,label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+
+  const increment = () => setValue(prev => prev + 1)
+  const decrement = () => setValue(prev => Math.max(0, prev - 1))
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='flex items-center rounded-md border border-input shadow-xs'>
+        <Input
+          type='number'
+          value={value}
+          onChange={(e) => setValue(parseInt(e.target.value) || 0)}
+          className={cn(inputVariants({ variant, size, rounded, state }), 'border-0 shadow-none text-center tabular-nums focus-visible:ring-0', className)}
+          {...props}
+        />
+        <Button
+          variant='ghost'
+          size='icon'
+          className='mr-1.5 h-5 w-5 rounded-sm'
+          onClick={decrement}
+        >
+          <MinusIcon className='size-3' />
+          <span className='sr-only'>Decrement</span>
+        </Button>
+        <Button
+          variant='ghost'
+          size='icon'
+          className='mr-2 h-5 w-5 rounded-sm'
+          onClick={increment}
+        >
+          <PlusIcon className='size-3' />
+          <span className='sr-only'>Increment</span>
+        </Button>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputStackedChevrons = ({value = 1024, setValue, label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  const increment = () => setValue(prev => prev + 1)
+  const decrement = () => setValue(prev => Math.max(0, prev - 1))
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='flex rounded-md shadow-xs'>
+        <Input
+          type='number'
+          value={value}
+          onChange={(e) => setValue(parseInt(e.target.value) || 0)}
+          className={cn(inputVariants({ variant, size, rounded, state }), '-me-px rounded-r-none shadow-none focus-visible:z-1 text-center tabular-nums', className)}
+          {...props}
+        />
+        <div className='flex flex-col'>
+          <Button
+            variant='outline'
+            size='icon'
+            className='border-input -me-px flex h-1/2 w-6 items-center justify-center rounded-none rounded-tr-md border text-sm'
+            onClick={increment}
+          >
+            <ChevronUpIcon className='size-3' />
+            <span className='sr-only'>Increment</span>
+          </Button>
+          <Button
+            variant='outline'
+            size='icon'
+            className='border-input -me-px -mt-px flex h-1/2 w-6 items-center justify-center rounded-none rounded-br-md border text-sm'
+            onClick={decrement}
+          >
+            <ChevronDownIcon className='size-3' />
+            <span className='sr-only'>Decrement</span>
+          </Button>
+        </div>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputPasswordStrength = ({password = '', setPassword,  label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  const [isVisible, setIsVisible] = useState(false)
+
+  const id = useId()
+
+  const toggleVisibility = () => setIsVisible(prevState => !prevState)
+
+  const strength = requirements.map(req => ({
+    met: req.regex.test(password),
+    text: req.text
+  }))
+
+  const strengthScore = useMemo(() => {
+    return strength.filter(req => req.met).length
+  }, [strength])
+
+  const getColor = (score: number) => {
+    if (score === 0) return 'bg-border'
+    if (score <= 1) return 'bg-destructive'
+    if (score <= 2) return 'bg-orange-500'
+    if (score <= 3) return 'bg-amber-500'
+    if (score === 4) return 'bg-yellow-400'
+    return 'bg-green-500'
+  }
+
+  const getText = (score: number) => {
+    if (score === 0) return 'Enter a password'
+    if (score <= 2) return 'Weak password'
+    if (score <= 3) return 'Medium password'
+    if (score === 4) return 'Strong password'
+    return 'Very strong password'
+  }
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='relative'>
+        <Input
+          type={isVisible ? 'text' : 'password'}
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          className={cn(inputVariants({ variant, size, rounded, state }), 'pr-9', className)}
+          {...props}
+        />
+        <Button
+          variant='ghost'
+          size='icon'
+          onClick={toggleVisibility}
+          className='text-muted-foreground focus-visible:ring-ring/50 absolute inset-y-0 right-0 rounded-l-none hover:bg-transparent'
+        >
+          {isVisible ? <Asterisk className='size-4' /> : <Abc className='size-4' />}
+          <span className='sr-only'>{isVisible ? 'Hide password' : 'Show password'}</span>
+        </Button>
+      </div>
+      
+      <div className='mb-2 flex h-1 w-full gap-1'>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <span
+            key={index}
+            className={cn(
+              'h-full flex-1 rounded-full transition-all duration-500 ease-out',
+              index < strengthScore ? getColor(strengthScore) : 'bg-border'
+            )}
+          />
+        ))}
+      </div>
+
+      <p className='text-foreground text-sm font-medium'>{getText(strengthScore)}. Must contain:</p>
+
+      <ul className='space-y-1.5'>
+        {strength.map((req, index) => (
+          <li key={index} className='flex items-center gap-2'>
+            {req.met ? (
+              <CheckIcon className='size-4 text-green-600 dark:text-green-400' />
+            ) : (
+              <XIcon className='text-muted-foreground size-4' />
+            )}
+            <span className={cn('text-xs', req.met ? 'text-green-600 dark:text-green-400' : 'text-muted-foreground')}>
+              {req.text}
+              <span className='sr-only'>{req.met ? ' - Requirement met' : ' - Requirement not met'}</span>
+            </span>
+          </li>
+        ))}
+      </ul>
+
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const CcInput = ({value , setValue, label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  const { getCardNumberProps, type, validCC, getCardIcon } = useValidateCreditCard()
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='relative'>
+        <Input
+ value={value}
+          onChange={(e) => setValue(e.target.value )}
+           {...getCardNumberProps()}
+className={cn(inputVariants({ variant, size, rounded, state }), 'peer ps-9 [direction:inherit]', className)}
+          {...props}
+        />
+        <div className='text-muted-foreground pointer-events-none absolute inset-y-0 left-0 flex items-center justify-center pl-3 peer-disabled:opacity-50'>
+          <CreditCardIcon className='size-4' />
+        </div>
+        {type && (
+          <div className='absolute inset-y-0 right-0 flex items-center justify-center pr-3'>
+            <span className='text-xs font-medium'>{getCardIcon()}</span>
+          </div>
+        )}
+      </div>
+      {validCC !== null && (
+        <FieldDescription className={cn('text-xs', validCC ? 'text-green-600' : 'text-destructive')}>
+          {validCC ? '✓ Valid card number' : '✗ Invalid card number'}
+        </FieldDescription>
+      )}
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+      <FieldDescription className='text-xs'>
+        Built with custom payment input implementation
+      </FieldDescription>
+    </Field>
+  )
+}
+const InputWithCharactersLeft = ({value = '',setValue,   maxLength = 8, label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  const {  characterCount } = useCharacterLimit({ maxLength, value, setValue })
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <Input
+        value={value}
+        onChange={setValue}
+        maxLength={maxLength}
+        className={cn(inputVariants({ variant, size, rounded, state }), className)}
+        {...props}
+      />
+      <FieldDescription className='text-xs'>
+        <span className='tabular-nums'>{maxLength - characterCount}</span> characters left
+      </FieldDescription>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputWithEndButton = ({ label, description, error, variant, size, rounded, state, className, buttonText = 'Send', onClick, ...props }: any) => {
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='flex rounded-md shadow-xs'>
+        <Input className={cn(inputVariants({ variant, size, rounded, state }), '-me-px rounded-r-none shadow-none focus-visible:z-1', className)} {...props} />
+        <Button onClick={onClick} className='rounded-l-none'>{buttonText}</Button>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputWithEndIconButton = ({ label, description, error, variant, size, rounded, state, className, icon: Icon = DownloadIcon, onClick, ...props }: any) => {
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='flex rounded-md shadow-xs'>
+        <Input className={cn(inputVariants({ variant, size, rounded, state }), '-me-px rounded-r-none shadow-none focus-visible:z-1', className)} {...props} />
+        <Button variant='outline' size='icon' className='rounded-l-none' onClick={onClick}>
+          <Icon className='size-4' />
+        </Button>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputWithEndInlineAddOn = ({ label, description, error, variant, size, rounded, state, className, addOnText = '.com', ...props }: any) => {
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='relative'>
+        <Input className={cn(inputVariants({ variant, size, rounded, state }), 'peer pr-13', className)} {...props} />
+        <span className='pointer-events-none absolute inset-y-0 right-0 flex items-center justify-center pr-3 text-sm peer-disabled:opacity-50'>
+          {addOnText}
+        </span>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputWithInlineAddOns = ({ label, description, error, variant, size, rounded, state, className, startAddOn = '€', endAddOn = 'EUR', ...props }: any) => {
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='relative'>
+        <Input className={cn(inputVariants({ variant, size, rounded, state }), 'peer pl-6 pr-12', className)} {...props} />
+        <span className='pointer-events-none absolute inset-y-0 left-0 flex items-center justify-center pl-3 text-sm peer-disabled:opacity-50'>
+          {startAddOn}
+        </span>
+        <span className='pointer-events-none absolute inset-y-0 right-0 flex items-center justify-center pr-3 text-sm peer-disabled:opacity-50'>
+          {endAddOn}
+        </span>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputWithInlineStartAndEndAddOn = ({ label, description, error, variant, size, rounded, state, className, startAddOn = '€', endAddOn = 'EUR', ...props }: any) => {
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='flex rounded-md shadow-xs'>
+        <span className='border-input bg-background text-muted-foreground -z-1 inline-flex items-center pl-3 pr-2 text-sm'>
+          {startAddOn}
+        </span>
+        <Input className={cn(inputVariants({ variant, size, rounded, state }), '-mx-px rounded-none shadow-none', className)} {...props} />
+        <span className='border-input bg-background text-muted-foreground -z-1 inline-flex items-center rounded-r-md border px-3 text-sm'>
+          {endAddOn}
+        </span>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputWithInnerTags = ({ value = '', setValue, tags = ['Red'], setTags, label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && value.trim()) {
+      setTags([...tags, value.trim()])
+      setValue('')
+    }
+  }
+
+  const removeTag = (index: number) => {
+    setTags(tags.filter((_, i) => i !== index))
+  }
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='border-input focus-within:ring-ring/50 dark:focus-within:ring-ring/40 relative flex flex-wrap items-center gap-1 rounded-md border bg-background p-1 shadow-xs transition-[color,box-shadow] outline-none focus-within:ring-[3px]'>
+        {tags.map((tag, index) => (
+          <div key={index} className='border-input bg-background flex items-center gap-1 rounded-md border px-2 py-1 text-xs'>
+            {tag}
+            <button
+              type='button'
+              onClick={() => removeTag(index)}
+              className='text-muted-foreground hover:text-foreground ml-1'
+            >
+              <XIcon className='size-3' />
+            </button>
+          </div>
+        ))}
+        <input
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          className='flex-1 bg-transparent px-2 py-1 text-sm outline-none min-w-[80px]'
+          placeholder={tags.length === 0 ? 'Add a tag' : ''}
+        />
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputWithMask = ({ value = '', setValue,label, description, error, variant, size, rounded, state, className, mask = 'AA99 AAA', ...props }: any) => {
+
+  const formatWithMask = (value: string) => {
+    // Simple mask implementation - you might want to use a library like react-input-mask
+    let result = ''
+    let valueIndex = 0
+    
+    for (let i = 0; i < mask.length && valueIndex < value.length; i++) {
+      if (mask[i] === 'A' && /[A-Za-z]/.test(value[valueIndex])) {
+        result += value[valueIndex++].toUpperCase()
+      } else if (mask[i] === '9' && /[0-9]/.test(value[valueIndex])) {
+        result += value[valueIndex++]
+      } else if (mask[i] === ' ' || mask[i] === '-' || mask[i] === '/') {
+        result += mask[i]
+        if (value[valueIndex] === mask[i]) valueIndex++
+      } else {
+        result += value[valueIndex++] || ''
+      }
+    }
+    return result
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value.replace(/[^A-Za-z0-9]/g, '')
+    setValue(formatWithMask(value))
+  }
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <Input
+        value={value}
+        onChange={handleChange}
+        className={cn(inputVariants({ variant, size, rounded, state }), className)}
+        placeholder='AB12 CDE'
+        {...props}
+      />
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputWithPasswordStrengthIndicator = ({ password = '', setPassword, label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  const [isVisible, setIsVisible] = useState(false)
+
+  const toggleVisibility = () => setIsVisible(prevState => !prevState)
+
+  const requirements = [
+    { regex: /.{8,}/, text: 'At least 8 characters' },
+    { regex: /[0-9]/, text: 'At least 1 number' },
+    { regex: /[a-z]/, text: 'At least 1 lowercase letter' },
+    { regex: /[A-Z]/, text: 'At least 1 uppercase letter' },
+    { regex: /[^A-Za-z0-9]/, text: 'At least 1 special character' }
+  ]
+
+  const strength = useMemo(() => {
+    return requirements.map(req => ({
+      met: req.regex.test(password),
+      text: req.text
+    }))
+  }, [password])
+
+  const strengthScore = useMemo(() => {
+    return strength.filter(req => req.met).length
+  }, [strength])
+
+  const getColor = (score: number) => {
+    if (score === 0) return 'bg-border'
+    if (score <= 1) return 'bg-destructive'
+    if (score <= 2) return 'bg-orange-500'
+    if (score <= 3) return 'bg-amber-500'
+    if (score === 4) return 'bg-yellow-400'
+    return 'bg-green-500'
+  }
+
+  const getText = (score: number) => {
+    if (score === 0) return 'Enter a password'
+    if (score <= 2) return 'Weak password'
+    if (score <= 3) return 'Medium password'
+    if (score === 4) return 'Strong password'
+    return 'Very strong password'
+  }
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='relative'>
+        <Input
+          type={isVisible ? 'text' : 'password'}
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          className={cn(inputVariants({ variant, size, rounded, state }), 'pr-9', className)}
+          {...props}
+        />
+        <Button
+          variant='ghost'
+          size='icon'
+          onClick={toggleVisibility}
+          className='text-muted-foreground focus-visible:ring-ring/50 absolute inset-y-0 right-0 rounded-l-none hover:bg-transparent'
+        >
+          {isVisible ? <Asterisk className='size-4' /> : <Abc className='size-4' />}
+          <span className='sr-only'>{isVisible ? 'Hide password' : 'Show password'}</span>
+        </Button>
+      </div>
+      
+      <div className='mb-2 flex h-1 w-full gap-1'>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <span
+            key={index}
+            className={cn(
+              'h-full flex-1 rounded-full transition-all duration-500 ease-out',
+              index < strengthScore ? getColor(strengthScore) : 'bg-border'
+            )}
+          />
+        ))}
+      </div>
+
+      <p className='text-foreground text-sm font-medium'>{getText(strengthScore)}. Must contain:</p>
+
+      <ul className='space-y-1.5'>
+        {strength.map((req, index) => (
+          <li key={index} className='flex items-center gap-2'>
+            {req.met ? (
+              <CheckIcon className='size-4 text-green-600 dark:text-green-400' />
+            ) : (
+              <XIcon className='text-muted-foreground size-4' />
+            )}
+            <span className={cn('text-xs', req.met ? 'text-green-600 dark:text-green-400' : 'text-muted-foreground')}>
+              {req.text}
+              <span className='sr-only'>{req.met ? ' - Requirement met' : ' - Requirement not met'}</span>
+            </span>
+          </li>
+        ))}
+      </ul>
+
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputWithTags = ({value = '',setValue,   tags= ['Sport', 'Coding', 'Travel'], setTags, label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && value.trim()) {
+      setTags([...tags, value.trim()])
+      setValue('')
+    }
+  }
+
+  const removeTag = (index: number) => {
+    setTags(tags.filter((_, i) => i !== index))
+  }
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='space-y-2'>
+        <Input
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          className={cn(inputVariants({ variant, size, rounded, state }), className)}
+          placeholder='Add a tag'
+          {...props}
+        />
+        <div className='flex flex-wrap gap-1'>
+          {tags.map((tag, index) => (
+            <div key={index} className='border-input bg-background flex items-center gap-1 rounded-md border px-2 py-1 text-xs'>
+              {tag}
+              <button
+                type='button'
+                onClick={() => removeTag(index)}
+                className='text-muted-foreground hover:text-foreground ml-1'
+              >
+                <XIcon className='size-3' />
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const NumberInputWithChevrons = ({value = 99, setValue,  label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='flex rounded-md shadow-xs'>
+        <Input
+          type='number'
+          value={value}
+          onChange={(e) => setValue(parseInt(e.target.value) || 0)}
+          className={cn(inputVariants({ variant, size, rounded, state }), 'rounded-r-none shadow-none text-center tabular-nums', className)}
+          {...props}
+        />
+        <div className='flex flex-col'>
+          <Button
+            variant='outline'
+            size='icon'
+            className='border-input -me-px -mt-px flex h-1/2 w-6 items-center justify-center rounded-none rounded-tr-md border text-sm'
+            onClick={() => setValue(prev => prev + 1)}
+          >
+            <ChevronUpIcon className='size-3' />
+          </Button>
+          <Button
+            variant='outline'
+            size='icon'
+            className='border-input -me-px flex h-1/2 w-6 items-center justify-center rounded-none rounded-br-md border text-sm'
+            onClick={() => setValue(prev => Math.max(0, prev - 1))}
+          >
+            <ChevronDownIcon className='size-3' />
+          </Button>
+        </div>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const NumberInputWithPlusMinusButtons = ({ value = 2048, setValue, label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='flex rounded-md shadow-xs'>
+        <Button
+          variant='outline'
+          size='icon'
+          className='border-input rounded-r-none border-r-0'
+          onClick={() => setValue(prev => Math.max(0, prev - 1))}
+        >
+          <MinusIcon className='size-4' />
+        </Button>
+        <Input
+          type='number'
+          value={value}
+          onChange={(e) => setValue(parseInt(e.target.value) || 0)}
+          className={cn(inputVariants({ variant, size, rounded, state }), 'rounded-none border-x-0 text-center tabular-nums shadow-none', className)}
+          {...props}
+        />
+        <Button
+          variant='outline'
+          size='icon'
+          className='border-input rounded-l-none border-l-0'
+          onClick={() => setValue(prev => prev + 1)}
+        >
+          <PlusIcon className='size-4' />
+        </Button>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const SearchInputWithIconAndButton = ({ label, description, error, variant, size, rounded, state, className, icon: Icon = ArrowRightIcon, iconCN, onClick, ...props }: any) => {
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='relative'>
+        <div className='text-muted-foreground pointer-events-none absolute inset-y-0 left-0 flex items-center justify-center pl-3 peer-disabled:opacity-50'>
+          <SearchIcon className='size-4' />
+        </div>
+        <Input
+          type='search'
+          className={cn(inputVariants({ variant, size, rounded, state }), 'peer pl-9 pr-9', className)}
+          {...props}
+        />
+        <Button
+          variant='ghost'
+          size='icon'
+          onClick={onClick}
+          className='text-muted-foreground focus-visible:ring-ring/50 absolute inset-y-0 right-0 rounded-l-none hover:bg-transparent'
+        >
+          <Icon className={cn('w-4 h-4' , iconCN)} />
+        </Button>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const SearchInputWithKBD = ({ label, description, error, variant, size, rounded, state, className, shortcut= 'k', shortcutAction= null, ...props }: any) => {
+const toast = useToasted()
+  const shortcutConfig = [
+    { 
+      key: shortcut, 
+      action: () => shortcutAction ? shortcutAction : toast.success('success', 'Accent success toast', { variant: 'accent' })
+    }
+  ];
+
+  useKeyboardShortcuts(shortcutConfig);
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='relative'>
+        <Input
+          type='search'
+          className={cn(inputVariants({ variant, size, rounded, state }), 'peer pr-11', className)}
+          {...props}
+        />
+        <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center justify-center pr-3 peer-disabled:opacity-50'>
+          <kbd className='text-muted-foreground bg-accent inline-flex h-5 max-h-full items-center rounded border px-1 font-[inherit] text-[0.625rem] font-medium'>
+            ⌘{shortcut}
+          </kbd>
+        </div>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const SearchInputWithLoader = ({ value = '', setValue, label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  const [isLoading, setIsLoading] = useState(false)
+
+  useEffect(() => {
+    if (value) {
+      setIsLoading(true)
+      const timer = setTimeout(() => {
+        setIsLoading(false)
+      }, 500)
+
+      return () => clearTimeout(timer)
+    }
+    setIsLoading(false)
+  }, [value])
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='relative'>
+        <div className='text-muted-foreground pointer-events-none absolute inset-y-0 left-0 flex items-center justify-center pl-3 peer-disabled:opacity-50'>
+          {isLoading ? (
+            <LoaderCircleIcon className='size-4 animate-spin' />
+          ) : (
+            <SearchIcon className='size-4' />
+          )}
+        </div>
+        <Input
+          type='search'
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          className={cn(inputVariants({ variant, size, rounded, state }), 'peer pl-9 pr-9', className)}
+          {...props}
+        />
+        <Button
+          variant='ghost'
+          size='icon'
+          className='text-muted-foreground focus-visible:ring-ring/50 absolute inset-y-0 right-0 rounded-l-none hover:bg-transparent'
+        >
+          <MicIcon className='size-4' />
+        </Button>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputWithPlusMinusButtons = ({ value = 1024, setValue, label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+
+  const increment = () => setValue(prev => prev + 1)
+  const decrement = () => setValue(prev => Math.max(0, prev - 1))
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='flex rounded-md shadow-xs'>
+        <Button
+          variant='outline'
+          size='icon'
+          className='border-input rounded-r-none border-r-0'
+          onClick={decrement}
+        >
+          <MinusIcon className='size-4' />
+          <span className='sr-only'>Decrement</span>
+        </Button>
+        <Input
+          type='number'
+          value={value}
+          onChange={(e) => setValue(parseInt(e.target.value) || 0)}
+          className={cn(inputVariants({ variant, size, rounded, state }), 'rounded-none border-x-0 text-center tabular-nums shadow-none', className)}
+          {...props}
+        />
+        <Button
+          variant='outline'
+          size='icon'
+          className='border-input rounded-l-none border-l-0'
+          onClick={increment}
+        >
+          <PlusIcon className='size-4' />
+          <span className='sr-only'>Increment</span>
+        </Button>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputWithEndButtons = ({ value = 1024, setValue, label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+
+  const increment = () => setValue(prev => prev + 1)
+  const decrement = () => setValue(prev => Math.max(0, prev - 1))
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='flex rounded-md shadow-xs'>
+        <Input
+          type='number'
+          value={value}
+          onChange={(e) => setValue(parseInt(e.target.value) || 0)}
+          className={cn(inputVariants({ variant, size, rounded, state }), '-me-px rounded-r-none shadow-none focus-visible:z-1 text-center tabular-nums', className)}
+          {...props}
+        />
+        <Button
+          variant='outline'
+          size='icon'
+          className='border-input rounded-l-none border-l-0'
+          onClick={decrement}
+        >
+          <MinusIcon className='size-4' />
+          <span className='sr-only'>Decrement</span>
+        </Button>
+        <Button
+          variant='outline'
+          size='icon'
+          className='border-input rounded-l-none'
+          onClick={increment}
+        >
+          <PlusIcon className='size-4' />
+          <span className='sr-only'>Increment</span>
+        </Button>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputWithStackedButtons = ({ value = 1024, setValue, label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+
+  const increment = () => setValue(prev => prev + 1)
+  const decrement = () => setValue(prev => Math.max(0, prev - 1))
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='flex rounded-md shadow-xs'>
+        <Input
+          type='number'
+          value={value}
+          onChange={(e) => setValue(parseInt(e.target.value) || 0)}
+          className={cn(inputVariants({ variant, size, rounded, state }), '-me-px rounded-r-none shadow-none focus-visible:z-1 text-center tabular-nums', className)}
+          {...props}
+        />
+        <div className='flex flex-col'>
+          <Button
+            variant='outline'
+            size='icon'
+            className='border-input -me-px flex h-1/2 w-6 items-center justify-center rounded-none rounded-tr-md border text-sm'
+            onClick={increment}
+          >
+            <PlusIcon className='size-3' />
+            <span className='sr-only'>Increment</span>
+          </Button>
+          <Button
+            variant='outline'
+            size='icon'
+            className='border-input -me-px -mt-px flex h-1/2 w-6 items-center justify-center rounded-none rounded-br-md border text-sm'
+            onClick={decrement}
+          >
+            <MinusIcon className='size-3' />
+            <span className='sr-only'>Decrement</span>
+          </Button>
+        </div>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputWithPlusMinusButtonsRounded = ({ value = 1024, setValue, label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+
+  const increment = () => setValue(prev => prev + 1)
+  const decrement = () => setValue(prev => Math.max(0, prev - 1))
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='flex items-center rounded-md border border-input shadow-xs'>
+        <Button
+          variant='ghost'
+          size='icon'
+          className='ml-2 h-5 w-5 rounded-sm'
+          onClick={decrement}
+        >
+          <MinusIcon className='size-3' />
+          <span className='sr-only'>Decrement</span>
+        </Button>
+        <Input
+          type='number'
+          value={value}
+          onChange={(e) => setValue(parseInt(e.target.value) || 0)}
+          className={cn(inputVariants({ variant, size, rounded, state }), 'border-0 shadow-none text-center tabular-nums focus-visible:ring-0', className)}
+          {...props}
+        />
+        <Button
+          variant='ghost'
+          size='icon'
+          className='mr-2 h-5 w-5 rounded-sm'
+          onClick={increment}
+        >
+          <PlusIcon className='size-3' />
+          <span className='sr-only'>Increment</span>
+        </Button>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputWithEndButtonsRounded = ({ value = 1024, setValue,  label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+
+  const increment = () => setValue(prev => prev + 1)
+  const decrement = () => setValue(prev => Math.max(0, prev - 1))
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='flex items-center rounded-md border border-input shadow-xs'>
+        <Input
+          type='number'
+          value={value}
+          onChange={(e) => setValue(parseInt(e.target.value) || 0)}
+          className={cn(inputVariants({ variant, size, rounded, state }), 'border-0 shadow-none text-center tabular-nums focus-visible:ring-0', className)}
+          {...props}
+        />
+        <Button
+          variant='ghost'
+          size='icon'
+          className='mr-1.5 h-5 w-5 rounded-sm'
+          onClick={decrement}
+        >
+          <MinusIcon className='size-3' />
+          <span className='sr-only'>Decrement</span>
+        </Button>
+        <Button
+          variant='ghost'
+          size='icon'
+          className='mr-2 h-5 w-5 rounded-sm'
+          onClick={increment}
+        >
+          <PlusIcon className='size-3' />
+          <span className='sr-only'>Increment</span>
+        </Button>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+const InputWithStackedChevrons = ({ value = 1024, setValue, label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+
+  const increment = () => setValue(prev => prev + 1)
+  const decrement = () => setValue(prev => Math.max(0, prev - 1))
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className='flex rounded-md shadow-xs'>
+        <Input
+          type='number'
+          value={value}
+          onChange={(e) => setValue(parseInt(e.target.value) || 0)}
+          className={cn(inputVariants({ variant, size, rounded, state }), '-me-px rounded-r-none shadow-none focus-visible:z-1 text-center tabular-nums', className)}
+          {...props}
+        />
+        <div className='flex flex-col'>
+          <Button
+            variant='outline'
+            size='icon'
+            className='border-input -me-px flex h-1/2 w-6 items-center justify-center rounded-none rounded-tr-md border text-sm'
+            onClick={increment}
+          >
+            <ChevronUpIcon className='size-3' />
+            <span className='sr-only'>Increment</span>
+          </Button>
+          <Button
+            variant='outline'
+            size='icon'
+            className='border-input -me-px -mt-px flex h-1/2 w-6 items-center justify-center rounded-none rounded-br-md border text-sm'
+            onClick={decrement}
+          >
+            <ChevronDownIcon className='size-3' />
+            <span className='sr-only'>Decrement</span>
+          </Button>
+        </div>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}