Badges

---
// Imports
import { type HTMLAttributes } from "astro/types";
import { tv, type VariantProps } from "@utils/custom-tv";
import Icon from "./Icon.astro";
import {
  getOutlinedClasses,
  type ColorName,
  getDefaultClasses,
  getSoftClasses,
  colorPalette,
} from "@utils/colorUtils";
import { twMerge } from "tailwind-merge";

// PropTypes for documentation
export const propTypes = {
  content: {
    type: "string | JSX.Element",
    description: "The content of the badge",
  },
  icon: {
    type: "string | { name: string; class?: string }",
    description: "The icon to display in the badge",
  },
  iconPosition: {
    type: ["left", "right"],
    description: "The position of the icon",
    default: "left",
  },
  class: {
    type: "string",
    description: "Additional CSS classes to apply to the badge",
  },
  removable: {
    type: "boolean",
    description: "Whether the badge is removable",
    default: false,
  },
  variant: {
    type: ["solid", "soft", "outline"],
    description: "The variant of the badge",
    default: "solid",
  },
  color: {
    type: Object.keys(colorPalette),
    description: "The color scheme for the badge",
    default: "blue",
  },
  shape: {
    type: ["rounded", "square", "pill"],
    description: "The shape of the badge",
    default: "rounded",
  },
  size: {
    type: ["sm", "md", "lg"],
    description: "The size of the badge",
    default: "md",
  },
  maxWidth: {
    type: "string",
    description: "The maximum width of the badge",
  },
  animated: {
    type: "boolean",
    description: "Whether the badge should have animations",
    default: false,
  },
};

// Types and Interfaces
type BadgeVariants = VariantProps<typeof badgeStyles>;

interface Props extends HTMLAttributes<"span">, BadgeVariants {
  content?: string | JSX.Element;
  icon?: string | { name: string; class?: string };
  iconPosition?: "left" | "right";
  class?: string;
  removable?: boolean;
  variant?: "solid" | "soft" | "outline";
  color?: ColorName;
  shape?: "rounded" | "square" | "pill";
  size?: "sm" | "md" | "lg";
  maxWidth?: string;
  animated?: boolean;
}

// Component Logic
const {
  content,
  icon,
  iconPosition = "left",
  variant = "solid",
  color = "blue",
  removable = false,
  shape = "rounded",
  class: className = "",
  size = "md",
  maxWidth,
  animated = false,
} = Astro.props as Props;

// Styles
const badgeStyles = tv({
  base: "inline-flex items-center font-medium",
  variants: {
    variant: {
      solid: getDefaultClasses(color, { includeHover: false }),
      soft: getSoftClasses(color, { includeHover: false }),
      outline: `${getOutlinedClasses(color, { includeHover: false })} border`,
    },
    shape: {
      rounded: "rounded",
      square: "",
      pill: "rounded-full",
    },
    size: {
      sm: "px-2 py-1 text-xs",
      md: "px-2 py-1 text-sm",
      lg: "px-3 py-1 text-base",
    },
    animated: {
      true: "transition-all duration-300 ease-in-out hover:scale-105",
      false: "",
    },
  },
  defaultVariants: {
    variant: "solid",
    shape: "rounded",
    size: "md",
    animated: false,
  },
});

const finalIcon = typeof icon === "string" ? { name: icon, class: "" } : icon;
---

<span
  class={twMerge(
    badgeStyles({ variant, shape, size, animated }),
    maxWidth && `max-w-[${maxWidth}] truncate`,
    className,
  )}
>
  {
    finalIcon && iconPosition === "left" && (
      <Icon
        name={finalIcon.name}
        class={twMerge(
          `mr-1 ${size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4"}`,
          finalIcon.class,
        )}
        aria-hidden="true"
      />
    )
  }
  {content && <Fragment set:html={content} />}
  <slot />
  {
    finalIcon && iconPosition === "right" && (
      <Icon
        name={finalIcon.name}
        class={twMerge(
          `ml-1 ${size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4"}`,
          finalIcon.class,
        )}
        aria-hidden="true"
      />
    )
  }
  {
    removable && (
      <button
        type="button"
        class={twMerge(
          "ml-1 -mr-1 hover:bg-opacity-10 hover:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2",
          `focus:ring-${color}-500 rounded-${shape === "pill" ? "full" : "sm"}`,
        )}
        aria-label="Remove"
      >
        <Icon
          name="XMarkIcon"
          class={twMerge(
            size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4",
          )}
          aria-hidden="true"
        />
      </button>
    )
  }
</span>

---
// Imports
import { type HTMLAttributes } from "astro/types";
import { tv, type VariantProps } from "@utils/custom-tv";
import Icon from "./Icon.astro";
import {
  getOutlinedClasses,
  type ColorName,
  getDefaultClasses,
  getSoftClasses,
  colorPalette,
} from "@utils/colorUtils";
import { twMerge } from "tailwind-merge";

// PropTypes for documentation
export const propTypes = {
  content: {
    type: "string | JSX.Element",
    description: "The content of the badge",
  },
  icon: {
    type: "string | { name: string; class?: string }",
    description: "The icon to display in the badge",
  },
  iconPosition: {
    type: ["left", "right"],
    description: "The position of the icon",
    default: "left",
  },
  class: {
    type: "string",
    description: "Additional CSS classes to apply to the badge",
  },
  removable: {
    type: "boolean",
    description: "Whether the badge is removable",
    default: false,
  },
  variant: {
    type: ["solid", "soft", "outline"],
    description: "The variant of the badge",
    default: "solid",
  },
  color: {
    type: Object.keys(colorPalette),
    description: "The color scheme for the badge",
    default: "blue",
  },
  shape: {
    type: ["rounded", "square", "pill"],
    description: "The shape of the badge",
    default: "rounded",
  },
  size: {
    type: ["sm", "md", "lg"],
    description: "The size of the badge",
    default: "md",
  },
  maxWidth: {
    type: "string",
    description: "The maximum width of the badge",
  },
  animated: {
    type: "boolean",
    description: "Whether the badge should have animations",
    default: false,
  },
};

// Types and Interfaces
type BadgeVariants = VariantProps<typeof badgeStyles>;

interface Props extends HTMLAttributes<"span">, BadgeVariants {
  content?: string | JSX.Element;
  icon?: string | { name: string; class?: string };
  iconPosition?: "left" | "right";
  class?: string;
  removable?: boolean;
  variant?: "solid" | "soft" | "outline";
  color?: ColorName;
  shape?: "rounded" | "square" | "pill";
  size?: "sm" | "md" | "lg";
  maxWidth?: string;
  animated?: boolean;
}

// Component Logic
const {
  content,
  icon,
  iconPosition = "left",
  variant = "solid",
  color = "blue",
  removable = false,
  shape = "rounded",
  class: className = "",
  size = "md",
  maxWidth,
  animated = false,
} = Astro.props as Props;

// Styles
const badgeStyles = tv({
  base: "inline-flex items-center font-medium",
  variants: {
    variant: {
      solid: getDefaultClasses(color, { includeHover: false }),
      soft: getSoftClasses(color, { includeHover: false }),
      outline: `${getOutlinedClasses(color, { includeHover: false })} border`,
    },
    shape: {
      rounded: "rounded",
      square: "",
      pill: "rounded-full",
    },
    size: {
      sm: "px-2 py-1 text-xs",
      md: "px-2 py-1 text-sm",
      lg: "px-3 py-1 text-base",
    },
    animated: {
      true: "transition-all duration-300 ease-in-out hover:scale-105",
      false: "",
    },
  },
  defaultVariants: {
    variant: "solid",
    shape: "rounded",
    size: "md",
    animated: false,
  },
});

const finalIcon = typeof icon === "string" ? { name: icon, class: "" } : icon;
---

<span
  class={twMerge(
    badgeStyles({ variant, shape, size, animated }),
    maxWidth && `max-w-[${maxWidth}] truncate`,
    className,
  )}
>
  {
    finalIcon && iconPosition === "left" && (
      <Icon
        name={finalIcon.name}
        class={twMerge(
          `mr-1 ${size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4"}`,
          finalIcon.class,
        )}
        aria-hidden="true"
      />
    )
  }
  {content && <Fragment set:html={content} />}
  <slot />
  {
    finalIcon && iconPosition === "right" && (
      <Icon
        name={finalIcon.name}
        class={twMerge(
          `ml-1 ${size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4"}`,
          finalIcon.class,
        )}
        aria-hidden="true"
      />
    )
  }
  {
    removable && (
      <button
        type="button"
        class={twMerge(
          "ml-1 -mr-1 hover:bg-opacity-10 hover:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2",
          `focus:ring-${color}-500 rounded-${shape === "pill" ? "full" : "sm"}`,
        )}
        aria-label="Remove"
      >
        <Icon
          name="XMarkIcon"
          class={twMerge(
            size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4",
          )}
          aria-hidden="true"
        />
      </button>
    )
  }
</span>

---
// Imports
import { type HTMLAttributes } from "astro/types";
import { tv, type VariantProps } from "@utils/custom-tv";
import Icon from "./Icon.astro";
import {
  getOutlinedClasses,
  type ColorName,
  getDefaultClasses,
  getSoftClasses,
  colorPalette,
} from "@utils/colorUtils";
import { twMerge } from "tailwind-merge";

// PropTypes for documentation
export const propTypes = {
  content: {
    type: "string | JSX.Element",
    description: "The content of the badge",
  },
  icon: {
    type: "string | { name: string; class?: string }",
    description: "The icon to display in the badge",
  },
  iconPosition: {
    type: ["left", "right"],
    description: "The position of the icon",
    default: "left",
  },
  class: {
    type: "string",
    description: "Additional CSS classes to apply to the badge",
  },
  removable: {
    type: "boolean",
    description: "Whether the badge is removable",
    default: false,
  },
  variant: {
    type: ["solid", "soft", "outline"],
    description: "The variant of the badge",
    default: "solid",
  },
  color: {
    type: Object.keys(colorPalette),
    description: "The color scheme for the badge",
    default: "blue",
  },
  shape: {
    type: ["rounded", "square", "pill"],
    description: "The shape of the badge",
    default: "rounded",
  },
  size: {
    type: ["sm", "md", "lg"],
    description: "The size of the badge",
    default: "md",
  },
  maxWidth: {
    type: "string",
    description: "The maximum width of the badge",
  },
  animated: {
    type: "boolean",
    description: "Whether the badge should have animations",
    default: false,
  },
};

// Types and Interfaces
type BadgeVariants = VariantProps<typeof badgeStyles>;

interface Props extends HTMLAttributes<"span">, BadgeVariants {
  content?: string | JSX.Element;
  icon?: string | { name: string; class?: string };
  iconPosition?: "left" | "right";
  class?: string;
  removable?: boolean;
  variant?: "solid" | "soft" | "outline";
  color?: ColorName;
  shape?: "rounded" | "square" | "pill";
  size?: "sm" | "md" | "lg";
  maxWidth?: string;
  animated?: boolean;
}

// Component Logic
const {
  content,
  icon,
  iconPosition = "left",
  variant = "solid",
  color = "blue",
  removable = false,
  shape = "rounded",
  class: className = "",
  size = "md",
  maxWidth,
  animated = false,
} = Astro.props as Props;

// Styles
const badgeStyles = tv({
  base: "inline-flex items-center font-medium",
  variants: {
    variant: {
      solid: getDefaultClasses(color, { includeHover: false }),
      soft: getSoftClasses(color, { includeHover: false }),
      outline: `${getOutlinedClasses(color, { includeHover: false })} border`,
    },
    shape: {
      rounded: "rounded",
      square: "",
      pill: "rounded-full",
    },
    size: {
      sm: "px-2 py-1 text-xs",
      md: "px-2 py-1 text-sm",
      lg: "px-3 py-1 text-base",
    },
    animated: {
      true: "transition-all duration-300 ease-in-out hover:scale-105",
      false: "",
    },
  },
  defaultVariants: {
    variant: "solid",
    shape: "rounded",
    size: "md",
    animated: false,
  },
});

const finalIcon = typeof icon === "string" ? { name: icon, class: "" } : icon;
---

<span
  class={twMerge(
    badgeStyles({ variant, shape, size, animated }),
    maxWidth && `max-w-[${maxWidth}] truncate`,
    className,
  )}
>
  {
    finalIcon && iconPosition === "left" && (
      <Icon
        name={finalIcon.name}
        class={twMerge(
          `mr-1 ${size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4"}`,
          finalIcon.class,
        )}
        aria-hidden="true"
      />
    )
  }
  {content && <Fragment set:html={content} />}
  <slot />
  {
    finalIcon && iconPosition === "right" && (
      <Icon
        name={finalIcon.name}
        class={twMerge(
          `ml-1 ${size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4"}`,
          finalIcon.class,
        )}
        aria-hidden="true"
      />
    )
  }
  {
    removable && (
      <button
        type="button"
        class={twMerge(
          "ml-1 -mr-1 hover:bg-opacity-10 hover:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2",
          `focus:ring-${color}-500 rounded-${shape === "pill" ? "full" : "sm"}`,
        )}
        aria-label="Remove"
      >
        <Icon
          name="XMarkIcon"
          class={twMerge(
            size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4",
          )}
          aria-hidden="true"
        />
      </button>
    )
  }
</span>

---
// Imports
import { type HTMLAttributes } from "astro/types";
import { tv, type VariantProps } from "@utils/custom-tv";
import Icon from "./Icon.astro";
import {
  getOutlinedClasses,
  type ColorName,
  getDefaultClasses,
  getSoftClasses,
  colorPalette,
} from "@utils/colorUtils";
import { twMerge } from "tailwind-merge";

// PropTypes for documentation
export const propTypes = {
  content: {
    type: "string | JSX.Element",
    description: "The content of the badge",
  },
  icon: {
    type: "string | { name: string; class?: string }",
    description: "The icon to display in the badge",
  },
  iconPosition: {
    type: ["left", "right"],
    description: "The position of the icon",
    default: "left",
  },
  class: {
    type: "string",
    description: "Additional CSS classes to apply to the badge",
  },
  removable: {
    type: "boolean",
    description: "Whether the badge is removable",
    default: false,
  },
  variant: {
    type: ["solid", "soft", "outline"],
    description: "The variant of the badge",
    default: "solid",
  },
  color: {
    type: Object.keys(colorPalette),
    description: "The color scheme for the badge",
    default: "blue",
  },
  shape: {
    type: ["rounded", "square", "pill"],
    description: "The shape of the badge",
    default: "rounded",
  },
  size: {
    type: ["sm", "md", "lg"],
    description: "The size of the badge",
    default: "md",
  },
  maxWidth: {
    type: "string",
    description: "The maximum width of the badge",
  },
  animated: {
    type: "boolean",
    description: "Whether the badge should have animations",
    default: false,
  },
};

// Types and Interfaces
type BadgeVariants = VariantProps<typeof badgeStyles>;

interface Props extends HTMLAttributes<"span">, BadgeVariants {
  content?: string | JSX.Element;
  icon?: string | { name: string; class?: string };
  iconPosition?: "left" | "right";
  class?: string;
  removable?: boolean;
  variant?: "solid" | "soft" | "outline";
  color?: ColorName;
  shape?: "rounded" | "square" | "pill";
  size?: "sm" | "md" | "lg";
  maxWidth?: string;
  animated?: boolean;
}

// Component Logic
const {
  content,
  icon,
  iconPosition = "left",
  variant = "solid",
  color = "blue",
  removable = false,
  shape = "rounded",
  class: className = "",
  size = "md",
  maxWidth,
  animated = false,
} = Astro.props as Props;

// Styles
const badgeStyles = tv({
  base: "inline-flex items-center font-medium",
  variants: {
    variant: {
      solid: getDefaultClasses(color, { includeHover: false }),
      soft: getSoftClasses(color, { includeHover: false }),
      outline: `${getOutlinedClasses(color, { includeHover: false })} border`,
    },
    shape: {
      rounded: "rounded",
      square: "",
      pill: "rounded-full",
    },
    size: {
      sm: "px-2 py-1 text-xs",
      md: "px-2 py-1 text-sm",
      lg: "px-3 py-1 text-base",
    },
    animated: {
      true: "transition-all duration-300 ease-in-out hover:scale-105",
      false: "",
    },
  },
  defaultVariants: {
    variant: "solid",
    shape: "rounded",
    size: "md",
    animated: false,
  },
});

const finalIcon = typeof icon === "string" ? { name: icon, class: "" } : icon;
---

<span
  class={twMerge(
    badgeStyles({ variant, shape, size, animated }),
    maxWidth && `max-w-[${maxWidth}] truncate`,
    className,
  )}
>
  {
    finalIcon && iconPosition === "left" && (
      <Icon
        name={finalIcon.name}
        class={twMerge(
          `mr-1 ${size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4"}`,
          finalIcon.class,
        )}
        aria-hidden="true"
      />
    )
  }
  {content && <Fragment set:html={content} />}
  <slot />
  {
    finalIcon && iconPosition === "right" && (
      <Icon
        name={finalIcon.name}
        class={twMerge(
          `ml-1 ${size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4"}`,
          finalIcon.class,
        )}
        aria-hidden="true"
      />
    )
  }
  {
    removable && (
      <button
        type="button"
        class={twMerge(
          "ml-1 -mr-1 hover:bg-opacity-10 hover:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2",
          `focus:ring-${color}-500 rounded-${shape === "pill" ? "full" : "sm"}`,
        )}
        aria-label="Remove"
      >
        <Icon
          name="XMarkIcon"
          class={twMerge(
            size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4",
          )}
          aria-hidden="true"
        />
      </button>
    )
  }
</span>

---
// Imports
import { type HTMLAttributes } from "astro/types";
import { tv, type VariantProps } from "@utils/custom-tv";
import Icon from "./Icon.astro";
import {
  getOutlinedClasses,
  type ColorName,
  getDefaultClasses,
  getSoftClasses,
  colorPalette,
} from "@utils/colorUtils";
import { twMerge } from "tailwind-merge";

// PropTypes for documentation
export const propTypes = {
  content: {
    type: "string | JSX.Element",
    description: "The content of the badge",
  },
  icon: {
    type: "string | { name: string; class?: string }",
    description: "The icon to display in the badge",
  },
  iconPosition: {
    type: ["left", "right"],
    description: "The position of the icon",
    default: "left",
  },
  class: {
    type: "string",
    description: "Additional CSS classes to apply to the badge",
  },
  removable: {
    type: "boolean",
    description: "Whether the badge is removable",
    default: false,
  },
  variant: {
    type: ["solid", "soft", "outline"],
    description: "The variant of the badge",
    default: "solid",
  },
  color: {
    type: Object.keys(colorPalette),
    description: "The color scheme for the badge",
    default: "blue",
  },
  shape: {
    type: ["rounded", "square", "pill"],
    description: "The shape of the badge",
    default: "rounded",
  },
  size: {
    type: ["sm", "md", "lg"],
    description: "The size of the badge",
    default: "md",
  },
  maxWidth: {
    type: "string",
    description: "The maximum width of the badge",
  },
  animated: {
    type: "boolean",
    description: "Whether the badge should have animations",
    default: false,
  },
};

// Types and Interfaces
type BadgeVariants = VariantProps<typeof badgeStyles>;

interface Props extends HTMLAttributes<"span">, BadgeVariants {
  content?: string | JSX.Element;
  icon?: string | { name: string; class?: string };
  iconPosition?: "left" | "right";
  class?: string;
  removable?: boolean;
  variant?: "solid" | "soft" | "outline";
  color?: ColorName;
  shape?: "rounded" | "square" | "pill";
  size?: "sm" | "md" | "lg";
  maxWidth?: string;
  animated?: boolean;
}

// Component Logic
const {
  content,
  icon,
  iconPosition = "left",
  variant = "solid",
  color = "blue",
  removable = false,
  shape = "rounded",
  class: className = "",
  size = "md",
  maxWidth,
  animated = false,
} = Astro.props as Props;

// Styles
const badgeStyles = tv({
  base: "inline-flex items-center font-medium",
  variants: {
    variant: {
      solid: getDefaultClasses(color, { includeHover: false }),
      soft: getSoftClasses(color, { includeHover: false }),
      outline: `${getOutlinedClasses(color, { includeHover: false })} border`,
    },
    shape: {
      rounded: "rounded",
      square: "",
      pill: "rounded-full",
    },
    size: {
      sm: "px-2 py-1 text-xs",
      md: "px-2 py-1 text-sm",
      lg: "px-3 py-1 text-base",
    },
    animated: {
      true: "transition-all duration-300 ease-in-out hover:scale-105",
      false: "",
    },
  },
  defaultVariants: {
    variant: "solid",
    shape: "rounded",
    size: "md",
    animated: false,
  },
});

const finalIcon = typeof icon === "string" ? { name: icon, class: "" } : icon;
---

<span
  class={twMerge(
    badgeStyles({ variant, shape, size, animated }),
    maxWidth && `max-w-[${maxWidth}] truncate`,
    className,
  )}
>
  {
    finalIcon && iconPosition === "left" && (
      <Icon
        name={finalIcon.name}
        class={twMerge(
          `mr-1 ${size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4"}`,
          finalIcon.class,
        )}
        aria-hidden="true"
      />
    )
  }
  {content && <Fragment set:html={content} />}
  <slot />
  {
    finalIcon && iconPosition === "right" && (
      <Icon
        name={finalIcon.name}
        class={twMerge(
          `ml-1 ${size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4"}`,
          finalIcon.class,
        )}
        aria-hidden="true"
      />
    )
  }
  {
    removable && (
      <button
        type="button"
        class={twMerge(
          "ml-1 -mr-1 hover:bg-opacity-10 hover:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2",
          `focus:ring-${color}-500 rounded-${shape === "pill" ? "full" : "sm"}`,
        )}
        aria-label="Remove"
      >
        <Icon
          name="XMarkIcon"
          class={twMerge(
            size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4",
          )}
          aria-hidden="true"
        />
      </button>
    )
  }
</span>

---
// Imports
import { type HTMLAttributes } from "astro/types";
import { tv, type VariantProps } from "@utils/custom-tv";
import Icon from "./Icon.astro";
import {
  getOutlinedClasses,
  type ColorName,
  getDefaultClasses,
  getSoftClasses,
  colorPalette,
} from "@utils/colorUtils";
import { twMerge } from "tailwind-merge";

// PropTypes for documentation
export const propTypes = {
  content: {
    type: "string | JSX.Element",
    description: "The content of the badge",
  },
  icon: {
    type: "string | { name: string; class?: string }",
    description: "The icon to display in the badge",
  },
  iconPosition: {
    type: ["left", "right"],
    description: "The position of the icon",
    default: "left",
  },
  class: {
    type: "string",
    description: "Additional CSS classes to apply to the badge",
  },
  removable: {
    type: "boolean",
    description: "Whether the badge is removable",
    default: false,
  },
  variant: {
    type: ["solid", "soft", "outline"],
    description: "The variant of the badge",
    default: "solid",
  },
  color: {
    type: Object.keys(colorPalette),
    description: "The color scheme for the badge",
    default: "blue",
  },
  shape: {
    type: ["rounded", "square", "pill"],
    description: "The shape of the badge",
    default: "rounded",
  },
  size: {
    type: ["sm", "md", "lg"],
    description: "The size of the badge",
    default: "md",
  },
  maxWidth: {
    type: "string",
    description: "The maximum width of the badge",
  },
  animated: {
    type: "boolean",
    description: "Whether the badge should have animations",
    default: false,
  },
};

// Types and Interfaces
type BadgeVariants = VariantProps<typeof badgeStyles>;

interface Props extends HTMLAttributes<"span">, BadgeVariants {
  content?: string | JSX.Element;
  icon?: string | { name: string; class?: string };
  iconPosition?: "left" | "right";
  class?: string;
  removable?: boolean;
  variant?: "solid" | "soft" | "outline";
  color?: ColorName;
  shape?: "rounded" | "square" | "pill";
  size?: "sm" | "md" | "lg";
  maxWidth?: string;
  animated?: boolean;
}

// Component Logic
const {
  content,
  icon,
  iconPosition = "left",
  variant = "solid",
  color = "blue",
  removable = false,
  shape = "rounded",
  class: className = "",
  size = "md",
  maxWidth,
  animated = false,
} = Astro.props as Props;

// Styles
const badgeStyles = tv({
  base: "inline-flex items-center font-medium",
  variants: {
    variant: {
      solid: getDefaultClasses(color, { includeHover: false }),
      soft: getSoftClasses(color, { includeHover: false }),
      outline: `${getOutlinedClasses(color, { includeHover: false })} border`,
    },
    shape: {
      rounded: "rounded",
      square: "",
      pill: "rounded-full",
    },
    size: {
      sm: "px-2 py-1 text-xs",
      md: "px-2 py-1 text-sm",
      lg: "px-3 py-1 text-base",
    },
    animated: {
      true: "transition-all duration-300 ease-in-out hover:scale-105",
      false: "",
    },
  },
  defaultVariants: {
    variant: "solid",
    shape: "rounded",
    size: "md",
    animated: false,
  },
});

const finalIcon = typeof icon === "string" ? { name: icon, class: "" } : icon;
---

<span
  class={twMerge(
    badgeStyles({ variant, shape, size, animated }),
    maxWidth && `max-w-[${maxWidth}] truncate`,
    className,
  )}
>
  {
    finalIcon && iconPosition === "left" && (
      <Icon
        name={finalIcon.name}
        class={twMerge(
          `mr-1 ${size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4"}`,
          finalIcon.class,
        )}
        aria-hidden="true"
      />
    )
  }
  {content && <Fragment set:html={content} />}
  <slot />
  {
    finalIcon && iconPosition === "right" && (
      <Icon
        name={finalIcon.name}
        class={twMerge(
          `ml-1 ${size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4"}`,
          finalIcon.class,
        )}
        aria-hidden="true"
      />
    )
  }
  {
    removable && (
      <button
        type="button"
        class={twMerge(
          "ml-1 -mr-1 hover:bg-opacity-10 hover:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2",
          `focus:ring-${color}-500 rounded-${shape === "pill" ? "full" : "sm"}`,
        )}
        aria-label="Remove"
      >
        <Icon
          name="XMarkIcon"
          class={twMerge(
            size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4",
          )}
          aria-hidden="true"
        />
      </button>
    )
  }
</span>

---
// Imports
import { type HTMLAttributes } from "astro/types";
import { tv, type VariantProps } from "@utils/custom-tv";
import Icon from "./Icon.astro";
import {
  getOutlinedClasses,
  type ColorName,
  getDefaultClasses,
  getSoftClasses,
  colorPalette,
} from "@utils/colorUtils";
import { twMerge } from "tailwind-merge";

// PropTypes for documentation
export const propTypes = {
  content: {
    type: "string | JSX.Element",
    description: "The content of the badge",
  },
  icon: {
    type: "string | { name: string; class?: string }",
    description: "The icon to display in the badge",
  },
  iconPosition: {
    type: ["left", "right"],
    description: "The position of the icon",
    default: "left",
  },
  class: {
    type: "string",
    description: "Additional CSS classes to apply to the badge",
  },
  removable: {
    type: "boolean",
    description: "Whether the badge is removable",
    default: false,
  },
  variant: {
    type: ["solid", "soft", "outline"],
    description: "The variant of the badge",
    default: "solid",
  },
  color: {
    type: Object.keys(colorPalette),
    description: "The color scheme for the badge",
    default: "blue",
  },
  shape: {
    type: ["rounded", "square", "pill"],
    description: "The shape of the badge",
    default: "rounded",
  },
  size: {
    type: ["sm", "md", "lg"],
    description: "The size of the badge",
    default: "md",
  },
  maxWidth: {
    type: "string",
    description: "The maximum width of the badge",
  },
  animated: {
    type: "boolean",
    description: "Whether the badge should have animations",
    default: false,
  },
};

// Types and Interfaces
type BadgeVariants = VariantProps<typeof badgeStyles>;

interface Props extends HTMLAttributes<"span">, BadgeVariants {
  content?: string | JSX.Element;
  icon?: string | { name: string; class?: string };
  iconPosition?: "left" | "right";
  class?: string;
  removable?: boolean;
  variant?: "solid" | "soft" | "outline";
  color?: ColorName;
  shape?: "rounded" | "square" | "pill";
  size?: "sm" | "md" | "lg";
  maxWidth?: string;
  animated?: boolean;
}

// Component Logic
const {
  content,
  icon,
  iconPosition = "left",
  variant = "solid",
  color = "blue",
  removable = false,
  shape = "rounded",
  class: className = "",
  size = "md",
  maxWidth,
  animated = false,
} = Astro.props as Props;

// Styles
const badgeStyles = tv({
  base: "inline-flex items-center font-medium",
  variants: {
    variant: {
      solid: getDefaultClasses(color, { includeHover: false }),
      soft: getSoftClasses(color, { includeHover: false }),
      outline: `${getOutlinedClasses(color, { includeHover: false })} border`,
    },
    shape: {
      rounded: "rounded",
      square: "",
      pill: "rounded-full",
    },
    size: {
      sm: "px-2 py-1 text-xs",
      md: "px-2 py-1 text-sm",
      lg: "px-3 py-1 text-base",
    },
    animated: {
      true: "transition-all duration-300 ease-in-out hover:scale-105",
      false: "",
    },
  },
  defaultVariants: {
    variant: "solid",
    shape: "rounded",
    size: "md",
    animated: false,
  },
});

const finalIcon = typeof icon === "string" ? { name: icon, class: "" } : icon;
---

<span
  class={twMerge(
    badgeStyles({ variant, shape, size, animated }),
    maxWidth && `max-w-[${maxWidth}] truncate`,
    className,
  )}
>
  {
    finalIcon && iconPosition === "left" && (
      <Icon
        name={finalIcon.name}
        class={twMerge(
          `mr-1 ${size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4"}`,
          finalIcon.class,
        )}
        aria-hidden="true"
      />
    )
  }
  {content && <Fragment set:html={content} />}
  <slot />
  {
    finalIcon && iconPosition === "right" && (
      <Icon
        name={finalIcon.name}
        class={twMerge(
          `ml-1 ${size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4"}`,
          finalIcon.class,
        )}
        aria-hidden="true"
      />
    )
  }
  {
    removable && (
      <button
        type="button"
        class={twMerge(
          "ml-1 -mr-1 hover:bg-opacity-10 hover:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2",
          `focus:ring-${color}-500 rounded-${shape === "pill" ? "full" : "sm"}`,
        )}
        aria-label="Remove"
      >
        <Icon
          name="XMarkIcon"
          class={twMerge(
            size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4",
          )}
          aria-hidden="true"
        />
      </button>
    )
  }
</span>

---
// Imports
import { type HTMLAttributes } from "astro/types";
import { tv, type VariantProps } from "@utils/custom-tv";
import Icon from "./Icon.astro";
import {
  getOutlinedClasses,
  type ColorName,
  getDefaultClasses,
  getSoftClasses,
  colorPalette,
} from "@utils/colorUtils";
import { twMerge } from "tailwind-merge";

// PropTypes for documentation
export const propTypes = {
  content: {
    type: "string | JSX.Element",
    description: "The content of the badge",
  },
  icon: {
    type: "string | { name: string; class?: string }",
    description: "The icon to display in the badge",
  },
  iconPosition: {
    type: ["left", "right"],
    description: "The position of the icon",
    default: "left",
  },
  class: {
    type: "string",
    description: "Additional CSS classes to apply to the badge",
  },
  removable: {
    type: "boolean",
    description: "Whether the badge is removable",
    default: false,
  },
  variant: {
    type: ["solid", "soft", "outline"],
    description: "The variant of the badge",
    default: "solid",
  },
  color: {
    type: Object.keys(colorPalette),
    description: "The color scheme for the badge",
    default: "blue",
  },
  shape: {
    type: ["rounded", "square", "pill"],
    description: "The shape of the badge",
    default: "rounded",
  },
  size: {
    type: ["sm", "md", "lg"],
    description: "The size of the badge",
    default: "md",
  },
  maxWidth: {
    type: "string",
    description: "The maximum width of the badge",
  },
  animated: {
    type: "boolean",
    description: "Whether the badge should have animations",
    default: false,
  },
};

// Types and Interfaces
type BadgeVariants = VariantProps<typeof badgeStyles>;

interface Props extends HTMLAttributes<"span">, BadgeVariants {
  content?: string | JSX.Element;
  icon?: string | { name: string; class?: string };
  iconPosition?: "left" | "right";
  class?: string;
  removable?: boolean;
  variant?: "solid" | "soft" | "outline";
  color?: ColorName;
  shape?: "rounded" | "square" | "pill";
  size?: "sm" | "md" | "lg";
  maxWidth?: string;
  animated?: boolean;
}

// Component Logic
const {
  content,
  icon,
  iconPosition = "left",
  variant = "solid",
  color = "blue",
  removable = false,
  shape = "rounded",
  class: className = "",
  size = "md",
  maxWidth,
  animated = false,
} = Astro.props as Props;

// Styles
const badgeStyles = tv({
  base: "inline-flex items-center font-medium",
  variants: {
    variant: {
      solid: getDefaultClasses(color, { includeHover: false }),
      soft: getSoftClasses(color, { includeHover: false }),
      outline: `${getOutlinedClasses(color, { includeHover: false })} border`,
    },
    shape: {
      rounded: "rounded",
      square: "",
      pill: "rounded-full",
    },
    size: {
      sm: "px-2 py-1 text-xs",
      md: "px-2 py-1 text-sm",
      lg: "px-3 py-1 text-base",
    },
    animated: {
      true: "transition-all duration-300 ease-in-out hover:scale-105",
      false: "",
    },
  },
  defaultVariants: {
    variant: "solid",
    shape: "rounded",
    size: "md",
    animated: false,
  },
});

const finalIcon = typeof icon === "string" ? { name: icon, class: "" } : icon;
---

<span
  class={twMerge(
    badgeStyles({ variant, shape, size, animated }),
    maxWidth && `max-w-[${maxWidth}] truncate`,
    className,
  )}
>
  {
    finalIcon && iconPosition === "left" && (
      <Icon
        name={finalIcon.name}
        class={twMerge(
          `mr-1 ${size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4"}`,
          finalIcon.class,
        )}
        aria-hidden="true"
      />
    )
  }
  {content && <Fragment set:html={content} />}
  <slot />
  {
    finalIcon && iconPosition === "right" && (
      <Icon
        name={finalIcon.name}
        class={twMerge(
          `ml-1 ${size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4"}`,
          finalIcon.class,
        )}
        aria-hidden="true"
      />
    )
  }
  {
    removable && (
      <button
        type="button"
        class={twMerge(
          "ml-1 -mr-1 hover:bg-opacity-10 hover:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2",
          `focus:ring-${color}-500 rounded-${shape === "pill" ? "full" : "sm"}`,
        )}
        aria-label="Remove"
      >
        <Icon
          name="XMarkIcon"
          class={twMerge(
            size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4",
          )}
          aria-hidden="true"
        />
      </button>
    )
  }
</span>