{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input",
  "type": "registry:component",
  "title": "Input",
  "description": "Input field with title, hint, suffix and error message.",
  "files": [
    {
      "path": "registry/turbopills/lib/styles.tsx",
      "content": "import { cn } from \"@/lib/utils\";\r\n\r\nexport const optionStyles = {\r\n  base: \"h-15 inline-flex items-center justify-between w-full bg-background border rounded-lg p-4 cursor-pointer transition-all\",\r\n  textSelectionDisabled: \"select-none\",\r\n  hover: \"hover:ring-1 hover:ring-border\",\r\n  outlineOnSelect: \"ring-2 ring-primary hover:ring-2 hover:ring-primary\",\r\n  fillOnSelect: \"bg-primary/10\",\r\n  shadowOnSelect: \"shadow-md shadow-primary/25\",\r\n  disabled: \"opacity-50 cursor-not-allowed\",\r\n};\r\n\r\nexport const getOptionClassName = ({\r\n  selected = false,\r\n  highlightOnHover = true,\r\n  showOutlineOnSelect = true,\r\n  showFillOnSelect = false,\r\n  showShadowOnSelect = false,\r\n  disabled = false,\r\n  allowTextSelection = false,\r\n}: {\r\n  selected?: boolean;\r\n  highlightOnHover?: boolean;\r\n  showOutlineOnSelect?: boolean;\r\n  showFillOnSelect?: boolean;\r\n  showShadowOnSelect?: boolean;\r\n  disabled?: boolean;\r\n  allowTextSelection?: boolean;\r\n}) =>\r\n  cn(\r\n    optionStyles.base,\r\n    !allowTextSelection && optionStyles.textSelectionDisabled,\r\n    highlightOnHover && optionStyles.hover,\r\n    selected && showOutlineOnSelect && optionStyles.outlineOnSelect,\r\n    selected && showFillOnSelect && optionStyles.fillOnSelect,\r\n    selected && showShadowOnSelect && optionStyles.shadowOnSelect,\r\n    disabled && optionStyles.disabled,\r\n  );\r\n\r\nexport const fieldHeaderStyles = {\r\n  container: \"mb-3 space-y-1\",\r\n  title: \"text-3xl leading-9 font-medium\",\r\n  titleSm: \"text-xl leading-6 font-medium\",\r\n  hint: \"text-muted-foreground\",\r\n  hintSm: \"text-sm text-muted-foreground\",\r\n};\r\n\r\nexport const inputStyles = {\r\n  wrapper:\r\n    \"relative flex items-center w-full border rounded-2xl bg-background hover:border-primary transition-[color,border-color] overflow-hidden focus-within:ring-1 focus-within:ring-primary focus-within:border-primary\",\r\n  wrapperDefault: \"h-[60px]\",\r\n  wrapperSm: \"h-10 !rounded-lg\",\r\n  input:\r\n    \"flex-1 w-full bg-transparent border-0 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\r\n  inputDefault: \"px-5 py-4 text-md placeholder:text-md\",\r\n  inputSm:\r\n    \"h-[38px] p-2 text-sm font-light placeholder:text-sm placeholder:font-light\",\r\n  suffix: \"flex items-center pl-2 pr-5 text-muted-foreground text-sm\",\r\n  error: \"border-destructive focus-within:outline-destructive/20 focus-within:border-destructive\",\r\n  autofill:\r\n    \"[&:has(input:-webkit-autofill)]:bg-[#e8f0fe]\",\r\n  inputAutofill:\r\n    \"autofill:[box-shadow:inset_0_0_0_9999px_#e8f0fe] autofill:[-webkit-text-fill-color:var(--color-foreground)]\",\r\n};\r\n\r\nexport const getInputWrapperClassName = ({\r\n  size = \"md\",\r\n  hasError = false,\r\n}: {\r\n  size?: \"md\" | \"sm\";\r\n  hasError?: boolean;\r\n}) =>\r\n  cn(\r\n    inputStyles.wrapper,\r\n    inputStyles.autofill,\r\n    size === \"sm\" ? inputStyles.wrapperSm : inputStyles.wrapperDefault,\r\n    hasError && inputStyles.error,\r\n  );\r\n\r\nexport const getInputClassName = ({\r\n  size = \"md\",\r\n  hasSuffix = false,\r\n}: {\r\n  size?: \"md\" | \"sm\";\r\n  hasSuffix?: boolean;\r\n}) =>\r\n  cn(\r\n    inputStyles.input,\r\n    inputStyles.inputAutofill,\r\n    size === \"sm\" ? inputStyles.inputSm : inputStyles.inputDefault,\r\n    hasSuffix && \"pr-0\",\r\n  );\r\n",
      "type": "registry:lib",
      "target": "lib/styles.tsx"
    },
    {
      "path": "registry/turbopills/ui/input.tsx",
      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\nimport {\r\n  fieldHeaderStyles,\r\n  inputStyles,\r\n  getInputWrapperClassName,\r\n  getInputClassName,\r\n} from \"@/lib/styles\";\r\n\r\nexport interface InputFieldProps\r\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\"> {\r\n  title?: string;\r\n  hint?: string;\r\n  size?: \"md\" | \"sm\";\r\n  suffix?: React.ReactNode;\r\n  errorMessage?: string;\r\n  wrapperClassName?: string;\r\n}\r\n\r\nexport const Input = React.forwardRef<HTMLInputElement, InputFieldProps>(\r\n  (\r\n    {\r\n      title,\r\n      hint,\r\n      size = \"md\",\r\n      suffix,\r\n      errorMessage,\r\n      className,\r\n      wrapperClassName,\r\n      disabled,\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    const inputId = React.useId();\r\n\r\n    return (\r\n      <div className=\"space-y-1\">\r\n        {(title || hint) && (\r\n          <div className={fieldHeaderStyles.container}>\r\n            <label htmlFor={inputId}>\r\n              {title && <p className={size === \"sm\" ? fieldHeaderStyles.titleSm : fieldHeaderStyles.title}>{title}</p>}\r\n              {hint && <p className={size === \"sm\" ? fieldHeaderStyles.hintSm : fieldHeaderStyles.hint}>{hint}</p>}\r\n            </label>\r\n          </div>\r\n        )}\r\n\r\n        <div\r\n          className={cn(\r\n            getInputWrapperClassName({ size, hasError: !!errorMessage }),\r\n            disabled && \"opacity-50 cursor-not-allowed\",\r\n            wrapperClassName,\r\n          )}\r\n        >\r\n          <input\r\n            ref={ref}\r\n            id={inputId}\r\n            disabled={disabled}\r\n            aria-invalid={!!errorMessage}\r\n            aria-describedby={errorMessage ? `${inputId}-error` : undefined}\r\n            className={cn(\r\n              getInputClassName({ size, hasSuffix: !!suffix }),\r\n              className,\r\n            )}\r\n            {...props}\r\n          />\r\n\r\n          {suffix && <div className={inputStyles.suffix}>{suffix}</div>}\r\n        </div>\r\n\r\n        {errorMessage && (\r\n          <p\r\n            id={`${inputId}-error`}\r\n            role=\"alert\"\r\n            className=\"text-sm text-destructive\"\r\n          >\r\n            {errorMessage}\r\n          </p>\r\n        )}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nInput.displayName = \"Input\";",
      "type": "registry:component",
      "target": "components/turbopills/ui/input.tsx"
    }
  ]
}