@raystack/apsara 1.0.0-rc.0 → 1.0.0-rc.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/callout/callout.cjs

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

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

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

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

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

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

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

package/dist/components/callout/callout.js

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

package/dist/components/callout/callout.js.map

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

package/dist/components/checkbox/checkbox.cjs

@@ -5,16 +5,17 @@ var jsxRuntime = require('react/jsx-runtime');
 var checkbox = require('@base-ui/react/checkbox');
 var checkboxGroup = require('@base-ui/react/checkbox-group');
 var classVarianceAuthority = require('class-variance-authority');
-var React = require('react');
 var checkbox_module = require('./checkbox.module.css.cjs');
 
 const CheckMarkIcon = () => (jsxRuntime.jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', className: checkbox_module.default.icon, children: jsxRuntime.jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M11.9005 4.9671C12.0894 4.6782 12.0083 4.29086 11.7194 4.10197C11.4305 3.91307 11.0432 3.99414 10.8543 4.28304L7.15577 9.93961L5.04542 8.02112C4.79001 7.78893 4.39473 7.80775 4.16254 8.06316C3.93035 8.31857 3.94917 8.71385 4.20458 8.94605L6.85731 11.3576C6.99274 11.4807 7.17532 11.5383 7.35686 11.5151C7.53841 11.492 7.70068 11.3904 7.80084 11.2372L11.9005 4.9671Z', fill: 'currentColor' }) }));
 const IndeterminateIcon = () => (jsxRuntime.jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', className: checkbox_module.default.icon, children: jsxRuntime.jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M11.5 8.5H4.5C4.22386 8.5 4 8.27614 4 8C4 7.72386 4.22386 7.5 4.5 7.5H11.5C11.7761 7.5 12 7.72386 12 8C12 8.27614 11.7761 8.5 11.5 8.5Z', fill: 'currentColor' }) }));
-const CheckboxGroup = React.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx(checkboxGroup.CheckboxGroup, { ref: ref, className: classVarianceAuthority.cx(checkbox_module.default.group, className), ...props })));
+function CheckboxGroup({ className, ...props }) {
+    return (jsxRuntime.jsx(checkboxGroup.CheckboxGroup, { className: classVarianceAuthority.cx(checkbox_module.default.group, className), ...props }));
+}
 CheckboxGroup.displayName = 'Checkbox.Group';
-const CheckboxItem = React.forwardRef(({ className, ...props }, ref) => {
-    return (jsxRuntime.jsx(checkbox.Checkbox.Root, { className: classVarianceAuthority.cx(checkbox_module.default.checkbox, className), ref: ref, ...props, children: jsxRuntime.jsx(checkbox.Checkbox.Indicator, { className: checkbox_module.default.indicator, render: (props, state) => (jsxRuntime.jsx("span", { ...props, children: state.indeterminate ? jsxRuntime.jsx(IndeterminateIcon, {}) : jsxRuntime.jsx(CheckMarkIcon, {}) })) }) }));
-});
+function CheckboxItem({ className, ...props }) {
+    return (jsxRuntime.jsx(checkbox.Checkbox.Root, { className: classVarianceAuthority.cx(checkbox_module.default.checkbox, className), ...props, children: jsxRuntime.jsx(checkbox.Checkbox.Indicator, { className: checkbox_module.default.indicator, render: (props, state) => (jsxRuntime.jsx("span", { ...props, children: state.indeterminate ? jsxRuntime.jsx(IndeterminateIcon, {}) : jsxRuntime.jsx(CheckMarkIcon, {}) })) }) }));
+}
 CheckboxItem.displayName = 'Checkbox';
 const Checkbox = Object.assign(CheckboxItem, {
     Group: CheckboxGroup

package/dist/components/checkbox/checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.cjs","sources":["../../../components/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport { CheckboxGroup as CheckboxGroupPrimitive } from '@base-ui/react/checkbox-group';\nimport { cx } from 'class-variance-authority';\nimport { ElementRef, forwardRef } from 'react';\n\nimport styles from './checkbox.module.css';\n\nconst CheckMarkIcon = () => (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='16'\n    height='16'\n    viewBox='0 0 16 16'\n    fill='none'\n    className={styles.icon}\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M11.9005 4.9671C12.0894 4.6782 12.0083 4.29086 11.7194 4.10197C11.4305 3.91307 11.0432 3.99414 10.8543 4.28304L7.15577 9.93961L5.04542 8.02112C4.79001 7.78893 4.39473 7.80775 4.16254 8.06316C3.93035 8.31857 3.94917 8.71385 4.20458 8.94605L6.85731 11.3576C6.99274 11.4807 7.17532 11.5383 7.35686 11.5151C7.53841 11.492 7.70068 11.3904 7.80084 11.2372L11.9005 4.9671Z'\n      fill='currentColor'\n    />\n  </svg>\n);\n\nconst IndeterminateIcon = () => (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='16'\n    height='16'\n    viewBox='0 0 16 16'\n    fill='none'\n    className={styles.icon}\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M11.5 8.5H4.5C4.22386 8.5 4 8.27614 4 8C4 7.72386 4.22386 7.5 4.5 7.5H11.5C11.7761 7.5 12 7.72386 12 8C12 8.27614 11.7761 8.5 11.5 8.5Z'\n      fill='currentColor'\n    />\n  </svg>\n);\n\nconst CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupPrimitive.Props>(\n  ({ className, ...props }, ref) => (\n    <CheckboxGroupPrimitive\n      ref={ref}\n      className={cx(styles.group, className)}\n      {...props}\n    />\n  )\n);\n\nCheckboxGroup.displayName = 'Checkbox.Group';\n\nconst CheckboxItem = forwardRef<\n  ElementRef<typeof CheckboxPrimitive.Root>,\n  CheckboxPrimitive.Root.Props\n>(({ className, ...props }, ref) => {\n  return (\n    <CheckboxPrimitive.Root\n      className={cx(styles.checkbox, className)}\n      ref={ref}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        className={styles.indicator}\n        render={(props, state) => (\n          <span {...props}>\n            {state.indeterminate ? <IndeterminateIcon /> : <CheckMarkIcon />}\n          </span>\n        )}\n      />\n    </CheckboxPrimitive.Root>\n  );\n});\n\nCheckboxItem.displayName = 'Checkbox';\n\nexport const Checkbox = Object.assign(CheckboxItem, {\n  Group: CheckboxGroup\n});\n"],"names":[],"mappings":";;;;;;;;;;AASA;AAkBA;AAkBA;AAUA;AAEA;AAIE;AAgBF;AAEA;;AAGE;AACD;;"}
+{"version":3,"file":"checkbox.cjs","sources":["../../../components/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport { CheckboxGroup as CheckboxGroupPrimitive } from '@base-ui/react/checkbox-group';\nimport { cx } from 'class-variance-authority';\n\nimport styles from './checkbox.module.css';\n\nconst CheckMarkIcon = () => (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='16'\n    height='16'\n    viewBox='0 0 16 16'\n    fill='none'\n    className={styles.icon}\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M11.9005 4.9671C12.0894 4.6782 12.0083 4.29086 11.7194 4.10197C11.4305 3.91307 11.0432 3.99414 10.8543 4.28304L7.15577 9.93961L5.04542 8.02112C4.79001 7.78893 4.39473 7.80775 4.16254 8.06316C3.93035 8.31857 3.94917 8.71385 4.20458 8.94605L6.85731 11.3576C6.99274 11.4807 7.17532 11.5383 7.35686 11.5151C7.53841 11.492 7.70068 11.3904 7.80084 11.2372L11.9005 4.9671Z'\n      fill='currentColor'\n    />\n  </svg>\n);\n\nconst IndeterminateIcon = () => (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='16'\n    height='16'\n    viewBox='0 0 16 16'\n    fill='none'\n    className={styles.icon}\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M11.5 8.5H4.5C4.22386 8.5 4 8.27614 4 8C4 7.72386 4.22386 7.5 4.5 7.5H11.5C11.7761 7.5 12 7.72386 12 8C12 8.27614 11.7761 8.5 11.5 8.5Z'\n      fill='currentColor'\n    />\n  </svg>\n);\n\nfunction CheckboxGroup({ className, ...props }: CheckboxGroupPrimitive.Props) {\n  return (\n    <CheckboxGroupPrimitive\n      className={cx(styles.group, className)}\n      {...props}\n    />\n  );\n}\n\nCheckboxGroup.displayName = 'Checkbox.Group';\n\nfunction CheckboxItem({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      className={cx(styles.checkbox, className)}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        className={styles.indicator}\n        render={(props, state) => (\n          <span {...props}>\n            {state.indeterminate ? <IndeterminateIcon /> : <CheckMarkIcon />}\n          </span>\n        )}\n      />\n    </CheckboxPrimitive.Root>\n  );\n}\n\nCheckboxItem.displayName = 'Checkbox';\n\nexport const Checkbox = Object.assign(CheckboxItem, {\n  Group: CheckboxGroup\n});\n"],"names":[],"mappings":";;;;;;;;;AAQA;AAkBA;AAkBA;AACE;AAMF;AAEA;AAEA;AACE;AAeF;AAEA;;AAGE;AACD;;"}

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

@@ -1,4 +1,15 @@
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/checkbox").CheckboxRootProps, "ref"> & import("react").RefAttributes<HTMLElement>> & {
-    Group: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/checkbox-group").CheckboxGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
+import { CheckboxGroup as CheckboxGroupPrimitive } from '@base-ui/react/checkbox-group';
+declare function CheckboxGroup({ className, ...props }: CheckboxGroupPrimitive.Props): import("react/jsx-runtime").JSX.Element;
+declare namespace CheckboxGroup {
+    var displayName: string;
+}
+declare function CheckboxItem({ className, ...props }: CheckboxPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
+declare namespace CheckboxItem {
+    var displayName: string;
+}
+export declare const Checkbox: typeof CheckboxItem & {
+    Group: typeof CheckboxGroup;
 };
+export {};
 //# sourceMappingURL=checkbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAiFA,eAAO,MAAM,QAAQ;;CAEnB,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,aAAa,IAAI,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAyCxF,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,CAAC,KAAK,2CAO3E;kBAPQ,aAAa;;;AAWtB,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,2CAgB1E;kBAhBQ,YAAY;;;AAoBrB,eAAO,MAAM,QAAQ;;CAEnB,CAAC"}

package/dist/components/checkbox/checkbox.js

@@ -3,16 +3,17 @@ import { jsx } from 'react/jsx-runtime';
 import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
 import { CheckboxGroup as CheckboxGroup$1 } from '@base-ui/react/checkbox-group';
 import { cx } from 'class-variance-authority';
-import { forwardRef } from 'react';
 import styles from './checkbox.module.css.js';
 
 const CheckMarkIcon = () => (jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', className: styles.icon, children: jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M11.9005 4.9671C12.0894 4.6782 12.0083 4.29086 11.7194 4.10197C11.4305 3.91307 11.0432 3.99414 10.8543 4.28304L7.15577 9.93961L5.04542 8.02112C4.79001 7.78893 4.39473 7.80775 4.16254 8.06316C3.93035 8.31857 3.94917 8.71385 4.20458 8.94605L6.85731 11.3576C6.99274 11.4807 7.17532 11.5383 7.35686 11.5151C7.53841 11.492 7.70068 11.3904 7.80084 11.2372L11.9005 4.9671Z', fill: 'currentColor' }) }));
 const IndeterminateIcon = () => (jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', className: styles.icon, children: jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M11.5 8.5H4.5C4.22386 8.5 4 8.27614 4 8C4 7.72386 4.22386 7.5 4.5 7.5H11.5C11.7761 7.5 12 7.72386 12 8C12 8.27614 11.7761 8.5 11.5 8.5Z', fill: 'currentColor' }) }));
-const CheckboxGroup = forwardRef(({ className, ...props }, ref) => (jsx(CheckboxGroup$1, { ref: ref, className: cx(styles.group, className), ...props })));
+function CheckboxGroup({ className, ...props }) {
+    return (jsx(CheckboxGroup$1, { className: cx(styles.group, className), ...props }));
+}
 CheckboxGroup.displayName = 'Checkbox.Group';
-const CheckboxItem = forwardRef(({ className, ...props }, ref) => {
-    return (jsx(Checkbox$1.Root, { className: cx(styles.checkbox, className), ref: ref, ...props, children: jsx(Checkbox$1.Indicator, { className: styles.indicator, render: (props, state) => (jsx("span", { ...props, children: state.indeterminate ? jsx(IndeterminateIcon, {}) : jsx(CheckMarkIcon, {}) })) }) }));
-});
+function CheckboxItem({ className, ...props }) {
+    return (jsx(Checkbox$1.Root, { className: cx(styles.checkbox, className), ...props, children: jsx(Checkbox$1.Indicator, { className: styles.indicator, render: (props, state) => (jsx("span", { ...props, children: state.indeterminate ? jsx(IndeterminateIcon, {}) : jsx(CheckMarkIcon, {}) })) }) }));
+}
 CheckboxItem.displayName = 'Checkbox';
 const Checkbox = Object.assign(CheckboxItem, {
     Group: CheckboxGroup

package/dist/components/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../components/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport { CheckboxGroup as CheckboxGroupPrimitive } from '@base-ui/react/checkbox-group';\nimport { cx } from 'class-variance-authority';\nimport { ElementRef, forwardRef } from 'react';\n\nimport styles from './checkbox.module.css';\n\nconst CheckMarkIcon = () => (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='16'\n    height='16'\n    viewBox='0 0 16 16'\n    fill='none'\n    className={styles.icon}\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M11.9005 4.9671C12.0894 4.6782 12.0083 4.29086 11.7194 4.10197C11.4305 3.91307 11.0432 3.99414 10.8543 4.28304L7.15577 9.93961L5.04542 8.02112C4.79001 7.78893 4.39473 7.80775 4.16254 8.06316C3.93035 8.31857 3.94917 8.71385 4.20458 8.94605L6.85731 11.3576C6.99274 11.4807 7.17532 11.5383 7.35686 11.5151C7.53841 11.492 7.70068 11.3904 7.80084 11.2372L11.9005 4.9671Z'\n      fill='currentColor'\n    />\n  </svg>\n);\n\nconst IndeterminateIcon = () => (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='16'\n    height='16'\n    viewBox='0 0 16 16'\n    fill='none'\n    className={styles.icon}\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M11.5 8.5H4.5C4.22386 8.5 4 8.27614 4 8C4 7.72386 4.22386 7.5 4.5 7.5H11.5C11.7761 7.5 12 7.72386 12 8C12 8.27614 11.7761 8.5 11.5 8.5Z'\n      fill='currentColor'\n    />\n  </svg>\n);\n\nconst CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupPrimitive.Props>(\n  ({ className, ...props }, ref) => (\n    <CheckboxGroupPrimitive\n      ref={ref}\n      className={cx(styles.group, className)}\n      {...props}\n    />\n  )\n);\n\nCheckboxGroup.displayName = 'Checkbox.Group';\n\nconst CheckboxItem = forwardRef<\n  ElementRef<typeof CheckboxPrimitive.Root>,\n  CheckboxPrimitive.Root.Props\n>(({ className, ...props }, ref) => {\n  return (\n    <CheckboxPrimitive.Root\n      className={cx(styles.checkbox, className)}\n      ref={ref}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        className={styles.indicator}\n        render={(props, state) => (\n          <span {...props}>\n            {state.indeterminate ? <IndeterminateIcon /> : <CheckMarkIcon />}\n          </span>\n        )}\n      />\n    </CheckboxPrimitive.Root>\n  );\n});\n\nCheckboxItem.displayName = 'Checkbox';\n\nexport const Checkbox = Object.assign(CheckboxItem, {\n  Group: CheckboxGroup\n});\n"],"names":[],"mappings":";;;;;;;;AASA;AAkBA;AAkBA;AAUA;AAEA;AAIE;AAgBF;AAEA;;AAGE;AACD;;"}
+{"version":3,"file":"checkbox.js","sources":["../../../components/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport { CheckboxGroup as CheckboxGroupPrimitive } from '@base-ui/react/checkbox-group';\nimport { cx } from 'class-variance-authority';\n\nimport styles from './checkbox.module.css';\n\nconst CheckMarkIcon = () => (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='16'\n    height='16'\n    viewBox='0 0 16 16'\n    fill='none'\n    className={styles.icon}\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M11.9005 4.9671C12.0894 4.6782 12.0083 4.29086 11.7194 4.10197C11.4305 3.91307 11.0432 3.99414 10.8543 4.28304L7.15577 9.93961L5.04542 8.02112C4.79001 7.78893 4.39473 7.80775 4.16254 8.06316C3.93035 8.31857 3.94917 8.71385 4.20458 8.94605L6.85731 11.3576C6.99274 11.4807 7.17532 11.5383 7.35686 11.5151C7.53841 11.492 7.70068 11.3904 7.80084 11.2372L11.9005 4.9671Z'\n      fill='currentColor'\n    />\n  </svg>\n);\n\nconst IndeterminateIcon = () => (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='16'\n    height='16'\n    viewBox='0 0 16 16'\n    fill='none'\n    className={styles.icon}\n  >\n    <path\n      fillRule='evenodd'\n      clipRule='evenodd'\n      d='M11.5 8.5H4.5C4.22386 8.5 4 8.27614 4 8C4 7.72386 4.22386 7.5 4.5 7.5H11.5C11.7761 7.5 12 7.72386 12 8C12 8.27614 11.7761 8.5 11.5 8.5Z'\n      fill='currentColor'\n    />\n  </svg>\n);\n\nfunction CheckboxGroup({ className, ...props }: CheckboxGroupPrimitive.Props) {\n  return (\n    <CheckboxGroupPrimitive\n      className={cx(styles.group, className)}\n      {...props}\n    />\n  );\n}\n\nCheckboxGroup.displayName = 'Checkbox.Group';\n\nfunction CheckboxItem({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      className={cx(styles.checkbox, className)}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        className={styles.indicator}\n        render={(props, state) => (\n          <span {...props}>\n            {state.indeterminate ? <IndeterminateIcon /> : <CheckMarkIcon />}\n          </span>\n        )}\n      />\n    </CheckboxPrimitive.Root>\n  );\n}\n\nCheckboxItem.displayName = 'Checkbox';\n\nexport const Checkbox = Object.assign(CheckboxItem, {\n  Group: CheckboxGroup\n});\n"],"names":[],"mappings":";;;;;;;AAQA;AAkBA;AAkBA;AACE;AAMF;AAEA;AAEA;AACE;AAeF;AAEA;;AAGE;AACD;;"}

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

@@ -11,7 +11,7 @@ var codeBlock_module = require('./code-block.module.css.cjs');
 var codeBlockRoot = require('./code-block-root.cjs');
 
 const emptyTheme = { plain: {}, styles: [] };
-const CodeBlockCode = React.forwardRef(({ children, language, className, value, ...props }, ref) => {
+const CodeBlockCode = ({ children, language, className, value, ...props }) => {
     const { value: contextValue, setCode, setValue } = codeBlockRoot.useCodeBlockContext();
     const computedValue = value ?? language;
     const isContextValueDefined = !!contextValue;
@@ -34,9 +34,9 @@ const CodeBlockCode = React.forwardRef(({ children, language, className, value,
     ]);
     if (!shouldRender)
         return null;
-    return (jsxRuntime.jsx("div", { ref: ref, className: classVarianceAuthority.cx(codeBlock_module.default.codeContent, className), ...props, children: jsxRuntime.jsx(CodeHighlight, { content: content, language: language }) }));
-});
-CodeBlockCode.displayName = 'CodeBlockCode';
+    return (jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(codeBlock_module.default.codeContent, className), ...props, children: jsxRuntime.jsx(CodeHighlight, { content: content, language: language }) }));
+};
+CodeBlockCode.displayName = 'CodeBlock.Code';
 const CodeHighlight = React.memo(({ content, language }) => {
     const { hideLineNumbers, maxLines, collapsed } = codeBlockRoot.useCodeBlockContext();
     const canCollapse = maxLines && maxLines > 0;

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

@@ -1 +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, Language } from 'prism-react-renderer';\nimport { forwardRef, HTMLAttributes, memo } from 'react';\nimport { useIsomorphicLayoutEffect } from '~/hooks';\nimport code from './code.module.css';\nimport styles from './code-block.module.css';\nimport { useCodeBlockContext } from './code-block-root';\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":";;;;;;;;;;;;AAiBA;;AAII;AACA;AACA;;AAGA;;;AAIE;;;AAEA;;AACF;;;;;;;AAOC;AAED;AAAmB;AAEnB;AAKF;AAGF;AAEA;;AAGI;AACA;;;;AAiCF;;"}
+{"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, Language } from 'prism-react-renderer';\nimport { ComponentProps, memo } from 'react';\nimport { useIsomorphicLayoutEffect } from '~/hooks';\nimport code from './code.module.css';\nimport styles from './code-block.module.css';\nimport { useCodeBlockContext } from './code-block-root';\n\nexport interface CodeBlockCodeProps extends ComponentProps<'div'> {\n  children: string;\n  language: Language;\n  value?: string;\n  className?: string;\n}\n\nconst emptyTheme = { plain: {}, styles: [] };\n\nexport const CodeBlockCode = ({\n  children,\n  language,\n  className,\n  value,\n  ...props\n}: CodeBlockCodeProps) => {\n  const { value: contextValue, setCode, setValue } = useCodeBlockContext();\n  const computedValue = value ?? language;\n  const isContextValueDefined = !!contextValue;\n  const shouldRender = !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 className={cx(styles.codeContent, className)} {...props}>\n      <CodeHighlight content={content} language={language} />\n    </div>\n  );\n};\n\nCodeBlockCode.displayName = 'CodeBlock.Code';\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":";;;;;;;;;;;;AAiBA;AAEa;AAOX;AACA;AACA;;AAEA;;;AAIE;;;AAEA;;AACF;;;;;;;AAOC;AAED;AAAmB;AAEnB;AAKF;AAEA;AAEA;;AAGI;AACA;;;;AAiCF;;"}