@expcat/tigercat-react 0.4.3 → 1.0.0

package/dist/chunk-L6WOLPV7.mjs

@@ -0,0 +1,123 @@
+import { useState, useRef, useMemo, useEffect } from 'react';
+import { hexToRgb, rgbToHsv, classNames, getColorPickerTriggerClasses, colorPickerPanelClasses, colorPickerInputClasses, colorPickerPresetClasses, colorPickerBaseClasses, hsvToRgb, rgbToHex, isValidHex } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/ColorPicker.tsx
+var ColorPicker = ({
+  value = "#2563eb",
+  disabled = false,
+  size = "md",
+  showAlpha = false,
+  format = "hex",
+  presets,
+  className,
+  onChange
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState(value);
+  const containerRef = useRef(null);
+  const hsv = useMemo(() => {
+    const rgb = hexToRgb(value);
+    return rgbToHsv(rgb.r, rgb.g, rgb.b);
+  }, [value]);
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+  function togglePanel() {
+    if (disabled) return;
+    setIsOpen((v) => !v);
+  }
+  function handleHueChange(e) {
+    const hue = Number(e.target.value);
+    const { r, g, b } = hsvToRgb(hue, hsv.s, hsv.v);
+    const hex = rgbToHex(r, g, b);
+    onChange?.(hex);
+  }
+  function handleInputChange(e) {
+    const val = e.target.value;
+    setInputValue(val);
+    if (isValidHex(val)) {
+      const hex = val.startsWith("#") ? val : `#${val}`;
+      onChange?.(hex);
+    }
+  }
+  function handlePresetClick(color) {
+    onChange?.(color);
+  }
+  useEffect(() => {
+    if (!isOpen) return;
+    function handleClickOutside(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("click", handleClickOutside);
+    return () => document.removeEventListener("click", handleClickOutside);
+  }, [isOpen]);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: classNames(colorPickerBaseClasses, className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: getColorPickerTriggerClasses(size, disabled),
+        style: { backgroundColor: value },
+        role: "button",
+        "aria-label": "Pick color",
+        tabIndex: 0,
+        onClick: togglePanel
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs("div", { className: colorPickerPanelClasses, children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+        /* @__PURE__ */ jsx("label", { className: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1", children: "Hue" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            min: 0,
+            max: 360,
+            value: hsv.h,
+            className: "w-full h-2 rounded-full cursor-pointer accent-[var(--tiger-primary,#2563eb)]",
+            "aria-label": "Hue",
+            onChange: handleHueChange
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+        /* @__PURE__ */ jsx("label", { className: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1", children: "Hex" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            className: colorPickerInputClasses,
+            value: inputValue,
+            "aria-label": "Color value",
+            onChange: handleInputChange
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "w-8 h-8 rounded border border-[var(--tiger-border,#d1d5db)]",
+            style: { backgroundColor: value },
+            "aria-label": "Color preview"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-[var(--tiger-text,#111827)]", children: value })
+      ] }),
+      presets && presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: presets.map((color) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: colorPickerPresetClasses,
+          style: { backgroundColor: color },
+          "aria-label": `Select ${color}`,
+          onClick: () => handlePresetClick(color)
+        },
+        color
+      )) })
+    ] })
+  ] });
+};
+
+export { ColorPicker };

package/dist/chunk-LODDAS62.js

@@ -0,0 +1,173 @@
+'use strict';
+
+var React = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/components/Progress.tsx
+var Progress = React__default.default.memo(
+  ({
+    variant = "primary",
+    size = "md",
+    type = "line",
+    percentage = 0,
+    status = "normal",
+    showText,
+    text,
+    format,
+    striped = false,
+    stripedAnimation = false,
+    strokeWidth = 6,
+    width = "auto",
+    height,
+    className,
+    style,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    ...props
+  }) => {
+    const clampedPercentage = tigercatCore.clampPercentage(percentage);
+    const effectiveVariant = tigercatCore.getStatusVariant(status) || variant;
+    const shouldShowText = showText ?? type === "line";
+    const displayText = shouldShowText ? tigercatCore.formatProgressText(clampedPercentage, text, format) : "";
+    const resolvedAriaLabel = ariaLabel ?? (ariaLabelledby ? void 0 : `Progress: ${clampedPercentage}%`);
+    const ariaAttrs = {
+      role: "progressbar",
+      "aria-label": resolvedAriaLabel,
+      "aria-labelledby": ariaLabelledby,
+      "aria-describedby": ariaDescribedby,
+      "aria-valuenow": clampedPercentage,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100
+    };
+    const renderLineProgress = () => {
+      const containerStyle = width !== "auto" ? { width: typeof width === "number" ? `${width}px` : width } : {};
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ...props,
+          className: tigercatCore.classNames("flex items-center w-full", className),
+          style: { ...style ?? {}, ...containerStyle },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: tigercatCore.classNames(
+                  tigercatCore.progressLineBaseClasses,
+                  tigercatCore.progressTrackBgClasses,
+                  !height && tigercatCore.progressLineSizeClasses[size]
+                ),
+                style: { flex: 1, ...height ? { height: `${height}px` } : {} },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: tigercatCore.classNames(
+                      tigercatCore.progressLineInnerClasses,
+                      tigercatCore.getProgressVariantClasses(effectiveVariant),
+                      striped && tigercatCore.progressStripedClasses,
+                      striped && stripedAnimation && tigercatCore.progressStripedAnimationClasses
+                    ),
+                    style: { width: `${clampedPercentage}%` },
+                    ...ariaAttrs
+                  }
+                )
+              }
+            ),
+            shouldShowText && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: tigercatCore.classNames(
+                  tigercatCore.progressTextBaseClasses,
+                  tigercatCore.progressTextSizeClasses[size],
+                  tigercatCore.getProgressTextColorClasses(effectiveVariant)
+                ),
+                children: displayText
+              }
+            )
+          ]
+        }
+      );
+    };
+    const renderCircleProgress = () => {
+      const {
+        width: svgWidth,
+        height: svgHeight,
+        radius,
+        cx,
+        cy
+      } = tigercatCore.getCircleSize(size, strokeWidth);
+      const { strokeDasharray, strokeDashoffset } = tigercatCore.calculateCirclePath(radius, clampedPercentage);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ...props,
+          className: tigercatCore.classNames(tigercatCore.progressCircleBaseClasses, className),
+          style: {
+            ...style ?? {},
+            width: `${svgWidth}px`,
+            height: `${svgHeight}px`
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: svgWidth, height: svgHeight, viewBox: `0 0 ${svgWidth} ${svgHeight}`, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  cx,
+                  cy,
+                  r: radius,
+                  fill: "none",
+                  stroke: "currentColor",
+                  className: tigercatCore.progressCircleTrackStrokeClasses,
+                  strokeWidth
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  cx,
+                  cy,
+                  r: radius,
+                  fill: "none",
+                  stroke: "currentColor",
+                  className: tigercatCore.getProgressVariantClasses(effectiveVariant).replace("bg-", "text-"),
+                  strokeWidth,
+                  strokeLinecap: "round",
+                  strokeDasharray,
+                  strokeDashoffset,
+                  style: {
+                    transition: "stroke-dashoffset 0.3s ease",
+                    transform: "rotate(-90deg)",
+                    transformOrigin: "center"
+                  },
+                  ...ariaAttrs
+                }
+              )
+            ] }),
+            shouldShowText && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: tigercatCore.classNames(
+                  tigercatCore.progressCircleTextClasses,
+                  tigercatCore.progressTextSizeClasses[size],
+                  "font-medium",
+                  tigercatCore.getProgressTextColorClasses(effectiveVariant)
+                ),
+                children: displayText
+              }
+            )
+          ]
+        }
+      );
+    };
+    if (type === "circle") return renderCircleProgress();
+    return renderLineProgress();
+  }
+);
+Progress.displayName = "Progress";
+
+exports.Progress = Progress;

package/dist/{chunk-IP3MAJSH.mjs → chunk-MQ5ZP5RW.mjs}

@@ -1,12 +1,12 @@
-import { usePopup } from './chunk-3PV2MDST.mjs';
+import { usePopup } from './chunk-AMOH5AMN.mjs';
 import { useRef, useMemo } from 'react';
 import { createFloatingIdFactory, classNames, getTooltipContainerClasses, getTooltipTriggerClasses, getTooltipContentClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var createTooltipId = createFloatingIdFactory("tooltip");
 var Tooltip = ({
-  visible,
-  defaultVisible = false,
+  open,
+  defaultOpen = false,
   content,
   trigger = "hover",
   placement = "top",
@@ -15,21 +15,14 @@ var Tooltip = ({
   className,
   style,
   children,
-  onVisibleChange,
+  onOpenChange,
   ...divProps
 }) => {
   const tooltipIdRef = useRef(null);
   if (!tooltipIdRef.current) tooltipIdRef.current = createTooltipId();
   const tooltipId = tooltipIdRef.current;
   const describedBy = content != null ? tooltipId : void 0;
-  const {
-    currentVisible,
-    containerRef,
-    triggerRef,
-    floatingRef,
-    floatingStyles,
-    triggerHandlers
-  } = usePopup({ visible, defaultVisible, disabled, trigger, placement, offset, onVisibleChange });
+  const { currentVisible, containerRef, triggerRef, floatingRef, floatingStyles, triggerHandlers } = usePopup({ open, defaultOpen, disabled, trigger, placement, offset, onOpenChange });
   const containerClasses = useMemo(
     () => classNames(getTooltipContainerClasses(), className),
     [className]

package/dist/{chunk-KMTERPME.mjs → chunk-MSHCPJIJ.mjs}

@@ -1,4 +1,4 @@
-import { useCheckboxGroup } from './chunk-OCVQ3LOT.mjs';
+import { useCheckboxGroup } from './chunk-DKT2EYVM.mjs';
 import { useState, useRef, useEffect } from 'react';
 import { getCheckboxClasses, classNames, getCheckboxLabelClasses } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/chunk-N66WEQ6M.js

@@ -0,0 +1,240 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/TreeSelect.tsx
+var TREESELECT_KEYS = /* @__PURE__ */ new Set([
+  "value",
+  "treeData",
+  "placeholder",
+  "size",
+  "disabled",
+  "clearable",
+  "multiple",
+  "showSearch",
+  "notFoundText",
+  "defaultExpandAll",
+  "onChange"
+]);
+var TreeSelect = (props) => {
+  const {
+    value,
+    treeData = [],
+    placeholder = "Please select",
+    size = "md",
+    disabled = false,
+    clearable = false,
+    multiple = false,
+    showSearch = false,
+    notFoundText = "No data",
+    defaultExpandAll = false,
+    className,
+    onChange,
+    ...rest
+  } = props;
+  const divProps = {};
+  for (const key of Object.keys(rest)) {
+    if (!TREESELECT_KEYS.has(key)) {
+      divProps[key] = rest[key];
+    }
+  }
+  const instanceId = react.useId();
+  const listboxId = `tiger-treeselect-listbox-${instanceId}`;
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [searchQuery, setSearchQuery] = react.useState("");
+  const [expandedKeys, setExpandedKeys] = react.useState(
+    () => defaultExpandAll ? new Set(tigercatCore.getAllTreeSelectKeys(treeData)) : /* @__PURE__ */ new Set()
+  );
+  const containerRef = react.useRef(null);
+  const displayLabel = react.useMemo(() => tigercatCore.getTreeSelectDisplayLabel(treeData, value), [treeData, value]);
+  const showClearButton = clearable && !disabled && value !== void 0 && (Array.isArray(value) ? value.length > 0 : value !== "");
+  const matchedKeys = react.useMemo(() => {
+    if (!searchQuery) return null;
+    return tigercatCore.filterTreeSelectNodes(treeData, searchQuery);
+  }, [treeData, searchQuery]);
+  const effectiveExpandedKeys = matchedKeys ?? expandedKeys;
+  const flatNodes = react.useMemo(
+    () => tigercatCore.flattenTreeSelectNodes(treeData, effectiveExpandedKeys),
+    [treeData, effectiveExpandedKeys]
+  );
+  const visibleNodes = react.useMemo(() => {
+    if (!matchedKeys) return flatNodes;
+    return flatNodes.filter((f) => matchedKeys.has(f.node.key));
+  }, [flatNodes, matchedKeys]);
+  function openDropdown() {
+    if (disabled) return;
+    setIsOpen(true);
+  }
+  function closeDropdown() {
+    setIsOpen(false);
+    setSearchQuery("");
+  }
+  function toggleDropdown() {
+    if (isOpen) closeDropdown();
+    else openDropdown();
+  }
+  function toggleExpand(key, e) {
+    e.stopPropagation();
+    setExpandedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }
+  function isSelected(key) {
+    if (multiple && Array.isArray(value)) {
+      return value.includes(key);
+    }
+    return value === key;
+  }
+  function handleNodeSelect(node) {
+    if (node.disabled) return;
+    if (multiple) {
+      const current = Array.isArray(value) ? [...value] : [];
+      const idx = current.indexOf(node.key);
+      if (idx >= 0) current.splice(idx, 1);
+      else current.push(node.key);
+      onChange?.(current);
+    } else {
+      onChange?.(node.key);
+      closeDropdown();
+    }
+  }
+  function handleClear(e) {
+    e.stopPropagation();
+    onChange?.(multiple ? [] : void 0);
+  }
+  function handleKeyDown(e) {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      closeDropdown();
+    } else if ((e.key === "Enter" || e.key === " ") && !isOpen) {
+      e.preventDefault();
+      openDropdown();
+    }
+  }
+  react.useEffect(() => {
+    if (!isOpen) return;
+    function handleClickOutside(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        closeDropdown();
+      }
+    }
+    document.addEventListener("click", handleClickOutside);
+    return () => document.removeEventListener("click", handleClickOutside);
+  }, [isOpen]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: tigercatCore.classNames(tigercatCore.treeSelectBaseClasses, className), ...divProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: tigercatCore.getTreeSelectTriggerClasses(size, disabled, isOpen),
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        "aria-controls": isOpen ? listboxId : void 0,
+        disabled,
+        onClick: toggleDropdown,
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: tigercatCore.classNames(
+                "flex-1 truncate",
+                !displayLabel ? "text-[var(--tiger-treeselect-placeholder,var(--tiger-text-muted,#9ca3af))]" : ""
+              ),
+              children: displayLabel || placeholder
+            }
+          ),
+          showClearButton ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "absolute right-2 top-1/2 -translate-y-1/2 text-[var(--tiger-treeselect-clear,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-treeselect-clear-hover,var(--tiger-text,#111827))]",
+              "aria-label": "Clear selection",
+              onClick: handleClear,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "svg",
+                {
+                  className: "w-4 h-4",
+                  viewBox: tigercatCore.icon20ViewBox,
+                  fill: "currentColor",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: tigercatCore.closeSolidIcon20PathD, fillRule: "evenodd", clipRule: "evenodd" })
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 top-1/2 -translate-y-1/2 text-[var(--tiger-text-muted,#9ca3af)] pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: "w-4 h-4 transition-transform",
+              viewBox: tigercatCore.icon20ViewBox,
+              fill: "currentColor",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: tigercatCore.chevronDownSolidIcon20PathD, fillRule: "evenodd", clipRule: "evenodd" })
+            }
+          ) })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { id: listboxId, role: "listbox", className: tigercatCore.treeSelectDropdownClasses, children: [
+      showSearch && /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          className: tigercatCore.treeSelectSearchClasses,
+          placeholder: "Search...",
+          value: searchQuery,
+          "aria-label": "Search tree",
+          onChange: (e) => setSearchQuery(e.target.value)
+        }
+      ),
+      visibleNodes.length > 0 ? visibleNodes.map((flatNode) => {
+        const { node, level, hasChildren, isExpanded } = flatNode;
+        const selected = isSelected(node.key);
+        const indent = level * 20;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            role: "option",
+            "aria-selected": selected,
+            "aria-disabled": node.disabled,
+            className: tigercatCore.getTreeSelectNodeClasses(selected, !!node.disabled, size),
+            style: { paddingLeft: `${indent + 8}px` },
+            onClick: (e) => {
+              e.stopPropagation();
+              handleNodeSelect(node);
+            },
+            children: [
+              hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: tigercatCore.classNames(
+                    "inline-flex items-center justify-center w-4 h-4 mr-1 transition-transform",
+                    isExpanded ? "rotate-90" : ""
+                  ),
+                  onClick: (e) => toggleExpand(node.key, e),
+                  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-3 h-3", viewBox: tigercatCore.icon20ViewBox, fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      d: tigercatCore.chevronRightSolidIcon20PathD,
+                      fillRule: "evenodd",
+                      clipRule: "evenodd"
+                    }
+                  ) })
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-4 mr-1" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: node.label })
+            ]
+          },
+          String(node.key)
+        );
+      }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.treeSelectEmptyClasses, children: notFoundText })
+    ] })
+  ] });
+};
+
+exports.TreeSelect = TreeSelect;

package/dist/{chunk-TDRINUMH.js → chunk-NZNSUKPT.js}

@@ -16,6 +16,7 @@ var Select = (props) => {
     clearable = true,
     noOptionsText = "No options found",
     noDataText = "No options available",
+    maxTagCount,
     onSearch,
     className
   } = props;
@@ -28,6 +29,9 @@ var Select = (props) => {
     "clearable",
     "noOptionsText",
     "noDataText",
+    "maxTagCount",
+    "virtual",
+    "listHeight",
     "onSearch",
     "className",
     "value",
@@ -59,12 +63,17 @@ var Select = (props) => {
     if (isMultipleSelect(props)) {
       const value2 = props.value ?? [];
       if (value2.length === 0) return placeholder;
-      return allOptions.filter((opt) => value2.includes(opt.value)).map((opt) => opt.label).join(", ");
+      const labels = allOptions.filter((opt) => value2.includes(opt.value)).map((opt) => opt.label);
+      if (maxTagCount !== void 0 && labels.length > maxTagCount) {
+        const visible = labels.slice(0, maxTagCount);
+        return `${visible.join(", ")} +${labels.length - maxTagCount}`;
+      }
+      return labels.join(", ");
     }
     const value = props.value;
     if (value === void 0 || value === null || value === "") return placeholder;
     return allOptions.find((opt) => opt.value === value)?.label ?? placeholder;
-  }, [props.multiple, props.value, allOptions, placeholder]);
+  }, [props.multiple, props.value, allOptions, placeholder, maxTagCount]);
   const showClearButton = react.useMemo(
     () => clearable && !disabled && props.value !== void 0 && props.value !== null && props.value !== "" && (!Array.isArray(props.value) || props.value.length > 0),
     [clearable, disabled, props.value]
@@ -413,6 +422,7 @@ var Select = (props) => {
         "aria-haspopup": "listbox",
         "aria-expanded": isOpen,
         "aria-controls": listboxId,
+        "aria-activedescendant": isOpen && activeIndex >= 0 ? getOptionId(activeIndex) : void 0,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "span",
@@ -425,16 +435,25 @@ var Select = (props) => {
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
-            showClearButton && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex", "data-tiger-select-clear": true, onClick: clearSelection, children: /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
+            showClearButton && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
               {
-                className: "w-4 h-4 text-[var(--tiger-select-icon,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-select-icon-hover,var(--tiger-text-muted,#6b7280))]",
-                xmlns: "http://www.w3.org/2000/svg",
-                viewBox: tigercatCore.icon20ViewBox,
-                fill: "currentColor",
-                children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: tigercatCore.closeSolidIcon20PathD, clipRule: "evenodd" })
+                className: "inline-flex",
+                "data-tiger-select-clear": true,
+                "aria-label": "Clear selection",
+                onClick: clearSelection,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    className: "w-4 h-4 text-[var(--tiger-select-icon,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-select-icon-hover,var(--tiger-text-muted,#6b7280))]",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    viewBox: tigercatCore.icon20ViewBox,
+                    fill: "currentColor",
+                    children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: tigercatCore.closeSolidIcon20PathD, clipRule: "evenodd" })
+                  }
+                )
               }
-            ) }),
+            ),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.classNames("inline-flex", isOpen && "rotate-180"), children: /* @__PURE__ */ jsxRuntime.jsx(
               "svg",
               {