@scaleflex/ui-tw 0.0.152 → 0.0.154

package/dropdown-menu/dropdown-menu.component.js

@@ -3,7 +3,7 @@ import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructurin
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["className", "sideOffset", "collisionPadding"],
-  _excluded2 = ["className", "inset", "variant", "size"],
+  _excluded2 = ["className", "inset", "variant", "size", "children"],
   _excluded3 = ["className", "children", "checked", "size", "closeOnSelect", "onSelect"],
   _excluded4 = ["className", "children", "size"],
   _excluded5 = ["className", "size"],
@@ -16,6 +16,7 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { Slot } from '@radix-ui/react-slot';
 import { DropdownMenuItemSize, dropdownMenuButtonTriggerOptions, dropdownMenuCheckboxItemSizeOptions, dropdownMenuIconSizeOptions, dropdownMenuItemIconSizeOptions, dropdownMenuItemIndicatorSizeOptions, dropdownMenuItemSizeOptions, dropdownMenuRadioItemSizeOptions, dropdownMenuShortcutSizeOptions } from '@scaleflex/ui-tw/dropdown-menu/dropdown-menu.constants';
 import { focusRingClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
+import { TruncatedText } from '@scaleflex/ui-tw/truncated-text';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
 import { CheckIcon, ChevronDownIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
@@ -131,23 +132,28 @@ function DropdownMenuGroup(_ref5) {
   }, props));
 }
 function DropdownMenuItem(_ref6) {
+  var _React$Children$map;
   var className = _ref6.className,
     inset = _ref6.inset,
     _ref6$variant = _ref6.variant,
     variant = _ref6$variant === void 0 ? 'default' : _ref6$variant,
     _ref6$size = _ref6.size,
     size = _ref6$size === void 0 ? DropdownMenuItemSize.Sm : _ref6$size,
+    children = _ref6.children,
     props = _objectWithoutProperties(_ref6, _excluded2);
+  var processedChildren = (_React$Children$map = React.Children.map(children, function (child) {
+    return typeof child === 'string' ? /*#__PURE__*/React.createElement(TruncatedText, null, child) : child;
+  })) !== null && _React$Children$map !== void 0 ? _React$Children$map : children;
   return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Item, _extends({
     "data-slot": "dropdown-menu-item",
     "data-inset": inset,
     "data-variant": variant,
-    className: cn('relative flex cursor-pointer items-center gap-2 rounded-sm outline-hidden select-none', dropdownMenuItemVariants({
+    className: cn('relative flex cursor-pointer items-center gap-2 overflow-hidden rounded-sm outline-hidden select-none', dropdownMenuItemVariants({
       size: size
     }), 'data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive', 'focus:bg-secondary data-[disabled]:pointer-events-none data-[disabled]:opacity-50', "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0", dropdownMenuIconVariants({
       size: size
     }), className)
-  }, props));
+  }, props), processedChildren);
 }
 function DropdownMenuCheckboxItem(_ref7) {
   var className = _ref7.className,
@@ -234,7 +240,7 @@ function DropdownMenuShortcut(_ref12) {
     props = _objectWithoutProperties(_ref12, _excluded7);
   return /*#__PURE__*/React.createElement("span", _extends({
     "data-slot": "dropdown-menu-shortcut",
-    className: cn('text-muted-foreground absolute tracking-widest', dropdownMenuShortcutVariants({
+    className: cn('text-muted-foreground ml-auto shrink-0 tracking-widest', dropdownMenuShortcutVariants({
       size: size
     }), className)
   }, props));

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

@@ -34,9 +34,9 @@ export declare const dropdownMenuItemIconSizeOptions: {
     readonly lg: "size-5";
 };
 export declare const dropdownMenuShortcutSizeOptions: {
-    readonly sm: "right-2 text-xs";
-    readonly md: "right-3 text-xs";
-    readonly lg: "right-3 text-xs";
+    readonly sm: "text-xs";
+    readonly md: "text-xs";
+    readonly lg: "text-xs";
 };
 export declare const dropdownMenuIconSizeOptions: {
     readonly sm: "[&_svg:not([class*='size-'])]:size-3.5";

package/dropdown-menu/dropdown-menu.constants.js

@@ -10,5 +10,5 @@ export var dropdownMenuRadioItemSizeOptions = _defineProperty(_defineProperty(_d
 export var dropdownMenuButtonTriggerOptions = _defineProperty(_defineProperty(_defineProperty({}, DropdownMenuItemSize.Sm, 'px-3 py-1.5 gap-1 text-sm'), DropdownMenuItemSize.Md, 'px-4 py-2 gap-2 text-base'), DropdownMenuItemSize.Lg, 'px-5 py-2.5 gap-2 text-lg');
 export var dropdownMenuItemIndicatorSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, DropdownMenuItemSize.Sm, 'right-2 size-3.5'), DropdownMenuItemSize.Md, 'right-3 size-4'), DropdownMenuItemSize.Lg, 'right-3 size-5');
 export var dropdownMenuItemIconSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, DropdownMenuItemSize.Sm, 'size-3.5'), DropdownMenuItemSize.Md, 'size-4'), DropdownMenuItemSize.Lg, 'size-5');
-export var dropdownMenuShortcutSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, DropdownMenuItemSize.Sm, 'right-2 text-xs'), DropdownMenuItemSize.Md, 'right-3 text-xs'), DropdownMenuItemSize.Lg, 'right-3 text-xs');
+export var dropdownMenuShortcutSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, DropdownMenuItemSize.Sm, 'text-xs'), DropdownMenuItemSize.Md, 'text-xs'), DropdownMenuItemSize.Lg, 'text-xs');
 export var dropdownMenuIconSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, DropdownMenuItemSize.Sm, "[&_svg:not([class*='size-'])]:size-3.5"), DropdownMenuItemSize.Md, "[&_svg:not([class*='size-'])]:size-4.5"), DropdownMenuItemSize.Lg, "[&_svg:not([class*='size-'])]:size-5");

package/form/components/form-checkbox-field.component.js

@@ -25,6 +25,8 @@ function FormCheckboxField(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? FormSize.Md : _ref$size,
     checkboxProps = _ref.checkboxProps;
+  var resolvedLabel = typeof label === 'function' ? label() : label;
+  var resolvedDescription = typeof description === 'function' ? description() : description;
   return /*#__PURE__*/React.createElement(FormField, {
     control: control,
     name: name,
@@ -51,9 +53,9 @@ function FormCheckboxField(_ref) {
         disabledTooltip: disabledTooltip,
         size: size,
         disabled: disabled
-      }, label)), description && /*#__PURE__*/React.createElement(FormDescription, {
+      }, resolvedLabel)), resolvedDescription && /*#__PURE__*/React.createElement(FormDescription, {
         size: size
-      }, description), /*#__PURE__*/React.createElement(FormMessage, null));
+      }, resolvedDescription), /*#__PURE__*/React.createElement(FormMessage, null));
     }
   });
 }

package/form/components/form-checkbox-group-field.component.js

@@ -30,6 +30,8 @@ function FormCheckboxGroupField(_ref) {
     _ref$horizontal = _ref.horizontal,
     horizontal = _ref$horizontal === void 0 ? false : _ref$horizontal,
     horizontalLabelWidth = _ref.horizontalLabelWidth;
+  var resolvedLabel = typeof label === 'function' ? label() : label;
+  var resolvedDescription = typeof description === 'function' ? description() : description;
   return /*#__PURE__*/React.createElement(FormField, {
     control: control,
     name: name,
@@ -41,7 +43,7 @@ function FormCheckboxGroupField(_ref) {
         "data-disabled": disabled,
         horizontal: horizontal,
         firstColumnWidth: horizontalLabelWidth
-      }, (label || description) && /*#__PURE__*/React.createElement("div", null, label && /*#__PURE__*/React.createElement(FormLabel, {
+      }, (resolvedLabel || resolvedDescription) && /*#__PURE__*/React.createElement("div", null, resolvedLabel && /*#__PURE__*/React.createElement(FormLabel, {
         className: cn('cursor-default', labelCheckboxAndRadioVariants({
           size: size
         })),
@@ -49,16 +51,16 @@ function FormCheckboxGroupField(_ref) {
         tooltip: tooltip,
         disabledTooltip: disabledTooltip,
         disabled: disabled
-      }, label), description && !horizontal && /*#__PURE__*/React.createElement(FormDescription, {
+      }, resolvedLabel), resolvedDescription && !horizontal && /*#__PURE__*/React.createElement(FormDescription, {
         size: size
-      }, description)), /*#__PURE__*/React.createElement("div", {
+      }, resolvedDescription)), /*#__PURE__*/React.createElement("div", {
         className: "flex flex-col gap-3"
-      }, description && horizontal && /*#__PURE__*/React.createElement(FormDescription, {
+      }, resolvedDescription && horizontal && /*#__PURE__*/React.createElement(FormDescription, {
         className: labelCheckboxAndRadioVariants({
           size: size
         }),
         size: size
-      }, description), options.map(function (option) {
+      }, resolvedDescription), options.map(function (option) {
         var _field$value;
         return /*#__PURE__*/React.createElement(FormItem, {
           key: option.id,

package/form/components/form-field-group.component.js

@@ -26,6 +26,8 @@ function FormFieldGroup(_ref) {
     showCharCount = _ref$showCharCount === void 0 ? false : _ref$showCharCount,
     maxLength = _ref.maxLength,
     children = _ref.children;
+  var resolvedLabel = typeof label === 'function' ? label() : label;
+  var resolvedDescription = typeof description === 'function' ? description() : description;
   return /*#__PURE__*/React.createElement(FormField, {
     control: control,
     name: name,
@@ -33,7 +35,7 @@ function FormFieldGroup(_ref) {
     render: function render(_ref2) {
       var field = _ref2.field;
       var charCount = typeof field.value === 'string' ? field.value.length : 0;
-      var showLabelRow = label || showCharCount;
+      var showLabelRow = resolvedLabel || showCharCount;
       return /*#__PURE__*/React.createElement(FormItem, {
         className: "group",
         horizontal: horizontal,
@@ -42,13 +44,13 @@ function FormFieldGroup(_ref) {
         "data-highlight": highlight
       }, showLabelRow && /*#__PURE__*/React.createElement("div", {
         className: cn('flex items-center justify-between gap-2', horizontal && labelHeightVariants[size])
-      }, label ? /*#__PURE__*/React.createElement(FormLabel, {
+      }, resolvedLabel ? /*#__PURE__*/React.createElement(FormLabel, {
         className: cn(horizontal && 'self-start'),
         size: size,
         tooltip: tooltip,
         disabledTooltip: disabledTooltip,
         disabled: disabled
-      }, label) : /*#__PURE__*/React.createElement("span", null), showCharCount && /*#__PURE__*/React.createElement("span", {
+      }, resolvedLabel) : /*#__PURE__*/React.createElement("span", null), showCharCount && /*#__PURE__*/React.createElement("span", {
         className: cn('text-muted-foreground shrink-0 tabular-nums', 'group-data-[disabled=true]:opacity-50', maxLength && charCount >= maxLength && 'text-destructive-foreground', formMessageSizeOptions[size])
       }, maxLength ? "".concat(charCount, " / ").concat(maxLength) : charCount)), /*#__PURE__*/React.createElement("div", {
         className: "grid gap-1.5"
@@ -58,9 +60,9 @@ function FormFieldGroup(_ref) {
         disabled: disabled
       }, maxLength !== undefined && {
         maxLength: maxLength
-      }))), description && /*#__PURE__*/React.createElement(FormDescription, {
+      }))), resolvedDescription && /*#__PURE__*/React.createElement(FormDescription, {
         size: size
-      }, description), /*#__PURE__*/React.createElement(FormMessage, {
+      }, resolvedDescription), /*#__PURE__*/React.createElement(FormMessage, {
         size: size
       })));
     }

package/form/components/form-radio-group-field.component.js

@@ -29,6 +29,8 @@ function FormRadioGroupField(_ref) {
     _ref$horizontal = _ref.horizontal,
     horizontal = _ref$horizontal === void 0 ? false : _ref$horizontal,
     horizontalLabelWidth = _ref.horizontalLabelWidth;
+  var resolvedLabel = typeof label === 'function' ? label() : label;
+  var resolvedDescription = typeof description === 'function' ? description() : description;
   return /*#__PURE__*/React.createElement(FormField, {
     control: control,
     name: name,
@@ -40,7 +42,7 @@ function FormRadioGroupField(_ref) {
         "data-disabled": disabled,
         horizontal: horizontal,
         firstColumnWidth: horizontalLabelWidth
-      }, (label || description) && /*#__PURE__*/React.createElement("div", null, label && /*#__PURE__*/React.createElement(FormLabel, {
+      }, (resolvedLabel || resolvedDescription) && /*#__PURE__*/React.createElement("div", null, resolvedLabel && /*#__PURE__*/React.createElement(FormLabel, {
         className: cn('cursor-default', labelCheckboxAndRadioVariants({
           size: size
         })),
@@ -48,19 +50,19 @@ function FormRadioGroupField(_ref) {
         tooltip: tooltip,
         disabled: disabled,
         disabledTooltip: disabledTooltip
-      }, label), description && !horizontal && /*#__PURE__*/React.createElement(FormDescription, {
+      }, resolvedLabel), resolvedDescription && !horizontal && /*#__PURE__*/React.createElement(FormDescription, {
         size: size
-      }, description)), /*#__PURE__*/React.createElement(RadioGroup, {
+      }, resolvedDescription)), /*#__PURE__*/React.createElement(RadioGroup, {
         value: field.value,
         onValueChange: field.onChange,
         disabled: disabled,
         className: "flex flex-col gap-3"
-      }, description && horizontal && /*#__PURE__*/React.createElement(FormDescription, {
+      }, resolvedDescription && horizontal && /*#__PURE__*/React.createElement(FormDescription, {
         className: labelCheckboxAndRadioVariants({
           size: size
         }),
         size: size
-      }, description), options.map(function (option) {
+      }, resolvedDescription), options.map(function (option) {
         return /*#__PURE__*/React.createElement("div", {
           key: option.id,
           className: "group flex items-center space-x-2",

package/form/components/form-switch-field.component.js

@@ -27,6 +27,8 @@ function FormSwitchField(_ref) {
     _ref$layout = _ref.layout,
     layout = _ref$layout === void 0 ? SwitchLayout.Inline : _ref$layout,
     switchProps = _ref.switchProps;
+  var resolvedLabel = typeof label === 'function' ? label() : label;
+  var resolvedDescription = typeof description === 'function' ? description() : description;
   var isInlineLayout = layout === SwitchLayout.Inline;
   return /*#__PURE__*/React.createElement(FormField, {
     control: control,
@@ -52,22 +54,22 @@ function FormSwitchField(_ref) {
         disabledTooltip: disabledTooltip,
         size: size,
         disabled: disabled
-      }, label)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormLabel, {
+      }, resolvedLabel)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormLabel, {
         className: "text-foreground",
         htmlFor: (_switchProps$id2 = switchProps === null || switchProps === void 0 ? void 0 : switchProps.id) !== null && _switchProps$id2 !== void 0 ? _switchProps$id2 : field.name,
         tooltip: tooltip,
         disabledTooltip: disabledTooltip,
         size: size,
         disabled: disabled
-      }, label), /*#__PURE__*/React.createElement(FormControl, null, /*#__PURE__*/React.createElement(Switch, _extends({
+      }, resolvedLabel), /*#__PURE__*/React.createElement(FormControl, null, /*#__PURE__*/React.createElement(Switch, _extends({
         id: field.name,
         checked: field.value,
         onCheckedChange: field.onChange,
         disabled: disabled,
         size: size
-      }, switchProps))))), description && /*#__PURE__*/React.createElement(FormDescription, {
+      }, switchProps))))), resolvedDescription && /*#__PURE__*/React.createElement(FormDescription, {
         size: size
-      }, description), /*#__PURE__*/React.createElement(FormMessage, null));
+      }, resolvedDescription), /*#__PURE__*/React.createElement(FormMessage, null));
     }
   });
 }

package/form/form.types.d.ts

@@ -28,12 +28,12 @@ export interface FormFieldArgs {
     maxLength?: number;
 }
 interface FormBaseFieldProps {
-    label?: ReactElement | string;
+    label?: ReactElement | string | (() => ReactElement);
     size?: FormSizeType;
-    description?: ReactElement | string;
+    description?: ReactElement | string | (() => ReactElement);
     disabled?: boolean;
-    tooltip?: ReactElement | string;
-    disabledTooltip?: ReactElement | string;
+    tooltip?: ReactElement | string | (() => ReactElement);
+    disabledTooltip?: ReactElement | string | (() => ReactElement);
     showCharCount?: boolean;
     maxLength?: number;
 }
@@ -58,46 +58,46 @@ export type FormTextareaFieldProps<TFieldValues extends FieldValues, TName exten
     textareaProps?: TextareaProps;
 };
 export interface FlatOption {
-    label: ReactElement | string;
-    optionLabel?: ReactElement | string;
+    label: ReactElement | string | (() => ReactElement);
+    optionLabel?: ReactElement | string | (() => ReactElement);
     value: string;
     disabled?: boolean;
-    icon?: ReactElement;
-    tooltip?: ReactElement | string;
-    disabledTooltip?: ReactElement | string;
+    icon?: ReactElement | (() => ReactElement);
+    tooltip?: ReactElement | string | (() => ReactElement);
+    disabledTooltip?: ReactElement | string | (() => ReactElement);
 }
 export interface OptionGroup extends Omit<FlatOption, 'value' | 'label'> {
-    label?: ReactElement | string;
+    label?: ReactElement | string | (() => ReactElement);
     value?: string;
     options: FlatOption[];
 }
 export interface UserFlatOption {
-    name: ReactElement | string;
-    email: ReactElement | string;
+    name: ReactElement | string | (() => ReactElement);
+    email: ReactElement | string | (() => ReactElement);
     value: string;
     disabled?: boolean;
     profileUrl?: string;
 }
 export interface UserOptionGroup {
-    label?: ReactElement | string;
+    label?: ReactElement | string | (() => ReactElement);
     value?: string;
     options: UserFlatOption[];
-    icon?: ReactElement;
+    icon?: ReactElement | (() => ReactElement);
     disabled?: boolean;
-    tooltip?: ReactElement | string;
-    disabledTooltip?: ReactElement | string;
+    tooltip?: ReactElement | string | (() => ReactElement);
+    disabledTooltip?: ReactElement | string | (() => ReactElement);
 }
 export type SelectOption = FlatOption | OptionGroup;
 export type SelectUserOption = UserFlatOption | UserOptionGroup;
 export type FormSelectProps = SelectProps & {
     options: SelectOption[];
     placeholder?: string;
-    icon?: ReactElement;
+    icon?: ReactElement | (() => ReactElement);
     popoverClassName?: string;
     triggerProps?: SelectorProps['triggerProps'];
 };
 export type FormSelectFieldProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> = Omit<FormFieldGroupProps<TFieldValues, TName>, 'children'> & {
-    icon?: ReactElement;
+    icon?: ReactElement | (() => ReactElement);
     showGroupSeparator?: boolean;
     selectProps?: FormSelectProps;
 };
@@ -124,16 +124,16 @@ export type RadioOption = {
     label: string;
     id: string;
     disabled?: RadioGroupItemProps['disabled'];
-    tooltip?: ReactElement | string;
-    disabledTooltip?: ReactElement | string;
+    tooltip?: ReactElement | string | (() => ReactElement);
+    disabledTooltip?: ReactElement | string | (() => ReactElement);
 };
 interface BaseFormGroupFieldProps<TFieldValues extends FieldValues> {
     control: Control<TFieldValues>;
     name: Path<TFieldValues>;
-    label?: ReactElement | string;
-    disabledTooltip?: ReactElement | string;
-    tooltip?: ReactElement | string;
-    description?: ReactElement | string;
+    label?: ReactElement | string | (() => ReactElement);
+    disabledTooltip?: ReactElement | string | (() => ReactElement);
+    tooltip?: ReactElement | string | (() => ReactElement);
+    description?: ReactElement | string | (() => ReactElement);
     className?: string;
     disabled?: boolean;
     size?: FormSizeType;

package/input-tags/input-tags.component.js

@@ -20,6 +20,12 @@ import { cva } from 'class-variance-authority';
 import { ChevronsUpDownIcon } from 'lucide-react';
 import * as React from 'react';
 import { useMemo, useState } from 'react';
+var normalizeLabel = function normalizeLabel(label) {
+  return label.trim().replace(/\s+/g, ' ');
+};
+var normalizeValue = function normalizeValue(label) {
+  return normalizeLabel(label).replace(/\s+/g, '-');
+};
 var inputTagsVariants = cva('', {
   variants: {
     size: textareaSizeOptions
@@ -68,7 +74,9 @@ export function InputTags(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     search = _useState4[0],
     setSearch = _useState4[1];
-  var tagsList = [].concat(_toConsumableArray(suggestedTags), _toConsumableArray(allTags));
+  var tagsList = useMemo(function () {
+    return [].concat(_toConsumableArray(suggestedTags), _toConsumableArray(allTags));
+  }, [suggestedTags, allTags]);
   var _getToolbarSizes = getToolbarSizes(size),
     buttonSize = _getToolbarSizes.buttonSize;
   var searchTrimmed = search.trim().toLowerCase();
@@ -80,18 +88,11 @@ export function InputTags(_ref) {
       return isSameTag(t, tag);
     });
   };
-  var normalizeLabel = function normalizeLabel(label) {
-    return label.trim().replace(/\s+/g, ' ');
-  };
-  var normalizeValue = function normalizeValue(label) {
-    return normalizeLabel(label).replace(/\s+/g, '-');
-  };
-  var createTag = function createTag(label) {
+  var newTag = useMemo(function () {
     return _defineProperty({
-      label: normalizeLabel(label)
-    }, valueProp, normalizeValue(label));
-  };
-  var newTag = createTag(search);
+      label: normalizeLabel(search)
+    }, valueProp, normalizeValue(search));
+  }, [search, valueProp]);
   var canCreate = useMemo(function () {
     if (!allowCustomTags || !searchTrimmed) return false;
     return !value.some(function (v) {
@@ -130,7 +131,7 @@ export function InputTags(_ref) {
     asChild: true
   }, /*#__PURE__*/React.createElement("button", {
     id: formItemId,
-    role: "combobox-tags",
+    role: "combobox",
     type: "button",
     "aria-expanded": open,
     "aria-invalid": rest['aria-invalid'],
@@ -203,9 +204,7 @@ export function InputTags(_ref) {
         return handleAddTag(tag);
       },
       isGroup: true
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "block w-full truncate overflow-hidden text-ellipsis whitespace-nowrap"
-    }, tag.label));
+    }, tag.label);
   })), filteredAll.length > 0 && /*#__PURE__*/React.createElement(CommandGroup, {
     size: size,
     heading: "All Tags"
@@ -217,9 +216,7 @@ export function InputTags(_ref) {
         return handleAddTag(tag);
       },
       isGroup: true
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "block w-full truncate overflow-hidden text-ellipsis whitespace-nowrap"
-    }, tag.label));
+    }, tag.label);
   })), !canCreate && filteredSuggested.length === 0 && filteredAll.length === 0 && /*#__PURE__*/React.createElement(CommandEmpty, null, "No results found."), canCreate && /*#__PURE__*/React.createElement(CommandItem, {
     size: size,
     onSelect: function onSelect() {

package/label/components/label-icon.js

@@ -22,7 +22,12 @@ var LabelIcon = function LabelIcon(props) {
     return getLabelIconSizeInRem(size);
   }, [size]);
   if (!icon && !tooltip) return null;
-  var iconElement = /*#__PURE__*/React.createElement("span", _extends({
+  var resolvedTooltip = typeof tooltip === 'function' ? tooltip() : tooltip;
+  var iconElement = typeof icon === 'function' ? /*#__PURE__*/React.createElement("span", _extends({
+    className: cn('text-muted-foreground', labelIconVariants({
+      size: size
+    }))
+  }, rest), icon()) : /*#__PURE__*/React.createElement("span", _extends({
     className: cn('text-muted-foreground', labelIconVariants({
       size: size
     }))
@@ -33,9 +38,9 @@ var LabelIcon = function LabelIcon(props) {
       height: sizeInRem
     }
   }));
-  if (!tooltip) return iconElement;
+  if (!resolvedTooltip) return iconElement;
   return /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, {
     asChild: true
-  }, iconElement), /*#__PURE__*/React.createElement(TooltipContent, null, tooltip));
+  }, iconElement), /*#__PURE__*/React.createElement(TooltipContent, null, resolvedTooltip));
 };
 export { LabelIcon };

package/label/label.types.d.ts

@@ -3,12 +3,12 @@ import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
 import type { ComponentProps, ReactElement } from 'react';
 export interface LabelProps extends Omit<ComponentProps<typeof LabelPrimitive.Root>, 'size'> {
     size?: FormSizeType;
-    icon?: ReactElement;
-    tooltip?: ReactElement | string;
+    icon?: ReactElement | (() => ReactElement);
+    tooltip?: ReactElement | string | (() => ReactElement);
     disabled?: boolean;
-    disabledTooltip?: ReactElement | string;
+    disabledTooltip?: ReactElement | string | (() => ReactElement);
     noTruncate?: boolean;
 }
 export interface LabelIconProps extends ComponentProps<'span'>, Pick<LabelProps, 'size' | 'tooltip'> {
-    icon?: ReactElement;
+    icon?: ReactElement | (() => ReactElement);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.152",
+  "version": "0.0.154",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -29,7 +29,7 @@
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.6",
-    "@scaleflex/icons-tw": "^0.0.152",
+    "@scaleflex/icons-tw": "^0.0.154",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",

package/select/components/select-icon.js

@@ -12,6 +12,9 @@ export var SelectIcon = function SelectIcon(props) {
     return getIconMarginRightInRem(size);
   }, [size]);
   if (!icon) return null;
+  if (typeof icon === 'function') {
+    return icon();
+  }
   return /*#__PURE__*/cloneElement(icon, {
     size: sizeInRem,
     style: {

package/select/components/selector.js

@@ -46,13 +46,13 @@ export function Selector(_ref) {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
         var option = _step.value;
         if (isOptionGroup(option)) {
-          if (option.value === val) return option.label;
+          if (option.value === val) return typeof option.label === 'function' ? option.label() : option.label;
           var found = option.options.find(function (o) {
             return o.value === val;
           });
-          if (found) return found.label;
+          if (found) return typeof found.label === 'function' ? found.label() : found.label;
         } else if (option.value === val) {
-          return option.label;
+          return typeof option.label === 'function' ? option.label() : option.label;
         }
       }
     } catch (err) {
@@ -79,8 +79,8 @@ export function Selector(_ref) {
   }, value ? getLabelByValue(value) : '')), /*#__PURE__*/React.createElement(SelectContent, _extends({
     className: popoverClassName
   }, selectorContentProps), 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(SelectGroup, {
         key: groupIndex
       }, option.value ? /*#__PURE__*/React.createElement(SelectItem, {
@@ -95,9 +95,9 @@ export function Selector(_ref) {
         className: cn('text-secondary-foreground', selectLabelVariants({
           size: size
         }))
-      }, option.label) : option.label && /*#__PURE__*/React.createElement(SelectLabel, {
+      }, resolvedGroupLabel) : resolvedGroupLabel && /*#__PURE__*/React.createElement(SelectLabel, {
         size: size
-      }, option.label), option.options.map(function (_ref2) {
+      }, resolvedGroupLabel), option.options.map(function (_ref2) {
         var label = _ref2.label,
           optionLabel = _ref2.optionLabel,
           value = _ref2.value,
@@ -105,6 +105,8 @@ export function Selector(_ref) {
           icon = _ref2.icon,
           tooltip = _ref2.tooltip,
           disabledTooltip = _ref2.disabledTooltip;
+        var resolvedLabel = typeof label === 'function' ? label() : label;
+        var resolvedOptionLabel = typeof optionLabel === 'function' ? optionLabel() : optionLabel;
         return /*#__PURE__*/React.createElement(SelectItem, {
           key: value,
           value: value,
@@ -113,10 +115,12 @@ export function Selector(_ref) {
           icon: icon,
           tooltip: tooltip,
           disabledTooltip: disabledTooltip,
-          isGroup: !!option.label
-        }, optionLabel !== null && optionLabel !== void 0 ? optionLabel : label);
+          isGroup: !!resolvedGroupLabel
+        }, 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(SelectGroup, {
       key: groupIndex
     }, /*#__PURE__*/React.createElement(SelectItem, {
@@ -126,7 +130,7 @@ export function Selector(_ref) {
       icon: option.icon,
       tooltip: option.tooltip,
       disabledTooltip: option.disabledTooltip
-    }, (_option$optionLabel = option.optionLabel) !== null && _option$optionLabel !== void 0 ? _option$optionLabel : option.label));
+    }, resolvedOptionLabel !== null && resolvedOptionLabel !== void 0 ? resolvedOptionLabel : resolvedLabel));
   }), /*#__PURE__*/React.createElement(SelectActions, {
     actions: actions
   })));

package/select/select.types.d.ts

@@ -6,15 +6,15 @@ export interface SelectProps extends ComponentProps<typeof SelectPrimitive.Root>
 }
 export interface SelectTriggerProps extends ComponentProps<typeof SelectPrimitive.Trigger> {
     size?: FormSizeType;
-    icon?: ReactElement;
+    icon?: ReactElement | (() => ReactElement);
     readOnly?: boolean;
     'aria-invalid'?: boolean;
 }
 export interface SelectItemProps extends ComponentProps<typeof SelectPrimitive.Item> {
-    icon?: ReactElement;
+    icon?: ReactElement | (() => ReactElement);
     size?: FormSizeType;
-    tooltip?: ReactElement | string;
-    disabledTooltip?: ReactElement | string;
+    tooltip?: ReactElement | string | (() => ReactElement);
+    disabledTooltip?: ReactElement | string | (() => ReactElement);
     isGroup?: boolean;
 }
 export interface SelectLabelProps extends ComponentProps<typeof SelectPrimitive.Label> {
@@ -34,7 +34,7 @@ export interface SelectorProps extends SelectProps {
     readOnly?: boolean;
     size?: FormSizeType;
     className?: string;
-    icon?: ReactElement;
+    icon?: ReactElement | (() => ReactElement);
     defaultOpen?: boolean;
     showGroupSeparator?: boolean;
     formItemId?: string;