diff --git a/__registry__/index.tsx b/__registry__/index.tsx index f1e3d2293..39208e90f 100644 --- a/__registry__/index.tsx +++ b/__registry__/index.tsx @@ -1,1832 +1,1529 @@ // @ts-nocheck // This file is autogenerated by scripts/build-registry.ts // Do not edit this file directly. -import * as React from "react"; +import * as React from "react" export const Index: Record = { - default: { + "default": { "magic-card": { name: "magic-card", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/magic-card.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/magic-card.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/magic-card.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "neon-gradient-card": { name: "neon-gradient-card", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/neon-gradient-card.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/neon-gradient-card.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/neon-gradient-card.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, - meteors: { + "meteors": { name: "meteors", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/meteors.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/meteors.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/meteors.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "grid-pattern": { name: "grid-pattern", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/grid-pattern.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/grid-pattern.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/grid-pattern.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "dot-pattern": { name: "dot-pattern", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/dot-pattern.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/dot-pattern.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/dot-pattern.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "flickering-grid": { name: "flickering-grid", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/flickering-grid.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/flickering-grid.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/flickering-grid.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "hero-video-dialog": { name: "hero-video-dialog", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/hero-video-dialog.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/hero-video-dialog.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/hero-video-dialog.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "code-comparison": { name: "code-comparison", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/code-comparison.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/code-comparison.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/code-comparison.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, - marquee: { + "marquee": { name: "marquee", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/marquee.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/marquee.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/marquee.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, - globe: { + "globe": { name: "globe", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/globe.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/globe.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/globe.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "shimmer-button": { name: "shimmer-button", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/shimmer-button.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/shimmer-button.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/shimmer-button.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "tweet-card": { name: "tweet-card", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/tweet-card.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/tweet-card.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/tweet-card.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "client-tweet-card": { name: "client-tweet-card", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/client-tweet-card.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/client-tweet-card.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/client-tweet-card.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "bento-grid": { name: "bento-grid", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/bento-grid.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/bento-grid.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/bento-grid.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, - particles: { + "particles": { name: "particles", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/particles.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/particles.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/particles.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "number-ticker": { name: "number-ticker", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/number-ticker.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/number-ticker.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/number-ticker.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, - ripple: { + "ripple": { name: "ripple", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/ripple.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/ripple.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/ripple.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "retro-grid": { name: "retro-grid", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/retro-grid.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/retro-grid.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/retro-grid.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "animated-list": { name: "animated-list", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/animated-list.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/animated-list.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/animated-list.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "animated-shiny-text": { name: "animated-shiny-text", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/animated-shiny-text.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/animated-shiny-text.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/animated-shiny-text.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "animated-grid-pattern": { name: "animated-grid-pattern", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/animated-grid-pattern.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/animated-grid-pattern.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/animated-grid-pattern.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "border-beam": { name: "border-beam", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/border-beam.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/border-beam.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/border-beam.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "animated-beam": { name: "animated-beam", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/animated-beam.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/animated-beam.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/animated-beam.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "text-reveal": { name: "text-reveal", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/text-reveal.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/text-reveal.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/text-reveal.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "hyper-text": { name: "hyper-text", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/hyper-text.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/hyper-text.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/hyper-text.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "animated-gradient-text": { name: "animated-gradient-text", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/animated-gradient-text.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/animated-gradient-text.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/animated-gradient-text.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "orbiting-circles": { name: "orbiting-circles", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/orbiting-circles.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/orbiting-circles.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/orbiting-circles.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, - dock: { + "dock": { name: "dock", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/dock.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/dock.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/dock.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "word-rotate": { name: "word-rotate", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/word-rotate.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/word-rotate.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/word-rotate.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "avatar-circles": { name: "avatar-circles", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/avatar-circles.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/avatar-circles.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/avatar-circles.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "word-pull-up": { name: "word-pull-up", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/word-pull-up.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/word-pull-up.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/word-pull-up.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "typing-animation": { name: "typing-animation", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/typing-animation.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/typing-animation.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/typing-animation.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "blur-in": { name: "blur-in", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/blur-in.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/blur-in.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/blur-in.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "letter-pullup": { name: "letter-pullup", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/letter-pullup.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/letter-pullup.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/letter-pullup.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "sparkles-text": { name: "sparkles-text", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/sparkles-text.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/sparkles-text.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/sparkles-text.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "flip-text": { name: "flip-text", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/flip-text.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/flip-text.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/flip-text.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "icon-cloud": { name: "icon-cloud", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/icon-cloud.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/icon-cloud.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/icon-cloud.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "gradual-spacing": { name: "gradual-spacing", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/gradual-spacing.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/gradual-spacing.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/gradual-spacing.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "word-fade-in": { name: "word-fade-in", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/word-fade-in.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/word-fade-in.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/word-fade-in.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "scroll-based-velocity": { name: "scroll-based-velocity", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/scroll-based-velocity.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/scroll-based-velocity.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/scroll-based-velocity.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "fade-text": { name: "fade-text", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/fade-text.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/fade-text.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/fade-text.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "shiny-button": { name: "shiny-button", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/shiny-button.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/shiny-button.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/shiny-button.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "box-reveal": { name: "box-reveal", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/box-reveal.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/box-reveal.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/box-reveal.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "shine-border": { name: "shine-border", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/shine-border.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/shine-border.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/shine-border.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "animated-circular-progress-bar": { name: "animated-circular-progress-bar", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/animated-circular-progress-bar.tsx"], - component: React.lazy( - () => - import( - "@/registry/default/magicui/animated-circular-progress-bar.tsx" - ), - ), + component: React.lazy(() => import("@/registry/default/magicui/animated-circular-progress-bar.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, - confetti: { + "confetti": { name: "confetti", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/confetti.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/confetti.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/confetti.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "animated-subscribe-button": { name: "animated-subscribe-button", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/animated-subscribe-button.tsx"], - component: React.lazy( - () => - import("@/registry/default/magicui/animated-subscribe-button.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/animated-subscribe-button.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "cool-mode": { name: "cool-mode", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/cool-mode.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/cool-mode.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/cool-mode.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "pulsating-button": { name: "pulsating-button", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/pulsating-button.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/pulsating-button.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/pulsating-button.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "file-tree": { name: "file-tree", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/file-tree.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/file-tree.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/file-tree.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "blur-fade": { name: "blur-fade", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/blur-fade.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/blur-fade.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/blur-fade.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, - safari: { + "safari": { name: "safari", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/safari.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/safari.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/safari.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "iphone-15-pro": { name: "iphone-15-pro", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/iphone-15-pro.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/iphone-15-pro.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/iphone-15-pro.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "rainbow-button": { name: "rainbow-button", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/rainbow-button.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/rainbow-button.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/rainbow-button.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "magic-card-demo": { name: "magic-card-demo", type: "registry:example", registryDependencies: ["magic-card"], files: ["registry/default/example/magic-card-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/magic-card-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/magic-card-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "neon-gradient-card-demo": { name: "neon-gradient-card-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/neon-gradient-card-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/neon-gradient-card-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/neon-gradient-card-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "meteors-demo": { name: "meteors-demo", type: "registry:example", registryDependencies: ["meteors"], files: ["registry/default/example/meteors-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/meteors-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/meteors-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "grid-pattern-demo": { name: "grid-pattern-demo", type: "registry:example", registryDependencies: ["grid-pattern"], files: ["registry/default/example/grid-pattern-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/grid-pattern-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/grid-pattern-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "grid-pattern-linear-gradient": { name: "grid-pattern-linear-gradient", type: "registry:example", registryDependencies: ["grid-pattern"], files: ["registry/default/example/grid-pattern-linear-gradient.tsx"], - component: React.lazy( - () => - import("@/registry/default/example/grid-pattern-linear-gradient.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/grid-pattern-linear-gradient.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "grid-pattern-dashed": { name: "grid-pattern-dashed", type: "registry:example", registryDependencies: ["grid-pattern"], files: ["registry/default/example/grid-pattern-dashed.tsx"], - component: React.lazy( - () => import("@/registry/default/example/grid-pattern-dashed.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/grid-pattern-dashed.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "dot-pattern-demo": { name: "dot-pattern-demo", type: "registry:example", registryDependencies: ["dot-pattern"], files: ["registry/default/example/dot-pattern-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/dot-pattern-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/dot-pattern-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "dot-pattern-linear-gradient": { name: "dot-pattern-linear-gradient", type: "registry:example", registryDependencies: ["dot-pattern"], files: ["registry/default/example/dot-pattern-linear-gradient.tsx"], - component: React.lazy( - () => - import("@/registry/default/example/dot-pattern-linear-gradient.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/dot-pattern-linear-gradient.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "flickering-grid-demo": { name: "flickering-grid-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/flickering-grid-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/flickering-grid-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/flickering-grid-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "flickering-grid-rounded-demo": { name: "flickering-grid-rounded-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/flickering-grid-rounded-demo.tsx"], - component: React.lazy( - () => - import("@/registry/default/example/flickering-grid-rounded-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/flickering-grid-rounded-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "hero-video-dialog-demo": { name: "hero-video-dialog-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/hero-video-dialog-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/hero-video-dialog-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/hero-video-dialog-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "hero-video-dialog-demo-top-in-bottom-out": { name: "hero-video-dialog-demo-top-in-bottom-out", type: "registry:example", registryDependencies: undefined, - files: [ - "registry/default/example/hero-video-dialog-demo-top-in-bottom-out.tsx", - ], - component: React.lazy( - () => - import( - "@/registry/default/example/hero-video-dialog-demo-top-in-bottom-out.tsx" - ), - ), + files: ["registry/default/example/hero-video-dialog-demo-top-in-bottom-out.tsx"], + component: React.lazy(() => import("@/registry/default/example/hero-video-dialog-demo-top-in-bottom-out.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "code-comparison-demo": { name: "code-comparison-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/code-comparison-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/code-comparison-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/code-comparison-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "marquee-demo": { name: "marquee-demo", type: "registry:example", registryDependencies: ["marquee"], files: ["registry/default/example/marquee-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/marquee-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/marquee-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "marquee-demo-vertical": { name: "marquee-demo-vertical", type: "registry:example", registryDependencies: ["marquee"], files: ["registry/default/example/marquee-demo-vertical.tsx"], - component: React.lazy( - () => import("@/registry/default/example/marquee-demo-vertical.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/marquee-demo-vertical.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "marquee-logos": { name: "marquee-logos", type: "registry:example", registryDependencies: ["marquee"], files: ["registry/default/example/marquee-logos.tsx"], - component: React.lazy( - () => import("@/registry/default/example/marquee-logos.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/marquee-logos.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "marquee-3d": { name: "marquee-3d", type: "registry:example", registryDependencies: ["marquee"], files: ["registry/default/example/marquee-3d.tsx"], - component: React.lazy( - () => import("@/registry/default/example/marquee-3d.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/marquee-3d.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "globe-demo": { name: "globe-demo", type: "registry:example", registryDependencies: ["globe"], files: ["registry/default/example/globe-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/globe-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/globe-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "tweet-card-demo": { name: "tweet-card-demo", type: "registry:example", registryDependencies: ["tweet-card"], files: ["registry/default/example/tweet-card-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/tweet-card-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/tweet-card-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "tweet-card-images": { name: "tweet-card-images", type: "registry:example", registryDependencies: ["tweet-card"], files: ["registry/default/example/tweet-card-images.tsx"], - component: React.lazy( - () => import("@/registry/default/example/tweet-card-images.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/tweet-card-images.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "tweet-card-meta-preview": { name: "tweet-card-meta-preview", type: "registry:example", registryDependencies: ["tweet-card"], files: ["registry/default/example/tweet-card-meta-preview.tsx"], - component: React.lazy( - () => import("@/registry/default/example/tweet-card-meta-preview.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/tweet-card-meta-preview.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "shimmer-button-demo": { name: "shimmer-button-demo", type: "registry:example", registryDependencies: ["shimmer-button"], files: ["registry/default/example/shimmer-button-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/shimmer-button-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/shimmer-button-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "bento-demo": { name: "bento-demo", type: "registry:example", - registryDependencies: [ - "bento-grid", - "marquee", - "animated-list-demo", - "animated-beam-multiple-outputs", - "shadcn:command", - "shadcn:calendar", - ], + registryDependencies: ["bento-grid","marquee","animated-list-demo","animated-beam-multiple-outputs","shadcn:command","shadcn:calendar"], files: ["registry/default/example/bento-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/bento-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/bento-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "bento-demo-vertical": { name: "bento-demo-vertical", type: "registry:example", registryDependencies: ["bento-grid"], files: ["registry/default/example/bento-demo-vertical.tsx"], - component: React.lazy( - () => import("@/registry/default/example/bento-demo-vertical.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/bento-demo-vertical.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "number-ticker-demo": { name: "number-ticker-demo", type: "registry:example", registryDependencies: ["number-ticker"], files: ["registry/default/example/number-ticker-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/number-ticker-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/number-ticker-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "number-ticker-decimal-demo": { name: "number-ticker-decimal-demo", type: "registry:example", registryDependencies: ["number-ticker"], files: ["registry/default/example/number-ticker-decimal-demo.tsx"], - component: React.lazy( - () => - import("@/registry/default/example/number-ticker-decimal-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/number-ticker-decimal-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] + }, + "number-ticker-duration-demo": { + name: "number-ticker-duration-demo", + type: "registry:example", + registryDependencies: ["number-ticker"], + files: ["registry/default/example/number-ticker-duration-demo.tsx"], + component: React.lazy(() => import("@/registry/default/example/number-ticker-duration-demo.tsx")), + source: "", + category: "undefined", + subcategory: "undefined", + chunks: [] }, "ripple-demo": { name: "ripple-demo", type: "registry:example", registryDependencies: ["ripple"], files: ["registry/default/example/ripple-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/ripple-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/ripple-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "retro-grid-demo": { name: "retro-grid-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/retro-grid-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/retro-grid-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/retro-grid-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "animated-list-demo": { name: "animated-list-demo", type: "registry:example", registryDependencies: ["animated-list"], files: ["registry/default/example/animated-list-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/animated-list-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/animated-list-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "animated-shiny-text-demo": { name: "animated-shiny-text-demo", type: "registry:example", registryDependencies: ["animated-shiny-text"], files: ["registry/default/example/animated-shiny-text-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/animated-shiny-text-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/animated-shiny-text-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "particles-demo": { name: "particles-demo", type: "registry:example", registryDependencies: ["particles"], files: ["registry/default/example/particles-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/particles-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/particles-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "animated-grid-pattern-demo": { name: "animated-grid-pattern-demo", type: "registry:example", registryDependencies: ["animated-grid-pattern"], files: ["registry/default/example/animated-grid-pattern-demo.tsx"], - component: React.lazy( - () => - import("@/registry/default/example/animated-grid-pattern-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/animated-grid-pattern-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "border-beam-demo": { name: "border-beam-demo", type: "registry:example", registryDependencies: ["border-beam"], files: ["registry/default/example/border-beam-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/border-beam-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/border-beam-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "animated-beam-demo": { name: "animated-beam-demo", type: "registry:example", registryDependencies: ["animated-beam"], files: ["registry/default/example/animated-beam-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/animated-beam-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/animated-beam-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "animated-beam-unidirectional": { name: "animated-beam-unidirectional", type: "registry:example", registryDependencies: ["animated-beam"], files: ["registry/default/example/animated-beam-unidirectional.tsx"], - component: React.lazy( - () => - import("@/registry/default/example/animated-beam-unidirectional.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/animated-beam-unidirectional.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "animated-beam-bidirectional": { name: "animated-beam-bidirectional", type: "registry:example", registryDependencies: ["animated-beam"], files: ["registry/default/example/animated-beam-bidirectional.tsx"], - component: React.lazy( - () => - import("@/registry/default/example/animated-beam-bidirectional.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/animated-beam-bidirectional.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "animated-beam-multiple-inputs": { name: "animated-beam-multiple-inputs", type: "registry:example", registryDependencies: ["animated-beam"], files: ["registry/default/example/animated-beam-multiple-inputs.tsx"], - component: React.lazy( - () => - import( - "@/registry/default/example/animated-beam-multiple-inputs.tsx" - ), - ), + component: React.lazy(() => import("@/registry/default/example/animated-beam-multiple-inputs.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "animated-beam-multiple-outputs": { name: "animated-beam-multiple-outputs", type: "registry:example", registryDependencies: ["animated-beam"], files: ["registry/default/example/animated-beam-multiple-outputs.tsx"], - component: React.lazy( - () => - import( - "@/registry/default/example/animated-beam-multiple-outputs.tsx" - ), - ), + component: React.lazy(() => import("@/registry/default/example/animated-beam-multiple-outputs.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "text-reveal-demo": { name: "text-reveal-demo", type: "registry:example", registryDependencies: ["text-reveal"], files: ["registry/default/example/text-reveal-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/text-reveal-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/text-reveal-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "animated-gradient-text-demo": { name: "animated-gradient-text-demo", type: "registry:example", registryDependencies: ["animated-gradient-text"], files: ["registry/default/example/animated-gradient-text-demo.tsx"], - component: React.lazy( - () => - import("@/registry/default/example/animated-gradient-text-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/animated-gradient-text-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "orbiting-circles-demo": { name: "orbiting-circles-demo", type: "registry:example", registryDependencies: ["orbiting-circles"], files: ["registry/default/example/orbiting-circles-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/orbiting-circles-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/orbiting-circles-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "dock-demo": { name: "dock-demo", type: "registry:example", registryDependencies: ["dock"], files: ["registry/default/example/dock-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/dock-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/dock-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "dock-demo-2": { name: "dock-demo-2", type: "registry:example", registryDependencies: ["dock"], files: ["registry/default/example/dock-demo-2.tsx"], - component: React.lazy( - () => import("@/registry/default/example/dock-demo-2.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/dock-demo-2.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "dock-demo-3": { name: "dock-demo-3", type: "registry:example", registryDependencies: ["dock"], files: ["registry/default/example/dock-demo-3.tsx"], - component: React.lazy( - () => import("@/registry/default/example/dock-demo-3.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/dock-demo-3.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "word-rotate-demo": { name: "word-rotate-demo", type: "registry:example", registryDependencies: ["word-rotate"], files: ["registry/default/example/word-rotate-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/word-rotate-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/word-rotate-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "hyper-text-demo": { name: "hyper-text-demo", type: "registry:example", registryDependencies: ["hyper-text"], files: ["registry/default/example/hyper-text-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/hyper-text-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/hyper-text-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "avatar-circles-demo": { name: "avatar-circles-demo", type: "registry:example", registryDependencies: ["avatar-circles"], files: ["registry/default/example/avatar-circles-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/avatar-circles-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/avatar-circles-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "word-pull-up-demo": { name: "word-pull-up-demo", type: "registry:example", registryDependencies: ["word-pull-up"], files: ["registry/default/example/word-pull-up-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/word-pull-up-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/word-pull-up-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "typing-animation-demo": { name: "typing-animation-demo", type: "registry:example", registryDependencies: ["typing-animation"], files: ["registry/default/example/typing-animation-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/typing-animation-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/typing-animation-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "blur-in-demo": { name: "blur-in-demo", type: "registry:example", registryDependencies: ["blur-in"], files: ["registry/default/example/blur-in-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/blur-in-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/blur-in-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "scroll-based-velocity-demo": { name: "scroll-based-velocity-demo", type: "registry:example", registryDependencies: ["scroll-based-velocity"], files: ["registry/default/example/scroll-based-velocity-demo.tsx"], - component: React.lazy( - () => - import("@/registry/default/example/scroll-based-velocity-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/scroll-based-velocity-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "letter-pullup-demo": { name: "letter-pullup-demo", type: "registry:example", registryDependencies: ["letter-pullup"], files: ["registry/default/example/letter-pullup-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/letter-pullup-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/letter-pullup-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "flip-text-demo": { name: "flip-text-demo", type: "registry:example", registryDependencies: ["flip-text"], files: ["registry/default/example/flip-text-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/flip-text-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/flip-text-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "sparkles-text-demo": { name: "sparkles-text-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/sparkles-text-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/sparkles-text-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/sparkles-text-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "icon-cloud-demo": { name: "icon-cloud-demo", type: "registry:example", registryDependencies: ["icon-cloud"], files: ["registry/default/example/icon-cloud-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/icon-cloud-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/icon-cloud-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "gradual-spacing-demo": { name: "gradual-spacing-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/gradual-spacing-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/gradual-spacing-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/gradual-spacing-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "word-fade-in-demo": { name: "word-fade-in-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/word-fade-in-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/word-fade-in-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/word-fade-in-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "fade-text-demo": { name: "fade-text-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/fade-text-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/fade-text-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/fade-text-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "shiny-button-demo": { name: "shiny-button-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/shiny-button-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/shiny-button-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/shiny-button-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "box-reveal-demo": { name: "box-reveal-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/box-reveal-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/box-reveal-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/box-reveal-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "animated-circular-progress-bar-demo": { name: "animated-circular-progress-bar-demo", type: "registry:example", registryDependencies: undefined, - files: [ - "registry/default/example/animated-circular-progress-bar-demo.tsx", - ], - component: React.lazy( - () => - import( - "@/registry/default/example/animated-circular-progress-bar-demo.tsx" - ), - ), + files: ["registry/default/example/animated-circular-progress-bar-demo.tsx"], + component: React.lazy(() => import("@/registry/default/example/animated-circular-progress-bar-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "shine-border-demo": { name: "shine-border-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/shine-border-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/shine-border-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/shine-border-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "shine-border-demo-2": { name: "shine-border-demo-2", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/shine-border-demo-2.tsx"], - component: React.lazy( - () => import("@/registry/default/example/shine-border-demo-2.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/shine-border-demo-2.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "confetti-demo": { name: "confetti-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/confetti-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/confetti-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/confetti-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "confetti-basic-cannon": { name: "confetti-basic-cannon", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/confetti-basic-cannon.tsx"], - component: React.lazy( - () => import("@/registry/default/example/confetti-basic-cannon.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/confetti-basic-cannon.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "confetti-random-direction": { name: "confetti-random-direction", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/confetti-random-direction.tsx"], - component: React.lazy( - () => - import("@/registry/default/example/confetti-random-direction.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/confetti-random-direction.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "confetti-fireworks": { name: "confetti-fireworks", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/confetti-fireworks.tsx"], - component: React.lazy( - () => import("@/registry/default/example/confetti-fireworks.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/confetti-fireworks.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "confetti-stars": { name: "confetti-stars", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/confetti-stars.tsx"], - component: React.lazy( - () => import("@/registry/default/example/confetti-stars.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/confetti-stars.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "confetti-side-cannons": { name: "confetti-side-cannons", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/confetti-side-cannons.tsx"], - component: React.lazy( - () => import("@/registry/default/example/confetti-side-cannons.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/confetti-side-cannons.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "confetti-custom-shapes": { name: "confetti-custom-shapes", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/confetti-custom-shapes.tsx"], - component: React.lazy( - () => import("@/registry/default/example/confetti-custom-shapes.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/confetti-custom-shapes.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "confetti-emoji": { name: "confetti-emoji", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/confetti-emoji.tsx"], - component: React.lazy( - () => import("@/registry/default/example/confetti-emoji.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/confetti-emoji.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "animated-subscribe-button-demo": { name: "animated-subscribe-button-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/animated-subscribe-button-demo.tsx"], - component: React.lazy( - () => - import( - "@/registry/default/example/animated-subscribe-button-demo.tsx" - ), - ), + component: React.lazy(() => import("@/registry/default/example/animated-subscribe-button-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "cool-mode-demo": { name: "cool-mode-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/cool-mode-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/cool-mode-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/cool-mode-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "cool-mode-custom": { name: "cool-mode-custom", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/cool-mode-custom.tsx"], - component: React.lazy( - () => import("@/registry/default/example/cool-mode-custom.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/cool-mode-custom.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "pulsating-button-demo": { name: "pulsating-button-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/pulsating-button-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/pulsating-button-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/pulsating-button-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "file-tree-demo": { name: "file-tree-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/file-tree-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/file-tree-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/file-tree-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "blur-fade-demo": { name: "blur-fade-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/blur-fade-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/blur-fade-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/blur-fade-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "blur-fade-text-demo": { name: "blur-fade-text-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/blur-fade-text-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/blur-fade-text-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/blur-fade-text-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "safari-demo": { name: "safari-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/safari-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/safari-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/safari-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "safari-demo-2": { name: "safari-demo-2", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/safari-demo-2.tsx"], - component: React.lazy( - () => import("@/registry/default/example/safari-demo-2.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/safari-demo-2.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "iphone-15-pro-demo": { name: "iphone-15-pro-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/iphone-15-pro-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/iphone-15-pro-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/iphone-15-pro-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "iphone-15-pro-demo-2": { name: "iphone-15-pro-demo-2", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/iphone-15-pro-demo-2.tsx"], - component: React.lazy( - () => import("@/registry/default/example/iphone-15-pro-demo-2.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/iphone-15-pro-demo-2.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, "rainbow-button-demo": { name: "rainbow-button-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/rainbow-button-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/rainbow-button-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/rainbow-button-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, - utils: { + "utils": { name: "utils", type: "registry:lib", registryDependencies: undefined, @@ -1835,7 +1532,7 @@ export const Index: Record = { source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, }, -}; +} diff --git a/content/docs/components/number-ticker.mdx b/content/docs/components/number-ticker.mdx index 90d6c4d86..6159b247e 100644 --- a/content/docs/components/number-ticker.mdx +++ b/content/docs/components/number-ticker.mdx @@ -47,6 +47,10 @@ npx shadcn@latest add "https://magicui.design/r/number-ticker" +### Custom Duration + + + ## Props | Prop | Type | Description | Default | @@ -55,3 +59,4 @@ npx shadcn@latest add "https://magicui.design/r/number-ticker" | direction | up \| down | The direction to count in | up | | delay | number | The delay before counting | 0 | | decimalPlaces | number | The number of decimal places to show | 0 | +| duration | number | The duration of the animation, when not provided, the animation will be a [spring animation](https://www.framer.com/motion/use-spring) | undefined | diff --git a/registry/default/example/number-ticker-duration-demo.tsx b/registry/default/example/number-ticker-duration-demo.tsx new file mode 100644 index 000000000..ba3acb51a --- /dev/null +++ b/registry/default/example/number-ticker-duration-demo.tsx @@ -0,0 +1,11 @@ +import NumberTicker from "@/registry/default/magicui/number-ticker"; + +export default function NumberTickerDemo() { + return ( +

+ + + +

+ ); +} diff --git a/registry/default/magicui/number-ticker.tsx b/registry/default/magicui/number-ticker.tsx index 17db6c5a5..c2b34f9d1 100644 --- a/registry/default/magicui/number-ticker.tsx +++ b/registry/default/magicui/number-ticker.tsx @@ -1,8 +1,7 @@ "use client"; -import { useEffect, useRef } from "react"; -import { useInView, useMotionValue, useSpring } from "framer-motion"; - +import { useEffect, useRef, useCallback } from "react"; +import { useInView, useMotionValue, useSpring, animate } from "framer-motion"; import { cn } from "@/lib/utils"; export default function NumberTicker({ @@ -11,40 +10,58 @@ export default function NumberTicker({ delay = 0, className, decimalPlaces = 0, + duration, }: { value: number; direction?: "up" | "down"; className?: string; delay?: number; // delay in s decimalPlaces?: number; + duration?: number; // duration in s }) { const ref = useRef(null); const motionValue = useMotionValue(direction === "down" ? value : 0); - const springValue = useSpring(motionValue, { - damping: 60, - stiffness: 100, - }); + const springValue = useSpring(motionValue, { damping: 60, stiffness: 100 }); const isInView = useInView(ref, { once: true, margin: "0px" }); + const formatter = useRef(new Intl.NumberFormat("en-US", { + minimumFractionDigits: decimalPlaces, + maximumFractionDigits: decimalPlaces, + })).current; + + const updateDom = useCallback((latest: number) => { + if (ref.current) { + ref.current.textContent = formatter.format(Number(latest.toFixed(decimalPlaces))); + } + }, [formatter, decimalPlaces]); + useEffect(() => { - isInView && - setTimeout(() => { + if (!isInView) return; + + const timeoutId = setTimeout(() => { + if (duration === undefined) { motionValue.set(direction === "down" ? 0 : value); - }, delay * 1000); - }, [motionValue, isInView, delay, value, direction]); - - useEffect( - () => - springValue.on("change", (latest) => { - if (ref.current) { - ref.current.textContent = Intl.NumberFormat("en-US", { - minimumFractionDigits: decimalPlaces, - maximumFractionDigits: decimalPlaces, - }).format(Number(latest.toFixed(decimalPlaces))); - } - }), - [springValue, decimalPlaces], - ); + } else { + const controls = animate(motionValue, direction === "down" ? 0 : value, { + duration, + ease: "easeOut", + }); + return () => controls.stop(); + } + }, delay * 1000); + + return () => clearTimeout(timeoutId); + }, [isInView, value, direction, duration, delay, motionValue]); + + useEffect(() => { + const unsubscribe = (duration === undefined ? springValue : motionValue).on("change", updateDom); + return unsubscribe; + }, [duration, springValue, motionValue, updateDom]); + + // Initial update + useEffect(() => { + updateDom(motionValue.get()); + }, [updateDom, motionValue]); return (