{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input",
  "type": "registry:ui",
  "title": "Input",
  "description": "Single-line text field — the form workhorse — with intent states and full sizing support.",
  "dependencies": [
    "@saasflare/ui",
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/input.tsx",
      "type": "registry:ui",
      "content": "// @toreview\n\"use client\"\n\n/**\n * @fileoverview Input — premium text input with Motion animated focus ring and spring transition for polished form interactions.\n * @module packages/ui/components/ui/input\n * @layer core\n *\n * @component\n * @example\n * import { Input } from '@saasflare/ui';\n *\n * <Input type=\"email\" placeholder=\"you@example.com\" />\n */\n\nimport * as React from \"react\"\nimport { m } from \"motion/react\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\nimport { useSaasflareMotion } from \"@saasflare/ui\"\n\ntype InputBaseProps = Omit<\n  React.ComponentProps<\"input\">,\n  \"onDrag\" | \"onDragStart\" | \"onDragEnd\" | \"onAnimationStart\" | \"onAnimationEnd\"\n>\n\n/**\n * Props for {@link Input}.\n *\n * Extends the native input props with {@link SaasflareComponentProps}, so\n * `surface`, `radius`, `animated`, and `iconWeight` can be supplied\n * per-instance or inherited from <SaasflareProvider>.\n */\ninterface InputProps extends Omit<InputBaseProps, keyof SaasflareComponentProps>, SaasflareComponentProps {}\n\n/**\n * Single-line text input with a spring-animated focus ring. Accepts all\n * native input props; `surface`, `radius`, and `animated` resolve against\n * the <SaasflareProvider> context when omitted.\n *\n * @component\n * @layer core\n */\nfunction Input({ className, type, surface, radius, animated, iconWeight, ...props }: InputProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n  const motion = useSaasflareMotion(sf.animated, { type: \"spring\", stiffness: 300, damping: 20 })\n\n  return (\n    <m.input\n      {...props}\n      type={type}\n      data-slot=\"input\"\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n      whileFocus={motion.disabled ? undefined : { boxShadow: \"0 0 0 3px color-mix(in oklab, var(--ring) 30%, transparent)\" }}\n      transition={motion.transition}\n      className={cn(\n        \"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow,border-color] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30\",\n        \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n        \"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n    />\n  )\n}\n\nexport { Input, type InputProps }\n",
      "target": "components/ui/input.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/input.json"
  }
}