{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "termsselector",
  "type": "registry:component",
  "title": "TermsSelector",
  "description": "Componente Concorde TermsSelector — un solo archivo, TermsSelector.tsx.",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/TermsSelector.tsx",
      "type": "registry:file",
      "target": "components/TermsSelector.tsx",
      "content": "\"use client\";\n\n/**\n * TermsSelector — Generado por Concorde\n * Fuente: Figma VOYAGER · \"Label\" (nodo 2425:11019)\n *\n * Checkbox de términos: casilla 16×16 (radio 4) con relleno gradiente\n * (#8460E5 → #3B1782) y borde gradiente (white → #F4AC59 → #8460E5 → white)\n * cuando está marcada, más una etiqueta en #3B1782. Controlado o no controlado.\n */\n\nimport { forwardRef, useId } from \"react\";\nimport type { InputHTMLAttributes, JSX, ReactNode } from \"react\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\n/**\n * Hereda los atributos nativos del <input type=\"checkbox\"> (name, id, required,\n * aria-*, data-*, value…) salvo onChange, que aquí entrega el booleano marcado,\n * y children, que es la etiqueta. className se aplica al <label> raíz.\n */\nexport interface TermsSelectorProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"children\" | \"type\"> {\n  /** Callback al alternar */\n  onChange?: (checked: boolean) => void;\n  /** Etiqueta (texto de términos) */\n  children?: ReactNode;\n}\n\n// ─── Self-contained CSS ───────────────────────────────────────────────────────\n\nconst STYLE_ID = \"concorde-termsselector-styles\";\n\nconst TERMS_STYLES = `\n.pterms {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: 8px;\n  cursor: pointer;\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif);\n  font-size: 14px;\n  line-height: 20px;\n  color: #3B1782;\n}\n.pterms--disabled { cursor: not-allowed; opacity: 0.6; }\n.pterms__input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  opacity: 0;\n  margin: 0;\n  pointer-events: none;\n}\n.pterms__box {\n  flex-shrink: 0;\n  width: 16px;\n  height: 16px;\n  margin-top: 1px;\n  border-radius: 4px;\n  border: 1px solid transparent;\n  /* sin marcar: blanco con borde lila claro */\n  background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(135deg, #CFC2F2, #CFC2F2);\n  background-origin: border-box;\n  background-clip: padding-box, border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-image 0.15s, box-shadow 0.15s;\n}\n.pterms__input:checked + .pterms__box {\n  /* marcado: relleno gradiente + borde gradiente (white → F4AC59 → 8460E5 → white) */\n  background-image:\n    linear-gradient(150deg, #8460E5 0%, #3B1782 100%),\n    linear-gradient(120deg, #ffffff 0%, #F4AC59 22%, #8460E5 75%, #ffffff 100%);\n}\n.pterms__input:focus-visible + .pterms__box { outline: 2px solid #8460E5; outline-offset: 2px; }\n.pterms__check { width: 10px; height: 10px; opacity: 0; transition: opacity 0.12s; }\n.pterms__input:checked + .pterms__box .pterms__check { opacity: 1; }\n.pterms__label { user-select: none; }\n@media (prefers-reduced-motion: reduce) {\n  .pterms__box, .pterms__check { transition: none; }\n}\n`;\n\nlet _stylesInjected = false;\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nconst TermsSelector = forwardRef<HTMLInputElement, TermsSelectorProps>(function TermsSelector({\n  checked,\n  defaultChecked,\n  onChange,\n  children = \"He leído y acepto los términos y condiciones.\",\n  disabled = false,\n  id,\n  className = \"\",\n  ...rest\n}, ref): JSX.Element {\n  const uid = useId().replace(/:/g, \"-\");\n  const inputId = id ?? `${uid}-input`;\n  const controlled = checked !== undefined;\n\n  if (typeof document !== \"undefined\" && !_stylesInjected) {\n    if (!document.getElementById(STYLE_ID)) {\n      const el = document.createElement(\"style\");\n      el.id = STYLE_ID;\n      el.textContent = TERMS_STYLES;\n      document.head.appendChild(el);\n    }\n    _stylesInjected = true;\n  }\n\n  return (\n    <>\n      <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: TERMS_STYLES }} />\n      <label htmlFor={inputId} className={[\"pterms\", disabled ? \"pterms--disabled\" : \"\", className].filter(Boolean).join(\" \")}>\n        <input\n          ref={ref}\n          {...rest}\n          id={inputId}\n          type=\"checkbox\"\n          className=\"pterms__input\"\n          checked={controlled ? checked : undefined}\n          defaultChecked={controlled ? undefined : defaultChecked}\n          disabled={disabled}\n          onChange={function handle(e) { onChange?.(e.target.checked); }}\n        />\n        <span className=\"pterms__box\" aria-hidden=\"true\">\n          <svg className=\"pterms__check\" viewBox=\"0 0 12 12\" fill=\"none\">\n            <path d=\"M2.5 6.2L4.8 8.5L9.5 3.5\" stroke=\"#ffffff\" strokeWidth=\"1.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          </svg>\n        </span>\n        <span className=\"pterms__label\">{children}</span>\n      </label>\n    </>\n  );\n});\n\nexport default TermsSelector;\n"
    }
  ]
}