From 0f81c462199a1720a30c3c89d57fd4200c9c92ca Mon Sep 17 00:00:00 2001 From: Arghya Das Date: Thu, 19 Dec 2024 14:48:13 +0530 Subject: [PATCH] fix: adding video src support for safari mockup component --- __registry__/index.tsx | 962 ++++++------------ content/docs/components/safari.mdx | 17 +- .../default/animated-subscribe-button.json | 2 +- public/r/styles/default/safari.json | 2 +- registry/default/example/safari-demo-2.tsx | 2 +- registry/default/example/safari-demo-3.tsx | 13 + registry/default/magicui/safari.tsx | 45 +- registry/registry-examples.ts | 5 + 8 files changed, 385 insertions(+), 663 deletions(-) create mode 100644 registry/default/example/safari-demo-3.tsx diff --git a/__registry__/index.tsx b/__registry__/index.tsx index 1f643b8cc..4cc1bdf77 100644 --- a/__registry__/index.tsx +++ b/__registry__/index.tsx @@ -1,1952 +1,1628 @@ // @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: [] }, "scroll-progress": { name: "scroll-progress", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/scroll-progress.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/scroll-progress.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/scroll-progress.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: [] }, "scratch-to-reveal": { name: "scratch-to-reveal", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/scratch-to-reveal.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/scratch-to-reveal.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/scratch-to-reveal.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: [] }, "ripple-button": { name: "ripple-button", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/ripple-button.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/ripple-button.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/ripple-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: [] }, "interactive-hover-button": { name: "interactive-hover-button", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/interactive-hover-button.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/interactive-hover-button.tsx"), - ), + component: React.lazy(() => import("@/registry/default/magicui/interactive-hover-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: [] }, "scroll-progress-demo": { name: "scroll-progress-demo", type: "registry:example", registryDependencies: ["scroll-progress"], files: ["registry/default/example/scroll-progress-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/scroll-progress-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/scroll-progress-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: [] }, "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: [] }, "scratch-to-reveal-demo": { name: "scratch-to-reveal-demo", type: "registry:example", registryDependencies: ["scratch-to-reveal"], files: ["registry/default/example/scratch-to-reveal-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/scratch-to-reveal-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/scratch-to-reveal-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: [] }, "ripple-button-demo": { name: "ripple-button-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/ripple-button-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/ripple-button-demo.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/ripple-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: [] + }, + "safari-demo-3": { + name: "safari-demo-3", + type: "registry:example", + registryDependencies: undefined, + files: ["registry/default/example/safari-demo-3.tsx"], + component: React.lazy(() => import("@/registry/default/example/safari-demo-3.tsx")), + source: "", + category: "undefined", + subcategory: "undefined", + 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: [] }, "iphone-15-pro-demo-3": { name: "iphone-15-pro-demo-3", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/iphone-15-pro-demo-3.tsx"], - component: React.lazy( - () => import("@/registry/default/example/iphone-15-pro-demo-3.tsx"), - ), + component: React.lazy(() => import("@/registry/default/example/iphone-15-pro-demo-3.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: [] }, "interactive-hover-button-demo": { name: "interactive-hover-button-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/interactive-hover-button-demo.tsx"], - component: React.lazy( - () => - import( - "@/registry/default/example/interactive-hover-button-demo.tsx" - ), - ), + component: React.lazy(() => import("@/registry/default/example/interactive-hover-button-demo.tsx")), source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, - utils: { + "utils": { name: "utils", type: "registry:lib", registryDependencies: undefined, @@ -1955,7 +1631,7 @@ export const Index: Record = { source: "", category: "undefined", subcategory: "undefined", - chunks: [], + chunks: [] }, }, -}; +} diff --git a/content/docs/components/safari.mdx b/content/docs/components/safari.mdx index ce744252d..85a304a07 100644 --- a/content/docs/components/safari.mdx +++ b/content/docs/components/safari.mdx @@ -46,13 +46,18 @@ npx shadcn@latest add "https://magicui.design/r/safari" +### With Video + + + ## Props -| Prop | Type | Description | Default | -| ------ | ------ | ----------------------------------------------------------- | ------- | -| url | string | The URL to display in the Safari address bar | - | -| src | string | The source URL of the image to display in the Safari window | - | -| width | number | The width of the Safari window | 1203 | -| height | number | The height of the Safari window | 753 | +| Prop | Type | Description | Default | +| -------- | ------ | ----------------------------------------------------------- | ------- | +| url | string | The URL to display in the Safari address bar | - | +| imageSrc | string | The source URL of the image to display in the Safari window | - | +| videoSrc | string | The source URL of the video to display in the Safari window | - | +| width | number | The width of the Safari window | 1203 | +| height | number | The height of the Safari window | 753 | The `Safari` component also accepts all properties of the `SVGElement` type. diff --git a/public/r/styles/default/animated-subscribe-button.json b/public/r/styles/default/animated-subscribe-button.json index f95dbad66..b9fd08ad8 100644 --- a/public/r/styles/default/animated-subscribe-button.json +++ b/public/r/styles/default/animated-subscribe-button.json @@ -7,7 +7,7 @@ "files": [ { "path": "magicui/animated-subscribe-button.tsx", - "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\n\ninterface AnimatedSubscribeButtonProps {\n buttonColor: string;\n buttonTextColor?: string;\n subscribeStatus: boolean;\n initialText: React.ReactElement | string;\n changeText: React.ReactElement | string;\n}\n\nexport const AnimatedSubscribeButton: React.FC<\n AnimatedSubscribeButtonProps\n> = ({\n buttonColor,\n subscribeStatus,\n buttonTextColor,\n changeText,\n initialText,\n}) => {\n const [isSubscribed, setIsSubscribed] = useState(subscribeStatus);\n\n return (\n \n {isSubscribed ? (\n setIsSubscribed(false)}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n >\n \n {changeText}\n \n \n ) : (\n setIsSubscribed(true)}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n >\n \n {initialText}\n \n \n )}\n \n );\n};\n", + "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\n\ninterface AnimatedSubscribeButtonProps {\n buttonColor: string;\n buttonTextColor?: string;\n subscribeStatus: boolean;\n initialText: React.ReactElement | string;\n changeText: React.ReactElement | string;\n}\n\nexport const AnimatedSubscribeButton: React.FC<\n AnimatedSubscribeButtonProps\n> = ({\n buttonColor,\n subscribeStatus,\n buttonTextColor,\n changeText,\n initialText,\n}) => {\n const [isSubscribed, setIsSubscribed] = useState(subscribeStatus);\n\n return (\n \n {isSubscribed ? (\n setIsSubscribed(false)}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n >\n \n {changeText}\n \n \n ) : (\n setIsSubscribed(true)}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n >\n \n {initialText}\n \n \n )}\n \n );\n};\n", "type": "registry:ui", "target": "" } diff --git a/public/r/styles/default/safari.json b/public/r/styles/default/safari.json index e886a9526..32854bd79 100644 --- a/public/r/styles/default/safari.json +++ b/public/r/styles/default/safari.json @@ -4,7 +4,7 @@ "files": [ { "path": "magicui/safari.tsx", - "content": "import { SVGProps } from \"react\";\n\nexport interface SafariProps extends SVGProps {\n url?: string;\n src?: string;\n width?: number;\n height?: number;\n}\n\nexport default function Safari({\n src,\n url,\n width = 1203,\n height = 753,\n ...props\n}: SafariProps) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {url}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n", + "content": "import { SVGProps } from \"react\";\n\nexport interface SafariProps extends SVGProps {\n url?: string;\n imageSrc?: string;\n videoSrc?: string;\n width?: number;\n height?: number;\n}\n\nexport default function Safari({\n imageSrc,\n videoSrc,\n url,\n width = 1203,\n height = 753,\n ...props\n}: SafariProps) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {url}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {imageSrc && (\n \n )}\n {videoSrc && (\n \n \n \n )}\n \n \n \n \n \n \n \n \n \n \n );\n}\n", "type": "registry:ui", "target": "" } diff --git a/registry/default/example/safari-demo-2.tsx b/registry/default/example/safari-demo-2.tsx index be89e757a..d024c32d7 100644 --- a/registry/default/example/safari-demo-2.tsx +++ b/registry/default/example/safari-demo-2.tsx @@ -6,7 +6,7 @@ export default function SafariDemo() { ); diff --git a/registry/default/example/safari-demo-3.tsx b/registry/default/example/safari-demo-3.tsx new file mode 100644 index 000000000..297d8be97 --- /dev/null +++ b/registry/default/example/safari-demo-3.tsx @@ -0,0 +1,13 @@ +import Safari from "@/registry/default/magicui/safari"; + +export default function SafariDemo() { + return ( +
+ +
+ ); +} diff --git a/registry/default/magicui/safari.tsx b/registry/default/magicui/safari.tsx index 0d17e936b..346dbbce4 100644 --- a/registry/default/magicui/safari.tsx +++ b/registry/default/magicui/safari.tsx @@ -2,13 +2,15 @@ import { SVGProps } from "react"; export interface SafariProps extends SVGProps { url?: string; - src?: string; + imageSrc?: string; + videoSrc?: string; width?: number; height?: number; } export default function Safari({ - src, + imageSrc, + videoSrc, url, width = 1203, height = 753, @@ -127,15 +129,36 @@ export default function Safari({ fill="#A3A3A3" /> - + {imageSrc && ( + + )} + {videoSrc && ( + + + )} diff --git a/registry/registry-examples.ts b/registry/registry-examples.ts index ae7a20988..f4f932bf6 100644 --- a/registry/registry-examples.ts +++ b/registry/registry-examples.ts @@ -479,6 +479,11 @@ export const examples: Registry = [ type: "registry:example", files: ["example/safari-demo-2.tsx"], }, + { + name: "safari-demo-3", + type: "registry:example", + files: ["example/safari-demo-3.tsx"], + }, { name: "iphone-15-pro-demo", type: "registry:example",