{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dynamic-island-demo",
  "type": "registry:component",
  "registryDependencies": [
    "dynamic-island"
  ],
  "files": [
    {
      "path": "registry/default/example/dynamic-island-demo.tsx",
      "content": "\"use client\"\n\nimport { createContext, useContext } from \"react\"\nimport {\n  ArrowUpLeftSquareIcon,\n  Loader,\n  Mail,\n  MessageCircle,\n  MousePointerClickIcon,\n  User,\n  Waves,\n} from \"lucide-react\"\nimport { motion, useReducedMotion } from \"motion/react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  DynamicContainer,\n  DynamicDescription,\n  DynamicDiv,\n  DynamicIsland,\n  DynamicIslandProvider,\n  DynamicTitle,\n  SizePresets,\n  useDynamicIslandSize,\n  useScheduledAnimations,\n} from \"@/registry/default/ui/dynamic-island\"\n\nconst DynamicAction = () => {\n  const { state: blobState, setSize } = useDynamicIslandSize()\n\n  const blobStates: SizePresets[] = [\n    \"compact\",\n    \"large\",\n    \"tall\",\n    \"long\",\n    \"medium\",\n  ]\n\n  const cycleBlobStates = () => {\n    const currentIndex = blobStates.indexOf(blobState.size)\n    const nextIndex = (currentIndex + 1) % blobStates.length\n    setSize(blobStates[nextIndex])\n  }\n\n  useScheduledAnimations([\n    { size: \"compact\", delay: 1000 },\n    { size: \"large\", delay: 1200 },\n    { size: \"tall\", delay: 1600 },\n    { size: \"long\", delay: 1800 },\n    { size: \"medium\", delay: 2200 },\n  ])\n\n  // Provide dynamic detail in such a beautiful small place :)\n  const renderCompactState = () => (\n    <DynamicContainer className=\"flex h-full w-full items-center justify-center\">\n      <div className=\"relative flex w-full items-center\">\n        <DynamicDescription className=\"absolute left-4 my-auto text-lg font-medium tracking-tighter text-white\">\n          <MessageCircle className=\"h-5 w-5 fill-cyan-400 text-cyan-400\" />\n        </DynamicDescription>\n\n        <DynamicDescription className=\"absolute right-4 my-auto text-lg font-bold tracking-tighter text-white\">\n          newcult.co\n        </DynamicDescription>\n      </div>\n    </DynamicContainer>\n  )\n\n  // Great for call to action, popping up in users face :)\n  const renderLargeState = () => (\n    <DynamicContainer className=\"flex h-full w-full items-center justify-center\">\n      <div className=\"relative flex w-full items-center justify-between gap-6 px-4\">\n        <Loader className=\"h-12 w-12 animate-spin text-yellow-300\" />\n\n        <DynamicTitle className=\"my-auto text-2xl font-black tracking-tighter text-white\">\n          loading\n        </DynamicTitle>\n      </div>\n    </DynamicContainer>\n  )\n\n  // Great for user onboarding, forms, etc\n  const renderTallState = () => (\n    <DynamicContainer className=\"mt-6 flex w-full flex-col items-start gap-1 px-8 font-semibold\">\n      <DynamicDescription className=\"rounded-2xl bg-cyan-300 p-2 leading-5 tracking-tight\">\n        The Cult of Pythagoras\n      </DynamicDescription>\n      <DynamicDescription className=\"rounded-2xl bg-cyan-300 p-2 text-left leading-5 tracking-tight\">\n        Music of the Spheres, an idea that celestial bodies produce a form of\n        music through their movements\n      </DynamicDescription>\n\n      <DynamicTitle className=\"text-4xl font-black tracking-tighter text-cyan-100\">\n        any cool cults?\n      </DynamicTitle>\n    </DynamicContainer>\n  )\n\n  const renderLongState = () => (\n    <DynamicContainer className=\"flex h-full w-full items-center justify-center\">\n      <DynamicDiv className=\"relative flex w-full items-center justify-between gap-6 px-4\">\n        <div>\n          <Waves className=\"h-8 w-8 text-cyan-400\" />\n        </div>\n\n        <DynamicTitle className=\"my-auto text-xl font-black tracking-tighter text-white\">\n          Supercalifragilisticexpialid\n        </DynamicTitle>\n      </DynamicDiv>\n    </DynamicContainer>\n  )\n\n  const renderMediumState = () => (\n    <DynamicContainer className=\"flex h-full flex-col justify-between px-2 pt-4 text-left text-white\">\n      <DynamicTitle className=\"pl-3 text-2xl font-black tracking-tighter\">\n        Reincarnation, welcome back\n      </DynamicTitle>\n      <DynamicDescription className=\"pl-3 leading-5 text-neutral-500\">\n        Good for small tasks or call outs\n      </DynamicDescription>\n\n      <DynamicDiv className=\"mt-auto mb-2 flex flex-col space-y-1 rounded-b-2xl bg-neutral-700 p-2\">\n        <Button>\n          <Mail className=\"mr-2 h-4 w-4 fill-cyan-400 text-neutral-900\" /> Login\n          with email\n        </Button>\n\n        <Button className=\"mt-1\">\n          <User className=\"mr-2 h-4 w-4 fill-cyan-400 text-cyan-400\" /> Join the\n          cult now\n        </Button>\n      </DynamicDiv>\n    </DynamicContainer>\n  )\n\n  // Render function for other states\n  const renderOtherStates = () => (\n    <div className=\"flex h-full w-full items-center justify-center\">\n      <div>\n        <ArrowUpLeftSquareIcon className=\"text-white\" />\n      </div>\n      <p className=\"text-white\">cycle states</p>\n    </div>\n  )\n\n  // Main render logic based on size\n  function renderState() {\n    switch (blobState.size) {\n      case \"compact\":\n        return renderCompactState()\n      case \"large\":\n        return renderLargeState()\n      case \"tall\":\n        return renderTallState()\n      case \"medium\":\n        return renderMediumState()\n      case \"long\":\n        return renderLongState()\n      // Optionally add cases for other states as necessary\n      default:\n        return renderOtherStates()\n    }\n  }\n\n  return (\n    <div className=\"h-full\">\n      <div className=\"flex h-full flex-col gap-4\">\n        <div className=\"absolute top-12 left-12\">\n          {/* {!blobState.isAnimating ? ( */}\n          <Button\n            onClick={cycleBlobStates}\n            disabled={blobState.isAnimating}\n            className=\"mt-4 max-w-[200px] rounded-md border p-2\"\n          >\n            <MousePointerClickIcon className=\"mr-1 h-4 w-4\" />\n            Click to cycle states\n          </Button>\n          {/* ) : null} */}\n        </div>\n        <div className=\"absolute top-1 right-2\">\n          <div>\n            <Badge variant=\"outline\">prev - {blobState.previousSize}</Badge>\n            <Badge variant=\"outline\">cur -{blobState.size}</Badge>\n          </div>\n        </div>\n\n        <DynamicIsland id=\"dynamic-blob\">{renderState()}</DynamicIsland>\n      </div>\n    </div>\n  )\n}\n\nexport default function DynamicIslandDemo() {\n  return (\n    <DynamicIslandProvider initialSize={\"default\"}>\n      <div>\n        <DynamicAction />\n      </div>\n    </DynamicIslandProvider>\n  )\n}\n\nconst FadeInStaggerContext = createContext(false)\n\nconst viewport = { once: true, margin: \"0px 0px -200px\" }\n\nexport function FadeIn(props: any) {\n  let shouldReduceMotion = useReducedMotion()\n  let isInStaggerGroup = useContext(FadeInStaggerContext)\n\n  return (\n    <motion.div\n      variants={{\n        hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 24 },\n        visible: { opacity: 1, y: 0 },\n      }}\n      transition={{ duration: 0.5 }}\n      {...(isInStaggerGroup\n        ? {}\n        : {\n            initial: \"hidden\",\n            whileInView: \"visible\",\n            viewport,\n          })}\n      {...props}\n    />\n  )\n}\n\nexport function FadeInStagger({ faster = false, ...props }) {\n  return (\n    <FadeInStaggerContext.Provider value={true}>\n      <motion.div\n        initial=\"hidden\"\n        whileInView=\"visible\"\n        viewport={viewport}\n        transition={{ staggerChildren: faster ? 0.12 : 0.2 }}\n        {...props}\n      />\n    </FadeInStaggerContext.Provider>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}