@catalystsoftware/ui 1.0.2 → 1.0.5

package/dist/data/buttons-data.tsx

@@ -0,0 +1,2327 @@
+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
+    },
+];