@scaleflex/ui-tw 0.0.93 → 0.0.95

package/button/button.constants.d.ts

@@ -13,10 +13,10 @@ export declare const buttonSizeOptions: {
     readonly sm: "h-8 px-3 py-2 text-sm";
     readonly md: "h-10 px-4 py-2.5 text-base";
     readonly lg: "h-12 px-6 py-3.5 text-lg";
-    readonly "icon-xs": "size-6 p-1.5 [&_svg:not([class*='size-'])]:size-3";
-    readonly "icon-sm": "size-8 p-2 [&_svg:not([class*='size-'])]:size-3.5";
-    readonly "icon-md": "size-10 p-2.5 [&_svg:not([class*='size-'])]:size-4";
-    readonly "icon-lg": "size-12 p-3.5 [&_svg:not([class*='size-'])]:size-4.5";
+    readonly "icon-xs": "size-6 p-1.5 [&_svg:not([class*='size-'])]:size-4";
+    readonly "icon-sm": "size-8 p-2 [&_svg:not([class*='size-'])]:size-4.5";
+    readonly "icon-md": "size-10 p-2.5 [&_svg:not([class*='size-'])]:size-5";
+    readonly "icon-lg": "size-12 p-3.5 [&_svg:not([class*='size-'])]:size-5.5";
 };
 export declare const buttonEndIconSizes: {
     readonly xs: "ml-1.5 size-3";

package/button/button.constants.js

@@ -9,7 +9,7 @@ export var ButtonSize = {
   IconMd: 'icon-md',
   IconLg: 'icon-lg'
 };
-export var buttonSizeOptions = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, 'h-6 px-2.5 py-1.5 text-xs'), ButtonSize.Sm, 'h-8 px-3 py-2 text-sm'), ButtonSize.Md, 'h-10 px-4 py-2.5 text-base'), ButtonSize.Lg, 'h-12 px-6 py-3.5 text-lg'), ButtonSize.IconXs, "size-6 p-1.5 [&_svg:not([class*='size-'])]:size-3"), ButtonSize.IconSm, "size-8 p-2 [&_svg:not([class*='size-'])]:size-3.5"), ButtonSize.IconMd, "size-10 p-2.5 [&_svg:not([class*='size-'])]:size-4"), ButtonSize.IconLg, "size-12 p-3.5 [&_svg:not([class*='size-'])]:size-4.5");
+export var buttonSizeOptions = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, 'h-6 px-2.5 py-1.5 text-xs'), ButtonSize.Sm, 'h-8 px-3 py-2 text-sm'), ButtonSize.Md, 'h-10 px-4 py-2.5 text-base'), ButtonSize.Lg, 'h-12 px-6 py-3.5 text-lg'), ButtonSize.IconXs, "size-6 p-1.5 [&_svg:not([class*='size-'])]:size-4"), ButtonSize.IconSm, "size-8 p-2 [&_svg:not([class*='size-'])]:size-4.5"), ButtonSize.IconMd, "size-10 p-2.5 [&_svg:not([class*='size-'])]:size-5"), ButtonSize.IconLg, "size-12 p-3.5 [&_svg:not([class*='size-'])]:size-5.5");
 export var buttonEndIconSizes = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, 'ml-1.5 size-3'), ButtonSize.Sm, 'ml-1.5 size-3.5'), ButtonSize.Md, 'ml-2 size-4'), ButtonSize.Lg, 'ml-2 size-4.5'), ButtonSize.IconXs, 'ml-1.5 size-3'), ButtonSize.IconSm, 'ml-1.5 size-3.5'), ButtonSize.IconMd, 'ml-2 size-4'), ButtonSize.IconLg, 'ml-2 size-4.5');
 export var buttonStartIconSizes = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, 'mr-1.5 size-3'), ButtonSize.Sm, 'mr-1.5 size-3.5'), ButtonSize.Md, 'mr-2 size-4'), ButtonSize.Lg, 'mr-2 size-4.5'), ButtonSize.IconXs, 'mr-1.5 size-3'), ButtonSize.IconSm, 'mr-1.5 size-3.5'), ButtonSize.IconMd, 'mr-2 size-4'), ButtonSize.IconLg, 'mr-2 size-4.5');
 export var ButtonVariant = {

package/calendar/calendar.component.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
@@ -11,6 +12,7 @@ var _excluded = ["className", "classNames", "showOutsideDays", "captionLayout",
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { Button, buttonVariants } from '@scaleflex/ui-tw/button';
+import { buttonBaseClassNames } from '@scaleflex/ui-tw/button/button.constants';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 import React from 'react';
@@ -50,12 +52,12 @@ function Calendar(_ref) {
       months: cn('flex gap-4 flex-col md:flex-row relative', defaultClassNames.months),
       month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
       nav: cn('flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between', defaultClassNames.nav),
-      button_previous: cn(buttonVariants({
+      button_previous: cn.apply(void 0, [buttonVariants({
         variant: buttonVariant
-      }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_previous),
-      button_next: cn(buttonVariants({
+      }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_previous].concat(_toConsumableArray(buttonBaseClassNames))),
+      button_next: cn.apply(void 0, [buttonVariants({
         variant: buttonVariant
-      }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_next),
+      }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_next].concat(_toConsumableArray(buttonBaseClassNames))),
       month_caption: cn('flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)', defaultClassNames.month_caption),
       dropdowns: cn('w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5', defaultClassNames.dropdowns),
       dropdown_root: cn('relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md', defaultClassNames.dropdown_root),

package/color-palette/color-palette.component.js

@@ -36,7 +36,7 @@ function ColorPalette(_ref) {
       key: color,
       value: color,
       "data-slot": "color-palette-item",
-      className: cn('border-border inline-block rounded-lg border-1 p-0.5 hover:opacity-80', focusRingClassNames, colorBoxVariants({
+      className: cn('border-border hover:border-secondary-foreground/50 inline-block rounded-lg border-1 p-0.5 hover:opacity-80', focusRingClassNames, colorBoxVariants({
         size: size
       }), colorBoxClassName, value === color && 'border-primary'),
       "aria-label": "Color ".concat(color)

package/combobox/combobox-users/combobox-users.component.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ComboboxUsersProps } from '../combobox.types';
+export declare function ComboboxUsers({ options, value, onChange, placeholder, className, disabled, size, readOnly, popoverClassName, onBlur, showGroupSeparator, defaultOpen, searchPlaceholder, popoverContentProps, actions, fixedActions, triggerProps, ...rest }: ComboboxUsersProps): React.JSX.Element;

package/combobox/combobox-users/combobox-users.component.js

@@ -0,0 +1,228 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "size", "readOnly", "popoverClassName", "onBlur", "showGroupSeparator", "defaultOpen", "searchPlaceholder", "popoverContentProps", "actions", "fixedActions", "triggerProps"];
+import { ButtonVariant, buttonVariants } from '@scaleflex/ui-tw/button';
+import { buttonBaseClassNames } from '@scaleflex/ui-tw/button/button.constants';
+import { SelectActions } from '@scaleflex/ui-tw/combobox/combobox.component';
+import { createClearHandlers, flattenUsersOptions, isUserOptionGroup } from '@scaleflex/ui-tw/combobox/combobox.utils';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@scaleflex/ui-tw/command';
+import { CommandUserItem } from '@scaleflex/ui-tw/command/command.component';
+import { Pill } from '@scaleflex/ui-tw/pill';
+import { Popover, PopoverContent, PopoverTrigger } from '@scaleflex/ui-tw/popover';
+import { SelectSeparator } from '@scaleflex/ui-tw/select';
+import { selectLabelSizeOptions } from '@scaleflex/ui-tw/select/select.constants';
+import { focusRingClassNames, getBaseInputClasses, readOnlyClassNames, selectionHighlightClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
+import { textareaVariants } from '@scaleflex/ui-tw/textarea';
+import { getToolbarSizes } from '@scaleflex/ui-tw/textarea/textarea.utils';
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+import { cn } from '@scaleflex/ui-tw/utils/cn';
+import { cva } from 'class-variance-authority';
+import { ChevronsUpDownIcon, UserCircle2Icon } from 'lucide-react';
+import * as React from 'react';
+import { useState } from 'react';
+import { comboboxMultiTagsDefaultSizeOptions, iconSizeInTriggerOptions } from '../combobox.constants';
+var selectLabelVariants = cva('', {
+  variants: {
+    size: selectLabelSizeOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md
+  }
+});
+export function ComboboxUsers(_ref) {
+  var options = _ref.options,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'Select options...' : _ref$placeholder,
+    className = _ref.className,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? FormSize.Md : _ref$size,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    popoverClassName = _ref.popoverClassName,
+    onBlur = _ref.onBlur,
+    _ref$showGroupSeparat = _ref.showGroupSeparator,
+    showGroupSeparator = _ref$showGroupSeparat === void 0 ? false : _ref$showGroupSeparat,
+    _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+    searchPlaceholder = _ref.searchPlaceholder,
+    popoverContentProps = _ref.popoverContentProps,
+    actions = _ref.actions,
+    fixedActions = _ref.fixedActions,
+    triggerProps = _ref.triggerProps,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _getToolbarSizes = getToolbarSizes(size),
+    buttonSize = _getToolbarSizes.buttonSize;
+  var _useState = useState(defaultOpen),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var selectedOptions = flattenUsersOptions(options).filter(function (option) {
+    return value.includes(option.value);
+  });
+  var isSelected = selectedOptions.length > 0;
+  var toggleValue = function toggleValue(v) {
+    var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref2$isTriggerOnBlur = _ref2.isTriggerOnBlur,
+      isTriggerOnBlur = _ref2$isTriggerOnBlur === void 0 ? false : _ref2$isTriggerOnBlur;
+    var nextValue = value.includes(v) ? value.filter(function (val) {
+      return val !== v;
+    }) : [].concat(_toConsumableArray(value), [v]);
+    onChange(nextValue);
+    if (isTriggerOnBlur) {
+      onBlur === null || onBlur === void 0 || onBlur(nextValue);
+    }
+  };
+  var onOpenChange = function onOpenChange(isOpen) {
+    if (!isOpen) {
+      onBlur === null || onBlur === void 0 || onBlur(value);
+    }
+    setOpen(isOpen);
+  };
+  var onClearAll = function onClearAll() {
+    onChange([]);
+    onBlur === null || onBlur === void 0 || onBlur([]);
+    setOpen(false);
+  };
+  var _createClearHandlers = createClearHandlers(onClearAll),
+    handleOnTriggerClick = _createClearHandlers.onClick,
+    handleOnTriggerKeyDown = _createClearHandlers.onKeyDown;
+  return /*#__PURE__*/React.createElement(Popover, {
+    open: open,
+    defaultOpen: defaultOpen,
+    onOpenChange: onOpenChange
+  }, /*#__PURE__*/React.createElement(PopoverTrigger, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement("button", _extends({
+    role: "combobox",
+    "aria-expanded": open,
+    "aria-invalid": rest['aria-invalid'],
+    className: cn.apply(void 0, ['flex w-full', isSelected ? 'flex-col' : 'items-center'].concat(_toConsumableArray(getBaseInputClasses()), [readOnly && readOnlyClassNames, selectionHighlightClassNames, focusRingClassNames, !isSelected && textareaVariants({
+      size: size
+    }), !isSelected && comboboxMultiTagsDefaultSizeOptions[size], className])),
+    disabled: disabled,
+    onClick: handleOnTriggerClick,
+    onKeyDown: handleOnTriggerKeyDown
+  }, triggerProps), !isSelected ? /*#__PURE__*/React.createElement("span", {
+    className: "text-muted-foreground"
+  }, placeholder) : /*#__PURE__*/React.createElement("div", {
+    className: cn('flex w-full flex-wrap justify-start gap-2 overflow-y-auto', textareaVariants({
+      size: size
+    }), 'min-h-auto')
+  }, selectedOptions.map(function (option) {
+    return /*#__PURE__*/React.createElement(Pill, {
+      key: option.value,
+      size: size,
+      variant: "default",
+      removable: true,
+      className: "max-w-xs",
+      onRemove: function onRemove(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        toggleValue(option.value, {
+          isTriggerOnBlur: true
+        });
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "flex items-center gap-1.5"
+    }, option.profileUrl ? /*#__PURE__*/React.createElement("img", {
+      className: "size-5 rounded-full",
+      src: option.profileUrl,
+      alt: "profile image"
+    }) : /*#__PURE__*/React.createElement(UserCircle2Icon, {
+      className: "text-muted-foreground size-5"
+    }), /*#__PURE__*/React.createElement("span", null, option.email)));
+  })), isSelected ? /*#__PURE__*/React.createElement("div", {
+    className: "flex w-full items-center justify-between p-1.5"
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    "data-clear-icon": "true",
+    "aria-label": "Clear all",
+    className: cn.apply(void 0, _toConsumableArray(buttonBaseClassNames).concat([focusRingClassNames, buttonVariants({
+      size: buttonSize,
+      variant: ButtonVariant.GhostSecondary
+    })]))
+  }, "Clear all"), /*#__PURE__*/React.createElement(ChevronsUpDownIcon, {
+    className: cn('text-muted-foreground/70 mr-1.5 ml-auto shrink-0', iconSizeInTriggerOptions[size])
+  })) : /*#__PURE__*/React.createElement(ChevronsUpDownIcon, {
+    className: cn('text-muted-foreground/70 my-auto ml-auto shrink-0', iconSizeInTriggerOptions[size])
+  }))), /*#__PURE__*/React.createElement(PopoverContent, _extends({
+    className: cn('p-0', popoverClassName)
+  }, popoverContentProps), /*#__PURE__*/React.createElement(Command, null, /*#__PURE__*/React.createElement(CommandInput, {
+    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) {
+    if (isUserOptionGroup(option)) {
+      return /*#__PURE__*/React.createElement(CommandGroup, {
+        key: groupIndex,
+        heading: !option.value ? option.label : undefined,
+        size: size
+      }, option.value && /*#__PURE__*/React.createElement(CommandItem, {
+        size: size,
+        multiple: true,
+        disabled: option.disabled,
+        key: option.value,
+        icon: option.icon,
+        value: option.value,
+        tooltip: option.tooltip,
+        disabledTooltip: option.disabledTooltip,
+        isGroup: true,
+        selectedValue: value,
+        onSelect: function onSelect() {
+          return toggleValue(option.value);
+        },
+        className: cn('text-secondary-foreground', selectLabelVariants({
+          size: size
+        }))
+      }, option.label), option.options.map(function (_ref3) {
+        var name = _ref3.name,
+          email = _ref3.email,
+          profileUrl = _ref3.profileUrl,
+          value = _ref3.value,
+          disabled = _ref3.disabled;
+        var isGroupSelected = option.value && Array.isArray(value) && value.includes(option.value);
+        return /*#__PURE__*/React.createElement(CommandUserItem, {
+          size: size,
+          multiple: true,
+          disabled: disabled || !!isGroupSelected,
+          key: value,
+          name: name,
+          email: email,
+          profileUrl: profileUrl,
+          value: value,
+          isGroup: !!option.label,
+          selectedValue: value,
+          onSelect: function onSelect() {
+            return toggleValue(value);
+          }
+        });
+      }), showGroupSeparator && groupIndex !== options.length - 1 && /*#__PURE__*/React.createElement(SelectSeparator, null));
+    }
+    return /*#__PURE__*/React.createElement(CommandGroup, {
+      key: groupIndex
+    }, /*#__PURE__*/React.createElement(CommandUserItem, {
+      size: size,
+      multiple: true,
+      disabled: option.disabled,
+      key: option.value,
+      name: option.name,
+      email: option.email,
+      profileUrl: option.profileUrl,
+      value: option.value,
+      selectedValue: value,
+      onSelect: function onSelect() {
+        return toggleValue(option.value);
+      }
+    }));
+  }), !fixedActions && /*#__PURE__*/React.createElement(SelectActions, {
+    actions: actions
+  })), fixedActions && /*#__PURE__*/React.createElement(SelectActions, {
+    actions: actions
+  }))));
+}

package/combobox/combobox.types.d.ts

@@ -1,5 +1,6 @@
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { SelectOption } from '@scaleflex/ui-tw/form';
+import { SelectUserOption } from '@scaleflex/ui-tw/form/form.types';
 import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
 import { Command as CommandPrimitive } from 'cmdk';
 import type { ButtonHTMLAttributes, ComponentProps, ElementType, KeyboardEvent, MouseEvent, ReactElement, ReactNode } from 'react';
@@ -71,6 +72,11 @@ export interface CommandItemProps extends ComponentProps<typeof CommandPrimitive
     iconClassName?: string;
     textClassName?: string;
 }
+export interface CommandUserItemProps extends Omit<CommandItemProps, 'icon' | 'children' | 'tooltip' | 'disabledTooltip'> {
+    name: ReactElement | string;
+    email: ReactElement | string;
+    profileUrl?: string;
+}
 interface ComboboxCommonProps {
     options: SelectOption[];
     placeholder?: string;
@@ -116,4 +122,10 @@ export interface ComboboxMultiTagProps extends ComboboxCommonProps {
     onChange: (value: string[]) => void;
     onBlur?: (value: string[]) => void;
 }
+export interface ComboboxUsersProps extends Omit<ComboboxCommonProps, 'options'> {
+    value: string[];
+    options: SelectUserOption[];
+    onChange: (value: string[]) => void;
+    onBlur?: (value: string[]) => void;
+}
 export {};

package/combobox/combobox.utils.d.ts

@@ -1,7 +1,10 @@
 import { FlatOption, SelectOption } from '@scaleflex/ui-tw/form';
+import { SelectUserOption, UserFlatOption, UserOptionGroup } from '@scaleflex/ui-tw/form/form.types';
 import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
 import { KeyboardEvent, MouseEvent } from 'react';
 export declare const flattenOptions: (options: SelectOption[]) => FlatOption[];
+export declare const isUserOptionGroup: (option: UserFlatOption | UserOptionGroup) => option is UserOptionGroup;
+export declare const flattenUsersOptions: (options: SelectUserOption[]) => UserFlatOption[];
 export declare const createClearHandlers: (onClearAll?: () => void, optionsLength?: number, toggleFirstOption?: () => void) => {
     onClick: (e: MouseEvent<HTMLButtonElement>) => void;
     onKeyDown: (e: KeyboardEvent<HTMLButtonElement>) => void;

package/combobox/combobox.utils.js

@@ -5,6 +5,14 @@ export var flattenOptions = function flattenOptions(options) {
     return isOptionGroup(option) ? option.options : [option];
   });
 };
+export var isUserOptionGroup = function isUserOptionGroup(option) {
+  return 'options' in option;
+};
+export var flattenUsersOptions = function flattenUsersOptions(options) {
+  return options.flatMap(function (option) {
+    return isUserOptionGroup(option) ? option.options : [option];
+  });
+};
 function isClearIconEvent(event) {
   var target = event.type === 'keydown' ? document.activeElement : event.target;
   return !!target.closest('[data-clear-icon]');

package/combobox/index.d.ts

@@ -3,4 +3,5 @@ export { ComboboxSingle } from './combobox-single/combobox-single.component';
 export { ComboboxMultiInline } from './combobox-multi-inline/combobox-multi-inline.component';
 export { ComboboxMultiTag } from './combobox-multi-tag/combobox-multi-tag.component';
 export { ComboboxMultiCheckbox } from './combobox-multi-checkbox/combobox-multi-checkbox.component';
+export { ComboboxUsers } from './combobox-users/combobox-users.component';
 export { flattenOptions } from './combobox.utils';

package/combobox/index.js

@@ -3,4 +3,5 @@ export { ComboboxSingle } from './combobox-single/combobox-single.component';
 export { ComboboxMultiInline } from './combobox-multi-inline/combobox-multi-inline.component';
 export { ComboboxMultiTag } from './combobox-multi-tag/combobox-multi-tag.component';
 export { ComboboxMultiCheckbox } from './combobox-multi-checkbox/combobox-multi-checkbox.component';
+export { ComboboxUsers } from './combobox-users/combobox-users.component';
 export { flattenOptions } from './combobox.utils';

package/command/command.component.d.ts

@@ -1,4 +1,4 @@
-import type { CommandClearProps, CommandGroupProps, CommandInputProps, CommandItemProps } from '@scaleflex/ui-tw/combobox/combobox.types';
+import { CommandClearProps, CommandGroupProps, CommandInputProps, CommandItemProps, CommandUserItemProps } from '@scaleflex/ui-tw/combobox/combobox.types';
 import { Dialog } from '@scaleflex/ui-tw/dialog';
 import { Command as CommandPrimitive } from 'cmdk';
 import React from 'react';
@@ -15,6 +15,7 @@ declare function CommandEmpty({ className, ...rest }: ComponentProps<typeof Comm
 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 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 CommandShortcut({ className, ...props }: ComponentProps<'span'>): React.JSX.Element;
-export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandCheckboxItem, CommandShortcut, CommandSeparator, CommandClear, };
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandCheckboxItem, CommandShortcut, CommandSeparator, CommandClear, CommandUserItem, };

package/command/command.component.js

@@ -10,8 +10,9 @@ var _excluded = ["className"],
   _excluded7 = ["className", "size"],
   _excluded8 = ["className"],
   _excluded9 = ["className", "size", "isGroup", "icon", "tooltip", "children", "selectedValue", "multiple", "value", "shortcut", "disabledTooltip", "disabled", "iconClassName", "textClassName"],
-  _excluded10 = ["className", "textClassName", "size", "isGroup", "children", "selectedValue", "value", "icon", "disabled", "tooltip", "disabledTooltip"],
-  _excluded11 = ["className"];
+  _excluded10 = ["className", "size", "isGroup", "name", "email", "profileUrl", "selectedValue", "multiple", "value", "disabled", "textClassName"],
+  _excluded11 = ["className", "textClassName", "size", "isGroup", "children", "selectedValue", "value", "icon", "disabled", "tooltip", "disabledTooltip"],
+  _excluded12 = ["className"];
 import { ButtonVariant, buttonVariants } from '@scaleflex/ui-tw/button';
 import { buttonBaseClassNames } from '@scaleflex/ui-tw/button/button.constants';
 import { Checkbox } from '@scaleflex/ui-tw/checkbox';
@@ -28,7 +29,7 @@ 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 { CheckIcon, SearchIcon, XIcon } from 'lucide-react';
+import { CheckIcon, SearchIcon, UserCircle2Icon, XIcon } from 'lucide-react';
 import React from 'react';
 import { useCallback } from 'react';
 import { selectCommandHeadingOptions } from './command.utils';
@@ -219,19 +220,62 @@ function CommandItem(_ref9) {
     className: cn('text-primary ml-auto h-4 w-4', selected ? 'opacity-100' : 'opacity-0')
   })));
 }
-function CommandCheckboxItem(_ref10) {
+function CommandUserItem(_ref10) {
   var className = _ref10.className,
-    textClassName = _ref10.textClassName,
     size = _ref10.size,
     isGroup = _ref10.isGroup,
-    children = _ref10.children,
+    name = _ref10.name,
+    email = _ref10.email,
+    profileUrl = _ref10.profileUrl,
     selectedValue = _ref10.selectedValue,
+    multiple = _ref10.multiple,
     value = _ref10.value,
-    icon = _ref10.icon,
     disabled = _ref10.disabled,
-    tooltip = _ref10.tooltip,
-    disabledTooltip = _ref10.disabledTooltip,
+    textClassName = _ref10.textClassName,
     props = _objectWithoutProperties(_ref10, _excluded10);
+  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', '!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),
+    disabled: disabled
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-1 items-center gap-2 overflow-hidden"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "shrink-0"
+  }, profileUrl ? /*#__PURE__*/React.createElement("img", {
+    className: "size-8 rounded-full",
+    src: profileUrl,
+    alt: "profile image"
+  }) : /*#__PURE__*/React.createElement(UserCircle2Icon, {
+    className: "size-8"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "max-w-10/12"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('w-full overflow-hidden text-sm text-ellipsis whitespace-nowrap', textClassName)
+  }, name), /*#__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", {
+    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')
+  })));
+}
+function CommandCheckboxItem(_ref11) {
+  var className = _ref11.className,
+    textClassName = _ref11.textClassName,
+    size = _ref11.size,
+    isGroup = _ref11.isGroup,
+    children = _ref11.children,
+    selectedValue = _ref11.selectedValue,
+    value = _ref11.value,
+    icon = _ref11.icon,
+    disabled = _ref11.disabled,
+    tooltip = _ref11.tooltip,
+    disabledTooltip = _ref11.disabledTooltip,
+    props = _objectWithoutProperties(_ref11, _excluded11);
   var selected = value && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.includes(value));
   return /*#__PURE__*/React.createElement(CommandPrimitive.Item, _extends({
     "data-slot": "command-checkbox-item",
@@ -260,12 +304,12 @@ function CommandCheckboxItem(_ref10) {
     tooltip: disabled ? disabledTooltip : tooltip
   }))));
 }
-function CommandShortcut(_ref11) {
-  var className = _ref11.className,
-    props = _objectWithoutProperties(_ref11, _excluded11);
+function CommandShortcut(_ref12) {
+  var className = _ref12.className,
+    props = _objectWithoutProperties(_ref12, _excluded12);
   return /*#__PURE__*/React.createElement("span", _extends({
     "data-slot": "command-shortcut",
     className: cn('text-muted-foreground ml-auto text-xs tracking-widest', className)
   }, props));
 }
-export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandCheckboxItem, CommandShortcut, CommandSeparator, CommandClear };
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandCheckboxItem, CommandShortcut, CommandSeparator, CommandClear, CommandUserItem };

package/form/form.types.d.ts

@@ -68,7 +68,24 @@ export interface OptionGroup extends Omit<FlatOption, 'value' | 'label'> {
     value?: string;
     options: FlatOption[];
 }
+export interface UserFlatOption {
+    name: ReactElement | string;
+    email: ReactElement | string;
+    value: string;
+    disabled?: boolean;
+    profileUrl?: string;
+}
+export interface UserOptionGroup {
+    label?: ReactElement | string;
+    value?: string;
+    options: UserFlatOption[];
+    icon?: ReactElement;
+    disabled?: boolean;
+    tooltip?: ReactElement | string;
+    disabledTooltip?: ReactElement | string;
+}
 export type SelectOption = FlatOption | OptionGroup;
+export type SelectUserOption = UserFlatOption | UserOptionGroup;
 export type FormSelectProps = SelectProps & {
     options: SelectOption[];
     placeholder?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.93",
+  "version": "0.0.95",
   "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.93",
+    "@scaleflex/icons-tw": "^0.0.95",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",