{
  "$schema": "https://pdfx.akashpise.dev/schema/registry-item.json",
  "name": "page-number",
  "type": "registry:ui",
  "title": "PageNumber",
  "description": "Dynamic page numbers with customizable format and alignment",
  "files": [
    {
      "path": "components/pdfx/page-number/pdfx-page-number.tsx",
      "content": "import { Text as PDFText, StyleSheet, View } from '@react-pdf/renderer';\nimport type { Style } from '@react-pdf/types';\nimport { usePdfxTheme, useSafeMemo } from '../lib/pdfx-theme-context';\ntype PdfxTheme = ReturnType<typeof usePdfxTheme>;\n\nexport type PageNumberAlign = 'left' | 'center' | 'right';\nexport type PageNumberSize = 'xs' | 'sm' | 'md';\n\n/**\n * Auto page number rendered with a configurable format string at a fixed or inline position.\n * Props - `format` | `align` | `size` | `fixed` | `muted` | `style`\n * @see {@link PdfPageNumberProps}\n */\nexport interface PdfPageNumberProps {\n  /** Custom styles to merge with component defaults */\n  style?: Style;\n  /**\n   * Format string — use `{page}` for current page and `{total}` for total page count.\n   * @default 'Page {page} of {total}'\n   */\n  format?: string;\n  /**\n   * @default 'center'\n   */\n  align?: PageNumberAlign;\n  /**\n   * @default 'sm'\n   */\n  size?: PageNumberSize;\n  /**\n   * @default false\n   */\n  fixed?: boolean;\n  /**\n   * @default true\n   */\n  muted?: boolean;\n  children?: never;\n}\n\nfunction createPageNumberStyles(t: PdfxTheme) {\n  const { typography, colors, primitives } = t;\n  return StyleSheet.create({\n    container: { width: '100%' },\n    text: { fontFamily: typography.body.fontFamily },\n    alignLeft: { textAlign: 'left' },\n    alignCenter: { textAlign: 'center' },\n    alignRight: { textAlign: 'right' },\n    sizeXs: { fontSize: primitives.typography.xs },\n    sizeSm: { fontSize: primitives.typography.sm },\n    sizeMd: { fontSize: primitives.typography.base },\n    colorForeground: { color: colors.foreground },\n    colorMuted: { color: colors.mutedForeground },\n  });\n}\n\nfunction formatPageNumber(format: string, pageNumber: number, totalPages: number): string {\n  return format.replace('{page}', String(pageNumber)).replace('{total}', String(totalPages));\n}\n\nexport function PdfPageNumber({\n  format = 'Page {page} of {total}',\n  align = 'center',\n  size = 'sm',\n  fixed = false,\n  muted = true,\n  style,\n}: PdfPageNumberProps) {\n  const theme = usePdfxTheme();\n  const styles = useSafeMemo(() => createPageNumberStyles(theme), [theme]);\n  const alignMap = {\n    left: styles.alignLeft,\n    center: styles.alignCenter,\n    right: styles.alignRight,\n  } as Record<PageNumberAlign, Style>;\n  const sizeMap = { xs: styles.sizeXs, sm: styles.sizeSm, md: styles.sizeMd } as Record<\n    PageNumberSize,\n    Style\n  >;\n  const textStyles: Style[] = [\n    styles.text,\n    alignMap[align],\n    sizeMap[size],\n    muted ? styles.colorMuted : styles.colorForeground,\n  ];\n  if (style) textStyles.push(...[style].flat());\n  return (\n    <View style={styles.container} fixed={fixed}>\n      <PDFText\n        style={textStyles}\n        render={({ pageNumber, totalPages }) => formatPageNumber(format, pageNumber, totalPages)}\n      />\n    </View>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "dependencies": [
    "@react-pdf/renderer"
  ],
  "registryDependencies": [
    "theme"
  ]
}