{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "error-dialog",
  "title": "Error Dialog",
  "description": "An alert dialog that presents and dismisses playback errors.",
  "dependencies": [
    "@videojs/react@10.0.0-beta.32",
    "react"
  ],
  "registryDependencies": [
    "@videojs/_resolve-class-name",
    "@videojs/_style-theme",
    "@videojs/button"
  ],
  "files": [
    {
      "path": "ui/files/error-dialog/error-dialog.tsx",
      "content": "/** @jsxImportSource react */\n\nimport '../styles/theme.css';\nimport { ErrorDialog as ErrorDialogPrimitive } from '@videojs/react';\n\nimport { Button } from '@/components/videojs/ui/button';\n\nexport function ErrorDialog() {\n  return (\n    <ErrorDialogPrimitive.Root>\n      <ErrorDialogPrimitive.Backdrop\n        className={\n          'absolute inset-0 z-40 bg-media-backdrop/20 opacity-100 backdrop-filter-media-dialog not-data-open:hidden transition-opacity delay-media-dialog duration-media-dialog ease-out media-transitioning:opacity-0 data-ending-style:delay-0 data-ending-style:duration-media-slower'\n        }\n      />\n      <ErrorDialogPrimitive.Popup\n        className={\n          'absolute top-1/2 left-1/2 z-50 flex w-media-dialog-width max-w-media-dialog max-h-[calc(100%-0.5rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-3 rounded-media-dialog text-media-popover-foreground outline-hidden not-data-open:hidden text-shadow-media-dialog transition-[opacity,scale] delay-media-dialog duration-media-dialog ease-out media-transitioning:scale-media-hidden-popup media-transitioning:opacity-0 data-ending-style:delay-0 bg-media-popover surface-media after:surface-media-inset p-3 data-ending-style:duration-media-slower'\n        }\n      >\n        <div className={'flex min-h-0 flex-col gap-2 overflow-y-auto px-2 pt-2 pb-1.5'}>\n          <ErrorDialogPrimitive.Title className={'m-0 text-media-lg font-semibold leading-tight'} />\n          <ErrorDialogPrimitive.Description className={'m-0 opacity-70 wrap-anywhere'} />\n        </div>\n        <div className={'flex shrink-0 gap-2'}>\n          <ErrorDialogPrimitive.Close\n            render={<Button />}\n            className={\n              'h-media-control w-full flex-1 bg-media-primary! px-4 py-2 font-medium text-media-primary-foreground!'\n            }\n          />\n        </div>\n      </ErrorDialogPrimitive.Popup>\n    </ErrorDialogPrimitive.Root>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/videojs/ui/error-dialog.tsx"
    }
  ],
  "meta": {
    "framework": "react",
    "style": "tailwind",
    "role": "component",
    "styling": "tailwind",
    "public": true
  },
  "docs": "Installs `@/components/videojs/ui/error-dialog.tsx` for use inside a compatible Video.js Player or Skin.\n\n```tsx\nimport { ErrorDialog } from '@/components/videojs/ui/error-dialog';\n\nexport function Controls() {\n  return <ErrorDialog />;\n}\n```",
  "categories": [
    "media",
    "feedback"
  ],
  "type": "registry:ui"
}