@scaleflex/ui-tw 0.0.151 → 0.0.153

package/command/command.component.d.ts

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

package/command/command.component.js

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

package/command/command.utils.d.ts

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

package/command/command.utils.js

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

package/copyable-text/copyable-text.component.js

@@ -1,13 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["value", "textToCopy", "copiedMessage", "tooltipDuration", "onCopy", "className"];
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { WithTooltip } from '@scaleflex/ui-tw/tooltip';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
+import { useCopyToClipboard } from '@scaleflex/ui-tw/utils/use-copy-to-clipboard';
 import { Copy } from 'lucide-react';
-import React, { useState } from 'react';
+import React from 'react';
 function CopyableText(_ref) {
   var value = _ref.value,
     textToCopy = _ref.textToCopy,
@@ -18,66 +16,29 @@ function CopyableText(_ref) {
     onCopy = _ref.onCopy,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    tooltipText = _useState2[0],
-    setTooltipText = _useState2[1];
-  var _useState3 = useState('default'),
-    _useState4 = _slicedToArray(_useState3, 2),
-    tooltipVariant = _useState4[0],
-    setTooltipVariant = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    open = _useState6[0],
-    setOpen = _useState6[1];
-  var handleCopy = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var text;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.prev = 0;
-            text = textToCopy !== null && textToCopy !== void 0 ? textToCopy : typeof value === 'string' ? value : '';
-            _context.next = 4;
-            return navigator.clipboard.writeText(text);
-          case 4:
-            setTooltipText(copiedMessage);
-            setTooltipVariant('success');
-            setOpen(true);
-            onCopy === null || onCopy === void 0 || onCopy();
-            setTimeout(function () {
-              setOpen(false);
-            }, tooltipDuration - 500);
-            setTimeout(function () {
-              setTooltipText('');
-              setTooltipVariant('default');
-            }, tooltipDuration);
-            _context.next = 15;
-            break;
-          case 12:
-            _context.prev = 12;
-            _context.t0 = _context["catch"](0);
-            console.error('Failed to copy', _context.t0);
-          case 15:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[0, 12]]);
-    }));
-    return function handleCopy() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+  var effectiveText = textToCopy !== null && textToCopy !== void 0 ? textToCopy : typeof value === 'string' ? value : '';
+  var _useCopyToClipboard = useCopyToClipboard({
+      copiedMessage: copiedMessage,
+      tooltipDuration: tooltipDuration,
+      onCopy: onCopy
+    }),
+    tooltipText = _useCopyToClipboard.tooltipText,
+    tooltipVariant = _useCopyToClipboard.tooltipVariant,
+    open = _useCopyToClipboard.open,
+    handleCopy = _useCopyToClipboard.handleCopy;
   return /*#__PURE__*/React.createElement("div", _extends({
     "data-slot": "copyable-text",
     className: cn('group inline-flex items-center', className)
   }, props), /*#__PURE__*/React.createElement("span", null, value), /*#__PURE__*/React.createElement(WithTooltip, {
     content: tooltipText,
     variant: tooltipVariant,
-    open: open ? true : undefined
+    open: open || undefined
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    onClick: handleCopy,
+    onClick: function onClick() {
+      return handleCopy(effectiveText);
+    },
+    disabled: !effectiveText,
     className: "text-muted-foreground hover:text-foreground cursor-pointer pl-0.5 opacity-0 transition-opacity group-hover:opacity-100"
   }, /*#__PURE__*/React.createElement(Copy, {
     className: "size-3.5"

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/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;