+ {selectedValues
+ .slice(0, responsiveSettings.maxCount)
+ .map((value) => {
+ const option = getOptionByValue(value);
+ const IconComponent = option?.icon;
+ const customStyle = option?.style;
+ if (!option) {
+ return null;
+ }
+ const badgeStyle: React.CSSProperties = {
+ animationDuration: `${animation}s`,
+ ...(customStyle?.badgeColor && {
+ backgroundColor: customStyle.badgeColor,
+ }),
+ ...(customStyle?.gradient && {
+ background: customStyle.gradient,
+ color: "white",
+ }),
+ };
+ return (
+
svg]:pointer-events-auto"
+ )}
+ style={{
+ ...badgeStyle,
+ animationDuration: `${
+ animationConfig?.duration || animation
+ }s`,
+ animationDelay: `${animationConfig?.delay || 0}s`,
+ }}
+ >
+ {IconComponent && !responsiveSettings.hideIcons && (
+
+ )}
+
+ {option.label}
+
+ {
+ event.stopPropagation();
+ toggleOption(value);
+ }}
+ onKeyDown={(event) => {
+ if (
+ event.key === "Enter" ||
+ event.key === " "
+ ) {
+ event.preventDefault();
+ event.stopPropagation();
+ toggleOption(value);
+ }
+ }}
+ aria-label={`Remove ${option.label} from selection`}
+ className="ml-2 h-4 w-4 cursor-pointer hover:bg-white/20 rounded-sm p-0.5 -m-0.5 focus:outline-none focus:ring-1 focus:ring-white/50"
+ >
+
+
+
+ );
+ })
+ .filter(Boolean)}
+ {selectedValues.length > responsiveSettings.maxCount && (
+
svg]:pointer-events-auto"
+ )}
+ style={{
+ animationDuration: `${
+ animationConfig?.duration || animation
+ }s`,
+ animationDelay: `${animationConfig?.delay || 0}s`,
+ }}
+ >
+ {`+ ${
+ selectedValues.length - responsiveSettings.maxCount
+ } more`}
+ {
+ event.stopPropagation();
+ clearExtraOptions();
+ }}
+ />
+
+ )}
+
+
{
+ event.stopPropagation();
+ handleClear();
+ }}
+ onKeyDown={(event) => {
+ if (event.key === "Enter" || event.key === " ") {
+ event.preventDefault();
+ event.stopPropagation();
+ handleClear();
+ }
+ }}
+ aria-label={`Clear all ${selectedValues.length} selected options`}
+ className="flex items-center justify-center h-4 w-4 mx-2 cursor-pointer text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 rounded-sm"
+ >
+
+
+
+
+