{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"gradient-border-css-input-focus-ring","type":"registry:component","title":"Gradient Border CSS Input Focus Ring","description":"","dependencies":[],"files":[{"path":"components/we-inc/gradient-border-css-input-focus-ring.tsx","type":"registry:component","content":"// Form fields whose border turns into a gradient while focused: the same padding-box trick, switched on with :focus-within.\nconst fields = [\n  { id: \"gb4-name\", label: \"Full name\", type: \"text\", value: \"Priya Natarajan\" },\n  { id: \"gb4-email\", label: \"Work email\", type: \"email\", value: \"\" },\n];\n\nexport default function GradientBorderCssInputFocusRing() {\n  return (\n    <section className=\"bg-white px-5 py-16\">\n      <style>{`\n        .gb4-field { border: 2px solid transparent; background: linear-gradient(#fff,#fff) padding-box, linear-gradient(#e2e8f0,#e2e8f0) border-box; transition: box-shadow .2s; }\n        .gb4-field:hover { background: linear-gradient(#fff,#fff) padding-box, linear-gradient(#cbd5e1,#cbd5e1) border-box; }\n        .gb4-field:focus-within { background: linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg,#10b981,#0ea5e9,#6366f1) border-box; box-shadow: 0 4px 18px -6px rgba(14,165,233,.45); }\n        @media (prefers-reduced-motion: reduce) { .gb4-field { transition: none; } }\n      `}</style>\n      <form className=\"mx-auto max-w-md\" onSubmit={(e) => e.preventDefault()}>\n        <h2 className=\"text-xl font-semibold text-slate-900\">Request a demo</h2>\n        <p className=\"mt-1 text-sm text-slate-600\">Tab into a field to see its border turn into a gradient.</p>\n        <div className=\"mt-6 space-y-4\">\n          {fields.map((f) => (\n            <div key={f.id}>\n              <label htmlFor={f.id} className=\"text-sm font-medium text-slate-800\">{f.label}</label>\n              <div className=\"gb4-field mt-1.5 rounded-xl\">\n                <input id={f.id} type={f.type} defaultValue={f.value} placeholder={f.type === \"email\" ? \"you@company.com\" : undefined}\n                  className=\"h-12 w-full rounded-[10px] bg-transparent px-4 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none\" />\n              </div>\n            </div>\n          ))}\n          <div>\n            <label htmlFor=\"gb4-size\" className=\"text-sm font-medium text-slate-800\">Team size</label>\n            <div className=\"gb4-field mt-1.5 rounded-xl\">\n              <select id=\"gb4-size\" defaultValue=\"11-50\" className=\"h-12 w-full rounded-[10px] bg-transparent px-3 text-sm text-slate-900 focus:outline-none\">\n                <option>1-10</option><option>11-50</option><option>51-200</option><option>200+</option>\n              </select>\n            </div>\n          </div>\n        </div>\n        <button type=\"submit\" className=\"mt-6 h-12 w-full rounded-xl bg-slate-900 text-sm font-semibold text-white hover:bg-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2\">Book my demo</button>\n      </form>\n    </section>\n  );\n}\n"}]}