@dxos/react-ui-calendar 0.8.4-main.9735255 → 0.8.4-main.abd8ff62ef

package/dist/lib/browser/index.mjs

@@ -1,24 +1,13 @@
 // src/components/Calendar/Calendar.tsx
 import { createContext } from "@radix-ui/react-context";
-import { addDays, differenceInWeeks, format, startOfWeek } from "date-fns";
+import { addDays, differenceInWeeks, format, startOfDay, startOfWeek } from "date-fns";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { useResizeDetector } from "react-resize-detector";
 import { List } from "react-virtualized";
 import { Event } from "@dxos/async";
-import { Icon, IconButton, useTranslation } from "@dxos/react-ui";
-import { mx } from "@dxos/ui-theme";
-
-// src/translations.ts
-var translationKey = "@dxos/react-ui-calendar";
-var translations = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "today button": "Today"
-      }
-    }
-  }
-];
+import { IconButton, useTranslation } from "@dxos/react-ui";
+import { composable, composableProps, mx } from "@dxos/ui-theme";
+import { translationKey } from "#translations";
 
 // src/components/Calendar/util.ts
 var getDate = (start2, weekNumber, dayOfWeek, weekStartsOn) => {
@@ -61,16 +50,10 @@ var CalendarRoot = /* @__PURE__ */ forwardRef(({ children, weekStartsOn = 1 }, f
     setSelected
   }, children);
 });
-var CalendarViewport = ({ children, classNames }) => {
-  return /* @__PURE__ */ React.createElement("div", {
-    role: "none",
-    className: mx("flex flex-col items-center overflow-hidden bg-inputSurface", classNames)
-  }, children);
-};
-CalendarViewport.displayName = "CalendarContent";
-var CalendarToolbar = ({ classNames }) => {
+var CALENDAR_TOOLBAR_NAME = "CalendarHeader";
+var CalendarToolbar = composable(({ classNames, ...props }, forwardedRef) => {
   const { t } = useTranslation(translationKey);
-  const { weekStartsOn, event, index, selected } = useCalendarContext(CalendarToolbar.displayName);
+  const { weekStartsOn, event, index, selected } = useCalendarContext(CALENDAR_TOOLBAR_NAME);
   const top = useMemo(() => getDate(start, index ?? 0, 6, weekStartsOn), [
     index,
     weekStartsOn
@@ -87,8 +70,14 @@ var CalendarToolbar = ({ classNames }) => {
     today
   ]);
   return /* @__PURE__ */ React.createElement("div", {
-    role: "none",
-    className: mx("shink-0 is-full grid grid-cols-3 items-center bg-barSurface", classNames),
+    ...composableProps(props, {
+      role: "none",
+      classNames: [
+        "shrink-0 grid! grid-cols-3 items-center bg-toolbar-surface",
+        classNames
+      ]
+    }),
+    ref: forwardedRef,
     style: {
       width: defaultWidth
     }
@@ -96,25 +85,31 @@ var CalendarToolbar = ({ classNames }) => {
     className: "flex justify-start"
   }, /* @__PURE__ */ React.createElement(IconButton, {
     variant: "ghost",
-    size: 5,
     icon: "ph--calendar--regular",
     iconOnly: true,
     classNames: "aspect-square",
-    label: t("today button"),
+    label: t("today.button"),
     onClick: handleToday
   })), /* @__PURE__ */ React.createElement("div", {
     className: "flex justify-center p-2 text-description"
   }, format(selected ?? top, "MMMM")), /* @__PURE__ */ React.createElement("div", {
     className: "flex justify-end p-2 text-description"
   }, (selected ?? top).getFullYear()));
-};
-CalendarToolbar.displayName = "CalendarHeader";
-var CalendarGrid = ({ classNames, rows, onSelect }) => {
-  const { weekStartsOn, event, setIndex, selected, setSelected } = useCalendarContext(CalendarGrid.displayName);
+});
+CalendarToolbar.displayName = CALENDAR_TOOLBAR_NAME;
+var CALENDAR_GRID_NAME = "CalendarGrid";
+var CalendarGrid = composable(({ classNames, rows, dates = [], onSelect, ...props }, forwardedRef) => {
+  const { weekStartsOn, event, setIndex, selected, setSelected } = useCalendarContext(CALENDAR_GRID_NAME);
   const { ref: containerRef, width = 0, height = 0 } = useResizeDetector();
   const maxHeight = rows ? rows * size : void 0;
   const listRef = useRef(null);
   const today = useMemo(() => /* @__PURE__ */ new Date(), []);
+  const dateSet = useMemo(() => new Set(dates.map((date) => startOfDay(date).toISOString())), [
+    dates
+  ]);
+  const hasDate = useCallback((date) => dateSet.has(startOfDay(date).toISOString()), [
+    dateSet
+  ]);
   const [initialized, setInitialized] = useState(false);
   useEffect(() => {
     const index = differenceInWeeks(today, start);
@@ -148,9 +143,6 @@ var CalendarGrid = ({ classNames, rows, onSelect }) => {
       return format(day, "EEE");
     });
   }, []);
-  const getNumAppointments = useCallback((_date) => {
-    return 0;
-  }, []);
   const handleDaySelect = useCallback((date) => {
     setSelected((current) => isSameDay(date, current) ? void 0 : date);
     onSelect?.({
@@ -163,18 +155,15 @@ var CalendarGrid = ({ classNames, rows, onSelect }) => {
     setIndex(Math.round(info.scrollTop / size));
   }, []);
   const rowRenderer = useCallback(({ key, index, style }) => {
-    const getBgColor = (date) => date.getMonth() % 2 === 0 && "bg-modalSurface";
+    const getBgColor = (date) => date.getMonth() % 2 === 0 && "bg-modal-surface";
     return /* @__PURE__ */ React.createElement("div", {
       key,
       role: "none",
       style,
-      className: "is-full grid grid-cols-[1fr_max-content_1fr] snap-center"
+      className: "grid"
     }, /* @__PURE__ */ React.createElement("div", {
       role: "none",
-      className: mx(getBgColor(getDate(start, index, 0, weekStartsOn)))
-    }), /* @__PURE__ */ React.createElement("div", {
-      role: "none",
-      className: "grid grid-cols-7",
+      className: "grid grid-cols-7 bg-input-surface",
       style: {
         gridTemplateColumns: `repeat(7, ${size}px)`
       }
@@ -182,8 +171,7 @@ var CalendarGrid = ({ classNames, rows, onSelect }) => {
       length: 7
     }).map((_, i) => {
       const date = getDate(start, index, i, weekStartsOn);
-      const num = getNumAppointments(date);
-      const border = isSameDay(date, selected) ? "border-primary-500" : isSameDay(date, today) ? "border-amber-500" : void 0;
+      const border = isSameDay(date, selected) ? "border-primary-500" : isSameDay(date, today) ? "border-amber-500" : hasDate(date) ? "border-neutral-700 border-dashed" : void 0;
       return /* @__PURE__ */ React.createElement("div", {
         key: i,
         role: "none",
@@ -195,30 +183,27 @@ var CalendarGrid = ({ classNames, rows, onSelect }) => {
         className: "absolute top-0 text-xs text-description"
       }, format(date, "MMM")), border && /* @__PURE__ */ React.createElement("div", {
         role: "none",
-        className: mx("absolute top-0 left-0 is-full bs-full border-2 rounded-full", border)
-      }), num > 0 && /* @__PURE__ */ React.createElement(Icon, {
-        classNames: "absolute bottom-0",
-        icon: num > 3 ? "ph--dots-three--regular" : "ph--dot--regular",
-        size: 5
+        className: mx("absolute inset-1 border-2 rounded-full", border)
       }));
-    })), /* @__PURE__ */ React.createElement("div", {
-      className: mx(getBgColor(getDate(start, index, 6, weekStartsOn)))
-    }));
+    })));
   }, [
     handleDaySelect,
-    getNumAppointments,
+    hasDate,
     selected,
     weekStartsOn
   ]);
   return /* @__PURE__ */ React.createElement("div", {
-    role: "none",
-    className: mx("flex flex-col bs-full is-full justify-center overflow-hidden", classNames)
-  }, /* @__PURE__ */ React.createElement("div", {
-    role: "none",
-    className: "flex justify-center bg-groupSurface"
+    ...composableProps(props, {
+      role: "none",
+      classNames: [
+        "flex flex-col h-full w-full justify-center overflow-hidden",
+        classNames
+      ]
+    }),
+    ref: forwardedRef
   }, /* @__PURE__ */ React.createElement("div", {
     role: "none",
-    className: "flex is-full grid grid-cols-7",
+    className: "grid w-full grid-cols-7",
     style: {
       width: defaultWidth
     }
@@ -226,15 +211,14 @@ var CalendarGrid = ({ classNames, rows, onSelect }) => {
     key: i,
     role: "none",
     className: "flex justify-center p-2 text-sm font-thin"
-  }, date)))), /* @__PURE__ */ React.createElement("div", {
+  }, date))), /* @__PURE__ */ React.createElement("div", {
     role: "none",
-    className: "flex flex-col bs-full is-full justify-center overflow-hidden",
+    className: "flex flex-col h-full w-full justify-center overflow-hidden",
     ref: containerRef
   }, /* @__PURE__ */ React.createElement(List, {
     ref: listRef,
     role: "none",
-    // TODO(burdon): Snap isn't working.
-    className: "[&>div]:snap-y scrollbar-none outline-none",
+    className: "scrollbar-none outline-hidden",
     width,
     height: maxHeight ?? height,
     rowCount: maxRows,
@@ -244,11 +228,10 @@ var CalendarGrid = ({ classNames, rows, onSelect }) => {
     onScroll: handleScroll,
     onRowsRendered: () => setInitialized(true)
   })));
-};
-CalendarGrid.displayName = "CalendarGrid";
+});
+CalendarGrid.displayName = CALENDAR_GRID_NAME;
 var Calendar = {
   Root: CalendarRoot,
-  Viewport: CalendarViewport,
   Toolbar: CalendarToolbar,
   Grid: CalendarGrid
 };

package/dist/lib/browser/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/components/Calendar/Calendar.tsx", "../../../src/translations.ts", "../../../src/components/Calendar/util.ts"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { createContext } from '@radix-ui/react-context';\nimport { type Day, addDays, differenceInWeeks, format, startOfWeek } from 'date-fns';\nimport React, {\n  type Dispatch,\n  type PropsWithChildren,\n  type SetStateAction,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\nimport { List, type ListProps, type ListRowRenderer } from 'react-virtualized';\n\nimport { Event } from '@dxos/async';\nimport { Icon, IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { mx } from '@dxos/ui-theme';\n\nimport { translationKey } from '../../translations';\n\nimport { getDate, isSameDay } from './util';\n\nconst maxRows = 50 * 100;\nconst start = new Date('1970-01-01');\nconst size = 48;\nconst defaultWidth = 7 * size;\n\n//\n// Context\n//\n\ntype CalendarEvent = {\n  type: 'scroll';\n  date: Date;\n};\n\ntype CalendarContextValue = {\n  weekStartsOn: Day;\n  event: Event<CalendarEvent>;\n  index: number | undefined;\n  setIndex: Dispatch<SetStateAction<number | undefined>>;\n  selected: Date | undefined;\n  setSelected: Dispatch<SetStateAction<Date | undefined>>;\n};\n\nconst [CalendarContextProvider, useCalendarContext] = createContext<CalendarContextValue>('Calendar');\n\n//\n// Controller\n//\n\ntype CalendarController = {\n  scrollTo: (date: Date) => void;\n};\n\n//\n// Root\n//\n\ntype CalendarRootProps = PropsWithChildren<Partial<Pick<CalendarContextValue, 'weekStartsOn'>>>;\n\nconst CalendarRoot = forwardRef<CalendarController, CalendarRootProps>(\n  ({ children, weekStartsOn = 1 }, forwardedRef) => {\n    const event = useMemo(() => new Event<CalendarEvent>(), []);\n    const [selected, setSelected] = useState<Date | undefined>();\n    const [index, setIndex] = useState<number | undefined>();\n\n    useImperativeHandle(\n      forwardedRef,\n      () => ({\n        scrollTo: (date: Date) => {\n          event.emit({ type: 'scroll', date });\n        },\n      }),\n      [event],\n    );\n\n    return (\n      <CalendarContextProvider\n        weekStartsOn={weekStartsOn}\n        event={event}\n        index={index}\n        setIndex={setIndex}\n        selected={selected}\n        setSelected={setSelected}\n      >\n        {children}\n      </CalendarContextProvider>\n    );\n  },\n);\n\n//\n// Viewport\n//\n\ntype CalendarViewportProps = PropsWithChildren<ThemedClassName>;\n\nconst CalendarViewport = ({ children, classNames }: CalendarViewportProps) => {\n  return (\n    <div role='none' className={mx('flex flex-col items-center overflow-hidden bg-inputSurface', classNames)}>\n      {children}\n    </div>\n  );\n};\n\nCalendarViewport.displayName = 'CalendarContent';\n\n//\n// Header\n//\n\ntype CalendarToolbarProps = ThemedClassName;\n\nconst CalendarToolbar = ({ classNames }: CalendarToolbarProps) => {\n  const { t } = useTranslation(translationKey);\n  const { weekStartsOn, event, index, selected } = useCalendarContext(CalendarToolbar.displayName);\n  const top = useMemo(() => getDate(start, index ?? 0, 6, weekStartsOn), [index, weekStartsOn]);\n  const today = useMemo(() => new Date(), []);\n\n  const handleToday = useCallback(() => {\n    event.emit({ type: 'scroll', date: today });\n  }, [event, start, today]);\n\n  return (\n    <div\n      role='none'\n      className={mx('shink-0 is-full grid grid-cols-3 items-center bg-barSurface', classNames)}\n      style={{ width: defaultWidth }}\n    >\n      <div className='flex justify-start'>\n        <IconButton\n          variant='ghost'\n          size={5}\n          icon='ph--calendar--regular'\n          iconOnly\n          classNames='aspect-square'\n          label={t('today button')}\n          onClick={handleToday}\n        />\n      </div>\n      <div className='flex justify-center p-2 text-description'>{format(selected ?? top, 'MMMM')}</div>\n      <div className='flex justify-end p-2 text-description'>{(selected ?? top).getFullYear()}</div>\n    </div>\n  );\n};\n\nCalendarToolbar.displayName = 'CalendarHeader';\n\n//\n// Grid\n// TODO(burdon): Key nav.\n// TODO(burdon): Drag range.\n//\n\ntype CalendarGridProps = ThemedClassName<{\n  rows?: number;\n  onSelect?: (event: { date: Date }) => void;\n}>;\n\nconst CalendarGrid = ({ classNames, rows, onSelect }: CalendarGridProps) => {\n  const { weekStartsOn, event, setIndex, selected, setSelected } = useCalendarContext(CalendarGrid.displayName);\n  const { ref: containerRef, width = 0, height = 0 } = useResizeDetector();\n  const maxHeight = rows ? rows * size : undefined;\n  const listRef = useRef<List>(null);\n  const today = useMemo(() => new Date(), []);\n\n  const [initialized, setInitialized] = useState(false);\n  useEffect(() => {\n    const index = differenceInWeeks(today, start);\n    listRef.current?.scrollToRow(index);\n  }, [initialized, start, today]);\n\n  useEffect(() => {\n    return event.on((event) => {\n      switch (event.type) {\n        case 'scroll': {\n          const index = differenceInWeeks(event.date, start);\n          listRef.current?.scrollToRow(index);\n          break;\n        }\n      }\n    });\n  }, [event]);\n\n  const days = useMemo(() => {\n    const weekStart = startOfWeek(new Date(), { weekStartsOn });\n    return Array.from({ length: 7 }, (_, i) => {\n      const day = addDays(weekStart, i);\n      return format(day, 'EEE'); // Short day name (Mon, Tue, etc.)\n    });\n  }, []);\n\n  // TODO(burdon): Get info by range.\n  // TODO(burdon): Border marker for \"all day events?\"\n  const getNumAppointments = useCallback((_date: Date) => {\n    // return Math.floor(Math.random() * 10);\n    return 0;\n  }, []);\n\n  const handleDaySelect = useCallback(\n    (date: Date) => {\n      setSelected((current) => (isSameDay(date, current) ? undefined : date));\n      onSelect?.({ date });\n    },\n    [onSelect],\n  );\n\n  const handleScroll = useCallback<NonNullable<ListProps['onScroll']>>((info) => {\n    setIndex(Math.round(info.scrollTop / size));\n  }, []);\n\n  const rowRenderer = useCallback<ListRowRenderer>(\n    ({ key, index, style }) => {\n      const getBgColor = (date: Date) => date.getMonth() % 2 === 0 && 'bg-modalSurface';\n      return (\n        <div key={key} role='none' style={style} className='is-full grid grid-cols-[1fr_max-content_1fr] snap-center'>\n          <div role='none' className={mx(getBgColor(getDate(start, index, 0, weekStartsOn)))} />\n          <div role='none' className='grid grid-cols-7' style={{ gridTemplateColumns: `repeat(7, ${size}px)` }}>\n            {Array.from({ length: 7 }).map((_, i) => {\n              const date = getDate(start, index, i, weekStartsOn);\n              const num = getNumAppointments(date);\n              const border = isSameDay(date, selected)\n                ? 'border-primary-500'\n                : isSameDay(date, today)\n                  ? 'border-amber-500'\n                  : undefined;\n\n              return (\n                <div\n                  key={i}\n                  role='none'\n                  className={mx('relative flex justify-center items-center cursor-pointer', getBgColor(date))}\n                  onClick={() => handleDaySelect(date)}\n                >\n                  <span className='text-description'>{date.getDate()}</span>\n                  {!border && date.getDate() === 1 && (\n                    <span className='absolute top-0 text-xs text-description'>{format(date, 'MMM')}</span>\n                  )}\n                  {border && (\n                    <div\n                      role='none'\n                      className={mx('absolute top-0 left-0 is-full bs-full border-2 rounded-full', border)}\n                    />\n                  )}\n                  {num > 0 && (\n                    <Icon\n                      classNames='absolute bottom-0'\n                      icon={num > 3 ? 'ph--dots-three--regular' : 'ph--dot--regular'}\n                      size={5}\n                    />\n                  )}\n                </div>\n              );\n            })}\n          </div>\n          <div className={mx(getBgColor(getDate(start, index, 6, weekStartsOn)))} />\n        </div>\n      );\n    },\n    [handleDaySelect, getNumAppointments, selected, weekStartsOn],\n  );\n\n  return (\n    <div role='none' className={mx('flex flex-col bs-full is-full justify-center overflow-hidden', classNames)}>\n      {/* Day labels */}\n      <div role='none' className='flex justify-center bg-groupSurface'>\n        <div role='none' className='flex is-full grid grid-cols-7' style={{ width: defaultWidth }}>\n          {days.map((date, i) => (\n            <div key={i} role='none' className='flex justify-center p-2 text-sm font-thin'>\n              {date}\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Grid */}\n      <div role='none' className='flex flex-col bs-full is-full justify-center overflow-hidden' ref={containerRef}>\n        <List\n          ref={listRef}\n          role='none'\n          // TODO(burdon): Snap isn't working.\n          className='[&>div]:snap-y scrollbar-none outline-none'\n          width={width}\n          height={maxHeight ?? height}\n          rowCount={maxRows}\n          rowHeight={size}\n          rowRenderer={rowRenderer}\n          scrollToAlignment='start'\n          onScroll={handleScroll}\n          onRowsRendered={() => setInitialized(true)}\n        />\n      </div>\n    </div>\n  );\n};\n\nCalendarGrid.displayName = 'CalendarGrid';\n\n//\n// Calendar\n//\n\nexport const Calendar = {\n  Root: CalendarRoot,\n  Viewport: CalendarViewport,\n  Toolbar: CalendarToolbar,\n  Grid: CalendarGrid,\n};\n\nexport type { CalendarController, CalendarRootProps, CalendarViewportProps, CalendarToolbarProps, CalendarGridProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Resource } from '@dxos/react-ui';\n\nexport const translationKey = '@dxos/react-ui-calendar';\n\nexport const translations = [\n  {\n    'en-US': {\n      [translationKey]: {\n        'today button': 'Today',\n      },\n    },\n  },\n] as const satisfies Resource[];\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type Day } from 'date-fns';\n\nexport const getDate = (start: Date, weekNumber: number, dayOfWeek: number, weekStartsOn: Day): Date => {\n  const result = new Date(start);\n  const startDayOfWeek = start.getDay(); // 0 = Sunday, 1 = Monday, etc.\n  const adjustedStartDay = (startDayOfWeek === 0 ? 7 : startDayOfWeek) - weekStartsOn; // Adjust for weekStartsOn.\n  result.setDate(start.getDate() - adjustedStartDay + weekNumber * 7 + dayOfWeek);\n  return result;\n};\n\nexport const isSameDay = (date1: Date, date2: Date | undefined): boolean => {\n  return (\n    !!date2 &&\n    date1.getFullYear() === date2.getFullYear() &&\n    date1.getMonth() === date2.getMonth() &&\n    date1.getDate() === date2.getDate()\n  );\n};\n"],
-  "mappings": "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",
-  "names": ["createContext", "addDays", "differenceInWeeks", "format", "startOfWeek", "React", "forwardRef", "useCallback", "useEffect", "useImperativeHandle", "useMemo", "useRef", "useState", "useResizeDetector", "List", "Event", "Icon", "IconButton", "useTranslation", "mx", "translationKey", "translations", "getDate", "start", "weekNumber", "dayOfWeek", "weekStartsOn", "result", "Date", "startDayOfWeek", "getDay", "adjustedStartDay", "setDate", "isSameDay", "date1", "date2", "getFullYear", "getMonth", "maxRows", "start", "Date", "size", "defaultWidth", "CalendarContextProvider", "useCalendarContext", "createContext", "CalendarRoot", "forwardRef", "children", "weekStartsOn", "forwardedRef", "event", "useMemo", "Event", "selected", "setSelected", "useState", "index", "setIndex", "useImperativeHandle", "scrollTo", "date", "emit", "type", "CalendarViewport", "classNames", "div", "role", "className", "mx", "displayName", "CalendarToolbar", "t", "useTranslation", "translationKey", "top", "getDate", "today", "handleToday", "useCallback", "style", "width", "IconButton", "variant", "icon", "iconOnly", "label", "onClick", "format", "getFullYear", "CalendarGrid", "rows", "onSelect", "ref", "containerRef", "height", "useResizeDetector", "maxHeight", "undefined", "listRef", "useRef", "initialized", "setInitialized", "useEffect", "differenceInWeeks", "current", "scrollToRow", "on", "days", "weekStart", "startOfWeek", "Array", "from", "length", "_", "i", "day", "addDays", "getNumAppointments", "_date", "handleDaySelect", "isSameDay", "handleScroll", "info", "Math", "round", "scrollTop", "rowRenderer", "key", "getBgColor", "getMonth", "gridTemplateColumns", "map", "num", "border", "span", "Icon", "List", "rowCount", "rowHeight", "scrollToAlignment", "onScroll", "onRowsRendered", "Calendar", "Root", "Viewport", "Toolbar", "Grid"]
+  "sources": ["../../../src/components/Calendar/Calendar.tsx", "../../../src/components/Calendar/util.ts"],
+  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { createContext } from '@radix-ui/react-context';\nimport { type Day, addDays, differenceInWeeks, format, startOfDay, startOfWeek } from 'date-fns';\nimport React, {\n  type Dispatch,\n  type PropsWithChildren,\n  type SetStateAction,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\nimport { List, type ListProps, type ListRowRenderer } from 'react-virtualized';\n\nimport { Event } from '@dxos/async';\nimport { IconButton, useTranslation } from '@dxos/react-ui';\nimport { composable, composableProps, mx } from '@dxos/ui-theme';\n\nimport { translationKey } from '#translations';\n\nimport { getDate, isSameDay } from './util';\n\nconst maxRows = 50 * 100;\nconst start = new Date('1970-01-01');\nconst size = 48;\nconst defaultWidth = 7 * size;\n\n//\n// Context\n//\n\ntype CalendarEvent = {\n  type: 'scroll';\n  date: Date;\n};\n\ntype CalendarContextValue = {\n  weekStartsOn: Day;\n  event: Event<CalendarEvent>;\n  index: number | undefined;\n  setIndex: Dispatch<SetStateAction<number | undefined>>;\n  selected: Date | undefined;\n  setSelected: Dispatch<SetStateAction<Date | undefined>>;\n};\n\nconst [CalendarContextProvider, useCalendarContext] = createContext<CalendarContextValue>('Calendar');\n\n//\n// Controller\n//\n\ntype CalendarController = {\n  scrollTo: (date: Date) => void;\n};\n\n//\n// Root\n//\n\ntype CalendarRootProps = PropsWithChildren<Partial<Pick<CalendarContextValue, 'weekStartsOn'>>>;\n\nconst CalendarRoot = forwardRef<CalendarController, CalendarRootProps>(\n  ({ children, weekStartsOn = 1 }, forwardedRef) => {\n    const event = useMemo(() => new Event<CalendarEvent>(), []);\n    const [selected, setSelected] = useState<Date | undefined>();\n    const [index, setIndex] = useState<number | undefined>();\n\n    useImperativeHandle(\n      forwardedRef,\n      () => ({\n        scrollTo: (date: Date) => {\n          event.emit({ type: 'scroll', date });\n        },\n      }),\n      [event],\n    );\n\n    return (\n      <CalendarContextProvider\n        weekStartsOn={weekStartsOn}\n        event={event}\n        index={index}\n        setIndex={setIndex}\n        selected={selected}\n        setSelected={setSelected}\n      >\n        {children}\n      </CalendarContextProvider>\n    );\n  },\n);\n\n//\n// Header\n//\n\nconst CALENDAR_TOOLBAR_NAME = 'CalendarHeader';\n\ntype CalendarToolbarProps = {};\n\nconst CalendarToolbar = composable<HTMLDivElement, CalendarToolbarProps>(({ classNames, ...props }, forwardedRef) => {\n  const { t } = useTranslation(translationKey);\n  const { weekStartsOn, event, index, selected } = useCalendarContext(CALENDAR_TOOLBAR_NAME);\n  const top = useMemo(() => getDate(start, index ?? 0, 6, weekStartsOn), [index, weekStartsOn]);\n  const today = useMemo(() => new Date(), []);\n\n  const handleToday = useCallback(() => {\n    event.emit({ type: 'scroll', date: today });\n  }, [event, start, today]);\n\n  return (\n    <div\n      {...composableProps(props, {\n        role: 'none',\n        classNames: ['shrink-0 grid! grid-cols-3 items-center bg-toolbar-surface', classNames],\n      })}\n      ref={forwardedRef}\n      style={{ width: defaultWidth }}\n    >\n      <div className='flex justify-start'>\n        <IconButton\n          variant='ghost'\n          icon='ph--calendar--regular'\n          iconOnly\n          classNames='aspect-square'\n          label={t('today.button')}\n          onClick={handleToday}\n        />\n      </div>\n      <div className='flex justify-center p-2 text-description'>{format(selected ?? top, 'MMMM')}</div>\n      <div className='flex justify-end p-2 text-description'>{(selected ?? top).getFullYear()}</div>\n    </div>\n  );\n});\n\nCalendarToolbar.displayName = CALENDAR_TOOLBAR_NAME;\n\n//\n// Grid\n// TODO(burdon): Key nav.\n// TODO(burdon): Drag range.\n//\n\nconst CALENDAR_GRID_NAME = 'CalendarGrid';\n\ntype CalendarGridProps = {\n  rows?: number;\n  /** Dates to highlight on the grid. Each date that appears in this array receives a border indicator. */\n  dates?: Date[];\n  onSelect?: (event: { date: Date }) => void;\n};\n\nconst CalendarGrid = composable<HTMLDivElement, CalendarGridProps>(\n  ({ classNames, rows, dates = [], onSelect, ...props }, forwardedRef) => {\n    const { weekStartsOn, event, setIndex, selected, setSelected } = useCalendarContext(CALENDAR_GRID_NAME);\n    const { ref: containerRef, width = 0, height = 0 } = useResizeDetector();\n    const maxHeight = rows ? rows * size : undefined;\n    const listRef = useRef<List>(null);\n    const today = useMemo(() => new Date(), []);\n\n    // Build a set of ISO date strings (YYYY-MM-DD) for O(1) per-cell lookup.\n    const dateSet = useMemo(() => new Set(dates.map((date) => startOfDay(date).toISOString())), [dates]);\n\n    const hasDate = useCallback((date: Date) => dateSet.has(startOfDay(date).toISOString()), [dateSet]);\n\n    const [initialized, setInitialized] = useState(false);\n    useEffect(() => {\n      const index = differenceInWeeks(today, start);\n      listRef.current?.scrollToRow(index);\n    }, [initialized, start, today]);\n\n    useEffect(() => {\n      return event.on((event) => {\n        switch (event.type) {\n          case 'scroll': {\n            const index = differenceInWeeks(event.date, start);\n            listRef.current?.scrollToRow(index);\n            break;\n          }\n        }\n      });\n    }, [event]);\n\n    const days = useMemo(() => {\n      const weekStart = startOfWeek(new Date(), { weekStartsOn });\n      return Array.from({ length: 7 }, (_, i) => {\n        const day = addDays(weekStart, i);\n        return format(day, 'EEE'); // Short day name (Mon, Tue, etc.)\n      });\n    }, []);\n\n    // TODO(burdon): Get info by range.\n\n    const handleDaySelect = useCallback(\n      (date: Date) => {\n        setSelected((current) => (isSameDay(date, current) ? undefined : date));\n        onSelect?.({ date });\n      },\n      [onSelect],\n    );\n\n    const handleScroll = useCallback<NonNullable<ListProps['onScroll']>>((info) => {\n      setIndex(Math.round(info.scrollTop / size));\n    }, []);\n\n    const rowRenderer = useCallback<ListRowRenderer>(\n      ({ key, index, style }) => {\n        const getBgColor = (date: Date) => date.getMonth() % 2 === 0 && 'bg-modal-surface';\n        return (\n          <div key={key} role='none' style={style} className='grid'>\n            <div\n              role='none'\n              className='grid grid-cols-7 bg-input-surface'\n              style={{ gridTemplateColumns: `repeat(7, ${size}px)` }}\n            >\n              {Array.from({ length: 7 }).map((_, i) => {\n                const date = getDate(start, index, i, weekStartsOn);\n                const border = isSameDay(date, selected)\n                  ? 'border-primary-500'\n                  : isSameDay(date, today)\n                    ? 'border-amber-500'\n                    : hasDate(date)\n                      ? 'border-neutral-700 border-dashed'\n                      : undefined;\n\n                return (\n                  <div\n                    key={i}\n                    role='none'\n                    className={mx('relative flex justify-center items-center cursor-pointer', getBgColor(date))}\n                    onClick={() => handleDaySelect(date)}\n                  >\n                    <span className='text-description'>{date.getDate()}</span>\n                    {!border && date.getDate() === 1 && (\n                      <span className='absolute top-0 text-xs text-description'>{format(date, 'MMM')}</span>\n                    )}\n                    {border && <div role='none' className={mx('absolute inset-1 border-2 rounded-full', border)} />}\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        );\n      },\n      [handleDaySelect, hasDate, selected, weekStartsOn],\n    );\n\n    return (\n      <div\n        {...composableProps(props, {\n          role: 'none',\n          classNames: ['flex flex-col h-full w-full justify-center overflow-hidden', classNames],\n        })}\n        ref={forwardedRef}\n      >\n        {/* Day of week labels */}\n        <div role='none' className='grid w-full grid-cols-7' style={{ width: defaultWidth }}>\n          {days.map((date, i) => (\n            <div key={i} role='none' className='flex justify-center p-2 text-sm font-thin'>\n              {date}\n            </div>\n          ))}\n        </div>\n\n        {/* Grid */}\n        <div role='none' className='flex flex-col h-full w-full justify-center overflow-hidden' ref={containerRef}>\n          <List\n            ref={listRef}\n            role='none'\n            className='scrollbar-none outline-hidden'\n            width={width}\n            height={maxHeight ?? height}\n            rowCount={maxRows}\n            rowHeight={size}\n            rowRenderer={rowRenderer}\n            scrollToAlignment='start'\n            onScroll={handleScroll}\n            onRowsRendered={() => setInitialized(true)}\n          />\n        </div>\n      </div>\n    );\n  },\n);\n\nCalendarGrid.displayName = CALENDAR_GRID_NAME;\n\n//\n// Calendar\n//\n\nexport const Calendar = {\n  Root: CalendarRoot,\n  Toolbar: CalendarToolbar,\n  Grid: CalendarGrid,\n};\n\nexport type { CalendarController, CalendarRootProps, CalendarToolbarProps, CalendarGridProps };\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type Day } from 'date-fns';\n\nexport const getDate = (start: Date, weekNumber: number, dayOfWeek: number, weekStartsOn: Day): Date => {\n  const result = new Date(start);\n  const startDayOfWeek = start.getDay(); // 0 = Sunday, 1 = Monday, etc.\n  const adjustedStartDay = (startDayOfWeek === 0 ? 7 : startDayOfWeek) - weekStartsOn; // Adjust for weekStartsOn.\n  result.setDate(start.getDate() - adjustedStartDay + weekNumber * 7 + dayOfWeek);\n  return result;\n};\n\nexport const isSameDay = (date1: Date, date2: Date | undefined): boolean => {\n  return (\n    !!date2 &&\n    date1.getFullYear() === date2.getFullYear() &&\n    date1.getMonth() === date2.getMonth() &&\n    date1.getDate() === date2.getDate()\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["createContext", "addDays", "differenceInWeeks", "format", "startOfDay", "startOfWeek", "React", "forwardRef", "useCallback", "useEffect", "useImperativeHandle", "useMemo", "useRef", "useState", "useResizeDetector", "List", "Event", "IconButton", "useTranslation", "composable", "composableProps", "mx", "translationKey", "getDate", "start", "weekNumber", "dayOfWeek", "weekStartsOn", "result", "Date", "startDayOfWeek", "getDay", "adjustedStartDay", "setDate", "isSameDay", "date1", "date2", "getFullYear", "getMonth", "maxRows", "start", "Date", "size", "defaultWidth", "CalendarContextProvider", "useCalendarContext", "createContext", "CalendarRoot", "forwardRef", "children", "weekStartsOn", "forwardedRef", "event", "useMemo", "Event", "selected", "setSelected", "useState", "index", "setIndex", "useImperativeHandle", "scrollTo", "date", "emit", "type", "CALENDAR_TOOLBAR_NAME", "CalendarToolbar", "composable", "classNames", "props", "t", "useTranslation", "translationKey", "top", "getDate", "today", "handleToday", "useCallback", "div", "composableProps", "role", "ref", "style", "width", "className", "IconButton", "variant", "icon", "iconOnly", "label", "onClick", "format", "getFullYear", "displayName", "CALENDAR_GRID_NAME", "CalendarGrid", "rows", "dates", "onSelect", "containerRef", "height", "useResizeDetector", "maxHeight", "undefined", "listRef", "useRef", "dateSet", "Set", "map", "startOfDay", "toISOString", "hasDate", "has", "initialized", "setInitialized", "useEffect", "differenceInWeeks", "current", "scrollToRow", "on", "days", "weekStart", "startOfWeek", "Array", "from", "length", "_", "i", "day", "addDays", "handleDaySelect", "isSameDay", "handleScroll", "info", "Math", "round", "scrollTop", "rowRenderer", "key", "getBgColor", "getMonth", "gridTemplateColumns", "border", "mx", "span", "List", "rowCount", "rowHeight", "scrollToAlignment", "onScroll", "onRowsRendered", "Calendar", "Root", "Toolbar", "Grid"]
 }

package/dist/lib/browser/meta.json

@@ -1 +1 @@
-{"inputs":{"src/translations.ts":{"bytes":1196,"imports":[],"format":"esm"},"src/components/Calendar/util.ts":{"bytes":2802,"imports":[],"format":"esm"},"src/components/Calendar/Calendar.tsx":{"bytes":30821,"imports":[{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"date-fns","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"react-virtualized","kind":"import-statement","external":true},{"path":"@dxos/async","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"src/translations.ts","kind":"import-statement","original":"../../translations"},{"path":"src/components/Calendar/util.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"src/components/Calendar/index.ts":{"bytes":476,"imports":[{"path":"src/components/Calendar/Calendar.tsx","kind":"import-statement","original":"./Calendar"}],"format":"esm"},"src/components/index.ts":{"bytes":467,"imports":[{"path":"src/components/Calendar/index.ts","kind":"import-statement","original":"./Calendar"}],"format":"esm"},"src/index.ts":{"bytes":462,"imports":[{"path":"src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":18558},"dist/lib/browser/index.mjs":{"imports":[{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"date-fns","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"react-virtualized","kind":"import-statement","external":true},{"path":"@dxos/async","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true}],"exports":["Calendar"],"entryPoint":"src/index.ts","inputs":{"src/components/Calendar/Calendar.tsx":{"bytesInOutput":7905},"src/translations.ts":{"bytesInOutput":167},"src/components/Calendar/util.ts":{"bytesInOutput":517},"src/components/Calendar/index.ts":{"bytesInOutput":0},"src/components/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0}},"bytes":8788}}}
+{"inputs":{"src/components/Calendar/util.ts":{"bytes":2699,"imports":[],"format":"esm"},"src/components/Calendar/Calendar.tsx":{"bytes":29849,"imports":[{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"date-fns","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"react-virtualized","kind":"import-statement","external":true},{"path":"@dxos/async","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"#translations","kind":"import-statement","external":true},{"path":"src/components/Calendar/util.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"src/components/Calendar/index.ts":{"bytes":376,"imports":[{"path":"src/components/Calendar/Calendar.tsx","kind":"import-statement","original":"./Calendar"}],"format":"esm"},"src/components/index.ts":{"bytes":376,"imports":[{"path":"src/components/Calendar/index.ts","kind":"import-statement","original":"./Calendar"}],"format":"esm"},"src/index.ts":{"bytes":382,"imports":[{"path":"src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"},"src/translations.ts":{"bytes":1105,"imports":[],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":17699},"dist/lib/browser/index.mjs":{"imports":[{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"date-fns","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"react-virtualized","kind":"import-statement","external":true},{"path":"@dxos/async","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"#translations","kind":"import-statement","external":true}],"exports":["Calendar"],"entryPoint":"src/index.ts","inputs":{"src/components/Calendar/Calendar.tsx":{"bytesInOutput":7434},"src/components/Calendar/util.ts":{"bytesInOutput":517},"src/components/Calendar/index.ts":{"bytesInOutput":0},"src/components/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0}},"bytes":8126},"dist/lib/browser/translations.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":582},"dist/lib/browser/translations.mjs":{"imports":[],"exports":["translationKey","translations"],"entryPoint":"src/translations.ts","inputs":{"src/translations.ts":{"bytesInOutput":167}},"bytes":277}}}

package/dist/lib/browser/translations.mjs

@@ -0,0 +1,16 @@
+// src/translations.ts
+var translationKey = "@dxos/react-ui-calendar";
+var translations = [
+  {
+    "en-US": {
+      [translationKey]: {
+        "today.button": "Today"
+      }
+    }
+  }
+];
+export {
+  translationKey,
+  translations
+};
+//# sourceMappingURL=translations.mjs.map

package/dist/lib/browser/translations.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/translations.ts"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Resource } from '@dxos/react-ui';\n\nexport const translationKey = '@dxos/react-ui-calendar';\n\nexport const translations = [\n  {\n    'en-US': {\n      [translationKey]: {\n        'today.button': 'Today',\n      },\n    },\n  },\n] as const satisfies Resource[];\n"],
+  "mappings": ";AAMO,IAAMA,iBAAiB;AAEvB,IAAMC,eAAe;EAC1B;IACE,SAAS;MACP,CAACD,cAAAA,GAAiB;QAChB,gBAAgB;MAClB;IACF;EACF;;",
+  "names": ["translationKey", "translations"]
+}

package/dist/lib/node-esm/index.mjs

@@ -2,25 +2,14 @@ import { createRequire } from 'node:module';const require = createRequire(import
 
 // src/components/Calendar/Calendar.tsx
 import { createContext } from "@radix-ui/react-context";
-import { addDays, differenceInWeeks, format, startOfWeek } from "date-fns";
+import { addDays, differenceInWeeks, format, startOfDay, startOfWeek } from "date-fns";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { useResizeDetector } from "react-resize-detector";
 import { List } from "react-virtualized";
 import { Event } from "@dxos/async";
-import { Icon, IconButton, useTranslation } from "@dxos/react-ui";
-import { mx } from "@dxos/ui-theme";
-
-// src/translations.ts
-var translationKey = "@dxos/react-ui-calendar";
-var translations = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "today button": "Today"
-      }
-    }
-  }
-];
+import { IconButton, useTranslation } from "@dxos/react-ui";
+import { composable, composableProps, mx } from "@dxos/ui-theme";
+import { translationKey } from "#translations";
 
 // src/components/Calendar/util.ts
 var getDate = (start2, weekNumber, dayOfWeek, weekStartsOn) => {
@@ -63,16 +52,10 @@ var CalendarRoot = /* @__PURE__ */ forwardRef(({ children, weekStartsOn = 1 }, f
     setSelected
   }, children);
 });
-var CalendarViewport = ({ children, classNames }) => {
-  return /* @__PURE__ */ React.createElement("div", {
-    role: "none",
-    className: mx("flex flex-col items-center overflow-hidden bg-inputSurface", classNames)
-  }, children);
-};
-CalendarViewport.displayName = "CalendarContent";
-var CalendarToolbar = ({ classNames }) => {
+var CALENDAR_TOOLBAR_NAME = "CalendarHeader";
+var CalendarToolbar = composable(({ classNames, ...props }, forwardedRef) => {
   const { t } = useTranslation(translationKey);
-  const { weekStartsOn, event, index, selected } = useCalendarContext(CalendarToolbar.displayName);
+  const { weekStartsOn, event, index, selected } = useCalendarContext(CALENDAR_TOOLBAR_NAME);
   const top = useMemo(() => getDate(start, index ?? 0, 6, weekStartsOn), [
     index,
     weekStartsOn
@@ -89,8 +72,14 @@ var CalendarToolbar = ({ classNames }) => {
     today
   ]);
   return /* @__PURE__ */ React.createElement("div", {
-    role: "none",
-    className: mx("shink-0 is-full grid grid-cols-3 items-center bg-barSurface", classNames),
+    ...composableProps(props, {
+      role: "none",
+      classNames: [
+        "shrink-0 grid! grid-cols-3 items-center bg-toolbar-surface",
+        classNames
+      ]
+    }),
+    ref: forwardedRef,
     style: {
       width: defaultWidth
     }
@@ -98,25 +87,31 @@ var CalendarToolbar = ({ classNames }) => {
     className: "flex justify-start"
   }, /* @__PURE__ */ React.createElement(IconButton, {
     variant: "ghost",
-    size: 5,
     icon: "ph--calendar--regular",
     iconOnly: true,
     classNames: "aspect-square",
-    label: t("today button"),
+    label: t("today.button"),
     onClick: handleToday
   })), /* @__PURE__ */ React.createElement("div", {
     className: "flex justify-center p-2 text-description"
   }, format(selected ?? top, "MMMM")), /* @__PURE__ */ React.createElement("div", {
     className: "flex justify-end p-2 text-description"
   }, (selected ?? top).getFullYear()));
-};
-CalendarToolbar.displayName = "CalendarHeader";
-var CalendarGrid = ({ classNames, rows, onSelect }) => {
-  const { weekStartsOn, event, setIndex, selected, setSelected } = useCalendarContext(CalendarGrid.displayName);
+});
+CalendarToolbar.displayName = CALENDAR_TOOLBAR_NAME;
+var CALENDAR_GRID_NAME = "CalendarGrid";
+var CalendarGrid = composable(({ classNames, rows, dates = [], onSelect, ...props }, forwardedRef) => {
+  const { weekStartsOn, event, setIndex, selected, setSelected } = useCalendarContext(CALENDAR_GRID_NAME);
   const { ref: containerRef, width = 0, height = 0 } = useResizeDetector();
   const maxHeight = rows ? rows * size : void 0;
   const listRef = useRef(null);
   const today = useMemo(() => /* @__PURE__ */ new Date(), []);
+  const dateSet = useMemo(() => new Set(dates.map((date) => startOfDay(date).toISOString())), [
+    dates
+  ]);
+  const hasDate = useCallback((date) => dateSet.has(startOfDay(date).toISOString()), [
+    dateSet
+  ]);
   const [initialized, setInitialized] = useState(false);
   useEffect(() => {
     const index = differenceInWeeks(today, start);
@@ -150,9 +145,6 @@ var CalendarGrid = ({ classNames, rows, onSelect }) => {
       return format(day, "EEE");
     });
   }, []);
-  const getNumAppointments = useCallback((_date) => {
-    return 0;
-  }, []);
   const handleDaySelect = useCallback((date) => {
     setSelected((current) => isSameDay(date, current) ? void 0 : date);
     onSelect?.({
@@ -165,18 +157,15 @@ var CalendarGrid = ({ classNames, rows, onSelect }) => {
     setIndex(Math.round(info.scrollTop / size));
   }, []);
   const rowRenderer = useCallback(({ key, index, style }) => {
-    const getBgColor = (date) => date.getMonth() % 2 === 0 && "bg-modalSurface";
+    const getBgColor = (date) => date.getMonth() % 2 === 0 && "bg-modal-surface";
     return /* @__PURE__ */ React.createElement("div", {
       key,
       role: "none",
       style,
-      className: "is-full grid grid-cols-[1fr_max-content_1fr] snap-center"
+      className: "grid"
     }, /* @__PURE__ */ React.createElement("div", {
       role: "none",
-      className: mx(getBgColor(getDate(start, index, 0, weekStartsOn)))
-    }), /* @__PURE__ */ React.createElement("div", {
-      role: "none",
-      className: "grid grid-cols-7",
+      className: "grid grid-cols-7 bg-input-surface",
       style: {
         gridTemplateColumns: `repeat(7, ${size}px)`
       }
@@ -184,8 +173,7 @@ var CalendarGrid = ({ classNames, rows, onSelect }) => {
       length: 7
     }).map((_, i) => {
       const date = getDate(start, index, i, weekStartsOn);
-      const num = getNumAppointments(date);
-      const border = isSameDay(date, selected) ? "border-primary-500" : isSameDay(date, today) ? "border-amber-500" : void 0;
+      const border = isSameDay(date, selected) ? "border-primary-500" : isSameDay(date, today) ? "border-amber-500" : hasDate(date) ? "border-neutral-700 border-dashed" : void 0;
       return /* @__PURE__ */ React.createElement("div", {
         key: i,
         role: "none",
@@ -197,30 +185,27 @@ var CalendarGrid = ({ classNames, rows, onSelect }) => {
         className: "absolute top-0 text-xs text-description"
       }, format(date, "MMM")), border && /* @__PURE__ */ React.createElement("div", {
         role: "none",
-        className: mx("absolute top-0 left-0 is-full bs-full border-2 rounded-full", border)
-      }), num > 0 && /* @__PURE__ */ React.createElement(Icon, {
-        classNames: "absolute bottom-0",
-        icon: num > 3 ? "ph--dots-three--regular" : "ph--dot--regular",
-        size: 5
+        className: mx("absolute inset-1 border-2 rounded-full", border)
       }));
-    })), /* @__PURE__ */ React.createElement("div", {
-      className: mx(getBgColor(getDate(start, index, 6, weekStartsOn)))
-    }));
+    })));
   }, [
     handleDaySelect,
-    getNumAppointments,
+    hasDate,
     selected,
     weekStartsOn
   ]);
   return /* @__PURE__ */ React.createElement("div", {
-    role: "none",
-    className: mx("flex flex-col bs-full is-full justify-center overflow-hidden", classNames)
-  }, /* @__PURE__ */ React.createElement("div", {
-    role: "none",
-    className: "flex justify-center bg-groupSurface"
+    ...composableProps(props, {
+      role: "none",
+      classNames: [
+        "flex flex-col h-full w-full justify-center overflow-hidden",
+        classNames
+      ]
+    }),
+    ref: forwardedRef
   }, /* @__PURE__ */ React.createElement("div", {
     role: "none",
-    className: "flex is-full grid grid-cols-7",
+    className: "grid w-full grid-cols-7",
     style: {
       width: defaultWidth
     }
@@ -228,15 +213,14 @@ var CalendarGrid = ({ classNames, rows, onSelect }) => {
     key: i,
     role: "none",
     className: "flex justify-center p-2 text-sm font-thin"
-  }, date)))), /* @__PURE__ */ React.createElement("div", {
+  }, date))), /* @__PURE__ */ React.createElement("div", {
     role: "none",
-    className: "flex flex-col bs-full is-full justify-center overflow-hidden",
+    className: "flex flex-col h-full w-full justify-center overflow-hidden",
     ref: containerRef
   }, /* @__PURE__ */ React.createElement(List, {
     ref: listRef,
     role: "none",
-    // TODO(burdon): Snap isn't working.
-    className: "[&>div]:snap-y scrollbar-none outline-none",
+    className: "scrollbar-none outline-hidden",
     width,
     height: maxHeight ?? height,
     rowCount: maxRows,
@@ -246,11 +230,10 @@ var CalendarGrid = ({ classNames, rows, onSelect }) => {
     onScroll: handleScroll,
     onRowsRendered: () => setInitialized(true)
   })));
-};
-CalendarGrid.displayName = "CalendarGrid";
+});
+CalendarGrid.displayName = CALENDAR_GRID_NAME;
 var Calendar = {
   Root: CalendarRoot,
-  Viewport: CalendarViewport,
   Toolbar: CalendarToolbar,
   Grid: CalendarGrid
 };