{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "masai-input",
  "title": "Masai Input",
  "description": "Outlined text field with optional left/right icons and size tokens (regular today).",
  "dependencies": [
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "registry/components/masai-input.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst rootVariants = cva(\n  \"flex min-h-0 w-full min-w-0 items-center rounded-xl border border-gray-200 bg-white text-gray-900 outline-none transition-[color,border-color,box-shadow] focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-400 focus-within:ring-offset-2 focus-within:ring-offset-background\",\n  {\n    variants: {\n      size: {\n        regular:\n          // \"h-10 gap-2 px-3 type-b2-md [&_.masai-input__icon-slot_svg]:size-[18px]\",\n          \"min-h-[44px] py-[10px] px-[12px] rounded-[8px] border border-gray-200 bg-white text-gray-900 outline-none transition-[color,border-color,box-shadow] focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-400 focus-within:ring-offset-2 focus-within:ring-offset-background\",\n      },\n      // Future: small, large, etc.\n    },\n    defaultVariants: {\n      size: \"regular\",\n    },\n  },\n);\n\nexport type MasaiInputSize = \"regular\";\n\nexport type MasaiInputProps = Omit<\n  React.ComponentProps<\"input\">,\n  \"size\" | \"className\"\n> &\n  VariantProps<typeof rootVariants> & {\n    /** Visual size token. Only `regular` is supported today. */\n    size?: MasaiInputSize;\n    /** Icon rendered to the left of the field. */\n    iconLeft?: React.ReactNode;\n    /** Icon rendered to the right of the field. */\n    iconRight?: React.ReactNode;\n    /** Classes applied to the outer shell (layout, width). */\n    className?: string;\n    /** Classes merged onto the native `input`. */\n    inputClassName?: string;\n  };\n\n/**\n * MasaiInput — bordered text field with optional left/right adornments,\n * Masai typography, and focus ring on the wrapper.\n */\nexport function MasaiInput({\n  iconLeft,\n  iconRight,\n  size = \"regular\",\n  className,\n  inputClassName,\n  disabled,\n  ...inputProps\n}: MasaiInputProps) {\n  return (\n    <div\n      className={cn(\n        rootVariants({ size }),\n        disabled && \"pointer-events-none opacity-50\",\n        className,\n      )}\n    >\n      {iconLeft ? (\n        <span\n          className=\"mr-[8px] masai-input__icon-slot inline-flex shrink-0 items-center text-gray-600\"\n          aria-hidden\n        >\n          {iconLeft}\n        </span>\n      ) : null}\n      <input\n        {...inputProps}\n        disabled={disabled}\n        data-slot=\"masai-input-control\"\n        className={cn(\n          \"masai-input-control min-h-0 min-w-0 flex-1 border-0 bg-transparent p-0 text-inherit caret-primary-600 outline-none placeholder:text-gray-400 focus-visible:ring-0 disabled:cursor-not-allowed\",\n          inputClassName,\n        )}\n      />\n      {iconRight ? (\n        <span\n          className=\"ml-[8px] masai-input__icon-slot inline-flex shrink-0 items-center text-gray-600\"\n          aria-hidden\n        >\n          {iconRight}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}