@raystack/apsara 0.53.1 → 0.53.3

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

@@ -113,7 +113,7 @@ function DatePicker({ dateFormat = 'DD/MM/YYYY', inputFieldProps, calendarProps,
             setError('Invalid date');
         }
     }
-    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 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, value: formattedDate, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyUp: handleKeyUp }));
     const trigger = typeof children === 'function' ? (children({ selectedDate: formattedDate })) : children ? (jsxRuntime.jsx("div", { children: children })) : (jsxRuntime.jsx("div", { children: defaultTrigger }));
     return (jsxRuntime.jsxs(popover.Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsxRuntime.jsx(popover.Popover.Trigger, { asChild: true, children: trigger }), jsxRuntime.jsx(popover.Popover.Content, { ref: contentRef, ...popoverProps, className: 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 }) })] }));
 }

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

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

@@ -111,7 +111,7 @@ function DatePicker({ dateFormat = 'DD/MM/YYYY', inputFieldProps, calendarProps,
             setError('Invalid date');
         }
     }
-    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 defaultTrigger = (jsx(InputField, { size: 'small', placeholder: 'Select date', error: error, className: styles.datePickerInput, trailingIcon: showCalendarIcon ? jsx(CalendarIcon, {}) : undefined, ...inputFieldProps, ref: inputFieldRef, value: formattedDate, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyUp: handleKeyUp }));
     const trigger = typeof children === 'function' ? (children({ selectedDate: formattedDate })) : children ? (jsx("div", { children: children })) : (jsx("div", { children: defaultTrigger }));
     return (jsxs(Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsx(Popover.Trigger, { asChild: true, children: trigger }), jsx(Popover.Content, { ref: contentRef, ...popoverProps, className: cx(styles.calendarPopover, popoverProps?.className), side: popoverProps?.side ?? 'top', children: jsx(Calendar, { required: true, ...calendarProps, timeZone: timeZone, onDropdownOpen: onDropdownOpen, mode: 'single', selected: selectedDate, month: selectedDate, onSelect: handleSelect, onMonthChange: setSelectedDate }) })] }));
 }

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

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

package/dist/hooks/index.cjs

@@ -3,10 +3,12 @@
 var useCopyToClipboard = require('./useCopyToClipboard.cjs');
 var useMouse = require('./useMouse.cjs');
 var useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect.cjs');
+var useDebouncedState = require('./useDebouncedState.cjs');
 
 
 
 exports.useCopyToClipboard = useCopyToClipboard.useCopyToClipboard;
 exports.useMouse = useMouse.useMouse;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect.useIsomorphicLayoutEffect;
+exports.useDebouncedState = useDebouncedState.useDebouncedState;
 //# sourceMappingURL=index.cjs.map

package/dist/hooks/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export { useCopyToClipboard } from './useCopyToClipboard';
 export { useMouse } from './useMouse';
 export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+export { useDebouncedState } from './useDebouncedState';
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../hooks/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../hooks/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/hooks/index.js

@@ -1,4 +1,5 @@
 export { useCopyToClipboard } from './useCopyToClipboard.js';
 export { useMouse } from './useMouse.js';
 export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
+export { useDebouncedState } from './useDebouncedState.js';
 //# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/hooks/useDebouncedState.cjs

@@ -0,0 +1,41 @@
+'use strict';
+
+var react = require('react');
+
+/**
+ * A hook that debounces the state update.
+ * @param defaultValue - The default value of the state.
+ * @param delay - The delay time in milliseconds.
+ * @param options - The options for the hook.
+ * @returns A tuple containing the current value and the debounced set value function.
+ *
+ * @example
+ * const [value, setValue] = useDebouncedState('Hello', 1000);
+
+ * @example
+ * const [value, setValue] = useDebouncedState('Hello', 1000, { leading: true });
+ */
+function useDebouncedState(defaultValue, delay, options = { leading: false }) {
+    const [value, setValue] = react.useState(defaultValue);
+    const timeoutRef = react.useRef(null);
+    const leadingRef = react.useRef(true);
+    const clearTimeout = react.useCallback(() => window.clearTimeout(timeoutRef.current), []);
+    react.useEffect(() => clearTimeout, [clearTimeout]);
+    const debouncedSetValue = react.useCallback((newValue) => {
+        clearTimeout();
+        if (leadingRef.current && options.leading) {
+            setValue(newValue);
+        }
+        else {
+            timeoutRef.current = window.setTimeout(() => {
+                leadingRef.current = true;
+                setValue(newValue);
+            }, delay);
+        }
+        leadingRef.current = false;
+    }, [options.leading, clearTimeout, delay]);
+    return [value, debouncedSetValue];
+}
+
+exports.useDebouncedState = useDebouncedState;
+//# sourceMappingURL=useDebouncedState.cjs.map

package/dist/hooks/useDebouncedState.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedState.cjs","sources":["../../hooks/useDebouncedState.tsx"],"sourcesContent":["import {\n  SetStateAction,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\n\nexport interface UseDebouncedStateOptions {\n  /**\n   * If `true`, the state will be updated immediately on the first call (leading edge).\n   * Subsequent calls within the delay period will be debounced.\n   * @default false\n   */\n  leading?: boolean;\n}\n\nexport type UseDebouncedStateReturnValue<T> = [\n  T,\n  (newValue: SetStateAction<T>) => void\n];\n\n/**\n * A hook that debounces the state update.\n * @param defaultValue - The default value of the state.\n * @param delay - The delay time in milliseconds.\n * @param options - The options for the hook.\n * @returns A tuple containing the current value and the debounced set value function.\n *\n * @example\n * const [value, setValue] = useDebouncedState('Hello', 1000);\n\n * @example\n * const [value, setValue] = useDebouncedState('Hello', 1000, { leading: true });\n */\nexport function useDebouncedState<T = any>(\n  defaultValue: T,\n  delay: number,\n  options: UseDebouncedStateOptions = { leading: false }\n): UseDebouncedStateReturnValue<T> {\n  const [value, setValue] = useState(defaultValue);\n  const timeoutRef = useRef<number | null>(null);\n  const leadingRef = useRef(true);\n\n  const clearTimeout = useCallback(\n    () => window.clearTimeout(timeoutRef.current!),\n    []\n  );\n  useEffect(() => clearTimeout, [clearTimeout]);\n\n  const debouncedSetValue = useCallback(\n    (newValue: SetStateAction<T>) => {\n      clearTimeout();\n      if (leadingRef.current && options.leading) {\n        setValue(newValue);\n      } else {\n        timeoutRef.current = window.setTimeout(() => {\n          leadingRef.current = true;\n          setValue(newValue);\n        }, delay);\n      }\n      leadingRef.current = false;\n    },\n    [options.leading, clearTimeout, delay]\n  );\n\n  return [value, debouncedSetValue] as const;\n}\n"],"names":["useState","useRef","useCallback","useEffect"],"mappings":";;;;AAsBA;;;;;;;;;;;;AAYG;AACa,SAAA,iBAAiB,CAC/B,YAAe,EACf,KAAa,EACb,OAAA,GAAoC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAA;IAEtD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGA,cAAQ,CAAC,YAAY,CAAC,CAAC;AACjD,IAAA,MAAM,UAAU,GAAGC,YAAM,CAAgB,IAAI,CAAC,CAAC;AAC/C,IAAA,MAAM,UAAU,GAAGA,YAAM,CAAC,IAAI,CAAC,CAAC;AAEhC,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,MAAM,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,OAAQ,CAAC,EAC9C,EAAE,CACH,CAAC;IACFC,eAAS,CAAC,MAAM,YAAY,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;AAE9C,IAAA,MAAM,iBAAiB,GAAGD,iBAAW,CACnC,CAAC,QAA2B,KAAI;AAC9B,QAAA,YAAY,EAAE,CAAC;QACf,IAAI,UAAU,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,EAAE;YACzC,QAAQ,CAAC,QAAQ,CAAC,CAAC;SACpB;aAAM;YACL,UAAU,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;AAC1C,gBAAA,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;gBAC1B,QAAQ,CAAC,QAAQ,CAAC,CAAC;aACpB,EAAE,KAAK,CAAC,CAAC;SACX;AACD,QAAA,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;KAC5B,EACD,CAAC,OAAO,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,CAAC,CACvC,CAAC;AAEF,IAAA,OAAO,CAAC,KAAK,EAAE,iBAAiB,CAAU,CAAC;AAC7C;;;;"}

package/dist/hooks/useDebouncedState.d.ts

@@ -0,0 +1,28 @@
+import { SetStateAction } from 'react';
+export interface UseDebouncedStateOptions {
+    /**
+     * If `true`, the state will be updated immediately on the first call (leading edge).
+     * Subsequent calls within the delay period will be debounced.
+     * @default false
+     */
+    leading?: boolean;
+}
+export type UseDebouncedStateReturnValue<T> = [
+    T,
+    (newValue: SetStateAction<T>) => void
+];
+/**
+ * A hook that debounces the state update.
+ * @param defaultValue - The default value of the state.
+ * @param delay - The delay time in milliseconds.
+ * @param options - The options for the hook.
+ * @returns A tuple containing the current value and the debounced set value function.
+ *
+ * @example
+ * const [value, setValue] = useDebouncedState('Hello', 1000);
+
+ * @example
+ * const [value, setValue] = useDebouncedState('Hello', 1000, { leading: true });
+ */
+export declare function useDebouncedState<T = any>(defaultValue: T, delay: number, options?: UseDebouncedStateOptions): UseDebouncedStateReturnValue<T>;
+//# sourceMappingURL=useDebouncedState.d.ts.map

package/dist/hooks/useDebouncedState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedState.d.ts","sourceRoot":"","sources":["../../hooks/useDebouncedState.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EAKf,MAAM,OAAO,CAAC;AAEf,MAAM,WAAW,wBAAwB;IACvC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,MAAM,4BAA4B,CAAC,CAAC,IAAI;IAC5C,CAAC;IACD,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,IAAI;CACtC,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,GAAG,GAAG,EACvC,YAAY,EAAE,CAAC,EACf,KAAK,EAAE,MAAM,EACb,OAAO,GAAE,wBAA6C,GACrD,4BAA4B,CAAC,CAAC,CAAC,CA4BjC"}

package/dist/hooks/useDebouncedState.js

@@ -0,0 +1,39 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+/**
+ * A hook that debounces the state update.
+ * @param defaultValue - The default value of the state.
+ * @param delay - The delay time in milliseconds.
+ * @param options - The options for the hook.
+ * @returns A tuple containing the current value and the debounced set value function.
+ *
+ * @example
+ * const [value, setValue] = useDebouncedState('Hello', 1000);
+
+ * @example
+ * const [value, setValue] = useDebouncedState('Hello', 1000, { leading: true });
+ */
+function useDebouncedState(defaultValue, delay, options = { leading: false }) {
+    const [value, setValue] = useState(defaultValue);
+    const timeoutRef = useRef(null);
+    const leadingRef = useRef(true);
+    const clearTimeout = useCallback(() => window.clearTimeout(timeoutRef.current), []);
+    useEffect(() => clearTimeout, [clearTimeout]);
+    const debouncedSetValue = useCallback((newValue) => {
+        clearTimeout();
+        if (leadingRef.current && options.leading) {
+            setValue(newValue);
+        }
+        else {
+            timeoutRef.current = window.setTimeout(() => {
+                leadingRef.current = true;
+                setValue(newValue);
+            }, delay);
+        }
+        leadingRef.current = false;
+    }, [options.leading, clearTimeout, delay]);
+    return [value, debouncedSetValue];
+}
+
+export { useDebouncedState };
+//# sourceMappingURL=useDebouncedState.js.map

package/dist/hooks/useDebouncedState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedState.js","sources":["../../hooks/useDebouncedState.tsx"],"sourcesContent":["import {\n  SetStateAction,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\n\nexport interface UseDebouncedStateOptions {\n  /**\n   * If `true`, the state will be updated immediately on the first call (leading edge).\n   * Subsequent calls within the delay period will be debounced.\n   * @default false\n   */\n  leading?: boolean;\n}\n\nexport type UseDebouncedStateReturnValue<T> = [\n  T,\n  (newValue: SetStateAction<T>) => void\n];\n\n/**\n * A hook that debounces the state update.\n * @param defaultValue - The default value of the state.\n * @param delay - The delay time in milliseconds.\n * @param options - The options for the hook.\n * @returns A tuple containing the current value and the debounced set value function.\n *\n * @example\n * const [value, setValue] = useDebouncedState('Hello', 1000);\n\n * @example\n * const [value, setValue] = useDebouncedState('Hello', 1000, { leading: true });\n */\nexport function useDebouncedState<T = any>(\n  defaultValue: T,\n  delay: number,\n  options: UseDebouncedStateOptions = { leading: false }\n): UseDebouncedStateReturnValue<T> {\n  const [value, setValue] = useState(defaultValue);\n  const timeoutRef = useRef<number | null>(null);\n  const leadingRef = useRef(true);\n\n  const clearTimeout = useCallback(\n    () => window.clearTimeout(timeoutRef.current!),\n    []\n  );\n  useEffect(() => clearTimeout, [clearTimeout]);\n\n  const debouncedSetValue = useCallback(\n    (newValue: SetStateAction<T>) => {\n      clearTimeout();\n      if (leadingRef.current && options.leading) {\n        setValue(newValue);\n      } else {\n        timeoutRef.current = window.setTimeout(() => {\n          leadingRef.current = true;\n          setValue(newValue);\n        }, delay);\n      }\n      leadingRef.current = false;\n    },\n    [options.leading, clearTimeout, delay]\n  );\n\n  return [value, debouncedSetValue] as const;\n}\n"],"names":[],"mappings":";;AAsBA;;;;;;;;;;;;AAYG;AACa,SAAA,iBAAiB,CAC/B,YAAe,EACf,KAAa,EACb,OAAA,GAAoC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAA;IAEtD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AACjD,IAAA,MAAM,UAAU,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;AAC/C,IAAA,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAEhC,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,MAAM,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,OAAQ,CAAC,EAC9C,EAAE,CACH,CAAC;IACF,SAAS,CAAC,MAAM,YAAY,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;AAE9C,IAAA,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,QAA2B,KAAI;AAC9B,QAAA,YAAY,EAAE,CAAC;QACf,IAAI,UAAU,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,EAAE;YACzC,QAAQ,CAAC,QAAQ,CAAC,CAAC;SACpB;aAAM;YACL,UAAU,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;AAC1C,gBAAA,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;gBAC1B,QAAQ,CAAC,QAAQ,CAAC,CAAC;aACpB,EAAE,KAAK,CAAC,CAAC;SACX;AACD,QAAA,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;KAC5B,EACD,CAAC,OAAO,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,CAAC,CACvC,CAAC;AAEF,IAAA,OAAO,CAAC,KAAK,EAAE,iBAAiB,CAAU,CAAC;AAC7C;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raystack/apsara",
-  "version": "0.53.1",
+  "version": "0.53.3",
   "types": "dist/index.d.ts",
   "sideEffects": false,
   "engines": {