@catalystsoftware/ui 1.0.5 → 1.0.6

package/data/buttons-data.tsx

@@ -1,2327 +0,0 @@
-export const buttonsData = [
-    {
-        name: "Button X",
-        value: "buttonx",
-        importPath: "~/components/catalyst-ui",
-        multiImport: "ButtonX, buttonXVariants",
-        path: "/components/catalyst-ui/buttons/buttonX.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/buttons/buttonX.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: true,
-        category: "Buttons",
-        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: "Bg Animate Button",
-        value: "bg-animate-button",
-        importPath: "~/components/catalyst-ui",
-        multiImport: "BgAnimateButton",
-        path: "/components/catalyst-ui/expandables/bg-animate-button.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/expandables/bg-animate-button.tsx",
-        basicusage: `
-<BgAnimateButton>
-  Button
-</BgAnimateButton>
-
-<BgAnimateButton
-  variant="primary"
-  size="default"
-  showBackground={false}
-  rounded="full"
-  shadow="soft"
-  gradient="forest"
-  animation="spin"
-  className=""
-  asChild={false}
->
-  Button
-</BgAnimateButton>`,
-        usage: `
-<BgAnimateButton
-  variant="primary"
-  size="default"
-  showBackground={false}
-  rounded="full"
-  shadow="soft"
-  gradient="forest"
-  animation="spin"
-  className=""
-  asChild={false}
->
-  Button
-</BgAnimateButton>`,
-        premium: true,
-        category: "Expandables",
-        tags: ["ui", "components", "button", "animated", "gradient", "interactive"],
-        features: ["Responsive", "TypeScript", "Accessible", "Animations", "Gradients", "Customizable"],
-        dependencies: ["react", "@radix-ui/react-slot", "class-variance-authority"],
-        props: {
-            "BgAnimateButton": [
-                { name: "variant", type: "primary | success | secondary | destructive | ghost", default: "'primary'" },
-                { name: "size", type: "sm | default | lg", default: "'default'" },
-                { name: "showBackground", type: "boolean", default: "false" },
-                { name: "rounded", type: "full | xl | 2xl | 3xl | sm | xs | base", default: "'full'" },
-                { name: "shadow", type: "flat | soft | base | deep | deeper", default: "'soft'" },
-                { name: "gradient", type: "sunrise | ocean | candy | default | forest | sunset | nebula", default: "null" },
-                { name: "animation", type: "spin | pulse | spin-slow | spin-fast", default: "null" },
-                { name: "className", type: "string", default: "null" },
-                { name: "asChild", type: "boolean", default: "false" },
-            ],
-        },
-        desc: null,
-        status: "Listed",
-        lastUpdated: "2024-12-29T15:30:00Z"
-    },
-    {
-        name: "Rating Button 1",
-        value: "rating-button-1",
-        importPath: "~/components/catalyst-ui/buttons/rating-button-1",
-        multiImport: "Rating1, RatingButton1",
-        basicusage: `
-<Rating1 defaultValue={3}>
-  {Array.from({ length: 5 }).map((_, index) => (
-    <RatingButton1 key={index} />
-  ))}
-</Rating1>
-
-<Rating1 
-	defaultValue={0}
-	value={3}
-	onChange={(event, value) => console.log(value)}
-	onValueChange={(value) => console.log(value)}
-	readOnly={false}
-	className=""
->
-  {Array.from({ length: 5 }).map((_, index) => (
-    <RatingButton1 
-		key={index}
-		index={index}
-		size={20}
-		icon={<StarIcon />}
-		className=""
-	/>
-  ))}
-</Rating1>`,
-        path: "/components/catalyst-ui/buttons/rating-button-1.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/buttons/rating-button-1.tsx",
-        usage: null,
-        premium: true,
-        category: "Buttons",
-        tags: ["buttons", "rating", "stars", "interactive", "input", "feedback"],
-        features: ["Responsive", "TypeScript", "Accessible", "Keyboard Navigation", "Custom Icons", "Read-only Mode", "Hover Effects"],
-        dependencies: ["lucide-react", "react", "@radix-ui/react-use-controllable-state"],
-        props: {
-            "Rating1": [
-                { name: "defaultValue", type: "number", default: "0" },
-                { name: "value", type: "number", default: "null" },
-                { name: "onChange", type: "(event, value: number) => void", default: "null" },
-                { name: "onValueChange", type: "(value: number) => void", default: "null" },
-                { name: "readOnly", type: "boolean", default: "false" },
-                { name: "className", type: "string", default: "null" },
-                { name: "children", type: "ReactNode", default: "null" },
-            ],
-            "RatingButton1": [
-                { name: "index", type: "number", default: "null" },
-                { name: "size", type: "number", default: "20" },
-                { name: "icon", type: "ReactElement<LucideProps>", default: "<StarIcon />" },
-                { name: "className", type: "string", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/theme-toggle-button.tsx:6
-        name: "Theme Toggle Button",
-        value: "theme-toggle-button",
-        importPath: "~/components/catalyst-ui/buttons/theme-toggle-button",
-        multiImport: "ThemeToggleButton, useThemeTransition",
-        basicusage: `
-<ThemeToggleButton theme="light" onClick={() => {}} />
-
-<ThemeToggleButton 
-	theme="light"
-	showLabel={false}
-	variant="circle"
-	start="center"
-	url=""
-	className=""
-	onClick={() => {}}
-/>`,
-        path: "/components/catalyst-ui/buttons/theme-toggle-button.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/buttons/theme-toggle-button.tsx",
-        usage: null,
-        premium: true,
-        category: "Buttons",
-        tags: ["buttons", "theme", "toggle", "dark mode", "animated", "transition"],
-        features: ["Responsive", "TypeScript", "Accessible", "Animated", "View Transitions API", "Multiple Variants", "Custom Positions"],
-        dependencies: ["lucide-react", "react"],
-        props: {
-            "ThemeToggleButton": [
-                { name: "theme", type: "light | dark", default: "light" },
-                { name: "showLabel", type: "boolean", default: "false" },
-                { name: "variant", type: "circle | circle-blur | gif | polygon", default: "circle" },
-                { name: "start", type: "center | top-left | top-right | bottom-left | bottom-right", default: "center" },
-                { name: "url", type: "string", default: "null" },
-                { name: "className", type: "string", default: "null" },
-                { name: "onClick", type: "() => void", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/theme-switcher.tsx:6
-        name: "Theme Switcher",
-        value: "theme-switcher",
-        importPath: "~/components/catalyst-ui/buttons/theme-switcher",
-        multiImport: null,
-        basicusage: `
-<ThemeSwitcher />
-
-<ThemeSwitcher 
-	value="system"
-	onChange={(theme) => console.log(theme)}
-	defaultValue="system"
-	className=""
-/>`,
-        path: "/components/catalyst-ui/buttons/theme-switcher.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/buttons/theme-switcher.tsx",
-        usage: null,
-        premium: true,
-        category: "Buttons",
-        tags: ["buttons", "theme", "switcher", "dark mode", "light mode", "toggle"],
-        features: ["Responsive", "TypeScript", "Accessible", "Animated", "Theme Control", "System Theme Support"],
-        dependencies: ["motion/react", "lucide-react", "react", "@radix-ui/react-use-controllable-state"],
-        props: {
-            "ThemeSwitcher": [
-                { name: "value", type: "light | dark | system", default: "null" },
-                { name: "onChange", type: "(theme: light | dark | system) => void", default: "null" },
-                { name: "defaultValue", type: "light | dark | system", default: "system" },
-                { name: "className", type: "string", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/text-reveal-button.tsx:6
-        name: "Text Reveal Button",
-        value: "text-reveal-button",
-        importPath: "~/components/catalyst-ui/buttons/text-reveal-button",
-        multiImport: null,
-        basicusage: `
-<TextRevealButton text="HOVER ME" />
-
-<TextRevealButton 
-	text="shadcn.io"
-	revealColor="#37FF8B"
-	strokeColor="rgba(100, 100, 100, 0.7)"
-	className=""
-	style={{}}
-/>`,
-        path: "/components/catalyst-ui/buttons/text-reveal-button.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/buttons/text-reveal-button.tsx",
-        usage: null,
-        premium: true,
-        category: "Buttons",
-        tags: ["buttons", "animated", "text", "reveal", "hover", "effect"],
-        features: ["Responsive", "TypeScript", "Accessible", "Animated", "Text Reveal Effect", "Customizable Colors"],
-        dependencies: ["react"],
-        props: {
-            "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" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/ripple-button.tsx:6
-        name: "Ripple Button",
-        value: "ripple-button",
-        importPath: "~/components/catalyst-ui/buttons/ripple-button",
-        multiImport: null,
-        basicusage: `
-<RippleButton>
-	Click me
-</RippleButton>
-
-<RippleButton 
-	variant="default"
-	size="default"
-	scale={10}
-	transition={{ duration: 0.6, ease: 'easeOut' }}
-	rippleClassName=""
-	className=""
-	onClick={(e) => console.log('clicked')}
->
-	Click me
-</RippleButton>`,
-        path: "/components/catalyst-ui/buttons/ripple-button.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/buttons/ripple-button.tsx",
-        usage: null,
-        premium: true,
-        category: "Buttons",
-        tags: ["buttons", "animated", "ripple", "effect", "interactive"],
-        features: ["Responsive", "TypeScript", "Accessible", "Animated", "Ripple Effect", "Customizable"],
-        dependencies: ["motion/react", "react", "class-variance-authority"],
-        props: {
-            "RippleButton": [
-                { 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' }" },
-                { name: "rippleClassName", type: "string", default: "null" },
-                { name: "className", type: "string", default: "null" },
-                { name: "onClick", type: "(event: React.MouseEvent<HTMLButtonElement>) => void", default: "null" },
-                { name: "children", type: "ReactNode", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/rating-button.tsx:6
-        name: "Rating",
-        value: "rating",
-        importPath: "~/components/catalyst-ui/buttons/rating-button",
-        multiImport: "Rate, RatingButton",
-        basicusage: `
-<Rate defaultValue={3}>
-  {Array.from({ length: 5 }).map((_, index) => (
-    <RatingButton key={index} />
-  ))}
-</Rate>
-
-<Rate 
-	defaultValue={0}
-	value={3}
-	onChange={(event, value) => console.log(value)}
-	onValueChange={(value) => console.log(value)}
-	readOnly={false}
-	className=""
->
-  {Array.from({ length: 5 }).map((_, index) => (
-    <RatingButton 
-		key={index}
-		index={index}
-		size={20}
-		icon={<StarIcon />}
-		className=""
-	/>
-  ))}
-</Rate>`,
-        path: "/components/catalyst-ui/buttons/rating-button.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/buttons/rating-button.tsx",
-        usage: null,
-        premium: true,
-        category: "Buttons",
-        tags: ["buttons", "rating", "stars", "interactive", "input"],
-        features: ["Responsive", "TypeScript", "Accessible", "Keyboard Navigation", "Custom Icons", "Read-only Mode"],
-        dependencies: ["lucide-react", "react", "@radix-ui/react-use-controllable-state"],
-        props: {
-            "Rate": [
-                { name: "defaultValue", type: "number", default: "0" },
-                { name: "value", type: "number", default: "null" },
-                { name: "onChange", type: "(event, value: number) => void", default: "null" },
-                { name: "onValueChange", type: "(value: number) => void", default: "null" },
-                { name: "readOnly", type: "boolean", default: "false" },
-                { name: "className", type: "string", default: "null" },
-                { name: "children", type: "ReactNode", default: "null" },
-            ],
-            "RatingButton": [
-                { name: "index", type: "number", default: "null" },
-                { name: "size", type: "number", default: "20" },
-                { name: "icon", type: "ReactElement<LucideProps>", default: "<StarIcon />" },
-                { name: "className", type: "string", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/liquid-button.tsx:6
-        name: "Liquid Button",
-        value: "liquid-button",
-        importPath: "~/components/catalyst-ui/buttons/liquid-button",
-        multiImport: null,
-        basicusage: `
-<LiquidButton>
-	Click me
-</LiquidButton>
-
-<LiquidButton 
-	variant="default"
-	size="default"
-	className=""
->
-	Click me
-</LiquidButton>`,
-        path: "/components/catalyst-ui/buttons/liquid-button.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/buttons/liquid-button.tsx",
-        usage: null,
-        premium: true,
-        category: "Buttons",
-        tags: ["buttons", "animated", "hover", "liquid", "fill"],
-        features: ["Responsive", "TypeScript", "Accessible", "Animated", "Liquid Fill Effect", "Customizable"],
-        dependencies: ["motion/react", "react", "class-variance-authority"],
-        props: {
-            "LiquidButton": [
-                { name: "variant", type: "default | outline | secondary", default: "default" },
-                { name: "size", type: "default | sm | lg | icon", default: "default" },
-                { name: "className", type: "string", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/input-button.tsx:6
-        name: "Input Button",
-        value: "input-button",
-        importPath: "~/components/catalyst-ui/buttons/input-button",
-        multiImport: "InputButton, InputButtonProvider, InputButtonAction, InputButtonSubmit, InputButtonInput",
-        basicusage: `
-  <InputButtonProvider>
-    <InputButton>
-      <InputButtonAction>Click me</InputButtonAction>
-      <InputButtonInput placeholder="Enter text" />
-      <InputButtonSubmit>Submit</InputButtonSubmit>
-    </InputButton>
-  </InputButtonProvider>
-  
-  <InputButtonProvider 
-    showInput={false}
-    setShowInput={() => {}}
-    transition={{ type: 'spring', stiffness: 300, damping: 20 }}
-    id=""
-    className=""
-  >
-    <InputButton className="">
-      <InputButtonAction className="">Click me</InputButtonAction>
-      <InputButtonInput 
-      type="text"
-      placeholder="Enter text"
-      className=""
-    />
-      <InputButtonSubmit 
-      icon={ArrowRight}
-      className=""
-    >
-      Submit
-    </InputButtonSubmit>
-    </InputButton>
-  </InputButtonProvider>`,
-        path: "/components/catalyst-ui/buttons/input-button.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/buttons/input-button.tsx",
-        usage: null,
-        premium: true,
-        category: "Buttons",
-        tags: ["buttons", "input", "animated", "expandable", "form"],
-        features: ["Responsive", "TypeScript", "Accessible", "Animated", "Expandable", "Customizable"],
-        dependencies: ["motion/react", "lucide-react", "react"],
-        props: {
-            "InputButtonProvider": [
-                { name: "showInput", type: "boolean", default: "null" },
-                { name: "setShowInput", type: "React.Dispatch<React.SetStateAction<boolean>>", default: "null" },
-                { name: "transition", type: "Transition", default: "{ type: 'spring', stiffness: 300, damping: 20 }" },
-                { name: "id", type: "string", default: "null" },
-                { name: "className", type: "string", default: "null" },
-            ],
-            "InputButton": [
-                { name: "className", type: "string", default: "null" },
-            ],
-            "InputButtonAction": [
-                { name: "className", type: "string", default: "null" },
-            ],
-            "InputButtonSubmit": [
-                { name: "icon", type: "React.ElementType", default: "ArrowRight" },
-                { name: "className", type: "string", default: "null" },
-                { name: "children", type: "ReactNode", default: "null" },
-            ],
-            "InputButtonInput": [
-                { name: "type", type: "string", default: "text" },
-                { name: "placeholder", type: "string", default: "null" },
-                { name: "className", type: "string", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/copy-button.tsx:6
-        name: "Copy Button",
-        value: "copy-button",
-        importPath: "~/components/catalyst-ui/buttons/copy-button",
-        multiImport: null,
-        basicusage: `
-<CopyButton content="Text to copy" />
-
-<CopyButton 
-	content="Text to copy"
-	variant="default"
-	size="default"
-	delay={3000}
-	onCopy={(content) => console.log(content)}
-	isCopied={false}
-	onCopyChange={(isCopied) => console.log(isCopied)}
-	className=""
-/>`,
-        path: "/components/catalyst-ui/buttons/copy-button.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/buttons/copy-button.tsx",
-        usage: null,
-        premium: true,
-        category: "Buttons",
-        tags: ["buttons", "copy", "clipboard", "animated", "icon"],
-        features: ["Responsive", "TypeScript", "Accessible", "Animated", "Clipboard API", "Feedback"],
-        dependencies: ["motion/react", "lucide-react", "react", "class-variance-authority"],
-        props: {
-            "CopyButton": [
-                { name: "content", type: "string", default: "null" },
-                { name: "variant", type: "default | muted | destructive | outline | secondary | ghost", default: "default" },
-                { name: "size", type: "default | sm | md | lg", default: "default" },
-                { name: "delay", type: "number", default: "3000" },
-                { name: "onCopy", type: "(content: string) => void", default: "null" },
-                { name: "isCopied", type: "boolean", default: "null" },
-                { name: "onCopyChange", type: "(isCopied: boolean) => void", default: "null" },
-                { name: "className", type: "string", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/flip-button.tsx:6
-        name: "Flip Button",
-        value: "flip-button",
-        importPath: "~/components/catalyst-ui/buttons/flip-button",
-        multiImport: null,
-        basicusage: `
-<FlipButton
-	frontText="Hover Me"
-	backText="Clicked!"
-/>
-
-<FlipButton
-	frontText="Hover Me"
-	backText="Clicked!"
-	from="top"
-	transition={{ type: 'spring', stiffness: 280, damping: 20 }}
-	className=""
-	frontClassName=""
-	backClassName=""
-/>`,
-        path: "/components/catalyst-ui/buttons/flip-button.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/buttons/flip-button.tsx",
-        usage: null,
-        premium: true,
-        category: "Buttons",
-        tags: ["buttons", "animated", "flip", "hover", "3d"],
-        features: ["Responsive", "TypeScript", "Accessible", "Animated", "3D Transform", "Customizable"],
-        dependencies: ["motion/react", "react"],
-        props: {
-            "FlipButton": [
-                { name: "frontText", type: "string", default: "null" },
-                { name: "backText", type: "string", default: "null" },
-                { name: "from", type: "top | bottom | left | right", default: "top" },
-                { 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" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/shimmer-button.tsx:6
-        name: "Shimmer Button",
-        value: "shimmer-button",
-        importPath: "~/components/catalyst-ui/buttons/shimmer-button",
-        multiImport: null,
-        basicusage: `
-<ShimmerButton>
-  Button Text
-</ShimmerButton>
-
-<ShimmerButton 
-  shimmerColor="#ffffff"
-  shimmerSize="0.05em"
-  borderRadius="100px"
-  shimmerDuration="3s"
-  background="rgba(0, 0, 0, 1)"
-  className=""
->
-  Custom Button
-</ShimmerButton>`,
-        path: "/components/catalyst-ui/buttons/shimmer-button.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/buttons/shimmer-button.tsx",
-        usage: null,
-        premium: true,
-        category: "Buttons",
-        tags: ["button", "shimmer", "animation", "effects"],
-        features: ["TypeScript", "Animated", "Customizable"],
-        dependencies: ["react"],
-        props: {
-            "ShimmerButton": [
-                { name: "shimmerColor", type: "string", default: "#ffffff" },
-                { name: "shimmerSize", type: "string", default: "0.05em" },
-                { name: "borderRadius", type: "string", default: "100px" },
-                { name: "shimmerDuration", type: "string", default: "3s" },
-                { name: "background", type: "string", default: "rgba(0, 0, 0, 1)" },
-                { name: "className", type: "string", default: "null" },
-                { name: "children", type: "React.ReactNode", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/animated-theme-toggler.tsx:6
-        name: "Animated Theme Toggler",
-        value: "animated-theme-toggler",
-        importPath: "~/components/catalyst-ui/buttons/animated-theme-toggler",
-        multiImport: null,
-        basicusage: `
-<AnimatedThemeToggler />
-
-<AnimatedThemeToggler 
-  duration={400}
-  className="p-2 rounded-lg"
-  onClick={() => console.log('Theme toggled')}
-/>`,
-        path: "/components/catalyst-ui/buttons/animated-theme-toggler.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/buttons/animated-theme-toggler.tsx",
-        usage: null,
-        premium: true,
-        category: "Buttons",
-        tags: ["theme", "animation", "toggle", "dark-mode"],
-        features: ["View Transitions", "Smooth Animation", "Accessible", "TypeScript"],
-        dependencies: ["lucide-react", "react", "react-dom"],
-        props: {
-            "AnimatedThemeToggler": [
-                { name: "className", type: "string", default: "null" },
-                { name: "duration", type: "number", default: "400" },
-                { name: "onClick", type: "React.MouseEventHandler", default: "null" }
-            ]
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/attract-button.tsx:6
-        name: "Attract Button",
-        value: "attract-button",
-        importPath: "~/components/catalyst-ui/buttons/attract-button",
-        multiImport: null,
-        basicusage: `
-<AttractButton>
-  Attract Me
-</AttractButton>
-
-<AttractButton 
-  variant="primary"
-  size="lg"
-  particleCount={20}
-  particleColors={['#ff6b6b', '#4ecdc4']}
-  attractionStrength={0.15}
-  onClick={() => console.log('Clicked')}
-  disabled={false}
-  className=""
->
-  Custom Attraction
-</AttractButton>`,
-        path: "/components/catalyst-ui/buttons/attract-button.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/buttons/attract-button.tsx",
-        usage: null,
-        premium: true,
-        category: "Buttons",
-        tags: ["ui", "components", "effects", "animation", "button", "particles", "attract", "interactive", "physics"],
-        features: ["Responsive", "TypeScript", "Customizable", "Animated", "Interactive", "Particle System", "Physics", "Magnetic Effect"],
-        dependencies: ["react"],
-        props: {
-            "AttractButton": [
-                { name: "children", type: "React.ReactNode", 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: "particleCount", type: "number", default: "15" },
-                { name: "particleColors", type: "string[]", default: "['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57']" },
-                { name: "attractionStrength", type: "number", default: "0.1" },
-                { name: "onClick", type: "(event: React.MouseEvent<HTMLButtonElement>) => void", default: "null" },
-                { name: "disabled", type: "boolean", default: "false" }
-            ]
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/slide-button.tsx:6
-        name: "Slide Button",
-        value: "slide-button",
-        importPath: "~/components/catalyst-ui/buttons/slide-button",
-        multiImport: null,
-        basicusage: `<SlideButton 
-    text="Browse Components" 
-    to="/"
-/>
-
-<SlideButton 
-    variant="default"
-    size="default"
-    text="Browse Components"
-    hoverText="View All"
-    to="/"
-    prefetch="intent"
-    className=""
-/>`,
-        path: "/components/catalyst-ui/buttons/slide-button.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/buttons/slide-button.tsx",
-        usage: null,
-        premium: true,
-        category: "Buttons",
-        tags: ["ui", "components", "interactive", "button", "link", "animation", "text"],
-        features: ["Responsive", "TypeScript", "Accessible", "Animated", "Dark Mode"],
-        dependencies: ["react", "class-variance-authority", "@remix-run/react"],
-        props: {
-            "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: "intent | render | none", default: "intent" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/command-button.tsx:6
-        name: "Command Button",
-        value: "command-button",
-        importPath: "~/components/catalyst-ui/buttons/command-button",
-        multiImport: null,
-        basicusage: `<CommandButton>
-  CMD + K
-</CommandButton>
-
-<CommandButton 
-  variant="default"
-  size="default"
-  className=""
->
-  CMD + K
-</CommandButton>`,
-        path: "/components/catalyst-ui/buttons/command-button.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/buttons/command-button.tsx",
-        usage: null,
-        premium: true,
-        category: "Buttons",
-        tags: ["ui", "components", "interactive", "button", "keyboard", "command"],
-        features: ["Responsive", "TypeScript", "Accessible", "Animated", "Dark Mode"],
-        dependencies: ["lucide-react", "react", "class-variance-authority"],
-        props: {
-            "CommandButton": [
-                { name: "className", type: "string", default: "null" },
-                { name: "variant", type: "default | primary | secondary", default: "default" },
-                { name: "size", type: "sm | default | lg", default: "default" },
-                { name: "children", type: "React.ReactNode", default: "CMD + K" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/hold-button.tsx:6
-        name: "Hold Button",
-        value: "hold-button",
-        importPath: "~/components/catalyst-ui/buttons/hold-button",
-        multiImport: null,
-        basicusage: `
-<HoldButton>
-  Hold Me
-</HoldButton>
-
-<HoldButton 
-  variant="primary"
-  size="lg"
-  duration={3000}
-  onHoldComplete={() => console.log('Hold completed')}
-  onProgress={(progress) => console.log(progress)}
-  disabled={false}
-  className=""
->
-  Custom Hold
-</HoldButton>`,
-        path: "/components/catalyst-ui/buttons/hold-button.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/buttons/hold-button.tsx",
-        usage: null,
-        premium: true,
-        category: "Buttons",
-        tags: ["ui", "components", "effects", "interactive", "button", "progress", "gesture"],
-        features: ["Responsive", "TypeScript", "Customizable", "Progress Tracking", "Touch Support", "Accessible"],
-        dependencies: ["react"],
-        props: {
-            "HoldButton": [
-                { name: "children", type: "React.ReactNode", 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: "duration", type: "number", default: "2000" },
-                { name: "onHoldComplete", type: "() => void", default: "null" },
-                { name: "onProgress", type: "(progress: number) => void", default: "null" },
-                { name: "disabled", type: "boolean", default: "false" }
-            ]
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/particle-button.tsx:6
-        name: "Particle Button",
-        value: "particle-button",
-        importPath: "~/components/catalyst-ui/buttons/particle-button",
-        multiImport: null,
-        basicusage: `
-<ParticleButton>
-  Click Me
-</ParticleButton>
-
-<ParticleButton 
-  variant="primary"
-  size="lg"
-  particleCount={15}
-  particleColors={['#ff6b6b', '#4ecdc4']}
-  onClick={() => console.log('Clicked')}
-  disabled={false}
-  className=""
->
-  Custom Particles
-</ParticleButton>`,
-        path: "/components/catalyst-ui/buttons/particle-button.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/buttons/particle-button.tsx",
-        usage: null,
-        premium: true,
-        category: "Buttons",
-        tags: ["ui", "components", "effects", "animation", "button", "particles", "interactive"],
-        features: ["Responsive", "TypeScript", "Customizable", "Animated", "Interactive", "Particle System"],
-        dependencies: ["react"],
-        props: {
-            "ParticleButton": [
-                { name: "children", type: "React.ReactNode", 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: "particleCount", type: "number", default: "10" },
-                { name: "particleColors", type: "string[]", default: "['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57']" },
-                { name: "onClick", type: "(event: React.MouseEvent<HTMLButtonElement>) => void", default: "null" },
-                { name: "disabled", type: "boolean", default: "false" }
-            ]
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/social-button.tsx:6
-        name: "Social Button",
-        value: "social-button",
-        importPath: "~/components/catalyst-ui/buttons/social-button",
-        multiImport: null,
-        basicusage: `
-<SocialButton />
-
-<SocialButton 
-  shareButtons={[
-    { icon: Twitter, label: "Share on Twitter", onClick: () => {} },
-    { icon: Instagram, label: "Share on Instagram", onClick: () => {} },
-    { icon: Linkedin, label: "Share on LinkedIn", onClick: () => {} },
-    { icon: Link, label: "Copy link", onClick: () => {} }
-  ]}
-  label="Hover me"
-  icon={<Link />}
-  variant="light"
-  className=""
-/>`,
-        path: "/components/catalyst-ui/buttons/social-button.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/buttons/social-button.tsx",
-        usage: null,
-        premium: true,
-        category: "Buttons",
-        tags: ["ui", "components", "interactive", "button", "social", "share", "animation"],
-        features: ["Responsive", "TypeScript", "Accessible", "Customizable", "Animated", "Hover Effect"],
-        dependencies: ["lucide-react", "react"],
-        props: {
-            "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" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/switch-button.tsx:6
-        name: "Switch Button",
-        value: "switch-button",
-        importPath: "~/components/catalyst-ui/buttons/switch-button",
-        multiImport: null,
-        basicusage: `
-<SwitchButton />
-
-<SwitchButton 
-  checked={true}
-  onCheckedChange={(checked) => console.log(checked)}
-  variant="primary"
-  size="md"
-  disabled={false}
-  labels={{ checked: "ON", unchecked: "OFF" }}
-  className=""
-/>`,
-        path: "/components/catalyst-ui/buttons/switch-button.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/buttons/switch-button.tsx",
-        usage: null,
-        premium: true,
-        category: "Buttons",
-        tags: ["ui", "components", "buttons", "toggle", "switch", "interactive", "form"],
-        features: ["Responsive", "TypeScript", "Accessible", "Customizable", "Multiple Variants", "Label Support"],
-        dependencies: ["react"],
-        props: {
-            "SwitchButton": [
-                { name: "checked", type: "boolean", default: "false" },
-                { name: "onCheckedChange", type: "(checked: boolean) => void", 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" }
-            ]
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/button-group.tsx:6
-        name: "Button Group",
-        value: "button-group",
-        importPath: "~/components/catalyst-ui/components/buttons/button-group",
-        multiImport: "ButtonGroup, connectedButtonGroup",
-        basicusage: `
-<ButtonGroup value="option1" onValueChange={(v) => console.log(v)}>
-  <connectedButtonGroup value="option1">Option 1</connectedButtonGroup>
-  <connectedButtonGroup value="option2">Option 2</connectedButtonGroup>
-</ButtonGroup>
-
-<ButtonGroup 
-  value={['option1', 'option2']} 
-  onValueChange={(v) => console.log(v)}
-  multiple={true}
-  size="md"
-  density="default"
-  className=""
->
-  <connectedButtonGroup value="option1" icon={<Icon />}>Option 1</connectedButtonGroup>
-  <connectedButtonGroup value="option2" icon={<Icon />}>Option 2</connectedButtonGroup>
-</ButtonGroup>`,
-        path: "/components/catalyst-ui/components/buttons/button-group.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/components/buttons/button-group.tsx",
-        usage: null,
-        premium: true,
-        category: "Buttons",
-        tags: ["ui", "components", "buttons", "group", "toggle", "material-design"],
-        features: ["Responsive", "TypeScript", "Accessible", "Single Select", "Multi Select", "Icon Support", "Multiple Sizes"],
-        dependencies: ["react", "class-variance-authority"],
-        props: {
-            "ButtonGroup": [
-                { name: "className", type: "string", default: "null" },
-                { name: "size", type: "sm | md | lg", default: "md" },
-                { name: "density", type: "default | compact", default: "default" },
-                { name: "value", type: "string | string[]", default: "undefined" },
-                { name: "onValueChange", type: "(value: string | string[]) => void", default: "undefined" },
-                { name: "multiple", type: "boolean", default: "false" },
-            ],
-            "connectedButtonGroup": [
-                { name: "className", type: "string", default: "null" },
-                { name: "size", type: "sm | md | lg", default: "md" },
-                { name: "icon", type: "React.ReactNode", default: "undefined" },
-                { name: "value", type: "string", default: "undefined" },
-                { name: "selected", type: "boolean", default: "false" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/scroll-to-top.tsx:6
-        name: "Scroll To Top",
-        value: "scroll-to-top",
-        importPath: "~/components/catalyst-ui/buttons/scroll-to-top",
-        multiImport: "FloatButton, FloatButtonGroup",
-        path: "/components/catalyst-ui/buttons/scroll-to-top.tsx",
-        premium: true,
-        source: null,
-        category: "Buttons",
-        tags: ["ui", "components", "interactive"],
-        features: ["Responsive", "TypeScript", "Accessible"],
-        dependencies: ["react", "lucide-react"],
-        basicusage: `
-<ScrollToTop />
-`,
-        usage: null,
-        usagePath: null,
-        props: {
-            "ScrollToTop": [
-                { name: "visibilityHeight", type: "int", default: 400 },
-                { name: "duration", type: "int", default: 450 },
-                { name: "target", type: "function", default: "window" },
-                { name: "className", type: "string", default: null },
-                { name: "icon", type: "function", default: "ChevronUp" },
-                { name: "onClick", type: "function", default: null }
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/float-button.tsx:6
-        name: "Float Button",
-        value: "float-button",
-        importPath: "~/components/catalyst-ui/buttons/float-button",
-        multiImport: "FloatButton, FloatButtonGroup",
-        path: "/components/catalyst-ui/buttons/float-button.tsx",
-        premium: true,
-        source: null,
-        category: "Buttons",
-        tags: ["ui", "components", "interactive"],
-        features: ["Responsive", "TypeScript", "Accessible"],
-        dependencies: ["react", "lucide-react"],
-        basicusage: `
-<FloatButton>
-    Content
-</FloatButton>
-
-<FloatButton icon={() => {}} description="" tooltip="" type="default" shape="circle" size="default" className="" onClick={() => {}} children="">
-    Content
-</FloatButton>`,
-        usage: null,
-        usagePath: null,
-        props: {
-            "FloatButton": [
-                { name: "icon", type: "string", default: null },
-                { name: "description", type: "string", default: null },
-                { name: "tooltip", type: "string", default: null },
-                { name: "type", type: "string", default: "default" },
-                { name: "shape", type: "string", default: "circle" },
-                { name: "size", type: "string", default: "default" },
-                { name: "className", type: "string", default: null },
-                { name: "onClick", type: "string", default: null },
-                { name: "children", type: "string", default: null }
-            ],
-            "FloatButtonGroup": [
-                { name: "trigger", type: "string", default: "click" },
-                { name: "open", type: "string", default: null },
-                { name: "onOpenChange", type: "string", default: null },
-                { name: "shape", type: "string", default: "circle" },
-                { name: "placement", type: "string", default: "top" },
-                { name: "icon", type: "JSX", default: "Plus" },
-                { name: "closeIcon", type: "JSX", default: "X" },
-                { name: "className", type: "string", default: null },
-                { name: "children", type: "string", default: null },
-                { name: "onClick", type: "string", default: null }
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/tooltip-button.tsx:6
-        name: "tooltip button",
-        value: "tooltip-button",
-        importPath: "~/components/catalyst-ui",
-        path: "/components/catalyst-ui/buttons/tooltip-button.tsx",
-        premium: true,
-        source: null,
-        category: "Buttons",
-        tags: ["ui", "components", "interactive"],
-        features: ["Responsive", "TypeScript", "Accessible"],
-        dependencies: ["lucide-react"],
-        usage: `
- <TooltipButton
-    icon={<CheckSquare />}
-    onClick={() => insertFormat('- [ ] {}')}
-    content='Checklist'
-/>					
-                        `,
-        usagePath: null,
-        props: [
-            { "name": "icon", "type": "React.ReactNode", "default": "undefined", },
-            { "name": "content", "type": "React.ReactNode", "default": "undefined", },
-            { "name": "onClick", "type": "() => void", "default": "null" },
-            { "name": "size", "type": "string", "default": "'icon'" },
-            { "name": "variant", "type": "string", "default": "'ghost'" },
-            { "name": "className", "type": "string", "default": "undefined" }
-        ],
-        props2: [],
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/split-button.tsx:6
-        name: "Split Button",
-        value: "split-button",
-        importPath: "~/components/catalyst-ui/buttons/split-button",
-        multiImport: null,
-        basicusage: `
-<SplitButton>
-    Content
-</SplitButton>
-
-<SplitButton 
-    items=[]
-    icon={}
-    label=""
-    variant="" 
-    align="middle" 
-    size="md" 
-    className=""
-    onClick={() => }
->
-    Content
-</SplitButton>`,
-        path: "/components/catalyst-ui/buttons/split-button.tsx",
-        source: `
-
-
-
-
-
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-      },
-      align: {
-        left: "justify-start text-left",
-        middle: "justify-center text-center",
-        right: "justify-end text-right",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-      align: "middle",
-    },
-  }
-)
-
-
-interface SplitButtonItem {
-  label: string;
-  icon?: React.ReactNode;
-  command?: () => void;
-  separator?: boolean;
-}
-
-interface SplitButtonProps {
-  label: string;
-  icon?: React.ReactNode;
-  items: SplitButtonItem[];
-  onClick?: () => void;
-  className?: string;
-  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" ;
-  size?: "default" | "sm" | "lg" | "icon";
-  disabled?: boolean;
-}
-
-const SplitButton = ({
-  label = null,
-  icon,
-  items,
-  onClick,
-  className,
-  containerClassName,
-  variant = "default",
-  align = "default",
-  size = "sm",
-    children,
-  ...props
-}: SplitButtonProps) => {
-  return (
-    <div className={cn("inline-flex", containerClassName)}>
-      <Button  
-        onClick={onClick} 
-         className={cn("rounded-r-none border-r-0", buttonVariants({ variant, size, className, align }))} 
-        {...props}
-      >
-        {children}
-      </Button>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button className={cn("rounded-l-none px-2", buttonVariants({ variant, size, className }))}  >
-            {label !== null ? (
-              <>
-              {label}
-              </>
-            ) :(
-<ChevronDown className="h-4 w-4" />
-            )}
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-48">
-          {items.map((item, index) => (
-            <React.Fragment key={index}>
-              {item.separator && <DropdownMenuSeparator />}
-              <DropdownMenuItem
-                onClick={item.command}
-                className="cursor-pointer"
-
-              >
-                {item.icon && <span className="mr-2">{item.icon}</span>}
-                {item.label}
-              </DropdownMenuItem>
-            </React.Fragment>
-          ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-}
-
-SplitButton.displayName = "SplitButton"
-
-
-
-
-export {
- SplitButton
-}
-
-
-`,
-        usagePath: null,
-        usage: `
-Primary Ripple
-`,
-        premium: true,
-        category: "Buttons",
-        tags: ["ui", "components", "interactive"],
-        features: ["Responsive", "TypeScript", "Accessible"],
-        dependencies: ["lucide-react"],
-        props: {
-            "SplitButton": [
-                { name: "items", type: "array", default: "null" },
-                { name: "icon", type: "function", default: "null" },
-                { name: "align", type: "string", default: "middle" },
-                { name: "size", type: "string", default: 'sm' },
-                { name: "loadingText", type: "string", default: "Submitting..." },
-                { name: "className", type: "string", default: null },
-                { name: "children", type: "string", default: null },
-                { name: "props", type: "string", default: null }
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/burger.tsx:6
-        name: "Burger",
-        value: "burger",
-        importPath: "~/components/catalyst-ui/buttons/burger",
-        multiImport: "Burger, BurgerButton, BurgerNavigation, BurgerMenuDemo",
-        path: "/components/catalyst-ui/buttons/burger.tsx",
-        premium: false,
-        source: `
-
-
-
-
-interface BurgerMenuProps {
-  opened?: boolean;
-  onToggle?: (opened: boolean) => void;
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-  color?: string;
-  className?: string;
-  'aria-label'?: string;
-  disabled?: boolean;
-}
-
-export function Burger({
-  opened: controlledOpened,
-  size = 'md',
-  color = 'currentColor',
-}: BurgerMenuProps) {
-   const [internalOpened, setInternalOpened] = useState(false);
-  const isOpened = controlledOpened !== undefined ? controlledOpened : internalOpened;
-  
-  const sizeClasses = {
-    sm: 'w-4 h-4',
-    md: 'w-6 h-6', 
-    lg: 'w-8 h-8',
-    xl: 'w-10 h-10'
-  };
-
-  const lineHeight = {
-    sm: '2px',
-    md: '2px',
-    lg: '3px', 
-    xl: '3px'
-  };
-
-return (
-  <div className={cn("relative", sizeClasses[size])}>
-    <span
-      className={cn(
-        "absolute left-0 block transition-all duration-300 ease-in-out rounded-full",
-        "bg-current"
-      )}
-      style={{
-        width: '100%',
-        height: lineHeight[size],
-        color: color,
-        top: isOpened ? '50%' : '20%',
-        transform: isOpened ? 'translateY(-50%) rotate(45deg)' : 'translateY(-50%) rotate(0deg)'
-      }}
-    />
-    <span
-      className={cn(
-        "absolute left-0 block transition-all duration-300 ease-in-out rounded-full",
-        "bg-current"
-      )}
-      style={{
-        width: '100%',
-        height: lineHeight[size],
-        color: color,
-        top: '50%',
-        opacity: isOpened ? 0 : 1,
-        transform: 'translateY(-50%)'
-      }}
-    />
-    <span
-      className={cn(
-        "absolute left-0 block transition-all duration-300 ease-in-out rounded-full",
-        "bg-current"
-      )}
-      style={{
-        width: '100%',
-        height: lineHeight[size],
-        color: color,
-        bottom: isOpened ? '50%' : '20%',
-        transform: isOpened ? 'translateY(50%) rotate(-45deg)' : 'translateY(50%) rotate(0deg)'
-      }}
-    />
-  </div>
-);
-}
-
-export function BurgerButton({
-  opened,
-  onToggle,
-  size ,
-  color ,
-  className = '',
-  'aria-label': ariaLabel = 'Toggle navigation',
-  disabled = false
-}: BurgerMenuProps) {
-  const [internalOpened, setInternalOpened] = useState(false);
-  
-  const isOpened = controlledOpened !== undefined ? controlledOpened : internalOpened;
-  
-  const handleToggle = () => {
-    if (disabled) return;
-    
-    const newOpened = !isOpened;
-    if (controlledOpened === undefined) {
-      setInternalOpened(newOpened);
-    }
-    onToggle?.(newOpened);
-  };
-
-  const sizeClasses = {
-    sm: 'w-4 h-4',
-    md: 'w-6 h-6', 
-    lg: 'w-8 h-8',
-    xl: 'w-10 h-10'
-  };
-
-
-  return (
-    <Button
-      variant="ghost"
-      size="icon"
-      onClick={handleToggle}
-      disabled={disabled}
-      aria-label={ariaLabel}
-      className={cn(
-        "relative p-2 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring",
-        sizeClasses[size],
-        className
-      )}
-    >
-        <Burger 
-          opened= {opened}
-  size = {size}
-  color ={color}
-        />
-    </Button>
-  );
-}
-
-interface NavigationItem {
-  id: string;
-  label: string;
-  href?: string;
-  onClick?: () => void;
-}
-
-interface BurgerNavigationProps {
-  menuItems: NavigationItem[];
-  isOpen: boolean;
-  onToggle: (open: boolean) => void;
-  className?: string;
-}
-
-export function BurgerNavigation({
-  menuItems,
-  isOpen,
-  onToggle,
-  className = ''
-}: BurgerNavigationProps) {
-  const handleItemClick = (item: NavigationItem) => {
-    if (item.onClick) {
-      item.onClick();
-    } else if (item.href) {
-      window.location.href = item.href;
-    }
-    onToggle(false);
-  };
-
-  return (
-    <div className={cn("relative", className)}>
-      <Burger
-        opened={isOpen}
-        onToggle={onToggle}
-        size="lg"
-        className="z-50"
-      />
-      
-      <div
-        className={cn(
-          "fixed inset-0 bg-background/80 backdrop-blur-sm transition-all duration-300 z-40",
-          isOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
-        )}
-        onClick={() => onToggle(false)}
-      />
-      
-      <nav
-        className={cn(
-          "fixed top-0 right-0 h-full w-80 bg-card border-l border-border shadow-lg transition-transform duration-300 ease-in-out z-50",
-          isOpen ? "translate-x-0" : "translate-x-full"
-        )}
-      >
-        <div className="flex items-center justify-between p-6 border-b border-border">
-          <h2 className="text-lg font-semibold text-foreground">Menu</h2>
-          <Burger
-            opened={isOpen}
-            onToggle={onToggle}
-            size="md"
-          />
-        </div>
-        
-        <div className="p-6">
-          <ul className="space-y-2">
-            {menuItems.map((item) => (
-              <li key={item.id}>
-                <button
-                  onClick={() => handleItemClick(item)}
-                  className="w-full text-left p-3 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors duration-150 text-foreground font-medium"
-                >
-                  {item.label}
-                </button>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </nav>
-    </div>
-  );
-}
-
-export function BurgerMenuDemo() {
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const [selectedItem, setSelectedItem] = useState('');
-
-  const navigationItems: NavigationItem[] = [
-    { id: 'home', label: 'Home', href: '#home' },
-    { id: 'about', label: 'About', href: '#about' },
-    { id: 'services', label: 'Services', href: '#services' },
-    { id: 'portfolio', label: 'Portfolio', href: '#portfolio' },
-    { id: 'contact', label: 'Contact', href: '#contact' },
-    { id: 'blog', label: 'Blog', href: '#blog' }
-  ];
-
-  const handleItemClick = (label: string) => {
-    setSelectedItem(label);
-  };
-
-  return (
-    <div className="min-h-screen bg-background">
-      <header className="bg-card border-b border-border p-4">
-        <div className="max-w-6xl mx-auto flex items-center justify-between">
-          <h1 className="text-xl font-bold text-foreground">Brand Logo</h1>
-          
-          <div className="hidden md:flex space-x-6">
-            {navigationItems.map((item) => (
-              <button
-                key={item.id}
-                onClick={() => handleItemClick(item.label)}
-                className="text-foreground hover:text-primary transition-colors duration-150"
-              >
-                {item.label}
-              </button>
-            ))}
-          </div>
-          
-          <div className="md:hidden">
-            <BurgerNavigation
-              menuItems={navigationItems}
-              isOpen={isMenuOpen}
-              onToggle={setIsMenuOpen}
-            />
-          </div>
-        </div>
-      </header>
-
-      <main className="p-8">
-        <div className="max-w-4xl mx-auto">
-          <h2 className="text-3xl font-bold text-foreground mb-8">Burger Menu Component Demo</h2>
-          
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-            <div className="bg-card border border-border rounded-lg p-6">
-              <h3 className="font-semibold text-foreground mb-4">Small</h3>
-              <Burger size="sm" />
-            </div>
-            
-            <div className="bg-card border border-border rounded-lg p-6">
-              <h3 className="font-semibold text-foreground mb-4">Medium</h3>
-              <Burger size="md" />
-            </div>
-            
-            <div className="bg-card border border-border rounded-lg p-6">
-              <h3 className="font-semibold text-foreground mb-4">Large</h3>
-              <Burger size="lg" />
-            </div>
-            
-            <div className="bg-card border border-border rounded-lg p-6">
-              <h3 className="font-semibold text-foreground mb-4">Extra Large</h3>
-              <Burger size="xl" />
-            </div>
-          </div>
-
-          {selectedItem && (
-            <div className="bg-card border border-border rounded-lg p-6">
-              <h3 className="font-semibold text-foreground mb-2">Selected Item</h3>
-              <p className="text-muted-foreground">You clicked: {selectedItem}</p>
-            </div>
-          )}
-        </div>
-      </main>
-    </div>
-  );
-}`,
-        category: "Buttons",
-        tags: ["ui", "components", "interactive"],
-        features: ["Responsive", "TypeScript", "Accessible"],
-        dependencies: ["react"],
-        basicusage: `
-<Burger />
-
-<Burger opened="" size="sm" color="" />`,
-        usage: `
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const [selectedItem, setSelectedItem] = useState('');
-
-  const navigationItems: NavigationItem[] = [
-    { id: 'home', label: 'Home', href: '#home' },
-    { id: 'about', label: 'About', href: '#about' },
-    { id: 'services', label: 'Services', href: '#services' },
-    { id: 'portfolio', label: 'Portfolio', href: '#portfolio' },
-    { id: 'contact', label: 'Contact', href: '#contact' },
-    { id: 'blog', label: 'Blog', href: '#blog' }
-  ];
-
-  const handleItemClick = (label: string) => {
-    setSelectedItem(label);
-  };
-
-{navigationItems.map((item) => (
-        <button key={item.id} onClick={() => handleItemClick(item.label)} className="text-foreground hover:text-primary transition-colors duration-150" >
-            {item.label}
-        </button>
-))}
-
-<BurgerNavigation
-    menuItems={navigationItems}
-    isOpen={isMenuOpen}
-    onToggle={setIsMenuOpen}
-/>
-`,
-        usagePath: null,
-        props: {
-            "Burger": [
-                { name: "opened", type: "string", default: "null" },
-                { name: "size", type: "string", default: "'md'" },
-                { name: "color", type: "string", default: "'currentColor'" }
-            ],
-            "BurgerButton": [
-                { name: "opened", type: "string", default: "null" },
-                { name: "onToggle", type: "string", default: "null" },
-                { name: "size", type: "string", default: "null" },
-                { name: "color", type: "string", default: "null" },
-                { name: "className", type: "string", default: "''" },
-                { name: "aria", type: "string", default: "null" },
-                { name: "disabled", type: "boolean", default: "false" }
-            ],
-            "BurgerNavigation": [
-                { name: "menuItems", type: "string", default: "null" },
-                { name: "isOpen", type: "string", default: "null" },
-                { name: "onToggle", type: "string", default: "null" },
-                { name: "className", type: "string", default: "''" }
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/copy-text.tsx:6
-        name: "Copy Text",
-        value: "copy-text",
-        importPath: "~/components/catalyst-ui/buttons/copy-text",
-        path: "/components/catalyst-ui/buttons/copy-text.tsx",
-        premium: true,
-        source: null,
-        category: "Buttons",
-        tags: ["ui", "components", "interactive"],
-        features: ["Responsive", "TypeScript", "Accessible"],
-        dependencies: ["lucide-react", "class-variance-authority"],
-        basicusage: `
-<CopyText code={content} />		`,
-        usage: `
-<CopyText code={createTildeImport} ttText='~ - Tilde Import' icon={Tilde} />`,
-        usagePath: null,
-        props: {
-            "CopyText": [
-                { name: "code", type: "string", default: "null" },
-                { name: "ttText", type: "string", default: "Copy" },
-                { name: "icon", type: "icon function", default: "Copy" },
-                { name: "size", type: "string", default: "icon" },
-                { name: "variant", type: "string", default: "ghost" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/export-file.tsx:6
-        name: "Export File",
-        value: "export-file",
-        importPath: "~/components/catalyst-ui/buttons/export-file",
-        path: "~/components/catalyst-ui/buttons/export-file.tsx",
-        premium: true,
-        source: `
-
-
-
-
-
-export function ExportFile({ code = null, filename='MyComponent.tsx' }) {
-const exportFile = useExport();
-
-const handleClick = () => {
-    if (!code || !filename) return null;
-  exportFile(code, filename);
-};
-    return (
-        <Button variant="ghost" size="icon" className="h-8 w-8 cursor-pointer  hover:bg-background/80" onClick={() => handleClick()}>
-            <Download className="h-4 w-4 hover:text-primary" /> 
-        </Button>
-    );
-}
-`,
-        category: "Buttons",
-        tags: ["ui", "components", "interactive"],
-        features: ["Responsive", "TypeScript", "Accessible"],
-        dependencies: ["lucide-react"],
-        basicusage: `
-<ExportFile code={content} filename='' />`,
-        usage: null,
-        usagePath: null,
-        props: {
-            "ExportFile": [
-                { name: "code", type: "string", default: "null" },
-                { name: "filename", type: "string", default: "'MyComponent.tsx'" }
-            ],
-        },
-        props2: [],
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/form-button.tsx:6
-        name: "Form Button",
-        value: "form-button",
-        importPath: "~/components/catalyst-ui/buttons/form-button",
-        multiImport: null,
-        path: "/components/catalyst-ui/buttons/button-form.tsx",
-        premium: true,
-        source: `
-
-
-
-
-
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-      },
-      align: {
-        left: "justify-start text-left",
-        middle: "justify-center text-center",
-        right: "justify-end text-right",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-      align: "middle",
-    },
-  }
-)
-
- 
-interface ButtonAnchorProps
-  extends RemixLinkProps,
-  VariantProps<typeof buttonVariants> { }
-
-
-export function FormButton  ({
-  primary = true, // true | false | dashed
-  variant = "default",
-  align = "default",
-  size = 'sm',
-  loadingText = "Submitting...",
-  className,
-  children,
-  ...props
-}: ButtonNavLinkProps)   {
-  const nav = useNavigation()
-
-  const isSubmitting = nav.state === 'submitting';
-
-  const baseClasses = cn(
-    "transition duration-300 border-2 border-border w-[95%] text-center mx-auto text-foreground px-6 py-3 rounded-none",
-    buttonVariants({ variant, size, className, align }),
-    className
-  );
-
-  const primaryClasses =
-    primary === true
-      ? "bg-[#2563eb] hover:bg-[#16171a]"
-      : primary === false
-        ? "bg-[#121212] hover:bg-[#2563eb]"
-        : primary === "dashed"
-          ? "h-8 border-dashed"
-          : "";
-  return (
-      <Button
-        type="submit"
-        className={cn(baseClasses, primaryClasses)}
-        disabled={isSubmitting}
-        {...props}
-      >
-        {isSubmitting ? (
-          <div className='flex items-center gap-3'>
-            <div className="flex items-center justify-center h-full">
-              <div className='animate-spin rounded-full h-6 w-6 border-t-4 border-primary border-solid'></div>
-            </div>
-            <p className='ml-3'>{loadingText}</p>
-          </div>
-        ) : (
-          children
-        )}
-      </Button>
-  );
-};
-`,
-        category: "Buttons",
-        tags: ["ui", "components", "interactive"],
-        features: ["Responsive", "TypeScript", "Accessible"],
-        dependencies: ["react", "class-variance-authority", "@radix-ui"],
-        basicusage: `
-<FormButton>
-    Content
-</FormButton>
-
-<FormButton 
-    primary="" // true | false | dashed
-    variant="" 
-    align="center" 
-    size="md" 
-    className="custom-class"
-    loadingText=""
->
-    Content
-</FormButton>`,
-        usage: null,
-        usagePath: null,
-        props: {
-            "FormButton": [
-                { name: "primary", type: "boolean", default: true },
-                { name: "true", type: "string", default: null },
-                { name: "align", type: "string", default: "default" },
-                { name: "size", type: "string", default: 'sm' },
-                { name: "loadingText", type: "string", default: "Submitting..." },
-                { name: "className", type: "string", default: null },
-                { name: "children", type: "string", default: null },
-                { name: "props", type: "string", default: null }
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        // @dev app/components/catalyst-ui/buttons/toggle-button.tsx:6
-        name: "Toggle Button",
-        value: "toggle-button",
-        importPath: "~/components/catalyst-ui/buttons/button-toggle",
-        multiImport: null,
-        path: "/components/catalyst-ui/buttons/button-toggle.tsx",
-        premium: true,
-        source: `
-    
-    
-    
-    
-    
-    
-    const buttonVariants = cva(
-      "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-      {
-        variants: {
-          variant: {
-            default:
-              "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-            destructive:
-              "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-            outline:
-              "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-            secondary:
-              "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-            ghost:
-              "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-            link: "text-primary underline-offset-4 hover:underline",
-          },
-          size: {
-            default: "h-9 px-4 py-2 has-[>svg]:px-3",
-            sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-            lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-            icon: "size-9",
-          },
-          align: {
-            left: "justify-start text-left",
-            middle: "justify-center text-center",
-            right: "justify-end text-right",
-          },
-        },
-        defaultVariants: {
-          variant: "default",
-          size: "default",
-          align: "middle",
-        },
-      }
-    )
-    
-    
-    interface ButtonToggleProps {
-      checked?: boolean
-      onChange?: (checked: boolean) => void
-      disabled?: boolean
-      className?: string
-      variant?: "default" | "outline" | "ghost"
-      size?: "sm" | "md" | "lg"
-      icon?: React.ReactNode
-      iconPos?: "left" | "right"
-      children?: React.ReactNode
-    }
-    
-    export function ToggleButton({
-      checked = false,
-      onChange,
-      disabled = false,
-      className,
-      variant = "default",
-      size = "md",
-      icon,
-      iconPos = "left",
-      children,
-      ...props
-    })   {
-      const handleClick = () => {
-        if (!disabled && onChange) {
-          onChange(!checked)
-        }
-      }
-    
-      const handleKeyDown = (e: React.KeyboardEvent) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault()
-          handleClick()
-        }
-      }
-    
-      return (
-        <button
-          ref={ref}
-          type="button"
-          className={cn(
-            "inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-            variant === "default" &&
-              checked
-              ? "bg-primary text-primary-foreground shadow hover:bg-primary/90"
-              : "bg-background text-foreground border border-input shadow-sm hover:bg-accent hover:text-accent-foreground",
-            variant === "outline" &&
-              checked
-              ? "border border-primary bg-background text-primary shadow-sm hover:bg-accent"
-              : "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-            variant === "ghost" &&
-              checked
-              ? "bg-accent text-accent-foreground hover:bg-accent/80"
-              : "hover:bg-accent hover:text-accent-foreground",
-            size === "sm" && "h-8 px-3 text-xs",
-            size === "md" && "h-10 px-4 py-2 text-sm",
-            size === "lg" && "h-12 px-6 text-base",
-            className
-          )}
-          onClick={handleClick}
-          onKeyDown={handleKeyDown}
-          disabled={disabled}
-          role="switch"
-          aria-checked={checked}
-          aria-disabled={disabled}
-          {...props}
-        >
-          {icon && iconPos === "left" && (
-            <span className={cn(children && "mr-2")}>{icon}</span>
-          )}
-          {children}
-          {icon && iconPos === "right" && (
-            <span className={cn(children && "ml-2")}>{icon}</span>
-          )}
-        </button>
-      )
-    }
-    
-    ToggleButton.displayName = "ToggleButton"
-    
-    
-    export {
-      ToggleButton
-    }
-    
-    `,
-        category: "Buttons",
-        tags: ["ui", "components", "interactive"],
-        features: ["Responsive", "TypeScript", "Accessible"],
-        dependencies: ["react", "class-variance-authority", "@radix-ui"],
-        basicusage: `
-    <ToggleButton>
-        ToggleButton
-    </ToggleButton>
-    
-    <ToggleButton checked="" onChange="" disabled="" className="">
-        ToggleButton
-    </ToggleButton>`,
-        usage: null,
-        usagePath: null,
-        props: {
-            "ToggleButton": [
-                { name: "checked", type: "boolean", default: "false" },
-                { name: "onChange", type: "string", default: "null" },
-                { name: "disabled", type: "boolean", default: "false" },
-                { name: "className", type: "string", default: "null" },
-                { name: "variant", type: "string", default: "default" },
-                { name: "size", type: "string", default: "md" },
-                { name: "icon", type: "string", default: "null" },
-                { name: "iconPos", type: "string", default: "left" },
-                { name: "children", type: "string", default: "null" },
-                { name: "props", type: "string", default: "null" }
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-];