{"homepage":"https://smoothui.dev/","items":[{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["@clack/prompts","picocolors"],"description":"CLI to install SmoothUI components - beautifully designed React components with smooth animations","devDependencies":["@types/node","tsup","tsx","ultracite","vitest"],"files":[{"content":"import { existsSync, readFileSync } from \"node:fs\";\nimport path from \"node:path\";\nimport { describe, expect, it } from \"vitest\";\n\ninterface PackageJson {\n bin?: Record;\n files?: string[];\n name?: string;\n private?: boolean;\n publishConfig?: Record;\n repository?: { directory?: string };\n version?: string;\n}\n\ninterface ReleasePleaseConfig {\n packages: Record;\n}\n\nconst readJson = (filePath: string): Value =>\n JSON.parse(\n readFileSync(path.join(repositoryRoot, filePath), \"utf8\")\n ) as Value;\n\nconst repositoryRoot = path.resolve(import.meta.dirname, \"../..\");\nconst repositoryPathExists = (filePath: string): boolean =>\n existsSync(path.join(repositoryRoot, filePath));\n\ndescribe(\"smoothui-cli workspace isolation\", () => {\n it(\"keeps the repository root private and non-publishable\", () => {\n const rootPackage = readJson(\"package.json\");\n\n expect(rootPackage.private).toBe(true);\n expect(rootPackage.name).not.toBe(\"smoothui-cli\");\n expect(rootPackage.bin).toBeUndefined();\n expect(rootPackage.publishConfig).toBeUndefined();\n expect(repositoryPathExists(\"scripts/index.ts\")).toBe(false);\n });\n\n it(\"owns all publish metadata inside packages/cli\", () => {\n const cliPackage = readJson(\"packages/cli/package.json\");\n const manifest = readJson>(\n \".release-please-manifest.json\"\n );\n\n expect(cliPackage).toMatchObject({\n bin: {\n smoothui: \"dist/index.js\",\n \"smoothui-cli\": \"dist/index.js\",\n },\n files: [\"dist/index.js\", \"README.md\", \"LICENSE\"],\n name: \"smoothui-cli\",\n publishConfig: { access: \"public\", provenance: true },\n repository: { directory: \"packages/cli\" },\n });\n expect(cliPackage.version).toBe(manifest[\"packages/cli\"]);\n expect(repositoryPathExists(\"packages/cli/scripts/index.ts\")).toBe(true);\n expect(repositoryPathExists(\"packages/cli/README.md\")).toBe(true);\n expect(repositoryPathExists(\"packages/cli/LICENSE\")).toBe(true);\n expect(\n readFileSync(path.join(repositoryRoot, \"packages/cli/LICENSE\"))\n ).toEqual(readFileSync(path.join(repositoryRoot, \"LICENSE\")));\n });\n\n it(\"uses workspace paths as the release boundaries\", () => {\n const releaseConfig = readJson(\n \"release-please-config.json\"\n );\n const manifest = readJson>(\n \".release-please-manifest.json\"\n );\n const cliPackage = readJson(\"packages/cli/package.json\");\n const libraryPackage = readJson(\n \"packages/smoothui/package.json\"\n );\n\n expect(releaseConfig.packages).toEqual({\n \"packages/cli\": {\n component: \"cli\",\n \"include-component-in-tag\": true,\n \"package-name\": \"smoothui-cli\",\n },\n \"packages/smoothui\": { \"package-name\": \"smoothui\" },\n });\n expect(Object.keys(manifest).sort()).toEqual([\n \"packages/cli\",\n \"packages/smoothui\",\n ]);\n expect(manifest[\"packages/cli\"]).toBe(cliPackage.version);\n expect(manifest[\"packages/smoothui\"]).toBe(libraryPackage.version);\n });\n});\n","path":"package-isolation.test.ts","target":"components/smoothui/cli/package-isolation.test.ts","type":"registry:ui"}],"name":"cli","registryDependencies":[],"title":"Cli","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":[],"devDependencies":[],"files":[{"content":"/**\n * Component metadata types for AI-first developer experience.\n *\n * These types define structured, machine-readable metadata for SmoothUI\n * components and blocks, enabling AI agents to discover, filter, and\n * understand components without reading source code.\n */\n\n// ---------------------------------------------------------------------------\n// Category types\n// ---------------------------------------------------------------------------\n\nexport type ComponentCategory =\n | \"basic-ui\"\n | \"button\"\n | \"text\"\n | \"ai\"\n | \"layout\"\n | \"feedback\"\n | \"data-display\"\n | \"navigation\"\n | \"other\";\n\nexport type AnimationType = \"spring\" | \"tween\" | \"gesture\" | \"scroll\" | \"none\";\n\nexport type Complexity = \"simple\" | \"moderate\" | \"complex\";\n\n// ---------------------------------------------------------------------------\n// Component metadata\n// ---------------------------------------------------------------------------\n\n/**\n * Full metadata for a single SmoothUI component.\n *\n * Combines data from two sources:\n * - `smoothui` field in the component's package.json (authored by hand)\n * - MDX frontmatter and registry info (derived at build time)\n */\nexport interface ComponentMeta {\n /** Dominant animation technique */\n animationType: AnimationType;\n /** Primary UI category */\n category: ComponentCategory;\n /** Rough complexity level */\n complexity: Complexity;\n /** Hints for combining with other components */\n compositionHints: readonly string[];\n /** npm packages required (excluding peer deps) */\n dependencies: readonly string[];\n /** 1-2 sentence human-readable description */\n description: string;\n /** PascalCase display name, e.g. \"AnimatedTabs\" */\n displayName: string;\n /** Full documentation URL */\n docUrl: string;\n /** Whether the component respects prefers-reduced-motion */\n hasReducedMotion: boolean;\n /** shadcn-style install command */\n installCommand: string;\n /** kebab-case identifier, e.g. \"animated-tabs\" */\n name: string;\n /** Number of public props */\n propsCount: number;\n /** Other SmoothUI components required */\n registryDependencies: readonly string[];\n /** Registry JSON URL */\n registryUrl: string;\n /** Discoverable tags, e.g. [\"animation\", \"tabs\", \"navigation\"] */\n tags: readonly string[];\n /** Natural-language use-case descriptions */\n useCases: readonly string[];\n}\n\n// ---------------------------------------------------------------------------\n// Block metadata\n// ---------------------------------------------------------------------------\n\nexport type BlockType =\n | \"hero\"\n | \"features\"\n | \"pricing\"\n | \"testimonials\"\n | \"cta\"\n | \"footer\"\n | \"header\"\n | \"other\";\n\n/**\n * Full metadata for a pre-built page block (section).\n */\nexport interface BlockMeta {\n /** Dominant animation technique */\n animationType: AnimationType;\n /** Block section type */\n blockType: BlockType;\n /** Primary UI category */\n category: ComponentCategory;\n /** Rough complexity level */\n complexity: Complexity;\n /** SmoothUI components used inside this block */\n components: readonly string[];\n /** npm packages required */\n dependencies: readonly string[];\n /** 1-2 sentence description */\n description: string;\n /** PascalCase display name */\n displayName: string;\n /** Full documentation URL */\n docUrl: string;\n /** Whether the block respects prefers-reduced-motion */\n hasReducedMotion: boolean;\n /** shadcn-style install command */\n installCommand: string;\n /** kebab-case identifier */\n name: string;\n /** Registry JSON URL */\n registryUrl: string;\n /** Discoverable tags */\n tags: readonly string[];\n /** Natural-language use-case descriptions */\n useCases: readonly string[];\n}\n\n// ---------------------------------------------------------------------------\n// API response types\n// ---------------------------------------------------------------------------\n\n/**\n * Paginated list response wrapper used by all list endpoints.\n */\nexport interface PaginatedResponse {\n data: T[];\n page: number;\n pageSize: number;\n total: number;\n totalPages: number;\n}\n\n/** GET /api/components */\nexport type ComponentListResponse = PaginatedResponse;\n\n/** GET /api/components/:name */\nexport interface ComponentDetailResponse {\n component: ComponentMeta;\n /** Raw source code (optional, included when ?include=source) */\n source?: string;\n}\n\n/** GET /api/blocks */\nexport type BlockListResponse = PaginatedResponse;\n\n/** GET /api/blocks/:name */\nexport interface BlockDetailResponse {\n block: BlockMeta;\n source?: string;\n}\n\n/** Standard error envelope returned by API routes */\nexport interface ApiErrorResponse {\n error: string;\n status: number;\n}\n\n// ---------------------------------------------------------------------------\n// Query / filter helpers\n// ---------------------------------------------------------------------------\n\n/** Supported filter parameters for component list queries */\nexport interface ComponentQueryParams {\n animationType?: AnimationType;\n category?: ComponentCategory;\n complexity?: Complexity;\n page?: number;\n pageSize?: number;\n search?: string;\n tag?: string;\n}\n\n/** Supported filter parameters for block list queries */\nexport interface BlockQueryParams {\n blockType?: BlockType;\n complexity?: Complexity;\n page?: number;\n pageSize?: number;\n search?: string;\n tag?: string;\n}\n","path":"component-meta.ts","target":"lib/smoothui-data/component-meta.ts","type":"registry:lib"},{"content":"// ---------------------------------------------------------------------------\n// AI-first metadata types & schema\n// ---------------------------------------------------------------------------\nexport type {\n AnimationType,\n ApiErrorResponse,\n BlockDetailResponse,\n BlockListResponse,\n BlockMeta,\n BlockQueryParams,\n BlockType,\n Complexity,\n ComponentCategory,\n ComponentDetailResponse,\n ComponentListResponse,\n ComponentMeta,\n ComponentQueryParams,\n PaginatedResponse,\n} from \"./component-meta\";\n\nexport type {\n ParseFailure,\n ParseResult,\n ParseSuccess,\n SmoothUIPackageMeta,\n} from \"./smoothui-schema\";\n\nexport { parseSmoothUIMeta } from \"./smoothui-schema\";\n\n// ---------------------------------------------------------------------------\n// People data\n// ---------------------------------------------------------------------------\n\n/**\n * Unified Person interface for all people data\n *\n * This single interface contains all possible fields for people data.\n * Components can use only the fields they need:\n * - Team components: name, role, bio, avatar, location, experience, social, company\n * - Testimonial components: name, role, avatar, stars, content\n * - Mixed components: any combination of fields\n */\nexport interface Person {\n avatar: string;\n bio?: string;\n company?: string;\n content?: string;\n experience?: string;\n location?: string;\n name: string;\n role: string;\n social?: {\n twitter?: string;\n linkedin?: string;\n github?: string;\n website?: string;\n };\n // Testimonial specific fields\n stars?: number;\n}\n\nexport const peopleData: Person[] = [\n {\n avatar:\n \"https://ik.imagekit.io/16u211libb/avatar-educalvolpz.jpeg?updatedAt=1765524159631\",\n bio: \"Passionate about building products that make a difference. Leading the vision for innovative user experiences.\",\n company: \"SmoothUI\",\n content:\n \"SmoothUI has revolutionized how we build user interfaces. The animations are buttery smooth and the developer experience is incredible.\",\n experience: \"8+ years of experience\",\n location: \"Spain\",\n name: \"Eduardo Calvo\",\n role: \"CEO & Founder\",\n social: {\n github: \"https://github.com/educlopez\",\n linkedin: \"https://linkedin.com/in/educlopez\",\n twitter: \"https://twitter.com/educalvolpz\",\n website: \"https://educalvolopez.com\",\n },\n stars: 5,\n },\n {\n avatar: \"https://ik.imagekit.io/16u211libb/smoothui/avatar.jpg\",\n bio: \"Creating beautiful and intuitive user experiences that users love. Passionate about design systems and accessibility.\",\n company: \"Design Studio\",\n content:\n \"The design system is incredibly well thought out. Every component feels intentional and polished.\",\n experience: \"7+ years of experience\",\n location: \"San Francisco, CA\",\n name: \"Drew Cano\",\n role: \"Head of Design\",\n social: {\n github: \"https://github.com/educlopez\",\n linkedin: \"https://linkedin.com/in/educlopez\",\n twitter: \"https://twitter.com/educalvolpz\",\n website: \"https://educalvolopez.com\",\n },\n stars: 5,\n },\n {\n avatar: \"https://ik.imagekit.io/16u211libb/smoothui/avatar-1.jpg\",\n bio: \"Building scalable solutions for modern applications. Expert in React, TypeScript, and cloud architecture.\",\n company: \"TechCorp\",\n content:\n \"Best UI library I've used. The TypeScript support is excellent and the components are highly customizable.\",\n experience: \"10+ years of experience\",\n location: \"Austin, TX\",\n name: \"Marcus Johnson\",\n role: \"Lead Developer\",\n social: {\n github: \"https://github.com/educlopez\",\n linkedin: \"https://linkedin.com/in/educlopez\",\n twitter: \"https://twitter.com/educalvolpz\",\n website: \"https://educalvolopez.com\",\n },\n stars: 5,\n },\n {\n avatar: \"https://ik.imagekit.io/16u211libb/smoothui/avatar-2.jpg\",\n bio: \"Driving product strategy and user research to create products that truly solve user problems.\",\n company: \"ProductCo\",\n content:\n \"Our users love the smooth interactions. It's made our product feel premium and professional.\",\n experience: \"6+ years of experience\",\n location: \"New York, NY\",\n name: \"Emily Rodriguez\",\n role: \"Product Manager\",\n social: {\n github: \"https://github.com/educlopez\",\n linkedin: \"https://linkedin.com/in/educlopez\",\n twitter: \"https://twitter.com/educalvolpz\",\n website: \"https://educalvolopez.com\",\n },\n stars: 4,\n },\n {\n avatar: \"https://ik.imagekit.io/16u211libb/smoothui/avatar-3.jpg\",\n bio: \"Full-stack engineer with expertise in distributed systems and team leadership. Building the future of technology.\",\n company: \"InnovateTech\",\n content:\n \"The performance is outstanding. Our bundle size stayed the same while getting beautiful animations.\",\n experience: \"12+ years of experience\",\n location: \"Seattle, WA\",\n name: \"Mollie Hall\",\n role: \"CTO\",\n social: {\n github: \"https://github.com/educlopez\",\n linkedin: \"https://linkedin.com/in/educlopez\",\n twitter: \"https://twitter.com/educalvolpz\",\n website: \"https://educalvolopez.com\",\n },\n stars: 5,\n },\n {\n avatar: \"https://ik.imagekit.io/16u211libb/smoothui/avatar-4.jpg\",\n bio: \"Understanding user behavior and needs to inform design decisions. Passionate about creating inclusive experiences.\",\n company: \"ResearchLab\",\n content:\n \"The accessibility features are top-notch. Every component follows WCAG guidelines perfectly.\",\n experience: \"5+ years of experience\",\n location: \"Toronto, Canada\",\n name: \"Alec Whitten\",\n role: \"UX Researcher\",\n social: {\n github: \"https://github.com/educlopez\",\n linkedin: \"https://linkedin.com/in/educlopez\",\n twitter: \"https://twitter.com/educalvolpz\",\n website: \"https://educalvolopez.com\",\n },\n stars: 5,\n },\n {\n avatar: \"https://ik.imagekit.io/16u211libb/smoothui/avatar-5.jpg\",\n bio: \"Specializing in React, animations, and performance optimization. Creating smooth user experiences.\",\n company: \"WebStudio\",\n experience: \"4+ years of experience\",\n location: \"London, UK\",\n name: \"Alisa Hester\",\n role: \"Frontend Engineer\",\n social: {\n github: \"https://github.com/educlopez\",\n linkedin: \"https://linkedin.com/in/educlopez\",\n twitter: \"https://twitter.com/educalvolpz\",\n website: \"https://educalvolopez.com\",\n },\n },\n {\n avatar: \"https://ik.imagekit.io/16u211libb/smoothui/avatar-6.jpg\",\n bio: \"Building robust APIs and microservices. Expert in Node.js, Python, and cloud infrastructure.\",\n company: \"BackendPro\",\n experience: \"6+ years of experience\",\n location: \"Barcelona, Spain\",\n name: \"Johnny Bell\",\n role: \"Backend Engineer\",\n social: {\n github: \"https://github.com/educlopez\",\n linkedin: \"https://linkedin.com/in/educlopez\",\n twitter: \"https://twitter.com/educalvolpz\",\n website: \"https://educalvolopez.com\",\n },\n },\n {\n avatar: \"https://ik.imagekit.io/16u211libb/smoothui/avatar-7.jpg\",\n bio: \"Automating deployments and ensuring system reliability. Passionate about infrastructure as code.\",\n company: \"CloudOps\",\n experience: \"8+ years of experience\",\n location: \"Berlin, Germany\",\n name: \"Mia Ward\",\n role: \"DevOps Engineer\",\n social: {\n github: \"https://github.com/educlopez\",\n linkedin: \"https://linkedin.com/in/educlopez\",\n twitter: \"https://twitter.com/educalvolpz\",\n website: \"https://educalvolopez.com\",\n },\n },\n {\n avatar: \"https://ik.imagekit.io/16u211libb/smoothui/avatar-8.jpg\",\n bio: \"Driving growth through strategic marketing and community building. Expert in developer relations.\",\n company: \"GrowthCo\",\n experience: \"7+ years of experience\",\n location: \"Singapore\",\n name: \"Josh Knight\",\n role: \"Marketing Director\",\n social: {\n github: \"https://github.com/educlopez\",\n linkedin: \"https://linkedin.com/in/educlopez\",\n twitter: \"https://twitter.com/educalvolpz\",\n website: \"https://educalvolopez.com\",\n },\n },\n\n {\n avatar: \"https://ik.imagekit.io/16u211libb/smoothui/avatar-9.jpg\",\n bio: \"Building beautiful and accessible UI components for React developers.\",\n company: \"sand/ui\",\n content: \"SmoothUI is my go-to for fast, beautiful UIs.\",\n experience: \"5+ years of experience\",\n location: \"Remote\",\n name: \"Kelly Myer\",\n role: \"Creator of Sand/UI\",\n social: {\n github: \"https://github.com/educlopez\",\n linkedin: \"https://linkedin.com/in/educlopez\",\n twitter: \"https://twitter.com/educalvolpz\",\n website: \"https://educalvolopez.com\",\n },\n stars: 5,\n },\n];\n\n// Get people who have testimonials (stars and content)\nexport const testimonialsData: Person[] = peopleData.filter(\n (person) => person.stars && person.content\n);\n\ninterface ImageKitOptions {\n format?: \"auto\" | \"webp\" | \"jpg\" | \"jpeg\" | \"png\" | \"avif\";\n height?: number;\n quality?: number;\n transformations?: string;\n width?: number;\n}\n\n/**\n * Build transformation string from options\n */\nfunction buildTransformations(options?: ImageKitOptions): string {\n if (options?.transformations) {\n return options.transformations;\n }\n\n const parts: string[] = [];\n\n if (options?.width) {\n parts.push(`w-${options.width}`);\n }\n if (options?.height) {\n parts.push(`h-${options.height}`);\n }\n\n const quality = options?.quality ?? 80;\n parts.push(`q-${quality}`);\n\n const format = options?.format ?? \"auto\";\n parts.push(`f-${format}`);\n\n return parts.join(\",\");\n}\n\n/**\n * Process full URL and add transformations\n */\nfunction processFullUrl(imagePath: string, transformations: string): string {\n const url = new URL(imagePath);\n url.searchParams.delete(\"updatedAt\");\n const baseUrl = url.origin + url.pathname;\n\n if (!transformations) {\n return baseUrl;\n }\n return `${baseUrl}?tr=${transformations}`;\n}\n\n/**\n * Build local path URL\n */\nfunction buildLocalPathUrl(imagePath: string, transformations: string): string {\n const endpoint =\n process.env.NEXT_PUBLIC_IMAGEKIT_URL_ENDPOINT ||\n process.env.IMAGEKIT_URL_ENDPOINT ||\n \"https://ik.imagekit.io/16u211libb\";\n\n const cleanPath = imagePath.startsWith(\"/\") ? imagePath.slice(1) : imagePath;\n\n const imageKitPath = cleanPath.startsWith(\"images/\")\n ? `smoothui/${cleanPath.replace(\"images/\", \"\")}`\n : `smoothui/${cleanPath}`;\n\n const baseUrl = `${endpoint}/${imageKitPath}`;\n\n if (transformations) {\n return `${baseUrl}?tr=${transformations}`;\n }\n\n return baseUrl;\n}\n\n/**\n * Get ImageKit URL for an image with optimized transformations\n * Converts local image paths (/images/...) to ImageKit URLs with bandwidth optimization\n * @param imagePath - Local image path (e.g., \"/images/avatar.jpg\") or already full URL\n * @param options - Optional transformation options\n * @param options.width - Image width in pixels\n * @param options.height - Image height in pixels\n * @param options.quality - Image quality (1-100, default: 80)\n * @param options.format - Image format (auto, webp, jpg, png, etc.)\n * @param options.transformations - Raw transformation string (overrides other options)\n * @returns Full ImageKit URL with optimized transformations\n */\nexport function getImageKitUrl(\n imagePath: string,\n options?: ImageKitOptions\n): string {\n const transformations = buildTransformations(options);\n\n if (imagePath.startsWith(\"http://\") || imagePath.startsWith(\"https://\")) {\n return processFullUrl(imagePath, transformations);\n }\n\n return buildLocalPathUrl(imagePath, transformations);\n}\n\n/**\n * Helper function to get avatar URL with optimized size and quality\n * @param avatar - Avatar image path or URL\n * @param size - Avatar size in pixels (default: 40, will be doubled for retina)\n * @returns Optimized ImageKit URL for avatar\n */\nexport function getAvatarUrl(avatar: string, size = 40): string {\n // Double the size for retina displays, use higher quality for avatars\n const retinaSize = size * 2;\n return getImageKitUrl(avatar, {\n format: \"auto\",\n height: retinaSize,\n quality: 85, // Higher quality for faces\n width: retinaSize,\n });\n}\n\n// Helper function to get team member data (people without testimonials or all people)\nexport function getTeamMembers(\n count = 4,\n includeTestimonials = false\n): Person[] {\n if (includeTestimonials) {\n return peopleData.slice(0, count);\n }\n // Return people who don't have testimonials for team display\n return peopleData\n .filter((person) => !(person.stars && person.content))\n .slice(0, count);\n}\n\n// Helper function to get testimonials data\nexport function getTestimonials(count = 4): Person[] {\n return testimonialsData.slice(0, count);\n}\n\n// Helper function to get all people data\nexport function getAllPeople(): Person[] {\n return peopleData;\n}\n\n// Helper function to get people by role\nexport function getPeopleByRole(role: string): Person[] {\n return peopleData.filter((person) =>\n person.role.toLowerCase().includes(role.toLowerCase())\n );\n}\n\n// Helper function to get people with testimonials\nexport function getPeopleWithTestimonials(): Person[] {\n return testimonialsData;\n}\n","path":"index.ts","target":"lib/smoothui-data/index.ts","type":"registry:lib"},{"content":"/**\n * Schema definition and validation for the `smoothui` field in component\n * package.json files.\n *\n * Each component's package.json may include a `smoothui` object with\n * machine-readable metadata. This module provides the TypeScript type for\n * that field and a runtime validation/parsing function.\n *\n * @example package.json\n * ```json\n * {\n * \"name\": \"@repo/animated-tabs\",\n * \"description\": \"Animated tabs component with sliding indicator\",\n * \"smoothui\": {\n * \"category\": \"navigation\",\n * \"tags\": [\"animation\", \"tabs\", \"navigation\"],\n * \"complexity\": \"moderate\",\n * \"animationType\": \"spring\",\n * \"useCases\": [\n * \"Tab navigation with smooth transitions\",\n * \"Section switcher with animated indicator\"\n * ],\n * \"compositionHints\": [\n * \"Combine with animated-tooltip for rich tab headers\"\n * ],\n * \"hasReducedMotion\": true\n * }\n * }\n * ```\n */\n\nimport type {\n AnimationType,\n Complexity,\n ComponentCategory,\n} from \"./component-meta\";\n\n// ---------------------------------------------------------------------------\n// Schema type\n// ---------------------------------------------------------------------------\n\n/**\n * Shape of the `smoothui` field inside a component's package.json.\n * Only includes metadata that is authored by hand — derived fields\n * (name, displayName, dependencies, URLs) are computed at build time.\n */\nexport interface SmoothUIPackageMeta {\n /** Dominant animation technique */\n animationType: AnimationType;\n /** Primary UI category */\n category: ComponentCategory;\n /** Rough complexity level */\n complexity: Complexity;\n /** Hints for combining with other components */\n compositionHints: string[];\n /** Whether the component respects prefers-reduced-motion */\n hasReducedMotion: boolean;\n /** Discoverable tags */\n tags: string[];\n /** Natural-language use-case descriptions */\n useCases: string[];\n}\n\n// ---------------------------------------------------------------------------\n// Validation constants\n// ---------------------------------------------------------------------------\n\nconst VALID_CATEGORIES: readonly ComponentCategory[] = [\n \"basic-ui\",\n \"button\",\n \"text\",\n \"ai\",\n \"layout\",\n \"feedback\",\n \"data-display\",\n \"navigation\",\n \"other\",\n];\n\nconst VALID_COMPLEXITIES: readonly Complexity[] = [\n \"simple\",\n \"moderate\",\n \"complex\",\n];\n\nconst VALID_ANIMATION_TYPES: readonly AnimationType[] = [\n \"spring\",\n \"tween\",\n \"gesture\",\n \"scroll\",\n \"none\",\n];\n\n// ---------------------------------------------------------------------------\n// Validation helpers\n// ---------------------------------------------------------------------------\n\ninterface ValidationError {\n field: string;\n message: string;\n}\n\nconst isString = (value: unknown): value is string => typeof value === \"string\";\n\nconst isBoolean = (value: unknown): value is boolean =>\n typeof value === \"boolean\";\n\nconst isStringArray = (value: unknown): value is string[] =>\n Array.isArray(value) && value.every(isString);\n\nconst isOneOf = (\n value: unknown,\n allowed: readonly T[]\n): value is T =>\n isString(value) && (allowed as readonly string[]).includes(value);\n\n// ---------------------------------------------------------------------------\n// Parse result\n// ---------------------------------------------------------------------------\n\nexport interface ParseSuccess {\n data: SmoothUIPackageMeta;\n success: true;\n}\n\nexport interface ParseFailure {\n errors: ValidationError[];\n success: false;\n}\n\nexport type ParseResult = ParseSuccess | ParseFailure;\n\n// ---------------------------------------------------------------------------\n// Parser\n// ---------------------------------------------------------------------------\n\n/**\n * Validate and parse a raw `smoothui` field from a component package.json.\n *\n * Returns a discriminated union so callers can handle errors explicitly.\n *\n * @param raw - The unknown value read from `packageJson.smoothui`\n * @returns A `ParseResult` with either typed data or a list of errors\n */\nexport const parseSmoothUIMeta = (raw: unknown): ParseResult => {\n const errors: ValidationError[] = [];\n\n if (raw === null || raw === undefined || typeof raw !== \"object\") {\n return {\n errors: [{ field: \"smoothui\", message: \"Must be a non-null object\" }],\n success: false,\n };\n }\n\n const obj = raw as Record;\n\n // category — required\n if (!isOneOf(obj.category, VALID_CATEGORIES)) {\n errors.push({\n field: \"category\",\n message: `Must be one of: ${VALID_CATEGORIES.join(\", \")}`,\n });\n }\n\n // tags — required string[]\n if (!isStringArray(obj.tags)) {\n errors.push({\n field: \"tags\",\n message: \"Must be an array of strings\",\n });\n }\n\n // complexity — required\n if (!isOneOf(obj.complexity, VALID_COMPLEXITIES)) {\n errors.push({\n field: \"complexity\",\n message: `Must be one of: ${VALID_COMPLEXITIES.join(\", \")}`,\n });\n }\n\n // animationType — required\n if (!isOneOf(obj.animationType, VALID_ANIMATION_TYPES)) {\n errors.push({\n field: \"animationType\",\n message: `Must be one of: ${VALID_ANIMATION_TYPES.join(\", \")}`,\n });\n }\n\n // useCases — required string[]\n if (!isStringArray(obj.useCases)) {\n errors.push({\n field: \"useCases\",\n message: \"Must be an array of strings\",\n });\n }\n\n // compositionHints — required string[]\n if (!isStringArray(obj.compositionHints)) {\n errors.push({\n field: \"compositionHints\",\n message: \"Must be an array of strings\",\n });\n }\n\n // hasReducedMotion — required boolean\n if (!isBoolean(obj.hasReducedMotion)) {\n errors.push({\n field: \"hasReducedMotion\",\n message: \"Must be a boolean\",\n });\n }\n\n if (errors.length > 0) {\n return { errors, success: false };\n }\n\n return {\n data: {\n animationType: obj.animationType as AnimationType,\n category: obj.category as ComponentCategory,\n complexity: obj.complexity as Complexity,\n compositionHints: obj.compositionHints as string[],\n hasReducedMotion: obj.hasReducedMotion as boolean,\n tags: obj.tags as string[],\n useCases: obj.useCases as string[],\n },\n success: true,\n };\n};\n","path":"smoothui-schema.ts","target":"lib/smoothui-data/smoothui-schema.ts","type":"registry:lib"}],"name":"data","registryDependencies":[],"title":"Data","type":"registry:lib"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Centered CTA block with radial glow background","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport SmoothButton from \"@/components/smoothui/smooth-button\";\nimport { motion, useReducedMotion } from \"motion/react\";\n\nconst SPRING = {\n bounce: 0.1,\n duration: 0.25,\n type: \"spring\" as const,\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","path":"index.tsx","target":"components/smoothui/cta-1/index.tsx","type":"registry:block"}],"name":"cta-1","registryDependencies":["https://smoothui.dev/r/smooth-button.json"],"title":"Cta 1","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Split layout CTA block with text and illustration","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport SmoothButton from \"@/components/smoothui/smooth-button\";\nimport { getImageKitUrl } from \"@/lib/smoothui-data\";\nimport { motion, useReducedMotion } from \"motion/react\";\n\nconst SPRING = {\n bounce: 0.1,\n duration: 0.25,\n type: \"spring\" as const,\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","path":"index.tsx","target":"components/smoothui/cta-2/index.tsx","type":"registry:block"}],"name":"cta-2","registryDependencies":["https://smoothui.dev/r/smooth-button.json","https://smoothui.dev/r/data.json"],"title":"Cta 2","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Compact banner CTA block","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport SmoothButton from \"@/components/smoothui/smooth-button\";\nimport { motion, useReducedMotion } from \"motion/react\";\n\nconst SPRING = {\n bounce: 0.1,\n duration: 0.25,\n type: \"spring\" as const,\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","path":"index.tsx","target":"components/smoothui/cta-3/index.tsx","type":"registry:block"}],"name":"cta-3","registryDependencies":["https://smoothui.dev/r/smooth-button.json"],"title":"Cta 3","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"FAQ grid block with categorized tabs and icons","devDependencies":[],"files":[{"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, useReducedMotion } 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 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};\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 faqs: [\n {\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 question: \"How do I install Smoothui?\",\n },\n {\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 question: \"What are the system requirements?\",\n },\n {\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 question: \"Is Smoothui free to use?\",\n },\n ],\n id: \"general\",\n name: \"General\",\n },\n {\n faqs: [\n {\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 question: \"How many components are included?\",\n },\n {\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 question: \"Can I customize the styling?\",\n },\n {\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 question: \"Are the components accessible?\",\n },\n ],\n id: \"components\",\n name: \"Components\",\n },\n {\n faqs: [\n {\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 question: \"How can I get help?\",\n },\n {\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 question: \"Do you offer custom development?\",\n },\n {\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 question: \"What's your response time?\",\n },\n ],\n id: \"support\",\n name: \"Support\",\n },\n ],\n}: FaqsGridProps) {\n const shouldReduceMotion = useReducedMotion();\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={shouldReduceMotion ? {} : { scale: HOVER_SCALE }}\n whileTap={shouldReduceMotion ? {} : { 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","path":"index.tsx","target":"components/smoothui/faq-1/index.tsx","type":"registry:block"}],"name":"faq-1","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Faq 1","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"FAQ accordion block with expandable questions","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } 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 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 question: \"What is Smoothui?\",\n },\n {\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 question: \"How do I get started?\",\n },\n {\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 question: \"Is it free to use?\",\n },\n {\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 question: \"Can I customize the components?\",\n },\n {\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 question: \"What frameworks are supported?\",\n },\n {\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 question: \"How often do you release updates?\",\n },\n ],\n}: FaqsAccordionProps) {\n const shouldReduceMotion = useReducedMotion();\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={shouldReduceMotion ? {} : { scale: HOVER_SCALE }}\n whileTap={shouldReduceMotion ? {} : { 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","path":"index.tsx","target":"components/smoothui/faq-2/index.tsx","type":"registry:block"}],"name":"faq-2","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Faq 2","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"Searchable FAQ section with filter animations","devDependencies":[],"files":[{"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 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 question: \"How do I get started with SmoothUI?\",\n },\n {\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 question: \"Is SmoothUI free to use?\",\n },\n {\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 question: \"What are the system requirements?\",\n },\n {\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 question: \"Can I customize the animations?\",\n },\n {\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 question: \"How do I report bugs or issues?\",\n },\n {\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 question: \"Is there enterprise support available?\",\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 : { bounce: 0.05, duration: 0.25, type: \"spring\" as const };\n\n const contentTransition = shouldReduceMotion\n ? { duration: 0 }\n : { bounce: 0, duration: 0.25, type: \"spring\" as const };\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","path":"index.tsx","target":"components/smoothui/faq-3/index.tsx","type":"registry:block"}],"name":"faq-3","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Faq 3","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"Categorized FAQ section with tab navigation","devDependencies":[],"files":[{"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 faqs: [\n {\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 question: \"How do I set up SmoothUI in my project?\",\n },\n {\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 question: \"What are the minimum requirements?\",\n },\n {\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 question: \"How do I add my first component?\",\n },\n ],\n name: \"Getting Started\",\n },\n {\n faqs: [\n {\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 question: \"Is SmoothUI free to use?\",\n },\n {\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 question: \"Do you offer refunds?\",\n },\n {\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 question: \"What payment methods do you accept?\",\n },\n ],\n name: \"Billing\",\n },\n {\n faqs: [\n {\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 question: \"Which browsers are supported?\",\n },\n {\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 question: \"How does SmoothUI affect performance?\",\n },\n {\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 question: \"Is TypeScript supported?\",\n },\n {\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 question: \"Can I customize component styles?\",\n },\n ],\n name: \"Technical\",\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 : { bounce: 0.05, duration: 0.25, type: \"spring\" as const };\n\n const contentTransition = shouldReduceMotion\n ? { duration: 0 }\n : { bounce: 0, duration: 0.25, type: \"spring\" as const };\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","path":"index.tsx","target":"components/smoothui/faq-4/index.tsx","type":"registry:block"}],"name":"faq-4","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Faq 4","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Feature grid block with animated cards","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useState } from \"react\";\n\nconst SPRING = {\n bounce: 0.1,\n duration: 0.25,\n type: \"spring\" as const,\n};\n\nconst features = [\n {\n description:\n \"Optimized for performance with minimal bundle size and efficient rendering.\",\n icon: (\n \n \n \n ),\n title: \"Lightning Fast\",\n },\n {\n description:\n \"Built with ARIA attributes, keyboard navigation, and reduced motion support.\",\n icon: (\n \n \n \n ),\n title: \"Accessible\",\n },\n {\n description:\n \"Fully customizable with Tailwind CSS classes and design tokens.\",\n icon: (\n \n \n \n ),\n title: \"Customizable\",\n },\n {\n description:\n \"Full TypeScript support with exported types for all component props.\",\n icon: (\n \n \n \n ),\n title: \"TypeScript First\",\n },\n {\n description:\n \"Smooth spring animations powered by Motion with configurable easing.\",\n icon: (\n \n \n \n ),\n title: \"Animated\",\n },\n {\n description:\n \"Free and open source. Install via the shadcn registry with one command.\",\n icon: (\n \n \n \n ),\n title: \"Open Source\",\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","path":"index.tsx","target":"components/smoothui/features-1/index.tsx","type":"registry:block"}],"name":"features-1","registryDependencies":[],"title":"Features 1","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Bento grid features block with asymmetric layout","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { motion, useReducedMotion } from \"motion/react\";\n\nconst SPRING = {\n bounce: 0.1,\n duration: 0.25,\n type: \"spring\" as const,\n};\n\nconst features = [\n {\n accent: true,\n description:\n \"Real-time analytics dashboard with customizable metrics and beautiful visualizations.\",\n span: \"col-span-2 row-span-2\",\n title: \"Smart Analytics\",\n // The lead cell of a bento is two columns by two rows. Without something to\n // look at, that is a quarter of the section spent on two lines of text.\n visual: \"analytics\" as const,\n },\n {\n description:\n \"Work together in real-time with built-in commenting and sharing.\",\n span: \"col-span-1\",\n title: \"Team Collaboration\",\n },\n {\n description: \"RESTful API with comprehensive documentation and SDKs.\",\n span: \"col-span-1\",\n title: \"API First\",\n },\n {\n description: \"Lightning-fast delivery from edge locations worldwide.\",\n span: \"col-span-1\",\n title: \"Global CDN\",\n },\n {\n description:\n \"Enterprise-grade security with SOC 2 compliance and encryption.\",\n span: \"col-span-1\",\n title: \"Security\",\n },\n];\n\n/** Bars of a plausible-looking week. Fixed, so the panel never reflows. */\nconst SERIES = [\n { id: \"w1\", value: 38 },\n { id: \"w2\", value: 52 },\n { id: \"w3\", value: 44 },\n { id: \"w4\", value: 66 },\n { id: \"w5\", value: 58 },\n { id: \"w6\", value: 74 },\n { id: \"w7\", value: 62 },\n { id: \"w8\", value: 88 },\n { id: \"w9\", value: 71 },\n { id: \"w10\", value: 96 },\n { id: \"w11\", value: 84 },\n { id: \"w12\", value: 100 },\n];\nconst PEAK_ID = \"w12\";\nconst BAR_STAGGER = 0.03;\n\n/**\n * A small analytics panel for the bento's lead cell.\n *\n * Every element is real markup on the page's own tokens, so it follows the\n * theme into dark mode and stays sharp at any pixel density — and the bars can\n * grow on entry, which is the point of the library it ships with.\n */\nconst AnalyticsPanel = () => {\n const shouldReduceMotion = useReducedMotion();\n\n return (\n
\n
\n
\n

Revenue this month

\n

\n $48,219\n

\n
\n \n +12.4%\n \n
\n\n \n {SERIES.map(({ id, value }, index) => (\n \n ))}\n
\n \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 {feature.visual === \"analytics\" && (\n // Drawn, not photographed. A screenshot would be fixed to one\n // theme, blur on a retina screen and weigh more than the whole\n // block; markup inherits the page's colours and stays sharp.\n
\n \n
\n )}\n

\n {feature.title}\n

\n

\n {feature.description}\n

\n \n ))}\n
\n
\n
\n
\n );\n}\n\nexport default FeaturesBento;\n","path":"index.tsx","target":"components/smoothui/features-2/index.tsx","type":"registry:block"}],"name":"features-2","registryDependencies":[],"title":"Features 2","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Alternating features block with side-by-side layout","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { getImageKitUrl } from \"@/lib/smoothui-data\";\nimport { motion, useReducedMotion } from \"motion/react\";\n\nconst SPRING = {\n bounce: 0.1,\n duration: 0.25,\n type: \"spring\" as const,\n};\n\nconst features = [\n {\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 format: \"auto\",\n quality: 85,\n width: 800,\n }),\n imageAlt: \"Designer working on user interface\",\n title: \"Intuitive Design\",\n },\n {\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 format: \"auto\",\n quality: 85,\n width: 800,\n }),\n imageAlt: \"SmoothUI component showcase\",\n title: \"Blazing Performance\",\n },\n {\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 format: \"auto\",\n quality: 85,\n width: 800,\n }),\n imageAlt: \"Code example with TypeScript support\",\n title: \"Developer Experience\",\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","path":"index.tsx","target":"components/smoothui/features-3/index.tsx","type":"registry:block"}],"name":"features-3","registryDependencies":["https://smoothui.dev/r/data.json"],"title":"Features 3","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Simple footer block with links and social icons","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { motion, useReducedMotion } 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 company: [\n { name: \"About\", url: \"#about\" },\n { name: \"Blog\", url: \"#blog\" },\n { name: \"Careers\", url: \"#careers\" },\n { name: \"Contact\", url: \"#contact\" },\n ],\n product: [\n { name: \"Features\", url: \"#features\" },\n { name: \"Pricing\", url: \"#pricing\" },\n { name: \"Documentation\", url: \"#docs\" },\n { name: \"API\", url: \"#api\" },\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 discord: \"https://discord.com\",\n github: \"https://github.com\",\n linkedin: \"https://linkedin.com\",\n twitter: \"https://twitter.com\",\n },\n copyright = \"© 2024 Smoothui. All rights reserved.\",\n}: FooterSimpleProps) {\n const shouldReduceMotion = useReducedMotion();\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 ) : null}\n {social.linkedin ? (\n \n \n \n \n LinkedIn\n \n ) : null}\n {social.github ? (\n \n \n \n \n GitHub\n \n ) : null}\n {social.discord ? (\n \n \n \n \n Discord\n \n ) : null}\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 ) : null}\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 ) : null}\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 ) : null}\n
\n \n\n {/* Copyright */}\n \n

{copyright}

\n \n
\n
\n );\n}\n\nexport default FooterSimple;\n","path":"index.tsx","target":"components/smoothui/footer-1/index.tsx","type":"registry:block"}],"name":"footer-1","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Footer 1","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Complex footer block with newsletter and extended links","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport SmoothButton from \"@/components/smoothui/smooth-button\";\nimport { motion, useReducedMotion } 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_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 buttonText: \"Subscribe\",\n description: \"Get the latest news and updates delivered to your inbox.\",\n placeholder: \"Enter your email\",\n title: \"Stay updated\",\n },\n links = {\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 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 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 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 },\n social = {\n discord: \"https://discord.com\",\n github: \"https://github.com\",\n linkedin: \"https://linkedin.com\",\n twitter: \"https://twitter.com\",\n youtube: \"https://youtube.com\",\n },\n copyright = \"© 2024 Smoothui. All rights reserved.\",\n}: FooterComplexProps) {\n const shouldReduceMotion = useReducedMotion();\n const socialHover = shouldReduceMotion ? {} : { scale: HOVER_SCALE };\n const socialTap = shouldReduceMotion ? {} : { scale: TAP_SCALE };\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 ) : null}\n {social.linkedin ? (\n \n \n \n \n LinkedIn\n \n ) : null}\n {social.github ? (\n \n \n \n \n GitHub\n \n ) : null}\n {social.discord ? (\n \n \n \n \n Discord\n \n ) : null}\n {social.youtube ? (\n \n \n \n \n YouTube\n \n ) : null}\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 ) : null}\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 ) : null}\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 ) : null}\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 ) : null}\n
\n \n\n {/* Copyright */}\n \n

{copyright}

\n \n
\n
\n );\n}\n\nexport default FooterComplex;\n","path":"index.tsx","target":"components/smoothui/footer-2/index.tsx","type":"registry:block"}],"name":"footer-2","registryDependencies":["https://smoothui.dev/r/smooth-button.json","https://smoothui.dev/r/tokens.json"],"title":"Footer 2","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"Mega footer with newsletter and social links","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport SmoothButton from \"@/components/smoothui/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 links: [\n { href: \"#features\", label: \"Features\" },\n { href: \"#pricing\", label: \"Pricing\" },\n { href: \"#changelog\", label: \"Changelog\" },\n { href: \"#docs\", label: \"Documentation\" },\n ],\n title: \"Product\",\n },\n {\n links: [\n { href: \"#about\", label: \"About\" },\n { href: \"#blog\", label: \"Blog\" },\n { href: \"#careers\", label: \"Careers\" },\n { href: \"#contact\", label: \"Contact\" },\n ],\n title: \"Company\",\n },\n {\n links: [\n { href: \"#community\", label: \"Community\" },\n { href: \"#github\", label: \"GitHub\" },\n { href: \"#discord\", label: \"Discord\" },\n { href: \"#help\", label: \"Help Center\" },\n ],\n title: \"Resources\",\n },\n {\n links: [\n { href: \"#privacy\", label: \"Privacy Policy\" },\n { href: \"#terms\", label: \"Terms of Service\" },\n { href: \"#cookies\", label: \"Cookie Policy\" },\n ],\n title: \"Legal\",\n },\n];\n\nconst defaultSocialLinks = [\n {\n href: \"https://twitter.com\",\n icon: ,\n label: \"Twitter\",\n },\n {\n href: \"https://github.com\",\n icon: ,\n label: \"GitHub\",\n },\n {\n href: \"https://linkedin.com\",\n icon: ,\n label: \"LinkedIn\",\n },\n {\n href: \"https://youtube.com\",\n icon: ,\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 buttonText: \"Subscribe\",\n description: \"Get the latest updates and news delivered to your inbox.\",\n placeholder: \"Enter your email\",\n title: \"Subscribe to our newsletter\",\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 animate: { opacity: 1 },\n initial: { opacity: 1 },\n transition: { duration: 0 },\n };\n }\n\n return {\n initial: { opacity: 0, y: 20 },\n transition: {\n bounce: 0.1,\n delay,\n duration: ANIMATION_DURATION,\n type: \"spring\" as const,\n },\n viewport: { once: true },\n whileInView: { opacity: 1, y: 0 },\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","path":"index.tsx","target":"components/smoothui/footer-3/index.tsx","type":"registry:block"}],"name":"footer-3","registryDependencies":["https://smoothui.dev/r/smooth-button.json","https://smoothui.dev/r/tokens.json"],"title":"Footer 3","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"Minimal single-row footer","devDependencies":[],"files":[{"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 { href: \"#privacy\", label: \"Privacy\" },\n { href: \"#terms\", label: \"Terms\" },\n { href: \"#contact\", label: \"Contact\" },\n];\n\nconst defaultSocialLinks = [\n {\n href: \"https://twitter.com\",\n icon: ,\n label: \"Twitter\",\n },\n {\n href: \"https://github.com\",\n icon: ,\n label: \"GitHub\",\n },\n {\n href: \"https://linkedin.com\",\n icon: ,\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 animate: { opacity: 1 },\n initial: { opacity: 1 },\n transition: { duration: 0 },\n };\n }\n\n return {\n initial: { opacity: 0, y: 10 },\n transition: {\n bounce: 0.1,\n duration: ANIMATION_DURATION,\n type: \"spring\" as const,\n },\n viewport: { once: true },\n whileInView: { opacity: 1, y: 0 },\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","path":"index.tsx","target":"components/smoothui/footer-4/index.tsx","type":"registry:block"}],"name":"footer-4","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Footer 4","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"Modern header block with navigation and mobile menu","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { ExternalLink } from \"lucide-react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { AnimatedGroup, AnimatedText, Button, HeroHeader } from \"@/components/smoothui/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","path":"index.tsx","target":"components/smoothui/header-1/index.tsx","type":"registry:block"},{"content":"/* @reference \"../../../../app/styles/smoothui.css\"; */\n\n.mainGrid {\n position: absolute;\n top: 0;\n left: 0;\n display: grid;\n width: 100%;\n height: 100%;\n pointer-events: auto;\n border-top: 1px solid var(--color-smooth-200);\n border-right: 1px solid var(--color-smooth-200);\n opacity: 1;\n transition: opacity 300ms;\n will-change: transform;\n}\n\n.subgrid {\n position: relative;\n display: grid;\n grid-template-rows: repeat(2, 1fr);\n grid-template-columns: repeat(2, 1fr);\n width: var(--grid-cell-size);\n height: var(--grid-cell-size);\n pointer-events: auto;\n user-select: none;\n border-top: 1px solid var(--color-smooth-200);\n border-right: 1px solid var(--color-smooth-200);\n}\n\n.cell {\n width: 100%;\n height: 100%;\n pointer-events: auto;\n transition: background 3000ms cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.cell:nth-child(1) {\n border-right: 1px solid var(--color-smooth-200);\n}\n.cell:nth-child(3) {\n border-top: 1px solid var(--color-smooth-200);\n border-right: 1px solid var(--color-smooth-200);\n}\n.cell:nth-child(4) {\n border-top: 1px solid var(--color-smooth-200);\n}\n\n/* Reduce overlay size of hero text/button containers */\n.heroContent {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n max-width: 600px;\n padding: 0;\n margin: 0 auto;\n background: none;\n box-shadow: none;\n}\n\n.heroButtons {\n display: flex;\n gap: 1rem;\n width: auto;\n padding: 0;\n margin-top: 1.5rem;\n background: none;\n box-shadow: none;\n}\n","path":"hero-grid.module.css","target":"components/smoothui/header-1/hero-grid.module.css","type":"registry:block"}],"name":"header-1","registryDependencies":["https://smoothui.dev/r/shared.json","https://smoothui.dev/r/tokens.json"],"title":"Header 1","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"Premium header block with gradient logo and smooth animations","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { getImageKitUrl } from \"@/lib/smoothui-data\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { AnimatedGroup, AnimatedText, Button, HeroHeader } from \"@/components/smoothui/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 format: \"auto\",\n quality: 85,\n width: 1200,\n }),\n imageAlt = \"SmoothUI desktop application interface\",\n}: HeroProductProps) {\n const shouldReduceMotion = useReducedMotion();\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","path":"index.tsx","target":"components/smoothui/header-2/index.tsx","type":"registry:block"}],"name":"header-2","registryDependencies":["https://smoothui.dev/r/shared.json","https://smoothui.dev/r/data.json"],"title":"Header 2","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"Premium header block with gradient logo and smooth animations","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { Avatar, AvatarImage } from \"@/components/ui/avatar\";\nimport { getAllPeople, getAvatarUrl, getImageKitUrl } from \"@/lib/smoothui-data\";\nimport { ArrowDownRight, Star } from \"lucide-react\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { AnimatedGroup, AnimatedText, Button, HeroHeader } from \"@/components/smoothui/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 avatars: getAllPeople()\n .slice(0, 5)\n .map((person) => ({\n alt: `${person.name} avatar`,\n src: getAvatarUrl(person.avatar, 90),\n })),\n count: 200,\n rating: 5.0,\n },\n}: HeroShowcaseProps) {\n const shouldReduceMotion = useReducedMotion();\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 ) : null}\n {buttons.secondary ? (\n \n ) : null}\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","path":"index.tsx","target":"components/smoothui/header-3/index.tsx","type":"registry:block"}],"name":"header-3","registryDependencies":["avatar","https://smoothui.dev/r/shared.json","https://smoothui.dev/r/data.json"],"title":"Header 3","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"Interactive 3D grid hero header inspired by rauno.me 2024","devDependencies":[],"files":[{"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 \"@/components/smoothui/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","path":"index.tsx","target":"components/smoothui/header-4/index.tsx","type":"registry:block"},{"content":"/* @reference \"../../../../app/styles/smoothui.css\"; */\n\n/**\n * Interactive 3D Grid Styles\n *\n * Inspired by rauno.me 2024 website's interactive grid design.\n * Creates a 3D-perspective grid with customizable hover colors.\n */\n\n.gridContainer {\n --hero-grid-hover-color-1: var(--color-brand);\n --hero-grid-hover-color-2: var(--color-brand);\n --hero-grid-hover-color-3: var(--color-brand);\n --hero-grid-hover-color-4: var(--color-brand);\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n perspective: 2000px;\n perspective-origin: center center;\n}\n\n.mainGrid {\n position: absolute;\n top: 50%;\n left: 50%;\n display: grid;\n grid-template-rows: repeat(40, 1fr);\n grid-template-columns: repeat(40, 1fr);\n width: 140rem;\n aspect-ratio: 1;\n transform: translate(-50%, -50%) rotateX(50deg) rotateY(-5deg) rotateZ(20deg)\n scale(1.25);\n}\n\n.mainGrid::after {\n position: absolute;\n inset: 0;\n z-index: 3;\n pointer-events: none;\n content: \"\";\n background: radial-gradient(circle, transparent 25%, rgb(255 255 255) 80%);\n}\n\n:global(.dark).mainGrid::after {\n background: radial-gradient(\n circle,\n transparent 25%,\n rgb(0 0 0 / 90%) 80%\n ) !important;\n}\n\n.tile {\n border: 0.5px solid rgb(0 0 0 / 12%);\n transition: background-color 1500ms;\n}\n\n:global(.dark).tile {\n border: 0.5px solid rgb(255 255 255 / 5%);\n}\n\n.tile:hover {\n transition-duration: 0ms;\n}\n\n.tile:nth-child(4n):hover {\n background-color: var(--hero-grid-hover-color-1);\n}\n\n.tile:nth-child(4n + 1):hover {\n background-color: var(--hero-grid-hover-color-2);\n}\n\n.tile:nth-child(4n + 2):hover {\n background-color: var(--hero-grid-hover-color-3);\n}\n\n.tile:nth-child(4n + 3):hover {\n background-color: var(--hero-grid-hover-color-4);\n}\n\n.tile:nth-child(7n):hover {\n background-color: var(--hero-grid-hover-color-2);\n}\n\n.tile:nth-child(7n + 3):hover {\n background-color: var(--hero-grid-hover-color-3);\n}\n\n.tile:nth-child(7n + 5):hover {\n background-color: var(--hero-grid-hover-color-4);\n}\n\n.tile:nth-child(7n + 6):hover {\n background-color: var(--hero-grid-hover-color-1);\n}\n\n.tile:nth-child(11n + 1):hover {\n background-color: var(--hero-grid-hover-color-1);\n}\n\n.tile:nth-child(11n + 4):hover {\n background-color: var(--hero-grid-hover-color-2);\n}\n\n.tile:nth-child(11n + 7):hover {\n background-color: var(--hero-grid-hover-color-3);\n}\n\n.tile:nth-child(11n + 10):hover {\n background-color: var(--hero-grid-hover-color-4);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .mainGrid {\n transform: translate(-50%, -50%) rotateZ(20deg);\n }\n\n .tile {\n transition: none;\n }\n}\n\n/* Reduce overlay size of hero text/button containers */\n.heroContent {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n max-width: 600px;\n padding: 0;\n margin: 0 auto;\n background: none;\n box-shadow: none;\n}\n\n.heroButtons {\n display: flex;\n gap: 1rem;\n width: auto;\n padding: 0;\n margin-top: 1.5rem;\n background: none;\n box-shadow: none;\n}\n","path":"hero-grid.module.css","target":"components/smoothui/header-4/hero-grid.module.css","type":"registry:block"}],"name":"header-4","registryDependencies":["https://smoothui.dev/r/shared.json","https://smoothui.dev/r/tokens.json"],"title":"Header 4","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Spotlight hero block with dark theme and gradient text","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport SmoothButton from \"@/components/smoothui/smooth-button\";\nimport { motion, useReducedMotion } from \"motion/react\";\n\nconst SPRING = {\n bounce: 0.1,\n duration: 0.25,\n type: \"spring\" as const,\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","path":"index.tsx","target":"components/smoothui/header-5/index.tsx","type":"registry:block"}],"name":"header-5","registryDependencies":["https://smoothui.dev/r/smooth-button.json"],"title":"Header 5","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Minimal hero block with clean typography","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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","path":"index.tsx","target":"components/smoothui/header-6/index.tsx","type":"registry:block"}],"name":"header-6","registryDependencies":[],"title":"Header 6","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":[],"description":"Simple logo cloud block with grid layout","devDependencies":[],"files":[{"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 \"@/components/smoothui/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","path":"index.tsx","target":"components/smoothui/logo-cloud-1/index.tsx","type":"registry:block"}],"name":"logo-cloud-1","registryDependencies":["https://smoothui.dev/r/shared.json"],"title":"Logo Cloud 1","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Animated logo cloud block with infinite scroll","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { motion, useReducedMotion } 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 \"@/components/smoothui/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 { logo: Canpoy, name: \"Canpoy\", url: \"https://canpoy.com\" },\n { logo: Canva, name: \"Canva\", url: \"https://canva.com\" },\n { logo: Casetext, name: \"Casetext\", url: \"https://casetext.com\" },\n { logo: Strava, name: \"Strava\", url: \"https://strava.com\" },\n { logo: Descript, name: \"Descript\", url: \"https://descript.com\" },\n { logo: Duolingo, name: \"Duolingo\", url: \"https://duolingo.com\" },\n { logo: Faire, name: \"Faire\", url: \"https://faire.com\" },\n { logo: Clearbit, name: \"Clearbit\", url: \"https://clearbit.com\" },\n ],\n}: LogoCloudAnimatedProps) {\n const shouldReduceMotion = useReducedMotion();\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","path":"index.tsx","target":"components/smoothui/logo-cloud-2/index.tsx","type":"registry:block"}],"name":"logo-cloud-2","registryDependencies":["https://smoothui.dev/r/shared.json"],"title":"Logo Cloud 2","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":[],"description":"Infinite scrolling logo marquee","devDependencies":[],"files":[{"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 \"@/components/smoothui/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 { logo: , name: \"Canpoy\" },\n { logo: , name: \"Canva\" },\n { logo: , name: \"Casetext\" },\n { logo: , name: \"Strava\" },\n { logo: , name: \"Descript\" },\n { logo: , name: \"Duolingo\" },\n { logo: , name: \"Faire\" },\n { logo: , name: \"Clearbit\" },\n];\n\nconst SPEED_MAP = {\n fast: \"20s\",\n normal: \"40s\",\n slow: \"60s\",\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","path":"index.tsx","target":"components/smoothui/logo-cloud-3/index.tsx","type":"registry:block"}],"name":"logo-cloud-3","registryDependencies":["https://smoothui.dev/r/shared.json"],"title":"Logo Cloud 3","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Interactive logo grid with hover effects","devDependencies":[],"files":[{"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 \"@/components/smoothui/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 { logo: , name: \"Canpoy\" },\n { logo: , name: \"Canva\" },\n { logo: , name: \"Casetext\" },\n { logo: , name: \"Strava\" },\n { logo: , name: \"Descript\" },\n { logo: , name: \"Duolingo\" },\n { logo: , name: \"Faire\" },\n { logo: , name: \"Clearbit\" },\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 bounce: 0.05,\n duration: 0.25,\n type: \"spring\" as const,\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 ) : null}\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","path":"index.tsx","target":"components/smoothui/logo-cloud-4/index.tsx","type":"registry:block"}],"name":"logo-cloud-4","registryDependencies":["https://smoothui.dev/r/shared.json"],"title":"Logo Cloud 4","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Simple pricing block with single plan","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport SmoothButton from \"@/components/smoothui/smooth-button\";\nimport { motion, useReducedMotion } 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 shouldReduceMotion = useReducedMotion();\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","path":"index.tsx","target":"components/smoothui/pricing-1/index.tsx","type":"registry:block"}],"name":"pricing-1","registryDependencies":["https://smoothui.dev/r/smooth-button.json","https://smoothui.dev/r/tokens.json"],"title":"Pricing 1","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Modern pricing block with three tiers","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport SmoothButton from \"@/components/smoothui/smooth-button\";\nimport { motion, useReducedMotion } 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 shouldReduceMotion = useReducedMotion();\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","path":"index.tsx","target":"components/smoothui/pricing-2/index.tsx","type":"registry:block"}],"name":"pricing-2","registryDependencies":["https://smoothui.dev/r/smooth-button.json","https://smoothui.dev/r/tokens.json"],"title":"Pricing 2","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Creative pricing block with two plans","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport SmoothButton from \"@/components/smoothui/smooth-button\";\nimport { motion, useReducedMotion } 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 shouldReduceMotion = useReducedMotion();\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","path":"index.tsx","target":"components/smoothui/pricing-3/index.tsx","type":"registry:block"}],"name":"pricing-3","registryDependencies":["https://smoothui.dev/r/smooth-button.json","https://smoothui.dev/r/tokens.json"],"title":"Pricing 3","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion","class-variance-authority","@radix-ui/react-slot"],"description":"Shared components for SmoothUI blocks","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { motion, useReducedMotion, 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 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 bounce: {\n hidden: { y: -50 },\n visible: {\n transition: { damping: 10, stiffness: 400, type: \"spring\" as const },\n y: 0,\n },\n },\n fade: {},\n flip: {\n hidden: { rotateX: -90 },\n visible: {\n rotateX: 0,\n transition: { damping: 20, stiffness: 300, type: \"spring\" as const },\n },\n },\n rotate: {\n hidden: { rotate: -180 },\n visible: {\n rotate: 0,\n transition: { damping: 15, stiffness: 200, type: \"spring\" as const },\n },\n },\n scale: {\n hidden: { scale: 0.8 },\n visible: { scale: 1 },\n },\n slide: {\n hidden: { y: 20 },\n visible: { y: 0 },\n },\n swing: {\n hidden: { rotate: -10 },\n visible: {\n rotate: 0,\n transition: { damping: 8, stiffness: 300, type: \"spring\" as const },\n },\n },\n zoom: {\n hidden: { scale: 0.5 },\n visible: {\n scale: 1,\n transition: { damping: 20, stiffness: 300, type: \"spring\" as const },\n },\n },\n};\n\nconst reducedContainerVariants: Variants = {\n hidden: { opacity: 1 },\n visible: { opacity: 1, transition: { staggerChildren: 0 } },\n};\n\nconst reducedItemVariants: Variants = {\n hidden: { opacity: 1 },\n visible: { opacity: 1 },\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 shouldReduceMotion = useReducedMotion();\n\n const selectedVariants = {\n container: addDefaultVariants(defaultContainerVariants),\n item: addDefaultVariants(preset ? presetVariants[preset] : {}),\n };\n const containerVariants = shouldReduceMotion\n ? reducedContainerVariants\n : (variants?.container ?? selectedVariants.container);\n const itemVariants = shouldReduceMotion\n ? reducedItemVariants\n : (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","path":"animated-group.tsx","target":"components/smoothui/shared/animated-group.tsx","type":"registry:component"},{"content":"\"use client\";\n\nimport { motion, useReducedMotion } 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 const shouldReduceMotion = useReducedMotion();\n\n return (\n \n {children}\n \n );\n}\n","path":"animated-text.tsx","target":"components/smoothui/shared/animated-text.tsx","type":"registry:component"},{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport SmoothButton from \"@/components/smoothui/smooth-button\";\nimport { Menu, X } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useState } from \"react\";\n\nconst menuItems = [\n { href: \"#link\", id: \"features\", name: \"Features\" },\n { href: \"#link\", id: \"pricing\", name: \"Pricing\" },\n { href: \"#link\", id: \"about\", name: \"About\" },\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 shouldReduceMotion = useReducedMotion();\n const [menuState, setMenuState] = useState(false);\n\n return (\n
\n
\n \n
\n
\n );\n};\n","path":"hero-header.tsx","target":"components/smoothui/shared/hero-header.tsx","type":"registry:component"},{"content":"export { default as Button } from \"@/components/smoothui/smooth-button\";\nexport type { AnimatedGroupProps, PresetType } from \"./animated-group\";\nexport { AnimatedGroup } from \"./animated-group\";\nexport { AnimatedText } from \"./animated-text\";\nexport { HeroHeader } from \"./hero-header\";\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} from \"./logos\";\n","path":"index.ts","target":"components/smoothui/shared/index.ts","type":"registry:component"},{"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","path":"logos.tsx","target":"components/smoothui/shared/logos.tsx","type":"registry:component"},{"content":"import { Slot } from \"@radix-ui/react-slot\";\nimport { cn } from \"@/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 defaultVariants: {\n size: \"default\",\n variant: \"default\",\n },\n variants: {\n size: {\n default: \"h-10 px-4 py-2\",\n icon: \"h-10 w-10\",\n lg: \"h-11 rounded-md px-8\",\n sm: \"h-9 rounded-md px-4 py-2\",\n },\n variant: {\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 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 ghost: \"hover:bg-background hover:text-foreground hover:shadow-custom\",\n link: \"text-foreground underline-offset-4 hover:underline\",\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 },\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","path":"smoothbutton.tsx","target":"components/smoothui/shared/smoothbutton.tsx","type":"registry:component"}],"name":"shared","registryDependencies":["https://smoothui.dev/r/smooth-button.json","https://smoothui.dev/r/tokens.json"],"title":"Shared","type":"registry:component"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Grid stats section block with hover effects","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { motion, useInView, useReducedMotion } 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 description: \"Growing every day\",\n label: \"Active Users\",\n value: \"10M+\",\n },\n {\n description: \"Reliable service\",\n label: \"Uptime\",\n value: \"99.9%\",\n },\n {\n description: \"Worldwide reach\",\n label: \"Countries\",\n value: \"150+\",\n },\n {\n description: \"Always here to help\",\n label: \"Support\",\n value: \"24/7\",\n },\n ],\n}: StatsGridProps) {\n const ref = useRef(null);\n const isInView = useInView(ref, { once: true });\n const shouldReduceMotion = useReducedMotion();\n\n return (\n
\n
\n \n

\n {title}\n

\n

\n {description}\n

\n \n \n {stats.map((stat, index) => (\n {\n if (shouldReduceMotion) {\n return { opacity: 1 };\n }\n return isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 };\n })()}\n className=\"group relative overflow-hidden rounded-2xl border border-border bg-background p-8 text-center transition-all hover:border-brand hover:shadow-lg\"\n initial={\n shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 30 }\n }\n key={stat.label}\n transition={\n shouldReduceMotion\n ? { duration: 0 }\n : { delay: index * STAGGER_DELAY, duration: 0.6 }\n }\n >\n {\n if (shouldReduceMotion) {\n return { scale: 1 };\n }\n return isInView ? { scale: 1 } : { scale: 0.5 };\n })()}\n className=\"mb-2 font-bold text-4xl text-brand lg:text-5xl\"\n initial={shouldReduceMotion ? { scale: 1 } : { scale: 0.5 }}\n transition={\n shouldReduceMotion\n ? { duration: 0 }\n : {\n delay: index * STAGGER_DELAY + VALUE_DELAY_OFFSET,\n duration: 0.8,\n stiffness: 200,\n type: \"spring\" as const,\n }\n }\n >\n {stat.value}\n \n

\n {stat.label}\n

\n {stat.description ? (\n

{stat.description}

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

\n {title}\n

\n

\n {description}\n

\n \n\n \n {stats.map((stat, index) => (\n {\n if (shouldReduceMotion) {\n return { opacity: 1 };\n }\n return isInView\n ? { opacity: 1, scale: 1, y: 0 }\n : { opacity: 0, scale: 0.9, y: 30 };\n })()}\n className=\"group relative overflow-hidden rounded-2xl border border-border bg-gradient-to-br from-background to-background/50 p-6 transition-all hover:scale-105 hover:border-brand hover:shadow-xl\"\n initial={\n shouldReduceMotion\n ? { opacity: 1 }\n : { opacity: 0, scale: 0.9, y: 30 }\n }\n key={stat.label}\n transition={\n shouldReduceMotion\n ? { duration: 0 }\n : {\n delay: index * STAGGER_DELAY,\n duration: 0.6,\n stiffness: 100,\n type: \"spring\" as const,\n }\n }\n >\n {/* Icon */}\n {\n if (shouldReduceMotion) {\n return { rotate: 0, scale: 1 };\n }\n return isInView\n ? { rotate: 0, scale: 1 }\n : { rotate: -10, scale: 0.8 };\n })()}\n className=\"mb-4 text-3xl\"\n initial={\n shouldReduceMotion\n ? { rotate: 0, scale: 1 }\n : { rotate: -10, scale: 0.8 }\n }\n transition={\n shouldReduceMotion\n ? { duration: 0 }\n : {\n delay: index * STAGGER_DELAY + ICON_STAGGER_OFFSET,\n duration: 0.6,\n stiffness: 200,\n type: \"spring\" as const,\n }\n }\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 if (shouldReduceMotion) {\n return { scale: 1 };\n }\n return isInView ? { scale: 1 } : { scale: 0.5 };\n })()}\n className=\"mb-1 font-bold text-2xl text-foreground lg:text-3xl\"\n initial={shouldReduceMotion ? { scale: 1 } : { scale: 0.5 }}\n transition={\n shouldReduceMotion\n ? { duration: 0 }\n : {\n delay: index * STAGGER_DELAY + VALUE_DELAY_OFFSET,\n duration: 0.8,\n stiffness: 200,\n type: \"spring\" as const,\n }\n }\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 ) : null}\n\n {/* Trend */}\n {stat.trend ? (\n {\n if (shouldReduceMotion) {\n return { opacity: 1 };\n }\n return isInView\n ? { opacity: 1, x: 0 }\n : { opacity: 0, x: -10 };\n })()}\n className={`inline-flex items-center rounded-full px-2 py-1 font-medium text-xs ${\n stat.trend.direction === \"up\"\n ? \"bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400\"\n : \"bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400\"\n }`}\n initial={\n shouldReduceMotion ? { opacity: 1 } : { opacity: 0, x: -10 }\n }\n transition={\n shouldReduceMotion\n ? { duration: 0 }\n : {\n delay: index * STAGGER_DELAY + TREND_STAGGER_OFFSET,\n duration: 0.4,\n }\n }\n >\n \n {stat.trend.direction === \"up\" ? \"↗\" : \"↘\"}\n \n {stat.trend.value}\n \n ) : null}\n\n {/* Hover effect background */}\n \n \n ))}\n
\n \n
\n );\n}\n\nexport default StatsCards;\n","path":"index.tsx","target":"components/smoothui/stats-2/index.tsx","type":"registry:block"}],"name":"stats-2","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Stats 2","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Grid team section block with hover effects","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { getAllPeople, getAvatarUrl, type Person } from \"@/lib/smoothui-data\";\nimport { motion, useInView, useReducedMotion } 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 shouldReduceMotion = useReducedMotion();\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 if (shouldReduceMotion) {\n return { opacity: 1 };\n }\n return isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 };\n })()}\n initial={\n shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 30 }\n }\n key={member.name}\n transition={\n shouldReduceMotion\n ? { duration: 0 }\n : { delay: index * STAGGER_DELAY, duration: 0.6 }\n }\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 ) : null}\n {/* Bio */}\n {member.bio ? (\n

\n {member.bio}\n

\n ) : null}\n \n \n ))}\n \n
\n
\n );\n}\n\nexport default TeamGrid;\n","path":"index.tsx","target":"components/smoothui/team-1/index.tsx","type":"registry:block"}],"name":"team-1","registryDependencies":["https://smoothui.dev/r/data.json"],"title":"Team 1","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Carousel team section block with auto-play","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { getAllPeople, getAvatarUrl, type Person } from \"@/lib/smoothui-data\";\nimport { motion, useReducedMotion } 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 shouldReduceMotion = useReducedMotion();\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","path":"index.tsx","target":"components/smoothui/team-2/index.tsx","type":"registry:block"}],"name":"team-2","registryDependencies":["https://smoothui.dev/r/data.json"],"title":"Team 2","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Simple testimonials block with auto-rotating cards","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { getAvatarUrl, getTestimonials } from \"@/lib/smoothui-data\";\nimport { AnimatePresence, motion, useReducedMotion } 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 avatar: testimonial.avatar,\n name: testimonial.name,\n quote: testimonial.content || \"\",\n role: testimonial.role,\n}));\n\nexport function TestimonialsSimple() {\n const shouldReduceMotion = useReducedMotion();\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","path":"index.tsx","target":"components/smoothui/testimonials-1/index.tsx","type":"registry:block"}],"name":"testimonials-1","registryDependencies":["https://smoothui.dev/r/data.json","https://smoothui.dev/r/tokens.json"],"title":"Testimonials 1","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"Grid testimonials block with navigation arrows","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/components/ui/avatar\";\nimport { getAvatarUrl, getTestimonials } from \"@/lib/smoothui-data\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\nconst testimonials = getTestimonials(7);\n\nexport function TestimonialsGrid() {\n const shouldReduceMotion = useReducedMotion();\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","path":"index.tsx","target":"components/smoothui/testimonials-2/index.tsx","type":"registry:block"}],"name":"testimonials-2","registryDependencies":["avatar","https://smoothui.dev/r/data.json"],"title":"Testimonials 2","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"Star testimonials block with grid layout","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/components/ui/avatar\";\nimport { cn } from \"@/lib/utils\";\nimport { getAvatarUrl, getTestimonials } from \"@/lib/smoothui-data\";\nimport { Star } from \"lucide-react\";\nimport { motion, useReducedMotion } from \"motion/react\";\n\nconst testimonials = getTestimonials(4);\n\nexport function TestimonialsStars() {\n const shouldReduceMotion = useReducedMotion();\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","path":"index.tsx","target":"components/smoothui/testimonials-3/index.tsx","type":"registry:block"}],"name":"testimonials-3","registryDependencies":["avatar","https://smoothui.dev/r/data.json"],"title":"Testimonials 3","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":[],"description":"Canvas-based generative pixel avatar for AI agents, unique per seed.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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 brightness: 0.3 + rng() * 0.7,\n colorIndex: Math.floor(rng() * 3),\n phase: rng() * Math.PI * 2,\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","path":"index.tsx","target":"components/smoothui/agent-avatar/index.tsx","type":"registry:ui"}],"name":"agent-avatar","registryDependencies":[],"title":"Agent Avatar","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"Human-in-the-loop approval card where the chosen option expands to fill the card while the alternatives collapse away.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Check } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { type ReactNode, useState } from \"react\";\n\nconst SPRING_DEFAULT = {\n bounce: 0.1,\n duration: 0.25,\n type: \"spring\" as const,\n};\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\nconst CHOICE_STAGGER = 0.03;\n\nexport type AIApprovalOption = {\n /** Marks the option as the destructive one, e.g. \"Delete everything\". */\n destructive?: boolean;\n /** Secondary line under the label. */\n detail?: string;\n id: string;\n label: string;\n};\n\nexport type AIApprovalProps = {\n className?: string;\n /** Extra context under the question. */\n children?: ReactNode;\n /** Called once, with the chosen option. */\n onDecide?: (option: AIApprovalOption) => void;\n options: AIApprovalOption[];\n /** What the agent needs a human to settle. */\n question: string;\n /** Render already-resolved, e.g. when replaying a transcript. */\n resolvedId?: string;\n};\n\n/**\n * The card an agent puts up before it acts.\n *\n * Choosing does not tick a radio button — the chosen option expands to fill the\n * card and the alternatives collapse out of existence. The decision should look\n * as irreversible as it is; leaving the rejected options sitting there greyed out\n * invites a second look at something that already happened.\n */\nconst AIApproval = ({\n className,\n children,\n onDecide,\n options,\n question,\n resolvedId,\n}: AIApprovalProps) => {\n const shouldReduceMotion = useReducedMotion();\n const [chosenId, setChosenId] = useState(resolvedId ?? null);\n\n const chosen = options.find((option) => option.id === chosenId) ?? null;\n\n const decide = (option: AIApprovalOption) => {\n if (chosenId) {\n return;\n }\n setChosenId(option.id);\n onDecide?.(option);\n };\n\n return (\n \n \n

{question}

\n {children ? (\n
\n {children}\n
\n ) : null}\n \n\n
\n \n {chosen ? (\n \n \n \n \n {chosen.label}\n {chosen.detail ? (\n \n {chosen.detail}\n \n ) : null}\n \n ) : (\n \n {options.map((option, index) => (\n decide(option)}\n transition={\n shouldReduceMotion\n ? { duration: 0 }\n : { ...SPRING_DEFAULT, delay: index * CHOICE_STAGGER }\n }\n type=\"button\"\n whileTap={shouldReduceMotion ? undefined : { scale: 0.99 }}\n >\n {option.label}\n {option.detail ? (\n \n {option.detail}\n \n ) : null}\n \n ))}\n \n )}\n \n
\n \n );\n};\n\nexport default AIApproval;\n","path":"index.tsx","target":"components/smoothui/ai-approval/index.tsx","type":"registry:ui"}],"name":"ai-approval","registryDependencies":[],"title":"Ai Approval","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"Generated-artifact frame whose preview and code panes swap along a shared axis rather than cross-fading.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Check, Copy } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { type ReactNode, useEffect, useId, useState } from \"react\";\n\nconst SPRING_DEFAULT = {\n bounce: 0.1,\n duration: 0.25,\n type: \"spring\" as const,\n};\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\nconst TRAVEL_PX = 24;\nconst COPIED_RESET_MS = 1600;\n\nexport type AIArtifactPane = \"preview\" | \"code\";\n\nexport type AIArtifactProps = {\n className?: string;\n /** The raw form — source, JSON, markup. */\n code?: ReactNode;\n /** Plain text handed to the clipboard. Omit to hide the copy action. */\n copyText?: string;\n /** Which pane to start on. */\n defaultPane?: AIArtifactPane;\n /** The rendered form. */\n preview?: ReactNode;\n /** Name the artifact so it can be referred to in conversation. */\n title: string;\n};\n\nconst PANES: AIArtifactPane[] = [\"preview\", \"code\"];\n\n/**\n * A frame around something the model produced.\n *\n * The two panes travel along a single horizontal axis — preview sits to the left\n * of code, always — so the swap has a direction and, after one go, a memory. A\n * cross-fade between them would leave the user with no sense of where the other\n * pane went, and no expectation of where it will come back from.\n */\nconst AIArtifact = ({\n className,\n code,\n copyText,\n defaultPane = \"preview\",\n preview,\n title,\n}: AIArtifactProps) => {\n const shouldReduceMotion = useReducedMotion();\n const [pane, setPane] = useState(defaultPane);\n const [hasCopied, setHasCopied] = useState(false);\n const indicatorId = useId();\n\n const available = PANES.filter((candidate) =>\n candidate === \"preview\" ? Boolean(preview) : Boolean(code)\n );\n\n useEffect(() => {\n if (!hasCopied) {\n return;\n }\n const timeout = setTimeout(() => setHasCopied(false), COPIED_RESET_MS);\n return () => clearTimeout(timeout);\n }, [hasCopied]);\n\n const copy = async () => {\n if (!copyText) {\n return;\n }\n try {\n await navigator.clipboard.writeText(copyText);\n setHasCopied(true);\n } catch {\n // A blocked clipboard is not worth an error state.\n }\n };\n\n const direction = pane === \"code\" ? 1 : -1;\n\n return (\n \n
\n \n {title}\n \n\n {available.length > 1 && (\n
\n {available.map((candidate) => (\n setPane(candidate)}\n role=\"tab\"\n type=\"button\"\n >\n {pane === candidate && (\n // A single shared element slides between the tabs. Two\n // separately styled tabs would just swap colour, which reads\n // as two states rather than one selection moving.\n \n )}\n {candidate}\n \n ))}\n
\n )}\n\n {copyText ? (\n 1 ? \"\" : \"ml-auto\",\n hasCopied\n ? \"text-foreground\"\n : \"text-muted-foreground hover:bg-muted hover:text-foreground\"\n )}\n onClick={copy}\n type=\"button\"\n >\n {hasCopied ? (\n \n ) : (\n \n )}\n \n ) : null}\n
\n\n
\n \n \n {pane === \"preview\" ? (\n
{preview}
\n ) : (\n 
\n                {code}\n
\n )}\n \n \n
\n \n );\n};\n\nexport default AIArtifact;\n","path":"index.tsx","target":"components/smoothui/ai-artifact/index.tsx","type":"registry:ui"}],"name":"ai-artifact","registryDependencies":[],"title":"Ai Artifact","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"An interactive AI branch component for displaying conversation flows.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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\n/**\n * The same two springs every other AI component uses.\n *\n * This file predates that vocabulary and had eight hand-tuned\n * `stiffness`/`damping` pairs — several of which also passed `duration`, which\n * Motion ignores once stiffness is present. Sharing the tokens is what stops\n * `ai-branch` feeling like it came from a different library than `ai-message`.\n */\nconst SPRING_DEFAULT = {\n bounce: 0.1,\n duration: 0.25,\n type: \"spring\" as const,\n};\nconst SPRING_SNAPPY = {\n bounce: 0,\n duration: 0.2,\n type: \"spring\" as const,\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 branches,\n currentBranch,\n goToNext,\n goToPrevious,\n setBranches,\n totalBranches: branches.length,\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={shouldReduceMotion ? { duration: 0 } : SPRING_DEFAULT}\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

\n {activeBranch.userMessage}\n

\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 ) : null}\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","path":"index.tsx","target":"components/smoothui/ai-branch/index.tsx","type":"registry:ui"}],"name":"ai-branch","registryDependencies":[],"title":"Ai Branch","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"Inline citation pill that opens an origin-aware source card, anchored to the pill it came from.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { ArrowUpRight, Globe } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { type ReactNode, useEffect, useRef, useState } from \"react\";\n\nconst SPRING_DEFAULT = {\n bounce: 0.1,\n duration: 0.25,\n type: \"spring\" as const,\n};\n/** Grace period so the pointer can cross the gap between pill and card. */\nconst CLOSE_DELAY_MS = 120;\nconst CARD_WIDTH_PX = 288;\n\nexport type AICitationProps = {\n className?: string;\n /** Excerpt or description shown in the card. */\n description?: string;\n /**\n * The source's mark for the card header — a real isotype or an ``.\n *\n * A node rather than a URL so a brand's own SVG can be passed straight in.\n */\n favicon?: ReactNode;\n /** The number or short label shown in the pill. */\n label: string | number;\n title: string;\n url: string;\n};\n\nconst hostOf = (url: string): string => {\n try {\n return new URL(url).hostname.replace(/^www\\./, \"\");\n } catch {\n return url;\n }\n};\n\n/**\n * An inline citation that can be peeked at.\n *\n * The card scales up **from the pill** rather than fading in centred: with a\n * transform origin at the bottom of the marker, the growth points back at what\n * was clicked, so the pointer never loses the thread. It opens on hover and on\n * focus, and closes on Escape — a hover-only preview is unreachable by keyboard\n * and unusable on touch.\n */\nconst AICitation = ({\n className,\n description,\n favicon,\n label,\n title,\n url,\n}: AICitationProps) => {\n const shouldReduceMotion = useReducedMotion();\n const [isOpen, setIsOpen] = useState(false);\n const closeTimeoutRef = useRef | null>(null);\n\n const open = () => {\n if (closeTimeoutRef.current) {\n clearTimeout(closeTimeoutRef.current);\n closeTimeoutRef.current = null;\n }\n setIsOpen(true);\n };\n\n const scheduleClose = () => {\n closeTimeoutRef.current = setTimeout(\n () => setIsOpen(false),\n CLOSE_DELAY_MS\n );\n };\n\n useEffect(\n () => () => {\n if (closeTimeoutRef.current) {\n clearTimeout(closeTimeoutRef.current);\n }\n },\n []\n );\n\n useEffect(() => {\n if (!isOpen) {\n return;\n }\n const handle = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n setIsOpen(false);\n }\n };\n window.addEventListener(\"keydown\", handle);\n return () => window.removeEventListener(\"keydown\", handle);\n }, [isOpen]);\n\n return (\n // biome-ignore lint/a11y/noStaticElementInteractions: the wrapper only tracks hover and focus to reveal a preview of the link it contains; the link itself is the interactive element and works without it\n // biome-ignore lint/a11y/noNoninteractiveElementInteractions: same — progressive disclosure around a real anchor, not an interactive span\n \n \n {label}\n \n\n \n {isOpen ? (\n \n \n \n {favicon ?? }\n \n \n {hostOf(url)}\n \n \n \n\n \n {title}\n \n\n {description ? (\n \n {description}\n \n ) : null}\n \n ) : null}\n \n \n );\n};\n\nexport default AICitation;\n","path":"index.tsx","target":"components/smoothui/ai-citation/index.tsx","type":"registry:ui"}],"name":"ai-citation","registryDependencies":[],"title":"Ai Citation","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"Context window meter whose ring fills and shifts hue at the warning threshold, never changing size.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useState } from \"react\";\n\nconst SPRING_DEFAULT = {\n bounce: 0.1,\n duration: 0.25,\n type: \"spring\" as const,\n};\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\nconst VIEWBOX = 32;\nconst CENTER = VIEWBOX / 2;\nconst RADIUS = 13;\nconst STROKE_WIDTH = 3;\n/** Fraction of the window at which the ring changes hue. */\nconst DEFAULT_WARNING_AT = 0.8;\nconst DEFAULT_DANGER_AT = 0.95;\nconst WARNING_COLOR = \"oklch(78% 0.16 75)\";\nconst DANGER_COLOR = \"oklch(63% 0.21 25)\";\n\nexport type AIContextBreakdownItem = {\n label: string;\n tokens: number;\n};\n\nexport type AIContextMeterProps = {\n /** Optional split of what is filling the window. */\n breakdown?: AIContextBreakdownItem[];\n className?: string;\n /** Fraction at which the ring turns red. */\n dangerAt?: number;\n /** Total size of the context window, in tokens. */\n limit: number;\n /** Tokens currently used. */\n used: number;\n /** Fraction at which the ring turns amber. */\n warningAt?: number;\n};\n\nconst COMPACT_THRESHOLD = 1000;\nconst MILLION = 1_000_000;\n\n/** Below this many thousands, keep a decimal — \"2k\" for 1,800 is a lie. */\nconst DECIMAL_BELOW = 10 * COMPACT_THRESHOLD;\n\nconst formatTokens = (tokens: number): string => {\n if (tokens >= MILLION) {\n return `${(tokens / MILLION).toFixed(1)}M`;\n }\n if (tokens >= DECIMAL_BELOW) {\n return `${Math.round(tokens / COMPACT_THRESHOLD)}k`;\n }\n if (tokens >= COMPACT_THRESHOLD) {\n return `${(tokens / COMPACT_THRESHOLD).toFixed(1)}k`;\n }\n return String(tokens);\n};\n\n/**\n * How much of the context window is gone.\n *\n * Crossing a threshold changes the **hue**, never the size. Growing the ring at\n * the warning point would read as progress — as something filling up nicely —\n * which is the opposite of the message. The geometry stays put and the colour\n * does the talking.\n */\nconst AIContextMeter = ({\n breakdown,\n className,\n dangerAt = DEFAULT_DANGER_AT,\n limit,\n used,\n warningAt = DEFAULT_WARNING_AT,\n}: AIContextMeterProps) => {\n const shouldReduceMotion = useReducedMotion();\n const [isOpen, setIsOpen] = useState(false);\n\n const fraction = limit > 0 ? Math.min(1, Math.max(0, used / limit)) : 0;\n const percent = Math.round(fraction * 100);\n\n const color = (() => {\n if (fraction >= dangerAt) {\n return DANGER_COLOR;\n }\n if (fraction >= warningAt) {\n return WARNING_COLOR;\n }\n return \"currentColor\";\n })();\n\n const hasBreakdown = Boolean(breakdown?.length);\n\n return (\n
\n setIsOpen(false)}\n onClick={() => setIsOpen((current) => !current)}\n onFocus={() => hasBreakdown && setIsOpen(true)}\n onMouseEnter={() => hasBreakdown && setIsOpen(true)}\n onMouseLeave={() => setIsOpen(false)}\n type=\"button\"\n >\n \n \n {/* pathLength normalises the dash maths, so the fill is just the\n fraction — no circumference arithmetic to get wrong. */}\n \n \n\n \n {formatTokens(used)}/{formatTokens(limit)}\n \n \n\n \n {isOpen && hasBreakdown ? (\n \n
    \n {breakdown?.map((item) => (\n \n \n {item.label}\n \n \n {formatTokens(item.tokens)}\n \n \n ))}\n
\n \n ) : null}\n \n
\n );\n};\n\nexport default AIContextMeter;\n","path":"index.tsx","target":"components/smoothui/ai-context-meter/index.tsx","type":"registry:ui"}],"name":"ai-context-meter","registryDependencies":[],"title":"Ai Context Meter","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"Thread scroll container that follows the bottom only while the reader is already there, offering a jump-to-latest pill when it stops.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { ArrowDown } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport {\n type ReactNode,\n useCallback,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\n\nconst SPRING_DEFAULT = {\n bounce: 0.1,\n duration: 0.25,\n type: \"spring\" as const,\n};\n/**\n * How close to the bottom still counts as \"at the bottom\".\n *\n * Zero would break on fractional scroll heights, and anything large would keep\n * yanking the view down while someone is reading a few lines up.\n */\nconst BOTTOM_THRESHOLD_PX = 48;\n\nexport type AIConversationProps = {\n children: ReactNode;\n className?: string;\n /**\n * Changes whenever content grows — message count, or streamed text length.\n * Used to decide when to follow the bottom.\n */\n contentKey?: string | number;\n};\n\n/**\n * Scroll container for a thread.\n *\n * It follows the bottom **only while the reader is already there**. Scrolling up\n * during a stream is an explicit act — the user wants to read something — and\n * dragging them back down is the single most common way chat UIs become\n * unusable. When it stops following, a pill appears to offer the trip back.\n */\nconst AIConversation = ({\n children,\n className,\n contentKey,\n}: AIConversationProps) => {\n const shouldReduceMotion = useReducedMotion();\n const viewportRef = useRef(null);\n const [isPinned, setIsPinned] = useState(true);\n\n const measure = useCallback(() => {\n const viewport = viewportRef.current;\n if (!viewport) {\n return;\n }\n const distance =\n viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;\n setIsPinned(distance <= BOTTOM_THRESHOLD_PX);\n }, []);\n\n const scrollToBottom = useCallback((behavior: ScrollBehavior) => {\n const viewport = viewportRef.current;\n if (!viewport) {\n return;\n }\n // Element.scrollTo is missing in jsdom and in a few older engines, and it is\n // not worth throwing over — assigning scrollTop lands in the same place,\n // just without the smoothing.\n if (typeof viewport.scrollTo === \"function\") {\n viewport.scrollTo({ behavior, top: viewport.scrollHeight });\n } else {\n viewport.scrollTop = viewport.scrollHeight;\n }\n setIsPinned(true);\n }, []);\n\n // Layout effect, so the jump happens in the same frame the content grew and\n // the reader never sees a flash of the pre-scroll position.\n useLayoutEffect(() => {\n if (isPinned) {\n scrollToBottom(shouldReduceMotion ? \"auto\" : \"smooth\");\n }\n }, [contentKey, isPinned, scrollToBottom, shouldReduceMotion]);\n\n useEffect(() => {\n const viewport = viewportRef.current;\n if (!viewport) {\n return;\n }\n // A resize observer catches content that grows without contentKey changing —\n // an image finishing loading, a details element opening.\n const observer = new ResizeObserver(measure);\n for (const child of Array.from(viewport.children)) {\n observer.observe(child);\n }\n return () => observer.disconnect();\n }, [measure]);\n\n return (\n
\n \n {children}\n
\n\n \n {!isPinned && (\n \n scrollToBottom(shouldReduceMotion ? \"auto\" : \"smooth\")\n }\n transition={shouldReduceMotion ? { duration: 0 } : SPRING_DEFAULT}\n type=\"button\"\n >\n \n Jump to latest\n \n )}\n \n \n );\n};\n\nexport default AIConversation;\n","path":"index.tsx","target":"components/smoothui/ai-conversation/index.tsx","type":"registry:ui"}],"name":"ai-conversation","registryDependencies":[],"title":"Ai Conversation","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Shared AI state contract, per-state motion presets and microphone amplitude hooks for SmoothUI AI components.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport {\n type MotionValue,\n useAnimationFrame,\n useMotionValue,\n} from \"motion/react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\n/**\n * The single state contract shared by every SmoothUI AI component.\n *\n * Passing the same value to an orb, a prompt input and a tool card makes the\n * whole surface move as one organism instead of a set of independent widgets.\n */\nexport type AIState =\n | \"idle\"\n | \"listening\"\n | \"thinking\"\n | \"streaming\"\n | \"done\"\n | \"error\";\n\n/**\n * A behavioural hint each component expresses **in its own material**.\n *\n * Deliberately not an overlay. Bolting one shared graphic onto every orb makes\n * four different materials look like the same widget wearing a costume, and it\n * pushes literal iconography (a checkmark, a warning ring) onto pieces that are\n * decorative by nature. Instead: a shader warps, a canvas ring loses harmonics,\n * a character changes expression. Same vocabulary, different flesh.\n */\nexport type AIStateMotif =\n | \"breathe\"\n | \"receive\"\n | \"scan\"\n | \"pulse\"\n | \"ping\"\n | \"fault\";\n\n/** Semantic accent applied on top of the component's own palette. */\nexport type AIStateAccent = \"success\" | \"danger\" | null;\n\n/** Motion parameters a component reads to render a given {@link AIState}. */\nexport type AIStateMotion = {\n /** Semantic colour override, so status is carried by hue and not only motion. */\n accent: AIStateAccent;\n /** Outer bloom strength, 0–1. */\n glow: number;\n /** Palette hue rotation in degrees. Small shifts read as a mood change. */\n hueRotate: number;\n /** Overall motion energy, 0–1. Scales ambient loops and displacement. */\n intensity: number;\n /** Behavioural hint; each component expresses it in its own material. */\n motif: AIStateMotif;\n /** Seconds between discrete pulses, for rhythmic behaviour. */\n pulseSeconds: number;\n /**\n * How far a shader's domain warp pushes the field, 0–1. Low values read as a\n * calm surface; high values churn without the silhouette growing.\n */\n turbulence: number;\n /** Revolutions per second of the noise field — the slow tumble. */\n tumble: number;\n /** How much external amplitude reaches the surface, 0 = ignore it. */\n reactivity: number;\n /** Chroma multiplier. Below 1 desaturates. */\n saturation: number;\n /** Resting scale of the surface, 1 = no change. */\n scale: number;\n /** Ambient loop speed multiplier, 1 = the component's base tempo. */\n speed: number;\n};\n\n/**\n * Per-state presets.\n *\n * Deliberate choices worth keeping:\n * - `thinking` has `scale: 1` — internal churn only, so layout stays calm while\n * the model works. Growing the surface here makes pages feel unstable.\n * - `error` desaturates instead of growing, so it reads as a state change\n * rather than an attention grab.\n * - `done` overshoots once; components are expected to settle back to `idle`.\n * - Each state owns a distinct `motif`, so the six states are told apart by\n * what moves, not by how fast it moves.\n */\nexport const AI_STATE_MOTION: Record = {\n done: {\n accent: \"success\",\n glow: 0.7,\n hueRotate: 0,\n intensity: 0.4,\n motif: \"ping\",\n pulseSeconds: 0.65,\n reactivity: 0,\n saturation: 1,\n scale: 1.1,\n speed: 0.8,\n // The field settles almost flat — stillness is what reads as \"finished\".\n tumble: 0.02,\n turbulence: 0.08,\n },\n error: {\n accent: \"danger\",\n glow: 0.25,\n hueRotate: 0,\n intensity: 0.5,\n motif: \"fault\",\n pulseSeconds: 0.9,\n reactivity: 0,\n saturation: 0.3,\n scale: 0.96,\n speed: 1,\n // Tumble stalls while turbulence stays mid: the surface twitches in place\n // instead of flowing, which is what a fault feels like.\n tumble: 0,\n turbulence: 0.55,\n },\n idle: {\n accent: null,\n glow: 0.15,\n hueRotate: 0,\n intensity: 0.3,\n motif: \"breathe\",\n pulseSeconds: 4.5,\n reactivity: 0,\n saturation: 0.75,\n scale: 0.94,\n speed: 0.6,\n tumble: 0.012,\n turbulence: 0.14,\n },\n listening: {\n accent: null,\n glow: 0.6,\n hueRotate: 0,\n intensity: 0.75,\n motif: \"receive\",\n pulseSeconds: 1.6,\n reactivity: 1,\n saturation: 1.05,\n scale: 1.06,\n speed: 1,\n tumble: 0.03,\n turbulence: 0.42,\n },\n streaming: {\n accent: null,\n glow: 0.45,\n hueRotate: -10,\n intensity: 0.6,\n motif: \"pulse\",\n pulseSeconds: 1.25,\n reactivity: 0.6,\n saturation: 1,\n scale: 1.02,\n speed: 1.4,\n tumble: 0.06,\n turbulence: 0.5,\n },\n thinking: {\n accent: null,\n glow: 0.35,\n hueRotate: 18,\n intensity: 1,\n motif: \"scan\",\n pulseSeconds: 1.1,\n reactivity: 0.15,\n saturation: 1,\n scale: 1,\n speed: 2.4,\n // High churn, unchanged silhouette: the work is visible without the orb\n // growing and unsettling the layout around it.\n tumble: 0.14,\n turbulence: 0.95,\n },\n};\n\n/** Semantic accents. Deliberately not tokens — orbs render outside a theme. */\nexport const AI_ACCENT_COLORS: Record<\"success\" | \"danger\", string> = {\n danger: \"oklch(63% 0.21 25)\",\n success: \"oklch(72% 0.17 150)\",\n};\n\n/**\n * Colour used by a state's overlay motif: the semantic accent when the state\n * has one, otherwise the component's own secondary colour.\n */\nexport const getAIStateAccentColor = (\n state: AIState | undefined,\n fallback: string\n): string => {\n const accent = AI_STATE_MOTION[state ?? \"idle\"]?.accent;\n return accent ? AI_ACCENT_COLORS[accent] : fallback;\n};\n\n/** Motion preset for a state, falling back to `idle` for unknown values. */\nexport const getAIStateMotion = (state: AIState | undefined): AIStateMotion =>\n AI_STATE_MOTION[state ?? \"idle\"] ?? AI_STATE_MOTION.idle;\n\n/**\n * Amplitude accepted by every reactive AI component.\n *\n * A `MotionValue` is the preferred form: it updates outside React, so a 60fps\n * audio signal never triggers a re-render.\n */\nexport type AIAmplitude = number | MotionValue | undefined;\n\nconst isMotionValue = (value: AIAmplitude): value is MotionValue =>\n typeof value === \"object\" && value !== null && \"get\" in value;\n\n/**\n * Normalises the `amplitude` prop into a stable `MotionValue` so\n * component internals only deal with one shape.\n */\nexport const useAmplitudeValue = (\n amplitude: AIAmplitude\n): MotionValue => {\n const fallback = useMotionValue(0);\n const numeric = typeof amplitude === \"number\" ? amplitude : null;\n\n useEffect(() => {\n if (numeric !== null) {\n fallback.set(numeric);\n }\n }, [numeric, fallback]);\n\n return isMotionValue(amplitude) ? amplitude : fallback;\n};\n\nexport type AudioAmplitudeStatus =\n | \"idle\"\n | \"requesting\"\n | \"active\"\n | \"denied\"\n | \"unsupported\";\n\nexport type UseAudioAmplitudeOptions = {\n /** Request microphone access as soon as the hook mounts. */\n autoStart?: boolean;\n /**\n * Envelope smoothing, 0–1. Higher is smoother and lazier; the default keeps\n * attack snappy so an orb reacts on the first syllable.\n */\n smoothing?: number;\n /** FFT size handed to the analyser node. Must be a power of two. */\n fftSize?: number;\n};\n\nexport type UseAudioAmplitudeResult = {\n /** Smoothed RMS level, 0–1, as a `MotionValue`. */\n amplitude: MotionValue;\n status: AudioAmplitudeStatus;\n start: () => Promise;\n stop: () => void;\n};\n\nconst DEFAULT_SMOOTHING = 0.55;\nconst DEFAULT_FFT_SIZE = 512;\n/** Raw RMS rarely exceeds ~0.3 for speech, so normalise into a usable 0–1. */\nconst RMS_TO_UNIT = 3.2;\n/** Attack is faster than release so peaks land immediately and decay gently. */\nconst ATTACK_FACTOR = 0.35;\n\n/**\n * Reads microphone loudness as a 0–1 `MotionValue`.\n *\n * SSR-safe, permission-aware, and silent on failure — a denied prompt leaves\n * the amplitude at 0 so the consuming component simply falls back to its\n * ambient animation.\n */\nexport const useAudioAmplitude = (\n options: UseAudioAmplitudeOptions = {}\n): UseAudioAmplitudeResult => {\n const {\n autoStart = false,\n smoothing = DEFAULT_SMOOTHING,\n fftSize = DEFAULT_FFT_SIZE,\n } = options;\n\n const amplitude = useMotionValue(0);\n const [status, setStatus] = useState(\"idle\");\n\n const contextRef = useRef(null);\n const streamRef = useRef(null);\n const analyserRef = useRef(null);\n const bufferRef = useRef | null>(null);\n\n const stop = useCallback(() => {\n for (const track of streamRef.current?.getTracks() ?? []) {\n track.stop();\n }\n streamRef.current = null;\n analyserRef.current = null;\n bufferRef.current = null;\n contextRef.current?.close();\n contextRef.current = null;\n amplitude.set(0);\n setStatus(\"idle\");\n }, [amplitude]);\n\n const start = useCallback(async () => {\n if (analyserRef.current) {\n return;\n }\n\n const AudioContextCtor =\n typeof window === \"undefined\"\n ? undefined\n : (window.AudioContext ??\n (window as unknown as { webkitAudioContext?: typeof AudioContext })\n .webkitAudioContext);\n\n if (!(AudioContextCtor && navigator.mediaDevices?.getUserMedia)) {\n setStatus(\"unsupported\");\n return;\n }\n\n setStatus(\"requesting\");\n\n try {\n const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n const context = new AudioContextCtor();\n const analyser = context.createAnalyser();\n analyser.fftSize = fftSize;\n context.createMediaStreamSource(stream).connect(analyser);\n\n streamRef.current = stream;\n contextRef.current = context;\n analyserRef.current = analyser;\n bufferRef.current = new Float32Array(analyser.fftSize);\n setStatus(\"active\");\n } catch {\n setStatus(\"denied\");\n }\n }, [fftSize]);\n\n useEffect(() => {\n if (autoStart) {\n start();\n }\n return stop;\n }, [autoStart, start, stop]);\n\n useAnimationFrame(() => {\n const analyser = analyserRef.current;\n const buffer = bufferRef.current;\n if (!(analyser && buffer)) {\n return;\n }\n\n analyser.getFloatTimeDomainData(buffer);\n\n let sumOfSquares = 0;\n for (const sample of buffer) {\n sumOfSquares += sample * sample;\n }\n const rms = Math.sqrt(sumOfSquares / buffer.length);\n const target = Math.min(1, rms * RMS_TO_UNIT);\n\n const previous = amplitude.get();\n const factor = target > previous ? smoothing * ATTACK_FACTOR : smoothing;\n amplitude.set(previous + (target - previous) * (1 - factor));\n });\n\n return { amplitude, start, status, stop };\n};\n\n/**\n * Amplitude generator for demos, docs and previews — no microphone involved.\n *\n * Produces a plausible speech-like envelope whose energy follows the current\n * {@link AIState}, so every example can show the reactive behaviour without\n * asking the visitor for permissions.\n */\nexport const useSimulatedAmplitude = (\n state: AIState = \"idle\"\n): MotionValue => {\n const amplitude = useMotionValue(0);\n const motion = getAIStateMotion(state);\n\n useAnimationFrame((time) => {\n const t = time / 1000;\n // Three detuned sines read as organic; a single sine reads as a metronome.\n const envelope =\n 0.5 +\n 0.3 * Math.sin(t * 2.1 * motion.speed) +\n 0.14 * Math.sin(t * 5.3 * motion.speed + 1.7) +\n 0.06 * Math.sin(t * 11.7 * motion.speed + 0.4);\n\n amplitude.set(Math.min(1, Math.max(0, envelope * motion.intensity)));\n });\n\n return amplitude;\n};\n","path":"index.tsx","target":"components/smoothui/ai-core/index.tsx","type":"registry:ui"}],"name":"ai-core","registryDependencies":[],"title":"Ai Core","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"Proposed code or data edit where added lines wipe in from the left and rejected lines collapse to nothing.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useState } from \"react\";\n\nconst SPRING_DEFAULT = {\n bounce: 0.1,\n duration: 0.25,\n type: \"spring\" as const,\n};\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\nconst LINE_STAGGER = 0.02;\nconst WIPE_DURATION = 0.28;\nconst FLASH_DURATION = 0.35;\nconst SUCCESS_TINT = \"oklch(72% 0.17 150 / 0.14)\";\nconst DANGER_TINT = \"oklch(63% 0.21 25 / 0.12)\";\n\nexport type AIDiffLineKind = \"added\" | \"removed\" | \"context\";\n\nexport type AIDiffLine = {\n content: string;\n kind: AIDiffLineKind;\n /** Line number in the file. Omit for tabular data rather than code. */\n number?: number;\n};\n\nexport type AIDiffProps = {\n className?: string;\n lines: AIDiffLine[];\n onAccept?: () => void;\n onReject?: () => void;\n /** File path or a description of what is being changed. */\n title?: string;\n};\n\nconst PREFIX: Record = {\n added: \"+\",\n context: \" \",\n removed: \"-\",\n};\n\n/**\n * A proposed edit awaiting a human yes or no.\n *\n * Added lines wipe in from the left with a clip path rather than fading: a wipe\n * has a direction, and direction is what tells you the change was *written*\n * rather than always having been there. Rejecting collapses the lines to zero\n * height so the space is reclaimed — a rejected edit should stop occupying the\n * page.\n */\nconst AIDiff = ({\n className,\n lines,\n onAccept,\n onReject,\n title,\n}: AIDiffProps) => {\n const shouldReduceMotion = useReducedMotion();\n const [decision, setDecision] = useState<\"accepted\" | \"rejected\" | null>(\n null\n );\n\n const accept = () => {\n setDecision(\"accepted\");\n onAccept?.();\n };\n\n const reject = () => {\n setDecision(\"rejected\");\n onReject?.();\n };\n\n const added = lines.filter((line) => line.kind === \"added\").length;\n const removed = lines.filter((line) => line.kind === \"removed\").length;\n\n return (\n \n
\n {title ? (\n \n {title}\n \n ) : null}\n \n +{added}\n -{removed}\n \n
\n\n \n {decision !== \"rejected\" && (\n \n 
\n              {lines.map((line, index) => (\n                \n                  {line.number !== undefined && (\n                    \n                      {line.number}\n                    \n                  )}\n                  \n                    {PREFIX[line.kind]}\n                  \n                  \n                    {line.content}\n                  \n                \n              ))}\n
\n \n )}\n \n\n {(onAccept || onReject) && !decision && (\n
\n {onReject ? (\n \n Reject\n \n ) : null}\n {onAccept ? (\n \n Accept\n \n ) : null}\n
\n )}\n\n {decision ? (\n \n {decision}\n \n ) : null}\n \n );\n};\n\nexport default AIDiff;\n","path":"index.tsx","target":"components/smoothui/ai-diff/index.tsx","type":"registry:ui"}],"name":"ai-diff","registryDependencies":[],"title":"Ai Diff","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":[],"description":"Deprecated alias for morph-surface. Kept for one release so existing installs keep resolving.","devDependencies":[],"files":[{"content":"\"use client\";\n\n/**\n * @deprecated Renamed to `morph-surface`.\n *\n * This component was never an AI input: its default export has always been\n * `MorphSurface`, a feedback dock that morphs a pill into a panel. The name sent\n * people looking for a chat composer — that is `ai-prompt-input`.\n *\n * This shim keeps `npx shadcn@latest add @smoothui/ai-input` working for one\n * release. Import from `morph-surface` instead:\n *\n * ```tsx\n * import MorphSurface from \"@/components/smoothui/morph-surface\";\n * ```\n */\nexport { default, default as MorphSurface } from \"../morph-surface\";\n","path":"index.tsx","target":"components/smoothui/ai-input/index.tsx","type":"registry:ui"}],"name":"ai-input","registryDependencies":["https://smoothui.dev/r/morph-surface.json"],"title":"Ai Input","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Family of AI waiting indicators — dots, sweep bar and pixel grid — sharing one cycle length, with an optional elapsed counter.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { motion, useAnimationFrame, useReducedMotion } from \"motion/react\";\nimport { useRef, useState } from \"react\";\n\n/**\n * One cycle length for every variant.\n *\n * Two loaders on the same screen running at different tempos read as two\n * unrelated things loading. Sharing the cycle makes them feel like one system\n * working, which is the whole point of a loader family.\n */\nexport const AI_LOADER_CYCLE_SECONDS = 1.2;\n\nconst DOT_COUNT = 3;\nconst GRID_SIZE = 3;\nconst GRID_CELLS = GRID_SIZE * GRID_SIZE;\n/** Diagonal wave order, so the grid fills like a sweep rather than at random. */\nconst GRID_DELAYS = [0, 1, 2, 1, 2, 3, 2, 3, 4];\nconst EASE_IN_OUT = [0.645, 0.045, 0.355, 1] as const;\nconst MS_PER_SECOND = 1000;\nconst ELAPSED_DECIMALS = 1;\n\nexport type AILoaderVariant = \"dots\" | \"bar\" | \"grid\";\n\nexport type AILoaderProps = {\n className?: string;\n /** Optional text before the indicator, e.g. \"Thinking\". */\n label?: string;\n /** Appends a live elapsed counter. Long waits need a sign of progress. */\n showElapsed?: boolean;\n variant?: AILoaderVariant;\n};\n\nconst Dots = ({ reduced }: { reduced: boolean }) => (\n \n {Array.from({ length: DOT_COUNT }, (_, index) => (\n \n ))}\n \n);\n\nconst Bar = ({ reduced }: { reduced: boolean }) => (\n \n {/* A sweep, not a percentage. Faking determinate progress for an unknown\n wait is the one thing a loader must never do. */}\n \n \n);\n\nconst Grid = ({ reduced }: { reduced: boolean }) => (\n \n {Array.from({ length: GRID_CELLS }, (_, index) => (\n \n ))}\n \n);\n\nconst Elapsed = () => {\n const startRef = useRef(null);\n const [seconds, setSeconds] = useState(0);\n\n useAnimationFrame((time) => {\n const start = startRef.current ?? time;\n startRef.current = start;\n const next = (time - start) / MS_PER_SECOND;\n // Only re-render on a tenth changing — a 60fps counter is unreadable and\n // re-renders the whole label for nothing.\n setSeconds((current) =>\n next.toFixed(ELAPSED_DECIMALS) === current.toFixed(ELAPSED_DECIMALS)\n ? current\n : next\n );\n });\n\n return (\n \n {seconds.toFixed(ELAPSED_DECIMALS)}s\n \n );\n};\n\n/**\n * The waiting indicator family.\n *\n * All three variants share one cycle length, so a page can mix them without the\n * result looking out of sync. None of them fake determinate progress.\n */\nconst AILoader = ({\n className,\n label,\n showElapsed = false,\n variant = \"dots\",\n}: AILoaderProps) => {\n const reduced = Boolean(useReducedMotion());\n\n return (\n \n {label ? {label} : null}\n {variant === \"dots\" && }\n {variant === \"bar\" && }\n {variant === \"grid\" && }\n {showElapsed ? : null}\n {label ?? \"Loading\"}\n \n );\n};\n\nexport default AILoader;\n","path":"index.tsx","target":"components/smoothui/ai-loader/index.tsx","type":"registry:ui"}],"name":"ai-loader","registryDependencies":[],"title":"Ai Loader","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"Chat message bubble whose action row slides out of the bubble's own edge, revealed on hover and on focus.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Check, Copy, RotateCcw, ThumbsDown, ThumbsUp } from \"lucide-react\";\nimport { type ReactNode, useEffect, useState } from \"react\";\n\nconst COPIED_RESET_MS = 1600;\nconst ACTION_STAGGER_MS = 30;\n\n/**\n * The reveal is CSS so it needs no state and cannot desync from the pointer.\n * `motion`'s `animate` target was not being re-applied on state change here, and\n * a hover fade does not need a spring — a 200ms ease-out is the whole effect.\n */\nconst ACTION_STYLES = `\n.ai-message-action {\n opacity: 0;\n transform: translateX(var(--ai-message-slide)) scale(0.9);\n transition:\n opacity 200ms cubic-bezier(.23, 1, .32, 1),\n transform 200ms cubic-bezier(.23, 1, .32, 1),\n background-color 150ms ease,\n color 150ms ease;\n}\n.ai-message-action-agent { --ai-message-slide: -6px; }\n.ai-message-action-user { --ai-message-slide: 6px; }\n.ai-message-root:hover .ai-message-action,\n.ai-message-root:focus-within .ai-message-action {\n opacity: 1;\n transform: translateX(0) scale(1);\n}\n.ai-message-pop { animation: ai-message-pop 250ms cubic-bezier(.23, 1, .32, 1); }\n@keyframes ai-message-pop {\n 0% { transform: scale(1); }\n 45% { transform: scale(1.25); }\n 100% { transform: scale(1); }\n}\n@media (prefers-reduced-motion: reduce) {\n .ai-message-action { transition-duration: 0ms; transition-delay: 0ms !important; transform: none; }\n .ai-message-root:hover .ai-message-action,\n .ai-message-root:focus-within .ai-message-action { transform: none; }\n .ai-message-pop { animation: none; }\n}\n`;\n\nexport type AIMessageAuthor = \"user\" | \"assistant\";\n\nexport type AIMessageProps = {\n /** Rendered to the side of the bubble — an avatar or an orb. */\n avatar?: ReactNode;\n /**\n * Draw the tinted bubble. Turn it off for assistant turns that carry their own\n * surfaces — reasoning traces, tool calls, diffs — where a bubble around a\n * stack of cards reads as a box inside a box.\n */\n bubble?: boolean;\n children: ReactNode;\n className?: string;\n /** Plain text handed to the clipboard. Omit to hide the copy action. */\n copyText?: string;\n /**\n * Who wrote it. Named `from` rather than `role` on purpose: `role` is an ARIA\n * attribute, and a component prop of that name misleads both readers and\n * accessibility linters.\n */\n from?: AIMessageAuthor;\n onRetry?: () => void;\n onVote?: (vote: \"up\" | \"down\") => void;\n /** Preformatted timestamp, e.g. \"14:32\". */\n timestamp?: string;\n};\n\n/**\n * A chat message with actions that stay out of the way.\n *\n * The action row slides out of the bubble's own edge rather than fading in from\n * nowhere, so it reads as belonging to that message. It is revealed on hover and\n * on focus-within, because a hover-only control row is unreachable by keyboard.\n */\nconst AIMessage = ({\n avatar,\n bubble = true,\n children,\n className,\n copyText,\n onRetry,\n onVote,\n from = \"assistant\",\n timestamp,\n}: AIMessageProps) => {\n const [hasCopied, setHasCopied] = useState(false);\n const [vote, setVote] = useState<\"up\" | \"down\" | null>(null);\n\n const isUser = from === \"user\";\n\n useEffect(() => {\n if (!hasCopied) {\n return;\n }\n const timeout = setTimeout(() => setHasCopied(false), COPIED_RESET_MS);\n return () => clearTimeout(timeout);\n }, [hasCopied]);\n\n const copy = async () => {\n if (!copyText) {\n return;\n }\n try {\n await navigator.clipboard.writeText(copyText);\n setHasCopied(true);\n } catch {\n // A blocked clipboard is not worth interrupting the conversation over.\n }\n };\n\n const actions = [\n copyText\n ? {\n active: hasCopied,\n icon: hasCopied ? Check : Copy,\n key: \"copy\",\n label: hasCopied ? \"Copied\" : \"Copy\",\n onClick: copy,\n }\n : null,\n onRetry\n ? {\n active: false,\n icon: RotateCcw,\n key: \"retry\",\n label: \"Retry\",\n onClick: onRetry,\n }\n : null,\n // Voting on your own message makes no sense, so the feedback pair is\n // assistant-only even when the consumer passes `onVote` for the thread.\n onVote && !isUser\n ? {\n active: vote === \"up\",\n icon: ThumbsUp,\n key: \"up\",\n label: \"Good response\",\n onClick: () => {\n setVote(\"up\");\n onVote(\"up\");\n },\n }\n : null,\n onVote && !isUser\n ? {\n active: vote === \"down\",\n icon: ThumbsDown,\n key: \"down\",\n label: \"Bad response\",\n onClick: () => {\n setVote(\"down\");\n onVote(\"down\");\n },\n }\n : null,\n ].filter((action): action is NonNullable => action !== null);\n\n return (\n \n {/* biome-ignore lint/security/noDangerouslySetInnerHtml: a static, local stylesheet with no interpolation */}\n \n\n \n {isOpen ? (\n \n {/* The rule doubles as a margin: the trace reads as an aside, not as\n part of the answer. */}\n
\n {children}\n
\n \n ) : null}\n \n \n );\n};\n\nexport default AIReasoning;\n","path":"index.tsx","target":"components/smoothui/ai-reasoning/index.tsx","type":"registry:ui"}],"name":"ai-reasoning","registryDependencies":[],"title":"Ai Reasoning","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Streaming assistant text where words animate in as they arrive, with a caret that rides the last glyph and inline citation pills.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { Fragment, useEffect, useRef } from \"react\";\n\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\n/**\n * Hoisted and frozen. Motion restarts an animation whenever the transition it is\n * given changes, and this component re-renders on every token — so the object\n * has to be the same reference every time.\n */\nconst WORD_TRANSITION = { duration: 0.22, ease: EASE_OUT } as const;\nconst WORD_BLUR_PX = 4;\n/** `[1]` style markers become citation pills. */\nconst CITATION_MARKER = /^\\[(\\d+)\\]$/;\n/**\n * Split on whitespace *and* on markers, so a marker is its own token even when\n * punctuation is glued to it — `compute [1],` has to yield `[1]` and `,`\n * separately or the pill never matches.\n */\nconst TOKEN_SPLIT = /(\\s+|\\[\\d+\\])/;\n/** Anything without a letter or digit is punctuation and is not animated. */\nconst HAS_WORD_CHARACTER = /[\\p{L}\\p{N}]/u;\nconst WHITESPACE_ONLY = /^\\s+$/;\n\nexport type AIResponseCitation = {\n id: string;\n /** The number shown in the pill, matching the `[n]` marker in the text. */\n index: number;\n title: string;\n /**\n * Where the source lives, when it lives anywhere.\n *\n * Optional on purpose: most retrieval is over internal documents that have no\n * public URL, and a required field there just pushes people into inventing\n * `example.com` links that go nowhere. Without a url the pill renders as plain\n * text instead of a dead link.\n */\n url?: string;\n};\n\nexport type AIResponseProps = {\n /** Sources referenced by `[n]` markers in the text. */\n citations?: AIResponseCitation[];\n className?: string;\n /** Shows a caret after the last word. */\n isStreaming?: boolean;\n /** The response so far. Re-render it as it grows. */\n text: string;\n};\n\ntype Token = {\n citation?: AIResponseCitation;\n value: string;\n};\n\nconst tokenize = (text: string, citations: AIResponseCitation[]): Token[] =>\n text\n .split(TOKEN_SPLIT)\n .filter((value) => value !== \"\")\n .map((value) => {\n const match = value.match(CITATION_MARKER);\n if (!match) {\n return { value };\n }\n const index = Number(match[1]);\n const citation = citations.find((entry) => entry.index === index);\n return citation ? { citation, value } : { value };\n });\n\n/**\n * Streaming assistant text.\n *\n * Words animate in as they *arrive*, not on a fixed timer — the component\n * remembers how many tokens it had last render and only animates the new ones.\n * A timer-driven typewriter drifts out of step with the real stream and starts\n * lying about how fast the model is answering.\n */\nconst AIResponse = ({\n citations = [],\n className,\n isStreaming = false,\n text,\n}: AIResponseProps) => {\n const shouldReduceMotion = useReducedMotion();\n const tokens = tokenize(text, citations);\n\n // How many tokens had already been painted before this render. Everything at\n // or after this index is new and gets the entrance.\n const paintedRef = useRef(0);\n const firstNewIndex = paintedRef.current;\n\n useEffect(() => {\n paintedRef.current = tokens.length;\n }, [tokens.length]);\n\n return (\n \n {tokens.map((token, index) => {\n const isNew = index >= firstNewIndex;\n // Keyed by position only. Keying by text too would remount the last word\n // every time a token extends it, so it would re-animate on every frame of\n // the stream.\n const key = index;\n\n // Whitespace and bare punctuation stay as text. Wrapping a comma in its\n // own inline-block would let the line break between a word and its\n // punctuation.\n if (\n WHITESPACE_ONLY.test(token.value) ||\n !(token.citation || HAS_WORD_CHARACTER.test(token.value))\n ) {\n return {token.value};\n }\n\n if (token.citation) {\n return (\n \n );\n }\n\n return (\n \n {token.value}\n \n );\n })}\n {isStreaming ? (\n \n ) : null}\n

\n );\n};\n\nconst AIResponseCaret = ({\n shouldReduceMotion,\n}: {\n shouldReduceMotion: boolean | null;\n}) => (\n // Inline rather than absolutely positioned, so it rides the last glyph for\n // free and never has to be told where the text ended.\n \n);\n\nconst AIResponseCitationPill = ({\n citation,\n isNew,\n shouldReduceMotion,\n}: {\n citation: AIResponseCitation;\n isNew: boolean;\n shouldReduceMotion: boolean;\n}) => {\n const shared = {\n animate: { opacity: 1, scale: 1 },\n // No left margin: the marker is already preceded by a space in the text, so\n // adding one here doubles the gap.\n className:\n \"mr-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full border border-border bg-muted px-1 align-super font-medium text-[10px] text-muted-foreground no-underline\",\n initial:\n isNew && !shouldReduceMotion\n ? { opacity: 0, scale: 0.6 }\n : (false as const),\n title: citation.title,\n transition: shouldReduceMotion\n ? { duration: 0 }\n : { bounce: 0.1, duration: 0.25, type: \"spring\" as const },\n };\n\n // An internal document has nowhere to go, so it is not dressed up as a link —\n // no hover affordance, no pointer, nothing to click and be disappointed by.\n if (!citation.url) {\n return {citation.index};\n }\n\n return (\n \n {citation.index}\n \n );\n};\n\nexport default AIResponse;\n","path":"index.tsx","target":"components/smoothui/ai-response/index.tsx","type":"registry:ui"}],"name":"ai-response","registryDependencies":[],"title":"Ai Response","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"Favicon stack that fans out on hover and expands into a source list, with each favicon morphing into its row.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { ChevronRight, Globe } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { type ReactNode, useId, useState } from \"react\";\n\nconst SPRING_DEFAULT = {\n bounce: 0.1,\n duration: 0.25,\n type: \"spring\" as const,\n};\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\n/** Favicons shown in the collapsed stack before the \"+n\" chip. */\nconst STACK_LIMIT = 3;\n/** Overlap of the collapsed stack, and how far it fans on hover. */\nconst STACK_OVERLAP_PX = 8;\nconst FAN_GAP_PX = 3;\nconst ROW_STAGGER = 0.035;\n\nexport type AISource = {\n /**\n * The source's mark — a real isotype or an ``, never a letter.\n *\n * A node rather than a URL so a brand's own SVG can be passed straight in.\n * When omitted the component draws a neutral globe: an honest \"unknown host\"\n * icon beats a fabricated one-letter badge pretending to be a logo.\n */\n favicon?: ReactNode;\n id: string;\n /** Short excerpt or description. */\n snippet?: string;\n title: string;\n url: string;\n};\n\nexport type AISourcesProps = {\n className?: string;\n /** Start expanded. */\n defaultOpen?: boolean;\n /** Label before the stack, e.g. \"Sources\". */\n label?: string;\n sources: AISource[];\n};\n\nconst hostOf = (url: string): string => {\n try {\n return new URL(url).hostname.replace(/^www\\./, \"\");\n } catch {\n return url;\n }\n};\n\nconst Favicon = ({ size, source }: { size: number; source: AISource }) => (\n \n {source.favicon ? (\n // Sized here so any mark fits: an `` from a logo service, or a repo\n // isotype SVG, which ships as `fill=\"none\"` and expects the host to pick\n // the colour — the same contract the logo-cloud blocks rely on.\n \n {source.favicon}\n \n ) : (\n \n )}\n \n);\n\n/**\n * The sources behind an answer.\n *\n * Collapsed to a stack of overlapping favicons, because provenance should be\n * available rather than loud. Hovering fans the stack apart as a hint that it is\n * a set and not a single badge; opening it moves each favicon into its own row —\n * a shared layout id, so the icon the eye was tracking is the icon that lands.\n */\nconst AISources = ({\n className,\n defaultOpen = false,\n label = \"Sources\",\n sources,\n}: AISourcesProps) => {\n const shouldReduceMotion = useReducedMotion();\n const [isOpen, setIsOpen] = useState(defaultOpen);\n const [isHovered, setIsHovered] = useState(false);\n const layoutPrefix = useId();\n\n const stacked = sources.slice(0, STACK_LIMIT);\n const overflow = sources.length - stacked.length;\n const fanned = isHovered && !isOpen && !shouldReduceMotion;\n\n return (\n
\n setIsHovered(false)}\n onClick={() => setIsOpen((current) => !current)}\n onFocus={() => setIsHovered(true)}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n type=\"button\"\n >\n \n {stacked.map((source, index) => (\n \n \n \n ))}\n {overflow > 0 && (\n +{overflow}\n )}\n \n\n {label}\n\n \n \n \n \n\n \n {isOpen ? (\n \n {sources.map((source, index) => (\n \n \n \n \n \n\n \n \n {source.title}\n \n \n {source.snippet ?? hostOf(source.url)}\n \n \n \n \n ))}\n \n ) : null}\n \n
\n );\n};\n\nexport default AISources;\n","path":"index.tsx","target":"components/smoothui/ai-sources/index.tsx","type":"registry:ui"}],"name":"ai-sources","registryDependencies":[],"title":"Ai Sources","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"Prompt suggestion chips that radiate in from the centre of the row rather than sweeping left to right.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useMemo } from \"react\";\n\nconst SPRING_DEFAULT = {\n bounce: 0.1,\n duration: 0.25,\n type: \"spring\" as const,\n};\nconst STAGGER_SECONDS = 0.045;\n\nexport type AISuggestion = {\n id: string;\n label: string;\n};\n\nexport type AISuggestionsProps = {\n className?: string;\n /** Optional heading, e.g. \"Follow-ups\". */\n label?: string;\n onSelect?: (suggestion: AISuggestion) => void;\n suggestions: AISuggestion[];\n};\n\n/**\n * Distance from the middle of the row, so the stagger radiates outwards from the\n * centre instead of sweeping left to right.\n *\n * A left-to-right sweep implies reading order and priority — that the first chip\n * matters most. These are alternatives of equal weight, and radiating from the\n * centre says so.\n */\nconst centreOutOrder = (count: number): number[] => {\n const middle = (count - 1) / 2;\n return Array.from({ length: count }, (_, index) => Math.abs(index - middle));\n};\n\n/**\n * Prompt suggestion chips.\n *\n * Chips are the empty state of a chat and the follow-up row after an answer, so\n * they need to arrive without feeling like a notification.\n */\nconst AISuggestions = ({\n className,\n label,\n onSelect,\n suggestions,\n}: AISuggestionsProps) => {\n const shouldReduceMotion = useReducedMotion();\n const delays = useMemo(\n () => centreOutOrder(suggestions.length),\n [suggestions.length]\n );\n\n return (\n
\n {label ? (\n

\n {label}\n

\n ) : null}\n\n
    \n \n {suggestions.map((suggestion, index) => (\n \n onSelect?.(suggestion)}\n transition={\n shouldReduceMotion ? { duration: 0 } : SPRING_DEFAULT\n }\n type=\"button\"\n whileTap={shouldReduceMotion ? undefined : { scale: 0.97 }}\n >\n {suggestion.label}\n \n \n ))}\n \n
\n
\n );\n};\n\nexport default AISuggestions;\n","path":"index.tsx","target":"components/smoothui/ai-suggestions/index.tsx","type":"registry:ui"}],"name":"ai-suggestions","registryDependencies":[],"title":"Ai Suggestions","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"Live agent plan with nested steps, a drawn checkmark on completion and a travelling underline on whatever is running.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { Fragment } from \"react\";\n\nconst SPRING_DEFAULT = {\n bounce: 0.1,\n duration: 0.25,\n type: \"spring\" as const,\n};\nconst EASE_IN_OUT = [0.645, 0.045, 0.355, 1] as const;\nconst CHECK_PATH = \"M 3.5 7.5 L 6 10 L 10.5 4.5\";\nconst BOX_SIZE = 14;\nconst UNDERLINE_SECONDS = 1.4;\n\nexport type AITaskStatus = \"pending\" | \"running\" | \"done\" | \"failed\";\n\nexport type AITask = {\n /** Nested sub-steps, one level. */\n children?: AITask[];\n id: string;\n label: string;\n /** Short right-aligned note, e.g. \"12/12\" or \"3 files\". */\n note?: string;\n status: AITaskStatus;\n};\n\nexport type AITaskListProps = {\n className?: string;\n /** Heading text. The counts are derived, never passed in. */\n label?: string;\n tasks: AITask[];\n};\n\nconst flatten = (tasks: AITask[]): AITask[] =>\n tasks.flatMap((task) => [task, ...flatten(task.children ?? [])]);\n\nconst SUCCESS_COLOR = \"oklch(72% 0.17 150)\";\nconst DANGER_COLOR = \"oklch(63% 0.21 25)\";\n\nconst boxStroke = (status: AITaskStatus): string => {\n if (status === \"failed\") {\n return DANGER_COLOR;\n }\n if (status === \"done\") {\n return SUCCESS_COLOR;\n }\n return \"currentColor\";\n};\n\nconst TaskBox = ({\n status,\n shouldReduceMotion,\n}: {\n shouldReduceMotion: boolean;\n status: AITaskStatus;\n}) => {\n const isDone = status === \"done\";\n const isFailed = status === \"failed\";\n\n return (\n \n \n \n {isDone && (\n // Drawn, not faded: a check that draws itself reads as the act of\n // ticking the box rather than a state that was always there.\n // Drawn with a CSS keyframe rather than a motion value.\n //\n // Neither motion's `pathLength` shorthand nor an explicit\n // `strokeDashoffset` animation resolved on these paths — the dash\n // stayed pinned at its initial value and the check rendered as a stub.\n // A keyframe on mount is deterministic, and `prefers-reduced-motion`\n // handles the accessible case in CSS with no JS branch at all.\n \n )}\n {isFailed && (\n \n )}\n \n \n );\n};\n\nconst TaskRow = ({\n depth,\n shouldReduceMotion,\n task,\n}: {\n depth: number;\n shouldReduceMotion: boolean;\n task: AITask;\n}) => {\n const isRunning = task.status === \"running\";\n const isDone = task.status === \"done\";\n\n return (\n \n \n \n\n \n {task.label}\n \n\n {task.note ? (\n \n {task.note}\n \n ) : null}\n\n {isRunning && !shouldReduceMotion && (\n // A travelling underline under the active row only. One moving thing\n // at a time is what makes \"which step is live\" readable at a glance.\n \n )}\n \n \n );\n};\n\n/**\n * A plan an agent works through.\n *\n * Header counts are derived from the tasks, so the summary can never disagree\n * with the rows — a \"3/7\" that has drifted from what is on screen destroys trust\n * in the whole panel.\n */\nconst AITaskList = ({ className, label = \"Plan\", tasks }: AITaskListProps) => {\n const shouldReduceMotion = Boolean(useReducedMotion());\n const all = flatten(tasks);\n const done = all.filter((task) => task.status === \"done\").length;\n\n return (\n \n
\n

{label}

\n

\n {done}/{all.length}\n

\n
\n\n \n\n
    \n {tasks.map((task) => (\n \n \n {task.children?.map((child) => (\n \n ))}\n \n ))}\n
\n \n );\n};\n\nexport default AITaskList;\n","path":"index.tsx","target":"components/smoothui/ai-task-list/index.tsx","type":"registry:ui"}],"name":"ai-task-list","registryDependencies":[],"title":"Ai Task List","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"Collapsible tool invocation whose status badge is one ring that evolves — breathing, spinning, then drawing a check or a cross.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { ChevronRight } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { type ReactNode, useState } from \"react\";\n\nconst SPRING_DEFAULT = {\n bounce: 0.1,\n duration: 0.25,\n type: \"spring\" as const,\n};\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\nconst BADGE_VIEWBOX = 24;\nconst BADGE_CENTER = BADGE_VIEWBOX / 2;\nconst RING_RADIUS = 8;\nconst CHECK_PATH = \"M 8.5 12.2 L 11 14.8 L 15.8 9.6\";\nconst CROSS_PATHS = [\"M 9 9 L 15 15\", \"M 15 9 L 9 15\"] as const;\nconst SPIN_SECONDS = 0.9;\nconst PENDING_PULSE_SECONDS = 1.6;\n\nexport type AIToolCallStatus = \"pending\" | \"running\" | \"success\" | \"error\";\n\nexport type AIToolCallProps = {\n /** Arguments the tool was called with. Rendered as-is. */\n args?: ReactNode;\n className?: string;\n defaultOpen?: boolean;\n /** Tool name, e.g. `search_web`. */\n name: string;\n /** What the tool returned. */\n result?: ReactNode;\n status?: AIToolCallStatus;\n /** Short right-aligned note, e.g. \"3 files\" or \"1.2s\". */\n summary?: string;\n};\n\nconst STATUS_LABEL: Record = {\n error: \"Failed\",\n pending: \"Queued\",\n running: \"Running\",\n success: \"Done\",\n};\n\n/**\n * The status badge is **one ring that changes behaviour**, not four icons that\n * swap places.\n *\n * `pending` breathes, `running` spins as a gap in the same ring, `success` keeps\n * the ring and draws a check inside it, `error` keeps the ring and draws a\n * cross. Because the ring never unmounts, the eye tracks a single object through\n * the whole lifecycle instead of watching icons pop in and out.\n */\nconst AIToolCallBadge = ({\n status,\n shouldReduceMotion,\n}: {\n shouldReduceMotion: boolean;\n status: AIToolCallStatus;\n}) => {\n const isRunning = status === \"running\";\n const isPending = status === \"pending\";\n\n const ringColor = (() => {\n if (status === \"success\") {\n return \"oklch(72% 0.17 150)\";\n }\n if (status === \"error\") {\n return \"oklch(63% 0.21 25)\";\n }\n return \"currentColor\";\n })();\n\n return (\n \n \n \n \n \n\n \n {status === \"success\" && (\n \n )}\n {status === \"error\" &&\n CROSS_PATHS.map((path, index) => (\n \n ))}\n \n \n \n );\n};\n\n/**\n * A single tool invocation, collapsed by default.\n *\n * Arguments and results are the kind of thing people want available but not\n * in their face, so the row stays one line until asked.\n */\nconst AIToolCall = ({\n args,\n className,\n defaultOpen = false,\n name,\n result,\n status = \"pending\",\n summary,\n}: AIToolCallProps) => {\n const shouldReduceMotion = useReducedMotion();\n const [isOpen, setIsOpen] = useState(defaultOpen);\n const hasDetail = Boolean(args || result);\n\n return (\n \n setIsOpen((current) => !current)}\n type=\"button\"\n >\n \n\n \n \n {name}\n \n \n\n {summary ? (\n \n {summary}\n \n ) : null}\n {STATUS_LABEL[status]}\n\n {hasDetail && (\n \n \n \n )}\n \n\n \n {isOpen && hasDetail ? (\n \n
\n {args ? (\n
\n

\n Arguments\n

\n
\n {args}\n
\n
\n ) : null}\n {result ? (\n
\n

\n Result\n

\n
\n {result}\n
\n
\n ) : null}\n
\n \n ) : null}\n \n \n );\n};\n\nexport default AIToolCall;\n","path":"index.tsx","target":"components/smoothui/ai-tool-call/index.tsx","type":"registry:ui"}],"name":"ai-tool-call","registryDependencies":[],"title":"Ai Tool Call","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Stack of overlapping avatars with smooth expand/collapse animation","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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 : { bounce: 0.1, duration: 0.25, type: \"spring\" as const };\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","path":"index.tsx","target":"components/smoothui/animated-avatar-group/index.tsx","type":"registry:ui"}],"name":"animated-avatar-group","registryDependencies":[],"title":"Animated Avatar Group","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Animated drag-and-drop file upload component","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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 bounce: 0.1,\n duration: 0.25,\n type: \"spring\" as const,\n};\n\nconst SPRING_BOUNCY = {\n bounce: 0.2,\n duration: 0.3,\n type: \"spring\" as const,\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 }\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)}` : null}\n

\n \n\n \n {error ? (\n \n {error}\n \n ) : null}\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","path":"index.tsx","target":"components/smoothui/animated-file-upload/index.tsx","type":"registry:ui"}],"name":"animated-file-upload","registryDependencies":[],"title":"Animated File Upload","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A AnimatedInput component for SmoothUI.","devDependencies":[],"files":[{"content":"import { motion, useReducedMotion } from \"motion/react\";\nimport { useId, 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;\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 reactId = useId();\n const inputId = `animated-input-${reactId.replace(/:/g, \"\")}`;\n\n const getLabelAnimation = () => {\n if (shouldReduceMotion) {\n return {};\n }\n if (isFloating) {\n return {\n borderColor: \"var(--color-brand)\",\n color: \"var(--color-brand)\",\n scale: 0.85,\n y: -24,\n };\n }\n return { color: \"#6b7280\", scale: 1, y: 0 };\n };\n\n const getLabelStyle = () => {\n if (!shouldReduceMotion) {\n return {};\n }\n if (isFloating) {\n return {\n borderColor: \"var(--color-brand)\",\n color: \"var(--color-brand)\",\n transform: \"translateY(-24px) scale(0.85)\",\n };\n }\n return {\n color: \"#6b7280\",\n transform: \"translateY(0) scale(1)\",\n };\n };\n\n return (\n
\n {icon ? (\n \n {icon}\n \n ) : null}\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","path":"index.tsx","target":"components/smoothui/animated-input/index.tsx","type":"registry:ui"}],"name":"animated-input","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Animated Input","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","lucide-react","input-otp"],"description":"A AnimatedOTPInput component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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 ) : null}\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","path":"index.tsx","target":"components/smoothui/animated-o-t-p-input/index.tsx","type":"registry:ui"}],"name":"animated-o-t-p-input","registryDependencies":[],"title":"Animated O T P Input","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A AnimatedProgressBar component for SmoothUI.","devDependencies":[],"files":[{"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 damping: 10,\n duration: 0.25,\n mass: 0.75,\n stiffness: 100,\n type: \"spring\" as const,\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 ) : null}\n
\n \n
\n
\n );\n}\n","path":"index.tsx","target":"components/smoothui/animated-progress-bar/index.tsx","type":"registry:ui"}],"name":"animated-progress-bar","registryDependencies":[],"title":"Animated Progress Bar","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Animated stepper/wizard component with step transitions","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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 bounce: 0.1,\n duration: 0.25,\n type: \"spring\" as const,\n};\n\nconst SPRING_BOUNCY = {\n bounce: 0.2,\n duration: 0.3,\n type: \"spring\" as const,\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 ) : null}\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","path":"index.tsx","target":"components/smoothui/animated-stepper/index.tsx","type":"registry:ui"}],"name":"animated-stepper","registryDependencies":[],"title":"Animated Stepper","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Animated tabs component with sliding indicator","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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 bounce: 0.05,\n duration: 0.25,\n type: \"spring\" as const,\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 cursor-pointer 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 ? (\n {tab.icon}\n ) : null}\n {tab.label}\n \n );\n })}\n \n );\n}\n","path":"index.tsx","target":"components/smoothui/animated-tabs/index.tsx","type":"registry:ui"}],"name":"animated-tabs","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Animated Tabs","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","lucide-react"],"description":"A AnimatedTags component for SmoothUI.","devDependencies":[],"files":[{"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 : { bounce: 0, duration: 0.25, 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 : { bounce: 0, duration: 0.25, type: \"spring\" as const }\n }\n >\n {tag}{\" \"}\n \n \n ))}\n
\n \n
\n );\n}\n","path":"index.tsx","target":"components/smoothui/animated-tags/index.tsx","type":"registry:ui"}],"name":"animated-tags","registryDependencies":[],"title":"Animated Tags","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Animated toggle switch with morph and icon variants","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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 bounce: 0.1,\n duration: 0.25,\n type: \"spring\" as const,\n};\n\nconst SIZES = {\n lg: {\n icon: \"size-3.5\",\n thumb: \"size-6\",\n thumbTranslate: 24,\n track: \"w-[52px] h-7\",\n },\n md: {\n icon: \"size-3\",\n thumb: \"size-5\",\n thumbTranslate: 20,\n track: \"w-11 h-6\",\n },\n sm: {\n icon: \"size-2.5\",\n thumb: \"size-4\",\n thumbTranslate: 16,\n track: \"w-9 h-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","path":"index.tsx","target":"components/smoothui/animated-toggle/index.tsx","type":"registry:ui"}],"name":"animated-toggle","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Animated Toggle","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Spring-animated tooltip with multiple placement options","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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 bounce: 0.1,\n duration: 0.25,\n type: \"spring\" as const,\n};\n\nconst placementStyles: Record = {\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 top: \"bottom-full left-1/2 -translate-x-1/2 mb-2\",\n};\n\nconst arrowStyles: Record = {\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 top: \"top-full left-1/2 -translate-x-1/2 border-t-foreground border-x-transparent border-b-transparent\",\n};\n\nconst arrowBorderSize: Record = {\n bottom: \"border-4\",\n left: \"border-4\",\n right: \"border-4\",\n top: \"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 ) : null}\n \n \n );\n};\n\nexport default AnimatedTooltip;\n","path":"index.tsx","target":"components/smoothui/animated-tooltip/index.tsx","type":"registry:ui"}],"name":"animated-tooltip","registryDependencies":[],"title":"Animated Tooltip","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Persistent WebGL shader transition wrapper that swaps content behind a cinematic aperture bloom.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { useReducedMotion } from \"motion/react\";\nimport { type ReactNode, useEffect, useRef, useState } from \"react\";\n\nexport interface ApertureBlurTransitionProps {\n children: ReactNode;\n className?: string;\n duration?: number;\n onRest?: () => void;\n transitionKey: string | number;\n}\n\nconst DEFAULT_DURATION_MS = 760;\nconst MIDPOINT = 0.48;\nconst MAX_DPR = 2;\nconst VERTEX_SHADER =\n \"attribute vec2 a; void main(){ gl_Position = vec4(a, 0.0, 1.0); }\";\nconst FRAGMENT_SHADER = `\nprecision mediump float;\nuniform vec2 uRes;\nuniform float uTime;\nuniform float uProgress;\nuniform float uAlpha;\n#define PI 3.14159265359\n\nfloat hash(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }\n\nvoid main(){\n vec2 uv = gl_FragCoord.xy / uRes;\n vec2 aspect = vec2(uRes.x / uRes.y, 1.0);\n vec2 p = (uv - 0.5) * aspect;\n float r = length(p);\n float a = atan(p.y, p.x);\n\n float progress = smoothstep(0.0, 1.0, uProgress);\n float radius = mix(0.05, 0.82, progress);\n float apertureNoise = sin(a * 8.0 + uTime * 0.9) * 0.018 + sin(a * 17.0 - uTime * 0.6) * 0.006;\n float d = r - radius - apertureNoise;\n\n float exitFade = smoothstep(0.94, 0.58, progress);\n float ring = exp(-d * d * 210.0) * exitFade;\n float innerGlow = smoothstep(radius + 0.18, radius - 0.02, r) * smoothstep(0.0, 0.34, progress) * exitFade;\n float outerFeather = smoothstep(radius + 0.22, radius - 0.04, r) * exitFade * 0.55;\n float grain = hash(floor(uv * uRes / 3.0) + floor(uTime * 18.0)) * 0.045;\n\n vec3 champagne = vec3(1.0, 0.82, 0.56);\n vec3 rose = vec3(1.0, 0.34, 0.62);\n vec3 cyan = vec3(0.62, 0.92, 1.0);\n vec3 color = mix(champagne, rose, smoothstep(-0.4, 0.4, sin(a * 2.0 + uTime * 0.7)));\n color = mix(color, cyan, ring * 0.38 + smoothstep(0.74, 1.0, progress) * 0.18);\n\n float highlight = ring * (0.82 + grain) + innerGlow * 0.18 + outerFeather * 0.08;\n float alpha = clamp(highlight * uAlpha, 0.0, 0.88);\n gl_FragColor = vec4(color * alpha + vec3(1.0) * ring * 0.22 * uAlpha, alpha);\n}\n`;\nconst STRIP = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);\n\ninterface Playback {\n cancel: () => void;\n}\n\ninterface Controller {\n destroy: () => void;\n getProgress: () => number;\n setAlpha: (alpha: number) => void;\n setProgress: (progress: number) => void;\n}\n\nconst clamp01 = (value: number) => Math.max(0, Math.min(1, value));\nconst easeOutCubic = (value: number) => 1 - (1 - value) ** 3;\nconst easeInOutCubic = (value: number) =>\n value < 0.5 ? 4 * value ** 3 : 1 - (-2 * value + 2) ** 3 / 2;\n\nconst compile = (gl: WebGLRenderingContext, type: number, source: string) => {\n const shader = gl.createShader(type);\n if (!shader) {\n return null;\n }\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n gl.deleteShader(shader);\n return null;\n }\n return shader;\n};\n\nconst resize = (canvas: HTMLCanvasElement, gl: WebGLRenderingContext) => {\n const rect = canvas.getBoundingClientRect();\n const dpr = Math.min(window.devicePixelRatio || 1, MAX_DPR);\n const width = Math.max(1, Math.round(rect.width * dpr));\n const height = Math.max(1, Math.round(rect.height * dpr));\n if (canvas.width !== width || canvas.height !== height) {\n canvas.width = width;\n canvas.height = height;\n }\n gl.viewport(0, 0, width, height);\n};\n\nconst createController = (canvas: HTMLCanvasElement): Controller | null => {\n const gl = canvas.getContext(\"webgl\", {\n alpha: true,\n antialias: false,\n premultipliedAlpha: true,\n });\n if (!gl) {\n return null;\n }\n const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX_SHADER);\n const fragment = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);\n const program = gl.createProgram();\n if (!(vertex && fragment && program)) {\n return null;\n }\n gl.attachShader(program, vertex);\n gl.attachShader(program, fragment);\n gl.linkProgram(program);\n gl.deleteShader(vertex);\n gl.deleteShader(fragment);\n if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n gl.deleteProgram(program);\n return null;\n }\n\n // biome-ignore lint/correctness/useHookAtTopLevel: WebGLRenderingContext.useProgram is not a React hook.\n gl.useProgram(program);\n const buffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n gl.bufferData(gl.ARRAY_BUFFER, STRIP, gl.STATIC_DRAW);\n const position = gl.getAttribLocation(program, \"a\");\n gl.enableVertexAttribArray(position);\n gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);\n gl.enable(gl.BLEND);\n gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);\n\n const uRes = gl.getUniformLocation(program, \"uRes\");\n const uTime = gl.getUniformLocation(program, \"uTime\");\n const uProgress = gl.getUniformLocation(program, \"uProgress\");\n const uAlpha = gl.getUniformLocation(program, \"uAlpha\");\n const startedAt = performance.now();\n let progress = 0;\n let alpha = 0;\n let frame = 0;\n let destroyed = false;\n\n const tick = () => {\n if (destroyed) {\n return;\n }\n resize(canvas, gl);\n gl.clearColor(0, 0, 0, 0);\n gl.clear(gl.COLOR_BUFFER_BIT);\n gl.uniform2f(uRes, canvas.width, canvas.height);\n gl.uniform1f(uTime, (performance.now() - startedAt) / 1000);\n gl.uniform1f(uProgress, progress);\n gl.uniform1f(uAlpha, alpha);\n gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n frame = requestAnimationFrame(tick);\n };\n frame = requestAnimationFrame(tick);\n\n return {\n destroy: () => {\n destroyed = true;\n cancelAnimationFrame(frame);\n gl.clear(gl.COLOR_BUFFER_BIT);\n if (buffer) {\n gl.deleteBuffer(buffer);\n }\n gl.deleteProgram(program);\n },\n getProgress: () => progress,\n setAlpha: (nextAlpha: number) => {\n alpha = clamp01(nextAlpha);\n },\n setProgress: (nextProgress: number) => {\n progress = clamp01(nextProgress);\n },\n };\n};\n\nconst play = (\n controller: Controller,\n duration: number,\n onMidpoint: () => void,\n onComplete: () => void\n): Playback => {\n let frame = 0;\n let cancelled = false;\n let didSwap = false;\n const startedAt = performance.now();\n controller.setAlpha(1);\n\n const advance = () => {\n if (cancelled) {\n return;\n }\n const raw = clamp01((performance.now() - startedAt) / duration);\n const progress = easeOutCubic(raw);\n controller.setProgress(progress);\n if (!(didSwap || progress < MIDPOINT)) {\n didSwap = true;\n onMidpoint();\n }\n if (raw < 1) {\n frame = requestAnimationFrame(advance);\n return;\n }\n if (!didSwap) {\n onMidpoint();\n }\n const fadeStartedAt = performance.now();\n const fade = () => {\n if (cancelled) {\n return;\n }\n const fadeRaw = clamp01((performance.now() - fadeStartedAt) / 70);\n controller.setAlpha(1 - easeInOutCubic(fadeRaw));\n if (fadeRaw < 1) {\n frame = requestAnimationFrame(fade);\n return;\n }\n controller.setAlpha(0);\n controller.setProgress(0);\n onComplete();\n };\n frame = requestAnimationFrame(fade);\n };\n frame = requestAnimationFrame(advance);\n\n return {\n cancel: () => {\n cancelled = true;\n cancelAnimationFrame(frame);\n },\n };\n};\n\nconst ApertureBlurTransition = ({\n children,\n className,\n duration = DEFAULT_DURATION_MS,\n onRest,\n transitionKey,\n}: ApertureBlurTransitionProps) => {\n const shouldReduceMotion = useReducedMotion();\n const canvasRef = useRef(null);\n const controllerRef = useRef(null);\n const playbackRef = useRef(null);\n const previousKey = useRef(transitionKey);\n const [renderedChildren, setRenderedChildren] = useState(children);\n const [isActive, setIsActive] = useState(false);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) {\n return;\n }\n const controller = createController(canvas);\n controllerRef.current = controller;\n return () => {\n playbackRef.current?.cancel();\n controller?.destroy();\n controllerRef.current = null;\n };\n }, []);\n\n useEffect(() => {\n if (previousKey.current === transitionKey) {\n setRenderedChildren(children);\n return;\n }\n previousKey.current = transitionKey;\n playbackRef.current?.cancel();\n\n if (shouldReduceMotion) {\n setRenderedChildren(children);\n setIsActive(false);\n onRest?.();\n return;\n }\n\n const controller = controllerRef.current;\n if (!controller) {\n setRenderedChildren(children);\n onRest?.();\n return;\n }\n setIsActive(true);\n playbackRef.current = play(\n controller,\n duration,\n () => setRenderedChildren(children),\n () => {\n setIsActive(false);\n playbackRef.current = null;\n onRest?.();\n }\n );\n }, [children, duration, onRest, shouldReduceMotion, transitionKey]);\n\n return (\n \n
{renderedChildren}
\n \n \n );\n};\n\nexport default ApertureBlurTransition;\n","path":"index.tsx","target":"components/smoothui/aperture-blur-transition/index.tsx","type":"registry:ui"}],"name":"aperture-blur-transition","registryDependencies":[],"title":"Aperture Blur Transition","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","lucide-react"],"description":"A AppDownloadStack component for SmoothUI.","devDependencies":[],"files":[{"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 icon: \"https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/9c9721583ecba33e59ebcebdca2248fd_Mmr12FRh5V.png\",\n id: 1,\n name: \"GitHub\",\n },\n {\n icon: \"https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/b47f43e02f04563447fa90d4ff6c8943_9KzW5GTggQ.png\",\n id: 2,\n name: \"Canary\",\n },\n {\n icon: \"https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/f0b9cdefa67b57eeb080278c2f6984cc_sCqUJBg6Qq.png\",\n id: 3,\n name: \"Figma\",\n },\n {\n icon: \"https://parsefiles.back4app.com/JPaQcFfEEQ1ePBxbf6wvzkPMEqKYHhPYv8boI1Rc/178c7b02003c933e6b5afe98bbee595b_low_res_Arc_Browser.png\",\n id: 4,\n name: \"Arc\",\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 transition: {\n duration: 1,\n ease: \"linear\",\n repeat: Number.POSITIVE_INFINITY,\n },\n x: [\"0%\", \"100%\"],\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 float: (i: number) =>\n shouldReduceMotion\n ? { y: 0 }\n : {\n transition: {\n y: {\n delay: i * FLOAT_DELAY_MULTIPLIER,\n duration: FLOAT_DURATION,\n ease: [0.645, 0.045, 0.355, 1],\n repeat: Number.POSITIVE_INFINITY,\n },\n },\n y: [0, -FLOAT_AMPLITUDE, 0],\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 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 }),\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 ) : null}\n \n \n \n );\n}\n","path":"index.tsx","target":"components/smoothui/app-download-stack/index.tsx","type":"registry:ui"}],"name":"app-download-stack","registryDependencies":[],"title":"App Download Stack","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","lucide-react","popmotion"],"description":"A AppleInvites component for SmoothUI.","devDependencies":[],"files":[{"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 \"2xl\": 1536,\n lg: 1024,\n md: 768,\n sm: 640,\n xl: 1280,\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 opacity: 1,\n rotate: 0,\n scale: 1,\n transition: shouldReduceMotion\n ? { duration: 0 }\n : {\n damping: 30,\n duration: 0.25,\n stiffness: 300,\n type: \"spring\" as const,\n },\n x: \"-50%\",\n zIndex: 3,\n },\n hidden: {\n opacity: 0,\n transition: shouldReduceMotion ? { duration: 0 } : { duration: 0.3 },\n zIndex: 1,\n },\n left: {\n opacity: 0.8,\n rotate: -12,\n scale: 0.9,\n transition: shouldReduceMotion\n ? { duration: 0 }\n : {\n damping: 30,\n duration: 0.25,\n stiffness: 300,\n type: \"spring\" as const,\n },\n x: \"-130%\",\n zIndex: 2,\n },\n right: {\n opacity: 0.8,\n rotate: 12,\n scale: 0.9,\n transition: shouldReduceMotion\n ? { duration: 0 }\n : {\n damping: 30,\n duration: 0.25,\n stiffness: 300,\n type: \"spring\" as const,\n },\n x: \"30%\",\n zIndex: 2,\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 ) : null}\n {event.subtitle ? (\n \n {event.subtitle}\n

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

\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n ))}\n \n
\n );\n}\n","path":"index.tsx","target":"components/smoothui/apple-invites/index.tsx","type":"registry:ui"}],"name":"apple-invites","registryDependencies":[],"title":"Apple Invites","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","lucide-react"],"description":"A BasicAccordion component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { ChevronDown } from \"lucide-react\";\nimport { 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 {/* Content stays mounted (height-animated, not unmounted) so the\n accordion keeps a stable width whether open or closed. `inert`\n removes collapsed content from tab order and the a11y tree. */}\n \n
\n {item.content}\n
\n \n
\n );\n })}\n
\n );\n}\n","path":"index.tsx","target":"components/smoothui/basic-accordion/index.tsx","type":"registry:ui"}],"name":"basic-accordion","registryDependencies":[],"title":"Basic Accordion","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","lucide-react"],"description":"A BasicDropdown component for SmoothUI.","devDependencies":[],"files":[{"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({ left: 0, top: 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 left: rect.left,\n top: rect.bottom + DROPDOWN_OFFSET,\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 left: rect.left,\n top: rect.bottom + DROPDOWN_OFFSET,\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 ? (\n {item.icon}\n ) : null}\n {item.label}\n\n {selectedItem?.id === item.id && (\n \n \n Selected\n \n \n \n )}\n \n \n ))}\n \n \n
\n ) : null}\n \n );\n\n return (\n <>\n
\n \n \n {String(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","path":"index.tsx","target":"components/smoothui/basic-dropdown/index.tsx","type":"registry:ui"}],"name":"basic-dropdown","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Basic Dropdown","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","lucide-react","usehooks-ts"],"description":"A BasicModal component for SmoothUI.","devDependencies":[],"files":[{"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 full: \"max-w-4xl\",\n lg: \"max-w-lg\",\n md: \"max-w-md\",\n sm: \"max-w-sm\",\n xl: \"max-w-xl\",\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;\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 ) : null}\n \n \n \n
\n\n {/* Content */}\n
{children}
\n \n \n \n ) : null}\n \n );\n\n if (!mounted) {\n return null;\n }\n\n return createPortal(modalContent, document.body);\n}\n","path":"index.tsx","target":"components/smoothui/basic-modal/index.tsx","type":"registry:ui"}],"name":"basic-modal","registryDependencies":[],"title":"Basic Modal","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","lucide-react"],"description":"A BasicToast component for SmoothUI.","devDependencies":[],"files":[{"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 error: ,\n info: ,\n success: ,\n warning: ,\n};\n\nconst toastClasses = {\n error: \"border-red-100 bg-red-50 dark:border-red-900 dark:bg-red-950\",\n info: \"border-blue-100 bg-blue-50 dark:border-blue-900 dark:bg-blue-950\",\n success:\n \"border-emerald-100 bg-emerald-50 dark:border-emerald-900 dark:bg-emerald-950\",\n warning:\n \"border-amber-100 bg-amber-50 dark:border-amber-900 dark:bg-amber-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 ) : null}\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 ) : null}\n \n
\n );\n}\n","path":"index.tsx","target":"components/smoothui/basic-toast/index.tsx","type":"registry:ui"}],"name":"basic-toast","registryDependencies":[],"title":"Basic Toast","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A BlurOutUp text animation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { motion, useInView, useReducedMotion } from \"motion/react\";\nimport { useRef } from \"react\";\n\n/**\n * BlurOutUp — words arrive clean from a gentle blur and upward drift,\n * Apple-style airy entrance. From the animate-text catalog (`blur-out-up`).\n */\nexport interface BlurOutUpProps {\n children: string;\n className?: string;\n /** Delay before the animation starts, in milliseconds. */\n delay?: number;\n /** Per-word stagger, in milliseconds. */\n stagger?: number;\n /** Animate only once the text scrolls into view. */\n triggerOnView?: boolean;\n}\n\nconst DURATION_S = 0.56;\nconst MS = 1000;\nconst EASE = [0.22, 1, 0.36, 1] as const;\n\nexport default function BlurOutUp({\n children,\n className = \"\",\n delay = 0,\n stagger = 28,\n triggerOnView = false,\n}: BlurOutUpProps) {\n const ref = useRef(null);\n const inView = useInView(ref, { once: true });\n const shouldReduceMotion = useReducedMotion();\n const play = (!triggerOnView || inView) && !shouldReduceMotion;\n const words = children.split(\" \");\n\n return (\n \n {words.map((word, index) => (\n // biome-ignore lint/suspicious/noArrayIndexKey: words have no stable id\n \n \n {word}\n \n {index < words.length - 1 && (\n \n {\" \"}\n \n )}\n \n ))}\n \n );\n}\n","path":"index.tsx","target":"components/smoothui/blur-out-up/index.tsx","type":"registry:ui"}],"name":"blur-out-up","registryDependencies":[],"title":"Blur Out Up","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A 3D CSS book component with perspective transforms and hover animation","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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}
: null}\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}
: null}\n
\n \n);\n\nexport default Book;\n","path":"index.tsx","target":"components/smoothui/book/index.tsx","type":"registry:ui"}],"name":"book","registryDependencies":[],"title":"Book","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A BottomUpLetters text animation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { motion, useInView, useReducedMotion } from \"motion/react\";\nimport { useRef } from \"react\";\n\nexport interface BottomUpLettersProps {\n children: string;\n className?: string;\n /** Delay before the animation starts, in milliseconds. */\n delay?: number;\n /** Per-character stagger, in milliseconds. */\n stagger?: number;\n /** Animate only once the text scrolls into view. */\n triggerOnView?: boolean;\n}\n\nconst DURATION_S = 0.4;\nconst MS = 1000;\n// Pronounced ease-out for a tall, staged lift from below.\nconst EASE = [0.18, 1, 0.32, 1] as const;\n\n/**\n * BottomUpLetters — letters rise from below in a pronounced staircase,\n * one symbol at a time, with zero blur. Best for short single words or\n * compact headlines at 40px+. From the animate-text catalog (`bottom-up-letters`).\n */\nexport default function BottomUpLetters({\n children,\n className = \"\",\n delay = 0,\n stagger = 88,\n triggerOnView = false,\n}: BottomUpLettersProps) {\n const ref = useRef(null);\n const inView = useInView(ref, { once: true });\n const shouldReduceMotion = useReducedMotion();\n const play = (!triggerOnView || inView) && !shouldReduceMotion;\n const characters = Array.from(children);\n\n return (\n \n {characters.map((char, index) => (\n \n {char === \" \" ? \" \" : String(char)}\n \n ))}\n \n );\n}\n","path":"index.tsx","target":"components/smoothui/bottom-up-letters/index.tsx","type":"registry:ui"}],"name":"bottom-up-letters","registryDependencies":[],"title":"Bottom Up Letters","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","lucide-react"],"description":"Animated breadcrumb navigation with stagger-in animation","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { ChevronRight } from \"lucide-react\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport type { ReactNode } from \"react\";\nimport { SPRING_DEFAULT } from \"@/components/smoothui/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","path":"index.tsx","target":"components/smoothui/breadcrumb/index.tsx","type":"registry:ui"}],"name":"breadcrumb","registryDependencies":["https://smoothui.dev/r/lib.json"],"title":"Breadcrumb","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","lucide-react"],"description":"A ButtonCopy component for SmoothUI.","devDependencies":[],"files":[{"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","path":"index.tsx","target":"components/smoothui/button-copy/index.tsx","type":"registry:ui"}],"name":"button-copy","registryDependencies":[],"title":"Button Copy","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","radix-ui"],"description":"An animated Checkbox component for SmoothUI with checkmark and indeterminate state animations.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\";\nimport { SPRING_DEFAULT } from \"@/components/smoothui/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","path":"index.tsx","target":"components/smoothui/checkbox/index.tsx","type":"registry:ui"}],"name":"checkbox","registryDependencies":["https://smoothui.dev/r/lib.json"],"title":"Checkbox","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Persistent WebGL shader transition wrapper that swaps content under a soft chromatic blur wash.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { useReducedMotion } from \"motion/react\";\nimport { type ReactNode, useEffect, useRef, useState } from \"react\";\n\nexport interface ChromaBlurTransitionProps {\n children: ReactNode;\n className?: string;\n duration?: number;\n onRest?: () => void;\n transitionKey: string | number;\n}\n\nconst DEFAULT_DURATION_MS = 1040;\nconst MIDPOINT = 0.5;\nconst MAX_DPR = 2;\nconst VERTEX_SHADER =\n \"attribute vec2 a; void main(){ gl_Position = vec4(a, 0.0, 1.0); }\";\nconst FRAGMENT_SHADER = `\nprecision mediump float;\nuniform vec2 uRes;\nuniform float uTime;\nuniform float uProgress;\nuniform float uAlpha;\n#define PI 3.14159265359\n\nfloat hash(vec2 p){ return fract(sin(dot(p, vec2(41.0, 289.0))) * 45758.5453); }\nfloat noise(vec2 p){\n vec2 i = floor(p);\n vec2 f = fract(p);\n float a = hash(i);\n float b = hash(i + vec2(1.0, 0.0));\n float c = hash(i + vec2(0.0, 1.0));\n float d = hash(i + vec2(1.0, 1.0));\n vec2 u = f * f * (3.0 - 2.0 * f);\n return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n}\n\nvoid main(){\n vec2 uv = gl_FragCoord.xy / uRes;\n float p = smoothstep(0.0, 1.0, uProgress);\n float field = uv.x * 0.62 + uv.y * 0.38;\n float n = noise(uv * 10.0 + vec2(uTime * 0.28, -uTime * 0.18));\n float wave = sin((uv.y + n * 0.12) * 28.0 + uTime * 2.2) * 0.018;\n float front = p * 1.42 - 0.2;\n float d = field + wave - front;\n\n float curtain = exp(-d * d * 34.0);\n float softGrain = noise(uv * 34.0 + uTime * 0.18) * 0.055;\n float chroma = exp(-(d + 0.045) * (d + 0.045) * 52.0) + exp(-(d - 0.045) * (d - 0.045) * 52.0);\n float exitFade = smoothstep(1.0, 0.74, p);\n float entryFade = smoothstep(0.0, 0.16, p);\n\n vec3 brandPink = vec3(1.0, 0.32, 0.64);\n vec3 champagne = vec3(1.0, 0.82, 0.56);\n vec3 seafoam = vec3(0.52, 0.90, 0.78);\n vec3 porcelain = vec3(1.0, 0.97, 0.90);\n vec3 color = mix(brandPink, champagne, smoothstep(-0.18, 0.18, sin((uv.y + n) * PI * 2.0)));\n color = mix(color, seafoam, smoothstep(0.2, 1.0, chroma) * 0.34);\n color = mix(color, porcelain, 0.16);\n\n float alpha = (curtain * 0.72 + chroma * 0.18 + softGrain * curtain) * entryFade * exitFade * uAlpha;\n gl_FragColor = vec4(color * alpha, clamp(alpha, 0.0, 0.86));\n}\n`;\nconst STRIP = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);\n\ninterface Playback {\n cancel: () => void;\n}\ninterface Controller {\n destroy: () => void;\n setAlpha: (alpha: number) => void;\n setProgress: (progress: number) => void;\n}\n\nconst clamp01 = (value: number) => Math.max(0, Math.min(1, value));\nconst easeOutQuart = (value: number) => 1 - (1 - value) ** 4;\nconst easeInOutCubic = (value: number) =>\n value < 0.5 ? 4 * value ** 3 : 1 - (-2 * value + 2) ** 3 / 2;\n\nconst compile = (gl: WebGLRenderingContext, type: number, source: string) => {\n const shader = gl.createShader(type);\n if (!shader) {\n return null;\n }\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n gl.deleteShader(shader);\n return null;\n }\n return shader;\n};\n\nconst resize = (canvas: HTMLCanvasElement, gl: WebGLRenderingContext) => {\n const rect = canvas.getBoundingClientRect();\n const dpr = Math.min(window.devicePixelRatio || 1, MAX_DPR);\n const width = Math.max(1, Math.round(rect.width * dpr));\n const height = Math.max(1, Math.round(rect.height * dpr));\n if (canvas.width !== width || canvas.height !== height) {\n canvas.width = width;\n canvas.height = height;\n }\n gl.viewport(0, 0, width, height);\n};\n\nconst createController = (canvas: HTMLCanvasElement): Controller | null => {\n const gl = canvas.getContext(\"webgl\", {\n alpha: true,\n antialias: false,\n premultipliedAlpha: true,\n });\n if (!gl) {\n return null;\n }\n const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX_SHADER);\n const fragment = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);\n const program = gl.createProgram();\n if (!(vertex && fragment && program)) {\n return null;\n }\n gl.attachShader(program, vertex);\n gl.attachShader(program, fragment);\n gl.linkProgram(program);\n gl.deleteShader(vertex);\n gl.deleteShader(fragment);\n if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n gl.deleteProgram(program);\n return null;\n }\n\n // biome-ignore lint/correctness/useHookAtTopLevel: WebGLRenderingContext.useProgram is not a React hook.\n gl.useProgram(program);\n const buffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n gl.bufferData(gl.ARRAY_BUFFER, STRIP, gl.STATIC_DRAW);\n const position = gl.getAttribLocation(program, \"a\");\n gl.enableVertexAttribArray(position);\n gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);\n gl.enable(gl.BLEND);\n gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);\n\n const uRes = gl.getUniformLocation(program, \"uRes\");\n const uTime = gl.getUniformLocation(program, \"uTime\");\n const uProgress = gl.getUniformLocation(program, \"uProgress\");\n const uAlpha = gl.getUniformLocation(program, \"uAlpha\");\n const startedAt = performance.now();\n let progress = 0;\n let alpha = 0;\n let frame = 0;\n let destroyed = false;\n\n const tick = () => {\n if (destroyed) {\n return;\n }\n resize(canvas, gl);\n gl.clearColor(0, 0, 0, 0);\n gl.clear(gl.COLOR_BUFFER_BIT);\n gl.uniform2f(uRes, canvas.width, canvas.height);\n gl.uniform1f(uTime, (performance.now() - startedAt) / 1000);\n gl.uniform1f(uProgress, progress);\n gl.uniform1f(uAlpha, alpha);\n gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n frame = requestAnimationFrame(tick);\n };\n frame = requestAnimationFrame(tick);\n\n return {\n destroy: () => {\n destroyed = true;\n cancelAnimationFrame(frame);\n gl.clear(gl.COLOR_BUFFER_BIT);\n if (buffer) {\n gl.deleteBuffer(buffer);\n }\n gl.deleteProgram(program);\n },\n setAlpha: (nextAlpha: number) => {\n alpha = clamp01(nextAlpha);\n },\n setProgress: (nextProgress: number) => {\n progress = clamp01(nextProgress);\n },\n };\n};\n\nconst play = (\n controller: Controller,\n duration: number,\n onMidpoint: () => void,\n onComplete: () => void\n): Playback => {\n let frame = 0;\n let cancelled = false;\n let didSwap = false;\n const startedAt = performance.now();\n controller.setAlpha(1);\n\n const advance = () => {\n if (cancelled) {\n return;\n }\n const raw = clamp01((performance.now() - startedAt) / duration);\n const progress = easeOutQuart(raw);\n controller.setProgress(progress);\n if (!(didSwap || progress < MIDPOINT)) {\n didSwap = true;\n onMidpoint();\n }\n if (raw < 1) {\n frame = requestAnimationFrame(advance);\n return;\n }\n if (!didSwap) {\n onMidpoint();\n }\n const fadeStartedAt = performance.now();\n const fade = () => {\n if (cancelled) {\n return;\n }\n const fadeRaw = clamp01((performance.now() - fadeStartedAt) / 90);\n controller.setAlpha(1 - easeInOutCubic(fadeRaw));\n if (fadeRaw < 1) {\n frame = requestAnimationFrame(fade);\n return;\n }\n controller.setAlpha(0);\n controller.setProgress(0);\n onComplete();\n };\n frame = requestAnimationFrame(fade);\n };\n frame = requestAnimationFrame(advance);\n\n return {\n cancel: () => {\n cancelled = true;\n cancelAnimationFrame(frame);\n },\n };\n};\n\nconst ChromaBlurTransition = ({\n children,\n className,\n duration = DEFAULT_DURATION_MS,\n onRest,\n transitionKey,\n}: ChromaBlurTransitionProps) => {\n const shouldReduceMotion = useReducedMotion();\n const canvasRef = useRef(null);\n const controllerRef = useRef(null);\n const playbackRef = useRef(null);\n const previousKey = useRef(transitionKey);\n const [renderedChildren, setRenderedChildren] = useState(children);\n const [isActive, setIsActive] = useState(false);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) {\n return;\n }\n const controller = createController(canvas);\n controllerRef.current = controller;\n return () => {\n playbackRef.current?.cancel();\n controller?.destroy();\n controllerRef.current = null;\n };\n }, []);\n\n useEffect(() => {\n if (previousKey.current === transitionKey) {\n setRenderedChildren(children);\n return;\n }\n previousKey.current = transitionKey;\n playbackRef.current?.cancel();\n\n if (shouldReduceMotion) {\n setRenderedChildren(children);\n setIsActive(false);\n onRest?.();\n return;\n }\n\n const controller = controllerRef.current;\n if (!controller) {\n setRenderedChildren(children);\n onRest?.();\n return;\n }\n setIsActive(true);\n playbackRef.current = play(\n controller,\n duration,\n () => setRenderedChildren(children),\n () => {\n setIsActive(false);\n playbackRef.current = null;\n onRest?.();\n }\n );\n }, [children, duration, onRest, shouldReduceMotion, transitionKey]);\n\n return (\n \n
{renderedChildren}
\n \n \n );\n};\n\nexport default ChromaBlurTransition;\n","path":"index.tsx","target":"components/smoothui/chroma-blur-transition/index.tsx","type":"registry:ui"}],"name":"chroma-blur-transition","registryDependencies":[],"title":"Chroma Blur Transition","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A ClipCornersButton component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport SmoothButton from \"@/components/smoothui/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","path":"index.tsx","target":"components/smoothui/clip-corners-button/index.tsx","type":"registry:ui"}],"name":"clip-corners-button","registryDependencies":["https://smoothui.dev/r/smooth-button.json"],"title":"Clip Corners Button","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","lucide-react"],"description":"An animated Combobox component for SmoothUI with text filtering, async search, and keyboard navigation.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/components/ui/command\";\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport { cn } from \"@/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 \"@/components/smoothui/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 ) : null}\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","path":"index.tsx","target":"components/smoothui/combobox/index.tsx","type":"registry:ui"}],"name":"combobox","registryDependencies":["command","popover","https://smoothui.dev/r/smooth-button.json","https://smoothui.dev/r/lib.json"],"title":"Combobox","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"An animated Context Menu component for SmoothUI with spring animations, nested submenus, and keyboard navigation.","devDependencies":[],"files":[{"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 \"@/components/ui/context-menu\";\nimport { cn } from \"@/lib/utils\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport type React from \"react\";\nimport { SPRING_DEFAULT } from \"@/components/smoothui/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} : null}\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} : null}\n {item.label}\n {item.shortcut ? (\n {item.shortcut}\n ) : null}\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","path":"index.tsx","target":"components/smoothui/context-menu/index.tsx","type":"registry:ui"}],"name":"context-menu","registryDependencies":["context-menu","https://smoothui.dev/r/lib.json"],"title":"Context Menu","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A ContributionGraph component for SmoothUI.","devDependencies":[],"files":[{"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\");\n const existingData = contributionData.find((d) => d.date === dateString);\n return {\n count: existingData?.count ?? LEVEL_0,\n date: dateString,\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 currentMonth,\n currentYear,\n startDateDay: startDate.getDay(),\n targetYear,\n weekCount,\n })\n ) {\n headers.push({\n colspan: weekCount,\n month: MONTHS[currentMonth],\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 currentMonth,\n currentYear,\n startDateDay: startDate.getDay(),\n targetYear,\n weekCount,\n })\n ) {\n headers.push({\n colspan: weekCount,\n month: MONTHS[currentMonth],\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 count: LEVEL_0,\n date: \"\",\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 day: \"numeric\",\n month: \"long\",\n weekday: \"long\",\n year: \"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 }, (_week, weekIndex) => {\n const dayData = yearData[weekIndex * DAYS_IN_WEEK + dayIndex];\n const cellKey = `${dayData?.date ?? \"empty\"}-${weekIndex}-${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 ) : null}\n\n {/* Legend */}\n {showLegend ? (\n
\n Less\n
\n {CONTRIBUTION_LEVELS.map((level) => (\n \n ))}\n
\n More\n
\n ) : null}\n
\n );\n}\n\nexport default ContributionGraph;\n","path":"index.tsx","target":"components/smoothui/contribution-graph/index.tsx","type":"registry:ui"}],"name":"contribution-graph","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Contribution Graph","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A CursorFollow component for SmoothUI.","devDependencies":[],"files":[{"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, { damping: 40, stiffness: 350 });\n const springY = useSpring(y, { damping: 40, stiffness: 350 });\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 ) : null}\n \n {/* Hidden span for pre-measuring text width */}\n {pendingText || cursorText ? (\n \n {pendingText || cursorText}\n \n ) : null}\n \n \n );\n};\n\nexport default CursorFollow;\n","path":"index.tsx","target":"components/smoothui/cursor-follow/index.tsx","type":"registry:ui"},{"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","path":"use-cursor-position.tsx","target":"components/smoothui/cursor-follow/use-cursor-position.tsx","type":"registry:ui"}],"name":"cursor-follow","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Cursor Follow","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A DepthParallaxWords text animation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { motion, useInView, useReducedMotion } from \"motion/react\";\nimport { useRef } from \"react\";\n\n/**\n * DepthParallaxWords — per-word depth motion with scale, vertical drift and blur for layered readability.\n * From the animate-text catalog (`depth-parallax-words`).\n */\nexport interface DepthParallaxWordsProps {\n children: string;\n className?: string;\n /** Delay before the animation starts, in milliseconds. */\n delay?: number;\n /** Per-word stagger, in milliseconds. */\n stagger?: number;\n /** Animate only once the text scrolls into view. */\n triggerOnView?: boolean;\n}\n\nconst DURATION_S = 0.7;\nconst MS = 1000;\nconst EASE = [0.22, 1, 0.36, 1] as const;\n\nexport default function DepthParallaxWords({\n children,\n className = \"\",\n delay = 0,\n stagger = 70,\n triggerOnView = false,\n}: DepthParallaxWordsProps) {\n const ref = useRef(null);\n const inView = useInView(ref, { once: true });\n const shouldReduceMotion = useReducedMotion();\n const play = (!triggerOnView || inView) && !shouldReduceMotion;\n const words = children.split(\" \");\n\n return (\n \n {words.map((word, index) => (\n // biome-ignore lint/suspicious/noArrayIndexKey: words have no stable id\n \n \n {word}\n \n {index < words.length - 1 && (\n \n {\" \"}\n \n )}\n \n ))}\n \n );\n}\n","path":"index.tsx","target":"components/smoothui/depth-parallax-words/index.tsx","type":"registry:ui"}],"name":"depth-parallax-words","registryDependencies":[],"title":"Depth Parallax Words","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion","radix-ui"],"description":"Animated Dialog and AlertDialog components for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport {\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogTitle,\n AlertDialogTrigger,\n} from \"@/components/ui/alert-dialog\";\nimport {\n DialogClose,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/components/ui/dialog\";\nimport { cn } from \"@/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 bounce: 0.05,\n duration: 0.25,\n type: \"spring\" as const,\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} : null}\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} : null}\n {description ? (\n {description}\n ) : null}\n \n \n ) : null}\n\n {children ? (\n \n {children}\n \n ) : null}\n\n {footer ? (\n \n {footer}\n \n ) : null}\n\n {showCloseButton ? (\n handleOpenChange(false)}\n shouldReduceMotion={shouldReduceMotion}\n />\n ) : null}\n \n \n \n ) : null}\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 ? (\n {trigger}\n ) : null}\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 ? (\n {title}\n ) : null}\n {description ? (\n \n {description}\n \n ) : null}\n \n \n ) : null}\n\n {children ? (\n \n {children}\n \n ) : null}\n\n {footer ? (\n \n {footer}\n \n ) : null}\n \n \n \n ) : null}\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","path":"index.tsx","target":"components/smoothui/dialog/index.tsx","type":"registry:ui"}],"name":"dialog","registryDependencies":["alert-dialog","dialog"],"title":"Dialog","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A DotMorphButton component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport SmoothButton from \"@/components/smoothui/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","path":"index.tsx","target":"components/smoothui/dot-morph-button/index.tsx","type":"registry:ui"}],"name":"dot-morph-button","registryDependencies":["https://smoothui.dev/r/smooth-button.json","https://smoothui.dev/r/tokens.json"],"title":"Dot Morph Button","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"An animated Drawer component for SmoothUI that slides from any side.","devDependencies":[],"files":[{"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 \"@/components/ui/drawer\";\nimport { cn } from \"@/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} : null}\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} : null}\n {description ? (\n {description}\n ) : null}\n \n \n ) : null}\n\n {/* Staggered body */}\n {children ? (\n \n
{children}
\n \n ) : null}\n\n {/* Staggered footer */}\n {footer ? (\n \n {footer}\n \n ) : null}\n \n ) : null}\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","path":"index.tsx","target":"components/smoothui/drawer/index.tsx","type":"registry:ui"}],"name":"drawer","registryDependencies":["drawer"],"title":"Drawer","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"An animated Dropdown Menu component for SmoothUI with spring animations, nested submenus, and keyboard navigation.","devDependencies":[],"files":[{"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 \"@/components/ui/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport { SPRING_DEFAULT } from \"@/components/smoothui/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} : null}\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} : null}\n {item.label}\n {item.shortcut ? (\n {item.shortcut}\n ) : null}\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","path":"index.tsx","target":"components/smoothui/dropdown-menu/index.tsx","type":"registry:ui"}],"name":"dropdown-menu","registryDependencies":["dropdown-menu","https://smoothui.dev/r/lib.json"],"title":"Dropdown Menu","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","lucide-react"],"description":"A DynamicIsland component for SmoothUI.","devDependencies":[],"files":[{"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 \"idle-ring\": 0.5,\n \"idle-timer\": 0.3,\n \"ring-idle\": 0.5,\n \"ring-timer\": 0.35,\n \"timer-idle\": 0.3,\n \"timer-ring\": 0.35,\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 ) : null}\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 { icon: , key: \"idle\" },\n { icon: , key: \"ring\" },\n { icon: , key: \"timer\" },\n { icon: , key: \"notification\" },\n { icon: , key: \"music\" },\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","path":"index.tsx","target":"components/smoothui/dynamic-island/index.tsx","type":"registry:ui"}],"name":"dynamic-island","registryDependencies":[],"title":"Dynamic Island","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","lucide-react"],"description":"A ExpandableCards component for SmoothUI.","devDependencies":[],"files":[{"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;\n const { clientWidth } = scrollRef.current;\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 ) : null}\n \n \n )}\n \n \n ))}\n
\n
\n );\n}\n","path":"index.tsx","target":"components/smoothui/expandable-cards/index.tsx","type":"registry:ui"}],"name":"expandable-cards","registryDependencies":[],"title":"Expandable Cards","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"iOS-style exposure slider with draggable ticker and progress ring","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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 = { damping: 30, mass: 0.5, stiffness: 300 };\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 ) : null}\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","path":"index.tsx","target":"components/smoothui/exposure-slider/index.tsx","type":"registry:ui"}],"name":"exposure-slider","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Exposure Slider","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A FadeThrough text animation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useState } from \"react\";\n\nexport interface FadeThroughProps {\n className?: string;\n /** Interval between phrase transitions, in milliseconds. */\n interval?: number;\n phrases: string[];\n}\n\nconst ENTER_DURATION_S = 0.42;\nconst EXIT_DURATION_S = 0.26;\nconst ENTER_EASE = [0.2, 0, 0, 1] as const;\nconst EXIT_EASE = [0.4, 0, 1, 1] as const;\n\n/**\n * FadeThrough — Material-style phrase cycling: old text fades out,\n * new text fades in with a soft delay. From the animate-text catalog\n * (`fade-through`). Best for hero copy swaps and rotating taglines.\n */\nexport default function FadeThrough({\n phrases,\n className = \"\",\n interval = 2500,\n}: FadeThroughProps) {\n const shouldReduceMotion = useReducedMotion();\n const [index, setIndex] = useState(0);\n\n useEffect(() => {\n if (shouldReduceMotion || phrases.length <= 1) {\n return;\n }\n const id = setInterval(() => {\n setIndex((prev) => (prev + 1) % phrases.length);\n }, interval);\n return () => clearInterval(id);\n }, [shouldReduceMotion, phrases.length, interval]);\n\n const current = phrases[index] ?? \"\";\n\n return (\n \n \n \n {current}\n \n \n \n );\n}\n","path":"index.tsx","target":"components/smoothui/fade-through/index.tsx","type":"registry:ui"}],"name":"fade-through","registryDependencies":[],"title":"Fade Through","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A FigmaComment component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/components/ui/avatar\";\nimport { cn } from \"@/lib/utils\";\nimport { getImageKitUrl } from \"@/lib/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 format: \"auto\",\n height: 48,\n quality: 85,\n width: 48,\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 filter: {\n delay: isExiting ? 0 : CONTENT_DELAY,\n duration: 0.25,\n ease: BLUR_EASE,\n },\n opacity: {\n delay: isExiting ? 0 : CONTENT_DELAY,\n duration: 0.25,\n ease: BLUR_EASE,\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 ) : null}\n \n \n \n );\n}\n","path":"index.tsx","target":"components/smoothui/figma-comment/index.tsx","type":"registry:ui"},{"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","path":"use-click-outside.tsx","target":"components/smoothui/figma-comment/use-click-outside.tsx","type":"registry:ui"}],"name":"figma-comment","registryDependencies":["avatar","https://smoothui.dev/r/data.json"],"title":"Figma Comment","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A FocusBlurResolve text animation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { motion, useInView, useReducedMotion } from \"motion/react\";\nimport { useRef } from \"react\";\n\nexport interface FocusBlurResolveProps {\n children: string;\n className?: string;\n /** Delay before the animation starts, in milliseconds. */\n delay?: number;\n /** Animate only once the text scrolls into view. */\n triggerOnView?: boolean;\n}\n\nconst DURATION_S = 0.76;\nconst MS = 1000;\n// Smooth deceleration — premium focus-pull ease-out.\nconst EASE = [0.22, 1, 0.36, 1] as const;\n\n/**\n * FocusBlurResolve — whole-text entrance that pulls from heavy blur to crisp,\n * with a subtle upward drift and scale settle. Ideal for hero headlines and\n * section titles where the moment of resolution feels intentional.\n * From the animate-text catalog (`focus-blur-resolve`).\n */\nexport default function FocusBlurResolve({\n children,\n className = \"\",\n delay = 0,\n triggerOnView = false,\n}: FocusBlurResolveProps) {\n const ref = useRef(null);\n const inView = useInView(ref, { once: true });\n const shouldReduceMotion = useReducedMotion();\n const play = (!triggerOnView || inView) && !shouldReduceMotion;\n\n return (\n \n \n {children}\n \n \n );\n}\n","path":"index.tsx","target":"components/smoothui/focus-blur-resolve/index.tsx","type":"registry:ui"}],"name":"focus-blur-resolve","registryDependencies":[],"title":"Focus Blur Resolve","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"A lightweight, composable Form component with animated error messages and full accessibility support.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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 \"@/components/smoothui/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 prevErrors: {},\n submitCount: 0,\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, prevErrors, submitCount }),\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 error,\n fieldIndex: fieldIndexRef.current ?? 0,\n formDescriptionId: `${id}-form-item-description`,\n formItemId: `${id}-form-item`,\n formMessageId: `${id}-form-item-message`,\n id,\n name,\n prevError,\n submitCount,\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 \"aria-describedby\": error\n ? `${formDescriptionId} ${formMessageId}`\n : formDescriptionId,\n \"aria-invalid\": error ? true : undefined,\n id: formItemId,\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","path":"index.tsx","target":"components/smoothui/form/index.tsx","type":"registry:ui"}],"name":"form","registryDependencies":["https://smoothui.dev/r/lib.json"],"title":"Form","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","lucide-react"],"description":"A GitHubStarsAnimation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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 damping: 30,\n stiffness: 100,\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 delay: index * STAGGER_DELAY,\n duration: TRANSITION_DURATION,\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","path":"index.tsx","target":"components/smoothui/github-stars-animation/index.tsx","type":"registry:ui"}],"name":"github-stars-animation","registryDependencies":[],"title":"Github Stars Animation","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A GlowHoverCards component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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 }>({ opacity: 0, x: 0, y: 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 opacity: 1,\n x,\n y,\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 attributes: true,\n childList: true,\n subtree: 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 backgroundColor: `hsla(${hsl}, ${glowIntensity})`,\n borderColor: `hsla(${hsl}, 1)`,\n boxShadow: `0 0 0 1px inset hsl(${hsl}), 0 0 20px 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 backgroundColor: brandWithOpacity,\n borderColor: brandColor,\n boxShadow: `0 0 0 1px inset ${brandColor}, 0 0 20px ${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 className: cn(existingClassName, \"glow-overlay-item\"),\n style: mergedStyle,\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","path":"index.tsx","target":"components/smoothui/glow-hover-card/index.tsx","type":"registry:ui"}],"name":"glow-hover-card","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Glow Hover Card","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["gsap"],"description":"A GooeyPopover component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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 borderRadius: CONTENT_BORDER_RADIUS,\n height: contentHeight,\n opacity: 1,\n width: contentWidth,\n x: contentLeft,\n y: translateY,\n });\n gsap.set(innerTarget, { opacity: 1, y: 0 });\n } else {\n gsap.set(unfilteredTarget, {\n borderRadius: triggerRadius,\n height: triggerSize,\n opacity: 0,\n width: triggerSize,\n x: 0,\n y: 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 borderRadius: triggerRadius,\n height: triggerSize,\n opacity: 1,\n width: triggerSize,\n x: 0,\n y: 0,\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 borderRadius: 0,\n duration: speed,\n ease: \"power1.in\",\n height: contentHeight,\n width: contentWidth,\n x: contentLeft,\n y: translateY,\n },\n 0\n );\n }\n\n // Unfiltered content: morph to rectangle with rounded corners\n tl.to(\n unfilteredTarget,\n {\n borderRadius: CONTENT_BORDER_RADIUS,\n duration: speed,\n ease: \"power1.in\",\n height: contentHeight,\n width: contentWidth,\n x: contentLeft,\n y: translateY,\n },\n 0\n );\n\n // Content text fade in (overlapping with shape morph)\n tl.to(\n innerTarget,\n {\n duration: speed * 0.75,\n ease: \"power1.out\",\n opacity: 1,\n y: 0,\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 duration: speed * 0.4,\n ease: \"power1.in\",\n opacity: 0,\n y: 8,\n });\n\n // Shape morph back: rectangle → circle\n const targets = [filteredTarget, unfilteredTarget].filter(Boolean);\n tl.to(\n targets,\n {\n borderRadius: triggerRadius,\n duration: speed,\n ease: \"power1.in\",\n height: triggerSize,\n width: triggerSize,\n x: 0,\n y: 0,\n },\n speed * 0.2\n );\n\n // Fade out at the end\n tl.to(\n targets,\n {\n duration: speed * 0.3,\n ease: \"power1.in\",\n opacity: 0,\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 height: triggerSize,\n width: 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 ) : null}\n \n );\n}\n","path":"index.tsx","target":"components/smoothui/gooey-popover/index.tsx","type":"registry:ui"},{"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","path":"use-click-outside.tsx","target":"components/smoothui/gooey-popover/use-click-outside.tsx","type":"registry:ui"}],"name":"gooey-popover","registryDependencies":[],"title":"Gooey Popover","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"3x3 grid-based loading animation with preset patterns","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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 border: [\n [1, 1, 1],\n [1, 0, 1],\n [1, 1, 1],\n ],\n breathing: [\n [0, 0, 0],\n [0, 1, 0],\n [0, 0, 0],\n ],\n chaos: [\n [1, 0, 1],\n [0, 1, 0],\n [1, 0, 0],\n ],\n\n // Patterns\n checkerboard: [\n [1, 0, 1],\n [0, 1, 0],\n [1, 0, 1],\n ],\n corners: [\n [1, 0, 1],\n [0, 0, 0],\n [1, 0, 1],\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\n // Shapes\n cross: [\n [0, 1, 0],\n [1, 1, 1],\n [0, 1, 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 // 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 diamond: [\n [0, 1, 0],\n [1, 0, 1],\n [0, 1, 0],\n ],\n \"duo-diag\": [\n [1, 0, 0],\n [0, 1, 0],\n [0, 0, 0],\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\n // Edge\n \"edge-cw\": [\n [1, 1, 1],\n [0, 0, 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 heartbeat: [\n [0, 1, 0],\n [1, 1, 1],\n [0, 1, 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 // 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\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 \"line-h-bot\": [\n [0, 0, 0],\n [0, 0, 0],\n [1, 1, 1],\n ],\n \"line-h-mid\": [\n [0, 0, 0],\n [1, 1, 1],\n [0, 0, 0],\n ],\n\n // Horizontal lines\n \"line-h-top\": [\n [1, 1, 1],\n [0, 0, 0],\n [0, 0, 0],\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 \"plus-full\": [\n [0, 1, 0],\n [1, 1, 1],\n [0, 1, 0],\n ],\n\n // Plus\n \"plus-hollow\": [\n [0, 1, 0],\n [1, 0, 1],\n [0, 1, 0],\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 \"ripple-in\": [\n [0, 0, 0],\n [0, 1, 0],\n [0, 0, 0],\n ],\n\n // Ripple\n \"ripple-out\": [\n [1, 1, 1],\n [1, 0, 1],\n [1, 1, 1],\n ],\n \"rows-alt\": [\n [1, 1, 1],\n [0, 0, 0],\n [1, 1, 1],\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 \"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 // 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 sparkle: [\n [1, 0, 1],\n [0, 1, 0],\n [1, 0, 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 \"spiral-ccw\": [\n [1, 1, 1],\n [1, 0, 0],\n [1, 0, 0],\n ],\n\n // Spirals\n \"spiral-cw\": [\n [1, 1, 1],\n [0, 0, 1],\n [0, 0, 1],\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 \"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 // T-shapes\n \"T-top\": [\n [1, 1, 1],\n [0, 1, 0],\n [0, 0, 0],\n ],\n twinkle: [\n [1, 0, 0],\n [0, 0, 1],\n [0, 1, 0],\n ],\n\n // Effects\n waterfall: [\n [1, 1, 0],\n [0, 0, 0],\n [0, 0, 0],\n ],\n \"wave-bt\": [\n [0, 0, 0],\n [1, 1, 1],\n [1, 1, 1],\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 \"x-shape\": [\n [1, 0, 1],\n [0, 1, 0],\n [1, 0, 1],\n ],\n};\n\n// Color presets\nconst COLORS: Record = {\n amber: \"#fbbf24\",\n blue: \"#38bdf8\",\n green: \"#4ade80\",\n red: \"#f87171\",\n white: \"#f5f5f4\",\n};\n\n// Size presets in pixels\nconst SIZES: Record = {\n lg: 48,\n md: 32,\n sm: 24,\n xl: 64,\n};\n\n// Speed presets in milliseconds\nconst SPEEDS: Record = {\n fast: 400,\n normal: 800,\n slow: 1500,\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","path":"index.tsx","target":"components/smoothui/grid-loader/index.tsx","type":"registry:ui"}],"name":"grid-loader","registryDependencies":[],"title":"Grid Loader","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","lucide-react","react-use-measure"],"description":"A ImageMetadataPreview component for SmoothUI.","devDependencies":[],"files":[{"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 \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","path":"index.tsx","target":"components/smoothui/image-metadata-preview/index.tsx","type":"registry:ui"}],"name":"image-metadata-preview","registryDependencies":[],"title":"Image Metadata Preview","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","react-use-measure"],"description":"A InfiniteSlider component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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 duration: transitionDuration,\n ease: \"linear\",\n onComplete: () => {\n setIsTransitioning(false);\n setKey((prevKey) => prevKey + 1);\n },\n });\n } else {\n controls = animate(translation, [from, to], {\n duration,\n ease: \"linear\",\n onRepeat: () => {\n translation.set(from);\n },\n repeat: Number.POSITIVE_INFINITY,\n repeatDelay: 0,\n repeatType: \"loop\",\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 onHoverEnd: () => {\n setIsTransitioning(true);\n setCurrentSpeed(speed);\n },\n onHoverStart: () => {\n setIsTransitioning(true);\n setCurrentSpeed(speedOnHover);\n },\n }\n : {};\n\n return (\n
\n \n {children}\n {children}\n \n
\n );\n}\n","path":"index.tsx","target":"components/smoothui/infinite-slider/index.tsx","type":"registry:ui"}],"name":"infinite-slider","registryDependencies":[],"title":"Infinite Slider","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","lucide-react"],"description":"A InteractiveImageSelector component for SmoothUI.","devDependencies":[],"files":[{"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 damping: 25,\n duration: isResetting ? RESET_ANIMATION_DURATION : undefined,\n stiffness: 300,\n type: \"spring\" as const,\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 ) : null}\n \n
\n );\n}\n","path":"index.tsx","target":"components/smoothui/interactive-image-selector/index.tsx","type":"registry:ui"}],"name":"interactive-image-selector","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Interactive Image Selector","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","usehooks-ts"],"description":"A JobListingComponent component for SmoothUI.","devDependencies":[],"files":[{"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 bounce: 0.1,\n duration: 0.25,\n layout: {\n duration: 0.25,\n ease: [0.645, 0.045, 0.355, 1],\n },\n type: \"spring\" as const,\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","path":"index.tsx","target":"components/smoothui/job-listing-component/index.tsx","type":"registry:ui"}],"name":"job-listing-component","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Job Listing Component","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A KineticCenterBuild text animation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useState } from \"react\";\n\nexport interface KineticCenterBuildProps {\n className?: string;\n /** Interval between phrase completions in milliseconds. */\n interval?: number;\n phrases: string[];\n}\n\nconst BUILD_EASE = [0.2, 0.8, 0.2, 1] as const;\nconst EXIT_EASE = [0.4, 0, 0.2, 1] as const;\n\n/**\n * KineticCenterBuild — Apple keynote-style word-by-word build.\n * Each new word enters from the right and pushes the line until the full phrase locks centered.\n * From the animate-text catalog (`kinetic-center-build`).\n */\nexport default function KineticCenterBuild({\n phrases,\n className = \"\",\n interval = 2500,\n}: KineticCenterBuildProps) {\n const [phraseIndex, setPhraseIndex] = useState(0);\n const [wordCount, setWordCount] = useState(1);\n const [exiting, setExiting] = useState(false);\n const shouldReduceMotion = useReducedMotion();\n\n const currentPhrase = phrases[phraseIndex] ?? \"\";\n const words = currentPhrase.split(\" \");\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: words.length drives the build schedule\n useEffect(() => {\n if (shouldReduceMotion) {\n const holdId = setTimeout(() => {\n setPhraseIndex((prev) => (prev + 1) % phrases.length);\n }, interval);\n return () => clearTimeout(holdId);\n }\n\n setWordCount(1);\n setExiting(false);\n\n const buildTimers: ReturnType[] = [];\n\n for (let i = 1; i < words.length; i++) {\n buildTimers.push(\n setTimeout(() => {\n setWordCount(i + 1);\n }, i * 430)\n );\n }\n\n const totalBuild = (words.length - 1) * 430 + 340;\n const holdId = setTimeout(() => {\n setExiting(true);\n setTimeout(() => {\n setPhraseIndex((prev) => (prev + 1) % phrases.length);\n setWordCount(1);\n setExiting(false);\n }, 260 + 220);\n }, totalBuild + interval);\n\n buildTimers.push(holdId);\n return () => {\n for (const t of buildTimers) {\n clearTimeout(t);\n }\n };\n }, [phraseIndex, phrases.length, interval, shouldReduceMotion, words.length]);\n\n const visibleWords = shouldReduceMotion ? words : words.slice(0, wordCount);\n const restingAnimate = shouldReduceMotion\n ? { opacity: 1 }\n : { filter: \"blur(0px)\", opacity: 1, scale: 1, x: 0, y: 0 };\n const exitAnimate = {\n filter: \"blur(2.5px)\",\n opacity: 0,\n transition: { duration: 0.26, ease: EXIT_EASE },\n y: -6,\n };\n\n return (\n \n \n {visibleWords.map((word, i) => (\n \n {word}\n \n ))}\n \n \n );\n}\n","path":"index.tsx","target":"components/smoothui/kinetic-center-build/index.tsx","type":"registry:ui"}],"name":"kinetic-center-build","registryDependencies":[],"title":"Kinetic Center Build","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A LineByLineSlide text animation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { motion, useInView, useReducedMotion } from \"motion/react\";\nimport { useRef } from \"react\";\n\nexport interface LineByLineSlideProps {\n /** Text content. Use \"\\n\" to separate lines, or pass `lines` instead. */\n children?: string;\n className?: string;\n /** Delay before the animation starts, in milliseconds. */\n delay?: number;\n /** Explicit line array. Takes precedence over children. */\n lines?: string[];\n /** Per-line stagger, in milliseconds. */\n stagger?: number;\n /** Animate only once the text scrolls into view. */\n triggerOnView?: boolean;\n}\n\nconst DURATION_S = 0.9;\nconst MS = 1000;\nconst EASE = [0.22, 1, 0.36, 1] as const;\n\n/**\n * LineByLineSlide — per-line slide-in from the left with a staggered entrance,\n * inspired by Apple landing page subheads. Each line enters from the left for a\n * flowing paragraph reveal. From the animate-text catalog (`line-by-line-slide`).\n * Best for 2-line or 3-line headings.\n */\nexport default function LineByLineSlide({\n children,\n lines: linesProp,\n className = \"\",\n delay = 0,\n stagger = 120,\n triggerOnView = false,\n}: LineByLineSlideProps) {\n const ref = useRef(null);\n const inView = useInView(ref, { once: true });\n const shouldReduceMotion = useReducedMotion();\n const play = (!triggerOnView || inView) && !shouldReduceMotion;\n\n const lines = linesProp ?? (children ? children.split(\"\\n\") : []);\n const label = lines.join(\" \");\n\n return (\n \n {lines.map((line, index) => (\n \n {line}\n \n ))}\n \n );\n}\n","path":"index.tsx","target":"components/smoothui/line-by-line-slide/index.tsx","type":"registry:ui"}],"name":"line-by-line-slide","registryDependencies":[],"title":"Line By Line Slide","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["@radix-ui/react-slot","class-variance-authority","motion"],"description":"Button that subtly follows the cursor with magnetic effect","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cn } from \"@/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 cursor-pointer 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 defaultVariants: {\n size: \"default\",\n variant: \"default\",\n },\n variants: {\n size: {\n default: \"h-10 px-4 py-2\",\n icon: \"h-10 w-10\",\n lg: \"h-11 rounded-md px-8\",\n sm: \"h-9 rounded-md px-3\",\n },\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 ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-foreground underline-offset-4 hover:underline\",\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 },\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 = { bounce: 0.1, duration: 0.4 },\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 bounce: springConfig.bounce ?? 0.1,\n duration: springConfig.duration ?? 0.4,\n });\n const y = useSpring(0, {\n bounce: springConfig.bounce ?? 0.1,\n duration: springConfig.duration ?? 0.4,\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","path":"index.tsx","target":"components/smoothui/magnetic-button/index.tsx","type":"registry:ui"}],"name":"magnetic-button","registryDependencies":[],"title":"Magnetic Button","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A MaskRevealUp text animation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { motion, useInView, useReducedMotion } from \"motion/react\";\nimport { useRef } from \"react\";\n\nexport interface MaskRevealUpProps {\n /** Text content. Use \"\\n\" to separate lines, or pass `lines` instead. */\n children?: string;\n className?: string;\n /** Delay before the animation starts, in milliseconds. */\n delay?: number;\n /** Explicit line array. Takes precedence over children. */\n lines?: string[];\n /** Per-line stagger, in milliseconds. */\n stagger?: number;\n /** Animate only once the text scrolls into view. */\n triggerOnView?: boolean;\n}\n\nconst DURATION_S = 0.76;\nconst MS = 1000;\nconst EASE = [0.22, 1, 0.36, 1] as const;\n\n/**\n * MaskRevealUp — per-line masked reveal with upward motion and soft blur,\n * inspired by Apple section transitions. Each line rises from beneath an\n * overflow-hidden mask. From the animate-text catalog (`mask-reveal-up`).\n * Best for two-line and three-line headings.\n */\nexport default function MaskRevealUp({\n children,\n lines: linesProp,\n className = \"\",\n delay = 0,\n stagger = 90,\n triggerOnView = false,\n}: MaskRevealUpProps) {\n const ref = useRef(null);\n const inView = useInView(ref, { once: true });\n const shouldReduceMotion = useReducedMotion();\n const play = (!triggerOnView || inView) && !shouldReduceMotion;\n\n const lines = linesProp ?? (children ? children.split(\"\\n\") : []);\n const label = lines.join(\" \");\n\n return (\n \n {lines.map((line, index) => (\n // biome-ignore lint/suspicious/noArrayIndexKey: lines have no stable id\n \n \n {line}\n \n \n ))}\n \n );\n}\n","path":"index.tsx","target":"components/smoothui/mask-reveal-up/index.tsx","type":"registry:ui"}],"name":"mask-reveal-up","registryDependencies":[],"title":"Mask Reveal Up","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A MicroScaleFade text animation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { motion, useInView, useReducedMotion } from \"motion/react\";\nimport { useRef } from \"react\";\n\nexport interface MicroScaleFadeProps {\n children: string;\n className?: string;\n /** Delay before the animation starts, in milliseconds. */\n delay?: number;\n /** Animate only once the text scrolls into view. */\n triggerOnView?: boolean;\n}\n\nconst DURATION_S = 0.6;\nconst MS = 1000;\nconst EASE = [0.32, 0.72, 0, 1] as const;\n\n/**\n * MicroScaleFade — calm, tiny scale pop used as subtle premium polish for\n * labels and headings. The whole text animates as a single element from\n * scale 0.96 to 1. From the animate-text catalog (`micro-scale-fade`).\n * Best for single words or short titles.\n */\nexport default function MicroScaleFade({\n children,\n className = \"\",\n delay = 0,\n triggerOnView = false,\n}: MicroScaleFadeProps) {\n const ref = useRef(null);\n const inView = useInView(ref, { once: true });\n const shouldReduceMotion = useReducedMotion();\n const play = (!triggerOnView || inView) && !shouldReduceMotion;\n\n return (\n \n {children}\n \n );\n}\n","path":"index.tsx","target":"components/smoothui/micro-scale-fade/index.tsx","type":"registry:ui"}],"name":"micro-scale-fade","registryDependencies":[],"title":"Micro Scale Fade","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["class-variance-authority","motion"],"description":"Feedback dock that morphs from a compact pill into a panel and back, with a spring layout transition.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport SmoothButton from \"@/components/smoothui/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 closeFeedback,\n openFeedback,\n showFeedback,\n success,\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 ) : null}\n \n \n {showFeedback ? (\n \n \n \n ) : null}\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","path":"index.tsx","target":"components/smoothui/morph-surface/index.tsx","type":"registry:ui"},{"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","path":"use-click-outside.tsx","target":"components/smoothui/morph-surface/use-click-outside.tsx","type":"registry:ui"}],"name":"morph-surface","registryDependencies":["https://smoothui.dev/r/smooth-button.json","https://smoothui.dev/r/siri-orb.json"],"title":"Morph Surface","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Animated notification badge with count and status variants","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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 away: \"bg-amber-500\",\n busy: \"bg-red-500\",\n offline: \"bg-gray-400\",\n online: \"bg-emerald-500\",\n};\n\nconst positionClasses = {\n \"bottom-left\": \"-bottom-1 -left-1\",\n \"bottom-right\": \"-bottom-1 -right-1\",\n \"top-left\": \"-top-1 -left-1\",\n \"top-right\": \"-top-1 -right-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 ) : null}\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","path":"index.tsx","target":"components/smoothui/notification-badge/index.tsx","type":"registry:ui"}],"name":"notification-badge","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Notification Badge","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react"],"description":"A NumberFlow component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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","path":"index.tsx","target":"components/smoothui/number-flow/index.tsx","type":"registry:ui"}],"name":"number-flow","registryDependencies":[],"title":"Number Flow","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":[],"description":"A soft-min SDF merge transition with two organic expanding shapes.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport SdfBlobTransition from \"../sdf-blob-transition\";\n\nexport interface OrganicMergeTransitionProps {\n children: ReactNode;\n className?: string;\n duration?: number;\n onRest?: () => void;\n transitionKey: string | number;\n}\n\nconst OrganicMergeTransition = ({\n children,\n className,\n duration = 1120,\n onRest,\n transitionKey,\n}: OrganicMergeTransitionProps) => (\n \n {children}\n \n);\n\nexport default OrganicMergeTransition;\n","path":"index.tsx","target":"components/smoothui/organic-merge-transition/index.tsx","type":"registry:ui"}],"name":"organic-merge-transition","registryDependencies":["https://smoothui.dev/r/sdf-blob-transition.json"],"title":"Organic Merge Transition","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","lucide-react"],"description":"Animated pagination with spring-based active page indicator","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { useCallback, useId, useMemo } from \"react\";\nimport { SPRING_DEFAULT } from \"@/components/smoothui/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 bounce: 0.05,\n duration: 0.25,\n type: \"spring\" as const,\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","path":"index.tsx","target":"components/smoothui/pagination/index.tsx","type":"registry:ui"}],"name":"pagination","registryDependencies":["https://smoothui.dev/r/smooth-button.json","https://smoothui.dev/r/lib.json"],"title":"Pagination","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A PerCharacterRise text animation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { motion, useInView, useReducedMotion } from \"motion/react\";\nimport { useRef } from \"react\";\n\nexport interface PerCharacterRiseProps {\n children: string;\n className?: string;\n /** Delay before the animation starts, in milliseconds. */\n delay?: number;\n /** Per-character stagger, in milliseconds. */\n stagger?: number;\n /** Animate only once the text scrolls into view. */\n triggerOnView?: boolean;\n}\n\nconst DURATION_S = 0.7;\nconst MS = 1000;\n// Apple's clean tvOS-style ease-out.\nconst EASE = [0.2, 0.8, 0.2, 1] as const;\n\n/**\n * PerCharacterRise — letters slide up from below with no blur, crisp and\n * deliberate. Apple's clean tvOS-style reveal. From the animate-text catalog\n * (`per-character-rise`). Best on 40px+ headlines.\n */\nexport default function PerCharacterRise({\n children,\n className = \"\",\n delay = 0,\n stagger = 24,\n triggerOnView = false,\n}: PerCharacterRiseProps) {\n const ref = useRef(null);\n const inView = useInView(ref, { once: true });\n const shouldReduceMotion = useReducedMotion();\n const play = (!triggerOnView || inView) && !shouldReduceMotion;\n const characters = Array.from(children);\n\n return (\n \n {characters.map((char, index) => (\n \n {char === \" \" ? \" \" : String(char)}\n \n ))}\n \n );\n}\n","path":"index.tsx","target":"components/smoothui/per-character-rise/index.tsx","type":"registry:ui"}],"name":"per-character-rise","registryDependencies":[],"title":"Per Character Rise","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A PerWordCrossfade text animation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { motion, useInView, useReducedMotion } from \"motion/react\";\nimport { useRef } from \"react\";\n\nexport interface PerWordCrossfadeProps {\n children: string;\n className?: string;\n /** Delay before the animation starts, in milliseconds. */\n delay?: number;\n /** Per-word stagger, in milliseconds. */\n stagger?: number;\n /** Animate only once the text scrolls into view. */\n triggerOnView?: boolean;\n}\n\nconst DURATION_S = 0.7;\nconst MS = 1000;\n// Calm keynote ease-out.\nconst EASE = [0.16, 1, 0.3, 1] as const;\n\n/**\n * PerWordCrossfade — per-word fade-in with a subtle upward drift,\n * calm keynote rhythm. From the animate-text catalog\n * (`per-word-crossfade`).\n */\nexport default function PerWordCrossfade({\n children,\n className = \"\",\n delay = 0,\n stagger = 70,\n triggerOnView = false,\n}: PerWordCrossfadeProps) {\n const ref = useRef(null);\n const inView = useInView(ref, { once: true });\n const shouldReduceMotion = useReducedMotion();\n const play = (!triggerOnView || inView) && !shouldReduceMotion;\n const words = children.split(\" \");\n\n return (\n \n {words.map((word, index) => (\n // biome-ignore lint/suspicious/noArrayIndexKey: words have no stable id\n \n \n {word}\n \n {index < words.length - 1 && (\n \n {\" \"}\n \n )}\n \n ))}\n \n );\n}\n","path":"index.tsx","target":"components/smoothui/per-word-crossfade/index.tsx","type":"registry:ui"}],"name":"per-word-crossfade","registryDependencies":[],"title":"Per Word Crossfade","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A PhotoStack component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { useRef, useState } from \"react\";\n\nexport interface PhotoStackPhoto {\n alt: string;\n id: string;\n /** Optional caption shown over the front card. */\n name?: string;\n role?: string;\n src: string;\n}\n\nexport interface PhotoStackProps {\n className?: string;\n /** Fired after the top card is sent to the back, with the new id order. */\n onCycle?: (order: string[]) => void;\n /** Cards to stack. The first item starts on top. */\n photos: PhotoStackPhoto[];\n}\n\n// Resting offset/scale per stack position (0 = front).\nconst POSITIONS = [\n { scale: 1, x: 0, y: 0 },\n { scale: 0.95, x: 16, y: 12 },\n { scale: 0.9, x: 32, y: 24 },\n];\n\n/**\n * PhotoStack — a draggable deck of photo cards. Drag the top card (Tinder-style)\n * in either direction, or tap it, to send it to the back and reveal the next.\n * Inspired by Josh Puckett's dialkit Photo Stack.\n */\nexport default function PhotoStack({\n className,\n photos,\n onCycle,\n}: PhotoStackProps) {\n const reduceMotion = useReducedMotion();\n const [order, setOrder] = useState(() => photos.map((_, i) => i));\n // A real drag fires both onDragEnd and a trailing onClick. Without this guard\n // a short drag would cycle twice and land the card in 2nd place, not last.\n const justDragged = useRef(false);\n\n const cycle = () => {\n setOrder((prev) => {\n const next = [...prev.slice(1), prev[0]];\n onCycle?.(next.map((i) => photos[i].id));\n return next;\n });\n };\n\n return (\n
\n {order.map((photoIndex, pos) => {\n const photo = photos[photoIndex];\n const rest = POSITIONS[Math.min(pos, POSITIONS.length - 1)];\n const isFront = pos === 0;\n\n return (\n {\n if (!isFront) {\n return;\n }\n // Swallow the click that trails a drag so it doesn't double-cycle.\n if (justDragged.current) {\n justDragged.current = false;\n return;\n }\n cycle();\n }}\n onDragEnd={() => {\n // Any drag release sends the dragged (front) card to the back.\n justDragged.current = true;\n cycle();\n }}\n onKeyDown={(e: React.KeyboardEvent) => {\n if (isFront && (e.key === \"Enter\" || e.key === \" \")) {\n e.preventDefault();\n cycle();\n }\n }}\n role={isFront ? \"button\" : undefined}\n style={{\n cursor: isFront ? \"grab\" : \"default\",\n zIndex: photos.length - pos,\n }}\n tabIndex={isFront ? 0 : -1}\n transition={\n reduceMotion\n ? { duration: 0 }\n : { damping: 30, stiffness: 320, type: \"spring\" }\n }\n whileDrag={{ cursor: \"grabbing\" }}\n >\n \n {photo.name || photo.role ? (\n \n {photo.name ? (\n {photo.name}\n ) : null}\n {photo.role ? (\n {photo.role}\n ) : null}\n \n ) : null}\n {pos > 0 && (\n \n )}\n \n );\n })}\n
\n );\n}\n","path":"index.tsx","target":"components/smoothui/photo-stack/index.tsx","type":"registry:ui"}],"name":"photo-stack","registryDependencies":[],"title":"Photo Stack","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","@radix-ui/react-tabs"],"description":"A Phototab component for SmoothUI.","devDependencies":[],"files":[{"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 height: triggerRect.height,\n left: triggerRect.left - listRect.left,\n top: triggerRect.top - listRect.top,\n width: triggerRect.width,\n });\n } else {\n setBgStyle(null);\n }\n }, [hoveredIndex]);\n\n return (\n \n \n \n {bgStyle ? (\n \n ) : null}\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","path":"index.tsx","target":"components/smoothui/phototab/index.tsx","type":"registry:ui"}],"name":"phototab","registryDependencies":[],"title":"Phototab","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","lucide-react"],"description":"A PowerOffSlide component for SmoothUI.","devDependencies":[],"files":[{"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","path":"index.tsx","target":"components/smoothui/power-off-slide/index.tsx","type":"registry:ui"}],"name":"power-off-slide","registryDependencies":[],"title":"Power Off Slide","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":[],"description":"A PriceFlow component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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","path":"index.tsx","target":"components/smoothui/price-flow/index.tsx","type":"registry:ui"}],"name":"price-flow","registryDependencies":[],"title":"Price Flow","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A persistent WebGL prism sweep transition wrapper for route and state changes.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { useReducedMotion } from \"motion/react\";\nimport {\n type ReactNode,\n type RefObject,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nexport type PrismSweepDirection = \"left\" | \"right\" | \"up\" | \"down\";\nexport type PrismSweepTone = \"prism\" | \"chroma\" | \"aperture\" | \"beam\";\n\nexport interface PrismSweepTransitionProps {\n /** Content rendered underneath the sweep. */\n children: ReactNode;\n /** Optional wrapper className. */\n className?: string;\n /** Direction the prism field travels from. */\n direction?: PrismSweepDirection;\n /** Total sweep duration, in milliseconds. */\n duration?: number;\n /** Called after the sweep finishes. */\n onRest?: () => void;\n /** Optional tone preset for the shader palette and field behavior. */\n tone?: PrismSweepTone;\n /** Key that starts a new sweep when it changes. */\n transitionKey: string | number;\n}\n\nconst DEFAULT_DURATION_MS = 1240;\nconst OUTRO_MS = 82;\nconst CONTENT_SWAP_RATIO = 0.52;\nconst MAX_DEVICE_PIXEL_RATIO = 2;\nconst MIN_PHASE_MS = 80;\nconst HIDDEN_OPACITY = 0;\nconst VISIBLE_OPACITY = 1;\n\nconst VERTEX_SHADER = `\nattribute vec2 position;\nvarying vec2 vUv;\n\nvoid main() {\n vUv = position * 0.5 + 0.5;\n gl_Position = vec4(position, 0.0, 1.0);\n}\n`;\n\nconst FRAGMENT_SHADER = `\nprecision mediump float;\n\nvarying vec2 vUv;\n\nuniform vec2 uResolution;\nuniform float uClock;\nuniform float uTravel;\nuniform float uOpacity;\nuniform float uAxis;\nuniform float uForward;\nuniform float uSpan;\nuniform float uSoftness;\nuniform float uBend;\nuniform float uFacet;\nuniform float uBloom;\nuniform vec3 uInk;\nuniform vec3 uPearl;\nuniform vec3 uWarm;\nuniform vec3 uCool;\n\nfloat saturate(float value) {\n return clamp(value, 0.0, 1.0);\n}\n\nfloat triangleWave(float value) {\n return abs(fract(value) * 2.0 - 1.0);\n}\n\nfloat softRidge(float distance, float width) {\n return exp(-distance * distance / max(width, 0.0001));\n}\n\nvoid main() {\n vec2 uv = vUv;\n vec2 pixel = 1.0 / max(uResolution, vec2(1.0));\n\n float mainAxis = mix(uv.x, uv.y, uAxis);\n float crossAxis = mix(uv.y, uv.x, uAxis);\n mainAxis = mix(mainAxis, 1.0 - mainAxis, step(0.0, -uForward));\n\n float time = uClock * 0.42;\n float drift =\n sin(crossAxis * 7.0 + time * 1.8) * 0.024\n + sin(crossAxis * 17.0 - time * 1.1 + 1.6) * 0.010\n + sin((mainAxis + crossAxis) * 11.0 + time * 0.7) * 0.006;\n drift *= uBend;\n\n float travel = -0.34 + uTravel * 1.68;\n float d = mainAxis - travel - drift;\n float ad = abs(d);\n\n float field = 1.0 - smoothstep(uSpan, uSpan + uSoftness, ad);\n float inner = 1.0 - smoothstep(uSpan * 0.28, uSpan, ad);\n float frontRidge = softRidge(d - uSpan * 0.34, 0.0017 + pixel.x * 16.0);\n float backRidge = softRidge(d + uSpan * 0.54, 0.0035 + pixel.y * 14.0) * 0.55;\n\n float facetGrid = triangleWave(crossAxis * uFacet + mainAxis * 2.1 + time * 0.35);\n float facetCuts = smoothstep(0.18, 0.92, facetGrid);\n float diagonal = triangleWave((crossAxis - mainAxis * 0.36) * (uFacet * 0.44) - time * 0.2);\n float caustic = pow(1.0 - diagonal, 4.0) * 0.42 + pow(facetCuts, 2.2) * 0.22;\n\n float glass = saturate(field * (0.5 + inner * 0.42) + frontRidge * 0.52 + backRidge * 0.2);\n float gateIn = smoothstep(0.02, 0.14, uTravel);\n float gateOut = 1.0 - smoothstep(0.9, 1.0, uTravel);\n float envelope = gateIn * gateOut;\n\n vec3 base = mix(uCool, uWarm, saturate(crossAxis * 0.82 + drift * 4.5));\n vec3 prism = mix(base, uPearl, inner * 0.36 + frontRidge * 0.5);\n prism = mix(prism, uInk, smoothstep(0.55, 0.0, ad) * 0.1);\n prism += caustic * uBloom * mix(uWarm, uPearl, 0.38);\n prism += frontRidge * uBloom * mix(uWarm, uCool, 0.22) * 0.72;\n prism += backRidge * uBloom * uCool * 0.7;\n\n float vignette = smoothstep(0.0, 0.025, crossAxis) * smoothstep(1.0, 0.975, crossAxis);\n float alpha = saturate(glass * 0.64 + frontRidge * 0.24 + backRidge * 0.14);\n alpha *= uOpacity * envelope * vignette;\n\n gl_FragColor = vec4(prism * alpha, alpha);\n}\n`;\n\nconst FULLSCREEN_TRIANGLES = new Float32Array([\n -1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1,\n]);\n\nconst TONE_CONFIGS = {\n aperture: {\n bend: 0.42,\n bloom: 0.86,\n cool: [0.92, 0.78, 0.66],\n facet: 9.5,\n ink: [0.24, 0.16, 0.12],\n pearl: [1, 0.96, 0.88],\n softness: 0.076,\n span: 0.17,\n warm: [1, 0.62, 0.38],\n },\n beam: {\n bend: 0.12,\n bloom: 1.08,\n cool: [0.86, 0.72, 0.5],\n facet: 18,\n ink: [0.2, 0.13, 0.07],\n pearl: [1, 0.9, 0.68],\n softness: 0.038,\n span: 0.092,\n warm: [1, 0.48, 0.18],\n },\n chroma: {\n bend: 0.9,\n bloom: 0.78,\n cool: [0.38, 0.86, 0.84],\n facet: 13.5,\n ink: [0.18, 0.16, 0.3],\n pearl: [0.96, 0.88, 1],\n softness: 0.082,\n span: 0.15,\n warm: [1, 0.34, 0.72],\n },\n prism: {\n bend: 0.76,\n bloom: 0.58,\n cool: [0.28, 0.78, 0.86],\n facet: 12,\n ink: [0.2, 0.16, 0.26],\n pearl: [0.94, 0.82, 0.9],\n softness: 0.07,\n span: 0.14,\n warm: [0.98, 0.28, 0.58],\n },\n} as const satisfies Record<\n PrismSweepTone,\n {\n bend: number;\n bloom: number;\n cool: readonly [number, number, number];\n facet: number;\n ink: readonly [number, number, number];\n pearl: readonly [number, number, number];\n softness: number;\n span: number;\n warm: readonly [number, number, number];\n }\n>;\n\ninterface UniformMap {\n uAxis: WebGLUniformLocation | null;\n uBend: WebGLUniformLocation | null;\n uBloom: WebGLUniformLocation | null;\n uClock: WebGLUniformLocation | null;\n uCool: WebGLUniformLocation | null;\n uFacet: WebGLUniformLocation | null;\n uForward: WebGLUniformLocation | null;\n uInk: WebGLUniformLocation | null;\n uOpacity: WebGLUniformLocation | null;\n uPearl: WebGLUniformLocation | null;\n uResolution: WebGLUniformLocation | null;\n uSoftness: WebGLUniformLocation | null;\n uSpan: WebGLUniformLocation | null;\n uTravel: WebGLUniformLocation | null;\n uWarm: WebGLUniformLocation | null;\n}\n\ninterface ShaderController {\n destroy: () => void;\n getTravel: () => number;\n setDirection: (direction: PrismSweepDirection) => void;\n setOpacity: (opacity: number) => void;\n setTone: (tone: PrismSweepTone) => void;\n setTravel: (travel: number) => void;\n}\n\ninterface ShaderControllerState {\n animationFrame: number;\n buffer: WebGLBuffer | null;\n direction: PrismSweepDirection;\n gl: WebGLRenderingContext;\n opacity: number;\n program: WebGLProgram;\n startedAt: number;\n tone: PrismSweepTone;\n travel: number;\n uniforms: UniformMap;\n}\n\ninterface SweepPlayback {\n cancel: () => void;\n}\n\nconst clamp01 = (value: number) => Math.max(0, Math.min(1, value));\n\nconst directionToShader = (direction: PrismSweepDirection) => {\n switch (direction) {\n case \"right\":\n return { axis: 0, forward: -1 };\n case \"up\":\n return { axis: 1, forward: 1 };\n case \"down\":\n return { axis: 1, forward: -1 };\n default:\n return { axis: 0, forward: 1 };\n }\n};\n\nconst easePrismTravel = (progress: number) => {\n const clamped = clamp01(progress);\n return 1 - (1 - clamped) ** 3.35;\n};\n\nconst easeOpacityOut = (progress: number) => {\n const clamped = clamp01(progress);\n return clamped * clamped * (3 - 2 * clamped);\n};\n\nconst compileShader = (\n gl: WebGLRenderingContext,\n type: number,\n source: string\n) => {\n const shader = gl.createShader(type);\n if (!shader) {\n return null;\n }\n\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n gl.deleteShader(shader);\n return null;\n }\n\n return shader;\n};\n\nconst createProgram = (gl: WebGLRenderingContext) => {\n const vertex = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);\n const fragment = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);\n\n if (!(vertex && fragment)) {\n return null;\n }\n\n const program = gl.createProgram();\n if (!program) {\n return null;\n }\n\n gl.attachShader(program, vertex);\n gl.attachShader(program, fragment);\n gl.linkProgram(program);\n gl.deleteShader(vertex);\n gl.deleteShader(fragment);\n\n if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n gl.deleteProgram(program);\n return null;\n }\n\n return program;\n};\n\nconst resizeCanvas = (canvas: HTMLCanvasElement, gl: WebGLRenderingContext) => {\n const rect = canvas.getBoundingClientRect();\n const dpr = Math.min(window.devicePixelRatio || 1, MAX_DEVICE_PIXEL_RATIO);\n const width = Math.max(1, Math.round(rect.width * dpr));\n const height = Math.max(1, Math.round(rect.height * dpr));\n\n if (canvas.width !== width || canvas.height !== height) {\n canvas.width = width;\n canvas.height = height;\n }\n\n gl.viewport(0, 0, width, height);\n};\n\nconst getUniforms = (gl: WebGLRenderingContext, program: WebGLProgram) => ({\n uAxis: gl.getUniformLocation(program, \"uAxis\"),\n uBend: gl.getUniformLocation(program, \"uBend\"),\n uBloom: gl.getUniformLocation(program, \"uBloom\"),\n uClock: gl.getUniformLocation(program, \"uClock\"),\n uCool: gl.getUniformLocation(program, \"uCool\"),\n uFacet: gl.getUniformLocation(program, \"uFacet\"),\n uForward: gl.getUniformLocation(program, \"uForward\"),\n uInk: gl.getUniformLocation(program, \"uInk\"),\n uOpacity: gl.getUniformLocation(program, \"uOpacity\"),\n uPearl: gl.getUniformLocation(program, \"uPearl\"),\n uResolution: gl.getUniformLocation(program, \"uResolution\"),\n uSoftness: gl.getUniformLocation(program, \"uSoftness\"),\n uSpan: gl.getUniformLocation(program, \"uSpan\"),\n uTravel: gl.getUniformLocation(program, \"uTravel\"),\n uWarm: gl.getUniformLocation(program, \"uWarm\"),\n});\n\nconst setRgbUniform = (\n gl: WebGLRenderingContext,\n location: WebGLUniformLocation | null,\n value: readonly [number, number, number]\n) => {\n gl.uniform3f(location, value[0], value[1], value[2]);\n};\n\nconst drawShader = (\n canvas: HTMLCanvasElement,\n state: ShaderControllerState\n) => {\n const { gl, uniforms } = state;\n const directionUniforms = directionToShader(state.direction);\n const toneConfig = TONE_CONFIGS[state.tone];\n\n resizeCanvas(canvas, gl);\n gl.clearColor(0, 0, 0, 0);\n gl.clear(gl.COLOR_BUFFER_BIT);\n\n gl.uniform2f(uniforms.uResolution, canvas.width, canvas.height);\n gl.uniform1f(uniforms.uClock, (performance.now() - state.startedAt) / 1000);\n gl.uniform1f(uniforms.uTravel, state.travel);\n gl.uniform1f(uniforms.uOpacity, state.opacity);\n gl.uniform1f(uniforms.uAxis, directionUniforms.axis);\n gl.uniform1f(uniforms.uForward, directionUniforms.forward);\n gl.uniform1f(uniforms.uSpan, toneConfig.span);\n gl.uniform1f(uniforms.uSoftness, toneConfig.softness);\n gl.uniform1f(uniforms.uBend, toneConfig.bend);\n gl.uniform1f(uniforms.uFacet, toneConfig.facet);\n gl.uniform1f(uniforms.uBloom, toneConfig.bloom);\n setRgbUniform(gl, uniforms.uInk, toneConfig.ink);\n setRgbUniform(gl, uniforms.uPearl, toneConfig.pearl);\n setRgbUniform(gl, uniforms.uWarm, toneConfig.warm);\n setRgbUniform(gl, uniforms.uCool, toneConfig.cool);\n gl.drawArrays(gl.TRIANGLES, 0, 6);\n};\n\nconst createShaderController = (\n canvas: HTMLCanvasElement,\n direction: PrismSweepDirection,\n tone: PrismSweepTone\n) => {\n const gl = canvas.getContext(\"webgl\", {\n alpha: true,\n antialias: false,\n depth: false,\n premultipliedAlpha: true,\n preserveDrawingBuffer: false,\n stencil: false,\n });\n\n if (!gl) {\n return null;\n }\n\n const program = createProgram(gl);\n if (!program) {\n return null;\n }\n\n const buffer = gl.createBuffer();\n const position = gl.getAttribLocation(program, \"position\");\n\n // biome-ignore lint/correctness/useHookAtTopLevel: WebGLRenderingContext.useProgram is not a React hook.\n gl.useProgram(program);\n gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n gl.bufferData(gl.ARRAY_BUFFER, FULLSCREEN_TRIANGLES, gl.STATIC_DRAW);\n gl.enableVertexAttribArray(position);\n gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);\n gl.enable(gl.BLEND);\n gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);\n\n const state: ShaderControllerState = {\n animationFrame: 0,\n buffer,\n direction,\n gl,\n opacity: HIDDEN_OPACITY,\n program,\n startedAt: performance.now(),\n tone,\n travel: 0,\n uniforms: getUniforms(gl, program),\n };\n\n let destroyed = false;\n const tick = () => {\n if (destroyed) {\n return;\n }\n\n drawShader(canvas, state);\n state.animationFrame = requestAnimationFrame(tick);\n };\n\n state.animationFrame = requestAnimationFrame(tick);\n\n return {\n destroy: () => {\n destroyed = true;\n cancelAnimationFrame(state.animationFrame);\n state.gl.clear(state.gl.COLOR_BUFFER_BIT);\n if (state.buffer) {\n state.gl.deleteBuffer(state.buffer);\n }\n state.gl.deleteProgram(state.program);\n },\n getTravel: () => state.travel,\n setDirection: (nextDirection: PrismSweepDirection) => {\n state.direction = nextDirection;\n },\n setOpacity: (opacity: number) => {\n state.opacity = clamp01(opacity);\n },\n setTone: (nextTone: PrismSweepTone) => {\n state.tone = nextTone;\n },\n setTravel: (travel: number) => {\n state.travel = clamp01(travel);\n },\n } satisfies ShaderController;\n};\n\nconst useShaderController = ({\n canvasRef,\n direction,\n tone,\n}: {\n canvasRef: RefObject;\n direction: PrismSweepDirection;\n tone: PrismSweepTone;\n}) => {\n const controllerRef = useRef(null);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) {\n return;\n }\n\n const controller = createShaderController(canvas, direction, tone);\n controllerRef.current = controller;\n\n return () => {\n controller?.destroy();\n controllerRef.current = null;\n };\n }, [canvasRef, direction, tone]);\n\n useEffect(() => {\n controllerRef.current?.setDirection(direction);\n controllerRef.current?.setTone(tone);\n }, [direction, tone]);\n\n return controllerRef;\n};\n\nconst playFrameSweep = (\n controller: ShaderController,\n {\n direction,\n duration,\n midpoint,\n onComplete,\n onMidpoint,\n outroMs,\n }: {\n direction: PrismSweepDirection;\n duration: number;\n midpoint: number;\n onComplete: () => void;\n onMidpoint: () => void;\n outroMs: number;\n }\n): SweepPlayback => {\n let animationFrame = 0;\n let midpointReached = false;\n let cancelled = false;\n const startedAt = performance.now();\n const startTravel = controller.getTravel();\n const sweepMs = Math.max(MIN_PHASE_MS, duration * (1 - startTravel));\n\n controller.setDirection(direction);\n controller.setOpacity(VISIBLE_OPACITY);\n\n const finishSweep = () => {\n const outroStartedAt = performance.now();\n\n const fadeOut = () => {\n if (cancelled) {\n return;\n }\n\n const outroRaw = clamp01((performance.now() - outroStartedAt) / outroMs);\n controller.setOpacity(VISIBLE_OPACITY * (1 - easeOpacityOut(outroRaw)));\n\n if (outroRaw < 1) {\n animationFrame = requestAnimationFrame(fadeOut);\n return;\n }\n\n controller.setOpacity(HIDDEN_OPACITY);\n controller.setTravel(0);\n onComplete();\n };\n\n animationFrame = requestAnimationFrame(fadeOut);\n };\n\n const advance = () => {\n if (cancelled) {\n return;\n }\n\n const raw = clamp01((performance.now() - startedAt) / sweepMs);\n const nextTravel = startTravel + (1 - startTravel) * easePrismTravel(raw);\n controller.setTravel(nextTravel);\n\n if (!(midpointReached || nextTravel < midpoint)) {\n midpointReached = true;\n onMidpoint();\n }\n\n if (raw < 1) {\n animationFrame = requestAnimationFrame(advance);\n return;\n }\n\n if (!midpointReached) {\n onMidpoint();\n }\n controller.setTravel(1);\n finishSweep();\n };\n\n animationFrame = requestAnimationFrame(advance);\n\n return {\n cancel: () => {\n cancelled = true;\n cancelAnimationFrame(animationFrame);\n },\n };\n};\n\n/**\n * PrismSweepTransition — a frame-level route/state transition with a custom\n * faceted caustic shader tuned for SmoothUI previews.\n */\nconst PrismSweepTransition = ({\n children,\n className,\n direction = \"left\",\n duration = DEFAULT_DURATION_MS,\n onRest,\n tone = \"prism\",\n transitionKey,\n}: PrismSweepTransitionProps) => {\n const shouldReduceMotion = useReducedMotion();\n const canvasRef = useRef(null);\n const playbackRef = useRef(null);\n const [renderedChildren, setRenderedChildren] = useState(children);\n const [isSweeping, setIsSweeping] = useState(false);\n const previousKey = useRef(transitionKey);\n const controllerRef = useShaderController({ canvasRef, direction, tone });\n\n useEffect(() => {\n if (previousKey.current === transitionKey) {\n setRenderedChildren(children);\n return;\n }\n\n previousKey.current = transitionKey;\n playbackRef.current?.cancel();\n\n if (shouldReduceMotion) {\n setRenderedChildren(children);\n setIsSweeping(false);\n onRest?.();\n return;\n }\n\n const controller = controllerRef.current;\n if (!controller) {\n setRenderedChildren(children);\n setIsSweeping(false);\n onRest?.();\n return;\n }\n\n setIsSweeping(true);\n playbackRef.current = playFrameSweep(controller, {\n direction,\n duration: Math.max(MIN_PHASE_MS, duration),\n midpoint: CONTENT_SWAP_RATIO,\n onComplete: () => {\n setIsSweeping(false);\n playbackRef.current = null;\n onRest?.();\n },\n onMidpoint: () => setRenderedChildren(children),\n outroMs: OUTRO_MS,\n });\n\n return () => {\n playbackRef.current?.cancel();\n };\n }, [\n children,\n controllerRef,\n direction,\n duration,\n onRest,\n shouldReduceMotion,\n transitionKey,\n ]);\n\n return (\n \n
{renderedChildren}
\n \n \n );\n};\n\nexport default PrismSweepTransition;\n","path":"index.tsx","target":"components/smoothui/prism-sweep-transition/index.tsx","type":"registry:ui"}],"name":"prism-sweep-transition","registryDependencies":[],"title":"Prism Sweep Transition","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Animated product card component for ecommerce","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport SmoothButton from \"@/components/smoothui/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 bounce: 0.1,\n duration: 0.25,\n type: \"spring\" as const,\n};\n\nconst SPRING_BOUNCY = {\n bounce: 0.2,\n duration: 0.3,\n type: \"spring\" as const,\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 ) : null}\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 ) : null}\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","path":"index.tsx","target":"components/smoothui/product-card/index.tsx","type":"registry:ui"}],"name":"product-card","registryDependencies":["https://smoothui.dev/r/smooth-button.json"],"title":"Product Card","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":[],"description":"A radial SDF circle pattern transition inspired by the Codrops radial circles step.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport SdfBlobTransition from \"../sdf-blob-transition\";\n\nexport interface RadialCirclesTransitionProps {\n children: ReactNode;\n className?: string;\n duration?: number;\n onRest?: () => void;\n transitionKey: string | number;\n}\n\nconst RadialCirclesTransition = ({\n children,\n className,\n duration = 1120,\n onRest,\n transitionKey,\n}: RadialCirclesTransitionProps) => (\n \n {children}\n \n);\n\nexport default RadialCirclesTransition;\n","path":"index.tsx","target":"components/smoothui/radial-circles-transition/index.tsx","type":"registry:ui"}],"name":"radial-circles-transition","registryDependencies":["https://smoothui.dev/r/sdf-blob-transition.json"],"title":"Radial Circles Transition","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","radix-ui"],"description":"An animated Radio Group component for SmoothUI with selection indicator spring animation.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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 \"@/components/smoothui/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 bounce: 0.2,\n duration: 0.25,\n type: \"spring\" as const,\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 {/* biome-ignore lint/suspicious/noLeakedRender: both branches are ReactNode, which is exactly what a wrapper should render */}\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 ) : null}\n \n );\n}\n\nRadio.displayName = \"Radio\";\n\nexport default RadioGroup;\n","path":"index.tsx","target":"components/smoothui/radio-group/index.tsx","type":"registry:ui"}],"name":"radio-group","registryDependencies":["https://smoothui.dev/r/lib.json","https://smoothui.dev/r/tokens.json"],"title":"Radio Group","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A RevealText component for SmoothUI.","devDependencies":[],"files":[{"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 down: { opacity: 0, y: -24 },\n left: { opacity: 0, x: 24 },\n right: { opacity: 0, x: -24 },\n up: { opacity: 0, y: 24 },\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","path":"index.tsx","target":"components/smoothui/reveal-text/index.tsx","type":"registry:ui"}],"name":"reveal-text","registryDependencies":[],"title":"Reveal Text","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","lucide-react"],"description":"A ReviewsCarousel component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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 ) : null}\n {showIndicators ? (\n
\n {filteredReviews.map((review: Review, index: number) => (\n {\n setActiveIndex(index);\n }}\n type=\"button\"\n />\n ))}\n
\n ) : null}\n {showNavigation ? (\n \n ) : null}\n
\n ) : null}\n \n );\n}\n","path":"index.tsx","target":"components/smoothui/reviews-carousel/index.tsx","type":"registry:ui"}],"name":"reviews-carousel","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Reviews Carousel","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","lucide-react","@radix-ui/react-popover"],"description":"A RichPopover component for SmoothUI.","devDependencies":[],"files":[{"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 ) : null}\n {meta || Action ? (\n
\n {meta ? (\n \n {meta}\n \n ) : (\n \n )}\n {Action}\n
\n ) : null}\n\n {/* Tail */}\n \n \n \n \n \n );\n}\n","path":"index.tsx","target":"components/smoothui/rich-popover/index.tsx","type":"registry:ui"}],"name":"rich-popover","registryDependencies":[],"title":"Rich Popover","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A ScaleDownFade text animation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { motion, useInView, useReducedMotion } from \"motion/react\";\nimport { useRef } from \"react\";\n\nexport interface ScaleDownFadeProps {\n children: string;\n className?: string;\n /** Delay before the animation starts, in milliseconds. */\n delay?: number;\n /** Animate only once the text scrolls into view. */\n triggerOnView?: boolean;\n}\n\nconst DURATION_S = 0.52;\nconst MS = 1000;\nconst EASE = [0.22, 1, 0.36, 1] as const;\n\n/**\n * ScaleDownFade — subtle premium settle-in where the text enters slightly\n * scaled up and drifts down to its natural size. The whole text animates as\n * a single element. From the animate-text catalog (`scale-down-fade`).\n * Safe default for product UIs where copy should feel polished but not animated.\n */\nexport default function ScaleDownFade({\n children,\n className = \"\",\n delay = 0,\n triggerOnView = false,\n}: ScaleDownFadeProps) {\n const ref = useRef(null);\n const inView = useInView(ref, { once: true });\n const shouldReduceMotion = useReducedMotion();\n const play = (!triggerOnView || inView) && !shouldReduceMotion;\n\n return (\n \n {children}\n \n );\n}\n","path":"index.tsx","target":"components/smoothui/scale-down-fade/index.tsx","type":"registry:ui"}],"name":"scale-down-fade","registryDependencies":[],"title":"Scale Down Fade","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":[],"description":"A ScrambleHover component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport 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","path":"index.tsx","target":"components/smoothui/scramble-hover/index.tsx","type":"registry:ui"}],"name":"scramble-hover","registryDependencies":[],"title":"Scramble Hover","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A ScrollRevealParagraph component for SmoothUI.","devDependencies":[],"files":[{"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 offset: [\"start 0.9\", \"start 0.25\"],\n target: container,\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","path":"index.tsx","target":"components/smoothui/scroll-reveal-paragraph/index.tsx","type":"registry:ui"}],"name":"scroll-reveal-paragraph","registryDependencies":[],"title":"Scroll Reveal Paragraph","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A ScrollableCardStack component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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 blur,\n opacity,\n scale,\n y,\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 // Dynamic border width based on scale - from reference code\n borderWidth: `${2 / transform.scale}px`,\n filter: `blur(${transform.blur}px)`,\n height: `${cardHeight}px`,\n opacity: transform.opacity,\n pointerEvents: isActive ? \"auto\" : \"none\",\n transformOrigin: \"center center\",\n transitionDuration: shouldReduceMotion ? \"0ms\" : \"200ms\",\n transitionProperty: shouldReduceMotion\n ? \"none\"\n : \"opacity, filter\",\n transitionTimingFunction:\n \"cubic-bezier(0.645, 0.045, 0.355, 1)\",\n willChange: shouldReduceMotion\n ? undefined\n : \"opacity, filter, transform\",\n zIndex: transform.zIndex,\n }}\n tabIndex={isActive ? 0 : -1}\n transition={\n shouldReduceMotion\n ? { duration: 0 }\n : {\n damping: 20,\n duration: 0.25,\n mass: 0.5,\n stiffness: 250,\n type: \"spring\" as const,\n }\n }\n whileHover={\n shouldReduceMotion || !isActive\n ? {}\n : {\n scale: transform.scale * HOVER_SCALE_MULTIPLIER,\n transition: {\n damping: 20,\n duration: 0.25,\n mass: 0.5,\n stiffness: 250,\n type: \"spring\" as const,\n },\n }\n }\n >\n {/* Card Content */}\n \n {/* Scroll indicator */}\n {isScrolling && isActive ? (\n
\n ) : null}\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 damping: 20,\n mass: 0.5,\n stiffness: 250,\n type: \"spring\" as const,\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","path":"index.tsx","target":"components/smoothui/scrollable-card-stack/index.tsx","type":"registry:ui"}],"name":"scrollable-card-stack","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Scrollable Card Stack","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Design-tool style scrubber slider with animated thumb and built-in label","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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 : { bounce: 0.1, duration: 0.25, type: \"spring\" as const };\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 borderRadius: 8,\n height: 36,\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","path":"index.tsx","target":"components/smoothui/scrubber/index.tsx","type":"registry:ui"}],"name":"scrubber","registryDependencies":[],"title":"Scrubber","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A persistent WebGL SDF blob transition wrapper for route and state changes.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { useReducedMotion } from \"motion/react\";\nimport { type ReactNode, useEffect, useRef, useState } from \"react\";\n\nexport type SdfBlobVariant = \"circle\" | \"warped\" | \"merge\" | \"radial\" | \"final\";\n\nexport interface SdfBlobTransitionProps {\n children: ReactNode;\n className?: string;\n duration?: number;\n onRest?: () => void;\n transitionKey: string | number;\n variant?: SdfBlobVariant;\n}\n\nconst DEFAULT_DURATION_MS = 1120;\nconst MIDPOINT = 0.5;\nconst MAX_DPR = 2;\nconst VERTEX_SHADER =\n \"attribute vec2 a; void main(){ gl_Position = vec4(a, 0.0, 1.0); }\";\nconst FRAGMENT_SHADER = `\nprecision mediump float;\nuniform vec2 uRes;\nuniform float uTime;\nuniform float uProgress;\nuniform float uAlpha;\nuniform float uVariant;\n#define PI 3.14159265359\n\nfloat hash(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123); }\nfloat noise(vec2 p){\n vec2 i = floor(p);\n vec2 f = fract(p);\n float a = hash(i);\n float b = hash(i + vec2(1.0, 0.0));\n float c = hash(i + vec2(0.0, 1.0));\n float d = hash(i + vec2(1.0, 1.0));\n vec2 u = f * f * (3.0 - 2.0 * f);\n return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n}\n\nfloat circleSdf(vec2 p, vec2 c, float r){ return length(p - c) - r; }\nfloat smin(float a, float b, float k){\n float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);\n return mix(b, a, h) - k * h * (1.0 - h);\n}\n\nvoid main(){\n vec2 uv = gl_FragCoord.xy / uRes;\n vec2 aspect = vec2(uRes.x / uRes.y, 1.0);\n vec2 p = (uv - 0.5) * aspect;\n float progress = smoothstep(0.0, 1.0, uProgress);\n float grow = smoothstep(0.0, 0.86, progress);\n float exitFade = smoothstep(1.0, 0.72, progress);\n\n float wobble = noise(uv * 7.0 + uTime * 0.18) * 0.035;\n float ringNoise = noise(vec2(atan(p.y, p.x) * 2.0, uTime * 0.18)) * 0.075;\n float dCircle = circleSdf(p, vec2(0.0), 0.04 + grow * 0.64);\n float dWarped = circleSdf(p, vec2(0.0), 0.04 + grow * 0.62 + ringNoise * smoothstep(0.08, 0.96, progress));\n\n float m0 = circleSdf(p, vec2(-0.26, -0.08), 0.06 + grow * 0.42 + wobble);\n float m1 = circleSdf(p, vec2(0.24, 0.12), 0.06 + grow * 0.40 - wobble * 0.5);\n float dMerge = smin(m0, m1, 0.18);\n\n float angle = atan(p.y, p.x);\n float sector3 = 2.0 * PI / 3.0;\n float sector5 = 2.0 * PI / 5.0;\n float a3 = floor((angle + PI) / sector3 + 0.5) * sector3 - PI;\n float a5 = floor((angle + PI) / sector5 + 0.5) * sector5 - PI;\n float r0 = 0.17 + grow * 0.24;\n float r1 = 0.30 + grow * 0.18;\n float dR0 = circleSdf(p, vec2(cos(a3), sin(a3)) * r0, 0.04 + grow * 0.22 + wobble * 0.4);\n float dR1 = circleSdf(p, vec2(cos(a5), sin(a5)) * r1, 0.035 + grow * 0.18);\n float dRadial = smin(dR0, dR1, 0.14);\n\n float f0 = circleSdf(p, vec2(-0.28, -0.10), 0.08 + grow * 0.46 + wobble);\n float f1 = circleSdf(p, vec2(0.00, 0.16), 0.06 + grow * 0.42 - wobble * 0.5);\n float f2 = circleSdf(p, vec2(0.30, -0.06), 0.05 + grow * 0.40 + wobble * 0.6);\n float f3 = circleSdf(p, vec2(-0.02, -0.30), 0.04 + grow * 0.34);\n float dFinal = smin(smin(f0, f1, 0.18), smin(f2, f3, 0.16), 0.20);\n dFinal = smin(dFinal, dRadial, 0.16);\n\n float d = dFinal;\n if (uVariant < 0.5) {\n d = dCircle;\n } else if (uVariant < 1.5) {\n d = dWarped;\n } else if (uVariant < 2.5) {\n d = dMerge;\n } else if (uVariant < 3.5) {\n d = dRadial;\n }\n\n float edge = exp(-d * d * 160.0) * exitFade;\n float fill = smoothstep(0.08, -0.10, d) * smoothstep(0.0, 0.18, progress) * exitFade;\n float cell = hash(floor((uv + noise(uv * 11.0) * 0.01) * uRes / 7.0) + floor(uTime * 10.0));\n float flecks = step(0.78, cell) * edge * 0.22 * smoothstep(1.5, 4.0, uVariant);\n\n vec3 rose = vec3(1.0, 0.23, 0.58);\n vec3 apricot = vec3(1.0, 0.70, 0.38);\n vec3 mint = vec3(0.42, 0.94, 0.78);\n vec3 color = mix(rose, apricot, smoothstep(-0.35, 0.35, p.x + noise(uv * 5.0) * 0.18));\n color = mix(color, mint, smoothstep(0.12, 0.7, p.y + grow * 0.16));\n\n float alpha = (fill * 0.24 + edge * 0.72 + flecks) * uAlpha;\n gl_FragColor = vec4(color * alpha + vec3(1.0) * edge * 0.18 * uAlpha, clamp(alpha, 0.0, 0.9));\n}\n`;\nconst STRIP = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);\n\ninterface Playback {\n cancel: () => void;\n}\ninterface Controller {\n destroy: () => void;\n setAlpha: (alpha: number) => void;\n setProgress: (progress: number) => void;\n setVariant: (variant: SdfBlobVariant) => void;\n}\n\nconst clamp01 = (value: number) => Math.max(0, Math.min(1, value));\nconst easeOutQuart = (value: number) => 1 - (1 - value) ** 4;\nconst easeInOutCubic = (value: number) =>\n value < 0.5 ? 4 * value ** 3 : 1 - (-2 * value + 2) ** 3 / 2;\n\nconst compile = (gl: WebGLRenderingContext, type: number, source: string) => {\n const shader = gl.createShader(type);\n if (!shader) {\n return null;\n }\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n gl.deleteShader(shader);\n return null;\n }\n return shader;\n};\n\nconst resize = (canvas: HTMLCanvasElement, gl: WebGLRenderingContext) => {\n const rect = canvas.getBoundingClientRect();\n const dpr = Math.min(window.devicePixelRatio || 1, MAX_DPR);\n const width = Math.max(1, Math.round(rect.width * dpr));\n const height = Math.max(1, Math.round(rect.height * dpr));\n if (canvas.width !== width || canvas.height !== height) {\n canvas.width = width;\n canvas.height = height;\n }\n gl.viewport(0, 0, width, height);\n};\n\nconst variantToUniform = (variant: SdfBlobVariant) => {\n switch (variant) {\n case \"circle\":\n return 0;\n case \"warped\":\n return 1;\n case \"merge\":\n return 2;\n case \"radial\":\n return 3;\n default:\n return 4;\n }\n};\n\nconst createController = (\n canvas: HTMLCanvasElement,\n initialVariant: SdfBlobVariant\n): Controller | null => {\n const gl = canvas.getContext(\"webgl\", {\n alpha: true,\n antialias: false,\n premultipliedAlpha: true,\n });\n if (!gl) {\n return null;\n }\n const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX_SHADER);\n const fragment = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);\n const program = gl.createProgram();\n if (!(vertex && fragment && program)) {\n return null;\n }\n gl.attachShader(program, vertex);\n gl.attachShader(program, fragment);\n gl.linkProgram(program);\n gl.deleteShader(vertex);\n gl.deleteShader(fragment);\n if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n gl.deleteProgram(program);\n return null;\n }\n\n // biome-ignore lint/correctness/useHookAtTopLevel: WebGLRenderingContext.useProgram is not a React hook.\n gl.useProgram(program);\n const buffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n gl.bufferData(gl.ARRAY_BUFFER, STRIP, gl.STATIC_DRAW);\n const position = gl.getAttribLocation(program, \"a\");\n gl.enableVertexAttribArray(position);\n gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);\n gl.enable(gl.BLEND);\n gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);\n\n const uRes = gl.getUniformLocation(program, \"uRes\");\n const uTime = gl.getUniformLocation(program, \"uTime\");\n const uProgress = gl.getUniformLocation(program, \"uProgress\");\n const uAlpha = gl.getUniformLocation(program, \"uAlpha\");\n const uVariant = gl.getUniformLocation(program, \"uVariant\");\n const startedAt = performance.now();\n let progress = 0;\n let alpha = 0;\n let variant = initialVariant;\n let frame = 0;\n let destroyed = false;\n\n const tick = () => {\n if (destroyed) {\n return;\n }\n resize(canvas, gl);\n gl.clearColor(0, 0, 0, 0);\n gl.clear(gl.COLOR_BUFFER_BIT);\n gl.uniform2f(uRes, canvas.width, canvas.height);\n gl.uniform1f(uTime, (performance.now() - startedAt) / 1000);\n gl.uniform1f(uProgress, progress);\n gl.uniform1f(uAlpha, alpha);\n gl.uniform1f(uVariant, variantToUniform(variant));\n gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n frame = requestAnimationFrame(tick);\n };\n frame = requestAnimationFrame(tick);\n\n return {\n destroy: () => {\n destroyed = true;\n cancelAnimationFrame(frame);\n gl.clear(gl.COLOR_BUFFER_BIT);\n if (buffer) {\n gl.deleteBuffer(buffer);\n }\n gl.deleteProgram(program);\n },\n setAlpha: (nextAlpha: number) => {\n alpha = clamp01(nextAlpha);\n },\n setProgress: (nextProgress: number) => {\n progress = clamp01(nextProgress);\n },\n setVariant: (nextVariant: SdfBlobVariant) => {\n variant = nextVariant;\n },\n };\n};\n\nconst play = (\n controller: Controller,\n duration: number,\n onMidpoint: () => void,\n onComplete: () => void\n): Playback => {\n let frame = 0;\n let cancelled = false;\n let didSwap = false;\n const startedAt = performance.now();\n controller.setAlpha(1);\n\n const advance = () => {\n if (cancelled) {\n return;\n }\n const raw = clamp01((performance.now() - startedAt) / duration);\n const progress = easeOutQuart(raw);\n controller.setProgress(progress);\n if (!(didSwap || progress < MIDPOINT)) {\n didSwap = true;\n onMidpoint();\n }\n if (raw < 1) {\n frame = requestAnimationFrame(advance);\n return;\n }\n if (!didSwap) {\n onMidpoint();\n }\n const fadeStartedAt = performance.now();\n const fade = () => {\n if (cancelled) {\n return;\n }\n const fadeRaw = clamp01((performance.now() - fadeStartedAt) / 90);\n controller.setAlpha(1 - easeInOutCubic(fadeRaw));\n if (fadeRaw < 1) {\n frame = requestAnimationFrame(fade);\n return;\n }\n controller.setAlpha(0);\n controller.setProgress(0);\n onComplete();\n };\n frame = requestAnimationFrame(fade);\n };\n frame = requestAnimationFrame(advance);\n\n return {\n cancel: () => {\n cancelled = true;\n cancelAnimationFrame(frame);\n },\n };\n};\n\nconst SdfBlobTransition = ({\n children,\n className,\n duration = DEFAULT_DURATION_MS,\n onRest,\n transitionKey,\n variant = \"final\",\n}: SdfBlobTransitionProps) => {\n const shouldReduceMotion = useReducedMotion();\n const canvasRef = useRef(null);\n const controllerRef = useRef(null);\n const playbackRef = useRef(null);\n const previousKey = useRef(transitionKey);\n const [renderedChildren, setRenderedChildren] = useState(children);\n const [isActive, setIsActive] = useState(false);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) {\n return;\n }\n const controller = createController(canvas, variant);\n controllerRef.current = controller;\n return () => {\n playbackRef.current?.cancel();\n controller?.destroy();\n controllerRef.current = null;\n };\n }, [variant]);\n\n useEffect(() => {\n if (previousKey.current === transitionKey) {\n setRenderedChildren(children);\n return;\n }\n previousKey.current = transitionKey;\n playbackRef.current?.cancel();\n\n if (shouldReduceMotion) {\n setRenderedChildren(children);\n setIsActive(false);\n onRest?.();\n return;\n }\n\n const controller = controllerRef.current;\n if (!controller) {\n setRenderedChildren(children);\n onRest?.();\n return;\n }\n controller.setVariant(variant);\n setIsActive(true);\n playbackRef.current = play(\n controller,\n duration,\n () => setRenderedChildren(children),\n () => {\n setIsActive(false);\n playbackRef.current = null;\n onRest?.();\n }\n );\n }, [children, duration, onRest, shouldReduceMotion, transitionKey, variant]);\n\n return (\n \n
{renderedChildren}
\n \n \n );\n};\n\nexport default SdfBlobTransition;\n","path":"index.tsx","target":"components/smoothui/sdf-blob-transition/index.tsx","type":"registry:ui"}],"name":"sdf-blob-transition","registryDependencies":[],"title":"Sdf Blob Transition","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":[],"description":"A clean SDF circle reveal based on the first Codrops shader step.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport SdfBlobTransition from \"../sdf-blob-transition\";\n\nexport interface SdfCircleTransitionProps {\n children: ReactNode;\n className?: string;\n duration?: number;\n onRest?: () => void;\n transitionKey: string | number;\n}\n\nconst SdfCircleTransition = ({\n children,\n className,\n duration = 1120,\n onRest,\n transitionKey,\n}: SdfCircleTransitionProps) => (\n \n {children}\n \n);\n\nexport default SdfCircleTransition;\n","path":"index.tsx","target":"components/smoothui/sdf-circle-transition/index.tsx","type":"registry:ui"}],"name":"sdf-circle-transition","registryDependencies":["https://smoothui.dev/r/sdf-blob-transition.json"],"title":"Sdf Circle Transition","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","lucide-react"],"description":"A SearchableDropdown component for SmoothUI.","devDependencies":[],"files":[{"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({ left: 0, top: 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 itemLabel = item.label.toLowerCase();\n const description = item.description?.toLowerCase();\n\n if (itemLabel.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 left: rect.left,\n top: rect.bottom + 4,\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 left: rect.left,\n top: rect.bottom + 4,\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 ) : null}\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 ) : null}\n
\n {item.label}\n {item.description ? (\n \n {item.description}\n \n ) : null}\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 ) : null}\n \n );\n\n return (\n <>\n
\n \n \n {String(selectedItem ? selectedItem.label : label)}\n \n \n \n \n \n
\n {typeof window !== \"undefined\" &&\n createPortal(dropdownContent, document.body)}\n \n );\n}\n","path":"index.tsx","target":"components/smoothui/searchable-dropdown/index.tsx","type":"registry:ui"}],"name":"searchable-dropdown","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Searchable Dropdown","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"An animated Select dropdown component for SmoothUI wrapping Radix Select with smooth animations.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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 \"@/components/smoothui/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({ left: 0, top: 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 left: rect.left,\n top: rect.bottom + DROPDOWN_OFFSET,\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 left: rect.left,\n top: rect.bottom + DROPDOWN_OFFSET,\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, itemIndex: number) => {\n const isSelected = opt.value === selectedValue;\n const isFocused = itemIndex === focusedIndex;\n\n return (\n \n handleSelect(opt)}\n onMouseEnter={() => setFocusedIndex(itemIndex)}\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 : null}\n
\n \n
\n ) : null}\n \n );\n\n // ---------------------------------------------------------------------------\n // Main render\n // ---------------------------------------------------------------------------\n\n return (\n <>\n
\n {/* Hidden native input for form submission */}\n {name ? (\n \n ) : null}\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","path":"index.tsx","target":"components/smoothui/select/index.tsx","type":"registry:ui"}],"name":"select","registryDependencies":["https://smoothui.dev/r/lib.json"],"title":"Select","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":[],"description":"Demo 3 adaptation: noisy circular reveal with radial interpolation.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport ShaderRevealTransition from \"../shader-reveal-transition\";\n\nexport interface ShaderRevealCircleTransitionProps {\n children: ReactNode;\n className?: string;\n duration?: number;\n onRest?: () => void;\n transitionKey: string | number;\n}\n\nconst ShaderRevealCircleTransition = ({\n children,\n className,\n duration = 1080,\n onRest,\n transitionKey,\n}: ShaderRevealCircleTransitionProps) => (\n \n {children}\n \n);\n\nexport default ShaderRevealCircleTransition;\n","path":"index.tsx","target":"components/smoothui/shader-reveal-circle-transition/index.tsx","type":"registry:ui"}],"name":"shader-reveal-circle-transition","registryDependencies":["https://smoothui.dev/r/shader-reveal-transition.json"],"title":"Shader Reveal Circle Transition","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":[],"description":"Demo 5 adaptation: luminance-style vertical displacement translated into a shader overlay.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport ShaderRevealTransition from \"../shader-reveal-transition\";\n\nexport interface ShaderRevealLumaTransitionProps {\n children: ReactNode;\n className?: string;\n duration?: number;\n onRest?: () => void;\n transitionKey: string | number;\n}\n\nconst ShaderRevealLumaTransition = ({\n children,\n className,\n duration = 1080,\n onRest,\n transitionKey,\n}: ShaderRevealLumaTransitionProps) => (\n \n {children}\n \n);\n\nexport default ShaderRevealLumaTransition;\n","path":"index.tsx","target":"components/smoothui/shader-reveal-luma-transition/index.tsx","type":"registry:ui"}],"name":"shader-reveal-luma-transition","registryDependencies":["https://smoothui.dev/r/shader-reveal-transition.json"],"title":"Shader Reveal Luma Transition","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":[],"description":"Demo 1 adaptation: 4D-noise threshold transition with an organic shader gate.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport ShaderRevealTransition from \"../shader-reveal-transition\";\n\nexport interface ShaderRevealNoiseTransitionProps {\n children: ReactNode;\n className?: string;\n duration?: number;\n onRest?: () => void;\n transitionKey: string | number;\n}\n\nconst ShaderRevealNoiseTransition = ({\n children,\n className,\n duration = 1080,\n onRest,\n transitionKey,\n}: ShaderRevealNoiseTransitionProps) => (\n \n {children}\n \n);\n\nexport default ShaderRevealNoiseTransition;\n","path":"index.tsx","target":"components/smoothui/shader-reveal-noise-transition/index.tsx","type":"registry:ui"}],"name":"shader-reveal-noise-transition","registryDependencies":["https://smoothui.dev/r/shader-reveal-transition.json"],"title":"Shader Reveal Noise Transition","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":[],"description":"Demo 6 adaptation: rotated displacement vectors with a planetary swirl feel.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport ShaderRevealTransition from \"../shader-reveal-transition\";\n\nexport interface ShaderRevealPlanetaryTransitionProps {\n children: ReactNode;\n className?: string;\n duration?: number;\n onRest?: () => void;\n transitionKey: string | number;\n}\n\nconst ShaderRevealPlanetaryTransition = ({\n children,\n className,\n duration = 1080,\n onRest,\n transitionKey,\n}: ShaderRevealPlanetaryTransitionProps) => (\n \n {children}\n \n);\n\nexport default ShaderRevealPlanetaryTransition;\n","path":"index.tsx","target":"components/smoothui/shader-reveal-planetary-transition/index.tsx","type":"registry:ui"}],"name":"shader-reveal-planetary-transition","registryDependencies":["https://smoothui.dev/r/shader-reveal-transition.json"],"title":"Shader Reveal Planetary Transition","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":[],"description":"Demo 8 adaptation: procedural noise push/pull displacement.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport ShaderRevealTransition from \"../shader-reveal-transition\";\n\nexport interface ShaderRevealPushTransitionProps {\n children: ReactNode;\n className?: string;\n duration?: number;\n onRest?: () => void;\n transitionKey: string | number;\n}\n\nconst ShaderRevealPushTransition = ({\n children,\n className,\n duration = 1080,\n onRest,\n transitionKey,\n}: ShaderRevealPushTransitionProps) => (\n \n {children}\n \n);\n\nexport default ShaderRevealPushTransition;\n","path":"index.tsx","target":"components/smoothui/shader-reveal-push-transition/index.tsx","type":"registry:ui"}],"name":"shader-reveal-push-transition","registryDependencies":["https://smoothui.dev/r/shader-reveal-transition.json"],"title":"Shader Reveal Push Transition","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":[],"description":"Demo 7 adaptation: divided UV stripe displacement with diagonal motion.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport ShaderRevealTransition from \"../shader-reveal-transition\";\n\nexport interface ShaderRevealStripesTransitionProps {\n children: ReactNode;\n className?: string;\n duration?: number;\n onRest?: () => void;\n transitionKey: string | number;\n}\n\nconst ShaderRevealStripesTransition = ({\n children,\n className,\n duration = 1080,\n onRest,\n transitionKey,\n}: ShaderRevealStripesTransitionProps) => (\n \n {children}\n \n);\n\nexport default ShaderRevealStripesTransition;\n","path":"index.tsx","target":"components/smoothui/shader-reveal-stripes-transition/index.tsx","type":"registry:ui"}],"name":"shader-reveal-stripes-transition","registryDependencies":["https://smoothui.dev/r/shader-reveal-transition.json"],"title":"Shader Reveal Stripes Transition","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A shared WebGL transition engine with eight shader-driven reveal variants.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { useReducedMotion } from \"motion/react\";\nimport { type ReactNode, useEffect, useRef, useState } from \"react\";\n\nexport type ShaderRevealVariant =\n | \"noise\"\n | \"zoom\"\n | \"circle\"\n | \"wipe\"\n | \"luma\"\n | \"planetary\"\n | \"stripes\"\n | \"push\";\n\nexport interface ShaderRevealTransitionProps {\n children: ReactNode;\n className?: string;\n duration?: number;\n onRest?: () => void;\n transitionKey: string | number;\n variant?: ShaderRevealVariant;\n}\n\nconst DEFAULT_DURATION_MS = 1080;\nconst MIDPOINT = 0.5;\nconst MAX_DPR = 2;\nconst VERTEX_SHADER =\n \"attribute vec2 a; void main(){ gl_Position = vec4(a, 0.0, 1.0); }\";\nconst FRAGMENT_SHADER = `\nprecision mediump float;\nuniform vec2 uRes;\nuniform float uTime;\nuniform float uProgress;\nuniform float uAlpha;\nuniform float uVariant;\n#define PI 3.14159265359\n\nfloat hash(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123); }\nfloat noise(vec2 p){\n vec2 i = floor(p);\n vec2 f = fract(p);\n float a = hash(i);\n float b = hash(i + vec2(1.0, 0.0));\n float c = hash(i + vec2(0.0, 1.0));\n float d = hash(i + vec2(1.0, 1.0));\n vec2 u = f * f * (3.0 - 2.0 * f);\n return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n}\nfloat parabola(float x, float k){ return pow(4.0 * x * (1.0 - x), k); }\nmat2 rot(float a){ float s = sin(a); float c = cos(a); return mat2(c, -s, s, c); }\n\nvec4 paint(vec2 uv, float mask, vec3 color, float glow){\n float exitFade = smoothstep(1.0, 0.76, uProgress);\n float entryFade = smoothstep(0.0, 0.10, uProgress);\n float alpha = clamp((mask * 0.76 + glow * 0.24) * entryFade * exitFade * uAlpha, 0.0, 0.92);\n return vec4(color * alpha + vec3(1.0) * glow * 0.16 * uAlpha, alpha);\n}\n\nvoid main(){\n vec2 uv = gl_FragCoord.xy / uRes;\n vec2 aspect = vec2(uRes.x / uRes.y, 1.0);\n vec2 p = (uv - 0.5) * aspect;\n float progress = smoothstep(0.0, 1.0, uProgress);\n vec3 pink = vec3(1.0, 0.20, 0.58);\n vec3 cyan = vec3(0.12, 0.86, 1.0);\n vec3 gold = vec3(1.0, 0.72, 0.28);\n vec3 mint = vec3(0.45, 1.0, 0.72);\n\n float mask = 0.0;\n float glow = 0.0;\n vec3 color = mix(pink, cyan, uv.x);\n\n if (uVariant < 0.5) {\n // Demo 1 — turbulent noise threshold. Chunky, organic gate.\n float n1 = noise(uv * vec2(18.0, 12.0) + uTime * 0.42);\n float n2 = noise(uv * vec2(52.0, 44.0) - uTime * 0.18);\n float threshold = progress * 1.35 - 0.18;\n float gate = smoothstep(threshold - 0.18, threshold + 0.18, uv.x * 0.62 + uv.y * 0.28 + n1 * 0.34 + n2 * 0.08);\n mask = pow(gate * (1.0 - gate) * 4.0, 0.74) + step(0.74, n2) * gate * 0.22;\n glow = exp(-pow(uv.x + n1 * 0.26 - progress, 2.0) * 26.0);\n color = mix(vec3(1.0, 0.10, 0.55), vec3(0.18, 1.0, 0.78), n1);\n } else if (uVariant < 1.5) {\n // Demo 2 — zoom mix. Large central lens, not a sweep.\n float yGate = smoothstep(0.0, 1.0, progress * 2.15 + uv.y - 1.08);\n vec2 z = (uv - 0.5) * mix(1.75, 0.35, yGate) + 0.5;\n float lens = 1.0 - smoothstep(0.12, 0.78, length((z - 0.5) * aspect));\n float seam = exp(-pow(yGate - 0.5, 2.0) * 20.0);\n mask = (lens * 0.72 + seam * 0.42) * parabola(progress, 0.42);\n glow = seam * 0.9 + lens * 0.25;\n color = mix(vec3(1.0, 0.80, 0.34), vec3(0.70, 0.92, 1.0), yGate);\n } else if (uVariant < 2.5) {\n // Demo 3 — noisy circular reveal.\n float n = noise(uv * 9.0 + uTime * 0.25);\n float radius = progress * 1.08 + n * 0.045;\n float d = length(p) - radius * 0.72;\n mask = exp(-d * d * 42.0) + smoothstep(0.08, -0.12, d) * 0.18;\n glow = exp(-d * d * 140.0);\n color = mix(vec3(1.0, 0.22, 0.58), vec3(1.0, 0.75, 0.32), atan(p.y, p.x) / PI * 0.5 + 0.5);\n } else if (uVariant < 3.5) {\n // Demo 4 — displacement wipe. Narrow noisy blade.\n float n = noise(uv * vec2(12.0, 26.0) + vec2(uTime * 0.26, -uTime * 0.12));\n float blade = progress * 1.32 - 0.16 + n * 0.11;\n float edge = blade - uv.x;\n float front = exp(-edge * edge * 120.0);\n float fillSide = smoothstep(-0.03, 0.16, edge) * 0.18;\n mask = front * 0.92 + fillSide;\n glow = front;\n color = mix(vec3(0.12, 0.92, 1.0), vec3(1.0, 1.0, 1.0), front * 0.38);\n } else if (uVariant < 4.5) {\n // Demo 5 — luminance displacement. Horizontal ribbons pulled vertically.\n float lum = noise(uv * 5.0 + vec2(0.0, uTime * 0.22));\n float displacedY = uv.y + progress * (lum - 0.5) * 0.55;\n float ribbons = sin(displacedY * 58.0 + uTime * 1.25) * 0.5 + 0.5;\n float fine = sin(displacedY * 132.0 - uTime * 1.8) * 0.5 + 0.5;\n float window = smoothstep(0.03, 0.5, progress) * smoothstep(1.0, 0.72, progress);\n mask = (smoothstep(0.58, 0.92, ribbons) * 0.74 + smoothstep(0.76, 0.98, fine) * 0.22) * window;\n glow = smoothstep(0.84, 1.0, ribbons) * window;\n color = mix(vec3(1.0, 0.68, 0.22), vec3(1.0, 0.20, 0.62), lum);\n } else if (uVariant < 5.5) {\n // Demo 6 — planetary rotated displacement. Spiral vortex.\n vec2 disp = vec2(noise(uv * 5.5 + uTime * 0.12), noise(uv * 5.5 + 4.2 - uTime * 0.10)) - 0.5;\n vec2 q = rot(PI * 0.25) * (p + disp * 0.44 * parabola(progress, 0.55));\n float ang = atan(q.y, q.x);\n float rr = length(q);\n float arms = sin(ang * 5.0 + rr * 18.0 - uTime * 1.8);\n float core = 1.0 - smoothstep(0.0, 0.42, rr);\n mask = (smoothstep(0.08, 0.92, arms) * 0.72 + core * 0.38) * parabola(progress, 0.58);\n glow = exp(-abs(arms) * 1.5) * parabola(progress, 0.85);\n color = mix(vec3(0.10, 0.88, 1.0), vec3(1.0, 0.66, 0.18), rr + core * 0.35);\n } else if (uVariant < 6.5) {\n // Demo 7 — divided UV stripe displacement. Barcode shutter.\n vec2 divided = fract(uv * vec2(42.0, 1.0));\n float stripeCore = step(0.18, divided.x) * step(divided.x, 0.62);\n float diagonal = uv.x + uv.y * 0.18 + divided.x * 0.06;\n float sweep = smoothstep(-0.10, 1.12, progress * 1.32 - diagonal + 0.18);\n float shutter = stripeCore * sweep * smoothstep(0.04, 0.56, progress) * smoothstep(1.0, 0.78, progress);\n mask = shutter * 0.92;\n glow = stripeCore * exp(-pow(progress - uv.x, 2.0) * 30.0) * 0.86;\n color = mix(vec3(1.0, 0.15, 0.55), vec3(0.12, 0.88, 1.0), divided.x);\n } else {\n // Demo 8 — noise push/pull. Vertical flow with directional pressure.\n float hn = noise(uv * uRes / 115.0 + uTime * 0.12);\n vec2 centerDir = normalize(vec2(0.5) - uv + 0.001);\n float pull = centerDir.y * (1.0 + hn * 0.7) * parabola(progress, 0.62);\n float bands = sin((uv.y + pull * 0.52) * 28.0 + hn * 5.0);\n float pressure = smoothstep(-0.22, 0.96, bands) * parabola(progress, 0.62);\n float verticalGlow = exp(-pow(uv.y - (0.5 + pull * 0.22), 2.0) * 18.0);\n mask = pressure * 0.78 + verticalGlow * 0.22;\n glow = verticalGlow * pressure;\n color = mix(vec3(0.48, 1.0, 0.74), vec3(1.0, 0.22, 0.58), hn);\n }\n\n gl_FragColor = paint(uv, mask, color, glow);\n}\n`;\nconst STRIP = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);\n\ninterface Playback {\n cancel: () => void;\n}\ninterface Controller {\n destroy: () => void;\n setAlpha: (alpha: number) => void;\n setProgress: (progress: number) => void;\n setVariant: (variant: ShaderRevealVariant) => void;\n}\n\nconst clamp01 = (value: number) => Math.max(0, Math.min(1, value));\nconst easeOutQuart = (value: number) => 1 - (1 - value) ** 4;\nconst easeInOutCubic = (value: number) =>\n value < 0.5 ? 4 * value ** 3 : 1 - (-2 * value + 2) ** 3 / 2;\n\nconst variantToUniform = (variant: ShaderRevealVariant) => {\n switch (variant) {\n case \"noise\":\n return 0;\n case \"zoom\":\n return 1;\n case \"circle\":\n return 2;\n case \"wipe\":\n return 3;\n case \"luma\":\n return 4;\n case \"planetary\":\n return 5;\n case \"stripes\":\n return 6;\n default:\n return 7;\n }\n};\n\nconst compile = (gl: WebGLRenderingContext, type: number, source: string) => {\n const shader = gl.createShader(type);\n if (!shader) {\n return null;\n }\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n gl.deleteShader(shader);\n return null;\n }\n return shader;\n};\n\nconst resize = (canvas: HTMLCanvasElement, gl: WebGLRenderingContext) => {\n const rect = canvas.getBoundingClientRect();\n const dpr = Math.min(window.devicePixelRatio || 1, MAX_DPR);\n const width = Math.max(1, Math.round(rect.width * dpr));\n const height = Math.max(1, Math.round(rect.height * dpr));\n if (canvas.width !== width || canvas.height !== height) {\n canvas.width = width;\n canvas.height = height;\n }\n gl.viewport(0, 0, width, height);\n};\n\nconst createController = (\n canvas: HTMLCanvasElement,\n initialVariant: ShaderRevealVariant\n): Controller | null => {\n const gl = canvas.getContext(\"webgl\", {\n alpha: true,\n antialias: false,\n premultipliedAlpha: true,\n });\n if (!gl) {\n return null;\n }\n const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX_SHADER);\n const fragment = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);\n const program = gl.createProgram();\n if (!(vertex && fragment && program)) {\n return null;\n }\n gl.attachShader(program, vertex);\n gl.attachShader(program, fragment);\n gl.linkProgram(program);\n gl.deleteShader(vertex);\n gl.deleteShader(fragment);\n if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n gl.deleteProgram(program);\n return null;\n }\n\n // biome-ignore lint/correctness/useHookAtTopLevel: WebGLRenderingContext.useProgram is not a React hook.\n gl.useProgram(program);\n const buffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n gl.bufferData(gl.ARRAY_BUFFER, STRIP, gl.STATIC_DRAW);\n const position = gl.getAttribLocation(program, \"a\");\n gl.enableVertexAttribArray(position);\n gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);\n gl.enable(gl.BLEND);\n gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);\n\n const uRes = gl.getUniformLocation(program, \"uRes\");\n const uTime = gl.getUniformLocation(program, \"uTime\");\n const uProgress = gl.getUniformLocation(program, \"uProgress\");\n const uAlpha = gl.getUniformLocation(program, \"uAlpha\");\n const uVariant = gl.getUniformLocation(program, \"uVariant\");\n const startedAt = performance.now();\n let progress = 0;\n let alpha = 0;\n let variant = initialVariant;\n let frame = 0;\n let destroyed = false;\n\n const tick = () => {\n if (destroyed) {\n return;\n }\n resize(canvas, gl);\n gl.clearColor(0, 0, 0, 0);\n gl.clear(gl.COLOR_BUFFER_BIT);\n gl.uniform2f(uRes, canvas.width, canvas.height);\n gl.uniform1f(uTime, (performance.now() - startedAt) / 1000);\n gl.uniform1f(uProgress, progress);\n gl.uniform1f(uAlpha, alpha);\n gl.uniform1f(uVariant, variantToUniform(variant));\n gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n frame = requestAnimationFrame(tick);\n };\n frame = requestAnimationFrame(tick);\n\n return {\n destroy: () => {\n destroyed = true;\n cancelAnimationFrame(frame);\n gl.clear(gl.COLOR_BUFFER_BIT);\n if (buffer) {\n gl.deleteBuffer(buffer);\n }\n gl.deleteProgram(program);\n },\n setAlpha: (nextAlpha: number) => {\n alpha = clamp01(nextAlpha);\n },\n setProgress: (nextProgress: number) => {\n progress = clamp01(nextProgress);\n },\n setVariant: (nextVariant: ShaderRevealVariant) => {\n variant = nextVariant;\n },\n };\n};\n\nconst play = (\n controller: Controller,\n duration: number,\n onMidpoint: () => void,\n onComplete: () => void\n): Playback => {\n let frame = 0;\n let cancelled = false;\n let didSwap = false;\n const startedAt = performance.now();\n controller.setAlpha(1);\n\n const advance = () => {\n if (cancelled) {\n return;\n }\n const raw = clamp01((performance.now() - startedAt) / duration);\n const progress = easeOutQuart(raw);\n controller.setProgress(progress);\n if (!(didSwap || progress < MIDPOINT)) {\n didSwap = true;\n onMidpoint();\n }\n if (raw < 1) {\n frame = requestAnimationFrame(advance);\n return;\n }\n if (!didSwap) {\n onMidpoint();\n }\n const fadeStartedAt = performance.now();\n const fade = () => {\n if (cancelled) {\n return;\n }\n const fadeRaw = clamp01((performance.now() - fadeStartedAt) / 90);\n controller.setAlpha(1 - easeInOutCubic(fadeRaw));\n if (fadeRaw < 1) {\n frame = requestAnimationFrame(fade);\n return;\n }\n controller.setAlpha(0);\n controller.setProgress(0);\n onComplete();\n };\n frame = requestAnimationFrame(fade);\n };\n frame = requestAnimationFrame(advance);\n\n return {\n cancel: () => {\n cancelled = true;\n cancelAnimationFrame(frame);\n },\n };\n};\n\nconst ShaderRevealTransition = ({\n children,\n className,\n duration = DEFAULT_DURATION_MS,\n onRest,\n transitionKey,\n variant = \"noise\",\n}: ShaderRevealTransitionProps) => {\n const shouldReduceMotion = useReducedMotion();\n const canvasRef = useRef(null);\n const controllerRef = useRef(null);\n const playbackRef = useRef(null);\n const previousKey = useRef(transitionKey);\n const [renderedChildren, setRenderedChildren] = useState(children);\n const [isActive, setIsActive] = useState(false);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) {\n return;\n }\n const controller = createController(canvas, variant);\n controllerRef.current = controller;\n return () => {\n playbackRef.current?.cancel();\n controller?.destroy();\n controllerRef.current = null;\n };\n }, [variant]);\n\n useEffect(() => {\n if (previousKey.current === transitionKey) {\n setRenderedChildren(children);\n return;\n }\n previousKey.current = transitionKey;\n playbackRef.current?.cancel();\n\n if (shouldReduceMotion) {\n setRenderedChildren(children);\n setIsActive(false);\n onRest?.();\n return;\n }\n\n const controller = controllerRef.current;\n if (!controller) {\n setRenderedChildren(children);\n onRest?.();\n return;\n }\n controller.setVariant(variant);\n setIsActive(true);\n playbackRef.current = play(\n controller,\n duration,\n () => setRenderedChildren(children),\n () => {\n setIsActive(false);\n playbackRef.current = null;\n onRest?.();\n }\n );\n }, [children, duration, onRest, shouldReduceMotion, transitionKey, variant]);\n\n return (\n \n
{renderedChildren}
\n \n
\n );\n};\n\nexport default ShaderRevealTransition;\n","path":"index.tsx","target":"components/smoothui/shader-reveal-transition/index.tsx","type":"registry:ui"}],"name":"shader-reveal-transition","registryDependencies":[],"title":"Shader Reveal Transition","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":[],"description":"Demo 4 adaptation: displacement-noise horizontal wipe with a sharp eased edge.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport ShaderRevealTransition from \"../shader-reveal-transition\";\n\nexport interface ShaderRevealWipeTransitionProps {\n children: ReactNode;\n className?: string;\n duration?: number;\n onRest?: () => void;\n transitionKey: string | number;\n}\n\nconst ShaderRevealWipeTransition = ({\n children,\n className,\n duration = 1080,\n onRest,\n transitionKey,\n}: ShaderRevealWipeTransitionProps) => (\n \n {children}\n \n);\n\nexport default ShaderRevealWipeTransition;\n","path":"index.tsx","target":"components/smoothui/shader-reveal-wipe-transition/index.tsx","type":"registry:ui"}],"name":"shader-reveal-wipe-transition","registryDependencies":["https://smoothui.dev/r/shader-reveal-transition.json"],"title":"Shader Reveal Wipe Transition","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":[],"description":"Demo 2 adaptation: vertical-progress zoom mix translated into a UI frame transition.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport ShaderRevealTransition from \"../shader-reveal-transition\";\n\nexport interface ShaderRevealZoomTransitionProps {\n children: ReactNode;\n className?: string;\n duration?: number;\n onRest?: () => void;\n transitionKey: string | number;\n}\n\nconst ShaderRevealZoomTransition = ({\n children,\n className,\n duration = 1080,\n onRest,\n transitionKey,\n}: ShaderRevealZoomTransitionProps) => (\n \n {children}\n \n);\n\nexport default ShaderRevealZoomTransition;\n","path":"index.tsx","target":"components/smoothui/shader-reveal-zoom-transition/index.tsx","type":"registry:ui"}],"name":"shader-reveal-zoom-transition","registryDependencies":["https://smoothui.dev/r/shader-reveal-transition.json"],"title":"Shader Reveal Zoom Transition","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A SharedAxisX text animation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useState } from \"react\";\n\nexport interface SharedAxisXProps {\n className?: string;\n /** Interval between phrase swaps in milliseconds. */\n interval?: number;\n phrases: string[];\n}\n\nconst ENTER_EASE = [0.2, 0, 0, 1] as const;\nconst EXIT_EASE = [0.4, 0, 1, 1] as const;\n\n/**\n * SharedAxisX — horizontal shared-axis phrase transition inspired by Google Material.\n * Outgoing phrase slides left as the next slides in from the right.\n * From the animate-text catalog (`shared-axis-x`).\n */\nexport default function SharedAxisX({\n phrases,\n className = \"\",\n interval = 2500,\n}: SharedAxisXProps) {\n const [index, setIndex] = useState(0);\n const shouldReduceMotion = useReducedMotion();\n\n useEffect(() => {\n const id = setInterval(() => {\n setIndex((prev) => (prev + 1) % phrases.length);\n }, interval);\n return () => clearInterval(id);\n }, [interval, phrases.length]);\n\n return (\n \n \n \n {phrases[index]}\n \n \n \n );\n}\n","path":"index.tsx","target":"components/smoothui/shared-axis-x/index.tsx","type":"registry:ui"}],"name":"shared-axis-x","registryDependencies":[],"title":"Shared Axis X","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A SharedAxisY text animation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useState } from \"react\";\n\nexport interface SharedAxisYProps {\n className?: string;\n /** Interval between phrase swaps in milliseconds. */\n interval?: number;\n phrases: string[];\n}\n\nconst STAGGER_S = 0.078;\n\n/**\n * SharedAxisY — per-word hard-cut staircase transition.\n * Each word flips in/out with stepped timing, creating a sharp editorial cascade.\n * From the animate-text catalog (`shared-axis-y`, display: \"Word Cut Staircase\").\n */\nexport default function SharedAxisY({\n phrases,\n className = \"\",\n interval = 2500,\n}: SharedAxisYProps) {\n const [index, setIndex] = useState(0);\n const shouldReduceMotion = useReducedMotion();\n\n useEffect(() => {\n const id = setInterval(() => {\n setIndex((prev) => (prev + 1) % phrases.length);\n }, interval);\n return () => clearInterval(id);\n }, [interval, phrases.length]);\n\n const words = (phrases[index] ?? \"\").split(\" \");\n\n return (\n \n \n \n {words.map((word, i) => (\n \n {word}\n \n ))}\n \n \n \n );\n}\n","path":"index.tsx","target":"components/smoothui/shared-axis-y/index.tsx","type":"registry:ui"}],"name":"shared-axis-y","registryDependencies":[],"title":"Shared Axis Y","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A SharedAxisZ text animation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useState } from \"react\";\n\nexport interface SharedAxisZProps {\n className?: string;\n /** Interval between phrase swaps in milliseconds. */\n interval?: number;\n phrases: string[];\n}\n\nconst ENTER_EASE = [0.2, 0, 0, 1] as const;\nconst EXIT_EASE = [0.4, 0, 1, 1] as const;\n\n/**\n * SharedAxisZ — scale/depth phrase transition inspired by Google Material shared axis (Z).\n * Incoming phrase scales up from 0.9 with a soft blur; outgoing scales to 1.06 and fades.\n * From the animate-text catalog (`shared-axis-z`).\n */\nexport default function SharedAxisZ({\n phrases,\n className = \"\",\n interval = 2500,\n}: SharedAxisZProps) {\n const [index, setIndex] = useState(0);\n const shouldReduceMotion = useReducedMotion();\n\n useEffect(() => {\n const id = setInterval(() => {\n setIndex((prev) => (prev + 1) % phrases.length);\n }, interval);\n return () => clearInterval(id);\n }, [interval, phrases.length]);\n\n return (\n \n \n \n {phrases[index]}\n \n \n \n );\n}\n","path":"index.tsx","target":"components/smoothui/shared-axis-z/index.tsx","type":"registry:ui"}],"name":"shared-axis-z","registryDependencies":[],"title":"Shared Axis Z","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A ShimmerSweep text animation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { motion, useInView, useReducedMotion } from \"motion/react\";\nimport { useRef } from \"react\";\n\nexport interface ShimmerSweepProps {\n children: string;\n className?: string;\n /** Delay before the animation starts, in milliseconds. */\n delay?: number;\n /** Animate only once the text scrolls into view. */\n triggerOnView?: boolean;\n}\n\nconst DURATION_S = 0.85;\nconst MS = 1000;\n// Apple's signature ease-out.\nconst EASE = [0.22, 1, 0.36, 1] as const;\n\n/**\n * ShimmerSweep — whole-text fade-in with a left-to-center slide and blur\n * dissolve. A subtle sweep across a clean headline, blending in while gliding\n * from left to center. From the animate-text catalog (`shimmer-sweep`).\n * Best on hero titles and section headings.\n */\nconst ShimmerSweep = ({\n children,\n className = \"\",\n delay = 0,\n triggerOnView = false,\n}: ShimmerSweepProps) => {\n const ref = useRef(null);\n const inView = useInView(ref, { once: true });\n const shouldReduceMotion = useReducedMotion();\n const play = (!triggerOnView || inView) && !shouldReduceMotion;\n\n return (\n \n \n {children}\n \n \n );\n};\n\nexport default ShimmerSweep;\n","path":"index.tsx","target":"components/smoothui/shimmer-sweep/index.tsx","type":"registry:ui"}],"name":"shimmer-sweep","registryDependencies":[],"title":"Shimmer Sweep","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A ShineText light-sweep text animation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { motion, useReducedMotion } from \"motion/react\";\n\nexport interface ShineTextProps {\n /** Base text color (any CSS color). */\n baseColor?: string;\n children: string;\n className?: string;\n /** Duration of one sweep, in seconds. */\n duration?: number;\n /** Pause between sweeps, in seconds. */\n repeatDelay?: number;\n /** Color of the sweeping highlight band. */\n shineColor?: string;\n}\n\n/**\n * ShineText — a literal light sweep that glides across the text on a loop,\n * using a clipped moving gradient (metallic \"shine\" / shimmer). For the\n * catalog's fade+slide reveal see `shimmer-sweep`.\n */\nexport default function ShineText({\n children,\n className = \"\",\n duration = 2.5,\n repeatDelay = 0.6,\n baseColor = \"var(--color-muted-foreground)\",\n shineColor = \"var(--color-foreground)\",\n}: ShineTextProps) {\n const shouldReduceMotion = useReducedMotion();\n\n if (shouldReduceMotion) {\n return (\n \n {children}\n \n );\n }\n\n return (\n \n {children}\n \n );\n}\n","path":"index.tsx","target":"components/smoothui/shine-text/index.tsx","type":"registry:ui"}],"name":"shine-text","registryDependencies":[],"title":"Shine Text","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A ShortSlideDown text animation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useState } from \"react\";\n\nexport interface ShortSlideDownProps {\n className?: string;\n /** Interval between phrase completions in milliseconds. */\n interval?: number;\n phrases: string[];\n}\n\nconst BUILD_EASE = [0.2, 0.8, 0.2, 1] as const;\nconst EXIT_EASE = [0.4, 0, 0.2, 1] as const;\n\n/**\n * ShortSlideDown — each new word drops in from above into its own centered line,\n * pushing the stack downward until a centered multi-line composition locks in place.\n * From the animate-text catalog (`short-slide-down`).\n */\nexport default function ShortSlideDown({\n phrases,\n className = \"\",\n interval = 2500,\n}: ShortSlideDownProps) {\n const [phraseIndex, setPhraseIndex] = useState(0);\n const [wordCount, setWordCount] = useState(1);\n const [exiting, setExiting] = useState(false);\n const shouldReduceMotion = useReducedMotion();\n\n const currentPhrase = phrases[phraseIndex] ?? \"\";\n const words = currentPhrase.split(\" \");\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: words.length drives the build schedule\n useEffect(() => {\n if (shouldReduceMotion) {\n const holdId = setTimeout(() => {\n setPhraseIndex((prev) => (prev + 1) % phrases.length);\n }, interval);\n return () => clearTimeout(holdId);\n }\n\n setWordCount(1);\n setExiting(false);\n\n const buildTimers: ReturnType[] = [];\n\n for (let i = 1; i < words.length; i++) {\n buildTimers.push(\n setTimeout(() => {\n setWordCount(i + 1);\n }, i * 500)\n );\n }\n\n const totalBuild = (words.length - 1) * 500 + 360;\n const holdId = setTimeout(() => {\n setExiting(true);\n setTimeout(() => {\n setPhraseIndex((prev) => (prev + 1) % phrases.length);\n setWordCount(1);\n setExiting(false);\n }, 320 + 180);\n }, totalBuild + interval);\n\n buildTimers.push(holdId);\n return () => {\n for (const t of buildTimers) {\n clearTimeout(t);\n }\n };\n }, [phraseIndex, phrases.length, interval, shouldReduceMotion, words.length]);\n\n const visibleWords = shouldReduceMotion ? words : words.slice(0, wordCount);\n const restingAnimate = shouldReduceMotion\n ? { opacity: 1 }\n : { filter: \"blur(0px)\", opacity: 1, scale: 1, y: 0 };\n const exitAnimate = {\n filter: \"blur(1.2px)\",\n opacity: 0,\n transition: { duration: 0.32, ease: EXIT_EASE },\n y: 10,\n };\n\n return (\n \n \n {visibleWords.map((word, i) => (\n \n {word}\n \n ))}\n \n \n );\n}\n","path":"index.tsx","target":"components/smoothui/short-slide-down/index.tsx","type":"registry:ui"}],"name":"short-slide-down","registryDependencies":[],"title":"Short Slide Down","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A ShortSlideRight text animation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useState } from \"react\";\n\nexport interface ShortSlideRightProps {\n className?: string;\n /** Interval between phrase swaps in milliseconds. */\n interval?: number;\n phrases: string[];\n}\n\nconst ENTER_EASE = [0.2, 0.8, 0.2, 1] as const;\nconst EXIT_EASE = [0.4, 0, 0.2, 1] as const;\n\n/**\n * ShortSlideRight — the whole phrase glides in from the left as one compact unit\n * while words reveal in sequence through opacity stagger.\n * Keynote-style editorial restraint. From the animate-text catalog (`short-slide-right`).\n */\nexport default function ShortSlideRight({\n phrases,\n className = \"\",\n interval = 2500,\n}: ShortSlideRightProps) {\n const [index, setIndex] = useState(0);\n const shouldReduceMotion = useReducedMotion();\n\n useEffect(() => {\n const id = setInterval(() => {\n setIndex((prev) => (prev + 1) % phrases.length);\n }, interval);\n return () => clearInterval(id);\n }, [interval, phrases.length]);\n\n const words = phrases[index]?.split(\" \") ?? [];\n\n return (\n \n \n \n {words.map((word, i) => (\n \n {word}\n \n ))}\n \n \n \n );\n}\n","path":"index.tsx","target":"components/smoothui/short-slide-right/index.tsx","type":"registry:ui"}],"name":"short-slide-right","registryDependencies":[],"title":"Short Slide Right","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A beautiful animated orb component inspired by Siri's visual design.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n type MotionStyle,\n motion,\n type TargetAndTransition,\n type Transition,\n useReducedMotion,\n useTransform,\n} from \"motion/react\";\nimport {\n type AIAmplitude,\n type AIState,\n getAIStateMotion,\n useAmplitudeValue,\n} from \"../ai-core\";\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\n/** Loud audio tightens the gradient, which reads as the orb \"focusing\". */\nconst AMPLITUDE_BLUR_FALLOFF = 0.45;\n/** Amplitude adds at most 12% of extra size on top of the state scale. */\nconst AMPLITUDE_SCALE_GAIN = 0.12;\n/** Single lateral nudge used to signal `error`, well under 200ms. */\nconst ERROR_SHAKE_KEYFRAMES = [0, -3, 3, 0];\nconst ERROR_SHAKE_DURATION = 0.18;\nconst EASE_IN_OUT = [0.645, 0.045, 0.355, 1] as const;\nconst GLOW_BLUR_RATIO = 0.28;\nconst GLOW_MAX_OPACITY = 0.7;\n/** Depth rim, as a fraction of the orb size. */\nconst RIM_RATIO = 0.06;\nconst RIM_MIN = 1.5;\n/** Sheen drift period at rest, before the state speed divides it. */\nconst DRIFT_BASE_SECONDS = 12;\n/** `idle` breathes: a slow, shallow scale cycle that never draws attention. */\nconst BREATHE_SCALE = [1, 1.035, 1];\nconst BREATHE_SECONDS = 5.5;\nconst SPRING_DEFAULT: Transition = {\n bounce: 0.1,\n duration: 0.25,\n type: \"spring\",\n};\n\nexport interface SiriOrbProps {\n /**\n * Live audio level, 0–1. Pass the `MotionValue` from `useAudioAmplitude` so\n * the signal never re-renders React.\n */\n amplitude?: AIAmplitude;\n /** Ambient rotation period in seconds, before the state speed multiplier. */\n animationDuration?: number;\n className?: string;\n colors?: {\n bg?: string;\n c1?: string;\n c2?: string;\n c3?: string;\n /** Fourth mesh stop. More stops means fewer visible repeats per rotation. */\n c4?: string;\n };\n size?: string;\n /** Shared AI state driving speed, scale, saturation and reactivity. */\n state?: AIState;\n}\n\nconst SiriOrb: React.FC = ({\n size = \"192px\",\n className,\n colors,\n animationDuration = 20,\n amplitude,\n state = \"idle\",\n}) => {\n const shouldReduceMotion = useReducedMotion();\n const amplitudeValue = useAmplitudeValue(amplitude);\n const stateMotion = getAIStateMotion(state);\n\n /**\n * Higher chroma than the original pastels.\n *\n * The first palette sat at chroma 0.12–0.15, which washes out once the mesh is\n * blurred and the dot pattern is overlaid on top. Pushing to ~0.2 and adding a\n * saturate() pass to the mesh is what makes the colour survive all that.\n */\n const defaultColors = {\n bg: \"oklch(92% 0.03 300)\",\n c1: \"oklch(68% 0.21 350)\", // Pink\n c2: \"oklch(70% 0.18 210)\", // Blue\n c3: \"oklch(66% 0.2 285)\", // Violet\n c4: \"oklch(72% 0.19 325)\", // Magenta, the fourth stop for variety\n };\n\n const finalColors = { ...defaultColors, ...colors };\n // The bloom stays in the orb's own palette — see the note in ai-orb-aura.\n const glowColor = finalColors.c2;\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 // Reactivity is gated by the state preset: `thinking` barely listens so the\n // orb keeps churning internally instead of throbbing with room noise.\n const reactivity = shouldReduceMotion ? 0 : stateMotion.reactivity;\n\n const reactiveBlur = useTransform(amplitudeValue, (level) => {\n const focus = 1 - level * reactivity * AMPLITUDE_BLUR_FALLOFF;\n return `${blurAmount * focus}px`;\n });\n\n const reactiveScale = useTransform(\n amplitudeValue,\n (level) => stateMotion.scale + level * reactivity * AMPLITUDE_SCALE_GAIN\n );\n\n const loopDuration = shouldReduceMotion\n ? animationDuration\n : animationDuration / stateMotion.speed;\n\n // Rim thickness scales with the orb, so the lit edge reads the same at 24px\n // and at 240px instead of swallowing the small one.\n const rim = Math.max(sizeValue * RIM_RATIO, RIM_MIN);\n // The sheen drifts slower than the mesh rotates; a busier state speeds it up\n // a touch without matching the rotation, which would look mechanical.\n const driftDuration = (DRIFT_BASE_SECONDS / (1 + stateMotion.speed)) * 2;\n\n const getRootAnimate = (): TargetAndTransition => {\n if (shouldReduceMotion) {\n return { scale: 1, x: 0 };\n }\n if (state === \"error\") {\n return { scale: 1, x: ERROR_SHAKE_KEYFRAMES };\n }\n if (stateMotion.motif === \"breathe\") {\n return { scale: BREATHE_SCALE, x: 0 };\n }\n return { scale: 1, x: 0 };\n };\n\n const getRootTransition = (): Transition => {\n if (shouldReduceMotion) {\n return { duration: 0 };\n }\n if (state === \"error\") {\n return { duration: ERROR_SHAKE_DURATION, ease: EASE_IN_OUT };\n }\n if (stateMotion.motif === \"breathe\") {\n return {\n duration: BREATHE_SECONDS,\n ease: EASE_IN_OUT,\n repeat: Number.POSITIVE_INFINITY,\n };\n }\n return SPRING_DEFAULT;\n };\n\n return (\n // The gradient disc clips its own overflow, so the bloom and the status\n // motif have to live in a wrapper rather than inside it.\n \n {/* Bloom tinted by the state's semantic accent. */}\n \n\n \n {/* Specular sheen and depth rim. The mesh alone reads as a flat blurred\n disc; a drifting highlight plus a lit top edge and shaded bottom are\n what make it read as a sphere. */}\n \n \n \n \n \n );\n};\n\nexport default SiriOrb;\n","path":"index.tsx","target":"components/smoothui/siri-orb/index.tsx","type":"registry:ui"}],"name":"siri-orb","registryDependencies":["https://smoothui.dev/r/ai-core.json"],"title":"Siri Orb","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":[],"description":"Animated skeleton loading placeholders","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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","path":"index.tsx","target":"components/smoothui/skeleton-loader/index.tsx","type":"registry:ui"}],"name":"skeleton-loader","registryDependencies":[],"title":"Skeleton Loader","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["@radix-ui/react-slot","class-variance-authority","motion"],"description":"A polished button component with gradient variants and press animation","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cn } from \"@/lib/utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport type { ButtonHTMLAttributes, ReactNode, Ref } from \"react\";\nimport { useEffect, useRef } from \"react\";\n\n/**\n * SmoothButton — the first primitive of the SmoothUI Design System.\n *\n * Three orthogonal axes (see design-system/components/button.md):\n * variant → appearance only (solid | soft | outline | ghost | link | candy)\n * color → hue (accent | neutral | destructive | blue | amber | green)\n * size → xs | sm | default | lg + icon-*\n *\n * The `color` axis only sets CSS custom props (--btn, --btn-hover, --btn-fg);\n * each `variant` consumes them generically, so 6 variants × 6 colors stay 12\n * class strings, not 36. When no `color` is given, CSS var fallbacks apply\n * (candy → brand, everything else → neutral/foreground).\n *\n * Legacy variants `default` / `secondary` / `destructive` are preserved verbatim\n * for back-compat with existing call sites and ignore the `color` axis.\n */\nconst smoothButtonVariants = cva(\n \"relative inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap font-medium outline-none ring-offset-background transition-[transform,background-color,border-color,color,box-shadow] duration-150 ease-out focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n {\n defaultVariants: {\n shape: \"default\",\n size: \"default\",\n variant: \"default\",\n },\n variants: {\n color: {\n accent:\n \"[--btn-fg:#fff] [--btn-hover:var(--color-brand-secondary)] [--btn:var(--color-brand)]\",\n amber:\n \"[--btn-fg:var(--color-amber-fg)] [--btn-hover:var(--color-amber-hover)] [--btn:var(--color-amber)]\",\n blue: \"[--btn-fg:var(--color-blue-fg)] [--btn-hover:var(--color-blue-hover)] [--btn:var(--color-blue)]\",\n destructive:\n \"[--btn-fg:#fff] [--btn-hover:color-mix(in_oklab,var(--color-destructive)_85%,black)] [--btn:var(--color-destructive)]\",\n green:\n \"[--btn-fg:var(--color-green-fg)] [--btn-hover:var(--color-green-hover)] [--btn:var(--color-green)]\",\n neutral:\n \"[--btn-fg:var(--color-background)] [--btn-hover:var(--color-smooth-900)] [--btn:var(--color-foreground)]\",\n },\n shape: {\n default: \"\",\n pill: \"rounded-full!\",\n square: \"rounded-none!\",\n },\n size: {\n default: \"h-10 gap-2 rounded-md px-4 py-2 text-sm [&_svg]:size-4\",\n icon: \"size-10 rounded-md [&_svg]:size-4\",\n \"icon-lg\": \"size-11 rounded-lg [&_svg]:size-5\",\n \"icon-sm\": \"size-9 rounded-md [&_svg]:size-4\",\n lg: \"h-11 gap-2 rounded-lg px-8 text-base [&_svg]:size-5\",\n sm: \"h-9 gap-1.5 rounded-md px-3 text-sm [&_svg]:size-4\",\n xs: \"h-7 gap-1.5 rounded-sm px-2.5 text-xs [&_svg]:size-3.5\",\n },\n variant: {\n candy:\n \"border-[0.5px] border-white/25 bg-gradient-to-b from-[var(--btn,var(--color-brand))] to-[var(--btn-hover,var(--color-brand-secondary))] text-[var(--btn-fg,#fff)] text-shadow-sm shadow-black/20 shadow-md ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--btn,var(--color-brand)))] hover:from-[var(--btn-hover,var(--color-brand-secondary))] hover:to-[var(--btn-hover,var(--color-brand-secondary))] [&_svg]:drop-shadow-sm\",\n // --- legacy (preserved verbatim, ignore `color`) ---\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 ghost:\n \"text-[var(--btn,var(--color-foreground))] hover:bg-[color-mix(in_oklab,var(--btn,var(--color-foreground))_10%,transparent)]\",\n link: \"text-[var(--btn,var(--color-foreground))] underline-offset-4 hover:underline\",\n outline:\n \"border border-transparent bg-background text-[var(--btn,var(--color-foreground))] 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 soft: \"bg-[color-mix(in_oklab,var(--btn,var(--color-foreground))_12%,transparent)] text-[var(--btn,var(--color-foreground))] hover:bg-[color-mix(in_oklab,var(--btn,var(--color-foreground))_18%,transparent)]\",\n // --- new decoupled system (consume --btn / --btn-hover / --btn-fg) ---\n solid:\n \"bg-[var(--btn,var(--color-foreground))] text-[var(--btn-fg,var(--color-background))] shadow-xs hover:bg-[var(--btn-hover,var(--color-smooth-900))]\",\n },\n },\n }\n);\n\nexport type SmoothButtonProps = Omit<\n ButtonHTMLAttributes,\n \"prefix\" | \"color\"\n> &\n VariantProps & {\n asChild?: boolean;\n /** Show a spinner that morphs the button width without layout jump. */\n loading?: boolean;\n /** Content before the label (icon, Kbd…). */\n prefix?: ReactNode;\n /** Content after the label. */\n suffix?: ReactNode;\n /** Opt-in Safari force-press depth (scales to 0.94 under pressure). */\n forcePress?: boolean;\n ref?: Ref;\n };\n\nconst Spinner = () => (\n \n \n \n \n);\n\nfunction SmoothButton({\n className,\n variant,\n color,\n size,\n shape,\n asChild = false,\n loading = false,\n forcePress = false,\n prefix,\n suffix,\n disabled,\n children,\n ref,\n ...props\n}: SmoothButtonProps) {\n const shouldReduceMotion = useReducedMotion();\n const localRef = useRef(null);\n\n // Safari-only force-press: deepen the press past the normal active scale.\n useEffect(() => {\n const node = localRef.current;\n if (!(forcePress && node) || shouldReduceMotion) {\n return;\n }\n const FORCE_THRESHOLD = 2; // Safari's \"force click\" boundary\n const onForce = (e: Event) => {\n const force = (e as Event & { webkitForce?: number }).webkitForce ?? 0;\n node.style.transform = force >= FORCE_THRESHOLD ? \"scale(0.94)\" : \"\";\n };\n const reset = () => {\n node.style.transform = \"\";\n };\n node.addEventListener(\"webkitmouseforcechanged\", onForce);\n node.addEventListener(\"mouseup\", reset);\n node.addEventListener(\"mouseleave\", reset);\n return () => {\n node.removeEventListener(\"webkitmouseforcechanged\", onForce);\n node.removeEventListener(\"mouseup\", reset);\n node.removeEventListener(\"mouseleave\", reset);\n };\n }, [forcePress, shouldReduceMotion]);\n\n const classes = cn(\n smoothButtonVariants({ className, color, shape, size, variant })\n );\n\n // asChild defers all rendering to the consumer's element — slots/loading\n // are not injected (single-child contract of Radix Slot).\n if (asChild) {\n return (\n \n {children}\n \n );\n }\n\n const setRefs = (node: HTMLButtonElement | null) => {\n localRef.current = node;\n if (typeof ref === \"function\") {\n ref(node);\n } else if (ref) {\n (ref as { current: HTMLButtonElement | null }).current = node;\n }\n };\n\n return (\n \n \n {loading ? (\n \n \n \n ) : null}\n \n {prefix}\n {children}\n {suffix}\n \n );\n}\n\nexport default SmoothButton;\nexport { smoothButtonVariants };\n","path":"index.tsx","target":"components/smoothui/smooth-button/index.tsx","type":"registry:ui"}],"name":"smooth-button","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Smooth Button","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A SocialSelector component for SmoothUI.","devDependencies":[],"files":[{"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 domain: \"x.com\",\n icon: ,\n name: \"X\",\n url: \"https://x.com/educalvolpz\",\n },\n {\n domain: \"bsky.app\",\n icon: ,\n name: \"Bluesky\",\n url: \"https://bsky.app/profile/educalvolpz.bsky.social\",\n },\n {\n domain: \"threads.net\",\n icon: ,\n name: \"Threads\",\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 damping: 30,\n duration: 0.25,\n stiffness: 500,\n type: \"spring\" as const,\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","path":"index.tsx","target":"components/smoothui/social-selector/index.tsx","type":"registry:ui"}],"name":"social-selector","registryDependencies":[],"title":"Social Selector","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A SoftBlurIn text animation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { motion, useInView, useReducedMotion } from \"motion/react\";\nimport { useRef } from \"react\";\n\nexport interface SoftBlurInProps {\n children: string;\n className?: string;\n /** Delay before the animation starts, in milliseconds. */\n delay?: number;\n /** Per-character stagger, in milliseconds. */\n stagger?: number;\n /** Animate only once the text scrolls into view. */\n triggerOnView?: boolean;\n}\n\nconst DURATION_S = 0.9;\nconst MS = 1000;\n// Apple's signature ease-out.\nconst EASE = [0.22, 1, 0.36, 1] as const;\n\n/**\n * SoftBlurIn — per-character fade-in with a gentle blur and upward motion,\n * Apple's signature hero-title reveal. From the animate-text catalog\n * (`soft-blur-in`). Best on hero titles 48px+ over solid backgrounds.\n */\nexport default function SoftBlurIn({\n children,\n className = \"\",\n delay = 0,\n stagger = 25,\n triggerOnView = false,\n}: SoftBlurInProps) {\n const ref = useRef(null);\n const inView = useInView(ref, { once: true });\n const shouldReduceMotion = useReducedMotion();\n const play = (!triggerOnView || inView) && !shouldReduceMotion;\n const characters = Array.from(children);\n\n return (\n \n {characters.map((char, index) => (\n \n {char === \" \" ? \" \" : String(char)}\n \n ))}\n \n );\n}\n","path":"index.tsx","target":"components/smoothui/soft-blur-in/index.tsx","type":"registry:ui"}],"name":"soft-blur-in","registryDependencies":[],"title":"Soft Blur In","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A SpringScaleIn text animation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { motion, useInView, useReducedMotion } from \"motion/react\";\nimport { useRef } from \"react\";\n\n/**\n * SpringScaleIn — per-word scale-in with a soft overshoot, iOS app icon-style pop.\n * From the animate-text catalog (`spring-scale-in`).\n */\nexport interface SpringScaleInProps {\n children: string;\n className?: string;\n /** Delay before the animation starts, in milliseconds. */\n delay?: number;\n /** Per-word stagger, in milliseconds. */\n stagger?: number;\n /** Animate only once the text scrolls into view. */\n triggerOnView?: boolean;\n}\n\nconst DURATION_S = 0.36;\nconst MS = 1000;\nconst EASE = [0.34, 1.56, 0.64, 1] as const;\n\nexport default function SpringScaleIn({\n children,\n className = \"\",\n delay = 0,\n stagger = 95,\n triggerOnView = false,\n}: SpringScaleInProps) {\n const ref = useRef(null);\n const inView = useInView(ref, { once: true });\n const shouldReduceMotion = useReducedMotion();\n const play = (!triggerOnView || inView) && !shouldReduceMotion;\n const words = children.split(\" \");\n\n return (\n \n {words.map((word, index) => (\n // biome-ignore lint/suspicious/noArrayIndexKey: words have no stable id\n \n \n {word}\n \n {index < words.length - 1 && (\n \n {\" \"}\n \n )}\n \n ))}\n \n );\n}\n","path":"index.tsx","target":"components/smoothui/spring-scale-in/index.tsx","type":"registry:ui"}],"name":"spring-scale-in","registryDependencies":[],"title":"Spring Scale In","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A StaggerFromCenter text animation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { motion, useInView, useReducedMotion } from \"motion/react\";\nimport { useRef } from \"react\";\n\nexport interface StaggerFromCenterProps {\n children: string;\n className?: string;\n /** Delay before the animation starts, in milliseconds. */\n delay?: number;\n /** Per-step stagger between characters, in milliseconds. */\n stagger?: number;\n /** Animate only once the text scrolls into view. */\n triggerOnView?: boolean;\n}\n\nconst DURATION_S = 0.62;\nconst MS = 1000;\n// Apple-ish ease-out for center-out reveal.\nconst EASE = [0.22, 1, 0.36, 1] as const;\n\n/**\n * StaggerFromCenter — characters reveal from the center outward to\n * emphasize the keyword core. Delay is computed by distance from center,\n * not linear index. From the animate-text catalog (`stagger-from-center`).\n */\nexport default function StaggerFromCenter({\n children,\n className = \"\",\n delay = 0,\n stagger = 22,\n triggerOnView = false,\n}: StaggerFromCenterProps) {\n const ref = useRef(null);\n const inView = useInView(ref, { once: true });\n const shouldReduceMotion = useReducedMotion();\n const play = (!triggerOnView || inView) && !shouldReduceMotion;\n const characters = Array.from(children);\n const center = (characters.length - 1) / 2;\n\n return (\n \n {characters.map((char, index) => {\n const distance = Math.abs(index - center);\n return (\n \n {char === \" \" ? \" \" : String(char)}\n \n );\n })}\n \n );\n}\n","path":"index.tsx","target":"components/smoothui/stagger-from-center/index.tsx","type":"registry:ui"}],"name":"stagger-from-center","registryDependencies":[],"title":"Stagger From Center","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A StaggerFromEdges text animation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { motion, useInView, useReducedMotion } from \"motion/react\";\nimport { useRef } from \"react\";\n\nexport interface StaggerFromEdgesProps {\n children: string;\n className?: string;\n /** Delay before the animation starts, in milliseconds. */\n delay?: number;\n /** Per-step stagger between characters, in milliseconds. */\n stagger?: number;\n /** Animate only once the text scrolls into view. */\n triggerOnView?: boolean;\n}\n\nconst DURATION_S = 0.62;\nconst MS = 1000;\n// Apple-ish ease-out for edges-in reveal.\nconst EASE = [0.22, 1, 0.36, 1] as const;\n\n/**\n * StaggerFromEdges — characters start from both edges and converge toward\n * the center. Delay is computed by distance from the nearest edge, not\n * linear index. From the animate-text catalog (`stagger-from-edges`).\n */\nexport default function StaggerFromEdges({\n children,\n className = \"\",\n delay = 0,\n stagger = 22,\n triggerOnView = false,\n}: StaggerFromEdgesProps) {\n const ref = useRef(null);\n const inView = useInView(ref, { once: true });\n const shouldReduceMotion = useReducedMotion();\n const play = (!triggerOnView || inView) && !shouldReduceMotion;\n const characters = Array.from(children);\n const lastIndex = characters.length - 1;\n\n return (\n \n {characters.map((char, index) => {\n // Distance from the nearest edge (0 = edge character, increases toward center)\n const distanceFromEdge = Math.min(index, lastIndex - index);\n return (\n \n {char === \" \" ? \" \" : String(char)}\n \n );\n })}\n \n );\n}\n","path":"index.tsx","target":"components/smoothui/stagger-from-edges/index.tsx","type":"registry:ui"}],"name":"stagger-from-edges","registryDependencies":[],"title":"Stagger From Edges","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":[],"description":"A SwitchboardCard component with light grid illustration for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/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","path":"index.tsx","target":"components/smoothui/switchboard-card/index.tsx","type":"registry:ui"}],"name":"switchboard-card","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Switchboard Card","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A TopDownLetters text animation component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { motion, useInView, useReducedMotion } from \"motion/react\";\nimport { useRef } from \"react\";\n\nexport interface TopDownLettersProps {\n children: string;\n className?: string;\n /** Delay before the animation starts, in milliseconds. */\n delay?: number;\n /** Per-character stagger, in milliseconds. */\n stagger?: number;\n /** Animate only once the text scrolls into view. */\n triggerOnView?: boolean;\n}\n\nconst DURATION_S = 0.4;\nconst MS = 1000;\n// Pronounced ease-out for a tall, staged drop from above.\nconst EASE = [0.18, 1, 0.32, 1] as const;\n\n/**\n * TopDownLetters — letters descend from above in a pronounced staircase,\n * one symbol at a time, with zero blur. The top-down counterpart to\n * bottom-up-letters. From the animate-text catalog (`top-down-letters`).\n */\nexport default function TopDownLetters({\n children,\n className = \"\",\n delay = 0,\n stagger = 88,\n triggerOnView = false,\n}: TopDownLettersProps) {\n const ref = useRef(null);\n const inView = useInView(ref, { once: true });\n const shouldReduceMotion = useReducedMotion();\n const play = (!triggerOnView || inView) && !shouldReduceMotion;\n const characters = Array.from(children);\n\n return (\n \n {characters.map((char, index) => (\n \n {char === \" \" ? \" \" : String(char)}\n \n ))}\n \n );\n}\n","path":"index.tsx","target":"components/smoothui/top-down-letters/index.tsx","type":"registry:ui"}],"name":"top-down-letters","registryDependencies":[],"title":"Top Down Letters","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["react-tweet"],"description":"A beautiful tweet card component for displaying Twitter/X posts.","devDependencies":[],"files":[{"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","path":"client.tsx","target":"components/smoothui/tweet-card/client.tsx","type":"registry:ui"},{"content":"/* eslint-disable @next/next/no-img-element */\n\nimport { cn } from \"@/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 ) : null}\n {hasPhotos && tweet.photos\n ? (() => {\n const { photos } = tweet;\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 draggable={false}\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 : null}\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","path":"index.tsx","target":"components/smoothui/tweet-card/index.tsx","type":"registry:ui"}],"name":"tweet-card","registryDependencies":[],"title":"Tweet Card","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":[],"description":"A TypewriterText component for SmoothUI.","devDependencies":[],"files":[{"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","path":"index.tsx","target":"components/smoothui/typewriter-text/index.tsx","type":"registry:ui"}],"name":"typewriter-text","registryDependencies":[],"title":"Typewriter Text","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion","lucide-react","@radix-ui/react-popover"],"description":"A UserAccountAvatar component for SmoothUI.","devDependencies":[],"files":[{"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 { date: \"2023-03-15\", id: \"ORD001\", progress: 100, status: \"delivered\" },\n { date: \"2023-03-20\", id: \"ORD002\", progress: 66, status: \"shipped\" },\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 email: formData.get(\"email\") as string,\n name: formData.get(\"name\") 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","path":"index.tsx","target":"components/smoothui/user-account-avatar/index.tsx","type":"registry:ui"}],"name":"user-account-avatar","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"User Account Avatar","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":[],"description":"A wavy perimeter circle reveal inspired by the Codrops circle warping step.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport SdfBlobTransition from \"../sdf-blob-transition\";\n\nexport interface WarpedCircleTransitionProps {\n children: ReactNode;\n className?: string;\n duration?: number;\n onRest?: () => void;\n transitionKey: string | number;\n}\n\nconst WarpedCircleTransition = ({\n children,\n className,\n duration = 1120,\n onRest,\n transitionKey,\n}: WarpedCircleTransitionProps) => (\n \n {children}\n \n);\n\nexport default WarpedCircleTransition;\n","path":"index.tsx","target":"components/smoothui/warped-circle-transition/index.tsx","type":"registry:ui"}],"name":"warped-circle-transition","registryDependencies":["https://smoothui.dev/r/sdf-blob-transition.json"],"title":"Warped Circle Transition","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"A WaveText component for SmoothUI.","devDependencies":[],"files":[{"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\" : String(char)}\n \n ))}\n \n );\n};\n\nexport default WaveText;\n","path":"index.tsx","target":"components/smoothui/wave-text/index.tsx","type":"registry:ui"}],"name":"wave-text","registryDependencies":[],"title":"Wave Text","type":"registry:ui"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":[],"description":"Shared animation constants (springs, easing curves, durations) for SmoothUI components","devDependencies":[],"files":[{"content":"/**\n * Shared animation constants for SmoothUI components.\n *\n * Spring configs follow project guidelines:\n * - Duration 0.2–0.25s for UI elements\n * - Bounce ≤ 0.1 for standard UI (higher only for playful/drag interactions)\n *\n * Easing curves use cubic-bezier arrays compatible with Motion's `ease` property.\n */\n\n/** Default spring for most UI animations */\nexport const SPRING_DEFAULT = {\n bounce: 0.1,\n duration: 0.25,\n type: \"spring\" as const,\n};\n\n/** Snappy spring for quick, no-overshoot transitions */\nexport const SPRING_SNAPPY = {\n bounce: 0,\n duration: 0.2,\n type: \"spring\" as const,\n};\n\n/** Ease-out curve for entering elements — cubic-bezier(.23, 1, .32, 1) */\nexport const EASE_OUT = [0.23, 1, 0.32, 1] as const;\n\n/** Ease-in-out curve for moving elements — cubic-bezier(0.645, 0.045, 0.355, 1) */\nexport const EASE_IN_OUT = [0.645, 0.045, 0.355, 1] as const;\n\n/** Instant transition for reduced-motion contexts */\nexport const DURATION_INSTANT = { duration: 0 };\n\n/** Standard animation durations (seconds) */\nexport const DURATION = {\n complex: 0.4,\n default: 0.25,\n fast: 0.15,\n slow: 0.3,\n} as const;\n\nexport type SpringConfig = typeof SPRING_DEFAULT;\nexport type EasingCurve = readonly [number, number, number, number];\n","path":"animation.ts","target":"components/smoothui/lib/animation.ts","type":"registry:lib"}],"name":"lib","registryDependencies":[],"title":"Lib","type":"registry:lib"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["lucide-react","motion"],"description":"Full ChatGPT-style chat surface — sidebar, transcript and composer — wired to a simulated agent so every AI component is on screen.","devDependencies":[],"files":[{"content":"import type { AIApprovalOption } from \"@/components/smoothui/ai-approval\";\nimport type { AIDiffLine } from \"@/components/smoothui/ai-diff\";\nimport type { AIPromptAttachment } from \"@/components/smoothui/ai-prompt-input\";\nimport type { AIResponseCitation } from \"@/components/smoothui/ai-response\";\nimport type { AISource } from \"@/components/smoothui/ai-sources\";\nimport type { AISuggestion } from \"@/components/smoothui/ai-suggestions\";\nimport type { AITask } from \"@/components/smoothui/ai-task-list\";\n\n/**\n * A transcript turn.\n *\n * Assistant turns are a bag of optional parts rather than a block of markdown,\n * because that is what an agent turn actually is: some thinking, some tool\n * calls, some produced artifact, then prose. Adding a new part means adding one\n * field here and one branch in `chat-thread.tsx` — that is the extension point\n * as more of the AI set lands.\n */\nexport type ChatTurn =\n | {\n /** Files that rode along with the message. */\n attachments?: AIPromptAttachment[];\n from: \"user\";\n id: string;\n text: string;\n timestamp: string;\n }\n | {\n approval?: { options: AIApprovalOption[]; question: string };\n artifact?: { code: string; language: string; title: string };\n citations?: AIResponseCitation[];\n diff?: { lines: AIDiffLine[]; title: string };\n from: \"assistant\";\n id: string;\n reasoning?: string;\n sources?: AISource[];\n suggestions?: AISuggestion[];\n tasks?: { label: string; tasks: AITask[] };\n text?: string;\n timestamp: string;\n tool?: { args: string; name: string; result: string; summary: string };\n };\n\nexport type ChatConversation = {\n /** Sidebar grouping label — real products group by recency, so this does. */\n group: string;\n id: string;\n title: string;\n turns: ChatTurn[];\n};\n\nconst RETIRE_FLAVOUR: ChatTurn[] = [\n {\n attachments: [\n { id: \"a1\", name: \"sales-velocity-2026-q2.csv\", size: 24_600 },\n { id: \"a2\", name: \"flavour-review.pdf\", size: 1_248_000 },\n ],\n from: \"user\",\n id: \"r1\",\n text: \"Compare mint chip to last summer and tell me which flavour to retire before Q4.\",\n timestamp: \"14:31\",\n },\n {\n citations: [\n { id: \"1\", index: 1, title: \"Sales velocity export, 2026 Q2\" },\n { id: \"2\", index: 2, title: \"Flavour performance review\" },\n ],\n from: \"assistant\",\n id: \"r2\",\n reasoning:\n \"Pulled three summers of sales, normalised for the two stores that opened last year, then compared weekend and weekday velocity before ranking the classics.\",\n sources: [\n {\n id: \"s1\",\n snippet: \"Weekly units by flavour and store, 2024–2026.\",\n title: \"Sales velocity export, 2026 Q2\",\n url: \"internal://warehouse/sales-velocity-2026-q2.csv\",\n },\n {\n id: \"s2\",\n snippet: \"Margin per scoop after the dairy contract renewal.\",\n title: \"Flavour performance review\",\n url: \"internal://docs/flavour-performance-review.md\",\n },\n ],\n suggestions: [\n { id: \"g1\", label: \"Draft the retirement announcement\" },\n { id: \"g2\", label: \"What replaces rocky road?\" },\n { id: \"g3\", label: \"Show the margin per scoop\" },\n ],\n text: \"Mint chip is up 12% on last summer, and the whole gain sits on weekends [1]. Rocky road is the one to retire — down 6% year on year, lowest margin per scoop of the classics, and it does not recover in any store [2].\",\n timestamp: \"14:32\",\n tool: {\n args: '{ \"flavours\": [\"mint-chip\", \"rocky-road\"], \"years\": 3 }',\n name: \"query_sales\",\n result: \"412 rows\",\n summary: \"3 summers\",\n },\n },\n];\n\nconst SHIP_PRICE_CHANGE: ChatTurn[] = [\n {\n from: \"user\",\n id: \"p1\",\n text: \"Raise the single scoop to 4.20 everywhere and stage the change.\",\n timestamp: \"11:04\",\n },\n {\n approval: {\n options: [\n { id: \"ship\", label: \"Apply to all 14 stores\" },\n {\n detail: \"Rolls out to the two pilot stores only\",\n id: \"pilot\",\n label: \"Pilot first\",\n },\n { destructive: true, id: \"discard\", label: \"Discard the change\" },\n ],\n question: \"This updates live prices in 14 stores. Apply now?\",\n },\n diff: {\n lines: [\n { content: \" scoops:\", kind: \"context\", number: 12 },\n { content: \"- single: 3.90\", kind: \"removed\", number: 13 },\n { content: \"+ single: 4.20\", kind: \"added\", number: 13 },\n { content: \" double: 6.40\", kind: \"context\", number: 14 },\n { content: \"- kids: 2.60\", kind: \"removed\", number: 15 },\n { content: \"+ kids: 2.80\", kind: \"added\", number: 15 },\n ],\n title: \"config/pricing.yaml\",\n },\n from: \"assistant\",\n id: \"p2\",\n tasks: {\n label: \"Plan\",\n tasks: [\n { id: \"t1\", label: \"Read current price table\", status: \"done\" },\n {\n children: [\n { id: \"t2a\", label: \"Update scoop tiers\", status: \"done\" },\n { id: \"t2b\", label: \"Update kids portion\", status: \"done\" },\n ],\n id: \"t2\",\n label: \"Stage the new prices\",\n note: \"2 files\",\n status: \"done\",\n },\n { id: \"t3\", label: \"Wait for approval\", status: \"running\" },\n {\n id: \"t4\",\n label: \"Publish to stores\",\n note: \"14 stores\",\n status: \"pending\",\n },\n ],\n },\n text: \"Staged. Kids portion moves with it to keep the ratio you set last spring — say the word and I will publish.\",\n timestamp: \"11:05\",\n },\n];\n\nconst SUMMER_CAMPAIGN: ChatTurn[] = [\n {\n from: \"user\",\n id: \"c1\",\n text: \"Give me a summer campaign banner I can drop into the site.\",\n timestamp: \"09:12\",\n },\n {\n artifact: {\n code: `export const SummerBanner = () => (\n
\n

Summer 2026

\n

Two scoops, one price

\n

\n Every weekday before 5pm, all summer.\n

\n
\n);`,\n language: \"tsx\",\n title: \"SummerBanner.tsx\",\n },\n from: \"assistant\",\n id: \"c2\",\n suggestions: [\n { id: \"c-s1\", label: \"Make it dark mode aware\" },\n { id: \"c-s2\", label: \"Add a countdown\" },\n ],\n text: \"Here it is, using the pink and sky pair from your brand tokens rather than new colours.\",\n timestamp: \"09:13\",\n },\n];\n\nexport const CONVERSATIONS: ChatConversation[] = [\n {\n group: \"Today\",\n id: \"retire-flavour\",\n title: \"Which flavour to retire\",\n turns: RETIRE_FLAVOUR,\n },\n {\n group: \"Today\",\n id: \"price-change\",\n title: \"Stage the price change\",\n turns: SHIP_PRICE_CHANGE,\n },\n {\n group: \"Previous 7 days\",\n id: \"summer-campaign\",\n title: \"Summer campaign banner\",\n turns: SUMMER_CAMPAIGN,\n },\n];\n\n/** Follow-ups offered on an empty thread, so the composer is never a blank stare. */\nexport const STARTER_SUGGESTIONS: AISuggestion[] = [\n { id: \"st1\", label: \"Which store is growing fastest?\" },\n { id: \"st2\", label: \"Draft next week's staff rota\" },\n { id: \"st3\", label: \"Summarise last month's reviews\" },\n];\n\n/**\n * The reply the template plays back for anything you type.\n *\n * There is no model behind this. Everything below is a fixed script, which is\n * the honest way to demo a chat surface: the components are the product, the\n * answer is set dressing.\n */\nexport const SIMULATED_REPLY = {\n citations: [\n { id: \"1\", index: 1, title: \"Store operations log, week 30\" },\n ] satisfies AIResponseCitation[],\n reasoning:\n \"Checked the four stores that reported this week, then compared footfall against the same week last year before answering.\",\n sources: [\n {\n id: \"sim-s1\",\n snippet: \"Hourly footfall and till receipts, week 30.\",\n title: \"Store operations log, week 30\",\n url: \"internal://warehouse/ops-log-w30.csv\",\n },\n ] satisfies AISource[],\n suggestions: [\n { id: \"sim-g1\", label: \"Break it down by store\" },\n { id: \"sim-g2\", label: \"Compare with last summer\" },\n ] satisfies AISuggestion[],\n text: \"Weekday afternoons are the soft spot: footfall holds but the average ticket drops about 18% after 3pm [1]. A two-scoop weekday offer is the cheapest lever you have before Q4.\",\n tool: {\n args: '{ \"week\": 30, \"stores\": \"all\" }',\n name: \"query_operations\",\n result: \"96 rows\",\n summary: \"week 30\",\n },\n} as const;\n\n/** Offered by the composer's attach control — a picker stands in for a file dialog. */\nexport const ATTACHABLE_FILES: AIPromptAttachment[] = [\n { id: \"f1\", name: \"ops-log-w30.csv\", size: 18_400 },\n { id: \"f2\", name: \"staff-rota-august.xlsx\", size: 42_900 },\n { id: \"f3\", name: \"supplier-invoice-3312.pdf\", size: 268_000 },\n];\n\nexport const MODELS = [\n { id: \"opus-5\", label: \"Opus 5\", note: \"Best for planning\" },\n { id: \"sonnet-5\", label: \"Sonnet 5\", note: \"Fast, everyday work\" },\n { id: \"haiku-4-5\", label: \"Haiku 4.5\", note: \"Cheapest\" },\n] as const;\n\nexport const CONTEXT_LIMIT = 200_000;\n","path":"chat-data.ts","target":"components/smoothui/chat-template/chat-data.ts","type":"registry:block"},{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport SiriOrb from \"@/components/smoothui/siri-orb\";\nimport {\n LogOut,\n Moon,\n PanelLeftClose,\n PanelLeftOpen,\n Plus,\n Search,\n Settings,\n Sun,\n} from \"lucide-react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport type { ChatConversation } from \"./chat-data\";\n\n/** A real photograph, so the footer is a person and not a lettered circle. */\nconst USER_AVATAR =\n \"https://ik.imagekit.io/16u211libb/avatar-educalvolpz.jpeg?tr=w-64,h-64\";\n\nexport type ChatSidebarProps = {\n activeId: string;\n className?: string;\n /** Icon rail instead of the full pane. Keeps navigation reachable. */\n collapsed?: boolean;\n conversations: ChatConversation[];\n onNewChat: () => void;\n onSelect: (id: string) => void;\n onToggleCollapsed?: () => void;\n};\n\nexport const ChatSidebar = ({\n activeId,\n className,\n collapsed = false,\n conversations,\n onNewChat,\n onSelect,\n onToggleCollapsed,\n}: ChatSidebarProps) => {\n const [query, setQuery] = useState(\"\");\n const searchRef = useRef(null);\n\n // The search filters for real. A search box that does nothing is the kind of\n // fake content this template exists to avoid.\n const groups = useMemo(() => {\n const needle = query.trim().toLowerCase();\n const matching = needle\n ? conversations.filter((conversation) =>\n conversation.title.toLowerCase().includes(needle)\n )\n : conversations;\n\n const byGroup = new Map();\n for (const conversation of matching) {\n const bucket = byGroup.get(conversation.group) ?? [];\n bucket.push(conversation);\n byGroup.set(conversation.group, bucket);\n }\n return [...byGroup.entries()];\n }, [conversations, query]);\n\n if (collapsed) {\n return (\n \n \n }\n label=\"Expand sidebar\"\n onClick={onToggleCollapsed}\n />\n }\n label=\"New chat\"\n onClick={onNewChat}\n />\n }\n label=\"Search chats\"\n onClick={() => {\n onToggleCollapsed?.();\n // Expanding and focusing in one action, so the icon is a shortcut\n // rather than a two-step detour.\n requestAnimationFrame(() => searchRef.current?.focus());\n }}\n />\n
\n \n
\n \n );\n }\n\n return (\n \n
\n \n \n Scoop Assistant\n \n \n \n \n
\n\n \n \n New chat\n \n\n {/* Icon and field share one flex row rather than absolute-positioning the\n icon over padding: the gap is then a single value instead of two that\n have to be kept in sync, and `type=\"search\"` cannot push the text away\n with its own intrinsic padding. */}\n \n\n \n\n
\n \n
\n \n );\n};\n\nconst RailButton = ({\n icon,\n label,\n onClick,\n}: {\n icon: React.ReactNode;\n label: string;\n onClick?: () => void;\n}) => (\n \n {icon}\n \n);\n\n/**\n * The account menu, with the theme switch inside it.\n *\n * It flips the `dark` class on the document root rather than shipping a theme\n * provider: that is the one contract every Tailwind setup already has, so the\n * control works the moment the template is installed instead of after wiring.\n */\nconst AccountMenu = ({ align }: { align: \"pane\" | \"rail\" }) => {\n const [isOpen, setIsOpen] = useState(false);\n const [isDark, setIsDark] = useState(false);\n const containerRef = useRef(null);\n\n useEffect(() => {\n setIsDark(document.documentElement.classList.contains(\"dark\"));\n }, []);\n\n useEffect(() => {\n if (!isOpen) {\n return;\n }\n\n const onPointerDown = (event: PointerEvent) => {\n if (!containerRef.current?.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n setIsOpen(false);\n }\n };\n\n document.addEventListener(\"pointerdown\", onPointerDown);\n document.addEventListener(\"keydown\", onKeyDown);\n return () => {\n document.removeEventListener(\"pointerdown\", onPointerDown);\n document.removeEventListener(\"keydown\", onKeyDown);\n };\n }, [isOpen]);\n\n const toggleTheme = () => {\n const next = !document.documentElement.classList.contains(\"dark\");\n document.documentElement.classList.toggle(\"dark\", next);\n setIsDark(next);\n };\n\n return (\n
\n setIsOpen((open) => !open)}\n type=\"button\"\n >\n \n {align === \"pane\" && (\n \n Edu Calvo\n \n Pro plan\n \n \n )}\n \n\n {isOpen ? (\n \n \n ) : (\n \n )\n }\n label={isDark ? \"Light mode\" : \"Dark mode\"}\n onClick={toggleTheme}\n />\n }\n label=\"Settings\"\n />\n }\n label=\"Sign out\"\n />\n
\n ) : null}\n \n );\n};\n\nconst MenuItem = ({\n icon,\n label,\n onClick,\n}: {\n icon: React.ReactNode;\n label: string;\n onClick?: () => void;\n}) => (\n \n {icon}\n {label}\n \n);\n\nexport default ChatSidebar;\n","path":"chat-sidebar.tsx","target":"components/smoothui/chat-template/chat-sidebar.tsx","type":"registry:block"},{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport AIApproval from \"@/components/smoothui/ai-approval\";\nimport AIArtifact from \"@/components/smoothui/ai-artifact\";\nimport AIContextMeter from \"@/components/smoothui/ai-context-meter\";\nimport AIConversation from \"@/components/smoothui/ai-conversation\";\nimport type { AIState } from \"@/components/smoothui/ai-core\";\nimport AIDiff from \"@/components/smoothui/ai-diff\";\nimport AILoader from \"@/components/smoothui/ai-loader\";\nimport AIMessage from \"@/components/smoothui/ai-message\";\nimport AIPromptInput, {\n type AIPromptAttachment,\n} from \"@/components/smoothui/ai-prompt-input\";\nimport AIReasoning from \"@/components/smoothui/ai-reasoning\";\nimport AIResponse from \"@/components/smoothui/ai-response\";\nimport AISources from \"@/components/smoothui/ai-sources\";\nimport AISuggestions from \"@/components/smoothui/ai-suggestions\";\nimport AITaskList from \"@/components/smoothui/ai-task-list\";\nimport AIToolCall from \"@/components/smoothui/ai-tool-call\";\nimport SiriOrb from \"@/components/smoothui/siri-orb\";\nimport { ChevronDown, PanelLeftOpen, Paperclip } from \"lucide-react\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport {\n ATTACHABLE_FILES,\n type ChatTurn,\n CONTEXT_LIMIT,\n MODELS,\n SIMULATED_REPLY,\n STARTER_SUGGESTIONS,\n} from \"./chat-data\";\n\nconst THINK_MS = 900;\nconst TOOL_MS = 1900;\nconst STREAM_INTERVAL_MS = 45;\n/** Rough English ratio, good enough for a meter that is showing pressure. */\nconst CHARS_PER_TOKEN = 4;\nconst SYSTEM_TOKENS = 1800;\nconst TOKENS_PER_SOURCE = 9200;\nconst TOKENS_PER_ATTACHMENT = 6400;\n\ntype LivePhase = \"idle\" | \"thinking\" | \"tool\" | \"streaming\";\n\nconst formatClock = (date: Date) =>\n `${String(date.getHours()).padStart(2, \"0\")}:${String(date.getMinutes()).padStart(2, \"0\")}`;\n\nexport type ChatThreadProps = {\n className?: string;\n /** Opens the conversation list on narrow screens, where it has no column. */\n onOpenSidebar?: () => void;\n title: string;\n turns: ChatTurn[];\n};\n\nexport const ChatThread = ({\n className,\n onOpenSidebar,\n title,\n turns,\n}: ChatThreadProps) => {\n const [localTurns, setLocalTurns] = useState([]);\n const [phase, setPhase] = useState(\"idle\");\n const [streamed, setStreamed] = useState(\"\");\n const [draftAttachments, setDraftAttachments] = useState<\n AIPromptAttachment[]\n >([]);\n const [model, setModel] = useState(MODELS[0].label);\n const timers = useRef[]>([]);\n\n const clearTimers = useCallback(() => {\n for (const timer of timers.current) {\n clearTimeout(timer);\n }\n timers.current = [];\n }, []);\n\n useEffect(() => clearTimers, [clearTimers]);\n\n useEffect(() => {\n if (phase !== \"streaming\") {\n return;\n }\n const words = SIMULATED_REPLY.text.split(\" \");\n let index = 0;\n const interval = setInterval(() => {\n index += 1;\n setStreamed(words.slice(0, index).join(\" \"));\n if (index >= words.length) {\n clearInterval(interval);\n setPhase(\"idle\");\n setLocalTurns((current) => [\n ...current,\n {\n citations: [...SIMULATED_REPLY.citations],\n from: \"assistant\",\n id: `live-a-${current.length}`,\n reasoning: SIMULATED_REPLY.reasoning,\n sources: [...SIMULATED_REPLY.sources],\n suggestions: [...SIMULATED_REPLY.suggestions],\n text: SIMULATED_REPLY.text,\n timestamp: formatClock(new Date()),\n tool: { ...SIMULATED_REPLY.tool },\n },\n ]);\n setStreamed(\"\");\n }\n }, STREAM_INTERVAL_MS);\n return () => clearInterval(interval);\n }, [phase]);\n\n const send = (value: string) => {\n const draft = value.trim();\n if (!draft || phase !== \"idle\") {\n return;\n }\n\n clearTimers();\n const attachments = draftAttachments;\n setDraftAttachments([]);\n setLocalTurns((current) => [\n ...current,\n {\n attachments: attachments.length > 0 ? attachments : undefined,\n from: \"user\",\n id: `live-u-${current.length}`,\n text: draft,\n timestamp: formatClock(new Date()),\n },\n ]);\n setPhase(\"thinking\");\n // Stand-ins for a request's stages. No model runs here.\n timers.current.push(setTimeout(() => setPhase(\"tool\"), THINK_MS));\n timers.current.push(setTimeout(() => setPhase(\"streaming\"), TOOL_MS));\n };\n\n const stop = () => {\n clearTimers();\n setPhase(\"idle\");\n setStreamed(\"\");\n };\n\n // Memoised because the token breakdown below depends on it; a fresh array each\n // render would make that memo pointless.\n const allTurns = useMemo(\n () => [...turns, ...localTurns],\n [turns, localTurns]\n );\n const isBusy = phase !== \"idle\";\n const state: AIState = phase === \"streaming\" ? \"streaming\" : \"thinking\";\n // Derived from what is actually on screen, so an empty chat reads as empty\n // instead of inheriting a fixture's 67k. A fixed number here was a lie the\n // moment you pressed \"New chat\".\n const breakdown = useMemo(() => {\n // Everything the model would actually have been sent, not just the prose:\n // a reasoning trace and an artifact's source are the bulk of a real turn.\n const transcript =\n allTurns.reduce((total, turn) => {\n if (turn.from === \"user\") {\n return total + turn.text.length;\n }\n return (\n total +\n (turn.text?.length ?? 0) +\n (turn.reasoning?.length ?? 0) +\n (turn.artifact?.code.length ?? 0) +\n (turn.tool ? turn.tool.args.length + turn.tool.result.length : 0) +\n (turn.diff?.lines.reduce(\n (chars, line) => chars + line.content.length,\n 0\n ) ?? 0)\n );\n }, 0) / CHARS_PER_TOKEN;\n const retrieved = allTurns.reduce(\n (total, turn) =>\n total +\n (turn.from === \"assistant\" && turn.sources\n ? turn.sources.length * TOKENS_PER_SOURCE\n : 0) +\n (turn.from === \"user\" && turn.attachments\n ? turn.attachments.length * TOKENS_PER_ATTACHMENT\n : 0),\n 0\n );\n\n return [\n { label: \"System\", tokens: SYSTEM_TOKENS },\n {\n label: \"Transcript\",\n tokens: Math.round(transcript + streamed.length / CHARS_PER_TOKEN),\n },\n ...(retrieved > 0\n ? [{ label: \"Retrieved files\", tokens: retrieved }]\n : []),\n ];\n }, [allTurns, streamed]);\n\n const used = breakdown.reduce((total, item) => total + item.tokens, 0);\n\n return (\n
\n
\n {/* The only way into the conversation list on a phone, where the sidebar\n has no column of its own. */}\n {onOpenSidebar ? (\n \n \n \n ) : null}\n

{title}

\n \n
\n\n \n {/* `px-2`, not decoration: the scroller clips at its padding box, and the\n orb avatar sat flush against that edge — its glow extends past its\n own 26px box, so the left of it was being shaved off. */}\n
\n {allTurns.length === 0 && (\n
\n \n

\n Ask about sales, stores or staffing.\n

\n send(suggestion.label)}\n suggestions={STARTER_SUGGESTIONS}\n />\n
\n )}\n\n {allTurns.map((turn) => (\n \n ))}\n\n {isBusy && (\n }\n bubble={false}\n from=\"assistant\"\n >\n
\n \n {SIMULATED_REPLY.reasoning}\n \n\n {phase !== \"thinking\" && (\n {SIMULATED_REPLY.tool.args}}\n name={SIMULATED_REPLY.tool.name}\n result={{SIMULATED_REPLY.tool.result}}\n status={phase === \"tool\" ? \"running\" : \"success\"}\n summary={SIMULATED_REPLY.tool.summary}\n />\n )}\n\n {phase === \"streaming\" ? (\n \n ) : (\n \n )}\n
\n \n )}\n
\n \n\n
\n
\n {\n // Stands in for a file dialog: adds the next unattached file, so\n // the control does something real instead of miming it.\n setDraftAttachments((current) => {\n const next = ATTACHABLE_FILES.find(\n (file) => !current.some((item) => item.id === file.id)\n );\n return next ? [...current, next] : current;\n });\n }}\n onRemoveAttachment={(id) =>\n setDraftAttachments((current) =>\n current.filter((file) => file.id !== id)\n )\n }\n onStop={stop}\n onSubmit={send}\n placeholder=\"Ask anything about the shop…\"\n state={isBusy ? \"streaming\" : \"idle\"}\n >\n \n \n

\n Simulated responses. Nothing is sent anywhere.\n

\n
\n
\n
\n );\n};\n\n/**\n * One transcript turn.\n *\n * Every assistant part is optional and rendered in the order an agent produces\n * it: thinking, tools, plan, changes, artifact, prose, then what it read. New AI\n * components slot in as one more branch here.\n */\nconst ChatTurnView = ({\n onSuggestion,\n turn,\n}: {\n onSuggestion: (value: string) => void;\n turn: ChatTurn;\n}) => {\n if (turn.from === \"user\") {\n return (\n \n \n {turn.text}\n {turn.attachments && turn.attachments.length > 0 && (\n \n {turn.attachments.map((file) => (\n \n \n {file.name}\n {formatBytes(file.size)}\n \n ))}\n \n )}\n
\n \n );\n }\n\n return (\n
\n }\n bubble={false}\n copyText={turn.text}\n from=\"assistant\"\n onRetry={() => {\n // A replayed transcript has nothing to retry against.\n }}\n onVote={() => {\n // Demo only — no telemetry leaves the page.\n }}\n timestamp={turn.timestamp}\n >\n
\n {turn.reasoning ? (\n \n {turn.reasoning}\n \n ) : null}\n\n {turn.tool ? (\n {turn.tool.args}}\n name={turn.tool.name}\n result={{turn.tool.result}}\n status=\"success\"\n summary={turn.tool.summary}\n />\n ) : null}\n\n {turn.tasks ? (\n \n ) : null}\n\n {turn.diff ? (\n \n ) : null}\n\n {turn.artifact ? (\n {turn.artifact.code}\n }\n copyText={turn.artifact.code}\n preview={}\n title={turn.artifact.title}\n />\n ) : null}\n\n {turn.text ? (\n \n ) : null}\n\n {turn.sources ? : null}\n
\n \n\n {turn.approval ? (\n {\n // Demo only.\n }}\n options={turn.approval.options}\n question={turn.approval.question}\n />\n ) : null}\n\n {turn.suggestions ? (\n onSuggestion(suggestion.label)}\n suggestions={turn.suggestions}\n />\n ) : null}\n
\n );\n};\n\nconst KIB = 1024;\nconst MIB = KIB * KIB;\n\nconst formatBytes = (size?: number) => {\n if (!size) {\n return \"\";\n }\n return size >= MIB\n ? `${(size / MIB).toFixed(1)} MB`\n : `${Math.round(size / KIB)} KB`;\n};\n\n/**\n * Model picker for the composer.\n *\n * Small enough to keep local: the template should not drag a popover library in\n * for one menu, and the pattern is the same one the sidebar's account menu uses.\n */\nconst ModelPicker = ({\n onSelect,\n value,\n}: {\n onSelect: (label: string) => void;\n value: string;\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n const containerRef = useRef(null);\n\n useEffect(() => {\n if (!isOpen) {\n return;\n }\n const onPointerDown = (event: PointerEvent) => {\n if (!containerRef.current?.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n setIsOpen(false);\n }\n };\n document.addEventListener(\"pointerdown\", onPointerDown);\n document.addEventListener(\"keydown\", onKeyDown);\n return () => {\n document.removeEventListener(\"pointerdown\", onPointerDown);\n document.removeEventListener(\"keydown\", onKeyDown);\n };\n }, [isOpen]);\n\n return (\n
\n setIsOpen((open) => !open)}\n type=\"button\"\n >\n {value}\n \n \n\n {isOpen ? (\n \n {MODELS.map((option) => (\n {\n onSelect(option.label);\n setIsOpen(false);\n }}\n role=\"menuitem\"\n type=\"button\"\n >\n {option.label}\n \n {option.note}\n \n \n ))}\n
\n ) : null}\n \n );\n};\n\n/** The artifact's rendered pane — the real banner, not a grey box. */\nconst SummerBannerPreview = () => (\n
\n

Summer 2026

\n

Two scoops, one price

\n

\n Every weekday before 5pm, all summer.\n

\n
\n);\n\nexport default ChatThread;\n","path":"chat-thread.tsx","target":"components/smoothui/chat-template/chat-thread.tsx","type":"registry:block"},{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useState } from \"react\";\nimport { type ChatConversation, CONVERSATIONS } from \"./chat-data\";\nimport ChatSidebar from \"./chat-sidebar\";\nimport ChatThread from \"./chat-thread\";\n\nconst NEW_CHAT_ID = \"__new__\";\n\n/** No overshoot: a drawer that bounces past its edge reads as a bug. */\nconst DRAWER_SPRING = { bounce: 0, duration: 0.3, type: \"spring\" as const };\nconst SCRIM_FADE = { duration: 0.2 };\n\nexport type ChatTemplateProps = {\n className?: string;\n /** Which conversation opens first. Defaults to the newest one. */\n defaultConversationId?: string;\n /** Swap in your own transcripts. The shape is `ChatConversation`. */\n conversations?: ChatConversation[];\n};\n\n/**\n * A full chat surface — sidebar, thread, composer — wired to a fixed script.\n *\n * There is no model behind it and no network call anywhere: every reply is\n * scripted in `chat-data.ts`. Point the composer at your own endpoint and the\n * rest of the template is already the product.\n */\nconst ChatTemplate = ({\n className,\n conversations = CONVERSATIONS,\n defaultConversationId,\n}: ChatTemplateProps) => {\n const [activeId, setActiveId] = useState(\n defaultConversationId ?? conversations[0]?.id ?? NEW_CHAT_ID\n );\n const [isSidebarOpen, setIsSidebarOpen] = useState(true);\n // Narrow screens have no column for the list, so it arrives as a drawer.\n const [isDrawerOpen, setIsDrawerOpen] = useState(false);\n const shouldReduceMotion = useReducedMotion();\n\n const open = (id: string) => {\n setActiveId(id);\n setIsDrawerOpen(false);\n };\n\n const active = conversations.find(\n (conversation) => conversation.id === activeId\n );\n\n return (\n \n {/* Collapses to an icon rail rather than disappearing, so navigation stays\n one click away. */}\n open(NEW_CHAT_ID)}\n onSelect={open}\n onToggleCollapsed={() => setIsSidebarOpen((isOpen) => !isOpen)}\n />\n\n {/* Below `md` the same list slides over the thread. Without it there is no\n way to change conversation on a phone, which is most of what a chat\n app's navigation is for.\n\n Both children are keyed: `AnimatePresence` tracks its direct children by\n key, and without one it never runs the enter or the exit — the panel\n just sat parked off-screen. */}\n \n {isDrawerOpen ? (\n <>\n setIsDrawerOpen(false)}\n transition={shouldReduceMotion ? { duration: 0 } : SCRIM_FADE}\n type=\"button\"\n />\n {/* Reduced motion keeps the fade and drops the travel, rather than\n removing the transition altogether. */}\n \n open(NEW_CHAT_ID)}\n onSelect={open}\n onToggleCollapsed={() => setIsDrawerOpen(false)}\n />\n \n \n ) : null}\n \n\n setIsDrawerOpen(true)}\n title={active?.title ?? \"New chat\"}\n turns={active?.turns ?? []}\n />\n \n );\n};\n\nexport default ChatTemplate;\nexport type { ChatConversation, ChatTurn } from \"./chat-data\";\n","path":"index.tsx","target":"components/smoothui/chat-template/index.tsx","type":"registry:block"}],"name":"chat-template","registryDependencies":["https://smoothui.dev/r/ai-approval.json","https://smoothui.dev/r/ai-artifact.json","https://smoothui.dev/r/ai-context-meter.json","https://smoothui.dev/r/ai-conversation.json","https://smoothui.dev/r/ai-core.json","https://smoothui.dev/r/ai-diff.json","https://smoothui.dev/r/ai-loader.json","https://smoothui.dev/r/ai-message.json","https://smoothui.dev/r/ai-prompt-input.json","https://smoothui.dev/r/ai-reasoning.json","https://smoothui.dev/r/ai-response.json","https://smoothui.dev/r/ai-sources.json","https://smoothui.dev/r/ai-suggestions.json","https://smoothui.dev/r/ai-task-list.json","https://smoothui.dev/r/ai-tool-call.json","https://smoothui.dev/r/siri-orb.json"],"title":"Chat Template","type":"registry:block"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","cssVars":{"dark":{"accent":"oklch(0.72 0.2 352.53)","accent-foreground":"oklch(1 0 0)","background":"oklch(0.2 0 0)","border":"oklch(0.315 0 0)","card":"oklch(0.2 0 0)","card-foreground":"oklch(0.96 0 0)","chart-1":"oklch(0.72 0.2 352.53)","chart-2":"oklch(0.66 0.21 354.31)","chart-3":"oklch(0.66 0 0)","chart-4":"oklch(0.47 0 0)","chart-5":"oklch(0.36 0 0)","destructive":"oklch(0.704 0.191 22.216)","foreground":"oklch(0.96 0 0)","input":"oklch(0.55 0 0)","muted":"oklch(0.275 0 0)","muted-foreground":"oklch(0.66 0 0)","popover":"oklch(0.2 0 0)","popover-foreground":"oklch(0.96 0 0)","primary":"oklch(0.235 0 0)","primary-foreground":"oklch(0.85 0 0)","ring":"oklch(0.72 0.2 352.53)","secondary":"oklch(0.275 0 0)","secondary-foreground":"oklch(0.74 0 0)","sidebar":"oklch(0.235 0 0)","sidebar-accent":"oklch(0.275 0 0)","sidebar-accent-foreground":"oklch(0.74 0 0)","sidebar-border":"oklch(0.36 0 0)","sidebar-foreground":"oklch(0.96 0 0)","sidebar-primary":"oklch(0.72 0.2 352.53)","sidebar-primary-foreground":"oklch(1 0 0)","sidebar-ring":"oklch(0.72 0.2 352.53)"},"light":{"accent":"oklch(0.72 0.2 352.53)","accent-foreground":"oklch(1 0 0)","background":"oklch(0.99 0 0)","border":"oklch(0.91 0 0)","card":"oklch(0.99 0 0)","card-foreground":"oklch(0.22 0 0)","chart-1":"oklch(0.72 0.2 352.53)","chart-2":"oklch(0.66 0.21 354.31)","chart-3":"oklch(0.56 0 0)","chart-4":"oklch(0.74 0 0)","chart-5":"oklch(0.865 0 0)","destructive":"oklch(0.577 0.245 27.325)","foreground":"oklch(0.22 0 0)","input":"oklch(0.66 0 0)","muted":"oklch(0.945 0 0)","muted-foreground":"oklch(0.56 0 0)","popover":"oklch(0.99 0 0)","popover-foreground":"oklch(0.22 0 0)","primary":"oklch(0.972 0 0)","primary-foreground":"oklch(0.36 0 0)","ring":"oklch(0.72 0.2 352.53)","secondary":"oklch(0.945 0 0)","secondary-foreground":"oklch(0.47 0 0)","sidebar":"oklch(0.972 0 0)","sidebar-accent":"oklch(0.945 0 0)","sidebar-accent-foreground":"oklch(0.47 0 0)","sidebar-border":"oklch(0.865 0 0)","sidebar-foreground":"oklch(0.22 0 0)","sidebar-primary":"oklch(0.72 0.2 352.53)","sidebar-primary-foreground":"oklch(1 0 0)","sidebar-ring":"oklch(0.72 0.2 352.53)","radius":"0.625rem"},"theme":{"font-sans":"Inter, sans-serif"}},"description":"SmoothUI Candy theme: smooth neutral scale with a candy accent, light and dark mode included.","name":"theme-candy","title":"SmoothUI Candy","type":"registry:theme"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","cssVars":{"dark":{"accent":"oklch(0.65 0.22 300.21)","accent-foreground":"oklch(1 0 0)","background":"oklch(0.2 0 0)","border":"oklch(0.315 0 0)","card":"oklch(0.2 0 0)","card-foreground":"oklch(0.96 0 0)","chart-1":"oklch(0.65 0.22 300.21)","chart-2":"oklch(0.54 0.23 286.53)","chart-3":"oklch(0.66 0 0)","chart-4":"oklch(0.47 0 0)","chart-5":"oklch(0.36 0 0)","destructive":"oklch(0.704 0.191 22.216)","foreground":"oklch(0.96 0 0)","input":"oklch(0.55 0 0)","muted":"oklch(0.275 0 0)","muted-foreground":"oklch(0.66 0 0)","popover":"oklch(0.2 0 0)","popover-foreground":"oklch(0.96 0 0)","primary":"oklch(0.235 0 0)","primary-foreground":"oklch(0.85 0 0)","ring":"oklch(0.65 0.22 300.21)","secondary":"oklch(0.275 0 0)","secondary-foreground":"oklch(0.74 0 0)","sidebar":"oklch(0.235 0 0)","sidebar-accent":"oklch(0.275 0 0)","sidebar-accent-foreground":"oklch(0.74 0 0)","sidebar-border":"oklch(0.36 0 0)","sidebar-foreground":"oklch(0.96 0 0)","sidebar-primary":"oklch(0.65 0.22 300.21)","sidebar-primary-foreground":"oklch(1 0 0)","sidebar-ring":"oklch(0.65 0.22 300.21)"},"light":{"accent":"oklch(0.65 0.22 300.21)","accent-foreground":"oklch(1 0 0)","background":"oklch(0.99 0 0)","border":"oklch(0.91 0 0)","card":"oklch(0.99 0 0)","card-foreground":"oklch(0.22 0 0)","chart-1":"oklch(0.65 0.22 300.21)","chart-2":"oklch(0.54 0.23 286.53)","chart-3":"oklch(0.56 0 0)","chart-4":"oklch(0.74 0 0)","chart-5":"oklch(0.865 0 0)","destructive":"oklch(0.577 0.245 27.325)","foreground":"oklch(0.22 0 0)","input":"oklch(0.66 0 0)","muted":"oklch(0.945 0 0)","muted-foreground":"oklch(0.56 0 0)","popover":"oklch(0.99 0 0)","popover-foreground":"oklch(0.22 0 0)","primary":"oklch(0.972 0 0)","primary-foreground":"oklch(0.36 0 0)","ring":"oklch(0.65 0.22 300.21)","secondary":"oklch(0.945 0 0)","secondary-foreground":"oklch(0.47 0 0)","sidebar":"oklch(0.972 0 0)","sidebar-accent":"oklch(0.945 0 0)","sidebar-accent-foreground":"oklch(0.47 0 0)","sidebar-border":"oklch(0.865 0 0)","sidebar-foreground":"oklch(0.22 0 0)","sidebar-primary":"oklch(0.65 0.22 300.21)","sidebar-primary-foreground":"oklch(1 0 0)","sidebar-ring":"oklch(0.65 0.22 300.21)","radius":"0.625rem"},"theme":{"font-sans":"Inter, sans-serif"}},"description":"SmoothUI Indigo theme: smooth neutral scale with a indigo accent, light and dark mode included.","name":"theme-indigo","title":"SmoothUI Indigo","type":"registry:theme"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","cssVars":{"dark":{"accent":"oklch(0.67 0.17 257.78)","accent-foreground":"oklch(1 0 0)","background":"oklch(0.2 0 0)","border":"oklch(0.315 0 0)","card":"oklch(0.2 0 0)","card-foreground":"oklch(0.96 0 0)","chart-1":"oklch(0.67 0.17 257.78)","chart-2":"oklch(0.59 0.21 258.02)","chart-3":"oklch(0.66 0 0)","chart-4":"oklch(0.47 0 0)","chart-5":"oklch(0.36 0 0)","destructive":"oklch(0.704 0.191 22.216)","foreground":"oklch(0.96 0 0)","input":"oklch(0.55 0 0)","muted":"oklch(0.275 0 0)","muted-foreground":"oklch(0.66 0 0)","popover":"oklch(0.2 0 0)","popover-foreground":"oklch(0.96 0 0)","primary":"oklch(0.235 0 0)","primary-foreground":"oklch(0.85 0 0)","ring":"oklch(0.67 0.17 257.78)","secondary":"oklch(0.275 0 0)","secondary-foreground":"oklch(0.74 0 0)","sidebar":"oklch(0.235 0 0)","sidebar-accent":"oklch(0.275 0 0)","sidebar-accent-foreground":"oklch(0.74 0 0)","sidebar-border":"oklch(0.36 0 0)","sidebar-foreground":"oklch(0.96 0 0)","sidebar-primary":"oklch(0.67 0.17 257.78)","sidebar-primary-foreground":"oklch(1 0 0)","sidebar-ring":"oklch(0.67 0.17 257.78)"},"light":{"accent":"oklch(0.67 0.17 257.78)","accent-foreground":"oklch(1 0 0)","background":"oklch(0.99 0 0)","border":"oklch(0.91 0 0)","card":"oklch(0.99 0 0)","card-foreground":"oklch(0.22 0 0)","chart-1":"oklch(0.67 0.17 257.78)","chart-2":"oklch(0.59 0.21 258.02)","chart-3":"oklch(0.56 0 0)","chart-4":"oklch(0.74 0 0)","chart-5":"oklch(0.865 0 0)","destructive":"oklch(0.577 0.245 27.325)","foreground":"oklch(0.22 0 0)","input":"oklch(0.66 0 0)","muted":"oklch(0.945 0 0)","muted-foreground":"oklch(0.56 0 0)","popover":"oklch(0.99 0 0)","popover-foreground":"oklch(0.22 0 0)","primary":"oklch(0.972 0 0)","primary-foreground":"oklch(0.36 0 0)","ring":"oklch(0.67 0.17 257.78)","secondary":"oklch(0.945 0 0)","secondary-foreground":"oklch(0.47 0 0)","sidebar":"oklch(0.972 0 0)","sidebar-accent":"oklch(0.945 0 0)","sidebar-accent-foreground":"oklch(0.47 0 0)","sidebar-border":"oklch(0.865 0 0)","sidebar-foreground":"oklch(0.22 0 0)","sidebar-primary":"oklch(0.67 0.17 257.78)","sidebar-primary-foreground":"oklch(1 0 0)","sidebar-ring":"oklch(0.67 0.17 257.78)","radius":"0.625rem"},"theme":{"font-sans":"Inter, sans-serif"}},"description":"SmoothUI Blue theme: smooth neutral scale with a blue accent, light and dark mode included.","name":"theme-blue","title":"SmoothUI Blue","type":"registry:theme"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","cssVars":{"dark":{"accent":"oklch(0.67 0.21 24.28)","accent-foreground":"oklch(1 0 0)","background":"oklch(0.2 0 0)","border":"oklch(0.315 0 0)","card":"oklch(0.2 0 0)","card-foreground":"oklch(0.96 0 0)","chart-1":"oklch(0.67 0.21 24.28)","chart-2":"oklch(0.62 0.25 28.23)","chart-3":"oklch(0.66 0 0)","chart-4":"oklch(0.47 0 0)","chart-5":"oklch(0.36 0 0)","destructive":"oklch(0.704 0.191 22.216)","foreground":"oklch(0.96 0 0)","input":"oklch(0.55 0 0)","muted":"oklch(0.275 0 0)","muted-foreground":"oklch(0.66 0 0)","popover":"oklch(0.2 0 0)","popover-foreground":"oklch(0.96 0 0)","primary":"oklch(0.235 0 0)","primary-foreground":"oklch(0.85 0 0)","ring":"oklch(0.67 0.21 24.28)","secondary":"oklch(0.275 0 0)","secondary-foreground":"oklch(0.74 0 0)","sidebar":"oklch(0.235 0 0)","sidebar-accent":"oklch(0.275 0 0)","sidebar-accent-foreground":"oklch(0.74 0 0)","sidebar-border":"oklch(0.36 0 0)","sidebar-foreground":"oklch(0.96 0 0)","sidebar-primary":"oklch(0.67 0.21 24.28)","sidebar-primary-foreground":"oklch(1 0 0)","sidebar-ring":"oklch(0.67 0.21 24.28)"},"light":{"accent":"oklch(0.67 0.21 24.28)","accent-foreground":"oklch(1 0 0)","background":"oklch(0.99 0 0)","border":"oklch(0.91 0 0)","card":"oklch(0.99 0 0)","card-foreground":"oklch(0.22 0 0)","chart-1":"oklch(0.67 0.21 24.28)","chart-2":"oklch(0.62 0.25 28.23)","chart-3":"oklch(0.56 0 0)","chart-4":"oklch(0.74 0 0)","chart-5":"oklch(0.865 0 0)","destructive":"oklch(0.577 0.245 27.325)","foreground":"oklch(0.22 0 0)","input":"oklch(0.66 0 0)","muted":"oklch(0.945 0 0)","muted-foreground":"oklch(0.56 0 0)","popover":"oklch(0.99 0 0)","popover-foreground":"oklch(0.22 0 0)","primary":"oklch(0.972 0 0)","primary-foreground":"oklch(0.36 0 0)","ring":"oklch(0.67 0.21 24.28)","secondary":"oklch(0.945 0 0)","secondary-foreground":"oklch(0.47 0 0)","sidebar":"oklch(0.972 0 0)","sidebar-accent":"oklch(0.945 0 0)","sidebar-accent-foreground":"oklch(0.47 0 0)","sidebar-border":"oklch(0.865 0 0)","sidebar-foreground":"oklch(0.22 0 0)","sidebar-primary":"oklch(0.67 0.21 24.28)","sidebar-primary-foreground":"oklch(1 0 0)","sidebar-ring":"oklch(0.67 0.21 24.28)","radius":"0.625rem"},"theme":{"font-sans":"Inter, sans-serif"}},"description":"SmoothUI Red theme: smooth neutral scale with a red accent, light and dark mode included.","name":"theme-red","title":"SmoothUI Red","type":"registry:theme"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","cssVars":{"dark":{"accent":"oklch(0.75 0.17 47.65)","accent-foreground":"oklch(1 0 0)","background":"oklch(0.2 0 0)","border":"oklch(0.315 0 0)","card":"oklch(0.2 0 0)","card-foreground":"oklch(0.96 0 0)","chart-1":"oklch(0.75 0.17 47.65)","chart-2":"oklch(0.68 0.21 40.59)","chart-3":"oklch(0.66 0 0)","chart-4":"oklch(0.47 0 0)","chart-5":"oklch(0.36 0 0)","destructive":"oklch(0.704 0.191 22.216)","foreground":"oklch(0.96 0 0)","input":"oklch(0.55 0 0)","muted":"oklch(0.275 0 0)","muted-foreground":"oklch(0.66 0 0)","popover":"oklch(0.2 0 0)","popover-foreground":"oklch(0.96 0 0)","primary":"oklch(0.235 0 0)","primary-foreground":"oklch(0.85 0 0)","ring":"oklch(0.75 0.17 47.65)","secondary":"oklch(0.275 0 0)","secondary-foreground":"oklch(0.74 0 0)","sidebar":"oklch(0.235 0 0)","sidebar-accent":"oklch(0.275 0 0)","sidebar-accent-foreground":"oklch(0.74 0 0)","sidebar-border":"oklch(0.36 0 0)","sidebar-foreground":"oklch(0.96 0 0)","sidebar-primary":"oklch(0.75 0.17 47.65)","sidebar-primary-foreground":"oklch(1 0 0)","sidebar-ring":"oklch(0.75 0.17 47.65)"},"light":{"accent":"oklch(0.75 0.17 47.65)","accent-foreground":"oklch(1 0 0)","background":"oklch(0.99 0 0)","border":"oklch(0.91 0 0)","card":"oklch(0.99 0 0)","card-foreground":"oklch(0.22 0 0)","chart-1":"oklch(0.75 0.17 47.65)","chart-2":"oklch(0.68 0.21 40.59)","chart-3":"oklch(0.56 0 0)","chart-4":"oklch(0.74 0 0)","chart-5":"oklch(0.865 0 0)","destructive":"oklch(0.577 0.245 27.325)","foreground":"oklch(0.22 0 0)","input":"oklch(0.66 0 0)","muted":"oklch(0.945 0 0)","muted-foreground":"oklch(0.56 0 0)","popover":"oklch(0.99 0 0)","popover-foreground":"oklch(0.22 0 0)","primary":"oklch(0.972 0 0)","primary-foreground":"oklch(0.36 0 0)","ring":"oklch(0.75 0.17 47.65)","secondary":"oklch(0.945 0 0)","secondary-foreground":"oklch(0.47 0 0)","sidebar":"oklch(0.972 0 0)","sidebar-accent":"oklch(0.945 0 0)","sidebar-accent-foreground":"oklch(0.47 0 0)","sidebar-border":"oklch(0.865 0 0)","sidebar-foreground":"oklch(0.22 0 0)","sidebar-primary":"oklch(0.75 0.17 47.65)","sidebar-primary-foreground":"oklch(1 0 0)","sidebar-ring":"oklch(0.75 0.17 47.65)","radius":"0.625rem"},"theme":{"font-sans":"Inter, sans-serif"}},"description":"SmoothUI Orange theme: smooth neutral scale with a orange accent, light and dark mode included.","name":"theme-orange","title":"SmoothUI Orange","type":"registry:theme"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","cssVars":{"dark":{"accent":"oklch(0.70 0.15 162.48)","accent-foreground":"oklch(1 0 0)","background":"oklch(0.2 0 0)","border":"oklch(0.315 0 0)","card":"oklch(0.2 0 0)","card-foreground":"oklch(0.96 0 0)","chart-1":"oklch(0.70 0.15 162.48)","chart-2":"oklch(0.60 0.13 163.23)","chart-3":"oklch(0.66 0 0)","chart-4":"oklch(0.47 0 0)","chart-5":"oklch(0.36 0 0)","destructive":"oklch(0.704 0.191 22.216)","foreground":"oklch(0.96 0 0)","input":"oklch(0.55 0 0)","muted":"oklch(0.275 0 0)","muted-foreground":"oklch(0.66 0 0)","popover":"oklch(0.2 0 0)","popover-foreground":"oklch(0.96 0 0)","primary":"oklch(0.235 0 0)","primary-foreground":"oklch(0.85 0 0)","ring":"oklch(0.70 0.15 162.48)","secondary":"oklch(0.275 0 0)","secondary-foreground":"oklch(0.74 0 0)","sidebar":"oklch(0.235 0 0)","sidebar-accent":"oklch(0.275 0 0)","sidebar-accent-foreground":"oklch(0.74 0 0)","sidebar-border":"oklch(0.36 0 0)","sidebar-foreground":"oklch(0.96 0 0)","sidebar-primary":"oklch(0.70 0.15 162.48)","sidebar-primary-foreground":"oklch(1 0 0)","sidebar-ring":"oklch(0.70 0.15 162.48)"},"light":{"accent":"oklch(0.70 0.15 162.48)","accent-foreground":"oklch(1 0 0)","background":"oklch(0.99 0 0)","border":"oklch(0.91 0 0)","card":"oklch(0.99 0 0)","card-foreground":"oklch(0.22 0 0)","chart-1":"oklch(0.70 0.15 162.48)","chart-2":"oklch(0.60 0.13 163.23)","chart-3":"oklch(0.56 0 0)","chart-4":"oklch(0.74 0 0)","chart-5":"oklch(0.865 0 0)","destructive":"oklch(0.577 0.245 27.325)","foreground":"oklch(0.22 0 0)","input":"oklch(0.66 0 0)","muted":"oklch(0.945 0 0)","muted-foreground":"oklch(0.56 0 0)","popover":"oklch(0.99 0 0)","popover-foreground":"oklch(0.22 0 0)","primary":"oklch(0.972 0 0)","primary-foreground":"oklch(0.36 0 0)","ring":"oklch(0.70 0.15 162.48)","secondary":"oklch(0.945 0 0)","secondary-foreground":"oklch(0.47 0 0)","sidebar":"oklch(0.972 0 0)","sidebar-accent":"oklch(0.945 0 0)","sidebar-accent-foreground":"oklch(0.47 0 0)","sidebar-border":"oklch(0.865 0 0)","sidebar-foreground":"oklch(0.22 0 0)","sidebar-primary":"oklch(0.70 0.15 162.48)","sidebar-primary-foreground":"oklch(1 0 0)","sidebar-ring":"oklch(0.70 0.15 162.48)","radius":"0.625rem"},"theme":{"font-sans":"Inter, sans-serif"}},"description":"SmoothUI Green theme: smooth neutral scale with a green accent, light and dark mode included.","name":"theme-green","title":"SmoothUI Green","type":"registry:theme"},{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","description":"Teaches AI coding assistants how to install SmoothUI components, blocks, and themes, and how to follow SmoothUI animation conventions.","files":[{"content":"---\nname: smoothui\ndescription: Install and use SmoothUI — animated React components and blocks built with Tailwind CSS v4 and Motion, distributed through a shadcn-compatible registry. Use when adding animated UI components, page blocks, or SmoothUI themes to a project.\n---\n\n# SmoothUI\n\nSmoothUI is a registry of animated React components (buttons, inputs, cards, AI chat primitives) and page blocks (heroes, pricing, testimonials, FAQs, CTAs) built with React 19, Tailwind CSS v4, and Motion (Framer Motion). Docs: https://smoothui.dev\n\n## Installing components\n\nEvery item installs through the shadcn CLI. Browse names at https://smoothui.dev/doc or fetch the machine-readable index at https://smoothui.dev/r/registry.json\n\n```bash\n# Single component\nnpx shadcn@latest add https://smoothui.dev/r/smooth-button.json\n\n# Page block (brings its dependencies automatically)\nnpx shadcn@latest add https://smoothui.dev/r/pricing-1.json\n```\n\nTo enable the short `@smoothui/` syntax, add the namespace to `components.json`:\n\n```json\n{\n \"registries\": {\n \"@smoothui\": \"https://smoothui.dev/r/{name}.json\"\n }\n}\n```\n\nThen: `npx shadcn@latest add @smoothui/smooth-button`\n\n## Where files land\n\n- Components and blocks: `components/smoothui//`\n- Shared block helpers: `components/smoothui/shared/`\n- Animation constants: `components/smoothui/lib/animation.ts`\n- Demo data helpers: `lib/smoothui-data/`\n\nImports inside installed files use the `@/` alias and resolve out of the box in any shadcn-initialized project.\n\n## Themes\n\nSmoothUI ships installable color themes (light + dark, standard shadcn CSS variables, compatible with Radix UI and Base UI projects):\n\n```bash\nnpx shadcn@latest add https://smoothui.dev/r/theme-candy.json\n# Also: theme-indigo, theme-blue, theme-red, theme-orange, theme-green\n```\n\n## Animation conventions (follow when extending SmoothUI components)\n\n- Animate only `transform` and `opacity`; durations 0.2–0.3s for UI.\n- Spring animations: `{ type: \"spring\", duration: 0.25, bounce: 0.1 }`; bounce above 0.1 only for playful or drag interactions.\n- Easing: `cubic-bezier` values, never string easing like `\"easeInOut\"`. Entering elements: `cubic-bezier(.23, 1, .32, 1)`.\n- Accessibility is mandatory: import `useReducedMotion` from `motion/react`, and disable or reduce animations when it returns true.\n- Hover-driven animation needs hover-capable device detection: `window.matchMedia(\"(hover: hover) and (pointer: fine)\")`.\n\n## AI-friendly endpoints\n\n- `https://smoothui.dev/llms.txt` — index for LLMs\n- `https://smoothui.dev/llms-full.txt` — full documentation dump\n- `https://smoothui.dev/llms-components.json` — structured component metadata\n","path":"SKILL.md","target":".claude/skills/smoothui/SKILL.md","type":"registry:file"}],"name":"skill","title":"SmoothUI Skill","type":"registry:item"}],"name":"SmoothUI Registry"}