{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "heading-with-anchor",
  "title": "Heading With Anchor",
  "description": "component for the Heading With Anchor",
  "dependencies": [
    "@radix-ui/react-slot",
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "app/registry/spectrumui/heading-with-anchor.tsx",
      "content": "\"use client\";\nimport React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\ntype AnchorProps = {\n  anchor?: string;\n  anchorVisibility?: \"hover\" | \"always\" | \"never\";\n  disableCopyToClipboard?: boolean;\n};\n\nconst Anchor = ({\n  anchor,\n  disableCopyToClipboard = false,\n  anchorVisibility = \"always\",\n}: AnchorProps) => {\n  function copyToClipboard() {\n    if (disableCopyToClipboard) return;\n    const currentUrl = window.location.href.replace(/#.*$/, \"\");\n    const urlWithId = `${currentUrl}#${anchor}`;\n\n    void navigator.clipboard.writeText(urlWithId);\n  }\n\n  return (\n    <div\n      className={cn(\n        \"ms-2 pt-1\",\n        anchorVisibility === \"always\" && \"visible\",\n        anchorVisibility === \"never\" && \"hidden\",\n        anchorVisibility === \"hover\" && \"invisible group-hover:visible\",\n      )}\n    ></div>\n  );\n};\n\nconst headingVariants = cva(\"font-bold text-primary\", {\n  variants: {\n    variant: {\n      h1: \"leading-14 text-3xl \",\n      h2: \"leading-14 text-2xl \",\n      h3: \"leading-10 text-xl lg:text-3xl\",\n      h4: \"leading-8 text-lg \",\n      h5: \"leading-8 text-lg \",\n      h6: \"leading-7 text-sm \",\n      p: \"leading-5 text-lg  font-normal\",\n    },\n  },\n  defaultVariants: {\n    variant: \"h6\",\n  },\n});\n\ntype BaseHeadingProps = {\n  children?: React.ReactNode;\n  variant?: string;\n  className?: string;\n  asChild?: boolean;\n  anchor?: string;\n  anchorAlignment?: \"close\" | \"spaced\";\n  anchorVisibility?: \"hover\" | \"always\" | \"never\";\n  disableCopyToClipboard?: boolean;\n} & React.HTMLAttributes<HTMLHeadingElement> &\n  VariantProps<typeof headingVariants>;\n\nconst BaseHeading = ({\n  children,\n  className,\n  variant = \"h6\",\n  asChild = false,\n  anchor,\n  anchorAlignment = \"spaced\",\n  anchorVisibility = \"always\",\n  disableCopyToClipboard = false,\n  ...props\n}: BaseHeadingProps) => {\n  const Comp = asChild ? Slot : variant;\n  return (\n    <>\n      <Comp\n        id={anchor}\n        {...props}\n        className={cn(\n          anchor && \"flex scroll-m-20 items-center gap-1\", // modify `scroll-m-20` according to your header height.\n          anchorAlignment === \"spaced\" && \"justify-between\",\n          anchorVisibility === \"hover\" && \"group\",\n          headingVariants({ variant, className }),\n        )}\n      >\n        {children}\n        {anchor && (\n          <Anchor\n            anchor={anchor}\n            anchorVisibility={anchorVisibility}\n            disableCopyToClipboard={disableCopyToClipboard}\n          />\n        )}\n      </Comp>\n    </>\n  );\n};\n\ntype TypographyProps = Omit<BaseHeadingProps, \"variant\" | \"asChild\">;\n\nconst H1 = (props: TypographyProps) => {\n  return <BaseHeading {...props} variant=\"h1\" />;\n};\n\nconst H2 = (props: TypographyProps) => {\n  return <BaseHeading {...props} variant=\"h2\" />;\n};\n\nconst H3 = (props: TypographyProps) => {\n  return <BaseHeading {...props} variant=\"h3\" />;\n};\n\nconst H4 = (props: TypographyProps) => {\n  return <BaseHeading {...props} variant=\"h4\" />;\n};\n\nconst H5 = (props: TypographyProps) => {\n  return <BaseHeading {...props} variant=\"h5\" />;\n};\n\nconst H6 = (props: TypographyProps) => {\n  return <BaseHeading {...props} variant=\"h6\" />;\n};\n\nconst P = (props: TypographyProps) => {\n  return <BaseHeading {...props} variant=\"p\" />;\n};\n\nexport { H1, H2, H3, H4, H5, H6, P };\n",
      "type": "registry:component",
      "target": "components/spectrumui/heading-with-anchor.tsx"
    }
  ],
  "type": "registry:component"
}