{"version":3,"file":"C0jKwaYf.js","sources":["../../../../../../src/lib/components/common/Badge.svelte"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Badge component for displaying status indicators, tags, or labels\n   * \n   * Usage:\n   * <Badge>Default</Badge>\n   * <Badge variant=\"blue\">Blue</Badge>\n   * <Badge variant=\"green\">Green</Badge>\n   * <Badge variant=\"red\">Red</Badge>\n   * <Badge variant=\"yellow\">Yellow</Badge>\n   * <Badge variant=\"purple\">Purple</Badge>\n   * <Badge variant=\"gray\">Gray</Badge>\n   * <Badge icon=\"🐋\">Whale</Badge>\n   * <Badge tooltip=\"This is a tooltip\">With tooltip</Badge>\n   */\n  import { tooltip } from \"$lib/actions/tooltip\";\n\n  // Props\n  let { \n    variant = \"blue\", // blue, green, red, yellow, purple, gray\n    size = \"sm\",      // xs, sm, md, lg\n    icon = null,      // optional icon to display before text\n    pill = true,      // whether to use pill shape (rounded-full) or slightly rounded (rounded)\n    tooltip: tooltipText = null, // optional tooltip text\n    tooltipDirection = \"top\" as const, // tooltip direction: top, bottom, left, right\n    class: className = \"\", // additional classes\n    children = () => null\n  } = $props<{\n    variant?: \"blue\" | \"green\" | \"red\" | \"yellow\" | \"purple\" | \"gray\";\n    size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n    icon?: string | null;\n    pill?: boolean;\n    tooltip?: string | null;\n    tooltipDirection?: \"top\" | \"bottom\" | \"left\" | \"right\";\n    class?: string;\n    children?: () => any;\n  }>();\n\n  // Computed styles based on variant\n  const variantStyles = {\n    blue: \"bg-kong-accent-blue/20 text-kong-accent-blue\",\n    green: \"bg-kong-accent-green/20 text-kong-accent-green\",\n    red: \"bg-kong-accent-red/20 text-kong-accent-red\",\n    yellow: \"bg-kong-accent-yellow/20 text-kong-accent-yellow\",\n    purple: \"bg-kong-accent-purple/20 text-kong-accent-purple\",\n    gray: \"bg-kong-text-secondary/20 text-kong-text-secondary\"\n  };\n\n  // Size styles\n  const sizeStyles = {\n    xs: \"text-xs px-1 py-0.5 px-2\",\n    sm: \"text-xs px-1.5 py-0.5 px-2\",\n    md: \"text-sm px-2 py-1 px-2\",\n    lg: \"text-sm px-2.5 py-1.5 px-2\"\n  };\n\n  // Computed classes\n  const badgeClasses = `\n    inline-flex items-center gap-1 \n    ${variantStyles[variant] || variantStyles.blue} \n    ${sizeStyles[size] || sizeStyles.sm} \n    ${pill ? 'rounded-full' : 'rounded'} \n    font-medium\n    ${tooltipText ? 'cursor-help' : ''}\n    ${className}\n  `;\n</script>\n\n<span \n  class={badgeClasses}\n  use:tooltip={tooltipText ? { text: tooltipText, direction: tooltipDirection } : undefined}\n>\n  {#if icon}<span class=\"inline-block\">{icon}</span>{/if}\n  {@render children()}\n</span> "],"names":["variant","size","icon","pill","tooltipText","tooltipDirection","className","children","$.prop","$$props","variantStyles","blue","green","red","yellow","purple","gray","sizeStyles","xs","sm","md","lg","badgeClasses","$$render","consequent","text","direction"],"mappings":"mPAmBI,IAAAA,kBAAU,QACVC,eAAO,MACPC,eAAO,MACPC,gBAAO,GACEC,kBAAc,MACvBC,2BAAmB,OACZC,gBAAY,IACnBC,EAAiBC,EAAAC,EAAA,WAAA,GAAA,IAAA,aAabC,EAAa,CACjBC,KAAM,+CACNC,MAAO,iDACPC,IAAK,6CACLC,OAAQ,mDACRC,OAAQ,mDACRC,KAAM,sDAIFC,EAAU,CACdC,GAAI,2BACJC,GAAI,6BACJC,GAAI,yBACJC,GAAI,8BAIAC,EAAY,8CAEdZ,EAAcV,MAAYU,EAAcC,cACxCM,EAAWhB,MAASgB,EAAWE,YAC/BhB,IAAO,eAAiB,oCAExBC,IAAc,cAAgB,WAC9BE,4BAKGgB,yDAG+BpB,wBAAjCA,KAAIqB,EAAAC,EAAA,qBACAjB,mEAHIH,KAAgBqB,KAAMrB,IAAasB,UAAWrB,UAAqB"}