{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "title",
  "title": "Title",
  "description": "The media title, displayed above the video while controls are visible.",
  "dependencies": [
    "@videojs/react@10.4.0",
    "react"
  ],
  "registryDependencies": [
    "@videojs/_resolve-class-name",
    "@videojs/_style-audio",
    "@videojs/_style-theme",
    "@videojs/_style-video"
  ],
  "files": [
    {
      "path": "ui/files/title/title.tsx",
      "content": "/** @jsxImportSource react */\n\n'use client';\n\nimport '../styles/base.css';\nimport '../styles/audio/theme.css';\nimport '../styles/video/captions.css';\nimport '../styles/video/theme.css';\nimport { Title as TitlePrimitive } from '@videojs/react';\n\nimport { cn, resolveClassName } from '@/lib/resolve-class-name';\n\nexport type TitleProps = Omit<TitlePrimitive.Props, 'children'>;\n\nexport function Title({ className, ...props }: TitleProps = {}) {\n  return (\n    <TitlePrimitive\n      className={(state) =>\n        cn(\n          'pointer-events-none absolute inset-0 z-20 isolate media-max-3xs:hidden',\n          'truncate px-6 pt-2.5 text-[calc(var(--media-spacing)*4)] font-medium tracking-[-0.0125em] text-media-controls-foreground text-shadow-media',\n          'media-md:px-6 media-md:pt-4',\n          'origin-top duration-media-controls-enter ease-out',\n          'not-data-visible:opacity-0 not-data-visible:-translate-y-media-hidden-offset not-data-visible:duration-media-controls',\n          'pointer-fine:not-data-visible:blur-media-hidden',\n          'leading-[calc(var(--media-control-size)-(--spacing(0.5)))]',\n          'media-md:leading-[calc(var(--media-control-size)-(--spacing(2)))]',\n          'media-max-lg:pr-36 media-max-2xs:text-media',\n          'transition-[filter,opacity,scale,translate]',\n          'not-data-visible:scale-media-hidden',\n          'media-lg:before:absolute media-lg:before:inset-x-0 media-lg:before:top-0 media-lg:before:h-(--media-controls-gradient-height) media-lg:before:-z-1',\n          'media-lg:before:bg-(image:--media-controls-top-gradient)',\n          resolveClassName(className, state)\n        )\n      }\n      {...props}\n    />\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/videojs/ui/title.tsx"
    }
  ],
  "meta": {
    "framework": "react",
    "style": "tailwind",
    "theme": "default",
    "role": "component",
    "styling": "tailwind",
    "public": true
  },
  "docs": "[`Title` reference](https://videojs.org/docs/framework/react/reference/title/).",
  "categories": [
    "media",
    "display"
  ],
  "type": "registry:ui"
}