{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "text-highlighter",
  "type": "registry:block",
  "title": "Text highlighter",
  "description": "Text highlighter",
  "files": [
    {
      "path": "components/usages/texthighlighterusage.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useRef } from \"react\";\n\nimport TextHighlighter from \"@/registry/open-source/text-highlighter\";\nimport Lenis from \"lenis\";\n\nexport default function TextHighlighterDemo() {\n\tconst containerRef = useRef<HTMLDivElement | null>(null);\n\n\tconst transition = { type: \"spring\", duration: 1, delay: 0.4, bounce: 0 };\n\tconst highlightClass = \"rounded-[0.3em] px-px\";\n\tconst highlightColor = \"#F2AD91\";\n\tconst inViewOptions = { once: true, initial: true, amount: 0.1 };\n\n\tuseEffect(() => {\n\t\tif (!containerRef.current) return;\n\n\t\tconst lenis = new Lenis({\n\t\t\tautoRaf: true,\n\t\t\twrapper: containerRef.current,\n\t\t\tduration: 1.2,\n\t\t\torientation: \"vertical\",\n\t\t\tgestureOrientation: \"vertical\",\n\t\t\tsmoothWheel: true,\n\t\t\ttouchMultiplier: 2,\n\t\t});\n\n\t\treturn () => {\n\t\t\tlenis.destroy();\n\t\t};\n\t}, []);\n\n\treturn (\n\t\t<div className=\"w-dvw h-dvh bg-background relative p-0\">\n\t\t\t<div className=\"absolute bottom-0 w-full left-0 h-64 bg-linear-to-t from-[#fefefe] from-10% via-50% via-[#fefefe]/50 to-transparent pointer-events-none isolate\" />\n\n\t\t\t<div\n\t\t\t\tclassName=\"h-full w-full z-10 bg-background overflow-scroll\"\n\t\t\t\tref={containerRef}\n\t\t\t>\n\t\t\t\t<div className=\"max-w-md mx-auto px-4 mt-40 pb-64 p-0  text-secondary\">\n\t\t\t\t\t<h1 className=\"text-4xl font-medium mb-20 font-calendas tracking-tight\">\n\t\t\t\t\t\tTypeface alphabets\n\t\t\t\t\t</h1>\n\n\t\t\t\t\t<div className=\"text leading-normal space-y-4 font-overusedGrotesk \">\n\t\t\t\t\t\t<p className=\"whitespace-break-spaces\">\n\t\t\t\t\t\t\tThe present-day designer has a host of printing types at\n\t\t\t\t\t\t\this disposal.{\" \"}\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tSince Gutenberg first invented movable type in 1436-55\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\thundreds of different types have been designed and cast in\n\t\t\t\t\t\t\tlead.{\" \"}\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tThe most recent technical developments\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\twith computer and photo-typesetting have once again brought\n\t\t\t\t\t\t\tnew faces or variations of old ones on the market.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tThe choice is up to the designer\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\tIt is left to his feeling for form to use{\" \"}\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tgood or poor typefaces\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\tfor his design work. In view of the limited space\n\t\t\t\t\t\t\tavailable, we shall refer here to only a few of the\n\t\t\t\t\t\t\toutstanding designs of the past and the 20th century which\n\t\t\t\t\t\t\thave appeared most frequently in publications.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tKnowledge of the quality of a typeface is of the greatest\n\t\t\t\t\t\t\timportance for the{\" \"}\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tfunctional, aesthetic and psychological effect\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\tof printed matter. Again, the typographic design, i. e. the\n\t\t\t\t\t\t\tcorrect spaces between letters and words and the length and\n\t\t\t\t\t\t\tspacing of lines conducive to easy reading, does much to\n\t\t\t\t\t\t\tenhance the impression created.{\" \"}\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tToday the field is dominated mainly by computer and\n\t\t\t\t\t\t\t\tphoto-typesetting\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\tA typical characteristic of these forms of composition is\n\t\t\t\t\t\t\tthe too narrow setting of the letters which makes reading\n\t\t\t\t\t\t\tdifficult. The designer will be well advised to demand the\n\t\t\t\t\t\t\tnormal spacing between letters when ordering\n\t\t\t\t\t\t\tphoto-typesetting.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tBy studying the classic designs\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\tof{\" \"}\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tGaramond, Casion, Bodoni, Walbaum\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\tand others, the designer can learn what the timeless\n\t\t\t\t\t\t\tcriteria are which produce a refined and artistic typeface\n\t\t\t\t\t\t\tthat makes for ease of reading.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tThe lead type designs of{\" \"}\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tBerthold, Helvetica, Folio, Univers\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\tetc. produce pleasant and easily legible type areas. The\n\t\t\t\t\t\t\ttypographic rules that apply to the roman typefaces are\n\t\t\t\t\t\t\talso valid for the sans serifs.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tThe creators of these type designs\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\twere extremely intelligent artists with high creative\n\t\t\t\t\t\t\tpowers. This is shown by the fact that for more than four\n\t\t\t\t\t\t\tcenturies innumerable type designers have sought to create\n\t\t\t\t\t\t\tnew type alphabets but very few of these have gained\n\t\t\t\t\t\t\tacceptance.{\" \"}\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tAn alphabet of Garamond\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\tfor example, is an artistic achievement of the first order.\n\t\t\t\t\t\t\tEach letter has its own unmistakable face, whether lower or\n\t\t\t\t\t\t\tupper case, and displays the highest quality of form and\n\t\t\t\t\t\t\toriginality. Each letter has its own personality and makes\n\t\t\t\t\t\t\ta marked impact.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tEvery designer who is concerned with typography should take\n\t\t\t\t\t\t\tthe trouble when creating graphic designs to{\" \"}\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tsketch words and sentences by hand\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\tMany designers take advantage of the Letraset process,\n\t\t\t\t\t\t\twhich can undoubtedly produce a clean draft design that is\n\t\t\t\t\t\t\talmost ready for press. But a feeling for good letter forms\n\t\t\t\t\t\t\tand an attractive typeface can be acquired only by constant\n\t\t\t\t\t\t\tand careful practice in sketching letters.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tHow the forms of letters can create simultaneously both\n\t\t\t\t\t\t\t\ttension and nobility\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\tand how pleasantly legible lines of type can appear to the\n\t\t\t\t\t\t\teye of the reader may be seen from the examples on the\n\t\t\t\t\t\t\tfollowing pages.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tThe Renaissance created midline typography\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\twhich held its position until the 20th century.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tThe new typography differs from the old in that it is the\n\t\t\t\t\t\t\tfirst to try to{\" \"}\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tdevelop the outward appearance from the function of the\n\t\t\t\t\t\t\t\ttext\n\t\t\t\t\t\t\t</TextHighlighter>\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tThe new typography uses the background\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\tas an element of design which is on a par with the other\n\t\t\t\t\t\t\telements.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tEarlier typography (midline typography){\" \"}\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tplayed an active role against a dead, passive\n\t\t\t\t\t\t\t\tbackground.\n\t\t\t\t\t\t\t</TextHighlighter>\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/texthighlighterusage.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useRef } from \"react\";\n\nimport TextHighlighter from \"@/registry/open-source/text-highlighter\";\nimport Lenis from \"lenis\";\n\nexport default function TextHighlighterDemo() {\n\tconst containerRef = useRef<HTMLDivElement | null>(null);\n\n\tconst transition = { type: \"spring\", duration: 1, delay: 0.4, bounce: 0 };\n\tconst highlightClass = \"rounded-[0.3em] px-px\";\n\tconst highlightColor = \"#F2AD91\";\n\tconst inViewOptions = { once: true, initial: true, amount: 0.1 };\n\n\tuseEffect(() => {\n\t\tif (!containerRef.current) return;\n\n\t\tconst lenis = new Lenis({\n\t\t\tautoRaf: true,\n\t\t\twrapper: containerRef.current,\n\t\t\tduration: 1.2,\n\t\t\torientation: \"vertical\",\n\t\t\tgestureOrientation: \"vertical\",\n\t\t\tsmoothWheel: true,\n\t\t\ttouchMultiplier: 2,\n\t\t});\n\n\t\treturn () => {\n\t\t\tlenis.destroy();\n\t\t};\n\t}, []);\n\n\treturn (\n\t\t<div className=\"w-dvw h-dvh bg-background relative p-0\">\n\t\t\t<div className=\"absolute bottom-0 w-full left-0 h-64 bg-linear-to-t from-[#fefefe] from-10% via-50% via-[#fefefe]/50 to-transparent pointer-events-none isolate\" />\n\n\t\t\t<div\n\t\t\t\tclassName=\"h-full w-full z-10 bg-background overflow-scroll\"\n\t\t\t\tref={containerRef}\n\t\t\t>\n\t\t\t\t<div className=\"max-w-md mx-auto px-4 mt-40 pb-64 p-0  text-secondary\">\n\t\t\t\t\t<h1 className=\"text-4xl font-medium mb-20 font-calendas tracking-tight\">\n\t\t\t\t\t\tTypeface alphabets\n\t\t\t\t\t</h1>\n\n\t\t\t\t\t<div className=\"text leading-normal space-y-4 font-overusedGrotesk \">\n\t\t\t\t\t\t<p className=\"whitespace-break-spaces\">\n\t\t\t\t\t\t\tThe present-day designer has a host of printing types at\n\t\t\t\t\t\t\this disposal.{\" \"}\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tSince Gutenberg first invented movable type in 1436-55\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\thundreds of different types have been designed and cast in\n\t\t\t\t\t\t\tlead.{\" \"}\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tThe most recent technical developments\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\twith computer and photo-typesetting have once again brought\n\t\t\t\t\t\t\tnew faces or variations of old ones on the market.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tThe choice is up to the designer\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\tIt is left to his feeling for form to use{\" \"}\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tgood or poor typefaces\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\tfor his design work. In view of the limited space\n\t\t\t\t\t\t\tavailable, we shall refer here to only a few of the\n\t\t\t\t\t\t\toutstanding designs of the past and the 20th century which\n\t\t\t\t\t\t\thave appeared most frequently in publications.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tKnowledge of the quality of a typeface is of the greatest\n\t\t\t\t\t\t\timportance for the{\" \"}\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tfunctional, aesthetic and psychological effect\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\tof printed matter. Again, the typographic design, i. e. the\n\t\t\t\t\t\t\tcorrect spaces between letters and words and the length and\n\t\t\t\t\t\t\tspacing of lines conducive to easy reading, does much to\n\t\t\t\t\t\t\tenhance the impression created.{\" \"}\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tToday the field is dominated mainly by computer and\n\t\t\t\t\t\t\t\tphoto-typesetting\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\tA typical characteristic of these forms of composition is\n\t\t\t\t\t\t\tthe too narrow setting of the letters which makes reading\n\t\t\t\t\t\t\tdifficult. The designer will be well advised to demand the\n\t\t\t\t\t\t\tnormal spacing between letters when ordering\n\t\t\t\t\t\t\tphoto-typesetting.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tBy studying the classic designs\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\tof{\" \"}\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tGaramond, Casion, Bodoni, Walbaum\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\tand others, the designer can learn what the timeless\n\t\t\t\t\t\t\tcriteria are which produce a refined and artistic typeface\n\t\t\t\t\t\t\tthat makes for ease of reading.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tThe lead type designs of{\" \"}\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tBerthold, Helvetica, Folio, Univers\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\tetc. produce pleasant and easily legible type areas. The\n\t\t\t\t\t\t\ttypographic rules that apply to the roman typefaces are\n\t\t\t\t\t\t\talso valid for the sans serifs.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tThe creators of these type designs\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\twere extremely intelligent artists with high creative\n\t\t\t\t\t\t\tpowers. This is shown by the fact that for more than four\n\t\t\t\t\t\t\tcenturies innumerable type designers have sought to create\n\t\t\t\t\t\t\tnew type alphabets but very few of these have gained\n\t\t\t\t\t\t\tacceptance.{\" \"}\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tAn alphabet of Garamond\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\tfor example, is an artistic achievement of the first order.\n\t\t\t\t\t\t\tEach letter has its own unmistakable face, whether lower or\n\t\t\t\t\t\t\tupper case, and displays the highest quality of form and\n\t\t\t\t\t\t\toriginality. Each letter has its own personality and makes\n\t\t\t\t\t\t\ta marked impact.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tEvery designer who is concerned with typography should take\n\t\t\t\t\t\t\tthe trouble when creating graphic designs to{\" \"}\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tsketch words and sentences by hand\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\tMany designers take advantage of the Letraset process,\n\t\t\t\t\t\t\twhich can undoubtedly produce a clean draft design that is\n\t\t\t\t\t\t\talmost ready for press. But a feeling for good letter forms\n\t\t\t\t\t\t\tand an attractive typeface can be acquired only by constant\n\t\t\t\t\t\t\tand careful practice in sketching letters.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tHow the forms of letters can create simultaneously both\n\t\t\t\t\t\t\t\ttension and nobility\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\tand how pleasantly legible lines of type can appear to the\n\t\t\t\t\t\t\teye of the reader may be seen from the examples on the\n\t\t\t\t\t\t\tfollowing pages.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tThe Renaissance created midline typography\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\twhich held its position until the 20th century.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tThe new typography differs from the old in that it is the\n\t\t\t\t\t\t\tfirst to try to{\" \"}\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tdevelop the outward appearance from the function of the\n\t\t\t\t\t\t\t\ttext\n\t\t\t\t\t\t\t</TextHighlighter>\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tThe new typography uses the background\n\t\t\t\t\t\t\t</TextHighlighter>{\" \"}\n\t\t\t\t\t\t\tas an element of design which is on a par with the other\n\t\t\t\t\t\t\telements.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tEarlier typography (midline typography){\" \"}\n\t\t\t\t\t\t\t<TextHighlighter\n\t\t\t\t\t\t\t\tclassName={highlightClass}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\thighlightColor={highlightColor}\n\t\t\t\t\t\t\t\tuseInViewOptions={inViewOptions}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tplayed an active role against a dead, passive\n\t\t\t\t\t\t\t\tbackground.\n\t\t\t\t\t\t\t</TextHighlighter>\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/text-highlighter.tsx",
      "content": "\"use client\";\n\nimport {\n\tElementType,\n\tforwardRef,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport { motion, Transition, useInView, UseInViewOptions } from \"motion/react\";\n\n// Credit:\n// https://www.fancycomponents.dev/docs/components/text/text-highlighter\n\ntype HighlightDirection = \"ltr\" | \"rtl\" | \"ttb\" | \"btt\";\n\ntype TextHighlighterProps = {\n\t/**\n\t * The text content to be highlighted\n\t */\n\tchildren: React.ReactNode;\n\n\t/**\n\t * HTML element to render as\n\t * @default \"p\"\n\t */\n\tas?: ElementType;\n\n\t/**\n\t * How to trigger the animation\n\t * @default \"inView\"\n\t */\n\ttriggerType?: \"hover\" | \"ref\" | \"inView\" | \"auto\";\n\n\t/**\n\t * Animation transition configuration\n\t * @default { duration: 0.4, type: \"spring\", bounce: 0 }\n\t */\n\ttransition?: Transition;\n\n\t/**\n\t * Options for useInView hook when triggerType is \"inView\"\n\t */\n\tuseInViewOptions?: UseInViewOptions;\n\n\t/**\n\t * Class name for the container element\n\t */\n\tclassName?: string;\n\n\t/**\n\t * Highlight color (CSS color string). Also can be a function that returns a color string, eg:\n\t * @default 'hsl(60, 90%, 68%)' (yellow)\n\t */\n\thighlightColor?: string;\n\n\t/**\n\t * Direction of the highlight animation\n\t * @default \"ltr\" (left to right)\n\t */\n\tdirection?: HighlightDirection;\n} & React.HTMLAttributes<HTMLElement>;\n\nexport type TextHighlighterRef = {\n\t/**\n\t * Trigger the highlight animation\n\t * @param direction - Optional direction override for this animation\n\t */\n\tanimate: (direction?: HighlightDirection) => void;\n\n\t/**\n\t * Reset the highlight animation\n\t */\n\treset: () => void;\n};\n\nexport const TextHighlighter = forwardRef<\n\tTextHighlighterRef,\n\tTextHighlighterProps\n>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tas = \"span\",\n\t\t\ttriggerType = \"inView\",\n\t\t\ttransition = { type: \"spring\", duration: 1, delay: 0, bounce: 0 },\n\t\t\tuseInViewOptions = {\n\t\t\t\tonce: true,\n\t\t\t\tinitial: false,\n\t\t\t\tamount: 0.1,\n\t\t\t},\n\t\t\tclassName,\n\t\t\thighlightColor = \"hsl(25, 90%, 80%)\",\n\t\t\tdirection = \"ltr\",\n\t\t\t...props\n\t\t},\n\t\tref\n\t) => {\n\t\tconst componentRef = useRef<HTMLDivElement>(null);\n\t\tconst [isAnimating, setIsAnimating] = useState(false);\n\t\tconst [isHovered, setIsHovered] = useState(false);\n\t\tconst [currentDirection, setCurrentDirection] =\n\t\t\tuseState<HighlightDirection>(direction);\n\n\t\t// this allows us to change the direction whenever the direction prop changes\n\t\tuseEffect(() => {\n\t\t\tsetCurrentDirection(direction);\n\t\t}, [direction]);\n\n\t\tconst isInView =\n\t\t\ttriggerType === \"inView\"\n\t\t\t\t? useInView(componentRef, useInViewOptions)\n\t\t\t\t: false;\n\n\t\tuseImperativeHandle(ref, () => ({\n\t\t\tanimate: (animationDirection?: HighlightDirection) => {\n\t\t\t\tif (animationDirection) {\n\t\t\t\t\tsetCurrentDirection(animationDirection);\n\t\t\t\t}\n\t\t\t\tsetIsAnimating(true);\n\t\t\t},\n\t\t\treset: () => setIsAnimating(false),\n\t\t}));\n\n\t\tconst shouldAnimate =\n\t\t\ttriggerType === \"hover\"\n\t\t\t\t? isHovered\n\t\t\t\t: triggerType === \"inView\"\n\t\t\t\t\t? isInView\n\t\t\t\t\t: triggerType === \"ref\"\n\t\t\t\t\t\t? isAnimating\n\t\t\t\t\t\t: triggerType === \"auto\"\n\t\t\t\t\t\t\t? true\n\t\t\t\t\t\t\t: false;\n\n\t\tconst ElementTag = as || \"span\";\n\n\t\t// Get background size based on direction\n\t\tconst getBackgroundSize = (animated: boolean) => {\n\t\t\tswitch (currentDirection) {\n\t\t\t\tcase \"ltr\":\n\t\t\t\t\treturn animated ? \"100% 100%\" : \"0% 100%\";\n\t\t\t\tcase \"rtl\":\n\t\t\t\t\treturn animated ? \"100% 100%\" : \"0% 100%\";\n\t\t\t\tcase \"ttb\":\n\t\t\t\t\treturn animated ? \"100% 100%\" : \"100% 0%\";\n\t\t\t\tcase \"btt\":\n\t\t\t\t\treturn animated ? \"100% 100%\" : \"100% 0%\";\n\t\t\t\tdefault:\n\t\t\t\t\treturn animated ? \"100% 100%\" : \"0% 100%\";\n\t\t\t}\n\t\t};\n\n\t\t// Get background position based on direction\n\t\tconst getBackgroundPosition = () => {\n\t\t\tswitch (currentDirection) {\n\t\t\t\tcase \"ltr\":\n\t\t\t\t\treturn \"0% 0%\";\n\t\t\t\tcase \"rtl\":\n\t\t\t\t\treturn \"100% 0%\";\n\t\t\t\tcase \"ttb\":\n\t\t\t\t\treturn \"0% 0%\";\n\t\t\t\tcase \"btt\":\n\t\t\t\t\treturn \"0% 100%\";\n\t\t\t\tdefault:\n\t\t\t\t\treturn \"0% 0%\";\n\t\t\t}\n\t\t};\n\n\t\tconst animatedSize = useMemo(\n\t\t\t() => getBackgroundSize(shouldAnimate),\n\t\t\t[shouldAnimate, currentDirection]\n\t\t);\n\t\tconst initialSize = useMemo(\n\t\t\t() => getBackgroundSize(false),\n\t\t\t[currentDirection]\n\t\t);\n\t\tconst backgroundPosition = useMemo(\n\t\t\t() => getBackgroundPosition(),\n\t\t\t[currentDirection]\n\t\t);\n\n\t\tconst highlightStyle = {\n\t\t\tbackgroundImage: `linear-gradient(${highlightColor}, ${highlightColor})`,\n\t\t\tbackgroundRepeat: \"no-repeat\",\n\t\t\tbackgroundPosition: backgroundPosition,\n\t\t\tbackgroundSize: animatedSize,\n\t\t\tboxDecorationBreak: \"clone\",\n\t\t\tWebkitBoxDecorationBreak: \"clone\",\n\t\t} as React.CSSProperties;\n\n\t\treturn (\n\t\t\t<ElementTag\n\t\t\t\tref={componentRef}\n\t\t\t\tonMouseEnter={() => triggerType === \"hover\" && setIsHovered(true)}\n\t\t\t\tonMouseLeave={() => triggerType === \"hover\" && setIsHovered(false)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<motion.span\n\t\t\t\t\tclassName={cn(\"inline\", className)}\n\t\t\t\t\tstyle={highlightStyle}\n\t\t\t\t\tanimate={{\n\t\t\t\t\t\tbackgroundSize: animatedSize,\n\t\t\t\t\t}}\n\t\t\t\t\tinitial={{\n\t\t\t\t\t\tbackgroundSize: initialSize,\n\t\t\t\t\t}}\n\t\t\t\t\ttransition={transition}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</motion.span>\n\t\t\t</ElementTag>\n\t\t);\n\t}\n);\n\nTextHighlighter.displayName = \"TextHighlighter\";\n\nexport default TextHighlighter;\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}