@timeax/form-palette 0.1.28 → 0.1.30

package/dist/extra.mjs

@@ -19767,6 +19767,38 @@ function buildGroupLayoutClasses(opts) {
     descriptionClassesBase
   };
 }
+var badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
 function RadioGroup({
   className,
   ...props
@@ -19827,6 +19859,34 @@ function resolveRender(obj) {
   }
   return void 0;
 }
+function resolveByAccessor(input, accessor, fallback) {
+  if (typeof accessor === "function") return accessor(input);
+  if (typeof accessor === "string") return input == null ? void 0 : input[accessor];
+  return fallback;
+}
+function normalizeOptionTags(raw, obj, config) {
+  var _a;
+  const rawTags = (_a = resolveByAccessor(raw, config.optionTags)) != null ? _a : Array.isArray(obj == null ? void 0 : obj.tags) ? obj.tags : void 0;
+  if (!Array.isArray(rawTags) || rawTags.length === 0) return void 0;
+  const tags = rawTags.map((tag) => {
+    var _a2, _b, _c, _d, _e, _f, _g;
+    const tagObj = tag != null && typeof tag === "object" ? tag : void 0;
+    const label = (_b = (_a2 = resolveByAccessor(tag, config.optionTagLabel)) != null ? _a2 : tagObj == null ? void 0 : tagObj.label) != null ? _b : typeof tag === "string" || typeof tag === "number" ? String(tag) : void 0;
+    if (label === void 0 || label === null || label === "") {
+      return null;
+    }
+    return {
+      label,
+      icon: (_c = resolveByAccessor(tag, config.optionTagIcon)) != null ? _c : tagObj == null ? void 0 : tagObj.icon,
+      className: (_d = resolveByAccessor(tag, config.optionTagClassName)) != null ? _d : tagObj == null ? void 0 : tagObj.className,
+      color: (_e = resolveByAccessor(tag, config.optionTagColor)) != null ? _e : tagObj == null ? void 0 : tagObj.color,
+      bgColor: (_f = resolveByAccessor(tag, config.optionTagBgColor)) != null ? _f : tagObj == null ? void 0 : tagObj.bgColor,
+      onClick: (_g = resolveByAccessor(tag, config.optionTagOnClick)) != null ? _g : tagObj == null ? void 0 : tagObj.onClick,
+      raw: tag
+    };
+  }).filter(Boolean);
+  return tags.length ? tags : void 0;
+}
 function resolveValue(raw, obj, index, optionValue) {
   var _a, _b, _c;
   return typeof optionValue === "function" ? optionValue(raw) : typeof optionValue === "string" ? obj[optionValue] : (_c = (_b = (_a = obj.value) != null ? _a : obj.id) != null ? _b : obj.key) != null ? _c : String(index);
@@ -19864,6 +19924,7 @@ function normalizeOne(raw, index, config) {
   const disabled = resolveDisabled(raw, obj, config.optionDisabled);
   const icon = resolveIcon(raw, obj, config.optionIcon);
   const key = resolveKey(raw, obj, index, value, config.optionKey);
+  const tags = normalizeOptionTags(raw, obj, config);
   const render = resolveRender(obj);
   return {
     key: String(key),
@@ -19873,6 +19934,7 @@ function normalizeOne(raw, index, config) {
     description,
     disabled,
     icon,
+    tags,
     render,
     raw
   };
@@ -19883,7 +19945,7 @@ function globalNormalizeOptions(opts, config) {
     (raw, index) => normalizeOne(raw, index, config)
   );
 }
-function globalNormalizeCheckBasedOptions(item, index, optionLabelKey, optionValueKey) {
+function globalNormalizeCheckBasedOptions(item, index, optionLabelKey, optionValueKey, tagConfig) {
   var _a, _b;
   const anyItem = item;
   const rawValue = optionValueKey != null ? anyItem[optionValueKey] : anyItem.value;
@@ -19892,6 +19954,7 @@ function globalNormalizeCheckBasedOptions(item, index, optionLabelKey, optionVal
   const description = anyItem.description;
   const disabled = !!anyItem.disabled;
   const key = (_b = anyItem.key) != null ? _b : index;
+  const tags = normalizeOptionTags(item, anyItem, tagConfig != null ? tagConfig : {});
   const render = resolveRender(anyItem);
   return {
     key: String(key),
@@ -19899,6 +19962,7 @@ function globalNormalizeCheckBasedOptions(item, index, optionLabelKey, optionVal
     label: rawLabel,
     description,
     disabled,
+    tags,
     render,
     raw: item
   };
@@ -19974,24 +20038,37 @@ function capitalizeFirst2(label) {
   if (!label) return label;
   return label.charAt(0).toUpperCase() + label.slice(1);
 }
-function normalizeItems(items, mappers, optionValueKey, optionLabelKey) {
+function normalizeItems(items, mappers, optionValueKey, optionLabelKey, optionTagsKey, optionTagLabel, optionTagIcon, optionTagClassName, optionTagColor, optionTagBgColor, optionTagOnClick) {
   if (mappers) {
     return items.map((item, index) => ({
       value: mappers.getValue(item, index),
       label: mappers.getLabel(item, index),
       description: mappers.getDescription ? mappers.getDescription(item, index) : void 0,
       disabled: mappers.isDisabled ? mappers.isDisabled(item, index) : false,
-      key: mappers.getKey ? mappers.getKey(item, index) : index
+      key: mappers.getKey ? mappers.getKey(item, index) : index,
+      raw: item
     }));
   }
   if (optionValueKey || optionLabelKey) {
     return items.map((item, index) => {
-      return globalNormalizeCheckBasedOptions(
-        item,
-        index,
-        optionLabelKey,
-        optionValueKey
-      );
+      return {
+        ...globalNormalizeCheckBasedOptions(
+          item,
+          index,
+          optionLabelKey,
+          optionValueKey,
+          {
+            optionTags: optionTagsKey,
+            optionTagLabel,
+            optionTagIcon,
+            optionTagClassName,
+            optionTagColor,
+            optionTagBgColor,
+            optionTagOnClick
+          }
+        ),
+        raw: item
+      };
     });
   }
   return items.map((item, index) => {
@@ -20002,7 +20079,8 @@ function normalizeItems(items, mappers, optionValueKey, optionLabelKey) {
         label: String(item),
         description: void 0,
         disabled: false,
-        key: index
+        key: index,
+        raw: item
       };
     }
     return item;
@@ -20025,6 +20103,13 @@ var InnerShadcnRadioVariant = (props, ref) => {
     mappers,
     optionValue,
     optionLabel,
+    optionTags,
+    optionTagLabel,
+    optionTagIcon,
+    optionTagClassName,
+    optionTagColor,
+    optionTagBgColor,
+    optionTagOnClick,
     renderOption,
     layout = "list",
     columns = 2,
@@ -20053,9 +20138,30 @@ var InnerShadcnRadioVariant = (props, ref) => {
       mappers,
       //@ts-ignore
       optionValue,
-      optionLabel
+      optionLabel,
+      //@ts-ignore
+      optionTags,
+      optionTagLabel,
+      optionTagIcon,
+      optionTagClassName,
+      optionTagColor,
+      optionTagBgColor,
+      optionTagOnClick
     ),
-    [items, options, mappers, optionValue, optionLabel]
+    [
+      items,
+      options,
+      mappers,
+      optionValue,
+      optionLabel,
+      optionTags,
+      optionTagLabel,
+      optionTagIcon,
+      optionTagClassName,
+      optionTagColor,
+      optionTagBgColor,
+      optionTagOnClick
+    ]
   );
   const selectedString = React74.useMemo(() => {
     if (value === void 0) return void 0;
@@ -20065,11 +20171,12 @@ var InnerShadcnRadioVariant = (props, ref) => {
     return found ? String(found.value) : void 0;
   }, [normalized, value]);
   const handleSelect = React74.useCallback(
-    (next) => {
+    (next, selectedRaw) => {
       if (!onValue || disabled) return;
       const detail = {
         source: "variant",
-        raw: next,
+        raw: selectedRaw != null ? selectedRaw : next,
+        selectedOptions: [selectedRaw != null ? selectedRaw : next],
         nativeEvent: void 0,
         meta: void 0
       };
@@ -20079,9 +20186,10 @@ var InnerShadcnRadioVariant = (props, ref) => {
   );
   const handleRadioChange = React74.useCallback(
     (raw) => {
+      var _a;
       const found = normalized.find((item) => String(item.value) === raw);
       if (!found) return;
-      handleSelect(found.value);
+      handleSelect(found.value, (_a = found.raw) != null ? _a : found.value);
     },
     [normalized, handleSelect]
   );
@@ -20123,7 +20231,7 @@ var InnerShadcnRadioVariant = (props, ref) => {
       "data-slot": "radio-group",
       ...restGroupProps,
       children: normalized.map((item, index) => {
-        var _a, _b;
+        var _a, _b, _c;
         const itemString = String(item.value);
         const selected = selectedString === itemString;
         const optionDisabled = !!disabled || !!item.disabled;
@@ -20187,7 +20295,25 @@ var InnerShadcnRadioVariant = (props, ref) => {
                 children: [
                   radioNode,
                   /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
-                    /* @__PURE__ */ jsx("span", { className: labelClassesBase, children: displayItem.label }),
+                    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-start gap-2", children: [
+                      /* @__PURE__ */ jsx("span", { className: cn(labelClassesBase, "truncate"), children: displayItem.label }),
+                      !!((_c = displayItem.tags) == null ? void 0 : _c.length) && /* @__PURE__ */ jsx("span", { className: "ml-auto flex shrink-0 flex-wrap gap-1", children: displayItem.tags.map((tag, tagIndex) => /* @__PURE__ */ jsxs(
+                        Badge,
+                        {
+                          className: cn("text-xs", tag.className),
+                          onClick: tag.onClick,
+                          style: {
+                            color: tag.color,
+                            backgroundColor: tag.bgColor
+                          },
+                          children: [
+                            tag.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: tag.icon }),
+                            /* @__PURE__ */ jsx("span", { children: tag.label })
+                          ]
+                        },
+                        tagIndex
+                      )) })
+                    ] }),
                     displayItem.description != null && /* @__PURE__ */ jsx("span", { className: descriptionClassesBase, children: displayItem.description })
                   ] })
                 ]
@@ -20318,7 +20444,7 @@ function capitalizeFirst3(label) {
   if (!label) return label;
   return label.charAt(0).toUpperCase() + label.slice(1);
 }
-function normalizeItems2(items, mappers, optionValueKey, optionLabelKey) {
+function normalizeItems2(items, mappers, optionValueKey, optionLabelKey, optionTagsKey, optionTagLabel, optionTagIcon, optionTagClassName, optionTagColor, optionTagBgColor, optionTagOnClick) {
   if (!items || !items.length) return [];
   if (mappers) {
     return items.map((item, index) => ({
@@ -20327,7 +20453,8 @@ function normalizeItems2(items, mappers, optionValueKey, optionLabelKey) {
       description: mappers.getDescription ? mappers.getDescription(item, index) : void 0,
       disabled: mappers.isDisabled ? mappers.isDisabled(item, index) : false,
       key: mappers.getKey ? mappers.getKey(item, index) : index,
-      tristate: mappers.getTristate ? mappers.getTristate(item, index) : void 0
+      tristate: mappers.getTristate ? mappers.getTristate(item, index) : void 0,
+      raw: item
     }));
   }
   if (optionValueKey || optionLabelKey) {
@@ -20337,12 +20464,22 @@ function normalizeItems2(items, mappers, optionValueKey, optionLabelKey) {
         item,
         index,
         optionLabelKey,
-        optionValueKey
+        optionValueKey,
+        {
+          optionTags: optionTagsKey,
+          optionTagLabel,
+          optionTagIcon,
+          optionTagClassName,
+          optionTagColor,
+          optionTagBgColor,
+          optionTagOnClick
+        }
       );
       const tristate = anyItem.tristate;
       return {
         ...normalised,
-        tristate
+        tristate,
+        raw: item
       };
     });
   }
@@ -20355,7 +20492,8 @@ function normalizeItems2(items, mappers, optionValueKey, optionLabelKey) {
         description: void 0,
         disabled: false,
         key: index,
-        tristate: void 0
+        tristate: void 0,
+        raw: item
       };
     }
     return item;
@@ -20366,7 +20504,17 @@ function isEqualValue2(a3, b2) {
 }
 function asGroupValue(value) {
   if (!value) return void 0;
-  if (Array.isArray(value)) return value;
+  if (Array.isArray(value)) {
+    if (value.length === 0) return void 0;
+    const first = value[0];
+    if (first && typeof first === "object" && "value" in first && "state" in first) {
+      return value;
+    }
+    return value.map((item) => ({
+      value: item,
+      state: true
+    }));
+  }
   if (typeof value == "object")
     return Object.keys(value).map(
       (key) => ({
@@ -20395,6 +20543,13 @@ var InnerShadcnCheckboxVariant = (props, ref) => {
     mappers,
     optionValue,
     optionLabel,
+    optionTags,
+    optionTagLabel,
+    optionTagIcon,
+    optionTagClassName,
+    optionTagColor,
+    optionTagBgColor,
+    optionTagOnClick,
     renderOption,
     single,
     tristate: tristateDefault,
@@ -20422,11 +20577,41 @@ var InnerShadcnCheckboxVariant = (props, ref) => {
   } = props;
   const hasError = !!error;
   const isSingle = !!single;
+  const normalized = React74.useMemo(
+    () => normalizeItems2(
+      items != null ? items : options,
+      mappers,
+      optionValue,
+      optionLabel,
+      optionTags,
+      optionTagLabel,
+      optionTagIcon,
+      optionTagClassName,
+      optionTagColor,
+      optionTagBgColor,
+      optionTagOnClick
+    ),
+    [
+      items,
+      options,
+      mappers,
+      optionValue,
+      optionLabel,
+      optionTags,
+      optionTagLabel,
+      optionTagIcon,
+      optionTagClassName,
+      optionTagColor,
+      optionTagBgColor,
+      optionTagOnClick
+    ]
+  );
   if (isSingle) {
     const singleVal = asSingleValue(value);
     const effectiveTristate = !!tristateDefault;
     const internalState = effectiveTristate ? singleVal != null ? singleVal : "none" : !!singleVal;
     const handleSingleChange = (next) => {
+      var _a;
       if (!onValue || disabled) return;
       let nextPublic;
       if (effectiveTristate) {
@@ -20437,6 +20622,7 @@ var InnerShadcnCheckboxVariant = (props, ref) => {
       const detail = {
         source: "variant",
         raw: nextPublic,
+        selectedOptions: nextPublic === true ? normalized[0] ? [(_a = normalized[0].raw) != null ? _a : normalized[0].value] : [] : [],
         nativeEvent: void 0,
         meta: void 0
       };
@@ -20495,15 +20681,6 @@ var InnerShadcnCheckboxVariant = (props, ref) => {
     );
   }
   const groupValue = asGroupValue(value);
-  const normalized = React74.useMemo(
-    () => normalizeItems2(
-      items != null ? items : options,
-      mappers,
-      optionValue,
-      optionLabel
-    ),
-    [items, options, mappers, optionValue, optionLabel]
-  );
   const {
     groupStyle,
     groupClasses,
@@ -20523,6 +20700,13 @@ var InnerShadcnCheckboxVariant = (props, ref) => {
     labelTextSizeClass: labelTextSize2(size),
     descriptionTextSizeClass: descriptionTextSize2(size)
   });
+  const hasAnyTristate = React74.useMemo(
+    () => normalized.some((item) => {
+      var _a, _b;
+      return (_b = (_a = item.tristate) != null ? _a : tristateDefault) != null ? _b : false;
+    }),
+    [normalized, tristateDefault]
+  );
   const findEntryIndex = React74.useCallback(
     (val) => {
       if (!groupValue) return -1;
@@ -20595,14 +20779,28 @@ var InnerShadcnCheckboxVariant = (props, ref) => {
       const detail = {
         source: "variant",
         raw: nextList,
+        selectedOptions: nextList.map(
+          (entry) => {
+            var _a, _b;
+            return (_b = (_a = normalized.find(
+              (item) => isEqualValue2(item.value, entry.value)
+            )) == null ? void 0 : _a.raw) != null ? _b : entry.value;
+          }
+        ),
         nativeEvent: void 0,
         meta: void 0
       };
-      const value2 = {};
-      nextList.forEach((item) => value2[item.value] = item.state);
-      onValue(value2, detail);
+      if (hasAnyTristate) {
+        const value2 = {};
+        nextList.forEach(
+          (item) => value2[item.value] = item.state
+        );
+        onValue(value2, detail);
+        return;
+      }
+      onValue(nextList.map((item) => item.value), detail);
     },
-    [onValue, disabled, groupValue]
+    [onValue, disabled, groupValue, normalized, hasAnyTristate]
   );
   return /* @__PURE__ */ jsx(
     "div",
@@ -20620,7 +20818,7 @@ var InnerShadcnCheckboxVariant = (props, ref) => {
       style: groupStyle,
       ...restProps,
       children: normalized.map((item, index) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         const effectiveTristate = (_b = (_a = item.tristate) != null ? _a : tristateDefault) != null ? _b : false;
         const currentState = getEntryState(item.value);
         const internalState = effectiveTristate ? currentState : currentState === "none" ? false : currentState;
@@ -20708,16 +20906,35 @@ var InnerShadcnCheckboxVariant = (props, ref) => {
                   children: [
                     checkboxNode,
                     /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: cn(
-                            labelClassesBase,
-                            optionLabelClassName
-                          ),
-                          children: displayItem.label
-                        }
-                      ),
+                      /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-start gap-2", children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: cn(
+                              labelClassesBase,
+                              optionLabelClassName,
+                              "truncate"
+                            ),
+                            children: displayItem.label
+                          }
+                        ),
+                        !!((_e = displayItem.tags) == null ? void 0 : _e.length) && /* @__PURE__ */ jsx("span", { className: "ml-auto flex shrink-0 flex-wrap gap-1", children: displayItem.tags.map((tag, tagIndex) => /* @__PURE__ */ jsxs(
+                          Badge,
+                          {
+                            className: cn("text-xs", tag.className),
+                            onClick: tag.onClick,
+                            style: {
+                              color: tag.color,
+                              backgroundColor: tag.bgColor
+                            },
+                            children: [
+                              tag.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: tag.icon }),
+                              /* @__PURE__ */ jsx("span", { children: tag.label })
+                            ]
+                          },
+                          tagIndex
+                        )) })
+                      ] }),
                       displayItem.description != null && /* @__PURE__ */ jsx("span", { className: descriptionClassesBase, children: displayItem.description })
                     ] })
                   ]
@@ -20797,6 +21014,13 @@ var ShadcnSelectVariant = React74.forwardRef(function ShadcnSelectVariant2(props
     optionDisabled,
     optionIcon,
     optionKey,
+    optionTags,
+    optionTagLabel,
+    optionTagIcon,
+    optionTagClassName,
+    optionTagColor,
+    optionTagBgColor,
+    optionTagOnClick,
     searchable,
     searchPlaceholder,
     emptyLabel,
@@ -20840,7 +21064,14 @@ var ShadcnSelectVariant = React74.forwardRef(function ShadcnSelectVariant2(props
       optionDescription,
       optionDisabled,
       optionKey,
-      optionIcon
+      optionIcon,
+      optionTags,
+      optionTagLabel,
+      optionTagIcon,
+      optionTagClassName,
+      optionTagColor,
+      optionTagBgColor,
+      optionTagOnClick
     }),
     [
       options,
@@ -20850,7 +21081,14 @@ var ShadcnSelectVariant = React74.forwardRef(function ShadcnSelectVariant2(props
       optionDescription,
       optionDisabled,
       optionKey,
-      optionIcon
+      optionIcon,
+      optionTags,
+      optionTagLabel,
+      optionTagIcon,
+      optionTagClassName,
+      optionTagColor,
+      optionTagBgColor,
+      optionTagOnClick
     ]
   );
   const normalizedValue = value === "" || value == null ? void 0 : value;
@@ -20878,13 +21116,14 @@ var ShadcnSelectVariant = React74.forwardRef(function ShadcnSelectVariant2(props
   );
   const handleChange = React74.useCallback(
     (rawKey) => {
-      var _a2, _b2, _c;
+      var _a2, _b2, _c, _d;
       if (!onValue || rawKey === "") return;
       const primitive = (_a2 = valueMap.get(rawKey)) != null ? _a2 : rawKey;
       const item = (_b2 = items.find((it) => String(it.value) === String(primitive))) != null ? _b2 : null;
       const detail = {
         source: "variant",
         raw: (_c = item == null ? void 0 : item.raw) != null ? _c : primitive,
+        selectedOptions: [(_d = item == null ? void 0 : item.raw) != null ? _d : primitive],
         nativeEvent: void 0,
         meta: void 0
       };
@@ -20986,6 +21225,7 @@ var ShadcnSelectVariant = React74.forwardRef(function ShadcnSelectVariant2(props
             const detail = {
               source: "variant",
               raw: void 0,
+              selectedOptions: [],
               nativeEvent: void 0,
               meta: { action: "clear" }
             };
@@ -21088,7 +21328,7 @@ var ShadcnSelectVariant = React74.forwardRef(function ShadcnSelectVariant2(props
                   data: filteredItems,
                   computeItemKey: (_index, item) => item.key,
                   itemContent: (index, item) => {
-                    var _a2;
+                    var _a2, _b2;
                     const optionNode = /* @__PURE__ */ jsx(
                       SelectItem,
                       {
@@ -21096,15 +21336,38 @@ var ShadcnSelectVariant = React74.forwardRef(function ShadcnSelectVariant2(props
                         disabled: item.disabled,
                         children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
                           item.icon && /* @__PURE__ */ jsx("span", { className: "mt-0.5 shrink-0", children: item.icon }),
-                          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-                            /* @__PURE__ */ jsx("span", { children: item.labelNode }),
+                          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+                            /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-start gap-2", children: [
+                              /* @__PURE__ */ jsx("span", { className: "truncate", children: item.labelNode }),
+                              !!((_a2 = item.tags) == null ? void 0 : _a2.length) && /* @__PURE__ */ jsx("span", { className: "ml-auto flex shrink-0 flex-wrap gap-1", children: item.tags.map(
+                                (tag, tagIndex) => /* @__PURE__ */ jsxs(
+                                  Badge,
+                                  {
+                                    className: cn(
+                                      "text-xs",
+                                      tag.className
+                                    ),
+                                    onClick: tag.onClick,
+                                    style: {
+                                      color: tag.color,
+                                      backgroundColor: tag.bgColor
+                                    },
+                                    children: [
+                                      tag.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: tag.icon }),
+                                      /* @__PURE__ */ jsx("span", { children: tag.label })
+                                    ]
+                                  },
+                                  tagIndex
+                                )
+                              ) })
+                            ] }),
                             item.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: item.description })
                           ] })
                         ] })
                       },
                       item.key
                     );
-                    const renderer = (_a2 = item.render) != null ? _a2 : renderOption;
+                    const renderer = (_b2 = item.render) != null ? _b2 : renderOption;
                     if (!renderer) return optionNode;
                     return renderer({
                       item,
@@ -21123,7 +21386,7 @@ var ShadcnSelectVariant = React74.forwardRef(function ShadcnSelectVariant2(props
                 }
               )
             ) : /* @__PURE__ */ jsx("div", { className: "max-h-60 overflow-auto", children: filteredItems.map((item, index) => {
-              var _a2;
+              var _a2, _b2;
               const optionNode = /* @__PURE__ */ jsx(
                 SelectItem,
                 {
@@ -21131,15 +21394,38 @@ var ShadcnSelectVariant = React74.forwardRef(function ShadcnSelectVariant2(props
                   disabled: item.disabled,
                   children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
                     item.icon && /* @__PURE__ */ jsx("span", { className: "mt-0.5 shrink-0", children: item.icon }),
-                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-                      /* @__PURE__ */ jsx("span", { children: item.labelNode }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+                      /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-start gap-2", children: [
+                        /* @__PURE__ */ jsx("span", { className: "truncate", children: item.labelNode }),
+                        !!((_a2 = item.tags) == null ? void 0 : _a2.length) && /* @__PURE__ */ jsx("span", { className: "ml-auto flex shrink-0 flex-wrap gap-1", children: item.tags.map(
+                          (tag, tagIndex) => /* @__PURE__ */ jsxs(
+                            Badge,
+                            {
+                              className: cn(
+                                "text-xs",
+                                tag.className
+                              ),
+                              onClick: tag.onClick,
+                              style: {
+                                color: tag.color,
+                                backgroundColor: tag.bgColor
+                              },
+                              children: [
+                                tag.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: tag.icon }),
+                                /* @__PURE__ */ jsx("span", { children: tag.label })
+                              ]
+                            },
+                            tagIndex
+                          )
+                        ) })
+                      ] }),
                       item.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: item.description })
                     ] })
                   ] })
                 },
                 item.key
               );
-              const renderer = (_a2 = item.render) != null ? _a2 : renderOption;
+              const renderer = (_b2 = item.render) != null ? _b2 : renderOption;
               if (!renderer) return optionNode;
               return renderer({
                 item,
@@ -21289,38 +21575,6 @@ var selectModule = {
     tags: ["select", "dropdown", "single-value"]
   }
 };
-var badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? Slot : "span";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      "data-slot": "badge",
-      className: cn(badgeVariants({ variant }), className),
-      ...props
-    }
-  );
-}
 function getTextWidth(text, font) {
   if (typeof window === "undefined") return 0;
   const canvas = window.__canvas || (window.__canvas = document.createElement("canvas"));
@@ -21510,6 +21764,13 @@ var ShadcnMultiSelectVariant = React74.forwardRef(function ShadcnMultiSelectVari
     optionDisabled,
     optionIcon,
     optionKey,
+    optionTags,
+    optionTagLabel,
+    optionTagIcon,
+    optionTagClassName,
+    optionTagColor,
+    optionTagBgColor,
+    optionTagOnClick,
     searchable,
     searchPlaceholder,
     emptySearchText,
@@ -21558,7 +21819,14 @@ var ShadcnMultiSelectVariant = React74.forwardRef(function ShadcnMultiSelectVari
       optionDescription,
       optionDisabled,
       optionKey,
-      optionIcon
+      optionIcon,
+      optionTags,
+      optionTagLabel,
+      optionTagIcon,
+      optionTagClassName,
+      optionTagColor,
+      optionTagBgColor,
+      optionTagOnClick
     });
     return { items: items2, keyedItems: (0, import_lodash.keyBy)(items2, "value") };
   }, [
@@ -21569,7 +21837,14 @@ var ShadcnMultiSelectVariant = React74.forwardRef(function ShadcnMultiSelectVari
     optionDescription,
     optionDisabled,
     optionKey,
-    optionIcon
+    optionIcon,
+    optionTags,
+    optionTagLabel,
+    optionTagIcon,
+    optionTagClassName,
+    optionTagColor,
+    optionTagBgColor,
+    optionTagOnClick
   ]);
   const selectedValues = React74.useMemo(
     () => new Set(value != null ? value : []),
@@ -21620,7 +21895,12 @@ var ShadcnMultiSelectVariant = React74.forwardRef(function ShadcnMultiSelectVari
         next = [...current, primitive];
       }
       const final = next.length ? next : void 0;
-      const values = next == null ? void 0 : next.map((item) => keyedItems[item].raw);
+      const values = next == null ? void 0 : next.map(
+        (item) => {
+          var _a2, _b;
+          return (_b = (_a2 = keyedItems[item]) == null ? void 0 : _a2.raw) != null ? _b : item;
+        }
+      );
       const detail = {
         source: "variant",
         raw: {
@@ -21629,12 +21909,13 @@ var ShadcnMultiSelectVariant = React74.forwardRef(function ShadcnMultiSelectVari
           next: final,
           values
         },
+        selectedOptions: values != null ? values : [],
         nativeEvent: void 0,
         meta: void 0
       };
       onValue(final, detail);
     },
-    [onValue, value, disabled, readOnly]
+    [onValue, value, disabled, readOnly, keyedItems]
   );
   const handleSelectAll = React74.useCallback(() => {
     if (!onValue || disabled || readOnly) return;
@@ -21650,7 +21931,10 @@ var ShadcnMultiSelectVariant = React74.forwardRef(function ShadcnMultiSelectVari
       next = Array.from(merged);
     }
     const final = next.length ? next : void 0;
-    const values = next.map((item) => keyedItems[item].raw);
+    const values = next.map((item) => {
+      var _a2, _b;
+      return (_b = (_a2 = keyedItems[item]) == null ? void 0 : _a2.raw) != null ? _b : item;
+    });
     const detail = {
       source: "variant",
       raw: {
@@ -21658,6 +21942,7 @@ var ShadcnMultiSelectVariant = React74.forwardRef(function ShadcnMultiSelectVari
         next: final,
         values
       },
+      selectedOptions: values,
       nativeEvent: void 0,
       meta: {
         allSelected: !currentlyAllSelected
@@ -21670,7 +21955,8 @@ var ShadcnMultiSelectVariant = React74.forwardRef(function ShadcnMultiSelectVari
     disabled,
     readOnly,
     allSelectableValues,
-    selectedValues
+    selectedValues,
+    keyedItems
   ]);
   const handleClearAll = React74.useCallback(() => {
     if (!onValue || disabled || readOnly) return;
@@ -21679,6 +21965,7 @@ var ShadcnMultiSelectVariant = React74.forwardRef(function ShadcnMultiSelectVari
       raw: {
         type: "clear"
       },
+      selectedOptions: [],
       nativeEvent: void 0,
       meta: void 0
     };
@@ -21694,9 +21981,14 @@ var ShadcnMultiSelectVariant = React74.forwardRef(function ShadcnMultiSelectVari
           selectedValues,
           item.value
         );
+        const selectedOptions = (updated != null ? updated : []).map((value2) => {
+          var _a2, _b;
+          return (_b = (_a2 = keyedItems[value2]) == null ? void 0 : _a2.raw) != null ? _b : value2;
+        });
         const detail = {
           source: "variant",
           raw: item,
+          selectedOptions,
           nativeEvent: void 0,
           meta: { action: "remove", removed: value }
         };
@@ -21970,7 +22262,7 @@ var ShadcnMultiSelectVariant = React74.forwardRef(function ShadcnMultiSelectVari
                     EmptyPlaceholder: () => /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-xs text-muted-foreground", children: emptySearchText != null ? emptySearchText : "No results found" })
                   },
                   itemContent: (index, item) => {
-                    var _a2;
+                    var _a2, _b;
                     const selected = selectedValues.has(item.value);
                     const row = /* @__PURE__ */ jsxs(
                       "button",
@@ -21994,8 +22286,31 @@ var ShadcnMultiSelectVariant = React74.forwardRef(function ShadcnMultiSelectVari
                           }),
                           /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-start gap-2", children: [
                             item.icon && /* @__PURE__ */ jsx("span", { className: "mt-0.5 shrink-0", children: item.icon }),
-                            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-                              /* @__PURE__ */ jsx("span", { children: item.labelNode }),
+                            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+                              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-start gap-2", children: [
+                                /* @__PURE__ */ jsx("span", { className: "truncate", children: item.labelNode }),
+                                !!((_a2 = item.tags) == null ? void 0 : _a2.length) && /* @__PURE__ */ jsx("span", { className: "ml-auto flex shrink-0 flex-wrap gap-1", children: item.tags.map(
+                                  (tag, tagIndex) => /* @__PURE__ */ jsxs(
+                                    Badge,
+                                    {
+                                      className: cn(
+                                        "text-xs",
+                                        tag.className
+                                      ),
+                                      onClick: tag.onClick,
+                                      style: {
+                                        color: tag.color,
+                                        backgroundColor: tag.bgColor
+                                      },
+                                      children: [
+                                        tag.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: tag.icon }),
+                                        /* @__PURE__ */ jsx("span", { children: tag.label })
+                                      ]
+                                    },
+                                    tagIndex
+                                  )
+                                ) })
+                              ] }),
                               item.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: item.description })
                             ] })
                           ] })
@@ -22003,7 +22318,7 @@ var ShadcnMultiSelectVariant = React74.forwardRef(function ShadcnMultiSelectVari
                       },
                       item.key
                     );
-                    const renderer = (_a2 = item.render) != null ? _a2 : renderOption;
+                    const renderer = (_b = item.render) != null ? _b : renderOption;
                     if (!renderer) return row;
                     return renderer({
                       item,
@@ -23470,6 +23785,13 @@ var ShadcnTreeSelectVariant = React74.forwardRef(function ShadcnTreeSelectVarian
     optionDisabled,
     optionIcon,
     optionKey,
+    optionTags,
+    optionTagLabel,
+    optionTagIcon,
+    optionTagClassName,
+    optionTagColor,
+    optionTagBgColor,
+    optionTagOnClick,
     searchable = true,
     searchPlaceholder,
     emptyLabel,
@@ -23521,7 +23843,14 @@ var ShadcnTreeSelectVariant = React74.forwardRef(function ShadcnTreeSelectVarian
       optionDescription,
       optionDisabled,
       optionIcon,
-      optionKey
+      optionKey,
+      optionTags,
+      optionTagLabel,
+      optionTagIcon,
+      optionTagClassName,
+      optionTagColor,
+      optionTagBgColor,
+      optionTagOnClick
     }),
     [
       options,
@@ -23531,7 +23860,14 @@ var ShadcnTreeSelectVariant = React74.forwardRef(function ShadcnTreeSelectVarian
       optionDescription,
       optionDisabled,
       optionIcon,
-      optionKey
+      optionKey,
+      optionTags,
+      optionTagLabel,
+      optionTagIcon,
+      optionTagClassName,
+      optionTagColor,
+      optionTagBgColor,
+      optionTagOnClick
     ]
   );
   const allNodesFlat = React74.useMemo(() => flattenTree(tree), [tree]);
@@ -23621,9 +23957,16 @@ var ShadcnTreeSelectVariant = React74.forwardRef(function ShadcnTreeSelectVarian
         setOpen(false);
       }
       const nextSelectedValues = Array.isArray(nextValue) ? nextValue : nextValue !== void 0 && nextValue !== null ? [nextValue] : [];
+      const nextSelectedOptions = nextSelectedValues.map(
+        (val) => {
+          var _a, _b;
+          return (_b = (_a = allNodesFlat.find((node) => node.value === val)) == null ? void 0 : _a.raw) != null ? _b : val;
+        }
+      );
       const detail = {
         source: "variant",
         raw: item.raw,
+        selectedOptions: nextSelectedOptions,
         nativeEvent: void 0,
         meta: {
           toggled: item.value,
@@ -23638,7 +23981,8 @@ var ShadcnTreeSelectVariant = React74.forwardRef(function ShadcnTreeSelectVarian
       multiple,
       selectedValues,
       onValue,
-      toggleExpanded
+      toggleExpanded,
+      allNodesFlat
     ]
   );
   const handleClear = React74.useCallback(() => {
@@ -23646,6 +23990,7 @@ var ShadcnTreeSelectVariant = React74.forwardRef(function ShadcnTreeSelectVarian
     const detail = {
       source: "variant",
       raw: void 0,
+      selectedOptions: [],
       nativeEvent: void 0,
       meta: { action: "clear" }
     };
@@ -23818,7 +24163,7 @@ var ShadcnTreeSelectVariant = React74.forwardRef(function ShadcnTreeSelectVarian
         data: displayedNodes,
         computeItemKey: (_index, item) => item.key,
         itemContent: (index, item) => {
-          var _a;
+          var _a, _b;
           const selected = selectedValues.includes(item.value);
           const isExpanded = expanded.has(item.value);
           const parentInLeafOnly = leafOnly && item.hasChildren;
@@ -23877,14 +24222,35 @@ var ShadcnTreeSelectVariant = React74.forwardRef(function ShadcnTreeSelectVarian
                 ),
                 item.icon ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: item.icon }) : item.hasChildren ? isExpanded ? /* @__PURE__ */ jsx(FolderOpen, { className: "h-4 w-4 text-blue-400/80 fill-blue-400/20" }) : /* @__PURE__ */ jsx(Folder, { className: "h-4 w-4 text-blue-400/80 fill-blue-400/20" }) : /* @__PURE__ */ jsx(File2, { className: "h-4 w-4 text-muted-foreground/60" }),
                 /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
-                  /* @__PURE__ */ jsx("span", { className: "truncate font-medium leading-none", children: item.labelNode }),
+                  /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-start gap-2", children: [
+                    /* @__PURE__ */ jsx("span", { className: "truncate font-medium leading-none", children: item.labelNode }),
+                    !!((_a = item.tags) == null ? void 0 : _a.length) && /* @__PURE__ */ jsx("span", { className: "ml-auto flex shrink-0 flex-wrap gap-1", children: item.tags.map((tag, tagIndex) => /* @__PURE__ */ jsxs(
+                      Badge,
+                      {
+                        className: cn(
+                          "text-xs",
+                          tag.className
+                        ),
+                        onClick: tag.onClick,
+                        style: {
+                          color: tag.color,
+                          backgroundColor: tag.bgColor
+                        },
+                        children: [
+                          tag.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: tag.icon }),
+                          /* @__PURE__ */ jsx("span", { children: tag.label })
+                        ]
+                      },
+                      tagIndex
+                    )) })
+                  ] }),
                   item.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground truncate mt-0.5", children: item.description })
                 ] }),
                 !multiple && selected && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-primary ml-auto" })
               ]
             }
           );
-          const renderer = (_a = item.render) != null ? _a : renderOption;
+          const renderer = (_b = item.render) != null ? _b : renderOption;
           if (!renderer) {
             return /* @__PURE__ */ jsx(React74.Fragment, { children: optionNode }, item.key);
           }
@@ -25277,11 +25643,18 @@ function normalizeOption(input, {
   optionIcon,
   optionDisabled,
   optionTooltip,
-  optionMeta
+  optionMeta,
+  optionTags,
+  optionTagLabel,
+  optionTagIcon,
+  optionTagClassName,
+  optionTagColor,
+  optionTagBgColor,
+  optionTagOnClick
 }, autoCap) {
   var _a, _b, _c, _d, _e, _f;
   const anyInput = input;
-  if (optionValue || optionLabel || optionIcon || optionDisabled || optionTooltip || optionMeta) {
+  if (optionValue || optionLabel || optionIcon || optionDisabled || optionTooltip || optionMeta || optionTags || optionTagLabel || optionTagIcon || optionTagClassName || optionTagColor || optionTagBgColor || optionTagOnClick) {
     const rawValue = optionValue != null ? anyInput[optionValue] : (_a = anyInput.value) != null ? _a : input;
     const value2 = String(rawValue);
     let label2;
@@ -25299,6 +25672,24 @@ function normalizeOption(input, {
     const disabled = optionDisabled != null ? !!anyInput[optionDisabled] : !!anyInput.disabled;
     const tooltip = optionTooltip != null ? anyInput[optionTooltip] : (_c = anyInput.tooltip) != null ? _c : void 0;
     const meta = optionMeta != null ? anyInput[optionMeta] : (_d = anyInput.meta) != null ? _d : void 0;
+    const rawTags = optionTags != null ? anyInput[optionTags] : anyInput.tags;
+    const tags = Array.isArray(rawTags) ? rawTags.flatMap((tag) => {
+      const label3 = optionTagLabel != null ? tag == null ? void 0 : tag[optionTagLabel] : tag == null ? void 0 : tag.label;
+      if (label3 === void 0 || label3 === null || label3 === "") {
+        return [];
+      }
+      return [
+        {
+          label: label3,
+          icon: optionTagIcon != null ? tag == null ? void 0 : tag[optionTagIcon] : tag == null ? void 0 : tag.icon,
+          className: optionTagClassName != null ? tag == null ? void 0 : tag[optionTagClassName] : tag == null ? void 0 : tag.className,
+          color: optionTagColor != null ? tag == null ? void 0 : tag[optionTagColor] : tag == null ? void 0 : tag.color,
+          bgColor: optionTagBgColor != null ? tag == null ? void 0 : tag[optionTagBgColor] : tag == null ? void 0 : tag.bgColor,
+          onClick: optionTagOnClick != null ? tag == null ? void 0 : tag[optionTagOnClick] : tag == null ? void 0 : tag.onClick,
+          raw: tag
+        }
+      ];
+    }) : void 0;
     return {
       ui: {
         value: value2,
@@ -25306,7 +25697,8 @@ function normalizeOption(input, {
         icon,
         disabled,
         tooltip,
-        meta
+        meta,
+        tags
       },
       raw: input
     };
@@ -25338,7 +25730,8 @@ function normalizeOption(input, {
       icon: anyInput.icon,
       disabled: !!anyInput.disabled,
       tooltip: anyInput.tooltip,
-      meta: anyInput.meta
+      meta: anyInput.meta,
+      tags: Array.isArray(anyInput.tags) ? anyInput.tags : void 0
     },
     raw: input
   };
@@ -25363,6 +25756,13 @@ var ShadcnToggleVariant3 = React74.forwardRef(function ShadcnToggleVariant4(prop
     optionDisabled,
     optionTooltip,
     optionMeta,
+    optionTags,
+    optionTagLabel,
+    optionTagIcon,
+    optionTagClassName,
+    optionTagColor,
+    optionTagBgColor,
+    optionTagOnClick,
     renderOption,
     className,
     itemClassName,
@@ -25383,7 +25783,14 @@ var ShadcnToggleVariant3 = React74.forwardRef(function ShadcnToggleVariant4(prop
           optionIcon,
           optionDisabled,
           optionTooltip,
-          optionMeta
+          optionMeta,
+          optionTags,
+          optionTagLabel,
+          optionTagIcon,
+          optionTagClassName,
+          optionTagColor,
+          optionTagBgColor,
+          optionTagOnClick
         },
         autoCap
       )
@@ -25396,6 +25803,13 @@ var ShadcnToggleVariant3 = React74.forwardRef(function ShadcnToggleVariant4(prop
       optionDisabled,
       optionTooltip,
       optionMeta,
+      optionTags,
+      optionTagLabel,
+      optionTagIcon,
+      optionTagClassName,
+      optionTagColor,
+      optionTagBgColor,
+      optionTagOnClick,
       autoCap
     ]
   );
@@ -25419,6 +25833,7 @@ var ShadcnToggleVariant3 = React74.forwardRef(function ShadcnToggleVariant4(prop
         source: "variant",
         raw: rawSelection,
         // original item(s)
+        selectedOptions: Array.isArray(rawSelection) ? rawSelection : rawSelection === void 0 ? [] : [rawSelection],
         nativeEvent: void 0,
         meta: { action: "toggle" }
       };
@@ -25460,11 +25875,28 @@ var ShadcnToggleVariant3 = React74.forwardRef(function ShadcnToggleVariant4(prop
       style: groupStyle,
       "aria-invalid": !!error,
       children: normalizedOptions.map(({ ui: opt }) => {
+        var _a;
         const isSelected = multiple ? currentValue.includes(opt.value) : currentValue === opt.value;
-        const contentNode = renderOption ? renderOption(opt, isSelected) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 truncate", children: [
+        const contentNode = renderOption ? renderOption(opt, isSelected) : /* @__PURE__ */ jsx("div", { className: "flex flex-col items-start gap-1 truncate", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 items-start gap-2", children: [
           opt.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: opt.icon }),
-          /* @__PURE__ */ jsx("span", { className: "truncate", children: opt.label })
-        ] });
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: opt.label }),
+          !!((_a = opt.tags) == null ? void 0 : _a.length) && /* @__PURE__ */ jsx("span", { className: "ml-auto flex shrink-0 flex-wrap gap-1", children: opt.tags.map((tag, tagIndex) => /* @__PURE__ */ jsxs(
+            Badge,
+            {
+              className: cn("text-xs", tag.className),
+              onClick: tag.onClick,
+              style: {
+                color: tag.color,
+                backgroundColor: tag.bgColor
+              },
+              children: [
+                tag.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: tag.icon }),
+                /* @__PURE__ */ jsx("span", { children: tag.label })
+              ]
+            },
+            tagIndex
+          )) })
+        ] }) });
         const itemNode = /* @__PURE__ */ jsx(
           ToggleGroupItem,
           {
@@ -30198,7 +30630,7 @@ var ShadcnIconVariant = React74.forwardRef(function ShadcnIconVariant2(props, re
         PopoverContent,
         {
           className: cn(
-            "w-(--radix-popover-trigger-width) p-0",
+            "w-(--radix-popover-trigger-width) p-0 max-h-(--radix-popper-available-height)",
             popoverClassName
           ),
           align: "start",
@@ -31048,7 +31480,7 @@ var ShadcnImageIconVariant = React74.forwardRef(function ShadcnImageIconVariant2
         PopoverContent,
         {
           className: cn(
-            "w-(--radix-popover-trigger-width) p-0",
+            "w-(--radix-popover-trigger-width) p-0 max-h-(--radix-popper-available-height)",
             popoverClassName
           ),
           align: "start",