@ecohouse/ui 0.1.52 → 0.1.53

package/dist/index.d.cts

@@ -958,6 +958,15 @@ type DatePickerBaseProps = Omit<ViewProps, "style" | "children"> & {
     closeOnSelect?: boolean;
     minDate?: Date;
     maxDate?: Date;
+    /** Calendar days that cannot be selected, such as dates already booked. */
+    unavailableDates?: readonly Date[];
+    /**
+     * When true, unavailable days cannot be selected and a range cannot include them.
+     * Defaults to false so booked days can stay visual-only.
+     */
+    blockUnavailableDates?: boolean;
+    /** Accessibility label for an unavailable day. */
+    unavailableDateLabel?: string;
     /** First visible month when the calendar opens; defaults to the selected value's month, else today. */
     defaultVisibleMonth?: Date;
     /** Monday-first full month names. Defaults to Armenian. */

package/dist/index.d.ts

@@ -958,6 +958,15 @@ type DatePickerBaseProps = Omit<ViewProps, "style" | "children"> & {
     closeOnSelect?: boolean;
     minDate?: Date;
     maxDate?: Date;
+    /** Calendar days that cannot be selected, such as dates already booked. */
+    unavailableDates?: readonly Date[];
+    /**
+     * When true, unavailable days cannot be selected and a range cannot include them.
+     * Defaults to false so booked days can stay visual-only.
+     */
+    blockUnavailableDates?: boolean;
+    /** Accessibility label for an unavailable day. */
+    unavailableDateLabel?: string;
     /** First visible month when the calendar opens; defaults to the selected value's month, else today. */
     defaultVisibleMonth?: Date;
     /** Monday-first full month names. Defaults to Armenian. */

package/dist/index.js

@@ -34240,6 +34240,16 @@ var DEFAULT_MONTH_NAMES = [
   "\u0534\u0565\u056F\u057F\u0565\u0574\u0562\u0565\u0580"
 ];
 var DEFAULT_WEEKDAY_LABELS = ["\u0535\u0550", "\u0535\u0554", "\u0549\u0550", "\u0540\u0546", "\u0548\u0552\u0550", "\u0547\u0532", "\u053F\u0550"];
+function rangeIncludesUnavailable(start, end, isUnavailable) {
+  const cursor = startOfDay(start);
+  const last = startOfDay(end);
+  const step = isBefore(last, cursor) ? -1 : 1;
+  while (true) {
+    if (isUnavailable(cursor)) return true;
+    if (isSameDay(cursor, last)) return false;
+    cursor.setDate(cursor.getDate() + step);
+  }
+}
 var EMPTY_RANGE = { start: null, end: null };
 var DEFAULT_WIDTH = 320;
 var DEFAULT_MENU_HEIGHT = 388;
@@ -34293,6 +34303,9 @@ var DatePicker = forwardRef(
       closeOnSelect = true,
       minDate,
       maxDate,
+      unavailableDates,
+      unavailableDateLabel = "Booked",
+      blockUnavailableDates = false,
       defaultVisibleMonth,
       monthNames = DEFAULT_MONTH_NAMES,
       weekdayLabels = DEFAULT_WEEKDAY_LABELS,
@@ -34311,6 +34324,17 @@ var DatePicker = forwardRef(
       onValueChange: _onValueChange,
       ...rest
     } = props;
+    const unavailableDayKeys = useMemo(() => {
+      const keys = /* @__PURE__ */ new Set();
+      for (const date of unavailableDates ?? []) {
+        keys.add(startOfDay(date).getTime());
+      }
+      return keys;
+    }, [unavailableDates]);
+    const isUnavailable = useCallback(
+      (day) => unavailableDayKeys.has(startOfDay(day).getTime()),
+      [unavailableDayKeys]
+    );
     const isRange = props.range === true;
     const usesRangeTrigger = isRange && variant !== "default";
     const formatValue = formatValueProp ?? (usesRangeTrigger ? (date) => formatDateDayShortMonth(date, monthNames) : formatDate);
@@ -34413,6 +34437,7 @@ var DatePicker = forwardRef(
     const handleDayPress = useCallback(
       (day) => {
         if (disabled || isDateDisabled(day, minDate, maxDate)) return;
+        if (blockUnavailableDates && isUnavailable(day)) return;
         const picked = startOfDay(day);
         if (!isRange) {
           if (!isValueControlled) setUncontrolledSingle(picked);
@@ -34423,14 +34448,19 @@ var DatePicker = forwardRef(
         const { start, end } = rangeValue;
         const startingNewRange = !start || start && end;
         const nextRange = startingNewRange ? { start: picked, end: null } : isBefore(picked, start) ? { start: picked, end: null } : { start, end: picked };
+        if (blockUnavailableDates && nextRange.start && nextRange.end && rangeIncludesUnavailable(nextRange.start, nextRange.end, isUnavailable)) {
+          return;
+        }
         if (!isValueControlled) setUncontrolledRange(nextRange);
         props.onValueChange?.(nextRange);
         if (closeOnSelect && nextRange.start && nextRange.end) setOpen(false);
       },
       [
+        blockUnavailableDates,
         closeOnSelect,
         disabled,
         isRange,
+        isUnavailable,
         isValueControlled,
         maxDate,
         minDate,
@@ -34509,7 +34539,8 @@ var DatePicker = forwardRef(
                 styles26.menu,
                 usesRangeTrigger && styles26.rangeMenu,
                 hideTrigger ? styles26.menuInline : menuAlignEnd ? styles26.menuAlignEnd : styles26.menuAlignStart,
-                calendarStyle
+                calendarStyle,
+                styles26.menuFitContent
               ],
               children: [
                 /* @__PURE__ */ jsxs(View, { style: styles26.calendarHeader, children: [
@@ -34541,7 +34572,7 @@ var DatePicker = forwardRef(
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs(View, { children: [
+                /* @__PURE__ */ jsxs(View, { style: styles26.calendarGrid, children: [
                   /* @__PURE__ */ jsx(View, { style: styles26.weekdayRow, children: weekdayLabels.map((weekdayLabel, index) => /* @__PURE__ */ jsx(View, { style: styles26.weekdayCell, children: /* @__PURE__ */ jsx(Text, { style: styles26.weekdayText, children: weekdayLabel }) }, `${weekdayLabel}-${index}`)) }),
                   weeks.map((week, weekIndex) => {
                     let rangeHighlightStyle = null;
@@ -34596,24 +34627,26 @@ var DatePicker = forwardRef(
                             const isRangeStart = isRange && isSameDay(day, rangeValue.start);
                             const isRangeEnd = isRange && isSameDay(day, rangeValue.end);
                             const isSelectedEndpoint = isSelectedSingle || isRangeStart || isRangeEnd;
+                            const dayUnavailable = isUnavailable(day);
+                            const dayBlocked = blockUnavailableDates && dayUnavailable;
                             const dayDisabled = disabled || isDateDisabled(day, minDate, maxDate);
                             const dayKey = startOfDay(day).getTime();
-                            const isHovered = !dayDisabled && !isSelectedEndpoint && hoveredDayKey === dayKey;
+                            const isHovered = !dayDisabled && !dayBlocked && !isSelectedEndpoint && hoveredDayKey === dayKey;
                             const dayTextColor = isSelectedEndpoint ? colors.white : dayDisabled ? colors.grey400 : isToday ? colors.primary : !inCurrentMonth ? colors.grey300 : colors.white;
                             return /* @__PURE__ */ jsxs(
                               Pressable,
                               {
                                 onPress: () => handleDayPress(day),
-                                disabled: dayDisabled,
+                                disabled: dayDisabled || dayBlocked,
                                 onHoverIn: () => setHoveredDayKey(dayKey),
                                 onHoverOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
                                 onPressIn: () => setHoveredDayKey(dayKey),
                                 onPressOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
                                 style: styles26.dayCellWrap,
                                 accessibilityRole: "button",
-                                accessibilityLabel: formatValue(day),
+                                accessibilityLabel: dayUnavailable ? `${formatValue(day)}, ${unavailableDateLabel}` : formatValue(day),
                                 accessibilityState: {
-                                  disabled: dayDisabled,
+                                  disabled: dayDisabled || dayBlocked,
                                   selected: isSelectedEndpoint
                                 },
                                 children: [
@@ -34623,9 +34656,20 @@ var DatePicker = forwardRef(
                                       style: [
                                         styles26.dayCircle,
                                         isSelectedEndpoint && styles26.dayCircleSelected,
+                                        dayUnavailable && styles26.dayCircleBooked,
                                         isHovered && styles26.dayCircleHovered
                                       ],
-                                      children: /* @__PURE__ */ jsx(Text, { style: [styles26.dayText, { color: dayTextColor }], children: day.getDate() })
+                                      children: /* @__PURE__ */ jsx(
+                                        Text,
+                                        {
+                                          style: [
+                                            styles26.dayText,
+                                            { color: dayTextColor },
+                                            dayUnavailable && styles26.dayTextBooked
+                                          ],
+                                          children: day.getDate()
+                                        }
+                                      )
                                     }
                                   ),
                                   isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsx(View, { style: styles26.todayDot }) : null
@@ -34763,7 +34807,7 @@ var styles26 = StyleSheet.create({
   menu: {
     position: "absolute",
     top: "100%",
-    width: DEFAULT_WIDTH,
+    alignSelf: "flex-start",
     height: DEFAULT_MENU_HEIGHT,
     marginTop: 8,
     zIndex: 10,
@@ -34797,10 +34841,26 @@ var styles26 = StyleSheet.create({
     right: "auto",
     marginTop: 0
   },
-  rangeMenu: {
-    width: RANGE_TRIGGER_WIDTH
+  rangeMenu: {},
+  menuFitContent: {
+    width: MENU_CONTENT_WIDTH + MENU_PADDING * 2,
+    maxWidth: MENU_CONTENT_WIDTH + MENU_PADDING * 2,
+    alignSelf: "flex-start",
+    alignItems: "flex-start",
+    ...Platform.select({
+      web: {
+        width: "fit-content",
+        maxWidth: "fit-content"
+      },
+      default: {}
+    })
+  },
+  calendarGrid: {
+    width: MENU_CONTENT_WIDTH,
+    alignSelf: "flex-start"
   },
   calendarHeader: {
+    width: MENU_CONTENT_WIDTH,
     height: HEADER_HEIGHT3,
     paddingTop: 8,
     paddingBottom: 8,
@@ -34834,9 +34894,8 @@ var styles26 = StyleSheet.create({
   weekdayCell: {
     width: DAY_CELL_WIDTH,
     height: WEEKDAY_ROW_HEIGHT,
-    flexGrow: 1,
-    flexShrink: 1,
-    flexBasis: 0,
+    flexGrow: 0,
+    flexShrink: 0,
     alignItems: "center",
     justifyContent: "center"
   },
@@ -34864,9 +34923,8 @@ var styles26 = StyleSheet.create({
   dayCellWrap: {
     width: DAY_CELL_WIDTH,
     height: DAY_CELL_HEIGHT,
-    flexGrow: 1,
-    flexShrink: 1,
-    flexBasis: 0,
+    flexGrow: 0,
+    flexShrink: 0,
     alignItems: "center",
     justifyContent: "center",
     opacity: 1
@@ -34883,6 +34941,12 @@ var styles26 = StyleSheet.create({
   dayCircleSelected: {
     backgroundColor: colors.primary
   },
+  dayCircleBooked: {
+    backgroundColor: colors.grey700
+  },
+  dayTextBooked: {
+    textDecorationLine: "line-through"
+  },
   dayCircleHovered: {
     backgroundColor: colors.grey600
   },