{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "empty",
  "title": "Empty",
  "description": "An empty state with media, a title, a description and actions.",
  "dependencies": [
    "@base-ui/react",
    "@stylexjs/stylex"
  ],
  "registryDependencies": [
    "https://constella.aayush.cv/r/base.json"
  ],
  "files": [
    {
      "path": "src/components/primitives/empty.tsx",
      "content": "import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport type { Sx } from \"@/lib/constella/styles\";\nimport { typeStyles } from \"@/lib/constella/styles\";\nimport {\n  colors,\n  fontWeights,\n  radii,\n  sizes,\n  space,\n} from \"@/lib/constella/tokens.stylex\";\n\nconst emptyMediaVariants = [\"default\", \"icon\"] as const;\n\ntype EmptyMediaVariant = (typeof emptyMediaVariants)[number];\n\ntype Styled<T> = Omit<T, \"className\" | \"style\"> & {\n  sx?: Sx;\n};\n\nconst styles = stylex.create({\n  empty: {\n    alignItems: \"center\",\n    borderStartStartRadius: radii.lg,\n    borderStartEndRadius: radii.lg,\n    borderEndStartRadius: radii.lg,\n    borderEndEndRadius: radii.lg,\n    color: colors.textPrimary,\n    display: \"flex\",\n    flex: 1,\n    flexDirection: \"column\",\n    gap: space.md,\n    justifyContent: \"center\",\n    minWidth: 0,\n    paddingBlockEnd: space.lg,\n    paddingBlockStart: space.lg,\n    paddingInlineEnd: space.lg,\n    paddingInlineStart: space.lg,\n    textAlign: \"center\",\n    textWrap: \"balance\",\n    width: \"100%\",\n  },\n  header: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: space.xs,\n    maxWidth: sizes.measure,\n  },\n  media: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flexShrink: 0,\n    justifyContent: \"center\",\n    marginBlockEnd: space.xs,\n  },\n  icon: {\n    backgroundColor: colors.fill,\n    borderStartStartRadius: radii.sm,\n    borderStartEndRadius: radii.sm,\n    borderEndStartRadius: radii.sm,\n    borderEndEndRadius: radii.sm,\n    color: colors.textPrimary,\n    height: sizes.controlMd,\n    width: sizes.controlMd,\n  },\n  title: {\n    fontWeight: fontWeights.medium,\n  },\n  description: {\n    color: colors.textSecondary,\n    textWrap: \"pretty\",\n  },\n  content: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: space.popup,\n    maxWidth: sizes.measure,\n    minWidth: 0,\n    width: \"100%\",\n  },\n});\n\nconst mediaStyles = {\n  default: null,\n  icon: styles.icon,\n} satisfies Record<EmptyMediaVariant, stylex.StyleXStyles | null>;\n\nfunction Empty({ sx, ...props }: Styled<ComponentProps<\"div\">>) {\n  return (\n    <div data-slot=\"empty\" {...props} {...stylex.props(styles.empty, sx)} />\n  );\n}\n\nfunction EmptyHeader({ sx, ...props }: Styled<ComponentProps<\"div\">>) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      {...props}\n      {...stylex.props(styles.header, sx)}\n    />\n  );\n}\n\nfunction EmptyMedia({\n  sx,\n  variant = \"default\",\n  ...props\n}: Styled<ComponentProps<\"div\">> & { variant?: EmptyMediaVariant }) {\n  return (\n    <div\n      data-slot=\"empty-media\"\n      data-variant={variant}\n      {...props}\n      {...stylex.props(styles.media, mediaStyles[variant], sx)}\n    />\n  );\n}\n\nfunction EmptyTitle({\n  render,\n  sx,\n  ...props\n}: Styled<useRender.ComponentProps<\"div\">>) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      props,\n      stylex.props([typeStyles.textSm, styles.title], sx)\n    ),\n    render,\n    state: { slot: \"empty-title\" },\n  });\n}\n\nfunction EmptyDescription({ sx, ...props }: Styled<ComponentProps<\"div\">>) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      {...props}\n      {...stylex.props([typeStyles.textSm, styles.description], sx)}\n    />\n  );\n}\n\nfunction EmptyContent({ sx, ...props }: Styled<ComponentProps<\"div\">>) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      {...props}\n      {...stylex.props([typeStyles.textSm, styles.content], sx)}\n    />\n  );\n}\n\nexport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  emptyMediaVariants,\n  EmptyTitle,\n};\nexport type { EmptyMediaVariant };\n",
      "type": "registry:component"
    }
  ],
  "docs": "Usage: https://constella.aayush.cv/docs/components/empty/index.md",
  "type": "registry:ui"
}