react-native-system-ui 1.0.2 → 1.0.3

package/dist/es/components/button/tokens.js

@@ -1,170 +1 @@
-import { createComponentTokensHook } from '../../design-system';
-import { getHairlineWidth, hexToRgb } from '../../utils';
-const isDarkThemeBackground = color => {
-  const rgb = hexToRgb(color);
-  return !!rgb && (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000 < 140;
-};
-const createButtonTokens = foundations => {
-  const {
-    palette,
-    spacing,
-    radii,
-    fontSize,
-    typography,
-    opacity
-  } = foundations;
-  const buildTone = (tone, text) => {
-    const ramp = palette[tone];
-    const baseBackground = ramp[500];
-    return {
-      background: baseBackground,
-      border: baseBackground,
-      text: text ?? ramp.foreground ?? '#ffffff',
-      tonalBackground: ramp[100],
-      tonalBorder: ramp[200],
-      tonalText: ramp[700] ?? ramp[800] ?? '#111111'
-    };
-  };
-  const darkTheme = isDarkThemeBackground(palette.default[50]);
-  const baseRadius = Math.max(0, Math.round(radii.xs / 2));
-  const defaultBackground = darkTheme ? palette.default[100] : '#ffffff';
-  const defaultBorder = darkTheme ? palette.default[300] : '#ebedf0';
-  const defaultText = darkTheme ? palette.default.foreground ?? '#f4f6fb' : '#323233';
-  return {
-    defaults: {
-      type: 'default',
-      size: 'normal',
-      plain: false,
-      block: false,
-      round: false,
-      square: false,
-      hairline: false,
-      iconPosition: 'left',
-      loading: false,
-      loadingSize: 'small',
-      disabled: false,
-      allowFontScaling: true
-    },
-    layout: {
-      base: {
-        borderStyle: 'solid',
-        alignItems: 'center',
-        justifyContent: 'center',
-        flexDirection: 'row',
-        alignSelf: 'flex-start'
-      },
-      block: {
-        alignSelf: 'stretch',
-        width: '100%'
-      },
-      content: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center'
-      },
-      iconWrapper: {
-        alignItems: 'center',
-        justifyContent: 'center'
-      },
-      text: {
-        fontWeight: '400'
-      }
-    },
-    colors: {
-      ripple: 'rgba(255,255,255,0.35)',
-      backgroundTransparent: 'transparent',
-      backgroundPlain: defaultBackground,
-      textDark: '#ffffff',
-      textLight: '#111111',
-      tones: {
-        default: {
-          background: defaultBackground,
-          border: defaultBorder,
-          text: defaultText,
-          tonalBackground: darkTheme ? palette.default[200] : palette.default[100],
-          tonalBorder: defaultBorder,
-          tonalText: defaultText
-        },
-        primary: buildTone('primary'),
-        info: buildTone('info'),
-        success: buildTone('success'),
-        warning: buildTone('warning', palette.warning.foreground ?? '#ffffff'),
-        danger: buildTone('danger')
-      }
-    },
-    typography: {
-      fontFamily: typography.fontFamily,
-      lineHeightMultiplier: typography.lineHeightMultiplier,
-      fontWeight: typography.weight.medium
-    },
-    sizing: {
-      sizes: {
-        large: {
-          height: 50,
-          fontSize: fontSize.lg,
-          paddingHorizontal: fontSize.lg,
-          iconSize: fontSize.lg,
-          radius: baseRadius
-        },
-        normal: {
-          height: 44,
-          fontSize: fontSize.sm,
-          paddingHorizontal: fontSize.md,
-          iconSize: fontSize.sm,
-          radius: baseRadius
-        },
-        small: {
-          height: 32,
-          fontSize: fontSize.xs,
-          paddingHorizontal: fontSize.xs,
-          iconSize: fontSize.xs,
-          radius: baseRadius
-        },
-        mini: {
-          height: 24,
-          fontSize: fontSize.xxs,
-          paddingHorizontal: fontSize.xxs,
-          iconSize: fontSize.xxs,
-          radius: baseRadius
-        }
-      }
-    },
-    borders: {
-      width: 1,
-      hairlineWidth: getHairlineWidth()
-    },
-    spacing: {
-      iconGap: spacing.sm,
-      groupGap: spacing.xs
-    },
-    states: {
-      disabledOpacity: opacity.disabled,
-      loadingOpacity: opacity.loading,
-      pressedOpacity: 0.7
-    },
-    shadows: {
-      1: {
-        color: '#0f1a38',
-        opacity: 0.12,
-        radius: 2,
-        offsetY: 2,
-        elevation: 2
-      },
-      2: {
-        color: '#0f1a38',
-        opacity: 0.15,
-        radius: 4,
-        offsetY: 3,
-        elevation: 3
-      },
-      3: {
-        color: '#0f1a38',
-        opacity: 0.2,
-        radius: 6,
-        offsetY: 4,
-        elevation: 5
-      }
-    }
-  };
-};
-export const useButtonTokens = createComponentTokensHook('button', createButtonTokens);
+import{createComponentTokensHook}from"../../design-system";import{getHairlineWidth,hexToRgb}from"../../utils";const isDarkThemeBackground=e=>{const t=hexToRgb(e);return!!t&&(299*t[0]+587*t[1]+114*t[2])/1e3<140},createButtonTokens=e=>{const{palette:t,spacing:o,radii:n,fontSize:i,typography:a,opacity:r}=e,l=(e,o)=>{const n=t[e],i=n[500];return{background:i,border:i,text:o??n.foreground??"#ffffff",tonalBackground:n[100],tonalBorder:n[200],tonalText:n[700]??n[800]??"#111111"}},s=isDarkThemeBackground(t.default[50]),f=Math.max(0,Math.round(n.xs/2)),d=s?t.default[100]:"#ffffff",g=s?t.default[300]:"#ebedf0",c=s?t.default.foreground??"#f4f6fb":"#323233";return{defaults:{type:"default",size:"normal",plain:!1,block:!1,round:!1,square:!1,hairline:!1,iconPosition:"left",loading:!1,loadingSize:"small",disabled:!1,allowFontScaling:!0},layout:{base:{borderStyle:"solid",alignItems:"center",justifyContent:"center",flexDirection:"row",alignSelf:"flex-start"},block:{alignSelf:"stretch",width:"100%"},content:{flexDirection:"row",alignItems:"center",justifyContent:"center"},iconWrapper:{alignItems:"center",justifyContent:"center"},text:{fontWeight:"400"}},colors:{ripple:"rgba(255,255,255,0.35)",backgroundTransparent:"transparent",backgroundPlain:d,textDark:"#ffffff",textLight:"#111111",tones:{default:{background:d,border:g,text:c,tonalBackground:s?t.default[200]:t.default[100],tonalBorder:g,tonalText:c},primary:l("primary"),info:l("info"),success:l("success"),warning:l("warning",t.warning.foreground??"#ffffff"),danger:l("danger")}},typography:{fontFamily:a.fontFamily,lineHeightMultiplier:a.lineHeightMultiplier,fontWeight:a.weight.medium},sizing:{sizes:{large:{height:50,fontSize:i.lg,paddingHorizontal:i.lg,iconSize:i.lg,radius:f},normal:{height:44,fontSize:i.sm,paddingHorizontal:i.md,iconSize:i.sm,radius:f},small:{height:32,fontSize:i.xs,paddingHorizontal:i.xs,iconSize:i.xs,radius:f},mini:{height:24,fontSize:i.xxs,paddingHorizontal:i.xxs,iconSize:i.xxs,radius:f}}},borders:{width:1,hairlineWidth:getHairlineWidth()},spacing:{iconGap:o.sm,groupGap:o.xs},states:{disabledOpacity:r.disabled,loadingOpacity:r.loading,pressedOpacity:.7},shadows:{1:{color:"#0f1a38",opacity:.12,radius:2,offsetY:2,elevation:2},2:{color:"#0f1a38",opacity:.15,radius:4,offsetY:3,elevation:3},3:{color:"#0f1a38",opacity:.2,radius:6,offsetY:4,elevation:5}}}};export const useButtonTokens=createComponentTokensHook("button",createButtonTokens);

package/dist/es/components/calendar/Calendar.js

@@ -1,432 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Pressable, Text, View } from 'react-native';
-import { useControllableValue } from '../../hooks';
-import { renderTextOrNode } from '../../utils';
-import { isRenderable } from '../../utils/validate';
-import Popup from '../popup';
-import { useLocale } from '../config-provider/useLocale';
-import { useCalendarTokens } from './tokens';
-const DAY_MS = 24 * 60 * 60 * 1000;
-const isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-const startOfDay = date => {
-  const newDate = new Date(date);
-  newDate.setHours(0, 0, 0, 0);
-  return newDate;
-};
-const daysBetween = (a, b) => Math.round(Math.abs(startOfDay(a).getTime() - startOfDay(b).getTime()) / DAY_MS);
-const toArrayValue = value => !value ? [] : Array.isArray(value) ? value.filter(Boolean).map(d => new Date(d)) : [new Date(value)];
-const DEFAULT_MIN = new Date(new Date().getFullYear() - 10, 0, 1);
-const DEFAULT_MAX = new Date(new Date().getFullYear() + 10, 11, 31);
-const CalendarImpl = props => {
-  const {
-    tokensOverride,
-    value: _value,
-    defaultValue: _defaultValue,
-    minDate = DEFAULT_MIN,
-    maxDate = DEFAULT_MAX,
-    type,
-    title,
-    showSubtitle,
-    showHeader,
-    showConfirm,
-    confirmText,
-    weekStartsOn,
-    weekdays,
-    formatMonthTitle,
-    allowSameDay,
-    maxRange,
-    onOverRange,
-    poppable,
-    visible: _visible,
-    defaultVisible: _defaultVisible,
-    onVisibleChange: _onVisibleChange,
-    closeOnClickOverlay,
-    closeOnConfirm,
-    popupPlacement,
-    popupRound,
-    popupProps,
-    onOpen,
-    onOpened,
-    onClose,
-    onClosed,
-    color,
-    onConfirm,
-    onSelect: _onSelect,
-    style,
-    ...rest
-  } = props;
-  const locale = useLocale();
-  const calLoc = locale?.vanCalendar;
-  const tokens = useCalendarTokens(tokensOverride);
-  const resolvedTitle = title ?? calLoc?.title ?? tokens.defaults.title;
-  const resolvedShowSubtitle = showSubtitle ?? tokens.defaults.showSubtitle;
-  const resolvedShowHeader = showHeader ?? tokens.defaults.showHeader;
-  const resolvedConfirmText = confirmText ?? calLoc?.confirm ?? tokens.defaults.confirmText;
-  const resolvedWeekStartsOn = weekStartsOn ?? tokens.defaults.weekStartsOn;
-  const resolvedAllowSameDay = allowSameDay ?? tokens.defaults.allowSameDay;
-  const resolvedPoppable = poppable ?? tokens.defaults.poppable;
-  const resolvedCloseOnClickOverlay = closeOnClickOverlay ?? tokens.defaults.closeOnClickOverlay;
-  const resolvedCloseOnConfirm = closeOnConfirm ?? tokens.defaults.closeOnConfirm;
-  const resolvedPopupPlacement = popupPlacement ?? tokens.defaults.popupPlacement;
-  const resolvedPopupRound = popupRound ?? tokens.defaults.popupRound;
-  const resolvedType = type ?? tokens.defaults.type;
-  const resolvedShowConfirm = showConfirm ?? tokens.defaults.showConfirm[resolvedType];
-  const [popupVisible, setPopupVisible] = useControllableValue(props, {
-    defaultValue: false,
-    valuePropName: 'visible',
-    defaultValuePropName: 'defaultVisible',
-    trigger: 'onVisibleChange'
-  });
-  const {
-    onClose: popupOnClose,
-    onClosed: popupOnClosed,
-    onOpen: popupOnOpen,
-    onOpened: popupOnOpened,
-    closeOnOverlayPress: overlayCloseOnPress,
-    overlay: popupOverlay,
-    ...popupRestProps
-  } = popupProps ?? {};
-  const cbRef = useRef({
-    onConfirm,
-    onOverRange,
-    popupOnOpen,
-    onOpen,
-    popupOnOpened,
-    onOpened,
-    popupOnClose,
-    onClose,
-    popupOnClosed,
-    onClosed
-  });
-  cbRef.current.onConfirm = onConfirm;
-  cbRef.current.onOverRange = onOverRange;
-  cbRef.current.popupOnOpen = popupOnOpen;
-  cbRef.current.onOpen = onOpen;
-  cbRef.current.popupOnOpened = popupOnOpened;
-  cbRef.current.onOpened = onOpened;
-  cbRef.current.popupOnClose = popupOnClose;
-  cbRef.current.onClose = onClose;
-  cbRef.current.popupOnClosed = popupOnClosed;
-  cbRef.current.onClosed = onClosed;
-  const closePopup = useCallback(() => {
-    if (!resolvedPoppable) return;
-    setPopupVisible(false);
-  }, [resolvedPoppable, setPopupVisible]);
-  const handlePopupOpen = useCallback(() => {
-    cbRef.current.popupOnOpen?.();
-    cbRef.current.onOpen?.();
-  }, []);
-  const handlePopupOpened = useCallback(() => {
-    cbRef.current.popupOnOpened?.();
-    cbRef.current.onOpened?.();
-  }, []);
-  const handlePopupClose = useCallback(() => {
-    closePopup();
-    cbRef.current.popupOnClose?.();
-    cbRef.current.onClose?.();
-  }, [closePopup]);
-  const handlePopupClosed = useCallback(() => {
-    cbRef.current.popupOnClosed?.();
-    cbRef.current.onClosed?.();
-  }, []);
-  const overlayCloseOnPressResolved = overlayCloseOnPress ?? resolvedCloseOnClickOverlay;
-  const overlayResolved = popupOverlay ?? true;
-  const [selectedValue, setSelectedValue] = useControllableValue(props, {
-    defaultValue: null,
-    valuePropName: 'value',
-    defaultValuePropName: 'defaultValue',
-    trigger: 'onSelect'
-  });
-  const value = normalizeValue(toArrayValue(selectedValue), resolvedType);
-  const [currentMonth, setCurrentMonth] = useState(() => clampMonth(value.length ? value[0] : new Date(), minDate, maxDate));
-  const firstValueTime = value.length ? value[0].getTime() : null;
-  const minDateTime = minDate.getTime();
-  const maxDateTime = maxDate.getTime();
-  useEffect(() => {
-    if (!value.length) return;
-    const first = clampMonth(value[0], minDate, maxDate);
-    setCurrentMonth(prev => isSameMonth(first, prev) ? prev : first);
-  }, [firstValueTime, minDateTime, maxDateTime]);
-  const monthDays = useMemo(() => buildMonth(currentMonth, resolvedWeekStartsOn), [currentMonth, resolvedWeekStartsOn]);
-  const monthDaysMapped = useMemo(() => monthDays.map(day => day ? {
-    day,
-    key: day.toISOString(),
-    timeValue: startOfDay(day).getTime(),
-    dateValue: day.getDate()
-  } : null), [monthDays]);
-  const minDayTime = startOfDay(minDate).getTime();
-  const maxDayTime = startOfDay(maxDate).getTime();
-  const resolvedWeekdays = weekdays ?? calLoc?.weekdays ?? tokens.defaults.weekdays;
-  const weekLabels = useMemo(() => reorderWeekdays(resolvedWeekdays, resolvedWeekStartsOn, tokens.defaults.weekdays), [resolvedWeekdays, tokens.defaults.weekdays, resolvedWeekStartsOn]);
-  const monthLabel = useMemo(() => formatMonthTitle ? formatMonthTitle(currentMonth) : calLoc?.monthTitle ? calLoc.monthTitle(currentMonth.getFullYear(), currentMonth.getMonth() + 1) : formatMonth(currentMonth), [currentMonth, formatMonthTitle, calLoc]);
-  const minMonthStart = startOfMonth(minDate);
-  const maxMonthStart = startOfMonth(maxDate);
-  const canGoPrev = currentMonth.getTime() > minMonthStart.getTime();
-  const canGoNext = currentMonth.getTime() < maxMonthStart.getTime();
-  const goToMonth = useCallback(delta => setCurrentMonth(prev => clampMonth(new Date(prev.getFullYear(), prev.getMonth() + delta, 1), minDate, maxDate)), [minDate, maxDate]);
-  const goPrev = useCallback(() => goToMonth(-1), [goToMonth]);
-  const goNext = useCallback(() => goToMonth(1), [goToMonth]);
-  const confirmDisabled = resolvedType === 'range' ? value.length < 2 : value.length === 0;
-  const columnPadding = tokens.spacing.column / 2;
-  const maybeAutoConfirm = useCallback(next => {
-    if (resolvedShowConfirm) return;
-    if (resolvedType === 'range' && next.length < 2) return;
-    if (resolvedType === 'multiple' && next.length === 0) return;
-    if (!next.length) return;
-    cbRef.current.onConfirm?.(mapValue(next, resolvedType));
-    if (resolvedPoppable && resolvedCloseOnConfirm) closePopup();
-  }, [resolvedShowConfirm, resolvedType, resolvedPoppable, resolvedCloseOnConfirm, closePopup]);
-  const handleConfirm = useCallback(() => {
-    if (resolvedShowConfirm && confirmDisabled) return;
-    cbRef.current.onConfirm?.(mapValue(value, resolvedType));
-    if (resolvedPoppable && resolvedCloseOnConfirm) closePopup();
-  }, [resolvedShowConfirm, confirmDisabled, value, resolvedType, resolvedPoppable, resolvedCloseOnConfirm, closePopup]);
-  const isSelectionAllowed = useCallback(next => {
-    if (resolvedType === 'range' && next.length === 2) {
-      const [start, end] = next;
-      if (!resolvedAllowSameDay && isSameDay(start, end)) return false;
-      if (maxRange && daysBetween(start, end) + 1 > maxRange) {
-        cbRef.current.onOverRange?.(maxRange);
-        return false;
-      }
-    }
-    if (resolvedType === 'multiple' && maxRange && next.length > maxRange) {
-      cbRef.current.onOverRange?.(maxRange);
-      return false;
-    }
-    ;
-    return true;
-  }, [resolvedType, resolvedAllowSameDay, maxRange]);
-  const handleSelectDayRef = useRef(undefined);
-  const handleSelectDay = useCallback(date => {
-    const dateTime = startOfDay(date).getTime();
-    if (dateTime < minDayTime || dateTime > maxDayTime) return;
-    let next = [];
-    const nextValue = value;
-    switch (resolvedType) {
-      case 'single':
-        next = [date];
-        break;
-      case 'multiple':
-        {
-          const existing = nextValue.find(item => isSameDay(item, date));
-          next = existing ? nextValue.filter(item => !isSameDay(item, date)) : [...nextValue, date];
-          break;
-        }
-      case 'range':
-        {
-          if (nextValue.length < 1 || nextValue.length > 1) {
-            next = [date];
-          } else {
-            const first = nextValue[0];
-            if (isSameDay(first, date)) {
-              next = resolvedAllowSameDay ? [first, date] : [date];
-            } else {
-              next = [first, date].sort((a, b) => a.getTime() - b.getTime());
-            }
-          }
-          break;
-        }
-      default:
-        next = [date];
-    }
-    ;
-    const normalizedNextValue = normalizeValue(next, resolvedType);
-    if (!isSelectionAllowed(normalizedNextValue)) return;
-    setSelectedValue(mapValue(normalizedNextValue, resolvedType));
-    if (!resolvedShowConfirm) maybeAutoConfirm(normalizedNextValue);
-  }, [value, resolvedType, minDayTime, maxDayTime, resolvedAllowSameDay, isSelectionAllowed, setSelectedValue, resolvedShowConfirm, maybeAutoConfirm]);
-  handleSelectDayRef.current = handleSelectDay;
-  const selectDayPress = useCallback(date => handleSelectDayRef.current?.(date), []);
-  const valueTimes = useMemo(() => value.map(item => startOfDay(item).getTime()), [value]);
-  const selected = useMemo(() => new Set(valueTimes), [valueTimes]);
-  const rangeBounds = resolvedType === 'range' && valueTimes.length === 2 ? [valueTimes[0], valueTimes[1]] : null;
-  const renderDay = useCallback((mapped, index) => {
-    if (!mapped) return /*#__PURE__*/React.createElement(View, {
-      key: `p-${index}`,
-      style: [tokens.layout.dayPlaceholder, {
-        paddingVertical: tokens.spacing.dayPaddingVertical,
-        paddingHorizontal: columnPadding
-      }]
-    });
-    const {
-      day,
-      key,
-      timeValue,
-      dateValue
-    } = mapped;
-    const isDisabled = timeValue < minDayTime || timeValue > maxDayTime;
-    const isSelected = selected.has(timeValue);
-    const inRange = resolvedType === 'range' && rangeBounds && timeValue > rangeBounds[0] && timeValue < rangeBounds[1];
-    const dayStyles = [tokens.layout.dayText, {
-      borderRadius: tokens.radii.day,
-      color: tokens.colors.text,
-      minWidth: tokens.sizing.dayMinWidth
-    }];
-    if (isDisabled) dayStyles.push({
-      color: tokens.colors.disabled
-    });else if (inRange) dayStyles.push({
-      backgroundColor: tokens.colors.rangeBackground
-    });else if (isSelected) dayStyles.push({
-      backgroundColor: color ?? tokens.colors.selectedBackground,
-      color: tokens.colors.selectedText
-    });
-    const accessibility = `${day.getFullYear()}-${String(day.getMonth() + 1).padStart(2, '0')}-${String(day.getDate()).padStart(2, '0')}${isSelected ? ', selected' : ''}${isDisabled ? ', disabled' : ''}`;
-    return /*#__PURE__*/React.createElement(Pressable, {
-      key: key,
-      accessibilityRole: "button",
-      accessibilityLabel: accessibility,
-      accessibilityState: {
-        selected: isSelected,
-        disabled: isDisabled
-      },
-      style: [tokens.layout.dayButton, {
-        paddingVertical: tokens.spacing.dayPaddingVertical,
-        paddingHorizontal: columnPadding
-      }],
-      disabled: isDisabled,
-      onPress: () => selectDayPress(day),
-      testID: getCalendarDayTestId(day)
-    }, /*#__PURE__*/React.createElement(Text, {
-      style: dayStyles
-    }, dateValue));
-  }, [selected, resolvedType, rangeBounds, minDayTime, maxDayTime, tokens, color, selectDayPress, columnPadding]);
-  const content = /*#__PURE__*/React.createElement(View, _extends({
-    style: [{
-      backgroundColor: tokens.colors.background,
-      padding: tokens.spacing.containerPadding,
-      borderRadius: tokens.radii.container
-    }, style]
-  }, rest), resolvedShowHeader ? /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.header, {
-      marginBottom: tokens.spacing.headerMarginBottom
-    }]
-  }, /*#__PURE__*/React.createElement(Pressable, {
-    testID: "calendar-nav-prev",
-    accessibilityRole: "button",
-    accessibilityLabel: "previous month",
-    onPress: goPrev,
-    disabled: !canGoPrev
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: [tokens.layout.navText, {
-      fontSize: tokens.sizing.navButtonSize,
-      paddingHorizontal: tokens.spacing.navPaddingHorizontal
-    }, !canGoPrev && {
-      opacity: 0.3
-    }]
-  }, '<')), /*#__PURE__*/React.createElement(View, {
-    style: tokens.layout.headerCenter
-  }, isRenderable(resolvedTitle) ? renderTextOrNode(resolvedTitle, [tokens.layout.headerTitle, {
-    color: tokens.colors.text,
-    fontSize: tokens.typography.headerTitleSize,
-    fontWeight: tokens.typography.headerTitleWeight
-  }]) : null, resolvedShowSubtitle ? renderTextOrNode(monthLabel, [tokens.layout.headerSubtitle, {
-    color: tokens.colors.headerSubtitle,
-    fontSize: tokens.typography.headerSubtitleSize
-  }]) : null), /*#__PURE__*/React.createElement(Pressable, {
-    testID: "calendar-nav-next",
-    accessibilityRole: "button",
-    accessibilityLabel: "next month",
-    onPress: goNext,
-    disabled: !canGoNext
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: [tokens.layout.navText, {
-      fontSize: tokens.sizing.navButtonSize,
-      paddingHorizontal: tokens.spacing.navPaddingHorizontal
-    }, !canGoNext && {
-      opacity: 0.3
-    }]
-  }, '>'))) : null, /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.weekRow, {
-      marginBottom: tokens.spacing.weekRowMarginBottom
-    }]
-  }, weekLabels.map((label, i) => /*#__PURE__*/React.createElement(View, {
-    key: `w-${i}`,
-    style: [tokens.layout.weekLabelItem, {
-      paddingHorizontal: columnPadding
-    }]
-  }, renderTextOrNode(label, [tokens.layout.weekLabel, {
-    color: tokens.colors.text
-  }])))), /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.days, {
-      rowGap: tokens.spacing.row
-    }]
-  }, monthDaysMapped.map((mapped, i) => renderDay(mapped, i))), resolvedShowConfirm ? /*#__PURE__*/React.createElement(Pressable, {
-    style: [tokens.layout.confirmButton, {
-      backgroundColor: color ?? tokens.colors.selectedBackground,
-      opacity: confirmDisabled ? 0.5 : 1,
-      marginTop: tokens.spacing.confirmMarginTop,
-      paddingVertical: tokens.spacing.confirmPaddingVertical,
-      borderRadius: tokens.radii.confirmButton
-    }],
-    onPress: handleConfirm,
-    disabled: confirmDisabled
-  }, renderTextOrNode(resolvedConfirmText, [tokens.layout.confirmText, {
-    color: tokens.colors.confirmText,
-    fontWeight: tokens.typography.confirmTextWeight
-  }])) : null);
-  if (!resolvedPoppable) return content;
-  return /*#__PURE__*/React.createElement(Popup, _extends({
-    visible: popupVisible,
-    placement: resolvedPopupPlacement,
-    round: resolvedPopupRound,
-    closeOnOverlayPress: overlayCloseOnPressResolved,
-    overlay: overlayResolved,
-    safeAreaInsetTop: popupRestProps?.safeAreaInsetTop != null ? popupRestProps.safeAreaInsetTop : resolvedShowHeader,
-    safeAreaInsetBottom: popupRestProps?.safeAreaInsetBottom != null ? popupRestProps.safeAreaInsetBottom : resolvedPopupPlacement === 'bottom',
-    onOpen: handlePopupOpen,
-    onOpened: handlePopupOpened,
-    onClose: handlePopupClose,
-    onClosed: handlePopupClosed
-  }, popupRestProps), content);
-};
-function mapValue(value, type) {
-  if (type === 'single') return value[0] ?? new Date();
-  if (type === 'range' && value.length === 2) return value;
-  return value;
-}
-function normalizeValue(value, type) {
-  if (type === 'single') return value.slice(0, 1);
-  if (type === 'range') return value.slice(0, 2).sort((a, b) => a.getTime() - b.getTime());
-  return value;
-}
-function formatMonth(date) {
-  return `${date.getFullYear()}/${date.getMonth() + 1}`;
-}
-function reorderWeekdays(labels, start, fallback) {
-  const normalizedStart = (start % 7 + 7) % 7;
-  const source = labels.length === 7 ? [...labels] : fallback;
-  return [...source.slice(normalizedStart), ...source.slice(0, normalizedStart)];
-}
-function buildMonth(month, weekStartsOn) {
-  const normalizedStart = (weekStartsOn % 7 + 7) % 7;
-  const firstDay = startOfMonth(month);
-  const startOffset = (firstDay.getDay() - normalizedStart + 7) % 7;
-  const daysInMonth = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();
-  const calendar = [];
-  for (let i = 0; i < startOffset; i += 1) calendar.push(null);
-  for (let day = 1; day <= daysInMonth; day += 1) calendar.push(new Date(month.getFullYear(), month.getMonth(), day));
-  while (calendar.length < 42) calendar.push(null);
-  return calendar;
-}
-function getCalendarDayTestId(date) {
-  return `calendar-day-${date.getFullYear()}-${`${date.getMonth() + 1}`.padStart(2, '0')}-${`${date.getDate()}`.padStart(2, '0')}`;
-}
-function startOfMonth(date) {
-  return new Date(date.getFullYear(), date.getMonth(), 1);
-}
-function clampMonth(date, min, max) {
-  const month = startOfMonth(date);
-  const minMonth = startOfMonth(min);
-  const maxMonth = startOfMonth(max);
-  if (month.getTime() < minMonth.getTime()) return minMonth;
-  if (month.getTime() > maxMonth.getTime()) return max;
-  return month;
-}
-function isSameMonth(a, b) {
-  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
-}
-const Calendar = /*#__PURE__*/React.memo(CalendarImpl);
-Calendar.displayName = 'Calendar';
-export default Calendar;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},_extends.apply(null,arguments)}import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Pressable,Text,View}from"react-native";import{useControllableValue}from"../../hooks";import{renderTextOrNode}from"../../utils";import{isRenderable}from"../../utils/validate";import Popup from"../popup";import{useLocale}from"../config-provider/useLocale";import{useCalendarTokens}from"./tokens";const DAY_MS=864e5,isSameDay=(e,t)=>e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate(),startOfDay=e=>{const t=new Date(e);return t.setHours(0,0,0,0),t},daysBetween=(e,t)=>Math.round(Math.abs(startOfDay(e).getTime()-startOfDay(t).getTime())/DAY_MS),toArrayValue=e=>e?Array.isArray(e)?e.filter(Boolean).map(e=>new Date(e)):[new Date(e)]:[],DEFAULT_MIN=new Date((new Date).getFullYear()-10,0,1),DEFAULT_MAX=new Date((new Date).getFullYear()+10,11,31),CalendarImpl=e=>{const{tokensOverride:t,value:a,defaultValue:n,minDate:o=DEFAULT_MIN,maxDate:l=DEFAULT_MAX,type:r,title:s,showSubtitle:i,showHeader:u,showConfirm:c,confirmText:d,weekStartsOn:p,weekdays:g,formatMonthTitle:m,allowSameDay:f,maxRange:y,onOverRange:h,poppable:b,visible:O,defaultVisible:C,onVisibleChange:T,closeOnClickOverlay:k,closeOnConfirm:w,popupPlacement:M,popupRound:D,popupProps:S,onOpen:V,onOpened:R,onClose:v,onClosed:x,color:P,onConfirm:z,onSelect:E,style:A,...B}=e,F=useLocale(),I=F?.vanCalendar,Y=useCalendarTokens(t),$=s??I?.title??Y.defaults.title,L=i??Y.defaults.showSubtitle,N=u??Y.defaults.showHeader,_=d??I?.confirm??Y.defaults.confirmText,H=p??Y.defaults.weekStartsOn,W=f??Y.defaults.allowSameDay,U=b??Y.defaults.poppable,j=k??Y.defaults.closeOnClickOverlay,X=w??Y.defaults.closeOnConfirm,G=M??Y.defaults.popupPlacement,q=D??Y.defaults.popupRound,J=r??Y.defaults.type,K=c??Y.defaults.showConfirm[J],[Q,Z]=useControllableValue(e,{defaultValue:!1,valuePropName:"visible",defaultValuePropName:"defaultVisible",trigger:"onVisibleChange"}),{onClose:ee,onClosed:te,onOpen:ae,onOpened:ne,closeOnOverlayPress:oe,overlay:le,...re}=S??{},se=useRef({onConfirm:z,onOverRange:h,popupOnOpen:ae,onOpen:V,popupOnOpened:ne,onOpened:R,popupOnClose:ee,onClose:v,popupOnClosed:te,onClosed:x});se.current.onConfirm=z,se.current.onOverRange=h,se.current.popupOnOpen=ae,se.current.onOpen=V,se.current.popupOnOpened=ne,se.current.onOpened=R,se.current.popupOnClose=ee,se.current.onClose=v,se.current.popupOnClosed=te,se.current.onClosed=x;const ie=useCallback(()=>{U&&Z(!1)},[U,Z]),ue=useCallback(()=>{se.current.popupOnOpen?.(),se.current.onOpen?.()},[]),ce=useCallback(()=>{se.current.popupOnOpened?.(),se.current.onOpened?.()},[]),de=useCallback(()=>{ie(),se.current.popupOnClose?.(),se.current.onClose?.()},[ie]),pe=useCallback(()=>{se.current.popupOnClosed?.(),se.current.onClosed?.()},[]),ge=oe??j,me=le??!0,[fe,ye]=useControllableValue(e,{defaultValue:null,valuePropName:"value",defaultValuePropName:"defaultValue",trigger:"onSelect"}),he=normalizeValue(toArrayValue(fe),J),[be,Oe]=useState(()=>clampMonth(he.length?he[0]:new Date,o,l)),Ce=he.length?he[0].getTime():null,Te=o.getTime(),ke=l.getTime();useEffect(()=>{if(!he.length)return;const e=clampMonth(he[0],o,l);Oe(t=>isSameMonth(e,t)?t:e)},[Ce,Te,ke]);const we=useMemo(()=>buildMonth(be,H),[be,H]),Me=useMemo(()=>we.map(e=>e?{day:e,key:e.toISOString(),timeValue:startOfDay(e).getTime(),dateValue:e.getDate()}:null),[we]),De=startOfDay(o).getTime(),Se=startOfDay(l).getTime(),Ve=g??I?.weekdays??Y.defaults.weekdays,Re=useMemo(()=>reorderWeekdays(Ve,H,Y.defaults.weekdays),[Ve,Y.defaults.weekdays,H]),ve=useMemo(()=>m?m(be):I?.monthTitle?I.monthTitle(be.getFullYear(),be.getMonth()+1):formatMonth(be),[be,m,I]),xe=startOfMonth(o),Pe=startOfMonth(l),ze=be.getTime()>xe.getTime(),Ee=be.getTime()<Pe.getTime(),Ae=useCallback(e=>Oe(t=>clampMonth(new Date(t.getFullYear(),t.getMonth()+e,1),o,l)),[o,l]),Be=useCallback(()=>Ae(-1),[Ae]),Fe=useCallback(()=>Ae(1),[Ae]),Ie="range"===J?he.length<2:0===he.length,Ye=Y.spacing.column/2,$e=useCallback(e=>{K||"range"===J&&e.length<2||"multiple"===J&&0===e.length||e.length&&(se.current.onConfirm?.(mapValue(e,J)),U&&X&&ie())},[K,J,U,X,ie]),Le=useCallback(()=>{K&&Ie||(se.current.onConfirm?.(mapValue(he,J)),U&&X&&ie())},[K,Ie,he,J,U,X,ie]),Ne=useCallback(e=>{if("range"===J&&2===e.length){const[t,a]=e;if(!W&&isSameDay(t,a))return!1;if(y&&daysBetween(t,a)+1>y)return se.current.onOverRange?.(y),!1}return!("multiple"===J&&y&&e.length>y)||(se.current.onOverRange?.(y),!1)},[J,W,y]),_e=useRef(void 0),He=useCallback(e=>{const t=startOfDay(e).getTime();if(t<De||t>Se)return;let a=[];const n=he;switch(J){case"single":default:a=[e];break;case"multiple":a=n.find(t=>isSameDay(t,e))?n.filter(t=>!isSameDay(t,e)):[...n,e];break;case"range":if(n.length<1||n.length>1)a=[e];else{const t=n[0];a=isSameDay(t,e)?W?[t,e]:[e]:[t,e].sort((e,t)=>e.getTime()-t.getTime())}}const o=normalizeValue(a,J);Ne(o)&&(ye(mapValue(o,J)),K||$e(o))},[he,J,De,Se,W,Ne,ye,K,$e]);_e.current=He;const We=useCallback(e=>_e.current?.(e),[]),Ue=useMemo(()=>he.map(e=>startOfDay(e).getTime()),[he]),je=useMemo(()=>new Set(Ue),[Ue]),Xe="range"===J&&2===Ue.length?[Ue[0],Ue[1]]:null,Ge=useCallback((e,t)=>{if(!e)return React.createElement(View,{key:`p-${t}`,style:[Y.layout.dayPlaceholder,{paddingVertical:Y.spacing.dayPaddingVertical,paddingHorizontal:Ye}]});const{day:a,key:n,timeValue:o,dateValue:l}=e,r=o<De||o>Se,s=je.has(o),i="range"===J&&Xe&&o>Xe[0]&&o<Xe[1],u=[Y.layout.dayText,{borderRadius:Y.radii.day,color:Y.colors.text,minWidth:Y.sizing.dayMinWidth}];r?u.push({color:Y.colors.disabled}):i?u.push({backgroundColor:Y.colors.rangeBackground}):s&&u.push({backgroundColor:P??Y.colors.selectedBackground,color:Y.colors.selectedText});const c=`${a.getFullYear()}-${String(a.getMonth()+1).padStart(2,"0")}-${String(a.getDate()).padStart(2,"0")}${s?", selected":""}${r?", disabled":""}`;return React.createElement(Pressable,{key:n,accessibilityRole:"button",accessibilityLabel:c,accessibilityState:{selected:s,disabled:r},style:[Y.layout.dayButton,{paddingVertical:Y.spacing.dayPaddingVertical,paddingHorizontal:Ye}],disabled:r,onPress:()=>We(a),testID:getCalendarDayTestId(a)},React.createElement(Text,{style:u},l))},[je,J,Xe,De,Se,Y,P,We,Ye]),qe=React.createElement(View,_extends({style:[{backgroundColor:Y.colors.background,padding:Y.spacing.containerPadding,borderRadius:Y.radii.container},A]},B),N?React.createElement(View,{style:[Y.layout.header,{marginBottom:Y.spacing.headerMarginBottom}]},React.createElement(Pressable,{testID:"calendar-nav-prev",accessibilityRole:"button",accessibilityLabel:"previous month",onPress:Be,disabled:!ze},React.createElement(Text,{style:[Y.layout.navText,{fontSize:Y.sizing.navButtonSize,paddingHorizontal:Y.spacing.navPaddingHorizontal},!ze&&{opacity:.3}]},"<")),React.createElement(View,{style:Y.layout.headerCenter},isRenderable($)?renderTextOrNode($,[Y.layout.headerTitle,{color:Y.colors.text,fontSize:Y.typography.headerTitleSize,fontWeight:Y.typography.headerTitleWeight}]):null,L?renderTextOrNode(ve,[Y.layout.headerSubtitle,{color:Y.colors.headerSubtitle,fontSize:Y.typography.headerSubtitleSize}]):null),React.createElement(Pressable,{testID:"calendar-nav-next",accessibilityRole:"button",accessibilityLabel:"next month",onPress:Fe,disabled:!Ee},React.createElement(Text,{style:[Y.layout.navText,{fontSize:Y.sizing.navButtonSize,paddingHorizontal:Y.spacing.navPaddingHorizontal},!Ee&&{opacity:.3}]},">"))):null,React.createElement(View,{style:[Y.layout.weekRow,{marginBottom:Y.spacing.weekRowMarginBottom}]},Re.map((e,t)=>React.createElement(View,{key:`w-${t}`,style:[Y.layout.weekLabelItem,{paddingHorizontal:Ye}]},renderTextOrNode(e,[Y.layout.weekLabel,{color:Y.colors.text}])))),React.createElement(View,{style:[Y.layout.days,{rowGap:Y.spacing.row}]},Me.map((e,t)=>Ge(e,t))),K?React.createElement(Pressable,{style:[Y.layout.confirmButton,{backgroundColor:P??Y.colors.selectedBackground,opacity:Ie?.5:1,marginTop:Y.spacing.confirmMarginTop,paddingVertical:Y.spacing.confirmPaddingVertical,borderRadius:Y.radii.confirmButton}],onPress:Le,disabled:Ie},renderTextOrNode(_,[Y.layout.confirmText,{color:Y.colors.confirmText,fontWeight:Y.typography.confirmTextWeight}])):null);return U?React.createElement(Popup,_extends({visible:Q,placement:G,round:q,closeOnOverlayPress:ge,overlay:me,safeAreaInsetTop:null!=re?.safeAreaInsetTop?re.safeAreaInsetTop:N,safeAreaInsetBottom:null!=re?.safeAreaInsetBottom?re.safeAreaInsetBottom:"bottom"===G,onOpen:ue,onOpened:ce,onClose:de,onClosed:pe},re),qe):qe};function mapValue(e,t){return"single"===t?e[0]??new Date:("range"===t&&e.length,e)}function normalizeValue(e,t){return"single"===t?e.slice(0,1):"range"===t?e.slice(0,2).sort((e,t)=>e.getTime()-t.getTime()):e}function formatMonth(e){return`${e.getFullYear()}/${e.getMonth()+1}`}function reorderWeekdays(e,t,a){const n=(t%7+7)%7,o=7===e.length?[...e]:a;return[...o.slice(n),...o.slice(0,n)]}function buildMonth(e,t){const a=(t%7+7)%7,n=(startOfMonth(e).getDay()-a+7)%7,o=new Date(e.getFullYear(),e.getMonth()+1,0).getDate(),l=[];for(let e=0;e<n;e+=1)l.push(null);for(let t=1;t<=o;t+=1)l.push(new Date(e.getFullYear(),e.getMonth(),t));for(;l.length<42;)l.push(null);return l}function getCalendarDayTestId(e){return`calendar-day-${e.getFullYear()}-${`${e.getMonth()+1}`.padStart(2,"0")}-${`${e.getDate()}`.padStart(2,"0")}`}function startOfMonth(e){return new Date(e.getFullYear(),e.getMonth(),1)}function clampMonth(e,t,a){const n=startOfMonth(e),o=startOfMonth(t),l=startOfMonth(a);return n.getTime()<o.getTime()?o:n.getTime()>l.getTime()?a:n}function isSameMonth(e,t){return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()}const Calendar=React.memo(CalendarImpl);Calendar.displayName="Calendar";export default Calendar;

package/dist/es/components/calendar/index.js

@@ -1,2 +1 @@
-import Calendar from './Calendar';
-export default Calendar;
+import Calendar from"./Calendar";export default Calendar;