@avenue-ticketing/ui 0.11.0 → 0.12.0-beta.2

package/dist/react/badge.d.ts

@@ -1,67 +1,131 @@
-import * as React from 'react';
+import * as react from 'react';
+import { ReactNode, MouseEventHandler } from 'react';
+import { B as BadgeTypes, S as Sizes, a as BadgeTypeToColorMap, b as BadgeColors, I as IconComponentType, F as FlagTypes } from '../badge-types-B67wcd4m.js';
 
-/** Matches `button.tsx` primary / secondary — no separate outline variants. */
-declare const variantClass: {
-    readonly primary: "border border-transparent bg-primary text-background";
-    readonly secondary: "border border-primary/10 bg-transparent text-primary";
+declare const filledColors: Record<BadgeColors, {
+    root: string;
+    addon: string;
+    addonButton: string;
+}>;
+declare const withPillTypes: {
+    "pill-color": {
+        common: string;
+        styles: Record<BadgeColors, {
+            root: string;
+            addon: string;
+            addonButton: string;
+        }>;
+    };
+    color: {
+        common: string;
+        styles: Record<BadgeColors, {
+            root: string;
+            addon: string;
+            addonButton: string;
+        }>;
+    };
+    modern: {
+        common: string;
+        styles: {
+            gray: {
+                root: string;
+                addon: string;
+                addonButton: string;
+            };
+        };
+    };
 };
-/** Same keys as `button.tsx` `roundedClass`. */
-declare const roundedClass: {
-    readonly full: "rounded-full";
-    readonly lg: "rounded-lg";
-    readonly md: "rounded-md";
+declare const withBadgeTypes: {
+    "pill-color": {
+        common: string;
+        styles: Record<BadgeColors, {
+            root: string;
+            addon: string;
+            addonButton: string;
+        }>;
+    };
+    color: {
+        common: string;
+        styles: Record<BadgeColors, {
+            root: string;
+            addon: string;
+            addonButton: string;
+        }>;
+    };
+    modern: {
+        common: string;
+        styles: Record<BadgeColors, {
+            root: string;
+            addon: string;
+        }>;
+    };
 };
-declare const sizeClass: {
-    readonly md: "min-h-6 min-w-6 px-2 text-xs";
-    readonly lg: "min-h-7 min-w-7 px-2.5 text-sm";
-};
-type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
-    /** @default secondary — same as Button default. */
-    variant?: keyof typeof variantClass;
-    /** @default md */
-    size?: keyof typeof sizeClass;
-    /**
-     * Corner radius — same options as `Button` (`full` | `lg` | `md`).
-     * @default full (pill)
-     */
-    rounded?: keyof typeof roundedClass;
-    /**
-     * When set, the label is the number capped at `max` with a "+" suffix
-     * (e.g. `max={99}` → `99+`). Ignores `children` for the visible text.
-     */
-    count?: number;
-    /** Upper bound before showing `{max}+`. Default `99`. */
-    max?: number;
-    /**
-     * Hex color (`#RGB`, `#RRGGBB`, or `#RRGGBBAA`) — tints the badge to that
-     * hue. When set, `variant` is ignored for colors. Invalid values are ignored
-     * and the badge falls back to `variant`.
-     */
-    overrideColor?: string;
-};
-declare const Badge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
-    /** @default secondary — same as Button default. */
-    variant?: keyof typeof variantClass;
-    /** @default md */
-    size?: keyof typeof sizeClass;
-    /**
-     * Corner radius — same options as `Button` (`full` | `lg` | `md`).
-     * @default full (pill)
-     */
-    rounded?: keyof typeof roundedClass;
+type BadgeColor<T extends BadgeTypes> = BadgeTypeToColorMap<typeof withPillTypes>[T];
+interface BadgeProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    color?: BadgeColor<T>;
+    children: ReactNode;
+    className?: string;
+}
+declare const Badge: <T extends BadgeTypes>(props: BadgeProps<T>) => react.JSX.Element;
+interface BadgeWithDotProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    color?: BadgeTypeToColorMap<typeof withBadgeTypes>[T];
+    className?: string;
+    children: ReactNode;
+}
+declare const BadgeWithDot: <T extends BadgeTypes>(props: BadgeWithDotProps<T>) => react.JSX.Element;
+interface BadgeWithIconProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    color?: BadgeTypeToColorMap<typeof withBadgeTypes>[T];
+    iconLeading?: IconComponentType;
+    iconTrailing?: IconComponentType;
+    children: ReactNode;
+    className?: string;
+}
+declare const BadgeWithIcon: <T extends BadgeTypes>(props: BadgeWithIconProps<T>) => react.JSX.Element;
+interface BadgeWithFlagProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    flag?: FlagTypes;
+    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];
+    children: ReactNode;
+}
+declare const BadgeWithFlag: <T extends BadgeTypes>(props: BadgeWithFlagProps<T>) => react.JSX.Element;
+interface BadgeWithImageProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    imgSrc: string;
+    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];
+    children: ReactNode;
+}
+declare const BadgeWithImage: <T extends BadgeTypes>(props: BadgeWithImageProps<T>) => react.JSX.Element;
+interface BadgeWithButtonProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    icon?: IconComponentType;
+    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];
+    children: ReactNode;
     /**
-     * When set, the label is the number capped at `max` with a "+" suffix
-     * (e.g. `max={99}` → `99+`). Ignores `children` for the visible text.
+     * The label for the button.
      */
-    count?: number;
-    /** Upper bound before showing `{max}+`. Default `99`. */
-    max?: number;
+    buttonLabel?: string;
     /**
-     * Hex color (`#RGB`, `#RRGGBB`, or `#RRGGBBAA`) — tints the badge to that
-     * hue. When set, `variant` is ignored for colors. Invalid values are ignored
-     * and the badge falls back to `variant`.
+     * The click event handler for the button.
      */
-    overrideColor?: string;
-} & React.RefAttributes<HTMLSpanElement>>;
+    onButtonClick?: MouseEventHandler<HTMLButtonElement>;
+}
+declare const BadgeWithButton: <T extends BadgeTypes>(props: BadgeWithButtonProps<T>) => react.JSX.Element;
+interface BadgeIconProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    icon: IconComponentType;
+    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];
+    children?: ReactNode;
+}
+declare const BadgeIcon: <T extends BadgeTypes>(props: BadgeIconProps<T>) => react.JSX.Element;
 
-export { Badge, type BadgeProps };
+export { Badge, type BadgeColor, BadgeIcon, BadgeWithButton, BadgeWithDot, BadgeWithFlag, BadgeWithIcon, BadgeWithImage, filledColors };

package/dist/react/badge.js

@@ -1,98 +1,326 @@
-import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsx } from 'react/jsx-runtime';
+import { XIcon } from '@phosphor-icons/react/dist/csr/X';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { extendTailwindMerge } from 'tailwind-merge';
 
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var variantClass = {
-  primary: "border border-transparent bg-primary text-background",
-  secondary: "border border-primary/10 bg-transparent text-primary"
+var sizes = {
+  sm: {
+    wh: 8,
+    c: 4,
+    r: 2.5
+  },
+  md: {
+    wh: 10,
+    c: 5,
+    r: 4
+  }
+};
+var Dot = ({ size = "md", ...props }) => {
+  return /* @__PURE__ */ jsx("svg", { width: sizes[size].wh, height: sizes[size].wh, viewBox: `0 0 ${sizes[size].wh} ${sizes[size].wh}`, fill: "none", ...props, children: /* @__PURE__ */ jsx("circle", { cx: sizes[size].c, cy: sizes[size].c, r: sizes[size].r, fill: "currentColor", stroke: "currentColor" }) });
+};
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
+    }
+  }
+});
+var cx = twMerge;
+
+// ../../components/base/badges/badge-types.ts
+var badgeTypes = {
+  pillColor: "pill-color",
+  badgeColor: "color",
+  badgeModern: "modern"
 };
-var roundedClass = {
-  full: "rounded-full",
-  lg: "rounded-lg",
-  md: "rounded-md"
+var focusShadowPlain = "focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var filledColors = {
+  gray: {
+    root: "bg-utility-neutral-50 text-utility-neutral-700 ring-utility-neutral-200",
+    addon: "text-utility-neutral-500",
+    addonButton: "hover:bg-utility-neutral-100 text-utility-neutral-400 hover:text-utility-neutral-500"
+  },
+  brand: {
+    root: "bg-utility-brand-50 text-utility-brand-700 ring-utility-brand-200",
+    addon: "text-utility-brand-500",
+    addonButton: "hover:bg-utility-brand-100 text-utility-brand-400 hover:text-utility-brand-500"
+  },
+  error: {
+    root: "bg-utility-red-50 text-utility-red-700 ring-utility-red-200",
+    addon: "text-utility-red-500",
+    addonButton: "hover:bg-utility-red-100 text-utility-red-400 hover:text-utility-red-500"
+  },
+  warning: {
+    root: "bg-utility-yellow-50 text-utility-yellow-700 ring-utility-yellow-200",
+    addon: "text-utility-yellow-500",
+    addonButton: "hover:bg-utility-yellow-100 text-utility-yellow-400 hover:text-utility-yellow-500"
+  },
+  success: {
+    root: "bg-utility-green-50 text-utility-green-700 ring-utility-green-200",
+    addon: "text-utility-green-500",
+    addonButton: "hover:bg-utility-green-100 text-utility-green-400 hover:text-utility-green-500"
+  },
+  slate: {
+    root: "bg-utility-slate-50 text-utility-slate-700 ring-utility-slate-200",
+    addon: "text-utility-slate-500",
+    addonButton: "hover:bg-utility-slate-100 text-utility-slate-400 hover:text-utility-slate-500"
+  },
+  sky: {
+    root: "bg-utility-sky-50 text-utility-sky-700 ring-utility-sky-200",
+    addon: "text-utility-sky-500",
+    addonButton: "hover:bg-utility-sky-100 text-utility-sky-400 hover:text-utility-sky-500"
+  },
+  blue: {
+    root: "bg-utility-blue-50 text-utility-blue-700 ring-utility-blue-200",
+    addon: "text-utility-blue-500",
+    addonButton: "hover:bg-utility-blue-100 text-utility-blue-400 hover:text-utility-blue-500"
+  },
+  indigo: {
+    root: "bg-utility-indigo-50 text-utility-indigo-700 ring-utility-indigo-200",
+    addon: "text-utility-indigo-500",
+    addonButton: "hover:bg-utility-indigo-100 text-utility-indigo-400 hover:text-utility-indigo-500"
+  },
+  purple: {
+    root: "bg-utility-purple-50 text-utility-purple-700 ring-utility-purple-200",
+    addon: "text-utility-purple-500",
+    addonButton: "hover:bg-utility-purple-100 text-utility-purple-400 hover:text-utility-purple-500"
+  },
+  pink: {
+    root: "bg-utility-pink-50 text-utility-pink-700 ring-utility-pink-200",
+    addon: "text-utility-pink-500",
+    addonButton: "hover:bg-utility-pink-100 text-utility-pink-400 hover:text-utility-pink-500"
+  },
+  orange: {
+    root: "bg-utility-orange-50 text-utility-orange-700 ring-utility-orange-200",
+    addon: "text-utility-orange-500",
+    addonButton: "hover:bg-utility-orange-100 text-utility-orange-400 hover:text-utility-orange-500"
+  }
 };
-var sizeClass = {
-  md: "min-h-6 min-w-6 px-2 text-xs",
-  lg: "min-h-7 min-w-7 px-2.5 text-sm"
+var addonOnlyColors = Object.fromEntries(Object.entries(filledColors).map(([key, value]) => [key, { root: "", addon: value.addon }]));
+var withPillTypes = {
+  [badgeTypes.pillColor]: {
+    common: "size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset",
+    styles: filledColors
+  },
+  [badgeTypes.badgeColor]: {
+    common: "size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset",
+    styles: filledColors
+  },
+  [badgeTypes.badgeModern]: {
+    common: "size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset shadow-xs",
+    styles: {
+      gray: {
+        root: "bg-primary text-secondary ring-primary",
+        addon: "text-neutral-500",
+        addonButton: "hover:bg-utility-neutral-100 text-utility-neutral-400 hover:text-utility-neutral-500"
+      }
+    }
+  }
 };
-var OVERRIDE_BG_ALPHA = 0.18;
-var OVERRIDE_BORDER_ALPHA = 0.38;
-function parseHexToRgb(value) {
-  const v = value.trim();
-  if (!v.startsWith("#") || v.length < 2) return null;
-  let h = v.slice(1);
-  if (h.length === 3) {
-    h = h.split("").map((c) => c + c).join("");
-  } else if (h.length === 8) {
-    h = h.slice(0, 6);
+var withBadgeTypes = {
+  [badgeTypes.pillColor]: {
+    common: "size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset",
+    styles: filledColors
+  },
+  [badgeTypes.badgeColor]: {
+    common: "size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset",
+    styles: filledColors
+  },
+  [badgeTypes.badgeModern]: {
+    common: "size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset bg-primary text-secondary ring-primary shadow-xs",
+    styles: addonOnlyColors
   }
-  if (h.length !== 6 || !/^[0-9A-Fa-f]{6}$/i.test(h)) return null;
-  const r = parseInt(h.slice(0, 2), 16);
-  const g = parseInt(h.slice(2, 4), 16);
-  const b = parseInt(h.slice(4, 6), 16);
-  if ([r, g, b].some((n) => Number.isNaN(n))) return null;
-  return { r, g, b };
-}
-function overrideColorStyles(rgb) {
-  const { r, g, b } = rgb;
-  return {
-    backgroundColor: `rgba(${r},${g},${b},${OVERRIDE_BG_ALPHA})`,
-    color: `rgb(${r},${g},${b})`,
-    boxShadow: `inset 0 0 0 1px rgba(${r},${g},${b},${OVERRIDE_BORDER_ALPHA})`
-  };
-}
-function formatCount(count, max) {
-  if (count > max) return `${max}+`;
-  return String(count);
-}
-var Badge = React.forwardRef(
-  ({
-    className,
-    variant = "secondary",
-    size = "md",
-    rounded = "full",
-    count,
-    max = 99,
+};
+var Badge = (props) => {
+  const { type = "pill-color", size = "md", color = "gray", children } = props;
+  const colors = withPillTypes[type];
+  const pillSizes = {
+    sm: "py-0.5 px-2 text-xs font-semibold",
+    md: "py-0.5 px-2.5 text-sm font-semibold",
+    lg: "py-1 px-3 text-sm font-semibold"
+  };
+  const badgeSizes = {
+    sm: "py-0.5 px-1.5 text-xs font-semibold",
+    md: "py-0.5 px-2 text-sm font-semibold",
+    lg: "py-1 px-2.5 text-sm font-semibold rounded-lg"
+  };
+  const sizes2 = {
+    [badgeTypes.pillColor]: pillSizes,
+    [badgeTypes.badgeColor]: badgeSizes,
+    [badgeTypes.badgeModern]: badgeSizes
+  };
+  return /* @__PURE__ */ jsx("span", { className: cx(colors.common, sizes2[type][size], colors.styles[color].root, props.className), children });
+};
+var BadgeWithDot = (props) => {
+  const { size = "md", color = "gray", type = "pill-color", className, children } = props;
+  const colors = withBadgeTypes[type];
+  const pillSizes = {
+    sm: "gap-1 py-0.5 pl-1.5 pr-2 text-xs font-semibold",
+    md: "gap-1.5 py-0.5 pl-2 pr-2.5 text-sm font-semibold",
+    lg: "gap-1.5 py-1 pl-2.5 pr-3 text-sm font-semibold"
+  };
+  const badgeSizes = {
+    sm: "gap-1 py-0.5 px-1.5 text-xs font-semibold",
+    md: "gap-1.5 py-0.5 px-2 text-sm font-semibold",
+    lg: "gap-1.5 py-1 px-2.5 text-sm font-semibold rounded-lg"
+  };
+  const sizes2 = {
+    [badgeTypes.pillColor]: pillSizes,
+    [badgeTypes.badgeColor]: badgeSizes,
+    [badgeTypes.badgeModern]: badgeSizes
+  };
+  return /* @__PURE__ */ jsxs("span", { className: cx(colors.common, sizes2[type][size], colors.styles[color].root, className), children: [
+    /* @__PURE__ */ jsx(Dot, { className: colors.styles[color].addon, size: "sm" }),
+    children
+  ] });
+};
+var badgeIconClassName = "size-3";
+var BadgeWithIcon = (props) => {
+  const { size = "md", color = "gray", type = "pill-color", iconLeading: IconLeading, iconTrailing: IconTrailing, children, className } = props;
+  const colors = withBadgeTypes[type];
+  const icon = IconLeading ? "leading" : "trailing";
+  const pillSizes = {
+    sm: {
+      trailing: "gap-0.5 py-0.5 pl-2 pr-1.5 text-xs font-semibold",
+      leading: "gap-0.5 py-0.5 pr-2 pl-1.5 text-xs font-semibold"
+    },
+    md: {
+      trailing: "gap-1 py-0.5 pl-2.5 pr-2 text-sm font-semibold",
+      leading: "gap-1 py-0.5 pr-2.5 pl-2 text-sm font-semibold"
+    },
+    lg: {
+      trailing: "gap-1 py-1 pl-3 pr-2.5 text-sm font-semibold",
+      leading: "gap-1 py-1 pr-3 pl-2.5 text-sm font-semibold"
+    }
+  };
+  const badgeSizes = {
+    sm: {
+      trailing: "gap-0.5 py-0.5 pl-2 pr-1.5 text-xs font-semibold",
+      leading: "gap-0.5 py-0.5 pr-2 pl-1.5 text-xs font-semibold"
+    },
+    md: {
+      trailing: "gap-1 py-0.5 pl-2 pr-1.5 text-sm font-semibold",
+      leading: "gap-1 py-0.5 pr-2 pl-1.5 text-sm font-semibold"
+    },
+    lg: {
+      trailing: "gap-1 py-1 pl-2.5 pr-2 text-sm font-semibold rounded-lg",
+      leading: "gap-1 py-1 pr-2.5 pl-2 text-sm font-semibold rounded-lg"
+    }
+  };
+  const sizes2 = {
+    [badgeTypes.pillColor]: pillSizes,
+    [badgeTypes.badgeColor]: badgeSizes,
+    [badgeTypes.badgeModern]: badgeSizes
+  };
+  return /* @__PURE__ */ jsxs("span", { className: cx(colors.common, sizes2[type][size][icon], colors.styles[color].root, className), children: [
+    IconLeading && /* @__PURE__ */ jsx(IconLeading, { weight: "bold", className: cx(colors.styles[color].addon, badgeIconClassName) }),
     children,
-    "aria-label": ariaLabelProp,
-    overrideColor,
-    style,
-    ...props
-  }, ref) => {
-    const content = count !== void 0 ? formatCount(count, max) : children;
-    const rgb = overrideColor && overrideColor.trim() !== "" ? parseHexToRgb(overrideColor) : null;
-    const useOverride = rgb != null;
-    const overrideStyle = useOverride ? overrideColorStyles(rgb) : void 0;
-    return /* @__PURE__ */ jsx(
-      "span",
+    IconTrailing && /* @__PURE__ */ jsx(IconTrailing, { weight: "bold", className: cx(colors.styles[color].addon, badgeIconClassName) })
+  ] });
+};
+var BadgeWithFlag = (props) => {
+  const { size = "md", color = "gray", flag = "AU", type = "pill-color", children } = props;
+  const colors = withPillTypes[type];
+  const pillSizes = {
+    sm: "gap-1 py-0.5 pl-0.75 pr-2 text-xs font-semibold",
+    md: "gap-1.5 py-0.5 pl-1 pr-2.5 text-sm font-semibold",
+    lg: "gap-1.5 py-1 pl-1.5 pr-3 text-sm font-semibold"
+  };
+  const badgeSizes = {
+    sm: "gap-1 py-0.5 pl-1 pr-1.5 text-xs font-semibold",
+    md: "gap-1.5 py-0.5 pl-1.5 pr-2 text-sm font-semibold",
+    lg: "gap-1.5 py-1 pl-2 pr-2.5 text-sm font-semibold rounded-lg"
+  };
+  const sizes2 = {
+    [badgeTypes.pillColor]: pillSizes,
+    [badgeTypes.badgeColor]: badgeSizes,
+    [badgeTypes.badgeModern]: badgeSizes
+  };
+  return /* @__PURE__ */ jsxs("span", { className: cx(colors.common, sizes2[type][size], colors.styles[color].root), children: [
+    /* @__PURE__ */ jsx("img", { src: `https://www.untitledui.com/images/flags/${flag}.svg`, className: "size-4 max-w-none rounded-full", alt: `${flag} flag` }),
+    children
+  ] });
+};
+var BadgeWithImage = (props) => {
+  const { size = "md", color = "gray", type = "pill-color", imgSrc, children } = props;
+  const colors = withPillTypes[type];
+  const pillSizes = {
+    sm: "gap-1 py-0.5 pl-0.75 pr-2 text-xs font-semibold",
+    md: "gap-1.5 py-0.5 pl-1 pr-2.5 text-sm font-semibold",
+    lg: "gap-1.5 py-1 pl-1.5 pr-3 text-sm font-semibold"
+  };
+  const badgeSizes = {
+    sm: "gap-1 py-0.5 pl-1 pr-1.5 text-xs font-semibold",
+    md: "gap-1.5 py-0.5 pl-1.5 pr-2 text-sm font-semibold",
+    lg: "gap-1.5 py-1 pl-2 pr-2.5 text-sm font-semibold rounded-lg"
+  };
+  const sizes2 = {
+    [badgeTypes.pillColor]: pillSizes,
+    [badgeTypes.badgeColor]: badgeSizes,
+    [badgeTypes.badgeModern]: badgeSizes
+  };
+  return /* @__PURE__ */ jsxs("span", { className: cx(colors.common, sizes2[type][size], colors.styles[color].root), children: [
+    /* @__PURE__ */ jsx("img", { src: imgSrc, className: "size-4 max-w-none rounded-full", alt: "Badge image" }),
+    children
+  ] });
+};
+var BadgeWithButton = (props) => {
+  const { size = "md", color = "gray", type = "pill-color", icon: Icon = XIcon, buttonLabel, children } = props;
+  const colors = withPillTypes[type];
+  const pillSizes = {
+    sm: "gap-0.5 py-0.5 pl-2 pr-0.75 text-xs font-semibold",
+    md: "gap-0.5 py-0.5 pl-2.5 pr-1 text-sm font-semibold",
+    lg: "gap-0.5 py-1 pl-3 pr-1.5 text-sm font-semibold"
+  };
+  const badgeSizes = {
+    sm: "gap-0.5 py-0.5 pl-1.5 pr-0.75 text-xs font-semibold",
+    md: "gap-0.5 py-0.5 pl-2 pr-1 text-sm font-semibold",
+    lg: "gap-0.5 py-1 pl-2.5 pr-1.5 text-sm font-semibold rounded-lg"
+  };
+  const sizes2 = {
+    [badgeTypes.pillColor]: pillSizes,
+    [badgeTypes.badgeColor]: badgeSizes,
+    [badgeTypes.badgeModern]: badgeSizes
+  };
+  return /* @__PURE__ */ jsxs("span", { className: cx(colors.common, sizes2[type][size], colors.styles[color].root), children: [
+    children,
+    /* @__PURE__ */ jsx(
+      "button",
       {
-        ref,
-        "data-slot": "badge",
-        "data-size": size,
-        "data-rounded": rounded,
-        "data-override": useOverride ? "true" : void 0,
-        "aria-label": ariaLabelProp,
-        className: cn(
-          "inline-flex shrink-0 items-center justify-center font-semibold leading-none tabular-nums",
-          roundedClass[rounded],
-          sizeClass[size],
-          !useOverride && variantClass[variant],
-          useOverride && "border-0",
-          className
+        type: "button",
+        "aria-label": buttonLabel,
+        onClick: props.onButtonClick,
+        className: cx(
+          "flex cursor-pointer items-center justify-center p-0.5 transition duration-100 ease-linear",
+          focusShadowPlain,
+          colors.styles[color].addonButton,
+          type === "pill-color" ? "rounded-full" : "rounded-[3px]"
         ),
-        style: { ...overrideStyle, ...style },
-        ...props,
-        children: content
+        children: /* @__PURE__ */ jsx(Icon, { weight: "bold", className: cx(badgeIconClassName, "transition-inherit-all") })
       }
-    );
-  }
-);
-Badge.displayName = "Badge";
+    )
+  ] });
+};
+var BadgeIcon = (props) => {
+  const { size = "md", color = "gray", type = "pill-color", icon: Icon } = props;
+  const colors = withPillTypes[type];
+  const pillSizes = {
+    sm: "p-1.25",
+    md: "p-1.5",
+    lg: "p-2"
+  };
+  const badgeSizes = {
+    sm: "p-1.25",
+    md: "p-1.5",
+    lg: "p-2 rounded-lg"
+  };
+  const sizes2 = {
+    [badgeTypes.pillColor]: pillSizes,
+    [badgeTypes.badgeColor]: badgeSizes,
+    [badgeTypes.badgeModern]: badgeSizes
+  };
+  return /* @__PURE__ */ jsx("span", { className: cx(colors.common, sizes2[type][size], colors.styles[color].root), children: /* @__PURE__ */ jsx(Icon, { weight: "bold", className: cx(badgeIconClassName, colors.styles[color].addon) }) });
+};
 
-export { Badge };
+export { Badge, BadgeIcon, BadgeWithButton, BadgeWithDot, BadgeWithFlag, BadgeWithIcon, BadgeWithImage, filledColors };
 //# sourceMappingURL=badge.js.map
 //# sourceMappingURL=badge.js.map