{"version":3,"file":"breadcrumb-item.cjs","sources":["../../../components/breadcrumb/breadcrumb-item.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps, useRender } from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport React, { ComponentProps, ReactNode } from 'react';\nimport { ChevronDownIcon } from '~/icons';\nimport { Menu } from '../menu';\nimport styles from './breadcrumb.module.css';\n\n/**\n * Each entry maps to `<Menu.Item>`. Use `children`, `render`, `onClick`,\n * `disabled`, etc. - whatever `Menu.Item` supports.\n */\nexport type BreadcrumbDropdownItem = ComponentProps<typeof Menu.Item> & {\n  /** Optional stable key for React list reconciliation (not passed to `Menu.Item`). */\n  key?: string;\n};\n\nexport interface BreadcrumbItemProps extends useRender.ComponentProps<'a'> {\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  current?: boolean;\n  /** When true, the item is non-clickable and visually muted (e.g. loading or no access). */\n  disabled?: boolean;\n  dropdownItems?: BreadcrumbDropdownItem[];\n}\n\nexport const BreadcrumbItem = ({\n  ref,\n  render,\n  children,\n  className,\n  leadingIcon,\n  trailingIcon,\n  current,\n  disabled,\n  href,\n  dropdownItems,\n  ...props\n}: BreadcrumbItemProps) => {\n  const label =\n    leadingIcon || trailingIcon ? (\n      <>\n        {leadingIcon && (\n          <span\n            className={styles['breadcrumb-icon']}\n            data-slot='breadcrumb-leading-icon'\n          >\n            {leadingIcon}\n          </span>\n        )}\n        {children != null && (\n          <span data-slot='breadcrumb-item-text'>{children}</span>\n        )}\n        {trailingIcon && (\n          <span\n            className={styles['breadcrumb-icon']}\n            data-slot='breadcrumb-trailing-icon'\n          >\n            {trailingIcon}\n          </span>\n        )}\n      </>\n    ) : (\n      children\n    );\n\n  const {\n    id,\n    title,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    'aria-describedby': ariaDescribedby\n  } = props;\n\n  const linkElement = useRender({\n    defaultTagName: 'a',\n    ref,\n    render,\n    props: mergeProps<'a'>(\n      {\n        className: cx(styles['breadcrumb-link']),\n        href,\n        children: label,\n        'data-slot': 'breadcrumb-link'\n      } as useRender.ComponentProps<'a'>,\n      props\n    )\n  });\n\n  if (dropdownItems && !disabled) {\n    return (\n      <li\n        className={cx(styles['breadcrumb-item'], className)}\n        data-slot='breadcrumb-item'\n      >\n        <Menu>\n          <Menu.Trigger\n            ref={ref as React.Ref<HTMLButtonElement>}\n            className={styles['breadcrumb-dropdown-trigger']}\n            data-slot='breadcrumb-dropdown-trigger'\n            id={id}\n            title={title}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledby}\n            aria-describedby={ariaDescribedby}\n          >\n            {label}\n            <ChevronDownIcon\n              className={styles['breadcrumb-dropdown-icon']}\n              data-slot='breadcrumb-dropdown-icon'\n            />\n          </Menu.Trigger>\n          <Menu.Content className={styles['breadcrumb-dropdown-content']}>\n            {dropdownItems.map((dropdownItem, dropdownIndex) => {\n              const {\n                key,\n                className: itemClassName,\n                ...menuItemProps\n              } = dropdownItem;\n              return (\n                <Menu.Item\n                  key={key ?? dropdownIndex}\n                  className={cx(\n                    styles['breadcrumb-dropdown-item'],\n                    itemClassName\n                  )}\n                  data-slot='breadcrumb-dropdown-item'\n                  {...menuItemProps}\n                />\n              );\n            })}\n          </Menu.Content>\n        </Menu>\n      </li>\n    );\n  }\n\n  if (disabled || current) {\n    return (\n      <li\n        className={cx(styles['breadcrumb-item'], className)}\n        data-slot='breadcrumb-item'\n      >\n        <span\n          ref={ref as React.RefObject<HTMLSpanElement>}\n          className={cx(\n            styles['breadcrumb-link'],\n            disabled && styles['breadcrumb-link-disabled'],\n            current && styles['breadcrumb-link-active']\n          )}\n          data-slot='breadcrumb-link'\n          {...(disabled && {\n            'aria-disabled': 'true',\n            'data-disabled': 'true'\n          })}\n          {...(current && { 'aria-current': 'page', 'data-current': 'true' })}\n        >\n          {label}\n        </span>\n      </li>\n    );\n  }\n\n  return (\n    <li\n      className={cx(styles['breadcrumb-item'], className)}\n      data-slot='breadcrumb-item'\n    >\n      {linkElement}\n    </li>\n  );\n};\n\nBreadcrumbItem.displayName = 'Breadcrumb.Item';\n"],"names":[],"mappings":";;;;;;;;;;;AA2BO;AAaL;AA2BA;;AASE;;;;AAKI;;AAEA;AACA;AACgC;AAGrC;AAED;AACE;AAwBU;;AAgBF;;AAOV;;AAeU;AACA;AACD;;AAST;AAQF;AAEA;;"}