{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "empty-state",
  "title": "EmptyState",
  "description": "No-data and zero-results panel state with registration glyph, monospace code, editorial title, description, and action slots.",
  "registryDependencies": [
    "https://frame12.dev/r/frame12-styles.json"
  ],
  "files": [
    {
      "path": "ui/empty-state.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\n\nexport type EmptyStateDensity = 'comfortable' | 'compact';\nexport type EmptyStateVariant = 'dashed' | 'quiet';\nexport type EmptyStateHeadingLevel = 'h2' | 'h3' | 'h4' | 'div';\n\nexport interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode | false;\n  code?: React.ReactNode;\n  action?: React.ReactNode;\n  secondaryAction?: React.ReactNode;\n  density?: EmptyStateDensity;\n  variant?: EmptyStateVariant;\n  headingLevel?: EmptyStateHeadingLevel;\n  children?: React.ReactNode;\n}\n\nfunction hasExplicitEmptyIcon(node: React.ReactNode): boolean {\n  let found = false;\n  const walk = (n: React.ReactNode) => {\n    React.Children.forEach(n, (child) => {\n      if (found || !React.isValidElement<Record<string, unknown>>(child)) return;\n      const fnType = child.type as { f12EmptyIcon?: boolean };\n      if (fnType?.f12EmptyIcon) {\n        found = true;\n        return;\n      }\n      if (child.type === React.Fragment && child.props?.children) {\n        walk(child.props.children as React.ReactNode);\n      }\n    });\n  };\n  walk(node);\n  return found;\n}\n\nexport const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(function EmptyState(\n  {\n    title,\n    description,\n    icon,\n    code,\n    action,\n    secondaryAction,\n    density = 'comfortable',\n    variant = 'dashed',\n    headingLevel = 'h3',\n    className = '',\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const isCompact = density === 'compact';\n  const showDefaultIcon =\n    icon === undefined &&\n    Boolean(title || description || code || children) &&\n    !hasExplicitEmptyIcon(children);\n  const TitleTag = headingLevel;\n\n  return (\n    <div\n      ref={ref}\n      data-variant={variant}\n      data-density={isCompact ? 'compact' : undefined}\n      className={`f12-empty f12-empty-${variant}${isCompact ? ' f12-empty-compact' : ''}${className ? ` ${className}` : ''}`}\n      {...rest}\n    >\n      {(showDefaultIcon || (icon !== undefined && icon !== false)) && (\n        <div className=\"f12-empty-icon\" aria-hidden=\"true\">\n          {icon !== undefined ? icon : '[ ∅ ]'}\n        </div>\n      )}\n      {code && <div className=\"f12-empty-code\">{code}</div>}\n      {title && <TitleTag className=\"f12-empty-title\">{title}</TitleTag>}\n      {description && <p className=\"f12-empty-description\">{description}</p>}\n      {children}\n      {(action || secondaryAction) && (\n        <div className=\"f12-empty-actions\">\n          {action}\n          {secondaryAction}\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport type EmptyStateIconProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const EmptyStateIcon = React.forwardRef<HTMLDivElement, EmptyStateIconProps>(\n  function EmptyStateIcon({ 'aria-hidden': ariaHidden = 'true', className = '', children, ...rest }, ref) {\n    return (\n      <div\n        ref={ref}\n        aria-hidden={ariaHidden}\n        className={`f12-empty-icon${className ? ` ${className}` : ''}`}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n(EmptyStateIcon as unknown as { f12EmptyIcon?: boolean }).f12EmptyIcon = true;\n\nexport interface EmptyStateTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  as?: EmptyStateHeadingLevel;\n}\n\nexport const EmptyStateTitle = React.forwardRef<HTMLHeadingElement, EmptyStateTitleProps>(\n  function EmptyStateTitle({ as: Tag = 'h3', className = '', children, ...rest }, ref) {\n    return (\n      <Tag\n        ref={ref as React.Ref<HTMLHeadingElement & HTMLDivElement>}\n        className={`f12-empty-title${className ? ` ${className}` : ''}`}\n        {...rest}\n      >\n        {children}\n      </Tag>\n    );\n  },\n);\n\nexport type EmptyStateDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;\n\nexport const EmptyStateDescription = React.forwardRef<\n  HTMLParagraphElement,\n  EmptyStateDescriptionProps\n>(function EmptyStateDescription({ className = '', children, ...rest }, ref) {\n  return (\n    <p ref={ref} className={`f12-empty-description${className ? ` ${className}` : ''}`} {...rest}>\n      {children}\n    </p>\n  );\n});\n\nexport type EmptyStateActionsProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const EmptyStateActions = React.forwardRef<HTMLDivElement, EmptyStateActionsProps>(\n  function EmptyStateActions({ className = '', children, ...rest }, ref) {\n    return (\n      <div ref={ref} className={`f12-empty-actions${className ? ` ${className}` : ''}`} {...rest}>\n        {children}\n      </div>\n    );\n  },\n);\n",
      "type": "registry:ui",
      "target": "components/frame12/empty-state.tsx"
    }
  ],
  "type": "registry:ui"
}