{"version":3,"file":"command-item.cjs","sources":["../../../components/command/command-item.tsx"],"sourcesContent":["'use client';\n\nimport { Autocomplete as AutocompletePrimitive } from '@base-ui/react/autocomplete';\nimport { cx } from 'class-variance-authority';\nimport { type ReactNode } from 'react';\nimport { getMatch } from '../menu/utils';\nimport styles from './command.module.css';\nimport { useCommandContext } from './command-root';\n\nexport interface CommandItemProps extends AutocompletePrimitive.Item.Props {\n  /** Icon rendered at the start of the item. */\n  leadingIcon?: ReactNode;\n  /** Icon rendered at the end of the item (e.g. a `Kbd` shortcut hint). */\n  trailingIcon?: ReactNode;\n}\n\nexport const CommandItem = ({\n  className,\n  children,\n  value: providedValue,\n  leadingIcon,\n  trailingIcon,\n  disabled,\n  ...props\n}: CommandItemProps) => {\n  const value =\n    providedValue !== undefined\n      ? providedValue\n      : typeof children === 'string'\n        ? children\n        : undefined;\n\n  const { inputValue, hasItems } = useCommandContext();\n\n  if (!hasItems && inputValue?.length) {\n    const isMatched = getMatch(\n      typeof value === 'string' ? value : undefined,\n      children,\n      inputValue\n    );\n    if (!isMatched) return null;\n  }\n\n  const content = (\n    <>\n      {leadingIcon && (\n        <span data-slot='command-item-leading-icon' className={styles.itemIcon}>\n          {leadingIcon}\n        </span>\n      )}\n      <span data-slot='command-item-label' className={styles.itemLabel}>\n        {children}\n      </span>\n      {trailingIcon && (\n        <span\n          data-slot='command-item-trailing-icon'\n          className={styles.itemTrailing}\n        >\n          {trailingIcon}\n        </span>\n      )}\n    </>\n  );\n\n  /**\n   * TODO: Fix this when Base UI fixes this issue\n   * This is a workaround to prevent item focus when the disabled prop is true.\n   */\n  if (disabled) {\n    return (\n      <div\n        data-slot='command-item'\n        className={cx(styles.item, className)}\n        role='option'\n        data-disabled={true}\n        aria-disabled={true}\n      >\n        {content}\n      </div>\n    );\n  }\n\n  return (\n    <AutocompletePrimitive.Item\n      data-slot='command-item'\n      value={value}\n      className={cx(styles.item, className)}\n      {...props}\n    >\n      {content}\n    </AutocompletePrimitive.Item>\n  );\n};\n\nCommandItem.displayName = 'Command.Item';\n"],"names":[],"mappings":";;;;;;;;;;AAgBa;AASX;AAEI;AACA;AACE;;;AAKN;;AAME;AAAgB;;;AAwBlB;;;AAGG;;;;AAeH;AAUF;AAEA;;"}