Breadcrumb

// CoreUI Breadcrumb v0.0.0import * as React from 'react';import { Slot } from '@radix-ui/react-slot';import { cn } from '@/utils/cn';import { PolymorphicComponentProps } from '@/utils/polymorphic';const BREADCRUMB_ROOT_NAME = 'BreadcrumbRoot';const BREADCRUMB_ITEM_NAME = 'BreadcrumbItem';const BREADCRUMB_ICON_NAME = 'BreadcrumbIcon';const BREADCRUMB_ARROW_NAME = 'BreadcrumbArrow';type BreadcrumbRootProps = React.HTMLAttributes<HTMLDivElement> & {  asChild?: boolean;};function BreadcrumbRoot({  asChild,  children,  className,  ...rest}: BreadcrumbRootProps) {  const Component = asChild ? Slot : 'div';  return (    <Component className={cn('flex flex-wrap gap-1.5', className)} {...rest}>      {children}    </Component>  );}BreadcrumbRoot.displayName = BREADCRUMB_ROOT_NAME;type BreadcrumbItemProps = React.HTMLAttributes<HTMLDivElement> & {  asChild?: boolean;  active?: boolean;};const BreadcrumbItem = React.forwardRef<HTMLDivElement, BreadcrumbItemProps>(  ({ asChild, children, className, active, ...rest }, forwardedRef) => {    const Component = asChild ? Slot : 'div';    return (      <Component        ref={forwardedRef}        className={cn(          // base          'flex items-center gap-1.5 transition-colors duration-200 ease-out',          'text-label-sm text-text-sub-600',          {            // not active            'underline decoration-transparent': !active,            // hover            'hover:text-text-strong-950 hover:decoration-current': !active,            // active            'text-text-strong-950': active,          },          className,        )}        {...rest}      >        {children}      </Component>    );  },);BreadcrumbItem.displayName = BREADCRUMB_ITEM_NAME;function BreadcrumbItemIcon<T extends React.ElementType>({  className,  as,  ...rest}: PolymorphicComponentProps<T>) {  const Component = as || 'div';  return <Component className={cn('size-5', className)} {...rest} />;}BreadcrumbItemIcon.displayName = BREADCRUMB_ICON_NAME;function BreadcrumbItemArrowIcon<T extends React.ElementType>({  className,  as,  ...rest}: PolymorphicComponentProps<T>) {  const Component = as || 'div';  return (    <Component      className={cn(        'flex size-5 select-none items-center justify-center text-text-disabled-300',        className,      )}      {...rest}    />  );}BreadcrumbItemArrowIcon.displayName = BREADCRUMB_ARROW_NAME;export {  BreadcrumbRoot as Root,  BreadcrumbItem as Item,  BreadcrumbItemIcon as Icon,  BreadcrumbItemArrowIcon as ArrowIcon,};