@raystack/apsara 0.56.7 → 1.0.0-rc.1

package/dist/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../components/button/button.tsx"],"sourcesContent":["import { type VariantProps, cva } from 'class-variance-authority';\nimport { Slot } from 'radix-ui';\nimport {\n  ButtonHTMLAttributes,\n  PropsWithChildren,\n  ReactNode,\n  forwardRef\n} from 'react';\n\nimport { Spinner } from '../spinner';\nimport styles from './button.module.css';\n\nconst button = cva(styles['button'], {\n  variants: {\n    variant: {\n      solid: styles['button-solid'],\n      outline: styles['button-outline'],\n      ghost: styles['button-ghost'],\n      text: styles['button-text']\n    },\n    size: {\n      small: styles['button-small'],\n      normal: styles['button-normal']\n    },\n    disabled: {\n      true: styles['button-disabled']\n    },\n    loading: {\n      true: styles['button-loading']\n    },\n    color: {\n      accent: styles['button-color-accent'],\n      danger: styles['button-color-danger'],\n      neutral: styles['button-color-neutral'],\n      success: styles['button-color-success']\n    }\n  },\n  compoundVariants: [\n    {\n      variant: 'solid',\n      color: 'accent',\n      className: styles['button-solid-accent']\n    },\n    {\n      variant: 'solid',\n      color: 'danger',\n      className: styles['button-solid-danger']\n    },\n    {\n      variant: 'solid',\n      color: 'neutral',\n      className: styles['button-solid-neutral']\n    },\n    {\n      variant: 'solid',\n      color: 'success',\n      className: styles['button-solid-success']\n    },\n    {\n      variant: 'outline',\n      color: 'accent',\n      className: styles['button-outline-accent']\n    },\n    {\n      variant: 'outline',\n      color: 'danger',\n      className: styles['button-outline-danger']\n    },\n    {\n      variant: 'outline',\n      color: 'neutral',\n      className: styles['button-outline-neutral']\n    },\n    {\n      variant: 'outline',\n      color: 'success',\n      className: styles['button-outline-success']\n    },\n    {\n      variant: 'ghost',\n      color: 'accent',\n      className: styles['button-ghost-accent']\n    },\n    {\n      variant: 'ghost',\n      color: 'danger',\n      className: styles['button-ghost-danger']\n    },\n    {\n      variant: 'ghost',\n      color: 'neutral',\n      className: styles['button-ghost-neutral']\n    },\n    {\n      variant: 'ghost',\n      color: 'success',\n      className: styles['button-ghost-success']\n    },\n    {\n      variant: 'text',\n      color: 'accent',\n      className: styles['button-text-accent']\n    },\n    {\n      variant: 'text',\n      color: 'danger',\n      className: styles['button-text-danger']\n    },\n    {\n      variant: 'text',\n      color: 'neutral',\n      className: styles['button-text-neutral']\n    },\n    {\n      variant: 'text',\n      color: 'success',\n      className: styles['button-text-success']\n    }\n  ],\n  defaultVariants: {\n    variant: 'solid',\n    size: 'normal',\n    color: 'accent'\n  }\n});\n\nconst getLoaderOnlyClass = (size: 'small' | 'normal' | null) =>\n  size === 'small'\n    ? styles['loader-only-button-small']\n    : styles['loader-only-button-normal'];\n\ntype ButtonProps = PropsWithChildren<VariantProps<typeof button>> &\n  ButtonHTMLAttributes<HTMLButtonElement> & {\n    asChild?: boolean;\n    loading?: boolean;\n    loaderText?: ReactNode;\n    leadingIcon?: ReactNode;\n    trailingIcon?: ReactNode;\n    maxWidth?: string | number;\n    width?: string | number;\n    style?: React.CSSProperties;\n  };\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant = 'solid',\n      color = 'accent',\n      size = 'normal',\n      asChild = false,\n      disabled,\n      loading,\n      loaderText,\n      leadingIcon,\n      trailingIcon,\n      maxWidth,\n      width,\n      style = {},\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const Comp = asChild ? Slot.Root : 'button';\n    const isLoaderOnly = loading && !loaderText;\n    const widthStyle = { maxWidth, width };\n    const buttonStyle = { ...widthStyle, ...style };\n\n    return (\n      <Comp\n        className={`${button({ variant, size, color, disabled, loading, className })} ${isLoaderOnly ? getLoaderOnlyClass(size) : ''}`}\n        ref={ref}\n        disabled={disabled}\n        style={buttonStyle}\n        {...props}\n      >\n        {loading ? (\n          <>\n            <Spinner size={1} color='default' />\n            {loaderText && (\n              <span className={styles['loader-text']}>{loaderText}</span>\n            )}\n          </>\n        ) : (\n          <>\n            {leadingIcon && (\n              <span className={`${styles['icon']} ${styles['icon-leading']}`}>\n                {leadingIcon}\n              </span>\n            )}\n            {children}\n            {trailingIcon && (\n              <span className={`${styles['icon']} ${styles['icon-trailing']}`}>\n                {trailingIcon}\n              </span>\n            )}\n          </>\n        )}\n      </Comp>\n    );\n  }\n);\nButton.displayName = 'Button';\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../../components/button/button.tsx"],"sourcesContent":["import { Button as ButtonPrimitive } from '@base-ui/react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ReactNode } from 'react';\n\nimport { Spinner } from '../spinner';\nimport styles from './button.module.css';\n\nconst button = cva(styles['button'], {\n  variants: {\n    variant: {\n      solid: styles['button-solid'],\n      outline: styles['button-outline'],\n      ghost: styles['button-ghost'],\n      text: styles['button-text']\n    },\n    size: {\n      small: styles['button-small'],\n      normal: styles['button-normal']\n    },\n    disabled: {\n      true: styles['button-disabled']\n    },\n    loading: {\n      true: styles['button-loading']\n    },\n    color: {\n      accent: styles['button-color-accent'],\n      danger: styles['button-color-danger'],\n      neutral: styles['button-color-neutral'],\n      success: styles['button-color-success']\n    }\n  },\n  compoundVariants: [\n    {\n      variant: 'solid',\n      color: 'accent',\n      className: styles['button-solid-accent']\n    },\n    {\n      variant: 'solid',\n      color: 'danger',\n      className: styles['button-solid-danger']\n    },\n    {\n      variant: 'solid',\n      color: 'neutral',\n      className: styles['button-solid-neutral']\n    },\n    {\n      variant: 'solid',\n      color: 'success',\n      className: styles['button-solid-success']\n    },\n    {\n      variant: 'outline',\n      color: 'accent',\n      className: styles['button-outline-accent']\n    },\n    {\n      variant: 'outline',\n      color: 'danger',\n      className: styles['button-outline-danger']\n    },\n    {\n      variant: 'outline',\n      color: 'neutral',\n      className: styles['button-outline-neutral']\n    },\n    {\n      variant: 'outline',\n      color: 'success',\n      className: styles['button-outline-success']\n    },\n    {\n      variant: 'ghost',\n      color: 'accent',\n      className: styles['button-ghost-accent']\n    },\n    {\n      variant: 'ghost',\n      color: 'danger',\n      className: styles['button-ghost-danger']\n    },\n    {\n      variant: 'ghost',\n      color: 'neutral',\n      className: styles['button-ghost-neutral']\n    },\n    {\n      variant: 'ghost',\n      color: 'success',\n      className: styles['button-ghost-success']\n    },\n    {\n      variant: 'text',\n      color: 'accent',\n      className: styles['button-text-accent']\n    },\n    {\n      variant: 'text',\n      color: 'danger',\n      className: styles['button-text-danger']\n    },\n    {\n      variant: 'text',\n      color: 'neutral',\n      className: styles['button-text-neutral']\n    },\n    {\n      variant: 'text',\n      color: 'success',\n      className: styles['button-text-success']\n    }\n  ],\n  defaultVariants: {\n    variant: 'solid',\n    size: 'normal',\n    color: 'accent'\n  }\n});\n\nconst getLoaderOnlyClass = (size: 'small' | 'normal' | null) =>\n  size === 'small'\n    ? styles['loader-only-button-small']\n    : styles['loader-only-button-normal'];\n\ntype ButtonProps = VariantProps<typeof button> &\n  ButtonPrimitive.Props & {\n    loading?: boolean;\n    loaderText?: ReactNode;\n    leadingIcon?: ReactNode;\n    trailingIcon?: ReactNode;\n    maxWidth?: string | number;\n    width?: string | number;\n    style?: React.CSSProperties;\n  };\n\nexport const Button = ({\n  className,\n  variant = 'solid',\n  color = 'accent',\n  size = 'normal',\n  disabled,\n  loading,\n  loaderText,\n  leadingIcon,\n  trailingIcon,\n  maxWidth,\n  width,\n  style = {},\n  children,\n  render,\n  ...props\n}: ButtonProps) => {\n  const isLoaderOnly = loading && !loaderText;\n  const widthStyle = { maxWidth, width };\n  const buttonStyle = { ...widthStyle, ...style };\n\n  return (\n    <ButtonPrimitive\n      className={`${button({ variant, size, color, disabled, loading, className })} ${isLoaderOnly ? getLoaderOnlyClass(size) : ''}`}\n      disabled={disabled}\n      style={buttonStyle}\n      render={render}\n      nativeButton={!render}\n      focusableWhenDisabled={loading}\n      {...props}\n    >\n      {loading ? (\n        <>\n          <Spinner size={1} color='default' />\n          {loaderText && (\n            <span className={styles['loader-text']}>{loaderText}</span>\n          )}\n        </>\n      ) : (\n        <>\n          {leadingIcon && (\n            <span className={`${styles['icon']} ${styles['icon-leading']}`}>\n              {leadingIcon}\n            </span>\n          )}\n          {children}\n          {trailingIcon && (\n            <span className={`${styles['icon']} ${styles['icon-trailing']}`}>\n              {trailingIcon}\n            </span>\n          )}\n        </>\n      )}\n    </ButtonPrimitive>\n  );\n};\nButton.displayName = 'Button';\n"],"names":["_jsx","ButtonPrimitive","_jsxs"],"mappings":"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"}

package/dist/components/calendar/calendar.cjs

@@ -6,7 +6,6 @@ var reactIcons = require('@radix-ui/react-icons');
 var classVarianceAuthority = require('class-variance-authority');
 var React = require('react');
 var reactDayPicker = require('react-day-picker');
-var flex = require('../flex/flex.cjs');
 var iconButton = require('../icon-button/icon-button.cjs');
 var select = require('../select/select.cjs');
 var skeleton = require('../skeleton/skeleton.cjs');
@@ -27,7 +26,7 @@ function DropDown({ options = [], value, onChange, onDropdownOpen, disabled }) {
     }
     return (jsxRuntime.jsxs(select.Select, { value: value?.toString(), onValueChange: handleChange, open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(select.Select.Trigger, { className: calendar_module.default.dropdownTrigger, iconProps: {
                     className: calendar_module.default.dropdownIcon
-                }, size: 'small', variant: 'text', disabled: disabled, children: jsxRuntime.jsx(select.Select.Value, {}) }), jsxRuntime.jsxs(select.Select.Content, { className: calendar_module.default.dropdownContent, children: [jsxRuntime.jsx(select.Select.ScrollUpButton, { asChild: true, children: jsxRuntime.jsx(flex.Flex, { justify: 'center', children: jsxRuntime.jsx(reactIcons.ChevronUpIcon, {}) }) }), jsxRuntime.jsx(select.Select.Viewport, { children: options.map(opt => (jsxRuntime.jsx(select.Select.Item, { value: opt.value.toString(), disabled: opt.disabled, children: opt.label }, opt.value))) }), jsxRuntime.jsx(select.Select.ScrollDownButton, { asChild: true, children: jsxRuntime.jsx(flex.Flex, { justify: 'center', children: jsxRuntime.jsx(reactIcons.ChevronDownIcon, {}) }) })] })] }));
+                }, size: 'small', variant: 'text', disabled: disabled, children: jsxRuntime.jsx(select.Select.Value, {}) }), jsxRuntime.jsx(select.Select.Content, { className: calendar_module.default.dropdownContent, children: options.map(opt => (jsxRuntime.jsx(select.Select.Item, { value: opt.value.toString(), disabled: opt.disabled, children: opt.label }, opt.value))) })] }));
 }
 const Calendar = function ({ className, classNames, showOutsideDays = true, onDropdownOpen, showTooltip = false, tooltipMessages = {}, dateInfo = {}, loadingData = false, timeZone, ...props }) {
     return (jsxRuntime.jsx(reactDayPicker.DayPicker, { showOutsideDays: showOutsideDays, timeZone: timeZone, components: {
@@ -72,6 +71,7 @@ const Calendar = function ({ className, classNames, showOutsideDays = true, onDr
             ...classNames
         }, className: root({ className }), mode: 'single', ...props }));
 };
+Calendar.displayName = 'Calendar';
 
 exports.Calendar = Calendar;
 //# sourceMappingURL=calendar.cjs.map

package/dist/components/calendar/calendar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.cjs","sources":["../../../components/calendar/calendar.tsx"],"sourcesContent":["'use client';\n\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon\n} from '@radix-ui/react-icons';\nimport { cva, cx } from 'class-variance-authority';\nimport { ChangeEvent, ReactNode, useEffect, useState } from 'react';\nimport {\n  DayPicker,\n  DayPickerProps,\n  DropdownProps,\n  dateLib\n} from 'react-day-picker';\n\nimport { Flex } from '../flex/flex';\nimport { IconButton } from '../icon-button';\nimport { Select } from '../select';\nimport { Skeleton } from '../skeleton';\nimport { Tooltip } from '../tooltip';\nimport styles from './calendar.module.css';\n\ninterface OnDropdownOpen {\n  onDropdownOpen?: VoidFunction;\n}\n\ninterface CalendarPropsExtended {\n  showTooltip?: boolean;\n  tooltipMessages?: Record<string, ReactNode>;\n  dateInfo?: Record<string, ReactNode> | ((date: Date) => ReactNode | null);\n  loadingData?: boolean;\n  timeZone?: string;\n}\n\nexport type CalendarProps = DayPickerProps &\n  OnDropdownOpen &\n  CalendarPropsExtended;\n\nconst root = cva(styles.calendarRoot);\n\ninterface DropDownComponentProps extends DropdownProps, OnDropdownOpen {\n  disabled?: boolean;\n}\n\nfunction DropDown({\n  options = [],\n  value,\n  onChange,\n  onDropdownOpen,\n  disabled\n}: DropDownComponentProps) {\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    if (open && onDropdownOpen) onDropdownOpen();\n  }, [open, onDropdownOpen]);\n\n  function handleChange(value: string) {\n    if (onChange) {\n      onChange({ target: { value } } as ChangeEvent<HTMLSelectElement>);\n    }\n  }\n\n  return (\n    <Select\n      value={value?.toString()}\n      onValueChange={handleChange}\n      open={open}\n      onOpenChange={setOpen}\n    >\n      <Select.Trigger\n        className={styles.dropdownTrigger}\n        iconProps={{\n          className: styles.dropdownIcon\n        }}\n        size='small'\n        variant='text'\n        disabled={disabled}\n      >\n        <Select.Value />\n      </Select.Trigger>\n      <Select.Content className={styles.dropdownContent}>\n        <Select.ScrollUpButton asChild>\n          <Flex justify='center'>\n            <ChevronUpIcon />\n          </Flex>\n        </Select.ScrollUpButton>\n        <Select.Viewport>\n          {options.map(opt => (\n            <Select.Item\n              value={opt.value.toString()}\n              key={opt.value}\n              disabled={opt.disabled}\n            >\n              {opt.label}\n            </Select.Item>\n          ))}\n        </Select.Viewport>\n        <Select.ScrollDownButton asChild>\n          <Flex justify='center'>\n            <ChevronDownIcon />\n          </Flex>\n        </Select.ScrollDownButton>\n      </Select.Content>\n    </Select>\n  );\n}\n\nexport const Calendar = function ({\n  className,\n  classNames,\n  showOutsideDays = true,\n  onDropdownOpen,\n  showTooltip = false,\n  tooltipMessages = {},\n  dateInfo = {},\n  loadingData = false,\n  timeZone,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      timeZone={timeZone}\n      components={{\n        Chevron: props => {\n          const icon =\n            props.orientation === 'left' ? (\n              <ChevronLeftIcon />\n            ) : (\n              <ChevronRightIcon />\n            );\n\n          return (\n            <IconButton\n              {...props}\n              disabled={loadingData}\n              className={cx(props.className, loadingData && styles.disabled)}\n              size={3}\n              aria-label={\n                props.orientation === 'left' ? 'Previous month' : 'Next month'\n              }\n            >\n              {icon}\n            </IconButton>\n          );\n        },\n        Dropdown: (props: DropdownProps) => (\n          <DropDown\n            {...props}\n            onDropdownOpen={onDropdownOpen}\n            disabled={loadingData}\n          />\n        ),\n        DayButton: props => {\n          const { day, ...buttonProps } = props;\n          const dateKey = dateLib.format(day.date, 'dd-MM-yyyy');\n          const message = tooltipMessages[dateKey];\n\n          // Support both object and function for dateInfo\n          const dateComponent =\n            typeof dateInfo === 'function'\n              ? dateInfo(day.date)\n              : dateInfo[dateKey];\n          const hasDateInfo = Boolean(dateComponent);\n\n          return (\n            <Tooltip\n              side='top'\n              disabled={loadingData || !showTooltip || !message}\n              message={message}\n            >\n              <button\n                {...buttonProps}\n                className={cx(\n                  buttonProps.className,\n                  hasDateInfo && styles.dayButtonWithInfo\n                )}\n              >\n                {hasDateInfo && (\n                  <div className={styles.dayInfo}>{dateComponent}</div>\n                )}\n                <span className={styles.dayNumber}>{buttonProps.children}</span>\n              </button>\n            </Tooltip>\n          );\n        },\n        MonthGrid: props =>\n          loadingData ? (\n            <Skeleton\n              count={5}\n              height='18px'\n              width='252px'\n              style={{ marginBottom: 'var(--rs-space-6)' }}\n            />\n          ) : (\n            <table {...props} />\n          )\n      }}\n      classNames={{\n        caption_label: styles.captionLabel,\n        button_previous: `${styles.navButton} ${styles.navButtonPrevious}`,\n        button_next: `${styles.navButton} ${styles.navButtonNext}`,\n        month_caption: styles.monthCaption,\n        months: styles.months,\n        nav: styles.nav,\n        day: styles.day,\n        today: styles.today,\n        outside: styles.outside,\n        week: styles.week,\n        weekdays: styles.week,\n        weekday: styles.weekday,\n        disabled: styles.disabled,\n        selected: styles.selected,\n        day_button: styles.dayButton,\n        range_middle: styles.rangeMiddle,\n        range_end: styles.rangeEnd,\n        range_start: styles.rangeStart,\n        hidden: styles.hidden,\n        dropdowns: styles.dropdowns,\n        ...classNames\n      }}\n      className={root({ className })}\n      mode='single'\n      {...props}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwCA;AAMA;;;;AAUgC;AAC9B;;;;;;AAQA;;;AA2CF;AAEa;AAYX;;;;;;;;AAoCQ;AACA;;AAGA;AAEI;AACA;AACJ;AAEA;;AAqBF;AAWD;;;;;;;;;;;;;;;;;;;;;AAsBC;AACD;AAMP;;"}
+{"version":3,"file":"calendar.cjs","sources":["../../../components/calendar/calendar.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons';\nimport { cva, cx } from 'class-variance-authority';\nimport { ChangeEvent, ReactNode, useEffect, useState } from 'react';\nimport {\n  DayPicker,\n  DayPickerProps,\n  DropdownProps,\n  dateLib\n} from 'react-day-picker';\n\nimport { IconButton } from '../icon-button';\nimport { Select } from '../select';\nimport { Skeleton } from '../skeleton';\nimport { Tooltip } from '../tooltip';\nimport styles from './calendar.module.css';\n\ninterface OnDropdownOpen {\n  onDropdownOpen?: VoidFunction;\n}\n\ninterface CalendarPropsExtended {\n  showTooltip?: boolean;\n  tooltipMessages?: Record<string, ReactNode>;\n  dateInfo?: Record<string, ReactNode> | ((date: Date) => ReactNode | null);\n  loadingData?: boolean;\n  timeZone?: string;\n}\n\nexport type CalendarProps = DayPickerProps &\n  OnDropdownOpen &\n  CalendarPropsExtended;\n\nconst root = cva(styles.calendarRoot);\n\ninterface DropDownComponentProps extends DropdownProps, OnDropdownOpen {\n  disabled?: boolean;\n}\n\nfunction DropDown({\n  options = [],\n  value,\n  onChange,\n  onDropdownOpen,\n  disabled\n}: DropDownComponentProps) {\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    if (open && onDropdownOpen) onDropdownOpen();\n  }, [open, onDropdownOpen]);\n\n  function handleChange(value: string) {\n    if (onChange) {\n      onChange({ target: { value } } as ChangeEvent<HTMLSelectElement>);\n    }\n  }\n\n  return (\n    <Select\n      value={value?.toString()}\n      onValueChange={handleChange}\n      open={open}\n      onOpenChange={setOpen}\n    >\n      <Select.Trigger\n        className={styles.dropdownTrigger}\n        iconProps={{\n          className: styles.dropdownIcon\n        }}\n        size='small'\n        variant='text'\n        disabled={disabled}\n      >\n        <Select.Value />\n      </Select.Trigger>\n      <Select.Content className={styles.dropdownContent}>\n        {options.map(opt => (\n          <Select.Item\n            value={opt.value.toString()}\n            key={opt.value}\n            disabled={opt.disabled}\n          >\n            {opt.label}\n          </Select.Item>\n        ))}\n      </Select.Content>\n    </Select>\n  );\n}\n\nexport const Calendar = function ({\n  className,\n  classNames,\n  showOutsideDays = true,\n  onDropdownOpen,\n  showTooltip = false,\n  tooltipMessages = {},\n  dateInfo = {},\n  loadingData = false,\n  timeZone,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      timeZone={timeZone}\n      components={{\n        Chevron: props => {\n          const icon =\n            props.orientation === 'left' ? (\n              <ChevronLeftIcon />\n            ) : (\n              <ChevronRightIcon />\n            );\n\n          return (\n            <IconButton\n              {...props}\n              disabled={loadingData}\n              className={cx(props.className, loadingData && styles.disabled)}\n              size={3}\n              aria-label={\n                props.orientation === 'left' ? 'Previous month' : 'Next month'\n              }\n            >\n              {icon}\n            </IconButton>\n          );\n        },\n        Dropdown: (props: DropdownProps) => (\n          <DropDown\n            {...props}\n            onDropdownOpen={onDropdownOpen}\n            disabled={loadingData}\n          />\n        ),\n        DayButton: props => {\n          const { day, ...buttonProps } = props;\n          const dateKey = dateLib.format(day.date, 'dd-MM-yyyy');\n          const message = tooltipMessages[dateKey];\n\n          // Support both object and function for dateInfo\n          const dateComponent =\n            typeof dateInfo === 'function'\n              ? dateInfo(day.date)\n              : dateInfo[dateKey];\n          const hasDateInfo = Boolean(dateComponent);\n\n          return (\n            <Tooltip\n              side='top'\n              disabled={loadingData || !showTooltip || !message}\n              message={message}\n            >\n              <button\n                {...buttonProps}\n                className={cx(\n                  buttonProps.className,\n                  hasDateInfo && styles.dayButtonWithInfo\n                )}\n              >\n                {hasDateInfo && (\n                  <div className={styles.dayInfo}>{dateComponent}</div>\n                )}\n                <span className={styles.dayNumber}>{buttonProps.children}</span>\n              </button>\n            </Tooltip>\n          );\n        },\n        MonthGrid: props =>\n          loadingData ? (\n            <Skeleton\n              count={5}\n              height='18px'\n              width='252px'\n              style={{ marginBottom: 'var(--rs-space-6)' }}\n            />\n          ) : (\n            <table {...props} />\n          )\n      }}\n      classNames={{\n        caption_label: styles.captionLabel,\n        button_previous: `${styles.navButton} ${styles.navButtonPrevious}`,\n        button_next: `${styles.navButton} ${styles.navButtonNext}`,\n        month_caption: styles.monthCaption,\n        months: styles.months,\n        nav: styles.nav,\n        day: styles.day,\n        today: styles.today,\n        outside: styles.outside,\n        week: styles.week,\n        weekdays: styles.week,\n        weekday: styles.weekday,\n        disabled: styles.disabled,\n        selected: styles.selected,\n        day_button: styles.dayButton,\n        range_middle: styles.rangeMiddle,\n        range_end: styles.rangeEnd,\n        range_start: styles.rangeStart,\n        hidden: styles.hidden,\n        dropdowns: styles.dropdowns,\n        ...classNames\n      }}\n      className={root({ className })}\n      mode='single'\n      {...props}\n    />\n  );\n};\n\nCalendar.displayName = 'Calendar';\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAkCA;AAMA;;;;AAUgC;AAC9B;;;;;;AAQA;;AAWO;AAoBT;AAEa;AAYX;;;;;;;;AAoCQ;AACA;;AAGA;AAEI;AACA;AACJ;AAEA;;AAqBF;AAWD;;;;;;;;;;;;;;;;;;;;;AAsBC;AACD;AAMP;AAEA;;"}

package/dist/components/calendar/calendar.d.ts

@@ -11,6 +11,9 @@ interface CalendarPropsExtended {
     timeZone?: string;
 }
 export type CalendarProps = DayPickerProps & OnDropdownOpen & CalendarPropsExtended;
-export declare const Calendar: ({ className, classNames, showOutsideDays, onDropdownOpen, showTooltip, tooltipMessages, dateInfo, loadingData, timeZone, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Calendar: {
+    ({ className, classNames, showOutsideDays, onDropdownOpen, showTooltip, tooltipMessages, dateInfo, loadingData, timeZone, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};
 //# sourceMappingURL=calendar.d.ts.map

package/dist/components/calendar/calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../components/calendar/calendar.tsx"],"names":[],"mappings":"AASA,OAAO,EAAe,SAAS,EAAuB,MAAM,OAAO,CAAC;AACpE,OAAO,EAEL,cAAc,EAGf,MAAM,kBAAkB,CAAC;AAS1B,UAAU,cAAc;IACtB,cAAc,CAAC,EAAE,YAAY,CAAC;CAC/B;AAED,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,SAAS,GAAG,IAAI,CAAC,CAAC;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,GACxC,cAAc,GACd,qBAAqB,CAAC;AAwExB,eAAO,MAAM,QAAQ,wIAWlB,aAAa,4CA4Gf,CAAC"}
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../components/calendar/calendar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAe,SAAS,EAAuB,MAAM,OAAO,CAAC;AACpE,OAAO,EAEL,cAAc,EAGf,MAAM,kBAAkB,CAAC;AAQ1B,UAAU,cAAc;IACtB,cAAc,CAAC,EAAE,YAAY,CAAC;CAC/B;AAED,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,SAAS,GAAG,IAAI,CAAC,CAAC;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,GACxC,cAAc,GACd,qBAAqB,CAAC;AA4DxB,eAAO,MAAM,QAAQ;0IAWlB,aAAa;;CA4Gf,CAAC"}

package/dist/components/calendar/calendar.js

@@ -1,10 +1,9 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon } from '@radix-ui/react-icons';
+import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons';
 import { cva, cx } from 'class-variance-authority';
 import { useState, useEffect } from 'react';
 import { DayPicker, dateLib } from 'react-day-picker';
-import { Flex } from '../flex/flex.js';
 import { IconButton } from '../icon-button/icon-button.js';
 import { Select } from '../select/select.js';
 import { Skeleton } from '../skeleton/skeleton.js';
@@ -25,7 +24,7 @@ function DropDown({ options = [], value, onChange, onDropdownOpen, disabled }) {
     }
     return (jsxs(Select, { value: value?.toString(), onValueChange: handleChange, open: open, onOpenChange: setOpen, children: [jsx(Select.Trigger, { className: styles.dropdownTrigger, iconProps: {
                     className: styles.dropdownIcon
-                }, size: 'small', variant: 'text', disabled: disabled, children: jsx(Select.Value, {}) }), jsxs(Select.Content, { className: styles.dropdownContent, children: [jsx(Select.ScrollUpButton, { asChild: true, children: jsx(Flex, { justify: 'center', children: jsx(ChevronUpIcon, {}) }) }), jsx(Select.Viewport, { children: options.map(opt => (jsx(Select.Item, { value: opt.value.toString(), disabled: opt.disabled, children: opt.label }, opt.value))) }), jsx(Select.ScrollDownButton, { asChild: true, children: jsx(Flex, { justify: 'center', children: jsx(ChevronDownIcon, {}) }) })] })] }));
+                }, size: 'small', variant: 'text', disabled: disabled, children: jsx(Select.Value, {}) }), jsx(Select.Content, { className: styles.dropdownContent, children: options.map(opt => (jsx(Select.Item, { value: opt.value.toString(), disabled: opt.disabled, children: opt.label }, opt.value))) })] }));
 }
 const Calendar = function ({ className, classNames, showOutsideDays = true, onDropdownOpen, showTooltip = false, tooltipMessages = {}, dateInfo = {}, loadingData = false, timeZone, ...props }) {
     return (jsx(DayPicker, { showOutsideDays: showOutsideDays, timeZone: timeZone, components: {
@@ -70,6 +69,7 @@ const Calendar = function ({ className, classNames, showOutsideDays = true, onDr
             ...classNames
         }, className: root({ className }), mode: 'single', ...props }));
 };
+Calendar.displayName = 'Calendar';
 
 export { Calendar };
 //# sourceMappingURL=calendar.js.map

package/dist/components/calendar/calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.js","sources":["../../../components/calendar/calendar.tsx"],"sourcesContent":["'use client';\n\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon\n} from '@radix-ui/react-icons';\nimport { cva, cx } from 'class-variance-authority';\nimport { ChangeEvent, ReactNode, useEffect, useState } from 'react';\nimport {\n  DayPicker,\n  DayPickerProps,\n  DropdownProps,\n  dateLib\n} from 'react-day-picker';\n\nimport { Flex } from '../flex/flex';\nimport { IconButton } from '../icon-button';\nimport { Select } from '../select';\nimport { Skeleton } from '../skeleton';\nimport { Tooltip } from '../tooltip';\nimport styles from './calendar.module.css';\n\ninterface OnDropdownOpen {\n  onDropdownOpen?: VoidFunction;\n}\n\ninterface CalendarPropsExtended {\n  showTooltip?: boolean;\n  tooltipMessages?: Record<string, ReactNode>;\n  dateInfo?: Record<string, ReactNode> | ((date: Date) => ReactNode | null);\n  loadingData?: boolean;\n  timeZone?: string;\n}\n\nexport type CalendarProps = DayPickerProps &\n  OnDropdownOpen &\n  CalendarPropsExtended;\n\nconst root = cva(styles.calendarRoot);\n\ninterface DropDownComponentProps extends DropdownProps, OnDropdownOpen {\n  disabled?: boolean;\n}\n\nfunction DropDown({\n  options = [],\n  value,\n  onChange,\n  onDropdownOpen,\n  disabled\n}: DropDownComponentProps) {\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    if (open && onDropdownOpen) onDropdownOpen();\n  }, [open, onDropdownOpen]);\n\n  function handleChange(value: string) {\n    if (onChange) {\n      onChange({ target: { value } } as ChangeEvent<HTMLSelectElement>);\n    }\n  }\n\n  return (\n    <Select\n      value={value?.toString()}\n      onValueChange={handleChange}\n      open={open}\n      onOpenChange={setOpen}\n    >\n      <Select.Trigger\n        className={styles.dropdownTrigger}\n        iconProps={{\n          className: styles.dropdownIcon\n        }}\n        size='small'\n        variant='text'\n        disabled={disabled}\n      >\n        <Select.Value />\n      </Select.Trigger>\n      <Select.Content className={styles.dropdownContent}>\n        <Select.ScrollUpButton asChild>\n          <Flex justify='center'>\n            <ChevronUpIcon />\n          </Flex>\n        </Select.ScrollUpButton>\n        <Select.Viewport>\n          {options.map(opt => (\n            <Select.Item\n              value={opt.value.toString()}\n              key={opt.value}\n              disabled={opt.disabled}\n            >\n              {opt.label}\n            </Select.Item>\n          ))}\n        </Select.Viewport>\n        <Select.ScrollDownButton asChild>\n          <Flex justify='center'>\n            <ChevronDownIcon />\n          </Flex>\n        </Select.ScrollDownButton>\n      </Select.Content>\n    </Select>\n  );\n}\n\nexport const Calendar = function ({\n  className,\n  classNames,\n  showOutsideDays = true,\n  onDropdownOpen,\n  showTooltip = false,\n  tooltipMessages = {},\n  dateInfo = {},\n  loadingData = false,\n  timeZone,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      timeZone={timeZone}\n      components={{\n        Chevron: props => {\n          const icon =\n            props.orientation === 'left' ? (\n              <ChevronLeftIcon />\n            ) : (\n              <ChevronRightIcon />\n            );\n\n          return (\n            <IconButton\n              {...props}\n              disabled={loadingData}\n              className={cx(props.className, loadingData && styles.disabled)}\n              size={3}\n              aria-label={\n                props.orientation === 'left' ? 'Previous month' : 'Next month'\n              }\n            >\n              {icon}\n            </IconButton>\n          );\n        },\n        Dropdown: (props: DropdownProps) => (\n          <DropDown\n            {...props}\n            onDropdownOpen={onDropdownOpen}\n            disabled={loadingData}\n          />\n        ),\n        DayButton: props => {\n          const { day, ...buttonProps } = props;\n          const dateKey = dateLib.format(day.date, 'dd-MM-yyyy');\n          const message = tooltipMessages[dateKey];\n\n          // Support both object and function for dateInfo\n          const dateComponent =\n            typeof dateInfo === 'function'\n              ? dateInfo(day.date)\n              : dateInfo[dateKey];\n          const hasDateInfo = Boolean(dateComponent);\n\n          return (\n            <Tooltip\n              side='top'\n              disabled={loadingData || !showTooltip || !message}\n              message={message}\n            >\n              <button\n                {...buttonProps}\n                className={cx(\n                  buttonProps.className,\n                  hasDateInfo && styles.dayButtonWithInfo\n                )}\n              >\n                {hasDateInfo && (\n                  <div className={styles.dayInfo}>{dateComponent}</div>\n                )}\n                <span className={styles.dayNumber}>{buttonProps.children}</span>\n              </button>\n            </Tooltip>\n          );\n        },\n        MonthGrid: props =>\n          loadingData ? (\n            <Skeleton\n              count={5}\n              height='18px'\n              width='252px'\n              style={{ marginBottom: 'var(--rs-space-6)' }}\n            />\n          ) : (\n            <table {...props} />\n          )\n      }}\n      classNames={{\n        caption_label: styles.captionLabel,\n        button_previous: `${styles.navButton} ${styles.navButtonPrevious}`,\n        button_next: `${styles.navButton} ${styles.navButtonNext}`,\n        month_caption: styles.monthCaption,\n        months: styles.months,\n        nav: styles.nav,\n        day: styles.day,\n        today: styles.today,\n        outside: styles.outside,\n        week: styles.week,\n        weekdays: styles.week,\n        weekday: styles.weekday,\n        disabled: styles.disabled,\n        selected: styles.selected,\n        day_button: styles.dayButton,\n        range_middle: styles.rangeMiddle,\n        range_end: styles.rangeEnd,\n        range_start: styles.rangeStart,\n        hidden: styles.hidden,\n        dropdowns: styles.dropdowns,\n        ...classNames\n      }}\n      className={root({ className })}\n      mode='single'\n      {...props}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAwCA;AAMA;;;;AAUgC;AAC9B;;;;;;AAQA;;;AA2CF;AAEa;AAYX;;;;;;;;AAoCQ;AACA;;AAGA;AAEI;AACA;AACJ;AAEA;;AAqBF;AAWD;;;;;;;;;;;;;;;;;;;;;AAsBC;AACD;AAMP;;"}
+{"version":3,"file":"calendar.js","sources":["../../../components/calendar/calendar.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons';\nimport { cva, cx } from 'class-variance-authority';\nimport { ChangeEvent, ReactNode, useEffect, useState } from 'react';\nimport {\n  DayPicker,\n  DayPickerProps,\n  DropdownProps,\n  dateLib\n} from 'react-day-picker';\n\nimport { IconButton } from '../icon-button';\nimport { Select } from '../select';\nimport { Skeleton } from '../skeleton';\nimport { Tooltip } from '../tooltip';\nimport styles from './calendar.module.css';\n\ninterface OnDropdownOpen {\n  onDropdownOpen?: VoidFunction;\n}\n\ninterface CalendarPropsExtended {\n  showTooltip?: boolean;\n  tooltipMessages?: Record<string, ReactNode>;\n  dateInfo?: Record<string, ReactNode> | ((date: Date) => ReactNode | null);\n  loadingData?: boolean;\n  timeZone?: string;\n}\n\nexport type CalendarProps = DayPickerProps &\n  OnDropdownOpen &\n  CalendarPropsExtended;\n\nconst root = cva(styles.calendarRoot);\n\ninterface DropDownComponentProps extends DropdownProps, OnDropdownOpen {\n  disabled?: boolean;\n}\n\nfunction DropDown({\n  options = [],\n  value,\n  onChange,\n  onDropdownOpen,\n  disabled\n}: DropDownComponentProps) {\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    if (open && onDropdownOpen) onDropdownOpen();\n  }, [open, onDropdownOpen]);\n\n  function handleChange(value: string) {\n    if (onChange) {\n      onChange({ target: { value } } as ChangeEvent<HTMLSelectElement>);\n    }\n  }\n\n  return (\n    <Select\n      value={value?.toString()}\n      onValueChange={handleChange}\n      open={open}\n      onOpenChange={setOpen}\n    >\n      <Select.Trigger\n        className={styles.dropdownTrigger}\n        iconProps={{\n          className: styles.dropdownIcon\n        }}\n        size='small'\n        variant='text'\n        disabled={disabled}\n      >\n        <Select.Value />\n      </Select.Trigger>\n      <Select.Content className={styles.dropdownContent}>\n        {options.map(opt => (\n          <Select.Item\n            value={opt.value.toString()}\n            key={opt.value}\n            disabled={opt.disabled}\n          >\n            {opt.label}\n          </Select.Item>\n        ))}\n      </Select.Content>\n    </Select>\n  );\n}\n\nexport const Calendar = function ({\n  className,\n  classNames,\n  showOutsideDays = true,\n  onDropdownOpen,\n  showTooltip = false,\n  tooltipMessages = {},\n  dateInfo = {},\n  loadingData = false,\n  timeZone,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      timeZone={timeZone}\n      components={{\n        Chevron: props => {\n          const icon =\n            props.orientation === 'left' ? (\n              <ChevronLeftIcon />\n            ) : (\n              <ChevronRightIcon />\n            );\n\n          return (\n            <IconButton\n              {...props}\n              disabled={loadingData}\n              className={cx(props.className, loadingData && styles.disabled)}\n              size={3}\n              aria-label={\n                props.orientation === 'left' ? 'Previous month' : 'Next month'\n              }\n            >\n              {icon}\n            </IconButton>\n          );\n        },\n        Dropdown: (props: DropdownProps) => (\n          <DropDown\n            {...props}\n            onDropdownOpen={onDropdownOpen}\n            disabled={loadingData}\n          />\n        ),\n        DayButton: props => {\n          const { day, ...buttonProps } = props;\n          const dateKey = dateLib.format(day.date, 'dd-MM-yyyy');\n          const message = tooltipMessages[dateKey];\n\n          // Support both object and function for dateInfo\n          const dateComponent =\n            typeof dateInfo === 'function'\n              ? dateInfo(day.date)\n              : dateInfo[dateKey];\n          const hasDateInfo = Boolean(dateComponent);\n\n          return (\n            <Tooltip\n              side='top'\n              disabled={loadingData || !showTooltip || !message}\n              message={message}\n            >\n              <button\n                {...buttonProps}\n                className={cx(\n                  buttonProps.className,\n                  hasDateInfo && styles.dayButtonWithInfo\n                )}\n              >\n                {hasDateInfo && (\n                  <div className={styles.dayInfo}>{dateComponent}</div>\n                )}\n                <span className={styles.dayNumber}>{buttonProps.children}</span>\n              </button>\n            </Tooltip>\n          );\n        },\n        MonthGrid: props =>\n          loadingData ? (\n            <Skeleton\n              count={5}\n              height='18px'\n              width='252px'\n              style={{ marginBottom: 'var(--rs-space-6)' }}\n            />\n          ) : (\n            <table {...props} />\n          )\n      }}\n      classNames={{\n        caption_label: styles.captionLabel,\n        button_previous: `${styles.navButton} ${styles.navButtonPrevious}`,\n        button_next: `${styles.navButton} ${styles.navButtonNext}`,\n        month_caption: styles.monthCaption,\n        months: styles.months,\n        nav: styles.nav,\n        day: styles.day,\n        today: styles.today,\n        outside: styles.outside,\n        week: styles.week,\n        weekdays: styles.week,\n        weekday: styles.weekday,\n        disabled: styles.disabled,\n        selected: styles.selected,\n        day_button: styles.dayButton,\n        range_middle: styles.rangeMiddle,\n        range_end: styles.rangeEnd,\n        range_start: styles.rangeStart,\n        hidden: styles.hidden,\n        dropdowns: styles.dropdowns,\n        ...classNames\n      }}\n      className={root({ className })}\n      mode='single'\n      {...props}\n    />\n  );\n};\n\nCalendar.displayName = 'Calendar';\n"],"names":[],"mappings":";;;;;;;;;;;;AAkCA;AAMA;;;;AAUgC;AAC9B;;;;;;AAQA;;AAWO;AAoBT;AAEa;AAYX;;;;;;;;AAoCQ;AACA;;AAGA;AAEI;AACA;AACJ;AAEA;;AAqBF;AAWD;;;;;;;;;;;;;;;;;;;;;AAsBC;AACD;AAMP;AAEA;;"}

package/dist/components/calendar/date-picker.cjs

@@ -115,8 +115,9 @@ function DatePicker({ dateFormat = 'DD/MM/YYYY', inputFieldProps, calendarProps,
     }
     const defaultTrigger = (jsxRuntime.jsx(inputField.InputField, { size: 'small', placeholder: 'Select date', error: error, className: calendar_module.default.datePickerInput, trailingIcon: showCalendarIcon ? jsxRuntime.jsx(reactIcons.CalendarIcon, {}) : undefined, ...inputFieldProps, ref: inputFieldRef, value: formattedDate, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyUp: handleKeyUp }));
     const trigger = typeof children === 'function' ? (children({ selectedDate: formattedDate })) : children ? (jsxRuntime.jsx("div", { children: children })) : (jsxRuntime.jsx("div", { children: defaultTrigger }));
-    return (jsxRuntime.jsxs(popover.Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsxRuntime.jsx(popover.Popover.Trigger, { asChild: true, children: trigger }), jsxRuntime.jsx(popover.Popover.Content, { ref: contentRef, ...popoverProps, className: classVarianceAuthority.cx(calendar_module.default.calendarPopover, popoverProps?.className), side: popoverProps?.side ?? 'top', children: jsxRuntime.jsx(calendar.Calendar, { required: true, ...calendarProps, timeZone: timeZone, onDropdownOpen: onDropdownOpen, mode: 'single', selected: selectedDate, month: selectedDate, onSelect: handleSelect, onMonthChange: setSelectedDate }) })] }));
+    return (jsxRuntime.jsxs(popover.Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsxRuntime.jsx(popover.Popover.Trigger, { render: React.isValidElement(trigger) ? trigger : jsxRuntime.jsx("button", { children: trigger }) }), jsxRuntime.jsx(popover.Popover.Content, { ref: contentRef, ...popoverProps, className: classVarianceAuthority.cx(calendar_module.default.calendarPopover, popoverProps?.className), side: popoverProps?.side ?? 'top', children: jsxRuntime.jsx(calendar.Calendar, { required: true, ...calendarProps, timeZone: timeZone, onDropdownOpen: onDropdownOpen, mode: 'single', selected: selectedDate, month: selectedDate, onSelect: handleSelect, onMonthChange: setSelectedDate }) })] }));
 }
+DatePicker.displayName = 'DatePicker';
 
 exports.DatePicker = DatePicker;
 //# sourceMappingURL=date-picker.cjs.map

package/dist/components/calendar/date-picker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.cjs","sources":["../../../components/calendar/date-picker.tsx"],"sourcesContent":["'use client';\n\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { cx } from 'class-variance-authority';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { PropsBase, PropsSingleRequired } from 'react-day-picker';\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\nimport { Popover } from '../popover';\nimport { PopoverContentProps } from '../popover/popover';\nimport { Calendar } from './calendar';\nimport styles from './calendar.module.css';\n\ndayjs.extend(customParseFormat);\n\ninterface DatePickerProps {\n  dateFormat?: string;\n  inputFieldProps?: InputFieldProps;\n  calendarProps?: PropsSingleRequired & PropsBase;\n  onSelect?: (date: Date) => void;\n  value?: Date;\n  children?:\n    | React.ReactNode\n    | ((props: { selectedDate: string }) => React.ReactNode);\n  showCalendarIcon?: boolean;\n  timeZone?: string;\n  popoverProps?: PopoverContentProps;\n}\n\nexport function DatePicker({\n  dateFormat = 'DD/MM/YYYY',\n  inputFieldProps,\n  calendarProps,\n  value = new Date(),\n  onSelect = () => {},\n  children,\n  showCalendarIcon = true,\n  timeZone,\n  popoverProps\n}: DatePickerProps) {\n  const [showCalendar, setShowCalendar] = useState(false);\n  const [selectedDate, setSelectedDate] = useState(value);\n  const [error, setError] = useState<string>();\n\n  const formattedDate = dayjs(selectedDate).format(dateFormat);\n\n  const isDropdownOpenRef = useRef(false);\n  const inputFieldRef = useRef<HTMLInputElement | null>(null);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const isInputFieldFocused = useRef(false);\n  const selectedDateRef = useRef(selectedDate);\n\n  useEffect(() => {\n    selectedDateRef.current = selectedDate;\n  }, [selectedDate]);\n\n  const isElementOutside = useCallback((el: HTMLElement) => {\n    return (\n      !isDropdownOpenRef.current && // Month and Year dropdown from Date picker\n      !inputFieldRef.current?.contains(el) && // InputField\n      !contentRef.current?.contains(el)\n    );\n  }, []);\n\n  const handleMouseDown = useCallback(\n    (event: MouseEvent) => {\n      const el = event.target as HTMLElement | null;\n      if (el && isElementOutside(el)) removeEventListeners();\n    },\n    [isElementOutside]\n  );\n\n  function registerEventListeners() {\n    isInputFieldFocused.current = true;\n    document.addEventListener('mouseup', handleMouseDown);\n  }\n\n  function removeEventListeners(skipUpdate = false) {\n    isInputFieldFocused.current = false;\n    setShowCalendar(false);\n\n    const updatedVal = dayjs(selectedDateRef.current).format(dateFormat);\n\n    if (inputFieldRef.current) inputFieldRef.current.value = updatedVal;\n    if (!error && !skipUpdate) onSelect(dayjs(updatedVal).toDate());\n\n    document.removeEventListener('mouseup', handleMouseDown);\n  }\n\n  const handleSelect = (day: Date) => {\n    setSelectedDate(day);\n    onSelect(day);\n    setError(undefined);\n    removeEventListeners(true);\n  };\n\n  function onDropdownOpen() {\n    isDropdownOpenRef.current = true;\n  }\n\n  function onOpenChange(open?: boolean) {\n    if (\n      !isDropdownOpenRef.current &&\n      !(isInputFieldFocused.current && showCalendar)\n    ) {\n      setShowCalendar(Boolean(open));\n    }\n\n    isDropdownOpenRef.current = false;\n  }\n\n  function handleInputFocus() {\n    if (isInputFieldFocused.current) return;\n    if (!showCalendar) setShowCalendar(true);\n  }\n\n  function handleInputBlur(event: React.FocusEvent) {\n    if (isInputFieldFocused.current) {\n      const el = event.relatedTarget as HTMLElement | null;\n      if (el && isElementOutside(el)) removeEventListeners();\n    } else {\n      registerEventListeners();\n      setTimeout(() => inputFieldRef.current?.select());\n    }\n  }\n\n  function handleKeyUp(event: React.KeyboardEvent) {\n    if (event.code === 'Enter' && inputFieldRef.current) {\n      inputFieldRef.current.blur();\n      removeEventListeners();\n    }\n  }\n\n  function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {\n    const { value } = event.target;\n\n    const format = value.includes('/')\n      ? 'DD/MM/YYYY'\n      : value.includes('-')\n        ? 'DD-MM-YYYY'\n        : undefined;\n    const date = dayjs(value, format);\n\n    const isValidDate = date.isValid();\n\n    const isAfter =\n      calendarProps?.startMonth !== undefined\n        ? dayjs(date).isSameOrAfter(calendarProps.startMonth)\n        : true;\n    const isBefore =\n      calendarProps?.endMonth !== undefined\n        ? dayjs(date).isSameOrBefore(calendarProps.endMonth)\n        : true;\n\n    const isValid =\n      isValidDate && isAfter && isBefore && dayjs(date).isSameOrBefore(dayjs());\n\n    if (isValid) {\n      setSelectedDate(date.toDate());\n      setError(undefined);\n    } else {\n      setError('Invalid date');\n    }\n  }\n\n  const defaultTrigger = (\n    <InputField\n      size='small'\n      placeholder='Select date'\n      error={error}\n      className={styles.datePickerInput}\n      trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n      {...inputFieldProps}\n      ref={inputFieldRef}\n      value={formattedDate}\n      onChange={handleInputChange}\n      onFocus={handleInputFocus}\n      onBlur={handleInputBlur}\n      onKeyUp={handleKeyUp}\n    />\n  );\n\n  const trigger =\n    typeof children === 'function' ? (\n      children({ selectedDate: formattedDate })\n    ) : children ? (\n      <div>{children}</div>\n    ) : (\n      <div>{defaultTrigger}</div>\n    );\n\n  return (\n    <Popover open={showCalendar} onOpenChange={onOpenChange}>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n      <Popover.Content\n        ref={contentRef}\n        {...popoverProps}\n        className={cx(styles.calendarPopover, popoverProps?.className)}\n        side={popoverProps?.side ?? 'top'}\n      >\n        <Calendar\n          required={true}\n          {...calendarProps}\n          timeZone={timeZone}\n          onDropdownOpen={onDropdownOpen}\n          mode='single'\n          selected={selectedDate}\n          month={selectedDate}\n          onSelect={handleSelect}\n          onMonthChange={setSelectedDate}\n        />\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAeA;AAgBgB;;;;;AAiBd;AACA;AACA;AACA;AACA;;AAGE;AACF;AAEA;AACE;;;;AAOF;AAEI;AACA;AAAgC;AAClC;AAIF;AACE;AACA;;AAGF;AACE;;AAGA;;AAE2B;AAC3B;;AAEA;;AAGF;;;;;AAKA;AAEA;AACE;;;;;AAQE;;AAGF;;AAGF;;;AAEE;;;;AAIA;AACE;AACA;AAAgC;;;AAEhC;;;;;;AAOA;AACA;;;;AAKF;AAEA;AACE;AACA;AACE;;;AAIJ;AAEA;;;AAIA;;;AAKA;;AAIE;;;;;;;AAOJ;AAiBA;;AAgCF;;"}
+{"version":3,"file":"date-picker.cjs","sources":["../../../components/calendar/date-picker.tsx"],"sourcesContent":["'use client';\n\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { cx } from 'class-variance-authority';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport {\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport { PropsBase, PropsSingleRequired } from 'react-day-picker';\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\nimport { Popover } from '../popover';\nimport { PopoverContentProps } from '../popover/popover';\nimport { Calendar } from './calendar';\nimport styles from './calendar.module.css';\n\ndayjs.extend(customParseFormat);\n\ninterface DatePickerProps {\n  dateFormat?: string;\n  inputFieldProps?: InputFieldProps;\n  calendarProps?: PropsSingleRequired & PropsBase;\n  onSelect?: (date: Date) => void;\n  value?: Date;\n  children?:\n    | React.ReactNode\n    | ((props: { selectedDate: string }) => React.ReactNode);\n  showCalendarIcon?: boolean;\n  timeZone?: string;\n  popoverProps?: PopoverContentProps;\n}\n\nexport function DatePicker({\n  dateFormat = 'DD/MM/YYYY',\n  inputFieldProps,\n  calendarProps,\n  value = new Date(),\n  onSelect = () => {},\n  children,\n  showCalendarIcon = true,\n  timeZone,\n  popoverProps\n}: DatePickerProps) {\n  const [showCalendar, setShowCalendar] = useState(false);\n  const [selectedDate, setSelectedDate] = useState(value);\n  const [error, setError] = useState<string>();\n\n  const formattedDate = dayjs(selectedDate).format(dateFormat);\n\n  const isDropdownOpenRef = useRef(false);\n  const inputFieldRef = useRef<HTMLInputElement | null>(null);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const isInputFieldFocused = useRef(false);\n  const selectedDateRef = useRef(selectedDate);\n\n  useEffect(() => {\n    selectedDateRef.current = selectedDate;\n  }, [selectedDate]);\n\n  const isElementOutside = useCallback((el: HTMLElement) => {\n    return (\n      !isDropdownOpenRef.current && // Month and Year dropdown from Date picker\n      !inputFieldRef.current?.contains(el) && // InputField\n      !contentRef.current?.contains(el)\n    );\n  }, []);\n\n  const handleMouseDown = useCallback(\n    (event: MouseEvent) => {\n      const el = event.target as HTMLElement | null;\n      if (el && isElementOutside(el)) removeEventListeners();\n    },\n    [isElementOutside]\n  );\n\n  function registerEventListeners() {\n    isInputFieldFocused.current = true;\n    document.addEventListener('mouseup', handleMouseDown);\n  }\n\n  function removeEventListeners(skipUpdate = false) {\n    isInputFieldFocused.current = false;\n    setShowCalendar(false);\n\n    const updatedVal = dayjs(selectedDateRef.current).format(dateFormat);\n\n    if (inputFieldRef.current) inputFieldRef.current.value = updatedVal;\n    if (!error && !skipUpdate) onSelect(dayjs(updatedVal).toDate());\n\n    document.removeEventListener('mouseup', handleMouseDown);\n  }\n\n  const handleSelect = (day: Date) => {\n    setSelectedDate(day);\n    onSelect(day);\n    setError(undefined);\n    removeEventListeners(true);\n  };\n\n  function onDropdownOpen() {\n    isDropdownOpenRef.current = true;\n  }\n\n  function onOpenChange(open?: boolean) {\n    if (\n      !isDropdownOpenRef.current &&\n      !(isInputFieldFocused.current && showCalendar)\n    ) {\n      setShowCalendar(Boolean(open));\n    }\n\n    isDropdownOpenRef.current = false;\n  }\n\n  function handleInputFocus() {\n    if (isInputFieldFocused.current) return;\n    if (!showCalendar) setShowCalendar(true);\n  }\n\n  function handleInputBlur(event: React.FocusEvent) {\n    if (isInputFieldFocused.current) {\n      const el = event.relatedTarget as HTMLElement | null;\n      if (el && isElementOutside(el)) removeEventListeners();\n    } else {\n      registerEventListeners();\n      setTimeout(() => inputFieldRef.current?.select());\n    }\n  }\n\n  function handleKeyUp(event: React.KeyboardEvent) {\n    if (event.code === 'Enter' && inputFieldRef.current) {\n      inputFieldRef.current.blur();\n      removeEventListeners();\n    }\n  }\n\n  function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {\n    const { value } = event.target;\n\n    const format = value.includes('/')\n      ? 'DD/MM/YYYY'\n      : value.includes('-')\n        ? 'DD-MM-YYYY'\n        : undefined;\n    const date = dayjs(value, format);\n\n    const isValidDate = date.isValid();\n\n    const isAfter =\n      calendarProps?.startMonth !== undefined\n        ? dayjs(date).isSameOrAfter(calendarProps.startMonth)\n        : true;\n    const isBefore =\n      calendarProps?.endMonth !== undefined\n        ? dayjs(date).isSameOrBefore(calendarProps.endMonth)\n        : true;\n\n    const isValid =\n      isValidDate && isAfter && isBefore && dayjs(date).isSameOrBefore(dayjs());\n\n    if (isValid) {\n      setSelectedDate(date.toDate());\n      setError(undefined);\n    } else {\n      setError('Invalid date');\n    }\n  }\n\n  const defaultTrigger = (\n    <InputField\n      size='small'\n      placeholder='Select date'\n      error={error}\n      className={styles.datePickerInput}\n      trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n      {...inputFieldProps}\n      ref={inputFieldRef}\n      value={formattedDate}\n      onChange={handleInputChange}\n      onFocus={handleInputFocus}\n      onBlur={handleInputBlur}\n      onKeyUp={handleKeyUp}\n    />\n  );\n\n  const trigger =\n    typeof children === 'function' ? (\n      children({ selectedDate: formattedDate })\n    ) : children ? (\n      <div>{children}</div>\n    ) : (\n      <div>{defaultTrigger}</div>\n    );\n\n  return (\n    <Popover open={showCalendar} onOpenChange={onOpenChange}>\n      <Popover.Trigger\n        render={isValidElement(trigger) ? trigger : <button>{trigger}</button>}\n      />\n      <Popover.Content\n        ref={contentRef}\n        {...popoverProps}\n        className={cx(styles.calendarPopover, popoverProps?.className)}\n        side={popoverProps?.side ?? 'top'}\n      >\n        <Calendar\n          required={true}\n          {...calendarProps}\n          timeZone={timeZone}\n          onDropdownOpen={onDropdownOpen}\n          mode='single'\n          selected={selectedDate}\n          month={selectedDate}\n          onSelect={handleSelect}\n          onMonthChange={setSelectedDate}\n        />\n      </Popover.Content>\n    </Popover>\n  );\n}\n\nDatePicker.displayName = 'DatePicker';\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAqBA;AAgBgB;;;;;AAiBd;AACA;AACA;AACA;AACA;;AAGE;AACF;AAEA;AACE;;;;AAOF;AAEI;AACA;AAAgC;AAClC;AAIF;AACE;AACA;;AAGF;AACE;;AAGA;;AAE2B;AAC3B;;AAEA;;AAGF;;;;;AAKA;AAEA;AACE;;;;;AAQE;;AAGF;;AAGF;;;AAEE;;;;AAIA;AACE;AACA;AAAgC;;;AAEhC;;;;;;AAOA;AACA;;;;AAKF;AAEA;AACE;AACA;AACE;;;AAIJ;AAEA;;;AAIA;;;AAKA;;AAIE;;;;;;;AAOJ;AAiBA;;AAkCF;AAEA;;"}

package/dist/components/calendar/date-picker.d.ts

@@ -15,5 +15,8 @@ interface DatePickerProps {
     popoverProps?: PopoverContentProps;
 }
 export declare function DatePicker({ dateFormat, inputFieldProps, calendarProps, value, onSelect, children, showCalendarIcon, timeZone, popoverProps }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DatePicker {
+    var displayName: string;
+}
 export {};
 //# sourceMappingURL=date-picker.d.ts.map

package/dist/components/calendar/date-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../components/calendar/date-picker.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAMzD,UAAU,eAAe;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,aAAa,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAChD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,QAAQ,CAAC,EACL,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE;QAAE,YAAY,EAAE,MAAM,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC3D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,mBAAmB,CAAC;CACpC;AAED,wBAAgB,UAAU,CAAC,EACzB,UAAyB,EACzB,eAAe,EACf,aAAa,EACb,KAAkB,EAClB,QAAmB,EACnB,QAAQ,EACR,gBAAuB,EACvB,QAAQ,EACR,YAAY,EACb,EAAE,eAAe,2CA+KjB"}
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../components/calendar/date-picker.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAMzD,UAAU,eAAe;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,aAAa,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAChD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,QAAQ,CAAC,EACL,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE;QAAE,YAAY,EAAE,MAAM,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC3D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,mBAAmB,CAAC;CACpC;AAED,wBAAgB,UAAU,CAAC,EACzB,UAAyB,EACzB,eAAe,EACf,aAAa,EACb,KAAkB,EAClB,QAAmB,EACnB,QAAQ,EACR,gBAAuB,EACvB,QAAQ,EACR,YAAY,EACb,EAAE,eAAe,2CAiLjB;yBA3Le,UAAU"}

package/dist/components/calendar/date-picker.js

@@ -4,7 +4,7 @@ import { CalendarIcon } from '@radix-ui/react-icons';
 import { cx } from 'class-variance-authority';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { useState, useRef, useEffect, useCallback } from 'react';
+import { useState, useRef, useEffect, useCallback, isValidElement } from 'react';
 import { InputField } from '../input-field/input-field.js';
 import { Popover } from '../popover/popover.js';
 import { Calendar } from './calendar.js';
@@ -113,8 +113,9 @@ function DatePicker({ dateFormat = 'DD/MM/YYYY', inputFieldProps, calendarProps,
     }
     const defaultTrigger = (jsx(InputField, { size: 'small', placeholder: 'Select date', error: error, className: styles.datePickerInput, trailingIcon: showCalendarIcon ? jsx(CalendarIcon, {}) : undefined, ...inputFieldProps, ref: inputFieldRef, value: formattedDate, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyUp: handleKeyUp }));
     const trigger = typeof children === 'function' ? (children({ selectedDate: formattedDate })) : children ? (jsx("div", { children: children })) : (jsx("div", { children: defaultTrigger }));
-    return (jsxs(Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsx(Popover.Trigger, { asChild: true, children: trigger }), jsx(Popover.Content, { ref: contentRef, ...popoverProps, className: cx(styles.calendarPopover, popoverProps?.className), side: popoverProps?.side ?? 'top', children: jsx(Calendar, { required: true, ...calendarProps, timeZone: timeZone, onDropdownOpen: onDropdownOpen, mode: 'single', selected: selectedDate, month: selectedDate, onSelect: handleSelect, onMonthChange: setSelectedDate }) })] }));
+    return (jsxs(Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsx(Popover.Trigger, { render: isValidElement(trigger) ? trigger : jsx("button", { children: trigger }) }), jsx(Popover.Content, { ref: contentRef, ...popoverProps, className: cx(styles.calendarPopover, popoverProps?.className), side: popoverProps?.side ?? 'top', children: jsx(Calendar, { required: true, ...calendarProps, timeZone: timeZone, onDropdownOpen: onDropdownOpen, mode: 'single', selected: selectedDate, month: selectedDate, onSelect: handleSelect, onMonthChange: setSelectedDate }) })] }));
 }
+DatePicker.displayName = 'DatePicker';
 
 export { DatePicker };
 //# sourceMappingURL=date-picker.js.map

package/dist/components/calendar/date-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.js","sources":["../../../components/calendar/date-picker.tsx"],"sourcesContent":["'use client';\n\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { cx } from 'class-variance-authority';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { PropsBase, PropsSingleRequired } from 'react-day-picker';\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\nimport { Popover } from '../popover';\nimport { PopoverContentProps } from '../popover/popover';\nimport { Calendar } from './calendar';\nimport styles from './calendar.module.css';\n\ndayjs.extend(customParseFormat);\n\ninterface DatePickerProps {\n  dateFormat?: string;\n  inputFieldProps?: InputFieldProps;\n  calendarProps?: PropsSingleRequired & PropsBase;\n  onSelect?: (date: Date) => void;\n  value?: Date;\n  children?:\n    | React.ReactNode\n    | ((props: { selectedDate: string }) => React.ReactNode);\n  showCalendarIcon?: boolean;\n  timeZone?: string;\n  popoverProps?: PopoverContentProps;\n}\n\nexport function DatePicker({\n  dateFormat = 'DD/MM/YYYY',\n  inputFieldProps,\n  calendarProps,\n  value = new Date(),\n  onSelect = () => {},\n  children,\n  showCalendarIcon = true,\n  timeZone,\n  popoverProps\n}: DatePickerProps) {\n  const [showCalendar, setShowCalendar] = useState(false);\n  const [selectedDate, setSelectedDate] = useState(value);\n  const [error, setError] = useState<string>();\n\n  const formattedDate = dayjs(selectedDate).format(dateFormat);\n\n  const isDropdownOpenRef = useRef(false);\n  const inputFieldRef = useRef<HTMLInputElement | null>(null);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const isInputFieldFocused = useRef(false);\n  const selectedDateRef = useRef(selectedDate);\n\n  useEffect(() => {\n    selectedDateRef.current = selectedDate;\n  }, [selectedDate]);\n\n  const isElementOutside = useCallback((el: HTMLElement) => {\n    return (\n      !isDropdownOpenRef.current && // Month and Year dropdown from Date picker\n      !inputFieldRef.current?.contains(el) && // InputField\n      !contentRef.current?.contains(el)\n    );\n  }, []);\n\n  const handleMouseDown = useCallback(\n    (event: MouseEvent) => {\n      const el = event.target as HTMLElement | null;\n      if (el && isElementOutside(el)) removeEventListeners();\n    },\n    [isElementOutside]\n  );\n\n  function registerEventListeners() {\n    isInputFieldFocused.current = true;\n    document.addEventListener('mouseup', handleMouseDown);\n  }\n\n  function removeEventListeners(skipUpdate = false) {\n    isInputFieldFocused.current = false;\n    setShowCalendar(false);\n\n    const updatedVal = dayjs(selectedDateRef.current).format(dateFormat);\n\n    if (inputFieldRef.current) inputFieldRef.current.value = updatedVal;\n    if (!error && !skipUpdate) onSelect(dayjs(updatedVal).toDate());\n\n    document.removeEventListener('mouseup', handleMouseDown);\n  }\n\n  const handleSelect = (day: Date) => {\n    setSelectedDate(day);\n    onSelect(day);\n    setError(undefined);\n    removeEventListeners(true);\n  };\n\n  function onDropdownOpen() {\n    isDropdownOpenRef.current = true;\n  }\n\n  function onOpenChange(open?: boolean) {\n    if (\n      !isDropdownOpenRef.current &&\n      !(isInputFieldFocused.current && showCalendar)\n    ) {\n      setShowCalendar(Boolean(open));\n    }\n\n    isDropdownOpenRef.current = false;\n  }\n\n  function handleInputFocus() {\n    if (isInputFieldFocused.current) return;\n    if (!showCalendar) setShowCalendar(true);\n  }\n\n  function handleInputBlur(event: React.FocusEvent) {\n    if (isInputFieldFocused.current) {\n      const el = event.relatedTarget as HTMLElement | null;\n      if (el && isElementOutside(el)) removeEventListeners();\n    } else {\n      registerEventListeners();\n      setTimeout(() => inputFieldRef.current?.select());\n    }\n  }\n\n  function handleKeyUp(event: React.KeyboardEvent) {\n    if (event.code === 'Enter' && inputFieldRef.current) {\n      inputFieldRef.current.blur();\n      removeEventListeners();\n    }\n  }\n\n  function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {\n    const { value } = event.target;\n\n    const format = value.includes('/')\n      ? 'DD/MM/YYYY'\n      : value.includes('-')\n        ? 'DD-MM-YYYY'\n        : undefined;\n    const date = dayjs(value, format);\n\n    const isValidDate = date.isValid();\n\n    const isAfter =\n      calendarProps?.startMonth !== undefined\n        ? dayjs(date).isSameOrAfter(calendarProps.startMonth)\n        : true;\n    const isBefore =\n      calendarProps?.endMonth !== undefined\n        ? dayjs(date).isSameOrBefore(calendarProps.endMonth)\n        : true;\n\n    const isValid =\n      isValidDate && isAfter && isBefore && dayjs(date).isSameOrBefore(dayjs());\n\n    if (isValid) {\n      setSelectedDate(date.toDate());\n      setError(undefined);\n    } else {\n      setError('Invalid date');\n    }\n  }\n\n  const defaultTrigger = (\n    <InputField\n      size='small'\n      placeholder='Select date'\n      error={error}\n      className={styles.datePickerInput}\n      trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n      {...inputFieldProps}\n      ref={inputFieldRef}\n      value={formattedDate}\n      onChange={handleInputChange}\n      onFocus={handleInputFocus}\n      onBlur={handleInputBlur}\n      onKeyUp={handleKeyUp}\n    />\n  );\n\n  const trigger =\n    typeof children === 'function' ? (\n      children({ selectedDate: formattedDate })\n    ) : children ? (\n      <div>{children}</div>\n    ) : (\n      <div>{defaultTrigger}</div>\n    );\n\n  return (\n    <Popover open={showCalendar} onOpenChange={onOpenChange}>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n      <Popover.Content\n        ref={contentRef}\n        {...popoverProps}\n        className={cx(styles.calendarPopover, popoverProps?.className)}\n        side={popoverProps?.side ?? 'top'}\n      >\n        <Calendar\n          required={true}\n          {...calendarProps}\n          timeZone={timeZone}\n          onDropdownOpen={onDropdownOpen}\n          mode='single'\n          selected={selectedDate}\n          month={selectedDate}\n          onSelect={handleSelect}\n          onMonthChange={setSelectedDate}\n        />\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAeA;AAgBgB;;;;;AAiBd;AACA;AACA;AACA;AACA;;AAGE;AACF;AAEA;AACE;;;;AAOF;AAEI;AACA;AAAgC;AAClC;AAIF;AACE;AACA;;AAGF;AACE;;AAGA;;AAE2B;AAC3B;;AAEA;;AAGF;;;;;AAKA;AAEA;AACE;;;;;AAQE;;AAGF;;AAGF;;;AAEE;;;;AAIA;AACE;AACA;AAAgC;;;AAEhC;;;;;;AAOA;AACA;;;;AAKF;AAEA;AACE;AACA;AACE;;;AAIJ;AAEA;;;AAIA;;;AAKA;;AAIE;;;;;;;AAOJ;AAiBA;;AAgCF;;"}
+{"version":3,"file":"date-picker.js","sources":["../../../components/calendar/date-picker.tsx"],"sourcesContent":["'use client';\n\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { cx } from 'class-variance-authority';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport {\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport { PropsBase, PropsSingleRequired } from 'react-day-picker';\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\nimport { Popover } from '../popover';\nimport { PopoverContentProps } from '../popover/popover';\nimport { Calendar } from './calendar';\nimport styles from './calendar.module.css';\n\ndayjs.extend(customParseFormat);\n\ninterface DatePickerProps {\n  dateFormat?: string;\n  inputFieldProps?: InputFieldProps;\n  calendarProps?: PropsSingleRequired & PropsBase;\n  onSelect?: (date: Date) => void;\n  value?: Date;\n  children?:\n    | React.ReactNode\n    | ((props: { selectedDate: string }) => React.ReactNode);\n  showCalendarIcon?: boolean;\n  timeZone?: string;\n  popoverProps?: PopoverContentProps;\n}\n\nexport function DatePicker({\n  dateFormat = 'DD/MM/YYYY',\n  inputFieldProps,\n  calendarProps,\n  value = new Date(),\n  onSelect = () => {},\n  children,\n  showCalendarIcon = true,\n  timeZone,\n  popoverProps\n}: DatePickerProps) {\n  const [showCalendar, setShowCalendar] = useState(false);\n  const [selectedDate, setSelectedDate] = useState(value);\n  const [error, setError] = useState<string>();\n\n  const formattedDate = dayjs(selectedDate).format(dateFormat);\n\n  const isDropdownOpenRef = useRef(false);\n  const inputFieldRef = useRef<HTMLInputElement | null>(null);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const isInputFieldFocused = useRef(false);\n  const selectedDateRef = useRef(selectedDate);\n\n  useEffect(() => {\n    selectedDateRef.current = selectedDate;\n  }, [selectedDate]);\n\n  const isElementOutside = useCallback((el: HTMLElement) => {\n    return (\n      !isDropdownOpenRef.current && // Month and Year dropdown from Date picker\n      !inputFieldRef.current?.contains(el) && // InputField\n      !contentRef.current?.contains(el)\n    );\n  }, []);\n\n  const handleMouseDown = useCallback(\n    (event: MouseEvent) => {\n      const el = event.target as HTMLElement | null;\n      if (el && isElementOutside(el)) removeEventListeners();\n    },\n    [isElementOutside]\n  );\n\n  function registerEventListeners() {\n    isInputFieldFocused.current = true;\n    document.addEventListener('mouseup', handleMouseDown);\n  }\n\n  function removeEventListeners(skipUpdate = false) {\n    isInputFieldFocused.current = false;\n    setShowCalendar(false);\n\n    const updatedVal = dayjs(selectedDateRef.current).format(dateFormat);\n\n    if (inputFieldRef.current) inputFieldRef.current.value = updatedVal;\n    if (!error && !skipUpdate) onSelect(dayjs(updatedVal).toDate());\n\n    document.removeEventListener('mouseup', handleMouseDown);\n  }\n\n  const handleSelect = (day: Date) => {\n    setSelectedDate(day);\n    onSelect(day);\n    setError(undefined);\n    removeEventListeners(true);\n  };\n\n  function onDropdownOpen() {\n    isDropdownOpenRef.current = true;\n  }\n\n  function onOpenChange(open?: boolean) {\n    if (\n      !isDropdownOpenRef.current &&\n      !(isInputFieldFocused.current && showCalendar)\n    ) {\n      setShowCalendar(Boolean(open));\n    }\n\n    isDropdownOpenRef.current = false;\n  }\n\n  function handleInputFocus() {\n    if (isInputFieldFocused.current) return;\n    if (!showCalendar) setShowCalendar(true);\n  }\n\n  function handleInputBlur(event: React.FocusEvent) {\n    if (isInputFieldFocused.current) {\n      const el = event.relatedTarget as HTMLElement | null;\n      if (el && isElementOutside(el)) removeEventListeners();\n    } else {\n      registerEventListeners();\n      setTimeout(() => inputFieldRef.current?.select());\n    }\n  }\n\n  function handleKeyUp(event: React.KeyboardEvent) {\n    if (event.code === 'Enter' && inputFieldRef.current) {\n      inputFieldRef.current.blur();\n      removeEventListeners();\n    }\n  }\n\n  function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {\n    const { value } = event.target;\n\n    const format = value.includes('/')\n      ? 'DD/MM/YYYY'\n      : value.includes('-')\n        ? 'DD-MM-YYYY'\n        : undefined;\n    const date = dayjs(value, format);\n\n    const isValidDate = date.isValid();\n\n    const isAfter =\n      calendarProps?.startMonth !== undefined\n        ? dayjs(date).isSameOrAfter(calendarProps.startMonth)\n        : true;\n    const isBefore =\n      calendarProps?.endMonth !== undefined\n        ? dayjs(date).isSameOrBefore(calendarProps.endMonth)\n        : true;\n\n    const isValid =\n      isValidDate && isAfter && isBefore && dayjs(date).isSameOrBefore(dayjs());\n\n    if (isValid) {\n      setSelectedDate(date.toDate());\n      setError(undefined);\n    } else {\n      setError('Invalid date');\n    }\n  }\n\n  const defaultTrigger = (\n    <InputField\n      size='small'\n      placeholder='Select date'\n      error={error}\n      className={styles.datePickerInput}\n      trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n      {...inputFieldProps}\n      ref={inputFieldRef}\n      value={formattedDate}\n      onChange={handleInputChange}\n      onFocus={handleInputFocus}\n      onBlur={handleInputBlur}\n      onKeyUp={handleKeyUp}\n    />\n  );\n\n  const trigger =\n    typeof children === 'function' ? (\n      children({ selectedDate: formattedDate })\n    ) : children ? (\n      <div>{children}</div>\n    ) : (\n      <div>{defaultTrigger}</div>\n    );\n\n  return (\n    <Popover open={showCalendar} onOpenChange={onOpenChange}>\n      <Popover.Trigger\n        render={isValidElement(trigger) ? trigger : <button>{trigger}</button>}\n      />\n      <Popover.Content\n        ref={contentRef}\n        {...popoverProps}\n        className={cx(styles.calendarPopover, popoverProps?.className)}\n        side={popoverProps?.side ?? 'top'}\n      >\n        <Calendar\n          required={true}\n          {...calendarProps}\n          timeZone={timeZone}\n          onDropdownOpen={onDropdownOpen}\n          mode='single'\n          selected={selectedDate}\n          month={selectedDate}\n          onSelect={handleSelect}\n          onMonthChange={setSelectedDate}\n        />\n      </Popover.Content>\n    </Popover>\n  );\n}\n\nDatePicker.displayName = 'DatePicker';\n"],"names":[],"mappings":";;;;;;;;;;;;AAqBA;AAgBgB;;;;;AAiBd;AACA;AACA;AACA;AACA;;AAGE;AACF;AAEA;AACE;;;;AAOF;AAEI;AACA;AAAgC;AAClC;AAIF;AACE;AACA;;AAGF;AACE;;AAGA;;AAE2B;AAC3B;;AAEA;;AAGF;;;;;AAKA;AAEA;AACE;;;;;AAQE;;AAGF;;AAGF;;;AAEE;;;;AAIA;AACE;AACA;AAAgC;;;AAEhC;;;;;;AAOA;AACA;;;;AAKF;AAEA;AACE;AACA;AACE;;;AAIJ;AAEA;;;AAIA;;;AAKA;;AAIE;;;;;;;AAOJ;AAiBA;;AAkCF;AAEA;;"}

package/dist/components/calendar/range-picker.cjs

@@ -89,8 +89,9 @@ function RangePicker({ dateFormat = 'DD/MM/YYYY', inputFieldsProps = {}, calenda
     const trigger = typeof children === 'function'
         ? children({ startDate, endDate })
         : children || defaultTrigger;
-    return (jsxRuntime.jsxs(popover.Popover, { open: showCalendar, onOpenChange: setShowCalendar, children: [jsxRuntime.jsx(popover.Popover.Trigger, { asChild: true, children: trigger }), jsxRuntime.jsxs(popover.Popover.Content, { ...popoverProps, className: classVarianceAuthority.cx(calendar_module.default.calendarPopover, popoverProps?.className), side: popoverProps?.side ?? 'top', children: [jsxRuntime.jsx(calendar.Calendar, { showOutsideDays: false, numberOfMonths: 2, defaultMonth: selectedRange.from, required: true, ...calendarProps, timeZone: timeZone, mode: 'range', month: computedDefaultMonth, selected: selectedRange, onSelect: handleSelect, onMonthChange: setCurrentMonth }), footer && (jsxRuntime.jsx(flex.Flex, { align: 'center', justify: 'center', className: calendar_module.default.calendarFooter, children: footer }))] })] }));
+    return (jsxRuntime.jsxs(popover.Popover, { open: showCalendar, onOpenChange: setShowCalendar, children: [jsxRuntime.jsx(popover.Popover.Trigger, { render: React.isValidElement(trigger) ? trigger : jsxRuntime.jsx("button", { children: trigger }) }), jsxRuntime.jsxs(popover.Popover.Content, { ...popoverProps, className: classVarianceAuthority.cx(calendar_module.default.calendarPopover, popoverProps?.className), side: popoverProps?.side ?? 'top', children: [jsxRuntime.jsx(calendar.Calendar, { showOutsideDays: false, numberOfMonths: 2, defaultMonth: selectedRange.from, required: true, ...calendarProps, timeZone: timeZone, mode: 'range', month: computedDefaultMonth, selected: selectedRange, onSelect: handleSelect, onMonthChange: setCurrentMonth }), footer && (jsxRuntime.jsx(flex.Flex, { align: 'center', justify: 'center', className: calendar_module.default.calendarFooter, children: footer }))] })] }));
 }
+RangePicker.displayName = 'RangePicker';
 
 exports.RangePicker = RangePicker;
 //# sourceMappingURL=range-picker.cjs.map

package/dist/components/calendar/range-picker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"range-picker.cjs","sources":["../../../components/calendar/range-picker.tsx"],"sourcesContent":["'use client';\n\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { cx } from 'class-variance-authority';\nimport dayjs from 'dayjs';\nimport { useCallback, useMemo, useState } from 'react';\nimport { DateRange, PropsBase, PropsRangeRequired } from 'react-day-picker';\nimport { Flex } from '../flex';\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\nimport { Popover } from '../popover';\nimport { PopoverContentProps } from '../popover/popover';\nimport { Calendar } from './calendar';\nimport styles from './calendar.module.css';\n\ninterface RangePickerProps {\n  dateFormat?: string;\n  inputFieldsProps?: { startDate?: InputFieldProps; endDate?: InputFieldProps };\n  calendarProps?: PropsRangeRequired & PropsBase;\n  onSelect?: (date: DateRange) => void;\n  pickerGroupClassName?: string;\n  value?: DateRange;\n  defaultValue?: DateRange;\n  children?:\n    | React.ReactNode\n    | ((props: { startDate: string; endDate: string }) => React.ReactNode);\n  showCalendarIcon?: boolean;\n  footer?: React.ReactNode;\n  timeZone?: string;\n  popoverProps?: PopoverContentProps;\n}\n\ntype RangeFields = keyof DateRange;\n\nexport function RangePicker({\n  dateFormat = 'DD/MM/YYYY',\n  inputFieldsProps = {},\n  calendarProps,\n  onSelect = () => {},\n  value,\n  defaultValue = {\n    to: new Date(),\n    from: new Date()\n  },\n  pickerGroupClassName,\n  children,\n  showCalendarIcon = true,\n  footer,\n  timeZone,\n  popoverProps\n}: RangePickerProps) {\n  const [showCalendar, setShowCalendar] = useState(false);\n  const [currentRangeField, setCurrentRangeField] =\n    useState<RangeFields>('from');\n  const [internalValue, setInternalValue] = useState(value ?? defaultValue);\n  const [currentMonth, setCurrentMonth] = useState(internalValue?.from);\n\n  const selectedRange = value ?? internalValue;\n\n  const startDate = selectedRange.from\n    ? dayjs(selectedRange.from).format(dateFormat)\n    : '';\n  const endDate = selectedRange.to\n    ? dayjs(selectedRange.to).format(dateFormat)\n    : '';\n\n  // Ensures two months are visible even when\n  // current month is the last allowed month (endMonth).\n  const computedDefaultMonth = useMemo(() => {\n    let month = currentMonth;\n    if (calendarProps?.endMonth) {\n      const endMonth = dayjs(calendarProps.endMonth);\n      const fromMonth = dayjs(currentMonth);\n\n      if (fromMonth.isSame(endMonth, 'month')) {\n        month = endMonth.subtract(1, 'month').toDate();\n      }\n    }\n    return month;\n  }, [currentMonth, calendarProps?.endMonth]);\n\n  const onTriggerClick = useCallback(\n    (e: React.MouseEvent<HTMLInputElement>) => {\n      const field = e.currentTarget.dataset.rangeField;\n      if (field === 'start') {\n        setCurrentRangeField('from');\n      } else {\n        setCurrentRangeField('to');\n      }\n      if (showCalendar) {\n        e.preventDefault();\n        e.stopPropagation();\n      }\n    },\n    [showCalendar]\n  );\n\n  // Handle date selection with custom logic\n  const handleSelect = (_: DateRange, selectedDay: Date) => {\n    let newRange = { ...selectedRange };\n    let newCurrentRangeField = currentRangeField;\n\n    if (currentRangeField === 'from') {\n      // If selecting start date and it's after the current end date\n      if (\n        selectedRange?.to &&\n        dayjs(selectedDay).isAfter(dayjs(selectedRange.to))\n      ) {\n        newRange = { from: selectedDay };\n        newCurrentRangeField = 'to';\n      } else {\n        newRange.from = selectedDay;\n        if (!selectedRange?.to) newCurrentRangeField = 'to';\n      }\n    } else {\n      // If selecting end date and it's before the current start date\n      if (\n        selectedRange?.from &&\n        dayjs(selectedDay).isBefore(dayjs(selectedRange.from))\n      ) {\n        newRange = { from: selectedDay };\n        newCurrentRangeField = 'to';\n      } else newRange.to = selectedDay;\n    }\n\n    if (newCurrentRangeField !== currentRangeField)\n      setCurrentRangeField(newCurrentRangeField);\n\n    setInternalValue(newRange);\n    onSelect(newRange);\n  };\n\n  const defaultTrigger = (\n    <Flex gap='medium' className={pickerGroupClassName}>\n      <InputField\n        size='small'\n        placeholder='Select start date'\n        trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n        className={styles.datePickerInput}\n        {...(inputFieldsProps.startDate ?? {})}\n        value={startDate}\n        readOnly\n        data-range-field='start'\n        data-active={showCalendar && currentRangeField === 'from'}\n        onClick={onTriggerClick}\n      />\n\n      <InputField\n        size='small'\n        placeholder='Select end date'\n        trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n        className={styles.datePickerInput}\n        {...(inputFieldsProps.endDate ?? {})}\n        value={endDate}\n        readOnly\n        data-range-field='end'\n        data-active={showCalendar && currentRangeField === 'to'}\n        onClick={onTriggerClick}\n      />\n    </Flex>\n  );\n\n  const trigger =\n    typeof children === 'function'\n      ? children({ startDate, endDate })\n      : children || defaultTrigger;\n\n  return (\n    <Popover open={showCalendar} onOpenChange={setShowCalendar}>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n      <Popover.Content\n        {...popoverProps}\n        className={cx(styles.calendarPopover, popoverProps?.className)}\n        side={popoverProps?.side ?? 'top'}\n      >\n        <Calendar\n          showOutsideDays={false}\n          numberOfMonths={2}\n          defaultMonth={selectedRange.from}\n          required={true}\n          {...calendarProps}\n          timeZone={timeZone}\n          mode='range'\n          month={computedDefaultMonth}\n          selected={selectedRange}\n          onSelect={handleSelect}\n          onMonthChange={setCurrentMonth}\n        />\n        {footer && (\n          <Flex\n            align='center'\n            justify='center'\n            className={styles.calendarFooter}\n          >\n            {footer}\n          </Flex>\n        )}\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAkCM;;;AASH;;;AAWD;AACA;AAEA;AAEA;;;AAGA;;;;;AAMA;;AAEE;;AAEE;;AAGE;;;AAGJ;;AAGF;;AAGI;;;;;;;;;;AASF;;AAKF;AACE;;AAGA;;;AAII;AAEA;;;;AAGA;;;;;;;;AAOA;AAEA;;;;AAEK;;;;;;AAQX;AAEA;AA8BA;;AAGI;AAEJ;AAiCF;;"}
+{"version":3,"file":"range-picker.cjs","sources":["../../../components/calendar/range-picker.tsx"],"sourcesContent":["'use client';\n\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { cx } from 'class-variance-authority';\nimport dayjs from 'dayjs';\nimport { isValidElement, useCallback, useMemo, useState } from 'react';\nimport { DateRange, PropsBase, PropsRangeRequired } from 'react-day-picker';\nimport { Flex } from '../flex';\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\nimport { Popover } from '../popover';\nimport { PopoverContentProps } from '../popover/popover';\nimport { Calendar } from './calendar';\nimport styles from './calendar.module.css';\n\ninterface RangePickerProps {\n  dateFormat?: string;\n  inputFieldsProps?: { startDate?: InputFieldProps; endDate?: InputFieldProps };\n  calendarProps?: PropsRangeRequired & PropsBase;\n  onSelect?: (date: DateRange) => void;\n  pickerGroupClassName?: string;\n  value?: DateRange;\n  defaultValue?: DateRange;\n  children?:\n    | React.ReactNode\n    | ((props: { startDate: string; endDate: string }) => React.ReactNode);\n  showCalendarIcon?: boolean;\n  footer?: React.ReactNode;\n  timeZone?: string;\n  popoverProps?: PopoverContentProps;\n}\n\ntype RangeFields = keyof DateRange;\n\nexport function RangePicker({\n  dateFormat = 'DD/MM/YYYY',\n  inputFieldsProps = {},\n  calendarProps,\n  onSelect = () => {},\n  value,\n  defaultValue = {\n    to: new Date(),\n    from: new Date()\n  },\n  pickerGroupClassName,\n  children,\n  showCalendarIcon = true,\n  footer,\n  timeZone,\n  popoverProps\n}: RangePickerProps) {\n  const [showCalendar, setShowCalendar] = useState(false);\n  const [currentRangeField, setCurrentRangeField] =\n    useState<RangeFields>('from');\n  const [internalValue, setInternalValue] = useState(value ?? defaultValue);\n  const [currentMonth, setCurrentMonth] = useState(internalValue?.from);\n\n  const selectedRange = value ?? internalValue;\n\n  const startDate = selectedRange.from\n    ? dayjs(selectedRange.from).format(dateFormat)\n    : '';\n  const endDate = selectedRange.to\n    ? dayjs(selectedRange.to).format(dateFormat)\n    : '';\n\n  // Ensures two months are visible even when\n  // current month is the last allowed month (endMonth).\n  const computedDefaultMonth = useMemo(() => {\n    let month = currentMonth;\n    if (calendarProps?.endMonth) {\n      const endMonth = dayjs(calendarProps.endMonth);\n      const fromMonth = dayjs(currentMonth);\n\n      if (fromMonth.isSame(endMonth, 'month')) {\n        month = endMonth.subtract(1, 'month').toDate();\n      }\n    }\n    return month;\n  }, [currentMonth, calendarProps?.endMonth]);\n\n  const onTriggerClick = useCallback(\n    (e: React.MouseEvent<HTMLInputElement>) => {\n      const field = e.currentTarget.dataset.rangeField;\n      if (field === 'start') {\n        setCurrentRangeField('from');\n      } else {\n        setCurrentRangeField('to');\n      }\n      if (showCalendar) {\n        e.preventDefault();\n        e.stopPropagation();\n      }\n    },\n    [showCalendar]\n  );\n\n  // Handle date selection with custom logic\n  const handleSelect = (_: DateRange, selectedDay: Date) => {\n    let newRange = { ...selectedRange };\n    let newCurrentRangeField = currentRangeField;\n\n    if (currentRangeField === 'from') {\n      // If selecting start date and it's after the current end date\n      if (\n        selectedRange?.to &&\n        dayjs(selectedDay).isAfter(dayjs(selectedRange.to))\n      ) {\n        newRange = { from: selectedDay };\n        newCurrentRangeField = 'to';\n      } else {\n        newRange.from = selectedDay;\n        if (!selectedRange?.to) newCurrentRangeField = 'to';\n      }\n    } else {\n      // If selecting end date and it's before the current start date\n      if (\n        selectedRange?.from &&\n        dayjs(selectedDay).isBefore(dayjs(selectedRange.from))\n      ) {\n        newRange = { from: selectedDay };\n        newCurrentRangeField = 'to';\n      } else newRange.to = selectedDay;\n    }\n\n    if (newCurrentRangeField !== currentRangeField)\n      setCurrentRangeField(newCurrentRangeField);\n\n    setInternalValue(newRange);\n    onSelect(newRange);\n  };\n\n  const defaultTrigger = (\n    <Flex gap='medium' className={pickerGroupClassName}>\n      <InputField\n        size='small'\n        placeholder='Select start date'\n        trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n        className={styles.datePickerInput}\n        {...(inputFieldsProps.startDate ?? {})}\n        value={startDate}\n        readOnly\n        data-range-field='start'\n        data-active={showCalendar && currentRangeField === 'from'}\n        onClick={onTriggerClick}\n      />\n\n      <InputField\n        size='small'\n        placeholder='Select end date'\n        trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n        className={styles.datePickerInput}\n        {...(inputFieldsProps.endDate ?? {})}\n        value={endDate}\n        readOnly\n        data-range-field='end'\n        data-active={showCalendar && currentRangeField === 'to'}\n        onClick={onTriggerClick}\n      />\n    </Flex>\n  );\n\n  const trigger =\n    typeof children === 'function'\n      ? children({ startDate, endDate })\n      : children || defaultTrigger;\n\n  return (\n    <Popover open={showCalendar} onOpenChange={setShowCalendar}>\n      <Popover.Trigger\n        render={isValidElement(trigger) ? trigger : <button>{trigger}</button>}\n      />\n      <Popover.Content\n        {...popoverProps}\n        className={cx(styles.calendarPopover, popoverProps?.className)}\n        side={popoverProps?.side ?? 'top'}\n      >\n        <Calendar\n          showOutsideDays={false}\n          numberOfMonths={2}\n          defaultMonth={selectedRange.from}\n          required={true}\n          {...calendarProps}\n          timeZone={timeZone}\n          mode='range'\n          month={computedDefaultMonth}\n          selected={selectedRange}\n          onSelect={handleSelect}\n          onMonthChange={setCurrentMonth}\n        />\n        {footer && (\n          <Flex\n            align='center'\n            justify='center'\n            className={styles.calendarFooter}\n          >\n            {footer}\n          </Flex>\n        )}\n      </Popover.Content>\n    </Popover>\n  );\n}\n\nRangePicker.displayName = 'RangePicker';\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAkCM;;;AASH;;;AAWD;AACA;AAEA;AAEA;;;AAGA;;;;;AAMA;;AAEE;;AAEE;;AAGE;;;AAGJ;;AAGF;;AAGI;;;;;;;;;;AASF;;AAKF;AACE;;AAGA;;;AAII;AAEA;;;;AAGA;;;;;;;;AAOA;AAEA;;;;AAEK;;;;;;AAQX;AAEA;AA8BA;;AAGI;AAEJ;AAmCF;AAEA;;"}

package/dist/components/calendar/range-picker.d.ts

@@ -22,5 +22,8 @@ interface RangePickerProps {
     popoverProps?: PopoverContentProps;
 }
 export declare function RangePicker({ dateFormat, inputFieldsProps, calendarProps, onSelect, value, defaultValue, pickerGroupClassName, children, showCalendarIcon, footer, timeZone, popoverProps }: RangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace RangePicker {
+    var displayName: string;
+}
 export {};
 //# sourceMappingURL=range-picker.d.ts.map

package/dist/components/calendar/range-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"range-picker.d.ts","sourceRoot":"","sources":["../../../components/calendar/range-picker.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAG5E,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAIzD,UAAU,gBAAgB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,eAAe,CAAC;QAAC,OAAO,CAAC,EAAE,eAAe,CAAA;KAAE,CAAC;IAC9E,aAAa,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAC;IAC/C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EACL,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACzE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,mBAAmB,CAAC;CACpC;AAID,wBAAgB,WAAW,CAAC,EAC1B,UAAyB,EACzB,gBAAqB,EACrB,aAAa,EACb,QAAmB,EACnB,KAAK,EACL,YAGC,EACD,oBAAoB,EACpB,QAAQ,EACR,gBAAuB,EACvB,MAAM,EACN,QAAQ,EACR,YAAY,EACb,EAAE,gBAAgB,2CAsJlB"}
+{"version":3,"file":"range-picker.d.ts","sourceRoot":"","sources":["../../../components/calendar/range-picker.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAG5E,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAIzD,UAAU,gBAAgB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,eAAe,CAAC;QAAC,OAAO,CAAC,EAAE,eAAe,CAAA;KAAE,CAAC;IAC9E,aAAa,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAC;IAC/C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EACL,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACzE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,mBAAmB,CAAC;CACpC;AAID,wBAAgB,WAAW,CAAC,EAC1B,UAAyB,EACzB,gBAAqB,EACrB,aAAa,EACb,QAAmB,EACnB,KAAK,EACL,YAGC,EACD,oBAAoB,EACpB,QAAQ,EACR,gBAAuB,EACvB,MAAM,EACN,QAAQ,EACR,YAAY,EACb,EAAE,gBAAgB,2CAwJlB;yBAxKe,WAAW"}

package/dist/components/calendar/range-picker.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { CalendarIcon } from '@radix-ui/react-icons';
 import { cx } from 'class-variance-authority';
 import dayjs from 'dayjs';
-import { useState, useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback, isValidElement } from 'react';
 import { Flex } from '../flex/flex.js';
 import { InputField } from '../input-field/input-field.js';
 import { Popover } from '../popover/popover.js';
@@ -87,8 +87,9 @@ function RangePicker({ dateFormat = 'DD/MM/YYYY', inputFieldsProps = {}, calenda
     const trigger = typeof children === 'function'
         ? children({ startDate, endDate })
         : children || defaultTrigger;
-    return (jsxs(Popover, { open: showCalendar, onOpenChange: setShowCalendar, children: [jsx(Popover.Trigger, { asChild: true, children: trigger }), jsxs(Popover.Content, { ...popoverProps, className: cx(styles.calendarPopover, popoverProps?.className), side: popoverProps?.side ?? 'top', children: [jsx(Calendar, { showOutsideDays: false, numberOfMonths: 2, defaultMonth: selectedRange.from, required: true, ...calendarProps, timeZone: timeZone, mode: 'range', month: computedDefaultMonth, selected: selectedRange, onSelect: handleSelect, onMonthChange: setCurrentMonth }), footer && (jsx(Flex, { align: 'center', justify: 'center', className: styles.calendarFooter, children: footer }))] })] }));
+    return (jsxs(Popover, { open: showCalendar, onOpenChange: setShowCalendar, children: [jsx(Popover.Trigger, { render: isValidElement(trigger) ? trigger : jsx("button", { children: trigger }) }), jsxs(Popover.Content, { ...popoverProps, className: cx(styles.calendarPopover, popoverProps?.className), side: popoverProps?.side ?? 'top', children: [jsx(Calendar, { showOutsideDays: false, numberOfMonths: 2, defaultMonth: selectedRange.from, required: true, ...calendarProps, timeZone: timeZone, mode: 'range', month: computedDefaultMonth, selected: selectedRange, onSelect: handleSelect, onMonthChange: setCurrentMonth }), footer && (jsx(Flex, { align: 'center', justify: 'center', className: styles.calendarFooter, children: footer }))] })] }));
 }
+RangePicker.displayName = 'RangePicker';
 
 export { RangePicker };
 //# sourceMappingURL=range-picker.js.map

package/dist/components/calendar/range-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"range-picker.js","sources":["../../../components/calendar/range-picker.tsx"],"sourcesContent":["'use client';\n\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { cx } from 'class-variance-authority';\nimport dayjs from 'dayjs';\nimport { useCallback, useMemo, useState } from 'react';\nimport { DateRange, PropsBase, PropsRangeRequired } from 'react-day-picker';\nimport { Flex } from '../flex';\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\nimport { Popover } from '../popover';\nimport { PopoverContentProps } from '../popover/popover';\nimport { Calendar } from './calendar';\nimport styles from './calendar.module.css';\n\ninterface RangePickerProps {\n  dateFormat?: string;\n  inputFieldsProps?: { startDate?: InputFieldProps; endDate?: InputFieldProps };\n  calendarProps?: PropsRangeRequired & PropsBase;\n  onSelect?: (date: DateRange) => void;\n  pickerGroupClassName?: string;\n  value?: DateRange;\n  defaultValue?: DateRange;\n  children?:\n    | React.ReactNode\n    | ((props: { startDate: string; endDate: string }) => React.ReactNode);\n  showCalendarIcon?: boolean;\n  footer?: React.ReactNode;\n  timeZone?: string;\n  popoverProps?: PopoverContentProps;\n}\n\ntype RangeFields = keyof DateRange;\n\nexport function RangePicker({\n  dateFormat = 'DD/MM/YYYY',\n  inputFieldsProps = {},\n  calendarProps,\n  onSelect = () => {},\n  value,\n  defaultValue = {\n    to: new Date(),\n    from: new Date()\n  },\n  pickerGroupClassName,\n  children,\n  showCalendarIcon = true,\n  footer,\n  timeZone,\n  popoverProps\n}: RangePickerProps) {\n  const [showCalendar, setShowCalendar] = useState(false);\n  const [currentRangeField, setCurrentRangeField] =\n    useState<RangeFields>('from');\n  const [internalValue, setInternalValue] = useState(value ?? defaultValue);\n  const [currentMonth, setCurrentMonth] = useState(internalValue?.from);\n\n  const selectedRange = value ?? internalValue;\n\n  const startDate = selectedRange.from\n    ? dayjs(selectedRange.from).format(dateFormat)\n    : '';\n  const endDate = selectedRange.to\n    ? dayjs(selectedRange.to).format(dateFormat)\n    : '';\n\n  // Ensures two months are visible even when\n  // current month is the last allowed month (endMonth).\n  const computedDefaultMonth = useMemo(() => {\n    let month = currentMonth;\n    if (calendarProps?.endMonth) {\n      const endMonth = dayjs(calendarProps.endMonth);\n      const fromMonth = dayjs(currentMonth);\n\n      if (fromMonth.isSame(endMonth, 'month')) {\n        month = endMonth.subtract(1, 'month').toDate();\n      }\n    }\n    return month;\n  }, [currentMonth, calendarProps?.endMonth]);\n\n  const onTriggerClick = useCallback(\n    (e: React.MouseEvent<HTMLInputElement>) => {\n      const field = e.currentTarget.dataset.rangeField;\n      if (field === 'start') {\n        setCurrentRangeField('from');\n      } else {\n        setCurrentRangeField('to');\n      }\n      if (showCalendar) {\n        e.preventDefault();\n        e.stopPropagation();\n      }\n    },\n    [showCalendar]\n  );\n\n  // Handle date selection with custom logic\n  const handleSelect = (_: DateRange, selectedDay: Date) => {\n    let newRange = { ...selectedRange };\n    let newCurrentRangeField = currentRangeField;\n\n    if (currentRangeField === 'from') {\n      // If selecting start date and it's after the current end date\n      if (\n        selectedRange?.to &&\n        dayjs(selectedDay).isAfter(dayjs(selectedRange.to))\n      ) {\n        newRange = { from: selectedDay };\n        newCurrentRangeField = 'to';\n      } else {\n        newRange.from = selectedDay;\n        if (!selectedRange?.to) newCurrentRangeField = 'to';\n      }\n    } else {\n      // If selecting end date and it's before the current start date\n      if (\n        selectedRange?.from &&\n        dayjs(selectedDay).isBefore(dayjs(selectedRange.from))\n      ) {\n        newRange = { from: selectedDay };\n        newCurrentRangeField = 'to';\n      } else newRange.to = selectedDay;\n    }\n\n    if (newCurrentRangeField !== currentRangeField)\n      setCurrentRangeField(newCurrentRangeField);\n\n    setInternalValue(newRange);\n    onSelect(newRange);\n  };\n\n  const defaultTrigger = (\n    <Flex gap='medium' className={pickerGroupClassName}>\n      <InputField\n        size='small'\n        placeholder='Select start date'\n        trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n        className={styles.datePickerInput}\n        {...(inputFieldsProps.startDate ?? {})}\n        value={startDate}\n        readOnly\n        data-range-field='start'\n        data-active={showCalendar && currentRangeField === 'from'}\n        onClick={onTriggerClick}\n      />\n\n      <InputField\n        size='small'\n        placeholder='Select end date'\n        trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n        className={styles.datePickerInput}\n        {...(inputFieldsProps.endDate ?? {})}\n        value={endDate}\n        readOnly\n        data-range-field='end'\n        data-active={showCalendar && currentRangeField === 'to'}\n        onClick={onTriggerClick}\n      />\n    </Flex>\n  );\n\n  const trigger =\n    typeof children === 'function'\n      ? children({ startDate, endDate })\n      : children || defaultTrigger;\n\n  return (\n    <Popover open={showCalendar} onOpenChange={setShowCalendar}>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n      <Popover.Content\n        {...popoverProps}\n        className={cx(styles.calendarPopover, popoverProps?.className)}\n        side={popoverProps?.side ?? 'top'}\n      >\n        <Calendar\n          showOutsideDays={false}\n          numberOfMonths={2}\n          defaultMonth={selectedRange.from}\n          required={true}\n          {...calendarProps}\n          timeZone={timeZone}\n          mode='range'\n          month={computedDefaultMonth}\n          selected={selectedRange}\n          onSelect={handleSelect}\n          onMonthChange={setCurrentMonth}\n        />\n        {footer && (\n          <Flex\n            align='center'\n            justify='center'\n            className={styles.calendarFooter}\n          >\n            {footer}\n          </Flex>\n        )}\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAkCM;;;AASH;;;AAWD;AACA;AAEA;AAEA;;;AAGA;;;;;AAMA;;AAEE;;AAEE;;AAGE;;;AAGJ;;AAGF;;AAGI;;;;;;;;;;AASF;;AAKF;AACE;;AAGA;;;AAII;AAEA;;;;AAGA;;;;;;;;AAOA;AAEA;;;;AAEK;;;;;;AAQX;AAEA;AA8BA;;AAGI;AAEJ;AAiCF;;"}
+{"version":3,"file":"range-picker.js","sources":["../../../components/calendar/range-picker.tsx"],"sourcesContent":["'use client';\n\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { cx } from 'class-variance-authority';\nimport dayjs from 'dayjs';\nimport { isValidElement, useCallback, useMemo, useState } from 'react';\nimport { DateRange, PropsBase, PropsRangeRequired } from 'react-day-picker';\nimport { Flex } from '../flex';\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\nimport { Popover } from '../popover';\nimport { PopoverContentProps } from '../popover/popover';\nimport { Calendar } from './calendar';\nimport styles from './calendar.module.css';\n\ninterface RangePickerProps {\n  dateFormat?: string;\n  inputFieldsProps?: { startDate?: InputFieldProps; endDate?: InputFieldProps };\n  calendarProps?: PropsRangeRequired & PropsBase;\n  onSelect?: (date: DateRange) => void;\n  pickerGroupClassName?: string;\n  value?: DateRange;\n  defaultValue?: DateRange;\n  children?:\n    | React.ReactNode\n    | ((props: { startDate: string; endDate: string }) => React.ReactNode);\n  showCalendarIcon?: boolean;\n  footer?: React.ReactNode;\n  timeZone?: string;\n  popoverProps?: PopoverContentProps;\n}\n\ntype RangeFields = keyof DateRange;\n\nexport function RangePicker({\n  dateFormat = 'DD/MM/YYYY',\n  inputFieldsProps = {},\n  calendarProps,\n  onSelect = () => {},\n  value,\n  defaultValue = {\n    to: new Date(),\n    from: new Date()\n  },\n  pickerGroupClassName,\n  children,\n  showCalendarIcon = true,\n  footer,\n  timeZone,\n  popoverProps\n}: RangePickerProps) {\n  const [showCalendar, setShowCalendar] = useState(false);\n  const [currentRangeField, setCurrentRangeField] =\n    useState<RangeFields>('from');\n  const [internalValue, setInternalValue] = useState(value ?? defaultValue);\n  const [currentMonth, setCurrentMonth] = useState(internalValue?.from);\n\n  const selectedRange = value ?? internalValue;\n\n  const startDate = selectedRange.from\n    ? dayjs(selectedRange.from).format(dateFormat)\n    : '';\n  const endDate = selectedRange.to\n    ? dayjs(selectedRange.to).format(dateFormat)\n    : '';\n\n  // Ensures two months are visible even when\n  // current month is the last allowed month (endMonth).\n  const computedDefaultMonth = useMemo(() => {\n    let month = currentMonth;\n    if (calendarProps?.endMonth) {\n      const endMonth = dayjs(calendarProps.endMonth);\n      const fromMonth = dayjs(currentMonth);\n\n      if (fromMonth.isSame(endMonth, 'month')) {\n        month = endMonth.subtract(1, 'month').toDate();\n      }\n    }\n    return month;\n  }, [currentMonth, calendarProps?.endMonth]);\n\n  const onTriggerClick = useCallback(\n    (e: React.MouseEvent<HTMLInputElement>) => {\n      const field = e.currentTarget.dataset.rangeField;\n      if (field === 'start') {\n        setCurrentRangeField('from');\n      } else {\n        setCurrentRangeField('to');\n      }\n      if (showCalendar) {\n        e.preventDefault();\n        e.stopPropagation();\n      }\n    },\n    [showCalendar]\n  );\n\n  // Handle date selection with custom logic\n  const handleSelect = (_: DateRange, selectedDay: Date) => {\n    let newRange = { ...selectedRange };\n    let newCurrentRangeField = currentRangeField;\n\n    if (currentRangeField === 'from') {\n      // If selecting start date and it's after the current end date\n      if (\n        selectedRange?.to &&\n        dayjs(selectedDay).isAfter(dayjs(selectedRange.to))\n      ) {\n        newRange = { from: selectedDay };\n        newCurrentRangeField = 'to';\n      } else {\n        newRange.from = selectedDay;\n        if (!selectedRange?.to) newCurrentRangeField = 'to';\n      }\n    } else {\n      // If selecting end date and it's before the current start date\n      if (\n        selectedRange?.from &&\n        dayjs(selectedDay).isBefore(dayjs(selectedRange.from))\n      ) {\n        newRange = { from: selectedDay };\n        newCurrentRangeField = 'to';\n      } else newRange.to = selectedDay;\n    }\n\n    if (newCurrentRangeField !== currentRangeField)\n      setCurrentRangeField(newCurrentRangeField);\n\n    setInternalValue(newRange);\n    onSelect(newRange);\n  };\n\n  const defaultTrigger = (\n    <Flex gap='medium' className={pickerGroupClassName}>\n      <InputField\n        size='small'\n        placeholder='Select start date'\n        trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n        className={styles.datePickerInput}\n        {...(inputFieldsProps.startDate ?? {})}\n        value={startDate}\n        readOnly\n        data-range-field='start'\n        data-active={showCalendar && currentRangeField === 'from'}\n        onClick={onTriggerClick}\n      />\n\n      <InputField\n        size='small'\n        placeholder='Select end date'\n        trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n        className={styles.datePickerInput}\n        {...(inputFieldsProps.endDate ?? {})}\n        value={endDate}\n        readOnly\n        data-range-field='end'\n        data-active={showCalendar && currentRangeField === 'to'}\n        onClick={onTriggerClick}\n      />\n    </Flex>\n  );\n\n  const trigger =\n    typeof children === 'function'\n      ? children({ startDate, endDate })\n      : children || defaultTrigger;\n\n  return (\n    <Popover open={showCalendar} onOpenChange={setShowCalendar}>\n      <Popover.Trigger\n        render={isValidElement(trigger) ? trigger : <button>{trigger}</button>}\n      />\n      <Popover.Content\n        {...popoverProps}\n        className={cx(styles.calendarPopover, popoverProps?.className)}\n        side={popoverProps?.side ?? 'top'}\n      >\n        <Calendar\n          showOutsideDays={false}\n          numberOfMonths={2}\n          defaultMonth={selectedRange.from}\n          required={true}\n          {...calendarProps}\n          timeZone={timeZone}\n          mode='range'\n          month={computedDefaultMonth}\n          selected={selectedRange}\n          onSelect={handleSelect}\n          onMonthChange={setCurrentMonth}\n        />\n        {footer && (\n          <Flex\n            align='center'\n            justify='center'\n            className={styles.calendarFooter}\n          >\n            {footer}\n          </Flex>\n        )}\n      </Popover.Content>\n    </Popover>\n  );\n}\n\nRangePicker.displayName = 'RangePicker';\n"],"names":[],"mappings":";;;;;;;;;;;;AAkCM;;;AASH;;;AAWD;AACA;AAEA;AAEA;;;AAGA;;;;;AAMA;;AAEE;;AAEE;;AAGE;;;AAGJ;;AAGF;;AAGI;;;;;;;;;;AASF;;AAKF;AACE;;AAGA;;;AAII;AAEA;;;;AAGA;;;;;;;;AAOA;AAEA;;;;AAEK;;;;;;AAQX;AAEA;AA8BA;;AAGI;AAEJ;AAmCF;AAEA;;"}

package/dist/components/callout/callout.cjs

@@ -4,7 +4,6 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactIcons = require('@radix-ui/react-icons');
 var classVarianceAuthority = require('class-variance-authority');
-var React = require('react');
 var callout_module = require('./callout.module.css.cjs');
 
 const callout = classVarianceAuthority.cva(callout_module.default.callout, {
@@ -29,7 +28,7 @@ const callout = classVarianceAuthority.cva(callout_module.default.callout, {
         type: 'grey'
     }
 });
-const Callout = React.forwardRef(({ className, type = 'grey', outline, highContrast, children, action, dismissible, onDismiss, width, style, icon = jsxRuntime.jsx(reactIcons.InfoCircledIcon, {}), ...props }, ref) => {
+function Callout({ className, type = 'grey', outline, highContrast, children, action, dismissible, onDismiss, width, style, icon = jsxRuntime.jsx(reactIcons.InfoCircledIcon, {}), ...props }) {
     const combinedStyle = {
         ...style,
         ...(width && { width: typeof width === 'number' ? `${width}px` : width })
@@ -44,8 +43,8 @@ const Callout = React.forwardRef(({ className, type = 'grey', outline, highContr
                 return 'status';
         }
     };
-    return (jsxRuntime.jsx("div", { ref: ref, className: `${callout({ type, outline, highContrast })} ${className || ''}`, style: combinedStyle, role: getRole(), "aria-live": type === 'alert' ? 'assertive' : 'polite', ...props, children: jsxRuntime.jsxs("div", { className: callout_module.default.container, children: [jsxRuntime.jsxs("div", { className: callout_module.default.messageContainer, children: [icon && (jsxRuntime.jsx("div", { className: callout_module.default.icon, "aria-hidden": 'true', children: icon })), jsxRuntime.jsx("div", { className: callout_module.default.message, children: children })] }), jsxRuntime.jsxs("div", { className: callout_module.default.actionsContainer, children: [action && jsxRuntime.jsx("div", { className: callout_module.default.action, children: action }), dismissible && (jsxRuntime.jsx("button", { className: callout_module.default.dismiss, onClick: onDismiss, "aria-label": 'Dismiss message', type: 'button', children: jsxRuntime.jsx("svg", { width: '12', height: '12', viewBox: '0 0 12 12', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', role: 'presentation', children: jsxRuntime.jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z', fill: 'currentColor' }) }) }))] })] }) }));
-});
+    return (jsxRuntime.jsx("div", { className: `${callout({ type, outline, highContrast })} ${className || ''}`, style: combinedStyle, role: getRole(), "aria-live": type === 'alert' ? 'assertive' : 'polite', ...props, children: jsxRuntime.jsxs("div", { className: callout_module.default.container, children: [jsxRuntime.jsxs("div", { className: callout_module.default.messageContainer, children: [icon && (jsxRuntime.jsx("div", { className: callout_module.default.icon, "aria-hidden": 'true', children: icon })), jsxRuntime.jsx("div", { className: callout_module.default.message, children: children })] }), jsxRuntime.jsxs("div", { className: callout_module.default.actionsContainer, children: [action && jsxRuntime.jsx("div", { className: callout_module.default.action, children: action }), dismissible && (jsxRuntime.jsx("button", { className: callout_module.default.dismiss, onClick: onDismiss, "aria-label": 'Dismiss message', type: 'button', children: jsxRuntime.jsx("svg", { width: '12', height: '12', viewBox: '0 0 12 12', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', role: 'presentation', children: jsxRuntime.jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z', fill: 'currentColor' }) }) }))] })] }) }));
+}
 Callout.displayName = 'Callout';
 
 exports.Callout = Callout;

package/dist/components/callout/callout.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"callout.cjs","sources":["../../../components/callout/callout.tsx"],"sourcesContent":["'use client';\n\nimport { InfoCircledIcon } from '@radix-ui/react-icons';\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport {\n  CSSProperties,\n  type HTMLAttributes,\n  ReactNode,\n  forwardRef\n} from 'react';\n\nimport styles from './callout.module.css';\n\nconst callout = cva(styles.callout, {\n  variants: {\n    type: {\n      grey: styles['callout-grey'],\n      success: styles['callout-success'],\n      alert: styles['callout-alert'],\n      gradient: styles['callout-gradient'],\n      accent: styles['callout-accent'],\n      attention: styles['callout-attention'],\n      normal: styles['callout-normal']\n    },\n    outline: {\n      true: styles['callout-outline']\n    },\n    highContrast: {\n      true: styles['callout-high-contrast']\n    }\n  },\n  defaultVariants: {\n    type: 'grey'\n  }\n});\n\nexport interface CalloutProps\n  extends HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof callout> {\n  children: ReactNode;\n  action?: ReactNode;\n  dismissible?: boolean;\n  onDismiss?: () => void;\n  width?: string | number;\n  style?: CSSProperties;\n  icon?: ReactNode;\n}\n\nexport const Callout = forwardRef<HTMLDivElement, CalloutProps>(\n  (\n    {\n      className,\n      type = 'grey',\n      outline,\n      highContrast,\n      children,\n      action,\n      dismissible,\n      onDismiss,\n      width,\n      style,\n      icon = <InfoCircledIcon />,\n      ...props\n    },\n    ref\n  ) => {\n    const combinedStyle = {\n      ...style,\n      ...(width && { width: typeof width === 'number' ? `${width}px` : width })\n    };\n\n    const getRole = () => {\n      switch (type) {\n        case 'alert':\n          return 'alert';\n        case 'success':\n          return 'status';\n        default:\n          return 'status';\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={`${callout({ type, outline, highContrast })} ${className || ''}`}\n        style={combinedStyle}\n        role={getRole()}\n        aria-live={type === 'alert' ? 'assertive' : 'polite'}\n        {...props}\n      >\n        <div className={styles.container}>\n          <div className={styles.messageContainer}>\n            {icon && (\n              <div className={styles.icon} aria-hidden='true'>\n                {icon}\n              </div>\n            )}\n            <div className={styles.message}>{children}</div>\n          </div>\n\n          <div className={styles.actionsContainer}>\n            {action && <div className={styles.action}>{action}</div>}\n            {dismissible && (\n              <button\n                className={styles.dismiss}\n                onClick={onDismiss}\n                aria-label='Dismiss message'\n                type='button'\n              >\n                <svg\n                  width='12'\n                  height='12'\n                  viewBox='0 0 12 12'\n                  fill='none'\n                  xmlns='http://www.w3.org/2000/svg'\n                  aria-hidden='true'\n                  role='presentation'\n                >\n                  <path\n                    fillRule='evenodd'\n                    clipRule='evenodd'\n                    d='M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z'\n                    fill='currentColor'\n                  />\n                </svg>\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\n\nCallout.displayName = 'Callout';\n"],"names":[],"mappings":";;;;;;;;;AAaA;AACE;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACD;AACD;AACE;AACD;AACF;AACD;AACE;AACD;AACF;AAcY;AAkBT;AACE;;;;;AAME;AACE;AACF;AACE;AACF;AACE;;AAEN;AAEA;AAkDF;AAGF;;"}
+{"version":3,"file":"callout.cjs","sources":["../../../components/callout/callout.tsx"],"sourcesContent":["'use client';\n\nimport { InfoCircledIcon } from '@radix-ui/react-icons';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { type ComponentProps, type CSSProperties, type ReactNode } from 'react';\n\nimport styles from './callout.module.css';\n\nconst callout = cva(styles.callout, {\n  variants: {\n    type: {\n      grey: styles['callout-grey'],\n      success: styles['callout-success'],\n      alert: styles['callout-alert'],\n      gradient: styles['callout-gradient'],\n      accent: styles['callout-accent'],\n      attention: styles['callout-attention'],\n      normal: styles['callout-normal']\n    },\n    outline: {\n      true: styles['callout-outline']\n    },\n    highContrast: {\n      true: styles['callout-high-contrast']\n    }\n  },\n  defaultVariants: {\n    type: 'grey'\n  }\n});\n\nexport interface CalloutProps\n  extends ComponentProps<'div'>,\n    VariantProps<typeof callout> {\n  children: ReactNode;\n  action?: ReactNode;\n  dismissible?: boolean;\n  onDismiss?: () => void;\n  width?: string | number;\n  style?: CSSProperties;\n  icon?: ReactNode;\n}\n\nexport function Callout({\n  className,\n  type = 'grey',\n  outline,\n  highContrast,\n  children,\n  action,\n  dismissible,\n  onDismiss,\n  width,\n  style,\n  icon = <InfoCircledIcon />,\n  ...props\n}: CalloutProps) {\n  const combinedStyle = {\n    ...style,\n    ...(width && { width: typeof width === 'number' ? `${width}px` : width })\n  };\n\n  const getRole = () => {\n    switch (type) {\n      case 'alert':\n        return 'alert';\n      case 'success':\n        return 'status';\n      default:\n        return 'status';\n    }\n  };\n\n  return (\n    <div\n      className={`${callout({ type, outline, highContrast })} ${className || ''}`}\n      style={combinedStyle}\n      role={getRole()}\n      aria-live={type === 'alert' ? 'assertive' : 'polite'}\n      {...props}\n    >\n      <div className={styles.container}>\n        <div className={styles.messageContainer}>\n          {icon && (\n            <div className={styles.icon} aria-hidden='true'>\n              {icon}\n            </div>\n          )}\n          <div className={styles.message}>{children}</div>\n        </div>\n\n        <div className={styles.actionsContainer}>\n          {action && <div className={styles.action}>{action}</div>}\n          {dismissible && (\n            <button\n              className={styles.dismiss}\n              onClick={onDismiss}\n              aria-label='Dismiss message'\n              type='button'\n            >\n              <svg\n                width='12'\n                height='12'\n                viewBox='0 0 12 12'\n                fill='none'\n                xmlns='http://www.w3.org/2000/svg'\n                aria-hidden='true'\n                role='presentation'\n              >\n                <path\n                  fillRule='evenodd'\n                  clipRule='evenodd'\n                  d='M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z'\n                  fill='currentColor'\n                />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nCallout.displayName = 'Callout';\n"],"names":[],"mappings":";;;;;;;;AAQA;AACE;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACD;AACD;AACE;AACD;AACF;AACD;AACE;AACD;AACF;AAce;AAcd;AACE;;;;;AAME;AACE;AACF;AACE;AACF;AACE;;AAEN;AAEA;AAiDF;AAEA;;"}

package/dist/components/callout/callout.d.ts

@@ -1,11 +1,11 @@
 import { type VariantProps } from 'class-variance-authority';
-import { CSSProperties, type HTMLAttributes, ReactNode } from 'react';
+import { type ComponentProps, type CSSProperties, type ReactNode } from 'react';
 declare const callout: (props?: ({
-    type?: "alert" | "accent" | "attention" | "success" | "normal" | "gradient" | "grey" | null | undefined;
+    type?: "alert" | "grey" | "normal" | "accent" | "attention" | "success" | "gradient" | null | undefined;
     outline?: boolean | null | undefined;
     highContrast?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface CalloutProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof callout> {
+export interface CalloutProps extends ComponentProps<'div'>, VariantProps<typeof callout> {
     children: ReactNode;
     action?: ReactNode;
     dismissible?: boolean;
@@ -14,6 +14,9 @@ export interface CalloutProps extends HTMLAttributes<HTMLDivElement>, VariantPro
     style?: CSSProperties;
     icon?: ReactNode;
 }
-export declare const Callout: import("react").ForwardRefExoticComponent<CalloutProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Callout({ className, type, outline, highContrast, children, action, dismissible, onDismiss, width, style, icon, ...props }: CalloutProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Callout {
+    var displayName: string;
+}
 export {};
 //# sourceMappingURL=callout.d.ts.map

package/dist/components/callout/callout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"callout.d.ts","sourceRoot":"","sources":["../../../components/callout/callout.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAC;AAClE,OAAO,EACL,aAAa,EACb,KAAK,cAAc,EACnB,SAAS,EAEV,MAAM,OAAO,CAAC;AAIf,QAAA,MAAM,OAAO;;;;8EAqBX,CAAC;AAEH,MAAM,WAAW,YACf,SAAQ,cAAc,CAAC,cAAc,CAAC,EACpC,YAAY,CAAC,OAAO,OAAO,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,eAAO,MAAM,OAAO,yGAqFnB,CAAC"}
+{"version":3,"file":"callout.d.ts","sourceRoot":"","sources":["../../../components/callout/callout.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhF,QAAA,MAAM,OAAO;;;;8EAqBX,CAAC;AAEH,MAAM,WAAW,YACf,SAAQ,cAAc,CAAC,KAAK,CAAC,EAC3B,YAAY,CAAC,OAAO,OAAO,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,IAAa,EACb,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,WAAW,EACX,SAAS,EACT,KAAK,EACL,KAAK,EACL,IAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,YAAY,2CAkEd;yBA/Ee,OAAO"}