@mova-ui/react 0.1.0 → 0.4.1

package/registry/6.json

@@ -0,0 +1,19 @@
+{
+  "id": "6",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "6.tsx",
+  "registryFile": "6.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './6';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/AnimatedButton.tsx\nimport React2, { useState as useState2 } from \"react\";\nimport { AnimatePresence as AnimatePresence2, motion as motion2 } from \"framer-motion\";\n\n// src/components/cards/FocusBlur.tsx\nimport { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction FocusBlur({\n  items = [\n    { label: \"@Twitter\", href: \"#\" },\n    { label: \"@Threads\", href: \"#\" },\n    { label: \"@Instagram\", href: \"#\" },\n    { label: \"@GitHub\", href: \"#\" }\n  ],\n  blurAmount = 4,\n  opacityAmount = 0.4,\n  showBrackets = true,\n  className = \"\"\n}) {\n  const [hoveredIndex, setHoveredIndex] = useState(null);\n  return /* @__PURE__ */ jsx(\"div\", { className: `flex flex-wrap justify-center items-center gap-6 py-6 px-10 cursor-default ${className}`, children: items.map((item, index) => {\n    const isHovered = hoveredIndex === index;\n    const isAnyHovered = hoveredIndex !== null;\n    const isInactive = isAnyHovered && !isHovered;\n    return /* @__PURE__ */ jsxs(\n      \"a\",\n      {\n        href: item.href || \"#\",\n        onMouseEnter: () => setHoveredIndex(index),\n        onMouseLeave: () => setHoveredIndex(null),\n        className: \"relative font-semibold text-lg sm:text-2xl no-underline transition-all duration-300 select-none outline-none\",\n        style: {\n          filter: isInactive ? `blur(${blurAmount}px)` : \"none\",\n          opacity: isInactive ? opacityAmount : 1,\n          color: isHovered ? \"var(--color-blue-500, #3b82f6)\" : \"inherit\"\n        },\n        children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"relative z-10\", children: item.label }),\n          showBrackets && /* @__PURE__ */ jsx(AnimatePresence, { children: isHovered && /* @__PURE__ */ jsx(\n            motion.div,\n            {\n              initial: { opacity: 0, scale: 1.3 },\n              animate: { opacity: 1, scale: 1.1 },\n              exit: { opacity: 0, scale: 1.3 },\n              transition: { type: \"spring\", stiffness: 350, damping: 20 },\n              className: \"absolute inset-0 border-2 border-dashed border-neutral-300 dark:border-neutral-700 rounded-lg pointer-events-none z-0\",\n              style: { margin: \"-4px -8px\" }\n            }\n          ) })\n        ]\n      },\n      index\n    );\n  }) });\n}\n\n// registry/ui/hover/inset-button.tsx\nimport { Fragment, jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nvar insetButtonStyles = `\n.mova-inset-button {\n  --surface-elevated: oklch(0.996 0.001 95);\n  --surface-shell: oklch(0.963 0.003 95);\n  --ink-strong: oklch(0.205 0.004 95);\n  --ink-base: oklch(0.315 0.004 92);\n  --border-soft: oklch(0.9 0.003 95);\n  --border-base: oklch(0.84 0.004 95);\n  --sidebar: color-mix(in oklab, var(--surface-shell) 94%, white);\n  --sidebar-foreground: var(--ink-base);\n  --sidebar-border: color-mix(in oklab, var(--border-soft) 92%, white);\n  --control-hover-core: var(--surface-elevated);\n  --control-hover-core-shadow: inset 0 1px 0 color-mix(in oklab, white 14%, transparent), 0 2px 7px color-mix(in oklab, var(--ink-strong) 12%, transparent), 0 0 0 1px color-mix(in oklab, var(--border-soft) 52%, transparent);\n  position: relative; isolation: isolate; display: inline-flex;\n  align-items: center; justify-content: center; flex-shrink: 0;\n  box-sizing: border-box; height: 2.5rem; padding: 0 .95rem;\n  border: 1px solid var(--border-base); border-radius: 999px;\n  background: var(--surface-elevated); color: var(--ink-strong);\n  font: inherit; font-size: .875rem; font-weight: 500; line-height: 1.25rem;\n  white-space: nowrap; cursor: pointer; outline: none;\n  transition-property: color, background-color, border-color, box-shadow, opacity, transform, scale;\n  transition-duration: 150ms; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n}\n.mova-inset-button[data-theme=\"dark\"] {\n  --surface-elevated: oklch(0.282 0.004 95);\n  --surface-shell: oklch(0.225 0.003 95);\n  --ink-strong: oklch(0.955 0.001 95);\n  --ink-base: oklch(0.88 0.002 95);\n  --border-soft: oklch(0.35 0.004 95);\n  --border-base: oklch(0.44 0.004 95);\n  --sidebar: color-mix(in oklab, var(--surface-shell) 96%, black);\n  --sidebar-border: color-mix(in oklab, var(--border-soft) 94%, black);\n  --control-hover-core: color-mix(in oklab, var(--surface-elevated) 84%, white);\n  --control-hover-core-shadow: inset 0 1px 0 color-mix(in oklab, white 9%, transparent);\n}\n.mova-inset-button::before {\n  content: \"\"; position: absolute; z-index: -1; inset: 4px; border-radius: inherit;\n  background: var(--control-hover-core); box-shadow: var(--control-hover-core-shadow);\n  backdrop-filter: blur(16px) saturate(118%); opacity: 0; pointer-events: none;\n  transform: scale(0.82);\n  transition: opacity 160ms ease, transform 190ms cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n.mova-inset-button:is(:hover, :focus-visible, :active, [data-state=\"open\"]):not(:disabled):not([aria-disabled=\"true\"])::before { opacity: 1; transform: scale(1); }\n.mova-inset-button:active:not(:disabled):not([aria-disabled=\"true\"])::before { transform: scale(0.95); }\n.mova-inset-button[data-theme=\"light\"][data-variant=\"text\"]::before { content: none; }\n.mova-inset-button[data-theme=\"light\"][data-variant=\"text\"]:is(:hover, :focus-visible, [data-state=\"open\"]):not(:disabled):not([aria-disabled=\"true\"]) { background: color-mix(in oklab, var(--surface-elevated) 94%, black); }\n.mova-inset-button[data-theme=\"light\"][data-variant=\"text\"]:is(:active, [data-state=\"open\"]):not(:disabled):not([aria-disabled=\"true\"]) { background: color-mix(in oklab, var(--surface-elevated) 89%, black); }\n.mova-inset-button:focus-visible { outline: 3px solid color-mix(in oklab, var(--ink-base) 25%, transparent); outline-offset: 1px; }\n.mova-inset-button[data-variant=\"create\"] {\n  width: 36px; height: 36px; padding: 0; overflow: hidden; backdrop-filter: blur(22px);\n  --control-hover-core: color-mix(in oklab, white 88%, transparent);\n  --control-hover-core-shadow: 0 2px 6px color-mix(in oklab, var(--sidebar-foreground) 12%, transparent), 0 0 0 1px color-mix(in oklab, var(--sidebar-foreground) 4%, transparent);\n  border-color: color-mix(in oklab, var(--sidebar-border) 76%, white);\n  background: color-mix(in oklab, var(--sidebar-foreground) 8%, var(--sidebar));\n  color: color-mix(in oklab, var(--sidebar-foreground) 88%, var(--sidebar));\n  box-shadow: 0 6px 18px -16px rgb(15 23 42 / 0.55);\n}\n.mova-inset-button[data-theme=\"dark\"][data-variant=\"create\"] {\n  --control-hover-core: color-mix(in oklab, var(--sidebar-foreground) 20%, var(--sidebar));\n  --control-hover-core-shadow: inset 0 1px 0 color-mix(in oklab, white 10%, transparent);\n  border-color: color-mix(in oklab, var(--sidebar-border) 78%, white 22%);\n  background: color-mix(in oklab, var(--sidebar) 90%, white 10%);\n  color: color-mix(in oklab, var(--sidebar-foreground) 88%, white 12%);\n  box-shadow: 0 7px 18px -16px rgb(0 0 0 / 0.72);\n}\n.mova-inset-button:disabled, .mova-inset-button[aria-disabled=\"true\"] { pointer-events: none; opacity: .5; }\n@media (prefers-reduced-motion: reduce) {\n  .mova-inset-button { transition: none !important; }\n  .mova-inset-button::before { transform: scale(1) !important; transition: none !important; }\n}\n`;\nfunction InsetButton({ variant = \"text\", theme = \"dark\", children, className = \"\", type = \"button\", ...props }) {\n  return /* @__PURE__ */ jsxs2(Fragment, { children: [\n    /* @__PURE__ */ jsx2(\"style\", { children: insetButtonStyles }),\n    /* @__PURE__ */ jsx2(\n      \"button\",\n      {\n        type,\n        \"aria-label\": variant === \"create\" ? \"Create\" : void 0,\n        ...props,\n        \"data-theme\": theme,\n        \"data-variant\": variant,\n        className: `mova-inset-button ${className}`,\n        children: variant === \"create\" ? /* @__PURE__ */ jsx2(\"svg\", { width: \"16\", height: \"16\", viewBox: \"0 0 24 24\", fill: \"none\", stroke: \"currentColor\", strokeWidth: \"2\", strokeLinecap: \"round\", strokeLinejoin: \"round\", \"aria-hidden\": \"true\", children: /* @__PURE__ */ jsx2(\"path\", { d: \"M12 5v14M5 12h14\" }) }) : children\n      }\n    )\n  ] });\n}\n\n// src/components/AnimatedButton.tsx\nimport { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from \"react/jsx-runtime\";\nvar AnimatedButton = React2.memo(function AnimatedButton2({ config, layoutMode, theme = \"dark\" }) {\n  const [isHovered, setIsHovered] = useState2(false);\n  const [hasInteracted, setHasInteracted] = useState2(false);\n  const [mouseCoords, setMouseCoords] = useState2({ x: 0, y: 0 });\n  if (config.interactionType === \"inset-text\" || config.interactionType === \"circle-create\") {\n    return /* @__PURE__ */ jsx3(\n      InsetButton,\n      {\n        theme,\n        variant: config.interactionType === \"circle-create\" ? \"create\" : \"text\",\n        \"aria-label\": config.label,\n        style: layoutMode === \"matrix\" && config.interactionType === \"inset-text\" ? { zoom: 0.55 } : void 0,\n        children: config.label\n      }\n    );\n  }\n  if (config.interactionType === \"focus-blur\") {\n    return /* @__PURE__ */ jsx3(\n      FocusBlur,\n      {\n        items: [\n          { label: \"@X\", href: \"#\" },\n          { label: \"@Threads\", href: \"#\" },\n          { label: \"@GitHub\", href: \"#\" }\n        ],\n        showBrackets: true,\n        className: layoutMode === \"matrix\" ? \"scale-[0.5] origin-center text-[10px] gap-1 px-1 py-1\" : \"text-sm gap-4\"\n      }\n    );\n  }\n  const Icon1 = config.icon1;\n  const Icon2 = config.icon2;\n  const isMatrix = layoutMode === \"matrix\";\n  const isLightTheme = theme === \"light\";\n  const handleMouseEnter = () => {\n    setIsHovered(true);\n    if (config.interactionType === \"morph\" && (config.id === \"4\" || config.id === \"21\" || config.id === \"22\" || config.id === \"24\" || config.id === \"25\")) {\n      setHasInteracted(true);\n    }\n  };\n  const handleMouseMove = (e) => {\n    if (config.interactionType === \"magnetic\") {\n      const rect = e.currentTarget.getBoundingClientRect();\n      const x = e.clientX - rect.left - rect.width / 2;\n      const y = e.clientY - rect.top - rect.height / 2;\n      setMouseCoords({ x: x * 0.35, y: y * 0.35 });\n    }\n  };\n  const handleMouseLeave = () => {\n    setIsHovered(false);\n    if (config.interactionType === \"magnetic\") {\n      setMouseCoords({ x: 0, y: 0 });\n    }\n    if (hasInteracted) {\n      setTimeout(() => setHasInteracted(false), 500);\n    }\n  };\n  const handleTouchStart = () => {\n    setIsHovered(true);\n    if (config.interactionType === \"morph\" && (config.id === \"4\" || config.id === \"21\" || config.id === \"22\" || config.id === \"24\" || config.id === \"25\")) {\n      setHasInteracted(true);\n    }\n  };\n  const handleTouchEnd = () => {\n    setTimeout(() => {\n      setIsHovered(false);\n      if (hasInteracted) {\n        setTimeout(() => setHasInteracted(false), 500);\n      }\n    }, 500);\n  };\n  const showIcon2 = hasInteracted || isHovered;\n  const renderIconContent = () => {\n    switch (config.interactionType) {\n      case \"slide-arrow\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", children: !isHovered && /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              layout: true,\n              initial: { opacity: 0, x: -10 },\n              animate: { opacity: 1, x: 0 },\n              exit: { opacity: 0, x: -10 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: `flex items-center shrink-0 ${!isMatrix ? \"mr-2.5\" : \"\"}`,\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon1\"\n          ) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap\", children: config.label }),\n          /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", children: isHovered && /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              layout: true,\n              initial: { opacity: 0, x: 10 },\n              animate: { opacity: 1, x: 0 },\n              exit: { opacity: 0, x: 10 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: `flex items-center shrink-0 ${!isMatrix ? \"ml-2.5\" : \"\"}`,\n              children: Icon2 && /* @__PURE__ */ jsx3(Icon2, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon2\"\n          ) })\n        ] });\n      case \"sparkle\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", initial: false, children: !isHovered ? /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { y: -15, opacity: 0, scale: 0.8 },\n              animate: { y: 0, opacity: 1, scale: 1 },\n              exit: { y: -15, opacity: 0, scale: 0.8 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon1\"\n          ) : /* @__PURE__ */ jsxs3(\n            motion2.div,\n            {\n              initial: { y: 15, opacity: 0, scale: 0.8 },\n              animate: { y: 0, opacity: 1, scale: 1 },\n              exit: { y: 15, opacity: 0, scale: 0.8 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: [\n                Icon2 && /* @__PURE__ */ jsx3(Icon2, { className: `w-[16px] h-[16px] ${config.icon2Color || (isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\")}` }),\n                /* @__PURE__ */ jsx3(\n                  motion2.div,\n                  {\n                    initial: { opacity: 0, scale: 0, rotate: -45, y: 10 },\n                    animate: { opacity: 1, scale: 1, rotate: 0, y: 0 },\n                    exit: { opacity: 0, scale: 0, rotate: 45, y: 10 },\n                    transition: { type: \"spring\", stiffness: 600, damping: 25, delay: 0.05 },\n                    className: \"absolute -top-3 -right-2\",\n                    children: /* @__PURE__ */ jsx3(\"svg\", { className: \"w-2.5 h-2.5 text-yellow-200\", viewBox: \"0 0 24 24\", fill: \"currentColor\", children: /* @__PURE__ */ jsx3(\"path\", { d: \"M12 2l2.4 7.6H22l-6.2 4.5 2.4 7.6-6.2-4.5-6.2 4.5 2.4-7.6L2 9.6h7.6z\" }) })\n                  }\n                ),\n                /* @__PURE__ */ jsx3(\n                  motion2.div,\n                  {\n                    initial: { opacity: 0, scale: 0, rotate: 45, x: 10 },\n                    animate: { opacity: 1, scale: 1, rotate: 0, x: 0 },\n                    exit: { opacity: 0, scale: 0, rotate: -45, x: 10 },\n                    transition: { type: \"spring\", stiffness: 600, damping: 25, delay: 0.1 },\n                    className: \"absolute -top-1 -left-3\",\n                    children: /* @__PURE__ */ jsx3(\"svg\", { className: \"w-1.5 h-1.5 text-yellow-400\", viewBox: \"0 0 24 24\", fill: \"currentColor\", children: /* @__PURE__ */ jsx3(\"path\", { d: \"M12 2l2.4 7.6H22l-6.2 4.5 2.4 7.6-6.2-4.5-6.2 4.5 2.4-7.6L2 9.6h7.6z\" }) })\n                  }\n                )\n              ]\n            },\n            \"icon2\"\n          ) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label })\n        ] });\n      case \"morph\":\n      case \"color-morph\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", initial: false, children: !showIcon2 ? /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { scale: 0.5, opacity: 0 },\n              animate: { scale: 1, opacity: 1 },\n              exit: { scale: 0.5, opacity: 0 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isHovered && config.icon1Color ? config.icon1Color : isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon1\"\n          ) : /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { scale: 0.5, opacity: 0 },\n              animate: { scale: 1, opacity: 1 },\n              exit: { scale: 0.5, opacity: 0 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: Icon2 && /* @__PURE__ */ jsx3(Icon2, { className: `w-[16px] h-[16px] ${config.icon2Color || (isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\")}` })\n            },\n            \"icon2\"\n          ) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.id === \"4\" && showIcon2 ? \"Copied\" : config.label })\n        ] });\n      case \"pulse\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              animate: { scale: isHovered ? [1, 1.25, 1] : 1 },\n              transition: { duration: 0.4, ease: \"easeInOut\" },\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] transition-colors duration-300 ${isHovered && config.icon1Color ? `${config.icon1Color} fill-current` : isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            }\n          ) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label })\n        ] });\n      case \"rotate\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(motion2.div, { animate: { rotate: isHovered ? 180 : 0 }, transition: { type: \"spring\", stiffness: 400, damping: 25 }, children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` }) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label })\n        ] });\n      case \"shake\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              animate: {\n                y: isHovered ? [0, -2, 0, -2, 0] : 0,\n                rotate: isHovered ? [0, -10, 10, -10, 0] : 0\n              },\n              transition: { duration: 0.4 },\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] transition-colors duration-300 ${isHovered && config.icon1Color ? config.icon1Color : isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            }\n          ) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: `font-medium tracking-tight text-[13px] whitespace-nowrap transition-colors duration-300 ml-2.5 ${isHovered && config.icon1Color ? config.icon1Color : isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}`, children: config.label })\n        ] });\n      case \"ring\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", initial: false, children: !isHovered ? /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { rotate: -15, scale: 0.8, opacity: 0 },\n              animate: { rotate: 0, scale: 1, opacity: 1 },\n              exit: { rotate: 15, scale: 0.8, opacity: 0 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon1\"\n          ) : /* @__PURE__ */ jsxs3(\n            motion2.div,\n            {\n              initial: { rotate: -15, scale: 0.8, opacity: 0 },\n              animate: { rotate: 0, scale: 1, opacity: 1 },\n              exit: { rotate: 15, scale: 0.8, opacity: 0 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: [\n                Icon2 && /* @__PURE__ */ jsx3(Icon2, { className: `w-[16px] h-[16px] ${config.icon2Color || (isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\")}` }),\n                /* @__PURE__ */ jsx3(\n                  motion2.div,\n                  {\n                    initial: { scale: 0 },\n                    animate: { scale: 1 },\n                    transition: { type: \"spring\", stiffness: 600, damping: 15, delay: 0.1 },\n                    className: \"absolute top-0 right-0 w-1.5 h-1.5 bg-red-500 rounded-full border border-transparent\"\n                  }\n                )\n              ]\n            },\n            \"icon2\"\n          ) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label })\n        ] });\n      case \"glare\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${!isMatrix ? \"mr-2.5\" : \"\"} ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` }),\n          !isMatrix && /* @__PURE__ */ jsx3(\"span\", { className: \"font-medium tracking-tight text-[13px] whitespace-nowrap\", children: config.label }),\n          /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              animate: { x: isHovered ? [\"-150%\", \"150%\"] : \"-150%\" },\n              transition: { duration: 0.85, ease: \"easeInOut\", repeat: isHovered ? Infinity : 0, repeatDelay: 1 },\n              className: `absolute top-0 bottom-0 w-[50px] skew-x-[-20deg] pointer-events-none z-10`,\n              style: {\n                background: isLightTheme ? \"linear-gradient(90deg, transparent, rgba(0,0,0,0.12), transparent)\" : \"linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent)\"\n              }\n            }\n          )\n        ] });\n      case \"text-reveal\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0 mr-2.5\", children: /* @__PURE__ */ jsx3(motion2.div, { animate: { rotate: isHovered ? 45 : 0 }, transition: { type: \"spring\", stiffness: 400, damping: 25 }, children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` }) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(\"div\", { className: \"relative h-[18px] overflow-hidden\", children: /* @__PURE__ */ jsxs3(\n            motion2.div,\n            {\n              animate: { y: isHovered ? -18 : 0 },\n              transition: { type: \"spring\", stiffness: 400, damping: 25 },\n              className: \"flex flex-col\",\n              children: [\n                /* @__PURE__ */ jsx3(\"span\", { className: `block h-[18px] leading-[18px] font-medium tracking-tight text-[13px] whitespace-nowrap ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}`, children: config.label }),\n                /* @__PURE__ */ jsx3(\"span\", { className: `block h-[18px] leading-[18px] font-medium tracking-tight text-[13px] whitespace-nowrap ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}`, children: config.label })\n              ]\n            }\n          ) })\n        ] });\n      case \"magnetic\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${!isMatrix ? \"mr-2.5\" : \"\"} ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` }),\n          !isMatrix && /* @__PURE__ */ jsx3(\"span\", { className: \"font-medium tracking-tight text-[13px] whitespace-nowrap\", children: config.label })\n        ] });\n      case \"expand-ring\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              animate: { scale: isHovered ? 1.1 : 1 },\n              transition: { type: \"spring\", stiffness: 400, damping: 20 },\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            }\n          ) }),\n          !isMatrix && /* @__PURE__ */ jsx3(\"span\", { className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label }),\n          /* @__PURE__ */ jsx3(AnimatePresence2, { children: isHovered && /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { opacity: 1, scale: 1 },\n              animate: { opacity: 0, scale: 1.15 },\n              exit: { opacity: 0 },\n              transition: { duration: 0.6, ease: \"easeOut\" },\n              className: `absolute inset-0 rounded-[40px] pointer-events-none border ${isLightTheme ? \"border-black/25\" : \"border-white/25\"}`\n            },\n            \"expand-ring-div\"\n          ) })\n        ] });\n      default:\n        return null;\n    }\n  };\n  return /* @__PURE__ */ jsx3(\n    motion2.button,\n    {\n      layout: true,\n      transition: { type: \"spring\", stiffness: 500, damping: 25 },\n      onMouseEnter: handleMouseEnter,\n      onMouseMove: handleMouseMove,\n      onMouseLeave: handleMouseLeave,\n      onPointerEnter: handleMouseEnter,\n      onPointerLeave: handleMouseLeave,\n      onPointerMove: handleMouseMove,\n      onFocus: handleMouseEnter,\n      onBlur: handleMouseLeave,\n      onTouchStart: handleTouchStart,\n      onTouchEnd: handleTouchEnd,\n      animate: {\n        paddingLeft: isMatrix ? 0 : isHovered ? 28 : 24,\n        paddingRight: isMatrix ? 0 : isHovered ? 28 : 24,\n        x: isHovered && config.interactionType === \"magnetic\" ? mouseCoords.x : 0,\n        y: isHovered && config.interactionType === \"magnetic\" ? mouseCoords.y : 0,\n        backgroundColor: isLightTheme ? hasInteracted && config.id === \"4\" ? \"rgba(0,0,0,0.08)\" : isHovered ? \"rgba(0,0,0,0.06)\" : \"rgba(0,0,0,0.04)\" : hasInteracted && config.id === \"4\" ? \"rgba(255,255,255,0.08)\" : isHovered ? \"rgba(255,255,255,0.06)\" : \"rgba(255,255,255,0.04)\"\n      },\n      whileHover: { scale: 1.02 },\n      whileTap: { scale: 0.96 },\n      className: `relative flex items-center justify-center rounded-[40px] border-0 cursor-pointer shadow-none transition-colors duration-150 ${isMatrix ? \"w-[36px] h-[36px] sm:w-[42px] sm:h-[42px] px-0\" : \"h-[36px] min-w-[75px]\"} ${config.interactionType === \"glare\" ? \"overflow-hidden\" : \"\"} ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}`,\n      children: /* @__PURE__ */ jsx3(motion2.div, { layout: true, transition: { type: \"spring\", stiffness: 500, damping: 25 }, className: `flex items-center justify-center w-full ${isMatrix ? \"scale-100 sm:scale-[1.15] origin-center\" : \"\"}`, children: renderIconContent() })\n    }\n  );\n});\n\n// src/data/buttons.tsx\nimport {\n  ArrowRight,\n  Github,\n  Star,\n  Cloud,\n  CloudUpload,\n  Copy,\n  Check,\n  Heart,\n  Link,\n  Send,\n  Play,\n  Pause,\n  Settings,\n  Trash2,\n  Bell,\n  BellRing,\n  Search,\n  X,\n  Moon,\n  Sun,\n  Mic,\n  MicOff,\n  Video,\n  VideoOff,\n  Volume2,\n  VolumeX,\n  Lock,\n  Unlock,\n  Folder,\n  FolderOpen,\n  Eye,\n  EyeOff,\n  Bookmark,\n  ThumbsUp,\n  Download,\n  Upload,\n  User,\n  UserCheck,\n  Pen,\n  Wifi,\n  WifiOff,\n  Battery,\n  BatteryCharging,\n  Maximize,\n  Minimize,\n  RefreshCw,\n  Plus\n} from \"lucide-react\";\nimport { jsx as jsx4 } from \"react/jsx-runtime\";\nvar AppleIcon = (props) => /* @__PURE__ */ jsx4(\"svg\", { viewBox: \"0 0 384 512\", fill: \"currentColor\", ...props, children: /* @__PURE__ */ jsx4(\"path\", { d: \"M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z\" }) });\nvar buttonsData = [\n  { id: \"36\", label: \"Open Run Details\", icon1: ArrowRight, interactionType: \"inset-text\" },\n  { id: \"37\", label: \"Create\", icon1: Plus, interactionType: \"circle-create\" },\n  { id: \"1\", label: \"Download for Mac\", icon1: AppleIcon, icon2: ArrowRight, interactionType: \"slide-arrow\", hoverBg: \"#0a0a0a\" },\n  { id: \"2\", label: \"Star on GitHub\", icon1: Github, icon2: Star, interactionType: \"sparkle\", hoverBg: \"#1f1f1f\", icon2Color: \"text-yellow-400\" },\n  { id: \"3\", label: \"Deploy App\", icon1: Cloud, icon2: CloudUpload, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400\" },\n  { id: \"4\", label: \"Copy Hash\", icon1: Copy, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"5\", label: \"Sponsor\", icon1: Heart, interactionType: \"pulse\", hoverBg: \"#1f1f1f\", icon1Color: \"text-pink-500\" },\n  { id: \"6\", label: \"Share\", icon1: Link, icon2: Send, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400\" },\n  { id: \"7\", label: \"Preview\", icon1: Play, icon2: Pause, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-green-400\" },\n  { id: \"8\", label: \"Settings\", icon1: Settings, interactionType: \"rotate\", hoverBg: \"#1f1f1f\" },\n  { id: \"9\", label: \"Delete\", icon1: Trash2, interactionType: \"shake\", hoverBg: \"#1f1f1f\", icon1Color: \"text-red-400\" },\n  { id: \"10\", label: \"Subscribe\", icon1: Bell, icon2: BellRing, interactionType: \"ring\", hoverBg: \"#1f1f1f\", icon2Color: \"text-orange-400\" },\n  { id: \"11\", label: \"Search\", icon1: Search, icon2: X, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-white\" },\n  { id: \"12\", label: \"Theme\", icon1: Moon, icon2: Sun, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-yellow-400\" },\n  { id: \"13\", label: \"Microphone\", icon1: Mic, icon2: MicOff, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-red-400\" },\n  { id: \"14\", label: \"Camera\", icon1: Video, icon2: VideoOff, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-red-400\" },\n  { id: \"15\", label: \"Volume\", icon1: Volume2, icon2: VolumeX, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-neutral-500\" },\n  { id: \"16\", label: \"Lock\", icon1: Lock, icon2: Unlock, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"17\", label: \"Directory\", icon1: Folder, icon2: FolderOpen, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400\" },\n  { id: \"18\", label: \"Visibility\", icon1: Eye, icon2: EyeOff, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-neutral-500\" },\n  { id: \"19\", label: \"Save Later\", icon1: Bookmark, icon2: Bookmark, interactionType: \"color-morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400 fill-blue-400\" },\n  { id: \"20\", label: \"Like\", icon1: ThumbsUp, icon2: ThumbsUp, interactionType: \"color-morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-500 fill-blue-500\" },\n  { id: \"21\", label: \"Download\", icon1: Download, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"22\", label: \"Upload\", icon1: Upload, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400\" },\n  { id: \"23\", label: \"Account\", icon1: User, icon2: UserCheck, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"24\", label: \"Submit\", icon1: Send, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"25\", label: \"Edit\", icon1: Pen, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"26\", label: \"Network\", icon1: Wifi, icon2: WifiOff, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-red-400\" },\n  { id: \"27\", label: \"Power\", icon1: Battery, icon2: BatteryCharging, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"28\", label: \"Expand\", icon1: Maximize, icon2: Minimize, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-white\" },\n  { id: \"29\", label: \"Reload\", icon1: RefreshCw, interactionType: \"rotate\", hoverBg: \"#1f1f1f\" },\n  { id: \"30\", label: \"Favorite\", icon1: Star, icon2: Star, interactionType: \"color-morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-yellow-400 fill-yellow-400\" },\n  { id: \"31\", label: \"Glare Shine\", icon1: Star, interactionType: \"glare\", hoverBg: \"#1f1f1f\" },\n  { id: \"32\", label: \"Text Reveal\", icon1: ArrowRight, interactionType: \"text-reveal\", hoverBg: \"#1f1f1f\" },\n  { id: \"33\", label: \"Magnetic Field\", icon1: Github, interactionType: \"magnetic\", hoverBg: \"#1f1f1f\" },\n  { id: \"34\", label: \"Expand Ring\", icon1: Link, interactionType: \"expand-ring\", hoverBg: \"#1f1f1f\" },\n  { id: \"35\", label: \"Focus Blur Links\", icon1: Link, interactionType: \"focus-blur\", hoverBg: \"#1f1f1f\" }\n];\n\n// 6.tsx\nimport { jsx as jsx5 } from \"react/jsx-runtime\";\nfunction Demo() {\n  const config = buttonsData.find((button) => button.id === \"6\");\n  if (!config) return null;\n  return /* @__PURE__ */ jsx5(AnimatedButton, { config, layoutMode: \"grid\", theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n"
+}

package/registry/7.json

@@ -0,0 +1,19 @@
+{
+  "id": "7",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "7.tsx",
+  "registryFile": "7.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './7';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/AnimatedButton.tsx\nimport React2, { useState as useState2 } from \"react\";\nimport { AnimatePresence as AnimatePresence2, motion as motion2 } from \"framer-motion\";\n\n// src/components/cards/FocusBlur.tsx\nimport { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction FocusBlur({\n  items = [\n    { label: \"@Twitter\", href: \"#\" },\n    { label: \"@Threads\", href: \"#\" },\n    { label: \"@Instagram\", href: \"#\" },\n    { label: \"@GitHub\", href: \"#\" }\n  ],\n  blurAmount = 4,\n  opacityAmount = 0.4,\n  showBrackets = true,\n  className = \"\"\n}) {\n  const [hoveredIndex, setHoveredIndex] = useState(null);\n  return /* @__PURE__ */ jsx(\"div\", { className: `flex flex-wrap justify-center items-center gap-6 py-6 px-10 cursor-default ${className}`, children: items.map((item, index) => {\n    const isHovered = hoveredIndex === index;\n    const isAnyHovered = hoveredIndex !== null;\n    const isInactive = isAnyHovered && !isHovered;\n    return /* @__PURE__ */ jsxs(\n      \"a\",\n      {\n        href: item.href || \"#\",\n        onMouseEnter: () => setHoveredIndex(index),\n        onMouseLeave: () => setHoveredIndex(null),\n        className: \"relative font-semibold text-lg sm:text-2xl no-underline transition-all duration-300 select-none outline-none\",\n        style: {\n          filter: isInactive ? `blur(${blurAmount}px)` : \"none\",\n          opacity: isInactive ? opacityAmount : 1,\n          color: isHovered ? \"var(--color-blue-500, #3b82f6)\" : \"inherit\"\n        },\n        children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"relative z-10\", children: item.label }),\n          showBrackets && /* @__PURE__ */ jsx(AnimatePresence, { children: isHovered && /* @__PURE__ */ jsx(\n            motion.div,\n            {\n              initial: { opacity: 0, scale: 1.3 },\n              animate: { opacity: 1, scale: 1.1 },\n              exit: { opacity: 0, scale: 1.3 },\n              transition: { type: \"spring\", stiffness: 350, damping: 20 },\n              className: \"absolute inset-0 border-2 border-dashed border-neutral-300 dark:border-neutral-700 rounded-lg pointer-events-none z-0\",\n              style: { margin: \"-4px -8px\" }\n            }\n          ) })\n        ]\n      },\n      index\n    );\n  }) });\n}\n\n// registry/ui/hover/inset-button.tsx\nimport { Fragment, jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nvar insetButtonStyles = `\n.mova-inset-button {\n  --surface-elevated: oklch(0.996 0.001 95);\n  --surface-shell: oklch(0.963 0.003 95);\n  --ink-strong: oklch(0.205 0.004 95);\n  --ink-base: oklch(0.315 0.004 92);\n  --border-soft: oklch(0.9 0.003 95);\n  --border-base: oklch(0.84 0.004 95);\n  --sidebar: color-mix(in oklab, var(--surface-shell) 94%, white);\n  --sidebar-foreground: var(--ink-base);\n  --sidebar-border: color-mix(in oklab, var(--border-soft) 92%, white);\n  --control-hover-core: var(--surface-elevated);\n  --control-hover-core-shadow: inset 0 1px 0 color-mix(in oklab, white 14%, transparent), 0 2px 7px color-mix(in oklab, var(--ink-strong) 12%, transparent), 0 0 0 1px color-mix(in oklab, var(--border-soft) 52%, transparent);\n  position: relative; isolation: isolate; display: inline-flex;\n  align-items: center; justify-content: center; flex-shrink: 0;\n  box-sizing: border-box; height: 2.5rem; padding: 0 .95rem;\n  border: 1px solid var(--border-base); border-radius: 999px;\n  background: var(--surface-elevated); color: var(--ink-strong);\n  font: inherit; font-size: .875rem; font-weight: 500; line-height: 1.25rem;\n  white-space: nowrap; cursor: pointer; outline: none;\n  transition-property: color, background-color, border-color, box-shadow, opacity, transform, scale;\n  transition-duration: 150ms; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n}\n.mova-inset-button[data-theme=\"dark\"] {\n  --surface-elevated: oklch(0.282 0.004 95);\n  --surface-shell: oklch(0.225 0.003 95);\n  --ink-strong: oklch(0.955 0.001 95);\n  --ink-base: oklch(0.88 0.002 95);\n  --border-soft: oklch(0.35 0.004 95);\n  --border-base: oklch(0.44 0.004 95);\n  --sidebar: color-mix(in oklab, var(--surface-shell) 96%, black);\n  --sidebar-border: color-mix(in oklab, var(--border-soft) 94%, black);\n  --control-hover-core: color-mix(in oklab, var(--surface-elevated) 84%, white);\n  --control-hover-core-shadow: inset 0 1px 0 color-mix(in oklab, white 9%, transparent);\n}\n.mova-inset-button::before {\n  content: \"\"; position: absolute; z-index: -1; inset: 4px; border-radius: inherit;\n  background: var(--control-hover-core); box-shadow: var(--control-hover-core-shadow);\n  backdrop-filter: blur(16px) saturate(118%); opacity: 0; pointer-events: none;\n  transform: scale(0.82);\n  transition: opacity 160ms ease, transform 190ms cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n.mova-inset-button:is(:hover, :focus-visible, :active, [data-state=\"open\"]):not(:disabled):not([aria-disabled=\"true\"])::before { opacity: 1; transform: scale(1); }\n.mova-inset-button:active:not(:disabled):not([aria-disabled=\"true\"])::before { transform: scale(0.95); }\n.mova-inset-button[data-theme=\"light\"][data-variant=\"text\"]::before { content: none; }\n.mova-inset-button[data-theme=\"light\"][data-variant=\"text\"]:is(:hover, :focus-visible, [data-state=\"open\"]):not(:disabled):not([aria-disabled=\"true\"]) { background: color-mix(in oklab, var(--surface-elevated) 94%, black); }\n.mova-inset-button[data-theme=\"light\"][data-variant=\"text\"]:is(:active, [data-state=\"open\"]):not(:disabled):not([aria-disabled=\"true\"]) { background: color-mix(in oklab, var(--surface-elevated) 89%, black); }\n.mova-inset-button:focus-visible { outline: 3px solid color-mix(in oklab, var(--ink-base) 25%, transparent); outline-offset: 1px; }\n.mova-inset-button[data-variant=\"create\"] {\n  width: 36px; height: 36px; padding: 0; overflow: hidden; backdrop-filter: blur(22px);\n  --control-hover-core: color-mix(in oklab, white 88%, transparent);\n  --control-hover-core-shadow: 0 2px 6px color-mix(in oklab, var(--sidebar-foreground) 12%, transparent), 0 0 0 1px color-mix(in oklab, var(--sidebar-foreground) 4%, transparent);\n  border-color: color-mix(in oklab, var(--sidebar-border) 76%, white);\n  background: color-mix(in oklab, var(--sidebar-foreground) 8%, var(--sidebar));\n  color: color-mix(in oklab, var(--sidebar-foreground) 88%, var(--sidebar));\n  box-shadow: 0 6px 18px -16px rgb(15 23 42 / 0.55);\n}\n.mova-inset-button[data-theme=\"dark\"][data-variant=\"create\"] {\n  --control-hover-core: color-mix(in oklab, var(--sidebar-foreground) 20%, var(--sidebar));\n  --control-hover-core-shadow: inset 0 1px 0 color-mix(in oklab, white 10%, transparent);\n  border-color: color-mix(in oklab, var(--sidebar-border) 78%, white 22%);\n  background: color-mix(in oklab, var(--sidebar) 90%, white 10%);\n  color: color-mix(in oklab, var(--sidebar-foreground) 88%, white 12%);\n  box-shadow: 0 7px 18px -16px rgb(0 0 0 / 0.72);\n}\n.mova-inset-button:disabled, .mova-inset-button[aria-disabled=\"true\"] { pointer-events: none; opacity: .5; }\n@media (prefers-reduced-motion: reduce) {\n  .mova-inset-button { transition: none !important; }\n  .mova-inset-button::before { transform: scale(1) !important; transition: none !important; }\n}\n`;\nfunction InsetButton({ variant = \"text\", theme = \"dark\", children, className = \"\", type = \"button\", ...props }) {\n  return /* @__PURE__ */ jsxs2(Fragment, { children: [\n    /* @__PURE__ */ jsx2(\"style\", { children: insetButtonStyles }),\n    /* @__PURE__ */ jsx2(\n      \"button\",\n      {\n        type,\n        \"aria-label\": variant === \"create\" ? \"Create\" : void 0,\n        ...props,\n        \"data-theme\": theme,\n        \"data-variant\": variant,\n        className: `mova-inset-button ${className}`,\n        children: variant === \"create\" ? /* @__PURE__ */ jsx2(\"svg\", { width: \"16\", height: \"16\", viewBox: \"0 0 24 24\", fill: \"none\", stroke: \"currentColor\", strokeWidth: \"2\", strokeLinecap: \"round\", strokeLinejoin: \"round\", \"aria-hidden\": \"true\", children: /* @__PURE__ */ jsx2(\"path\", { d: \"M12 5v14M5 12h14\" }) }) : children\n      }\n    )\n  ] });\n}\n\n// src/components/AnimatedButton.tsx\nimport { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from \"react/jsx-runtime\";\nvar AnimatedButton = React2.memo(function AnimatedButton2({ config, layoutMode, theme = \"dark\" }) {\n  const [isHovered, setIsHovered] = useState2(false);\n  const [hasInteracted, setHasInteracted] = useState2(false);\n  const [mouseCoords, setMouseCoords] = useState2({ x: 0, y: 0 });\n  if (config.interactionType === \"inset-text\" || config.interactionType === \"circle-create\") {\n    return /* @__PURE__ */ jsx3(\n      InsetButton,\n      {\n        theme,\n        variant: config.interactionType === \"circle-create\" ? \"create\" : \"text\",\n        \"aria-label\": config.label,\n        style: layoutMode === \"matrix\" && config.interactionType === \"inset-text\" ? { zoom: 0.55 } : void 0,\n        children: config.label\n      }\n    );\n  }\n  if (config.interactionType === \"focus-blur\") {\n    return /* @__PURE__ */ jsx3(\n      FocusBlur,\n      {\n        items: [\n          { label: \"@X\", href: \"#\" },\n          { label: \"@Threads\", href: \"#\" },\n          { label: \"@GitHub\", href: \"#\" }\n        ],\n        showBrackets: true,\n        className: layoutMode === \"matrix\" ? \"scale-[0.5] origin-center text-[10px] gap-1 px-1 py-1\" : \"text-sm gap-4\"\n      }\n    );\n  }\n  const Icon1 = config.icon1;\n  const Icon2 = config.icon2;\n  const isMatrix = layoutMode === \"matrix\";\n  const isLightTheme = theme === \"light\";\n  const handleMouseEnter = () => {\n    setIsHovered(true);\n    if (config.interactionType === \"morph\" && (config.id === \"4\" || config.id === \"21\" || config.id === \"22\" || config.id === \"24\" || config.id === \"25\")) {\n      setHasInteracted(true);\n    }\n  };\n  const handleMouseMove = (e) => {\n    if (config.interactionType === \"magnetic\") {\n      const rect = e.currentTarget.getBoundingClientRect();\n      const x = e.clientX - rect.left - rect.width / 2;\n      const y = e.clientY - rect.top - rect.height / 2;\n      setMouseCoords({ x: x * 0.35, y: y * 0.35 });\n    }\n  };\n  const handleMouseLeave = () => {\n    setIsHovered(false);\n    if (config.interactionType === \"magnetic\") {\n      setMouseCoords({ x: 0, y: 0 });\n    }\n    if (hasInteracted) {\n      setTimeout(() => setHasInteracted(false), 500);\n    }\n  };\n  const handleTouchStart = () => {\n    setIsHovered(true);\n    if (config.interactionType === \"morph\" && (config.id === \"4\" || config.id === \"21\" || config.id === \"22\" || config.id === \"24\" || config.id === \"25\")) {\n      setHasInteracted(true);\n    }\n  };\n  const handleTouchEnd = () => {\n    setTimeout(() => {\n      setIsHovered(false);\n      if (hasInteracted) {\n        setTimeout(() => setHasInteracted(false), 500);\n      }\n    }, 500);\n  };\n  const showIcon2 = hasInteracted || isHovered;\n  const renderIconContent = () => {\n    switch (config.interactionType) {\n      case \"slide-arrow\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", children: !isHovered && /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              layout: true,\n              initial: { opacity: 0, x: -10 },\n              animate: { opacity: 1, x: 0 },\n              exit: { opacity: 0, x: -10 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: `flex items-center shrink-0 ${!isMatrix ? \"mr-2.5\" : \"\"}`,\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon1\"\n          ) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap\", children: config.label }),\n          /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", children: isHovered && /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              layout: true,\n              initial: { opacity: 0, x: 10 },\n              animate: { opacity: 1, x: 0 },\n              exit: { opacity: 0, x: 10 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: `flex items-center shrink-0 ${!isMatrix ? \"ml-2.5\" : \"\"}`,\n              children: Icon2 && /* @__PURE__ */ jsx3(Icon2, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon2\"\n          ) })\n        ] });\n      case \"sparkle\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", initial: false, children: !isHovered ? /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { y: -15, opacity: 0, scale: 0.8 },\n              animate: { y: 0, opacity: 1, scale: 1 },\n              exit: { y: -15, opacity: 0, scale: 0.8 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon1\"\n          ) : /* @__PURE__ */ jsxs3(\n            motion2.div,\n            {\n              initial: { y: 15, opacity: 0, scale: 0.8 },\n              animate: { y: 0, opacity: 1, scale: 1 },\n              exit: { y: 15, opacity: 0, scale: 0.8 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: [\n                Icon2 && /* @__PURE__ */ jsx3(Icon2, { className: `w-[16px] h-[16px] ${config.icon2Color || (isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\")}` }),\n                /* @__PURE__ */ jsx3(\n                  motion2.div,\n                  {\n                    initial: { opacity: 0, scale: 0, rotate: -45, y: 10 },\n                    animate: { opacity: 1, scale: 1, rotate: 0, y: 0 },\n                    exit: { opacity: 0, scale: 0, rotate: 45, y: 10 },\n                    transition: { type: \"spring\", stiffness: 600, damping: 25, delay: 0.05 },\n                    className: \"absolute -top-3 -right-2\",\n                    children: /* @__PURE__ */ jsx3(\"svg\", { className: \"w-2.5 h-2.5 text-yellow-200\", viewBox: \"0 0 24 24\", fill: \"currentColor\", children: /* @__PURE__ */ jsx3(\"path\", { d: \"M12 2l2.4 7.6H22l-6.2 4.5 2.4 7.6-6.2-4.5-6.2 4.5 2.4-7.6L2 9.6h7.6z\" }) })\n                  }\n                ),\n                /* @__PURE__ */ jsx3(\n                  motion2.div,\n                  {\n                    initial: { opacity: 0, scale: 0, rotate: 45, x: 10 },\n                    animate: { opacity: 1, scale: 1, rotate: 0, x: 0 },\n                    exit: { opacity: 0, scale: 0, rotate: -45, x: 10 },\n                    transition: { type: \"spring\", stiffness: 600, damping: 25, delay: 0.1 },\n                    className: \"absolute -top-1 -left-3\",\n                    children: /* @__PURE__ */ jsx3(\"svg\", { className: \"w-1.5 h-1.5 text-yellow-400\", viewBox: \"0 0 24 24\", fill: \"currentColor\", children: /* @__PURE__ */ jsx3(\"path\", { d: \"M12 2l2.4 7.6H22l-6.2 4.5 2.4 7.6-6.2-4.5-6.2 4.5 2.4-7.6L2 9.6h7.6z\" }) })\n                  }\n                )\n              ]\n            },\n            \"icon2\"\n          ) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label })\n        ] });\n      case \"morph\":\n      case \"color-morph\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", initial: false, children: !showIcon2 ? /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { scale: 0.5, opacity: 0 },\n              animate: { scale: 1, opacity: 1 },\n              exit: { scale: 0.5, opacity: 0 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isHovered && config.icon1Color ? config.icon1Color : isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon1\"\n          ) : /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { scale: 0.5, opacity: 0 },\n              animate: { scale: 1, opacity: 1 },\n              exit: { scale: 0.5, opacity: 0 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: Icon2 && /* @__PURE__ */ jsx3(Icon2, { className: `w-[16px] h-[16px] ${config.icon2Color || (isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\")}` })\n            },\n            \"icon2\"\n          ) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.id === \"4\" && showIcon2 ? \"Copied\" : config.label })\n        ] });\n      case \"pulse\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              animate: { scale: isHovered ? [1, 1.25, 1] : 1 },\n              transition: { duration: 0.4, ease: \"easeInOut\" },\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] transition-colors duration-300 ${isHovered && config.icon1Color ? `${config.icon1Color} fill-current` : isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            }\n          ) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label })\n        ] });\n      case \"rotate\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(motion2.div, { animate: { rotate: isHovered ? 180 : 0 }, transition: { type: \"spring\", stiffness: 400, damping: 25 }, children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` }) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label })\n        ] });\n      case \"shake\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              animate: {\n                y: isHovered ? [0, -2, 0, -2, 0] : 0,\n                rotate: isHovered ? [0, -10, 10, -10, 0] : 0\n              },\n              transition: { duration: 0.4 },\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] transition-colors duration-300 ${isHovered && config.icon1Color ? config.icon1Color : isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            }\n          ) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: `font-medium tracking-tight text-[13px] whitespace-nowrap transition-colors duration-300 ml-2.5 ${isHovered && config.icon1Color ? config.icon1Color : isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}`, children: config.label })\n        ] });\n      case \"ring\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", initial: false, children: !isHovered ? /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { rotate: -15, scale: 0.8, opacity: 0 },\n              animate: { rotate: 0, scale: 1, opacity: 1 },\n              exit: { rotate: 15, scale: 0.8, opacity: 0 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon1\"\n          ) : /* @__PURE__ */ jsxs3(\n            motion2.div,\n            {\n              initial: { rotate: -15, scale: 0.8, opacity: 0 },\n              animate: { rotate: 0, scale: 1, opacity: 1 },\n              exit: { rotate: 15, scale: 0.8, opacity: 0 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: [\n                Icon2 && /* @__PURE__ */ jsx3(Icon2, { className: `w-[16px] h-[16px] ${config.icon2Color || (isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\")}` }),\n                /* @__PURE__ */ jsx3(\n                  motion2.div,\n                  {\n                    initial: { scale: 0 },\n                    animate: { scale: 1 },\n                    transition: { type: \"spring\", stiffness: 600, damping: 15, delay: 0.1 },\n                    className: \"absolute top-0 right-0 w-1.5 h-1.5 bg-red-500 rounded-full border border-transparent\"\n                  }\n                )\n              ]\n            },\n            \"icon2\"\n          ) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label })\n        ] });\n      case \"glare\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${!isMatrix ? \"mr-2.5\" : \"\"} ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` }),\n          !isMatrix && /* @__PURE__ */ jsx3(\"span\", { className: \"font-medium tracking-tight text-[13px] whitespace-nowrap\", children: config.label }),\n          /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              animate: { x: isHovered ? [\"-150%\", \"150%\"] : \"-150%\" },\n              transition: { duration: 0.85, ease: \"easeInOut\", repeat: isHovered ? Infinity : 0, repeatDelay: 1 },\n              className: `absolute top-0 bottom-0 w-[50px] skew-x-[-20deg] pointer-events-none z-10`,\n              style: {\n                background: isLightTheme ? \"linear-gradient(90deg, transparent, rgba(0,0,0,0.12), transparent)\" : \"linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent)\"\n              }\n            }\n          )\n        ] });\n      case \"text-reveal\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0 mr-2.5\", children: /* @__PURE__ */ jsx3(motion2.div, { animate: { rotate: isHovered ? 45 : 0 }, transition: { type: \"spring\", stiffness: 400, damping: 25 }, children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` }) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(\"div\", { className: \"relative h-[18px] overflow-hidden\", children: /* @__PURE__ */ jsxs3(\n            motion2.div,\n            {\n              animate: { y: isHovered ? -18 : 0 },\n              transition: { type: \"spring\", stiffness: 400, damping: 25 },\n              className: \"flex flex-col\",\n              children: [\n                /* @__PURE__ */ jsx3(\"span\", { className: `block h-[18px] leading-[18px] font-medium tracking-tight text-[13px] whitespace-nowrap ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}`, children: config.label }),\n                /* @__PURE__ */ jsx3(\"span\", { className: `block h-[18px] leading-[18px] font-medium tracking-tight text-[13px] whitespace-nowrap ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}`, children: config.label })\n              ]\n            }\n          ) })\n        ] });\n      case \"magnetic\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${!isMatrix ? \"mr-2.5\" : \"\"} ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` }),\n          !isMatrix && /* @__PURE__ */ jsx3(\"span\", { className: \"font-medium tracking-tight text-[13px] whitespace-nowrap\", children: config.label })\n        ] });\n      case \"expand-ring\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              animate: { scale: isHovered ? 1.1 : 1 },\n              transition: { type: \"spring\", stiffness: 400, damping: 20 },\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            }\n          ) }),\n          !isMatrix && /* @__PURE__ */ jsx3(\"span\", { className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label }),\n          /* @__PURE__ */ jsx3(AnimatePresence2, { children: isHovered && /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { opacity: 1, scale: 1 },\n              animate: { opacity: 0, scale: 1.15 },\n              exit: { opacity: 0 },\n              transition: { duration: 0.6, ease: \"easeOut\" },\n              className: `absolute inset-0 rounded-[40px] pointer-events-none border ${isLightTheme ? \"border-black/25\" : \"border-white/25\"}`\n            },\n            \"expand-ring-div\"\n          ) })\n        ] });\n      default:\n        return null;\n    }\n  };\n  return /* @__PURE__ */ jsx3(\n    motion2.button,\n    {\n      layout: true,\n      transition: { type: \"spring\", stiffness: 500, damping: 25 },\n      onMouseEnter: handleMouseEnter,\n      onMouseMove: handleMouseMove,\n      onMouseLeave: handleMouseLeave,\n      onPointerEnter: handleMouseEnter,\n      onPointerLeave: handleMouseLeave,\n      onPointerMove: handleMouseMove,\n      onFocus: handleMouseEnter,\n      onBlur: handleMouseLeave,\n      onTouchStart: handleTouchStart,\n      onTouchEnd: handleTouchEnd,\n      animate: {\n        paddingLeft: isMatrix ? 0 : isHovered ? 28 : 24,\n        paddingRight: isMatrix ? 0 : isHovered ? 28 : 24,\n        x: isHovered && config.interactionType === \"magnetic\" ? mouseCoords.x : 0,\n        y: isHovered && config.interactionType === \"magnetic\" ? mouseCoords.y : 0,\n        backgroundColor: isLightTheme ? hasInteracted && config.id === \"4\" ? \"rgba(0,0,0,0.08)\" : isHovered ? \"rgba(0,0,0,0.06)\" : \"rgba(0,0,0,0.04)\" : hasInteracted && config.id === \"4\" ? \"rgba(255,255,255,0.08)\" : isHovered ? \"rgba(255,255,255,0.06)\" : \"rgba(255,255,255,0.04)\"\n      },\n      whileHover: { scale: 1.02 },\n      whileTap: { scale: 0.96 },\n      className: `relative flex items-center justify-center rounded-[40px] border-0 cursor-pointer shadow-none transition-colors duration-150 ${isMatrix ? \"w-[36px] h-[36px] sm:w-[42px] sm:h-[42px] px-0\" : \"h-[36px] min-w-[75px]\"} ${config.interactionType === \"glare\" ? \"overflow-hidden\" : \"\"} ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}`,\n      children: /* @__PURE__ */ jsx3(motion2.div, { layout: true, transition: { type: \"spring\", stiffness: 500, damping: 25 }, className: `flex items-center justify-center w-full ${isMatrix ? \"scale-100 sm:scale-[1.15] origin-center\" : \"\"}`, children: renderIconContent() })\n    }\n  );\n});\n\n// src/data/buttons.tsx\nimport {\n  ArrowRight,\n  Github,\n  Star,\n  Cloud,\n  CloudUpload,\n  Copy,\n  Check,\n  Heart,\n  Link,\n  Send,\n  Play,\n  Pause,\n  Settings,\n  Trash2,\n  Bell,\n  BellRing,\n  Search,\n  X,\n  Moon,\n  Sun,\n  Mic,\n  MicOff,\n  Video,\n  VideoOff,\n  Volume2,\n  VolumeX,\n  Lock,\n  Unlock,\n  Folder,\n  FolderOpen,\n  Eye,\n  EyeOff,\n  Bookmark,\n  ThumbsUp,\n  Download,\n  Upload,\n  User,\n  UserCheck,\n  Pen,\n  Wifi,\n  WifiOff,\n  Battery,\n  BatteryCharging,\n  Maximize,\n  Minimize,\n  RefreshCw,\n  Plus\n} from \"lucide-react\";\nimport { jsx as jsx4 } from \"react/jsx-runtime\";\nvar AppleIcon = (props) => /* @__PURE__ */ jsx4(\"svg\", { viewBox: \"0 0 384 512\", fill: \"currentColor\", ...props, children: /* @__PURE__ */ jsx4(\"path\", { d: \"M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z\" }) });\nvar buttonsData = [\n  { id: \"36\", label: \"Open Run Details\", icon1: ArrowRight, interactionType: \"inset-text\" },\n  { id: \"37\", label: \"Create\", icon1: Plus, interactionType: \"circle-create\" },\n  { id: \"1\", label: \"Download for Mac\", icon1: AppleIcon, icon2: ArrowRight, interactionType: \"slide-arrow\", hoverBg: \"#0a0a0a\" },\n  { id: \"2\", label: \"Star on GitHub\", icon1: Github, icon2: Star, interactionType: \"sparkle\", hoverBg: \"#1f1f1f\", icon2Color: \"text-yellow-400\" },\n  { id: \"3\", label: \"Deploy App\", icon1: Cloud, icon2: CloudUpload, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400\" },\n  { id: \"4\", label: \"Copy Hash\", icon1: Copy, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"5\", label: \"Sponsor\", icon1: Heart, interactionType: \"pulse\", hoverBg: \"#1f1f1f\", icon1Color: \"text-pink-500\" },\n  { id: \"6\", label: \"Share\", icon1: Link, icon2: Send, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400\" },\n  { id: \"7\", label: \"Preview\", icon1: Play, icon2: Pause, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-green-400\" },\n  { id: \"8\", label: \"Settings\", icon1: Settings, interactionType: \"rotate\", hoverBg: \"#1f1f1f\" },\n  { id: \"9\", label: \"Delete\", icon1: Trash2, interactionType: \"shake\", hoverBg: \"#1f1f1f\", icon1Color: \"text-red-400\" },\n  { id: \"10\", label: \"Subscribe\", icon1: Bell, icon2: BellRing, interactionType: \"ring\", hoverBg: \"#1f1f1f\", icon2Color: \"text-orange-400\" },\n  { id: \"11\", label: \"Search\", icon1: Search, icon2: X, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-white\" },\n  { id: \"12\", label: \"Theme\", icon1: Moon, icon2: Sun, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-yellow-400\" },\n  { id: \"13\", label: \"Microphone\", icon1: Mic, icon2: MicOff, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-red-400\" },\n  { id: \"14\", label: \"Camera\", icon1: Video, icon2: VideoOff, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-red-400\" },\n  { id: \"15\", label: \"Volume\", icon1: Volume2, icon2: VolumeX, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-neutral-500\" },\n  { id: \"16\", label: \"Lock\", icon1: Lock, icon2: Unlock, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"17\", label: \"Directory\", icon1: Folder, icon2: FolderOpen, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400\" },\n  { id: \"18\", label: \"Visibility\", icon1: Eye, icon2: EyeOff, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-neutral-500\" },\n  { id: \"19\", label: \"Save Later\", icon1: Bookmark, icon2: Bookmark, interactionType: \"color-morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400 fill-blue-400\" },\n  { id: \"20\", label: \"Like\", icon1: ThumbsUp, icon2: ThumbsUp, interactionType: \"color-morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-500 fill-blue-500\" },\n  { id: \"21\", label: \"Download\", icon1: Download, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"22\", label: \"Upload\", icon1: Upload, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400\" },\n  { id: \"23\", label: \"Account\", icon1: User, icon2: UserCheck, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"24\", label: \"Submit\", icon1: Send, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"25\", label: \"Edit\", icon1: Pen, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"26\", label: \"Network\", icon1: Wifi, icon2: WifiOff, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-red-400\" },\n  { id: \"27\", label: \"Power\", icon1: Battery, icon2: BatteryCharging, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"28\", label: \"Expand\", icon1: Maximize, icon2: Minimize, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-white\" },\n  { id: \"29\", label: \"Reload\", icon1: RefreshCw, interactionType: \"rotate\", hoverBg: \"#1f1f1f\" },\n  { id: \"30\", label: \"Favorite\", icon1: Star, icon2: Star, interactionType: \"color-morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-yellow-400 fill-yellow-400\" },\n  { id: \"31\", label: \"Glare Shine\", icon1: Star, interactionType: \"glare\", hoverBg: \"#1f1f1f\" },\n  { id: \"32\", label: \"Text Reveal\", icon1: ArrowRight, interactionType: \"text-reveal\", hoverBg: \"#1f1f1f\" },\n  { id: \"33\", label: \"Magnetic Field\", icon1: Github, interactionType: \"magnetic\", hoverBg: \"#1f1f1f\" },\n  { id: \"34\", label: \"Expand Ring\", icon1: Link, interactionType: \"expand-ring\", hoverBg: \"#1f1f1f\" },\n  { id: \"35\", label: \"Focus Blur Links\", icon1: Link, interactionType: \"focus-blur\", hoverBg: \"#1f1f1f\" }\n];\n\n// 7.tsx\nimport { jsx as jsx5 } from \"react/jsx-runtime\";\nfunction Demo() {\n  const config = buttonsData.find((button) => button.id === \"7\");\n  if (!config) return null;\n  return /* @__PURE__ */ jsx5(AnimatedButton, { config, layoutMode: \"grid\", theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n"
+}

package/registry/8.json

@@ -0,0 +1,19 @@
+{
+  "id": "8",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "8.tsx",
+  "registryFile": "8.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './8';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/AnimatedButton.tsx\nimport React2, { useState as useState2 } from \"react\";\nimport { AnimatePresence as AnimatePresence2, motion as motion2 } from \"framer-motion\";\n\n// src/components/cards/FocusBlur.tsx\nimport { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction FocusBlur({\n  items = [\n    { label: \"@Twitter\", href: \"#\" },\n    { label: \"@Threads\", href: \"#\" },\n    { label: \"@Instagram\", href: \"#\" },\n    { label: \"@GitHub\", href: \"#\" }\n  ],\n  blurAmount = 4,\n  opacityAmount = 0.4,\n  showBrackets = true,\n  className = \"\"\n}) {\n  const [hoveredIndex, setHoveredIndex] = useState(null);\n  return /* @__PURE__ */ jsx(\"div\", { className: `flex flex-wrap justify-center items-center gap-6 py-6 px-10 cursor-default ${className}`, children: items.map((item, index) => {\n    const isHovered = hoveredIndex === index;\n    const isAnyHovered = hoveredIndex !== null;\n    const isInactive = isAnyHovered && !isHovered;\n    return /* @__PURE__ */ jsxs(\n      \"a\",\n      {\n        href: item.href || \"#\",\n        onMouseEnter: () => setHoveredIndex(index),\n        onMouseLeave: () => setHoveredIndex(null),\n        className: \"relative font-semibold text-lg sm:text-2xl no-underline transition-all duration-300 select-none outline-none\",\n        style: {\n          filter: isInactive ? `blur(${blurAmount}px)` : \"none\",\n          opacity: isInactive ? opacityAmount : 1,\n          color: isHovered ? \"var(--color-blue-500, #3b82f6)\" : \"inherit\"\n        },\n        children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"relative z-10\", children: item.label }),\n          showBrackets && /* @__PURE__ */ jsx(AnimatePresence, { children: isHovered && /* @__PURE__ */ jsx(\n            motion.div,\n            {\n              initial: { opacity: 0, scale: 1.3 },\n              animate: { opacity: 1, scale: 1.1 },\n              exit: { opacity: 0, scale: 1.3 },\n              transition: { type: \"spring\", stiffness: 350, damping: 20 },\n              className: \"absolute inset-0 border-2 border-dashed border-neutral-300 dark:border-neutral-700 rounded-lg pointer-events-none z-0\",\n              style: { margin: \"-4px -8px\" }\n            }\n          ) })\n        ]\n      },\n      index\n    );\n  }) });\n}\n\n// registry/ui/hover/inset-button.tsx\nimport { Fragment, jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nvar insetButtonStyles = `\n.mova-inset-button {\n  --surface-elevated: oklch(0.996 0.001 95);\n  --surface-shell: oklch(0.963 0.003 95);\n  --ink-strong: oklch(0.205 0.004 95);\n  --ink-base: oklch(0.315 0.004 92);\n  --border-soft: oklch(0.9 0.003 95);\n  --border-base: oklch(0.84 0.004 95);\n  --sidebar: color-mix(in oklab, var(--surface-shell) 94%, white);\n  --sidebar-foreground: var(--ink-base);\n  --sidebar-border: color-mix(in oklab, var(--border-soft) 92%, white);\n  --control-hover-core: var(--surface-elevated);\n  --control-hover-core-shadow: inset 0 1px 0 color-mix(in oklab, white 14%, transparent), 0 2px 7px color-mix(in oklab, var(--ink-strong) 12%, transparent), 0 0 0 1px color-mix(in oklab, var(--border-soft) 52%, transparent);\n  position: relative; isolation: isolate; display: inline-flex;\n  align-items: center; justify-content: center; flex-shrink: 0;\n  box-sizing: border-box; height: 2.5rem; padding: 0 .95rem;\n  border: 1px solid var(--border-base); border-radius: 999px;\n  background: var(--surface-elevated); color: var(--ink-strong);\n  font: inherit; font-size: .875rem; font-weight: 500; line-height: 1.25rem;\n  white-space: nowrap; cursor: pointer; outline: none;\n  transition-property: color, background-color, border-color, box-shadow, opacity, transform, scale;\n  transition-duration: 150ms; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n}\n.mova-inset-button[data-theme=\"dark\"] {\n  --surface-elevated: oklch(0.282 0.004 95);\n  --surface-shell: oklch(0.225 0.003 95);\n  --ink-strong: oklch(0.955 0.001 95);\n  --ink-base: oklch(0.88 0.002 95);\n  --border-soft: oklch(0.35 0.004 95);\n  --border-base: oklch(0.44 0.004 95);\n  --sidebar: color-mix(in oklab, var(--surface-shell) 96%, black);\n  --sidebar-border: color-mix(in oklab, var(--border-soft) 94%, black);\n  --control-hover-core: color-mix(in oklab, var(--surface-elevated) 84%, white);\n  --control-hover-core-shadow: inset 0 1px 0 color-mix(in oklab, white 9%, transparent);\n}\n.mova-inset-button::before {\n  content: \"\"; position: absolute; z-index: -1; inset: 4px; border-radius: inherit;\n  background: var(--control-hover-core); box-shadow: var(--control-hover-core-shadow);\n  backdrop-filter: blur(16px) saturate(118%); opacity: 0; pointer-events: none;\n  transform: scale(0.82);\n  transition: opacity 160ms ease, transform 190ms cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n.mova-inset-button:is(:hover, :focus-visible, :active, [data-state=\"open\"]):not(:disabled):not([aria-disabled=\"true\"])::before { opacity: 1; transform: scale(1); }\n.mova-inset-button:active:not(:disabled):not([aria-disabled=\"true\"])::before { transform: scale(0.95); }\n.mova-inset-button[data-theme=\"light\"][data-variant=\"text\"]::before { content: none; }\n.mova-inset-button[data-theme=\"light\"][data-variant=\"text\"]:is(:hover, :focus-visible, [data-state=\"open\"]):not(:disabled):not([aria-disabled=\"true\"]) { background: color-mix(in oklab, var(--surface-elevated) 94%, black); }\n.mova-inset-button[data-theme=\"light\"][data-variant=\"text\"]:is(:active, [data-state=\"open\"]):not(:disabled):not([aria-disabled=\"true\"]) { background: color-mix(in oklab, var(--surface-elevated) 89%, black); }\n.mova-inset-button:focus-visible { outline: 3px solid color-mix(in oklab, var(--ink-base) 25%, transparent); outline-offset: 1px; }\n.mova-inset-button[data-variant=\"create\"] {\n  width: 36px; height: 36px; padding: 0; overflow: hidden; backdrop-filter: blur(22px);\n  --control-hover-core: color-mix(in oklab, white 88%, transparent);\n  --control-hover-core-shadow: 0 2px 6px color-mix(in oklab, var(--sidebar-foreground) 12%, transparent), 0 0 0 1px color-mix(in oklab, var(--sidebar-foreground) 4%, transparent);\n  border-color: color-mix(in oklab, var(--sidebar-border) 76%, white);\n  background: color-mix(in oklab, var(--sidebar-foreground) 8%, var(--sidebar));\n  color: color-mix(in oklab, var(--sidebar-foreground) 88%, var(--sidebar));\n  box-shadow: 0 6px 18px -16px rgb(15 23 42 / 0.55);\n}\n.mova-inset-button[data-theme=\"dark\"][data-variant=\"create\"] {\n  --control-hover-core: color-mix(in oklab, var(--sidebar-foreground) 20%, var(--sidebar));\n  --control-hover-core-shadow: inset 0 1px 0 color-mix(in oklab, white 10%, transparent);\n  border-color: color-mix(in oklab, var(--sidebar-border) 78%, white 22%);\n  background: color-mix(in oklab, var(--sidebar) 90%, white 10%);\n  color: color-mix(in oklab, var(--sidebar-foreground) 88%, white 12%);\n  box-shadow: 0 7px 18px -16px rgb(0 0 0 / 0.72);\n}\n.mova-inset-button:disabled, .mova-inset-button[aria-disabled=\"true\"] { pointer-events: none; opacity: .5; }\n@media (prefers-reduced-motion: reduce) {\n  .mova-inset-button { transition: none !important; }\n  .mova-inset-button::before { transform: scale(1) !important; transition: none !important; }\n}\n`;\nfunction InsetButton({ variant = \"text\", theme = \"dark\", children, className = \"\", type = \"button\", ...props }) {\n  return /* @__PURE__ */ jsxs2(Fragment, { children: [\n    /* @__PURE__ */ jsx2(\"style\", { children: insetButtonStyles }),\n    /* @__PURE__ */ jsx2(\n      \"button\",\n      {\n        type,\n        \"aria-label\": variant === \"create\" ? \"Create\" : void 0,\n        ...props,\n        \"data-theme\": theme,\n        \"data-variant\": variant,\n        className: `mova-inset-button ${className}`,\n        children: variant === \"create\" ? /* @__PURE__ */ jsx2(\"svg\", { width: \"16\", height: \"16\", viewBox: \"0 0 24 24\", fill: \"none\", stroke: \"currentColor\", strokeWidth: \"2\", strokeLinecap: \"round\", strokeLinejoin: \"round\", \"aria-hidden\": \"true\", children: /* @__PURE__ */ jsx2(\"path\", { d: \"M12 5v14M5 12h14\" }) }) : children\n      }\n    )\n  ] });\n}\n\n// src/components/AnimatedButton.tsx\nimport { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from \"react/jsx-runtime\";\nvar AnimatedButton = React2.memo(function AnimatedButton2({ config, layoutMode, theme = \"dark\" }) {\n  const [isHovered, setIsHovered] = useState2(false);\n  const [hasInteracted, setHasInteracted] = useState2(false);\n  const [mouseCoords, setMouseCoords] = useState2({ x: 0, y: 0 });\n  if (config.interactionType === \"inset-text\" || config.interactionType === \"circle-create\") {\n    return /* @__PURE__ */ jsx3(\n      InsetButton,\n      {\n        theme,\n        variant: config.interactionType === \"circle-create\" ? \"create\" : \"text\",\n        \"aria-label\": config.label,\n        style: layoutMode === \"matrix\" && config.interactionType === \"inset-text\" ? { zoom: 0.55 } : void 0,\n        children: config.label\n      }\n    );\n  }\n  if (config.interactionType === \"focus-blur\") {\n    return /* @__PURE__ */ jsx3(\n      FocusBlur,\n      {\n        items: [\n          { label: \"@X\", href: \"#\" },\n          { label: \"@Threads\", href: \"#\" },\n          { label: \"@GitHub\", href: \"#\" }\n        ],\n        showBrackets: true,\n        className: layoutMode === \"matrix\" ? \"scale-[0.5] origin-center text-[10px] gap-1 px-1 py-1\" : \"text-sm gap-4\"\n      }\n    );\n  }\n  const Icon1 = config.icon1;\n  const Icon2 = config.icon2;\n  const isMatrix = layoutMode === \"matrix\";\n  const isLightTheme = theme === \"light\";\n  const handleMouseEnter = () => {\n    setIsHovered(true);\n    if (config.interactionType === \"morph\" && (config.id === \"4\" || config.id === \"21\" || config.id === \"22\" || config.id === \"24\" || config.id === \"25\")) {\n      setHasInteracted(true);\n    }\n  };\n  const handleMouseMove = (e) => {\n    if (config.interactionType === \"magnetic\") {\n      const rect = e.currentTarget.getBoundingClientRect();\n      const x = e.clientX - rect.left - rect.width / 2;\n      const y = e.clientY - rect.top - rect.height / 2;\n      setMouseCoords({ x: x * 0.35, y: y * 0.35 });\n    }\n  };\n  const handleMouseLeave = () => {\n    setIsHovered(false);\n    if (config.interactionType === \"magnetic\") {\n      setMouseCoords({ x: 0, y: 0 });\n    }\n    if (hasInteracted) {\n      setTimeout(() => setHasInteracted(false), 500);\n    }\n  };\n  const handleTouchStart = () => {\n    setIsHovered(true);\n    if (config.interactionType === \"morph\" && (config.id === \"4\" || config.id === \"21\" || config.id === \"22\" || config.id === \"24\" || config.id === \"25\")) {\n      setHasInteracted(true);\n    }\n  };\n  const handleTouchEnd = () => {\n    setTimeout(() => {\n      setIsHovered(false);\n      if (hasInteracted) {\n        setTimeout(() => setHasInteracted(false), 500);\n      }\n    }, 500);\n  };\n  const showIcon2 = hasInteracted || isHovered;\n  const renderIconContent = () => {\n    switch (config.interactionType) {\n      case \"slide-arrow\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", children: !isHovered && /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              layout: true,\n              initial: { opacity: 0, x: -10 },\n              animate: { opacity: 1, x: 0 },\n              exit: { opacity: 0, x: -10 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: `flex items-center shrink-0 ${!isMatrix ? \"mr-2.5\" : \"\"}`,\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon1\"\n          ) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap\", children: config.label }),\n          /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", children: isHovered && /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              layout: true,\n              initial: { opacity: 0, x: 10 },\n              animate: { opacity: 1, x: 0 },\n              exit: { opacity: 0, x: 10 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: `flex items-center shrink-0 ${!isMatrix ? \"ml-2.5\" : \"\"}`,\n              children: Icon2 && /* @__PURE__ */ jsx3(Icon2, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon2\"\n          ) })\n        ] });\n      case \"sparkle\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", initial: false, children: !isHovered ? /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { y: -15, opacity: 0, scale: 0.8 },\n              animate: { y: 0, opacity: 1, scale: 1 },\n              exit: { y: -15, opacity: 0, scale: 0.8 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon1\"\n          ) : /* @__PURE__ */ jsxs3(\n            motion2.div,\n            {\n              initial: { y: 15, opacity: 0, scale: 0.8 },\n              animate: { y: 0, opacity: 1, scale: 1 },\n              exit: { y: 15, opacity: 0, scale: 0.8 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: [\n                Icon2 && /* @__PURE__ */ jsx3(Icon2, { className: `w-[16px] h-[16px] ${config.icon2Color || (isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\")}` }),\n                /* @__PURE__ */ jsx3(\n                  motion2.div,\n                  {\n                    initial: { opacity: 0, scale: 0, rotate: -45, y: 10 },\n                    animate: { opacity: 1, scale: 1, rotate: 0, y: 0 },\n                    exit: { opacity: 0, scale: 0, rotate: 45, y: 10 },\n                    transition: { type: \"spring\", stiffness: 600, damping: 25, delay: 0.05 },\n                    className: \"absolute -top-3 -right-2\",\n                    children: /* @__PURE__ */ jsx3(\"svg\", { className: \"w-2.5 h-2.5 text-yellow-200\", viewBox: \"0 0 24 24\", fill: \"currentColor\", children: /* @__PURE__ */ jsx3(\"path\", { d: \"M12 2l2.4 7.6H22l-6.2 4.5 2.4 7.6-6.2-4.5-6.2 4.5 2.4-7.6L2 9.6h7.6z\" }) })\n                  }\n                ),\n                /* @__PURE__ */ jsx3(\n                  motion2.div,\n                  {\n                    initial: { opacity: 0, scale: 0, rotate: 45, x: 10 },\n                    animate: { opacity: 1, scale: 1, rotate: 0, x: 0 },\n                    exit: { opacity: 0, scale: 0, rotate: -45, x: 10 },\n                    transition: { type: \"spring\", stiffness: 600, damping: 25, delay: 0.1 },\n                    className: \"absolute -top-1 -left-3\",\n                    children: /* @__PURE__ */ jsx3(\"svg\", { className: \"w-1.5 h-1.5 text-yellow-400\", viewBox: \"0 0 24 24\", fill: \"currentColor\", children: /* @__PURE__ */ jsx3(\"path\", { d: \"M12 2l2.4 7.6H22l-6.2 4.5 2.4 7.6-6.2-4.5-6.2 4.5 2.4-7.6L2 9.6h7.6z\" }) })\n                  }\n                )\n              ]\n            },\n            \"icon2\"\n          ) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label })\n        ] });\n      case \"morph\":\n      case \"color-morph\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", initial: false, children: !showIcon2 ? /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { scale: 0.5, opacity: 0 },\n              animate: { scale: 1, opacity: 1 },\n              exit: { scale: 0.5, opacity: 0 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isHovered && config.icon1Color ? config.icon1Color : isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon1\"\n          ) : /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { scale: 0.5, opacity: 0 },\n              animate: { scale: 1, opacity: 1 },\n              exit: { scale: 0.5, opacity: 0 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: Icon2 && /* @__PURE__ */ jsx3(Icon2, { className: `w-[16px] h-[16px] ${config.icon2Color || (isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\")}` })\n            },\n            \"icon2\"\n          ) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.id === \"4\" && showIcon2 ? \"Copied\" : config.label })\n        ] });\n      case \"pulse\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              animate: { scale: isHovered ? [1, 1.25, 1] : 1 },\n              transition: { duration: 0.4, ease: \"easeInOut\" },\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] transition-colors duration-300 ${isHovered && config.icon1Color ? `${config.icon1Color} fill-current` : isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            }\n          ) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label })\n        ] });\n      case \"rotate\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(motion2.div, { animate: { rotate: isHovered ? 180 : 0 }, transition: { type: \"spring\", stiffness: 400, damping: 25 }, children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` }) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label })\n        ] });\n      case \"shake\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              animate: {\n                y: isHovered ? [0, -2, 0, -2, 0] : 0,\n                rotate: isHovered ? [0, -10, 10, -10, 0] : 0\n              },\n              transition: { duration: 0.4 },\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] transition-colors duration-300 ${isHovered && config.icon1Color ? config.icon1Color : isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            }\n          ) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: `font-medium tracking-tight text-[13px] whitespace-nowrap transition-colors duration-300 ml-2.5 ${isHovered && config.icon1Color ? config.icon1Color : isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}`, children: config.label })\n        ] });\n      case \"ring\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", initial: false, children: !isHovered ? /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { rotate: -15, scale: 0.8, opacity: 0 },\n              animate: { rotate: 0, scale: 1, opacity: 1 },\n              exit: { rotate: 15, scale: 0.8, opacity: 0 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon1\"\n          ) : /* @__PURE__ */ jsxs3(\n            motion2.div,\n            {\n              initial: { rotate: -15, scale: 0.8, opacity: 0 },\n              animate: { rotate: 0, scale: 1, opacity: 1 },\n              exit: { rotate: 15, scale: 0.8, opacity: 0 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: [\n                Icon2 && /* @__PURE__ */ jsx3(Icon2, { className: `w-[16px] h-[16px] ${config.icon2Color || (isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\")}` }),\n                /* @__PURE__ */ jsx3(\n                  motion2.div,\n                  {\n                    initial: { scale: 0 },\n                    animate: { scale: 1 },\n                    transition: { type: \"spring\", stiffness: 600, damping: 15, delay: 0.1 },\n                    className: \"absolute top-0 right-0 w-1.5 h-1.5 bg-red-500 rounded-full border border-transparent\"\n                  }\n                )\n              ]\n            },\n            \"icon2\"\n          ) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label })\n        ] });\n      case \"glare\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${!isMatrix ? \"mr-2.5\" : \"\"} ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` }),\n          !isMatrix && /* @__PURE__ */ jsx3(\"span\", { className: \"font-medium tracking-tight text-[13px] whitespace-nowrap\", children: config.label }),\n          /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              animate: { x: isHovered ? [\"-150%\", \"150%\"] : \"-150%\" },\n              transition: { duration: 0.85, ease: \"easeInOut\", repeat: isHovered ? Infinity : 0, repeatDelay: 1 },\n              className: `absolute top-0 bottom-0 w-[50px] skew-x-[-20deg] pointer-events-none z-10`,\n              style: {\n                background: isLightTheme ? \"linear-gradient(90deg, transparent, rgba(0,0,0,0.12), transparent)\" : \"linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent)\"\n              }\n            }\n          )\n        ] });\n      case \"text-reveal\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0 mr-2.5\", children: /* @__PURE__ */ jsx3(motion2.div, { animate: { rotate: isHovered ? 45 : 0 }, transition: { type: \"spring\", stiffness: 400, damping: 25 }, children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` }) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(\"div\", { className: \"relative h-[18px] overflow-hidden\", children: /* @__PURE__ */ jsxs3(\n            motion2.div,\n            {\n              animate: { y: isHovered ? -18 : 0 },\n              transition: { type: \"spring\", stiffness: 400, damping: 25 },\n              className: \"flex flex-col\",\n              children: [\n                /* @__PURE__ */ jsx3(\"span\", { className: `block h-[18px] leading-[18px] font-medium tracking-tight text-[13px] whitespace-nowrap ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}`, children: config.label }),\n                /* @__PURE__ */ jsx3(\"span\", { className: `block h-[18px] leading-[18px] font-medium tracking-tight text-[13px] whitespace-nowrap ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}`, children: config.label })\n              ]\n            }\n          ) })\n        ] });\n      case \"magnetic\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${!isMatrix ? \"mr-2.5\" : \"\"} ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` }),\n          !isMatrix && /* @__PURE__ */ jsx3(\"span\", { className: \"font-medium tracking-tight text-[13px] whitespace-nowrap\", children: config.label })\n        ] });\n      case \"expand-ring\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              animate: { scale: isHovered ? 1.1 : 1 },\n              transition: { type: \"spring\", stiffness: 400, damping: 20 },\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            }\n          ) }),\n          !isMatrix && /* @__PURE__ */ jsx3(\"span\", { className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label }),\n          /* @__PURE__ */ jsx3(AnimatePresence2, { children: isHovered && /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { opacity: 1, scale: 1 },\n              animate: { opacity: 0, scale: 1.15 },\n              exit: { opacity: 0 },\n              transition: { duration: 0.6, ease: \"easeOut\" },\n              className: `absolute inset-0 rounded-[40px] pointer-events-none border ${isLightTheme ? \"border-black/25\" : \"border-white/25\"}`\n            },\n            \"expand-ring-div\"\n          ) })\n        ] });\n      default:\n        return null;\n    }\n  };\n  return /* @__PURE__ */ jsx3(\n    motion2.button,\n    {\n      layout: true,\n      transition: { type: \"spring\", stiffness: 500, damping: 25 },\n      onMouseEnter: handleMouseEnter,\n      onMouseMove: handleMouseMove,\n      onMouseLeave: handleMouseLeave,\n      onPointerEnter: handleMouseEnter,\n      onPointerLeave: handleMouseLeave,\n      onPointerMove: handleMouseMove,\n      onFocus: handleMouseEnter,\n      onBlur: handleMouseLeave,\n      onTouchStart: handleTouchStart,\n      onTouchEnd: handleTouchEnd,\n      animate: {\n        paddingLeft: isMatrix ? 0 : isHovered ? 28 : 24,\n        paddingRight: isMatrix ? 0 : isHovered ? 28 : 24,\n        x: isHovered && config.interactionType === \"magnetic\" ? mouseCoords.x : 0,\n        y: isHovered && config.interactionType === \"magnetic\" ? mouseCoords.y : 0,\n        backgroundColor: isLightTheme ? hasInteracted && config.id === \"4\" ? \"rgba(0,0,0,0.08)\" : isHovered ? \"rgba(0,0,0,0.06)\" : \"rgba(0,0,0,0.04)\" : hasInteracted && config.id === \"4\" ? \"rgba(255,255,255,0.08)\" : isHovered ? \"rgba(255,255,255,0.06)\" : \"rgba(255,255,255,0.04)\"\n      },\n      whileHover: { scale: 1.02 },\n      whileTap: { scale: 0.96 },\n      className: `relative flex items-center justify-center rounded-[40px] border-0 cursor-pointer shadow-none transition-colors duration-150 ${isMatrix ? \"w-[36px] h-[36px] sm:w-[42px] sm:h-[42px] px-0\" : \"h-[36px] min-w-[75px]\"} ${config.interactionType === \"glare\" ? \"overflow-hidden\" : \"\"} ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}`,\n      children: /* @__PURE__ */ jsx3(motion2.div, { layout: true, transition: { type: \"spring\", stiffness: 500, damping: 25 }, className: `flex items-center justify-center w-full ${isMatrix ? \"scale-100 sm:scale-[1.15] origin-center\" : \"\"}`, children: renderIconContent() })\n    }\n  );\n});\n\n// src/data/buttons.tsx\nimport {\n  ArrowRight,\n  Github,\n  Star,\n  Cloud,\n  CloudUpload,\n  Copy,\n  Check,\n  Heart,\n  Link,\n  Send,\n  Play,\n  Pause,\n  Settings,\n  Trash2,\n  Bell,\n  BellRing,\n  Search,\n  X,\n  Moon,\n  Sun,\n  Mic,\n  MicOff,\n  Video,\n  VideoOff,\n  Volume2,\n  VolumeX,\n  Lock,\n  Unlock,\n  Folder,\n  FolderOpen,\n  Eye,\n  EyeOff,\n  Bookmark,\n  ThumbsUp,\n  Download,\n  Upload,\n  User,\n  UserCheck,\n  Pen,\n  Wifi,\n  WifiOff,\n  Battery,\n  BatteryCharging,\n  Maximize,\n  Minimize,\n  RefreshCw,\n  Plus\n} from \"lucide-react\";\nimport { jsx as jsx4 } from \"react/jsx-runtime\";\nvar AppleIcon = (props) => /* @__PURE__ */ jsx4(\"svg\", { viewBox: \"0 0 384 512\", fill: \"currentColor\", ...props, children: /* @__PURE__ */ jsx4(\"path\", { d: \"M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z\" }) });\nvar buttonsData = [\n  { id: \"36\", label: \"Open Run Details\", icon1: ArrowRight, interactionType: \"inset-text\" },\n  { id: \"37\", label: \"Create\", icon1: Plus, interactionType: \"circle-create\" },\n  { id: \"1\", label: \"Download for Mac\", icon1: AppleIcon, icon2: ArrowRight, interactionType: \"slide-arrow\", hoverBg: \"#0a0a0a\" },\n  { id: \"2\", label: \"Star on GitHub\", icon1: Github, icon2: Star, interactionType: \"sparkle\", hoverBg: \"#1f1f1f\", icon2Color: \"text-yellow-400\" },\n  { id: \"3\", label: \"Deploy App\", icon1: Cloud, icon2: CloudUpload, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400\" },\n  { id: \"4\", label: \"Copy Hash\", icon1: Copy, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"5\", label: \"Sponsor\", icon1: Heart, interactionType: \"pulse\", hoverBg: \"#1f1f1f\", icon1Color: \"text-pink-500\" },\n  { id: \"6\", label: \"Share\", icon1: Link, icon2: Send, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400\" },\n  { id: \"7\", label: \"Preview\", icon1: Play, icon2: Pause, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-green-400\" },\n  { id: \"8\", label: \"Settings\", icon1: Settings, interactionType: \"rotate\", hoverBg: \"#1f1f1f\" },\n  { id: \"9\", label: \"Delete\", icon1: Trash2, interactionType: \"shake\", hoverBg: \"#1f1f1f\", icon1Color: \"text-red-400\" },\n  { id: \"10\", label: \"Subscribe\", icon1: Bell, icon2: BellRing, interactionType: \"ring\", hoverBg: \"#1f1f1f\", icon2Color: \"text-orange-400\" },\n  { id: \"11\", label: \"Search\", icon1: Search, icon2: X, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-white\" },\n  { id: \"12\", label: \"Theme\", icon1: Moon, icon2: Sun, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-yellow-400\" },\n  { id: \"13\", label: \"Microphone\", icon1: Mic, icon2: MicOff, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-red-400\" },\n  { id: \"14\", label: \"Camera\", icon1: Video, icon2: VideoOff, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-red-400\" },\n  { id: \"15\", label: \"Volume\", icon1: Volume2, icon2: VolumeX, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-neutral-500\" },\n  { id: \"16\", label: \"Lock\", icon1: Lock, icon2: Unlock, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"17\", label: \"Directory\", icon1: Folder, icon2: FolderOpen, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400\" },\n  { id: \"18\", label: \"Visibility\", icon1: Eye, icon2: EyeOff, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-neutral-500\" },\n  { id: \"19\", label: \"Save Later\", icon1: Bookmark, icon2: Bookmark, interactionType: \"color-morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400 fill-blue-400\" },\n  { id: \"20\", label: \"Like\", icon1: ThumbsUp, icon2: ThumbsUp, interactionType: \"color-morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-500 fill-blue-500\" },\n  { id: \"21\", label: \"Download\", icon1: Download, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"22\", label: \"Upload\", icon1: Upload, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400\" },\n  { id: \"23\", label: \"Account\", icon1: User, icon2: UserCheck, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"24\", label: \"Submit\", icon1: Send, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"25\", label: \"Edit\", icon1: Pen, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"26\", label: \"Network\", icon1: Wifi, icon2: WifiOff, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-red-400\" },\n  { id: \"27\", label: \"Power\", icon1: Battery, icon2: BatteryCharging, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"28\", label: \"Expand\", icon1: Maximize, icon2: Minimize, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-white\" },\n  { id: \"29\", label: \"Reload\", icon1: RefreshCw, interactionType: \"rotate\", hoverBg: \"#1f1f1f\" },\n  { id: \"30\", label: \"Favorite\", icon1: Star, icon2: Star, interactionType: \"color-morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-yellow-400 fill-yellow-400\" },\n  { id: \"31\", label: \"Glare Shine\", icon1: Star, interactionType: \"glare\", hoverBg: \"#1f1f1f\" },\n  { id: \"32\", label: \"Text Reveal\", icon1: ArrowRight, interactionType: \"text-reveal\", hoverBg: \"#1f1f1f\" },\n  { id: \"33\", label: \"Magnetic Field\", icon1: Github, interactionType: \"magnetic\", hoverBg: \"#1f1f1f\" },\n  { id: \"34\", label: \"Expand Ring\", icon1: Link, interactionType: \"expand-ring\", hoverBg: \"#1f1f1f\" },\n  { id: \"35\", label: \"Focus Blur Links\", icon1: Link, interactionType: \"focus-blur\", hoverBg: \"#1f1f1f\" }\n];\n\n// 8.tsx\nimport { jsx as jsx5 } from \"react/jsx-runtime\";\nfunction Demo() {\n  const config = buttonsData.find((button) => button.id === \"8\");\n  if (!config) return null;\n  return /* @__PURE__ */ jsx5(AnimatedButton, { config, layoutMode: \"grid\", theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n"
+}

package/registry/9.json

@@ -0,0 +1,19 @@
+{
+  "id": "9",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "9.tsx",
+  "registryFile": "9.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './9';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/AnimatedButton.tsx\nimport React2, { useState as useState2 } from \"react\";\nimport { AnimatePresence as AnimatePresence2, motion as motion2 } from \"framer-motion\";\n\n// src/components/cards/FocusBlur.tsx\nimport { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction FocusBlur({\n  items = [\n    { label: \"@Twitter\", href: \"#\" },\n    { label: \"@Threads\", href: \"#\" },\n    { label: \"@Instagram\", href: \"#\" },\n    { label: \"@GitHub\", href: \"#\" }\n  ],\n  blurAmount = 4,\n  opacityAmount = 0.4,\n  showBrackets = true,\n  className = \"\"\n}) {\n  const [hoveredIndex, setHoveredIndex] = useState(null);\n  return /* @__PURE__ */ jsx(\"div\", { className: `flex flex-wrap justify-center items-center gap-6 py-6 px-10 cursor-default ${className}`, children: items.map((item, index) => {\n    const isHovered = hoveredIndex === index;\n    const isAnyHovered = hoveredIndex !== null;\n    const isInactive = isAnyHovered && !isHovered;\n    return /* @__PURE__ */ jsxs(\n      \"a\",\n      {\n        href: item.href || \"#\",\n        onMouseEnter: () => setHoveredIndex(index),\n        onMouseLeave: () => setHoveredIndex(null),\n        className: \"relative font-semibold text-lg sm:text-2xl no-underline transition-all duration-300 select-none outline-none\",\n        style: {\n          filter: isInactive ? `blur(${blurAmount}px)` : \"none\",\n          opacity: isInactive ? opacityAmount : 1,\n          color: isHovered ? \"var(--color-blue-500, #3b82f6)\" : \"inherit\"\n        },\n        children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"relative z-10\", children: item.label }),\n          showBrackets && /* @__PURE__ */ jsx(AnimatePresence, { children: isHovered && /* @__PURE__ */ jsx(\n            motion.div,\n            {\n              initial: { opacity: 0, scale: 1.3 },\n              animate: { opacity: 1, scale: 1.1 },\n              exit: { opacity: 0, scale: 1.3 },\n              transition: { type: \"spring\", stiffness: 350, damping: 20 },\n              className: \"absolute inset-0 border-2 border-dashed border-neutral-300 dark:border-neutral-700 rounded-lg pointer-events-none z-0\",\n              style: { margin: \"-4px -8px\" }\n            }\n          ) })\n        ]\n      },\n      index\n    );\n  }) });\n}\n\n// registry/ui/hover/inset-button.tsx\nimport { Fragment, jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nvar insetButtonStyles = `\n.mova-inset-button {\n  --surface-elevated: oklch(0.996 0.001 95);\n  --surface-shell: oklch(0.963 0.003 95);\n  --ink-strong: oklch(0.205 0.004 95);\n  --ink-base: oklch(0.315 0.004 92);\n  --border-soft: oklch(0.9 0.003 95);\n  --border-base: oklch(0.84 0.004 95);\n  --sidebar: color-mix(in oklab, var(--surface-shell) 94%, white);\n  --sidebar-foreground: var(--ink-base);\n  --sidebar-border: color-mix(in oklab, var(--border-soft) 92%, white);\n  --control-hover-core: var(--surface-elevated);\n  --control-hover-core-shadow: inset 0 1px 0 color-mix(in oklab, white 14%, transparent), 0 2px 7px color-mix(in oklab, var(--ink-strong) 12%, transparent), 0 0 0 1px color-mix(in oklab, var(--border-soft) 52%, transparent);\n  position: relative; isolation: isolate; display: inline-flex;\n  align-items: center; justify-content: center; flex-shrink: 0;\n  box-sizing: border-box; height: 2.5rem; padding: 0 .95rem;\n  border: 1px solid var(--border-base); border-radius: 999px;\n  background: var(--surface-elevated); color: var(--ink-strong);\n  font: inherit; font-size: .875rem; font-weight: 500; line-height: 1.25rem;\n  white-space: nowrap; cursor: pointer; outline: none;\n  transition-property: color, background-color, border-color, box-shadow, opacity, transform, scale;\n  transition-duration: 150ms; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n}\n.mova-inset-button[data-theme=\"dark\"] {\n  --surface-elevated: oklch(0.282 0.004 95);\n  --surface-shell: oklch(0.225 0.003 95);\n  --ink-strong: oklch(0.955 0.001 95);\n  --ink-base: oklch(0.88 0.002 95);\n  --border-soft: oklch(0.35 0.004 95);\n  --border-base: oklch(0.44 0.004 95);\n  --sidebar: color-mix(in oklab, var(--surface-shell) 96%, black);\n  --sidebar-border: color-mix(in oklab, var(--border-soft) 94%, black);\n  --control-hover-core: color-mix(in oklab, var(--surface-elevated) 84%, white);\n  --control-hover-core-shadow: inset 0 1px 0 color-mix(in oklab, white 9%, transparent);\n}\n.mova-inset-button::before {\n  content: \"\"; position: absolute; z-index: -1; inset: 4px; border-radius: inherit;\n  background: var(--control-hover-core); box-shadow: var(--control-hover-core-shadow);\n  backdrop-filter: blur(16px) saturate(118%); opacity: 0; pointer-events: none;\n  transform: scale(0.82);\n  transition: opacity 160ms ease, transform 190ms cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n.mova-inset-button:is(:hover, :focus-visible, :active, [data-state=\"open\"]):not(:disabled):not([aria-disabled=\"true\"])::before { opacity: 1; transform: scale(1); }\n.mova-inset-button:active:not(:disabled):not([aria-disabled=\"true\"])::before { transform: scale(0.95); }\n.mova-inset-button[data-theme=\"light\"][data-variant=\"text\"]::before { content: none; }\n.mova-inset-button[data-theme=\"light\"][data-variant=\"text\"]:is(:hover, :focus-visible, [data-state=\"open\"]):not(:disabled):not([aria-disabled=\"true\"]) { background: color-mix(in oklab, var(--surface-elevated) 94%, black); }\n.mova-inset-button[data-theme=\"light\"][data-variant=\"text\"]:is(:active, [data-state=\"open\"]):not(:disabled):not([aria-disabled=\"true\"]) { background: color-mix(in oklab, var(--surface-elevated) 89%, black); }\n.mova-inset-button:focus-visible { outline: 3px solid color-mix(in oklab, var(--ink-base) 25%, transparent); outline-offset: 1px; }\n.mova-inset-button[data-variant=\"create\"] {\n  width: 36px; height: 36px; padding: 0; overflow: hidden; backdrop-filter: blur(22px);\n  --control-hover-core: color-mix(in oklab, white 88%, transparent);\n  --control-hover-core-shadow: 0 2px 6px color-mix(in oklab, var(--sidebar-foreground) 12%, transparent), 0 0 0 1px color-mix(in oklab, var(--sidebar-foreground) 4%, transparent);\n  border-color: color-mix(in oklab, var(--sidebar-border) 76%, white);\n  background: color-mix(in oklab, var(--sidebar-foreground) 8%, var(--sidebar));\n  color: color-mix(in oklab, var(--sidebar-foreground) 88%, var(--sidebar));\n  box-shadow: 0 6px 18px -16px rgb(15 23 42 / 0.55);\n}\n.mova-inset-button[data-theme=\"dark\"][data-variant=\"create\"] {\n  --control-hover-core: color-mix(in oklab, var(--sidebar-foreground) 20%, var(--sidebar));\n  --control-hover-core-shadow: inset 0 1px 0 color-mix(in oklab, white 10%, transparent);\n  border-color: color-mix(in oklab, var(--sidebar-border) 78%, white 22%);\n  background: color-mix(in oklab, var(--sidebar) 90%, white 10%);\n  color: color-mix(in oklab, var(--sidebar-foreground) 88%, white 12%);\n  box-shadow: 0 7px 18px -16px rgb(0 0 0 / 0.72);\n}\n.mova-inset-button:disabled, .mova-inset-button[aria-disabled=\"true\"] { pointer-events: none; opacity: .5; }\n@media (prefers-reduced-motion: reduce) {\n  .mova-inset-button { transition: none !important; }\n  .mova-inset-button::before { transform: scale(1) !important; transition: none !important; }\n}\n`;\nfunction InsetButton({ variant = \"text\", theme = \"dark\", children, className = \"\", type = \"button\", ...props }) {\n  return /* @__PURE__ */ jsxs2(Fragment, { children: [\n    /* @__PURE__ */ jsx2(\"style\", { children: insetButtonStyles }),\n    /* @__PURE__ */ jsx2(\n      \"button\",\n      {\n        type,\n        \"aria-label\": variant === \"create\" ? \"Create\" : void 0,\n        ...props,\n        \"data-theme\": theme,\n        \"data-variant\": variant,\n        className: `mova-inset-button ${className}`,\n        children: variant === \"create\" ? /* @__PURE__ */ jsx2(\"svg\", { width: \"16\", height: \"16\", viewBox: \"0 0 24 24\", fill: \"none\", stroke: \"currentColor\", strokeWidth: \"2\", strokeLinecap: \"round\", strokeLinejoin: \"round\", \"aria-hidden\": \"true\", children: /* @__PURE__ */ jsx2(\"path\", { d: \"M12 5v14M5 12h14\" }) }) : children\n      }\n    )\n  ] });\n}\n\n// src/components/AnimatedButton.tsx\nimport { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from \"react/jsx-runtime\";\nvar AnimatedButton = React2.memo(function AnimatedButton2({ config, layoutMode, theme = \"dark\" }) {\n  const [isHovered, setIsHovered] = useState2(false);\n  const [hasInteracted, setHasInteracted] = useState2(false);\n  const [mouseCoords, setMouseCoords] = useState2({ x: 0, y: 0 });\n  if (config.interactionType === \"inset-text\" || config.interactionType === \"circle-create\") {\n    return /* @__PURE__ */ jsx3(\n      InsetButton,\n      {\n        theme,\n        variant: config.interactionType === \"circle-create\" ? \"create\" : \"text\",\n        \"aria-label\": config.label,\n        style: layoutMode === \"matrix\" && config.interactionType === \"inset-text\" ? { zoom: 0.55 } : void 0,\n        children: config.label\n      }\n    );\n  }\n  if (config.interactionType === \"focus-blur\") {\n    return /* @__PURE__ */ jsx3(\n      FocusBlur,\n      {\n        items: [\n          { label: \"@X\", href: \"#\" },\n          { label: \"@Threads\", href: \"#\" },\n          { label: \"@GitHub\", href: \"#\" }\n        ],\n        showBrackets: true,\n        className: layoutMode === \"matrix\" ? \"scale-[0.5] origin-center text-[10px] gap-1 px-1 py-1\" : \"text-sm gap-4\"\n      }\n    );\n  }\n  const Icon1 = config.icon1;\n  const Icon2 = config.icon2;\n  const isMatrix = layoutMode === \"matrix\";\n  const isLightTheme = theme === \"light\";\n  const handleMouseEnter = () => {\n    setIsHovered(true);\n    if (config.interactionType === \"morph\" && (config.id === \"4\" || config.id === \"21\" || config.id === \"22\" || config.id === \"24\" || config.id === \"25\")) {\n      setHasInteracted(true);\n    }\n  };\n  const handleMouseMove = (e) => {\n    if (config.interactionType === \"magnetic\") {\n      const rect = e.currentTarget.getBoundingClientRect();\n      const x = e.clientX - rect.left - rect.width / 2;\n      const y = e.clientY - rect.top - rect.height / 2;\n      setMouseCoords({ x: x * 0.35, y: y * 0.35 });\n    }\n  };\n  const handleMouseLeave = () => {\n    setIsHovered(false);\n    if (config.interactionType === \"magnetic\") {\n      setMouseCoords({ x: 0, y: 0 });\n    }\n    if (hasInteracted) {\n      setTimeout(() => setHasInteracted(false), 500);\n    }\n  };\n  const handleTouchStart = () => {\n    setIsHovered(true);\n    if (config.interactionType === \"morph\" && (config.id === \"4\" || config.id === \"21\" || config.id === \"22\" || config.id === \"24\" || config.id === \"25\")) {\n      setHasInteracted(true);\n    }\n  };\n  const handleTouchEnd = () => {\n    setTimeout(() => {\n      setIsHovered(false);\n      if (hasInteracted) {\n        setTimeout(() => setHasInteracted(false), 500);\n      }\n    }, 500);\n  };\n  const showIcon2 = hasInteracted || isHovered;\n  const renderIconContent = () => {\n    switch (config.interactionType) {\n      case \"slide-arrow\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", children: !isHovered && /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              layout: true,\n              initial: { opacity: 0, x: -10 },\n              animate: { opacity: 1, x: 0 },\n              exit: { opacity: 0, x: -10 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: `flex items-center shrink-0 ${!isMatrix ? \"mr-2.5\" : \"\"}`,\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon1\"\n          ) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap\", children: config.label }),\n          /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", children: isHovered && /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              layout: true,\n              initial: { opacity: 0, x: 10 },\n              animate: { opacity: 1, x: 0 },\n              exit: { opacity: 0, x: 10 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: `flex items-center shrink-0 ${!isMatrix ? \"ml-2.5\" : \"\"}`,\n              children: Icon2 && /* @__PURE__ */ jsx3(Icon2, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon2\"\n          ) })\n        ] });\n      case \"sparkle\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", initial: false, children: !isHovered ? /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { y: -15, opacity: 0, scale: 0.8 },\n              animate: { y: 0, opacity: 1, scale: 1 },\n              exit: { y: -15, opacity: 0, scale: 0.8 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon1\"\n          ) : /* @__PURE__ */ jsxs3(\n            motion2.div,\n            {\n              initial: { y: 15, opacity: 0, scale: 0.8 },\n              animate: { y: 0, opacity: 1, scale: 1 },\n              exit: { y: 15, opacity: 0, scale: 0.8 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: [\n                Icon2 && /* @__PURE__ */ jsx3(Icon2, { className: `w-[16px] h-[16px] ${config.icon2Color || (isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\")}` }),\n                /* @__PURE__ */ jsx3(\n                  motion2.div,\n                  {\n                    initial: { opacity: 0, scale: 0, rotate: -45, y: 10 },\n                    animate: { opacity: 1, scale: 1, rotate: 0, y: 0 },\n                    exit: { opacity: 0, scale: 0, rotate: 45, y: 10 },\n                    transition: { type: \"spring\", stiffness: 600, damping: 25, delay: 0.05 },\n                    className: \"absolute -top-3 -right-2\",\n                    children: /* @__PURE__ */ jsx3(\"svg\", { className: \"w-2.5 h-2.5 text-yellow-200\", viewBox: \"0 0 24 24\", fill: \"currentColor\", children: /* @__PURE__ */ jsx3(\"path\", { d: \"M12 2l2.4 7.6H22l-6.2 4.5 2.4 7.6-6.2-4.5-6.2 4.5 2.4-7.6L2 9.6h7.6z\" }) })\n                  }\n                ),\n                /* @__PURE__ */ jsx3(\n                  motion2.div,\n                  {\n                    initial: { opacity: 0, scale: 0, rotate: 45, x: 10 },\n                    animate: { opacity: 1, scale: 1, rotate: 0, x: 0 },\n                    exit: { opacity: 0, scale: 0, rotate: -45, x: 10 },\n                    transition: { type: \"spring\", stiffness: 600, damping: 25, delay: 0.1 },\n                    className: \"absolute -top-1 -left-3\",\n                    children: /* @__PURE__ */ jsx3(\"svg\", { className: \"w-1.5 h-1.5 text-yellow-400\", viewBox: \"0 0 24 24\", fill: \"currentColor\", children: /* @__PURE__ */ jsx3(\"path\", { d: \"M12 2l2.4 7.6H22l-6.2 4.5 2.4 7.6-6.2-4.5-6.2 4.5 2.4-7.6L2 9.6h7.6z\" }) })\n                  }\n                )\n              ]\n            },\n            \"icon2\"\n          ) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label })\n        ] });\n      case \"morph\":\n      case \"color-morph\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", initial: false, children: !showIcon2 ? /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { scale: 0.5, opacity: 0 },\n              animate: { scale: 1, opacity: 1 },\n              exit: { scale: 0.5, opacity: 0 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isHovered && config.icon1Color ? config.icon1Color : isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon1\"\n          ) : /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { scale: 0.5, opacity: 0 },\n              animate: { scale: 1, opacity: 1 },\n              exit: { scale: 0.5, opacity: 0 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: Icon2 && /* @__PURE__ */ jsx3(Icon2, { className: `w-[16px] h-[16px] ${config.icon2Color || (isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\")}` })\n            },\n            \"icon2\"\n          ) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.id === \"4\" && showIcon2 ? \"Copied\" : config.label })\n        ] });\n      case \"pulse\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              animate: { scale: isHovered ? [1, 1.25, 1] : 1 },\n              transition: { duration: 0.4, ease: \"easeInOut\" },\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] transition-colors duration-300 ${isHovered && config.icon1Color ? `${config.icon1Color} fill-current` : isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            }\n          ) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label })\n        ] });\n      case \"rotate\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(motion2.div, { animate: { rotate: isHovered ? 180 : 0 }, transition: { type: \"spring\", stiffness: 400, damping: 25 }, children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` }) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label })\n        ] });\n      case \"shake\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              animate: {\n                y: isHovered ? [0, -2, 0, -2, 0] : 0,\n                rotate: isHovered ? [0, -10, 10, -10, 0] : 0\n              },\n              transition: { duration: 0.4 },\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] transition-colors duration-300 ${isHovered && config.icon1Color ? config.icon1Color : isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            }\n          ) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: `font-medium tracking-tight text-[13px] whitespace-nowrap transition-colors duration-300 ml-2.5 ${isHovered && config.icon1Color ? config.icon1Color : isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}`, children: config.label })\n        ] });\n      case \"ring\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", initial: false, children: !isHovered ? /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { rotate: -15, scale: 0.8, opacity: 0 },\n              animate: { rotate: 0, scale: 1, opacity: 1 },\n              exit: { rotate: 15, scale: 0.8, opacity: 0 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon1\"\n          ) : /* @__PURE__ */ jsxs3(\n            motion2.div,\n            {\n              initial: { rotate: -15, scale: 0.8, opacity: 0 },\n              animate: { rotate: 0, scale: 1, opacity: 1 },\n              exit: { rotate: 15, scale: 0.8, opacity: 0 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: [\n                Icon2 && /* @__PURE__ */ jsx3(Icon2, { className: `w-[16px] h-[16px] ${config.icon2Color || (isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\")}` }),\n                /* @__PURE__ */ jsx3(\n                  motion2.div,\n                  {\n                    initial: { scale: 0 },\n                    animate: { scale: 1 },\n                    transition: { type: \"spring\", stiffness: 600, damping: 15, delay: 0.1 },\n                    className: \"absolute top-0 right-0 w-1.5 h-1.5 bg-red-500 rounded-full border border-transparent\"\n                  }\n                )\n              ]\n            },\n            \"icon2\"\n          ) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label })\n        ] });\n      case \"glare\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${!isMatrix ? \"mr-2.5\" : \"\"} ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` }),\n          !isMatrix && /* @__PURE__ */ jsx3(\"span\", { className: \"font-medium tracking-tight text-[13px] whitespace-nowrap\", children: config.label }),\n          /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              animate: { x: isHovered ? [\"-150%\", \"150%\"] : \"-150%\" },\n              transition: { duration: 0.85, ease: \"easeInOut\", repeat: isHovered ? Infinity : 0, repeatDelay: 1 },\n              className: `absolute top-0 bottom-0 w-[50px] skew-x-[-20deg] pointer-events-none z-10`,\n              style: {\n                background: isLightTheme ? \"linear-gradient(90deg, transparent, rgba(0,0,0,0.12), transparent)\" : \"linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent)\"\n              }\n            }\n          )\n        ] });\n      case \"text-reveal\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0 mr-2.5\", children: /* @__PURE__ */ jsx3(motion2.div, { animate: { rotate: isHovered ? 45 : 0 }, transition: { type: \"spring\", stiffness: 400, damping: 25 }, children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` }) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(\"div\", { className: \"relative h-[18px] overflow-hidden\", children: /* @__PURE__ */ jsxs3(\n            motion2.div,\n            {\n              animate: { y: isHovered ? -18 : 0 },\n              transition: { type: \"spring\", stiffness: 400, damping: 25 },\n              className: \"flex flex-col\",\n              children: [\n                /* @__PURE__ */ jsx3(\"span\", { className: `block h-[18px] leading-[18px] font-medium tracking-tight text-[13px] whitespace-nowrap ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}`, children: config.label }),\n                /* @__PURE__ */ jsx3(\"span\", { className: `block h-[18px] leading-[18px] font-medium tracking-tight text-[13px] whitespace-nowrap ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}`, children: config.label })\n              ]\n            }\n          ) })\n        ] });\n      case \"magnetic\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${!isMatrix ? \"mr-2.5\" : \"\"} ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` }),\n          !isMatrix && /* @__PURE__ */ jsx3(\"span\", { className: \"font-medium tracking-tight text-[13px] whitespace-nowrap\", children: config.label })\n        ] });\n      case \"expand-ring\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              animate: { scale: isHovered ? 1.1 : 1 },\n              transition: { type: \"spring\", stiffness: 400, damping: 20 },\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            }\n          ) }),\n          !isMatrix && /* @__PURE__ */ jsx3(\"span\", { className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label }),\n          /* @__PURE__ */ jsx3(AnimatePresence2, { children: isHovered && /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { opacity: 1, scale: 1 },\n              animate: { opacity: 0, scale: 1.15 },\n              exit: { opacity: 0 },\n              transition: { duration: 0.6, ease: \"easeOut\" },\n              className: `absolute inset-0 rounded-[40px] pointer-events-none border ${isLightTheme ? \"border-black/25\" : \"border-white/25\"}`\n            },\n            \"expand-ring-div\"\n          ) })\n        ] });\n      default:\n        return null;\n    }\n  };\n  return /* @__PURE__ */ jsx3(\n    motion2.button,\n    {\n      layout: true,\n      transition: { type: \"spring\", stiffness: 500, damping: 25 },\n      onMouseEnter: handleMouseEnter,\n      onMouseMove: handleMouseMove,\n      onMouseLeave: handleMouseLeave,\n      onPointerEnter: handleMouseEnter,\n      onPointerLeave: handleMouseLeave,\n      onPointerMove: handleMouseMove,\n      onFocus: handleMouseEnter,\n      onBlur: handleMouseLeave,\n      onTouchStart: handleTouchStart,\n      onTouchEnd: handleTouchEnd,\n      animate: {\n        paddingLeft: isMatrix ? 0 : isHovered ? 28 : 24,\n        paddingRight: isMatrix ? 0 : isHovered ? 28 : 24,\n        x: isHovered && config.interactionType === \"magnetic\" ? mouseCoords.x : 0,\n        y: isHovered && config.interactionType === \"magnetic\" ? mouseCoords.y : 0,\n        backgroundColor: isLightTheme ? hasInteracted && config.id === \"4\" ? \"rgba(0,0,0,0.08)\" : isHovered ? \"rgba(0,0,0,0.06)\" : \"rgba(0,0,0,0.04)\" : hasInteracted && config.id === \"4\" ? \"rgba(255,255,255,0.08)\" : isHovered ? \"rgba(255,255,255,0.06)\" : \"rgba(255,255,255,0.04)\"\n      },\n      whileHover: { scale: 1.02 },\n      whileTap: { scale: 0.96 },\n      className: `relative flex items-center justify-center rounded-[40px] border-0 cursor-pointer shadow-none transition-colors duration-150 ${isMatrix ? \"w-[36px] h-[36px] sm:w-[42px] sm:h-[42px] px-0\" : \"h-[36px] min-w-[75px]\"} ${config.interactionType === \"glare\" ? \"overflow-hidden\" : \"\"} ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}`,\n      children: /* @__PURE__ */ jsx3(motion2.div, { layout: true, transition: { type: \"spring\", stiffness: 500, damping: 25 }, className: `flex items-center justify-center w-full ${isMatrix ? \"scale-100 sm:scale-[1.15] origin-center\" : \"\"}`, children: renderIconContent() })\n    }\n  );\n});\n\n// src/data/buttons.tsx\nimport {\n  ArrowRight,\n  Github,\n  Star,\n  Cloud,\n  CloudUpload,\n  Copy,\n  Check,\n  Heart,\n  Link,\n  Send,\n  Play,\n  Pause,\n  Settings,\n  Trash2,\n  Bell,\n  BellRing,\n  Search,\n  X,\n  Moon,\n  Sun,\n  Mic,\n  MicOff,\n  Video,\n  VideoOff,\n  Volume2,\n  VolumeX,\n  Lock,\n  Unlock,\n  Folder,\n  FolderOpen,\n  Eye,\n  EyeOff,\n  Bookmark,\n  ThumbsUp,\n  Download,\n  Upload,\n  User,\n  UserCheck,\n  Pen,\n  Wifi,\n  WifiOff,\n  Battery,\n  BatteryCharging,\n  Maximize,\n  Minimize,\n  RefreshCw,\n  Plus\n} from \"lucide-react\";\nimport { jsx as jsx4 } from \"react/jsx-runtime\";\nvar AppleIcon = (props) => /* @__PURE__ */ jsx4(\"svg\", { viewBox: \"0 0 384 512\", fill: \"currentColor\", ...props, children: /* @__PURE__ */ jsx4(\"path\", { d: \"M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z\" }) });\nvar buttonsData = [\n  { id: \"36\", label: \"Open Run Details\", icon1: ArrowRight, interactionType: \"inset-text\" },\n  { id: \"37\", label: \"Create\", icon1: Plus, interactionType: \"circle-create\" },\n  { id: \"1\", label: \"Download for Mac\", icon1: AppleIcon, icon2: ArrowRight, interactionType: \"slide-arrow\", hoverBg: \"#0a0a0a\" },\n  { id: \"2\", label: \"Star on GitHub\", icon1: Github, icon2: Star, interactionType: \"sparkle\", hoverBg: \"#1f1f1f\", icon2Color: \"text-yellow-400\" },\n  { id: \"3\", label: \"Deploy App\", icon1: Cloud, icon2: CloudUpload, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400\" },\n  { id: \"4\", label: \"Copy Hash\", icon1: Copy, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"5\", label: \"Sponsor\", icon1: Heart, interactionType: \"pulse\", hoverBg: \"#1f1f1f\", icon1Color: \"text-pink-500\" },\n  { id: \"6\", label: \"Share\", icon1: Link, icon2: Send, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400\" },\n  { id: \"7\", label: \"Preview\", icon1: Play, icon2: Pause, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-green-400\" },\n  { id: \"8\", label: \"Settings\", icon1: Settings, interactionType: \"rotate\", hoverBg: \"#1f1f1f\" },\n  { id: \"9\", label: \"Delete\", icon1: Trash2, interactionType: \"shake\", hoverBg: \"#1f1f1f\", icon1Color: \"text-red-400\" },\n  { id: \"10\", label: \"Subscribe\", icon1: Bell, icon2: BellRing, interactionType: \"ring\", hoverBg: \"#1f1f1f\", icon2Color: \"text-orange-400\" },\n  { id: \"11\", label: \"Search\", icon1: Search, icon2: X, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-white\" },\n  { id: \"12\", label: \"Theme\", icon1: Moon, icon2: Sun, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-yellow-400\" },\n  { id: \"13\", label: \"Microphone\", icon1: Mic, icon2: MicOff, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-red-400\" },\n  { id: \"14\", label: \"Camera\", icon1: Video, icon2: VideoOff, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-red-400\" },\n  { id: \"15\", label: \"Volume\", icon1: Volume2, icon2: VolumeX, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-neutral-500\" },\n  { id: \"16\", label: \"Lock\", icon1: Lock, icon2: Unlock, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"17\", label: \"Directory\", icon1: Folder, icon2: FolderOpen, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400\" },\n  { id: \"18\", label: \"Visibility\", icon1: Eye, icon2: EyeOff, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-neutral-500\" },\n  { id: \"19\", label: \"Save Later\", icon1: Bookmark, icon2: Bookmark, interactionType: \"color-morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400 fill-blue-400\" },\n  { id: \"20\", label: \"Like\", icon1: ThumbsUp, icon2: ThumbsUp, interactionType: \"color-morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-500 fill-blue-500\" },\n  { id: \"21\", label: \"Download\", icon1: Download, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"22\", label: \"Upload\", icon1: Upload, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400\" },\n  { id: \"23\", label: \"Account\", icon1: User, icon2: UserCheck, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"24\", label: \"Submit\", icon1: Send, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"25\", label: \"Edit\", icon1: Pen, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"26\", label: \"Network\", icon1: Wifi, icon2: WifiOff, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-red-400\" },\n  { id: \"27\", label: \"Power\", icon1: Battery, icon2: BatteryCharging, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"28\", label: \"Expand\", icon1: Maximize, icon2: Minimize, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-white\" },\n  { id: \"29\", label: \"Reload\", icon1: RefreshCw, interactionType: \"rotate\", hoverBg: \"#1f1f1f\" },\n  { id: \"30\", label: \"Favorite\", icon1: Star, icon2: Star, interactionType: \"color-morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-yellow-400 fill-yellow-400\" },\n  { id: \"31\", label: \"Glare Shine\", icon1: Star, interactionType: \"glare\", hoverBg: \"#1f1f1f\" },\n  { id: \"32\", label: \"Text Reveal\", icon1: ArrowRight, interactionType: \"text-reveal\", hoverBg: \"#1f1f1f\" },\n  { id: \"33\", label: \"Magnetic Field\", icon1: Github, interactionType: \"magnetic\", hoverBg: \"#1f1f1f\" },\n  { id: \"34\", label: \"Expand Ring\", icon1: Link, interactionType: \"expand-ring\", hoverBg: \"#1f1f1f\" },\n  { id: \"35\", label: \"Focus Blur Links\", icon1: Link, interactionType: \"focus-blur\", hoverBg: \"#1f1f1f\" }\n];\n\n// 9.tsx\nimport { jsx as jsx5 } from \"react/jsx-runtime\";\nfunction Demo() {\n  const config = buttonsData.find((button) => button.id === \"9\");\n  if (!config) return null;\n  return /* @__PURE__ */ jsx5(AnimatedButton, { config, layoutMode: \"grid\", theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n"
+}