{
  "$schema": "https://pdfx.akashpise.dev/schema/registry-item.json",
  "name": "alert",
  "type": "registry:ui",
  "title": "Alert",
  "description": "Callout boxes with info, success, warning, and error variants",
  "files": [
    {
      "path": "components/pdfx/alert/pdfx-alert.tsx",
      "content": "import { Circle, Line, Text as PDFText, Path, StyleSheet, Svg, View } from '@react-pdf/renderer';\nimport type { Style } from '@react-pdf/types';\nimport type { ReactNode } from 'react';\nimport { usePdfxTheme, useSafeMemo } from '../lib/pdfx-theme-context';\ntype PdfxTheme = ReturnType<typeof usePdfxTheme>;\n\nexport type AlertVariant = 'info' | 'success' | 'warning' | 'error';\n\n/**\n * Alert box with severity variants for info, success, warning, and error states.\n * Props - `variant` | `title` | `children` | `showIcon` | `showBorder` | `style`\n * @see {@link PdfAlertProps}\n */\nexport interface PdfAlertProps {\n  /** Custom styles to merge with component defaults */\n  style?: Style;\n  /**\n   * @default 'info'\n   */\n  variant?: AlertVariant;\n  title?: string;\n  children?: ReactNode;\n  /**\n   * @default true\n   */\n  showIcon?: boolean;\n  /**\n   * @default true\n   */\n  showBorder?: boolean;\n}\n\n/** Stroke width for all alert SVG icons (SVG user units). */\nconst ICON_STROKE_WIDTH = 1.5;\n\nconst SvgWrap = ({ children }: { children: ReactNode }) => (\n  <Svg width={16} height={16} viewBox=\"0 0 16 16\">\n    {children}\n  </Svg>\n);\n\nconst ICON_MAP = {\n  info: ({ color }: { color: string }) => (\n    <SvgWrap>\n      <Circle cx={8} cy={8} r={7} fill=\"none\" stroke={color} strokeWidth={ICON_STROKE_WIDTH} />\n      <Circle cx={8} cy={4.5} r={1} fill={color} />\n      <Line\n        x1={8}\n        y1={7}\n        x2={8}\n        y2={11.5}\n        stroke={color}\n        strokeWidth={ICON_STROKE_WIDTH}\n        strokeLinecap=\"round\"\n      />\n    </SvgWrap>\n  ),\n  success: ({ color }: { color: string }) => (\n    <SvgWrap>\n      <Circle cx={8} cy={8} r={7} fill=\"none\" stroke={color} strokeWidth={ICON_STROKE_WIDTH} />\n      <Path\n        d=\"M5 8 L7 10 L11 6\"\n        fill=\"none\"\n        stroke={color}\n        strokeWidth={ICON_STROKE_WIDTH}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </SvgWrap>\n  ),\n  warning: ({ color }: { color: string }) => (\n    <SvgWrap>\n      <Path\n        d=\"M8 1.5 L15 14.5 L1 14.5 Z\"\n        fill=\"none\"\n        stroke={color}\n        strokeWidth={ICON_STROKE_WIDTH}\n        strokeLinejoin=\"round\"\n      />\n      <Line\n        x1={8}\n        y1={6}\n        x2={8}\n        y2={10}\n        stroke={color}\n        strokeWidth={ICON_STROKE_WIDTH}\n        strokeLinecap=\"round\"\n      />\n      <Circle cx={8} cy={12.5} r={0.75} fill={color} />\n    </SvgWrap>\n  ),\n  error: ({ color }: { color: string }) => (\n    <SvgWrap>\n      <Circle cx={8} cy={8} r={7} fill=\"none\" stroke={color} strokeWidth={ICON_STROKE_WIDTH} />\n      <Line\n        x1={5.5}\n        y1={5.5}\n        x2={10.5}\n        y2={10.5}\n        stroke={color}\n        strokeWidth={ICON_STROKE_WIDTH}\n        strokeLinecap=\"round\"\n      />\n      <Line\n        x1={10.5}\n        y1={5.5}\n        x2={5.5}\n        y2={10.5}\n        stroke={color}\n        strokeWidth={ICON_STROKE_WIDTH}\n        strokeLinecap=\"round\"\n      />\n    </SvgWrap>\n  ),\n};\n\nfunction AlertIcon({ variant, color }: { variant: AlertVariant; color: string }) {\n  const Icon = ICON_MAP[variant];\n  return <Icon color={color} />;\n}\n\nfunction createAlertStyles(theme: PdfxTheme) {\n  const { typography, colors, primitives } = theme;\n\n  const variantColors = {\n    info: colors.info ?? '#3B82F6',\n    success: colors.success ?? '#22C55E',\n    warning: colors.warning ?? '#F59E0B',\n    error: colors.destructive ?? '#EF4444',\n  } satisfies Record<AlertVariant, string>;\n\n  const bl = (color: string) => ({ borderLeftColor: color, borderLeftWidth: 4 });\n\n  const sheet = StyleSheet.create({\n    container: {\n      flexDirection: 'row',\n      padding: 12,\n      borderRadius: 4,\n      marginBottom: theme.spacing.componentGap,\n    },\n    bg: {\n      backgroundColor: colors.muted,\n    },\n    borderInfo: bl(variantColors.info),\n    borderSuccess: bl(variantColors.success),\n    borderWarning: bl(variantColors.warning),\n    borderError: bl(variantColors.error),\n    iconContainer: {\n      width: 20,\n      marginRight: 10,\n      alignItems: 'center',\n      justifyContent: 'flex-start',\n      paddingTop: 2,\n    },\n    contentContainer: { flex: 1 },\n    title: {\n      fontFamily: typography.heading.fontFamily,\n      fontSize: primitives.typography.sm,\n      fontWeight: primitives.fontWeights.semibold,\n      color: colors.foreground,\n      marginBottom: 4,\n    },\n    description: {\n      fontFamily: typography.body.fontFamily,\n      fontSize: primitives.typography.sm,\n      lineHeight: typography.body.lineHeight,\n      color: colors.mutedForeground,\n    },\n  });\n\n  return {\n    ...sheet,\n    borderMap: {\n      info: sheet.borderInfo,\n      success: sheet.borderSuccess,\n      warning: sheet.borderWarning,\n      error: sheet.borderError,\n    } as Record<AlertVariant, Style>,\n    /** Resolved hex colors for each variant — used to tint the SVG icons. */\n    variantColors,\n  };\n}\n\nexport function PdfAlert({\n  variant = 'info',\n  title,\n  children,\n  showIcon = true,\n  showBorder = true,\n  style,\n}: PdfAlertProps) {\n  const theme = usePdfxTheme();\n  const styles = useSafeMemo(() => createAlertStyles(theme), [theme]);\n\n  if (!title && !children) return null;\n\n  const containerStyles: Style[] = [\n    styles.container,\n    styles.bg,\n    ...(showBorder ? [styles.borderMap[variant]] : []),\n    ...(style ? [style].flat() : []),\n  ];\n\n  return (\n    <View wrap={false} style={containerStyles}>\n      {showIcon && (\n        <View style={styles.iconContainer}>\n          <AlertIcon variant={variant} color={styles.variantColors[variant]} />\n        </View>\n      )}\n      <View style={styles.contentContainer}>\n        {title && <PDFText style={styles.title}>{title}</PDFText>}\n        {typeof children === 'string' ? (\n          <PDFText style={styles.description}>{children}</PDFText>\n        ) : (\n          children\n        )}\n      </View>\n    </View>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "dependencies": [
    "@react-pdf/renderer"
  ],
  "registryDependencies": [
    "theme"
  ]
}