@catalystsoftware/ui 1.0.0

package/data/typography-data.tsx

@@ -0,0 +1,2050 @@
+// bring hypertext from background
+export const componentsTypography = [
+    {
+        name: "Encrypted Text",
+        value: "encrypted-text",
+        path: "/components/catalyst-ui/typography/encrypted-text.tsx",
+        files: {
+            "encrypted-text": "/components/catalyst-ui/blocks/encrypted-text.tsx",
+        },
+        premium: true,
+        category: "Typography",
+        tags: ["text", "animation", "encrypted", "effect"],
+        features: ["Responsive", "TypeScript", "Accessible", "Animated"],
+        dependencies: ["react"],
+        desc: "A text component with encrypted animation effect",
+        status: "Listed",
+        lastUpdated: "2025-12-01"
+    },
+    {
+        name: "Text Rewind",
+        value: "text-rewind",
+        importPath: "~/components/catalyst-ui/typography/text-rewind",
+        multiImport: null,
+        basicusage: `
+<TextRewind />
+
+<TextRewind 
+  text="Custom Text"
+  className="text-6xl"
+  shadowColors={{
+    first: "#3b82f6",
+    second: "#8b5cf6",
+    third: "#ec4899", 
+    fourth: "#f59e0b",
+    glow: "#10b981"
+  }}
+/>`,
+        path: "/components/catalyst-ui/typography/text-rewind.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/typography/text-rewind.tsx",
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["text", "animation", "hover", "effects"],
+        features: ["Interactive", "Hover Effects", "Customizable", "TypeScript"],
+        dependencies: ["framer-motion", "react"],
+        props: {
+            "TextRewind": [
+                { name: "text", type: "string", default: "LINE" },
+                { name: "className", type: "string", default: "null" },
+                { name: "shadowColors", type: "{ first?: string; second?: string; third?: string; fourth?: string; glow?: string }", default: "{ first: '#07bccc', second: '#e601c0', third: '#e9019a', fourth: '#f40468', glow: '#f40468' }" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Animated Glitch Text",
+        value: "animated-glitch-text",
+        importPath: "~/components/catalyst-ui/typography/animated-glitch-text",
+        multiImport: null,
+        basicusage: `
+<AnimatedGlitchText text="Hello World" />
+
+<AnimatedGlitchText 
+  text="Custom Glitch"
+  as="h2"
+  colors={{
+    red: "#ff00ff",
+    green: "#00ffff", 
+    blue: "#ffff00"
+  }}
+  size="lg"
+  textClassName="text-8xl font-black"
+  containerClassName=""
+  className="bg-gradient-to-r from-purple-500/20 to-pink-500/20"
+/>`,
+        path: "/components/catalyst-ui/typography/glitch-text.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/typography/glitch-text.tsx",
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["animation", "text", "effects"],
+        features: ["Animated", "TypeScript", "Accessible", "Customizable"],
+        dependencies: ["framer-motion", "react"],
+        props: {
+            "AnimatedGlitchText": [
+                { name: "text", type: "string", default: "required" },
+                { name: "as", type: "h1 | h2 | h3 | h4 | h5 | h6 | p | span", default: "h1" },
+                { name: "colors", type: "{ red: string; green: string; blue: string }", default: "{ red: '#ff0000', green: '#00ff00', blue: '#0000ff' }" },
+                { name: "size", type: "sm | md | lg", default: "md" },
+                { name: "textClassName", type: "string", default: "null" },
+                { name: "containerClassName", type: "string", default: "null" },
+                { name: "className", type: "string", default: "null" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: 'Line Shadow Text',
+        value: 'line-shadow-text',
+        importPath: '~/components/catalyst-ui/typography/line-shadow-text',
+        multiImport: null,
+        basicusage: `
+<LineShadowText>
+  Fast
+</LineShadowText>
+
+<LineShadowText 
+  shadowColor="black"
+  as="span"
+  className="italic"
+>
+  Fast
+</LineShadowText>`,
+        path: '/components/catalyst-ui/typography/line-shadow-text.tsx',
+        source: null,
+        usagePath: '/components/catalyst-ui/typography/line-shadow-text.tsx',
+        usage: null,
+        premium: true,
+        category: 'Typography',
+        tags: ['typography', 'text', 'animation', 'shadow', 'motion'],
+        features: ['Responsive', 'TypeScript', 'Accessible', 'Animated'],
+        dependencies: ['motion/react', 'react'],
+        props: {
+            LineShadowText: [
+                { name: 'children', type: 'string', default: 'null' },
+                { name: 'shadowColor', type: 'string', default: 'black' },
+                { name: 'as', type: 'React.ElementType', default: 'span' },
+                { name: 'className', type: 'string', default: 'null' },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Text Animate",
+        value: "text-animate",
+        importPath: "~/components/catalyst-ui/typography/text-animate",
+        multiImport: null,
+        basicusage: `
+<TextAnimate>
+  Animated text content
+</TextAnimate>
+
+<TextAnimate 
+  children="Custom animated text"
+  delay={0}
+  duration={0.3}
+  variants={null}
+  as="p"
+  by="word"
+  startOnView={true}
+  once={false}
+  animation="fadeIn"
+  accessible={true}
+  className=""
+  segmentClassName=""
+>
+  Animated text content
+</TextAnimate>`,
+        path: "/components/catalyst-ui/typography/text-animate.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/typography/text-animate.tsx",
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["animation", "text", "motion", "effects"],
+        features: ["TypeScript", "Accessible", "Multiple Animations"],
+        dependencies: ["motion/react", "react"],
+        props: {
+            "TextAnimate": [
+                { name: "children", type: "string", default: "null" },
+                { name: "className", type: "string", default: "null" },
+                { name: "segmentClassName", type: "string", default: "null" },
+                { name: "delay", type: "number", default: "0" },
+                { name: "duration", type: "number", default: "0.3" },
+                { name: "variants", type: "Variants", default: "null" },
+                { name: "as", type: "ElementType", default: "p" },
+                { name: "by", type: "AnimationType", default: "word" },
+                { name: "startOnView", type: "boolean", default: "true" },
+                { name: "once", type: "boolean", default: "false" },
+                { name: "animation", type: "AnimationVariant", default: "fadeIn" },
+                { name: "accessible", type: "boolean", default: "true" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Text Highlighter",
+        value: "text-highlighter",
+        importPath: "~/components/catalyst-ui/typography/text-highlighter",
+        multiImport: null,
+        basicusage: `
+<TextHighlighter>
+  Highlighted text
+</TextHighlighter>
+
+<TextHighlighter 
+  action="highlight"
+  color="#ffd1dc"
+  strokeWidth={1.5}
+  animationDuration={600}
+  iterations={2}
+  padding={2}
+  multiline={true}
+  isView={false}
+>
+  Custom highlighted text
+</TextHighlighter>`,
+        path: "/components/catalyst-ui/typography/text-highlighter.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/typography/text-highlighter.tsx",
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["highlight", "annotation", "text", "effects"],
+        features: ["TypeScript", "Interactive", "Customizable"],
+        dependencies: ["rough-notation", "motion/react", "react"],
+        props: {
+            "TextHighlighter": [
+                { name: "children", type: "React.ReactNode", default: "null" },
+                { name: "action", type: "AnnotationAction", default: "highlight" },
+                { name: "color", type: "string", default: "#ffd1dc" },
+                { name: "strokeWidth", type: "number", default: "1.5" },
+                { name: "animationDuration", type: "number", default: "600" },
+                { name: "iterations", type: "number", default: "2" },
+                { name: "padding", type: "number", default: "2" },
+                { name: "multiline", type: "boolean", default: "true" },
+                { name: "isView", type: "boolean", default: "false" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Text Reveal",
+        value: "text-reveal",
+        importPath: "~/components/catalyst-ui/typography/text-reveal",
+        multiImport: null,
+        basicusage: `
+<TextReveal>
+  Your text content here
+</TextReveal>
+
+<TextReveal className="">
+  Your custom styled text content
+</TextReveal>`,
+        path: "/components/catalyst-ui/typography/text-reveal.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/typography/text-reveal.tsx",
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["scroll", "reveal", "animation", "text", "effects"],
+        features: ["TypeScript", "Scroll Triggered", "Smooth Animations"],
+        dependencies: ["motion/react", "react"],
+        props: {
+            "TextReveal": [
+                { name: "children", type: "string", default: "null" },
+                { name: "className", type: "string", default: "null" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Word Rotate",
+        value: "word-rotate",
+        importPath: "~/components/catalyst-ui/typography/word-rotate",
+        multiImport: null,
+        basicusage: `
+<WordRotate words={["Word1", "Word2"]} />
+
+<WordRotate 
+  words={["Word1", "Word2", "Word3"]}
+  duration={2500}
+  motionProps={{
+    initial: { opacity: 0, y: -50 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: 50 },
+    transition: { duration: 0.25, ease: "easeOut" }
+  }}
+  className=""
+/>`,
+        path: "/components/catalyst-ui/typography/word-rotate.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/typography/word-rotate.tsx",
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["animation", "text", "rotate", "effects"],
+        features: ["TypeScript", "Accessible", "Smooth Animations"],
+        dependencies: ["motion/react", "react"],
+        props: {
+            "WordRotate": [
+                { name: "words", type: "string[]", default: "null" },
+                { name: "duration", type: "number", default: "2500" },
+                {
+                    name: "motionProps", type: "MotionProps", default: `{
+  initial: { opacity: 0, y: -50 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: 50 },
+  transition: { duration: 0.25, ease: "easeOut" }
+}`
+                },
+                { name: "className", type: "string", default: "null" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Typing Animation",
+        value: "typing-animation",
+        importPath: "~/components/catalyst-ui/typography/typing-animation",
+        multiImport: null,
+        basicusage: `
+<TypingAnimation>
+  Hello World
+</TypingAnimation>
+
+<TypingAnimation 
+  words={["Word 1", "Word 2"]}
+  duration={100}
+  typeSpeed={100}
+  deleteSpeed={50}
+  delay={0}
+  pauseDelay={1000}
+  loop={false}
+  as="span"
+  startOnView={true}
+  showCursor={true}
+  blinkCursor={true}
+  cursorStyle="line"
+  className=""
+>
+  Hello World
+</TypingAnimation>`,
+        path: "/components/catalyst-ui/typography/typing-animation.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/typography/typing-animation.tsx",
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["typing", "animation", "text", "effects"],
+        features: ["TypeScript", "Accessible", "Customizable"],
+        dependencies: ["motion/react", "react"],
+        props: {
+            "TypingAnimation": [
+                { name: "children", type: "string", default: "null" },
+                { name: "words", type: "string[]", default: "null" },
+                { name: "className", type: "string", default: "null" },
+                { name: "duration", type: "number", default: "100" },
+                { name: "typeSpeed", type: "number", default: "null" },
+                { name: "deleteSpeed", type: "number", default: "null" },
+                { name: "delay", type: "number", default: "0" },
+                { name: "pauseDelay", type: "number", default: "1000" },
+                { name: "loop", type: "boolean", default: "false" },
+                { name: "as", type: "React.ElementType", default: "span" },
+                { name: "startOnView", type: "boolean", default: "true" },
+                { name: "showCursor", type: "boolean", default: "true" },
+                { name: "blinkCursor", type: "boolean", default: "true" },
+                { name: "cursorStyle", type: "line | block | underscore", default: "line" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Video Text",
+        value: "video-text",
+        importPath: "~/components/catalyst-ui/typography/video-text",
+        multiImport: null,
+        basicusage: `
+<VideoText src="video.webm">
+  Text Content
+</VideoText>
+
+<VideoText 
+  src="video.webm"
+  autoPlay={true}
+  muted={true}
+  loop={true}
+  preload="auto"
+  fontSize={20}
+  fontWeight="bold"
+  textAnchor="middle"
+  dominantBaseline="middle"
+  fontFamily="sans-serif"
+  as="div"
+  className=""
+>
+  Text Content
+</VideoText>`,
+        path: "/components/catalyst-ui/typography/video-text.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/typography/video-text.tsx",
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["video", "text", "mask", "effects"],
+        features: ["TypeScript", "Accessible", "Responsive"],
+        dependencies: ["react"],
+        props: {
+            "VideoText": [
+                { name: "src", type: "string", default: "null" },
+                { name: "children", type: "ReactNode", default: "null" },
+                { name: "className", type: "string", default: "null" },
+                { name: "autoPlay", type: "boolean", default: "true" },
+                { name: "muted", type: "boolean", default: "true" },
+                { name: "loop", type: "boolean", default: "true" },
+                { name: "preload", type: "auto | metadata | none", default: "auto" },
+                { name: "fontSize", type: "string | number", default: "20" },
+                { name: "fontWeight", type: "string | number", default: "bold" },
+                { name: "textAnchor", type: "string", default: "middle" },
+                { name: "dominantBaseline", type: "string", default: "middle" },
+                { name: "fontFamily", type: "string", default: "sans-serif" },
+                { name: "as", type: "ElementType", default: "div" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Hyper Text",
+        value: "hyper-text",
+        importPath: "~/components/catalyst-ui/typography/hyper-text",
+        multiImport: null,
+        basicusage: `
+<HyperText>
+  Hello World
+</HyperText>
+
+<HyperText 
+  duration={800}
+  delay={0}
+  startOnView={false}
+  animateOnHover={true}
+  characterSet={["A","B","C"]}
+  className=""
+>
+  Animated Text
+</HyperText>`,
+        path: "/components/catalyst-ui/typography/hyper-text.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/typography/hyper-text.tsx",
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["animation", "text", "effects"],
+        features: ["TypeScript", "Accessible", "Customizable"],
+        dependencies: ["motion/react", "react"],
+        props: {
+            "HyperText": [
+                { name: "children", type: "string", default: "null" },
+                { name: "className", type: "string", default: "null" },
+                { name: "duration", type: "number", default: "800" },
+                { name: "delay", type: "number", default: "0" },
+                { name: "as", type: "React.ElementType", default: "div" },
+                { name: "startOnView", type: "boolean", default: "false" },
+                { name: "animateOnHover", type: "boolean", default: "true" },
+                { name: "characterSet", type: "CharacterSet", default: "DEFAULT_CHARACTER_SET" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Hyper Text",
+        value: "hyper-text",
+        importPath: "~/components/catalyst-ui/typography/hyper-text",
+        multiImport: null,
+        basicusage: `
+<HyperText>
+  Interactive Text
+</HyperText>
+
+<HyperText 
+  duration={1000}
+  className="text-4xl font-bold"
+  animateOnView={true}
+>
+  Animated Text
+</HyperText>`,
+        path: "/components/catalyst-ui/typography/hyper-text.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/typography/hyper-text.tsx",
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["typography", "animation", "interactive", "text"],
+        features: ["Character Animation", "Interactive", "Smooth Effects", "TypeScript"],
+        dependencies: ["motion", "react"],
+        props: {
+            "HyperText": [
+                { name: "className", type: "string", default: "null" },
+                { name: "duration", type: "number", default: "500" },
+                { name: "animateOnView", type: "boolean", default: "false" }
+            ]
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Comic Text",
+        value: "comic-text",
+        importPath: "~/components/catalyst-ui/typography/comic-text",
+        multiImport: null,
+        basicusage: `
+<ComicText>BAM!</ComicText>
+
+<ComicText 
+  fontSize={3}
+  className="mx-auto"
+  style={{ color: '#FF0000' }}
+>
+  POW!
+</ComicText>`,
+        path: "/components/catalyst-ui/typography/comic-text.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/typography/comic-text.tsx",
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["typography", "comic", "animation", "text"],
+        features: ["Animated Entrance", "Comic Style", "Customizable", "TypeScript"],
+        dependencies: ["motion", "react"],
+        props: {
+            "ComicText": [
+                { name: "className", type: "string", default: "null" },
+                { name: "fontSize", type: "number", default: "5" },
+                { name: "style", type: "CSSProperties", default: "null" }
+            ]
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "TextMorph",
+        value: "text-morph",
+        importPath: "~/components/catalyst-ui/typography/text-morph",
+        multiImport: null,
+        basicusage: null,
+        path: "/components/catalyst-ui/typography/text-morph.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/typography/text-morph.tsx",
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["components", "animation", "text", "morphing", "motion"],
+        features: ["Responsive", "TypeScript", "Accessible", "Smooth Animations", "Layout Transitions", "Spring Physics"],
+        dependencies: ["react", "motion/react", "~/components/catalyst-ui/utils"],
+        props: {
+            "TextMorph": [
+                { name: "children", type: "string", default: "null" },
+                { name: "as", type: "React.ElementType", default: "\"p\"" },
+                { name: "className", type: "string", default: "null" },
+                { name: "style", type: "React.CSSProperties", default: "null" },
+                { name: "variants", type: "Variants", default: "null" },
+                { name: "transition", type: "Transition", default: "null" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Scroll Text",
+        value: "scroll-text",
+        importPath: "~/components/catalyst-ui/typography/scroll-text",
+        multiImport: "ScrollText, ScrollTextWord, ScrollTextLetter",
+        basicusage: `
+<ScrollText>
+  Content here
+</ScrollText>
+
+<ScrollText
+  animation="fadeUp"
+  delay="none"
+  threshold={0.1}
+  triggerOnce={true}
+  as="div"
+  className=""
+>
+  Content here
+</ScrollText>
+
+<ScrollTextWord
+  text="Your text here"
+  animation="fadeUp"
+  wordDelay={50}
+  threshold={0.1}
+  triggerOnce={true}
+  as="div"
+  className=""
+/>
+
+<ScrollTextLetter
+  text="Your text here"
+  animation="fadeUp"
+  letterDelay={30}
+  threshold={0.1}
+  triggerOnce={true}
+  as="div"
+  className=""
+/>`,
+        path: "/components/catalyst-ui/typography/typography/scroll-text.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/typography/typography/scroll-text.tsx",
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["ui", "components", "animation", "scroll", "text", "reveal"],
+        features: ["Responsive", "TypeScript", "Accessible", "Animated", "Intersection Observer"],
+        dependencies: ["react", "class-variance-authority"],
+        props: {
+            ScrollText: [
+                { name: "className", type: "string", default: "null" },
+                { name: "animation", type: "fadeUp | fadeDown | fadeLeft | fadeRight | scale | blur", default: "fadeUp" },
+                { name: "delay", type: "none | sm | md | lg | xl", default: "none" },
+                { name: "threshold", type: "number", default: "0.1" },
+                { name: "triggerOnce", type: "boolean", default: "true" },
+                { name: "as", type: "React.ElementType", default: "div" },
+            ],
+            ScrollTextWord: [
+                { name: "className", type: "string", default: "null" },
+                { name: "animation", type: "fadeUp | fadeDown | fadeLeft | fadeRight | scale | blur", default: "fadeUp" },
+                { name: "text", type: "string", default: "required" },
+                { name: "wordDelay", type: "number", default: "50" },
+                { name: "threshold", type: "number", default: "0.1" },
+                { name: "triggerOnce", type: "boolean", default: "true" },
+                { name: "as", type: "React.ElementType", default: "div" },
+            ],
+            ScrollTextLetter: [
+                { name: "className", type: "string", default: "null" },
+                { name: "animation", type: "fadeUp | fadeDown | fadeLeft | fadeRight | scale | blur", default: "fadeUp" },
+                { name: "text", type: "string", default: "required" },
+                { name: "letterDelay", type: "number", default: "30" },
+                { name: "threshold", type: "number", default: "0.1" },
+                { name: "triggerOnce", type: "boolean", default: "true" },
+                { name: "as", type: "React.ElementType", default: "div" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Typewriter",
+        value: "typewriter",
+        importPath: "~/components/catalyst-ui/typography/typewriter",
+        multiImport: "Typewriter, TypewriterOnce, TypewriterWord",
+        basicusage: `
+<Typewriter text="Hello World" />
+
+<Typewriter
+  cursor="default"
+  className=""
+  text="Single text"
+  texts={["Text 1", "Text 2"]}
+  speed={50}
+  deleteSpeed={30}
+  delayBetween={2000}
+  loop={false}
+  onComplete={() => {}}
+  showCursor={true}
+  as="span"
+/>
+
+<TypewriterOnce
+  text="Hello World"
+  cursor="default"
+  className=""
+  speed={50}
+  delay={0}
+  onComplete={() => {}}
+  showCursor={true}
+  as="span"
+/>
+
+<TypewriterWord
+  text="Hello World"
+  cursor="default"
+  className=""
+  speed={100}
+  delay={0}
+  onComplete={() => {}}
+  showCursor={true}
+  as="span"
+/>`,
+        path: "/components/catalyst-ui/typography/typography/typewriter.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/typography/typography/typewriter.tsx",
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["ui", "components", "animation", "typewriter", "text", "typing"],
+        features: ["Responsive", "TypeScript", "Accessible", "Animated", "Multiple Modes"],
+        dependencies: ["react", "class-variance-authority"],
+        props: {
+            Typewriter: [
+                { name: "className", type: "string", default: "null" },
+                { name: "cursor", type: "default | block | underline | none", default: "default" },
+                { name: "text", type: "string", default: "null" },
+                { name: "texts", type: "string[]", default: "null" },
+                { name: "speed", type: "number", default: "50" },
+                { name: "deleteSpeed", type: "number", default: "30" },
+                { name: "delayBetween", type: "number", default: "2000" },
+                { name: "loop", type: "boolean", default: "false" },
+                { name: "onComplete", type: "() => void", default: "null" },
+                { name: "showCursor", type: "boolean", default: "true" },
+                { name: "as", type: "React.ElementType", default: "span" },
+            ],
+            TypewriterOnce: [
+                { name: "className", type: "string", default: "null" },
+                { name: "cursor", type: "default | block | underline | none", default: "default" },
+                { name: "text", type: "string", default: "required" },
+                { name: "speed", type: "number", default: "50" },
+                { name: "delay", type: "number", default: "0" },
+                { name: "onComplete", type: "() => void", default: "null" },
+                { name: "showCursor", type: "boolean", default: "true" },
+                { name: "as", type: "React.ElementType", default: "span" },
+            ],
+            TypewriterWord: [
+                { name: "className", type: "string", default: "null" },
+                { name: "cursor", type: "default | block | underline | none", default: "default" },
+                { name: "text", type: "string", default: "required" },
+                { name: "speed", type: "number", default: "100" },
+                { name: "delay", type: "number", default: "0" },
+                { name: "onComplete", type: "() => void", default: "null" },
+                { name: "showCursor", type: "boolean", default: "true" },
+                { name: "as", type: "React.ElementType", default: "span" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Swoosh Text",
+        value: "swoosh-text",
+        importPath: "~/components/catalyst-ui/typography/swoosh-text",
+        multiImport: null,
+        basicusage: `
+<SwooshText text="Swoosh Effect" />
+
+<SwooshText 
+  text="Custom Swoosh"
+  direction="left"
+  speed="medium"
+  trigger="auto"
+  fontSize="lg"
+  fontWeight="bold"
+  className=""
+/>`,
+        path: "/components/catalyst-ui/typography/typography/swoosh-text.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/typography/typography/swoosh-text.tsx",
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["ui", "components", "effects", "animation", "text", "entrance", "motion"],
+        features: ["Responsive", "TypeScript", "Customizable", "Animated", "Interactive", "Multiple Triggers"],
+        dependencies: ["react"],
+        props: {
+            "SwooshText": [
+                { name: "text", type: "string", default: "''" },
+                { name: "className", type: "string", default: "null" },
+                { name: "direction", type: "'left' | 'right' | 'up' | 'down'", default: "'left'" },
+                { name: "speed", type: "'slow' | 'medium' | 'fast'", default: "'medium'" },
+                { name: "trigger", type: "'auto' | 'hover' | 'click'", default: "'auto'" },
+                { name: "fontSize", type: "'sm' | 'md' | 'lg' | 'xl' | '2xl'", default: "'md'" },
+                { name: "fontWeight", type: "'normal' | 'medium' | 'semibold' | 'bold'", default: "'normal'" }
+            ]
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Sliced Text",
+        value: "sliced-text",
+        importPath: "~/components/catalyst-ui/typography/sliced-text",
+        multiImport: null,
+        basicusage: `
+<SlicedText text="Sliced Effect" />
+
+<SlicedText 
+  text="Custom Sliced"
+  variant="primary"
+  align="center"
+  fontSize="lg"
+  fontWeight="bold"
+  className=""
+/>`,
+        path: "/components/catalyst-ui/typography/typography/sliced-text.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/typography/typography/sliced-text.tsx",
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["ui", "components", "effects", "text", "sliced", "3d", "layered"],
+        features: ["Responsive", "TypeScript", "Customizable", "Multi-layered", "Color Variants"],
+        dependencies: ["react"],
+        props: {
+            "SlicedText": [
+                { name: "text", type: "string", default: "''" },
+                { name: "className", type: "string", default: "null" },
+                { name: "variant", type: "'default' | 'primary' | 'secondary' | 'accent'", default: "'default'" },
+                { name: "align", type: "'left' | 'center' | 'right'", default: "'center'" },
+                { name: "fontSize", type: "'sm' | 'md' | 'lg' | 'xl' | '2xl'", default: "'md'" },
+                { name: "fontWeight", type: "'normal' | 'medium' | 'semibold' | 'bold'", default: "'bold'" }
+            ]
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Shimmer Text",
+        value: "shimmer-text",
+        importPath: "~/components/catalyst-ui/typography/shimmer-text",
+        multiImport: null,
+        basicusage: `
+<ShimmerText text="Shimmer Effect" />
+
+<ShimmerText 
+  text="Custom Shimmer"
+  shimmerColor="primary"
+  speed="medium"
+  fontSize="lg"
+  fontWeight="bold"
+  className=""
+/>`,
+        path: "/components/catalyst-ui/typography/typography/shimmer-text.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/typography/typography/shimmer-text.tsx",
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["ui", "components", "effects", "animation", "text", "gradient", "shimmer"],
+        features: ["Responsive", "TypeScript", "Customizable", "Animated", "Color Variants"],
+        dependencies: ["react"],
+        props: {
+            "ShimmerText": [
+                { name: "text", type: "string", default: "''" },
+                { name: "className", type: "string", default: "null" },
+                { name: "shimmerColor", type: "'default' | 'primary' | 'secondary' | 'accent'", default: "'default'" },
+                { name: "speed", type: "'slow' | 'medium' | 'fast'", default: "'medium'" },
+                { name: "fontSize", type: "'sm' | 'md' | 'lg' | 'xl' | '2xl'", default: "'md'" },
+                { name: "fontWeight", type: "'normal' | 'medium' | 'semibold' | 'bold'", default: "'normal'" }
+            ]
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Matrix Text",
+        value: "matrix-text",
+        importPath: "~/components/catalyst-ui/typography/matrix-text",
+        multiImport: null,
+        basicusage: `
+<MatrixText text="Hello World" />
+
+<MatrixText 
+  text="Custom Text"
+  speed={50}
+  characters="ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+  loop={true}
+  fontSize="lg"
+  className="text-primary"
+/>`,
+        path: "/components/catalyst-ui/typography/typography/matrix-text.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/typography/typography/matrix-text.tsx",
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["ui", "components", "effects", "animation", "text"],
+        features: ["Responsive", "TypeScript", "Customizable", "Animated"],
+        dependencies: ["react"],
+        props: {
+            "MatrixText": [
+                { name: "text", type: "string", default: "''" },
+                { name: "className", type: "string", default: "null" },
+                { name: "speed", type: "number", default: "50" },
+                { name: "characters", type: "string", default: "'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789$#@%&'" },
+                { name: "loop", type: "boolean", default: "true" },
+                { name: "fontSize", type: "'sm' | 'md' | 'lg' | 'xl' | '2xl'", default: "'md'" }
+            ]
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Glitch Text",
+        value: "glitch-text",
+        importPath: "~/components/catalyst-ui/typography/glitch-text",
+        multiImport: null,
+        basicusage: `
+<GlitchText text="Glitch Effect" />
+
+<GlitchText 
+  text="Custom Glitch"
+  intensity="high"
+  duration={2000}
+  enabled={true}
+  fontSize="lg"
+  className="font-bold"
+/>`,
+        path: "/components/catalyst-ui/typography/typography/glitch-text.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/typography/typography/glitch-text.tsx",
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["ui", "components", "effects", "animation", "text", "glitch", "cyberpunk"],
+        features: ["Responsive", "TypeScript", "Customizable", "Animated", "Intensity Control"],
+        dependencies: ["react"],
+        props: {
+            "GlitchText": [
+                { name: "text", type: "string", default: "''" },
+                { name: "className", type: "string", default: "null" },
+                { name: "intensity", type: "'low' | 'medium' | 'high'", default: "'medium'" },
+                { name: "duration", type: "number", default: "2000" },
+                { name: "enabled", type: "boolean", default: "true" },
+                { name: "fontSize", type: "'sm' | 'md' | 'lg' | 'xl' | '2xl'", default: "'md'" }
+            ]
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Dynamic Text",
+        value: "dynamic-text",
+        importPath: "~/components/catalyst-ui/typography/dynamic-text",
+        multiImport: null,
+        basicusage: `
+<DynamicText texts={["First", "Second", "Third"]} />
+
+<DynamicText 
+  texts={["Option A", "Option B"]}
+  speed={100}
+  pauseBetween={2000}
+  loop={true}
+  fontSize="lg"
+  fontWeight="semibold"
+  className="text-primary"
+/>`,
+        path: "/components/catalyst-ui/typography/typography/dynamic-text.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/typography/typography/dynamic-text.tsx",
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["ui", "components", "effects", "animation", "text", "typing"],
+        features: ["Responsive", "TypeScript", "Customizable", "Animated", "Looping"],
+        dependencies: ["react"],
+        props: {
+            "DynamicText": [
+                { name: "texts", type: "string[]", default: "[]" },
+                { name: "className", type: "string", default: "null" },
+                { name: "speed", type: "number", default: "100" },
+                { name: "pauseBetween", type: "number", default: "2000" },
+                { name: "loop", type: "boolean", default: "true" },
+                { name: "fontSize", type: "'sm' | 'md' | 'lg' | 'xl' | '2xl'", default: "'md'" },
+                { name: "fontWeight", type: "'normal' | 'medium' | 'semibold' | 'bold'", default: "'normal'" }
+            ]
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "HighlightV1",
+        value: "highlight-1",
+        importPath: "~/components/catalyst-ui/typography/highlight-1",
+        multiImport: "Highlight, HighlightDemo, HighlightUsage",
+        path: "/components/catalyst-ui/typography/typography/highlight-1.tsx",
+        premium: true,
+        source: null,
+        category: "Typography",
+        tags: ["ui", "components", "interactive"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: [],
+        basicusage: `
+<Highlight>
+    Content
+</Highlight>
+
+<Highlight children="" query="" highlightStyles="bg-yellow-200 dark:bg-yellow-600" caseSensitive=false className="" props="">
+    Content
+</Highlight>`,
+        usage: null,
+        usagePath: "/components/catalyst-ui/typography/typography/highlight-1.tsx",
+        props: {
+            "Highlight": [
+                { name: "children", type: "string", default: null },
+                { name: "query", type: "string", default: null },
+                { name: "highlightStyles", type: "string", default: "bg-yellow-200 dark:bg-yellow-600" },
+                { name: "caseSensitive", type: "boolean", default: false },
+                { name: "className", type: "string", default: null },
+                { name: "props", type: "any", default: null }
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Prose",
+        value: "prose",
+        importPath: "~/components/catalyst-ui/typography/prose",
+        multiImport: null,
+        path: "/components/catalyst-ui/typography/typography/highlight-1.tsx",
+        premium: true,
+        source: `
+
+
+export interface ProseProps {
+  children: React.ReactNode;
+  size?: "sm" | "base" | "lg" | "xl";
+  className?: string;
+}
+
+export function Prose({ children, size = "base", className, ...props }: ProseProps) {
+  const sizeClasses = {
+    sm: "prose-sm",
+    base: "prose",
+    lg: "prose-lg",
+    xl: "prose-xl"
+  };
+
+  return (
+    <div
+      className={cn(
+        "prose light:prose-gray max-w-none prose-invert",
+        sizeClasses[size],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+
+/** 
+ * 
+ * required 
+ * module.exports = {
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
+}
+ */
+export function ProseDemo() {
+  return (
+    <Prose>
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      
+      <p>This is a paragraph of text. It demonstrates how prose handles regular text content with proper spacing and typography.</p>
+      
+      <p>Another paragraph to show the spacing between paragraphs and how the prose component maintains consistent vertical rhythm.</p>
+      
+      <ul>
+        <li>First list item</li>
+        <li>Second list item</li>
+        <li>Third list item with longer content to demonstrate wrapping behavior</li>
+      </ul>
+      
+      <ol>
+        <li>First ordered item</li>
+        <li>Second ordered item</li>
+        <li>Third ordered item</li>
+      </ol>
+      
+      <blockquote>
+        This is a blockquote demonstrating how quoted text appears within the prose component.
+      </blockquote>
+      
+      <p>Here's some <code>inline code</code> and a <a href="#demo">link example</a> to show how they're styled.</p>
+    </Prose>
+  );
+}
+
+export function ProseUsage() {
+  return (
+    <div className="space-y-8">
+      <div>
+        <h3 className="font-medium mb-4">Small Prose</h3>
+        <Prose size="sm">
+          <h4>Small Heading</h4>
+          <p>This is small prose text. Perfect for compact content areas or sidebar text.</p>
+          <ul>
+            <li>Compact list item</li>
+            <li>Another compact item</li>
+          </ul>
+        </Prose>
+      </div>
+
+      <div>
+        <h3 className="font-medium mb-4">Large Prose</h3>
+        <Prose size="lg">
+          <h4>Large Heading</h4>
+          <p>This is large prose text. Great for main content areas where readability is important.</p>
+          <blockquote>
+            Large blockquote for emphasis
+          </blockquote>
+        </Prose>
+      </div>
+
+      <div>
+        <h3 className="font-medium mb-4">Extra Large Prose</h3>
+        <Prose size="xl">
+          <h4>Extra Large Heading</h4>
+          <p>This is extra large prose text. Ideal for presentations or when you need maximum readability.</p>
+        </Prose>
+      </div>
+
+      <div>
+        <h3 className="font-medium mb-4">Custom Styled Prose</h3>
+        <Prose className="prose-blue dark:prose-blue">
+          <h4>Custom Color</h4>
+          <p>This prose uses custom blue coloring for links and accents.</p>
+          <a href="#custom">Custom styled link</a>
+        </Prose>
+      </div>
+    </div>
+  );
+}`,
+        category: "Typography",
+        tags: ["ui", "components", "interactive"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: [],
+        basicusage: `
+<Prose>
+    Content
+</Prose>
+
+<Prose children="" size="base" className="" props="">
+    Content
+</Prose>`,
+        usage: null,
+        usagePath: null,
+        props: {
+            "Prose": [
+                { name: "children", type: "string", default: null },
+                { name: "size", type: "string", default: "base" },
+                { name: "className", type: "string", default: null },
+                { name: "props", type: "any", default: null }
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Highlight",
+        value: "highlight",
+        importPath: "~/components/catalyst-ui/typography/highlight",
+        multiImport: null,
+        path: "/components/catalyst-ui/typography/typography/highlight.tsx",
+        premium: true,
+        source: null,
+        category: "Typography",
+        tags: ["ui", "components", "interactive"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: [],
+        basicusage: `
+<Highlight>
+    Content
+</Highlight>
+
+<Highlight children="" query="" highlightStyles="bg-yellow-200 dark:bg-yellow-600" caseSensitive=false className="" props="">
+    Content
+</Highlight>`,
+        usage: null,
+        usagePath: null,
+        props: {
+            "Highlight": [
+                { name: "children", type: "string", default: null },
+                { name: "query", type: "string", default: null },
+                { name: "highlightStyles", type: "string", default: "bg-yellow-200 dark:bg-yellow-600" },
+                { name: "caseSensitive", type: "boolean", default: false },
+                { name: "className", type: "string", default: null },
+                { name: "props", type: "any", default: null }
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "h5",
+        value: "h5",
+        importPath: "~/components/catalyst-ui/typography/h5",
+        multiImport: null,
+        basicusage: `
+<H5>
+    Text
+</H5>
+`,
+        path: "/components/catalyst-ui/typography/typography/highlight.tsx",
+        premium: true,
+        source: `
+
+
+export function H5({ children,  className = "" }) {
+    return (
+        <h2 className={cn("scroll-m-20 pb-2 text-lg font-semibold tracking-tight first:mt-0",  className)}>
+            {children}
+        </h2>
+    )
+}`,
+        usage: null,
+        usagePath: null,
+        category: "Typography",
+        tags: ["ui", "components", "interactive"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["@radix-ui/react-aspect-ratio"],
+        props: [
+            { name: "className", type: "string", default: "null" },
+        ],
+        props2: [],
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "h4",
+        value: "h4",
+        importPath: "~/components/catalyst-ui/typography/h4",
+        multiImport: null,
+        basicusage: `
+<H4>
+    Text
+</H4>
+`,
+        path: "/components/catalyst-ui/typography/typography/h4.tsx",
+        premium: true,
+        source: `
+
+        
+export function H4({ children,  className = "" }) {
+    return (
+        <h2 className={cn("scroll-m-20 pb-2 text-xl font-semibold tracking-tight first:mt-0 text-muted-foreground",  className)}>
+            {children}
+        </h2>
+    )
+}`,
+        usage: null,
+        usagePath: null,
+        category: "Typography",
+        tags: ["ui", "components", "interactive"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["@radix-ui/react-aspect-ratio"],
+        props: [
+            { name: "className", type: "string", default: "null" },
+        ],
+        props2: [],
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "h3",
+        value: "h3",
+        importPath: "~/components/catalyst-ui/typography/h3",
+        multiImport: null,
+        basicusage: `
+`,
+        path: "/components/catalyst-ui/typography/typography/h3.tsx",
+        premium: true,
+        source: `
+
+
+export function H3({ children,  className = "" }) {
+    return (
+        <h2 className={cn("scroll-m-20 pb-2 text-2xl font-semibold tracking-tight first:mt-0",  className)}>
+            {children}
+        </h2>
+    )
+}`,
+        usage: `
+<H3>
+    Text
+</H3>
+`,
+        usagePath: null,
+        category: "Typography",
+        tags: ["ui", "components", "interactive"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["@radix-ui/react-aspect-ratio"],
+        props: [
+            { name: "className", type: "string", default: "null" },
+        ],
+        props2: [],
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Display Code",
+        value: "display-code",
+        importPath: "~/components/catalyst-ui/typography/code",
+        multiImport: null,
+        basicusage: null,
+        path: "/components/catalyst-ui/typography/typography/code.tsx",
+        premium: true,
+        source: null,
+        usage: null,
+        usagePath: "/components/catalyst-ui/typography/typography/code.tsx",
+        category: "Typography",
+        tags: ["ui", "components", "interactive"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["@radix-ui/react-aspect-ratio"],
+        desc: "This section seems kinda of stupid I know, but if like me, you have adhd just read this before dismissing it. Even as I was coding this, I thought I would never use it. The benefit, was visible extremely fast though. With the associated memory problems, I can't remember my styling that I coded two files ago. For that reason, my text always differ. I also find, I dont get as frustrated creating those types of pages, I used to get mad and frustrated due to not remembering how I did in the previous file. So it not only made me more efficient, by not having to write classnames for every single one of them, but it made every single page I do, consistant. All the while it's one less thing I have to think about or remember now. Trust me you will feel stupid trying this section of code out as its replacing such a simple piece of code. But I don't think I will ever code these sections without it, again. ",
+        customize: null
+    },
+    {
+        name: "Typography",
+        value: "typography",
+        importPath: "~/components/catalyst-ui/typography/typography",
+        multiImport: null,
+        basicusage: null,
+        path: "/components/catalyst-ui/typography/typography/code.tsx",
+        premium: true,
+        source: `
+
+
+
+
+
+
+
+
+
+
+
+const TypographyExample = () => {
+    const codingRequirements = [
+        { item: "Clean, readable code", checked: true },
+        { item: "Proper documentation", checked: true },
+        { item: "Zero bugs (wishful thinking)", checked: false },
+        { item: "Coffee supply maintained", checked: false },
+    ];
+
+    return (
+        <DIV>
+            {/* Heading */}
+            <H1>The Developer's Journey: From Hello World to Production</H1>
+
+            {/* Subheading */}
+            <H2>The Art of Programming</H2>
+
+            {/* Paragraph */}
+            <P>
+                Every developer starts with that magical first line of code, printing "Hello World" to the console. What begins as a simple curiosity soon becomes an obsession with solving problems, building applications, and constantly learning new technologies. But with great power comes great responsibility - and a lot of debugging sessions that last until 3 AM.
+            </P>
+
+            {/* Blockquote */}
+            <Blockquote>"There are only two hard things in Computer Science: cache invalidation and naming things."</Blockquote>
+
+            {/* Unordered List */}
+            <UnorderedList>
+                <li>Frontend: The pretty face everyone sees</li>
+                <li>Backend: The brains behind the operation</li>
+                <li>Database: Where all the important stuff lives</li>
+            </UnorderedList>
+
+            {/* Checklist */}
+            <Checklist items={codingRequirements} />
+
+            {/* Ordered List */}
+            <OrderedList>
+                <li>Write the code with confidence</li>
+                <li>Test it thoroughly (or at least run it once)</li>
+                <li>Deploy to production on a Friday</li>
+                <li>Panic when everything breaks</li>
+            </OrderedList>
+
+            {/* Code Block */}
+            <P className="leading-7 [&:not(:first-child)]:mt-6">
+                Every programmer's favorite error message is{" "}
+                <Code variant="warning">It works on my machine</Code>{" "}
+                followed closely by the classic "undefined is not a function."
+            </P>
+
+            {/* Lead Text */}
+            <P className="text-xl text-muted-foreground">The moral of the story is: embrace the bugs, celebrate the victories, and never forget to push your code to version control.</P>
+        </DIV>
+    );
+};
+
+export default TypographyExample;
+`,
+        category: "Typography",
+        tags: ["ui", "components", "interactive"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+
+
+
+
+
+
+
+
+
+
+
+const TypographyExample = () => {
+    const codingRequirements = [
+        { item: "Clean, readable code", checked: true },
+        { item: "Proper documentation", checked: true },
+        { item: "Zero bugs (wishful thinking)", checked: false },
+        { item: "Coffee supply maintained", checked: false },
+    ];
+
+    return (
+        <DIV>
+            {/* Heading */}
+            <H1>The Developer's Journey: From Hello World to Production</H1>
+
+            {/* Subheading */}
+            <H2>The Art of Programming</H2>
+
+            {/* Paragraph */}
+            <P>
+                Every developer starts with that magical first line of code, printing "Hello World" to the console. What begins as a simple curiosity soon becomes an obsession with solving problems, building applications, and constantly learning new technologies. But with great power comes great responsibility - and a lot of debugging sessions that last until 3 AM.
+            </P>
+
+            {/* Blockquote */}
+            <Blockquote>"There are only two hard things in Computer Science: cache invalidation and naming things."</Blockquote>
+
+            {/* Unordered List */}
+            <UnorderedList>
+                <li>Frontend: The pretty face everyone sees</li>
+                <li>Backend: The brains behind the operation</li>
+                <li>Database: Where all the important stuff lives</li>
+            </UnorderedList>
+
+            {/* Checklist */}
+            <Checklist items={codingRequirements} />
+
+            {/* Ordered List */}
+            <OrderedList>
+                <li>Write the code with confidence</li>
+                <li>Test it thoroughly (or at least run it once)</li>
+                <li>Deploy to production on a Friday</li>
+                <li>Panic when everything breaks</li>
+            </OrderedList>
+
+            {/* Code Block */}
+            <P className="leading-7 [&:not(:first-child)]:mt-6">
+                Every programmer's favorite error message is{" "}
+                <Code variant="warning">It works on my machine</Code>{" "}
+                followed closely by the classic "undefined is not a function."
+            </P>
+
+            {/* Lead Text */}
+            <P className="text-xl text-muted-foreground">The moral of the story is: embrace the bugs, celebrate the victories, and never forget to push your code to version control.</P>
+        </DIV>
+    );
+};
+
+export default TypographyExample;
+`,
+        usagePath: null,
+        props: [
+            { name: "className", type: "string", default: "null" },
+        ],
+        props2: [],
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "ordered list",
+        value: "ordered-list",
+        importPath: "~/components/catalyst-ui/typography/ordered-list",
+        multiImport: null,
+        basicusage: `
+<OrderedList>
+    <li>Write the code with confidence</li>
+    <li>Test it thoroughly (or at least run it once)</li>
+    <li>Deploy to production on a Friday</li>
+    <li>Panic when everything breaks</li>
+</OrderedList>
+`,
+        path: "/components/catalyst-ui/typography/typography/ordered-list.tsx",
+        source: `
+
+
+export function OrderedList({ children, variant = "default", className = "" }) {
+  const variants = {
+    default: "list-decimal",
+    lowerAlpha: "list-lower-alpha",
+    upperAlpha: "list-upper-alpha",
+    lowerRoman: "list-lower-roman",
+    upperRoman: "list-upper-roman"
+  };
+
+  return (
+    <ol className={cn("my-6 ml-6 [&>li]:mt-2", variants[variant], className)}>
+      {children}
+    </ol>
+  );
+}`,
+        usagePath: null,
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["ui", "components", "display"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        props: [
+            { name: "className", type: "string", default: "null" },
+        ],
+        props2: [],
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "p",
+        value: "p",
+        importPath: "~/components/catalyst-ui/typography/p",
+        multiImport: null,
+        basicusage: `
+<P>
+    Every developer starts with that magical first line of code, printing "Hello World" to the console. What begins as a simple curiosity soon becomes an obsession with solving problems, building applications, and constantly learning new technologies. But with great power comes great responsibility - and a lot of debugging sessions that last until 3 AM.
+</P>
+`,
+        path: "/components/catalyst-ui/typography/typography/p.tsx",
+        source: `
+
+
+export function P({ children,  className = "" }) {
+    return (
+        <blockquote className={cn("leading-7 [&:not(:first-child)]:mt-6", className)}>
+            {children}
+        </blockquote>
+    )
+}
+`,
+        usagePath: null,
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["ui", "components", "display"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        props: [
+            { name: "className", type: "string", default: "null" },
+        ],
+        props2: [],
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "PM",
+        value: "p-m",
+        importPath: "~/components/catalyst-ui/typography/pm",
+        multiImport: null,
+        basicusage: `
+<PM>
+    Every developer starts with that magical first line of code, printing "Hello World" to the console. What begins as a simple curiosity soon becomes an obsession with solving problems, building applications, and constantly learning new technologies. But with great power comes great responsibility - and a lot of debugging sessions that last until 3 AM.
+</PM>
+`,
+        path: "/components/catalyst-ui/typography/typography/pm.tsx",
+        source: `
+
+
+export function PM({ children,  className = "" }) {
+    return (
+        <blockquote className={cn("leading-7 [&:not(:first-child)]:mt-6 text-muted-foreground", className)}>
+            {children}
+        </blockquote>
+    )
+}`,
+        usagePath: null,
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["ui", "components", "display"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        props: [
+            { name: "className", type: "string", default: "null" },
+        ],
+        props2: [],
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "unordered list",
+        value: "unordered-list",
+        importPath: "~/components/catalyst-ui/typography/unordered-list",
+        multiImport: null,
+        basicusage: `
+<UnorderedList>
+    <li>Frontend: The pretty face everyone sees</li>
+    <li>Backend: The brains behind the operation</li>
+    <li>Database: Where all the important stuff lives</li>
+</UnorderedList>
+`,
+        path: "/components/catalyst-ui/typography/typography/unordered-list.tsx",
+        source: `
+
+
+export function UnorderedList({ children, variant = "default", className = "" }) {
+  const variants = {
+    default: "list-disc",
+    circle: "list-circle",
+    square: "list-square",
+    none: "list-none"
+  };
+
+  return (
+    <ul className={cn("my-6 ml-6 [&>li]:mt-2", variants[variant], className)}>
+      <span className='text-muted-foreground'>{children}</span>
+    </ul>
+  );
+}
+`,
+        usagePath: null,
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["ui", "components", "display"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        props: [
+            { name: "className", type: "string", default: "null" },
+        ],
+        props2: [],
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Block Quote",
+        value: "block-quote",
+        importPath: "~/components/catalyst-ui/typography/block-quote",
+        multiImport: null,
+        basicusage: `
+<Blockquote className="mt-4">
+    Text
+</Blockquote>
+<Blockquote variant='success' className="mt-4">
+    Text
+</Blockquote>
+<Blockquote variant='warning' className="mt-4">
+    Text
+</Blockquote>
+<Blockquote variant='default' className="mt-4">
+    Text
+</Blockquote>
+`,
+        path: "/components/catalyst-ui/typography/typography/block-quote.tsx",
+        source: `
+
+
+export function Blockquote({ children, variant = "info", className = "" }) {
+    const variants = {
+        default: "border-border text-muted-foreground",
+        success: "border-green-500 text-muted-foreground bg-green-900/20 py-2",
+        warning: "border-yellow-500 text-muted-foreground bg-yellow-900/20 py-2",
+        info: "border-blue-500 text-muted-foreground bg-blue-900/20 py-2"
+    };
+
+    return (
+        <blockquote className={cn("mt-4 border-l-4 pl-4 italic", variants[variant], className)}>
+            {children}
+        </blockquote>
+    )
+}`,
+        usagePath: null,
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["ui", "components", "display"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        props: [
+            { name: "className", type: "string", default: "null" },
+        ],
+        props2: [],
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "check list",
+        value: "check-list",
+        importPath: "~/components/catalyst-ui/typography/check-list",
+        multiImport: null,
+        basicusage: `
+const codingRequirements = [
+        { item: "Clean, readable code", checked: true },
+        { item: "Proper documentation", checked: true },
+        { item: "Zero bugs (wishful thinking)", checked: false },
+        { item: "Coffee supply maintained", checked: false },
+]
+<Checklist items={codingRequirements} />
+`,
+        path: "/components/catalyst-ui/typography/sections/check-list.tsx",
+        source: null,
+        usagePath: null,
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["ui", "components", "display"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        props: [
+            { name: "className", type: "string", default: "null" },
+        ],
+        props2: [],
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "div",
+        value: "div",
+        importPath: "~/components/catalyst-ui/typography/div",
+        multiImport: null,
+        basicusage: `
+
+
+
+
+
+
+
+
+
+<DIV>
+            {/* Heading */}
+            <H1>The Developer's Journey: From Hello World to Production</H1>
+
+            {/* Subheading */}
+            <H2>The Art of Programming</H2>
+
+            {/* Paragraph */}
+            <P>
+                Every developer starts with that magical first line of code, printing "Hello World" to the console. What begins as a simple curiosity soon becomes an obsession with solving problems, building applications, and constantly learning new technologies. But with great power comes great responsibility - and a lot of debugging sessions that last until 3 AM.
+            </P>
+
+            {/* Blockquote */}
+            <Blockquote>"There are only two hard things in Computer Science: cache invalidation and naming things."</Blockquote>
+
+            {/* Unordered List */}
+            <UnorderedList>
+                <li>Frontend: The pretty face everyone sees</li>
+                <li>Backend: The brains behind the operation</li>
+                <li>Database: Where all the important stuff lives</li>
+            </UnorderedList>
+
+            {/* Checklist */}
+            <Checklist items={codingRequirements} />
+
+            {/* Ordered List */}
+            <OrderedList>
+                <li>Write the code with confidence</li>
+                <li>Test it thoroughly (or at least run it once)</li>
+                <li>Deploy to production on a Friday</li>
+                <li>Panic when everything breaks</li>
+            </OrderedList>
+
+            {/* Code Block */}
+            <P className="leading-7 [&:not(:first-child)]:mt-6">
+                Every programmer's favorite error message is{" "}
+                <Code variant="warning">It works on my machine</Code>{" "}
+                followed closely by the classic "undefined is not a function."
+            </P>
+
+            {/* Lead Text */}
+            <P className="text-xl text-muted-foreground">The moral of the story is: embrace the bugs, celebrate the victories, and never forget to push your code to version control.</P>
+        </DIV>
+`,
+        path: "/components/catalyst-ui/typography/typography/check-list.tsx",
+        source: `
+
+
+export function DIV({ children,  className = "" }) {
+    return (
+        <div className={cn("max-w-3xl mx-auto p-6 space-y-6",  className)}>
+            {children}
+        </div>
+    )
+}
+`,
+        usagePath: null,
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["ui", "components", "display"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        props: [
+            { name: "className", type: "string", default: "null" },
+        ],
+        props2: [],
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "h1",
+        value: "h1",
+        importPath: "~/components/catalyst-ui/typography/h1",
+        multiImport: null,
+        basicusage: `
+<H1>The Developer's Journey: From Hello World to Production</H1>
+`,
+        path: "/components/catalyst-ui/typography/typography/h1.tsx",
+        source: `
+
+
+export function H1({ children,  className = "" }) {
+    return (
+        <h1 className={cn("scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl", className)}>
+            {children}
+        </h1>
+    )
+}
+`,
+        usagePath: null,
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["ui", "components", "display"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        props: [
+            { name: "className", type: "string", default: "null" },
+        ],
+        props2: [],
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "h2",
+        value: "h2",
+        importPath: "~/components/catalyst-ui/typography/h2",
+        multiImport: null,
+        basicusage: `
+<H2>The Art of Programming</H2>
+`,
+        path: "/components/catalyst-ui/typography/typography/h2.tsx",
+        source: `
+
+
+export function H2({ children,  className = "" }) {
+    return (
+        <h2 className={cn("scroll-m-20  text-3xl font-semibold tracking-tight first:mt-0",  className)}>
+            {children}
+        </h2>
+    )
+}
+`,
+        usagePath: null,
+        usage: null,
+        premium: true,
+        category: "Typography",
+        tags: ["ui", "components", "display"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        props: [
+            { name: "className", type: "string", default: "null" },
+        ],
+        props2: [],
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "B",
+        value: "b",
+        importPath: "~/components/catalyst-ui/typography/b",
+        multiImport: null,
+        path: "/components/catalyst-ui/typography/typography/b.tsx",
+        premium: true,
+        source: `
+
+
+
+export function B({ children, className = "" }) {
+  return (
+    <strong className={cn("font-bold", className)}>
+      {children}
+    </strong>
+  );
+}
+
+`,
+        category: "Typography",
+        tags: ["ui", "components", "interactive"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["react"],
+        basicusage: `
+<B>
+    Content
+</B>
+
+<B className="">
+    Content
+</B>`,
+        usage: null,
+        usagePath: null,
+        props: {
+            "B": [
+                { name: "children", type: "string", default: null },
+                { name: "className", type: "number", default: "" }
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "I",
+        value: "i",
+        importPath: "~/components/catalyst-ui/typography/i",
+        multiImport: null,
+        path: "/components/catalyst-ui/typography/typography/i.tsx",
+        premium: true,
+        source: `
+
+
+
+export interface ItalicProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function I({ children, className = "" }: ItalicProps) {
+  return (
+    <span className={cn("italic", className)}>
+      {children}
+    </span>
+  );
+}
+
+`,
+        category: "Typography",
+        tags: ["ui", "components", "interactive"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["react"],
+        basicusage: `
+<I>
+    Content
+</I>
+
+<I className="">
+    Content
+</I>`,
+        usage: null,
+        usagePath: null,
+        props: {
+            "I": [
+                { name: "children", type: "string", default: null },
+                { name: "className", type: "number", default: "" }
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "IB",
+        value: "ib",
+        importPath: "~/components/catalyst-ui/typography/ib",
+        multiImport: null,
+        path: "/components/catalyst-ui/typography/typography/ib.tsx",
+        premium: true,
+        source: `
+
+
+
+export interface ItalicProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function IB({ children, className = "" }: ItalicProps) {
+  return (
+    <span className={cn("italic font-semibold", className)}>
+      {children}
+    </span>
+  );
+}`,
+        category: "Typography",
+        tags: ["ui", "components", "interactive"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["react"],
+        basicusage: `
+<IB>
+    Content
+</IB>
+
+<IB className="">
+    Content
+</IB>`,
+        usage: null,
+        usagePath: null,
+        props: {
+            "IB": [
+                { name: "children", type: "string", default: null },
+                { name: "className", type: "number", default: "" }
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+];