Breadcrumb

/* eslint-disable react-refresh/only-export-components */
import * as React from "react";
import { Slot } from "radix-ui";
import { cva, type VariantProps } from "class-variance-authority";
import { ChevronRight } from "@/components/icons/chevron-right";
import { DotHorizontal } from "@/components/icons/dot-horizontal";
import { Slash01Forward } from "@/components/icons/slash-01-forward";

import { cn } from "@/lib/utils";

export type BreadcrumbProps = React.ComponentProps<"nav">;

function Breadcrumb({ className, ...props }: BreadcrumbProps) {
  return (
    <nav
      aria-label="breadcrumb"
      data-slot="breadcrumb"
      className={cn(className)}
      {...props}
    />
  );
}

export type BreadcrumbListProps = React.ComponentProps<"ol">;

function BreadcrumbList({ className, ...props }: BreadcrumbListProps) {
  return (
    <ol
      data-slot="breadcrumb-list"
      className={cn(
        "flex flex-wrap items-center gap-1.5 text-sm leading-[1.4] wrap-break-word text-text-strong",
        className,
      )}
      {...props}
    />
  );
}

export type BreadcrumbItemProps = React.ComponentProps<"li">;

function BreadcrumbItem({ className, ...props }: BreadcrumbItemProps) {
  return (
    <li
      data-slot="breadcrumb-item"
      className={cn("inline-flex items-center gap-0.5", className)}
      {...props}
    />
  );
}

export type BreadcrumbLinkProps = React.ComponentProps<"a"> & {
  asChild?: boolean;
};

function BreadcrumbLink({
  asChild,
  className,
  ...props
}: BreadcrumbLinkProps) {
  const Comp = asChild ? Slot.Root : "a";

  return (
    <Comp
      data-slot="breadcrumb-link"
      className={cn(
        // Hover darkens the crumb text only - the design draws no surface
        // behind the link (state cell: default note -> hover strong).
        "inline-flex items-center gap-0.5 text-text-strong transition-colors hover:text-neutral-950",
        className,
      )}
      {...props}
    />
  );
}

export type BreadcrumbPageProps = React.ComponentProps<"span">;

function BreadcrumbPage({ className, ...props }: BreadcrumbPageProps) {
  return (
    <span
      data-slot="breadcrumb-page"
      role="link"
      aria-disabled="true"
      aria-current="page"
      className={cn(
        "inline-flex items-center gap-0.5 font-normal text-text-note",
        className,
      )}
      {...props}
    />
  );
}

const breadcrumbIconVariants = cva(
  "flex size-5 shrink-0 items-center justify-center p-0.5 [&>svg]:size-4",
  {
    variants: {
      variant: {
        default: "rounded-md",
        fill: "rounded-full bg-bg-surface-1",
      },
    },
    defaultVariants: {
      variant: "fill",
    },
  },
);

export type BreadcrumbIconProps = React.ComponentProps<"span"> &
  VariantProps<typeof breadcrumbIconVariants>;

function BreadcrumbIcon({
  className,
  variant,
  ...props
}: BreadcrumbIconProps) {
  return (
    <span
      data-slot="breadcrumb-icon"
      aria-hidden="true"
      className={cn(breadcrumbIconVariants({ variant }), className)}
      {...props}
    />
  );
}

const breadcrumbSeparatorVariants = cva(
  "flex size-4 shrink-0 items-center justify-center text-icon-note",
  {
    variants: {
      variant: {
        slash: "[&>svg]:size-3",
        chevron: "[&>svg]:size-4",
        dot: "",
      },
    },
    defaultVariants: {
      variant: "chevron",
    },
  },
);

export type BreadcrumbSeparatorProps = React.ComponentProps<"li"> &
  VariantProps<typeof breadcrumbSeparatorVariants>;

function BreadcrumbSeparator({
  children,
  className,
  variant = "chevron",
  ...props
}: BreadcrumbSeparatorProps) {
  return (
    <li
      data-slot="breadcrumb-separator"
      role="presentation"
      aria-hidden="true"
      className={cn(breadcrumbSeparatorVariants({ variant }), className)}
      {...props}
    >
      {children ??
        (variant === "slash" ? (
          <Slash01Forward />
        ) : variant === "dot" ? (
          <span className="size-1 rounded-full bg-current" />
        ) : (
          <ChevronRight />
        ))}
    </li>
  );
}

export type BreadcrumbEllipsisProps = React.ComponentProps<"span">;

function BreadcrumbEllipsis({
  className,
  ...props
}: BreadcrumbEllipsisProps) {
  return (
    <span
      data-slot="breadcrumb-ellipsis"
      role="presentation"
      aria-hidden="true"
      className={cn(
        "flex size-5 items-center justify-center text-icon-note [&>svg]:size-4",
        className,
      )}
      {...props}
    >
      <DotHorizontal />
      <span className="sr-only">More</span>
    </span>
  );
}

export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbIcon,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
  breadcrumbIconVariants,
  breadcrumbSeparatorVariants,
};

/* eslint-disable react-refresh/only-export-components */
import * as React from "react";
import { mergeProps } from "@base-ui/react/merge-props";
import { useRender } from "@base-ui/react/use-render";
import { cva, type VariantProps } from "class-variance-authority";
import { ChevronRight } from "@/components/icons/chevron-right";
import { DotHorizontal } from "@/components/icons/dot-horizontal";
import { Slash01Forward } from "@/components/icons/slash-01-forward";

import { cn } from "@/lib/utils";

export type BreadcrumbProps = React.ComponentProps<"nav">;

function Breadcrumb({ className, ...props }: BreadcrumbProps) {
  return (
    <nav
      aria-label="breadcrumb"
      data-slot="breadcrumb"
      className={cn(className)}
      {...props}
    />
  );
}

export type BreadcrumbListProps = React.ComponentProps<"ol">;

function BreadcrumbList({ className, ...props }: BreadcrumbListProps) {
  return (
    <ol
      data-slot="breadcrumb-list"
      className={cn(
        "flex flex-wrap items-center gap-1.5 text-sm leading-[1.4] wrap-break-word text-text-strong",
        className,
      )}
      {...props}
    />
  );
}

export type BreadcrumbItemProps = React.ComponentProps<"li">;

function BreadcrumbItem({ className, ...props }: BreadcrumbItemProps) {
  return (
    <li
      data-slot="breadcrumb-item"
      className={cn("inline-flex items-center gap-0.5", className)}
      {...props}
    />
  );
}

export type BreadcrumbLinkProps = useRender.ComponentProps<"a">;

function BreadcrumbLink({
  className,
  render,
  ...props
}: BreadcrumbLinkProps) {
  return useRender({
    defaultTagName: "a",
    props: mergeProps<"a">(
      {
        className: cn(
          // Hover darkens the crumb text only - the design draws no surface
          // behind the link (state cell: default note -> hover strong).
          "inline-flex items-center gap-0.5 text-text-strong transition-colors hover:text-neutral-950",
          className,
        ),
      },
      props,
    ),
    render,
    state: {
      slot: "breadcrumb-link",
    },
  });
}

export type BreadcrumbPageProps = React.ComponentProps<"span">;

function BreadcrumbPage({ className, ...props }: BreadcrumbPageProps) {
  return (
    <span
      data-slot="breadcrumb-page"
      role="link"
      aria-disabled="true"
      aria-current="page"
      className={cn(
        "inline-flex items-center gap-0.5 font-normal text-text-note",
        className,
      )}
      {...props}
    />
  );
}

const breadcrumbIconVariants = cva(
  "flex size-5 shrink-0 items-center justify-center p-0.5 [&>svg]:size-4",
  {
    variants: {
      variant: {
        default: "rounded-md",
        fill: "rounded-full bg-bg-surface-1",
      },
    },
    defaultVariants: {
      variant: "fill",
    },
  },
);

export type BreadcrumbIconProps = React.ComponentProps<"span"> &
  VariantProps<typeof breadcrumbIconVariants>;

function BreadcrumbIcon({
  className,
  variant,
  ...props
}: BreadcrumbIconProps) {
  return (
    <span
      data-slot="breadcrumb-icon"
      aria-hidden="true"
      className={cn(breadcrumbIconVariants({ variant }), className)}
      {...props}
    />
  );
}

const breadcrumbSeparatorVariants = cva(
  "flex size-4 shrink-0 items-center justify-center text-icon-note",
  {
    variants: {
      variant: {
        slash: "[&>svg]:size-3",
        chevron: "[&>svg]:size-4",
        dot: "",
      },
    },
    defaultVariants: {
      variant: "chevron",
    },
  },
);

export type BreadcrumbSeparatorProps = React.ComponentProps<"li"> &
  VariantProps<typeof breadcrumbSeparatorVariants>;

function BreadcrumbSeparator({
  children,
  className,
  variant = "chevron",
  ...props
}: BreadcrumbSeparatorProps) {
  return (
    <li
      data-slot="breadcrumb-separator"
      role="presentation"
      aria-hidden="true"
      className={cn(breadcrumbSeparatorVariants({ variant }), className)}
      {...props}
    >
      {children ??
        (variant === "slash" ? (
          <Slash01Forward />
        ) : variant === "dot" ? (
          <span className="size-1 rounded-full bg-current" />
        ) : (
          <ChevronRight />
        ))}
    </li>
  );
}

export type BreadcrumbEllipsisProps = React.ComponentProps<"span">;

function BreadcrumbEllipsis({
  className,
  ...props
}: BreadcrumbEllipsisProps) {
  return (
    <span
      data-slot="breadcrumb-ellipsis"
      role="presentation"
      aria-hidden="true"
      className={cn(
        "flex size-5 items-center justify-center text-icon-note [&>svg]:size-4",
        className,
      )}
      {...props}
    >
      <DotHorizontal />
      <span className="sr-only">More</span>
    </span>
  );
}

export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbIcon,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
  breadcrumbIconVariants,
  breadcrumbSeparatorVariants,
};