@scaleflex/ui-tw 0.0.152 → 0.0.154

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,16 @@ 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);
+        }, 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, {
@@ -281,7 +285,7 @@ export function ComboboxContent(_ref4) {
       onSelect: function onSelect() {
         return _onSelect(option.value);
       }
-    }, (_option$optionLabel = option.optionLabel) !== null && _option$optionLabel !== void 0 ? _option$optionLabel : option.label));
+    }, resolvedOptionLabel !== null && resolvedOptionLabel !== void 0 ? resolvedOptionLabel : resolvedLabel));
   }), !fixedActions && /*#__PURE__*/React.createElement(SelectActions, {
     actions: actions
   })), fixedActions && /*#__PURE__*/React.createElement(SelectActions, {
@@ -293,7 +297,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 +314,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 +336,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 +344,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 +355,16 @@ 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);
+        }, 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, {
@@ -371,7 +379,7 @@ export function ComboboxCheckboxContent(_ref6) {
       onSelect: function onSelect() {
         return _onSelect2(option.value);
       }
-    }, (_option$optionLabel2 = option.optionLabel) !== null && _option$optionLabel2 !== void 0 ? _option$optionLabel2 : option.label));
+    }, 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,20 @@ 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;
 }
 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 +110,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.js

@@ -22,11 +22,11 @@ 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 { TruncatedText } from '@scaleflex/ui-tw/truncated-text';
 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';
@@ -194,6 +194,7 @@ function CommandItem(_ref9) {
     textClassName = _ref9.textClassName,
     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;
   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 +210,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("div", {
-    className: cn('line-clamp-2 overflow-hidden text-left break-words text-ellipsis', textClassName, disabled && 'opacity-50')
+  }, typeof children === 'string' ? /*#__PURE__*/React.createElement(TruncatedText, {
+    className: cn(textClassName, disabled && 'opacity-50')
+  }, children) : /*#__PURE__*/React.createElement("div", {
+    className: cn('overflow-hidden text-left', textClassName, disabled && 'opacity-50')
   }, 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 +241,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 +263,15 @@ function CommandUserItem(_ref10) {
     className: "size-8"
   })), /*#__PURE__*/React.createElement("div", {
     className: "max-w-10/12"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, typeof resolvedName === 'string' ? /*#__PURE__*/React.createElement(TruncatedText, {
+    className: cn('text-sm', textClassName)
+  }, resolvedName) : /*#__PURE__*/React.createElement("div", {
     className: cn('w-full overflow-hidden text-sm text-ellipsis whitespace-nowrap', textClassName)
-  }, name), /*#__PURE__*/React.createElement("div", {
+  }, resolvedName), typeof resolvedEmail === 'string' ? /*#__PURE__*/React.createElement(TruncatedText, {
+    className: cn('text-secondary-foreground text-xs', textClassName)
+  }, resolvedEmail) : /*#__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')
@@ -284,7 +293,7 @@ function CommandCheckboxItem(_ref11) {
   var selected = value && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.includes(value));
   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,8 +309,10 @@ 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", {
-    className: cn('line-clamp-2 overflow-hidden text-left break-words text-ellipsis', textClassName, disabled && 'opacity-50')
+  }), typeof children === 'string' ? /*#__PURE__*/React.createElement(TruncatedText, {
+    className: cn(textClassName, disabled && 'opacity-50')
+  }, children) : /*#__PURE__*/React.createElement("div", {
+    className: cn('overflow-hidden text-left', textClassName, disabled && 'opacity-50')
   }, children), (tooltip || disabledTooltip) && /*#__PURE__*/React.createElement("div", {
     className: "flex shrink-0 items-center"
   }, /*#__PURE__*/React.createElement(LabelIcon, {

package/command/command.utils.d.ts

@@ -1,5 +1,5 @@
 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,3 @@
 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 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;

package/dialog/dialog.component.js

@@ -2,7 +2,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["className"],
-  _excluded2 = ["className", "children", "overlayClassName", "variant", "headerSize", "maxWidth"],
+  _excluded2 = ["className", "children", "overlayClassName", "variant", "headerSize", "maxWidth", "hideCloseButton"],
   _excluded3 = ["className", "size"],
   _excluded4 = ["className", "size", "align"],
   _excluded5 = ["className"],
@@ -81,6 +81,8 @@ function DialogContent(_ref6) {
     _ref6$headerSize = _ref6.headerSize,
     headerSize = _ref6$headerSize === void 0 ? 'md' : _ref6$headerSize,
     maxWidth = _ref6.maxWidth,
+    _ref6$hideCloseButton = _ref6.hideCloseButton,
+    hideCloseButton = _ref6$hideCloseButton === void 0 ? false : _ref6$hideCloseButton,
     props = _objectWithoutProperties(_ref6, _excluded2);
   var resolvedMaxWidth = maxWidth === 'none' ? undefined : maxWidth !== null && maxWidth !== void 0 ? maxWidth : variant === 'centered' ? 'md' : '4xl';
   var isCentered = variant === 'centered';
@@ -98,7 +100,7 @@ function DialogContent(_ref6) {
     className: cn('bg-background text-foreground border-border fixed top-[50%] left-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', resolvedMaxWidth && dialogContentWidthVariants({
       maxWidth: resolvedMaxWidth
     }), className)
-  }, props), children, /*#__PURE__*/React.createElement(DialogPrimitive.Close, {
+  }, props), children, !hideCloseButton && /*#__PURE__*/React.createElement(DialogPrimitive.Close, {
     "data-state": "open",
     asChild: true,
     className: cn('text-muted-foreground/70 hover:text-muted-foreground absolute right-3 cursor-pointer rounded-xs transition-opacity disabled:pointer-events-none', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5", isCentered ? 'top-3' : dialogCloseButtonPositionVariants({

package/dialog/dialog.types.d.ts

@@ -10,6 +10,8 @@ export interface DialogContentProps extends ComponentProps<typeof DialogPrimitiv
     headerSize?: DialogHeaderSize;
     /** Preset max-width. Pass `'none'` to skip the preset and use className for custom width. */
     maxWidth?: DialogContentWidth;
+    /** Hide the built-in close (X) button. */
+    hideCloseButton?: boolean;
 }
 export interface DialogHeaderProps extends ComponentProps<'div'> {
     size?: DialogHeaderSize;

package/dropdown-menu/dropdown-menu.component.d.ts

@@ -7,7 +7,7 @@ declare function DropdownMenuPortal({ ...props }: ComponentProps<typeof Dropdown
 declare function DropdownMenuTrigger({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Trigger>): React.JSX.Element;
 declare function DropdownMenuContent({ className, sideOffset, collisionPadding, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Content>): React.JSX.Element;
 declare function DropdownMenuGroup({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Group>): React.JSX.Element;
-declare function DropdownMenuItem({ className, inset, variant, size, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+declare function DropdownMenuItem({ className, inset, variant, size, children, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean;
     variant?: 'default' | 'destructive';
     size?: DropdownMenuItemSize;