@scaleflex/ui-tw 0.0.28 → 0.0.30

package/button/button.component.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "children", "size", "startIcon", "endIcon", "variant", "loading", "asChild", "disabled"];
 import { Slot } from '@radix-ui/react-slot';
@@ -7,7 +8,7 @@ import { focusRingClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
 import React, { useImperativeHandle, useRef } from 'react';
-import { ButtonSize, ButtonVariant, buttonSizeOptions, buttonVariantOptions } from './button.constants';
+import { ButtonSize, ButtonVariant, buttonBaseClassNames, buttonSizeOptions, buttonVariantOptions } from './button.constants';
 import { createRipple, isIconSize } from './button.utils';
 import { EndIcon } from './components/end-icon';
 import { StartIcon, startIconVariants } from './components/start-icon';
@@ -51,11 +52,11 @@ var Button = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
   return /*#__PURE__*/React.createElement(Comp, _extends({
     ref: localRef,
     "data-slot": "button",
-    className: cn('group/button relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-md font-medium whitespace-nowrap transition-all outline-none', 'disabled:pointer-events-none disabled:opacity-40', '[&_svg]:pointer-events-none [&_svg]:shrink-0', focusRingClassNames, buttonVariants({
+    className: cn.apply(void 0, _toConsumableArray(buttonBaseClassNames).concat([focusRingClassNames, buttonVariants({
       variant: variant,
       size: size,
       className: className
-    }), loading && 'pointer-events-none opacity-30'),
+    }), loading && 'pointer-events-none opacity-30'])),
     disabled: disabled,
     onMouseDown: handleClick
   }, rest), startIcon || endIcon || loading ? /*#__PURE__*/React.createElement("span", {

package/button/button.constants.d.ts

@@ -47,6 +47,7 @@ export declare const ButtonVariant: {
     readonly Error: "error-primary";
     readonly Warning: "warning-primary";
 };
+export declare const buttonBaseClassNames: readonly ["group/button relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-md font-medium whitespace-nowrap transition-all outline-none", "disabled:pointer-events-none disabled:opacity-40", "[&_svg]:pointer-events-none [&_svg]:shrink-0"];
 export declare const iconVariantOptions: {
     readonly primary: "";
     readonly secondary: "";

package/button/button.constants.js

@@ -21,6 +21,7 @@ export var ButtonVariant = {
   Error: 'error-primary',
   Warning: 'warning-primary'
 };
+export var buttonBaseClassNames = ['group/button relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-md font-medium whitespace-nowrap transition-all outline-none', 'disabled:pointer-events-none disabled:opacity-40', '[&_svg]:pointer-events-none [&_svg]:shrink-0'];
 export var iconVariantOptions = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonVariant.Primary, ''), ButtonVariant.Secondary, ''), ButtonVariant.Outline, 'text-muted-foreground group-hover/button:text-muted-foreground/80'), ButtonVariant.GhostPrimary, ''), ButtonVariant.GhostSecondary, 'text-muted-foreground group-hover/button:text-muted-foreground/80'), ButtonVariant.Error, ''), ButtonVariant.Warning, '');
 export var buttonVariantOptions = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonVariant.Primary, 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/80'), ButtonVariant.Secondary, 'border bg-background shadow-xs text-primary border-primary hover:bg-accent hover:border-primary/80'), ButtonVariant.Outline, 'border bg-background text-secondary-foreground shadow-xs border-input hover:bg-secondary hover:border-input/80'), ButtonVariant.GhostPrimary, 'text-primary hover:bg-accent'), ButtonVariant.GhostSecondary, 'text-secondary-foreground hover:bg-secondary'), ButtonVariant.Error, 'bg-destructive text-primary-foreground shadow-xs hover:bg-destructive/80'), ButtonVariant.Warning, 'bg-warning text-primary-foreground shadow-xs hover:bg-warning/80');
 export var iconSizes = [ButtonSize.IconXs, ButtonSize.IconSm, ButtonSize.IconMd, ButtonSize.IconLg];

package/combobox/combobox-multi-inline/combobox-multi-inline.component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ComboboxMultiInlineProps } from '../combobox.types';
+export declare function ComboboxMultiInline({ options, value, onChange, placeholder, className, disabled, size, readOnly, showClear, popoverClassName, }: ComboboxMultiInlineProps): React.JSX.Element;

package/combobox/combobox-multi-inline/combobox-multi-inline.component.js

@@ -0,0 +1,68 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { Popover } from '@scaleflex/ui-tw/popover';
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+import React from 'react';
+import { useMemo, useState } from 'react';
+import { ComboboxContent, ComboboxTrigger, flattenOptions } from '../';
+export function ComboboxMultiInline(_ref) {
+  var _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _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,
+    _ref$showClear = _ref.showClear,
+    showClear = _ref$showClear === void 0 ? true : _ref$showClear,
+    popoverClassName = _ref.popoverClassName;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var selectedLabels = useMemo(function () {
+    return flattenOptions(options).filter(function (option) {
+      return value.includes(option.value);
+    }).map(function (option) {
+      return option.label;
+    });
+  }, [options, value]);
+  var displayValue = selectedLabels.length > 0 ? selectedLabels.join(', ') : placeholder;
+  var toggleValue = function toggleValue(v) {
+    if (value.includes(v)) {
+      onChange(value.filter(function (val) {
+        return val !== v;
+      }));
+    } else {
+      onChange([].concat(_toConsumableArray(value), [v]));
+    }
+  };
+  return /*#__PURE__*/React.createElement(Popover, {
+    open: open,
+    onOpenChange: setOpen
+  }, /*#__PURE__*/React.createElement(ComboboxTrigger, {
+    open: open,
+    disabled: disabled,
+    className: className,
+    size: size,
+    readOnly: readOnly,
+    showClear: showClear,
+    selected: selectedLabels.length > 0,
+    onClearAll: function onClearAll() {
+      return onChange([]);
+    }
+  }, displayValue), /*#__PURE__*/React.createElement(ComboboxContent, {
+    className: popoverClassName,
+    options: options,
+    value: value,
+    onSelect: toggleValue,
+    size: size,
+    multiple: true
+  }));
+}

package/combobox/combobox-multi-tag/combobox-multi-tag.component.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ComboboxMultiTagProps } from '../combobox.types';
+export declare function ComboboxMultiTag({ options, value, onChange, placeholder, className, disabled, size, readOnly, popoverClassName, ...rest }: ComboboxMultiTagProps): React.JSX.Element;

package/combobox/combobox-multi-tag/combobox-multi-tag.component.js

@@ -0,0 +1,117 @@
+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"];
+import { ButtonVariant, buttonVariants } from '@scaleflex/ui-tw/button';
+import { buttonBaseClassNames } from '@scaleflex/ui-tw/button/button.constants';
+import { createClearHandlers } from '@scaleflex/ui-tw/combobox/combobox.utils';
+import { Pill } from '@scaleflex/ui-tw/pill';
+import { Popover, PopoverTrigger } from '@scaleflex/ui-tw/popover';
+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 { ChevronsUpDownIcon } from 'lucide-react';
+import * as React from 'react';
+import { useState } from 'react';
+import { ComboboxContent, flattenOptions } from '../';
+import { comboboxMultiTagsDefaultSizeOptions, iconSizeInTriggerOptions } from '../combobox.constants';
+export function ComboboxMultiTag(_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,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _getToolbarSizes = getToolbarSizes(size),
+    buttonSize = _getToolbarSizes.buttonSize;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var selectedOptions = flattenOptions(options).filter(function (option) {
+    return value.includes(option.value);
+  });
+  var isSelected = selectedOptions.length > 0;
+  var toggleValue = function toggleValue(v) {
+    if (value.includes(v)) {
+      onChange(value.filter(function (val) {
+        return val !== v;
+      }));
+    } else {
+      onChange([].concat(_toConsumableArray(value), [v]));
+    }
+  };
+  var onClearAll = function onClearAll() {
+    onChange([]);
+    setOpen(false);
+  };
+  var _createClearHandlers = createClearHandlers(onClearAll),
+    handleOnTriggerClick = _createClearHandlers.onClick,
+    handleOnTriggerKeyDown = _createClearHandlers.onKeyDown;
+  return /*#__PURE__*/React.createElement(Popover, {
+    open: open,
+    onOpenChange: setOpen
+  }, /*#__PURE__*/React.createElement(PopoverTrigger, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement("button", {
+    role: "combobox",
+    "aria-expanded": open,
+    "area-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
+  }, !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', textareaVariants({
+      size: size
+    }), 'min-h-auto')
+  }, selectedOptions.map(function (option) {
+    return /*#__PURE__*/React.createElement(Pill, {
+      key: option.value,
+      size: size,
+      variant: "default",
+      removable: true,
+      onRemove: function onRemove(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        toggleValue(option.value);
+      }
+    }, option.label);
+  })), isSelected ? /*#__PURE__*/React.createElement("div", {
+    className: "flex w-full items-center justify-between px-1.5 pb-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('mr-1.5 ml-auto shrink-0 opacity-50', iconSizeInTriggerOptions[size])
+  })) : /*#__PURE__*/React.createElement(ChevronsUpDownIcon, {
+    className: cn('my-auto ml-auto shrink-0 opacity-50', iconSizeInTriggerOptions[size])
+  }))), /*#__PURE__*/React.createElement(ComboboxContent, {
+    options: options,
+    value: value,
+    onSelect: toggleValue,
+    size: size,
+    multiple: true,
+    className: popoverClassName
+  }));
+}

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ComboboxSingleProps } from '../combobox.types';
+export declare function ComboboxSingle({ options, value, onChange, placeholder, className, disabled, popoverClassName, size, readOnly, showClear, ...rest }: ComboboxSingleProps): React.JSX.Element;

package/combobox/combobox-single/combobox-single.component.js

@@ -0,0 +1,61 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "popoverClassName", "size", "readOnly", "showClear"];
+import { Popover } from '@scaleflex/ui-tw/popover';
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+import * as React from 'react';
+import { useState } from 'react';
+import { ComboboxContent, ComboboxTrigger } from '../combobox.component';
+import { flattenOptions } from '../combobox.utils';
+export function ComboboxSingle(_ref) {
+  var _flattenOptions$find;
+  var _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'Select an option...' : _ref$placeholder,
+    className = _ref.className,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    popoverClassName = _ref.popoverClassName,
+    _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,
+    _ref$showClear = _ref.showClear,
+    showClear = _ref$showClear === void 0 ? true : _ref$showClear,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var selectedLabel = (_flattenOptions$find = flattenOptions(options).find(function (opt) {
+    return opt.value === value;
+  })) === null || _flattenOptions$find === void 0 ? void 0 : _flattenOptions$find.label;
+  return /*#__PURE__*/React.createElement(Popover, {
+    open: open,
+    onOpenChange: setOpen
+  }, /*#__PURE__*/React.createElement(ComboboxTrigger, {
+    open: open,
+    disabled: disabled,
+    className: className,
+    size: size,
+    readOnly: readOnly,
+    onClearAll: function onClearAll() {
+      return onChange('');
+    },
+    selected: !!selectedLabel,
+    showClear: showClear,
+    "aria-invalid": rest['aria-invalid']
+  }, selectedLabel || placeholder), /*#__PURE__*/React.createElement(ComboboxContent, {
+    className: popoverClassName,
+    options: options,
+    value: value,
+    onSelect: function onSelect(currentValue) {
+      onChange(currentValue === value ? '' : currentValue);
+      setOpen(false);
+    },
+    size: size
+  }));
+}

package/combobox/combobox.component.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { ComboboxContentProps, ComboboxTriggerProps } from './combobox.types';
+export declare function ComboboxTrigger({ children, open, disabled, readOnly, size, className, selected, showClear, onClearAll, ...rest }: ComboboxTriggerProps): React.JSX.Element;
+export declare function ComboboxContent({ options, value: selectedValue, onSelect, size, multiple, className, }: ComboboxContentProps): React.JSX.Element;

package/combobox/combobox.component.js

@@ -0,0 +1,137 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "open", "disabled", "readOnly", "size", "className", "selected", "showClear", "onClearAll"];
+import { buttonVariants } from '@scaleflex/ui-tw/button';
+import { ButtonVariant, buttonBaseClassNames } from '@scaleflex/ui-tw/button/button.constants';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@scaleflex/ui-tw/command';
+import { isOptionGroup } from '@scaleflex/ui-tw/form';
+import { PopoverContent, PopoverTrigger } from '@scaleflex/ui-tw/popover';
+import { selectTriggerVariants } from '@scaleflex/ui-tw/select/select.component';
+import { getBaseSelectClassNames, selectReadOnlyClassNames } from '@scaleflex/ui-tw/select/select.constants';
+import { Separator } from '@scaleflex/ui-tw/separator';
+import { focusRingClassNames, getBaseInputClasses } from '@scaleflex/ui-tw/styles/shared-classes';
+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 { ChevronsUpDownIcon, XIcon } from 'lucide-react';
+import * as React from 'react';
+import { iconSizeInTriggerOptions, verticalSeparatorNextToChevronOptions } from './combobox.constants';
+import { createClearHandlers } from './combobox.utils';
+export function ComboboxTrigger(_ref) {
+  var children = _ref.children,
+    open = _ref.open,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? FormSize.Md : _ref$size,
+    className = _ref.className,
+    _ref$selected = _ref.selected,
+    selected = _ref$selected === void 0 ? false : _ref$selected,
+    _ref$showClear = _ref.showClear,
+    showClear = _ref$showClear === void 0 ? false : _ref$showClear,
+    onClearAll = _ref.onClearAll,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _getToolbarSizes = getToolbarSizes(size),
+    iconSize = _getToolbarSizes.iconSize;
+  var _createClearHandlers = createClearHandlers(onClearAll),
+    handleOnTriggerClick = _createClearHandlers.onClick,
+    handleOnTriggerKeyDown = _createClearHandlers.onKeyDown;
+  return /*#__PURE__*/React.createElement(PopoverTrigger, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement("button", {
+    role: "combobox",
+    "aria-expanded": open,
+    "aria-invalid": rest['aria-invalid'],
+    disabled: disabled,
+    className: cn.apply(void 0, _toConsumableArray(getBaseSelectClassNames()).concat(_toConsumableArray(getBaseInputClasses()), [selectTriggerVariants({
+      size: size
+    }), !selected && 'text-muted-foreground/80 hover:border-secondary-foreground/50', readOnly && selectReadOnlyClassNames, className])),
+    onClick: handleOnTriggerClick,
+    onKeyDown: handleOnTriggerKeyDown
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "truncate"
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: "ml-2 flex items-center gap-1 pl-1"
+  }, showClear && !!onClearAll && selected && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__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: iconSize,
+      variant: ButtonVariant.GhostSecondary
+    })]))
+  }, /*#__PURE__*/React.createElement(XIcon, {
+    "data-clear-icon": true,
+    className: cn('shrink-0 hover:opacity-80', iconSizeInTriggerOptions[size])
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn(verticalSeparatorNextToChevronOptions[size])
+  }, /*#__PURE__*/React.createElement(Separator, {
+    orientation: "vertical"
+  }))), /*#__PURE__*/React.createElement(ChevronsUpDownIcon, {
+    className: cn('ml-1 shrink-0 opacity-50', iconSizeInTriggerOptions[size])
+  }))));
+}
+export function ComboboxContent(_ref2) {
+  var options = _ref2.options,
+    selectedValue = _ref2.value,
+    _onSelect = _ref2.onSelect,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'md' : _ref2$size,
+    _ref2$multiple = _ref2.multiple,
+    multiple = _ref2$multiple === void 0 ? false : _ref2$multiple,
+    className = _ref2.className;
+  return /*#__PURE__*/React.createElement(PopoverContent, {
+    className: cn('p-0', className)
+  }, /*#__PURE__*/React.createElement(Command, null, /*#__PURE__*/React.createElement(CommandInput, {
+    size: size,
+    placeholder: "Search..."
+  }), /*#__PURE__*/React.createElement(CommandList, null, /*#__PURE__*/React.createElement(CommandEmpty, {
+    className: "text-muted-foreground"
+  }, "No results found."), options === null || options === void 0 ? void 0 : options.map(function (option, groupIndex) {
+    if (isOptionGroup(option)) {
+      return /*#__PURE__*/React.createElement(CommandGroup, {
+        key: groupIndex,
+        heading: option.label,
+        size: size
+      }, option.options.map(function (_ref3) {
+        var label = _ref3.label,
+          value = _ref3.value,
+          disabled = _ref3.disabled,
+          icon = _ref3.icon,
+          tooltip = _ref3.tooltip;
+        return /*#__PURE__*/React.createElement(CommandItem, {
+          size: size,
+          multiple: multiple,
+          disabled: disabled,
+          key: value,
+          icon: icon,
+          value: value,
+          tooltip: tooltip,
+          isGroup: !!option.label,
+          selectedValue: selectedValue,
+          onSelect: function onSelect() {
+            return _onSelect(value);
+          }
+        }, label);
+      }));
+    }
+    return /*#__PURE__*/React.createElement(CommandGroup, {
+      key: "default"
+    }, /*#__PURE__*/React.createElement(CommandItem, {
+      size: size,
+      multiple: multiple,
+      disabled: option.disabled,
+      key: option.value,
+      icon: option.icon,
+      value: option.value,
+      tooltip: option.tooltip,
+      selectedValue: selectedValue,
+      onSelect: function onSelect() {
+        return _onSelect(option.value);
+      }
+    }, option.label));
+  }))));
+}

package/combobox/combobox.constants.d.ts

@@ -0,0 +1,15 @@
+export declare const verticalSeparatorNextToChevronOptions: {
+    readonly sm: "h-4";
+    readonly md: "h-5";
+    readonly lg: "h-6";
+};
+export declare const iconSizeInTriggerOptions: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+export declare const comboboxMultiTagsDefaultSizeOptions: {
+    readonly sm: "min-h-8 h-8";
+    readonly md: "min-h-10 h-10";
+    readonly lg: "min-h-12 h-12";
+};

package/combobox/combobox.constants.js

@@ -0,0 +1,5 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+export var verticalSeparatorNextToChevronOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'h-4'), FormSize.Md, 'h-5'), FormSize.Lg, 'h-6');
+export var iconSizeInTriggerOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'size-3'), FormSize.Md, 'size-4'), FormSize.Lg, 'size-5');
+export var comboboxMultiTagsDefaultSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'min-h-8 h-8'), FormSize.Md, 'min-h-10 h-10'), FormSize.Lg, 'min-h-12 h-12');

package/combobox/combobox.types.d.ts

@@ -0,0 +1,65 @@
+import { SelectOption } from '@scaleflex/ui-tw/form';
+import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
+import { Command as CommandPrimitive } from 'cmdk';
+import { ComponentProps, KeyboardEvent, MouseEvent, ReactElement, ReactNode } from 'react';
+export type ClearEvent = MouseEvent | KeyboardEvent;
+export type ComboboxTriggerProps = {
+    children: ReactNode;
+    open: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    size?: FormSizeType;
+    className?: string;
+    selected?: boolean;
+    showClear?: boolean;
+    'aria-invalid'?: boolean;
+    onClearAll?: () => void;
+};
+export type ComboboxContentProps = {
+    options: SelectOption[];
+    value: string | string[];
+    onSelect: (value: string) => void;
+    size?: FormSizeType;
+    multiple?: boolean;
+    className?: string;
+};
+export interface CommandInputProps extends Omit<ComponentProps<typeof CommandPrimitive.Input>, 'size'> {
+    size?: FormSizeType;
+}
+export interface CommandGroupProps extends ComponentProps<typeof CommandPrimitive.Group> {
+    size?: FormSizeType;
+}
+export interface CommandItemProps extends ComponentProps<typeof CommandPrimitive.Item> {
+    icon?: ReactElement;
+    size?: FormSizeType;
+    tooltip?: ReactElement | string;
+    isGroup?: boolean;
+    shortcut?: ReactElement | string;
+    selectedValue?: string | string[];
+    multiple?: boolean;
+}
+interface ComboboxCommonProps {
+    options: SelectOption[];
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    size?: FormSizeType;
+    popoverClassName?: string;
+    'aria-invalid'?: boolean;
+}
+export interface ComboboxSingleProps extends ComboboxCommonProps {
+    value: string;
+    onChange: (value: string) => void;
+    showClear?: boolean;
+}
+export interface ComboboxMultiInlineProps extends ComboboxCommonProps {
+    value: string[];
+    onChange: (value: string[]) => void;
+    showClear?: boolean;
+}
+export interface ComboboxMultiTagProps extends ComboboxCommonProps {
+    value: string[];
+    onChange: (value: string[]) => void;
+}
+export {};

package/combobox/combobox.types.js

@@ -0,0 +1 @@
+export {};

package/combobox/combobox.utils.d.ts

@@ -0,0 +1,7 @@
+import { FlatOption, SelectOption } from '@scaleflex/ui-tw/form';
+import { KeyboardEvent, MouseEvent } from 'react';
+export declare const flattenOptions: (options: SelectOption[]) => FlatOption[];
+export declare const createClearHandlers: (onClearAll?: () => void) => {
+    onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+    onKeyDown: (e: KeyboardEvent<HTMLButtonElement>) => void;
+};

package/combobox/combobox.utils.js

@@ -0,0 +1,28 @@
+import { isOptionGroup } from '@scaleflex/ui-tw/form';
+export var flattenOptions = function flattenOptions(options) {
+  return options.flatMap(function (option) {
+    return isOptionGroup(option) ? option.options : [option];
+  });
+};
+function isClearIconEvent(event) {
+  var target = event.type === 'keydown' ? document.activeElement : event.target;
+  return !!target.closest('[data-clear-icon]');
+}
+export var createClearHandlers = function createClearHandlers(onClearAll) {
+  return {
+    onClick: function onClick(e) {
+      if (isClearIconEvent(e)) {
+        e.stopPropagation();
+        e.preventDefault();
+        onClearAll === null || onClearAll === void 0 || onClearAll();
+      }
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (isClearIconEvent(e) && (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar')) {
+        e.stopPropagation();
+        e.preventDefault();
+        onClearAll === null || onClearAll === void 0 || onClearAll();
+      }
+    }
+  };
+};

package/combobox/index.d.ts

@@ -0,0 +1,5 @@
+export { ComboboxTrigger, ComboboxContent } from './combobox.component';
+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 { flattenOptions } from './combobox.utils';

package/combobox/index.js

@@ -0,0 +1,5 @@
+export { ComboboxTrigger, ComboboxContent } from './combobox.component';
+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 { flattenOptions } from './combobox.utils';

package/command/command.component.d.ts

@@ -0,0 +1,18 @@
+import { CommandGroupProps, CommandInputProps, CommandItemProps } from '@scaleflex/ui-tw/combobox/combobox.types';
+import { Dialog } from '@scaleflex/ui-tw/dialog';
+import { Command as CommandPrimitive } from 'cmdk';
+import React from 'react';
+import { ComponentProps } from 'react';
+declare function Command({ className, ...props }: ComponentProps<typeof CommandPrimitive>): React.JSX.Element;
+declare function CommandDialog({ title, description, children, ...props }: ComponentProps<typeof Dialog> & {
+    title?: string;
+    description?: string;
+}): React.JSX.Element;
+declare function CommandInput({ className, size, ...props }: CommandInputProps): React.JSX.Element;
+declare function CommandList({ className, ...props }: ComponentProps<typeof CommandPrimitive.List>): React.JSX.Element;
+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 CommandShortcut({ className, ...props }: ComponentProps<'span'>): React.JSX.Element;
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };