@saas-ui/date-picker/dist/index.mjs.map

Chakra UI - Date Picker Component

{"version":3,"sources":["../src/date-picker.tsx","../src/date-picker-context.tsx","../src/date-utils.ts","../src/date-picker-styles.ts","../src/date-picker-dialog.tsx","../src/calendar.tsx","../src/button.tsx","../src/calendar-context.ts","../src/calendar-grid.tsx","../src/calendar-cell.tsx","../src/use-calendar.ts","../src/date-range-picker.tsx","../src/date-range-calendar.tsx","../src/use-range-calendar.ts","../src/date-input.tsx","../src/date-field.tsx","../src/segmented-input.tsx","../src/segmented-input-styles.ts","../src/icons.tsx","../src/date-range-input.tsx","../src/date-picker-modal.tsx","../src/use-date-picker-modal.ts","../src/index.ts"],"sourcesContent":["import * as React from 'react'\nimport { useRef } from 'react'\nimport {\n  useDatePickerState,\n  DatePickerStateOptions,\n  DatePickerState,\n} from '@react-stately/datepicker'\nimport { useDatePicker } from '@react-aria/datepicker'\nimport { useLocale } from '@react-aria/i18n'\nimport {\n  ThemingProps,\n  PopoverProps,\n  useMultiStyleConfig,\n  Popover,\n  useTheme,\n} from '@chakra-ui/react'\nimport {\n  DatePickerProvider,\n  DatePickerStylesProvider,\n} from './date-picker-context'\n\nimport { DateValue, FormattedValue } from './types'\n\nimport { datePickerStyleConfig } from './date-picker-styles'\nimport { Calendar, getLocalTimeZone } from '@internationalized/date'\nimport { MaybeRenderProp, runIfFn } from '@chakra-ui/utils'\nimport { flushSync } from 'react-dom'\n\nexport interface DatePickerContainerProps\n  extends ThemingProps<'SuiDatePicker'>,\n    Omit<\n      DatePickerStateOptions<DateValue>,\n      | 'value'\n      | 'defaultValue'\n      | 'minValue'\n      | 'maxValue'\n      | 'onChange'\n      | 'shouldCloseOnSelect'\n    > {\n  value?: DateValue | null\n  minValue?: DateValue\n  maxValue?: DateValue\n  defaultValue?: DateValue\n  onChange?(value: DateValue | null): void\n  locale?: string\n  timeZone?: string\n  closeOnSelect?: boolean\n  children: MaybeRenderProp<DatePickerState>\n  createCalendar?(name: string): Calendar\n}\n\nexport const DatePickerContainer = (props: DatePickerContainerProps) => {\n  const {\n    children,\n    value: valueProp,\n    minValue,\n    maxValue,\n    defaultValue,\n    onChange,\n    closeOnSelect,\n    createCalendar,\n    ...rest\n  } = props\n\n  const {\n    locale: localeProp,\n    timeZone = getLocalTimeZone() || 'UTC',\n    hourCycle = 12,\n    firstDayOfWeek,\n  } = props\n\n  const { locale } = useLocale()\n\n  const theme = useTheme()\n\n  const styleConfig = theme.components['SuiDatePicker'] ?? datePickerStyleConfig\n\n  const styles = useMultiStyleConfig('SuiDatePicker', {\n    styleConfig,\n    ...props,\n  })\n\n  /* @ts-ignore: null is needed to reset the field, but gets a ts error in strict mode */\n  const state = useDatePickerState<DateValue | null>({\n    value: valueProp,\n    minValue,\n    maxValue,\n    defaultValue,\n    onChange,\n    shouldCloseOnSelect: closeOnSelect,\n    ...rest,\n  })\n\n  const datePickerRef = useRef<HTMLDivElement>(null)\n\n  const {\n    groupProps,\n    labelProps,\n    fieldProps,\n    buttonProps,\n    dialogProps,\n    descriptionProps,\n    errorMessageProps,\n    calendarProps,\n    isInvalid,\n    validationDetails,\n    validationErrors,\n  } = useDatePicker(\n    {\n      ['aria-label']: 'Date Picker',\n      value: state.value,\n      minValue,\n      maxValue,\n      onChange: state.setValue,\n      ...rest,\n    },\n    state,\n    datePickerRef\n  )\n\n  const context = {\n    locale: localeProp || locale,\n    state,\n    hourCycle,\n    timeZone,\n    firstDayOfWeek,\n    groupProps,\n    labelProps,\n    fieldProps,\n    buttonProps,\n    dialogProps,\n    calendarProps,\n    descriptionProps,\n    errorMessageProps,\n    datePickerRef,\n    isInvalid,\n    validationDetails,\n    validationErrors,\n    createCalendar,\n  }\n\n  return (\n    <DatePickerProvider value={context}>\n      <DatePickerStylesProvider value={styles}>\n        {runIfFn(children, state)}\n      </DatePickerStylesProvider>\n    </DatePickerProvider>\n  )\n}\n\nexport interface DatePickerProps<\n  TDateValue = DateValue,\n  TFormattedValue = FormattedValue,\n> extends Omit<DatePickerContainerProps, 'children'>,\n    Omit<PopoverProps, 'variant' | 'size' | 'initialFocusRef'> {}\n\n/**\n * DatePicker\n *\n * Allow users to select a date and time value.\n *\n * @see Docs https://saas-ui.dev/docs/date-time/date-picker\n */\nexport const DatePicker: React.FC<DatePickerProps> = (props) => {\n  const {\n    children,\n    arrowPadding,\n    arrowShadowColor,\n    arrowSize,\n    autoFocus,\n    boundary,\n    closeDelay,\n    closeOnBlur,\n    closeOnEsc,\n    computePositionOnMount,\n    defaultIsOpen,\n    direction,\n    eventListeners,\n    flip,\n    gutter,\n    isLazy = false,\n    lazyBehavior = 'keepMounted',\n    modifiers,\n    offset,\n    openDelay,\n    placement,\n    preventOverflow,\n    returnFocusOnClose,\n    strategy,\n    trigger,\n    ...containerProps\n  } = props\n\n  const popoverProps = {\n    arrowPadding,\n    arrowShadowColor,\n    arrowSize,\n    autoFocus,\n    boundary,\n    closeDelay,\n    closeOnBlur,\n    closeOnEsc,\n    computePositionOnMount,\n    defaultIsOpen,\n    direction,\n    eventListeners,\n    flip,\n    gutter,\n    isLazy,\n    lazyBehavior,\n    modifiers,\n    offset,\n    openDelay,\n    placement,\n    preventOverflow,\n    returnFocusOnClose,\n    strategy,\n    trigger,\n  }\n\n  return (\n    <DatePickerContainer {...containerProps} defaultOpen={defaultIsOpen}>\n      {(state) => {\n        return (\n          <Popover\n            {...popoverProps}\n            isOpen={state.isOpen}\n            onOpen={() => flushSync(() => state.setOpen(true))}\n            onClose={() => flushSync(() => state.setOpen(false))}\n          >\n            {children}\n          </Popover>\n        )\n      }}\n    </DatePickerContainer>\n  )\n}\n\n/**\n * DatePickerStatic\n *\n * Allow users to select a date and time value.\n *\n * @see Docs https://saas-ui.dev/docs/date-time/date-picker\n */\nexport interface DatePickerStaticProps extends DatePickerContainerProps {}\n\nexport const DatePickerStatic: React.FC<DatePickerStaticProps> = (props) => {\n  const { children, ...rest } = props\n  return <DatePickerContainer {...rest}>{children}</DatePickerContainer>\n}\n","import * as React from 'react'\nimport { SystemStyleObject } from '@chakra-ui/styled-system'\nimport {\n  DatePickerState,\n  DateRangePickerState,\n} from '@react-stately/datepicker'\nimport { DatePickerAria, DateRangePickerAria } from '@react-aria/datepicker'\nimport {\n  AriaCalendarCellProps,\n  useCalendarCell as useAriaCalendarCell,\n} from '@react-aria/calendar'\nimport { CalendarState, RangeCalendarState } from '@react-stately/calendar'\nimport { createContext, dataAttr } from '@chakra-ui/utils'\nimport {\n  Calendar,\n  CalendarDate,\n  getDayOfWeek,\n  isSameDay,\n  now,\n} from '@internationalized/date'\nimport { isDateInRange } from './date-utils'\nimport { usePopoverContext } from '@chakra-ui/react'\n\nexport const [DatePickerStylesProvider, useDatePickerStyles] = createContext<\n  Record<string, SystemStyleObject>\n>({\n  name: 'DatePickerStylesContext',\n})\n\ninterface BaseContextValue {\n  action?: 'date' | 'year'\n  datePickerRef: React.RefObject<HTMLDivElement>\n  locale: string\n  hourCycle: 12 | 24\n  timeZone: string\n  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'\n  createCalendar?(name: string): Calendar\n}\n\nexport interface DatePickerProviderValue\n  extends BaseContextValue,\n    DatePickerAria {\n  state: DatePickerState\n}\n\nexport interface DateRangePickerProviderValue\n  extends BaseContextValue,\n    DateRangePickerAria {\n  state: DateRangePickerState\n}\n\nconst [DatePickerProvider, useContext] = createContext<\n  DatePickerProviderValue | DateRangePickerProviderValue\n>({\n  name: 'DatePickerProvider',\n})\n\nexport { DatePickerProvider }\n\nexport const useDatePickerContext = () => {\n  const context = useContext()\n  if ('dateRange' in context.state) {\n    throw new Error(\n      'useDatePickerContext must be used within a DatePickerProvider'\n    )\n  }\n  return context as DatePickerProviderValue\n}\n\nexport const useDateRangePickerContext = () => {\n  const context = useContext()\n  if (!('dateRange' in context.state)) {\n    throw new Error(\n      'useDateRangePickerContext must be used within a DateRangePicker'\n    )\n  }\n  return context as DateRangePickerProviderValue\n}\n\nexport const useDatePickerDialog = () => {\n  const { dialogProps, state, datePickerRef } = useContext()\n\n  React.useEffect(() => {\n    if (state.isOpen) {\n      setTimeout(() => {\n        const parent = datePickerRef.current?.parentNode\n        const el =\n          parent?.querySelector<HTMLElement>('[data-selected]') ||\n          parent?.querySelector<HTMLElement>('[data-today]') ||\n          parent?.querySelector<HTMLElement>(\n            'td button:not([aria-disabled=\"true\"])'\n          )\n\n        el?.focus()\n      }, 0)\n    }\n  }, [datePickerRef, state.isOpen])\n\n  return {\n    dialogProps: {\n      ...dialogProps,\n    },\n  }\n}\n\nexport const useDatePickerInput = () => {\n  const popover = usePopoverContext()\n  const { onClick, ...triggerProps } = popover.getTriggerProps()\n\n  const context = useDatePickerContext()\n\n  const { state, locale, groupProps, datePickerRef } = context\n\n  const buttonProps = {\n    ...context.buttonProps,\n    ...triggerProps,\n  }\n\n  return {\n    fieldProps: context.fieldProps,\n    groupProps,\n    buttonProps,\n    datePickerRef,\n    locale,\n    state,\n  }\n}\n\nexport const useDateRangePickerInput = () => {\n  const popover = usePopoverContext()\n  const { onClick, ...triggerProps } = popover.getTriggerProps()\n\n  const context = useDateRangePickerContext()\n\n  const { state, locale, groupProps, datePickerRef } = context\n\n  const buttonProps = {\n    ...context.buttonProps,\n    ...triggerProps,\n  }\n\n  return {\n    groupProps,\n    buttonProps,\n    datePickerRef,\n    locale,\n    state,\n    startFieldProps: context.startFieldProps,\n    endFieldProps: context.endFieldProps,\n  }\n}\n\nexport interface UseCalenderCellProps extends AriaCalendarCellProps {\n  currentMonth: CalendarDate\n}\n\nexport const useCalendarCell = (\n  props: UseCalenderCellProps,\n  state: CalendarState | RangeCalendarState,\n  ref: React.RefObject<HTMLElement>\n) => {\n  const context = useContext()\n  const { date, currentMonth } = props\n\n  const {\n    cellProps,\n    buttonProps,\n    isSelected,\n    isInvalid,\n    formattedDate,\n    isOutsideVisibleRange,\n    isUnavailable,\n  } = useAriaCalendarCell({ date }, state, ref)\n\n  const highlightedRange = 'highlightedRange' in state && state.highlightedRange\n  const dayOfWeek = getDayOfWeek(props.date, context.locale)\n\n  const isSelectionStart =\n    isSelected && highlightedRange && isSameDay(date, highlightedRange.start)\n  const isSelectionEnd =\n    isSelected && highlightedRange && isSameDay(date, highlightedRange.end)\n  const isRangeStart = isSelected && (dayOfWeek === 0 || date.day === 1)\n  const isRangeEnd =\n    isSelected &&\n    (dayOfWeek === 6 ||\n      date.day === currentMonth.calendar.getDaysInMonth(currentMonth))\n  const isRange =\n    isSelected && highlightedRange && isDateInRange(date, highlightedRange)\n\n  return {\n    cellProps,\n    buttonProps: {\n      ...buttonProps,\n      ['data-selected']: dataAttr(isSelected),\n      ['data-invalid']: dataAttr(isInvalid),\n      ['data-selection-start']: dataAttr(isSelectionStart ?? undefined),\n      ['data-selection-end']: dataAttr(isSelectionEnd ?? undefined),\n      ['data-range-start']: dataAttr(isRangeStart),\n      ['data-range-end']: dataAttr(isRangeEnd),\n      ['data-highlighted']: dataAttr(isRange ?? undefined),\n      ['data-today']: dataAttr(isSameDay(date, now(context.timeZone))),\n      ['data-outside-visible-range']: dataAttr(isOutsideVisibleRange),\n      ['data-unavailable']: dataAttr(isUnavailable),\n    },\n    isSelected,\n    isInvalid,\n    formattedDate,\n  }\n}\n","import { CalendarDateTime, DateFormatter } from '@internationalized/date'\nimport { DateRangeValue, DateValue } from './types'\n\nexport const isDateInRange = (\n  date: DateValue | null,\n  range: DateRangeValue\n) => {\n  if (!date || !range) {\n    return false\n  }\n  return !!(\n    range?.start &&\n    date.compare(range.start) >= 0 &&\n    range?.end &&\n    date.compare(range.end) <= 0\n  )\n}\n\nexport function parseDateString(\n  date: string,\n  locale: string,\n  timeZone: string\n) {\n  const regex = createRegex(locale, timeZone)\n  const { year, month, day } = extract(regex, date) ?? {}\n\n  if (\n    year != null &&\n    year.length === 4 &&\n    month != null &&\n    +month <= 12 &&\n    day != null &&\n    +day <= 31\n  ) {\n    return new CalendarDateTime(+year, +month, +day)\n  }\n\n  const time = Date.parse(date)\n  if (!isNaN(time)) {\n    const date = new Date(time)\n    return new CalendarDateTime(\n      date.getFullYear(),\n      date.getMonth() + 1,\n      date.getDate()\n    )\n  }\n}\n\nfunction createRegex(locale: string, timeZone: string) {\n  const formatter = new DateFormatter(locale, {\n    day: 'numeric',\n    month: 'numeric',\n    year: 'numeric',\n    timeZone,\n  })\n  const parts = formatter.formatToParts(new Date(2000, 11, 25))\n  return parts\n    .map(({ type, value }) =>\n      type === 'literal' ? value : `((?!=<${type}>)\\\\d+)`\n    )\n    .join('')\n}\n\nfunction extract(pattern: string | RegExp, str: string) {\n  const matches = str.match(pattern)\n  return pattern\n    .toString()\n    .match(/<(.+?)>/g)\n    ?.map((group) => {\n      const groupMatches = group.match(/<(.+)>/)\n      if (!groupMatches || groupMatches.length <= 0) {\n        return null\n      }\n      return group.match(/<(.+)>/)?.[1]\n    })\n    .reduce((acc: Record<string, string | null>, curr, index) => {\n      if (!curr) return acc\n      if (matches && matches.length > index) {\n        acc[curr] = matches[index + 1]\n      } else {\n        acc[curr] = null\n      }\n      return acc\n    }, {} as { year: string; month: string; day: string })\n}\n","import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'\nimport { transparentize } from '@chakra-ui/theme-tools'\n\nconst parts = [\n  'dialog',\n  'calendar',\n  'header',\n  'title',\n  'weekday',\n  'day',\n  'dayButton',\n  'dayLabel',\n] as const\n\nconst { definePartsStyle, defineMultiStyleConfig } =\n  createMultiStyleConfigHelpers(parts)\n\nconst baseStyle = definePartsStyle((props) => {\n  const { colorScheme: c } = props\n\n  const selected = {\n    bg: `${c}.500`,\n    color: 'white',\n    _dark: {\n      bg: `${c}.500`,\n      color: 'white',\n    },\n  }\n\n  return {\n    dialog: {},\n    calendar: {},\n    header: {\n      alignItems: 'center',\n    },\n    title: {\n      fontWeight: 'bold',\n      fontSize: 'sm',\n      flex: 1,\n      px: 3,\n    },\n    weekday: {\n      fontWeight: 'normal',\n      color: 'muted',\n      fontSize: 'sm',\n      h: 10,\n    },\n    day: {\n      py: '1px',\n      position: 'relative',\n    },\n    dayButton: {\n      borderRadius: 'md',\n      fontSize: 'sm',\n      px: 3,\n      h: 8,\n      outline: 'none',\n      _focus: {\n        outline: 'none',\n      },\n      _focusVisible: {\n        outline: 'none',\n        boxShadow: 'outline',\n        borderRadius: 'md',\n      },\n      '&[data-today]': {\n        bg: 'blackAlpha.50',\n        _dark: {\n          bg: 'whiteAlpha.50',\n        },\n      },\n      _hover: {\n        bg: 'blackAlpha.100',\n        borderRadius: 'md',\n        _dark: {\n          bg: 'whiteAlpha.100',\n        },\n      },\n      _selected: selected,\n      _highlighted: {\n        bg: `${c}.100`,\n        borderRadius: 'none',\n        color: 'black',\n        _dark: {\n          bg: transparentize(`${c}.400`, 0.2)(props.theme),\n          color: 'white',\n        },\n        '&[data-range-start]': {\n          borderStartRadius: 'md',\n        },\n        '&[data-range-end]': {\n          borderEndRadius: 'md',\n        },\n        '&[data-selection-start]': {\n          borderStartRadius: 'md',\n          color: 'white',\n          _before: {\n            content: '\"\"',\n            position: 'absolute',\n            inset: '1px',\n            borderRadius: 'md',\n            ...selected,\n          },\n        },\n        '&[data-selection-end]': {\n          borderEndRadius: 'md',\n          color: 'white',\n          _before: {\n            content: '\"\"',\n            position: 'absolute',\n            inset: '1px',\n            borderRadius: 'md',\n            ...selected,\n          },\n        },\n      },\n      _disabled: {\n        color: 'muted',\n        cursor: 'not-allowed',\n        _hover: {\n          bg: 'transparent',\n        },\n      },\n      '&[data-week-start], &[data-month-start]': { borderStartRadius: 'md' },\n      '&[data-week-end], &[data-month-end]': {\n        borderEndRadius: 'md',\n      },\n    },\n    dayLabel: {\n      position: 'relative',\n      zIndex: 1,\n    },\n    year: {\n      py: 2,\n      px: 3,\n      fontSize: 'sm',\n      borderRadius: 'md',\n      transitionProperty: 'common',\n      transitionDuration: 'normal',\n    },\n  }\n})\n\nexport const datePickerStyleConfig = defineMultiStyleConfig({\n  defaultProps: {\n    colorScheme: 'primary',\n  },\n  baseStyle,\n})\n","import * as React from 'react'\nimport { cx } from '@chakra-ui/utils'\n\nimport {\n  PopoverAnchor,\n  PopoverArrow,\n  PopoverBody,\n  PopoverContent,\n  PopoverContentProps,\n  PopoverTrigger,\n} from '@chakra-ui/react'\nimport { useDatePickerDialog, useDatePickerStyles } from './date-picker-context'\n\nexport const DatePickerTrigger = PopoverTrigger\nexport const DatePickerAnchor = PopoverAnchor\n\nexport interface DatePickerDialogProps\n  extends Omit<PopoverContentProps, 'children'> {\n  /**\n   * Hide the arrow\n   */\n  hideArrow?: boolean\n  /**\n   * The DatePickerDialog children\n   */\n  children: React.ReactNode\n}\n\nexport const DatePickerDialog: React.FC<DatePickerDialogProps> = (props) => {\n  const { children, hideArrow = true, ...rest } = props\n\n  const { dialogProps } = useDatePickerDialog()\n  const styles = useDatePickerStyles()\n\n  return (\n    <PopoverContent\n      {...rest}\n      {...dialogProps}\n      width=\"auto\"\n      minW=\"300px\"\n      sx={styles.dialog}\n      className={cx('sui-date-picker__dialog', props.className)}\n    >\n      {!hideArrow && <PopoverArrow />}\n      <PopoverBody>{children}</PopoverBody>\n    </PopoverContent>\n  )\n}\n","import { chakra, forwardRef, HTMLChakraProps } from '@chakra-ui/react'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@saas-ui/core'\nimport * as React from 'react'\nimport { NavButton, NavButtonProps } from './button'\nimport { CalendarProvider, useCalendarContext } from './calendar-context'\nimport { CalendarGrid } from './calendar-grid'\nimport { CalendarYearGrid } from './calendar-years'\nimport { useDatePickerStyles } from './date-picker-context'\nimport { useCalendar } from './use-calendar'\n\nexport interface DatePickerCalendarProps\n  extends Omit<HTMLChakraProps<'div'>, 'defaultValue' | 'onChange'> {}\n\nexport const DatePickerCalendar: React.FC<DatePickerCalendarProps> = (\n  props\n) => {\n  return (\n    <CalendarContainer {...props}>\n      <CalendarHeader>\n        <CalendarTitle />\n        <CalendarPrevious />\n        <CalendarNext />\n      </CalendarHeader>\n      <CalendarGrid />\n    </CalendarContainer>\n  )\n}\n\nexport const CalendarContainer: React.FC<DatePickerCalendarProps> = (props) => {\n  const { children, ...rest } = props\n\n  const styles = useDatePickerStyles()\n\n  const calendarStyles = {\n    ...styles.calendar,\n  }\n\n  const context = useCalendar(props)\n\n  const { calendarProps, ref } = context\n\n  return (\n    <CalendarProvider value={context}>\n      <chakra.div {...rest} {...calendarProps} ref={ref} __css={calendarStyles}>\n        {children}\n      </chakra.div>\n    </CalendarProvider>\n  )\n}\n\ninterface CalendarContentProps {}\n\nconst CalendarContent: React.FC<CalendarContentProps> = (props) => {\n  const { action } = useCalendarContext()\n  return action === 'calendar' ? <CalendarGrid /> : <CalendarYearGrid />\n}\n\nexport interface CalendarHeaderProps extends HTMLChakraProps<'div'> {}\n\nexport const CalendarHeader: React.FC<CalendarHeaderProps> = (props) => {\n  const { children, ...rest } = props\n  const styles = useDatePickerStyles()\n\n  const headerStyles = {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    pb: 4,\n    ...styles.header,\n  }\n\n  return (\n    <chakra.div {...rest} __css={headerStyles}>\n      {children}\n    </chakra.div>\n  )\n}\n\nexport interface CalendarTitleProps extends HTMLChakraProps<'h5'> {}\n\nexport const CalendarTitle: React.FC<CalendarTitleProps> = (props) => {\n  const { title } = useCalendarContext()\n\n  const styles = useDatePickerStyles()\n\n  const titleStyles = {\n    ...styles.title,\n  }\n\n  return (\n    <chakra.h5 {...props} __css={titleStyles}>\n      {title}\n    </chakra.h5>\n  )\n}\n\nexport interface CalendarNextProps extends Omit<NavButtonProps, 'aria-label'> {}\n\nexport const CalendarNext = forwardRef<CalendarNextProps, 'button'>(\n  (props, ref) => {\n    const { icon = <ChevronRightIcon boxSize={5} />, ...rest } = props\n    const { nextButtonProps } = useCalendarContext()\n    return (\n      <NavButton\n        ref={ref}\n        aria-label=\"Next\"\n        {...nextButtonProps}\n        icon={icon}\n        {...rest}\n      />\n    )\n  }\n)\n\nexport interface CalendarNextProps extends Omit<NavButtonProps, 'aria-label'> {}\n\nexport const CalendarPrevious = forwardRef<CalendarNextProps, 'button'>(\n  (props, ref) => {\n    const { icon = <ChevronLeftIcon boxSize={5} />, ...rest } = props\n    const { prevButtonProps } = useCalendarContext()\n    return (\n      <NavButton\n        ref={ref}\n        aria-label=\"Previous\"\n        {...prevButtonProps}\n        icon={icon}\n        {...rest}\n      />\n    )\n  }\n)\n","import * as React from 'react'\nimport {\n  Button,\n  ButtonProps,\n  forwardRef,\n  IconButton,\n  IconButtonProps,\n} from '@chakra-ui/react'\nimport { callAllHandlers } from '@chakra-ui/utils'\nimport { Pressable } from '@react-aria/interactions'\n\ninterface FieldButtonProps extends ButtonProps {\n  onPress?(e: any): void\n  onFocusChange?(isFocused: boolean): void\n}\n\nexport const FieldButton = forwardRef<FieldButtonProps, 'button'>(\n  (props, ref) => {\n    const { onPress, onFocusChange, onFocus, onBlur, ...rest } = props\n\n    return (\n      <Pressable onPress={onPress}>\n        <Button\n          ref={ref}\n          size=\"sm\"\n          h=\"1.75rem\"\n          mr=\"2\"\n          onFocus={() =>\n            callAllHandlers(() => onFocusChange?.(true), props.onFocus)\n          }\n          onBlur={() =>\n            callAllHandlers(() => onFocusChange?.(false), props.onBlur)\n          }\n          {...rest}\n        >\n          {props.children}\n        </Button>\n      </Pressable>\n    )\n  }\n)\n\nexport interface NavButtonProps extends IconButtonProps {\n  onPress?(e: any): void\n  onFocusChange?(isFocused: boolean): void\n}\n\nexport const NavButton = forwardRef<NavButtonProps, 'button'>((props, ref) => {\n  const { onPress, onFocusChange, onFocus, onBlur, ...rest } = props\n\n  return (\n    <Pressable onPress={onPress}>\n      <IconButton\n        ref={ref}\n        size=\"sm\"\n        variant=\"ghost\"\n        onFocus={() =>\n          callAllHandlers(() => onFocusChange?.(true), props.onFocus)\n        }\n        onBlur={() =>\n          callAllHandlers(() => onFocusChange?.(false), props.onBlur)\n        }\n        {...rest}\n      >\n        {props.children}\n      </IconButton>\n    </Pressable>\n  )\n})\n","import { createContext } from '@chakra-ui/utils'\nimport { CalendarAria } from '@react-aria/calendar'\nimport { CalendarState, RangeCalendarState } from '@react-stately/calendar'\n\ninterface CalendarProviderValue extends CalendarAria {\n  state: CalendarState | RangeCalendarState\n  locale: string\n  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'\n  titleProps: {\n    onClick: () => void\n  }\n  action: CalendarAction\n}\n\nconst [CalendarProvider, useCalendarContext] =\n  createContext<CalendarProviderValue>({\n    name: 'CalendarProvider',\n  })\n\nexport { CalendarProvider, useCalendarContext }\n\nexport type CalendarAction = 'calendar' | 'years'\n","import * as React from 'react'\nimport { useCalendarGrid } from '@react-aria/calendar'\nimport { endOfMonth, DateDuration } from '@internationalized/date'\n\nimport { CalendarCell } from './calendar-cell'\nimport { chakra } from '@chakra-ui/react'\nimport { useCalendarContext } from './calendar-context'\nimport { useDatePickerStyles } from './date-picker-context'\n\nexport interface CalendarGridProps {\n  offset?: DateDuration\n}\n\nexport const CalendarGrid: React.FC<CalendarGridProps> = ({ offset = {} }) => {\n  const { state, firstDayOfWeek } = useCalendarContext()\n\n  const startDate = state.visibleRange.start.add(offset)\n  const endDate = endOfMonth(startDate)\n\n  const { gridProps, headerProps, weekDays, weeksInMonth } = useCalendarGrid(\n    {\n      startDate,\n      endDate,\n      firstDayOfWeek,\n    },\n    state\n  )\n\n  const styles = useDatePickerStyles()\n\n  const gridStyles = {\n    ...styles.grid,\n  }\n\n  return (\n    <chakra.table {...gridProps} __css={gridStyles}>\n      <chakra.thead {...headerProps}>\n        <chakra.tr>\n          {weekDays.map((day, index) => (\n            <chakra.th key={index} __css={styles.weekday}>\n              {day}\n            </chakra.th>\n          ))}\n        </chakra.tr>\n      </chakra.thead>\n      <chakra.tbody>\n        {[...new Array(weeksInMonth).keys()].map((weekIndex) => (\n          <chakra.tr key={weekIndex}>\n            {state\n              .getDatesInWeek(weekIndex, startDate)\n              .map((date, i) =>\n                date ? (\n                  <CalendarCell\n                    key={i}\n                    state={state}\n                    date={date}\n                    currentMonth={startDate}\n                  />\n                ) : (\n                  <chakra.td key={i} __css={{ padding: 0 }} />\n                )\n              )}\n          </chakra.tr>\n        ))}\n      </chakra.tbody>\n    </chakra.table>\n  )\n}\n","import * as React from 'react'\nimport { useRef } from 'react'\nimport { isSameMonth, CalendarDate } from '@internationalized/date'\nimport { chakra } from '@chakra-ui/react'\nimport { CalendarState, RangeCalendarState } from '@react-stately/calendar'\nimport { useDatePickerStyles, useCalendarCell } from './date-picker-context'\n\ninterface CalendarCellProps {\n  state: CalendarState | RangeCalendarState\n  date: CalendarDate\n  currentMonth: CalendarDate\n}\n\nexport const CalendarCell: React.FC<CalendarCellProps> = ({\n  state,\n  date,\n  currentMonth,\n}) => {\n  const ref = useRef<HTMLButtonElement>(null)\n\n  const { cellProps, buttonProps, formattedDate } = useCalendarCell(\n    {\n      date,\n      currentMonth,\n    },\n    state,\n    ref\n  )\n\n  const isOutsideMonth = !isSameMonth(currentMonth, date)\n\n  const styles = useDatePickerStyles()\n\n  const cellStyles = {\n    textAlign: 'center',\n    padding: 0,\n    ...styles.day,\n  }\n\n  const buttonStyles = {\n    ...styles.dayButton,\n  }\n\n  return (\n    <chakra.td as=\"td\" {...cellProps} __css={cellStyles}>\n      <chakra.button\n        {...buttonProps}\n        type=\"button\"\n        ref={ref}\n        hidden={isOutsideMonth}\n        width=\"100%\"\n        __css={buttonStyles}\n      >\n        <chakra.span __css={styles.dayLabel}>{formattedDate}</chakra.span>\n      </chakra.button>\n    </chakra.td>\n  )\n}\n","import type {} from '@react-types/button'\n\nimport { AriaCalendarProps } from '@react-aria/calendar'\nimport { useCalendar as useAriaCalendar } from '@react-aria/calendar'\nimport { useCalendarState } from '@react-stately/calendar'\nimport { useRef, useState, useMemo, useEffect } from 'react'\nimport { useDatePickerContext } from './date-picker-context'\nimport { DateValue } from './types'\nimport { CalendarAction } from './calendar-context'\nimport { GregorianCalendar } from '@internationalized/date'\nimport { useControllableState } from '@chakra-ui/react'\n\nexport const defaultCreateCalendar = (name: string) => {\n  switch (name) {\n    case 'gregory':\n      return new GregorianCalendar()\n    default:\n      throw new Error(`Unsupported calendar ${name}`)\n  }\n}\n\nexport const useCalendar = (props: AriaCalendarProps<DateValue>) => {\n  const {\n    locale,\n    firstDayOfWeek,\n    calendarProps: contextCalendarProps,\n    createCalendar = defaultCreateCalendar,\n  } = useDatePickerContext()\n\n  const [action, setAction] = useState<CalendarAction>('calendar')\n\n  const [focusedValue, setFocusedValue] =\n    useControllableState<DateValue | null>({\n      value: props.focusedValue,\n      defaultValue: props.defaultFocusedValue ?? contextCalendarProps.value,\n      onChange: props.onFocusChange as any,\n    })\n\n  const state = useCalendarState({\n    ...contextCalendarProps,\n    focusedValue: focusedValue ?? undefined,\n    onFocusChange: setFocusedValue,\n    locale,\n    firstDayOfWeek,\n    createCalendar,\n  })\n\n  useEffect(() => {\n    if (state.value) {\n      setFocusedValue(state.value)\n    }\n  }, [state.value])\n\n  const ref = useRef<HTMLDivElement>(null)\n  const {\n    calendarProps,\n    prevButtonProps,\n    nextButtonProps,\n    errorMessageProps,\n    title,\n  } = useAriaCalendar(\n    {\n      firstDayOfWeek,\n      ...props,\n    },\n    state\n  )\n\n  const titleProps = useMemo(() => {\n    return {\n      onClick() {\n        setAction(action === 'calendar' ? 'years' : 'calendar')\n      },\n    }\n  }, [action])\n\n  return {\n    state,\n    locale,\n    firstDayOfWeek,\n    calendarProps,\n    prevButtonProps,\n    nextButtonProps,\n    errorMessageProps,\n    titleProps,\n    title,\n    ref,\n    action,\n  }\n}\n","import * as React from 'react'\nimport {\n  DateRangePickerStateOptions,\n  useDateRangePickerState,\n} from '@react-stately/datepicker'\nimport { useDateRangePicker } from '@react-aria/datepicker'\nimport {\n  useMultiStyleConfig,\n  Popover,\n  ThemingProps,\n  PopoverProps,\n  useTheme,\n} from '@chakra-ui/react'\nimport {\n  DatePickerProvider,\n  DatePickerStylesProvider,\n} from './date-picker-context'\n\nimport { useLocale } from '@react-aria/i18n'\n\nimport { DateRangeValue } from './types'\nimport { Calendar, getLocalTimeZone } from '@internationalized/date'\nimport { datePickerStyleConfig } from './date-picker-styles'\nimport { DatePickerDialog } from './date-picker-dialog'\nimport { flushSync } from 'react-dom'\n\nexport interface DateRangePickerContainerProps\n  extends ThemingProps<'SuiDatePicker'>,\n    Omit<PopoverProps, 'variant' | 'size'>,\n    Omit<DateRangePickerStateOptions, 'value' | 'onChange' | 'closeOnSelect'> {\n  value?: DateRangeValue\n  onChange(value?: DateRangeValue): void\n  locale?: string\n  hourCycle?: 12 | 24\n  timeZone?: string\n  closeOnSelect?: boolean\n  createCalendar?(name: string): Calendar\n}\n\nexport const DateRangePickerContainer: React.FC<\n  DateRangePickerContainerProps\n> = (props) => {\n  const {\n    value: valueProp,\n    defaultValue,\n    onChange,\n    createCalendar,\n    ...rest\n  } = props\n  const {\n    locale: localeProp,\n    hourCycle = 12,\n    firstDayOfWeek,\n    minValue,\n    maxValue,\n    timeZone = getLocalTimeZone(),\n    granularity = 'day',\n    closeOnSelect,\n  } = props\n\n  const { locale } = useLocale()\n\n  const theme = useTheme()\n\n  const styleConfig = theme.components['SuiDatePicker'] ?? datePickerStyleConfig\n\n  const styles = useMultiStyleConfig('SuiDatePicker', {\n    styleConfig,\n    ...props,\n  })\n\n  const state = useDateRangePickerState({\n    /* @ts-ignore doesn't accept null in strict mode, but it's supported */\n    value: valueProp,\n    defaultValue,\n    minValue,\n    maxValue,\n    /* @ts-ignore */\n    onChange,\n    shouldCloseOnSelect: closeOnSelect || granularity === 'day',\n  })\n\n  const datePickerRef = React.useRef<HTMLDivElement>(null)\n\n  const {\n    groupProps,\n    labelProps,\n    startFieldProps,\n    endFieldProps,\n    buttonProps,\n    dialogProps,\n    calendarProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationDetails,\n    validationErrors,\n  } = useDateRangePicker(\n    {\n      ['aria-label']: 'Date Range Picker',\n      ...rest,\n    },\n    state,\n    datePickerRef\n  )\n\n  const context = {\n    state,\n    locale: localeProp || locale,\n    hourCycle,\n    timeZone,\n    firstDayOfWeek,\n    groupProps,\n    labelProps,\n    startFieldProps,\n    endFieldProps,\n    buttonProps,\n    dialogProps,\n    calendarProps,\n    descriptionProps,\n    errorMessageProps,\n    datePickerRef,\n    isInvalid,\n    validationDetails,\n    validationErrors,\n    createCalendar,\n  }\n\n  return (\n    <DatePickerProvider value={context}>\n      <DatePickerStylesProvider value={styles}>\n        <Popover\n          {...props}\n          isOpen={state.isOpen}\n          onOpen={() => flushSync(() => state.setOpen(true))}\n          onClose={() => flushSync(() => state.setOpen(false))}\n        />\n      </DatePickerStylesProvider>\n    </DatePickerProvider>\n  )\n}\n\nexport interface DateRangePickerProps extends DateRangePickerContainerProps {}\n\nexport const DateRangePicker: React.FC<DateRangePickerProps> = (props) => {\n  return <DateRangePickerContainer {...props} />\n}\n\nexport const DateRangePickerDialog = DatePickerDialog\n","import * as React from 'react'\nimport { chakra, HTMLChakraProps } from '@chakra-ui/react'\nimport { useDatePickerStyles } from './date-picker-context'\nimport { CalendarProvider } from './calendar-context'\nimport {\n  CalendarHeader,\n  CalendarNext,\n  CalendarPrevious,\n  CalendarTitle,\n} from './calendar'\nimport { CalendarGrid } from './calendar-grid'\nimport { useRangeCalendar } from './use-range-calendar'\n\ninterface RangeCalendarProps\n  extends Omit<HTMLChakraProps<'div'>, 'value' | 'defaultValue' | 'onChange'> {}\n\nexport const DateRangePickerCalendar: React.FC<RangeCalendarProps> = (\n  props\n) => {\n  return (\n    <RangeCalendarContainer {...props}>\n      <CalendarHeader>\n        <CalendarTitle />\n        <CalendarPrevious />\n        <CalendarNext />\n      </CalendarHeader>\n\n      <chakra.div display=\"flex\" alignItems=\"flex-start\" gap=\"8\">\n        <CalendarGrid />\n        <CalendarGrid offset={{ months: 1 }} />\n      </chakra.div>\n    </RangeCalendarContainer>\n  )\n}\n\nexport const RangeCalendarContainer: React.FC<RangeCalendarProps> = (props) => {\n  const { children, ...rest } = props\n\n  const styles = useDatePickerStyles()\n\n  const calendarStyles = {\n    ...styles.calendar,\n  }\n\n  const context = useRangeCalendar(rest)\n\n  const { calendarProps, ref } = context\n\n  return (\n    <CalendarProvider value={context}>\n      <chakra.div {...calendarProps} ref={ref} __css={calendarStyles}>\n        {children}\n      </chakra.div>\n    </CalendarProvider>\n  )\n}\n","import type {} from '@react-types/button'\n\nimport { AriaRangeCalendarProps } from '@react-aria/calendar'\nimport { useRangeCalendar as useAriaRangeCalendar } from '@react-aria/calendar'\nimport { useRangeCalendarState } from '@react-stately/calendar'\nimport { useRef, useState, useMemo } from 'react'\nimport { useDateRangePickerContext } from './date-picker-context'\nimport { DateValue } from './types'\nimport { CalendarAction } from './calendar-context'\nimport { defaultCreateCalendar } from './use-calendar'\n\nexport const useRangeCalendar = (props: AriaRangeCalendarProps<DateValue>) => {\n  const {\n    locale,\n    firstDayOfWeek,\n    timeZone,\n    calendarProps: contextCalendarProps,\n    createCalendar = defaultCreateCalendar,\n  } = useDateRangePickerContext()\n\n  const [action, setAction] = useState<CalendarAction>('calendar')\n\n  const state = useRangeCalendarState({\n    ...contextCalendarProps,\n    visibleDuration: { months: 2 },\n    locale,\n    firstDayOfWeek,\n\n    createCalendar,\n  })\n\n  const ref = useRef<HTMLDivElement>(null)\n  const {\n    calendarProps,\n    prevButtonProps,\n    nextButtonProps,\n    errorMessageProps,\n    title,\n  } = useAriaRangeCalendar(\n    {\n      firstDayOfWeek,\n      ...props,\n    },\n    state,\n    ref\n  )\n\n  const titleProps = useMemo(() => {\n    return {\n      onClick() {\n        setAction(action === 'calendar' ? 'years' : 'calendar')\n      },\n    }\n  }, [action])\n\n  return {\n    state,\n    locale,\n    firstDayOfWeek,\n    calendarProps,\n    prevButtonProps,\n    nextButtonProps,\n    errorMessageProps,\n    titleProps,\n    title,\n    ref,\n    action,\n  }\n}\n","import * as React from 'react'\n\nimport {\n  forwardRef,\n  InputGroup,\n  InputGroupProps,\n  InputRightElement,\n  Portal,\n  SystemCSSProperties,\n  useMergeRefs,\n  usePopoverContext,\n} from '@chakra-ui/react'\n\nimport { FieldButton } from './button'\nimport { DatePickerCalendar } from './calendar'\nimport { DateField, DatePickerTimeField } from './date-field'\nimport {\n  DatePickerAnchor,\n  DatePickerDialog,\n  DatePickerDialogProps,\n} from './date-picker-dialog'\nimport { DatePicker, DatePickerProps } from './date-picker'\nimport { useDatePickerContext, useDatePickerInput } from './date-picker-context'\nimport { SegmentedInput } from './segmented-input'\nimport { CalendarIcon } from './icons'\n\nexport interface DateInputProps extends DatePickerProps {\n  /**\n   * The icon to use in the calendar button\n   */\n  calendarIcon?: React.ReactNode\n  /**\n   * If `true`, the `DatePickerDialog` will open in a portal.\n   * Also accepts a `z-index` value that will be passed to the dialog.\n   */\n  portal?: boolean | SystemCSSProperties['zIndex']\n  /**\n   * The DatePickerInput props.\n   */\n  inputProps?: DatePickerInputProps\n  /**\n   * The DatePickerDialog props.\n   */\n  dialogProps?: DatePickerDialogProps\n}\n\n/**\n * A Date form input with Calendar popover to allow users to enter or select a date value.\n *\n * @see Docs https://saas-ui.dev/docs/date-time/date-picker-input\n */\nexport const DateInput = forwardRef<DateInputProps, 'div'>((props, ref) => {\n  const {\n    children,\n    calendarIcon,\n    size,\n    variant,\n    inputProps,\n    dialogProps,\n    portal,\n    ...rest\n  } = props\n\n  const zIndex = typeof portal === 'boolean' ? undefined : portal\n\n  const dialog = (\n    <DatePickerDialog zIndex={zIndex} {...dialogProps}>\n      <>\n        <DatePickerCalendar />\n        {children}\n      </>\n    </DatePickerDialog>\n  )\n\n  return (\n    <DatePicker placement=\"bottom-end\" granularity=\"day\" {...rest}>\n      <DatePickerInput\n        calendarIcon={calendarIcon}\n        size={size}\n        variant={variant}\n        ref={ref}\n        {...inputProps}\n      />\n      {portal ? <Portal>{dialog}</Portal> : dialog}\n    </DatePicker>\n  )\n})\n\nDateInput.displayName = 'DateInput'\n\n/**\n * DateTimeInput\n *\n * A Date form input with Calendar popover to allow users to enter or select a date and time value.\n *\n * @see Docs https://saas-ui.dev/docs/date-time/date-picker-input\n */\nexport const DateTimeInput = forwardRef<DateInputProps, 'div'>((props, ref) => {\n  const { children, ...rest } = props\n  return (\n    <DateInput ref={ref} granularity=\"minute\" {...rest}>\n      <>\n        <DatePickerTimeField />\n        {children}\n      </>\n    </DateInput>\n  )\n})\n\nDateTimeInput.displayName = 'DateTimeInput'\n\ninterface DatePickerInputProps extends InputGroupProps {\n  calendarIcon?: React.ReactNode\n}\n\n/**\n * DatePickerInput\n *\n * A Date form input with Calendar popover to allow users to enter or select a date and time value.\n *\n * @see Docs https://saas-ui.dev/docs/date-time/date-picker-input\n */\nexport const DatePickerInput = forwardRef<DatePickerInputProps, 'div'>(\n  (props, ref) => {\n    const { calendarIcon, size, variant, ...rest } = props\n    const {\n      locale,\n      state,\n      groupProps,\n      fieldProps,\n      buttonProps,\n      datePickerRef,\n    } = useDatePickerInput()\n\n    const themeProps = { size, variant }\n\n    return (\n      <DatePickerAnchor>\n        <InputGroup\n          ref={datePickerRef}\n          {...rest}\n          {...groupProps}\n          {...themeProps}\n        >\n          <SegmentedInput {...themeProps}>\n            <DateField ref={ref} locale={locale} {...fieldProps} />\n          </SegmentedInput>\n          <InputRightElement py=\"1\">\n            <FieldButton\n              variant=\"ghost\"\n              flex=\"1\"\n              height=\"100%\"\n              {...buttonProps}\n              isActive={state.isOpen}\n            >\n              {calendarIcon || <CalendarIcon />}\n            </FieldButton>\n          </InputRightElement>\n        </InputGroup>\n      </DatePickerAnchor>\n    )\n  }\n)\n\nDatePickerInput.displayName = 'DatePickerInput'\n","import * as React from 'react'\n\nimport { useLocale } from '@react-aria/i18n'\nimport {\n  useDateFieldState,\n  useTimeFieldState,\n  DateFieldStateOptions,\n  TimeFieldStateOptions,\n  DateFieldState,\n  DateSegment as DateSegmentType,\n} from '@react-stately/datepicker'\nimport {\n  useDateField,\n  useDateSegment,\n  useTimeField,\n} from '@react-aria/datepicker'\nimport { createCalendar } from '@internationalized/date'\nimport {\n  chakra,\n  FormLabel,\n  forwardRef,\n  HTMLChakraProps,\n  useFormControl,\n  useMergeRefs,\n} from '@chakra-ui/react'\nimport {\n  useDatePickerContext,\n  useDatePickerStyles,\n  useDateRangePickerContext,\n} from './date-picker-context'\n\nimport { InputSegment, SegmentedInput } from './segmented-input'\n\nexport interface DateFieldProps\n  extends Omit<DateFieldStateOptions, 'createCalendar'> {}\n\nexport const DateField = forwardRef<DateFieldProps, 'div'>(\n  (props, forwardedRef) => {\n    const state = useDateFieldState({\n      ...props,\n      createCalendar,\n    })\n\n    const ref = React.useRef<HTMLDivElement>(null)\n\n    const {\n      fieldProps: { id, ...fieldProps },\n    } = useDateField(props, state, ref)\n\n    const inputProps = useFormControl<HTMLInputElement>(fieldProps)\n\n    const styles = useDatePickerStyles()\n\n    const dateFieldStyles = {\n      display: 'flex',\n      width: 'full',\n      ...styles.dateField,\n    }\n\n    return (\n      <chakra.div\n        {...inputProps}\n        aria-labelledby={`${inputProps.id}-label`}\n        ref={useMergeRefs(ref, forwardedRef)}\n        __css={dateFieldStyles}\n      >\n        {state.segments.map((segment, i) => (\n          <DateSegment key={i} segment={segment} state={state} />\n        ))}\n      </chakra.div>\n    )\n  }\n)\n\nDateField.displayName = 'DateField'\n\nexport interface TimeFieldProps\n  extends TimeFieldStateOptions,\n    Omit<\n      HTMLChakraProps<'div'>,\n      | 'defaultValue'\n      | 'onBlur'\n      | 'onChange'\n      | 'onFocus'\n      | 'onKeyDown'\n      | 'onKeyUp'\n    > {}\n\nexport const TimeField: React.FC<TimeFieldProps> = (props) => {\n  const {\n    label = 'Time',\n    defaultValue,\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    onKeyUp,\n    hourCycle,\n    ...rest\n  } = props\n\n  const timeFieldProps = {\n    label,\n    defaultValue,\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    onKeyUp,\n    hourCycle,\n  }\n\n  const state = useTimeFieldState({\n    ...props,\n    onChange,\n  })\n\n  const ref = React.useRef<HTMLDivElement>(null)\n  const { labelProps, fieldProps } = useTimeField(timeFieldProps, state, ref)\n\n  return (\n    <chakra.div mt={2} {...rest}>\n      <FormLabel {...labelProps}>{label}</FormLabel>\n      <SegmentedInput {...fieldProps} ref={ref} display=\"inline-flex\" pr={2}>\n        {state.segments.map((segment, i) => (\n          <DateSegment key={i} segment={segment} state={state} />\n        ))}\n      </SegmentedInput>\n    </chakra.div>\n  )\n}\n\nTimeField.displayName = 'TimeField'\n\nexport interface DatePickerTimeFieldProps\n  extends Omit<TimeFieldProps, 'locale'> {\n  locale?: string\n}\n\n/**\n * DatePickerTimeField\n *\n * A Date form input with Calendar popover to allow users to enter or select a date and time value.\n *\n * @see Docs https://saas-ui.dev/docs/date-time/date-picker-input\n */\nexport const DatePickerTimeField: React.FC<DatePickerTimeFieldProps> = (\n  props\n) => {\n  const {\n    locale,\n    state: { timeValue, setTimeValue },\n    hourCycle,\n  } = useDatePickerContext()\n  return (\n    <TimeField\n      {...props}\n      locale={props.locale || locale}\n      hourCycle={hourCycle}\n      value={timeValue}\n      onChange={(value) => {\n        /* @ts-ignore */\n        setTimeValue(value)\n      }}\n    />\n  )\n}\n\nDatePickerTimeField.displayName = 'DatePickerTimeField'\n\nexport const DatePickerStartTimeField: React.FC<DatePickerTimeFieldProps> = (\n  props\n) => {\n  const {\n    locale,\n    state: { timeRange, setTime },\n    hourCycle,\n  } = useDateRangePickerContext()\n\n  return (\n    <TimeField\n      {...props}\n      locale={props.locale || locale}\n      value={timeRange?.start}\n      onChange={(v) => setTime('start', v)}\n      hourCycle={hourCycle}\n    />\n  )\n}\n\nDatePickerStartTimeField.displayName = 'DatePickerStartTimeField'\n\nexport const DatePickerEndTimeField: React.FC<DatePickerTimeFieldProps> = (\n  props\n) => {\n  const {\n    locale,\n    state: { timeRange, setTime },\n    hourCycle,\n  } = useDateRangePickerContext()\n\n  return (\n    <TimeField\n      {...props}\n      locale={props.locale || locale}\n      value={timeRange?.end}\n      onChange={(v) => setTime('end', v)}\n      hourCycle={hourCycle}\n    />\n  )\n}\n\nDatePickerEndTimeField.displayName = 'DatePickerEndTimeField'\n\nexport interface DateRangeTimeFieldProps extends HTMLChakraProps<'div'> {\n  startLabel?: string\n  endLabel?: string\n}\n\nexport const DateRangePickerTimeField: React.FC<DateRangeTimeFieldProps> = (\n  props\n) => {\n  const { startLabel = 'Start time', endLabel = 'End time', ...rest } = props\n\n  return (\n    <chakra.div display=\"flex\" gap=\"2\" {...rest}>\n      <DatePickerStartTimeField label={startLabel} />\n      <DatePickerEndTimeField label={endLabel} />\n    </chakra.div>\n  )\n}\n\nDateRangePickerTimeField.displayName = 'DateRangePickerTimeField'\n\ninterface DateSegmentProps extends HTMLChakraProps<'div'> {\n  segment: DateSegmentType\n  state: DateFieldState\n}\n\nconst DateSegment: React.FC<DateSegmentProps> = ({ segment, state }) => {\n  const ref = React.useRef<HTMLDivElement>(null)\n  const {\n    segmentProps: { style, ...segmentProps },\n  } = useDateSegment(segment, state, ref)\n\n  return (\n    <InputSegment ref={ref} sx={style} {...segment} {...segmentProps}>\n      {segment.text}\n    </InputSegment>\n  )\n}\n","import * as React from 'react'\nimport {\n  chakra,\n  forwardRef,\n  HTMLChakraProps,\n  omitThemingProps,\n  SystemStyleObject,\n  ThemingProps,\n  useMultiStyleConfig,\n  useStyleConfig,\n  useTheme,\n} from '@chakra-ui/react'\nimport { createContext, dataAttr, mapResponsive } from '@chakra-ui/utils'\n\nimport defaultStyleConfig from './segmented-input-styles'\n\nconst sizes: Record<string, string> = {\n  sm: '2.2rem',\n  md: '2.5rem',\n  lg: '3rem',\n}\n\nexport const [SegmentedInputStylesProvider, useSegmentedInputStyles] =\n  createContext<Record<string, SystemStyleObject>>({\n    name: 'SegmentedInputStylesContext',\n  })\n\nexport interface SegmentedInputProps\n  extends HTMLChakraProps<'div'>,\n    ThemingProps<'Input'> {}\n\n/**\n * SegmentedInput\n *\n * Input with editable segments, like date or time input.\n *\n * @theme 'Input'\n */\nexport const SegmentedInput = forwardRef<SegmentedInputProps, 'div'>(\n  ({ children, size, ...rest }, ref) => {\n    const styles = useMultiStyleConfig('Input', {\n      size,\n      ...rest,\n    })\n    const ownProps = omitThemingProps(rest)\n\n    const pe =\n      mapResponsive(size, (s) => {\n        return sizes[s]\n      }) || sizes.md\n\n    const inputStyles = {\n      display: 'flex',\n      alignItems: 'center',\n      /* @ts-ignore */\n      _focusWithin: styles.field?._focusVisible,\n      ...styles.field,\n    }\n\n    return (\n      <SegmentedInputStylesProvider value={styles}>\n        <chakra.div {...ownProps} pe={pe} __css={inputStyles} ref={ref}>\n          {children}\n        </chakra.div>\n      </SegmentedInputStylesProvider>\n    )\n  }\n)\n\nSegmentedInput.displayName = 'SegmentedInput'\n\nexport interface InputSegmentProps\n  extends HTMLChakraProps<'div'>,\n    ThemingProps<'SuiInputSegment'> {\n  minValue?: number\n  maxValue?: number\n  type?: string\n  isPlaceholder?: boolean\n  isEditable?: boolean\n}\n\n/**\n * SegmentedInput\n *\n * A segment that is used in side a SegmentedInput\n *\n * @theme 'InputSegment'\n */\nexport const InputSegment = forwardRef<InputSegmentProps, 'div'>(\n  (props, ref) => {\n    const {\n      children,\n      type,\n      minValue,\n      maxValue,\n      isPlaceholder,\n      isEditable,\n      ...rest\n    } = props\n\n    const theme = useTheme()\n    const isThemed = !!theme.components['SuiInputSegment']\n\n    const styles = useStyleConfig('SuiInputSegment', {\n      styleConfig: !isThemed ? defaultStyleConfig : undefined,\n      ...rest,\n    })\n\n    const minWi