{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "empty-states",
  "title": "Empty states",
  "description": "Displays empty state variants for no search results, nothing created, and error scenarios.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "https://blok.sitecore.com/r/theme.json",
    "https://blok.sitecore.com/r/button.json"
  ],
  "files": [
    {
      "path": "src/components/ui/empty-states.tsx",
      "content": "import { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nconst emptyStatesVariants = cva(\"flex items-center justify-center h-full\", {\n  variants: {\n    variant: {\n      \"no-search-results\": \"\",\n      \"nothing-created\": \"\",\n      error: \"\",\n    },\n  },\n  defaultVariants: {\n    variant: \"no-search-results\",\n  },\n});\n\ninterface EmptyStatesProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof emptyStatesVariants> {\n  title?: string;\n  description?: string;\n  imageSrc?: string;\n  imageAlt?: string;\n  actions?: React.ReactNode;\n}\n\nconst emptyStateConfig = {\n  \"no-search-results\": {\n    imageSrc:\n      \"https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-magnify-close-neutral\",\n    imageAlt: \"magnifier icon\",\n    defaultTitle: \"No search results\",\n    defaultDescription: \"Try a different search query.\",\n  },\n  \"nothing-created\": {\n    imageSrc:\n      \"https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-cactus-neutral\",\n    imageAlt: \"desert icon\",\n    defaultTitle: \"No widgets yet\",\n    defaultDescription: undefined,\n  },\n  error: {\n    imageSrc:\n      \"https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-alert-circle\",\n    imageAlt: \"alert icon\",\n    defaultTitle: \"Something went wrong\",\n    defaultDescription: \"Description of the error.\",\n  },\n};\n\nfunction EmptyStates({\n  className,\n  variant = \"no-search-results\",\n  title,\n  description,\n  imageSrc,\n  imageAlt,\n  actions,\n  ...props\n}: EmptyStatesProps) {\n  const config = emptyStateConfig[variant || \"no-search-results\"];\n  const finalTitle = title || config.defaultTitle;\n  const finalDescription = description || config.defaultDescription;\n  const finalImageSrc = imageSrc || config.imageSrc;\n  const finalImageAlt = imageAlt || config.imageAlt;\n\n  const defaultActions = {\n    \"no-search-results\": <Button variant=\"link\">Reset search</Button>,\n    \"nothing-created\": <Button variant=\"default\">Create widget</Button>,\n    error: <Button variant=\"link\">Try again</Button>,\n  };\n\n  const finalActions =\n    actions || defaultActions[variant || \"no-search-results\"];\n\n  return (\n    <div\n      data-slot=\"empty-states\"\n      className={cn(emptyStatesVariants({ variant }), className)}\n      {...props}\n    >\n      <div className=\"flex flex-col items-center text-center gap-4 max-w-sm\">\n        <img src={finalImageSrc} alt={finalImageAlt} className=\"w-16 h-16\" />\n        <div className=\"flex flex-col items-center gap-1.5\">\n          <h2 className=\"text-lg font-semibold\">{finalTitle}</h2>\n          {finalDescription && (\n            <p className=\"text-sm text-muted-foreground\">{finalDescription}</p>\n          )}\n        </div>\n        {finalActions}\n      </div>\n    </div>\n  );\n}\n\nexport { EmptyStates, emptyStatesVariants, type EmptyStatesProps };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}