{
  "name": "empty-state",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "empty-state.tsx",
      "content": "\"use client\";\r\n\r\nimport { css, themeVars as theme } from \"@yugnex/core\";\r\nimport type { HTMLAttributes, ReactNode } from \"react\";\r\n\r\nconst rootClass = css({\r\n  display: \"flex\",\r\n  flexDirection: \"column\",\r\n  alignItems: \"center\",\r\n  justifyContent: \"center\",\r\n  textAlign: \"center\",\r\n  gap: theme.space[2],\r\n  padding: `${theme.space[12]} ${theme.space[6]}`,\r\n  fontFamily: theme.fontFamily.sans,\r\n});\r\n\r\nconst iconWrapClass = css({\r\n  display: \"inline-flex\",\r\n  alignItems: \"center\",\r\n  justifyContent: \"center\",\r\n  width: \"3rem\",\r\n  height: \"3rem\",\r\n  marginBottom: theme.space[2],\r\n  borderRadius: theme.radius.full,\r\n  backgroundColor: theme.color.muted,\r\n  color: theme.color.mutedForeground,\r\n  fontSize: theme.fontSize.xl,\r\n});\r\n\r\nconst titleClass = css({\r\n  margin: 0,\r\n  fontSize: theme.fontSize.base,\r\n  fontWeight: theme.fontWeight.semibold,\r\n  color: theme.color.foreground,\r\n});\r\n\r\nconst descriptionClass = css({\r\n  margin: 0,\r\n  maxWidth: \"28rem\",\r\n  fontSize: theme.fontSize.sm,\r\n  lineHeight: theme.lineHeight.base,\r\n  color: theme.color.mutedForeground,\r\n});\r\n\r\nconst actionsClass = css({\r\n  display: \"flex\",\r\n  gap: theme.space[2],\r\n  marginTop: theme.space[4],\r\n  flexWrap: \"wrap\",\r\n  justifyContent: \"center\",\r\n});\r\n\r\nexport interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\r\n  icon?: ReactNode;\r\n  title: ReactNode;\r\n  description?: ReactNode;\r\n  /** Primary/secondary buttons, rendered below the copy. */\r\n  actions?: ReactNode;\r\n}\r\n\r\n/** The zero-data state: no conversations yet, no search results, nothing connected. */\r\nexport function EmptyState({ icon, title, description, actions, className, children, ...props }: EmptyStateProps) {\r\n  return (\r\n    <div className={className ? `${rootClass} ${className}` : rootClass} {...props}>\r\n      {icon ? (\r\n        <span className={iconWrapClass} aria-hidden=\"true\">\r\n          {icon}\r\n        </span>\r\n      ) : null}\r\n      <p className={titleClass}>{title}</p>\r\n      {description ? <p className={descriptionClass}>{description}</p> : null}\r\n      {children}\r\n      {actions ? <div className={actionsClass}>{actions}</div> : null}\r\n    </div>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ]
}