@scaleflex/ui-tw 0.0.151 → 0.0.153

package/button/button.types.d.ts

@@ -6,15 +6,15 @@ export type ButtonSizeType = (typeof ButtonSize)[keyof typeof ButtonSize];
 export type ButtonVariantType = (typeof ButtonVariant)[keyof typeof ButtonVariant];
 export interface ButtonProps extends ComponentProps<'button'>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
-    startIcon?: ReactElement;
-    endIcon?: ReactElement;
+    startIcon?: ReactElement | (() => ReactElement);
+    endIcon?: ReactElement | (() => ReactElement);
     loading?: boolean;
     disabled?: boolean;
 }
 export interface EndIconProps extends ComponentProps<'span'>, Pick<ButtonProps, 'size' | 'variant'> {
-    icon?: ReactElement;
+    icon?: ReactElement | (() => ReactElement);
 }
 export interface StartIconProps extends ComponentProps<'span'>, Pick<ButtonProps, 'size' | 'variant'> {
-    icon?: ReactElement;
+    icon?: ReactElement | (() => ReactElement);
     loading?: boolean;
 }

package/button/components/copy-button.js

@@ -1,12 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["textToCopy", "copiedMessage", "tooltipDuration", "onCopy", "children", "disabled"];
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { Button } from '@scaleflex/ui-tw/button';
 import { WithTooltip } from '@scaleflex/ui-tw/tooltip';
-import React, { useState } from 'react';
+import { useCopyToClipboard } from '@scaleflex/ui-tw/utils/use-copy-to-clipboard';
+import React from 'react';
 export function CopyButton(_ref) {
   var textToCopy = _ref.textToCopy,
     _ref$copiedMessage = _ref.copiedMessage,
@@ -17,62 +15,25 @@ export function CopyButton(_ref) {
     children = _ref.children,
     disabled = _ref.disabled,
     buttonProps = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    tooltipText = _useState2[0],
-    setTooltipText = _useState2[1];
-  var _useState3 = useState('default'),
-    _useState4 = _slicedToArray(_useState3, 2),
-    tooltipVariant = _useState4[0],
-    setTooltipVariant = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    open = _useState6[0],
-    setOpen = _useState6[1];
-  var handleCopy = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.prev = 0;
-            _context.next = 3;
-            return navigator.clipboard.writeText(textToCopy);
-          case 3:
-            setTooltipText(copiedMessage);
-            setTooltipVariant('success');
-            setOpen(true);
-            onCopy === null || onCopy === void 0 || onCopy();
-            setTimeout(function () {
-              setOpen(false);
-            }, tooltipDuration - 500);
-            setTimeout(function () {
-              setTooltipText('');
-              setTooltipVariant('default');
-            }, tooltipDuration);
-            _context.next = 14;
-            break;
-          case 11:
-            _context.prev = 11;
-            _context.t0 = _context["catch"](0);
-            console.error('Failed to copy', _context.t0);
-          case 14:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[0, 11]]);
-    }));
-    return function handleCopy() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+  var _useCopyToClipboard = useCopyToClipboard({
+      copiedMessage: copiedMessage,
+      tooltipDuration: tooltipDuration,
+      onCopy: onCopy
+    }),
+    tooltipText = _useCopyToClipboard.tooltipText,
+    tooltipVariant = _useCopyToClipboard.tooltipVariant,
+    open = _useCopyToClipboard.open,
+    handleCopy = _useCopyToClipboard.handleCopy;
   return /*#__PURE__*/React.createElement(WithTooltip, {
     content: tooltipText,
     variant: tooltipVariant,
-    open: open ? true : undefined
+    open: open || undefined
   }, /*#__PURE__*/React.createElement(Button, _extends({
     "data-slot": "copy-button",
     type: "button",
-    onClick: handleCopy,
+    onClick: function onClick() {
+      return handleCopy(textToCopy);
+    },
     disabled: disabled || !textToCopy
   }, buttonProps), children));
 }

package/button/components/copy-to-clipboard-button.d.ts

@@ -6,6 +6,7 @@ export interface CopyIconProps {
     size?: ButtonSizeType;
     initialTooltip?: string;
     copiedTooltip?: string;
+    tooltipDuration?: number;
 }
 /** @deprecated Use CopyIcon instead */
 export type CopyToClipboardButtonProps = CopyIconProps;

package/button/components/copy-to-clipboard-button.js

@@ -1,10 +1,8 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { Button, ButtonSize } from '@scaleflex/ui-tw/button';
 import { WithTooltip } from '@scaleflex/ui-tw/tooltip';
+import { useCopyToClipboard } from '@scaleflex/ui-tw/utils/use-copy-to-clipboard';
 import { Copy } from 'lucide-react';
-import React, { useState } from 'react';
+import React from 'react';
 
 /** @deprecated Use CopyIcon instead */
 
@@ -16,64 +14,30 @@ export function CopyIcon(props) {
     initialTooltip = _props$initialTooltip === void 0 ? 'Copy to clipboard' : _props$initialTooltip,
     _props$copiedTooltip = props.copiedTooltip,
     copiedTooltip = _props$copiedTooltip === void 0 ? 'Copied!' : _props$copiedTooltip,
+    _props$tooltipDuratio = props.tooltipDuration,
+    tooltipDuration = _props$tooltipDuratio === void 0 ? 2000 : _props$tooltipDuratio,
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled;
-  var _useState = useState(initialTooltip),
-    _useState2 = _slicedToArray(_useState, 2),
-    tooltipText = _useState2[0],
-    setTooltipText = _useState2[1];
-  var _useState3 = useState('default'),
-    _useState4 = _slicedToArray(_useState3, 2),
-    tooltipVariant = _useState4[0],
-    setTooltipVariant = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    open = _useState6[0],
-    setOpen = _useState6[1];
-  var handleCopy = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.prev = 0;
-            _context.next = 3;
-            return navigator.clipboard.writeText(text);
-          case 3:
-            setTooltipText(copiedTooltip);
-            setTooltipVariant('success');
-            setOpen(true);
-            setTimeout(function () {
-              setOpen(false);
-            }, 1500);
-            setTimeout(function () {
-              setTooltipText(initialTooltip);
-              setTooltipVariant('default');
-            }, 2000);
-            _context.next = 13;
-            break;
-          case 10:
-            _context.prev = 10;
-            _context.t0 = _context["catch"](0);
-            console.error('Failed to copy', _context.t0);
-          case 13:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[0, 10]]);
-    }));
-    return function handleCopy() {
-      return _ref.apply(this, arguments);
-    };
-  }();
+  var _useCopyToClipboard = useCopyToClipboard({
+      copiedMessage: copiedTooltip,
+      tooltipDuration: tooltipDuration,
+      initialTooltipText: initialTooltip
+    }),
+    tooltipText = _useCopyToClipboard.tooltipText,
+    tooltipVariant = _useCopyToClipboard.tooltipVariant,
+    open = _useCopyToClipboard.open,
+    handleCopy = _useCopyToClipboard.handleCopy;
   return /*#__PURE__*/React.createElement(WithTooltip, {
     content: tooltipText,
     variant: tooltipVariant,
-    open: open ? true : undefined
+    open: open || undefined
   }, /*#__PURE__*/React.createElement(Button, {
     type: "button",
     variant: "ghost-secondary",
     size: size,
-    onClick: handleCopy,
+    onClick: function onClick() {
+      return handleCopy(text);
+    },
     disabled: disabled || !text
   }, /*#__PURE__*/React.createElement(Copy, null)));
 }

package/button/components/end-icon.js

@@ -18,6 +18,9 @@ var EndIcon = function EndIcon(props) {
     variant = props.variant,
     rest = _objectWithoutProperties(props, _excluded);
   if (!icon) return null;
+  if (typeof icon === 'function') {
+    return icon();
+  }
   return /*#__PURE__*/cloneElement(icon, _objectSpread({
     className: endIconVariants({
       size: size,

package/button/components/start-icon.js

@@ -22,15 +22,21 @@ var StartIcon = function StartIcon(props) {
     loading = _props$loading === void 0 ? false : _props$loading,
     rest = _objectWithoutProperties(props, _excluded);
   if (!icon) return null;
-  return loading ? /*#__PURE__*/React.createElement(SpinnerIcon, {
-    className: cn(startIconVariants({
-      size: size
-    }), 'animate-spin')
-  }) : (/*#__PURE__*/cloneElement(icon, _objectSpread({
+  if (loading) {
+    return /*#__PURE__*/React.createElement(SpinnerIcon, {
+      className: cn(startIconVariants({
+        size: size
+      }), 'animate-spin')
+    });
+  }
+  if (typeof icon === 'function') {
+    return icon();
+  }
+  return /*#__PURE__*/cloneElement(icon, _objectSpread({
     className: startIconVariants({
       variant: variant,
       size: size
     })
-  }, rest)));
+  }, rest));
 };
 export { StartIcon, startIconVariants };

package/color-picker/color-picker.component.js

@@ -27,6 +27,9 @@ function ColorPicker(_ref) {
     _ref$displayAsInput = _ref.displayAsInput,
     displayAsInput = _ref$displayAsInput === void 0 ? false : _ref$displayAsInput,
     overlayClassName = _ref.overlayClassName;
+  var resolvedTitle = typeof title === 'function' ? title() : title;
+  var resolvedCancelLabel = typeof cancelLabel === 'function' ? cancelLabel() : cancelLabel;
+  var resolvedSelectLabel = typeof selectLabel === 'function' ? selectLabel() : selectLabel;
   var _useState = useState(value),
     _useState2 = _slicedToArray(_useState, 2),
     tempValue = _useState2[0],
@@ -77,7 +80,7 @@ function ColorPicker(_ref) {
     variant: "centered",
     className: cn('w-[316px]', className),
     overlayClassName: overlayClassName
-  }, /*#__PURE__*/React.createElement(DialogHeader, null, /*#__PURE__*/React.createElement(DialogIcon, null, /*#__PURE__*/React.createElement(PaletteIcon, null)), /*#__PURE__*/React.createElement(DialogTitle, null, title || 'Pick color')), /*#__PURE__*/React.createElement(DialogBody, {
+  }, /*#__PURE__*/React.createElement(DialogHeader, null, /*#__PURE__*/React.createElement(DialogIcon, null, /*#__PURE__*/React.createElement(PaletteIcon, null)), /*#__PURE__*/React.createElement(DialogTitle, null, resolvedTitle || 'Pick color')), /*#__PURE__*/React.createElement(DialogBody, {
     className: "space-y-4"
   }, /*#__PURE__*/React.createElement(HexColorPicker, {
     color: tempValue,
@@ -107,11 +110,11 @@ function ColorPicker(_ref) {
     variant: "outline",
     className: "flex-1",
     onClick: handleCancel
-  }, cancelLabel || 'Cancel')), /*#__PURE__*/React.createElement(DialogTrigger, {
+  }, resolvedCancelLabel || 'Cancel')), /*#__PURE__*/React.createElement(DialogTrigger, {
     asChild: true
   }, /*#__PURE__*/React.createElement(Button, {
     className: "flex-1",
     onClick: handleSelect
-  }, selectLabel || 'Select')))));
+  }, resolvedSelectLabel || 'Select')))));
 }
 export { ColorPicker };

package/color-picker/color-picker.types.d.ts

@@ -7,12 +7,12 @@ export type ColorPickerProps = {
     inputTriggerProps?: InputHTMLAttributes<HTMLInputElement>;
     className?: string;
     overlayClassName?: string;
-    title?: string | ReactElement;
-    cancelLabel?: string | ReactElement;
-    selectLabel?: string | ReactElement;
+    title?: string | ReactElement | (() => ReactElement);
+    cancelLabel?: string | ReactElement | (() => ReactElement);
+    selectLabel?: string | ReactElement | (() => ReactElement);
     inputClassName?: string;
     children?: ReactNode;
-    placeholder?: ReactElement | string;
+    placeholder?: string;
     presetColors?: string[];
     displayAsInput?: boolean;
 };

package/combobox/combobox-multi-checkbox/combobox-multi-checkbox.component.js

@@ -45,6 +45,7 @@ export function ComboboxMultiCheckbox(_ref) {
     _ref$displayCount = _ref.displayCount,
     displayCount = _ref$displayCount === void 0 ? false : _ref$displayCount,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var resolvedLabel = typeof label === 'function' ? label() : label;
   var _useState = useState(defaultOpen),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -58,7 +59,8 @@ export function ComboboxMultiCheckbox(_ref) {
         var option = _step.value;
         if (isOptionGroup(option)) {
           if (option.value && selectedValue.includes(option.value)) {
-            labels.push(option.label);
+            var l = typeof option.label === 'function' ? option.label() : option.label;
+            labels.push(l);
           }
           var _iterator2 = _createForOfIteratorHelper(option.options),
             _step2;
@@ -66,7 +68,8 @@ export function ComboboxMultiCheckbox(_ref) {
             for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
               var sub = _step2.value;
               if (selectedValue.includes(sub.value)) {
-                labels.push(sub.label);
+                var _l = typeof sub.label === 'function' ? sub.label() : sub.label;
+                labels.push(_l);
               }
             }
           } catch (err) {
@@ -76,7 +79,8 @@ export function ComboboxMultiCheckbox(_ref) {
           }
         } else {
           if (selectedValue.includes(option.value)) {
-            labels.push(option.label);
+            var _l2 = typeof option.label === 'function' ? option.label() : option.label;
+            labels.push(_l2);
           }
         }
       }
@@ -173,7 +177,7 @@ export function ComboboxMultiCheckbox(_ref) {
   }, /*#__PURE__*/React.createElement(ComboboxCheckboxTrigger, {
     open: open,
     icon: icon,
-    label: label,
+    label: resolvedLabel,
     disabled: disabled,
     className: className,
     size: size,

package/combobox/combobox-multi-inline/combobox-multi-inline.component.js

@@ -53,7 +53,8 @@ export function ComboboxMultiInline(_ref) {
         var option = _step.value;
         if (isOptionGroup(option)) {
           if (option.value && value.includes(option.value)) {
-            labels.push(option.label);
+            var label = typeof option.label === 'function' ? option.label() : option.label;
+            labels.push(label);
           }
           var _iterator2 = _createForOfIteratorHelper(option.options),
             _step2;
@@ -61,7 +62,8 @@ export function ComboboxMultiInline(_ref) {
             for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
               var sub = _step2.value;
               if (value.includes(sub.value)) {
-                labels.push(sub.label);
+                var _label = typeof sub.label === 'function' ? sub.label() : sub.label;
+                labels.push(_label);
               }
             }
           } catch (err) {
@@ -71,7 +73,8 @@ export function ComboboxMultiInline(_ref) {
           }
         } else {
           if (value.includes(option.value)) {
-            labels.push(option.label);
+            var _label2 = typeof option.label === 'function' ? option.label() : option.label;
+            labels.push(_label2);
           }
         }
       }

package/combobox/combobox-multi-tag/combobox-multi-tag.component.js

@@ -114,7 +114,7 @@ export function ComboboxMultiTag(_ref) {
           isTriggerOnBlur: true
         });
       }
-    }, option.label);
+    }, typeof option.label === 'function' ? option.label() : option.label);
   })), isSelected ? /*#__PURE__*/React.createElement("div", {
     className: "flex w-full items-center justify-between p-1.5"
   }, /*#__PURE__*/React.createElement("div", {

package/combobox/combobox-single/combobox-single.component.js

@@ -50,13 +50,13 @@ export function ComboboxSingle(_ref) {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
         var option = _step.value;
         if (isOptionGroup(option)) {
-          if (option.value === value) return option.label;
+          if (option.value === value) return typeof option.label === 'function' ? option.label() : option.label;
           var found = option.options.find(function (o) {
             return o.value === value;
           });
-          if (found) return found.label;
+          if (found) return typeof found.label === 'function' ? found.label() : found.label;
         } else if (option.value === value) {
-          return option.label;
+          return typeof option.label === 'function' ? option.label() : option.label;
         }
       }
     } catch (err) {

package/combobox/combobox-users/combobox-users.component.js

@@ -152,7 +152,7 @@ export function ComboboxUsers(_ref) {
       alt: "profile image"
     }) : /*#__PURE__*/React.createElement(UserCircle2Icon, {
       className: "text-muted-foreground size-5"
-    }), /*#__PURE__*/React.createElement("span", null, option.email)));
+    }), /*#__PURE__*/React.createElement("span", null, typeof option.email === 'function' ? option.email() : option.email)));
   })), isSelected ? /*#__PURE__*/React.createElement("div", {
     className: "flex w-full items-center justify-between p-1.5"
   }, /*#__PURE__*/React.createElement("div", {
@@ -181,9 +181,10 @@ export function ComboboxUsers(_ref) {
     className: "border-0 border-none"
   }), /*#__PURE__*/React.createElement(CommandList, null, /*#__PURE__*/React.createElement(CommandEmpty, null, "No results found."), options === null || options === void 0 ? void 0 : options.map(function (option, groupIndex) {
     if (isUserOptionGroup(option)) {
+      var resolvedGroupLabel = typeof option.label === 'function' ? option.label() : option.label;
       return /*#__PURE__*/React.createElement(CommandGroup, {
         key: groupIndex,
-        heading: !option.value ? option.label : undefined,
+        heading: !option.value ? resolvedGroupLabel : undefined,
         size: size
       }, option.value && /*#__PURE__*/React.createElement(CommandItem, {
         size: size,
@@ -202,26 +203,26 @@ export function ComboboxUsers(_ref) {
         className: cn('text-secondary-foreground', selectLabelVariants({
           size: size
         }))
-      }, option.label), option.options.map(function (_ref3) {
+      }, resolvedGroupLabel), option.options.map(function (_ref3) {
         var name = _ref3.name,
           email = _ref3.email,
           profileUrl = _ref3.profileUrl,
-          value = _ref3.value,
+          subValue = _ref3.value,
           disabled = _ref3.disabled;
-        var isGroupSelected = option.value && Array.isArray(value) && value.includes(option.value);
+        var isGroupSelected = option.value && value.includes(option.value);
         return /*#__PURE__*/React.createElement(CommandUserItem, {
           size: size,
           multiple: true,
           disabled: disabled || !!isGroupSelected,
-          key: value,
+          key: subValue,
           name: name,
           email: email,
           profileUrl: profileUrl,
-          value: value,
+          value: subValue,
           isGroup: !!option.label,
           selectedValue: value,
           onSelect: function onSelect() {
-            return toggleValue(value);
+            return toggleValue(subValue);
           }
         });
       }), showGroupSeparator && groupIndex !== options.length - 1 && /*#__PURE__*/React.createElement(SelectSeparator, null));

package/combobox/combobox.component.js

@@ -196,7 +196,7 @@ export function ComboboxContent(_ref4) {
     selectedValue = _ref4.value,
     _onSelect = _ref4.onSelect,
     _ref4$size = _ref4.size,
-    size = _ref4$size === void 0 ? 'md' : _ref4$size,
+    size = _ref4$size === void 0 ? FormSize.Md : _ref4$size,
     _ref4$multiple = _ref4.multiple,
     multiple = _ref4$multiple === void 0 ? false : _ref4$multiple,
     className = _ref4.className,
@@ -217,11 +217,11 @@ export function ComboboxContent(_ref4) {
     placeholder: searchPlaceholder,
     className: "border-0 border-none"
   }), /*#__PURE__*/React.createElement(CommandList, null, /*#__PURE__*/React.createElement(CommandEmpty, null, "No results found."), options === null || options === void 0 ? void 0 : options.map(function (option, groupIndex) {
-    var _option$optionLabel;
     if (isOptionGroup(option)) {
+      var resolvedGroupLabel = typeof option.label === 'function' ? option.label() : option.label;
       return /*#__PURE__*/React.createElement(CommandGroup, {
         key: groupIndex,
-        heading: !option.value || noGroupSelection ? option.label : undefined,
+        heading: !option.value || noGroupSelection ? resolvedGroupLabel : undefined,
         size: size
       }, !noGroupSelection && option.value && /*#__PURE__*/React.createElement(CommandItem, {
         size: size,
@@ -240,7 +240,7 @@ export function ComboboxContent(_ref4) {
         className: cn('text-secondary-foreground', selectLabelVariants({
           size: size
         }))
-      }, option.label), option.options.map(function (_ref5) {
+      }, resolvedGroupLabel), option.options.map(function (_ref5) {
         var label = _ref5.label,
           optionLabel = _ref5.optionLabel,
           value = _ref5.value,
@@ -248,6 +248,8 @@ export function ComboboxContent(_ref4) {
           icon = _ref5.icon,
           tooltip = _ref5.tooltip,
           disabledTooltip = _ref5.disabledTooltip;
+        var resolvedLabel = typeof label === 'function' ? label() : label;
+        var resolvedOptionLabel = typeof optionLabel === 'function' ? optionLabel() : optionLabel;
         var isGroupSelected = !noGroupSelection && multiple && option.value && Array.isArray(selectedValue) && selectedValue.includes(option.value);
         return /*#__PURE__*/React.createElement(CommandItem, {
           size: size,
@@ -258,14 +260,17 @@ export function ComboboxContent(_ref4) {
           value: value,
           tooltip: tooltip,
           disabledTooltip: disabledTooltip,
-          isGroup: !!option.label,
+          isGroup: !!resolvedGroupLabel,
           selectedValue: selectedValue,
           onSelect: function onSelect() {
             return _onSelect(value);
-          }
-        }, optionLabel !== null && optionLabel !== void 0 ? optionLabel : label);
+          },
+          labelTooltip: resolvedOptionLabel && typeof resolvedLabel === 'string' ? resolvedLabel : undefined
+        }, resolvedOptionLabel !== null && resolvedOptionLabel !== void 0 ? resolvedOptionLabel : resolvedLabel);
       }), showGroupSeparator && groupIndex !== options.length - 1 && /*#__PURE__*/React.createElement(SelectSeparator, null));
     }
+    var resolvedLabel = typeof option.label === 'function' ? option.label() : option.label;
+    var resolvedOptionLabel = typeof option.optionLabel === 'function' ? option.optionLabel() : option.optionLabel;
     return /*#__PURE__*/React.createElement(CommandGroup, {
       key: groupIndex
     }, /*#__PURE__*/React.createElement(CommandItem, {
@@ -280,8 +285,9 @@ export function ComboboxContent(_ref4) {
       selectedValue: selectedValue,
       onSelect: function onSelect() {
         return _onSelect(option.value);
-      }
-    }, (_option$optionLabel = option.optionLabel) !== null && _option$optionLabel !== void 0 ? _option$optionLabel : option.label));
+      },
+      labelTooltip: resolvedOptionLabel && typeof resolvedLabel === 'string' ? resolvedLabel : undefined
+    }, resolvedOptionLabel !== null && resolvedOptionLabel !== void 0 ? resolvedOptionLabel : resolvedLabel));
   }), !fixedActions && /*#__PURE__*/React.createElement(SelectActions, {
     actions: actions
   })), fixedActions && /*#__PURE__*/React.createElement(SelectActions, {
@@ -293,7 +299,7 @@ export function ComboboxCheckboxContent(_ref6) {
     selectedValue = _ref6.value,
     _onSelect2 = _ref6.onSelect,
     _ref6$size = _ref6.size,
-    size = _ref6$size === void 0 ? 'md' : _ref6$size,
+    size = _ref6$size === void 0 ? FormSize.Md : _ref6$size,
     className = _ref6.className,
     _ref6$showGroupSepara = _ref6.showGroupSeparator,
     showGroupSeparator = _ref6$showGroupSepara === void 0 ? false : _ref6$showGroupSepara,
@@ -310,11 +316,11 @@ export function ComboboxCheckboxContent(_ref6) {
     placeholder: searchPlaceholder,
     className: "border-0 border-none"
   }), /*#__PURE__*/React.createElement(CommandList, null, /*#__PURE__*/React.createElement(CommandEmpty, null, "No results found."), options === null || options === void 0 ? void 0 : options.map(function (option, groupIndex) {
-    var _option$optionLabel2;
     if (isOptionGroup(option)) {
+      var resolvedGroupLabel = typeof option.label === 'function' ? option.label() : option.label;
       return /*#__PURE__*/React.createElement(CommandGroup, {
         key: groupIndex,
-        heading: !option.value ? option.label : undefined,
+        heading: !option.value ? resolvedGroupLabel : undefined,
         size: size
       }, option.value && /*#__PURE__*/React.createElement(CommandCheckboxItem, {
         size: size,
@@ -332,7 +338,7 @@ export function ComboboxCheckboxContent(_ref6) {
         className: cn('text-secondary-foreground', selectLabelVariants({
           size: size
         }))
-      }, option.label), option.options.map(function (_ref7) {
+      }, resolvedGroupLabel), option.options.map(function (_ref7) {
         var label = _ref7.label,
           optionLabel = _ref7.optionLabel,
           value = _ref7.value,
@@ -340,6 +346,8 @@ export function ComboboxCheckboxContent(_ref6) {
           icon = _ref7.icon,
           tooltip = _ref7.tooltip,
           disabledTooltip = _ref7.disabledTooltip;
+        var resolvedLabel = typeof label === 'function' ? label() : label;
+        var resolvedOptionLabel = typeof optionLabel === 'function' ? optionLabel() : optionLabel;
         var isGroupSelected = option.value && Array.isArray(selectedValue) && selectedValue.includes(option.value);
         return /*#__PURE__*/React.createElement(CommandCheckboxItem, {
           size: size,
@@ -349,14 +357,17 @@ export function ComboboxCheckboxContent(_ref6) {
           value: value,
           tooltip: tooltip,
           disabledTooltip: disabledTooltip,
-          isGroup: !!option.label,
+          isGroup: !!resolvedGroupLabel,
           selectedValue: selectedValue,
           onSelect: function onSelect() {
             return _onSelect2(value);
-          }
-        }, optionLabel !== null && optionLabel !== void 0 ? optionLabel : label);
+          },
+          labelTooltip: resolvedOptionLabel && typeof resolvedLabel === 'string' ? resolvedLabel : undefined
+        }, resolvedOptionLabel !== null && resolvedOptionLabel !== void 0 ? resolvedOptionLabel : resolvedLabel);
       }), showGroupSeparator && groupIndex !== options.length - 1 && /*#__PURE__*/React.createElement(SelectSeparator, null));
     }
+    var resolvedLabel = typeof option.label === 'function' ? option.label() : option.label;
+    var resolvedOptionLabel = typeof option.optionLabel === 'function' ? option.optionLabel() : option.optionLabel;
     return /*#__PURE__*/React.createElement(CommandGroup, {
       key: groupIndex
     }, /*#__PURE__*/React.createElement(CommandCheckboxItem, {
@@ -370,8 +381,9 @@ export function ComboboxCheckboxContent(_ref6) {
       selectedValue: selectedValue,
       onSelect: function onSelect() {
         return _onSelect2(option.value);
-      }
-    }, (_option$optionLabel2 = option.optionLabel) !== null && _option$optionLabel2 !== void 0 ? _option$optionLabel2 : option.label));
+      },
+      labelTooltip: resolvedOptionLabel && typeof resolvedLabel === 'string' ? resolvedLabel : undefined
+    }, resolvedOptionLabel !== null && resolvedOptionLabel !== void 0 ? resolvedOptionLabel : resolvedLabel));
   }), !fixedActions && /*#__PURE__*/React.createElement(SelectActions, {
     actions: actions
   })), fixedActions && /*#__PURE__*/React.createElement(SelectActions, {

package/combobox/combobox.types.d.ts

@@ -25,7 +25,7 @@ export type ComboboxTriggerProps = {
 export type ComboboxCheckboxTriggerProps = ComboboxTriggerProps & {
     optionsLength: number;
     selectedLength: number;
-    label?: ReactNode | string;
+    label?: ReactNode;
     displayCount?: boolean;
     icon?: ElementType;
     iconClassName?: string;
@@ -61,20 +61,21 @@ export interface CommandGroupProps extends ComponentProps<typeof CommandPrimitiv
     size?: FormSizeType;
 }
 export interface CommandItemProps extends ComponentProps<typeof CommandPrimitive.Item> {
-    icon?: ReactElement;
+    icon?: ReactElement | (() => ReactElement);
     size?: FormSizeType;
-    tooltip?: ReactElement | string;
-    disabledTooltip?: ReactElement | string;
+    tooltip?: ReactElement | string | (() => ReactElement);
+    disabledTooltip?: ReactElement | string | (() => ReactElement);
     isGroup?: boolean;
-    shortcut?: ReactElement | string;
+    shortcut?: ReactElement | string | (() => ReactElement);
     selectedValue?: string | string[];
     multiple?: boolean;
     iconClassName?: string;
     textClassName?: string;
+    labelTooltip?: string;
 }
 export interface CommandUserItemProps extends Omit<CommandItemProps, 'icon' | 'children' | 'tooltip' | 'disabledTooltip'> {
-    name: ReactElement | string;
-    email: ReactElement | string;
+    name: ReactElement | string | (() => ReactElement);
+    email: ReactElement | string | (() => ReactElement);
     profileUrl?: string;
 }
 interface ComboboxCommonProps {
@@ -110,7 +111,7 @@ export interface ComboboxMultiInlineProps extends ComboboxCommonProps {
 export interface ComboboxMultiCheckboxProps extends ComboboxCommonProps {
     value: string[];
     onChange: (value: string[]) => void;
-    label?: ReactElement | string;
+    label?: ReactElement | string | (() => ReactElement);
     displayCount?: boolean;
     iconClassName?: string;
     icon?: ElementType;