{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "story-demo",
  "title": "Story Demo",
  "description": "Demo showing how to use story component.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/story",
    "https://systaliko-ui.vercel.app/r/dialog",
    "https://systaliko-ui.vercel.app/r/avatar"
  ],
  "files": [
    {
      "path": "registry/demo/blocks/story/index.tsx",
      "content": "import { Avatar, AvatarFallback, AvatarImage } from '@/components/systaliko-ui/shadcn/avatar';\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/components/systaliko-ui/shadcn/dialog';\nimport {\n  Story,\n  StoryProgress,\n  StoryControls,\n  StorySlide,\n  StoryOverlay,\n} from '@/components/systaliko-ui/blocks/story';\n\nconst FABRIZIO_STORIES = [\n  {\n    title: 'Champions league will begin soon',\n    caption: 'whos you are running for ?',\n    storyImage:\n      'https://images.unsplash.com/photo-1569617234470-9e9813ee1dae?q=80&w=2235&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  },\n  {\n    title: \"who's your favourite player ?\",\n    caption: 'who you think will win the champions league ?',\n    storyImage:\n      'https://images.unsplash.com/photo-1570498839593-e565b39455fc?q=80&w=2235&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  },\n];\n\nconst SHADCN_STORIES = [\n  {\n    title: 'Easy vibes',\n    caption: 'In the System Prompts.',\n    storyImage:\n      'https://pbs.twimg.com/media/Gr5BeX6WwAAgGH_?format=jpg&name=large',\n  },\n  {\n    title: 'The new calendar.tsx is here',\n    caption: `\n    → Latest react-daypicker\n    → Tailwind v3 and v4\n    → Date, range & time pickers\n    → Persian, Hijri & timezone support\n    → 30+ examples to copy, paste, and build.\n    `,\n    storyImage:\n      'https://pbs.twimg.com/media/GsxdzRfb0AIUBSs?format=jpg&name=large',\n  },\n  {\n    title: '🤣🤣🤣🤣🤣',\n    caption: 'Me walking away after adding min-w-0 and it works.',\n    storyImage:\n      'https://pbs.twimg.com/media/Gsh-UBoasAM_Uin?format=jpg&name=medium',\n  },\n];\n\nconst NBA_STORIES = [\n  {\n    title: 'Shai follows 38 in Game 1 with 34 tonight 🔥🔥🔥',\n    caption:\n      'MOST POINTS EVER by a player in his first 2 career Finals games 🚨🚨',\n    storyImage:\n      'https://pbs.twimg.com/media/Gs-BiiMbsAAIK9p?format=jpg&name=large',\n  },\n];\n\nexport function StoryDemo() {\n  return (\n    <section className=\"min-h-dvh p-12 w-full place-content-center\">\n      <div className=\"flex gap-4 justify-center\">\n        <Dialog>\n          <DialogTrigger>\n            <Avatar className=\"size-12\">\n              <AvatarImage\n                src=\"https://pbs.twimg.com/profile_images/1741753635158024192/j0m8Ucvv_400x400.jpg\"\n                alt=\"@fabrizioRomano\"\n              />\n              <AvatarFallback>FR</AvatarFallback>\n            </Avatar>\n          </DialogTrigger>\n          <DialogContent className=\"aspect-[12/16] w-auto h-[90vh] overflow-hidden p-0\">\n            <DialogTitle className=\"sr-only\">Story</DialogTitle>\n\n            <Story\n              className=\"relative size-full \"\n              duration={5000}\n              mediaLength={FABRIZIO_STORIES.length}\n            >\n              <DialogHeader className=\"px-4 py-6\">\n                <div className=\"relative z-10 flex items-center gap-2\">\n                  <Avatar className=\"size-10\">\n                    <AvatarImage\n                      src=\"https://scontent.forn3-5.fna.fbcdn.net/v/t39.30808-1/347110386_993663875383747_583934797072922306_n.jpg?stp=c0.124.1179.1179a_cp0_dst-jpg_s80x80_tt6&_nc_cat=1&ccb=1-7&_nc_sid=2d3e12&_nc_ohc=sznTMSftQGgQ7kNvwFnYrhK&_nc_oc=Adl88GWERQJFnS-FhRo3kmyRvwQeqel4uE97CRcHAX2hgEouXRhN98vLowFYZewYbKE&_nc_zt=24&_nc_ht=scontent.forn3-5.fna&_nc_gid=zgCgewXONoFNXl_Ycl7B9Q&oh=00_AfP29XsY8aMHX1lZasw43qaYzda8eY9esKHCjO-ZARUk5A&oe=684D1280\"\n                      alt=\"@fabrizioRomano\"\n                    />\n                    <AvatarFallback>FR</AvatarFallback>\n                  </Avatar>\n\n                  <StoryProgress\n                    className=\"flex-1\"\n                    progressWrapClass=\"h-1.5\"\n                    progressActiveClass=\"bg-blue-500\"\n                  />\n                  <StoryControls\n                    variant=\"ghost\"\n                    className=\"text-white rounded-full\"\n                  />\n                </div>\n              </DialogHeader>\n              {FABRIZIO_STORIES.map((story, idx) => (\n                <StorySlide\n                  key={idx}\n                  index={idx}\n                  className=\"absolute inset-0 size-full\"\n                >\n                  {/* Example with image */}\n                  <img\n                    src={story.storyImage}\n                    className=\"w-full h-auto max-h-auto\"\n                    alt={story.title}\n                  />\n\n                  <div className=\"absolute bottom-4 left-4  z-10 space-y-1 text-white\">\n                    <a\n                      className=\"text-secondary\"\n                      href=\"https://x.com/FabrizioRomano\"\n                    >\n                      @FabrizioRomano\n                    </a>\n                    <h3 className=\"text-medium tracking-tight text-foreground-muted\">\n                      {story.title}\n                    </h3>\n                    <p className=\"text-sm text-slate-200\">{story.caption}</p>\n                  </div>\n                </StorySlide>\n              ))}\n              <StoryOverlay />\n            </Story>\n          </DialogContent>\n        </Dialog>\n\n        <Dialog>\n          <DialogTrigger>\n            <Avatar className=\"size-12\">\n              <AvatarImage\n                src=\"https://pbs.twimg.com/profile_images/1593304942210478080/TUYae5z7_400x400.jpg\"\n                alt=\"@shadcn\"\n              />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DialogTrigger>\n          <DialogContent className=\"aspect-[12/16] w-auto h-[90vh] overflow-hidden p-0\">\n            <DialogTitle className=\"sr-only\">Story</DialogTitle>\n\n            <Story\n              className=\"relative size-full \"\n              duration={5000}\n              mediaLength={SHADCN_STORIES.length}\n            >\n              <DialogHeader className=\"px-4 py-6\">\n                <div className=\"relative z-10 flex items-center gap-2\">\n                  <Avatar className=\"size-10\">\n                    <AvatarImage\n                      src=\"https://pbs.twimg.com/profile_images/1593304942210478080/TUYae5z7_400x400.jpg\"\n                      alt=\"@shadcn\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n\n                  <StoryProgress\n                    className=\"flex-1\"\n                    progressWrapClass=\"h-1.5\"\n                    progressActiveClass=\"bg-pink-500\"\n                  />\n                  <StoryControls\n                    variant=\"ghost\"\n                    className=\"text-white rounded-full\"\n                  />\n                </div>\n              </DialogHeader>\n              {SHADCN_STORIES.map((story, idx) => (\n                <StorySlide\n                  key={idx}\n                  index={idx}\n                  className=\"absolute inset-0 size-full\"\n                >\n                  <img\n                    src={story.storyImage}\n                    className=\"w-full h-auto max-h-auto\"\n                    alt={story.title}\n                  />\n\n                  <div className=\"absolute bottom-4 left-4  z-10 space-y-1 text-white\">\n                    <a\n                      className=\"text-secondary\"\n                      href=\"https://x.com/FabrizioRomano\"\n                    >\n                      @Shadcn\n                    </a>\n                    <h3 className=\"text-medium tracking-tight text-foreground-muted\">\n                      {story.title}\n                    </h3>\n                    <p className=\"text-sm text-slate-200\">{story.caption}</p>\n                  </div>\n                </StorySlide>\n              ))}\n              <StoryOverlay />\n            </Story>\n          </DialogContent>\n        </Dialog>\n\n        <Dialog>\n          <DialogTrigger>\n            <Avatar className=\"size-12\">\n              <AvatarImage\n                src=\"https://pbs.twimg.com/profile_images/1931904469446377472/mjaR8LDc_400x400.jpg\"\n                alt=\"@nba\"\n              />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DialogTrigger>\n          <DialogContent className=\"aspect-[12/16] w-auto h-[90vh] overflow-hidden p-0\">\n            <DialogTitle className=\"sr-only\">Story</DialogTitle>\n\n            <Story\n              className=\"relative size-full \"\n              duration={8000}\n              mediaLength={NBA_STORIES.length}\n            >\n              <DialogHeader className=\"px-4 py-6\">\n                <div className=\"relative z-10 flex items-center gap-2\">\n                  <Avatar className=\"size-10\">\n                    <AvatarImage\n                      src=\"https://pbs.twimg.com/profile_images/1931904469446377472/mjaR8LDc_400x400.jpg\"\n                      alt=\"@nba\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n\n                  <StoryProgress\n                    className=\"flex-1\"\n                    progressWrapClass=\"h-1.5\"\n                    progressActiveClass=\"bg-red-500\"\n                  />\n                  <StoryControls\n                    variant=\"ghost\"\n                    className=\"text-white rounded-full\"\n                  />\n                </div>\n              </DialogHeader>\n              {NBA_STORIES.map((story, idx) => (\n                <StorySlide\n                  key={idx}\n                  index={idx}\n                  className=\"absolute inset-0 size-full\"\n                >\n                  <img\n                    src={story.storyImage}\n                    className=\"w-full h-auto max-h-auto\"\n                    alt={story.title}\n                  />\n\n                  <div className=\"absolute bottom-4 left-4  z-10 p-4 space-y-1 text-white\">\n                    <a\n                      className=\"text-secondary\"\n                      href=\"https://x.com/FabrizioRomano\"\n                    >\n                      @nba\n                    </a>\n                    <h3 className=\"text-medium tracking-tight text-foreground-muted\">\n                      {story.title}\n                    </h3>\n                    <p className=\"text-sm text-slate-200\">{story.caption}</p>\n                  </div>\n                </StorySlide>\n              ))}\n              <StoryOverlay />\n            </Story>\n          </DialogContent>\n        </Dialog>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/story-demo.tsx"
    }
  ],
  "type": "registry:block"
}