{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-glass",
  "type": "registry:ui",
  "title": "Input Glass",
  "description": "Glass-themed input with:",
  "dependencies": [
    "class-variance-authority",
    "lucide-react",
    "shadcn-glass-ui"
  ],
  "registryDependencies": [
    "cn",
    "primitives",
    "use-focus",
    "variants"
  ],
  "files": [
    {
      "path": "components/glass/ui/input-glass.tsx",
      "type": "registry:component",
      "content": "/**\n * InputGlass Component\n *\n * Glass-themed input with:\n * - Theme-aware styling via CSS variables (glass/light/aurora)\n * - Focus glow effects\n * - Error/success states\n * - Icon support (left/right position)\n * - Backdrop blur effect\n */\n\nimport {\n  forwardRef,\n  useCallback,\n  type InputHTMLAttributes,\n  type CSSProperties,\n  type FocusEvent,\n} from 'react';\nimport { type VariantProps } from 'class-variance-authority';\nimport { type LucideIcon } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport { useFocus } from '@/lib/hooks/use-focus';\nimport { inputVariants } from '@/lib/variants/input-glass-variants';\nimport { ICON_SIZES, FormFieldWrapper } from '@/components/glass/primitives';\nimport '@/glass-theme.css';\n\n// ========================================\n// CSS VARIABLE HELPERS\n// ========================================\n\nconst getInputStyles = (isFocused: boolean, error?: string, success?: string): CSSProperties => {\n  // Determine border color based on state\n  let borderColor = 'var(--input-border)';\n  if (error) {\n    borderColor = 'var(--alert-danger-text)';\n  } else if (success) {\n    borderColor = 'var(--alert-success-text)';\n  } else if (isFocused) {\n    borderColor = 'var(--input-focus-border)';\n  }\n\n  return {\n    background: 'var(--input-bg)',\n    border: `1px solid ${borderColor}`,\n    color: 'var(--input-text)',\n    boxShadow: isFocused ? 'var(--focus-glow)' : 'none',\n  };\n};\n\n// ========================================\n// PROPS INTERFACE\n// ========================================\n\n/**\n * Props for the InputGlass component\n *\n * A glass-themed input field with labels, validation states, and icon support.\n * Features focus glow effects and theme-aware styling.\n *\n * @accessibility\n * - **Keyboard Navigation:** Full keyboard support with native `<input>` element, standard tab navigation\n * - **Focus Management:** Visible focus ring using `--focus-glow` CSS variable (WCAG 2.4.7)\n * - **Screen Readers:** Semantic `<label>` elements properly associated via `htmlFor`, error/success messages announced with `aria-describedby`\n * - **Error State:** Red border and error message displayed below input, programmatically associated for screen readers\n * - **Success State:** Green border and success message displayed below input, programmatically associated for screen readers\n * - **Touch Targets:** Minimum 44x44px touch target on mobile devices (WCAG 2.5.5)\n * - **Color Contrast:** All text meets WCAG AA contrast ratio 4.5:1 minimum against backgrounds\n * - **Motion:** Icon color transitions respect `prefers-reduced-motion` settings\n *\n * @example\n * ```tsx\n * // Basic input with label\n * <InputGlass label=\"Email\" placeholder=\"you@example.com\" />\n *\n * // With aria-describedby for additional context\n * <InputGlass\n *   label=\"Username\"\n *   placeholder=\"Enter username\"\n *   aria-describedby=\"username-help\"\n * />\n * <span id=\"username-help\">Must be 3-20 characters</span>\n *\n * // With validation states (automatically announced to screen readers)\n * <InputGlass label=\"Username\" error=\"Username is required\" />\n * <InputGlass label=\"Password\" success=\"Strong password\" type=\"password\" />\n *\n * // With icon and accessible label\n * <InputGlass\n *   icon={Search}\n *   placeholder=\"Search...\"\n *   aria-label=\"Search products\"\n * />\n * <InputGlass icon={Mail} iconPosition=\"right\" type=\"email\" />\n *\n * // Disabled state (automatically announced)\n * <InputGlass label=\"Email\" disabled value=\"locked@example.com\" />\n *\n * // Form integration with accessible error handling\n * <form onSubmit={handleSubmit}>\n *   <InputGlass\n *     label=\"Email\"\n *     type=\"email\"\n *     required\n *     error={errors.email}\n *     aria-invalid={!!errors.email}\n *   />\n *   <InputGlass\n *     label=\"Password\"\n *     type=\"password\"\n *     icon={Lock}\n *     error={errors.password}\n *   />\n *   <ButtonGlass type=\"submit\">Sign In</ButtonGlass>\n * </form>\n * ```\n */\nexport interface InputGlassProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof inputVariants> {\n  /**\n   * Label text displayed above the input field\n   */\n  readonly label?: string;\n\n  /**\n   * Error message to display below the input (red styling)\n   */\n  readonly error?: string;\n\n  /**\n   * Success message to display below the input (green styling)\n   */\n  readonly success?: string;\n\n  /**\n   * Icon component from lucide-react to display\n   * @example icon={Search}\n   */\n  readonly icon?: LucideIcon;\n\n  /**\n   * Position of the icon relative to input text\n   * @default \"left\"\n   */\n  readonly iconPosition?: 'left' | 'right';\n\n  /**\n   * @deprecated Use `size` prop instead. Will be removed in v4.0\n   * @default \"md\"\n   */\n  readonly inputSize?: 'sm' | 'md' | 'lg';\n\n  // Note: size prop comes from VariantProps<typeof inputVariants>\n}\n\n// ========================================\n// COMPONENT\n// ========================================\n\nexport const InputGlass = forwardRef<HTMLInputElement, InputGlassProps>(\n  (\n    {\n      className,\n      size,\n      inputSize,\n      label,\n      error,\n      success,\n      icon: Icon,\n      iconPosition = 'left',\n      disabled,\n      onFocus,\n      onBlur,\n      ...props\n    },\n    ref\n  ) => {\n    // Determine size value with fallback to deprecated inputSize prop\n    const sizeValue = size ?? inputSize ?? 'md';\n\n    // Deprecation warning in development mode\n    if (process.env.NODE_ENV !== 'production' && inputSize !== undefined) {\n      console.warn(\n        '[InputGlass] The `inputSize` prop is deprecated and will be removed in v4.0. Use `size` instead.'\n      );\n    }\n\n    const { isFocused, focusProps } = useFocus();\n\n    // Wrap focus handlers to call both internal and external callbacks\n    const handleFocus = useCallback(\n      (e: FocusEvent<HTMLInputElement>) => {\n        focusProps.onFocus(e);\n        onFocus?.(e);\n      },\n      [focusProps, onFocus]\n    );\n\n    const handleBlur = useCallback(\n      (e: FocusEvent<HTMLInputElement>) => {\n        focusProps.onBlur(e);\n        onBlur?.(e);\n      },\n      [focusProps, onBlur]\n    );\n\n    const hasIcon = Boolean(Icon);\n    const paddingLeft = hasIcon && iconPosition === 'left' ? 'pl-10' : '';\n    const paddingRight = hasIcon && iconPosition === 'right' ? 'pr-10' : '';\n\n    return (\n      <FormFieldWrapper\n        label={label}\n        error={error}\n        success={success}\n        htmlFor={props.id}\n        className={className}\n      >\n        <div className=\"relative\">\n          {Icon && iconPosition === 'left' && (\n            <Icon\n              className={cn(\n                'absolute left-2.5 md:left-3 top-1/2 -translate-y-1/2 transition-colors duration-300 z-10',\n                ICON_SIZES.md\n              )}\n              style={{\n                color: isFocused ? 'var(--text-accent)' : 'var(--text-muted)',\n              }}\n            />\n          )}\n          <input\n            ref={ref}\n            data-slot=\"input\"\n            className={cn(inputVariants({ size: sizeValue }), paddingLeft, paddingRight)}\n            style={getInputStyles(isFocused, error, success)}\n            disabled={disabled}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            {...props}\n          />\n          {Icon && iconPosition === 'right' && (\n            <Icon\n              className={cn(\n                'absolute right-2.5 md:right-3 top-1/2 -translate-y-1/2 transition-colors duration-300 z-10',\n                ICON_SIZES.md\n              )}\n              style={{\n                color: isFocused ? 'var(--text-accent)' : 'var(--text-muted)',\n              }}\n            />\n          )}\n        </div>\n      </FormFieldWrapper>\n    );\n  }\n);\n\nInputGlass.displayName = 'InputGlass';\n\n// ========================================\n// SIMPLE INPUT (SHADCN/UI COMPATIBLE)\n// ========================================\n\n/**\n * Input - Simple glass-styled input element (shadcn/ui compatible)\n *\n * This is a minimal input component without label/error/success wrapper.\n * Use `InputGlass` when you need the full form field with validation states.\n *\n * @example\n * ```tsx\n * import { Input } from 'shadcn-glass-ui'\n *\n * <Input placeholder=\"Enter email\" />\n * <Input type=\"password\" className=\"w-full\" />\n * <Input disabled value=\"Disabled input\" />\n * ```\n * @since v2.5.0\n */\nexport const Input = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <input\n        ref={ref}\n        data-slot=\"input\"\n        className={cn(inputVariants({ size: 'md' }), className)}\n        style={{\n          background: 'var(--input-bg)',\n          border: '1px solid var(--input-border)',\n          color: 'var(--input-text)',\n        }}\n        {...props}\n      />\n    );\n  }\n);\n\nInput.displayName = 'Input';\n"
    }
  ],
  "categories": [
    "ui"
  ],
  "cssVars": {
    "light": {
      "--glass-bg": "rgba(255, 255, 255, 0.1)",
      "--glass-border": "rgba(255, 255, 255, 0.2)",
      "--blur-sm": "8px",
      "--blur-md": "16px",
      "--blur-lg": "24px"
    },
    "dark": {
      "--glass-bg": "rgba(255, 255, 255, 0.05)",
      "--glass-border": "rgba(255, 255, 255, 0.1)",
      "--blur-sm": "8px",
      "--blur-md": "16px",
      "--blur-lg": "24px"
    }
  }
}