@plexui/ui 0.2.0

package/dist/es/components/DatePicker/Calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/Calendar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAClG,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAA;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,CAAC,MAAM,uBAAuB,CAAA;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAE1C,MAAM,iBAAiB,GAAG,GAAG,CAAA;AAC7B,MAAM,eAAe,GAAG,EAAE,CAAA;AAC1B,MAAM,gBAAgB,GAAG,iBAAiB,GAAG,eAAe,CAAA;AAE5D,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE,CAAA;IACzD,MAAM,YAAY,GAAG,eAAe,EAAE,CAAA;IACtC,MAAM,oBAAoB,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAA;IAChE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAA;IAC7D,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAA;IAC3E,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAW,GAAG,EAAE,CAAC,KAAK,IAAI,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAA;IAEzF,MAAM,SAAS,GAAG,CAAC,GAAG,IAAI,QAAQ,CAAC,GAAG,EAAE,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAA;IACtE,MAAM,YAAY,GAAG,CAAC,GAAG,IAAI,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAA;IAEvE,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,gBAAgB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;QAC9B,eAAe,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IACjD,CAAC,CAAA;IAED,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,gBAAgB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;QAC9B,eAAe,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IAClD,CAAC,CAAA;IAED,MAAM,gBAAgB,GAAG,CAAC,YAAsB,EAAE,EAAE;QAClD,WAAW,CAAC,OAAO,CAAC,YAAY,CAAC,CAAA;QACjC,YAAY,EAAE,CAAA;IAChB,CAAC,CAAA;IAED,+EAA+E;IAC/E,SAAS,CAAC,GAAG,EAAE;QACb,4BAA4B;QAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAM;QACR,CAAC;QAED,wDAAwD;QACxD,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CACzC,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,EAC7B,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAC5B,CAAA;QACD,MAAM,wBAAwB,GAAG,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;QAC7D,IAAI,CAAC,wBAAwB,EAAE,CAAC;YAC9B,yCAAyC;YACzC,gBAAgB,CAAC,CAAC,CAAC,CAAA;YACnB,eAAe,CAAC,KAAK,CAAC,CAAA;YACtB,uBAAuB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;QACvC,CAAC;QACD,mGAAmG;IACrG,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,wDAAwD;IACxD,SAAS,CAAC,GAAG,EAAE;QACb,qBAAqB,CAAC,GAAG,EAAE;YACzB,MAAM,SAAS,GAAG,oBAAoB,CAAC,OAAO,CAAA;YAE9C,IAAI,CAAC,SAAS,EAAE,CAAC;gBACf,OAAM;YACR,CAAC;YAED,IAAI,SAAS,GAAG,CAAC,QAAQ,CAAA;YAEzB,4BAA4B;YAC5B,SAAS,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;gBACjE,yGAAyG;gBACzG,iFAAiF;gBACjF,MAAM,MAAM,GAAG,OAAO,CAAC,YAAY,CAAA;gBAEnC,oCAAoC;gBACpC,IAAI,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,CAAC;oBACrC,OAAM;gBACR,CAAC;gBAED,IAAI,MAAM,GAAG,SAAS,EAAE,CAAC;oBACvB,SAAS,GAAG,MAAM,CAAA;gBACpB,CAAC;YACH,CAAC,CAAC,CAAA;YAEF,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,SAAS,IAAI,CAAA;YAEzC,oCAAoC;YACpC,8EAA8E;YAC9E,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;gBAChC,qBAAqB,CAAC,GAAG,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,UAAU,GAAG,gCAAgC,CAAA;gBAC/D,CAAC,CAAC,CAAA;YACJ,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,OAAO,CACL,cAAK,SAAS,EAAE,CAAC,CAAC,eAAe,YAC/B,eAAK,GAAG,EAAE,oBAAoB,EAAE,SAAS,EAAE,CAAC,CAAC,iBAAiB,aAC5D,cAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,YACxB,KAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,IAAI,EACT,UAAU,EAAC,KAAK,EAChB,IAAI,EAAE,KAAK,EACX,QAAQ,EAAC,IAAI,EACb,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,CAAC,SAAS,YAEpB,KAAC,WAAW,KAAG,GACR,GACL,EACN,cAAK,SAAS,EAAE,CAAC,CAAC,IAAI,YACpB,KAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,IAAI,EACT,UAAU,EAAC,KAAK,EAChB,IAAI,EAAE,KAAK,EACX,QAAQ,EAAC,IAAI,EACb,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,CAAC,YAAY,YAEvB,KAAC,YAAY,KAAG,GACT,GACL,EACN,cACE,SAAS,EAAE,CAAC,CAAC,aAAa,EAC1B,KAAK,EAAE;wBACL,SAAS,EAAE,aAAa,aAAa,GAAG,CAAC,CAAC,GAAG,gBAAgB,QAAQ;qBACtE,YAED,KAAC,eAAe,IAAC,aAAa,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,YACpD,KAAC,YAAY,IAKX,YAAY,EAAE,aAAa,EAC3B,IAAI,EAAE,YAAY,EAClB,YAAY,EAAE,KAAK,EACnB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,gBAAgB,IATzB,YAAY,CAAC,cAAc,CAAC;4BAC/B,KAAK,EAAE,MAAM;4BACb,IAAI,EAAE,SAAS;yBAChB,CAAC,CAOF,GACc,GACd,IACF,IAnDgC,eAAe,oBAAoB,EAAE,CAoDvE,CACP,CAAA;AACH,CAAC,CAAA;AAYD,MAAM,mBAAmB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAA;AAEtE,MAAM,YAAY,GAAG,CAAC,EACpB,IAAI,EACJ,YAAY,EACZ,GAAG,EACH,GAAG,EACH,YAAY,EACZ,YAAY,GACM,EAAE,EAAE;IACtB,sDAAsD;IACtD,MAAM,CAAC,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAA;IACzC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,eAAe,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5D,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;QACxC,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;QAEtC,MAAM,oBAAoB,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAA;QACnD,MAAM,SAAS,GAAG,IAAI,KAAK,CAAC,oBAAoB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAC5D,MAAM,WAAW,GAAG,cAAc,CAAC,UAAU,CAAC,CAAA;QAC9C,MAAM,aAAa,GAAG,CAAC,GAAG,SAAS,EAAE,GAAG,WAAW,CAAC,CAAA;QAEpD,MAAM,mBAAmB,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,IAAI,UAAU,EAAE,GAAG,IAAI,UAAU,CAAC,CAAA;QAExF,OAAO;YACL,YAAY,EAAE,UAAU;YACxB,UAAU;YACV,KAAK,EAAE,cAAc,CAAC,aAAa,EAAE,CAAC,CAAC;YACvC,eAAe,EAAE,mBAAmB;SACrC,CAAA;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAA;IAEpB,OAAO,CACL,eAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,GAAG,gBAAgB,EAAE,oCACtE,aAAG,SAAS,EAAE,CAAC,CAAC,UAAU,aACvB,YAAY,CAAC,SAAS,OAAG,YAAY,CAAC,IAAI,IACzC,EACJ,cAAK,SAAS,EAAE,CAAC,CAAC,IAAI,YACnB,mBAAmB,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAChC,cAAe,SAAS,EAAE,CAAC,CAAC,QAAQ,YACjC,GAAG,IADI,GAAG,CAEP,CACP,CAAC,GACE,EACL,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,CAC9B,cAAK,SAAS,EAAE,CAAC,CAAC,IAAI,YACnB,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE;oBACxB,IAAI,CAAC,CAAC,EAAE,CAAC;wBACP,OAAO,cAAK,SAAS,EAAE,CAAC,CAAC,GAAG,IAAO,GAAG,SAAS,IAAI,QAAQ,EAAE,CAAI,CAAA;oBACnE,CAAC;oBAED,MAAM,OAAO,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;oBAC3C,MAAM,UAAU,GAAG,OAAO,IAAI,YAAY,IAAI,SAAS,CAAC,CAAC,EAAE,YAAY,CAAC,CAAA;oBACxE,MAAM,UAAU,GAAG,OAAO,CAAC,CAAC,CAAC,CAAA;oBAE7B,OAAO,CACL,cAAK,SAAS,EAAE,CAAC,CAAC,GAAG,sBAAmC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,YACjF,kBACE,SAAS,EAAE,CAAC,CAAC,cAAc,EAC3B,QAAQ,EAAE,CAAC,OAAO,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,YAAY,EAAE,CAAC,CAAC,CAAC,aAEpC,CAAC,CAAC,GAAG,EACL,UAAU,IAAI,eAAM,SAAS,EAAE,CAAC,CAAC,QAAQ,GAAI,IACvC,IARiB,QAAQ,CAS9B,CACP,CAAA;gBACH,CAAC,CAAC,IAtByB,SAAS,CAuBhC,CACP,CAAC,IACE,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { DateTime, Interval } from \"luxon\"\nimport { useEffect, useMemo, useRef, useState } from \"react\"\nimport { chunkIntoWeeks, getDaysOfMonth, isBefore, isSameDay, isToday } from \"../../lib/dateUtils\"\nimport { waitForAnimationFrame } from \"../../lib/helpers\"\nimport { Button } from \"../Button\"\nimport { ChevronLeft, ChevronRight } from \"../Icon\"\nimport { usePopoverClose } from \"../Popover/usePopoverController\"\nimport { TransitionGroup } from \"../Transition\"\nimport s from \"./Calendar.module.css\"\nimport { useDateContext } from \"./context\"\n\nconst CALENDAR_WIDTH_PX = 210\nconst CALENDAR_GAP_PX = 32\nconst STEP_DISTANCE_PX = CALENDAR_WIDTH_PX + CALENDAR_GAP_PX\n\nexport const DateCalendar = () => {\n  const { value, min, max, onChangeRef } = useDateContext()\n  const closePopover = usePopoverClose()\n  const calendarContainerRef = useRef<HTMLDivElement | null>(null)\n  const [calendarSteps, setCalendarSteps] = useState<number>(0)\n  const [forceRenderIncrement, setForceRenderIncrement] = useState<number>(0)\n  const [calendarDate, setCalendarDate] = useState<DateTime>(() => value ?? DateTime.now())\n\n  const canGoBack = !min || isBefore(min, calendarDate.startOf(\"month\"))\n  const canGoForward = !max || isBefore(calendarDate.endOf(\"month\"), max)\n\n  const handleNext = () => {\n    setCalendarSteps((c) => c + 1)\n    setCalendarDate((dt) => dt.plus({ months: 1 }))\n  }\n\n  const handlePrevious = () => {\n    setCalendarSteps((c) => c - 1)\n    setCalendarDate((dt) => dt.minus({ months: 1 }))\n  }\n\n  const handleDateSelect = (selectedDate: DateTime) => {\n    onChangeRef.current(selectedDate)\n    closePopover()\n  }\n\n  // Force re-renders when `value` changes out of band from direct user-selection\n  useEffect(() => {\n    // No-op when value is empty\n    if (!value) {\n      return\n    }\n\n    // Check if `value` is still within view of our calendar\n    const viewInterval = Interval.fromDateTimes(\n      calendarDate.startOf(\"month\"),\n      calendarDate.endOf(\"month\"),\n    )\n    const isValueInRangeOfCalendar = viewInterval.contains(value)\n    if (!isValueInRangeOfCalendar) {\n      // Reset state the calendar view entirely\n      setCalendarSteps(0)\n      setCalendarDate(value)\n      setForceRenderIncrement((c) => c + 1)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- Only re-run this hook when value changes\n  }, [value])\n\n  // Detect height changes when new calendars are rendered\n  useEffect(() => {\n    waitForAnimationFrame(() => {\n      const container = calendarContainerRef.current\n\n      if (!container) {\n        return\n      }\n\n      let maxHeight = -Infinity\n\n      // Find the tallest calendar\n      container.querySelectorAll(\"[data-calendar]\")?.forEach((element) => {\n        // NOTE: clientHeight does not respect the scale() that popover uses to animate in, which is what we want\n        // We want to know the full height of the element, without any transform applied.\n        const height = element.clientHeight\n\n        // Ignore calendars that are exiting\n        if (element.closest(\"[data-exiting\")) {\n          return\n        }\n\n        if (height > maxHeight) {\n          maxHeight = height\n        }\n      })\n\n      container.style.height = `${maxHeight}px`\n\n      // Don't animate the initial height.\n      // This is relevant when the calendar opens to a larger size than the default.\n      if (!container.style.transition) {\n        waitForAnimationFrame(() => {\n          container.style.transition = `height 0.25s var(--cubic-move)`\n        })\n      }\n    })\n  }, [calendarDate])\n\n  return (\n    <div className={s.CalendarWrapper} key={`stable-view-${forceRenderIncrement}`}>\n      <div ref={calendarContainerRef} className={s.CalendarContainer}>\n        <div className={s.Previous}>\n          <Button\n            variant=\"ghost\"\n            color=\"secondary\"\n            size=\"sm\"\n            gutterSize=\"2xs\"\n            pill={false}\n            iconSize=\"sm\"\n            onClick={handlePrevious}\n            disabled={!canGoBack}\n          >\n            <ChevronLeft />\n          </Button>\n        </div>\n        <div className={s.Next}>\n          <Button\n            variant=\"ghost\"\n            color=\"secondary\"\n            size=\"sm\"\n            gutterSize=\"2xs\"\n            pill={false}\n            iconSize=\"sm\"\n            onClick={handleNext}\n            disabled={!canGoForward}\n          >\n            <ChevronRight />\n          </Button>\n        </div>\n        <div\n          className={s.CalendarRange}\n          style={{\n            transform: `translate(${calendarSteps * -1 * STEP_DISTANCE_PX}px, 0)`,\n          }}\n        >\n          <TransitionGroup enterDuration={400} exitDuration={400}>\n            <CalendarView\n              key={calendarDate.toLocaleString({\n                month: \"long\",\n                year: \"numeric\",\n              })}\n              stepPosition={calendarSteps}\n              date={calendarDate}\n              selectedDate={value}\n              min={min}\n              max={max}\n              onDateSelect={handleDateSelect}\n            />\n          </TransitionGroup>\n        </div>\n      </div>\n    </div>\n  )\n}\n\ntype CalendarViewProps = {\n  // Can be any day within the given month that the calendar should render for\n  date: DateTime\n  selectedDate?: DateTime | null\n  onDateSelect?: (dt: DateTime) => void\n  min?: DateTime\n  max?: DateTime\n  stepPosition: number\n}\n\nconst daysOfTheWeekLabels = [\"Su\", \"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\"]\n\nconst CalendarView = ({\n  date,\n  selectedDate,\n  min,\n  max,\n  onDateSelect,\n  stepPosition,\n}: CalendarViewProps) => {\n  // Lock position on mount and don't respond to changes\n  const [position] = useState(stepPosition)\n  const { startOfMonth, weeks, enabledInterval } = useMemo(() => {\n    const monthStart = date.startOf(\"month\")\n    const endOfMonth = date.endOf(\"month\")\n\n    const daysBeforeMonthStart = monthStart.weekday % 7\n    const blankDays = new Array(daysBeforeMonthStart).fill(null)\n    const daysInMonth = getDaysOfMonth(monthStart)\n    const calendarCells = [...blankDays, ...daysInMonth]\n\n    const enabledDateInterval = Interval.fromDateTimes(min || monthStart, max || endOfMonth)\n\n    return {\n      startOfMonth: monthStart,\n      endOfMonth,\n      weeks: chunkIntoWeeks(calendarCells, 7),\n      enabledInterval: enabledDateInterval,\n    }\n  }, [date, min, max])\n\n  return (\n    <div className={s.Calendar} style={{ left: position * STEP_DISTANCE_PX }} data-calendar>\n      <p className={s.MonthLabel}>\n        {startOfMonth.monthLong} {startOfMonth.year}\n      </p>\n      <div className={s.Week}>\n        {daysOfTheWeekLabels.map((day) => (\n          <div key={day} className={s.DayLabel}>\n            {day}\n          </div>\n        ))}\n      </div>\n      {weeks.map((week, weekIndex) => (\n        <div className={s.Week} key={weekIndex}>\n          {week.map((d, dayIndex) => {\n            if (!d) {\n              return <div className={s.Day} key={`${weekIndex}-${dayIndex}`} />\n            }\n\n            const enabled = enabledInterval.contains(d)\n            const isSelected = enabled && selectedDate && isSameDay(d, selectedDate)\n            const dayIsToday = isToday(d)\n\n            return (\n              <div className={s.Day} key={dayIndex} data-is-selected={isSelected ? \"\" : undefined}>\n                <button\n                  className={s.InteractiveDay}\n                  disabled={!enabled}\n                  onClick={() => d && onDateSelect?.(d)}\n                >\n                  {d.day}\n                  {dayIsToday && <span className={s.TodayDot} />}\n                </button>\n              </div>\n            )\n          })}\n        </div>\n      ))}\n    </div>\n  )\n}\n"]}

package/dist/es/components/DatePicker/Calendar.module.css

@@ -0,0 +1,194 @@
+@layer components {.CalendarContainer {
+  position: relative;
+  width: 210px;
+  /*  Default size of the calendar is assumed to be 224px */
+  /*  and then is dynamically set via JS measuring */
+  height: 224px;
+}.Previous {
+  position: absolute;
+  top: 0;
+  left: -2px;
+  z-index: 2;
+  background-color: var(--color-surface-elevated);
+}
+
+  /*  Prevent titles from bleeding beyond the button */
+  .Previous::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -10px;
+    display: block;
+    width: 12px;
+    background-color: var(--color-surface-elevated);
+    content: "";
+  }
+
+  /*  Slide fade as titles collide with the button */
+  .Previous::after {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 100%;
+    display: block;
+    width: 14px;
+    background-color: var(--color-surface-elevated);
+    content: "";
+    -webkit-mask-image: linear-gradient(-90deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+            mask-image: linear-gradient(-90deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+  }.Next {
+  position: absolute;
+  top: 0;
+  right: -2px;
+  z-index: 2;
+  background-color: var(--color-surface-elevated);
+}
+
+  /*  Prevent titles from bleeding beyond the button */
+  .Next::before {
+    position: absolute;
+    top: 0;
+    right: -10px;
+    bottom: 0;
+    display: block;
+    width: 12px;
+    background-color: var(--color-surface-elevated);
+    content: "";
+  }
+
+  /*  Slide fade as titles collide with the button */
+  .Next::after {
+    position: absolute;
+    top: 0;
+    right: 100%;
+    bottom: 0;
+    display: block;
+    width: 14px;
+    background-color: var(--color-surface-elevated);
+    content: "";
+    -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+            mask-image: linear-gradient(90deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+  }/*  Lift the inner button above the pseudo elements to avoid clipping in the focus ring box shadow. */.Next button[type="button"],
+.Previous button[type="button"] {
+  z-index: 2;
+}.CalendarWrapper {
+  overflow: hidden;
+  padding: 10px 12px 12px;
+}.CalendarRange {
+  transition: transform 0.25s var(--cubic-move);
+}.Calendar {
+  --cell-size: 30px;
+  --cell-vertical-gutter: 2px;
+
+  position: absolute;
+  top: 0;
+  width: 210px;
+  font-size: 14px;
+}.Week {
+  display: flex;
+  margin-bottom: var(--cell-vertical-gutter);
+}
+
+  .Week:last-child {
+    margin-bottom: 0;
+  }.DayLabel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cell-size);
+  height: var(--cell-size);
+  color: var(--color-text-secondary);
+  font-size: 12px;
+  letter-spacing: var(--tracking-none);
+  text-align: center;
+}.MonthLabel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  padding: 0;
+  margin: 0 0 6px;
+  color: var(--color-text);
+  font-size: 13px;
+  font-weight: var(--font-weight-semibold);
+}.Day {
+  position: relative;
+  width: var(--cell-size);
+  height: var(--cell-size);
+  text-align: center;
+  transition: background-color 0.15s var(--cubic-enter);
+}
+
+  .Day[data-is-selected] {
+    border-radius: var(--radius-full);
+  }
+
+  .Day[data-is-selected], :where([data-theme="light"]) .Day[data-is-selected] {
+background-color: var(--alpha-06);
+}
+
+  :where([data-theme="dark"]) .Day[data-is-selected] {
+background-color: var(--alpha-08);
+}.InteractiveDay {
+  position: relative;
+  display: block;
+  width: var(--cell-size);
+  height: var(--cell-size);
+  border: 0;
+  border-radius: var(--radius-full);
+  -webkit-appearance: auto;
+     -moz-appearance: auto;
+          appearance: auto;
+  background: none;
+  cursor: pointer;
+  font-size: var(--font-text-sm-size);
+}
+
+  .InteractiveDay::before {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border: 1px solid var(--color-text);
+    border-radius: var(--radius-full);
+    content: "";
+    opacity: 0;
+    transition:
+      color,
+      0.15s var(--cubic-enter),
+      opacity 0.15s var(--cubic-enter);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .InteractiveDay:hover::before {
+      opacity: 1;
+    }
+}
+
+  .InteractiveDay[disabled] {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+    .InteractiveDay[disabled]::before {
+      display: none;
+    }
+
+  [data-is-selected] .InteractiveDay {
+    background: var(--color-text);
+    color: var(--color-text-inverse);
+  }.TodayDot {
+  position: absolute;
+  bottom: 3px;
+  left: 50%;
+  width: 3px;
+  height: 3px;
+  border-radius: 100%;
+  margin-left: -1px;
+  background-color: var(--color-text);
+  transition: background-color 0.15s var(--cubic-enter);
+}
+
+  [data-is-selected] .TodayDot {
+    background-color: var(--gray-0);
+  }
+}

package/dist/es/components/DatePicker/DatePicker.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DateTime } from "luxon";
+import { useMemo } from "react";
+import { useLatestValue } from "../../hooks/useLatestValue";
+import { isBefore } from "../../lib/dateUtils";
+import { Calendar } from "../Icon";
+import { Popover } from "../Popover";
+import { SelectControl } from "../SelectControl";
+import { DateCalendar } from "./Calendar";
+import { DateContext } from "./context";
+export const DatePicker = (props) => {
+    const { id, value, onChange, min, max, side = "bottom", sideOffset = 8, align = "center", alignOffset, variant = "outline", size = "md", clearable = false, disabled = false, dropdownIconType, placeholder = "Select date...", pill = true, block = false, triggerClassName, triggerShowIcon = true, triggerDateFormat = "MM/dd/yy", } = props;
+    if (min && max && !isBefore(min, max)) {
+        throw new Error("DatePicker error: `min` date must be before the `max` date");
+    }
+    // Create stable, mutable references to avoid memoization requirements from consumers
+    const onChangeRef = useLatestValue(onChange);
+    const store = useMemo(() => ({
+        value,
+        min,
+        max,
+        variant,
+        size,
+        dropdownIconType,
+        clearable,
+        disabled,
+        placeholder,
+        block,
+        pill,
+        triggerClassName,
+        triggerShowIcon,
+        triggerDateFormat,
+        onChangeRef,
+    }), [
+        value,
+        min,
+        max,
+        variant,
+        size,
+        dropdownIconType,
+        clearable,
+        disabled,
+        placeholder,
+        block,
+        pill,
+        triggerClassName,
+        triggerShowIcon,
+        triggerDateFormat,
+        onChangeRef,
+    ]);
+    const handleClearClick = () => {
+        onChangeRef.current(null);
+    };
+    return (_jsx(DateContext, { value: store, children: _jsxs(Popover, { children: [_jsx(Popover.Trigger, { children: _jsx(SelectControl, { id: id, className: triggerClassName, selected: !!value, variant: variant, pill: pill, block: block, size: size, disabled: disabled, StartIcon: triggerShowIcon ? Calendar : undefined, dropdownIconType: dropdownIconType, onClearClick: clearable ? handleClearClick : undefined, children: _jsx("span", { className: "tabular-nums", children: value?.toFormat(triggerDateFormat) ?? placeholder }) }) }), _jsx(Popover.Content, { minWidth: 230, side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset ?? (align === "center" ? 0 : -5), children: _jsx(DateCalendar, {}) })] }) }));
+};
+//# sourceMappingURL=DatePicker.js.map

package/dist/es/components/DatePicker/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport { DateTime } from \"luxon\"\nimport { useMemo } from \"react\"\nimport { useLatestValue } from \"../../hooks/useLatestValue\"\nimport { isBefore } from \"../../lib/dateUtils\"\nimport { Calendar } from \"../Icon\"\nimport { Popover, type PopoverContentProps } from \"../Popover\"\nimport { SelectControl, type SelectControlProps } from \"../SelectControl\"\nimport { DateCalendar } from \"./Calendar\"\nimport { DateContext, type DateContextValue } from \"./context\"\n\nexport type DatePickerProps = {\n  /**\n   * Allow targeting the input for forms and accessibility.\n   */\n  id: string\n  /**\n   * The selected date value.\n   */\n  value: DateTime | null\n  /**\n   * Handler that is triggered when the date changes.\n   */\n  onChange: (nextValue: DateTime | null) => void\n  /**\n   * Defines the earliest selectable date (inclusive).\n   */\n  min?: DateTime\n  /**\n   * Defines the latest selectable date (inclusive).\n   */\n  max?: DateTime\n  /**\n   * The preferred side of the trigger to render against when open. Will be reversed when collisions occur.\n   * @default bottom\n   */\n  side?: PopoverContentProps[\"side\"]\n  /**\n   * The distance in pixels from the trigger.\n   * @default 8\n   */\n  sideOffset?: PopoverContentProps[\"sideOffset\"]\n  /**\n   * The preferred alignment against the trigger. May change when collisions occur.\n   * @default center\n   */\n  align?: PopoverContentProps[\"align\"]\n  /**\n   * An offset in pixels from the \"start\" or \"end\" alignment options.\n   * @default 0\n   */\n  alignOffset?: PopoverContentProps[\"alignOffset\"]\n\n  /**\n   * Disables the select visually and from interactions\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Placeholder text for the select\n   * @default Select date...\n   */\n  placeholder?: string\n  /**\n   * Style variant for the select trigger\n   * @default outline\n   */\n  variant?: SelectControlProps[\"variant\"]\n  /**\n   * Determines if the select trigger should be a fully rounded pill shape\n   * @default false\n   */\n  pill?: boolean\n  /**\n   * Determines size of the size and spacing of the control.\n   *\n   * | 3xs     | 2xs     | xs      | sm      | md      | lg      | xl      | 2xl     | 3xl     |\n   * | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- |\n   * | `22px`  | `24px`  | `26px`  | `28px`  | `32px`  | `36px`  | `40px`  | `44px`  | `48px`  |\n   * @default md\n   */\n  size?: SelectControlProps[\"size\"]\n  /**\n   * Icon displayed in the far right of the select trigger\n   * @default dropdown\n   */\n  dropdownIconType?: SelectControlProps[\"dropdownIconType\"]\n  /**\n   * Custom class applied to the select trigger\n   */\n  triggerClassName?: string\n  /**\n   * Display calendar icon at the start of the trigger\n   * @default true\n   */\n  triggerShowIcon?: boolean\n  /**\n   * Format of dates displayed in the trigger\n   */\n  triggerDateFormat: string\n  /**\n   * Display a clear action that allows the select to be unset.\n   * @default false\n   */\n  clearable?: boolean\n  /**\n   * Extends select to 100% of available width.\n   * @default true\n   */\n  block?: boolean\n}\n\nexport const DatePicker = (props: DatePickerProps) => {\n  const {\n    id,\n    value,\n    onChange,\n    min,\n    max,\n    side = \"bottom\",\n    sideOffset = 8,\n    align = \"center\",\n    alignOffset,\n    variant = \"outline\",\n    size = \"md\",\n    clearable = false,\n    disabled = false,\n    dropdownIconType,\n    placeholder = \"Select date...\",\n    pill = true,\n    block = false,\n    triggerClassName,\n    triggerShowIcon = true,\n    triggerDateFormat = \"MM/dd/yy\",\n  } = props\n\n  if (min && max && !isBefore(min, max)) {\n    throw new Error(\"DatePicker error: `min` date must be before the `max` date\")\n  }\n\n  // Create stable, mutable references to avoid memoization requirements from consumers\n  const onChangeRef = useLatestValue(onChange)\n\n  const store = useMemo<DateContextValue>(\n    () => ({\n      value,\n      min,\n      max,\n      variant,\n      size,\n      dropdownIconType,\n      clearable,\n      disabled,\n      placeholder,\n      block,\n      pill,\n      triggerClassName,\n      triggerShowIcon,\n      triggerDateFormat,\n      onChangeRef,\n    }),\n    [\n      value,\n      min,\n      max,\n      variant,\n      size,\n      dropdownIconType,\n      clearable,\n      disabled,\n      placeholder,\n      block,\n      pill,\n      triggerClassName,\n      triggerShowIcon,\n      triggerDateFormat,\n      onChangeRef,\n    ],\n  )\n\n  const handleClearClick = () => {\n    onChangeRef.current(null)\n  }\n\n  return (\n    <DateContext value={store}>\n      <Popover>\n        <Popover.Trigger>\n          <SelectControl\n            id={id}\n            className={triggerClassName}\n            selected={!!value}\n            variant={variant}\n            pill={pill}\n            block={block}\n            size={size}\n            disabled={disabled}\n            StartIcon={triggerShowIcon ? Calendar : undefined}\n            dropdownIconType={dropdownIconType}\n            onClearClick={clearable ? handleClearClick : undefined}\n          >\n            <span className=\"tabular-nums\">\n              {value?.toFormat(triggerDateFormat) ?? placeholder}\n            </span>\n          </SelectControl>\n        </Popover.Trigger>\n        <Popover.Content\n          minWidth={230}\n          side={side}\n          sideOffset={sideOffset}\n          align={align}\n          alignOffset={alignOffset ?? (align === \"center\" ? 0 : -5)}\n        >\n          <DateCalendar />\n        </Popover.Content>\n      </Popover>\n    </DateContext>\n  )\n}\n"]}

package/dist/es/components/DatePicker/context.js

@@ -0,0 +1,12 @@
+"use client";
+import { DateTime } from "luxon";
+import { createContext, use } from "react";
+export const DateContext = createContext(null);
+export const useDateContext = () => {
+    const context = use(DateContext);
+    if (!context) {
+        throw new Error("Date components must be wrapped in <DatePicker />");
+    }
+    return context;
+};
+//# sourceMappingURL=context.js.map

package/dist/es/components/DatePicker/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/context.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAsB1C,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAA0B,IAAI,CAAC,CAAA;AAEvE,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,OAAO,GAAG,GAAG,CAAC,WAAW,CAAC,CAAA;IAEhC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAA;IACtE,CAAC;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { DateTime } from \"luxon\"\nimport { createContext, use } from \"react\"\nimport type { SelectControlProps } from \"../SelectControl\"\n\nexport type DateContextValue = {\n  value: DateTime | null\n  min?: DateTime\n  max?: DateTime\n  triggerClassName?: string\n  triggerShowIcon?: boolean\n  triggerDateFormat: string\n  disabled: boolean\n  variant?: SelectControlProps[\"variant\"]\n  pill: boolean\n  block: boolean\n  size?: SelectControlProps[\"size\"]\n  dropdownIconType?: SelectControlProps[\"dropdownIconType\"]\n  clearable: boolean\n  placeholder: string\n  // References\n  onChangeRef: React.MutableRefObject<(nextValue: DateTime | null) => void>\n}\n\nexport const DateContext = createContext<DateContextValue | null>(null)\n\nexport const useDateContext = () => {\n  const context = use(DateContext)\n\n  if (!context) {\n    throw new Error(\"Date components must be wrapped in <DatePicker />\")\n  }\n\n  return context\n}\n"]}

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

@@ -0,0 +1,2 @@
+export { DatePicker } from "./DatePicker";
+//# sourceMappingURL=index.js.map

package/dist/es/components/DatePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA","sourcesContent":["export { DatePicker } from \"./DatePicker\"\nexport type { DatePickerProps } from \"./DatePicker\"\n"]}

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

@@ -0,0 +1,226 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DateTime, Interval } from "luxon";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useBreakpoint } from "../../hooks/useBreakpoints";
+import { chunkIntoWeeks, getDaysOfMonth, isAfter, isBefore, isSameDay, isToday, } from "../../lib/dateUtils";
+import { waitForAnimationFrame } from "../../lib/helpers";
+import { Button } from "../Button";
+import { Check, ChevronLeft, ChevronRight } from "../Icon";
+import { TransitionGroup } from "../Transition";
+import s from "./Calendar.module.css";
+import { useDateRangeContext } from "./context";
+import {} from "./types";
+const CALENDAR_WIDTH_PX = 210;
+const CALENDAR_GAP_PX = 32;
+const STEP_DISTANCE_PX = CALENDAR_WIDTH_PX + CALENDAR_GAP_PX;
+export const DateRangeCalendar = () => {
+    const { value, min, max, maxRangeDays, onChangeRef } = useDateRangeContext();
+    const isSmallUp = useBreakpoint("sm");
+    const calendarContainerRef = useRef(null);
+    const [selectionRange, setSelectionRange] = useState(null);
+    const [calendarSteps, setCalendarSteps] = useState(0);
+    const [forceRenderIncrement, setForceRenderIncrement] = useState(0);
+    const [leftCalendarDate, setLeftCalendarDate] = useState(() => isSmallUp
+        ? getLeftCalendarDate(value?.[0] ?? DateTime.now(), max)
+        : value?.[0] ?? DateTime.now());
+    const rightCalendarDate = isSmallUp
+        ? leftCalendarDate.plus({ months: 1 }).startOf("month")
+        : leftCalendarDate.startOf("month");
+    const canGoBack = !min || isBefore(min, leftCalendarDate.startOf("month"));
+    const canGoForward = !max || isBefore(rightCalendarDate.endOf("month"), max);
+    const handleNext = () => {
+        setCalendarSteps((c) => c + 1);
+        setLeftCalendarDate((dt) => dt.plus({ months: 1 }));
+    };
+    const handlePrevious = () => {
+        setCalendarSteps((c) => c - 1);
+        setLeftCalendarDate((dt) => dt.minus({ months: 1 }));
+    };
+    const handleDateSelect = (selectedDate) => {
+        if (!selectionRange) {
+            setSelectionRange([selectedDate, selectedDate]);
+            return;
+        }
+        const [currentSelectionStartDate] = selectionRange;
+        // Selecting a date before the current selected start date moves the start date
+        // but does not resolve the selection
+        if (isBefore(selectedDate, currentSelectionStartDate)) {
+            setSelectionRange([selectedDate, selectedDate]);
+            return;
+        }
+        // Resolve the selection by emitting the value and clearing selection
+        onChangeRef.current([currentSelectionStartDate, selectedDate]);
+        setSelectionRange(null);
+    };
+    const handleDateMouseEnter = (hoveredDate) => {
+        // If we're not actively selecting, no-op
+        if (!selectionRange) {
+            return;
+        }
+        setSelectionRange((currentSelectionRange) => {
+            // impossible due to the check above
+            if (!currentSelectionRange) {
+                return currentSelectionRange;
+            }
+            const [currentStartDate] = currentSelectionRange;
+            // When hovering a date before the current date, don't change the selection range
+            if (isBefore(hoveredDate, currentStartDate)) {
+                return [currentStartDate, currentStartDate];
+            }
+            return [currentStartDate, hoveredDate];
+        });
+    };
+    const handleCalendarMouseLeave = () => {
+        // If we're not actively selecting, no-op
+        if (!selectionRange) {
+            return;
+        }
+        setSelectionRange((currentSelectionRange) => {
+            if (!currentSelectionRange) {
+                return currentSelectionRange;
+            }
+            // Reset the end selection
+            const [currentStartDate] = currentSelectionRange;
+            return [currentStartDate, currentStartDate];
+        });
+    };
+    const selectedDisplayValue = selectionRange || value;
+    // Force re-renders when `value` changes out of brand from direct user-selection
+    useEffect(() => {
+        // No-op when value is empty
+        if (!value) {
+            return;
+        }
+        // When a new value is received, it could be out of band from the control of this calendar.
+        // For example, a shortcut could be selected, or clear could be pressed. In either case, selection
+        // should be reset so that the new `value` can be displayed fully.
+        setSelectionRange(null);
+        // Check if `value` is still within view of our calendar
+        const viewInterval = Interval.fromDateTimes(leftCalendarDate.startOf("month"), rightCalendarDate.endOf("month"));
+        const isValueInRangeOfCalendar = viewInterval.contains(value[0]) || viewInterval.contains(value[1]);
+        if (!isValueInRangeOfCalendar) {
+            // Reset state the calendar view entirely
+            setSelectionRange(null);
+            setCalendarSteps(0);
+            setLeftCalendarDate(isSmallUp ? getLeftCalendarDate(value[0], max) : value[0]);
+            setForceRenderIncrement((c) => c + 1);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- Only re-run this hook when value changes
+    }, [value]);
+    // Detect height changes when new calendars are rendered
+    useEffect(() => {
+        waitForAnimationFrame(() => {
+            const container = calendarContainerRef.current;
+            if (!container) {
+                return;
+            }
+            let maxHeight = -Infinity;
+            // Find the tallest calendar
+            container.querySelectorAll("[data-calendar]")?.forEach((element) => {
+                // NOTE: clientHeight does not respect the scale() that popover uses to animate in, which is what we want
+                // We want to know the full height of the element, without any transform applied.
+                const height = element.clientHeight;
+                // Ignore calendars that are exiting
+                if (element.closest("[data-exiting")) {
+                    return;
+                }
+                if (height > maxHeight) {
+                    maxHeight = height;
+                }
+            });
+            container.style.height = `${maxHeight}px`;
+            // Don't animate the initial height.
+            // This is relevant when the calendar opens to a larger size than the default.
+            if (!container.style.transition) {
+                waitForAnimationFrame(() => {
+                    container.style.transition = `height 0.25s var(--cubic-move)`;
+                });
+            }
+        });
+    }, [leftCalendarDate]);
+    return (_jsx("div", { className: s.CalendarWrapper, children: _jsxs("div", { ref: calendarContainerRef, className: s.CalendarContainer, onMouseLeave: handleCalendarMouseLeave, children: [_jsx("div", { className: s.Previous, children: _jsx(Button, { variant: "ghost", color: "secondary", size: "sm", pill: false, gutterSize: "2xs", iconSize: "sm", onClick: handlePrevious, disabled: !canGoBack, children: _jsx(ChevronLeft, {}) }) }), _jsx("div", { className: s.Next, children: _jsx(Button, { variant: "ghost", color: "secondary", size: "sm", pill: false, gutterSize: "2xs", iconSize: "sm", onClick: handleNext, disabled: !canGoForward, children: _jsx(ChevronRight, {}) }) }), _jsx("div", { className: s.CalendarRange, style: {
+                        transform: `translate(${calendarSteps * -1 * STEP_DISTANCE_PX}px, 0)`,
+                    }, children: _jsxs(TransitionGroup, { enterDuration: 400, exitDuration: 400, children: [_jsx(CalendarView, { stepPosition: calendarSteps, date: leftCalendarDate, selectedDates: selectedDisplayValue, min: min, max: max, selectionStart: selectionRange?.[0], maxRangeDays: maxRangeDays, isSelecting: !!selectionRange, onDateSelect: handleDateSelect, onDateMouseEnter: handleDateMouseEnter }, leftCalendarDate.toLocaleString({
+                                month: "long",
+                                year: "numeric",
+                            })), isSmallUp && (_jsx(CalendarView, { stepPosition: calendarSteps + 1, date: rightCalendarDate, selectedDates: selectedDisplayValue, min: min, max: max, selectionStart: selectionRange?.[0], maxRangeDays: maxRangeDays, isSelecting: !!selectionRange, onDateSelect: handleDateSelect, onDateMouseEnter: handleDateMouseEnter }, rightCalendarDate.toLocaleString({
+                                month: "long",
+                                year: "numeric",
+                            })))] }) })] }) }, `stable-view-${forceRenderIncrement}`));
+};
+const daysOfTheWeekLabels = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+const CalendarView = ({ date, selectedDates, min, max, selectionStart, maxRangeDays, isSelecting, onDateSelect, onDateMouseEnter, stepPosition, }) => {
+    // Lock position on mount and don't respond to changes
+    const [position] = useState(stepPosition);
+    const { startOfMonth, weeks, enabledInterval } = useMemo(() => {
+        const monthStart = date.startOf("month");
+        const endOfMonth = date.endOf("month");
+        const daysBeforeMonthStart = monthStart.weekday % 7;
+        const blankDays = new Array(daysBeforeMonthStart).fill(null);
+        const daysInMonth = getDaysOfMonth(monthStart);
+        const calendarCells = [...blankDays, ...daysInMonth];
+        const enabledDateInterval = Interval.fromDateTimes(min || monthStart, max || endOfMonth);
+        return {
+            startOfMonth: monthStart,
+            endOfMonth,
+            weeks: chunkIntoWeeks(calendarCells, 7),
+            enabledInterval: enabledDateInterval,
+        };
+    }, [date, min, max]);
+    const [selectedStart, selectedEnd] = selectedDates || [];
+    const rangeEndLimit = selectionStart && maxRangeDays != null
+        ? selectionStart.plus({ days: maxRangeDays - 1 })
+        : undefined;
+    const selectedInterval = useMemo(() => {
+        if (!selectedStart || !selectedEnd) {
+            return null;
+        }
+        return Interval.fromDateTimes(selectedStart.startOf("day"), selectedEnd.endOf("day"));
+    }, [selectedStart, selectedEnd]);
+    return (_jsxs("div", { className: s.Calendar, style: { left: position * STEP_DISTANCE_PX }, "data-calendar": true, children: [_jsxs("p", { className: s.MonthLabel, children: [startOfMonth.monthLong, " ", startOfMonth.year] }), _jsx("div", { className: s.Week, children: daysOfTheWeekLabels.map((day) => (_jsx("div", { className: s.DayLabel, children: day }, day))) }), weeks.map((week, weekIndex) => (_jsx("div", { className: s.Week, children: week.map((d, dayIndex) => {
+                    if (!d) {
+                        return _jsx("div", { className: s.Day }, `${weekIndex}-${dayIndex}`);
+                    }
+                    // Check if 'day' is within selected range
+                    const enabled = enabledInterval.contains(d) &&
+                        !(isSelecting && rangeEndLimit && isAfter(d, rangeEndLimit));
+                    const isStart = enabled && selectedStart && isSameDay(d, selectedStart);
+                    const isEnd = enabled && selectedEnd && isSameDay(d, selectedEnd);
+                    const hasRange = selectedStart && selectedEnd && !isSameDay(selectedStart, selectedEnd);
+                    const isInRange = hasRange && selectedInterval?.contains(d);
+                    const dayIsToday = isToday(d);
+                    const isFirstRangeTrail = d.day === 1 &&
+                        // Trail doesn't make sense to display at the start of the week (Monday)
+                        d.weekday !== 7 &&
+                        isInRange &&
+                        !isStart;
+                    const isLastRangeTrail = d.day === d.daysInMonth &&
+                        // Trail doesn't make sense to display at the end of the week (Saturday)
+                        d.weekday !== 6 &&
+                        isInRange &&
+                        !isEnd;
+                    return (_jsx("div", { className: s.Day, "data-is-start": isStart ? "" : undefined, "data-is-end": isEnd ? "" : undefined, "data-is-in-range": isInRange ? "" : undefined, "data-is-first-range-trail": isFirstRangeTrail ? "" : undefined, "data-is-last-range-trail": isLastRangeTrail ? "" : undefined, children: _jsxs("button", { className: s.InteractiveDay, disabled: !enabled, onClick: () => d && onDateSelect?.(d), onMouseEnter: () => d && onDateMouseEnter?.(d), children: [d.day, dayIsToday && _jsx("span", { className: s.TodayDot })] }) }, dayIndex));
+                }) }, weekIndex)))] }));
+};
+export const DateRangeShortcuts = ({ shortcuts }) => {
+    const isMediumUp = useBreakpoint("md");
+    const { value, onChangeRef } = useDateRangeContext();
+    if (!isMediumUp || !shortcuts?.length) {
+        return null;
+    }
+    return (_jsx("div", { className: s.Shortcuts, children: shortcuts.map((shortcut) => {
+            const { label, getDateRange } = shortcut;
+            const range = getDateRange();
+            const [start, end] = range;
+            const isActive = !!value && isSameDay(value[0], start) && isSameDay(value[1], end);
+            return (_jsxs(Button, { className: "mb-1", variant: "ghost", color: "primary", pill: false, size: "md", iconSize: "sm", block: true, selected: isActive, onClick: () => onChangeRef.current(range, shortcut), children: [_jsx("span", { className: s.ButtonText, children: label }), isActive && _jsx(Check, {})] }, label));
+        }) }));
+};
+const getLeftCalendarDate = (targetDate, maxDate) => {
+    if (!maxDate) {
+        return targetDate;
+    }
+    return isBefore(targetDate.endOf("month"), maxDate) ? targetDate : targetDate.minus({ months: 1 });
+};
+//# sourceMappingURL=Calendar.js.map

package/dist/es/components/DateRangePicker/Calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../../src/components/DateRangePicker/Calendar.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport { DateTime, Interval } from \"luxon\"\nimport { useEffect, useMemo, useRef, useState } from \"react\"\nimport { useBreakpoint } from \"../../hooks/useBreakpoints\"\nimport {\n  chunkIntoWeeks,\n  getDaysOfMonth,\n  isAfter,\n  isBefore,\n  isSameDay,\n  isToday,\n} from \"../../lib/dateUtils\"\nimport { waitForAnimationFrame } from \"../../lib/helpers\"\nimport { Button } from \"../Button\"\nimport { Check, ChevronLeft, ChevronRight } from \"../Icon\"\nimport { TransitionGroup } from \"../Transition\"\nimport s from \"./Calendar.module.css\"\nimport { useDateRangeContext } from \"./context\"\nimport { type DateRange, type DateRangeShortcut } from \"./types\"\n\nconst CALENDAR_WIDTH_PX = 210\nconst CALENDAR_GAP_PX = 32\nconst STEP_DISTANCE_PX = CALENDAR_WIDTH_PX + CALENDAR_GAP_PX\n\nexport const DateRangeCalendar = () => {\n  const { value, min, max, maxRangeDays, onChangeRef } = useDateRangeContext()\n  const isSmallUp = useBreakpoint(\"sm\")\n  const calendarContainerRef = useRef<HTMLDivElement | null>(null)\n  const [selectionRange, setSelectionRange] = useState<DateRange | null>(null)\n  const [calendarSteps, setCalendarSteps] = useState<number>(0)\n  const [forceRenderIncrement, setForceRenderIncrement] = useState<number>(0)\n  const [leftCalendarDate, setLeftCalendarDate] = useState<DateTime>(() =>\n    isSmallUp\n      ? getLeftCalendarDate(value?.[0] ?? DateTime.now(), max)\n      : value?.[0] ?? DateTime.now(),\n  )\n\n  const rightCalendarDate = isSmallUp\n    ? leftCalendarDate.plus({ months: 1 }).startOf(\"month\")\n    : leftCalendarDate.startOf(\"month\")\n\n  const canGoBack = !min || isBefore(min, leftCalendarDate.startOf(\"month\"))\n  const canGoForward = !max || isBefore(rightCalendarDate.endOf(\"month\"), max)\n\n  const handleNext = () => {\n    setCalendarSteps((c) => c + 1)\n    setLeftCalendarDate((dt) => dt.plus({ months: 1 }))\n  }\n\n  const handlePrevious = () => {\n    setCalendarSteps((c) => c - 1)\n    setLeftCalendarDate((dt) => dt.minus({ months: 1 }))\n  }\n\n  const handleDateSelect = (selectedDate: DateTime) => {\n    if (!selectionRange) {\n      setSelectionRange([selectedDate, selectedDate])\n      return\n    }\n\n    const [currentSelectionStartDate] = selectionRange\n\n    // Selecting a date before the current selected start date moves the start date\n    // but does not resolve the selection\n    if (isBefore(selectedDate, currentSelectionStartDate)) {\n      setSelectionRange([selectedDate, selectedDate])\n      return\n    }\n\n    // Resolve the selection by emitting the value and clearing selection\n    onChangeRef.current([currentSelectionStartDate, selectedDate])\n    setSelectionRange(null)\n  }\n\n  const handleDateMouseEnter = (hoveredDate: DateTime) => {\n    // If we're not actively selecting, no-op\n    if (!selectionRange) {\n      return\n    }\n\n    setSelectionRange((currentSelectionRange) => {\n      // impossible due to the check above\n      if (!currentSelectionRange) {\n        return currentSelectionRange\n      }\n\n      const [currentStartDate] = currentSelectionRange\n\n      // When hovering a date before the current date, don't change the selection range\n      if (isBefore(hoveredDate, currentStartDate)) {\n        return [currentStartDate, currentStartDate]\n      }\n\n      return [currentStartDate, hoveredDate]\n    })\n  }\n\n  const handleCalendarMouseLeave = () => {\n    // If we're not actively selecting, no-op\n    if (!selectionRange) {\n      return\n    }\n\n    setSelectionRange((currentSelectionRange) => {\n      if (!currentSelectionRange) {\n        return currentSelectionRange\n      }\n\n      // Reset the end selection\n      const [currentStartDate] = currentSelectionRange\n      return [currentStartDate, currentStartDate]\n    })\n  }\n\n  const selectedDisplayValue = selectionRange || value\n\n  // Force re-renders when `value` changes out of brand from direct user-selection\n  useEffect(() => {\n    // No-op when value is empty\n    if (!value) {\n      return\n    }\n\n    // When a new value is received, it could be out of band from the control of this calendar.\n    // For example, a shortcut could be selected, or clear could be pressed. In either case, selection\n    // should be reset so that the new `value` can be displayed fully.\n    setSelectionRange(null)\n\n    // Check if `value` is still within view of our calendar\n    const viewInterval = Interval.fromDateTimes(\n      leftCalendarDate.startOf(\"month\"),\n      rightCalendarDate.endOf(\"month\"),\n    )\n    const isValueInRangeOfCalendar =\n      viewInterval.contains(value[0]) || viewInterval.contains(value[1])\n    if (!isValueInRangeOfCalendar) {\n      // Reset state the calendar view entirely\n      setSelectionRange(null)\n      setCalendarSteps(0)\n      setLeftCalendarDate(isSmallUp ? getLeftCalendarDate(value[0], max) : value[0])\n      setForceRenderIncrement((c) => c + 1)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- Only re-run this hook when value changes\n  }, [value])\n\n  // Detect height changes when new calendars are rendered\n  useEffect(() => {\n    waitForAnimationFrame(() => {\n      const container = calendarContainerRef.current\n\n      if (!container) {\n        return\n      }\n\n      let maxHeight = -Infinity\n\n      // Find the tallest calendar\n      container.querySelectorAll(\"[data-calendar]\")?.forEach((element) => {\n        // NOTE: clientHeight does not respect the scale() that popover uses to animate in, which is what we want\n        // We want to know the full height of the element, without any transform applied.\n        const height = element.clientHeight\n\n        // Ignore calendars that are exiting\n        if (element.closest(\"[data-exiting\")) {\n          return\n        }\n\n        if (height > maxHeight) {\n          maxHeight = height\n        }\n      })\n\n      container.style.height = `${maxHeight}px`\n\n      // Don't animate the initial height.\n      // This is relevant when the calendar opens to a larger size than the default.\n      if (!container.style.transition) {\n        waitForAnimationFrame(() => {\n          container.style.transition = `height 0.25s var(--cubic-move)`\n        })\n      }\n    })\n  }, [leftCalendarDate])\n\n  return (\n    <div className={s.CalendarWrapper} key={`stable-view-${forceRenderIncrement}`}>\n      <div\n        ref={calendarContainerRef}\n        className={s.CalendarContainer}\n        onMouseLeave={handleCalendarMouseLeave}\n      >\n        <div className={s.Previous}>\n          <Button\n            variant=\"ghost\"\n            color=\"secondary\"\n            size=\"sm\"\n            pill={false}\n            gutterSize=\"2xs\"\n            iconSize=\"sm\"\n            onClick={handlePrevious}\n            disabled={!canGoBack}\n          >\n            <ChevronLeft />\n          </Button>\n        </div>\n        <div className={s.Next}>\n          <Button\n            variant=\"ghost\"\n            color=\"secondary\"\n            size=\"sm\"\n            pill={false}\n            gutterSize=\"2xs\"\n            iconSize=\"sm\"\n            onClick={handleNext}\n            disabled={!canGoForward}\n          >\n            <ChevronRight />\n          </Button>\n        </div>\n        <div\n          className={s.CalendarRange}\n          style={{\n            transform: `translate(${calendarSteps * -1 * STEP_DISTANCE_PX}px, 0)`,\n          }}\n        >\n          <TransitionGroup enterDuration={400} exitDuration={400}>\n            <CalendarView\n              key={leftCalendarDate.toLocaleString({\n                month: \"long\",\n                year: \"numeric\",\n              })}\n              stepPosition={calendarSteps}\n              date={leftCalendarDate}\n              selectedDates={selectedDisplayValue}\n              min={min}\n              max={max}\n              selectionStart={selectionRange?.[0]}\n              maxRangeDays={maxRangeDays}\n              isSelecting={!!selectionRange}\n              onDateSelect={handleDateSelect}\n              onDateMouseEnter={handleDateMouseEnter}\n            />\n            {isSmallUp && (\n              <CalendarView\n                key={rightCalendarDate.toLocaleString({\n                  month: \"long\",\n                  year: \"numeric\",\n                })}\n                stepPosition={calendarSteps + 1}\n                date={rightCalendarDate}\n                selectedDates={selectedDisplayValue}\n                min={min}\n                max={max}\n                selectionStart={selectionRange?.[0]}\n                maxRangeDays={maxRangeDays}\n                isSelecting={!!selectionRange}\n                onDateSelect={handleDateSelect}\n                onDateMouseEnter={handleDateMouseEnter}\n              />\n            )}\n          </TransitionGroup>\n        </div>\n      </div>\n    </div>\n  )\n}\n\ntype CalendarViewProps = {\n  // Can be any day within the given month that the calendar should render for\n  date: DateTime\n  selectedDates?: DateRange | null\n  onDateSelect?: (dt: DateTime) => void\n  onDateMouseEnter?: (dt: DateTime) => void\n  min?: DateTime\n  max?: DateTime\n  selectionStart?: DateTime | null\n  maxRangeDays?: number\n  isSelecting?: boolean\n  stepPosition: number\n}\n\nconst daysOfTheWeekLabels = [\"Su\", \"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\"]\n\nconst CalendarView = ({\n  date,\n  selectedDates,\n  min,\n  max,\n  selectionStart,\n  maxRangeDays,\n  isSelecting,\n  onDateSelect,\n  onDateMouseEnter,\n  stepPosition,\n}: CalendarViewProps) => {\n  // Lock position on mount and don't respond to changes\n  const [position] = useState(stepPosition)\n  const { startOfMonth, weeks, enabledInterval } = useMemo(() => {\n    const monthStart = date.startOf(\"month\")\n    const endOfMonth = date.endOf(\"month\")\n\n    const daysBeforeMonthStart = monthStart.weekday % 7\n    const blankDays = new Array(daysBeforeMonthStart).fill(null)\n    const daysInMonth = getDaysOfMonth(monthStart)\n    const calendarCells = [...blankDays, ...daysInMonth]\n\n    const enabledDateInterval = Interval.fromDateTimes(min || monthStart, max || endOfMonth)\n\n    return {\n      startOfMonth: monthStart,\n      endOfMonth,\n      weeks: chunkIntoWeeks(calendarCells, 7),\n      enabledInterval: enabledDateInterval,\n    }\n  }, [date, min, max])\n\n  const [selectedStart, selectedEnd] = selectedDates || []\n  const rangeEndLimit =\n    selectionStart && maxRangeDays != null\n      ? selectionStart.plus({ days: maxRangeDays - 1 })\n      : undefined\n\n  const selectedInterval = useMemo<Interval | null>(() => {\n    if (!selectedStart || !selectedEnd) {\n      return null\n    }\n\n    return Interval.fromDateTimes(selectedStart.startOf(\"day\"), selectedEnd.endOf(\"day\"))\n  }, [selectedStart, selectedEnd])\n\n  return (\n    <div className={s.Calendar} style={{ left: position * STEP_DISTANCE_PX }} data-calendar>\n      <p className={s.MonthLabel}>\n        {startOfMonth.monthLong} {startOfMonth.year}\n      </p>\n      <div className={s.Week}>\n        {daysOfTheWeekLabels.map((day) => (\n          <div key={day} className={s.DayLabel}>\n            {day}\n          </div>\n        ))}\n      </div>\n      {weeks.map((week, weekIndex) => (\n        <div className={s.Week} key={weekIndex}>\n          {week.map((d, dayIndex) => {\n            if (!d) {\n              return <div className={s.Day} key={`${weekIndex}-${dayIndex}`} />\n            }\n\n            // Check if 'day' is within selected range\n            const enabled =\n              enabledInterval.contains(d) &&\n              !(isSelecting && rangeEndLimit && isAfter(d, rangeEndLimit))\n            const isStart = enabled && selectedStart && isSameDay(d, selectedStart)\n            const isEnd = enabled && selectedEnd && isSameDay(d, selectedEnd)\n            const hasRange = selectedStart && selectedEnd && !isSameDay(selectedStart, selectedEnd)\n            const isInRange = hasRange && selectedInterval?.contains(d)\n            const dayIsToday = isToday(d)\n            const isFirstRangeTrail =\n              d.day === 1 &&\n              // Trail doesn't make sense to display at the start of the week (Monday)\n              d.weekday !== 7 &&\n              isInRange &&\n              !isStart\n            const isLastRangeTrail =\n              d.day === d.daysInMonth &&\n              // Trail doesn't make sense to display at the end of the week (Saturday)\n              d.weekday !== 6 &&\n              isInRange &&\n              !isEnd\n\n            return (\n              <div\n                className={s.Day}\n                key={dayIndex}\n                data-is-start={isStart ? \"\" : undefined}\n                data-is-end={isEnd ? \"\" : undefined}\n                data-is-in-range={isInRange ? \"\" : undefined}\n                data-is-first-range-trail={isFirstRangeTrail ? \"\" : undefined}\n                data-is-last-range-trail={isLastRangeTrail ? \"\" : undefined}\n              >\n                <button\n                  className={s.InteractiveDay}\n                  disabled={!enabled}\n                  onClick={() => d && onDateSelect?.(d)}\n                  onMouseEnter={() => d && onDateMouseEnter?.(d)}\n                >\n                  {d.day}\n                  {dayIsToday && <span className={s.TodayDot} />}\n                </button>\n              </div>\n            )\n          })}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport const DateRangeShortcuts = ({ shortcuts }: { shortcuts?: DateRangeShortcut[] }) => {\n  const isMediumUp = useBreakpoint(\"md\")\n  const { value, onChangeRef } = useDateRangeContext()\n\n  if (!isMediumUp || !shortcuts?.length) {\n    return null\n  }\n\n  return (\n    <div className={s.Shortcuts}>\n      {shortcuts.map((shortcut) => {\n        const { label, getDateRange } = shortcut\n        const range = getDateRange()\n        const [start, end] = range\n        const isActive = !!value && isSameDay(value[0], start) && isSameDay(value[1], end)\n\n        return (\n          <Button\n            key={label}\n            className=\"mb-1\"\n            variant=\"ghost\"\n            color=\"primary\"\n            pill={false}\n            size=\"md\"\n            iconSize=\"sm\"\n            block\n            selected={isActive}\n            onClick={() => onChangeRef.current(range, shortcut)}\n          >\n            <span className={s.ButtonText}>{label}</span>\n            {isActive && <Check />}\n          </Button>\n        )\n      })}\n    </div>\n  )\n}\n\nconst getLeftCalendarDate = (targetDate: DateTime, maxDate?: DateTime) => {\n  if (!maxDate) {\n    return targetDate\n  }\n\n  return isBefore(targetDate.endOf(\"month\"), maxDate) ? targetDate : targetDate.minus({ months: 1 })\n}\n"]}