@catalystsoftware/ui 1.0.5 → 1.0.7

package/components/catalyst-ui/x/textarea-x.tsx

@@ -1,1263 +0,0 @@
-import React, { useId, useState, ChangeEvent } from 'react'
-import { cva } from 'class-variance-authority'
-import { cn, Field, FieldLabel, FieldDescription ,FieldError  ,Button , Label, Textarea ,   } from "~/components/catalyst-ui"
-import { Home } from 'lucide-react'
-
-/**
-* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ TextareaX Component ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
-* ★ ━━━━ ☆ ━━━━  ━━━━ ☆ ━━━━ ★
-* TextareaX: A versatile textarea component with 20+ pre-built variations and customizable styles
-* 
-* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Basic Textarea ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
-* ```jsx
-* // Default textarea
-* <TextareaX placeholder="Type your message here." />
-* 
-* // With label
-* <TextareaX textarea="WithLabel" label="Description" placeholder="Enter description" />
-* 
-* // With helper text
-* <TextareaX textarea="WithHelperText" label="Feedback" description="Your feedback helps us improve." />
-* ```
-* 
-* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Validation States ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
-* ```jsx
-* // Invalid/error state
-* <TextareaX textarea="Invalid" label="Required Field" error="This field is required" />
-* 
-* // With hint text
-* <TextareaX textarea="WithHintText" label="Optional Field" hintText="Optional" />
-* 
-* // Required field
-* <TextareaX textarea="Required" label="Required Field" placeholder="This field is required" />
-* ```
-* 
-* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Visual Variations ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
-* ```jsx
-* // Filled variant
-* <TextareaX textarea="Filled" label="Filled Textarea" placeholder="Has filled background" />
-* 
-* // With colored border
-* <TextareaX textarea="WithColoredBorder" label="Colored Focus" placeholder="Custom focus ring" />
-* 
-* // Different sizes
-* <TextareaX textarea="Small" label="Small" placeholder="Small textarea" />
-* <TextareaX textarea="Large" label="Large" placeholder="Large textarea" />
-* ```
-* 
-* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ With Icons ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
-* ```jsx
-* // Start icon (left side)
-* <TextareaX 
-*   textarea="StartIcon"
-*   label="Address"
-*   icon={Home}
-*   placeholder="Enter your address"
-* />
-* 
-* // End icon (right side)
-* <TextareaX 
-*   textarea="EndIcon"
-*   label="Search"
-*   icon={Search}
-*   placeholder="Search here..."
-* />
-* 
-* // Custom icon styling
-* <TextareaX 
-*   textarea="StartIcon"
-*   label="Custom Icon"
-*   icon={Mail}
-*   iconCN="size-5 text-blue-500"
-*   placeholder="Email content"
-* />
-* ```
-* 
-* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Label Styles ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
-* ```jsx
-* // Overlapping label
-* <TextareaX textarea="WithOverlappingLabel" placeholder="Content here" />
-* 
-* // Floating label
-* <TextareaX textarea="WithFloatingLabel" placeholder=" " />
-* 
-* // Inset label (inside border)
-* <TextareaX textarea="WithInsetLabel" placeholder="Type here" />
-* ```
-* 
-* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Enhanced Features ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
-* ```jsx
-* // With action button
-* <TextareaX 
-*   textarea="WithButton"
-*   label="Feedback"
-*   buttonText="Submit"
-*   placeholder="Your feedback here"
-* />
-* 
-* // Auto-growing (expands with content)
-* <TextareaX textarea="AutoGrow" label="Auto-growing" placeholder="Type and watch it grow" />
-* 
-* // No resize
-* <TextareaX textarea="NoResize" label="Fixed size" placeholder="Cannot resize this textarea" />
-* 
-* // Character counter
-* <TextareaX 
-*   textarea="CharacterLeft"
-*   label="Character Limit"
-*   maxLength={500}
-*   placeholder="Type up to 500 characters"
-* />
-* ```
-* 
-* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ State Variations ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
-* ```jsx
-* // Read-only
-* <TextareaX 
-*   textarea="ReadOnly"
-*   label="Read Only Content"
-*   defaultValue="This content cannot be edited"
-* />
-* 
-* // Disabled
-* <TextareaX textarea="Disabled" label="Disabled Field" placeholder="Cannot edit this field" />
-* ```
-* 
-* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Custom Styling ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
-* ```jsx
-* // Custom variants
-* <TextareaX 
-*   variant="filled"
-*   size="lg"
-*   rounded="lg"
-*   state="success"
-*   label="Success State"
-*   placeholder="Successfully validated"
-* />
-* 
-* // With custom className
-* <TextareaX 
-*   label="Custom Styled"
-*   className="border-2 border-purple-500 focus:ring-purple-500"
-*   placeholder="Purple themed"
-* />
-* 
-* // Compact layout
-* <TextareaX 
-*   textarea="Small"
-*   variant="ghost"
-*   rounded="none"
-*   label="Compact"
-*   placeholder="Minimal styling"
-* />
-* ```
-* 
-* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Props Reference ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
-* - TextareaX Props:
-* - `textarea`: string - Pre-built variation name (see list below)
-* - `label`: string - Label text for the textarea
-* - `description`: string - Helper/description text
-* - `error`: string - Error message text
-* - `hintText`: string - Hint text (usually "Optional")
-* - `maxLength`: number - Maximum character count
-* - `buttonText`: string - Text for action button
-* - `icon`: LucideIcon - Icon component
-* - `iconCN`: string - Icon class names
-* - `initialValue`: string - Initial text value
-* 
-* - Variant Props (passed to textareaVariants):
-* - `variant`: 'default' | 'filled' | 'ghost'
-* - `size`: 'sm' | 'default' | 'lg'
-* - `rounded`: 'sm' | 'default' | 'lg' | 'full' | 'none'
-* - `state`: 'default' | 'error' | 'success'
-* - `className`: string - Additional CSS classes
-* 
-* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Available Textarea Variations ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
-* 1. **Default** - Basic textarea
-* 2. **WithLabel** - Textarea with label
-* 3. **WithHelperText** - With helper text below
-* 4. **WithHelperTextRight** - Helper text aligned right
-* 5. **Invalid** - Error state with error message
-* 6. **WithHintText** - Label with optional hint
-* 7. **Required** - Required field indicator
-* 8. **WithColoredBorder** - Custom focus border colors
-* 9. **Filled** - Filled background variant
-* 10. **Small** - Small size textarea
-* 11. **Large** - Large size textarea
-* 12. **StartIcon** - Textarea with left icon
-* 13. **EndIcon** - Textarea with right icon
-* 14. **WithOverlappingLabel** - Label overlaps border
-* 15. **WithFloatingLabel** - Animated floating label
-* 16. **WithInsetLabel** - Label inside border
-* 17. **WithButton** - Textarea with action button
-* 18. **AutoGrow** - Automatically expands with content
-* 19. **NoResize** - Disabled resize handle
-* 20. **CharacterLeft** - Character counter
-* 21. **ReadOnly** - Read-only state
-* 22. **Disabled** - Disabled state
-* 
-* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Accessibility Features ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
-* - **Auto IDs**: Automatic ID generation for label association
-* - **ARIA Labels**: Proper aria-invalid for error states
-* - **Keyboard Navigation**: Full keyboard support
-* - **Screen Reader**: All text content accessible to screen readers
-* - **Focus Management**: Clear focus indicators and rings
-* 
-* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Form Integration Examples ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
-* ```jsx
-* // Contact form
-* <form className="space-y-4">
-*   <TextareaX textarea="WithLabel" label="Message" placeholder="Your message" required />
-*   <TextareaX textarea="WithHintText" label="Comments" hintText="Optional" />
-*   <button type="submit">Submit</button>
-* </form>
-* 
-* // Feedback form with character limit
-* <form className="space-y-4">
-*   <TextareaX 
-*     textarea="CharacterLeft"
-*     label="Feedback"
-*     maxLength={1000}
-*     placeholder="Your feedback (max 1000 characters)"
-*   />
-*   <TextareaX textarea="WithButton" buttonText="Submit Feedback" />
-* </form>
-* 
-* // Settings form with read-only fields
-* <form className="space-y-4">
-*   <TextareaX 
-*     textarea="ReadOnly"
-*     label="System Information"
-*     defaultValue="System: macOS\nVersion: 14.0"
-*   />
-*   <TextareaX textarea="Disabled" label="Coming Soon" placeholder="Feature not available yet" />
-* </form>
-* ```
-* 
-* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Advanced Usage Patterns ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
-* ```jsx
-* // Dynamic state management
-* function FeedbackForm() {
-*   const [feedback, setFeedback] = useState('')
-*   const [characterCount, setCharacterCount] = useState(0)
-*   
-*   return (
-*     <TextareaX
-*       textarea="CharacterLeft"
-*       label="Your Feedback"
-*       maxLength={500}
-*       initialValue={feedback}
-*       value={feedback}
-*       onChange={(e) => {
-*         setFeedback(e.target.value)
-*         setCharacterCount(e.target.value.length)
-*       }}
-*     />
-*   )
-* }
-* 
-* // Controlled component with validation
-* function ContactForm() {
-*   const [message, setMessage] = useState('')
-*   const [error, setError] = useState('')
-*   
-*   const validate = () => {
-*     if (message.length < 10) {
-*       setError('Message must be at least 10 characters')
-*       return false
-*     }
-*     setError('')
-*     return true
-*   }
-*   
-*   return (
-*     <TextareaX
-*       textarea="Invalid"
-*       label="Message"
-*       error={error}
-*       value={message}
-*       onChange={(e) => setMessage(e.target.value)}
-*       onBlur={validate}
-*     />
-*   )
-* }
-* 
-* // Themed textarea variations
-* function ThemedTextareas() {
-*   return (
-*     <div className="space-y-6">
-*       <TextareaX
-*         variant="filled"
-*         size="lg"
-*         rounded="lg"
-*         state="success"
-*         label="Success Theme"
-*         placeholder="Success state"
-*       />
-*       <TextareaX
-*         textarea="WithColoredBorder"
-*         label="Brand Theme"
-*         className="focus-visible:border-brand-500 focus-visible:ring-brand-500/20"
-*         placeholder="Brand colored"
-*       />
-*     </div>
-*   )
-* }
-* ```
-* 
-* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Complete Example ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
-* ```jsx
-* function CompleteFormExample() {
-*   const [formData, setFormData] = useState({
-*     feedback: '',
-*     suggestions: '',
-*     comments: ''
-*   })
-*   
-*   return (
-*     <div className="max-w-2xl space-y-6">
-*       <h2 className="text-2xl font-bold">Feedback Form</h2>
-*       
-*       <TextareaX
-*         textarea="Required"
-*         label="Your Feedback"
-*         placeholder="Please provide detailed feedback"
-*         value={formData.feedback}
-*         onChange={(e) => setFormData({...formData, feedback: e.target.value})}
-*       />
-*       
-*       <TextareaX
-*         textarea="AutoGrow"
-*         label="Suggestions"
-*         placeholder="Your suggestions (auto-expands)"
-*         value={formData.suggestions}
-*         onChange={(e) => setFormData({...formData, suggestions: e.target.value})}
-*       />
-*       
-*       <TextareaX
-*         textarea="CharacterLeft"
-*         label="Additional Comments"
-*         hintText="Optional"
-*         maxLength={250}
-*         placeholder="Additional comments (max 250 characters)"
-*         value={formData.comments}
-*         onChange={(e) => setFormData({...formData, comments: e.target.value})}
-*       />
-*       
-*       <TextareaX
-*         textarea="WithButton"
-*         buttonText="Submit Feedback"
-*       />
-*     </div>
-*   )
-* }
-* ```
-* 
-*/
-
-export const textareaVariants = cva(
-  'flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-  {
-    variants: {
-      variant: {
-        default: '',
-        filled: 'bg-muted border-transparent shadow-none',
-        ghost: 'border-transparent shadow-none',
-      },
-      size: {
-        sm: 'min-h-10 py-1.5 text-xs',
-        default: 'min-h-20 py-2',
-        lg: 'min-h-30 py-2.5 text-base',
-      },
-      rounded: {
-        default: 'rounded-md',
-        sm: 'rounded-sm',
-        lg: 'rounded-lg',
-        full: 'rounded-full',
-        none: 'rounded-none',
-      },
-      state: {
-        default: '',
-        error: 'border-destructive focus-visible:ring-destructive',
-        success: 'border-green-500 focus-visible:ring-green-500',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-      rounded: 'default',
-      state: 'default',
-    },
-  }
-)
-
-export function TextareaX({ textarea = 'Default', ...props }: any) {
-  switch (textarea) {
-    case 'WithLabel':
-      return <WithLabel {...props} />
-    case 'WithHelperText':
-      return <WithHelperText {...props} />
-    case 'WithHelperTextRight':
-      return <WithHelperTextRight {...props} />
-    case 'Invalid':
-      return <Invalid {...props} />
-    case 'WithHintText':
-      return <WithHintText {...props} />
-    case 'Required':
-      return <Required {...props} />
-    case 'WithColoredBorder':
-      return <WithColoredBorder {...props} />
-    case 'Filled':
-      return <Filled {...props} />
-    case 'Small':
-      return <Small {...props} />
-    case 'Large':
-      return <Large {...props} />
-    case 'StartIcon':
-      return <StartIcon {...props} />
-    case 'EndIcon':
-      return <EndIcon {...props} />
-    case 'WithOverlappingLabel':
-      return <WithOverlappingLabel {...props} />
-    case 'WithFloatingLabel':
-      return <WithFloatingLabel {...props} />
-    case 'WithInsetLabel':
-      return <WithInsetLabel {...props} />
-    case 'WithButton':
-      return <WithButton {...props} />
-    case 'AutoGrow':
-      return <AutoGrow {...props} />
-    case 'NoResize':
-      return <NoResize {...props} />
-    case 'CharacterLeft':
-      return <CharacterLeft {...props} />
-    case 'ReadOnly':
-      return <ReadOnly {...props} />
-    case 'Disabled':
-      return <Disabled {...props} />
-    default:
-      return <DefaultTextarea {...props} />
-  }
-}
-
-
-
-const DefaultTextarea = ({ 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 htmlFor={id}>{label}</FieldLabel>}
-      <Textarea 
-        id={id}
-        className={cn(textareaVariants({ variant, size, rounded, state }), className)} 
-        {...props} 
-      />
-      {description && <FieldDescription>{description}</FieldDescription>}
-      {error && <FieldError>{error}</FieldError>}
-    </Field>
-  )
-}
-
-const WithLabel = ({ label = 'Textarea with label', description, error, variant, size, rounded, state, className, ...props }: any) => {
-  const id = useId()
-  return (
-    <Field className='w-full max-w-xs space-y-2'>
-      <FieldLabel htmlFor={id}>{label}</FieldLabel>
-      <Textarea 
-        id={id}
-        className={cn(textareaVariants({ variant, size, rounded, state }), className)} 
-        {...props} 
-      />
-      {description && <FieldDescription>{description}</FieldDescription>}
-      {error && <FieldError>{error}</FieldError>}
-    </Field>
-  )
-}
-
-const WithHelperText = ({ label, description = 'Your feedback is useful for us.', error, variant, size, rounded, state, className, ...props }: any) => {
-  const id = useId()
-  return (
-    <Field className='w-full max-w-xs space-y-2'>
-      {label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
-      <Textarea 
-        id={id}
-        className={cn(textareaVariants({ variant, size, rounded, state }), className)} 
-        {...props} 
-      />
-      <FieldDescription>{description}</FieldDescription>
-      {error && <FieldError>{error}</FieldError>}
-    </Field>
-  )
-}
-
-const WithHelperTextRight = ({ label, description = 'Your feedback is useful for us.', error, variant, size, rounded, state, className, ...props }: any) => {
-  const id = useId()
-  return (
-    <Field className='w-full max-w-xs space-y-2'>
-      {label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
-      <Textarea 
-        id={id}
-        className={cn(textareaVariants({ variant, size, rounded, state }), className)} 
-        {...props} 
-      />
-      <p className='text-muted-foreground text-end text-xs'>{description}</p>
-      {error && <FieldError>{error}</FieldError>}
-    </Field>
-  )
-}
-
-const Invalid = ({ label = 'Invalid Textarea', description, error = 'Your feedback is useful for us.', variant, size, rounded, className, ...props }: any) => {
-  const id = useId()
-  return (
-    <Field className='w-full max-w-xs space-y-2'>
-      <FieldLabel htmlFor={id}>{label}</FieldLabel>
-      <Textarea 
-        id={id}
-        aria-invalid
-        className={cn(textareaVariants({ variant, size, rounded, state: 'error' }), className)} 
-        {...props} 
-      />
-      {description && <FieldDescription>{description}</FieldDescription>}
-      <FieldError>{error}</FieldError>
-    </Field>
-  )
-}
-
-const WithHintText = ({ label = 'Textarea with hint text', hintText = 'Optional field', 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='flex items-center justify-between gap-1'>
-        <FieldLabel htmlFor={id}>{label}</FieldLabel>
-        <span className='text-muted-foreground text-xs'>{hintText}</span>
-      </div>
-      <Textarea 
-        id={id}
-        className={cn(textareaVariants({ variant, size, rounded, state }), className)} 
-        {...props} 
-      />
-      {description && <FieldDescription>{description}</FieldDescription>}
-      {error && <FieldError>{error}</FieldError>}
-    </Field>
-  )
-}
-
-const Required = ({ label = 'Required textarea', description, error, variant, size, rounded, state, className, ...props }: any) => {
-  const id = useId()
-  return (
-    <Field className='w-full max-w-xs space-y-2'>
-      <FieldLabel htmlFor={id}>
-        {label} <span className='text-destructive'>*</span>
-      </FieldLabel>
-      <Textarea 
-        id={id}
-        required
-        className={cn(textareaVariants({ variant, size, rounded, state }), className)} 
-        {...props} 
-      />
-      {description && <FieldDescription>{description}</FieldDescription>}
-      {error && <FieldError>{error}</FieldError>}
-    </Field>
-  )
-}
-
-const WithColoredBorder = ({ label = 'Textarea with colored border and ring', description, error, variant, size, rounded, state, className, ...props }: any) => {
-  const id = useId()
-  return (
-    <Field className='w-full max-w-xs space-y-2'>
-      <FieldLabel htmlFor={id}>{label}</FieldLabel>
-      <Textarea 
-        id={id}
-        className={cn(
-          textareaVariants({ 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 Filled = ({ label = 'Filled Textarea', description, error, variant, size, rounded, state, className, ...props }: any) => {
-  const id = useId()
-  return (
-    <Field className='w-full max-w-xs space-y-2'>
-      <FieldLabel htmlFor={id}>{label}</FieldLabel>
-      <Textarea 
-        id={id}
-        className={cn(textareaVariants({ variant: 'filled', size, rounded, state }), className)} 
-        {...props} 
-      />
-      {description && <FieldDescription>{description}</FieldDescription>}
-      {error && <FieldError>{error}</FieldError>}
-    </Field>
-  )
-}
-
-const Small = ({ label, description, error, variant, rounded, state, className, ...props }: any) => {
-  const id = useId()
-  return (
-    <Field className='w-full max-w-xs space-y-2'>
-      {label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
-      <Textarea 
-        id={id}
-        className={cn(textareaVariants({ variant, size: 'sm', rounded, state }), className)} 
-        {...props} 
-      />
-      {description && <FieldDescription>{description}</FieldDescription>}
-      {error && <FieldError>{error}</FieldError>}
-    </Field>
-  )
-}
-
-const Large = ({ label, description, error, variant, rounded, state, className, ...props }: any) => {
-  const id = useId()
-  return (
-    <Field className='w-full max-w-xs space-y-2'>
-      {label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
-      <Textarea 
-        id={id}
-        className={cn(textareaVariants({ variant, size: 'lg', rounded, state }), className)} 
-        {...props} 
-      />
-      {description && <FieldDescription>{description}</FieldDescription>}
-      {error && <FieldError>{error}</FieldError>}
-    </Field>
-  )
-}
-
-const StartIcon = ({ icon: Icon = Home, iconCN = 'size-4', label = 'Textarea with start icon', description, error, variant, size, rounded, state, className, ...props }: any) => {
-  const id = useId()
-  return (
-    <Field className='w-full max-w-xs space-y-2'>
-      <FieldLabel htmlFor={id}>{label}</FieldLabel>
-      <div className='relative'>
-        <div className='text-muted-foreground pointer-events-none absolute top-2.5 left-0 flex items-center justify-center pl-3 peer-disabled:opacity-50'>
-          <Icon className={iconCN} />
-          <span className='sr-only'>Icon</span>
-        </div>
-        <Textarea 
-          id={id}
-          className={cn(textareaVariants({ variant, size, rounded, state }), 'peer pl-9', className)} 
-          {...props} 
-        />
-      </div>
-      {description && <FieldDescription>{description}</FieldDescription>}
-      {error && <FieldError>{error}</FieldError>}
-    </Field>
-  )
-}
-
-const EndIcon = ({ icon: Icon = Home, iconCN = 'size-4', label = 'Textarea with end icon', description, error, variant, size, rounded, state, className, ...props }: any) => {
-  const id = useId()
-  return (
-    <Field className='w-full max-w-xs space-y-2'>
-      <FieldLabel htmlFor={id}>{label}</FieldLabel>
-      <div className='relative'>
-        <Textarea 
-          id={id}
-          className={cn(textareaVariants({ variant, size, rounded, state }), 'peer pr-9', className)} 
-          {...props} 
-        />
-        <div className='text-muted-foreground pointer-events-none absolute top-2.5 right-0 flex items-center justify-center pr-3 peer-disabled:opacity-50'>
-          <Icon className={iconCN} />
-          <span className='sr-only'>Icon</span>
-        </div>
-      </div>
-      {description && <FieldDescription>{description}</FieldDescription>}
-      {error && <FieldError>{error}</FieldError>}
-    </Field>
-  )
-}
-
-const WithOverlappingLabel = ({ label = 'Textarea with overlapping label', description, error, variant, size, rounded, state, className, ...props }: any) => {
-  const id = useId()
-  return (
-    <Field className='relative w-full max-w-xs space-y-2'>
-      <Label
-        htmlFor={id}
-        className='bg-background text-foreground absolute top-0 left-2 z-10 block -translate-y-1/2 px-1 text-xs font-medium group-has-disabled:opacity-50'
-      >
-        {label}
-      </Label>
-      <Textarea 
-        id={id}
-        className={cn(textareaVariants({ variant, size, rounded, state }), '!bg-background', className)} 
-        {...props} 
-      />
-      {description && <FieldDescription>{description}</FieldDescription>}
-      {error && <FieldError>{error}</FieldError>}
-    </Field>
-  )
-}
-
-const WithFloatingLabel = ({ label = 'Textarea 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/70 group-focus-within:text-foreground has-[+textarea:not(:placeholder-shown)]:text-foreground has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive absolute top-0 block translate-y-2 cursor-text px-2 text-sm transition-all group-focus-within:pointer-events-none group-focus-within:-translate-y-1/2 group-focus-within:cursor-default group-focus-within:text-xs group-focus-within:font-medium has-[+textarea:not(:placeholder-shown)]:pointer-events-none has-[+textarea:not(:placeholder-shown)]:-translate-y-1/2 has-[+textarea:not(:placeholder-shown)]:cursor-default has-[+textarea:not(:placeholder-shown)]:text-xs has-[+textarea:not(:placeholder-shown)]:font-medium'
-        >
-          <span className='bg-background inline-flex px-1'>{label}</span>
-        </label>
-        <Textarea 
-          id={id}
-          placeholder=' '
-          className={cn(textareaVariants({ variant, size, rounded, state }), '!bg-background', className)} 
-          {...props} 
-        />
-      </div>
-      {description && <FieldDescription>{description}</FieldDescription>}
-      {error && <FieldError>{error}</FieldError>}
-    </Field>
-  )
-}
-
-const WithInsetLabel = ({ label = 'Textarea with inset 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='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-[textarea:is(:disabled)]:*:pointer-events-none'>
-        <label htmlFor={id} className='text-foreground block px-3 pt-1 text-xs font-medium'>
-          {label}
-        </label>
-        <textarea
-          id={id}
-          className='text-foreground placeholder:text-muted-foreground/70 flex min-h-14 w-full px-3 pb-2 text-sm focus-visible:outline-none bg-transparent'
-          {...props}
-        />
-      </div>
-      {description && <FieldDescription>{description}</FieldDescription>}
-      {error && <FieldError>{error}</FieldError>}
-    </Field>
-  )
-}
-
-const WithButton = ({ label = 'Textarea with button', buttonText = 'Submit Feedback', description, error, variant, size, rounded, state, className, ...props }: any) => {
-  const id = useId()
-  return (
-    <Field className='w-full max-w-xs space-y-2'>
-      <FieldLabel htmlFor={id}>{label}</FieldLabel>
-      <Textarea 
-        id={id}
-        className={cn(textareaVariants({ variant, size, rounded, state }), className)} 
-        {...props} 
-      />
-      <Button size='sm'>{buttonText}</Button>
-      {description && <FieldDescription>{description}</FieldDescription>}
-      {error && <FieldError>{error}</FieldError>}
-    </Field>
-  )
-}
-
-const AutoGrow = ({ label = 'Auto growing textarea', description, error, variant, rounded, state, className, ...props }: any) => {
-  const id = useId()
-  return (
-    <Field className='w-full max-w-xs space-y-2'>
-      <FieldLabel htmlFor={id}>{label}</FieldLabel>
-      <Textarea 
-        id={id}
-        className={cn(
-          textareaVariants({ variant, size: 'sm', rounded, state }), 
-          'field-sizing-content max-h-30 min-h-0 resize-none py-1.75',
-          className
-        )} 
-        {...props} 
-      />
-      {description && <FieldDescription>{description}</FieldDescription>}
-      {error && <FieldError>{error}</FieldError>}
-    </Field>
-  )
-}
-
-const NoResize = ({ label = 'No resize textarea', description, error, variant, size, rounded, state, className, ...props }: any) => {
-  const id = useId()
-  return (
-    <Field className='w-full max-w-xs space-y-2'>
-      <FieldLabel htmlFor={id}>{label}</FieldLabel>
-      <Textarea 
-        id={id}
-        className={cn(textareaVariants({ variant, size, rounded, state }), '[resize:none]', className)} 
-        {...props} 
-      />
-      {description && <FieldDescription>{description}</FieldDescription>}
-      {error && <FieldError>{error}</FieldError>}
-    </Field>
-  )
-}
-
-const CharacterLeft = ({ label = 'Textarea with characters left', maxLength = 200, initialValue = '', description, error, variant, size, rounded, state, className, ...props }: any) => {
-  const [value, setValue] = useState(initialValue)
-  const [characterCount, setCharacterCount] = useState(initialValue.length)
-  const id = useId()
-
-  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    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'>
-      <FieldLabel htmlFor={id}>{label}</FieldLabel>
-      <Textarea 
-        id={id}
-        value={value}
-        maxLength={maxLength}
-        onChange={handleChange}
-        className={cn(textareaVariants({ variant, size, rounded, state }), className)} 
-        {...props} 
-      />
-      <p className='text-muted-foreground text-xs'>
-        <span className='tabular-nums'>{maxLength - characterCount}</span> characters left
-      </p>
-      {description && <FieldDescription>{description}</FieldDescription>}
-      {error && <FieldError>{error}</FieldError>}
-    </Field>
-  )
-}
-
-const ReadOnly = ({ label = 'Read only textarea', description, error, variant, size, rounded, state, className, ...props }: any) => {
-  const id = useId()
-  return (
-    <Field className='w-full max-w-xs space-y-2'>
-      <FieldLabel htmlFor={id}>{label}</FieldLabel>
-      <Textarea 
-        id={id}
-        readOnly
-        className={cn(textareaVariants({ variant, size, rounded, state }), 'read-only:bg-muted', className)} 
-        {...props} 
-      />
-      {description && <FieldDescription>{description}</FieldDescription>}
-      {error && <FieldError>{error}</FieldError>}
-    </Field>
-  )
-}
-
-const Disabled = ({ label = 'Disabled textarea', description, error, variant, size, rounded, state, className, ...props }: any) => {
-  const id = useId()
-  return (
-    <Field className='w-full max-w-xs space-y-2'>
-      <FieldLabel htmlFor={id}>{label}</FieldLabel>
-      <Textarea 
-        id={id}
-        disabled
-        className={cn(textareaVariants({ variant, size, rounded, state }), className)} 
-        {...props} 
-      />
-      {description && <FieldDescription>{description}</FieldDescription>}
-      {error && <FieldError>{error}</FieldError>}
-    </Field>
-  )
-}
-
-export default function TextareaXDemo() {
-  return (
-    <div className='space-y-12 p-6 max-w-3xl mx-auto'>
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Default</h3>
-        <TextareaX placeholder='Type your message here.' />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>With Label</h3>
-        <TextareaX textarea='WithLabel' label='Textarea with label' placeholder='Type your feedback here' />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>With Helper Text</h3>
-        <TextareaX textarea='WithHelperText' label='Textarea with helper text' placeholder='Type your feedback here' />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>With Helper Text Right</h3>
-        <TextareaX textarea='WithHelperTextRight' label='Textarea with right helper text' placeholder='Type your feedback here' />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Invalid</h3>
-        <TextareaX textarea='Invalid' placeholder='Type your feedback here' />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>With Hint Text</h3>
-        <TextareaX textarea='WithHintText' placeholder='Type your feedback here' />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Required</h3>
-        <TextareaX textarea='Required' placeholder='Type your feedback here' />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>With Colored Border</h3>
-        <TextareaX textarea='WithColoredBorder' placeholder='Type your feedback here' />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Filled</h3>
-        <TextareaX textarea='Filled' placeholder='Type your feedback here' />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Small Size</h3>
-        <TextareaX textarea='Small' placeholder='Small Textarea' />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Large Size</h3>
-        <TextareaX textarea='Large' placeholder='Large Textarea' />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Start Icon</h3>
-        <TextareaX textarea='StartIcon' placeholder='Address' />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>End Icon</h3>
-        <TextareaX textarea='EndIcon' placeholder='Address' />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>With Overlapping Label</h3>
-        <TextareaX textarea='WithOverlappingLabel' />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>With Floating Label</h3>
-        <TextareaX textarea='WithFloatingLabel' />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>With Inset Label</h3>
-        <TextareaX textarea='WithInsetLabel' />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>With Button</h3>
-        <TextareaX textarea='WithButton' placeholder='Type your feedback here' />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Auto Grow</h3>
-        <TextareaX textarea='AutoGrow' placeholder='Type your feedback here' />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>No Resize</h3>
-        <TextareaX textarea='NoResize' placeholder='Type your feedback here' />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Character Left</h3>
-        <TextareaX textarea='CharacterLeft' placeholder='Type your feedback here' />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Read Only</h3>
-        <TextareaX textarea='ReadOnly' defaultValue='Read only text' placeholder='Type your feedback here' />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Disabled</h3>
-        <TextareaX textarea='Disabled' placeholder='Type your feedback here' />
-      </div>
-    </div>
-  )
-}
-/**import { Label, Textarea } from "~/components/catalyst-ui"
-import { useId} from 'react'
-import { HomeIcon } from "lucide-react"
-
-const TextareaDemo = () => {
-  return <Textarea placeholder='Type your message here.' className='w-full max-w-xs' />
-}
-
-const TextareaWithLabelDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Textarea with label</Label>
-      <Textarea placeholder='Type your feedback here' id={id} />
-    </div>
-  )
-}
-
-const TextareaWithHelperTextDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Textarea with helper text</Label>
-      <Textarea placeholder='Type your feedback here' id={id} />
-      <p className='text-muted-foreground text-xs'>Your feedback is useful for us.</p>
-    </div>
-  )
-}
-
-const TextareaWithHelperTextRightDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Textarea with right helper text</Label>
-      <Textarea placeholder='Type your feedback here' id={id} />
-      <p className='text-muted-foreground text-end text-xs'>Your feedback is useful for us.</p>
-    </div>
-  )
-}
-
-const TextareaInvalidDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Invalid Textarea</Label>
-      <Textarea aria-invalid placeholder='Type your feedback here' id={id} />
-      <p className='text-destructive text-xs'>Your feedback is useful for us.</p>
-    </div>
-  )
-}
-
-const TextareaWithHintTextDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <div className='flex items-center justify-between gap-1'>
-        <Label htmlFor={id}>Input with hint text</Label>
-        <span className='text-muted-foreground text-xs'>Optional field</span>
-      </div>
-      <Textarea placeholder='Type your feedback here' id={id} />
-    </div>
-  )
-}
-
-const TextareaRequiredDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>
-        Required textarea <span className='text-destructive'>*</span>
-      </Label>
-      <Textarea placeholder='Type your feedback here' id={id} required />
-    </div>
-  )
-}
-
-const TextareaWithColoredBorderDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Textarea with colored border and ring</Label>
-      <Textarea
-        placeholder='Type your feedback here'
-        id={id}
-        className='focus-visible:border-indigo-500 focus-visible:ring-indigo-500/20 dark:focus-visible:ring-indigo-500/40'
-      />
-    </div>
-  )
-}
-
-const TextareaFilledDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Filled Textarea</Label>
-      <Textarea className='bg-muted border-transparent shadow-none' placeholder='Type your feedback here' id={id} />
-    </div>
-  )
-}
-
-const TextareaSizesDemo = () => {
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Textarea className='min-h-10 py-1.5' placeholder='Small Textarea' />
-      <Textarea placeholder='Default(Medium) Textarea' />
-      <Textarea className='min-h-20 py-2.5' placeholder='Large Textarea' />
-    </div>
-  )
-}
-
-const TextareaStartIconDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Textarea with start icon</Label>
-      <div className='relative'>
-        <div className='text-muted-foreground pointer-events-none absolute top-2.5 left-0 flex items-center justify-center pl-3 peer-disabled:opacity-50'>
-          <HomeIcon className='size-4' />
-          <span className='sr-only'>Address</span>
-        </div>
-        <Textarea id={id} placeholder='Address' className='peer pl-9' />
-      </div>
-    </div>
-  )
-}
-
-const TextareaEndIconDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Textarea with end icon</Label>
-      <div className='relative'>
-        <div className='text-muted-foreground pointer-events-none absolute top-2.5 right-0 flex items-center justify-center pr-3 peer-disabled:opacity-50'>
-          <HomeIcon className='size-4' />
-          <span className='sr-only'>Address</span>
-        </div>
-        <Textarea id={id} placeholder='Address' className='peer pr-9' />
-      </div>
-    </div>
-  )
-}
-
-const TextareaWithOverlappingLabelDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='relative w-full max-w-xs space-y-2'>
-      <Label
-        htmlFor={id}
-        className='bg-background text-foreground absolute top-0 left-2 z-10 block -translate-y-1/2 px-1 text-xs font-medium group-has-disabled:opacity-50'
-      >
-        Textarea with overlapping label
-      </Label>
-      <Textarea id={id} className='!bg-background' />
-    </div>
-  )
-}
-
-const TextareaWithFloatingLabelDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='group relative w-full max-w-xs space-y-2'>
-      <label
-        htmlFor={id}
-        className='origin-start text-muted-foreground/70 group-focus-within:text-foreground has-[+textarea:not(:placeholder-shown)]:text-foreground has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive absolute top-0 block translate-y-2 cursor-text px-2 text-sm transition-all group-focus-within:pointer-events-none group-focus-within:-translate-y-1/2 group-focus-within:cursor-default group-focus-within:text-xs group-focus-within:font-medium has-[+textarea:not(:placeholder-shown)]:pointer-events-none has-[+textarea:not(:placeholder-shown)]:-translate-y-1/2 has-[+textarea:not(:placeholder-shown)]:cursor-default has-[+textarea:not(:placeholder-shown)]:text-xs has-[+textarea:not(:placeholder-shown)]:font-medium'
-      >
-        <span className='bg-background inline-flex px-1'>Textarea with floating label</span>
-      </label>
-      <Textarea id={id} placeholder=' ' className='!bg-background' />
-    </div>
-  )
-}
-
-const TextareaWithInsetLabelDemo = () => {
-  const id = useId()
-
-  return (
-    <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 block px-3 pt-1 text-xs font-medium'>
-        Textarea with inset label
-      </label>
-      <textarea
-        id={id}
-        className='text-foreground placeholder:text-muted-foreground/70 flex min-h-14 w-full px-3 pb-2 text-sm focus-visible:outline-none'
-      />
-    </div>
-  )
-}
-
-const TextareaWithButtonDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Textarea with button</Label>
-      <Textarea id={id} placeholder='Type your feedback here' />
-      <Button size='sm'>Submit Feedback</Button>
-    </div>
-  )
-}
-
-const TextareaAutoGrowDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Auto growing textarea</Label>
-      <Textarea
-        id={id}
-        placeholder='Type your feedback here'
-        className='field-sizing-content max-h-30 min-h-0 resize-none py-1.75'
-      />
-    </div>
-  )
-}
-
-const TextareaNoResizeDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>No resize textarea</Label>
-      <Textarea id={id} placeholder='Type your feedback here' className='[resize:none]' />
-    </div>
-  )
-}
-
-const TextareaCharacterLeftDemo = () => {
-  const [value, setValue] = useState(initialValue)
-  const [characterCount, setCharacterCount] = useState(initialValue.length)
-
-  const id = useId()
-
-  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    if (e.target.value.length <= maxLength) {
-      setValue(e.target.value)
-      setCharacterCount(e.target.value.length)
-    }
-  }
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Textarea with characters left</Label>
-      <Textarea placeholder='Type your feedback here' value={value} maxLength={maxLength} onChange={handleChange} />
-      <p className='text-muted-foreground text-xs'>
-        <span className='tabular-nums'>{maxLength - characterCount}</span> characters left
-      </p>
-    </div>
-  )
-}
-
-const TextareaReadOnlyDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Read only textarea</Label>
-      <Textarea
-        className='read-only:bg-muted'
-        defaultValue='Read only text'
-        placeholder='Type your feedback here'
-        id={id}
-        readOnly
-      />
-    </div>
-  )
-}
-
-const TextareaDisabledDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Disabled textarea</Label>
-      <Textarea placeholder='Type your feedback here' disabled id={id} />
-    </div>
-  )
-} */