{
  "title": "Empty",
  "description": "Displays an empty state placeholder when no data, results, or items are present with spring entrance animations.",
  "name": "motion-empty",
  "dependencies": [
    "motion",
    "class-variance-authority"
  ],
  "registryDependencies": [],
  "type": "registry:ui",
  "files": [
    {
      "path": "components/paceui/motion/empty.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\n\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { type Transition, motion } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface EmptyProps extends React.ComponentProps<\"div\"> {\n    transition?: Transition;\n}\n\nfunction Empty({ className, transition, children, ...props }: EmptyProps) {\n    return (\n        <motion.div\n            data-slot=\"empty\"\n            initial={{ opacity: 0, scale: 0.97, y: 10 }}\n            whileInView={{ opacity: 1, scale: 1, y: 0 }}\n            viewport={{ once: true }}\n            transition={transition ?? { type: \"spring\", stiffness: 280, damping: 24 }}\n            className={cn(\n                \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-md border border-dashed p-12 text-center text-balance\",\n                className,\n            )}\n            {...(props as any)}>\n            {children}\n        </motion.div>\n    );\n}\n\nexport interface EmptyHeaderProps extends React.ComponentProps<\"div\"> {\n    transition?: Transition;\n}\n\nfunction EmptyHeader({ className, transition, children, ...props }: EmptyHeaderProps) {\n    return (\n        <motion.div\n            data-slot=\"empty-header\"\n            initial={{ opacity: 0, y: 6 }}\n            whileInView={{ opacity: 1, y: 0 }}\n            viewport={{ once: true }}\n            transition={transition ?? { type: \"spring\", stiffness: 300, damping: 24, delay: 0.05 }}\n            className={cn(\"flex max-w-sm flex-col items-center gap-2\", className)}\n            {...(props as any)}>\n            {children}\n        </motion.div>\n    );\n}\n\nconst emptyMediaVariants = cva(\n    \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    {\n        variants: {\n            variant: {\n                default: \"bg-transparent\",\n                icon: \"flex size-10 shrink-0 items-center justify-center rounded-md bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6\",\n            },\n        },\n        defaultVariants: {\n            variant: \"default\",\n        },\n    },\n);\n\nexport interface EmptyMediaProps extends React.ComponentProps<\"div\">, VariantProps<typeof emptyMediaVariants> {\n    transition?: Transition;\n}\n\nfunction EmptyMedia({ className, variant = \"default\", transition, children, ...props }: EmptyMediaProps) {\n    return (\n        <motion.div\n            data-slot=\"empty-icon\"\n            data-variant={variant}\n            initial={{ opacity: 0, scale: 0.8, y: -4 }}\n            whileInView={{ opacity: 1, scale: 1, y: 0 }}\n            viewport={{ once: true }}\n            whileHover={{ y: -2, scale: 1.05 }}\n            transition={transition ?? { type: \"spring\", stiffness: 320, damping: 18 }}\n            className={cn(emptyMediaVariants({ variant, className }))}\n            {...(props as any)}>\n            {children}\n        </motion.div>\n    );\n}\n\nexport interface EmptyTitleProps extends React.ComponentProps<\"div\"> {}\n\nfunction EmptyTitle({ className, ...props }: EmptyTitleProps) {\n    return <div data-slot=\"empty-title\" className={cn(\"text-lg font-medium tracking-tight\", className)} {...props} />;\n}\n\nexport interface EmptyDescriptionProps extends React.ComponentProps<\"p\"> {}\n\nfunction EmptyDescription({ className, ...props }: EmptyDescriptionProps) {\n    return (\n        <div\n            data-slot=\"empty-description\"\n            className={cn(\n                \"text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4\",\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nexport interface EmptyContentProps extends React.ComponentProps<\"div\"> {\n    transition?: Transition;\n}\n\nfunction EmptyContent({ className, transition, children, ...props }: EmptyContentProps) {\n    return (\n        <motion.div\n            data-slot=\"empty-content\"\n            initial={{ opacity: 0, y: 8 }}\n            whileInView={{ opacity: 1, y: 0 }}\n            viewport={{ once: true }}\n            transition={transition ?? { type: \"spring\", stiffness: 280, damping: 24, delay: 0.1 }}\n            className={cn(\"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance\", className)}\n            {...(props as any)}>\n            {children}\n        </motion.div>\n    );\n}\n\nexport { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };\n"
    }
  ],
  "mcp": {
    "description": "Displays an empty state placeholder with header, media icon, description, and action content. Provides spring entrance animations and micro-interactions.",
    "tags": [
      "component",
      "empty",
      "placeholder",
      "state",
      "paceui",
      "animation"
    ]
  }
}