@catalystsoftware/ui 1.0.12 → 1.0.14

package/dist/components/catalyst-ui/data/x-data.tsx

@@ -0,0 +1,1171 @@
+export const xData = [
+    {
+        name: "Button X",
+        value: "button-x",
+        importPath: "~/components/catalyst-uix/button-x",
+        path: "/components/catalyst-ui/x/button-X.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/x/button-X.tsx",
+        basicusage: `
+<ButtonX variant="default">
+  Click Me
+</ButtonX>
+
+<ButtonX 
+  variant="default" // default | destructive | outline | secondary | ghost | link | elevated | filled | tonal | outlined | text | styled | reverted | dashed | gradient | soft | glass | success | warning | info | shine | pulse | violet | blue | green
+  size="default" // default | sm | lg | icon
+  align="middle" // left | middle | right
+  effect="hoverUnderline" // expandIcon | ringHover | shine | shineHover | gooeyRight | gooeyLeft | underline | hoverUnderline | gradientSlideShow
+  prefetch="intent" // none | intent | render | viewport
+  nav="null" // null | navlink | anchor
+  to="/"
+  iconPlacement="left" // left | right
+  icon={Icon}
+  newTab={true}
+  onClick={() => {}} 
+  className=""
+>
+  Click Me
+</ButtonX>`,
+        usage: `
+<ButtonX 
+  variant="default" // default | destructive | outline | secondary | ghost | link | elevated | filled | tonal | outlined | text | styled | reverted | dashed | gradient | soft | glass | success | warning | info | shine | pulse | violet | blue | green | Attract | Burger | Command | Copy
+  size="default" // default | sm | lg | icon
+  align="middle" // left | middle | right
+  effect="hoverUnderline" // expandIcon | ringHover | shine | shineHover | gooeyRight | gooeyLeft | underline | hoverUnderline | gradientSlideShow
+  prefetch="intent" // none | intent | render | viewport
+  nav="null" // null | navlink | anchor
+  to="/"
+  iconPlacement="left" // left | right
+  icon={Icon}
+  newTab={true}
+  asChild={false}
+  type="button" // button | submit | reset
+  onClick={() => {}} 
+  className=""
+  particleCount={12} // for Attract variant
+  attractRadius={50} // for Attract variant
+  attractVariant="default" // default | violet | blue | green - for Attract variant
+  activeText="Attracting" // for Attract variant
+  inactiveText="Hover me" // for Attract variant
+  content="text to copy" // for Copy variant
+  delay={3000} // for Copy variant
+  onCopy={(content) => {}} // for Copy variant
+  isCopied={false} // for Copy variant
+  onCopyChange={(isCopied) => {}} // for Copy variant
+>
+  Click Me
+</ButtonX>`,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "button", "interactive", "navigation", "advanced", "animated"],
+        features: ["Responsive", "TypeScript", "Accessible", "Multiple Variants", "Navigation Support", "Loading States", "Advanced Effects", "Animated Variants", "Attract Button", "Command Button", "Copy Button"],
+        dependencies: ["react", "class-variance-authority", "@radix-ui/react-slot", "@remix-run/react", "lucide-react", "motion/react", "~/components/catalyst-ui/utils"],
+        props: {
+            "ButtonX": [
+                { name: "className", type: "string", default: "null" },
+                { name: "variant", type: "default | destructive | outline | secondary | ghost | link | elevated | filled | tonal | outlined | text | styled | reverted | dashed | gradient | soft | glass | success | warning | info | shine | pulse | violet | blue | green | Attract | Burger | Command | Copy", default: "default" },
+                { name: "effect", type: "expandIcon | ringHover | shine | shineHover | gooeyRight | gooeyLeft | underline | hoverUnderline | gradientSlideShow", default: "null" },
+                { name: "size", type: "default | sm | lg | icon", default: "default" },
+                { name: "align", type: "left | middle | right", default: "middle" },
+                { name: "to", type: "string", default: "/" },
+                { name: "prefetch", type: "none | intent | render | viewport", default: "intent" },
+                { name: "nav", type: "null | navlink | anchor", default: "null" },
+                { name: "newTab", type: "boolean", default: "true" },
+                { name: "asChild", type: "boolean", default: "false" },
+                { name: "icon", type: "icon function", default: "null" },
+                { name: "iconPlacement", type: "left | right", default: "left" },
+                { name: "onClick", type: "react function", default: "null" },
+                { name: "type", type: "button | submit | reset", default: "button for navlink and anchor, submit for effect, defaults to submit" },
+                { name: "particleCount", type: "number", default: "12" },
+                { name: "attractRadius", type: "number", default: "50" },
+                { name: "attractVariant", type: "default | violet | blue | green", default: "default" },
+                { name: "activeText", type: "string", default: "Attracting" },
+                { name: "inactiveText", type: "string", default: "Hover me" },
+                { name: "content", type: "string", default: "null" },
+                { name: "delay", type: "number", default: "3000" },
+                { name: "onCopy", type: "function", default: "null" },
+                { name: "isCopied", type: "boolean", default: "false" },
+                { name: "onCopyChange", type: "function", default: "null" },
+            ],
+            "AttractButton": [
+                { name: "particleCount", type: "number", default: "12" },
+                { name: "attractRadius", type: "number", default: "50" },
+                { name: "attractVariant", type: "default | violet | blue | green", default: "default" },
+                { name: "icon", type: "React.ReactNode", default: "null" },
+                { name: "activeText", type: "string", default: "Attracting" },
+                { name: "inactiveText", type: "string", default: "Hover me" },
+                { name: "className", type: "string", default: "null" },
+            ],
+            "CommandButton": [
+                { name: "variant", type: "default | primary | secondary", default: "default" },
+                { name: "size", type: "sm | default | lg", default: "default" },
+                { name: "className", type: "string", default: "null" },
+                { name: "children", type: "React.ReactNode", default: "null" },
+            ],
+            "CopyButton": [
+                { name: "content", type: "string", default: "null" },
+                { name: "className", type: "string", default: "null" },
+                { name: "size", type: "default | sm | lg | icon", default: "default" },
+                { name: "variant", type: "default | destructive | outline | secondary | ghost | link", default: "default" },
+                { name: "delay", type: "number", default: "3000" },
+                { name: "onClick", type: "function", default: "null" },
+                { name: "onCopy", type: "function", default: "null" },
+                { name: "isCopied", type: "boolean", default: "false" },
+                { name: "onCopyChange", type: "function", default: "null" },
+            ],
+            "FloatButton": [
+                { name: "icon", type: "React.ReactNode", default: "null" },
+                { name: "description", type: "string", default: "null" },
+                { name: "tooltip", type: "string", default: "null" },
+                { name: "type", type: "default | primary", default: "default" },
+                { name: "shape", type: "circle | square", default: "circle" },
+                { name: "size", type: "small | default | large", default: "default" },
+                { name: "className", type: "string", default: "null" },
+                { name: "onClick", type: "function", default: "null" },
+                { name: "children", type: "React.ReactNode", default: "null" },
+            ],
+            "FlipButton": [
+                { name: "frontText", type: "string", default: "null" },
+                { name: "backText", type: "string", default: "null" },
+                { name: "transition", type: "Transition", default: "{ type: 'spring', stiffness: 280, damping: 20 }" },
+                { name: "className", type: "string", default: "null" },
+                { name: "frontClassName", type: "string", default: "null" },
+                { name: "backClassName", type: "string", default: "null" },
+                { name: "from", type: "top | bottom | left | right", default: "top" },
+            ],
+            "HoldButton": [
+                { name: "holdDuration", type: "number", default: "3000" },
+                { name: "onComplete", type: "function", default: "null" },
+                { name: "icon", type: "React.ReactNode", default: "null" },
+                { name: "holdText", type: "string", default: "Hold me" },
+                { name: "releaseText", type: "string", default: "Release" },
+                { name: "holdVariant", type: "red | green | blue | orange | grey", default: "red" },
+                { name: "className", type: "string", default: "null" },
+                { name: "disabled", type: "boolean", default: "false" },
+            ],
+            "LiquidButton": [
+                { name: "className", type: "string", default: "null" },
+                { name: "variant", type: "default | destructive | outline | secondary | ghost | link", default: "default" },
+                { name: "size", type: "default | sm | lg | icon", default: "default" },
+            ],
+            "ParticleButton": [
+                { name: "children", type: "React.ReactNode", default: "null" },
+                { name: "onClick", type: "function", default: "null" },
+                { name: "onSuccess", type: "function", default: "null" },
+                { name: "successDuration", type: "number", default: "1000" },
+                { name: "particleCount", type: "number | low | high", default: "6" },
+                { name: "showIcon", type: "boolean", default: "true" },
+                { name: "icon", type: "React.ReactNode", default: "null" },
+                { name: "variant", type: "default | destructive | outline | secondary | ghost | link", default: "default" },
+                { name: "size", type: "default | sm | lg | icon", default: "default" },
+                { name: "align", type: "left | middle | right", default: "middle" },
+                { name: "className", type: "string", default: "null" },
+                { name: "disabled", type: "boolean", default: "false" },
+            ],
+            "RippleButton": [
+                { name: "children", type: "React.ReactNode", default: "null" },
+                { name: "onClick", type: "function", default: "null" },
+                { name: "className", type: "string", default: "null" },
+                { name: "rippleClassName", type: "string", default: "null" },
+                { name: "variant", type: "default | destructive | outline | secondary | ghost", default: "default" },
+                { name: "size", type: "default | sm | lg | icon", default: "default" },
+                { name: "scale", type: "number", default: "10" },
+                { name: "transition", type: "Transition", default: "{ duration: 0.6, ease: 'easeOut' }" },
+            ],
+            "SocialButton": [
+                { name: "shareButtons", type: "ShareButton[]", default: "[{ icon: Twitter, label: 'Share on Twitter' }, ...]" },
+                { name: "label", type: "string", default: "Hover me" },
+                { name: "icon", type: "React.ReactNode", default: "null" },
+                { name: "variant", type: "light | dark | outline", default: "light" },
+                { name: "className", type: "string", default: "null" },
+            ],
+            "SplitButton": [
+                { name: "label", type: "string", default: "null" },
+                { name: "icon", type: "React.ReactNode", default: "null" },
+                { name: "items", type: "SplitButtonItem[]", default: "[]" },
+                { name: "onClick", type: "function", default: "null" },
+                { name: "className", type: "string", default: "null" },
+                { name: "containerClassName", type: "string", default: "null" },
+                { name: "variant", type: "default | destructive | outline | secondary | ghost", default: "default" },
+                { name: "align", type: "left | middle | right", default: "default" },
+                { name: "size", type: "default | sm | lg | icon", default: "sm" },
+                { name: "children", type: "React.ReactNode", default: "null" },
+            ],
+            "SwitchButton": [
+                { name: "checked", type: "boolean", default: "false" },
+                { name: "onCheckedChange", type: "function", default: "null" },
+                { name: "className", type: "string", default: "null" },
+                { name: "variant", type: "default | primary | secondary | destructive", default: "default" },
+                { name: "size", type: "sm | md | lg", default: "md" },
+                { name: "disabled", type: "boolean", default: "false" },
+                { name: "labels", type: "{ checked: string; unchecked: string }", default: "null" },
+            ],
+            "ToggleButton": [
+                { name: "checked", type: "boolean", default: "false" },
+                { name: "onChange", type: "function", default: "null" },
+                { name: "disabled", type: "boolean", default: "false" },
+                { name: "className", type: "string", default: "null" },
+                { name: "variant", type: "default | outline | ghost", default: "default" },
+                { name: "size", type: "sm | md | lg | icon", default: "md" },
+                { name: "children", type: "React.ReactNode", default: "null" },
+            ],
+            "SlideButton": [
+                { name: "className", type: "string", default: "null" },
+                { name: "variant", type: "default | ghost", default: "default" },
+                { name: "size", type: "sm | default | lg", default: "default" },
+                { name: "text", type: "string", default: "Browse Components" },
+                { name: "hoverText", type: "string", default: "null" },
+                { name: "to", type: "string", default: "/" },
+                { name: "prefetch", type: "none | intent | render | viewport", default: "intent" },
+            ],
+            "TextRevealButton": [
+                { name: "text", type: "string", default: "shadcn.io" },
+                { name: "revealColor", type: "string", default: "#37FF8B" },
+                { name: "strokeColor", type: "string", default: "rgba(100, 100, 100, 0.7)" },
+                { name: "className", type: "string", default: "null" },
+                { name: "style", type: "React.CSSProperties", default: "null" },
+            ],
+            "ShimmerButton": [
+                { name: "shimmerColor", type: "string", default: "#ffffff" },
+                { name: "shimmerSize", type: "string", default: "0.05em" },
+                { name: "shimmerDuration", type: "string", default: "3s" },
+                { name: "borderRadius", type: "string", default: "100px" },
+                { name: "background", type: "string", default: "rgba(0, 0, 0, 1)" },
+                { name: "className", type: "string", default: "null" },
+                { name: "children", type: "React.ReactNode", default: "null" },
+            ],
+            "Rating": [
+                { name: "value", type: "number", default: "null" },
+                { name: "onValueChange", type: "function", default: "null" },
+                { name: "defaultValue", type: "number", default: "0" },
+                { name: "onChange", type: "function", default: "null" },
+                { name: "readOnly", type: "boolean", default: "false" },
+                { name: "className", type: "string", default: "null" },
+                { name: "children", type: "React.ReactNode", default: "null" },
+            ],
+            "RatingButton": [
+                { name: "index", type: "number", default: "null" },
+                { name: "size", type: "number", default: "20" },
+                { name: "className", type: "string", default: "null" },
+                { name: "icon", type: "React.ReactNode", default: "<StarIcon />" },
+            ],
+            "InputButtonProvider": [
+                { name: "className", type: "string", default: "null" },
+                { name: "transition", type: "Transition", default: "{ type: 'spring', stiffness: 300, damping: 20 }" },
+                { name: "showInput", type: "boolean", default: "null" },
+                { name: "setShowInput", type: "function", default: "null" },
+                { name: "id", type: "string", default: "null" },
+                { name: "children", type: "React.ReactNode", default: "null" },
+            ],
+            "InputButton": [
+                { name: "className", type: "string", default: "null" },
+            ],
+            "InputButtonAction": [
+                { name: "className", type: "string", default: "null" },
+            ],
+            "InputButtonSubmit": [
+                { name: "className", type: "string", default: "null" },
+                { name: "children", type: "React.ReactNode", default: "null" },
+                { name: "icon", type: "React.ElementType", default: "ArrowRight" },
+            ],
+            "InputButtonInput": [
+                { name: "className", type: "string", default: "null" },
+            ],
+        },
+        desc: "An advanced button component collection with 20+ specialized button variants including Attract, Command, Copy, Float, Flip, Hold, Liquid, Particle, Ripple, Social, Split, Switch, Toggle, Slide, TextReveal, Shimmer, Rating, and InputButton variants. Features animations, particle effects, hover states, and complex interactions.",
+        status: "Listed",
+        lastUpdated: "2024-11-30T00:00:00Z"
+    },
+    {
+        name: "AnimatedTextX",
+        value: "animated-text-x",
+        path: "/components/catalyst-ui/x/animated-text-x.tsx",
+        basicusage: `<AnimateText text="Roll In" type="rollIn" />`,
+        usage: `/**
+   * ============================ DEFAULT (AnimateText) ============================
+   * text: string (default: "Welcome to the Matrix, Neo.!") - any variant that uses text as a prop will default to this
+   * type?: "fadeIn" | "fadeInUp" | "popIn" | "shiftInUp" | "rollIn" | "whipIn" | "whipInUp" | "calmInUp" | "blurIn" | "blurInUp" | "blurInDown" | "slideUp" | "slideDown" | "slideLeft" | "slideRight" | "scaleUp" | "scaleDown"
+   * className?: string
+   * example: <AnimateText text="Roll In" type="rollIn" />
+   * note: this being the default, theres no need to call the function with the variant prop in order to use, granting acces to 18 different text animations alone.
+   * 
+   * ============================ AnimatedGlitch ==================================
+   * text: string
+   * as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span"
+   * textClassName?: string
+   * containerClassName?: string
+   * colors?: { red: string, green: string, blue: string }
+   * example: <AnimateText variant='AnimatedGlitch' text="GLITCH" colors={{ red: "#ff0000", green: "#00ff00", blue: "#0000ff" }} />
+   * 
+   * ============================ Rotate ==========================================
+   * words: string[] - Array of words to rotate through
+   * duration?: number (default: 2500) - Time in ms between word changes
+   * motionProps?: MotionProps - Custom motion properties
+   * className?: string
+   * example: <AnimateText variant='Rotate' words={["First", "Second", "Third"]} duration={2000} />
+   * 
+   * ============================ ExpandableTypewriter ============================
+   * delay: number - Initial delay before animation starts
+   * texts: string[] - Array of texts to cycle through
+   * baseText?: string - Initial base text to type out
+   * example: <AnimateText variant='ExpandableTypewriter' delay={0.5} texts={["Hello", "World"]} baseText="Welcome: " />
+   * 
+   * ============================ TypingAnimation =================================
+   * children?: string - Single text to type
+   * words?: string[] - Multiple words to cycle through
+   * className?: string
+   * duration?: number (default: 100) - Speed per character
+   * typeSpeed?: number - Override duration for typing
+   * deleteSpeed?: number - Speed for deleting (default: typeSpeed/2)
+   * delay?: number (default: 0)
+   * pauseDelay?: number (default: 1000)
+   * loop?: boolean (default: false)
+   * as?: React.ElementType (default: "span")
+   * startOnView?: boolean (default: true)
+   * showCursor?: boolean (default: true)
+   * blinkCursor?: boolean (default: true)
+   * cursorStyle?: "line" | "block" | "underscore"
+   * example: <AnimateText variant='TypingAnimation' words={["TypeScript", "React", "Next.js"]} loop showCursor />
+   * 
+   * ============================ Typewriter ======================================
+   * sequences?: TypewriterSequence[] - Array of { text: string, deleteAfter?: boolean, pauseAfter?: number }
+   * typingSpeed?: number (default: 50)
+   * startDelay?: number (default: 500)
+   * autoLoop?: boolean (default: true)
+   * loopDelay?: number (default: 2000)
+   * size?: "sm" | "md" | "lg"
+   * className?: string
+   * containerClassName?: string
+   * example: <AnimateText variant='Typewriter' sequences={[{ text: "Hello", deleteAfter: true }]} size="md" />
+   * 
+   * ============================ Rewind ==========================================
+   * text?: string
+   * className?: string
+   * shadowColors?: { first?: string, second?: string, third?: string, fourth?: string, glow?: string }
+   * example: <AnimateText variant='Rewind' text="HOVER ME" shadowColors={{ first: "#07bccc", glow: "#f40468" }} />
+   * 
+   * ============================ Swoosh ==========================================
+   * text?: string
+   * shadowColors?: { first?: string, second?: string, third?: string, fourth?: string, glow?: string }
+   * size?: "sm" | "md" | "lg" | "xl"
+   * className?: string
+   * disabled?: boolean
+   * example: <AnimateText variant='Swoosh' text="SWOOSH" size="lg" />
+   * 
+   * ============================ Sliced ==========================================
+   * text: string
+   * splitSpacing?: number (default: 2)
+   * size?: "sm" | "md" | "lg" | "xl"
+   * className?: string
+   * containerClassName?: string
+   * disabled?: boolean
+   * example: <AnimateText variant='Sliced' text="SLICE" splitSpacing={4} size="lg" />
+   * 
+   * ============================ Shimmer =========================================
+   * text: string
+   * duration?: number (default: 2.5)
+   * variant?: "default" | "primary" | "secondary" | "accent"
+   * size?: "sm" | "md" | "lg" | "xl"
+   * className?: string
+   * containerClassName?: string
+   * disabled?: boolean
+   * example: <AnimateText variant='Shimmer' text="Shimmer" duration={3} variant="primary" />
+   * 
+   * ============================ Matrix ==========================================
+   * text?: string (default: "Welcome to the Matrix, Neo.!")
+   * initialDelay?: number (default: 200)
+   * letterAnimationDuration?: number (default: 500)
+   * letterInterval?: number (default: 100)
+   * matrixColor?: string (default: "#00ff00")
+   * loop?: boolean (default: false)
+   * size?: "sm" | "md" | "lg"
+   * alignment?: "left" | "center" | "right"
+   * className?: string
+   * example: <AnimateText variant='Matrix' text="MATRIX" matrixColor="#00ff00" loop />
+   * 
+   * ============================ Glitch ==========================================
+   * text: string
+   * className?: string
+   * intensity?: "low" | "medium" | "high"
+   * duration?: number (default: 2000)
+   * enabled?: boolean (default: true)
+   * fontSize?: "sm" | "md" | "lg" | "xl" | "2xl"
+   * example: <AnimateText variant='Glitch' text="GLITCH" intensity="high" fontSize="xl" />
+   * 
+   * ============================ Encrypted =======================================
+   * text: string
+   * className?: string
+   * revealDelayMs?: number (default: 50) - Time between revealing each character
+   * charset?: string - Custom character set for encryption
+   * flipDelayMs?: number (default: 50) - Time between gibberish flips
+   * encryptedClassName?: string
+   * revealedClassName?: string
+   * example: <AnimateText variant='Encrypted' text="SECRET" revealDelayMs={100} />
+   * 
+   * ============================ Hyper ===========================================
+   * children: string
+   * className?: string
+   * duration?: number (default: 800)
+   * delay?: number (default: 0)
+   * as?: React.ElementType (default: "div")
+   * startOnView?: boolean (default: false)
+   * animateOnHover?: boolean (default: true)
+   * characterSet?: string[] (default: A-Z)
+   * example: <AnimateText variant='Hyper' duration={1000} animateOnHover>HYPERTEXT</AnimateText>
+   * 
+   * ============================ Comic ===========================================
+   * children: string - The text to display in comic style
+   * className?: string
+   * style?: CSSProperties
+   * fontSize?: number (default: 5)
+   * example: <AnimateText variant='Comic' fontSize={4}>POW!</AnimateText>
+   * 
+   * ============================ Reveal ==========================================
+   * children: string - Text to reveal on scroll
+   * className?: string
+   * example: <AnimateText variant='Reveal'>This text reveals as you scroll down the page</AnimateText>
+   * 
+   * ============================ Morph ===========================================
+   * children: string - Text that morphs between changes
+   * as?: React.ElementType (default: "p")
+   * className?: string
+   * style?: React.CSSProperties
+   * variants?: Variants - Custom Framer Motion variants
+   * transition?: Transition - Custom Framer Motion transition
+   * example: <AnimateText variant='Morph'>Morphing Text</AnimateText>
+   * 
+   */
+  `,
+        premium: false,
+        category: "X",
+        tags: ["text", "animation", "encrypted", "effect"],
+        features: ["Responsive", "TypeScript", "Accessible", "Animated"],
+        dependencies: ["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: "",
+        status: "Listed",
+        lastUpdated: "2025-12-01"
+    },
+    {
+        name: "LoaderX",
+        value: "loader-x",
+        importPath: "~/components/catalyst-ui/x/loader-x",
+        multiImport: null,
+        path: "/components/catalyst-ui/x/loader-x.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/x/loader-x.tsx",
+        basicusage: `
+    <Loader variant="default" />
+    
+    <Loader 
+      variant="default" // default | circle | pinwheel | circle-filled | ellipsis | ring | bars | infinite | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21
+      size={24} // number | string
+      strokeWidth={2} // number
+      fill="transparent" // string
+      animationDuration="2s" // string
+      spinning={true} // boolean
+      delay={0} // number
+      tip="Loading..." // string
+      text="Loading..." // string
+      subText="Please wait" // string
+      frames={[]} // number[][]
+      dotClassName="" // string
+      isPlaying={true} // boolean
+      duration={100} // number
+      repeatCount={-1} // number
+      onComplete={() => {}} // function
+      outerSize="size-8" // string
+      childSize="size-6" // string
+      className=""
+      wrapperClassName=""
+      style={{}}
+    >
+      {/* children for LoaderNine */}
+    </Loader>`,
+        usage: `
+    <Loader 
+      variant="default" // default | circle | pinwheel | circle-filled | ellipsis | ring | bars | infinite | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21
+      size={24} // number | string
+      strokeWidth={2} // number
+      fill="transparent" // string
+      animationDuration="2s" // string
+      spinning={true} // boolean
+      delay={0} // number
+      tip="Loading..." // string
+      indicator={null} // React.ReactNode
+      text="Loading..." // string
+      subText="Please wait" // string
+      frames={[]} // number[][]
+      dotClassName="" // string
+      isPlaying={true} // boolean
+      duration={100} // number
+      repeatCount={-1} // number
+      onComplete={() => {}} // function
+      outerSize="size-8" // string
+      childSize="size-6" // string
+      className=""
+      wrapperClassName=""
+      style={{}}
+    >
+      {/* children for LoaderNine */}
+    </Loader>`,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "loader", "spinner", "loading", "feedback", "progress"],
+        features: ["Responsive", "TypeScript", "Accessible", "Multiple Variants", "Customizable Animations", "SVG Based", "Motion Support"],
+        dependencies: ["react", "motion/react", "class-variance-authority", "lucide-react", "~/components/catalyst-ui/utils"],
+        props: {
+            "Loader": [
+                { name: "variant", type: "default | circle | pinwheel | circle-filled | ellipsis | ring | bars | infinite | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21", default: "default" },
+                { name: "size", type: "number | string", default: "24" },
+                { name: "strokeWidth", type: "number", default: "2" },
+                { name: "fill", type: "string", default: "transparent" },
+                { name: "animationDuration", type: "string", default: "2s" },
+                { name: "style", type: "React.CSSProperties", default: "null" },
+                { name: "spinning", type: "boolean", default: "true" },
+                { name: "delay", type: "number", default: "0" },
+                { name: "tip", type: "string", default: "null" },
+                { name: "indicator", type: "React.ReactNode", default: "null" },
+                { name: "text", type: "string", default: "null" },
+                { name: "subText", type: "string", default: "null" },
+                { name: "frames", type: "number[][]", default: "null" },
+                { name: "dotClassName", type: "string", default: "null" },
+                { name: "isPlaying", type: "boolean", default: "true" },
+                { name: "duration", type: "number", default: "100" },
+                { name: "repeatCount", type: "number", default: "-1" },
+                { name: "onComplete", type: "function", default: "null" },
+                { name: "outerSize", type: "string", default: "null" },
+                { name: "childSize", type: "string", default: "null" },
+                { name: "className", type: "string", default: "null" },
+                { name: "wrapperClassName", type: "string", default: "null" },
+                { name: "children", type: "React.ReactNode", default: "null" }
+            ],
+            "loaderVariants": [
+                { name: "size", type: "default | sm | md | lg", default: "default" }
+            ]
+        },
+        desc: "A comprehensive loader component with 21+ variants including spinners, animations, and overlay states. Supports customizable sizes, colors, text overlays, and advanced features like frame-based animations and delayed loading states.",
+        status: "Listed",
+        lastUpdated: "2024-11-29T00:00:00Z"
+    },
+    {
+        name: "IconX",
+        value: "icon-x",
+        importPath: "~/components/catalyst-ui/x/icon-x",
+        multiImport: null,
+        path: "/components/catalyst-ui/x/icon-x.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/x/icon-x.tsx",
+        basicusage: `
+<IconX icon="Burger" />
+
+<IconX 
+  icon="Heart" 
+  opened={true} 
+  size="md" 
+  color="currentColor" 
+  className=""
+/>`,
+        usage: `
+<IconX 
+  icon="Burger" // Burger | Close | Plus | Chevron | Arrow | Check | Dots | Play | Heart
+  opened={false} // boolean
+  size="md" // sm | md | lg | xl
+  color="currentColor" // string
+  className="" // string
+/>`,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "icons", "animated", "motion", "framer", "interactive", "toggle"],
+        features: ["Animated Icons", "TypeScript", "Multiple Icon Types", "Size Variants", "Color Customization", "State Management"],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {
+            "IconX": [
+                { name: "icon", type: "Burger | Close | Plus | Chevron | Arrow | Check | Dots | Play | Heart", default: "Burger" },
+                { name: "opened", type: "boolean", default: "false" },
+                { name: "size", type: "sm | md | lg | xl", default: "md" },
+                { name: "color", type: "string", default: "currentColor" },
+                { name: "className", type: "string", default: "null" }
+            ],
+            "Burger": [
+                { name: "opened", type: "boolean", default: "false" },
+                { name: "size", type: "sm | md | lg | xl", default: "md" },
+                { name: "color", type: "string", default: "currentColor" },
+                { name: "className", type: "string", default: "null" }
+            ],
+            "Burger2": [
+                { name: "opened", type: "boolean", default: "false" },
+                { name: "onToggle", type: "(opened: boolean) => void", default: "null" },
+                { name: "size", type: "sm | md | lg | xl", default: "md" },
+                { name: "color", type: "string", default: "currentColor" },
+                { name: "className", type: "string", default: "null" },
+                { name: "aria-label", type: "string", default: "null" },
+                { name: "disabled", type: "boolean", default: "false" }
+            ],
+            "Close": [
+                { name: "opened", type: "boolean", default: "false" },
+                { name: "size", type: "sm | md | lg | xl", default: "md" },
+                { name: "color", type: "string", default: "currentColor" },
+                { name: "className", type: "string", default: "null" }
+            ],
+            "Plus": [
+                { name: "opened", type: "boolean", default: "false" },
+                { name: "size", type: "sm | md | lg | xl", default: "md" },
+                { name: "color", type: "string", default: "currentColor" },
+                { name: "className", type: "string", default: "null" }
+            ],
+            "Chevron": [
+                { name: "opened", type: "boolean", default: "false" },
+                { name: "size", type: "sm | md | lg | xl", default: "md" },
+                { name: "color", type: "string", default: "currentColor" },
+                { name: "className", type: "string", default: "null" }
+            ],
+            "Arrow": [
+                { name: "opened", type: "boolean", default: "false" },
+                { name: "size", type: "sm | md | lg | xl", default: "md" },
+                { name: "color", type: "string", default: "currentColor" },
+                { name: "className", type: "string", default: "null" }
+            ],
+            "Check": [
+                { name: "opened", type: "boolean", default: "false" },
+                { name: "size", type: "sm | md | lg | xl", default: "md" },
+                { name: "color", type: "string", default: "currentColor" },
+                { name: "className", type: "string", default: "null" }
+            ],
+            "Dots": [
+                { name: "opened", type: "boolean", default: "false" },
+                { name: "size", type: "sm | md | lg | xl", default: "md" },
+                { name: "color", type: "string", default: "currentColor" },
+                { name: "className", type: "string", default: "null" }
+            ],
+            "Play": [
+                { name: "opened", type: "boolean", default: "false" },
+                { name: "size", type: "sm | md | lg | xl", default: "md" },
+                { name: "color", type: "string", default: "currentColor" },
+                { name: "className", type: "string", default: "null" }
+            ],
+            "Heart": [
+                { name: "opened", type: "boolean", default: "false" },
+                { name: "size", type: "sm | md | lg | xl", default: "md" },
+                { name: "color", type: "string", default: "currentColor" },
+                { name: "className", type: "string", default: "null" }
+            ]
+        },
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "AccordianX",
+        value: "accordian-x",
+        importPath: "~/components/catalyst-ui/x/accordian-x",
+        multiImport: null,
+        path: "/components/catalyst-ui/x/accordian-x.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/x/accordian-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "AlertX",
+        value: "alert-x",
+        importPath: "~/components/catalyst-ui/x/alert-x",
+        path: "/components/catalyst-ui/x/alert-x.tsx",
+        usagePath: "/components/catalyst-ui/x/alert-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "AvatarX",
+        value: "avatar-x",
+        importPath: "~/components/catalyst-ui/x/avatar-x",
+        path: "/components/catalyst-ui/x/avatar-x.tsx",
+        usagePath: "/components/catalyst-ui/x/avatar-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "BadgeX",
+        value: "badge-x",
+        importPath: "~/components/catalyst-ui/x/badge-x",
+        path: "/components/catalyst-ui/x/badge-x.tsx",
+        usagePath: "/components/catalyst-ui/x/badge-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "ButtonGroupX",
+        value: "button-group-x",
+        importPath: "~/components/catalyst-ui/x/button-group-x",
+        path: "/components/catalyst-ui/x/button-group-x.tsx",
+        usagePath: "/components/catalyst-ui/x/button-group-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "CalendarX",
+        value: "calendar-x",
+        importPath: "~/components/catalyst-ui/x/calendar-x",
+        path: "/components/catalyst-ui/x/calendar-x.tsx",
+        usagePath: "/components/catalyst-ui/x/calendar-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "CardX",
+        value: "card-x",
+        importPath: "~/components/catalyst-ui/x/card-x",
+        path: "/components/catalyst-ui/x/card-x.tsx",
+        usagePath: "/components/catalyst-ui/x/card-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "CheckboxX",
+        value: "checkbox-x",
+        importPath: "~/components/catalyst-ui/x/checkbox-x",
+        path: "/components/catalyst-ui/x/checkbox-x.tsx",
+        usagePath: "/components/catalyst-ui/x/checkbox-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "CollapsibleX",
+        value: "collapsible-x",
+        importPath: "~/components/catalyst-ui/x/collapsible-x",
+        path: "/components/catalyst-ui/x/collapsible-x.tsx",
+        usagePath: "/components/catalyst-ui/x/collapsible-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "ComboboxX",
+        value: "combobox-x",
+        importPath: "~/components/catalyst-ui/x/combobox-x",
+        path: "/components/catalyst-ui/x/combobox-x.tsx",
+        usagePath: "/components/catalyst-ui/x/combobox-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "data-tableX",
+        value: "data-table-x",
+        importPath: "~/components/catalyst-ui/x/data-table-x",
+        path: "/components/catalyst-ui/x/data-table-x.tsx",
+        usagePath: "/components/catalyst-ui/x/data-table-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "date-pickerX",
+        value: "date-picker-x",
+        importPath: "~/components/catalyst-ui/x/date-picker-x",
+        path: "/components/catalyst-ui/x/date-picker-x.tsx",
+        usagePath: "/components/catalyst-ui/x/date-picker-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "dialogX",
+        value: "dialog-x",
+        importPath: "~/components/catalyst-ui/x/dialog-x",
+        path: "/components/catalyst-ui/x/dialog-x.tsx",
+        usagePath: "/components/catalyst-ui/x/dialog-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "dropdown-menuX",
+        value: "dropdown-menu-x",
+        importPath: "~/components/catalyst-ui/x/dropdown-menu-x",
+        path: "/components/catalyst-ui/x/dropdown-menu-x.tsx",
+        usagePath: "/components/catalyst-ui/x/dropdown-menu-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "input-maskX",
+        value: "input-mask-x",
+        importPath: "~/components/catalyst-ui/x/input-mask-x",
+        path: "/components/catalyst-ui/x/input-mask-x.tsx",
+        usagePath: "/components/catalyst-ui/x/input-mask-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "input-otpX",
+        value: "input-otp-x",
+        importPath: "~/components/catalyst-ui/x/input-otp-x",
+        path: "/components/catalyst-ui/x/input-otp-x.tsx",
+        usagePath: "/components/catalyst-ui/x/input-otp-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "paginationX",
+        value: "pagination-x",
+        importPath: "~/components/catalyst-ui/x/pagination-x",
+        path: "/components/catalyst-ui/x/pagination-x.tsx",
+        usagePath: "/components/catalyst-ui/x/pagination-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "popoverX",
+        value: "popover-x",
+        importPath: "~/components/catalyst-ui/x/popover-x",
+        path: "/components/catalyst-ui/x/popover-x.tsx",
+        usagePath: "/components/catalyst-ui/x/popover-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "radio-groupX",
+        value: "radio-group-x",
+        importPath: "~/components/catalyst-ui/x/radio-group-x",
+        path: "/components/catalyst-ui/x/radio-group-x.tsx",
+        usagePath: "/components/catalyst-ui/x/radio-group-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "selectX",
+        value: "select-x",
+        importPath: "~/components/catalyst-ui/x/select-x",
+        path: "/components/catalyst-ui/x/select-x.tsx",
+        usagePath: "/components/catalyst-ui/x/select-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "sheetX",
+        value: "rasheet-x",
+        importPath: "~/components/catalyst-ui/x/sheet-x",
+        path: "/components/catalyst-ui/x/sheet-x.tsx",
+        usagePath: "/components/catalyst-ui/x/sheet-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "switchX",
+        value: "switch-x",
+        importPath: "~/components/catalyst-ui/x/switch-x",
+        path: "/components/catalyst-ui/x/switch-x.tsx",
+        usagePath: "/components/catalyst-ui/x/switch-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "tableX",
+        value: "table-x",
+        importPath: "~/components/catalyst-ui/x/table-x",
+        path: "/components/catalyst-ui/x/table-x.tsx",
+        usagePath: "/components/catalyst-ui/x/table-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "tabsX",
+        value: "tabs-x",
+        importPath: "~/components/catalyst-ui/x/tabs-x",
+        path: "/components/catalyst-ui/x/tabs-x.tsx",
+        usagePath: "/components/catalyst-ui/x/tabs-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "textareaX",
+        value: "textarea-x",
+        importPath: "~/components/catalyst-ui/x/textarea-x",
+        path: "/components/catalyst-ui/x/textarea-x.tsx",
+        usagePath: "/components/catalyst-ui/x/textarea-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "tooltipX",
+        value: "tooltip-x",
+        importPath: "~/components/catalyst-ui/x/tooltip-x",
+        path: "/components/catalyst-ui/x/tooltip-x.tsx",
+        usagePath: "/components/catalyst-ui/x/tooltip-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "HoverCardX",
+        value: "hover-card-x",
+        importPath: "~/components/catalyst-ui/x/hover-card-x",
+        path: "/components/catalyst-ui/x/hover-card-x.tsx",
+        usagePath: "/components/catalyst-ui/x/hover-card-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    },
+    {
+        name: "TrackerX",
+        value: "tooltip-x",
+        importPath: "~/components/catalyst-ui/x/tracker-x",
+        path: "/components/catalyst-ui/x/tracker-x.tsx",
+        usagePath: "/components/catalyst-ui/x/tracker-x.tsx",
+        basicusage: ``,
+        usage: ``,
+        premium: false,
+        category: "X",
+        tags: ["ui", "components", "animated", "motion", "interactive",],
+        features: [],
+        dependencies: ["react", "motion/react", "class-variance-authority", "~/components/catalyst-ui"],
+        props: {},
+        desc: "A collection of animated icon components built with Framer Motion that can toggle between states. Includes 10 different icon types with smooth animations.",
+        status: "Listed",
+        lastUpdated: "2024-12-15T10:30:00Z"
+    }
+];