@scaleflex/ui-tw 0.0.35 → 0.0.37

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.constants.d.ts

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

package/checkbox/checkbox.constants.js

@@ -1,4 +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-7');
-export var checkboxIndicatorSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'size-3.5'), FormSize.Md, 'size-4.5'), FormSize.Lg, 'size-6.5');
+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/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/dialog/dialog.component.js

@@ -62,7 +62,7 @@ function DialogWideContent(_ref6) {
     "data-slot": "dialog-portal"
   }, /*#__PURE__*/React.createElement(DialogOverlay, null), /*#__PURE__*/React.createElement(DialogPrimitive.Content, _extends({
     "data-slot": "dialog-content",
-    className: cn('bg-background border-border fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border shadow-lg duration-200 lg:max-w-[62rem] xl:max-w-5xl', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', className)
+    className: cn('bg-background text-foreground border-border fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border shadow-lg duration-200 lg:max-w-[62rem] xl:max-w-5xl', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', className)
   }, props), children, /*#__PURE__*/React.createElement(DialogPrimitive.Close, {
     "data-state": "open",
     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)
@@ -81,7 +81,7 @@ function DialogFormContent(_ref7) {
     "data-slot": "dialog-portal"
   }, /*#__PURE__*/React.createElement(DialogOverlay, null), /*#__PURE__*/React.createElement(DialogPrimitive.Content, _extends({
     "data-slot": "dialog-content",
-    className: cn('bg-background border-border fixed top-[50%] left-[50%] z-50 grid w-full max-w-md translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', className)
+    className: cn('bg-background text-foreground border-border fixed top-[50%] left-[50%] z-50 grid w-full max-w-md translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', className)
   }, props), children, /*#__PURE__*/React.createElement(DialogPrimitive.Close, {
     "data-state": "open",
     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)
@@ -97,7 +97,7 @@ function DialogWideHeader(_ref8) {
     props = _objectWithoutProperties(_ref8, _excluded4);
   return /*#__PURE__*/React.createElement("div", _extends({
     "data-slot": "dialog-header",
-    className: cn('border-border flex h-16 items-center justify-center border-b', className)
+    className: cn('border-border text-foreground flex h-16 items-center justify-center border-b', className)
   }, props));
 }
 function DialogFormHeader(_ref9) {
@@ -105,7 +105,7 @@ function DialogFormHeader(_ref9) {
     props = _objectWithoutProperties(_ref9, _excluded5);
   return /*#__PURE__*/React.createElement("div", _extends({
     "data-slot": "dialog-header",
-    className: cn('flex flex-col items-center justify-center p-6 pt-8 text-center', className)
+    className: cn('text-foreground flex flex-col items-center justify-center p-6 pt-8 text-center', className)
   }, props));
 }
 function DialogWideBody(_ref10) {
@@ -137,7 +137,7 @@ function DialogFormTitle(_ref13) {
     props = _objectWithoutProperties(_ref13, _excluded9);
   return /*#__PURE__*/React.createElement(DialogPrimitive.Title, _extends({
     "data-slot": "dialog-title",
-    className: cn('text-lg leading-7 font-medium', className)
+    className: cn('text-foreground text-lg leading-7 font-medium', className)
   }, props));
 }
 function DialogFormDescription(_ref14) {

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

@@ -30,11 +30,13 @@ function FormCheckboxField(_ref) {
     render: function render(_ref2) {
       var _checkboxProps$id;
       var field = _ref2.field;
-      return /*#__PURE__*/React.createElement(FormItem, null, /*#__PURE__*/React.createElement("div", {
-        className: cn('group flex items-center', formCheckboxFieldVariants({
-          size: size
-        })),
+      return /*#__PURE__*/React.createElement(FormItem, {
+        className: "group",
         "data-disabled": disabled
+      }, /*#__PURE__*/React.createElement("div", {
+        className: cn('flex items-center', formCheckboxFieldVariants({
+          size: size
+        }))
       }, /*#__PURE__*/React.createElement(FormControl, null, /*#__PURE__*/React.createElement(Checkbox, _extends({
         id: field.name,
         checked: field.value,

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

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

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

@@ -0,0 +1,82 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { Checkbox } from '@scaleflex/ui-tw/checkbox';
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@scaleflex/ui-tw/form';
+import { labelCheckboxAndRadioSizeOptions } from '@scaleflex/ui-tw/form/form.constants';
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+import { cn } from '@scaleflex/ui-tw/utils/cn';
+import { cva } from 'class-variance-authority';
+import React from 'react';
+var labelCheckboxAndRadioVariants = cva('', {
+  variants: {
+    size: labelCheckboxAndRadioSizeOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md
+  }
+});
+function FormCheckboxGroupField(_ref) {
+  var control = _ref.control,
+    name = _ref.name,
+    label = _ref.label,
+    description = _ref.description,
+    options = _ref.options,
+    className = _ref.className,
+    tooltip = _ref.tooltip,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? FormSize.Md : _ref$size,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$horizontal = _ref.horizontal,
+    horizontal = _ref$horizontal === void 0 ? false : _ref$horizontal,
+    horizontalLabelWidth = _ref.horizontalLabelWidth;
+  return /*#__PURE__*/React.createElement(FormField, {
+    control: control,
+    name: name,
+    disabled: disabled,
+    render: function render(_ref2) {
+      var field = _ref2.field;
+      return /*#__PURE__*/React.createElement(FormItem, {
+        className: cn('group gap-6', className),
+        "data-disabled": disabled,
+        horizontal: horizontal,
+        firstColumnWidth: horizontalLabelWidth
+      }, (label || description) && /*#__PURE__*/React.createElement("div", null, label && /*#__PURE__*/React.createElement(FormLabel, {
+        className: cn('cursor-default', labelCheckboxAndRadioVariants({
+          size: size
+        })),
+        size: size,
+        tooltip: tooltip
+      }, label), description && !horizontal && /*#__PURE__*/React.createElement(FormDescription, {
+        size: size
+      }, description)), /*#__PURE__*/React.createElement("div", {
+        className: "flex flex-col gap-3"
+      }, description && horizontal && /*#__PURE__*/React.createElement(FormDescription, {
+        className: labelCheckboxAndRadioVariants({
+          size: size
+        }),
+        size: size
+      }, description), options.map(function (option) {
+        var _field$value;
+        return /*#__PURE__*/React.createElement(FormItem, {
+          key: option.id,
+          className: "flex flex-row items-center gap-2"
+        }, /*#__PURE__*/React.createElement(FormControl, null, /*#__PURE__*/React.createElement(Checkbox, {
+          size: size,
+          disabled: disabled || option.disabled,
+          checked: (_field$value = field.value) === null || _field$value === void 0 ? void 0 : _field$value.includes(option.id),
+          onCheckedChange: function onCheckedChange(checked) {
+            var _field$value2;
+            var updated = checked ? [].concat(_toConsumableArray(field.value), [option.id]) : (_field$value2 = field.value) === null || _field$value2 === void 0 ? void 0 : _field$value2.filter(function (v) {
+              return v !== option.id;
+            });
+            field.onChange(updated);
+          }
+        })), /*#__PURE__*/React.createElement(FormLabel, {
+          size: size,
+          className: "text-sm font-normal"
+        }, option.label));
+      })), /*#__PURE__*/React.createElement(FormMessage, null));
+    }
+  });
+}
+export { FormCheckboxGroupField };

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

@@ -1,5 +1,5 @@
 import type { FormComboboxFieldProps } from '@scaleflex/ui-tw/form/form.types';
 import React from 'react';
 import { FieldValues, Path } from 'react-hook-form';
-declare function FormComboboxField<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ variant, comboboxProps, ...rest }: FormComboboxFieldProps<TFieldValues, TName>): React.JSX.Element;
+declare function FormComboboxField<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ variant, showGroupSeparator, comboboxProps, ...rest }: FormComboboxFieldProps<TFieldValues, TName>): React.JSX.Element;
 export { FormComboboxField };

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["variant", "comboboxProps"];
+var _excluded = ["variant", "showGroupSeparator", "comboboxProps"];
 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 { ComboboxMultiInline, ComboboxMultiTag, ComboboxSingle } from '@scaleflex/ui-tw/combobox';
@@ -11,6 +11,8 @@ import React from 'react';
 function FormComboboxField(_ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'single' : _ref$variant,
+    _ref$showGroupSeparat = _ref.showGroupSeparator,
+    showGroupSeparator = _ref$showGroupSeparat === void 0 ? false : _ref$showGroupSeparat,
     _ref$comboboxProps = _ref.comboboxProps,
     comboboxProps = _ref$comboboxProps === void 0 ? {} : _ref$comboboxProps,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -25,6 +27,7 @@ function FormComboboxField(_ref) {
       placeholder: comboboxProps.placeholder,
       readOnly: readOnly,
       disabled: disabled,
+      showGroupSeparator: showGroupSeparator,
       size: args === null || args === void 0 ? void 0 : args.size,
       formItemId: formItemId,
       value: field.value,

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

@@ -22,6 +22,7 @@ function FormFieldGroup(_ref) {
   return /*#__PURE__*/React.createElement(FormField, {
     control: control,
     name: name,
+    disabled: disabled,
     render: function render(_ref2) {
       var field = _ref2.field;
       return /*#__PURE__*/React.createElement(FormItem, {

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

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

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

@@ -0,0 +1,80 @@
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@scaleflex/ui-tw/form';
+import { labelCheckboxAndRadioSizeOptions } from '@scaleflex/ui-tw/form/form.constants';
+import { RadioGroup, RadioGroupItem } from '@scaleflex/ui-tw/radio-group';
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+import { cn } from '@scaleflex/ui-tw/utils/cn';
+import { cva } from 'class-variance-authority';
+import React from 'react';
+var labelCheckboxAndRadioVariants = cva('', {
+  variants: {
+    size: labelCheckboxAndRadioSizeOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md
+  }
+});
+function FormRadioGroupField(_ref) {
+  var control = _ref.control,
+    name = _ref.name,
+    label = _ref.label,
+    description = _ref.description,
+    options = _ref.options,
+    className = _ref.className,
+    tooltip = _ref.tooltip,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? FormSize.Md : _ref$size,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$horizontal = _ref.horizontal,
+    horizontal = _ref$horizontal === void 0 ? false : _ref$horizontal,
+    horizontalLabelWidth = _ref.horizontalLabelWidth;
+  return /*#__PURE__*/React.createElement(FormField, {
+    control: control,
+    name: name,
+    disabled: disabled,
+    render: function render(_ref2) {
+      var field = _ref2.field;
+      return /*#__PURE__*/React.createElement(FormItem, {
+        className: cn('group gap-6', className),
+        "data-disabled": disabled,
+        horizontal: horizontal,
+        firstColumnWidth: horizontalLabelWidth
+      }, (label || description) && /*#__PURE__*/React.createElement("div", null, label && /*#__PURE__*/React.createElement(FormLabel, {
+        className: cn('cursor-default', labelCheckboxAndRadioVariants({
+          size: size
+        })),
+        size: size,
+        tooltip: tooltip
+      }, label), description && !horizontal && /*#__PURE__*/React.createElement(FormDescription, {
+        size: size
+      }, description)), /*#__PURE__*/React.createElement(RadioGroup, {
+        value: field.value,
+        onValueChange: field.onChange,
+        disabled: disabled,
+        className: "flex flex-col gap-3"
+      }, description && horizontal && /*#__PURE__*/React.createElement(FormDescription, {
+        className: labelCheckboxAndRadioVariants({
+          size: size
+        }),
+        size: size
+      }, description), options.map(function (option) {
+        return /*#__PURE__*/React.createElement("div", {
+          key: option.id,
+          className: "group flex items-center space-x-2",
+          "data-disabled": disabled || option.disabled
+        }, /*#__PURE__*/React.createElement(FormControl, null, /*#__PURE__*/React.createElement(RadioGroupItem, {
+          id: option.id,
+          value: option.id,
+          size: size,
+          disabled: disabled || option.disabled
+        })), /*#__PURE__*/React.createElement(FormLabel, {
+          htmlFor: option.id,
+          size: size,
+          className: "text-sm font-normal",
+          tooltip: option.tooltip
+        }, option.label));
+      })), /*#__PURE__*/React.createElement(FormMessage, null));
+    }
+  });
+}
+export { FormRadioGroupField };

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

@@ -10,7 +10,7 @@ function FormTextareaField(_ref) {
   return /*#__PURE__*/React.createElement(FormFieldGroup, rest, function (field, args) {
     return /*#__PURE__*/React.createElement(Textarea, _extends({
       placeholder: textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.placeholder
-    }, args, textareaProps, field));
+    }, field, args, textareaProps));
   });
 }
 export { FormTextareaField };

package/form/form.constants.d.ts

@@ -22,3 +22,8 @@ export declare const formGroupFieldSizeOptions: {
     readonly md: "space-x-2.5";
     readonly lg: "space-x-3";
 };
+export declare const labelCheckboxAndRadioSizeOptions: {
+    readonly sm: "text-sm";
+    readonly md: "text-base";
+    readonly lg: "text-lg";
+};

package/form/form.constants.js

@@ -11,4 +11,5 @@ export var SwitchLayout = {
   Justified: 'justified'
 };
 export var formMessageSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormMessageSize.Sm, 'text-xs'), FormMessageSize.Md, 'text-xs'), FormMessageSize.Lg, 'text-sm');
-export var formGroupFieldSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormMessageSize.Sm, 'space-x-2'), FormMessageSize.Md, 'space-x-2.5'), FormMessageSize.Lg, 'space-x-3');
+export var formGroupFieldSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormMessageSize.Sm, 'space-x-2'), FormMessageSize.Md, 'space-x-2.5'), FormMessageSize.Lg, 'space-x-3');
+export var labelCheckboxAndRadioSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'text-sm'), FormSize.Md, 'text-base'), FormSize.Lg, 'text-lg');

package/form/form.types.d.ts

@@ -1,13 +1,14 @@
 import { CheckboxProps } from '@scaleflex/ui-tw/checkbox/checkbox.types';
 import type { ComboboxMultiInlineProps, ComboboxMultiTagProps, ComboboxSingleProps } from '@scaleflex/ui-tw/combobox/combobox.types';
 import type { InputProps } from '@scaleflex/ui-tw/input';
+import type { RadioGroupItemProps } from '@scaleflex/ui-tw/radio-group/radio-group.types';
 import type { SelectProps } from '@scaleflex/ui-tw/select/select.types';
 import type { SwitchProps } from '@scaleflex/ui-tw/switch/switch.types';
 import type { TextareaProps } from '@scaleflex/ui-tw/textarea';
 import type { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
 import type { Values } from '@scaleflex/ui-tw/types/values';
 import { ReactElement, ReactNode } from 'react';
-import { type ControllerRenderProps, type FieldPath, FieldValues, Path, UseControllerProps } from 'react-hook-form';
+import { Control, type ControllerRenderProps, type FieldPath, type FieldValues, type Path, type UseControllerProps } from 'react-hook-form';
 import { FormMessageSize, SwitchLayout } from './form.constants';
 export type FormMessageSizeType = Values<typeof FormMessageSize>;
 export type SwitchLayoutType = Values<typeof SwitchLayout>;
@@ -86,4 +87,33 @@ export interface FormSelectInnerProps<TFieldValues extends FieldValues, TName ex
     disabled?: boolean;
     className?: string;
 }
+export type CheckboxOption = {
+    label: string;
+    id: CheckboxProps['id'];
+    disabled?: CheckboxProps['disabled'];
+};
+export type RadioOption = {
+    label: string;
+    id: string;
+    disabled?: RadioGroupItemProps['disabled'];
+    tooltip?: string;
+};
+interface BaseFormGroupFieldProps<TFieldValues extends FieldValues> {
+    control: Control<TFieldValues>;
+    name: Path<TFieldValues>;
+    label?: ReactElement | string;
+    tooltip?: ReactElement | string;
+    description?: ReactElement | string;
+    className?: string;
+    disabled?: boolean;
+    size?: FormSizeType;
+    horizontal?: boolean;
+    horizontalLabelWidth?: string;
+}
+export interface FormCheckboxGroupFieldProps<TFieldValues extends FieldValues> extends BaseFormGroupFieldProps<TFieldValues> {
+    options: CheckboxOption[];
+}
+export interface FormRadioGroupFieldProps<TFieldValues extends FieldValues> extends BaseFormGroupFieldProps<TFieldValues> {
+    options: RadioOption[];
+}
 export {};

package/form/index.d.ts

@@ -9,3 +9,5 @@ export { FormSwitchField } from './components/form-switch-field.component';
 export { FormSelectField } from './components/form-select-field.component';
 export { FormComboboxField } from './components/form-combobox-field.component';
 export { FormCheckboxField } from './components/form-checkbox-field.component';
+export { FormCheckboxGroupField } from './components/form-checkbox-group-field.component';
+export { FormRadioGroupField } from './components/form-radio-group-field.component';

package/form/index.js

@@ -7,4 +7,6 @@ export { FormTextareaField } from './components/form-textarea-field.component';
 export { FormSwitchField } from './components/form-switch-field.component';
 export { FormSelectField } from './components/form-select-field.component';
 export { FormComboboxField } from './components/form-combobox-field.component';
-export { FormCheckboxField } from './components/form-checkbox-field.component';
+export { FormCheckboxField } from './components/form-checkbox-field.component';
+export { FormCheckboxGroupField } from './components/form-checkbox-group-field.component';
+export { FormRadioGroupField } from './components/form-radio-group-field.component';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -16,18 +16,21 @@
     "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-label": "^2.1.6",
     "@radix-ui/react-popover": "^1.0.2",
+    "@radix-ui/react-radio-group": "^1.3.7",
     "@radix-ui/react-select": "^2.2.4",
     "@radix-ui/react-separator": "^1.1.6",
     "@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.35",
+    "@scaleflex/icons-tw": "^0.0.37",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",
     "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
     "lodash.merge": "^4.6.2",
     "lucide-react": "^0.487.0",
     "prop-types": "^15.7.2",
+    "react-day-picker": "^9.7.0",
     "sonner": "^2.0.3",
     "tailwind-scrollbar": "^4.0.2",
     "tw-animate-css": "^1.2.5"

package/radio-group/index.d.ts

@@ -0,0 +1 @@
+export { RadioGroup, RadioGroupItem } from './radio-group.component';

package/radio-group/index.js

@@ -0,0 +1 @@
+export { RadioGroup, RadioGroupItem } from './radio-group.component';

package/radio-group/radio-group.component.d.ts

@@ -0,0 +1,5 @@
+import { RadioGroupItemProps, RadioGroupProps } from '@scaleflex/ui-tw/radio-group/radio-group.types';
+import React from 'react';
+declare function RadioGroup({ className, ...props }: RadioGroupProps): React.JSX.Element;
+declare function RadioGroupItem({ className, size, ...props }: RadioGroupItemProps): React.JSX.Element;
+export { RadioGroup, RadioGroupItem };

package/radio-group/radio-group.component.js

@@ -0,0 +1,55 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className"],
+  _excluded2 = ["className", "size"];
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { radioGroupItemIndicatorSizeOptions, radioGroupItemSizeOptions } from '@scaleflex/ui-tw/radio-group/radio-group.constants';
+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 { CircleIcon } from 'lucide-react';
+import React from 'react';
+var radioGroupItemVariants = cva('', {
+  variants: {
+    size: radioGroupItemSizeOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md
+  }
+});
+var radioGroupItemIndicatorVariants = cva('', {
+  variants: {
+    size: radioGroupItemIndicatorSizeOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md
+  }
+});
+function RadioGroup(_ref) {
+  var className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(RadioGroupPrimitive.Root, _extends({
+    "data-slot": "radio-group",
+    className: cn('grid gap-3', className)
+  }, props));
+}
+function RadioGroupItem(_ref2) {
+  var className = _ref2.className,
+    size = _ref2.size,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(RadioGroupPrimitive.Item, _extends({
+    "data-slot": "radio-group-item",
+    className: cn('border-input text-primary aspect-square shrink-0 cursor-pointer rounded-full border shadow-xs transition-[color,box-shadow]', 'hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50', ariaInvalidClassNames, focusRingClassNames, radioGroupItemVariants({
+      size: size
+    }), className)
+  }, props), /*#__PURE__*/React.createElement(RadioGroupPrimitive.Indicator, {
+    "data-slot": "radio-group-indicator",
+    className: "relative flex items-center justify-center"
+  }, /*#__PURE__*/React.createElement(CircleIcon, {
+    className: cn('fill-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2', radioGroupItemIndicatorVariants({
+      size: size
+    }))
+  })));
+}
+export { RadioGroup, RadioGroupItem };

package/radio-group/radio-group.constants.d.ts

@@ -0,0 +1,10 @@
+export declare const radioGroupItemSizeOptions: {
+    readonly sm: "size-4";
+    readonly md: "size-5";
+    readonly lg: "size-6";
+};
+export declare const radioGroupItemIndicatorSizeOptions: {
+    readonly sm: "size-2";
+    readonly md: "size-3";
+    readonly lg: "size-4";
+};

package/radio-group/radio-group.constants.js

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

package/radio-group/radio-group.types.d.ts

@@ -0,0 +1,8 @@
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
+import { ComponentProps } from 'react';
+export interface RadioGroupProps extends ComponentProps<typeof RadioGroupPrimitive.Root> {
+}
+export interface RadioGroupItemProps extends ComponentProps<typeof RadioGroupPrimitive.Item> {
+    size?: FormSizeType;
+}

package/radio-group/radio-group.types.js

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