@raystack/apsara 0.51.1 → 0.53.0

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, 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?: { [key: string]: any };\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]);\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.dropdown_trigger}\n        iconProps={{\n          className: styles.dropdown_icon\n        }}\n        size='small'\n        variant='text'\n        disabled={disabled}\n      >\n        <Select.Value />\n      </Select.Trigger>\n      <Select.Content className={styles.dropdown_content}>\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  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 message =\n            tooltipMessages[dateLib.format(day.date, 'dd-MM-yyyy')];\n          return (\n            <Tooltip\n              side='top'\n              disabled={loadingData || !showTooltip || !message}\n              message={message}\n            >\n              <button {...buttonProps} />\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.caption_label,\n        button_previous: `${styles.nav_button} ${styles.nav_button_previous}`,\n        button_next: `${styles.nav_button} ${styles.nav_button_next}`,\n        month_caption: styles.month_caption,\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.day_button,\n        range_middle: styles.range_middle,\n        range_end: styles.range_end,\n        range_start: styles.range_start,\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":";;;;;;;;;;;;;;;;AAuCA;AAMA;;;;AAUgC;AAC9B;;;;;;AAQA;;;AA2CF;AAEO;AAWL;;;;;;;;AAoCQ;;;AAYF;AAWD;;;;;;;;;;;;;;;;;;;;;AAsBC;AACD;AAMP;;"}
+{"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, 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?: { [key: string]: any };\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.dropdown_trigger}\n        iconProps={{\n          className: styles.dropdown_icon\n        }}\n        size='small'\n        variant='text'\n        disabled={disabled}\n      >\n        <Select.Value />\n      </Select.Trigger>\n      <Select.Content className={styles.dropdown_content}>\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  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 message =\n            tooltipMessages[dateLib.format(day.date, 'dd-MM-yyyy')];\n          return (\n            <Tooltip\n              side='top'\n              disabled={loadingData || !showTooltip || !message}\n              message={message}\n            >\n              <button {...buttonProps} />\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.caption_label,\n        button_previous: `${styles.nav_button} ${styles.nav_button_previous}`,\n        button_next: `${styles.nav_button} ${styles.nav_button_next}`,\n        month_caption: styles.month_caption,\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.day_button,\n        range_middle: styles.range_middle,\n        range_end: styles.range_end,\n        range_start: styles.range_start,\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":";;;;;;;;;;;;;;;;AAuCA;AAMA;;;;AAUgC;AAC9B;;;;;;AAQA;;;AA2CF;AAEO;AAWL;;;;;;;;AAoCQ;;;AAYF;AAWD;;;;;;;;;;;;;;;;;;;;;AAsBC;AACD;AAMP;;"}

package/dist/components/calendar/calendar.js

@@ -18,7 +18,7 @@ function DropDown({ options = [], value, onChange, onDropdownOpen, disabled }) {
     useEffect(() => {
         if (open && onDropdownOpen)
             onDropdownOpen();
-    }, [open]);
+    }, [open, onDropdownOpen]);
     function handleChange(value) {
         if (onChange) {
             onChange({ target: { value } });

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, 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?: { [key: string]: any };\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]);\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.dropdown_trigger}\n        iconProps={{\n          className: styles.dropdown_icon\n        }}\n        size='small'\n        variant='text'\n        disabled={disabled}\n      >\n        <Select.Value />\n      </Select.Trigger>\n      <Select.Content className={styles.dropdown_content}>\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  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 message =\n            tooltipMessages[dateLib.format(day.date, 'dd-MM-yyyy')];\n          return (\n            <Tooltip\n              side='top'\n              disabled={loadingData || !showTooltip || !message}\n              message={message}\n            >\n              <button {...buttonProps} />\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.caption_label,\n        button_previous: `${styles.nav_button} ${styles.nav_button_previous}`,\n        button_next: `${styles.nav_button} ${styles.nav_button_next}`,\n        month_caption: styles.month_caption,\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.day_button,\n        range_middle: styles.range_middle,\n        range_end: styles.range_end,\n        range_start: styles.range_start,\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":";;;;;;;;;;;;;;AAuCA;AAMA;;;;AAUgC;AAC9B;;;;;;AAQA;;;AA2CF;AAEO;AAWL;;;;;;;;AAoCQ;;;AAYF;AAWD;;;;;;;;;;;;;;;;;;;;;AAsBC;AACD;AAMP;;"}
+{"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, 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?: { [key: string]: any };\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.dropdown_trigger}\n        iconProps={{\n          className: styles.dropdown_icon\n        }}\n        size='small'\n        variant='text'\n        disabled={disabled}\n      >\n        <Select.Value />\n      </Select.Trigger>\n      <Select.Content className={styles.dropdown_content}>\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  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 message =\n            tooltipMessages[dateLib.format(day.date, 'dd-MM-yyyy')];\n          return (\n            <Tooltip\n              side='top'\n              disabled={loadingData || !showTooltip || !message}\n              message={message}\n            >\n              <button {...buttonProps} />\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.caption_label,\n        button_previous: `${styles.nav_button} ${styles.nav_button_previous}`,\n        button_next: `${styles.nav_button} ${styles.nav_button_next}`,\n        month_caption: styles.month_caption,\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.day_button,\n        range_middle: styles.range_middle,\n        range_end: styles.range_end,\n        range_start: styles.range_start,\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":";;;;;;;;;;;;;;AAuCA;AAMA;;;;AAUgC;AAC9B;;;;;;AAQA;;;AA2CF;AAEO;AAWL;;;;;;;;AAoCQ;;;AAYF;AAWD;;;;;;;;;;;;;;;;;;;;;AAsBC;AACD;AAMP;;"}

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

@@ -3,6 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var reactIcons_esm = require('../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.1.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
+var index = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
 var dayjs_min = require('../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.cjs');
 var customParseFormat = require('../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/plugin/customParseFormat.cjs');
 var React = require('react');
@@ -12,7 +13,7 @@ var calendar = require('./calendar.cjs');
 var calendar_module = require('./calendar.module.css.cjs');
 
 dayjs_min.default.extend(customParseFormat.default);
-function DatePicker({ side = 'top', dateFormat = 'DD/MM/YYYY', inputFieldProps, calendarProps, value = new Date(), onSelect = () => { }, children, showCalendarIcon = true, timeZone }) {
+function DatePicker({ dateFormat = 'DD/MM/YYYY', inputFieldProps, calendarProps, value = new Date(), onSelect = () => { }, children, showCalendarIcon = true, timeZone, popoverProps }) {
     const [showCalendar, setShowCalendar] = React.useState(false);
     const [selectedDate, setSelectedDate] = React.useState(value);
     const [error, setError] = React.useState();
@@ -25,16 +26,16 @@ function DatePicker({ side = 'top', dateFormat = 'DD/MM/YYYY', inputFieldProps,
     React.useEffect(() => {
         selectedDateRef.current = selectedDate;
     }, [selectedDate]);
-    function isElementOutside(el) {
+    const isElementOutside = React.useCallback((el) => {
         return (!isDropdownOpenRef.current && // Month and Year dropdown from Date picker
             !inputFieldRef.current?.contains(el) && // InputField
             !contentRef.current?.contains(el));
-    }
+    }, []);
     const handleMouseDown = React.useCallback((event) => {
         const el = event.target;
         if (el && isElementOutside(el))
             removeEventListeners();
-    }, []);
+    }, [isElementOutside]);
     function registerEventListeners() {
         isInputFieldFocused.current = true;
         document.addEventListener('mouseup', handleMouseDown);
@@ -113,8 +114,8 @@ function DatePicker({ side = 'top', dateFormat = 'DD/MM/YYYY', inputFieldProps,
         }
     }
     const defaultTrigger = (jsxRuntime.jsx(inputField.InputField, { size: 'small', placeholder: 'Select date', error: error, className: calendar_module.default.datePickerInput, trailingIcon: showCalendarIcon ? jsxRuntime.jsx(reactIcons_esm.CalendarIcon, {}) : undefined, ...inputFieldProps, ref: inputFieldRef, defaultValue: formattedDate, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyUp: handleKeyUp }));
-    const trigger = typeof children === 'function' ? (children({ selectedDate: formattedDate })) : children ? (jsxRuntime.jsx("div", { children: 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, { side: side, className: calendar_module.default.calendarPopover, ref: contentRef, children: jsxRuntime.jsx(calendar.Calendar, { required: true, ...calendarProps, timeZone: timeZone, onDropdownOpen: onDropdownOpen, mode: 'single', selected: selectedDate, month: selectedDate, onSelect: handleSelect, onMonthChange: setSelectedDate }) })] }));
+    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: index.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 }) })] }));
 }
 
 exports.DatePicker = DatePicker;

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 dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { PropsBase, PropsSingleRequired } from 'react-day-picker';\n\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\nimport { Popover } from '../popover';\nimport { Calendar } from './calendar';\nimport styles from './calendar.module.css';\n\ndayjs.extend(customParseFormat);\n\ninterface DatePickerProps {\n  side?: 'top' | 'right' | 'bottom' | 'left';\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}\n\nexport function DatePicker({\n  side = 'top',\n  dateFormat = 'DD/MM/YYYY',\n  inputFieldProps,\n  calendarProps,\n  value = new Date(),\n  onSelect = () => {},\n  children,\n  showCalendarIcon = true,\n  timeZone\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  function isElementOutside(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((event: MouseEvent) => {\n    const el = event.target as HTMLElement | null;\n    if (el && isElementOutside(el)) removeEventListeners();\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      defaultValue={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      defaultTrigger\n    );\n\n  return (\n    <Popover open={showCalendar} onOpenChange={onOpenChange}>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n\n      <Popover.Content\n        side={side}\n        className={styles.calendarPopover}\n        ref={contentRef}\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":["dayjs"],"mappings":";;;;;;;;;;;;;AAcAA;;;;;;AAiCE;AACA;AACA;AACA;AACA;;AAGE;AACF;;AAGE;;;;AAOF;AACE;AACA;AAAgC;;AAGlC;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;AASA;AAuBF;;"}
+{"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      defaultValue={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":["dayjs"],"mappings":";;;;;;;;;;;;;;AAeAA;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;;"}

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

@@ -1,7 +1,7 @@
 import { PropsBase, PropsSingleRequired } from 'react-day-picker';
 import { InputFieldProps } from '../input-field/input-field';
+import { PopoverContentProps } from '../popover/popover';
 interface DatePickerProps {
-    side?: 'top' | 'right' | 'bottom' | 'left';
     dateFormat?: string;
     inputFieldProps?: InputFieldProps;
     calendarProps?: PropsSingleRequired & PropsBase;
@@ -12,7 +12,8 @@ interface DatePickerProps {
     }) => React.ReactNode);
     showCalendarIcon?: boolean;
     timeZone?: string;
+    popoverProps?: PopoverContentProps;
 }
-export declare function DatePicker({ side, dateFormat, inputFieldProps, calendarProps, value, onSelect, children, showCalendarIcon, timeZone }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DatePicker({ dateFormat, inputFieldProps, calendarProps, value, onSelect, children, showCalendarIcon, timeZone, popoverProps }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
 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":"AAMA,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAGlE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAO7D,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,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;CACnB;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAY,EACZ,UAAyB,EACzB,eAAe,EACf,aAAa,EACb,KAAkB,EAClB,QAAmB,EACnB,QAAQ,EACR,gBAAuB,EACvB,QAAQ,EACT,EAAE,eAAe,2CA4KjB"}
+{"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"}

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

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { CalendarIcon } from '../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.1.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
+import { cx } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
 import dayjs from '../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.js';
 import customParseFormat from '../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/plugin/customParseFormat.js';
 import { useState, useRef, useEffect, useCallback } from 'react';
@@ -10,7 +11,7 @@ import { Calendar } from './calendar.js';
 import styles from './calendar.module.css.js';
 
 dayjs.extend(customParseFormat);
-function DatePicker({ side = 'top', dateFormat = 'DD/MM/YYYY', inputFieldProps, calendarProps, value = new Date(), onSelect = () => { }, children, showCalendarIcon = true, timeZone }) {
+function DatePicker({ dateFormat = 'DD/MM/YYYY', inputFieldProps, calendarProps, value = new Date(), onSelect = () => { }, children, showCalendarIcon = true, timeZone, popoverProps }) {
     const [showCalendar, setShowCalendar] = useState(false);
     const [selectedDate, setSelectedDate] = useState(value);
     const [error, setError] = useState();
@@ -23,16 +24,16 @@ function DatePicker({ side = 'top', dateFormat = 'DD/MM/YYYY', inputFieldProps,
     useEffect(() => {
         selectedDateRef.current = selectedDate;
     }, [selectedDate]);
-    function isElementOutside(el) {
+    const isElementOutside = useCallback((el) => {
         return (!isDropdownOpenRef.current && // Month and Year dropdown from Date picker
             !inputFieldRef.current?.contains(el) && // InputField
             !contentRef.current?.contains(el));
-    }
+    }, []);
     const handleMouseDown = useCallback((event) => {
         const el = event.target;
         if (el && isElementOutside(el))
             removeEventListeners();
-    }, []);
+    }, [isElementOutside]);
     function registerEventListeners() {
         isInputFieldFocused.current = true;
         document.addEventListener('mouseup', handleMouseDown);
@@ -111,8 +112,8 @@ function DatePicker({ side = 'top', dateFormat = 'DD/MM/YYYY', inputFieldProps,
         }
     }
     const defaultTrigger = (jsx(InputField, { size: 'small', placeholder: 'Select date', error: error, className: styles.datePickerInput, trailingIcon: showCalendarIcon ? jsx(CalendarIcon, {}) : undefined, ...inputFieldProps, ref: inputFieldRef, defaultValue: formattedDate, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyUp: handleKeyUp }));
-    const trigger = typeof children === 'function' ? (children({ selectedDate: formattedDate })) : children ? (jsx("div", { children: children })) : (defaultTrigger);
-    return (jsxs(Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsx(Popover.Trigger, { asChild: true, children: trigger }), jsx(Popover.Content, { side: side, className: styles.calendarPopover, ref: contentRef, children: jsx(Calendar, { required: true, ...calendarProps, timeZone: timeZone, onDropdownOpen: onDropdownOpen, mode: 'single', selected: selectedDate, month: selectedDate, onSelect: handleSelect, onMonthChange: setSelectedDate }) })] }));
+    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 }) })] }));
 }
 
 export { DatePicker };

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 dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { PropsBase, PropsSingleRequired } from 'react-day-picker';\n\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\nimport { Popover } from '../popover';\nimport { Calendar } from './calendar';\nimport styles from './calendar.module.css';\n\ndayjs.extend(customParseFormat);\n\ninterface DatePickerProps {\n  side?: 'top' | 'right' | 'bottom' | 'left';\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}\n\nexport function DatePicker({\n  side = 'top',\n  dateFormat = 'DD/MM/YYYY',\n  inputFieldProps,\n  calendarProps,\n  value = new Date(),\n  onSelect = () => {},\n  children,\n  showCalendarIcon = true,\n  timeZone\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  function isElementOutside(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((event: MouseEvent) => {\n    const el = event.target as HTMLElement | null;\n    if (el && isElementOutside(el)) removeEventListeners();\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      defaultValue={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      defaultTrigger\n    );\n\n  return (\n    <Popover open={showCalendar} onOpenChange={onOpenChange}>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n\n      <Popover.Content\n        side={side}\n        className={styles.calendarPopover}\n        ref={contentRef}\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":";;;;;;;;;;;AAcA;;;;;;AAiCE;AACA;AACA;AACA;AACA;;AAGE;AACF;;AAGE;;;;AAOF;AACE;AACA;AAAgC;;AAGlC;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;AASA;AAuBF;;"}
+{"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      defaultValue={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;;"}

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

@@ -3,6 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var reactIcons_esm = require('../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.1.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
+var index = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
 var dayjs_min = require('../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.cjs');
 var React = require('react');
 var flex = require('../flex/flex.cjs');
@@ -11,10 +12,10 @@ var popover = require('../popover/popover.cjs');
 var calendar = require('./calendar.cjs');
 var calendar_module = require('./calendar.module.css.cjs');
 
-function RangePicker({ side = 'top', dateFormat = 'DD/MM/YYYY', inputFieldsProps = {}, calendarProps, onSelect = () => { }, value, defaultValue = {
+function RangePicker({ dateFormat = 'DD/MM/YYYY', inputFieldsProps = {}, calendarProps, onSelect = () => { }, value, defaultValue = {
     to: new Date(),
     from: new Date()
-}, pickerGroupClassName, children, showCalendarIcon = true, footer, timeZone }) {
+}, pickerGroupClassName, children, showCalendarIcon = true, footer, timeZone, popoverProps }) {
     const [showCalendar, setShowCalendar] = React.useState(false);
     const [currentRangeField, setCurrentRangeField] = React.useState('from');
     const [internalValue, setInternalValue] = React.useState(value ?? defaultValue);
@@ -88,7 +89,7 @@ function RangePicker({ side = 'top', dateFormat = 'DD/MM/YYYY', inputFieldsProps
     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, { side: side, className: calendar_module.default.calendarPopover, 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, { asChild: true, children: trigger }), jsxRuntime.jsxs(popover.Popover.Content, { ...popoverProps, className: index.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 }))] })] }));
 }
 
 exports.RangePicker = RangePicker;

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 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 { Calendar } from './calendar';\nimport styles from './calendar.module.css';\n\ninterface RangePickerProps {\n  side?: 'top' | 'right' | 'bottom' | 'left';\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}\n\ntype RangeFields = keyof DateRange;\n\nexport function RangePicker({\n  side = 'top',\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}: 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 side={side} className={styles.calendarPopover}>\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":";;;;;;;;;;;;;AAgCgB;;;;;;AAoBd;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;;AA+BN;;"}
+{"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;;"}

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

@@ -1,7 +1,7 @@
 import { DateRange, PropsBase, PropsRangeRequired } from 'react-day-picker';
 import { InputFieldProps } from '../input-field/input-field';
+import { PopoverContentProps } from '../popover/popover';
 interface RangePickerProps {
-    side?: 'top' | 'right' | 'bottom' | 'left';
     dateFormat?: string;
     inputFieldsProps?: {
         startDate?: InputFieldProps;
@@ -19,7 +19,8 @@ interface RangePickerProps {
     showCalendarIcon?: boolean;
     footer?: React.ReactNode;
     timeZone?: string;
+    popoverProps?: PopoverContentProps;
 }
-export declare function RangePicker({ side, dateFormat, inputFieldsProps, calendarProps, onSelect, value, defaultValue, pickerGroupClassName, children, showCalendarIcon, footer, timeZone }: RangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function RangePicker({ dateFormat, inputFieldsProps, calendarProps, onSelect, value, defaultValue, pickerGroupClassName, children, showCalendarIcon, footer, timeZone, popoverProps }: RangePickerProps): import("react/jsx-runtime").JSX.Element;
 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":"AAKA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAG5E,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAK7D,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,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;CACnB;AAID,wBAAgB,WAAW,CAAC,EAC1B,IAAY,EACZ,UAAyB,EACzB,gBAAqB,EACrB,aAAa,EACb,QAAmB,EACnB,KAAK,EACL,YAGC,EACD,oBAAoB,EACpB,QAAQ,EACR,gBAAuB,EACvB,MAAM,EACN,QAAQ,EACT,EAAE,gBAAgB,2CAkJlB"}
+{"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"}

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

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { CalendarIcon } from '../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.1.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
+import { cx } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
 import dayjs from '../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.js';
 import { useState, useMemo, useCallback } from 'react';
 import { Flex } from '../flex/flex.js';
@@ -9,10 +10,10 @@ import { Popover } from '../popover/popover.js';
 import { Calendar } from './calendar.js';
 import styles from './calendar.module.css.js';
 
-function RangePicker({ side = 'top', dateFormat = 'DD/MM/YYYY', inputFieldsProps = {}, calendarProps, onSelect = () => { }, value, defaultValue = {
+function RangePicker({ dateFormat = 'DD/MM/YYYY', inputFieldsProps = {}, calendarProps, onSelect = () => { }, value, defaultValue = {
     to: new Date(),
     from: new Date()
-}, pickerGroupClassName, children, showCalendarIcon = true, footer, timeZone }) {
+}, pickerGroupClassName, children, showCalendarIcon = true, footer, timeZone, popoverProps }) {
     const [showCalendar, setShowCalendar] = useState(false);
     const [currentRangeField, setCurrentRangeField] = useState('from');
     const [internalValue, setInternalValue] = useState(value ?? defaultValue);
@@ -86,7 +87,7 @@ function RangePicker({ side = 'top', dateFormat = 'DD/MM/YYYY', inputFieldsProps
     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, { side: side, className: styles.calendarPopover, 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, { 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 }))] })] }));
 }
 
 export { RangePicker };

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 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 { Calendar } from './calendar';\nimport styles from './calendar.module.css';\n\ninterface RangePickerProps {\n  side?: 'top' | 'right' | 'bottom' | 'left';\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}\n\ntype RangeFields = keyof DateRange;\n\nexport function RangePicker({\n  side = 'top',\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}: 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 side={side} className={styles.calendarPopover}>\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":";;;;;;;;;;;AAgCgB;;;;;;AAoBd;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;;AA+BN;;"}
+{"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;;"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=callout.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"callout.test.d.ts","sourceRoot":"","sources":["../../../../components/callout/__tests__/callout.test.tsx"],"names":[],"mappings":""}

package/dist/components/checkbox/__tests__/checkbox.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=checkbox.test.d.ts.map

package/dist/components/checkbox/__tests__/checkbox.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.test.d.ts","sourceRoot":"","sources":["../../../../components/checkbox/__tests__/checkbox.test.tsx"],"names":[],"mappings":""}

package/dist/components/chip/__tests__/chip.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=chip.test.d.ts.map

package/dist/components/chip/__tests__/chip.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.test.d.ts","sourceRoot":"","sources":["../../../../components/chip/__tests__/chip.test.tsx"],"names":[],"mappings":""}

package/dist/components/code-block/__tests__/code-block.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=code-block.test.d.ts.map

package/dist/components/code-block/__tests__/code-block.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.test.d.ts","sourceRoot":"","sources":["../../../../components/code-block/__tests__/code-block.test.tsx"],"names":[],"mappings":""}

package/dist/components/code-block/code-block-code.cjs

@@ -0,0 +1,50 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
+var index$1 = require('../../node_modules/.pnpm/prism-react-renderer@2.4.1_react@19.1.1/node_modules/prism-react-renderer/dist/index.cjs');
+var React = require('react');
+var useIsomorphicLayoutEffect = require('../../hooks/useIsomorphicLayoutEffect.cjs');
+var codeBlockRoot = require('./code-block-root.cjs');
+var codeBlock_module = require('./code-block.module.css.cjs');
+var code_module = require('./code.module.css.cjs');
+
+const emptyTheme = { plain: {}, styles: [] };
+const CodeBlockCode = React.forwardRef(({ children, language, className, value, ...props }, ref) => {
+    const { value: contextValue, setCode, setValue } = codeBlockRoot.useCodeBlockContext();
+    const computedValue = value ?? language;
+    const isContextValueDefined = !!contextValue;
+    const shouldRender = !isContextValueDefined || contextValue === computedValue;
+    const content = children.trim();
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+        // if value is not defined, set the value
+        if (!isContextValueDefined)
+            setValue(language);
+        // if should render, store the code
+        if (shouldRender)
+            setCode(content);
+    }, [
+        content,
+        setCode,
+        shouldRender,
+        setValue,
+        language,
+        isContextValueDefined
+    ]);
+    if (!shouldRender)
+        return null;
+    return (jsxRuntime.jsx("div", { ref: ref, className: index.cx(codeBlock_module.default.codeContent, className), ...props, children: jsxRuntime.jsx(CodeHighlight, { content: content, language: language }) }));
+});
+CodeBlockCode.displayName = 'CodeBlockCode';
+const CodeHighlight = React.memo(({ content, language }) => {
+    const { hideLineNumbers, maxLines, collapsed } = codeBlockRoot.useCodeBlockContext();
+    const canCollapse = maxLines && maxLines > 0;
+    return (jsxRuntime.jsx(index$1.Highlight, { theme: emptyTheme, code: content, language: language, children: ({ className: highlightClassName, style, tokens, getLineProps, getTokenProps }) => {
+            const renderedTokens = canCollapse && collapsed ? tokens.slice(0, maxLines) : tokens;
+            return (jsxRuntime.jsx("pre", { className: index.cx(code_module.default.theme, codeBlock_module.default.pre, highlightClassName), style: style, children: renderedTokens.map((line, i) => (jsxRuntime.jsxs("div", { ...getLineProps({ line }), children: [!hideLineNumbers && (jsxRuntime.jsx("span", { className: codeBlock_module.default.lineNumber, children: i + 1 })), jsxRuntime.jsx("span", { className: codeBlock_module.default.lineContent, children: line.map((token, key) => (jsxRuntime.jsx("span", { ...getTokenProps({ token }) }, key))) })] }, i))) }));
+        } }));
+});
+
+exports.CodeBlockCode = CodeBlockCode;
+//# sourceMappingURL=code-block-code.cjs.map

package/dist/components/code-block/code-block-code.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block-code.cjs","sources":["../../../components/code-block/code-block-code.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Highlight } from 'prism-react-renderer';\nimport { Language } from 'prism-react-renderer';\nimport { HTMLAttributes, forwardRef, memo } from 'react';\nimport { useIsomorphicLayoutEffect } from '~/hooks';\nimport { useCodeBlockContext } from './code-block-root';\nimport styles from './code-block.module.css';\nimport code from './code.module.css';\n\nexport interface CodeBlockCodeProps extends HTMLAttributes<HTMLDivElement> {\n  children: string;\n  language: Language;\n  value?: string;\n  className?: string;\n}\n\nconst emptyTheme = { plain: {}, styles: [] };\n\nexport const CodeBlockCode = forwardRef<HTMLDivElement, CodeBlockCodeProps>(\n  ({ children, language, className, value, ...props }, ref) => {\n    const { value: contextValue, setCode, setValue } = useCodeBlockContext();\n    const computedValue = value ?? language;\n    const isContextValueDefined = !!contextValue;\n    const shouldRender =\n      !isContextValueDefined || contextValue === computedValue;\n    const content = children.trim();\n\n    useIsomorphicLayoutEffect(() => {\n      // if value is not defined, set the value\n      if (!isContextValueDefined) setValue(language);\n      // if should render, store the code\n      if (shouldRender) setCode(content);\n    }, [\n      content,\n      setCode,\n      shouldRender,\n      setValue,\n      language,\n      isContextValueDefined\n    ]);\n\n    if (!shouldRender) return null;\n\n    return (\n      <div ref={ref} className={cx(styles.codeContent, className)} {...props}>\n        <CodeHighlight content={content} language={language} />\n      </div>\n    );\n  }\n);\n\nCodeBlockCode.displayName = 'CodeBlockCode';\n\nconst CodeHighlight = memo(\n  ({ content, language }: { content: string; language: Language }) => {\n    const { hideLineNumbers, maxLines, collapsed } = useCodeBlockContext();\n    const canCollapse = maxLines && maxLines > 0;\n    return (\n      <Highlight theme={emptyTheme} code={content} language={language}>\n        {({\n          className: highlightClassName,\n          style,\n          tokens,\n          getLineProps,\n          getTokenProps\n        }) => {\n          const renderedTokens =\n            canCollapse && collapsed ? tokens.slice(0, maxLines) : tokens;\n          return (\n            <pre\n              className={cx(code.theme, styles.pre, highlightClassName)}\n              style={style}\n            >\n              {renderedTokens.map((line, i) => (\n                <div key={i} {...getLineProps({ line })}>\n                  {!hideLineNumbers && (\n                    <span className={styles.lineNumber}>{i + 1}</span>\n                  )}\n                  <span className={styles.lineContent}>\n                    {line.map((token, key) => (\n                      <span key={key} {...getTokenProps({ token })} />\n                    ))}\n                  </span>\n                </div>\n              ))}\n            </pre>\n          );\n        }}\n      </Highlight>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;AAkBA;;AAII;AACA;AACA;;AAGA;;;AAIE;;;AAEA;;AACF;;;;;;;AAOC;AAED;AAAmB;AAEnB;AAKF;AAGF;AAEA;;AAGI;AACA;;;;AAiCF;;"}

package/dist/components/code-block/code-block-code.d.ts

@@ -0,0 +1,10 @@
+import { Language } from 'prism-react-renderer';
+import { HTMLAttributes } from 'react';
+export interface CodeBlockCodeProps extends HTMLAttributes<HTMLDivElement> {
+    children: string;
+    language: Language;
+    value?: string;
+    className?: string;
+}
+export declare const CodeBlockCode: import("react").ForwardRefExoticComponent<CodeBlockCodeProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=code-block-code.d.ts.map

package/dist/components/code-block/code-block-code.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block-code.d.ts","sourceRoot":"","sources":["../../../components/code-block/code-block-code.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAoB,MAAM,OAAO,CAAC;AAMzD,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,eAAO,MAAM,aAAa,+GA+BzB,CAAC"}