{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-error-summary",
  "title": "Form Error Summary",
  "description": "A submission error summary with links that focus the matching fields.",
  "dependencies": [
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://uaiblocks.dev/r/uai-theme.json",
    "https://uaiblocks.dev/r/uai-utils.json"
  ],
  "files": [
    {
      "path": "src/registry/uai/components/form-error-summary.tsx",
      "content": "\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { CircleAlert } from \"lucide-react\";\nimport { type ComponentProps, createContext, useContext, useEffect, useId, useRef } from \"react\";\nimport { cn } from \"@/lib/uai-utils\";\n\nexport const FORM_ERROR_SUMMARY_VARIANTS = [\"card\", \"plain\", \"compact\"] as const;\nexport type FormErrorSummaryVariant = (typeof FORM_ERROR_SUMMARY_VARIANTS)[number];\nexport type FormErrorSummaryProps = ComponentProps<\"section\"> & {\n  variant?: FormErrorSummaryVariant;\n  focusOnMount?: boolean;\n};\nconst Context = createContext<string | null>(null);\n\nconst formErrorSummaryVariants = cva(\n  \"border-solid border-destructive/30 border-l-destructive text-foreground outline-none marker:text-destructive-ink/70 focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-ring\",\n  {\n    variants: {\n      variant: {\n        card: \"rounded-[14px] border border-l-3 bg-[color-mix(in_oklab,var(--destructive)_7%,var(--card))] p-4 text-[13px]/[18px]\",\n        plain:\n          \"rounded-none border-0 border-l-3 bg-transparent py-0.5 pr-0 pl-3.5 text-[13px]/[18px]\",\n        compact:\n          \"rounded-xl border border-l-3 bg-[color-mix(in_oklab,var(--destructive)_7%,var(--card))] p-3 text-[12.5px]/[18px]\",\n      },\n    },\n  },\n);\n\nexport function FormErrorSummary({\n  variant = \"card\",\n  focusOnMount = false,\n  children,\n  className,\n  ...props\n}: FormErrorSummaryProps) {\n  const id = useId();\n  const ref = useRef<HTMLElement>(null);\n  useEffect(() => {\n    if (focusOnMount) ref.current?.focus();\n  }, [focusOnMount]);\n  return (\n    <Context.Provider value={id}>\n      <section\n        role=\"alert\"\n        data-slot=\"form-error-summary\"\n        data-variant={variant}\n        className={cn(\n          formErrorSummaryVariants({ variant }),\n          \"animate-in fade-in-0 slide-in-from-top-1 duration-240 ease-out-quint motion-reduce:animate-none\",\n          className,\n        )}\n        {...props}\n        ref={ref}\n        tabIndex={-1}\n        aria-labelledby={id}\n      >\n        {children}\n      </section>\n    </Context.Provider>\n  );\n}\nexport function FormErrorSummaryTitle({\n  children = \"Check the following fields\",\n  className,\n  ...props\n}: ComponentProps<\"h2\">) {\n  const id = useContext(Context);\n  if (!id) throw new Error(\"FormErrorSummaryTitle must be used within FormErrorSummary\");\n  return (\n    <h2\n      data-slot=\"form-error-summary-title\"\n      className={cn(\"m-0 flex items-center gap-2 text-sm/5 font-medium\", className)}\n      {...props}\n      id={id}\n    >\n      <CircleAlert\n        size={16}\n        strokeWidth={1.75}\n        aria-hidden=\"true\"\n        className=\"shrink-0 text-destructive-ink\"\n      />\n      {children}\n    </h2>\n  );\n}\nexport function FormErrorSummaryList({ className, ...props }: ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"form-error-summary-list\"\n      className={cn(\"m-0 mt-2 grid gap-1 pl-[42px]\", className)}\n      {...props}\n    />\n  );\n}\nexport function FormErrorSummaryLink({\n  fieldId,\n  onClick,\n  className,\n  ...props\n}: Omit<ComponentProps<\"a\">, \"href\"> & { fieldId: string }) {\n  return (\n    <li data-slot=\"form-error-summary-item\">\n      <a\n        data-slot=\"form-error-summary-link\"\n        className={cn(\n          \"text-foreground underline decoration-foreground/30 decoration-1 underline-offset-3 transition-[text-decoration-color,color] duration-120 ease-[ease-out] hover:decoration-current focus-visible:rounded-[4px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none\",\n          className,\n        )}\n        {...props}\n        href={`#${encodeURIComponent(fieldId)}`}\n        onClick={(event) => {\n          onClick?.(event);\n          if (event.defaultPrevented) return;\n          const field = document.getElementById(fieldId);\n          if (field) {\n            event.preventDefault();\n            field.focus();\n            field.scrollIntoView?.({ block: \"center\" });\n          }\n        }}\n      />\n    </li>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@ui/uai/form-error-summary.tsx"
    }
  ],
  "categories": [
    "forms"
  ],
  "type": "registry:ui"
}