{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ai-artifact",
  "title": "AI: Artifact",
  "description": "A side-panel wrapper for a generated artifact, with title, actions and close control.",
  "dependencies": [
    "@untitledui/icons@^0.0.22"
  ],
  "registryDependencies": [
    "@nx-ui/utils",
    "@nx-ui/button",
    "@nx-ui/tooltip"
  ],
  "files": [
    {
      "path": "components/ai/artifact.tsx",
      "content": "\"use client\"\n\nimport type { ComponentProps, HTMLAttributes } from \"react\"\nimport { XClose } from \"@untitledui/icons\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\"\nimport { cn } from \"@/lib/utils\"\n\n/** A line-icon component, e.g. any export from @untitledui/icons. */\ntype IconComponent = React.ComponentType<{ className?: string }>\n\nexport type ArtifactProps = HTMLAttributes<HTMLDivElement>\n\nexport const Artifact = ({ className, ...props }: ArtifactProps) => (\n  <div\n    className={cn(\n      \"flex flex-col overflow-hidden rounded-xl border bg-background shadow-xs\",\n      className\n    )}\n    {...props}\n  />\n)\n\nexport type ArtifactHeaderProps = HTMLAttributes<HTMLDivElement>\n\nexport const ArtifactHeader = ({ className, ...props }: ArtifactHeaderProps) => (\n  <div\n    className={cn(\n      \"flex items-center justify-between border-b bg-muted/50 px-4 py-3\",\n      className\n    )}\n    {...props}\n  />\n)\n\nexport type ArtifactCloseProps = ComponentProps<typeof Button>\n\nexport const ArtifactClose = ({\n  className,\n  children,\n  size = \"icon-sm\",\n  variant = \"ghost\",\n  ...props\n}: ArtifactCloseProps) => (\n  <Button\n    className={cn(\"text-muted-foreground hover:text-foreground\", className)}\n    size={size}\n    type=\"button\"\n    variant={variant}\n    {...props}\n  >\n    {children ?? <XClose className=\"size-4\" />}\n    <span className=\"sr-only\">Close</span>\n  </Button>\n)\n\nexport type ArtifactTitleProps = HTMLAttributes<HTMLParagraphElement>\n\nexport const ArtifactTitle = ({ className, ...props }: ArtifactTitleProps) => (\n  <p className={cn(\"font-medium text-foreground text-sm\", className)} {...props} />\n)\n\nexport type ArtifactDescriptionProps = HTMLAttributes<HTMLParagraphElement>\n\nexport const ArtifactDescription = ({\n  className,\n  ...props\n}: ArtifactDescriptionProps) => (\n  <p className={cn(\"text-muted-foreground text-sm\", className)} {...props} />\n)\n\nexport type ArtifactActionsProps = HTMLAttributes<HTMLDivElement>\n\nexport const ArtifactActions = ({\n  className,\n  ...props\n}: ArtifactActionsProps) => (\n  <div className={cn(\"flex items-center gap-1\", className)} {...props} />\n)\n\nexport type ArtifactActionProps = ComponentProps<typeof Button> & {\n  tooltip?: string\n  label?: string\n  icon?: IconComponent\n}\n\nexport const ArtifactAction = ({\n  tooltip,\n  label,\n  icon: Icon,\n  children,\n  className,\n  size = \"icon-sm\",\n  variant = \"ghost\",\n  ...props\n}: ArtifactActionProps) => {\n  const button = (\n    <Button\n      className={cn(\"text-muted-foreground hover:text-foreground\", className)}\n      size={size}\n      type=\"button\"\n      variant={variant}\n      {...props}\n    >\n      {Icon ? <Icon className=\"size-4\" /> : children}\n      <span className=\"sr-only\">{label || tooltip}</span>\n    </Button>\n  )\n\n  if (tooltip) {\n    return (\n      <TooltipProvider>\n        <Tooltip>\n          <TooltipTrigger render={button} />\n          <TooltipContent>\n            <p>{tooltip}</p>\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    )\n  }\n\n  return button\n}\n\nexport type ArtifactContentProps = HTMLAttributes<HTMLDivElement>\n\nexport const ArtifactContent = ({\n  className,\n  ...props\n}: ArtifactContentProps) => (\n  <div className={cn(\"flex-1 overflow-auto p-4\", className)} {...props} />\n)\n",
      "type": "registry:ui",
      "target": "components/ai/artifact.tsx"
    }
  ],
  "type": "registry:ui"
}