@while-and-for/tremor-react/dist/components/input-elements/MultiSelect/MultiSelectItem.js

The React library to build dashboards faster.

'use client';
import{__rest as e}from"tslib";import t,{useContext as r}from"react";import{spacing as o}from"../../../lib/spacing.js";import{isValueInArray as a,makeClassName as n}from"../../../lib/utils.js";import{tremorTwMerge as c}from"../../../lib/tremorTwMerge.js";import"../../../contexts/BaseColorContext.js";import"../../../contexts/IndexContext.js";import"../../../contexts/RootStylesContext.js";import s from"../../../contexts/SelectedValueContext.js";import{Listbox as m}from"@headlessui/react";const i=n("MultiSelectItem"),d=t.forwardRef(((n,d)=>{const{value:l,className:u,children:p}=n,x=e(n,["value","className","children"]),{selectedValue:g}=r(s),k=a(l,g);return t.createElement(m.Option,Object.assign({className:c(i("root"),"flex justify-start items-center cursor-default text-tremor-default","ui-active:bg-tremor-background-muted ui-active:text-tremor-content-strong ui-selected:text-tremor-content-strong ui-selected:bg-tremor-background-muted text-tremor-content-emphasis","dark:ui-active:bg-dark-tremor-background-muted dark:ui-active:text-dark-tremor-content-strong dark:ui-selected:text-dark-tremor-content-strong dark:ui-selected:bg-dark-tremor-background-muted dark:text-dark-tremor-content-emphasis",o.md.paddingX,o.md.paddingY,u),ref:d,key:l,value:l},x),t.createElement("input",{type:"checkbox",className:c(i("checkbox"),"flex-none focus:ring-none focus:outline-none cursor-pointer","accent-tremor-brand","dark:accent-dark-tremor-brand",o.sm.marginRight),checked:k,readOnly:!0}),t.createElement("span",{className:"whitespace-nowrap truncate "},null!=p?p:l))}));d.displayName="MultiSelectItem";export{d as default};