{"name":"SmoothUI Registry","homepage":"https://smoothui.dev/","items":[{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"cta-1","type":"registry:ui","title":"cta-1","description":"Centered CTA block with radial glow background","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":["https://smoothui.dev/r/smooth-button.json"],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport SmoothButton from \"@repo/smoothui/components/smooth-button\";\nimport { motion, useReducedMotion } from \"motion/react\";\n\nconst SPRING = {\n type: \"spring\" as const,\n duration: 0.25,\n bounce: 0.1,\n};\n\nexport function CtaCentered() {\n const shouldReduceMotion = useReducedMotion();\n\n return (\n
\n
\n \n \n \n Ready to build something amazing?\n \n

\n Start building with beautifully animated components today. Free,\n open source, and ready for production.\n

\n
\n \n Get Started\n \n \n Learn More\n \n
\n \n
\n
\n );\n}\n\nexport default CtaCentered;\n","target":"components/smoothui/cta-1/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"cta-2","type":"registry:ui","title":"cta-2","description":"Split layout CTA block with text and illustration","author":"Eduardo Calvo ","dependencies":["@smoothui/data","motion"],"devDependencies":[],"registryDependencies":["https://smoothui.dev/r/smooth-button.json"],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport SmoothButton from \"@repo/smoothui/components/smooth-button\";\nimport { getImageKitUrl } from \"@smoothui/data\";\nimport { motion, useReducedMotion } from \"motion/react\";\n\nconst SPRING = {\n type: \"spring\" as const,\n duration: 0.25,\n bounce: 0.1,\n};\n\nexport function CtaSplit() {\n const shouldReduceMotion = useReducedMotion();\n\n return (\n
\n
\n
\n \n \n Ship faster with animated components\n \n

\n Stop building UI from scratch. Use production-ready, beautifully\n animated components that work with your existing design system.\n

\n
\n \n Browse Components\n \n \n View on GitHub\n \n
\n \n\n \n
\n \n
\n \n
\n
\n
\n );\n}\n\nexport default CtaSplit;\n","target":"components/smoothui/cta-2/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"cta-3","type":"registry:ui","title":"cta-3","description":"Compact banner CTA block","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":["https://smoothui.dev/r/smooth-button.json"],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport SmoothButton from \"@repo/smoothui/components/smooth-button\";\nimport { motion, useReducedMotion } from \"motion/react\";\n\nconst SPRING = {\n type: \"spring\" as const,\n duration: 0.25,\n bounce: 0.1,\n};\n\nexport function CtaBanner() {\n const shouldReduceMotion = useReducedMotion();\n\n return (\n
\n
\n \n
\n
\n \n Start building today\n \n

\n Install any component with a single command.\n

\n
\n Get Started →\n
\n \n
\n
\n );\n}\n\nexport default CtaBanner;\n","target":"components/smoothui/cta-3/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"faq-1","type":"registry:ui","title":"faq-1","description":"FAQ grid block with categorized tabs and icons","author":"Eduardo Calvo ","dependencies":["lucide-react","motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport {\n Activity,\n Clock,\n DollarSign,\n Download,\n Globe,\n HelpCircle,\n Lock,\n MessageCircle,\n Scale,\n Settings,\n ShoppingBag,\n Undo2,\n Users,\n WalletCards,\n Zap,\n} from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { useState } from \"react\";\n\nconst ANIMATION_DURATION = 0.3;\nconst SPRING_STIFFNESS = 500;\nconst SPRING_DAMPING = 30;\nconst HOVER_SCALE = 1.02;\nconst TAP_SCALE = 0.98;\nconst FAQ_STAGGER_DELAY = 0.1;\nconst INITIAL_Y_OFFSET = 20;\nconst EXIT_Y_OFFSET = -20;\n\nconst iconMap = {\n Clock,\n WalletCards,\n ShoppingBag,\n Globe,\n Scale,\n Activity,\n DollarSign,\n Lock,\n Undo2,\n Download,\n Settings,\n HelpCircle,\n MessageCircle,\n Users,\n Zap,\n};\n\ninterface FaqsGridProps {\n categories?: Array<{\n name: string;\n id: string;\n faqs: Array<{\n question: string;\n answer: string;\n icon: string;\n }>;\n }>;\n description?: string;\n title?: string;\n}\n\nexport function FaqsGrid({\n title = \"FAQs\",\n description = \"Discover quick and comprehensive answers to common questions about our platform, services, and features.\",\n categories = [\n {\n name: \"General\",\n id: \"general\",\n faqs: [\n {\n question: \"How do I install Smoothui?\",\n answer:\n \"You can install Smoothui using npm or yarn. Run `npm install smoothui` or `yarn add smoothui` in your project directory. It's completely free and open source.\",\n icon: \"Download\",\n },\n {\n question: \"What are the system requirements?\",\n answer:\n \"Smoothui works with React 16.8+ and supports all modern browsers. No additional dependencies are required beyond React and Tailwind CSS.\",\n icon: \"Settings\",\n },\n {\n question: \"Is Smoothui free to use?\",\n answer:\n \"Yes! Smoothui is completely free and open source. You can start using it immediately without any trial limitations or hidden costs.\",\n icon: \"Zap\",\n },\n ],\n },\n {\n name: \"Components\",\n id: \"components\",\n faqs: [\n {\n question: \"How many components are included?\",\n answer:\n \"Smoothui includes over 50+ pre-built components including buttons, forms, navigation, modals, animations, and more. New components are added regularly.\",\n icon: \"HelpCircle\",\n },\n {\n question: \"Can I customize the styling?\",\n answer:\n \"Absolutely! All components are fully customizable using CSS variables, Tailwind classes, or custom CSS. You have complete control over the appearance.\",\n icon: \"Settings\",\n },\n {\n question: \"Are the components accessible?\",\n answer:\n \"Yes, all components follow WCAG guidelines and include proper ARIA attributes for screen readers and keyboard navigation. Accessibility is a top priority.\",\n icon: \"Users\",\n },\n ],\n },\n {\n name: \"Support\",\n id: \"support\",\n faqs: [\n {\n question: \"How can I get help?\",\n answer:\n \"You can reach out to our community on Discord, GitHub discussions, or email our support team directly. We're here to help you succeed.\",\n icon: \"MessageCircle\",\n },\n {\n question: \"Do you offer custom development?\",\n answer:\n \"Yes, we offer custom component development and consulting services for enterprise clients. Contact us to discuss your specific needs.\",\n icon: \"Users\",\n },\n {\n question: \"What's your response time?\",\n answer:\n \"We typically respond to support requests within 24 hours during business days. For urgent issues, please mark them as high priority.\",\n icon: \"Clock\",\n },\n ],\n },\n ],\n}: FaqsGridProps) {\n const [activeTab, setActiveTab] = useState(0);\n\n return (\n
\n
\n
\n

{title}

\n

\n {description}\n

\n
\n\n {/* Tabs Navigation */}\n
\n
\n {categories.map((category, index) => (\n setActiveTab(index)}\n type=\"button\"\n whileHover={{ scale: HOVER_SCALE }}\n whileTap={{ scale: TAP_SCALE }}\n >\n {category.name}\n {activeTab === index && (\n \n )}\n \n ))}\n
\n
\n\n {/* Tab Content */}\n
\n \n \n
\n
\n {categories[activeTab].faqs.map((faq, faqIndex) => {\n const IconComponent =\n iconMap[faq.icon as keyof typeof iconMap] || HelpCircle;\n\n return (\n \n
\n \n
\n
\n {faq.question}\n
\n
{faq.answer}
\n \n );\n })}\n
\n
\n \n \n
\n
\n
\n );\n}\n\nexport default FaqsGrid;\n","target":"components/smoothui/faq-1/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"faq-2","type":"registry:ui","title":"faq-2","description":"FAQ accordion block with expandable questions","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { useState } from \"react\";\n\nconst ANIMATION_DURATION = 0.6;\nconst STAGGER_DELAY = 0.1;\nconst INITIAL_Y_OFFSET = 20;\nconst HOVER_SCALE = 1.01;\nconst TAP_SCALE = 0.99;\nconst ROTATION_OPEN = 180;\nconst ROTATION_CLOSED = 0;\nconst CONTENT_DELAY = 0.1;\nconst INITIAL_CONTENT_Y = -10;\n\ninterface FaqsAccordionProps {\n description?: string;\n faqs?: Array<{\n question: string;\n answer: string;\n }>;\n title?: string;\n}\n\nexport function FaqsAccordion({\n title = \"Frequently Asked Questions\",\n description = \"Find answers to common questions about our product and services\",\n faqs = [\n {\n question: \"What is Smoothui?\",\n answer:\n \"Smoothui is a modern UI component library that provides beautiful, animated components for building stunning user interfaces. It includes pre-built components with smooth animations and customizable themes.\",\n },\n {\n question: \"How do I get started?\",\n answer:\n \"Getting started is easy! Simply install the package via npm or yarn, import the components you need, and start building. We provide comprehensive documentation and examples to help you get up and running quickly.\",\n },\n {\n question: \"Is it free to use?\",\n answer:\n \"Yes! Smoothui is completely free and open source. You can use it in both personal and commercial projects without any restrictions. We believe in making beautiful UI components accessible to everyone.\",\n },\n {\n question: \"Can I customize the components?\",\n answer:\n \"Absolutely! All components are fully customizable. You can modify colors, spacing, animations, and more using CSS variables or by extending the component classes. We also provide a theming system for easy customization.\",\n },\n {\n question: \"What frameworks are supported?\",\n answer:\n \"Currently, Smoothui supports React and Next.js. We're working on expanding support to other popular frameworks like Vue, Svelte, and Angular in the coming months.\",\n },\n {\n question: \"How often do you release updates?\",\n answer:\n \"We release updates regularly, typically every 2-3 weeks. This includes new components, bug fixes, performance improvements, and new features. You can follow our changelog to stay updated on the latest releases.\",\n },\n ],\n}: FaqsAccordionProps) {\n const [openIndex, setOpenIndex] = useState(0);\n\n const toggleAccordion = (index: number) => {\n setOpenIndex(openIndex === index ? null : index);\n };\n\n return (\n
\n
\n \n

\n {title}\n

\n

\n {description}\n

\n \n\n
\n {faqs.map((faq, index) => (\n \n toggleAccordion(index)}\n type=\"button\"\n whileHover={{ scale: HOVER_SCALE }}\n whileTap={{ scale: TAP_SCALE }}\n >\n

\n {faq.question}\n

\n \n \n \n \n \n \n\n \n {openIndex === index && (\n \n \n

\n {faq.answer}\n

\n \n \n )}\n \n \n ))}\n
\n
\n
\n );\n}\n\nexport default FaqsAccordion;\n","target":"components/smoothui/faq-2/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"faq-3","type":"registry:ui","title":"faq-3","description":"Searchable FAQ section with filter animations","author":"Eduardo Calvo ","dependencies":["lucide-react","motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { ChevronDown, Search } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useMemo, useState } from \"react\";\n\nexport interface FaqSearchableProps {\n description?: string;\n faqs?: Array<{\n question: string;\n answer: string;\n }>;\n noResultsText?: string;\n searchPlaceholder?: string;\n title?: string;\n}\n\nconst defaultFaqs = [\n {\n question: \"How do I get started with SmoothUI?\",\n answer:\n \"Getting started is easy! Simply install the package via npm or pnpm, import the components you need, and start building. We provide comprehensive documentation and examples to help you get up and running quickly.\",\n },\n {\n question: \"Is SmoothUI free to use?\",\n answer:\n \"Yes! SmoothUI is completely free and open source. You can use it in both personal and commercial projects without any restrictions. We believe in making beautiful UI components accessible to everyone.\",\n },\n {\n question: \"What are the system requirements?\",\n answer:\n \"SmoothUI requires React 18 or later and works with Next.js 13+. You'll also need Node.js 18+ and a modern browser that supports CSS animations and transforms.\",\n },\n {\n question: \"Can I customize the animations?\",\n answer:\n \"Absolutely! All animations are fully customizable. You can modify timing, easing, and effects using Motion (Framer Motion) props. We also respect the prefers-reduced-motion setting for accessibility.\",\n },\n {\n question: \"How do I report bugs or issues?\",\n answer:\n \"You can report bugs by opening an issue on our GitHub repository. Please include a detailed description, steps to reproduce, and your environment details. We actively monitor and respond to issues.\",\n },\n {\n question: \"Is there enterprise support available?\",\n answer:\n \"Yes, we offer enterprise support packages that include priority bug fixes, dedicated support channels, custom component development, and SLA guarantees. Contact us for more information.\",\n },\n];\n\nexport function FaqSearchable({\n title = \"Frequently Asked Questions\",\n description = \"Search through our FAQ to find answers to your questions\",\n searchPlaceholder = \"Search questions...\",\n noResultsText = \"No matching questions found. Try a different search term.\",\n faqs = defaultFaqs,\n}: FaqSearchableProps) {\n const [searchQuery, setSearchQuery] = useState(\"\");\n const [openIndex, setOpenIndex] = useState(null);\n const shouldReduceMotion = useReducedMotion();\n\n const filteredFaqs = useMemo(() => {\n if (!searchQuery.trim()) {\n return faqs;\n }\n const query = searchQuery.toLowerCase();\n return faqs.filter(\n (faq) =>\n faq.question.toLowerCase().includes(query) ||\n faq.answer.toLowerCase().includes(query)\n );\n }, [faqs, searchQuery]);\n\n const toggleAccordion = (index: number) => {\n setOpenIndex(openIndex === index ? null : index);\n };\n\n const springTransition = shouldReduceMotion\n ? { duration: 0 }\n : { type: \"spring\" as const, duration: 0.25, bounce: 0.05 };\n\n const contentTransition = shouldReduceMotion\n ? { duration: 0 }\n : { type: \"spring\" as const, duration: 0.25, bounce: 0 };\n\n return (\n
\n
\n \n

\n {title}\n

\n

\n {description}\n

\n \n\n \n \n {\n setSearchQuery(e.target.value);\n setOpenIndex(null);\n }}\n placeholder={searchPlaceholder}\n type=\"text\"\n value={searchQuery}\n />\n \n\n
\n \n {filteredFaqs.length === 0 ? (\n \n

{noResultsText}

\n \n ) : (\n filteredFaqs.map((faq, index) => {\n const originalIndex = faqs.indexOf(faq);\n const isOpen = openIndex === originalIndex;\n\n return (\n \n toggleAccordion(originalIndex)}\n type=\"button\"\n >\n

\n {faq.question}\n

\n \n \n \n \n\n \n {isOpen && (\n \n
\n

\n {faq.answer}\n

\n
\n \n )}\n \n \n );\n })\n )}\n \n
\n
\n
\n );\n}\n\nexport default FaqSearchable;\n","target":"components/smoothui/faq-3/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"faq-4","type":"registry:ui","title":"faq-4","description":"Categorized FAQ section with tab navigation","author":"Eduardo Calvo ","dependencies":["lucide-react","motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { ChevronDown } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useState } from \"react\";\n\nexport interface FaqCategorizedProps {\n categories?: Array<{\n name: string;\n faqs: Array<{\n question: string;\n answer: string;\n }>;\n }>;\n description?: string;\n title?: string;\n}\n\nconst defaultCategories = [\n {\n name: \"Getting Started\",\n faqs: [\n {\n question: \"How do I set up SmoothUI in my project?\",\n answer:\n \"Setting up SmoothUI is straightforward. Install the package using npm or pnpm, then import the components you need. Our CLI tool can also help scaffold components directly into your project with the right dependencies.\",\n },\n {\n question: \"What are the minimum requirements?\",\n answer:\n \"SmoothUI requires React 18 or later, Next.js 13+, and Node.js 18+. You'll also need Tailwind CSS configured in your project. All modern browsers are supported.\",\n },\n {\n question: \"How do I add my first component?\",\n answer:\n \"Use our CLI command `npx shadcn@latest add @smoothui/component-name` to add any component. This will install the component with all its dependencies and place it in your components directory.\",\n },\n ],\n },\n {\n name: \"Billing\",\n faqs: [\n {\n question: \"Is SmoothUI free to use?\",\n answer:\n \"Yes, SmoothUI is completely free and open source under the MIT license. You can use it in personal and commercial projects without any cost or attribution requirements.\",\n },\n {\n question: \"Do you offer refunds?\",\n answer:\n \"Since SmoothUI is free, there are no purchases to refund. For any premium services or support packages we may offer in the future, our refund policy will be clearly stated.\",\n },\n {\n question: \"What payment methods do you accept?\",\n answer:\n \"Currently, all components are free. If we introduce premium features, we'll support major credit cards, PayPal, and other popular payment methods through our secure payment processor.\",\n },\n ],\n },\n {\n name: \"Technical\",\n faqs: [\n {\n question: \"Which browsers are supported?\",\n answer:\n \"SmoothUI supports all modern browsers including Chrome, Firefox, Safari, and Edge. We test across the latest versions and one version back for each browser to ensure compatibility.\",\n },\n {\n question: \"How does SmoothUI affect performance?\",\n answer:\n \"Components are optimized for performance with tree-shaking support, minimal bundle size, and hardware-accelerated animations. We only animate transform and opacity properties to ensure 60fps animations.\",\n },\n {\n question: \"Is TypeScript supported?\",\n answer:\n \"Absolutely! SmoothUI is built with TypeScript and provides full type definitions for all components. You get autocomplete, type checking, and inline documentation in supported editors.\",\n },\n {\n question: \"Can I customize component styles?\",\n answer:\n \"Yes, all components use Tailwind CSS and CSS variables for styling. You can override styles using className props, customize the design tokens, or modify the component source directly.\",\n },\n ],\n },\n];\n\nexport function FaqCategorized({\n title = \"Frequently Asked Questions\",\n description = \"Find answers organized by topic\",\n categories = defaultCategories,\n}: FaqCategorizedProps) {\n const [activeCategory, setActiveCategory] = useState(0);\n const [openIndex, setOpenIndex] = useState(null);\n const shouldReduceMotion = useReducedMotion();\n\n const springTransition = shouldReduceMotion\n ? { duration: 0 }\n : { type: \"spring\" as const, duration: 0.25, bounce: 0.05 };\n\n const contentTransition = shouldReduceMotion\n ? { duration: 0 }\n : { type: \"spring\" as const, duration: 0.25, bounce: 0 };\n\n const handleCategoryChange = (index: number) => {\n setActiveCategory(index);\n setOpenIndex(null);\n };\n\n const toggleAccordion = (index: number) => {\n setOpenIndex(openIndex === index ? null : index);\n };\n\n return (\n
\n
\n \n

\n {title}\n

\n

\n {description}\n

\n \n\n \n \n {categories.map((category, index) => (\n handleCategoryChange(index)}\n role=\"tab\"\n type=\"button\"\n >\n {category.name}\n {activeCategory === index && (\n \n )}\n \n ))}\n
\n \n\n \n \n
\n {categories[activeCategory].faqs.map((faq, index) => {\n const isOpen = openIndex === index;\n\n return (\n \n toggleAccordion(index)}\n type=\"button\"\n >\n

\n {faq.question}\n

\n \n \n \n \n\n \n {isOpen && (\n \n
\n

\n {faq.answer}\n

\n
\n \n )}\n \n \n );\n })}\n
\n \n \n \n
\n );\n}\n\nexport default FaqCategorized;\n","target":"components/smoothui/faq-4/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"features-1","type":"registry:ui","title":"features-1","description":"Feature grid block with animated cards","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useState } from \"react\";\n\nconst SPRING = {\n type: \"spring\" as const,\n duration: 0.25,\n bounce: 0.1,\n};\n\nconst features = [\n {\n title: \"Lightning Fast\",\n description:\n \"Optimized for performance with minimal bundle size and efficient rendering.\",\n icon: (\n \n \n \n ),\n },\n {\n title: \"Accessible\",\n description:\n \"Built with ARIA attributes, keyboard navigation, and reduced motion support.\",\n icon: (\n \n \n \n ),\n },\n {\n title: \"Customizable\",\n description:\n \"Fully customizable with Tailwind CSS classes and design tokens.\",\n icon: (\n \n \n \n ),\n },\n {\n title: \"TypeScript First\",\n description:\n \"Full TypeScript support with exported types for all component props.\",\n icon: (\n \n \n \n ),\n },\n {\n title: \"Animated\",\n description:\n \"Smooth spring animations powered by Motion with configurable easing.\",\n icon: (\n \n \n \n ),\n },\n {\n title: \"Open Source\",\n description:\n \"Free and open source. Install via the shadcn registry with one command.\",\n icon: (\n \n \n \n ),\n },\n];\n\nexport function FeaturesGrid() {\n const shouldReduceMotion = useReducedMotion();\n const [isHoverDevice, setIsHoverDevice] = useState(false);\n\n useEffect(() => {\n const mq = window.matchMedia(\"(hover: hover) and (pointer: fine)\");\n setIsHoverDevice(mq.matches);\n const handler = (e: MediaQueryListEvent) => setIsHoverDevice(e.matches);\n mq.addEventListener(\"change\", handler);\n return () => mq.removeEventListener(\"change\", handler);\n }, []);\n\n return (\n
\n
\n
\n
\n \n Everything you need to build\n \n

\n Production-ready components with animations, accessibility, and\n TypeScript built in.\n

\n
\n
    \n {features.map((feature, index) => (\n \n
    \n {feature.icon}\n
    \n

    \n {feature.title}\n

    \n

    \n {feature.description}\n

    \n \n ))}\n
\n
\n
\n
\n );\n}\n\nexport default FeaturesGrid;\n","target":"components/smoothui/features-1/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"features-2","type":"registry:ui","title":"features-2","description":"Bento grid features block with asymmetric layout","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { motion, useReducedMotion } from \"motion/react\";\n\nconst SPRING = {\n type: \"spring\" as const,\n duration: 0.25,\n bounce: 0.1,\n};\n\nconst features = [\n {\n title: \"Smart Analytics\",\n description:\n \"Real-time analytics dashboard with customizable metrics and beautiful visualizations.\",\n span: \"col-span-2 row-span-2\",\n accent: true,\n },\n {\n title: \"Team Collaboration\",\n description:\n \"Work together in real-time with built-in commenting and sharing.\",\n span: \"col-span-1\",\n },\n {\n title: \"API First\",\n description: \"RESTful API with comprehensive documentation and SDKs.\",\n span: \"col-span-1\",\n },\n {\n title: \"Global CDN\",\n description: \"Lightning-fast delivery from edge locations worldwide.\",\n span: \"col-span-1\",\n },\n {\n title: \"Security\",\n description:\n \"Enterprise-grade security with SOC 2 compliance and encryption.\",\n span: \"col-span-1\",\n },\n];\n\nexport function FeaturesBento() {\n const shouldReduceMotion = useReducedMotion();\n\n return (\n
\n
\n
\n
\n \n Built for modern teams\n \n

\n A complete platform with everything you need to ship faster.\n

\n
\n
\n {features.map((feature, index) => (\n \n

\n {feature.title}\n

\n

\n {feature.description}\n

\n \n ))}\n
\n
\n
\n
\n );\n}\n\nexport default FeaturesBento;\n","target":"components/smoothui/features-2/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"features-3","type":"registry:ui","title":"features-3","description":"Alternating features block with side-by-side layout","author":"Eduardo Calvo ","dependencies":["@smoothui/data","motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { getImageKitUrl } from \"@smoothui/data\";\nimport { motion, useReducedMotion } from \"motion/react\";\n\nconst SPRING = {\n type: \"spring\" as const,\n duration: 0.25,\n bounce: 0.1,\n};\n\nconst features = [\n {\n title: \"Intuitive Design\",\n description:\n \"Every component is designed with usability in mind. Clean interfaces that your users will love from the first interaction.\",\n image: getImageKitUrl(\"/images/designerworking.webp\", {\n width: 800,\n quality: 85,\n format: \"auto\",\n }),\n imageAlt: \"Designer working on user interface\",\n },\n {\n title: \"Blazing Performance\",\n description:\n \"Optimized animations that only use transform and opacity. Hardware-accelerated rendering for butter-smooth 60fps experiences.\",\n image: getImageKitUrl(\"/images/hero-smoothui.png\", {\n width: 800,\n quality: 85,\n format: \"auto\",\n }),\n imageAlt: \"SmoothUI component showcase\",\n },\n {\n title: \"Developer Experience\",\n description:\n \"Full TypeScript support, comprehensive documentation, and one-command installation via the shadcn registry.\",\n image: getImageKitUrl(\"/images/hero-example_xertaz.png\", {\n width: 800,\n quality: 85,\n format: \"auto\",\n }),\n imageAlt: \"Code example with TypeScript support\",\n },\n];\n\nexport function FeaturesAlternating() {\n const shouldReduceMotion = useReducedMotion();\n\n return (\n
\n
\n
\n
\n \n Why developers choose us\n \n

\n Designed for developer productivity and user delight.\n

\n
\n
\n {features.map((feature, index) => {\n const isReversed = index % 2 === 1;\n const slideDirection = isReversed ? 24 : -24;\n\n return (\n \n \n

{feature.title}

\n

\n {feature.description}\n

\n \n\n \n
\n \n
\n \n
\n );\n })}\n
\n
\n \n
\n );\n}\n\nexport default FeaturesAlternating;\n","target":"components/smoothui/features-3/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"footer-1","type":"registry:ui","title":"footer-1","description":"Simple footer block with links and social icons","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { motion } from \"motion/react\";\n\nconst ANIMATION_DURATION = 0.6;\nconst DELAY_INCREMENT = 0.1;\nconst HOVER_SCALE = 1.1;\nconst TAP_SCALE = 0.9;\nconst DELAY_PRODUCT = DELAY_INCREMENT * 2;\nconst DELAY_COMPANY = DELAY_INCREMENT * 3;\nconst DELAY_SUPPORT = DELAY_INCREMENT * 4;\nconst DELAY_COPYRIGHT = DELAY_INCREMENT * 5;\n\ninterface FooterSimpleProps {\n companyName?: string;\n copyright?: string;\n description?: string;\n links?: {\n product?: Array<{ name: string; url: string }>;\n company?: Array<{ name: string; url: string }>;\n support?: Array<{ name: string; url: string }>;\n };\n social?: {\n twitter?: string;\n linkedin?: string;\n github?: string;\n discord?: string;\n };\n}\n\nexport function FooterSimple({\n companyName = \"Smoothui\",\n description = \"Build beautiful UIs, effortlessly.\",\n links = {\n product: [\n { name: \"Features\", url: \"#features\" },\n { name: \"Pricing\", url: \"#pricing\" },\n { name: \"Documentation\", url: \"#docs\" },\n { name: \"API\", url: \"#api\" },\n ],\n company: [\n { name: \"About\", url: \"#about\" },\n { name: \"Blog\", url: \"#blog\" },\n { name: \"Careers\", url: \"#careers\" },\n { name: \"Contact\", url: \"#contact\" },\n ],\n support: [\n { name: \"Help Center\", url: \"#help\" },\n { name: \"Community\", url: \"#community\" },\n { name: \"Status\", url: \"#status\" },\n { name: \"Security\", url: \"#security\" },\n ],\n },\n social = {\n twitter: \"https://twitter.com\",\n linkedin: \"https://linkedin.com\",\n github: \"https://github.com\",\n discord: \"https://discord.com\",\n },\n copyright = \"© 2024 Smoothui. All rights reserved.\",\n}: FooterSimpleProps) {\n return (\n
\n
\n \n {/* Company Info */}\n
\n \n

\n {companyName}\n

\n

\n {description}\n

\n\n {/* Social Links */}\n
\n {social.twitter && (\n \n \n \n \n Twitter\n \n )}\n {social.linkedin && (\n \n \n \n \n LinkedIn\n \n )}\n {social.github && (\n \n \n \n \n GitHub\n \n )}\n {social.discord && (\n \n \n \n \n Discord\n \n )}\n
\n \n
\n\n {/* Links */}\n
\n {links.product && (\n \n

\n Product\n

\n
    \n {links.product.map((link) => (\n
  • \n \n {link.name}\n \n
    • \n ))}\n
\n \n )}\n\n {links.company && (\n \n

\n Company\n

\n
    \n {links.company.map((link) => (\n
  • \n \n {link.name}\n \n
    • \n ))}\n
\n \n )}\n\n {links.support && (\n \n

\n Support\n

\n
    \n {links.support.map((link) => (\n
  • \n \n {link.name}\n \n
    • \n ))}\n
\n \n )}\n
\n \n\n {/* Copyright */}\n \n

{copyright}

\n \n
\n
\n );\n}\n\nexport default FooterSimple;\n","target":"components/smoothui/footer-1/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"footer-2","type":"registry:ui","title":"footer-2","description":"Complex footer block with newsletter and extended links","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":["https://smoothui.dev/r/smooth-button.json"],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport SmoothButton from \"@repo/smoothui/components/smooth-button\";\nimport { motion } from \"motion/react\";\n\nconst ANIMATION_DURATION = 0.6;\nconst DELAY_INCREMENT = 0.1;\nconst HOVER_SCALE = 1.1;\nconst TAP_SCALE = 0.9;\nconst BUTTON_HOVER_SCALE = 1.02;\nconst BUTTON_TAP_SCALE = 0.98;\nconst DELAY_PRODUCT = DELAY_INCREMENT * 2;\nconst DELAY_COMPANY = DELAY_INCREMENT * 3;\nconst DELAY_SUPPORT = DELAY_INCREMENT * 4;\nconst DELAY_LEGAL = DELAY_INCREMENT * 5;\nconst DELAY_COPYRIGHT = DELAY_INCREMENT * 6;\n\ninterface FooterComplexProps {\n companyName?: string;\n copyright?: string;\n description?: string;\n links?: {\n product?: Array<{ name: string; url: string }>;\n company?: Array<{ name: string; url: string }>;\n support?: Array<{ name: string; url: string }>;\n legal?: Array<{ name: string; url: string }>;\n };\n newsletter?: {\n title: string;\n description: string;\n placeholder: string;\n buttonText: string;\n };\n social?: {\n twitter?: string;\n linkedin?: string;\n github?: string;\n discord?: string;\n youtube?: string;\n };\n}\n\nexport function FooterComplex({\n companyName = \"Smoothui\",\n description = \"Build beautiful UIs, effortlessly. The modern way to create stunning interfaces with smooth animations.\",\n newsletter = {\n title: \"Stay updated\",\n description: \"Get the latest news and updates delivered to your inbox.\",\n placeholder: \"Enter your email\",\n buttonText: \"Subscribe\",\n },\n links = {\n product: [\n { name: \"Features\", url: \"#features\" },\n { name: \"Pricing\", url: \"#pricing\" },\n { name: \"Documentation\", url: \"#docs\" },\n { name: \"API Reference\", url: \"#api\" },\n { name: \"Changelog\", url: \"#changelog\" },\n ],\n company: [\n { name: \"About Us\", url: \"#about\" },\n { name: \"Blog\", url: \"#blog\" },\n { name: \"Careers\", url: \"#careers\" },\n { name: \"Press Kit\", url: \"#press\" },\n { name: \"Contact\", url: \"#contact\" },\n ],\n support: [\n { name: \"Help Center\", url: \"#help\" },\n { name: \"Community\", url: \"#community\" },\n { name: \"Status Page\", url: \"#status\" },\n { name: \"Security\", url: \"#security\" },\n { name: \"Bug Reports\", url: \"#bugs\" },\n ],\n legal: [\n { name: \"Privacy Policy\", url: \"#privacy\" },\n { name: \"Terms of Service\", url: \"#terms\" },\n { name: \"Cookie Policy\", url: \"#cookies\" },\n { name: \"GDPR\", url: \"#gdpr\" },\n ],\n },\n social = {\n twitter: \"https://twitter.com\",\n linkedin: \"https://linkedin.com\",\n github: \"https://github.com\",\n discord: \"https://discord.com\",\n youtube: \"https://youtube.com\",\n },\n copyright = \"© 2024 Smoothui. All rights reserved.\",\n}: FooterComplexProps) {\n return (\n
\n
\n \n {/* Company Info & Newsletter */}\n
\n \n

\n {companyName}\n

\n

\n {description}\n

\n\n {/* Newsletter */}\n
\n

\n {newsletter.title}\n

\n

\n {newsletter.description}\n

\n
\n \n \n {newsletter.buttonText}\n \n
\n
\n\n {/* Social Links */}\n
\n {social.twitter && (\n \n \n \n \n Twitter\n \n )}\n {social.linkedin && (\n \n \n \n \n LinkedIn\n \n )}\n {social.github && (\n \n \n \n \n GitHub\n \n )}\n {social.discord && (\n \n \n \n \n Discord\n \n )}\n {social.youtube && (\n \n \n \n \n YouTube\n \n )}\n
\n \n
\n\n {/* Links Grid */}\n
\n {links.product && (\n \n

\n Product\n

\n
    \n {links.product.map((link) => (\n
  • \n \n {link.name}\n \n
    • \n ))}\n
\n \n )}\n\n {links.company && (\n \n

\n Company\n

\n
    \n {links.company.map((link) => (\n
  • \n \n {link.name}\n \n
    • \n ))}\n
\n \n )}\n\n {links.support && (\n \n

\n Support\n

\n
    \n {links.support.map((link) => (\n
  • \n \n {link.name}\n \n
    • \n ))}\n
\n \n )}\n\n {links.legal && (\n \n

\n Legal\n

\n
    \n {links.legal.map((link) => (\n
  • \n \n {link.name}\n \n
    • \n ))}\n
\n \n )}\n
\n \n\n {/* Copyright */}\n \n

{copyright}

\n \n
\n
\n );\n}\n\nexport default FooterComplex;\n","target":"components/smoothui/footer-2/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"footer-3","type":"registry:ui","title":"footer-3","description":"Mega footer with newsletter and social links","author":"Eduardo Calvo ","dependencies":["lucide-react","motion"],"devDependencies":[],"registryDependencies":["https://smoothui.dev/r/smooth-button.json"],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport SmoothButton from \"@repo/smoothui/components/smooth-button\";\nimport { Github, Linkedin, Twitter, Youtube } from \"lucide-react\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport type { ReactNode } from \"react\";\n\nconst ANIMATION_DURATION = 0.25;\nconst DELAY_INCREMENT = 0.05;\nconst HOVER_SCALE = 1.1;\nconst TAP_SCALE = 0.95;\nconst DELAY_NEWSLETTER = 6;\nconst DELAY_BOTTOM = 7;\n\nexport interface FooterMegaProps {\n columns?: Array<{\n title: string;\n links: Array<{ label: string; href: string }>;\n }>;\n copyright?: string;\n description?: string;\n logo?: ReactNode;\n newsletter?: {\n title: string;\n description: string;\n placeholder: string;\n buttonText: string;\n };\n socialLinks?: Array<{\n icon: ReactNode;\n href: string;\n label: string;\n }>;\n}\n\nconst defaultColumns = [\n {\n title: \"Product\",\n links: [\n { label: \"Features\", href: \"#features\" },\n { label: \"Pricing\", href: \"#pricing\" },\n { label: \"Changelog\", href: \"#changelog\" },\n { label: \"Documentation\", href: \"#docs\" },\n ],\n },\n {\n title: \"Company\",\n links: [\n { label: \"About\", href: \"#about\" },\n { label: \"Blog\", href: \"#blog\" },\n { label: \"Careers\", href: \"#careers\" },\n { label: \"Contact\", href: \"#contact\" },\n ],\n },\n {\n title: \"Resources\",\n links: [\n { label: \"Community\", href: \"#community\" },\n { label: \"GitHub\", href: \"#github\" },\n { label: \"Discord\", href: \"#discord\" },\n { label: \"Help Center\", href: \"#help\" },\n ],\n },\n {\n title: \"Legal\",\n links: [\n { label: \"Privacy Policy\", href: \"#privacy\" },\n { label: \"Terms of Service\", href: \"#terms\" },\n { label: \"Cookie Policy\", href: \"#cookies\" },\n ],\n },\n];\n\nconst defaultSocialLinks = [\n {\n icon: ,\n href: \"https://twitter.com\",\n label: \"Twitter\",\n },\n {\n icon: ,\n href: \"https://github.com\",\n label: \"GitHub\",\n },\n {\n icon: ,\n href: \"https://linkedin.com\",\n label: \"LinkedIn\",\n },\n {\n icon: ,\n href: \"https://youtube.com\",\n label: \"YouTube\",\n },\n];\n\nexport const FooterMega = ({\n logo = SmoothUI,\n description = \"Beautiful animated React components for building modern user interfaces with smooth animations and delightful interactions.\",\n columns = defaultColumns,\n newsletter = {\n title: \"Subscribe to our newsletter\",\n description: \"Get the latest updates and news delivered to your inbox.\",\n placeholder: \"Enter your email\",\n buttonText: \"Subscribe\",\n },\n socialLinks = defaultSocialLinks,\n copyright = \"© 2024 SmoothUI. All rights reserved.\",\n}: FooterMegaProps) => {\n const shouldReduceMotion = useReducedMotion();\n\n const getAnimationProps = (delay = 0) => {\n if (shouldReduceMotion) {\n return {\n initial: { opacity: 1 },\n animate: { opacity: 1 },\n transition: { duration: 0 },\n };\n }\n\n return {\n initial: { opacity: 0, y: 20 },\n whileInView: { opacity: 1, y: 0 },\n viewport: { once: true },\n transition: {\n type: \"spring\" as const,\n duration: ANIMATION_DURATION,\n bounce: 0.1,\n delay,\n },\n };\n };\n\n const getHoverProps = () => {\n if (shouldReduceMotion) {\n return {};\n }\n\n return {\n whileHover: { scale: HOVER_SCALE },\n whileTap: { scale: TAP_SCALE },\n };\n };\n\n return (\n
\n
\n {/* Top Section: Logo, Description, Columns, Newsletter */}\n \n {/* Logo and Description */}\n \n
{logo}
\n

\n {description}\n

\n \n\n {/* Link Columns */}\n
\n {columns.map((column, columnIndex) => (\n \n

\n {column.title}\n

\n
    \n {column.links.map((link) => (\n
  • \n \n {link.label}\n \n
    • \n ))}\n
\n \n ))}\n
\n\n {/* Newsletter */}\n \n

\n {newsletter.title}\n

\n

\n {newsletter.description}\n

\n e.preventDefault()}\n >\n \n \n {newsletter.buttonText}\n \n \n \n \n\n {/* Bottom Section: Copyright and Social Links */}\n \n

{copyright}

\n\n
\n {socialLinks.map((social) => (\n \n {social.icon}\n {social.label}\n \n ))}\n
\n \n
\n
\n );\n};\n\nexport default FooterMega;\n","target":"components/smoothui/footer-3/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"footer-4","type":"registry:ui","title":"footer-4","description":"Minimal single-row footer","author":"Eduardo Calvo ","dependencies":["lucide-react","motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { Github, Linkedin, Twitter } from \"lucide-react\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport type { ReactNode } from \"react\";\n\nconst ANIMATION_DURATION = 0.25;\nconst HOVER_SCALE = 1.08;\nconst TAP_SCALE = 0.95;\n\nexport interface FooterMinimalProps {\n copyright?: string;\n links?: Array<{ label: string; href: string }>;\n logo?: ReactNode;\n socialLinks?: Array<{\n icon: ReactNode;\n href: string;\n label: string;\n }>;\n}\n\nconst defaultLinks = [\n { label: \"Privacy\", href: \"#privacy\" },\n { label: \"Terms\", href: \"#terms\" },\n { label: \"Contact\", href: \"#contact\" },\n];\n\nconst defaultSocialLinks = [\n {\n icon: ,\n href: \"https://twitter.com\",\n label: \"Twitter\",\n },\n {\n icon: ,\n href: \"https://github.com\",\n label: \"GitHub\",\n },\n {\n icon: ,\n href: \"https://linkedin.com\",\n label: \"LinkedIn\",\n },\n];\n\nexport const FooterMinimal = ({\n logo = SmoothUI,\n links = defaultLinks,\n socialLinks = defaultSocialLinks,\n copyright = \"© 2024 SmoothUI\",\n}: FooterMinimalProps) => {\n const shouldReduceMotion = useReducedMotion();\n\n const getAnimationProps = () => {\n if (shouldReduceMotion) {\n return {\n initial: { opacity: 1 },\n animate: { opacity: 1 },\n transition: { duration: 0 },\n };\n }\n\n return {\n initial: { opacity: 0, y: 10 },\n whileInView: { opacity: 1, y: 0 },\n viewport: { once: true },\n transition: {\n type: \"spring\" as const,\n duration: ANIMATION_DURATION,\n bounce: 0.1,\n },\n };\n };\n\n const getHoverProps = () => {\n if (shouldReduceMotion) {\n return {};\n }\n\n return {\n whileHover: { scale: HOVER_SCALE },\n whileTap: { scale: TAP_SCALE },\n };\n };\n\n return (\n
\n
\n \n {/* Logo and Copyright */}\n
\n
{logo}
\n |\n {copyright}\n
\n\n {/* Navigation Links */}\n \n\n {/* Social Links */}\n
\n {socialLinks.map((social) => (\n \n {social.icon}\n {social.label}\n \n ))}\n
\n \n
\n
\n );\n};\n\nexport default FooterMinimal;\n","target":"components/smoothui/footer-4/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"header-1","type":"registry:ui","title":"header-1","description":"Modern header block with navigation and mobile menu","author":"Eduardo Calvo ","dependencies":["lucide-react","motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { ExternalLink } from \"lucide-react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { AnimatedGroup, AnimatedText, Button, HeroHeader } from \"../../shared\";\nimport styles from \"./hero-grid.module.css\";\n\nconst CELL_SIZE = 120; // px\nconst COLORS = [\n \"oklch(0.72 0.2 352.53)\", // blue\n \"#A764FF\",\n \"#4B94FD\",\n \"#FD4B4E\",\n \"#FF8743\",\n];\n\nfunction getRandomColor() {\n return COLORS[Math.floor(Math.random() * COLORS.length)];\n}\n\nfunction SubGrid() {\n const [cellColors, setCellColors] = useState<(string | null)[]>([\n null,\n null,\n null,\n null,\n ]);\n // Add refs for leave timeouts\n const leaveTimeouts = useRef<(NodeJS.Timeout | null)[]>([\n null,\n null,\n null,\n null,\n ]);\n\n function handleHover(cellIdx: number) {\n // Clear any pending timeout for this cell\n const timeout = leaveTimeouts.current[cellIdx];\n if (timeout) {\n clearTimeout(timeout);\n leaveTimeouts.current[cellIdx] = null;\n }\n setCellColors((prev) =>\n prev.map((c, i) => (i === cellIdx ? getRandomColor() : c))\n );\n }\n function handleLeave(cellIdx: number) {\n // Add a small delay before removing the color\n leaveTimeouts.current[cellIdx] = setTimeout(() => {\n setCellColors((prev) => prev.map((c, i) => (i === cellIdx ? null : c)));\n leaveTimeouts.current[cellIdx] = null;\n }, 120);\n }\n // Cleanup on unmount\n useEffect(\n () => () => {\n for (const t of leaveTimeouts.current) {\n if (t) {\n clearTimeout(t);\n }\n }\n },\n []\n );\n\n return (\n
\n {[0, 1, 2, 3].map((cellIdx) => (\n handleHover(cellIdx)}\n onMouseLeave={() => handleLeave(cellIdx)}\n style={{\n background: cellColors[cellIdx] || \"transparent\",\n pointerEvents: \"auto\",\n }}\n type=\"button\"\n />\n ))}\n
\n );\n}\n\nfunction InteractiveGrid() {\n const containerRef = useRef(null);\n const [grid, setGrid] = useState({ columns: 0, rows: 0 });\n\n useEffect(() => {\n function updateGrid() {\n if (containerRef.current) {\n const { width, height } = containerRef.current.getBoundingClientRect();\n setGrid({\n columns: Math.ceil(width / CELL_SIZE),\n rows: Math.ceil(height / CELL_SIZE),\n });\n }\n }\n updateGrid();\n window.addEventListener(\"resize\", updateGrid);\n return () => window.removeEventListener(\"resize\", updateGrid);\n }, []);\n\n const total = grid.columns * grid.rows;\n\n return (\n \n \n {Array.from({ length: total }, (_, idx) => (\n \n ))}\n \n \n );\n}\n\nexport function HeroGrid() {\n return (\n
\n \n
\n
\n {/* Interactive animated grid background */}\n \n \n
\n \n Build your next project with{\" \"}\n Smoothui\n \n \n Smoothui gives you the building blocks to create stunning,\n animated interfaces in minutes.\n \n
\n \n \n Get Started\n \n \n \n \n
\n
\n
\n );\n}\n\nexport default HeroGrid;\n","target":"components/smoothui/header-1/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"header-2","type":"registry:ui","title":"header-2","description":"Premium header block with gradient logo and smooth animations","author":"Eduardo Calvo ","dependencies":["lucide-react","motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { getImageKitUrl } from \"@smoothui/data\";\nimport { motion } from \"motion/react\";\nimport { AnimatedGroup, AnimatedText, Button, HeroHeader } from \"../../shared\";\n\ninterface HeroProductProps {\n badgeText?: string;\n description?: string;\n heading?: string;\n imageAlt?: string;\n imageSrc?: string;\n primaryButton?: {\n text: string;\n url: string;\n };\n secondaryButton?: {\n text: string;\n url: string;\n };\n}\n\nexport function HeroProduct({\n badgeText = \"New animation library\",\n heading = \"Build Beautiful UIs, Effortlessly\",\n description = \"Craft. Build. Ship Modern Websites With Smooth Animations.\",\n primaryButton = {\n text: \"Start Building\",\n url: \"#link\",\n },\n secondaryButton = {\n text: \"Watch Video\",\n url: \"#link\",\n },\n imageSrc = getImageKitUrl(\"/images/hero-smoothui.png\", {\n width: 1200,\n quality: 85,\n format: \"auto\",\n }),\n imageAlt = \"SmoothUI desktop application interface\",\n}: HeroProductProps) {\n return (\n
\n \n
\n \n
\n
\n \n {/* Badge with animated sparkle */}\n \n \n \n \n \n \n \n \n\n {badgeText}\n \n \n\n {/* Main heading with staggered animation */}\n \n {heading}\n \n\n {/* Description */}\n \n {description}\n \n\n {/* CTA buttons with staggered animation */}\n \n \n \n \n\n \n \n \n \n \n
\n\n {/* Image section with parallax-like animation */}\n \n
\n \n \n \n \n \n \n \n
\n \n
\n \n
\n
\n );\n}\n\nexport default HeroProduct;\n","target":"components/smoothui/header-2/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"header-3","type":"registry:ui","title":"header-3","description":"Premium header block with gradient logo and smooth animations","author":"Eduardo Calvo ","dependencies":["lucide-react","motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { Avatar, AvatarImage } from \"@repo/shadcn-ui/components/ui/avatar\";\nimport { getAllPeople, getAvatarUrl, getImageKitUrl } from \"@smoothui/data\";\nimport { ArrowDownRight, Star } from \"lucide-react\";\nimport { motion } from \"motion/react\";\nimport { AnimatedGroup, AnimatedText, Button, HeroHeader } from \"../../shared\";\n\ninterface HeroShowcaseProps {\n buttons?: {\n primary?: {\n text: string;\n url: string;\n };\n secondary?: {\n text: string;\n url: string;\n };\n };\n description?: string;\n heading?: string;\n reviews?: {\n count: number;\n avatars: {\n src: string;\n alt: string;\n }[];\n rating?: number;\n };\n}\n\nexport function HeroShowcase({\n heading = \"Build beautiful UIs, effortlessly.\",\n description = \"Smoothui gives you the building blocks to create stunning, animated interfaces in minutes.\",\n buttons = {\n primary: {\n text: \"Get Started\",\n url: \"#link\",\n },\n secondary: {\n text: \"Watch demo\",\n url: \"#link\",\n },\n },\n reviews = {\n count: 200,\n rating: 5.0,\n avatars: getAllPeople()\n .slice(0, 5)\n .map((person) => ({\n src: getAvatarUrl(person.avatar, 90),\n alt: `${person.name} avatar`,\n })),\n },\n}: HeroShowcaseProps) {\n return (\n <>\n \n
\n \n
\n \n \n {heading}\n \n \n {description}\n \n \n \n {reviews.avatars.map((avatar, index) => (\n \n \n \n \n \n ))}\n \n
\n
\n {[1, 2, 3, 4, 5].map((starNumber) => (\n \n ))}\n \n {reviews.rating?.toFixed(1)}\n \n
\n

\n from {reviews.count}+ reviews\n

\n
\n \n \n {buttons.primary && (\n \n )}\n {buttons.secondary && (\n \n )}\n \n \n {/* Imagen completamente estática para que el blend mode funcione perfecto */}\n
\n \n
\n
\n \n
\n \n );\n}\nexport default HeroShowcase;\n","target":"components/smoothui/header-3/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"header-4","type":"registry:ui","title":"header-4","description":"Interactive 3D grid hero header inspired by rauno.me 2024","author":"Eduardo Calvo ","dependencies":["lucide-react","motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"/**\n * Header 4 - Interactive 3D Grid Hero\n *\n * Inspired by the beautiful interactive grid design from rauno.me 2024 website.\n * Features a 3D-perspective grid with customizable hover colors that respond\n * to user interaction, creating an engaging and modern hero section.\n *\n * @see https://rauno.me\n */\n\n\"use client\";\n\nimport { ExternalLink } from \"lucide-react\";\nimport { useEffect, useRef } from \"react\";\nimport { AnimatedGroup, AnimatedText, Button, HeroHeader } from \"../../shared\";\nimport styles from \"./hero-grid.module.css\";\n\ninterface InteractiveGridProps {\n hoverColors?: string | [string, string, string, string];\n}\n\nconst TOTAL_TILES = 1600;\nconst INITIAL_TILE = 1;\nconst TILES_TO_CLONE = TOTAL_TILES - INITIAL_TILE;\n\nfunction InteractiveGrid({ hoverColors }: InteractiveGridProps) {\n const containerRef = useRef(null);\n const tileRef = useRef(null);\n\n useEffect(() => {\n if (!(containerRef.current && tileRef.current)) {\n return;\n }\n\n // Clone the first tile to create a 40x40 grid (1600 tiles total)\n for (let i = 0; i < TILES_TO_CLONE; i++) {\n const clonedTile = tileRef.current.cloneNode(true);\n containerRef.current.appendChild(clonedTile);\n }\n }, []);\n\n // Prepare CSS variables for hover colors\n const style = hoverColors\n ? {\n \"--hero-grid-hover-color-1\": Array.isArray(hoverColors)\n ? hoverColors[0]\n : hoverColors,\n \"--hero-grid-hover-color-2\": Array.isArray(hoverColors)\n ? (hoverColors[1] ?? hoverColors[0])\n : hoverColors,\n \"--hero-grid-hover-color-3\": Array.isArray(hoverColors)\n ? (hoverColors[2] ?? hoverColors[0])\n : hoverColors,\n \"--hero-grid-hover-color-4\": Array.isArray(hoverColors)\n ? (hoverColors[3] ?? hoverColors[0])\n : hoverColors,\n }\n : undefined;\n\n return (\n \n
\n
\n
\n
\n );\n}\n\ninterface HeroGridProps {\n hoverColors?: string | [string, string, string, string];\n}\n\nexport function HeroGrid({ hoverColors }: HeroGridProps) {\n return (\n
\n \n
\n
\n {/* Interactive animated grid background */}\n \n \n
\n \n Build your next project with{\" \"}\n Smoothui\n \n \n Smoothui gives you the building blocks to create stunning,\n animated interfaces in minutes.\n \n
\n \n \n Get Started\n \n \n \n \n
\n
\n
\n );\n}\n\nexport default HeroGrid;\n","target":"components/smoothui/header-4/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"header-5","type":"registry:ui","title":"header-5","description":"Spotlight hero block with dark theme and gradient text","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":["https://smoothui.dev/r/smooth-button.json"],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport SmoothButton from \"@repo/smoothui/components/smooth-button\";\nimport { motion, useReducedMotion } from \"motion/react\";\n\nconst SPRING = {\n type: \"spring\" as const,\n duration: 0.25,\n bounce: 0.1,\n};\n\nexport function HeroSpotlight() {\n const shouldReduceMotion = useReducedMotion();\n\n return (\n
\n
\n {/* Spotlight beam */}\n \n\n {/* Floating particles */}\n \n {Array.from({ length: 20 }, (_, i) => (\n \n ))}\n
\n\n
\n \n \n Build stunning interfaces\n \n

\n Beautifully animated components built with React, Motion, and\n Tailwind CSS. Open source and ready for production.\n

\n
\n \n Get Started\n \n \n Documentation\n \n
\n \n
\n\n \n \n
\n );\n}\n\nexport default HeroSpotlight;\n","target":"components/smoothui/header-5/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"header-6","type":"registry:ui","title":"header-6","description":"Minimal hero block with clean typography","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { motion, useReducedMotion } from \"motion/react\";\n\nexport function HeroMinimal() {\n const shouldReduceMotion = useReducedMotion();\n\n return (\n
\n
\n \n \n Less is more\n \n

\n Simple, elegant components that speak for themselves.\n

\n \n Explore components →\n \n \n
\n
\n );\n}\n\nexport default HeroMinimal;\n","target":"components/smoothui/header-6/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"logo-cloud-1","type":"registry:ui","title":"logo-cloud-1","description":"Simple logo cloud block with grid layout","author":"Eduardo Calvo ","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport {\n Canpoy,\n Canva,\n Casetext,\n Clearbit,\n Descript,\n Duolingo,\n Faire,\n IDEO,\n KhanAcademy,\n Quizlet,\n Ramp,\n Strava,\n} from \"../../shared\";\n\nconst LOGOS = [\n ,\n ,\n ,\n ,\n ,\n ,\n ,\n ,\n ,\n ,\n ,\n ,\n];\n\ninterface LogoCloudSimpleProps {\n count?: number;\n description?: string;\n title?: string;\n}\n\nexport function LogoCloudSimple({\n title = \"You're in good company\",\n description = \"Trusted by leading teams from around the world\",\n count = 4,\n}: LogoCloudSimpleProps) {\n const logos = LOGOS.slice(0, count);\n\n return (\n
\n
\n
\n

{title}

\n

{description}

\n
\n
\n {logos.map((logo) => (\n \n {logo}\n
\n ))}\n
\n \n
\n );\n}\n\nexport default LogoCloudSimple;\n","target":"components/smoothui/logo-cloud-1/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"logo-cloud-2","type":"registry:ui","title":"logo-cloud-2","description":"Animated logo cloud block with infinite scroll","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { motion } from \"motion/react\";\nimport type React from \"react\";\nimport {\n Canpoy,\n Canva,\n Casetext,\n Clearbit,\n Descript,\n Duolingo,\n Faire,\n Strava,\n} from \"../../shared\";\n\nconst ANIMATION_DURATION = 25;\nconst STAGGER_DELAY = 0.1;\nconst HOVER_SCALE = 1.2;\nconst HOVER_ROTATE = 5;\nconst SPRING_STIFFNESS = 300;\nconst SCROLL_DISTANCE_FACTOR = 33.333;\n\ninterface LogoCloudAnimatedProps {\n description?: string;\n logos?: Array<{\n name: string;\n logo: React.ComponentType;\n url?: string;\n }>;\n title?: string;\n}\n\nexport function LogoCloudAnimated({\n title = \"Trusted by the world's most innovative teams\",\n description = \"Join thousands of developers and designers who are already building with Smoothui\",\n logos = [\n { name: \"Canpoy\", logo: Canpoy, url: \"https://canpoy.com\" },\n { name: \"Canva\", logo: Canva, url: \"https://canva.com\" },\n { name: \"Casetext\", logo: Casetext, url: \"https://casetext.com\" },\n { name: \"Strava\", logo: Strava, url: \"https://strava.com\" },\n { name: \"Descript\", logo: Descript, url: \"https://descript.com\" },\n { name: \"Duolingo\", logo: Duolingo, url: \"https://duolingo.com\" },\n { name: \"Faire\", logo: Faire, url: \"https://faire.com\" },\n { name: \"Clearbit\", logo: Clearbit, url: \"https://clearbit.com\" },\n ],\n}: LogoCloudAnimatedProps) {\n return (\n
\n
\n \n

\n {title}\n

\n

{description}

\n \n {/* Infinite scrolling logos */}\n \n \n {/* First set */}\n {logos.map((logo, index) => (\n \n \n \n \n \n ))}\n {/* Second set for seamless loop */}\n {logos.map((logo, index) => (\n \n \n \n \n \n ))}\n {/* Third set for even smoother loop */}\n {logos.map((logo, index) => (\n \n \n \n \n \n ))}\n \n
\n \n
\n );\n}\n\nexport default LogoCloudAnimated;\n","target":"components/smoothui/logo-cloud-2/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"logo-cloud-3","type":"registry:ui","title":"logo-cloud-3","description":"Infinite scrolling logo marquee","author":"Eduardo Calvo ","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport type React from \"react\";\nimport {\n Canpoy,\n Canva,\n Casetext,\n Clearbit,\n Descript,\n Duolingo,\n Faire,\n Strava,\n} from \"../../shared\";\n\nexport interface LogoMarqueeProps {\n description?: string;\n direction?: \"left\" | \"right\";\n logos?: Array<{\n name: string;\n logo: React.ReactNode;\n }>;\n pauseOnHover?: boolean;\n speed?: \"slow\" | \"normal\" | \"fast\";\n title?: string;\n}\n\nconst DEFAULT_LOGOS = [\n { name: \"Canpoy\", logo: },\n { name: \"Canva\", logo: },\n { name: \"Casetext\", logo: },\n { name: \"Strava\", logo: },\n { name: \"Descript\", logo: },\n { name: \"Duolingo\", logo: },\n { name: \"Faire\", logo: },\n { name: \"Clearbit\", logo: },\n];\n\nconst SPEED_MAP = {\n slow: \"60s\",\n normal: \"40s\",\n fast: \"20s\",\n};\n\nexport function LogoMarquee({\n title = \"Trusted by industry leaders\",\n description = \"Join thousands of companies already using our platform\",\n logos = DEFAULT_LOGOS,\n speed = \"normal\",\n direction = \"left\",\n pauseOnHover = true,\n}: LogoMarqueeProps) {\n const animationDuration = SPEED_MAP[speed];\n const animationDirection = direction === \"right\" ? \"reverse\" : \"normal\";\n\n return (\n
\n \n
\n
\n

\n {title}\n

\n

{description}

\n
\n\n \n \n {/* First set of logos */}\n {logos.map((logo, index) => (\n \n {logo.logo}\n
\n ))}\n {/* Second set of logos for seamless loop */}\n {logos.map((logo, index) => (\n \n {logo.logo}\n \n ))}\n \n \n \n
\n );\n}\n\nexport default LogoMarquee;\n","target":"components/smoothui/logo-cloud-3/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"logo-cloud-4","type":"registry:ui","title":"logo-cloud-4","description":"Interactive logo grid with hover effects","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport type React from \"react\";\nimport { useEffect, useState } from \"react\";\nimport {\n Canpoy,\n Canva,\n Casetext,\n Clearbit,\n Descript,\n Duolingo,\n Faire,\n Strava,\n} from \"../../shared\";\n\nexport interface LogoGridProps {\n columns?: 3 | 4 | 5 | 6;\n description?: string;\n logos?: Array<{\n name: string;\n logo: React.ReactNode;\n href?: string;\n }>;\n title?: string;\n}\n\nconst DEFAULT_LOGOS = [\n { name: \"Canpoy\", logo: },\n { name: \"Canva\", logo: },\n { name: \"Casetext\", logo: },\n { name: \"Strava\", logo: },\n { name: \"Descript\", logo: },\n { name: \"Duolingo\", logo: },\n { name: \"Faire\", logo: },\n { name: \"Clearbit\", logo: },\n];\n\nconst COLUMN_CLASSES = {\n 3: \"grid-cols-2 sm:grid-cols-3\",\n 4: \"grid-cols-2 sm:grid-cols-4\",\n 5: \"grid-cols-2 sm:grid-cols-3 lg:grid-cols-5\",\n 6: \"grid-cols-2 sm:grid-cols-3 lg:grid-cols-6\",\n};\n\n// Animation constants\nconst HOVER_LIFT_OFFSET = -4;\nconst INACTIVE_OPACITY = 0.6;\n\ninterface LogoItemProps {\n isHoverDevice: boolean;\n logo: {\n name: string;\n logo: React.ReactNode;\n href?: string;\n };\n shouldReduceMotion: boolean | null;\n}\n\nfunction LogoItem({ logo, isHoverDevice, shouldReduceMotion }: LogoItemProps) {\n const [isHovered, setIsHovered] = useState(false);\n\n const content = (\n isHoverDevice && setIsHovered(true)}\n onMouseLeave={() => isHoverDevice && setIsHovered(false)}\n transition={\n shouldReduceMotion\n ? { duration: 0 }\n : {\n type: \"spring\" as const,\n duration: 0.25,\n bounce: 0.05,\n }\n }\n >\n {/* Logo with grayscale effect */}\n \n {logo.logo}\n \n\n {/* Tooltip */}\n \n {isHovered && (\n \n {logo.name}\n {/* Tooltip arrow */}\n
\n \n )}\n \n \n );\n\n if (logo.href) {\n return (\n \n {content}\n \n );\n }\n\n return content;\n}\n\nexport function LogoGrid({\n title = \"Trusted by innovative companies\",\n description = \"Leading organizations rely on our platform to power their success\",\n logos = DEFAULT_LOGOS,\n columns = 4,\n}: LogoGridProps) {\n const shouldReduceMotion = useReducedMotion();\n const [isHoverDevice, setIsHoverDevice] = useState(false);\n\n useEffect(() => {\n const mediaQuery = window.matchMedia(\"(hover: hover) and (pointer: fine)\");\n setIsHoverDevice(mediaQuery.matches);\n\n const handleChange = (e: MediaQueryListEvent) => {\n setIsHoverDevice(e.matches);\n };\n\n mediaQuery.addEventListener(\"change\", handleChange);\n return () => mediaQuery.removeEventListener(\"change\", handleChange);\n }, []);\n\n return (\n
\n
\n
\n

\n {title}\n

\n

{description}

\n
\n\n \n {logos.map((logo, index) => (\n \n ))}\n
\n
\n \n );\n}\n\nexport default LogoGrid;\n","target":"components/smoothui/logo-cloud-4/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"pricing-1","type":"registry:ui","title":"pricing-1","description":"Simple pricing block with single plan","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":["https://smoothui.dev/r/smooth-button.json"],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport SmoothButton from \"@repo/smoothui/components/smooth-button\";\nimport { motion } from \"motion/react\";\nimport { useEffect, useRef, useState } from \"react\";\n\ninterface PriceFlowProps {\n className?: string;\n value: number;\n}\n\nfunction PriceFlow({ value, className = \"\" }: PriceFlowProps) {\n const [prevValue, setPrevValue] = useState(value);\n const prevTensRef = useRef(null);\n const nextTensRef = useRef(null);\n const prevOnesRef = useRef(null);\n const nextOnesRef = useRef(null);\n\n useEffect(() => {\n if (value !== prevValue) {\n const prevTens = prevTensRef.current;\n const nextTens = nextTensRef.current;\n const prevOnes = prevOnesRef.current;\n const nextOnes = nextOnesRef.current;\n\n if (\n prevTens &&\n nextTens &&\n Math.floor(value / 10) !== Math.floor(prevValue / 10)\n ) {\n if (Math.floor(value / 10) > Math.floor(prevValue / 10)) {\n prevTens.classList.add(\"slide-out-up\");\n nextTens.classList.add(\"slide-in-up\");\n } else {\n prevTens.classList.add(\"slide-out-down\");\n nextTens.classList.add(\"slide-in-down\");\n }\n\n const handleTensAnimationEnd = () => {\n prevTens.classList.remove(\"slide-out-up\", \"slide-out-down\");\n nextTens.classList.remove(\"slide-in-up\", \"slide-in-down\");\n prevTens.removeEventListener(\"animationend\", handleTensAnimationEnd);\n };\n\n prevTens.addEventListener(\"animationend\", handleTensAnimationEnd);\n }\n\n if (prevOnes && nextOnes && value % 10 !== prevValue % 10) {\n setTimeout(() => {\n if (value % 10 > prevValue % 10) {\n prevOnes.classList.add(\"slide-out-up\");\n nextOnes.classList.add(\"slide-in-up\");\n } else {\n prevOnes.classList.add(\"slide-out-down\");\n nextOnes.classList.add(\"slide-in-down\");\n }\n\n const handleOnesAnimationEnd = () => {\n prevOnes.classList.remove(\"slide-out-up\", \"slide-out-down\");\n nextOnes.classList.remove(\"slide-in-up\", \"slide-in-down\");\n prevOnes.removeEventListener(\n \"animationend\",\n handleOnesAnimationEnd\n );\n };\n\n prevOnes.addEventListener(\"animationend\", handleOnesAnimationEnd);\n }, 50);\n }\n\n setPrevValue(value);\n }\n }, [value, prevValue]);\n\n const formatValue = (val: number) => val.toString().padStart(2, \"0\");\n const prevFormatted = formatValue(prevValue);\n const currentFormatted = formatValue(value);\n\n return (\n \n \n \n {prevFormatted[0]}\n \n \n {currentFormatted[0]}\n \n \n \n \n {prevFormatted[1]}\n \n \n {currentFormatted[1]}\n \n \n \n );\n}\n\nexport function PricingSimple() {\n const [isAnnual, setIsAnnual] = useState(true);\n\n return (\n
\n
\n
\n
\n

\n Simple pricing for everyone\n

\n

\n One plan, all features. No hidden fees, no complicated tiers.\n

\n
\n \n \n setIsAnnual(false)}\n type=\"button\"\n >\n Monthly\n \n setIsAnnual(true)}\n type=\"button\"\n >\n Annually\n \n
\n
\n Save 20% On\n Annual Billing\n
\n
\n
\n
\n
\n \n {/* Gradient Accent */}\n
\n\n
\n {/* Title */}\n

\n Pro\n

\n {/* Price & Duration */}\n
\n \n €\n \n •\n \n Perfect for individuals\n \n
\n {/* CTA Button */}\n \n Get Started\n \n {/* Description */}\n

\n Everything you need to build and deploy amazing\n applications. Simple, powerful, and affordable.\n

\n {/* What's Included */}\n
\n

\n What's included:\n

\n
    \n {[\n \"Unlimited Projects\",\n \"Email Support\",\n \"All Features\",\n \"Advanced Analytics\",\n \"Team Collaboration\",\n \"Custom Domains\",\n \"Priority Updates\",\n \"API Access\",\n ].map((item) => (\n \n
    \n \n \n \n
    \n {item}\n \n ))}\n
\n
\n
\n \n
\n
\n
\n
\n
\n );\n}\n\nexport default PricingSimple;\n","target":"components/smoothui/pricing-1/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"pricing-2","type":"registry:ui","title":"pricing-2","description":"Modern pricing block with three tiers","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":["https://smoothui.dev/r/smooth-button.json"],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport SmoothButton from \"@repo/smoothui/components/smooth-button\";\nimport { motion } from \"motion/react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nconst CARD_ANIMATION_DELAY = 0.1;\n\ninterface PriceFlowProps {\n className?: string;\n value: number;\n}\n\nfunction PriceFlow({ value, className = \"\" }: PriceFlowProps) {\n const [prevValue, setPrevValue] = useState(value);\n const prevTensRef = useRef(null);\n const nextTensRef = useRef(null);\n const prevOnesRef = useRef(null);\n const nextOnesRef = useRef(null);\n\n useEffect(() => {\n if (value !== prevValue) {\n const prevTens = prevTensRef.current;\n const nextTens = nextTensRef.current;\n const prevOnes = prevOnesRef.current;\n const nextOnes = nextOnesRef.current;\n\n if (\n prevTens &&\n nextTens &&\n Math.floor(value / 10) !== Math.floor(prevValue / 10)\n ) {\n if (Math.floor(value / 10) > Math.floor(prevValue / 10)) {\n prevTens.classList.add(\"slide-out-up\");\n nextTens.classList.add(\"slide-in-up\");\n } else {\n prevTens.classList.add(\"slide-out-down\");\n nextTens.classList.add(\"slide-in-down\");\n }\n\n const handleTensAnimationEnd = () => {\n prevTens.classList.remove(\"slide-out-up\", \"slide-out-down\");\n nextTens.classList.remove(\"slide-in-up\", \"slide-in-down\");\n prevTens.removeEventListener(\"animationend\", handleTensAnimationEnd);\n };\n\n prevTens.addEventListener(\"animationend\", handleTensAnimationEnd);\n }\n\n if (prevOnes && nextOnes && value % 10 !== prevValue % 10) {\n setTimeout(() => {\n if (value % 10 > prevValue % 10) {\n prevOnes.classList.add(\"slide-out-up\");\n nextOnes.classList.add(\"slide-in-up\");\n } else {\n prevOnes.classList.add(\"slide-out-down\");\n nextOnes.classList.add(\"slide-in-down\");\n }\n\n const handleOnesAnimationEnd = () => {\n prevOnes.classList.remove(\"slide-out-up\", \"slide-out-down\");\n nextOnes.classList.remove(\"slide-in-up\", \"slide-in-down\");\n prevOnes.removeEventListener(\n \"animationend\",\n handleOnesAnimationEnd\n );\n };\n\n prevOnes.addEventListener(\"animationend\", handleOnesAnimationEnd);\n }, 50);\n }\n\n setPrevValue(value);\n }\n }, [value, prevValue]);\n\n const formatValue = (val: number) => val.toString().padStart(2, \"0\");\n const prevFormatted = formatValue(prevValue);\n const currentFormatted = formatValue(value);\n\n return (\n \n \n \n {prevFormatted[0]}\n \n \n {currentFormatted[0]}\n \n \n \n \n {prevFormatted[1]}\n \n \n {currentFormatted[1]}\n \n \n \n );\n}\n\nexport function PricingModern() {\n const [isAnnual, setIsAnnual] = useState(true);\n\n return (\n
\n
\n
\n
\n

\n Choose your perfect plan\n

\n

\n Modern pricing plans designed for teams of all sizes. Scale your\n business with confidence.\n

\n
\n \n \n setIsAnnual(false)}\n type=\"button\"\n >\n Monthly\n \n setIsAnnual(true)}\n type=\"button\"\n >\n Annually\n \n
\n
\n
\n
\n
\n
\n {/* Basic Plan */}\n \n
\n {/* Title */}\n

\n Basic\n

\n {/* Price & Duration */}\n
\n \n €\n \n •\n \n Perfect for startups\n \n
\n {/* CTA Button */}\n \n Get Started\n \n {/* Description */}\n

\n Essential features for growing businesses. Get started\n with everything you need to launch your project.\n

\n {/* What's Included */}\n
\n

\n What's included:\n

\n
    \n {[\n \"1 Project\",\n \"Email Support\",\n \"Core Features\",\n \"Basic Analytics\",\n \"Standard Security\",\n \"Community Access\",\n ].map((item) => (\n \n
    \n \n \n \n
    \n {item}\n \n ))}\n
\n
\n
\n \n {/* Pro Plan (Featured) */}\n \n {/* Gradient Accent */}\n
\n\n
\n {/* Title */}\n

\n Pro{\" \"}\n
\n Most Popular\n
\n

\n {/* Price & Duration */}\n
\n \n €\n \n •\n Best for teams\n
\n {/* CTA Button */}\n \n Get Started\n \n {/* Description */}\n

\n Advanced features for professional teams. Everything you\n need to scale your business with confidence.\n

\n {/* What's Included */}\n
\n

\n What's included:\n

\n
    \n {[\n \"Unlimited Projects\",\n \"Priority Support\",\n \"Team Collaboration\",\n \"Advanced Analytics\",\n \"Custom Integrations\",\n \"API Access\",\n \"White-label Options\",\n \"Priority Updates\",\n ].map((item) => (\n \n
    \n \n \n \n
    \n {item}\n \n ))}\n
\n
\n
\n \n {/* Enterprise Plan */}\n \n
\n {/* Title */}\n

\n Enterprise\n

\n {/* Price & Duration */}\n
\n \n Custom\n \n •\n \n Tailored solutions\n \n
\n {/* CTA Button */}\n \n Contact Sales\n \n {/* Description */}\n

\n Custom solutions for large organizations. Get dedicated\n support and tailored features for your enterprise needs.\n

\n {/* What's Included */}\n
\n

\n What's included:\n

\n
    \n {[\n \"Everything in Pro\",\n \"Dedicated Manager\",\n \"Custom Integrations\",\n \"SLA & Support\",\n \"On-premise Options\",\n \"Advanced Security\",\n \"Training & Onboarding\",\n \"24/7 Phone Support\",\n ].map((item) => (\n \n
    \n \n \n \n
    \n {item}\n \n ))}\n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n );\n}\n\nexport default PricingModern;\n","target":"components/smoothui/pricing-2/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"pricing-3","type":"registry:ui","title":"pricing-3","description":"Creative pricing block with two plans","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":["https://smoothui.dev/r/smooth-button.json"],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport SmoothButton from \"@repo/smoothui/components/smooth-button\";\nimport { motion } from \"motion/react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nconst CARD_ANIMATION_DELAY = 0.1;\n\ninterface PriceFlowProps {\n className?: string;\n value: number;\n}\n\nfunction PriceFlow({ value, className = \"\" }: PriceFlowProps) {\n const [prevValue, setPrevValue] = useState(value);\n const prevTensRef = useRef(null);\n const nextTensRef = useRef(null);\n const prevOnesRef = useRef(null);\n const nextOnesRef = useRef(null);\n\n useEffect(() => {\n if (value !== prevValue) {\n const prevTens = prevTensRef.current;\n const nextTens = nextTensRef.current;\n const prevOnes = prevOnesRef.current;\n const nextOnes = nextOnesRef.current;\n\n if (\n prevTens &&\n nextTens &&\n Math.floor(value / 10) !== Math.floor(prevValue / 10)\n ) {\n if (Math.floor(value / 10) > Math.floor(prevValue / 10)) {\n prevTens.classList.add(\"slide-out-up\");\n nextTens.classList.add(\"slide-in-up\");\n } else {\n prevTens.classList.add(\"slide-out-down\");\n nextTens.classList.add(\"slide-in-down\");\n }\n\n const handleTensAnimationEnd = () => {\n prevTens.classList.remove(\"slide-out-up\", \"slide-out-down\");\n nextTens.classList.remove(\"slide-in-up\", \"slide-in-down\");\n prevTens.removeEventListener(\"animationend\", handleTensAnimationEnd);\n };\n\n prevTens.addEventListener(\"animationend\", handleTensAnimationEnd);\n }\n\n if (prevOnes && nextOnes && value % 10 !== prevValue % 10) {\n setTimeout(() => {\n if (value % 10 > prevValue % 10) {\n prevOnes.classList.add(\"slide-out-up\");\n nextOnes.classList.add(\"slide-in-up\");\n } else {\n prevOnes.classList.add(\"slide-out-down\");\n nextOnes.classList.add(\"slide-in-down\");\n }\n\n const handleOnesAnimationEnd = () => {\n prevOnes.classList.remove(\"slide-out-up\", \"slide-out-down\");\n nextOnes.classList.remove(\"slide-in-up\", \"slide-in-down\");\n prevOnes.removeEventListener(\n \"animationend\",\n handleOnesAnimationEnd\n );\n };\n\n prevOnes.addEventListener(\"animationend\", handleOnesAnimationEnd);\n }, 50);\n }\n\n setPrevValue(value);\n }\n }, [value, prevValue]);\n\n const formatValue = (val: number) => val.toString().padStart(2, \"0\");\n const prevFormatted = formatValue(prevValue);\n const currentFormatted = formatValue(value);\n\n return (\n \n \n \n {prevFormatted[0]}\n \n \n {currentFormatted[0]}\n \n \n \n \n {prevFormatted[1]}\n \n \n {currentFormatted[1]}\n \n \n \n );\n}\n\nexport function PricingCreative() {\n const [isAnnual, setIsAnnual] = useState(true);\n\n return (\n
\n
\n
\n
\n

\n Deploy faster with Vercel Pro\n

\n

\n Scale your applications with advanced deployment features and\n priority support\n

\n
\n \n \n setIsAnnual(false)}\n type=\"button\"\n >\n Monthly\n \n setIsAnnual(true)}\n type=\"button\"\n >\n Annually\n \n
\n
\n
\n
\n
\n
\n {/* Free Plan */}\n \n
\n {/* Title */}\n

\n Hobby\n

\n\n {/* Price & Duration */}\n
\n \n €\n \n •\n \n Perfect for personal projects\n \n
\n\n {/* CTA Button */}\n \n Get Started\n \n\n {/* Description */}\n

\n Deploy your personal projects and experiment with the\n latest web technologies. Perfect for developers learning\n and building side projects.\n

\n\n {/* What's Included */}\n
\n

\n What's included:\n

\n
    \n {[\n \"100GB Bandwidth\",\n \"Unlimited Personal Projects\",\n \"Community Support\",\n \"Automatic HTTPS\",\n \"Global CDN\",\n \"Preview Deployments\",\n ].map((item) => (\n \n
    \n \n \n \n
    \n {item}\n \n ))}\n
\n
\n
\n \n {/* Pro Plan */}\n \n {/* Gradient Accent */}\n
\n\n
\n {/* Title */}\n

\n Pro\n

\n\n {/* Price & Duration */}\n
\n \n €\n \n •\n Per month\n
\n\n {/* CTA Button */}\n \n Get Started\n \n\n {/* Description */}\n

\n Advanced deployment features for production applications.\n Perfect for teams building and scaling professional web\n applications.\n

\n\n {/* What's Included */}\n
\n

\n What's included:\n

\n
    \n {[\n \"Everything in Hobby\",\n \"Unlimited Bandwidth\",\n \"Team Collaboration\",\n \"Priority Support\",\n \"Advanced Analytics\",\n \"Password Protection\",\n \"Custom Domains\",\n \"Edge Functions\",\n \"Cron Jobs\",\n \"Webhooks\",\n ].map((item) => (\n \n
    \n \n \n \n
    \n {item}\n \n ))}\n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n );\n}\n\nexport default PricingCreative;\n","target":"components/smoothui/pricing-3/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"shared","type":"registry:ui","title":"shared","description":"Shared components for SmoothUI blocks","author":"Eduardo Calvo ","dependencies":["lucide-react","motion","class-variance-authority","@radix-ui/react-slot"],"devDependencies":[],"registryDependencies":["https://smoothui.dev/r/smooth-button.json"],"files":[{"type":"registry:ui","path":"animated-group.tsx","content":"\"use client\";\n\nimport { motion, type Variants } from \"motion/react\";\nimport React, { type ReactNode } from \"react\";\n\nexport type PresetType =\n | \"fade\"\n | \"slide\"\n | \"scale\"\n | \"blur\"\n | \"blur-slide\"\n | \"zoom\"\n | \"flip\"\n | \"bounce\"\n | \"rotate\"\n | \"swing\";\n\nexport interface AnimatedGroupProps {\n as?: React.ElementType;\n asChild?: React.ElementType;\n children: ReactNode;\n className?: string;\n preset?: PresetType;\n variants?: {\n container?: Variants;\n item?: Variants;\n };\n}\n\nconst defaultContainerVariants: Variants = {\n visible: {\n transition: {\n staggerChildren: 0.1,\n },\n },\n};\n\nconst defaultItemVariants: Variants = {\n hidden: { opacity: 0 },\n visible: { opacity: 1 },\n};\n\nconst presetVariants: Record = {\n fade: {},\n slide: {\n hidden: { y: 20 },\n visible: { y: 0 },\n },\n scale: {\n hidden: { scale: 0.8 },\n visible: { scale: 1 },\n },\n blur: {\n hidden: { filter: \"blur(4px)\" },\n visible: { filter: \"blur(0px)\" },\n },\n \"blur-slide\": {\n hidden: { filter: \"blur(4px)\", y: 20 },\n visible: { filter: \"blur(0px)\", y: 0 },\n },\n zoom: {\n hidden: { scale: 0.5 },\n visible: {\n scale: 1,\n transition: { type: \"spring\" as const, stiffness: 300, damping: 20 },\n },\n },\n flip: {\n hidden: { rotateX: -90 },\n visible: {\n rotateX: 0,\n transition: { type: \"spring\" as const, stiffness: 300, damping: 20 },\n },\n },\n bounce: {\n hidden: { y: -50 },\n visible: {\n y: 0,\n transition: { type: \"spring\" as const, stiffness: 400, damping: 10 },\n },\n },\n rotate: {\n hidden: { rotate: -180 },\n visible: {\n rotate: 0,\n transition: { type: \"spring\" as const, stiffness: 200, damping: 15 },\n },\n },\n swing: {\n hidden: { rotate: -10 },\n visible: {\n rotate: 0,\n transition: { type: \"spring\" as const, stiffness: 300, damping: 8 },\n },\n },\n};\n\nconst addDefaultVariants = (variants: Variants) => ({\n hidden: { ...defaultItemVariants.hidden, ...variants.hidden },\n visible: { ...defaultItemVariants.visible, ...variants.visible },\n});\n\nfunction AnimatedGroup({\n children,\n className,\n variants,\n preset,\n as = \"div\",\n asChild = \"div\",\n}: AnimatedGroupProps) {\n const selectedVariants = {\n item: addDefaultVariants(preset ? presetVariants[preset] : {}),\n container: addDefaultVariants(defaultContainerVariants),\n };\n const containerVariants = variants?.container || selectedVariants.container;\n const itemVariants = variants?.item || selectedVariants.item;\n\n const MotionComponent = motion(as);\n\n const MotionChild = motion(asChild);\n\n return (\n \n {React.Children.map(children, (child, index) => (\n \n {child}\n \n ))}\n \n );\n}\n\nexport { AnimatedGroup };\n","target":"components/smoothui/shared/animated-group.tsx"},{"type":"registry:ui","path":"animated-text.tsx","content":"\"use client\";\n\nimport { motion } from \"motion/react\";\nimport type { ElementType, ReactNode } from \"react\";\n\ninterface AnimatedTextProps {\n as?: ElementType;\n children: ReactNode;\n className?: string;\n delay?: number;\n}\n\nexport function AnimatedText({\n as: Tag = \"span\",\n children,\n className,\n delay = 0,\n}: AnimatedTextProps) {\n return (\n \n {children}\n \n );\n}\n","target":"components/smoothui/shared/animated-text.tsx"},{"type":"registry:ui","path":"hero-header.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport SmoothButton from \"@repo/smoothui/components/smooth-button\";\nimport { Menu, X } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { useState } from \"react\";\n\nconst menuItems = [\n { id: \"features\", name: \"Features\", href: \"#link\" },\n { id: \"pricing\", name: \"Pricing\", href: \"#link\" },\n { id: \"about\", name: \"About\", href: \"#link\" },\n];\n\n// Animation constants\nconst ANIMATION_DURATION = 0.2;\nconst STAGGER_DELAY = 0.05;\nconst EASE_OUT_QUART_X1 = 0.22;\nconst EASE_OUT_QUART_Y1 = 1;\nconst EASE_OUT_QUART_X2 = 0.36;\nconst EASE_OUT_QUART_Y2 = 1;\nconst EASE_OUT_QUART = [\n EASE_OUT_QUART_X1,\n EASE_OUT_QUART_Y1,\n EASE_OUT_QUART_X2,\n EASE_OUT_QUART_Y2,\n] as const;\nconst ROTATION_ANGLE = 180;\nconst SCALE_MIN = 0;\nconst SCALE_MAX = 1;\nconst TRANSLATE_Y_OFFSET = -10;\nconst TRANSLATE_X_OFFSET = -10;\n\nexport const HeroHeader = () => {\n const [menuState, setMenuState] = useState(false);\n\n return (\n
\n
\n \n
\n
\n );\n};\n","target":"components/smoothui/shared/hero-header.tsx"},{"type":"registry:ui","path":"logos.tsx","content":"import React from \"react\";\n\nfunction Canpoy() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction Canva() {\n const id1 = React.useId();\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nfunction Casetext() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction _Classdojo() {\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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction Clearbit() {\n return (\n \n \n \n \n \n \n );\n}\n\nfunction Descript() {\n return (\n \n \n \n \n );\n}\n\nfunction Duolingo() {\n return (\n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction Faire() {\n return (\n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction _Gainsight() {\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\nfunction _Handshake() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction IDEO() {\n return (\n \n \n \n );\n}\n\nfunction KhanAcademy() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction Quizlet() {\n return (\n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction Ramp() {\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nfunction Strava() {\n return (\n \n \n \n \n \n \n \n \n \n \n );\n}\n\nexport {\n Canpoy,\n Canva,\n Casetext,\n Clearbit,\n Descript,\n Duolingo,\n Faire,\n IDEO,\n KhanAcademy,\n Quizlet,\n Ramp,\n Strava,\n};\n","target":"components/smoothui/shared/logos.tsx"},{"type":"registry:ui","path":"smoothbutton.tsx","content":"import { Slot } from \"@radix-ui/react-slot\";\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type React from \"react\";\nimport type { ButtonHTMLAttributes } from \"react\";\n\nconst buttonVariants = cva(\n \"inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm ring-offset-background transition-transform duration-150 ease-out focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90\",\n destructive:\n \"bg-gradient-to-b from-[#FD4B4E] to-destructive text-shadow-sm text-white shadow-[0px_1px_2px_rgba(0,0,0,0.4),0px_0px_0px_1px_#F61418,inset_0px_0.75px_0px_rgba(255,255,255,0.2)] hover:from-destructive hover:to-destructive\",\n outline:\n \"border border-transparent bg-background shadow-black/15 shadow-sm ring-1 ring-foreground/10 hover:bg-primary dark:ring-foreground/15\",\n secondary:\n \"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80\",\n ghost: \"hover:bg-background hover:text-foreground hover:shadow-custom\",\n link: \"text-primary underline-offset-4 hover:underline\",\n candy:\n \"border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-shadow-sm text-white shadow-black/20 shadow-md ring-(--ring-color) ring-1 [--ring-color:color-mix(in_oklab,var(--color-foreground)15%,var(--color-brand))] hover:from-brand-secondary hover:to-brand-secondary [&_svg]:drop-shadow-sm\",\n },\n size: {\n default: \"h-10 px-4 py-2\",\n sm: \"h-9 rounded-md px-4 py-2\",\n lg: \"h-11 rounded-md px-8\",\n icon: \"h-10 w-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n);\n\nexport interface ButtonProps\n extends ButtonHTMLAttributes,\n VariantProps {\n asChild?: boolean;\n ref?: React.Ref;\n}\n\nfunction Button({\n className,\n variant,\n size,\n asChild = false,\n ref,\n ...props\n}: ButtonProps) {\n const Comp = asChild ? Slot : \"button\";\n return (\n \n );\n}\n\nexport { Button, buttonVariants };\n","target":"components/smoothui/shared/smoothbutton.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"stats-1","type":"registry:ui","title":"stats-1","description":"Grid stats section block with hover effects","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { motion, useInView } from \"motion/react\";\nimport { useRef } from \"react\";\n\nconst STAGGER_DELAY = 0.1;\nconst VALUE_DELAY_OFFSET = 0.2;\n\ninterface StatsGridProps {\n description?: string;\n stats?: Array<{\n value: string;\n label: string;\n description?: string;\n }>;\n title?: string;\n}\n\nexport function StatsGrid({\n title = \"Our Impact in Numbers\",\n description = \"See how we're making a difference across the globe\",\n stats = [\n {\n value: \"10M+\",\n label: \"Active Users\",\n description: \"Growing every day\",\n },\n {\n value: \"99.9%\",\n label: \"Uptime\",\n description: \"Reliable service\",\n },\n {\n value: \"150+\",\n label: \"Countries\",\n description: \"Worldwide reach\",\n },\n {\n value: \"24/7\",\n label: \"Support\",\n description: \"Always here to help\",\n },\n ],\n}: StatsGridProps) {\n const ref = useRef(null);\n const isInView = useInView(ref, { once: true });\n\n return (\n
\n
\n \n

\n {title}\n

\n

\n {description}\n

\n \n \n {stats.map((stat, index) => (\n \n \n {stat.value}\n \n

\n {stat.label}\n

\n {stat.description && (\n

{stat.description}

\n )}\n {/* Hover effect background */}\n \n \n ))}\n
\n \n
\n );\n}\n\nexport default StatsGrid;\n","target":"components/smoothui/stats-1/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"stats-2","type":"registry:ui","title":"stats-2","description":"Cards stats section block with icons and trends","author":"Eduardo Calvo ","dependencies":["lucide-react","motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { DollarSign, Smartphone, Star, Users } from \"lucide-react\";\nimport { motion, useInView } from \"motion/react\";\nimport React, { useRef } from \"react\";\n\nconst STAGGER_DELAY = 0.1;\nconst ICON_STAGGER_OFFSET = 0.2;\nconst VALUE_DELAY_OFFSET = 0.3;\nconst TREND_STAGGER_OFFSET = 0.5;\n\ninterface StatsCardsProps {\n description?: string;\n stats?: Array<{\n value: string;\n label: string;\n description?: string;\n icon?: string;\n trend?: {\n value: string;\n direction: \"up\" | \"down\";\n };\n }>;\n title?: string;\n}\n\nconst iconMap = {\n DollarSign,\n Users,\n Star,\n Smartphone,\n};\n\nexport function StatsCards({\n title = \"Key Metrics\",\n description = \"Track your success with these important numbers\",\n stats = [\n {\n value: \"2.5M\",\n label: \"Revenue\",\n description: \"Annual recurring revenue\",\n icon: \"DollarSign\",\n trend: { value: \"+12%\", direction: \"up\" },\n },\n {\n value: \"45K\",\n label: \"Customers\",\n description: \"Happy customers worldwide\",\n icon: \"Users\",\n trend: { value: \"+8%\", direction: \"up\" },\n },\n {\n value: \"98%\",\n label: \"Satisfaction\",\n description: \"Customer satisfaction rate\",\n icon: \"Star\",\n trend: { value: \"+2%\", direction: \"up\" },\n },\n {\n value: \"1.2M\",\n label: \"Downloads\",\n description: \"Total app downloads\",\n icon: \"Smartphone\",\n trend: { value: \"+15%\", direction: \"up\" },\n },\n ],\n}: StatsCardsProps) {\n const ref = useRef(null);\n const isInView = useInView(ref, { once: true });\n\n return (\n
\n
\n \n

\n {title}\n

\n

\n {description}\n

\n \n\n \n {stats.map((stat, index) => (\n \n {/* Icon */}\n \n {React.createElement(\n iconMap[stat.icon as keyof typeof iconMap] || DollarSign,\n {\n className: \"h-8 w-8\",\n }\n )}\n \n\n {/* Value */}\n \n {stat.value}\n \n\n {/* Label */}\n

\n {stat.label}\n

\n\n {/* Description */}\n {stat.description && (\n

\n {stat.description}\n

\n )}\n\n {/* Trend */}\n {stat.trend && (\n \n \n {stat.trend.direction === \"up\" ? \"↗\" : \"↘\"}\n \n {stat.trend.value}\n \n )}\n\n {/* Hover effect background */}\n \n \n ))}\n
\n \n
\n );\n}\n\nexport default StatsCards;\n","target":"components/smoothui/stats-2/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"team-1","type":"registry:ui","title":"team-1","description":"Grid team section block with hover effects","author":"Eduardo Calvo ","dependencies":["@smoothui/data","motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { getAllPeople, getAvatarUrl, type Person } from \"@smoothui/data\";\nimport { motion, useInView } from \"motion/react\";\nimport { useRef } from \"react\";\n\nconst DEFAULT_MEMBER_COUNT = 4;\nconst AVATAR_SIZE = 400;\nconst STAGGER_DELAY = 0.1;\n\ninterface TeamGridProps {\n description?: string;\n members?: Person[];\n title?: string;\n}\n\nexport function TeamGrid({\n title = \"Our team\",\n description = \"We're a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.\",\n members = getAllPeople().slice(0, DEFAULT_MEMBER_COUNT),\n}: TeamGridProps) {\n const ref = useRef(null);\n const isInView = useInView(ref, { once: true });\n\n return (\n
\n
\n \n

\n {title}\n

\n

{description}

\n \n \n {members.map((member, index) => (\n \n \n {/* Avatar */}\n \n \n \n \n {/* Name */}\n

\n {member.name}\n

\n {/* Role */}\n

{member.role}

\n {/* Location */}\n {member.location && (\n

\n {member.location}\n

\n )}\n {/* Bio */}\n {member.bio && (\n

\n {member.bio}\n

\n )}\n \n \n ))}\n \n
\n
\n );\n}\n\nexport default TeamGrid;\n","target":"components/smoothui/team-1/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"team-2","type":"registry:ui","title":"team-2","description":"Carousel team section block with auto-play","author":"Eduardo Calvo ","dependencies":["@smoothui/data","motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { getAllPeople, getAvatarUrl, type Person } from \"@smoothui/data\";\nimport { motion } from \"motion/react\";\nimport { useEffect, useState } from \"react\";\n\nconst CARDS_PER_VIEW = 3; // Number of cards visible at once\nconst CARD_WIDTH = 288;\nconst CARD_GAP = 16;\nconst AUTOPLAY_INTERVAL = 5000;\nconst TRANSITION_TIMEOUT = 1500;\nconst AVATAR_SIZE = 160;\nconst STAGGER_DELAY = 0.1;\n\ninterface TeamCarouselProps {\n description?: string;\n members?: Person[];\n subtitle?: string;\n title?: string;\n}\n\nexport function TeamCarousel({\n title = \"Tech Pioneers\",\n subtitle = \"building the future\",\n description = \"We bring together brilliant developers, engineers, and tech innovators to create groundbreaking digital solutions.\",\n members = getAllPeople(),\n}: TeamCarouselProps) {\n const [currentIndex, setCurrentIndex] = useState(0);\n const [isAutoPlaying, setIsAutoPlaying] = useState(true);\n const [isTransitioning, setIsTransitioning] = useState(false);\n\n useEffect(() => {\n if (!isAutoPlaying || isTransitioning) {\n return;\n }\n\n const interval = setInterval(() => {\n setCurrentIndex(\n (prev) => (prev + 1) % (members.length - CARDS_PER_VIEW + 1)\n );\n }, AUTOPLAY_INTERVAL);\n\n return () => clearInterval(interval);\n }, [members.length, isAutoPlaying, isTransitioning]);\n\n const nextSlide = () => {\n if (isTransitioning) {\n return;\n }\n const maxIndex = members.length - CARDS_PER_VIEW;\n if (currentIndex >= maxIndex) {\n return;\n }\n\n setIsTransitioning(true);\n setCurrentIndex((prev) => Math.min(prev + 1, maxIndex));\n setIsAutoPlaying(false);\n\n setTimeout(() => {\n setIsTransitioning(false);\n setIsAutoPlaying(true);\n }, TRANSITION_TIMEOUT);\n };\n\n const prevSlide = () => {\n if (isTransitioning) {\n return;\n }\n if (currentIndex <= 0) {\n return;\n }\n\n setIsTransitioning(true);\n setCurrentIndex((prev) => Math.max(prev - 1, 0));\n setIsAutoPlaying(false);\n\n setTimeout(() => {\n setIsTransitioning(false);\n setIsAutoPlaying(true);\n }, TRANSITION_TIMEOUT);\n };\n\n return (\n
\n
\n \n

\n {title}
\n {subtitle}\n

\n

{description}

\n \n\n
\n {/* Navigation Buttons */}\n \n\n {/* Carousel Content */}\n
div[data-slot=carousel-content]]:overflow-visible\">\n
\n \n {members.map((member, index) => (\n \n \n \n
\n

\n {member.name}\n

\n

\n {member.role}\n

\n
\n \n

\n {member.experience}\n

\n \n
\n ))}\n \n
\n
\n
\n \n
\n );\n}\n\nexport default TeamCarousel;\n","target":"components/smoothui/team-2/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"testimonials-1","type":"registry:ui","title":"testimonials-1","description":"Simple testimonials block with auto-rotating cards","author":"Eduardo Calvo ","dependencies":["@smoothui/data","motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { getAvatarUrl, getTestimonials } from \"@smoothui/data\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nconst TESTIMONIAL_COUNT = 4;\nconst AVATAR_SIZE = 96;\nconst DURATION = 5000; // ms\nconst BAR_WIDTH = 50;\nconst CIRCLE_SIZE = 12;\nconst BORDER_RADIUS_ACTIVE = 8;\nconst BORDER_RADIUS_INACTIVE = 999;\nconst MILLISECONDS_TO_SECONDS = 1000;\n\nconst testimonials = getTestimonials(TESTIMONIAL_COUNT).map((testimonial) => ({\n quote: testimonial.content || \"\",\n avatar: testimonial.avatar,\n name: testimonial.name,\n role: testimonial.role,\n}));\n\nexport function TestimonialsSimple() {\n const [index, setIndex] = useState(0);\n const timeoutRef = useRef(null);\n\n useEffect(() => {\n timeoutRef.current = setTimeout(() => {\n setIndex((prev) => (prev + 1) % testimonials.length);\n }, DURATION);\n\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n }, []);\n\n return (\n
\n
\n
\n \n \n “{testimonials[index].quote}”\n \n \n
\n
\n \n \n \n
\n
\n
\n {testimonials[index].name}\n
\n
\n {testimonials[index].role}\n
\n
\n \n \n
\n {/* Progress Bar & Circles Indicator */}\n
\n {testimonials.map((testimonial, i) => {\n const isActive = i === index;\n return (\n \n {isActive && (\n \n )}\n \n );\n })}\n
\n
\n
\n );\n}\n\nexport default TestimonialsSimple;\n","target":"components/smoothui/testimonials-1/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"testimonials-2","type":"registry:ui","title":"testimonials-2","description":"Grid testimonials block with navigation arrows","author":"Eduardo Calvo ","dependencies":["@smoothui/data","lucide-react","motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@repo/shadcn-ui/components/ui/avatar\";\nimport { getAvatarUrl, getTestimonials } from \"@smoothui/data\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\nconst testimonials = getTestimonials(7);\n\nexport function TestimonialsGrid() {\n const [active, setActive] = useState(0);\n const [autoplay] = useState(false);\n\n const handleNext = useCallback(() => {\n setActive((prev) => (prev + 1) % testimonials.length);\n }, []);\n\n const handlePrev = () => {\n setActive((prev) => (prev - 1 + testimonials.length) % testimonials.length);\n };\n\n const isActive = (index: number) => index === active;\n\n useEffect(() => {\n if (autoplay) {\n const interval = setInterval(handleNext, 5000);\n return () => clearInterval(interval);\n }\n }, [autoplay, handleNext]);\n\n return (\n
\n
\n
\n \n {/* Layout: Title on left, Testimonial on right */}\n
\n {/* Left side - Title and description */}\n
\n

\n What Developers Say\n

\n

\n Join thousands of developers who are building faster, more\n beautiful UIs with SmoothUI. See what they're saying\n about their experience.\n

\n
\n {/* Right side - Testimonial card */}\n
\n {/* Navigation Arrows - Above the card */}\n
\n \n \n \n \n \n \n
\n
\n \n {testimonials.map((testimonial, index) => (\n \n
\n \n {(testimonial.content || \"\")\n .split(\" \")\n .map((word, wordIndex) => (\n \n {word} \n \n ))}\n \n \n \n \n \n {testimonial.name.charAt(0)}\n \n \n
\n
\n {testimonial.name}\n
\n \n {testimonial.role}\n \n
\n \n
\n \n ))}\n \n
\n
\n
\n \n
\n
\n
\n );\n}\n\nexport default TestimonialsGrid;\n","target":"components/smoothui/testimonials-2/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"testimonials-3","type":"registry:ui","title":"testimonials-3","description":"Star testimonials block with grid layout","author":"Eduardo Calvo ","dependencies":["@smoothui/data","lucide-react","motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@repo/shadcn-ui/components/ui/avatar\";\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { getAvatarUrl, getTestimonials } from \"@smoothui/data\";\nimport { Star } from \"lucide-react\";\nimport { motion } from \"motion/react\";\n\nconst testimonials = getTestimonials(4);\n\nexport function TestimonialsStars() {\n return (\n
\n
\n
\n \n

\n Developer Reviews\n

\n

\n See what the community is saying about SmoothUI. Real feedback\n from developers building amazing user experiences.\n

\n \n\n \n {testimonials.map((testimonial, index) => (\n \n \n {Array.from({ length: 5 }).map((_, i) => (\n \n \n \n ))}\n \n\n \n {testimonial.content}\n \n\n \n \n \n \n {testimonial.name.charAt(0)}\n \n \n
\n {testimonial.name}\n
\n \n \n {testimonial.role}\n \n \n \n ))}\n \n
\n
\n
\n );\n}\n\nexport default TestimonialsStars;\n","target":"components/smoothui/testimonials-3/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"agent-avatar","type":"registry:ui","title":"agent-avatar","description":"Canvas-based generative pixel avatar for AI agents, unique per seed.","author":"Eduardo Calvo ","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { useEffect, useRef } from \"react\";\n\nexport type AgentAvatarProps = Omit<\n React.CanvasHTMLAttributes,\n \"children\"\n> & {\n /** String seed to generate a unique deterministic avatar pattern */\n seed: string;\n /** Diameter in pixels */\n size?: number;\n /** Enable pixel animation (respects prefers-reduced-motion) */\n animated?: boolean;\n};\n\nconst GRID_SIZE = 6;\n\n/** Pulse: each pixel oscillates lightness independently */\nconst PULSE_SPEED = 0.002;\nconst PULSE_AMPLITUDE = 22;\n\n/** Breathe: global slow scale oscillation */\nconst BREATHE_SPEED = 0.001;\nconst BREATHE_AMPLITUDE = 10;\n\n/** Wave: diagonal sweep across the grid */\nconst WAVE_SPEED = 0.0015;\nconst WAVE_AMPLITUDE = 15;\nconst WAVE_LENGTH = 3;\n\n/** Sparkle: random bright flashes */\nconst SPARKLE_SPEED = 0.004;\nconst SPARKLE_THRESHOLD = 0.92;\nconst SPARKLE_BOOST = 25;\n\n/** Scale pulse: whole avatar breathes in size */\nconst SCALE_PULSE_SPEED = 0.0008;\nconst SCALE_PULSE_AMOUNT = 0.03;\n\n/** Max hue spread from base — wider for richer color variation */\nconst HUE_SPREAD = 45;\n\nconst GLOW_RADIUS_RATIO = 0.25;\n\n/** Simple deterministic hash from a string */\nconst hashSeed = (str: string): number => {\n let hash = 0;\n for (const char of str) {\n hash = ((hash << 5) - hash + char.charCodeAt(0)) | 0;\n }\n return Math.abs(hash);\n};\n\n/** Seeded PRNG (mulberry32) */\nconst createRng = (seed: number) => {\n let state = seed;\n return () => {\n state = (state + 0x6d_2b_79_f5) | 0;\n let t = Math.imul(state ^ (state >>> 15), 1 | state);\n t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n return ((t ^ (t >>> 14)) >>> 0) / 4_294_967_296;\n };\n};\n\ntype HSL = [hue: number, saturation: number, lightness: number];\n\n/** Derive a 3-color palette within the same hue family */\nconst generatePalette = (hash: number): [HSL, HSL, HSL] => {\n const rng = createRng(hash);\n const baseHue = rng() * 360;\n const sat = 75 + rng() * 20; // 75-95%\n\n return [\n [baseHue, sat, 55 + rng() * 10],\n [\n (baseHue - HUE_SPREAD + rng() * HUE_SPREAD * 2) % 360,\n sat - 5 + rng() * 10,\n 40 + rng() * 15,\n ],\n [\n (baseHue - HUE_SPREAD + rng() * HUE_SPREAD * 2) % 360,\n sat - 10 + rng() * 15,\n 60 + rng() * 15,\n ],\n ];\n};\n\ntype Cell = {\n colorIndex: number;\n phase: number;\n brightness: number;\n sparklePhase: number;\n};\n\n/** Build a grid with per-cell metadata */\nconst generateGrid = (hash: number): Cell[][] => {\n const rng = createRng(hash + 1);\n const grid: Cell[][] = [];\n\n for (let y = 0; y < GRID_SIZE; y++) {\n grid[y] = [];\n for (let x = 0; x < GRID_SIZE; x++) {\n grid[y][x] = {\n colorIndex: Math.floor(rng() * 3),\n phase: rng() * Math.PI * 2,\n brightness: 0.3 + rng() * 0.7,\n sparklePhase: rng() * Math.PI * 2,\n };\n }\n }\n\n return grid;\n};\n\nconst AgentAvatar = ({\n seed,\n size = 64,\n animated = true,\n className,\n ...props\n}: AgentAvatarProps) => {\n const canvasRef = useRef(null);\n const rafRef = useRef(0);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) {\n return;\n }\n\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) {\n return;\n }\n\n const dpr = window.devicePixelRatio || 1;\n canvas.width = size * dpr;\n canvas.height = size * dpr;\n ctx.scale(dpr, dpr);\n\n const hash = hashSeed(seed);\n const palette = generatePalette(hash);\n const grid = generateGrid(hash);\n const cellSize = size / GRID_SIZE;\n const half = size / 2;\n\n const motionQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n let shouldAnimate = animated && !motionQuery.matches;\n\n const draw = (time: number) => {\n ctx.clearRect(0, 0, size, size);\n\n // Scale pulse — whole avatar breathes\n const scale = shouldAnimate\n ? 1 + Math.sin(time * SCALE_PULSE_SPEED) * SCALE_PULSE_AMOUNT\n : 1;\n\n ctx.save();\n ctx.translate(half, half);\n ctx.scale(scale, scale);\n ctx.translate(-half, -half);\n\n // Clip to circle\n ctx.beginPath();\n ctx.arc(half, half, half, 0, Math.PI * 2);\n ctx.clip();\n\n // Dark background\n ctx.fillStyle = \"#08080f\";\n ctx.fillRect(0, 0, size, size);\n\n // Global breathe offset for lightness\n const breatheOffset = shouldAnimate\n ? Math.sin(time * BREATHE_SPEED) * BREATHE_AMPLITUDE\n : 0;\n\n // Draw pixel grid\n for (let y = 0; y < GRID_SIZE; y++) {\n for (let x = 0; x < GRID_SIZE; x++) {\n const cell = grid[y][x];\n const [h, s, l] = palette[cell.colorIndex];\n\n // Per-pixel pulse\n const pulse = shouldAnimate\n ? Math.sin(time * PULSE_SPEED + cell.phase) * PULSE_AMPLITUDE\n : 0;\n\n // Diagonal wave sweep\n const waveDist = (x + y) / WAVE_LENGTH;\n const wave = shouldAnimate\n ? Math.sin(time * WAVE_SPEED + waveDist) * WAVE_AMPLITUDE\n : 0;\n\n // Sparkle — occasional bright flash\n const sparkleVal = shouldAnimate\n ? Math.sin(time * SPARKLE_SPEED + cell.sparklePhase)\n : 0;\n const sparkle =\n sparkleVal > SPARKLE_THRESHOLD\n ? ((sparkleVal - SPARKLE_THRESHOLD) / (1 - SPARKLE_THRESHOLD)) *\n SPARKLE_BOOST\n : 0;\n\n const finalLight = Math.min(\n 90,\n Math.max(\n 20,\n (l + pulse + breatheOffset + wave + sparkle) * cell.brightness\n )\n );\n const finalSat = Math.min(100, s + 5);\n\n // Pixel glow — subtle shadow per cell\n ctx.shadowColor = `hsl(${h}, ${finalSat}%, ${finalLight}%)`;\n ctx.shadowBlur = cellSize * 0.45;\n\n ctx.fillStyle = `hsl(${h}, ${finalSat}%, ${finalLight}%)`;\n ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);\n }\n }\n\n // Reset shadow before restore\n ctx.shadowBlur = 0;\n ctx.restore();\n\n // Outer glow ring\n const [gh, gs, gl] = palette[0];\n ctx.save();\n ctx.globalCompositeOperation = \"screen\";\n ctx.shadowColor = `hsla(${gh}, ${gs}%, ${gl}%, 0.6)`;\n ctx.shadowBlur = size * GLOW_RADIUS_RATIO;\n ctx.beginPath();\n ctx.arc(half, half, half - 1, 0, Math.PI * 2);\n ctx.strokeStyle = `hsla(${gh}, ${gs}%, ${gl}%, 0.15)`;\n ctx.lineWidth = 2;\n ctx.stroke();\n ctx.restore();\n\n if (shouldAnimate) {\n rafRef.current = requestAnimationFrame(draw);\n }\n };\n\n const handleMotionChange = () => {\n cancelAnimationFrame(rafRef.current);\n shouldAnimate = animated && !motionQuery.matches;\n if (shouldAnimate) {\n rafRef.current = requestAnimationFrame(draw);\n } else {\n draw(0);\n }\n };\n\n motionQuery.addEventListener(\"change\", handleMotionChange);\n\n if (shouldAnimate) {\n rafRef.current = requestAnimationFrame(draw);\n } else {\n draw(0);\n }\n\n return () => {\n cancelAnimationFrame(rafRef.current);\n motionQuery.removeEventListener(\"change\", handleMotionChange);\n };\n }, [seed, size, animated]);\n\n return (\n \n );\n};\n\nexport default AgentAvatar;\n","target":"components/smoothui/agent-avatar/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"ai-branch","type":"registry:ui","title":"ai-branch","description":"An interactive AI branch component for displaying conversation flows.","author":"Eduardo Calvo ","dependencies":["lucide-react","motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { ChevronLeftIcon, ChevronRightIcon, Copy, Pencil } from \"lucide-react\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport type { HTMLAttributes, ReactElement, ReactNode } from \"react\";\nimport { createContext, useContext, useEffect, useMemo, useState } from \"react\";\n\ninterface AIBranchContextType {\n branches: ReactElement[];\n currentBranch: number;\n goToNext: () => void;\n goToPrevious: () => void;\n setBranches: (branches: ReactElement[]) => void;\n totalBranches: number;\n}\n\nconst AIBranchContext = createContext(null);\n\nconst useAIBranch = () => {\n const context = useContext(AIBranchContext);\n if (!context) {\n throw new Error(\"AIBranch components must be used within AIBranch\");\n }\n return context;\n};\n\nexport type AIBranchProps = HTMLAttributes & {\n defaultBranch?: number;\n onBranchChange?: (branchIndex: number) => void;\n};\n\nexport const AIBranch = ({\n defaultBranch = 0,\n onBranchChange,\n className,\n ...props\n}: AIBranchProps) => {\n const [currentBranch, setCurrentBranch] = useState(defaultBranch);\n const [branches, setBranches] = useState([]);\n\n const handleBranchChange = (newBranch: number) => {\n setCurrentBranch(newBranch);\n onBranchChange?.(newBranch);\n };\n\n const goToPrevious = () => {\n const newBranch =\n currentBranch > 0 ? currentBranch - 1 : branches.length - 1;\n handleBranchChange(newBranch);\n };\n\n const goToNext = () => {\n const newBranch =\n currentBranch < branches.length - 1 ? currentBranch + 1 : 0;\n handleBranchChange(newBranch);\n };\n\n const contextValue: AIBranchContextType = {\n currentBranch,\n totalBranches: branches.length,\n goToPrevious,\n goToNext,\n branches,\n setBranches,\n };\n\n return (\n \n div]:pb-0\", className)}\n {...props}\n />\n \n );\n};\n\nexport interface AIBranchMessagesProps {\n children: ReactElement | ReactElement[];\n}\n\nexport const AIBranchMessages = ({ children }: AIBranchMessagesProps) => {\n const { currentBranch, setBranches, branches } = useAIBranch();\n const shouldReduceMotion = useReducedMotion();\n const childrenArray = useMemo(\n () => (Array.isArray(children) ? children : [children]),\n [children]\n );\n\n // Use useEffect to update branches when they change\n useEffect(() => {\n if (branches.length !== childrenArray.length) {\n setBranches(childrenArray);\n }\n }, [childrenArray, branches, setBranches]);\n\n return childrenArray.map((branch, index) => (\n div]:pb-0\",\n index === currentBranch ? \"block\" : \"hidden\"\n )}\n initial={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: 10 }}\n key={`branch-${index}-${currentBranch}`}\n transition={\n shouldReduceMotion\n ? { duration: 0 }\n : {\n duration: 0.25,\n type: \"spring\" as const,\n stiffness: 300,\n damping: 30,\n }\n }\n >\n {branch}\n \n ));\n};\n\nexport type AIBranchSelectorProps = HTMLAttributes & {\n from: \"user\" | \"assistant\";\n};\n\nexport const AIBranchSelector = ({\n className,\n from,\n ...props\n}: AIBranchSelectorProps) => {\n const { totalBranches } = useAIBranch();\n\n // Don't render if there's only one branch\n if (totalBranches <= 1) {\n return null;\n }\n\n return (\n \n );\n};\n\nexport interface AIBranchPreviousProps {\n children?: ReactNode;\n className?: string;\n}\n\nexport const AIBranchPrevious = ({\n className,\n children,\n}: AIBranchPreviousProps) => {\n const { goToPrevious, totalBranches } = useAIBranch();\n const shouldReduceMotion = useReducedMotion();\n\n return (\n \n {children ?? }\n \n );\n};\n\nexport interface AIBranchNextProps {\n children?: ReactNode;\n className?: string;\n}\n\nexport const AIBranchNext = ({ className, children }: AIBranchNextProps) => {\n const { goToNext, totalBranches } = useAIBranch();\n const shouldReduceMotion = useReducedMotion();\n\n return (\n \n {children ?? }\n \n );\n};\n\nexport interface AIBranchPageProps {\n className?: string;\n}\n\nexport const AIBranchPage = ({ className }: AIBranchPageProps) => {\n const { currentBranch, totalBranches } = useAIBranch();\n\n return (\n \n {currentBranch + 1} of {totalBranches}\n \n );\n};\n\n// Updated type for conversation branches\nexport interface AIBranchData {\n aiResponse: string;\n id: string;\n isActive: boolean;\n timestamp: Date;\n userMessage: string;\n}\n\n// Export the type alias for backward compatibility\nexport type AIBranch = AIBranchData;\n\ninterface LegacyAiBranchProps {\n branches: AIBranchData[];\n className?: string;\n onBranchSelect: (branchId: string) => void;\n}\n\n// Updated legacy component to show conversation branches\nexport function LegacyAiBranch({\n branches,\n onBranchSelect,\n className,\n}: LegacyAiBranchProps) {\n const shouldReduceMotion = useReducedMotion();\n const [currentBranchIndex, setCurrentBranchIndex] = useState(() =>\n branches.findIndex((branch) => branch.isActive)\n );\n\n const activeBranch = branches[currentBranchIndex];\n\n const goToPrevious = () => {\n const newIndex =\n currentBranchIndex > 0 ? currentBranchIndex - 1 : branches.length - 1;\n setCurrentBranchIndex(newIndex);\n onBranchSelect(branches[newIndex].id);\n };\n\n const goToNext = () => {\n const newIndex =\n currentBranchIndex < branches.length - 1 ? currentBranchIndex + 1 : 0;\n setCurrentBranchIndex(newIndex);\n onBranchSelect(branches[newIndex].id);\n };\n\n return (\n
\n {/* Active Branch Display */}\n {activeBranch && (\n \n {/* User Message with Branch Navigation */}\n
\n
\n
\n

{activeBranch.userMessage}

\n
\n\n {/* Branch Navigation Controls */}\n {branches.length > 1 && (\n
\n \n \n \n\n \n \n \n\n \n \n \n\n \n {currentBranchIndex + 1}/{branches.length}\n \n\n \n \n \n
\n )}\n
\n
\n\n {/* AI Response */}\n
\n
\n

\n {activeBranch.aiResponse}\n

\n
\n
\n \n )}\n
\n );\n}\n\n// Export the legacy component as the default for backward compatibility\nexport { LegacyAiBranch as AiBranch };\n\n// Add default export for lazy loading\nexport default LegacyAiBranch;\n","target":"components/smoothui/ai-branch/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"ai-input","type":"registry:ui","title":"ai-input","description":"A AiInput component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion","class-variance-authority"],"devDependencies":[],"registryDependencies":["https://smoothui.dev/r/smooth-button.json","https://smoothui.dev/r/siri-orb.json"],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport SmoothButton from \"@repo/smoothui/components/smooth-button\";\nimport { cx } from \"class-variance-authority\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport React from \"react\";\nimport SiriOrb from \"../siri-orb\";\nimport { useClickOutside } from \"./use-click-outside\";\n\nconst SPEED = 1;\nconst SUCCESS_DURATION = 1500;\nconst DOCK_HEIGHT = 44;\nconst FEEDBACK_BORDER_RADIUS = 14;\nconst DOCK_BORDER_RADIUS = 20;\nconst SPRING_STIFFNESS = 550;\nconst SPRING_DAMPING = 45;\nconst SPRING_MASS = 0.7;\nconst CLOSE_DELAY = 0.08;\n\ninterface FooterContext {\n closeFeedback: () => void;\n openFeedback: () => void;\n showFeedback: boolean;\n success: boolean;\n}\n\nconst FooterContext = React.createContext({} as FooterContext);\nconst useFooter = () => React.useContext(FooterContext);\n\nexport function MorphSurface() {\n const rootRef = React.useRef(null);\n\n const feedbackRef = React.useRef(null);\n const [showFeedback, setShowFeedback] = React.useState(false);\n const [success, setSuccess] = React.useState(false);\n const shouldReduceMotion = useReducedMotion();\n\n const closeFeedback = React.useCallback(() => {\n setShowFeedback(false);\n feedbackRef.current?.blur();\n }, []);\n\n const openFeedback = React.useCallback(() => {\n setShowFeedback(true);\n setTimeout(() => {\n feedbackRef.current?.focus();\n });\n }, []);\n\n const onFeedbackSuccess = React.useCallback(() => {\n closeFeedback();\n setSuccess(true);\n setTimeout(() => {\n setSuccess(false);\n }, SUCCESS_DURATION);\n }, [closeFeedback]);\n\n useClickOutside(rootRef, closeFeedback);\n\n const context = React.useMemo(\n () => ({\n showFeedback,\n success,\n openFeedback,\n closeFeedback,\n }),\n [showFeedback, success, openFeedback, closeFeedback]\n );\n\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nfunction Dock() {\n const { showFeedback, openFeedback } = useFooter();\n const shouldReduceMotion = useReducedMotion();\n return (\n
\n
\n
\n \n {showFeedback ? (\n \n ) : (\n \n \n \n )}\n \n
\n\n \n Ask AI\n \n
\n
\n );\n}\n\nconst FEEDBACK_WIDTH = 360;\nconst FEEDBACK_HEIGHT = 200;\n\nfunction Feedback({\n ref,\n onSuccess,\n}: {\n ref: React.Ref;\n onSuccess: () => void;\n}) {\n const { closeFeedback, showFeedback } = useFooter();\n const shouldReduceMotion = useReducedMotion();\n const submitRef = React.useRef(null);\n\n function onSubmit(e: React.FormEvent) {\n e.preventDefault();\n onSuccess();\n }\n\n function onKeyDown(e: React.KeyboardEvent) {\n if (e.key === \"Escape\") {\n closeFeedback();\n }\n if (e.key === \"Enter\" && e.metaKey) {\n e.preventDefault();\n submitRef.current?.click();\n }\n }\n\n return (\n \n \n {showFeedback && (\n \n
\n

\n AI Input\n

\n \n ⌘\n Enter\n \n
\n \n \n )}\n \n \n {showFeedback && (\n \n \n \n )}\n \n \n );\n}\n\nfunction Kbd({\n children,\n className,\n}: {\n children: string;\n className?: string;\n}) {\n return (\n \n {children}\n \n );\n}\n\n// Add default export for lazy loading\nexport default MorphSurface;\n","target":"components/smoothui/ai-input/index.tsx"},{"type":"registry:ui","path":"use-click-outside.tsx","content":"\"use client\";\n\nimport { type RefObject, useEffect } from \"react\";\n\ntype EventType =\n | \"mousedown\"\n | \"mouseup\"\n | \"touchstart\"\n | \"touchend\"\n | \"focusin\"\n | \"focusout\";\n\nexport function useClickOutside(\n ref: RefObject | RefObject[],\n handler: (event: Event) => void,\n eventType: EventType = \"mousedown\"\n): void {\n useEffect(() => {\n function callback(event: Event) {\n const target = event.target as Node;\n\n // Do nothing if the target is not connected element with document\n if (!target?.isConnected) {\n return;\n }\n\n const isOutside = Array.isArray(ref)\n ? ref\n .filter((r) => Boolean(r.current))\n .every((r) => r.current && !r.current.contains(target))\n : ref.current && !ref.current.contains(target);\n\n if (isOutside) {\n handler(event);\n }\n }\n\n window.addEventListener(eventType, callback);\n\n return () => {\n window.removeEventListener(eventType, callback);\n };\n }, [eventType, handler, ref]);\n}\n","target":"components/smoothui/ai-input/use-click-outside.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"animated-avatar-group","type":"registry:ui","title":"animated-avatar-group","description":"Stack of overlapping avatars with smooth expand/collapse animation","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useState } from \"react\";\n\nexport type AvatarData = {\n src: string;\n alt: string;\n href?: string;\n};\n\nexport type AnimatedAvatarGroupProps = {\n avatars: AvatarData[];\n maxVisible?: number;\n size?: number;\n overlap?: number;\n className?: string;\n expandOnHover?: boolean;\n};\n\nconst AnimatedAvatarGroup = ({\n avatars,\n maxVisible = 4,\n size = 40,\n overlap = 0.3,\n className,\n expandOnHover = true,\n}: AnimatedAvatarGroupProps) => {\n const shouldReduceMotion = useReducedMotion();\n const [isHovered, setIsHovered] = useState(false);\n const [isHoverDevice, setIsHoverDevice] = useState(false);\n\n useEffect(() => {\n const mediaQuery = window.matchMedia(\"(hover: hover) and (pointer: fine)\");\n setIsHoverDevice(mediaQuery.matches);\n\n const handleChange = (event: MediaQueryListEvent) => {\n setIsHoverDevice(event.matches);\n };\n\n mediaQuery.addEventListener(\"change\", handleChange);\n return () => {\n mediaQuery.removeEventListener(\"change\", handleChange);\n };\n }, []);\n\n const visibleAvatars = avatars.slice(0, maxVisible);\n const hiddenCount = avatars.length - maxVisible;\n const hasHiddenAvatars = hiddenCount > 0;\n\n const overlapPx = size * overlap;\n const expanded = expandOnHover && isHoverDevice && isHovered;\n\n const springTransition = shouldReduceMotion\n ? { duration: 0 }\n : { type: \"spring\" as const, duration: 0.25, bounce: 0.1 };\n\n return (\n setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n role=\"group\"\n >\n {visibleAvatars.map((avatar, index) => {\n const marginLeft = index === 0 ? 0 : expanded ? 4 : -overlapPx;\n\n const content = (\n \n );\n\n return (\n \n \n {avatar.href ? (\n \n {content}\n \n ) : (\n content\n )}\n \n \n );\n })}\n\n {hasHiddenAvatars ? (\n \n \n {`+${hiddenCount}`}\n \n \n ) : null}\n \n );\n};\n\nexport default AnimatedAvatarGroup;\n","target":"components/smoothui/animated-avatar-group/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"animated-file-upload","type":"registry:ui","title":"animated-file-upload","description":"Animated drag-and-drop file upload component","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useCallback, useRef, useState } from \"react\";\n\nexport interface AnimatedFileUploadProps {\n accept?: string;\n className?: string;\n disabled?: boolean;\n maxSize?: number;\n multiple?: boolean;\n onFilesSelected: (files: File[]) => void;\n}\n\n/* ─────────────────────────────────────────────────────────\n * ANIMATION STORYBOARD\n *\n * 0ms drop zone visible, dashed border idle\n * drag zone scales 1.02, border goes primary, icon floats up\n * drop icon bounces back, file rows slide in staggered\n * remove file row slides out right + fades\n * layout remaining files reorder with layout animation\n * ───────────────────────────────────────────────────────── */\n\nconst SPRING = {\n type: \"spring\" as const,\n duration: 0.25,\n bounce: 0.1,\n};\n\nconst SPRING_BOUNCY = {\n type: \"spring\" as const,\n duration: 0.3,\n bounce: 0.2,\n};\n\nfunction formatFileSize(bytes: number): string {\n if (bytes < 1024) {\n return `${bytes} B`;\n }\n if (bytes < 1024 * 1024) {\n return `${(bytes / 1024).toFixed(1)} KB`;\n }\n return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n}\n\nfunction FileIcon() {\n return (\n \n \n \n );\n}\n\nfunction UploadIcon({ isDragOver }: { isDragOver: boolean }) {\n const shouldReduceMotion = useReducedMotion();\n\n return (\n \n \n \n \n \n );\n}\n\nexport default function AnimatedFileUpload({\n onFilesSelected,\n accept,\n multiple = true,\n maxSize,\n className,\n disabled = false,\n}: AnimatedFileUploadProps) {\n const shouldReduceMotion = useReducedMotion();\n const inputRef = useRef(null);\n const [isDragOver, setIsDragOver] = useState(false);\n const [files, setFiles] = useState([]);\n const [error, setError] = useState(null);\n const dragCounter = useRef(0);\n\n const validateFiles = useCallback(\n (newFiles: File[]): File[] => {\n setError(null);\n if (maxSize) {\n const oversized = newFiles.filter((f) => f.size > maxSize);\n if (oversized.length > 0) {\n setError(\n `${oversized.length} file(s) exceed the ${formatFileSize(maxSize)} limit`\n );\n return newFiles.filter((f) => f.size <= maxSize);\n }\n }\n return newFiles;\n },\n [maxSize]\n );\n\n const handleFiles = useCallback(\n (newFiles: File[]) => {\n const valid = validateFiles(newFiles);\n if (valid.length === 0) {\n return;\n }\n const updated = multiple ? [...files, ...valid] : valid.slice(0, 1);\n setFiles(updated);\n onFilesSelected(updated);\n },\n [files, multiple, onFilesSelected, validateFiles]\n );\n\n const removeFile = useCallback(\n (index: number) => {\n const updated = files.filter((_, i) => i !== index);\n setFiles(updated);\n onFilesSelected(updated);\n },\n [files, onFilesSelected]\n );\n\n const handleDragEnter = useCallback(\n (e: React.DragEvent) => {\n e.preventDefault();\n if (disabled) {\n return;\n }\n dragCounter.current += 1;\n setIsDragOver(true);\n },\n [disabled]\n );\n\n const handleDragLeave = useCallback((e: React.DragEvent) => {\n e.preventDefault();\n dragCounter.current -= 1;\n if (dragCounter.current === 0) {\n setIsDragOver(false);\n }\n }, []);\n\n const handleDragOver = useCallback(\n (e: React.DragEvent) => {\n e.preventDefault();\n if (disabled) {\n return;\n }\n },\n [disabled]\n );\n\n const handleDrop = useCallback(\n (e: React.DragEvent) => {\n e.preventDefault();\n dragCounter.current = 0;\n setIsDragOver(false);\n if (disabled) {\n return;\n }\n const droppedFiles = Array.from(e.dataTransfer.files);\n handleFiles(droppedFiles);\n },\n [disabled, handleFiles]\n );\n\n const handleClick = () => {\n if (!disabled) {\n inputRef.current?.click();\n }\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if ((e.key === \"Enter\" || e.key === \" \") && !disabled) {\n e.preventDefault();\n inputRef.current?.click();\n }\n };\n\n const handleInputChange = (e: React.ChangeEvent) => {\n const selected = e.target.files ? Array.from(e.target.files) : [];\n handleFiles(selected);\n if (inputRef.current) {\n inputRef.current.value = \"\";\n }\n };\n\n return (\n
\n \n \n\n \n\n \n \n {isDragOver ? \"Drop files here\" : \"Drag & drop or click to upload\"}\n \n \n

\n {accept ? accept.replace(/,/g, \", \") : \"Any file type\"}\n {maxSize && ` \\u2022 Max ${formatFileSize(maxSize)}`}\n

\n \n\n \n {error && (\n \n {error}\n \n )}\n \n\n {files.length > 0 && (\n
    \n \n {files.map((file, index) => (\n \n \n
    \n

    \n {file.name}\n

    \n

    \n {formatFileSize(file.size)}\n

    \n
    \n {\n e.stopPropagation();\n removeFile(index);\n }}\n type=\"button\"\n whileHover={shouldReduceMotion ? undefined : { scale: 1.1 }}\n whileTap={shouldReduceMotion ? undefined : { scale: 0.9 }}\n >\n \n \n \n \n \n ))}\n     \n
\n )}\n
\n );\n}\n","target":"components/smoothui/animated-file-upload/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"animated-input","type":"registry:ui","title":"animated-input","description":"A AnimatedInput component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"import { motion, useReducedMotion } from \"motion/react\";\nimport { useRef, useState } from \"react\";\n\nconst EASE_IN_OUT_CUBIC_X1 = 0.4;\nconst EASE_IN_OUT_CUBIC_Y1 = 0;\nconst EASE_IN_OUT_CUBIC_X2 = 0.2;\nconst EASE_IN_OUT_CUBIC_Y2 = 1;\nconst RADIX_BASE_36 = 36;\nconst RANDOM_ID_START_INDEX = 2;\nconst RANDOM_ID_LENGTH = 9;\n\nconst LABEL_TRANSITION = {\n duration: 0.28,\n ease: [\n EASE_IN_OUT_CUBIC_X1,\n EASE_IN_OUT_CUBIC_Y1,\n EASE_IN_OUT_CUBIC_X2,\n EASE_IN_OUT_CUBIC_Y2,\n ] as [number, number, number, number], // cubic-bezier tuple\n};\n\nexport interface AnimatedInputProps {\n className?: string;\n defaultValue?: string;\n disabled?: boolean;\n icon?: React.ReactNode;\n inputClassName?: string;\n label: string;\n labelClassName?: string;\n onChange?: (value: string) => void;\n placeholder?: string;\n value?: string;\n}\n\nexport default function AnimatedInput({\n value,\n defaultValue = \"\",\n onChange,\n label,\n placeholder = \"\",\n disabled = false,\n className = \"\",\n inputClassName = \"\",\n labelClassName = \"\",\n icon,\n}: AnimatedInputProps) {\n const [internalValue, setInternalValue] = useState(defaultValue);\n const isControlled = value !== undefined;\n const val = isControlled ? value : internalValue;\n const inputRef = useRef(null);\n const [isFocused, setIsFocused] = useState(false);\n const isFloating = !!val || isFocused;\n const shouldReduceMotion = useReducedMotion();\n const inputId = `animated-input-${Math.random().toString(RADIX_BASE_36).substring(RANDOM_ID_START_INDEX, RANDOM_ID_LENGTH)}`;\n\n const getLabelAnimation = () => {\n if (shouldReduceMotion) {\n return {};\n }\n if (isFloating) {\n return {\n y: -24,\n scale: 0.85,\n color: \"var(--color-brand)\",\n borderColor: \"var(--color-brand)\",\n };\n }\n return { y: 0, scale: 1, color: \"#6b7280\" };\n };\n\n const getLabelStyle = () => {\n if (!shouldReduceMotion) {\n return {};\n }\n if (isFloating) {\n return {\n transform: \"translateY(-24px) scale(0.85)\",\n color: \"var(--color-brand)\",\n borderColor: \"var(--color-brand)\",\n };\n }\n return {\n transform: \"translateY(0) scale(1)\",\n color: \"#6b7280\",\n };\n };\n\n return (\n
\n {icon && (\n \n {icon}\n \n )}\n setIsFocused(false)}\n onChange={(e) => {\n if (!isControlled) {\n setInternalValue(e.target.value);\n }\n onChange?.(e.target.value);\n }}\n onFocus={() => setIsFocused(true)}\n placeholder={isFloating ? placeholder : \"\"}\n ref={inputRef}\n type=\"text\"\n value={val}\n />\n \n {label}\n \n
\n );\n}\n","target":"components/smoothui/animated-input/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"animated-o-t-p-input","type":"registry:ui","title":"animated-o-t-p-input","description":"A AnimatedOTPInput component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion","lucide-react","input-otp"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { OTPInput, OTPInputContext } from \"input-otp\";\nimport { MinusIcon } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { type ReactNode, useContext, useEffect, useState } from \"react\";\n\n// Animation constants\nconst EASE_OUT_QUINT_X1 = 0.22;\nconst EASE_OUT_QUINT_Y1 = 1;\nconst EASE_OUT_QUINT_X2 = 0.36;\nconst EASE_OUT_QUINT_Y2 = 1;\nconst EASE_OUT_QUINT = [\n EASE_OUT_QUINT_X1,\n EASE_OUT_QUINT_Y1,\n EASE_OUT_QUINT_X2,\n EASE_OUT_QUINT_Y2,\n] as const;\nconst ANIMATION_DURATION_SHORT = 0.1;\nconst ANIMATION_DURATION_MEDIUM = 0.15;\nconst ANIMATION_DURATION_STANDARD = 0.2;\nconst ANIMATION_DURATION_LONG = 0.3;\nconst STAGGER_DELAY = 0.05;\nconst SCALE_FILLED = 1.05;\nconst SCALE_HOVER = 1.02;\nconst SCALE_TAP = 0.98;\nconst INITIAL_SCALE = 0.8;\nconst INITIAL_Y = 10;\nconst SEPARATOR_DELAY = 0.15;\n\nexport interface AnimatedInputOTPProps {\n \"aria-describedby\"?: string;\n \"aria-label\"?: string;\n className?: string;\n containerClassName?: string;\n maxLength?: number;\n onChange?: (value: string) => void;\n onComplete?: (value: string) => void;\n value?: string;\n}\n\nfunction AnimatedInputOTP({\n className,\n containerClassName,\n value,\n onChange,\n onComplete,\n maxLength = 6,\n children,\n ...props\n}: AnimatedInputOTPProps & { children: ReactNode }) {\n const handleChange = (newValue: string) => {\n // Only allow numeric characters\n const numericValue = newValue.replace(/[^0-9]/g, \"\");\n onChange?.(numericValue);\n };\n\n return (\n \n {children}\n \n );\n}\n\ninterface AnimatedInputOTPGroupProps {\n children?: ReactNode;\n className?: string;\n}\n\nfunction AnimatedInputOTPGroup({\n className,\n children,\n}: AnimatedInputOTPGroupProps) {\n const shouldReduceMotion = useReducedMotion();\n return (\n \n {children}\n \n );\n}\n\ninterface AnimatedInputOTPSlotProps {\n className?: string;\n index: number;\n}\n\nfunction AnimatedInputOTPSlot({ index, className }: AnimatedInputOTPSlotProps) {\n const inputOTPContext = useContext(OTPInputContext);\n const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};\n const [isFilled, setIsFilled] = useState(false);\n const shouldReduceMotion = useReducedMotion();\n\n useEffect(() => {\n if (char && !isFilled) {\n setIsFilled(true);\n } else if (!char && isFilled) {\n setIsFilled(false);\n }\n }, [char, isFilled]);\n\n return (\n \n \n {char && (\n \n {char}\n \n )}\n \n\n {hasFakeCaret && !shouldReduceMotion && (\n \n \n \n )}\n \n );\n}\n\nfunction AnimatedInputOTPSeparator() {\n const shouldReduceMotion = useReducedMotion();\n return (\n \n \n \n );\n}\n\n// Main component that combines everything\nexport function AnimatedOTPInput({\n maxLength = 6,\n className,\n value,\n onChange,\n onComplete,\n ...props\n}: AnimatedInputOTPProps) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nexport {\n AnimatedInputOTP,\n AnimatedInputOTPGroup,\n AnimatedInputOTPSeparator,\n AnimatedInputOTPSlot,\n};\n\nexport default AnimatedOTPInput;\n","target":"components/smoothui/animated-o-t-p-input/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"animated-progress-bar","type":"registry:ui","title":"animated-progress-bar","description":"A AnimatedProgressBar component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"import { motion, useReducedMotion } from \"motion/react\";\n\nexport interface AnimatedProgressBarProps {\n barClassName?: string;\n className?: string;\n color?: string;\n label?: string;\n labelClassName?: string;\n value: number; // 0-100\n /**\n * To replay the animation, change the React 'key' prop on this component from the parent.\n */\n}\n\nconst MIN_PROGRESS_VALUE = 0;\nconst MAX_PROGRESS_VALUE = 100;\n\nconst SPRING = {\n type: \"spring\" as const,\n damping: 10,\n mass: 0.75,\n stiffness: 100,\n duration: 0.25,\n};\n\nexport default function AnimatedProgressBar({\n value,\n label,\n color = \"#6366f1\",\n className = \"\",\n barClassName = \"\",\n labelClassName = \"\",\n}: AnimatedProgressBarProps) {\n const shouldReduceMotion = useReducedMotion();\n\n return (\n
\n {label && (\n
\n {label}\n
\n )}\n
\n \n
\n
\n );\n}\n","target":"components/smoothui/animated-progress-bar/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"animated-stepper","type":"registry:ui","title":"animated-stepper","description":"Animated stepper/wizard component with step transitions","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { type ReactNode, useCallback, useId, useState } from \"react\";\n\nexport interface StepItem {\n content?: ReactNode;\n description?: string;\n icon?: ReactNode;\n label: string;\n}\n\nexport interface AnimatedStepperProps {\n allowClickNavigation?: boolean;\n className?: string;\n currentStep?: number;\n defaultStep?: number;\n onStepChange?: (step: number) => void;\n steps: StepItem[];\n variant?: \"horizontal\" | \"vertical\";\n}\n\n/* ─────────────────────────────────────────────────────────\n * ANIMATION STORYBOARD\n *\n * 0ms stepper enters viewport\n * 100ms step circles stagger in (50ms each)\n * click active ring pulse + circle scale bounce\n * step progress line fills with spring\n * done checkmark draws with pathLength animation\n * slide content slides directionally with crossfade\n * ───────────────────────────────────────────────────────── */\n\nconst SPRING = {\n type: \"spring\" as const,\n duration: 0.25,\n bounce: 0.1,\n};\n\nconst SPRING_BOUNCY = {\n type: \"spring\" as const,\n duration: 0.3,\n bounce: 0.2,\n};\n\nfunction CheckIcon() {\n return (\n \n \n \n );\n}\n\nexport default function AnimatedStepper({\n steps,\n currentStep: controlledStep,\n defaultStep = 0,\n onStepChange,\n variant = \"horizontal\",\n allowClickNavigation = false,\n className,\n}: AnimatedStepperProps) {\n const shouldReduceMotion = useReducedMotion();\n const id = useId();\n\n const [internalStep, setInternalStep] = useState(defaultStep);\n const [direction, setDirection] = useState(1);\n\n const isControlled = controlledStep !== undefined;\n const activeStep = isControlled ? controlledStep : internalStep;\n\n const handleStepChange = useCallback(\n (step: number) => {\n if (step < 0 || step >= steps.length) {\n return;\n }\n setDirection(step > activeStep ? 1 : -1);\n if (!isControlled) {\n setInternalStep(step);\n }\n onStepChange?.(step);\n },\n [isControlled, onStepChange, activeStep, steps.length]\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (!allowClickNavigation) {\n return;\n }\n const isHoriz = variant === \"horizontal\";\n const nextKey = isHoriz ? \"ArrowRight\" : \"ArrowDown\";\n const prevKey = isHoriz ? \"ArrowLeft\" : \"ArrowUp\";\n\n if (event.key === nextKey) {\n event.preventDefault();\n handleStepChange(Math.min(activeStep + 1, steps.length - 1));\n } else if (event.key === prevKey) {\n event.preventDefault();\n handleStepChange(Math.max(activeStep - 1, 0));\n }\n },\n [allowClickNavigation, variant, activeStep, steps.length, handleStepChange]\n );\n\n const progress = steps.length > 1 ? activeStep / (steps.length - 1) : 0;\n const isHorizontal = variant === \"horizontal\";\n\n return (\n \n \n {steps.map((step, index) => {\n const isActive = index === activeStep;\n const isCompleted = index < activeStep;\n\n return (\n \n allowClickNavigation && handleStepChange(index)}\n onKeyDown={handleKeyDown}\n role=\"tab\"\n tabIndex={isActive ? 0 : -1}\n transition={shouldReduceMotion ? { duration: 0 } : SPRING}\n type=\"button\"\n whileTap={\n allowClickNavigation && !shouldReduceMotion\n ? { scale: 0.9 }\n : undefined\n }\n >\n {/* Active ring pulse */}\n {isActive && !shouldReduceMotion && (\n \n )}\n\n \n {isCompleted ? (\n \n \n \n ) : step.icon ? (\n \n {step.icon}\n \n ) : (\n \n {index + 1}\n \n )}\n \n \n\n {isHorizontal && (\n \n )}\n\n {!isHorizontal && (\n
\n \n {step.label}\n

\n {step.description && (\n

\n {step.description}\n

\n )}\n
\n )}\n\n {isHorizontal && index < steps.length - 1 && (\n
\n \n
\n )}\n \n );\n })}\n\n {!isHorizontal && (\n
\n \n
\n )}\n \n\n
\n \n \n {steps[activeStep]?.content}\n \n \n
\n \n );\n}\n","target":"components/smoothui/animated-stepper/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"animated-tabs","type":"registry:ui","title":"animated-tabs","description":"Animated tabs component with sliding indicator","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { type ReactNode, useCallback, useId, useState } from \"react\";\n\nexport interface AnimatedTabsProps {\n activeTab?: string;\n className?: string;\n defaultTab?: string;\n layoutId?: string;\n onChange?: (tabId: string) => void;\n tabs: { id: string; label: string; icon?: ReactNode }[];\n variant?: \"underline\" | \"pill\" | \"segment\";\n}\n\nconst SPRING = {\n type: \"spring\" as const,\n duration: 0.25,\n bounce: 0.05,\n};\n\nexport default function AnimatedTabs({\n tabs,\n activeTab: controlledActiveTab,\n defaultTab,\n onChange,\n variant = \"underline\",\n layoutId: customLayoutId,\n className,\n}: AnimatedTabsProps) {\n const shouldReduceMotion = useReducedMotion();\n const generatedId = useId();\n const layoutId = customLayoutId ?? `animated-tabs-${generatedId}`;\n\n const [internalActiveTab, setInternalActiveTab] = useState(\n defaultTab ?? tabs[0]?.id ?? \"\"\n );\n\n const isControlled = controlledActiveTab !== undefined;\n const activeTab = isControlled ? controlledActiveTab : internalActiveTab;\n\n const handleTabChange = useCallback(\n (tabId: string) => {\n if (!isControlled) {\n setInternalActiveTab(tabId);\n }\n onChange?.(tabId);\n },\n [isControlled, onChange]\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent, currentIndex: number) => {\n let newIndex = currentIndex;\n\n if (event.key === \"ArrowRight\") {\n event.preventDefault();\n newIndex = (currentIndex + 1) % tabs.length;\n } else if (event.key === \"ArrowLeft\") {\n event.preventDefault();\n newIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n } else if (event.key === \"Home\") {\n event.preventDefault();\n newIndex = 0;\n } else if (event.key === \"End\") {\n event.preventDefault();\n newIndex = tabs.length - 1;\n } else {\n return;\n }\n\n const newTab = tabs[newIndex];\n if (newTab) {\n handleTabChange(newTab.id);\n const tabElement = document.getElementById(\n `${layoutId}-tab-${newTab.id}`\n );\n tabElement?.focus();\n }\n },\n [tabs, handleTabChange, layoutId]\n );\n\n const baseContainerStyles = cn(\n \"relative inline-flex\",\n variant === \"underline\" && \"gap-1 border-border border-b\",\n variant === \"pill\" && \"gap-1 rounded-full bg-muted p-1\",\n variant === \"segment\" && \"gap-0 rounded-lg bg-muted p-1\"\n );\n\n const getTabStyles = (isActive: boolean) =>\n cn(\n \"relative z-10 flex items-center justify-center gap-2 px-4 py-2 font-medium text-sm transition-colors\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n variant === \"underline\" && [\n \"rounded-t-md\",\n isActive\n ? \"text-foreground\"\n : \"text-muted-foreground hover:text-foreground\",\n ],\n variant === \"pill\" && [\n \"rounded-full\",\n isActive\n ? \"text-foreground\"\n : \"text-muted-foreground hover:text-foreground\",\n ],\n variant === \"segment\" && [\n \"flex-1 rounded-md\",\n isActive\n ? \"text-foreground\"\n : \"text-muted-foreground hover:text-foreground\",\n ]\n );\n\n const getIndicatorStyles = () =>\n cn(\n \"absolute\",\n variant === \"underline\" && \"right-0 -bottom-px left-0 h-0.5 bg-brand\",\n variant === \"pill\" &&\n \"inset-0 rounded-full border border-border bg-background shadow-sm\",\n variant === \"segment\" &&\n \"inset-0 rounded-md border border-border bg-background shadow-sm\"\n );\n\n return (\n \n {tabs.map((tab, index) => {\n const isActive = activeTab === tab.id;\n\n return (\n handleTabChange(tab.id)}\n onKeyDown={(e) => handleKeyDown(e, index)}\n role=\"tab\"\n tabIndex={isActive ? 0 : -1}\n type=\"button\"\n >\n {isActive && (\n \n )}\n {tab.icon && {tab.icon}}\n {tab.label}\n \n );\n })}\n \n );\n}\n","target":"components/smoothui/animated-tabs/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"animated-tags","type":"registry:ui","title":"animated-tags","description":"A AnimatedTags component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion","lucide-react"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { CircleX, Plus } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useState } from \"react\";\n\nexport interface AnimatedTagsProps {\n className?: string;\n initialTags?: string[];\n onChange?: (selected: string[]) => void;\n selectedTags?: string[];\n}\n\nexport default function AnimatedTags({\n initialTags = [\"react\", \"tailwindcss\", \"javascript\"],\n selectedTags: controlledSelectedTags,\n onChange,\n className = \"\",\n}: AnimatedTagsProps) {\n const [internalSelected, setInternalSelected] = useState([]);\n const shouldReduceMotion = useReducedMotion();\n\n const selectedTag = controlledSelectedTags ?? internalSelected;\n const tags = initialTags.filter((tag) => !selectedTag.includes(tag));\n\n const handleTagClick = (tag: string) => {\n const newSelected = [...selectedTag, tag];\n if (onChange) {\n onChange(newSelected);\n } else {\n setInternalSelected(newSelected);\n }\n };\n const handleDeleteTag = (tag: string) => {\n const newSelectedTag = selectedTag.filter((selected) => selected !== tag);\n if (onChange) {\n onChange(newSelectedTag);\n } else {\n setInternalSelected(newSelectedTag);\n }\n };\n return (\n
\n
\n

Selected Tags

\n \n
\n {selectedTag?.map((tag) => (\n handleDeleteTag(tag)}\n transition={\n shouldReduceMotion\n ? { duration: 0 }\n : { duration: 0.25, bounce: 0, type: \"spring\" as const }\n }\n >\n {tag}{\" \"}\n \n \n ))}\n
\n \n
\n \n
\n {tags.map((tag) => (\n handleTagClick(tag)}\n transition={\n shouldReduceMotion\n ? { duration: 0 }\n : { duration: 0.25, bounce: 0, type: \"spring\" as const }\n }\n >\n {tag}{\" \"}\n \n \n ))}\n
\n \n
\n );\n}\n","target":"components/smoothui/animated-tags/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"animated-toggle","type":"registry:ui","title":"animated-toggle","description":"Animated toggle switch with morph and icon variants","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport {\n type KeyboardEvent,\n type ReactNode,\n useCallback,\n useState,\n} from \"react\";\n\nexport interface AnimatedToggleProps {\n /** Controlled checked state */\n checked?: boolean;\n /** Additional CSS classes */\n className?: string;\n /** Default checked state for uncontrolled mode */\n defaultChecked?: boolean;\n /** Whether the toggle is disabled */\n disabled?: boolean;\n /** Icons for on/off states (only used with icon variant) */\n icons?: { on: ReactNode; off: ReactNode };\n /** Accessible label for the toggle */\n label?: string;\n /** Callback when checked state changes */\n onChange?: (checked: boolean) => void;\n /** Size of the toggle */\n size?: \"sm\" | \"md\" | \"lg\";\n /** Visual variant of the toggle */\n variant?: \"default\" | \"morph\" | \"icon\";\n}\n\nconst SPRING = {\n type: \"spring\" as const,\n duration: 0.25,\n bounce: 0.1,\n};\n\nconst SIZES = {\n sm: {\n track: \"w-9 h-5\",\n thumb: \"size-4\",\n thumbTranslate: 16,\n icon: \"size-2.5\",\n },\n md: {\n track: \"w-11 h-6\",\n thumb: \"size-5\",\n thumbTranslate: 20,\n icon: \"size-3\",\n },\n lg: {\n track: \"w-[52px] h-7\",\n thumb: \"size-6\",\n thumbTranslate: 24,\n icon: \"size-3.5\",\n },\n};\n\nconst AnimatedToggle = ({\n checked: controlledChecked,\n defaultChecked = false,\n onChange,\n variant = \"default\",\n icons,\n size = \"md\",\n disabled = false,\n label,\n className,\n}: AnimatedToggleProps) => {\n const shouldReduceMotion = useReducedMotion();\n\n const [internalChecked, setInternalChecked] = useState(defaultChecked);\n\n const isControlled = controlledChecked !== undefined;\n const checked = isControlled ? controlledChecked : internalChecked;\n\n const handleToggle = useCallback(() => {\n if (disabled) {\n return;\n }\n\n const newValue = !checked;\n if (!isControlled) {\n setInternalChecked(newValue);\n }\n onChange?.(newValue);\n }, [checked, disabled, isControlled, onChange]);\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === \" \" || event.key === \"Enter\") {\n event.preventDefault();\n handleToggle();\n }\n },\n [handleToggle]\n );\n\n const sizeConfig = SIZES[size];\n\n const getThumbBorderRadius = () => {\n if (variant !== \"morph\" || shouldReduceMotion) {\n return 9999;\n }\n return checked ? 9999 : 6;\n };\n\n const getThumbTransform = () => {\n const translateX = checked ? sizeConfig.thumbTranslate : 0;\n return translateX;\n };\n\n return (\n \n \n {variant === \"icon\" && icons && (\n \n \n {checked ? icons.on : icons.off}\n \n \n )}\n \n \n );\n};\n\nexport default AnimatedToggle;\n","target":"components/smoothui/animated-toggle/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"animated-tooltip","type":"registry:ui","title":"animated-tooltip","description":"Spring-animated tooltip with multiple placement options","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport type { ReactNode } from \"react\";\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\";\n\nexport type AnimatedTooltipPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface AnimatedTooltipProps {\n /** The trigger element the tooltip is anchored to */\n children: ReactNode;\n /** Additional CSS class names for the tooltip container */\n className?: string;\n /** Content displayed inside the tooltip */\n content: ReactNode;\n /** Delay in milliseconds before the tooltip appears */\n delay?: number;\n /** Placement of the tooltip relative to the trigger */\n placement?: AnimatedTooltipPlacement;\n}\n\nconst SPRING = {\n type: \"spring\" as const,\n duration: 0.25,\n bounce: 0.1,\n};\n\nconst placementStyles: Record = {\n top: \"bottom-full left-1/2 -translate-x-1/2 mb-2\",\n bottom: \"top-full left-1/2 -translate-x-1/2 mt-2\",\n left: \"right-full top-1/2 -translate-y-1/2 mr-2\",\n right: \"left-full top-1/2 -translate-y-1/2 ml-2\",\n};\n\nconst arrowStyles: Record = {\n top: \"top-full left-1/2 -translate-x-1/2 border-t-foreground border-x-transparent border-b-transparent\",\n bottom:\n \"bottom-full left-1/2 -translate-x-1/2 border-b-foreground border-x-transparent border-t-transparent\",\n left: \"left-full top-1/2 -translate-y-1/2 border-l-foreground border-y-transparent border-r-transparent\",\n right:\n \"right-full top-1/2 -translate-y-1/2 border-r-foreground border-y-transparent border-l-transparent\",\n};\n\nconst arrowBorderSize: Record = {\n top: \"border-4\",\n bottom: \"border-4\",\n left: \"border-4\",\n right: \"border-4\",\n};\n\nconst getInitialTransform = (\n placement: AnimatedTooltipPlacement\n): { opacity: number; scale: number; x: number; y: number } => {\n const base = { opacity: 0, scale: 0.95, x: 0, y: 0 };\n switch (placement) {\n case \"top\":\n return { ...base, y: 4 };\n case \"bottom\":\n return { ...base, y: -4 };\n case \"left\":\n return { ...base, x: 4 };\n case \"right\":\n return { ...base, x: -4 };\n }\n};\n\nconst AnimatedTooltip = ({\n content,\n placement = \"top\",\n delay = 0,\n children,\n className,\n}: AnimatedTooltipProps) => {\n const shouldReduceMotion = useReducedMotion();\n const [isVisible, setIsVisible] = useState(false);\n const [isHoverDevice, setIsHoverDevice] = useState(false);\n const tooltipId = useId();\n const delayTimerRef = useRef | null>(null);\n\n useEffect(() => {\n const mediaQuery = window.matchMedia(\"(hover: hover) and (pointer: fine)\");\n setIsHoverDevice(mediaQuery.matches);\n\n const handleChange = (e: MediaQueryListEvent) => {\n setIsHoverDevice(e.matches);\n };\n\n mediaQuery.addEventListener(\"change\", handleChange);\n return () => mediaQuery.removeEventListener(\"change\", handleChange);\n }, []);\n\n const show = useCallback(() => {\n if (delay > 0) {\n delayTimerRef.current = setTimeout(() => {\n setIsVisible(true);\n }, delay);\n } else {\n setIsVisible(true);\n }\n }, [delay]);\n\n const hide = useCallback(() => {\n if (delayTimerRef.current !== null) {\n clearTimeout(delayTimerRef.current);\n delayTimerRef.current = null;\n }\n setIsVisible(false);\n }, []);\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === \"Escape\") {\n hide();\n }\n },\n [hide]\n );\n\n const initialTransform = getInitialTransform(placement);\n\n return (\n \n \n {children}\n \n\n \n {isVisible && (\n \n {content}\n \n \n )}\n \n \n );\n};\n\nexport default AnimatedTooltip;\n","target":"components/smoothui/animated-tooltip/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"app-download-stack","type":"registry:ui","title":"app-download-stack","description":"A AppDownloadStack component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion","lucide-react"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { ChevronDown } from \"lucide-react\";\nimport {\n AnimatePresence,\n motion,\n useAnimation,\n useReducedMotion,\n} from \"motion/react\";\nimport { useCallback, useMemo, useState } from \"react\";\n\nexport interface AppData {\n icon: string;\n id: number;\n name: string;\n}\n\nexport interface AppDownloadStackProps {\n apps?: AppData[];\n className?: string;\n isExpanded?: boolean;\n onChange?: (selected: number[]) => void;\n onDownload?: (selected: number[]) => void;\n onExpandChange?: (expanded: boolean) => void;\n selectedApps?: number[];\n title?: string;\n}\n\nconst DOWNLOAD_DURATION_MS = 3000;\nconst RESET_DELAY_MS = 1000;\nconst ROTATION_MULTIPLIER = 8;\nconst TRANSLATION_MULTIPLIER = 3;\nconst BASE_Z_INDEX = 40;\nconst Z_INDEX_STEP = 10;\nconst HOVER_X_MULTIPLIER = 10;\nconst HOVER_Y_MULTIPLIER = 10;\nconst FLOAT_AMPLITUDE = 5;\nconst FLOAT_DURATION = 2;\nconst FLOAT_DELAY_MULTIPLIER = 0.2;\nconst STAGGER_DELAY_MULTIPLIER = 0.1;\nconst TRANSITION_DURATION = 0.3;\nconst CHECKMARK_TRANSITION_DURATION = 0.3;\n\nconst defaultApps: AppData[] = [\n {\n id: 1,\n name: \"GitHub\",\n icon: \"https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/9c9721583ecba33e59ebcebdca2248fd_Mmr12FRh5V.png\",\n },\n {\n id: 2,\n name: \"Canary\",\n icon: \"https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/b47f43e02f04563447fa90d4ff6c8943_9KzW5GTggQ.png\",\n },\n {\n id: 3,\n name: \"Figma\",\n icon: \"https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/f0b9cdefa67b57eeb080278c2f6984cc_sCqUJBg6Qq.png\",\n },\n {\n id: 4,\n name: \"Arc\",\n icon: \"https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/178c7b02003c933e6b5afe98bbee595b_low_res_Arc_Browser.png\",\n },\n];\n\nexport default function AppDownloadStack({\n apps = defaultApps,\n title = \"Starter Mac\",\n selectedApps: controlledSelected,\n onChange,\n onDownload,\n isExpanded: controlledExpanded,\n onExpandChange,\n className = \"\",\n}: AppDownloadStackProps) {\n const [internalExpanded, setInternalExpanded] = useState(false);\n const [internalSelected, setInternalSelected] = useState([]);\n const [isDownloading, setIsDownloading] = useState(false);\n const [downloadComplete, setDownloadComplete] = useState(false);\n const shineControls = useAnimation();\n const shouldReduceMotion = useReducedMotion();\n\n const isExpanded =\n controlledExpanded === undefined ? internalExpanded : controlledExpanded;\n const selected = controlledSelected ?? internalSelected;\n\n const setExpanded = (val: boolean) => {\n if (onExpandChange) {\n onExpandChange(val);\n } else {\n setInternalExpanded(val);\n }\n };\n\n const toggleApp = useCallback(\n (id: number) => {\n const newSelected = selected.includes(id)\n ? selected.filter((appId) => appId !== id)\n : [...selected, id];\n if (onChange) {\n onChange(newSelected);\n } else {\n setInternalSelected(newSelected);\n }\n },\n [selected, onChange]\n );\n\n const handleDownload = useCallback(() => {\n setIsDownloading(true);\n if (onDownload) {\n onDownload(selected);\n }\n if (!shouldReduceMotion) {\n shineControls.start({\n x: [\"0%\", \"100%\"],\n transition: {\n duration: 1,\n repeat: Number.POSITIVE_INFINITY,\n ease: \"linear\",\n },\n });\n }\n setTimeout(() => {\n shineControls.stop();\n setDownloadComplete(true);\n setTimeout(() => {\n if (onExpandChange) {\n onExpandChange(false);\n } else {\n setInternalExpanded(false);\n }\n if (onChange) {\n onChange([]);\n } else {\n setInternalSelected([]);\n }\n setIsDownloading(false);\n setDownloadComplete(false);\n }, RESET_DELAY_MS);\n }, DOWNLOAD_DURATION_MS);\n }, [\n shineControls,\n selected,\n onDownload,\n onChange,\n onExpandChange,\n shouldReduceMotion,\n ]);\n\n const stackVariants = useMemo(\n // biome-ignore lint/suspicious/noExplicitAny: Variants type requires flexible return\n (): Record any> => ({\n initial: (i: number) =>\n shouldReduceMotion\n ? {\n rotate: 0,\n x: 0,\n y: 0,\n zIndex: BASE_Z_INDEX - i * Z_INDEX_STEP,\n }\n : {\n rotate:\n i % 2 === 0\n ? -ROTATION_MULTIPLIER * (i + 1)\n : ROTATION_MULTIPLIER * (i + 1),\n x:\n i % 2 === 0\n ? -TRANSLATION_MULTIPLIER * (i + 1)\n : TRANSLATION_MULTIPLIER * (i + 1),\n y: 0,\n zIndex: BASE_Z_INDEX - i * Z_INDEX_STEP,\n },\n hover: (i: number) =>\n shouldReduceMotion\n ? {\n rotate: 0,\n x: 0,\n y: 0,\n zIndex: BASE_Z_INDEX - i * Z_INDEX_STEP,\n }\n : {\n rotate: 0,\n x: i * HOVER_X_MULTIPLIER,\n y: -i * HOVER_Y_MULTIPLIER,\n zIndex: BASE_Z_INDEX - i * Z_INDEX_STEP,\n },\n float: (i: number) =>\n shouldReduceMotion\n ? { y: 0 }\n : {\n y: [0, -FLOAT_AMPLITUDE, 0],\n transition: {\n y: {\n repeat: Number.POSITIVE_INFINITY,\n duration: FLOAT_DURATION,\n ease: [0.645, 0.045, 0.355, 1],\n delay: i * FLOAT_DELAY_MULTIPLIER,\n },\n },\n },\n }),\n [shouldReduceMotion]\n );\n\n return (\n \n \n \n {!(isExpanded || isDownloading) && (\n setExpanded(true)}\n whileHover={shouldReduceMotion ? {} : \"hover\"}\n >\n {apps.map((app, index) => (\n \n ))}\n \n )}\n\n {isExpanded && !isDownloading && (\n \n setExpanded(false)}\n type=\"button\"\n >\n

{title}

\n
\n

\n {selected.length}\n

\n \n
\n \n \n {apps.map((app, index) => (\n \n \n {selected.includes(app.id) && (\n \n Checkmark\n \n \n )}\n \n toggleApp(app.id)}\n type=\"button\"\n >\n \n \n {app.name}\n \n \n \n ))}\n \n \n Download Selected\n \n \n )}\n\n {isDownloading && !downloadComplete && (\n \n
\n \n {apps.map((app, index) => (\n \n ))}\n
\n \n Downloading...\n \n \n )}\n\n {downloadComplete && (\n \n \n Download Complete!\n \n \n )}\n \n \n \n );\n}\n","target":"components/smoothui/app-download-stack/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"apple-invites","type":"registry:ui","title":"apple-invites","description":"A AppleInvites component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["@smoothui/data","motion","lucide-react","popmotion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { Crown } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { wrap } from \"popmotion\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nexport interface ResponsiveSize {\n \"2xl\"?: number | string;\n base?: number | string;\n lg?: number | string;\n md?: number | string;\n sm?: number | string;\n xl?: number | string;\n}\n\nconst breakpoints = {\n sm: 640,\n md: 768,\n lg: 1024,\n xl: 1280,\n \"2xl\": 1536,\n} as const;\n\nconst DEFAULT_CARD_WIDTH = 240;\nconst DEFAULT_ASPECT_RATIO = 1.5625; // 5:8 ratio (500/320)\n\n// Base sizes for responsive scaling (based on DEFAULT_CARD_WIDTH = 240)\nconst BASE_BADGE_FONT_SIZE = 12;\nconst BASE_BADGE_PADDING_X = 12;\nconst BASE_BADGE_PADDING_Y = 3;\nconst BASE_BADGE_ICON_SIZE = 14;\nconst BASE_TITLE_FONT_SIZE = 18;\nconst BASE_SUBTITLE_FONT_SIZE = 12;\nconst BASE_LOCATION_FONT_SIZE = 12;\nconst BASE_AVATAR_SIZE = 24;\nconst BASE_CONTENT_PADDING = 24;\nconst BASE_BADGE_TOP = 16;\nconst BASE_BADGE_LEFT = 16;\nconst BASE_BADGE_GAP = 8;\nconst BASE_AVATAR_GAP = 8;\nconst BASE_AVATAR_MARGIN_BOTTOM = 8;\nconst BASE_TITLE_MARGIN_BOTTOM = 4;\nconst BASE_LINE_HEIGHT = 1.4;\nconst BADGE_PADDING_Y_SCALE_FACTOR = 0.7; // Reduce vertical padding scaling for more compact badges\n\n// Minimum sizes to ensure readability\nconst MIN_BADGE_FONT_SIZE = 10;\nconst MIN_BADGE_PADDING_X = 8;\nconst MIN_BADGE_PADDING_Y = 1;\nconst MIN_BADGE_ICON_SIZE = 12;\nconst MIN_TITLE_FONT_SIZE = 14;\nconst MIN_SUBTITLE_FONT_SIZE = 10;\nconst MIN_LOCATION_FONT_SIZE = 10;\nconst MIN_AVATAR_SIZE = 20;\nconst MIN_CONTENT_PADDING = 12;\nconst MIN_BADGE_TOP = 8;\nconst MIN_BADGE_LEFT = 8;\nconst MIN_BADGE_GAP = 4;\nconst MIN_AVATAR_GAP = 4;\nconst MIN_AVATAR_MARGIN_BOTTOM = 4;\nconst MIN_TITLE_MARGIN_BOTTOM = 2;\n\nfunction formatSize(size: number | string): string {\n return typeof size === \"number\" ? `${size}px` : size;\n}\n\nfunction getInitialSize(\n size: number | string | ResponsiveSize | undefined,\n defaultValue: number | string\n): string {\n if (!size) {\n return formatSize(defaultValue);\n }\n if (typeof size === \"number\" || typeof size === \"string\") {\n return formatSize(size);\n }\n // Responsive object - start with base or first available value\n if (size.base !== undefined) {\n return formatSize(size.base);\n }\n return formatSize(defaultValue);\n}\n\nfunction getSizeForBreakpoint(\n size: ResponsiveSize,\n width: number\n): number | string | undefined {\n if (width >= breakpoints[\"2xl\"]) {\n return size[\"2xl\"] ?? size.xl ?? size.lg ?? size.md ?? size.sm ?? size.base;\n }\n if (width >= breakpoints.xl) {\n return size.xl ?? size.lg ?? size.md ?? size.sm ?? size.base;\n }\n if (width >= breakpoints.lg) {\n return size.lg ?? size.md ?? size.sm ?? size.base;\n }\n if (width >= breakpoints.md) {\n return size.md ?? size.sm ?? size.base;\n }\n if (width >= breakpoints.sm) {\n return size.sm ?? size.base;\n }\n return size.base;\n}\n\nfunction useResponsiveSize(\n size: number | string | ResponsiveSize | undefined,\n defaultValue: number | string\n): string {\n const [currentSize, setCurrentSize] = useState(() =>\n getInitialSize(size, defaultValue)\n );\n\n useEffect(() => {\n if (!size || typeof size === \"number\" || typeof size === \"string\") {\n return;\n }\n\n const updateSize = () => {\n const width = window.innerWidth;\n const selectedSize = getSizeForBreakpoint(size, width);\n\n if (selectedSize !== undefined) {\n const newSize = formatSize(selectedSize);\n setCurrentSize(newSize);\n }\n };\n\n updateSize();\n window.addEventListener(\"resize\", updateSize);\n return () => window.removeEventListener(\"resize\", updateSize);\n }, [size]);\n\n return currentSize;\n}\n\nfunction parseSize(size: string): number {\n const num = Number.parseFloat(size);\n return Number.isNaN(num) ? 0 : num;\n}\n\nfunction calculateHeightFromWidth(width: string, aspectRatio: number): string {\n const widthNum = parseSize(width);\n if (widthNum === 0) {\n return width;\n }\n const heightNum = widthNum * aspectRatio;\n return `${heightNum}px`;\n}\n\nexport interface Participant {\n avatar: string;\n}\n\nexport interface Event {\n backgroundClassName?: string;\n badge?: string;\n id: number;\n image?: string;\n location: string;\n participants?: Participant[];\n subtitle?: string;\n title?: string;\n}\n\nexport interface AppleInvitesProps {\n activeIndex?: number;\n aspectRatio?: number;\n cardClassName?: string;\n cardHeight?: number | string | ResponsiveSize;\n cardWidth?: number | string | ResponsiveSize;\n className?: string;\n events: Event[];\n interval?: number;\n onChange?: (index: number) => void;\n}\n\nexport default function AppleInvites({\n events,\n interval = 3000,\n className = \"\",\n cardClassName = \"\",\n activeIndex: controlledIndex,\n onChange,\n cardWidth = DEFAULT_CARD_WIDTH,\n cardHeight,\n aspectRatio = DEFAULT_ASPECT_RATIO,\n}: AppleInvitesProps) {\n const shouldReduceMotion = useReducedMotion();\n const [internalPage, setInternalPage] = useState(0);\n const [direction, setDirection] = useState(0);\n const responsiveWidth = useResponsiveSize(cardWidth, DEFAULT_CARD_WIDTH);\n\n const variants = useMemo(\n () => ({\n center: {\n x: \"-50%\",\n rotate: 0,\n scale: 1,\n opacity: 1,\n zIndex: 3,\n transition: shouldReduceMotion\n ? { duration: 0 }\n : {\n type: \"spring\" as const,\n stiffness: 300,\n damping: 30,\n duration: 0.25,\n },\n },\n left: {\n x: \"-130%\",\n rotate: -12,\n scale: 0.9,\n opacity: 0.8,\n zIndex: 2,\n transition: shouldReduceMotion\n ? { duration: 0 }\n : {\n type: \"spring\" as const,\n stiffness: 300,\n damping: 30,\n duration: 0.25,\n },\n },\n right: {\n x: \"30%\",\n rotate: 12,\n scale: 0.9,\n opacity: 0.8,\n zIndex: 2,\n transition: shouldReduceMotion\n ? { duration: 0 }\n : {\n type: \"spring\" as const,\n stiffness: 300,\n damping: 30,\n duration: 0.25,\n },\n },\n hidden: {\n opacity: 0,\n zIndex: 1,\n transition: shouldReduceMotion ? { duration: 0 } : { duration: 0.3 },\n },\n }),\n [shouldReduceMotion]\n );\n const explicitHeight = useResponsiveSize(\n cardHeight,\n calculateHeightFromWidth(responsiveWidth, aspectRatio)\n );\n const [calculatedHeight, setCalculatedHeight] = useState(() =>\n calculateHeightFromWidth(responsiveWidth, aspectRatio)\n );\n\n // Update calculated height when width changes (if using aspect ratio)\n useEffect(() => {\n if (cardHeight === undefined) {\n setCalculatedHeight(\n calculateHeightFromWidth(responsiveWidth, aspectRatio)\n );\n }\n }, [responsiveWidth, aspectRatio, cardHeight]);\n\n const responsiveHeight =\n cardHeight === undefined ? calculatedHeight : explicitHeight;\n\n // Calculate responsive sizes based on card width\n const cardWidthNum = parseSize(responsiveWidth);\n const scaleFactor = cardWidthNum / DEFAULT_CARD_WIDTH;\n\n // Responsive sizes for internal content\n const badgeFontSize = Math.max(\n MIN_BADGE_FONT_SIZE,\n Math.round(BASE_BADGE_FONT_SIZE * scaleFactor)\n );\n const badgePaddingX = Math.max(\n MIN_BADGE_PADDING_X,\n Math.round(BASE_BADGE_PADDING_X * scaleFactor)\n );\n // Use a more aggressive scaling for vertical padding to keep it compact\n // Scale padding Y less aggressively to keep badges more compact\n const badgePaddingY = Math.max(\n MIN_BADGE_PADDING_Y,\n Math.round(\n BASE_BADGE_PADDING_Y * scaleFactor * BADGE_PADDING_Y_SCALE_FACTOR\n )\n );\n const badgeIconSize = Math.max(\n MIN_BADGE_ICON_SIZE,\n Math.round(BASE_BADGE_ICON_SIZE * scaleFactor)\n );\n const titleFontSize = Math.max(\n MIN_TITLE_FONT_SIZE,\n Math.round(BASE_TITLE_FONT_SIZE * scaleFactor)\n );\n const subtitleFontSize = Math.max(\n MIN_SUBTITLE_FONT_SIZE,\n Math.round(BASE_SUBTITLE_FONT_SIZE * scaleFactor)\n );\n const locationFontSize = Math.max(\n MIN_LOCATION_FONT_SIZE,\n Math.round(BASE_LOCATION_FONT_SIZE * scaleFactor)\n );\n const avatarSize = Math.max(\n MIN_AVATAR_SIZE,\n Math.round(BASE_AVATAR_SIZE * scaleFactor)\n );\n const contentPadding = Math.max(\n MIN_CONTENT_PADDING,\n Math.round(BASE_CONTENT_PADDING * scaleFactor)\n );\n const badgeTop = Math.max(\n MIN_BADGE_TOP,\n Math.round(BASE_BADGE_TOP * scaleFactor)\n );\n const badgeLeft = Math.max(\n MIN_BADGE_LEFT,\n Math.round(BASE_BADGE_LEFT * scaleFactor)\n );\n const badgeGap = Math.max(\n MIN_BADGE_GAP,\n Math.round(BASE_BADGE_GAP * scaleFactor)\n );\n const avatarGap = Math.max(\n MIN_AVATAR_GAP,\n Math.round(BASE_AVATAR_GAP * scaleFactor)\n );\n const avatarMarginBottom = Math.max(\n MIN_AVATAR_MARGIN_BOTTOM,\n Math.round(BASE_AVATAR_MARGIN_BOTTOM * scaleFactor)\n );\n const titleMarginBottom = Math.max(\n MIN_TITLE_MARGIN_BOTTOM,\n Math.round(BASE_TITLE_MARGIN_BOTTOM * scaleFactor)\n );\n\n const page = controlledIndex === undefined ? internalPage : controlledIndex;\n const setPage = (val: number, dir: number) => {\n if (onChange) {\n onChange(val);\n } else {\n setInternalPage(val);\n setDirection(dir);\n }\n };\n\n const activeIndex = wrap(0, events.length, page);\n const setPageRef = useRef(setPage);\n\n useEffect(() => {\n setPageRef.current = setPage;\n });\n\n useEffect(() => {\n const timer = setInterval(() => {\n setPageRef.current(page + 1, 1);\n }, interval);\n return () => clearInterval(timer);\n }, [page, interval]);\n\n const visibleEvents = [-1, 0, 1].map(\n (offset) => events[wrap(0, events.length, activeIndex + offset)]\n );\n\n const getVariant = (index: number) => {\n if (index === 1) {\n return \"center\";\n }\n if (index === 0) {\n return \"left\";\n }\n return \"right\";\n };\n\n const renderBackground = (event: Event) => {\n if (event.backgroundClassName) {\n return
;\n }\n if (event.image) {\n return (\n \n );\n }\n return null;\n };\n\n return (\n \n \n {visibleEvents.map((event, index) => (\n \n
\n {renderBackground(event)}\n {/* Badge */}\n \n \n \n {event.badge}\n \n
\n {/* Content */}\n \n {/* Participant Avatars */}\n \n {event.participants?.map((participant, idx) => (\n \n ))}\n
\n {event.title && (\n \n {event.title}\n

\n )}\n {event.subtitle && (\n \n {event.subtitle}\n

\n )}\n \n {event.location}\n

\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n ))}\n \n
\n );\n}\n","target":"components/smoothui/apple-invites/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"basic-accordion","type":"registry:ui","title":"basic-accordion","description":"A BasicAccordion component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion","lucide-react"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { ChevronDown } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useState } from \"react\";\n\nconst CHEVRON_ROTATION_DEGREES = 180;\nconst CHEVRON_ANIMATION_DURATION = 0.2;\n\nexport interface AccordionItem {\n content: React.ReactNode;\n id: string | number;\n title: string;\n}\n\nexport interface BasicAccordionProps {\n allowMultiple?: boolean;\n className?: string;\n defaultExpandedIds?: Array;\n items: AccordionItem[];\n}\n\nexport default function BasicAccordion({\n items,\n allowMultiple = false,\n className = \"\",\n defaultExpandedIds = [],\n}: BasicAccordionProps) {\n const [expandedItems, setExpandedItems] =\n useState>(defaultExpandedIds);\n const shouldReduceMotion = useReducedMotion();\n\n const toggleItem = (id: string | number) => {\n if (expandedItems.includes(id)) {\n setExpandedItems(expandedItems.filter((item) => item !== id));\n } else if (allowMultiple) {\n setExpandedItems([...expandedItems, id]);\n } else {\n setExpandedItems([id]);\n }\n };\n\n return (\n \n {items.map((item) => {\n const isExpanded = expandedItems.includes(item.id);\n\n return (\n
\n toggleItem(item.id)}\n type=\"button\"\n >\n

{item.title}

\n \n \n \n \n\n \n {isExpanded && (\n \n
\n {item.content}\n
\n \n )}\n \n
\n );\n })}\n
\n );\n}\n","target":"components/smoothui/basic-accordion/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"basic-dropdown","type":"registry:ui","title":"basic-dropdown","description":"A BasicDropdown component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion","lucide-react"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { ChevronDown } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nconst ROTATION_ANGLE_OPEN = 180;\nconst DROPDOWN_OFFSET = 4;\n\nexport interface DropdownItem {\n icon?: React.ReactNode;\n id: string | number;\n label: string;\n}\n\nexport interface BasicDropdownProps {\n className?: string;\n items: DropdownItem[];\n label: string;\n onChange?: (item: DropdownItem) => void;\n}\n\nexport default function BasicDropdown({\n label,\n items,\n onChange,\n className = \"\",\n}: BasicDropdownProps) {\n const [isOpen, setIsOpen] = useState(false);\n const [selectedItem, setSelectedItem] = useState(null);\n const [focusedIndex, setFocusedIndex] = useState(-1);\n const dropdownRef = useRef(null);\n const buttonRef = useRef(null);\n const portalRef = useRef(null);\n const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });\n const shouldReduceMotion = useReducedMotion();\n\n const handleItemSelect = (item: DropdownItem) => {\n setSelectedItem(item);\n setIsOpen(false);\n onChange?.(item);\n };\n\n const handleToggle = () => {\n if (!isOpen && buttonRef.current) {\n const rect = buttonRef.current.getBoundingClientRect();\n setPosition({\n top: rect.bottom + DROPDOWN_OFFSET,\n left: rect.left,\n width: rect.width,\n });\n }\n setIsOpen(!isOpen);\n };\n\n // Update position on scroll/resize when open\n useEffect(() => {\n if (!(isOpen && buttonRef.current)) {\n return;\n }\n\n const updatePosition = () => {\n if (buttonRef.current) {\n const rect = buttonRef.current.getBoundingClientRect();\n setPosition({\n top: rect.bottom + DROPDOWN_OFFSET,\n left: rect.left,\n width: rect.width,\n });\n }\n };\n\n window.addEventListener(\"scroll\", updatePosition, true);\n window.addEventListener(\"resize\", updatePosition);\n\n return () => {\n window.removeEventListener(\"scroll\", updatePosition, true);\n window.removeEventListener(\"resize\", updatePosition);\n };\n }, [isOpen]);\n\n // Close dropdown when clicking outside\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n const target = event.target as Node;\n if (\n isOpen &&\n dropdownRef.current &&\n !dropdownRef.current.contains(target) &&\n portalRef.current &&\n !portalRef.current.contains(target)\n ) {\n setIsOpen(false);\n setFocusedIndex(-1);\n }\n };\n\n if (isOpen) {\n document.addEventListener(\"mousedown\", handleClickOutside);\n }\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [isOpen]);\n\n // Keyboard navigation\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (!isOpen) {\n // Open dropdown on Enter or Space when button is focused\n if (\n (event.key === \"Enter\" || event.key === \" \") &&\n document.activeElement === buttonRef.current\n ) {\n event.preventDefault();\n handleToggle();\n }\n return;\n }\n\n if (event.key === \"Escape\") {\n setIsOpen(false);\n setFocusedIndex(-1);\n buttonRef.current?.focus();\n } else if (event.key === \"ArrowDown\") {\n event.preventDefault();\n setFocusedIndex((prev) => (prev < items.length - 1 ? prev + 1 : 0));\n } else if (event.key === \"ArrowUp\") {\n event.preventDefault();\n setFocusedIndex((prev) => (prev > 0 ? prev - 1 : items.length - 1));\n } else if (event.key === \"Enter\" && focusedIndex >= 0) {\n event.preventDefault();\n const item = items[focusedIndex];\n if (item) {\n handleItemSelect(item);\n }\n } else if (event.key === \"Home\") {\n event.preventDefault();\n setFocusedIndex(0);\n } else if (event.key === \"End\") {\n event.preventDefault();\n setFocusedIndex(items.length - 1);\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n // biome-ignore lint/correctness/useExhaustiveDependencies: Handlers are stable via closure\n }, [isOpen, items, focusedIndex, handleItemSelect, handleToggle]);\n\n // Reset focused index when items change\n useEffect(() => {\n setFocusedIndex(-1);\n }, []);\n\n const dropdownContent = (\n \n {isOpen && (\n
\n \n \n {items.map((item, index) => (\n \n handleItemSelect(item)}\n onMouseEnter={() => setFocusedIndex(index)}\n type=\"button\"\n >\n {item.icon && {item.icon}}\n {item.label}\n\n {selectedItem?.id === item.id && (\n \n \n Selected\n \n \n \n )}\n \n \n ))}\n \n \n
\n )}\n \n );\n\n return (\n <>\n
\n \n \n {selectedItem ? selectedItem.label : label}\n \n \n \n \n \n
\n {typeof window === \"undefined\"\n ? null\n : createPortal(dropdownContent, document.body)}\n \n );\n}\n","target":"components/smoothui/basic-dropdown/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"basic-modal","type":"registry:ui","title":"basic-modal","description":"A BasicModal component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion","lucide-react","usehooks-ts"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { X } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useOnClickOutside } from \"usehooks-ts\";\n\nexport interface BasicModalProps {\n children: React.ReactNode;\n isOpen: boolean;\n onClose: () => void;\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n title?: string;\n}\n\nconst modalSizes = {\n sm: \"max-w-sm\",\n md: \"max-w-md\",\n lg: \"max-w-lg\",\n xl: \"max-w-xl\",\n full: \"max-w-4xl\",\n};\n\nexport default function BasicModal({\n isOpen,\n onClose,\n title,\n children,\n size = \"md\",\n}: BasicModalProps) {\n const overlayRef = useRef(null);\n const modalRef = useRef(\n null\n ) as React.RefObject;\n const closeButtonRef = useRef(null);\n const previousActiveElementRef = useRef(null);\n useOnClickOutside(modalRef, () => onClose());\n const [mounted, setMounted] = useState(false);\n const shouldReduceMotion = useReducedMotion();\n\n const titleId = title\n ? `modal-title-${Math.random().toString(36).substring(2, 9)}`\n : undefined;\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n // Focus management: Save previous focus and restore on close\n useEffect(() => {\n if (isOpen) {\n previousActiveElementRef.current = document.activeElement as HTMLElement;\n // Focus the close button or first focusable element when modal opens\n setTimeout(() => {\n closeButtonRef.current?.focus();\n }, 100);\n } else if (previousActiveElementRef.current) {\n // Restore focus when modal closes\n previousActiveElementRef.current.focus();\n }\n }, [isOpen]);\n\n // Close on Escape key press and focus trap\n useEffect(() => {\n if (!isOpen) {\n return;\n }\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n onClose();\n return;\n }\n\n // Focus trap: keep focus within modal\n if (e.key === \"Tab\" && modalRef.current) {\n const focusableElements = Array.from(\n modalRef.current.querySelectorAll(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n )\n );\n const firstElement = focusableElements[0];\n const lastElement = focusableElements.at(-1);\n\n if (e.shiftKey) {\n // Shift + Tab\n if (document.activeElement === firstElement) {\n e.preventDefault();\n lastElement?.focus();\n }\n } else if (document.activeElement === lastElement) {\n // Tab\n e.preventDefault();\n firstElement?.focus();\n }\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, [isOpen, onClose]);\n\n // Note: Body scroll locking is handled by the overlay and modal positioning\n // No need to manually set body overflow as it can conflict with other components\n\n const modalContent = (\n \n {isOpen && (\n <>\n {/* Backdrop */}\n {\n if (e.target === overlayRef.current) {\n onClose();\n }\n }}\n ref={overlayRef}\n transition={{ duration: shouldReduceMotion ? 0 : 0.2 }}\n />\n\n {/* Modal */}\n \n \n {/* Header */}\n
\n {title && (\n

\n {title}\n

\n )}\n \n \n \n
\n\n {/* Content */}\n
{children}
\n \n \n \n )}\n \n );\n\n if (!mounted) {\n return null;\n }\n\n return createPortal(modalContent, document.body);\n}\n","target":"components/smoothui/basic-modal/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"basic-toast","type":"registry:ui","title":"basic-toast","description":"A BasicToast component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion","lucide-react"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { AlertCircle, CheckCircle, Info, X, XCircle } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nexport type ToastType = \"success\" | \"error\" | \"info\" | \"warning\";\n\nexport interface ToastProps {\n className?: string;\n duration?: number;\n isVisible?: boolean;\n message: string;\n onClose?: () => void;\n type?: ToastType;\n}\n\nconst toastIcons = {\n success: ,\n error: ,\n warning: ,\n info: ,\n};\n\nconst toastClasses = {\n success:\n \"border-emerald-100 bg-emerald-50 dark:border-emerald-900 dark:bg-emerald-950\",\n error: \"border-red-100 bg-red-50 dark:border-red-900 dark:bg-red-950\",\n warning:\n \"border-amber-100 bg-amber-50 dark:border-amber-900 dark:bg-amber-950\",\n info: \"border-blue-100 bg-blue-50 dark:border-blue-900 dark:bg-blue-950\",\n};\n\nexport default function BasicToast({\n message,\n type = \"info\",\n duration = 3000,\n onClose,\n isVisible = true,\n className = \"\",\n}: ToastProps) {\n const [visible, setVisible] = useState(isVisible);\n const [mounted, setMounted] = useState(false);\n const shouldReduceMotion = useReducedMotion();\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n useEffect(() => {\n setVisible(isVisible);\n }, [isVisible]);\n\n useEffect(() => {\n if (visible && duration > 0) {\n const timer = setTimeout(() => {\n setVisible(false);\n onClose?.();\n }, duration);\n return () => clearTimeout(timer);\n }\n }, [visible, duration, onClose]);\n\n if (!mounted) {\n return null;\n }\n\n const toastContent = (\n \n {visible && (\n \n
{toastIcons[type]}
\n

{message}

\n {\n setVisible(false);\n onClose?.();\n }}\n type=\"button\"\n >\n \n \n \n )}\n \n );\n\n return createPortal(toastContent, document.body);\n}\n\n// Example of how to use this component:\nexport function ToastDemo() {\n const [showToast, setShowToast] = useState(false);\n const [toastType, setToastType] = useState(\"success\");\n\n const handleShowToast = (type: ToastType) => {\n setToastType(type);\n setShowToast(true);\n };\n\n return (\n
\n
\n handleShowToast(\"success\")}\n type=\"button\"\n >\n Success Toast\n \n handleShowToast(\"error\")}\n type=\"button\"\n >\n Error Toast\n \n handleShowToast(\"warning\")}\n type=\"button\"\n >\n Warning Toast\n \n handleShowToast(\"info\")}\n type=\"button\"\n >\n Info Toast\n \n
\n\n \n {showToast && (\n setShowToast(false)}\n type={toastType}\n />\n )}\n \n
\n );\n}\n","target":"components/smoothui/basic-toast/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"book","type":"registry:ui","title":"book","description":"A 3D CSS book component with perspective transforms and hover animation","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { useReducedMotion } from \"motion/react\";\nimport type { ReactNode } from \"react\";\n\nexport type BookVariant = \"stripe\" | \"simple\";\n\nexport interface BookProps {\n /** Additional CSS classes */\n className?: string;\n /** Cover accent color (CSS color value) */\n color?: string;\n /** Custom illustration for the stripe area (stripe variant only) */\n illustration?: ReactNode;\n /** Logo or icon displayed at the bottom of the content area */\n logo?: ReactNode;\n /** Title text color override */\n textColor?: string;\n /** Book title text displayed on the cover */\n title: string;\n /** Visual variant of the book */\n variant?: BookVariant;\n /** Book width in pixels */\n width?: number;\n}\n\nconst BOOK_DEPTH = \"29cqw\";\nconst BOOK_BORDER_RADIUS = \"6px 4px 4px 6px\";\nconst DEFAULT_WIDTH = 196;\nconst DEFAULT_COLOR = \"#e5a00d\";\n\nconst BG_SHADOW =\n \"linear-gradient(90deg, #fff0 0%, #fff0 12%, #ffffff40 29.25%, #fff0 50.5%, #fff0 75.25%, #ffffff40 91%, #fff0 100%), linear-gradient(90deg, #00000008 0%, #0000001a 12%, #0000 30%, #00000005 50%, #0003 73.5%, #00000080 75.25%, #00000026 85.25%, #0000 100%)\";\n\nconst Book = ({\n title,\n variant = \"stripe\",\n color = DEFAULT_COLOR,\n textColor,\n width = DEFAULT_WIDTH,\n illustration,\n logo,\n className,\n}: BookProps) => {\n const shouldReduceMotion = useReducedMotion();\n const bookWidth = `${width}px`;\n\n return (\n \n {/* Rotate wrapper - handles 3D rotation on hover */}\n \n {/* Front cover */}\n \n {variant === \"stripe\" ? (\n \n ) : (\n \n )}\n\n {/* Border overlay */}\n \n
\n\n {/* Page edges (right side) */}\n \n\n {/* Back cover */}\n \n
\n \n );\n};\n\n/** Stripe variant: color band at top, white body below */\nconst StripeContent = ({\n title,\n illustration,\n logo,\n width,\n}: {\n title: string;\n illustration?: ReactNode;\n logo?: ReactNode;\n width: number;\n}) => (\n <>\n {/* Colored stripe area */}\n \n {illustration ? (\n
{illustration}
\n ) : (\n
\n )}\n {/* Spine binding overlay on stripe */}\n \n
\n\n {/* Body with title */}\n
\n {/* Spine binding on body */}\n \n {/* Content */}\n \n \n {title}\n \n {logo &&
{logo}
}\n
\n \n \n);\n\n/** Simple variant: full-color cover with title */\nconst SimpleContent = ({\n title,\n logo,\n width,\n}: {\n title: string;\n logo?: ReactNode;\n width: number;\n}) => (\n
\n {/* Spine binding */}\n \n {/* Content */}\n \n \n {title}\n \n {logo &&
{logo}
}\n
\n \n);\n\nexport default Book;\n","target":"components/smoothui/book/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"breadcrumb","type":"registry:ui","title":"breadcrumb","description":"Animated breadcrumb navigation with stagger-in animation","author":"Eduardo Calvo ","dependencies":["motion","lucide-react"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { ChevronRight } from \"lucide-react\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport type { ReactNode } from \"react\";\nimport { SPRING_DEFAULT } from \"../../lib/animation\";\n\n/** A single breadcrumb item definition. */\nexport type BreadcrumbItemProps = {\n /** Display label for the breadcrumb item. */\n label: ReactNode;\n /** URL the breadcrumb links to. Omit for the current (last) page. */\n href?: string;\n};\n\nexport type BreadcrumbProps = {\n /** Ordered list of breadcrumb items. The last item is treated as the current page. */\n items: BreadcrumbItemProps[];\n /** Custom separator element. Defaults to a chevron icon. */\n separator?: ReactNode;\n /** Additional CSS classes for the nav element. */\n className?: string;\n};\n\nconst staggerDelay = 0.04;\n\nexport default function Breadcrumb({\n items,\n separator,\n className,\n}: BreadcrumbProps) {\n const shouldReduceMotion = useReducedMotion();\n\n return (\n \n );\n}\n","target":"components/smoothui/breadcrumb/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"button-copy","type":"registry:ui","title":"button-copy","description":"A ButtonCopy component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion","lucide-react"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { Check, Copy, LoaderCircle } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { type ReactNode, useCallback, useState } from \"react\";\n\nexport interface ButtonCopyProps {\n className?: string;\n disabled?: boolean;\n duration?: number;\n idleIcon?: ReactNode;\n loadingDuration?: number;\n loadingIcon?: ReactNode;\n onCopy?: () => Promise | void;\n successIcon?: ReactNode;\n}\n\nconst defaultIcons = {\n idle: ,\n loading: ,\n success: ,\n};\n\nexport default function ButtonCopy({\n onCopy,\n idleIcon = defaultIcons.idle,\n loadingIcon = defaultIcons.loading,\n successIcon = defaultIcons.success,\n className = \"\",\n duration = 2000,\n loadingDuration = 1000,\n disabled = false,\n}: ButtonCopyProps) {\n const [buttonState, setButtonState] = useState<\n \"idle\" | \"loading\" | \"success\"\n >(\"idle\");\n const shouldReduceMotion = useReducedMotion();\n\n const handleClick = useCallback(async () => {\n setButtonState(\"loading\");\n if (onCopy) {\n await onCopy();\n }\n setTimeout(() => {\n setButtonState(\"success\");\n }, loadingDuration);\n setTimeout(() => {\n setButtonState(\"idle\");\n }, loadingDuration + duration);\n }, [onCopy, loadingDuration, duration]);\n\n const icons = {\n idle: idleIcon,\n loading: loadingIcon,\n success: successIcon,\n };\n\n const ariaLabels = {\n idle: \"Copy\",\n loading: \"Copying...\",\n success: \"Copied\",\n };\n\n return (\n
\n \n \n \n {icons[buttonState]}\n \n \n \n
\n );\n}\n","target":"components/smoothui/button-copy/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"checkbox","type":"registry:ui","title":"checkbox","description":"An animated Checkbox component for SmoothUI with checkmark and indeterminate state animations.","author":"Eduardo Calvo ","dependencies":["motion","radix-ui"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\";\nimport { SPRING_DEFAULT } from \"../../lib/animation\";\n\nexport interface CheckboxProps {\n /** Whether the checkbox is checked */\n checked?: boolean;\n /** Optional CSS class */\n className?: string;\n /** Whether the checkbox is disabled */\n disabled?: boolean;\n /** ID for label association */\n id?: string;\n /** Whether the checkbox is in an indeterminate state */\n indeterminate?: boolean;\n /** Accessible name for the checkbox */\n name?: string;\n /** Callback when the checked state changes */\n onCheckedChange?: (checked: boolean) => void;\n /** Whether the checkbox is required */\n required?: boolean;\n /** Value attribute for form submission */\n value?: string;\n}\n\nconst CheckmarkPath = motion.path;\nconst MotionSvg = motion.svg;\n\nexport default function Checkbox({\n checked = false,\n indeterminate = false,\n onCheckedChange,\n disabled = false,\n className,\n name,\n value,\n id,\n required,\n}: CheckboxProps) {\n const shouldReduceMotion = useReducedMotion();\n\n const derivedState = indeterminate\n ? \"indeterminate\"\n : checked\n ? \"checked\"\n : \"unchecked\";\n\n const handleChange = (state: boolean | \"indeterminate\") => {\n if (state === \"indeterminate\") {\n return;\n }\n onCheckedChange?.(state);\n };\n\n return (\n \n \n \n {derivedState === \"checked\" && (\n \n Checked\n \n \n )}\n {derivedState === \"indeterminate\" && (\n \n Indeterminate\n \n \n )}\n \n \n \n );\n}\n","target":"components/smoothui/checkbox/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"clip-corners-button","type":"registry:ui","title":"clip-corners-button","description":"A ClipCornersButton component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":["https://smoothui.dev/r/smooth-button.json"],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport SmoothButton from \"@repo/smoothui/components/smooth-button\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useState } from \"react\";\n\nexport interface ClipCornersButtonProps {\n children: React.ReactNode;\n className?: string;\n onClick?: () => void;\n}\n\nexport function ClipCornersButton({\n children,\n className = \"\",\n onClick,\n}: ClipCornersButtonProps) {\n const [isHovered, setIsHovered] = useState(false);\n const shouldReduceMotion = useReducedMotion();\n const [isHoverDevice, setIsHoverDevice] = useState(false);\n\n // Distance triangles move on hover\n const move = -4;\n\n useEffect(() => {\n const mediaQuery = window.matchMedia(\"(hover: hover) and (pointer: fine)\");\n setIsHoverDevice(mediaQuery.matches);\n\n const handleChange = (e: MediaQueryListEvent) => {\n setIsHoverDevice(e.matches);\n };\n\n mediaQuery.addEventListener(\"change\", handleChange);\n return () => mediaQuery.removeEventListener(\"change\", handleChange);\n }, []);\n\n return (\n {\n if (isHoverDevice) {\n setIsHovered(true);\n }\n }}\n onMouseLeave={() => setIsHovered(false)}\n style={{ borderRadius: 8 }}\n type=\"button\"\n >\n {/* Top-left triangle */}\n \n \n Top-left triangle\n \n \n \n {/* Top-right triangle */}\n \n \n Top-right triangle\n \n \n \n {/* Bottom-left triangle */}\n \n \n Bottom-left triangle\n \n \n \n {/* Bottom-right triangle */}\n \n \n Bottom-right triangle\n \n \n \n \n {children}\n \n \n );\n}\n\nexport default ClipCornersButton;\n","target":"components/smoothui/clip-corners-button/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"combobox","type":"registry:ui","title":"combobox","description":"An animated Combobox component for SmoothUI with text filtering, async search, and keyboard navigation.","author":"Eduardo Calvo ","dependencies":["motion","lucide-react"],"devDependencies":[],"registryDependencies":["https://smoothui.dev/r/smooth-button.json","https://smoothui.dev/r/smooth-button.json"],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@repo/shadcn-ui/components/ui/command\";\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@repo/shadcn-ui/components/ui/popover\";\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { CheckIcon, ChevronsUpDownIcon, LoaderIcon } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { DURATION_INSTANT, SPRING_DEFAULT } from \"../../lib/animation\";\nimport SmoothButton from \"../smooth-button\";\n\nexport interface ComboboxOption {\n /** Whether the option is disabled */\n disabled?: boolean;\n /** The display label for the option */\n label: string;\n /** The value of the option */\n value: string;\n}\n\nexport interface ComboboxProps {\n /** Accessible label for the combobox */\n \"aria-label\"?: string;\n /** ID of element that labels this combobox */\n \"aria-labelledby\"?: string;\n /** Additional CSS class names for the trigger button */\n className?: string;\n /** Additional CSS class names for the popover content */\n contentClassName?: string;\n /** Whether the combobox is disabled */\n disabled?: boolean;\n /** Text shown when no results match */\n emptyText?: string;\n /** Async search callback — receives the query string, returns filtered options */\n onSearch?: (query: string) => Promise;\n /** Callback when the selected value changes */\n onValueChange?: (value: string) => void;\n /** Static list of options (used when onSearch is not provided) */\n options?: ComboboxOption[];\n /** Placeholder text for the trigger button */\n placeholder?: string;\n /** Debounce delay in ms for the onSearch callback */\n searchDebounce?: number;\n /** Placeholder text for the search input */\n searchPlaceholder?: string;\n /** The controlled selected value */\n value?: string;\n}\n\nconst MotionCommandItem = motion.create(CommandItem);\n\nexport default function Combobox({\n value,\n onValueChange,\n options: staticOptions,\n onSearch,\n searchDebounce = 300,\n placeholder = \"Select an option…\",\n searchPlaceholder = \"Search…\",\n emptyText = \"No results found.\",\n disabled = false,\n className,\n contentClassName,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n}: ComboboxProps) {\n const shouldReduceMotion = useReducedMotion();\n const [open, setOpen] = useState(false);\n const [query, setQuery] = useState(\"\");\n const [asyncOptions, setAsyncOptions] = useState([]);\n const [loading, setLoading] = useState(false);\n const debounceRef = useRef | null>(null);\n\n const displayOptions = onSearch ? asyncOptions : (staticOptions ?? []);\n\n const selectedLabel = displayOptions.find(\n (opt) => opt.value === value\n )?.label;\n\n const handleSearch = useCallback(\n (searchQuery: string) => {\n setQuery(searchQuery);\n\n if (!onSearch) {\n return;\n }\n\n if (debounceRef.current) {\n clearTimeout(debounceRef.current);\n }\n\n debounceRef.current = setTimeout(async () => {\n setLoading(true);\n try {\n const results = await onSearch(searchQuery);\n setAsyncOptions(results);\n } finally {\n setLoading(false);\n }\n }, searchDebounce);\n },\n [onSearch, searchDebounce]\n );\n\n // Load initial async options when popover opens\n useEffect(() => {\n if (open && onSearch && asyncOptions.length === 0 && !loading) {\n setLoading(true);\n onSearch(\"\").then((results) => {\n setAsyncOptions(results);\n setLoading(false);\n });\n }\n }, [open, onSearch, asyncOptions.length, loading]);\n\n // Clean up debounce on unmount\n useEffect(\n () => () => {\n if (debounceRef.current) {\n clearTimeout(debounceRef.current);\n }\n },\n []\n );\n\n const handleSelect = (selectedValue: string) => {\n const newValue = selectedValue === value ? \"\" : selectedValue;\n onValueChange?.(newValue);\n setOpen(false);\n };\n\n const itemTransition = shouldReduceMotion ? DURATION_INSTANT : SPRING_DEFAULT;\n\n return (\n \n \n \n \n {selectedLabel ?? placeholder}\n \n \n \n \n \n \n \n \n \n {loading && (\n \n \n \n Loading…\n \n \n )}\n \n\n {!loading && {emptyText}}\n\n {!loading && displayOptions.length > 0 && (\n \n {displayOptions.map((option, index) => (\n \n \n {option.label}\n \n ))}\n \n )}\n \n \n \n \n );\n}\n","target":"components/smoothui/combobox/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"context-menu","type":"registry:ui","title":"context-menu","description":"An animated Context Menu component for SmoothUI with spring animations, nested submenus, and keyboard navigation.","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport {\n ContextMenuContent,\n ContextMenuGroup,\n ContextMenuItem,\n ContextMenuLabel,\n ContextMenu as ContextMenuRoot,\n ContextMenuSeparator,\n ContextMenuShortcut,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,\n ContextMenuTrigger,\n} from \"@repo/shadcn-ui/components/ui/context-menu\";\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport type React from \"react\";\nimport { SPRING_DEFAULT } from \"../../lib/animation\";\n\nexport interface ContextMenuProps {\n /** The trigger element that opens the context menu on right-click */\n children: React.ReactNode;\n /** Optional CSS class for the content container */\n className?: string;\n /** Menu items to render */\n items: ContextMenuItemConfig[];\n}\n\nexport interface ContextMenuItemConfig {\n /** Nested submenu items */\n children?: ContextMenuItemConfig[];\n /** Whether the item is disabled */\n disabled?: boolean;\n /** Renders a group label instead of an item */\n groupLabel?: string;\n /** Optional icon to display before the label */\n icon?: React.ReactNode;\n /** Unique key for the item */\n key: string;\n /** Display label */\n label: string;\n /** Callback when item is selected */\n onSelect?: () => void;\n /** Renders a separator instead of an item */\n separator?: boolean;\n /** Optional keyboard shortcut text to display */\n shortcut?: string;\n /** Destructive variant styling */\n variant?: \"default\" | \"destructive\";\n}\n\nexport default function ContextMenu({\n children,\n items,\n className,\n}: ContextMenuProps) {\n const shouldReduceMotion = useReducedMotion();\n\n const renderItem = (item: ContextMenuItemConfig, index: number) => {\n if (item.separator) {\n return ;\n }\n\n if (item.groupLabel) {\n return (\n {item.groupLabel}\n );\n }\n\n if (item.children && item.children.length > 0) {\n return (\n \n \n {item.icon && {item.icon}}\n {item.label}\n \n \n {item.children.map((child, childIndex) =>\n renderItem(child, childIndex)\n )}\n \n \n );\n }\n\n return (\n \n \n {item.icon && {item.icon}}\n {item.label}\n {item.shortcut && (\n {item.shortcut}\n )}\n \n \n );\n };\n\n return (\n \n {children}\n \n \n \n {items.map((item, index) => renderItem(item, index))}\n \n \n \n \n );\n}\n","target":"components/smoothui/context-menu/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"contribution-graph","type":"registry:ui","title":"contribution-graph","description":"A ContributionGraph component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { motion, useReducedMotion } from \"motion/react\";\nimport type React from \"react\";\nimport { useMemo, useState } from \"react\";\n\nexport interface ContributionData {\n count: number;\n date: string;\n level: number;\n}\n\nexport interface ContributionGraphProps {\n className?: string;\n data?: ContributionData[];\n showLegend?: boolean;\n showTooltips?: boolean;\n year?: number;\n}\n\nconst WEEKS_IN_YEAR = 53;\nconst DAYS_IN_WEEK = 7;\nconst JANUARY_MONTH = 0;\nconst DECEMBER_MONTH = 11;\nconst SUNDAY_DAY = 0;\nconst MIN_WEEKS_FOR_DECEMBER_HEADER = 2;\nconst TOOLTIP_OFFSET_X = 10;\nconst TOOLTIP_OFFSET_Y = 40;\n\nconst MONTHS = [\n \"Jan\",\n \"Feb\",\n \"Mar\",\n \"Apr\",\n \"May\",\n \"Jun\",\n \"Jul\",\n \"Aug\",\n \"Sep\",\n \"Oct\",\n \"Nov\",\n \"Dec\",\n];\n\nconst DAYS = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\n\n// Contribution level colors (similar to GitHub's)\nconst CONTRIBUTION_COLORS = [\n \"bg-primary\", // Level 0 - No contributions\n \"bg-brand/25\", // Level 1\n \"bg-brand/50\", // Level 2\n \"bg-brand/75\", // Level 3\n \"bg-brand\", // Level 4 - Max\n];\n\nconst LEVEL_0 = 0;\nconst LEVEL_1 = 1;\nconst LEVEL_2 = 2;\nconst LEVEL_3 = 3;\nconst LEVEL_4 = 4;\nconst CONTRIBUTION_LEVELS = [LEVEL_0, LEVEL_1, LEVEL_2, LEVEL_3, LEVEL_4];\nconst DAY_1 = 1;\nconst DAY_31 = 31;\n\n// Helper function to check if date is in valid range\nconst isDateInValidRange = (\n currentDate: Date,\n startDate: Date,\n endDate: Date,\n targetYear: number\n) => {\n const isInRange = currentDate >= startDate && currentDate <= endDate;\n const isPreviousYearDecember =\n currentDate.getFullYear() === targetYear - 1 &&\n currentDate.getMonth() === DECEMBER_MONTH;\n const isNextYearJanuary =\n currentDate.getFullYear() === targetYear + 1 &&\n currentDate.getMonth() === JANUARY_MONTH;\n return isInRange || isPreviousYearDecember || isNextYearJanuary;\n};\n\n// Helper function to create day data\nconst createDayData = (\n currentDate: Date,\n contributionData: ContributionData[]\n): ContributionData => {\n const dateString = currentDate.toISOString().split(\"T\")[0];\n const existingData = contributionData.find((d) => d.date === dateString);\n return {\n date: dateString,\n count: existingData?.count ?? LEVEL_0,\n level: existingData?.level ?? LEVEL_0,\n };\n};\n\n// Helper function to check if month should be shown\ninterface MonthHeaderCheck {\n currentMonth: number;\n currentYear: number;\n startDateDay: number;\n targetYear: number;\n weekCount: number;\n}\nconst shouldShowMonthHeader = ({\n currentYear,\n targetYear,\n currentMonth,\n startDateDay,\n weekCount,\n}: MonthHeaderCheck) =>\n currentYear === targetYear ||\n (currentYear === targetYear - 1 &&\n currentMonth === DECEMBER_MONTH &&\n startDateDay !== SUNDAY_DAY &&\n weekCount >= MIN_WEEKS_FOR_DECEMBER_HEADER);\n\n// Helper function to calculate month headers\nconst calculateMonthHeaders = (targetYear: number) => {\n const headers: { month: string; colspan: number; startWeek: number }[] = [];\n const startDate = new Date(targetYear, JANUARY_MONTH, DAY_1);\n const firstSunday = new Date(startDate);\n firstSunday.setDate(startDate.getDate() - startDate.getDay());\n\n let currentMonth = -1;\n let currentYear = -1;\n let monthStartWeek = 0;\n let weekCount = 0;\n\n for (let weekNumber = 0; weekNumber < WEEKS_IN_YEAR; weekNumber++) {\n const weekDate = new Date(firstSunday);\n weekDate.setDate(firstSunday.getDate() + weekNumber * DAYS_IN_WEEK);\n\n const monthKey = weekDate.getMonth();\n const yearKey = weekDate.getFullYear();\n\n if (monthKey !== currentMonth || yearKey !== currentYear) {\n if (\n currentMonth !== -1 &&\n shouldShowMonthHeader({\n currentYear,\n targetYear,\n currentMonth,\n startDateDay: startDate.getDay(),\n weekCount,\n })\n ) {\n headers.push({\n month: MONTHS[currentMonth],\n colspan: weekCount,\n startWeek: monthStartWeek,\n });\n }\n currentMonth = monthKey;\n currentYear = yearKey;\n monthStartWeek = weekNumber;\n weekCount = 1;\n } else {\n weekCount++;\n }\n }\n\n // Add the last month\n if (\n currentMonth !== -1 &&\n shouldShowMonthHeader({\n currentYear,\n targetYear,\n currentMonth,\n startDateDay: startDate.getDay(),\n weekCount,\n })\n ) {\n headers.push({\n month: MONTHS[currentMonth],\n colspan: weekCount,\n startWeek: monthStartWeek,\n });\n }\n\n return headers;\n};\n\nexport function ContributionGraph({\n data = [],\n year = new Date().getFullYear(),\n className = \"\",\n showLegend = true,\n showTooltips = true,\n}: ContributionGraphProps) {\n const [hoveredDay, setHoveredDay] = useState(null);\n const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });\n const shouldReduceMotion = useReducedMotion();\n\n // Generate all days for the year\n const yearData = useMemo(() => {\n const startDate = new Date(year, JANUARY_MONTH, DAY_1);\n const endDate = new Date(year, DECEMBER_MONTH, DAY_31);\n const days: ContributionData[] = [];\n\n // Start from the Sunday of the first week that contains January 1st\n // This ensures December gets proper weeks before January\n const firstSunday = new Date(startDate);\n firstSunday.setDate(startDate.getDate() - startDate.getDay());\n\n // Generate 53 weeks (GitHub shows 53 weeks)\n for (let weekNum = 0; weekNum < WEEKS_IN_YEAR; weekNum++) {\n for (let day = 0; day < DAYS_IN_WEEK; day++) {\n const currentDate = new Date(firstSunday);\n currentDate.setDate(\n firstSunday.getDate() + weekNum * DAYS_IN_WEEK + day\n );\n\n if (isDateInValidRange(currentDate, startDate, endDate, year)) {\n days.push(createDayData(currentDate, data));\n } else {\n // Add empty day for alignment\n days.push({\n date: \"\",\n count: LEVEL_0,\n level: LEVEL_0,\n });\n }\n }\n }\n\n return days;\n }, [data, year]);\n\n // Calculate month headers with colspan\n const monthHeaders = useMemo(() => calculateMonthHeaders(year), [year]);\n\n const handleDayHover = (day: ContributionData, event: React.MouseEvent) => {\n if (showTooltips && day.date) {\n setHoveredDay(day);\n setTooltipPosition({ x: event.clientX, y: event.clientY });\n }\n };\n\n const handleDayLeave = () => {\n setHoveredDay(null);\n };\n\n const formatDate = (dateString: string) => {\n if (!dateString) {\n return \"\";\n }\n const date = new Date(dateString);\n return date.toLocaleDateString(\"en-US\", {\n weekday: \"long\",\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n });\n };\n\n const getContributionText = (count: number) => {\n if (count === LEVEL_0) {\n return \"No contributions\";\n }\n if (count === LEVEL_1) {\n return \"1 contribution\";\n }\n return `${count} contributions`;\n };\n\n return (\n
\n
\n \n \n\n {/* Month Headers */}\n \n \n \n ))}\n \n \n\n {/* Day Grid */}\n \n {Array.from({ length: DAYS_IN_WEEK }, (_, dayIndex) => (\n \n {/* Day Labels */}\n \n\n {/* Day Cells */}\n {Array.from({ length: WEEKS_IN_YEAR }, (_, w) => {\n const dayData = yearData[w * DAYS_IN_WEEK + dayIndex];\n const cellKey = `${dayData?.date ?? \"empty\"}-${w}-${dayIndex}`;\n if (!dayData?.date) {\n return (\n \n );\n }\n\n return (\n // biome-ignore lint/a11y/noNoninteractiveElementInteractions: Table cell is interactive for hover tooltips\n handleDayHover(dayData, e)}\n onMouseLeave={handleDayLeave}\n title={\n showTooltips\n ? `${formatDate(dayData.date)}: ${getContributionText(dayData.count)}`\n : undefined\n }\n >\n \n \n );\n })}\n \n ))}\n \n
Contribution Graph for {year}
\n {monthHeaders.map((header) => (\n \n {header.month}\n
\n {dayIndex % 2 === 0 && (\n \n {DAYS[dayIndex]}\n \n )}\n \n
\n
\n
\n\n {/* Tooltip */}\n {showTooltips && hoveredDay && (\n \n
\n {getContributionText(hoveredDay.count)}\n
\n
\n {formatDate(hoveredDay.date)}\n
\n \n )}\n\n {/* Legend */}\n {showLegend && (\n
\n Less\n
\n {CONTRIBUTION_LEVELS.map((level) => (\n \n ))}\n
\n More\n
\n )}\n
\n );\n}\n\nexport default ContributionGraph;\n","target":"components/smoothui/contribution-graph/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"cursor-follow","type":"registry:ui","title":"cursor-follow","description":"A CursorFollow component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport {\n motion,\n useMotionValue,\n useReducedMotion,\n useSpring,\n} from \"motion/react\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { useCursorPosition } from \"./use-cursor-position\";\n\nexport interface CursorFollowProps {\n children: React.ReactNode;\n className?: string;\n}\n\nconst CIRCLE_SIZE = 16;\nconst MIN_BUBBLE_WIDTH = 40;\nconst BUBBLE_HEIGHT = 40;\nconst TEXT_PADDING = 32;\n\nconst CursorFollow: React.FC = ({\n children,\n className = \"\",\n}) => {\n const { x: mouseX, y: mouseY } = useCursorPosition();\n const [cursorText, setCursorText] = useState(null);\n const [pendingText, setPendingText] = useState(null);\n const [textWidth, setTextWidth] = useState(0);\n const measureRef = useRef(null);\n const shouldReduceMotion = useReducedMotion();\n\n // Motion values for smooth follow\n const x = useMotionValue(0);\n const y = useMotionValue(0);\n const springX = useSpring(x, { stiffness: 350, damping: 40 });\n const springY = useSpring(y, { stiffness: 350, damping: 40 });\n\n // Calculate bubble width and height\n const bubbleWidth = cursorText\n ? Math.max(textWidth + TEXT_PADDING, MIN_BUBBLE_WIDTH)\n : CIRCLE_SIZE;\n const bubbleHeight = cursorText ? BUBBLE_HEIGHT : CIRCLE_SIZE;\n\n // Update target position on mouse move\n useEffect(() => {\n x.set(mouseX - bubbleWidth / 2);\n y.set(mouseY - bubbleHeight / 2);\n }, [mouseX, mouseY, bubbleWidth, bubbleHeight, x, y]);\n\n // Pre-measure text width before showing bubble\n useEffect(() => {\n if (pendingText && measureRef.current) {\n const width = measureRef.current.offsetWidth;\n setTextWidth(width);\n setCursorText(pendingText);\n setPendingText(null);\n }\n if (!(pendingText || cursorText)) {\n setTextWidth(0);\n }\n }, [pendingText, cursorText]);\n\n // Handlers for child hover\n const handleMouseOver = (e: React.MouseEvent) => {\n const target = e.target as HTMLElement;\n const text = target.getAttribute(\"data-cursor-text\");\n if (text) {\n setPendingText(text);\n }\n };\n const handleMouseOut = () => {\n setCursorText(null);\n setPendingText(null);\n };\n const handleFocus = (e: React.FocusEvent) => {\n const target = e.target as HTMLElement;\n const text = target.getAttribute(\"data-cursor-text\");\n if (text) {\n setPendingText(text);\n }\n };\n const handleBlur = () => {\n setCursorText(null);\n setPendingText(null);\n };\n\n return (\n // biome-ignore lint/a11y/noNoninteractiveElementInteractions: Interactive cursor tracking widget requires mouse events\n \n {children}\n \n \n {cursorText && (\n \n {cursorText}\n \n )}\n \n {/* Hidden span for pre-measuring text width */}\n {(pendingText || cursorText) && (\n \n {pendingText || cursorText}\n \n )}\n \n \n );\n};\n\nexport default CursorFollow;\n","target":"components/smoothui/cursor-follow/index.tsx"},{"type":"registry:ui","path":"use-cursor-position.tsx","content":"import { useEffect, useState } from \"react\";\n\nexport function useCursorPosition() {\n const [position, setPosition] = useState({ x: 0, y: 0 });\n\n useEffect(() => {\n const handleMouseMove = (event: MouseEvent) => {\n setPosition({ x: event.clientX, y: event.clientY });\n };\n window.addEventListener(\"mousemove\", handleMouseMove);\n return () => window.removeEventListener(\"mousemove\", handleMouseMove);\n }, []);\n\n return position;\n}\n","target":"components/smoothui/cursor-follow/use-cursor-position.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"dialog","type":"registry:ui","title":"dialog","description":"Animated Dialog and AlertDialog components for SmoothUI.","author":"Eduardo Calvo ","dependencies":["lucide-react","motion","radix-ui"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport {\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogTitle,\n AlertDialogTrigger,\n} from \"@repo/shadcn-ui/components/ui/alert-dialog\";\nimport {\n DialogClose,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@repo/shadcn-ui/components/ui/dialog\";\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { X } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport {\n AlertDialog as AlertDialogRadix,\n Dialog as DialogRadix,\n} from \"radix-ui\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\n/* ------------------------------------------------------------------ */\n/* Shared animation constants */\n/* ------------------------------------------------------------------ */\n\nconst SPRING_PANEL = {\n type: \"spring\" as const,\n duration: 0.25,\n bounce: 0.05,\n};\n\nconst BACKDROP_DURATION = 0.2;\n\nconst STAGGER_DELAY = 0.06;\n\n/* ------------------------------------------------------------------ */\n/* Types */\n/* ------------------------------------------------------------------ */\n\nexport interface DialogProps {\n /** Dialog content */\n children?: React.ReactNode;\n /** Additional CSS class names for the content */\n className?: string;\n /** Description displayed below the title */\n description?: string;\n /** Footer content */\n footer?: React.ReactNode;\n /** Callback when the open state changes */\n onOpenChange?: (open: boolean) => void;\n /** Whether the dialog is open */\n open?: boolean;\n /** Whether to show the close button */\n showCloseButton?: boolean;\n /** Title displayed in the dialog header */\n title?: string;\n /** Trigger element that opens the dialog */\n trigger?: React.ReactNode;\n}\n\nexport interface AlertDialogProps {\n /** Alert dialog content */\n children?: React.ReactNode;\n /** Additional CSS class names for the content */\n className?: string;\n /** Description displayed below the title */\n description?: string;\n /** Footer content (typically AlertDialogAction + AlertDialogCancel) */\n footer?: React.ReactNode;\n /** Callback when the open state changes */\n onOpenChange?: (open: boolean) => void;\n /** Whether the alert dialog is open */\n open?: boolean;\n /** Title displayed in the alert dialog header */\n title?: string;\n /** Trigger element that opens the alert dialog */\n trigger?: React.ReactNode;\n}\n\n/* ------------------------------------------------------------------ */\n/* Stagger wrapper — animates children in sequence */\n/* ------------------------------------------------------------------ */\n\nconst StaggerChild = ({\n children,\n index,\n shouldReduceMotion,\n}: {\n children: React.ReactNode;\n index: number;\n shouldReduceMotion: boolean | null;\n}) => (\n \n {children}\n \n);\n\n/* ------------------------------------------------------------------ */\n/* Animated close button with rotate on hover */\n/* ------------------------------------------------------------------ */\n\nconst AnimatedCloseButton = ({\n onClick,\n shouldReduceMotion,\n}: {\n onClick: () => void;\n shouldReduceMotion: boolean | null;\n}) => (\n \n \n Close\n \n);\n\n/* ------------------------------------------------------------------ */\n/* Dialog */\n/* ------------------------------------------------------------------ */\n\nexport default function Dialog({\n open,\n onOpenChange,\n title,\n description,\n showCloseButton = true,\n className,\n children,\n trigger,\n footer,\n}: DialogProps) {\n const shouldReduceMotion = useReducedMotion();\n const [internalOpen, setInternalOpen] = useState(false);\n const isControlled = open !== undefined;\n const isOpen = isControlled ? open : internalOpen;\n\n const handleOpenChange = useCallback(\n (next: boolean) => {\n if (!isControlled) {\n setInternalOpen(next);\n }\n onOpenChange?.(next);\n },\n [isControlled, onOpenChange]\n );\n\n // Track mount state for AnimatePresence exit animations\n const [showContent, setShowContent] = useState(false);\n const prevOpenRef = useRef(false);\n\n useEffect(() => {\n if (isOpen && !prevOpenRef.current) {\n setShowContent(true);\n }\n prevOpenRef.current = !!isOpen;\n }, [isOpen]);\n\n const handleAnimationComplete = useCallback(() => {\n if (!isOpen) {\n setShowContent(false);\n }\n }, [isOpen]);\n\n return (\n \n {trigger && {trigger}}\n\n setShowContent(false)}>\n {isOpen && (\n \n {/* Backdrop with blur + opacity fade */}\n \n \n \n\n {/* Content panel — spring scale + translateY entrance */}\n \n \n {/* Staggered content sections */}\n {(title || description) && (\n \n \n {title && {title}}\n {description && (\n {description}\n )}\n \n \n )}\n\n {children && (\n \n {children}\n \n )}\n\n {footer && (\n \n {footer}\n \n )}\n\n {showCloseButton && (\n handleOpenChange(false)}\n shouldReduceMotion={shouldReduceMotion}\n />\n )}\n \n \n \n )}\n \n \n );\n}\n\n/* ------------------------------------------------------------------ */\n/* AlertDialog */\n/* ------------------------------------------------------------------ */\n\nexport function AlertDialog({\n open,\n onOpenChange,\n title,\n description,\n className,\n children,\n trigger,\n footer,\n}: AlertDialogProps) {\n const shouldReduceMotion = useReducedMotion();\n const [internalOpen, setInternalOpen] = useState(false);\n const isControlled = open !== undefined;\n const isOpen = isControlled ? open : internalOpen;\n\n const handleOpenChange = useCallback(\n (next: boolean) => {\n if (!isControlled) {\n setInternalOpen(next);\n }\n onOpenChange?.(next);\n },\n [isControlled, onOpenChange]\n );\n\n const [showContent, setShowContent] = useState(false);\n const prevOpenRef = useRef(false);\n\n useEffect(() => {\n if (isOpen && !prevOpenRef.current) {\n setShowContent(true);\n }\n prevOpenRef.current = !!isOpen;\n }, [isOpen]);\n\n const handleAnimationComplete = useCallback(() => {\n if (!isOpen) {\n setShowContent(false);\n }\n }, [isOpen]);\n\n return (\n \n {trigger && {trigger}}\n\n setShowContent(false)}>\n {isOpen && (\n \n {/* Backdrop */}\n \n \n \n\n {/* Content panel */}\n \n \n {(title || description) && (\n \n \n {title && {title}}\n {description && (\n \n {description}\n \n )}\n \n \n )}\n\n {children && (\n \n {children}\n \n )}\n\n {footer && (\n \n {footer}\n \n )}\n \n \n \n )}\n \n \n );\n}\n\n/* ------------------------------------------------------------------ */\n/* Re-exports */\n/* ------------------------------------------------------------------ */\n\nexport {\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogTitle,\n AlertDialogTrigger,\n DialogClose,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n};\n","target":"components/smoothui/dialog/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"dot-morph-button","type":"registry:ui","title":"dot-morph-button","description":"A DotMorphButton component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":["https://smoothui.dev/r/smooth-button.json"],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport SmoothButton from \"@repo/smoothui/components/smooth-button\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useState } from \"react\";\n\nexport interface DotMorphButtonProps {\n className?: string;\n label: string;\n onClick?: () => void;\n}\n\nexport function DotMorphButton({\n label,\n className = \"\",\n onClick,\n}: DotMorphButtonProps) {\n const [isHovered, setIsHovered] = useState(false);\n const shouldReduceMotion = useReducedMotion();\n const [isHoverDevice, setIsHoverDevice] = useState(false);\n\n useEffect(() => {\n const mediaQuery = window.matchMedia(\"(hover: hover) and (pointer: fine)\");\n setIsHoverDevice(mediaQuery.matches);\n\n const handleChange = (e: MediaQueryListEvent) => {\n setIsHoverDevice(e.matches);\n };\n\n mediaQuery.addEventListener(\"change\", handleChange);\n return () => mediaQuery.removeEventListener(\"change\", handleChange);\n }, []);\n\n return (\n {\n if (isHoverDevice) {\n setIsHovered(true);\n }\n }}\n onMouseLeave={() => setIsHovered(false)}\n type=\"button\"\n >\n \n \n {label}\n \n \n );\n}\n\nexport default DotMorphButton;\n","target":"components/smoothui/dot-morph-button/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"drawer","type":"registry:ui","title":"drawer","description":"An animated Drawer component for SmoothUI that slides from any side.","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport {\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n Drawer as DrawerPrimitive,\n DrawerTitle,\n DrawerTrigger,\n} from \"@repo/shadcn-ui/components/ui/drawer\";\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\n/* ------------------------------------------------------------------ */\n/* Animation constants */\n/* ------------------------------------------------------------------ */\n\nconst BACKDROP_DURATION = 0.2;\nconst STAGGER_BASE_DELAY = 0.12;\nconst STAGGER_CHILD_DELAY = 0.05;\n\n/* ------------------------------------------------------------------ */\n/* Types */\n/* ------------------------------------------------------------------ */\n\nexport type DrawerSide = \"top\" | \"right\" | \"bottom\" | \"left\";\n\nexport interface DrawerProps {\n /** Drawer content */\n children?: React.ReactNode;\n /** Additional CSS class names */\n className?: string;\n /** Description displayed below the title */\n description?: string;\n /** Footer content */\n footer?: React.ReactNode;\n /** Callback when the open state changes */\n onOpenChange?: (open: boolean) => void;\n /** Whether the drawer is open */\n open?: boolean;\n /** The side from which the drawer opens */\n side?: DrawerSide;\n /** Title displayed in the drawer header */\n title?: string;\n /** Trigger element that opens the drawer */\n trigger?: React.ReactNode;\n}\n\n/* ------------------------------------------------------------------ */\n/* Stagger child — animates content items in sequence after open */\n/* ------------------------------------------------------------------ */\n\nconst StaggerChild = ({\n children,\n index,\n shouldReduceMotion,\n}: {\n children: React.ReactNode;\n index: number;\n shouldReduceMotion: boolean | null;\n}) => (\n \n {children}\n \n);\n\n/* ------------------------------------------------------------------ */\n/* Animated handle bar with glow pulse */\n/* ------------------------------------------------------------------ */\n\nconst AnimatedHandle = ({\n shouldReduceMotion,\n}: {\n shouldReduceMotion: boolean | null;\n}) => (\n \n);\n\n/* ------------------------------------------------------------------ */\n/* Drawer */\n/* ------------------------------------------------------------------ */\n\nexport default function Drawer({\n open,\n onOpenChange,\n side = \"bottom\",\n title,\n description,\n className,\n children,\n trigger,\n footer,\n}: DrawerProps) {\n const shouldReduceMotion = useReducedMotion();\n const [isAnimatingOut, setIsAnimatingOut] = useState(false);\n const prevOpenRef = useRef(false);\n\n useEffect(() => {\n // When going from open -> closed, we need animation-out time\n if (prevOpenRef.current && !open) {\n setIsAnimatingOut(true);\n }\n prevOpenRef.current = !!open;\n }, [open]);\n\n const handleExitComplete = useCallback(() => {\n setIsAnimatingOut(false);\n }, []);\n\n // Keep vaul's drawer open during exit animation so the portal stays mounted\n const vaulOpen = open || isAnimatingOut;\n\n return (\n {\n if (!next && isAnimatingOut) {\n return; // Ignore vaul's close during our exit animation\n }\n onOpenChange?.(next);\n }}\n open={vaulOpen}\n >\n {trigger && {trigger}}\n\n {/*\n We render DrawerContent so vaul's drag gestures still work, but we\n layer motion.div overlays on top for the visual polish (backdrop blur,\n spring slide-in, content stagger, handle pulse).\n */}\n [class*='h-2'][class*='rounded-full']]:hidden\",\n className\n )}\n >\n {/* Animated handle for bottom drawers */}\n {side === \"bottom\" && (\n \n )}\n\n \n {open && (\n \n {/* Staggered header */}\n {(title || description) && (\n \n \n {title && {title}}\n {description && (\n {description}\n )}\n \n \n )}\n\n {/* Staggered body */}\n {children && (\n \n
{children}
\n \n )}\n\n {/* Staggered footer */}\n {footer && (\n \n {footer}\n \n )}\n \n )}\n \n \n \n );\n}\n\n/* ------------------------------------------------------------------ */\n/* Re-exports */\n/* ------------------------------------------------------------------ */\n\nexport {\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n};\n","target":"components/smoothui/drawer/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"dropdown-menu","type":"registry:ui","title":"dropdown-menu","description":"An animated Dropdown Menu component for SmoothUI with spring animations, nested submenus, and keyboard navigation.","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport {\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenu as DropdownMenuRoot,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@repo/shadcn-ui/components/ui/dropdown-menu\";\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport { SPRING_DEFAULT } from \"../../lib/animation\";\n\nexport interface DropdownMenuProps {\n /** Alignment of the dropdown relative to the trigger */\n align?: \"start\" | \"center\" | \"end\";\n /** The trigger element that opens the menu */\n children: React.ReactNode;\n /** Optional CSS class for the content container */\n className?: string;\n /** Menu items to render */\n items: DropdownMenuItemConfig[];\n /** Callback when open state changes */\n onOpenChange?: (open: boolean) => void;\n /** Controlled open state */\n open?: boolean;\n /** Side offset for the dropdown content */\n sideOffset?: number;\n}\n\nexport interface DropdownMenuItemConfig {\n /** Nested submenu items */\n children?: DropdownMenuItemConfig[];\n /** Whether the item is disabled */\n disabled?: boolean;\n /** Renders a group label instead of an item */\n groupLabel?: string;\n /** Optional icon to display before the label */\n icon?: React.ReactNode;\n /** Unique key for the item */\n key: string;\n /** Display label */\n label: string;\n /** Callback when item is selected */\n onSelect?: () => void;\n /** Renders a separator instead of an item */\n separator?: boolean;\n /** Optional keyboard shortcut text to display */\n shortcut?: string;\n /** Destructive variant styling */\n variant?: \"default\" | \"destructive\";\n}\n\nexport default function DropdownMenu({\n children,\n items,\n className,\n open,\n onOpenChange,\n sideOffset = 4,\n align = \"start\",\n}: DropdownMenuProps) {\n const shouldReduceMotion = useReducedMotion();\n const [isOpen, setIsOpen] = useState(false);\n\n const controlledOpen = open ?? isOpen;\n const handleOpenChange = (value: boolean) => {\n setIsOpen(value);\n onOpenChange?.(value);\n };\n\n const renderItem = (item: DropdownMenuItemConfig, index: number) => {\n if (item.separator) {\n return ;\n }\n\n if (item.groupLabel) {\n return (\n {item.groupLabel}\n );\n }\n\n if (item.children && item.children.length > 0) {\n return (\n \n \n {item.icon && {item.icon}}\n {item.label}\n \n \n {item.children.map((child, childIndex) =>\n renderItem(child, childIndex)\n )}\n \n \n );\n }\n\n return (\n \n \n {item.icon && {item.icon}}\n {item.label}\n {item.shortcut && (\n {item.shortcut}\n )}\n \n \n );\n };\n\n return (\n \n {children}\n \n \n \n {items.map((item, index) => renderItem(item, index))}\n \n \n \n \n );\n}\n","target":"components/smoothui/dropdown-menu/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"dynamic-island","type":"registry:ui","title":"dynamic-island","description":"A DynamicIsland component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion","lucide-react"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport {\n Bell,\n CloudLightning,\n Music2,\n Pause,\n Phone,\n Play,\n SkipBack,\n SkipForward,\n Thermometer,\n Timer as TimerIcon,\n} from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { type ReactNode, useMemo, useState } from \"react\";\n\nconst BOUNCE_VARIANTS = {\n idle: 0.5,\n \"ring-idle\": 0.5,\n \"timer-ring\": 0.35,\n \"ring-timer\": 0.35,\n \"timer-idle\": 0.3,\n \"idle-timer\": 0.3,\n \"idle-ring\": 0.5,\n} as const;\n\nconst DEFAULT_BOUNCE = 0.5;\nconst TIMER_INTERVAL_MS = 1000;\n\n// Idle Component with Weather\nconst DefaultIdle = () => {\n const [showTemp, setShowTemp] = useState(false);\n\n return (\n setShowTemp(false)}\n onHoverStart={() => setShowTemp(true)}\n >\n \n \n \n \n \n\n \n {showTemp && (\n \n \n \n 12°C\n \n \n )}\n \n \n );\n};\n\n// Ring Component\nconst DefaultRing = () => (\n
\n \n
\n

\n Incoming Call\n

\n

\n Guillermo Rauch\n

\n
\n
\n
\n);\n\n// Timer Component\nconst DefaultTimer = () => {\n const [time, setTime] = useState(60);\n\n useMemo(() => {\n const timer = setInterval(() => {\n setTime((t) => (t > 0 ? t - 1 : 0));\n }, TIMER_INTERVAL_MS);\n return () => clearInterval(timer);\n }, []);\n\n return (\n
\n \n
\n

\n {time}s remaining\n

\n
\n
\n \n
\n
\n );\n};\n\n// Notification Component\nconst Notification = () => (\n
\n \n
\n

\n New Message\n

\n

\n You have a new notification!\n

\n
\n \n 1\n \n
\n);\n\n// Music Player Component\nconst MusicPlayer = () => {\n const [playing, setPlaying] = useState(true);\n return (\n
\n \n
\n

\n Lofi Chill Beats\n

\n

\n DJ Smooth\n

\n
\n setPlaying(false)}\n type=\"button\"\n >\n \n \n setPlaying((p) => !p)}\n type=\"button\"\n >\n {playing ? (\n \n ) : (\n \n )}\n \n setPlaying(true)}\n type=\"button\"\n >\n \n \n
\n );\n};\n\ntype View = \"idle\" | \"ring\" | \"timer\" | \"notification\" | \"music\";\n\nexport interface DynamicIslandProps {\n className?: string;\n idleContent?: ReactNode;\n onViewChange?: (view: View) => void;\n ringContent?: ReactNode;\n timerContent?: ReactNode;\n view?: View;\n}\n\nexport default function DynamicIsland({\n view: controlledView,\n onViewChange,\n idleContent,\n ringContent,\n timerContent,\n className = \"\",\n}: DynamicIslandProps) {\n const [internalView, setInternalView] = useState(\"idle\");\n const [variantKey, setVariantKey] = useState(\"idle\");\n const shouldReduceMotion = useReducedMotion();\n\n const view = controlledView ?? internalView;\n\n const content = useMemo(() => {\n switch (view) {\n case \"ring\":\n return ringContent ?? ;\n case \"timer\":\n return timerContent ?? ;\n case \"notification\":\n return ;\n case \"music\":\n return ;\n default:\n return idleContent ?? ;\n }\n }, [view, idleContent, ringContent, timerContent]);\n\n const handleViewChange = (newView: View) => {\n if (view === newView) {\n return;\n }\n setVariantKey(`${view}-${newView}`);\n if (onViewChange) {\n onViewChange(newView);\n } else {\n setInternalView(newView);\n }\n };\n\n return (\n
\n
\n \n \n {content}\n \n \n\n
\n {[\n { key: \"idle\", icon: },\n { key: \"ring\", icon: },\n { key: \"timer\", icon: },\n { key: \"notification\", icon: },\n { key: \"music\", icon: },\n ].map(({ key, icon }) => (\n {\n if (view !== key) {\n setVariantKey(`${view}-${key}`);\n handleViewChange(key as View);\n }\n }}\n type=\"button\"\n >\n {icon}\n \n ))}\n
\n
\n
\n );\n}\n","target":"components/smoothui/dynamic-island/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"expandable-cards","type":"registry:ui","title":"expandable-cards","description":"A ExpandableCards component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion","lucide-react"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { Play } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nconst _AVATAR_SIZE = 96;\n// ease-out-quint for entering/exiting elements\nconst EASE_OUT_QUINT = [0.23, 1, 0.32, 1] as const;\n\nexport interface Card {\n author?: {\n name: string;\n role: string;\n image: string;\n };\n content: string;\n id: number;\n image: string;\n title: string;\n}\n\nexport interface ExpandableCardsProps {\n cardClassName?: string;\n cards: Card[];\n className?: string;\n onSelect?: (id: number | null) => void;\n selectedCard?: number | null;\n}\n\nexport default function ExpandableCards({\n cards,\n selectedCard: controlledSelected,\n onSelect,\n className = \"\",\n cardClassName = \"\",\n}: ExpandableCardsProps) {\n const [internalSelected, setInternalSelected] = useState(null);\n const scrollRef = useRef(null);\n const shouldReduceMotion = useReducedMotion();\n\n const selectedCard =\n controlledSelected === undefined ? internalSelected : controlledSelected;\n\n useEffect(() => {\n if (scrollRef.current) {\n const scrollWidth = scrollRef.current.scrollWidth;\n const clientWidth = scrollRef.current.clientWidth;\n scrollRef.current.scrollLeft = (scrollWidth - clientWidth) / 2;\n }\n }, []);\n\n const handleCardClick = (id: number) => {\n if (selectedCard === id) {\n if (onSelect) {\n onSelect(null);\n } else {\n setInternalSelected(null);\n }\n } else {\n if (onSelect) {\n onSelect(id);\n } else {\n setInternalSelected(id);\n }\n // Center the clicked card in view\n const cardElement = document.querySelector(`[data-card-id=\"${id}\"]`);\n if (cardElement) {\n cardElement.scrollIntoView({\n behavior: \"smooth\",\n block: \"nearest\",\n inline: \"center\",\n });\n }\n }\n };\n\n return (\n \n \n {cards.map((card) => (\n handleCardClick(card.id)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n handleCardClick(card.id);\n }\n }}\n role=\"button\"\n style={{\n scrollSnapAlign: \"start\",\n }}\n tabIndex={0}\n transition={\n shouldReduceMotion\n ? { duration: 0 }\n : {\n duration: 0.25,\n ease: EASE_OUT_QUINT,\n }\n }\n >\n
\n \n
\n
\n

{card.title}

\n
\n {\n e.stopPropagation();\n // Handle play action\n }}\n type=\"button\"\n >\n \n \n Play video\n
\n
\n
\n \n {selectedCard === card.id && (\n \n \n

\n {card.content}\n

\n {card.author && (\n
\n
\n \n
\n
\n

\n {card.author.name}\n

\n

\n {card.author.role}\n

\n
\n
\n )}\n \n \n )}\n \n \n ))}\n
\n
\n );\n}\n","target":"components/smoothui/expandable-cards/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"exposure-slider","type":"registry:ui","title":"exposure-slider","description":"iOS-style exposure slider with draggable ticker and progress ring","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport {\n type MotionValue,\n motion,\n useMotionValue,\n useReducedMotion,\n useSpring,\n useTransform,\n} from \"motion/react\";\nimport { useCallback, useRef } from \"react\";\n\nexport interface ExposureSliderProps {\n /** Accent color for the active notch and progress ring (CSS color value) */\n accentColor?: string;\n /** Additional CSS classes */\n className?: string;\n /** Initial value */\n defaultValue?: number;\n /** Maximum value */\n max?: number;\n /** Minimum value */\n min?: number;\n /** Callback fired when the value changes */\n onChange?: (value: number) => void;\n /** Show the circular progress indicator with the current value */\n showIndicator?: boolean;\n /** Step size between values */\n step?: number;\n}\n\nconst NOTCH_WIDTH = 13; // px per notch (3px notch + 10px gap)\nconst SPRING_CONFIG = { stiffness: 300, damping: 30, mass: 0.5 };\n\nconst DEFAULT_ACCENT = \"var(--color-brand, oklch(0.65 0.25 12))\";\n\nconst ExposureSlider = ({\n min = -20,\n max = 20,\n step = 1,\n defaultValue = 0,\n onChange,\n showIndicator = true,\n accentColor,\n className,\n}: ExposureSliderProps) => {\n const shouldReduceMotion = useReducedMotion();\n const containerRef = useRef(null);\n const isDragging = useRef(false);\n\n const count = Math.floor((max - min) / step) + 1;\n const centerIndex = Math.floor((defaultValue - min) / step);\n\n // Raw drag offset and spring-smoothed version\n const rawX = useMotionValue(0);\n const x = shouldReduceMotion ? rawX : useSpring(rawX, SPRING_CONFIG);\n\n // Current value derived from offset\n const currentValue = useTransform(x, (latest) => {\n const indexOffset = Math.round(-latest / NOTCH_WIDTH);\n const val = Math.max(\n min,\n Math.min(max, (centerIndex + indexOffset) * step + min)\n );\n return val;\n });\n\n // Track value for circle and display\n const displayValue = useTransform(currentValue, (v) => Math.round(v));\n const normalizedValue = useTransform(currentValue, [min, max], [-1, 1]);\n\n const snapToNearest = useCallback(() => {\n const current = rawX.get();\n const snapped = Math.round(current / NOTCH_WIDTH) * NOTCH_WIDTH;\n rawX.set(snapped);\n }, [rawX]);\n\n const handlePointerDown = useCallback(\n (e: React.PointerEvent) => {\n isDragging.current = true;\n const startX = e.clientX;\n const startOffset = rawX.get();\n\n const handleMove = (moveEvent: PointerEvent) => {\n const delta = moveEvent.clientX - startX;\n const newOffset = startOffset + delta;\n // Clamp to bounds\n const maxOffset = (count - 1 - centerIndex) * NOTCH_WIDTH;\n const minOffset = -centerIndex * NOTCH_WIDTH;\n rawX.set(Math.max(-maxOffset, Math.min(-minOffset, newOffset)));\n\n // Fire onChange\n const indexOffset = Math.round(-rawX.get() / NOTCH_WIDTH);\n const val = Math.max(\n min,\n Math.min(max, (centerIndex + indexOffset) * step + min)\n );\n onChange?.(Math.round(val));\n };\n\n const handleUp = () => {\n isDragging.current = false;\n snapToNearest();\n // Fire final onChange\n const indexOffset = Math.round(-rawX.get() / NOTCH_WIDTH);\n const val = Math.max(\n min,\n Math.min(max, (centerIndex + indexOffset) * step + min)\n );\n onChange?.(Math.round(val));\n window.removeEventListener(\"pointermove\", handleMove);\n window.removeEventListener(\"pointerup\", handleUp);\n };\n\n window.addEventListener(\"pointermove\", handleMove);\n window.addEventListener(\"pointerup\", handleUp);\n },\n [rawX, centerIndex, count, min, max, step, onChange, snapToNearest]\n );\n\n const items = Array.from({ length: count }, (_, i) => i);\n\n return (\n \n {/* Progress circle */}\n {showIndicator && (\n \n )}\n\n {/* Ticker slider */}\n \n \n \n {items.map((i) => (\n \n ))}\n \n \n \n \n );\n};\n\n/** Individual notch mark in the ticker */\nconst Notch = ({\n index,\n centerIndex,\n x,\n}: {\n index: number;\n centerIndex: number;\n x: MotionValue;\n}) => {\n // Distance from center in notch units\n const distance = useTransform(x, (latest) => {\n const currentCenter = centerIndex + -latest / NOTCH_WIDTH;\n return Math.abs(index - currentCenter);\n });\n\n const opacity = useTransform(distance, [0, 1, 3], [1, 0.6, 0.3]);\n const clipTop = useTransform(distance, [0, 1, 2], [0, 30, 50]);\n const clipPath = useTransform(clipTop, (v) => `inset(${v}% 0px 0px)`);\n\n const isCenter = useTransform(distance, (d) => d < 0.5);\n const bg = useTransform(isCenter, (center) =>\n center ? \"var(--es-accent)\" : \"currentColor\"\n );\n\n return (\n \n
\n \n
\n \n );\n};\n\n/** SVG progress ring showing positive/negative value */\nconst ProgressCircle = ({\n normalizedValue,\n displayValue,\n}: {\n normalizedValue: MotionValue;\n displayValue: MotionValue;\n}) => {\n // Positive arc (right side, 0 to 1)\n const positiveDash = useTransform(normalizedValue, (v) =>\n v > 0 ? `${v} ${1 - v}` : \"0 1\"\n );\n\n // Negative arc (left side, mirrored)\n const negativeDash = useTransform(normalizedValue, (v) =>\n v < 0 ? `${-v} ${1 + v}` : \"0 1\"\n );\n\n // Color: accent when non-zero, foreground when zero\n const color = useTransform(normalizedValue, (v) =>\n Math.abs(v) > 0.01 ? \"var(--es-accent)\" : \"currentColor\"\n );\n\n return (\n
\n \n {/* Background ring */}\n \n {/* Positive indicator */}\n \n {/* Negative indicator */}\n \n \n \n {displayValue}\n \n
\n );\n};\n\nexport default ExposureSlider;\n","target":"components/smoothui/exposure-slider/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"figma-comment","type":"registry:ui","title":"figma-comment","description":"A FigmaComment component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@repo/shadcn-ui/components/ui/avatar\";\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { getImageKitUrl } from \"@smoothui/data\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useClickOutside } from \"./use-click-outside\";\n\nconst CLOSED_SIZE = 32;\nconst AVATAR_CLOSED_LEFT = 4;\nconst AVATAR_CLOSED_TOP = 4;\nconst AVATAR_OPEN_LEFT = 12;\nconst AVATAR_OPEN_TOP = 12;\nconst CONTENT_DELAY = 0.15;\nconst INITIAL_BLUR_PX = 6;\nconst EXIT_BLUR_PX = 3;\nconst MEASURE_DELAY_SHORT = 100;\nconst MEASURE_DELAY_LONG = 500;\nconst CONTAINER_CLOSE_DELAY = 0.08;\nconst _BLUR_DURATION = 0.4;\nconst BLUR_EASE_X1 = 0.22;\nconst BLUR_EASE_Y1 = 1;\nconst BLUR_EASE_X2 = 0.36;\nconst BLUR_EASE_Y2 = 1;\nconst BLUR_EASE: [number, number, number, number] = [\n BLUR_EASE_X1,\n BLUR_EASE_Y1,\n BLUR_EASE_X2,\n BLUR_EASE_Y2,\n];\n\nexport interface FigmaCommentProps {\n authorName?: string;\n avatarAlt?: string;\n avatarUrl?: string;\n className?: string;\n message?: string;\n onOpenChange?: (isOpen: boolean) => void;\n timestamp?: string;\n width?: number;\n}\n\nexport default function FigmaComment({\n avatarUrl = getImageKitUrl(\n \"https://ik.imagekit.io/16u211libb/avatar-educalvolpz.jpeg?updatedAt=1765524159631\",\n {\n width: 48,\n height: 48,\n quality: 85,\n format: \"auto\",\n }\n ),\n avatarAlt = \"Avatar\",\n className,\n authorName = \"Edu Calvo\",\n timestamp = \"Just now\",\n message = \"What happens if we adjust this to handle a light and dark mode? I'm not sure if we're ready to handle...\",\n width = 180,\n onOpenChange,\n}: FigmaCommentProps) {\n const [isOpen, setIsOpen] = useState(false);\n const contentRef = useRef(null);\n const containerRef = useRef(null);\n const [contentHeight, setContentHeight] = useState(CLOSED_SIZE);\n const shouldReduceMotion = useReducedMotion();\n\n // Close comment when clicking outside\n useClickOutside(containerRef, () => {\n if (isOpen) {\n setIsOpen(false);\n }\n });\n\n // Notify parent of open state changes\n useEffect(() => {\n onOpenChange?.(isOpen);\n }, [isOpen, onOpenChange]);\n\n // Measure content height when component mounts or message changes\n useEffect(() => {\n const measureHeight = () => {\n if (contentRef.current) {\n const innerDiv = contentRef.current.firstElementChild as HTMLElement;\n if (innerDiv) {\n const height = innerDiv.scrollHeight;\n if (height > 0) {\n setContentHeight(height);\n }\n }\n }\n };\n\n // Use setTimeout to ensure DOM is fully rendered\n const timeoutId = setTimeout(measureHeight, MEASURE_DELAY_SHORT);\n const timeoutId2 = setTimeout(measureHeight, MEASURE_DELAY_LONG);\n return () => {\n clearTimeout(timeoutId);\n clearTimeout(timeoutId2);\n };\n }, []);\n\n const handleToggle = () => {\n setIsOpen((prev) => !prev);\n };\n\n return (\n
\n \n {/* Avatar - animates position */}\n \n \n \n {authorName.charAt(0)}\n \n \n\n {/* Content - always rendered but hidden when closed for measurement */}\n \n
\n {/* Attribution */}\n
\n

\n {authorName}\n

\n

\n {timestamp}\n

\n
\n {/* Message */}\n

\n {message}\n

\n
\n
\n\n {/* Content - visible when open */}\n \n {isOpen && (\n ({\n opacity: {\n duration: 0.25,\n ease: BLUR_EASE,\n delay: isExiting ? 0 : CONTENT_DELAY,\n },\n filter: {\n duration: 0.25,\n ease: BLUR_EASE,\n delay: isExiting ? 0 : CONTENT_DELAY,\n },\n })) as import(\"motion/react\").Transition\n }\n >\n {/* Attribution */}\n
\n

\n {authorName}\n

\n

\n {timestamp}\n

\n
\n {/* Message */}\n

\n {message}\n

\n \n )}\n \n \n \n );\n}\n","target":"components/smoothui/figma-comment/index.tsx"},{"type":"registry:ui","path":"use-click-outside.tsx","content":"\"use client\";\n\nimport { type RefObject, useEffect } from \"react\";\n\ntype EventType =\n | \"mousedown\"\n | \"mouseup\"\n | \"touchstart\"\n | \"touchend\"\n | \"focusin\"\n | \"focusout\";\n\nexport function useClickOutside(\n ref: RefObject | RefObject[],\n handler: (event: Event) => void,\n eventType: EventType = \"mousedown\"\n): void {\n useEffect(() => {\n function callback(event: Event) {\n const target = event.target as Node;\n\n // Do nothing if the target is not connected element with document\n if (!target?.isConnected) {\n return;\n }\n\n const isOutside = Array.isArray(ref)\n ? ref\n .filter((r) => Boolean(r.current))\n .every((r) => r.current && !r.current.contains(target))\n : ref.current && !ref.current.contains(target);\n\n if (isOutside) {\n handler(event);\n }\n }\n\n window.addEventListener(eventType, callback);\n\n return () => {\n window.removeEventListener(eventType, callback);\n };\n }, [ref, handler, eventType]);\n}\n","target":"components/smoothui/figma-comment/use-click-outside.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"form","type":"registry:ui","title":"form","description":"A lightweight, composable Form component with animated error messages and full accessibility support.","author":"Eduardo Calvo ","dependencies":["lucide-react","motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { Check } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport type React from \"react\";\nimport {\n cloneElement,\n createContext,\n useCallback,\n useContext,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport {\n DURATION_INSTANT,\n SPRING_DEFAULT,\n SPRING_SNAPPY,\n} from \"../../lib/animation\";\n\n// ---------------------------------------------------------------------------\n// Constants\n// ---------------------------------------------------------------------------\n\nconst STAGGER_DELAY = 0.04;\nconst SHAKE_KEYFRAMES = [0, -6, 5, -4, 3, -1, 0];\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport type FormErrors = Record;\n\nexport interface FormProps extends React.ComponentProps<\"form\"> {\n /** Form contents */\n children: React.ReactNode;\n /** Optional CSS class */\n className?: string;\n /** External errors object (e.g. from react-hook-form's `formState.errors`) */\n errors?: FormErrors;\n /** Callback invoked on native form submit with current errors map */\n onFormSubmit?: (e: React.FormEvent) => void;\n}\n\nexport interface FormFieldProps {\n /** Field contents (label, input, message) */\n children: React.ReactNode;\n /** Optional CSS class for the field wrapper */\n className?: string;\n /** Unique field name — used to look up errors */\n name: string;\n}\n\nexport interface FormLabelProps extends React.ComponentProps<\"label\"> {\n /** Label text */\n children: React.ReactNode;\n /** Optional CSS class */\n className?: string;\n}\n\nexport interface FormMessageProps {\n /** Override the error message (otherwise pulled from FormField context) */\n children?: React.ReactNode;\n /** Optional CSS class */\n className?: string;\n}\n\nexport interface FormDescriptionProps extends React.ComponentProps<\"p\"> {\n /** Description text */\n children: React.ReactNode;\n /** Optional CSS class */\n className?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\ninterface FormContextValue {\n errors: FormErrors;\n prevErrors: FormErrors;\n submitCount: number;\n}\n\ninterface FormFieldContextValue {\n error: string | undefined;\n fieldIndex: number;\n formDescriptionId: string;\n formItemId: string;\n formMessageId: string;\n id: string;\n name: string;\n prevError: string | undefined;\n submitCount: number;\n}\n\nconst FormContext = createContext({\n errors: {},\n submitCount: 0,\n prevErrors: {},\n});\nconst FormFieldContext = createContext(null);\n\nconst useFormCtx = () => useContext(FormContext);\n\nconst useFormFieldCtx = () => {\n const ctx = useContext(FormFieldContext);\n if (!ctx) {\n throw new Error(\"FormLabel / FormMessage must be used inside \");\n }\n return ctx;\n};\n\n// ---------------------------------------------------------------------------\n// Form\n// ---------------------------------------------------------------------------\n\nexport default function Form({\n errors = {},\n onFormSubmit,\n className,\n children,\n ...props\n}: FormProps) {\n const [submitCount, setSubmitCount] = useState(0);\n const prevErrorsRef = useRef({});\n const [prevErrors, setPrevErrors] = useState({});\n\n const ctxValue = useMemo(\n () => ({ errors, submitCount, prevErrors }),\n [errors, submitCount, prevErrors]\n );\n\n const handleSubmit = useCallback(\n (e: React.FormEvent) => {\n setPrevErrors(prevErrorsRef.current);\n prevErrorsRef.current = errors;\n setSubmitCount((c) => c + 1);\n if (onFormSubmit) {\n onFormSubmit(e);\n }\n },\n [onFormSubmit, errors]\n );\n\n return (\n \n \n {children}\n \n \n );\n}\n\n// ---------------------------------------------------------------------------\n// FormField — staggered entrance + validation shake\n// ---------------------------------------------------------------------------\n\nlet fieldCounter = 0;\n\nexport function FormField({ name, className, children }: FormFieldProps) {\n const { errors, submitCount, prevErrors } = useFormCtx();\n const id = useId();\n const error = errors[name];\n const prevError = prevErrors[name];\n\n // Stable field index for stagger animation\n const fieldIndexRef = useRef(null);\n if (fieldIndexRef.current === null) {\n fieldIndexRef.current = fieldCounter;\n fieldCounter += 1;\n }\n\n // Reset counter on unmount of the first field (index 0)\n useEffect(\n () => () => {\n if (fieldIndexRef.current === 0) {\n fieldCounter = 0;\n }\n },\n []\n );\n\n const ctxValue = useMemo(\n () => ({\n name,\n id,\n error,\n formItemId: `${id}-form-item`,\n formDescriptionId: `${id}-form-item-description`,\n formMessageId: `${id}-form-item-message`,\n fieldIndex: fieldIndexRef.current ?? 0,\n submitCount,\n prevError,\n }),\n [name, id, error, submitCount, prevError]\n );\n\n return (\n \n {children}\n \n );\n}\n\n/** Inner component that can consume FormFieldContext */\nfunction FormFieldInner({\n className,\n children,\n}: {\n className?: string;\n children: React.ReactNode;\n}) {\n const shouldReduceMotion = useReducedMotion();\n const { error, fieldIndex, submitCount, prevError } = useFormFieldCtx();\n\n // Shake when a new error appears on submit\n const shouldShake = error && submitCount > 0;\n const [shakeKey, setShakeKey] = useState(0);\n\n useEffect(() => {\n if (shouldShake) {\n setShakeKey((k) => k + 1);\n }\n }, [shouldShake, submitCount]);\n\n return (\n \n \n {children}\n \n \n );\n}\n\n// ---------------------------------------------------------------------------\n// FormLabel\n// ---------------------------------------------------------------------------\n\nexport function FormLabel({ className, children, ...props }: FormLabelProps) {\n const { formItemId, error } = useFormFieldCtx();\n\n return (\n \n {children}\n \n );\n}\n\n// ---------------------------------------------------------------------------\n// FormControl — renders a wrapper with animated focus ring\n// ---------------------------------------------------------------------------\n\nexport function FormControl({\n children,\n className,\n}: {\n children: React.ReactNode;\n className?: string;\n}) {\n const shouldReduceMotion = useReducedMotion();\n const { formItemId, formDescriptionId, formMessageId, error } =\n useFormFieldCtx();\n const [isFocused, setIsFocused] = useState(false);\n\n return (\n setIsFocused(false)}\n onFocus={() => setIsFocused(true)}\n transition={shouldReduceMotion ? DURATION_INSTANT : SPRING_SNAPPY}\n >\n {cloneChildWithA11y(children, {\n id: formItemId,\n \"aria-describedby\": error\n ? `${formDescriptionId} ${formMessageId}`\n : formDescriptionId,\n \"aria-invalid\": error ? true : undefined,\n })}\n \n );\n}\n\nfunction cloneChildWithA11y(\n children: React.ReactNode,\n a11yProps: Record\n): React.ReactNode {\n const child = Array.isArray(children) ? children[0] : children;\n if (child && typeof child === \"object\" && \"type\" in child) {\n const element = child as React.ReactElement>;\n // biome-ignore lint/suspicious/noExplicitAny: cloneElement requires flexible typing\n return cloneElement(element as any, a11yProps);\n }\n return children;\n}\n\n// ---------------------------------------------------------------------------\n// FormDescription\n// ---------------------------------------------------------------------------\n\nexport function FormDescription({\n className,\n children,\n ...props\n}: FormDescriptionProps) {\n const { formDescriptionId } = useFormFieldCtx();\n\n return (\n \n {children}\n

\n );\n}\n\n// ---------------------------------------------------------------------------\n// FormMessage — animated error message with success state\n// ---------------------------------------------------------------------------\n\nexport function FormMessage({ className, children }: FormMessageProps) {\n const shouldReduceMotion = useReducedMotion();\n const { error, formMessageId, submitCount, prevError } = useFormFieldCtx();\n\n const body = children ?? error;\n\n // Show success checkmark when error was just cleared after a submit\n const wasError = prevError && !error && submitCount > 0;\n\n return (\n
\n \n {body ? (\n \n {body}\n \n ) : wasError ? (\n \n \n \n \n Looks good\n \n ) : null}\n \n
\n );\n}\n","target":"components/smoothui/form/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"github-stars-animation","type":"registry:ui","title":"github-stars-animation","description":"A GitHubStarsAnimation component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion","lucide-react"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { Star } from \"lucide-react\";\nimport { motion, useReducedMotion, useSpring } from \"motion/react\";\nimport { useEffect, useState } from \"react\";\n\nconst TRANSITION_DURATION = 0.3;\nconst EASE_OUT_CUBIC = [0.215, 0.61, 0.355, 1] as const;\nconst COUNTDOWN_DURATION = 2000;\nconst AVATAR_COUNT = 5;\nconst STAGGER_DELAY = 0.05;\n\nexport interface Stargazer {\n avatar_url: string;\n html_url: string;\n login: string;\n}\n\nexport interface GitHubStarsAnimationProps {\n apiEndpoint?: string;\n avatarClassName?: string;\n className?: string;\n countClassName?: string;\n maxAvatars?: number;\n owner?: string;\n repo?: string;\n showAvatars?: boolean;\n starCount?: number;\n stargazers?: Stargazer[];\n}\n\nexport default function GitHubStarsAnimation({\n owner = \"educlopez\",\n repo = \"smoothui\",\n stargazers: providedStargazers,\n starCount: providedStarCount,\n apiEndpoint,\n className = \"\",\n avatarClassName = \"\",\n countClassName = \"\",\n showAvatars = true,\n maxAvatars = AVATAR_COUNT,\n}: GitHubStarsAnimationProps) {\n const [stargazers, setStargazers] = useState(\n providedStargazers || []\n );\n const [starCount, setStarCount] = useState(providedStarCount || 0);\n const [displayCount, setDisplayCount] = useState(0);\n const [isLoading, setIsLoading] = useState(!providedStargazers);\n const [error, setError] = useState(false);\n const shouldReduceMotion = useReducedMotion();\n\n const countSpring = useSpring(0, {\n stiffness: 100,\n damping: 30,\n });\n\n // Fetch stargazers and star count\n useEffect(() => {\n if (providedStargazers && providedStarCount !== undefined) {\n setStargazers(providedStargazers);\n setStarCount(providedStarCount);\n setIsLoading(false);\n return;\n }\n\n const fetchData = async () => {\n try {\n setIsLoading(true);\n setError(false);\n\n // Try to fetch from custom API endpoint first\n if (apiEndpoint) {\n const response = await fetch(\n `${apiEndpoint}?owner=${owner}&repo=${repo}`\n );\n if (response.ok) {\n const data = await response.json();\n if (data.stargazers) {\n setStargazers(data.stargazers.slice(0, maxAvatars));\n }\n if (data.stars !== undefined) {\n setStarCount(data.stars);\n }\n setIsLoading(false);\n return;\n }\n }\n\n // Fallback to GitHub API directly (client-side)\n // Note: This has rate limits, so using a token is recommended\n const headers: HeadersInit = {\n Accept: \"application/vnd.github.v3+json\",\n };\n\n // Parallelize independent fetches to eliminate waterfall\n const [repoResponse, stargazersResponse] = await Promise.all([\n fetch(`https://api.github.com/repos/${owner}/${repo}`, { headers }),\n fetch(\n `https://api.github.com/repos/${owner}/${repo}/stargazers?per_page=${maxAvatars}`,\n { headers }\n ),\n ]);\n\n // Process repo info for star count\n if (repoResponse.ok) {\n try {\n const repoData = await repoResponse.json();\n setStarCount(repoData.stargazers_count || 0);\n } catch {\n // Silently fail for star count\n }\n }\n\n // Process stargazers\n if (stargazersResponse.ok) {\n try {\n const stargazersData =\n (await stargazersResponse.json()) as Stargazer[];\n setStargazers(stargazersData.slice(0, maxAvatars));\n } catch {\n // Silently fail for stargazers\n }\n }\n } catch {\n setError(true);\n } finally {\n setIsLoading(false);\n }\n };\n\n fetchData();\n }, [\n owner,\n repo,\n apiEndpoint,\n maxAvatars,\n providedStargazers,\n providedStarCount,\n ]);\n\n // Animate countdown\n useEffect(() => {\n if (starCount === 0 || shouldReduceMotion) {\n if (shouldReduceMotion) {\n setDisplayCount(starCount);\n countSpring.set(starCount);\n }\n return;\n }\n\n const startTime = Date.now();\n const startValue = 0;\n const endValue = starCount;\n\n const animate = () => {\n const elapsed = Date.now() - startTime;\n const progress = Math.min(elapsed / COUNTDOWN_DURATION, 1);\n\n // Ease-out function\n const eased = 1 - (1 - progress) ** 3;\n const current = Math.floor(startValue + (endValue - startValue) * eased);\n\n setDisplayCount(current);\n countSpring.set(current);\n\n if (progress < 1) {\n requestAnimationFrame(animate);\n } else {\n setDisplayCount(endValue);\n countSpring.set(endValue);\n }\n };\n\n animate();\n }, [starCount, countSpring, shouldReduceMotion]);\n\n if (isLoading) {\n return (\n \n
\n
\n
\n );\n }\n\n if (error && starCount === 0) {\n return null;\n }\n\n const visibleAvatars = stargazers.slice(0, maxAvatars);\n\n return (\n
\n {/* Avatars */}\n {showAvatars && visibleAvatars.length > 0 && (\n
\n {visibleAvatars.map((stargazer, index) => (\n 0 ? \"-8px\" : \"0\",\n }}\n target=\"_blank\"\n transition={\n shouldReduceMotion\n ? { duration: 0 }\n : {\n duration: TRANSITION_DURATION,\n delay: index * STAGGER_DELAY,\n ease: EASE_OUT_CUBIC,\n }\n }\n whileHover={shouldReduceMotion ? {} : { scale: 1.1, zIndex: 20 }}\n >\n \n \n ))}\n
\n )}\n\n {/* Star count */}\n \n \n \n {displayCount.toLocaleString()}\n \n \n {displayCount === 1 ? \"star\" : \"stars\"}\n \n \n
\n );\n}\n","target":"components/smoothui/github-stars-animation/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"glow-hover-card","type":"registry:ui","title":"glow-hover-card","description":"A GlowHoverCards component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { useReducedMotion } from \"motion/react\";\nimport {\n type CSSProperties,\n cloneElement,\n type ReactElement,\n type Ref,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nexport interface GlowHoverTheme {\n hue: number;\n lightness: number;\n saturation: number;\n}\n\nexport interface GlowHoverItem {\n element: ReactElement;\n id: string;\n theme?: GlowHoverTheme;\n}\n\nexport interface GlowHoverProps {\n className?: string;\n glowIntensity?: number;\n items: GlowHoverItem[];\n maskSize?: number;\n}\n\n// Legacy types for backward compatibility\nexport type GlowHoverCardTheme = GlowHoverTheme;\nexport type GlowHoverCardItem = GlowHoverItem;\nexport type GlowHoverCardsProps = GlowHoverProps;\n\nexport default function GlowHover({\n items,\n className = \"\",\n maskSize = 400,\n glowIntensity = 0.15,\n}: GlowHoverProps) {\n const containerRef = useRef(null);\n const overlayRef = useRef(null);\n const itemRefs = useRef<(HTMLElement | null)[]>([]);\n const overlayItemRefs = useRef<(HTMLElement | null)[]>([]);\n const [mousePosition, setMousePosition] = useState<{\n x: number;\n y: number;\n opacity: number;\n }>({ x: 0, y: 0, opacity: 0 });\n const shouldReduceMotion = useReducedMotion();\n\n useEffect(() => {\n const container = containerRef.current;\n if (!container || shouldReduceMotion) {\n return;\n }\n\n const handlePointerMove = (e: PointerEvent) => {\n const rect = container.getBoundingClientRect();\n // Use clientX/clientY for viewport coordinates, then subtract container position\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n\n setMousePosition({\n x,\n y,\n opacity: 1,\n });\n };\n\n const handlePointerLeave = () => {\n setMousePosition((prev) => ({ ...prev, opacity: 0 }));\n };\n\n container.addEventListener(\"pointermove\", handlePointerMove);\n container.addEventListener(\"pointerleave\", handlePointerLeave);\n\n return () => {\n container.removeEventListener(\"pointermove\", handlePointerMove);\n container.removeEventListener(\"pointerleave\", handlePointerLeave);\n };\n }, [shouldReduceMotion]);\n\n // Sync overlay card sizes and positions with original cards\n useEffect(() => {\n if (shouldReduceMotion || !overlayRef.current || !containerRef.current) {\n return;\n }\n\n const syncCards = () => {\n const container = containerRef.current;\n const overlay = overlayRef.current;\n if (!(container && overlay)) {\n return;\n }\n\n itemRefs.current.forEach((itemEl, index) => {\n const overlayItemEl = overlayItemRefs.current[index];\n if (!(itemEl && overlayItemEl)) {\n return;\n }\n\n const itemRect = itemEl.getBoundingClientRect();\n const containerRect = container.getBoundingClientRect();\n\n // Calculate position relative to container\n const left = itemRect.left - containerRect.left;\n const top = itemRect.top - containerRect.top;\n\n overlayItemEl.style.position = \"absolute\";\n overlayItemEl.style.left = `${left}px`;\n overlayItemEl.style.top = `${top}px`;\n overlayItemEl.style.width = `${itemRect.width}px`;\n overlayItemEl.style.height = `${itemRect.height}px`;\n });\n };\n\n const observers: ResizeObserver[] = [];\n const mutationObserver = new MutationObserver(syncCards);\n\n // Sync on resize\n for (const itemEl of itemRefs.current) {\n if (!itemEl) {\n continue;\n }\n\n const observer = new ResizeObserver(() => {\n syncCards();\n });\n\n observer.observe(itemEl);\n observers.push(observer);\n }\n\n // Sync on DOM mutations\n if (containerRef.current) {\n mutationObserver.observe(containerRef.current, {\n childList: true,\n subtree: true,\n attributes: true,\n });\n }\n\n // Initial sync\n syncCards();\n\n // Sync on scroll and resize\n window.addEventListener(\"scroll\", syncCards, { passive: true });\n window.addEventListener(\"resize\", syncCards);\n\n return () => {\n for (const observer of observers) {\n observer.disconnect();\n }\n mutationObserver.disconnect();\n window.removeEventListener(\"scroll\", syncCards);\n window.removeEventListener(\"resize\", syncCards);\n };\n }, [shouldReduceMotion]);\n\n // Apply glow effect styles to an element\n const applyGlowStyles = (\n element: ReactElement,\n theme?: GlowHoverTheme,\n isOverlay = false\n ): ReactElement => {\n if (!isOverlay) {\n return element;\n }\n\n const props = element.props as {\n style?: CSSProperties;\n className?: string;\n };\n const existingStyle = props.style || {};\n const existingClassName = props.className || \"\";\n\n let glowStyles: CSSProperties;\n\n if (theme) {\n // Use theme HSL colors\n const hsl = `${theme.hue}, ${theme.saturation}%, ${theme.lightness}%`;\n glowStyles = {\n borderColor: `hsla(${hsl}, 1)`,\n boxShadow: `0 0 0 1px inset hsl(${hsl}), 0 0 20px hsla(${hsl}, ${glowIntensity})`,\n backgroundColor: `hsla(${hsl}, ${glowIntensity})`,\n };\n } else {\n // Use brand color from CSS variable (OKLCH format supports / opacity)\n const brandColor = \"var(--color-brand)\";\n // OKLCH format: oklch(L C H / opacity)\n const brandWithOpacity = `color-mix(in oklch, ${brandColor}, transparent ${(1 - glowIntensity) * 100}%)`;\n glowStyles = {\n borderColor: brandColor,\n boxShadow: `0 0 0 1px inset ${brandColor}, 0 0 20px ${brandWithOpacity}`,\n backgroundColor: brandWithOpacity,\n };\n }\n\n // Merge with existing styles\n const mergedStyle = {\n ...existingStyle,\n ...glowStyles,\n };\n\n return cloneElement(element, {\n ...props,\n style: mergedStyle,\n className: cn(existingClassName, \"glow-overlay-item\"),\n // biome-ignore lint/suspicious/noExplicitAny: cloneElement requires flexible typing\n } as any);\n };\n\n return (\n \n {/* Original Items */}\n
\n {items.map((item, index) =>\n cloneElement(item.element, {\n key: item.id,\n ref: (el: HTMLElement | null) => {\n itemRefs.current[index] = el;\n // Preserve existing ref if any\n const elementProps = item.element.props as {\n ref?: Ref;\n };\n const existingRef = elementProps?.ref;\n if (typeof existingRef === \"function\") {\n existingRef(el);\n } else if (existingRef && typeof existingRef === \"object\") {\n (existingRef as { current: HTMLElement | null }).current = el;\n }\n },\n // biome-ignore lint/suspicious/noExplicitAny: cloneElement requires flexible typing\n } as any)\n )}\n
\n\n {/* Overlay with Glow Effect */}\n {!shouldReduceMotion && (\n \n {items.map((item, index) => {\n const glowElement = applyGlowStyles(item.element, item.theme, true);\n return cloneElement(glowElement, {\n key: item.id,\n ref: (el: HTMLElement | null) => {\n overlayItemRefs.current[index] = el;\n },\n // biome-ignore lint/suspicious/noExplicitAny: cloneElement requires flexible typing\n } as any);\n })}\n
\n )}\n \n );\n}\n\n// Legacy export for backward compatibility\nexport function GlowHoverCards(props: GlowHoverCardsProps) {\n return ;\n}\n","target":"components/smoothui/glow-hover-card/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"gooey-popover","type":"registry:ui","title":"gooey-popover","description":"A GooeyPopover component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["gsap"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport gsap from \"gsap\";\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport { useClickOutside } from \"./use-click-outside\";\n\nconst MEASURE_DELAY_SHORT = 100;\nconst MEASURE_DELAY_LONG = 500;\nconst DEFAULT_TRIGGER_SIZE = 44;\nconst DEFAULT_CONTENT_WIDTH = 240;\nconst DEFAULT_SIDE_OFFSET = 24;\nconst DEFAULT_SPEED = 0.25;\nconst GOO_STD_DEVIATION = 10;\nconst GOO_MATRIX_ALPHA_MULTIPLIER = 24;\nconst GOO_MATRIX_ALPHA_OFFSET = -10;\nconst CONTENT_BORDER_RADIUS = 18;\n\nexport type GooeyPopoverProps = {\n children: React.ReactNode;\n trigger?: React.ReactNode;\n triggerSize?: number;\n isOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n side?: \"top\" | \"bottom\";\n sideOffset?: number;\n contentWidth?: number;\n speed?: number;\n bgClassName?: string;\n contentClassName?: string;\n className?: string;\n};\n\nexport default function GooeyPopover({\n children,\n trigger,\n triggerSize = DEFAULT_TRIGGER_SIZE,\n isOpen: controlledIsOpen,\n onOpenChange,\n side = \"top\",\n sideOffset = DEFAULT_SIDE_OFFSET,\n contentWidth = DEFAULT_CONTENT_WIDTH,\n speed = DEFAULT_SPEED,\n bgClassName = \"bg-neutral-900\",\n contentClassName,\n className,\n}: GooeyPopoverProps) {\n const filterId = useId();\n const isControlled = controlledIsOpen !== undefined;\n const [internalIsOpen, setInternalIsOpen] = useState(false);\n const isOpen = isControlled ? controlledIsOpen : internalIsOpen;\n const [isVisible, setIsVisible] = useState(false);\n\n const containerRef = useRef(null);\n const measureRef = useRef(null);\n const filteredContentRef = useRef(null);\n const unfilteredContentRef = useRef(null);\n const innerContentRef = useRef(null);\n const timelineRef = useRef(null);\n const [contentHeight, setContentHeight] = useState(0);\n const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n\n useEffect(() => {\n const mq = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n setPrefersReducedMotion(mq.matches);\n const handler = (e: MediaQueryListEvent) => {\n setPrefersReducedMotion(e.matches);\n };\n mq.addEventListener(\"change\", handler);\n return () => mq.removeEventListener(\"change\", handler);\n }, []);\n\n const setIsOpen = useCallback(\n (open: boolean) => {\n if (!isControlled) {\n setInternalIsOpen(open);\n }\n onOpenChange?.(open);\n },\n [isControlled, onOpenChange]\n );\n\n const handleClose = useCallback(() => {\n if (isOpen) {\n setIsOpen(false);\n }\n }, [isOpen, setIsOpen]);\n\n useClickOutside(containerRef, handleClose);\n\n // Escape key to close\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\" && isOpen) {\n setIsOpen(false);\n }\n };\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => window.removeEventListener(\"keydown\", handleKeyDown);\n }, [isOpen, setIsOpen]);\n\n // Measure content height\n useEffect(() => {\n const measureHeight = () => {\n if (measureRef.current) {\n const height = measureRef.current.scrollHeight;\n if (height > 0) {\n setContentHeight(height);\n }\n }\n };\n\n const timeoutId = setTimeout(measureHeight, MEASURE_DELAY_SHORT);\n const timeoutId2 = setTimeout(measureHeight, MEASURE_DELAY_LONG);\n return () => {\n clearTimeout(timeoutId);\n clearTimeout(timeoutId2);\n };\n }, [children]);\n\n const triggerRadius = triggerSize / 2;\n // Position content so its edge clears the trigger with sideOffset gap\n const translateY =\n side === \"top\" ? -(contentHeight + sideOffset) : triggerSize + sideOffset;\n const contentLeft = triggerRadius - contentWidth / 2;\n\n // GSAP animations\n useEffect(() => {\n if (contentHeight === 0) {\n return;\n }\n\n // Kill any running timeline\n if (timelineRef.current) {\n timelineRef.current.kill();\n }\n\n const filteredTarget = filteredContentRef.current;\n const unfilteredTarget = unfilteredContentRef.current;\n const innerTarget = innerContentRef.current;\n\n if (!(unfilteredTarget && innerTarget)) {\n return;\n }\n\n if (prefersReducedMotion) {\n if (isOpen) {\n setIsVisible(true);\n gsap.set(unfilteredTarget, {\n width: contentWidth,\n height: contentHeight,\n borderRadius: CONTENT_BORDER_RADIUS,\n x: contentLeft,\n y: translateY,\n opacity: 1,\n });\n gsap.set(innerTarget, { opacity: 1, y: 0 });\n } else {\n gsap.set(unfilteredTarget, {\n width: triggerSize,\n height: triggerSize,\n borderRadius: triggerRadius,\n x: 0,\n y: 0,\n opacity: 0,\n });\n gsap.set(innerTarget, { opacity: 0, y: 0 });\n setIsVisible(false);\n }\n return;\n }\n\n if (isOpen) {\n setIsVisible(true);\n\n // Start both content shapes as circles at trigger position\n const startProps = {\n width: triggerSize,\n height: triggerSize,\n borderRadius: triggerRadius,\n x: 0,\n y: 0,\n opacity: 1,\n };\n if (filteredTarget) {\n gsap.set(filteredTarget, startProps);\n }\n gsap.set(unfilteredTarget, startProps);\n gsap.set(innerTarget, { opacity: 0, y: 16 });\n\n const tl = gsap.timeline();\n\n // Filtered content: morph to rectangle with borderRadius=0\n // The goo filter softens the edges naturally\n if (filteredTarget) {\n tl.to(\n filteredTarget,\n {\n width: contentWidth,\n height: contentHeight,\n borderRadius: 0,\n x: contentLeft,\n y: translateY,\n duration: speed,\n ease: \"power1.in\",\n },\n 0\n );\n }\n\n // Unfiltered content: morph to rectangle with rounded corners\n tl.to(\n unfilteredTarget,\n {\n width: contentWidth,\n height: contentHeight,\n borderRadius: CONTENT_BORDER_RADIUS,\n x: contentLeft,\n y: translateY,\n duration: speed,\n ease: \"power1.in\",\n },\n 0\n );\n\n // Content text fade in (overlapping with shape morph)\n tl.to(\n innerTarget,\n {\n opacity: 1,\n y: 0,\n duration: speed * 0.75,\n ease: \"power1.out\",\n },\n speed * 0.575\n );\n\n timelineRef.current = tl;\n } else {\n // Content text fade out first\n const tl = gsap.timeline({\n onComplete: () => {\n setIsVisible(false);\n },\n });\n\n tl.to(innerTarget, {\n opacity: 0,\n y: 8,\n duration: speed * 0.4,\n ease: \"power1.in\",\n });\n\n // Shape morph back: rectangle → circle\n const targets = [filteredTarget, unfilteredTarget].filter(Boolean);\n tl.to(\n targets,\n {\n width: triggerSize,\n height: triggerSize,\n borderRadius: triggerRadius,\n x: 0,\n y: 0,\n duration: speed,\n ease: \"power1.in\",\n },\n speed * 0.2\n );\n\n // Fade out at the end\n tl.to(\n targets,\n {\n opacity: 0,\n duration: speed * 0.3,\n ease: \"power1.in\",\n },\n `-=${speed * 0.3}`\n );\n\n timelineRef.current = tl;\n }\n\n return () => {\n if (timelineRef.current) {\n timelineRef.current.kill();\n }\n };\n }, [\n isOpen,\n contentHeight,\n contentWidth,\n triggerSize,\n triggerRadius,\n contentLeft,\n translateY,\n speed,\n prefersReducedMotion,\n ]);\n\n const defaultTriggerIcon = (\n \n \n \n \n );\n\n return (\n
\n {/* SVG goo filter definition */}\n \n \n \n \n \n \n \n \n \n\n {/* Hidden measurement div */}\n \n
{children}
\n
\n\n {/* Filtered layer: SVG goo filter creates liquid bridge between blob and content */}\n {!prefersReducedMotion && (isOpen || isVisible) && (\n \n {/* Blob: circle at trigger position — stays put while content morphs away */}\n \n\n {/* Content shape: morphs from circle to rectangle (borderRadius=0, goo softens edges) */}\n \n \n )}\n\n {/* Trigger button (z-10, sits on top of filtered blob) */}\n setIsOpen(!isOpen)}\n style={{\n width: triggerSize,\n height: triggerSize,\n }}\n type=\"button\"\n >\n {trigger ?? defaultTriggerIcon}\n \n\n {/* Unfiltered content panel (z-10, clean edges, actual text) */}\n {(isOpen || isVisible) && (\n \n \n {children}\n \n \n )}\n \n );\n}\n","target":"components/smoothui/gooey-popover/index.tsx"},{"type":"registry:ui","path":"use-click-outside.tsx","content":"\"use client\";\n\nimport { type RefObject, useEffect } from \"react\";\n\ntype EventType =\n | \"mousedown\"\n | \"mouseup\"\n | \"touchstart\"\n | \"touchend\"\n | \"focusin\"\n | \"focusout\";\n\nexport function useClickOutside(\n ref: RefObject | RefObject[],\n handler: (event: Event) => void,\n eventType: EventType = \"mousedown\"\n): void {\n useEffect(() => {\n function callback(event: Event) {\n const target = event.target as Node;\n\n // Do nothing if the target is not connected element with document\n if (!target?.isConnected) {\n return;\n }\n\n const isOutside = Array.isArray(ref)\n ? ref\n .filter((r) => Boolean(r.current))\n .every((r) => r.current && !r.current.contains(target))\n : ref.current && !ref.current.contains(target);\n\n if (isOutside) {\n handler(event);\n }\n }\n\n window.addEventListener(eventType, callback);\n\n return () => {\n window.removeEventListener(eventType, callback);\n };\n }, [ref, handler, eventType]);\n}\n","target":"components/smoothui/gooey-popover/use-click-outside.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"grid-loader","type":"registry:ui","title":"grid-loader","description":"3x3 grid-based loading animation with preset patterns","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useMemo, useState } from \"react\";\n\n// Grid matrix type: 3x3 array of 0s and 1s\nexport type GridMatrix = [\n [0 | 1, 0 | 1, 0 | 1],\n [0 | 1, 0 | 1, 0 | 1],\n [0 | 1, 0 | 1, 0 | 1],\n];\n\n// All preset pattern names\nexport type PresetPattern =\n // Solo (single cell)\n | \"solo-center\"\n | \"solo-tl\"\n | \"solo-tr\"\n | \"solo-bl\"\n | \"solo-br\"\n // Horizontal lines\n | \"line-h-top\"\n | \"line-h-mid\"\n | \"line-h-bot\"\n // Vertical lines\n | \"line-v-left\"\n | \"line-v-mid\"\n | \"line-v-right\"\n // Diagonals\n | \"line-diag-1\"\n | \"line-diag-2\"\n // Corners\n | \"corners-only\"\n | \"corners-sync\"\n | \"corners\"\n // Plus\n | \"plus-hollow\"\n | \"plus-full\"\n // L-shapes\n | \"L-tl\"\n | \"L-tr\"\n | \"L-bl\"\n | \"L-br\"\n // T-shapes\n | \"T-top\"\n | \"T-bot\"\n | \"T-left\"\n | \"T-right\"\n // Duo\n | \"duo-h\"\n | \"duo-v\"\n | \"duo-diag\"\n // Frame\n | \"frame\"\n | \"frame-sync\"\n // Sparse\n | \"sparse-1\"\n | \"sparse-2\"\n | \"sparse-3\"\n // Waves\n | \"wave-lr\"\n | \"wave-rl\"\n | \"wave-tb\"\n | \"wave-bt\"\n // Diagonal quadrants\n | \"diagonal-tl\"\n | \"diagonal-tr\"\n | \"diagonal-bl\"\n | \"diagonal-br\"\n // Ripple\n | \"ripple-out\"\n | \"ripple-in\"\n // Shapes\n | \"cross\"\n | \"x-shape\"\n | \"diamond\"\n // Stripes\n | \"stripes-h\"\n | \"stripes-v\"\n // Patterns\n | \"checkerboard\"\n | \"rows-alt\"\n // Spirals\n | \"spiral-cw\"\n | \"spiral-ccw\"\n // Snake\n | \"snake\"\n | \"snake-rev\"\n // Rain\n | \"rain\"\n | \"rain-rev\"\n // Effects\n | \"waterfall\"\n | \"breathing\"\n | \"heartbeat\"\n | \"twinkle\"\n | \"sparkle\"\n | \"chaos\"\n // Edge\n | \"edge-cw\"\n | \"border\";\n\nexport interface GridLoaderProps {\n /** Blur amount in pixels — creates a soft glow effect */\n blur?: number;\n /** Additional CSS classes */\n className?: string;\n /** Color preset or custom CSS color */\n color?: \"white\" | \"red\" | \"blue\" | \"green\" | \"amber\" | string;\n /** Gap between cells in pixels */\n gap?: number;\n /** Animation mode */\n mode?: \"pulse\" | \"sequence\" | \"stagger\";\n /** Pattern to display - preset name or custom 3x3 matrix */\n pattern?: PresetPattern | GridMatrix;\n /** Use rounded (circular) cells instead of square */\n rounded?: boolean;\n /** Array of patterns for sequence mode */\n sequence?: Array;\n /** Size preset or pixel value */\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\" | number;\n /** Animation speed */\n speed?: \"slow\" | \"normal\" | \"fast\";\n /** Disable animation and show static pattern */\n static?: boolean;\n}\n\n// Preset patterns as 3x3 matrices\nconst PATTERNS: Record = {\n // Solo (single cell)\n \"solo-center\": [\n [0, 0, 0],\n [0, 1, 0],\n [0, 0, 0],\n ],\n \"solo-tl\": [\n [1, 0, 0],\n [0, 0, 0],\n [0, 0, 0],\n ],\n \"solo-tr\": [\n [0, 0, 1],\n [0, 0, 0],\n [0, 0, 0],\n ],\n \"solo-bl\": [\n [0, 0, 0],\n [0, 0, 0],\n [1, 0, 0],\n ],\n \"solo-br\": [\n [0, 0, 0],\n [0, 0, 0],\n [0, 0, 1],\n ],\n\n // Horizontal lines\n \"line-h-top\": [\n [1, 1, 1],\n [0, 0, 0],\n [0, 0, 0],\n ],\n \"line-h-mid\": [\n [0, 0, 0],\n [1, 1, 1],\n [0, 0, 0],\n ],\n \"line-h-bot\": [\n [0, 0, 0],\n [0, 0, 0],\n [1, 1, 1],\n ],\n\n // Vertical lines\n \"line-v-left\": [\n [1, 0, 0],\n [1, 0, 0],\n [1, 0, 0],\n ],\n \"line-v-mid\": [\n [0, 1, 0],\n [0, 1, 0],\n [0, 1, 0],\n ],\n \"line-v-right\": [\n [0, 0, 1],\n [0, 0, 1],\n [0, 0, 1],\n ],\n\n // Diagonals\n \"line-diag-1\": [\n [1, 0, 0],\n [0, 1, 0],\n [0, 0, 1],\n ],\n \"line-diag-2\": [\n [0, 0, 1],\n [0, 1, 0],\n [1, 0, 0],\n ],\n\n // Corners\n \"corners-only\": [\n [1, 0, 1],\n [0, 0, 0],\n [1, 0, 1],\n ],\n \"corners-sync\": [\n [1, 0, 1],\n [0, 0, 0],\n [1, 0, 1],\n ],\n corners: [\n [1, 0, 1],\n [0, 0, 0],\n [1, 0, 1],\n ],\n\n // Plus\n \"plus-hollow\": [\n [0, 1, 0],\n [1, 0, 1],\n [0, 1, 0],\n ],\n \"plus-full\": [\n [0, 1, 0],\n [1, 1, 1],\n [0, 1, 0],\n ],\n\n // L-shapes\n \"L-tl\": [\n [1, 1, 0],\n [1, 0, 0],\n [0, 0, 0],\n ],\n \"L-tr\": [\n [0, 1, 1],\n [0, 0, 1],\n [0, 0, 0],\n ],\n \"L-bl\": [\n [0, 0, 0],\n [1, 0, 0],\n [1, 1, 0],\n ],\n \"L-br\": [\n [0, 0, 0],\n [0, 0, 1],\n [0, 1, 1],\n ],\n\n // T-shapes\n \"T-top\": [\n [1, 1, 1],\n [0, 1, 0],\n [0, 0, 0],\n ],\n \"T-bot\": [\n [0, 0, 0],\n [0, 1, 0],\n [1, 1, 1],\n ],\n \"T-left\": [\n [1, 0, 0],\n [1, 1, 0],\n [1, 0, 0],\n ],\n \"T-right\": [\n [0, 0, 1],\n [0, 1, 1],\n [0, 0, 1],\n ],\n\n // Duo (two cells)\n \"duo-h\": [\n [0, 0, 0],\n [1, 1, 0],\n [0, 0, 0],\n ],\n \"duo-v\": [\n [0, 1, 0],\n [0, 1, 0],\n [0, 0, 0],\n ],\n \"duo-diag\": [\n [1, 0, 0],\n [0, 1, 0],\n [0, 0, 0],\n ],\n\n // Frame\n frame: [\n [1, 1, 1],\n [1, 0, 1],\n [1, 1, 1],\n ],\n \"frame-sync\": [\n [1, 1, 1],\n [1, 0, 1],\n [1, 1, 1],\n ],\n\n // Sparse\n \"sparse-1\": [\n [1, 0, 0],\n [0, 0, 1],\n [0, 1, 0],\n ],\n \"sparse-2\": [\n [0, 1, 0],\n [1, 0, 0],\n [0, 0, 1],\n ],\n \"sparse-3\": [\n [0, 0, 1],\n [0, 1, 0],\n [1, 0, 0],\n ],\n\n // Waves\n \"wave-lr\": [\n [1, 1, 0],\n [1, 1, 0],\n [1, 1, 0],\n ],\n \"wave-rl\": [\n [0, 1, 1],\n [0, 1, 1],\n [0, 1, 1],\n ],\n \"wave-tb\": [\n [1, 1, 1],\n [1, 1, 1],\n [0, 0, 0],\n ],\n \"wave-bt\": [\n [0, 0, 0],\n [1, 1, 1],\n [1, 1, 1],\n ],\n\n // Diagonal quadrants\n \"diagonal-tl\": [\n [1, 1, 0],\n [1, 1, 0],\n [0, 0, 0],\n ],\n \"diagonal-tr\": [\n [0, 1, 1],\n [0, 1, 1],\n [0, 0, 0],\n ],\n \"diagonal-bl\": [\n [0, 0, 0],\n [1, 1, 0],\n [1, 1, 0],\n ],\n \"diagonal-br\": [\n [0, 0, 0],\n [0, 1, 1],\n [0, 1, 1],\n ],\n\n // Ripple\n \"ripple-out\": [\n [1, 1, 1],\n [1, 0, 1],\n [1, 1, 1],\n ],\n \"ripple-in\": [\n [0, 0, 0],\n [0, 1, 0],\n [0, 0, 0],\n ],\n\n // Shapes\n cross: [\n [0, 1, 0],\n [1, 1, 1],\n [0, 1, 0],\n ],\n \"x-shape\": [\n [1, 0, 1],\n [0, 1, 0],\n [1, 0, 1],\n ],\n diamond: [\n [0, 1, 0],\n [1, 0, 1],\n [0, 1, 0],\n ],\n\n // Stripes\n \"stripes-h\": [\n [1, 1, 1],\n [0, 0, 0],\n [1, 1, 1],\n ],\n \"stripes-v\": [\n [1, 0, 1],\n [1, 0, 1],\n [1, 0, 1],\n ],\n\n // Patterns\n checkerboard: [\n [1, 0, 1],\n [0, 1, 0],\n [1, 0, 1],\n ],\n \"rows-alt\": [\n [1, 1, 1],\n [0, 0, 0],\n [1, 1, 1],\n ],\n\n // Spirals\n \"spiral-cw\": [\n [1, 1, 1],\n [0, 0, 1],\n [0, 0, 1],\n ],\n \"spiral-ccw\": [\n [1, 1, 1],\n [1, 0, 0],\n [1, 0, 0],\n ],\n\n // Snake\n snake: [\n [1, 1, 0],\n [0, 1, 0],\n [0, 0, 0],\n ],\n \"snake-rev\": [\n [0, 0, 0],\n [0, 1, 0],\n [0, 1, 1],\n ],\n\n // Rain\n rain: [\n [0, 1, 0],\n [0, 1, 0],\n [0, 0, 0],\n ],\n \"rain-rev\": [\n [0, 0, 0],\n [0, 1, 0],\n [0, 1, 0],\n ],\n\n // Effects\n waterfall: [\n [1, 1, 0],\n [0, 0, 0],\n [0, 0, 0],\n ],\n breathing: [\n [0, 0, 0],\n [0, 1, 0],\n [0, 0, 0],\n ],\n heartbeat: [\n [0, 1, 0],\n [1, 1, 1],\n [0, 1, 0],\n ],\n twinkle: [\n [1, 0, 0],\n [0, 0, 1],\n [0, 1, 0],\n ],\n sparkle: [\n [1, 0, 1],\n [0, 1, 0],\n [1, 0, 1],\n ],\n chaos: [\n [1, 0, 1],\n [0, 1, 0],\n [1, 0, 0],\n ],\n\n // Edge\n \"edge-cw\": [\n [1, 1, 1],\n [0, 0, 0],\n [0, 0, 0],\n ],\n border: [\n [1, 1, 1],\n [1, 0, 1],\n [1, 1, 1],\n ],\n};\n\n// Color presets\nconst COLORS: Record = {\n white: \"#f5f5f4\",\n red: \"#f87171\",\n blue: \"#38bdf8\",\n green: \"#4ade80\",\n amber: \"#fbbf24\",\n};\n\n// Size presets in pixels\nconst SIZES: Record = {\n sm: 24,\n md: 32,\n lg: 48,\n xl: 64,\n};\n\n// Speed presets in milliseconds\nconst SPEEDS: Record = {\n slow: 1500,\n normal: 800,\n fast: 400,\n};\n\n// Helper to resolve pattern to GridMatrix\nconst resolvePattern = (\n pattern: PresetPattern | GridMatrix | undefined\n): GridMatrix => {\n if (!pattern) {\n return PATTERNS[\"plus-hollow\"];\n }\n if (typeof pattern === \"string\") {\n return PATTERNS[pattern] ?? PATTERNS[\"plus-hollow\"];\n }\n return pattern;\n};\n\n// Helper to resolve color\nconst resolveColor = (color: string | undefined): string => {\n if (!color) {\n return COLORS.white;\n }\n return COLORS[color] ?? color;\n};\n\n// Helper to resolve size\nconst resolveSize = (\n size: \"sm\" | \"md\" | \"lg\" | \"xl\" | number | undefined\n): number => {\n if (size === undefined) {\n return SIZES.md;\n }\n if (typeof size === \"number\") {\n return size;\n }\n return SIZES[size] ?? SIZES.md;\n};\n\n// Cell component for individual grid cells\nconst GridCell = ({\n active,\n color,\n cellSize,\n animationDelay,\n mode,\n cycleDuration,\n shouldReduceMotion,\n rounded,\n}: {\n active: boolean;\n color: string;\n cellSize: number;\n animationDelay: number;\n mode: \"pulse\" | \"sequence\" | \"stagger\";\n cycleDuration: number;\n shouldReduceMotion: boolean | null;\n rounded?: boolean;\n}) => {\n const glowSize = cellSize * 0.8;\n const borderRadius = rounded ? \"50%\" : undefined;\n\n if (!active) {\n return (\n \n );\n }\n\n // For reduced motion, show static cells\n if (shouldReduceMotion) {\n return (\n \n );\n }\n\n const pulseAnimation = {\n opacity: [0.4, 1, 0.4],\n scale: [0.95, 1, 0.95],\n };\n\n const staggerAnimation = {\n opacity: [0, 1, 1, 0],\n scale: [0.8, 1, 1, 0.8],\n };\n\n return (\n \n );\n};\n\nconst GridLoader = ({\n pattern,\n mode = \"pulse\",\n sequence,\n speed = \"normal\",\n color,\n size,\n blur,\n gap: gapProp,\n rounded,\n static: isStatic,\n className,\n}: GridLoaderProps) => {\n const shouldReduceMotion = useReducedMotion();\n const [sequenceIndex, setSequenceIndex] = useState(0);\n\n const sizeInPx = resolveSize(size);\n const gapSize = gapProp ?? 0;\n const cellSize = (sizeInPx - gapSize * 2) / 3;\n const resolvedColor = resolveColor(color);\n const cycleDuration = SPEEDS[speed] ?? SPEEDS.normal;\n const disableAnimation = isStatic || shouldReduceMotion;\n\n // Handle sequence mode\n useEffect(() => {\n if (mode !== \"sequence\" || !sequence || sequence.length === 0) {\n return;\n }\n if (disableAnimation) {\n return;\n }\n\n const interval = setInterval(() => {\n setSequenceIndex((prev) => (prev + 1) % sequence.length);\n }, cycleDuration);\n\n return () => clearInterval(interval);\n }, [mode, sequence, cycleDuration, disableAnimation]);\n\n // Determine current grid to display\n const currentGrid = useMemo(() => {\n if (mode === \"sequence\" && sequence && sequence.length > 0) {\n return resolvePattern(sequence[sequenceIndex]);\n }\n return resolvePattern(pattern);\n }, [mode, sequence, sequenceIndex, pattern]);\n\n // Flatten grid for rendering\n const cells = currentGrid.flat();\n\n // Calculate stagger delays based on active cells\n const staggerDelays = useMemo(() => {\n if (mode !== \"stagger\") {\n return cells.map(() => 0);\n }\n\n const activeCells = cells.reduce((acc, cell, idx) => {\n if (cell === 1) {\n acc.push(idx);\n }\n return acc;\n }, []);\n\n const delayPerCell = cycleDuration / 1000 / (activeCells.length + 2);\n\n return cells.map((cell, idx) => {\n if (cell === 0) {\n return 0;\n }\n const activeIndex = activeCells.indexOf(idx);\n return activeIndex * delayPerCell;\n });\n }, [cells, mode, cycleDuration]);\n\n // Generate stable keys for grid positions (0-8 in a 3x3 grid)\n const cellKeys = [\"tl\", \"tm\", \"tr\", \"ml\", \"mm\", \"mr\", \"bl\", \"bm\", \"br\"];\n\n return (\n \n {cells.map((active, idx) => (\n \n ))}\n \n );\n};\n\nexport default GridLoader;\n\n// Export patterns for advanced usage\nexport { COLORS, PATTERNS, SIZES };\n","target":"components/smoothui/grid-loader/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"image-metadata-preview","type":"registry:ui","title":"image-metadata-preview","description":"A ImageMetadataPreview component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion","lucide-react","react-use-measure"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { ChevronUp, CircleX, Share } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useState } from \"react\";\nimport useMeasure from \"react-use-measure\";\n\nexport interface ImageMetadata {\n by: string;\n created: string;\n source: string;\n updated: string;\n}\n\nexport interface ImageMetadataPreviewProps {\n alt?: string;\n description?: string;\n filename?: string;\n imageSrc: string;\n metadata: ImageMetadata;\n onShare?: () => void;\n}\n\nexport default function ImageMetadataPreview({\n imageSrc,\n alt = \"Image preview\",\n filename = \"screenshot.png\",\n description = \"No description\",\n metadata,\n onShare,\n}: ImageMetadataPreviewProps) {\n const [openInfo, setopenInfo] = useState(false);\n const [isHoverDevice, setIsHoverDevice] = useState(false);\n const [elementRef, bounds] = useMeasure();\n const shouldReduceMotion = useReducedMotion();\n\n useEffect(() => {\n const mediaQuery = window.matchMedia(\"(hover: hover) and (pointer: fine)\");\n setIsHoverDevice(mediaQuery.matches);\n\n const handleChange = (e: MediaQueryListEvent) => {\n setIsHoverDevice(e.matches);\n };\n\n mediaQuery.addEventListener(\"change\", handleChange);\n return () => mediaQuery.removeEventListener(\"change\", handleChange);\n }, []);\n\n const handleClickOpen = () => {\n setopenInfo((b) => !b);\n };\n\n const handleClickClose = () => {\n setopenInfo((b) => !b);\n };\n\n return (\n
\n \n {alt}\n \n\n
\n
\n \n \n \n \n Connect\n \n \n {openInfo ? null : (\n \n \n \n )}\n \n
\n \n {openInfo ? (\n \n
\n
\n
\n

{filename}

\n

{description}

\n
\n\n {\n e.stopPropagation();\n handleClickClose();\n }}\n type=\"button\"\n >\n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Created\n {metadata.created}\n
Updated\n {metadata.updated}\n
By{metadata.by}
Source{metadata.source}
\n
\n \n ) : null}\n \n
\n
\n );\n}\n","target":"components/smoothui/image-metadata-preview/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"infinite-slider","type":"registry:ui","title":"infinite-slider","description":"A InfiniteSlider component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion","react-use-measure"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport {\n animate,\n motion,\n useMotionValue,\n useReducedMotion,\n} from \"motion/react\";\nimport { useEffect, useState } from \"react\";\nimport useMeasure from \"react-use-measure\";\n\nexport interface InfiniteSliderProps {\n children: React.ReactNode;\n className?: string;\n direction?: \"horizontal\" | \"vertical\";\n gap?: number;\n reverse?: boolean;\n speed?: number;\n speedOnHover?: number;\n}\n\nexport default function InfiniteSlider({\n children,\n gap = 16,\n speed = 100,\n speedOnHover,\n direction = \"horizontal\",\n reverse = false,\n className,\n}: InfiniteSliderProps) {\n const [currentSpeed, setCurrentSpeed] = useState(speed);\n const [ref, { width, height }] = useMeasure();\n const translation = useMotionValue(0);\n const [isTransitioning, setIsTransitioning] = useState(false);\n const [_key, setKey] = useState(0);\n const shouldReduceMotion = useReducedMotion();\n\n useEffect(() => {\n if (shouldReduceMotion) {\n translation.set(0);\n return;\n }\n\n let controls:\n | {\n stop: () => void;\n }\n | undefined;\n const size = direction === \"horizontal\" ? width : height;\n const contentSize = size + gap;\n const from = reverse ? -contentSize / 2 : 0;\n const to = reverse ? 0 : -contentSize / 2;\n\n const distanceToTravel = Math.abs(to - from);\n const duration = distanceToTravel / currentSpeed;\n\n if (isTransitioning) {\n const remainingDistance = Math.abs(translation.get() - to);\n const transitionDuration = remainingDistance / currentSpeed;\n\n controls = animate(translation, [translation.get(), to], {\n ease: \"linear\",\n duration: transitionDuration,\n onComplete: () => {\n setIsTransitioning(false);\n setKey((prevKey) => prevKey + 1);\n },\n });\n } else {\n controls = animate(translation, [from, to], {\n ease: \"linear\",\n duration,\n repeat: Number.POSITIVE_INFINITY,\n repeatType: \"loop\",\n repeatDelay: 0,\n onRepeat: () => {\n translation.set(from);\n },\n });\n }\n\n return controls?.stop;\n }, [\n translation,\n currentSpeed,\n width,\n height,\n gap,\n isTransitioning,\n direction,\n reverse,\n shouldReduceMotion,\n ]);\n\n const hoverProps = speedOnHover\n ? {\n onHoverStart: () => {\n setIsTransitioning(true);\n setCurrentSpeed(speedOnHover);\n },\n onHoverEnd: () => {\n setIsTransitioning(true);\n setCurrentSpeed(speed);\n },\n }\n : {};\n\n return (\n
\n \n {children}\n {children}\n \n
\n );\n}\n","target":"components/smoothui/infinite-slider/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"interactive-image-selector","type":"registry:ui","title":"interactive-image-selector","description":"A InteractiveImageSelector component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion","lucide-react"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { Share2, Trash2 } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useCallback, useState } from \"react\";\n\nconst RESET_DELAY = 200;\nconst RESET_SCALE_START = 1;\nconst RESET_SCALE_PEAK = 1.1;\nconst RESET_SCALE_END = 1;\nconst RESET_ROTATE_START = 0;\nconst RESET_ROTATE_POSITIVE = 5;\nconst RESET_ROTATE_NEGATIVE = -5;\nconst SELECT_SCALE_START = 1;\nconst SELECT_SCALE_PEAK = 1.1;\nconst SELECT_SCALE_END = 1;\nconst SELECT_ROTATE_START = 0;\nconst SELECT_ROTATE_NEGATIVE = -5;\nconst SELECT_ROTATE_POSITIVE = 5;\nconst CONTAINER_SCALE_START = 1;\nconst CONTAINER_SCALE_MIN = 0.95;\nconst CONTAINER_SCALE_END = 1;\nconst ITEM_SCALE_START = 1;\nconst ITEM_SCALE_MIN = 0.9;\nconst ITEM_SCALE_END = 1;\nconst ITEM_ROTATE_START = 0;\nconst ITEM_ROTATE_POSITIVE = 2;\nconst ITEM_ROTATE_NEGATIVE = -2;\nconst RESET_ANIMATION_DURATION = 0.3;\n\nexport interface ImageData {\n id: number;\n src: string;\n}\n\nexport interface InteractiveImageSelectorProps {\n className?: string;\n images: ImageData[];\n onChange?: (selected: number[]) => void;\n onDelete?: (deleted: number[]) => void;\n onShare?: (selected: number[]) => void;\n selectable?: boolean;\n selectedImages?: number[];\n}\n\nexport default function InteractiveImageSelector({\n images,\n selectedImages: controlledSelected,\n onChange,\n onDelete,\n onShare,\n className = \"\",\n selectable = false,\n}: InteractiveImageSelectorProps) {\n const [originalImages] = useState(images);\n const [internalImages, setInternalImages] = useState(images);\n const [internalSelected, setInternalSelected] = useState([]);\n const [isSelecting, setIsSelecting] = useState(selectable);\n const [isResetting, setIsResetting] = useState(false);\n const shouldReduceMotion = useReducedMotion();\n\n const selected = controlledSelected ?? internalSelected;\n\n const handleImageClick = useCallback(\n (id: number) => {\n if (!isSelecting) {\n return;\n }\n const newSelected = selected.includes(id)\n ? selected.filter((imgId) => imgId !== id)\n : [...selected, id];\n if (onChange) {\n onChange(newSelected);\n } else {\n setInternalSelected(newSelected);\n }\n },\n [isSelecting, selected, onChange]\n );\n\n const handleDelete = useCallback(() => {\n const newImages = internalImages.filter(\n (img) => !selected.includes(img.id)\n );\n if (onDelete) {\n onDelete(selected);\n }\n setInternalImages(newImages);\n if (onChange) {\n onChange([]);\n } else {\n setInternalSelected([]);\n }\n }, [selected, internalImages, onDelete, onChange]);\n\n const handleReset = useCallback(() => {\n setIsResetting(true);\n\n // Add a small delay to show the reset animation\n setTimeout(() => {\n setInternalImages(originalImages);\n if (onChange) {\n onChange([]);\n } else {\n setInternalSelected([]);\n }\n setIsSelecting(false);\n setIsResetting(false);\n }, RESET_DELAY);\n }, [originalImages, onChange]);\n\n const toggleSelecting = useCallback(() => {\n setIsSelecting((prev) => !prev);\n if (isSelecting) {\n if (onChange) {\n onChange([]);\n } else {\n setInternalSelected([]);\n }\n }\n }, [isSelecting, onChange]);\n\n const handleShare = useCallback(() => {\n if (onShare) {\n onShare(selected);\n }\n }, [onShare, selected]);\n\n return (\n \n
\n
\n \n {isResetting ? \"Resetting...\" : \"Reset\"}\n \n \n {isSelecting ? \"Cancel\" : \"Select\"}\n \n
\n\n \n \n {internalImages.map((img) => (\n handleImageClick(img.id)}\n transition={{\n type: \"spring\" as const,\n stiffness: 300,\n damping: 25,\n duration: isResetting ? RESET_ANIMATION_DURATION : undefined,\n }}\n >\n \n {isSelecting && selected.includes(img.id) && (\n
\n ✓\n
\n )}\n \n ))}\n \n \n \n {isSelecting && (\n \n \n \n \n {selected.length} selected\n \n \n \n \n )}\n \n
\n );\n}\n","target":"components/smoothui/interactive-image-selector/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"job-listing-component","type":"registry:ui","title":"job-listing-component","description":"A JobListingComponent component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion","usehooks-ts"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport type { SVGProps } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useOnClickOutside } from \"usehooks-ts\";\n\nexport interface Job {\n company: string;\n job_description: string;\n job_time: string;\n location: string;\n logo: React.ReactNode;\n remote: string;\n salary: string;\n title: string;\n}\n\nexport interface JobListingComponentProps {\n className?: string;\n jobs: Job[];\n onJobClick?: (job: Job) => void;\n}\n\nexport const Resend = (props: SVGProps) => (\n \n Resend logo\n \n \n);\n\nexport const Turso = (props: SVGProps) => (\n \n Turso logo\n \n \n \n \n);\n\nexport const Supabase = (props: SVGProps) => (\n \n Supabase logo\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default function JobListingComponent({\n jobs,\n className,\n onJobClick,\n}: JobListingComponentProps) {\n const [activeItem, setActiveItem] = useState(null);\n const ref = useRef(null) as React.RefObject;\n const shouldReduceMotion = useReducedMotion();\n useOnClickOutside(ref, () => setActiveItem(null));\n\n useEffect(() => {\n function onKeyDown(event: { key: string }) {\n if (event.key === \"Escape\") {\n setActiveItem(null);\n }\n }\n\n window.addEventListener(\"keydown\", onKeyDown);\n return () => window.removeEventListener(\"keydown\", onKeyDown);\n }, []);\n\n return (\n <>\n \n {activeItem ? (\n \n ) : null}\n \n \n {activeItem ? (\n
\n \n
\n \n {activeItem.logo}\n \n
\n
\n
\n
\n {activeItem.company}\n
\n
\n

\n {activeItem.title} / {activeItem.salary}\n

\n
\n {activeItem.remote === \"Yes\" &&\n ` ${activeItem.location} `}\n {activeItem.remote === \"No\" && ` ${activeItem.location} `}\n {activeItem.remote === \"Hybrid\" &&\n ` ${activeItem.remote} / ${activeItem.location} `}\n | {activeItem.job_time}\n
\n
\n
\n
\n \n {activeItem.job_description}\n \n \n
\n ) : null}\n \n
\n
\n {jobs.map((role) => (\n {\n setActiveItem(role);\n if (onJobClick) {\n onJobClick(role);\n }\n }}\n style={{\n borderRadius: 8,\n willChange: shouldReduceMotion ? \"auto\" : \"transform\",\n }}\n transition={\n shouldReduceMotion\n ? { duration: 0 }\n : {\n type: \"spring\" as const,\n duration: 0.25,\n bounce: 0.1,\n layout: {\n duration: 0.25,\n ease: [0.645, 0.045, 0.355, 1],\n },\n }\n }\n whileTap={shouldReduceMotion ? undefined : { scale: 0.97 }}\n >\n \n {role.logo}\n \n
\n
\n {role.company}\n
\n
\n {role.title} / {role.salary}\n
\n\n
\n {role.remote === \"Yes\" && ` ${role.location} `}\n {role.remote === \"No\" && ` ${role.location} `}\n {role.remote === \"Hybrid\" &&\n ` ${role.remote} / ${role.location} `}\n | {role.job_time}\n
\n
\n \n {role.job_description}\n
\n \n ))}\n
\n \n \n );\n}\n","target":"components/smoothui/job-listing-component/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"magnetic-button","type":"registry:ui","title":"magnetic-button","description":"Button that subtly follows the cursor with magnetic effect","author":"Eduardo Calvo ","dependencies":["@radix-ui/react-slot","class-variance-authority","motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { motion, useReducedMotion, useSpring } from \"motion/react\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nconst magneticButtonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n outline:\n \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-10 px-4 py-2\",\n sm: \"h-9 rounded-md px-3\",\n lg: \"h-11 rounded-md px-8\",\n icon: \"h-10 w-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n);\n\nexport type MagneticButtonProps = {\n children: ReactNode;\n strength?: number;\n radius?: number;\n springConfig?: { duration?: number; bounce?: number };\n disabled?: boolean;\n asChild?: boolean;\n className?: string;\n} & ButtonHTMLAttributes &\n VariantProps;\n\nconst MagneticButton = ({\n children,\n strength = 0.3,\n radius = 150,\n springConfig = { duration: 0.4, bounce: 0.1 },\n disabled = false,\n asChild = false,\n variant,\n size,\n className,\n ...props\n}: MagneticButtonProps) => {\n const shouldReduceMotion = useReducedMotion();\n const [isHoverDevice, setIsHoverDevice] = useState(false);\n const buttonRef = useRef(null);\n const wrapperRef = useRef(null);\n\n const x = useSpring(0, {\n duration: springConfig.duration ?? 0.4,\n bounce: springConfig.bounce ?? 0.1,\n });\n const y = useSpring(0, {\n duration: springConfig.duration ?? 0.4,\n bounce: springConfig.bounce ?? 0.1,\n });\n\n useEffect(() => {\n const mediaQuery = window.matchMedia(\"(hover: hover) and (pointer: fine)\");\n setIsHoverDevice(mediaQuery.matches);\n\n const handleChange = (e: MediaQueryListEvent) => {\n setIsHoverDevice(e.matches);\n };\n\n mediaQuery.addEventListener(\"change\", handleChange);\n return () => mediaQuery.removeEventListener(\"change\", handleChange);\n }, []);\n\n const isEffectDisabled = disabled || shouldReduceMotion || !isHoverDevice;\n\n const handleMouseMove = useCallback(\n (event: React.MouseEvent) => {\n if (isEffectDisabled || !buttonRef.current) {\n return;\n }\n\n const rect = buttonRef.current.getBoundingClientRect();\n const centerX = rect.left + rect.width / 2;\n const centerY = rect.top + rect.height / 2;\n\n const distanceX = event.clientX - centerX;\n const distanceY = event.clientY - centerY;\n const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);\n\n if (distance < radius) {\n const factor = 1 - distance / radius;\n const moveX = distanceX * strength * factor;\n const moveY = distanceY * strength * factor;\n x.set(moveX);\n y.set(moveY);\n } else {\n x.set(0);\n y.set(0);\n }\n },\n [isEffectDisabled, radius, strength, x, y]\n );\n\n const handleMouseLeave = useCallback(() => {\n x.set(0);\n y.set(0);\n }, [x, y]);\n\n const Comp = asChild ? Slot : \"button\";\n\n return (\n // biome-ignore lint/a11y/noStaticElementInteractions: Mouse events are for visual effect, not interaction\n \n \n \n {children}\n \n \n \n );\n};\n\nexport default MagneticButton;\n","target":"components/smoothui/magnetic-button/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"notification-badge","type":"registry:ui","title":"notification-badge","description":"Animated notification badge with count and status variants","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport type { ReactNode } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nexport interface NotificationBadgeProps {\n children?: ReactNode;\n className?: string;\n count?: number;\n max?: number;\n ping?: boolean;\n position?: \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\";\n showZero?: boolean;\n status?: \"online\" | \"offline\" | \"busy\" | \"away\";\n variant?: \"dot\" | \"count\" | \"status\";\n}\n\nconst statusColors = {\n online: \"bg-emerald-500\",\n offline: \"bg-gray-400\",\n busy: \"bg-red-500\",\n away: \"bg-amber-500\",\n};\n\nconst positionClasses = {\n \"top-right\": \"-top-1 -right-1\",\n \"top-left\": \"-top-1 -left-1\",\n \"bottom-right\": \"-bottom-1 -right-1\",\n \"bottom-left\": \"-bottom-1 -left-1\",\n};\n\nconst AnimatedCount = ({\n value,\n max,\n shouldReduceMotion,\n}: {\n value: number;\n max: number;\n shouldReduceMotion: boolean | null;\n}) => {\n const displayValue = value > max ? `${max}+` : value.toString();\n const prevValueRef = useRef(value);\n const direction = value > prevValueRef.current ? 1 : -1;\n\n useEffect(() => {\n prevValueRef.current = value;\n }, [value]);\n\n if (shouldReduceMotion) {\n return {displayValue};\n }\n\n return (\n \n \n \n {displayValue}\n \n \n \n );\n};\n\nconst NotificationBadge = ({\n variant = \"dot\",\n count = 0,\n max = 99,\n status = \"online\",\n showZero = false,\n ping = false,\n position = \"top-right\",\n children,\n className,\n}: NotificationBadgeProps) => {\n const shouldReduceMotion = useReducedMotion();\n const [isVisible, setIsVisible] = useState(false);\n\n useEffect(() => {\n const shouldShow =\n variant === \"dot\" ||\n variant === \"status\" ||\n (variant === \"count\" && (count > 0 || showZero));\n setIsVisible(shouldShow);\n }, [variant, count, showZero]);\n\n const getBadgeClasses = () => {\n if (variant === \"dot\") {\n return \"h-2.5 w-2.5\";\n }\n if (variant === \"status\") {\n return \"h-3 w-3\";\n }\n const displayValue = count > max ? `${max}+` : count.toString();\n if (displayValue.length === 1) {\n return \"h-5 w-5 text-xs\";\n }\n if (displayValue.length === 2) {\n return \"h-5 min-w-5 px-1 text-xs\";\n }\n return \"h-5 min-w-6 px-1 text-xs\";\n };\n\n const getBackgroundColor = () => {\n if (variant === \"status\") {\n return statusColors[status];\n }\n return \"bg-brand\";\n };\n\n const badgeElement = (\n \n {isVisible && (\n \n {variant === \"count\" && (\n \n )}\n\n {ping && !shouldReduceMotion && (\n \n )}\n \n )}\n \n );\n\n if (!children) {\n return (\n \n \n {badgeElement}\n \n );\n }\n\n return (\n \n {children}\n {badgeElement}\n \n );\n};\n\nexport default NotificationBadge;\n","target":"components/smoothui/notification-badge/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"number-flow","type":"registry:ui","title":"number-flow","description":"A NumberFlow component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["lucide-react"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { Minus, Plus } from \"lucide-react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nconst TENS_PLACE = 10;\nconst HUNDREDS_PLACE = 100;\n\nconst animateDigit = (\n prevElement: HTMLElement | null,\n nextElement: HTMLElement | null,\n isIncreasing: boolean\n) => {\n if (!prevElement) {\n return;\n }\n if (!nextElement) {\n return;\n }\n\n if (isIncreasing) {\n prevElement.classList.add(\"slide-out-up\");\n nextElement.classList.add(\"slide-in-up\");\n } else {\n prevElement.classList.add(\"slide-out-down\");\n nextElement.classList.add(\"slide-in-down\");\n }\n\n const handleAnimationEnd = () => {\n prevElement.classList.remove(\"slide-out-up\", \"slide-out-down\");\n nextElement.classList.remove(\"slide-in-up\", \"slide-in-down\");\n prevElement.removeEventListener(\"animationend\", handleAnimationEnd);\n };\n\n prevElement.addEventListener(\"animationend\", handleAnimationEnd);\n};\n\nconst getTensValue = (num: number) => Math.floor(num / TENS_PLACE);\nconst getHundredsValue = (num: number) => Math.floor(num / HUNDREDS_PLACE);\n\nexport interface NumberFlowProps {\n buttonClassName?: string;\n className?: string;\n digitClassName?: string;\n max?: number;\n min?: number;\n onChange?: (value: number) => void;\n value?: number;\n}\n\nexport default function NumberFlow({\n value: controlledValue,\n onChange,\n min = 0,\n max = 999,\n className = \"\",\n digitClassName = \"\",\n buttonClassName = \"\",\n}: NumberFlowProps) {\n const [internalValue, setInternalValue] = useState(0);\n const [prevValue, setPrevValue] = useState(0);\n\n const value = controlledValue === undefined ? internalValue : controlledValue;\n\n const prevValueRef = useRef(null);\n const nextValueRef = useRef(null);\n const prevValueTens = useRef(null);\n const nextValueTens = useRef(null);\n const prevValueHunds = useRef(null);\n const nextValueHunds = useRef(null);\n\n const setValue = (val: number) => {\n if (onChange) {\n onChange(val);\n } else {\n setInternalValue(val);\n }\n };\n\n const add = () => {\n if (value < max) {\n setPrevValue(value);\n setValue(value + 1);\n }\n };\n\n const subtract = () => {\n if (value > min) {\n setPrevValue(value);\n setValue(value - 1);\n }\n };\n\n useEffect(() => {\n if (prevValueRef.current && nextValueRef.current) {\n animateDigit(\n prevValueRef.current,\n nextValueRef.current,\n value > prevValue\n );\n }\n\n const currentTens = getTensValue(value);\n const prevTens = getTensValue(prevValue);\n\n if (\n prevValueTens.current &&\n nextValueTens.current &&\n currentTens !== prevTens\n ) {\n animateDigit(\n prevValueTens.current,\n nextValueTens.current,\n currentTens > prevTens\n );\n }\n\n const currentHundreds = getHundredsValue(value);\n const prevHundreds = getHundredsValue(prevValue);\n\n if (\n prevValueHunds.current &&\n nextValueHunds.current &&\n currentHundreds !== prevHundreds\n ) {\n animateDigit(\n prevValueHunds.current,\n nextValueHunds.current,\n currentHundreds > prevHundreds\n );\n }\n }, [value, prevValue]);\n\n return (\n \n
\n
\n \n \n {Math.floor(prevValue / HUNDREDS_PLACE)}\n \n \n {Math.floor(value / HUNDREDS_PLACE)}\n \n
\n \n \n {Math.floor(prevValue / TENS_PLACE) % TENS_PLACE}\n \n \n {Math.floor(value / TENS_PLACE) % TENS_PLACE}\n \n
\n \n \n {prevValue % TENS_PLACE}\n \n \n {value % TENS_PLACE}\n \n \n \n\n
\n = max}\n onClick={add}\n type=\"button\"\n >\n \n \n \n \n \n
\n \n \n );\n}\n","target":"components/smoothui/number-flow/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"pagination","type":"registry:ui","title":"pagination","description":"Animated pagination with spring-based active page indicator","author":"Eduardo Calvo ","dependencies":["motion","lucide-react"],"devDependencies":[],"registryDependencies":["https://smoothui.dev/r/smooth-button.json","https://smoothui.dev/r/smooth-button.json"],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { useCallback, useId, useMemo } from \"react\";\nimport { SPRING_DEFAULT } from \"../../lib/animation\";\nimport SmoothButton from \"../smooth-button\";\n\nexport type PaginationProps = {\n /** Current active page (1-indexed). */\n page: number;\n /** Total number of pages. */\n totalPages: number;\n /** Called when the user selects a different page. */\n onPageChange: (page: number) => void;\n /** Number of sibling pages to show on each side of current page. Defaults to 1. */\n siblings?: number;\n /** Additional CSS classes for the nav element. */\n className?: string;\n};\n\nconst ELLIPSIS = \"ellipsis\" as const;\n\ntype PageItem = number | typeof ELLIPSIS;\n\n/** Spring for the sliding active indicator (like animated-tabs) */\nconst SPRING_INDICATOR = {\n type: \"spring\" as const,\n duration: 0.25,\n bounce: 0.05,\n};\n\n/** Stagger delay per page button on initial render */\nconst STAGGER_DELAY = 0.03;\n\nconst buildPageRange = (\n page: number,\n totalPages: number,\n siblings: number\n): PageItem[] => {\n const totalSlots = siblings * 2 + 5; // siblings + current + 2 boundary + 2 potential ellipsis\n\n if (totalPages <= totalSlots) {\n return Array.from({ length: totalPages }, (_, i) => i + 1);\n }\n\n const leftSibling = Math.max(page - siblings, 2);\n const rightSibling = Math.min(page + siblings, totalPages - 1);\n\n const showLeftEllipsis = leftSibling > 2;\n const showRightEllipsis = rightSibling < totalPages - 1;\n\n const items: PageItem[] = [1];\n\n if (showLeftEllipsis) {\n items.push(ELLIPSIS);\n } else {\n for (let i = 2; i < leftSibling; i++) {\n items.push(i);\n }\n }\n\n for (let i = leftSibling; i <= rightSibling; i++) {\n items.push(i);\n }\n\n if (showRightEllipsis) {\n items.push(ELLIPSIS);\n } else {\n for (let i = rightSibling + 1; i < totalPages; i++) {\n items.push(i);\n }\n }\n\n items.push(totalPages);\n\n return items;\n};\n\nexport default function Pagination({\n page,\n totalPages,\n onPageChange,\n siblings = 1,\n className,\n}: PaginationProps) {\n const shouldReduceMotion = useReducedMotion();\n const generatedId = useId();\n const layoutId = `pagination-active-${generatedId}`;\n\n const pageItems = useMemo(\n () => buildPageRange(page, totalPages, siblings),\n [page, totalPages, siblings]\n );\n\n const handlePrev = useCallback(() => {\n if (page > 1) {\n onPageChange(page - 1);\n }\n }, [page, onPageChange]);\n\n const handleNext = useCallback(() => {\n if (page < totalPages) {\n onPageChange(page + 1);\n }\n }, [page, totalPages, onPageChange]);\n\n return (\n \n
    \n {/* Previous button */}\n
  • \n \n \n Previous\n \n
    • \n\n {/* Page numbers */}\n {pageItems.map((item, index) => {\n if (item === ELLIPSIS) {\n return (\n \n \n ...\n \n \n );\n }\n\n const isActive = item === page;\n\n return (\n \n onPageChange(item)}\n size=\"icon\"\n type=\"button\"\n variant=\"ghost\"\n >\n {isActive && (\n \n )}\n {item}\n \n \n );\n })}\n\n {/* Next button */}\n
  • \n = totalPages}\n onClick={handleNext}\n size=\"sm\"\n type=\"button\"\n variant=\"ghost\"\n >\n Next\n \n \n
    • \n
\n \n );\n}\n","target":"components/smoothui/pagination/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"phototab","type":"registry:ui","title":"phototab","description":"A Phototab component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion","@radix-ui/react-tabs"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport {\n Content as TabsContent,\n List as TabsList,\n Root as TabsRoot,\n Trigger as TabsTrigger,\n} from \"@radix-ui/react-tabs\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useLayoutEffect, useRef, useState } from \"react\";\n\n/**\n * Tab definition for Phototab\n */\nexport interface PhototabTab {\n /** Tab icon (ReactNode) */\n icon: React.ReactNode;\n /** Tab image (string: URL or import) */\n image: string;\n /** Tab label */\n name: string;\n}\n\nexport interface PhototabProps {\n /** Class name for root */\n className?: string;\n /** Default selected tab name */\n defaultTab?: string;\n /** Height of the component in pixels */\n height?: number;\n /** Class name for image */\n imageClassName?: string;\n /** Class name for tab list */\n tabListClassName?: string;\n /** Array of tabs to display */\n tabs: PhototabTab[];\n /** Class name for tab trigger */\n tabTriggerClassName?: string;\n}\n\nexport default function Phototab({\n tabs,\n defaultTab,\n height = 400,\n className = \"\",\n tabListClassName = \"\",\n tabTriggerClassName = \"\",\n imageClassName = \"\",\n}: PhototabProps) {\n const [hoveredIndex, setHoveredIndex] = useState(null);\n const [bgStyle, setBgStyle] = useState<{\n left: number;\n top: number;\n width: number;\n height: number;\n } | null>(null);\n const triggersRef = useRef<(HTMLButtonElement | null)[]>([]);\n const listRef = useRef(null);\n const shouldReduceMotion = useReducedMotion();\n\n useLayoutEffect(() => {\n if (\n hoveredIndex !== null &&\n triggersRef.current[hoveredIndex] &&\n listRef.current\n ) {\n const trigger = triggersRef.current[hoveredIndex];\n if (!trigger) {\n return;\n }\n const listRect = listRef.current.getBoundingClientRect();\n const triggerRect = trigger.getBoundingClientRect();\n setBgStyle({\n left: triggerRect.left - listRect.left,\n top: triggerRect.top - listRect.top,\n width: triggerRect.width,\n height: triggerRect.height,\n });\n } else {\n setBgStyle(null);\n }\n }, [hoveredIndex]);\n\n return (\n \n \n \n {bgStyle && (\n \n )}\n \n {tabs.map((tab, index) => (\n {\n setHoveredIndex(index);\n }}\n onMouseLeave={() => {\n setHoveredIndex(null);\n }}\n ref={(el) => {\n triggersRef.current[index] = el;\n }}\n value={tab.name}\n >\n \n {tab.icon}\n {tab.name}\n \n \n ))}\n \n {tabs.map((tab) => (\n \n \n \n ))}\n \n );\n}\n","target":"components/smoothui/phototab/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"power-off-slide","type":"registry:ui","title":"power-off-slide","description":"A PowerOffSlide component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion","lucide-react"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { Power } from \"lucide-react\";\nimport {\n motion,\n useAnimation,\n useAnimationFrame,\n useMotionValue,\n useReducedMotion,\n} from \"motion/react\";\nimport { type RefObject, useRef, useState } from \"react\";\n\nconst SLIDE_THRESHOLD = 160;\nconst SLIDE_MAX_DISTANCE = 168;\nconst PERCENTAGE_MULTIPLIER = 100;\n\nexport interface PowerOffSlideProps {\n className?: string;\n disabled?: boolean;\n duration?: number;\n label?: string;\n onPowerOff?: () => void;\n}\n\nexport default function PowerOffSlide({\n onPowerOff,\n label = \"Slide to power off\",\n className = \"\",\n duration = 2000,\n disabled = false,\n}: PowerOffSlideProps) {\n const [isPoweringOff, setIsPoweringOff] = useState(false);\n const x = useMotionValue(0);\n const controls = useAnimation();\n const constraintsRef = useRef(null);\n const textRef: RefObject = useRef(null);\n const shouldReduceMotion = useReducedMotion();\n\n useAnimationFrame((t) => {\n if (shouldReduceMotion) {\n return;\n }\n const animDuration = duration;\n const progress = (t % animDuration) / animDuration;\n if (textRef.current) {\n textRef.current.style.setProperty(\n \"--x\",\n `${(1 - progress) * PERCENTAGE_MULTIPLIER}%`\n );\n }\n });\n\n const handleDragEnd = async () => {\n if (disabled) {\n return;\n }\n const dragDistance = x.get();\n if (dragDistance > SLIDE_THRESHOLD) {\n await controls.start({ x: SLIDE_MAX_DISTANCE });\n setIsPoweringOff(true);\n if (onPowerOff) {\n onPowerOff();\n }\n setTimeout(() => {\n setIsPoweringOff(false);\n controls.start({ x: 0 });\n x.set(0);\n }, duration);\n } else {\n controls.start({ x: 0 });\n }\n };\n\n return (\n
\n
\n {isPoweringOff ? (\n
\n

Shutting down...

\n
\n ) : (\n \n
\n
\n {label}\n
\n
\n \n \n \n
\n )}\n
\n \n );\n}\n","target":"components/smoothui/power-off-slide/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"price-flow","type":"registry:ui","title":"price-flow","description":"A PriceFlow component for SmoothUI.","author":"Eduardo Calvo ","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { useEffect, useRef, useState } from \"react\";\n\nconst STAGGER_DELAY = 50;\n\nexport interface PriceFlowProps {\n className?: string;\n value: number;\n}\n\nconst animateDigit = (\n prevElement: HTMLElement | null,\n nextElement: HTMLElement | null,\n isIncreasing: boolean\n) => {\n if (prevElement === null || nextElement === null) {\n return;\n }\n\n if (isIncreasing) {\n prevElement.classList.add(\"slide-out-up\");\n nextElement.classList.add(\"slide-in-up\");\n } else {\n prevElement.classList.add(\"slide-out-down\");\n nextElement.classList.add(\"slide-in-down\");\n }\n\n const handleAnimationEnd = () => {\n prevElement.classList.remove(\"slide-out-up\", \"slide-out-down\");\n nextElement.classList.remove(\"slide-in-up\", \"slide-in-down\");\n prevElement.removeEventListener(\"animationend\", handleAnimationEnd);\n };\n\n prevElement.addEventListener(\"animationend\", handleAnimationEnd);\n};\n\nexport default function PriceFlow({ value, className = \"\" }: PriceFlowProps) {\n const [prevValue, setPrevValue] = useState(value);\n\n // Create refs for each digit position (tens and ones)\n const prevTensRef = useRef(null);\n const nextTensRef = useRef(null);\n const prevOnesRef = useRef(null);\n const nextOnesRef = useRef(null);\n\n useEffect(() => {\n if (value === prevValue) {\n return;\n }\n\n const prevTens = prevTensRef.current;\n const nextTens = nextTensRef.current;\n const prevOnes = prevOnesRef.current;\n const nextOnes = nextOnesRef.current;\n\n const prevTensValue = Math.floor(prevValue / 10);\n const currentTensValue = Math.floor(value / 10);\n const tensChanged = currentTensValue !== prevTensValue;\n\n if (tensChanged && prevTens && nextTens) {\n const isTensIncreasing = currentTensValue > prevTensValue;\n animateDigit(prevTens, nextTens, isTensIncreasing);\n }\n\n const prevOnesValue = prevValue % 10;\n const currentOnesValue = value % 10;\n const onesChanged = currentOnesValue !== prevOnesValue;\n\n if (onesChanged && prevOnes && nextOnes) {\n const isOnesIncreasing = currentOnesValue > prevOnesValue;\n setTimeout(() => {\n animateDigit(prevOnes, nextOnes, isOnesIncreasing);\n }, STAGGER_DELAY);\n }\n\n setPrevValue(value);\n }, [value, prevValue]);\n\n const formatValue = (val: number) => val.toString().padStart(2, \"0\");\n\n const prevFormatted = formatValue(prevValue);\n const currentFormatted = formatValue(value);\n\n return (\n \n \n {/* Tens digit */}\n \n {prevFormatted[0]}\n \n \n {currentFormatted[0]}\n \n \n\n \n {/* Ones digit */}\n \n {prevFormatted[1]}\n \n \n {currentFormatted[1]}\n \n \n \n );\n}\n","target":"components/smoothui/price-flow/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"product-card","type":"registry:ui","title":"product-card","description":"Animated product card component for ecommerce","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":["https://smoothui.dev/r/smooth-button.json"],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport SmoothButton from \"@repo/smoothui/components/smooth-button\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useId, useState } from \"react\";\n\nexport interface ProductCardProps {\n badge?: string;\n className?: string;\n currency?: string;\n image: string;\n onAddToCart?: () => void;\n onWishlist?: () => void;\n originalPrice?: number;\n price: number;\n rating?: number;\n title: string;\n}\n\n/* ─────────────────────────────────────────────────────────\n * ANIMATION STORYBOARD\n *\n * 0ms card enters viewport → fade up + scale\n * 250ms badge pops in with spring\n * hover image zooms 1.05, wishlist heart appears\n * click button scale bounce + icon morph to checkmark\n * ───────────────────────────────────────────────────────── */\n\nconst SPRING = {\n type: \"spring\" as const,\n duration: 0.25,\n bounce: 0.1,\n};\n\nconst SPRING_BOUNCY = {\n type: \"spring\" as const,\n duration: 0.3,\n bounce: 0.2,\n};\n\nconst STAR_PATH =\n \"M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.562.562 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.562.562 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z\";\n\nfunction StarIcon({ filled, half }: { filled: boolean; half?: boolean }) {\n const id = useId();\n\n if (half) {\n const gradientId = `half-star-${id}`;\n return (\n \n \n \n \n \n \n \n \n \n );\n }\n\n return (\n \n \n \n );\n}\n\nfunction CheckIcon() {\n return (\n \n \n \n );\n}\n\nfunction CartIcon() {\n return (\n \n \n \n );\n}\n\nfunction HeartIcon({ filled }: { filled: boolean }) {\n return (\n \n \n \n );\n}\n\nfunction RatingStars({ rating, title }: { rating: number; title: string }) {\n const fullStars = Math.floor(rating);\n const hasHalf = rating - fullStars >= 0.25 && rating - fullStars < 0.75;\n const roundedUp = rating - fullStars >= 0.75;\n\n return (\n \n {Array.from({ length: 5 }, (_, i) => {\n const isFilled = i < fullStars || (roundedUp && i === fullStars);\n const isHalf = hasHalf && i === fullStars;\n return (\n \n );\n })}\n \n {rating}\n \n \n );\n}\n\nexport default function ProductCard({\n image,\n title,\n price,\n originalPrice,\n currency = \"$\",\n rating,\n badge,\n onAddToCart,\n onWishlist,\n className,\n}: ProductCardProps) {\n const shouldReduceMotion = useReducedMotion();\n const [isHoverDevice, setIsHoverDevice] = useState(false);\n const [isAdded, setIsAdded] = useState(false);\n const [isWishlisted, setIsWishlisted] = useState(false);\n\n useEffect(() => {\n const mediaQuery = window.matchMedia(\"(hover: hover) and (pointer: fine)\");\n setIsHoverDevice(mediaQuery.matches);\n const handler = (e: MediaQueryListEvent) => setIsHoverDevice(e.matches);\n mediaQuery.addEventListener(\"change\", handler);\n return () => mediaQuery.removeEventListener(\"change\", handler);\n }, []);\n\n const handleAddToCart = () => {\n setIsAdded(true);\n onAddToCart?.();\n setTimeout(() => setIsAdded(false), 2000);\n };\n\n const handleWishlist = () => {\n setIsWishlisted((prev) => !prev);\n onWishlist?.();\n };\n\n const hasDiscount = originalPrice !== undefined && originalPrice > price;\n const discountPercent = hasDiscount\n ? Math.round(((originalPrice - price) / originalPrice) * 100)\n : 0;\n\n return (\n \n {/* Image — full bleed */}\n
\n \n\n {/* Hover overlay gradient */}\n \n\n {/* Badge */}\n {badge && (\n \n {badge}\n \n )}\n\n {/* Wishlist button */}\n \n \n \n
\n\n {/* Content */}\n
\n

\n {title}\n

\n\n {rating !== undefined && }\n\n
\n \n {currency}\n {price}\n \n {hasDiscount && (\n <>\n \n {currency}\n {originalPrice}\n \n \n -{discountPercent}%\n \n \n )}\n
\n\n
\n \n \n {isAdded ? (\n \n Added\n \n ) : (\n \n Add to Cart\n \n )}\n \n \n
\n
\n \n );\n}\n","target":"components/smoothui/product-card/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"radio-group","type":"registry:ui","title":"radio-group","description":"An animated Radio Group component for SmoothUI with selection indicator spring animation.","author":"Eduardo Calvo ","dependencies":["motion","radix-ui"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport type React from \"react\";\nimport { Children, cloneElement, isValidElement } from \"react\";\nimport { SPRING_DEFAULT } from \"../../lib/animation\";\n\nexport interface RadioGroupProps {\n /** Radio items to render */\n children: React.ReactNode;\n /** Optional CSS class for the group container */\n className?: string;\n /** The default value when uncontrolled */\n defaultValue?: string;\n /** Whether the entire group is disabled */\n disabled?: boolean;\n /** Name attribute for form submission */\n name?: string;\n /** Callback when the selected value changes */\n onValueChange?: (value: string) => void;\n /** Orientation of the radio group for arrow key navigation */\n orientation?: \"horizontal\" | \"vertical\";\n /** Whether a selection is required */\n required?: boolean;\n /** The controlled value of the selected radio item */\n value?: string;\n}\n\nexport interface RadioProps {\n /** @internal Stagger index passed by RadioGroup */\n _staggerIndex?: number;\n /** Children (label content) to render next to the radio */\n children?: React.ReactNode;\n /** Optional CSS class */\n className?: string;\n /** Whether this radio is disabled */\n disabled?: boolean;\n /** ID for label association */\n id?: string;\n /** The value of this radio option */\n value: string;\n}\n\n/** Spring for the selection dot — playful bounce per CLAUDE.md (0.2-0.3 for playful interactions) */\nconst SPRING_DOT = {\n type: \"spring\" as const,\n duration: 0.25,\n bounce: 0.2,\n};\n\n/** Stagger delay per radio item on initial render */\nconst STAGGER_DELAY = 0.04;\n\nexport function RadioGroup({\n value,\n defaultValue,\n onValueChange,\n disabled = false,\n className,\n children,\n name,\n required,\n orientation = \"vertical\",\n}: RadioGroupProps) {\n const shouldReduceMotion = useReducedMotion();\n\n // Inject stagger index into Radio children for entrance stagger\n let radioIndex = 0;\n const enhancedChildren = Children.map(children, (child) => {\n if (\n isValidElement(child) &&\n (child.type === Radio ||\n (child.type as { displayName?: string })?.displayName === \"Radio\")\n ) {\n const currentIndex = radioIndex;\n radioIndex += 1;\n return cloneElement(child as React.ReactElement, {\n _staggerIndex: currentIndex,\n });\n }\n return child;\n });\n\n return (\n \n {shouldReduceMotion ? children : enhancedChildren}\n \n );\n}\n\nexport function Radio({\n value,\n disabled = false,\n className,\n id,\n children,\n _staggerIndex,\n}: RadioProps) {\n const shouldReduceMotion = useReducedMotion();\n const staggerDelay =\n _staggerIndex === undefined ? 0 : _staggerIndex * STAGGER_DELAY;\n\n const wrapper = (content: React.ReactNode) => {\n if (shouldReduceMotion || _staggerIndex === undefined) {\n return
{content}
;\n }\n return (\n \n {content}\n \n );\n };\n\n return wrapper(\n <>\n \n \n \n \n \n \n \n {children && (\n \n {children}\n \n )}\n \n );\n}\n\nRadio.displayName = \"Radio\";\n\nexport default RadioGroup;\n","target":"components/smoothui/radio-group/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"reveal-text","type":"registry:ui","title":"reveal-text","description":"A RevealText component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"import { motion, useInView, useReducedMotion } from \"motion/react\";\nimport React from \"react\";\n\nexport interface RevealTextProps {\n children: string;\n className?: string;\n delay?: number;\n direction?: \"up\" | \"down\" | \"left\" | \"right\";\n triggerOnView?: boolean;\n}\n\nconst REVEAL_ANIMATION_DURATION_S = 0.25;\nconst MILLISECONDS_TO_SECONDS = 1000;\n\nconst directionVariants = {\n up: { y: 24, opacity: 0 },\n down: { y: -24, opacity: 0 },\n left: { x: 24, opacity: 0 },\n right: { x: -24, opacity: 0 },\n};\n\nconst RevealText: React.FC = ({\n children,\n direction = \"up\",\n delay = 0,\n triggerOnView = false,\n className = \"\",\n}) => {\n const ref = React.useRef(null);\n const inView = useInView(ref, { once: true });\n const shouldReduceMotion = useReducedMotion();\n const animate = (!triggerOnView || inView) && !shouldReduceMotion;\n\n return (\n \n {children}\n \n );\n};\n\nexport default RevealText;\n","target":"components/smoothui/reveal-text/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"reviews-carousel","type":"registry:ui","title":"reviews-carousel","description":"A ReviewsCarousel component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion","lucide-react"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useMemo, useState } from \"react\";\n\nconst FRAME_OFFSET = -30;\nconst FRAMES_VISIBLE_LENGTH = 3;\n\nfunction clamp(val: number, [min, max]: [number, number]): number {\n return Math.min(Math.max(val, min), max);\n}\n\nexport interface Review {\n author: string;\n body: string;\n id: string | number;\n title: string;\n}\n\ninterface ReviewCardProps {\n activeIndex: number;\n index: number;\n review: Review;\n totalCards: number;\n}\n\nfunction ReviewCard({\n review,\n index,\n activeIndex,\n totalCards,\n}: ReviewCardProps) {\n const shouldReduceMotion = useReducedMotion();\n const offsetIndex = index - activeIndex;\n\n // Same logic as time-machine\n const blur = activeIndex > index ? 2 : 0;\n const opacity = activeIndex > index ? 0 : 1;\n const scale = shouldReduceMotion\n ? 1\n : clamp(1 - offsetIndex * 0.08, [0.08, 2]);\n const y = shouldReduceMotion\n ? 0\n : clamp(offsetIndex * FRAME_OFFSET, [\n FRAME_OFFSET * FRAMES_VISIBLE_LENGTH,\n Number.POSITIVE_INFINITY,\n ]);\n\n const isActive = index === activeIndex;\n\n return (\n \n
\n
\n \"\n
\n

\n {review.body}\n

\n
\n
\n
\n \n {review.author}\n \n {review.title}\n
\n
\n \n );\n}\n\ninterface NavigationButtonProps {\n direction: \"prev\" | \"next\";\n disabled: boolean;\n onClick: () => void;\n}\n\nfunction NavigationButton({\n direction,\n onClick,\n disabled,\n}: NavigationButtonProps) {\n const Icon = direction === \"prev\" ? ChevronLeft : ChevronRight;\n\n return (\n \n \n \n );\n}\n\nexport interface ReviewsCarouselProps {\n autoPlay?: boolean;\n autoPlayInterval?: number;\n className?: string;\n excludeIds?: (string | number)[];\n height?: string;\n reviews: Review[];\n showIndicators?: boolean;\n showNavigation?: boolean;\n}\n\nexport default function ReviewsCarousel({\n reviews,\n className = \"\",\n height = \"300px\",\n excludeIds = [],\n showIndicators = true,\n showNavigation = true,\n autoPlay = false,\n autoPlayInterval = 5000,\n}: ReviewsCarouselProps) {\n // Filter out excluded reviews - use Set for O(1) lookups\n const filteredReviews = useMemo(() => {\n if (excludeIds.length === 0) {\n return reviews;\n }\n\n const excludeSet = new Set(excludeIds);\n const reviewsLength = reviews.length;\n const results: typeof reviews = [];\n\n // Use for loop for better performance\n for (let i = 0; i < reviewsLength; i++) {\n const review = reviews[i];\n if (!excludeSet.has(review.id)) {\n results.push(review);\n }\n }\n\n return results;\n }, [reviews, excludeIds]);\n\n const maxIndex = filteredReviews.length - 1;\n const [activeIndex, setActiveIndex] = useState(0);\n\n // Auto-play functionality\n useEffect(() => {\n if (!autoPlay || maxIndex < 0) {\n return;\n }\n\n const interval = setInterval(() => {\n setActiveIndex((prevIndex) => {\n if (prevIndex >= maxIndex) {\n return 0;\n }\n return prevIndex + 1;\n });\n }, autoPlayInterval);\n\n return () => {\n clearInterval(interval);\n };\n }, [autoPlay, autoPlayInterval, maxIndex]);\n\n // Keyboard navigation\n useEffect(() => {\n function handleKeyDown(event: KeyboardEvent) {\n if (event.key === \"ArrowLeft\") {\n setActiveIndex((i) => clamp(i - 1, [0, maxIndex]));\n } else if (event.key === \"ArrowRight\") {\n setActiveIndex((i) => clamp(i + 1, [0, maxIndex]));\n }\n }\n\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => {\n window.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [maxIndex]);\n\n const goToPrevious = () => {\n setActiveIndex((prevIndex) => {\n if (prevIndex > 0) {\n return prevIndex - 1;\n }\n return prevIndex;\n });\n };\n\n const goToNext = () => {\n setActiveIndex((prevIndex) => {\n const newIndex = prevIndex + 1;\n return newIndex <= maxIndex ? newIndex : prevIndex;\n });\n };\n\n if (filteredReviews.length === 0) {\n return null;\n }\n\n return (\n \n {/* Stack of cards - using grid-stack pattern */}\n
\n
\n {filteredReviews.map((review: Review, index: number) => (\n \n ))}\n
\n
\n\n {/* Navigation buttons */}\n {(showNavigation || showIndicators) && (\n
\n {showNavigation && (\n \n )}\n {showIndicators && (\n
\n {filteredReviews.map((review: Review, index: number) => (\n {\n setActiveIndex(index);\n }}\n type=\"button\"\n />\n ))}\n
\n )}\n {showNavigation && (\n \n )}\n
\n )}\n \n );\n}\n","target":"components/smoothui/reviews-carousel/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"rich-popover","type":"registry:ui","title":"rich-popover","description":"A RichPopover component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion","lucide-react","@radix-ui/react-popover"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport {\n Arrow as PopoverArrow,\n Content as PopoverContent,\n Portal as PopoverPortal,\n Root as PopoverRoot,\n Trigger as PopoverTrigger,\n} from \"@radix-ui/react-popover\";\nimport { Clock, ExternalLink, Play } from \"lucide-react\";\nimport { motion, useReducedMotion } from \"motion/react\";\n\nimport type * as React from \"react\";\n\nexport interface RichTooltipProps {\n actionHref?: string;\n actionLabel?: string;\n align?: \"start\" | \"center\" | \"end\";\n className?: string;\n description?: string;\n href?: string;\n icon?: React.ReactNode;\n meta?: string;\n onActionClick?: () => void;\n side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n title: string;\n trigger: React.ReactNode;\n}\n\nexport function YouTubeIcon({\n className = \"h-4 w-4 fill-red-600\",\n}: {\n className?: string;\n}) {\n return (\n \n \n \n );\n}\n\nexport default function RichTooltip({\n trigger,\n title,\n description,\n icon,\n href,\n actionLabel,\n actionHref,\n onActionClick,\n meta,\n className = \"\",\n side = \"top\",\n align = \"center\",\n}: RichTooltipProps) {\n const shouldReduceMotion = useReducedMotion();\n const Title = (\n
\n {icon ?? }\n {href ? (\n \n {title}\n \n \n ) : (\n {title}\n )}\n
\n );\n\n const renderAction = () => {\n if (!actionLabel) {\n return null;\n }\n\n const actionClassName =\n \"inline-flex items-center gap-2 rounded-full bg-white px-3 py-2 font-medium text-black text-xs transition-colors hover:bg-white/90\";\n\n if (actionHref) {\n return (\n \n {actionLabel}\n \n );\n }\n\n return (\n \n );\n };\n\n const Action = renderAction();\n\n return (\n \n {trigger}\n \n \n \n {Title}\n {description && (\n

\n {description}\n

\n )}\n {(meta || Action) && (\n
\n {meta ? (\n \n {meta}\n \n ) : (\n \n )}\n {Action}\n
\n )}\n\n {/* Tail */}\n \n \n \n \n \n );\n}\n","target":"components/smoothui/rich-popover/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"scramble-hover","type":"registry:ui","title":"scramble-hover","description":"A ScrambleHover component for SmoothUI.","author":"Eduardo Calvo ","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"import type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nexport interface ScrambleHoverProps {\n children: string;\n className?: string;\n duration?: number; // total animation duration in ms\n speed?: number; // interval between scrambles in ms\n}\n\nconst CHARACTERS =\n \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=<>?\".split(\n \"\"\n );\n\nfunction scrambleText(original: string) {\n return original\n .split(\"\")\n .map((char) =>\n char === \" \"\n ? \" \"\n : CHARACTERS[Math.floor(Math.random() * CHARACTERS.length)]\n )\n .join(\"\");\n}\n\nconst ScrambleHover: React.FC = ({\n children,\n duration = 600,\n speed = 30,\n className = \"\",\n}) => {\n const [display, setDisplay] = useState(children);\n const [shouldReduceMotion, setShouldReduceMotion] = useState(false);\n const [isHoverDevice, setIsHoverDevice] = useState(false);\n const timeoutRef = useRef(null);\n const intervalRef = useRef(null);\n\n useEffect(() => {\n const motionQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n const hoverQuery = window.matchMedia(\"(hover: hover) and (pointer: fine)\");\n\n setShouldReduceMotion(motionQuery.matches);\n setIsHoverDevice(hoverQuery.matches);\n\n const handleMotionChange = (e: MediaQueryListEvent) => {\n setShouldReduceMotion(e.matches);\n };\n const handleHoverChange = (e: MediaQueryListEvent) => {\n setIsHoverDevice(e.matches);\n };\n\n motionQuery.addEventListener(\"change\", handleMotionChange);\n hoverQuery.addEventListener(\"change\", handleHoverChange);\n\n return () => {\n motionQuery.removeEventListener(\"change\", handleMotionChange);\n hoverQuery.removeEventListener(\"change\", handleHoverChange);\n };\n }, []);\n\n const handleMouseEnter = () => {\n if (shouldReduceMotion || !isHoverDevice) {\n return;\n }\n if (intervalRef.current) {\n clearInterval(intervalRef.current);\n }\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n intervalRef.current = setInterval(() => {\n setDisplay(() => scrambleText(children));\n }, speed);\n timeoutRef.current = setTimeout(() => {\n if (intervalRef.current) {\n clearInterval(intervalRef.current);\n }\n setDisplay(children);\n }, duration);\n };\n\n const handleMouseLeave = () => {\n if (intervalRef.current) {\n clearInterval(intervalRef.current);\n }\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n setDisplay(children);\n };\n\n return (\n \n {display}\n \n );\n};\n\nexport default ScrambleHover;\n","target":"components/smoothui/scramble-hover/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"scroll-reveal-paragraph","type":"registry:ui","title":"scroll-reveal-paragraph","description":"A ScrollRevealParagraph component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport {\n type MotionValue,\n motion,\n useReducedMotion,\n useScroll,\n useTransform,\n} from \"motion/react\";\nimport { useRef } from \"react\";\n\nconst KEY_PREFIX_LENGTH = 3;\n\nexport interface ScrollRevealParagraphProps {\n className?: string;\n paragraph: string;\n}\n\nexport default function ScrollRevealParagraph({\n paragraph,\n className = \"\",\n}: ScrollRevealParagraphProps) {\n const container = useRef(null);\n const { scrollYProgress } = useScroll({\n target: container,\n offset: [\"start 0.9\", \"start 0.25\"],\n });\n\n const words = paragraph.split(\" \");\n\n return (\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\ninterface WordProps {\n children: string;\n progress: MotionValue;\n range: [number, number];\n}\n\nconst Word = ({ children, progress, range }: WordProps) => {\n const shouldReduceMotion = useReducedMotion();\n const opacity = useTransform(\n progress,\n range,\n shouldReduceMotion ? [1, 1] : [0, 1]\n );\n\n return (\n \n {shouldReduceMotion ? null : (\n {children}\n )}\n \n {children}\n \n \n );\n};\n","target":"components/smoothui/scroll-reveal-paragraph/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"scrollable-card-stack","type":"registry:ui","title":"scrollable-card-stack","description":"A ScrollableCardStack component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { motion, useMotionValue, useReducedMotion } from \"motion/react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nconst SCROLL_TIMEOUT_OFFSET = 100;\nconst MIN_SCROLL_INTERVAL = 300;\nconst SCROLL_THRESHOLD = 20;\nconst TOUCH_SCROLL_THRESHOLD = 100;\nconst SCALE_FACTOR = 0.08;\nconst MIN_SCALE = 0.08;\nconst MAX_SCALE = 2;\nconst HOVER_SCALE_MULTIPLIER = 1.02;\nconst CARD_PADDING = 100;\n\ninterface CardItem {\n avatar: string;\n handle: string;\n href: string;\n id: string;\n image: string;\n name: string;\n}\n\nexport interface ScrollableCardStackProps {\n cardHeight?: number;\n className?: string;\n items: CardItem[];\n perspective?: number;\n transitionDuration?: number;\n}\n\nconst ScrollableCardStack: React.FC = ({\n items,\n cardHeight = 384,\n perspective = 1000,\n transitionDuration = 180,\n className,\n}) => {\n const [currentIndex, setCurrentIndex] = useState(0);\n const [isDragging, setIsDragging] = useState(false);\n const [hoveredIndex, setHoveredIndex] = useState(null);\n const [isScrolling, setIsScrolling] = useState(false);\n const containerRef = useRef(null);\n const scrollY = useMotionValue(0);\n const lastScrollTime = useRef(0);\n const shouldReduceMotion = useReducedMotion();\n\n // Calculate the total number of items\n const totalItems = items.length;\n const maxIndex = totalItems - 1;\n\n // Constants for visual effects - matching reference code exactly\n const FRAME_OFFSET = -30;\n const FRAMES_VISIBLE_LENGTH = 3;\n const SNAP_DISTANCE = 50;\n\n // Clamp function from reference code - memoized to prevent recreation\n const clamp = useCallback(\n (val: number, [min, max]: [number, number]): number =>\n Math.min(Math.max(val, min), max),\n []\n );\n\n // Controlled scroll function to move exactly one card\n const scrollToCard = useCallback(\n (direction: 1 | -1) => {\n if (isScrolling) {\n return;\n }\n\n const now = Date.now();\n const timeSinceLastScroll = now - lastScrollTime.current;\n\n if (timeSinceLastScroll < MIN_SCROLL_INTERVAL) {\n return;\n }\n\n const newIndex = clamp(currentIndex + direction, [0, maxIndex]);\n\n if (newIndex !== currentIndex) {\n lastScrollTime.current = now;\n setIsScrolling(true);\n setCurrentIndex(newIndex);\n scrollY.set(newIndex * SNAP_DISTANCE);\n\n setTimeout(() => {\n setIsScrolling(false);\n }, transitionDuration + SCROLL_TIMEOUT_OFFSET);\n }\n },\n [currentIndex, maxIndex, scrollY, isScrolling, transitionDuration, clamp]\n );\n\n // Handle scroll events with improved responsiveness\n const handleScroll = useCallback(\n (deltaY: number) => {\n if (isDragging || isScrolling) {\n return;\n }\n\n if (Math.abs(deltaY) < SCROLL_THRESHOLD) {\n return;\n }\n\n const scrollDirection = deltaY > 0 ? 1 : -1;\n scrollToCard(scrollDirection);\n },\n [isDragging, isScrolling, scrollToCard]\n );\n\n // Handle wheel events\n const handleWheel = useCallback(\n (e: WheelEvent) => {\n e.preventDefault();\n handleScroll(e.deltaY);\n },\n [handleScroll]\n );\n\n // Handle keyboard navigation - improved with reference code logic\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (isScrolling) {\n return;\n }\n\n switch (e.key) {\n case \"ArrowUp\":\n case \"ArrowLeft\": {\n e.preventDefault();\n scrollToCard(-1);\n break;\n }\n case \"ArrowDown\":\n case \"ArrowRight\": {\n e.preventDefault();\n scrollToCard(1);\n break;\n }\n case \"Home\": {\n e.preventDefault();\n if (currentIndex !== 0) {\n setIsScrolling(true);\n setCurrentIndex(0);\n scrollY.set(0);\n setTimeout(() => {\n setIsScrolling(false);\n }, transitionDuration + SCROLL_TIMEOUT_OFFSET);\n }\n break;\n }\n case \"End\": {\n e.preventDefault();\n if (currentIndex !== maxIndex) {\n setIsScrolling(true);\n setCurrentIndex(maxIndex);\n scrollY.set(maxIndex * SNAP_DISTANCE);\n setTimeout(() => {\n setIsScrolling(false);\n }, transitionDuration + SCROLL_TIMEOUT_OFFSET);\n }\n break;\n }\n default: {\n // No action for other keys\n break;\n }\n }\n },\n [\n currentIndex,\n maxIndex,\n scrollY,\n isScrolling,\n scrollToCard,\n transitionDuration,\n ]\n );\n\n // Handle touch events for mobile\n const touchStartY = useRef(0);\n const touchStartIndex = useRef(0);\n const touchStartTime = useRef(0);\n const touchMoved = useRef(false);\n\n const handleTouchStart = useCallback(\n (e: React.TouchEvent) => {\n touchStartY.current = e.touches[0].clientY;\n touchStartIndex.current = currentIndex;\n touchStartTime.current = Date.now();\n touchMoved.current = false;\n setIsDragging(true);\n },\n [currentIndex]\n );\n\n const handleTouchMove = useCallback(\n (e: React.TouchEvent) => {\n if (!isDragging || isScrolling) {\n return;\n }\n\n const touchY = e.touches[0].clientY;\n const deltaY = touchStartY.current - touchY;\n\n if (Math.abs(deltaY) > TOUCH_SCROLL_THRESHOLD && !touchMoved.current) {\n const scrollDirection = deltaY > 0 ? 1 : -1;\n scrollToCard(scrollDirection);\n touchMoved.current = true;\n }\n },\n [isDragging, isScrolling, scrollToCard]\n );\n\n const handleTouchEnd = useCallback(() => {\n setIsDragging(false);\n touchMoved.current = false;\n }, []);\n\n // Set up event listeners\n useEffect(() => {\n const container = containerRef.current;\n if (!container) {\n return;\n }\n\n container.addEventListener(\"wheel\", handleWheel, { passive: false });\n\n return () => {\n container.removeEventListener(\"wheel\", handleWheel);\n };\n }, [handleWheel]);\n\n // Snap to current index when not dragging\n useEffect(() => {\n if (!isDragging) {\n scrollY.set(currentIndex * SNAP_DISTANCE);\n }\n }, [currentIndex, isDragging, scrollY]);\n\n // Calculate transform for each card based on the reference code\n const getCardTransform = useCallback(\n (index: number) => {\n const offsetIndex = index - currentIndex;\n\n // Apply blur effect for cards behind the current one - matching reference exactly\n const isBehindCurrent = currentIndex > index;\n const blur = !shouldReduceMotion && isBehindCurrent ? 2 : 0;\n\n // Opacity based on distance - improved logic from reference\n const opacity = currentIndex > index ? 0 : 1;\n\n // Scale with improved calculation inspired by reference - using clamp function\n const scale = shouldReduceMotion\n ? 1\n : clamp(1 - offsetIndex * SCALE_FACTOR, [MIN_SCALE, MAX_SCALE]);\n\n // Vertical offset with improved calculation - matching reference exactly\n const y = shouldReduceMotion\n ? 0\n : clamp(offsetIndex * FRAME_OFFSET, [\n FRAME_OFFSET * FRAMES_VISIBLE_LENGTH,\n Number.POSITIVE_INFINITY,\n ]);\n\n // Z-index for proper layering - matching reference pattern\n const zIndex = items.length - index;\n\n return {\n y,\n scale,\n opacity,\n blur,\n zIndex,\n };\n },\n [currentIndex, items.length, clamp, shouldReduceMotion]\n );\n\n return (\n \n {/* biome-ignore lint/a11y/noNoninteractiveElementInteractions: Interactive scrollable widget requires event handlers */}\n \n {items.map((item, i) => {\n const transform = getCardTransform(i);\n const isActive = i === currentIndex;\n const isHovered = hoveredIndex === i;\n\n return (\n setHoveredIndex(null)}\n onFocus={() => isActive && setHoveredIndex(i)}\n onMouseEnter={() => isActive && setHoveredIndex(i)}\n onMouseLeave={() => setHoveredIndex(null)}\n style={{\n height: `${cardHeight}px`,\n zIndex: transform.zIndex,\n pointerEvents: isActive ? \"auto\" : \"none\",\n transformOrigin: \"center center\",\n willChange: shouldReduceMotion\n ? undefined\n : \"opacity, filter, transform\",\n filter: `blur(${transform.blur}px)`,\n opacity: transform.opacity,\n transitionProperty: shouldReduceMotion\n ? \"none\"\n : \"opacity, filter\",\n transitionDuration: shouldReduceMotion ? \"0ms\" : \"200ms\",\n transitionTimingFunction:\n \"cubic-bezier(0.645, 0.045, 0.355, 1)\",\n // Dynamic border width based on scale - from reference code\n borderWidth: `${2 / transform.scale}px`,\n }}\n tabIndex={isActive ? 0 : -1}\n transition={\n shouldReduceMotion\n ? { duration: 0 }\n : {\n type: \"spring\" as const,\n stiffness: 250,\n damping: 20,\n mass: 0.5,\n duration: 0.25,\n }\n }\n whileHover={\n shouldReduceMotion || !isActive\n ? {}\n : {\n scale: transform.scale * HOVER_SCALE_MULTIPLIER,\n transition: {\n type: \"spring\" as const,\n stiffness: 250,\n damping: 20,\n mass: 0.5,\n duration: 0.25,\n },\n }\n }\n >\n {/* Card Content */}\n \n {/* Scroll indicator */}\n {isScrolling && isActive && (\n
\n )}\n\n {/* Image Container - takes remaining space */}\n
\n {/* Background blur image */}\n \n {/* Image */}\n \n
\n\n {/* User Info - always at bottom */}\n \n \n \n {item.name}\n \n \n {item.handle}\n \n \n
\n \n );\n })}\n\n {/* Navigation indicators */}\n \n {Array.from({ length: items.length }, (_, i) => (\n {\n if (i !== currentIndex && !isScrolling) {\n setIsScrolling(true);\n setCurrentIndex(i);\n scrollY.set(i * SNAP_DISTANCE);\n setTimeout(() => {\n setIsScrolling(false);\n }, transitionDuration + SCROLL_TIMEOUT_OFFSET);\n }\n }}\n role=\"tab\"\n transition={{\n type: \"spring\" as const,\n stiffness: 250,\n damping: 20,\n mass: 0.5,\n }}\n type=\"button\"\n whileHover={{ scale: 1.2 }}\n whileTap={{ scale: 0.9 }}\n />\n ))}\n \n\n {/* Instructions for screen readers */}\n
\n {`Card ${currentIndex + 1} of ${items.length} selected. Use arrow keys to navigate one card at a time, or click the dots below.`}\n
\n \n \n );\n};\n\nexport default ScrollableCardStack;\n","target":"components/smoothui/scrollable-card-stack/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"scrubber","type":"registry:ui","title":"scrubber","description":"Design-tool style scrubber slider with animated thumb and built-in label","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nexport interface ScrubberProps {\n /** Additional CSS classes */\n className?: string;\n /** Number of decimal places to display */\n decimals?: number;\n /** Default value for uncontrolled usage */\n defaultValue?: number;\n /** Label displayed on the left side of the track */\n label?: string;\n /** Maximum value */\n max?: number;\n /** Minimum value */\n min?: number;\n /** Called when value changes during interaction */\n onValueChange?: (value: number) => void;\n /** Step increment */\n step?: number;\n /** Number of tick marks (0 to hide) */\n ticks?: number;\n /** Controlled value */\n value?: number;\n}\n\nconst clamp = (val: number, min: number, max: number) =>\n Math.min(Math.max(val, min), max);\n\nconst roundToStep = (val: number, step: number, min: number) =>\n Math.round((val - min) / step) * step + min;\n\nconst Scrubber = ({\n label = \"Value\",\n value: controlledValue,\n defaultValue = 0,\n onValueChange,\n min = 0,\n max = 1,\n step = 0.01,\n decimals = 2,\n ticks = 9,\n className,\n}: ScrubberProps) => {\n const shouldReduceMotion = useReducedMotion();\n const trackRef = useRef(null);\n const [internalValue, setInternalValue] = useState(defaultValue);\n const [isDragging, setIsDragging] = useState(false);\n const [isHovering, setIsHovering] = useState(false);\n const [isHoverDevice, setIsHoverDevice] = useState(false);\n\n const isControlled = controlledValue !== undefined;\n const value = isControlled ? controlledValue : internalValue;\n const range = max - min;\n const percentage = range > 0 ? ((value - min) / range) * 100 : 0;\n const isActive = isDragging || (isHoverDevice && isHovering);\n\n useEffect(() => {\n const mq = window.matchMedia(\"(hover: hover) and (pointer: fine)\");\n setIsHoverDevice(mq.matches);\n const onChange = (e: MediaQueryListEvent) => setIsHoverDevice(e.matches);\n mq.addEventListener(\"change\", onChange);\n return () => mq.removeEventListener(\"change\", onChange);\n }, []);\n\n const setValue = useCallback(\n (newValue: number) => {\n const clamped = clamp(roundToStep(newValue, step, min), min, max);\n if (!isControlled) {\n setInternalValue(clamped);\n }\n onValueChange?.(clamped);\n },\n [step, min, max, isControlled, onValueChange]\n );\n\n const getValueFromPointer = useCallback(\n (clientX: number) => {\n const track = trackRef.current;\n if (!track) {\n return value;\n }\n const rect = track.getBoundingClientRect();\n const ratio = clamp((clientX - rect.left) / rect.width, 0, 1);\n return min + ratio * range;\n },\n [min, range, value]\n );\n\n const handlePointerDown = useCallback(\n (e: React.PointerEvent) => {\n e.preventDefault();\n trackRef.current?.setPointerCapture(e.pointerId);\n setIsDragging(true);\n setValue(getValueFromPointer(e.clientX));\n },\n [getValueFromPointer, setValue]\n );\n\n const handlePointerMove = useCallback(\n (e: React.PointerEvent) => {\n if (!isDragging) {\n return;\n }\n setValue(getValueFromPointer(e.clientX));\n },\n [isDragging, getValueFromPointer, setValue]\n );\n\n const handlePointerUp = useCallback(() => {\n setIsDragging(false);\n }, []);\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n let next: number | undefined;\n switch (e.key) {\n case \"ArrowRight\":\n case \"ArrowUp\":\n next = value + step;\n break;\n case \"ArrowLeft\":\n case \"ArrowDown\":\n next = value - step;\n break;\n case \"Home\":\n next = min;\n break;\n case \"End\":\n next = max;\n break;\n default:\n return;\n }\n e.preventDefault();\n setValue(next);\n },\n [value, step, min, max, setValue]\n );\n\n const springConfig = shouldReduceMotion\n ? { duration: 0 }\n : { type: \"spring\" as const, duration: 0.25, bounce: 0.1 };\n\n return (\n
\n setIsHovering(true)}\n onMouseLeave={() => setIsHovering(false)}\n onPointerDown={handlePointerDown}\n onPointerMove={handlePointerMove}\n onPointerUp={handlePointerUp}\n ref={trackRef}\n role=\"slider\"\n style={{\n height: 52,\n borderRadius: 12,\n touchAction: \"none\",\n }}\n tabIndex={0}\n >\n {/* Fill indicator */}\n \n\n {/* Tick marks */}\n {ticks > 0 && (\n
\n {Array.from({ length: ticks }, (_, i) => {\n const pos = ((i + 1) / (ticks + 1)) * 100;\n return (\n \n );\n })}\n
\n )}\n\n {/* Scrub bar (capsule thumb) */}\n \n \n
\n\n {/* Label */}\n \n {label}\n \n\n {/* Value display */}\n \n {value.toFixed(decimals)}\n \n \n \n );\n};\n\nexport default Scrubber;\n","target":"components/smoothui/scrubber/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"searchable-dropdown","type":"registry:ui","title":"searchable-dropdown","description":"A SearchableDropdown component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion","lucide-react"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { ChevronDown, Search, X } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nconst ROTATION_ANGLE_OPEN = 180;\n\nexport interface SearchableDropdownItem {\n description?: string;\n icon?: React.ReactNode;\n id: string | number;\n label: string;\n}\n\nexport interface SearchableDropdownProps {\n className?: string;\n emptyMessage?: string;\n items: SearchableDropdownItem[];\n label: string;\n onChange?: (item: SearchableDropdownItem) => void;\n placeholder?: string;\n}\n\nexport default function SearchableDropdown({\n label,\n items,\n onChange,\n placeholder = \"Search...\",\n emptyMessage = \"No results found\",\n className = \"\",\n}: SearchableDropdownProps) {\n const [isOpen, setIsOpen] = useState(false);\n const [selectedItem, setSelectedItem] =\n useState(null);\n const [searchQuery, setSearchQuery] = useState(\"\");\n const dropdownRef = useRef(null);\n const buttonRef = useRef(null);\n const portalRef = useRef(null);\n const inputRef = useRef(null);\n const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });\n const shouldReduceMotion = useReducedMotion();\n\n const filteredItems = useMemo(() => {\n const trimmedQuery = searchQuery.trim();\n if (!trimmedQuery) {\n return items;\n }\n\n // Cache lowercase query to avoid repeated calls\n const query = trimmedQuery.toLowerCase();\n const itemsLength = items.length;\n const results: typeof items = [];\n\n // Early exit optimization: use for loop instead of filter for better performance\n for (let i = 0; i < itemsLength; i++) {\n const item = items[i];\n const label = item.label.toLowerCase();\n const description = item.description?.toLowerCase();\n\n if (label.includes(query) || description?.includes(query)) {\n results.push(item);\n }\n }\n\n return results;\n }, [items, searchQuery]);\n\n const handleItemSelect = (item: SearchableDropdownItem) => {\n setSelectedItem(item);\n setIsOpen(false);\n setSearchQuery(\"\");\n onChange?.(item);\n };\n\n const handleClearSearch = () => {\n setSearchQuery(\"\");\n inputRef.current?.focus();\n };\n\n const handleToggle = () => {\n if (!isOpen && buttonRef.current) {\n const rect = buttonRef.current.getBoundingClientRect();\n setPosition({\n top: rect.bottom + 4,\n left: rect.left,\n width: rect.width,\n });\n }\n setIsOpen(!isOpen);\n if (isOpen) {\n setSearchQuery(\"\");\n } else {\n setTimeout(() => inputRef.current?.focus(), 100);\n }\n };\n\n // Update position on scroll/resize when open\n useEffect(() => {\n if (!(isOpen && buttonRef.current)) {\n return;\n }\n\n const updatePosition = () => {\n if (buttonRef.current) {\n const rect = buttonRef.current.getBoundingClientRect();\n setPosition({\n top: rect.bottom + 4,\n left: rect.left,\n width: rect.width,\n });\n }\n };\n\n window.addEventListener(\"scroll\", updatePosition, true);\n window.addEventListener(\"resize\", updatePosition);\n\n return () => {\n window.removeEventListener(\"scroll\", updatePosition, true);\n window.removeEventListener(\"resize\", updatePosition);\n };\n }, [isOpen]);\n\n // Close dropdown when clicking outside\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n const target = event.target as Node;\n if (\n isOpen &&\n dropdownRef.current &&\n !dropdownRef.current.contains(target) &&\n portalRef.current &&\n !portalRef.current.contains(target)\n ) {\n setIsOpen(false);\n setSearchQuery(\"\");\n }\n };\n\n if (isOpen) {\n document.addEventListener(\"mousedown\", handleClickOutside);\n }\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [isOpen]);\n\n // Keyboard navigation with arrow keys, enter, and escape\n const [focusedIndex, setFocusedIndex] = useState(-1);\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (!isOpen) {\n // Open dropdown on Enter or Space when button is focused\n if (\n (event.key === \"Enter\" || event.key === \" \") &&\n document.activeElement === buttonRef.current\n ) {\n event.preventDefault();\n handleToggle();\n }\n return;\n }\n\n if (event.key === \"Escape\") {\n setIsOpen(false);\n setSearchQuery(\"\");\n setFocusedIndex(-1);\n buttonRef.current?.focus();\n } else if (event.key === \"ArrowDown\") {\n event.preventDefault();\n setFocusedIndex((prev) =>\n prev < filteredItems.length - 1 ? prev + 1 : 0\n );\n } else if (event.key === \"ArrowUp\") {\n event.preventDefault();\n setFocusedIndex((prev) =>\n prev > 0 ? prev - 1 : filteredItems.length - 1\n );\n } else if (event.key === \"Enter\" && focusedIndex >= 0) {\n event.preventDefault();\n const item = filteredItems[focusedIndex];\n if (item) {\n handleItemSelect(item);\n }\n } else if (event.key === \"Home\") {\n event.preventDefault();\n setFocusedIndex(0);\n } else if (event.key === \"End\") {\n event.preventDefault();\n setFocusedIndex(filteredItems.length - 1);\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n // biome-ignore lint/correctness/useExhaustiveDependencies: Handlers are stable via closure\n }, [isOpen, filteredItems, focusedIndex, handleItemSelect, handleToggle]);\n\n // Reset focused index when items change\n useEffect(() => {\n setFocusedIndex(-1);\n }, []);\n\n const dropdownContent = (\n \n {isOpen && (\n
\n \n {/* Search Input */}\n
\n \n \n {\n setSearchQuery(e.target.value);\n setFocusedIndex(-1);\n }}\n placeholder={placeholder}\n ref={inputRef}\n role=\"combobox\"\n type=\"text\"\n value={searchQuery}\n />\n \n {searchQuery && (\n \n \n \n )}\n \n \n
\n\n {/* Items List */}\n \n \n {filteredItems.length > 0 ? (\n filteredItems.map((item, index) => (\n \n handleItemSelect(item)}\n onMouseEnter={() => setFocusedIndex(index)}\n type=\"button\"\n >\n {item.icon && (\n {item.icon}\n )}\n
\n {item.label}\n {item.description && (\n \n {item.description}\n \n )}\n
\n\n {selectedItem?.id === item.id && (\n \n \n Selected\n \n \n \n )}\n \n \n ))\n ) : (\n \n {emptyMessage}\n \n )}\n \n \n \n
\n )}\n \n );\n\n return (\n <>\n
\n \n \n {selectedItem ? selectedItem.label : label}\n \n \n \n \n \n
\n {typeof window !== \"undefined\" &&\n createPortal(dropdownContent, document.body)}\n \n );\n}\n","target":"components/smoothui/searchable-dropdown/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"select","type":"registry:ui","title":"select","description":"An animated Select dropdown component for SmoothUI wrapping Radix Select with smooth animations.","author":"Eduardo Calvo ","dependencies":["lucide-react","motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n DURATION_INSTANT,\n SPRING_DEFAULT,\n SPRING_SNAPPY,\n} from \"../../lib/animation\";\n\n// ---------------------------------------------------------------------------\n// Constants\n// ---------------------------------------------------------------------------\n\nconst CHEVRON_ROTATION = 180;\nconst DROPDOWN_OFFSET = 4;\nconst STAGGER_DELAY = 0.02;\nconst ITEM_HOVER_X = 2;\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface SelectOptionProps {\n /** Whether the option is disabled */\n disabled?: boolean;\n /** The display label for the option */\n label: string;\n /** The value of the option */\n value: string;\n}\n\nexport interface SelectGroupOption {\n /** Label for the group */\n label: string;\n /** Options within this group */\n options: SelectOptionProps[];\n}\n\nexport interface SelectProps {\n /** Accessible label for the select */\n \"aria-label\"?: string;\n /** ID of element that labels this select */\n \"aria-labelledby\"?: string;\n /** Additional CSS class names for the trigger */\n className?: string;\n /** Additional CSS class names for the content dropdown */\n contentClassName?: string;\n /** The default value (uncontrolled) */\n defaultValue?: string;\n /** Whether the select is disabled */\n disabled?: boolean;\n /** Grouped options */\n groups?: SelectGroupOption[];\n /** The name attribute for form submission */\n name?: string;\n /** Callback when the value changes */\n onValueChange?: (value: string) => void;\n /** Flat list of options */\n options?: SelectOptionProps[];\n /** Placeholder text when no value is selected */\n placeholder?: string;\n /** Whether the select is required */\n required?: boolean;\n /** The size of the trigger */\n size?: \"sm\" | \"default\";\n /** The controlled value of the select */\n value?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport default function Select({\n value: controlledValue,\n defaultValue,\n onValueChange,\n placeholder = \"Select an option\",\n disabled = false,\n required = false,\n name,\n options,\n groups,\n className,\n contentClassName,\n size = \"default\",\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n}: SelectProps) {\n const shouldReduceMotion = useReducedMotion();\n const [isOpen, setIsOpen] = useState(false);\n const [internalValue, setInternalValue] = useState(defaultValue ?? \"\");\n const [focusedIndex, setFocusedIndex] = useState(-1);\n const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });\n\n const triggerRef = useRef(null);\n const wrapperRef = useRef(null);\n const portalRef = useRef(null);\n\n const selectedValue =\n controlledValue === undefined ? internalValue : controlledValue;\n\n // Flatten all options for keyboard navigation\n const allOptions: SelectOptionProps[] = (() => {\n const flat: SelectOptionProps[] = [];\n if (options) {\n for (const opt of options) {\n flat.push(opt);\n }\n }\n if (groups) {\n for (const group of groups) {\n for (const opt of group.options) {\n flat.push(opt);\n }\n }\n }\n return flat;\n })();\n\n const selectedLabel = allOptions.find(\n (opt) => opt.value === selectedValue\n )?.label;\n\n // ---------------------------------------------------------------------------\n // Handlers\n // ---------------------------------------------------------------------------\n\n const handleSelect = useCallback(\n (opt: SelectOptionProps) => {\n if (opt.disabled) {\n return;\n }\n if (controlledValue === undefined) {\n setInternalValue(opt.value);\n }\n onValueChange?.(opt.value);\n setIsOpen(false);\n setFocusedIndex(-1);\n triggerRef.current?.focus();\n },\n [controlledValue, onValueChange]\n );\n\n const handleToggle = useCallback(() => {\n if (disabled) {\n return;\n }\n if (!isOpen && triggerRef.current) {\n const rect = triggerRef.current.getBoundingClientRect();\n setPosition({\n top: rect.bottom + DROPDOWN_OFFSET,\n left: rect.left,\n width: rect.width,\n });\n }\n setIsOpen((prev) => !prev);\n setFocusedIndex(-1);\n }, [disabled, isOpen]);\n\n // ---------------------------------------------------------------------------\n // Position updates on scroll/resize\n // ---------------------------------------------------------------------------\n\n useEffect(() => {\n if (!(isOpen && triggerRef.current)) {\n return;\n }\n\n const updatePosition = () => {\n if (triggerRef.current) {\n const rect = triggerRef.current.getBoundingClientRect();\n setPosition({\n top: rect.bottom + DROPDOWN_OFFSET,\n left: rect.left,\n width: rect.width,\n });\n }\n };\n\n window.addEventListener(\"scroll\", updatePosition, true);\n window.addEventListener(\"resize\", updatePosition);\n return () => {\n window.removeEventListener(\"scroll\", updatePosition, true);\n window.removeEventListener(\"resize\", updatePosition);\n };\n }, [isOpen]);\n\n // ---------------------------------------------------------------------------\n // Click outside to close\n // ---------------------------------------------------------------------------\n\n useEffect(() => {\n if (!isOpen) {\n return;\n }\n\n const handleClickOutside = (event: MouseEvent) => {\n const target = event.target as Node;\n if (\n wrapperRef.current &&\n !wrapperRef.current.contains(target) &&\n portalRef.current &&\n !portalRef.current.contains(target)\n ) {\n setIsOpen(false);\n setFocusedIndex(-1);\n }\n };\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n }, [isOpen]);\n\n // ---------------------------------------------------------------------------\n // Keyboard navigation\n // ---------------------------------------------------------------------------\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (!isOpen) {\n if (\n (event.key === \"Enter\" || event.key === \" \") &&\n document.activeElement === triggerRef.current\n ) {\n event.preventDefault();\n handleToggle();\n }\n return;\n }\n\n if (event.key === \"Escape\") {\n setIsOpen(false);\n setFocusedIndex(-1);\n triggerRef.current?.focus();\n } else if (event.key === \"ArrowDown\") {\n event.preventDefault();\n setFocusedIndex((prev) =>\n prev < allOptions.length - 1 ? prev + 1 : 0\n );\n } else if (event.key === \"ArrowUp\") {\n event.preventDefault();\n setFocusedIndex((prev) =>\n prev > 0 ? prev - 1 : allOptions.length - 1\n );\n } else if (event.key === \"Enter\" && focusedIndex >= 0) {\n event.preventDefault();\n const opt = allOptions[focusedIndex];\n if (opt) {\n handleSelect(opt);\n }\n } else if (event.key === \"Home\") {\n event.preventDefault();\n setFocusedIndex(0);\n } else if (event.key === \"End\") {\n event.preventDefault();\n setFocusedIndex(allOptions.length - 1);\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n // biome-ignore lint/correctness/useExhaustiveDependencies: handlers stable via closure\n }, [isOpen, allOptions, focusedIndex, handleSelect, handleToggle]);\n\n // ---------------------------------------------------------------------------\n // Render helpers\n // ---------------------------------------------------------------------------\n\n /** Render a single option item with stagger animation */\n const renderItem = (opt: SelectOptionProps, globalIndex: number) => {\n const isSelected = opt.value === selectedValue;\n const isFocused = globalIndex === focusedIndex;\n\n return (\n \n handleSelect(opt)}\n onMouseEnter={() => setFocusedIndex(globalIndex)}\n role=\"option\"\n type=\"button\"\n >\n {opt.label}\n\n {/* Animated checkmark */}\n \n \n {isSelected && (\n \n \n \n )}\n \n \n \n \n );\n };\n\n // Global index counter for stagger across groups\n let globalIndex = 0;\n\n // ---------------------------------------------------------------------------\n // Dropdown content (portalled)\n // ---------------------------------------------------------------------------\n\n const dropdownContent = (\n \n {isOpen && (\n
\n \n
\n {/* Flat options */}\n {options &&\n options.length > 0 &&\n (() => {\n const items = options.map((opt) => {\n const idx = globalIndex;\n globalIndex += 1;\n return renderItem(opt, idx);\n });\n return items;\n })()}\n\n {/* Grouped options */}\n {groups &&\n groups.map((group, groupIdx) => {\n const groupItems = group.options.map((opt) => {\n const idx = globalIndex;\n globalIndex += 1;\n return renderItem(opt, idx);\n });\n\n return (\n
\n {groupIdx > 0 && (\n
\n )}\n
\n {group.label}\n
\n {groupItems}\n
\n );\n })}\n
\n \n
\n )}\n \n );\n\n // ---------------------------------------------------------------------------\n // Main render\n // ---------------------------------------------------------------------------\n\n return (\n <>\n
\n {/* Hidden native input for form submission */}\n {name && (\n \n )}\n\n \n \n {selectedLabel ?? placeholder}\n \n\n {/* Animated chevron */}\n \n \n \n \n
\n\n {typeof window === \"undefined\"\n ? null\n : createPortal(dropdownContent, document.body)}\n \n );\n}\n","target":"components/smoothui/select/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"siri-orb","type":"registry:ui","title":"siri-orb","description":"A beautiful animated orb component inspired by Siri's visual design.","author":"Eduardo Calvo ","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\n\nconst SIZE_THRESHOLD_SMALL = 50;\nconst SIZE_THRESHOLD_TINY = 30;\nconst SIZE_THRESHOLD_MEDIUM = 100;\nconst BLUR_MULTIPLIER_SMALL = 0.008;\nconst BLUR_MIN_SMALL = 1;\nconst BLUR_MULTIPLIER_LARGE = 0.015;\nconst BLUR_MIN_LARGE = 4;\nconst CONTRAST_MULTIPLIER_SMALL = 0.004;\nconst CONTRAST_MIN_SMALL = 1.2;\nconst CONTRAST_MULTIPLIER_LARGE = 0.008;\nconst CONTRAST_MIN_LARGE = 1.5;\nconst DOT_SIZE_MULTIPLIER_SMALL = 0.004;\nconst DOT_SIZE_MIN_SMALL = 0.05;\nconst DOT_SIZE_MULTIPLIER_LARGE = 0.008;\nconst DOT_SIZE_MIN_LARGE = 0.1;\nconst SHADOW_MULTIPLIER_SMALL = 0.004;\nconst SHADOW_MIN_SMALL = 0.5;\nconst SHADOW_MULTIPLIER_LARGE = 0.008;\nconst SHADOW_MIN_LARGE = 2;\nconst MASK_RADIUS_TINY = \"0%\";\nconst MASK_RADIUS_SMALL = \"5%\";\nconst MASK_RADIUS_MEDIUM = \"15%\";\nconst MASK_RADIUS_LARGE = \"25%\";\nconst CONTRAST_TINY = 1.1;\nconst CONTRAST_MULTIPLIER_FINAL = 1.2;\nconst CONTRAST_MIN_FINAL = 1.3;\n\nexport interface SiriOrbProps {\n animationDuration?: number;\n className?: string;\n colors?: {\n bg?: string;\n c1?: string;\n c2?: string;\n c3?: string;\n };\n size?: string;\n}\n\nconst SiriOrb: React.FC = ({\n size = \"192px\",\n className,\n colors,\n animationDuration = 20,\n}) => {\n const defaultColors = {\n bg: \"oklch(95% 0.02 264.695)\",\n c1: \"oklch(75% 0.15 350)\", // Pastel pink\n c2: \"oklch(80% 0.12 200)\", // Pastel blue\n c3: \"oklch(78% 0.14 280)\", // Pastel purple/lavender\n };\n\n const finalColors = { ...defaultColors, ...colors };\n\n // Extract numeric value from size for calculations\n const sizeValue = Number.parseInt(size.replace(\"px\", \"\"), 10);\n\n // Responsive calculations based on size\n const blurAmount =\n sizeValue < SIZE_THRESHOLD_SMALL\n ? Math.max(sizeValue * BLUR_MULTIPLIER_SMALL, BLUR_MIN_SMALL) // Reduced blur for small sizes\n : Math.max(sizeValue * BLUR_MULTIPLIER_LARGE, BLUR_MIN_LARGE);\n\n const contrastAmount =\n sizeValue < SIZE_THRESHOLD_SMALL\n ? Math.max(sizeValue * CONTRAST_MULTIPLIER_SMALL, CONTRAST_MIN_SMALL) // Reduced contrast for small sizes\n : Math.max(sizeValue * CONTRAST_MULTIPLIER_LARGE, CONTRAST_MIN_LARGE);\n\n const dotSize =\n sizeValue < SIZE_THRESHOLD_SMALL\n ? Math.max(sizeValue * DOT_SIZE_MULTIPLIER_SMALL, DOT_SIZE_MIN_SMALL) // Smaller dots for small sizes\n : Math.max(sizeValue * DOT_SIZE_MULTIPLIER_LARGE, DOT_SIZE_MIN_LARGE);\n\n const shadowSpread =\n sizeValue < SIZE_THRESHOLD_SMALL\n ? Math.max(sizeValue * SHADOW_MULTIPLIER_SMALL, SHADOW_MIN_SMALL) // Reduced shadow for small sizes\n : Math.max(sizeValue * SHADOW_MULTIPLIER_LARGE, SHADOW_MIN_LARGE);\n\n // Adjust mask radius based on size to reduce black center in small sizes\n const getMaskRadius = (value: number) => {\n if (value < SIZE_THRESHOLD_TINY) {\n return MASK_RADIUS_TINY;\n }\n if (value < SIZE_THRESHOLD_SMALL) {\n return MASK_RADIUS_SMALL;\n }\n if (value < SIZE_THRESHOLD_MEDIUM) {\n return MASK_RADIUS_MEDIUM;\n }\n return MASK_RADIUS_LARGE;\n };\n\n const maskRadius = getMaskRadius(sizeValue);\n\n // Use more subtle contrast for very small sizes\n const getFinalContrast = (value: number) => {\n if (value < SIZE_THRESHOLD_TINY) {\n return CONTRAST_TINY; // Very subtle contrast for tiny sizes\n }\n if (value < SIZE_THRESHOLD_SMALL) {\n return Math.max(\n contrastAmount * CONTRAST_MULTIPLIER_FINAL,\n CONTRAST_MIN_FINAL\n ); // Reduced contrast for small sizes\n }\n return contrastAmount;\n };\n\n const finalContrast = getFinalContrast(sizeValue);\n\n return (\n \n \n
\n );\n};\n\nexport default SiriOrb;\n","target":"components/smoothui/siri-orb/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"skeleton-loader","type":"registry:ui","title":"skeleton-loader","description":"Animated skeleton loading placeholders","author":"Eduardo Calvo ","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport type { ReactNode } from \"react\";\n\nexport interface SkeletonProps {\n /** Content to wrap - skeleton will match its dimensions */\n children?: ReactNode;\n /** Additional classes */\n className?: string;\n /** When true, shows skeleton effect. When false, shows children */\n loading?: boolean;\n}\n\nconst Skeleton = ({ loading = true, children, className }: SkeletonProps) => {\n // If not loading and has children, just render children\n if (!loading && children) {\n return <>{children};\n }\n\n // If loading with children, wrap them and apply skeleton effect\n if (loading && children) {\n return (\n \n {/* Children are invisible but maintain layout */}\n
{children}
\n {/* Skeleton overlay that matches children's dimensions */}\n \n \n );\n }\n\n // Basic skeleton block (no children)\n return (\n \n );\n};\n\nexport default Skeleton;\n","target":"components/smoothui/skeleton-loader/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"smooth-button","type":"registry:ui","title":"smooth-button","description":"A polished button component with gradient variants and press animation","author":"Eduardo Calvo ","dependencies":["@radix-ui/react-slot","class-variance-authority"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type React from \"react\";\nimport type { ButtonHTMLAttributes } from \"react\";\n\nconst smoothButtonVariants = cva(\n \"inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm ring-offset-background transition-transform duration-150 ease-out focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90\",\n destructive:\n \"bg-gradient-to-b from-[#FD4B4E] to-destructive text-shadow-sm text-white shadow-[0px_1px_2px_rgba(0,0,0,0.4),0px_0px_0px_1px_#F61418,inset_0px_0.75px_0px_rgba(255,255,255,0.2)] hover:from-destructive hover:to-destructive\",\n outline:\n \"border border-input bg-background shadow-xs hover:bg-accent hover:text-white dark:bg-input/30 dark:hover:bg-input/50\",\n secondary:\n \"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80\",\n ghost: \"hover:bg-background hover:text-foreground hover:shadow-custom\",\n link: \"text-primary underline-offset-4 hover:underline\",\n candy:\n \"border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-shadow-sm text-white shadow-black/20 shadow-md ring-(--ring-color) ring-1 [--ring-color:color-mix(in_oklab,var(--color-foreground)15%,var(--color-brand))] hover:from-brand-secondary hover:to-brand-secondary [&_svg]:drop-shadow-sm\",\n },\n size: {\n default: \"h-10 px-4 py-2\",\n sm: \"h-9 rounded-md px-4 py-2\",\n lg: \"h-11 rounded-md px-8\",\n icon: \"h-10 w-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n);\n\nexport type SmoothButtonProps = ButtonHTMLAttributes &\n VariantProps & {\n asChild?: boolean;\n ref?: React.Ref;\n };\n\nfunction SmoothButton({\n className,\n variant,\n size,\n asChild = false,\n ref,\n ...props\n}: SmoothButtonProps) {\n const Comp = asChild ? Slot : \"button\";\n return (\n \n );\n}\n\nexport default SmoothButton;\nexport { smoothButtonVariants };\n","target":"components/smoothui/smooth-button/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"social-selector","type":"registry:ui","title":"social-selector","description":"A SocialSelector component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { useState } from \"react\";\n\ntype XIconProps = React.SVGProps & {\n className?: string;\n};\n\nexport const XIcon: React.FC = ({ className, ...props }) => (\n \n X icon\n \n \n);\n\ntype ThreadsIconProps = React.SVGProps & {\n className?: string;\n};\n\nexport const ThreadsIcon: React.FC = ({\n className,\n ...props\n}) => (\n \n Threads icon\n \n \n);\n\ntype BskyIconProps = React.SVGProps & {\n className?: string;\n};\n\nexport const BskyIcon: React.FC = ({ className, ...props }) => (\n \n Bluesky icon\n \n \n);\n\nexport interface Platform {\n domain: string;\n icon: React.ReactNode;\n name: string;\n url: string;\n}\n\nconst ICON_SIZE = 36;\nconst ICON_GAP = 16;\n\nconst defaultPlatforms: Platform[] = [\n {\n name: \"X\",\n domain: \"x.com\",\n icon: ,\n url: \"https://x.com/educalvolpz\",\n },\n {\n name: \"Bluesky\",\n domain: \"bsky.app\",\n icon: ,\n url: \"https://bsky.app/profile/educalvolpz.bsky.social\",\n },\n {\n name: \"Threads\",\n domain: \"threads.net\",\n icon: ,\n url: \"https://threads.net/@educalvolpz\",\n },\n];\n\nexport interface SocialSelectorProps {\n className?: string;\n handle?: string;\n onChange?: (platform: Platform) => void;\n platforms?: Platform[];\n selectedPlatform?: Platform;\n}\n\nexport default function SocialSelector({\n platforms = defaultPlatforms,\n handle = \"educalvolpz\",\n selectedPlatform: controlledSelected,\n onChange,\n className = \"\",\n}: SocialSelectorProps) {\n const [internalSelected, setInternalSelected] = useState(\n platforms[0]\n );\n const shouldReduceMotion = useReducedMotion();\n const selectedPlatform = controlledSelected ?? internalSelected;\n\n return (\n
\n
\n
\n
\n {platforms.map((platform) => (\n {\n if (onChange) {\n onChange(platform);\n } else {\n setInternalSelected(platform);\n }\n }}\n type=\"button\"\n >\n {platform.icon}\n {platform.name}\n \n ))}\n p.name === selectedPlatform.name\n ) *\n (ICON_SIZE + ICON_GAP),\n }\n }\n className=\"absolute inset-0 z-0 h-9 w-9 rounded-full border bg-background\"\n initial={false}\n layoutId={shouldReduceMotion ? undefined : \"background\"}\n transition={\n shouldReduceMotion\n ? { duration: 0 }\n : {\n type: \"spring\" as const,\n stiffness: 500,\n damping: 30,\n duration: 0.25,\n }\n }\n />\n
\n
\n

\n Updates on{\" \"}\n \n \n {selectedPlatform.domain}\n \n \n
\n \n @{handle}\n \n

\n
\n
\n );\n}\n","target":"components/smoothui/social-selector/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"switchboard-card","type":"registry:ui","title":"switchboard-card","description":"A SwitchboardCard component with light grid illustration for SmoothUI.","author":"Eduardo Calvo ","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { useEffect, useMemo, useState } from \"react\";\n\nexport type LightState = \"off\" | \"medium\" | \"high\";\n\nexport interface SwitchboardCardProps {\n className?: string;\n columns?: number;\n gridPattern?: number[] | number[][]; // Direct grid pattern: flat array (columns*rows) or 2D array [rows][columns] where 0=off, 1=high\n href?: string;\n onButtonClick?: () => void;\n randomLights?: boolean; // If true, randomly activate some lights\n rows?: number;\n showButton?: boolean;\n subtitle: string;\n title: string;\n transitionDuration?: number; // in milliseconds (default: 200ms for smooth light transitions)\n variant?: \"default\" | \"next\";\n}\n\nfunction generateRandomPattern(\n totalLights: number,\n activeRatio = 0.15\n): number[] {\n const activeCount = Math.floor(totalLights * activeRatio);\n const pattern: number[] = [];\n const used = new Set();\n\n while (pattern.length < activeCount) {\n const index = Math.floor(Math.random() * totalLights);\n if (!used.has(index)) {\n used.add(index);\n pattern.push(index);\n }\n }\n\n return pattern.sort((a, b) => a - b);\n}\n\nfunction parse2DGridPattern(\n grid2D: number[][],\n rows: number,\n columns: number,\n totalLights: number\n): number[] {\n const pattern: number[] = [];\n for (let row = 0; row < Math.min(grid2D.length, rows); row++) {\n const rowData = grid2D[row];\n if (Array.isArray(rowData)) {\n for (let col = 0; col < Math.min(rowData.length, columns); col++) {\n if (rowData[col] === 1) {\n const index = col + row * columns;\n if (index >= 0 && index < totalLights) {\n pattern.push(index);\n }\n }\n }\n }\n }\n return pattern;\n}\n\nfunction parseFlatGridPattern(\n flatPattern: number[],\n totalLights: number\n): number[] {\n const pattern: number[] = [];\n for (let i = 0; i < Math.min(flatPattern.length, totalLights); i++) {\n if (flatPattern[i] === 1) {\n pattern.push(i);\n }\n }\n return pattern;\n}\n\nexport default function SwitchboardCard({\n title,\n subtitle,\n columns = 18,\n rows = 5,\n gridPattern,\n randomLights = false,\n transitionDuration = 200,\n className,\n variant = \"default\",\n showButton: _showButton = true,\n href,\n onButtonClick,\n}: SwitchboardCardProps) {\n const totalLights = columns * rows;\n const isRandomLightsMode = randomLights && !gridPattern;\n\n // Convert gridPattern to light indices\n // Priority: gridPattern > randomLights\n const basePattern = useMemo(() => {\n if (gridPattern) {\n // Handle 2D array [rows][columns]\n const is2DArray =\n Array.isArray(gridPattern[0]) && typeof gridPattern[0] !== \"number\";\n if (is2DArray) {\n return parse2DGridPattern(\n gridPattern as number[][],\n rows,\n columns,\n totalLights\n );\n }\n // Handle flat array [columns*rows]\n return parseFlatGridPattern(gridPattern as number[], totalLights);\n }\n if (randomLights) {\n return generateRandomPattern(totalLights);\n }\n return [];\n }, [gridPattern, randomLights, columns, rows, totalLights]);\n\n // Animated light states\n // For random lights: all start off, will animate randomly through medium → high → medium → off\n // For word/pattern: pattern lights start high (stay high), rest off\n const [lightStates, setLightStates] = useState(() => {\n const states: LightState[] = new Array(totalLights).fill(\"off\");\n if (!isRandomLightsMode) {\n // For word/pattern, set pattern lights to high\n for (const index of basePattern) {\n if (index >= 0 && index < totalLights) {\n states[index] = \"high\";\n }\n }\n }\n // For random lights, all start off (will animate)\n return states;\n });\n\n // Animate lights - only for random lights mode (word/pattern stays high)\n useEffect(() => {\n // Word/pattern mode: no animation, lights stay high\n if (!isRandomLightsMode) {\n return;\n }\n\n const interval = setInterval(() => {\n setLightStates((prev) => {\n const next = [...prev];\n // For random lights: animate all lights randomly through off → high (via medium transition)\n // Randomly select a subset of lights to animate each tick\n const lightsToAnimate = Math.floor(totalLights * 0.2); // Animate ~20% of all lights per tick\n const allIndices = Array.from({ length: totalLights }, (_, i) => i);\n const shuffled = allIndices.sort(() => Math.random() - 0.5);\n\n for (let i = 0; i < Math.min(lightsToAnimate, shuffled.length); i++) {\n const index = shuffled[i];\n if (index >= 0 && index < totalLights) {\n const current = prev[index];\n // State transition logic for random lights: off → high (with medium as intermediate transition state)\n // Medium state is only used as a transition, not a final state\n if (current === \"off\") {\n // Start transition to high by going to medium first\n next[index] = \"medium\";\n } else if (current === \"medium\") {\n // Continue transition: medium → high\n next[index] = \"high\";\n } else if (current === \"high\") {\n // Turn off directly (no medium transition when turning off)\n next[index] = \"off\";\n }\n }\n }\n return next;\n });\n }, 200); // 0.2s interval to match transition duration\n\n return () => clearInterval(interval);\n }, [isRandomLightsMode, totalLights]);\n\n const isNextVariant = variant === \"next\";\n\n const CardContent = (\n \n {/* Illustration/Switchboard */}\n \n \n {lightStates.map((state, index) => (\n \n ))}\n \n \n\n {/* Title */}\n
\n \n {title}\n \n
\n\n {/* Subtitle */}\n \n {subtitle}\n

\n \n );\n\n if (href) {\n return (\n \n {CardContent}\n \n );\n }\n\n if (onButtonClick) {\n return (\n \n {CardContent}\n \n );\n }\n\n return CardContent;\n}\n\nfunction LightBulb({\n state,\n transitionDuration,\n}: {\n state: LightState;\n transitionDuration: number;\n}) {\n const transitionStyle = {\n transition: `opacity ${transitionDuration}ms ease-out, transform ${transitionDuration}ms ease-out`,\n };\n\n return (\n \n {/* Glow effect for medium state (::before equivalent) */}\n {state === \"medium\" && (\n \n )}\n\n {/* Glow effect for high state (::after equivalent) */}\n {state === \"high\" && (\n \n )}\n \n );\n}\n","target":"components/smoothui/switchboard-card/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"tweet-card","type":"registry:ui","title":"tweet-card","description":"A beautiful tweet card component for displaying Twitter/X posts.","author":"Eduardo Calvo ","dependencies":["react-tweet"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"client.tsx","content":"\"use client\";\n\nimport { type TweetProps, useTweet } from \"react-tweet\";\n\nimport { SmoothTweet, TweetNotFound, TweetSkeleton } from \"./index\";\n\nexport type ClientTweetCardProps = TweetProps & {\n className?: string;\n userInfoPosition?: \"top\" | \"bottom\";\n avatarRounded?: string;\n};\n\nexport const ClientTweetCard = ({\n id,\n apiUrl,\n fallback = ,\n components,\n fetchOptions,\n onError,\n ...props\n}: ClientTweetCardProps) => {\n const { data, error, isLoading } = useTweet(id, apiUrl, fetchOptions);\n\n if (isLoading) {\n return fallback;\n }\n if (error || !data) {\n const NotFound = components?.TweetNotFound || TweetNotFound;\n return ;\n }\n\n return ;\n};\n","target":"components/smoothui/tweet-card/client.tsx"},{"type":"registry:ui","path":"index.tsx","content":"/* eslint-disable @next/next/no-img-element */\n\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport { Suspense } from \"react\";\nimport { type EnrichedTweet, enrichTweet, type TweetProps } from \"react-tweet\";\nimport { getTweet, type Tweet } from \"react-tweet/api\";\n\ninterface IconProps {\n className?: string;\n [key: string]: unknown;\n}\n\nconst ExternalLink = ({ className, ...props }: IconProps) => (\n \n \n \n \n \n);\n\nexport const truncate = (str: string | null, length: number) => {\n if (!str || str.length <= length) {\n return str;\n }\n return `${str.slice(0, length - 3)}...`;\n};\n\nconst Skeleton = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\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 = ({\n tweet,\n avatarRounded = \"rounded\",\n}: {\n tweet: EnrichedTweet;\n avatarRounded?: string;\n}) => (\n
\n \n \n \n
\n

\n {tweet.user.name}\n

\n

\n @{truncate(tweet.user.screen_name, 16)}\n

\n
\n
\n);\n\nexport const TweetBody = ({ tweet }: { tweet: EnrichedTweet }) => (\n
\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 {entity.text}\n \n );\n default:\n return null;\n }\n })}\n

\n
\n);\n\nexport const TweetMedia = ({ tweet }: { tweet: EnrichedTweet }) => {\n const hasVideo =\n tweet.video &&\n Array.isArray(tweet.video.variants) &&\n tweet.video.variants.length > 0;\n const hasPhotos = tweet.photos && tweet.photos.length > 0;\n const hasCardThumbnail =\n // @ts-expect-error package doesn't have type definitions\n tweet?.card?.binding_values?.thumbnail_image_large?.image_value.url;\n\n if (!(hasVideo || hasPhotos || hasCardThumbnail)) {\n return null;\n }\n\n return (\n
\n {hasVideo && tweet.video && (\n \n \n Your browser does not support the video tag.\n \n )}\n {hasPhotos &&\n tweet.photos &&\n (() => {\n const photos = tweet.photos;\n return (\n
\n {photos.length === 1 && (\n \n )}\n {photos.length === 2 && (\n
\n {photos.map((photo) => (\n \n ))}\n
\n )}\n {photos.length >= 3 && (\n
\n {photos.slice(0, 4).map((photo, index) => (\n 3 && \"row-span-2\"\n )}\n height={photo.height}\n key={photo.url}\n src={photo.url}\n title={`Photo by ${tweet.user.name}`}\n width={photo.width}\n />\n ))}\n
\n )}\n
\n );\n })()}\n {!(hasVideo || hasPhotos) && hasCardThumbnail && (\n \n )}\n
\n );\n};\n\nexport const SmoothTweet = ({\n tweet,\n className,\n userInfoPosition = \"bottom\",\n avatarRounded = \"rounded\",\n ...props\n}: {\n tweet: Tweet;\n className?: string;\n userInfoPosition?: \"top\" | \"bottom\";\n avatarRounded?: string;\n}) => {\n // react-tweet's enrichTweet iterates over each entity array without\n // guarding for undefined. The syndication API can omit arrays (e.g.\n // symbols/user_mentions) for some tweets, which would throw\n // \"entities is not iterable\" and crash the whole tree. Normalize first.\n const safeTweet: Tweet = {\n ...tweet,\n entities: {\n hashtags: tweet.entities?.hashtags ?? [],\n symbols: tweet.entities?.symbols ?? [],\n urls: tweet.entities?.urls ?? [],\n user_mentions: tweet.entities?.user_mentions ?? [],\n ...(tweet.entities?.media ? { media: tweet.entities.media } : {}),\n },\n };\n const enrichedTweet = enrichTweet(safeTweet);\n const userInfo = (\n \n );\n const content = (\n
\n \n {userInfoPosition === \"bottom\" && userInfo}\n
\n );\n\n return (\n \n {userInfoPosition === \"top\" && userInfo}\n \n {content}\n \n window.open(enrichedTweet.url, \"_blank\", \"noopener,noreferrer\")\n }\n type=\"button\"\n >\n \n \n \n );\n};\n\n/**\n * TweetCard (Server Side Only)\n */\nexport type TweetCardProps = TweetProps & {\n className?: string;\n userInfoPosition?: \"top\" | \"bottom\";\n avatarRounded?: string;\n};\n\nexport const TweetCard = async ({\n id,\n components,\n fallback = ,\n onError,\n ...props\n}: TweetCardProps) => {\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\nexport { ClientTweetCard } from \"./client\";\nexport default TweetCard;\n","target":"components/smoothui/tweet-card/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"typewriter-text","type":"registry:ui","title":"typewriter-text","description":"A TypewriterText component for SmoothUI.","author":"Eduardo Calvo ","dependencies":[],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"import type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nfunction useReducedMotion() {\n const [shouldReduceMotion, setShouldReduceMotion] = useState(false);\n\n useEffect(() => {\n const mediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n setShouldReduceMotion(mediaQuery.matches);\n\n const handleChange = (e: MediaQueryListEvent) => {\n setShouldReduceMotion(e.matches);\n };\n\n mediaQuery.addEventListener(\"change\", handleChange);\n return () => mediaQuery.removeEventListener(\"change\", handleChange);\n }, []);\n\n return shouldReduceMotion;\n}\n\nexport interface TypewriterTextProps {\n children: string;\n className?: string;\n loop?: boolean;\n speed?: number;\n}\n\nconst LOOP_RESTART_DELAY_MS = 1000;\n\nconst TypewriterText: React.FC = ({\n children,\n speed = 50,\n loop = false,\n className = \"\",\n}) => {\n const [displayed, setDisplayed] = useState(\"\");\n const index = useRef(0);\n const timeout = useRef(null);\n const shouldReduceMotion = useReducedMotion();\n\n useEffect(() => {\n if (shouldReduceMotion) {\n // Show full text immediately when reduced motion is enabled\n setDisplayed(children);\n return;\n }\n\n setDisplayed(\"\");\n index.current = 0;\n function type() {\n setDisplayed(children.slice(0, index.current + 1));\n if (index.current < children.length - 1) {\n index.current++;\n timeout.current = setTimeout(type, speed);\n } else if (loop) {\n timeout.current = setTimeout(() => {\n setDisplayed(\"\");\n index.current = 0;\n type();\n }, LOOP_RESTART_DELAY_MS);\n }\n }\n type();\n return () => {\n if (timeout.current) {\n clearTimeout(timeout.current);\n }\n };\n }, [children, speed, loop, shouldReduceMotion]);\n\n return {displayed};\n};\n\nexport default TypewriterText;\n","target":"components/smoothui/typewriter-text/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"user-account-avatar","type":"registry:ui","title":"user-account-avatar","description":"A UserAccountAvatar component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion","lucide-react","@radix-ui/react-popover"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport {\n Content as PopoverContent,\n Portal as PopoverPortal,\n Root as PopoverRoot,\n Trigger as PopoverTrigger,\n} from \"@radix-ui/react-popover\";\nimport { Eye, Package, User } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useState } from \"react\";\n\nexport interface UserData {\n avatar: string;\n email: string;\n name: string;\n}\n\nexport interface Order {\n date: string;\n id: string;\n progress: number;\n status: \"processing\" | \"shipped\" | \"delivered\";\n}\n\nexport interface UserAccountAvatarProps {\n className?: string;\n onOrderView?: (orderId: string) => void;\n onProfileSave?: (user: UserData) => void;\n orders?: Order[];\n user: UserData;\n}\n\nconst mockOrders: Order[] = [\n { id: \"ORD001\", date: \"2023-03-15\", status: \"delivered\", progress: 100 },\n { id: \"ORD002\", date: \"2023-03-20\", status: \"shipped\", progress: 66 },\n];\n\nexport default function UserAccountAvatar({\n user,\n orders = mockOrders,\n onProfileSave,\n onOrderView,\n className = \"\",\n}: UserAccountAvatarProps) {\n const [activeSection, setActiveSection] = useState(null);\n const [userData, setUserData] = useState(user);\n const shouldReduceMotion = useReducedMotion();\n\n const handleSectionClick = (section: string) => {\n setActiveSection(activeSection === section ? null : section);\n };\n\n const handleProfileSave = (e: React.FormEvent) => {\n e.preventDefault();\n const formData = new FormData(e.currentTarget);\n const updatedUser = {\n ...userData,\n name: formData.get(\"name\") as string,\n email: formData.get(\"email\") as string,\n };\n setUserData(updatedUser);\n if (onProfileSave) {\n onProfileSave(updatedUser);\n }\n setActiveSection(null);\n };\n\n const renderEditProfile = () => (\n
\n
\n \n Name\n \n \n
\n
\n \n Email\n \n \n
\n\n \n Save Changes\n \n \n );\n\n const getStatusColor = (status: Order[\"status\"]) => {\n if (status === \"processing\") {\n return \"bg-blue-500\";\n }\n if (status === \"shipped\") {\n return \"bg-amber-500\";\n }\n return \"bg-emerald-500\";\n };\n\n const renderLastOrders = () => (\n
\n {orders.map((order) => (\n \n
\n
{order.id}
\n
{order.date}
\n
\n
\n
\n
\n \n {order.status}\n \n {order.progress}%\n
\n
\n \n
\n
\n {\n onOrderView?.(order.id);\n }}\n type=\"button\"\n >\n \n \n
\n
\n ))}\n \n );\n\n return (\n \n \n \n \n \n \n \n e.preventDefault()}\n sideOffset={8}\n style={{ pointerEvents: \"auto\" }}\n >\n \n \n {\n handleSectionClick(\"profile\");\n }}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n handleSectionClick(\"profile\");\n }\n }}\n type=\"button\"\n >\n \n Edit Profile\n \n \n {activeSection === \"profile\" && (\n \n {renderEditProfile()}\n \n )}\n \n {\n handleSectionClick(\"orders\");\n }}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n handleSectionClick(\"orders\");\n }\n }}\n type=\"button\"\n >\n \n Last Orders\n \n \n {activeSection === \"orders\" && (\n \n {renderLastOrders()}\n \n )}\n \n \n \n \n \n \n );\n}\n","target":"components/smoothui/user-account-avatar/index.tsx"}],"css":{}},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"wave-text","type":"registry:ui","title":"wave-text","description":"A WaveText component for SmoothUI.","author":"Eduardo Calvo ","dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"import { motion, useReducedMotion } from \"motion/react\";\nimport type React from \"react\";\n\nexport interface WaveTextProps {\n amplitude?: number;\n children: string;\n className?: string;\n duration?: number;\n staggerDelay?: number;\n}\n\nconst WaveText: React.FC = ({\n children,\n amplitude = 8,\n duration = 1.2,\n staggerDelay = 0.05,\n className = \"\",\n}) => {\n const shouldReduceMotion = useReducedMotion();\n\n return (\n \n {children.split(\"\").map((char, i) => (\n \n {char === \" \" ? \"\\u00A0\" : char}\n \n ))}\n \n );\n};\n\nexport default WaveText;\n","target":"components/smoothui/wave-text/index.tsx"}],"css":{}}]}