{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dynamic-island-demo",
  "title": "Dynamic Island Demo",
  "description": "Demo usage for the Dynamic Island component",
  "registryDependencies": [
    "@spectrumui/dynamic-island"
  ],
  "files": [
    {
      "path": "app/registry/dynamic-island/dynamic-island-demo.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Mic, Music2, Phone, Timer } from 'lucide-react';\nimport { DynamicIsland, DynamicIslandView } from '@/components/motion/dynamic-island';\n\nconst VIEWS = [\n  { id: 'timer', label: 'Timer', icon: Timer },\n  { id: 'music', label: 'Music', icon: Music2 },\n  { id: 'call', label: 'Call', icon: Phone },\n] as const;\n\nexport default function DynamicIslandDemo() {\n  const [view, setView] = React.useState<string | null>('timer');\n\n  return (\n    <div className=\"flex w-full flex-col items-center gap-6 py-10\">\n      <div className=\"flex min-h-[120px] w-full items-start justify-center\">\n        <DynamicIsland\n          view={view}\n          compact={\n            <span className=\"flex items-center gap-2 px-3 py-2 text-white\">\n              <Mic className=\"size-3.5 text-emerald-400\" />\n              <span className=\"size-1.5 rounded-full bg-orange-400\" />\n            </span>\n          }\n        >\n          <DynamicIslandView id=\"timer\">\n            <div className=\"flex items-center gap-4 px-4 py-3 text-white\">\n              <span className=\"flex size-9 items-center justify-center rounded-full bg-orange-500/20 text-orange-400\">\n                <Timer className=\"size-4\" />\n              </span>\n              <div className=\"leading-tight\">\n                <p className=\"text-[11px] uppercase tracking-wide text-white/60\">Focus</p>\n                <p className=\"font-mono text-xl tabular-nums\">24:59</p>\n              </div>\n              <button\n                type=\"button\"\n                className=\"ms-2 rounded-full bg-white/12 px-3 py-1.5 text-xs font-medium hover:bg-white/20\"\n              >\n                Pause\n              </button>\n            </div>\n          </DynamicIslandView>\n          <DynamicIslandView id=\"music\">\n            <div className=\"flex items-center gap-4 px-4 py-3 text-white\">\n              <span className=\"size-10 rounded-lg bg-gradient-to-br from-fuchsia-500 to-orange-400\" />\n              <div className=\"leading-tight\">\n                <p className=\"text-sm font-medium\">Midnight City</p>\n                <p className=\"text-xs text-white/60\">M83</p>\n              </div>\n              <span className=\"ms-3 flex items-end gap-0.5\">\n                {[8, 14, 10, 16].map((h, i) => (\n                  <span key={i} className=\"w-1 rounded-full bg-emerald-400\" style={{ height: h }} />\n                ))}\n              </span>\n            </div>\n          </DynamicIslandView>\n          <DynamicIslandView id=\"call\">\n            <div className=\"flex items-center gap-4 px-4 py-3 text-white\">\n              <span className=\"flex size-9 items-center justify-center rounded-full bg-emerald-500/20 text-emerald-400\">\n                <Phone className=\"size-4\" />\n              </span>\n              <div className=\"leading-tight\">\n                <p className=\"text-sm font-medium\">Marcus Reid</p>\n                <p className=\"text-xs text-white/60\">02:14 · mobile</p>\n              </div>\n              <button\n                type=\"button\"\n                className=\"ms-2 rounded-full bg-rose-500 px-3 py-1.5 text-xs font-medium hover:bg-rose-400\"\n              >\n                End\n              </button>\n            </div>\n          </DynamicIslandView>\n        </DynamicIsland>\n      </div>\n      <div className=\"flex flex-wrap items-center justify-center gap-2\">\n        <button\n          type=\"button\"\n          onClick={() => setView(null)}\n          className={`rounded-full border px-3.5 py-1.5 text-[13px] font-medium transition-colors ${view === null ? 'border-neutral-900 bg-neutral-900 text-white dark:border-white dark:bg-white dark:text-neutral-900' : 'border-black/10 text-neutral-600 hover:bg-black/4 dark:border-white/12 dark:text-neutral-300 dark:hover:bg-white/6'}`}\n        >\n          Compact\n        </button>\n        {VIEWS.map(({ id, label, icon: Icon }) => (\n          <button\n            key={id}\n            type=\"button\"\n            onClick={() => setView(id)}\n            className={`inline-flex items-center gap-1.5 rounded-full border px-3.5 py-1.5 text-[13px] font-medium transition-colors ${view === id ? 'border-neutral-900 bg-neutral-900 text-white dark:border-white dark:bg-white dark:text-neutral-900' : 'border-black/10 text-neutral-600 hover:bg-black/4 dark:border-white/12 dark:text-neutral-300 dark:hover:bg-white/6'}`}\n          >\n            <Icon className=\"size-3.5\" /> {label}\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/spectrumui/dynamic-island-demo.tsx"
    }
  ],
  "type": "registry:component"
}