{
  "$schema": "https://pdfx.akashpise.dev/schema/registry-item.json",
  "name": "key-value",
  "type": "registry:ui",
  "title": "KeyValue",
  "description": "Label-value pair display with horizontal/vertical layout and dividers",
  "files": [
    {
      "path": "components/pdfx/key-value/pdfx-key-value.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 KeyValueDirection = 'horizontal' | 'vertical';\nexport type KeyValueSize = 'sm' | 'md' | 'lg';\n\n/**\n * A single key-value row with optional per-item color and style overrides.\n * Props - `key` | `value` | `valueColor` | `valueStyle` | `keyStyle`\n * @see {@link KeyValueEntry}\n */\nexport interface KeyValueEntry {\n  key: string;\n  value: string;\n  valueColor?: string;\n  valueStyle?: Style;\n  keyStyle?: Style;\n}\n\n/**\n * List of key-value pairs with layout and style options.\n * Props - `items` | `direction` | `divided` | `size` | `labelFlex` | `labelColor` | `valueColor` | `boldValue` | `noWrap` | `dividerColor` | `dividerThickness` | `dividerMargin` | `style`\n * @see {@link KeyValueProps}\n */\nexport interface KeyValueProps {\n  /** Custom styles to merge with component defaults */\n  style?: Style;\n  items: KeyValueEntry[];\n  /**\n   * @default 'horizontal'\n   */\n  direction?: KeyValueDirection;\n  /**\n   * @default false\n   */\n  divided?: boolean;\n  /**\n   * @default 'md'\n   */\n  size?: KeyValueSize;\n  /**\n   * @default 1\n   */\n  labelFlex?: number;\n  labelColor?: string;\n  valueColor?: string;\n  /**\n   * @default false\n   */\n  boldValue?: boolean;\n  /**\n   * @default false\n   */\n  noWrap?: boolean;\n  dividerColor?: string;\n  dividerThickness?: number;\n  dividerMargin?: number;\n}\n\nconst THEME_COLOR_KEYS = ['foreground','muted','mutedForeground','primary','primaryForeground','accent','destructive','success','warning','info'] as const;\nfunction resolveColor(value: string, colors: Record<string, string>): string {\n  return THEME_COLOR_KEYS.includes(value as (typeof THEME_COLOR_KEYS)[number]) ? colors[value] : value;\n}\nfunction createKeyValueStyles(t: PdfxTheme) {\n  const { spacing, fontWeights } = t.primitives;\n  const c = t.colors;\n  const { body } = t.typography;\n  const keyBase = {\n    fontFamily: body.fontFamily,\n    color: c.mutedForeground,\n    fontWeight: fontWeights.medium,\n  };\n  const valueBase = {\n    fontFamily: body.fontFamily,\n    color: c.foreground,\n    fontWeight: fontWeights.regular,\n  };\n  return StyleSheet.create({\n    container: { flexDirection: 'column' },\n    rowHorizontal: { flexDirection: 'row', alignItems: 'flex-start', paddingVertical: spacing[1] },\n    rowVertical: { flexDirection: 'column', marginBottom: t.spacing.paragraphGap },\n    divider: {\n      borderBottomWidth: spacing[0.5],\n      borderBottomColor: c.border,\n      borderBottomStyle: 'solid',\n    },\n    keySm: { ...keyBase, fontSize: t.primitives.typography.xs },\n    keyMd: { ...keyBase, fontSize: body.fontSize },\n    keyLg: { ...keyBase, fontSize: t.primitives.typography.base },\n    valueSm: { ...valueBase, fontSize: t.primitives.typography.xs },\n    valueMd: { ...valueBase, fontSize: body.fontSize },\n    valueLg: { ...valueBase, fontSize: t.primitives.typography.base },\n    valueBold: { fontWeight: fontWeights.bold },\n  });\n}\n\nexport function KeyValue({\n  items,\n  direction = 'horizontal',\n  divided = false,\n  size = 'md',\n  labelFlex = 1,\n  labelColor,\n  valueColor,\n  boldValue = false,\n  noWrap = false,\n  dividerColor,\n  dividerThickness,\n  dividerMargin,\n  style,\n}: KeyValueProps) {\n  const theme = usePdfxTheme();\n  const styles = useSafeMemo(() => createKeyValueStyles(theme), [theme]);\n  const keyStyleMap = { sm: styles.keySm, md: styles.keyMd, lg: styles.keyLg } as Record<\n    KeyValueSize,\n    Style\n  >;\n  const valueStyleMap = { sm: styles.valueSm, md: styles.valueMd, lg: styles.valueLg } as Record<\n    KeyValueSize,\n    Style\n  >;\n  const containerStyles: Style[] = [styles.container];\n  if (style) containerStyles.push(...[style].flat());\n\n  return (\n    <View wrap={!noWrap} style={containerStyles}>\n      {items.map((item, index) => {\n        const isLast = index === items.length - 1;\n        const keyStyles: Style[] = [keyStyleMap[size]];\n        if (labelColor) keyStyles.push({ color: resolveColor(labelColor, theme.colors) });\n        if (item.keyStyle) keyStyles.push(item.keyStyle);\n        const valStyles: Style[] = [valueStyleMap[size]];\n        if (boldValue) valStyles.push(styles.valueBold);\n        const resolvedValueColor = item.valueColor ?? valueColor;\n        if (resolvedValueColor)\n          valStyles.push({ color: resolveColor(resolvedValueColor, theme.colors) });\n        if (item.valueStyle) valStyles.push(item.valueStyle);\n\n        if (direction === 'horizontal') {\n          const rowStyles: Style[] = [styles.rowHorizontal];\n          if (divided && !isLast) {\n            const dividerStyle: Style = {};\n            if (dividerColor)\n              dividerStyle.borderBottomColor = resolveColor(dividerColor, theme.colors);\n            if (dividerThickness) dividerStyle.borderBottomWidth = dividerThickness;\n            if (dividerMargin) dividerStyle.marginBottom = dividerMargin;\n            rowStyles.push({ ...styles.divider, ...dividerStyle });\n          }\n          return (\n            <View key={item.key} style={rowStyles}>\n              <PDFText style={[...keyStyles, { flex: labelFlex }]}>{item.key}</PDFText>\n              <PDFText style={[...valStyles, { flex: 1, textAlign: 'right' }]}>\n                {item.value}\n              </PDFText>\n            </View>\n          );\n        }\n\n        const rowStyles: Style[] = [styles.rowVertical];\n        if (divided && !isLast) rowStyles.push(styles.divider);\n        return (\n          <View key={item.key} style={rowStyles}>\n            <PDFText style={keyStyles}>{item.key}</PDFText>\n            <PDFText style={valStyles}>{item.value}</PDFText>\n          </View>\n        );\n      })}\n    </View>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "dependencies": [
    "@react-pdf/renderer"
  ],
  "registryDependencies": [
    "theme"
  ]
}