{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input",
  "type": "registry:ui",
  "title": "Input",
  "description": "Accessible React input component for Tile UI.",
  "devDependencies": [
    "sass"
  ],
  "registryDependencies": [
    "@tile-ui/core",
    "@tile-ui/utils",
    "@tile-ui/styles"
  ],
  "files": [
    {
      "path": "packages/react/src/components/input/input.tsx",
      "type": "registry:ui",
      "target": "components/ui/input/input.tsx",
      "content": "import React, { useId } from 'react';\nimport { getInputIds, getInputAriaProps } from '../lib/core';\nimport type { InputBaseProps } from '../lib/core';\nimport styles from './input.module.scss';\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, InputBaseProps {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n\t({ className = '', label, error, helperText, controlSize, required, id: providedId, type = 'text', ...props }, ref) => {\n\t\tconst generatedId = useId();\n\t\tconst id = providedId || generatedId;\n\t\tconst ids = getInputIds(id);\n\t\tconst ariaProps = getInputAriaProps(ids, error, helperText);\n\n\t\treturn (\n\t\t\t<div className={styles.inputWrapper}>\n\t\t\t\t{label && (\n\t\t\t\t\t<label htmlFor={id} className={`${styles.label} ${required ? styles.required : ''}`}>\n\t\t\t\t\t\t{label}\n\t\t\t\t\t</label>\n\t\t\t\t)}\n\t\t\t\t<input\n\t\t\t\t\tref={ref}\n\t\t\t\t\tid={id}\n\t\t\t\t\ttype={type}\n\t\t\t\t\trequired={required}\n\t\t\t\t\tdata-control-size={controlSize}\n\t\t\t\t\tclassName={`${styles.input} ${error ? styles.error : ''} ${className}`}\n\t\t\t\t\t{...ariaProps}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t\t{error && (\n\t\t\t\t\t<span id={ids.error} className={styles.errorText}>\n\t\t\t\t\t\t{error}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t{!error && helperText && (\n\t\t\t\t\t<span id={ids.helper} className={styles.helperText}>\n\t\t\t\t\t\t{helperText}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t},\n);\n\nInput.displayName = 'Input';\n\nexport { Input };\nexport default Input;\n"
    },
    {
      "path": "packages/styles/scss/components/input.module.scss",
      "type": "registry:file",
      "target": "components/ui/input/input.module.scss",
      "content": "@use '../../../styles/variables/colors' as *;\n\n.inputWrapper {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: var(--tile-input-label-gap, #{$spacing-1});\n\twidth: 100%;\n\n\t&:has(> input:only-child) {\n\t\tdisplay: var(--tile-input-bare-wrapper-display, flex);\n\t}\n}\n\n.input {\n\tdisplay: var(--tile-input-display, flex);\n\tgap: var(--tile-input-gap, normal);\n\theight: var(--tile-input-height, 2.25rem);\n\twidth: 100%;\n\tborder-radius: var(--tile-input-radius, #{$radius});\n\tborder: var(--tile-input-border-width, 1px) solid var(--tile-input-border, #{$border});\n\tbackground-color: var(--tile-input-background, #{$background});\n\tpadding: 0 var(--tile-input-padding-inline, #{$spacing-3});\n\tfont-size: var(--tile-input-font-size, #{$text-sm});\n\tline-height: var(--tile-input-line-height, inherit);\n\tbox-shadow: var(--tile-input-shadow, none);\n\tcolor: $foreground;\n\ttransition: all $transition-fast;\n\toutline: none;\n\n\t&::placeholder {\n\t\tcolor: var(--tile-input-placeholder, #{$muted-foreground});\n\t}\n\n\t&:focus {\n\t\toutline: none;\n\t\toutline: var(--tile-input-focus-outline, none);\n\t\toutline-style: var(--tile-input-focus-outline-style, none);\n\t\tborder-color: var(--tile-input-focus-border, #{$ring});\n\t\tbox-shadow: var(--tile-input-focus-shadow, 0 0 0 3px color-mix(in srgb, #{$ring} 50%, transparent));\n\t}\n\n\t&:disabled,\n\t&.disabled {\n\t\tpointer-events: none;\n\t\topacity: var(--tile-input-disabled-opacity, 0.5);\n\t\tcursor: not-allowed;\n\t\tbackground-color: var(--tile-input-disabled-background, #{$field-disabled});\n\t\tcolor: var(--tile-input-disabled-color, #{$foreground});\n\t}\n\n\t&.error {\n\t\tborder-color: $destructive;\n\t\tbox-shadow: var(--tile-input-error-shadow, none);\n\n\t\t&:focus {\n\t\t\tborder-color: $destructive;\n\t\t\tbox-shadow: var(--tile-input-error-focus-shadow, 0 0 0 1px #{$destructive});\n\t\t}\n\t}\n\n\t// Visual size is separate from the native HTML `size` attribute.\n\t&[data-control-size='xs'] {\n\t\theight: var(--tile-input-xs-height, 1.5rem);\n\t\tpadding-inline: var(--tile-input-xs-padding-inline, #{$spacing-2});\n\t\tborder-radius: var(--tile-input-xs-radius, #{$radius-sm});\n\t\tfont-size: var(--tile-input-xs-font-size, #{$text-xs});\n\t\tline-height: var(--tile-input-compact-line-height, inherit);\n\t\tgap: var(--tile-input-compact-gap, normal);\n\t}\n\n\t&[data-control-size='sm'] {\n\t\theight: var(--tile-input-sm-height, 2rem);\n\t\tpadding-inline: var(--tile-input-sm-padding-inline, #{$spacing-2});\n\t\tborder-radius: var(--tile-input-sm-radius, #{$radius-sm});\n\t\tfont-size: var(--tile-input-sm-font-size, #{$text-xs});\n\t\tline-height: var(--tile-input-compact-line-height, inherit);\n\t\tgap: var(--tile-input-compact-gap, normal);\n\t}\n\n\t&[data-control-size='lg'] {\n\t\theight: var(--tile-input-lg-height, 2.5rem);\n\t\tpadding-inline: var(--tile-input-lg-padding-inline, #{$spacing-4});\n\t\tborder-radius: var(--tile-input-lg-radius, #{$radius});\n\t\tfont-size: var(--tile-input-lg-font-size, #{$text-base});\n\t\tgap: var(--tile-input-lg-gap, normal);\n\t}\n}\n\n.label {\n\tdisplay: block;\n\tfont-size: var(--tile-input-label-font-size, #{$text-sm});\n\tfont-weight: $font-medium;\n\tcolor: $foreground;\n\tline-height: $leading-normal;\n\n\t&.required::after {\n\t\tcontent: ' *';\n\t\tcolor: $destructive;\n\t}\n}\n\n.helperText {\n\tfont-size: var(--tile-input-description-font-size, #{$text-xs});\n\tcolor: var(--tile-input-description-color, #{$muted-foreground});\n\tline-height: var(--tile-input-description-line-height, #{$leading-normal});\n}\n\n.errorText {\n\tfont-size: var(--tile-input-description-font-size, #{$text-xs});\n\tcolor: $destructive;\n\tline-height: var(--tile-input-description-line-height, #{$leading-normal});\n}\n"
    },
    {
      "path": "packages/react/src/components/input/index.ts",
      "type": "registry:ui",
      "target": "components/ui/input/index.ts",
      "content": "export { Input, type InputProps } from './input';\n"
    }
  ]
}