react-native-resource-calendar 1.0.0

package/dist/index.mjs

@@ -0,0 +1,1711 @@
+import * as React18 from 'react';
+import React18__default, { createContext, useState, useEffect, useMemo, useContext, useRef, useCallback } from 'react';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated2, { useAnimatedRef, useSharedValue, runOnJS, withSpring, useFrameCallback, scrollTo, useAnimatedScrollHandler, useAnimatedStyle, useAnimatedProps } from 'react-native-reanimated';
+import { InteractionManager, View, StyleSheet, Text, TouchableOpacity, TextInput, useWindowDimensions, Platform, Dimensions, Image } from 'react-native';
+import { FlashList } from '@shopify/flash-list';
+import * as Haptics from 'expo-haptics';
+import { toZonedTime } from 'date-fns-tz';
+import { isSameDay, format, getHours, getMinutes, set, setSeconds, setMinutes, setHours } from 'date-fns';
+import { isUndefined } from 'lodash';
+import { createStore } from 'zustand';
+import { shallow } from 'zustand/shallow';
+import { useStoreWithEqualityFn } from 'zustand/traditional';
+import { Canvas, Rect as Rect$1, Line as Line$1 } from '@shopify/react-native-skia';
+import Svg, { Defs, Pattern, Line } from 'react-native-svg';
+import { Rect } from 'react-content-loader/native';
+import { MaterialIcons } from '@expo/vector-icons';
+
+// src/components/Calendar.tsx
+var TIME_LABEL_WIDTH = 50;
+var groupEventsByOverlap = (events) => {
+  return events.reduce((clusters, appointment) => {
+    const cluster = clusters.find((c) => c.some((e) => isOverlapping(e, appointment)));
+    if (cluster) {
+      cluster.push(appointment);
+    } else {
+      clusters.push([appointment]);
+    }
+    return clusters;
+  }, []);
+};
+function computeDisabledBlockColumns(disabledBlocks) {
+  const groups = groupDisabledBlocksByOverlap(disabledBlocks);
+  const res = /* @__PURE__ */ new Map();
+  for (const group of groups) {
+    const byStart = [...group].sort((a, b) => a.from - b.from);
+    const columns = [];
+    for (const evt of byStart) {
+      let placed = false;
+      for (const col of columns) {
+        const last = col[col.length - 1];
+        if (!isOverlappingDisabledBlock(last, evt)) {
+          col.push(evt);
+          placed = true;
+          break;
+        }
+      }
+      if (!placed) columns.push([evt]);
+    }
+    const colIndexByEvent = /* @__PURE__ */ new Map();
+    columns.forEach((col, idx) => col.forEach((e) => colIndexByEvent.set(e, idx)));
+    const groupCols = columns.length;
+    for (const evt of group) {
+      const myCol = colIndexByEvent.get(evt);
+      let span = 1;
+      for (let c = myCol + 1; c < groupCols; c++) {
+        const blocked = columns[c].some(
+          (e) => e !== evt && isOverlappingDisabledBlock(e, evt)
+        );
+        if (blocked) break;
+        span++;
+      }
+      const key = evt.id;
+      res.set(key, {
+        leftIndex: myCol,
+        renderColumnCount: groupCols,
+        spanColumns: span
+      });
+    }
+  }
+  return res;
+}
+var groupDisabledBlocksByOverlap = (disabledBlocks) => {
+  return disabledBlocks.reduce((clusters, disabledBlock) => {
+    const cluster = clusters.find((c) => c.some((e) => isOverlappingDisabledBlock(e, disabledBlock)));
+    if (cluster) {
+      cluster.push(disabledBlock);
+    } else {
+      clusters.push([disabledBlock]);
+    }
+    return clusters;
+  }, []);
+};
+var isOverlappingDisabledBlock = (disabledBlockA, disabledBlockB) => {
+  return !(disabledBlockA.to <= disabledBlockB.from || disabledBlockA.from >= disabledBlockB.to);
+};
+function computeEventColumns(events) {
+  const groups = groupEventsByOverlap(events);
+  const out = /* @__PURE__ */ new Map();
+  for (const group of groups) {
+    const byStart = [...group].sort(
+      (a, b) => a.from - b.from
+    );
+    const columns = [];
+    for (const evt of byStart) {
+      let placed = false;
+      for (const col of columns) {
+        const last = col[col.length - 1];
+        if (!isOverlapping(last, evt)) {
+          col.push(evt);
+          placed = true;
+          break;
+        }
+      }
+      if (!placed) columns.push([evt]);
+    }
+    const colIndex = /* @__PURE__ */ new Map();
+    columns.forEach((col, i) => col.forEach((e) => colIndex.set(e, i)));
+    const groupCols = columns.length;
+    for (const evt of group) {
+      const myCol = colIndex.get(evt);
+      let span = 1;
+      for (let c = myCol + 1; c < groupCols; c++) {
+        const blocked = columns[c].some(
+          (e) => (
+            // exclude self; block if ANY event in col c overlaps me
+            e !== evt && e.id !== evt.id && isOverlapping(e, evt)
+          )
+        );
+        if (blocked) break;
+        span++;
+      }
+      out.set(evt.id, {
+        leftIndex: myCol,
+        renderColumnCount: groupCols,
+        spanColumns: span
+      });
+    }
+  }
+  return out;
+}
+var getTextSize = (size) => {
+  switch (size) {
+    case 60:
+      return 10;
+    case 80:
+      return 12;
+    case 100:
+      return 12;
+    default:
+      return 12;
+  }
+};
+var MINUTES_IN_DAY = 1440;
+var normalizeOvernight = (startMin, endMin) => {
+  if (endMin < startMin) endMin += MINUTES_IN_DAY;
+  return { startMin, endMin };
+};
+var intersects = (A, B) => Math.max(A.startMin, B.startMin) < Math.min(A.endMin, B.endMin);
+var isOverlapping = (eventA, eventB) => {
+  const aStart0 = eventA.from;
+  const aEnd0 = eventA.to;
+  const bStart0 = eventB.from;
+  const bEnd0 = eventB.to;
+  if (aStart0 === aEnd0 || bStart0 === bEnd0) return false;
+  const A = normalizeOvernight(aStart0, aEnd0);
+  const B = normalizeOvernight(bStart0, bEnd0);
+  return intersects(A, B);
+};
+var getCurrentTimeInMinutes = (timezone) => {
+  const now = toZonedTime(/* @__PURE__ */ new Date(), timezone);
+  const hours = getHours(now);
+  const minutes = getMinutes(now);
+  return hours * 60 + minutes;
+};
+var timeToYPosition = (minutes, TIME_LABEL_HEIGHT) => minutes * (TIME_LABEL_HEIGHT / 60);
+var scalePosition = (position, hourHeight) => {
+  return position * (hourHeight / 60);
+};
+var positionToMinutes = (position, TIME_LABEL_HEIGHT) => {
+  "worklet";
+  return position / (TIME_LABEL_HEIGHT / 60);
+};
+var combineDateAndTime = (date, time) => {
+  const [hours, minutes, seconds] = time.split(":").map(Number);
+  const combinedDate = setSeconds(setMinutes(setHours(date, hours), minutes), seconds);
+  return format(combinedDate, "yyyy-MM-dd HH:mm:ss");
+};
+var indexToDate = (index) => {
+  const dateWithHour = set(/* @__PURE__ */ new Date(), { hours: index, minutes: 0, seconds: 0, milliseconds: 0 });
+  return format(dateWithHour, "h:mm a");
+};
+var minutesToTime = (totalMinutes) => {
+  "worklet";
+  const safeTotalMinutes = Math.max(0, Math.round(totalMinutes));
+  const hours24 = Math.floor(safeTotalMinutes / 60);
+  const minutes = safeTotalMinutes % 60;
+  const paddedMins = minutes < 10 ? "0" + minutes : String(minutes);
+  const hours12 = hours24 % 12 || 12;
+  return `${hours12}:${paddedMins}`;
+};
+function computeStackedEventLayout(events, containerWidthPx, {
+  indentPx = 12,
+  // how much to nudge each overlap to the right
+  rightPadPx = 0,
+  // visual breathing room on the right
+  minWidthPx = 30,
+  // never let an event become thinner than this
+  capIndentLevels = 4
+  // after N levels, stop indenting (just stack via z-index)
+} = {}) {
+  const groups = groupEventsByOverlap(events);
+  const out = /* @__PURE__ */ new Map();
+  for (const group of groups) {
+    const byStart = [...group].sort((a, b) => a.from - b.from);
+    const active = [];
+    const removeFinished = (currentFrom) => {
+      for (let i = active.length - 1; i >= 0; i--) {
+        if (!isOverlapping(active[i].e, { ...active[i].e, from: currentFrom, to: currentFrom })) {
+          if (active[i].e.to <= currentFrom) active.splice(i, 1);
+        }
+      }
+    };
+    const findLowestFreeLevel = () => {
+      const used = new Set(active.map((a) => a.level));
+      let lvl = 0;
+      while (used.has(lvl)) lvl++;
+      return lvl;
+    };
+    for (const e of byStart) {
+      removeFinished(e.from);
+      let level = findLowestFreeLevel();
+      const visualLevel = Math.min(level, capIndentLevels);
+      active.push({ e, level });
+      const leftPx = visualLevel * indentPx;
+      const available = containerWidthPx - leftPx - rightPadPx;
+      const widthPx = Math.max(minWidthPx, available);
+      const zIndex = 9999 + e.from * 10 + level;
+      out.set(e.id, { leftPx, widthPx, zIndex });
+    }
+  }
+  return out;
+}
+function columnsToPixels(columnMap, containerWidthPx, {
+  gutterPx = 2,
+  // spacing between columns
+  padLeftPx = 0,
+  padRightPx = 0
+} = {}) {
+  const out = /* @__PURE__ */ new Map();
+  for (const [id, c] of columnMap) {
+    const totalGutters = (c.renderColumnCount - 1) * gutterPx;
+    const innerWidth = containerWidthPx - padLeftPx - padRightPx - totalGutters;
+    const colWidth = innerWidth / c.renderColumnCount;
+    const left = padLeftPx + c.leftIndex * (colWidth + gutterPx);
+    const width = colWidth * c.spanColumns + gutterPx * (c.spanColumns - 1);
+    out.set(id, {
+      leftPx: left,
+      widthPx: Math.max(0, width),
+      // later columns on top slightly, but mostly rely on time-based z
+      zIndex: 1e3 + c.leftIndex
+    });
+  }
+  return out;
+}
+function computeEventFrames(events, containerWidthPx, mode, options) {
+  if (mode === "columns") {
+    const columnLayouts = computeEventColumns(events);
+    return columnsToPixels(columnLayouts, containerWidthPx, {
+      gutterPx: options?.gutterPx,
+      padLeftPx: options?.padLeftPx,
+      padRightPx: options?.padRightPx
+    });
+  } else {
+    return computeStackedEventLayout(events, containerWidthPx, {
+      indentPx: options?.indentPx,
+      rightPadPx: options?.rightPadPx,
+      minWidthPx: options?.minWidthPx,
+      capIndentLevels: options?.capIndentLevels
+    });
+  }
+}
+var Col = ({ children, divider, space, style }) => {
+  return /* @__PURE__ */ React18__default.createElement(View, { style: [{ flexDirection: "column" }, style] }, React18__default.Children.toArray(children).map((child, index) => /* @__PURE__ */ React18__default.createElement(React18__default.Fragment, { key: index }, child, index !== React18__default.Children.toArray(children).length - 1 && divider, index !== React18__default.Children.toArray(children).length - 1 && /* @__PURE__ */ React18__default.createElement(View, { style: { height: space, width: "100%" } }))));
+};
+var Col_default = Col;
+
+// src/theme/resolveFont.ts
+var WEIGHT_NAME_MAP = {
+  "100": "Thin",
+  "200": "ExtraLight",
+  "300": "Light",
+  "400": "Regular",
+  "500": "Medium",
+  "600": "SemiBold",
+  "700": "Bold",
+  "800": "ExtraBold",
+  "900": "Black"
+};
+function resolveFont({ family = "System", weight = "400", italic = false }) {
+  if (family === "System" || family.includes("_")) return family;
+  const weightName = WEIGHT_NAME_MAP[weight] ?? "Regular";
+  const base = `${family}_${weight}${weightName}`;
+  return italic ? `${base}_Italic` : base;
+}
+
+// src/theme/ThemeContext.tsx
+var defaultTheme = {
+  typography: {
+    fontFamily: "System"
+  }
+};
+var ThemeCtx = createContext(defaultTheme);
+var useCalendarTheme = () => useContext(ThemeCtx);
+var useResolvedFont = (overrides) => {
+  const { typography } = useCalendarTheme();
+  const family = overrides?.fontFamily ?? typography?.fontFamily ?? "System";
+  const weight = overrides?.fontWeight ?? "400";
+  const italic = overrides?.italic ?? false;
+  return resolveFont({ family, weight, italic });
+};
+var CalendarThemeProvider = ({ theme, children }) => {
+  const mergedTheme = {
+    ...defaultTheme,
+    ...theme,
+    typography: { ...defaultTheme.typography, ...theme?.typography }
+  };
+  return /* @__PURE__ */ React18__default.createElement(ThemeCtx.Provider, { value: mergedTheme }, children);
+};
+
+// src/components/TimeLabels.tsx
+var TimeLabels = React18.forwardRef(({
+  timezone,
+  hourHeight = 120,
+  startMinutes = 0,
+  totalTimelineWidth,
+  date,
+  layout
+}, ref) => {
+  const isToday = isSameDay(/* @__PURE__ */ new Date(), date);
+  const [currentTimeYPosition, setCurrentTimeYPosition] = useState(timeToYPosition(getCurrentTimeInMinutes(timezone), hourHeight));
+  const [currentTime, setCurrentTime] = useState(format(toZonedTime(/* @__PURE__ */ new Date(), timezone), "h:mm"));
+  const APPOINTMENT_BLOCK_HEIGHT = hourHeight / 4;
+  const updateCurrentTimeYPosition = () => {
+    setCurrentTimeYPosition(timeToYPosition(getCurrentTimeInMinutes(timezone), hourHeight));
+  };
+  const updateCurrentTime = () => {
+    setCurrentTime(format(toZonedTime(/* @__PURE__ */ new Date(), timezone), "h:mm"));
+  };
+  const titleFace = useResolvedFont({ fontWeight: "700" });
+  useEffect(() => {
+    const update = () => {
+      updateCurrentTime();
+      updateCurrentTimeYPosition();
+    };
+    update();
+    const intervalId = setInterval(update, 300);
+    return () => clearInterval(intervalId);
+  }, [timezone]);
+  useEffect(() => {
+    InteractionManager.runAfterInteractions(() => {
+      let pos = isToday ? currentTimeYPosition - 240 : timeToYPosition(startMinutes, hourHeight);
+      if (ref.current) {
+        ref.current.scrollTo({
+          y: Math.round(pos / APPOINTMENT_BLOCK_HEIGHT) * APPOINTMENT_BLOCK_HEIGHT,
+          // Offset by 240px to give a little margin above the red line
+          animated: true
+        });
+      }
+    });
+  }, [date, isToday, APPOINTMENT_BLOCK_HEIGHT, startMinutes, hourHeight]);
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(Col_default, null, Array.from({ length: 24 }).map((_, index) => /* @__PURE__ */ React18.createElement(View, { key: index, style: [styles.timeLabel, { height: hourHeight }] }, /* @__PURE__ */ React18.createElement(
+    Text,
+    {
+      allowFontScaling: false,
+      style: { textAlign: "center", fontFamily: titleFace, fontSize: getTextSize(hourHeight) }
+    },
+    indexToDate(index).split(" ")[0]
+  ), /* @__PURE__ */ React18.createElement(
+    Text,
+    {
+      allowFontScaling: false,
+      style: { textAlign: "center", fontFamily: titleFace, fontSize: getTextSize(hourHeight) }
+    },
+    indexToDate(index).split(" ")[1]
+  ))), isToday && /* @__PURE__ */ React18.createElement(View, { style: [styles.currentTime, {
+    top: currentTimeYPosition - 13,
+    width: TIME_LABEL_WIDTH
+  }] }, /* @__PURE__ */ React18.createElement(
+    Text,
+    {
+      allowFontScaling: false,
+      style: {
+        textAlign: "center",
+        fontFamily: titleFace,
+        fontSize: getTextSize(hourHeight),
+        color: "red"
+      }
+    },
+    currentTime
+  ))), isToday && /* @__PURE__ */ React18.createElement(View, { style: [styles.currentTimeLine, {
+    pointerEvents: "none",
+    top: currentTimeYPosition,
+    width: totalTimelineWidth,
+    left: TIME_LABEL_WIDTH
+  }] }));
+});
+var styles = StyleSheet.create({
+  timeLabel: {
+    width: TIME_LABEL_WIDTH
+  },
+  currentTimeLine: {
+    position: "absolute",
+    height: 2,
+    // Thickness of the line
+    backgroundColor: "red",
+    zIndex: 1e4
+    // Ensure it's on top of all other elements
+  },
+  currentTime: {
+    backgroundColor: "#fff",
+    borderColor: "red",
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 2,
+    borderRadius: 20,
+    height: 26,
+    position: "absolute",
+    zIndex: 1e4
+    // Ensure it's on top of all other elements
+  }
+});
+var Hidden = ({ isHidden, children }) => {
+  if (isHidden) {
+    return null;
+  }
+  return /* @__PURE__ */ React18__default.createElement(React18__default.Fragment, null, children);
+};
+var Hidden_default = Hidden;
+var Center = ({ children, style }) => {
+  return /* @__PURE__ */ React18__default.createElement(
+    View,
+    {
+      style: [{
+        justifyContent: "center",
+        alignItems: "center"
+      }, style]
+    },
+    children
+  );
+};
+var Center_default = Center;
+var Badge = ({
+  style,
+  value = "",
+  children,
+  fontSize,
+  color = "red",
+  textColor = "white"
+}) => {
+  const titleFace = useResolvedFont({ fontWeight: "600" });
+  return /* @__PURE__ */ React18__default.createElement(View, { style: [styles2.badge, { backgroundColor: color }, style] }, children ? children : /* @__PURE__ */ React18__default.createElement(
+    Text,
+    {
+      allowFontScaling: false,
+      style: {
+        color: textColor,
+        fontSize,
+        fontFamily: titleFace
+      }
+    },
+    value
+  ));
+};
+var styles2 = StyleSheet.create({
+  badge: {
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 999,
+    paddingHorizontal: 6
+  }
+});
+var Badge_default = Badge;
+var createCalendarStore = () => createStore((set2) => ({
+  resourcesById: {},
+  eventsByResource: {},
+  disabledBlocksByResource: {},
+  disabledIntervalsByResource: {},
+  selectedEvent: null,
+  draggedEventDraft: null,
+  setSelectedEvent: (evt) => set2({ selectedEvent: evt }),
+  upsertResources: (rs) => set2((s) => {
+    const next = { ...s.resourcesById };
+    let changed = false;
+    for (const r of rs) {
+      const prev = next[r.id];
+      if (!prev || prev.name !== r.name || prev.avatar !== r.avatar) {
+        next[r.id] = { id: r.id, name: r.name, avatar: r.avatar };
+        changed = true;
+      }
+    }
+    return changed ? { resourcesById: next } : {};
+  }),
+  setDayData: ({ events, disabledBlocks, disableIntervals }) => set2((s) => ({
+    eventsByResource: events ?? s.eventsByResource,
+    disabledBlocksByResource: disabledBlocks ?? s.disabledBlocksByResource,
+    disabledIntervalsByResource: disableIntervals ?? s.disabledIntervalsByResource
+  })),
+  setDraggedEventDraft: (draft) => set2({ draggedEventDraft: draft }),
+  clearDay: () => set2({
+    eventsByResource: {},
+    disabledBlocksByResource: {},
+    disabledIntervalsByResource: {}
+  })
+}));
+var StoreContext = createContext(null);
+var Provider = ({ children }) => {
+  const ref = useRef(void 0);
+  if (!ref.current) ref.current = createCalendarStore();
+  return /* @__PURE__ */ React18__default.createElement(StoreContext.Provider, { value: ref.current }, children);
+};
+var useBound = (selector, eq) => {
+  const store = useContext(StoreContext);
+  if (!store) throw new Error("Calendar store used outside of Provider");
+  return useStoreWithEqualityFn(store, selector, eq);
+};
+var useResourceById = (id) => useBound((s) => s.resourcesById[id]);
+var useGetSelectedEvent = () => useBound((s) => s.selectedEvent);
+var useSetSelectedEvent = () => useBound((s) => s.setSelectedEvent);
+var useEventsFor = (resourceId) => useBound((s) => s.eventsByResource[resourceId] ?? [], shallow);
+var useGetDraggedEventDraft = () => useBound((s) => s.draggedEventDraft);
+var useDisabledBlocksFor = (resourceId) => useBound((s) => s.disabledBlocksByResource[resourceId] ?? [], shallow);
+var useDisabledIntervalsFor = (resourceId) => useBound((s) => s.disabledIntervalsByResource[resourceId] ?? [], shallow);
+var useUpsertResources = () => useBound((s) => s.upsertResources);
+var useSetDayData = () => useBound((s) => s.setDayData);
+var useSetDraggedEventDraft = () => useBound((s) => s.setDraggedEventDraft);
+var zustandBinding = {
+  Provider,
+  useResourceById,
+  useEventsFor,
+  useDisabledBlocksFor,
+  useDisabledIntervalsFor,
+  useUpsertResources,
+  useSetDayData,
+  useGetSelectedEvent,
+  useSetSelectedEvent,
+  useGetDraggedEventDraft,
+  useSetDraggedEventDraft
+};
+
+// src/store/bindings/BindingProvider.tsx
+var BindingCtx = createContext(null);
+var useCalendarBinding = () => {
+  const ctx = useContext(BindingCtx);
+  if (!ctx) throw new Error("useCalendarBinding must be used within <CalendarBindingProvider>");
+  return ctx;
+};
+var CalendarBindingProvider = ({ binding, children }) => {
+  const active = binding ?? zustandBinding;
+  const StoreProvider = active.Provider;
+  return /* @__PURE__ */ React18__default.createElement(BindingCtx.Provider, { value: active }, /* @__PURE__ */ React18__default.createElement(StoreProvider, null, children));
+};
+
+// src/components/ResourcesComponent.tsx
+var ResourceComponent = ({ id, onResourcePress, APPOINTMENT_BLOCK_WIDTH }) => {
+  const { useResourceById: useResourceById2, useEventsFor: useEventsFor2 } = useCalendarBinding();
+  const resource = useResourceById2(id);
+  const events = useEventsFor2(id);
+  const titleFace = useResolvedFont({ fontWeight: "700" });
+  return /* @__PURE__ */ React18.createElement(Col_default, { style: [{
+    alignItems: "center",
+    width: APPOINTMENT_BLOCK_WIDTH
+  }] }, /* @__PURE__ */ React18.createElement(View, { style: { position: "relative" } }, /* @__PURE__ */ React18.createElement(
+    StaffAvatar,
+    {
+      onPress: () => {
+        if (onResourcePress)
+          onResourcePress(resource);
+      },
+      name: resource?.name,
+      circleSize: 40,
+      fontSize: 16,
+      badge: events?.length,
+      image: resource?.avatar
+    }
+  )), /* @__PURE__ */ React18.createElement(
+    Text,
+    {
+      style: {
+        fontSize: 14,
+        fontFamily: titleFace
+      },
+      numberOfLines: 1,
+      allowFontScaling: false
+    },
+    resource?.name
+  ));
+};
+var ResourcesComponent = ({ resourceIds, onResourcePress, APPOINTMENT_BLOCK_WIDTH }) => {
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, resourceIds?.map((id) => {
+    return /* @__PURE__ */ React18.createElement(
+      ResourceComponent,
+      {
+        key: id,
+        id,
+        APPOINTMENT_BLOCK_WIDTH,
+        onResourcePress
+      }
+    );
+  }));
+};
+function StaffAvatar({
+  name,
+  circleSize = 60,
+  fontSize = 36,
+  image,
+  badge,
+  badgeStyle,
+  onPress,
+  containerStyle,
+  ringColor = "#DAEEE7",
+  avatarColor,
+  textColor
+}) {
+  const titleFace = useResolvedFont({ fontWeight: "700" });
+  return /* @__PURE__ */ React18.createElement(
+    TouchableOpacity,
+    {
+      disabled: isUndefined(onPress),
+      onPress,
+      style: containerStyle
+    },
+    /* @__PURE__ */ React18.createElement(Center_default, { style: {
+      borderRadius: 9999,
+      backgroundColor: ringColor
+    } }, /* @__PURE__ */ React18.createElement(Hidden_default, { isHidden: isUndefined(badge) || Number(badge) == 0 }, /* @__PURE__ */ React18.createElement(
+      View,
+      {
+        style: [{
+          zIndex: 1,
+          position: "absolute",
+          right: -4,
+          top: -6,
+          borderRadius: 999,
+          backgroundColor: "#fff",
+          padding: 4
+        }, badgeStyle]
+      },
+      /* @__PURE__ */ React18.createElement(
+        Badge_default,
+        {
+          fontSize: 12,
+          value: badge + "",
+          color: "#4d959c"
+        }
+      )
+    )), /* @__PURE__ */ React18.createElement(Center_default, { style: {
+      margin: 2,
+      borderRadius: 9999,
+      backgroundColor: "white"
+    } }, /* @__PURE__ */ React18.createElement(Center_default, { style: {
+      margin: 2,
+      borderRadius: 9999,
+      height: circleSize,
+      width: circleSize,
+      backgroundColor: avatarColor || "#C9E5E8",
+      overflow: "hidden"
+    } }, image ? /* @__PURE__ */ React18.createElement(
+      Image,
+      {
+        resizeMode: "cover",
+        source: { uri: image },
+        style: {
+          height: "100%",
+          borderRadius: 6,
+          ...StyleSheet.absoluteFillObject
+        }
+      }
+    ) : /* @__PURE__ */ React18.createElement(
+      Text,
+      {
+        allowFontScaling: false,
+        style: {
+          fontFamily: titleFace,
+          fontSize,
+          color: textColor || "#4d959c"
+        }
+      },
+      name ? name.split(" ").map((n) => n[0]).join("") : ""
+    ))))
+  );
+}
+var EventGridBlocksSkia = ({
+  dateRef,
+  handleBlockPress,
+  hourHeight,
+  APPOINTMENT_BLOCK_WIDTH
+}) => {
+  const rowHeight = hourHeight / 4;
+  const [pressedRow, setPressedRow] = React18.useState(null);
+  const timeLabels = useMemo(() => {
+    const out = [];
+    for (let h = 0; h < 24; h++) {
+      for (let q = 0; q < 4; q++) {
+        const m = q * 15;
+        const hh = String(h).padStart(2, "0");
+        const mm = String(m).padStart(2, "0");
+        out.push(`${hh}:${mm}:00`);
+      }
+    }
+    return out;
+  }, []);
+  const rects = useMemo(
+    () => timeLabels.map((_, row) => ({
+      x: 0,
+      y: row * rowHeight,
+      width: APPOINTMENT_BLOCK_WIDTH,
+      height: rowHeight,
+      row
+    })),
+    [timeLabels, rowHeight, APPOINTMENT_BLOCK_WIDTH]
+  );
+  const midIndex = Math.ceil(rects.length / 2);
+  const firstRects = rects.slice(0, midIndex);
+  const secondRects = rects.slice(midIndex);
+  const segmentHeight = rowHeight * firstRects.length;
+  const onSlotPress = React18.useCallback(
+    (row) => {
+      setPressedRow(null);
+      const slot = timeLabels[row];
+      if (slot) {
+        const timestamp = combineDateAndTime(dateRef.current, slot);
+        handleBlockPress(timestamp);
+      }
+    },
+    [dateRef, handleBlockPress, timeLabels]
+  );
+  const onPressBegin = React18.useCallback((row) => {
+    setPressedRow(row);
+  }, []);
+  const onTouchesUp = React18.useCallback(() => {
+    setPressedRow(null);
+  }, []);
+  const longPressGesture = Gesture.LongPress().onBegin((e) => runOnJS(onPressBegin)(Math.floor(e.y / rowHeight))).onEnd((e) => runOnJS(onSlotPress)(Math.floor(e.y / rowHeight))).onFinalize(() => runOnJS(onTouchesUp)());
+  return /* @__PURE__ */ React18.createElement(GestureDetector, { gesture: longPressGesture }, /* @__PURE__ */ React18.createElement(View, null, /* @__PURE__ */ React18.createElement(Canvas, { style: { width: APPOINTMENT_BLOCK_WIDTH, height: segmentHeight } }, firstRects.map(({ x, y, width: w, height: h, row }, idx) => /* @__PURE__ */ React18.createElement(React18.Fragment, { key: idx }, /* @__PURE__ */ React18.createElement(
+    Rect$1,
+    {
+      x,
+      y,
+      width: w,
+      height: h,
+      color: pressedRow === row ? "rgba(240,240,240,0.3)" : "rgba(240,240,240,0.6)",
+      style: "fill"
+    }
+  ), /* @__PURE__ */ React18.createElement(Line$1, { p1: { x, y: y + h }, p2: { x: x + w, y: y + h }, color: "#ddd", strokeWidth: 1 })))), /* @__PURE__ */ React18.createElement(Canvas, { style: { width: APPOINTMENT_BLOCK_WIDTH, height: segmentHeight } }, secondRects.map(({ x, y, width: w, height: h, row }, idx) => /* @__PURE__ */ React18.createElement(React18.Fragment, { key: idx }, /* @__PURE__ */ React18.createElement(
+    Rect$1,
+    {
+      x,
+      y: y - segmentHeight,
+      width: w,
+      height: h,
+      color: pressedRow === row ? "rgba(240,240,240,0.3)" : "rgba(240,240,240,0.6)",
+      style: "fill"
+    }
+  ), /* @__PURE__ */ React18.createElement(
+    Line$1,
+    {
+      p1: { x, y: y - segmentHeight + h },
+      p2: { x: x + w, y: y - segmentHeight + h },
+      color: "#ddd",
+      strokeWidth: 1
+    }
+  ))))));
+};
+var StoreFeeder = ({ store, resources }) => {
+  const upsertResources = store.useUpsertResources();
+  const setDayData = store.useSetDayData();
+  useEffect(() => {
+    upsertResources(resources.map((r) => ({ id: r.id, name: r.name, avatar: r.avatar })));
+    const eventsByResource = {};
+    const blocksByResource = {};
+    const intervalsByResource = {};
+    for (const r of resources) {
+      if (r.events?.length) eventsByResource[r.id] = r.events;
+      if (r.disabledBlocks?.length) blocksByResource[r.id] = r.disabledBlocks;
+      if (r.disableIntervals?.length) intervalsByResource[r.id] = r.disableIntervals;
+    }
+    setDayData({
+      events: eventsByResource,
+      disabledBlocks: blocksByResource,
+      disableIntervals: intervalsByResource
+    });
+  }, [resources, upsertResources, setDayData]);
+  return null;
+};
+var DisabledInterval = ({ width, top, height }) => {
+  return /* @__PURE__ */ React18__default.createElement(View, { style: [styles3.disabledBlock, { width, top, height }] }, /* @__PURE__ */ React18__default.createElement(Svg, { width, height: "100%" }, /* @__PURE__ */ React18__default.createElement(Defs, null, /* @__PURE__ */ React18__default.createElement(Pattern, { id: "diagonalHatch", patternUnits: "userSpaceOnUse", width: "10", height: "10" }, /* @__PURE__ */ React18__default.createElement(Line, { x1: "0", y1: "0", x2: "10", y2: "10", stroke: "rgba(150, 150, 150, 0.8)", strokeWidth: "1" }))), /* @__PURE__ */ React18__default.createElement(Rect, { width, height: "100%", fill: "url(#diagonalHatch)" })));
+};
+var DisabledIntervals = React18__default.memo(({ id, APPOINTMENT_BLOCK_WIDTH, hourHeight }) => {
+  const { useDisabledIntervalsFor: useDisabledIntervalsFor2 } = useCalendarBinding();
+  const disabledIntervals = useDisabledIntervalsFor2(id);
+  return /* @__PURE__ */ React18__default.createElement(React18__default.Fragment, null, disabledIntervals.map(
+    (disabledInterval, index) => {
+      return /* @__PURE__ */ React18__default.createElement(
+        DisabledInterval,
+        {
+          key: `${index}-${disabledInterval.from}-${disabledInterval.to}`,
+          width: APPOINTMENT_BLOCK_WIDTH,
+          top: scalePosition(disabledInterval.from, hourHeight),
+          height: scalePosition(disabledInterval.to - disabledInterval.from, hourHeight)
+        }
+      );
+    }
+  ));
+});
+var styles3 = StyleSheet.create({
+  disabledBlock: {
+    position: "absolute",
+    zIndex: -10
+  }
+});
+var DisabledIntervals_default = DisabledIntervals;
+var Row = ({ children, divider, space, style, ...props }) => {
+  return /* @__PURE__ */ React18__default.createElement(View, { style: [{ flexDirection: "row" }, style], ...props }, React18__default.Children.toArray(children).map((child, index) => /* @__PURE__ */ React18__default.createElement(React18__default.Fragment, { key: index }, child, index !== React18__default.Children.toArray(children).length - 1 && divider, index !== React18__default.Children.toArray(children).length - 1 && /* @__PURE__ */ React18__default.createElement(View, { style: { width: space, height: "100%" } }))));
+};
+var Row_default = Row;
+var DisabledBlockComponent = ({
+  top,
+  height,
+  layout,
+  disabledBlock,
+  hourHeight,
+  onDisabledBlockPress
+}) => {
+  const dynamicStyle = {
+    backgroundColor: "#d3d3d3",
+    top: top + 2,
+    height: height < hourHeight / 4 ? height : height - 4,
+    width: layout.widthPx,
+    left: layout.leftPx,
+    borderWidth: 1,
+    borderColor: "rgba(0,0,0,0.12)"
+  };
+  const titleFace = useResolvedFont({ fontWeight: "600" });
+  return /* @__PURE__ */ React18__default.createElement(
+    TouchableOpacity,
+    {
+      style: [styles4.event, dynamicStyle],
+      onPress: () => {
+        onDisabledBlockPress && onDisabledBlockPress(disabledBlock);
+      }
+    },
+    /* @__PURE__ */ React18__default.createElement(Col_default, { style: { position: "relative" } }, /* @__PURE__ */ React18__default.createElement(Row_default, { style: { height: 18 } }, /* @__PURE__ */ React18__default.createElement(
+      Text,
+      {
+        allowFontScaling: false,
+        style: {
+          fontFamily: titleFace,
+          fontSize: getTextSize(hourHeight)
+        }
+      },
+      minutesToTime(disabledBlock?.from),
+      " - ",
+      minutesToTime(disabledBlock?.to)
+    )), /* @__PURE__ */ React18__default.createElement(
+      Text,
+      {
+        allowFontScaling: false,
+        style: {
+          fontFamily: titleFace,
+          fontSize: getTextSize(hourHeight)
+        }
+      },
+      disabledBlock?.title
+    ))
+  );
+};
+var DisabledBlocks = React18__default.memo(({
+  id,
+  APPOINTMENT_BLOCK_WIDTH,
+  hourHeight,
+  onDisabledBlockPress
+}) => {
+  const { useDisabledBlocksFor: useDisabledBlocksFor2 } = useCalendarBinding();
+  const disabledBlocks = useDisabledBlocksFor2(id);
+  const layoutMap = useMemo(() => {
+    return columnsToPixels(computeDisabledBlockColumns(disabledBlocks), APPOINTMENT_BLOCK_WIDTH);
+  }, [disabledBlocks]);
+  return /* @__PURE__ */ React18__default.createElement(React18__default.Fragment, null, disabledBlocks.map(
+    (disabledBlock, index) => {
+      const key = disabledBlock.id;
+      return /* @__PURE__ */ React18__default.createElement(
+        DisabledBlockComponent,
+        {
+          hourHeight,
+          disabledBlock,
+          key: `${index}-${disabledBlock.from}-${disabledBlock.to}`,
+          top: scalePosition(disabledBlock.from, hourHeight),
+          height: scalePosition(disabledBlock.to - disabledBlock.from, hourHeight),
+          layout: layoutMap.get(key),
+          onDisabledBlockPress
+        }
+      );
+    }
+  ));
+});
+var styles4 = StyleSheet.create({
+  event: {
+    position: "absolute",
+    borderRadius: 5,
+    padding: 2,
+    overflow: "hidden",
+    zIndex: 999
+    // Ensure events stay above the background blocks
+  }
+});
+var DisabledBlocks_default = DisabledBlocks;
+var EventBlock = React18__default.memo(({
+  event,
+  onLongPress,
+  onPress,
+  disabled,
+  selected,
+  hourHeight,
+  slots,
+  frame,
+  styleOverrides
+}) => {
+  const { useGetSelectedEvent: useGetSelectedEvent2 } = useCalendarBinding();
+  const selectedAppointment = useGetSelectedEvent2();
+  const eventTop = scalePosition(event.from, hourHeight);
+  const eventHeight = scalePosition(event.to - event.from, hourHeight);
+  const start = minutesToTime(event.from);
+  const end = minutesToTime(event.to);
+  const dynamicStyle = {
+    top: eventTop + 2,
+    height: eventHeight < hourHeight / 4 ? eventHeight : eventHeight - 4,
+    left: frame.leftPx,
+    width: frame.widthPx,
+    zIndex: frame.zIndex,
+    opacity: selectedAppointment ? 0.5 : 1,
+    borderWidth: selected ? 2 : 1,
+    borderColor: selected ? "#4d959c" : "rgba(0,0,0,0.12)"
+  };
+  const resolved = typeof styleOverrides === "function" ? styleOverrides(event) ?? {} : styleOverrides ?? {};
+  if (eventHeight == 0)
+    return null;
+  const TopRight = slots?.TopRight;
+  const Body = slots?.Body;
+  const titleFace = useResolvedFont({ fontWeight: "700" });
+  const timeFace = useResolvedFont({ fontWeight: "600" });
+  return /* @__PURE__ */ React18__default.createElement(
+    TouchableOpacity,
+    {
+      style: [styles5.event, resolved?.container, dynamicStyle],
+      disabled,
+      onPress: () => {
+        onPress && onPress(event);
+      },
+      onLongPress: () => {
+        onLongPress && onLongPress(event);
+      }
+    },
+    /* @__PURE__ */ React18__default.createElement(Hidden_default, { isHidden: !disabled }, /* @__PURE__ */ React18__default.createElement(View, { style: {
+      position: "absolute",
+      top: 0,
+      width: "150%",
+      height: "150%",
+      zIndex: 1,
+      backgroundColor: "rgba(255, 255, 255, 0.5)"
+    } })),
+    /* @__PURE__ */ React18__default.createElement(Col_default, { style: [{ position: "relative" }, resolved?.content] }, /* @__PURE__ */ React18__default.createElement(
+      TextInput,
+      {
+        editable: false,
+        allowFontScaling: false,
+        underlineColorAndroid: "transparent",
+        style: {
+          width: "100%",
+          fontFamily: timeFace,
+          fontSize: getTextSize(hourHeight),
+          pointerEvents: "none",
+          padding: 0,
+          margin: 0
+        },
+        defaultValue: `${start} - ${end}`
+      }
+    ), Body ? /* @__PURE__ */ React18__default.createElement(Body, { event, ctx: { hourHeight } }) : /* @__PURE__ */ React18__default.createElement(React18__default.Fragment, null, /* @__PURE__ */ React18__default.createElement(Row_default, { style: { alignItems: "center", height: 18 } }, /* @__PURE__ */ React18__default.createElement(
+      Text,
+      {
+        allowFontScaling: false,
+        style: [{
+          fontFamily: titleFace,
+          fontSize: getTextSize(hourHeight),
+          fontWeight: "700"
+        }, resolved?.title]
+      },
+      event?.title
+    )), /* @__PURE__ */ React18__default.createElement(
+      Text,
+      {
+        allowFontScaling: false,
+        style: [{
+          fontFamily: timeFace,
+          fontSize: getTextSize(hourHeight),
+          fontWeight: "600"
+        }, resolved?.desc]
+      },
+      event?.description
+    )), /* @__PURE__ */ React18__default.createElement(Row_default, { style: {
+      position: "absolute",
+      right: 2
+    }, space: 2 }, TopRight ? /* @__PURE__ */ React18__default.createElement(TopRight, { event, ctx: { hourHeight } }) : null))
+  );
+});
+var styles5 = StyleSheet.create({
+  event: {
+    backgroundColor: "#4d959c",
+    position: "absolute",
+    borderRadius: 5,
+    padding: 2,
+    overflow: "hidden",
+    zIndex: 9999
+    // Ensure events stay above the background blocks
+  }
+});
+var EventBlock_default = EventBlock;
+var AnimatedTextInput = Animated2.createAnimatedComponent(TextInput);
+var DraggableEvent = ({
+  selectedEvent,
+  eventStartedTop,
+  panYAbs,
+  panXAbs,
+  APPOINTMENT_BLOCK_WIDTH,
+  hourHeight,
+  eventHeight,
+  styleOverrides,
+  slots
+}) => {
+  const dynamicStyle = useAnimatedStyle(() => {
+    return {
+      height: eventHeight.value < hourHeight / 4 ? eventHeight.value : eventHeight.value - 4,
+      width: APPOINTMENT_BLOCK_WIDTH,
+      borderWidth: 1,
+      borderColor: "rgba(0,0,0,0.12)"
+    };
+  });
+  const draggingAnimatedStyle = useAnimatedStyle(() => {
+    if (!selectedEvent) {
+      return {
+        opacity: 0,
+        transform: [
+          {
+            translateY: 0
+          },
+          {
+            translateX: 0
+          }
+        ]
+      };
+    }
+    return {
+      opacity: 1,
+      transform: [
+        {
+          translateY: panYAbs.value - eventHeight.value / 2 + 2
+        },
+        {
+          translateX: panXAbs.value - APPOINTMENT_BLOCK_WIDTH / 2
+        }
+      ]
+    };
+  }, [selectedEvent, eventHeight, APPOINTMENT_BLOCK_WIDTH]);
+  const initialDisplayTime = useMemo(() => {
+    const start = minutesToTime(positionToMinutes(eventStartedTop.value, hourHeight));
+    const end = minutesToTime(positionToMinutes(eventStartedTop.value + eventHeight.value, hourHeight));
+    return `${start} - ${end}`;
+  }, [eventHeight.value, hourHeight, eventStartedTop.value]);
+  const animatedTimeProps = useAnimatedProps(() => {
+    const start = minutesToTime(positionToMinutes(eventStartedTop.value, hourHeight));
+    const end = minutesToTime(positionToMinutes(eventStartedTop.value + eventHeight.value, hourHeight));
+    return {
+      text: `${start} - ${end}`
+    };
+  }, []);
+  const resolved = typeof styleOverrides === "function" ? styleOverrides(selectedEvent) ?? {} : styleOverrides ?? {};
+  const TopRight = slots?.TopRight;
+  const Body = slots?.Body;
+  const titleFace = useResolvedFont({ fontWeight: "700" });
+  const timeFace = useResolvedFont({ fontWeight: "600" });
+  return /* @__PURE__ */ React18.createElement(Animated2.View, { style: [styles6.event, dynamicStyle, draggingAnimatedStyle, resolved?.container] }, /* @__PURE__ */ React18.createElement(Col_default, { style: [{ position: "relative" }, resolved?.content] }, /* @__PURE__ */ React18.createElement(
+    AnimatedTextInput,
+    {
+      editable: false,
+      allowFontScaling: false,
+      underlineColorAndroid: "transparent",
+      style: {
+        width: "100%",
+        fontFamily: timeFace,
+        fontSize: getTextSize(hourHeight),
+        pointerEvents: "none",
+        padding: 0,
+        margin: 0
+      },
+      defaultValue: initialDisplayTime,
+      animatedProps: animatedTimeProps
+    }
+  ), Body ? /* @__PURE__ */ React18.createElement(Body, { event: selectedEvent, ctx: { hourHeight } }) : /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(Row_default, { style: { alignItems: "center", height: 18 } }, /* @__PURE__ */ React18.createElement(
+    Text,
+    {
+      allowFontScaling: false,
+      style: [{
+        fontFamily: titleFace,
+        fontSize: getTextSize(hourHeight)
+      }, resolved?.title]
+    },
+    selectedEvent?.title
+  )), /* @__PURE__ */ React18.createElement(
+    Text,
+    {
+      allowFontScaling: false,
+      style: [{
+        fontFamily: timeFace,
+        fontSize: getTextSize(hourHeight)
+      }, resolved?.desc]
+    },
+    selectedEvent?.description
+  )), /* @__PURE__ */ React18.createElement(Row_default, { style: {
+    position: "absolute",
+    right: 2
+  }, space: 2 }, TopRight ? /* @__PURE__ */ React18.createElement(TopRight, { event: selectedEvent, ctx: { hourHeight } }) : null)), /* @__PURE__ */ React18.createElement(Row_default, { style: {
+    position: "absolute",
+    alignSelf: "center",
+    bottom: 0
+  } }, /* @__PURE__ */ React18.createElement(MaterialIcons, { name: "drag-handle", size: 12, color: "black" })));
+};
+var styles6 = StyleSheet.create({
+  event: {
+    backgroundColor: "#4d959c",
+    position: "absolute",
+    borderRadius: 5,
+    padding: 2,
+    overflow: "hidden",
+    zIndex: 99
+    // Ensure events stay above the background blocks
+  }
+});
+var EventBlocks = React18__default.memo(({
+  id,
+  onLongPress,
+  onPress,
+  hourHeight,
+  EVENT_BLOCK_WIDTH,
+  eventRenderer,
+  isEventDisabled,
+  isEventSelected,
+  mode
+}) => {
+  const { useEventsFor: useEventsFor2 } = useCalendarBinding();
+  const events = useEventsFor2(id);
+  const frameMap = useMemo(
+    () => computeEventFrames(events, EVENT_BLOCK_WIDTH, mode),
+    [events, mode, EVENT_BLOCK_WIDTH]
+  );
+  const Renderer = eventRenderer;
+  return events?.map(
+    (evt, index) => {
+      const selected = isEventSelected?.(evt) ?? false;
+      const disabled = isEventDisabled?.(evt) ?? false;
+      return /* @__PURE__ */ React18__default.createElement(
+        Renderer,
+        {
+          key: `${evt.from}-${evt.to}-${index}`,
+          event: evt,
+          onLongPress: (evt2) => onLongPress(evt2),
+          onPress: (evt2) => onPress(evt2),
+          hourHeight,
+          frame: frameMap.get(evt.id),
+          selected,
+          disabled
+        }
+      );
+    }
+  );
+});
+var EventBlocks_default = EventBlocks;
+
+// src/components/Calendar.tsx
+var AnimatedFlashList = Animated2.createAnimatedComponent(FlashList);
+var CalendarInner = (props) => {
+  const { width } = useWindowDimensions();
+  const isIOS = Platform.OS === "ios";
+  const binding = useCalendarBinding();
+  const {
+    date,
+    numberOfColumns = 3,
+    startMinutes,
+    hourHeight = 120,
+    snapIntervalInMinutes = 5,
+    timezone = Intl?.DateTimeFormat()?.resolvedOptions()?.timeZone,
+    resources,
+    onResourcePress,
+    onBlockLongPress,
+    onEventPress,
+    onEventLongPress,
+    onDisabledBlockPress,
+    eventSlots,
+    eventStyleOverrides,
+    overLappingLayoutMode = "stacked"
+  } = props;
+  const snapInterval = hourHeight / 60 * snapIntervalInMinutes;
+  const onPressRef = React18__default.useRef(onEventPress);
+  const onLongPressRef = React18__default.useRef(onEventLongPress);
+  const internalOnLongPress = useRef(null);
+  const onDisabledBlockPressRef = React18__default.useRef(onDisabledBlockPress);
+  const selectedRef = useRef(props.isEventSelected);
+  const disabledRef = useRef(props.isEventDisabled);
+  const effectiveRenderer = useMemo(() => {
+    return (p) => /* @__PURE__ */ React18__default.createElement(
+      EventBlock_default,
+      {
+        ...p,
+        slots: props.eventSlots,
+        styleOverrides: props.eventStyleOverrides
+      }
+    );
+  }, [eventSlots, eventStyleOverrides]);
+  const isEventSelectedStable = useCallback(
+    (ev) => selectedRef.current ? selectedRef.current(ev) : false,
+    []
+  );
+  const isEventDisabledStable = useCallback(
+    (ev) => disabledRef.current ? disabledRef.current(ev) : false,
+    []
+  );
+  useEffect(() => {
+    onPressRef.current = onEventPress;
+  }, [onEventPress]);
+  useEffect(() => {
+    onLongPressRef.current = onEventLongPress;
+  }, [onEventLongPress]);
+  useEffect(() => {
+    onDisabledBlockPressRef.current = onDisabledBlockPress;
+  }, [onDisabledBlockPress]);
+  useEffect(() => {
+    rendererRef.current = effectiveRenderer;
+  }, [effectiveRenderer]);
+  useEffect(() => {
+    selectedRef.current = props.isEventSelected;
+  }, [props.isEventSelected]);
+  useEffect(() => {
+    disabledRef.current = props.isEventDisabled;
+  }, [props.isEventDisabled]);
+  const rendererRef = useRef(effectiveRenderer);
+  const stableRenderer = useCallback((p) => rendererRef.current(p), []);
+  const stableOnPress = React18__default.useCallback((e) => onPressRef.current?.(e), []);
+  const stableOnDisabledBlockPress = React18__default.useCallback((b) => onDisabledBlockPressRef.current?.(b), []);
+  const { useGetSelectedEvent: useGetSelectedEvent2, useSetSelectedEvent: useSetSelectedEvent2, useSetDraggedEventDraft: useSetDraggedEventDraft2, useGetDraggedEventDraft: useGetDraggedEventDraft2 } = useCalendarBinding();
+  const selectedEvent = useGetSelectedEvent2();
+  const setSelectedEvent = useSetSelectedEvent2();
+  const setDraggedEventDraft = useSetDraggedEventDraft2();
+  const APPOINTMENT_BLOCK_WIDTH = (width - TIME_LABEL_WIDTH) / numberOfColumns;
+  const hourHeightRef = useRef(hourHeight);
+  const resourcesRef = useRef(resources);
+  const apptWidthRef = useRef(APPOINTMENT_BLOCK_WIDTH);
+  useEffect(() => {
+    hourHeightRef.current = hourHeight;
+  }, [hourHeight]);
+  useEffect(() => {
+    resourcesRef.current = resources;
+  }, [resources]);
+  useEffect(() => {
+    apptWidthRef.current = APPOINTMENT_BLOCK_WIDTH;
+  }, [APPOINTMENT_BLOCK_WIDTH]);
+  useEffect(() => {
+    if (!selectedEvent) {
+      setDraggedEventDraft(null);
+    }
+  }, [selectedEvent]);
+  const verticalScrollViewRef = useAnimatedRef();
+  const headerScrollViewRef = useAnimatedRef();
+  const flashListRef = useRef(null);
+  const prevResourceIdsRef = useRef([]);
+  const [layout, setLayout] = useState(null);
+  const dateRef = useRef(date);
+  const eventStartedTop = useSharedValue(0);
+  const eventHeight = useSharedValue(0);
+  const panXAbs = useSharedValue(0);
+  const panYAbs = useSharedValue(0);
+  const isPulling = useSharedValue(false);
+  const isDragging = useSharedValue(false);
+  const scrollX = useSharedValue(0);
+  const scrollY = useSharedValue(0);
+  const autoScrollSpeed = useSharedValue(0);
+  const autoScrollXSpeed = useSharedValue(0);
+  const lastHapticScrollY = useSharedValue(0);
+  const lastXScrollTime = useSharedValue(0);
+  const startedX = useSharedValue(0);
+  const startedY = useSharedValue(0);
+  const touchY = useSharedValue(0);
+  const triggerHaptic = useCallback(() => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+  }, []);
+  const panGesture = Gesture.Pan().manualActivation(!isIOS).enabled(layout !== null).shouldCancelWhenOutside(false).onTouchesMove((_evt, stateManager) => {
+    if (isIOS) return;
+    if (selectedEvent)
+      stateManager.activate();
+    else stateManager.end();
+  }).onUpdate((evt) => {
+    if (!evt || evt.y == null || evt.x == null) return;
+    let draggable = false;
+    let pullable = false;
+    const draggableMinY = panYAbs.value - eventHeight.value / 2;
+    const draggableMaxY = panYAbs.value + eventHeight.value / 2 - (eventHeight.value <= snapInterval * 3 * 2 ? snapInterval : snapInterval * 3);
+    const pullableMaxY = panYAbs.value + eventHeight.value / 2;
+    const blockMinX = panXAbs.value - APPOINTMENT_BLOCK_WIDTH / 2;
+    const blockMaxX = panXAbs.value + APPOINTMENT_BLOCK_WIDTH / 2;
+    touchY.value = evt.y;
+    if (evt.x >= blockMinX && evt.x <= blockMaxX) {
+      draggable = evt.y >= draggableMinY && evt.y <= draggableMaxY;
+      pullable = evt.y > draggableMaxY && evt.y <= pullableMaxY + snapInterval * 3;
+    }
+    if (pullable && !isDragging.value || isPulling.value) {
+      isPulling.value = true;
+      const onScreenTop = eventStartedTop.value - scrollY.value;
+      const newHeight = evt.y - onScreenTop;
+      const snappedHeight = Math.round(newHeight / snapInterval) * snapInterval;
+      let finalHeight = Math.max(hourHeight / 4, snappedHeight);
+      const totalDayHeight = 24 * hourHeight;
+      const maxAllowedHeight = totalDayHeight - eventStartedTop.value;
+      finalHeight = Math.min(finalHeight, maxAllowedHeight);
+      if (finalHeight !== eventHeight.value) {
+        eventHeight.value = finalHeight;
+        panYAbs.value = onScreenTop + finalHeight / 2;
+        runOnJS(triggerHaptic)();
+      }
+      if (layout) {
+        const AUTO_SCROLL_BUFFER = 30;
+        if (evt.y > layout.height - AUTO_SCROLL_BUFFER) {
+          autoScrollSpeed.value = 1;
+        } else if (evt.y < AUTO_SCROLL_BUFFER && newHeight > hourHeight / 4) {
+          autoScrollSpeed.value = -1;
+        } else {
+          autoScrollSpeed.value = 0;
+        }
+      } else {
+        autoScrollSpeed.value = 0;
+      }
+    }
+    if (draggable && !isPulling.value || isDragging.value) {
+      isDragging.value = true;
+      const translatedY = Math.round(evt.translationY / snapInterval) * snapInterval;
+      const proposedAbsoluteTop = startedY.value - eventHeight.value / 2 + translatedY + scrollY.value;
+      let snappedAbsoluteTop = Math.round(proposedAbsoluteTop / snapInterval) * snapInterval;
+      snappedAbsoluteTop = Math.max(0, snappedAbsoluteTop);
+      if (layout) {
+        const maxAbsoluteTop = layout.height + scrollY.value - snapInterval;
+        snappedAbsoluteTop = Math.min(snappedAbsoluteTop, maxAbsoluteTop);
+      }
+      if (snappedAbsoluteTop !== eventStartedTop.value) {
+        runOnJS(triggerHaptic)();
+        eventStartedTop.value = snappedAbsoluteTop;
+      }
+      panYAbs.value = snappedAbsoluteTop - scrollY.value + eventHeight.value / 2;
+      let panXAbsValue = Math.max(
+        APPOINTMENT_BLOCK_WIDTH / 2 + TIME_LABEL_WIDTH,
+        startedX.value + evt.translationX
+      );
+      if (layout?.width) {
+        panXAbsValue = Math.min(
+          layout.width - APPOINTMENT_BLOCK_WIDTH / 2,
+          panXAbsValue
+        );
+      }
+      panXAbs.value = panXAbsValue;
+      if (layout) {
+        const AUTO_SCROLL_BUFFER = 30;
+        if (evt.y > layout.height - AUTO_SCROLL_BUFFER) {
+          autoScrollSpeed.value = 1;
+        } else if (evt.y < AUTO_SCROLL_BUFFER) {
+          autoScrollSpeed.value = -1;
+        } else {
+          autoScrollSpeed.value = 0;
+        }
+        if (panXAbs.value >= layout.width - APPOINTMENT_BLOCK_WIDTH / 2) {
+          autoScrollXSpeed.value = 1;
+        } else if (panXAbs.value <= APPOINTMENT_BLOCK_WIDTH / 2 + TIME_LABEL_WIDTH) {
+          autoScrollXSpeed.value = -1;
+        } else {
+          autoScrollXSpeed.value = 0;
+        }
+      } else {
+        autoScrollSpeed.value = 0;
+        autoScrollXSpeed.value = 0;
+      }
+    }
+  }).onEnd(() => {
+    autoScrollSpeed.value = 0;
+    autoScrollXSpeed.value = 0;
+    lastXScrollTime.value = 0;
+    const finalEventTop = panYAbs.value - eventHeight.value / 2 + scrollY.value;
+    let adjustedFinalEventTop = Math.round(finalEventTop / snapInterval) * snapInterval;
+    adjustedFinalEventTop = Math.max(0, adjustedFinalEventTop);
+    const finalPanYValue = adjustedFinalEventTop - scrollY.value + eventHeight.value / 2;
+    const finalXOnScreen = panXAbs.value;
+    const absoluteX = finalXOnScreen + scrollX.value;
+    const newStaffIndex = Math.floor((absoluteX - TIME_LABEL_WIDTH) / APPOINTMENT_BLOCK_WIDTH);
+    const clampedStaffIndex = Math.max(0, Math.min(newStaffIndex, resources.length - 1));
+    const endedResource = resources[clampedStaffIndex];
+    const finalPanXValue = TIME_LABEL_WIDTH + clampedStaffIndex * APPOINTMENT_BLOCK_WIDTH - scrollX.value + APPOINTMENT_BLOCK_WIDTH / 2;
+    panYAbs.value = withSpring(finalPanYValue);
+    panXAbs.value = withSpring(finalPanXValue);
+    if (!isPulling.value) {
+      eventStartedTop.value = adjustedFinalEventTop;
+    }
+    startedY.value = finalPanYValue;
+    startedX.value = finalPanXValue;
+    isPulling.value = false;
+    isDragging.value = false;
+    runOnJS(setDraggedEventDraft)({
+      event: selectedEvent,
+      from: positionToMinutes(adjustedFinalEventTop, hourHeight),
+      to: positionToMinutes(adjustedFinalEventTop + eventHeight.value, hourHeight),
+      resourceId: endedResource?.id
+    });
+  });
+  const scrollListTo = (x) => {
+    flashListRef.current?.scrollToOffset({ offset: x, animated: false });
+  };
+  useFrameCallback((frameInfo) => {
+    if (autoScrollXSpeed.value === 0) {
+      return;
+    }
+    const now = frameInfo.timeSinceFirstFrame;
+    const scrollInterval = 500;
+    if (now - lastXScrollTime.value > scrollInterval) {
+      lastXScrollTime.value = now;
+      const increment = APPOINTMENT_BLOCK_WIDTH * Math.sign(autoScrollXSpeed.value);
+      const newScrollX = scrollX.value + increment;
+      runOnJS(scrollListTo)(newScrollX);
+      runOnJS(Haptics.impactAsync)(Haptics.ImpactFeedbackStyle.Medium);
+    }
+  });
+  useFrameCallback(() => {
+    if (autoScrollSpeed.value === 0) {
+      return;
+    }
+    const increment = snapInterval / 5 * Math.sign(autoScrollSpeed.value);
+    const newScrollY = scrollY.value + increment;
+    scrollTo(verticalScrollViewRef, 0, newScrollY, false);
+    if (isDragging.value) {
+      let currentEventTop = panYAbs.value - eventHeight.value / 2 + newScrollY;
+      currentEventTop = Math.round(currentEventTop / snapInterval) * snapInterval;
+      eventStartedTop.value = Math.max(0, currentEventTop);
+    }
+    if (isPulling.value) {
+      const onScreenTop = eventStartedTop.value - newScrollY;
+      const newHeight = touchY.value - onScreenTop;
+      const snappedHeight = Math.round(newHeight / snapInterval) * snapInterval;
+      let finalHeight = Math.max(hourHeight / 4, snappedHeight);
+      const totalDayHeight = 24 * hourHeight;
+      const maxAllowedHeight = totalDayHeight - eventStartedTop.value;
+      finalHeight = Math.min(finalHeight, maxAllowedHeight);
+      if (finalHeight !== eventHeight.value) {
+        eventHeight.value = finalHeight;
+        panYAbs.value = onScreenTop + finalHeight / 2;
+      }
+      if (hourHeight / 4 == finalHeight) {
+        autoScrollSpeed.value = 0;
+      }
+    }
+    const scrollDiff = Math.abs(newScrollY - lastHapticScrollY.value);
+    if (scrollDiff >= snapInterval) {
+      lastHapticScrollY.value = newScrollY;
+      runOnJS(Haptics.impactAsync)(Haptics.ImpactFeedbackStyle.Medium);
+    }
+  });
+  useEffect(() => {
+    internalOnLongPress.current = (event) => {
+      onLongPressRef.current?.(event);
+      const hh = hourHeightRef.current;
+      const eventTop = scalePosition(event.from, hh);
+      const eventTo = event.to < event.from ? event.to + 1440 : event.to;
+      const initialHeight = scalePosition(eventTo - event.from, hh);
+      const panAbsValue = eventTop - scrollY.value + initialHeight / 2;
+      panYAbs.value = panAbsValue;
+      startedY.value = panAbsValue;
+      eventStartedTop.value = eventTop;
+      const resources2 = resourcesRef.current;
+      const APPOINTMENT_BLOCK_WIDTH2 = apptWidthRef.current;
+      const staffIndex = resources2.findIndex((r) => r.id === event.resourceId);
+      const leftmostColumnIndex = Math.round(scrollX.value / APPOINTMENT_BLOCK_WIDTH2);
+      const screenColumn = staffIndex - leftmostColumnIndex;
+      const selectedAppointmentStartedX = TIME_LABEL_WIDTH + APPOINTMENT_BLOCK_WIDTH2 / 2 + APPOINTMENT_BLOCK_WIDTH2 * screenColumn;
+      panXAbs.value = selectedAppointmentStartedX;
+      startedX.value = selectedAppointmentStartedX;
+      lastHapticScrollY.value = scrollY.value;
+      eventHeight.value = initialHeight;
+      setSelectedEvent(event);
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+    };
+  }, []);
+  const internalStableOnLongPress = useCallback((e) => {
+    internalOnLongPress.current?.(e);
+  }, []);
+  const onLayout = useCallback((evt) => {
+    setLayout(evt?.nativeEvent?.layout);
+  }, []);
+  const verticalScrollHandler = useAnimatedScrollHandler({
+    onScroll: (event) => {
+      scrollY.value = event?.contentOffset?.y;
+    }
+  });
+  const flashListScrollHandler = useAnimatedScrollHandler({
+    onScroll: (event) => {
+      const offsetX = event?.contentOffset?.x;
+      scrollTo(headerScrollViewRef, offsetX, 0, false);
+      scrollX.value = offsetX;
+    }
+  });
+  const resourceIds = useMemo(() => {
+    const ids = resources?.map((item) => item?.id) || [];
+    if (JSON.stringify(prevResourceIdsRef.current) !== JSON.stringify(ids)) {
+      prevResourceIdsRef.current = ids;
+    }
+    return prevResourceIdsRef.current;
+  }, [resources]);
+  const handleBlockPress = useCallback((resourceId, time) => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+    const resource = resources.find((r) => r.id === resourceId);
+    if (onBlockLongPress)
+      onBlockLongPress(resource, new Date(time));
+  }, [resources, onBlockLongPress]);
+  useEffect(() => {
+    const handleOrientationChange = () => {
+      if (selectedEvent)
+        setSelectedEvent(null);
+    };
+    const subscription = Dimensions.addEventListener("change", handleOrientationChange);
+    return () => {
+      subscription.remove();
+    };
+  }, [setSelectedEvent, selectedEvent]);
+  useEffect(() => {
+    dateRef.current = date;
+  }, [date]);
+  const renderItem = useCallback(({ item }) => {
+    return /* @__PURE__ */ React18__default.createElement(View, { key: item, style: { width: APPOINTMENT_BLOCK_WIDTH } }, /* @__PURE__ */ React18__default.createElement(View, { style: styles7.timelineContainer }, /* @__PURE__ */ React18__default.createElement(
+      EventGridBlocksSkia,
+      {
+        dateRef,
+        hourHeight,
+        APPOINTMENT_BLOCK_WIDTH,
+        handleBlockPress: (date2) => handleBlockPress(item, date2)
+      }
+    ), /* @__PURE__ */ React18__default.createElement(
+      DisabledIntervals_default,
+      {
+        id: item,
+        APPOINTMENT_BLOCK_WIDTH,
+        hourHeight
+      }
+    ), /* @__PURE__ */ React18__default.createElement(
+      DisabledBlocks_default,
+      {
+        id: item,
+        APPOINTMENT_BLOCK_WIDTH,
+        hourHeight,
+        onDisabledBlockPress: stableOnDisabledBlockPress
+      }
+    ), /* @__PURE__ */ React18__default.createElement(
+      EventBlocks_default,
+      {
+        id: item,
+        EVENT_BLOCK_WIDTH: APPOINTMENT_BLOCK_WIDTH,
+        hourHeight,
+        onPress: stableOnPress,
+        onLongPress: internalStableOnLongPress,
+        isEventSelected: isEventSelectedStable,
+        isEventDisabled: isEventDisabledStable,
+        eventRenderer: stableRenderer,
+        mode: overLappingLayoutMode
+      }
+    )));
+  }, [
+    resourceIds,
+    APPOINTMENT_BLOCK_WIDTH,
+    hourHeight,
+    stableRenderer,
+    isEventSelectedStable,
+    isEventDisabledStable,
+    overLappingLayoutMode,
+    stableOnPress,
+    internalStableOnLongPress,
+    stableOnDisabledBlockPress,
+    dateRef
+  ]);
+  return /* @__PURE__ */ React18__default.createElement(React18__default.Fragment, null, /* @__PURE__ */ React18__default.createElement(StoreFeeder, { resources, store: binding }), /* @__PURE__ */ React18__default.createElement(View, { style: { flex: 1 } }, /* @__PURE__ */ React18__default.createElement(View, null, /* @__PURE__ */ React18__default.createElement(
+    Animated2.ScrollView,
+    {
+      style: { backgroundColor: "white" },
+      showsHorizontalScrollIndicator: false,
+      contentContainerStyle: {
+        overflow: "visible",
+        paddingLeft: TIME_LABEL_WIDTH,
+        paddingVertical: 15
+      },
+      horizontal: true,
+      scrollEventThrottle: 16,
+      decelerationRate: "fast",
+      ref: headerScrollViewRef,
+      scrollEnabled: false
+    },
+    /* @__PURE__ */ React18__default.createElement(
+      ResourcesComponent,
+      {
+        resourceIds,
+        APPOINTMENT_BLOCK_WIDTH,
+        onResourcePress
+      }
+    )
+  )), /* @__PURE__ */ React18__default.createElement(GestureDetector, { gesture: panGesture }, /* @__PURE__ */ React18__default.createElement(
+    Animated2.View,
+    {
+      key: numberOfColumns + width + hourHeight,
+      onLayout,
+      style: {
+        flex: 1,
+        overflow: "hidden"
+      }
+    },
+    selectedEvent && /* @__PURE__ */ React18__default.createElement(View, { style: {
+      position: "absolute",
+      top: 0,
+      left: TIME_LABEL_WIDTH,
+      paddingLeft: TIME_LABEL_WIDTH,
+      width: width - TIME_LABEL_WIDTH,
+      height: "100%",
+      backgroundColor: "rgba(0, 0, 0, 0.1)",
+      zIndex: 1
+    } }),
+    /* @__PURE__ */ React18__default.createElement(
+      Animated2.ScrollView,
+      {
+        scrollEnabled: !selectedEvent,
+        onScroll: verticalScrollHandler,
+        ref: verticalScrollViewRef,
+        scrollEventThrottle: 16,
+        snapToInterval: hourHeight,
+        decelerationRate: "fast",
+        snapToAlignment: "start",
+        style: styles7.container,
+        contentContainerStyle: { flexDirection: "row", paddingRight: TIME_LABEL_WIDTH }
+      },
+      /* @__PURE__ */ React18__default.createElement(
+        TimeLabels,
+        {
+          startMinutes,
+          layout,
+          hourHeight,
+          totalTimelineWidth: APPOINTMENT_BLOCK_WIDTH * numberOfColumns,
+          timezone,
+          date,
+          ref: verticalScrollViewRef
+        }
+      ),
+      /* @__PURE__ */ React18__default.createElement(
+        AnimatedFlashList,
+        {
+          extraData: numberOfColumns + width + hourHeight + (overLappingLayoutMode === "stacked" ? 1 : 0),
+          scrollEnabled: !selectedEvent,
+          ref: flashListRef,
+          onScroll: flashListScrollHandler,
+          estimatedItemSize: APPOINTMENT_BLOCK_WIDTH,
+          removeClippedSubviews: true,
+          data: resourceIds,
+          horizontal: true,
+          renderItem,
+          keyExtractor: (item, index) => index + "",
+          snapToInterval: APPOINTMENT_BLOCK_WIDTH,
+          decelerationRate: "fast",
+          snapToAlignment: "start"
+        }
+      )
+    ),
+    selectedEvent && /* @__PURE__ */ React18__default.createElement(
+      DraggableEvent,
+      {
+        selectedEvent,
+        APPOINTMENT_BLOCK_WIDTH,
+        hourHeight,
+        eventStartedTop,
+        eventHeight,
+        panXAbs,
+        panYAbs,
+        slots: props.eventSlots,
+        styleOverrides: props.eventStyleOverrides
+      }
+    )
+  ))));
+};
+var Calendar = ({ theme, ...rest }) => {
+  return /* @__PURE__ */ React18__default.createElement(CalendarThemeProvider, { theme }, /* @__PURE__ */ React18__default.createElement(CalendarInner, { ...rest }));
+};
+var styles7 = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff"
+  },
+  timelineContainer: {
+    borderColor: "#ddd",
+    borderRightWidth: 1,
+    position: "relative",
+    height: "100%"
+  }
+});
+var Calendar_default = Calendar;
+
+export { Calendar_default as Calendar, CalendarBindingProvider, useCalendarBinding };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map