{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input",
  "type": "registry:ui",
  "title": "Input",
  "description": "An input component that can be used to enter text.",
  "registryDependencies": [
    "@tra-kit/button"
  ],
  "files": [
    {
      "path": "registry/tra-kit/components/input.tsx",
      "content": "import { cva } from 'class-variance-authority';\r\nimport { EyeIcon, EyeSlashIcon } from '@phosphor-icons/react';\r\nimport React from 'react';\r\nimport type { VariantProps } from 'class-variance-authority';\r\nimport { cn } from '@/lib/utils';\r\nimport Button from '@/components/ui/button';\r\n\r\nexport const inputVariants = cva(\r\n  `flex w-full border bg-transparent px-3 py-2 border-input \r\n  hover:shadow-soft-primary  \r\n  focus-visible:border-primary-focused focus-visible:shadow-hard-primary focus-visible:border focus-visible:outline-hidden\r\n  disabled:text-neutral-grey disabled:cursor-not-allowed \r\n  transition-all file:mr-2 file:h-fit file:cursor-pointer\r\n  file:rounded-md file:bg-neutral-disabled-text file:text-neutral-black file:border-0 file:bg-transparent file:p-2 file:text-sm file:font-medium file:transition-all file:hover:contrast-125`,\r\n  {\r\n    variants: {\r\n      variant: {\r\n        filled:\r\n          'disabled:bg-input-light disabled:placeholder:text-neutral-200 dark:disabled:placeholder:text-neutral-800',\r\n        outlined:\r\n          'border-none outline-hidden focus-visible:border-none focus-visible:outline-hidden',\r\n        underlined:\r\n          'disabled:bg-input-light disabled:placeholder:text-neutral-200 dark:disabled:placeholder:text-neutral-800 border-t-0 border-x-0 focus-visible:border-t-0 focus-visible:border-x-0',\r\n        filledUnderlined:\r\n          'disabled:bg-input-light disabled:placeholder:text-neutral-200 dark:disabled:placeholder:text-neutral-800 border-t-0 border-x-0 focus-visible:border-t-0 focus-visible:border-x-0',\r\n      },\r\n      size: {\r\n        default: 'h-14 text-base',\r\n        sm: 'h-13 text-sm',\r\n        lg: 'h-15 text-lg',\r\n      },\r\n      error: {\r\n        true: 'focus-visible:shadow-none',\r\n        false: '',\r\n      },\r\n      borderRadius: {\r\n        default: 'rounded-md',\r\n        lg: 'rounded-5xl',\r\n      },\r\n      textarea: {\r\n        true: 'h-28 w-full overflow-y-auto',\r\n        false: '',\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      size: 'default',\r\n      error: false,\r\n      borderRadius: 'default',\r\n      variant: 'filled',\r\n    },\r\n    compoundVariants: [\r\n      {\r\n        error: true,\r\n        variant: 'filled',\r\n        className:\r\n          'border-error focus-visible:border-error focus-visible:outline-error outline-hidden focus-visible:shadow-none focus-visible:-outline-offset-1',\r\n      },\r\n      {\r\n        error: true,\r\n        variant: 'underlined',\r\n        className:\r\n          'border-b-error focus-visible:border-b-error outline-hidden focus-visible:shadow-none focus-visible:-outline-offset-1',\r\n      },\r\n      {\r\n        error: true,\r\n        variant: 'filledUnderlined',\r\n        className:\r\n          'border-b-error focus-visible:border-b-error outline-hidden focus-visible:shadow-none focus-visible:-outline-offset-1',\r\n      },\r\n    ],\r\n  },\r\n);\r\n\r\ninterface IInput\r\n  extends\r\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\r\n    VariantProps<typeof inputVariants> {\r\n  autoComplete?: string;\r\n  borderRadius?: 'default' | 'lg';\r\n  className?: string;\r\n  disabled?: boolean;\r\n  endIcon?: React.ReactNode;\r\n  error?: boolean | null | undefined;\r\n  size?: 'default' | 'sm' | 'lg' | undefined;\r\n  startIcon?: React.ReactNode;\r\n  type?: React.InputHTMLAttributes<HTMLInputElement>['type'];\r\n  value?: string | number;\r\n  onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\r\n  variant?: 'filled' | 'outlined' | 'underlined' | 'filledUnderlined';\r\n  textarea?: boolean;\r\n  noWrapper?: boolean;\r\n}\r\n\r\nconst Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, IInput>((props, ref) => {\r\n  const {\r\n    borderRadius,\r\n    className = '',\r\n    endIcon,\r\n    error,\r\n    size,\r\n    startIcon,\r\n    type = 'text',\r\n    variant = 'filled',\r\n    value,\r\n    onChange,\r\n    autoComplete,\r\n    textarea = false,\r\n    noWrapper = false,\r\n    ...restProps\r\n  } = props;\r\n  const [passwordVisible, setPasswordVisible] = React.useState(false);\r\n  const Comp = textarea ? 'textarea' : 'input';\r\n  const hasIconsOrToggle = Boolean(startIcon || endIcon || type === 'password');\r\n\r\n  const renderWithoutWrapper = noWrapper && !hasIconsOrToggle;\r\n\r\n  if (renderWithoutWrapper) {\r\n    return (\r\n      <Comp\r\n        type={passwordVisible ? 'text' : type}\r\n        className={cn(inputVariants({ variant, size, error, borderRadius, textarea }), className)}\r\n        ref={ref as React.Ref<HTMLInputElement & HTMLTextAreaElement>}\r\n        autoComplete={autoComplete ?? 'off'}\r\n        value={value}\r\n        onChange={(e) => {\r\n          const target = e.target as HTMLInputElement;\r\n          if (!target.disabled && onChange)\r\n            onChange(e as React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>);\r\n        }}\r\n        rows={textarea ? 4 : undefined}\r\n        {...(restProps as React.InputHTMLAttributes<HTMLInputElement> &\r\n          React.TextareaHTMLAttributes<HTMLTextAreaElement>)}\r\n      />\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div className=\"relative flex w-full items-center\">\r\n      {startIcon && <span className=\"absolute left-3 text-current\">{startIcon}</span>}\r\n      <Comp\r\n        type={passwordVisible ? 'text' : type}\r\n        className={cn(inputVariants({ variant, size, error, borderRadius, textarea }), className)}\r\n        ref={ref as React.Ref<HTMLInputElement & HTMLTextAreaElement>}\r\n        autoComplete={autoComplete ?? 'off'}\r\n        value={value}\r\n        onChange={(e) => {\r\n          const target = e.target as HTMLInputElement;\r\n          if (!target.disabled && onChange)\r\n            onChange(e as React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>);\r\n        }}\r\n        style={{\r\n          paddingLeft: startIcon ? '2.5rem' : undefined,\r\n          paddingRight: endIcon || type === 'password' ? '2.5rem' : undefined,\r\n        }}\r\n        rows={textarea ? 4 : undefined}\r\n        {...(restProps as React.InputHTMLAttributes<HTMLInputElement> &\r\n          React.TextareaHTMLAttributes<HTMLTextAreaElement>)}\r\n      />\r\n      {endIcon && <span className=\"absolute right-3 text-current\">{endIcon}</span>}\r\n      {type === 'password' && (\r\n        <Button\r\n          className=\"z-3 absolute right-3 size-6 min-h-[unset] min-w-[unset] bg-transparent text-current hover:bg-transparent\"\r\n          size=\"icon\"\r\n          type=\"button\"\r\n          onClick={() => setPasswordVisible((prev) => !prev)}\r\n        >\r\n          {passwordVisible ? (\r\n            <EyeSlashIcon className=\"size-4 dark:text-gray-400\" />\r\n          ) : (\r\n            <EyeIcon className=\"size-4 dark:text-white\" />\r\n          )}\r\n        </Button>\r\n      )}\r\n    </div>\r\n  );\r\n});\r\nInput.displayName = 'Input';\r\n\r\nexport default Input;\r\n",
      "type": "registry:ui"
    }
  ]
}