diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 2c00f8833..a866dadbe 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -54,7 +54,7 @@ To add a new component to MagicUI, you will need to modify several files. Follow ### 1. Create Component -Create the main component in `registry/default/magicui/example-component.tsx` +Create the main component in `registry/magicui/example-component.tsx` ```typescript import React from 'react' @@ -70,10 +70,10 @@ export default function ExampleComponent() { ### 2. Create Component Demo -Provide a basic example to showcase your component in `registry/default/example/example-component-demo.tsx` +Provide a basic example to showcase your component in `registry/example/example-component-demo.tsx` ```typescript -import ExampleComponent from '@/registry/default/magicui/example-component' +import ExampleComponent from '@/registry/magicui/example-component' export default function ExampleComponentDemo() { return ( @@ -160,8 +160,10 @@ export const ui: Registry = [ // ... existing components ... { name: "example-component", + description: "A component that does something", type: "registry:ui", - files: ["magicui/example-component.tsx"], + dependencies: ["motion"], + files: [{ path: "magicui/example-component.tsx", type: "registry:ui" }], // Add any dependencies or tailwind configurations if needed }, ]; @@ -174,9 +176,15 @@ export const examples: Registry = [ // ... existing examples ... { name: "example-component-demo", + description: "An example of the example-component", type: "registry:example", registryDependencies: ["example-component"], - files: ["example/example-component-demo.tsx"], + files: [ + { + path: "registry/example/example-component-demo.tsx", + type: "registry:example", + }, + ], }, ]; ``` diff --git a/__registry__/index.tsx b/__registry__/index.tsx index 0bdcc223d..85d52c875 100644 --- a/__registry__/index.tsx +++ b/__registry__/index.tsx @@ -1,2201 +1,3864 @@ +/* eslint-disable @typescript-eslint/ban-ts-comment */ +/* eslint-disable @typescript-eslint/no-explicit-any */ // @ts-nocheck // This file is autogenerated by scripts/build-registry.ts // Do not edit this file directly. import * as React from "react"; export const Index: Record = { - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - android: { - name: "android", - type: "registry:ui", - registryDependencies: undefined, - files: ["registry/default/magicui/android.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/android.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "warp-background": { - name: "warp-background", - type: "registry:ui", - registryDependencies: undefined, - files: ["registry/default/magicui/warp-background.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/warp-background.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "line-shadow-text": { - name: "line-shadow-text", - type: "registry:ui", - registryDependencies: undefined, - files: ["registry/default/magicui/line-shadow-text.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/line-shadow-text.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - terminal: { - name: "terminal", - type: "registry:ui", - registryDependencies: undefined, - files: ["registry/default/magicui/terminal.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/terminal.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "aurora-text": { - name: "aurora-text", - type: "registry:ui", - registryDependencies: undefined, - files: ["registry/default/magicui/aurora-text.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/aurora-text.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "morphing-text": { - name: "morphing-text", - type: "registry:ui", - registryDependencies: undefined, - files: ["registry/default/magicui/morphing-text.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/morphing-text.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - meteors: { - name: "meteors", - type: "registry:ui", - registryDependencies: undefined, - files: ["registry/default/magicui/meteors.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/meteors.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "interactive-grid-pattern": { - name: "interactive-grid-pattern", - type: "registry:ui", - registryDependencies: undefined, - files: ["registry/default/magicui/interactive-grid-pattern.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/interactive-grid-pattern.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "script-copy-btn": { - name: "script-copy-btn", - type: "registry:ui", - registryDependencies: ["button"], - files: ["registry/default/magicui/script-copy-btn.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/script-copy-btn.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - marquee: { - name: "marquee", - type: "registry:ui", - registryDependencies: undefined, - files: ["registry/default/magicui/marquee.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/marquee.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - globe: { - name: "globe", - type: "registry:ui", - registryDependencies: undefined, - files: ["registry/default/magicui/globe.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/globe.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "bento-grid": { - name: "bento-grid", - type: "registry:ui", - registryDependencies: ["button"], - files: ["registry/default/magicui/bento-grid.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/bento-grid.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - particles: { - name: "particles", - type: "registry:ui", - registryDependencies: undefined, - files: ["registry/default/magicui/particles.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/particles.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - ripple: { - name: "ripple", - type: "registry:ui", - registryDependencies: undefined, - files: ["registry/default/magicui/ripple.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/ripple.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - dock: { - name: "dock", - type: "registry:ui", - registryDependencies: undefined, - files: ["registry/default/magicui/dock.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/dock.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "text-animate": { - name: "text-animate", - type: "registry:ui", - registryDependencies: undefined, - files: ["registry/default/magicui/text-animate.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/text-animate.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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" - ), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - confetti: { - name: "confetti", - type: "registry:ui", - registryDependencies: ["button"], - files: ["registry/default/magicui/confetti.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/confetti.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - safari: { - name: "safari", - type: "registry:ui", - registryDependencies: undefined, - files: ["registry/default/magicui/safari.tsx"], - component: React.lazy( - () => import("@/registry/default/magicui/safari.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "android-demo": { - name: "android-demo", - type: "registry:example", - registryDependencies: ["android"], - files: ["registry/default/example/android-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/android-demo.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "android-demo-2": { - name: "android-demo-2", - type: "registry:example", - registryDependencies: ["android"], - files: ["registry/default/example/android-demo-2.tsx"], - component: React.lazy( - () => import("@/registry/default/example/android-demo-2.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "android-demo-3": { - name: "android-demo-3", - type: "registry:example", - registryDependencies: ["android"], - files: ["registry/default/example/android-demo-3.tsx"], - component: React.lazy( - () => import("@/registry/default/example/android-demo-3.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "warp-background-demo": { - name: "warp-background-demo", - type: "registry:example", - registryDependencies: ["warp-background"], - files: ["registry/default/example/warp-background-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/warp-background-demo.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "line-shadow-text-demo": { - name: "line-shadow-text-demo", - type: "registry:example", - registryDependencies: ["line-shadow-text"], - files: ["registry/default/example/line-shadow-text-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/line-shadow-text-demo.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "aurora-text-demo": { - name: "aurora-text-demo", - type: "registry:example", - registryDependencies: ["aurora-text"], - files: ["registry/default/example/aurora-text-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/aurora-text-demo.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "terminal-demo": { - name: "terminal-demo", - type: "registry:example", - registryDependencies: ["terminal"], - files: ["registry/default/example/terminal-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/terminal-demo.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "morphing-text-demo": { - name: "morphing-text-demo", - type: "registry:example", - registryDependencies: ["morphing-text"], - files: ["registry/default/example/morphing-text-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/morphing-text-demo.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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" - ), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "script-copy-btn-demo": { - name: "script-copy-btn-demo", - type: "registry:example", - registryDependencies: undefined, - files: ["registry/default/example/script-copy-btn-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/script-copy-btn-demo.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "bento-demo": { - name: "bento-demo", - type: "registry:example", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "interactive-grid-pattern-demo": { - name: "interactive-grid-pattern-demo", - type: "registry:example", - registryDependencies: ["interactive-grid-pattern"], - files: ["registry/default/example/interactive-grid-pattern-demo.tsx"], - component: React.lazy( - () => - import( - "@/registry/default/example/interactive-grid-pattern-demo.tsx" - ), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "interactive-grid-pattern-demo-2": { - name: "interactive-grid-pattern-demo-2", - type: "registry:example", - registryDependencies: ["interactive-grid-pattern"], - files: ["registry/default/example/interactive-grid-pattern-demo-2.tsx"], - component: React.lazy( - () => - import( - "@/registry/default/example/interactive-grid-pattern-demo-2.tsx" - ), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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" - ), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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" - ), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "icon-cloud-demo-2": { - name: "icon-cloud-demo-2", - type: "registry:example", - registryDependencies: ["icon-cloud"], - files: ["registry/default/example/icon-cloud-demo-2.tsx"], - component: React.lazy( - () => import("@/registry/default/example/icon-cloud-demo-2.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "icon-cloud-demo-3": { - name: "icon-cloud-demo-3", - type: "registry:example", - registryDependencies: ["icon-cloud"], - files: ["registry/default/example/icon-cloud-demo-3.tsx"], - component: React.lazy( - () => import("@/registry/default/example/icon-cloud-demo-3.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "text-animate-demo": { - name: "text-animate-demo", - type: "registry:example", - registryDependencies: undefined, - files: ["registry/default/example/text-animate-demo.tsx"], - component: React.lazy( - () => import("@/registry/default/example/text-animate-demo.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "text-animate-demo-2": { - name: "text-animate-demo-2", - type: "registry:example", - registryDependencies: undefined, - files: ["registry/default/example/text-animate-demo-2.tsx"], - component: React.lazy( - () => import("@/registry/default/example/text-animate-demo-2.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "text-animate-demo-3": { - name: "text-animate-demo-3", - type: "registry:example", - registryDependencies: undefined, - files: ["registry/default/example/text-animate-demo-3.tsx"], - component: React.lazy( - () => import("@/registry/default/example/text-animate-demo-3.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "text-animate-demo-4": { - name: "text-animate-demo-4", - type: "registry:example", - registryDependencies: undefined, - files: ["registry/default/example/text-animate-demo-4.tsx"], - component: React.lazy( - () => import("@/registry/default/example/text-animate-demo-4.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "text-animate-demo-5": { - name: "text-animate-demo-5", - type: "registry:example", - registryDependencies: undefined, - files: ["registry/default/example/text-animate-demo-5.tsx"], - component: React.lazy( - () => import("@/registry/default/example/text-animate-demo-5.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - "text-animate-demo-6": { - name: "text-animate-demo-6", - type: "registry:example", - registryDependencies: undefined, - files: ["registry/default/example/text-animate-demo-6.tsx"], - component: React.lazy( - () => import("@/registry/default/example/text-animate-demo-6.tsx"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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" - ), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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" - ), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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: [], - }, - "safari-demo-4": { - name: "safari-demo-4", - type: "registry:example", - registryDependencies: undefined, - files: ["registry/default/example/safari-demo-4.tsx"], - component: React.lazy( - () => import("@/registry/default/example/safari-demo-4.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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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"), - ), - source: "", - category: "undefined", - subcategory: "undefined", - 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" - ), - ), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, - utils: { - name: "utils", - type: "registry:lib", - registryDependencies: undefined, - files: ["registry/default/lib/utils.ts"], - component: React.lazy(() => import("@/registry/default/lib/utils.ts")), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [], - }, + index: { + name: "index", + description: "", + type: "registry:style", + registryDependencies: ["utils"], + files: [], + component: null, + meta: undefined, + }, + "magic-card": { + name: "magic-card", + description: + "A spotlight effect that follows your mouse cursor and highlights borders on hover.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/magic-card.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/magic-card.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + android: { + name: "android", + description: "A mockup of an Android device.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/android.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/android.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "warp-background": { + name: "warp-background", + description: "A card with a time warping background effect.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/warp-background.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/warp-background.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "line-shadow-text": { + name: "line-shadow-text", + description: "A text component with a moving line shadow.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/line-shadow-text.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/line-shadow-text.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "aurora-text": { + name: "aurora-text", + description: "A beautiful aurora text effect", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/aurora-text.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/aurora-text.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "morphing-text": { + name: "morphing-text", + description: "A dynamic text morphing component for Magic UI.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/morphing-text.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/morphing-text.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "scroll-progress": { + name: "scroll-progress", + description: "Animated Scroll Progress for your pages", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/scroll-progress.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/scroll-progress.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "neon-gradient-card": { + name: "neon-gradient-card", + description: "A beautiful neon card effect", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/neon-gradient-card.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/neon-gradient-card.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + meteors: { + name: "meteors", + description: "A meteor shower effect.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/meteors.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/meteors.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "grid-pattern": { + name: "grid-pattern", + description: + "A background grid pattern made with SVGs, fully customizable using Tailwind CSS.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/grid-pattern.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/grid-pattern.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "interactive-grid-pattern": { + name: "interactive-grid-pattern", + description: + "A interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/interactive-grid-pattern.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import( + "@/registry/magicui/interactive-grid-pattern.tsx" + ); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "dot-pattern": { + name: "dot-pattern", + description: + "A background dot pattern made with SVGs, fully customizable using Tailwind CSS.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/dot-pattern.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/dot-pattern.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "flickering-grid": { + name: "flickering-grid", + description: + "A flickering grid background made with SVGs, fully customizable using Tailwind CSS.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/flickering-grid.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/flickering-grid.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "hero-video-dialog": { + name: "hero-video-dialog", + description: "A hero video dialog component.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/hero-video-dialog.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/hero-video-dialog.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "code-comparison": { + name: "code-comparison", + description: "A component which compares two code snippets.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/code-comparison.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/code-comparison.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "script-copy-btn": { + name: "script-copy-btn", + description: "Copy code to clipboard", + type: "registry:ui", + registryDependencies: ["button"], + files: [ + { + path: "registry/magicui/script-copy-btn.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/script-copy-btn.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + marquee: { + name: "marquee", + description: + "An infinite scrolling component that can be used to display text, images, or videos.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/marquee.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/marquee.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + globe: { + name: "globe", + description: + "An autorotating, interactive, and highly performant globe made using WebGL.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/globe.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/globe.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "shimmer-button": { + name: "shimmer-button", + description: + "A button with a shimmering light which travels around the perimeter.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/shimmer-button.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/shimmer-button.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "tweet-card": { + name: "tweet-card", + description: + "A card that displays a tweet with the author's name, handle, and profile picture.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/tweet-card.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/tweet-card.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "client-tweet-card": { + name: "client-tweet-card", + description: + "A client-side version of the tweet card that displays a tweet with the author's name, handle, and profile picture.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/client-tweet-card.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/client-tweet-card.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "bento-grid": { + name: "bento-grid", + description: + "Bento grid is a layout used to showcase the features of a product in a simple and elegant way.", + type: "registry:ui", + registryDependencies: ["button"], + files: [ + { + path: "registry/magicui/bento-grid.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/bento-grid.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + particles: { + name: "particles", + description: + "Particles are a fun way to add some visual flair to your website. They can be used to create a sense of depth, movement, and interactivity.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/particles.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/particles.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "number-ticker": { + name: "number-ticker", + description: "Animate numbers to count up or down to a target number", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/number-ticker.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/number-ticker.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + ripple: { + name: "ripple", + description: + "An animated ripple effect typically used behind elements to emphasize them.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/ripple.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/ripple.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "retro-grid": { + name: "retro-grid", + description: "An animated scrolling retro grid effect", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/retro-grid.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/retro-grid.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "animated-list": { + name: "animated-list", + description: + "A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/animated-list.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/animated-list.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "animated-shiny-text": { + name: "animated-shiny-text", + description: + "A light glare effect which pans across text making it appear as if it is shimmering.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/animated-shiny-text.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/animated-shiny-text.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "animated-grid-pattern": { + name: "animated-grid-pattern", + description: + "A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/animated-grid-pattern.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/animated-grid-pattern.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "border-beam": { + name: "border-beam", + description: + "An animated beam of light which travels along the border of its container.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/border-beam.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/border-beam.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "animated-beam": { + name: "animated-beam", + description: + 'An animated beam of light which travels along a path. Useful for showcasing the "integration" features of a website.', + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/animated-beam.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/animated-beam.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "text-reveal": { + name: "text-reveal", + description: "Fade in text as you scroll down the page.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/text-reveal.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/text-reveal.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "hyper-text": { + name: "hyper-text", + description: + "A text animation that scrambles letters before revealing the final text.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/hyper-text.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/hyper-text.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "animated-gradient-text": { + name: "animated-gradient-text", + description: + "An animated gradient background which transitions between colors for text.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/animated-gradient-text.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/animated-gradient-text.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "orbiting-circles": { + name: "orbiting-circles", + description: + "A collection of circles which move in orbit along a circular path", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/orbiting-circles.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/orbiting-circles.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + dock: { + name: "dock", + description: + "An implementation of the MacOS dock using react + tailwindcss + framer motion", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/dock.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/dock.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "word-rotate": { + name: "word-rotate", + description: "A vertical rotation of words", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/word-rotate.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/word-rotate.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "avatar-circles": { + name: "avatar-circles", + description: "Overlapping circles of avatars.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/avatar-circles.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/avatar-circles.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "typing-animation": { + name: "typing-animation", + description: "Characters appearing in typed animation", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/typing-animation.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/typing-animation.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "sparkles-text": { + name: "sparkles-text", + description: + "A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/sparkles-text.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/sparkles-text.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "flip-text": { + name: "flip-text", + description: "Text flipping character animation", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/flip-text.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/flip-text.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "icon-cloud": { + name: "icon-cloud", + description: "An interactive 3D tag cloud component", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/icon-cloud.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/icon-cloud.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "text-animate": { + name: "text-animate", + description: + "A text animation component that animates text using a variety of different animations.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/text-animate.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/text-animate.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "scroll-based-velocity": { + name: "scroll-based-velocity", + description: "Scrolling text whose speed changes based on scroll speed", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/scroll-based-velocity.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/scroll-based-velocity.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "scratch-to-reveal": { + name: "scratch-to-reveal", + description: + "The ScratchToReveal component creates an interactive scratch-off effect with customizable dimensions and animations, revealing hidden content beneath.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/scratch-to-reveal.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/scratch-to-reveal.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "shiny-button": { + name: "shiny-button", + description: + "A shiny button component with dynamic styles in the dark mode or light mode.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/shiny-button.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/shiny-button.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "box-reveal": { + name: "box-reveal", + description: "Sliding box animation that reveals text behind it.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/box-reveal.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/box-reveal.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "shine-border": { + name: "shine-border", + description: "Shine border is an animated background border effect.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/shine-border.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/shine-border.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "animated-circular-progress-bar": { + name: "animated-circular-progress-bar", + description: + "Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/animated-circular-progress-bar.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import( + "@/registry/magicui/animated-circular-progress-bar.tsx" + ); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + confetti: { + name: "confetti", + description: + "Confetti animations are best used to delight your users when something special happens", + type: "registry:ui", + registryDependencies: ["button"], + files: [ + { + path: "registry/magicui/confetti.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/confetti.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "animated-subscribe-button": { + name: "animated-subscribe-button", + description: + "An animated subscribe button useful for showing a micro animation from intial to final result.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/animated-subscribe-button.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import( + "@/registry/magicui/animated-subscribe-button.tsx" + ); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "cool-mode": { + name: "cool-mode", + description: "Cool mode effect for buttons, links, and other DOMs", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/cool-mode.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/cool-mode.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "pulsating-button": { + name: "pulsating-button", + description: + "An animated pulsating button useful for capturing attention of users.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/pulsating-button.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/pulsating-button.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "ripple-button": { + name: "ripple-button", + description: "An animated button with ripple useful for user engagement.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/ripple-button.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/ripple-button.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "file-tree": { + name: "file-tree", + description: + "A component used to showcase the folder and file structure of a directory.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/file-tree.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/file-tree.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "blur-fade": { + name: "blur-fade", + description: + "Blur fade in and out animation. Used to smoothly fade in and out content.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/blur-fade.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/blur-fade.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + safari: { + name: "safari", + description: "A safari browser mockup to showcase your website.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/safari.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/safari.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "iphone-15-pro": { + name: "iphone-15-pro", + description: "A mockup of the iPhone 15 Pro", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/iphone-15-pro.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/iphone-15-pro.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "rainbow-button": { + name: "rainbow-button", + description: "An animated button with a rainbow effect.", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/rainbow-button.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/magicui/rainbow-button.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "interactive-hover-button": { + name: "interactive-hover-button", + description: "", + type: "registry:ui", + registryDependencies: undefined, + files: [ + { + path: "registry/magicui/interactive-hover-button.tsx", + type: "registry:ui", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import( + "@/registry/magicui/interactive-hover-button.tsx" + ); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "magic-card-demo": { + name: "magic-card-demo", + description: + "Example showing a spotlight effect that follows your mouse cursor and highlights borders on hover.", + type: "registry:example", + registryDependencies: ["magic-card"], + files: [ + { + path: "registry/example/magic-card-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/magic-card-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "android-demo": { + name: "android-demo", + description: "Example showing a mockup of an Android device.", + type: "registry:example", + registryDependencies: ["android"], + files: [ + { + path: "registry/example/android-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/android-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "android-demo-2": { + name: "android-demo-2", + description: "Second example showing a mockup of an Android device.", + type: "registry:example", + registryDependencies: ["android"], + files: [ + { + path: "registry/example/android-demo-2.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/android-demo-2.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "android-demo-3": { + name: "android-demo-3", + description: "Third example showing a mockup of an Android device.", + type: "registry:example", + registryDependencies: ["android"], + files: [ + { + path: "registry/example/android-demo-3.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/android-demo-3.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "warp-background-demo": { + name: "warp-background-demo", + description: + "Example showing a card with a time warping background effect.", + type: "registry:example", + registryDependencies: ["warp-background"], + files: [ + { + path: "registry/example/warp-background-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/warp-background-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "line-shadow-text-demo": { + name: "line-shadow-text-demo", + description: "Example showing a text component with a moving line shadow.", + type: "registry:example", + registryDependencies: ["line-shadow-text"], + files: [ + { + path: "registry/example/line-shadow-text-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/line-shadow-text-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "aurora-text-demo": { + name: "aurora-text-demo", + description: "Example showing a beautiful aurora text effect.", + type: "registry:example", + registryDependencies: ["aurora-text"], + files: [ + { + path: "registry/example/aurora-text-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/aurora-text-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "morphing-text-demo": { + name: "morphing-text-demo", + description: "Example showing a dynamic text morphing component.", + type: "registry:example", + registryDependencies: ["morphing-text"], + files: [ + { + path: "registry/example/morphing-text-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/morphing-text-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "scroll-progress-demo": { + name: "scroll-progress-demo", + description: "Example showing animated scroll progress for your pages.", + type: "registry:example", + registryDependencies: ["scroll-progress"], + files: [ + { + path: "registry/example/scroll-progress-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/scroll-progress-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "neon-gradient-card-demo": { + name: "neon-gradient-card-demo", + description: "Example showing a beautiful neon card effect.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/neon-gradient-card-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import( + "@/registry/example/neon-gradient-card-demo.tsx" + ); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "meteors-demo": { + name: "meteors-demo", + description: "Example showing a meteor shower effect.", + type: "registry:example", + registryDependencies: ["meteors"], + files: [ + { + path: "registry/example/meteors-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/meteors-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "grid-pattern-demo": { + name: "grid-pattern-demo", + description: "Example showing a background grid pattern made with SVGs.", + type: "registry:example", + registryDependencies: ["grid-pattern"], + files: [ + { + path: "registry/example/grid-pattern-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/grid-pattern-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "grid-pattern-linear-gradient": { + name: "grid-pattern-linear-gradient", + description: "Example showing a grid pattern with linear gradient effects.", + type: "registry:example", + registryDependencies: ["grid-pattern"], + files: [ + { + path: "registry/example/grid-pattern-linear-gradient.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import( + "@/registry/example/grid-pattern-linear-gradient.tsx" + ); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "grid-pattern-dashed": { + name: "grid-pattern-dashed", + description: "Example showing a dashed grid pattern.", + type: "registry:example", + registryDependencies: ["grid-pattern"], + files: [ + { + path: "registry/example/grid-pattern-dashed.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/grid-pattern-dashed.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "dot-pattern-demo": { + name: "dot-pattern-demo", + description: "Example showing a background dot pattern made with SVGs.", + type: "registry:example", + registryDependencies: ["dot-pattern"], + files: [ + { + path: "registry/example/dot-pattern-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/dot-pattern-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "dot-pattern-linear-gradient": { + name: "dot-pattern-linear-gradient", + description: "Example showing a dot pattern with linear gradient effects.", + type: "registry:example", + registryDependencies: ["dot-pattern"], + files: [ + { + path: "registry/example/dot-pattern-linear-gradient.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import( + "@/registry/example/dot-pattern-linear-gradient.tsx" + ); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "flickering-grid-demo": { + name: "flickering-grid-demo", + description: "Example showing a flickering grid background.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/flickering-grid-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/flickering-grid-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "flickering-grid-rounded-demo": { + name: "flickering-grid-rounded-demo", + description: + "Example showing a flickering grid background with rounded corners.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/flickering-grid-rounded-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import( + "@/registry/example/flickering-grid-rounded-demo.tsx" + ); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "hero-video-dialog-demo": { + name: "hero-video-dialog-demo", + description: "Example showing a hero video dialog component.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/hero-video-dialog-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/hero-video-dialog-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "hero-video-dialog-demo-top-in-bottom-out": { + name: "hero-video-dialog-demo-top-in-bottom-out", + description: + "Example showing a hero video dialog with top-in bottom-out animation.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/hero-video-dialog-demo-top-in-bottom-out.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import( + "@/registry/example/hero-video-dialog-demo-top-in-bottom-out.tsx" + ); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "code-comparison-demo": { + name: "code-comparison-demo", + description: + "Example showing a component which compares two code snippets.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/code-comparison-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/code-comparison-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "script-copy-btn-demo": { + name: "script-copy-btn-demo", + description: "Example showing how to copy code to clipboard.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/script-copy-btn-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/script-copy-btn-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "marquee-demo": { + name: "marquee-demo", + description: "Example showing an infinite scrolling component.", + type: "registry:example", + registryDependencies: ["marquee"], + files: [ + { + path: "registry/example/marquee-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/marquee-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "marquee-demo-vertical": { + name: "marquee-demo-vertical", + description: "Example showing a vertical infinite scrolling component.", + type: "registry:example", + registryDependencies: ["marquee"], + files: [ + { + path: "registry/example/marquee-demo-vertical.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/marquee-demo-vertical.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "marquee-logos": { + name: "marquee-logos", + description: "Example showing an infinite scrolling logo carousel.", + type: "registry:example", + registryDependencies: ["marquee"], + files: [ + { + path: "registry/example/marquee-logos.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/marquee-logos.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "marquee-3d": { + name: "marquee-3d", + description: "Example showing a 3D infinite scrolling component.", + type: "registry:example", + registryDependencies: ["marquee"], + files: [ + { + path: "registry/example/marquee-3d.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/marquee-3d.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "globe-demo": { + name: "globe-demo", + description: "Example showing an autorotating, interactive WebGL globe.", + type: "registry:example", + registryDependencies: ["globe"], + files: [ + { + path: "registry/example/globe-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/globe-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "tweet-card-demo": { + name: "tweet-card-demo", + description: "Example showing a tweet card with author info.", + type: "registry:example", + registryDependencies: ["tweet-card"], + files: [ + { + path: "registry/example/tweet-card-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/tweet-card-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "tweet-card-images": { + name: "tweet-card-images", + description: "Example showing a tweet card with images.", + type: "registry:example", + registryDependencies: ["tweet-card"], + files: [ + { + path: "registry/example/tweet-card-images.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/tweet-card-images.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "tweet-card-meta-preview": { + name: "tweet-card-meta-preview", + description: "Example showing a tweet card with meta preview.", + type: "registry:example", + registryDependencies: ["tweet-card"], + files: [ + { + path: "registry/example/tweet-card-meta-preview.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import( + "@/registry/example/tweet-card-meta-preview.tsx" + ); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "shimmer-button-demo": { + name: "shimmer-button-demo", + description: "Example showing a button with a shimmering light effect.", + type: "registry:example", + registryDependencies: ["shimmer-button"], + files: [ + { + path: "registry/example/shimmer-button-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/shimmer-button-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "bento-demo": { + name: "bento-demo", + description: "Example showing a bento grid layout for showcasing features.", + type: "registry:example", + registryDependencies: [ + "bento-grid", + "marquee", + "animated-list-demo", + "animated-beam-multiple-outputs", + "shadcn:command", + "shadcn:calendar", + ], + files: [ + { + path: "registry/example/bento-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/bento-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "bento-demo-vertical": { + name: "bento-demo-vertical", + description: "Example showing a vertical bento grid layout.", + type: "registry:example", + registryDependencies: ["bento-grid"], + files: [ + { + path: "registry/example/bento-demo-vertical.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/bento-demo-vertical.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "number-ticker-demo": { + name: "number-ticker-demo", + description: "Example showing animated counting numbers.", + type: "registry:example", + registryDependencies: ["number-ticker"], + files: [ + { + path: "registry/example/number-ticker-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/number-ticker-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "number-ticker-decimal-demo": { + name: "number-ticker-decimal-demo", + description: "Example showing animated counting decimal numbers.", + type: "registry:example", + registryDependencies: ["number-ticker"], + files: [ + { + path: "registry/example/number-ticker-decimal-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import( + "@/registry/example/number-ticker-decimal-demo.tsx" + ); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "ripple-demo": { + name: "ripple-demo", + description: "Example showing an animated ripple effect.", + type: "registry:example", + registryDependencies: ["ripple"], + files: [ + { + path: "registry/example/ripple-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/ripple-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "retro-grid-demo": { + name: "retro-grid-demo", + description: "Example showing an animated scrolling retro grid effect.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/retro-grid-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/retro-grid-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "animated-list-demo": { + name: "animated-list-demo", + description: "Example showing a list with sequenced item animations.", + type: "registry:example", + registryDependencies: ["animated-list"], + files: [ + { + path: "registry/example/animated-list-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/animated-list-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "animated-shiny-text-demo": { + name: "animated-shiny-text-demo", + description: "Example showing text with a shimmering light effect.", + type: "registry:example", + registryDependencies: ["animated-shiny-text"], + files: [ + { + path: "registry/example/animated-shiny-text-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import( + "@/registry/example/animated-shiny-text-demo.tsx" + ); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "particles-demo": { + name: "particles-demo", + description: "Example showing interactive particle effects.", + type: "registry:example", + registryDependencies: ["particles"], + files: [ + { + path: "registry/example/particles-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/particles-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "animated-grid-pattern-demo": { + name: "animated-grid-pattern-demo", + description: "Example showing an animated grid pattern background.", + type: "registry:example", + registryDependencies: ["animated-grid-pattern"], + files: [ + { + path: "registry/example/animated-grid-pattern-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import( + "@/registry/example/animated-grid-pattern-demo.tsx" + ); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "interactive-grid-pattern-demo": { + name: "interactive-grid-pattern-demo", + description: "Example showing an interactive grid pattern background.", + type: "registry:example", + registryDependencies: ["interactive-grid-pattern"], + files: [ + { + path: "registry/example/interactive-grid-pattern-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import( + "@/registry/example/interactive-grid-pattern-demo.tsx" + ); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "interactive-grid-pattern-demo-2": { + name: "interactive-grid-pattern-demo-2", + description: + "Second example showing an interactive grid pattern background.", + type: "registry:example", + registryDependencies: ["interactive-grid-pattern"], + files: [ + { + path: "registry/example/interactive-grid-pattern-demo-2.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import( + "@/registry/example/interactive-grid-pattern-demo-2.tsx" + ); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "border-beam-demo": { + name: "border-beam-demo", + description: "Example showing an animated border beam effect.", + type: "registry:example", + registryDependencies: ["border-beam"], + files: [ + { + path: "registry/example/border-beam-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/border-beam-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "animated-beam-demo": { + name: "animated-beam-demo", + description: "Example showing an animated beam of light effect.", + type: "registry:example", + registryDependencies: ["animated-beam"], + files: [ + { + path: "registry/example/animated-beam-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/animated-beam-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "animated-beam-unidirectional": { + name: "animated-beam-unidirectional", + description: "Example showing a unidirectional animated beam effect.", + type: "registry:example", + registryDependencies: ["animated-beam"], + files: [ + { + path: "registry/example/animated-beam-unidirectional.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import( + "@/registry/example/animated-beam-unidirectional.tsx" + ); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "animated-beam-bidirectional": { + name: "animated-beam-bidirectional", + description: "Example showing a bidirectional animated beam effect.", + type: "registry:example", + registryDependencies: ["animated-beam"], + files: [ + { + path: "registry/example/animated-beam-bidirectional.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import( + "@/registry/example/animated-beam-bidirectional.tsx" + ); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "animated-beam-multiple-inputs": { + name: "animated-beam-multiple-inputs", + description: "Example showing animated beams with multiple input points.", + type: "registry:example", + registryDependencies: ["animated-beam"], + files: [ + { + path: "registry/example/animated-beam-multiple-inputs.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import( + "@/registry/example/animated-beam-multiple-inputs.tsx" + ); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "animated-beam-multiple-outputs": { + name: "animated-beam-multiple-outputs", + description: "Example showing animated beams with multiple output points.", + type: "registry:example", + registryDependencies: ["animated-beam"], + files: [ + { + path: "registry/example/animated-beam-multiple-outputs.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import( + "@/registry/example/animated-beam-multiple-outputs.tsx" + ); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "text-reveal-demo": { + name: "text-reveal-demo", + description: "Example showing text that fades in on scroll.", + type: "registry:example", + registryDependencies: ["text-reveal"], + files: [ + { + path: "registry/example/text-reveal-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/text-reveal-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "animated-gradient-text-demo": { + name: "animated-gradient-text-demo", + description: "Example showing text with animated gradient backgrounds.", + type: "registry:example", + registryDependencies: ["animated-gradient-text"], + files: [ + { + path: "registry/example/animated-gradient-text-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import( + "@/registry/example/animated-gradient-text-demo.tsx" + ); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "orbiting-circles-demo": { + name: "orbiting-circles-demo", + description: "Example showing circles moving in orbital paths.", + type: "registry:example", + registryDependencies: ["orbiting-circles"], + files: [ + { + path: "registry/example/orbiting-circles-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/orbiting-circles-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "dock-demo": { + name: "dock-demo", + description: "Example showing a MacOS-style dock implementation.", + type: "registry:example", + registryDependencies: ["dock"], + files: [ + { + path: "registry/example/dock-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/dock-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "dock-demo-2": { + name: "dock-demo-2", + description: "Second example showing a MacOS-style dock implementation.", + type: "registry:example", + registryDependencies: ["dock"], + files: [ + { + path: "registry/example/dock-demo-2.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/dock-demo-2.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "dock-demo-3": { + name: "dock-demo-3", + description: "Third example showing a MacOS-style dock implementation.", + type: "registry:example", + registryDependencies: ["dock"], + files: [ + { + path: "registry/example/dock-demo-3.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/dock-demo-3.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "word-rotate-demo": { + name: "word-rotate-demo", + description: "Example showing vertical word rotation animation.", + type: "registry:example", + registryDependencies: ["word-rotate"], + files: [ + { + path: "registry/example/word-rotate-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/word-rotate-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "hyper-text-demo": { + name: "hyper-text-demo", + description: "Example showing text with scrambling letter animations.", + type: "registry:example", + registryDependencies: ["hyper-text"], + files: [ + { + path: "registry/example/hyper-text-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/hyper-text-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "avatar-circles-demo": { + name: "avatar-circles-demo", + description: "Example showing overlapping avatar circles.", + type: "registry:example", + registryDependencies: ["avatar-circles"], + files: [ + { + path: "registry/example/avatar-circles-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/avatar-circles-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "typing-animation-demo": { + name: "typing-animation-demo", + description: "Example showing typed character animations.", + type: "registry:example", + registryDependencies: ["typing-animation"], + files: [ + { + path: "registry/example/typing-animation-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/typing-animation-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "scroll-based-velocity-demo": { + name: "scroll-based-velocity-demo", + description: "Example showing text speed changes based on scroll velocity.", + type: "registry:example", + registryDependencies: ["scroll-based-velocity"], + files: [ + { + path: "registry/example/scroll-based-velocity-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import( + "@/registry/example/scroll-based-velocity-demo.tsx" + ); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "scratch-to-reveal-demo": { + name: "scratch-to-reveal-demo", + description: "Example showing an interactive scratch-off reveal effect.", + type: "registry:example", + registryDependencies: ["scratch-to-reveal"], + files: [ + { + path: "registry/example/scratch-to-reveal-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/scratch-to-reveal-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "flip-text-demo": { + name: "flip-text-demo", + description: "Example showing text with character flip animations.", + type: "registry:example", + registryDependencies: ["flip-text"], + files: [ + { + path: "registry/example/flip-text-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/flip-text-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "sparkles-text-demo": { + name: "sparkles-text-demo", + description: "Example showing text with animated sparkle effects.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/sparkles-text-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/sparkles-text-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "icon-cloud-demo": { + name: "icon-cloud-demo", + description: "Example showing an interactive 3D icon cloud.", + type: "registry:example", + registryDependencies: ["icon-cloud"], + files: [ + { + path: "registry/example/icon-cloud-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/icon-cloud-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "icon-cloud-demo-2": { + name: "icon-cloud-demo-2", + description: "Second example showing an interactive 3D icon cloud.", + type: "registry:example", + registryDependencies: ["icon-cloud"], + files: [ + { + path: "registry/example/icon-cloud-demo-2.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/icon-cloud-demo-2.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "icon-cloud-demo-3": { + name: "icon-cloud-demo-3", + description: "Third example showing an interactive 3D icon cloud.", + type: "registry:example", + registryDependencies: ["icon-cloud"], + files: [ + { + path: "registry/example/icon-cloud-demo-3.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/icon-cloud-demo-3.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "text-animate-demo": { + name: "text-animate-demo", + description: "Example showing various text animations.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/text-animate-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/text-animate-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "text-animate-demo-2": { + name: "text-animate-demo-2", + description: "Second example showing various text animations.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/text-animate-demo-2.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/text-animate-demo-2.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "text-animate-demo-3": { + name: "text-animate-demo-3", + description: "Third example showing various text animations.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/text-animate-demo-3.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/text-animate-demo-3.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "text-animate-demo-4": { + name: "text-animate-demo-4", + description: "Fourth example showing various text animations.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/text-animate-demo-4.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/text-animate-demo-4.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "text-animate-demo-5": { + name: "text-animate-demo-5", + description: "Fifth example showing various text animations.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/text-animate-demo-5.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/text-animate-demo-5.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "text-animate-demo-6": { + name: "text-animate-demo-6", + description: "Sixth example showing various text animations.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/text-animate-demo-6.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/text-animate-demo-6.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "shiny-button-demo": { + name: "shiny-button-demo", + description: "Example showing a shiny button with dynamic styles.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/shiny-button-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/shiny-button-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "box-reveal-demo": { + name: "box-reveal-demo", + description: "Example showing a sliding box text reveal animation.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/box-reveal-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/box-reveal-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "animated-circular-progress-bar-demo": { + name: "animated-circular-progress-bar-demo", + description: "Example showing an animated circular progress gauge.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/animated-circular-progress-bar-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import( + "@/registry/example/animated-circular-progress-bar-demo.tsx" + ); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "shine-border-demo": { + name: "shine-border-demo", + description: "Example showing an animated shining border effect.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/shine-border-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/shine-border-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "shine-border-demo-2": { + name: "shine-border-demo-2", + description: "Second example showing an animated shining border effect.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/shine-border-demo-2.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/shine-border-demo-2.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "confetti-demo": { + name: "confetti-demo", + description: "Example showing confetti animations for celebrations.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/confetti-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/confetti-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "confetti-basic-cannon": { + name: "confetti-basic-cannon", + description: "Example showing basic confetti cannon animation.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/confetti-basic-cannon.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/confetti-basic-cannon.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "confetti-random-direction": { + name: "confetti-random-direction", + description: "Example showing confetti with random directions.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/confetti-random-direction.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import( + "@/registry/example/confetti-random-direction.tsx" + ); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "confetti-fireworks": { + name: "confetti-fireworks", + description: "Example showing fireworks-style confetti animation.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/confetti-fireworks.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/confetti-fireworks.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "confetti-stars": { + name: "confetti-stars", + description: "Example showing star-shaped confetti animation.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/confetti-stars.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/confetti-stars.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "confetti-side-cannons": { + name: "confetti-side-cannons", + description: "Example showing side-mounted confetti cannons.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/confetti-side-cannons.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/confetti-side-cannons.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "confetti-custom-shapes": { + name: "confetti-custom-shapes", + description: "Example showing confetti with custom shape particles.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/confetti-custom-shapes.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/confetti-custom-shapes.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "confetti-emoji": { + name: "confetti-emoji", + description: "Example showing confetti with emoji particles.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/confetti-emoji.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/confetti-emoji.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "animated-subscribe-button-demo": { + name: "animated-subscribe-button-demo", + description: + "Example showing an animated subscribe button with micro animations.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/animated-subscribe-button-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import( + "@/registry/example/animated-subscribe-button-demo.tsx" + ); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "cool-mode-demo": { + name: "cool-mode-demo", + description: "Example showing cool mode effect for buttons and links.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/cool-mode-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/cool-mode-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "cool-mode-custom": { + name: "cool-mode-custom", + description: "Example showing customized cool mode effects.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/cool-mode-custom.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/cool-mode-custom.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "pulsating-button-demo": { + name: "pulsating-button-demo", + description: "Example showing an animated pulsating button.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/pulsating-button-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/pulsating-button-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "ripple-button-demo": { + name: "ripple-button-demo", + description: "Example showing an animated button with ripple effect.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/ripple-button-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/ripple-button-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "file-tree-demo": { + name: "file-tree-demo", + description: + "Example showing a component that displays folder and file structure.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/file-tree-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/file-tree-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "blur-fade-demo": { + name: "blur-fade-demo", + description: "Example showing blur fade in and out animations.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/blur-fade-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/blur-fade-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "blur-fade-text-demo": { + name: "blur-fade-text-demo", + description: "Example showing blur fade animations with text.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/blur-fade-text-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/blur-fade-text-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "safari-demo": { + name: "safari-demo", + description: "Example showing a Safari browser mockup.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/safari-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/safari-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "safari-demo-2": { + name: "safari-demo-2", + description: "Second example showing a Safari browser mockup.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/safari-demo-2.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/safari-demo-2.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "safari-demo-3": { + name: "safari-demo-3", + description: "Third example showing a Safari browser mockup.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/safari-demo-3.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/safari-demo-3.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "safari-demo-4": { + name: "safari-demo-4", + description: "Fourth example showing a Safari browser mockup.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/safari-demo-4.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/safari-demo-4.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "iphone-15-pro-demo": { + name: "iphone-15-pro-demo", + description: "Example showing an iPhone 15 Pro mockup.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/iphone-15-pro-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/iphone-15-pro-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "iphone-15-pro-demo-2": { + name: "iphone-15-pro-demo-2", + description: "Second example showing an iPhone 15 Pro mockup.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/iphone-15-pro-demo-2.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/iphone-15-pro-demo-2.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "iphone-15-pro-demo-3": { + name: "iphone-15-pro-demo-3", + description: "Third example showing an iPhone 15 Pro mockup.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/iphone-15-pro-demo-3.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/iphone-15-pro-demo-3.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "rainbow-button-demo": { + name: "rainbow-button-demo", + description: "Example showing an animated button with rainbow effect.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/rainbow-button-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/example/rainbow-button-demo.tsx"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + "interactive-hover-button-demo": { + name: "interactive-hover-button-demo", + description: "Example showing an interactive button with hover effects.", + type: "registry:example", + registryDependencies: undefined, + files: [ + { + path: "registry/example/interactive-hover-button-demo.tsx", + type: "registry:example", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import( + "@/registry/example/interactive-hover-button-demo.tsx" + ); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, + }, + utils: { + name: "utils", + description: "", + type: "registry:lib", + registryDependencies: undefined, + files: [ + { + path: "registry/lib/utils.ts", + type: "registry:lib", + target: "", + }, + ], + component: React.lazy(async () => { + const mod = await import("@/registry/lib/utils.ts"); + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object", + ) || item.name; + return { default: mod.default || mod[exportName] }; + }), + meta: undefined, }, }; diff --git a/app/(blog)/blog/[slug]/page.tsx b/app/(blog)/blog/[slug]/page.tsx index cf0c2792f..505a0d7d3 100644 --- a/app/(blog)/blog/[slug]/page.tsx +++ b/app/(blog)/blog/[slug]/page.tsx @@ -195,7 +195,7 @@ export default function BlogPage({ params }: { params: { slug: string[] } }) { href="/blog" className="flex h-8 w-fit items-center justify-center rounded-full border border-border bg-muted px-4 text-sm text-secondary-foreground" > - + Back to Blog @@ -206,7 +206,7 @@ export default function BlogPage({ params }: { params: { slug: string[] } }) { {post.title}
diff --git a/app/(blog)/blog/page.tsx b/app/(blog)/blog/page.tsx index d461c1d29..9da7a428e 100644 --- a/app/(blog)/blog/page.tsx +++ b/app/(blog)/blog/page.tsx @@ -52,7 +52,7 @@ export default function BlogPage() { {featuredPosts[0].title}
@@ -153,7 +153,7 @@ export default function BlogPage() { {filteredBlogs.map((blog) => (
    • diff --git a/app/(marketing)/showcase/page.tsx b/app/(marketing)/showcase/page.tsx index 63691414d..9f97d366a 100644 --- a/app/(marketing)/showcase/page.tsx +++ b/app/(marketing)/showcase/page.tsx @@ -1,7 +1,7 @@ import { allShowcases } from "content-collections"; import { ShowcaseCard } from "@/components/sections/showcase"; -import { BlurFade } from "@/registry/default/magicui/blur-fade"; +import { BlurFade } from "@/registry/magicui/blur-fade"; export default function Page() { return ( diff --git a/app/registry/[name]/route.ts b/app/registry/[name]/route.ts new file mode 100644 index 000000000..f6f71b6cb --- /dev/null +++ b/app/registry/[name]/route.ts @@ -0,0 +1,57 @@ +import { promises as fs } from "fs"; +import { NextResponse } from "next/server"; +import path from "path"; +import { registryItemSchema } from "shadcn/registry"; + +// This route shows an example for serving a component using a route handler. +export async function GET( + request: Request, + { params }: { params: { name: string } }, +) { + try { + const { name } = params; + // Cache the registry import + const registryData = await import("@/registry.json"); + const registry = registryData.default; + + // Find the component from the registry. + const component = registry.items.find((c) => c.name === name); + + // If the component is not found, return a 404 error. + if (!component) { + return NextResponse.json( + { error: "Component not found" }, + { status: 404 }, + ); + } + + // Validate before file operations. + const registryItem = registryItemSchema.parse(component); + + // If the component has no files, return a 400 error. + if (!registryItem.files?.length) { + return NextResponse.json( + { error: "Component has no files" }, + { status: 400 }, + ); + } + + // Read all files in parallel. + const filesWithContent = await Promise.all( + registryItem.files.map(async (file) => { + const filePath = path.join(process.cwd(), file.path); + const content = await fs.readFile(filePath, "utf8"); + return { ...file, content }; + }), + ); + + // Return the component with the files. + return NextResponse.json({ ...registryItem, files: filesWithContent }); + } catch (error) { + console.error("Error processing component request:", error); + return NextResponse.json( + { error: "Something went wrong" }, + { status: 500 }, + ); + } +} diff --git a/components/blog/more-articles.tsx b/components/blog/more-articles.tsx index a043a8931..0692df2fe 100644 --- a/components/blog/more-articles.tsx +++ b/components/blog/more-articles.tsx @@ -23,7 +23,7 @@ export default function MoreArticles({ currentPost }: { currentPost: Blog }) {

    Read more like this - +

    {relatedPosts.map((post) => ( @@ -37,7 +37,7 @@ export default function MoreArticles({ currentPost }: { currentPost: Blog }) { {post.title}
    diff --git a/components/blog/promo-section.tsx b/components/blog/promo-section.tsx index 49e7ab691..3fbd005f7 100644 --- a/components/blog/promo-section.tsx +++ b/components/blog/promo-section.tsx @@ -18,7 +18,7 @@ export default function PromoSection() {
    diff --git a/components/component-preview.tsx b/components/component-preview.tsx index f3650aeca..eefe88847 100644 --- a/components/component-preview.tsx +++ b/components/component-preview.tsx @@ -1,16 +1,9 @@ -"use client"; - -import * as React from "react"; -import { Index } from "__registry__"; -import { RotateCcw } from "lucide-react"; - -import { useConfig } from "@/lib/use-config"; -import { cn } from "@/lib/utils"; -import { Button } from "@/components/ui/button"; -import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; -import ComponentWrapper from "@/components/component-wrapper"; +import { Index } from "@/__registry__"; +import { ComponentWrapper } from "@/components/component-wrapper"; import { Icons } from "@/components/icons"; -import { styles } from "@/registry/registry-styles"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import { cn } from "@/lib/utils"; +import * as React from "react"; interface ComponentPreviewProps extends React.HTMLAttributes { name: string; @@ -26,15 +19,11 @@ export function ComponentPreview({ preview = false, ...props }: ComponentPreviewProps) { - const [key, setKey] = React.useState(0); - const [config] = useConfig(); - const index = styles.findIndex((style) => style.name === config.style); - const Codes = React.Children.toArray(children) as React.ReactElement[]; - const Code = Codes[index]; + const Code = Codes[0]; const Preview = React.useMemo(() => { - const Component = Index[config.style][name]?.component; + const Component = Index[name]?.component; if (!Component) { console.error(`Component with name "${name}" not found in registry.`); @@ -50,7 +39,7 @@ export function ComponentPreview({ } return ; - }, [name, config.style]); + }, [name]); return (
    )} - - - + + diff --git a/components/component-wrapper.tsx b/components/component-wrapper.tsx index c02e156b4..98ed35688 100644 --- a/components/component-wrapper.tsx +++ b/components/component-wrapper.tsx @@ -1,16 +1,29 @@ +"use client"; + +import { OpenInV0Button } from "@/components/open-in-v0-button"; +import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; +import { RotateCcw } from "lucide-react"; +import React from "react"; -interface ComponentWrapperProps { - className?: string; - children: any; +interface ComponentWrapperProps extends React.HTMLAttributes { + name: string; } -const ComponentWrapper = ({ className, children }: ComponentWrapperProps) => { + +export const ComponentWrapper = ({ + className, + children, + name, +}: ComponentWrapperProps) => { + const [key, setKey] = React.useState(0); + return (
    { "lab-bg pointer-events-none [background-size:16px_16px]", )} /> +
    + + +
    {children}
    ); }; - -export default ComponentWrapper; diff --git a/components/mdx-components.tsx b/components/mdx-components.tsx index 57b56d9ab..536af544d 100644 --- a/components/mdx-components.tsx +++ b/components/mdx-components.tsx @@ -11,7 +11,7 @@ import { import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Event } from "@/lib/events"; import { cn } from "@/lib/utils"; -import { TweetCard } from "@/registry/default/magicui/tweet-card"; +import { TweetCard } from "@/registry/magicui/tweet-card"; import { useMDXComponent } from "@content-collections/mdx/react"; import Image from "next/image"; import Link from "next/link"; diff --git a/components/open-in-v0-button.tsx b/components/open-in-v0-button.tsx new file mode 100644 index 000000000..6ac8b5dd0 --- /dev/null +++ b/components/open-in-v0-button.tsx @@ -0,0 +1,34 @@ +import { Button } from "@/components/ui/button"; + +export function OpenInV0Button({ url }: { url: string }) { + return ( + + ); +} diff --git a/components/sections/hero.tsx b/components/sections/hero.tsx index 0f2ed58bb..3766cfdc7 100644 --- a/components/sections/hero.tsx +++ b/components/sections/hero.tsx @@ -39,7 +39,7 @@ export default async function Hero() { > 🎉 Introducing {post.title} - +

    ( {...props} /> ); - }, + } ); Button.displayName = "Button"; diff --git a/content/docs/components/android.mdx b/content/docs/components/android.mdx index 967af1fdd..63724dcff 100644 --- a/content/docs/components/android.mdx +++ b/content/docs/components/android.mdx @@ -1,7 +1,7 @@ --- title: Android date: 2024-12-20 -description: A mockup of the Android +description: A mockup of an Android device. author: dillionverma published: true --- diff --git a/content/docs/components/line-shadow-text.mdx b/content/docs/components/line-shadow-text.mdx index da3a0d599..419f1541c 100644 --- a/content/docs/components/line-shadow-text.mdx +++ b/content/docs/components/line-shadow-text.mdx @@ -1,7 +1,7 @@ --- title: Line Shadow Text date: 2025-01-11 -description: A line shadow text component for Magic UI +description: A text component with a moving line shadow. author: magicui published: true --- diff --git a/content/docs/components/warp-background.mdx b/content/docs/components/warp-background.mdx index bfc997ea8..39fb7bf58 100644 --- a/content/docs/components/warp-background.mdx +++ b/content/docs/components/warp-background.mdx @@ -1,7 +1,7 @@ --- title: Warp Background date: 2024-12-24 -description: A container component that applies a warp animation effect to its children +description: A card with a time warping background effect. author: magicui published: true --- diff --git a/content/showcase/writora.mdx b/content/showcase/writora.mdx index 1d44e760c..214642190 100644 --- a/content/showcase/writora.mdx +++ b/content/showcase/writora.mdx @@ -5,4 +5,4 @@ image: /showcase/writora.png href: https://writora.xyz featured: true affiliation: Open Source Project ---- \ No newline at end of file +--- diff --git a/lib/rehype-component.ts b/lib/rehype-component.ts index 9ca00ee05..a92e065ce 100644 --- a/lib/rehype-component.ts +++ b/lib/rehype-component.ts @@ -5,8 +5,16 @@ import { visit } from "unist-util-visit"; import { UnistNode, UnistTree } from "@/types/unist"; -import { Index } from "../__registry__"; -import { styles } from "../registry/registry-styles"; +import Registry from "../registry.json"; + +export const styles = [ + { + name: "default", + label: "Default", + }, +] as const; + +export type Style = (typeof styles)[number]; export function rehypeComponent() { return async (tree: UnistTree) => { @@ -24,70 +32,73 @@ export function rehypeComponent() { } try { - for (const style of styles) { - let src: string; - - if (srcPath) { - src = srcPath as string; - } else { - const component = Index[style.name][name]; - src = fileName - ? component.files.find((file: string) => { - return ( - file.endsWith(`${fileName}.tsx`) || - file.endsWith(`${fileName}.ts`) - ); - }) || component.files[0] - : component.files[0]; + let src: string; + + if (srcPath) { + src = srcPath as string; + } else { + const component = Registry.items.find((item) => item.name === name); + + if (!component) { + return null; } - // Read the source file. - const filePath = path.join(process.cwd(), src); - let source = fs.readFileSync(filePath, "utf8"); - - // Replace imports. - // TODO: Use @swc/core and a visitor to replace this. - // For now a simple regex should do. - source = source.replaceAll( - `@/registry/${style.name}/`, - "@/components/", - ); - source = source.replaceAll("export default", "export"); - - // Add code as children so that rehype can take over at build time. - node.children?.push( - u("element", { - tagName: "pre", - properties: { - __src__: src, - }, - attributes: [ - { - name: "styleName", - type: "mdxJsxAttribute", - value: style.name, + src = fileName + ? component.files.find((file) => { + return ( + file.path.endsWith(`${fileName}.tsx`) || + file.path.endsWith(`${fileName}.ts`) + ); + })?.path || component.files[0].path + : component.files[0].path; + } + + // Read the source file. + const filePath = path.join(process.cwd(), src); + let source = fs.readFileSync(filePath, "utf8"); + + // Replace imports. + // TODO: Use @swc/core and a visitor to replace this. + // For now a simple regex should do. + // source = source.replaceAll( + // `@/registry/${style.name}/`, + // "@/components/", + // ); + source = source.replaceAll("export default", "export"); + + // Add code as children so that rehype can take over at build time. + node.children?.push( + u("element", { + tagName: "pre", + properties: { + __src__: src, + }, + // attributes: [ + // { + // name: "styleName", + // type: "mdxJsxAttribute", + // value: style.name, + // }, + // ], + children: [ + u("element", { + tagName: "code", + properties: { + className: ["language-tsx"], }, - ], - children: [ - u("element", { - tagName: "code", - properties: { - className: ["language-tsx"], - }, - data: { - meta: `event="copy_source_code"`, + data: { + meta: `event="copy_source_code"`, + }, + children: [ + { + type: "text", + value: source, }, - children: [ - { - type: "text", - value: source, - }, - ], - }), - ], - }), - ); - } + ], + }), + ], + }), + ); } catch (error) { console.error(error); } @@ -101,50 +112,53 @@ export function rehypeComponent() { } try { - for (const style of styles) { - const component = Index[style.name][name]; - const src = component.files[0]; - - // Read the source file. - const filePath = path.join(process.cwd(), src); - let source = fs.readFileSync(filePath, "utf8"); - - // Replace imports. - // TODO: Use @swc/core and a visitor to replace this. - // For now a simple regex should do. - source = source.replaceAll( - `@/registry/${style.name}/`, - "@/components/", - ); - source = source.replaceAll("export default", "export"); - - // Add code as children so that rehype can take over at build time. - node.children?.push( - u("element", { - tagName: "pre", - properties: { - __src__: src, - }, - children: [ - u("element", { - tagName: "code", - properties: { - className: ["language-tsx"], - }, - data: { - meta: `event="copy_usage_code"`, - }, - children: [ - { - type: "text", - value: source, - }, - ], - }), - ], - }), - ); + const component = Registry.items.find((item) => item.name === name); + + if (!component) { + return null; } + + const src = component.files[0].path; + + // Read the source file. + const filePath = path.join(process.cwd(), src); + let source = fs.readFileSync(filePath, "utf8"); + + // Replace imports. + // TODO: Use @swc/core and a visitor to replace this. + // For now a simple regex should do. + // source = source.replaceAll( + // `@/registry/${style.name}/`, + // "@/components/", + // ); + source = source.replaceAll("export default", "export"); + + // Add code as children so that rehype can take over at build time. + node.children?.push( + u("element", { + tagName: "pre", + properties: { + __src__: src, + }, + children: [ + u("element", { + tagName: "code", + properties: { + className: ["language-tsx"], + }, + data: { + meta: `event="copy_usage_code"`, + }, + children: [ + { + type: "text", + value: source, + }, + ], + }), + ], + }), + ); } catch (error) { console.error(error); } diff --git a/lib/use-config.ts b/lib/use-config.ts deleted file mode 100644 index 48c54adc0..000000000 --- a/lib/use-config.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { useAtom } from "jotai"; -import { atomWithStorage } from "jotai/utils"; - -import { BaseColor } from "@/registry/registry-base-colors"; -import { Style } from "@/registry/registry-styles"; - -type Config = { - style: Style["name"]; - theme: BaseColor["name"]; - radius: number; -}; - -const configAtom = atomWithStorage("config", { - style: "default", - theme: "zinc", - radius: 0.5, -}); - -export function useConfig() { - return useAtom(configAtom); -} diff --git a/next.config.mjs b/next.config.mjs index d4d28099d..1ebbfc243 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -33,28 +33,6 @@ const nextConfig = { destination: "/docs/components/marquee", permanent: true, }, - { - source: "/r", - destination: "/r/index.json", - permanent: true, - }, - { - source: "/r/index", - destination: "/r/index.json", - permanent: true, - }, - { - source: "/r/:name((?!index\\.json|styles/).*)", - destination: "/r/styles/default/:name.json", - permanent: true, - missing: [ - { - type: "query", - key: "_redirected", - value: undefined, - }, - ], - }, ]; }, }; diff --git a/package.json b/package.json index 46cdb35f1..aa9a7b7b8 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "dev": "concurrently \"content-collections watch\" \"next dev\"", "prebuild": "pnpm build:docs && pnpm build:registry", "build": "next build", - "build:registry": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/build-registry.mts && prettier --loglevel silent --write \"registry/**/*.{ts,tsx,mdx}\" --cache", + "build:registry": "npx tsx ./scripts/build-registry.mts", "build:docs": "content-collections build", "typecheck": "pnpm build:docs && tsc --noEmit", "start": "next start", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 473825df5..b708baf0c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -326,6 +326,10 @@ packages: resolution: {integrity: sha512-eUuWapzEGWFEpHFxgEaBG8e3n6S8L3MSu0oda755rOfabWPnh0Our1AozNFVUxGFIhbKgd1ksprsoDGMinTOTA==} engines: {node: '>=6.9.0'} + '@babel/types@7.26.5': + resolution: {integrity: sha512-L6mZmwFDK6Cjh1nRCLXpa6no13ZIioJDz7mdkzHv399pThrTa/k0nUlNaenOeh2kWu/iaOQYElEpKPUswUa9Vg==} + engines: {node: '>=6.9.0'} + '@clerc/core@0.44.0': resolution: {integrity: sha512-o8RgXNcMRoHRujSw9OPDMxqrmoNk7HG0XAZkjZgOrSyIfRXCf85VLyHGBT3XmaOrPEGY964h02ZxMVFdp8RnNQ==} @@ -811,6 +815,10 @@ packages: resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==} engines: {node: '>=6.0.0'} + '@jridgewell/gen-mapping@0.3.8': + resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==} + engines: {node: '>=6.0.0'} + '@jridgewell/resolve-uri@3.1.2': resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==} engines: {node: '>=6.0.0'} @@ -1714,6 +1722,9 @@ packages: resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} engines: {node: '>=10.13.0'} + '@ts-morph/common@0.19.0': + resolution: {integrity: sha512-Unz/WHmd4pGax91rdIKWi51wnVUW11QttMEPpBiBgIewnc9UQIX7UDLxr5vRlqeByXCwhkF6VabSsI0raWcyAQ==} + '@ts-morph/common@0.24.0': resolution: {integrity: sha512-c1xMmNHWpNselmpIqursHeOHHBTIsJLbB+NuovbTTRCNiTLEr/U9dbJ8qy0jd/O2x5pc3seWuOUN5R2IoOTp8A==} @@ -1888,6 +1899,10 @@ packages: resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==} engines: {node: '>= 0.4'} + array-buffer-byte-length@1.0.2: + resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==} + engines: {node: '>= 0.4'} + array-ify@1.0.0: resolution: {integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==} @@ -1923,6 +1938,10 @@ packages: resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==} engines: {node: '>= 0.4'} + arraybuffer.prototype.slice@1.0.4: + resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==} + engines: {node: '>= 0.4'} + ast-types-flow@0.0.8: resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==} @@ -1959,6 +1978,9 @@ packages: balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} + base64-js@1.5.1: + resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} + before-after-hook@3.0.2: resolution: {integrity: sha512-Nik3Sc0ncrMK4UUdXQmAnRtzmNQTAAXmXIopizwZ1W1t8QmfJj+zL4OA2I7XPTPW5z5TDqv4hRo/JzouDJnX3A==} @@ -1983,6 +2005,9 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true + buffer@6.0.3: + resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==} + busboy@1.6.0: resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==} engines: {node: '>=10.16.0'} @@ -1999,6 +2024,14 @@ packages: resolution: {integrity: sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==} engines: {node: '>= 0.4'} + call-bind@1.0.8: + resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==} + engines: {node: '>= 0.4'} + + call-bound@1.0.3: + resolution: {integrity: sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==} + engines: {node: '>= 0.4'} + callsites@3.1.0: resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==} engines: {node: '>=6'} @@ -2050,6 +2083,10 @@ packages: resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==} engines: {node: '>=18'} + cli-spinners@2.9.2: + resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==} + engines: {node: '>=6'} + cli-truncate@4.0.0: resolution: {integrity: sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==} engines: {node: '>=18'} @@ -2061,6 +2098,10 @@ packages: resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==} engines: {node: '>=12'} + clone@1.0.4: + resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==} + engines: {node: '>=0.8'} + clsx@1.2.1: resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==} engines: {node: '>=6'} @@ -2149,6 +2190,15 @@ packages: cosmiconfig: '>=9' typescript: '>=5' + cosmiconfig@8.3.6: + resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==} + engines: {node: '>=14'} + peerDependencies: + typescript: '>=4.9.5' + peerDependenciesMeta: + typescript: + optional: true + cosmiconfig@9.0.0: resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==} engines: {node: '>=14'} @@ -2270,6 +2320,13 @@ packages: deep-is@0.1.4: resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==} + deepmerge@4.3.1: + resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==} + engines: {node: '>=0.10.0'} + + defaults@1.0.4: + resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==} + define-data-property@1.1.4: resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==} engines: {node: '>= 0.4'} @@ -2378,6 +2435,10 @@ packages: resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==} engines: {node: '>= 0.4'} + es-define-property@1.0.1: + resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==} + engines: {node: '>= 0.4'} + es-errors@1.3.0: resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==} engines: {node: '>= 0.4'} @@ -2394,6 +2455,10 @@ packages: resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==} engines: {node: '>= 0.4'} + es-set-tostringtag@2.1.0: + resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==} + engines: {node: '>= 0.4'} + es-shim-unscopables@1.0.2: resolution: {integrity: sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==} @@ -2585,6 +2650,10 @@ packages: eventemitter3@5.0.1: resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==} + execa@7.2.0: + resolution: {integrity: sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==} + engines: {node: ^14.18.0 || ^16.14.0 || >=18.0.0} + execa@8.0.1: resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==} engines: {node: '>=16.17'} @@ -2629,6 +2698,10 @@ packages: picomatch: optional: true + fetch-blob@3.2.0: + resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==} + engines: {node: ^12.20 || >= 14.13} + fflate@0.4.8: resolution: {integrity: sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==} @@ -2667,6 +2740,10 @@ packages: resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==} engines: {node: '>=0.4.x'} + formdata-polyfill@4.0.10: + resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==} + engines: {node: '>=12.20.0'} + fraction.js@4.3.7: resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} @@ -2684,6 +2761,10 @@ packages: react-dom: optional: true + fs-extra@11.3.0: + resolution: {integrity: sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==} + engines: {node: '>=14.14'} + fs.realpath@1.0.0: resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} @@ -2699,6 +2780,10 @@ packages: resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==} engines: {node: '>= 0.4'} + function.prototype.name@1.1.8: + resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==} + engines: {node: '>= 0.4'} + functions-have-names@1.2.3: resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==} @@ -2719,6 +2804,10 @@ packages: resolution: {integrity: sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==} engines: {node: '>= 0.4'} + get-intrinsic@1.2.7: + resolution: {integrity: sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==} + engines: {node: '>= 0.4'} + get-nonce@1.0.1: resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==} engines: {node: '>=6'} @@ -2782,6 +2871,10 @@ packages: resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==} engines: {node: '>= 0.4'} + globalthis@1.0.4: + resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==} + engines: {node: '>= 0.4'} + globby@11.1.0: resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==} engines: {node: '>=10'} @@ -2790,6 +2883,10 @@ packages: resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==} engines: {node: '>= 0.4'} + gopd@1.2.0: + resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==} + engines: {node: '>= 0.4'} + graceful-fs@4.2.11: resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==} @@ -2823,6 +2920,10 @@ packages: resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==} engines: {node: '>= 0.4'} + has-symbols@1.1.0: + resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==} + engines: {node: '>= 0.4'} + has-tostringtag@1.0.2: resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==} engines: {node: '>= 0.4'} @@ -2873,6 +2974,14 @@ packages: htmlparser2@8.0.2: resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==} + https-proxy-agent@6.2.1: + resolution: {integrity: sha512-ONsE3+yfZF2caH5+bJlcddtWqNI3Gvs5A38+ngvljxaBiRXRswym2c7yf8UAeFpRFKjFNHIFEHqR/OLAWJzyiA==} + engines: {node: '>= 14'} + + human-signals@4.3.1: + resolution: {integrity: sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==} + engines: {node: '>=14.18.0'} + human-signals@5.0.0: resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==} engines: {node: '>=16.17.0'} @@ -2925,6 +3034,10 @@ packages: resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==} engines: {node: '>= 0.4'} + is-array-buffer@3.0.5: + resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==} + engines: {node: '>= 0.4'} + is-arrayish@0.2.1: resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==} @@ -2940,6 +3053,10 @@ packages: resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==} engines: {node: '>= 0.4'} + is-boolean-object@1.2.2: + resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==} + engines: {node: '>= 0.4'} + is-buffer@2.0.5: resolution: {integrity: sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==} engines: {node: '>=4'} @@ -2963,6 +3080,10 @@ packages: resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==} engines: {node: '>= 0.4'} + is-date-object@1.1.0: + resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==} + engines: {node: '>= 0.4'} + is-decimal@2.0.1: resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==} @@ -3009,6 +3130,10 @@ packages: resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==} engines: {node: '>= 0.4'} + is-number-object@1.1.1: + resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==} + engines: {node: '>= 0.4'} + is-number@7.0.0: resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==} engines: {node: '>=0.12.0'} @@ -3017,6 +3142,10 @@ packages: resolution: {integrity: sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==} engines: {node: '>=8'} + is-obj@3.0.0: + resolution: {integrity: sha512-IlsXEHOjtKhpN8r/tRFj2nDyTmHvcfNeu/nrRIcXE17ROeatXchkojffa1SpdqW4cr/Fj6QkEf/Gn4zf6KKvEQ==} + engines: {node: '>=12'} + is-path-inside@3.0.3: resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==} engines: {node: '>=8'} @@ -3040,6 +3169,10 @@ packages: resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==} engines: {node: '>= 0.4'} + is-shared-array-buffer@1.0.4: + resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==} + engines: {node: '>= 0.4'} + is-stream@3.0.0: resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} @@ -3052,6 +3185,10 @@ packages: resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==} engines: {node: '>= 0.4'} + is-symbol@1.1.1: + resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==} + engines: {node: '>= 0.4'} + is-text-path@2.0.0: resolution: {integrity: sha512-+oDTluR6WEjdXEJMnC2z6A4FRwFoYuvShVVEGsS7ewc0UTi2QtAKMDJuL4BDEVt+5T7MjFo12RP8ghOM75oKJw==} engines: {node: '>=8'} @@ -3117,6 +3254,11 @@ packages: engines: {node: '>=6'} hasBin: true + jsesc@3.1.0: + resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==} + engines: {node: '>=6'} + hasBin: true + json-buffer@3.0.1: resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==} @@ -3154,6 +3296,10 @@ packages: resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==} engines: {node: '>=0.10.0'} + kleur@3.0.3: + resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==} + engines: {node: '>=6'} + kleur@4.1.5: resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==} engines: {node: '>=6'} @@ -3634,6 +3780,11 @@ packages: resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==} engines: {node: '>=16 || 14 >=14.17'} + mkdirp@2.1.6: + resolution: {integrity: sha512-+hEnITedc8LAtIP9u3HJDFIdcLV2vXP33sqLLIzkv1Db1zO/1OxbvYf0Y1OC/S/Qo5dxHXepofhmxL02PsKe+A==} + engines: {node: '>=10'} + hasBin: true + mkdirp@3.0.1: resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==} engines: {node: '>=10'} @@ -3734,6 +3885,10 @@ packages: resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==} engines: {node: '>= 0.4'} + object-inspect@1.13.4: + resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==} + engines: {node: '>= 0.4'} + object-keys@1.1.1: resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==} engines: {node: '>= 0.4'} @@ -4109,6 +4264,10 @@ packages: engines: {node: '>=14'} hasBin: true + prompts@2.4.2: + resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==} + engines: {node: '>= 6'} + prop-types@15.8.1: resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==} @@ -4221,6 +4380,10 @@ packages: resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==} engines: {node: '>= 0.4'} + regexp.prototype.flags@1.5.4: + resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==} + engines: {node: '>= 0.4'} + rehype-autolink-headings@7.1.0: resolution: {integrity: sha512-rItO/pSdvnvsP4QRB1pmPiNHUskikqtPojZKJPPPAVx9Hj8i8TwMBhofrrAYRhYOOBZH9tgmG5lPqDLuIWPWmw==} @@ -4341,6 +4504,10 @@ packages: resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==} engines: {node: '>=0.4'} + safe-array-concat@1.1.3: + resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==} + engines: {node: '>=0.4'} + safe-buffer@5.2.1: resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==} @@ -4352,6 +4519,10 @@ packages: resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==} engines: {node: '>= 0.4'} + safe-regex-test@1.1.0: + resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==} + engines: {node: '>= 0.4'} + scheduler@0.23.2: resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==} @@ -4384,6 +4555,10 @@ packages: resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==} engines: {node: '>= 0.4'} + set-function-length@1.2.2: + resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==} + engines: {node: '>= 0.4'} + set-function-name@2.0.2: resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==} engines: {node: '>= 0.4'} @@ -4435,6 +4610,9 @@ packages: resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==} engines: {node: '>=14'} + sisteransi@1.0.5: + resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==} + slash@3.0.0: resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==} engines: {node: '>=8'} @@ -4457,6 +4635,10 @@ packages: resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} engines: {node: '>=0.10.0'} + source-map@0.6.1: + resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==} + engines: {node: '>=0.10.0'} + source-map@0.7.4: resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==} engines: {node: '>= 8'} @@ -4540,6 +4722,10 @@ packages: stringify-entities@4.0.4: resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==} + stringify-object@5.0.0: + resolution: {integrity: sha512-zaJYxz2FtcMb4f+g60KsRNFOpVMUyuJgA51Zi5Z1DOTC3S59+OQiVOzE9GZt0x72uBGWKsQIuBKeF9iusmKFsg==} + engines: {node: '>=14.16'} + strip-ansi@6.0.1: resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==} engines: {node: '>=8'} @@ -4684,6 +4870,10 @@ packages: tsconfig-paths@3.15.0: resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==} + tsconfig-paths@4.2.0: + resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==} + engines: {node: '>=6'} + tslib@1.14.1: resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==} @@ -4866,6 +5056,9 @@ packages: vfile@6.0.3: resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==} + wcwidth@1.0.1: + resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==} + web-namespaces@2.0.1: resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==} @@ -4888,6 +5081,10 @@ packages: resolution: {integrity: sha512-qEcY+KJYlWyLH9vNbsr6/5j59AXk5ni5aakf8ldzBvGde6Iz4sxZGkJyWSAueTG7QhOvNRYb1lDdFmL5Td0QKA==} engines: {node: '>= 0.4'} + which-typed-array@1.1.18: + resolution: {integrity: sha512-qEcY+KJYlWyLH9vNbsr6/5j59AXk5ni5aakf8ldzBvGde6Iz4sxZGkJyWSAueTG7QhOvNRYb1lDdFmL5Td0QKA==} + engines: {node: '>= 0.4'} + which@1.3.1: resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==} hasBin: true @@ -5004,6 +5201,11 @@ snapshots: '@babel/helper-string-parser': 7.25.9 '@babel/helper-validator-identifier': 7.25.9 + '@babel/types@7.26.5': + dependencies: + '@babel/helper-string-parser': 7.25.9 + '@babel/helper-validator-identifier': 7.25.9 + '@clerc/core@0.44.0': dependencies: '@clerc/utils': 0.44.0(@clerc/core@0.44.0) @@ -5435,6 +5637,12 @@ snapshots: '@jridgewell/sourcemap-codec': 1.5.0 '@jridgewell/trace-mapping': 0.3.25 + '@jridgewell/gen-mapping@0.3.8': + dependencies: + '@jridgewell/set-array': 1.2.1 + '@jridgewell/sourcemap-codec': 1.4.15 + '@jridgewell/trace-mapping': 0.3.25 + '@jridgewell/resolve-uri@3.1.2': {} '@jridgewell/set-array@1.2.1': {} @@ -6363,6 +6571,13 @@ snapshots: '@trysound/sax@0.2.0': {} + '@ts-morph/common@0.19.0': + dependencies: + fast-glob: 3.3.2 + minimatch: 7.4.6 + mkdirp: 2.1.6 + path-browserify: 1.0.1 + '@ts-morph/common@0.24.0': dependencies: fast-glob: 3.3.3 @@ -6539,6 +6754,11 @@ snapshots: aria-query@5.3.2: {} + array-buffer-byte-length@1.0.2: + dependencies: + call-bound: 1.0.3 + is-array-buffer: 3.0.5 + array-buffer-byte-length@1.0.2: dependencies: call-bound: 1.0.3 @@ -6595,6 +6815,16 @@ snapshots: define-properties: 1.2.1 es-abstract: 1.23.9 es-errors: 1.3.0 + es-object-atoms: 1.1.1 + es-shim-unscopables: 1.0.2 + + array.prototype.findlastindex@1.2.5: + dependencies: + call-bind: 1.0.8 + define-properties: 1.2.1 + es-abstract: 1.23.9 + es-errors: 1.3.0 + es-object-atoms: 1.1.1 es-shim-unscopables: 1.0.2 arraybuffer.prototype.slice@1.0.4: @@ -6607,6 +6837,16 @@ snapshots: get-intrinsic: 1.2.7 is-array-buffer: 3.0.5 + arraybuffer.prototype.slice@1.0.4: + dependencies: + array-buffer-byte-length: 1.0.2 + call-bind: 1.0.8 + define-properties: 1.2.1 + es-abstract: 1.23.9 + es-errors: 1.3.0 + get-intrinsic: 1.2.7 + is-array-buffer: 3.0.5 + ast-types-flow@0.0.8: {} astring@1.9.0: {} @@ -6635,6 +6875,8 @@ snapshots: balanced-match@1.0.2: {} + base64-js@1.5.1: {} + before-after-hook@3.0.2: {} boolbase@1.0.0: {} @@ -6661,6 +6903,11 @@ snapshots: node-releases: 2.0.19 update-browserslist-db: 1.1.2(browserslist@4.24.4) + buffer@6.0.3: + dependencies: + base64-js: 1.5.1 + ieee754: 1.2.1 + busboy@1.6.0: dependencies: streamsearch: 1.1.0 @@ -6682,6 +6929,18 @@ snapshots: call-bind-apply-helpers: 1.0.1 get-intrinsic: 1.2.7 + call-bind@1.0.8: + dependencies: + call-bind-apply-helpers: 1.0.1 + es-define-property: 1.0.1 + get-intrinsic: 1.2.7 + set-function-length: 1.2.2 + + call-bound@1.0.3: + dependencies: + call-bind-apply-helpers: 1.0.1 + get-intrinsic: 1.2.7 + callsites@3.1.0: {} camelcase@8.0.0: {} @@ -6728,6 +6987,8 @@ snapshots: dependencies: restore-cursor: 5.1.0 + cli-spinners@2.9.2: {} + cli-truncate@4.0.0: dependencies: slice-ansi: 5.0.0 @@ -6741,6 +7002,8 @@ snapshots: strip-ansi: 6.0.1 wrap-ansi: 7.0.0 + clone@1.0.4: {} + clsx@1.2.1: {} clsx@2.1.1: {} @@ -6979,6 +7242,12 @@ snapshots: deep-is@0.1.4: {} + deepmerge@4.3.1: {} + + defaults@1.0.4: + dependencies: + clone: 1.0.4 + define-data-property@1.1.4: dependencies: es-define-property: 1.0.1 @@ -7128,6 +7397,8 @@ snapshots: es-define-property@1.0.1: {} + es-define-property@1.0.1: {} + es-errors@1.3.0: {} es-iterator-helpers@1.2.1: @@ -7492,6 +7763,18 @@ snapshots: eventemitter3@5.0.1: {} + execa@7.2.0: + dependencies: + cross-spawn: 7.0.3 + get-stream: 6.0.1 + human-signals: 4.3.1 + is-stream: 3.0.0 + merge-stream: 2.0.0 + npm-run-path: 5.3.0 + onetime: 6.0.0 + signal-exit: 3.0.7 + strip-final-newline: 3.0.0 + execa@8.0.1: dependencies: cross-spawn: 7.0.6 @@ -7540,6 +7823,11 @@ snapshots: optionalDependencies: picomatch: 4.0.2 + fetch-blob@3.2.0: + dependencies: + node-domexception: 1.0.0 + web-streams-polyfill: 3.3.3 + fflate@0.4.8: {} file-entry-cache@6.0.1: @@ -7580,6 +7868,10 @@ snapshots: format@0.2.2: {} + formdata-polyfill@4.0.10: + dependencies: + fetch-blob: 3.2.0 + fraction.js@4.3.7: {} framer-motion@11.18.2(@emotion/is-prop-valid@0.8.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): @@ -7592,6 +7884,12 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + fs-extra@11.3.0: + dependencies: + graceful-fs: 4.2.11 + jsonfile: 6.1.0 + universalify: 2.0.1 + fs.realpath@1.0.0: {} fsevents@2.3.3: @@ -7599,6 +7897,15 @@ snapshots: function-bind@1.1.2: {} + function.prototype.name@1.1.8: + dependencies: + call-bind: 1.0.8 + call-bound: 1.0.3 + define-properties: 1.2.1 + functions-have-names: 1.2.3 + hasown: 2.0.2 + is-callable: 1.2.7 + function.prototype.name@1.1.8: dependencies: call-bind: 1.0.8 @@ -7708,6 +8015,11 @@ snapshots: define-properties: 1.2.1 gopd: 1.2.0 + globalthis@1.0.4: + dependencies: + define-properties: 1.2.1 + gopd: 1.2.0 + globby@11.1.0: dependencies: array-union: 2.1.0 @@ -7746,6 +8058,8 @@ snapshots: has-symbols@1.1.0: {} + has-symbols@1.1.0: {} + has-tostringtag@1.0.2: dependencies: has-symbols: 1.1.0 @@ -7868,6 +8182,15 @@ snapshots: domutils: 3.2.2 entities: 4.5.0 + https-proxy-agent@6.2.1: + dependencies: + agent-base: 7.1.3 + debug: 4.3.4 + transitivePeerDependencies: + - supports-color + + human-signals@4.3.1: {} + human-signals@5.0.0: {} husky@9.1.7: {} @@ -7955,6 +8278,11 @@ snapshots: call-bound: 1.0.3 has-tostringtag: 1.0.2 + is-date-object@1.1.0: + dependencies: + call-bound: 1.0.3 + has-tostringtag: 1.0.2 + is-decimal@2.0.1: {} is-extendable@0.1.1: {} @@ -7988,6 +8316,11 @@ snapshots: is-map@2.0.3: {} + is-number-object@1.1.1: + dependencies: + call-bound: 1.0.3 + has-tostringtag: 1.0.2 + is-number-object@1.1.1: dependencies: call-bound: 1.0.3 @@ -7997,6 +8330,8 @@ snapshots: is-obj@2.0.0: {} + is-obj@3.0.0: {} + is-path-inside@3.0.3: {} is-plain-obj@4.1.0: {} @@ -8029,6 +8364,12 @@ snapshots: has-symbols: 1.1.0 safe-regex-test: 1.1.0 + is-symbol@1.1.1: + dependencies: + call-bound: 1.0.3 + has-symbols: 1.1.0 + safe-regex-test: 1.1.0 + is-text-path@2.0.0: dependencies: text-extensions: 2.4.0 @@ -8087,6 +8428,8 @@ snapshots: jsesc@3.1.0: {} + jsesc@3.1.0: {} + json-buffer@3.0.1: {} json-parse-better-errors@1.0.2: {} @@ -8118,6 +8461,8 @@ snapshots: kind-of@6.0.3: {} + kleur@3.0.3: {} + kleur@4.1.5: {} language-subtag-registry@0.3.23: {} @@ -8960,6 +9305,8 @@ snapshots: minipass@7.1.2: {} + mkdirp@2.1.6: {} + mkdirp@3.0.1: {} motion-dom@11.18.1: @@ -9055,6 +9402,8 @@ snapshots: object-inspect@1.13.4: {} + object-inspect@1.13.4: {} + object-keys@1.1.1: {} object.assign@4.1.7: @@ -9138,6 +9487,24 @@ snapshots: object-keys: 1.1.1 safe-push-apply: 1.0.0 + ora@6.3.1: + dependencies: + chalk: 5.3.0 + cli-cursor: 4.0.0 + cli-spinners: 2.9.2 + is-interactive: 2.0.0 + is-unicode-supported: 1.3.0 + log-symbols: 5.1.0 + stdin-discarder: 0.1.0 + strip-ansi: 7.1.0 + wcwidth: 1.0.1 + + own-keys@1.0.1: + dependencies: + get-intrinsic: 1.2.7 + object-keys: 1.1.1 + safe-push-apply: 1.0.0 + p-limit@3.1.0: dependencies: yocto-queue: 0.1.0 @@ -9429,6 +9796,11 @@ snapshots: prettier@3.5.0: {} + prompts@2.4.2: + dependencies: + kleur: 3.0.3 + sisteransi: 1.0.5 + prop-types@15.8.1: dependencies: loose-envify: 1.4.0 @@ -9570,6 +9942,15 @@ snapshots: gopd: 1.2.0 set-function-name: 2.0.2 + regexp.prototype.flags@1.5.4: + dependencies: + call-bind: 1.0.8 + define-properties: 1.2.1 + es-errors: 1.3.0 + get-proto: 1.0.1 + gopd: 1.2.0 + set-function-name: 2.0.2 + rehype-autolink-headings@7.1.0: dependencies: '@types/hast': 3.0.4 @@ -9771,6 +10152,14 @@ snapshots: has-symbols: 1.1.0 isarray: 2.0.5 + safe-array-concat@1.1.3: + dependencies: + call-bind: 1.0.8 + call-bound: 1.0.3 + get-intrinsic: 1.2.7 + has-symbols: 1.1.0 + isarray: 2.0.5 + safe-buffer@5.2.1: {} safe-push-apply@1.0.0: @@ -9784,6 +10173,12 @@ snapshots: es-errors: 1.3.0 is-regex: 1.2.1 + safe-regex-test@1.1.0: + dependencies: + call-bound: 1.0.3 + es-errors: 1.3.0 + is-regex: 1.2.1 + scheduler@0.23.2: dependencies: loose-envify: 1.4.0 @@ -9816,6 +10211,15 @@ snapshots: gopd: 1.2.0 has-property-descriptors: 1.0.2 + set-function-length@1.2.2: + dependencies: + define-data-property: 1.1.4 + es-errors: 1.3.0 + function-bind: 1.1.2 + get-intrinsic: 1.2.7 + gopd: 1.2.0 + has-property-descriptors: 1.0.2 + set-function-name@2.0.2: dependencies: define-data-property: 1.1.4 @@ -9884,6 +10288,8 @@ snapshots: signal-exit@4.1.0: {} + sisteransi@1.0.5: {} + slash@3.0.0: {} slice-ansi@5.0.0: @@ -9903,6 +10309,8 @@ snapshots: source-map-js@1.2.1: {} + source-map@0.6.1: {} + source-map@0.7.4: {} space-separated-tokens@2.0.2: {} @@ -10017,6 +10425,12 @@ snapshots: character-entities-html4: 2.1.0 character-entities-legacy: 3.0.0 + stringify-object@5.0.0: + dependencies: + get-own-enumerable-keys: 1.0.0 + is-obj: 3.0.0 + is-regexp: 3.1.0 + strip-ansi@6.0.1: dependencies: ansi-regex: 5.0.1 @@ -10142,6 +10556,12 @@ snapshots: minimist: 1.2.8 strip-bom: 3.0.0 + tsconfig-paths@4.2.0: + dependencies: + json5: 2.2.3 + minimist: 1.2.8 + strip-bom: 3.0.0 + tslib@1.14.1: {} tslib@2.8.1: {} @@ -10376,6 +10796,10 @@ snapshots: '@types/unist': 3.0.3 vfile-message: 4.0.2 + wcwidth@1.0.1: + dependencies: + defaults: 1.0.4 + web-namespaces@2.0.1: {} web-vitals@4.2.4: {} @@ -10420,6 +10844,15 @@ snapshots: gopd: 1.2.0 has-tostringtag: 1.0.2 + which-typed-array@1.1.18: + dependencies: + available-typed-arrays: 1.0.7 + call-bind: 1.0.8 + call-bound: 1.0.3 + for-each: 0.3.3 + gopd: 1.2.0 + has-tostringtag: 1.0.2 + which@1.3.1: dependencies: isexe: 2.0.0 diff --git a/public/r/android-demo-2.json b/public/r/android-demo-2.json new file mode 100644 index 000000000..3eda73661 --- /dev/null +++ b/public/r/android-demo-2.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "android-demo-2", + "type": "registry:component", + "registryDependencies": [ + "android" + ], + "files": [ + { + "path": "registry/example/android-demo-2.tsx", + "content": "import Android from \"@/registry/magicui/android\";\n\nexport default function AndroidDemo() {\n return (\n
    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/android-demo-3.json b/public/r/android-demo-3.json new file mode 100644 index 000000000..d33165a18 --- /dev/null +++ b/public/r/android-demo-3.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "android-demo-3", + "type": "registry:component", + "registryDependencies": [ + "android" + ], + "files": [ + { + "path": "registry/example/android-demo-3.tsx", + "content": "import Android from \"@/registry/magicui/android\";\n\nexport default function AndroidDemo() {\n return (\n
    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/android-demo.json b/public/r/android-demo.json new file mode 100644 index 000000000..17fbd377b --- /dev/null +++ b/public/r/android-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "android-demo", + "type": "registry:component", + "registryDependencies": [ + "android" + ], + "files": [ + { + "path": "registry/example/android-demo.tsx", + "content": "import Android from \"@/registry/magicui/android\";\n\nexport default function AndroidDemo() {\n return (\n
    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/android.json b/public/r/android.json similarity index 92% rename from public/r/styles/default/android.json rename to public/r/android.json index 43e4d9c23..43ed99035 100644 --- a/public/r/styles/default/android.json +++ b/public/r/android.json @@ -1,12 +1,14 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "android", - "type": "registry:ui", + "type": "registry:component", + "title": "Android", + "description": "A mockup of an Android device.", "files": [ { - "path": "magicui/android.tsx", + "path": "registry/magicui/android.tsx", "content": "import { SVGProps } from \"react\";\n\nexport interface AndroidProps extends SVGProps {\n width?: number;\n height?: number;\n src?: string;\n videoSrc?: string;\n}\n\nexport default function Android({\n width = 433,\n height = 882,\n src,\n videoSrc,\n ...props\n}: AndroidProps) {\n return (\n \n \n \n \n \n\n \n \n \n \n \n {src && (\n \n )}\n {videoSrc && (\n \n \n \n )}\n \n \n \n \n \n \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/animated-beam-bidirectional.json b/public/r/animated-beam-bidirectional.json new file mode 100644 index 000000000..aa0e87808 --- /dev/null +++ b/public/r/animated-beam-bidirectional.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "animated-beam-bidirectional", + "type": "registry:component", + "registryDependencies": [ + "animated-beam" + ], + "files": [ + { + "path": "registry/example/animated-beam-bidirectional.tsx", + "content": "\"use client\";\n\nimport React, { forwardRef, useRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { AnimatedBeam } from \"@/registry/magicui/animated-beam\";\n\nconst Circle = forwardRef<\n HTMLDivElement,\n { className?: string; children?: React.ReactNode }\n>(({ className, children }, ref) => {\n return (\n \n {children}\n

    \n );\n});\n\nCircle.displayName = \"Circle\";\n\nexport default function AnimatedBeamDemo() {\n const containerRef = useRef(null);\n const div1Ref = useRef(null);\n const div2Ref = useRef(null);\n\n return (\n \n
    \n
    \n \n \n \n \n \n \n
    \n
    \n\n \n \n
    \n );\n}\n\nconst Icons = {\n openai: () => (\n \n \n \n ),\n user: () => (\n \n \n \n \n ),\n};\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/animated-beam-demo.json b/public/r/animated-beam-demo.json new file mode 100644 index 000000000..51b99bd59 --- /dev/null +++ b/public/r/animated-beam-demo.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "animated-beam-demo", + "type": "registry:component", + "dependencies": [ + "@radix-ui/react-icons" + ], + "registryDependencies": [ + "animated-beam" + ], + "files": [ + { + "path": "registry/example/animated-beam-demo.tsx", + "content": "\"use client\";\n\nimport React, { forwardRef, useRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { AnimatedBeam } from \"@/registry/magicui/animated-beam\";\n\nconst Circle = forwardRef<\n HTMLDivElement,\n { className?: string; children?: React.ReactNode }\n>(({ className, children }, ref) => {\n return (\n \n {children}\n
    \n );\n});\n\nCircle.displayName = \"Circle\";\n\nexport default function AnimatedBeamDemo() {\n const containerRef = useRef(null);\n const div1Ref = useRef(null);\n const div2Ref = useRef(null);\n const div3Ref = useRef(null);\n const div4Ref = useRef(null);\n const div5Ref = useRef(null);\n const div6Ref = useRef(null);\n const div7Ref = useRef(null);\n\n return (\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}\n\nconst Icons = {\n notion: () => (\n \n \n \n \n ),\n openai: () => (\n \n \n \n ),\n googleDrive: () => (\n \n \n \n \n \n \n \n \n ),\n whatsapp: () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ),\n googleDocs: () => (\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 \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 \n \n \n \n \n \n ),\n zapier: () => (\n \n \n \n \n \n \n \n \n \n \n ),\n messenger: () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ),\n};\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/animated-beam-multiple-inputs.json b/public/r/animated-beam-multiple-inputs.json new file mode 100644 index 000000000..788bccbcb --- /dev/null +++ b/public/r/animated-beam-multiple-inputs.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "animated-beam-multiple-inputs", + "type": "registry:component", + "registryDependencies": [ + "animated-beam" + ], + "files": [ + { + "path": "registry/example/animated-beam-multiple-inputs.tsx", + "content": "\"use client\";\n\nimport React, { forwardRef, useRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { AnimatedBeam } from \"@/registry/magicui/animated-beam\";\n\nconst Circle = forwardRef<\n HTMLDivElement,\n { className?: string; children?: React.ReactNode }\n>(({ className, children }, ref) => {\n return (\n \n {children}\n \n );\n});\n\nCircle.displayName = \"Circle\";\n\nexport default function AnimatedBeamMultipleOutputDemo({\n className,\n}: {\n className?: string;\n}) {\n const containerRef = useRef(null);\n const div1Ref = useRef(null);\n const div2Ref = useRef(null);\n const div3Ref = useRef(null);\n const div4Ref = useRef(null);\n const div5Ref = useRef(null);\n const div6Ref = useRef(null);\n const div7Ref = useRef(null);\n\n return (\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}\n\nconst Icons = {\n notion: () => (\n \n \n \n \n ),\n openai: () => (\n \n \n \n ),\n googleDrive: () => (\n \n \n \n \n \n \n \n \n ),\n whatsapp: () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ),\n googleDocs: () => (\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 \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 \n \n \n \n \n \n ),\n zapier: () => (\n \n \n \n \n \n \n \n \n \n \n ),\n messenger: () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ),\n user: () => (\n \n \n \n \n ),\n};\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/animated-beam-multiple-outputs.json b/public/r/animated-beam-multiple-outputs.json new file mode 100644 index 000000000..37fd6ae7e --- /dev/null +++ b/public/r/animated-beam-multiple-outputs.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "animated-beam-multiple-outputs", + "type": "registry:component", + "registryDependencies": [ + "animated-beam" + ], + "files": [ + { + "path": "registry/example/animated-beam-multiple-outputs.tsx", + "content": "\"use client\";\n\nimport React, { forwardRef, useRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { AnimatedBeam } from \"@/registry/magicui/animated-beam\";\n\nconst Circle = forwardRef<\n HTMLDivElement,\n { className?: string; children?: React.ReactNode }\n>(({ className, children }, ref) => {\n return (\n \n {children}\n \n );\n});\n\nCircle.displayName = \"Circle\";\n\nexport default function AnimatedBeamMultipleOutputDemo({\n className,\n}: {\n className?: string;\n}) {\n const containerRef = useRef(null);\n const div1Ref = useRef(null);\n const div2Ref = useRef(null);\n const div3Ref = useRef(null);\n const div4Ref = useRef(null);\n const div5Ref = useRef(null);\n const div6Ref = useRef(null);\n const div7Ref = useRef(null);\n\n return (\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 {/* AnimatedBeams */}\n \n \n \n \n \n \n \n );\n}\n\nconst Icons = {\n notion: () => (\n \n \n \n \n ),\n openai: () => (\n \n \n \n ),\n googleDrive: () => (\n \n \n \n \n \n \n \n \n ),\n whatsapp: () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ),\n googleDocs: () => (\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 \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 \n \n \n \n \n \n ),\n zapier: () => (\n \n \n \n \n \n \n \n \n \n \n ),\n messenger: () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ),\n user: () => (\n \n \n \n \n ),\n};\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/animated-beam-unidirectional.json b/public/r/animated-beam-unidirectional.json new file mode 100644 index 000000000..bd963ddf6 --- /dev/null +++ b/public/r/animated-beam-unidirectional.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "animated-beam-unidirectional", + "type": "registry:component", + "registryDependencies": [ + "animated-beam" + ], + "files": [ + { + "path": "registry/example/animated-beam-unidirectional.tsx", + "content": "\"use client\";\n\nimport React, { forwardRef, useRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { AnimatedBeam } from \"@/registry/magicui/animated-beam\";\n\nconst Circle = forwardRef<\n HTMLDivElement,\n { className?: string; children?: React.ReactNode }\n>(({ className, children }, ref) => {\n return (\n \n {children}\n \n );\n});\n\nCircle.displayName = \"Circle\";\n\nexport default function AnimatedBeamDemo() {\n const containerRef = useRef(null);\n const div1Ref = useRef(null);\n const div2Ref = useRef(null);\n\n return (\n \n
    \n
    \n \n \n \n \n \n \n
    \n
    \n\n \n \n );\n}\n\nconst Icons = {\n openai: () => (\n \n \n \n ),\n user: () => (\n \n \n \n \n ),\n};\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/animated-beam.json b/public/r/animated-beam.json similarity index 93% rename from public/r/styles/default/animated-beam.json rename to public/r/animated-beam.json index 77eba3615..0dba1c2a6 100644 --- a/public/r/styles/default/animated-beam.json +++ b/public/r/animated-beam.json @@ -1,15 +1,17 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "animated-beam", - "type": "registry:ui", + "type": "registry:component", + "title": "Animated Beam", + "description": "An animated beam of light which travels along a path. Useful for showcasing the \"integration\" features of a website.", "dependencies": [ "motion" ], "files": [ { - "path": "magicui/animated-beam.tsx", + "path": "registry/magicui/animated-beam.tsx", "content": "\"use client\";\n\nimport { motion } from \"motion/react\";\nimport { RefObject, useEffect, useId, useState } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface AnimatedBeamProps {\n className?: string;\n containerRef: RefObject; // Container ref\n fromRef: RefObject;\n toRef: RefObject;\n curvature?: number;\n reverse?: boolean;\n pathColor?: string;\n pathWidth?: number;\n pathOpacity?: number;\n gradientStartColor?: string;\n gradientStopColor?: string;\n delay?: number;\n duration?: number;\n startXOffset?: number;\n startYOffset?: number;\n endXOffset?: number;\n endYOffset?: number;\n}\n\nexport const AnimatedBeam: React.FC = ({\n className,\n containerRef,\n fromRef,\n toRef,\n curvature = 0,\n reverse = false, // Include the reverse prop\n duration = Math.random() * 3 + 4,\n delay = 0,\n pathColor = \"gray\",\n pathWidth = 2,\n pathOpacity = 0.2,\n gradientStartColor = \"#ffaa40\",\n gradientStopColor = \"#9c40ff\",\n startXOffset = 0,\n startYOffset = 0,\n endXOffset = 0,\n endYOffset = 0,\n}) => {\n const id = useId();\n const [pathD, setPathD] = useState(\"\");\n const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 });\n\n // Calculate the gradient coordinates based on the reverse prop\n const gradientCoordinates = reverse\n ? {\n x1: [\"90%\", \"-10%\"],\n x2: [\"100%\", \"0%\"],\n y1: [\"0%\", \"0%\"],\n y2: [\"0%\", \"0%\"],\n }\n : {\n x1: [\"10%\", \"110%\"],\n x2: [\"0%\", \"100%\"],\n y1: [\"0%\", \"0%\"],\n y2: [\"0%\", \"0%\"],\n };\n\n useEffect(() => {\n const updatePath = () => {\n if (containerRef.current && fromRef.current && toRef.current) {\n const containerRect = containerRef.current.getBoundingClientRect();\n const rectA = fromRef.current.getBoundingClientRect();\n const rectB = toRef.current.getBoundingClientRect();\n\n const svgWidth = containerRect.width;\n const svgHeight = containerRect.height;\n setSvgDimensions({ width: svgWidth, height: svgHeight });\n\n const startX =\n rectA.left - containerRect.left + rectA.width / 2 + startXOffset;\n const startY =\n rectA.top - containerRect.top + rectA.height / 2 + startYOffset;\n const endX =\n rectB.left - containerRect.left + rectB.width / 2 + endXOffset;\n const endY =\n rectB.top - containerRect.top + rectB.height / 2 + endYOffset;\n\n const controlY = startY - curvature;\n const d = `M ${startX},${startY} Q ${\n (startX + endX) / 2\n },${controlY} ${endX},${endY}`;\n setPathD(d);\n }\n };\n\n // Initialize ResizeObserver\n const resizeObserver = new ResizeObserver((entries) => {\n // For all entries, recalculate the path\n for (let entry of entries) {\n updatePath();\n }\n });\n\n // Observe the container element\n if (containerRef.current) {\n resizeObserver.observe(containerRef.current);\n }\n\n // Call the updatePath initially to set the initial path\n updatePath();\n\n // Clean up the observer on component unmount\n return () => {\n resizeObserver.disconnect();\n };\n }, [\n containerRef,\n fromRef,\n toRef,\n curvature,\n startXOffset,\n startYOffset,\n endXOffset,\n endYOffset,\n ]);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/animated-circular-progress-bar-demo.json b/public/r/animated-circular-progress-bar-demo.json new file mode 100644 index 000000000..942d54197 --- /dev/null +++ b/public/r/animated-circular-progress-bar-demo.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "animated-circular-progress-bar-demo", + "type": "registry:component", + "files": [ + { + "path": "registry/example/animated-circular-progress-bar-demo.tsx", + "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\nimport { AnimatedCircularProgressBar } from \"@/registry/magicui/animated-circular-progress-bar\";\n\nexport default function AnimatedCircularProgressBarDemo() {\n const [value, setValue] = useState(0);\n\n useEffect(() => {\n const handleIncrement = (prev: number) => {\n if (prev === 100) {\n return 0;\n }\n return prev + 10;\n };\n setValue(handleIncrement);\n const interval = setInterval(() => setValue(handleIncrement), 2000);\n return () => clearInterval(interval);\n }, []);\n\n return (\n \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/animated-circular-progress-bar.json b/public/r/animated-circular-progress-bar.json similarity index 91% rename from public/r/styles/default/animated-circular-progress-bar.json rename to public/r/animated-circular-progress-bar.json index c9df30414..ae84ddce2 100644 --- a/public/r/styles/default/animated-circular-progress-bar.json +++ b/public/r/animated-circular-progress-bar.json @@ -1,12 +1,14 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "animated-circular-progress-bar", - "type": "registry:ui", + "type": "registry:component", + "title": "Animated Circular Progress Bar", + "description": "Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value.", "files": [ { - "path": "magicui/animated-circular-progress-bar.tsx", + "path": "registry/magicui/animated-circular-progress-bar.tsx", "content": "import { cn } from \"@/lib/utils\";\n\ninterface AnimatedCircularProgressBarProps {\n max: number;\n value: number;\n min: number;\n gaugePrimaryColor: string;\n gaugeSecondaryColor: string;\n className?: string;\n}\n\nexport function AnimatedCircularProgressBar({\n max = 100,\n min = 0,\n value = 0,\n gaugePrimaryColor,\n gaugeSecondaryColor,\n className,\n}: AnimatedCircularProgressBarProps) {\n const circumference = 2 * Math.PI * 45;\n const percentPx = circumference / 100;\n const currentPercent = Math.round(((value - min) / (max - min)) * 100);\n\n return (\n \n \n {currentPercent <= 90 && currentPercent >= 0 && (\n \n )}\n \n \n \n {currentPercent}\n \n \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/animated-gradient-text-demo.json b/public/r/animated-gradient-text-demo.json new file mode 100644 index 000000000..33e5356cd --- /dev/null +++ b/public/r/animated-gradient-text-demo.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "animated-gradient-text-demo", + "type": "registry:component", + "dependencies": [ + "lucide-react" + ], + "registryDependencies": [ + "animated-gradient-text" + ], + "files": [ + { + "path": "registry/example/animated-gradient-text-demo.tsx", + "content": "import { ChevronRight } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { AnimatedGradientText } from \"@/registry/magicui/animated-gradient-text\";\n\nexport default async function AnimatedGradientTextDemo() {\n return (\n
    \n \n 🎉
    {\" \"}\n \n Introducing Magic UI\n \n \n     \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/animated-gradient-text.json b/public/r/animated-gradient-text.json similarity index 82% rename from public/r/styles/default/animated-gradient-text.json rename to public/r/animated-gradient-text.json index d67090487..62c25a211 100644 --- a/public/r/styles/default/animated-gradient-text.json +++ b/public/r/animated-gradient-text.json @@ -1,12 +1,14 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "animated-gradient-text", - "type": "registry:ui", + "type": "registry:component", + "title": "Animated Gradient Text", + "description": "An animated gradient background which transitions between colors for text.", "files": [ { - "path": "magicui/animated-gradient-text.tsx", + "path": "registry/magicui/animated-gradient-text.tsx", "content": "import { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface AnimatedGradientTextProps\n extends ComponentPropsWithoutRef<\"div\"> {\n children: ReactNode;\n}\n\nexport function AnimatedGradientText({\n children,\n className,\n ...props\n}: AnimatedGradientTextProps) {\n return (\n \n \n\n {children}\n \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ], "tailwind": { diff --git a/public/r/animated-grid-pattern-demo.json b/public/r/animated-grid-pattern-demo.json new file mode 100644 index 000000000..16425faeb --- /dev/null +++ b/public/r/animated-grid-pattern-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "animated-grid-pattern-demo", + "type": "registry:component", + "registryDependencies": [ + "animated-grid-pattern" + ], + "files": [ + { + "path": "registry/example/animated-grid-pattern-demo.tsx", + "content": "import { cn } from \"@/lib/utils\";\nimport { AnimatedGridPattern } from \"@/registry/magicui/animated-grid-pattern\";\n\nexport default function AnimatedGridPatternDemo() {\n return (\n
    \n

    \n Animated Grid Pattern\n

    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/animated-grid-pattern.json b/public/r/animated-grid-pattern.json similarity index 92% rename from public/r/styles/default/animated-grid-pattern.json rename to public/r/animated-grid-pattern.json index 865bdb812..6d3fcb850 100644 --- a/public/r/styles/default/animated-grid-pattern.json +++ b/public/r/animated-grid-pattern.json @@ -1,15 +1,17 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "animated-grid-pattern", - "type": "registry:ui", + "type": "registry:component", + "title": "Animated Grid Pattern", + "description": "A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.", "dependencies": [ "motion" ], "files": [ { - "path": "magicui/animated-grid-pattern.tsx", + "path": "registry/magicui/animated-grid-pattern.tsx", "content": "\"use client\";\n\nimport { motion } from \"motion/react\";\nimport {\n ComponentPropsWithoutRef,\n useEffect,\n useId,\n useRef,\n useState,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface AnimatedGridPatternProps\n extends ComponentPropsWithoutRef<\"svg\"> {\n width?: number;\n height?: number;\n x?: number;\n y?: number;\n strokeDasharray?: any;\n numSquares?: number;\n maxOpacity?: number;\n duration?: number;\n repeatDelay?: number;\n}\n\nexport function AnimatedGridPattern({\n width = 40,\n height = 40,\n x = -1,\n y = -1,\n strokeDasharray = 0,\n numSquares = 50,\n className,\n maxOpacity = 0.5,\n duration = 4,\n repeatDelay = 0.5,\n ...props\n}: AnimatedGridPatternProps) {\n const id = useId();\n const containerRef = useRef(null);\n const [dimensions, setDimensions] = useState({ width: 0, height: 0 });\n const [squares, setSquares] = useState(() => generateSquares(numSquares));\n\n function getPos() {\n return [\n Math.floor((Math.random() * dimensions.width) / width),\n Math.floor((Math.random() * dimensions.height) / height),\n ];\n }\n\n // Adjust the generateSquares function to return objects with an id, x, and y\n function generateSquares(count: number) {\n return Array.from({ length: count }, (_, i) => ({\n id: i,\n pos: getPos(),\n }));\n }\n\n // Function to update a single square's position\n const updateSquarePosition = (id: number) => {\n setSquares((currentSquares) =>\n currentSquares.map((sq) =>\n sq.id === id\n ? {\n ...sq,\n pos: getPos(),\n }\n : sq,\n ),\n );\n };\n\n // Update squares to animate in\n useEffect(() => {\n if (dimensions.width && dimensions.height) {\n setSquares(generateSquares(numSquares));\n }\n }, [dimensions, numSquares]);\n\n // Resize observer to update container dimensions\n useEffect(() => {\n const resizeObserver = new ResizeObserver((entries) => {\n for (let entry of entries) {\n setDimensions({\n width: entry.contentRect.width,\n height: entry.contentRect.height,\n });\n }\n });\n\n if (containerRef.current) {\n resizeObserver.observe(containerRef.current);\n }\n\n return () => {\n if (containerRef.current) {\n resizeObserver.unobserve(containerRef.current);\n }\n };\n }, [containerRef]);\n\n return (\n \n \n \n \n \n \n \n \n {squares.map(({ pos: [x, y], id }, index) => (\n updateSquarePosition(id)}\n key={`${x}-${y}-${index}`}\n width={width - 1}\n height={height - 1}\n x={x * width + 1}\n y={y * height + 1}\n fill=\"currentColor\"\n strokeWidth=\"0\"\n />\n ))}\n \n \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/animated-list-demo.json b/public/r/animated-list-demo.json new file mode 100644 index 000000000..555ef19b8 --- /dev/null +++ b/public/r/animated-list-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "animated-list-demo", + "type": "registry:component", + "registryDependencies": [ + "animated-list" + ], + "files": [ + { + "path": "registry/example/animated-list-demo.tsx", + "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { AnimatedList } from \"@/registry/magicui/animated-list\";\n\ninterface Item {\n name: string;\n description: string;\n icon: string;\n color: string;\n time: string;\n}\n\nlet notifications = [\n {\n name: \"Payment received\",\n description: \"Magic UI\",\n time: \"15m ago\",\n\n icon: \"💸\",\n color: \"#00C9A7\",\n },\n {\n name: \"User signed up\",\n description: \"Magic UI\",\n time: \"10m ago\",\n icon: \"👤\",\n color: \"#FFB800\",\n },\n {\n name: \"New message\",\n description: \"Magic UI\",\n time: \"5m ago\",\n icon: \"💬\",\n color: \"#FF3D71\",\n },\n {\n name: \"New event\",\n description: \"Magic UI\",\n time: \"2m ago\",\n icon: \"🗞️\",\n color: \"#1E86FF\",\n },\n];\n\nnotifications = Array.from({ length: 10 }, () => notifications).flat();\n\nconst Notification = ({ name, description, icon, color, time }: Item) => {\n return (\n \n
    \n \n {icon}\n
    \n
    \n
    \n {name}\n ·\n {time}\n
    \n

    \n {description}\n

    \n
    \n \n \n );\n};\n\nexport default function AnimatedListDemo({\n className,\n}: {\n className?: string;\n}) {\n return (\n \n \n {notifications.map((item, idx) => (\n \n ))}\n \n \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/animated-list.json b/public/r/animated-list.json similarity index 85% rename from public/r/styles/default/animated-list.json rename to public/r/animated-list.json index b345672cc..c80773ded 100644 --- a/public/r/styles/default/animated-list.json +++ b/public/r/animated-list.json @@ -1,15 +1,17 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "animated-list", - "type": "registry:ui", + "type": "registry:component", + "title": "Animated List", + "description": "A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.", "dependencies": [ "motion" ], "files": [ { - "path": "magicui/animated-list.tsx", + "path": "registry/magicui/animated-list.tsx", "content": "\"use client\";\n\nimport { AnimatePresence, motion } from \"motion/react\";\nimport React, {\n ComponentPropsWithoutRef,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\n\nexport function AnimatedListItem({ children }: { children: React.ReactNode }) {\n const animations = {\n initial: { scale: 0, opacity: 0 },\n animate: { scale: 1, opacity: 1, originY: 0 },\n exit: { scale: 0, opacity: 0 },\n transition: { type: \"spring\", stiffness: 350, damping: 40 },\n };\n\n return (\n \n {children}\n \n );\n}\n\nexport interface AnimatedListProps extends ComponentPropsWithoutRef<\"div\"> {\n children: React.ReactNode;\n delay?: number;\n}\n\nexport const AnimatedList = React.memo(\n ({ children, className, delay = 1000, ...props }: AnimatedListProps) => {\n const [index, setIndex] = useState(0);\n const childrenArray = useMemo(\n () => React.Children.toArray(children),\n [children],\n );\n\n useEffect(() => {\n if (index < childrenArray.length - 1) {\n const timeout = setTimeout(() => {\n setIndex((prevIndex) => prevIndex + 1);\n }, delay);\n\n return () => clearTimeout(timeout);\n }\n }, [index, delay, childrenArray.length]);\n\n const itemsToShow = useMemo(() => {\n const result = childrenArray.slice(0, index + 1).reverse();\n return result;\n }, [index, childrenArray]);\n\n return (\n \n \n {itemsToShow.map((item) => (\n \n {item}\n \n ))}\n \n \n );\n },\n);\n\nAnimatedList.displayName = \"AnimatedList\";\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/animated-shiny-text-demo.json b/public/r/animated-shiny-text-demo.json new file mode 100644 index 000000000..a340749c4 --- /dev/null +++ b/public/r/animated-shiny-text-demo.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "animated-shiny-text-demo", + "type": "registry:component", + "dependencies": [ + "@radix-ui/react-icons" + ], + "registryDependencies": [ + "animated-shiny-text" + ], + "files": [ + { + "path": "registry/example/animated-shiny-text-demo.tsx", + "content": "import { ArrowRightIcon } from \"@radix-ui/react-icons\";\n\nimport { cn } from \"@/lib/utils\";\nimport { AnimatedShinyText } from \"@/registry/magicui/animated-shiny-text\";\n\nexport default function AnimatedShinyTextDemo() {\n return (\n
    \n \n \n ✨ Introducing Magic UI\n \n \n
    \n \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/animated-shiny-text.json b/public/r/animated-shiny-text.json similarity index 83% rename from public/r/styles/default/animated-shiny-text.json rename to public/r/animated-shiny-text.json index 84c5bcdbf..6aa8296d8 100644 --- a/public/r/styles/default/animated-shiny-text.json +++ b/public/r/animated-shiny-text.json @@ -1,12 +1,14 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "animated-shiny-text", - "type": "registry:ui", + "type": "registry:component", + "title": "Animated Shiny Text", + "description": "A light glare effect which pans across text making it appear as if it is shimmering.", "files": [ { - "path": "magicui/animated-shiny-text.tsx", + "path": "registry/magicui/animated-shiny-text.tsx", "content": "import { ComponentPropsWithoutRef, CSSProperties, FC } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface AnimatedShinyTextProps\n extends ComponentPropsWithoutRef<\"span\"> {\n shimmerWidth?: number;\n}\n\nexport const AnimatedShinyText: FC = ({\n children,\n className,\n shimmerWidth = 100,\n ...props\n}) => {\n return (\n \n {children}\n \n );\n};\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ], "tailwind": { diff --git a/public/r/animated-subscribe-button-demo.json b/public/r/animated-subscribe-button-demo.json new file mode 100644 index 000000000..2c68c7018 --- /dev/null +++ b/public/r/animated-subscribe-button-demo.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "animated-subscribe-button-demo", + "type": "registry:component", + "files": [ + { + "path": "registry/example/animated-subscribe-button-demo.tsx", + "content": "import { AnimatedSubscribeButton } from \"@/registry/magicui/animated-subscribe-button\";\nimport { CheckIcon, ChevronRightIcon } from \"lucide-react\";\n\nexport default function AnimatedSubscribeButtonDemo() {\n return (\n \n \n Follow\n \n \n \n \n Subscribed\n \n \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/animated-subscribe-button.json b/public/r/animated-subscribe-button.json similarity index 90% rename from public/r/styles/default/animated-subscribe-button.json rename to public/r/animated-subscribe-button.json index 063c83934..50baf5506 100644 --- a/public/r/styles/default/animated-subscribe-button.json +++ b/public/r/animated-subscribe-button.json @@ -1,15 +1,17 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "animated-subscribe-button", - "type": "registry:ui", + "type": "registry:component", + "title": "Animated Subscribe Button", + "description": "An animated subscribe button useful for showing a micro animation from intial to final result.", "dependencies": [ "motion" ], "files": [ { - "path": "magicui/animated-subscribe-button.tsx", + "path": "registry/magicui/animated-subscribe-button.tsx", "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { HTMLMotionProps } from \"motion/react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport React, { useState } from \"react\";\n\ninterface AnimatedSubscribeButtonProps\n extends Omit, \"ref\"> {\n subscribeStatus?: boolean;\n children: React.ReactNode;\n className?: string;\n}\n\nexport const AnimatedSubscribeButton = React.forwardRef<\n HTMLButtonElement,\n AnimatedSubscribeButtonProps\n>(\n (\n { subscribeStatus = false, onClick, className, children, ...props },\n ref,\n ) => {\n const [isSubscribed, setIsSubscribed] = useState(subscribeStatus);\n\n if (\n React.Children.count(children) !== 2 ||\n !React.Children.toArray(children).every(\n (child) => React.isValidElement(child) && child.type === \"span\",\n )\n ) {\n throw new Error(\n \"AnimatedSubscribeButton expects two children, both of which must be elements.\",\n );\n }\n\n const childrenArray = React.Children.toArray(children);\n const initialChild = childrenArray[0];\n const changeChild = childrenArray[1];\n\n return (\n \n {isSubscribed ? (\n ) => {\n setIsSubscribed(false);\n onClick?.(e);\n }}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n {...props}\n >\n \n {changeChild} {/* Use children for subscribed state */}\n \n \n ) : (\n {\n setIsSubscribed(true);\n onClick?.(e);\n }}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n {...props}\n >\n \n {initialChild} {/* Use children for unsubscribed state */}\n \n \n )}\n \n );\n },\n);\n\nAnimatedSubscribeButton.displayName = \"AnimatedSubscribeButton\";\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/aurora-text-demo.json b/public/r/aurora-text-demo.json new file mode 100644 index 000000000..340366013 --- /dev/null +++ b/public/r/aurora-text-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "aurora-text-demo", + "type": "registry:component", + "registryDependencies": [ + "aurora-text" + ], + "files": [ + { + "path": "registry/example/aurora-text-demo.tsx", + "content": "import { AuroraText } from \"@/registry/magicui/aurora-text\";\n\nexport default function AuroraTextDemo() {\n return (\n

    \n Ship beautiful\n

    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/aurora-text.json b/public/r/aurora-text.json similarity index 94% rename from public/r/styles/default/aurora-text.json rename to public/r/aurora-text.json index a0588adcf..ba15bdd9d 100644 --- a/public/r/styles/default/aurora-text.json +++ b/public/r/aurora-text.json @@ -1,15 +1,17 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "aurora-text", - "type": "registry:ui", + "type": "registry:component", + "title": "Aurora Text", + "description": "A beautiful aurora text effect", "dependencies": [ "motion" ], "files": [ { - "path": "magicui/aurora-text.tsx", + "path": "registry/magicui/aurora-text.tsx", "content": "import { cn } from \"@/lib/utils\";\nimport { motion, MotionProps } from \"motion/react\";\nimport React from \"react\";\n\ninterface AuroraTextProps\n extends Omit, keyof MotionProps> {\n className?: string;\n children: React.ReactNode;\n as?: React.ElementType;\n}\n\nexport function AuroraText({\n className,\n children,\n as: Component = \"span\",\n ...props\n}: AuroraTextProps) {\n const MotionComponent = motion.create(Component);\n\n return (\n \n {children}\n \n \n \n \n \n \n \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ], "tailwind": { diff --git a/public/r/avatar-circles-demo.json b/public/r/avatar-circles-demo.json new file mode 100644 index 000000000..017ecf852 --- /dev/null +++ b/public/r/avatar-circles-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "avatar-circles-demo", + "type": "registry:component", + "registryDependencies": [ + "avatar-circles" + ], + "files": [ + { + "path": "registry/example/avatar-circles-demo.tsx", + "content": "import { AvatarCircles } from \"@/registry/magicui/avatar-circles\";\n\nconst avatars = [\n {\n imageUrl: \"https://avatars.githubusercontent.com/u/16860528\",\n profileUrl: \"https://github.com/dillionverma\",\n },\n {\n imageUrl: \"https://avatars.githubusercontent.com/u/20110627\",\n profileUrl: \"https://github.com/tomonarifeehan\",\n },\n {\n imageUrl: \"https://avatars.githubusercontent.com/u/106103625\",\n profileUrl: \"https://github.com/BankkRoll\",\n },\n {\n imageUrl: \"https://avatars.githubusercontent.com/u/59228569\",\n profileUrl: \"https://github.com/safethecode\",\n },\n {\n imageUrl: \"https://avatars.githubusercontent.com/u/59442788\",\n profileUrl: \"https://github.com/sanjay-mali\",\n },\n {\n imageUrl: \"https://avatars.githubusercontent.com/u/89768406\",\n profileUrl: \"https://github.com/itsarghyadas\",\n },\n];\n\nexport default function AvatarCirclesDemo() {\n return ;\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/avatar-circles.json b/public/r/avatar-circles.json new file mode 100644 index 000000000..2c2c86707 --- /dev/null +++ b/public/r/avatar-circles.json @@ -0,0 +1,14 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "avatar-circles", + "type": "registry:component", + "title": "Avatar Circles", + "description": "Overlapping circles of avatars.", + "files": [ + { + "path": "registry/magicui/avatar-circles.tsx", + "content": "/* eslint-disable @next/next/no-img-element */\n\"use client\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface Avatar {\n imageUrl: string;\n profileUrl: string;\n}\ninterface AvatarCirclesProps {\n className?: string;\n numPeople?: number;\n avatarUrls: Avatar[];\n}\n\nexport const AvatarCircles = ({\n numPeople,\n className,\n avatarUrls,\n}: AvatarCirclesProps) => {\n return (\n
    \n {avatarUrls.map((url, index) => (\n \n \n \n ))}\n {(numPeople ?? 0) > 0 && (\n \n +{numPeople}\n \n )}\n
    \n );\n};\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/bento-demo-vertical.json b/public/r/bento-demo-vertical.json new file mode 100644 index 000000000..9f7f0b854 --- /dev/null +++ b/public/r/bento-demo-vertical.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "bento-demo-vertical", + "type": "registry:component", + "dependencies": [ + "@radix-ui/react-icons" + ], + "registryDependencies": [ + "bento-grid" + ], + "files": [ + { + "path": "registry/example/bento-demo-vertical.tsx", + "content": "import {\n BellIcon,\n CalendarIcon,\n FileTextIcon,\n GlobeIcon,\n InputIcon,\n} from \"@radix-ui/react-icons\";\n\nimport { BentoCard, BentoGrid } from \"@/registry/magicui/bento-grid\";\n\nconst features = [\n {\n Icon: FileTextIcon,\n name: \"Save your files\",\n description: \"We automatically save your files as you type.\",\n href: \"/\",\n cta: \"Learn more\",\n background: ,\n className: \"lg:row-start-1 lg:row-end-4 lg:col-start-2 lg:col-end-3\",\n },\n {\n Icon: InputIcon,\n name: \"Full text search\",\n description: \"Search through all your files in one place.\",\n href: \"/\",\n cta: \"Learn more\",\n background: ,\n className: \"lg:col-start-1 lg:col-end-2 lg:row-start-1 lg:row-end-3\",\n },\n {\n Icon: GlobeIcon,\n name: \"Multilingual\",\n description: \"Supports 100+ languages and counting.\",\n href: \"/\",\n cta: \"Learn more\",\n background: ,\n className: \"lg:col-start-1 lg:col-end-2 lg:row-start-3 lg:row-end-4\",\n },\n {\n Icon: CalendarIcon,\n name: \"Calendar\",\n description: \"Use the calendar to filter your files by date.\",\n href: \"/\",\n cta: \"Learn more\",\n background: ,\n className: \"lg:col-start-3 lg:col-end-3 lg:row-start-1 lg:row-end-2\",\n },\n {\n Icon: BellIcon,\n name: \"Notifications\",\n description:\n \"Get notified when someone shares a file or mentions you in a comment.\",\n href: \"/\",\n cta: \"Learn more\",\n background: ,\n className: \"lg:col-start-3 lg:col-end-3 lg:row-start-2 lg:row-end-4\",\n },\n];\n\nexport default function BentoDemo() {\n return (\n \n {features.map((feature) => (\n \n ))}\n \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/bento-demo.json b/public/r/bento-demo.json new file mode 100644 index 000000000..c57fc2bdd --- /dev/null +++ b/public/r/bento-demo.json @@ -0,0 +1,23 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "bento-demo", + "type": "registry:component", + "dependencies": [ + "@radix-ui/react-icons" + ], + "registryDependencies": [ + "bento-grid", + "marquee", + "animated-list-demo", + "animated-beam-multiple-outputs", + "shadcn:command", + "shadcn:calendar" + ], + "files": [ + { + "path": "registry/example/bento-demo.tsx", + "content": "import { CalendarIcon, FileTextIcon } from \"@radix-ui/react-icons\";\nimport { BellIcon, Share2Icon } from \"lucide-react\";\n\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { cn } from \"@/lib/utils\";\nimport AnimatedBeamMultipleOutputDemo from \"@/registry/example/animated-beam-multiple-outputs\";\nimport AnimatedListDemo from \"@/registry/example/animated-list-demo\";\nimport { BentoCard, BentoGrid } from \"@/registry/magicui/bento-grid\";\nimport { Marquee } from \"@/registry/magicui/marquee\";\n\nconst files = [\n {\n name: \"bitcoin.pdf\",\n body: \"Bitcoin is a cryptocurrency invented in 2008 by an unknown person or group of people using the name Satoshi Nakamoto.\",\n },\n {\n name: \"finances.xlsx\",\n body: \"A spreadsheet or worksheet is a file made of rows and columns that help sort data, arrange data easily, and calculate numerical data.\",\n },\n {\n name: \"logo.svg\",\n body: \"Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation.\",\n },\n {\n name: \"keys.gpg\",\n body: \"GPG keys are used to encrypt and decrypt email, files, directories, and whole disk partitions and to authenticate messages.\",\n },\n {\n name: \"seed.txt\",\n body: \"A seed phrase, seed recovery phrase or backup seed phrase is a list of words which store all the information needed to recover Bitcoin funds on-chain.\",\n },\n];\n\nconst features = [\n {\n Icon: FileTextIcon,\n name: \"Save your files\",\n description: \"We automatically save your files as you type.\",\n href: \"#\",\n cta: \"Learn more\",\n className: \"col-span-3 lg:col-span-1\",\n background: (\n \n {files.map((f, idx) => (\n \n
    \n
    \n
    \n {f.name}\n
    \n
    \n
    \n
    {f.body}
    \n \n ))}\n \n ),\n },\n {\n Icon: BellIcon,\n name: \"Notifications\",\n description: \"Get notified when something happens.\",\n href: \"#\",\n cta: \"Learn more\",\n className: \"col-span-3 lg:col-span-2\",\n background: (\n \n ),\n },\n {\n Icon: Share2Icon,\n name: \"Integrations\",\n description: \"Supports 100+ integrations and counting.\",\n href: \"#\",\n cta: \"Learn more\",\n className: \"col-span-3 lg:col-span-2\",\n background: (\n \n ),\n },\n {\n Icon: CalendarIcon,\n name: \"Calendar\",\n description: \"Use the calendar to filter your files by date.\",\n className: \"col-span-3 lg:col-span-1\",\n href: \"#\",\n cta: \"Learn more\",\n background: (\n \n ),\n },\n];\n\nexport default function BentoDemo() {\n return (\n \n {features.map((feature, idx) => (\n \n ))}\n \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/bento-grid.json b/public/r/bento-grid.json similarity index 89% rename from public/r/styles/default/bento-grid.json rename to public/r/bento-grid.json index 985bea33c..b90d11ca3 100644 --- a/public/r/styles/default/bento-grid.json +++ b/public/r/bento-grid.json @@ -1,6 +1,9 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "bento-grid", - "type": "registry:ui", + "type": "registry:component", + "title": "Bento Grid", + "description": "Bento grid is a layout used to showcase the features of a product in a simple and elegant way.", "dependencies": [ "@radix-ui/react-icons" ], @@ -9,10 +12,9 @@ ], "files": [ { - "path": "magicui/bento-grid.tsx", + "path": "registry/magicui/bento-grid.tsx", "content": "import { ArrowRightIcon } from \"@radix-ui/react-icons\";\nimport { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\ninterface BentoGridProps extends ComponentPropsWithoutRef<\"div\"> {\n children: ReactNode;\n className?: string;\n}\n\ninterface BentoCardProps extends ComponentPropsWithoutRef<\"div\"> {\n name: string;\n className: string;\n background: ReactNode;\n Icon: React.ElementType;\n description: string;\n href: string;\n cta: string;\n}\n\nconst BentoGrid = ({ children, className, ...props }: BentoGridProps) => {\n return (\n \n {children}\n \n );\n};\n\nconst BentoCard = ({\n name,\n className,\n background,\n Icon,\n description,\n href,\n cta,\n ...props\n}: BentoCardProps) => (\n \n
    {background}
    \n
    \n \n

    \n {name}\n

    \n

    {description}

    \n
    \n\n \n \n \n
    \n
    \n);\n\nexport { BentoCard, BentoGrid };\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/blur-fade-demo.json b/public/r/blur-fade-demo.json new file mode 100644 index 000000000..946062a80 --- /dev/null +++ b/public/r/blur-fade-demo.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "blur-fade-demo", + "type": "registry:component", + "files": [ + { + "path": "registry/example/blur-fade-demo.tsx", + "content": "/* eslint-disable @next/next/no-img-element */\nimport { BlurFade } from \"@/registry/magicui/blur-fade\";\n\nconst images = Array.from({ length: 9 }, (_, i) => {\n const isLandscape = i % 2 === 0;\n const width = isLandscape ? 800 : 600;\n const height = isLandscape ? 600 : 800;\n return `https://picsum.photos/seed/${i + 1}/${width}/${height}`;\n});\n\nexport default function BlurFadeDemo() {\n return (\n
    \n
    \n {images.map((imageUrl, idx) => (\n \n \n \n ))}\n
    \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/blur-fade-text-demo.json b/public/r/blur-fade-text-demo.json new file mode 100644 index 000000000..02a1db2df --- /dev/null +++ b/public/r/blur-fade-text-demo.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "blur-fade-text-demo", + "type": "registry:component", + "files": [ + { + "path": "registry/example/blur-fade-text-demo.tsx", + "content": "import { BlurFade } from \"@/registry/magicui/blur-fade\";\n\nexport default function BlurFadeTextDemo() {\n return (\n
    \n \n

    \n Hello World 👋\n

    \n     \n \n \n Nice to meet you\n \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/blur-fade.json b/public/r/blur-fade.json similarity index 87% rename from public/r/styles/default/blur-fade.json rename to public/r/blur-fade.json index 2ffc1abc7..d58c4e1dc 100644 --- a/public/r/styles/default/blur-fade.json +++ b/public/r/blur-fade.json @@ -1,15 +1,17 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "blur-fade", - "type": "registry:ui", + "type": "registry:component", + "title": "Blur Fade", + "description": "Blur fade in and out animation. Used to smoothly fade in and out content.", "dependencies": [ "motion" ], "files": [ { - "path": "magicui/blur-fade.tsx", + "path": "registry/magicui/blur-fade.tsx", "content": "\"use client\";\n\nimport {\n AnimatePresence,\n motion,\n useInView,\n UseInViewOptions,\n Variants,\n} from \"motion/react\";\nimport { useRef } from \"react\";\n\ntype MarginType = UseInViewOptions[\"margin\"];\n\ninterface BlurFadeProps {\n children: React.ReactNode;\n className?: string;\n variant?: {\n hidden: { y: number };\n visible: { y: number };\n };\n duration?: number;\n delay?: number;\n offset?: number;\n direction?: \"up\" | \"down\" | \"left\" | \"right\";\n inView?: boolean;\n inViewMargin?: MarginType;\n blur?: string;\n}\n\nexport function BlurFade({\n children,\n className,\n variant,\n duration = 0.4,\n delay = 0,\n offset = 6,\n direction = \"down\",\n inView = false,\n inViewMargin = \"-50px\",\n blur = \"6px\",\n}: BlurFadeProps) {\n const ref = useRef(null);\n const inViewResult = useInView(ref, { once: true, margin: inViewMargin });\n const isInView = !inView || inViewResult;\n const defaultVariants: Variants = {\n hidden: {\n [direction === \"left\" || direction === \"right\" ? \"x\" : \"y\"]:\n direction === \"right\" || direction === \"down\" ? -offset : offset,\n opacity: 0,\n filter: `blur(${blur})`,\n },\n visible: {\n [direction === \"left\" || direction === \"right\" ? \"x\" : \"y\"]: 0,\n opacity: 1,\n filter: `blur(0px)`,\n },\n };\n const combinedVariants = variant || defaultVariants;\n return (\n \n \n {children}\n \n \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/border-beam-demo.json b/public/r/border-beam-demo.json new file mode 100644 index 000000000..5eb36c133 --- /dev/null +++ b/public/r/border-beam-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "border-beam-demo", + "type": "registry:component", + "registryDependencies": [ + "border-beam" + ], + "files": [ + { + "path": "registry/example/border-beam-demo.tsx", + "content": "import { BorderBeam } from \"@/registry/magicui/border-beam\";\n\nexport default function BorderBeamDemo() {\n return (\n
    \n \n Border Beam\n \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/border-beam.json b/public/r/border-beam.json similarity index 87% rename from public/r/styles/default/border-beam.json rename to public/r/border-beam.json index af7b73664..d60c014d6 100644 --- a/public/r/styles/default/border-beam.json +++ b/public/r/border-beam.json @@ -1,12 +1,14 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "border-beam", - "type": "registry:ui", + "type": "registry:component", + "title": "Border Beam", + "description": "An animated beam of light which travels along the border of its container.", "files": [ { - "path": "magicui/border-beam.tsx", + "path": "registry/magicui/border-beam.tsx", "content": "import { cn } from \"@/lib/utils\";\nimport { ComponentPropsWithoutRef } from \"react\";\n\ninterface BorderBeamProps extends ComponentPropsWithoutRef<\"div\"> {\n size?: number;\n duration?: number;\n borderWidth?: number;\n anchor?: number;\n colorFrom?: string;\n colorTo?: string;\n delay?: number;\n}\n\nexport const BorderBeam = ({\n className,\n size = 200,\n duration = 15,\n anchor = 90,\n borderWidth = 1.5,\n colorFrom = \"#ffaa40\",\n colorTo = \"#9c40ff\",\n delay = 0,\n ...props\n}: BorderBeamProps) => {\n return (\n \n );\n};\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ], "tailwind": { diff --git a/public/r/box-reveal-demo.json b/public/r/box-reveal-demo.json new file mode 100644 index 000000000..2de498485 --- /dev/null +++ b/public/r/box-reveal-demo.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "box-reveal-demo", + "type": "registry:component", + "files": [ + { + "path": "registry/example/box-reveal-demo.tsx", + "content": "import { Button } from \"@/components/ui/button\";\nimport { BoxReveal } from \"@/registry/magicui/box-reveal\";\n\nexport default function BoxRevealDemo() {\n return (\n
    \n \n

    \n Magic UI.\n

    \n     \n\n \n

    \n UI library for{\" \"}\n Design Engineers\n

    \n     \n\n \n
    \n

    \n -> 20+ free and open-source animated components built with\n React,\n Typescript,\n Tailwind CSS,\n and\n Framer Motion\n .
    \n -> 100% open-source, and customizable.
    \n

    \n
    \n     \n\n \n \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/box-reveal.json b/public/r/box-reveal.json similarity index 86% rename from public/r/styles/default/box-reveal.json rename to public/r/box-reveal.json index 255fcbbf5..2ba1c46ad 100644 --- a/public/r/styles/default/box-reveal.json +++ b/public/r/box-reveal.json @@ -1,15 +1,17 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "box-reveal", - "type": "registry:ui", + "type": "registry:component", + "title": "Box Reveal Animation", + "description": "Sliding box animation that reveals text behind it.", "dependencies": [ "motion" ], "files": [ { - "path": "magicui/box-reveal.tsx", + "path": "registry/magicui/box-reveal.tsx", "content": "\"use client\";\n\nimport { motion, useAnimation, useInView } from \"motion/react\";\nimport { useEffect, useRef } from \"react\";\n\ninterface BoxRevealProps {\n children: JSX.Element;\n width?: \"fit-content\" | \"100%\";\n boxColor?: string;\n duration?: number;\n}\n\nexport const BoxReveal = ({\n children,\n width = \"fit-content\",\n boxColor = \"#5046e6\",\n duration,\n}: BoxRevealProps) => {\n const mainControls = useAnimation();\n const slideControls = useAnimation();\n\n const ref = useRef(null);\n const isInView = useInView(ref, { once: true });\n\n useEffect(() => {\n if (isInView) {\n slideControls.start(\"visible\");\n mainControls.start(\"visible\");\n } else {\n slideControls.start(\"hidden\");\n mainControls.start(\"hidden\");\n }\n }, [isInView, mainControls, slideControls]);\n\n return (\n
    \n \n {children}\n \n\n \n
    \n );\n};\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/client-tweet-card.json b/public/r/client-tweet-card.json new file mode 100644 index 000000000..eea433949 --- /dev/null +++ b/public/r/client-tweet-card.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "client-tweet-card", + "type": "registry:component", + "title": "Client Tweet Card", + "description": "A client-side version of the tweet card that displays a tweet with the author's name, handle, and profile picture.", + "dependencies": [ + "react-tweet" + ], + "files": [ + { + "path": "registry/magicui/client-tweet-card.tsx", + "content": "\"use client\";\n\nimport { TweetProps, useTweet } from \"react-tweet\";\n\nimport {\n MagicTweet,\n TweetNotFound,\n TweetSkeleton,\n} from \"@/registry/magicui/tweet-card\";\n\nexport const ClientTweetCard = ({\n id,\n apiUrl,\n fallback = ,\n components,\n fetchOptions,\n onError,\n ...props\n}: TweetProps & { className?: string }) => {\n const { data, error, isLoading } = useTweet(id, apiUrl, fetchOptions);\n\n if (isLoading) return fallback;\n if (error || !data) {\n const NotFound = components?.TweetNotFound || TweetNotFound;\n return ;\n }\n\n return ;\n};\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/code-comparison-demo.json b/public/r/code-comparison-demo.json new file mode 100644 index 000000000..c9ec1bb14 --- /dev/null +++ b/public/r/code-comparison-demo.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "code-comparison-demo", + "type": "registry:component", + "files": [ + { + "path": "registry/example/code-comparison-demo.tsx", + "content": "import CodeComparison from \"@/registry/magicui/code-comparison\";\n\nconst beforeCode = `import { NextRequest } from 'next/server';\n\nexport const middleware = async (req: NextRequest) => {\n let user = undefined;\n let team = undefined;\n const token = req.headers.get('token');\n\n if(req.nextUrl.pathname.startsWith('/auth')) {\n user = await getUserByToken(token);\n\n if(!user) {\n return NextResponse.redirect('/login');\n }\n }\n\n if(req.nextUrl.pathname.startsWith('/team')) {\n user = await getUserByToken(token);\n\n if(!user) {\n return NextResponse.redirect('/login');\n }\n\n const slug = req.nextUrl.query.slug;\n team = await getTeamBySlug(slug);\n\n if(!team) {\n return NextResponse.redirect('/');\n }\n }\n\n return NextResponse.next();\n}\n\nexport const config = {\n matcher: ['/((?!_next/|_static|_vercel|[\\\\w-]+\\\\.\\\\w+).*)'],\n};`;\n\nconst afterCode = `import { createMiddleware, type MiddlewareFunctionProps } from '@app/(auth)/auth/_middleware';\nimport { auth } from '@app/(auth)/auth/_middleware';\nimport { team } from '@app/(team)/team/_middleware';\n\nconst middlewares = {\n '/auth{/:path?}': auth,\n '/team{/:slug?}': [ auth, team ],\n};\n\nexport const middleware = createMiddleware(middlewares);\n\nexport const config = {\n matcher: ['/((?!_next/|_static|_vercel|[\\\\w-]+\\\\.\\\\w+).*)'],\n};`;\n\nexport default function CodeComparisonDemo() {\n return (\n \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/code-comparison.json b/public/r/code-comparison.json similarity index 92% rename from public/r/styles/default/code-comparison.json rename to public/r/code-comparison.json index c7f7618f0..cb11483f0 100644 --- a/public/r/styles/default/code-comparison.json +++ b/public/r/code-comparison.json @@ -1,16 +1,18 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "code-comparison", - "type": "registry:ui", + "type": "registry:component", + "title": "Code Comparison", + "description": "A component which compares two code snippets.", "dependencies": [ "shiki", "next-themes" ], "files": [ { - "path": "magicui/code-comparison.tsx", + "path": "registry/magicui/code-comparison.tsx", "content": "\"use client\";\n\nimport { FileIcon } from \"lucide-react\";\nimport { useTheme } from \"next-themes\";\nimport { useEffect, useState } from \"react\";\nimport { codeToHtml } from \"shiki\";\n\ninterface CodeComparisonProps {\n beforeCode: string;\n afterCode: string;\n language: string;\n filename: string;\n lightTheme: string;\n darkTheme: string;\n}\n\nexport default function CodeComparison({\n beforeCode,\n afterCode,\n language,\n filename,\n lightTheme,\n darkTheme,\n}: CodeComparisonProps) {\n const { theme, systemTheme } = useTheme();\n const [highlightedBefore, setHighlightedBefore] = useState(\"\");\n const [highlightedAfter, setHighlightedAfter] = useState(\"\");\n\n useEffect(() => {\n const currentTheme = theme === \"system\" ? systemTheme : theme;\n const selectedTheme = currentTheme === \"dark\" ? darkTheme : lightTheme;\n\n async function highlightCode() {\n const before = await codeToHtml(beforeCode, {\n lang: language,\n theme: selectedTheme,\n });\n const after = await codeToHtml(afterCode, {\n lang: language,\n theme: selectedTheme,\n });\n setHighlightedBefore(before);\n setHighlightedAfter(after);\n }\n\n highlightCode();\n }, [\n theme,\n systemTheme,\n beforeCode,\n afterCode,\n language,\n lightTheme,\n darkTheme,\n ]);\n\n const renderCode = (code: string, highlighted: string) => {\n if (highlighted) {\n return (\n pre]:h-full [&>pre]:!bg-transparent [&>pre]:p-4 [&_code]:break-all\"\n dangerouslySetInnerHTML={{ __html: highlighted }}\n />\n );\n } else {\n return (\n 
    \n          {code}\n
    \n );\n }\n };\n return (\n
    \n
    \n
    \n
    \n
    \n \n {filename}\n before\n
    \n {renderCode(beforeCode, highlightedBefore)}\n
    \n
    \n
    \n \n {filename}\n after\n
    \n {renderCode(afterCode, highlightedAfter)}\n
    \n
    \n
    \n VS\n
    \n
    \n
    \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/colors/gray.json b/public/r/colors/gray.json deleted file mode 100644 index 9cba353ed..000000000 --- a/public/r/colors/gray.json +++ /dev/null @@ -1,102 +0,0 @@ -{ - "inlineColors": { - "light": { - "background": "white", - "foreground": "gray-950", - "card": "white", - "card-foreground": "gray-950", - "popover": "white", - "popover-foreground": "gray-950", - "primary": "gray-900", - "primary-foreground": "gray-50", - "secondary": "gray-100", - "secondary-foreground": "gray-900", - "muted": "gray-100", - "muted-foreground": "gray-500", - "accent": "gray-100", - "accent-foreground": "gray-900", - "destructive": "red-500", - "destructive-foreground": "gray-50", - "border": "gray-200", - "input": "gray-200", - "ring": "gray-950" - }, - "dark": { - "background": "gray-950", - "foreground": "gray-50", - "card": "gray-950", - "card-foreground": "gray-50", - "popover": "gray-950", - "popover-foreground": "gray-50", - "primary": "gray-50", - "primary-foreground": "gray-900", - "secondary": "gray-800", - "secondary-foreground": "gray-50", - "muted": "gray-800", - "muted-foreground": "gray-400", - "accent": "gray-800", - "accent-foreground": "gray-50", - "destructive": "red-900", - "destructive-foreground": "gray-50", - "border": "gray-800", - "input": "gray-800", - "ring": "gray-300" - } - }, - "cssVars": { - "light": { - "background": "0 0% 100%", - "foreground": "224 71.4% 4.1%", - "card": "0 0% 100%", - "card-foreground": "224 71.4% 4.1%", - "popover": "0 0% 100%", - "popover-foreground": "224 71.4% 4.1%", - "primary": "220.9 39.3% 11%", - "primary-foreground": "210 20% 98%", - "secondary": "220 14.3% 95.9%", - "secondary-foreground": "220.9 39.3% 11%", - "muted": "220 14.3% 95.9%", - "muted-foreground": "220 8.9% 46.1%", - "accent": "220 14.3% 95.9%", - "accent-foreground": "220.9 39.3% 11%", - "destructive": "0 84.2% 60.2%", - "destructive-foreground": "210 20% 98%", - "border": "220 13% 91%", - "input": "220 13% 91%", - "ring": "224 71.4% 4.1%", - "chart-1": "12 76% 61%", - "chart-2": "173 58% 39%", - "chart-3": "197 37% 24%", - "chart-4": "43 74% 66%", - "chart-5": "27 87% 67%" - }, - "dark": { - "background": "224 71.4% 4.1%", - "foreground": "210 20% 98%", - "card": "224 71.4% 4.1%", - "card-foreground": "210 20% 98%", - "popover": "224 71.4% 4.1%", - "popover-foreground": "210 20% 98%", - "primary": "210 20% 98%", - "primary-foreground": "220.9 39.3% 11%", - "secondary": "215 27.9% 16.9%", - "secondary-foreground": "210 20% 98%", - "muted": "215 27.9% 16.9%", - "muted-foreground": "217.9 10.6% 64.9%", - "accent": "215 27.9% 16.9%", - "accent-foreground": "210 20% 98%", - "destructive": "0 62.8% 30.6%", - "destructive-foreground": "210 20% 98%", - "border": "215 27.9% 16.9%", - "input": "215 27.9% 16.9%", - "ring": "216 12.2% 83.9%", - "chart-1": "220 70% 50%", - "chart-2": "160 60% 45%", - "chart-3": "30 80% 55%", - "chart-4": "280 65% 60%", - "chart-5": "340 75% 55%" - } - }, - "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n ", - "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 224 71.4% 4.1%;\n --card: 0 0% 100%;\n --card-foreground: 224 71.4% 4.1%;\n --popover: 0 0% 100%;\n --popover-foreground: 224 71.4% 4.1%;\n --primary: 220.9 39.3% 11%;\n --primary-foreground: 210 20% 98%;\n --secondary: 220 14.3% 95.9%;\n --secondary-foreground: 220.9 39.3% 11%;\n --muted: 220 14.3% 95.9%;\n --muted-foreground: 220 8.9% 46.1%;\n --accent: 220 14.3% 95.9%;\n --accent-foreground: 220.9 39.3% 11%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 20% 98%;\n --border: 220 13% 91%;\n --input: 220 13% 91%;\n --ring: 224 71.4% 4.1%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n\n .dark {\n --background: 224 71.4% 4.1%;\n --foreground: 210 20% 98%;\n --card: 224 71.4% 4.1%;\n --card-foreground: 210 20% 98%;\n --popover: 224 71.4% 4.1%;\n --popover-foreground: 210 20% 98%;\n --primary: 210 20% 98%;\n --primary-foreground: 220.9 39.3% 11%;\n --secondary: 215 27.9% 16.9%;\n --secondary-foreground: 210 20% 98%;\n --muted: 215 27.9% 16.9%;\n --muted-foreground: 217.9 10.6% 64.9%;\n --accent: 215 27.9% 16.9%;\n --accent-foreground: 210 20% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 20% 98%;\n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n --ring: 216 12.2% 83.9%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" -} \ No newline at end of file diff --git a/public/r/colors/index.json b/public/r/colors/index.json deleted file mode 100644 index c25158efb..000000000 --- a/public/r/colors/index.json +++ /dev/null @@ -1,1999 +0,0 @@ -{ - "inherit": "inherit", - "current": "currentColor", - "transparent": "transparent", - "black": { - "hex": "#000000", - "rgb": "rgb(0,0,0)", - "hsl": "hsl(0,0%,0%)", - "rgbChannel": "0 0 0", - "hslChannel": "0 0% 0%" - }, - "white": { - "hex": "#ffffff", - "rgb": "rgb(255,255,255)", - "hsl": "hsl(0,0%,100%)", - "rgbChannel": "255 255 255", - "hslChannel": "0 0% 100%" - }, - "slate": [ - { - "scale": 50, - "hex": "#f8fafc", - "rgb": "rgb(248,250,252)", - "hsl": "hsl(210,40%,98%)", - "rgbChannel": "248 250 252", - "hslChannel": "210 40% 98%" - }, - { - "scale": 100, - "hex": "#f1f5f9", - "rgb": "rgb(241,245,249)", - "hsl": "hsl(210,40%,96.1%)", - "rgbChannel": "241 245 249", - "hslChannel": "210 40% 96.1%" - }, - { - "scale": 200, - "hex": "#e2e8f0", - "rgb": "rgb(226,232,240)", - "hsl": "hsl(214.3,31.8%,91.4%)", - "rgbChannel": "226 232 240", - "hslChannel": "214.3 31.8% 91.4%" - }, - { - "scale": 300, - "hex": "#cbd5e1", - "rgb": "rgb(203,213,225)", - "hsl": "hsl(212.7,26.8%,83.9%)", - "rgbChannel": "203 213 225", - "hslChannel": "212.7 26.8% 83.9%" - }, - { - "scale": 400, - "hex": "#94a3b8", - "rgb": "rgb(148,163,184)", - "hsl": "hsl(215,20.2%,65.1%)", - "rgbChannel": "148 163 184", - "hslChannel": "215 20.2% 65.1%" - }, - { - "scale": 500, - "hex": "#64748b", - "rgb": "rgb(100,116,139)", - "hsl": "hsl(215.4,16.3%,46.9%)", - "rgbChannel": "100 116 139", - "hslChannel": "215.4 16.3% 46.9%" - }, - { - "scale": 600, - "hex": "#475569", - "rgb": "rgb(71,85,105)", - "hsl": "hsl(215.3,19.3%,34.5%)", - "rgbChannel": "71 85 105", - "hslChannel": "215.3 19.3% 34.5%" - }, - { - "scale": 700, - "hex": "#334155", - "rgb": "rgb(51,65,85)", - "hsl": "hsl(215.3,25%,26.7%)", - "rgbChannel": "51 65 85", - "hslChannel": "215.3 25% 26.7%" - }, - { - "scale": 800, - "hex": "#1e293b", - "rgb": "rgb(30,41,59)", - "hsl": "hsl(217.2,32.6%,17.5%)", - "rgbChannel": "30 41 59", - "hslChannel": "217.2 32.6% 17.5%" - }, - { - "scale": 900, - "hex": "#0f172a", - "rgb": "rgb(15,23,42)", - "hsl": "hsl(222.2,47.4%,11.2%)", - "rgbChannel": "15 23 42", - "hslChannel": "222.2 47.4% 11.2%" - }, - { - "scale": 950, - "hex": "#020617", - "rgb": "rgb(2,6,23)", - "hsl": "hsl(222.2,84%,4.9%)", - "rgbChannel": "2 6 23", - "hslChannel": "222.2 84% 4.9%" - } - ], - "gray": [ - { - "scale": 50, - "hex": "#f9fafb", - "rgb": "rgb(249,250,251)", - "hsl": "hsl(210,20%,98%)", - "rgbChannel": "249 250 251", - "hslChannel": "210 20% 98%" - }, - { - "scale": 100, - "hex": "#f3f4f6", - "rgb": "rgb(243,244,246)", - "hsl": "hsl(220,14.3%,95.9%)", - "rgbChannel": "243 244 246", - "hslChannel": "220 14.3% 95.9%" - }, - { - "scale": 200, - "hex": "#e5e7eb", - "rgb": "rgb(229,231,235)", - "hsl": "hsl(220,13%,91%)", - "rgbChannel": "229 231 235", - "hslChannel": "220 13% 91%" - }, - { - "scale": 300, - "hex": "#d1d5db", - "rgb": "rgb(209,213,219)", - "hsl": "hsl(216,12.2%,83.9%)", - "rgbChannel": "209 213 219", - "hslChannel": "216 12.2% 83.9%" - }, - { - "scale": 400, - "hex": "#9ca3af", - "rgb": "rgb(156,163,175)", - "hsl": "hsl(217.9,10.6%,64.9%)", - "rgbChannel": "156 163 175", - "hslChannel": "217.9 10.6% 64.9%" - }, - { - "scale": 500, - "hex": "#6b7280", - "rgb": "rgb(107,114,128)", - "hsl": "hsl(220,8.9%,46.1%)", - "rgbChannel": "107 114 128", - "hslChannel": "220 8.9% 46.1%" - }, - { - "scale": 600, - "hex": "#4b5563", - "rgb": "rgb(75,85,99)", - "hsl": "hsl(215,13.8%,34.1%)", - "rgbChannel": "75 85 99", - "hslChannel": "215 13.8% 34.1%" - }, - { - "scale": 700, - "hex": "#374151", - "rgb": "rgb(55,65,81)", - "hsl": "hsl(216.9,19.1%,26.7%)", - "rgbChannel": "55 65 81", - "hslChannel": "216.9 19.1% 26.7%" - }, - { - "scale": 800, - "hex": "#1f2937", - "rgb": "rgb(31,41,55)", - "hsl": "hsl(215,27.9%,16.9%)", - "rgbChannel": "31 41 55", - "hslChannel": "215 27.9% 16.9%" - }, - { - "scale": 900, - "hex": "#111827", - "rgb": "rgb(17,24,39)", - "hsl": "hsl(220.9,39.3%,11%)", - "rgbChannel": "17 24 39", - "hslChannel": "220.9 39.3% 11%" - }, - { - "scale": 950, - "hex": "#030712", - "rgb": "rgb(3,7,18)", - "hsl": "hsl(224,71.4%,4.1%)", - "rgbChannel": "3 7 18", - "hslChannel": "224 71.4% 4.1%" - } - ], - "zinc": [ - { - "scale": 50, - "hex": "#fafafa", - "rgb": "rgb(250,250,250)", - "hsl": "hsl(0,0%,98%)", - "rgbChannel": "250 250 250", - "hslChannel": "0 0% 98%" - }, - { - "scale": 100, - "hex": "#f4f4f5", - "rgb": "rgb(244,244,245)", - "hsl": "hsl(240,4.8%,95.9%)", - "rgbChannel": "244 244 245", - "hslChannel": "240 4.8% 95.9%" - }, - { - "scale": 200, - "hex": "#e4e4e7", - "rgb": "rgb(228,228,231)", - "hsl": "hsl(240,5.9%,90%)", - "rgbChannel": "228 228 231", - "hslChannel": "240 5.9% 90%" - }, - { - "scale": 300, - "hex": "#d4d4d8", - "rgb": "rgb(212,212,216)", - "hsl": "hsl(240,4.9%,83.9%)", - "rgbChannel": "212 212 216", - "hslChannel": "240 4.9% 83.9%" - }, - { - "scale": 400, - "hex": "#a1a1aa", - "rgb": "rgb(161,161,170)", - "hsl": "hsl(240,5%,64.9%)", - "rgbChannel": "161 161 170", - "hslChannel": "240 5% 64.9%" - }, - { - "scale": 500, - "hex": "#71717a", - "rgb": "rgb(113,113,122)", - "hsl": "hsl(240,3.8%,46.1%)", - "rgbChannel": "113 113 122", - "hslChannel": "240 3.8% 46.1%" - }, - { - "scale": 600, - "hex": "#52525b", - "rgb": "rgb(82,82,91)", - "hsl": "hsl(240,5.2%,33.9%)", - "rgbChannel": "82 82 91", - "hslChannel": "240 5.2% 33.9%" - }, - { - "scale": 700, - "hex": "#3f3f46", - "rgb": "rgb(63,63,70)", - "hsl": "hsl(240,5.3%,26.1%)", - "rgbChannel": "63 63 70", - "hslChannel": "240 5.3% 26.1%" - }, - { - "scale": 800, - "hex": "#27272a", - "rgb": "rgb(39,39,42)", - "hsl": "hsl(240,3.7%,15.9%)", - "rgbChannel": "39 39 42", - "hslChannel": "240 3.7% 15.9%" - }, - { - "scale": 900, - "hex": "#18181b", - "rgb": "rgb(24,24,27)", - "hsl": "hsl(240,5.9%,10%)", - "rgbChannel": "24 24 27", - "hslChannel": "240 5.9% 10%" - }, - { - "scale": 950, - "hex": "#09090b", - "rgb": "rgb(9,9,11)", - "hsl": "hsl(240,10%,3.9%)", - "rgbChannel": "9 9 11", - "hslChannel": "240 10% 3.9%" - } - ], - "neutral": [ - { - "scale": 50, - "hex": "#fafafa", - "rgb": "rgb(250,250,250)", - "hsl": "hsl(0,0%,98%)", - "rgbChannel": "250 250 250", - "hslChannel": "0 0% 98%" - }, - { - "scale": 100, - "hex": "#f5f5f5", - "rgb": "rgb(245,245,245)", - "hsl": "hsl(0,0%,96.1%)", - "rgbChannel": "245 245 245", - "hslChannel": "0 0% 96.1%" - }, - { - "scale": 200, - "hex": "#e5e5e5", - "rgb": "rgb(229,229,229)", - "hsl": "hsl(0,0%,89.8%)", - "rgbChannel": "229 229 229", - "hslChannel": "0 0% 89.8%" - }, - { - "scale": 300, - "hex": "#d4d4d4", - "rgb": "rgb(212,212,212)", - "hsl": "hsl(0,0%,83.1%)", - "rgbChannel": "212 212 212", - "hslChannel": "0 0% 83.1%" - }, - { - "scale": 400, - "hex": "#a3a3a3", - "rgb": "rgb(163,163,163)", - "hsl": "hsl(0,0%,63.9%)", - "rgbChannel": "163 163 163", - "hslChannel": "0 0% 63.9%" - }, - { - "scale": 500, - "hex": "#737373", - "rgb": "rgb(115,115,115)", - "hsl": "hsl(0,0%,45.1%)", - "rgbChannel": "115 115 115", - "hslChannel": "0 0% 45.1%" - }, - { - "scale": 600, - "hex": "#525252", - "rgb": "rgb(82,82,82)", - "hsl": "hsl(0,0%,32.2%)", - "rgbChannel": "82 82 82", - "hslChannel": "0 0% 32.2%" - }, - { - "scale": 700, - "hex": "#404040", - "rgb": "rgb(64,64,64)", - "hsl": "hsl(0,0%,25.1%)", - "rgbChannel": "64 64 64", - "hslChannel": "0 0% 25.1%" - }, - { - "scale": 800, - "hex": "#262626", - "rgb": "rgb(38,38,38)", - "hsl": "hsl(0,0%,14.9%)", - "rgbChannel": "38 38 38", - "hslChannel": "0 0% 14.9%" - }, - { - "scale": 900, - "hex": "#171717", - "rgb": "rgb(23,23,23)", - "hsl": "hsl(0,0%,9%)", - "rgbChannel": "23 23 23", - "hslChannel": "0 0% 9%" - }, - { - "scale": 950, - "hex": "#0a0a0a", - "rgb": "rgb(10,10,10)", - "hsl": "hsl(0,0%,3.9%)", - "rgbChannel": "10 10 10", - "hslChannel": "0 0% 3.9%" - } - ], - "stone": [ - { - "scale": 50, - "hex": "#fafaf9", - "rgb": "rgb(250,250,249)", - "hsl": "hsl(60,9.1%,97.8%)", - "rgbChannel": "250 250 249", - "hslChannel": "60 9.1% 97.8%" - }, - { - "scale": 100, - "hex": "#f5f5f4", - "rgb": "rgb(245,245,244)", - "hsl": "hsl(60,4.8%,95.9%)", - "rgbChannel": "245 245 244", - "hslChannel": "60 4.8% 95.9%" - }, - { - "scale": 200, - "hex": "#e7e5e4", - "rgb": "rgb(231,229,228)", - "hsl": "hsl(20,5.9%,90%)", - "rgbChannel": "231 229 228", - "hslChannel": "20 5.9% 90%" - }, - { - "scale": 300, - "hex": "#d6d3d1", - "rgb": "rgb(214,211,209)", - "hsl": "hsl(24,5.7%,82.9%)", - "rgbChannel": "214 211 209", - "hslChannel": "24 5.7% 82.9%" - }, - { - "scale": 400, - "hex": "#a8a29e", - "rgb": "rgb(168,162,158)", - "hsl": "hsl(24,5.4%,63.9%)", - "rgbChannel": "168 162 158", - "hslChannel": "24 5.4% 63.9%" - }, - { - "scale": 500, - "hex": "#78716c", - "rgb": "rgb(120,113,108)", - "hsl": "hsl(25,5.3%,44.7%)", - "rgbChannel": "120 113 108", - "hslChannel": "25 5.3% 44.7%" - }, - { - "scale": 600, - "hex": "#57534e", - "rgb": "rgb(87,83,78)", - "hsl": "hsl(33.3,5.5%,32.4%)", - "rgbChannel": "87 83 78", - "hslChannel": "33.3 5.5% 32.4%" - }, - { - "scale": 700, - "hex": "#44403c", - "rgb": "rgb(68,64,60)", - "hsl": "hsl(30,6.3%,25.1%)", - "rgbChannel": "68 64 60", - "hslChannel": "30 6.3% 25.1%" - }, - { - "scale": 800, - "hex": "#292524", - "rgb": "rgb(41,37,36)", - "hsl": "hsl(12,6.5%,15.1%)", - "rgbChannel": "41 37 36", - "hslChannel": "12 6.5% 15.1%" - }, - { - "scale": 900, - "hex": "#1c1917", - "rgb": "rgb(28,25,23)", - "hsl": "hsl(24,9.8%,10%)", - "rgbChannel": "28 25 23", - "hslChannel": "24 9.8% 10%" - }, - { - "scale": 950, - "hex": "#0c0a09", - "rgb": "rgb(12,10,9)", - "hsl": "hsl(20,14.3%,4.1%)", - "rgbChannel": "12 10 9", - "hslChannel": "20 14.3% 4.1%" - } - ], - "red": [ - { - "scale": 50, - "hex": "#fef2f2", - "rgb": "rgb(254,242,242)", - "hsl": "hsl(0,85.7%,97.3%)", - "rgbChannel": "254 242 242", - "hslChannel": "0 85.7% 97.3%" - }, - { - "scale": 100, - "hex": "#fee2e2", - "rgb": "rgb(254,226,226)", - "hsl": "hsl(0,93.3%,94.1%)", - "rgbChannel": "254 226 226", - "hslChannel": "0 93.3% 94.1%" - }, - { - "scale": 200, - "hex": "#fecaca", - "rgb": "rgb(254,202,202)", - "hsl": "hsl(0,96.3%,89.4%)", - "rgbChannel": "254 202 202", - "hslChannel": "0 96.3% 89.4%" - }, - { - "scale": 300, - "hex": "#fca5a5", - "rgb": "rgb(252,165,165)", - "hsl": "hsl(0,93.5%,81.8%)", - "rgbChannel": "252 165 165", - "hslChannel": "0 93.5% 81.8%" - }, - { - "scale": 400, - "hex": "#f87171", - "rgb": "rgb(248,113,113)", - "hsl": "hsl(0,90.6%,70.8%)", - "rgbChannel": "248 113 113", - "hslChannel": "0 90.6% 70.8%" - }, - { - "scale": 500, - "hex": "#ef4444", - "rgb": "rgb(239,68,68)", - "hsl": "hsl(0,84.2%,60.2%)", - "rgbChannel": "239 68 68", - "hslChannel": "0 84.2% 60.2%" - }, - { - "scale": 600, - "hex": "#dc2626", - "rgb": "rgb(220,38,38)", - "hsl": "hsl(0,72.2%,50.6%)", - "rgbChannel": "220 38 38", - "hslChannel": "0 72.2% 50.6%" - }, - { - "scale": 700, - "hex": "#b91c1c", - "rgb": "rgb(185,28,28)", - "hsl": "hsl(0,73.7%,41.8%)", - "rgbChannel": "185 28 28", - "hslChannel": "0 73.7% 41.8%" - }, - { - "scale": 800, - "hex": "#991b1b", - "rgb": "rgb(153,27,27)", - "hsl": "hsl(0,70%,35.3%)", - "rgbChannel": "153 27 27", - "hslChannel": "0 70% 35.3%" - }, - { - "scale": 900, - "hex": "#7f1d1d", - "rgb": "rgb(127,29,29)", - "hsl": "hsl(0,62.8%,30.6%)", - "rgbChannel": "127 29 29", - "hslChannel": "0 62.8% 30.6%" - }, - { - "scale": 950, - "hex": "#450a0a", - "rgb": "rgb(69,10,10)", - "hsl": "hsl(0,74.7%,15.5%)", - "rgbChannel": "69 10 10", - "hslChannel": "0 74.7% 15.5%" - } - ], - "orange": [ - { - "scale": 50, - "hex": "#fff7ed", - "rgb": "rgb(255,247,237)", - "hsl": "hsl(33.3,100%,96.5%)", - "rgbChannel": "255 247 237", - "hslChannel": "33.3 100% 96.5%" - }, - { - "scale": 100, - "hex": "#ffedd5", - "rgb": "rgb(255,237,213)", - "hsl": "hsl(34.3,100%,91.8%)", - "rgbChannel": "255 237 213", - "hslChannel": "34.3 100% 91.8%" - }, - { - "scale": 200, - "hex": "#fed7aa", - "rgb": "rgb(254,215,170)", - "hsl": "hsl(32.1,97.7%,83.1%)", - "rgbChannel": "254 215 170", - "hslChannel": "32.1 97.7% 83.1%" - }, - { - "scale": 300, - "hex": "#fdba74", - "rgb": "rgb(253,186,116)", - "hsl": "hsl(30.7,97.2%,72.4%)", - "rgbChannel": "253 186 116", - "hslChannel": "30.7 97.2% 72.4%" - }, - { - "scale": 400, - "hex": "#fb923c", - "rgb": "rgb(251,146,60)", - "hsl": "hsl(27,96%,61%)", - "rgbChannel": "251 146 60", - "hslChannel": "27 96% 61%" - }, - { - "scale": 500, - "hex": "#f97316", - "rgb": "rgb(249,115,22)", - "hsl": "hsl(24.6,95%,53.1%)", - "rgbChannel": "249 115 22", - "hslChannel": "24.6 95% 53.1%" - }, - { - "scale": 600, - "hex": "#ea580c", - "rgb": "rgb(234,88,12)", - "hsl": "hsl(20.5,90.2%,48.2%)", - "rgbChannel": "234 88 12", - "hslChannel": "20.5 90.2% 48.2%" - }, - { - "scale": 700, - "hex": "#c2410c", - "rgb": "rgb(194,65,12)", - "hsl": "hsl(17.5,88.3%,40.4%)", - "rgbChannel": "194 65 12", - "hslChannel": "17.5 88.3% 40.4%" - }, - { - "scale": 800, - "hex": "#9a3412", - "rgb": "rgb(154,52,18)", - "hsl": "hsl(15,79.1%,33.7%)", - "rgbChannel": "154 52 18", - "hslChannel": "15 79.1% 33.7%" - }, - { - "scale": 900, - "hex": "#7c2d12", - "rgb": "rgb(124,45,18)", - "hsl": "hsl(15.3,74.6%,27.8%)", - "rgbChannel": "124 45 18", - "hslChannel": "15.3 74.6% 27.8%" - }, - { - "scale": 950, - "hex": "#431407", - "rgb": "rgb(67,20,7)", - "hsl": "hsl(13,81.1%,14.5%)", - "rgbChannel": "67 20 7", - "hslChannel": "13 81.1% 14.5%" - } - ], - "amber": [ - { - "scale": 50, - "hex": "#fffbeb", - "rgb": "rgb(255,251,235)", - "hsl": "hsl(48,100%,96.1%)", - "rgbChannel": "255 251 235", - "hslChannel": "48 100% 96.1%" - }, - { - "scale": 100, - "hex": "#fef3c7", - "rgb": "rgb(254,243,199)", - "hsl": "hsl(48,96.5%,88.8%)", - "rgbChannel": "254 243 199", - "hslChannel": "48 96.5% 88.8%" - }, - { - "scale": 200, - "hex": "#fde68a", - "rgb": "rgb(253,230,138)", - "hsl": "hsl(48,96.6%,76.7%)", - "rgbChannel": "253 230 138", - "hslChannel": "48 96.6% 76.7%" - }, - { - "scale": 300, - "hex": "#fcd34d", - "rgb": "rgb(252,211,77)", - "hsl": "hsl(45.9,96.7%,64.5%)", - "rgbChannel": "252 211 77", - "hslChannel": "45.9 96.7% 64.5%" - }, - { - "scale": 400, - "hex": "#fbbf24", - "rgb": "rgb(251,191,36)", - "hsl": "hsl(43.3,96.4%,56.3%)", - "rgbChannel": "251 191 36", - "hslChannel": "43.3 96.4% 56.3%" - }, - { - "scale": 500, - "hex": "#f59e0b", - "rgb": "rgb(245,158,11)", - "hsl": "hsl(37.7,92.1%,50.2%)", - "rgbChannel": "245 158 11", - "hslChannel": "37.7 92.1% 50.2%" - }, - { - "scale": 600, - "hex": "#d97706", - "rgb": "rgb(217,119,6)", - "hsl": "hsl(32.1,94.6%,43.7%)", - "rgbChannel": "217 119 6", - "hslChannel": "32.1 94.6% 43.7%" - }, - { - "scale": 700, - "hex": "#b45309", - "rgb": "rgb(180,83,9)", - "hsl": "hsl(26,90.5%,37.1%)", - "rgbChannel": "180 83 9", - "hslChannel": "26 90.5% 37.1%" - }, - { - "scale": 800, - "hex": "#92400e", - "rgb": "rgb(146,64,14)", - "hsl": "hsl(22.7,82.5%,31.4%)", - "rgbChannel": "146 64 14", - "hslChannel": "22.7 82.5% 31.4%" - }, - { - "scale": 900, - "hex": "#78350f", - "rgb": "rgb(120,53,15)", - "hsl": "hsl(21.7,77.8%,26.5%)", - "rgbChannel": "120 53 15", - "hslChannel": "21.7 77.8% 26.5%" - }, - { - "scale": 950, - "hex": "#451a03", - "rgb": "rgb(69,26,3)", - "hsl": "hsl(20.9,91.7%,14.1%)", - "rgbChannel": "69 26 3", - "hslChannel": "20.9 91.7% 14.1%" - } - ], - "yellow": [ - { - "scale": 50, - "hex": "#fefce8", - "rgb": "rgb(254,252,232)", - "hsl": "hsl(54.5,91.7%,95.3%)", - "rgbChannel": "254 252 232", - "hslChannel": "54.5 91.7% 95.3%" - }, - { - "scale": 100, - "hex": "#fef9c3", - "rgb": "rgb(254,249,195)", - "hsl": "hsl(54.9,96.7%,88%)", - "rgbChannel": "254 249 195", - "hslChannel": "54.9 96.7% 88%" - }, - { - "scale": 200, - "hex": "#fef08a", - "rgb": "rgb(254,240,138)", - "hsl": "hsl(52.8,98.3%,76.9%)", - "rgbChannel": "254 240 138", - "hslChannel": "52.8 98.3% 76.9%" - }, - { - "scale": 300, - "hex": "#fde047", - "rgb": "rgb(253,224,71)", - "hsl": "hsl(50.4,97.8%,63.5%)", - "rgbChannel": "253 224 71", - "hslChannel": "50.4 97.8% 63.5%" - }, - { - "scale": 400, - "hex": "#facc15", - "rgb": "rgb(250,204,21)", - "hsl": "hsl(47.9,95.8%,53.1%)", - "rgbChannel": "250 204 21", - "hslChannel": "47.9 95.8% 53.1%" - }, - { - "scale": 500, - "hex": "#eab308", - "rgb": "rgb(234,179,8)", - "hsl": "hsl(45.4,93.4%,47.5%)", - "rgbChannel": "234 179 8", - "hslChannel": "45.4 93.4% 47.5%" - }, - { - "scale": 600, - "hex": "#ca8a04", - "rgb": "rgb(202,138,4)", - "hsl": "hsl(40.6,96.1%,40.4%)", - "rgbChannel": "202 138 4", - "hslChannel": "40.6 96.1% 40.4%" - }, - { - "scale": 700, - "hex": "#a16207", - "rgb": "rgb(161,98,7)", - "hsl": "hsl(35.5,91.7%,32.9%)", - "rgbChannel": "161 98 7", - "hslChannel": "35.5 91.7% 32.9%" - }, - { - "scale": 800, - "hex": "#854d0e", - "rgb": "rgb(133,77,14)", - "hsl": "hsl(31.8,81%,28.8%)", - "rgbChannel": "133 77 14", - "hslChannel": "31.8 81% 28.8%" - }, - { - "scale": 900, - "hex": "#713f12", - "rgb": "rgb(113,63,18)", - "hsl": "hsl(28.4,72.5%,25.7%)", - "rgbChannel": "113 63 18", - "hslChannel": "28.4 72.5% 25.7%" - }, - { - "scale": 950, - "hex": "#422006", - "rgb": "rgb(66,32,6)", - "hsl": "hsl(26,83.3%,14.1%)", - "rgbChannel": "66 32 6", - "hslChannel": "26 83.3% 14.1%" - } - ], - "lime": [ - { - "scale": 50, - "hex": "#f7fee7", - "rgb": "rgb(247,254,231)", - "hsl": "hsl(78.3,92%,95.1%)", - "rgbChannel": "247 254 231", - "hslChannel": "78.3 92% 95.1%" - }, - { - "scale": 100, - "hex": "#ecfccb", - "rgb": "rgb(236,252,203)", - "hsl": "hsl(79.6,89.1%,89.2%)", - "rgbChannel": "236 252 203", - "hslChannel": "79.6 89.1% 89.2%" - }, - { - "scale": 200, - "hex": "#d9f99d", - "rgb": "rgb(217,249,157)", - "hsl": "hsl(80.9,88.5%,79.6%)", - "rgbChannel": "217 249 157", - "hslChannel": "80.9 88.5% 79.6%" - }, - { - "scale": 300, - "hex": "#bef264", - "rgb": "rgb(190,242,100)", - "hsl": "hsl(82,84.5%,67.1%)", - "rgbChannel": "190 242 100", - "hslChannel": "82 84.5% 67.1%" - }, - { - "scale": 400, - "hex": "#a3e635", - "rgb": "rgb(163,230,53)", - "hsl": "hsl(82.7,78%,55.5%)", - "rgbChannel": "163 230 53", - "hslChannel": "82.7 78% 55.5%" - }, - { - "scale": 500, - "hex": "#84cc16", - "rgb": "rgb(132,204,22)", - "hsl": "hsl(83.7,80.5%,44.3%)", - "rgbChannel": "132 204 22", - "hslChannel": "83.7 80.5% 44.3%" - }, - { - "scale": 600, - "hex": "#65a30d", - "rgb": "rgb(101,163,13)", - "hsl": "hsl(84.8,85.2%,34.5%)", - "rgbChannel": "101 163 13", - "hslChannel": "84.8 85.2% 34.5%" - }, - { - "scale": 700, - "hex": "#4d7c0f", - "rgb": "rgb(77,124,15)", - "hsl": "hsl(85.9,78.4%,27.3%)", - "rgbChannel": "77 124 15", - "hslChannel": "85.9 78.4% 27.3%" - }, - { - "scale": 800, - "hex": "#3f6212", - "rgb": "rgb(63,98,18)", - "hsl": "hsl(86.3,69%,22.7%)", - "rgbChannel": "63 98 18", - "hslChannel": "86.3 69% 22.7%" - }, - { - "scale": 900, - "hex": "#365314", - "rgb": "rgb(54,83,20)", - "hsl": "hsl(87.6,61.2%,20.2%)", - "rgbChannel": "54 83 20", - "hslChannel": "87.6 61.2% 20.2%" - }, - { - "scale": 950, - "hex": "#1a2e05", - "rgb": "rgb(26,46,5)", - "hsl": "hsl(89.3,80.4%,10%)", - "rgbChannel": "26 46 5", - "hslChannel": "89.3 80.4% 10%" - } - ], - "green": [ - { - "scale": 50, - "hex": "#f0fdf4", - "rgb": "rgb(240,253,244)", - "hsl": "hsl(138.5,76.5%,96.7%)", - "rgbChannel": "240 253 244", - "hslChannel": "138.5 76.5% 96.7%" - }, - { - "scale": 100, - "hex": "#dcfce7", - "rgb": "rgb(220,252,231)", - "hsl": "hsl(140.6,84.2%,92.5%)", - "rgbChannel": "220 252 231", - "hslChannel": "140.6 84.2% 92.5%" - }, - { - "scale": 200, - "hex": "#bbf7d0", - "rgb": "rgb(187,247,208)", - "hsl": "hsl(141,78.9%,85.1%)", - "rgbChannel": "187 247 208", - "hslChannel": "141 78.9% 85.1%" - }, - { - "scale": 300, - "hex": "#86efac", - "rgb": "rgb(134,239,172)", - "hsl": "hsl(141.7,76.6%,73.1%)", - "rgbChannel": "134 239 172", - "hslChannel": "141.7 76.6% 73.1%" - }, - { - "scale": 400, - "hex": "#4ade80", - "rgb": "rgb(74,222,128)", - "hsl": "hsl(141.9,69.2%,58%)", - "rgbChannel": "74 222 128", - "hslChannel": "141.9 69.2% 58%" - }, - { - "scale": 500, - "hex": "#22c55e", - "rgb": "rgb(34,197,94)", - "hsl": "hsl(142.1,70.6%,45.3%)", - "rgbChannel": "34 197 94", - "hslChannel": "142.1 70.6% 45.3%" - }, - { - "scale": 600, - "hex": "#16a34a", - "rgb": "rgb(22,163,74)", - "hsl": "hsl(142.1,76.2%,36.3%)", - "rgbChannel": "22 163 74", - "hslChannel": "142.1 76.2% 36.3%" - }, - { - "scale": 700, - "hex": "#15803d", - "rgb": "rgb(21,128,61)", - "hsl": "hsl(142.4,71.8%,29.2%)", - "rgbChannel": "21 128 61", - "hslChannel": "142.4 71.8% 29.2%" - }, - { - "scale": 800, - "hex": "#166534", - "rgb": "rgb(22,101,52)", - "hsl": "hsl(142.8,64.2%,24.1%)", - "rgbChannel": "22 101 52", - "hslChannel": "142.8 64.2% 24.1%" - }, - { - "scale": 900, - "hex": "#14532d", - "rgb": "rgb(20,83,45)", - "hsl": "hsl(143.8,61.2%,20.2%)", - "rgbChannel": "20 83 45", - "hslChannel": "143.8 61.2% 20.2%" - }, - { - "scale": 950, - "hex": "#052e16", - "rgb": "rgb(5,46,22)", - "hsl": "hsl(144.9,80.4%,10%)", - "rgbChannel": "5 46 22", - "hslChannel": "144.9 80.4% 10%" - } - ], - "emerald": [ - { - "scale": 50, - "hex": "#ecfdf5", - "rgb": "rgb(236,253,245)", - "hsl": "hsl(151.8,81%,95.9%)", - "rgbChannel": "236 253 245", - "hslChannel": "151.8 81% 95.9%" - }, - { - "scale": 100, - "hex": "#d1fae5", - "rgb": "rgb(209,250,229)", - "hsl": "hsl(149.3,80.4%,90%)", - "rgbChannel": "209 250 229", - "hslChannel": "149.3 80.4% 90%" - }, - { - "scale": 200, - "hex": "#a7f3d0", - "rgb": "rgb(167,243,208)", - "hsl": "hsl(152.4,76%,80.4%)", - "rgbChannel": "167 243 208", - "hslChannel": "152.4 76% 80.4%" - }, - { - "scale": 300, - "hex": "#6ee7b7", - "rgb": "rgb(110,231,183)", - "hsl": "hsl(156.2,71.6%,66.9%)", - "rgbChannel": "110 231 183", - "hslChannel": "156.2 71.6% 66.9%" - }, - { - "scale": 400, - "hex": "#34d399", - "rgb": "rgb(52,211,153)", - "hsl": "hsl(158.1,64.4%,51.6%)", - "rgbChannel": "52 211 153", - "hslChannel": "158.1 64.4% 51.6%" - }, - { - "scale": 500, - "hex": "#10b981", - "rgb": "rgb(16,185,129)", - "hsl": "hsl(160.1,84.1%,39.4%)", - "rgbChannel": "16 185 129", - "hslChannel": "160.1 84.1% 39.4%" - }, - { - "scale": 600, - "hex": "#059669", - "rgb": "rgb(5,150,105)", - "hsl": "hsl(161.4,93.5%,30.4%)", - "rgbChannel": "5 150 105", - "hslChannel": "161.4 93.5% 30.4%" - }, - { - "scale": 700, - "hex": "#047857", - "rgb": "rgb(4,120,87)", - "hsl": "hsl(162.9,93.5%,24.3%)", - "rgbChannel": "4 120 87", - "hslChannel": "162.9 93.5% 24.3%" - }, - { - "scale": 800, - "hex": "#065f46", - "rgb": "rgb(6,95,70)", - "hsl": "hsl(163.1,88.1%,19.8%)", - "rgbChannel": "6 95 70", - "hslChannel": "163.1 88.1% 19.8%" - }, - { - "scale": 900, - "hex": "#064e3b", - "rgb": "rgb(6,78,59)", - "hsl": "hsl(164.2,85.7%,16.5%)", - "rgbChannel": "6 78 59", - "hslChannel": "164.2 85.7% 16.5%" - }, - { - "scale": 950, - "hex": "#022c22", - "rgb": "rgb(2,44,34)", - "hsl": "hsl(165.7,91.3%,9%)", - "rgbChannel": "2 44 34", - "hslChannel": "165.7 91.3% 9%" - } - ], - "teal": [ - { - "scale": 50, - "hex": "#f0fdfa", - "rgb": "rgb(240,253,250)", - "hsl": "hsl(166.2,76.5%,96.7%)", - "rgbChannel": "240 253 250", - "hslChannel": "166.2 76.5% 96.7%" - }, - { - "scale": 100, - "hex": "#ccfbf1", - "rgb": "rgb(204,251,241)", - "hsl": "hsl(167.2,85.5%,89.2%)", - "rgbChannel": "204 251 241", - "hslChannel": "167.2 85.5% 89.2%" - }, - { - "scale": 200, - "hex": "#99f6e4", - "rgb": "rgb(153,246,228)", - "hsl": "hsl(168.4,83.8%,78.2%)", - "rgbChannel": "153 246 228", - "hslChannel": "168.4 83.8% 78.2%" - }, - { - "scale": 300, - "hex": "#5eead4", - "rgb": "rgb(94,234,212)", - "hsl": "hsl(170.6,76.9%,64.3%)", - "rgbChannel": "94 234 212", - "hslChannel": "170.6 76.9% 64.3%" - }, - { - "scale": 400, - "hex": "#2dd4bf", - "rgb": "rgb(45,212,191)", - "hsl": "hsl(172.5,66%,50.4%)", - "rgbChannel": "45 212 191", - "hslChannel": "172.5 66% 50.4%" - }, - { - "scale": 500, - "hex": "#14b8a6", - "rgb": "rgb(20,184,166)", - "hsl": "hsl(173.4,80.4%,40%)", - "rgbChannel": "20 184 166", - "hslChannel": "173.4 80.4% 40%" - }, - { - "scale": 600, - "hex": "#0d9488", - "rgb": "rgb(13,148,136)", - "hsl": "hsl(174.7,83.9%,31.6%)", - "rgbChannel": "13 148 136", - "hslChannel": "174.7 83.9% 31.6%" - }, - { - "scale": 700, - "hex": "#0f766e", - "rgb": "rgb(15,118,110)", - "hsl": "hsl(175.3,77.4%,26.1%)", - "rgbChannel": "15 118 110", - "hslChannel": "175.3 77.4% 26.1%" - }, - { - "scale": 800, - "hex": "#115e59", - "rgb": "rgb(17,94,89)", - "hsl": "hsl(176.1,69.4%,21.8%)", - "rgbChannel": "17 94 89", - "hslChannel": "176.1 69.4% 21.8%" - }, - { - "scale": 900, - "hex": "#134e4a", - "rgb": "rgb(19,78,74)", - "hsl": "hsl(175.9,60.8%,19%)", - "rgbChannel": "19 78 74", - "hslChannel": "175.9 60.8% 19%" - }, - { - "scale": 950, - "hex": "#042f2e", - "rgb": "rgb(4,47,46)", - "hsl": "hsl(178.6,84.3%,10%)", - "rgbChannel": "4 47 46", - "hslChannel": "178.6 84.3% 10%" - } - ], - "cyan": [ - { - "scale": 50, - "hex": "#ecfeff", - "rgb": "rgb(236,254,255)", - "hsl": "hsl(183.2,100%,96.3%)", - "rgbChannel": "236 254 255", - "hslChannel": "183.2 100% 96.3%" - }, - { - "scale": 100, - "hex": "#cffafe", - "rgb": "rgb(207,250,254)", - "hsl": "hsl(185.1,95.9%,90.4%)", - "rgbChannel": "207 250 254", - "hslChannel": "185.1 95.9% 90.4%" - }, - { - "scale": 200, - "hex": "#a5f3fc", - "rgb": "rgb(165,243,252)", - "hsl": "hsl(186.2,93.5%,81.8%)", - "rgbChannel": "165 243 252", - "hslChannel": "186.2 93.5% 81.8%" - }, - { - "scale": 300, - "hex": "#67e8f9", - "rgb": "rgb(103,232,249)", - "hsl": "hsl(187,92.4%,69%)", - "rgbChannel": "103 232 249", - "hslChannel": "187 92.4% 69%" - }, - { - "scale": 400, - "hex": "#22d3ee", - "rgb": "rgb(34,211,238)", - "hsl": "hsl(187.9,85.7%,53.3%)", - "rgbChannel": "34 211 238", - "hslChannel": "187.9 85.7% 53.3%" - }, - { - "scale": 500, - "hex": "#06b6d4", - "rgb": "rgb(6,182,212)", - "hsl": "hsl(188.7,94.5%,42.7%)", - "rgbChannel": "6 182 212", - "hslChannel": "188.7 94.5% 42.7%" - }, - { - "scale": 600, - "hex": "#0891b2", - "rgb": "rgb(8,145,178)", - "hsl": "hsl(191.6,91.4%,36.5%)", - "rgbChannel": "8 145 178", - "hslChannel": "191.6 91.4% 36.5%" - }, - { - "scale": 700, - "hex": "#0e7490", - "rgb": "rgb(14,116,144)", - "hsl": "hsl(192.9,82.3%,31%)", - "rgbChannel": "14 116 144", - "hslChannel": "192.9 82.3% 31%" - }, - { - "scale": 800, - "hex": "#155e75", - "rgb": "rgb(21,94,117)", - "hsl": "hsl(194.4,69.6%,27.1%)", - "rgbChannel": "21 94 117", - "hslChannel": "194.4 69.6% 27.1%" - }, - { - "scale": 900, - "hex": "#164e63", - "rgb": "rgb(22,78,99)", - "hsl": "hsl(196.4,63.6%,23.7%)", - "rgbChannel": "22 78 99", - "hslChannel": "196.4 63.6% 23.7%" - }, - { - "scale": 950, - "hex": "#083344", - "rgb": "rgb(8,51,68)", - "hsl": "hsl(197,78.9%,14.9%)", - "rgbChannel": "8 51 68", - "hslChannel": "197 78.9% 14.9%" - } - ], - "sky": [ - { - "scale": 50, - "hex": "#f0f9ff", - "rgb": "rgb(240,249,255)", - "hsl": "hsl(204,100%,97.1%)", - "rgbChannel": "240 249 255", - "hslChannel": "204 100% 97.1%" - }, - { - "scale": 100, - "hex": "#e0f2fe", - "rgb": "rgb(224,242,254)", - "hsl": "hsl(204,93.8%,93.7%)", - "rgbChannel": "224 242 254", - "hslChannel": "204 93.8% 93.7%" - }, - { - "scale": 200, - "hex": "#bae6fd", - "rgb": "rgb(186,230,253)", - "hsl": "hsl(200.6,94.4%,86.1%)", - "rgbChannel": "186 230 253", - "hslChannel": "200.6 94.4% 86.1%" - }, - { - "scale": 300, - "hex": "#7dd3fc", - "rgb": "rgb(125,211,252)", - "hsl": "hsl(199.4,95.5%,73.9%)", - "rgbChannel": "125 211 252", - "hslChannel": "199.4 95.5% 73.9%" - }, - { - "scale": 400, - "hex": "#38bdf8", - "rgb": "rgb(56,189,248)", - "hsl": "hsl(198.4,93.2%,59.6%)", - "rgbChannel": "56 189 248", - "hslChannel": "198.4 93.2% 59.6%" - }, - { - "scale": 500, - "hex": "#0ea5e9", - "rgb": "rgb(14,165,233)", - "hsl": "hsl(198.6,88.7%,48.4%)", - "rgbChannel": "14 165 233", - "hslChannel": "198.6 88.7% 48.4%" - }, - { - "scale": 600, - "hex": "#0284c7", - "rgb": "rgb(2,132,199)", - "hsl": "hsl(200.4,98%,39.4%)", - "rgbChannel": "2 132 199", - "hslChannel": "200.4 98% 39.4%" - }, - { - "scale": 700, - "hex": "#0369a1", - "rgb": "rgb(3,105,161)", - "hsl": "hsl(201.3,96.3%,32.2%)", - "rgbChannel": "3 105 161", - "hslChannel": "201.3 96.3% 32.2%" - }, - { - "scale": 800, - "hex": "#075985", - "rgb": "rgb(7,89,133)", - "hsl": "hsl(201,90%,27.5%)", - "rgbChannel": "7 89 133", - "hslChannel": "201 90% 27.5%" - }, - { - "scale": 900, - "hex": "#0c4a6e", - "rgb": "rgb(12,74,110)", - "hsl": "hsl(202,80.3%,23.9%)", - "rgbChannel": "12 74 110", - "hslChannel": "202 80.3% 23.9%" - }, - { - "scale": 950, - "hex": "#082f49", - "rgb": "rgb(8,47,73)", - "hsl": "hsl(204,80.2%,15.9%)", - "rgbChannel": "8 47 73", - "hslChannel": "204 80.2% 15.9%" - } - ], - "blue": [ - { - "scale": 50, - "hex": "#eff6ff", - "rgb": "rgb(239,246,255)", - "hsl": "hsl(213.8,100%,96.9%)", - "rgbChannel": "239 246 255", - "hslChannel": "213.8 100% 96.9%" - }, - { - "scale": 100, - "hex": "#dbeafe", - "rgb": "rgb(219,234,254)", - "hsl": "hsl(214.3,94.6%,92.7%)", - "rgbChannel": "219 234 254", - "hslChannel": "214.3 94.6% 92.7%" - }, - { - "scale": 200, - "hex": "#bfdbfe", - "rgb": "rgb(191,219,254)", - "hsl": "hsl(213.3,96.9%,87.3%)", - "rgbChannel": "191 219 254", - "hslChannel": "213.3 96.9% 87.3%" - }, - { - "scale": 300, - "hex": "#93c5fd", - "rgb": "rgb(147,197,253)", - "hsl": "hsl(211.7,96.4%,78.4%)", - "rgbChannel": "147 197 253", - "hslChannel": "211.7 96.4% 78.4%" - }, - { - "scale": 400, - "hex": "#60a5fa", - "rgb": "rgb(96,165,250)", - "hsl": "hsl(213.1,93.9%,67.8%)", - "rgbChannel": "96 165 250", - "hslChannel": "213.1 93.9% 67.8%" - }, - { - "scale": 500, - "hex": "#3b82f6", - "rgb": "rgb(59,130,246)", - "hsl": "hsl(217.2,91.2%,59.8%)", - "rgbChannel": "59 130 246", - "hslChannel": "217.2 91.2% 59.8%" - }, - { - "scale": 600, - "hex": "#2563eb", - "rgb": "rgb(37,99,235)", - "hsl": "hsl(221.2,83.2%,53.3%)", - "rgbChannel": "37 99 235", - "hslChannel": "221.2 83.2% 53.3%" - }, - { - "scale": 700, - "hex": "#1d4ed8", - "rgb": "rgb(29,78,216)", - "hsl": "hsl(224.3,76.3%,48%)", - "rgbChannel": "29 78 216", - "hslChannel": "224.3 76.3% 48%" - }, - { - "scale": 800, - "hex": "#1e40af", - "rgb": "rgb(30,64,175)", - "hsl": "hsl(225.9,70.7%,40.2%)", - "rgbChannel": "30 64 175", - "hslChannel": "225.9 70.7% 40.2%" - }, - { - "scale": 900, - "hex": "#1e3a8a", - "rgb": "rgb(30,58,138)", - "hsl": "hsl(224.4,64.3%,32.9%)", - "rgbChannel": "30 58 138", - "hslChannel": "224.4 64.3% 32.9%" - }, - { - "scale": 950, - "hex": "#172554", - "rgb": "rgb(23,37,84)", - "hsl": "hsl(226.2,57%,21%)", - "rgbChannel": "23 37 84", - "hslChannel": "226.2 57% 21%" - } - ], - "indigo": [ - { - "scale": 50, - "hex": "#eef2ff", - "rgb": "rgb(238,242,255)", - "hsl": "hsl(225.9,100%,96.7%)", - "rgbChannel": "238 242 255", - "hslChannel": "225.9 100% 96.7%" - }, - { - "scale": 100, - "hex": "#e0e7ff", - "rgb": "rgb(224,231,255)", - "hsl": "hsl(226.5,100%,93.9%)", - "rgbChannel": "224 231 255", - "hslChannel": "226.5 100% 93.9%" - }, - { - "scale": 200, - "hex": "#c7d2fe", - "rgb": "rgb(199,210,254)", - "hsl": "hsl(228,96.5%,88.8%)", - "rgbChannel": "199 210 254", - "hslChannel": "228 96.5% 88.8%" - }, - { - "scale": 300, - "hex": "#a5b4fc", - "rgb": "rgb(165,180,252)", - "hsl": "hsl(229.7,93.5%,81.8%)", - "rgbChannel": "165 180 252", - "hslChannel": "229.7 93.5% 81.8%" - }, - { - "scale": 400, - "hex": "#818cf8", - "rgb": "rgb(129,140,248)", - "hsl": "hsl(234.5,89.5%,73.9%)", - "rgbChannel": "129 140 248", - "hslChannel": "234.5 89.5% 73.9%" - }, - { - "scale": 500, - "hex": "#6366f1", - "rgb": "rgb(99,102,241)", - "hsl": "hsl(238.7,83.5%,66.7%)", - "rgbChannel": "99 102 241", - "hslChannel": "238.7 83.5% 66.7%" - }, - { - "scale": 600, - "hex": "#4f46e5", - "rgb": "rgb(79,70,229)", - "hsl": "hsl(243.4,75.4%,58.6%)", - "rgbChannel": "79 70 229", - "hslChannel": "243.4 75.4% 58.6%" - }, - { - "scale": 700, - "hex": "#4338ca", - "rgb": "rgb(67,56,202)", - "hsl": "hsl(244.5,57.9%,50.6%)", - "rgbChannel": "67 56 202", - "hslChannel": "244.5 57.9% 50.6%" - }, - { - "scale": 800, - "hex": "#3730a3", - "rgb": "rgb(55,48,163)", - "hsl": "hsl(243.7,54.5%,41.4%)", - "rgbChannel": "55 48 163", - "hslChannel": "243.7 54.5% 41.4%" - }, - { - "scale": 900, - "hex": "#312e81", - "rgb": "rgb(49,46,129)", - "hsl": "hsl(242.2,47.4%,34.3%)", - "rgbChannel": "49 46 129", - "hslChannel": "242.2 47.4% 34.3%" - }, - { - "scale": 950, - "hex": "#1e1b4b", - "rgb": "rgb(30,27,75)", - "hsl": "hsl(243.8,47.1%,20%)", - "rgbChannel": "30 27 75", - "hslChannel": "243.8 47.1% 20%" - } - ], - "violet": [ - { - "scale": 50, - "hex": "#f5f3ff", - "rgb": "rgb(245,243,255)", - "hsl": "hsl(250,100%,97.6%)", - "rgbChannel": "245 243 255", - "hslChannel": "250 100% 97.6%" - }, - { - "scale": 100, - "hex": "#ede9fe", - "rgb": "rgb(237,233,254)", - "hsl": "hsl(251.4,91.3%,95.5%)", - "rgbChannel": "237 233 254", - "hslChannel": "251.4 91.3% 95.5%" - }, - { - "scale": 200, - "hex": "#ddd6fe", - "rgb": "rgb(221,214,254)", - "hsl": "hsl(250.5,95.2%,91.8%)", - "rgbChannel": "221 214 254", - "hslChannel": "250.5 95.2% 91.8%" - }, - { - "scale": 300, - "hex": "#c4b5fd", - "rgb": "rgb(196,181,253)", - "hsl": "hsl(252.5,94.7%,85.1%)", - "rgbChannel": "196 181 253", - "hslChannel": "252.5 94.7% 85.1%" - }, - { - "scale": 400, - "hex": "#a78bfa", - "rgb": "rgb(167,139,250)", - "hsl": "hsl(255.1,91.7%,76.3%)", - "rgbChannel": "167 139 250", - "hslChannel": "255.1 91.7% 76.3%" - }, - { - "scale": 500, - "hex": "#8b5cf6", - "rgb": "rgb(139,92,246)", - "hsl": "hsl(258.3,89.5%,66.3%)", - "rgbChannel": "139 92 246", - "hslChannel": "258.3 89.5% 66.3%" - }, - { - "scale": 600, - "hex": "#7c3aed", - "rgb": "rgb(124,58,237)", - "hsl": "hsl(262.1,83.3%,57.8%)", - "rgbChannel": "124 58 237", - "hslChannel": "262.1 83.3% 57.8%" - }, - { - "scale": 700, - "hex": "#6d28d9", - "rgb": "rgb(109,40,217)", - "hsl": "hsl(263.4,70%,50.4%)", - "rgbChannel": "109 40 217", - "hslChannel": "263.4 70% 50.4%" - }, - { - "scale": 800, - "hex": "#5b21b6", - "rgb": "rgb(91,33,182)", - "hsl": "hsl(263.4,69.3%,42.2%)", - "rgbChannel": "91 33 182", - "hslChannel": "263.4 69.3% 42.2%" - }, - { - "scale": 900, - "hex": "#4c1d95", - "rgb": "rgb(76,29,149)", - "hsl": "hsl(263.5,67.4%,34.9%)", - "rgbChannel": "76 29 149", - "hslChannel": "263.5 67.4% 34.9%" - }, - { - "scale": 950, - "hex": "#1e1b4b", - "rgb": "rgb(46,16,101)", - "hsl": "hsl(261.2,72.6%,22.9%)", - "rgbChannel": "46 16 101", - "hslChannel": "261.2 72.6% 22.9%" - } - ], - "purple": [ - { - "scale": 50, - "hex": "#faf5ff", - "rgb": "rgb(250,245,255)", - "hsl": "hsl(270,100%,98%)", - "rgbChannel": "250 245 255", - "hslChannel": "270 100% 98%" - }, - { - "scale": 100, - "hex": "#f3e8ff", - "rgb": "rgb(243,232,255)", - "hsl": "hsl(268.7,100%,95.5%)", - "rgbChannel": "243 232 255", - "hslChannel": "268.7 100% 95.5%" - }, - { - "scale": 200, - "hex": "#e9d5ff", - "rgb": "rgb(233,213,255)", - "hsl": "hsl(268.6,100%,91.8%)", - "rgbChannel": "233 213 255", - "hslChannel": "268.6 100% 91.8%" - }, - { - "scale": 300, - "hex": "#d8b4fe", - "rgb": "rgb(216,180,254)", - "hsl": "hsl(269.2,97.4%,85.1%)", - "rgbChannel": "216 180 254", - "hslChannel": "269.2 97.4% 85.1%" - }, - { - "scale": 400, - "hex": "#c084fc", - "rgb": "rgb(192,132,252)", - "hsl": "hsl(270,95.2%,75.3%)", - "rgbChannel": "192 132 252", - "hslChannel": "270 95.2% 75.3%" - }, - { - "scale": 500, - "hex": "#a855f7", - "rgb": "rgb(168,85,247)", - "hsl": "hsl(270.7,91%,65.1%)", - "rgbChannel": "168 85 247", - "hslChannel": "270.7 91% 65.1%" - }, - { - "scale": 600, - "hex": "#9333ea", - "rgb": "rgb(147,51,234)", - "hsl": "hsl(271.5,81.3%,55.9%)", - "rgbChannel": "147 51 234", - "hslChannel": "271.5 81.3% 55.9%" - }, - { - "scale": 700, - "hex": "#7e22ce", - "rgb": "rgb(126,34,206)", - "hsl": "hsl(272.1,71.7%,47.1%)", - "rgbChannel": "126 34 206", - "hslChannel": "272.1 71.7% 47.1%" - }, - { - "scale": 800, - "hex": "#6b21a8", - "rgb": "rgb(107,33,168)", - "hsl": "hsl(272.9,67.2%,39.4%)", - "rgbChannel": "107 33 168", - "hslChannel": "272.9 67.2% 39.4%" - }, - { - "scale": 900, - "hex": "#581c87", - "rgb": "rgb(88,28,135)", - "hsl": "hsl(273.6,65.6%,32%)", - "rgbChannel": "88 28 135", - "hslChannel": "273.6 65.6% 32%" - }, - { - "scale": 950, - "hex": "#3b0764", - "rgb": "rgb(59,7,100)", - "hsl": "hsl(273.5,86.9%,21%)", - "rgbChannel": "59 7 100", - "hslChannel": "273.5 86.9% 21%" - } - ], - "fuchsia": [ - { - "scale": 50, - "hex": "#fdf4ff", - "rgb": "rgb(253,244,255)", - "hsl": "hsl(289.1,100%,97.8%)", - "rgbChannel": "253 244 255", - "hslChannel": "289.1 100% 97.8%" - }, - { - "scale": 100, - "hex": "#fae8ff", - "rgb": "rgb(250,232,255)", - "hsl": "hsl(287,100%,95.5%)", - "rgbChannel": "250 232 255", - "hslChannel": "287 100% 95.5%" - }, - { - "scale": 200, - "hex": "#f5d0fe", - "rgb": "rgb(245,208,254)", - "hsl": "hsl(288.3,95.8%,90.6%)", - "rgbChannel": "245 208 254", - "hslChannel": "288.3 95.8% 90.6%" - }, - { - "scale": 300, - "hex": "#f0abfc", - "rgb": "rgb(240,171,252)", - "hsl": "hsl(291.1,93.1%,82.9%)", - "rgbChannel": "240 171 252", - "hslChannel": "291.1 93.1% 82.9%" - }, - { - "scale": 400, - "hex": "#e879f9", - "rgb": "rgb(232,121,249)", - "hsl": "hsl(292,91.4%,72.5%)", - "rgbChannel": "232 121 249", - "hslChannel": "292 91.4% 72.5%" - }, - { - "scale": 500, - "hex": "#d946ef", - "rgb": "rgb(217,70,239)", - "hsl": "hsl(292.2,84.1%,60.6%)", - "rgbChannel": "217 70 239", - "hslChannel": "292.2 84.1% 60.6%" - }, - { - "scale": 600, - "hex": "#c026d3", - "rgb": "rgb(192,38,211)", - "hsl": "hsl(293.4,69.5%,48.8%)", - "rgbChannel": "192 38 211", - "hslChannel": "293.4 69.5% 48.8%" - }, - { - "scale": 700, - "hex": "#a21caf", - "rgb": "rgb(162,28,175)", - "hsl": "hsl(294.7,72.4%,39.8%)", - "rgbChannel": "162 28 175", - "hslChannel": "294.7 72.4% 39.8%" - }, - { - "scale": 800, - "hex": "#86198f", - "rgb": "rgb(134,25,143)", - "hsl": "hsl(295.4,70.2%,32.9%)", - "rgbChannel": "134 25 143", - "hslChannel": "295.4 70.2% 32.9%" - }, - { - "scale": 900, - "hex": "#701a75", - "rgb": "rgb(112,26,117)", - "hsl": "hsl(296.7,63.6%,28%)", - "rgbChannel": "112 26 117", - "hslChannel": "296.7 63.6% 28%" - }, - { - "scale": 950, - "hex": "#4a044e", - "rgb": "rgb(74,4,78)", - "hsl": "hsl(296.8,90.2%,16.1%)", - "rgbChannel": "74 4 78", - "hslChannel": "296.8 90.2% 16.1%" - } - ], - "pink": [ - { - "scale": 50, - "hex": "#fdf2f8", - "rgb": "rgb(253,242,248)", - "hsl": "hsl(327.3,73.3%,97.1%)", - "rgbChannel": "253 242 248", - "hslChannel": "327.3 73.3% 97.1%" - }, - { - "scale": 100, - "hex": "#fce7f3", - "rgb": "rgb(252,231,243)", - "hsl": "hsl(325.7,77.8%,94.7%)", - "rgbChannel": "252 231 243", - "hslChannel": "325.7 77.8% 94.7%" - }, - { - "scale": 200, - "hex": "#fbcfe8", - "rgb": "rgb(251,207,232)", - "hsl": "hsl(325.9,84.6%,89.8%)", - "rgbChannel": "251 207 232", - "hslChannel": "325.9 84.6% 89.8%" - }, - { - "scale": 300, - "hex": "#f9a8d4", - "rgb": "rgb(249,168,212)", - "hsl": "hsl(327.4,87.1%,81.8%)", - "rgbChannel": "249 168 212", - "hslChannel": "327.4 87.1% 81.8%" - }, - { - "scale": 400, - "hex": "#f472b6", - "rgb": "rgb(244,114,182)", - "hsl": "hsl(328.6,85.5%,70.2%)", - "rgbChannel": "244 114 182", - "hslChannel": "328.6 85.5% 70.2%" - }, - { - "scale": 500, - "hex": "#ec4899", - "rgb": "rgb(236,72,153)", - "hsl": "hsl(330.4,81.2%,60.4%)", - "rgbChannel": "236 72 153", - "hslChannel": "330.4 81.2% 60.4%" - }, - { - "scale": 600, - "hex": "#db2777", - "rgb": "rgb(219,39,119)", - "hsl": "hsl(333.3,71.4%,50.6%)", - "rgbChannel": "219 39 119", - "hslChannel": "333.3 71.4% 50.6%" - }, - { - "scale": 700, - "hex": "#be185d", - "rgb": "rgb(190,24,93)", - "hsl": "hsl(335.1,77.6%,42%)", - "rgbChannel": "190 24 93", - "hslChannel": "335.1 77.6% 42%" - }, - { - "scale": 800, - "hex": "#9d174d", - "rgb": "rgb(157,23,77)", - "hsl": "hsl(335.8,74.4%,35.3%)", - "rgbChannel": "157 23 77", - "hslChannel": "335.8 74.4% 35.3%" - }, - { - "scale": 900, - "hex": "#831843", - "rgb": "rgb(131,24,67)", - "hsl": "hsl(335.9,69%,30.4%)", - "rgbChannel": "131 24 67", - "hslChannel": "335.9 69% 30.4%" - }, - { - "scale": 950, - "hex": "#500724", - "rgb": "rgb(80,7,36)", - "hsl": "hsl(336.2,83.9%,17.1%)", - "rgbChannel": "80 7 36", - "hslChannel": "336.2 83.9% 17.1%" - } - ], - "rose": [ - { - "scale": 50, - "hex": "#fff1f2", - "rgb": "rgb(255,241,242)", - "hsl": "hsl(355.7,100%,97.3%)", - "rgbChannel": "255 241 242", - "hslChannel": "355.7 100% 97.3%" - }, - { - "scale": 100, - "hex": "#ffe4e6", - "rgb": "rgb(255,228,230)", - "hsl": "hsl(355.6,100%,94.7%)", - "rgbChannel": "255 228 230", - "hslChannel": "355.6 100% 94.7%" - }, - { - "scale": 200, - "hex": "#fecdd3", - "rgb": "rgb(254,205,211)", - "hsl": "hsl(352.7,96.1%,90%)", - "rgbChannel": "254 205 211", - "hslChannel": "352.7 96.1% 90%" - }, - { - "scale": 300, - "hex": "#fda4af", - "rgb": "rgb(253,164,175)", - "hsl": "hsl(352.6,95.7%,81.8%)", - "rgbChannel": "253 164 175", - "hslChannel": "352.6 95.7% 81.8%" - }, - { - "scale": 400, - "hex": "#fb7185", - "rgb": "rgb(251,113,133)", - "hsl": "hsl(351.3,94.5%,71.4%)", - "rgbChannel": "251 113 133", - "hslChannel": "351.3 94.5% 71.4%" - }, - { - "scale": 500, - "hex": "#f43f5e", - "rgb": "rgb(244,63,94)", - "hsl": "hsl(349.7,89.2%,60.2%)", - "rgbChannel": "244 63 94", - "hslChannel": "349.7 89.2% 60.2%" - }, - { - "scale": 600, - "hex": "#e11d48", - "rgb": "rgb(225,29,72)", - "hsl": "hsl(346.8,77.2%,49.8%)", - "rgbChannel": "225 29 72", - "hslChannel": "346.8 77.2% 49.8%" - }, - { - "scale": 700, - "hex": "#be123c", - "rgb": "rgb(190,18,60)", - "hsl": "hsl(345.3,82.7%,40.8%)", - "rgbChannel": "190 18 60", - "hslChannel": "345.3 82.7% 40.8%" - }, - { - "scale": 800, - "hex": "#9f1239", - "rgb": "rgb(159,18,57)", - "hsl": "hsl(343.4,79.7%,34.7%)", - "rgbChannel": "159 18 57", - "hslChannel": "343.4 79.7% 34.7%" - }, - { - "scale": 900, - "hex": "#881337", - "rgb": "rgb(136,19,55)", - "hsl": "hsl(341.5,75.5%,30.4%)", - "rgbChannel": "136 19 55", - "hslChannel": "341.5 75.5% 30.4%" - }, - { - "scale": 950, - "hex": "#4c0519", - "rgb": "rgb(76,5,25)", - "hsl": "hsl(343.1,87.7%,15.9%)", - "rgbChannel": "76 5 25", - "hslChannel": "343.1 87.7% 15.9%" - } - ] -} \ No newline at end of file diff --git a/public/r/colors/neutral.json b/public/r/colors/neutral.json deleted file mode 100644 index 71688eaf9..000000000 --- a/public/r/colors/neutral.json +++ /dev/null @@ -1,102 +0,0 @@ -{ - "inlineColors": { - "light": { - "background": "white", - "foreground": "neutral-950", - "card": "white", - "card-foreground": "neutral-950", - "popover": "white", - "popover-foreground": "neutral-950", - "primary": "neutral-900", - "primary-foreground": "neutral-50", - "secondary": "neutral-100", - "secondary-foreground": "neutral-900", - "muted": "neutral-100", - "muted-foreground": "neutral-500", - "accent": "neutral-100", - "accent-foreground": "neutral-900", - "destructive": "red-500", - "destructive-foreground": "neutral-50", - "border": "neutral-200", - "input": "neutral-200", - "ring": "neutral-950" - }, - "dark": { - "background": "neutral-950", - "foreground": "neutral-50", - "card": "neutral-950", - "card-foreground": "neutral-50", - "popover": "neutral-950", - "popover-foreground": "neutral-50", - "primary": "neutral-50", - "primary-foreground": "neutral-900", - "secondary": "neutral-800", - "secondary-foreground": "neutral-50", - "muted": "neutral-800", - "muted-foreground": "neutral-400", - "accent": "neutral-800", - "accent-foreground": "neutral-50", - "destructive": "red-900", - "destructive-foreground": "neutral-50", - "border": "neutral-800", - "input": "neutral-800", - "ring": "neutral-300" - } - }, - "cssVars": { - "light": { - "background": "0 0% 100%", - "foreground": "0 0% 3.9%", - "card": "0 0% 100%", - "card-foreground": "0 0% 3.9%", - "popover": "0 0% 100%", - "popover-foreground": "0 0% 3.9%", - "primary": "0 0% 9%", - "primary-foreground": "0 0% 98%", - "secondary": "0 0% 96.1%", - "secondary-foreground": "0 0% 9%", - "muted": "0 0% 96.1%", - "muted-foreground": "0 0% 45.1%", - "accent": "0 0% 96.1%", - "accent-foreground": "0 0% 9%", - "destructive": "0 84.2% 60.2%", - "destructive-foreground": "0 0% 98%", - "border": "0 0% 89.8%", - "input": "0 0% 89.8%", - "ring": "0 0% 3.9%", - "chart-1": "12 76% 61%", - "chart-2": "173 58% 39%", - "chart-3": "197 37% 24%", - "chart-4": "43 74% 66%", - "chart-5": "27 87% 67%" - }, - "dark": { - "background": "0 0% 3.9%", - "foreground": "0 0% 98%", - "card": "0 0% 3.9%", - "card-foreground": "0 0% 98%", - "popover": "0 0% 3.9%", - "popover-foreground": "0 0% 98%", - "primary": "0 0% 98%", - "primary-foreground": "0 0% 9%", - "secondary": "0 0% 14.9%", - "secondary-foreground": "0 0% 98%", - "muted": "0 0% 14.9%", - "muted-foreground": "0 0% 63.9%", - "accent": "0 0% 14.9%", - "accent-foreground": "0 0% 98%", - "destructive": "0 62.8% 30.6%", - "destructive-foreground": "0 0% 98%", - "border": "0 0% 14.9%", - "input": "0 0% 14.9%", - "ring": "0 0% 83.1%", - "chart-1": "220 70% 50%", - "chart-2": "160 60% 45%", - "chart-3": "30 80% 55%", - "chart-4": "280 65% 60%", - "chart-5": "340 75% 55%" - } - }, - "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n ", - "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 0 0% 3.9%;\n --card: 0 0% 100%;\n --card-foreground: 0 0% 3.9%;\n --popover: 0 0% 100%;\n --popover-foreground: 0 0% 3.9%;\n --primary: 0 0% 9%;\n --primary-foreground: 0 0% 98%;\n --secondary: 0 0% 96.1%;\n --secondary-foreground: 0 0% 9%;\n --muted: 0 0% 96.1%;\n --muted-foreground: 0 0% 45.1%;\n --accent: 0 0% 96.1%;\n --accent-foreground: 0 0% 9%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n --border: 0 0% 89.8%;\n --input: 0 0% 89.8%;\n --ring: 0 0% 3.9%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n\n .dark {\n --background: 0 0% 3.9%;\n --foreground: 0 0% 98%;\n --card: 0 0% 3.9%;\n --card-foreground: 0 0% 98%;\n --popover: 0 0% 3.9%;\n --popover-foreground: 0 0% 98%;\n --primary: 0 0% 98%;\n --primary-foreground: 0 0% 9%;\n --secondary: 0 0% 14.9%;\n --secondary-foreground: 0 0% 98%;\n --muted: 0 0% 14.9%;\n --muted-foreground: 0 0% 63.9%;\n --accent: 0 0% 14.9%;\n --accent-foreground: 0 0% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 0% 98%;\n --border: 0 0% 14.9%;\n --input: 0 0% 14.9%;\n --ring: 0 0% 83.1%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" -} \ No newline at end of file diff --git a/public/r/colors/slate.json b/public/r/colors/slate.json deleted file mode 100644 index cb5f964c9..000000000 --- a/public/r/colors/slate.json +++ /dev/null @@ -1,102 +0,0 @@ -{ - "inlineColors": { - "light": { - "background": "white", - "foreground": "slate-950", - "card": "white", - "card-foreground": "slate-950", - "popover": "white", - "popover-foreground": "slate-950", - "primary": "slate-900", - "primary-foreground": "slate-50", - "secondary": "slate-100", - "secondary-foreground": "slate-900", - "muted": "slate-100", - "muted-foreground": "slate-500", - "accent": "slate-100", - "accent-foreground": "slate-900", - "destructive": "red-500", - "destructive-foreground": "slate-50", - "border": "slate-200", - "input": "slate-200", - "ring": "slate-950" - }, - "dark": { - "background": "slate-950", - "foreground": "slate-50", - "card": "slate-950", - "card-foreground": "slate-50", - "popover": "slate-950", - "popover-foreground": "slate-50", - "primary": "slate-50", - "primary-foreground": "slate-900", - "secondary": "slate-800", - "secondary-foreground": "slate-50", - "muted": "slate-800", - "muted-foreground": "slate-400", - "accent": "slate-800", - "accent-foreground": "slate-50", - "destructive": "red-900", - "destructive-foreground": "slate-50", - "border": "slate-800", - "input": "slate-800", - "ring": "slate-300" - } - }, - "cssVars": { - "light": { - "background": "0 0% 100%", - "foreground": "222.2 84% 4.9%", - "card": "0 0% 100%", - "card-foreground": "222.2 84% 4.9%", - "popover": "0 0% 100%", - "popover-foreground": "222.2 84% 4.9%", - "primary": "222.2 47.4% 11.2%", - "primary-foreground": "210 40% 98%", - "secondary": "210 40% 96.1%", - "secondary-foreground": "222.2 47.4% 11.2%", - "muted": "210 40% 96.1%", - "muted-foreground": "215.4 16.3% 46.9%", - "accent": "210 40% 96.1%", - "accent-foreground": "222.2 47.4% 11.2%", - "destructive": "0 84.2% 60.2%", - "destructive-foreground": "210 40% 98%", - "border": "214.3 31.8% 91.4%", - "input": "214.3 31.8% 91.4%", - "ring": "222.2 84% 4.9%", - "chart-1": "12 76% 61%", - "chart-2": "173 58% 39%", - "chart-3": "197 37% 24%", - "chart-4": "43 74% 66%", - "chart-5": "27 87% 67%" - }, - "dark": { - "background": "222.2 84% 4.9%", - "foreground": "210 40% 98%", - "card": "222.2 84% 4.9%", - "card-foreground": "210 40% 98%", - "popover": "222.2 84% 4.9%", - "popover-foreground": "210 40% 98%", - "primary": "210 40% 98%", - "primary-foreground": "222.2 47.4% 11.2%", - "secondary": "217.2 32.6% 17.5%", - "secondary-foreground": "210 40% 98%", - "muted": "217.2 32.6% 17.5%", - "muted-foreground": "215 20.2% 65.1%", - "accent": "217.2 32.6% 17.5%", - "accent-foreground": "210 40% 98%", - "destructive": "0 62.8% 30.6%", - "destructive-foreground": "210 40% 98%", - "border": "217.2 32.6% 17.5%", - "input": "217.2 32.6% 17.5%", - "ring": "212.7 26.8% 83.9%", - "chart-1": "220 70% 50%", - "chart-2": "160 60% 45%", - "chart-3": "30 80% 55%", - "chart-4": "280 65% 60%", - "chart-5": "340 75% 55%" - } - }, - "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n ", - "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 222.2 84% 4.9%;\n --card: 0 0% 100%;\n --card-foreground: 222.2 84% 4.9%;\n --popover: 0 0% 100%;\n --popover-foreground: 222.2 84% 4.9%;\n --primary: 222.2 47.4% 11.2%;\n --primary-foreground: 210 40% 98%;\n --secondary: 210 40% 96.1%;\n --secondary-foreground: 222.2 47.4% 11.2%;\n --muted: 210 40% 96.1%;\n --muted-foreground: 215.4 16.3% 46.9%;\n --accent: 210 40% 96.1%;\n --accent-foreground: 222.2 47.4% 11.2%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 40% 98%;\n --border: 214.3 31.8% 91.4%;\n --input: 214.3 31.8% 91.4%;\n --ring: 222.2 84% 4.9%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n\n .dark {\n --background: 222.2 84% 4.9%;\n --foreground: 210 40% 98%;\n --card: 222.2 84% 4.9%;\n --card-foreground: 210 40% 98%;\n --popover: 222.2 84% 4.9%;\n --popover-foreground: 210 40% 98%;\n --primary: 210 40% 98%;\n --primary-foreground: 222.2 47.4% 11.2%;\n --secondary: 217.2 32.6% 17.5%;\n --secondary-foreground: 210 40% 98%;\n --muted: 217.2 32.6% 17.5%;\n --muted-foreground: 215 20.2% 65.1%;\n --accent: 217.2 32.6% 17.5%;\n --accent-foreground: 210 40% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 40% 98%;\n --border: 217.2 32.6% 17.5%;\n --input: 217.2 32.6% 17.5%;\n --ring: 212.7 26.8% 83.9%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" -} \ No newline at end of file diff --git a/public/r/colors/stone.json b/public/r/colors/stone.json deleted file mode 100644 index 4a793b873..000000000 --- a/public/r/colors/stone.json +++ /dev/null @@ -1,102 +0,0 @@ -{ - "inlineColors": { - "light": { - "background": "white", - "foreground": "stone-950", - "card": "white", - "card-foreground": "stone-950", - "popover": "white", - "popover-foreground": "stone-950", - "primary": "stone-900", - "primary-foreground": "stone-50", - "secondary": "stone-100", - "secondary-foreground": "stone-900", - "muted": "stone-100", - "muted-foreground": "stone-500", - "accent": "stone-100", - "accent-foreground": "stone-900", - "destructive": "red-500", - "destructive-foreground": "stone-50", - "border": "stone-200", - "input": "stone-200", - "ring": "stone-950" - }, - "dark": { - "background": "stone-950", - "foreground": "stone-50", - "card": "stone-950", - "card-foreground": "stone-50", - "popover": "stone-950", - "popover-foreground": "stone-50", - "primary": "stone-50", - "primary-foreground": "stone-900", - "secondary": "stone-800", - "secondary-foreground": "stone-50", - "muted": "stone-800", - "muted-foreground": "stone-400", - "accent": "stone-800", - "accent-foreground": "stone-50", - "destructive": "red-900", - "destructive-foreground": "stone-50", - "border": "stone-800", - "input": "stone-800", - "ring": "stone-300" - } - }, - "cssVars": { - "light": { - "background": "0 0% 100%", - "foreground": "20 14.3% 4.1%", - "card": "0 0% 100%", - "card-foreground": "20 14.3% 4.1%", - "popover": "0 0% 100%", - "popover-foreground": "20 14.3% 4.1%", - "primary": "24 9.8% 10%", - "primary-foreground": "60 9.1% 97.8%", - "secondary": "60 4.8% 95.9%", - "secondary-foreground": "24 9.8% 10%", - "muted": "60 4.8% 95.9%", - "muted-foreground": "25 5.3% 44.7%", - "accent": "60 4.8% 95.9%", - "accent-foreground": "24 9.8% 10%", - "destructive": "0 84.2% 60.2%", - "destructive-foreground": "60 9.1% 97.8%", - "border": "20 5.9% 90%", - "input": "20 5.9% 90%", - "ring": "20 14.3% 4.1%", - "chart-1": "12 76% 61%", - "chart-2": "173 58% 39%", - "chart-3": "197 37% 24%", - "chart-4": "43 74% 66%", - "chart-5": "27 87% 67%" - }, - "dark": { - "background": "20 14.3% 4.1%", - "foreground": "60 9.1% 97.8%", - "card": "20 14.3% 4.1%", - "card-foreground": "60 9.1% 97.8%", - "popover": "20 14.3% 4.1%", - "popover-foreground": "60 9.1% 97.8%", - "primary": "60 9.1% 97.8%", - "primary-foreground": "24 9.8% 10%", - "secondary": "12 6.5% 15.1%", - "secondary-foreground": "60 9.1% 97.8%", - "muted": "12 6.5% 15.1%", - "muted-foreground": "24 5.4% 63.9%", - "accent": "12 6.5% 15.1%", - "accent-foreground": "60 9.1% 97.8%", - "destructive": "0 62.8% 30.6%", - "destructive-foreground": "60 9.1% 97.8%", - "border": "12 6.5% 15.1%", - "input": "12 6.5% 15.1%", - "ring": "24 5.7% 82.9%", - "chart-1": "220 70% 50%", - "chart-2": "160 60% 45%", - "chart-3": "30 80% 55%", - "chart-4": "280 65% 60%", - "chart-5": "340 75% 55%" - } - }, - "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n ", - "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 20 14.3% 4.1%;\n --card: 0 0% 100%;\n --card-foreground: 20 14.3% 4.1%;\n --popover: 0 0% 100%;\n --popover-foreground: 20 14.3% 4.1%;\n --primary: 24 9.8% 10%;\n --primary-foreground: 60 9.1% 97.8%;\n --secondary: 60 4.8% 95.9%;\n --secondary-foreground: 24 9.8% 10%;\n --muted: 60 4.8% 95.9%;\n --muted-foreground: 25 5.3% 44.7%;\n --accent: 60 4.8% 95.9%;\n --accent-foreground: 24 9.8% 10%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 60 9.1% 97.8%;\n --border: 20 5.9% 90%;\n --input: 20 5.9% 90%;\n --ring: 20 14.3% 4.1%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n\n .dark {\n --background: 20 14.3% 4.1%;\n --foreground: 60 9.1% 97.8%;\n --card: 20 14.3% 4.1%;\n --card-foreground: 60 9.1% 97.8%;\n --popover: 20 14.3% 4.1%;\n --popover-foreground: 60 9.1% 97.8%;\n --primary: 60 9.1% 97.8%;\n --primary-foreground: 24 9.8% 10%;\n --secondary: 12 6.5% 15.1%;\n --secondary-foreground: 60 9.1% 97.8%;\n --muted: 12 6.5% 15.1%;\n --muted-foreground: 24 5.4% 63.9%;\n --accent: 12 6.5% 15.1%;\n --accent-foreground: 60 9.1% 97.8%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 60 9.1% 97.8%;\n --border: 12 6.5% 15.1%;\n --input: 12 6.5% 15.1%;\n --ring: 24 5.7% 82.9%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" -} \ No newline at end of file diff --git a/public/r/colors/zinc.json b/public/r/colors/zinc.json deleted file mode 100644 index c2f6a18e6..000000000 --- a/public/r/colors/zinc.json +++ /dev/null @@ -1,102 +0,0 @@ -{ - "inlineColors": { - "light": { - "background": "white", - "foreground": "zinc-950", - "card": "white", - "card-foreground": "zinc-950", - "popover": "white", - "popover-foreground": "zinc-950", - "primary": "zinc-900", - "primary-foreground": "zinc-50", - "secondary": "zinc-100", - "secondary-foreground": "zinc-900", - "muted": "zinc-100", - "muted-foreground": "zinc-500", - "accent": "zinc-100", - "accent-foreground": "zinc-900", - "destructive": "red-500", - "destructive-foreground": "zinc-50", - "border": "zinc-200", - "input": "zinc-200", - "ring": "zinc-950" - }, - "dark": { - "background": "zinc-950", - "foreground": "zinc-50", - "card": "zinc-950", - "card-foreground": "zinc-50", - "popover": "zinc-950", - "popover-foreground": "zinc-50", - "primary": "zinc-50", - "primary-foreground": "zinc-900", - "secondary": "zinc-800", - "secondary-foreground": "zinc-50", - "muted": "zinc-800", - "muted-foreground": "zinc-400", - "accent": "zinc-800", - "accent-foreground": "zinc-50", - "destructive": "red-900", - "destructive-foreground": "zinc-50", - "border": "zinc-800", - "input": "zinc-800", - "ring": "zinc-300" - } - }, - "cssVars": { - "light": { - "background": "0 0% 100%", - "foreground": "240 10% 3.9%", - "card": "0 0% 100%", - "card-foreground": "240 10% 3.9%", - "popover": "0 0% 100%", - "popover-foreground": "240 10% 3.9%", - "primary": "240 5.9% 10%", - "primary-foreground": "0 0% 98%", - "secondary": "240 4.8% 95.9%", - "secondary-foreground": "240 5.9% 10%", - "muted": "240 4.8% 95.9%", - "muted-foreground": "240 3.8% 46.1%", - "accent": "240 4.8% 95.9%", - "accent-foreground": "240 5.9% 10%", - "destructive": "0 84.2% 60.2%", - "destructive-foreground": "0 0% 98%", - "border": "240 5.9% 90%", - "input": "240 5.9% 90%", - "ring": "240 10% 3.9%", - "chart-1": "12 76% 61%", - "chart-2": "173 58% 39%", - "chart-3": "197 37% 24%", - "chart-4": "43 74% 66%", - "chart-5": "27 87% 67%" - }, - "dark": { - "background": "240 10% 3.9%", - "foreground": "0 0% 98%", - "card": "240 10% 3.9%", - "card-foreground": "0 0% 98%", - "popover": "240 10% 3.9%", - "popover-foreground": "0 0% 98%", - "primary": "0 0% 98%", - "primary-foreground": "240 5.9% 10%", - "secondary": "240 3.7% 15.9%", - "secondary-foreground": "0 0% 98%", - "muted": "240 3.7% 15.9%", - "muted-foreground": "240 5% 64.9%", - "accent": "240 3.7% 15.9%", - "accent-foreground": "0 0% 98%", - "destructive": "0 62.8% 30.6%", - "destructive-foreground": "0 0% 98%", - "border": "240 3.7% 15.9%", - "input": "240 3.7% 15.9%", - "ring": "240 4.9% 83.9%", - "chart-1": "220 70% 50%", - "chart-2": "160 60% 45%", - "chart-3": "30 80% 55%", - "chart-4": "280 65% 60%", - "chart-5": "340 75% 55%" - } - }, - "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n ", - "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 240 10% 3.9%;\n --card: 0 0% 100%;\n --card-foreground: 240 10% 3.9%;\n --popover: 0 0% 100%;\n --popover-foreground: 240 10% 3.9%;\n --primary: 240 5.9% 10%;\n --primary-foreground: 0 0% 98%;\n --secondary: 240 4.8% 95.9%;\n --secondary-foreground: 240 5.9% 10%;\n --muted: 240 4.8% 95.9%;\n --muted-foreground: 240 3.8% 46.1%;\n --accent: 240 4.8% 95.9%;\n --accent-foreground: 240 5.9% 10%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n --border: 240 5.9% 90%;\n --input: 240 5.9% 90%;\n --ring: 240 10% 3.9%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n\n .dark {\n --background: 240 10% 3.9%;\n --foreground: 0 0% 98%;\n --card: 240 10% 3.9%;\n --card-foreground: 0 0% 98%;\n --popover: 240 10% 3.9%;\n --popover-foreground: 0 0% 98%;\n --primary: 0 0% 98%;\n --primary-foreground: 240 5.9% 10%;\n --secondary: 240 3.7% 15.9%;\n --secondary-foreground: 0 0% 98%;\n --muted: 240 3.7% 15.9%;\n --muted-foreground: 240 5% 64.9%;\n --accent: 240 3.7% 15.9%;\n --accent-foreground: 0 0% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 0% 98%;\n --border: 240 3.7% 15.9%;\n --input: 240 3.7% 15.9%;\n --ring: 240 4.9% 83.9%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" -} \ No newline at end of file diff --git a/public/r/confetti-basic-cannon.json b/public/r/confetti-basic-cannon.json new file mode 100644 index 000000000..351388685 --- /dev/null +++ b/public/r/confetti-basic-cannon.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "confetti-basic-cannon", + "type": "registry:component", + "files": [ + { + "path": "registry/example/confetti-basic-cannon.tsx", + "content": "import { ConfettiButton } from \"@/registry/magicui/confetti\";\n\nexport default function ConfettiButtonDemo() {\n return (\n
    \n Confetti 🎉\n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/confetti-custom-shapes.json b/public/r/confetti-custom-shapes.json new file mode 100644 index 000000000..dc32b2de5 --- /dev/null +++ b/public/r/confetti-custom-shapes.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "confetti-custom-shapes", + "type": "registry:component", + "files": [ + { + "path": "registry/example/confetti-custom-shapes.tsx", + "content": "import confetti from \"canvas-confetti\";\n\nimport { Button } from \"@/components/ui/button\";\n\nexport default function ConfettiCustomShapes() {\n const handleClick = () => {\n const scalar = 2;\n const triangle = confetti.shapeFromPath({\n path: \"M0 10 L5 0 L10 10z\",\n });\n const square = confetti.shapeFromPath({\n path: \"M0 0 L10 0 L10 10 L0 10 Z\",\n });\n const coin = confetti.shapeFromPath({\n path: \"M5 0 A5 5 0 1 0 5 10 A5 5 0 1 0 5 0 Z\",\n });\n const tree = confetti.shapeFromPath({\n path: \"M5 0 L10 10 L0 10 Z\",\n });\n\n const defaults = {\n spread: 360,\n ticks: 60,\n gravity: 0,\n decay: 0.96,\n startVelocity: 20,\n shapes: [triangle, square, coin, tree],\n scalar,\n };\n\n const shoot = () => {\n confetti({\n ...defaults,\n particleCount: 30,\n });\n\n confetti({\n ...defaults,\n particleCount: 5,\n });\n\n confetti({\n ...defaults,\n particleCount: 15,\n scalar: scalar / 2,\n shapes: [\"circle\"],\n });\n };\n\n setTimeout(shoot, 0);\n setTimeout(shoot, 100);\n setTimeout(shoot, 200);\n };\n\n return (\n
    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/confetti-demo.json b/public/r/confetti-demo.json new file mode 100644 index 000000000..610e2de3a --- /dev/null +++ b/public/r/confetti-demo.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "confetti-demo", + "type": "registry:component", + "files": [ + { + "path": "registry/example/confetti-demo.tsx", + "content": "\"use client\";\n\nimport { useRef } from \"react\";\n\nimport { Confetti, type ConfettiRef } from \"@/registry/magicui/confetti\";\n\nexport default function ConfettiDemo() {\n const confettiRef = useRef(null);\n\n return (\n
    \n \n Confetti\n \n\n {\n confettiRef.current?.fire({});\n }}\n />\n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/confetti-emoji.json b/public/r/confetti-emoji.json new file mode 100644 index 000000000..5208bde1f --- /dev/null +++ b/public/r/confetti-emoji.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "confetti-emoji", + "type": "registry:component", + "files": [ + { + "path": "registry/example/confetti-emoji.tsx", + "content": "import confetti from \"canvas-confetti\";\n\nimport { Button } from \"@/components/ui/button\";\n\nexport default function ConfettiEmoji() {\n const handleClick = () => {\n const scalar = 2;\n const unicorn = confetti.shapeFromText({ text: \"🦄\", scalar });\n\n const defaults = {\n spread: 360,\n ticks: 60,\n gravity: 0,\n decay: 0.96,\n startVelocity: 20,\n shapes: [unicorn],\n scalar,\n };\n\n const shoot = () => {\n confetti({\n ...defaults,\n particleCount: 30,\n });\n\n confetti({\n ...defaults,\n particleCount: 5,\n });\n\n confetti({\n ...defaults,\n particleCount: 15,\n scalar: scalar / 2,\n shapes: [\"circle\"],\n });\n };\n\n setTimeout(shoot, 0);\n setTimeout(shoot, 100);\n setTimeout(shoot, 200);\n };\n\n return (\n
    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/confetti-fireworks.json b/public/r/confetti-fireworks.json new file mode 100644 index 000000000..b9b7604f2 --- /dev/null +++ b/public/r/confetti-fireworks.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "confetti-fireworks", + "type": "registry:component", + "files": [ + { + "path": "registry/example/confetti-fireworks.tsx", + "content": "import confetti from \"canvas-confetti\";\n\nimport { Button } from \"@/components/ui/button\";\n\nexport default function ConfettiFireworks() {\n const handleClick = () => {\n const duration = 5 * 1000;\n const animationEnd = Date.now() + duration;\n const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };\n\n const randomInRange = (min: number, max: number) =>\n Math.random() * (max - min) + min;\n\n const interval = window.setInterval(() => {\n const timeLeft = animationEnd - Date.now();\n\n if (timeLeft <= 0) {\n return clearInterval(interval);\n }\n\n const particleCount = 50 * (timeLeft / duration);\n confetti({\n ...defaults,\n particleCount,\n origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },\n });\n confetti({\n ...defaults,\n particleCount,\n origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },\n });\n }, 250);\n };\n\n return (\n
    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/confetti-random-direction.json b/public/r/confetti-random-direction.json new file mode 100644 index 000000000..1dadf7e31 --- /dev/null +++ b/public/r/confetti-random-direction.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "confetti-random-direction", + "type": "registry:component", + "files": [ + { + "path": "registry/example/confetti-random-direction.tsx", + "content": "import { ConfettiButton } from \"@/registry/magicui/confetti\";\n\nexport default function ConfettiButtonDemo() {\n return (\n
    \n \n Random Confetti 🎉\n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/confetti-side-cannons.json b/public/r/confetti-side-cannons.json new file mode 100644 index 000000000..6430e6528 --- /dev/null +++ b/public/r/confetti-side-cannons.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "confetti-side-cannons", + "type": "registry:component", + "files": [ + { + "path": "registry/example/confetti-side-cannons.tsx", + "content": "import confetti from \"canvas-confetti\";\n\nimport { Button } from \"@/components/ui/button\";\n\nexport default function ConfettiSideCannons() {\n const handleClick = () => {\n const end = Date.now() + 3 * 1000; // 3 seconds\n const colors = [\"#a786ff\", \"#fd8bbc\", \"#eca184\", \"#f8deb1\"];\n\n const frame = () => {\n if (Date.now() > end) return;\n\n confetti({\n particleCount: 2,\n angle: 60,\n spread: 55,\n startVelocity: 60,\n origin: { x: 0, y: 0.5 },\n colors: colors,\n });\n confetti({\n particleCount: 2,\n angle: 120,\n spread: 55,\n startVelocity: 60,\n origin: { x: 1, y: 0.5 },\n colors: colors,\n });\n\n requestAnimationFrame(frame);\n };\n\n frame();\n };\n\n return (\n
    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/confetti-stars.json b/public/r/confetti-stars.json new file mode 100644 index 000000000..a89ad7fa4 --- /dev/null +++ b/public/r/confetti-stars.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "confetti-stars", + "type": "registry:component", + "files": [ + { + "path": "registry/example/confetti-stars.tsx", + "content": "import confetti from \"canvas-confetti\";\n\nimport { Button } from \"@/components/ui/button\";\n\nexport default function ConfettiStars() {\n const handleClick = () => {\n const defaults = {\n spread: 360,\n ticks: 50,\n gravity: 0,\n decay: 0.94,\n startVelocity: 30,\n colors: [\"#FFE400\", \"#FFBD00\", \"#E89400\", \"#FFCA6C\", \"#FDFFB8\"],\n };\n\n const shoot = () => {\n confetti({\n ...defaults,\n particleCount: 40,\n scalar: 1.2,\n shapes: [\"star\"],\n });\n\n confetti({\n ...defaults,\n particleCount: 10,\n scalar: 0.75,\n shapes: [\"circle\"],\n });\n };\n\n setTimeout(shoot, 0);\n setTimeout(shoot, 100);\n setTimeout(shoot, 200);\n };\n\n return (\n
    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/confetti.json b/public/r/confetti.json similarity index 92% rename from public/r/styles/default/confetti.json rename to public/r/confetti.json index 08d33356b..c0369dbed 100644 --- a/public/r/styles/default/confetti.json +++ b/public/r/confetti.json @@ -1,6 +1,9 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "confetti", - "type": "registry:ui", + "type": "registry:component", + "title": "Confetti", + "description": "Confetti animations are best used to delight your users when something special happens", "dependencies": [ "canvas-confetti", "@types/canvas-confetti" @@ -10,10 +13,9 @@ ], "files": [ { - "path": "magicui/confetti.tsx", + "path": "registry/magicui/confetti.tsx", "content": "import type {\n GlobalOptions as ConfettiGlobalOptions,\n CreateTypes as ConfettiInstance,\n Options as ConfettiOptions,\n} from \"canvas-confetti\";\nimport confetti from \"canvas-confetti\";\nimport type { ReactNode } from \"react\";\nimport React, {\n createContext,\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n} from \"react\";\n\nimport { Button, ButtonProps } from \"@/components/ui/button\";\n\ntype Api = {\n fire: (options?: ConfettiOptions) => void;\n};\n\ntype Props = React.ComponentPropsWithRef<\"canvas\"> & {\n options?: ConfettiOptions;\n globalOptions?: ConfettiGlobalOptions;\n manualstart?: boolean;\n children?: ReactNode;\n};\n\nexport type ConfettiRef = Api | null;\n\nconst ConfettiContext = createContext({} as Api);\n\n// Define component first\nconst ConfettiComponent = forwardRef((props, ref) => {\n const {\n options,\n globalOptions = { resize: true, useWorker: true },\n manualstart = false,\n children,\n ...rest\n } = props;\n const instanceRef = useRef(null);\n\n const canvasRef = useCallback(\n (node: HTMLCanvasElement) => {\n if (node !== null) {\n if (instanceRef.current) return;\n instanceRef.current = confetti.create(node, {\n ...globalOptions,\n resize: true,\n });\n } else {\n if (instanceRef.current) {\n instanceRef.current.reset();\n instanceRef.current = null;\n }\n }\n },\n [globalOptions],\n );\n\n const fire = useCallback(\n async (opts = {}) => {\n try {\n await instanceRef.current?.({ ...options, ...opts });\n } catch (error) {\n console.error(\"Confetti error:\", error);\n }\n },\n [options],\n );\n\n const api = useMemo(\n () => ({\n fire,\n }),\n [fire],\n );\n\n useImperativeHandle(ref, () => api, [api]);\n\n useEffect(() => {\n if (!manualstart) {\n (async () => {\n try {\n await fire();\n } catch (error) {\n console.error(\"Confetti effect error:\", error);\n }\n })();\n }\n }, [manualstart, fire]);\n\n return (\n \n \n {children}\n \n );\n});\n\n// Set display name immediately\nConfettiComponent.displayName = \"Confetti\";\n\n// Export as Confetti\nexport const Confetti = ConfettiComponent;\n\ninterface ConfettiButtonProps extends ButtonProps {\n options?: ConfettiOptions &\n ConfettiGlobalOptions & { canvas?: HTMLCanvasElement };\n children?: React.ReactNode;\n}\n\nconst ConfettiButtonComponent = ({\n options,\n children,\n ...props\n}: ConfettiButtonProps) => {\n const handleClick = async (event: React.MouseEvent) => {\n try {\n const rect = event.currentTarget.getBoundingClientRect();\n const x = rect.left + rect.width / 2;\n const y = rect.top + rect.height / 2;\n await confetti({\n ...options,\n origin: {\n x: x / window.innerWidth,\n y: y / window.innerHeight,\n },\n });\n } catch (error) {\n console.error(\"Confetti button error:\", error);\n }\n };\n\n return (\n \n );\n};\n\nConfettiButtonComponent.displayName = \"ConfettiButton\";\n\nexport const ConfettiButton = ConfettiButtonComponent;\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/cool-mode-custom.json b/public/r/cool-mode-custom.json new file mode 100644 index 000000000..47aea930c --- /dev/null +++ b/public/r/cool-mode-custom.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "cool-mode-custom", + "type": "registry:component", + "files": [ + { + "path": "registry/example/cool-mode-custom.tsx", + "content": "import { Button } from \"@/components/ui/button\";\nimport { CoolMode } from \"@/registry/magicui/cool-mode\";\n\nexport default function CoolModeCustom() {\n return (\n
    \n \n \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/cool-mode-demo.json b/public/r/cool-mode-demo.json new file mode 100644 index 000000000..4b35db44b --- /dev/null +++ b/public/r/cool-mode-demo.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "cool-mode-demo", + "type": "registry:component", + "files": [ + { + "path": "registry/example/cool-mode-demo.tsx", + "content": "import { Button } from \"@/components/ui/button\";\nimport { CoolMode } from \"@/registry/magicui/cool-mode\";\n\nexport default function CoolModeDemo() {\n return (\n
    \n \n \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/cool-mode.json b/public/r/cool-mode.json similarity index 96% rename from public/r/styles/default/cool-mode.json rename to public/r/cool-mode.json index c31624243..8a4cebfaf 100644 --- a/public/r/styles/default/cool-mode.json +++ b/public/r/cool-mode.json @@ -1,12 +1,14 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "cool-mode", - "type": "registry:ui", + "type": "registry:component", + "title": "Cool Mode", + "description": "Cool mode effect for buttons, links, and other DOMs", "files": [ { - "path": "magicui/cool-mode.tsx", + "path": "registry/magicui/cool-mode.tsx", "content": "import React, { ReactNode, RefObject, useEffect, useRef } from \"react\";\n\nexport interface BaseParticle {\n element: HTMLElement | SVGSVGElement;\n left: number;\n size: number;\n top: number;\n}\n\nexport interface BaseParticleOptions {\n particle?: string;\n size?: number;\n}\n\nexport interface CoolParticle extends BaseParticle {\n direction: number;\n speedHorz: number;\n speedUp: number;\n spinSpeed: number;\n spinVal: number;\n}\n\nexport interface CoolParticleOptions extends BaseParticleOptions {\n particleCount?: number;\n speedHorz?: number;\n speedUp?: number;\n}\n\nconst getContainer = () => {\n const id = \"_coolMode_effect\";\n let existingContainer = document.getElementById(id);\n\n if (existingContainer) {\n return existingContainer;\n }\n\n const container = document.createElement(\"div\");\n container.setAttribute(\"id\", id);\n container.setAttribute(\n \"style\",\n \"overflow:hidden; position:fixed; height:100%; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:2147483647\",\n );\n\n document.body.appendChild(container);\n\n return container;\n};\n\nlet instanceCounter = 0;\n\nconst applyParticleEffect = (\n element: HTMLElement,\n options?: CoolParticleOptions,\n): (() => void) => {\n instanceCounter++;\n\n const defaultParticle = \"circle\";\n const particleType = options?.particle || defaultParticle;\n const sizes = [15, 20, 25, 35, 45];\n const limit = 45;\n\n let particles: CoolParticle[] = [];\n let autoAddParticle = false;\n let mouseX = 0;\n let mouseY = 0;\n\n const container = getContainer();\n\n function generateParticle() {\n const size =\n options?.size || sizes[Math.floor(Math.random() * sizes.length)];\n const speedHorz = options?.speedHorz || Math.random() * 10;\n const speedUp = options?.speedUp || Math.random() * 25;\n const spinVal = Math.random() * 360;\n const spinSpeed = Math.random() * 35 * (Math.random() <= 0.5 ? -1 : 1);\n const top = mouseY - size / 2;\n const left = mouseX - size / 2;\n const direction = Math.random() <= 0.5 ? -1 : 1;\n\n const particle = document.createElement(\"div\");\n\n if (particleType === \"circle\") {\n const svgNS = \"http://www.w3.org/2000/svg\";\n const circleSVG = document.createElementNS(svgNS, \"svg\");\n const circle = document.createElementNS(svgNS, \"circle\");\n circle.setAttributeNS(null, \"cx\", (size / 2).toString());\n circle.setAttributeNS(null, \"cy\", (size / 2).toString());\n circle.setAttributeNS(null, \"r\", (size / 2).toString());\n circle.setAttributeNS(\n null,\n \"fill\",\n `hsl(${Math.random() * 360}, 70%, 50%)`,\n );\n\n circleSVG.appendChild(circle);\n circleSVG.setAttribute(\"width\", size.toString());\n circleSVG.setAttribute(\"height\", size.toString());\n\n particle.appendChild(circleSVG);\n } else {\n particle.innerHTML = ``;\n }\n\n particle.style.position = \"absolute\";\n particle.style.transform = `translate3d(${left}px, ${top}px, 0px) rotate(${spinVal}deg)`;\n\n container.appendChild(particle);\n\n particles.push({\n direction,\n element: particle,\n left,\n size,\n speedHorz,\n speedUp,\n spinSpeed,\n spinVal,\n top,\n });\n }\n\n function refreshParticles() {\n particles.forEach((p) => {\n p.left = p.left - p.speedHorz * p.direction;\n p.top = p.top - p.speedUp;\n p.speedUp = Math.min(p.size, p.speedUp - 1);\n p.spinVal = p.spinVal + p.spinSpeed;\n\n if (\n p.top >=\n Math.max(window.innerHeight, document.body.clientHeight) + p.size\n ) {\n particles = particles.filter((o) => o !== p);\n p.element.remove();\n }\n\n p.element.setAttribute(\n \"style\",\n [\n \"position:absolute\",\n \"will-change:transform\",\n `top:${p.top}px`,\n `left:${p.left}px`,\n `transform:rotate(${p.spinVal}deg)`,\n ].join(\";\"),\n );\n });\n }\n\n let animationFrame: number | undefined;\n\n let lastParticleTimestamp = 0;\n const particleGenerationDelay = 30;\n\n function loop() {\n const currentTime = performance.now();\n if (\n autoAddParticle &&\n particles.length < limit &&\n currentTime - lastParticleTimestamp > particleGenerationDelay\n ) {\n generateParticle();\n lastParticleTimestamp = currentTime;\n }\n\n refreshParticles();\n animationFrame = requestAnimationFrame(loop);\n }\n\n loop();\n\n const isTouchInteraction = \"ontouchstart\" in window;\n\n const tap = isTouchInteraction ? \"touchstart\" : \"mousedown\";\n const tapEnd = isTouchInteraction ? \"touchend\" : \"mouseup\";\n const move = isTouchInteraction ? \"touchmove\" : \"mousemove\";\n\n const updateMousePosition = (e: MouseEvent | TouchEvent) => {\n if (\"touches\" in e) {\n mouseX = e.touches?.[0].clientX;\n mouseY = e.touches?.[0].clientY;\n } else {\n mouseX = e.clientX;\n mouseY = e.clientY;\n }\n };\n\n const tapHandler = (e: MouseEvent | TouchEvent) => {\n updateMousePosition(e);\n autoAddParticle = true;\n };\n\n const disableAutoAddParticle = () => {\n autoAddParticle = false;\n };\n\n element.addEventListener(move, updateMousePosition, { passive: true });\n element.addEventListener(tap, tapHandler, { passive: true });\n element.addEventListener(tapEnd, disableAutoAddParticle, { passive: true });\n element.addEventListener(\"mouseleave\", disableAutoAddParticle, {\n passive: true,\n });\n\n return () => {\n element.removeEventListener(move, updateMousePosition);\n element.removeEventListener(tap, tapHandler);\n element.removeEventListener(tapEnd, disableAutoAddParticle);\n element.removeEventListener(\"mouseleave\", disableAutoAddParticle);\n\n const interval = setInterval(() => {\n if (animationFrame && particles.length === 0) {\n cancelAnimationFrame(animationFrame);\n clearInterval(interval);\n\n if (--instanceCounter === 0) {\n container.remove();\n }\n }\n }, 500);\n };\n};\n\ninterface CoolModeProps {\n children: ReactNode;\n options?: CoolParticleOptions;\n}\n\nexport const CoolMode: React.FC = ({ children, options }) => {\n const ref = useRef(null);\n\n useEffect(() => {\n if (ref.current) {\n return applyParticleEffect(ref.current, options);\n }\n }, [options]);\n\n return React.cloneElement(children as React.ReactElement, { ref });\n};\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/dock-demo-2.json b/public/r/dock-demo-2.json new file mode 100644 index 000000000..e07293ef3 --- /dev/null +++ b/public/r/dock-demo-2.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "dock-demo-2", + "type": "registry:component", + "registryDependencies": [ + "dock" + ], + "files": [ + { + "path": "registry/example/dock-demo-2.tsx", + "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { Dock, DockIcon } from \"@/registry/magicui/dock\";\n\nexport type IconProps = React.HTMLAttributes;\n\nexport default function DockDemo() {\n return (\n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n );\n}\n\nconst Icons = {\n gitHub: (props: IconProps) => (\n \n     \n \n ),\n notion: (props: IconProps) => (\n \n \n \n \n ),\n googleDrive: (props: IconProps) => (\n \n \n \n \n \n \n \n \n ),\n whatsapp: (props: IconProps) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ),\n};\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/dock-demo-3.json b/public/r/dock-demo-3.json new file mode 100644 index 000000000..e9bfaf3cc --- /dev/null +++ b/public/r/dock-demo-3.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "dock-demo-3", + "type": "registry:component", + "registryDependencies": [ + "dock" + ], + "files": [ + { + "path": "registry/example/dock-demo-3.tsx", + "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { Dock, DockIcon } from \"@/registry/magicui/dock\";\n\nexport type IconProps = React.HTMLAttributes;\n\nexport default function DockDemo() {\n return (\n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n );\n}\n\nconst Icons = {\n gitHub: (props: IconProps) => (\n \n     \n \n ),\n notion: (props: IconProps) => (\n \n \n \n \n ),\n googleDrive: (props: IconProps) => (\n \n \n \n \n \n \n \n \n ),\n whatsapp: (props: IconProps) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ),\n};\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/dock-demo.json b/public/r/dock-demo.json new file mode 100644 index 000000000..d3577b13c --- /dev/null +++ b/public/r/dock-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "dock-demo", + "type": "registry:component", + "registryDependencies": [ + "dock" + ], + "files": [ + { + "path": "registry/example/dock-demo.tsx", + "content": "\"use client\";\n\nimport { CalendarIcon, HomeIcon, MailIcon, PencilIcon } from \"lucide-react\";\nimport Link from \"next/link\";\nimport React from \"react\";\n\nimport { ModeToggle } from \"@/components/mode-toggle\";\nimport { buttonVariants } from \"@/components/ui/button\";\nimport { Separator } from \"@/components/ui/separator\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\nimport { Dock, DockIcon } from \"@/registry/magicui/dock\";\n\nexport type IconProps = React.HTMLAttributes;\n\nconst Icons = {\n calendar: (props: IconProps) => ,\n email: (props: IconProps) => ,\n linkedin: (props: IconProps) => (\n \n LinkedIn\n \n \n ),\n x: (props: IconProps) => (\n \n X\n \n \n ),\n youtube: (props: IconProps) => (\n \n youtube\n \n \n ),\n github: (props: IconProps) => (\n \n \n \n ),\n};\n\nconst DATA = {\n navbar: [\n { href: \"#\", icon: HomeIcon, label: \"Home\" },\n { href: \"#\", icon: PencilIcon, label: \"Blog\" },\n ],\n contact: {\n social: {\n GitHub: {\n name: \"GitHub\",\n url: \"#\",\n icon: Icons.github,\n },\n LinkedIn: {\n name: \"LinkedIn\",\n url: \"#\",\n icon: Icons.linkedin,\n },\n X: {\n name: \"X\",\n url: \"#\",\n icon: Icons.x,\n },\n email: {\n name: \"Send Email\",\n url: \"#\",\n icon: Icons.email,\n },\n },\n },\n};\n\nexport default function DockDemo() {\n return (\n
    \n \n Dock\n \n \n \n {DATA.navbar.map((item) => (\n \n \n \n \n \n \n \n \n

    {item.label}

    \n     \n     \n     \n ))}\n \n {Object.entries(DATA.contact.social).map(([name, social]) => (\n \n \n \n \n \n \n \n \n

    {name}

    \n     \n     \n     \n ))}\n \n \n \n \n \n \n \n

    Theme

    \n     \n     \n     \n     \n     \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/dock.json b/public/r/dock.json similarity index 92% rename from public/r/styles/default/dock.json rename to public/r/dock.json index 76c5190eb..e2bf7df79 100644 --- a/public/r/styles/default/dock.json +++ b/public/r/dock.json @@ -1,15 +1,17 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dock", - "type": "registry:ui", + "type": "registry:component", + "title": "Dock", + "description": "An implementation of the MacOS dock using react + tailwindcss + framer motion", "dependencies": [ "motion" ], "files": [ { - "path": "magicui/dock.tsx", + "path": "registry/magicui/dock.tsx", "content": "\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n motion,\n MotionProps,\n MotionValue,\n useMotionValue,\n useSpring,\n useTransform,\n} from \"motion/react\";\nimport React, { PropsWithChildren, useRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface DockProps extends VariantProps {\n className?: string;\n iconSize?: number;\n iconMagnification?: number;\n iconDistance?: number;\n direction?: \"top\" | \"middle\" | \"bottom\";\n children: React.ReactNode;\n}\n\nconst DEFAULT_SIZE = 40;\nconst DEFAULT_MAGNIFICATION = 60;\nconst DEFAULT_DISTANCE = 140;\n\nconst dockVariants = cva(\n \"supports-backdrop-blur:bg-white/10 supports-backdrop-blur:dark:bg-black/10 mx-auto mt-8 flex h-[58px] w-max items-center justify-center gap-2 rounded-2xl border p-2 backdrop-blur-md\",\n);\n\nconst Dock = React.forwardRef(\n (\n {\n className,\n children,\n iconSize = DEFAULT_SIZE,\n iconMagnification = DEFAULT_MAGNIFICATION,\n iconDistance = DEFAULT_DISTANCE,\n direction = \"middle\",\n ...props\n },\n ref,\n ) => {\n const mouseX = useMotionValue(Infinity);\n\n const renderChildren = () => {\n return React.Children.map(children, (child) => {\n if (React.isValidElement(child) && child.type === DockIcon) {\n return React.cloneElement(child, {\n ...child.props,\n mouseX: mouseX,\n size: iconSize,\n magnification: iconMagnification,\n distance: iconDistance,\n });\n }\n return child;\n });\n };\n\n return (\n mouseX.set(e.pageX)}\n onMouseLeave={() => mouseX.set(Infinity)}\n {...props}\n className={cn(dockVariants({ className }), {\n \"items-start\": direction === \"top\",\n \"items-center\": direction === \"middle\",\n \"items-end\": direction === \"bottom\",\n })}\n >\n {renderChildren()}\n \n );\n },\n);\n\nDock.displayName = \"Dock\";\n\nexport interface DockIconProps\n extends Omit, \"children\"> {\n size?: number;\n magnification?: number;\n distance?: number;\n mouseX?: MotionValue;\n className?: string;\n children?: React.ReactNode;\n props?: PropsWithChildren;\n}\n\nconst DockIcon = ({\n size = DEFAULT_SIZE,\n magnification = DEFAULT_MAGNIFICATION,\n distance = DEFAULT_DISTANCE,\n mouseX,\n className,\n children,\n ...props\n}: DockIconProps) => {\n const ref = useRef(null);\n const padding = Math.max(6, size * 0.2);\n const defaultMouseX = useMotionValue(Infinity);\n\n const distanceCalc = useTransform(mouseX ?? defaultMouseX, (val: number) => {\n const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };\n return val - bounds.x - bounds.width / 2;\n });\n\n const sizeTransform = useTransform(\n distanceCalc,\n [-distance, 0, distance],\n [size, magnification, size],\n );\n\n const scaleSize = useSpring(sizeTransform, {\n mass: 0.1,\n stiffness: 150,\n damping: 12,\n });\n\n return (\n \n {children}\n \n );\n};\n\nDockIcon.displayName = \"DockIcon\";\n\nexport { Dock, DockIcon, dockVariants };\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/dot-pattern-demo.json b/public/r/dot-pattern-demo.json new file mode 100644 index 000000000..864b486be --- /dev/null +++ b/public/r/dot-pattern-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "dot-pattern-demo", + "type": "registry:component", + "registryDependencies": [ + "dot-pattern" + ], + "files": [ + { + "path": "registry/example/dot-pattern-demo.tsx", + "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { DotPattern } from \"@/registry/magicui/dot-pattern\";\n\nexport default function DotPatternDemo() {\n return (\n
    \n

    \n Dot Pattern\n

    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/dot-pattern-linear-gradient.json b/public/r/dot-pattern-linear-gradient.json new file mode 100644 index 000000000..abb8cf4b4 --- /dev/null +++ b/public/r/dot-pattern-linear-gradient.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "dot-pattern-linear-gradient", + "type": "registry:component", + "registryDependencies": [ + "dot-pattern" + ], + "files": [ + { + "path": "registry/example/dot-pattern-linear-gradient.tsx", + "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { DotPattern } from \"@/registry/magicui/dot-pattern\";\n\nexport default function DotPatternLinearGradient() {\n return (\n
    \n

    \n Dot Pattern\n

    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/dot-pattern.json b/public/r/dot-pattern.json similarity index 80% rename from public/r/styles/default/dot-pattern.json rename to public/r/dot-pattern.json index ca945fdba..a06a3f0cb 100644 --- a/public/r/styles/default/dot-pattern.json +++ b/public/r/dot-pattern.json @@ -1,12 +1,14 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dot-pattern", - "type": "registry:ui", + "type": "registry:component", + "title": "Dot Pattern", + "description": "A background dot pattern made with SVGs, fully customizable using Tailwind CSS.", "files": [ { - "path": "magicui/dot-pattern.tsx", + "path": "registry/magicui/dot-pattern.tsx", "content": "import { useId } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface DotPatternProps extends React.SVGProps {\n width?: number;\n height?: number;\n x?: number;\n y?: number;\n cx?: number;\n cy?: number;\n cr?: number;\n className?: string;\n [key: string]: unknown;\n}\nexport function DotPattern({\n width = 16,\n height = 16,\n x = 0,\n y = 0,\n cx = 1,\n cy = 1,\n cr = 1,\n className,\n ...props\n}: DotPatternProps) {\n const id = useId();\n\n return (\n \n \n \n \n \n \n \n \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/file-tree-demo.json b/public/r/file-tree-demo.json new file mode 100644 index 000000000..9a0465b41 --- /dev/null +++ b/public/r/file-tree-demo.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "file-tree-demo", + "type": "registry:component", + "files": [ + { + "path": "registry/example/file-tree-demo.tsx", + "content": "import { File, Folder, Tree } from \"@/registry/magicui/file-tree\";\n\nexport default function FileTreeDemo() {\n return (\n
    \n \n \n \n \n

    layout.tsx

    \n     \n \n

    page.tsx

    \n     \n     \n \n \n \n

    button.tsx

    \n     \n     \n \n

    header.tsx

    \n     \n \n

    footer.tsx

    \n     \n     \n \n \n

    utils.ts

    \n     \n     \n     \n \n
    \n );\n}\n\nconst ELEMENTS = [\n {\n id: \"1\",\n isSelectable: true,\n name: \"src\",\n children: [\n {\n id: \"2\",\n isSelectable: true,\n name: \"app\",\n children: [\n {\n id: \"3\",\n isSelectable: true,\n name: \"layout.tsx\",\n },\n {\n id: \"4\",\n isSelectable: true,\n name: \"page.tsx\",\n },\n ],\n },\n {\n id: \"5\",\n isSelectable: true,\n name: \"components\",\n children: [\n {\n id: \"6\",\n isSelectable: true,\n name: \"header.tsx\",\n },\n {\n id: \"7\",\n isSelectable: true,\n name: \"footer.tsx\",\n },\n ],\n },\n {\n id: \"8\",\n isSelectable: true,\n name: \"lib\",\n children: [\n {\n id: \"9\",\n isSelectable: true,\n name: \"utils.ts\",\n },\n ],\n },\n ],\n },\n];\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/file-tree.json b/public/r/file-tree.json similarity index 97% rename from public/r/styles/default/file-tree.json rename to public/r/file-tree.json index 0e2a4df5a..71cce05f0 100644 --- a/public/r/styles/default/file-tree.json +++ b/public/r/file-tree.json @@ -1,12 +1,14 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "file-tree", - "type": "registry:ui", + "type": "registry:component", + "title": "File Tree", + "description": "A component used to showcase the folder and file structure of a directory.", "files": [ { - "path": "magicui/file-tree.tsx", + "path": "registry/magicui/file-tree.tsx", "content": "\"use client\";\n\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport { FileIcon, FolderIcon, FolderOpenIcon } from \"lucide-react\";\nimport React, {\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useState,\n} from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { cn } from \"@/lib/utils\";\n\ntype TreeViewElement = {\n id: string;\n name: string;\n isSelectable?: boolean;\n children?: TreeViewElement[];\n};\n\ntype TreeContextProps = {\n selectedId: string | undefined;\n expandedItems: string[] | undefined;\n indicator: boolean;\n handleExpand: (id: string) => void;\n selectItem: (id: string) => void;\n setExpandedItems?: React.Dispatch>;\n openIcon?: React.ReactNode;\n closeIcon?: React.ReactNode;\n direction: \"rtl\" | \"ltr\";\n};\n\nconst TreeContext = createContext(null);\n\nconst useTree = () => {\n const context = useContext(TreeContext);\n if (!context) {\n throw new Error(\"useTree must be used within a TreeProvider\");\n }\n return context;\n};\n\ninterface TreeViewComponentProps extends React.HTMLAttributes {}\n\ntype Direction = \"rtl\" | \"ltr\" | undefined;\n\ntype TreeViewProps = {\n initialSelectedId?: string;\n indicator?: boolean;\n elements?: TreeViewElement[];\n initialExpandedItems?: string[];\n openIcon?: React.ReactNode;\n closeIcon?: React.ReactNode;\n} & TreeViewComponentProps;\n\nconst Tree = forwardRef(\n (\n {\n className,\n elements,\n initialSelectedId,\n initialExpandedItems,\n children,\n indicator = true,\n openIcon,\n closeIcon,\n dir,\n ...props\n },\n ref,\n ) => {\n const [selectedId, setSelectedId] = useState(\n initialSelectedId,\n );\n const [expandedItems, setExpandedItems] = useState(\n initialExpandedItems,\n );\n\n const selectItem = useCallback((id: string) => {\n setSelectedId(id);\n }, []);\n\n const handleExpand = useCallback((id: string) => {\n setExpandedItems((prev) => {\n if (prev?.includes(id)) {\n return prev.filter((item) => item !== id);\n }\n return [...(prev ?? []), id];\n });\n }, []);\n\n const expandSpecificTargetedElements = useCallback(\n (elements?: TreeViewElement[], selectId?: string) => {\n if (!elements || !selectId) return;\n const findParent = (\n currentElement: TreeViewElement,\n currentPath: string[] = [],\n ) => {\n const isSelectable = currentElement.isSelectable ?? true;\n const newPath = [...currentPath, currentElement.id];\n if (currentElement.id === selectId) {\n if (isSelectable) {\n setExpandedItems((prev) => [...(prev ?? []), ...newPath]);\n } else {\n if (newPath.includes(currentElement.id)) {\n newPath.pop();\n setExpandedItems((prev) => [...(prev ?? []), ...newPath]);\n }\n }\n return;\n }\n if (\n isSelectable &&\n currentElement.children &&\n currentElement.children.length > 0\n ) {\n currentElement.children.forEach((child) => {\n findParent(child, newPath);\n });\n }\n };\n elements.forEach((element) => {\n findParent(element);\n });\n },\n [],\n );\n\n useEffect(() => {\n if (initialSelectedId) {\n expandSpecificTargetedElements(elements, initialSelectedId);\n }\n }, [initialSelectedId, elements]);\n\n const direction = dir === \"rtl\" ? \"rtl\" : \"ltr\";\n\n return (\n \n
    \n \n \n setExpandedItems((prev) => [...(prev ?? []), value[0]])\n }\n dir={dir as Direction}\n >\n {children}\n \n \n
    \n \n );\n },\n);\n\nTree.displayName = \"Tree\";\n\nconst TreeIndicator = forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => {\n const { direction } = useTree();\n\n return (\n \n );\n});\n\nTreeIndicator.displayName = \"TreeIndicator\";\n\ninterface FolderComponentProps\n extends React.ComponentPropsWithoutRef {}\n\ntype FolderProps = {\n expandedItems?: string[];\n element: string;\n isSelectable?: boolean;\n isSelect?: boolean;\n} & FolderComponentProps;\n\nconst Folder = forwardRef<\n HTMLDivElement,\n FolderProps & React.HTMLAttributes\n>(\n (\n {\n className,\n element,\n value,\n isSelectable = true,\n isSelect,\n children,\n ...props\n },\n ref,\n ) => {\n const {\n direction,\n handleExpand,\n expandedItems,\n indicator,\n setExpandedItems,\n openIcon,\n closeIcon,\n } = useTree();\n\n return (\n \n handleExpand(value)}\n >\n {expandedItems?.includes(value)\n ? (openIcon ?? )\n : (closeIcon ?? )}\n {element}\n \n \n {element && indicator && }\n {\n setExpandedItems?.((prev) => [...(prev ?? []), value[0]]);\n }}\n >\n {children}\n \n \n \n );\n },\n);\n\nFolder.displayName = \"Folder\";\n\nconst File = forwardRef<\n HTMLButtonElement,\n {\n value: string;\n handleSelect?: (id: string) => void;\n isSelectable?: boolean;\n isSelect?: boolean;\n fileIcon?: React.ReactNode;\n } & React.ButtonHTMLAttributes\n>(\n (\n {\n value,\n className,\n handleSelect,\n isSelectable = true,\n isSelect,\n fileIcon,\n children,\n ...props\n },\n ref,\n ) => {\n const { direction, selectedId, selectItem } = useTree();\n const isSelected = isSelect ?? selectedId === value;\n return (\n selectItem(value)}\n {...props}\n >\n {fileIcon ?? }\n {children}\n \n );\n },\n);\n\nFile.displayName = \"File\";\n\nconst CollapseButton = forwardRef<\n HTMLButtonElement,\n {\n elements: TreeViewElement[];\n expandAll?: boolean;\n } & React.HTMLAttributes\n>(({ className, elements, expandAll = false, children, ...props }, ref) => {\n const { expandedItems, setExpandedItems } = useTree();\n\n const expendAllTree = useCallback((elements: TreeViewElement[]) => {\n const expandTree = (element: TreeViewElement) => {\n const isSelectable = element.isSelectable ?? true;\n if (isSelectable && element.children && element.children.length > 0) {\n setExpandedItems?.((prev) => [...(prev ?? []), element.id]);\n element.children.forEach(expandTree);\n }\n };\n\n elements.forEach(expandTree);\n }, []);\n\n const closeAll = useCallback(() => {\n setExpandedItems?.([]);\n }, []);\n\n useEffect(() => {\n console.log(expandAll);\n if (expandAll) {\n expendAllTree(elements);\n }\n }, [expandAll]);\n\n return (\n 0\n ? closeAll\n : () => expendAllTree(elements)\n }\n ref={ref}\n {...props}\n >\n {children}\n Toggle\n \n );\n});\n\nCollapseButton.displayName = \"CollapseButton\";\n\nexport { CollapseButton, File, Folder, Tree, type TreeViewElement };\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/flickering-grid-demo.json b/public/r/flickering-grid-demo.json new file mode 100644 index 000000000..0ee254456 --- /dev/null +++ b/public/r/flickering-grid-demo.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "flickering-grid-demo", + "type": "registry:component", + "files": [ + { + "path": "registry/example/flickering-grid-demo.tsx", + "content": "import { FlickeringGrid } from \"@/registry/magicui/flickering-grid\";\n\nexport default function FlickeringGridDemo() {\n return (\n
    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/flickering-grid-rounded-demo.json b/public/r/flickering-grid-rounded-demo.json new file mode 100644 index 000000000..23055414f --- /dev/null +++ b/public/r/flickering-grid-rounded-demo.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "flickering-grid-rounded-demo", + "type": "registry:component", + "files": [ + { + "path": "registry/example/flickering-grid-rounded-demo.tsx", + "content": "import { FlickeringGrid } from \"@/registry/magicui/flickering-grid\";\n\nexport default function FlickeringGridRoundedDemo() {\n return (\n
    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/flickering-grid.json b/public/r/flickering-grid.json similarity index 94% rename from public/r/styles/default/flickering-grid.json rename to public/r/flickering-grid.json index 9a518812b..be6caef25 100644 --- a/public/r/styles/default/flickering-grid.json +++ b/public/r/flickering-grid.json @@ -1,12 +1,14 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "flickering-grid", - "type": "registry:ui", + "type": "registry:component", + "title": "Flickering Grid", + "description": "A flickering grid background made with SVGs, fully customizable using Tailwind CSS.", "files": [ { - "path": "magicui/flickering-grid.tsx", + "path": "registry/magicui/flickering-grid.tsx", "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\ninterface FlickeringGridProps extends React.HTMLAttributes {\n squareSize?: number;\n gridGap?: number;\n flickerChance?: number;\n color?: string;\n width?: number;\n height?: number;\n className?: string;\n maxOpacity?: number;\n}\n\nexport const FlickeringGrid: React.FC = ({\n squareSize = 4,\n gridGap = 6,\n flickerChance = 0.3,\n color = \"rgb(0, 0, 0)\",\n width,\n height,\n className,\n maxOpacity = 0.3,\n ...props\n}) => {\n const canvasRef = useRef(null);\n const containerRef = useRef(null);\n const [isInView, setIsInView] = useState(false);\n const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });\n\n const memoizedColor = useMemo(() => {\n const toRGBA = (color: string) => {\n if (typeof window === \"undefined\") {\n return `rgba(0, 0, 0,`;\n }\n const canvas = document.createElement(\"canvas\");\n canvas.width = canvas.height = 1;\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return \"rgba(255, 0, 0,\";\n ctx.fillStyle = color;\n ctx.fillRect(0, 0, 1, 1);\n const [r, g, b] = Array.from(ctx.getImageData(0, 0, 1, 1).data);\n return `rgba(${r}, ${g}, ${b},`;\n };\n return toRGBA(color);\n }, [color]);\n\n const setupCanvas = useCallback(\n (canvas: HTMLCanvasElement, width: number, height: number) => {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n const cols = Math.floor(width / (squareSize + gridGap));\n const rows = Math.floor(height / (squareSize + gridGap));\n\n const squares = new Float32Array(cols * rows);\n for (let i = 0; i < squares.length; i++) {\n squares[i] = Math.random() * maxOpacity;\n }\n\n return { cols, rows, squares, dpr };\n },\n [squareSize, gridGap, maxOpacity],\n );\n\n const updateSquares = useCallback(\n (squares: Float32Array, deltaTime: number) => {\n for (let i = 0; i < squares.length; i++) {\n if (Math.random() < flickerChance * deltaTime) {\n squares[i] = Math.random() * maxOpacity;\n }\n }\n },\n [flickerChance, maxOpacity],\n );\n\n const drawGrid = useCallback(\n (\n ctx: CanvasRenderingContext2D,\n width: number,\n height: number,\n cols: number,\n rows: number,\n squares: Float32Array,\n dpr: number,\n ) => {\n ctx.clearRect(0, 0, width, height);\n ctx.fillStyle = \"transparent\";\n ctx.fillRect(0, 0, width, height);\n\n for (let i = 0; i < cols; i++) {\n for (let j = 0; j < rows; j++) {\n const opacity = squares[i * rows + j];\n ctx.fillStyle = `${memoizedColor}${opacity})`;\n ctx.fillRect(\n i * (squareSize + gridGap) * dpr,\n j * (squareSize + gridGap) * dpr,\n squareSize * dpr,\n squareSize * dpr,\n );\n }\n }\n },\n [memoizedColor, squareSize, gridGap],\n );\n\n useEffect(() => {\n const canvas = canvasRef.current;\n const container = containerRef.current;\n if (!canvas || !container) return;\n\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return;\n\n let animationFrameId: number;\n let gridParams: ReturnType;\n\n const updateCanvasSize = () => {\n const newWidth = width || container.clientWidth;\n const newHeight = height || container.clientHeight;\n setCanvasSize({ width: newWidth, height: newHeight });\n gridParams = setupCanvas(canvas, newWidth, newHeight);\n };\n\n updateCanvasSize();\n\n let lastTime = 0;\n const animate = (time: number) => {\n if (!isInView) return;\n\n const deltaTime = (time - lastTime) / 1000;\n lastTime = time;\n\n updateSquares(gridParams.squares, deltaTime);\n drawGrid(\n ctx,\n canvas.width,\n canvas.height,\n gridParams.cols,\n gridParams.rows,\n gridParams.squares,\n gridParams.dpr,\n );\n animationFrameId = requestAnimationFrame(animate);\n };\n\n const resizeObserver = new ResizeObserver(() => {\n updateCanvasSize();\n });\n\n resizeObserver.observe(container);\n\n const intersectionObserver = new IntersectionObserver(\n ([entry]) => {\n setIsInView(entry.isIntersecting);\n },\n { threshold: 0 },\n );\n\n intersectionObserver.observe(canvas);\n\n if (isInView) {\n animationFrameId = requestAnimationFrame(animate);\n }\n\n return () => {\n cancelAnimationFrame(animationFrameId);\n resizeObserver.disconnect();\n intersectionObserver.disconnect();\n };\n }, [setupCanvas, updateSquares, drawGrid, width, height, isInView]);\n\n return (\n \n \n \n );\n};\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/flip-text-demo.json b/public/r/flip-text-demo.json new file mode 100644 index 000000000..4d9c462f0 --- /dev/null +++ b/public/r/flip-text-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "flip-text-demo", + "type": "registry:component", + "registryDependencies": [ + "flip-text" + ], + "files": [ + { + "path": "registry/example/flip-text-demo.tsx", + "content": "import { FlipText } from \"@/registry/magicui/flip-text\";\n\nexport default function FlipTextDemo() {\n return (\n \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/flip-text.json b/public/r/flip-text.json similarity index 82% rename from public/r/styles/default/flip-text.json rename to public/r/flip-text.json index 7fcefe739..372f0bfb4 100644 --- a/public/r/styles/default/flip-text.json +++ b/public/r/flip-text.json @@ -1,15 +1,17 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "flip-text", - "type": "registry:ui", + "type": "registry:component", + "title": "Flip Text", + "description": "Text flipping character animation", "dependencies": [ "motion" ], "files": [ { - "path": "magicui/flip-text.tsx", + "path": "registry/magicui/flip-text.tsx", "content": "\"use client\";\n\nimport { AnimatePresence, motion, Variants } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface FlipTextProps {\n word: string;\n duration?: number;\n delayMultiple?: number;\n framerProps?: Variants;\n className?: string;\n}\n\nexport function FlipText({\n word,\n duration = 0.5,\n delayMultiple = 0.08,\n framerProps = {\n hidden: { rotateX: -90, opacity: 0 },\n visible: { rotateX: 0, opacity: 1 },\n },\n className,\n}: FlipTextProps) {\n return (\n
    \n \n {word.split(\"\").map((char, i) => (\n \n {char}\n \n ))}\n \n
    \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/globe-demo.json b/public/r/globe-demo.json new file mode 100644 index 000000000..26286f137 --- /dev/null +++ b/public/r/globe-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "globe-demo", + "type": "registry:component", + "registryDependencies": [ + "globe" + ], + "files": [ + { + "path": "registry/example/globe-demo.tsx", + "content": "import { Globe } from \"@/registry/magicui/globe\";\n\nexport default function GlobeDemo() {\n return (\n
    \n \n Globe\n \n \n
    \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/globe.json b/public/r/globe.json similarity index 92% rename from public/r/styles/default/globe.json rename to public/r/globe.json index a6a58a34f..b3bc0a8b9 100644 --- a/public/r/styles/default/globe.json +++ b/public/r/globe.json @@ -1,15 +1,17 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "globe", - "type": "registry:ui", + "type": "registry:component", + "title": "Globe", + "description": "An autorotating, interactive, and highly performant globe made using WebGL.", "dependencies": [ "cobe" ], "files": [ { - "path": "magicui/globe.tsx", + "path": "registry/magicui/globe.tsx", "content": "\"use client\";\n\nimport createGlobe, { COBEOptions } from \"cobe\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst GLOBE_CONFIG: COBEOptions = {\n width: 800,\n height: 800,\n onRender: () => {},\n devicePixelRatio: 2,\n phi: 0,\n theta: 0.3,\n dark: 0,\n diffuse: 0.4,\n mapSamples: 16000,\n mapBrightness: 1.2,\n baseColor: [1, 1, 1],\n markerColor: [251 / 255, 100 / 255, 21 / 255],\n glowColor: [1, 1, 1],\n markers: [\n { location: [14.5995, 120.9842], size: 0.03 },\n { location: [19.076, 72.8777], size: 0.1 },\n { location: [23.8103, 90.4125], size: 0.05 },\n { location: [30.0444, 31.2357], size: 0.07 },\n { location: [39.9042, 116.4074], size: 0.08 },\n { location: [-23.5505, -46.6333], size: 0.1 },\n { location: [19.4326, -99.1332], size: 0.1 },\n { location: [40.7128, -74.006], size: 0.1 },\n { location: [34.6937, 135.5022], size: 0.05 },\n { location: [41.0082, 28.9784], size: 0.06 },\n ],\n};\n\nexport function Globe({\n className,\n config = GLOBE_CONFIG,\n}: {\n className?: string;\n config?: COBEOptions;\n}) {\n let phi = 0;\n let width = 0;\n const canvasRef = useRef(null);\n const pointerInteracting = useRef(null);\n const pointerInteractionMovement = useRef(0);\n const [r, setR] = useState(0);\n\n const updatePointerInteraction = (value: any) => {\n pointerInteracting.current = value;\n if (canvasRef.current) {\n canvasRef.current.style.cursor = value ? \"grabbing\" : \"grab\";\n }\n };\n\n const updateMovement = (clientX: any) => {\n if (pointerInteracting.current !== null) {\n const delta = clientX - pointerInteracting.current;\n pointerInteractionMovement.current = delta;\n setR(delta / 200);\n }\n };\n\n const onRender = useCallback(\n (state: Record) => {\n if (!pointerInteracting.current) phi += 0.005;\n state.phi = phi + r;\n state.width = width * 2;\n state.height = width * 2;\n },\n [r],\n );\n\n const onResize = () => {\n if (canvasRef.current) {\n width = canvasRef.current.offsetWidth;\n }\n };\n\n useEffect(() => {\n window.addEventListener(\"resize\", onResize);\n onResize();\n\n const globe = createGlobe(canvasRef.current!, {\n ...config,\n width: width * 2,\n height: width * 2,\n onRender,\n });\n\n setTimeout(() => (canvasRef.current!.style.opacity = \"1\"));\n return () => globe.destroy();\n }, []);\n\n return (\n \n \n updatePointerInteraction(\n e.clientX - pointerInteractionMovement.current,\n )\n }\n onPointerUp={() => updatePointerInteraction(null)}\n onPointerOut={() => updatePointerInteraction(null)}\n onMouseMove={(e) => updateMovement(e.clientX)}\n onTouchMove={(e) =>\n e.touches[0] && updateMovement(e.touches[0].clientX)\n }\n />\n
    \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/grid-pattern-dashed.json b/public/r/grid-pattern-dashed.json new file mode 100644 index 000000000..f7df01527 --- /dev/null +++ b/public/r/grid-pattern-dashed.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "grid-pattern-dashed", + "type": "registry:component", + "registryDependencies": [ + "grid-pattern" + ], + "files": [ + { + "path": "registry/example/grid-pattern-dashed.tsx", + "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { GridPattern } from \"@/registry/magicui/grid-pattern\";\n\nexport default function GridPatternDashed() {\n return (\n
    \n

    \n Grid Pattern\n

    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/grid-pattern-demo.json b/public/r/grid-pattern-demo.json new file mode 100644 index 000000000..8cf6ba99e --- /dev/null +++ b/public/r/grid-pattern-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "grid-pattern-demo", + "type": "registry:component", + "registryDependencies": [ + "grid-pattern" + ], + "files": [ + { + "path": "registry/example/grid-pattern-demo.tsx", + "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { GridPattern } from \"@/registry/magicui/grid-pattern\";\n\nexport default function GridPatternDemo() {\n return (\n
    \n

    \n Grid Pattern\n

    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/grid-pattern-linear-gradient.json b/public/r/grid-pattern-linear-gradient.json new file mode 100644 index 000000000..7507a01fb --- /dev/null +++ b/public/r/grid-pattern-linear-gradient.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "grid-pattern-linear-gradient", + "type": "registry:component", + "registryDependencies": [ + "grid-pattern" + ], + "files": [ + { + "path": "registry/example/grid-pattern-linear-gradient.tsx", + "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { GridPattern } from \"@/registry/magicui/grid-pattern\";\n\nexport default function GridPatternLinearGradient() {\n return (\n
    \n

    \n Grid Pattern\n

    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/grid-pattern.json b/public/r/grid-pattern.json similarity index 84% rename from public/r/styles/default/grid-pattern.json rename to public/r/grid-pattern.json index 933d7f1e0..9cbdab8ba 100644 --- a/public/r/styles/default/grid-pattern.json +++ b/public/r/grid-pattern.json @@ -1,12 +1,14 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "grid-pattern", - "type": "registry:ui", + "type": "registry:component", + "title": "Grid Pattern", + "description": "A background grid pattern made with SVGs, fully customizable using Tailwind CSS.", "files": [ { - "path": "magicui/grid-pattern.tsx", + "path": "registry/magicui/grid-pattern.tsx", "content": "import { useId } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface GridPatternProps extends React.SVGProps {\n width?: number;\n height?: number;\n x?: number;\n y?: number;\n squares?: Array<[x: number, y: number]>;\n strokeDasharray?: string;\n className?: string;\n [key: string]: unknown;\n}\n\nexport function GridPattern({\n width = 40,\n height = 40,\n x = -1,\n y = -1,\n strokeDasharray = \"0\",\n squares,\n className,\n ...props\n}: GridPatternProps) {\n const id = useId();\n\n return (\n \n \n \n \n \n \n \n {squares && (\n \n {squares.map(([x, y]) => (\n \n ))}\n \n )}\n \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/hero-video-dialog-demo-top-in-bottom-out.json b/public/r/hero-video-dialog-demo-top-in-bottom-out.json new file mode 100644 index 000000000..1e6fb950e --- /dev/null +++ b/public/r/hero-video-dialog-demo-top-in-bottom-out.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "hero-video-dialog-demo-top-in-bottom-out", + "type": "registry:component", + "files": [ + { + "path": "registry/example/hero-video-dialog-demo-top-in-bottom-out.tsx", + "content": "import HeroVideoDialog from \"@/registry/magicui/hero-video-dialog\";\n\nexport default function HeroVideoDialogDemoTopInBottomOut() {\n return (\n
    \n \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/hero-video-dialog-demo.json b/public/r/hero-video-dialog-demo.json new file mode 100644 index 000000000..932c51be9 --- /dev/null +++ b/public/r/hero-video-dialog-demo.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "hero-video-dialog-demo", + "type": "registry:component", + "files": [ + { + "path": "registry/example/hero-video-dialog-demo.tsx", + "content": "import HeroVideoDialog from \"@/registry/magicui/hero-video-dialog\";\n\nexport default function HeroVideoDialogDemo() {\n return (\n
    \n \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/hero-video-dialog.json b/public/r/hero-video-dialog.json new file mode 100644 index 000000000..59682f52c --- /dev/null +++ b/public/r/hero-video-dialog.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "hero-video-dialog", + "type": "registry:component", + "title": "Hero Video Dialog", + "description": "A hero video dialog component.", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/hero-video-dialog.tsx", + "content": "/* eslint-disable @next/next/no-img-element */\n\"use client\";\n\nimport { useState } from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { Play, XIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype AnimationStyle =\n | \"from-bottom\"\n | \"from-center\"\n | \"from-top\"\n | \"from-left\"\n | \"from-right\"\n | \"fade\"\n | \"top-in-bottom-out\"\n | \"left-in-right-out\";\n\ninterface HeroVideoProps {\n animationStyle?: AnimationStyle;\n videoSrc: string;\n thumbnailSrc: string;\n thumbnailAlt?: string;\n className?: string;\n}\n\nconst animationVariants = {\n \"from-bottom\": {\n initial: { y: \"100%\", opacity: 0 },\n animate: { y: 0, opacity: 1 },\n exit: { y: \"100%\", opacity: 0 },\n },\n \"from-center\": {\n initial: { scale: 0.5, opacity: 0 },\n animate: { scale: 1, opacity: 1 },\n exit: { scale: 0.5, opacity: 0 },\n },\n \"from-top\": {\n initial: { y: \"-100%\", opacity: 0 },\n animate: { y: 0, opacity: 1 },\n exit: { y: \"-100%\", opacity: 0 },\n },\n \"from-left\": {\n initial: { x: \"-100%\", opacity: 0 },\n animate: { x: 0, opacity: 1 },\n exit: { x: \"-100%\", opacity: 0 },\n },\n \"from-right\": {\n initial: { x: \"100%\", opacity: 0 },\n animate: { x: 0, opacity: 1 },\n exit: { x: \"100%\", opacity: 0 },\n },\n fade: {\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n exit: { opacity: 0 },\n },\n \"top-in-bottom-out\": {\n initial: { y: \"-100%\", opacity: 0 },\n animate: { y: 0, opacity: 1 },\n exit: { y: \"100%\", opacity: 0 },\n },\n \"left-in-right-out\": {\n initial: { x: \"-100%\", opacity: 0 },\n animate: { x: 0, opacity: 1 },\n exit: { x: \"100%\", opacity: 0 },\n },\n};\n\nexport default function HeroVideoDialog({\n animationStyle = \"from-center\",\n videoSrc,\n thumbnailSrc,\n thumbnailAlt = \"Video thumbnail\",\n className,\n}: HeroVideoProps) {\n const [isVideoOpen, setIsVideoOpen] = useState(false);\n const selectedAnimation = animationVariants[animationStyle];\n\n return (\n
    \n setIsVideoOpen(true)}\n >\n \n
    \n
    \n \n \n
    \n
    \n
    \n \n \n {isVideoOpen && (\n setIsVideoOpen(false)}\n exit={{ opacity: 0 }}\n className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-md\"\n >\n \n \n \n \n
    \n \n
    \n \n \n )}\n     \n \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/hyper-text-demo.json b/public/r/hyper-text-demo.json new file mode 100644 index 000000000..191624a9c --- /dev/null +++ b/public/r/hyper-text-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "hyper-text-demo", + "type": "registry:component", + "registryDependencies": [ + "hyper-text" + ], + "files": [ + { + "path": "registry/example/hyper-text-demo.tsx", + "content": "import { HyperText } from \"@/registry/magicui/hyper-text\";\n\nexport default function HyperTextDemo() {\n return Hover Me!;\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/hyper-text.json b/public/r/hyper-text.json similarity index 93% rename from public/r/styles/default/hyper-text.json rename to public/r/hyper-text.json index 325d6bc07..250e2066e 100644 --- a/public/r/styles/default/hyper-text.json +++ b/public/r/hyper-text.json @@ -1,15 +1,17 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "hyper-text", - "type": "registry:ui", + "type": "registry:component", + "title": "Hyper Text", + "description": "A text animation that scrambles letters before revealing the final text.", "dependencies": [ "motion" ], "files": [ { - "path": "magicui/hyper-text.tsx", + "path": "registry/magicui/hyper-text.tsx", "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { AnimatePresence, motion, MotionProps } from \"motion/react\";\nimport { useEffect, useRef, useState } from \"react\";\n\ntype CharacterSet = string[] | readonly string[];\n\ninterface HyperTextProps extends MotionProps {\n /** The text content to be animated */\n children: string;\n /** Optional className for styling */\n className?: string;\n /** Duration of the animation in milliseconds */\n duration?: number;\n /** Delay before animation starts in milliseconds */\n delay?: number;\n /** Component to render as - defaults to div */\n as?: React.ElementType;\n /** Whether to start animation when element comes into view */\n startOnView?: boolean;\n /** Whether to trigger animation on hover */\n animateOnHover?: boolean;\n /** Custom character set for scramble effect. Defaults to uppercase alphabet */\n characterSet?: CharacterSet;\n}\n\nconst DEFAULT_CHARACTER_SET = Object.freeze(\n \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\".split(\"\"),\n) as readonly string[];\n\nconst getRandomInt = (max: number): number => Math.floor(Math.random() * max);\n\nexport function HyperText({\n children,\n className,\n duration = 800,\n delay = 0,\n as: Component = \"div\",\n startOnView = false,\n animateOnHover = true,\n characterSet = DEFAULT_CHARACTER_SET,\n ...props\n}: HyperTextProps) {\n const MotionComponent = motion.create(Component, {\n forwardMotionProps: true,\n });\n\n const [displayText, setDisplayText] = useState(() =>\n children.split(\"\"),\n );\n const [isAnimating, setIsAnimating] = useState(false);\n const iterationCount = useRef(0);\n const elementRef = useRef(null);\n\n const handleAnimationTrigger = () => {\n if (animateOnHover && !isAnimating) {\n iterationCount.current = 0;\n setIsAnimating(true);\n }\n };\n\n // Handle animation start based on view or delay\n useEffect(() => {\n if (!startOnView) {\n const startTimeout = setTimeout(() => {\n setIsAnimating(true);\n }, delay);\n return () => clearTimeout(startTimeout);\n }\n\n const observer = new IntersectionObserver(\n ([entry]) => {\n if (entry.isIntersecting) {\n setTimeout(() => {\n setIsAnimating(true);\n }, delay);\n observer.disconnect();\n }\n },\n { threshold: 0.1, rootMargin: \"-30% 0px -30% 0px\" },\n );\n\n if (elementRef.current) {\n observer.observe(elementRef.current);\n }\n\n return () => observer.disconnect();\n }, [delay, startOnView]);\n\n // Handle scramble animation\n useEffect(() => {\n if (!isAnimating) return;\n\n const intervalDuration = duration / (children.length * 10);\n const maxIterations = children.length;\n\n const interval = setInterval(() => {\n if (iterationCount.current < maxIterations) {\n setDisplayText((currentText) =>\n currentText.map((letter, index) =>\n letter === \" \"\n ? letter\n : index <= iterationCount.current\n ? children[index]\n : characterSet[getRandomInt(characterSet.length)],\n ),\n );\n iterationCount.current = iterationCount.current + 0.1;\n } else {\n setIsAnimating(false);\n clearInterval(interval);\n }\n }, intervalDuration);\n\n return () => clearInterval(interval);\n }, [children, duration, isAnimating, characterSet]);\n\n return (\n \n \n {displayText.map((letter, index) => (\n \n {letter.toUpperCase()}\n \n ))}\n \n \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/icon-cloud-demo-2.json b/public/r/icon-cloud-demo-2.json new file mode 100644 index 000000000..5782e9372 --- /dev/null +++ b/public/r/icon-cloud-demo-2.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "icon-cloud-demo-2", + "type": "registry:component", + "registryDependencies": [ + "icon-cloud" + ], + "files": [ + { + "path": "registry/example/icon-cloud-demo-2.tsx", + "content": "import { IconCloud } from \"@/registry/magicui/icon-cloud\";\n\nconst images = [\n \"https://images.unsplash.com/photo-1720048171230-c60d162f93a0?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n \"https://plus.unsplash.com/premium_photo-1675553988173-a5249b5815fe?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n \"https://plus.unsplash.com/premium_photo-1675297844586-534b030564e0?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n \"https://plus.unsplash.com/premium_photo-1675555581018-7f1a352ff9a6?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n \"https://images.unsplash.com/photo-1719937050517-68d4e2a1702e?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n \"https://images.unsplash.com/photo-1720048171230-c60d162f93a0?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n \"https://plus.unsplash.com/premium_photo-1675553988173-a5249b5815fe?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n \"https://plus.unsplash.com/premium_photo-1675297844586-534b030564e0?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n \"https://plus.unsplash.com/premium_photo-1675555581018-7f1a352ff9a6?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n \"https://images.unsplash.com/photo-1719937050517-68d4e2a1702e?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n \"https://images.unsplash.com/photo-1720048171230-c60d162f93a0?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n \"https://plus.unsplash.com/premium_photo-1675553988173-a5249b5815fe?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n \"https://plus.unsplash.com/premium_photo-1675297844586-534b030564e0?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n \"https://plus.unsplash.com/premium_photo-1675555581018-7f1a352ff9a6?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n \"https://images.unsplash.com/photo-1719937050517-68d4e2a1702e?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n];\n\nexport default function IconCloudDemo() {\n return (\n
    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/icon-cloud-demo-3.json b/public/r/icon-cloud-demo-3.json new file mode 100644 index 000000000..5387b87dd --- /dev/null +++ b/public/r/icon-cloud-demo-3.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "icon-cloud-demo-3", + "type": "registry:component", + "registryDependencies": [ + "icon-cloud" + ], + "files": [ + { + "path": "registry/example/icon-cloud-demo-3.tsx", + "content": "import { IconCloud } from \"@/registry/magicui/icon-cloud\";\n\nconst Icons = {\n gitHub: () => (\n \n \n \n ),\n notion: () => (\n \n \n \n \n ),\n openai: () => (\n \n \n \n ),\n googleDrive: () => (\n \n \n \n \n \n \n \n \n ),\n whatsapp: () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ),\n};\n\nexport default function IconCloudDemo() {\n return (\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", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/icon-cloud-demo.json b/public/r/icon-cloud-demo.json new file mode 100644 index 000000000..61f923769 --- /dev/null +++ b/public/r/icon-cloud-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "icon-cloud-demo", + "type": "registry:component", + "registryDependencies": [ + "icon-cloud" + ], + "files": [ + { + "path": "registry/example/icon-cloud-demo.tsx", + "content": "import { IconCloud } from \"@/registry/magicui/icon-cloud\";\n\nconst slugs = [\n \"typescript\",\n \"javascript\",\n \"dart\",\n \"java\",\n \"react\",\n \"flutter\",\n \"android\",\n \"html5\",\n \"css3\",\n \"nodedotjs\",\n \"express\",\n \"nextdotjs\",\n \"prisma\",\n \"amazonaws\",\n \"postgresql\",\n \"firebase\",\n \"nginx\",\n \"vercel\",\n \"testinglibrary\",\n \"jest\",\n \"cypress\",\n \"docker\",\n \"git\",\n \"jira\",\n \"github\",\n \"gitlab\",\n \"visualstudiocode\",\n \"androidstudio\",\n \"sonarqube\",\n \"figma\",\n];\n\nexport default function IconCloudDemo() {\n const images = slugs.map(\n (slug) => `https://cdn.simpleicons.org/${slug}/${slug}`,\n );\n\n return (\n
    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/icon-cloud.json b/public/r/icon-cloud.json similarity index 97% rename from public/r/styles/default/icon-cloud.json rename to public/r/icon-cloud.json index f8524a336..edda983ee 100644 --- a/public/r/styles/default/icon-cloud.json +++ b/public/r/icon-cloud.json @@ -1,13 +1,15 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "icon-cloud", - "type": "registry:ui", + "type": "registry:component", + "title": "Icon Cloud", + "description": "An interactive 3D tag cloud component", "dependencies": [], "files": [ { - "path": "magicui/icon-cloud.tsx", + "path": "registry/magicui/icon-cloud.tsx", "content": "\"use client\";\n\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { renderToString } from \"react-dom/server\";\n\ninterface Icon {\n x: number;\n y: number;\n z: number;\n scale: number;\n opacity: number;\n id: number;\n}\n\ninterface IconCloudProps {\n icons?: React.ReactNode[];\n images?: string[];\n}\n\nfunction easeOutCubic(t: number): number {\n return 1 - Math.pow(1 - t, 3);\n}\n\nexport function IconCloud({ icons, images }: IconCloudProps) {\n const canvasRef = useRef(null);\n const [iconPositions, setIconPositions] = useState([]);\n const [rotation, setRotation] = useState({ x: 0, y: 0 });\n const [isDragging, setIsDragging] = useState(false);\n const [lastMousePos, setLastMousePos] = useState({ x: 0, y: 0 });\n const [mousePos, setMousePos] = useState({ x: 0, y: 0 });\n const [targetRotation, setTargetRotation] = useState<{\n x: number;\n y: number;\n startX: number;\n startY: number;\n distance: number;\n startTime: number;\n duration: number;\n } | null>(null);\n const animationFrameRef = useRef();\n const rotationRef = useRef(rotation);\n const iconCanvasesRef = useRef([]);\n const imagesLoadedRef = useRef([]);\n\n // Create icon canvases once when icons/images change\n useEffect(() => {\n if (!icons && !images) return;\n\n const items = icons || images || [];\n imagesLoadedRef.current = new Array(items.length).fill(false);\n\n const newIconCanvases = items.map((item, index) => {\n const offscreen = document.createElement(\"canvas\");\n offscreen.width = 40;\n offscreen.height = 40;\n const offCtx = offscreen.getContext(\"2d\");\n\n if (offCtx) {\n if (images) {\n // Handle image URLs directly\n const img = new Image();\n img.crossOrigin = \"anonymous\";\n img.src = items[index] as string;\n img.onload = () => {\n offCtx.clearRect(0, 0, offscreen.width, offscreen.height);\n\n // Create circular clipping path\n offCtx.beginPath();\n offCtx.arc(20, 20, 20, 0, Math.PI * 2);\n offCtx.closePath();\n offCtx.clip();\n\n // Draw the image\n offCtx.drawImage(img, 0, 0, 40, 40);\n\n imagesLoadedRef.current[index] = true;\n };\n } else {\n // Handle SVG icons\n offCtx.scale(0.4, 0.4);\n const svgString = renderToString(item as React.ReactElement);\n const img = new Image();\n img.src = \"data:image/svg+xml;base64,\" + btoa(svgString);\n img.onload = () => {\n offCtx.clearRect(0, 0, offscreen.width, offscreen.height);\n offCtx.drawImage(img, 0, 0);\n imagesLoadedRef.current[index] = true;\n };\n }\n }\n return offscreen;\n });\n\n iconCanvasesRef.current = newIconCanvases;\n }, [icons, images]);\n\n // Generate initial icon positions on a sphere\n useEffect(() => {\n const items = icons || images || [];\n const newIcons: Icon[] = [];\n const numIcons = items.length || 20;\n\n // Fibonacci sphere parameters\n const offset = 2 / numIcons;\n const increment = Math.PI * (3 - Math.sqrt(5));\n\n for (let i = 0; i < numIcons; i++) {\n const y = i * offset - 1 + offset / 2;\n const r = Math.sqrt(1 - y * y);\n const phi = i * increment;\n\n const x = Math.cos(phi) * r;\n const z = Math.sin(phi) * r;\n\n newIcons.push({\n x: x * 100,\n y: y * 100,\n z: z * 100,\n scale: 1,\n opacity: 1,\n id: i,\n });\n }\n setIconPositions(newIcons);\n }, [icons, images]);\n\n // Handle mouse events\n const handleMouseDown = (e: React.MouseEvent) => {\n const rect = canvasRef.current?.getBoundingClientRect();\n if (!rect || !canvasRef.current) return;\n\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n\n const ctx = canvasRef.current.getContext(\"2d\");\n if (!ctx) return;\n\n iconPositions.forEach((icon) => {\n const cosX = Math.cos(rotationRef.current.x);\n const sinX = Math.sin(rotationRef.current.x);\n const cosY = Math.cos(rotationRef.current.y);\n const sinY = Math.sin(rotationRef.current.y);\n\n const rotatedX = icon.x * cosY - icon.z * sinY;\n const rotatedZ = icon.x * sinY + icon.z * cosY;\n const rotatedY = icon.y * cosX + rotatedZ * sinX;\n\n const screenX = canvasRef.current!.width / 2 + rotatedX;\n const screenY = canvasRef.current!.height / 2 + rotatedY;\n\n const scale = (rotatedZ + 200) / 300;\n const radius = 20 * scale;\n const dx = x - screenX;\n const dy = y - screenY;\n\n if (dx * dx + dy * dy < radius * radius) {\n const targetX = -Math.atan2(\n icon.y,\n Math.sqrt(icon.x * icon.x + icon.z * icon.z),\n );\n const targetY = Math.atan2(icon.x, icon.z);\n\n const currentX = rotationRef.current.x;\n const currentY = rotationRef.current.y;\n const distance = Math.sqrt(\n Math.pow(targetX - currentX, 2) + Math.pow(targetY - currentY, 2),\n );\n\n const duration = Math.min(2000, Math.max(800, distance * 1000));\n\n setTargetRotation({\n x: targetX,\n y: targetY,\n startX: currentX,\n startY: currentY,\n distance,\n startTime: performance.now(),\n duration,\n });\n return;\n }\n });\n\n setIsDragging(true);\n setLastMousePos({ x: e.clientX, y: e.clientY });\n };\n\n const handleMouseMove = (e: React.MouseEvent) => {\n const rect = canvasRef.current?.getBoundingClientRect();\n if (rect) {\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n setMousePos({ x, y });\n }\n\n if (isDragging) {\n const deltaX = e.clientX - lastMousePos.x;\n const deltaY = e.clientY - lastMousePos.y;\n\n rotationRef.current = {\n x: rotationRef.current.x + deltaY * 0.002,\n y: rotationRef.current.y + deltaX * 0.002,\n };\n\n setLastMousePos({ x: e.clientX, y: e.clientY });\n }\n };\n\n const handleMouseUp = () => {\n setIsDragging(false);\n };\n\n // Animation and rendering\n useEffect(() => {\n const canvas = canvasRef.current;\n const ctx = canvas?.getContext(\"2d\");\n if (!canvas || !ctx) return;\n\n const animate = () => {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n const centerX = canvas.width / 2;\n const centerY = canvas.height / 2;\n const maxDistance = Math.sqrt(centerX * centerX + centerY * centerY);\n const dx = mousePos.x - centerX;\n const dy = mousePos.y - centerY;\n const distance = Math.sqrt(dx * dx + dy * dy);\n const speed = 0.003 + (distance / maxDistance) * 0.01;\n\n if (targetRotation) {\n const elapsed = performance.now() - targetRotation.startTime;\n const progress = Math.min(1, elapsed / targetRotation.duration);\n const easedProgress = easeOutCubic(progress);\n\n rotationRef.current = {\n x:\n targetRotation.startX +\n (targetRotation.x - targetRotation.startX) * easedProgress,\n y:\n targetRotation.startY +\n (targetRotation.y - targetRotation.startY) * easedProgress,\n };\n\n if (progress >= 1) {\n setTargetRotation(null);\n }\n } else if (!isDragging) {\n rotationRef.current = {\n x: rotationRef.current.x + (dy / canvas.height) * speed,\n y: rotationRef.current.y + (dx / canvas.width) * speed,\n };\n }\n\n iconPositions.forEach((icon, index) => {\n const cosX = Math.cos(rotationRef.current.x);\n const sinX = Math.sin(rotationRef.current.x);\n const cosY = Math.cos(rotationRef.current.y);\n const sinY = Math.sin(rotationRef.current.y);\n\n const rotatedX = icon.x * cosY - icon.z * sinY;\n const rotatedZ = icon.x * sinY + icon.z * cosY;\n const rotatedY = icon.y * cosX + rotatedZ * sinX;\n\n const scale = (rotatedZ + 200) / 300;\n const opacity = Math.max(0.2, Math.min(1, (rotatedZ + 150) / 200));\n\n ctx.save();\n ctx.translate(\n canvas.width / 2 + rotatedX,\n canvas.height / 2 + rotatedY,\n );\n ctx.scale(scale, scale);\n ctx.globalAlpha = opacity;\n\n if (icons || images) {\n // Only try to render icons/images if they exist\n if (\n iconCanvasesRef.current[index] &&\n imagesLoadedRef.current[index]\n ) {\n ctx.drawImage(iconCanvasesRef.current[index], -20, -20, 40, 40);\n }\n } else {\n // Show numbered circles if no icons/images are provided\n ctx.beginPath();\n ctx.arc(0, 0, 20, 0, Math.PI * 2);\n ctx.fillStyle = \"#4444ff\";\n ctx.fill();\n ctx.fillStyle = \"white\";\n ctx.textAlign = \"center\";\n ctx.textBaseline = \"middle\";\n ctx.font = \"16px Arial\";\n ctx.fillText(`${icon.id + 1}`, 0, 0);\n }\n\n ctx.restore();\n });\n animationFrameRef.current = requestAnimationFrame(animate);\n };\n\n animate();\n\n return () => {\n if (animationFrameRef.current) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n };\n }, [icons, images, iconPositions, isDragging, mousePos, targetRotation]);\n\n return (\n \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/index.json b/public/r/index.json index 8d098da0f..a9ef59549 100644 --- a/public/r/index.json +++ b/public/r/index.json @@ -1,1166 +1,22 @@ -[ - { - "name": "magic-card", - "type": "registry:ui", - "dependencies": [ - "motion" - ], - "files": [ - { - "path": "magicui/magic-card.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "android", - "type": "registry:ui", - "files": [ - { - "path": "magicui/android.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "warp-background", - "type": "registry:ui", - "dependencies": [ - "motion" - ], - "files": [ - { - "path": "magicui/warp-background.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "line-shadow-text", - "type": "registry:ui", - "dependencies": [ - "motion" - ], - "files": [ - { - "path": "magicui/line-shadow-text.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "terminal", - "type": "registry:ui", - "dependencies": [ - "motion" - ], - "files": [ - { - "path": "magicui/terminal.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "aurora-text", - "type": "registry:ui", - "dependencies": [ - "motion" - ], - "files": [ - { - "path": "magicui/aurora-text.tsx", - "type": "registry:ui" - } - ], - "tailwind": { - "config": { - "theme": { - "extend": { - "colors": { - "color-1": "hsl(var(--color-1))", - "color-2": "hsl(var(--color-2))", - "color-3": "hsl(var(--color-3))", - "color-4": "hsl(var(--color-4))", - "color-5": "hsl(var(--color-5))" - }, - "keyframes": { - "aurora-border": { - "0%, 100%": { - "borderRadius": "37% 29% 27% 27% / 28% 25% 41% 37%" - }, - "25%": { - "borderRadius": "47% 29% 39% 49% / 61% 19% 66% 26%" - }, - "50%": { - "borderRadius": "57% 23% 47% 72% / 63% 17% 66% 33%" - }, - "75%": { - "borderRadius": "28% 49% 29% 100% / 93% 20% 64% 25%" - } - }, - "aurora-1": { - "0%, 100%": { - "top": "0", - "right": "0" - }, - "50%": { - "top": "50%", - "right": "25%" - }, - "75%": { - "top": "25%", - "right": "50%" - } - }, - "aurora-2": { - "0%, 100%": { - "top": "0", - "left": "0" - }, - "60%": { - "top": "75%", - "left": "25%" - }, - "85%": { - "top": "50%", - "left": "50%" - } - }, - "aurora-3": { - "0%, 100%": { - "bottom": "0", - "left": "0" - }, - "40%": { - "bottom": "50%", - "left": "25%" - }, - "65%": { - "bottom": "25%", - "left": "50%" - } - }, - "aurora-4": { - "0%, 100%": { - "bottom": "0", - "right": "0" - }, - "50%": { - "bottom": "25%", - "right": "40%" - }, - "90%": { - "bottom": "50%", - "right": "25%" - } - } - } - } - } - } - }, - "cssVars": { - "light": { - "--color-1": "0 100% 63%", - "--color-2": "270 100% 63%", - "--color-3": "210 100% 63%", - "--color-4": "195 100% 63%", - "--color-5": "90 100% 63%" - }, - "dark": { - "--color-1": "0 100% 63%", - "--color-2": "270 100% 63%", - "--color-3": "210 100% 63%", - "--color-4": "195 100% 63%", - "--color-5": "90 100% 63%" - } - } - }, - { - "name": "morphing-text", - "type": "registry:ui", - "files": [ - { - "path": "magicui/morphing-text.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "scroll-progress", - "type": "registry:ui", - "dependencies": [ - "motion" - ], - "files": [ - { - "path": "magicui/scroll-progress.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "neon-gradient-card", - "type": "registry:ui", - "files": [ - { - "path": "magicui/neon-gradient-card.tsx", - "type": "registry:ui" - } - ], - "tailwind": { - "config": { - "theme": { - "extend": { - "animation": { - "background-position-spin": "background-position-spin 3000ms infinite alternate" - }, - "keyframes": { - "background-position-spin": { - "0%": { - "backgroundPosition": "top center" - }, - "100%": { - "backgroundPosition": "bottom center" - } - } - } - } - } - } - } - }, - { - "name": "meteors", - "type": "registry:ui", - "files": [ - { - "path": "magicui/meteors.tsx", - "type": "registry:ui" - } - ], - "tailwind": { - "config": { - "theme": { - "extend": { - "animation": { - "meteor": "meteor 5s linear infinite" - }, - "keyframes": { - "meteor": { - "0%": { - "transform": "rotate(215deg) translateX(0)", - "opacity": "1" - }, - "70%": { - "opacity": "1" - }, - "100%": { - "transform": "rotate(215deg) translateX(-500px)", - "opacity": "0" - } - } - } - } - } - } - } - }, - { - "name": "grid-pattern", - "type": "registry:ui", - "files": [ - { - "path": "magicui/grid-pattern.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "interactive-grid-pattern", - "type": "registry:ui", - "files": [ - { - "path": "magicui/interactive-grid-pattern.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "dot-pattern", - "type": "registry:ui", - "files": [ - { - "path": "magicui/dot-pattern.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "flickering-grid", - "type": "registry:ui", - "files": [ - { - "path": "magicui/flickering-grid.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "hero-video-dialog", - "type": "registry:ui", - "dependencies": [ - "motion" - ], - "files": [ - { - "path": "magicui/hero-video-dialog.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "code-comparison", - "type": "registry:ui", - "dependencies": [ - "shiki", - "next-themes" - ], - "files": [ - { - "path": "magicui/code-comparison.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "script-copy-btn", - "type": "registry:ui", - "dependencies": [ - "motion", - "shiki", - "next-themes" - ], - "registryDependencies": [ - "button" - ], - "files": [ - { - "path": "magicui/script-copy-btn.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "marquee", - "type": "registry:ui", - "files": [ - { - "path": "magicui/marquee.tsx", - "type": "registry:ui" - } - ], - "tailwind": { - "config": { - "theme": { - "extend": { - "keyframes": { - "marquee": { - "from": { - "transform": "translateX(0)" - }, - "to": { - "transform": "translateX(calc(-100% - var(--gap)))" - } - }, - "marquee-vertical": { - "from": { - "transform": "translateY(0)" - }, - "to": { - "transform": "translateY(calc(-100% - var(--gap)))" - } - } - }, - "animation": { - "marquee": "marquee var(--duration) infinite linear", - "marquee-vertical": "marquee-vertical var(--duration) linear infinite" - } - } - } - } - } - }, - { - "name": "globe", - "type": "registry:ui", - "dependencies": [ - "cobe" - ], - "files": [ - { - "path": "magicui/globe.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "shimmer-button", - "type": "registry:ui", - "files": [ - { - "path": "magicui/shimmer-button.tsx", - "type": "registry:ui" - } - ], - "tailwind": { - "config": { - "theme": { - "extend": { - "animation": { - "shimmer-slide": "shimmer-slide var(--speed) ease-in-out infinite alternate", - "spin-around": "spin-around calc(var(--speed) * 2) infinite linear" - }, - "keyframes": { - "shimmer-slide": { - "to": { - "transform": "translate(calc(100cqw - 100%), 0)" - } - }, - "spin-around": { - "0%": { - "transform": "translateZ(0) rotate(0)" - }, - "15%, 35%": { - "transform": "translateZ(0) rotate(90deg)" - }, - "65%, 85%": { - "transform": "translateZ(0) rotate(270deg)" - }, - "100%": { - "transform": "translateZ(0) rotate(360deg)" - } - } - } - } - } - } - } - }, - { - "name": "tweet-card", - "type": "registry:ui", - "dependencies": [ - "react-tweet" - ], - "files": [ - { - "path": "magicui/tweet-card.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "client-tweet-card", - "type": "registry:ui", - "dependencies": [ - "react-tweet" - ], - "files": [ - { - "path": "magicui/client-tweet-card.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "bento-grid", - "type": "registry:ui", - "dependencies": [ - "@radix-ui/react-icons" - ], - "registryDependencies": [ - "button" - ], - "files": [ - { - "path": "magicui/bento-grid.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "particles", - "type": "registry:ui", - "files": [ - { - "path": "magicui/particles.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "number-ticker", - "type": "registry:ui", - "dependencies": [ - "motion" - ], - "files": [ - { - "path": "magicui/number-ticker.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "ripple", - "type": "registry:ui", - "files": [ - { - "path": "magicui/ripple.tsx", - "type": "registry:ui" - } - ], - "tailwind": { - "config": { - "theme": { - "extend": { - "animation": { - "ripple": "ripple var(--duration,2s) ease calc(var(--i, 0)*.2s) infinite" - }, - "keyframes": { - "ripple": { - "0%, 100%": { - "transform": "translate(-50%, -50%) scale(1)" - }, - "50%": { - "transform": "translate(-50%, -50%) scale(0.9)" - } - } - } - } - } - } - } - }, - { - "name": "retro-grid", - "type": "registry:ui", - "files": [ - { - "path": "magicui/retro-grid.tsx", - "type": "registry:ui" - } - ], - "tailwind": { - "config": { - "theme": { - "extend": { - "animation": { - "grid": "grid 15s linear infinite" - }, - "keyframes": { - "grid": { - "0%": { - "transform": "translateY(-50%)" - }, - "100%": { - "transform": "translateY(0)" - } - } - } - } - } - } - } - }, - { - "name": "animated-list", - "type": "registry:ui", - "dependencies": [ - "motion" - ], - "files": [ - { - "path": "magicui/animated-list.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "animated-shiny-text", - "type": "registry:ui", - "files": [ - { - "path": "magicui/animated-shiny-text.tsx", - "type": "registry:ui" - } - ], - "tailwind": { - "config": { - "theme": { - "extend": { - "animation": { - "shiny-text": "shiny-text 8s infinite" - }, - "keyframes": { - "shiny-text": { - "0%, 90%, 100%": { - "background-position": "calc(-100% - var(--shiny-width)) 0" - }, - "30%, 60%": { - "background-position": "calc(100% + var(--shiny-width)) 0" - } - } - } - } - } - } - } - }, - { - "name": "animated-grid-pattern", - "type": "registry:ui", - "dependencies": [ - "motion" - ], - "files": [ - { - "path": "magicui/animated-grid-pattern.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "border-beam", - "type": "registry:ui", - "files": [ - { - "path": "magicui/border-beam.tsx", - "type": "registry:ui" - } - ], - "tailwind": { - "config": { - "theme": { - "extend": { - "animation": { - "border-beam": "border-beam calc(var(--duration)*1s) infinite linear" - }, - "keyframes": { - "border-beam": { - "100%": { - "offset-distance": "100%" - } - } - } - } - } - } - } - }, - { - "name": "animated-beam", - "type": "registry:ui", - "dependencies": [ - "motion" - ], - "files": [ - { - "path": "magicui/animated-beam.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "text-reveal", - "type": "registry:ui", - "dependencies": [ - "motion" - ], - "files": [ - { - "path": "magicui/text-reveal.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "hyper-text", - "type": "registry:ui", - "dependencies": [ - "motion" - ], - "files": [ - { - "path": "magicui/hyper-text.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "animated-gradient-text", - "type": "registry:ui", - "files": [ - { - "path": "magicui/animated-gradient-text.tsx", - "type": "registry:ui" - } - ], - "tailwind": { - "config": { - "theme": { - "extend": { - "animation": { - "gradient": "gradient 8s linear infinite" - }, - "keyframes": { - "gradient": { - "to": { - "backgroundPosition": "var(--bg-size) 0" - } - } - } - } - } - } - } - }, - { - "name": "orbiting-circles", - "type": "registry:ui", - "files": [ - { - "path": "magicui/orbiting-circles.tsx", - "type": "registry:ui" - } - ], - "tailwind": { - "config": { - "theme": { - "extend": { - "animation": { - "orbit": "orbit calc(var(--duration)*1s) linear infinite" - }, - "keyframes": { - "orbit": { - "0%": { - "transform": "rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) rotate(calc(var(--angle) * -1deg))" - }, - "100%": { - "transform": "rotate(calc(var(--angle) * 1deg + 360deg)) translateY(calc(var(--radius) * 1px)) rotate(calc((var(--angle) * -1deg) - 360deg))" - } - } - } - } - } - } - } - }, - { - "name": "dock", - "type": "registry:ui", - "dependencies": [ - "motion" - ], - "files": [ - { - "path": "magicui/dock.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "word-rotate", - "type": "registry:ui", - "dependencies": [ - "motion" - ], - "files": [ - { - "path": "magicui/word-rotate.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "avatar-circles", - "type": "registry:ui", - "files": [ - { - "path": "magicui/avatar-circles.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "typing-animation", - "type": "registry:ui", - "dependencies": [ - "motion" - ], - "files": [ - { - "path": "magicui/typing-animation.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "sparkles-text", - "type": "registry:ui", - "dependencies": [ - "motion" - ], - "files": [ - { - "path": "magicui/sparkles-text.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "flip-text", - "type": "registry:ui", - "dependencies": [ - "motion" - ], - "files": [ - { - "path": "magicui/flip-text.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "icon-cloud", - "type": "registry:ui", - "dependencies": [], - "files": [ - { - "path": "magicui/icon-cloud.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "text-animate", - "type": "registry:ui", - "dependencies": [ - "motion" - ], - "files": [ - { - "path": "magicui/text-animate.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "scroll-based-velocity", - "type": "registry:ui", - "dependencies": [ - "motion" - ], - "files": [ - { - "path": "magicui/scroll-based-velocity.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "scratch-to-reveal", - "type": "registry:ui", - "dependencies": [ - "motion" - ], - "files": [ - { - "path": "magicui/scratch-to-reveal.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "shiny-button", - "type": "registry:ui", - "dependencies": [ - "motion" - ], - "files": [ - { - "path": "magicui/shiny-button.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "box-reveal", - "type": "registry:ui", - "dependencies": [ - "motion" - ], - "files": [ - { - "path": "magicui/box-reveal.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "shine-border", - "type": "registry:ui", - "files": [ - { - "path": "magicui/shine-border.tsx", - "type": "registry:ui" - } - ], - "tailwind": { - "config": { - "theme": { - "extend": { - "animation": { - "shine": "shine var(--duration) infinite linear" - }, - "keyframes": { - "shine": { - "0%": { - "background-position": "0% 0%" - }, - "50%": { - "background-position": "100% 100%" - }, - "to": { - "background-position": "0% 0%" - } - } - } - } - } - } - } - }, - { - "name": "animated-circular-progress-bar", - "type": "registry:ui", - "files": [ - { - "path": "magicui/animated-circular-progress-bar.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "confetti", - "type": "registry:ui", - "dependencies": [ - "canvas-confetti", - "@types/canvas-confetti" - ], - "registryDependencies": [ - "button" - ], - "files": [ - { - "path": "magicui/confetti.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "animated-subscribe-button", - "type": "registry:ui", - "dependencies": [ - "motion" - ], - "files": [ - { - "path": "magicui/animated-subscribe-button.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "cool-mode", - "type": "registry:ui", - "files": [ - { - "path": "magicui/cool-mode.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "pulsating-button", - "type": "registry:ui", - "files": [ - { - "path": "magicui/pulsating-button.tsx", - "type": "registry:ui" - } - ], - "tailwind": { - "config": { - "theme": { - "extend": { - "animation": { - "pulse": "pulse var(--duration) ease-out infinite" - }, - "keyframes": { - "pulse": { - "0%, 100%": { - "boxShadow": "0 0 0 0 var(--pulse-color)" - }, - "50%": { - "boxShadow": "0 0 0 8px var(--pulse-color)" - } - } - } - } - } - } - } - }, - { - "name": "ripple-button", - "type": "registry:ui", - "files": [ - { - "path": "magicui/ripple-button.tsx", - "type": "registry:ui" - } - ], - "tailwind": { - "config": { - "theme": { - "extend": { - "animation": { - "rippling": "rippling var(--duration) ease-out" - }, - "keyframes": { - "rippling": { - "0%": { - "opacity": "1" - }, - "100%": { - "transform": "scale(2)", - "opacity": "0" - } - } - } - } - } - } - } - }, - { - "name": "file-tree", - "type": "registry:ui", - "files": [ - { - "path": "magicui/file-tree.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "blur-fade", - "type": "registry:ui", - "dependencies": [ - "motion" - ], - "files": [ - { - "path": "magicui/blur-fade.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "safari", - "type": "registry:ui", - "files": [ - { - "path": "magicui/safari.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "iphone-15-pro", - "type": "registry:ui", - "files": [ - { - "path": "magicui/iphone-15-pro.tsx", - "type": "registry:ui" - } - ] - }, - { - "name": "rainbow-button", - "type": "registry:ui", - "files": [ - { - "path": "magicui/rainbow-button.tsx", - "type": "registry:ui" - } - ], - "tailwind": { - "config": { - "theme": { - "extend": { - "colors": { - "color-1": "hsl(var(--color-1))", - "color-2": "hsl(var(--color-2))", - "color-3": "hsl(var(--color-3))", - "color-4": "hsl(var(--color-4))", - "color-5": "hsl(var(--color-5))" - }, - "animation": { - "rainbow": "rainbow var(--speed, 2s) infinite linear" - }, - "keyframes": { - "rainbow": { - "0%": { - "background-position": "0%" - }, - "100%": { - "background-position": "200%" - } - } - } - } - } - } - }, - "cssVars": { - "light": { - "--color-1": "0 100% 63%", - "--color-2": "270 100% 63%", - "--color-3": "210 100% 63%", - "--color-4": "195 100% 63%", - "--color-5": "90 100% 63%" - }, - "dark": { - "--color-1": "0 100% 63%", - "--color-2": "270 100% 63%", - "--color-3": "210 100% 63%", - "--color-4": "195 100% 63%", - "--color-5": "90 100% 63%" - } - } - }, - { - "name": "interactive-hover-button", - "type": "registry:ui", - "files": [ - { - "path": "magicui/interactive-hover-button.tsx", - "type": "registry:ui" - } - ] - } -] \ No newline at end of file +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "index", + "type": "registry:style", + "dependencies": [ + "tailwindcss-animate", + "class-variance-authority", + "lucide-react" + ], + "registryDependencies": [ + "utils" + ], + "files": [], + "tailwind": { + "config": { + "plugins": [ + "require(\"tailwindcss-animate\")" + ] + } + }, + "cssVars": {} +} \ No newline at end of file diff --git a/public/r/interactive-grid-pattern-demo-2.json b/public/r/interactive-grid-pattern-demo-2.json new file mode 100644 index 000000000..5b73088d0 --- /dev/null +++ b/public/r/interactive-grid-pattern-demo-2.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "interactive-grid-pattern-demo-2", + "type": "registry:component", + "registryDependencies": [ + "interactive-grid-pattern" + ], + "files": [ + { + "path": "registry/example/interactive-grid-pattern-demo-2.tsx", + "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { InteractiveGridPattern } from \"@/registry/magicui/interactive-grid-pattern\";\n\nexport default function InteractiveGridPatternDemo() {\n return (\n
    \n

    \n Interactive Grid Pattern\n

    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/interactive-grid-pattern-demo.json b/public/r/interactive-grid-pattern-demo.json new file mode 100644 index 000000000..0c8e7852a --- /dev/null +++ b/public/r/interactive-grid-pattern-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "interactive-grid-pattern-demo", + "type": "registry:component", + "registryDependencies": [ + "interactive-grid-pattern" + ], + "files": [ + { + "path": "registry/example/interactive-grid-pattern-demo.tsx", + "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { InteractiveGridPattern } from \"@/registry/magicui/interactive-grid-pattern\";\n\nexport default function InteractiveGridPatternDemo() {\n return (\n
    \n

    \n Interactive Grid Pattern\n

    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/interactive-grid-pattern.json b/public/r/interactive-grid-pattern.json similarity index 87% rename from public/r/styles/default/interactive-grid-pattern.json rename to public/r/interactive-grid-pattern.json index 9dcfcb8f5..066422d45 100644 --- a/public/r/styles/default/interactive-grid-pattern.json +++ b/public/r/interactive-grid-pattern.json @@ -1,12 +1,14 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "interactive-grid-pattern", - "type": "registry:ui", + "type": "registry:component", + "title": "Interactive Grid Pattern", + "description": "A interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS.", "files": [ { - "path": "magicui/interactive-grid-pattern.tsx", + "path": "registry/magicui/interactive-grid-pattern.tsx", "content": "import { cn } from \"@/lib/utils\";\nimport React, { useState } from \"react\";\n\n/**\n * InteractiveGridPattern is a component that renders a grid pattern with interactive squares.\n *\n * @param width - The width of each square.\n * @param height - The height of each square.\n * @param squares - The number of squares in the grid. The first element is the number of horizontal squares, and the second element is the number of vertical squares.\n * @param className - The class name of the grid.\n * @param squaresClassName - The class name of the squares.\n */\ninterface InteractiveGridPatternProps extends React.SVGProps {\n width?: number;\n height?: number;\n squares?: [number, number]; // [horizontal, vertical]\n className?: string;\n squaresClassName?: string;\n}\n\n/**\n * The InteractiveGridPattern component.\n *\n * @see InteractiveGridPatternProps for the props interface.\n * @returns A React component.\n */\nexport function InteractiveGridPattern({\n width = 40,\n height = 40,\n squares = [24, 24],\n className,\n squaresClassName,\n ...props\n}: InteractiveGridPatternProps) {\n const [horizontal, vertical] = squares;\n const [hoveredSquare, setHoveredSquare] = useState(null);\n\n return (\n \n {Array.from({ length: horizontal * vertical }).map((_, index) => {\n const x = (index % horizontal) * width;\n const y = Math.floor(index / horizontal) * height;\n return (\n setHoveredSquare(index)}\n onMouseLeave={() => setHoveredSquare(null)}\n />\n );\n })}\n \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/interactive-hover-button-demo.json b/public/r/interactive-hover-button-demo.json new file mode 100644 index 000000000..a68f10403 --- /dev/null +++ b/public/r/interactive-hover-button-demo.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "interactive-hover-button-demo", + "type": "registry:component", + "files": [ + { + "path": "registry/example/interactive-hover-button-demo.tsx", + "content": "import { InteractiveHoverButton } from \"@/registry/magicui/interactive-hover-button\";\n\nexport default function InteractiveHoverButtonDemo() {\n return Hover Me;\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/interactive-hover-button.json b/public/r/interactive-hover-button.json similarity index 77% rename from public/r/styles/default/interactive-hover-button.json rename to public/r/interactive-hover-button.json index d7f5cec2d..171a7403a 100644 --- a/public/r/styles/default/interactive-hover-button.json +++ b/public/r/interactive-hover-button.json @@ -1,12 +1,14 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "interactive-hover-button", - "type": "registry:ui", + "type": "registry:component", + "title": "Interactive Hover Button", + "description": "A visually engaging button component that responds to hover with dynamic transitions, adapting smoothly between light and dark modes for enhanced user interactivity.", "files": [ { - "path": "magicui/interactive-hover-button.tsx", + "path": "registry/magicui/interactive-hover-button.tsx", "content": "import React from \"react\";\nimport { ArrowRight } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface InteractiveHoverButtonProps\n extends React.ButtonHTMLAttributes {}\n\nexport const InteractiveHoverButton = React.forwardRef<\n HTMLButtonElement,\n InteractiveHoverButtonProps\n>(({ children, className, ...props }, ref) => {\n return (\n \n
    \n
    \n \n {children}\n \n
    \n
    \n {children}\n \n
    \n \n );\n});\n\nInteractiveHoverButton.displayName = \"InteractiveHoverButton\";\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/iphone-15-pro-demo-2.json b/public/r/iphone-15-pro-demo-2.json new file mode 100644 index 000000000..ff6aa8976 --- /dev/null +++ b/public/r/iphone-15-pro-demo-2.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "iphone-15-pro-demo-2", + "type": "registry:component", + "files": [ + { + "path": "registry/example/iphone-15-pro-demo-2.tsx", + "content": "import Iphone15Pro from \"@/registry/magicui/iphone-15-pro\";\n\nexport default function Iphone15ProDemo() {\n return (\n
    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/iphone-15-pro-demo-3.json b/public/r/iphone-15-pro-demo-3.json new file mode 100644 index 000000000..3b582bf88 --- /dev/null +++ b/public/r/iphone-15-pro-demo-3.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "iphone-15-pro-demo-3", + "type": "registry:component", + "files": [ + { + "path": "registry/example/iphone-15-pro-demo-3.tsx", + "content": "import Iphone15Pro from \"@/registry/magicui/iphone-15-pro\";\n\nexport default function Iphone15ProDemo() {\n return (\n
    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/iphone-15-pro-demo.json b/public/r/iphone-15-pro-demo.json new file mode 100644 index 000000000..f275b5729 --- /dev/null +++ b/public/r/iphone-15-pro-demo.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "iphone-15-pro-demo", + "type": "registry:component", + "files": [ + { + "path": "registry/example/iphone-15-pro-demo.tsx", + "content": "import Iphone15Pro from \"@/registry/magicui/iphone-15-pro\";\n\nexport default function Iphone15ProDemo() {\n return (\n
    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/iphone-15-pro.json b/public/r/iphone-15-pro.json similarity index 93% rename from public/r/styles/default/iphone-15-pro.json rename to public/r/iphone-15-pro.json index 1faac521d..3151a5e6d 100644 --- a/public/r/styles/default/iphone-15-pro.json +++ b/public/r/iphone-15-pro.json @@ -1,12 +1,14 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "iphone-15-pro", - "type": "registry:ui", + "type": "registry:component", + "title": "iPhone 15 Pro", + "description": "A mockup of the iPhone 15 Pro", "files": [ { - "path": "magicui/iphone-15-pro.tsx", + "path": "registry/magicui/iphone-15-pro.tsx", "content": "import { SVGProps } from \"react\";\n\nexport interface Iphone15ProProps extends SVGProps {\n width?: number;\n height?: number;\n src?: string;\n videoSrc?: string;\n}\n\nexport default function Iphone15Pro({\n width = 433,\n height = 882,\n src,\n videoSrc,\n ...props\n}: Iphone15ProProps) {\n return (\n \n \n \n \n \n \n \n \n \n\n {src && (\n \n )}\n {videoSrc && (\n \n \n \n )}\n \n \n \n \n \n \n \n \n \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/line-shadow-text-demo.json b/public/r/line-shadow-text-demo.json new file mode 100644 index 000000000..c927783ff --- /dev/null +++ b/public/r/line-shadow-text-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "line-shadow-text-demo", + "type": "registry:component", + "registryDependencies": [ + "line-shadow-text" + ], + "files": [ + { + "path": "registry/example/line-shadow-text-demo.tsx", + "content": "import { LineShadowText } from \"@/registry/magicui/line-shadow-text\";\nimport { useTheme } from \"next-themes\";\n\nexport default function LineShadowTextDemo() {\n const theme = useTheme();\n const shadowColor = theme.resolvedTheme === \"dark\" ? \"white\" : \"black\";\n return (\n

    \n Ship\n \n Fast\n \n

    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/line-shadow-text.json b/public/r/line-shadow-text.json similarity index 83% rename from public/r/styles/default/line-shadow-text.json rename to public/r/line-shadow-text.json index 3600cc9c4..4b19993eb 100644 --- a/public/r/styles/default/line-shadow-text.json +++ b/public/r/line-shadow-text.json @@ -1,15 +1,17 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "line-shadow-text", - "type": "registry:ui", + "type": "registry:component", + "title": "Line Shadow Text", + "description": "A text component with a moving line shadow.", "dependencies": [ "motion" ], "files": [ { - "path": "magicui/line-shadow-text.tsx", + "path": "registry/magicui/line-shadow-text.tsx", "content": "import { cn } from \"@/lib/utils\";\nimport { motion, MotionProps } from \"motion/react\";\n\ninterface LineShadowTextProps\n extends Omit, keyof MotionProps>,\n MotionProps {\n shadowColor?: string;\n as?: React.ElementType;\n}\n\nexport function LineShadowText({\n children,\n shadowColor = \"black\",\n className,\n as: Component = \"span\",\n ...props\n}: LineShadowTextProps) {\n const MotionComponent = motion.create(Component);\n const content = typeof children === \"string\" ? children : null;\n\n if (!content) {\n throw new Error(\"LineShadowText only accepts string content\");\n }\n\n return (\n \n {content}\n \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/magic-card-demo.json b/public/r/magic-card-demo.json new file mode 100644 index 000000000..3424b106c --- /dev/null +++ b/public/r/magic-card-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "magic-card-demo", + "type": "registry:component", + "registryDependencies": [ + "magic-card" + ], + "files": [ + { + "path": "registry/example/magic-card-demo.tsx", + "content": "import { useTheme } from \"next-themes\";\n\nimport { MagicCard } from \"@/registry/magicui/magic-card\";\n\nexport default function MagicCardDemo() {\n const { theme } = useTheme();\n return (\n \n \n Magic\n \n \n Card\n \n \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/magic-card.json b/public/r/magic-card.json similarity index 92% rename from public/r/styles/default/magic-card.json rename to public/r/magic-card.json index 74a8bad90..cf7ff4702 100644 --- a/public/r/styles/default/magic-card.json +++ b/public/r/magic-card.json @@ -1,15 +1,17 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "magic-card", - "type": "registry:ui", + "type": "registry:component", + "title": "Magic Card", + "description": "A spotlight effect that follows your mouse cursor and highlights borders on hover.", "dependencies": [ "motion" ], "files": [ { - "path": "magicui/magic-card.tsx", + "path": "registry/magicui/magic-card.tsx", "content": "\"use client\";\n\nimport { motion, useMotionTemplate, useMotionValue } from \"motion/react\";\nimport React, { useCallback, useEffect, useRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface MagicCardProps extends React.HTMLAttributes {\n gradientSize?: number;\n gradientColor?: string;\n gradientOpacity?: number;\n gradientFrom?: string;\n gradientTo?: string;\n}\n\nexport function MagicCard({\n children,\n className,\n gradientSize = 200,\n gradientColor = \"#262626\",\n gradientOpacity = 0.8,\n gradientFrom = \"#9E7AFF\",\n gradientTo = \"#FE8BBB\",\n}: MagicCardProps) {\n const cardRef = useRef(null);\n const mouseX = useMotionValue(-gradientSize);\n const mouseY = useMotionValue(-gradientSize);\n\n const handleMouseMove = useCallback(\n (e: MouseEvent) => {\n if (cardRef.current) {\n const { left, top } = cardRef.current.getBoundingClientRect();\n const clientX = e.clientX;\n const clientY = e.clientY;\n mouseX.set(clientX - left);\n mouseY.set(clientY - top);\n }\n },\n [mouseX, mouseY],\n );\n\n const handleMouseOut = useCallback(\n (e: MouseEvent) => {\n if (!e.relatedTarget) {\n document.removeEventListener(\"mousemove\", handleMouseMove);\n mouseX.set(-gradientSize);\n mouseY.set(-gradientSize);\n }\n },\n [handleMouseMove, mouseX, gradientSize, mouseY],\n );\n\n const handleMouseEnter = useCallback(() => {\n document.addEventListener(\"mousemove\", handleMouseMove);\n mouseX.set(-gradientSize);\n mouseY.set(-gradientSize);\n }, [handleMouseMove, mouseX, gradientSize, mouseY]);\n\n useEffect(() => {\n document.addEventListener(\"mousemove\", handleMouseMove);\n document.addEventListener(\"mouseout\", handleMouseOut);\n document.addEventListener(\"mouseenter\", handleMouseEnter);\n\n return () => {\n document.removeEventListener(\"mousemove\", handleMouseMove);\n document.removeEventListener(\"mouseout\", handleMouseOut);\n document.removeEventListener(\"mouseenter\", handleMouseEnter);\n };\n }, [handleMouseEnter, handleMouseMove, handleMouseOut]);\n\n useEffect(() => {\n mouseX.set(-gradientSize);\n mouseY.set(-gradientSize);\n }, [gradientSize, mouseX, mouseY]);\n\n return (\n \n
    \n
    {children}
    \n \n \n
    \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/marquee-3d.json b/public/r/marquee-3d.json new file mode 100644 index 000000000..ecba0c8d0 --- /dev/null +++ b/public/r/marquee-3d.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "marquee-3d", + "type": "registry:component", + "registryDependencies": [ + "marquee" + ], + "files": [ + { + "path": "registry/example/marquee-3d.tsx", + "content": "import { Marquee } from \"@/registry/magicui/marquee\";\n\nconst logos = [\n {\n name: \"Microsoft\",\n img: \"https://picsum.photos/id/1/200/300\",\n },\n {\n name: \"Apple\",\n img: \"https://picsum.photos/id/2/200/300\",\n },\n {\n name: \"Google\",\n img: \"https://picsum.photos/id/3/200/300\",\n },\n {\n name: \"Facebook\",\n img: \"https://picsum.photos/id/4/200/300\",\n },\n {\n name: \"LinkedIn\",\n img: \"https://picsum.photos/id/5/200/300\",\n },\n {\n name: \"Twitter\",\n img: \"https://picsum.photos/id/6/200/300\",\n },\n];\n\nexport default function Marquee3D() {\n return (\n
    \n
    \n \n {logos.map((data, idx) => (\n \n ))}\n \n
    \n\n
    \n
    \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/marquee-demo-vertical.json b/public/r/marquee-demo-vertical.json new file mode 100644 index 000000000..aad8af9f6 --- /dev/null +++ b/public/r/marquee-demo-vertical.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "marquee-demo-vertical", + "type": "registry:component", + "registryDependencies": [ + "marquee" + ], + "files": [ + { + "path": "registry/example/marquee-demo-vertical.tsx", + "content": "import { cn } from \"@/lib/utils\";\nimport { Marquee } from \"@/registry/magicui/marquee\";\n\nconst reviews = [\n {\n name: \"Jack\",\n username: \"@jack\",\n body: \"I've never seen anything like this before. It's amazing. I love it.\",\n img: \"https://avatar.vercel.sh/jack\",\n },\n {\n name: \"Jill\",\n username: \"@jill\",\n body: \"I don't know what to say. I'm speechless. This is amazing.\",\n img: \"https://avatar.vercel.sh/jill\",\n },\n {\n name: \"John\",\n username: \"@john\",\n body: \"I'm at a loss for words. This is amazing. I love it.\",\n img: \"https://avatar.vercel.sh/john\",\n },\n];\n\nconst firstRow = reviews.slice(0, reviews.length / 2);\nconst secondRow = reviews.slice(reviews.length / 2);\n\nconst ReviewCard = ({\n img,\n name,\n username,\n body,\n}: {\n img: string;\n name: string;\n username: string;\n body: string;\n}) => {\n return (\n \n
    \n \"\"\n
    \n
    \n {name}\n
    \n

    {username}

    \n
    \n
    \n
    {body}
    \n \n );\n};\n\nexport default function MarqueeDemoVertical() {\n return (\n
    \n \n {firstRow.map((review) => (\n \n ))}\n \n \n {secondRow.map((review) => (\n \n ))}\n \n
    \n
    \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/marquee-demo.json b/public/r/marquee-demo.json new file mode 100644 index 000000000..54f61fdc0 --- /dev/null +++ b/public/r/marquee-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "marquee-demo", + "type": "registry:component", + "registryDependencies": [ + "marquee" + ], + "files": [ + { + "path": "registry/example/marquee-demo.tsx", + "content": "import { cn } from \"@/lib/utils\";\nimport { Marquee } from \"@/registry/magicui/marquee\";\n\nconst reviews = [\n {\n name: \"Jack\",\n username: \"@jack\",\n body: \"I've never seen anything like this before. It's amazing. I love it.\",\n img: \"https://avatar.vercel.sh/jack\",\n },\n {\n name: \"Jill\",\n username: \"@jill\",\n body: \"I don't know what to say. I'm speechless. This is amazing.\",\n img: \"https://avatar.vercel.sh/jill\",\n },\n {\n name: \"John\",\n username: \"@john\",\n body: \"I'm at a loss for words. This is amazing. I love it.\",\n img: \"https://avatar.vercel.sh/john\",\n },\n {\n name: \"Jane\",\n username: \"@jane\",\n body: \"I'm at a loss for words. This is amazing. I love it.\",\n img: \"https://avatar.vercel.sh/jane\",\n },\n {\n name: \"Jenny\",\n username: \"@jenny\",\n body: \"I'm at a loss for words. This is amazing. I love it.\",\n img: \"https://avatar.vercel.sh/jenny\",\n },\n {\n name: \"James\",\n username: \"@james\",\n body: \"I'm at a loss for words. This is amazing. I love it.\",\n img: \"https://avatar.vercel.sh/james\",\n },\n];\n\nconst firstRow = reviews.slice(0, reviews.length / 2);\nconst secondRow = reviews.slice(reviews.length / 2);\n\nconst ReviewCard = ({\n img,\n name,\n username,\n body,\n}: {\n img: string;\n name: string;\n username: string;\n body: string;\n}) => {\n return (\n \n
    \n \"\"\n
    \n
    \n {name}\n
    \n

    {username}

    \n
    \n
    \n
    {body}
    \n \n );\n};\n\nexport default function MarqueeDemo() {\n return (\n
    \n \n {firstRow.map((review) => (\n \n ))}\n \n \n {secondRow.map((review) => (\n \n ))}\n \n
    \n
    \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/marquee-logos.json b/public/r/marquee-logos.json new file mode 100644 index 000000000..0c1a00881 --- /dev/null +++ b/public/r/marquee-logos.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "marquee-logos", + "type": "registry:component", + "registryDependencies": [ + "marquee" + ], + "files": [ + { + "path": "registry/example/marquee-logos.tsx", + "content": "import { cn } from \"@/lib/utils\";\nimport { Marquee } from \"@/registry/magicui/marquee\";\n\nconst logos = [\n {\n name: \"Microsoft\",\n img: \"https://cdn.simpleicons.org/microsoft/000/fff\",\n },\n {\n name: \"Apple\",\n img: \"https://cdn.simpleicons.org/apple/000/fff\",\n },\n {\n name: \"Google\",\n img: \"https://cdn.simpleicons.org/google/000/fff\",\n },\n {\n name: \"Facebook\",\n img: \"https://cdn.simpleicons.org/facebook/000/fff\",\n },\n {\n name: \"LinkedIn\",\n img: \"https://cdn.simpleicons.org/linkedin/000/fff\",\n },\n {\n name: \"Twitter\",\n img: \"https://cdn.simpleicons.org/twitter/000/fff\",\n },\n];\n\nconst Logo = ({ name, img }: { name: string; img: string }) => {\n return (\n
    \n {name}\n
    \n );\n};\n\nexport default function MarqueeLogos() {\n return (\n
    \n \n {logos.map((logo, idx) => (\n \n ))}\n \n
    \n
    \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/marquee.json b/public/r/marquee.json similarity index 89% rename from public/r/styles/default/marquee.json rename to public/r/marquee.json index 6c47cd9eb..d59e6da1a 100644 --- a/public/r/styles/default/marquee.json +++ b/public/r/marquee.json @@ -1,12 +1,14 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "marquee", - "type": "registry:ui", + "type": "registry:component", + "title": "Marquee", + "description": "An infinite scrolling component that can be used to display text, images, or videos.", "files": [ { - "path": "magicui/marquee.tsx", + "path": "registry/magicui/marquee.tsx", "content": "import { cn } from \"@/lib/utils\";\nimport { ComponentPropsWithoutRef } from \"react\";\n\ninterface MarqueeProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Optional CSS class name to apply custom styles\n */\n className?: string;\n /**\n * Whether to reverse the animation direction\n * @default false\n */\n reverse?: boolean;\n /**\n * Whether to pause the animation on hover\n * @default false\n */\n pauseOnHover?: boolean;\n /**\n * Content to be displayed in the marquee\n */\n children: React.ReactNode;\n /**\n * Whether to animate vertically instead of horizontally\n * @default false\n */\n vertical?: boolean;\n /**\n * Number of times to repeat the content\n * @default 4\n */\n repeat?: number;\n}\n\nexport function Marquee({\n className,\n reverse = false,\n pauseOnHover = false,\n children,\n vertical = false,\n repeat = 4,\n ...props\n}: MarqueeProps) {\n return (\n \n {Array(repeat)\n .fill(0)\n .map((_, i) => (\n \n {children}\n \n ))}\n \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ], "tailwind": { diff --git a/public/r/meteors-demo.json b/public/r/meteors-demo.json new file mode 100644 index 000000000..4f8139df7 --- /dev/null +++ b/public/r/meteors-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "meteors-demo", + "type": "registry:component", + "registryDependencies": [ + "meteors" + ], + "files": [ + { + "path": "registry/example/meteors-demo.tsx", + "content": "import { Meteors } from \"@/registry/magicui/meteors\";\n\nexport default function MeteorDemo() {\n return (\n
    \n \n \n Meteors\n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/meteors.json b/public/r/meteors.json similarity index 89% rename from public/r/styles/default/meteors.json rename to public/r/meteors.json index 85e645557..2d312f290 100644 --- a/public/r/styles/default/meteors.json +++ b/public/r/meteors.json @@ -1,12 +1,14 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "meteors", - "type": "registry:ui", + "type": "registry:component", + "title": "Meteors", + "description": "A meteor shower effect.", "files": [ { - "path": "magicui/meteors.tsx", + "path": "registry/magicui/meteors.tsx", "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface MeteorsProps extends React.HTMLAttributes {\n number?: number;\n}\nexport const Meteors = ({ number = 20, ...props }: MeteorsProps) => {\n const [meteorStyles, setMeteorStyles] = useState>(\n [],\n );\n\n useEffect(() => {\n const styles = [...new Array(number)].map(() => ({\n top: -5,\n left: Math.floor(Math.random() * window.innerWidth) + \"px\",\n animationDelay: Math.random() * 1 + 0.2 + \"s\",\n animationDuration: Math.floor(Math.random() * 8 + 2) + \"s\",\n }));\n setMeteorStyles(styles);\n }, [number]);\n\n return (\n <>\n {[...meteorStyles].map((style, idx) => (\n // Meteor Head\n \n {/* Meteor Tail */}\n
    \n \n ))}\n \n );\n};\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ], "tailwind": { diff --git a/public/r/morphing-text-demo.json b/public/r/morphing-text-demo.json new file mode 100644 index 000000000..5b36263f9 --- /dev/null +++ b/public/r/morphing-text-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "morphing-text-demo", + "type": "registry:component", + "registryDependencies": [ + "morphing-text" + ], + "files": [ + { + "path": "registry/example/morphing-text-demo.tsx", + "content": "import { MorphingText } from \"@/registry/magicui/morphing-text\";\n\nconst texts = [\n \"Hello\",\n \"Morphing\",\n \"Text\",\n \"Animation\",\n \"React\",\n \"Component\",\n \"Smooth\",\n \"Transition\",\n \"Engaging\",\n];\n\nexport default function MorphingTextDemo() {\n return ;\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/morphing-text.json b/public/r/morphing-text.json similarity index 93% rename from public/r/styles/default/morphing-text.json rename to public/r/morphing-text.json index c347a5fe5..2845dd907 100644 --- a/public/r/styles/default/morphing-text.json +++ b/public/r/morphing-text.json @@ -1,12 +1,14 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "morphing-text", - "type": "registry:ui", + "type": "registry:component", + "title": "Morphing Text", + "description": "A dynamic text morphing component for Magic UI.", "files": [ { - "path": "magicui/morphing-text.tsx", + "path": "registry/magicui/morphing-text.tsx", "content": "\"use client\";\n\nimport { useCallback, useEffect, useRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst morphTime = 1.5;\nconst cooldownTime = 0.5;\n\nconst useMorphingText = (texts: string[]) => {\n const textIndexRef = useRef(0);\n const morphRef = useRef(0);\n const cooldownRef = useRef(0);\n const timeRef = useRef(new Date());\n\n const text1Ref = useRef(null);\n const text2Ref = useRef(null);\n\n const setStyles = useCallback(\n (fraction: number) => {\n const [current1, current2] = [text1Ref.current, text2Ref.current];\n if (!current1 || !current2) return;\n\n current2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;\n current2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;\n\n const invertedFraction = 1 - fraction;\n current1.style.filter = `blur(${Math.min(8 / invertedFraction - 8, 100)}px)`;\n current1.style.opacity = `${Math.pow(invertedFraction, 0.4) * 100}%`;\n\n current1.textContent = texts[textIndexRef.current % texts.length];\n current2.textContent = texts[(textIndexRef.current + 1) % texts.length];\n },\n [texts],\n );\n\n const doMorph = useCallback(() => {\n morphRef.current -= cooldownRef.current;\n cooldownRef.current = 0;\n\n let fraction = morphRef.current / morphTime;\n\n if (fraction > 1) {\n cooldownRef.current = cooldownTime;\n fraction = 1;\n }\n\n setStyles(fraction);\n\n if (fraction === 1) {\n textIndexRef.current++;\n }\n }, [setStyles]);\n\n const doCooldown = useCallback(() => {\n morphRef.current = 0;\n const [current1, current2] = [text1Ref.current, text2Ref.current];\n if (current1 && current2) {\n current2.style.filter = \"none\";\n current2.style.opacity = \"100%\";\n current1.style.filter = \"none\";\n current1.style.opacity = \"0%\";\n }\n }, []);\n\n useEffect(() => {\n let animationFrameId: number;\n\n const animate = () => {\n animationFrameId = requestAnimationFrame(animate);\n\n const newTime = new Date();\n const dt = (newTime.getTime() - timeRef.current.getTime()) / 1000;\n timeRef.current = newTime;\n\n cooldownRef.current -= dt;\n\n if (cooldownRef.current <= 0) doMorph();\n else doCooldown();\n };\n\n animate();\n return () => {\n cancelAnimationFrame(animationFrameId);\n };\n }, [doMorph, doCooldown]);\n\n return { text1Ref, text2Ref };\n};\n\ninterface MorphingTextProps {\n className?: string;\n texts: string[];\n}\n\nconst Texts: React.FC> = ({ texts }) => {\n const { text1Ref, text2Ref } = useMorphingText(texts);\n return (\n <>\n \n \n \n );\n};\n\nconst SvgFilters: React.FC = () => (\n \n \n \n \n \n \n \n);\n\nexport const MorphingText: React.FC = ({\n texts,\n className,\n}) => (\n \n \n \n
    \n);\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/neon-gradient-card-demo.json b/public/r/neon-gradient-card-demo.json new file mode 100644 index 000000000..9cfe9122e --- /dev/null +++ b/public/r/neon-gradient-card-demo.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "neon-gradient-card-demo", + "type": "registry:component", + "files": [ + { + "path": "registry/example/neon-gradient-card-demo.tsx", + "content": "import { NeonGradientCard } from \"@/registry/magicui/neon-gradient-card\";\n\nexport default function NeonGradientCardDemo() {\n return (\n \n \n Neon Gradient Card\n \n \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/neon-gradient-card.json b/public/r/neon-gradient-card.json similarity index 94% rename from public/r/styles/default/neon-gradient-card.json rename to public/r/neon-gradient-card.json index 29271d6c0..f68c88072 100644 --- a/public/r/styles/default/neon-gradient-card.json +++ b/public/r/neon-gradient-card.json @@ -1,12 +1,14 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "neon-gradient-card", - "type": "registry:ui", + "type": "registry:component", + "title": "Neon Gradient Card", + "description": "A beautiful neon card effect", "files": [ { - "path": "magicui/neon-gradient-card.tsx", + "path": "registry/magicui/neon-gradient-card.tsx", "content": "\"use client\";\n\nimport {\n CSSProperties,\n ReactElement,\n ReactNode,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface NeonColorsProps {\n firstColor: string;\n secondColor: string;\n}\n\ninterface NeonGradientCardProps {\n /**\n * @default
    \n * @type ReactElement\n * @description\n * The component to be rendered as the card\n * */\n as?: ReactElement;\n /**\n * @default \"\"\n * @type string\n * @description\n * The className of the card\n */\n className?: string;\n\n /**\n * @default \"\"\n * @type ReactNode\n * @description\n * The children of the card\n * */\n children?: ReactNode;\n\n /**\n * @default 5\n * @type number\n * @description\n * The size of the border in pixels\n * */\n borderSize?: number;\n\n /**\n * @default 20\n * @type number\n * @description\n * The size of the radius in pixels\n * */\n borderRadius?: number;\n\n /**\n * @default \"{ firstColor: '#ff00aa', secondColor: '#00FFF1' }\"\n * @type string\n * @description\n * The colors of the neon gradient\n * */\n neonColors?: NeonColorsProps;\n\n [key: string]: any;\n}\n\nexport const NeonGradientCard: React.FC = ({\n className,\n children,\n borderSize = 2,\n borderRadius = 20,\n neonColors = {\n firstColor: \"#ff00aa\",\n secondColor: \"#00FFF1\",\n },\n ...props\n}) => {\n const containerRef = useRef(null);\n const [dimensions, setDimensions] = useState({ width: 0, height: 0 });\n\n useEffect(() => {\n const updateDimensions = () => {\n if (containerRef.current) {\n const { offsetWidth, offsetHeight } = containerRef.current;\n setDimensions({ width: offsetWidth, height: offsetHeight });\n }\n };\n\n updateDimensions();\n window.addEventListener(\"resize\", updateDimensions);\n\n return () => {\n window.removeEventListener(\"resize\", updateDimensions);\n };\n }, []);\n\n useEffect(() => {\n if (containerRef.current) {\n const { offsetWidth, offsetHeight } = containerRef.current;\n setDimensions({ width: offsetWidth, height: offsetHeight });\n }\n }, [children]);\n\n return (\n \n \n {children}\n
    \n \n );\n};\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ], "tailwind": { diff --git a/public/r/number-ticker-decimal-demo.json b/public/r/number-ticker-decimal-demo.json new file mode 100644 index 000000000..909599e76 --- /dev/null +++ b/public/r/number-ticker-decimal-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "number-ticker-decimal-demo", + "type": "registry:component", + "registryDependencies": [ + "number-ticker" + ], + "files": [ + { + "path": "registry/example/number-ticker-decimal-demo.tsx", + "content": "import { NumberTicker } from \"@/registry/magicui/number-ticker\";\n\nexport default function NumberTickerDemo() {\n return (\n \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/number-ticker-demo.json b/public/r/number-ticker-demo.json new file mode 100644 index 000000000..3f2a1011a --- /dev/null +++ b/public/r/number-ticker-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "number-ticker-demo", + "type": "registry:component", + "registryDependencies": [ + "number-ticker" + ], + "files": [ + { + "path": "registry/example/number-ticker-demo.tsx", + "content": "import { NumberTicker } from \"@/registry/magicui/number-ticker\";\n\nexport default function NumberTickerDemo() {\n return (\n \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/number-ticker.json b/public/r/number-ticker.json similarity index 86% rename from public/r/styles/default/number-ticker.json rename to public/r/number-ticker.json index 125193319..38e07437e 100644 --- a/public/r/styles/default/number-ticker.json +++ b/public/r/number-ticker.json @@ -1,15 +1,17 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "number-ticker", - "type": "registry:ui", + "type": "registry:component", + "title": "Number Ticker", + "description": "Animate numbers to count up or down to a target number", "dependencies": [ "motion" ], "files": [ { - "path": "magicui/number-ticker.tsx", + "path": "registry/magicui/number-ticker.tsx", "content": "\"use client\";\n\nimport { useInView, useMotionValue, useSpring } from \"motion/react\";\nimport { ComponentPropsWithoutRef, useEffect, useRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface NumberTickerProps extends ComponentPropsWithoutRef<\"span\"> {\n value: number;\n direction?: \"up\" | \"down\";\n delay?: number; // delay in s\n decimalPlaces?: number;\n}\n\nexport function NumberTicker({\n value,\n direction = \"up\",\n delay = 0,\n className,\n decimalPlaces = 0,\n ...props\n}: NumberTickerProps) {\n const ref = useRef(null);\n const motionValue = useMotionValue(direction === \"down\" ? value : 0);\n const springValue = useSpring(motionValue, {\n damping: 60,\n stiffness: 100,\n });\n const isInView = useInView(ref, { once: true, margin: \"0px\" });\n\n useEffect(() => {\n isInView &&\n setTimeout(() => {\n motionValue.set(direction === \"down\" ? 0 : value);\n }, delay * 1000);\n }, [motionValue, isInView, delay, value, direction]);\n\n useEffect(\n () =>\n springValue.on(\"change\", (latest) => {\n if (ref.current) {\n ref.current.textContent = Intl.NumberFormat(\"en-US\", {\n minimumFractionDigits: decimalPlaces,\n maximumFractionDigits: decimalPlaces,\n }).format(Number(latest.toFixed(decimalPlaces)));\n }\n }),\n [springValue, decimalPlaces],\n );\n\n return (\n \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/orbiting-circles-demo.json b/public/r/orbiting-circles-demo.json new file mode 100644 index 000000000..d4ad7b812 --- /dev/null +++ b/public/r/orbiting-circles-demo.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "orbiting-circles-demo", + "type": "registry:component", + "dependencies": [ + "@radix-ui/react-icons" + ], + "registryDependencies": [ + "orbiting-circles" + ], + "files": [ + { + "path": "registry/example/orbiting-circles-demo.tsx", + "content": "import { OrbitingCircles } from \"@/registry/magicui/orbiting-circles\";\n\nexport default function OrbitingCirclesDemo() {\n return (\n
    \n \n Circles\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n );\n}\n\nconst Icons = {\n gitHub: () => (\n \n \n \n ),\n notion: () => (\n \n \n \n \n ),\n openai: () => (\n \n \n \n ),\n googleDrive: () => (\n \n \n \n \n \n \n \n \n ),\n whatsapp: () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ),\n};\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/orbiting-circles.json b/public/r/orbiting-circles.json similarity index 89% rename from public/r/styles/default/orbiting-circles.json rename to public/r/orbiting-circles.json index bb443dca7..6ca6fb56a 100644 --- a/public/r/styles/default/orbiting-circles.json +++ b/public/r/orbiting-circles.json @@ -1,12 +1,14 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "orbiting-circles", - "type": "registry:ui", + "type": "registry:component", + "title": "Orbiting Circles", + "description": "A collection of circles which move in orbit along a circular path", "files": [ { - "path": "magicui/orbiting-circles.tsx", + "path": "registry/magicui/orbiting-circles.tsx", "content": "import { cn } from \"@/lib/utils\";\nimport React from \"react\";\n\nexport interface OrbitingCirclesProps\n extends React.HTMLAttributes {\n className?: string;\n children?: React.ReactNode;\n reverse?: boolean;\n duration?: number;\n delay?: number;\n radius?: number;\n path?: boolean;\n iconSize?: number;\n speed?: number;\n}\n\nexport function OrbitingCircles({\n className,\n children,\n reverse,\n duration = 20,\n radius = 160,\n path = true,\n iconSize = 30,\n speed = 1,\n ...props\n}: OrbitingCirclesProps) {\n const calculatedDuration = duration / speed;\n return (\n <>\n {path && (\n \n \n \n )}\n {React.Children.map(children, (child, index) => {\n const angle = (360 / React.Children.count(children)) * index;\n return (\n \n {child}\n \n );\n })}\n \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ], "tailwind": { diff --git a/public/r/particles-demo.json b/public/r/particles-demo.json new file mode 100644 index 000000000..0ccc35e4e --- /dev/null +++ b/public/r/particles-demo.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "particles-demo", + "type": "registry:component", + "dependencies": [ + "next-themes" + ], + "registryDependencies": [ + "particles" + ], + "files": [ + { + "path": "registry/example/particles-demo.tsx", + "content": "\"use client\";\n\nimport { useTheme } from \"next-themes\";\nimport { useEffect, useState } from \"react\";\n\nimport { Particles } from \"@/registry/magicui/particles\";\n\nexport default function ParticlesDemo() {\n const { resolvedTheme } = useTheme();\n const [color, setColor] = useState(\"#ffffff\");\n\n useEffect(() => {\n setColor(resolvedTheme === \"dark\" ? \"#ffffff\" : \"#000000\");\n }, [resolvedTheme]);\n\n return (\n
    \n \n Particles\n \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/particles.json b/public/r/particles.json similarity index 96% rename from public/r/styles/default/particles.json rename to public/r/particles.json index b44543442..0ee51c0af 100644 --- a/public/r/styles/default/particles.json +++ b/public/r/particles.json @@ -1,12 +1,14 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "particles", - "type": "registry:ui", + "type": "registry:component", + "title": "Particles", + "description": "Particles are a fun way to add some visual flair to your website. They can be used to create a sense of depth, movement, and interactivity.", "files": [ { - "path": "magicui/particles.tsx", + "path": "registry/magicui/particles.tsx", "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport React, {\n ComponentPropsWithoutRef,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\ninterface MousePosition {\n x: number;\n y: number;\n}\n\nfunction MousePosition(): MousePosition {\n const [mousePosition, setMousePosition] = useState({\n x: 0,\n y: 0,\n });\n\n useEffect(() => {\n const handleMouseMove = (event: MouseEvent) => {\n setMousePosition({ x: event.clientX, y: event.clientY });\n };\n\n window.addEventListener(\"mousemove\", handleMouseMove);\n\n return () => {\n window.removeEventListener(\"mousemove\", handleMouseMove);\n };\n }, []);\n\n return mousePosition;\n}\n\ninterface ParticlesProps extends ComponentPropsWithoutRef<\"div\"> {\n className?: string;\n quantity?: number;\n staticity?: number;\n ease?: number;\n size?: number;\n refresh?: boolean;\n color?: string;\n vx?: number;\n vy?: number;\n}\n\nfunction hexToRgb(hex: string): number[] {\n hex = hex.replace(\"#\", \"\");\n\n if (hex.length === 3) {\n hex = hex\n .split(\"\")\n .map((char) => char + char)\n .join(\"\");\n }\n\n const hexInt = parseInt(hex, 16);\n const red = (hexInt >> 16) & 255;\n const green = (hexInt >> 8) & 255;\n const blue = hexInt & 255;\n return [red, green, blue];\n}\n\ntype Circle = {\n x: number;\n y: number;\n translateX: number;\n translateY: number;\n size: number;\n alpha: number;\n targetAlpha: number;\n dx: number;\n dy: number;\n magnetism: number;\n};\n\nexport const Particles: React.FC = ({\n className = \"\",\n quantity = 100,\n staticity = 50,\n ease = 50,\n size = 0.4,\n refresh = false,\n color = \"#ffffff\",\n vx = 0,\n vy = 0,\n ...props\n}) => {\n const canvasRef = useRef(null);\n const canvasContainerRef = useRef(null);\n const context = useRef(null);\n const circles = useRef([]);\n const mousePosition = MousePosition();\n const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 });\n const canvasSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 });\n const dpr = typeof window !== \"undefined\" ? window.devicePixelRatio : 1;\n const rafID = useRef(null);\n const resizeTimeout = useRef();\n\n useEffect(() => {\n if (canvasRef.current) {\n context.current = canvasRef.current.getContext(\"2d\");\n }\n initCanvas();\n animate();\n\n const handleResize = () => {\n if (resizeTimeout.current) {\n clearTimeout(resizeTimeout.current);\n }\n resizeTimeout.current = setTimeout(() => {\n initCanvas();\n }, 200);\n };\n\n window.addEventListener(\"resize\", handleResize);\n\n return () => {\n if (rafID.current != null) {\n window.cancelAnimationFrame(rafID.current);\n }\n if (resizeTimeout.current) {\n clearTimeout(resizeTimeout.current);\n }\n window.removeEventListener(\"resize\", handleResize);\n };\n }, [color]);\n\n useEffect(() => {\n onMouseMove();\n }, [mousePosition.x, mousePosition.y]);\n\n useEffect(() => {\n initCanvas();\n }, [refresh]);\n\n const initCanvas = () => {\n resizeCanvas();\n drawParticles();\n };\n\n const onMouseMove = () => {\n if (canvasRef.current) {\n const rect = canvasRef.current.getBoundingClientRect();\n const { w, h } = canvasSize.current;\n const x = mousePosition.x - rect.left - w / 2;\n const y = mousePosition.y - rect.top - h / 2;\n const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2;\n if (inside) {\n mouse.current.x = x;\n mouse.current.y = y;\n }\n }\n };\n\n const resizeCanvas = () => {\n if (canvasContainerRef.current && canvasRef.current && context.current) {\n canvasSize.current.w = canvasContainerRef.current.offsetWidth;\n canvasSize.current.h = canvasContainerRef.current.offsetHeight;\n\n canvasRef.current.width = canvasSize.current.w * dpr;\n canvasRef.current.height = canvasSize.current.h * dpr;\n canvasRef.current.style.width = `${canvasSize.current.w}px`;\n canvasRef.current.style.height = `${canvasSize.current.h}px`;\n context.current.scale(dpr, dpr);\n\n // Clear existing particles and create new ones with exact quantity\n circles.current = [];\n for (let i = 0; i < quantity; i++) {\n const circle = circleParams();\n drawCircle(circle);\n }\n }\n };\n\n const circleParams = (): Circle => {\n const x = Math.floor(Math.random() * canvasSize.current.w);\n const y = Math.floor(Math.random() * canvasSize.current.h);\n const translateX = 0;\n const translateY = 0;\n const pSize = Math.floor(Math.random() * 2) + size;\n const alpha = 0;\n const targetAlpha = parseFloat((Math.random() * 0.6 + 0.1).toFixed(1));\n const dx = (Math.random() - 0.5) * 0.1;\n const dy = (Math.random() - 0.5) * 0.1;\n const magnetism = 0.1 + Math.random() * 4;\n return {\n x,\n y,\n translateX,\n translateY,\n size: pSize,\n alpha,\n targetAlpha,\n dx,\n dy,\n magnetism,\n };\n };\n\n const rgb = hexToRgb(color);\n\n const drawCircle = (circle: Circle, update = false) => {\n if (context.current) {\n const { x, y, translateX, translateY, size, alpha } = circle;\n context.current.translate(translateX, translateY);\n context.current.beginPath();\n context.current.arc(x, y, size, 0, 2 * Math.PI);\n context.current.fillStyle = `rgba(${rgb.join(\", \")}, ${alpha})`;\n context.current.fill();\n context.current.setTransform(dpr, 0, 0, dpr, 0, 0);\n\n if (!update) {\n circles.current.push(circle);\n }\n }\n };\n\n const clearContext = () => {\n if (context.current) {\n context.current.clearRect(\n 0,\n 0,\n canvasSize.current.w,\n canvasSize.current.h,\n );\n }\n };\n\n const drawParticles = () => {\n clearContext();\n const particleCount = quantity;\n for (let i = 0; i < particleCount; i++) {\n const circle = circleParams();\n drawCircle(circle);\n }\n };\n\n const remapValue = (\n value: number,\n start1: number,\n end1: number,\n start2: number,\n end2: number,\n ): number => {\n const remapped =\n ((value - start1) * (end2 - start2)) / (end1 - start1) + start2;\n return remapped > 0 ? remapped : 0;\n };\n\n const animate = () => {\n clearContext();\n circles.current.forEach((circle: Circle, i: number) => {\n // Handle the alpha value\n const edge = [\n circle.x + circle.translateX - circle.size, // distance from left edge\n canvasSize.current.w - circle.x - circle.translateX - circle.size, // distance from right edge\n circle.y + circle.translateY - circle.size, // distance from top edge\n canvasSize.current.h - circle.y - circle.translateY - circle.size, // distance from bottom edge\n ];\n const closestEdge = edge.reduce((a, b) => Math.min(a, b));\n const remapClosestEdge = parseFloat(\n remapValue(closestEdge, 0, 20, 0, 1).toFixed(2),\n );\n if (remapClosestEdge > 1) {\n circle.alpha += 0.02;\n if (circle.alpha > circle.targetAlpha) {\n circle.alpha = circle.targetAlpha;\n }\n } else {\n circle.alpha = circle.targetAlpha * remapClosestEdge;\n }\n circle.x += circle.dx + vx;\n circle.y += circle.dy + vy;\n circle.translateX +=\n (mouse.current.x / (staticity / circle.magnetism) - circle.translateX) /\n ease;\n circle.translateY +=\n (mouse.current.y / (staticity / circle.magnetism) - circle.translateY) /\n ease;\n\n drawCircle(circle, true);\n\n // circle gets out of the canvas\n if (\n circle.x < -circle.size ||\n circle.x > canvasSize.current.w + circle.size ||\n circle.y < -circle.size ||\n circle.y > canvasSize.current.h + circle.size\n ) {\n // remove the circle from the array\n circles.current.splice(i, 1);\n // create a new circle\n const newCircle = circleParams();\n drawCircle(newCircle);\n }\n });\n rafID.current = window.requestAnimationFrame(animate);\n };\n\n return (\n \n \n \n );\n};\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/pulsating-button-demo.json b/public/r/pulsating-button-demo.json new file mode 100644 index 000000000..e58c699bb --- /dev/null +++ b/public/r/pulsating-button-demo.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "pulsating-button-demo", + "type": "registry:component", + "files": [ + { + "path": "registry/example/pulsating-button-demo.tsx", + "content": "import { PulsatingButton } from \"@/registry/magicui/pulsating-button\";\n\nexport default function PulsatingButtonDemo() {\n return Join Affiliate Program;\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/pulsating-button.json b/public/r/pulsating-button.json similarity index 85% rename from public/r/styles/default/pulsating-button.json rename to public/r/pulsating-button.json index 2b77162b1..04629175b 100644 --- a/public/r/styles/default/pulsating-button.json +++ b/public/r/pulsating-button.json @@ -1,12 +1,14 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pulsating-button", - "type": "registry:ui", + "type": "registry:component", + "title": "Pulsating Button", + "description": "An animated pulsating button useful for capturing attention of users.", "files": [ { - "path": "magicui/pulsating-button.tsx", + "path": "registry/magicui/pulsating-button.tsx", "content": "import React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface PulsatingButtonProps\n extends React.ButtonHTMLAttributes {\n pulseColor?: string;\n duration?: string;\n}\n\nexport const PulsatingButton = React.forwardRef<\n HTMLButtonElement,\n PulsatingButtonProps\n>(\n (\n {\n className,\n children,\n pulseColor = \"#0096ff\",\n duration = \"1.5s\",\n ...props\n },\n ref,\n ) => {\n return (\n \n
    {children}
    \n
    \n \n );\n },\n);\n\nPulsatingButton.displayName = \"PulsatingButton\";\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ], "tailwind": { diff --git a/public/r/rainbow-button-demo.json b/public/r/rainbow-button-demo.json new file mode 100644 index 000000000..b51411ec5 --- /dev/null +++ b/public/r/rainbow-button-demo.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "rainbow-button-demo", + "type": "registry:component", + "files": [ + { + "path": "registry/example/rainbow-button-demo.tsx", + "content": "import { RainbowButton } from \"@/registry/magicui/rainbow-button\";\n\nexport default function RainbowButtonDemo() {\n return Get Unlimited Access;\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/rainbow-button.json b/public/r/rainbow-button.json similarity index 91% rename from public/r/styles/default/rainbow-button.json rename to public/r/rainbow-button.json index 8421f148d..a7deb99f0 100644 --- a/public/r/styles/default/rainbow-button.json +++ b/public/r/rainbow-button.json @@ -1,12 +1,14 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "rainbow-button", - "type": "registry:ui", + "type": "registry:component", + "title": "Rainbow Button", + "description": "An animated button with a rainbow effect.", "files": [ { - "path": "magicui/rainbow-button.tsx", + "path": "registry/magicui/rainbow-button.tsx", "content": "import React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface RainbowButtonProps\n extends React.ButtonHTMLAttributes {}\n\nexport const RainbowButton = React.forwardRef<\n HTMLButtonElement,\n RainbowButtonProps\n>(({ children, className, ...props }, ref) => {\n return (\n \n {children}\n \n );\n});\n\nRainbowButton.displayName = \"RainbowButton\";\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ], "tailwind": { diff --git a/public/r/retro-grid-demo.json b/public/r/retro-grid-demo.json new file mode 100644 index 000000000..1cdf8c568 --- /dev/null +++ b/public/r/retro-grid-demo.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "retro-grid-demo", + "type": "registry:component", + "files": [ + { + "path": "registry/example/retro-grid-demo.tsx", + "content": "\"use client\";\n\nimport { RetroGrid } from \"@/registry/magicui/retro-grid\";\n\nexport default function RetroGridDemo() {\n return (\n
    \n \n Retro Grid\n \n\n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/retro-grid.json b/public/r/retro-grid.json similarity index 90% rename from public/r/styles/default/retro-grid.json rename to public/r/retro-grid.json index 9f56780c6..c4351e891 100644 --- a/public/r/styles/default/retro-grid.json +++ b/public/r/retro-grid.json @@ -1,12 +1,14 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "retro-grid", - "type": "registry:ui", + "type": "registry:component", + "title": "Retro Grid", + "description": "An animated scrolling retro grid effect", "files": [ { - "path": "magicui/retro-grid.tsx", + "path": "registry/magicui/retro-grid.tsx", "content": "import { cn } from \"@/lib/utils\";\n\ninterface RetroGridProps extends React.HTMLAttributes {\n /**\n * Additional CSS classes to apply to the grid container\n */\n className?: string;\n /**\n * Rotation angle of the grid in degrees\n * @default 65\n */\n angle?: number;\n /**\n * Grid cell size in pixels\n * @default 60\n */\n cellSize?: number;\n /**\n * Grid opacity value between 0 and 1\n * @default 0.5\n */\n opacity?: number;\n /**\n * Grid line color in light mode\n * @default \"gray\"\n */\n lightLineColor?: string;\n /**\n * Grid line color in dark mode\n * @default \"gray\"\n */\n darkLineColor?: string;\n}\n\nexport function RetroGrid({\n className,\n angle = 65,\n cellSize = 60,\n opacity = 0.5,\n lightLineColor = \"gray\",\n darkLineColor = \"gray\",\n ...props\n}: RetroGridProps) {\n const gridStyles = {\n \"--grid-angle\": `${angle}deg`,\n \"--cell-size\": `${cellSize}px`,\n \"--opacity\": opacity,\n \"--light-line\": lightLineColor,\n \"--dark-line\": darkLineColor,\n } as React.CSSProperties;\n\n return (\n \n
    \n
    \n
    \n\n
    \n
    \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ], "tailwind": { diff --git a/public/r/ripple-button-demo.json b/public/r/ripple-button-demo.json new file mode 100644 index 000000000..c24c64891 --- /dev/null +++ b/public/r/ripple-button-demo.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "ripple-button-demo", + "type": "registry:component", + "files": [ + { + "path": "registry/example/ripple-button-demo.tsx", + "content": "import { RippleButton } from \"@/registry/magicui/ripple-button\";\n\nexport default function RippleButtonDemo() {\n return Click me;\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/ripple-button.json b/public/r/ripple-button.json similarity index 91% rename from public/r/styles/default/ripple-button.json rename to public/r/ripple-button.json index 80ec50de7..b47135e44 100644 --- a/public/r/styles/default/ripple-button.json +++ b/public/r/ripple-button.json @@ -1,12 +1,14 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "ripple-button", - "type": "registry:ui", + "type": "registry:component", + "title": "Ripple Button", + "description": "An animated button with ripple useful for user engagement.", "files": [ { - "path": "magicui/ripple-button.tsx", + "path": "registry/magicui/ripple-button.tsx", "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport React, { MouseEvent, useEffect, useState } from \"react\";\n\ninterface RippleButtonProps\n extends React.ButtonHTMLAttributes {\n rippleColor?: string;\n duration?: string;\n}\n\nexport const RippleButton = React.forwardRef<\n HTMLButtonElement,\n RippleButtonProps\n>(\n (\n {\n className,\n children,\n rippleColor = \"#ffffff\",\n duration = \"600ms\",\n onClick,\n ...props\n },\n ref,\n ) => {\n const [buttonRipples, setButtonRipples] = useState<\n Array<{ x: number; y: number; size: number; key: number }>\n >([]);\n\n const handleClick = (event: MouseEvent) => {\n createRipple(event);\n onClick?.(event);\n };\n\n const createRipple = (event: MouseEvent) => {\n const button = event.currentTarget;\n const rect = button.getBoundingClientRect();\n const size = Math.max(rect.width, rect.height);\n const x = event.clientX - rect.left - size / 2;\n const y = event.clientY - rect.top - size / 2;\n\n const newRipple = { x, y, size, key: Date.now() };\n setButtonRipples((prevRipples) => [...prevRipples, newRipple]);\n };\n\n useEffect(() => {\n if (buttonRipples.length > 0) {\n const lastRipple = buttonRipples[buttonRipples.length - 1];\n const timeout = setTimeout(() => {\n setButtonRipples((prevRipples) =>\n prevRipples.filter((ripple) => ripple.key !== lastRipple.key),\n );\n }, parseInt(duration));\n return () => clearTimeout(timeout);\n }\n }, [buttonRipples, duration]);\n\n return (\n \n
    {children}
    \n \n {buttonRipples.map((ripple) => (\n \n ))}\n \n \n );\n },\n);\n\nRippleButton.displayName = \"RippleButton\";\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ], "tailwind": { diff --git a/public/r/ripple-demo.json b/public/r/ripple-demo.json new file mode 100644 index 000000000..1f4d03e2a --- /dev/null +++ b/public/r/ripple-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "ripple-demo", + "type": "registry:component", + "registryDependencies": [ + "ripple" + ], + "files": [ + { + "path": "registry/example/ripple-demo.tsx", + "content": "import { Ripple } from \"@/registry/magicui/ripple\";\n\nexport default function RippleDemo() {\n return (\n
    \n

    \n Ripple\n

    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/ripple.json b/public/r/ripple.json similarity index 88% rename from public/r/styles/default/ripple.json rename to public/r/ripple.json index 8da11229b..780f29a31 100644 --- a/public/r/styles/default/ripple.json +++ b/public/r/ripple.json @@ -1,12 +1,14 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "ripple", - "type": "registry:ui", + "type": "registry:component", + "title": "Ripple", + "description": "An animated ripple effect typically used behind elements to emphasize them.", "files": [ { - "path": "magicui/ripple.tsx", + "path": "registry/magicui/ripple.tsx", "content": "import React, { ComponentPropsWithoutRef, CSSProperties } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface RippleProps extends ComponentPropsWithoutRef<\"div\"> {\n mainCircleSize?: number;\n mainCircleOpacity?: number;\n numCircles?: number;\n}\n\nexport const Ripple = React.memo(function Ripple({\n mainCircleSize = 210,\n mainCircleOpacity = 0.24,\n numCircles = 8,\n className,\n ...props\n}: RippleProps) {\n return (\n \n {Array.from({ length: numCircles }, (_, i) => {\n const size = mainCircleSize + i * 70;\n const opacity = mainCircleOpacity - i * 0.03;\n const animationDelay = `${i * 0.06}s`;\n const borderStyle = i === numCircles - 1 ? \"dashed\" : \"solid\";\n const borderOpacity = 5 + i * 5;\n\n return (\n \n );\n })}\n
    \n );\n});\n\nRipple.displayName = \"Ripple\";\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ], "tailwind": { diff --git a/public/r/safari-demo-2.json b/public/r/safari-demo-2.json new file mode 100644 index 000000000..0c94e9ffe --- /dev/null +++ b/public/r/safari-demo-2.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "safari-demo-2", + "type": "registry:component", + "files": [ + { + "path": "registry/example/safari-demo-2.tsx", + "content": "import { Safari } from \"@/registry/magicui/safari\";\n\nexport default function SafariDemo() {\n return (\n
    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/safari-demo-3.json b/public/r/safari-demo-3.json new file mode 100644 index 000000000..29223b363 --- /dev/null +++ b/public/r/safari-demo-3.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "safari-demo-3", + "type": "registry:component", + "files": [ + { + "path": "registry/example/safari-demo-3.tsx", + "content": "import { Safari } from \"@/registry/magicui/safari\";\n\nexport default function SafariDemo() {\n return (\n
    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/safari-demo-4.json b/public/r/safari-demo-4.json new file mode 100644 index 000000000..7993da39c --- /dev/null +++ b/public/r/safari-demo-4.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "safari-demo-4", + "type": "registry:component", + "files": [ + { + "path": "registry/example/safari-demo-4.tsx", + "content": "import { Safari } from \"@/registry/magicui/safari\";\n\nexport default function SafariDemo() {\n return (\n
    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/safari-demo.json b/public/r/safari-demo.json new file mode 100644 index 000000000..2eab87702 --- /dev/null +++ b/public/r/safari-demo.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "safari-demo", + "type": "registry:component", + "files": [ + { + "path": "registry/example/safari-demo.tsx", + "content": "import { Safari } from \"@/registry/magicui/safari\";\n\nexport default function SafariDemo() {\n return (\n
    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/safari.json b/public/r/safari.json new file mode 100644 index 000000000..90427bba6 --- /dev/null +++ b/public/r/safari.json @@ -0,0 +1,14 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "safari", + "type": "registry:component", + "title": "Safari", + "description": "A safari browser mockup to showcase your website.", + "files": [ + { + "path": "registry/magicui/safari.tsx", + "content": "import { SVGProps } from \"react\";\n\ntype SafariMode = \"default\" | \"simple\";\n\nexport interface SafariProps extends SVGProps {\n url?: string;\n imageSrc?: string;\n videoSrc?: string;\n width?: number;\n height?: number;\n mode?: SafariMode;\n}\n\nexport function Safari({\n imageSrc,\n videoSrc,\n url,\n width = 1203,\n height = 753,\n mode = \"default\",\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 {mode === \"default\" ? (\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 ) : null}\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:component" + } + ] +} \ No newline at end of file diff --git a/public/r/scratch-to-reveal-demo.json b/public/r/scratch-to-reveal-demo.json new file mode 100644 index 000000000..5143c22a7 --- /dev/null +++ b/public/r/scratch-to-reveal-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "scratch-to-reveal-demo", + "type": "registry:component", + "registryDependencies": [ + "scratch-to-reveal" + ], + "files": [ + { + "path": "registry/example/scratch-to-reveal-demo.tsx", + "content": "import { ScratchToReveal } from \"@/registry/magicui/scratch-to-reveal\";\n\nconst ScratchToRevealDemo = () => {\n const handleComplete = () => {\n // Do Something\n };\n\n return (\n \n

    😎

    \n \n );\n};\n\nexport default ScratchToRevealDemo;\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/scratch-to-reveal.json b/public/r/scratch-to-reveal.json similarity index 93% rename from public/r/styles/default/scratch-to-reveal.json rename to public/r/scratch-to-reveal.json index f5ced0c5b..547198cd5 100644 --- a/public/r/styles/default/scratch-to-reveal.json +++ b/public/r/scratch-to-reveal.json @@ -1,15 +1,17 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "scratch-to-reveal", - "type": "registry:ui", + "type": "registry:component", + "title": "Scratch To Reveal", + "description": "The ScratchToReveal component creates an interactive scratch-off effect with customizable dimensions and animations, revealing hidden content beneath.", "dependencies": [ "motion" ], "files": [ { - "path": "magicui/scratch-to-reveal.tsx", + "path": "registry/magicui/scratch-to-reveal.tsx", "content": "import { cn } from \"@/lib/utils\";\nimport { motion, useAnimation } from \"motion/react\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\ninterface ScratchToRevealProps {\n children: React.ReactNode;\n width: number;\n height: number;\n minScratchPercentage?: number;\n className?: string;\n onComplete?: () => void;\n gradientColors?: [string, string, string];\n}\n\nexport const ScratchToReveal: React.FC = ({\n width,\n height,\n minScratchPercentage = 50,\n onComplete,\n children,\n className,\n gradientColors = [\"#A97CF8\", \"#F38CB8\", \"#FDCC92\"],\n}) => {\n const canvasRef = useRef(null);\n const [isScratching, setIsScratching] = useState(false);\n const [isComplete, setIsComplete] = useState(false);\n\n const controls = useAnimation();\n\n useEffect(() => {\n const canvas = canvasRef.current;\n const ctx = canvas?.getContext(\"2d\");\n if (canvas && ctx) {\n ctx.fillStyle = \"#ccc\";\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n const gradient = ctx.createLinearGradient(\n 0,\n 0,\n canvas.width,\n canvas.height,\n );\n gradient.addColorStop(0, gradientColors[0]);\n gradient.addColorStop(0.5, gradientColors[1]);\n gradient.addColorStop(1, gradientColors[2]);\n ctx.fillStyle = gradient;\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n }\n }, [gradientColors]);\n\n useEffect(() => {\n const handleDocumentMouseMove = (event: MouseEvent) => {\n if (!isScratching) return;\n scratch(event.clientX, event.clientY);\n };\n\n const handleDocumentTouchMove = (event: TouchEvent) => {\n if (!isScratching) return;\n const touch = event.touches[0];\n scratch(touch.clientX, touch.clientY);\n };\n\n const handleDocumentMouseUp = () => {\n setIsScratching(false);\n checkCompletion();\n };\n\n const handleDocumentTouchEnd = () => {\n setIsScratching(false);\n checkCompletion();\n };\n\n document.addEventListener(\"mousedown\", handleDocumentMouseMove);\n document.addEventListener(\"mousemove\", handleDocumentMouseMove);\n document.addEventListener(\"touchstart\", handleDocumentTouchMove);\n document.addEventListener(\"touchmove\", handleDocumentTouchMove);\n document.addEventListener(\"mouseup\", handleDocumentMouseUp);\n document.addEventListener(\"touchend\", handleDocumentTouchEnd);\n document.addEventListener(\"touchcancel\", handleDocumentTouchEnd);\n\n return () => {\n document.removeEventListener(\"mousedown\", handleDocumentMouseMove);\n document.removeEventListener(\"mousemove\", handleDocumentMouseMove);\n document.removeEventListener(\"touchstart\", handleDocumentTouchMove);\n document.removeEventListener(\"touchmove\", handleDocumentTouchMove);\n document.removeEventListener(\"mouseup\", handleDocumentMouseUp);\n document.removeEventListener(\"touchend\", handleDocumentTouchEnd);\n document.removeEventListener(\"touchcancel\", handleDocumentTouchEnd);\n };\n }, [isScratching]);\n\n const handleMouseDown = () => setIsScratching(true);\n\n const handleTouchStart = () => setIsScratching(true);\n\n const scratch = (clientX: number, clientY: number) => {\n const canvas = canvasRef.current;\n const ctx = canvas?.getContext(\"2d\");\n if (canvas && ctx) {\n const rect = canvas.getBoundingClientRect();\n const x = clientX - rect.left + 16;\n const y = clientY - rect.top + 16;\n ctx.globalCompositeOperation = \"destination-out\";\n ctx.beginPath();\n ctx.arc(x, y, 30, 0, Math.PI * 2);\n ctx.fill();\n }\n };\n\n const startAnimation = async () => {\n await controls.start({\n scale: [1, 1.5, 1],\n rotate: [0, 10, -10, 10, -10, 0],\n transition: { duration: 0.5 },\n });\n\n // Call onComplete after animation finishes\n if (onComplete) {\n onComplete();\n }\n };\n\n const checkCompletion = () => {\n if (isComplete) return;\n\n const canvas = canvasRef.current;\n const ctx = canvas?.getContext(\"2d\");\n if (canvas && ctx) {\n const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);\n const pixels = imageData.data;\n const totalPixels = pixels.length / 4;\n let clearPixels = 0;\n\n for (let i = 3; i < pixels.length; i += 4) {\n if (pixels[i] === 0) clearPixels++;\n }\n\n const percentage = (clearPixels / totalPixels) * 100;\n\n if (percentage >= minScratchPercentage) {\n setIsComplete(true);\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n startAnimation();\n }\n }\n };\n\n return (\n \n \n {children}\n \n );\n};\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/script-copy-btn-demo.json b/public/r/script-copy-btn-demo.json new file mode 100644 index 000000000..600bcb672 --- /dev/null +++ b/public/r/script-copy-btn-demo.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "script-copy-btn-demo", + "type": "registry:component", + "files": [ + { + "path": "registry/example/script-copy-btn-demo.tsx", + "content": "import { ScriptCopyBtn } from \"@/registry/magicui/script-copy-btn\";\n\nexport default function ScriptCopyBtnDemo() {\n const customCommandMap = {\n npm: \"npm run shadcn add button\",\n yarn: \"yarn shadcn add button\",\n pnpm: \"pnpm dlx shadcn@latest add button\",\n bun: \"bun x shadcn@latest add button\",\n };\n return (\n \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/script-copy-btn.json b/public/r/script-copy-btn.json similarity index 95% rename from public/r/styles/default/script-copy-btn.json rename to public/r/script-copy-btn.json index c32243e1e..ad1b0c4ec 100644 --- a/public/r/styles/default/script-copy-btn.json +++ b/public/r/script-copy-btn.json @@ -1,6 +1,9 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "script-copy-btn", - "type": "registry:ui", + "type": "registry:component", + "title": "Script Copy Button", + "description": "Copy code to clipboard", "dependencies": [ "motion", "shiki", @@ -11,10 +14,9 @@ ], "files": [ { - "path": "magicui/script-copy-btn.tsx", + "path": "registry/magicui/script-copy-btn.tsx", "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { Check, Copy } from \"lucide-react\";\nimport { motion } from \"motion/react\";\nimport { useTheme } from \"next-themes\";\nimport { HTMLAttributes, useEffect, useState } from \"react\";\nimport { codeToHtml } from \"shiki\";\n\ninterface ScriptCopyBtnProps extends HTMLAttributes {\n showMultiplePackageOptions?: boolean;\n codeLanguage: string;\n lightTheme: string;\n darkTheme: string;\n commandMap: Record;\n className?: string;\n}\n\nexport function ScriptCopyBtn({\n showMultiplePackageOptions = true,\n codeLanguage,\n lightTheme,\n darkTheme,\n commandMap,\n className,\n}: ScriptCopyBtnProps) {\n const packageManagers = Object.keys(commandMap);\n const [packageManager, setPackageManager] = useState(packageManagers[0]);\n const [copied, setCopied] = useState(false);\n const [highlightedCode, setHighlightedCode] = useState(\"\");\n const { theme } = useTheme();\n const command = commandMap[packageManager];\n\n useEffect(() => {\n async function loadHighlightedCode() {\n try {\n const highlighted = await codeToHtml(command, {\n lang: codeLanguage,\n themes: {\n light: lightTheme,\n dark: darkTheme,\n },\n defaultColor: theme === \"dark\" ? \"dark\" : \"light\",\n });\n setHighlightedCode(highlighted);\n } catch (error) {\n console.error(\"Error highlighting code:\", error);\n setHighlightedCode(`
    ${command}
    `);\n }\n }\n\n loadHighlightedCode();\n }, [command, theme, codeLanguage, lightTheme, darkTheme]);\n\n const copyToClipboard = () => {\n navigator.clipboard.writeText(command);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n };\n\n return (\n \n
    \n
    \n {showMultiplePackageOptions && (\n
    \n
    \n {packageManagers.map((pm, index) => (\n
    \n {index > 0 && (\n
    \n )}\n setPackageManager(pm)}\n >\n {pm}\n {packageManager === pm && (\n \n )}\n \n
    \n ))}\n
    \n
    \n )}\n
    \n
    \n
    \n {highlightedCode ? (\n pre]:overflow-x-auto [&>pre]:rounded-md [&>pre]:p-2 [&>pre]:px-4 [&>pre]:font-mono ${\n theme === \"dark\" ? \"dark\" : \"light\"\n }`}\n dangerouslySetInnerHTML={{ __html: highlightedCode }}\n />\n ) : (\n 
    \n                {command}\n
    \n )}\n
    \n \n {copied ? \"Copied\" : \"Copy\"}\n \n \n \n
    \n
    \n
    \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/scroll-based-velocity-demo.json b/public/r/scroll-based-velocity-demo.json new file mode 100644 index 000000000..4ff793fd4 --- /dev/null +++ b/public/r/scroll-based-velocity-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "scroll-based-velocity-demo", + "type": "registry:component", + "registryDependencies": [ + "scroll-based-velocity" + ], + "files": [ + { + "path": "registry/example/scroll-based-velocity-demo.tsx", + "content": "import { VelocityScroll } from \"@/registry/magicui/scroll-based-velocity\";\n\nexport default function ScrollBasedVelocityDemo() {\n return Velocity Scroll;\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/scroll-based-velocity.json b/public/r/scroll-based-velocity.json similarity index 92% rename from public/r/styles/default/scroll-based-velocity.json rename to public/r/scroll-based-velocity.json index 964e3ef16..a48866052 100644 --- a/public/r/styles/default/scroll-based-velocity.json +++ b/public/r/scroll-based-velocity.json @@ -1,15 +1,17 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "scroll-based-velocity", - "type": "registry:ui", + "type": "registry:component", + "title": "Scroll Based Velocity", + "description": "Scrolling text whose speed changes based on scroll speed", "dependencies": [ "motion" ], "files": [ { - "path": "magicui/scroll-based-velocity.tsx", + "path": "registry/magicui/scroll-based-velocity.tsx", "content": "\"use client\";\n\nimport {\n motion,\n useAnimationFrame,\n useMotionValue,\n useScroll,\n useSpring,\n useTransform,\n useVelocity,\n} from \"motion/react\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface VelocityScrollProps extends React.HTMLAttributes {\n defaultVelocity?: number;\n className?: string;\n numRows?: number;\n}\n\ninterface ParallaxProps extends React.HTMLAttributes {\n children: React.ReactNode;\n baseVelocity: number;\n}\n\nexport const wrap = (min: number, max: number, v: number) => {\n const rangeSize = max - min;\n return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;\n};\n\nfunction ParallaxText({\n children,\n baseVelocity = 100,\n ...props\n}: ParallaxProps) {\n const baseX = useMotionValue(0);\n const { scrollY } = useScroll();\n const scrollVelocity = useVelocity(scrollY);\n const smoothVelocity = useSpring(scrollVelocity, {\n damping: 50,\n stiffness: 400,\n });\n\n const velocityFactor = useTransform(smoothVelocity, [0, 1000], [0, 5], {\n clamp: false,\n });\n\n const [repetitions, setRepetitions] = useState(1);\n const containerRef = useRef(null);\n const textRef = useRef(null);\n\n useEffect(() => {\n const calculateRepetitions = () => {\n if (containerRef.current && textRef.current) {\n const containerWidth = containerRef.current.offsetWidth;\n const textWidth = textRef.current.offsetWidth;\n const newRepetitions = Math.ceil(containerWidth / textWidth) + 2;\n setRepetitions(newRepetitions);\n }\n };\n\n calculateRepetitions();\n\n window.addEventListener(\"resize\", calculateRepetitions);\n return () => window.removeEventListener(\"resize\", calculateRepetitions);\n }, [children]);\n\n const x = useTransform(baseX, (v) => `${wrap(-100 / repetitions, 0, v)}%`);\n\n const directionFactor = React.useRef(1);\n useAnimationFrame((t, delta) => {\n let moveBy = directionFactor.current * baseVelocity * (delta / 1000);\n\n if (velocityFactor.get() < 0) {\n directionFactor.current = -1;\n } else if (velocityFactor.get() > 0) {\n directionFactor.current = 1;\n }\n\n moveBy += directionFactor.current * moveBy * velocityFactor.get();\n\n baseX.set(baseX.get() + moveBy);\n });\n\n return (\n \n \n {Array.from({ length: repetitions }).map((_, i) => (\n \n {children}{\" \"}\n \n ))}\n \n
    \n );\n}\n\nexport function VelocityScroll({\n defaultVelocity = 5,\n numRows = 2,\n children,\n className,\n ...props\n}: VelocityScrollProps) {\n return (\n \n {Array.from({ length: numRows }).map((_, i) => (\n \n {children}\n \n ))}\n \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/scroll-progress-demo.json b/public/r/scroll-progress-demo.json new file mode 100644 index 000000000..2659b7589 --- /dev/null +++ b/public/r/scroll-progress-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "scroll-progress-demo", + "type": "registry:component", + "registryDependencies": [ + "scroll-progress" + ], + "files": [ + { + "path": "registry/example/scroll-progress-demo.tsx", + "content": "import { ScrollProgress } from \"@/registry/magicui/scroll-progress\";\n\nexport default function ScrollProgressDemo() {\n return (\n
    \n \n

    \n Note: The scroll progress is shown below the navbar of the page.\n

    \n

    \n Magic UI is a collection of re-usable components that you can copy and\n paste into your web apps. It primarily features components, blocks, and\n templates geared towards creating landing pages and user-facing\n marketing materials.\n

    \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/scroll-progress.json b/public/r/scroll-progress.json similarity index 78% rename from public/r/styles/default/scroll-progress.json rename to public/r/scroll-progress.json index 9417bf62c..5dce3ec2f 100644 --- a/public/r/styles/default/scroll-progress.json +++ b/public/r/scroll-progress.json @@ -1,15 +1,17 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "scroll-progress", - "type": "registry:ui", + "type": "registry:component", + "title": "Scroll Progress", + "description": "Animated Scroll Progress for your pages", "dependencies": [ "motion" ], "files": [ { - "path": "magicui/scroll-progress.tsx", + "path": "registry/magicui/scroll-progress.tsx", "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { motion, MotionProps, useScroll, useSpring } from \"motion/react\";\nimport React from \"react\";\ninterface ScrollProgressProps\n extends Omit, keyof MotionProps> {}\n\nexport const ScrollProgress = React.forwardRef<\n HTMLDivElement,\n ScrollProgressProps\n>(({ className, ...props }, ref) => {\n const { scrollYProgress } = useScroll();\n\n const scaleX = useSpring(scrollYProgress, {\n stiffness: 200,\n damping: 50,\n restDelta: 0.001,\n });\n\n return (\n \n );\n});\n\nScrollProgress.displayName = \"ScrollProgress\";\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/shimmer-button-demo.json b/public/r/shimmer-button-demo.json new file mode 100644 index 000000000..4d5fbd673 --- /dev/null +++ b/public/r/shimmer-button-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "shimmer-button-demo", + "type": "registry:component", + "registryDependencies": [ + "shimmer-button" + ], + "files": [ + { + "path": "registry/example/shimmer-button-demo.tsx", + "content": "import { ShimmerButton } from \"@/registry/magicui/shimmer-button\";\n\nexport default function ShimmerButtonDemo() {\n return (\n \n \n Shimmer Button\n \n \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/shimmer-button.json b/public/r/shimmer-button.json similarity index 93% rename from public/r/styles/default/shimmer-button.json rename to public/r/shimmer-button.json index 7583713d1..55fb459cf 100644 --- a/public/r/styles/default/shimmer-button.json +++ b/public/r/shimmer-button.json @@ -1,12 +1,14 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "shimmer-button", - "type": "registry:ui", + "type": "registry:component", + "title": "Shimmer Button", + "description": "A button with a shimmering light which travels around the perimeter.", "files": [ { - "path": "magicui/shimmer-button.tsx", + "path": "registry/magicui/shimmer-button.tsx", "content": "import React, { CSSProperties, ComponentPropsWithoutRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface ShimmerButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n shimmerColor?: string;\n shimmerSize?: string;\n borderRadius?: string;\n shimmerDuration?: string;\n background?: string;\n className?: string;\n children?: React.ReactNode;\n}\n\nexport const ShimmerButton = React.forwardRef<\n HTMLButtonElement,\n ShimmerButtonProps\n>(\n (\n {\n shimmerColor = \"#ffffff\",\n shimmerSize = \"0.05em\",\n shimmerDuration = \"3s\",\n borderRadius = \"100px\",\n background = \"rgba(0, 0, 0, 1)\",\n className,\n children,\n ...props\n },\n ref,\n ) => {\n return (\n \n {/* spark container */}\n \n {/* spark */}\n
    \n {/* spark before */}\n
    \n
    \n
    \n {children}\n\n {/* Highlight */}\n \n\n {/* backdrop */}\n \n \n );\n },\n);\n\nShimmerButton.displayName = \"ShimmerButton\";\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ], "tailwind": { diff --git a/public/r/shine-border-demo-2.json b/public/r/shine-border-demo-2.json new file mode 100644 index 000000000..bf43b5ab3 --- /dev/null +++ b/public/r/shine-border-demo-2.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "shine-border-demo-2", + "type": "registry:component", + "files": [ + { + "path": "registry/example/shine-border-demo-2.tsx", + "content": "import { useTheme } from \"next-themes\";\n\nimport { ShineBorder } from \"@/registry/magicui/shine-border\";\n\nexport default function ShineBorderDemo() {\n const theme = useTheme();\n return (\n \n Shine Border\n \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/shine-border-demo.json b/public/r/shine-border-demo.json new file mode 100644 index 000000000..123b892cd --- /dev/null +++ b/public/r/shine-border-demo.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "shine-border-demo", + "type": "registry:component", + "files": [ + { + "path": "registry/example/shine-border-demo.tsx", + "content": "import { ShineBorder } from \"@/registry/magicui/shine-border\";\n\nexport default function ShineBorderDemo() {\n return (\n \n \n Shine Border\n \n \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/shine-border.json b/public/r/shine-border.json similarity index 91% rename from public/r/styles/default/shine-border.json rename to public/r/shine-border.json index 369020a92..b8db413c3 100644 --- a/public/r/styles/default/shine-border.json +++ b/public/r/shine-border.json @@ -1,12 +1,14 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "shine-border", - "type": "registry:ui", + "type": "registry:component", + "title": "Shine Border", + "description": "Shine border is an animated background border effect.", "files": [ { - "path": "magicui/shine-border.tsx", + "path": "registry/magicui/shine-border.tsx", "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype TColorProp = string | string[];\n\ninterface ShineBorderProps {\n borderRadius?: number;\n borderWidth?: number;\n duration?: number;\n color?: TColorProp;\n className?: string;\n children: React.ReactNode;\n}\n\n/**\n * @name Shine Border\n * @description It is an animated background border effect component with easy to use and configurable props.\n * @param borderRadius defines the radius of the border.\n * @param borderWidth defines the width of the border.\n * @param duration defines the animation duration to be applied on the shining border\n * @param color a string or string array to define border color.\n * @param className defines the class name to be applied to the component\n * @param children contains react node elements.\n */\nexport function ShineBorder({\n borderRadius = 8,\n borderWidth = 1,\n duration = 14,\n color = \"#000000\",\n className,\n children,\n}: ShineBorderProps) {\n return (\n \n \n {children}\n \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ], "tailwind": { diff --git a/public/r/shiny-button-demo.json b/public/r/shiny-button-demo.json new file mode 100644 index 000000000..3774aaa8e --- /dev/null +++ b/public/r/shiny-button-demo.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "shiny-button-demo", + "type": "registry:component", + "files": [ + { + "path": "registry/example/shiny-button-demo.tsx", + "content": "import { ShinyButton } from \"@/registry/magicui/shiny-button\";\n\nexport default function ShinyButtonDemo() {\n return Shiny Button;\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/shiny-button.json b/public/r/shiny-button.json similarity index 88% rename from public/r/styles/default/shiny-button.json rename to public/r/shiny-button.json index d8bad36b9..c81b4b9bc 100644 --- a/public/r/styles/default/shiny-button.json +++ b/public/r/shiny-button.json @@ -1,15 +1,17 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "shiny-button", - "type": "registry:ui", + "type": "registry:component", + "title": "Shiny Button", + "description": "A shiny button component with dynamic styles in the dark mode or light mode.", "dependencies": [ "motion" ], "files": [ { - "path": "magicui/shiny-button.tsx", + "path": "registry/magicui/shiny-button.tsx", "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { motion, MotionProps, type AnimationProps } from \"motion/react\";\nimport React from \"react\";\n\nconst animationProps = {\n initial: { \"--x\": \"100%\", scale: 0.8 },\n animate: { \"--x\": \"-100%\", scale: 1 },\n whileTap: { scale: 0.95 },\n transition: {\n repeat: Infinity,\n repeatType: \"loop\",\n repeatDelay: 1,\n type: \"spring\",\n stiffness: 20,\n damping: 15,\n mass: 2,\n scale: {\n type: \"spring\",\n stiffness: 200,\n damping: 5,\n mass: 0.5,\n },\n },\n} as AnimationProps;\n\ninterface ShinyButtonProps\n extends Omit, keyof MotionProps>,\n MotionProps {\n children: React.ReactNode;\n className?: string;\n}\n\nexport const ShinyButton = React.forwardRef<\n HTMLButtonElement,\n ShinyButtonProps\n>(({ children, className, ...props }, ref) => {\n return (\n \n \n {children}\n \n \n \n );\n});\n\nShinyButton.displayName = \"ShinyButton\";\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/sparkles-text-demo.json b/public/r/sparkles-text-demo.json new file mode 100644 index 000000000..529a321d6 --- /dev/null +++ b/public/r/sparkles-text-demo.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "sparkles-text-demo", + "type": "registry:component", + "files": [ + { + "path": "registry/example/sparkles-text-demo.tsx", + "content": "import { SparklesText } from \"@/registry/magicui/sparkles-text\";\n\nexport default function SparklesTextDemo() {\n return ;\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/sparkles-text.json b/public/r/sparkles-text.json similarity index 92% rename from public/r/styles/default/sparkles-text.json rename to public/r/sparkles-text.json index 3c2a1fb2f..796b1ea65 100644 --- a/public/r/styles/default/sparkles-text.json +++ b/public/r/sparkles-text.json @@ -1,15 +1,17 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sparkles-text", - "type": "registry:ui", + "type": "registry:component", + "title": "Sparkles Text", + "description": "A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.", "dependencies": [ "motion" ], "files": [ { - "path": "magicui/sparkles-text.tsx", + "path": "registry/magicui/sparkles-text.tsx", "content": "\"use client\";\n\nimport { motion } from \"motion/react\";\nimport { CSSProperties, ReactElement, useEffect, useState } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface Sparkle {\n id: string;\n x: string;\n y: string;\n color: string;\n delay: number;\n scale: number;\n lifespan: number;\n}\n\nconst Sparkle: React.FC = ({ id, x, y, color, delay, scale }) => {\n return (\n \n \n \n );\n};\n\ninterface SparklesTextProps {\n /**\n * @default
    \n * @type ReactElement\n * @description\n * The component to be rendered as the text\n * */\n as?: ReactElement;\n\n /**\n * @default \"\"\n * @type string\n * @description\n * The className of the text\n */\n className?: string;\n\n /**\n * @required\n * @type string\n * @description\n * The text to be displayed\n * */\n text: string;\n\n /**\n * @default 10\n * @type number\n * @description\n * The count of sparkles\n * */\n sparklesCount?: number;\n\n /**\n * @default \"{first: '#9E7AFF', second: '#FE8BBB'}\"\n * @type string\n * @description\n * The colors of the sparkles\n * */\n colors?: {\n first: string;\n second: string;\n };\n}\n\nexport const SparklesText: React.FC = ({\n text,\n colors = { first: \"#9E7AFF\", second: \"#FE8BBB\" },\n className,\n sparklesCount = 10,\n ...props\n}) => {\n const [sparkles, setSparkles] = useState([]);\n\n useEffect(() => {\n const generateStar = (): Sparkle => {\n const starX = `${Math.random() * 100}%`;\n const starY = `${Math.random() * 100}%`;\n const color = Math.random() > 0.5 ? colors.first : colors.second;\n const delay = Math.random() * 2;\n const scale = Math.random() * 1 + 0.3;\n const lifespan = Math.random() * 10 + 5;\n const id = `${starX}-${starY}-${Date.now()}`;\n return { id, x: starX, y: starY, color, delay, scale, lifespan };\n };\n\n const initializeStars = () => {\n const newSparkles = Array.from({ length: sparklesCount }, generateStar);\n setSparkles(newSparkles);\n };\n\n const updateStars = () => {\n setSparkles((currentSparkles) =>\n currentSparkles.map((star) => {\n if (star.lifespan <= 0) {\n return generateStar();\n } else {\n return { ...star, lifespan: star.lifespan - 0.1 };\n }\n }),\n );\n };\n\n initializeStars();\n const interval = setInterval(updateStars, 100);\n\n return () => clearInterval(interval);\n }, [colors.first, colors.second, sparklesCount]);\n\n return (\n \n \n {sparkles.map((sparkle) => (\n \n ))}\n {text}\n \n
    \n );\n};\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/styles/default/avatar-circles.json b/public/r/styles/default/avatar-circles.json deleted file mode 100644 index 1a026669c..000000000 --- a/public/r/styles/default/avatar-circles.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "avatar-circles", - "type": "registry:ui", - "files": [ - { - "path": "magicui/avatar-circles.tsx", - "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface Avatar {\n imageUrl: string;\n profileUrl: string;\n}\ninterface AvatarCirclesProps {\n className?: string;\n numPeople?: number;\n avatarUrls: Avatar[];\n}\n\nexport const AvatarCircles = ({\n numPeople,\n className,\n avatarUrls,\n}: AvatarCirclesProps) => {\n return (\n
    \n {avatarUrls.map((url, index) => (\n \n \n \n ))}\n {(numPeople ?? 0) > 0 && (\n \n +{numPeople}\n \n )}\n
    \n );\n};\n", - "type": "registry:ui", - "target": "" - } - ] -} \ No newline at end of file diff --git a/public/r/styles/default/client-tweet-card.json b/public/r/styles/default/client-tweet-card.json deleted file mode 100644 index 828dd2878..000000000 --- a/public/r/styles/default/client-tweet-card.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "name": "client-tweet-card", - "type": "registry:ui", - "dependencies": [ - "react-tweet" - ], - "files": [ - { - "path": "magicui/client-tweet-card.tsx", - "content": "\"use client\";\n\nimport { TweetProps, useTweet } from \"react-tweet\";\n\nimport {\n MagicTweet,\n TweetNotFound,\n TweetSkeleton,\n} from \"@/registry/default/magicui/tweet-card\";\n\nexport const ClientTweetCard = ({\n id,\n apiUrl,\n fallback = ,\n components,\n fetchOptions,\n onError,\n ...props\n}: TweetProps & { className?: string }) => {\n const { data, error, isLoading } = useTweet(id, apiUrl, fetchOptions);\n\n if (isLoading) return fallback;\n if (error || !data) {\n const NotFound = components?.TweetNotFound || TweetNotFound;\n return ;\n }\n\n return ;\n};\n", - "type": "registry:ui", - "target": "" - } - ] -} \ No newline at end of file diff --git a/public/r/styles/default/hero-video-dialog.json b/public/r/styles/default/hero-video-dialog.json deleted file mode 100644 index 897659d30..000000000 --- a/public/r/styles/default/hero-video-dialog.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "name": "hero-video-dialog", - "type": "registry:ui", - "dependencies": [ - "motion" - ], - "files": [ - { - "path": "magicui/hero-video-dialog.tsx", - "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { Play, XIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype AnimationStyle =\n | \"from-bottom\"\n | \"from-center\"\n | \"from-top\"\n | \"from-left\"\n | \"from-right\"\n | \"fade\"\n | \"top-in-bottom-out\"\n | \"left-in-right-out\";\n\ninterface HeroVideoProps {\n animationStyle?: AnimationStyle;\n videoSrc: string;\n thumbnailSrc: string;\n thumbnailAlt?: string;\n className?: string;\n}\n\nconst animationVariants = {\n \"from-bottom\": {\n initial: { y: \"100%\", opacity: 0 },\n animate: { y: 0, opacity: 1 },\n exit: { y: \"100%\", opacity: 0 },\n },\n \"from-center\": {\n initial: { scale: 0.5, opacity: 0 },\n animate: { scale: 1, opacity: 1 },\n exit: { scale: 0.5, opacity: 0 },\n },\n \"from-top\": {\n initial: { y: \"-100%\", opacity: 0 },\n animate: { y: 0, opacity: 1 },\n exit: { y: \"-100%\", opacity: 0 },\n },\n \"from-left\": {\n initial: { x: \"-100%\", opacity: 0 },\n animate: { x: 0, opacity: 1 },\n exit: { x: \"-100%\", opacity: 0 },\n },\n \"from-right\": {\n initial: { x: \"100%\", opacity: 0 },\n animate: { x: 0, opacity: 1 },\n exit: { x: \"100%\", opacity: 0 },\n },\n fade: {\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n exit: { opacity: 0 },\n },\n \"top-in-bottom-out\": {\n initial: { y: \"-100%\", opacity: 0 },\n animate: { y: 0, opacity: 1 },\n exit: { y: \"100%\", opacity: 0 },\n },\n \"left-in-right-out\": {\n initial: { x: \"-100%\", opacity: 0 },\n animate: { x: 0, opacity: 1 },\n exit: { x: \"100%\", opacity: 0 },\n },\n};\n\nexport default function HeroVideoDialog({\n animationStyle = \"from-center\",\n videoSrc,\n thumbnailSrc,\n thumbnailAlt = \"Video thumbnail\",\n className,\n}: HeroVideoProps) {\n const [isVideoOpen, setIsVideoOpen] = useState(false);\n const selectedAnimation = animationVariants[animationStyle];\n\n return (\n
    \n setIsVideoOpen(true)}\n >\n \n
    \n
    \n \n \n
    \n
    \n
    \n \n \n {isVideoOpen && (\n setIsVideoOpen(false)}\n exit={{ opacity: 0 }}\n className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-md\"\n >\n \n \n \n \n
    \n \n
    \n \n \n )}\n     \n \n );\n}\n", - "type": "registry:ui", - "target": "" - } - ] -} \ No newline at end of file diff --git a/public/r/styles/default/index.json b/public/r/styles/default/index.json deleted file mode 100644 index d13e4c820..000000000 --- a/public/r/styles/default/index.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "name": "default", - "type": "registry:style", - "dependencies": [ - "tailwindcss-animate", - "class-variance-authority", - "lucide-react" - ], - "registryDependencies": [ - "utils" - ], - "tailwind": { - "config": { - "plugins": [ - "require(\"tailwindcss-animate\")" - ] - } - }, - "cssVars": {}, - "files": [] -} \ No newline at end of file diff --git a/public/r/styles/default/safari.json b/public/r/styles/default/safari.json deleted file mode 100644 index c80101a6e..000000000 --- a/public/r/styles/default/safari.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "safari", - "type": "registry:ui", - "files": [ - { - "path": "magicui/safari.tsx", - "content": "import { SVGProps } from \"react\";\n\ntype SafariMode = \"default\" | \"simple\";\n\nexport interface SafariProps extends SVGProps {\n url?: string;\n imageSrc?: string;\n videoSrc?: string;\n width?: number;\n height?: number;\n mode?: SafariMode;\n}\n\nexport default function Safari({\n imageSrc,\n videoSrc,\n url,\n width = 1203,\n height = 753,\n mode = \"default\",\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 {mode === \"default\" ? (\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 ) : null}\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": "" - } - ] -} \ No newline at end of file diff --git a/public/r/styles/default/tweet-card.json b/public/r/styles/default/tweet-card.json deleted file mode 100644 index c6967c602..000000000 --- a/public/r/styles/default/tweet-card.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "name": "tweet-card", - "type": "registry:ui", - "dependencies": [ - "react-tweet" - ], - "files": [ - { - "path": "magicui/tweet-card.tsx", - "content": "import { Suspense } from \"react\";\nimport {\n enrichTweet,\n type EnrichedTweet,\n type TweetProps,\n type TwitterComponents,\n} from \"react-tweet\";\nimport { getTweet, type Tweet } from \"react-tweet/api\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface TwitterIconProps {\n className?: string;\n [key: string]: unknown;\n}\nconst Twitter = ({ className, ...props }: TwitterIconProps) => (\n \n \n \n \n \n \n);\n\nconst Verified = ({ className, ...props }: TwitterIconProps) => (\n \n \n \n \n \n);\n\nexport const truncate = (str: string | null, length: number) => {\n if (!str || str.length <= length) return str;\n return `${str.slice(0, length - 3)}...`;\n};\n\nconst Skeleton = ({\n className,\n ...props\n}: React.HTMLAttributes) => {\n return (\n
    \n );\n};\n\nexport const TweetSkeleton = ({\n className,\n ...props\n}: {\n className?: string;\n [key: string]: unknown;\n}) => (\n \n
    \n \n \n
    \n \n
    \n);\n\nexport const TweetNotFound = ({\n className,\n ...props\n}: {\n className?: string;\n [key: string]: unknown;\n}) => (\n \n

    Tweet not found

    \n \n);\n\nexport const TweetHeader = ({ tweet }: { tweet: EnrichedTweet }) => (\n
    \n
    \n \n \n \n
    \n \n {truncate(tweet.user.name, 20)}\n {tweet.user.verified ||\n (tweet.user.is_blue_verified && (\n \n ))}\n \n
    \n \n @{truncate(tweet.user.screen_name, 16)}\n \n
    \n
    \n
    \n \n Link to tweet\n \n \n
    \n);\n\nexport const TweetBody = ({ tweet }: { tweet: EnrichedTweet }) => (\n
    \n {tweet.entities.map((entity, idx) => {\n switch (entity.type) {\n case \"url\":\n case \"symbol\":\n case \"hashtag\":\n case \"mention\":\n return (\n \n {entity.text}\n \n );\n case \"text\":\n return (\n \n );\n }\n })}\n
    \n);\n\nexport const TweetMedia = ({ tweet }: { tweet: EnrichedTweet }) => (\n
    \n {tweet.video && (\n \n \n Your browser does not support the video tag.\n \n )}\n {tweet.photos && (\n
    \n
    \n {tweet.photos.map((photo) => (\n \n ))}\n
    \n
    \n )}\n {!tweet.video &&\n !tweet.photos &&\n // @ts-ignore\n tweet?.card?.binding_values?.thumbnail_image_large?.image_value.url && (\n \n )}\n
    \n);\n\nexport const MagicTweet = ({\n tweet,\n components,\n className,\n ...props\n}: {\n tweet: Tweet;\n components?: TwitterComponents;\n className?: string;\n}) => {\n const enrichedTweet = enrichTweet(tweet);\n return (\n \n \n \n \n
    \n );\n};\n\n/**\n * TweetCard (Server Side Only)\n */\nexport const TweetCard = async ({\n id,\n components,\n fallback = ,\n onError,\n ...props\n}: TweetProps & {\n className?: string;\n}) => {\n const tweet = id\n ? await getTweet(id).catch((err) => {\n if (onError) {\n onError(err);\n } else {\n console.error(err);\n }\n })\n : undefined;\n\n if (!tweet) {\n const NotFound = components?.TweetNotFound || TweetNotFound;\n return ;\n }\n\n return (\n \n \n \n );\n};\n", - "type": "registry:ui", - "target": "" - } - ] -} \ No newline at end of file diff --git a/public/r/styles/default/utils.json b/public/r/styles/default/utils.json deleted file mode 100644 index 95a1139ef..000000000 --- a/public/r/styles/default/utils.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "name": "utils", - "type": "registry:lib", - "dependencies": [ - "clsx", - "tailwind-merge" - ], - "files": [ - { - "path": "lib/utils.ts", - "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n", - "type": "registry:lib" - } - ] -} \ No newline at end of file diff --git a/public/r/styles/index.json b/public/r/styles/index.json deleted file mode 100644 index e4116ca9e..000000000 --- a/public/r/styles/index.json +++ /dev/null @@ -1,6 +0,0 @@ -[ - { - "name": "default", - "label": "Default" - } -] \ No newline at end of file diff --git a/public/r/styles/default/terminal.json b/public/r/terminal.json similarity index 100% rename from public/r/styles/default/terminal.json rename to public/r/terminal.json diff --git a/public/r/text-animate-demo-2.json b/public/r/text-animate-demo-2.json new file mode 100644 index 000000000..31d6b783e --- /dev/null +++ b/public/r/text-animate-demo-2.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "text-animate-demo-2", + "type": "registry:component", + "files": [ + { + "path": "registry/example/text-animate-demo-2.tsx", + "content": "import { TextAnimate } from \"@/registry/magicui/text-animate\";\n\nexport default function TextAnimateDemo2() {\n return (\n \n Blur in text\n \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/text-animate-demo-3.json b/public/r/text-animate-demo-3.json new file mode 100644 index 000000000..ad0e2f992 --- /dev/null +++ b/public/r/text-animate-demo-3.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "text-animate-demo-3", + "type": "registry:component", + "files": [ + { + "path": "registry/example/text-animate-demo-3.tsx", + "content": "import { TextAnimate } from \"@/registry/magicui/text-animate\";\n\nexport default function TextAnimateDemo3() {\n return (\n \n Slide up by word\n \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/text-animate-demo-4.json b/public/r/text-animate-demo-4.json new file mode 100644 index 000000000..7a5b4ff39 --- /dev/null +++ b/public/r/text-animate-demo-4.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "text-animate-demo-4", + "type": "registry:component", + "files": [ + { + "path": "registry/example/text-animate-demo-4.tsx", + "content": "import { TextAnimate } from \"@/registry/magicui/text-animate\";\n\nexport default function TextAnimateDemo4() {\n return (\n \n Scale up by text\n \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/text-animate-demo-5.json b/public/r/text-animate-demo-5.json new file mode 100644 index 000000000..7e515859f --- /dev/null +++ b/public/r/text-animate-demo-5.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "text-animate-demo-5", + "type": "registry:component", + "files": [ + { + "path": "registry/example/text-animate-demo-5.tsx", + "content": "import { TextAnimate } from \"@/registry/magicui/text-animate\";\n\nexport default function TextAnimateDemo5() {\n return (\n \n {`Fade in by line as paragraph\\n\\nFade in by line as paragraph\\n\\nFade in by line as paragraph`}\n \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/text-animate-demo-6.json b/public/r/text-animate-demo-6.json new file mode 100644 index 000000000..ae5e7f4f3 --- /dev/null +++ b/public/r/text-animate-demo-6.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "text-animate-demo-6", + "type": "registry:component", + "files": [ + { + "path": "registry/example/text-animate-demo-6.tsx", + "content": "import { TextAnimate } from \"@/registry/magicui/text-animate\";\n\nexport default function TextAnimateDemo6() {\n return (\n \n Slide left by character\n \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/text-animate-demo.json b/public/r/text-animate-demo.json new file mode 100644 index 000000000..36feea9a7 --- /dev/null +++ b/public/r/text-animate-demo.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "text-animate-demo", + "type": "registry:component", + "files": [ + { + "path": "registry/example/text-animate-demo.tsx", + "content": "import { TextAnimate } from \"@/registry/magicui/text-animate\";\n\nexport default function TextAnimateDemo() {\n return (\n \n Blur in by character\n \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/text-animate.json b/public/r/text-animate.json similarity index 96% rename from public/r/styles/default/text-animate.json rename to public/r/text-animate.json index 4a30a3514..19155b4fb 100644 --- a/public/r/styles/default/text-animate.json +++ b/public/r/text-animate.json @@ -1,15 +1,17 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "text-animate", - "type": "registry:ui", + "type": "registry:component", + "title": "Text Animate", + "description": "A text animation component that animates text using a variety of different animations.", "dependencies": [ "motion" ], "files": [ { - "path": "magicui/text-animate.tsx", + "path": "registry/magicui/text-animate.tsx", "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { AnimatePresence, motion, MotionProps, Variants } from \"motion/react\";\nimport { ElementType } from \"react\";\n\ntype AnimationType = \"text\" | \"word\" | \"character\" | \"line\";\ntype AnimationVariant =\n | \"fadeIn\"\n | \"blurIn\"\n | \"blurInUp\"\n | \"blurInDown\"\n | \"slideUp\"\n | \"slideDown\"\n | \"slideLeft\"\n | \"slideRight\"\n | \"scaleUp\"\n | \"scaleDown\";\n\ninterface TextAnimateProps extends MotionProps {\n /**\n * The text content to animate\n */\n children: string;\n /**\n * The class name to be applied to the component\n */\n className?: string;\n /**\n * The class name to be applied to each segment\n */\n segmentClassName?: string;\n /**\n * The delay before the animation starts\n */\n delay?: number;\n /**\n * The duration of the animation\n */\n duration?: number;\n /**\n * Custom motion variants for the animation\n */\n variants?: Variants;\n /**\n * The element type to render\n */\n as?: ElementType;\n /**\n * How to split the text (\"text\", \"word\", \"character\")\n */\n by?: AnimationType;\n /**\n * Whether to start animation when component enters viewport\n */\n startOnView?: boolean;\n /**\n * Whether to animate only once\n */\n once?: boolean;\n /**\n * The animation preset to use\n */\n animation?: AnimationVariant;\n}\n\nconst staggerTimings: Record = {\n text: 0.06,\n word: 0.05,\n character: 0.03,\n line: 0.06,\n};\n\nconst defaultContainerVariants = {\n hidden: { opacity: 1 },\n show: {\n opacity: 1,\n transition: {\n staggerChildren: 0.05,\n },\n },\n exit: {\n opacity: 0,\n transition: {\n staggerChildren: 0.05,\n staggerDirection: -1,\n },\n },\n};\n\nconst defaultItemVariants: Variants = {\n hidden: { opacity: 0 },\n show: {\n opacity: 1,\n },\n exit: {\n opacity: 0,\n },\n};\n\nconst defaultItemAnimationVariants: Record<\n AnimationVariant,\n { container: Variants; item: Variants }\n> = {\n fadeIn: {\n container: defaultContainerVariants,\n item: {\n hidden: { opacity: 0, y: 20 },\n show: (delay: number) => ({\n opacity: 1,\n y: 0,\n transition: {\n delay,\n duration: 0.3,\n },\n }),\n exit: {\n opacity: 0,\n y: 20,\n transition: { duration: 0.3 },\n },\n },\n },\n blurIn: {\n container: defaultContainerVariants,\n item: {\n hidden: { opacity: 0, filter: \"blur(10px)\" },\n show: (i: number) => ({\n opacity: 1,\n filter: \"blur(0px)\",\n transition: {\n delay: i * 0.1,\n duration: 0.3,\n },\n }),\n exit: {\n opacity: 0,\n filter: \"blur(10px)\",\n transition: { duration: 0.3 },\n },\n },\n },\n blurInUp: {\n container: defaultContainerVariants,\n item: {\n hidden: { opacity: 0, filter: \"blur(10px)\", y: 20 },\n show: (delay: number) => ({\n opacity: 1,\n filter: \"blur(0px)\",\n y: 0,\n transition: {\n y: { duration: 0.3 },\n opacity: { duration: 0.4 },\n filter: { duration: 0.3 },\n },\n }),\n exit: {\n opacity: 0,\n filter: \"blur(10px)\",\n y: 20,\n transition: {\n y: { duration: 0.3 },\n opacity: { duration: 0.4 },\n filter: { duration: 0.3 },\n },\n },\n },\n },\n blurInDown: {\n container: defaultContainerVariants,\n item: {\n hidden: { opacity: 0, filter: \"blur(10px)\", y: -20 },\n show: (delay: number) => ({\n opacity: 1,\n filter: \"blur(0px)\",\n y: 0,\n transition: {\n y: { duration: 0.3 },\n opacity: { duration: 0.4 },\n filter: { duration: 0.3 },\n },\n }),\n },\n },\n slideUp: {\n container: defaultContainerVariants,\n item: {\n hidden: { y: 20, opacity: 0 },\n show: (delay: number) => ({\n y: 0,\n opacity: 1,\n transition: {\n delay,\n duration: 0.3,\n },\n }),\n exit: {\n y: -20,\n opacity: 0,\n transition: {\n duration: 0.3,\n },\n },\n },\n },\n slideDown: {\n container: defaultContainerVariants,\n item: {\n hidden: { y: -20, opacity: 0 },\n show: {\n y: 0,\n opacity: 1,\n transition: { duration: 0.3 },\n },\n exit: {\n y: 20,\n opacity: 0,\n transition: { duration: 0.3 },\n },\n },\n },\n slideLeft: {\n container: defaultContainerVariants,\n item: {\n hidden: { x: 20, opacity: 0 },\n show: {\n x: 0,\n opacity: 1,\n transition: { duration: 0.3 },\n },\n exit: {\n x: -20,\n opacity: 0,\n transition: { duration: 0.3 },\n },\n },\n },\n slideRight: {\n container: defaultContainerVariants,\n item: {\n hidden: { x: -20, opacity: 0 },\n show: {\n x: 0,\n opacity: 1,\n transition: { duration: 0.3 },\n },\n exit: {\n x: 20,\n opacity: 0,\n transition: { duration: 0.3 },\n },\n },\n },\n scaleUp: {\n container: defaultContainerVariants,\n item: {\n hidden: { scale: 0.5, opacity: 0 },\n show: {\n scale: 1,\n opacity: 1,\n transition: {\n duration: 0.3,\n scale: {\n type: \"spring\",\n damping: 15,\n stiffness: 300,\n },\n },\n },\n exit: {\n scale: 0.5,\n opacity: 0,\n transition: { duration: 0.3 },\n },\n },\n },\n scaleDown: {\n container: defaultContainerVariants,\n item: {\n hidden: { scale: 1.5, opacity: 0 },\n show: (delay: number) => ({\n scale: 1,\n opacity: 1,\n transition: {\n delay,\n duration: 0.3,\n scale: {\n type: \"spring\",\n damping: 15,\n stiffness: 300,\n },\n },\n }),\n exit: {\n scale: 1.5,\n opacity: 0,\n transition: { duration: 0.3 },\n },\n },\n },\n};\n\nexport function TextAnimate({\n children,\n delay = 0,\n duration = 0.3,\n variants,\n className,\n segmentClassName,\n as: Component = \"p\",\n startOnView = true,\n once = false,\n by = \"word\",\n animation = \"fadeIn\",\n ...props\n}: TextAnimateProps) {\n const MotionComponent = motion.create(Component);\n\n // Use provided variants or default variants based on animation type\n const finalVariants = animation\n ? {\n container: {\n ...defaultItemAnimationVariants[animation].container,\n show: {\n ...defaultItemAnimationVariants[animation].container.show,\n transition: {\n staggerChildren: staggerTimings[by],\n },\n },\n exit: {\n ...defaultItemAnimationVariants[animation].container.exit,\n transition: {\n staggerChildren: staggerTimings[by],\n staggerDirection: -1,\n },\n },\n },\n item: defaultItemAnimationVariants[animation].item,\n }\n : { container: defaultContainerVariants, item: defaultItemVariants };\n\n let segments: string[] = [];\n switch (by) {\n case \"word\":\n segments = children.split(/(\\s+)/);\n break;\n case \"character\":\n segments = children.split(\"\");\n break;\n case \"line\":\n segments = children.split(\"\\n\");\n break;\n case \"text\":\n default:\n segments = [children];\n break;\n }\n\n return (\n \n \n {segments.map((segment, i) => (\n \n {segment}\n \n ))}\n \n \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/text-reveal-demo.json b/public/r/text-reveal-demo.json new file mode 100644 index 000000000..fef39bcb4 --- /dev/null +++ b/public/r/text-reveal-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "text-reveal-demo", + "type": "registry:component", + "registryDependencies": [ + "text-reveal" + ], + "files": [ + { + "path": "registry/example/text-reveal-demo.tsx", + "content": "import { TextReveal } from \"@/registry/magicui/text-reveal\";\n\nexport default function TextRevealDemo() {\n return (\n
    \n \n
    \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/text-reveal.json b/public/r/text-reveal.json similarity index 88% rename from public/r/styles/default/text-reveal.json rename to public/r/text-reveal.json index a55fdaca4..7b7babd86 100644 --- a/public/r/styles/default/text-reveal.json +++ b/public/r/text-reveal.json @@ -1,15 +1,17 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "text-reveal", - "type": "registry:ui", + "type": "registry:component", + "title": "Text Reveal", + "description": "Fade in text as you scroll down the page.", "dependencies": [ "motion" ], "files": [ { - "path": "magicui/text-reveal.tsx", + "path": "registry/magicui/text-reveal.tsx", "content": "\"use client\";\n\nimport { motion, MotionValue, useScroll, useTransform } from \"motion/react\";\nimport { ComponentPropsWithoutRef, FC, ReactNode, useRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface TextRevealProps extends ComponentPropsWithoutRef<\"div\"> {\n text: string;\n}\n\nexport const TextReveal: FC = ({ text, className }) => {\n const targetRef = useRef(null);\n\n const { scrollYProgress } = useScroll({\n target: targetRef,\n });\n const words = text.split(\" \");\n\n return (\n
    \n \n \n {words.map((word, i) => {\n const start = i / words.length;\n const end = start + 1 / words.length;\n return (\n \n {word}\n \n );\n })}\n

    \n
    \n
    \n );\n};\n\ninterface WordProps {\n children: ReactNode;\n progress: MotionValue;\n range: [number, number];\n}\n\nconst Word: FC = ({ children, progress, range }) => {\n const opacity = useTransform(progress, range, [0, 1]);\n return (\n \n {children}\n \n {children}\n \n \n );\n};\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/themes/gray.json b/public/r/themes/gray.json deleted file mode 100644 index a7f4d7498..000000000 --- a/public/r/themes/gray.json +++ /dev/null @@ -1,58 +0,0 @@ -{ - "name": "gray", - "label": "Gray", - "cssVars": { - "light": { - "background": "0 0% 100%", - "foreground": "224 71.4% 4.1%", - "card": "0 0% 100%", - "card-foreground": "224 71.4% 4.1%", - "popover": "0 0% 100%", - "popover-foreground": "224 71.4% 4.1%", - "primary": "220.9 39.3% 11%", - "primary-foreground": "210 20% 98%", - "secondary": "220 14.3% 95.9%", - "secondary-foreground": "220.9 39.3% 11%", - "muted": "220 14.3% 95.9%", - "muted-foreground": "220 8.9% 46.1%", - "accent": "220 14.3% 95.9%", - "accent-foreground": "220.9 39.3% 11%", - "destructive": "0 84.2% 60.2%", - "destructive-foreground": "210 20% 98%", - "border": "220 13% 91%", - "input": "220 13% 91%", - "ring": "224 71.4% 4.1%", - "chart-1": "12 76% 61%", - "chart-2": "173 58% 39%", - "chart-3": "197 37% 24%", - "chart-4": "43 74% 66%", - "chart-5": "27 87% 67%" - }, - "dark": { - "background": "224 71.4% 4.1%", - "foreground": "210 20% 98%", - "card": "224 71.4% 4.1%", - "card-foreground": "210 20% 98%", - "popover": "224 71.4% 4.1%", - "popover-foreground": "210 20% 98%", - "primary": "210 20% 98%", - "primary-foreground": "220.9 39.3% 11%", - "secondary": "215 27.9% 16.9%", - "secondary-foreground": "210 20% 98%", - "muted": "215 27.9% 16.9%", - "muted-foreground": "217.9 10.6% 64.9%", - "accent": "215 27.9% 16.9%", - "accent-foreground": "210 20% 98%", - "destructive": "0 62.8% 30.6%", - "destructive-foreground": "210 20% 98%", - "border": "215 27.9% 16.9%", - "input": "215 27.9% 16.9%", - "ring": "216 12.2% 83.9%", - "chart-1": "220 70% 50%", - "chart-2": "160 60% 45%", - "chart-3": "30 80% 55%", - "chart-4": "280 65% 60%", - "chart-5": "340 75% 55%" - } - } -} \ No newline at end of file diff --git a/public/r/themes/neutral.json b/public/r/themes/neutral.json deleted file mode 100644 index 775f929bc..000000000 --- a/public/r/themes/neutral.json +++ /dev/null @@ -1,58 +0,0 @@ -{ - "name": "neutral", - "label": "Neutral", - "cssVars": { - "light": { - "background": "0 0% 100%", - "foreground": "0 0% 3.9%", - "card": "0 0% 100%", - "card-foreground": "0 0% 3.9%", - "popover": "0 0% 100%", - "popover-foreground": "0 0% 3.9%", - "primary": "0 0% 9%", - "primary-foreground": "0 0% 98%", - "secondary": "0 0% 96.1%", - "secondary-foreground": "0 0% 9%", - "muted": "0 0% 96.1%", - "muted-foreground": "0 0% 45.1%", - "accent": "0 0% 96.1%", - "accent-foreground": "0 0% 9%", - "destructive": "0 84.2% 60.2%", - "destructive-foreground": "0 0% 98%", - "border": "0 0% 89.8%", - "input": "0 0% 89.8%", - "ring": "0 0% 3.9%", - "chart-1": "12 76% 61%", - "chart-2": "173 58% 39%", - "chart-3": "197 37% 24%", - "chart-4": "43 74% 66%", - "chart-5": "27 87% 67%" - }, - "dark": { - "background": "0 0% 3.9%", - "foreground": "0 0% 98%", - "card": "0 0% 3.9%", - "card-foreground": "0 0% 98%", - "popover": "0 0% 3.9%", - "popover-foreground": "0 0% 98%", - "primary": "0 0% 98%", - "primary-foreground": "0 0% 9%", - "secondary": "0 0% 14.9%", - "secondary-foreground": "0 0% 98%", - "muted": "0 0% 14.9%", - "muted-foreground": "0 0% 63.9%", - "accent": "0 0% 14.9%", - "accent-foreground": "0 0% 98%", - "destructive": "0 62.8% 30.6%", - "destructive-foreground": "0 0% 98%", - "border": "0 0% 14.9%", - "input": "0 0% 14.9%", - "ring": "0 0% 83.1%", - "chart-1": "220 70% 50%", - "chart-2": "160 60% 45%", - "chart-3": "30 80% 55%", - "chart-4": "280 65% 60%", - "chart-5": "340 75% 55%" - } - } -} \ No newline at end of file diff --git a/public/r/themes/slate.json b/public/r/themes/slate.json deleted file mode 100644 index 17db98cb2..000000000 --- a/public/r/themes/slate.json +++ /dev/null @@ -1,58 +0,0 @@ -{ - "name": "slate", - "label": "Slate", - "cssVars": { - "light": { - "background": "0 0% 100%", - "foreground": "222.2 84% 4.9%", - "card": "0 0% 100%", - "card-foreground": "222.2 84% 4.9%", - "popover": "0 0% 100%", - "popover-foreground": "222.2 84% 4.9%", - "primary": "222.2 47.4% 11.2%", - "primary-foreground": "210 40% 98%", - "secondary": "210 40% 96.1%", - "secondary-foreground": "222.2 47.4% 11.2%", - "muted": "210 40% 96.1%", - "muted-foreground": "215.4 16.3% 46.9%", - "accent": "210 40% 96.1%", - "accent-foreground": "222.2 47.4% 11.2%", - "destructive": "0 84.2% 60.2%", - "destructive-foreground": "210 40% 98%", - "border": "214.3 31.8% 91.4%", - "input": "214.3 31.8% 91.4%", - "ring": "222.2 84% 4.9%", - "chart-1": "12 76% 61%", - "chart-2": "173 58% 39%", - "chart-3": "197 37% 24%", - "chart-4": "43 74% 66%", - "chart-5": "27 87% 67%" - }, - "dark": { - "background": "222.2 84% 4.9%", - "foreground": "210 40% 98%", - "card": "222.2 84% 4.9%", - "card-foreground": "210 40% 98%", - "popover": "222.2 84% 4.9%", - "popover-foreground": "210 40% 98%", - "primary": "210 40% 98%", - "primary-foreground": "222.2 47.4% 11.2%", - "secondary": "217.2 32.6% 17.5%", - "secondary-foreground": "210 40% 98%", - "muted": "217.2 32.6% 17.5%", - "muted-foreground": "215 20.2% 65.1%", - "accent": "217.2 32.6% 17.5%", - "accent-foreground": "210 40% 98%", - "destructive": "0 62.8% 30.6%", - "destructive-foreground": "210 40% 98%", - "border": "217.2 32.6% 17.5%", - "input": "217.2 32.6% 17.5%", - "ring": "212.7 26.8% 83.9%", - "chart-1": "220 70% 50%", - "chart-2": "160 60% 45%", - "chart-3": "30 80% 55%", - "chart-4": "280 65% 60%", - "chart-5": "340 75% 55%" - } - } -} \ No newline at end of file diff --git a/public/r/themes/stone.json b/public/r/themes/stone.json deleted file mode 100644 index 9b2babe0b..000000000 --- a/public/r/themes/stone.json +++ /dev/null @@ -1,58 +0,0 @@ -{ - "name": "stone", - "label": "Stone", - "cssVars": { - "light": { - "background": "0 0% 100%", - "foreground": "20 14.3% 4.1%", - "card": "0 0% 100%", - "card-foreground": "20 14.3% 4.1%", - "popover": "0 0% 100%", - "popover-foreground": "20 14.3% 4.1%", - "primary": "24 9.8% 10%", - "primary-foreground": "60 9.1% 97.8%", - "secondary": "60 4.8% 95.9%", - "secondary-foreground": "24 9.8% 10%", - "muted": "60 4.8% 95.9%", - "muted-foreground": "25 5.3% 44.7%", - "accent": "60 4.8% 95.9%", - "accent-foreground": "24 9.8% 10%", - "destructive": "0 84.2% 60.2%", - "destructive-foreground": "60 9.1% 97.8%", - "border": "20 5.9% 90%", - "input": "20 5.9% 90%", - "ring": "20 14.3% 4.1%", - "chart-1": "12 76% 61%", - "chart-2": "173 58% 39%", - "chart-3": "197 37% 24%", - "chart-4": "43 74% 66%", - "chart-5": "27 87% 67%" - }, - "dark": { - "background": "20 14.3% 4.1%", - "foreground": "60 9.1% 97.8%", - "card": "20 14.3% 4.1%", - "card-foreground": "60 9.1% 97.8%", - "popover": "20 14.3% 4.1%", - "popover-foreground": "60 9.1% 97.8%", - "primary": "60 9.1% 97.8%", - "primary-foreground": "24 9.8% 10%", - "secondary": "12 6.5% 15.1%", - "secondary-foreground": "60 9.1% 97.8%", - "muted": "12 6.5% 15.1%", - "muted-foreground": "24 5.4% 63.9%", - "accent": "12 6.5% 15.1%", - "accent-foreground": "60 9.1% 97.8%", - "destructive": "0 62.8% 30.6%", - "destructive-foreground": "60 9.1% 97.8%", - "border": "12 6.5% 15.1%", - "input": "12 6.5% 15.1%", - "ring": "24 5.7% 82.9%", - "chart-1": "220 70% 50%", - "chart-2": "160 60% 45%", - "chart-3": "30 80% 55%", - "chart-4": "280 65% 60%", - "chart-5": "340 75% 55%" - } - } -} \ No newline at end of file diff --git a/public/r/themes/zinc.json b/public/r/themes/zinc.json deleted file mode 100644 index 669fc8d3c..000000000 --- a/public/r/themes/zinc.json +++ /dev/null @@ -1,58 +0,0 @@ -{ - "name": "zinc", - "label": "Zinc", - "cssVars": { - "light": { - "background": "0 0% 100%", - "foreground": "240 10% 3.9%", - "card": "0 0% 100%", - "card-foreground": "240 10% 3.9%", - "popover": "0 0% 100%", - "popover-foreground": "240 10% 3.9%", - "primary": "240 5.9% 10%", - "primary-foreground": "0 0% 98%", - "secondary": "240 4.8% 95.9%", - "secondary-foreground": "240 5.9% 10%", - "muted": "240 4.8% 95.9%", - "muted-foreground": "240 3.8% 46.1%", - "accent": "240 4.8% 95.9%", - "accent-foreground": "240 5.9% 10%", - "destructive": "0 84.2% 60.2%", - "destructive-foreground": "0 0% 98%", - "border": "240 5.9% 90%", - "input": "240 5.9% 90%", - "ring": "240 10% 3.9%", - "chart-1": "12 76% 61%", - "chart-2": "173 58% 39%", - "chart-3": "197 37% 24%", - "chart-4": "43 74% 66%", - "chart-5": "27 87% 67%" - }, - "dark": { - "background": "240 10% 3.9%", - "foreground": "0 0% 98%", - "card": "240 10% 3.9%", - "card-foreground": "0 0% 98%", - "popover": "240 10% 3.9%", - "popover-foreground": "0 0% 98%", - "primary": "0 0% 98%", - "primary-foreground": "240 5.9% 10%", - "secondary": "240 3.7% 15.9%", - "secondary-foreground": "0 0% 98%", - "muted": "240 3.7% 15.9%", - "muted-foreground": "240 5% 64.9%", - "accent": "240 3.7% 15.9%", - "accent-foreground": "0 0% 98%", - "destructive": "0 62.8% 30.6%", - "destructive-foreground": "0 0% 98%", - "border": "240 3.7% 15.9%", - "input": "240 3.7% 15.9%", - "ring": "240 4.9% 83.9%", - "chart-1": "220 70% 50%", - "chart-2": "160 60% 45%", - "chart-3": "30 80% 55%", - "chart-4": "280 65% 60%", - "chart-5": "340 75% 55%" - } - } -} \ No newline at end of file diff --git a/public/r/tweet-card-demo.json b/public/r/tweet-card-demo.json new file mode 100644 index 000000000..014837e58 --- /dev/null +++ b/public/r/tweet-card-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "tweet-card-demo", + "type": "registry:component", + "registryDependencies": [ + "tweet-card" + ], + "files": [ + { + "path": "registry/example/tweet-card-demo.tsx", + "content": "import { ClientTweetCard } from \"@/registry/magicui/client-tweet-card\";\n\n/**\n * (Server Side Only)\n * (Client Side Only)\n */\nexport default function TweetDemo() {\n return ;\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/tweet-card-images.json b/public/r/tweet-card-images.json new file mode 100644 index 000000000..599b50b83 --- /dev/null +++ b/public/r/tweet-card-images.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "tweet-card-images", + "type": "registry:component", + "registryDependencies": [ + "tweet-card" + ], + "files": [ + { + "path": "registry/example/tweet-card-images.tsx", + "content": "import { ClientTweetCard } from \"@/registry/magicui/client-tweet-card\";\n\nexport default function TweetImages() {\n return ;\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/tweet-card-meta-preview.json b/public/r/tweet-card-meta-preview.json new file mode 100644 index 000000000..79943802e --- /dev/null +++ b/public/r/tweet-card-meta-preview.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "tweet-card-meta-preview", + "type": "registry:component", + "registryDependencies": [ + "tweet-card" + ], + "files": [ + { + "path": "registry/example/tweet-card-meta-preview.tsx", + "content": "import { ClientTweetCard } from \"@/registry/magicui/client-tweet-card\";\n\nexport default function TweetMetaPreview() {\n return ;\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/tweet-card.json b/public/r/tweet-card.json new file mode 100644 index 000000000..c51ca4ef7 --- /dev/null +++ b/public/r/tweet-card.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "tweet-card", + "type": "registry:component", + "title": "Tweet Card", + "description": "A card that displays a tweet with the author's name, handle, and profile picture.", + "dependencies": [ + "react-tweet" + ], + "files": [ + { + "path": "registry/magicui/tweet-card.tsx", + "content": "/* eslint-disable @next/next/no-img-element */\nimport { Suspense } from \"react\";\nimport {\n enrichTweet,\n type EnrichedTweet,\n type TweetProps,\n type TwitterComponents,\n} from \"react-tweet\";\nimport { getTweet, type Tweet } from \"react-tweet/api\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface TwitterIconProps {\n className?: string;\n [key: string]: unknown;\n}\nconst Twitter = ({ className, ...props }: TwitterIconProps) => (\n \n \n \n \n \n \n);\n\nconst Verified = ({ className, ...props }: TwitterIconProps) => (\n \n \n \n \n \n);\n\nexport const truncate = (str: string | null, length: number) => {\n if (!str || str.length <= length) return str;\n return `${str.slice(0, length - 3)}...`;\n};\n\nconst Skeleton = ({\n className,\n ...props\n}: React.HTMLAttributes) => {\n return (\n
    \n );\n};\n\nexport const TweetSkeleton = ({\n className,\n ...props\n}: {\n className?: string;\n [key: string]: unknown;\n}) => (\n \n
    \n \n \n
    \n \n
    \n);\n\nexport const TweetNotFound = ({\n className,\n ...props\n}: {\n className?: string;\n [key: string]: unknown;\n}) => (\n \n

    Tweet not found

    \n \n);\n\nexport const TweetHeader = ({ tweet }: { tweet: EnrichedTweet }) => (\n
    \n
    \n \n \n \n
    \n \n {truncate(tweet.user.name, 20)}\n {tweet.user.verified ||\n (tweet.user.is_blue_verified && (\n \n ))}\n \n
    \n \n @{truncate(tweet.user.screen_name, 16)}\n \n
    \n
    \n
    \n \n Link to tweet\n \n \n
    \n);\n\nexport const TweetBody = ({ tweet }: { tweet: EnrichedTweet }) => (\n
    \n {tweet.entities.map((entity, idx) => {\n switch (entity.type) {\n case \"url\":\n case \"symbol\":\n case \"hashtag\":\n case \"mention\":\n return (\n \n {entity.text}\n \n );\n case \"text\":\n return (\n \n );\n }\n })}\n
    \n);\n\nexport const TweetMedia = ({ tweet }: { tweet: EnrichedTweet }) => (\n
    \n {tweet.video && (\n \n \n Your browser does not support the video tag.\n \n )}\n {tweet.photos && (\n
    \n
    \n {tweet.photos.map((photo) => (\n \n ))}\n
    \n
    \n )}\n {!tweet.video &&\n !tweet.photos &&\n // @ts-ignore\n tweet?.card?.binding_values?.thumbnail_image_large?.image_value.url && (\n \n )}\n
    \n);\n\nexport const MagicTweet = ({\n tweet,\n components,\n className,\n ...props\n}: {\n tweet: Tweet;\n components?: TwitterComponents;\n className?: string;\n}) => {\n const enrichedTweet = enrichTweet(tweet);\n return (\n \n \n \n \n
    \n );\n};\n\n/**\n * TweetCard (Server Side Only)\n */\nexport const TweetCard = async ({\n id,\n components,\n fallback = ,\n onError,\n ...props\n}: TweetProps & {\n className?: string;\n}) => {\n const tweet = id\n ? await getTweet(id).catch((err) => {\n if (onError) {\n onError(err);\n } else {\n console.error(err);\n }\n })\n : undefined;\n\n if (!tweet) {\n const NotFound = components?.TweetNotFound || TweetNotFound;\n return ;\n }\n\n return (\n \n \n \n );\n};\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/typing-animation-demo.json b/public/r/typing-animation-demo.json new file mode 100644 index 000000000..c50739998 --- /dev/null +++ b/public/r/typing-animation-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "typing-animation-demo", + "type": "registry:component", + "registryDependencies": [ + "typing-animation" + ], + "files": [ + { + "path": "registry/example/typing-animation-demo.tsx", + "content": "import { TypingAnimation } from \"@/registry/magicui/typing-animation\";\n\nexport default function TypingAnimationDemo() {\n return Typing Animation;\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/typing-animation.json b/public/r/typing-animation.json similarity index 89% rename from public/r/styles/default/typing-animation.json rename to public/r/typing-animation.json index e898a6f9a..eb51ae437 100644 --- a/public/r/styles/default/typing-animation.json +++ b/public/r/typing-animation.json @@ -1,15 +1,17 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "typing-animation", - "type": "registry:ui", + "type": "registry:component", + "title": "Typing Animation", + "description": "Characters appearing in typed animation", "dependencies": [ "motion" ], "files": [ { - "path": "magicui/typing-animation.tsx", + "path": "registry/magicui/typing-animation.tsx", "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { motion, MotionProps } from \"motion/react\";\nimport { useEffect, useRef, useState } from \"react\";\n\ninterface TypingAnimationProps extends MotionProps {\n children: string;\n className?: string;\n duration?: number;\n delay?: number;\n as?: React.ElementType;\n startOnView?: boolean;\n}\n\nexport function TypingAnimation({\n children,\n className,\n duration = 100,\n delay = 0,\n as: Component = \"div\",\n startOnView = false,\n ...props\n}: TypingAnimationProps) {\n const MotionComponent = motion.create(Component, {\n forwardMotionProps: true,\n });\n\n const [displayedText, setDisplayedText] = useState(\"\");\n const [started, setStarted] = useState(false);\n const elementRef = useRef(null);\n\n useEffect(() => {\n if (!startOnView) {\n const startTimeout = setTimeout(() => {\n setStarted(true);\n }, delay);\n return () => clearTimeout(startTimeout);\n }\n\n const observer = new IntersectionObserver(\n ([entry]) => {\n if (entry.isIntersecting) {\n setTimeout(() => {\n setStarted(true);\n }, delay);\n observer.disconnect();\n }\n },\n { threshold: 0.1 },\n );\n\n if (elementRef.current) {\n observer.observe(elementRef.current);\n }\n\n return () => observer.disconnect();\n }, [delay, startOnView]);\n\n useEffect(() => {\n if (!started) return;\n\n let i = 0;\n const typingEffect = setInterval(() => {\n if (i < children.length) {\n setDisplayedText(children.substring(0, i + 1));\n i++;\n } else {\n clearInterval(typingEffect);\n }\n }, duration);\n\n return () => {\n clearInterval(typingEffect);\n };\n }, [children, duration, started]);\n\n return (\n \n {displayedText}\n \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/warp-background-demo.json b/public/r/warp-background-demo.json new file mode 100644 index 000000000..66748088e --- /dev/null +++ b/public/r/warp-background-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "warp-background-demo", + "type": "registry:component", + "registryDependencies": [ + "warp-background" + ], + "files": [ + { + "path": "registry/example/warp-background-demo.tsx", + "content": "import {\n Card,\n CardContent,\n CardDescription,\n CardTitle,\n} from \"@/components/ui/card\";\nimport { WarpBackground } from \"@/registry/magicui/warp-background\";\n\nexport default function ExampleComponentDemo() {\n return (\n \n \n \n Congratulations on Your Promotion!\n \n Your hard work and dedication have paid off. We're thrilled to\n see you take this next step in your career. Keep up the fantastic\n work!\n \n \n \n \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/warp-background.json b/public/r/warp-background.json similarity index 95% rename from public/r/styles/default/warp-background.json rename to public/r/warp-background.json index 508f9b7ba..6f5b36ea3 100644 --- a/public/r/styles/default/warp-background.json +++ b/public/r/warp-background.json @@ -1,15 +1,17 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "warp-background", - "type": "registry:ui", + "type": "registry:component", + "title": "Warp Background", + "description": "A card with a time warping background effect.", "dependencies": [ "motion" ], "files": [ { - "path": "magicui/warp-background.tsx", + "path": "registry/magicui/warp-background.tsx", "content": "import { cn } from \"@/lib/utils\";\nimport { motion } from \"motion/react\";\nimport React, { HTMLAttributes, useCallback, useMemo } from \"react\";\n\ninterface WarpBackgroundProps extends HTMLAttributes {\n children: React.ReactNode;\n perspective?: number;\n beamsPerSide?: number;\n beamSize?: number;\n beamDelayMax?: number;\n beamDelayMin?: number;\n beamDuration?: number;\n gridColor?: string;\n}\n\nconst Beam = ({\n width,\n x,\n delay,\n duration,\n}: {\n width: string | number;\n x: string | number;\n delay: number;\n duration: number;\n}) => {\n const hue = Math.floor(Math.random() * 360);\n const ar = Math.floor(Math.random() * 10) + 1;\n\n return (\n \n );\n};\n\nexport const WarpBackground: React.FC = ({\n children,\n perspective = 100,\n className,\n beamsPerSide = 3,\n beamSize = 5,\n beamDelayMax = 3,\n beamDelayMin = 0,\n beamDuration = 3,\n gridColor = \"hsl(var(--border))\",\n ...props\n}) => {\n const generateBeams = useCallback(() => {\n const beams = [];\n const cellsPerSide = Math.floor(100 / beamSize);\n const step = cellsPerSide / beamsPerSide;\n\n for (let i = 0; i < beamsPerSide; i++) {\n const x = Math.floor(i * step);\n const delay =\n Math.random() * (beamDelayMax - beamDelayMin) + beamDelayMin;\n beams.push({ x, delay });\n }\n return beams;\n }, [beamsPerSide, beamSize, beamDelayMax, beamDelayMin]);\n\n const topBeams = useMemo(() => generateBeams(), [generateBeams]);\n const rightBeams = useMemo(() => generateBeams(), [generateBeams]);\n const bottomBeams = useMemo(() => generateBeams(), [generateBeams]);\n const leftBeams = useMemo(() => generateBeams(), [generateBeams]);\n\n return (\n
    \n \n {/* top side */}\n
    \n {topBeams.map((beam, index) => (\n \n ))}\n
    \n {/* bottom side */}\n
    \n {bottomBeams.map((beam, index) => (\n \n ))}\n
    \n {/* left side */}\n
    \n {leftBeams.map((beam, index) => (\n \n ))}\n
    \n {/* right side */}\n
    \n {rightBeams.map((beam, index) => (\n \n ))}\n
    \n
    \n
    {children}
    \n
    \n );\n};\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/public/r/word-rotate-demo.json b/public/r/word-rotate-demo.json new file mode 100644 index 000000000..f0b250c2d --- /dev/null +++ b/public/r/word-rotate-demo.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "word-rotate-demo", + "type": "registry:component", + "registryDependencies": [ + "word-rotate" + ], + "files": [ + { + "path": "registry/example/word-rotate-demo.tsx", + "content": "import { WordRotate } from \"@/registry/magicui/word-rotate\";\n\nexport default function WordRotateDemo() {\n return (\n \n );\n}\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/public/r/styles/default/word-rotate.json b/public/r/word-rotate.json similarity index 83% rename from public/r/styles/default/word-rotate.json rename to public/r/word-rotate.json index 7e00b1a36..3bc8a0084 100644 --- a/public/r/styles/default/word-rotate.json +++ b/public/r/word-rotate.json @@ -1,15 +1,17 @@ { + "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "word-rotate", - "type": "registry:ui", + "type": "registry:component", + "title": "Word Rotate", + "description": "A vertical rotation of words", "dependencies": [ "motion" ], "files": [ { - "path": "magicui/word-rotate.tsx", + "path": "registry/magicui/word-rotate.tsx", "content": "\"use client\";\n\nimport { AnimatePresence, motion, MotionProps } from \"motion/react\";\nimport { useEffect, useState } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface WordRotateProps {\n words: string[];\n duration?: number;\n motionProps?: MotionProps;\n className?: string;\n}\n\nexport function WordRotate({\n words,\n duration = 2500,\n motionProps = {\n initial: { opacity: 0, y: -50 },\n animate: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: 50 },\n transition: { duration: 0.25, ease: \"easeOut\" },\n },\n className,\n}: WordRotateProps) {\n const [index, setIndex] = useState(0);\n\n useEffect(() => {\n const interval = setInterval(() => {\n setIndex((prevIndex) => (prevIndex + 1) % words.length);\n }, duration);\n\n // Clean up interval on unmount\n return () => clearInterval(interval);\n }, [words, duration]);\n\n return (\n
    \n \n \n {words[index]}\n \n \n
    \n );\n}\n", - "type": "registry:ui", - "target": "" + "type": "registry:component" } ] } \ No newline at end of file diff --git a/registry.json b/registry.json new file mode 100644 index 000000000..47558aaf5 --- /dev/null +++ b/registry.json @@ -0,0 +1,2731 @@ +{ + "name": "Magic UI", + "homepage": "https://magicui.design", + "items": [ + { + "name": "index", + "type": "registry:style", + "dependencies": [ + "tailwindcss-animate", + "class-variance-authority", + "lucide-react" + ], + "registryDependencies": [ + "utils" + ], + "files": [], + "tailwind": { + "config": { + "plugins": [ + "require(\"tailwindcss-animate\")" + ] + } + }, + "cssVars": {} + }, + { + "name": "magic-card", + "type": "registry:ui", + "title": "Magic Card", + "description": "A spotlight effect that follows your mouse cursor and highlights borders on hover.", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/magic-card.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "android", + "type": "registry:ui", + "title": "Android", + "description": "A mockup of an Android device.", + "files": [ + { + "path": "registry/magicui/android.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "warp-background", + "type": "registry:ui", + "title": "Warp Background", + "description": "A card with a time warping background effect.", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/warp-background.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "line-shadow-text", + "type": "registry:ui", + "title": "Line Shadow Text", + "description": "A text component with a moving line shadow.", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/line-shadow-text.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "aurora-text", + "type": "registry:ui", + "title": "Aurora Text", + "description": "A beautiful aurora text effect", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/aurora-text.tsx", + "type": "registry:ui" + } + ], + "tailwind": { + "config": { + "theme": { + "extend": { + "colors": { + "color-1": "hsl(var(--color-1))", + "color-2": "hsl(var(--color-2))", + "color-3": "hsl(var(--color-3))", + "color-4": "hsl(var(--color-4))", + "color-5": "hsl(var(--color-5))" + }, + "keyframes": { + "aurora-border": { + "0%, 100%": { + "borderRadius": "37% 29% 27% 27% / 28% 25% 41% 37%" + }, + "25%": { + "borderRadius": "47% 29% 39% 49% / 61% 19% 66% 26%" + }, + "50%": { + "borderRadius": "57% 23% 47% 72% / 63% 17% 66% 33%" + }, + "75%": { + "borderRadius": "28% 49% 29% 100% / 93% 20% 64% 25%" + } + }, + "aurora-1": { + "0%, 100%": { + "top": "0", + "right": "0" + }, + "50%": { + "top": "50%", + "right": "25%" + }, + "75%": { + "top": "25%", + "right": "50%" + } + }, + "aurora-2": { + "0%, 100%": { + "top": "0", + "left": "0" + }, + "60%": { + "top": "75%", + "left": "25%" + }, + "85%": { + "top": "50%", + "left": "50%" + } + }, + "aurora-3": { + "0%, 100%": { + "bottom": "0", + "left": "0" + }, + "40%": { + "bottom": "50%", + "left": "25%" + }, + "65%": { + "bottom": "25%", + "left": "50%" + } + }, + "aurora-4": { + "0%, 100%": { + "bottom": "0", + "right": "0" + }, + "50%": { + "bottom": "25%", + "right": "40%" + }, + "90%": { + "bottom": "50%", + "right": "25%" + } + } + } + } + } + } + }, + "cssVars": { + "light": { + "--color-1": "0 100% 63%", + "--color-2": "270 100% 63%", + "--color-3": "210 100% 63%", + "--color-4": "195 100% 63%", + "--color-5": "90 100% 63%" + }, + "dark": { + "--color-1": "0 100% 63%", + "--color-2": "270 100% 63%", + "--color-3": "210 100% 63%", + "--color-4": "195 100% 63%", + "--color-5": "90 100% 63%" + } + } + }, + { + "name": "morphing-text", + "type": "registry:ui", + "title": "Morphing Text", + "description": "A dynamic text morphing component for Magic UI.", + "files": [ + { + "path": "registry/magicui/morphing-text.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "scroll-progress", + "type": "registry:ui", + "title": "Scroll Progress", + "description": "Animated Scroll Progress for your pages", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/scroll-progress.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "neon-gradient-card", + "type": "registry:ui", + "title": "Neon Gradient Card", + "description": "A beautiful neon card effect", + "files": [ + { + "path": "registry/magicui/neon-gradient-card.tsx", + "type": "registry:ui" + } + ], + "tailwind": { + "config": { + "theme": { + "extend": { + "animation": { + "background-position-spin": "background-position-spin 3000ms infinite alternate" + }, + "keyframes": { + "background-position-spin": { + "0%": { + "backgroundPosition": "top center" + }, + "100%": { + "backgroundPosition": "bottom center" + } + } + } + } + } + } + } + }, + { + "name": "meteors", + "type": "registry:ui", + "title": "Meteors", + "description": "A meteor shower effect.", + "files": [ + { + "path": "registry/magicui/meteors.tsx", + "type": "registry:ui" + } + ], + "tailwind": { + "config": { + "theme": { + "extend": { + "animation": { + "meteor": "meteor 5s linear infinite" + }, + "keyframes": { + "meteor": { + "0%": { + "transform": "rotate(215deg) translateX(0)", + "opacity": "1" + }, + "70%": { + "opacity": "1" + }, + "100%": { + "transform": "rotate(215deg) translateX(-500px)", + "opacity": "0" + } + } + } + } + } + } + } + }, + { + "name": "grid-pattern", + "type": "registry:ui", + "title": "Grid Pattern", + "description": "A background grid pattern made with SVGs, fully customizable using Tailwind CSS.", + "files": [ + { + "path": "registry/magicui/grid-pattern.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "interactive-grid-pattern", + "type": "registry:ui", + "title": "Interactive Grid Pattern", + "description": "A interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS.", + "files": [ + { + "path": "registry/magicui/interactive-grid-pattern.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "dot-pattern", + "type": "registry:ui", + "title": "Dot Pattern", + "description": "A background dot pattern made with SVGs, fully customizable using Tailwind CSS.", + "files": [ + { + "path": "registry/magicui/dot-pattern.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "flickering-grid", + "type": "registry:ui", + "title": "Flickering Grid", + "description": "A flickering grid background made with SVGs, fully customizable using Tailwind CSS.", + "files": [ + { + "path": "registry/magicui/flickering-grid.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "hero-video-dialog", + "type": "registry:ui", + "title": "Hero Video Dialog", + "description": "A hero video dialog component.", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/hero-video-dialog.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "code-comparison", + "type": "registry:ui", + "title": "Code Comparison", + "description": "A component which compares two code snippets.", + "dependencies": [ + "shiki", + "next-themes" + ], + "files": [ + { + "path": "registry/magicui/code-comparison.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "script-copy-btn", + "type": "registry:ui", + "title": "Script Copy Button", + "description": "Copy code to clipboard", + "dependencies": [ + "motion", + "shiki", + "next-themes" + ], + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "registry/magicui/script-copy-btn.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "marquee", + "type": "registry:ui", + "title": "Marquee", + "description": "An infinite scrolling component that can be used to display text, images, or videos.", + "files": [ + { + "path": "registry/magicui/marquee.tsx", + "type": "registry:ui" + } + ], + "tailwind": { + "config": { + "theme": { + "extend": { + "keyframes": { + "marquee": { + "from": { + "transform": "translateX(0)" + }, + "to": { + "transform": "translateX(calc(-100% - var(--gap)))" + } + }, + "marquee-vertical": { + "from": { + "transform": "translateY(0)" + }, + "to": { + "transform": "translateY(calc(-100% - var(--gap)))" + } + } + }, + "animation": { + "marquee": "marquee var(--duration) infinite linear", + "marquee-vertical": "marquee-vertical var(--duration) linear infinite" + } + } + } + } + } + }, + { + "name": "globe", + "type": "registry:ui", + "title": "Globe", + "description": "An autorotating, interactive, and highly performant globe made using WebGL.", + "dependencies": [ + "cobe" + ], + "files": [ + { + "path": "registry/magicui/globe.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "shimmer-button", + "type": "registry:ui", + "title": "Shimmer Button", + "description": "A button with a shimmering light which travels around the perimeter.", + "files": [ + { + "path": "registry/magicui/shimmer-button.tsx", + "type": "registry:ui" + } + ], + "tailwind": { + "config": { + "theme": { + "extend": { + "animation": { + "shimmer-slide": "shimmer-slide var(--speed) ease-in-out infinite alternate", + "spin-around": "spin-around calc(var(--speed) * 2) infinite linear" + }, + "keyframes": { + "shimmer-slide": { + "to": { + "transform": "translate(calc(100cqw - 100%), 0)" + } + }, + "spin-around": { + "0%": { + "transform": "translateZ(0) rotate(0)" + }, + "15%, 35%": { + "transform": "translateZ(0) rotate(90deg)" + }, + "65%, 85%": { + "transform": "translateZ(0) rotate(270deg)" + }, + "100%": { + "transform": "translateZ(0) rotate(360deg)" + } + } + } + } + } + } + } + }, + { + "name": "tweet-card", + "type": "registry:ui", + "title": "Tweet Card", + "description": "A card that displays a tweet with the author's name, handle, and profile picture.", + "dependencies": [ + "react-tweet" + ], + "files": [ + { + "path": "registry/magicui/tweet-card.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "client-tweet-card", + "type": "registry:ui", + "title": "Client Tweet Card", + "description": "A client-side version of the tweet card that displays a tweet with the author's name, handle, and profile picture.", + "dependencies": [ + "react-tweet" + ], + "files": [ + { + "path": "registry/magicui/client-tweet-card.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "bento-grid", + "type": "registry:ui", + "title": "Bento Grid", + "description": "Bento grid is a layout used to showcase the features of a product in a simple and elegant way.", + "dependencies": [ + "@radix-ui/react-icons" + ], + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "registry/magicui/bento-grid.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "particles", + "type": "registry:ui", + "title": "Particles", + "description": "Particles are a fun way to add some visual flair to your website. They can be used to create a sense of depth, movement, and interactivity.", + "files": [ + { + "path": "registry/magicui/particles.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "number-ticker", + "type": "registry:ui", + "title": "Number Ticker", + "description": "Animate numbers to count up or down to a target number", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/number-ticker.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "ripple", + "type": "registry:ui", + "title": "Ripple", + "description": "An animated ripple effect typically used behind elements to emphasize them.", + "files": [ + { + "path": "registry/magicui/ripple.tsx", + "type": "registry:ui" + } + ], + "tailwind": { + "config": { + "theme": { + "extend": { + "animation": { + "ripple": "ripple var(--duration,2s) ease calc(var(--i, 0)*.2s) infinite" + }, + "keyframes": { + "ripple": { + "0%, 100%": { + "transform": "translate(-50%, -50%) scale(1)" + }, + "50%": { + "transform": "translate(-50%, -50%) scale(0.9)" + } + } + } + } + } + } + } + }, + { + "name": "retro-grid", + "type": "registry:ui", + "title": "Retro Grid", + "description": "An animated scrolling retro grid effect", + "files": [ + { + "path": "registry/magicui/retro-grid.tsx", + "type": "registry:ui" + } + ], + "tailwind": { + "config": { + "theme": { + "extend": { + "animation": { + "grid": "grid 15s linear infinite" + }, + "keyframes": { + "grid": { + "0%": { + "transform": "translateY(-50%)" + }, + "100%": { + "transform": "translateY(0)" + } + } + } + } + } + } + } + }, + { + "name": "animated-list", + "type": "registry:ui", + "title": "Animated List", + "description": "A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/animated-list.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "animated-shiny-text", + "type": "registry:ui", + "title": "Animated Shiny Text", + "description": "A light glare effect which pans across text making it appear as if it is shimmering.", + "files": [ + { + "path": "registry/magicui/animated-shiny-text.tsx", + "type": "registry:ui" + } + ], + "tailwind": { + "config": { + "theme": { + "extend": { + "animation": { + "shiny-text": "shiny-text 8s infinite" + }, + "keyframes": { + "shiny-text": { + "0%, 90%, 100%": { + "background-position": "calc(-100% - var(--shiny-width)) 0" + }, + "30%, 60%": { + "background-position": "calc(100% + var(--shiny-width)) 0" + } + } + } + } + } + } + } + }, + { + "name": "animated-grid-pattern", + "type": "registry:ui", + "title": "Animated Grid Pattern", + "description": "A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/animated-grid-pattern.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "border-beam", + "type": "registry:ui", + "title": "Border Beam", + "description": "An animated beam of light which travels along the border of its container.", + "files": [ + { + "path": "registry/magicui/border-beam.tsx", + "type": "registry:ui" + } + ], + "tailwind": { + "config": { + "theme": { + "extend": { + "animation": { + "border-beam": "border-beam calc(var(--duration)*1s) infinite linear" + }, + "keyframes": { + "border-beam": { + "100%": { + "offset-distance": "100%" + } + } + } + } + } + } + } + }, + { + "name": "animated-beam", + "type": "registry:ui", + "title": "Animated Beam", + "description": "An animated beam of light which travels along a path. Useful for showcasing the \"integration\" features of a website.", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/animated-beam.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "text-reveal", + "type": "registry:ui", + "title": "Text Reveal", + "description": "Fade in text as you scroll down the page.", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/text-reveal.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "hyper-text", + "type": "registry:ui", + "title": "Hyper Text", + "description": "A text animation that scrambles letters before revealing the final text.", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/hyper-text.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "animated-gradient-text", + "type": "registry:ui", + "title": "Animated Gradient Text", + "description": "An animated gradient background which transitions between colors for text.", + "files": [ + { + "path": "registry/magicui/animated-gradient-text.tsx", + "type": "registry:ui" + } + ], + "tailwind": { + "config": { + "theme": { + "extend": { + "animation": { + "gradient": "gradient 8s linear infinite" + }, + "keyframes": { + "gradient": { + "to": { + "backgroundPosition": "var(--bg-size) 0" + } + } + } + } + } + } + } + }, + { + "name": "orbiting-circles", + "type": "registry:ui", + "title": "Orbiting Circles", + "description": "A collection of circles which move in orbit along a circular path", + "files": [ + { + "path": "registry/magicui/orbiting-circles.tsx", + "type": "registry:ui" + } + ], + "tailwind": { + "config": { + "theme": { + "extend": { + "animation": { + "orbit": "orbit calc(var(--duration)*1s) linear infinite" + }, + "keyframes": { + "orbit": { + "0%": { + "transform": "rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) rotate(calc(var(--angle) * -1deg))" + }, + "100%": { + "transform": "rotate(calc(var(--angle) * 1deg + 360deg)) translateY(calc(var(--radius) * 1px)) rotate(calc((var(--angle) * -1deg) - 360deg))" + } + } + } + } + } + } + } + }, + { + "name": "dock", + "type": "registry:ui", + "title": "Dock", + "description": "An implementation of the MacOS dock using react + tailwindcss + framer motion", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/dock.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "word-rotate", + "type": "registry:ui", + "title": "Word Rotate", + "description": "A vertical rotation of words", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/word-rotate.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "avatar-circles", + "type": "registry:ui", + "title": "Avatar Circles", + "description": "Overlapping circles of avatars.", + "files": [ + { + "path": "registry/magicui/avatar-circles.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "typing-animation", + "type": "registry:ui", + "title": "Typing Animation", + "description": "Characters appearing in typed animation", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/typing-animation.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "sparkles-text", + "type": "registry:ui", + "title": "Sparkles Text", + "description": "A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/sparkles-text.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "flip-text", + "type": "registry:ui", + "title": "Flip Text", + "description": "Text flipping character animation", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/flip-text.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "icon-cloud", + "type": "registry:ui", + "title": "Icon Cloud", + "description": "An interactive 3D tag cloud component", + "dependencies": [], + "files": [ + { + "path": "registry/magicui/icon-cloud.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "text-animate", + "type": "registry:ui", + "title": "Text Animate", + "description": "A text animation component that animates text using a variety of different animations.", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/text-animate.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "scroll-based-velocity", + "type": "registry:ui", + "title": "Scroll Based Velocity", + "description": "Scrolling text whose speed changes based on scroll speed", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/scroll-based-velocity.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "scratch-to-reveal", + "type": "registry:ui", + "title": "Scratch To Reveal", + "description": "The ScratchToReveal component creates an interactive scratch-off effect with customizable dimensions and animations, revealing hidden content beneath.", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/scratch-to-reveal.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "shiny-button", + "type": "registry:ui", + "title": "Shiny Button", + "description": "A shiny button component with dynamic styles in the dark mode or light mode.", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/shiny-button.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "box-reveal", + "type": "registry:ui", + "title": "Box Reveal Animation", + "description": "Sliding box animation that reveals text behind it.", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/box-reveal.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "shine-border", + "type": "registry:ui", + "title": "Shine Border", + "description": "Shine border is an animated background border effect.", + "files": [ + { + "path": "registry/magicui/shine-border.tsx", + "type": "registry:ui" + } + ], + "tailwind": { + "config": { + "theme": { + "extend": { + "animation": { + "shine": "shine var(--duration) infinite linear" + }, + "keyframes": { + "shine": { + "0%": { + "background-position": "0% 0%" + }, + "50%": { + "background-position": "100% 100%" + }, + "to": { + "background-position": "0% 0%" + } + } + } + } + } + } + } + }, + { + "name": "animated-circular-progress-bar", + "type": "registry:ui", + "title": "Animated Circular Progress Bar", + "description": "Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value.", + "files": [ + { + "path": "registry/magicui/animated-circular-progress-bar.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "confetti", + "type": "registry:ui", + "title": "Confetti", + "description": "Confetti animations are best used to delight your users when something special happens", + "dependencies": [ + "canvas-confetti", + "@types/canvas-confetti" + ], + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "registry/magicui/confetti.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "animated-subscribe-button", + "type": "registry:ui", + "title": "Animated Subscribe Button", + "description": "An animated subscribe button useful for showing a micro animation from intial to final result.", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/animated-subscribe-button.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "cool-mode", + "type": "registry:ui", + "title": "Cool Mode", + "description": "Cool mode effect for buttons, links, and other DOMs", + "files": [ + { + "path": "registry/magicui/cool-mode.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "pulsating-button", + "type": "registry:ui", + "title": "Pulsating Button", + "description": "An animated pulsating button useful for capturing attention of users.", + "files": [ + { + "path": "registry/magicui/pulsating-button.tsx", + "type": "registry:ui" + } + ], + "tailwind": { + "config": { + "theme": { + "extend": { + "animation": { + "pulse": "pulse var(--duration) ease-out infinite" + }, + "keyframes": { + "pulse": { + "0%, 100%": { + "boxShadow": "0 0 0 0 var(--pulse-color)" + }, + "50%": { + "boxShadow": "0 0 0 8px var(--pulse-color)" + } + } + } + } + } + } + } + }, + { + "name": "ripple-button", + "type": "registry:ui", + "title": "Ripple Button", + "description": "An animated button with ripple useful for user engagement.", + "files": [ + { + "path": "registry/magicui/ripple-button.tsx", + "type": "registry:ui" + } + ], + "tailwind": { + "config": { + "theme": { + "extend": { + "animation": { + "rippling": "rippling var(--duration) ease-out" + }, + "keyframes": { + "rippling": { + "0%": { + "opacity": "1" + }, + "100%": { + "transform": "scale(2)", + "opacity": "0" + } + } + } + } + } + } + } + }, + { + "name": "file-tree", + "type": "registry:ui", + "title": "File Tree", + "description": "A component used to showcase the folder and file structure of a directory.", + "files": [ + { + "path": "registry/magicui/file-tree.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "blur-fade", + "type": "registry:ui", + "title": "Blur Fade", + "description": "Blur fade in and out animation. Used to smoothly fade in and out content.", + "dependencies": [ + "motion" + ], + "files": [ + { + "path": "registry/magicui/blur-fade.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "safari", + "type": "registry:ui", + "title": "Safari", + "description": "A safari browser mockup to showcase your website.", + "files": [ + { + "path": "registry/magicui/safari.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "iphone-15-pro", + "type": "registry:ui", + "title": "iPhone 15 Pro", + "description": "A mockup of the iPhone 15 Pro", + "files": [ + { + "path": "registry/magicui/iphone-15-pro.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "rainbow-button", + "type": "registry:ui", + "title": "Rainbow Button", + "description": "An animated button with a rainbow effect.", + "files": [ + { + "path": "registry/magicui/rainbow-button.tsx", + "type": "registry:ui" + } + ], + "tailwind": { + "config": { + "theme": { + "extend": { + "colors": { + "color-1": "hsl(var(--color-1))", + "color-2": "hsl(var(--color-2))", + "color-3": "hsl(var(--color-3))", + "color-4": "hsl(var(--color-4))", + "color-5": "hsl(var(--color-5))" + }, + "animation": { + "rainbow": "rainbow var(--speed, 2s) infinite linear" + }, + "keyframes": { + "rainbow": { + "0%": { + "background-position": "0%" + }, + "100%": { + "background-position": "200%" + } + } + } + } + } + } + }, + "cssVars": { + "light": { + "--color-1": "0 100% 63%", + "--color-2": "270 100% 63%", + "--color-3": "210 100% 63%", + "--color-4": "195 100% 63%", + "--color-5": "90 100% 63%" + }, + "dark": { + "--color-1": "0 100% 63%", + "--color-2": "270 100% 63%", + "--color-3": "210 100% 63%", + "--color-4": "195 100% 63%", + "--color-5": "90 100% 63%" + } + } + }, + { + "name": "interactive-hover-button", + "type": "registry:ui", + "files": [ + { + "path": "registry/magicui/interactive-hover-button.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "magic-card-demo", + "type": "registry:example", + "title": "Magic Card Demo", + "description": "Example showing a spotlight effect that follows your mouse cursor and highlights borders on hover.", + "registryDependencies": [ + "magic-card" + ], + "files": [ + { + "path": "registry/example/magic-card-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "android-demo", + "type": "registry:example", + "title": "Android Demo", + "description": "Example showing a mockup of an Android device.", + "registryDependencies": [ + "android" + ], + "files": [ + { + "path": "registry/example/android-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "android-demo-2", + "type": "registry:example", + "title": "Android Demo 2", + "description": "Second example showing a mockup of an Android device.", + "registryDependencies": [ + "android" + ], + "files": [ + { + "path": "registry/example/android-demo-2.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "android-demo-3", + "type": "registry:example", + "title": "Android Demo 3", + "description": "Third example showing a mockup of an Android device.", + "registryDependencies": [ + "android" + ], + "files": [ + { + "path": "registry/example/android-demo-3.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "warp-background-demo", + "type": "registry:example", + "title": "Warp Background Demo", + "description": "Example showing a card with a time warping background effect.", + "registryDependencies": [ + "warp-background" + ], + "files": [ + { + "path": "registry/example/warp-background-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "line-shadow-text-demo", + "type": "registry:example", + "title": "Line Shadow Text Demo", + "description": "Example showing a text component with a moving line shadow.", + "registryDependencies": [ + "line-shadow-text" + ], + "files": [ + { + "path": "registry/example/line-shadow-text-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "aurora-text-demo", + "type": "registry:example", + "title": "Aurora Text Demo", + "description": "Example showing a beautiful aurora text effect.", + "registryDependencies": [ + "aurora-text" + ], + "files": [ + { + "path": "registry/example/aurora-text-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "morphing-text-demo", + "type": "registry:example", + "title": "Morphing Text Demo", + "description": "Example showing a dynamic text morphing component.", + "registryDependencies": [ + "morphing-text" + ], + "files": [ + { + "path": "registry/example/morphing-text-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "scroll-progress-demo", + "type": "registry:example", + "title": "Scroll Progress Demo", + "description": "Example showing animated scroll progress for your pages.", + "registryDependencies": [ + "scroll-progress" + ], + "files": [ + { + "path": "registry/example/scroll-progress-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "neon-gradient-card-demo", + "type": "registry:example", + "title": "Neon Gradient Card Demo", + "description": "Example showing a beautiful neon card effect.", + "files": [ + { + "path": "registry/example/neon-gradient-card-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "meteors-demo", + "type": "registry:example", + "title": "Meteors Demo", + "description": "Example showing a meteor shower effect.", + "registryDependencies": [ + "meteors" + ], + "files": [ + { + "path": "registry/example/meteors-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "grid-pattern-demo", + "type": "registry:example", + "title": "Grid Pattern Demo", + "description": "Example showing a background grid pattern made with SVGs.", + "registryDependencies": [ + "grid-pattern" + ], + "files": [ + { + "path": "registry/example/grid-pattern-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "grid-pattern-linear-gradient", + "type": "registry:example", + "title": "Grid Pattern Linear Gradient", + "description": "Example showing a grid pattern with linear gradient effects.", + "registryDependencies": [ + "grid-pattern" + ], + "files": [ + { + "path": "registry/example/grid-pattern-linear-gradient.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "grid-pattern-dashed", + "type": "registry:example", + "title": "Grid Pattern Dashed", + "description": "Example showing a dashed grid pattern.", + "registryDependencies": [ + "grid-pattern" + ], + "files": [ + { + "path": "registry/example/grid-pattern-dashed.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "dot-pattern-demo", + "type": "registry:example", + "title": "Dot Pattern Demo", + "description": "Example showing a background dot pattern made with SVGs.", + "registryDependencies": [ + "dot-pattern" + ], + "files": [ + { + "path": "registry/example/dot-pattern-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "dot-pattern-linear-gradient", + "type": "registry:example", + "title": "Dot Pattern Linear Gradient", + "description": "Example showing a dot pattern with linear gradient effects.", + "registryDependencies": [ + "dot-pattern" + ], + "files": [ + { + "path": "registry/example/dot-pattern-linear-gradient.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "flickering-grid-demo", + "type": "registry:example", + "title": "Flickering Grid Demo", + "description": "Example showing a flickering grid background.", + "files": [ + { + "path": "registry/example/flickering-grid-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "flickering-grid-rounded-demo", + "type": "registry:example", + "title": "Flickering Grid Rounded Demo", + "description": "Example showing a flickering grid background with rounded corners.", + "files": [ + { + "path": "registry/example/flickering-grid-rounded-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "hero-video-dialog-demo", + "type": "registry:example", + "title": "Hero Video Dialog Demo", + "description": "Example showing a hero video dialog component.", + "files": [ + { + "path": "registry/example/hero-video-dialog-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "hero-video-dialog-demo-top-in-bottom-out", + "type": "registry:example", + "title": "Hero Video Dialog Top In Bottom Out Demo", + "description": "Example showing a hero video dialog with top-in bottom-out animation.", + "files": [ + { + "path": "registry/example/hero-video-dialog-demo-top-in-bottom-out.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "code-comparison-demo", + "type": "registry:example", + "title": "Code Comparison Demo", + "description": "Example showing a component which compares two code snippets.", + "files": [ + { + "path": "registry/example/code-comparison-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "script-copy-btn-demo", + "type": "registry:example", + "title": "Script Copy Button Demo", + "description": "Example showing how to copy code to clipboard.", + "files": [ + { + "path": "registry/example/script-copy-btn-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "marquee-demo", + "type": "registry:example", + "title": "Marquee Demo", + "description": "Example showing an infinite scrolling component.", + "registryDependencies": [ + "marquee" + ], + "files": [ + { + "path": "registry/example/marquee-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "marquee-demo-vertical", + "type": "registry:example", + "title": "Marquee Vertical Demo", + "description": "Example showing a vertical infinite scrolling component.", + "registryDependencies": [ + "marquee" + ], + "files": [ + { + "path": "registry/example/marquee-demo-vertical.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "marquee-logos", + "type": "registry:example", + "title": "Marquee Logos", + "description": "Example showing an infinite scrolling logo carousel.", + "registryDependencies": [ + "marquee" + ], + "files": [ + { + "path": "registry/example/marquee-logos.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "marquee-3d", + "type": "registry:example", + "title": "Marquee 3D", + "description": "Example showing a 3D infinite scrolling component.", + "registryDependencies": [ + "marquee" + ], + "files": [ + { + "path": "registry/example/marquee-3d.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "globe-demo", + "type": "registry:example", + "title": "Globe Demo", + "description": "Example showing an autorotating, interactive WebGL globe.", + "registryDependencies": [ + "globe" + ], + "files": [ + { + "path": "registry/example/globe-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "tweet-card-demo", + "type": "registry:example", + "title": "Tweet Card Demo", + "description": "Example showing a tweet card with author info.", + "registryDependencies": [ + "tweet-card" + ], + "files": [ + { + "path": "registry/example/tweet-card-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "tweet-card-images", + "type": "registry:example", + "title": "Tweet Card Images", + "description": "Example showing a tweet card with images.", + "registryDependencies": [ + "tweet-card" + ], + "files": [ + { + "path": "registry/example/tweet-card-images.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "tweet-card-meta-preview", + "type": "registry:example", + "title": "Tweet Card Meta Preview", + "description": "Example showing a tweet card with meta preview.", + "registryDependencies": [ + "tweet-card" + ], + "files": [ + { + "path": "registry/example/tweet-card-meta-preview.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "shimmer-button-demo", + "type": "registry:example", + "title": "Shimmer Button Demo", + "description": "Example showing a button with a shimmering light effect.", + "registryDependencies": [ + "shimmer-button" + ], + "files": [ + { + "path": "registry/example/shimmer-button-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "bento-demo", + "type": "registry:example", + "title": "Bento Demo", + "description": "Example showing a bento grid layout for showcasing features.", + "dependencies": [ + "@radix-ui/react-icons" + ], + "registryDependencies": [ + "bento-grid", + "marquee", + "animated-list-demo", + "animated-beam-multiple-outputs", + "shadcn:command", + "shadcn:calendar" + ], + "files": [ + { + "path": "registry/example/bento-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "bento-demo-vertical", + "type": "registry:example", + "title": "Bento Vertical Demo", + "description": "Example showing a vertical bento grid layout.", + "dependencies": [ + "@radix-ui/react-icons" + ], + "registryDependencies": [ + "bento-grid" + ], + "files": [ + { + "path": "registry/example/bento-demo-vertical.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "number-ticker-demo", + "type": "registry:example", + "title": "Number Ticker Demo", + "description": "Example showing animated counting numbers.", + "registryDependencies": [ + "number-ticker" + ], + "files": [ + { + "path": "registry/example/number-ticker-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "number-ticker-decimal-demo", + "type": "registry:example", + "title": "Number Ticker Decimal Demo", + "description": "Example showing animated counting decimal numbers.", + "registryDependencies": [ + "number-ticker" + ], + "files": [ + { + "path": "registry/example/number-ticker-decimal-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "ripple-demo", + "type": "registry:example", + "title": "Ripple Demo", + "description": "Example showing an animated ripple effect.", + "registryDependencies": [ + "ripple" + ], + "files": [ + { + "path": "registry/example/ripple-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "retro-grid-demo", + "type": "registry:example", + "title": "Retro Grid Demo", + "description": "Example showing an animated scrolling retro grid effect.", + "files": [ + { + "path": "registry/example/retro-grid-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "animated-list-demo", + "type": "registry:example", + "title": "Animated List Demo", + "description": "Example showing a list with sequenced item animations.", + "registryDependencies": [ + "animated-list" + ], + "files": [ + { + "path": "registry/example/animated-list-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "animated-shiny-text-demo", + "type": "registry:example", + "title": "Animated Shiny Text Demo", + "description": "Example showing text with a shimmering light effect.", + "dependencies": [ + "@radix-ui/react-icons" + ], + "registryDependencies": [ + "animated-shiny-text" + ], + "files": [ + { + "path": "registry/example/animated-shiny-text-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "particles-demo", + "type": "registry:example", + "title": "Particles Demo", + "description": "Example showing interactive particle effects.", + "dependencies": [ + "next-themes" + ], + "registryDependencies": [ + "particles" + ], + "files": [ + { + "path": "registry/example/particles-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "animated-grid-pattern-demo", + "type": "registry:example", + "title": "Animated Grid Pattern Demo", + "description": "Example showing an animated grid pattern background.", + "registryDependencies": [ + "animated-grid-pattern" + ], + "files": [ + { + "path": "registry/example/animated-grid-pattern-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "interactive-grid-pattern-demo", + "type": "registry:example", + "title": "Interactive Grid Pattern Demo", + "description": "Example showing an interactive grid pattern background.", + "registryDependencies": [ + "interactive-grid-pattern" + ], + "files": [ + { + "path": "registry/example/interactive-grid-pattern-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "interactive-grid-pattern-demo-2", + "type": "registry:example", + "title": "Interactive Grid Pattern Demo 2", + "description": "Second example showing an interactive grid pattern background.", + "registryDependencies": [ + "interactive-grid-pattern" + ], + "files": [ + { + "path": "registry/example/interactive-grid-pattern-demo-2.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "border-beam-demo", + "type": "registry:example", + "title": "Border Beam Demo", + "description": "Example showing an animated border beam effect.", + "registryDependencies": [ + "border-beam" + ], + "files": [ + { + "path": "registry/example/border-beam-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "animated-beam-demo", + "type": "registry:example", + "title": "Animated Beam Demo", + "description": "Example showing an animated beam of light effect.", + "dependencies": [ + "@radix-ui/react-icons" + ], + "registryDependencies": [ + "animated-beam" + ], + "files": [ + { + "path": "registry/example/animated-beam-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "animated-beam-unidirectional", + "type": "registry:example", + "title": "Animated Beam Unidirectional", + "description": "Example showing a unidirectional animated beam effect.", + "registryDependencies": [ + "animated-beam" + ], + "files": [ + { + "path": "registry/example/animated-beam-unidirectional.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "animated-beam-bidirectional", + "type": "registry:example", + "title": "Animated Beam Bidirectional", + "description": "Example showing a bidirectional animated beam effect.", + "registryDependencies": [ + "animated-beam" + ], + "files": [ + { + "path": "registry/example/animated-beam-bidirectional.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "animated-beam-multiple-inputs", + "type": "registry:example", + "title": "Animated Beam Multiple Inputs", + "description": "Example showing animated beams with multiple input points.", + "registryDependencies": [ + "animated-beam" + ], + "files": [ + { + "path": "registry/example/animated-beam-multiple-inputs.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "animated-beam-multiple-outputs", + "type": "registry:example", + "title": "Animated Beam Multiple Outputs", + "description": "Example showing animated beams with multiple output points.", + "registryDependencies": [ + "animated-beam" + ], + "files": [ + { + "path": "registry/example/animated-beam-multiple-outputs.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "text-reveal-demo", + "type": "registry:example", + "title": "Text Reveal Demo", + "description": "Example showing text that fades in on scroll.", + "registryDependencies": [ + "text-reveal" + ], + "files": [ + { + "path": "registry/example/text-reveal-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "animated-gradient-text-demo", + "type": "registry:example", + "title": "Animated Gradient Text Demo", + "description": "Example showing text with animated gradient backgrounds.", + "dependencies": [ + "lucide-react" + ], + "registryDependencies": [ + "animated-gradient-text" + ], + "files": [ + { + "path": "registry/example/animated-gradient-text-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "orbiting-circles-demo", + "type": "registry:example", + "title": "Orbiting Circles Demo", + "description": "Example showing circles moving in orbital paths.", + "dependencies": [ + "@radix-ui/react-icons" + ], + "registryDependencies": [ + "orbiting-circles" + ], + "files": [ + { + "path": "registry/example/orbiting-circles-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "dock-demo", + "type": "registry:example", + "title": "Dock Demo", + "description": "Example showing a MacOS-style dock implementation.", + "registryDependencies": [ + "dock" + ], + "files": [ + { + "path": "registry/example/dock-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "dock-demo-2", + "type": "registry:example", + "title": "Dock Demo 2", + "description": "Second example showing a MacOS-style dock implementation.", + "registryDependencies": [ + "dock" + ], + "files": [ + { + "path": "registry/example/dock-demo-2.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "dock-demo-3", + "type": "registry:example", + "title": "Dock Demo 3", + "description": "Third example showing a MacOS-style dock implementation.", + "registryDependencies": [ + "dock" + ], + "files": [ + { + "path": "registry/example/dock-demo-3.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "word-rotate-demo", + "type": "registry:example", + "title": "Word Rotate Demo", + "description": "Example showing vertical word rotation animation.", + "registryDependencies": [ + "word-rotate" + ], + "files": [ + { + "path": "registry/example/word-rotate-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "hyper-text-demo", + "type": "registry:example", + "title": "Hyper Text Demo", + "description": "Example showing text with scrambling letter animations.", + "registryDependencies": [ + "hyper-text" + ], + "files": [ + { + "path": "registry/example/hyper-text-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "avatar-circles-demo", + "type": "registry:example", + "title": "Avatar Circles Demo", + "description": "Example showing overlapping avatar circles.", + "registryDependencies": [ + "avatar-circles" + ], + "files": [ + { + "path": "registry/example/avatar-circles-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "typing-animation-demo", + "type": "registry:example", + "title": "Typing Animation Demo", + "description": "Example showing typed character animations.", + "registryDependencies": [ + "typing-animation" + ], + "files": [ + { + "path": "registry/example/typing-animation-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "scroll-based-velocity-demo", + "type": "registry:example", + "title": "Scroll Based Velocity Demo", + "description": "Example showing text speed changes based on scroll velocity.", + "registryDependencies": [ + "scroll-based-velocity" + ], + "files": [ + { + "path": "registry/example/scroll-based-velocity-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "scratch-to-reveal-demo", + "type": "registry:example", + "title": "Scratch To Reveal Demo", + "description": "Example showing an interactive scratch-off reveal effect.", + "registryDependencies": [ + "scratch-to-reveal" + ], + "files": [ + { + "path": "registry/example/scratch-to-reveal-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "flip-text-demo", + "type": "registry:example", + "title": "Flip Text Demo", + "description": "Example showing text with character flip animations.", + "registryDependencies": [ + "flip-text" + ], + "files": [ + { + "path": "registry/example/flip-text-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "sparkles-text-demo", + "type": "registry:example", + "title": "Sparkles Text Demo", + "description": "Example showing text with animated sparkle effects.", + "files": [ + { + "path": "registry/example/sparkles-text-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "icon-cloud-demo", + "type": "registry:example", + "title": "Icon Cloud Demo", + "description": "Example showing an interactive 3D icon cloud.", + "registryDependencies": [ + "icon-cloud" + ], + "files": [ + { + "path": "registry/example/icon-cloud-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "icon-cloud-demo-2", + "type": "registry:example", + "title": "Icon Cloud Demo 2", + "description": "Second example showing an interactive 3D icon cloud.", + "registryDependencies": [ + "icon-cloud" + ], + "files": [ + { + "path": "registry/example/icon-cloud-demo-2.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "icon-cloud-demo-3", + "type": "registry:example", + "title": "Icon Cloud Demo 3", + "description": "Third example showing an interactive 3D icon cloud.", + "registryDependencies": [ + "icon-cloud" + ], + "files": [ + { + "path": "registry/example/icon-cloud-demo-3.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "text-animate-demo", + "type": "registry:example", + "title": "Text Animate Demo", + "description": "Example showing various text animations.", + "files": [ + { + "path": "registry/example/text-animate-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "text-animate-demo-2", + "type": "registry:example", + "title": "Text Animate Demo 2", + "description": "Second example showing various text animations.", + "files": [ + { + "path": "registry/example/text-animate-demo-2.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "text-animate-demo-3", + "type": "registry:example", + "title": "Text Animate Demo 3", + "description": "Third example showing various text animations.", + "files": [ + { + "path": "registry/example/text-animate-demo-3.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "text-animate-demo-4", + "type": "registry:example", + "title": "Text Animate Demo 4", + "description": "Fourth example showing various text animations.", + "files": [ + { + "path": "registry/example/text-animate-demo-4.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "text-animate-demo-5", + "type": "registry:example", + "title": "Text Animate Demo 5", + "description": "Fifth example showing various text animations.", + "files": [ + { + "path": "registry/example/text-animate-demo-5.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "text-animate-demo-6", + "type": "registry:example", + "title": "Text Animate Demo 6", + "description": "Sixth example showing various text animations.", + "files": [ + { + "path": "registry/example/text-animate-demo-6.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "shiny-button-demo", + "type": "registry:example", + "title": "Shiny Button Demo", + "description": "Example showing a shiny button with dynamic styles.", + "files": [ + { + "path": "registry/example/shiny-button-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "box-reveal-demo", + "type": "registry:example", + "title": "Box Reveal Demo", + "description": "Example showing a sliding box text reveal animation.", + "files": [ + { + "path": "registry/example/box-reveal-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "animated-circular-progress-bar-demo", + "type": "registry:example", + "title": "Animated Circular Progress Bar Demo", + "description": "Example showing an animated circular progress gauge.", + "files": [ + { + "path": "registry/example/animated-circular-progress-bar-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "shine-border-demo", + "type": "registry:example", + "title": "Shine Border Demo", + "description": "Example showing an animated shining border effect.", + "files": [ + { + "path": "registry/example/shine-border-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "shine-border-demo-2", + "type": "registry:example", + "title": "Shine Border Demo 2", + "description": "Second example showing an animated shining border effect.", + "files": [ + { + "path": "registry/example/shine-border-demo-2.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "confetti-demo", + "type": "registry:example", + "title": "Confetti Demo", + "description": "Example showing confetti animations for celebrations.", + "files": [ + { + "path": "registry/example/confetti-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "confetti-basic-cannon", + "type": "registry:example", + "title": "Confetti Basic Cannon", + "description": "Example showing basic confetti cannon animation.", + "files": [ + { + "path": "registry/example/confetti-basic-cannon.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "confetti-random-direction", + "type": "registry:example", + "title": "Confetti Random Direction", + "description": "Example showing confetti with random directions.", + "files": [ + { + "path": "registry/example/confetti-random-direction.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "confetti-fireworks", + "type": "registry:example", + "title": "Confetti Fireworks", + "description": "Example showing fireworks-style confetti animation.", + "files": [ + { + "path": "registry/example/confetti-fireworks.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "confetti-stars", + "type": "registry:example", + "title": "Confetti Stars", + "description": "Example showing star-shaped confetti animation.", + "files": [ + { + "path": "registry/example/confetti-stars.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "confetti-side-cannons", + "type": "registry:example", + "title": "Confetti Side Cannons", + "description": "Example showing side-mounted confetti cannons.", + "files": [ + { + "path": "registry/example/confetti-side-cannons.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "confetti-custom-shapes", + "type": "registry:example", + "title": "Confetti Custom Shapes", + "description": "Example showing confetti with custom shape particles.", + "files": [ + { + "path": "registry/example/confetti-custom-shapes.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "confetti-emoji", + "type": "registry:example", + "title": "Confetti Emoji", + "description": "Example showing confetti with emoji particles.", + "files": [ + { + "path": "registry/example/confetti-emoji.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "animated-subscribe-button-demo", + "type": "registry:example", + "title": "Animated Subscribe Button Demo", + "description": "Example showing an animated subscribe button with micro animations.", + "files": [ + { + "path": "registry/example/animated-subscribe-button-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "cool-mode-demo", + "type": "registry:example", + "title": "Cool Mode Demo", + "description": "Example showing cool mode effect for buttons and links.", + "files": [ + { + "path": "registry/example/cool-mode-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "cool-mode-custom", + "type": "registry:example", + "title": "Cool Mode Custom", + "description": "Example showing customized cool mode effects.", + "files": [ + { + "path": "registry/example/cool-mode-custom.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "pulsating-button-demo", + "type": "registry:example", + "title": "Pulsating Button Demo", + "description": "Example showing an animated pulsating button.", + "files": [ + { + "path": "registry/example/pulsating-button-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "ripple-button-demo", + "type": "registry:example", + "title": "Ripple Button Demo", + "description": "Example showing an animated button with ripple effect.", + "files": [ + { + "path": "registry/example/ripple-button-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "file-tree-demo", + "type": "registry:example", + "title": "File Tree Demo", + "description": "Example showing a component that displays folder and file structure.", + "files": [ + { + "path": "registry/example/file-tree-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "blur-fade-demo", + "type": "registry:example", + "title": "Blur Fade Demo", + "description": "Example showing blur fade in and out animations.", + "files": [ + { + "path": "registry/example/blur-fade-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "blur-fade-text-demo", + "type": "registry:example", + "title": "Blur Fade Text Demo", + "description": "Example showing blur fade animations with text.", + "files": [ + { + "path": "registry/example/blur-fade-text-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "safari-demo", + "type": "registry:example", + "title": "Safari Demo", + "description": "Example showing a Safari browser mockup.", + "files": [ + { + "path": "registry/example/safari-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "safari-demo-2", + "type": "registry:example", + "title": "Safari Demo 2", + "description": "Second example showing a Safari browser mockup.", + "files": [ + { + "path": "registry/example/safari-demo-2.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "safari-demo-3", + "type": "registry:example", + "title": "Safari Demo 3", + "description": "Third example showing a Safari browser mockup.", + "files": [ + { + "path": "registry/example/safari-demo-3.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "safari-demo-4", + "type": "registry:example", + "title": "Safari Demo 4", + "description": "Fourth example showing a Safari browser mockup.", + "files": [ + { + "path": "registry/example/safari-demo-4.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "iphone-15-pro-demo", + "type": "registry:example", + "title": "iPhone 15 Pro Demo", + "description": "Example showing an iPhone 15 Pro mockup.", + "files": [ + { + "path": "registry/example/iphone-15-pro-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "iphone-15-pro-demo-2", + "type": "registry:example", + "title": "iPhone 15 Pro Demo 2", + "description": "Second example showing an iPhone 15 Pro mockup.", + "files": [ + { + "path": "registry/example/iphone-15-pro-demo-2.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "iphone-15-pro-demo-3", + "type": "registry:example", + "title": "iPhone 15 Pro Demo 3", + "description": "Third example showing an iPhone 15 Pro mockup.", + "files": [ + { + "path": "registry/example/iphone-15-pro-demo-3.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "rainbow-button-demo", + "type": "registry:example", + "title": "Rainbow Button Demo", + "description": "Example showing an animated button with rainbow effect.", + "files": [ + { + "path": "registry/example/rainbow-button-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "interactive-hover-button-demo", + "type": "registry:example", + "title": "Interactive Hover Button Demo", + "description": "Example showing an interactive button with hover effects.", + "files": [ + { + "path": "registry/example/interactive-hover-button-demo.tsx", + "type": "registry:example" + } + ] + }, + { + "name": "utils", + "type": "registry:lib", + "dependencies": [ + "clsx", + "tailwind-merge" + ], + "files": [ + { + "path": "registry/lib/utils.ts", + "type": "registry:lib" + } + ] + } + ] +} \ No newline at end of file diff --git a/registry/default/example/android-demo-2.tsx b/registry/example/android-demo-2.tsx similarity index 85% rename from registry/default/example/android-demo-2.tsx rename to registry/example/android-demo-2.tsx index 609ae2f4c..d5fa9561d 100644 --- a/registry/default/example/android-demo-2.tsx +++ b/registry/example/android-demo-2.tsx @@ -1,4 +1,4 @@ -import Android from "@/registry/default/magicui/android"; +import Android from "@/registry/magicui/android"; export default function AndroidDemo() { return ( diff --git a/registry/default/example/android-demo-3.tsx b/registry/example/android-demo-3.tsx similarity index 81% rename from registry/default/example/android-demo-3.tsx rename to registry/example/android-demo-3.tsx index d37922d20..64660c8ac 100644 --- a/registry/default/example/android-demo-3.tsx +++ b/registry/example/android-demo-3.tsx @@ -1,4 +1,4 @@ -import Android from "@/registry/default/magicui/android"; +import Android from "@/registry/magicui/android"; export default function AndroidDemo() { return ( diff --git a/registry/default/example/android-demo.tsx b/registry/example/android-demo.tsx similarity index 70% rename from registry/default/example/android-demo.tsx rename to registry/example/android-demo.tsx index c211df940..45cdb60ba 100644 --- a/registry/default/example/android-demo.tsx +++ b/registry/example/android-demo.tsx @@ -1,4 +1,4 @@ -import Android from "@/registry/default/magicui/android"; +import Android from "@/registry/magicui/android"; export default function AndroidDemo() { return ( diff --git a/registry/default/example/animated-beam-bidirectional.tsx b/registry/example/animated-beam-bidirectional.tsx similarity index 98% rename from registry/default/example/animated-beam-bidirectional.tsx rename to registry/example/animated-beam-bidirectional.tsx index 324f02435..a076e18fc 100644 --- a/registry/default/example/animated-beam-bidirectional.tsx +++ b/registry/example/animated-beam-bidirectional.tsx @@ -3,7 +3,7 @@ import React, { forwardRef, useRef } from "react"; import { cn } from "@/lib/utils"; -import { AnimatedBeam } from "@/registry/default/magicui/animated-beam"; +import { AnimatedBeam } from "@/registry/magicui/animated-beam"; const Circle = forwardRef< HTMLDivElement, diff --git a/registry/default/example/animated-beam-demo.tsx b/registry/example/animated-beam-demo.tsx similarity index 99% rename from registry/default/example/animated-beam-demo.tsx rename to registry/example/animated-beam-demo.tsx index d65da0316..decacd331 100644 --- a/registry/default/example/animated-beam-demo.tsx +++ b/registry/example/animated-beam-demo.tsx @@ -3,7 +3,7 @@ import React, { forwardRef, useRef } from "react"; import { cn } from "@/lib/utils"; -import { AnimatedBeam } from "@/registry/default/magicui/animated-beam"; +import { AnimatedBeam } from "@/registry/magicui/animated-beam"; const Circle = forwardRef< HTMLDivElement, @@ -39,7 +39,7 @@ export default function AnimatedBeamDemo() { className="relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg border bg-background p-10 md:shadow-xl" ref={containerRef} > -
    +
    diff --git a/registry/default/example/animated-beam-multiple-inputs.tsx b/registry/example/animated-beam-multiple-inputs.tsx similarity index 99% rename from registry/default/example/animated-beam-multiple-inputs.tsx rename to registry/example/animated-beam-multiple-inputs.tsx index d43693f57..a728f8f17 100644 --- a/registry/default/example/animated-beam-multiple-inputs.tsx +++ b/registry/example/animated-beam-multiple-inputs.tsx @@ -3,7 +3,7 @@ import React, { forwardRef, useRef } from "react"; import { cn } from "@/lib/utils"; -import { AnimatedBeam } from "@/registry/default/magicui/animated-beam"; +import { AnimatedBeam } from "@/registry/magicui/animated-beam"; const Circle = forwardRef< HTMLDivElement, @@ -46,7 +46,7 @@ export default function AnimatedBeamMultipleOutputDemo({ )} ref={containerRef} > -
    +
    diff --git a/registry/default/example/animated-beam-multiple-outputs.tsx b/registry/example/animated-beam-multiple-outputs.tsx similarity index 99% rename from registry/default/example/animated-beam-multiple-outputs.tsx rename to registry/example/animated-beam-multiple-outputs.tsx index e13afbd82..e92d5c2a5 100644 --- a/registry/default/example/animated-beam-multiple-outputs.tsx +++ b/registry/example/animated-beam-multiple-outputs.tsx @@ -3,7 +3,7 @@ import React, { forwardRef, useRef } from "react"; import { cn } from "@/lib/utils"; -import { AnimatedBeam } from "@/registry/default/magicui/animated-beam"; +import { AnimatedBeam } from "@/registry/magicui/animated-beam"; const Circle = forwardRef< HTMLDivElement, diff --git a/registry/default/example/animated-beam-unidirectional.tsx b/registry/example/animated-beam-unidirectional.tsx similarity index 97% rename from registry/default/example/animated-beam-unidirectional.tsx rename to registry/example/animated-beam-unidirectional.tsx index 130ace07a..31277dc08 100644 --- a/registry/default/example/animated-beam-unidirectional.tsx +++ b/registry/example/animated-beam-unidirectional.tsx @@ -3,7 +3,7 @@ import React, { forwardRef, useRef } from "react"; import { cn } from "@/lib/utils"; -import { AnimatedBeam } from "@/registry/default/magicui/animated-beam"; +import { AnimatedBeam } from "@/registry/magicui/animated-beam"; const Circle = forwardRef< HTMLDivElement, diff --git a/registry/default/example/animated-circular-progress-bar-demo.tsx b/registry/example/animated-circular-progress-bar-demo.tsx similarity index 86% rename from registry/default/example/animated-circular-progress-bar-demo.tsx rename to registry/example/animated-circular-progress-bar-demo.tsx index 7b67729ef..5c85ec69f 100644 --- a/registry/default/example/animated-circular-progress-bar-demo.tsx +++ b/registry/example/animated-circular-progress-bar-demo.tsx @@ -2,7 +2,7 @@ import { useEffect, useState } from "react"; -import { AnimatedCircularProgressBar } from "@/registry/default/magicui/animated-circular-progress-bar"; +import { AnimatedCircularProgressBar } from "@/registry/magicui/animated-circular-progress-bar"; export default function AnimatedCircularProgressBarDemo() { const [value, setValue] = useState(0); diff --git a/registry/default/example/animated-gradient-text-demo.tsx b/registry/example/animated-gradient-text-demo.tsx similarity index 89% rename from registry/default/example/animated-gradient-text-demo.tsx rename to registry/example/animated-gradient-text-demo.tsx index f75179cda..8831a75db 100644 --- a/registry/default/example/animated-gradient-text-demo.tsx +++ b/registry/example/animated-gradient-text-demo.tsx @@ -1,7 +1,7 @@ import { ChevronRight } from "lucide-react"; import { cn } from "@/lib/utils"; -import { AnimatedGradientText } from "@/registry/default/magicui/animated-gradient-text"; +import { AnimatedGradientText } from "@/registry/magicui/animated-gradient-text"; export default async function AnimatedGradientTextDemo() { return ( diff --git a/registry/default/example/animated-grid-pattern-demo.tsx b/registry/example/animated-grid-pattern-demo.tsx similarity index 89% rename from registry/default/example/animated-grid-pattern-demo.tsx rename to registry/example/animated-grid-pattern-demo.tsx index 8810d96b6..5509358ee 100644 --- a/registry/default/example/animated-grid-pattern-demo.tsx +++ b/registry/example/animated-grid-pattern-demo.tsx @@ -1,5 +1,5 @@ import { cn } from "@/lib/utils"; -import { AnimatedGridPattern } from "@/registry/default/magicui/animated-grid-pattern"; +import { AnimatedGridPattern } from "@/registry/magicui/animated-grid-pattern"; export default function AnimatedGridPatternDemo() { return ( diff --git a/registry/default/example/animated-list-demo.tsx b/registry/example/animated-list-demo.tsx similarity index 97% rename from registry/default/example/animated-list-demo.tsx rename to registry/example/animated-list-demo.tsx index a065e8f8c..f4ac14ebf 100644 --- a/registry/default/example/animated-list-demo.tsx +++ b/registry/example/animated-list-demo.tsx @@ -1,7 +1,7 @@ "use client"; import { cn } from "@/lib/utils"; -import { AnimatedList } from "@/registry/default/magicui/animated-list"; +import { AnimatedList } from "@/registry/magicui/animated-list"; interface Item { name: string; diff --git a/registry/default/example/animated-shiny-text-demo.tsx b/registry/example/animated-shiny-text-demo.tsx similarity index 91% rename from registry/default/example/animated-shiny-text-demo.tsx rename to registry/example/animated-shiny-text-demo.tsx index 75ec0d186..54cbe0176 100644 --- a/registry/default/example/animated-shiny-text-demo.tsx +++ b/registry/example/animated-shiny-text-demo.tsx @@ -1,7 +1,7 @@ import { ArrowRightIcon } from "@radix-ui/react-icons"; import { cn } from "@/lib/utils"; -import { AnimatedShinyText } from "@/registry/default/magicui/animated-shiny-text"; +import { AnimatedShinyText } from "@/registry/magicui/animated-shiny-text"; export default function AnimatedShinyTextDemo() { return ( diff --git a/registry/default/example/animated-subscribe-button-demo.tsx b/registry/example/animated-subscribe-button-demo.tsx similarity index 85% rename from registry/default/example/animated-subscribe-button-demo.tsx rename to registry/example/animated-subscribe-button-demo.tsx index de1c01f52..7185f15c9 100644 --- a/registry/default/example/animated-subscribe-button-demo.tsx +++ b/registry/example/animated-subscribe-button-demo.tsx @@ -1,5 +1,5 @@ +import { AnimatedSubscribeButton } from "@/registry/magicui/animated-subscribe-button"; import { CheckIcon, ChevronRightIcon } from "lucide-react"; -import { AnimatedSubscribeButton } from "@/registry/default/magicui/animated-subscribe-button"; export default function AnimatedSubscribeButtonDemo() { return ( diff --git a/registry/default/example/aurora-text-demo.tsx b/registry/example/aurora-text-demo.tsx similarity index 74% rename from registry/default/example/aurora-text-demo.tsx rename to registry/example/aurora-text-demo.tsx index 08305036a..0efc7f36c 100644 --- a/registry/default/example/aurora-text-demo.tsx +++ b/registry/example/aurora-text-demo.tsx @@ -1,4 +1,4 @@ -import { AuroraText } from "@/registry/default/magicui/aurora-text"; +import { AuroraText } from "@/registry/magicui/aurora-text"; export default function AuroraTextDemo() { return ( diff --git a/registry/default/example/avatar-circles-demo.tsx b/registry/example/avatar-circles-demo.tsx similarity index 92% rename from registry/default/example/avatar-circles-demo.tsx rename to registry/example/avatar-circles-demo.tsx index ebf55609f..9f91fe264 100644 --- a/registry/default/example/avatar-circles-demo.tsx +++ b/registry/example/avatar-circles-demo.tsx @@ -1,4 +1,4 @@ -import { AvatarCircles } from "@/registry/default/magicui/avatar-circles"; +import { AvatarCircles } from "@/registry/magicui/avatar-circles"; const avatars = [ { diff --git a/registry/default/example/bento-demo-vertical.tsx b/registry/example/bento-demo-vertical.tsx similarity index 96% rename from registry/default/example/bento-demo-vertical.tsx rename to registry/example/bento-demo-vertical.tsx index 68e8a575f..09c4e09ba 100644 --- a/registry/default/example/bento-demo-vertical.tsx +++ b/registry/example/bento-demo-vertical.tsx @@ -6,7 +6,7 @@ import { InputIcon, } from "@radix-ui/react-icons"; -import { BentoCard, BentoGrid } from "@/registry/default/magicui/bento-grid"; +import { BentoCard, BentoGrid } from "@/registry/magicui/bento-grid"; const features = [ { diff --git a/registry/default/example/bento-demo.tsx b/registry/example/bento-demo.tsx similarity index 92% rename from registry/default/example/bento-demo.tsx rename to registry/example/bento-demo.tsx index 97a3029c6..a87874dc4 100644 --- a/registry/default/example/bento-demo.tsx +++ b/registry/example/bento-demo.tsx @@ -3,10 +3,10 @@ import { BellIcon, Share2Icon } from "lucide-react"; import { Calendar } from "@/components/ui/calendar"; import { cn } from "@/lib/utils"; -import AnimatedBeamMultipleOutputDemo from "@/registry/default/example/animated-beam-multiple-outputs"; -import AnimatedListDemo from "@/registry/default/example/animated-list-demo"; -import { BentoCard, BentoGrid } from "@/registry/default/magicui/bento-grid"; -import { Marquee } from "@/registry/default/magicui/marquee"; +import AnimatedBeamMultipleOutputDemo from "@/registry/example/animated-beam-multiple-outputs"; +import AnimatedListDemo from "@/registry/example/animated-list-demo"; +import { BentoCard, BentoGrid } from "@/registry/magicui/bento-grid"; +import { Marquee } from "@/registry/magicui/marquee"; const files = [ { diff --git a/registry/default/example/blur-fade-demo.tsx b/registry/example/blur-fade-demo.tsx similarity index 92% rename from registry/default/example/blur-fade-demo.tsx rename to registry/example/blur-fade-demo.tsx index e966c865e..ad97fa6aa 100644 --- a/registry/default/example/blur-fade-demo.tsx +++ b/registry/example/blur-fade-demo.tsx @@ -1,5 +1,5 @@ /* eslint-disable @next/next/no-img-element */ -import { BlurFade } from "@/registry/default/magicui/blur-fade"; +import { BlurFade } from "@/registry/magicui/blur-fade"; const images = Array.from({ length: 9 }, (_, i) => { const isLandscape = i % 2 === 0; diff --git a/registry/default/example/blur-fade-text-demo.tsx b/registry/example/blur-fade-text-demo.tsx similarity index 88% rename from registry/default/example/blur-fade-text-demo.tsx rename to registry/example/blur-fade-text-demo.tsx index fa5a76940..999ff601b 100644 --- a/registry/default/example/blur-fade-text-demo.tsx +++ b/registry/example/blur-fade-text-demo.tsx @@ -1,4 +1,4 @@ -import { BlurFade } from "@/registry/default/magicui/blur-fade"; +import { BlurFade } from "@/registry/magicui/blur-fade"; export default function BlurFadeTextDemo() { return ( diff --git a/registry/default/example/border-beam-demo-2.tsx b/registry/example/border-beam-demo-2.tsx similarity index 50% rename from registry/default/example/border-beam-demo-2.tsx rename to registry/example/border-beam-demo-2.tsx index 815f8a9bf..e158b30e1 100644 --- a/registry/default/example/border-beam-demo-2.tsx +++ b/registry/example/border-beam-demo-2.tsx @@ -1,4 +1,4 @@ -import { BorderBeam } from "@/registry/default/magicui/border-beam"; +import { BorderBeam } from "@/registry/magicui/border-beam"; export default function BorderBeamDemo() { return ( @@ -6,12 +6,12 @@ export default function BorderBeamDemo() { Hero Image Hero Image diff --git a/registry/default/example/border-beam-demo.tsx b/registry/example/border-beam-demo.tsx similarity index 88% rename from registry/default/example/border-beam-demo.tsx rename to registry/example/border-beam-demo.tsx index 1b4d4bb8c..0025659f3 100644 --- a/registry/default/example/border-beam-demo.tsx +++ b/registry/example/border-beam-demo.tsx @@ -1,4 +1,4 @@ -import { BorderBeam } from "@/registry/default/magicui/border-beam"; +import { BorderBeam } from "@/registry/magicui/border-beam"; export default function BorderBeamDemo() { return ( diff --git a/registry/default/example/box-reveal-demo.tsx b/registry/example/box-reveal-demo.tsx similarity index 95% rename from registry/default/example/box-reveal-demo.tsx rename to registry/example/box-reveal-demo.tsx index 4cd71947d..56392f41c 100644 --- a/registry/default/example/box-reveal-demo.tsx +++ b/registry/example/box-reveal-demo.tsx @@ -1,5 +1,5 @@ import { Button } from "@/components/ui/button"; -import { BoxReveal } from "@/registry/default/magicui/box-reveal"; +import { BoxReveal } from "@/registry/magicui/box-reveal"; export default function BoxRevealDemo() { return ( diff --git a/registry/default/example/code-comparison-demo.tsx b/registry/example/code-comparison-demo.tsx similarity index 95% rename from registry/default/example/code-comparison-demo.tsx rename to registry/example/code-comparison-demo.tsx index fa39600a0..5555b575a 100644 --- a/registry/default/example/code-comparison-demo.tsx +++ b/registry/example/code-comparison-demo.tsx @@ -1,4 +1,4 @@ -import CodeComparison from "@/registry/default/magicui/code-comparison"; +import CodeComparison from "@/registry/magicui/code-comparison"; const beforeCode = `import { NextRequest } from 'next/server'; diff --git a/registry/default/example/confetti-basic-cannon.tsx b/registry/example/confetti-basic-cannon.tsx similarity index 69% rename from registry/default/example/confetti-basic-cannon.tsx rename to registry/example/confetti-basic-cannon.tsx index e0e04d198..724939c43 100644 --- a/registry/default/example/confetti-basic-cannon.tsx +++ b/registry/example/confetti-basic-cannon.tsx @@ -1,4 +1,4 @@ -import { ConfettiButton } from "@/registry/default/magicui/confetti"; +import { ConfettiButton } from "@/registry/magicui/confetti"; export default function ConfettiButtonDemo() { return ( diff --git a/registry/default/example/confetti-custom-shapes.tsx b/registry/example/confetti-custom-shapes.tsx similarity index 100% rename from registry/default/example/confetti-custom-shapes.tsx rename to registry/example/confetti-custom-shapes.tsx diff --git a/registry/default/example/confetti-demo.tsx b/registry/example/confetti-demo.tsx similarity index 89% rename from registry/default/example/confetti-demo.tsx rename to registry/example/confetti-demo.tsx index c1e910be9..527944ece 100644 --- a/registry/default/example/confetti-demo.tsx +++ b/registry/example/confetti-demo.tsx @@ -2,10 +2,7 @@ import { useRef } from "react"; -import { - Confetti, - type ConfettiRef, -} from "@/registry/default/magicui/confetti"; +import { Confetti, type ConfettiRef } from "@/registry/magicui/confetti"; export default function ConfettiDemo() { const confettiRef = useRef(null); diff --git a/registry/default/example/confetti-emoji.tsx b/registry/example/confetti-emoji.tsx similarity index 100% rename from registry/default/example/confetti-emoji.tsx rename to registry/example/confetti-emoji.tsx diff --git a/registry/default/example/confetti-fireworks.tsx b/registry/example/confetti-fireworks.tsx similarity index 100% rename from registry/default/example/confetti-fireworks.tsx rename to registry/example/confetti-fireworks.tsx diff --git a/registry/default/example/confetti-random-direction.tsx b/registry/example/confetti-random-direction.tsx similarity index 80% rename from registry/default/example/confetti-random-direction.tsx rename to registry/example/confetti-random-direction.tsx index 129714593..1c50489ec 100644 --- a/registry/default/example/confetti-random-direction.tsx +++ b/registry/example/confetti-random-direction.tsx @@ -1,4 +1,4 @@ -import { ConfettiButton } from "@/registry/default/magicui/confetti"; +import { ConfettiButton } from "@/registry/magicui/confetti"; export default function ConfettiButtonDemo() { return ( diff --git a/registry/default/example/confetti-side-cannons.tsx b/registry/example/confetti-side-cannons.tsx similarity index 100% rename from registry/default/example/confetti-side-cannons.tsx rename to registry/example/confetti-side-cannons.tsx diff --git a/registry/default/example/confetti-stars.tsx b/registry/example/confetti-stars.tsx similarity index 100% rename from registry/default/example/confetti-stars.tsx rename to registry/example/confetti-stars.tsx diff --git a/registry/default/example/cool-mode-custom.tsx b/registry/example/cool-mode-custom.tsx similarity index 85% rename from registry/default/example/cool-mode-custom.tsx rename to registry/example/cool-mode-custom.tsx index d8ac77a4f..0c3f24663 100644 --- a/registry/default/example/cool-mode-custom.tsx +++ b/registry/example/cool-mode-custom.tsx @@ -1,5 +1,5 @@ import { Button } from "@/components/ui/button"; -import { CoolMode } from "@/registry/default/magicui/cool-mode"; +import { CoolMode } from "@/registry/magicui/cool-mode"; export default function CoolModeCustom() { return ( diff --git a/registry/default/example/cool-mode-demo.tsx b/registry/example/cool-mode-demo.tsx similarity index 78% rename from registry/default/example/cool-mode-demo.tsx rename to registry/example/cool-mode-demo.tsx index 87f0d575c..7c704dc4f 100644 --- a/registry/default/example/cool-mode-demo.tsx +++ b/registry/example/cool-mode-demo.tsx @@ -1,5 +1,5 @@ import { Button } from "@/components/ui/button"; -import { CoolMode } from "@/registry/default/magicui/cool-mode"; +import { CoolMode } from "@/registry/magicui/cool-mode"; export default function CoolModeDemo() { return ( diff --git a/registry/default/example/dock-demo-2.tsx b/registry/example/dock-demo-2.tsx similarity index 99% rename from registry/default/example/dock-demo-2.tsx rename to registry/example/dock-demo-2.tsx index fbb3a5c80..951a9739a 100644 --- a/registry/default/example/dock-demo-2.tsx +++ b/registry/example/dock-demo-2.tsx @@ -2,7 +2,7 @@ import React from "react"; -import { Dock, DockIcon } from "@/registry/default/magicui/dock"; +import { Dock, DockIcon } from "@/registry/magicui/dock"; export type IconProps = React.HTMLAttributes; diff --git a/registry/default/example/dock-demo-3.tsx b/registry/example/dock-demo-3.tsx similarity index 99% rename from registry/default/example/dock-demo-3.tsx rename to registry/example/dock-demo-3.tsx index 70fc7ca08..890998715 100644 --- a/registry/default/example/dock-demo-3.tsx +++ b/registry/example/dock-demo-3.tsx @@ -2,7 +2,7 @@ import React from "react"; -import { Dock, DockIcon } from "@/registry/default/magicui/dock"; +import { Dock, DockIcon } from "@/registry/magicui/dock"; export type IconProps = React.HTMLAttributes; diff --git a/registry/default/example/dock-demo.tsx b/registry/example/dock-demo.tsx similarity index 99% rename from registry/default/example/dock-demo.tsx rename to registry/example/dock-demo.tsx index ffec99afd..c048e4ea2 100644 --- a/registry/default/example/dock-demo.tsx +++ b/registry/example/dock-demo.tsx @@ -14,7 +14,7 @@ import { TooltipTrigger, } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; -import { Dock, DockIcon } from "@/registry/default/magicui/dock"; +import { Dock, DockIcon } from "@/registry/magicui/dock"; export type IconProps = React.HTMLAttributes; diff --git a/registry/default/example/dot-pattern-demo.tsx b/registry/example/dot-pattern-demo.tsx similarity index 89% rename from registry/default/example/dot-pattern-demo.tsx rename to registry/example/dot-pattern-demo.tsx index 1fafc9d12..345966985 100644 --- a/registry/default/example/dot-pattern-demo.tsx +++ b/registry/example/dot-pattern-demo.tsx @@ -1,7 +1,7 @@ "use client"; import { cn } from "@/lib/utils"; -import { DotPattern } from "@/registry/default/magicui/dot-pattern"; +import { DotPattern } from "@/registry/magicui/dot-pattern"; export default function DotPatternDemo() { return ( diff --git a/registry/default/example/dot-pattern-linear-gradient.tsx b/registry/example/dot-pattern-linear-gradient.tsx similarity index 90% rename from registry/default/example/dot-pattern-linear-gradient.tsx rename to registry/example/dot-pattern-linear-gradient.tsx index 8759baaff..c0a12cbd9 100644 --- a/registry/default/example/dot-pattern-linear-gradient.tsx +++ b/registry/example/dot-pattern-linear-gradient.tsx @@ -1,7 +1,7 @@ "use client"; import { cn } from "@/lib/utils"; -import { DotPattern } from "@/registry/default/magicui/dot-pattern"; +import { DotPattern } from "@/registry/magicui/dot-pattern"; export default function DotPatternLinearGradient() { return ( diff --git a/registry/default/example/file-tree-demo.tsx b/registry/example/file-tree-demo.tsx similarity index 96% rename from registry/default/example/file-tree-demo.tsx rename to registry/example/file-tree-demo.tsx index fbfeb38d8..09521f9d7 100644 --- a/registry/default/example/file-tree-demo.tsx +++ b/registry/example/file-tree-demo.tsx @@ -1,4 +1,4 @@ -import { File, Folder, Tree } from "@/registry/default/magicui/file-tree"; +import { File, Folder, Tree } from "@/registry/magicui/file-tree"; export default function FileTreeDemo() { return ( diff --git a/registry/default/example/flickering-grid-demo.tsx b/registry/example/flickering-grid-demo.tsx similarity index 84% rename from registry/default/example/flickering-grid-demo.tsx rename to registry/example/flickering-grid-demo.tsx index c617caa41..08a4241a8 100644 --- a/registry/default/example/flickering-grid-demo.tsx +++ b/registry/example/flickering-grid-demo.tsx @@ -1,4 +1,4 @@ -import { FlickeringGrid } from "@/registry/default/magicui/flickering-grid"; +import { FlickeringGrid } from "@/registry/magicui/flickering-grid"; export default function FlickeringGridDemo() { return ( diff --git a/registry/default/example/flickering-grid-rounded-demo.tsx b/registry/example/flickering-grid-rounded-demo.tsx similarity index 86% rename from registry/default/example/flickering-grid-rounded-demo.tsx rename to registry/example/flickering-grid-rounded-demo.tsx index 2b96f2477..1e68c5969 100644 --- a/registry/default/example/flickering-grid-rounded-demo.tsx +++ b/registry/example/flickering-grid-rounded-demo.tsx @@ -1,4 +1,4 @@ -import { FlickeringGrid } from "@/registry/default/magicui/flickering-grid"; +import { FlickeringGrid } from "@/registry/magicui/flickering-grid"; export default function FlickeringGridRoundedDemo() { return ( diff --git a/registry/default/example/flip-text-demo.tsx b/registry/example/flip-text-demo.tsx similarity index 76% rename from registry/default/example/flip-text-demo.tsx rename to registry/example/flip-text-demo.tsx index 33f2132e5..b2cf1763a 100644 --- a/registry/default/example/flip-text-demo.tsx +++ b/registry/example/flip-text-demo.tsx @@ -1,4 +1,4 @@ -import { FlipText } from "@/registry/default/magicui/flip-text"; +import { FlipText } from "@/registry/magicui/flip-text"; export default function FlipTextDemo() { return ( diff --git a/registry/default/example/globe-demo.tsx b/registry/example/globe-demo.tsx similarity index 92% rename from registry/default/example/globe-demo.tsx rename to registry/example/globe-demo.tsx index 87798fcf8..27a89a3c6 100644 --- a/registry/default/example/globe-demo.tsx +++ b/registry/example/globe-demo.tsx @@ -1,4 +1,4 @@ -import { Globe } from "@/registry/default/magicui/globe"; +import { Globe } from "@/registry/magicui/globe"; export default function GlobeDemo() { return ( diff --git a/registry/default/example/grid-pattern-dashed.tsx b/registry/example/grid-pattern-dashed.tsx similarity index 90% rename from registry/default/example/grid-pattern-dashed.tsx rename to registry/example/grid-pattern-dashed.tsx index a56fa23eb..5dbc84966 100644 --- a/registry/default/example/grid-pattern-dashed.tsx +++ b/registry/example/grid-pattern-dashed.tsx @@ -1,7 +1,7 @@ "use client"; import { cn } from "@/lib/utils"; -import { GridPattern } from "@/registry/default/magicui/grid-pattern"; +import { GridPattern } from "@/registry/magicui/grid-pattern"; export default function GridPatternDashed() { return ( diff --git a/registry/default/example/grid-pattern-demo.tsx b/registry/example/grid-pattern-demo.tsx similarity index 92% rename from registry/default/example/grid-pattern-demo.tsx rename to registry/example/grid-pattern-demo.tsx index d67d33427..07b4386b7 100644 --- a/registry/default/example/grid-pattern-demo.tsx +++ b/registry/example/grid-pattern-demo.tsx @@ -1,7 +1,7 @@ "use client"; import { cn } from "@/lib/utils"; -import { GridPattern } from "@/registry/default/magicui/grid-pattern"; +import { GridPattern } from "@/registry/magicui/grid-pattern"; export default function GridPatternDemo() { return ( diff --git a/registry/default/example/grid-pattern-linear-gradient.tsx b/registry/example/grid-pattern-linear-gradient.tsx similarity index 90% rename from registry/default/example/grid-pattern-linear-gradient.tsx rename to registry/example/grid-pattern-linear-gradient.tsx index fd5d7f5cd..7263c9265 100644 --- a/registry/default/example/grid-pattern-linear-gradient.tsx +++ b/registry/example/grid-pattern-linear-gradient.tsx @@ -1,7 +1,7 @@ "use client"; import { cn } from "@/lib/utils"; -import { GridPattern } from "@/registry/default/magicui/grid-pattern"; +import { GridPattern } from "@/registry/magicui/grid-pattern"; export default function GridPatternLinearGradient() { return ( diff --git a/registry/default/example/hero-video-dialog-demo-top-in-bottom-out.tsx b/registry/example/hero-video-dialog-demo-top-in-bottom-out.tsx similarity index 85% rename from registry/default/example/hero-video-dialog-demo-top-in-bottom-out.tsx rename to registry/example/hero-video-dialog-demo-top-in-bottom-out.tsx index df0e9a706..f02c1594c 100644 --- a/registry/default/example/hero-video-dialog-demo-top-in-bottom-out.tsx +++ b/registry/example/hero-video-dialog-demo-top-in-bottom-out.tsx @@ -1,10 +1,10 @@ -import HeroVideoDialog from "@/registry/default/magicui/hero-video-dialog"; +import HeroVideoDialog from "@/registry/magicui/hero-video-dialog"; export default function HeroVideoDialogDemoTopInBottomOut() { return (
    Hover Me!; diff --git a/registry/default/example/icon-cloud-demo-2.tsx b/registry/example/icon-cloud-demo-2.tsx similarity index 97% rename from registry/default/example/icon-cloud-demo-2.tsx rename to registry/example/icon-cloud-demo-2.tsx index a2cd8dbe9..be9385e7a 100644 --- a/registry/default/example/icon-cloud-demo-2.tsx +++ b/registry/example/icon-cloud-demo-2.tsx @@ -1,4 +1,4 @@ -import { IconCloud } from "@/registry/default/magicui/icon-cloud"; +import { IconCloud } from "@/registry/magicui/icon-cloud"; const images = [ "https://images.unsplash.com/photo-1720048171230-c60d162f93a0?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", diff --git a/registry/default/example/icon-cloud-demo-3.tsx b/registry/example/icon-cloud-demo-3.tsx similarity index 99% rename from registry/default/example/icon-cloud-demo-3.tsx rename to registry/example/icon-cloud-demo-3.tsx index ff6ef149b..b8519cdd0 100644 --- a/registry/default/example/icon-cloud-demo-3.tsx +++ b/registry/example/icon-cloud-demo-3.tsx @@ -1,4 +1,4 @@ -import { IconCloud } from "@/registry/default/magicui/icon-cloud"; +import { IconCloud } from "@/registry/magicui/icon-cloud"; const Icons = { gitHub: () => ( diff --git a/registry/default/example/icon-cloud-demo.tsx b/registry/example/icon-cloud-demo.tsx similarity index 91% rename from registry/default/example/icon-cloud-demo.tsx rename to registry/example/icon-cloud-demo.tsx index 85f92b4d0..d62ceb228 100644 --- a/registry/default/example/icon-cloud-demo.tsx +++ b/registry/example/icon-cloud-demo.tsx @@ -1,4 +1,4 @@ -import { IconCloud } from "@/registry/default/magicui/icon-cloud"; +import { IconCloud } from "@/registry/magicui/icon-cloud"; const slugs = [ "typescript", diff --git a/registry/default/example/interactive-grid-pattern-demo-2.tsx b/registry/example/interactive-grid-pattern-demo-2.tsx similarity index 88% rename from registry/default/example/interactive-grid-pattern-demo-2.tsx rename to registry/example/interactive-grid-pattern-demo-2.tsx index a72aafa5f..34da9a60a 100644 --- a/registry/default/example/interactive-grid-pattern-demo-2.tsx +++ b/registry/example/interactive-grid-pattern-demo-2.tsx @@ -1,7 +1,7 @@ "use client"; import { cn } from "@/lib/utils"; -import { InteractiveGridPattern } from "@/registry/default/magicui/interactive-grid-pattern"; +import { InteractiveGridPattern } from "@/registry/magicui/interactive-grid-pattern"; export default function InteractiveGridPatternDemo() { return ( diff --git a/registry/default/example/interactive-grid-pattern-demo.tsx b/registry/example/interactive-grid-pattern-demo.tsx similarity index 87% rename from registry/default/example/interactive-grid-pattern-demo.tsx rename to registry/example/interactive-grid-pattern-demo.tsx index 7f98b84c2..f8daa544d 100644 --- a/registry/default/example/interactive-grid-pattern-demo.tsx +++ b/registry/example/interactive-grid-pattern-demo.tsx @@ -1,7 +1,7 @@ "use client"; import { cn } from "@/lib/utils"; -import { InteractiveGridPattern } from "@/registry/default/magicui/interactive-grid-pattern"; +import { InteractiveGridPattern } from "@/registry/magicui/interactive-grid-pattern"; export default function InteractiveGridPatternDemo() { return ( diff --git a/registry/default/example/interactive-hover-button-demo.tsx b/registry/example/interactive-hover-button-demo.tsx similarity index 57% rename from registry/default/example/interactive-hover-button-demo.tsx rename to registry/example/interactive-hover-button-demo.tsx index ba214d8f6..5aa51a7bc 100644 --- a/registry/default/example/interactive-hover-button-demo.tsx +++ b/registry/example/interactive-hover-button-demo.tsx @@ -1,4 +1,4 @@ -import { InteractiveHoverButton } from "@/registry/default/magicui/interactive-hover-button"; +import { InteractiveHoverButton } from "@/registry/magicui/interactive-hover-button"; export default function InteractiveHoverButtonDemo() { return Hover Me; diff --git a/registry/default/example/iphone-15-pro-demo-2.tsx b/registry/example/iphone-15-pro-demo-2.tsx similarity index 75% rename from registry/default/example/iphone-15-pro-demo-2.tsx rename to registry/example/iphone-15-pro-demo-2.tsx index b8cdd408c..b2e05672c 100644 --- a/registry/default/example/iphone-15-pro-demo-2.tsx +++ b/registry/example/iphone-15-pro-demo-2.tsx @@ -1,4 +1,4 @@ -import Iphone15Pro from "@/registry/default/magicui/iphone-15-pro"; +import Iphone15Pro from "@/registry/magicui/iphone-15-pro"; export default function Iphone15ProDemo() { return ( diff --git a/registry/default/example/iphone-15-pro-demo-3.tsx b/registry/example/iphone-15-pro-demo-3.tsx similarity index 79% rename from registry/default/example/iphone-15-pro-demo-3.tsx rename to registry/example/iphone-15-pro-demo-3.tsx index e706fe7ea..c72b94cc6 100644 --- a/registry/default/example/iphone-15-pro-demo-3.tsx +++ b/registry/example/iphone-15-pro-demo-3.tsx @@ -1,4 +1,4 @@ -import Iphone15Pro from "@/registry/default/magicui/iphone-15-pro"; +import Iphone15Pro from "@/registry/magicui/iphone-15-pro"; export default function Iphone15ProDemo() { return ( diff --git a/registry/default/example/iphone-15-pro-demo.tsx b/registry/example/iphone-15-pro-demo.tsx similarity index 68% rename from registry/default/example/iphone-15-pro-demo.tsx rename to registry/example/iphone-15-pro-demo.tsx index fee4a9e08..d73c6efb2 100644 --- a/registry/default/example/iphone-15-pro-demo.tsx +++ b/registry/example/iphone-15-pro-demo.tsx @@ -1,4 +1,4 @@ -import Iphone15Pro from "@/registry/default/magicui/iphone-15-pro"; +import Iphone15Pro from "@/registry/magicui/iphone-15-pro"; export default function Iphone15ProDemo() { return ( diff --git a/registry/default/example/line-shadow-text-demo.tsx b/registry/example/line-shadow-text-demo.tsx similarity index 85% rename from registry/default/example/line-shadow-text-demo.tsx rename to registry/example/line-shadow-text-demo.tsx index f9b15e724..5fc4aea69 100644 --- a/registry/default/example/line-shadow-text-demo.tsx +++ b/registry/example/line-shadow-text-demo.tsx @@ -1,4 +1,4 @@ -import { LineShadowText } from "@/registry/default/magicui/line-shadow-text"; +import { LineShadowText } from "@/registry/magicui/line-shadow-text"; import { useTheme } from "next-themes"; export default function LineShadowTextDemo() { diff --git a/registry/default/example/magic-card-demo.tsx b/registry/example/magic-card-demo.tsx similarity index 90% rename from registry/default/example/magic-card-demo.tsx rename to registry/example/magic-card-demo.tsx index 5c3c77e15..df2891901 100644 --- a/registry/default/example/magic-card-demo.tsx +++ b/registry/example/magic-card-demo.tsx @@ -1,6 +1,8 @@ +"use client"; + import { useTheme } from "next-themes"; -import { MagicCard } from "@/registry/default/magicui/magic-card"; +import { MagicCard } from "@/registry/magicui/magic-card"; export default function MagicCardDemo() { const { theme } = useTheme(); diff --git a/registry/default/example/marquee-3d.tsx b/registry/example/marquee-3d.tsx similarity index 96% rename from registry/default/example/marquee-3d.tsx rename to registry/example/marquee-3d.tsx index 02e77dbe4..27a6e3b18 100644 --- a/registry/default/example/marquee-3d.tsx +++ b/registry/example/marquee-3d.tsx @@ -1,4 +1,4 @@ -import { Marquee } from "@/registry/default/magicui/marquee"; +import { Marquee } from "@/registry/magicui/marquee"; const logos = [ { diff --git a/registry/default/example/marquee-demo-vertical.tsx b/registry/example/marquee-demo-vertical.tsx similarity index 97% rename from registry/default/example/marquee-demo-vertical.tsx rename to registry/example/marquee-demo-vertical.tsx index e957eb512..2ebcf4bc1 100644 --- a/registry/default/example/marquee-demo-vertical.tsx +++ b/registry/example/marquee-demo-vertical.tsx @@ -1,5 +1,5 @@ import { cn } from "@/lib/utils"; -import { Marquee } from "@/registry/default/magicui/marquee"; +import { Marquee } from "@/registry/magicui/marquee"; const reviews = [ { diff --git a/registry/default/example/marquee-demo.tsx b/registry/example/marquee-demo.tsx similarity index 97% rename from registry/default/example/marquee-demo.tsx rename to registry/example/marquee-demo.tsx index 421870174..c0c901376 100644 --- a/registry/default/example/marquee-demo.tsx +++ b/registry/example/marquee-demo.tsx @@ -1,5 +1,5 @@ import { cn } from "@/lib/utils"; -import { Marquee } from "@/registry/default/magicui/marquee"; +import { Marquee } from "@/registry/magicui/marquee"; const reviews = [ { diff --git a/registry/default/example/marquee-logos.tsx b/registry/example/marquee-logos.tsx similarity index 95% rename from registry/default/example/marquee-logos.tsx rename to registry/example/marquee-logos.tsx index 488352878..6991231ea 100644 --- a/registry/default/example/marquee-logos.tsx +++ b/registry/example/marquee-logos.tsx @@ -1,5 +1,5 @@ import { cn } from "@/lib/utils"; -import { Marquee } from "@/registry/default/magicui/marquee"; +import { Marquee } from "@/registry/magicui/marquee"; const logos = [ { diff --git a/registry/default/example/meteors-demo.tsx b/registry/example/meteors-demo.tsx similarity index 88% rename from registry/default/example/meteors-demo.tsx rename to registry/example/meteors-demo.tsx index b95741ae6..d9b1b61fa 100644 --- a/registry/default/example/meteors-demo.tsx +++ b/registry/example/meteors-demo.tsx @@ -1,4 +1,4 @@ -import { Meteors } from "@/registry/default/magicui/meteors"; +import { Meteors } from "@/registry/magicui/meteors"; export default function MeteorDemo() { return ( diff --git a/registry/default/example/morphing-text-demo.tsx b/registry/example/morphing-text-demo.tsx similarity index 75% rename from registry/default/example/morphing-text-demo.tsx rename to registry/example/morphing-text-demo.tsx index 703d5237a..0a74245ee 100644 --- a/registry/default/example/morphing-text-demo.tsx +++ b/registry/example/morphing-text-demo.tsx @@ -1,4 +1,4 @@ -import { MorphingText } from "@/registry/default/magicui/morphing-text"; +import { MorphingText } from "@/registry/magicui/morphing-text"; const texts = [ "Hello", diff --git a/registry/default/example/neon-gradient-card-demo.tsx b/registry/example/neon-gradient-card-demo.tsx similarity index 85% rename from registry/default/example/neon-gradient-card-demo.tsx rename to registry/example/neon-gradient-card-demo.tsx index 5516c87d6..f23417464 100644 --- a/registry/default/example/neon-gradient-card-demo.tsx +++ b/registry/example/neon-gradient-card-demo.tsx @@ -1,4 +1,4 @@ -import { NeonGradientCard } from "@/registry/default/magicui/neon-gradient-card"; +import { NeonGradientCard } from "@/registry/magicui/neon-gradient-card"; export default function NeonGradientCardDemo() { return ( diff --git a/registry/default/example/number-ticker-decimal-demo.tsx b/registry/example/number-ticker-decimal-demo.tsx similarity index 76% rename from registry/default/example/number-ticker-decimal-demo.tsx rename to registry/example/number-ticker-decimal-demo.tsx index af982c842..dfef2f069 100644 --- a/registry/default/example/number-ticker-decimal-demo.tsx +++ b/registry/example/number-ticker-decimal-demo.tsx @@ -1,4 +1,4 @@ -import { NumberTicker } from "@/registry/default/magicui/number-ticker"; +import { NumberTicker } from "@/registry/magicui/number-ticker"; export default function NumberTickerDemo() { return ( diff --git a/registry/default/example/number-ticker-demo.tsx b/registry/example/number-ticker-demo.tsx similarity index 74% rename from registry/default/example/number-ticker-demo.tsx rename to registry/example/number-ticker-demo.tsx index 91ba3e4f7..983095c6c 100644 --- a/registry/default/example/number-ticker-demo.tsx +++ b/registry/example/number-ticker-demo.tsx @@ -1,4 +1,4 @@ -import { NumberTicker } from "@/registry/default/magicui/number-ticker"; +import { NumberTicker } from "@/registry/magicui/number-ticker"; export default function NumberTickerDemo() { return ( diff --git a/registry/default/example/orbiting-circles-demo.tsx b/registry/example/orbiting-circles-demo.tsx similarity index 99% rename from registry/default/example/orbiting-circles-demo.tsx rename to registry/example/orbiting-circles-demo.tsx index 8084ca591..5c75a62a7 100644 --- a/registry/default/example/orbiting-circles-demo.tsx +++ b/registry/example/orbiting-circles-demo.tsx @@ -1,4 +1,4 @@ -import { OrbitingCircles } from "@/registry/default/magicui/orbiting-circles"; +import { OrbitingCircles } from "@/registry/magicui/orbiting-circles"; export default function OrbitingCirclesDemo() { return ( diff --git a/registry/default/example/particles-demo.tsx b/registry/example/particles-demo.tsx similarity index 92% rename from registry/default/example/particles-demo.tsx rename to registry/example/particles-demo.tsx index 2e7f38170..9d11ae8c9 100644 --- a/registry/default/example/particles-demo.tsx +++ b/registry/example/particles-demo.tsx @@ -3,7 +3,7 @@ import { useTheme } from "next-themes"; import { useEffect, useState } from "react"; -import { Particles } from "@/registry/default/magicui/particles"; +import { Particles } from "@/registry/magicui/particles"; export default function ParticlesDemo() { const { resolvedTheme } = useTheme(); diff --git a/registry/default/example/pulsating-button-demo.tsx b/registry/example/pulsating-button-demo.tsx similarity index 60% rename from registry/default/example/pulsating-button-demo.tsx rename to registry/example/pulsating-button-demo.tsx index 8163d0e3b..d5cf3b2b6 100644 --- a/registry/default/example/pulsating-button-demo.tsx +++ b/registry/example/pulsating-button-demo.tsx @@ -1,4 +1,4 @@ -import { PulsatingButton } from "@/registry/default/magicui/pulsating-button"; +import { PulsatingButton } from "@/registry/magicui/pulsating-button"; export default function PulsatingButtonDemo() { return Join Affiliate Program; diff --git a/registry/default/example/rainbow-button-demo.tsx b/registry/example/rainbow-button-demo.tsx similarity index 59% rename from registry/default/example/rainbow-button-demo.tsx rename to registry/example/rainbow-button-demo.tsx index 18441790d..5ed2f022b 100644 --- a/registry/default/example/rainbow-button-demo.tsx +++ b/registry/example/rainbow-button-demo.tsx @@ -1,4 +1,4 @@ -import { RainbowButton } from "@/registry/default/magicui/rainbow-button"; +import { RainbowButton } from "@/registry/magicui/rainbow-button"; export default function RainbowButtonDemo() { return Get Unlimited Access; diff --git a/registry/default/example/retro-grid-demo.tsx b/registry/example/retro-grid-demo.tsx similarity index 88% rename from registry/default/example/retro-grid-demo.tsx rename to registry/example/retro-grid-demo.tsx index 346f6ae6a..3f8d07fb9 100644 --- a/registry/default/example/retro-grid-demo.tsx +++ b/registry/example/retro-grid-demo.tsx @@ -1,6 +1,6 @@ "use client"; -import { RetroGrid } from "@/registry/default/magicui/retro-grid"; +import { RetroGrid } from "@/registry/magicui/retro-grid"; export default function RetroGridDemo() { return ( diff --git a/registry/default/example/ripple-button-demo.tsx b/registry/example/ripple-button-demo.tsx similarity index 61% rename from registry/default/example/ripple-button-demo.tsx rename to registry/example/ripple-button-demo.tsx index a575c4390..6b1a84430 100644 --- a/registry/default/example/ripple-button-demo.tsx +++ b/registry/example/ripple-button-demo.tsx @@ -1,4 +1,4 @@ -import { RippleButton } from "@/registry/default/magicui/ripple-button"; +import { RippleButton } from "@/registry/magicui/ripple-button"; export default function RippleButtonDemo() { return Click me; diff --git a/registry/default/example/ripple-demo.tsx b/registry/example/ripple-demo.tsx similarity index 86% rename from registry/default/example/ripple-demo.tsx rename to registry/example/ripple-demo.tsx index 682f15100..048a0034d 100644 --- a/registry/default/example/ripple-demo.tsx +++ b/registry/example/ripple-demo.tsx @@ -1,4 +1,4 @@ -import { Ripple } from "@/registry/default/magicui/ripple"; +import { Ripple } from "@/registry/magicui/ripple"; export default function RippleDemo() { return ( diff --git a/registry/default/example/safari-demo-2.tsx b/registry/example/safari-demo-2.tsx similarity index 80% rename from registry/default/example/safari-demo-2.tsx rename to registry/example/safari-demo-2.tsx index d024c32d7..35af08898 100644 --- a/registry/default/example/safari-demo-2.tsx +++ b/registry/example/safari-demo-2.tsx @@ -1,4 +1,4 @@ -import Safari from "@/registry/default/magicui/safari"; +import { Safari } from "@/registry/magicui/safari"; export default function SafariDemo() { return ( diff --git a/registry/default/example/safari-demo-3.tsx b/registry/example/safari-demo-3.tsx similarity index 83% rename from registry/default/example/safari-demo-3.tsx rename to registry/example/safari-demo-3.tsx index 297d8be97..17be67dde 100644 --- a/registry/default/example/safari-demo-3.tsx +++ b/registry/example/safari-demo-3.tsx @@ -1,4 +1,4 @@ -import Safari from "@/registry/default/magicui/safari"; +import { Safari } from "@/registry/magicui/safari"; export default function SafariDemo() { return ( diff --git a/registry/default/example/safari-demo-4.tsx b/registry/example/safari-demo-4.tsx similarity index 75% rename from registry/default/example/safari-demo-4.tsx rename to registry/example/safari-demo-4.tsx index f81d9b7a7..55661d5da 100644 --- a/registry/default/example/safari-demo-4.tsx +++ b/registry/example/safari-demo-4.tsx @@ -1,4 +1,4 @@ -import Safari from "@/registry/default/magicui/safari"; +import { Safari } from "@/registry/magicui/safari"; export default function SafariDemo() { return ( diff --git a/registry/default/example/safari-demo.tsx b/registry/example/safari-demo.tsx similarity index 74% rename from registry/default/example/safari-demo.tsx rename to registry/example/safari-demo.tsx index d0ed945dc..d116518ec 100644 --- a/registry/default/example/safari-demo.tsx +++ b/registry/example/safari-demo.tsx @@ -1,4 +1,4 @@ -import Safari from "@/registry/default/magicui/safari"; +import { Safari } from "@/registry/magicui/safari"; export default function SafariDemo() { return ( diff --git a/registry/default/example/scratch-to-reveal-demo.tsx b/registry/example/scratch-to-reveal-demo.tsx similarity index 86% rename from registry/default/example/scratch-to-reveal-demo.tsx rename to registry/example/scratch-to-reveal-demo.tsx index e7c067d02..91ab86419 100644 --- a/registry/default/example/scratch-to-reveal-demo.tsx +++ b/registry/example/scratch-to-reveal-demo.tsx @@ -1,4 +1,4 @@ -import { ScratchToReveal } from "@/registry/default/magicui/scratch-to-reveal"; +import { ScratchToReveal } from "@/registry/magicui/scratch-to-reveal"; const ScratchToRevealDemo = () => { const handleComplete = () => { diff --git a/registry/default/example/script-copy-btn-demo.tsx b/registry/example/script-copy-btn-demo.tsx similarity index 85% rename from registry/default/example/script-copy-btn-demo.tsx rename to registry/example/script-copy-btn-demo.tsx index acfd3e4e3..1d419dac5 100644 --- a/registry/default/example/script-copy-btn-demo.tsx +++ b/registry/example/script-copy-btn-demo.tsx @@ -1,4 +1,4 @@ -import { ScriptCopyBtn } from "@/registry/default/magicui/script-copy-btn"; +import { ScriptCopyBtn } from "@/registry/magicui/script-copy-btn"; export default function ScriptCopyBtnDemo() { const customCommandMap = { diff --git a/registry/default/example/scroll-based-velocity-demo.tsx b/registry/example/scroll-based-velocity-demo.tsx similarity index 57% rename from registry/default/example/scroll-based-velocity-demo.tsx rename to registry/example/scroll-based-velocity-demo.tsx index 0fdb45b60..06cacbb28 100644 --- a/registry/default/example/scroll-based-velocity-demo.tsx +++ b/registry/example/scroll-based-velocity-demo.tsx @@ -1,4 +1,4 @@ -import { VelocityScroll } from "@/registry/default/magicui/scroll-based-velocity"; +import { VelocityScroll } from "@/registry/magicui/scroll-based-velocity"; export default function ScrollBasedVelocityDemo() { return Velocity Scroll; diff --git a/registry/default/example/scroll-progress-demo.tsx b/registry/example/scroll-progress-demo.tsx similarity index 88% rename from registry/default/example/scroll-progress-demo.tsx rename to registry/example/scroll-progress-demo.tsx index 1f4dc76ab..80b39effe 100644 --- a/registry/default/example/scroll-progress-demo.tsx +++ b/registry/example/scroll-progress-demo.tsx @@ -1,4 +1,4 @@ -import { ScrollProgress } from "@/registry/default/magicui/scroll-progress"; +import { ScrollProgress } from "@/registry/magicui/scroll-progress"; export default function ScrollProgressDemo() { return ( diff --git a/registry/default/example/shimmer-button-demo.tsx b/registry/example/shimmer-button-demo.tsx similarity index 81% rename from registry/default/example/shimmer-button-demo.tsx rename to registry/example/shimmer-button-demo.tsx index 6f0a2045d..c44d42914 100644 --- a/registry/default/example/shimmer-button-demo.tsx +++ b/registry/example/shimmer-button-demo.tsx @@ -1,4 +1,4 @@ -import { ShimmerButton } from "@/registry/default/magicui/shimmer-button"; +import { ShimmerButton } from "@/registry/magicui/shimmer-button"; export default function ShimmerButtonDemo() { return ( diff --git a/registry/default/example/shine-border-demo-2.tsx b/registry/example/shine-border-demo-2.tsx similarity index 81% rename from registry/default/example/shine-border-demo-2.tsx rename to registry/example/shine-border-demo-2.tsx index 7e6437b70..efe1275b4 100644 --- a/registry/default/example/shine-border-demo-2.tsx +++ b/registry/example/shine-border-demo-2.tsx @@ -1,6 +1,6 @@ import { useTheme } from "next-themes"; -import { ShineBorder } from "@/registry/default/magicui/shine-border"; +import { ShineBorder } from "@/registry/magicui/shine-border"; export default function ShineBorderDemo() { const theme = useTheme(); diff --git a/registry/default/example/shine-border-demo.tsx b/registry/example/shine-border-demo.tsx similarity index 88% rename from registry/default/example/shine-border-demo.tsx rename to registry/example/shine-border-demo.tsx index 117e6a020..4a15b492c 100644 --- a/registry/default/example/shine-border-demo.tsx +++ b/registry/example/shine-border-demo.tsx @@ -1,4 +1,4 @@ -import { ShineBorder } from "@/registry/default/magicui/shine-border"; +import { ShineBorder } from "@/registry/magicui/shine-border"; export default function ShineBorderDemo() { return ( diff --git a/registry/default/example/shiny-button-demo.tsx b/registry/example/shiny-button-demo.tsx similarity index 57% rename from registry/default/example/shiny-button-demo.tsx rename to registry/example/shiny-button-demo.tsx index 3ce1d8666..f234e4001 100644 --- a/registry/default/example/shiny-button-demo.tsx +++ b/registry/example/shiny-button-demo.tsx @@ -1,4 +1,4 @@ -import { ShinyButton } from "@/registry/default/magicui/shiny-button"; +import { ShinyButton } from "@/registry/magicui/shiny-button"; export default function ShinyButtonDemo() { return Shiny Button; diff --git a/registry/default/example/sparkles-text-demo.tsx b/registry/example/sparkles-text-demo.tsx similarity index 55% rename from registry/default/example/sparkles-text-demo.tsx rename to registry/example/sparkles-text-demo.tsx index 9db7c8b6e..51bb4f822 100644 --- a/registry/default/example/sparkles-text-demo.tsx +++ b/registry/example/sparkles-text-demo.tsx @@ -1,4 +1,4 @@ -import { SparklesText } from "@/registry/default/magicui/sparkles-text"; +import { SparklesText } from "@/registry/magicui/sparkles-text"; export default function SparklesTextDemo() { return ; diff --git a/registry/default/example/terminal-demo.tsx b/registry/example/terminal-demo.tsx similarity index 97% rename from registry/default/example/terminal-demo.tsx rename to registry/example/terminal-demo.tsx index 9f192db27..d36aa6f56 100644 --- a/registry/default/example/terminal-demo.tsx +++ b/registry/example/terminal-demo.tsx @@ -2,7 +2,7 @@ import { AnimatedSpan, Terminal, TypingAnimation, -} from "@/registry/default/magicui/terminal"; +} from "@/registry/magicui/terminal"; export default function TerminalDemo() { return ( diff --git a/registry/default/example/text-animate-demo-2.tsx b/registry/example/text-animate-demo-2.tsx similarity index 67% rename from registry/default/example/text-animate-demo-2.tsx rename to registry/example/text-animate-demo-2.tsx index b014075bc..f8ecf9fd6 100644 --- a/registry/default/example/text-animate-demo-2.tsx +++ b/registry/example/text-animate-demo-2.tsx @@ -1,4 +1,4 @@ -import { TextAnimate } from "@/registry/default/magicui/text-animate"; +import { TextAnimate } from "@/registry/magicui/text-animate"; export default function TextAnimateDemo2() { return ( diff --git a/registry/default/example/text-animate-demo-3.tsx b/registry/example/text-animate-demo-3.tsx similarity index 68% rename from registry/default/example/text-animate-demo-3.tsx rename to registry/example/text-animate-demo-3.tsx index 91e83384e..9dc23dc73 100644 --- a/registry/default/example/text-animate-demo-3.tsx +++ b/registry/example/text-animate-demo-3.tsx @@ -1,4 +1,4 @@ -import { TextAnimate } from "@/registry/default/magicui/text-animate"; +import { TextAnimate } from "@/registry/magicui/text-animate"; export default function TextAnimateDemo3() { return ( diff --git a/registry/default/example/text-animate-demo-4.tsx b/registry/example/text-animate-demo-4.tsx similarity index 68% rename from registry/default/example/text-animate-demo-4.tsx rename to registry/example/text-animate-demo-4.tsx index fde4dc24c..8d330e151 100644 --- a/registry/default/example/text-animate-demo-4.tsx +++ b/registry/example/text-animate-demo-4.tsx @@ -1,4 +1,4 @@ -import { TextAnimate } from "@/registry/default/magicui/text-animate"; +import { TextAnimate } from "@/registry/magicui/text-animate"; export default function TextAnimateDemo4() { return ( diff --git a/registry/default/example/text-animate-demo-5.tsx b/registry/example/text-animate-demo-5.tsx similarity index 77% rename from registry/default/example/text-animate-demo-5.tsx rename to registry/example/text-animate-demo-5.tsx index 62ab155a3..32676c49d 100644 --- a/registry/default/example/text-animate-demo-5.tsx +++ b/registry/example/text-animate-demo-5.tsx @@ -1,4 +1,4 @@ -import { TextAnimate } from "@/registry/default/magicui/text-animate"; +import { TextAnimate } from "@/registry/magicui/text-animate"; export default function TextAnimateDemo5() { return ( diff --git a/registry/default/example/text-animate-demo-6.tsx b/registry/example/text-animate-demo-6.tsx similarity index 70% rename from registry/default/example/text-animate-demo-6.tsx rename to registry/example/text-animate-demo-6.tsx index 9bcdb5481..853829fdc 100644 --- a/registry/default/example/text-animate-demo-6.tsx +++ b/registry/example/text-animate-demo-6.tsx @@ -1,4 +1,4 @@ -import { TextAnimate } from "@/registry/default/magicui/text-animate"; +import { TextAnimate } from "@/registry/magicui/text-animate"; export default function TextAnimateDemo6() { return ( diff --git a/registry/default/example/text-animate-demo.tsx b/registry/example/text-animate-demo.tsx similarity index 69% rename from registry/default/example/text-animate-demo.tsx rename to registry/example/text-animate-demo.tsx index 61feb6050..731d79664 100644 --- a/registry/default/example/text-animate-demo.tsx +++ b/registry/example/text-animate-demo.tsx @@ -1,4 +1,4 @@ -import { TextAnimate } from "@/registry/default/magicui/text-animate"; +import { TextAnimate } from "@/registry/magicui/text-animate"; export default function TextAnimateDemo() { return ( diff --git a/registry/default/example/text-reveal-demo.tsx b/registry/example/text-reveal-demo.tsx similarity index 78% rename from registry/default/example/text-reveal-demo.tsx rename to registry/example/text-reveal-demo.tsx index d47232e6f..9202f572c 100644 --- a/registry/default/example/text-reveal-demo.tsx +++ b/registry/example/text-reveal-demo.tsx @@ -1,4 +1,4 @@ -import { TextReveal } from "@/registry/default/magicui/text-reveal"; +import { TextReveal } from "@/registry/magicui/text-reveal"; export default function TextRevealDemo() { return ( diff --git a/registry/default/example/tweet-card-demo.tsx b/registry/example/tweet-card-demo.tsx similarity index 71% rename from registry/default/example/tweet-card-demo.tsx rename to registry/example/tweet-card-demo.tsx index 0b8a72705..e37faea65 100644 --- a/registry/default/example/tweet-card-demo.tsx +++ b/registry/example/tweet-card-demo.tsx @@ -1,4 +1,4 @@ -import { ClientTweetCard } from "@/registry/default/magicui/client-tweet-card"; +import { ClientTweetCard } from "@/registry/magicui/client-tweet-card"; /** * (Server Side Only) diff --git a/registry/default/example/tweet-card-images.tsx b/registry/example/tweet-card-images.tsx similarity index 60% rename from registry/default/example/tweet-card-images.tsx rename to registry/example/tweet-card-images.tsx index 2984539ac..fea10b15f 100644 --- a/registry/default/example/tweet-card-images.tsx +++ b/registry/example/tweet-card-images.tsx @@ -1,4 +1,4 @@ -import { ClientTweetCard } from "@/registry/default/magicui/client-tweet-card"; +import { ClientTweetCard } from "@/registry/magicui/client-tweet-card"; export default function TweetImages() { return ; diff --git a/registry/default/example/tweet-card-meta-preview.tsx b/registry/example/tweet-card-meta-preview.tsx similarity index 61% rename from registry/default/example/tweet-card-meta-preview.tsx rename to registry/example/tweet-card-meta-preview.tsx index 31a2f1ed1..cb74c3a4b 100644 --- a/registry/default/example/tweet-card-meta-preview.tsx +++ b/registry/example/tweet-card-meta-preview.tsx @@ -1,4 +1,4 @@ -import { ClientTweetCard } from "@/registry/default/magicui/client-tweet-card"; +import { ClientTweetCard } from "@/registry/magicui/client-tweet-card"; export default function TweetMetaPreview() { return ; diff --git a/registry/default/example/typing-animation-demo.tsx b/registry/example/typing-animation-demo.tsx similarity index 58% rename from registry/default/example/typing-animation-demo.tsx rename to registry/example/typing-animation-demo.tsx index 54fb584b1..807ee7688 100644 --- a/registry/default/example/typing-animation-demo.tsx +++ b/registry/example/typing-animation-demo.tsx @@ -1,4 +1,4 @@ -import { TypingAnimation } from "@/registry/default/magicui/typing-animation"; +import { TypingAnimation } from "@/registry/magicui/typing-animation"; export default function TypingAnimationDemo() { return Typing Animation; diff --git a/registry/default/example/warp-background-demo.tsx b/registry/example/warp-background-demo.tsx similarity index 89% rename from registry/default/example/warp-background-demo.tsx rename to registry/example/warp-background-demo.tsx index 46b708cd5..ee5632a5d 100644 --- a/registry/default/example/warp-background-demo.tsx +++ b/registry/example/warp-background-demo.tsx @@ -1,10 +1,10 @@ -import { WarpBackground } from "@/components/magicui/warp-background"; import { Card, CardContent, CardDescription, CardTitle, } from "@/components/ui/card"; +import { WarpBackground } from "@/registry/magicui/warp-background"; export default function ExampleComponentDemo() { return ( diff --git a/registry/default/example/word-rotate-demo.tsx b/registry/example/word-rotate-demo.tsx similarity index 72% rename from registry/default/example/word-rotate-demo.tsx rename to registry/example/word-rotate-demo.tsx index 446803ab2..a3afb8a5c 100644 --- a/registry/default/example/word-rotate-demo.tsx +++ b/registry/example/word-rotate-demo.tsx @@ -1,4 +1,4 @@ -import { WordRotate } from "@/registry/default/magicui/word-rotate"; +import { WordRotate } from "@/registry/magicui/word-rotate"; export default function WordRotateDemo() { return ( diff --git a/registry/index.tsx b/registry/index.tsx deleted file mode 100644 index 79c1667eb..000000000 --- a/registry/index.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { blocks } from "./registry-blocks"; -import { examples } from "./registry-examples"; -import { hooks } from "./registry-hooks"; -import { lib } from "./registry-lib"; -import { themes } from "./registry-themes"; -import { ui } from "./registry-ui"; -import { Registry } from "./schema"; - -export const registry: Registry = [ - ...ui, - ...examples, - ...blocks, - ...lib, - ...hooks, - ...themes, -]; diff --git a/registry/default/lib/utils.ts b/registry/lib/utils.ts similarity index 100% rename from registry/default/lib/utils.ts rename to registry/lib/utils.ts diff --git a/registry/default/magicui/android.tsx b/registry/magicui/android.tsx similarity index 100% rename from registry/default/magicui/android.tsx rename to registry/magicui/android.tsx diff --git a/registry/default/magicui/animated-beam.tsx b/registry/magicui/animated-beam.tsx similarity index 100% rename from registry/default/magicui/animated-beam.tsx rename to registry/magicui/animated-beam.tsx diff --git a/registry/default/magicui/animated-circular-progress-bar.tsx b/registry/magicui/animated-circular-progress-bar.tsx similarity index 100% rename from registry/default/magicui/animated-circular-progress-bar.tsx rename to registry/magicui/animated-circular-progress-bar.tsx diff --git a/registry/default/magicui/animated-gradient-text.tsx b/registry/magicui/animated-gradient-text.tsx similarity index 100% rename from registry/default/magicui/animated-gradient-text.tsx rename to registry/magicui/animated-gradient-text.tsx diff --git a/registry/default/magicui/animated-grid-pattern.tsx b/registry/magicui/animated-grid-pattern.tsx similarity index 100% rename from registry/default/magicui/animated-grid-pattern.tsx rename to registry/magicui/animated-grid-pattern.tsx diff --git a/registry/default/magicui/animated-list.tsx b/registry/magicui/animated-list.tsx similarity index 100% rename from registry/default/magicui/animated-list.tsx rename to registry/magicui/animated-list.tsx diff --git a/registry/default/magicui/animated-shiny-text.tsx b/registry/magicui/animated-shiny-text.tsx similarity index 100% rename from registry/default/magicui/animated-shiny-text.tsx rename to registry/magicui/animated-shiny-text.tsx diff --git a/registry/default/magicui/animated-subscribe-button.tsx b/registry/magicui/animated-subscribe-button.tsx similarity index 100% rename from registry/default/magicui/animated-subscribe-button.tsx rename to registry/magicui/animated-subscribe-button.tsx diff --git a/registry/default/magicui/aurora-text.tsx b/registry/magicui/aurora-text.tsx similarity index 100% rename from registry/default/magicui/aurora-text.tsx rename to registry/magicui/aurora-text.tsx diff --git a/registry/default/magicui/avatar-circles.tsx b/registry/magicui/avatar-circles.tsx similarity index 100% rename from registry/default/magicui/avatar-circles.tsx rename to registry/magicui/avatar-circles.tsx diff --git a/registry/default/magicui/bento-grid.tsx b/registry/magicui/bento-grid.tsx similarity index 100% rename from registry/default/magicui/bento-grid.tsx rename to registry/magicui/bento-grid.tsx diff --git a/registry/default/magicui/blur-fade.tsx b/registry/magicui/blur-fade.tsx similarity index 100% rename from registry/default/magicui/blur-fade.tsx rename to registry/magicui/blur-fade.tsx diff --git a/registry/default/magicui/border-beam.tsx b/registry/magicui/border-beam.tsx similarity index 100% rename from registry/default/magicui/border-beam.tsx rename to registry/magicui/border-beam.tsx diff --git a/registry/default/magicui/box-reveal.tsx b/registry/magicui/box-reveal.tsx similarity index 100% rename from registry/default/magicui/box-reveal.tsx rename to registry/magicui/box-reveal.tsx diff --git a/registry/default/magicui/client-tweet-card.tsx b/registry/magicui/client-tweet-card.tsx similarity index 93% rename from registry/default/magicui/client-tweet-card.tsx rename to registry/magicui/client-tweet-card.tsx index 214c888d4..68d218bf2 100644 --- a/registry/default/magicui/client-tweet-card.tsx +++ b/registry/magicui/client-tweet-card.tsx @@ -6,7 +6,7 @@ import { MagicTweet, TweetNotFound, TweetSkeleton, -} from "@/registry/default/magicui/tweet-card"; +} from "@/registry/magicui/tweet-card"; export const ClientTweetCard = ({ id, diff --git a/registry/default/magicui/code-comparison.tsx b/registry/magicui/code-comparison.tsx similarity index 100% rename from registry/default/magicui/code-comparison.tsx rename to registry/magicui/code-comparison.tsx diff --git a/registry/default/magicui/confetti-button.tsx b/registry/magicui/confetti-button.tsx similarity index 100% rename from registry/default/magicui/confetti-button.tsx rename to registry/magicui/confetti-button.tsx diff --git a/registry/default/magicui/confetti.tsx b/registry/magicui/confetti.tsx similarity index 99% rename from registry/default/magicui/confetti.tsx rename to registry/magicui/confetti.tsx index 161255fc5..c6df6cef8 100644 --- a/registry/default/magicui/confetti.tsx +++ b/registry/magicui/confetti.tsx @@ -1,3 +1,5 @@ +"use client"; + import type { GlobalOptions as ConfettiGlobalOptions, CreateTypes as ConfettiInstance, diff --git a/registry/default/magicui/cool-mode.tsx b/registry/magicui/cool-mode.tsx similarity index 98% rename from registry/default/magicui/cool-mode.tsx rename to registry/magicui/cool-mode.tsx index 387b9a9aa..4f8f09ac0 100644 --- a/registry/default/magicui/cool-mode.tsx +++ b/registry/magicui/cool-mode.tsx @@ -1,4 +1,6 @@ -import React, { ReactNode, RefObject, useEffect, useRef } from "react"; +"use client"; + +import React, { ReactNode, useEffect, useRef } from "react"; export interface BaseParticle { element: HTMLElement | SVGSVGElement; diff --git a/registry/default/magicui/dock.tsx b/registry/magicui/dock.tsx similarity index 100% rename from registry/default/magicui/dock.tsx rename to registry/magicui/dock.tsx diff --git a/registry/default/magicui/dot-pattern.tsx b/registry/magicui/dot-pattern.tsx similarity index 100% rename from registry/default/magicui/dot-pattern.tsx rename to registry/magicui/dot-pattern.tsx diff --git a/registry/default/magicui/file-tree.tsx b/registry/magicui/file-tree.tsx similarity index 100% rename from registry/default/magicui/file-tree.tsx rename to registry/magicui/file-tree.tsx diff --git a/registry/default/magicui/flickering-grid.tsx b/registry/magicui/flickering-grid.tsx similarity index 100% rename from registry/default/magicui/flickering-grid.tsx rename to registry/magicui/flickering-grid.tsx diff --git a/registry/default/magicui/flip-text.tsx b/registry/magicui/flip-text.tsx similarity index 100% rename from registry/default/magicui/flip-text.tsx rename to registry/magicui/flip-text.tsx diff --git a/registry/default/magicui/globe.tsx b/registry/magicui/globe.tsx similarity index 100% rename from registry/default/magicui/globe.tsx rename to registry/magicui/globe.tsx diff --git a/registry/default/magicui/grid-pattern.tsx b/registry/magicui/grid-pattern.tsx similarity index 100% rename from registry/default/magicui/grid-pattern.tsx rename to registry/magicui/grid-pattern.tsx diff --git a/registry/default/magicui/hero-video-dialog.tsx b/registry/magicui/hero-video-dialog.tsx similarity index 100% rename from registry/default/magicui/hero-video-dialog.tsx rename to registry/magicui/hero-video-dialog.tsx diff --git a/registry/default/magicui/hyper-text.tsx b/registry/magicui/hyper-text.tsx similarity index 100% rename from registry/default/magicui/hyper-text.tsx rename to registry/magicui/hyper-text.tsx diff --git a/registry/default/magicui/icon-cloud.tsx b/registry/magicui/icon-cloud.tsx similarity index 100% rename from registry/default/magicui/icon-cloud.tsx rename to registry/magicui/icon-cloud.tsx diff --git a/registry/default/magicui/interactive-grid-pattern.tsx b/registry/magicui/interactive-grid-pattern.tsx similarity index 99% rename from registry/default/magicui/interactive-grid-pattern.tsx rename to registry/magicui/interactive-grid-pattern.tsx index ba8ccd285..bab1ce94f 100644 --- a/registry/default/magicui/interactive-grid-pattern.tsx +++ b/registry/magicui/interactive-grid-pattern.tsx @@ -1,3 +1,5 @@ +"use client"; + import { cn } from "@/lib/utils"; import React, { useState } from "react"; diff --git a/registry/default/magicui/interactive-hover-button.tsx b/registry/magicui/interactive-hover-button.tsx similarity index 100% rename from registry/default/magicui/interactive-hover-button.tsx rename to registry/magicui/interactive-hover-button.tsx diff --git a/registry/default/magicui/iphone-15-pro.tsx b/registry/magicui/iphone-15-pro.tsx similarity index 100% rename from registry/default/magicui/iphone-15-pro.tsx rename to registry/magicui/iphone-15-pro.tsx diff --git a/registry/default/magicui/line-shadow-text.tsx b/registry/magicui/line-shadow-text.tsx similarity index 100% rename from registry/default/magicui/line-shadow-text.tsx rename to registry/magicui/line-shadow-text.tsx diff --git a/registry/default/magicui/linear-mask.tsx b/registry/magicui/linear-mask.tsx similarity index 100% rename from registry/default/magicui/linear-mask.tsx rename to registry/magicui/linear-mask.tsx diff --git a/registry/default/magicui/magic-card.tsx b/registry/magicui/magic-card.tsx similarity index 100% rename from registry/default/magicui/magic-card.tsx rename to registry/magicui/magic-card.tsx diff --git a/registry/default/magicui/marquee.tsx b/registry/magicui/marquee.tsx similarity index 100% rename from registry/default/magicui/marquee.tsx rename to registry/magicui/marquee.tsx diff --git a/registry/default/magicui/meteors.tsx b/registry/magicui/meteors.tsx similarity index 100% rename from registry/default/magicui/meteors.tsx rename to registry/magicui/meteors.tsx diff --git a/registry/default/magicui/morphing-text.tsx b/registry/magicui/morphing-text.tsx similarity index 100% rename from registry/default/magicui/morphing-text.tsx rename to registry/magicui/morphing-text.tsx diff --git a/registry/default/magicui/neon-gradient-card.tsx b/registry/magicui/neon-gradient-card.tsx similarity index 100% rename from registry/default/magicui/neon-gradient-card.tsx rename to registry/magicui/neon-gradient-card.tsx diff --git a/registry/default/magicui/number-ticker.tsx b/registry/magicui/number-ticker.tsx similarity index 100% rename from registry/default/magicui/number-ticker.tsx rename to registry/magicui/number-ticker.tsx diff --git a/registry/default/magicui/orbiting-circles.tsx b/registry/magicui/orbiting-circles.tsx similarity index 100% rename from registry/default/magicui/orbiting-circles.tsx rename to registry/magicui/orbiting-circles.tsx diff --git a/registry/default/magicui/particles.tsx b/registry/magicui/particles.tsx similarity index 100% rename from registry/default/magicui/particles.tsx rename to registry/magicui/particles.tsx diff --git a/registry/default/magicui/pulsating-button.tsx b/registry/magicui/pulsating-button.tsx similarity index 100% rename from registry/default/magicui/pulsating-button.tsx rename to registry/magicui/pulsating-button.tsx diff --git a/registry/default/magicui/rainbow-button.tsx b/registry/magicui/rainbow-button.tsx similarity index 100% rename from registry/default/magicui/rainbow-button.tsx rename to registry/magicui/rainbow-button.tsx diff --git a/registry/default/magicui/retro-grid.tsx b/registry/magicui/retro-grid.tsx similarity index 100% rename from registry/default/magicui/retro-grid.tsx rename to registry/magicui/retro-grid.tsx diff --git a/registry/default/magicui/ripple-button.tsx b/registry/magicui/ripple-button.tsx similarity index 100% rename from registry/default/magicui/ripple-button.tsx rename to registry/magicui/ripple-button.tsx diff --git a/registry/default/magicui/ripple.tsx b/registry/magicui/ripple.tsx similarity index 100% rename from registry/default/magicui/ripple.tsx rename to registry/magicui/ripple.tsx diff --git a/registry/default/magicui/safari.tsx b/registry/magicui/safari.tsx similarity index 99% rename from registry/default/magicui/safari.tsx rename to registry/magicui/safari.tsx index fdad643ce..a8e94b7ff 100644 --- a/registry/default/magicui/safari.tsx +++ b/registry/magicui/safari.tsx @@ -11,7 +11,7 @@ export interface SafariProps extends SVGProps { mode?: SafariMode; } -export default function Safari({ +export function Safari({ imageSrc, videoSrc, url, diff --git a/registry/default/magicui/scratch-to-reveal.tsx b/registry/magicui/scratch-to-reveal.tsx similarity index 99% rename from registry/default/magicui/scratch-to-reveal.tsx rename to registry/magicui/scratch-to-reveal.tsx index 3662bdec2..149ee33aa 100644 --- a/registry/default/magicui/scratch-to-reveal.tsx +++ b/registry/magicui/scratch-to-reveal.tsx @@ -1,3 +1,4 @@ +"use client"; import { cn } from "@/lib/utils"; import { motion, useAnimation } from "motion/react"; import React, { useEffect, useRef, useState } from "react"; diff --git a/registry/default/magicui/script-copy-btn.tsx b/registry/magicui/script-copy-btn.tsx similarity index 100% rename from registry/default/magicui/script-copy-btn.tsx rename to registry/magicui/script-copy-btn.tsx diff --git a/registry/default/magicui/scroll-based-velocity.tsx b/registry/magicui/scroll-based-velocity.tsx similarity index 100% rename from registry/default/magicui/scroll-based-velocity.tsx rename to registry/magicui/scroll-based-velocity.tsx diff --git a/registry/default/magicui/scroll-progress.tsx b/registry/magicui/scroll-progress.tsx similarity index 100% rename from registry/default/magicui/scroll-progress.tsx rename to registry/magicui/scroll-progress.tsx diff --git a/registry/default/magicui/shimmer-button.tsx b/registry/magicui/shimmer-button.tsx similarity index 100% rename from registry/default/magicui/shimmer-button.tsx rename to registry/magicui/shimmer-button.tsx diff --git a/registry/default/magicui/shine-border.tsx b/registry/magicui/shine-border.tsx similarity index 100% rename from registry/default/magicui/shine-border.tsx rename to registry/magicui/shine-border.tsx diff --git a/registry/default/magicui/shiny-button.tsx b/registry/magicui/shiny-button.tsx similarity index 100% rename from registry/default/magicui/shiny-button.tsx rename to registry/magicui/shiny-button.tsx diff --git a/registry/default/magicui/sparkles-text.tsx b/registry/magicui/sparkles-text.tsx similarity index 100% rename from registry/default/magicui/sparkles-text.tsx rename to registry/magicui/sparkles-text.tsx diff --git a/registry/default/magicui/terminal.tsx b/registry/magicui/terminal.tsx similarity index 100% rename from registry/default/magicui/terminal.tsx rename to registry/magicui/terminal.tsx diff --git a/registry/default/magicui/text-animate.tsx b/registry/magicui/text-animate.tsx similarity index 100% rename from registry/default/magicui/text-animate.tsx rename to registry/magicui/text-animate.tsx diff --git a/registry/default/magicui/text-reveal.tsx b/registry/magicui/text-reveal.tsx similarity index 100% rename from registry/default/magicui/text-reveal.tsx rename to registry/magicui/text-reveal.tsx diff --git a/registry/default/magicui/tweet-card.tsx b/registry/magicui/tweet-card.tsx similarity index 100% rename from registry/default/magicui/tweet-card.tsx rename to registry/magicui/tweet-card.tsx diff --git a/registry/default/magicui/typing-animation.tsx b/registry/magicui/typing-animation.tsx similarity index 100% rename from registry/default/magicui/typing-animation.tsx rename to registry/magicui/typing-animation.tsx diff --git a/registry/default/magicui/warp-background.tsx b/registry/magicui/warp-background.tsx similarity index 100% rename from registry/default/magicui/warp-background.tsx rename to registry/magicui/warp-background.tsx diff --git a/registry/default/magicui/word-rotate.tsx b/registry/magicui/word-rotate.tsx similarity index 100% rename from registry/default/magicui/word-rotate.tsx rename to registry/magicui/word-rotate.tsx diff --git a/registry/registry-base-colors.ts b/registry/registry-base-colors.ts deleted file mode 100644 index bd2ab3dd4..000000000 --- a/registry/registry-base-colors.ts +++ /dev/null @@ -1,756 +0,0 @@ -export const baseColors = [ - { - name: "zinc", - label: "Zinc", - activeColor: { - light: "240 5.9% 10%", - dark: "240 5.2% 33.9%", - }, - cssVars: { - light: { - background: "0 0% 100%", - foreground: "240 10% 3.9%", - card: "0 0% 100%", - "card-foreground": "240 10% 3.9%", - popover: "0 0% 100%", - "popover-foreground": "240 10% 3.9%", - primary: "240 5.9% 10%", - "primary-foreground": "0 0% 98%", - secondary: "240 4.8% 95.9%", - "secondary-foreground": "240 5.9% 10%", - muted: "240 4.8% 95.9%", - "muted-foreground": "240 3.8% 46.1%", - accent: "240 4.8% 95.9%", - "accent-foreground": "240 5.9% 10%", - destructive: "0 84.2% 60.2%", - "destructive-foreground": "0 0% 98%", - border: "240 5.9% 90%", - input: "240 5.9% 90%", - ring: "240 5.9% 10%", - radius: "0.5rem", - "chart-1": "12 76% 61%", - "chart-2": "173 58% 39%", - "chart-3": "197 37% 24%", - "chart-4": "43 74% 66%", - "chart-5": "27 87% 67%", - }, - dark: { - background: "240 10% 3.9%", - foreground: "0 0% 98%", - card: "240 10% 3.9%", - "card-foreground": "0 0% 98%", - popover: "240 10% 3.9%", - "popover-foreground": "0 0% 98%", - primary: "0 0% 98%", - "primary-foreground": "240 5.9% 10%", - secondary: "240 3.7% 15.9%", - "secondary-foreground": "0 0% 98%", - muted: "240 3.7% 15.9%", - "muted-foreground": "240 5% 64.9%", - accent: "240 3.7% 15.9%", - "accent-foreground": "0 0% 98%", - destructive: "0 62.8% 30.6%", - "destructive-foreground": "0 0% 98%", - border: "240 3.7% 15.9%", - input: "240 3.7% 15.9%", - ring: "240 4.9% 83.9%", - "chart-1": "220 70% 50%", - "chart-2": "160 60% 45%", - "chart-3": "30 80% 55%", - "chart-4": "280 65% 60%", - "chart-5": "340 75% 55%", - }, - }, - }, - { - name: "slate", - label: "Slate", - activeColor: { - light: "215.4 16.3% 46.9%", - dark: "215.3 19.3% 34.5%", - }, - cssVars: { - light: { - background: "0 0% 100%", - foreground: "222.2 84% 4.9%", - card: "0 0% 100%", - "card-foreground": "222.2 84% 4.9%", - popover: "0 0% 100%", - "popover-foreground": "222.2 84% 4.9%", - primary: "222.2 47.4% 11.2%", - "primary-foreground": "210 40% 98%", - secondary: "210 40% 96.1%", - "secondary-foreground": "222.2 47.4% 11.2%", - muted: "210 40% 96.1%", - "muted-foreground": "215.4 16.3% 46.9%", - accent: "210 40% 96.1%", - "accent-foreground": "222.2 47.4% 11.2%", - destructive: "0 84.2% 60.2%", - "destructive-foreground": "210 40% 98%", - border: "214.3 31.8% 91.4%", - input: "214.3 31.8% 91.4%", - ring: "222.2 84% 4.9%", - radius: "0.5rem", - "chart-1": "12 76% 61%", - "chart-2": "173 58% 39%", - "chart-3": "197 37% 24%", - "chart-4": "43 74% 66%", - "chart-5": "27 87% 67%", - }, - dark: { - background: "222.2 84% 4.9%", - foreground: "210 40% 98%", - card: "222.2 84% 4.9%", - "card-foreground": "210 40% 98%", - popover: "222.2 84% 4.9%", - "popover-foreground": "210 40% 98%", - primary: "210 40% 98%", - "primary-foreground": "222.2 47.4% 11.2%", - secondary: "217.2 32.6% 17.5%", - "secondary-foreground": "210 40% 98%", - muted: "217.2 32.6% 17.5%", - "muted-foreground": "215 20.2% 65.1%", - accent: "217.2 32.6% 17.5%", - "accent-foreground": "210 40% 98%", - destructive: "0 62.8% 30.6%", - "destructive-foreground": "210 40% 98%", - border: "217.2 32.6% 17.5%", - input: "217.2 32.6% 17.5%", - ring: "212.7 26.8% 83.9", - "chart-1": "220 70% 50%", - "chart-2": "160 60% 45%", - "chart-3": "30 80% 55%", - "chart-4": "280 65% 60%", - "chart-5": "340 75% 55%", - }, - }, - }, - { - name: "stone", - label: "Stone", - activeColor: { - light: "25 5.3% 44.7%", - dark: "33.3 5.5% 32.4%", - }, - cssVars: { - light: { - background: "0 0% 100%", - foreground: "20 14.3% 4.1%", - card: "0 0% 100%", - "card-foreground": "20 14.3% 4.1%", - popover: "0 0% 100%", - "popover-foreground": "20 14.3% 4.1%", - primary: "24 9.8% 10%", - "primary-foreground": "60 9.1% 97.8%", - secondary: "60 4.8% 95.9%", - "secondary-foreground": "24 9.8% 10%", - muted: "60 4.8% 95.9%", - "muted-foreground": "25 5.3% 44.7%", - accent: "60 4.8% 95.9%", - "accent-foreground": "24 9.8% 10%", - destructive: "0 84.2% 60.2%", - "destructive-foreground": "60 9.1% 97.8%", - border: "20 5.9% 90%", - input: "20 5.9% 90%", - ring: "20 14.3% 4.1%", - radius: "0.95rem", - "chart-1": "12 76% 61%", - "chart-2": "173 58% 39%", - "chart-3": "197 37% 24%", - "chart-4": "43 74% 66%", - "chart-5": "27 87% 67%", - }, - dark: { - background: "20 14.3% 4.1%", - foreground: "60 9.1% 97.8%", - card: "20 14.3% 4.1%", - "card-foreground": "60 9.1% 97.8%", - popover: "20 14.3% 4.1%", - "popover-foreground": "60 9.1% 97.8%", - primary: "60 9.1% 97.8%", - "primary-foreground": "24 9.8% 10%", - secondary: "12 6.5% 15.1%", - "secondary-foreground": "60 9.1% 97.8%", - muted: "12 6.5% 15.1%", - "muted-foreground": "24 5.4% 63.9%", - accent: "12 6.5% 15.1%", - "accent-foreground": "60 9.1% 97.8%", - destructive: "0 62.8% 30.6%", - "destructive-foreground": "60 9.1% 97.8%", - border: "12 6.5% 15.1%", - input: "12 6.5% 15.1%", - ring: "24 5.7% 82.9%", - "chart-1": "220 70% 50%", - "chart-2": "160 60% 45%", - "chart-3": "30 80% 55%", - "chart-4": "280 65% 60%", - "chart-5": "340 75% 55%", - }, - }, - }, - { - name: "gray", - label: "Gray", - activeColor: { - light: "220 8.9% 46.1%", - dark: "215 13.8% 34.1%", - }, - cssVars: { - light: { - background: "0 0% 100%", - foreground: "224 71.4% 4.1%", - card: "0 0% 100%", - "card-foreground": "224 71.4% 4.1%", - popover: "0 0% 100%", - "popover-foreground": "224 71.4% 4.1%", - primary: "220.9 39.3% 11%", - "primary-foreground": "210 20% 98%", - secondary: "220 14.3% 95.9%", - "secondary-foreground": "220.9 39.3% 11%", - muted: "220 14.3% 95.9%", - "muted-foreground": "220 8.9% 46.1%", - accent: "220 14.3% 95.9%", - "accent-foreground": "220.9 39.3% 11%", - destructive: "0 84.2% 60.2%", - "destructive-foreground": "210 20% 98%", - border: "220 13% 91%", - input: "220 13% 91%", - ring: "224 71.4% 4.1%", - radius: "0.35rem", - "chart-1": "12 76% 61%", - "chart-2": "173 58% 39%", - "chart-3": "197 37% 24%", - "chart-4": "43 74% 66%", - "chart-5": "27 87% 67%", - }, - dark: { - background: "224 71.4% 4.1%", - foreground: "210 20% 98%", - card: "224 71.4% 4.1%", - "card-foreground": "210 20% 98%", - popover: "224 71.4% 4.1%", - "popover-foreground": "210 20% 98%", - primary: "210 20% 98%", - "primary-foreground": "220.9 39.3% 11%", - secondary: "215 27.9% 16.9%", - "secondary-foreground": "210 20% 98%", - muted: "215 27.9% 16.9%", - "muted-foreground": "217.9 10.6% 64.9%", - accent: "215 27.9% 16.9%", - "accent-foreground": "210 20% 98%", - destructive: "0 62.8% 30.6%", - "destructive-foreground": "210 20% 98%", - border: "215 27.9% 16.9%", - input: "215 27.9% 16.9%", - ring: "216 12.2% 83.9%", - "chart-1": "220 70% 50%", - "chart-2": "160 60% 45%", - "chart-3": "30 80% 55%", - "chart-4": "280 65% 60%", - "chart-5": "340 75% 55%", - }, - }, - }, - { - name: "neutral", - label: "Neutral", - activeColor: { - light: "0 0% 45.1%", - dark: "0 0% 32.2%", - }, - cssVars: { - light: { - background: "0 0% 100%", - foreground: "0 0% 3.9%", - card: "0 0% 100%", - "card-foreground": "0 0% 3.9%", - popover: "0 0% 100%", - "popover-foreground": "0 0% 3.9%", - primary: "0 0% 9%", - "primary-foreground": "0 0% 98%", - secondary: "0 0% 96.1%", - "secondary-foreground": "0 0% 9%", - muted: "0 0% 96.1%", - "muted-foreground": "0 0% 45.1%", - accent: "0 0% 96.1%", - "accent-foreground": "0 0% 9%", - destructive: "0 84.2% 60.2%", - "destructive-foreground": "0 0% 98%", - border: "0 0% 89.8%", - input: "0 0% 89.8%", - ring: "0 0% 3.9%", - "chart-1": "12 76% 61%", - "chart-2": "173 58% 39%", - "chart-3": "197 37% 24%", - "chart-4": "43 74% 66%", - "chart-5": "27 87% 67%", - }, - dark: { - background: "0 0% 3.9%", - foreground: "0 0% 98%", - card: "0 0% 3.9%", - "card-foreground": "0 0% 98%", - popover: "0 0% 3.9%", - "popover-foreground": "0 0% 98%", - primary: "0 0% 98%", - "primary-foreground": "0 0% 9%", - secondary: "0 0% 14.9%", - "secondary-foreground": "0 0% 98%", - muted: "0 0% 14.9%", - "muted-foreground": "0 0% 63.9%", - accent: "0 0% 14.9%", - "accent-foreground": "0 0% 98%", - destructive: "0 62.8% 30.6%", - "destructive-foreground": "0 0% 98%", - border: "0 0% 14.9%", - input: "0 0% 14.9%", - ring: "0 0% 83.1%", - "chart-1": "220 70% 50%", - "chart-2": "160 60% 45%", - "chart-3": "30 80% 55%", - "chart-4": "280 65% 60%", - "chart-5": "340 75% 55%", - }, - }, - }, - { - name: "red", - label: "Red", - activeColor: { - light: "0 72.2% 50.6%", - dark: "0 72.2% 50.6%", - }, - cssVars: { - light: { - background: "0 0% 100%", - foreground: "0 0% 3.9%", - card: "0 0% 100%", - "card-foreground": "0 0% 3.9%", - popover: "0 0% 100%", - "popover-foreground": "0 0% 3.9%", - primary: "0 72.2% 50.6%", - "primary-foreground": "0 85.7% 97.3%", - secondary: "0 0% 96.1%", - "secondary-foreground": "0 0% 9%", - muted: "0 0% 96.1%", - "muted-foreground": "0 0% 45.1%", - accent: "0 0% 96.1%", - "accent-foreground": "0 0% 9%", - destructive: "0 84.2% 60.2%", - "destructive-foreground": "0 0% 98%", - border: "0 0% 89.8%", - input: "0 0% 89.8%", - ring: "0 72.2% 50.6%", - radius: "0.4rem", - "chart-1": "12 76% 61%", - "chart-2": "173 58% 39%", - "chart-3": "197 37% 24%", - "chart-4": "43 74% 66%", - "chart-5": "27 87% 67%", - }, - dark: { - background: "0 0% 3.9%", - foreground: "0 0% 98%", - card: "0 0% 3.9%", - "card-foreground": "0 0% 98%", - popover: "0 0% 3.9%", - "popover-foreground": "0 0% 98%", - primary: "0 72.2% 50.6%", - "primary-foreground": "0 85.7% 97.3%", - secondary: "0 0% 14.9%", - "secondary-foreground": "0 0% 98%", - muted: "0 0% 14.9%", - "muted-foreground": "0 0% 63.9%", - accent: "0 0% 14.9%", - "accent-foreground": "0 0% 98%", - destructive: "0 62.8% 30.6%", - "destructive-foreground": "0 0% 98%", - border: "0 0% 14.9%", - input: "0 0% 14.9%", - ring: "0 72.2% 50.6%", - "chart-1": "220 70% 50%", - "chart-2": "160 60% 45%", - "chart-3": "30 80% 55%", - "chart-4": "280 65% 60%", - "chart-5": "340 75% 55%", - }, - }, - }, - { - name: "rose", - label: "Rose", - activeColor: { - light: "346.8 77.2% 49.8%", - dark: "346.8 77.2% 49.8%", - }, - cssVars: { - light: { - background: "0 0% 100%", - foreground: "240 10% 3.9%", - card: "0 0% 100%", - "card-foreground": "240 10% 3.9%", - popover: "0 0% 100%", - "popover-foreground": "240 10% 3.9%", - primary: "346.8 77.2% 49.8%", - "primary-foreground": "355.7 100% 97.3%", - secondary: "240 4.8% 95.9%", - "secondary-foreground": "240 5.9% 10%", - muted: "240 4.8% 95.9%", - "muted-foreground": "240 3.8% 46.1%", - accent: "240 4.8% 95.9%", - "accent-foreground": "240 5.9% 10%", - destructive: "0 84.2% 60.2%", - "destructive-foreground": "0 0% 98%", - border: "240 5.9% 90%", - input: "240 5.9% 90%", - ring: "346.8 77.2% 49.8%", - radius: "0.5rem", - "chart-1": "12 76% 61%", - "chart-2": "173 58% 39%", - "chart-3": "197 37% 24%", - "chart-4": "43 74% 66%", - "chart-5": "27 87% 67%", - }, - dark: { - background: "20 14.3% 4.1%", - foreground: "0 0% 95%", - popover: "0 0% 9%", - "popover-foreground": "0 0% 95%", - card: "24 9.8% 10%", - "card-foreground": "0 0% 95%", - primary: "346.8 77.2% 49.8%", - "primary-foreground": "355.7 100% 97.3%", - secondary: "240 3.7% 15.9%", - "secondary-foreground": "0 0% 98%", - muted: "0 0% 15%", - "muted-foreground": "240 5% 64.9%", - accent: "12 6.5% 15.1%", - "accent-foreground": "0 0% 98%", - destructive: "0 62.8% 30.6%", - "destructive-foreground": "0 85.7% 97.3%", - border: "240 3.7% 15.9%", - input: "240 3.7% 15.9%", - ring: "346.8 77.2% 49.8%", - "chart-1": "220 70% 50%", - "chart-2": "160 60% 45%", - "chart-3": "30 80% 55%", - "chart-4": "280 65% 60%", - "chart-5": "340 75% 55%", - }, - }, - }, - { - name: "orange", - label: "Orange", - activeColor: { - light: "24.6 95% 53.1%", - dark: "20.5 90.2% 48.2%", - }, - cssVars: { - light: { - background: "0 0% 100%", - foreground: "20 14.3% 4.1%", - card: "0 0% 100%", - "card-foreground": "20 14.3% 4.1%", - popover: "0 0% 100%", - "popover-foreground": "20 14.3% 4.1%", - primary: "24.6 95% 53.1%", - "primary-foreground": "60 9.1% 97.8%", - secondary: "60 4.8% 95.9%", - "secondary-foreground": "24 9.8% 10%", - muted: "60 4.8% 95.9%", - "muted-foreground": "25 5.3% 44.7%", - accent: "60 4.8% 95.9%", - "accent-foreground": "24 9.8% 10%", - destructive: "0 84.2% 60.2%", - "destructive-foreground": "60 9.1% 97.8%", - border: "20 5.9% 90%", - input: "20 5.9% 90%", - ring: "24.6 95% 53.1%", - radius: "0.95rem", - "chart-1": "12 76% 61%", - "chart-2": "173 58% 39%", - "chart-3": "197 37% 24%", - "chart-4": "43 74% 66%", - "chart-5": "27 87% 67%", - }, - dark: { - background: "20 14.3% 4.1%", - foreground: "60 9.1% 97.8%", - card: "20 14.3% 4.1%", - "card-foreground": "60 9.1% 97.8%", - popover: "20 14.3% 4.1%", - "popover-foreground": "60 9.1% 97.8%", - primary: "20.5 90.2% 48.2%", - "primary-foreground": "60 9.1% 97.8%", - secondary: "12 6.5% 15.1%", - "secondary-foreground": "60 9.1% 97.8%", - muted: "12 6.5% 15.1%", - "muted-foreground": "24 5.4% 63.9%", - accent: "12 6.5% 15.1%", - "accent-foreground": "60 9.1% 97.8%", - destructive: "0 72.2% 50.6%", - "destructive-foreground": "60 9.1% 97.8%", - border: "12 6.5% 15.1%", - input: "12 6.5% 15.1%", - ring: "20.5 90.2% 48.2%", - "chart-1": "220 70% 50%", - "chart-2": "160 60% 45%", - "chart-3": "30 80% 55%", - "chart-4": "280 65% 60%", - "chart-5": "340 75% 55%", - }, - }, - }, - { - name: "green", - label: "Green", - activeColor: { - light: "142.1 76.2% 36.3%", - dark: "142.1 70.6% 45.3%", - }, - cssVars: { - light: { - background: "0 0% 100%", - foreground: "240 10% 3.9%", - card: "0 0% 100%", - "card-foreground": "240 10% 3.9%", - popover: "0 0% 100%", - "popover-foreground": "240 10% 3.9%", - primary: "142.1 76.2% 36.3%", - "primary-foreground": "355.7 100% 97.3%", - secondary: "240 4.8% 95.9%", - "secondary-foreground": "240 5.9% 10%", - muted: "240 4.8% 95.9%", - "muted-foreground": "240 3.8% 46.1%", - accent: "240 4.8% 95.9%", - "accent-foreground": "240 5.9% 10%", - destructive: "0 84.2% 60.2%", - "destructive-foreground": "0 0% 98%", - border: "240 5.9% 90%", - input: "240 5.9% 90%", - ring: "142.1 76.2% 36.3%", - "chart-1": "12 76% 61%", - "chart-2": "173 58% 39%", - "chart-3": "197 37% 24%", - "chart-4": "43 74% 66%", - "chart-5": "27 87% 67%", - }, - dark: { - background: "20 14.3% 4.1%", - foreground: "0 0% 95%", - popover: "0 0% 9%", - "popover-foreground": "0 0% 95%", - card: "24 9.8% 10%", - "card-foreground": "0 0% 95%", - primary: "142.1 70.6% 45.3%", - "primary-foreground": "144.9 80.4% 10%", - secondary: "240 3.7% 15.9%", - "secondary-foreground": "0 0% 98%", - muted: "0 0% 15%", - "muted-foreground": "240 5% 64.9%", - accent: "12 6.5% 15.1%", - "accent-foreground": "0 0% 98%", - destructive: "0 62.8% 30.6%", - "destructive-foreground": "0 85.7% 97.3%", - border: "240 3.7% 15.9%", - input: "240 3.7% 15.9%", - ring: "142.4 71.8% 29.2%", - "chart-1": "220 70% 50%", - "chart-2": "160 60% 45%", - "chart-3": "30 80% 55%", - "chart-4": "280 65% 60%", - "chart-5": "340 75% 55%", - }, - }, - }, - { - name: "blue", - label: "Blue", - activeColor: { - light: "221.2 83.2% 53.3%", - dark: "217.2 91.2% 59.8%", - }, - cssVars: { - light: { - background: "0 0% 100%", - foreground: "222.2 84% 4.9%", - card: "0 0% 100%", - "card-foreground": "222.2 84% 4.9%", - popover: "0 0% 100%", - "popover-foreground": "222.2 84% 4.9%", - primary: "221.2 83.2% 53.3%", - "primary-foreground": "210 40% 98%", - secondary: "210 40% 96.1%", - "secondary-foreground": "222.2 47.4% 11.2%", - muted: "210 40% 96.1%", - "muted-foreground": "215.4 16.3% 46.9%", - accent: "210 40% 96.1%", - "accent-foreground": "222.2 47.4% 11.2%", - destructive: "0 84.2% 60.2%", - "destructive-foreground": "210 40% 98%", - border: "214.3 31.8% 91.4%", - input: "214.3 31.8% 91.4%", - ring: "221.2 83.2% 53.3%", - "chart-1": "12 76% 61%", - "chart-2": "173 58% 39%", - "chart-3": "197 37% 24%", - "chart-4": "43 74% 66%", - "chart-5": "27 87% 67%", - }, - dark: { - background: "222.2 84% 4.9%", - foreground: "210 40% 98%", - card: "222.2 84% 4.9%", - "card-foreground": "210 40% 98%", - popover: "222.2 84% 4.9%", - "popover-foreground": "210 40% 98%", - primary: "217.2 91.2% 59.8%", - "primary-foreground": "222.2 47.4% 11.2%", - secondary: "217.2 32.6% 17.5%", - "secondary-foreground": "210 40% 98%", - muted: "217.2 32.6% 17.5%", - "muted-foreground": "215 20.2% 65.1%", - accent: "217.2 32.6% 17.5%", - "accent-foreground": "210 40% 98%", - destructive: "0 62.8% 30.6%", - "destructive-foreground": "210 40% 98%", - border: "217.2 32.6% 17.5%", - input: "217.2 32.6% 17.5%", - ring: "224.3 76.3% 48%", - "chart-1": "220 70% 50%", - "chart-2": "160 60% 45%", - "chart-3": "30 80% 55%", - "chart-4": "280 65% 60%", - "chart-5": "340 75% 55%", - }, - }, - }, - { - name: "yellow", - label: "Yellow", - activeColor: { - light: "47.9 95.8% 53.1%", - dark: "47.9 95.8% 53.1%", - }, - cssVars: { - light: { - background: "0 0% 100%", - foreground: "20 14.3% 4.1%", - card: "0 0% 100%", - "card-foreground": "20 14.3% 4.1%", - popover: "0 0% 100%", - "popover-foreground": "20 14.3% 4.1%", - primary: "47.9 95.8% 53.1%", - "primary-foreground": "26 83.3% 14.1%", - secondary: "60 4.8% 95.9%", - "secondary-foreground": "24 9.8% 10%", - muted: "60 4.8% 95.9%", - "muted-foreground": "25 5.3% 44.7%", - accent: "60 4.8% 95.9%", - "accent-foreground": "24 9.8% 10%", - destructive: "0 84.2% 60.2%", - "destructive-foreground": "60 9.1% 97.8%", - border: "20 5.9% 90%", - input: "20 5.9% 90%", - ring: "20 14.3% 4.1%", - radius: "0.95rem", - "chart-1": "12 76% 61%", - "chart-2": "173 58% 39%", - "chart-3": "197 37% 24%", - "chart-4": "43 74% 66%", - "chart-5": "27 87% 67%", - }, - dark: { - background: "20 14.3% 4.1%", - foreground: "60 9.1% 97.8%", - card: "20 14.3% 4.1%", - "card-foreground": "60 9.1% 97.8%", - popover: "20 14.3% 4.1%", - "popover-foreground": "60 9.1% 97.8%", - primary: "47.9 95.8% 53.1%", - "primary-foreground": "26 83.3% 14.1%", - secondary: "12 6.5% 15.1%", - "secondary-foreground": "60 9.1% 97.8%", - muted: "12 6.5% 15.1%", - "muted-foreground": "24 5.4% 63.9%", - accent: "12 6.5% 15.1%", - "accent-foreground": "60 9.1% 97.8%", - destructive: "0 62.8% 30.6%", - "destructive-foreground": "60 9.1% 97.8%", - border: "12 6.5% 15.1%", - input: "12 6.5% 15.1%", - ring: "35.5 91.7% 32.9%", - "chart-1": "220 70% 50%", - "chart-2": "160 60% 45%", - "chart-3": "30 80% 55%", - "chart-4": "280 65% 60%", - "chart-5": "340 75% 55%", - }, - }, - }, - { - name: "violet", - label: "Violet", - activeColor: { - light: "262.1 83.3% 57.8%", - dark: "263.4 70% 50.4%", - }, - cssVars: { - light: { - background: "0 0% 100%", - foreground: "224 71.4% 4.1%", - card: "0 0% 100%", - "card-foreground": "224 71.4% 4.1%", - popover: "0 0% 100%", - "popover-foreground": "224 71.4% 4.1%", - primary: "262.1 83.3% 57.8%", - "primary-foreground": "210 20% 98%", - secondary: "220 14.3% 95.9%", - "secondary-foreground": "220.9 39.3% 11%", - muted: "220 14.3% 95.9%", - "muted-foreground": "220 8.9% 46.1%", - accent: "220 14.3% 95.9%", - "accent-foreground": "220.9 39.3% 11%", - destructive: "0 84.2% 60.2%", - "destructive-foreground": "210 20% 98%", - border: "220 13% 91%", - input: "220 13% 91%", - ring: "262.1 83.3% 57.8%", - "chart-1": "12 76% 61%", - "chart-2": "173 58% 39%", - "chart-3": "197 37% 24%", - "chart-4": "43 74% 66%", - "chart-5": "27 87% 67%", - }, - dark: { - background: "224 71.4% 4.1%", - foreground: "210 20% 98%", - card: "224 71.4% 4.1%", - "card-foreground": "210 20% 98%", - popover: "224 71.4% 4.1%", - "popover-foreground": "210 20% 98%", - primary: "263.4 70% 50.4%", - "primary-foreground": "210 20% 98%", - secondary: "215 27.9% 16.9%", - "secondary-foreground": "210 20% 98%", - muted: "215 27.9% 16.9%", - "muted-foreground": "217.9 10.6% 64.9%", - accent: "215 27.9% 16.9%", - "accent-foreground": "210 20% 98%", - destructive: "0 62.8% 30.6%", - "destructive-foreground": "210 20% 98%", - border: "215 27.9% 16.9%", - input: "215 27.9% 16.9%", - ring: "263.4 70% 50.4%", - "chart-1": "220 70% 50%", - "chart-2": "160 60% 45%", - "chart-3": "30 80% 55%", - "chart-4": "280 65% 60%", - "chart-5": "340 75% 55%", - }, - }, - }, -] as const; - -export type BaseColor = (typeof baseColors)[number]; diff --git a/registry/registry-blocks.ts b/registry/registry-blocks.ts deleted file mode 100644 index 3bb8d2a4a..000000000 --- a/registry/registry-blocks.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { Registry } from "@/registry/schema"; - -export const blocks: Registry = []; diff --git a/registry/registry-colors.ts b/registry/registry-colors.ts deleted file mode 100644 index 5130fcee3..000000000 --- a/registry/registry-colors.ts +++ /dev/null @@ -1,1566 +0,0 @@ -export const colors = { - inherit: "inherit", - current: "currentColor", - transparent: "transparent", - black: { - hex: "#000000", - rgb: "rgb(0,0,0)", - hsl: "hsl(0,0%,0%)", - }, - white: { - hex: "#ffffff", - rgb: "rgb(255,255,255)", - hsl: "hsl(0,0%,100%)", - }, - slate: [ - { - scale: 50, - hex: "#f8fafc", - rgb: "rgb(248,250,252)", - hsl: "hsl(210,40%,98%)", - }, - { - scale: 100, - hex: "#f1f5f9", - rgb: "rgb(241,245,249)", - hsl: "hsl(210,40%,96.1%)", - }, - { - scale: 200, - hex: "#e2e8f0", - rgb: "rgb(226,232,240)", - hsl: "hsl(214.3,31.8%,91.4%)", - }, - { - scale: 300, - hex: "#cbd5e1", - rgb: "rgb(203,213,225)", - hsl: "hsl(212.7,26.8%,83.9%)", - }, - { - scale: 400, - hex: "#94a3b8", - rgb: "rgb(148,163,184)", - hsl: "hsl(215,20.2%,65.1%)", - }, - { - scale: 500, - hex: "#64748b", - rgb: "rgb(100,116,139)", - hsl: "hsl(215.4,16.3%,46.9%)", - }, - { - scale: 600, - hex: "#475569", - rgb: "rgb(71,85,105)", - hsl: "hsl(215.3,19.3%,34.5%)", - }, - { - scale: 700, - hex: "#334155", - rgb: "rgb(51,65,85)", - hsl: "hsl(215.3,25%,26.7%)", - }, - { - scale: 800, - hex: "#1e293b", - rgb: "rgb(30,41,59)", - hsl: "hsl(217.2,32.6%,17.5%)", - }, - { - scale: 900, - hex: "#0f172a", - rgb: "rgb(15,23,42)", - hsl: "hsl(222.2,47.4%,11.2%)", - }, - { - scale: 950, - hex: "#020617", - rgb: "rgb(2,6,23)", - hsl: "hsl(222.2,84%,4.9%)", - }, - ], - gray: [ - { - scale: 50, - hex: "#f9fafb", - rgb: "rgb(249,250,251)", - hsl: "hsl(210,20%,98%)", - }, - { - scale: 100, - hex: "#f3f4f6", - rgb: "rgb(243,244,246)", - hsl: "hsl(220,14.3%,95.9%)", - }, - { - scale: 200, - hex: "#e5e7eb", - rgb: "rgb(229,231,235)", - hsl: "hsl(220,13%,91%)", - }, - { - scale: 300, - hex: "#d1d5db", - rgb: "rgb(209,213,219)", - hsl: "hsl(216,12.2%,83.9%)", - }, - { - scale: 400, - hex: "#9ca3af", - rgb: "rgb(156,163,175)", - hsl: "hsl(217.9,10.6%,64.9%)", - }, - { - scale: 500, - hex: "#6b7280", - rgb: "rgb(107,114,128)", - hsl: "hsl(220,8.9%,46.1%)", - }, - { - scale: 600, - hex: "#4b5563", - rgb: "rgb(75,85,99)", - hsl: "hsl(215,13.8%,34.1%)", - }, - { - scale: 700, - hex: "#374151", - rgb: "rgb(55,65,81)", - hsl: "hsl(216.9,19.1%,26.7%)", - }, - { - scale: 800, - hex: "#1f2937", - rgb: "rgb(31,41,55)", - hsl: "hsl(215,27.9%,16.9%)", - }, - { - scale: 900, - hex: "#111827", - rgb: "rgb(17,24,39)", - hsl: "hsl(220.9,39.3%,11%)", - }, - { - scale: 950, - hex: "#030712", - rgb: "rgb(3,7,18)", - hsl: "hsl(224,71.4%,4.1%)", - }, - ], - zinc: [ - { - scale: 50, - hex: "#fafafa", - rgb: "rgb(250,250,250)", - hsl: "hsl(0,0%,98%)", - }, - { - scale: 100, - hex: "#f4f4f5", - rgb: "rgb(244,244,245)", - hsl: "hsl(240,4.8%,95.9%)", - }, - { - scale: 200, - hex: "#e4e4e7", - rgb: "rgb(228,228,231)", - hsl: "hsl(240,5.9%,90%)", - }, - { - scale: 300, - hex: "#d4d4d8", - rgb: "rgb(212,212,216)", - hsl: "hsl(240,4.9%,83.9%)", - }, - { - scale: 400, - hex: "#a1a1aa", - rgb: "rgb(161,161,170)", - hsl: "hsl(240,5%,64.9%)", - }, - { - scale: 500, - hex: "#71717a", - rgb: "rgb(113,113,122)", - hsl: "hsl(240,3.8%,46.1%)", - }, - { - scale: 600, - hex: "#52525b", - rgb: "rgb(82,82,91)", - hsl: "hsl(240,5.2%,33.9%)", - }, - { - scale: 700, - hex: "#3f3f46", - rgb: "rgb(63,63,70)", - hsl: "hsl(240,5.3%,26.1%)", - }, - { - scale: 800, - hex: "#27272a", - rgb: "rgb(39,39,42)", - hsl: "hsl(240,3.7%,15.9%)", - }, - { - scale: 900, - hex: "#18181b", - rgb: "rgb(24,24,27)", - hsl: "hsl(240,5.9%,10%)", - }, - { - scale: 950, - hex: "#09090b", - rgb: "rgb(9,9,11)", - hsl: "hsl(240,10%,3.9%)", - }, - ], - neutral: [ - { - scale: 50, - hex: "#fafafa", - rgb: "rgb(250,250,250)", - hsl: "hsl(0,0%,98%)", - }, - { - scale: 100, - hex: "#f5f5f5", - rgb: "rgb(245,245,245)", - hsl: "hsl(0,0%,96.1%)", - }, - { - scale: 200, - hex: "#e5e5e5", - rgb: "rgb(229,229,229)", - hsl: "hsl(0,0%,89.8%)", - }, - { - scale: 300, - hex: "#d4d4d4", - rgb: "rgb(212,212,212)", - hsl: "hsl(0,0%,83.1%)", - }, - { - scale: 400, - hex: "#a3a3a3", - rgb: "rgb(163,163,163)", - hsl: "hsl(0,0%,63.9%)", - }, - { - scale: 500, - hex: "#737373", - rgb: "rgb(115,115,115)", - hsl: "hsl(0,0%,45.1%)", - }, - { - scale: 600, - hex: "#525252", - rgb: "rgb(82,82,82)", - hsl: "hsl(0,0%,32.2%)", - }, - { - scale: 700, - hex: "#404040", - rgb: "rgb(64,64,64)", - hsl: "hsl(0,0%,25.1%)", - }, - { - scale: 800, - hex: "#262626", - rgb: "rgb(38,38,38)", - hsl: "hsl(0,0%,14.9%)", - }, - { - scale: 900, - hex: "#171717", - rgb: "rgb(23,23,23)", - hsl: "hsl(0,0%,9%)", - }, - { - scale: 950, - hex: "#0a0a0a", - rgb: "rgb(10,10,10)", - hsl: "hsl(0,0%,3.9%)", - }, - ], - stone: [ - { - scale: 50, - hex: "#fafaf9", - rgb: "rgb(250,250,249)", - hsl: "hsl(60,9.1%,97.8%)", - }, - { - scale: 100, - hex: "#f5f5f4", - rgb: "rgb(245,245,244)", - hsl: "hsl(60,4.8%,95.9%)", - }, - { - scale: 200, - hex: "#e7e5e4", - rgb: "rgb(231,229,228)", - hsl: "hsl(20,5.9%,90%)", - }, - { - scale: 300, - hex: "#d6d3d1", - rgb: "rgb(214,211,209)", - hsl: "hsl(24,5.7%,82.9%)", - }, - { - scale: 400, - hex: "#a8a29e", - rgb: "rgb(168,162,158)", - hsl: "hsl(24,5.4%,63.9%)", - }, - { - scale: 500, - hex: "#78716c", - rgb: "rgb(120,113,108)", - hsl: "hsl(25,5.3%,44.7%)", - }, - { - scale: 600, - hex: "#57534e", - rgb: "rgb(87,83,78)", - hsl: "hsl(33.3,5.5%,32.4%)", - }, - { - scale: 700, - hex: "#44403c", - rgb: "rgb(68,64,60)", - hsl: "hsl(30,6.3%,25.1%)", - }, - { - scale: 800, - hex: "#292524", - rgb: "rgb(41,37,36)", - hsl: "hsl(12,6.5%,15.1%)", - }, - { - scale: 900, - hex: "#1c1917", - rgb: "rgb(28,25,23)", - hsl: "hsl(24,9.8%,10%)", - }, - { - scale: 950, - hex: "#0c0a09", - rgb: "rgb(12,10,9)", - hsl: "hsl(20,14.3%,4.1%)", - }, - ], - red: [ - { - scale: 50, - hex: "#fef2f2", - rgb: "rgb(254,242,242)", - hsl: "hsl(0,85.7%,97.3%)", - }, - { - scale: 100, - hex: "#fee2e2", - rgb: "rgb(254,226,226)", - hsl: "hsl(0,93.3%,94.1%)", - }, - { - scale: 200, - hex: "#fecaca", - rgb: "rgb(254,202,202)", - hsl: "hsl(0,96.3%,89.4%)", - }, - { - scale: 300, - hex: "#fca5a5", - rgb: "rgb(252,165,165)", - hsl: "hsl(0,93.5%,81.8%)", - }, - { - scale: 400, - hex: "#f87171", - rgb: "rgb(248,113,113)", - hsl: "hsl(0,90.6%,70.8%)", - }, - { - scale: 500, - hex: "#ef4444", - rgb: "rgb(239,68,68)", - hsl: "hsl(0,84.2%,60.2%)", - }, - { - scale: 600, - hex: "#dc2626", - rgb: "rgb(220,38,38)", - hsl: "hsl(0,72.2%,50.6%)", - }, - { - scale: 700, - hex: "#b91c1c", - rgb: "rgb(185,28,28)", - hsl: "hsl(0,73.7%,41.8%)", - }, - { - scale: 800, - hex: "#991b1b", - rgb: "rgb(153,27,27)", - hsl: "hsl(0,70%,35.3%)", - }, - { - scale: 900, - hex: "#7f1d1d", - rgb: "rgb(127,29,29)", - hsl: "hsl(0,62.8%,30.6%)", - }, - { - scale: 950, - hex: "#450a0a", - rgb: "rgb(69,10,10)", - hsl: "hsl(0,74.7%,15.5%)", - }, - ], - orange: [ - { - scale: 50, - hex: "#fff7ed", - rgb: "rgb(255,247,237)", - hsl: "hsl(33.3,100%,96.5%)", - }, - { - scale: 100, - hex: "#ffedd5", - rgb: "rgb(255,237,213)", - hsl: "hsl(34.3,100%,91.8%)", - }, - { - scale: 200, - hex: "#fed7aa", - rgb: "rgb(254,215,170)", - hsl: "hsl(32.1,97.7%,83.1%)", - }, - { - scale: 300, - hex: "#fdba74", - rgb: "rgb(253,186,116)", - hsl: "hsl(30.7,97.2%,72.4%)", - }, - { - scale: 400, - hex: "#fb923c", - rgb: "rgb(251,146,60)", - hsl: "hsl(27,96%,61%)", - }, - { - scale: 500, - hex: "#f97316", - rgb: "rgb(249,115,22)", - hsl: "hsl(24.6,95%,53.1%)", - }, - { - scale: 600, - hex: "#ea580c", - rgb: "rgb(234,88,12)", - hsl: "hsl(20.5,90.2%,48.2%)", - }, - { - scale: 700, - hex: "#c2410c", - rgb: "rgb(194,65,12)", - hsl: "hsl(17.5,88.3%,40.4%)", - }, - { - scale: 800, - hex: "#9a3412", - rgb: "rgb(154,52,18)", - hsl: "hsl(15,79.1%,33.7%)", - }, - { - scale: 900, - hex: "#7c2d12", - rgb: "rgb(124,45,18)", - hsl: "hsl(15.3,74.6%,27.8%)", - }, - { - scale: 950, - hex: "#431407", - rgb: "rgb(67,20,7)", - hsl: "hsl(13,81.1%,14.5%)", - }, - ], - amber: [ - { - scale: 50, - hex: "#fffbeb", - rgb: "rgb(255,251,235)", - hsl: "hsl(48,100%,96.1%)", - }, - { - scale: 100, - hex: "#fef3c7", - rgb: "rgb(254,243,199)", - hsl: "hsl(48,96.5%,88.8%)", - }, - { - scale: 200, - hex: "#fde68a", - rgb: "rgb(253,230,138)", - hsl: "hsl(48,96.6%,76.7%)", - }, - { - scale: 300, - hex: "#fcd34d", - rgb: "rgb(252,211,77)", - hsl: "hsl(45.9,96.7%,64.5%)", - }, - { - scale: 400, - hex: "#fbbf24", - rgb: "rgb(251,191,36)", - hsl: "hsl(43.3,96.4%,56.3%)", - }, - { - scale: 500, - hex: "#f59e0b", - rgb: "rgb(245,158,11)", - hsl: "hsl(37.7,92.1%,50.2%)", - }, - { - scale: 600, - hex: "#d97706", - rgb: "rgb(217,119,6)", - hsl: "hsl(32.1,94.6%,43.7%)", - }, - { - scale: 700, - hex: "#b45309", - rgb: "rgb(180,83,9)", - hsl: "hsl(26,90.5%,37.1%)", - }, - { - scale: 800, - hex: "#92400e", - rgb: "rgb(146,64,14)", - hsl: "hsl(22.7,82.5%,31.4%)", - }, - { - scale: 900, - hex: "#78350f", - rgb: "rgb(120,53,15)", - hsl: "hsl(21.7,77.8%,26.5%)", - }, - { - scale: 950, - hex: "#451a03", - rgb: "rgb(69,26,3)", - hsl: "hsl(20.9,91.7%,14.1%)", - }, - ], - yellow: [ - { - scale: 50, - hex: "#fefce8", - rgb: "rgb(254,252,232)", - hsl: "hsl(54.5,91.7%,95.3%)", - }, - { - scale: 100, - hex: "#fef9c3", - rgb: "rgb(254,249,195)", - hsl: "hsl(54.9,96.7%,88%)", - }, - { - scale: 200, - hex: "#fef08a", - rgb: "rgb(254,240,138)", - hsl: "hsl(52.8,98.3%,76.9%)", - }, - { - scale: 300, - hex: "#fde047", - rgb: "rgb(253,224,71)", - hsl: "hsl(50.4,97.8%,63.5%)", - }, - { - scale: 400, - hex: "#facc15", - rgb: "rgb(250,204,21)", - hsl: "hsl(47.9,95.8%,53.1%)", - }, - { - scale: 500, - hex: "#eab308", - rgb: "rgb(234,179,8)", - hsl: "hsl(45.4,93.4%,47.5%)", - }, - { - scale: 600, - hex: "#ca8a04", - rgb: "rgb(202,138,4)", - hsl: "hsl(40.6,96.1%,40.4%)", - }, - { - scale: 700, - hex: "#a16207", - rgb: "rgb(161,98,7)", - hsl: "hsl(35.5,91.7%,32.9%)", - }, - { - scale: 800, - hex: "#854d0e", - rgb: "rgb(133,77,14)", - hsl: "hsl(31.8,81%,28.8%)", - }, - { - scale: 900, - hex: "#713f12", - rgb: "rgb(113,63,18)", - hsl: "hsl(28.4,72.5%,25.7%)", - }, - { - scale: 950, - hex: "#422006", - rgb: "rgb(66,32,6)", - hsl: "hsl(26,83.3%,14.1%)", - }, - ], - lime: [ - { - scale: 50, - hex: "#f7fee7", - rgb: "rgb(247,254,231)", - hsl: "hsl(78.3,92%,95.1%)", - }, - { - scale: 100, - hex: "#ecfccb", - rgb: "rgb(236,252,203)", - hsl: "hsl(79.6,89.1%,89.2%)", - }, - { - scale: 200, - hex: "#d9f99d", - rgb: "rgb(217,249,157)", - hsl: "hsl(80.9,88.5%,79.6%)", - }, - { - scale: 300, - hex: "#bef264", - rgb: "rgb(190,242,100)", - hsl: "hsl(82,84.5%,67.1%)", - }, - { - scale: 400, - hex: "#a3e635", - rgb: "rgb(163,230,53)", - hsl: "hsl(82.7,78%,55.5%)", - }, - { - scale: 500, - hex: "#84cc16", - rgb: "rgb(132,204,22)", - hsl: "hsl(83.7,80.5%,44.3%)", - }, - { - scale: 600, - hex: "#65a30d", - rgb: "rgb(101,163,13)", - hsl: "hsl(84.8,85.2%,34.5%)", - }, - { - scale: 700, - hex: "#4d7c0f", - rgb: "rgb(77,124,15)", - hsl: "hsl(85.9,78.4%,27.3%)", - }, - { - scale: 800, - hex: "#3f6212", - rgb: "rgb(63,98,18)", - hsl: "hsl(86.3,69%,22.7%)", - }, - { - scale: 900, - hex: "#365314", - rgb: "rgb(54,83,20)", - hsl: "hsl(87.6,61.2%,20.2%)", - }, - { - scale: 950, - hex: "#1a2e05", - rgb: "rgb(26,46,5)", - hsl: "hsl(89.3,80.4%,10%)", - }, - ], - green: [ - { - scale: 50, - hex: "#f0fdf4", - rgb: "rgb(240,253,244)", - hsl: "hsl(138.5,76.5%,96.7%)", - }, - { - scale: 100, - hex: "#dcfce7", - rgb: "rgb(220,252,231)", - hsl: "hsl(140.6,84.2%,92.5%)", - }, - { - scale: 200, - hex: "#bbf7d0", - rgb: "rgb(187,247,208)", - hsl: "hsl(141,78.9%,85.1%)", - }, - { - scale: 300, - hex: "#86efac", - rgb: "rgb(134,239,172)", - hsl: "hsl(141.7,76.6%,73.1%)", - }, - { - scale: 400, - hex: "#4ade80", - rgb: "rgb(74,222,128)", - hsl: "hsl(141.9,69.2%,58%)", - }, - { - scale: 500, - hex: "#22c55e", - rgb: "rgb(34,197,94)", - hsl: "hsl(142.1,70.6%,45.3%)", - }, - { - scale: 600, - hex: "#16a34a", - rgb: "rgb(22,163,74)", - hsl: "hsl(142.1,76.2%,36.3%)", - }, - { - scale: 700, - hex: "#15803d", - rgb: "rgb(21,128,61)", - hsl: "hsl(142.4,71.8%,29.2%)", - }, - { - scale: 800, - hex: "#166534", - rgb: "rgb(22,101,52)", - hsl: "hsl(142.8,64.2%,24.1%)", - }, - { - scale: 900, - hex: "#14532d", - rgb: "rgb(20,83,45)", - hsl: "hsl(143.8,61.2%,20.2%)", - }, - { - scale: 950, - hex: "#052e16", - rgb: "rgb(5,46,22)", - hsl: "hsl(144.9,80.4%,10%)", - }, - ], - emerald: [ - { - scale: 50, - hex: "#ecfdf5", - rgb: "rgb(236,253,245)", - hsl: "hsl(151.8,81%,95.9%)", - }, - { - scale: 100, - hex: "#d1fae5", - rgb: "rgb(209,250,229)", - hsl: "hsl(149.3,80.4%,90%)", - }, - { - scale: 200, - hex: "#a7f3d0", - rgb: "rgb(167,243,208)", - hsl: "hsl(152.4,76%,80.4%)", - }, - { - scale: 300, - hex: "#6ee7b7", - rgb: "rgb(110,231,183)", - hsl: "hsl(156.2,71.6%,66.9%)", - }, - { - scale: 400, - hex: "#34d399", - rgb: "rgb(52,211,153)", - hsl: "hsl(158.1,64.4%,51.6%)", - }, - { - scale: 500, - hex: "#10b981", - rgb: "rgb(16,185,129)", - hsl: "hsl(160.1,84.1%,39.4%)", - }, - { - scale: 600, - hex: "#059669", - rgb: "rgb(5,150,105)", - hsl: "hsl(161.4,93.5%,30.4%)", - }, - { - scale: 700, - hex: "#047857", - rgb: "rgb(4,120,87)", - hsl: "hsl(162.9,93.5%,24.3%)", - }, - { - scale: 800, - hex: "#065f46", - rgb: "rgb(6,95,70)", - hsl: "hsl(163.1,88.1%,19.8%)", - }, - { - scale: 900, - hex: "#064e3b", - rgb: "rgb(6,78,59)", - hsl: "hsl(164.2,85.7%,16.5%)", - }, - { - scale: 950, - hex: "#022c22", - rgb: "rgb(2,44,34)", - hsl: "hsl(165.7,91.3%,9%)", - }, - ], - teal: [ - { - scale: 50, - hex: "#f0fdfa", - rgb: "rgb(240,253,250)", - hsl: "hsl(166.2,76.5%,96.7%)", - }, - { - scale: 100, - hex: "#ccfbf1", - rgb: "rgb(204,251,241)", - hsl: "hsl(167.2,85.5%,89.2%)", - }, - { - scale: 200, - hex: "#99f6e4", - rgb: "rgb(153,246,228)", - hsl: "hsl(168.4,83.8%,78.2%)", - }, - { - scale: 300, - hex: "#5eead4", - rgb: "rgb(94,234,212)", - hsl: "hsl(170.6,76.9%,64.3%)", - }, - { - scale: 400, - hex: "#2dd4bf", - rgb: "rgb(45,212,191)", - hsl: "hsl(172.5,66%,50.4%)", - }, - { - scale: 500, - hex: "#14b8a6", - rgb: "rgb(20,184,166)", - hsl: "hsl(173.4,80.4%,40%)", - }, - { - scale: 600, - hex: "#0d9488", - rgb: "rgb(13,148,136)", - hsl: "hsl(174.7,83.9%,31.6%)", - }, - { - scale: 700, - hex: "#0f766e", - rgb: "rgb(15,118,110)", - hsl: "hsl(175.3,77.4%,26.1%)", - }, - { - scale: 800, - hex: "#115e59", - rgb: "rgb(17,94,89)", - hsl: "hsl(176.1,69.4%,21.8%)", - }, - { - scale: 900, - hex: "#134e4a", - rgb: "rgb(19,78,74)", - hsl: "hsl(175.9,60.8%,19%)", - }, - { - scale: 950, - hex: "#042f2e", - rgb: "rgb(4,47,46)", - hsl: "hsl(178.6,84.3%,10%)", - }, - ], - cyan: [ - { - scale: 50, - hex: "#ecfeff", - rgb: "rgb(236,254,255)", - hsl: "hsl(183.2,100%,96.3%)", - }, - { - scale: 100, - hex: "#cffafe", - rgb: "rgb(207,250,254)", - hsl: "hsl(185.1,95.9%,90.4%)", - }, - { - scale: 200, - hex: "#a5f3fc", - rgb: "rgb(165,243,252)", - hsl: "hsl(186.2,93.5%,81.8%)", - }, - { - scale: 300, - hex: "#67e8f9", - rgb: "rgb(103,232,249)", - hsl: "hsl(187,92.4%,69%)", - }, - { - scale: 400, - hex: "#22d3ee", - rgb: "rgb(34,211,238)", - hsl: "hsl(187.9,85.7%,53.3%)", - }, - { - scale: 500, - hex: "#06b6d4", - rgb: "rgb(6,182,212)", - hsl: "hsl(188.7,94.5%,42.7%)", - }, - { - scale: 600, - hex: "#0891b2", - rgb: "rgb(8,145,178)", - hsl: "hsl(191.6,91.4%,36.5%)", - }, - { - scale: 700, - hex: "#0e7490", - rgb: "rgb(14,116,144)", - hsl: "hsl(192.9,82.3%,31%)", - }, - { - scale: 800, - hex: "#155e75", - rgb: "rgb(21,94,117)", - hsl: "hsl(194.4,69.6%,27.1%)", - }, - { - scale: 900, - hex: "#164e63", - rgb: "rgb(22,78,99)", - hsl: "hsl(196.4,63.6%,23.7%)", - }, - { - scale: 950, - hex: "#083344", - rgb: "rgb(8,51,68)", - hsl: "hsl(197,78.9%,14.9%)", - }, - ], - sky: [ - { - scale: 50, - hex: "#f0f9ff", - rgb: "rgb(240,249,255)", - hsl: "hsl(204,100%,97.1%)", - }, - { - scale: 100, - hex: "#e0f2fe", - rgb: "rgb(224,242,254)", - hsl: "hsl(204,93.8%,93.7%)", - }, - { - scale: 200, - hex: "#bae6fd", - rgb: "rgb(186,230,253)", - hsl: "hsl(200.6,94.4%,86.1%)", - }, - { - scale: 300, - hex: "#7dd3fc", - rgb: "rgb(125,211,252)", - hsl: "hsl(199.4,95.5%,73.9%)", - }, - { - scale: 400, - hex: "#38bdf8", - rgb: "rgb(56,189,248)", - hsl: "hsl(198.4,93.2%,59.6%)", - }, - { - scale: 500, - hex: "#0ea5e9", - rgb: "rgb(14,165,233)", - hsl: "hsl(198.6,88.7%,48.4%)", - }, - { - scale: 600, - hex: "#0284c7", - rgb: "rgb(2,132,199)", - hsl: "hsl(200.4,98%,39.4%)", - }, - { - scale: 700, - hex: "#0369a1", - rgb: "rgb(3,105,161)", - hsl: "hsl(201.3,96.3%,32.2%)", - }, - { - scale: 800, - hex: "#075985", - rgb: "rgb(7,89,133)", - hsl: "hsl(201,90%,27.5%)", - }, - { - scale: 900, - hex: "#0c4a6e", - rgb: "rgb(12,74,110)", - hsl: "hsl(202,80.3%,23.9%)", - }, - { - scale: 950, - hex: "#082f49", - rgb: "rgb(8,47,73)", - hsl: "hsl(204,80.2%,15.9%)", - }, - ], - blue: [ - { - scale: 50, - hex: "#eff6ff", - rgb: "rgb(239,246,255)", - hsl: "hsl(213.8,100%,96.9%)", - }, - { - scale: 100, - hex: "#dbeafe", - rgb: "rgb(219,234,254)", - hsl: "hsl(214.3,94.6%,92.7%)", - }, - { - scale: 200, - hex: "#bfdbfe", - rgb: "rgb(191,219,254)", - hsl: "hsl(213.3,96.9%,87.3%)", - }, - { - scale: 300, - hex: "#93c5fd", - rgb: "rgb(147,197,253)", - hsl: "hsl(211.7,96.4%,78.4%)", - }, - { - scale: 400, - hex: "#60a5fa", - rgb: "rgb(96,165,250)", - hsl: "hsl(213.1,93.9%,67.8%)", - }, - { - scale: 500, - hex: "#3b82f6", - rgb: "rgb(59,130,246)", - hsl: "hsl(217.2,91.2%,59.8%)", - }, - { - scale: 600, - hex: "#2563eb", - rgb: "rgb(37,99,235)", - hsl: "hsl(221.2,83.2%,53.3%)", - }, - { - scale: 700, - hex: "#1d4ed8", - rgb: "rgb(29,78,216)", - hsl: "hsl(224.3,76.3%,48%)", - }, - { - scale: 800, - hex: "#1e40af", - rgb: "rgb(30,64,175)", - hsl: "hsl(225.9,70.7%,40.2%)", - }, - { - scale: 900, - hex: "#1e3a8a", - rgb: "rgb(30,58,138)", - hsl: "hsl(224.4,64.3%,32.9%)", - }, - { - scale: 950, - hex: "#172554", - rgb: "rgb(23,37,84)", - hsl: "hsl(226.2,57%,21%)", - }, - ], - indigo: [ - { - scale: 50, - hex: "#eef2ff", - rgb: "rgb(238,242,255)", - hsl: "hsl(225.9,100%,96.7%)", - }, - { - scale: 100, - hex: "#e0e7ff", - rgb: "rgb(224,231,255)", - hsl: "hsl(226.5,100%,93.9%)", - }, - { - scale: 200, - hex: "#c7d2fe", - rgb: "rgb(199,210,254)", - hsl: "hsl(228,96.5%,88.8%)", - }, - { - scale: 300, - hex: "#a5b4fc", - rgb: "rgb(165,180,252)", - hsl: "hsl(229.7,93.5%,81.8%)", - }, - { - scale: 400, - hex: "#818cf8", - rgb: "rgb(129,140,248)", - hsl: "hsl(234.5,89.5%,73.9%)", - }, - { - scale: 500, - hex: "#6366f1", - rgb: "rgb(99,102,241)", - hsl: "hsl(238.7,83.5%,66.7%)", - }, - { - scale: 600, - hex: "#4f46e5", - rgb: "rgb(79,70,229)", - hsl: "hsl(243.4,75.4%,58.6%)", - }, - { - scale: 700, - hex: "#4338ca", - rgb: "rgb(67,56,202)", - hsl: "hsl(244.5,57.9%,50.6%)", - }, - { - scale: 800, - hex: "#3730a3", - rgb: "rgb(55,48,163)", - hsl: "hsl(243.7,54.5%,41.4%)", - }, - { - scale: 900, - hex: "#312e81", - rgb: "rgb(49,46,129)", - hsl: "hsl(242.2,47.4%,34.3%)", - }, - { - scale: 950, - hex: "#1e1b4b", - rgb: "rgb(30,27,75)", - hsl: "hsl(243.8,47.1%,20%)", - }, - ], - violet: [ - { - scale: 50, - hex: "#f5f3ff", - rgb: "rgb(245,243,255)", - hsl: "hsl(250,100%,97.6%)", - }, - { - scale: 100, - hex: "#ede9fe", - rgb: "rgb(237,233,254)", - hsl: "hsl(251.4,91.3%,95.5%)", - }, - { - scale: 200, - hex: "#ddd6fe", - rgb: "rgb(221,214,254)", - hsl: "hsl(250.5,95.2%,91.8%)", - }, - { - scale: 300, - hex: "#c4b5fd", - rgb: "rgb(196,181,253)", - hsl: "hsl(252.5,94.7%,85.1%)", - }, - { - scale: 400, - hex: "#a78bfa", - rgb: "rgb(167,139,250)", - hsl: "hsl(255.1,91.7%,76.3%)", - }, - { - scale: 500, - hex: "#8b5cf6", - rgb: "rgb(139,92,246)", - hsl: "hsl(258.3,89.5%,66.3%)", - }, - { - scale: 600, - hex: "#7c3aed", - rgb: "rgb(124,58,237)", - hsl: "hsl(262.1,83.3%,57.8%)", - }, - { - scale: 700, - hex: "#6d28d9", - rgb: "rgb(109,40,217)", - hsl: "hsl(263.4,70%,50.4%)", - }, - { - scale: 800, - hex: "#5b21b6", - rgb: "rgb(91,33,182)", - hsl: "hsl(263.4,69.3%,42.2%)", - }, - { - scale: 900, - hex: "#4c1d95", - rgb: "rgb(76,29,149)", - hsl: "hsl(263.5,67.4%,34.9%)", - }, - { - scale: 950, - hex: "#1e1b4b", - rgb: "rgb(46,16,101)", - hsl: "hsl(261.2,72.6%,22.9%)", - }, - ], - purple: [ - { - scale: 50, - hex: "#faf5ff", - rgb: "rgb(250,245,255)", - hsl: "hsl(270,100%,98%)", - }, - { - scale: 100, - hex: "#f3e8ff", - rgb: "rgb(243,232,255)", - hsl: "hsl(268.7,100%,95.5%)", - }, - { - scale: 200, - hex: "#e9d5ff", - rgb: "rgb(233,213,255)", - hsl: "hsl(268.6,100%,91.8%)", - }, - { - scale: 300, - hex: "#d8b4fe", - rgb: "rgb(216,180,254)", - hsl: "hsl(269.2,97.4%,85.1%)", - }, - { - scale: 400, - hex: "#c084fc", - rgb: "rgb(192,132,252)", - hsl: "hsl(270,95.2%,75.3%)", - }, - { - scale: 500, - hex: "#a855f7", - rgb: "rgb(168,85,247)", - hsl: "hsl(270.7,91%,65.1%)", - }, - { - scale: 600, - hex: "#9333ea", - rgb: "rgb(147,51,234)", - hsl: "hsl(271.5,81.3%,55.9%)", - }, - { - scale: 700, - hex: "#7e22ce", - rgb: "rgb(126,34,206)", - hsl: "hsl(272.1,71.7%,47.1%)", - }, - { - scale: 800, - hex: "#6b21a8", - rgb: "rgb(107,33,168)", - hsl: "hsl(272.9,67.2%,39.4%)", - }, - { - scale: 900, - hex: "#581c87", - rgb: "rgb(88,28,135)", - hsl: "hsl(273.6,65.6%,32%)", - }, - { - scale: 950, - hex: "#3b0764", - rgb: "rgb(59,7,100)", - hsl: "hsl(273.5,86.9%,21%)", - }, - ], - fuchsia: [ - { - scale: 50, - hex: "#fdf4ff", - rgb: "rgb(253,244,255)", - hsl: "hsl(289.1,100%,97.8%)", - }, - { - scale: 100, - hex: "#fae8ff", - rgb: "rgb(250,232,255)", - hsl: "hsl(287,100%,95.5%)", - }, - { - scale: 200, - hex: "#f5d0fe", - rgb: "rgb(245,208,254)", - hsl: "hsl(288.3,95.8%,90.6%)", - }, - { - scale: 300, - hex: "#f0abfc", - rgb: "rgb(240,171,252)", - hsl: "hsl(291.1,93.1%,82.9%)", - }, - { - scale: 400, - hex: "#e879f9", - rgb: "rgb(232,121,249)", - hsl: "hsl(292,91.4%,72.5%)", - }, - { - scale: 500, - hex: "#d946ef", - rgb: "rgb(217,70,239)", - hsl: "hsl(292.2,84.1%,60.6%)", - }, - { - scale: 600, - hex: "#c026d3", - rgb: "rgb(192,38,211)", - hsl: "hsl(293.4,69.5%,48.8%)", - }, - { - scale: 700, - hex: "#a21caf", - rgb: "rgb(162,28,175)", - hsl: "hsl(294.7,72.4%,39.8%)", - }, - { - scale: 800, - hex: "#86198f", - rgb: "rgb(134,25,143)", - hsl: "hsl(295.4,70.2%,32.9%)", - }, - { - scale: 900, - hex: "#701a75", - rgb: "rgb(112,26,117)", - hsl: "hsl(296.7,63.6%,28%)", - }, - { - scale: 950, - hex: "#4a044e", - rgb: "rgb(74,4,78)", - hsl: "hsl(296.8,90.2%,16.1%)", - }, - ], - pink: [ - { - scale: 50, - hex: "#fdf2f8", - rgb: "rgb(253,242,248)", - hsl: "hsl(327.3,73.3%,97.1%)", - }, - { - scale: 100, - hex: "#fce7f3", - rgb: "rgb(252,231,243)", - hsl: "hsl(325.7,77.8%,94.7%)", - }, - { - scale: 200, - hex: "#fbcfe8", - rgb: "rgb(251,207,232)", - hsl: "hsl(325.9,84.6%,89.8%)", - }, - { - scale: 300, - hex: "#f9a8d4", - rgb: "rgb(249,168,212)", - hsl: "hsl(327.4,87.1%,81.8%)", - }, - { - scale: 400, - hex: "#f472b6", - rgb: "rgb(244,114,182)", - hsl: "hsl(328.6,85.5%,70.2%)", - }, - { - scale: 500, - hex: "#ec4899", - rgb: "rgb(236,72,153)", - hsl: "hsl(330.4,81.2%,60.4%)", - }, - { - scale: 600, - hex: "#db2777", - rgb: "rgb(219,39,119)", - hsl: "hsl(333.3,71.4%,50.6%)", - }, - { - scale: 700, - hex: "#be185d", - rgb: "rgb(190,24,93)", - hsl: "hsl(335.1,77.6%,42%)", - }, - { - scale: 800, - hex: "#9d174d", - rgb: "rgb(157,23,77)", - hsl: "hsl(335.8,74.4%,35.3%)", - }, - { - scale: 900, - hex: "#831843", - rgb: "rgb(131,24,67)", - hsl: "hsl(335.9,69%,30.4%)", - }, - { - scale: 950, - hex: "#500724", - rgb: "rgb(80,7,36)", - hsl: "hsl(336.2,83.9%,17.1%)", - }, - ], - rose: [ - { - scale: 50, - hex: "#fff1f2", - rgb: "rgb(255,241,242)", - hsl: "hsl(355.7,100%,97.3%)", - }, - { - scale: 100, - hex: "#ffe4e6", - rgb: "rgb(255,228,230)", - hsl: "hsl(355.6,100%,94.7%)", - }, - { - scale: 200, - hex: "#fecdd3", - rgb: "rgb(254,205,211)", - hsl: "hsl(352.7,96.1%,90%)", - }, - { - scale: 300, - hex: "#fda4af", - rgb: "rgb(253,164,175)", - hsl: "hsl(352.6,95.7%,81.8%)", - }, - { - scale: 400, - hex: "#fb7185", - rgb: "rgb(251,113,133)", - hsl: "hsl(351.3,94.5%,71.4%)", - }, - { - scale: 500, - hex: "#f43f5e", - rgb: "rgb(244,63,94)", - hsl: "hsl(349.7,89.2%,60.2%)", - }, - { - scale: 600, - hex: "#e11d48", - rgb: "rgb(225,29,72)", - hsl: "hsl(346.8,77.2%,49.8%)", - }, - { - scale: 700, - hex: "#be123c", - rgb: "rgb(190,18,60)", - hsl: "hsl(345.3,82.7%,40.8%)", - }, - { - scale: 800, - hex: "#9f1239", - rgb: "rgb(159,18,57)", - hsl: "hsl(343.4,79.7%,34.7%)", - }, - { - scale: 900, - hex: "#881337", - rgb: "rgb(136,19,55)", - hsl: "hsl(341.5,75.5%,30.4%)", - }, - { - scale: 950, - hex: "#4c0519", - rgb: "rgb(76,5,25)", - hsl: "hsl(343.1,87.7%,15.9%)", - }, - ], -}; - -export const colorMapping = { - light: { - background: "white", - foreground: "{{base}}-950", - card: "white", - "card-foreground": "{{base}}-950", - popover: "white", - "popover-foreground": "{{base}}-950", - primary: "{{base}}-900", - "primary-foreground": "{{base}}-50", - secondary: "{{base}}-100", - "secondary-foreground": "{{base}}-900", - muted: "{{base}}-100", - "muted-foreground": "{{base}}-500", - accent: "{{base}}-100", - "accent-foreground": "{{base}}-900", - destructive: "red-500", - "destructive-foreground": "{{base}}-50", - border: "{{base}}-200", - input: "{{base}}-200", - ring: "{{base}}-950", - "chart-1": "12 76% 61%", - "chart-2": "173 58% 39%", - "chart-3": "197 37% 24%", - "chart-4": "43 74% 66%", - "chart-5": "27 87% 67%", - }, - dark: { - background: "{{base}}-950", - foreground: "{{base}}-50", - card: "{{base}}-950", - "card-foreground": "{{base}}-50", - popover: "{{base}}-950", - "popover-foreground": "{{base}}-50", - primary: "{{base}}-50", - "primary-foreground": "{{base}}-900", - secondary: "{{base}}-800", - "secondary-foreground": "{{base}}-50", - muted: "{{base}}-800", - "muted-foreground": "{{base}}-400", - accent: "{{base}}-800", - "accent-foreground": "{{base}}-50", - destructive: "red-900", - "destructive-foreground": "{{base}}-50", - border: "{{base}}-800", - input: "{{base}}-800", - ring: "{{base}}-300", - "chart-1": "220 70% 50%", - "chart-2": "160 60% 45%", - "chart-3": "30 80% 55%", - "chart-4": "280 65% 60%", - "chart-5": "340 75% 55%", - }, -} as const; diff --git a/registry/registry-examples.ts b/registry/registry-examples.ts index b8b859c22..860c0fb3c 100644 --- a/registry/registry-examples.ts +++ b/registry/registry-examples.ts @@ -1,194 +1,307 @@ -import { Registry } from "@/registry/schema"; +import { type Registry } from "shadcn/registry"; -export const examples: Registry = [ +export const examples: Registry["items"] = [ { name: "magic-card-demo", type: "registry:example", + title: "Magic Card Demo", + description: + "Example showing a spotlight effect that follows your mouse cursor and highlights borders on hover.", registryDependencies: ["magic-card"], - files: ["example/magic-card-demo.tsx"], + files: [{ path: "example/magic-card-demo.tsx", type: "registry:example" }], }, { name: "android-demo", type: "registry:example", + title: "Android Demo", + description: "Example showing a mockup of an Android device.", registryDependencies: ["android"], - files: ["example/android-demo.tsx"], + files: [{ path: "example/android-demo.tsx", type: "registry:example" }], }, { name: "android-demo-2", type: "registry:example", + title: "Android Demo 2", + description: "Second example showing a mockup of an Android device.", registryDependencies: ["android"], - files: ["example/android-demo-2.tsx"], + files: [{ path: "example/android-demo-2.tsx", type: "registry:example" }], }, { name: "android-demo-3", type: "registry:example", + title: "Android Demo 3", + description: "Third example showing a mockup of an Android device.", registryDependencies: ["android"], - files: ["example/android-demo-3.tsx"], + files: [{ path: "example/android-demo-3.tsx", type: "registry:example" }], }, { name: "warp-background-demo", type: "registry:example", + title: "Warp Background Demo", + description: + "Example showing a card with a time warping background effect.", registryDependencies: ["warp-background"], - files: ["example/warp-background-demo.tsx"], + files: [ + { path: "example/warp-background-demo.tsx", type: "registry:example" }, + ], }, { name: "line-shadow-text-demo", type: "registry:example", + title: "Line Shadow Text Demo", + description: "Example showing a text component with a moving line shadow.", registryDependencies: ["line-shadow-text"], - files: ["example/line-shadow-text-demo.tsx"], + files: [ + { path: "example/line-shadow-text-demo.tsx", type: "registry:example" }, + ], }, { name: "aurora-text-demo", type: "registry:example", + title: "Aurora Text Demo", + description: "Example showing a beautiful aurora text effect.", registryDependencies: ["aurora-text"], - files: ["example/aurora-text-demo.tsx"], - }, - { - name: "terminal-demo", - type: "registry:example", - registryDependencies: ["terminal"], - files: ["example/terminal-demo.tsx"], + files: [{ path: "example/aurora-text-demo.tsx", type: "registry:example" }], }, { name: "morphing-text-demo", type: "registry:example", + title: "Morphing Text Demo", + description: "Example showing a dynamic text morphing component.", registryDependencies: ["morphing-text"], - files: ["example/morphing-text-demo.tsx"], + files: [ + { path: "example/morphing-text-demo.tsx", type: "registry:example" }, + ], }, { name: "scroll-progress-demo", type: "registry:example", + title: "Scroll Progress Demo", + description: "Example showing animated scroll progress for your pages.", registryDependencies: ["scroll-progress"], - files: ["example/scroll-progress-demo.tsx"], + files: [ + { path: "example/scroll-progress-demo.tsx", type: "registry:example" }, + ], }, { name: "neon-gradient-card-demo", type: "registry:example", - files: ["example/neon-gradient-card-demo.tsx"], + title: "Neon Gradient Card Demo", + description: "Example showing a beautiful neon card effect.", + files: [ + { path: "example/neon-gradient-card-demo.tsx", type: "registry:example" }, + ], }, { name: "meteors-demo", type: "registry:example", + title: "Meteors Demo", + description: "Example showing a meteor shower effect.", registryDependencies: ["meteors"], - files: ["example/meteors-demo.tsx"], + files: [{ path: "example/meteors-demo.tsx", type: "registry:example" }], }, { name: "grid-pattern-demo", type: "registry:example", + title: "Grid Pattern Demo", + description: "Example showing a background grid pattern made with SVGs.", registryDependencies: ["grid-pattern"], - files: ["example/grid-pattern-demo.tsx"], + files: [ + { path: "example/grid-pattern-demo.tsx", type: "registry:example" }, + ], }, { name: "grid-pattern-linear-gradient", type: "registry:example", + title: "Grid Pattern Linear Gradient", + description: "Example showing a grid pattern with linear gradient effects.", registryDependencies: ["grid-pattern"], - files: ["example/grid-pattern-linear-gradient.tsx"], + files: [ + { + path: "example/grid-pattern-linear-gradient.tsx", + type: "registry:example", + }, + ], }, { name: "grid-pattern-dashed", type: "registry:example", + title: "Grid Pattern Dashed", + description: "Example showing a dashed grid pattern.", registryDependencies: ["grid-pattern"], - files: ["example/grid-pattern-dashed.tsx"], + files: [ + { path: "example/grid-pattern-dashed.tsx", type: "registry:example" }, + ], }, { name: "dot-pattern-demo", type: "registry:example", + title: "Dot Pattern Demo", + description: "Example showing a background dot pattern made with SVGs.", registryDependencies: ["dot-pattern"], - files: ["example/dot-pattern-demo.tsx"], + files: [{ path: "example/dot-pattern-demo.tsx", type: "registry:example" }], }, { name: "dot-pattern-linear-gradient", type: "registry:example", + title: "Dot Pattern Linear Gradient", + description: "Example showing a dot pattern with linear gradient effects.", registryDependencies: ["dot-pattern"], - files: ["example/dot-pattern-linear-gradient.tsx"], + files: [ + { + path: "example/dot-pattern-linear-gradient.tsx", + type: "registry:example", + }, + ], }, { name: "flickering-grid-demo", type: "registry:example", - files: ["example/flickering-grid-demo.tsx"], + title: "Flickering Grid Demo", + description: "Example showing a flickering grid background.", + files: [ + { path: "example/flickering-grid-demo.tsx", type: "registry:example" }, + ], }, { name: "flickering-grid-rounded-demo", type: "registry:example", - files: ["example/flickering-grid-rounded-demo.tsx"], + title: "Flickering Grid Rounded Demo", + description: + "Example showing a flickering grid background with rounded corners.", + files: [ + { + path: "example/flickering-grid-rounded-demo.tsx", + type: "registry:example", + }, + ], }, { name: "hero-video-dialog-demo", type: "registry:example", - files: ["example/hero-video-dialog-demo.tsx"], + title: "Hero Video Dialog Demo", + description: "Example showing a hero video dialog component.", + files: [ + { path: "example/hero-video-dialog-demo.tsx", type: "registry:example" }, + ], }, { name: "hero-video-dialog-demo-top-in-bottom-out", type: "registry:example", - files: ["example/hero-video-dialog-demo-top-in-bottom-out.tsx"], + title: "Hero Video Dialog Top In Bottom Out Demo", + description: + "Example showing a hero video dialog with top-in bottom-out animation.", + files: [ + { + path: "example/hero-video-dialog-demo-top-in-bottom-out.tsx", + type: "registry:example", + }, + ], }, { name: "code-comparison-demo", type: "registry:example", - files: ["example/code-comparison-demo.tsx"], + title: "Code Comparison Demo", + description: + "Example showing a component which compares two code snippets.", + files: [ + { path: "example/code-comparison-demo.tsx", type: "registry:example" }, + ], }, { name: "script-copy-btn-demo", type: "registry:example", - files: ["example/script-copy-btn-demo.tsx"], + title: "Script Copy Button Demo", + description: "Example showing how to copy code to clipboard.", + files: [ + { path: "example/script-copy-btn-demo.tsx", type: "registry:example" }, + ], }, { name: "marquee-demo", type: "registry:example", + title: "Marquee Demo", + description: "Example showing an infinite scrolling component.", registryDependencies: ["marquee"], - files: ["example/marquee-demo.tsx"], + files: [{ path: "example/marquee-demo.tsx", type: "registry:example" }], }, { name: "marquee-demo-vertical", type: "registry:example", + title: "Marquee Vertical Demo", + description: "Example showing a vertical infinite scrolling component.", registryDependencies: ["marquee"], - files: ["example/marquee-demo-vertical.tsx"], + files: [ + { path: "example/marquee-demo-vertical.tsx", type: "registry:example" }, + ], }, { name: "marquee-logos", type: "registry:example", + title: "Marquee Logos", + description: "Example showing an infinite scrolling logo carousel.", registryDependencies: ["marquee"], - files: ["example/marquee-logos.tsx"], + files: [{ path: "example/marquee-logos.tsx", type: "registry:example" }], }, { name: "marquee-3d", type: "registry:example", + title: "Marquee 3D", + description: "Example showing a 3D infinite scrolling component.", registryDependencies: ["marquee"], - files: ["example/marquee-3d.tsx"], + files: [{ path: "example/marquee-3d.tsx", type: "registry:example" }], }, { name: "globe-demo", type: "registry:example", + title: "Globe Demo", + description: "Example showing an autorotating, interactive WebGL globe.", registryDependencies: ["globe"], - files: ["example/globe-demo.tsx"], + files: [{ path: "example/globe-demo.tsx", type: "registry:example" }], }, { name: "tweet-card-demo", type: "registry:example", + title: "Tweet Card Demo", + description: "Example showing a tweet card with author info.", registryDependencies: ["tweet-card"], - files: ["example/tweet-card-demo.tsx"], + files: [{ path: "example/tweet-card-demo.tsx", type: "registry:example" }], }, { name: "tweet-card-images", type: "registry:example", + title: "Tweet Card Images", + description: "Example showing a tweet card with images.", registryDependencies: ["tweet-card"], - files: ["example/tweet-card-images.tsx"], + files: [ + { path: "example/tweet-card-images.tsx", type: "registry:example" }, + ], }, { name: "tweet-card-meta-preview", type: "registry:example", + title: "Tweet Card Meta Preview", + description: "Example showing a tweet card with meta preview.", registryDependencies: ["tweet-card"], - files: ["example/tweet-card-meta-preview.tsx"], + files: [ + { path: "example/tweet-card-meta-preview.tsx", type: "registry:example" }, + ], }, { name: "shimmer-button-demo", type: "registry:example", + title: "Shimmer Button Demo", + description: "Example showing a button with a shimmering light effect.", registryDependencies: ["shimmer-button"], - files: ["example/shimmer-button-demo.tsx"], + files: [ + { path: "example/shimmer-button-demo.tsx", type: "registry:example" }, + ], }, { name: "bento-demo", type: "registry:example", + title: "Bento Demo", + description: "Example showing a bento grid layout for showcasing features.", registryDependencies: [ "bento-grid", "marquee", @@ -198,394 +311,674 @@ export const examples: Registry = [ "shadcn:calendar", ], dependencies: ["@radix-ui/react-icons"], - files: ["example/bento-demo.tsx"], + files: [{ path: "example/bento-demo.tsx", type: "registry:example" }], }, { name: "bento-demo-vertical", type: "registry:example", + title: "Bento Vertical Demo", + description: "Example showing a vertical bento grid layout.", registryDependencies: ["bento-grid"], dependencies: ["@radix-ui/react-icons"], - files: ["example/bento-demo-vertical.tsx"], + files: [ + { path: "example/bento-demo-vertical.tsx", type: "registry:example" }, + ], }, { name: "number-ticker-demo", type: "registry:example", + title: "Number Ticker Demo", + description: "Example showing animated counting numbers.", registryDependencies: ["number-ticker"], - files: ["example/number-ticker-demo.tsx"], + files: [ + { path: "example/number-ticker-demo.tsx", type: "registry:example" }, + ], }, { name: "number-ticker-decimal-demo", type: "registry:example", + title: "Number Ticker Decimal Demo", + description: "Example showing animated counting decimal numbers.", registryDependencies: ["number-ticker"], - files: ["example/number-ticker-decimal-demo.tsx"], + files: [ + { + path: "example/number-ticker-decimal-demo.tsx", + type: "registry:example", + }, + ], }, { name: "ripple-demo", type: "registry:example", + title: "Ripple Demo", + description: "Example showing an animated ripple effect.", registryDependencies: ["ripple"], - files: ["example/ripple-demo.tsx"], + files: [{ path: "example/ripple-demo.tsx", type: "registry:example" }], }, { name: "retro-grid-demo", type: "registry:example", - files: ["example/retro-grid-demo.tsx"], + title: "Retro Grid Demo", + description: "Example showing an animated scrolling retro grid effect.", + files: [{ path: "example/retro-grid-demo.tsx", type: "registry:example" }], }, { name: "animated-list-demo", type: "registry:example", + title: "Animated List Demo", + description: "Example showing a list with sequenced item animations.", registryDependencies: ["animated-list"], - files: ["example/animated-list-demo.tsx"], + files: [ + { path: "example/animated-list-demo.tsx", type: "registry:example" }, + ], }, { name: "animated-shiny-text-demo", type: "registry:example", + title: "Animated Shiny Text Demo", + description: "Example showing text with a shimmering light effect.", registryDependencies: ["animated-shiny-text"], dependencies: ["@radix-ui/react-icons"], - files: ["example/animated-shiny-text-demo.tsx"], + files: [ + { + path: "example/animated-shiny-text-demo.tsx", + type: "registry:example", + }, + ], }, { name: "particles-demo", type: "registry:example", + title: "Particles Demo", + description: "Example showing interactive particle effects.", registryDependencies: ["particles"], dependencies: ["next-themes"], - files: ["example/particles-demo.tsx"], + files: [{ path: "example/particles-demo.tsx", type: "registry:example" }], }, { name: "animated-grid-pattern-demo", type: "registry:example", + title: "Animated Grid Pattern Demo", + description: "Example showing an animated grid pattern background.", registryDependencies: ["animated-grid-pattern"], - files: ["example/animated-grid-pattern-demo.tsx"], + files: [ + { + path: "example/animated-grid-pattern-demo.tsx", + type: "registry:example", + }, + ], }, { name: "interactive-grid-pattern-demo", type: "registry:example", + title: "Interactive Grid Pattern Demo", + description: "Example showing an interactive grid pattern background.", registryDependencies: ["interactive-grid-pattern"], - files: ["example/interactive-grid-pattern-demo.tsx"], + files: [ + { + path: "example/interactive-grid-pattern-demo.tsx", + type: "registry:example", + }, + ], }, { name: "interactive-grid-pattern-demo-2", type: "registry:example", + title: "Interactive Grid Pattern Demo 2", + description: + "Second example showing an interactive grid pattern background.", registryDependencies: ["interactive-grid-pattern"], - files: ["example/interactive-grid-pattern-demo-2.tsx"], + files: [ + { + path: "example/interactive-grid-pattern-demo-2.tsx", + type: "registry:example", + }, + ], }, { name: "border-beam-demo", type: "registry:example", + title: "Border Beam Demo", + description: "Example showing an animated border beam effect.", registryDependencies: ["border-beam"], - files: ["example/border-beam-demo.tsx"], + files: [{ path: "example/border-beam-demo.tsx", type: "registry:example" }], }, { name: "animated-beam-demo", type: "registry:example", + title: "Animated Beam Demo", + description: "Example showing an animated beam of light effect.", registryDependencies: ["animated-beam"], dependencies: ["@radix-ui/react-icons"], - files: ["example/animated-beam-demo.tsx"], + files: [ + { path: "example/animated-beam-demo.tsx", type: "registry:example" }, + ], }, { name: "animated-beam-unidirectional", type: "registry:example", + title: "Animated Beam Unidirectional", + description: "Example showing a unidirectional animated beam effect.", registryDependencies: ["animated-beam"], - files: ["example/animated-beam-unidirectional.tsx"], + files: [ + { + path: "example/animated-beam-unidirectional.tsx", + type: "registry:example", + }, + ], }, { name: "animated-beam-bidirectional", type: "registry:example", + title: "Animated Beam Bidirectional", + description: "Example showing a bidirectional animated beam effect.", registryDependencies: ["animated-beam"], - files: ["example/animated-beam-bidirectional.tsx"], + files: [ + { + path: "example/animated-beam-bidirectional.tsx", + type: "registry:example", + }, + ], }, { name: "animated-beam-multiple-inputs", type: "registry:example", + title: "Animated Beam Multiple Inputs", + description: "Example showing animated beams with multiple input points.", registryDependencies: ["animated-beam"], - files: ["example/animated-beam-multiple-inputs.tsx"], + files: [ + { + path: "example/animated-beam-multiple-inputs.tsx", + type: "registry:example", + }, + ], }, { name: "animated-beam-multiple-outputs", type: "registry:example", + title: "Animated Beam Multiple Outputs", + description: "Example showing animated beams with multiple output points.", registryDependencies: ["animated-beam"], - files: ["example/animated-beam-multiple-outputs.tsx"], + files: [ + { + path: "example/animated-beam-multiple-outputs.tsx", + type: "registry:example", + }, + ], }, { name: "text-reveal-demo", type: "registry:example", + title: "Text Reveal Demo", + description: "Example showing text that fades in on scroll.", registryDependencies: ["text-reveal"], - files: ["example/text-reveal-demo.tsx"], + files: [{ path: "example/text-reveal-demo.tsx", type: "registry:example" }], }, { name: "animated-gradient-text-demo", type: "registry:example", + title: "Animated Gradient Text Demo", + description: "Example showing text with animated gradient backgrounds.", registryDependencies: ["animated-gradient-text"], dependencies: ["lucide-react"], - files: ["example/animated-gradient-text-demo.tsx"], + files: [ + { + path: "example/animated-gradient-text-demo.tsx", + type: "registry:example", + }, + ], }, { name: "orbiting-circles-demo", type: "registry:example", + title: "Orbiting Circles Demo", + description: "Example showing circles moving in orbital paths.", registryDependencies: ["orbiting-circles"], dependencies: ["@radix-ui/react-icons"], - files: ["example/orbiting-circles-demo.tsx"], + files: [ + { path: "example/orbiting-circles-demo.tsx", type: "registry:example" }, + ], }, { name: "dock-demo", type: "registry:example", + title: "Dock Demo", + description: "Example showing a MacOS-style dock implementation.", registryDependencies: ["dock"], - files: ["example/dock-demo.tsx"], + files: [{ path: "example/dock-demo.tsx", type: "registry:example" }], }, { name: "dock-demo-2", type: "registry:example", + title: "Dock Demo 2", + description: "Second example showing a MacOS-style dock implementation.", registryDependencies: ["dock"], - files: ["example/dock-demo-2.tsx"], + files: [{ path: "example/dock-demo-2.tsx", type: "registry:example" }], }, { name: "dock-demo-3", type: "registry:example", + title: "Dock Demo 3", + description: "Third example showing a MacOS-style dock implementation.", registryDependencies: ["dock"], - files: ["example/dock-demo-3.tsx"], + files: [{ path: "example/dock-demo-3.tsx", type: "registry:example" }], }, { name: "word-rotate-demo", type: "registry:example", + title: "Word Rotate Demo", + description: "Example showing vertical word rotation animation.", registryDependencies: ["word-rotate"], - files: ["example/word-rotate-demo.tsx"], + files: [{ path: "example/word-rotate-demo.tsx", type: "registry:example" }], }, { name: "hyper-text-demo", type: "registry:example", + title: "Hyper Text Demo", + description: "Example showing text with scrambling letter animations.", registryDependencies: ["hyper-text"], - files: ["example/hyper-text-demo.tsx"], + files: [{ path: "example/hyper-text-demo.tsx", type: "registry:example" }], }, { name: "avatar-circles-demo", type: "registry:example", + title: "Avatar Circles Demo", + description: "Example showing overlapping avatar circles.", registryDependencies: ["avatar-circles"], - files: ["example/avatar-circles-demo.tsx"], + files: [ + { path: "example/avatar-circles-demo.tsx", type: "registry:example" }, + ], }, { name: "typing-animation-demo", type: "registry:example", + title: "Typing Animation Demo", + description: "Example showing typed character animations.", registryDependencies: ["typing-animation"], - files: ["example/typing-animation-demo.tsx"], + files: [ + { path: "example/typing-animation-demo.tsx", type: "registry:example" }, + ], }, { name: "scroll-based-velocity-demo", type: "registry:example", + title: "Scroll Based Velocity Demo", + description: "Example showing text speed changes based on scroll velocity.", registryDependencies: ["scroll-based-velocity"], - files: ["example/scroll-based-velocity-demo.tsx"], + files: [ + { + path: "example/scroll-based-velocity-demo.tsx", + type: "registry:example", + }, + ], }, { name: "scratch-to-reveal-demo", type: "registry:example", + title: "Scratch To Reveal Demo", + description: "Example showing an interactive scratch-off reveal effect.", registryDependencies: ["scratch-to-reveal"], - files: ["example/scratch-to-reveal-demo.tsx"], + files: [ + { path: "example/scratch-to-reveal-demo.tsx", type: "registry:example" }, + ], }, { name: "flip-text-demo", type: "registry:example", + title: "Flip Text Demo", + description: "Example showing text with character flip animations.", registryDependencies: ["flip-text"], - files: ["example/flip-text-demo.tsx"], + files: [{ path: "example/flip-text-demo.tsx", type: "registry:example" }], }, { name: "sparkles-text-demo", type: "registry:example", - files: ["example/sparkles-text-demo.tsx"], + title: "Sparkles Text Demo", + description: "Example showing text with animated sparkle effects.", + files: [ + { path: "example/sparkles-text-demo.tsx", type: "registry:example" }, + ], }, { name: "icon-cloud-demo", type: "registry:example", + title: "Icon Cloud Demo", + description: "Example showing an interactive 3D icon cloud.", registryDependencies: ["icon-cloud"], - files: ["example/icon-cloud-demo.tsx"], + files: [{ path: "example/icon-cloud-demo.tsx", type: "registry:example" }], }, { name: "icon-cloud-demo-2", type: "registry:example", + title: "Icon Cloud Demo 2", + description: "Second example showing an interactive 3D icon cloud.", registryDependencies: ["icon-cloud"], - files: ["example/icon-cloud-demo-2.tsx"], + files: [ + { path: "example/icon-cloud-demo-2.tsx", type: "registry:example" }, + ], }, { name: "icon-cloud-demo-3", type: "registry:example", + title: "Icon Cloud Demo 3", + description: "Third example showing an interactive 3D icon cloud.", registryDependencies: ["icon-cloud"], - files: ["example/icon-cloud-demo-3.tsx"], + files: [ + { path: "example/icon-cloud-demo-3.tsx", type: "registry:example" }, + ], }, { name: "text-animate-demo", type: "registry:example", - files: ["example/text-animate-demo.tsx"], + title: "Text Animate Demo", + description: "Example showing various text animations.", + files: [ + { path: "example/text-animate-demo.tsx", type: "registry:example" }, + ], }, { name: "text-animate-demo-2", type: "registry:example", - files: ["example/text-animate-demo-2.tsx"], + title: "Text Animate Demo 2", + description: "Second example showing various text animations.", + files: [ + { path: "example/text-animate-demo-2.tsx", type: "registry:example" }, + ], }, { name: "text-animate-demo-3", type: "registry:example", - files: ["example/text-animate-demo-3.tsx"], + title: "Text Animate Demo 3", + description: "Third example showing various text animations.", + files: [ + { path: "example/text-animate-demo-3.tsx", type: "registry:example" }, + ], }, { name: "text-animate-demo-4", type: "registry:example", - files: ["example/text-animate-demo-4.tsx"], + title: "Text Animate Demo 4", + description: "Fourth example showing various text animations.", + files: [ + { path: "example/text-animate-demo-4.tsx", type: "registry:example" }, + ], }, { name: "text-animate-demo-5", type: "registry:example", - files: ["example/text-animate-demo-5.tsx"], + title: "Text Animate Demo 5", + description: "Fifth example showing various text animations.", + files: [ + { path: "example/text-animate-demo-5.tsx", type: "registry:example" }, + ], }, { name: "text-animate-demo-6", type: "registry:example", - files: ["example/text-animate-demo-6.tsx"], + title: "Text Animate Demo 6", + description: "Sixth example showing various text animations.", + files: [ + { path: "example/text-animate-demo-6.tsx", type: "registry:example" }, + ], }, { name: "shiny-button-demo", type: "registry:example", - files: ["example/shiny-button-demo.tsx"], + title: "Shiny Button Demo", + description: "Example showing a shiny button with dynamic styles.", + files: [ + { path: "example/shiny-button-demo.tsx", type: "registry:example" }, + ], }, { name: "box-reveal-demo", type: "registry:example", - files: ["example/box-reveal-demo.tsx"], + title: "Box Reveal Demo", + description: "Example showing a sliding box text reveal animation.", + files: [{ path: "example/box-reveal-demo.tsx", type: "registry:example" }], }, { name: "animated-circular-progress-bar-demo", type: "registry:example", - files: ["example/animated-circular-progress-bar-demo.tsx"], + title: "Animated Circular Progress Bar Demo", + description: "Example showing an animated circular progress gauge.", + files: [ + { + path: "example/animated-circular-progress-bar-demo.tsx", + type: "registry:example", + }, + ], }, { name: "shine-border-demo", type: "registry:example", - files: ["example/shine-border-demo.tsx"], + title: "Shine Border Demo", + description: "Example showing an animated shining border effect.", + files: [ + { path: "example/shine-border-demo.tsx", type: "registry:example" }, + ], }, { name: "shine-border-demo-2", type: "registry:example", - files: ["example/shine-border-demo-2.tsx"], + title: "Shine Border Demo 2", + description: "Second example showing an animated shining border effect.", + files: [ + { path: "example/shine-border-demo-2.tsx", type: "registry:example" }, + ], }, { name: "confetti-demo", type: "registry:example", - files: ["example/confetti-demo.tsx"], + title: "Confetti Demo", + description: "Example showing confetti animations for celebrations.", + files: [{ path: "example/confetti-demo.tsx", type: "registry:example" }], }, { name: "confetti-basic-cannon", type: "registry:example", - files: ["example/confetti-basic-cannon.tsx"], + title: "Confetti Basic Cannon", + description: "Example showing basic confetti cannon animation.", + files: [ + { path: "example/confetti-basic-cannon.tsx", type: "registry:example" }, + ], }, { name: "confetti-random-direction", type: "registry:example", - files: ["example/confetti-random-direction.tsx"], + title: "Confetti Random Direction", + description: "Example showing confetti with random directions.", + files: [ + { + path: "example/confetti-random-direction.tsx", + type: "registry:example", + }, + ], }, { name: "confetti-fireworks", type: "registry:example", - files: ["example/confetti-fireworks.tsx"], + title: "Confetti Fireworks", + description: "Example showing fireworks-style confetti animation.", + files: [ + { path: "example/confetti-fireworks.tsx", type: "registry:example" }, + ], }, { name: "confetti-stars", type: "registry:example", - files: ["example/confetti-stars.tsx"], + title: "Confetti Stars", + description: "Example showing star-shaped confetti animation.", + files: [{ path: "example/confetti-stars.tsx", type: "registry:example" }], }, { name: "confetti-side-cannons", type: "registry:example", - files: ["example/confetti-side-cannons.tsx"], + title: "Confetti Side Cannons", + description: "Example showing side-mounted confetti cannons.", + files: [ + { path: "example/confetti-side-cannons.tsx", type: "registry:example" }, + ], }, { name: "confetti-custom-shapes", type: "registry:example", - files: ["example/confetti-custom-shapes.tsx"], + title: "Confetti Custom Shapes", + description: "Example showing confetti with custom shape particles.", + files: [ + { path: "example/confetti-custom-shapes.tsx", type: "registry:example" }, + ], }, { name: "confetti-emoji", type: "registry:example", - files: ["example/confetti-emoji.tsx"], + title: "Confetti Emoji", + description: "Example showing confetti with emoji particles.", + files: [{ path: "example/confetti-emoji.tsx", type: "registry:example" }], }, { name: "animated-subscribe-button-demo", type: "registry:example", - files: ["example/animated-subscribe-button-demo.tsx"], + title: "Animated Subscribe Button Demo", + description: + "Example showing an animated subscribe button with micro animations.", + files: [ + { + path: "example/animated-subscribe-button-demo.tsx", + type: "registry:example", + }, + ], }, { name: "cool-mode-demo", type: "registry:example", - files: ["example/cool-mode-demo.tsx"], + title: "Cool Mode Demo", + description: "Example showing cool mode effect for buttons and links.", + files: [{ path: "example/cool-mode-demo.tsx", type: "registry:example" }], }, { name: "cool-mode-custom", type: "registry:example", - files: ["example/cool-mode-custom.tsx"], + title: "Cool Mode Custom", + description: "Example showing customized cool mode effects.", + files: [{ path: "example/cool-mode-custom.tsx", type: "registry:example" }], }, { name: "pulsating-button-demo", type: "registry:example", - files: ["example/pulsating-button-demo.tsx"], + title: "Pulsating Button Demo", + description: "Example showing an animated pulsating button.", + files: [ + { path: "example/pulsating-button-demo.tsx", type: "registry:example" }, + ], }, { name: "ripple-button-demo", type: "registry:example", - files: ["example/ripple-button-demo.tsx"], + title: "Ripple Button Demo", + description: "Example showing an animated button with ripple effect.", + files: [ + { path: "example/ripple-button-demo.tsx", type: "registry:example" }, + ], }, { name: "file-tree-demo", type: "registry:example", - files: ["example/file-tree-demo.tsx"], + title: "File Tree Demo", + description: + "Example showing a component that displays folder and file structure.", + files: [{ path: "example/file-tree-demo.tsx", type: "registry:example" }], }, { name: "blur-fade-demo", type: "registry:example", - files: ["example/blur-fade-demo.tsx"], + title: "Blur Fade Demo", + description: "Example showing blur fade in and out animations.", + files: [{ path: "example/blur-fade-demo.tsx", type: "registry:example" }], }, { name: "blur-fade-text-demo", type: "registry:example", - files: ["example/blur-fade-text-demo.tsx"], + title: "Blur Fade Text Demo", + description: "Example showing blur fade animations with text.", + files: [ + { path: "example/blur-fade-text-demo.tsx", type: "registry:example" }, + ], }, { name: "safari-demo", type: "registry:example", - files: ["example/safari-demo.tsx"], + title: "Safari Demo", + description: "Example showing a Safari browser mockup.", + files: [{ path: "example/safari-demo.tsx", type: "registry:example" }], }, { name: "safari-demo-2", type: "registry:example", - files: ["example/safari-demo-2.tsx"], + title: "Safari Demo 2", + description: "Second example showing a Safari browser mockup.", + files: [{ path: "example/safari-demo-2.tsx", type: "registry:example" }], }, { name: "safari-demo-3", type: "registry:example", - files: ["example/safari-demo-3.tsx"], + title: "Safari Demo 3", + description: "Third example showing a Safari browser mockup.", + files: [{ path: "example/safari-demo-3.tsx", type: "registry:example" }], }, { name: "safari-demo-4", type: "registry:example", - files: ["example/safari-demo-4.tsx"], + title: "Safari Demo 4", + description: "Fourth example showing a Safari browser mockup.", + files: [{ path: "example/safari-demo-4.tsx", type: "registry:example" }], }, { name: "iphone-15-pro-demo", type: "registry:example", - files: ["example/iphone-15-pro-demo.tsx"], + title: "iPhone 15 Pro Demo", + description: "Example showing an iPhone 15 Pro mockup.", + files: [ + { path: "example/iphone-15-pro-demo.tsx", type: "registry:example" }, + ], }, { name: "iphone-15-pro-demo-2", type: "registry:example", - files: ["example/iphone-15-pro-demo-2.tsx"], + title: "iPhone 15 Pro Demo 2", + description: "Second example showing an iPhone 15 Pro mockup.", + files: [ + { path: "example/iphone-15-pro-demo-2.tsx", type: "registry:example" }, + ], }, { name: "iphone-15-pro-demo-3", type: "registry:example", - files: ["example/iphone-15-pro-demo-3.tsx"], + title: "iPhone 15 Pro Demo 3", + description: "Third example showing an iPhone 15 Pro mockup.", + files: [ + { path: "example/iphone-15-pro-demo-3.tsx", type: "registry:example" }, + ], }, { name: "rainbow-button-demo", type: "registry:example", - files: ["example/rainbow-button-demo.tsx"], + title: "Rainbow Button Demo", + description: "Example showing an animated button with rainbow effect.", + files: [ + { path: "example/rainbow-button-demo.tsx", type: "registry:example" }, + ], }, { name: "interactive-hover-button-demo", type: "registry:example", - files: ["example/interactive-hover-button-demo.tsx"], + title: "Interactive Hover Button Demo", + description: "Example showing an interactive button with hover effects.", + files: [ + { + path: "example/interactive-hover-button-demo.tsx", + type: "registry:example", + }, + ], }, ]; diff --git a/registry/registry-hooks.ts b/registry/registry-hooks.ts deleted file mode 100644 index 26760f8c1..000000000 --- a/registry/registry-hooks.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { Registry } from "@/registry/schema"; - -export const hooks: Registry = []; diff --git a/registry/registry-lib.ts b/registry/registry-lib.ts index 1f6d12629..b6b6c0e97 100644 --- a/registry/registry-lib.ts +++ b/registry/registry-lib.ts @@ -1,6 +1,6 @@ -import { Registry } from "@/registry/schema"; +import { type Registry } from "shadcn/registry"; -export const lib: Registry = [ +export const lib: Registry["items"] = [ { name: "utils", type: "registry:lib", diff --git a/registry/registry-styles.ts b/registry/registry-styles.ts deleted file mode 100644 index 34402da0c..000000000 --- a/registry/registry-styles.ts +++ /dev/null @@ -1,8 +0,0 @@ -export const styles = [ - { - name: "default", - label: "Default", - }, -] as const; - -export type Style = (typeof styles)[number]; diff --git a/registry/registry-themes.ts b/registry/registry-themes.ts deleted file mode 100644 index ab2cd1c27..000000000 --- a/registry/registry-themes.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { Registry } from "./schema"; - -export const themes: Registry = []; diff --git a/registry/registry-ui.ts b/registry/registry-ui.ts index 24cc99c91..cd27768b8 100644 --- a/registry/registry-ui.ts +++ b/registry/registry-ui.ts @@ -1,40 +1,45 @@ -import { Registry } from "@/registry/schema"; +import { type Registry } from "shadcn/registry"; -export const ui: Registry = [ +export const ui: Registry["items"] = [ { name: "magic-card", type: "registry:ui", + title: "Magic Card", + description: + "A spotlight effect that follows your mouse cursor and highlights borders on hover.", dependencies: ["motion"], - files: ["magicui/magic-card.tsx"], + files: [{ path: "magicui/magic-card.tsx", type: "registry:ui" }], }, { name: "android", type: "registry:ui", - files: ["magicui/android.tsx"], + title: "Android", + description: "A mockup of an Android device.", + files: [{ path: "magicui/android.tsx", type: "registry:ui" }], }, { name: "warp-background", type: "registry:ui", + title: "Warp Background", + description: "A card with a time warping background effect.", dependencies: ["motion"], - files: ["magicui/warp-background.tsx"], + files: [{ path: "magicui/warp-background.tsx", type: "registry:ui" }], }, { name: "line-shadow-text", type: "registry:ui", + title: "Line Shadow Text", + description: "A text component with a moving line shadow.", dependencies: ["motion"], - files: ["magicui/line-shadow-text.tsx"], - }, - { - name: "terminal", - type: "registry:ui", - dependencies: ["motion"], - files: ["magicui/terminal.tsx"], + files: [{ path: "magicui/line-shadow-text.tsx", type: "registry:ui" }], }, { name: "aurora-text", type: "registry:ui", + title: "Aurora Text", + description: "A beautiful aurora text effect", dependencies: ["motion"], - files: ["magicui/aurora-text.tsx"], + files: [{ path: "magicui/aurora-text.tsx", type: "registry:ui" }], cssVars: { light: { "--color-1": "0 100% 63%", @@ -100,18 +105,24 @@ export const ui: Registry = [ { name: "morphing-text", type: "registry:ui", - files: ["magicui/morphing-text.tsx"], + title: "Morphing Text", + description: "A dynamic text morphing component for Magic UI.", + files: [{ path: "magicui/morphing-text.tsx", type: "registry:ui" }], }, { name: "scroll-progress", type: "registry:ui", + title: "Scroll Progress", + description: "Animated Scroll Progress for your pages", dependencies: ["motion"], - files: ["magicui/scroll-progress.tsx"], + files: [{ path: "magicui/scroll-progress.tsx", type: "registry:ui" }], }, { name: "neon-gradient-card", type: "registry:ui", - files: ["magicui/neon-gradient-card.tsx"], + title: "Neon Gradient Card", + description: "A beautiful neon card effect", + files: [{ path: "magicui/neon-gradient-card.tsx", type: "registry:ui" }], tailwind: { config: { theme: { @@ -134,7 +145,9 @@ export const ui: Registry = [ { name: "meteors", type: "registry:ui", - files: ["magicui/meteors.tsx"], + title: "Meteors", + description: "A meteor shower effect.", + files: [{ path: "magicui/meteors.tsx", type: "registry:ui" }], tailwind: { config: { theme: { @@ -163,46 +176,69 @@ export const ui: Registry = [ { name: "grid-pattern", type: "registry:ui", - files: ["magicui/grid-pattern.tsx"], + title: "Grid Pattern", + description: + "A background grid pattern made with SVGs, fully customizable using Tailwind CSS.", + files: [{ path: "magicui/grid-pattern.tsx", type: "registry:ui" }], }, { name: "interactive-grid-pattern", type: "registry:ui", - files: ["magicui/interactive-grid-pattern.tsx"], + title: "Interactive Grid Pattern", + description: + "A interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS.", + files: [ + { path: "magicui/interactive-grid-pattern.tsx", type: "registry:ui" }, + ], }, { name: "dot-pattern", type: "registry:ui", - files: ["magicui/dot-pattern.tsx"], + title: "Dot Pattern", + description: + "A background dot pattern made with SVGs, fully customizable using Tailwind CSS.", + files: [{ path: "magicui/dot-pattern.tsx", type: "registry:ui" }], }, { name: "flickering-grid", type: "registry:ui", - files: ["magicui/flickering-grid.tsx"], + title: "Flickering Grid", + description: + "A flickering grid background made with SVGs, fully customizable using Tailwind CSS.", + files: [{ path: "magicui/flickering-grid.tsx", type: "registry:ui" }], }, { name: "hero-video-dialog", type: "registry:ui", + title: "Hero Video Dialog", + description: "A hero video dialog component.", dependencies: ["motion"], - files: ["magicui/hero-video-dialog.tsx"], + files: [{ path: "magicui/hero-video-dialog.tsx", type: "registry:ui" }], }, { name: "code-comparison", type: "registry:ui", + title: "Code Comparison", + description: "A component which compares two code snippets.", dependencies: ["shiki", "next-themes"], - files: ["magicui/code-comparison.tsx"], + files: [{ path: "magicui/code-comparison.tsx", type: "registry:ui" }], }, { name: "script-copy-btn", type: "registry:ui", + title: "Script Copy Button", + description: "Copy code to clipboard", dependencies: ["motion", "shiki", "next-themes"], registryDependencies: ["button"], - files: ["magicui/script-copy-btn.tsx"], + files: [{ path: "magicui/script-copy-btn.tsx", type: "registry:ui" }], }, { name: "marquee", type: "registry:ui", - files: ["magicui/marquee.tsx"], + title: "Marquee", + description: + "An infinite scrolling component that can be used to display text, images, or videos.", + files: [{ path: "magicui/marquee.tsx", type: "registry:ui" }], tailwind: { config: { theme: { @@ -230,13 +266,19 @@ export const ui: Registry = [ { name: "globe", type: "registry:ui", + title: "Globe", + description: + "An autorotating, interactive, and highly performant globe made using WebGL.", dependencies: ["cobe"], - files: ["magicui/globe.tsx"], + files: [{ path: "magicui/globe.tsx", type: "registry:ui" }], }, { name: "shimmer-button", type: "registry:ui", - files: ["magicui/shimmer-button.tsx"], + title: "Shimmer Button", + description: + "A button with a shimmering light which travels around the perimeter.", + files: [{ path: "magicui/shimmer-button.tsx", type: "registry:ui" }], tailwind: { config: { theme: { @@ -276,37 +318,54 @@ export const ui: Registry = [ { name: "tweet-card", type: "registry:ui", + title: "Tweet Card", + description: + "A card that displays a tweet with the author's name, handle, and profile picture.", dependencies: ["react-tweet"], - files: ["magicui/tweet-card.tsx"], + files: [{ path: "magicui/tweet-card.tsx", type: "registry:ui" }], }, { name: "client-tweet-card", type: "registry:ui", + title: "Client Tweet Card", + description: + "A client-side version of the tweet card that displays a tweet with the author's name, handle, and profile picture.", dependencies: ["react-tweet"], - files: ["magicui/client-tweet-card.tsx"], + files: [{ path: "magicui/client-tweet-card.tsx", type: "registry:ui" }], }, { name: "bento-grid", type: "registry:ui", + title: "Bento Grid", + description: + "Bento grid is a layout used to showcase the features of a product in a simple and elegant way.", dependencies: ["@radix-ui/react-icons"], registryDependencies: ["button"], - files: ["magicui/bento-grid.tsx"], + files: [{ path: "magicui/bento-grid.tsx", type: "registry:ui" }], }, { name: "particles", type: "registry:ui", - files: ["magicui/particles.tsx"], + title: "Particles", + description: + "Particles are a fun way to add some visual flair to your website. They can be used to create a sense of depth, movement, and interactivity.", + files: [{ path: "magicui/particles.tsx", type: "registry:ui" }], }, { name: "number-ticker", type: "registry:ui", + title: "Number Ticker", + description: "Animate numbers to count up or down to a target number", dependencies: ["motion"], - files: ["magicui/number-ticker.tsx"], + files: [{ path: "magicui/number-ticker.tsx", type: "registry:ui" }], }, { name: "ripple", type: "registry:ui", - files: ["magicui/ripple.tsx"], + title: "Ripple", + description: + "An animated ripple effect typically used behind elements to emphasize them.", + files: [{ path: "magicui/ripple.tsx", type: "registry:ui" }], tailwind: { config: { theme: { @@ -333,7 +392,9 @@ export const ui: Registry = [ { name: "retro-grid", type: "registry:ui", - files: ["magicui/retro-grid.tsx"], + title: "Retro Grid", + description: "An animated scrolling retro grid effect", + files: [{ path: "magicui/retro-grid.tsx", type: "registry:ui" }], tailwind: { config: { theme: { @@ -355,13 +416,19 @@ export const ui: Registry = [ { name: "animated-list", type: "registry:ui", + title: "Animated List", + description: + "A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.", dependencies: ["motion"], - files: ["magicui/animated-list.tsx"], + files: [{ path: "magicui/animated-list.tsx", type: "registry:ui" }], }, { name: "animated-shiny-text", type: "registry:ui", - files: ["magicui/animated-shiny-text.tsx"], + title: "Animated Shiny Text", + description: + "A light glare effect which pans across text making it appear as if it is shimmering.", + files: [{ path: "magicui/animated-shiny-text.tsx", type: "registry:ui" }], tailwind: { config: { theme: { @@ -387,13 +454,19 @@ export const ui: Registry = [ { name: "animated-grid-pattern", type: "registry:ui", + title: "Animated Grid Pattern", + description: + "A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.", dependencies: ["motion"], - files: ["magicui/animated-grid-pattern.tsx"], + files: [{ path: "magicui/animated-grid-pattern.tsx", type: "registry:ui" }], }, { name: "border-beam", type: "registry:ui", - files: ["magicui/border-beam.tsx"], + title: "Border Beam", + description: + "An animated beam of light which travels along the border of its container.", + files: [{ path: "magicui/border-beam.tsx", type: "registry:ui" }], tailwind: { config: { theme: { @@ -417,25 +490,38 @@ export const ui: Registry = [ { name: "animated-beam", type: "registry:ui", + title: "Animated Beam", + description: + 'An animated beam of light which travels along a path. Useful for showcasing the "integration" features of a website.', dependencies: ["motion"], - files: ["magicui/animated-beam.tsx"], + files: [{ path: "magicui/animated-beam.tsx", type: "registry:ui" }], }, { name: "text-reveal", type: "registry:ui", + title: "Text Reveal", + description: "Fade in text as you scroll down the page.", dependencies: ["motion"], - files: ["magicui/text-reveal.tsx"], + files: [{ path: "magicui/text-reveal.tsx", type: "registry:ui" }], }, { name: "hyper-text", type: "registry:ui", + title: "Hyper Text", + description: + "A text animation that scrambles letters before revealing the final text.", dependencies: ["motion"], - files: ["magicui/hyper-text.tsx"], + files: [{ path: "magicui/hyper-text.tsx", type: "registry:ui" }], }, { name: "animated-gradient-text", type: "registry:ui", - files: ["magicui/animated-gradient-text.tsx"], + title: "Animated Gradient Text", + description: + "An animated gradient background which transitions between colors for text.", + files: [ + { path: "magicui/animated-gradient-text.tsx", type: "registry:ui" }, + ], tailwind: { config: { theme: { @@ -458,7 +544,10 @@ export const ui: Registry = [ { name: "orbiting-circles", type: "registry:ui", - files: ["magicui/orbiting-circles.tsx"], + title: "Orbiting Circles", + description: + "A collection of circles which move in orbit along a circular path", + files: [{ path: "magicui/orbiting-circles.tsx", type: "registry:ui" }], tailwind: { config: { theme: { @@ -486,78 +575,109 @@ export const ui: Registry = [ { name: "dock", type: "registry:ui", + title: "Dock", + description: + "An implementation of the MacOS dock using react + tailwindcss + framer motion", dependencies: ["motion"], - files: ["magicui/dock.tsx"], + files: [{ path: "magicui/dock.tsx", type: "registry:ui" }], }, { name: "word-rotate", type: "registry:ui", + title: "Word Rotate", + description: "A vertical rotation of words", dependencies: ["motion"], - files: ["magicui/word-rotate.tsx"], + files: [{ path: "magicui/word-rotate.tsx", type: "registry:ui" }], }, { name: "avatar-circles", type: "registry:ui", - files: ["magicui/avatar-circles.tsx"], + title: "Avatar Circles", + description: "Overlapping circles of avatars.", + files: [{ path: "magicui/avatar-circles.tsx", type: "registry:ui" }], }, { name: "typing-animation", type: "registry:ui", + title: "Typing Animation", + description: "Characters appearing in typed animation", dependencies: ["motion"], - files: ["magicui/typing-animation.tsx"], + files: [{ path: "magicui/typing-animation.tsx", type: "registry:ui" }], }, { name: "sparkles-text", type: "registry:ui", + title: "Sparkles Text", + description: + "A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.", dependencies: ["motion"], - files: ["magicui/sparkles-text.tsx"], + files: [{ path: "magicui/sparkles-text.tsx", type: "registry:ui" }], }, { name: "flip-text", type: "registry:ui", + title: "Flip Text", + description: "Text flipping character animation", dependencies: ["motion"], - files: ["magicui/flip-text.tsx"], + files: [{ path: "magicui/flip-text.tsx", type: "registry:ui" }], }, { name: "icon-cloud", type: "registry:ui", + title: "Icon Cloud", + description: "An interactive 3D tag cloud component", dependencies: [], - files: ["magicui/icon-cloud.tsx"], + files: [{ path: "magicui/icon-cloud.tsx", type: "registry:ui" }], }, { name: "text-animate", type: "registry:ui", + title: "Text Animate", + description: + "A text animation component that animates text using a variety of different animations.", dependencies: ["motion"], - files: ["magicui/text-animate.tsx"], + files: [{ path: "magicui/text-animate.tsx", type: "registry:ui" }], }, { name: "scroll-based-velocity", type: "registry:ui", + title: "Scroll Based Velocity", + description: "Scrolling text whose speed changes based on scroll speed", dependencies: ["motion"], - files: ["magicui/scroll-based-velocity.tsx"], + files: [{ path: "magicui/scroll-based-velocity.tsx", type: "registry:ui" }], }, { name: "scratch-to-reveal", type: "registry:ui", + title: "Scratch To Reveal", + description: + "The ScratchToReveal component creates an interactive scratch-off effect with customizable dimensions and animations, revealing hidden content beneath.", dependencies: ["motion"], - files: ["magicui/scratch-to-reveal.tsx"], + files: [{ path: "magicui/scratch-to-reveal.tsx", type: "registry:ui" }], }, { name: "shiny-button", type: "registry:ui", + title: "Shiny Button", + description: + "A shiny button component with dynamic styles in the dark mode or light mode.", dependencies: ["motion"], - files: ["magicui/shiny-button.tsx"], + files: [{ path: "magicui/shiny-button.tsx", type: "registry:ui" }], }, { name: "box-reveal", type: "registry:ui", + title: "Box Reveal Animation", + description: "Sliding box animation that reveals text behind it.", dependencies: ["motion"], - files: ["magicui/box-reveal.tsx"], + files: [{ path: "magicui/box-reveal.tsx", type: "registry:ui" }], }, { name: "shine-border", type: "registry:ui", - files: ["magicui/shine-border.tsx"], + title: "Shine Border", + description: "Shine border is an animated background border effect.", + files: [{ path: "magicui/shine-border.tsx", type: "registry:ui" }], tailwind: { config: { theme: { @@ -586,30 +706,51 @@ export const ui: Registry = [ { name: "animated-circular-progress-bar", type: "registry:ui", - files: ["magicui/animated-circular-progress-bar.tsx"], + title: "Animated Circular Progress Bar", + description: + "Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value.", + files: [ + { + path: "magicui/animated-circular-progress-bar.tsx", + type: "registry:ui", + }, + ], }, { name: "confetti", type: "registry:ui", + title: "Confetti", + description: + "Confetti animations are best used to delight your users when something special happens", dependencies: ["canvas-confetti", "@types/canvas-confetti"], registryDependencies: ["button"], - files: ["magicui/confetti.tsx"], + files: [{ path: "magicui/confetti.tsx", type: "registry:ui" }], }, { name: "animated-subscribe-button", type: "registry:ui", + title: "Animated Subscribe Button", + description: + "An animated subscribe button useful for showing a micro animation from intial to final result.", dependencies: ["motion"], - files: ["magicui/animated-subscribe-button.tsx"], + files: [ + { path: "magicui/animated-subscribe-button.tsx", type: "registry:ui" }, + ], }, { name: "cool-mode", type: "registry:ui", - files: ["magicui/cool-mode.tsx"], + title: "Cool Mode", + description: "Cool mode effect for buttons, links, and other DOMs", + files: [{ path: "magicui/cool-mode.tsx", type: "registry:ui" }], }, { name: "pulsating-button", type: "registry:ui", - files: ["magicui/pulsating-button.tsx"], + title: "Pulsating Button", + description: + "An animated pulsating button useful for capturing attention of users.", + files: [{ path: "magicui/pulsating-button.tsx", type: "registry:ui" }], tailwind: { config: { theme: { @@ -631,7 +772,9 @@ export const ui: Registry = [ { name: "ripple-button", type: "registry:ui", - files: ["magicui/ripple-button.tsx"], + title: "Ripple Button", + description: "An animated button with ripple useful for user engagement.", + files: [{ path: "magicui/ripple-button.tsx", type: "registry:ui" }], tailwind: { config: { theme: { @@ -658,28 +801,40 @@ export const ui: Registry = [ { name: "file-tree", type: "registry:ui", - files: ["magicui/file-tree.tsx"], + title: "File Tree", + description: + "A component used to showcase the folder and file structure of a directory.", + files: [{ path: "magicui/file-tree.tsx", type: "registry:ui" }], }, { name: "blur-fade", type: "registry:ui", + title: "Blur Fade", + description: + "Blur fade in and out animation. Used to smoothly fade in and out content.", dependencies: ["motion"], - files: ["magicui/blur-fade.tsx"], + files: [{ path: "magicui/blur-fade.tsx", type: "registry:ui" }], }, { name: "safari", type: "registry:ui", - files: ["magicui/safari.tsx"], + title: "Safari", + description: "A safari browser mockup to showcase your website.", + files: [{ path: "magicui/safari.tsx", type: "registry:ui" }], }, { name: "iphone-15-pro", type: "registry:ui", - files: ["magicui/iphone-15-pro.tsx"], + title: "iPhone 15 Pro", + description: "A mockup of the iPhone 15 Pro", + files: [{ path: "magicui/iphone-15-pro.tsx", type: "registry:ui" }], }, { name: "rainbow-button", type: "registry:ui", - files: ["magicui/rainbow-button.tsx"], + title: "Rainbow Button", + description: "An animated button with a rainbow effect.", + files: [{ path: "magicui/rainbow-button.tsx", type: "registry:ui" }], cssVars: { light: { "--color-1": "0 100% 63%", @@ -724,6 +879,8 @@ export const ui: Registry = [ { name: "interactive-hover-button", type: "registry:ui", - files: ["magicui/interactive-hover-button.tsx"], + files: [ + { path: "magicui/interactive-hover-button.tsx", type: "registry:ui" }, + ], }, ]; diff --git a/registry/schema.ts b/registry/schema.ts deleted file mode 100644 index 78339a8f7..000000000 --- a/registry/schema.ts +++ /dev/null @@ -1,90 +0,0 @@ -import { z } from "zod"; - -export const blockChunkSchema = z.object({ - name: z.string(), - description: z.string(), - component: z.any(), - file: z.string(), - code: z.string().optional(), - container: z - .object({ - className: z.string().nullish(), - }) - .optional(), -}); - -export const registryItemTypeSchema = z.enum([ - "registry:style", - "registry:lib", - "registry:example", - "registry:block", - "registry:component", - "registry:ui", - "registry:hook", - "registry:theme", - "registry:page", -]); - -export const registryItemFileSchema = z.union([ - z.string(), - z.object({ - path: z.string(), - content: z.string().optional(), - type: registryItemTypeSchema, - target: z.string().optional(), - }), -]); - -export const registryItemTailwindSchema = z.object({ - config: z.object({ - content: z.array(z.string()).optional(), - theme: z.record(z.string(), z.any()).optional(), - plugins: z.array(z.string()).optional(), - }), -}); - -export const registryItemCssVarsSchema = z.object({ - light: z.record(z.string(), z.string()).optional(), - dark: z.record(z.string(), z.string()).optional(), -}); - -export const registryEntrySchema = z.object({ - name: z.string(), - type: registryItemTypeSchema, - description: z.string().optional(), - dependencies: z.array(z.string()).optional(), - devDependencies: z.array(z.string()).optional(), - registryDependencies: z.array(z.string()).optional(), - files: z.array(registryItemFileSchema).optional(), - tailwind: registryItemTailwindSchema.optional(), - cssVars: registryItemCssVarsSchema.optional(), - source: z.string().optional(), - category: z.string().optional(), - subcategory: z.string().optional(), - chunks: z.array(blockChunkSchema).optional(), - docs: z.string().optional(), -}); - -export const registrySchema = z.array(registryEntrySchema); - -export type RegistryEntry = z.infer; - -export type Registry = z.infer; - -export const blockSchema = registryEntrySchema.extend({ - type: z.literal("registry:block"), - style: z.enum(["default"]), - component: z.any(), - container: z - .object({ - height: z.string().nullish(), - className: z.string().nullish(), - }) - .optional(), - code: z.string(), - highlightedCode: z.string(), -}); - -export type Block = z.infer; - -export type BlockChunk = z.infer; diff --git a/scripts/build-registry.mts b/scripts/build-registry.mts index f4f4464bd..6997939df 100644 --- a/scripts/build-registry.mts +++ b/scripts/build-registry.mts @@ -1,775 +1,156 @@ -// @sts-nocheck -import { existsSync, promises as fs } from "fs"; -import { tmpdir } from "os"; +import { exec } from "child_process"; +import { promises as fs } from "fs"; import path from "path"; -import { cwd } from "process"; -import template from "lodash.template"; import { rimraf } from "rimraf"; -import { Project, ScriptKind, SyntaxKind } from "ts-morph"; +import { registryItemSchema, type Registry } from "shadcn/registry"; import { z } from "zod"; -import { registry } from "../registry"; -import { baseColors } from "../registry/registry-base-colors"; -import { colorMapping, colors } from "../registry/registry-colors"; -import { styles } from "../registry/registry-styles"; -import { - Registry, - RegistryEntry, - registryEntrySchema, - registryItemTypeSchema, - registrySchema, -} from "../registry/schema"; - -const REGISTRY_PATH = path.join(process.cwd(), "public/r"); - -const REGISTRY_INDEX_WHITELIST: z.infer[] = [ - "registry:ui", - "registry:lib", - "registry:hook", - "registry:theme", - "registry:block", -]; - -const project = new Project({ - compilerOptions: {}, -}); - -async function createTempSourceFile(filename: string) { - const dir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-")); - return path.join(dir, filename); -} - -// ---------------------------------------------------------------------------- -// Build __registry__/index.tsx. -// ---------------------------------------------------------------------------- -async function buildRegistry(registry: Registry) { - let index = `// @ts-nocheck +import { examples } from "../registry/registry-examples"; +import { lib } from "../registry/registry-lib"; +import { ui } from "../registry/registry-ui"; + +const DEPRECATED_ITEMS = ["toast"]; + +const registry = { + name: "Magic UI", + homepage: "https://magicui.design", + items: z.array(registryItemSchema).parse( + [ + { + name: "index", + type: "registry:style", + dependencies: [ + "tailwindcss-animate", + "class-variance-authority", + "lucide-react", + ], + registryDependencies: ["utils"], + tailwind: { + config: { + plugins: [`require("tailwindcss-animate")`], + }, + }, + cssVars: {}, + files: [], + }, + ...ui, + ...examples, + ...lib, + ].filter((item) => { + return !DEPRECATED_ITEMS.includes(item.name); + }), + ), +} satisfies Registry; + +async function buildRegistryIndex() { + let index = `/* eslint-disable @typescript-eslint/ban-ts-comment */ +/* eslint-disable @typescript-eslint/no-explicit-any */ +// @ts-nocheck // This file is autogenerated by scripts/build-registry.ts // Do not edit this file directly. import * as React from "react" -export const Index: Record = { -`; - - for (const style of styles) { - index += ` "${style.name}": {`; - - // Build style index. - for (const item of registry) { - const resolveFiles = item.files?.map( - (file) => - `registry/${style.name}/${ - typeof file === "string" ? file : file.path - }`, - ); - if (!resolveFiles) { - continue; - } - - const type = item.type.split(":")[1]; - let sourceFilename = ""; - - let chunks: any = []; - if (item.type === "registry:block") { - const file = resolveFiles[0]; - const filename = path.basename(file); - const raw = await fs.readFile(file, "utf8"); - const tempFile = await createTempSourceFile(filename); - const sourceFile = project.createSourceFile(tempFile, raw, { - scriptKind: ScriptKind.TSX, - }); - - // Find all imports. - const imports = new Map< - string, - { - module: string; - text: string; - isDefault?: boolean; - } - >(); - sourceFile.getImportDeclarations().forEach((node) => { - // eslint-disable-next-line - const module = node.getModuleSpecifier().getLiteralValue(); - node.getNamedImports().forEach((item) => { - imports.set(item.getText(), { - module, - text: node.getText(), - }); - }); - - const defaultImport = node.getDefaultImport(); - if (defaultImport) { - imports.set(defaultImport.getText(), { - module, - text: defaultImport.getText(), - isDefault: true, - }); - } - }); - - // Find all opening tags with x-chunk attribute. - const components = sourceFile - .getDescendantsOfKind(SyntaxKind.JsxOpeningElement) - .filter((node) => { - return node.getAttribute("x-chunk") !== undefined; - }); - - chunks = await Promise.all( - components.map(async (component, index) => { - const chunkName = `${item.name}-chunk-${index}`; - - // Get the value of x-chunk attribute. - const attr = component - .getAttributeOrThrow("x-chunk") - .asKindOrThrow(SyntaxKind.JsxAttribute); - - const description = attr - .getInitializerOrThrow() - .asKindOrThrow(SyntaxKind.StringLiteral) - .getLiteralValue(); - - // Delete the x-chunk attribute. - attr.remove(); - - // Add a new attribute to the component. - component.addAttribute({ - name: "x-chunk", - initializer: `"${chunkName}"`, - }); - - // Get the value of x-chunk-container attribute. - const containerAttr = component - .getAttribute("x-chunk-container") - ?.asKindOrThrow(SyntaxKind.JsxAttribute); - - const containerClassName = containerAttr - ?.getInitializer() - ?.asKindOrThrow(SyntaxKind.StringLiteral) - .getLiteralValue(); - - containerAttr?.remove(); - - const parentJsxElement = component.getParentIfKindOrThrow( - SyntaxKind.JsxElement, - ); - - // Find all opening tags on component. - const children = parentJsxElement - .getDescendantsOfKind(SyntaxKind.JsxOpeningElement) - .map((node) => { - return node.getTagNameNode().getText(); - }) - .concat( - parentJsxElement - .getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement) - .map((node) => { - return node.getTagNameNode().getText(); - }), - ); - - const componentImports = new Map< - string, - string | string[] | Set - >(); - children.forEach((child) => { - const importLine = imports.get(child); - if (importLine) { - const imports = componentImports.get(importLine.module) || []; - - const newImports = importLine.isDefault - ? importLine.text - : new Set([...imports, child]); - - componentImports.set( - importLine.module, - importLine?.isDefault ? newImports : Array.from(newImports), - ); - } - }); - - const componnetImportLines = Array.from( - componentImports.keys(), - ).map((key) => { - const values = componentImports.get(key); - const specifier = Array.isArray(values) - ? `{${values.join(",")}}` - : values; - - return `import ${specifier} from "${key}"`; - }); - - const code = ` - 'use client' - - ${componnetImportLines.join("\n")} - - export default function Component() { - return (${parentJsxElement.getText()}) - }`; - - const targetFile = file.replace(item.name, `${chunkName}`); - const targetFilePath = path.join( - cwd(), - `registry/${style.name}/${type}/${chunkName}.tsx`, - ); - - // Write component file. - rimraf.sync(targetFilePath); - await fs.writeFile(targetFilePath, code, "utf8"); - - return { - name: chunkName, - description, - component: `React.lazy(() => import("@/registry/${style.name}/${type}/${chunkName}")),`, - file: targetFile, - container: { - className: containerClassName, - }, - }; - }), - ); - - // // Write the source file for blocks only. - sourceFilename = `__registry__/${style.name}/${type}/${item.name}.tsx`; - - if (item.files) { - const files = item.files.map((file) => - typeof file === "string" - ? { type: "registry:page", path: file } - : file, - ); - if (files?.length) { - sourceFilename = `__registry__/${style.name}/${files[0].path}`; - } - } - - const sourcePath = path.join(process.cwd(), sourceFilename); - if (!existsSync(sourcePath)) { - await fs.mkdir(sourcePath, { recursive: true }); - } - - rimraf.sync(sourcePath); - await fs.writeFile(sourcePath, sourceFile.getText()); - } - - let componentPath = `@/registry/${style.name}/${type}/${item.name}`; - - if (item.files) { - const files = item.files.map((file) => - typeof file === "string" - ? { type: "registry:page", path: file } - : file, - ); - if (files?.length) { - componentPath = `@/registry/${style.name}/${files[0].path}`; - } - } - - index += ` - "${item.name}": { - name: "${item.name}", - type: "${item.type}", - registryDependencies: ${JSON.stringify(item.registryDependencies)}, - files: [${resolveFiles.map((file) => `"${file}"`)}], - component: React.lazy(() => import("${componentPath}")), - source: "${sourceFilename}", - category: "${item.category}", - subcategory: "${item.subcategory}", - chunks: [${chunks.map( - (chunk) => `{ - name: "${chunk.name}", - description: "${chunk.description ?? "No description"}", - component: ${chunk.component} - file: "${chunk.file}", - container: { - className: "${chunk.container.className}" - } - }`, - )}] - },`; +export const Index: Record = {`; + for (const item of registry.items) { + const resolveFiles = item.files?.map((file) => `registry/${file.path}`); + if (!resolveFiles) { + continue; } + const componentPath = item.files?.[0]?.path + ? `@/registry/${item.files[0].path}` + : ""; + index += ` + "${item.name}": { + name: ${JSON.stringify(item.name)}, + description: ${JSON.stringify(item.description ?? "")}, + type: "${item.type}", + registryDependencies: ${JSON.stringify(item.registryDependencies)}, + files: [${item.files?.map((file) => { + const filePath = `registry/${typeof file === "string" ? file : file.path}`; + const resolvedFilePath = path.resolve(filePath); + return typeof file === "string" + ? `"${resolvedFilePath}"` + : `{ + path: "${filePath}", + type: "${file.type}", + target: "${file.target ?? ""}" + }`; + })}], + component: ${ + componentPath + ? `React.lazy(async () => { + const mod = await import("${componentPath}") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name + return { default: mod.default || mod[exportName] } + })` + : "null" + }, + meta: ${JSON.stringify(item.meta)}, },`; } index += ` -} -`; - - // ---------------------------------------------------------------------------- - // Build registry/index.json. - // ---------------------------------------------------------------------------- - const items = registry - .filter((item) => ["registry:ui"].includes(item.type)) - .map((item) => { - return { - ...item, - files: item.files?.map((_file) => { - const file = - typeof _file === "string" - ? { - path: _file, - type: item.type, - } - : _file; - - return file; - }), - }; - }); - const registryJson = JSON.stringify(items, null, 2); - rimraf.sync(path.join(REGISTRY_PATH, "index.json")); - await fs.writeFile( - path.join(REGISTRY_PATH, "index.json"), - registryJson, - "utf8", - ); + }`; // Write style index. rimraf.sync(path.join(process.cwd(), "__registry__/index.tsx")); await fs.writeFile(path.join(process.cwd(), "__registry__/index.tsx"), index); } -// ---------------------------------------------------------------------------- -// Build registry/styles/[style]/[name].json. -// ---------------------------------------------------------------------------- -async function buildStyles(registry: Registry) { - for (const style of styles) { - const targetPath = path.join(REGISTRY_PATH, "styles", style.name); - - // Create directory if it doesn't exist. - if (!existsSync(targetPath)) { - await fs.mkdir(targetPath, { recursive: true }); - } - - for (const item of registry) { - if (!REGISTRY_INDEX_WHITELIST.includes(item.type)) { - continue; - } - - let files; - if (item.files) { - files = await Promise.all( - item.files.map(async (_file) => { - const file = - typeof _file === "string" - ? { - path: _file, - type: item.type, - content: "", - target: "", - } - : _file; - - const content = await fs.readFile( - path.join(process.cwd(), "registry", style.name, file.path), - "utf8", - ); - - const tempFile = await createTempSourceFile(file.path); - const sourceFile = project.createSourceFile(tempFile, content, { - scriptKind: ScriptKind.TSX, - }); - - sourceFile.getVariableDeclaration("iframeHeight")?.remove(); - sourceFile.getVariableDeclaration("containerClassName")?.remove(); - sourceFile.getVariableDeclaration("description")?.remove(); - - return { - path: file.path, - type: file.type, - content: sourceFile.getText(), - target: file.target, - }; - }), - ); - } - - const payload = registryEntrySchema - .omit({ - source: true, - category: true, - subcategory: true, - chunks: true, - }) - .safeParse({ - ...item, - files, - }); - - if (payload.success) { - await fs.writeFile( - path.join(targetPath, `${item.name}.json`), - JSON.stringify(payload.data, null, 2), - "utf8", - ); - } - } - } - - // ---------------------------------------------------------------------------- - // Build registry/styles/index.json. - // ---------------------------------------------------------------------------- - const stylesJson = JSON.stringify(styles, null, 2); - await fs.writeFile( - path.join(REGISTRY_PATH, "styles/index.json"), - stylesJson, - "utf8", - ); -} - -// ---------------------------------------------------------------------------- -// Build registry/styles/[name]/index.json. -// ---------------------------------------------------------------------------- -async function buildStylesIndex() { - for (const style of styles) { - const targetPath = path.join(REGISTRY_PATH, "styles", style.name); - - const dependencies = [ - "tailwindcss-animate", - "class-variance-authority", - "lucide-react", - ]; - - const payload: RegistryEntry = { - name: style.name, - type: "registry:style", - dependencies, - registryDependencies: ["utils"], - tailwind: { - config: { - plugins: [`require("tailwindcss-animate")`], - }, - }, - cssVars: {}, - files: [], - }; - - await fs.writeFile( - path.join(targetPath, "index.json"), - JSON.stringify(payload, null, 2), - "utf8", - ); - } -} +async function buildRegistryJsonFile() { + // 1. Fix the path for registry items. + const fixedRegistry = { + ...registry, + items: registry.items.map((item) => { + const files = item.files?.map((file) => { + return { + ...file, + path: `registry/${file.path}`, + }; + }); -// ---------------------------------------------------------------------------- -// Build registry/colors/index.json. -// ---------------------------------------------------------------------------- -async function buildThemes() { - const colorsTargetPath = path.join(REGISTRY_PATH, "colors"); - rimraf.sync(colorsTargetPath); - if (!existsSync(colorsTargetPath)) { - await fs.mkdir(colorsTargetPath, { recursive: true }); - } - - const colorsData: Record = {}; - for (const [color, value] of Object.entries(colors)) { - if (typeof value === "string") { - colorsData[color] = value; - continue; - } - - if (Array.isArray(value)) { - colorsData[color] = value.map((item) => ({ + return { ...item, - rgbChannel: item.rgb.replace(/^rgb\((\d+),(\d+),(\d+)\)$/, "$1 $2 $3"), - hslChannel: item.hsl.replace( - /^hsl\(([\d.]+),([\d.]+%),([\d.]+%)\)$/, - "$1 $2 $3", - ), - })); - continue; - } - - if (typeof value === "object") { - colorsData[color] = { - ...value, - rgbChannel: value.rgb.replace(/^rgb\((\d+),(\d+),(\d+)\)$/, "$1 $2 $3"), - hslChannel: value.hsl.replace( - /^hsl\(([\d.]+),([\d.]+%),([\d.]+%)\)$/, - "$1 $2 $3", - ), + files, }; - continue; - } - } + }), + }; + // 2. Write the content of the registry to `registry.json` + rimraf.sync(path.join(process.cwd(), `registry.json`)); await fs.writeFile( - path.join(colorsTargetPath, "index.json"), - JSON.stringify(colorsData, null, 2), - "utf8", + path.join(process.cwd(), `registry.json`), + JSON.stringify(fixedRegistry, null, 2), ); - - // ---------------------------------------------------------------------------- - // Build registry/colors/[base].json. - // ---------------------------------------------------------------------------- - const BASE_STYLES = `@tailwind base; -@tailwind components; -@tailwind utilities; - `; - - const BASE_STYLES_WITH_VARIABLES = `@tailwind base; -@tailwind components; -@tailwind utilities; - -@layer base { - :root { - --background: <%- colors.light["background"] %>; - --foreground: <%- colors.light["foreground"] %>; - --card: <%- colors.light["card"] %>; - --card-foreground: <%- colors.light["card-foreground"] %>; - --popover: <%- colors.light["popover"] %>; - --popover-foreground: <%- colors.light["popover-foreground"] %>; - --primary: <%- colors.light["primary"] %>; - --primary-foreground: <%- colors.light["primary-foreground"] %>; - --secondary: <%- colors.light["secondary"] %>; - --secondary-foreground: <%- colors.light["secondary-foreground"] %>; - --muted: <%- colors.light["muted"] %>; - --muted-foreground: <%- colors.light["muted-foreground"] %>; - --accent: <%- colors.light["accent"] %>; - --accent-foreground: <%- colors.light["accent-foreground"] %>; - --destructive: <%- colors.light["destructive"] %>; - --destructive-foreground: <%- colors.light["destructive-foreground"] %>; - --border: <%- colors.light["border"] %>; - --input: <%- colors.light["input"] %>; - --ring: <%- colors.light["ring"] %>; - --radius: 0.5rem; - --chart-1: <%- colors.light["chart-1"] %>; - --chart-2: <%- colors.light["chart-2"] %>; - --chart-3: <%- colors.light["chart-3"] %>; - --chart-4: <%- colors.light["chart-4"] %>; - --chart-5: <%- colors.light["chart-5"] %>; - } - - .dark { - --background: <%- colors.dark["background"] %>; - --foreground: <%- colors.dark["foreground"] %>; - --card: <%- colors.dark["card"] %>; - --card-foreground: <%- colors.dark["card-foreground"] %>; - --popover: <%- colors.dark["popover"] %>; - --popover-foreground: <%- colors.dark["popover-foreground"] %>; - --primary: <%- colors.dark["primary"] %>; - --primary-foreground: <%- colors.dark["primary-foreground"] %>; - --secondary: <%- colors.dark["secondary"] %>; - --secondary-foreground: <%- colors.dark["secondary-foreground"] %>; - --muted: <%- colors.dark["muted"] %>; - --muted-foreground: <%- colors.dark["muted-foreground"] %>; - --accent: <%- colors.dark["accent"] %>; - --accent-foreground: <%- colors.dark["accent-foreground"] %>; - --destructive: <%- colors.dark["destructive"] %>; - --destructive-foreground: <%- colors.dark["destructive-foreground"] %>; - --border: <%- colors.dark["border"] %>; - --input: <%- colors.dark["input"] %>; - --ring: <%- colors.dark["ring"] %>; - --chart-1: <%- colors.dark["chart-1"] %>; - --chart-2: <%- colors.dark["chart-2"] %>; - --chart-3: <%- colors.dark["chart-3"] %>; - --chart-4: <%- colors.dark["chart-4"] %>; - --chart-5: <%- colors.dark["chart-5"] %>; - } -} - -@layer base { - * { - @apply border-border; - } - body { - @apply bg-background text-foreground; - } -}`; - - for (const baseColor of ["slate", "gray", "zinc", "neutral", "stone"]) { - const base: Record = { - inlineColors: {}, - cssVars: {}, - }; - for (const [mode, values] of Object.entries(colorMapping)) { - base["inlineColors"][mode] = {}; - base["cssVars"][mode] = {}; - for (const [key, value] of Object.entries(values)) { - if (typeof value === "string") { - // Chart colors do not have a 1-to-1 mapping with tailwind colors. - if (key.startsWith("chart-")) { - base["cssVars"][mode][key] = value; - continue; - } - - const resolvedColor = value.replace(/{{base}}-/g, `${baseColor}-`); - base["inlineColors"][mode][key] = resolvedColor; - - const [resolvedBase, scale] = resolvedColor.split("-"); - const color = scale - ? colorsData[resolvedBase].find( - (item: any) => item.scale === parseInt(scale), - ) - : colorsData[resolvedBase]; - if (color) { - base["cssVars"][mode][key] = color.hslChannel; - } - } - } - } - - // Build css vars. - base["inlineColorsTemplate"] = template(BASE_STYLES)({}); - base["cssVarsTemplate"] = template(BASE_STYLES_WITH_VARIABLES)({ - colors: base["cssVars"], - }); - - await fs.writeFile( - path.join(REGISTRY_PATH, `colors/${baseColor}.json`), - JSON.stringify(base, null, 2), - "utf8", - ); - - // ---------------------------------------------------------------------------- - // Build registry/themes.css - // ---------------------------------------------------------------------------- - const THEME_STYLES_WITH_VARIABLES = ` -.theme-<%- theme %> { - --background: <%- colors.light["background"] %>; - --foreground: <%- colors.light["foreground"] %>; - - --muted: <%- colors.light["muted"] %>; - --muted-foreground: <%- colors.light["muted-foreground"] %>; - - --popover: <%- colors.light["popover"] %>; - --popover-foreground: <%- colors.light["popover-foreground"] %>; - - --card: <%- colors.light["card"] %>; - --card-foreground: <%- colors.light["card-foreground"] %>; - - --border: <%- colors.light["border"] %>; - --input: <%- colors.light["input"] %>; - - --primary: <%- colors.light["primary"] %>; - --primary-foreground: <%- colors.light["primary-foreground"] %>; - - --secondary: <%- colors.light["secondary"] %>; - --secondary-foreground: <%- colors.light["secondary-foreground"] %>; - - --accent: <%- colors.light["accent"] %>; - --accent-foreground: <%- colors.light["accent-foreground"] %>; - - --destructive: <%- colors.light["destructive"] %>; - --destructive-foreground: <%- colors.light["destructive-foreground"] %>; - - --ring: <%- colors.light["ring"] %>; - - --radius: <%- colors.light["radius"] %>; } -.dark .theme-<%- theme %> { - --background: <%- colors.dark["background"] %>; - --foreground: <%- colors.dark["foreground"] %>; - - --muted: <%- colors.dark["muted"] %>; - --muted-foreground: <%- colors.dark["muted-foreground"] %>; - - --popover: <%- colors.dark["popover"] %>; - --popover-foreground: <%- colors.dark["popover-foreground"] %>; - - --card: <%- colors.dark["card"] %>; - --card-foreground: <%- colors.dark["card-foreground"] %>; - - --border: <%- colors.dark["border"] %>; - --input: <%- colors.dark["input"] %>; - - --primary: <%- colors.dark["primary"] %>; - --primary-foreground: <%- colors.dark["primary-foreground"] %>; - - --secondary: <%- colors.dark["secondary"] %>; - --secondary-foreground: <%- colors.dark["secondary-foreground"] %>; - - --accent: <%- colors.dark["accent"] %>; - --accent-foreground: <%- colors.dark["accent-foreground"] %>; - - --destructive: <%- colors.dark["destructive"] %>; - --destructive-foreground: <%- colors.dark["destructive-foreground"] %>; - - --ring: <%- colors.dark["ring"] %>; -}`; - - const themeCSS = []; - for (const theme of baseColors) { - themeCSS.push( - // @ts-ignore - template(THEME_STYLES_WITH_VARIABLES)({ - colors: theme.cssVars, - theme: theme.name, - }), - ); - } - - await fs.writeFile( - path.join(REGISTRY_PATH, `themes.css`), - themeCSS.join("\n"), - "utf8", +async function buildRegistry() { + return new Promise((resolve, reject) => { + const process = exec( + `pnpm dlx shadcn build registry.json --output ../public/r/`, ); - // ---------------------------------------------------------------------------- - // Build registry/themes/[theme].json - // ---------------------------------------------------------------------------- - rimraf.sync(path.join(REGISTRY_PATH, "themes")); - for (const baseColor of ["slate", "gray", "zinc", "neutral", "stone"]) { - const payload: Record = { - name: baseColor, - label: baseColor.charAt(0).toUpperCase() + baseColor.slice(1), - cssVars: {}, - }; - for (const [mode, values] of Object.entries(colorMapping)) { - payload.cssVars[mode] = {}; - for (const [key, value] of Object.entries(values)) { - if (typeof value === "string") { - const resolvedColor = value.replace(/{{base}}-/g, `${baseColor}-`); - payload.cssVars[mode][key] = resolvedColor; - - const [resolvedBase, scale] = resolvedColor.split("-"); - const color = scale - ? colorsData[resolvedBase].find( - (item: any) => item.scale === parseInt(scale), - ) - : colorsData[resolvedBase]; - if (color) { - payload["cssVars"][mode][key] = color.hslChannel; - } - } - } + process.on("exit", (code) => { + if (code === 0) { + resolve(undefined); + } else { + reject(new Error(`Process exited with code ${code}`)); } - - const targetPath = path.join(REGISTRY_PATH, "themes"); - - // Create directory if it doesn't exist. - if (!existsSync(targetPath)) { - await fs.mkdir(targetPath, { recursive: true }); - } - - await fs.writeFile( - path.join(targetPath, `${payload.name}.json`), - JSON.stringify(payload, null, 2), - "utf8", - ); - } - } + }); + }); } try { - const result = registrySchema.safeParse(registry); - - if (!result.success) { - console.error(result.error); - process.exit(1); - } + console.log("🗂️ Building registry/__index__.tsx..."); + await buildRegistryIndex(); - await buildRegistry(result.data); - await buildStyles(result.data); - await buildStylesIndex(); - await buildThemes(); + console.log("💅 Building registry.json..."); + await buildRegistryJsonFile(); - console.log("✅ Done!"); + console.log("🏗️ Building registry..."); + await buildRegistry(); } catch (error) { console.error(error); process.exit(1); diff --git a/tsconfig.json b/tsconfig.json index 8005167fd..4c1c89880 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -14,7 +14,7 @@ "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "node", + "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", @@ -28,12 +28,12 @@ "@/*": [ "./*" ], - "@/components/magicui/*": [ - "./registry/default/magicui/*" - ], - "@/components/example/*": [ - "./registry/default/example/*" - ], + // "@/components/magicui/*": [ + // "registry/magicui/*" + // ], + // "@/components/example/*": [ + // "registry/example/*" + // ], "content-collections": ["./.content-collections/generated"] } }, @@ -48,7 +48,5 @@ "node_modules", "packages/**/*", "scripts/**/*", - "scripts/build-registry.ts", - "__registry__" ] } \ No newline at end of file