{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"demos","type":"registry:block","files":[{"path":"registry/100xui/blocks/parallax-cards/components/parallax-cards.demo.tsx","content":"import Image from \"next/image\";\n\nimport Image1 from \"@/public/calvin-1.jpg\";\nimport Image21 from \"@/public/calvin-couple-jeans.jpg\";\nimport Image22 from \"@/public/calvin-couple-jeans-2.jpg\";\nimport Image31 from \"@/public/denim-black.jpg\";\nimport Image32 from \"@/public/calvin.jpg\";\nimport Image41 from \"@/public/download.webp\";\nimport Image42 from \"@/public/image-41.jpg\";\n\nimport { ParallaxCards } from \"./parallax-cards\";\nexport function ParallaxCardsDemo() {\n  return (\n    <ParallaxCards maxStackedCards={3} top=\"54px\">\n      <PlaceholderCard\n      // index={0}\n      >\n        <Image src={Image1} alt=\"\" fill className=\"object-cover object-top\" />\n      </PlaceholderCard>\n      <PlaceholderCard>\n        <div className=\"grid size-full grid-cols-2\">\n          <div className=\"relative w-full\">\n            <Image\n              src={Image21}\n              alt=\"\"\n              fill\n              className=\"object-cover object-bottom\"\n            />\n          </div>\n          <div className=\"relative w-full\">\n            <Image\n              src={Image22}\n              alt=\"\"\n              fill\n              className=\"object-cover object-top\"\n            />\n          </div>\n        </div>\n      </PlaceholderCard>\n      <PlaceholderCard>\n        <div className=\"grid size-full grid-cols-2\">\n          <div className=\"relative w-full\">\n            <Image\n              src={Image32}\n              alt=\"\"\n              fill\n              className=\"object-cover object-bottom\"\n            />\n          </div>\n          <div className=\"relative w-full\">\n            <Image\n              src={Image31}\n              alt=\"\"\n              fill\n              className=\"object-cover object-top\"\n            />\n          </div>\n        </div>\n      </PlaceholderCard>\n      <PlaceholderCard>\n        <div className=\"grid size-full grid-cols-2\">\n          <div className=\"relative w-full\">\n            <Image\n              src={Image42}\n              alt=\"\"\n              fill\n              className=\"object-cover object-bottom\"\n            />\n          </div>\n          <div className=\"relative w-full\">\n            <Image\n              src={Image41}\n              alt=\"\"\n              fill\n              className=\"object-cover object-top\"\n            />\n          </div>\n        </div>\n      </PlaceholderCard>\n    </ParallaxCards>\n  );\n}\n\nfunction PlaceholderCard({\n  // index,\n  children,\n}: {\n  // index: number;\n  children: React.ReactNode;\n}) {\n  // function Message({ children }: { children: string }) {\n  //   return (\n  //     <span className=\"absolute top-0.75 left-0.75 text-[9px] leading-none sm:text-xs\">\n  //       {children}\n  //     </span>\n  //   );\n  // }\n\n  return (\n    <div\n      className=\"relative h-140\"\n      // style={{ backgroundColor: `var(--chart-${index + 1})` }}\n    >\n      {/* <div className=\"border-foreground relative size-full border border-dashed p-4 sm:p-5\">\n        <Message>Parallax Cards</Message>\n\n        <div className=\"size-full p-3.5 sm:p-5\">\n          <div className=\"border-foreground relative z-20 size-full border p-4 sm:px-6 sm:py-5\">\n            <Message>{`Card #${index + 1}`}</Message>\n\n            <div className=\"border-foreground relative grid size-full place-items-center overflow-hidden border border-dashed\">\n              <PlusIcon />\n            </div>\n          </div>\n        </div>\n      </div> */}\n      {children}\n    </div>\n  );\n}\n","type":"registry:component"},{"path":"registry/100xui/blocks/spinning-testimonials/components/spinning-testimonials.demo.tsx","content":"import { SpinningCarousel } from \"./spinning-carousel\";\r\nimport {\r\n  TestimonialCard,\r\n  TestimonialContent,\r\n  TestimonialAvatar,\r\n  TestimonialAvatarFallback,\r\n  TestimonialAvatarImage,\r\n  TestimonialName,\r\n  TestimonialPosition,\r\n  TestimonialAuthor,\r\n} from \"./ui/testimonial\";\r\n\r\nexport function SpinningTestimonialsDemo() {\r\n  return (\r\n    <SpinningCarousel className=\"h-[calc(500px_-_30vw)] min-h-60 lg:h-[calc(400px_-_7vw)]\">\r\n      {TESTIMONIALS.map(({ name, testimonial, position, src, fallback }) => (\r\n        <TestimonialCard key={name}>\r\n          <TestimonialContent className=\"-indent-1.5 lg:-indent-2\">\r\n            &quot;{testimonial}&quot;\r\n          </TestimonialContent>\r\n          <TestimonialAuthor>\r\n            <TestimonialAvatar className=\"size-10\">\r\n              <TestimonialAvatarImage src={src} />\r\n              <TestimonialAvatarFallback>{fallback}</TestimonialAvatarFallback>\r\n            </TestimonialAvatar>\r\n            <TestimonialName>{name}</TestimonialName>\r\n            <TestimonialPosition>{position}</TestimonialPosition>\r\n          </TestimonialAuthor>\r\n        </TestimonialCard>\r\n      ))}\r\n    </SpinningCarousel>\r\n  );\r\n}\r\n\r\nconst TESTIMONIALS = [\r\n  {\r\n    testimonial:\r\n      \"This SaaS cut our onboarding time from days to hours, all without messy spreadsheets.\",\r\n    name: \"Guillermo Rauch\",\r\n    position: \"CEO / Vercel\",\r\n    src: \"https://github.com/rauchg.png\",\r\n    fallback: \"GR\",\r\n  },\r\n  {\r\n    testimonial:\r\n      \"The dashboard delivers real-time insights, helping us make faster, smarter decisions.\",\r\n    name: \"Theo Browne\",\r\n    position: \"CEO / Ping Labs\",\r\n    src: \"https://github.com/t3dotgg.png\",\r\n    fallback: \"TB\",\r\n  },\r\n  {\r\n    testimonial:\r\n      \"We replaced three tools with this one. It’s clean, intuitive, and a joy to use.We replaced three tools with this one. It’s clean, intuitive, and a joy to use.\",\r\n    name: \"Kent C. Dodds\",\r\n    position: \"Frontend Educator\",\r\n    src: \"https://github.com/kentcdodds.png\",\r\n    fallback: \"KCD\",\r\n  },\r\n  {\r\n    testimonial:\r\n      \"Support is fast, friendly, and the product keeps getting better with each update.\",\r\n    name: \"shadcn\",\r\n    position: \"Creator of shadcn/ui\",\r\n    src: \"https://github.com/shadcn.png\",\r\n    fallback: \"CN\",\r\n  },\r\n  {\r\n    name: \"Paul Copperstone\",\r\n    position: \"CEO / Supabase\",\r\n    testimonial:\r\n      \"Setup took less than a day, and productivity improved immediately across teams.\",\r\n    src: \"https://github.com/kiwicopple.png\",\r\n    fallback: \"PC\",\r\n  },\r\n];\r\n","type":"registry:component"},{"path":"registry/100xui/blocks/motion-dock/components/motion-dock.demo.tsx","content":"import {\n  CpuIcon,\n  PaperclipIcon,\n  GlobeIcon,\n  MicIcon,\n  AudioLinesIcon,\n} from \"lucide-react\";\nimport { MotionDock, type MotionDockProps } from \"./motion-dock\";\n\nexport function MotionDockDemo() {\n  return <MotionDock className=\"[&_svg]:size-4.5\" {...demoProps} />;\n}\nconst demoProps: MotionDockProps = {\n  dockItems: [\n    {\n      icon: <CpuIcon />,\n      tooltip: \"Choose a model\",\n    },\n    {\n      icon: <GlobeIcon />,\n      tooltip: \"Set sources for search\",\n    },\n    {\n      icon: <PaperclipIcon />,\n      tooltip: \"Attach files\",\n    },\n\n    {\n      icon: <MicIcon />,\n      tooltip: \"Dictation\",\n    },\n    {\n      icon: <AudioLinesIcon />,\n      tooltip: \"Voice mode\",\n      className: \"text-destructive\",\n    },\n  ],\n};\n","type":"registry:component"},{"path":"registry/100xui/blocks/motion-link/components/motion-link.demo.tsx","content":"import {\n  MotionLinkSlideText,\n  MotionLinkUnderline,\n  MotionLinkWithIcon,\n} from \"./motion-link\";\n\nexport function MotionLinkDemo() {\n  return (\n    <div className=\"[&>a]:text-foreground flex flex-col items-center justify-center gap-x-10 gap-y-5 text-lg sm:flex-row sm:text-xl\">\n      <MotionLinkUnderline\n        href=\"/components/motion-link\"\n        tabIndex={1}\n        underlineColor=\"linear-gradient(to right,var(--secondary),var(--primary))\"\n      >\n        Focus me\n      </MotionLinkUnderline>\n      <MotionLinkSlideText\n        href=\"./components/motion-link\"\n        className=\"uppercase italic\"\n        tabIndex={2}\n      >\n        Hover me\n      </MotionLinkSlideText>\n      <MotionLinkWithIcon\n        href=\"https://github.com/YashwantOstwal/100xui\"\n        icon={<GithubIcon className=\"size-5\" />}\n        iconWidth=\"calc(var(--spacing) * 5)\"\n        gap=\"calc(var(--spacing) * 2)\"\n        tabIndex={3}\n      >\n        Github\n      </MotionLinkWithIcon>\n    </div>\n  );\n}\n\nfunction GithubIcon(props: React.ComponentProps<\"svg\">) {\n  return (\n    <svg\n      viewBox=\"0 0 438.549 438.549\"\n      width=\"438.549\"\n      height=\"438.549\"\n      {...props}\n    >\n      <path\n        stroke=\"currentColor\"\n        fill=\"currentColor\"\n        d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\n      ></path>\n    </svg>\n  );\n}\n","type":"registry:component"},{"path":"registry/100xui/blocks/in-page-navbar/components/in-page-navbar.demo.tsx","content":"import { InPageNavbar } from \"./in-page-navbar\";\n\nexport function InPageNavbarDemo() {\n  return <InPageNavbar logo={logo} sections={sections} />;\n}\n\nconst logo = (\n    <div className=\"px-1 text-lg leading-none font-semibold sm:py-0.5\">\n      100<span className=\"text-destructive\">x</span>U\n      <span className=\"text-destructive\">I</span>\n    </div>\n  ),\n  sections = [\n    {\n      label: \"About\",\n      id: \"about\",\n    },\n    {\n      label: \"Pricing\",\n      id: \"pricing\",\n    },\n    {\n      label: \"API Usage\",\n      id: \"api-usage\",\n    },\n    {\n      label: \"Installation\",\n      id: \"installation\",\n    },\n    {\n      label: \"Documentation\",\n      id: \"documentation\",\n    },\n  ];\n","type":"registry:component"},{"path":"registry/100xui/blocks/morph-modal/components/morph-modal.demo.tsx","content":"\"use client\";\r\n\r\nimport { PlayIcon } from \"lucide-react\";\r\n\r\nimport {\r\n  MorphModal,\r\n  MorphModalTrigger,\r\n  MorphModalContent,\r\n  MorphModalOverlay,\r\n} from \"./morph-modal\";\r\n\r\nexport function MorphModalDemo() {\r\n  return (\r\n    <MorphModal transition={{ ease: \"easeInOut\" }}>\r\n      <MorphModalTrigger className=\"bg-secondary text-secondary-foreground border-border/50 rounded-full border px-3.5 py-2\">\r\n        <div className=\"flex items-center gap-1.5\">\r\n          Watch demo\r\n          <PlayIcon className=\"fill-foreground stroke-foreground bg-background box-content size-3.5 rounded-full p-1\" />\r\n        </div>\r\n      </MorphModalTrigger>\r\n      <MorphModalOverlay className=\"z-50\">\r\n        <MorphModalContent className=\"bg-muted border-border/50 m-2 rounded-xl border p-1\">\r\n          <iframe\r\n            className=\"aspect-[560/315] max-w-full rounded-lg\"\r\n            width=\"768px\"\r\n            height=\"auto\"\r\n            src=\"https://www.youtube.com/embed/aWBiZc5XKJM?si=muuRWjXzomYeoQ2K\"\r\n            title=\"YouTube video player\"\r\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\r\n            referrerPolicy=\"strict-origin-when-cross-origin\"\r\n            allowFullScreen\r\n          />\r\n        </MorphModalContent>\r\n      </MorphModalOverlay>\r\n    </MorphModal>\r\n  );\r\n}\r\n","type":"registry:component"},{"path":"registry/100xui/blocks/text-switcher/components/text-switcher.demo.tsx","content":"import { TextSwitcher } from \"./text-switcher\";\n\nexport function TextSwitcherDemo() {\n  return (\n    <div className=\"text-sm sm:text-base md:text-xl lg:text-2xl\">\n      As someone who styles divs and <br className=\"md:hidden\" /> solves\n      backend&nbsp;\n      <br className=\"max-md:hidden\" />\n      nightmares, I write <br className=\"md:hidden\" />\n      code that&nbsp;\n      <TextSwitcher\n        phrases={[\"compiles\", \"ships\", \"breaks\", \"runs anyway\"]}\n        className=\"font-medium\"\n      />\n    </div>\n  );\n}\n","type":"registry:component"},{"path":"registry/100xui/blocks/notification/components/notification.demo.tsx","content":"import {\n  Notification,\n  NotificationCancel,\n  NotificationContent,\n  NotificationTrigger,\n} from \"./notification\";\n\nexport function NotificationDemo() {\n  return (\n    <Notification\n      className=\"right-5 bottom-5 z-50 max-w-xs text-sm\"\n      slideContentFrom=\"bottom\"\n    >\n      <NotificationTrigger>\n        <h3 className=\"font-medium\">Nexus raises $40M Series B 🎉</h3>\n        <p className=\"mt-1 text-xs\">\n          Fueling the future of social identity and agent-driven play.\n        </p>\n      </NotificationTrigger>\n      <NotificationContent className=\"max-h-(--container-xs)\">\n        The new funding, led by Aurora Ventures and Vector Capital, will help us\n        advance agent identity, expand cross-world integrations, and elevate the\n        creator experience across the Nexus ecosystem.\n      </NotificationContent>\n      <NotificationCancel />\n    </Notification>\n  );\n}\n","type":"registry:component"},{"path":"registry/100xui/blocks/chat-bento-card/components/chat-bento-card.demo.tsx","content":"import { ChatBentoCard, type ChatMessageType } from \"./chat-bento-card\";\n\nexport function ChatBentoCardDemo() {\n  return (\n    <div className=\"border-border bg-card box-content w-full max-w-96 rounded-md border px-1 pt-0\">\n      <ChatBentoCard\n        className=\"aspect-square\"\n        viewOptions={{ threshold: 0.75 }}\n        messages={messages}\n      />\n      <div className=\"p-3\">\n        <div className=\"text-card-foreground mb-2 font-medium\">\n          Chat bento card\n        </div>\n        <p className=\"text-muted-foreground text-sm\">\n          A Bento chat interface card that mimics live chat interactions, great\n          for embedding conversational UI demos in a Bento grid.\n        </p>\n      </div>\n    </div>\n  );\n}\n\nconst messages: ChatMessageType[] = [\n  {\n    type: \"outgoing\",\n    content: (\n      <>\n        Have you seen <span className=\"font-medium\">100xUI</span>? The motion\n        components are truly impressive.\n      </>\n    ),\n  },\n  {\n    type: \"incoming\",\n    from: \"Founder\",\n    avatarProps: {\n      src: \"/bento-card-avatar.png\",\n      fallback: \"FO\",\n    },\n    content: (\n      <p>\n        Agreed. That level of craftsmanship is exactly what we need. We should\n        hire its creator for our team.\n      </p>\n    ),\n  },\n  {\n    type: \"outgoing\",\n\n    content: <>My thoughts exactly. Let&apos;s make an offer.</>,\n  },\n  {\n    type: \"incoming\",\n    from: \"Founder\",\n    avatarProps: {\n      src: \"/bento-card-avatar.png\",\n      fallback: \"FO\",\n    },\n    content: <p>Definitely. Get the process started.</p>,\n  },\n];\n","type":"registry:component"},{"path":"registry/100xui/blocks/apple-gallery/components/apple-gallery.demo.tsx","content":"\"use client\";\n\nimport Image from \"next/image\";\n\nimport { Card } from \"@/components/ui/card\";\nimport {\n  AppleGallery,\n  AppleGalleryContainer,\n  AppleGalleryControls,\n} from \"./apple-gallery\";\n\nimport CeramicShield from \"@/public/demo/apple-cards-slideshow/CeramicShield.jpeg\";\nimport Cameras from \"@/public/demo/apple-cards-slideshow/Cameras.png\";\nimport ChipBattery from \"@/public/demo/apple-cards-slideshow/ChipBattery.jpeg\";\nimport FrontCamera from \"@/public/demo/apple-cards-slideshow/FrontCamera.jpeg\";\nimport Intelligence from \"@/public/demo/apple-cards-slideshow/Intelligence.jpeg\";\nimport { useEffect, useState } from \"react\";\n\nconst IPHONE_FEATURE_IMAGES_PROPS = [\n  { src: CeramicShield, alt: \"Ceramic Shield\" },\n  { src: Cameras, alt: \"Cameras\" },\n  { src: ChipBattery, alt: \"Chip & Battery\" },\n  { src: FrontCamera, alt: \"Front Camera\" },\n  { src: Intelligence, alt: \"Intelligence\" },\n];\n\nexport function AppleGalleryDemo() {\n  const matches = useMediaQuery(\"(max-width: 767px)\");\n  return (\n    <AppleGallery>\n      <AppleGalleryContainer\n        {...(matches && {\n          paddingInlineInPx: 25,\n          gapInPx: 10,\n        })}\n        className=\"h-100 max-h-screen md:h-160\"\n      >\n        {IPHONE_FEATURE_IMAGES_PROPS.map((props) => (\n          <Card key={props.alt} className=\"relative overflow-hidden\">\n            <Image\n              fill\n              {...props}\n              className=\"size-full object-cover object-top\"\n            />\n          </Card>\n        ))}\n      </AppleGalleryContainer>\n      <AppleGalleryControls />\n    </AppleGallery>\n  );\n}\n\nexport function useMediaQuery(query: string) {\n  const [matches, setMatches] = useState(() => {\n    const isServer = typeof window == \"undefined\";\n    if (isServer) return false;\n    return window.matchMedia(query).matches;\n  });\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    const mediaQueryList = window.matchMedia(query);\n\n    const handleMediaQuery = (e: MediaQueryListEvent) => {\n      setMatches(e.matches);\n    };\n\n    mediaQueryList.addEventListener(\"change\", (e) => handleMediaQuery(e));\n    return () => {\n      mediaQueryList.removeEventListener(\"change\", (e) => handleMediaQuery(e));\n    };\n  }, [query]);\n  return matches;\n}\n","type":"registry:component"},{"path":"registry/100xui/blocks/iphone-3d-mockup/components/iphone-3d-mockup.demo.tsx","content":"\"use client\";\n\nimport { useSpring, useTransform } from \"motion/react\";\nimport { motion } from \"motion/react\";\nimport Image from \"next/image\";\n\nimport { IPhone3DMockup, IPhone3DMockupScreen } from \"./iphone-3d-mockup\";\nimport appStoreScreenshot from \"@/public/demo/iphone-3d-mockup/app-store-screenshot.jpeg\";\n\nconst MotionIPhone3DMockup = motion.create(IPhone3DMockup); // Creating a motion-enhanced version of the IPhone3DMockup component\n\nexport function IPhone3DMockupDemo() {\n  const mouseXProgress = useSpring(0.1);\n  const mouseYProgress = useSpring(0.9);\n\n  const rotateX = useTransform(mouseYProgress, [0, 1], [\"25deg\", \"-25deg\"]);\n  const rotateY = useTransform(mouseXProgress, [0, 1], [\"-35deg\", \"35deg\"]);\n\n  const handleMouseMove = (e: any) => {\n    const { width, height, x, y } = e.target.getBoundingClientRect();\n    const mouseX = e.clientX;\n    const mouseY = e.clientY;\n    const relativeX = (mouseX - x) / width;\n    const relativeY = (mouseY - y) / height;\n    mouseXProgress.set(relativeX);\n    mouseYProgress.set(relativeY);\n  };\n  const handleMouseLeave = () => {\n    mouseXProgress.set(0.5);\n    mouseYProgress.set(0.5);\n  };\n  return (\n    <div\n      className=\"py-20\"\n      onMouseMove={handleMouseMove}\n      onMouseLeave={handleMouseLeave}\n    >\n      <MotionIPhone3DMockup\n        style={{ rotateX, rotateY }}\n        className=\"pointer-events-none mx-auto\"\n      >\n        <IPhone3DMockupScreen>\n          <Image src={appStoreScreenshot} alt=\"\" className=\"h-full\" />\n        </IPhone3DMockupScreen>\n      </MotionIPhone3DMockup>\n    </div>\n  );\n}\n","type":"registry:component"},{"path":"registry/100xui/blocks/menu-wheel/components/menu-wheel.demo.tsx","content":"\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { SunMoonIcon, SunIcon, MoonIcon, LaptopIcon } from \"lucide-react\";\r\n\r\nimport {\r\n  MenuWheel,\r\n  MenuWheelContainer,\r\n  MenuWheelItem,\r\n  MenuWheelTrigger,\r\n} from \"./menu-wheel\";\r\nimport { useTheme } from \"next-themes\";\r\n\r\nexport function MenuWheelDemo() {\r\n  const { theme, setTheme } = useTheme();\r\n  return (\r\n    <>\r\n      <MenuWheel\r\n        defaultValue={theme}\r\n        showCurrent\r\n        onValueChange={(value: string) => setTheme(value)}\r\n      >\r\n        <MenuWheelTrigger>\r\n          <SunMoonIcon />\r\n        </MenuWheelTrigger>\r\n        <MenuWheelContainer>\r\n          <MenuWheelItem index={0} value=\"light\">\r\n            <SunIcon />\r\n          </MenuWheelItem>\r\n          <MenuWheelItem index={1} value=\"dark\">\r\n            <MoonIcon />\r\n          </MenuWheelItem>\r\n          <MenuWheelItem index={2} value=\"system\">\r\n            <LaptopIcon />\r\n          </MenuWheelItem>\r\n        </MenuWheelContainer>\r\n      </MenuWheel>\r\n    </>\r\n  );\r\n}\r\n","type":"registry:component"}]}