@scaleflex/ui-tw 0.0.52 → 0.0.53

package/combobox/combobox.component.js

@@ -97,6 +97,7 @@ export function ComboboxContent(_ref2) {
     size: size,
     placeholder: searchPlaceholder
   }), /*#__PURE__*/React.createElement(CommandList, null, /*#__PURE__*/React.createElement(CommandEmpty, null, "No results found."), options === null || options === void 0 ? void 0 : options.map(function (option, groupIndex) {
+    var _option$optionLabel;
     if (isOptionGroup(option)) {
       return /*#__PURE__*/React.createElement(CommandGroup, {
         key: groupIndex,
@@ -104,10 +105,12 @@ export function ComboboxContent(_ref2) {
         size: size
       }, option.options.map(function (_ref3) {
         var label = _ref3.label,
+          optionLabel = _ref3.optionLabel,
           value = _ref3.value,
           disabled = _ref3.disabled,
           icon = _ref3.icon,
-          tooltip = _ref3.tooltip;
+          tooltip = _ref3.tooltip,
+          disabledTooltip = _ref3.disabledTooltip;
         return /*#__PURE__*/React.createElement(CommandItem, {
           size: size,
           multiple: multiple,
@@ -116,12 +119,13 @@ export function ComboboxContent(_ref2) {
           icon: icon,
           value: value,
           tooltip: tooltip,
+          disabledTooltip: disabledTooltip,
           isGroup: !!option.label,
           selectedValue: selectedValue,
           onSelect: function onSelect() {
             return _onSelect(value);
           }
-        }, label);
+        }, optionLabel !== null && optionLabel !== void 0 ? optionLabel : label);
       }), showGroupSeparator && groupIndex !== options.length - 1 && /*#__PURE__*/React.createElement(SelectSeparator, null));
     }
     return /*#__PURE__*/React.createElement(CommandGroup, {
@@ -138,6 +142,6 @@ export function ComboboxContent(_ref2) {
       onSelect: function onSelect() {
         return _onSelect(option.value);
       }
-    }, option.label));
+    }, (_option$optionLabel = option.optionLabel) !== null && _option$optionLabel !== void 0 ? _option$optionLabel : option.label));
   }))));
 }

package/combobox/combobox.types.d.ts

@@ -40,6 +40,7 @@ export interface CommandItemProps extends ComponentProps<typeof CommandPrimitive
     icon?: ReactElement;
     size?: FormSizeType;
     tooltip?: ReactElement | string;
+    disabledTooltip?: ReactElement | string;
     isGroup?: boolean;
     shortcut?: ReactElement | string;
     selectedValue?: string | string[];

package/command/command.component.d.ts

@@ -13,6 +13,6 @@ 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, ...props }: CommandItemProps): React.JSX.Element;
+declare function CommandItem({ className, size, isGroup, icon, tooltip, children, selectedValue, multiple, value, shortcut, disabledTooltip, disabled, ...props }: CommandItemProps): React.JSX.Element;
 declare function CommandShortcut({ className, ...props }: ComponentProps<'span'>): React.JSX.Element;
 export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

package/command/command.component.js

@@ -7,7 +7,7 @@ var _excluded = ["className"],
   _excluded5 = ["className"],
   _excluded6 = ["className", "size"],
   _excluded7 = ["className"],
-  _excluded8 = ["className", "size", "isGroup", "icon", "tooltip", "children", "selectedValue", "multiple", "value", "shortcut"],
+  _excluded8 = ["className", "size", "isGroup", "icon", "tooltip", "children", "selectedValue", "multiple", "value", "shortcut", "disabledTooltip", "disabled"],
   _excluded9 = ["className"];
 import { Dialog, DialogFormDescription, DialogFormHeader, DialogFormTitle, DialogWideContent } from '@scaleflex/ui-tw/dialog';
 import { LabelIcon } from '@scaleflex/ui-tw/label/components/label-icon';
@@ -116,30 +116,35 @@ function CommandItem(_ref8) {
     multiple = _ref8.multiple,
     value = _ref8.value,
     shortcut = _ref8.shortcut,
+    disabledTooltip = _ref8.disabledTooltip,
+    disabled = _ref8.disabled,
     props = _objectWithoutProperties(_ref8, _excluded8);
   var selected = value && (multiple ? selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.includes(value) : value === selectedValue);
   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', 'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50', "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", selectItemVariants({
+    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({
       size: size,
       className: className
-    }), isGroup && getOptionInGroupPaddingLeft(size), selected && 'text-primary pr-7', className)
+    }), isGroup && getOptionInGroupPaddingLeft(size), selected && 'text-primary pr-7', className),
+    disabled: disabled
   }, props), /*#__PURE__*/React.createElement("div", {
     className: "flex flex-1 items-center overflow-hidden"
   }, icon && /*#__PURE__*/React.createElement(SelectIcon, {
     size: size,
     icon: icon,
-    className: cn('text-muted-foreground hover:text-primary shrink-0', selected && 'text-primary')
+    className: cn('text-muted-foreground hover:text-primary shrink-0', selected && 'text-primary', disabled && 'opacity-50')
   }), /*#__PURE__*/React.createElement("div", {
     className: "flex items-center gap-1 overflow-hidden"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "line-clamp-2 overflow-hidden text-left break-words text-ellipsis"
-  }, children), tooltip && /*#__PURE__*/React.createElement("div", {
+    className: cn('line-clamp-2 overflow-hidden text-left break-words text-ellipsis', disabled && 'opacity-50')
+  }, children), (tooltip || disabledTooltip) && /*#__PURE__*/React.createElement("div", {
     className: "flex shrink-0 items-center"
   }, /*#__PURE__*/React.createElement(LabelIcon, {
     size: size,
-    tooltip: tooltip
-  })))), shortcut && /*#__PURE__*/React.createElement(CommandShortcut, null, shortcut), /*#__PURE__*/React.createElement("span", {
+    tooltip: disabled ? disabledTooltip : tooltip
+  })))), shortcut && /*#__PURE__*/React.createElement(CommandShortcut, {
+    className: cn(disabled && 'opacity-50')
+  }, shortcut), /*#__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')

package/command/command.utils.d.ts

@@ -1,5 +1,5 @@
 export declare const selectCommandHeadingOptions: {
-    readonly sm: "[&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:h-8 [&_[cmdk-group-heading]]:text-xs";
-    readonly md: "[&_[cmdk-group-heading]]:py-3 [&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:h-10 [&_[cmdk-group-heading]]:text-sm ";
-    readonly lg: "[&_[cmdk-group-heading]]:py-3 [&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:h-12 [&_[cmdk-group-heading]]:text-base ";
+    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 ";
 };

package/command/command.utils.js

@@ -1,3 +1,3 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
-export var selectCommandHeadingOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, '[&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:h-8 [&_[cmdk-group-heading]]:text-xs'), FormSize.Md, '[&_[cmdk-group-heading]]:py-3 [&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:h-10 [&_[cmdk-group-heading]]:text-sm '), FormSize.Lg, '[&_[cmdk-group-heading]]:py-3 [&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:h-12 [&_[cmdk-group-heading]]:text-base ');
+export var selectCommandHeadingOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, '[&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:min-h-8 [&_[cmdk-group-heading]]:text-xs'), FormSize.Md, '[&_[cmdk-group-heading]]:py-3 [&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:min-h-10 [&_[cmdk-group-heading]]:text-sm '), FormSize.Lg, '[&_[cmdk-group-heading]]:py-3 [&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:min-h-12 [&_[cmdk-group-heading]]:text-base ');

package/form/components/form-checkbox-field.component.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { FieldValues, Path } from 'react-hook-form';
 import type { FormCheckboxFieldProps } from '../form.types';
-declare function FormCheckboxField<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ control, name, label, description, disabled, tooltip, size, checkboxProps, }: FormCheckboxFieldProps<TFieldValues, TName>): React.JSX.Element;
+declare function FormCheckboxField<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ control, name, label, description, disabled, tooltip, disabledTooltip, size, checkboxProps, }: FormCheckboxFieldProps<TFieldValues, TName>): React.JSX.Element;
 export { FormCheckboxField };

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

@@ -21,6 +21,7 @@ function FormCheckboxField(_ref) {
     description = _ref.description,
     disabled = _ref.disabled,
     tooltip = _ref.tooltip,
+    disabledTooltip = _ref.disabledTooltip,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? FormSize.Md : _ref$size,
     checkboxProps = _ref.checkboxProps;
@@ -47,7 +48,9 @@ function FormCheckboxField(_ref) {
         className: "text-foreground",
         htmlFor: (_checkboxProps$id = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.id) !== null && _checkboxProps$id !== void 0 ? _checkboxProps$id : field.name,
         tooltip: tooltip,
-        size: size
+        disabledTooltip: disabledTooltip,
+        size: size,
+        disabled: disabled
       }, label)), description && /*#__PURE__*/React.createElement(FormDescription, {
         size: size
       }, description), /*#__PURE__*/React.createElement(FormMessage, null));

package/form/components/form-checkbox-group-field.component.d.ts

@@ -1,5 +1,5 @@
 import type { FormCheckboxGroupFieldProps } from '@scaleflex/ui-tw/form/form.types';
 import React from 'react';
 import { FieldValues } from 'react-hook-form';
-declare function FormCheckboxGroupField<TFieldValues extends FieldValues>({ control, name, label, description, options, className, tooltip, size, disabled, horizontal, horizontalLabelWidth, }: FormCheckboxGroupFieldProps<TFieldValues>): React.JSX.Element;
+declare function FormCheckboxGroupField<TFieldValues extends FieldValues>({ control, name, label, description, options, className, tooltip, disabledTooltip, size, disabled, horizontal, horizontalLabelWidth, }: FormCheckboxGroupFieldProps<TFieldValues>): React.JSX.Element;
 export { FormCheckboxGroupField };

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

@@ -22,6 +22,7 @@ function FormCheckboxGroupField(_ref) {
     options = _ref.options,
     className = _ref.className,
     tooltip = _ref.tooltip,
+    disabledTooltip = _ref.disabledTooltip,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? FormSize.Md : _ref$size,
     _ref$disabled = _ref.disabled,
@@ -45,7 +46,9 @@ function FormCheckboxGroupField(_ref) {
           size: size
         })),
         size: size,
-        tooltip: tooltip
+        tooltip: tooltip,
+        disabledTooltip: disabledTooltip,
+        disabled: disabled
       }, label), description && !horizontal && /*#__PURE__*/React.createElement(FormDescription, {
         size: size
       }, description)), /*#__PURE__*/React.createElement("div", {
@@ -73,7 +76,9 @@ function FormCheckboxGroupField(_ref) {
           }
         })), /*#__PURE__*/React.createElement(FormLabel, {
           size: size,
-          className: "text-sm font-normal"
+          className: "text-sm font-normal",
+          disabled: disabled,
+          disabledTooltip: disabledTooltip
         }, option.label));
       })), /*#__PURE__*/React.createElement(FormMessage, null));
     }

package/form/components/form-field-group.component.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { FieldValues, Path } from 'react-hook-form';
 import type { FormFieldGroupProps } from '../form.types';
-declare function FormFieldGroup<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ control, name, label, description, size, readOnly, disabled, tooltip, highlight, horizontal, horizontalLabelWidth, children, }: FormFieldGroupProps<TFieldValues, TName>): React.JSX.Element;
+declare function FormFieldGroup<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ control, name, label, description, size, readOnly, disabled, tooltip, disabledTooltip, highlight, horizontal, horizontalLabelWidth, children, }: FormFieldGroupProps<TFieldValues, TName>): React.JSX.Element;
 export { FormFieldGroup };

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

@@ -14,6 +14,7 @@ function FormFieldGroup(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     tooltip = _ref.tooltip,
+    disabledTooltip = _ref.disabledTooltip,
     highlight = _ref.highlight,
     _ref$horizontal = _ref.horizontal,
     horizontal = _ref$horizontal === void 0 ? false : _ref$horizontal,
@@ -34,7 +35,9 @@ function FormFieldGroup(_ref) {
       }, label && /*#__PURE__*/React.createElement(FormLabel, {
         className: cn(horizontal && 'self-start', horizontal && labelHeightVariants[size]),
         size: size,
-        tooltip: tooltip
+        tooltip: tooltip,
+        disabledTooltip: disabledTooltip,
+        disabled: disabled
       }, label), /*#__PURE__*/React.createElement("div", {
         className: "grid gap-1.5"
       }, /*#__PURE__*/React.createElement(FormControl, null, children(field, {

package/form/components/form-radio-group-field.component.d.ts

@@ -1,5 +1,5 @@
 import type { FormRadioGroupFieldProps } from '@scaleflex/ui-tw/form/form.types';
 import React from 'react';
 import { FieldValues } from 'react-hook-form';
-declare function FormRadioGroupField<TFieldValues extends FieldValues>({ control, name, label, description, options, className, tooltip, size, disabled, horizontal, horizontalLabelWidth, }: FormRadioGroupFieldProps<TFieldValues>): React.JSX.Element;
+declare function FormRadioGroupField<TFieldValues extends FieldValues>({ control, name, label, description, options, className, tooltip, disabledTooltip, size, disabled, horizontal, horizontalLabelWidth, }: FormRadioGroupFieldProps<TFieldValues>): React.JSX.Element;
 export { FormRadioGroupField };

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

@@ -21,6 +21,7 @@ function FormRadioGroupField(_ref) {
     options = _ref.options,
     className = _ref.className,
     tooltip = _ref.tooltip,
+    disabledTooltip = _ref.disabledTooltip,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? FormSize.Md : _ref$size,
     _ref$disabled = _ref.disabled,
@@ -44,7 +45,9 @@ function FormRadioGroupField(_ref) {
           size: size
         })),
         size: size,
-        tooltip: tooltip
+        tooltip: tooltip,
+        disabled: disabled,
+        disabledTooltip: disabledTooltip
       }, label), description && !horizontal && /*#__PURE__*/React.createElement(FormDescription, {
         size: size
       }, description)), /*#__PURE__*/React.createElement(RadioGroup, {
@@ -71,7 +74,9 @@ function FormRadioGroupField(_ref) {
           htmlFor: option.id,
           size: size,
           className: "text-sm font-normal",
-          tooltip: option.tooltip
+          tooltip: option.tooltip,
+          disabledTooltip: option.disabledTooltip,
+          disabled: disabled
         }, option.label));
       })), /*#__PURE__*/React.createElement(FormMessage, null));
     }

package/form/components/form-switch-field.component.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { FieldValues, Path } from 'react-hook-form';
 import type { FormSwitchFieldProps } from '../form.types';
-declare function FormSwitchField<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ control, name, label, description, disabled, tooltip, size, layout, switchProps, }: FormSwitchFieldProps<TFieldValues, TName>): React.JSX.Element;
+declare function FormSwitchField<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ control, name, label, description, disabled, tooltip, disabledTooltip, size, layout, switchProps, }: FormSwitchFieldProps<TFieldValues, TName>): React.JSX.Element;
 export { FormSwitchField };

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

@@ -21,6 +21,7 @@ function FormSwitchField(_ref) {
     description = _ref.description,
     disabled = _ref.disabled,
     tooltip = _ref.tooltip,
+    disabledTooltip = _ref.disabledTooltip,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? FormSize.Md : _ref$size,
     _ref$layout = _ref.layout,
@@ -48,12 +49,16 @@ function FormSwitchField(_ref) {
         className: "text-foreground",
         htmlFor: (_switchProps$id = switchProps === null || switchProps === void 0 ? void 0 : switchProps.id) !== null && _switchProps$id !== void 0 ? _switchProps$id : field.name,
         tooltip: tooltip,
-        size: size
+        disabledTooltip: disabledTooltip,
+        size: size,
+        disabled: disabled
       }, label)) : /*#__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,
-        size: size
+        disabledTooltip: disabledTooltip,
+        size: size,
+        disabled: disabled
       }, label), /*#__PURE__*/React.createElement(FormControl, null, /*#__PURE__*/React.createElement(Switch, _extends({
         id: field.name,
         checked: field.value,

package/form/form.types.d.ts

@@ -32,6 +32,7 @@ interface FormBaseFieldProps {
     description?: ReactElement | string;
     disabled?: boolean;
     tooltip?: ReactElement | string;
+    disabledTooltip?: ReactElement | string;
 }
 export interface FormFieldGroupProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> extends UseControllerProps<TFieldValues, TName>, FormBaseFieldProps {
     children: (field: ControllerRenderProps<TFieldValues, TName>, args?: FormFieldArgs) => ReactNode;
@@ -55,10 +56,12 @@ export type FormTextareaFieldProps<TFieldValues extends FieldValues, TName exten
 };
 export interface FlatOption {
     label: ReactElement | string;
+    optionLabel?: ReactElement | string;
     value: string;
     disabled?: boolean;
     icon?: ReactElement;
     tooltip?: ReactElement | string;
+    disabledTooltip?: ReactElement | string;
 }
 export interface OptionGroup {
     label?: ReactElement | string;
@@ -98,12 +101,14 @@ export type RadioOption = {
     label: string;
     id: string;
     disabled?: RadioGroupItemProps['disabled'];
-    tooltip?: string;
+    tooltip?: ReactElement | string;
+    disabledTooltip?: ReactElement | string;
 };
 interface BaseFormGroupFieldProps<TFieldValues extends FieldValues> {
     control: Control<TFieldValues>;
     name: Path<TFieldValues>;
     label?: ReactElement | string;
+    disabledTooltip?: ReactElement | string;
     tooltip?: ReactElement | string;
     description?: ReactElement | string;
     className?: string;

package/label/label.component.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import type { LabelProps } from './label.types';
-declare function Label({ className, size, children, icon, tooltip, ...props }: LabelProps): React.JSX.Element;
+declare function Label({ className, size, children, icon, tooltip, disabledTooltip, disabled, ...props }: LabelProps): React.JSX.Element;
 export { Label };

package/label/label.component.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "size", "children", "icon", "tooltip"];
+var _excluded = ["className", "size", "children", "icon", "tooltip", "disabledTooltip", "disabled"];
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
@@ -23,19 +23,21 @@ function Label(_ref) {
     children = _ref.children,
     icon = _ref.icon,
     tooltip = _ref.tooltip,
+    disabledTooltip = _ref.disabledTooltip,
+    disabled = _ref.disabled,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(LabelPrimitive.Root, _extends({
     "data-slot": "label",
-    className: cn('text-secondary-foreground flex cursor-pointer items-center leading-none font-normal select-none', 'peer-disabled:cursor-not-allowed peer-disabled:opacity-50', 'group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50', 'group-data-[highlight=true]:text-warning-foreground', labelVariants({
+    className: cn('text-secondary-foreground flex cursor-pointer items-center leading-none font-normal select-none', 'peer-disabled:cursor-not-allowed peer-disabled:opacity-50', 'group-data-[disabled=true]:cursor-not-allowed group-data-[disabled=true]:opacity-50', 'group-data-[highlight=true]:text-warning-foreground', labelVariants({
       size: size,
       className: className
     }))
   }, props), /*#__PURE__*/React.createElement("span", {
-    className: "truncate"
-  }, children), (icon || tooltip) && /*#__PURE__*/React.createElement(LabelIcon, {
+    className: cn('truncate')
+  }, children), (icon || tooltip || disabledTooltip) && /*#__PURE__*/React.createElement(LabelIcon, {
     size: size,
     icon: icon,
-    tooltip: tooltip
+    tooltip: disabled ? disabledTooltip : tooltip
   }));
 }
 export { Label };

package/label/label.types.d.ts

@@ -5,6 +5,8 @@ export interface LabelProps extends Omit<ComponentProps<typeof LabelPrimitive.Ro
     size?: FormSizeType;
     icon?: ReactElement;
     tooltip?: ReactElement | string;
+    disabled?: boolean;
+    disabledTooltip?: ReactElement | string;
 }
 export interface LabelIconProps extends ComponentProps<'span'>, Pick<LabelProps, 'size' | 'tooltip'> {
     icon?: ReactElement;

package/package.json

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

package/select/components/selector.js

@@ -1,6 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["value", "onChange", "placeholder", "disabled", "readOnly", "size", "className", "icon", "options", "showGroupSeparator", "formItemId", "popoverClassName", "selectorContentProps", "defaultOpen", "triggerProps"];
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 import { isOptionGroup } from '@scaleflex/ui-tw/form';
 import React from 'react';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from '../';
@@ -22,6 +25,28 @@ export function Selector(_ref) {
     defaultOpen = _ref.defaultOpen,
     triggerProps = _ref.triggerProps,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var getLabelByValue = function getLabelByValue(val) {
+    var _iterator = _createForOfIteratorHelper(options),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var option = _step.value;
+        if (isOptionGroup(option)) {
+          var found = option.options.find(function (o) {
+            return o.value === val;
+          });
+          if (found) return found.label;
+        } else if (option.value === val) {
+          return option.label;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return '';
+  };
   return /*#__PURE__*/React.createElement(Select, _extends({
     value: value,
     onValueChange: readOnly ? undefined : onChange,
@@ -36,9 +61,10 @@ export function Selector(_ref) {
     icon: icon
   }, triggerProps), /*#__PURE__*/React.createElement(SelectValue, {
     placeholder: placeholder
-  })), /*#__PURE__*/React.createElement(SelectContent, _extends({
+  }, value ? getLabelByValue(value) : '')), /*#__PURE__*/React.createElement(SelectContent, _extends({
     className: popoverClassName
   }, selectorContentProps), options.map(function (option, groupIndex) {
+    var _option$optionLabel;
     if (isOptionGroup(option)) {
       return /*#__PURE__*/React.createElement(SelectGroup, {
         key: groupIndex
@@ -46,10 +72,12 @@ export function Selector(_ref) {
         size: size
       }, option.label), option.options.map(function (_ref2) {
         var label = _ref2.label,
+          optionLabel = _ref2.optionLabel,
           value = _ref2.value,
           disabled = _ref2.disabled,
           icon = _ref2.icon,
-          tooltip = _ref2.tooltip;
+          tooltip = _ref2.tooltip,
+          disabledTooltip = _ref2.disabledTooltip;
         return /*#__PURE__*/React.createElement(SelectItem, {
           key: value,
           value: value,
@@ -57,8 +85,9 @@ export function Selector(_ref) {
           size: size,
           icon: icon,
           tooltip: tooltip,
+          disabledTooltip: disabledTooltip,
           isGroup: !!option.label
-        }, label);
+        }, optionLabel !== null && optionLabel !== void 0 ? optionLabel : label);
       }), showGroupSeparator && groupIndex !== options.length - 1 && /*#__PURE__*/React.createElement(SelectSeparator, null));
     }
     return /*#__PURE__*/React.createElement(SelectGroup, {
@@ -68,7 +97,8 @@ export function Selector(_ref) {
       disabled: option.disabled,
       size: size,
       icon: option.icon,
-      tooltip: option.tooltip
-    }, option.label));
+      tooltip: option.tooltip,
+      disabledTooltip: option.disabledTooltip
+    }, (_option$optionLabel = option.optionLabel) !== null && _option$optionLabel !== void 0 ? _option$optionLabel : option.label));
   })));
 }

package/select/select.component.d.ts

@@ -13,7 +13,7 @@ export declare const selectItemVariants: (props?: ({
 declare function SelectTrigger({ className, size, children, readOnly, icon, ...props }: SelectTriggerProps): React.JSX.Element;
 declare function SelectContent({ className, children, position, ...props }: ComponentProps<typeof SelectPrimitive.Content>): React.JSX.Element;
 declare function SelectLabel({ className, size, ...props }: SelectLabelProps): React.JSX.Element;
-declare function SelectItem({ className, children, size, icon, tooltip, isGroup, ...props }: SelectItemProps): React.JSX.Element;
+declare function SelectItem({ className, children, size, icon, tooltip, isGroup, disabled, disabledTooltip, ...props }: SelectItemProps): React.JSX.Element;
 declare function SelectSeparator({ className, ...props }: ComponentProps<typeof SelectPrimitive.Separator>): React.JSX.Element;
 declare function SelectScrollUpButton({ className, ...props }: ComponentProps<typeof SelectPrimitive.ScrollUpButton>): React.JSX.Element;
 declare function SelectScrollDownButton({ className, ...props }: ComponentProps<typeof SelectPrimitive.ScrollDownButton>): React.JSX.Element;

package/select/select.component.js

@@ -5,7 +5,7 @@ import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["className", "size", "children", "readOnly", "icon"],
   _excluded2 = ["className", "children", "position"],
   _excluded3 = ["className", "size"],
-  _excluded4 = ["className", "children", "size", "icon", "tooltip", "isGroup"],
+  _excluded4 = ["className", "children", "size", "icon", "tooltip", "isGroup", "disabled", "disabledTooltip"],
   _excluded5 = ["className"],
   _excluded6 = ["className"],
   _excluded7 = ["className"];
@@ -124,12 +124,15 @@ function SelectItem(_ref7) {
     icon = _ref7.icon,
     tooltip = _ref7.tooltip,
     isGroup = _ref7.isGroup,
+    disabled = _ref7.disabled,
+    disabledTooltip = _ref7.disabledTooltip,
     props = _objectWithoutProperties(_ref7, _excluded4);
   return /*#__PURE__*/React.createElement(SelectPrimitive.Item, _extends({
     "data-slot": "select-item",
-    className: cn('relative flex cursor-pointer items-center gap-2 outline-hidden select-none', 'focus:bg-accent focus:text-accent-foreground', '*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2', 'data-[state=checked]:text-accent-foreground', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50', "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", selectItemVariants({
+    className: cn('relative flex cursor-pointer items-center gap-2 outline-hidden select-none', 'focus:bg-accent focus:text-accent-foreground', '*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2', 'data-[state=checked]:text-accent-foreground', 'data-[disabled]:cursor-not-allowed', "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", selectItemVariants({
       size: size
-    }), isGroup && getOptionInGroupPaddingLeft(size), className)
+    }), isGroup && getOptionInGroupPaddingLeft(size), className),
+    disabled: disabled
   }, props), /*#__PURE__*/React.createElement("span", {
     className: "absolute right-2 flex size-3.5 items-center justify-center"
   }, /*#__PURE__*/React.createElement(SelectPrimitive.ItemIndicator, null, /*#__PURE__*/React.createElement(CheckIcon, {
@@ -139,12 +142,12 @@ function SelectItem(_ref7) {
   }, icon && /*#__PURE__*/React.createElement(SelectIcon, {
     size: size,
     icon: icon,
-    className: "text-muted-foreground data-[state=checked]:text-primary"
-  }), /*#__PURE__*/React.createElement(SelectPrimitive.ItemText, {
-    className: "line-clamp-2 overflow-hidden break-words text-ellipsis"
-  }, children), tooltip && /*#__PURE__*/React.createElement(LabelIcon, {
+    className: cn('text-muted-foreground data-[state=checked]:text-primary', disabled && 'opacity-50')
+  }), /*#__PURE__*/React.createElement(SelectPrimitive.ItemText, null, /*#__PURE__*/React.createElement("span", {
+    className: cn('line-clamp-2 overflow-hidden break-words text-ellipsis', disabled && 'opacity-50')
+  }, children)), (tooltip || disabledTooltip) && /*#__PURE__*/React.createElement(LabelIcon, {
     size: size,
-    tooltip: tooltip
+    tooltip: disabled ? disabledTooltip : tooltip
   })));
 }
 function SelectSeparator(_ref8) {

package/select/select.constants.d.ts

@@ -1,7 +1,7 @@
 export declare const selectLabelSizeOptions: {
-    readonly sm: "py-2 px-3 h-8 text-xs";
-    readonly md: "py-3 px-4 h-10 text-sm ";
-    readonly lg: "py-3 px-4 h-12 text-base ";
+    readonly sm: "py-2 px-3 min-h-8 text-xs";
+    readonly md: "py-3 px-4 min-h-10 text-sm ";
+    readonly lg: "py-3 px-4 min-h-12 text-base ";
 };
 export declare const selectReadOnlyClassNames = "bg-secondary text-foreground pointer-events-none cursor-default disabled:opacity-100";
 export declare const getBaseSelectClassNames: () => string[];

package/select/select.constants.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
-export var selectLabelSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'py-2 px-3 h-8 text-xs'), FormSize.Md, 'py-3 px-4 h-10 text-sm '), FormSize.Lg, 'py-3 px-4 h-12 text-base ');
+export var selectLabelSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'py-2 px-3 min-h-8 text-xs'), FormSize.Md, 'py-3 px-4 min-h-10 text-sm '), FormSize.Lg, 'py-3 px-4 min-h-12 text-base ');
 export var selectReadOnlyClassNames = 'bg-secondary text-foreground pointer-events-none cursor-default disabled:opacity-100';
 export var getBaseSelectClassNames = function getBaseSelectClassNames() {
   return ['flex w-full cursor-pointer items-center justify-between gap-2 whitespace-nowrap', "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"];

package/select/select.types.d.ts

@@ -14,6 +14,7 @@ export interface SelectItemProps extends ComponentProps<typeof SelectPrimitive.I
     icon?: ReactElement;
     size?: FormSizeType;
     tooltip?: ReactElement | string;
+    disabledTooltip?: ReactElement | string;
     isGroup?: boolean;
 }
 export interface SelectLabelProps extends ComponentProps<typeof SelectPrimitive.Label> {