{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dynamic-island",
  "title": "Dynamic Island",
  "description": "An Apple-inspired pill that springs between size presets while its content cross-fades.",
  "dependencies": ["framer-motion"],
  "registryDependencies": ["@godui/godui-theme"],
  "files": [
    {
      "path": "packages/components/src/dynamic-island/dynamic-island.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport * as React from \"react\";\n\nexport type DynamicIslandSize =\n  | \"compact\"\n  | \"default\"\n  | \"long\"\n  | \"tall\"\n  | \"large\";\n\nexport type DynamicIslandProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** Shape preset the island morphs to. */\n  size?: DynamicIslandSize;\n  /**\n   * Identity of the current content. Change it to cross-fade the inner view;\n   * defaults to `size` so each shape transitions its content.\n   */\n  presenceKey?: React.Key;\n};\n\nconst SIZES: Record<\n  DynamicIslandSize,\n  { width: number; height: number; radius: number }\n> = {\n  compact: { width: 140, height: 36, radius: 18 },\n  default: { width: 220, height: 44, radius: 22 },\n  long: { width: 360, height: 52, radius: 26 },\n  tall: { width: 260, height: 120, radius: 28 },\n  large: { width: 360, height: 200, radius: 36 },\n};\n\n// Underdamped so the shell settles with the signature rubbery overshoot.\nconst SHELL_SPRING = {\n  type: \"spring\" as const,\n  stiffness: 520,\n  damping: 32,\n};\n\nconst DynamicIsland = React.forwardRef<HTMLDivElement, DynamicIslandProps>(\n  (\n    { size = \"default\", presenceKey, className, style, children, ...props },\n    ref,\n  ) => {\n    const reduceMotion = useReducedMotion();\n    const dims = SIZES[size];\n    const key = presenceKey ?? size;\n\n    return (\n      <motion.div\n        ref={ref}\n        data-slot=\"dynamic-island\"\n        layout\n        initial={false}\n        animate={{\n          width: dims.width,\n          height: dims.height,\n          borderRadius: dims.radius,\n        }}\n        transition={reduceMotion ? { duration: 0 } : SHELL_SPRING}\n        className={`relative flex items-center justify-center overflow-hidden bg-black text-white shadow-xl ${className ?? \"\"}`}\n        style={{ maxWidth: \"100%\", ...style }}\n        {...(props as React.ComponentProps<typeof motion.div>)}\n      >\n        <AnimatePresence mode=\"popLayout\" initial={false}>\n          <motion.div\n            key={key}\n            initial={\n              reduceMotion\n                ? false\n                : { opacity: 0, scale: 0.9, filter: \"blur(4px)\" }\n            }\n            animate={{ opacity: 1, scale: 1, filter: \"blur(0px)\" }}\n            exit={\n              reduceMotion\n                ? undefined\n                : { opacity: 0, scale: 0.9, filter: \"blur(4px)\" }\n            }\n            transition={{ duration: 0.2, ease: \"easeOut\" }}\n            className=\"flex size-full items-center justify-center px-4\"\n          >\n            {children}\n          </motion.div>\n        </AnimatePresence>\n      </motion.div>\n    );\n  },\n);\nDynamicIsland.displayName = \"DynamicIsland\";\n\nexport { DynamicIsland };\n",
      "type": "registry:ui",
      "target": "components/godui/dynamic-island.tsx"
    }
  ],
  "type": "registry:ui"
}