@scaleflex/ui-tw 0.0.152 → 0.0.153

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/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'],
@@ -202,7 +203,8 @@ export function InputTags(_ref) {
       onSelect: function onSelect() {
         return handleAddTag(tag);
       },
-      isGroup: true
+      isGroup: true,
+      labelTooltip: tag.label
     }, /*#__PURE__*/React.createElement("span", {
       className: "block w-full truncate overflow-hidden text-ellipsis whitespace-nowrap"
     }, tag.label));
@@ -216,7 +218,8 @@ export function InputTags(_ref) {
       onSelect: function onSelect() {
         return handleAddTag(tag);
       },
-      isGroup: true
+      isGroup: true,
+      labelTooltip: tag.label
     }, /*#__PURE__*/React.createElement("span", {
       className: "block w-full truncate overflow-hidden text-ellipsis whitespace-nowrap"
     }, tag.label));

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.153",
   "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.153",
     "@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;

package/textarea/components/textarea-with-actions.js

@@ -55,7 +55,9 @@ function TextareaWithActions(_ref) {
     }
     onBlur === null || onBlur === void 0 || onBlur(e);
   };
-  var hasBottomArea = leftToolbar || rightToolbar || showCharCount;
+  var resolvedLeftToolbar = typeof leftToolbar === 'function' ? leftToolbar() : leftToolbar;
+  var resolvedRightToolbar = typeof rightToolbar === 'function' ? rightToolbar() : rightToolbar;
+  var hasBottomArea = resolvedLeftToolbar || resolvedRightToolbar || showCharCount;
   return /*#__PURE__*/React.createElement("div", {
     className: "relative"
   }, /*#__PURE__*/React.createElement(Textarea, _extends({}, textareaProps, {
@@ -73,12 +75,12 @@ function TextareaWithActions(_ref) {
     className: cn('bg-background absolute right-2.5 bottom-0.25 left-1.5', textareaBottomActionAreaPadding[size]),
     onClick: handleActionClick,
     tabIndex: -1
-  }, leftToolbar && /*#__PURE__*/React.createElement("div", {
+  }, resolvedLeftToolbar && /*#__PURE__*/React.createElement("div", {
     className: "absolute bottom-1.5 left-0 flex items-center gap-0.5"
-  }, leftToolbar), /*#__PURE__*/React.createElement("div", {
+  }, resolvedLeftToolbar), /*#__PURE__*/React.createElement("div", {
     className: "absolute right-0 bottom-1.5 flex items-center gap-0.5"
   }, showCharCount && /*#__PURE__*/React.createElement("span", {
-    className: cn(textareaCharCountTextSizeOptions[size], rightToolbar && 'mr-1', charCountColorClass, disabled && 'opacity-50')
-  }, currentLength, "/", maxCharCount), rightToolbar)));
+    className: cn(textareaCharCountTextSizeOptions[size], resolvedRightToolbar && 'mr-1', charCountColorClass, disabled && 'opacity-50')
+  }, currentLength, "/", maxCharCount), resolvedRightToolbar)));
 }
 export { TextareaWithActions };

package/textarea/textarea.types.d.ts

@@ -8,8 +8,8 @@ export interface TextareaProps extends Omit<ComponentProps<'textarea'>, 'size'>
     maxCharCount?: number;
 }
 export interface TextareaWithActionsProps extends TextareaProps {
-    leftToolbar?: ReactElement;
-    rightToolbar?: ReactElement;
+    leftToolbar?: ReactElement | (() => ReactElement);
+    rightToolbar?: ReactElement | (() => ReactElement);
 }
 export interface RightToolbarButtonsProps {
     size?: FormSizeType;

package/tooltip/tooltip.component.js

@@ -64,7 +64,8 @@ function WithTooltip(_ref5) {
     delayDuration = _ref5.delayDuration,
     open = _ref5.open,
     otherProps = _objectWithoutProperties(_ref5, _excluded3);
-  if (!content) return children;
+  var resolvedContent = typeof content === 'function' ? content() : content;
+  if (!resolvedContent) return children;
   return /*#__PURE__*/React.createElement(Tooltip, {
     open: open,
     delayDuration: delayDuration || 700
@@ -72,6 +73,6 @@ function WithTooltip(_ref5) {
     asChild: true
   }, children), /*#__PURE__*/React.createElement(TooltipContent, _extends({
     variant: variant
-  }, otherProps), content));
+  }, otherProps), resolvedContent));
 }
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, WithTooltip };

package/tooltip/tooltip.types.d.ts

@@ -5,7 +5,7 @@ export type TooltipVariantType = (typeof TooltipVariant)[keyof typeof TooltipVar
 export interface WithTooltipProps extends Omit<ComponentProps<typeof TooltipPrimitive.Content>, 'content'> {
     children: ReactElement;
     open?: boolean;
-    content?: ReactElement | undefined | string;
+    content?: ReactElement | undefined | string | (() => ReactElement);
     variant?: TooltipVariantType;
     delayDuration?: number;
 }