export declare const badgeTemplate = "\"use client\";\nimport styled, { css } from \"styled-components\";\nimport { Theme } from \"@/app/theme\";\nimport { Icon } from \"@/components/layout/Icon\";\n\ntype BadgeColor =\n  | \"gray\"\n  | \"blue\"\n  | \"green\"\n  | \"yellow\"\n  | \"orange\"\n  | \"red\"\n  | \"purple\"\n  | \"white\"\n  | \"surface\"\n  | \"white-destructive\"\n  | \"surface-destructive\"\n  | \"info\"\n  | \"success\"\n  | \"warning\"\n  | \"error\";\n\ntype BadgeSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\ntype BadgeShape = \"rounded\" | \"pill\";\n\n// The semantic colors read theme tokens instead of the fixed palette, so\n// they follow theme.json and the light/dark toggle. They are also what the\n// HTTP method chips use.\nconst THEME_TOKEN_COLORS = [\"info\", \"success\", \"warning\", \"error\"] as const;\n\ntype ThemeTokenColor = (typeof THEME_TOKEN_COLORS)[number];\n\ntype HexBadgeColor = Exclude<BadgeColor, ThemeTokenColor>;\n\nfunction isThemeTokenColor(color: BadgeColor): color is ThemeTokenColor {\n  return (THEME_TOKEN_COLORS as readonly string[]).includes(color);\n}\n\n// Single source for verb -> badge color, shared by the sidebar method tags\n// and the API playground so every surface colors HTTP verbs identically.\nconst HTTP_METHOD_COLORS: Record<string, BadgeColor> = {\n  get: \"info\",\n  post: \"success\",\n  put: \"warning\",\n  patch: \"warning\",\n  delete: \"error\",\n  head: \"gray\",\n  options: \"gray\",\n  trace: \"gray\",\n};\n\nfunction httpMethodBadgeColor(method: string): BadgeColor {\n  return HTTP_METHOD_COLORS[method.toLowerCase()] ?? \"gray\";\n}\n\ninterface BadgePalette {\n  background: string;\n  text: string;\n  border: string;\n  darkBackground: string;\n  darkText: string;\n  darkBorder: string;\n}\n\n// Strong fills for the hex palette; the white and surface variants have no\n// distinct solid form and fall back to their filled palette.\nconst SOLID_ACCENTS: Partial<Record<HexBadgeColor, string>> = {\n  gray: \"#71717a\",\n  blue: \"#3b82f6\",\n  green: \"#22c55e\",\n  yellow: \"#eab308\",\n  orange: \"#f97316\",\n  red: \"#ef4444\",\n  purple: \"#a855f7\",\n};\n\n// Color tints are label-semantic and intentionally independent of theme.json\n// (same rationale as Callout's alert tints); only the surface and semantic\n// token variants read theme tokens, so they follow the active theme on both\n// modes. When both are set, solid wins over stroke.\nfunction badgePalette(\n  theme: Theme,\n  color: BadgeColor,\n  stroke: boolean,\n  solid: boolean,\n): BadgePalette {\n  if (isThemeTokenColor(color)) {\n    const token = theme.colors[color];\n    if (solid) {\n      return {\n        background: token,\n        text: theme.colors.surface,\n        border: \"transparent\",\n        darkBackground: token,\n        darkText: theme.colors.surface,\n        darkBorder: \"transparent\",\n      };\n    }\n    if (stroke) {\n      return {\n        background: \"transparent\",\n        text: token,\n        border: token,\n        darkBackground: \"transparent\",\n        darkText: token,\n        darkBorder: token,\n      };\n    }\n    const tint = `color-mix(in srgb, ${token} 15%, transparent)`;\n    return {\n      background: tint,\n      text: token,\n      border: \"transparent\",\n      darkBackground: tint,\n      darkText: token,\n      darkBorder: \"transparent\",\n    };\n  }\n\n  const solidAccent = SOLID_ACCENTS[color];\n  if (solid && solidAccent) {\n    return {\n      background: solidAccent,\n      text: \"#ffffff\",\n      border: \"transparent\",\n      darkBackground: solidAccent,\n      darkText: \"#ffffff\",\n      darkBorder: \"transparent\",\n    };\n  }\n\n  // The \"surface\" variants sit on the page surface of the active theme: white\n  // on light, black on dark. They read theme.colors.light (the html/body\n  // background) rather than theme.colors.surface \u2014 that token is a foreground\n  // color that stays white in both modes, so using it here left the chip white\n  // on dark pages. The \"white\" variants below stay literally white by contract.\n  const surface = {\n    background: theme.colors.light,\n    text: theme.colors.grayDark,\n    border: theme.colors.grayLight,\n    darkBackground: theme.colors.light,\n    darkText: theme.colors.grayDark,\n    darkBorder: theme.colors.gray,\n  };\n\n  if (stroke && !solid) {\n    const strokes: Record<HexBadgeColor, BadgePalette> = {\n      gray: {\n        background: \"transparent\",\n        text: \"#52525b\",\n        border: \"#a1a1aa\",\n        darkBackground: \"transparent\",\n        darkText: \"#d4d4d8\",\n        darkBorder: \"#71717a\",\n      },\n      blue: {\n        background: \"transparent\",\n        text: \"#1d4ed8\",\n        border: \"#3b82f6\",\n        darkBackground: \"transparent\",\n        darkText: \"#93c5fd\",\n        darkBorder: \"#3b82f6\",\n      },\n      green: {\n        background: \"transparent\",\n        text: \"#15803d\",\n        border: \"#22c55e\",\n        darkBackground: \"transparent\",\n        darkText: \"#86efac\",\n        darkBorder: \"#22c55e\",\n      },\n      yellow: {\n        background: \"transparent\",\n        text: \"#a16207\",\n        border: \"#eab308\",\n        darkBackground: \"transparent\",\n        darkText: \"#fde047\",\n        darkBorder: \"#eab308\",\n      },\n      orange: {\n        background: \"transparent\",\n        text: \"#c2410c\",\n        border: \"#f97316\",\n        darkBackground: \"transparent\",\n        darkText: \"#fdba74\",\n        darkBorder: \"#f97316\",\n      },\n      red: {\n        background: \"transparent\",\n        text: \"#b91c1c\",\n        border: \"#ef4444\",\n        darkBackground: \"transparent\",\n        darkText: \"#fca5a5\",\n        darkBorder: \"#ef4444\",\n      },\n      purple: {\n        background: \"transparent\",\n        text: \"#7e22ce\",\n        border: \"#a855f7\",\n        darkBackground: \"transparent\",\n        darkText: \"#d8b4fe\",\n        darkBorder: \"#a855f7\",\n      },\n      white: {\n        background: \"transparent\",\n        text: \"#18181b\",\n        border: \"#e4e4e7\",\n        darkBackground: \"transparent\",\n        darkText: \"#fafafa\",\n        darkBorder: \"#3f3f46\",\n      },\n      surface: {\n        ...surface,\n        background: \"transparent\",\n        darkBackground: \"transparent\",\n      },\n      \"white-destructive\": {\n        background: \"transparent\",\n        text: \"#b91c1c\",\n        border: \"#ef4444\",\n        darkBackground: \"transparent\",\n        darkText: \"#fca5a5\",\n        darkBorder: \"#ef4444\",\n      },\n      \"surface-destructive\": {\n        background: \"transparent\",\n        text: \"#b91c1c\",\n        border: \"#ef4444\",\n        darkBackground: \"transparent\",\n        darkText: \"#fca5a5\",\n        darkBorder: \"#ef4444\",\n      },\n    };\n    return strokes[color];\n  }\n\n  const filled: Record<HexBadgeColor, BadgePalette> = {\n    gray: {\n      background: \"#f4f4f5\",\n      text: \"#3f3f46\",\n      border: \"transparent\",\n      darkBackground: \"#71717a33\",\n      darkText: \"#d4d4d8\",\n      darkBorder: \"transparent\",\n    },\n    blue: {\n      background: \"#dbeafe\",\n      text: \"#1e40af\",\n      border: \"transparent\",\n      darkBackground: \"#3b82f633\",\n      darkText: \"#93c5fd\",\n      darkBorder: \"transparent\",\n    },\n    green: {\n      background: \"#dcfce7\",\n      text: \"#166534\",\n      border: \"transparent\",\n      darkBackground: \"#22c55e33\",\n      darkText: \"#86efac\",\n      darkBorder: \"transparent\",\n    },\n    yellow: {\n      background: \"#fef9c3\",\n      text: \"#854d0e\",\n      border: \"transparent\",\n      darkBackground: \"#eab30833\",\n      darkText: \"#fde047\",\n      darkBorder: \"transparent\",\n    },\n    orange: {\n      background: \"#ffedd5\",\n      text: \"#9a3412\",\n      border: \"transparent\",\n      darkBackground: \"#f9731633\",\n      darkText: \"#fdba74\",\n      darkBorder: \"transparent\",\n    },\n    red: {\n      background: \"#fee2e2\",\n      text: \"#991b1b\",\n      border: \"transparent\",\n      darkBackground: \"#ef444433\",\n      darkText: \"#fca5a5\",\n      darkBorder: \"transparent\",\n    },\n    purple: {\n      background: \"#f3e8ff\",\n      text: \"#6b21a8\",\n      border: \"transparent\",\n      darkBackground: \"#a855f733\",\n      darkText: \"#d8b4fe\",\n      darkBorder: \"transparent\",\n    },\n    // Literally white in both modes, so it stays legible on images, colored\n    // frames, and hero areas. Use the surface variants for theme-aware chips.\n    white: {\n      background: \"#ffffff\",\n      text: \"#18181b\",\n      border: \"#e4e4e7\",\n      darkBackground: \"#ffffff\",\n      darkText: \"#18181b\",\n      darkBorder: \"#e4e4e7\",\n    },\n    surface,\n    \"white-destructive\": {\n      background: \"#ffffff\",\n      text: \"#b91c1c\",\n      border: \"#fecaca\",\n      darkBackground: \"#ffffff\",\n      darkText: \"#b91c1c\",\n      darkBorder: \"#fecaca\",\n    },\n    \"surface-destructive\": {\n      ...surface,\n      text: \"#b91c1c\",\n      border: \"#fecaca\",\n      darkText: \"#fca5a5\",\n      darkBorder: \"#ef444466\",\n    },\n  };\n  return filled[color];\n}\n\nconst badgeSizes = {\n  xs: css`\n    font-size: 11px;\n    line-height: 16px;\n    padding: 1px 6px;\n    gap: 3px;\n  `,\n  sm: css`\n    font-size: 12px;\n    line-height: 18px;\n    padding: 2px 8px;\n    gap: 4px;\n  `,\n  md: css`\n    font-size: 13px;\n    line-height: 20px;\n    padding: 3px 10px;\n    gap: 5px;\n  `,\n  lg: css`\n    font-size: 14px;\n    line-height: 22px;\n    padding: 4px 12px;\n    gap: 6px;\n  `,\n};\n\nconst badgeIconSizes: Record<BadgeSize, number> = {\n  xs: 10,\n  sm: 12,\n  md: 14,\n  lg: 16,\n};\n\nconst StyledBadge = styled.span<{\n  theme: Theme;\n  $color: BadgeColor;\n  $size: BadgeSize;\n  $shape: BadgeShape;\n  $stroke: boolean;\n  $solid: boolean;\n  $mono: boolean;\n  $disabled: boolean;\n}>`\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n  max-width: max-content;\n  font-family: inherit;\n  font-weight: 600;\n  white-space: nowrap;\n\n  & svg.lucide {\n    flex-shrink: 0;\n    color: inherit;\n  }\n\n  ${({ $size }) => badgeSizes[$size]}\n\n  ${({ theme, $mono }) =>\n    $mono &&\n    css`\n      font-family: ${theme.fonts.mono};\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n    `}\n\n  ${({ theme, $shape }) =>\n    $shape === \"pill\"\n      ? css`\n          border-radius: 999px;\n        `\n      : css`\n          border-radius: ${theme.spacing.radius.xs};\n        `}\n\n  ${({ theme, $color, $stroke, $solid }) => {\n    const palette = badgePalette(theme, $color, $stroke, $solid);\n    return css`\n      background: ${palette.background};\n      color: ${palette.text};\n      border: solid 1px ${palette.border};\n\n      :root[data-theme=\"dark\"] & {\n        background: ${palette.darkBackground};\n        color: ${palette.darkText};\n        border-color: ${palette.darkBorder};\n      }\n    `;\n  }}\n\n  ${({ $disabled }) =>\n    $disabled &&\n    css`\n      opacity: 0.5;\n    `}\n`;\n\ninterface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  children: React.ReactNode;\n  color?: BadgeColor;\n  size?: BadgeSize;\n  shape?: BadgeShape;\n  icon?: string;\n  stroke?: boolean;\n  solid?: boolean;\n  mono?: boolean;\n  disabled?: boolean;\n}\n\nfunction Badge({\n  children,\n  color = \"gray\",\n  size = \"md\",\n  shape = \"rounded\",\n  icon,\n  stroke = false,\n  solid = false,\n  mono = false,\n  disabled = false,\n  className,\n}: BadgeProps) {\n  return (\n    <StyledBadge\n      className={className}\n      $color={color}\n      $size={size}\n      $shape={shape}\n      $stroke={stroke}\n      $solid={solid}\n      $mono={mono}\n      $disabled={disabled}\n    >\n      {icon ? <Icon name={icon} size={badgeIconSizes[size]} /> : null}\n      {children}\n    </StyledBadge>\n  );\n}\n\nexport { Badge, httpMethodBadgeColor };\n";