@scaleflex/ui-tw 0.0.60 → 0.0.62

package/checkbox/checkbox.component.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
-import type { CheckboxProps } from './checkbox.types';
-declare function Checkbox({ className, size, ...props }: CheckboxProps): React.JSX.Element;
-export { Checkbox };
+import { CheckboxProps, VisualCheckboxProps } from './checkbox.types';
+declare function Checkbox({ className, size, partial, ...rest }: CheckboxProps): React.JSX.Element;
+declare function VisualCheckbox({ checked, partial, size, className, ...rest }: VisualCheckboxProps): React.JSX.Element;
+export { Checkbox, VisualCheckbox };

package/checkbox/checkbox.component.js

@@ -1,12 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "size"];
+var _excluded = ["className", "size", "partial"],
+  _excluded2 = ["checked", "partial", "size", "className"];
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { ariaInvalidClassNames, focusRingClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
-import { CheckIcon } from 'lucide-react';
+import { CheckIcon, MinusIcon } from 'lucide-react';
 import React from 'react';
 import { checkboxIndicatorSizeOptions, checkboxSizeOptions } from './checkbox.constants';
 var checkboxVariants = cva('', {
@@ -27,20 +28,48 @@ var checkboxIndicatorVariants = cva('', {
 });
 function Checkbox(_ref) {
   var className = _ref.className,
-    size = _ref.size,
-    props = _objectWithoutProperties(_ref, _excluded);
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? FormSize.Md : _ref$size,
+    partial = _ref.partial,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(CheckboxPrimitive.Root, _extends({
     "data-slot": "checkbox",
     className: cn('peer border-input shrink-0 cursor-pointer rounded-sm border shadow-xs transition-shadow outline-none', 'hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50', 'data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary', ariaInvalidClassNames, focusRingClassNames, checkboxVariants({
       size: size
     }), className)
-  }, props), /*#__PURE__*/React.createElement(CheckboxPrimitive.Indicator, {
+  }, rest), /*#__PURE__*/React.createElement(CheckboxPrimitive.Indicator, {
     "data-slot": "checkbox-indicator",
     className: "flex items-center justify-center text-current transition-none"
-  }, /*#__PURE__*/React.createElement(CheckIcon, {
-    className: cn(checkboxIndicatorVariants({
+  }, partial ? /*#__PURE__*/React.createElement(MinusIcon, {
+    className: cn('text-current', checkboxIndicatorVariants({
+      size: size
+    }))
+  }) : /*#__PURE__*/React.createElement(CheckIcon, {
+    className: cn('text-current', checkboxIndicatorVariants({
+      size: size
+    }))
+  })));
+}
+function VisualCheckbox(_ref2) {
+  var checked = _ref2.checked,
+    partial = _ref2.partial,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? FormSize.Md : _ref2$size,
+    className = _ref2.className,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "aria-hidden": "true",
+    className: cn('peer border-input shrink-0 cursor-pointer rounded-sm border shadow-xs transition-shadow outline-none', 'hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50', checked && 'bg-primary text-primary-foreground border-primary', ariaInvalidClassNames, focusRingClassNames, checkboxVariants({
+      size: size
+    }), className)
+  }, rest), checked && (partial ? /*#__PURE__*/React.createElement(MinusIcon, {
+    className: cn('text-current', checkboxIndicatorVariants({
+      size: size
+    }))
+  }) : /*#__PURE__*/React.createElement(CheckIcon, {
+    className: cn('text-current', checkboxIndicatorVariants({
       size: size
     }))
   })));
 }
-export { Checkbox };
+export { Checkbox, VisualCheckbox };

package/checkbox/checkbox.types.d.ts

@@ -3,4 +3,11 @@ import type { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
 import type { ComponentProps } from 'react';
 export interface CheckboxProps extends ComponentProps<typeof CheckboxPrimitive.Root> {
     size?: FormSizeType;
+    partial?: boolean;
+}
+export interface VisualCheckboxProps extends ComponentProps<'div'> {
+    size?: FormSizeType;
+    checked?: boolean;
+    partial?: boolean;
+    className?: string;
 }

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ComboboxMultiCheckboxProps } from '../combobox.types';
+export declare function ComboboxMultiCheckbox({ options, label, icon, value: selectedValue, onChange, className, disabled, size, readOnly, showClear, popoverClassName, onBlur, showGroupSeparator, defaultOpen, popoverContentProps, formItemId, searchPlaceholder, actions, fixedActions, triggerProps, iconClassName, placeholder, displayCount, ...rest }: ComboboxMultiCheckboxProps): React.JSX.Element;

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

@@ -0,0 +1,194 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["options", "label", "icon", "value", "onChange", "className", "disabled", "size", "readOnly", "showClear", "popoverClassName", "onBlur", "showGroupSeparator", "defaultOpen", "popoverContentProps", "formItemId", "searchPlaceholder", "actions", "fixedActions", "triggerProps", "iconClassName", "placeholder", "displayCount"];
+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 { ComboboxCheckboxContent, ComboboxCheckboxTrigger } from '@scaleflex/ui-tw/combobox/combobox.component';
+import { isOptionGroup } from '@scaleflex/ui-tw/form';
+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';
+export function ComboboxMultiCheckbox(_ref) {
+  var _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
+    label = _ref.label,
+    icon = _ref.icon,
+    selectedValue = _ref.value,
+    onChange = _ref.onChange,
+    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,
+    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,
+    popoverContentProps = _ref.popoverContentProps,
+    formItemId = _ref.formItemId,
+    _ref$searchPlaceholde = _ref.searchPlaceholder,
+    searchPlaceholder = _ref$searchPlaceholde === void 0 ? 'Search options...' : _ref$searchPlaceholde,
+    actions = _ref.actions,
+    fixedActions = _ref.fixedActions,
+    triggerProps = _ref.triggerProps,
+    iconClassName = _ref.iconClassName,
+    placeholder = _ref.placeholder,
+    _ref$displayCount = _ref.displayCount,
+    displayCount = _ref$displayCount === void 0 ? false : _ref$displayCount,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(defaultOpen),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var selectedLabels = useMemo(function () {
+    var labels = [];
+    var _iterator = _createForOfIteratorHelper(options),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var option = _step.value;
+        if (isOptionGroup(option)) {
+          if (option.value && selectedValue.includes(option.value)) {
+            labels.push(option.label);
+          }
+          var _iterator2 = _createForOfIteratorHelper(option.options),
+            _step2;
+          try {
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              var sub = _step2.value;
+              if (selectedValue.includes(sub.value)) {
+                labels.push(sub.label);
+              }
+            }
+          } catch (err) {
+            _iterator2.e(err);
+          } finally {
+            _iterator2.f();
+          }
+        } else {
+          if (selectedValue.includes(option.value)) {
+            labels.push(option.label);
+          }
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return labels;
+  }, [options, selectedValue]);
+  var displayValue = selectedLabels.length > 0 ? selectedLabels.join(', ') : placeholder;
+  var toggleValue = function toggleValue(v) {
+    var group = options.find(function (opt) {
+      return isOptionGroup(opt) && opt.value === v;
+    });
+    var nextValue;
+    if (group && isOptionGroup(group)) {
+      var childValues = group.options.map(function (child) {
+        return child.value;
+      });
+      var isGroupSelected = selectedValue.includes(group.value);
+      if (isGroupSelected) {
+        nextValue = selectedValue.filter(function (val) {
+          return val !== group.value;
+        });
+      } else {
+        nextValue = [].concat(_toConsumableArray(selectedValue.filter(function (val) {
+          return !childValues.includes(val);
+        })), [group.value]);
+      }
+    } else {
+      nextValue = selectedValue.includes(v) ? selectedValue.filter(function (val) {
+        return val !== v;
+      }) : [].concat(_toConsumableArray(selectedValue), [v]);
+    }
+    onChange(nextValue);
+  };
+  var onOpenChange = function onOpenChange(isOpen) {
+    if (!isOpen) {
+      onBlur === null || onBlur === void 0 || onBlur(selectedValue);
+    }
+    setOpen(isOpen);
+  };
+  var onClearAll = function onClearAll() {
+    onChange([]);
+    onBlur === null || onBlur === void 0 || onBlur([]);
+    setOpen(false);
+  };
+  var handleCheckboxClick = function handleCheckboxClick(event) {
+    event.stopPropagation();
+    var allValues = [];
+    var _iterator3 = _createForOfIteratorHelper(options),
+      _step3;
+    try {
+      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+        var option = _step3.value;
+        if (isOptionGroup(option)) {
+          allValues.push(option.value);
+          allValues.push.apply(allValues, _toConsumableArray(option.options.map(function (sub) {
+            return sub.value;
+          })));
+        } else {
+          allValues.push(option.value);
+        }
+      }
+    } catch (err) {
+      _iterator3.e(err);
+    } finally {
+      _iterator3.f();
+    }
+    var isNoneSelected = selectedLabels.length === 0;
+    var isPartiallySelected = selectedLabels.length > 0 && selectedLabels.length < allValues.length;
+    var isAllSelected = selectedLabels.length === allValues.length;
+    if (isNoneSelected || isPartiallySelected) {
+      onChange(_toConsumableArray(new Set(allValues)));
+    } else if (isAllSelected) {
+      onChange([]);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Popover, {
+    open: open,
+    defaultOpen: defaultOpen,
+    onOpenChange: onOpenChange
+  }, /*#__PURE__*/React.createElement(ComboboxCheckboxTrigger, {
+    open: open,
+    icon: icon,
+    label: label,
+    disabled: disabled,
+    className: className,
+    size: size,
+    readOnly: readOnly,
+    showClear: showClear,
+    selected: selectedLabels.length > 0,
+    onClearAll: onClearAll,
+    "aria-invalid": rest['aria-invalid'],
+    formItemId: formItemId,
+    triggerProps: triggerProps,
+    iconClassName: iconClassName,
+    optionsLength: options.length,
+    displayCount: displayCount,
+    selectedLength: selectedLabels.length,
+    onCheckboxClick: handleCheckboxClick
+  }, displayValue), /*#__PURE__*/React.createElement(ComboboxCheckboxContent, {
+    showGroupSeparator: showGroupSeparator,
+    searchPlaceholder: searchPlaceholder,
+    className: popoverClassName,
+    options: options,
+    value: selectedValue,
+    onSelect: toggleValue,
+    size: size,
+    popoverContentProps: popoverContentProps,
+    actions: actions,
+    fixedActions: fixedActions
+  }));
+}

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

@@ -128,9 +128,9 @@ export function ComboboxMultiTag(_ref) {
       variant: ButtonVariant.GhostSecondary
     })]))
   }, "Clear all"), /*#__PURE__*/React.createElement(ChevronsUpDownIcon, {
-    className: cn('mr-1.5 ml-auto shrink-0 opacity-50', iconSizeInTriggerOptions[size])
+    className: cn('text-muted-foreground/70 mr-1.5 ml-auto shrink-0', iconSizeInTriggerOptions[size])
   })) : /*#__PURE__*/React.createElement(ChevronsUpDownIcon, {
-    className: cn('my-auto ml-auto shrink-0 opacity-50', iconSizeInTriggerOptions[size])
+    className: cn('text-muted-foreground/70 my-auto ml-auto shrink-0', iconSizeInTriggerOptions[size])
   }))), /*#__PURE__*/React.createElement(ComboboxContent, {
     options: options,
     value: value,

package/combobox/combobox.component.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
-import type { ComboboxContentProps, ComboboxTriggerProps, SelectActionsProps } from './combobox.types';
+import { ComboboxCheckboxTriggerProps, ComboboxContentProps, ComboboxTriggerProps, SelectActionsProps } from './combobox.types';
 export declare function SelectActions({ actions }: SelectActionsProps): React.JSX.Element | null;
 export declare function ComboboxTrigger({ children, open, disabled, readOnly, size, className, selected, showClear, onClearAll, formItemId, triggerProps, ...rest }: ComboboxTriggerProps): React.JSX.Element;
+export declare function ComboboxCheckboxTrigger({ children, open, label, disabled, readOnly, size, className, selected, showClear, onClearAll, formItemId, triggerProps, icon: Icon, iconClassName, optionsLength, selectedLength, onCheckboxClick, displayCount, ...rest }: ComboboxCheckboxTriggerProps): React.JSX.Element;
 export declare function ComboboxContent({ options, value: selectedValue, onSelect, size, multiple, className, showGroupSeparator, popoverContentProps, searchPlaceholder, noGroupSelection, actions, fixedActions, }: ComboboxContentProps): React.JSX.Element;
+export declare function ComboboxCheckboxContent({ options, value: selectedValue, onSelect, size, className, showGroupSeparator, popoverContentProps, searchPlaceholder, actions, fixedActions, }: ComboboxContentProps): React.JSX.Element;

package/combobox/combobox.component.js

@@ -1,10 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 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", "formItemId", "triggerProps"];
+var _excluded = ["children", "open", "disabled", "readOnly", "size", "className", "selected", "showClear", "onClearAll", "formItemId", "triggerProps"],
+  _excluded2 = ["children", "open", "label", "disabled", "readOnly", "size", "className", "selected", "showClear", "onClearAll", "formItemId", "triggerProps", "icon", "iconClassName", "optionsLength", "selectedLength", "onCheckboxClick", "displayCount"];
 import { buttonVariants } from '@scaleflex/ui-tw/button';
 import { ButtonVariant, buttonBaseClassNames } from '@scaleflex/ui-tw/button/button.constants';
+import { VisualCheckbox } from '@scaleflex/ui-tw/checkbox/checkbox.component';
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@scaleflex/ui-tw/command';
+import { CommandCheckboxItem } from '@scaleflex/ui-tw/command/command.component';
 import { isOptionGroup } from '@scaleflex/ui-tw/form';
 import { PopoverContent, PopoverTrigger } from '@scaleflex/ui-tw/popover';
 import { SelectSeparator, selectTriggerVariants } from '@scaleflex/ui-tw/select/select.component';
@@ -15,11 +18,11 @@ 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, XIcon } from 'lucide-react';
+import { ChevronDown, ChevronsUpDownIcon, XIcon } from 'lucide-react';
 import * as React from 'react';
 import { Fragment } from 'react';
 import { iconSizeInTriggerOptions, verticalSeparatorNextToChevronOptions } from './combobox.constants';
-import { createClearHandlers } from './combobox.utils';
+import { createClearHandlers, getIconSize } from './combobox.utils';
 var selectLabelVariants = cva('', {
   variants: {
     size: selectLabelSizeOptions
@@ -90,34 +93,122 @@ export function ComboboxTrigger(_ref2) {
     })]))
   }, /*#__PURE__*/React.createElement(XIcon, {
     "data-clear-icon": true,
-    className: cn('shrink-0 hover:opacity-80', iconSizeInTriggerOptions[size])
+    className: cn('text-muted-foreground/70 hover:text-muted-foreground shrink-0', 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])
+    className: cn('text-muted-foreground/70 ml-1 shrink-0', iconSizeInTriggerOptions[size])
   }))));
 }
-export function ComboboxContent(_ref3) {
-  var options = _ref3.options,
-    selectedValue = _ref3.value,
-    _onSelect = _ref3.onSelect,
+export function ComboboxCheckboxTrigger(_ref3) {
+  var children = _ref3.children,
+    open = _ref3.open,
+    label = _ref3.label,
+    _ref3$disabled = _ref3.disabled,
+    disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
+    _ref3$readOnly = _ref3.readOnly,
+    readOnly = _ref3$readOnly === void 0 ? false : _ref3$readOnly,
     _ref3$size = _ref3.size,
-    size = _ref3$size === void 0 ? 'md' : _ref3$size,
-    _ref3$multiple = _ref3.multiple,
-    multiple = _ref3$multiple === void 0 ? false : _ref3$multiple,
+    size = _ref3$size === void 0 ? FormSize.Md : _ref3$size,
     className = _ref3.className,
-    _ref3$showGroupSepara = _ref3.showGroupSeparator,
-    showGroupSeparator = _ref3$showGroupSepara === void 0 ? false : _ref3$showGroupSepara,
-    popoverContentProps = _ref3.popoverContentProps,
-    _ref3$searchPlacehold = _ref3.searchPlaceholder,
-    searchPlaceholder = _ref3$searchPlacehold === void 0 ? 'Search...' : _ref3$searchPlacehold,
-    _ref3$noGroupSelectio = _ref3.noGroupSelection,
-    noGroupSelection = _ref3$noGroupSelectio === void 0 ? false : _ref3$noGroupSelectio,
-    actions = _ref3.actions,
-    _ref3$fixedActions = _ref3.fixedActions,
-    fixedActions = _ref3$fixedActions === void 0 ? false : _ref3$fixedActions;
+    _ref3$selected = _ref3.selected,
+    selected = _ref3$selected === void 0 ? false : _ref3$selected,
+    _ref3$showClear = _ref3.showClear,
+    showClear = _ref3$showClear === void 0 ? false : _ref3$showClear,
+    onClearAll = _ref3.onClearAll,
+    formItemId = _ref3.formItemId,
+    triggerProps = _ref3.triggerProps,
+    Icon = _ref3.icon,
+    iconClassName = _ref3.iconClassName,
+    optionsLength = _ref3.optionsLength,
+    selectedLength = _ref3.selectedLength,
+    onCheckboxClick = _ref3.onCheckboxClick,
+    _ref3$displayCount = _ref3.displayCount,
+    displayCount = _ref3$displayCount === void 0 ? false : _ref3$displayCount,
+    rest = _objectWithoutProperties(_ref3, _excluded2);
+  var _getToolbarSizes2 = getToolbarSizes(size),
+    iconSize = _getToolbarSizes2.iconSize;
+  var _createClearHandlers2 = createClearHandlers(onClearAll),
+    handleOnTriggerClick = _createClearHandlers2.onClick,
+    handleOnTriggerKeyDown = _createClearHandlers2.onKeyDown;
+  var handleCheckboxKeyDown = function handleCheckboxKeyDown(event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onCheckboxClick === null || onCheckboxClick === void 0 || onCheckboxClick(event);
+    }
+  };
+  return /*#__PURE__*/React.createElement(PopoverTrigger, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement("button", _extends({
+    id: formItemId,
+    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
+    }), readOnly && selectReadOnlyClassNames, className, 'min-w-0'])),
+    onClick: handleOnTriggerClick,
+    onKeyDown: handleOnTriggerKeyDown
+  }, triggerProps), /*#__PURE__*/React.createElement(VisualCheckbox, {
+    size: size,
+    checked: !!selected,
+    partial: selectedLength !== optionsLength,
+    "aria-hidden": "true",
+    tabIndex: 0,
+    onClick: onCheckboxClick,
+    onKeyDown: handleCheckboxKeyDown
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex min-w-0 grow items-center gap-2"
+  }, Icon && /*#__PURE__*/React.createElement(Icon, {
+    className: cn('text-muted-foreground hover:text-primary shrink-0', getIconSize(size), selected && 'text-primary', disabled && 'opacity-50', iconClassName)
+  }), /*#__PURE__*/React.createElement("span", {
+    className: cn('truncate font-normal', !label && selectedLength === 0 && 'text-muted-foreground')
+  }, label || children), displayCount && selectedLength > 0 && optionsLength > 1 && /*#__PURE__*/React.createElement("span", {
+    className: "text-muted-foreground text-sm"
+  }, selectedLength, "/", optionsLength)), /*#__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('text-muted-foreground/70 hover:text-muted-foreground shrink-0', iconSizeInTriggerOptions[size])
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn(verticalSeparatorNextToChevronOptions[size])
+  }, /*#__PURE__*/React.createElement(Separator, {
+    orientation: "vertical"
+  }))), /*#__PURE__*/React.createElement(ChevronDown, {
+    className: cn('text-muted-foreground/70 ml-1 shrink-0', iconSizeInTriggerOptions[size])
+  }))));
+}
+export function ComboboxContent(_ref4) {
+  var options = _ref4.options,
+    selectedValue = _ref4.value,
+    _onSelect = _ref4.onSelect,
+    _ref4$size = _ref4.size,
+    size = _ref4$size === void 0 ? 'md' : _ref4$size,
+    _ref4$multiple = _ref4.multiple,
+    multiple = _ref4$multiple === void 0 ? false : _ref4$multiple,
+    className = _ref4.className,
+    _ref4$showGroupSepara = _ref4.showGroupSeparator,
+    showGroupSeparator = _ref4$showGroupSepara === void 0 ? false : _ref4$showGroupSepara,
+    popoverContentProps = _ref4.popoverContentProps,
+    _ref4$searchPlacehold = _ref4.searchPlaceholder,
+    searchPlaceholder = _ref4$searchPlacehold === void 0 ? 'Search...' : _ref4$searchPlacehold,
+    _ref4$noGroupSelectio = _ref4.noGroupSelection,
+    noGroupSelection = _ref4$noGroupSelectio === void 0 ? false : _ref4$noGroupSelectio,
+    actions = _ref4.actions,
+    _ref4$fixedActions = _ref4.fixedActions,
+    fixedActions = _ref4$fixedActions === void 0 ? false : _ref4$fixedActions;
   return /*#__PURE__*/React.createElement(PopoverContent, _extends({
     className: cn('p-0', className)
   }, popoverContentProps), /*#__PURE__*/React.createElement(Command, null, /*#__PURE__*/React.createElement(CommandInput, {
@@ -147,14 +238,14 @@ export function ComboboxContent(_ref3) {
         className: cn('text-secondary-foreground', selectLabelVariants({
           size: size
         }))
-      }, option.label), option.options.map(function (_ref4) {
-        var label = _ref4.label,
-          optionLabel = _ref4.optionLabel,
-          value = _ref4.value,
-          disabled = _ref4.disabled,
-          icon = _ref4.icon,
-          tooltip = _ref4.tooltip,
-          disabledTooltip = _ref4.disabledTooltip;
+      }, option.label), option.options.map(function (_ref5) {
+        var label = _ref5.label,
+          optionLabel = _ref5.optionLabel,
+          value = _ref5.value,
+          disabled = _ref5.disabled,
+          icon = _ref5.icon,
+          tooltip = _ref5.tooltip,
+          disabledTooltip = _ref5.disabledTooltip;
         var isGroupSelected = !noGroupSelection && multiple && option.value && Array.isArray(selectedValue) && selectedValue.includes(option.value);
         return /*#__PURE__*/React.createElement(CommandItem, {
           size: size,
@@ -194,4 +285,93 @@ export function ComboboxContent(_ref3) {
   })), fixedActions && /*#__PURE__*/React.createElement(SelectActions, {
     actions: actions
   })));
+}
+export function ComboboxCheckboxContent(_ref6) {
+  var options = _ref6.options,
+    selectedValue = _ref6.value,
+    _onSelect2 = _ref6.onSelect,
+    _ref6$size = _ref6.size,
+    size = _ref6$size === void 0 ? 'md' : _ref6$size,
+    className = _ref6.className,
+    _ref6$showGroupSepara = _ref6.showGroupSeparator,
+    showGroupSeparator = _ref6$showGroupSepara === void 0 ? false : _ref6$showGroupSepara,
+    popoverContentProps = _ref6.popoverContentProps,
+    _ref6$searchPlacehold = _ref6.searchPlaceholder,
+    searchPlaceholder = _ref6$searchPlacehold === void 0 ? 'Search...' : _ref6$searchPlacehold,
+    actions = _ref6.actions,
+    _ref6$fixedActions = _ref6.fixedActions,
+    fixedActions = _ref6$fixedActions === void 0 ? false : _ref6$fixedActions;
+  return /*#__PURE__*/React.createElement(PopoverContent, _extends({
+    className: cn('p-0', className)
+  }, 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) {
+    var _option$optionLabel2;
+    if (isOptionGroup(option)) {
+      return /*#__PURE__*/React.createElement(CommandGroup, {
+        key: groupIndex,
+        heading: !option.value ? option.label : undefined,
+        size: size
+      }, option.value && /*#__PURE__*/React.createElement(CommandCheckboxItem, {
+        size: size,
+        disabled: option.disabled,
+        key: option.value,
+        icon: option.icon,
+        value: option.value,
+        tooltip: option.tooltip,
+        disabledTooltip: option.disabledTooltip,
+        isGroup: true,
+        selectedValue: selectedValue,
+        onSelect: function onSelect() {
+          return _onSelect2(option.value);
+        },
+        className: cn('text-secondary-foreground', selectLabelVariants({
+          size: size
+        }))
+      }, option.label), option.options.map(function (_ref7) {
+        var label = _ref7.label,
+          optionLabel = _ref7.optionLabel,
+          value = _ref7.value,
+          disabled = _ref7.disabled,
+          icon = _ref7.icon,
+          tooltip = _ref7.tooltip,
+          disabledTooltip = _ref7.disabledTooltip;
+        var isGroupSelected = option.value && Array.isArray(selectedValue) && selectedValue.includes(option.value);
+        return /*#__PURE__*/React.createElement(CommandCheckboxItem, {
+          size: size,
+          disabled: disabled || !!isGroupSelected,
+          key: value,
+          icon: icon,
+          value: value,
+          tooltip: tooltip,
+          disabledTooltip: disabledTooltip,
+          isGroup: !!option.label,
+          selectedValue: selectedValue,
+          onSelect: function onSelect() {
+            return _onSelect2(value);
+          }
+        }, optionLabel !== null && optionLabel !== void 0 ? optionLabel : label);
+      }), showGroupSeparator && groupIndex !== options.length - 1 && /*#__PURE__*/React.createElement(SelectSeparator, null));
+    }
+    return /*#__PURE__*/React.createElement(CommandGroup, {
+      key: "default"
+    }, /*#__PURE__*/React.createElement(CommandCheckboxItem, {
+      size: size,
+      disabled: option.disabled,
+      key: option.value,
+      icon: option.icon,
+      value: option.value,
+      tooltip: option.tooltip,
+      disabledTooltip: option.disabledTooltip,
+      selectedValue: selectedValue,
+      onSelect: function onSelect() {
+        return _onSelect2(option.value);
+      }
+    }, (_option$optionLabel2 = option.optionLabel) !== null && _option$optionLabel2 !== void 0 ? _option$optionLabel2 : option.label));
+  }), !fixedActions && /*#__PURE__*/React.createElement(SelectActions, {
+    actions: actions
+  })), fixedActions && /*#__PURE__*/React.createElement(SelectActions, {
+    actions: actions
+  })));
 }

package/combobox/combobox.types.d.ts

@@ -2,7 +2,7 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { SelectOption } from '@scaleflex/ui-tw/form';
 import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
 import { Command as CommandPrimitive } from 'cmdk';
-import type { ButtonHTMLAttributes, ComponentProps, KeyboardEvent, MouseEvent, ReactElement, ReactNode } from 'react';
+import type { ButtonHTMLAttributes, ComponentProps, ElementType, KeyboardEvent, MouseEvent, ReactElement, ReactNode } from 'react';
 export type ClearEvent = MouseEvent | KeyboardEvent;
 export type SelectActionsProps = {
     actions?: ReactNode[];
@@ -21,6 +21,15 @@ export type ComboboxTriggerProps = {
     onClearAll?: () => void;
     triggerProps?: ButtonHTMLAttributes<HTMLButtonElement>;
 };
+export type ComboboxCheckboxTriggerProps = ComboboxTriggerProps & {
+    optionsLength: number;
+    selectedLength: number;
+    label?: ReactNode | string;
+    displayCount?: boolean;
+    icon?: ElementType;
+    iconClassName?: string;
+    onCheckboxClick?: (event: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>) => void;
+};
 export type ComboboxContentProps = {
     options: SelectOption[];
     value: string | string[];
@@ -83,6 +92,16 @@ export interface ComboboxMultiInlineProps extends ComboboxCommonProps {
     onBlur?: (value: string[]) => void;
     showClear?: boolean;
 }
+export interface ComboboxMultiCheckboxProps extends ComboboxCommonProps {
+    value: string[];
+    onChange: (value: string[]) => void;
+    label?: ReactElement | string;
+    displayCount?: boolean;
+    iconClassName?: string;
+    icon?: ElementType;
+    onBlur?: (value: string[]) => void;
+    showClear?: boolean;
+}
 export interface ComboboxMultiTagProps extends ComboboxCommonProps {
     value: string[];
     onChange: (value: string[]) => void;

package/combobox/combobox.utils.d.ts

@@ -1,7 +1,9 @@
 import { FlatOption, SelectOption } from '@scaleflex/ui-tw/form';
+import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
 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;
 };
+export declare const getIconSize: (size: FormSizeType) => string;

package/combobox/combobox.utils.js

@@ -1,4 +1,5 @@
 import { isOptionGroup } from '@scaleflex/ui-tw/form';
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 export var flattenOptions = function flattenOptions(options) {
   return options.flatMap(function (option) {
     return isOptionGroup(option) ? option.options : [option];
@@ -25,4 +26,15 @@ export var createClearHandlers = function createClearHandlers(onClearAll) {
       }
     }
   };
+};
+export var getIconSize = function getIconSize(size) {
+  switch (size) {
+    case FormSize.Lg:
+      return 'size-6 ml-2';
+    case FormSize.Sm:
+      return 'size-4 ml-1';
+    case FormSize.Md:
+    default:
+      return 'size-5 ml-1.5';
+  }
 };

package/combobox/index.d.ts

@@ -2,4 +2,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 { ComboboxMultiCheckbox } from './combobox-multi-checkbox/combobox-multi-checkbox.component';
 export { flattenOptions } from './combobox.utils';

package/combobox/index.js

@@ -2,4 +2,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 { ComboboxMultiCheckbox } from './combobox-multi-checkbox/combobox-multi-checkbox.component';
 export { flattenOptions } from './combobox.utils';

package/command/command.component.d.ts

@@ -14,5 +14,6 @@ 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, ...props }: CommandItemProps): React.JSX.Element;
+declare function CommandCheckboxItem({ className, 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, CommandShortcut, CommandSeparator, };
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandCheckboxItem, CommandShortcut, CommandSeparator, };

package/command/command.component.js

@@ -8,7 +8,9 @@ var _excluded = ["className"],
   _excluded6 = ["className", "size"],
   _excluded7 = ["className"],
   _excluded8 = ["className", "size", "isGroup", "icon", "tooltip", "children", "selectedValue", "multiple", "value", "shortcut", "disabledTooltip", "disabled"],
-  _excluded9 = ["className"];
+  _excluded9 = ["className", "size", "isGroup", "children", "selectedValue", "value", "icon", "disabled", "tooltip", "disabledTooltip"],
+  _excluded10 = ["className"];
+import { Checkbox } from '@scaleflex/ui-tw/checkbox';
 import { Dialog, DialogFormDescription, DialogFormHeader, DialogFormTitle, DialogWideContent } from '@scaleflex/ui-tw/dialog';
 import { LabelIcon } from '@scaleflex/ui-tw/label/components/label-icon';
 import { SelectIcon } from '@scaleflex/ui-tw/select/components/select-icon';
@@ -150,12 +152,52 @@ function CommandItem(_ref8) {
     className: cn('text-primary ml-auto h-4 w-4', selected ? 'opacity-100' : 'opacity-0')
   })));
 }
-function CommandShortcut(_ref9) {
+function CommandCheckboxItem(_ref9) {
   var className = _ref9.className,
+    size = _ref9.size,
+    isGroup = _ref9.isGroup,
+    children = _ref9.children,
+    selectedValue = _ref9.selectedValue,
+    value = _ref9.value,
+    icon = _ref9.icon,
+    disabled = _ref9.disabled,
+    tooltip = _ref9.tooltip,
+    disabledTooltip = _ref9.disabledTooltip,
     props = _objectWithoutProperties(_ref9, _excluded9);
+  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",
+    className: cn('relative flex w-full cursor-pointer items-center gap-3 outline-none select-none', 'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground', '!opacity-100 data-[disabled=true]:cursor-not-allowed', selectItemVariants({
+      size: size
+    }), isGroup && getOptionInGroupPaddingLeft(size), className),
+    disabled: disabled
+  }, props), /*#__PURE__*/React.createElement(Checkbox, {
+    size: size,
+    checked: !!selected,
+    "aria-hidden": "true",
+    tabIndex: -1,
+    className: "pointer-events-none"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-1 overflow-hidden"
+  }, icon && /*#__PURE__*/React.createElement(SelectIcon, {
+    size: size,
+    icon: icon,
+    className: cn('text-muted-foreground hover:text-primary !mr-1 shrink-0', selected && 'text-primary', disabled && 'opacity-50')
+  }), /*#__PURE__*/React.createElement("div", {
+    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: disabled ? disabledTooltip : tooltip
+  }))));
+}
+function CommandShortcut(_ref10) {
+  var className = _ref10.className,
+    props = _objectWithoutProperties(_ref10, _excluded10);
   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, CommandShortcut, CommandSeparator };
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandCheckboxItem, CommandShortcut, CommandSeparator };

package/date-picker/date-picker.component.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { DatePickerProps } from './date-picker.types';
-declare function DatePicker({ minDate, maxDate, readOnly, defaultDate, size, invalidDateText, disabled, onChange, popoverClassName, defaultOpen, popoverContentProps, onKeyDown, onBlur, ...rest }: DatePickerProps): React.JSX.Element;
+declare function DatePicker({ minDate, maxDate, readOnly, defaultDate, size, invalidDateText, disabled, onChange, popoverClassName, defaultOpen, popoverContentProps, onKeyDown, onBlur, placeholder, format: dateFormat, locale, calendarProps, ...rest }: DatePickerProps): React.JSX.Element;
 export { DatePicker };

package/date-picker/date-picker.component.js

@@ -2,7 +2,7 @@ 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 = ["minDate", "maxDate", "readOnly", "defaultDate", "size", "invalidDateText", "disabled", "onChange", "popoverClassName", "defaultOpen", "popoverContentProps", "onKeyDown", "onBlur"];
+var _excluded = ["minDate", "maxDate", "readOnly", "defaultDate", "size", "invalidDateText", "disabled", "onChange", "popoverClassName", "defaultOpen", "popoverContentProps", "onKeyDown", "onBlur", "placeholder", "format", "locale", "calendarProps"];
 import { Button } from '@scaleflex/ui-tw/button';
 import { Calendar } from '@scaleflex/ui-tw/calendar';
 import { Input } from '@scaleflex/ui-tw/input';
@@ -12,10 +12,11 @@ import { getBaseSelectClassNames, selectReadOnlyClassNames } from '@scaleflex/ui
 import { getBaseInputClasses } from '@scaleflex/ui-tw/styles/shared-classes';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
+import { format, isValid, parse } from 'date-fns';
+import { enGB } from 'date-fns/locale';
 import { CalendarIcon } from 'lucide-react';
 import React, { useRef, useState } from 'react';
 import { buttonSizeInTriggerOptions, iconSizeInTriggerOptions } from './date-picker.constants';
-import { parseDateString, toHtmlDateString } from './date-picker.utils';
 function DatePicker(_ref) {
   var minDate = _ref.minDate,
     maxDate = _ref.maxDate,
@@ -33,6 +34,12 @@ function DatePicker(_ref) {
     popoverContentProps = _ref.popoverContentProps,
     onKeyDown = _ref.onKeyDown,
     onBlur = _ref.onBlur,
+    placeholder = _ref.placeholder,
+    _ref$format = _ref.format,
+    dateFormat = _ref$format === void 0 ? 'dd/MM/yyyy' : _ref$format,
+    _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? enGB : _ref$locale,
+    calendarProps = _ref.calendarProps,
     rest = _objectWithoutProperties(_ref, _excluded);
   var inputRef = useRef(null);
   var isEscapeBlur = useRef(false);
@@ -40,7 +47,9 @@ function DatePicker(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
-  var _useState3 = useState(toHtmlDateString(defaultDate)),
+  var _useState3 = useState(defaultDate ? format(defaultDate, dateFormat, {
+      locale: locale
+    }) : ''),
     _useState4 = _slicedToArray(_useState3, 2),
     inputValue = _useState4[0],
     setInputValue = _useState4[1];
@@ -52,13 +61,17 @@ function DatePicker(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     calendarMonth = _useState8[0],
     setCalendarMonth = _useState8[1];
-  var parsedDate = inputValue && parseDateString(inputValue);
-  var isInputValid = !inputValue || !!parsedDate;
+  var parsedDate = inputValue ? parse(inputValue, dateFormat, new Date(), {
+    locale: locale
+  }) : undefined;
+  var isInputValid = !inputValue || parsedDate && isValid(parsedDate);
   var handleInputChange = function handleInputChange(e) {
     var value = e.target.value;
     setInputValue(value);
-    var parsed = parseDateString(value);
-    if (parsed) {
+    var parsed = parse(value, dateFormat, new Date(), {
+      locale: locale
+    });
+    if (isValid(parsed)) {
       setSelectedDate(parsed);
       setCalendarMonth(parsed);
     }
@@ -67,7 +80,9 @@ function DatePicker(_ref) {
     if (date) {
       var _inputRef$current;
       setSelectedDate(date);
-      setInputValue(toHtmlDateString(date));
+      setInputValue(format(date, dateFormat, {
+        locale: locale
+      }));
       setCalendarMonth(date);
       setOpen(false);
       onChange === null || onChange === void 0 || onChange(date);
@@ -108,7 +123,7 @@ function DatePicker(_ref) {
     inputMode: "numeric",
     autoComplete: "off",
     pattern: "\\d{2}/\\d{2}/\\d{4}",
-    placeholder: "dd/mm/yyyy",
+    placeholder: placeholder || dateFormat,
     value: inputValue,
     disabled: disabled,
     className: cn.apply(void 0, _toConsumableArray(getBaseSelectClassNames()).concat(_toConsumableArray(getBaseInputClasses()), ['hover:border-secondary-foreground/50', selectTriggerVariants({
@@ -143,7 +158,7 @@ function DatePicker(_ref) {
     align: "end",
     alignOffset: -8,
     sideOffset: 10
-  }, popoverContentProps), /*#__PURE__*/React.createElement(Calendar, {
+  }, popoverContentProps), /*#__PURE__*/React.createElement(Calendar, _extends({
     mode: "single",
     selected: selectedDate,
     captionLayout: "dropdown",
@@ -154,9 +169,10 @@ function DatePicker(_ref) {
       before: minDate
     }, maxDate && {
       after: maxDate
-    }].filter(Boolean)
-  })))), !isInputValid && /*#__PURE__*/React.createElement("span", {
+    }].filter(Boolean),
+    locale: locale
+  }, calendarProps))))), !isInputValid && /*#__PURE__*/React.createElement("span", {
     className: "px-1 text-xs text-red-500"
-  }, invalidDateText !== null && invalidDateText !== void 0 ? invalidDateText : 'Invalid date. Use dd/mm/yyyy'));
+  }, invalidDateText !== null && invalidDateText !== void 0 ? invalidDateText : "Invalid date. Use ".concat(placeholder || dateFormat)));
 }
 export { DatePicker };

package/date-picker/date-picker.constants.d.ts

@@ -1,3 +1,4 @@
+import { Locale } from 'date-fns';
 export declare const iconSizeInTriggerOptions: {
     sm: string;
     md: string;
@@ -8,3 +9,8 @@ export declare const buttonSizeInTriggerOptions: {
     md: string;
     lg: string;
 };
+export declare const SUPPORTED_DATE_LOCALES: Record<string, {
+    label: string;
+    locale: Locale;
+    format: string;
+}>;

package/date-picker/date-picker.constants.js

@@ -1,4 +1,72 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+import { de, enGB, enUS, es, fr, id, it, ja, nl, pl, pt, ro, zhCN } from 'date-fns/locale';
 export var iconSizeInTriggerOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'size-3'), FormSize.Md, 'size-4'), FormSize.Lg, 'size-5');
-export var buttonSizeInTriggerOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'icon-xs'), FormSize.Md, 'icon-sm'), FormSize.Lg, 'icon-md');
+export var buttonSizeInTriggerOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'icon-xs'), FormSize.Md, 'icon-sm'), FormSize.Lg, 'icon-md');
+export var SUPPORTED_DATE_LOCALES = {
+  en: {
+    label: 'English (US)',
+    locale: enUS,
+    format: 'MM/dd/yyyy'
+  },
+  enGB: {
+    label: 'English (UK)',
+    locale: enGB,
+    format: 'dd/MM/yyyy'
+  },
+  de: {
+    label: 'German',
+    locale: de,
+    format: 'dd.MM.yyyy'
+  },
+  es: {
+    label: 'Spanish',
+    locale: es,
+    format: 'dd/MM/yyyy'
+  },
+  fr: {
+    label: 'French',
+    locale: fr,
+    format: 'dd/MM/yyyy'
+  },
+  id: {
+    label: 'Indonesian',
+    locale: id,
+    format: 'dd/MM/yyyy'
+  },
+  it: {
+    label: 'Italian',
+    locale: it,
+    format: 'dd/MM/yyyy'
+  },
+  ja: {
+    label: 'Japanese',
+    locale: ja,
+    format: 'yyyy/MM/dd'
+  },
+  nl: {
+    label: 'Dutch',
+    locale: nl,
+    format: 'dd-MM-yyyy'
+  },
+  pl: {
+    label: 'Polish',
+    locale: pl,
+    format: 'dd.MM.yyyy'
+  },
+  pt: {
+    label: 'Portuguese',
+    locale: pt,
+    format: 'dd/MM/yyyy'
+  },
+  ro: {
+    label: 'Romanian',
+    locale: ro,
+    format: 'dd.MM.yyyy'
+  },
+  zh: {
+    label: 'Chinese',
+    locale: zhCN,
+    format: 'yyyy/MM/dd'
+  }
+};

package/date-picker/date-picker.types.d.ts

@@ -1,6 +1,8 @@
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
+import type { Locale } from 'date-fns';
 import type { ComponentProps, FocusEvent, KeyboardEvent } from 'react';
+import { DayPicker } from 'react-day-picker';
 export type DatePickerProps = {
     minDate?: Date;
     maxDate?: Date;
@@ -15,4 +17,9 @@ export type DatePickerProps = {
     onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
     onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     popoverContentProps?: ComponentProps<typeof PopoverPrimitive.Content>;
+    calendarProps?: Omit<ComponentProps<typeof DayPicker>, 'selected' | 'onSelect' | 'month' | 'mode' | 'captionLayout' | 'onMonthChange' | 'disabled'>;
+    pattern?: string;
+    placeholder?: string;
+    format?: string;
+    locale?: Locale;
 };

package/date-picker/index.d.ts

@@ -1 +1,2 @@
 export { DatePicker } from './date-picker.component';
+export { SUPPORTED_DATE_LOCALES } from './date-picker.constants';

package/date-picker/index.js

@@ -1 +1,2 @@
-export { DatePicker } from './date-picker.component';
+export { DatePicker } from './date-picker.component';
+export { SUPPORTED_DATE_LOCALES } from './date-picker.constants';

package/dialog/dialog.component.js

@@ -66,7 +66,7 @@ function DialogWideContent(_ref6) {
   }, props), children, /*#__PURE__*/React.createElement(DialogPrimitive.Close, {
     "data-state": "open",
     asChild: true,
-    className: cn('text-muted-foreground absolute top-3 right-3 cursor-pointer rounded-xs opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6", focusRingClassNames)
+    className: cn('text-muted-foreground/70 hover:text-muted-foreground absolute top-3 right-3 cursor-pointer rounded-xs transition-opacity disabled:pointer-events-none', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6", focusRingClassNames)
   }, /*#__PURE__*/React.createElement(Button, {
     variant: "ghost-secondary",
     size: "icon-md"
@@ -86,7 +86,7 @@ function DialogFormContent(_ref7) {
   }, props), children, /*#__PURE__*/React.createElement(DialogPrimitive.Close, {
     "data-state": "open",
     asChild: true,
-    className: cn('text-muted-foreground absolute top-3 right-3 cursor-pointer rounded-xs opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6", focusRingClassNames)
+    className: cn('text-muted-foreground/70 hover:text-muted-foreground absolute top-3 right-3 cursor-pointer rounded-xs transition-opacity disabled:pointer-events-none', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6", focusRingClassNames)
   }, /*#__PURE__*/React.createElement(Button, {
     variant: "ghost-secondary",
     size: "icon-md"

package/input-tags/input-tags.component.js

@@ -180,9 +180,9 @@ export function InputTags(_ref) {
       onGenerateTags === null || onGenerateTags === void 0 || onGenerateTags();
     }
   }, generateLabel)), /*#__PURE__*/React.createElement(ChevronsUpDownIcon, {
-    className: cn('mr-1.5 ml-auto shrink-0 opacity-50', iconSizeInTriggerOptions[size])
+    className: cn('text-muted-foreground/70 mr-1.5 ml-auto shrink-0', iconSizeInTriggerOptions[size])
   })) : /*#__PURE__*/React.createElement(ChevronsUpDownIcon, {
-    className: cn('my-auto mr-1.5 ml-auto shrink-0 opacity-50', iconSizeInTriggerOptions[size])
+    className: cn('text-muted-foreground/70 my-auto mr-1.5 ml-auto shrink-0', iconSizeInTriggerOptions[size])
   })))), /*#__PURE__*/React.createElement(PopoverContent, _extends({
     className: cn('w-[--radix-popover-trigger-width] p-0', popoverClassName)
   }, popoverContentProps), /*#__PURE__*/React.createElement(Command, {

package/package.json

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

package/search/search.component.js

@@ -65,6 +65,6 @@ export function Search(_ref) {
     }), 'absolute top-1/2 right-2 -translate-y-1/2']))
   }, /*#__PURE__*/React.createElement(XIcon, {
     "data-clear-icon": true,
-    className: cn('shrink-0 hover:opacity-80')
+    className: cn('text-muted-foreground/70 hover:text-muted-foreground shrink-0')
   })));
 }

package/select/components/select-icon.d.ts

@@ -1,2 +1,2 @@
-import type { SelectIconProps } from '@scaleflex/ui-tw/select/select.types';
+import { SelectIconProps } from '@scaleflex/ui-tw/select/select.types';
 export declare const SelectIcon: (props: SelectIconProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

package/select/select.component.js

@@ -89,7 +89,7 @@ function SelectTrigger(_ref4) {
   }, children)), /*#__PURE__*/React.createElement(SelectPrimitive.Icon, {
     asChild: true
   }, /*#__PURE__*/React.createElement(ChevronDownIcon, {
-    className: cn('opacity-50', size === FormSize.Lg ? 'size-5' : 'size-4.5')
+    className: cn('text-muted-foreground/70', size === FormSize.Lg ? 'size-5' : 'size-4.5')
   })));
 }
 function SelectContent(_ref5) {
@@ -165,7 +165,7 @@ function SelectScrollUpButton(_ref9) {
     "data-slot": "select-scroll-up-button",
     className: cn('flex cursor-default items-center justify-center py-1', className)
   }, props), /*#__PURE__*/React.createElement(ChevronUpIcon, {
-    className: "size-4"
+    className: "text-muted-foreground/70 size-4"
   }));
 }
 function SelectScrollDownButton(_ref10) {
@@ -175,7 +175,7 @@ function SelectScrollDownButton(_ref10) {
     "data-slot": "select-scroll-down-button",
     className: cn('flex cursor-default items-center justify-center py-1', className)
   }, props), /*#__PURE__*/React.createElement(ChevronDownIcon, {
-    className: "size-4"
+    className: "text-muted-foreground/70 size-4"
   }));
 }
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/select/select.types.d.ts

@@ -1,7 +1,7 @@
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { SelectOption } from '@scaleflex/ui-tw/form';
 import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
-import type { ComponentProps, ReactElement, ReactNode } from 'react';
+import type { ComponentProps, ElementType, ReactElement, ReactNode } from 'react';
 export interface SelectProps extends ComponentProps<typeof SelectPrimitive.Root> {
 }
 export interface SelectTriggerProps extends ComponentProps<typeof SelectPrimitive.Trigger> {
@@ -22,6 +22,9 @@ export interface SelectLabelProps extends ComponentProps<typeof SelectPrimitive.
 }
 export interface SelectIconProps extends ComponentProps<'span'>, Pick<SelectTriggerProps, 'size' | 'icon'> {
 }
+export interface SelectIconElementProps extends ComponentProps<'svg'>, Pick<SelectTriggerProps, 'size'> {
+    icon: ElementType;
+}
 export interface SelectorProps extends SelectProps {
     options: SelectOption[];
     value?: string;