Breadcrumbs

---
// src/components/elements/Breadcrumb.astro

// Imports
import { type HTMLAttributes } from "astro/types";
import { tv, type VariantProps } from "@utils/custom-tv";
import Icon from "./Icon.astro";
import Badge from "./Badge.astro";
import {
  getDefaultClasses,
  getSoftClasses,
  type ColorName,
  colorPalette,
  getHardTextClass,
  getDefaultTextClass,
  getSoftTextClass,
  getOutlinedTextClass,
} from "@utils/colorUtils";
import { twMerge } from "tailwind-merge";
import { escapeHTML } from "astro/runtime/server/escape.js";

// PropTypes for documentation
export const propTypes = {
  items: {
    type: "Array<{ label: string; href?: string; icon?: string; status?: string }>",
    description: "Array of breadcrumb items",
  },
  divider: {
    type: ["slash", "chevron", "bullet", "arrow", "custom"],
    description: "Type of divider between breadcrumb items",
    default: "slash",
  },
  customDivider: {
    type: "string",
    description: "Custom divider content (used when divider is 'custom')",
  },
  showIcons: {
    type: "boolean",
    description: "Whether to show icons for breadcrumb items",
    default: false,
  },
  iconOnly: {
    type: "boolean",
    description: "Whether to show only icons (no text)",
    default: false,
  },
  background: {
    type: "boolean",
    description: "Whether to show a background",
    default: false,
  },
  backgroundShape: {
    type: ["rounded", "square", "pill"],
    description: "Shape of the background",
    default: "rounded",
  },
  color: {
    type: Object.keys(colorPalette),
    description: "Color scheme for the breadcrumb",
    default: "gray",
  },
  activeColor: {
    type: Object.keys(colorPalette),
    description: "Color for the active breadcrumb item",
    default: "blue",
  },
  truncate: {
    type: "boolean",
    description: "Whether to truncate middle items",
    default: false,
  },
  maxItems: {
    type: "number",
    description: "Maximum number of items to display when truncating",
    default: 3,
  },
  badgeStyle: {
    type: "boolean",
    description: "Whether to use badge style for items",
    default: false,
  },
  class: {
    type: "string",
    description: "Additional CSS classes to apply to the breadcrumb",
  },
  spacing: {
    type: ["none", "small", "medium", "large"],
    description: "Spacing between breadcrumb items",
    default: "medium",
  },
  size: {
    type: ["sm", "md", "lg"],
    description: "Size of the breadcrumb items",
    default: "md",
  },
  width: {
    type: ["full", "fit"],
    description: "Width of the breadcrumb",
    default: "fit",
  },
  backgroundColor: {
    type: Object.keys(colorPalette),
    description: "Background color for the breadcrumb",
  },
};

// Types and Interfaces
type BreadcrumbVariants = VariantProps<typeof breadcrumbStyles>;

interface BreadcrumbItem {
  label: string;
  href?: string;
  icon?: string;
  status?: string;
}

interface Props extends HTMLAttributes<"nav">, BreadcrumbVariants {
  items: BreadcrumbItem[];
  divider?: "slash" | "chevron" | "bullet" | "arrow" | "custom";
  customDivider?: string;
  showIcons?: boolean;
  iconOnly?: boolean;
  background?: boolean;
  backgroundShape?: "rounded" | "square" | "pill";
  color?: ColorName;
  activeColor?: ColorName;
  truncate?: boolean;
  maxItems?: number;
  badgeStyle?: boolean;
  class?: string;
  spacing?: "none" | "small" | "medium" | "large";
  size?: "sm" | "md" | "lg";
  width?: "full" | "fit";
  backgroundColor?: ColorName;
}

// Component Logic
const {
  items,
  divider = "slash",
  customDivider,
  showIcons = false,
  iconOnly = false,
  background = false,
  backgroundShape = "rounded",
  color = "gray",
  activeColor = "blue",
  truncate = false,
  maxItems = 3,
  badgeStyle = false,
  class: className = "",
  spacing = "medium",
  size = "md",
  width = "fit",
  backgroundColor = "slate",
} = Astro.props as Props;

// Styles
const breadcrumbStyles = tv({
  base: "flex items-center",
  variants: {
    background: {
      true: `${getSoftClasses(backgroundColor, { includeHover: false })} py-2 px-4`,
      false: "",
    },
    backgroundShape: {
      rounded: "rounded-md",
      square: "",
      pill: "rounded-full",
    },
    width: {
      full: "w-full",
      fit: "w-fit",
    },
  },

  defaultVariants: {
    background: false,
    backgroundShape: "rounded",
    width: "fit",
  },
});

const listStyles = tv({
  base: "flex flex-wrap items-center",
  variants: {
    spacing: {
      none: "gap-0",
      small: "gap-1",
      medium: "gap-2",
      large: "gap-3",
    },
  },
  defaultVariants: {
    spacing: "medium",
  },
});

const itemStyles = tv({
  base: `flex items-center font-medium `,
  variants: {
    active: {
      true: "font-semibold",
      false: "hover:underline",
    },
    badgeStyle: {
      true: "px-2 py-1 rounded-full",
      false: "",
    },
    size: {
      sm: "text-xs",
      md: "text-sm",
      lg: "text-base",
    },
  },
  compoundVariants: [
    {
      active: false,
      badgeStyle: false,
      class: `${getOutlinedTextClass(color, { includeHover: true })}`,
    },
    {
      active: true,
      badgeStyle: false,
      class: `${getOutlinedTextClass(activeColor, { includeHover: false })}`,
    },
    {
      active: true,
      badgeStyle: true,
      class: getSoftClasses(activeColor, { includeHover: true }),
    },
    {
      active: false,
      badgeStyle: true,
      class: getSoftClasses(color, { includeHover: true }),
    },
  ],
});

const getDividerContent = (dividerType: Props["divider"]) => {
  switch (dividerType) {
    case "slash":
      return "/";
    case "chevron":
      return `>`;
    case "bullet":
      return "•";
    case "arrow":
      return `→`;
    case "custom":
      return customDivider ? escapeHTML(customDivider) : "/";
    default:
      return "/";
  }
};

const visibleItems = truncate
  ? [
      items[0],
      ...items.slice(1, -1).slice(0, maxItems - 2),
      ...(items.length > maxItems ? [{ label: "..." }] : []),
      items[items.length - 1],
    ]
  : items;
---

<nav
  aria-label="Breadcrumb"
  class={twMerge(
    breadcrumbStyles({
      background,
      backgroundShape,
      width,
      backgroundColor: backgroundColor as ColorName,
    }),
    className,
  )}
>
  <ol class={listStyles({ spacing })}>
    {
      visibleItems.map((item, index) => (
        <>
          <li class="flex items-center">
            {item.href && !iconOnly ? (
              <a
                href={item.href}
                class={`flex items-center ${itemStyles({
                  active: index === items.length - 1,
                  badgeStyle,
                  size,
                })}`}
                aria-current={index === items.length - 1 ? "page" : undefined}
              >
                {showIcons && item.icon && (
                  <Icon
                    name={item.icon}
                    class={`inline-block ${iconOnly ? "w-5 h-5" : "w-3.5 h-3.5 mr-1"}`}
                  />
                )}
                {!iconOnly && <span>{item.label}</span>}
                {item.status && (
                  <Badge
                    content={item.status}
                    variant="soft"
                    color={index === items.length - 1 ? activeColor : color}
                    size="sm"
                    class="ml-2"
                  />
                )}
              </a>
            ) : (
              <span
                class={`flex items-center ${itemStyles({
                  active: index === items.length - 1,
                  badgeStyle,
                  size,
                })}`}
                aria-current={index === items.length - 1 ? "page" : undefined}
              >
                {showIcons && item.icon && (
                  <Icon
                    name={item.icon}
                    class={`inline-block ${iconOnly ? "w-5 h-5" : "w-3.5 h-3.5 mr-1"}`}
                  />
                )}
                {!iconOnly && <span>{item.label}</span>}
                {item.status && (
                  <Badge
                    content={item.status}
                    variant="soft"
                    color={index === items.length - 1 ? activeColor : color}
                    size="sm"
                    class="ml-2"
                  />
                )}
              </span>
            )}
          </li>
          {index < visibleItems.length - 1 && (
            <li class="text-gray-400" set:html={getDividerContent(divider)} />
          )}
        </>
      ))
    }
  </ol>
</nav>

---
// src/components/elements/Breadcrumb.astro

// Imports
import { type HTMLAttributes } from "astro/types";
import { tv, type VariantProps } from "@utils/custom-tv";
import Icon from "./Icon.astro";
import Badge from "./Badge.astro";
import {
  getDefaultClasses,
  getSoftClasses,
  type ColorName,
  colorPalette,
  getHardTextClass,
  getDefaultTextClass,
  getSoftTextClass,
  getOutlinedTextClass,
} from "@utils/colorUtils";
import { twMerge } from "tailwind-merge";
import { escapeHTML } from "astro/runtime/server/escape.js";

// PropTypes for documentation
export const propTypes = {
  items: {
    type: "Array<{ label: string; href?: string; icon?: string; status?: string }>",
    description: "Array of breadcrumb items",
  },
  divider: {
    type: ["slash", "chevron", "bullet", "arrow", "custom"],
    description: "Type of divider between breadcrumb items",
    default: "slash",
  },
  customDivider: {
    type: "string",
    description: "Custom divider content (used when divider is 'custom')",
  },
  showIcons: {
    type: "boolean",
    description: "Whether to show icons for breadcrumb items",
    default: false,
  },
  iconOnly: {
    type: "boolean",
    description: "Whether to show only icons (no text)",
    default: false,
  },
  background: {
    type: "boolean",
    description: "Whether to show a background",
    default: false,
  },
  backgroundShape: {
    type: ["rounded", "square", "pill"],
    description: "Shape of the background",
    default: "rounded",
  },
  color: {
    type: Object.keys(colorPalette),
    description: "Color scheme for the breadcrumb",
    default: "gray",
  },
  activeColor: {
    type: Object.keys(colorPalette),
    description: "Color for the active breadcrumb item",
    default: "blue",
  },
  truncate: {
    type: "boolean",
    description: "Whether to truncate middle items",
    default: false,
  },
  maxItems: {
    type: "number",
    description: "Maximum number of items to display when truncating",
    default: 3,
  },
  badgeStyle: {
    type: "boolean",
    description: "Whether to use badge style for items",
    default: false,
  },
  class: {
    type: "string",
    description: "Additional CSS classes to apply to the breadcrumb",
  },
  spacing: {
    type: ["none", "small", "medium", "large"],
    description: "Spacing between breadcrumb items",
    default: "medium",
  },
  size: {
    type: ["sm", "md", "lg"],
    description: "Size of the breadcrumb items",
    default: "md",
  },
  width: {
    type: ["full", "fit"],
    description: "Width of the breadcrumb",
    default: "fit",
  },
  backgroundColor: {
    type: Object.keys(colorPalette),
    description: "Background color for the breadcrumb",
  },
};

// Types and Interfaces
type BreadcrumbVariants = VariantProps<typeof breadcrumbStyles>;

interface BreadcrumbItem {
  label: string;
  href?: string;
  icon?: string;
  status?: string;
}

interface Props extends HTMLAttributes<"nav">, BreadcrumbVariants {
  items: BreadcrumbItem[];
  divider?: "slash" | "chevron" | "bullet" | "arrow" | "custom";
  customDivider?: string;
  showIcons?: boolean;
  iconOnly?: boolean;
  background?: boolean;
  backgroundShape?: "rounded" | "square" | "pill";
  color?: ColorName;
  activeColor?: ColorName;
  truncate?: boolean;
  maxItems?: number;
  badgeStyle?: boolean;
  class?: string;
  spacing?: "none" | "small" | "medium" | "large";
  size?: "sm" | "md" | "lg";
  width?: "full" | "fit";
  backgroundColor?: ColorName;
}

// Component Logic
const {
  items,
  divider = "slash",
  customDivider,
  showIcons = false,
  iconOnly = false,
  background = false,
  backgroundShape = "rounded",
  color = "gray",
  activeColor = "blue",
  truncate = false,
  maxItems = 3,
  badgeStyle = false,
  class: className = "",
  spacing = "medium",
  size = "md",
  width = "fit",
  backgroundColor = "slate",
} = Astro.props as Props;

// Styles
const breadcrumbStyles = tv({
  base: "flex items-center",
  variants: {
    background: {
      true: `${getSoftClasses(backgroundColor, { includeHover: false })} py-2 px-4`,
      false: "",
    },
    backgroundShape: {
      rounded: "rounded-md",
      square: "",
      pill: "rounded-full",
    },
    width: {
      full: "w-full",
      fit: "w-fit",
    },
  },

  defaultVariants: {
    background: false,
    backgroundShape: "rounded",
    width: "fit",
  },
});

const listStyles = tv({
  base: "flex flex-wrap items-center",
  variants: {
    spacing: {
      none: "gap-0",
      small: "gap-1",
      medium: "gap-2",
      large: "gap-3",
    },
  },
  defaultVariants: {
    spacing: "medium",
  },
});

const itemStyles = tv({
  base: `flex items-center font-medium `,
  variants: {
    active: {
      true: "font-semibold",
      false: "hover:underline",
    },
    badgeStyle: {
      true: "px-2 py-1 rounded-full",
      false: "",
    },
    size: {
      sm: "text-xs",
      md: "text-sm",
      lg: "text-base",
    },
  },
  compoundVariants: [
    {
      active: false,
      badgeStyle: false,
      class: `${getOutlinedTextClass(color, { includeHover: true })}`,
    },
    {
      active: true,
      badgeStyle: false,
      class: `${getOutlinedTextClass(activeColor, { includeHover: false })}`,
    },
    {
      active: true,
      badgeStyle: true,
      class: getSoftClasses(activeColor, { includeHover: true }),
    },
    {
      active: false,
      badgeStyle: true,
      class: getSoftClasses(color, { includeHover: true }),
    },
  ],
});

const getDividerContent = (dividerType: Props["divider"]) => {
  switch (dividerType) {
    case "slash":
      return "/";
    case "chevron":
      return `>`;
    case "bullet":
      return "•";
    case "arrow":
      return `→`;
    case "custom":
      return customDivider ? escapeHTML(customDivider) : "/";
    default:
      return "/";
  }
};

const visibleItems = truncate
  ? [
      items[0],
      ...items.slice(1, -1).slice(0, maxItems - 2),
      ...(items.length > maxItems ? [{ label: "..." }] : []),
      items[items.length - 1],
    ]
  : items;
---

<nav
  aria-label="Breadcrumb"
  class={twMerge(
    breadcrumbStyles({
      background,
      backgroundShape,
      width,
      backgroundColor: backgroundColor as ColorName,
    }),
    className,
  )}
>
  <ol class={listStyles({ spacing })}>
    {
      visibleItems.map((item, index) => (
        <>
          <li class="flex items-center">
            {item.href && !iconOnly ? (
              <a
                href={item.href}
                class={`flex items-center ${itemStyles({
                  active: index === items.length - 1,
                  badgeStyle,
                  size,
                })}`}
                aria-current={index === items.length - 1 ? "page" : undefined}
              >
                {showIcons && item.icon && (
                  <Icon
                    name={item.icon}
                    class={`inline-block ${iconOnly ? "w-5 h-5" : "w-3.5 h-3.5 mr-1"}`}
                  />
                )}
                {!iconOnly && <span>{item.label}</span>}
                {item.status && (
                  <Badge
                    content={item.status}
                    variant="soft"
                    color={index === items.length - 1 ? activeColor : color}
                    size="sm"
                    class="ml-2"
                  />
                )}
              </a>
            ) : (
              <span
                class={`flex items-center ${itemStyles({
                  active: index === items.length - 1,
                  badgeStyle,
                  size,
                })}`}
                aria-current={index === items.length - 1 ? "page" : undefined}
              >
                {showIcons && item.icon && (
                  <Icon
                    name={item.icon}
                    class={`inline-block ${iconOnly ? "w-5 h-5" : "w-3.5 h-3.5 mr-1"}`}
                  />
                )}
                {!iconOnly && <span>{item.label}</span>}
                {item.status && (
                  <Badge
                    content={item.status}
                    variant="soft"
                    color={index === items.length - 1 ? activeColor : color}
                    size="sm"
                    class="ml-2"
                  />
                )}
              </span>
            )}
          </li>
          {index < visibleItems.length - 1 && (
            <li class="text-gray-400" set:html={getDividerContent(divider)} />
          )}
        </>
      ))
    }
  </ol>
</nav>

---
// src/components/elements/Breadcrumb.astro

// Imports
import { type HTMLAttributes } from "astro/types";
import { tv, type VariantProps } from "@utils/custom-tv";
import Icon from "./Icon.astro";
import Badge from "./Badge.astro";
import {
  getDefaultClasses,
  getSoftClasses,
  type ColorName,
  colorPalette,
  getHardTextClass,
  getDefaultTextClass,
  getSoftTextClass,
  getOutlinedTextClass,
} from "@utils/colorUtils";
import { twMerge } from "tailwind-merge";
import { escapeHTML } from "astro/runtime/server/escape.js";

// PropTypes for documentation
export const propTypes = {
  items: {
    type: "Array<{ label: string; href?: string; icon?: string; status?: string }>",
    description: "Array of breadcrumb items",
  },
  divider: {
    type: ["slash", "chevron", "bullet", "arrow", "custom"],
    description: "Type of divider between breadcrumb items",
    default: "slash",
  },
  customDivider: {
    type: "string",
    description: "Custom divider content (used when divider is 'custom')",
  },
  showIcons: {
    type: "boolean",
    description: "Whether to show icons for breadcrumb items",
    default: false,
  },
  iconOnly: {
    type: "boolean",
    description: "Whether to show only icons (no text)",
    default: false,
  },
  background: {
    type: "boolean",
    description: "Whether to show a background",
    default: false,
  },
  backgroundShape: {
    type: ["rounded", "square", "pill"],
    description: "Shape of the background",
    default: "rounded",
  },
  color: {
    type: Object.keys(colorPalette),
    description: "Color scheme for the breadcrumb",
    default: "gray",
  },
  activeColor: {
    type: Object.keys(colorPalette),
    description: "Color for the active breadcrumb item",
    default: "blue",
  },
  truncate: {
    type: "boolean",
    description: "Whether to truncate middle items",
    default: false,
  },
  maxItems: {
    type: "number",
    description: "Maximum number of items to display when truncating",
    default: 3,
  },
  badgeStyle: {
    type: "boolean",
    description: "Whether to use badge style for items",
    default: false,
  },
  class: {
    type: "string",
    description: "Additional CSS classes to apply to the breadcrumb",
  },
  spacing: {
    type: ["none", "small", "medium", "large"],
    description: "Spacing between breadcrumb items",
    default: "medium",
  },
  size: {
    type: ["sm", "md", "lg"],
    description: "Size of the breadcrumb items",
    default: "md",
  },
  width: {
    type: ["full", "fit"],
    description: "Width of the breadcrumb",
    default: "fit",
  },
  backgroundColor: {
    type: Object.keys(colorPalette),
    description: "Background color for the breadcrumb",
  },
};

// Types and Interfaces
type BreadcrumbVariants = VariantProps<typeof breadcrumbStyles>;

interface BreadcrumbItem {
  label: string;
  href?: string;
  icon?: string;
  status?: string;
}

interface Props extends HTMLAttributes<"nav">, BreadcrumbVariants {
  items: BreadcrumbItem[];
  divider?: "slash" | "chevron" | "bullet" | "arrow" | "custom";
  customDivider?: string;
  showIcons?: boolean;
  iconOnly?: boolean;
  background?: boolean;
  backgroundShape?: "rounded" | "square" | "pill";
  color?: ColorName;
  activeColor?: ColorName;
  truncate?: boolean;
  maxItems?: number;
  badgeStyle?: boolean;
  class?: string;
  spacing?: "none" | "small" | "medium" | "large";
  size?: "sm" | "md" | "lg";
  width?: "full" | "fit";
  backgroundColor?: ColorName;
}

// Component Logic
const {
  items,
  divider = "slash",
  customDivider,
  showIcons = false,
  iconOnly = false,
  background = false,
  backgroundShape = "rounded",
  color = "gray",
  activeColor = "blue",
  truncate = false,
  maxItems = 3,
  badgeStyle = false,
  class: className = "",
  spacing = "medium",
  size = "md",
  width = "fit",
  backgroundColor = "slate",
} = Astro.props as Props;

// Styles
const breadcrumbStyles = tv({
  base: "flex items-center",
  variants: {
    background: {
      true: `${getSoftClasses(backgroundColor, { includeHover: false })} py-2 px-4`,
      false: "",
    },
    backgroundShape: {
      rounded: "rounded-md",
      square: "",
      pill: "rounded-full",
    },
    width: {
      full: "w-full",
      fit: "w-fit",
    },
  },

  defaultVariants: {
    background: false,
    backgroundShape: "rounded",
    width: "fit",
  },
});

const listStyles = tv({
  base: "flex flex-wrap items-center",
  variants: {
    spacing: {
      none: "gap-0",
      small: "gap-1",
      medium: "gap-2",
      large: "gap-3",
    },
  },
  defaultVariants: {
    spacing: "medium",
  },
});

const itemStyles = tv({
  base: `flex items-center font-medium `,
  variants: {
    active: {
      true: "font-semibold",
      false: "hover:underline",
    },
    badgeStyle: {
      true: "px-2 py-1 rounded-full",
      false: "",
    },
    size: {
      sm: "text-xs",
      md: "text-sm",
      lg: "text-base",
    },
  },
  compoundVariants: [
    {
      active: false,
      badgeStyle: false,
      class: `${getOutlinedTextClass(color, { includeHover: true })}`,
    },
    {
      active: true,
      badgeStyle: false,
      class: `${getOutlinedTextClass(activeColor, { includeHover: false })}`,
    },
    {
      active: true,
      badgeStyle: true,
      class: getSoftClasses(activeColor, { includeHover: true }),
    },
    {
      active: false,
      badgeStyle: true,
      class: getSoftClasses(color, { includeHover: true }),
    },
  ],
});

const getDividerContent = (dividerType: Props["divider"]) => {
  switch (dividerType) {
    case "slash":
      return "/";
    case "chevron":
      return `>`;
    case "bullet":
      return "•";
    case "arrow":
      return `→`;
    case "custom":
      return customDivider ? escapeHTML(customDivider) : "/";
    default:
      return "/";
  }
};

const visibleItems = truncate
  ? [
      items[0],
      ...items.slice(1, -1).slice(0, maxItems - 2),
      ...(items.length > maxItems ? [{ label: "..." }] : []),
      items[items.length - 1],
    ]
  : items;
---

<nav
  aria-label="Breadcrumb"
  class={twMerge(
    breadcrumbStyles({
      background,
      backgroundShape,
      width,
      backgroundColor: backgroundColor as ColorName,
    }),
    className,
  )}
>
  <ol class={listStyles({ spacing })}>
    {
      visibleItems.map((item, index) => (
        <>
          <li class="flex items-center">
            {item.href && !iconOnly ? (
              <a
                href={item.href}
                class={`flex items-center ${itemStyles({
                  active: index === items.length - 1,
                  badgeStyle,
                  size,
                })}`}
                aria-current={index === items.length - 1 ? "page" : undefined}
              >
                {showIcons && item.icon && (
                  <Icon
                    name={item.icon}
                    class={`inline-block ${iconOnly ? "w-5 h-5" : "w-3.5 h-3.5 mr-1"}`}
                  />
                )}
                {!iconOnly && <span>{item.label}</span>}
                {item.status && (
                  <Badge
                    content={item.status}
                    variant="soft"
                    color={index === items.length - 1 ? activeColor : color}
                    size="sm"
                    class="ml-2"
                  />
                )}
              </a>
            ) : (
              <span
                class={`flex items-center ${itemStyles({
                  active: index === items.length - 1,
                  badgeStyle,
                  size,
                })}`}
                aria-current={index === items.length - 1 ? "page" : undefined}
              >
                {showIcons && item.icon && (
                  <Icon
                    name={item.icon}
                    class={`inline-block ${iconOnly ? "w-5 h-5" : "w-3.5 h-3.5 mr-1"}`}
                  />
                )}
                {!iconOnly && <span>{item.label}</span>}
                {item.status && (
                  <Badge
                    content={item.status}
                    variant="soft"
                    color={index === items.length - 1 ? activeColor : color}
                    size="sm"
                    class="ml-2"
                  />
                )}
              </span>
            )}
          </li>
          {index < visibleItems.length - 1 && (
            <li class="text-gray-400" set:html={getDividerContent(divider)} />
          )}
        </>
      ))
    }
  </ol>
</nav>