@scaleflex/ui-tw 0.0.34 → 0.0.36

package/calendar/calendar.component.d.ts

@@ -0,0 +1,9 @@
+import { Button } from '@scaleflex/ui-tw/button';
+import React from 'react';
+import { type ComponentProps } from 'react';
+import { DayButton, DayPicker } from 'react-day-picker';
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: ComponentProps<typeof DayPicker> & {
+    buttonVariant?: ComponentProps<typeof Button>['variant'];
+}): React.JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): React.JSX.Element;
+export { Calendar, CalendarDayButton };

package/calendar/calendar.component.js

@@ -0,0 +1,136 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject, _templateObject2;
+var _excluded = ["className", "classNames", "showOutsideDays", "captionLayout", "buttonVariant", "formatters", "components"],
+  _excluded2 = ["className", "rootRef"],
+  _excluded3 = ["className", "orientation"],
+  _excluded4 = ["children"],
+  _excluded5 = ["className", "day", "modifiers"];
+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 { cn } from '@scaleflex/ui-tw/utils/cn';
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import React from 'react';
+import { DayPicker, getDefaultClassNames } from 'react-day-picker';
+function Calendar(_ref) {
+  var className = _ref.className,
+    classNames = _ref.classNames,
+    _ref$showOutsideDays = _ref.showOutsideDays,
+    showOutsideDays = _ref$showOutsideDays === void 0 ? true : _ref$showOutsideDays,
+    _ref$captionLayout = _ref.captionLayout,
+    captionLayout = _ref$captionLayout === void 0 ? 'label' : _ref$captionLayout,
+    _ref$buttonVariant = _ref.buttonVariant,
+    buttonVariant = _ref$buttonVariant === void 0 ? 'ghost-secondary' : _ref$buttonVariant,
+    formatters = _ref.formatters,
+    components = _ref.components,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var defaultClassNames = getDefaultClassNames();
+  return /*#__PURE__*/React.createElement(DayPicker, _extends({
+    showOutsideDays: showOutsideDays,
+    className: cn('bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent', String.raw(_templateObject || (_templateObject = _taggedTemplateLiteral(["rtl:**:[.rdp-button_next>svg]:rotate-180"], ["rtl:**:[.rdp-button\\_next>svg]:rotate-180"]))), String.raw(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["rtl:**:[.rdp-button_previous>svg]:rotate-180"], ["rtl:**:[.rdp-button\\_previous>svg]:rotate-180"]))), className),
+    captionLayout: captionLayout,
+    formatters: _objectSpread({
+      formatMonthDropdown: function formatMonthDropdown(date) {
+        return date.toLocaleString('default', {
+          month: 'short'
+        });
+      }
+    }, formatters),
+    classNames: _objectSpread({
+      root: cn('w-fit', defaultClassNames.root),
+      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({
+        variant: buttonVariant
+      }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_previous),
+      button_next: cn(buttonVariants({
+        variant: buttonVariant
+      }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_next),
+      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),
+      dropdown: cn('absolute inset-0 opacity-0', defaultClassNames.dropdown),
+      caption_label: cn('select-none font-medium', captionLayout === 'label' ? 'text-sm' : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5', defaultClassNames.caption_label),
+      table: 'w-full border-collapse',
+      weekdays: cn('flex', defaultClassNames.weekdays),
+      weekday: cn('text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none', defaultClassNames.weekday),
+      week: cn('flex w-full mt-2', defaultClassNames.week),
+      week_number_header: cn('select-none w-(--cell-size)', defaultClassNames.week_number_header),
+      week_number: cn('text-[0.8rem] select-none text-muted-foreground', defaultClassNames.week_number),
+      day: cn('relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none', defaultClassNames.day),
+      range_start: cn('rounded-l-md bg-accent', defaultClassNames.range_start),
+      range_middle: cn('rounded-none', defaultClassNames.range_middle),
+      range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
+      today: cn('bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none', defaultClassNames.today),
+      outside: cn('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),
+      disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
+      hidden: cn('invisible', defaultClassNames.hidden)
+    }, classNames),
+    components: _objectSpread({
+      Root: function Root(_ref2) {
+        var className = _ref2.className,
+          rootRef = _ref2.rootRef,
+          props = _objectWithoutProperties(_ref2, _excluded2);
+        return /*#__PURE__*/React.createElement("div", _extends({
+          "data-slot": "calendar",
+          ref: rootRef,
+          className: cn(className)
+        }, props));
+      },
+      Chevron: function Chevron(_ref3) {
+        var className = _ref3.className,
+          orientation = _ref3.orientation,
+          props = _objectWithoutProperties(_ref3, _excluded3);
+        if (orientation === 'left') {
+          return /*#__PURE__*/React.createElement(ChevronLeftIcon, _extends({
+            className: cn('size-4', className)
+          }, props));
+        }
+        if (orientation === 'right') {
+          return /*#__PURE__*/React.createElement(ChevronRightIcon, _extends({
+            className: cn('size-4', className)
+          }, props));
+        }
+        return /*#__PURE__*/React.createElement(ChevronDownIcon, _extends({
+          className: cn('size-4', className)
+        }, props));
+      },
+      DayButton: CalendarDayButton,
+      WeekNumber: function WeekNumber(_ref4) {
+        var children = _ref4.children,
+          props = _objectWithoutProperties(_ref4, _excluded4);
+        return /*#__PURE__*/React.createElement("td", props, /*#__PURE__*/React.createElement("div", {
+          className: "flex size-(--cell-size) items-center justify-center text-center"
+        }, children));
+      }
+    }, components)
+  }, props));
+}
+function CalendarDayButton(_ref5) {
+  var className = _ref5.className,
+    day = _ref5.day,
+    modifiers = _ref5.modifiers,
+    props = _objectWithoutProperties(_ref5, _excluded5);
+  var defaultClassNames = getDefaultClassNames();
+  var ref = React.useRef(null);
+  React.useEffect(function () {
+    var _ref$current;
+    if (modifiers.focused) (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
+  }, [modifiers.focused]);
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    ref: ref,
+    variant: "ghost-secondary",
+    size: "sm",
+    "data-day": day.date.toLocaleDateString(),
+    "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
+    "data-range-start": modifiers.range_start,
+    "data-range-end": modifiers.range_end,
+    "data-range-middle": modifiers.range_middle,
+    className: cn('data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70', defaultClassNames.day, className)
+  }, props));
+}
+export { Calendar, CalendarDayButton };

package/calendar/index.d.ts

@@ -0,0 +1 @@
+export { Calendar, CalendarDayButton } from './calendar.component';

package/calendar/index.js

@@ -0,0 +1 @@
+export { Calendar, CalendarDayButton } from './calendar.component';

package/checkbox/checkbox.component.d.ts

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

package/checkbox/checkbox.component.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "size"];
+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 React from 'react';
+import { checkboxIndicatorSizeOptions, checkboxSizeOptions } from './checkbox.constants';
+var checkboxVariants = cva('', {
+  variants: {
+    size: checkboxSizeOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md
+  }
+});
+var checkboxIndicatorVariants = cva('', {
+  variants: {
+    size: checkboxIndicatorSizeOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md
+  }
+});
+function Checkbox(_ref) {
+  var className = _ref.className,
+    size = _ref.size,
+    props = _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, {
+    "data-slot": "checkbox-indicator",
+    className: "flex items-center justify-center text-current transition-none"
+  }, /*#__PURE__*/React.createElement(CheckIcon, {
+    className: cn(checkboxIndicatorVariants({
+      size: size
+    }))
+  })));
+}
+export { Checkbox };

package/checkbox/checkbox.constants.d.ts

@@ -0,0 +1,10 @@
+export declare const checkboxSizeOptions: {
+    readonly sm: "size-4";
+    readonly md: "size-5";
+    readonly lg: "size-6";
+};
+export declare const checkboxIndicatorSizeOptions: {
+    readonly sm: "size-3.5";
+    readonly md: "size-4.5";
+    readonly lg: "size-5.5";
+};

package/checkbox/checkbox.constants.js

@@ -0,0 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+export var checkboxSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'size-4'), FormSize.Md, 'size-5'), FormSize.Lg, 'size-6');
+export var checkboxIndicatorSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'size-3.5'), FormSize.Md, 'size-4.5'), FormSize.Lg, 'size-5.5');

package/checkbox/checkbox.types.d.ts

@@ -0,0 +1,6 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+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;
+}

package/checkbox/checkbox.types.js

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

package/checkbox/index.d.ts

@@ -0,0 +1 @@
+export { Checkbox } from './checkbox.component';

package/checkbox/index.js

@@ -0,0 +1 @@
+export { Checkbox } from './checkbox.component';

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

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

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

@@ -1,7 +1,7 @@
 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", "showClear", "popoverClassName", "onBlur"];
+var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "size", "readOnly", "showClear", "popoverClassName", "onBlur", "showGroupSeparator"];
 import { Popover } from '@scaleflex/ui-tw/popover';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import React from 'react';
@@ -25,6 +25,8 @@ export function ComboboxMultiInline(_ref) {
     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,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -72,6 +74,7 @@ export function ComboboxMultiInline(_ref) {
     onClearAll: onClearAll,
     "aria-invalid": rest['aria-invalid']
   }, displayValue), /*#__PURE__*/React.createElement(ComboboxContent, {
+    showGroupSeparator: showGroupSeparator,
     className: popoverClassName,
     options: options,
     value: value,

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

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

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

@@ -1,7 +1,7 @@
 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"];
+var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "size", "readOnly", "popoverClassName", "onBlur", "showGroupSeparator"];
 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';
@@ -32,6 +32,8 @@ export function ComboboxMultiTag(_ref) {
     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,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _getToolbarSizes = getToolbarSizes(size),
     buttonSize = _getToolbarSizes.buttonSize;
@@ -125,6 +127,7 @@ export function ComboboxMultiTag(_ref) {
     onSelect: toggleValue,
     size: size,
     multiple: true,
-    className: popoverClassName
+    className: popoverClassName,
+    showGroupSeparator: showGroupSeparator
   }));
 }

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

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

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

@@ -1,6 +1,6 @@
 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", "formItemId", "onBlur"];
+var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "popoverClassName", "size", "readOnly", "showClear", "formItemId", "onBlur", "showGroupSeparator"];
 import { Popover } from '@scaleflex/ui-tw/popover';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import * as React from 'react';
@@ -27,6 +27,8 @@ export function ComboboxSingle(_ref) {
     showClear = _ref$showClear === void 0 ? true : _ref$showClear,
     formItemId = _ref.formItemId,
     onBlur = _ref.onBlur,
+    _ref$showGroupSeparat = _ref.showGroupSeparator,
+    showGroupSeparator = _ref$showGroupSeparat === void 0 ? false : _ref$showGroupSeparat,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -70,6 +72,7 @@ export function ComboboxSingle(_ref) {
     options: options,
     value: value,
     onSelect: onSelect,
-    size: size
+    size: size,
+    showGroupSeparator: showGroupSeparator
   }));
 }

package/combobox/combobox.component.d.ts

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

package/combobox/combobox.component.js

@@ -6,7 +6,7 @@ import { ButtonVariant, buttonBaseClassNames } from '@scaleflex/ui-tw/button/but
 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 { SelectSeparator, 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';
@@ -84,7 +84,9 @@ export function ComboboxContent(_ref2) {
     size = _ref2$size === void 0 ? 'md' : _ref2$size,
     _ref2$multiple = _ref2.multiple,
     multiple = _ref2$multiple === void 0 ? false : _ref2$multiple,
-    className = _ref2.className;
+    className = _ref2.className,
+    _ref2$showGroupSepara = _ref2.showGroupSeparator,
+    showGroupSeparator = _ref2$showGroupSepara === void 0 ? false : _ref2$showGroupSepara;
   return /*#__PURE__*/React.createElement(PopoverContent, {
     className: cn('p-0', className)
   }, /*#__PURE__*/React.createElement(Command, null, /*#__PURE__*/React.createElement(CommandInput, {
@@ -118,7 +120,7 @@ export function ComboboxContent(_ref2) {
             return _onSelect(value);
           }
         }, label);
-      }));
+      }), showGroupSeparator && groupIndex !== options.length - 1 && /*#__PURE__*/React.createElement(SelectSeparator, null));
     }
     return /*#__PURE__*/React.createElement(CommandGroup, {
       key: "default"

package/combobox/combobox.types.d.ts

@@ -25,6 +25,7 @@ export type ComboboxContentProps = {
     size?: FormSizeType;
     multiple?: boolean;
     className?: string;
+    showGroupSeparator?: boolean;
 };
 export interface CommandInputProps extends Omit<ComponentProps<typeof CommandPrimitive.Input>, 'size'> {
     size?: FormSizeType;
@@ -51,6 +52,7 @@ interface ComboboxCommonProps {
     popoverClassName?: string;
     'aria-invalid'?: boolean;
     formItemId?: string;
+    showGroupSeparator?: boolean;
 }
 export interface ComboboxSingleProps extends ComboboxCommonProps {
     value: string;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DatePickerProps } from './date-picker.types';
+declare function DatePicker({ minDate, maxDate, defaultDate, readOnly, size, invalidDateText, disabled, ...rest }: DatePickerProps): React.JSX.Element;
+export { DatePicker };

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

@@ -0,0 +1,129 @@
+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", "defaultDate", "readOnly", "size", "invalidDateText", "disabled"];
+import { Button } from '@scaleflex/ui-tw/button';
+import { Calendar } from '@scaleflex/ui-tw/calendar';
+import { Input } from '@scaleflex/ui-tw/input';
+import { Popover, 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 { 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 { CalendarIcon } from 'lucide-react';
+import React, { 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,
+    _ref$defaultDate = _ref.defaultDate,
+    defaultDate = _ref$defaultDate === void 0 ? new Date() : _ref$defaultDate,
+    readOnly = _ref.readOnly,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? FormSize.Md : _ref$size,
+    invalidDateText = _ref.invalidDateText,
+    disabled = _ref.disabled,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useState3 = useState(toHtmlDateString(defaultDate)),
+    _useState4 = _slicedToArray(_useState3, 2),
+    inputValue = _useState4[0],
+    setInputValue = _useState4[1];
+  var _useState5 = useState(defaultDate),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedDate = _useState6[0],
+    setSelectedDate = _useState6[1];
+  var _useState7 = useState(defaultDate),
+    _useState8 = _slicedToArray(_useState7, 2),
+    calendarMonth = _useState8[0],
+    setCalendarMonth = _useState8[1];
+  var parsedDate = parseDateString(inputValue);
+  var isInputValid = !inputValue || !!parsedDate;
+  var handleInputChange = function handleInputChange(e) {
+    var value = e.target.value;
+    setInputValue(value);
+    var parsed = parseDateString(value);
+    if (parsed) {
+      setSelectedDate(parsed);
+      setCalendarMonth(parsed);
+    }
+  };
+  var handleCalendarSelect = function handleCalendarSelect(date) {
+    if (date) {
+      setSelectedDate(date);
+      setInputValue(toHtmlDateString(date));
+      setCalendarMonth(date);
+      setOpen(false);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "relative flex gap-2"
+  }, /*#__PURE__*/React.createElement(Input, _extends({
+    id: "date",
+    type: "text",
+    inputMode: "numeric",
+    autoComplete: "off",
+    pattern: "\\d{2}/\\d{2}/\\d{4}",
+    placeholder: "dd/mm/yyyy",
+    value: inputValue,
+    disabled: disabled,
+    className: cn.apply(void 0, _toConsumableArray(getBaseSelectClassNames()).concat(_toConsumableArray(getBaseInputClasses()), ['hover:border-secondary-foreground/50', selectTriggerVariants({
+      size: size
+    }), readOnly && selectReadOnlyClassNames, !isInputValid && 'border-destructive'])),
+    onChange: handleInputChange,
+    onKeyDown: function onKeyDown(e) {
+      var allowed = '0123456789/';
+      if (e.key.length === 1 && !allowed.includes(e.key)) {
+        e.preventDefault();
+      }
+    }
+  }, rest)), /*#__PURE__*/React.createElement(Popover, {
+    open: open,
+    onOpenChange: setOpen
+  }, /*#__PURE__*/React.createElement(PopoverTrigger, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    id: "date-picker",
+    size: buttonSizeInTriggerOptions[size],
+    variant: "ghost-secondary",
+    className: "absolute top-1/2 right-2 -translate-y-1/2",
+    onClick: function onClick() {
+      return setOpen(function (prev) {
+        return !prev;
+      });
+    },
+    disabled: readOnly || disabled
+  }, /*#__PURE__*/React.createElement(CalendarIcon, {
+    className: iconSizeInTriggerOptions[size]
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "sr-only"
+  }, "Select date"))), /*#__PURE__*/React.createElement(PopoverContent, {
+    className: "w-auto overflow-hidden p-0",
+    align: "end",
+    alignOffset: -8,
+    sideOffset: 10
+  }, /*#__PURE__*/React.createElement(Calendar, {
+    mode: "single",
+    selected: selectedDate,
+    captionLayout: "dropdown",
+    month: calendarMonth,
+    onMonthChange: setCalendarMonth,
+    onSelect: handleCalendarSelect,
+    disabled: [minDate && {
+      before: minDate
+    }, maxDate && {
+      after: maxDate
+    }].filter(Boolean)
+  })))), !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'));
+}
+export { DatePicker };

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

@@ -0,0 +1,10 @@
+export declare const iconSizeInTriggerOptions: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+export declare const buttonSizeInTriggerOptions: {
+    sm: string;
+    md: string;
+    lg: string;
+};

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

@@ -0,0 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+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');

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

@@ -0,0 +1,10 @@
+import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
+export type DatePickerProps = {
+    minDate?: Date;
+    maxDate?: Date;
+    defaultDate?: Date;
+    readOnly?: boolean;
+    size?: FormSizeType;
+    invalidDateText?: string;
+    disabled?: boolean;
+};

package/date-picker/date-picker.types.js

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

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

@@ -0,0 +1,2 @@
+export declare function toHtmlDateString(date: Date): string;
+export declare function parseDateString(value: string): Date | undefined;

package/date-picker/date-picker.utils.js

@@ -0,0 +1,23 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+export function toHtmlDateString(date) {
+  var day = String(date.getDate()).padStart(2, '0');
+  var month = String(date.getMonth() + 1).padStart(2, '0');
+  var year = date.getFullYear();
+  return "".concat(day, "/").concat(month, "/").concat(year);
+}
+export function parseDateString(value) {
+  if (!/^\d{2}\/\d{2}\/\d{4}$/.test(value)) return undefined;
+  var _value$split$map = value.split('/').map(Number),
+    _value$split$map2 = _slicedToArray(_value$split$map, 3),
+    day = _value$split$map2[0],
+    month = _value$split$map2[1],
+    year = _value$split$map2[2];
+  if (day < 1 || day > 31 || month < 1 || month > 12) return undefined;
+  var date = new Date(year, month - 1, day);
+
+  // Check if the date matches the input (avoids 32/01 → 01 Feb bug)
+  if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
+    return undefined;
+  }
+  return date;
+}

package/date-picker/index.d.ts

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

package/date-picker/index.js

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

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

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