@timeax/form-palette 0.1.29 → 0.1.30

package/dist/index.mjs

@@ -20411,6 +20411,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
@@ -20471,6 +20503,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);
@@ -20508,6 +20568,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),
@@ -20517,6 +20578,7 @@ function normalizeOne(raw, index, config) {
     description,
     disabled,
     icon,
+    tags,
     render,
     raw
   };
@@ -20527,7 +20589,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;
@@ -20536,6 +20598,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),
@@ -20543,6 +20606,7 @@ function globalNormalizeCheckBasedOptions(item, index, optionLabelKey, optionVal
     label: rawLabel,
     description,
     disabled,
+    tags,
     render,
     raw: item
   };
@@ -20618,7 +20682,7 @@ 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),
@@ -20636,7 +20700,16 @@ function normalizeItems(items, mappers, optionValueKey, optionLabelKey) {
           item,
           index,
           optionLabelKey,
-          optionValueKey
+          optionValueKey,
+          {
+            optionTags: optionTagsKey,
+            optionTagLabel,
+            optionTagIcon,
+            optionTagClassName,
+            optionTagColor,
+            optionTagBgColor,
+            optionTagOnClick
+          }
         ),
         raw: item
       };
@@ -20674,6 +20747,13 @@ var InnerShadcnRadioVariant = (props, ref) => {
     mappers,
     optionValue,
     optionLabel,
+    optionTags,
+    optionTagLabel,
+    optionTagIcon,
+    optionTagClassName,
+    optionTagColor,
+    optionTagBgColor,
+    optionTagOnClick,
     renderOption,
     layout = "list",
     columns = 2,
@@ -20702,9 +20782,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 = React66.useMemo(() => {
     if (value === void 0) return void 0;
@@ -20774,7 +20875,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;
@@ -20838,7 +20939,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 })
                   ] })
                 ]
@@ -20969,7 +21088,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) => ({
@@ -20989,7 +21108,16 @@ function normalizeItems2(items, mappers, optionValueKey, optionLabelKey) {
         item,
         index,
         optionLabelKey,
-        optionValueKey
+        optionValueKey,
+        {
+          optionTags: optionTagsKey,
+          optionTagLabel,
+          optionTagIcon,
+          optionTagClassName,
+          optionTagColor,
+          optionTagBgColor,
+          optionTagOnClick
+        }
       );
       const tristate = anyItem.tristate;
       return {
@@ -21059,6 +21187,13 @@ var InnerShadcnCheckboxVariant = (props, ref) => {
     mappers,
     optionValue,
     optionLabel,
+    optionTags,
+    optionTagLabel,
+    optionTagIcon,
+    optionTagClassName,
+    optionTagColor,
+    optionTagBgColor,
+    optionTagOnClick,
     renderOption,
     single,
     tristate: tristateDefault,
@@ -21091,9 +21226,29 @@ var InnerShadcnCheckboxVariant = (props, ref) => {
       items != null ? items : options,
       mappers,
       optionValue,
-      optionLabel
+      optionLabel,
+      optionTags,
+      optionTagLabel,
+      optionTagIcon,
+      optionTagClassName,
+      optionTagColor,
+      optionTagBgColor,
+      optionTagOnClick
     ),
-    [items, options, mappers, optionValue, optionLabel]
+    [
+      items,
+      options,
+      mappers,
+      optionValue,
+      optionLabel,
+      optionTags,
+      optionTagLabel,
+      optionTagIcon,
+      optionTagClassName,
+      optionTagColor,
+      optionTagBgColor,
+      optionTagOnClick
+    ]
   );
   if (isSingle) {
     const singleVal = asSingleValue(value);
@@ -21307,7 +21462,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;
@@ -21395,16 +21550,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 })
                     ] })
                   ]
@@ -21484,6 +21658,13 @@ var ShadcnSelectVariant = React66.forwardRef(function ShadcnSelectVariant2(props
     optionDisabled,
     optionIcon,
     optionKey,
+    optionTags,
+    optionTagLabel,
+    optionTagIcon,
+    optionTagClassName,
+    optionTagColor,
+    optionTagBgColor,
+    optionTagOnClick,
     searchable,
     searchPlaceholder,
     emptyLabel,
@@ -21527,7 +21708,14 @@ var ShadcnSelectVariant = React66.forwardRef(function ShadcnSelectVariant2(props
       optionDescription,
       optionDisabled,
       optionKey,
-      optionIcon
+      optionIcon,
+      optionTags,
+      optionTagLabel,
+      optionTagIcon,
+      optionTagClassName,
+      optionTagColor,
+      optionTagBgColor,
+      optionTagOnClick
     }),
     [
       options,
@@ -21537,7 +21725,14 @@ var ShadcnSelectVariant = React66.forwardRef(function ShadcnSelectVariant2(props
       optionDescription,
       optionDisabled,
       optionKey,
-      optionIcon
+      optionIcon,
+      optionTags,
+      optionTagLabel,
+      optionTagIcon,
+      optionTagClassName,
+      optionTagColor,
+      optionTagBgColor,
+      optionTagOnClick
     ]
   );
   const normalizedValue = value === "" || value == null ? void 0 : value;
@@ -21777,7 +21972,7 @@ var ShadcnSelectVariant = React66.forwardRef(function ShadcnSelectVariant2(props
                   data: filteredItems,
                   computeItemKey: (_index, item) => item.key,
                   itemContent: (index, item) => {
-                    var _a2;
+                    var _a2, _b2;
                     const optionNode = /* @__PURE__ */ jsx(
                       SelectItem,
                       {
@@ -21785,15 +21980,38 @@ var ShadcnSelectVariant = React66.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,
@@ -21812,7 +22030,7 @@ var ShadcnSelectVariant = React66.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,
                 {
@@ -21820,15 +22038,38 @@ var ShadcnSelectVariant = React66.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,
@@ -21978,38 +22219,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"));
@@ -22199,6 +22408,13 @@ var ShadcnMultiSelectVariant = React66.forwardRef(function ShadcnMultiSelectVari
     optionDisabled,
     optionIcon,
     optionKey,
+    optionTags,
+    optionTagLabel,
+    optionTagIcon,
+    optionTagClassName,
+    optionTagColor,
+    optionTagBgColor,
+    optionTagOnClick,
     searchable,
     searchPlaceholder,
     emptySearchText,
@@ -22247,7 +22463,14 @@ var ShadcnMultiSelectVariant = React66.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") };
   }, [
@@ -22258,7 +22481,14 @@ var ShadcnMultiSelectVariant = React66.forwardRef(function ShadcnMultiSelectVari
     optionDescription,
     optionDisabled,
     optionKey,
-    optionIcon
+    optionIcon,
+    optionTags,
+    optionTagLabel,
+    optionTagIcon,
+    optionTagClassName,
+    optionTagColor,
+    optionTagBgColor,
+    optionTagOnClick
   ]);
   const selectedValues = React66.useMemo(
     () => new Set(value != null ? value : []),
@@ -22676,7 +22906,7 @@ var ShadcnMultiSelectVariant = React66.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",
@@ -22700,8 +22930,31 @@ var ShadcnMultiSelectVariant = React66.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 })
                             ] })
                           ] })
@@ -22709,7 +22962,7 @@ var ShadcnMultiSelectVariant = React66.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,
@@ -24176,6 +24429,13 @@ var ShadcnTreeSelectVariant = React66.forwardRef(function ShadcnTreeSelectVarian
     optionDisabled,
     optionIcon,
     optionKey,
+    optionTags,
+    optionTagLabel,
+    optionTagIcon,
+    optionTagClassName,
+    optionTagColor,
+    optionTagBgColor,
+    optionTagOnClick,
     searchable = true,
     searchPlaceholder,
     emptyLabel,
@@ -24227,7 +24487,14 @@ var ShadcnTreeSelectVariant = React66.forwardRef(function ShadcnTreeSelectVarian
       optionDescription,
       optionDisabled,
       optionIcon,
-      optionKey
+      optionKey,
+      optionTags,
+      optionTagLabel,
+      optionTagIcon,
+      optionTagClassName,
+      optionTagColor,
+      optionTagBgColor,
+      optionTagOnClick
     }),
     [
       options,
@@ -24237,7 +24504,14 @@ var ShadcnTreeSelectVariant = React66.forwardRef(function ShadcnTreeSelectVarian
       optionDescription,
       optionDisabled,
       optionIcon,
-      optionKey
+      optionKey,
+      optionTags,
+      optionTagLabel,
+      optionTagIcon,
+      optionTagClassName,
+      optionTagColor,
+      optionTagBgColor,
+      optionTagOnClick
     ]
   );
   const allNodesFlat = React66.useMemo(() => flattenTree(tree), [tree]);
@@ -24533,7 +24807,7 @@ var ShadcnTreeSelectVariant = React66.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;
@@ -24592,14 +24866,35 @@ var ShadcnTreeSelectVariant = React66.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(React66.Fragment, { children: optionNode }, item.key);
           }
@@ -25992,11 +26287,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;
@@ -26014,6 +26316,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,
@@ -26021,7 +26341,8 @@ function normalizeOption(input, {
         icon,
         disabled,
         tooltip,
-        meta
+        meta,
+        tags
       },
       raw: input
     };
@@ -26053,7 +26374,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
   };
@@ -26078,6 +26400,13 @@ var ShadcnToggleVariant3 = React66.forwardRef(function ShadcnToggleVariant4(prop
     optionDisabled,
     optionTooltip,
     optionMeta,
+    optionTags,
+    optionTagLabel,
+    optionTagIcon,
+    optionTagClassName,
+    optionTagColor,
+    optionTagBgColor,
+    optionTagOnClick,
     renderOption,
     className,
     itemClassName,
@@ -26098,7 +26427,14 @@ var ShadcnToggleVariant3 = React66.forwardRef(function ShadcnToggleVariant4(prop
           optionIcon,
           optionDisabled,
           optionTooltip,
-          optionMeta
+          optionMeta,
+          optionTags,
+          optionTagLabel,
+          optionTagIcon,
+          optionTagClassName,
+          optionTagColor,
+          optionTagBgColor,
+          optionTagOnClick
         },
         autoCap
       )
@@ -26111,6 +26447,13 @@ var ShadcnToggleVariant3 = React66.forwardRef(function ShadcnToggleVariant4(prop
       optionDisabled,
       optionTooltip,
       optionMeta,
+      optionTags,
+      optionTagLabel,
+      optionTagIcon,
+      optionTagClassName,
+      optionTagColor,
+      optionTagBgColor,
+      optionTagOnClick,
       autoCap
     ]
   );
@@ -26176,11 +26519,28 @@ var ShadcnToggleVariant3 = React66.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,
           {