@scaleflex/ui-tw 0.0.152 → 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/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;

package/command/command.component.d.ts

@@ -14,8 +14,8 @@ declare function CommandList({ className, ...props }: ComponentProps<typeof Comm
 declare function CommandEmpty({ className, ...rest }: ComponentProps<typeof CommandPrimitive.Empty>): React.JSX.Element;
 declare function CommandGroup({ className, size, ...props }: CommandGroupProps): React.JSX.Element;
 declare function CommandSeparator({ className, ...props }: ComponentProps<typeof CommandPrimitive.Separator>): React.JSX.Element;
-declare function CommandItem({ className, size, isGroup, icon, tooltip, children, selectedValue, multiple, value, shortcut, disabledTooltip, disabled, iconClassName, textClassName, ...props }: CommandItemProps): React.JSX.Element;
+declare function CommandItem({ className, size, isGroup, icon, tooltip, children, selectedValue, multiple, value, shortcut, disabledTooltip, disabled, iconClassName, textClassName, labelTooltip, ...props }: CommandItemProps): React.JSX.Element;
 declare function CommandUserItem({ className, size, isGroup, name, email, profileUrl, selectedValue, multiple, value, disabled, textClassName, ...props }: CommandUserItemProps): React.JSX.Element;
-declare function CommandCheckboxItem({ className, textClassName, size, isGroup, children, selectedValue, value, icon, disabled, tooltip, disabledTooltip, ...props }: CommandItemProps): React.JSX.Element;
+declare function CommandCheckboxItem({ className, textClassName, size, isGroup, children, selectedValue, value, icon, disabled, tooltip, disabledTooltip, labelTooltip, ...props }: CommandItemProps): React.JSX.Element;
 declare function CommandShortcut({ className, ...props }: ComponentProps<'span'>): React.JSX.Element;
 export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandCheckboxItem, CommandShortcut, CommandSeparator, CommandClear, CommandUserItem, };

package/command/command.component.js

@@ -9,9 +9,9 @@ var _excluded = ["className"],
   _excluded6 = ["className"],
   _excluded7 = ["className", "size"],
   _excluded8 = ["className"],
-  _excluded9 = ["className", "size", "isGroup", "icon", "tooltip", "children", "selectedValue", "multiple", "value", "shortcut", "disabledTooltip", "disabled", "iconClassName", "textClassName"],
+  _excluded9 = ["className", "size", "isGroup", "icon", "tooltip", "children", "selectedValue", "multiple", "value", "shortcut", "disabledTooltip", "disabled", "iconClassName", "textClassName", "labelTooltip"],
   _excluded10 = ["className", "size", "isGroup", "name", "email", "profileUrl", "selectedValue", "multiple", "value", "disabled", "textClassName"],
-  _excluded11 = ["className", "textClassName", "size", "isGroup", "children", "selectedValue", "value", "icon", "disabled", "tooltip", "disabledTooltip"],
+  _excluded11 = ["className", "textClassName", "size", "isGroup", "children", "selectedValue", "value", "icon", "disabled", "tooltip", "disabledTooltip", "labelTooltip"],
   _excluded12 = ["className"];
 import { ButtonVariant, buttonVariants } from '@scaleflex/ui-tw/button';
 import { getIconSizeInRem } from '@scaleflex/ui-tw/button/button.utils';
@@ -22,15 +22,15 @@ import { crossSizeOptions } from '@scaleflex/ui-tw/search/search.constants';
 import { SelectIcon } from '@scaleflex/ui-tw/select/components/select-icon';
 import { selectItemVariants, selectTriggerVariants } from '@scaleflex/ui-tw/select/select.component';
 import { getOptionInGroupPaddingLeft } from '@scaleflex/ui-tw/select/select.utils';
+import { WithTooltip } from '@scaleflex/ui-tw/tooltip';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
-import { Command as CommandPrimitive } from 'cmdk';
-import { useCommandState } from 'cmdk';
+import { Command as CommandPrimitive, useCommandState } from 'cmdk';
 import { CheckIcon, SearchIcon, UserCircle2Icon, XIcon } from 'lucide-react';
 import React from 'react';
 import { useCallback } from 'react';
-import { selectCommandHeadingOptions } from './command.utils';
+import { selectCommandHeadingOptions, truncateLabelTooltip } from './command.utils';
 function Command(_ref) {
   var className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -192,8 +192,11 @@ function CommandItem(_ref9) {
     disabled = _ref9.disabled,
     iconClassName = _ref9.iconClassName,
     textClassName = _ref9.textClassName,
+    labelTooltip = _ref9.labelTooltip,
     props = _objectWithoutProperties(_ref9, _excluded9);
   var selected = value && (multiple ? selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.includes(value) : value === selectedValue);
+  var resolvedShortcut = typeof shortcut === 'function' ? shortcut() : shortcut;
+  var resolvedLabelTooltip = truncateLabelTooltip(labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : typeof children === 'string' ? children : undefined);
   return /*#__PURE__*/React.createElement(CommandPrimitive.Item, _extends({
     "data-slot": "command-item",
     className: cn('relative flex w-full cursor-pointer items-center justify-between gap-2 outline-hidden select-none', '*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2', 'data-[selected=true]:bg-secondary data-[selected=true]:text-foreground', '!opacity-100 data-[disabled=true]:cursor-not-allowed', "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", selectItemVariants({
@@ -209,16 +212,18 @@ function CommandItem(_ref9) {
     className: cn('text-muted-foreground hover:text-primary shrink-0', selected && 'text-primary', disabled && 'opacity-50', iconClassName)
   }), /*#__PURE__*/React.createElement("div", {
     className: "flex items-center gap-1 overflow-hidden"
+  }, /*#__PURE__*/React.createElement(WithTooltip, {
+    content: resolvedLabelTooltip
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('line-clamp-2 overflow-hidden text-left break-words text-ellipsis', textClassName, disabled && 'opacity-50')
-  }, children), (tooltip || disabledTooltip) && /*#__PURE__*/React.createElement("div", {
+  }, children)), (tooltip || disabledTooltip) && /*#__PURE__*/React.createElement("div", {
     className: "flex shrink-0 items-center"
   }, /*#__PURE__*/React.createElement(LabelIcon, {
     size: size,
     tooltip: disabled ? disabledTooltip : tooltip
-  })))), shortcut && /*#__PURE__*/React.createElement(CommandShortcut, {
+  })))), resolvedShortcut && /*#__PURE__*/React.createElement(CommandShortcut, {
     className: cn(disabled && 'opacity-50')
-  }, shortcut), /*#__PURE__*/React.createElement("span", {
+  }, resolvedShortcut), /*#__PURE__*/React.createElement("span", {
     className: "absolute right-2 flex size-3.5 items-center justify-center"
   }, /*#__PURE__*/React.createElement(CheckIcon, {
     className: cn('text-primary ml-auto h-4 w-4', selected ? 'opacity-100' : 'opacity-0')
@@ -238,6 +243,8 @@ function CommandUserItem(_ref10) {
     textClassName = _ref10.textClassName,
     props = _objectWithoutProperties(_ref10, _excluded10);
   var selected = value && (multiple ? selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.includes(value) : value === selectedValue);
+  var resolvedName = typeof name === 'function' ? name() : name;
+  var resolvedEmail = typeof email === 'function' ? email() : email;
   return /*#__PURE__*/React.createElement(CommandPrimitive.Item, _extends({
     "data-slot": "command-item",
     className: cn('relative flex w-full cursor-pointer items-center justify-between gap-2 outline-hidden select-none', '*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2', 'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground', '!opacity-100 data-[disabled=true]:cursor-not-allowed', "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", selectItemVariants({
@@ -258,11 +265,15 @@ function CommandUserItem(_ref10) {
     className: "size-8"
   })), /*#__PURE__*/React.createElement("div", {
     className: "max-w-10/12"
+  }, /*#__PURE__*/React.createElement(WithTooltip, {
+    content: typeof resolvedName === 'string' ? truncateLabelTooltip(resolvedName) : undefined
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('w-full overflow-hidden text-sm text-ellipsis whitespace-nowrap', textClassName)
-  }, name), /*#__PURE__*/React.createElement("div", {
+  }, resolvedName)), /*#__PURE__*/React.createElement(WithTooltip, {
+    content: typeof resolvedEmail === 'string' ? truncateLabelTooltip(resolvedEmail) : undefined
+  }, /*#__PURE__*/React.createElement("div", {
     className: cn('text-secondary-foreground w-full overflow-hidden text-xs text-ellipsis whitespace-nowrap', textClassName)
-  }, email))), /*#__PURE__*/React.createElement("span", {
+  }, resolvedEmail)))), /*#__PURE__*/React.createElement("span", {
     className: "absolute right-2 flex size-3.5 items-center justify-center"
   }, /*#__PURE__*/React.createElement(CheckIcon, {
     className: cn('text-primary ml-auto h-4 w-4', selected ? 'opacity-100' : 'opacity-0')
@@ -280,11 +291,13 @@ function CommandCheckboxItem(_ref11) {
     disabled = _ref11.disabled,
     tooltip = _ref11.tooltip,
     disabledTooltip = _ref11.disabledTooltip,
+    labelTooltip = _ref11.labelTooltip,
     props = _objectWithoutProperties(_ref11, _excluded11);
   var selected = value && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.includes(value));
+  var resolvedLabelTooltip = truncateLabelTooltip(labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : typeof children === 'string' ? children : undefined);
   return /*#__PURE__*/React.createElement(CommandPrimitive.Item, _extends({
     "data-slot": "command-checkbox-item",
-    className: cn('relative flex w-full cursor-pointer items-center gap-3 outline-none select-none', 'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground', '!opacity-100 data-[disabled=true]:cursor-not-allowed', selectItemVariants({
+    className: cn('relative flex w-full cursor-pointer items-center gap-3 outline-hidden select-none', 'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground', '!opacity-100 data-[disabled=true]:cursor-not-allowed', selectItemVariants({
       size: size
     }), isGroup && getOptionInGroupPaddingLeft(size), className),
     disabled: disabled
@@ -300,9 +313,11 @@ function CommandCheckboxItem(_ref11) {
     size: size,
     icon: icon,
     className: cn('text-muted-foreground hover:text-primary !mr-1 shrink-0', selected && 'text-primary', disabled && 'opacity-50')
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement(WithTooltip, {
+    content: resolvedLabelTooltip
+  }, /*#__PURE__*/React.createElement("div", {
     className: cn('line-clamp-2 overflow-hidden text-left break-words text-ellipsis', textClassName, disabled && 'opacity-50')
-  }, children), (tooltip || disabledTooltip) && /*#__PURE__*/React.createElement("div", {
+  }, children)), (tooltip || disabledTooltip) && /*#__PURE__*/React.createElement("div", {
     className: "flex shrink-0 items-center"
   }, /*#__PURE__*/React.createElement(LabelIcon, {
     size: size,

package/command/command.utils.d.ts

@@ -1,5 +1,7 @@
+export declare const LABEL_TOOLTIP_MAX_LENGTH = 250;
+export declare function truncateLabelTooltip(labelTooltip: string | undefined): string | undefined;
 export declare const selectCommandHeadingOptions: {
     readonly sm: "[&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:min-h-8 [&_[cmdk-group-heading]]:text-xs";
-    readonly md: "[&_[cmdk-group-heading]]:py-3 [&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:min-h-10 [&_[cmdk-group-heading]]:text-sm ";
-    readonly lg: "[&_[cmdk-group-heading]]:py-3 [&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:min-h-12 [&_[cmdk-group-heading]]:text-base ";
+    readonly md: "[&_[cmdk-group-heading]]:py-3 [&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:min-h-10 [&_[cmdk-group-heading]]:text-sm";
+    readonly lg: "[&_[cmdk-group-heading]]:py-3 [&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:min-h-12 [&_[cmdk-group-heading]]:text-base";
 };

package/command/command.utils.js

@@ -1,3 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
-export var selectCommandHeadingOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, '[&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:min-h-8 [&_[cmdk-group-heading]]:text-xs'), FormSize.Md, '[&_[cmdk-group-heading]]:py-3 [&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:min-h-10 [&_[cmdk-group-heading]]:text-sm '), FormSize.Lg, '[&_[cmdk-group-heading]]:py-3 [&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:min-h-12 [&_[cmdk-group-heading]]:text-base ');
+export var LABEL_TOOLTIP_MAX_LENGTH = 250;
+export function truncateLabelTooltip(labelTooltip) {
+  if (!labelTooltip) return undefined;
+  return labelTooltip.length > LABEL_TOOLTIP_MAX_LENGTH ? "".concat(labelTooltip.slice(0, LABEL_TOOLTIP_MAX_LENGTH), "\u2026") : labelTooltip;
+}
+export var selectCommandHeadingOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, '[&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:min-h-8 [&_[cmdk-group-heading]]:text-xs'), FormSize.Md, '[&_[cmdk-group-heading]]:py-3 [&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:min-h-10 [&_[cmdk-group-heading]]:text-sm'), FormSize.Lg, '[&_[cmdk-group-heading]]:py-3 [&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:min-h-12 [&_[cmdk-group-heading]]:text-base');

package/dialog/dialog.component.d.ts

@@ -6,7 +6,7 @@ declare function DialogTrigger({ ...props }: ComponentProps<typeof DialogPrimiti
 declare function DialogPortal({ ...props }: ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
 declare function DialogClose({ ...props }: ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
 declare function DialogOverlay({ className, ...props }: ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element;
-declare function DialogContent({ className, children, overlayClassName, variant, headerSize, maxWidth, ...props }: DialogContentProps): React.JSX.Element;
+declare function DialogContent({ className, children, overlayClassName, variant, headerSize, maxWidth, hideCloseButton, ...props }: DialogContentProps): React.JSX.Element;
 declare function DialogHeader({ className, size, ...props }: DialogHeaderProps): React.JSX.Element;
 declare function DialogTitle({ className, size, align, ...props }: DialogTitleProps): React.JSX.Element;
 declare function DialogDescription({ className, ...props }: ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;