{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "text-field",
  "type": "registry:ui",
  "title": "Text Field",
  "description": "A text field component that can be used to enter text.",
  "registryDependencies": [
    "@tra-kit/input",
    "@tra-kit/label"
  ],
  "files": [
    {
      "path": "registry/tra-kit/components/text-field.tsx",
      "content": "import { cva } from 'class-variance-authority';\r\nimport React, { useRef, useState } from 'react';\r\nimport { cn } from '@/lib/utils';\r\nimport Input from '@/components/ui/input';\r\nimport Label from '@/components/ui/label';\r\n\r\nconst textFieldStyles = cva('TextField-container relative flex h-fit flex-col gap-1', {\r\n  variants: {\r\n    variant: {\r\n      filled: '',\r\n      outlined: '',\r\n      underlined: '',\r\n      filledUnderlined: '',\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: 'filled',\r\n  },\r\n});\r\n\r\nconst labelStyles = cva('ease-cubic transition-all duration-150', {\r\n  variants: {\r\n    variant: {\r\n      filled: '',\r\n      outlined: 'z-1 text-neutral-light-black absolute left-[18px] top-1/4 text-lg',\r\n      underlined: 'absolute left-0 top-1/2 -translate-y-1/2 transform text-lg',\r\n      filledUnderlined: 'absolute left-0 top-1/2 -translate-y-1/2 transform pl-5 text-lg',\r\n    },\r\n    borderRadius: {\r\n      default: '',\r\n      lg: '',\r\n    },\r\n    isHaveStartIcon: {\r\n      true: '',\r\n      false: '',\r\n    },\r\n    outlineFocused: {\r\n      true: '',\r\n      false: '',\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: 'filled',\r\n    borderRadius: 'default',\r\n  },\r\n  compoundVariants: [\r\n    {\r\n      isHaveStartIcon: true,\r\n      outlineFocused: false,\r\n      variant: 'outlined',\r\n      className: 'left-8',\r\n    },\r\n    {\r\n      isHaveStartIcon: true,\r\n      outlineFocused: true,\r\n      variant: 'outlined',\r\n      className: 'left-4',\r\n    },\r\n    {\r\n      isHaveStartIcon: true,\r\n      variant: 'filledUnderlined',\r\n      className: 'left-8',\r\n    },\r\n    {\r\n      isHaveStartIcon: true,\r\n      variant: 'filledUnderlined',\r\n      className: 'left-4',\r\n    },\r\n    {\r\n      outlineFocused: true,\r\n      variant: 'underlined',\r\n      className: 'left-0 top-0 -translate-y-1/2 text-base',\r\n    },\r\n    {\r\n      outlineFocused: true,\r\n      variant: 'filledUnderlined',\r\n      className: 'left-0 top-0 -translate-y-[20%] text-base',\r\n    },\r\n    {\r\n      variant: 'outlined',\r\n      borderRadius: 'lg',\r\n      className: 'left-6',\r\n    },\r\n    {\r\n      variant: 'filled',\r\n      borderRadius: 'lg',\r\n      className: 'left-6',\r\n    },\r\n  ],\r\n});\r\n\r\nconst inputStyles = cva('disabled:bg-input-light p-2 pl-5 disabled:shadow-none', {\r\n  variants: {\r\n    variant: {\r\n      filled: '',\r\n      outlined: 'border-none',\r\n      underlined:\r\n        'rounded-none border-x-0 border-t-0 bg-transparent hover:bg-transparent hover:shadow-none focus-visible:shadow-none disabled:bg-transparent',\r\n      filledUnderlined:\r\n        'bg-input-fill hover:bg-input-fill rounded-none border-x-0 border-t-0 hover:shadow-none focus-visible:shadow-none disabled:bg-transparent',\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: 'filled',\r\n  },\r\n});\r\n\r\nconst fieldsetStyles = cva(\r\n  `border-input disabled:border-input-light disabled:placeholder:text-input pointer-events-none absolute inset-0 m-0 h-14 min-w-0 overflow-hidden rounded border border-solid p-3 \r\n  outline-hidden transition-all`,\r\n  {\r\n    variants: {\r\n      inputFocused: {\r\n        true: 'border-primary-focused',\r\n        false: '',\r\n      },\r\n      error: {\r\n        true: 'border-error focus-visible:outline-error focus-visible:shadow-none focus-visible:-outline-offset-1',\r\n        false: '',\r\n      },\r\n      borderRadius: {\r\n        default: 'rounded-md',\r\n        lg: 'rounded-5xl',\r\n      },\r\n      size: {\r\n        default: 'h-14',\r\n        sm: 'h-13',\r\n        lg: 'h-15',\r\n      },\r\n    },\r\n  },\r\n);\r\n\r\nexport interface ITextField {\r\n  alwaysTop?: boolean;\r\n  autoComplete?: string;\r\n  borderRadius?: 'default' | 'lg';\r\n  disabled?: boolean;\r\n  endIcon?: React.ReactNode;\r\n  error?: boolean;\r\n  name?: string;\r\n  id?: string;\r\n  inputClassName?: string;\r\n  label?: string;\r\n  labelClassName?: string;\r\n  onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\r\n  onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\r\n  onWheel?: (e: React.WheelEvent<HTMLInputElement>) => void;\r\n  placeholder?: string;\r\n  showRequiredIcon?: boolean;\r\n  size?: 'default' | 'sm' | 'lg';\r\n  startIcon?: React.ReactNode;\r\n  tooltip?: string | Array<string>;\r\n  type?: React.InputHTMLAttributes<HTMLInputElement>['type'];\r\n  value?: string | number;\r\n  variant?: 'filled' | 'outlined' | 'underlined' | 'filledUnderlined';\r\n  maxLength?: number;\r\n  helperText?: string;\r\n  textarea?: boolean;\r\n  className?: string;\r\n  fieldClassName?: string;\r\n}\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, ITextField>(\r\n  (\r\n    {\r\n      borderRadius,\r\n      disabled = false,\r\n      endIcon,\r\n      error,\r\n      id,\r\n      name,\r\n      inputClassName = '',\r\n      className = '',\r\n      label,\r\n      labelClassName = '',\r\n      onChange,\r\n      onBlur,\r\n      onWheel,\r\n      placeholder,\r\n      showRequiredIcon,\r\n      size = 'default',\r\n      startIcon,\r\n      tooltip = null,\r\n      type,\r\n      value,\r\n      autoComplete,\r\n      variant = 'filled',\r\n      maxLength,\r\n      helperText,\r\n      textarea,\r\n      fieldClassName,\r\n      ...otherProps\r\n    },\r\n    ref,\r\n  ) => {\r\n    const [inputFocused, setInputFocused] = useState(false);\r\n    const labelRef = useRef<HTMLLabelElement>(null);\r\n    const inputRef = useRef<HTMLInputElement>(null);\r\n\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        className={cn(textFieldStyles({ variant }), className)}\r\n      >\r\n        <Label\r\n          ref={labelRef}\r\n          className={` \r\n          ${cn(labelStyles({ variant, borderRadius, isHaveStartIcon: Boolean(startIcon), outlineFocused: inputFocused || !!value || Boolean(inputRef.current?.value) }))}\r\n          ${labelClassName}`}\r\n          variant={variant}\r\n          outlineFocused={inputFocused || !!value || Boolean(inputRef.current?.value)}\r\n          htmlFor={id}\r\n          id={`${id}-label`}\r\n          size={size}\r\n          tooltip={tooltip}\r\n          disabled={disabled}\r\n          showRequiredIcon={showRequiredIcon}\r\n        >\r\n          {label}\r\n        </Label>\r\n        <Input\r\n          id={id}\r\n          ref={inputRef}\r\n          variant={variant}\r\n          className={`${cn(inputStyles({ variant }))} ${inputClassName}`}\r\n          autoComplete={autoComplete}\r\n          size={size}\r\n          name={name}\r\n          error={error}\r\n          value={value}\r\n          onWheel={onWheel}\r\n          onChange={onChange}\r\n          onFocus={() => setInputFocused(true)}\r\n          onBlur={(e) => {\r\n            setInputFocused(false);\r\n            onBlur && onBlur(e);\r\n          }}\r\n          disabled={disabled}\r\n          type={type}\r\n          placeholder={variant !== 'outlined' ? placeholder : ''}\r\n          endIcon={endIcon}\r\n          startIcon={startIcon}\r\n          borderRadius={borderRadius}\r\n          maxLength={maxLength}\r\n          textarea={textarea}\r\n          {...otherProps}\r\n        />\r\n        {variant === 'outlined' && (\r\n          <fieldset\r\n            disabled={disabled}\r\n            className={cn(\r\n              fieldsetStyles({ inputFocused, error, borderRadius, size }),\r\n              fieldClassName,\r\n            )}\r\n          >\r\n            <legend\r\n              className={`float-[unset] invisible block h-0 w-fit overflow-hidden p-0 text-base ${(inputFocused || !!value || Boolean(inputRef.current?.value)) && 'px-2'}`}\r\n            >\r\n              {inputFocused || !!value || Boolean(inputRef.current?.value) ? (\r\n                <span>\r\n                  <span\r\n                    className={`${showRequiredIcon ? 'after:text-error after:content-required after:ml-0.5' : ''}`}\r\n                  >\r\n                    {label}\r\n                  </span>\r\n                  {tooltip && <span className=\"inline-block size-5\" />}\r\n                </span>\r\n              ) : (\r\n                ''\r\n              )}\r\n            </legend>\r\n          </fieldset>\r\n        )}\r\n        {helperText && <p className=\"text-neutral-light-black self-end text-sm\">{helperText}</p>}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nexport default TextField;\r\n",
      "type": "registry:ui"
    }
  ]
}