@mova-ui/react 0.4.10 → 0.4.11

package/registry/accordion-blind.json

@@ -1,7 +1,7 @@
 {
   "id": "accordion-blind",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "accordion-blind.tsx",
   "sourcePath": "components/css-animations/whimsical/WhimsicalVariations.tsx",
   "registryFile": "accordion-blind.json",

package/registry/accordion-loader.json

@@ -1,7 +1,7 @@
 {
   "id": "accordion-loader",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "accordion-loader.tsx",
   "sourcePath": "ui/loading/accordion-loader.tsx",
   "registryFile": "accordion-loader.json",

package/registry/ai-approval-card.json

@@ -1,7 +1,7 @@
 {
   "id": "ai-approval-card",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "ai-approval-card.tsx",
   "sourcePath": "ui/ai/ai-approval-card.tsx",
   "registryFile": "ai-approval-card.json",

package/registry/ai-code-block.json

@@ -1,7 +1,7 @@
 {
   "id": "ai-code-block",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "ai-code-block.tsx",
   "sourcePath": "ui/ai/ai-code-block.tsx",
   "registryFile": "ai-code-block.json",

package/registry/ai-context-meter.json

@@ -1,7 +1,7 @@
 {
   "id": "ai-context-meter",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "ai-context-meter.tsx",
   "sourcePath": "ui/ai/ai-context-meter.tsx",
   "registryFile": "ai-context-meter.json",

package/registry/ai-fine-tune-card.json

@@ -1,7 +1,7 @@
 {
   "id": "ai-fine-tune-card",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "ai-fine-tune-card.tsx",
   "sourcePath": "ui/ai/ai-fine-tune-card.tsx",
   "registryFile": "ai-fine-tune-card.json",

package/registry/ai-prompt-bar.json

@@ -1,7 +1,7 @@
 {
   "id": "ai-prompt-bar",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "ai-prompt-bar.tsx",
   "sourcePath": "ui/ai/ai-prompt-bar.tsx",
   "registryFile": "ai-prompt-bar.json",

package/registry/ai-sidebar-nav.json

@@ -1,7 +1,7 @@
 {
   "id": "ai-sidebar-nav",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "ai-sidebar-nav.tsx",
   "sourcePath": "ui/ai/ai-sidebar-nav.tsx",
   "registryFile": "ai-sidebar-nav.json",

package/registry/ai-sources.json

@@ -1,7 +1,7 @@
 {
   "id": "ai-sources",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "ai-sources.tsx",
   "sourcePath": "ui/ai/ai-sources.tsx",
   "registryFile": "ai-sources.json",

package/registry/ai-suggestions.json

@@ -1,7 +1,7 @@
 {
   "id": "ai-suggestions",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "ai-suggestions.tsx",
   "sourcePath": "ui/ai/ai-suggestions.tsx",
   "registryFile": "ai-suggestions.json",

package/registry/ai-task-list.json

@@ -1,7 +1,7 @@
 {
   "id": "ai-task-list",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "ai-task-list.tsx",
   "sourcePath": "ui/ai/ai-task-list.tsx",
   "registryFile": "ai-task-list.json",

package/registry/ai-tool-call.json

@@ -1,7 +1,7 @@
 {
   "id": "ai-tool-call",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "ai-tool-call.tsx",
   "sourcePath": "ui/ai/ai-tool-call.tsx",
   "registryFile": "ai-tool-call.json",

package/registry/analyzing-image.json

@@ -1,7 +1,7 @@
 {
   "id": "analyzing-image",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "analyzing-image.tsx",
   "sourcePath": "ui/loading/analyzing-image.tsx",
   "registryFile": "analyzing-image.json",

package/registry/animated-mega-menu.json

@@ -0,0 +1,21 @@
+{
+  "id": "animated-mega-menu",
+  "tier": "free",
+  "version": "0.4.11",
+  "file": "animated-mega-menu.tsx",
+  "sourcePath": "ui/patterns/animated-mega-menu.tsx",
+  "registryFile": "animated-mega-menu.json",
+  "exports": [
+    "AnimatedMegaMenu",
+    "AnimatedMegaMenuProps",
+    "MegaMenuItem",
+    "MegaMenuLink"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "\"use client\";\n/*\nReact web adaptation of the Reacticx navigation at https://reacticx.com/\n\nMIT License\n\nCopyright (c) 2026 rit3zh\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\nProject: reacticx\nAuthor: rit3zh\nYear: 2026\n\n*/\nimport {\n  useCallback, useEffect, useId, useRef, useState,\n  type CSSProperties, type KeyboardEvent, type PointerEvent as ReactPointerEvent, type ReactNode,\n} from 'react';\nimport { AnimatePresence, motion, useIsPresent, useReducedMotion, type HTMLMotionProps } from 'framer-motion';\nimport { ChevronDown, Menu, X } from 'lucide-react';\n\nexport interface MegaMenuLink {\n  label: string;\n  href: string;\n  description?: string;\n  icon?: ReactNode;\n}\n\nexport interface MegaMenuItem {\n  label: string;\n  href?: string;\n  links?: readonly MegaMenuLink[];\n  footer?: MegaMenuLink;\n}\n\nexport interface AnimatedMegaMenuProps {\n  items: readonly MegaMenuItem[];\n  brand?: ReactNode;\n  actions?: ReactNode;\n  label?: string;\n  theme?: 'dark' | 'light';\n  className?: string;\n  style?: CSSProperties;\n}\n\nconst spring = { type: 'spring', stiffness: 350, damping: 32 } as const;\nconst menuStyles = `\n.mova-mega { position:relative; container-type:inline-size; width:100%; color:var(--mova-mega-text); font:inherit; }\n.mova-mega *, .mova-mega *::before { box-sizing:border-box; }\n.mova-mega-bar { height:56px; display:flex; align-items:center; gap:24px; padding:0 32px; }\n.mova-mega-brand, .mova-mega-actions { flex-shrink:0; display:flex; align-items:center; }\n.mova-mega-actions { margin-inline-start:auto; }\n.mova-mega-nav { display:flex; gap:2px; align-items:center; min-width:0; overflow:auto; scrollbar-width:none; }\n.mova-mega-trigger, .mova-mega-toggle, .mova-mega-link {\n  appearance:none; border:0; background:none; color:inherit; font:inherit; text-decoration:none;\n  position:relative; cursor:pointer; border-radius:8px; -webkit-tap-highlight-color:transparent;\n}\n.mova-mega :is(.mova-mega-trigger,.mova-mega-toggle,.mova-mega-link):focus-visible {\n  outline:2px solid currentColor; outline-offset:-2px;\n}\n.mova-mega-trigger {\n  display:flex; flex-shrink:0; align-items:center; gap:8px; height:36px; padding:0 14px;\n  font-size:14px; white-space:nowrap; color:var(--mova-mega-muted);\n}\n.mova-mega-trigger[data-active=true] { color:var(--mova-mega-text); }\n.mova-mega-trigger > span { z-index:1; display:inline-flex; }\n.mova-mega-pill, .mova-mega-row-pill {\n  position:absolute; inset:0; border-radius:inherit; background:var(--mova-mega-highlight); pointer-events:none;\n}\n.mova-mega-pill { z-index:0 !important; }\n.mova-mega-bridge { position:absolute; top:100%; left:0; right:0; height:8px; }\n.mova-mega-popup {\n  position:absolute; left:0; top:calc(100% + 8px); z-index:2; overflow:hidden; border:1px solid var(--mova-mega-border);\n  background:var(--mova-mega-surface); border-radius:16px; transform-origin:top center; box-shadow:0 14px 32px #0003;\n}\n.mova-mega-content { position:absolute; top:0; left:0; right:0; max-height:min(65vh,420px); overflow:auto; overscroll-behavior:contain; }\n.mova-mega-grid { padding:8px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:8px; }\n.mova-mega-link {\n  display:flex; align-items:center; gap:10px; border-radius:12px; min-height:52px;\n  padding:8px 16px; line-height:1.25; text-align:start; font-size:14px; min-width:0;\n}\n.mova-mega-link > span:not(.mova-mega-row-pill) { position:relative; min-width:0; overflow-wrap:anywhere; }\n.mova-mega-description { display:block; color:var(--mova-mega-muted); font-size:12px; margin-top:2px; }\n.mova-mega-footer { grid-column:1/-1; border-top:1px solid var(--mova-mega-border); padding-top:8px; margin-top:8px; }\n.mova-mega-toggle, .mova-mega-mobile { display:none; }\n.mova-mega-mobile { position:absolute; z-index:2; top:100%; inset-inline:0; padding:8px; max-height:min(65vh,430px);\n  overflow:auto; overscroll-behavior:contain; background:var(--mova-mega-surface);\n  border:1px solid var(--mova-mega-border); border-radius:16px; box-shadow:0 14px 32px #0003;\n}\n@container (max-width: 699px) {\n  .mova-mega-bar { padding:0 16px; height:64px; gap:12px; }\n  .mova-mega-nav, .mova-mega-popup, .mova-mega-bridge { display:none; }\n  .mova-mega-toggle { display:grid; place-items:center; min-width:44px; height:44px; }\n  .mova-mega-toggle:last-child { margin-inline-start:auto; }\n  .mova-mega-mobile { display:block; }\n  .mova-mega-mobile .mova-mega-trigger { width:100%; justify-content:space-between; min-height:44px; }\n  .mova-mega-mobile .mova-mega-trigger[data-active=true] { background:var(--mova-mega-highlight); }\n}\n@container (max-width: 310px) { .mova-mega-grid { grid-template-columns:minmax(0,1fr); } }\n@container (min-width: 700px) and (max-width: 839px) {\n  .mova-mega-bar { padding:0 16px; gap:12px; }\n  .mova-mega-trigger { padding:0 10px; }\n}\n`;\n\nfunction PresencePanel({ as, onPresent, ...props }: HTMLMotionProps<'div'> & {\n  as?: 'nav';\n  onPresent?: (element: HTMLElement) => void;\n}) {\n  const present = useIsPresent();\n  const Element = as === 'nav' ? motion.nav : motion.div;\n  const setRef = useCallback((element: HTMLElement | null) => {\n    if (!element) return;\n    element.inert = !present;\n    if (present) onPresent?.(element);\n  }, [onPresent, present]);\n  return <Element {...props} data-present={present} aria-hidden={!present || undefined}\n    style={{ ...props.style, pointerEvents: present ? props.style?.pointerEvents : 'none' }}\n    ref={setRef} />;\n}\n\nfunction panelPosition(header: HTMLElement, trigger: HTMLElement, item: MegaMenuItem) {\n  const bounds = header.getBoundingClientRect();\n  const triggerBounds = trigger.getBoundingClientRect();\n  const hasDescriptions = item.links?.some((link) => link.description);\n  const width = Math.min(hasDescriptions ? 466 : 434, bounds.width - 32);\n  const center = triggerBounds.left - bounds.left + triggerBounds.width / 2;\n  const x = Math.max(16, Math.min(center - width / 2, bounds.width - width - 16));\n  return { x, width };\n}\n\nfunction MegaMenuLinks({ item, layoutId, close }: { item: MegaMenuItem; layoutId: string; close: () => void }) {\n  const [highlighted, setHighlighted] = useState<number | null>(null);\n  const reduced = useReducedMotion();\n  const links = item.links ?? [];\n\n  const row = (link: MegaMenuLink, index: number) => (\n    <a\n      key={index}\n      className=\"mova-mega-link\"\n      href={link.href}\n      onPointerEnter={(event) => { if (event.pointerType === 'mouse') setHighlighted(index); }}\n      onFocus={() => setHighlighted(index)}\n      onClick={close}\n    >\n      {highlighted === index && (\n        <motion.span\n          aria-hidden=\"true\"\n          className=\"mova-mega-row-pill\"\n          layoutId={reduced ? undefined : layoutId}\n          transition={spring}\n        />\n      )}\n      {link.icon != null && <span aria-hidden=\"true\">{link.icon}</span>}\n      <span>\n        {link.label}\n        {link.description && <span className=\"mova-mega-description\">{link.description}</span>}\n      </span>\n    </a>\n  );\n\n  return (\n    <div\n      className=\"mova-mega-grid\"\n      onPointerLeave={() => setHighlighted(null)}\n      onBlur={(event) => {\n        if (!event.currentTarget.contains(event.relatedTarget)) setHighlighted(null);\n      }}\n    >\n      {links.map(row)}\n      {item.footer && <div className=\"mova-mega-footer\">{row(item.footer, links.length)}</div>}\n    </div>\n  );\n}\n\nexport function AnimatedMegaMenu({\n  items, brand, actions, label = 'Main navigation', theme = 'dark', className, style,\n}: AnimatedMegaMenuProps) {\n  const id = useId();\n  const reduced = useReducedMotion();\n  const root = useRef<HTMLElement>(null);\n  const mobileToggle = useRef<HTMLButtonElement>(null);\n  const triggers = useRef<(HTMLAnchorElement | HTMLButtonElement | null)[]>([]);\n  const closeTimer = useRef<number | undefined>(undefined);\n  const focusOnOpen = useRef(false);\n  const [highlighted, setHighlighted] = useState<number | null>(null);\n  const [active, setActive] = useState<number | null>(null);\n  const [direction, setDirection] = useState(1);\n  const [mobileOpen, setMobileOpen] = useState(false);\n  const [mobileGroup, setMobileGroup] = useState<number | null>(null);\n  const [currentPanel, setCurrentPanel] = useState<HTMLElement | null>(null);\n  const [geometry, setGeometry] = useState({ x: 16, width: 434, height: 120 });\n  const openItem = active === null ? undefined : items[active];\n  const dark = theme === 'dark';\n  const transition = reduced ? { duration: 0 } : spring;\n\n  function currentContent() {\n    return root.current?.querySelector<HTMLDivElement>('.mova-mega-content[data-present=\"true\"]');\n  }\n\n  function close() {\n    window.clearTimeout(closeTimer.current);\n    focusOnOpen.current = false;\n    setCurrentPanel(null);\n    setActive(null);\n    setHighlighted(null);\n    setMobileOpen(false);\n    setMobileGroup(null);\n  }\n\n  function show(index: number, focusLinks = false) {\n    window.clearTimeout(closeTimer.current);\n    const item = items[index];\n    if (!item) return;\n    if (active !== null && index !== active) setDirection(index > active ? 1 : -1);\n    setHighlighted(index);\n    if (item.links?.length || item.footer) {\n      const trigger = triggers.current[index];\n      if (active !== index && root.current && trigger) {\n        const position = panelPosition(root.current, trigger, item);\n        setGeometry((previous) => ({ ...previous, ...position }));\n      }\n      setActive(index);\n      if (focusLinks) {\n        const first = active === index ? currentContent()?.querySelector('a') : null;\n        if (first) first.focus();\n        else focusOnOpen.current = true;\n      }\n    } else {\n      setActive(null);\n    }\n  }\n\n  useEffect(() => {\n    if (active === null || !root.current || !currentPanel || currentPanel !== currentContent()) return;\n    const header = root.current;\n    const panel = currentPanel;\n    const trigger = triggers.current[active];\n    const item = items[active];\n    if (!trigger || !item) return;\n\n    const measure = () => {\n      if (header.clientWidth < 700) return;\n      const { x, width } = panelPosition(header, trigger, item);\n      const height = panel.offsetHeight + 2;\n      setGeometry((old) => old.x === x && old.width === width && old.height === height\n        ? old : { x, width, height });\n    };\n    measure();\n    const observer = new ResizeObserver(measure);\n    observer.observe(header);\n    observer.observe(panel);\n    observer.observe(trigger);\n    if (focusOnOpen.current) {\n      focusOnOpen.current = false;\n      panel.querySelector('a')?.focus();\n    }\n    return () => observer.disconnect();\n  }, [active, currentPanel, items]);\n\n  useEffect(() => {\n    const header = root.current;\n    if (!header) return;\n    let compact = header.getBoundingClientRect().width < 700;\n    const observer = new ResizeObserver(() => {\n      const next = header.getBoundingClientRect().width < 700;\n      if (compact === next) return;\n      compact = next;\n      close();\n    });\n    observer.observe(header);\n    return () => observer.disconnect();\n  }, []);\n\n  useEffect(() => {\n    if (!mobileOpen && active === null) return;\n    const dismiss = (event: PointerEvent) => {\n      if (!root.current?.contains(event.target as Node)) close();\n    };\n    document.addEventListener('pointerdown', dismiss);\n    return () => document.removeEventListener('pointerdown', dismiss);\n  }, [active, mobileOpen]);\n\n  useEffect(() => () => window.clearTimeout(closeTimer.current), []);\n\n  function handleTriggerKey(event: KeyboardEvent<HTMLElement>, index: number) {\n    if (event.key === 'ArrowDown' && (items[index].links?.length || items[index].footer)) {\n      event.preventDefault();\n      show(index, true);\n    } else if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {\n      const next = (index + (event.key === 'ArrowRight' ? 1 : -1) + items.length) % items.length;\n      event.preventDefault();\n      triggers.current[next]?.focus();\n    }\n  }\n\n  const variables = {\n    '--mova-mega-text': dark ? '#ededed' : '#171717',\n    '--mova-mega-muted': dark ? '#a1a1a1' : '#595959',\n    '--mova-mega-highlight': dark ? '#ffffff0f' : '#0000000c',\n    '--mova-mega-border': dark ? '#ffffff1a' : '#0000001a',\n    '--mova-mega-surface': dark ? '#080808' : '#fff',\n    ...style,\n  } as CSSProperties;\n\n  return (\n    <header\n      ref={root}\n      className={`mova-mega ${className ?? ''}`}\n      style={variables}\n      onPointerEnter={() => window.clearTimeout(closeTimer.current)}\n      onPointerLeave={(event) => {\n        if (event.pointerType !== 'mouse' || root.current?.contains(document.activeElement) && document.activeElement?.matches(':focus-visible')) return;\n        closeTimer.current = window.setTimeout(close, 120);\n      }}\n      onBlur={(event) => { if (!event.currentTarget.contains(event.relatedTarget)) close(); }}\n      onKeyDown={(event) => {\n        if (event.key !== 'Escape' || !openItem && !mobileOpen) return;\n        event.preventDefault();\n        if (mobileOpen) mobileToggle.current?.focus();\n        else if (active !== null) triggers.current[active]?.focus();\n        close();\n      }}\n    >\n      <style>{menuStyles}</style>\n      <div className=\"mova-mega-bar\">\n        {brand && <div className=\"mova-mega-brand\">{brand}</div>}\n        <nav className=\"mova-mega-nav\" aria-label={label}>\n          {items.map((item, index) => {\n            const hasMenu = Boolean(item.links?.length || item.footer);\n            const common = {\n              className: 'mova-mega-trigger',\n              'data-active': highlighted === index,\n              onPointerEnter: (event: ReactPointerEvent) => {\n                if (event.pointerType === 'mouse') show(index);\n              },\n              onFocus: () => {\n                setHighlighted(index);\n                if (active !== index) setActive(null);\n              },\n              onKeyDown: (event: KeyboardEvent<HTMLElement>) => handleTriggerKey(event, index),\n            };\n            const children = (\n              <>\n                {highlighted === index && (\n                  <motion.span aria-hidden=\"true\" className=\"mova-mega-pill\" layoutId={reduced ? undefined : `${id}-nav-pill`} transition={transition} />\n                )}\n                <span>{item.label}</span>\n                {hasMenu && (\n                  <motion.span aria-hidden=\"true\" animate={{ rotate: active === index ? 180 : 0 }} transition={transition}>\n                    <ChevronDown size={14} />\n                  </motion.span>\n                )}\n              </>\n            );\n            return hasMenu ? (\n              <button\n                {...common}\n                key={index}\n                type=\"button\"\n                ref={(element) => { triggers.current[index] = element; }}\n                aria-expanded={active === index}\n                aria-controls={active === index ? `${id}-panel` : undefined}\n                onClick={() => show(index, true)}\n              >{children}</button>\n            ) : (\n              <a\n                {...common}\n                key={index}\n                href={item.href}\n                ref={(element) => { triggers.current[index] = element; }}\n                onClick={close}\n              >{children}</a>\n            );\n          })}\n        </nav>\n        {actions && <div className=\"mova-mega-actions\">{actions}</div>}\n        <button\n          className=\"mova-mega-toggle\"\n          ref={mobileToggle}\n          type=\"button\"\n          aria-label={mobileOpen ? 'Close navigation' : 'Open navigation'}\n          aria-expanded={mobileOpen}\n          aria-controls={mobileOpen ? `${id}-mobile` : undefined}\n          onClick={() => {\n            if (mobileOpen) close();\n            else setMobileOpen(true);\n          }}\n          onKeyDown={(event) => {\n            if (event.key === 'ArrowDown' && mobileOpen) {\n              event.preventDefault();\n              root.current?.querySelector<HTMLElement>('.mova-mega-mobile[data-present=\"true\"] :is(button,a[href])')?.focus();\n            }\n          }}\n        >\n          {mobileOpen ? <X size={20} /> : <Menu size={20} />}\n        </button>\n      </div>\n\n      <AnimatePresence initial={false}>\n        {openItem && (\n          <PresencePanel\n            key=\"panel\"\n            id={`${id}-panel`}\n            className=\"mova-mega-popup\"\n            initial={{ opacity: 0, scale: reduced ? 1 : 0.96, ...geometry }}\n            animate={{ opacity: 1, scale: 1, ...geometry }}\n            exit={{ opacity: 0, scale: reduced ? 1 : 0.96 }}\n            transition={transition}\n          >\n            <AnimatePresence initial={false} custom={direction} propagate>\n              <PresencePanel\n                key={active}\n                className=\"mova-mega-content\"\n                onPresent={setCurrentPanel}\n                custom={direction}\n                variants={{\n                  entering: (side: number) => ({ x: reduced ? 0 : side * 24, opacity: 0 }),\n                  visible: { x: 0, opacity: 1 },\n                  exiting: (side: number) => ({ x: reduced ? 0 : side * -24, opacity: 0, pointerEvents: 'none' }),\n                }}\n                initial=\"entering\"\n                animate=\"visible\"\n                exit=\"exiting\"\n                transition={transition}\n                onKeyDown={(event) => {\n                  const links = Array.from(event.currentTarget.querySelectorAll<HTMLAnchorElement>('a[href]'));\n                  const current = links.findIndex((link) => link === document.activeElement);\n                  if (current === -1 || active === null) return;\n                  if (event.key === 'Tab') {\n                    const next = event.shiftKey && current === 0 ? triggers.current[active]\n                      : !event.shiftKey && current === links.length - 1\n                        ? triggers.current[active + 1] ?? root.current?.querySelector<HTMLElement>('.mova-mega-actions :is(button,a[href])')\n                        : null;\n                    if (next) {\n                      event.preventDefault();\n                      next.focus();\n                    }\n                    return;\n                  }\n                  if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;\n                  event.preventDefault();\n                  const next = event.key === 'Home' ? 0 : event.key === 'End' ? links.length - 1\n                    : (current + (event.key === 'ArrowDown' ? 1 : -1) + links.length) % links.length;\n                  links[next].focus();\n                }}\n              >\n                <MegaMenuLinks item={openItem} layoutId={`${id}-rows-${active}`} close={close} />\n              </PresencePanel>\n            </AnimatePresence>\n          </PresencePanel>\n        )}\n      </AnimatePresence>\n      {openItem && <span className=\"mova-mega-bridge\" aria-hidden=\"true\" />}\n      <AnimatePresence initial={false}>\n        {mobileOpen && (\n          <PresencePanel\n            as=\"nav\"\n            id={`${id}-mobile`}\n            aria-label={label}\n            className=\"mova-mega-mobile\"\n            initial={{ opacity: 0, y: reduced ? 0 : -6 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: reduced ? 0 : -6 }}\n            transition={transition}\n          >\n            {items.map((item, index) => item.links?.length || item.footer ? (\n              <div key={index}>\n                <button\n                  className=\"mova-mega-trigger\"\n                  type=\"button\"\n                  aria-expanded={mobileGroup === index}\n                  data-active={mobileGroup === index}\n                  onClick={() => setMobileGroup(mobileGroup === index ? null : index)}\n                >\n                  {item.label}\n                  <motion.span aria-hidden=\"true\" animate={{ rotate: mobileGroup === index ? 180 : 0 }} transition={transition}>\n                    <ChevronDown size={14} />\n                  </motion.span>\n                </button>\n                {mobileGroup === index && <MegaMenuLinks item={item} layoutId={`${id}-mobile-rows`} close={close} />}\n              </div>\n            ) : (\n              <a className=\"mova-mega-trigger\" href={item.href} key={index} onClick={close}>{item.label}</a>\n            ))}\n          </PresencePanel>\n        )}\n      </AnimatePresence>\n    </header>\n  );\n}\n"
+}

package/registry/animated-sidebar.json

@@ -1,7 +1,7 @@
 {
   "id": "animated-sidebar",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "animated-sidebar.tsx",
   "sourcePath": "ui/animated-sidebar.tsx",
   "registryFile": "animated-sidebar.json",

package/registry/animated-tags.json

@@ -1,7 +1,7 @@
 {
   "id": "animated-tags",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "animated-tags.tsx",
   "sourcePath": "ui/patterns/animated-tags.tsx",
   "registryFile": "animated-tags.json",

package/registry/app-icon-load.json

@@ -1,7 +1,7 @@
 {
   "id": "app-icon-load",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "app-icon-load.tsx",
   "sourcePath": "ui/loading/app-icon-load.tsx",
   "registryFile": "app-icon-load.json",

package/registry/apple-breathe.json

@@ -1,7 +1,7 @@
 {
   "id": "apple-breathe",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "apple-breathe.tsx",
   "sourcePath": "ui/loading/apple-breathe.tsx",
   "registryFile": "apple-breathe.json",

package/registry/apple-equalizer.json

@@ -1,7 +1,7 @@
 {
   "id": "apple-equalizer",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "apple-equalizer.tsx",
   "sourcePath": "ui/loading/apple-equalizer.tsx",
   "registryFile": "apple-equalizer.json",

package/registry/apple-icon-morph.json

@@ -1,7 +1,7 @@
 {
   "id": "apple-icon-morph",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "apple-icon-morph.tsx",
   "sourcePath": "ui/loading/apple-icon-morph.tsx",
   "registryFile": "apple-icon-morph.json",

package/registry/apple-pulse-dots.json

@@ -1,7 +1,7 @@
 {
   "id": "apple-pulse-dots",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "apple-pulse-dots.tsx",
   "sourcePath": "ui/loading/apple-pulse-dots.tsx",
   "registryFile": "apple-pulse-dots.json",

package/registry/apple-scale-pulse.json

@@ -1,7 +1,7 @@
 {
   "id": "apple-scale-pulse",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "apple-scale-pulse.tsx",
   "sourcePath": "ui/loading/apple-scale-pulse.tsx",
   "registryFile": "apple-scale-pulse.json",

package/registry/apple-sound-wave.json

@@ -1,7 +1,7 @@
 {
   "id": "apple-sound-wave",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "apple-sound-wave.tsx",
   "sourcePath": "ui/loading/apple-sound-wave.tsx",
   "registryFile": "apple-sound-wave.json",

package/registry/apple-text-reveal.json

@@ -1,7 +1,7 @@
 {
   "id": "apple-text-reveal",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "apple-text-reveal.tsx",
   "sourcePath": "ui/loading/apple-text-reveal.tsx",
   "registryFile": "apple-text-reveal.json",

package/registry/apple-unlock.json

@@ -1,7 +1,7 @@
 {
   "id": "apple-unlock",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "apple-unlock.tsx",
   "sourcePath": "ui/loading/apple-unlock.tsx",
   "registryFile": "apple-unlock.json",

package/registry/arc-tracer.json

@@ -1,7 +1,7 @@
 {
   "id": "arc-tracer",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "arc-tracer.tsx",
   "sourcePath": "ui/loading/arc-tracer.tsx",
   "registryFile": "arc-tracer.json",

package/registry/balance-bar-chart-card.json

@@ -1,7 +1,7 @@
 {
   "id": "balance-bar-chart-card",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "balance-bar-chart-card.tsx",
   "sourcePath": "ui/cards/balance-bar-chart-card.tsx",
   "registryFile": "balance-bar-chart-card.json",

package/registry/bar-cascade.json

@@ -1,7 +1,7 @@
 {
   "id": "bar-cascade",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "bar-cascade.tsx",
   "sourcePath": "ui/loading/bar-cascade.tsx",
   "registryFile": "bar-cascade.json",

package/registry/bar-sweep.json

@@ -1,7 +1,7 @@
 {
   "id": "bar-sweep",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "bar-sweep.tsx",
   "sourcePath": "ui/loading/bar-sweep.tsx",
   "registryFile": "bar-sweep.json",

package/registry/blur-carousel.json

@@ -0,0 +1,18 @@
+{
+  "id": "blur-carousel",
+  "tier": "free",
+  "version": "0.4.11",
+  "file": "blur-carousel.tsx",
+  "sourcePath": "ui/patterns/blur-carousel.tsx",
+  "registryFile": "blur-carousel.json",
+  "exports": [
+    "BlurCarousel",
+    "BlurCarouselProps"
+  ],
+  "dependencies": [
+    "framer-motion"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "\"use client\";\n\"use client\";\n\n/**\n * Adapted from Reacticx's Blur Carousel.\n * https://reacticx.com/components/blur-carousel\n * https://github.com/rit3zh/reacticx/blob/main/src/components/molecules/blur-carousel/index.tsx\n *\n * MIT License\n *\n * Copyright (c) 2026 rit3zh\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport React, { useEffect, useRef, useState } from \"react\";\nimport type { CSSProperties, KeyboardEvent, PointerEvent, ReactNode } from \"react\";\nimport { motion, useMotionValue, useReducedMotion, useTransform } from \"framer-motion\";\nimport type { MotionValue } from \"framer-motion\";\n\nexport type BlurCarouselProps<Item> = {\n  data: readonly Item[];\n  renderItem: (info: { item: Item; index: number }) => ReactNode;\n  keyExtractor?: (item: Item, index: number) => string;\n  spacing?: number;\n  itemWidth?: number;\n  horizontalSpacing?: number;\n  className?: string;\n  style?: CSSProperties;\n  label?: string;\n};\n\ntype CarouselSlideProps = {\n  children: ReactNode;\n  index: number;\n  total: number;\n  position: MotionValue<number>;\n  reducedMotion: boolean;\n};\n\nfunction CarouselSlide({ children, index, total, position, reducedMotion }: CarouselSlideProps) {\n  const distance = useTransform(position, (value) => Math.min(1, Math.abs(value - index)));\n  const scale = useTransform(distance, (value) => 1 - value * 0.15);\n  const opacity = useTransform(distance, (value) => 1 - value * 0.5);\n  const filter = useTransform(distance, (value) => `blur(${value * 7}px)`);\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      aria-label={`${index + 1} of ${total}`}\n      data-mova-blur-slide={index}\n      style={{\n        flex: \"0 0 var(--mova-blur-width)\",\n        minWidth: 0,\n        boxSizing: \"border-box\",\n        paddingInline: \"var(--mova-blur-gap)\",\n        scrollSnapAlign: \"start\",\n        display: \"grid\",\n        alignItems: \"center\",\n      }}\n    >\n      <motion.div\n        style={{\n          overflow: \"hidden\",\n          minWidth: 0,\n          borderRadius: 20,\n          boxShadow: \"0 8px 12px rgb(0 0 0 / 20%)\",\n          opacity,\n          scale: reducedMotion ? 1 : scale,\n        }}\n      >\n        <motion.div style={{ filter: reducedMotion ? \"none\" : filter }}>{children}</motion.div>\n      </motion.div>\n    </div>\n  );\n}\n\ntype MouseDrag = {\n  pointerId: number;\n  startX: number;\n  startLeft: number;\n  moved: boolean;\n};\n\nconst carouselCss = `\n  [data-mova-blur-viewport] { scroll-snap-type: x mandatory; }\n  [data-mova-blur-viewport][data-dragging] { scroll-snap-type: none; }\n  [data-mova-blur-viewport]::-webkit-scrollbar { display: none; }\n  [data-mova-blur-viewport]:focus-visible {\n    outline: 2px solid currentColor;\n    outline-offset: -2px;\n  }\n  @media (pointer: fine) {\n    [data-mova-blur-viewport][tabindex] { cursor: grab; }\n    [data-mova-blur-viewport][data-dragging] { cursor: grabbing; }\n  }\n`;\n\nexport function BlurCarousel<Item>({\n  data,\n  renderItem,\n  keyExtractor,\n  spacing = 20,\n  itemWidth,\n  horizontalSpacing,\n  className,\n  style,\n  label = \"Carousel\",\n}: BlurCarouselProps<Item>) {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const dragRef = useRef<MouseDrag | null>(null);\n  const suppressClick = useRef(false);\n  const targetIndex = useRef<number | null>(null);\n  const settleTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const position = useMotionValue(0);\n  const reducedMotion = useReducedMotion() ?? false;\n  const [activeIndex, setActiveIndex] = useState(0);\n\n  useEffect(() => {\n    const viewport = viewportRef.current;\n    const firstSlide = viewport?.querySelector(\"[data-mova-blur-slide]\");\n    if (!viewport || !firstSlide) return;\n\n    const sync = () => {\n      const width = firstSlide.getBoundingClientRect().width;\n      const current = width ? Math.abs(viewport.scrollLeft) / width : 0;\n      position.set(current);\n      setActiveIndex(Math.min(data.length - 1, Math.round(current)));\n    };\n    const observer = new ResizeObserver(sync);\n    observer.observe(viewport);\n    observer.observe(firstSlide);\n    sync();\n\n    return () => {\n      observer.disconnect();\n      if (settleTimer.current !== null) clearTimeout(settleTimer.current);\n    };\n  }, [data.length, itemWidth, horizontalSpacing, position]);\n\n  const slideWidth = (viewport: HTMLDivElement) =>\n    viewport.querySelector(\"[data-mova-blur-slide]\")?.getBoundingClientRect().width ?? 0;\n\n  const direction = (viewport: HTMLDivElement) => getComputedStyle(viewport).direction === \"rtl\" ? -1 : 1;\n  const clampIndex = (index: number) => Math.max(0, Math.min(data.length - 1, index));\n\n  const scrollToSlide = (viewport: HTMLDivElement, index: number, instant = false) => {\n    const next = clampIndex(index);\n    const left = direction(viewport) * next * slideWidth(viewport);\n    if (Math.abs(viewport.scrollLeft - left) < 1) return;\n    targetIndex.current = next;\n    viewport.scrollTo({ left, behavior: instant || reducedMotion ? \"instant\" : \"smooth\" });\n  };\n\n  const handleScroll = (viewport: HTMLDivElement) => {\n    const width = slideWidth(viewport);\n    if (!width) return;\n    const current = Math.abs(viewport.scrollLeft) / width;\n    position.set(current);\n    if (settleTimer.current !== null) clearTimeout(settleTimer.current);\n    settleTimer.current = setTimeout(() => {\n      targetIndex.current = null;\n      setActiveIndex(clampIndex(Math.round(position.get())));\n    }, 150);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.target !== event.currentTarget || data.length < 2 || event.altKey || event.ctrlKey || event.metaKey) return;\n    const viewport = event.currentTarget;\n    const current = targetIndex.current ?? Math.round(position.get());\n    let next: number;\n\n    switch (event.key) {\n      case \"ArrowLeft\": next = current - direction(viewport); break;\n      case \"ArrowRight\": next = current + direction(viewport); break;\n      case \"Home\": next = 0; break;\n      case \"End\": next = data.length - 1; break;\n      default: return;\n    }\n\n    event.preventDefault();\n    scrollToSlide(viewport, next);\n  };\n\n  const handlePointerDown = (event: PointerEvent<HTMLDivElement>) => {\n    suppressClick.current = false;\n    targetIndex.current = null;\n    if (data.length < 2 || event.pointerType !== \"mouse\" || event.button !== 0 || !event.isPrimary) return;\n    if (event.target instanceof Element && event.target.closest(\"input, textarea, select, [contenteditable='true']\")) return;\n    dragRef.current = {\n      pointerId: event.pointerId,\n      startX: event.clientX,\n      startLeft: event.currentTarget.scrollLeft,\n      moved: false,\n    };\n  };\n\n  const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    const drag = dragRef.current;\n    if (!drag || drag.pointerId !== event.pointerId) return;\n    const delta = event.clientX - drag.startX;\n    const viewport = event.currentTarget;\n    if (!drag.moved) {\n      if (Math.abs(delta) < 5) return;\n      drag.moved = true;\n      viewport.dataset.dragging = \"\";\n      viewport.setPointerCapture(event.pointerId);\n    }\n\n    event.preventDefault();\n    viewport.scrollLeft = drag.startLeft - delta;\n  };\n\n  const finishDrag = (event: PointerEvent<HTMLDivElement>) => {\n    const drag = dragRef.current;\n    if (!drag || drag.pointerId !== event.pointerId) return;\n    dragRef.current = null;\n    if (!drag.moved) return;\n\n    const viewport = event.currentTarget;\n    const width = slideWidth(viewport);\n    suppressClick.current = true;\n    delete viewport.dataset.dragging;\n    if (width) scrollToSlide(viewport, Math.round(Math.abs(viewport.scrollLeft) / width));\n  };\n\n  if (!data.length) return null;\n\n  const width = itemWidth === undefined ? \"75%\" : `min(100%, ${Math.max(1, itemWidth)}px)`;\n  const sideSpace = horizontalSpacing === undefined\n    ? \"calc((100% - var(--mova-blur-width)) / 2)\"\n    : `min(${Math.max(0, horizontalSpacing)}px, calc(100% - var(--mova-blur-width)))`;\n  const viewportStyle = {\n    \"--mova-blur-width\": width,\n    \"--mova-blur-side\": sideSpace,\n    \"--mova-blur-gap\": `min(${Math.max(0, spacing)}px, calc(var(--mova-blur-width) / 4))`,\n    display: \"flex\",\n    width: \"100%\",\n    minWidth: 0,\n    overflowX: \"auto\",\n    overscrollBehaviorX: \"contain\",\n    scrollbarWidth: \"none\",\n    paddingBlock: 12,\n    scrollPaddingInlineStart: \"var(--mova-blur-side)\",\n    userSelect: \"none\",\n    WebkitUserSelect: \"none\",\n  } satisfies CSSProperties & Record<`--${string}`, string>;\n\n  return (\n    <section aria-label={label} aria-roledescription=\"carousel\" className={className} style={style}>\n      <style>{carouselCss}</style>\n      <div\n        ref={viewportRef}\n        data-mova-blur-viewport=\"\"\n        tabIndex={data.length > 1 ? 0 : undefined}\n        aria-label={data.length > 1 ? \"Slides\" : undefined}\n        aria-keyshortcuts={data.length > 1 ? \"ArrowLeft ArrowRight Home End\" : undefined}\n        onKeyDown={handleKeyDown}\n        onScroll={(event) => handleScroll(event.currentTarget)}\n        onWheel={() => { targetIndex.current = null; }}\n        onFocusCapture={(event) => {\n          const slide = event.target.closest<HTMLElement>(\"[data-mova-blur-slide]\");\n          if (slide) scrollToSlide(event.currentTarget, Number(slide.dataset.movaBlurSlide), true);\n        }}\n        onDragStart={(event) => {\n          if (dragRef.current) event.preventDefault();\n        }}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onPointerUp={finishDrag}\n        onPointerCancel={finishDrag}\n        onLostPointerCapture={finishDrag}\n        onPointerLeave={(event) => {\n          if (!dragRef.current?.moved) finishDrag(event);\n        }}\n        onClickCapture={(event) => {\n          if (!suppressClick.current || event.detail === 0) return;\n          suppressClick.current = false;\n          event.preventDefault();\n          event.stopPropagation();\n        }}\n        style={viewportStyle}\n      >\n        <span aria-hidden=\"true\" style={{ flex: \"0 0 var(--mova-blur-side)\" }} />\n        {data.map((item, index) => (\n          <CarouselSlide\n            key={keyExtractor?.(item, index) ?? index}\n            index={index}\n            total={data.length}\n            position={position}\n            reducedMotion={reducedMotion}\n          >\n            {renderItem({ item, index })}\n          </CarouselSlide>\n        ))}\n        <span aria-hidden=\"true\" style={{ flex: \"0 0 calc(100% - var(--mova-blur-width) - var(--mova-blur-side))\" }} />\n      </div>\n      <span\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        style={{ position: \"absolute\", width: 1, height: 1, padding: 0, overflow: \"hidden\", clipPath: \"inset(50%)\", whiteSpace: \"nowrap\" }}\n      >\n        {Math.min(activeIndex + 1, data.length)} of {data.length}\n      </span>\n    </section>\n  );\n}\n"
+}

package/registry/blur-text.json

@@ -1,7 +1,7 @@
 {
   "id": "blur-text",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "blur-text.tsx",
   "sourcePath": "ui/text/blur-text.tsx",
   "registryFile": "blur-text.json",

package/registry/blur-up-char.json

@@ -1,7 +1,7 @@
 {
   "id": "blur-up-char",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "blur-up-char.tsx",
   "registryFile": "blur-up-char.json",
   "exports": [

package/registry/blur-up-word.json

@@ -1,7 +1,7 @@
 {
   "id": "blur-up-word",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "blur-up-word.tsx",
   "registryFile": "blur-up-word.json",
   "exports": [

package/registry/bobbing-dots.json

@@ -1,7 +1,7 @@
 {
   "id": "bobbing-dots",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "bobbing-dots.tsx",
   "sourcePath": "ui/loading/bobbing-dots.tsx",
   "registryFile": "bobbing-dots.json",

package/registry/bookmark-corner-peel.json

@@ -1,7 +1,7 @@
 {
   "id": "bookmark-corner-peel",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "bookmark-corner-peel.tsx",
   "sourcePath": "components/css-animations/whimsical/ConceptTrios1.tsx",
   "registryFile": "bookmark-corner-peel.json",

package/registry/bookmark-save-pill.json

@@ -1,7 +1,7 @@
 {
   "id": "bookmark-save-pill",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "bookmark-save-pill.tsx",
   "sourcePath": "components/css-animations/yui-components/RedesignedUiTrios.tsx",
   "registryFile": "bookmark-save-pill.json",

package/registry/bookmark-toggle.json

@@ -1,7 +1,7 @@
 {
   "id": "bookmark-toggle",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "bookmark-toggle.tsx",
   "registryFile": "bookmark-toggle.json",
   "exports": [

package/registry/border-trail-loading.json

@@ -1,7 +1,7 @@
 {
   "id": "border-trail-loading",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "border-trail-loading.tsx",
   "sourcePath": "ui/loading/border-trail-loading.tsx",
   "registryFile": "border-trail-loading.json",

package/registry/bounce-dots.json

@@ -1,7 +1,7 @@
 {
   "id": "bounce-dots",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "bounce-dots.tsx",
   "sourcePath": "ui/loading/bounce-dots.tsx",
   "registryFile": "bounce-dots.json",

package/registry/bounce-in-char.json

@@ -1,7 +1,7 @@
 {
   "id": "bounce-in-char",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "bounce-in-char.tsx",
   "registryFile": "bounce-in-char.json",
   "exports": [

package/registry/bouncing-bars.json

@@ -1,7 +1,7 @@
 {
   "id": "bouncing-bars",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "bouncing-bars.tsx",
   "sourcePath": "ui/loading/bouncing-bars.tsx",
   "registryFile": "bouncing-bars.json",

package/registry/bouncing-dots.json

@@ -1,7 +1,7 @@
 {
   "id": "bouncing-dots",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "bouncing-dots.tsx",
   "sourcePath": "ui/loading/bouncing-dots.tsx",
   "registryFile": "bouncing-dots.json",

package/registry/bouncing-lines.json

@@ -1,7 +1,7 @@
 {
   "id": "bouncing-lines",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "bouncing-lines.tsx",
   "sourcePath": "ui/loading/bouncing-lines.tsx",
   "registryFile": "bouncing-lines.json",

package/registry/bouncing-square.json

@@ -1,7 +1,7 @@
 {
   "id": "bouncing-square",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "bouncing-square.tsx",
   "sourcePath": "ui/loading/bouncing-square.tsx",
   "registryFile": "bouncing-square.json",

package/registry/breathe-ring.json

@@ -1,7 +1,7 @@
 {
   "id": "breathe-ring",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "breathe-ring.tsx",
   "sourcePath": "ui/loading/breathe-ring.tsx",
   "registryFile": "breathe-ring.json",

package/registry/breathing-glow.json

@@ -1,7 +1,7 @@
 {
   "id": "breathing-glow",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "breathing-glow.tsx",
   "sourcePath": "ui/loading/breathing-glow.tsx",
   "registryFile": "breathing-glow.json",

package/registry/breathing-square.json

@@ -1,7 +1,7 @@
 {
   "id": "breathing-square",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "breathing-square.tsx",
   "sourcePath": "ui/loading/breathing-square.tsx",
   "registryFile": "breathing-square.json",

package/registry/btn-1.json

@@ -1,7 +1,7 @@
 {
   "id": "btn-1",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "btn-1.tsx",
   "registryFile": "btn-1.json",
   "exports": [

package/registry/btn-10.json

@@ -1,7 +1,7 @@
 {
   "id": "btn-10",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "btn-10.tsx",
   "registryFile": "btn-10.json",
   "exports": [

package/registry/btn-11.json

@@ -1,7 +1,7 @@
 {
   "id": "btn-11",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "btn-11.tsx",
   "registryFile": "btn-11.json",
   "exports": [

package/registry/btn-12.json

@@ -1,7 +1,7 @@
 {
   "id": "btn-12",
   "tier": "free",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "file": "btn-12.tsx",
   "registryFile": "btn-12.json",
   "exports": [