@gridui/calendar 0.0.0-stage → 0.0.0

package/dist/index.js

@@ -0,0 +1,943 @@
+// src/calendar/style.ts
+import { cva } from "class-variance-authority";
+var calendarStyles = cva("gridui-calendar min-w-0 bg-background text-foreground", {
+  variants: {
+    frame: {
+      none: "",
+      outline: "border border-solid border-border"
+    }
+  },
+  defaultVariants: { frame: "none" }
+});
+
+// src/calendar/calendar.tsx
+import { cn } from "@gridui/style-utils";
+import { jsx } from "react/jsx-runtime";
+var Calendar = (props) => {
+  const { frame, className, ...restProps } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...restProps,
+      className: cn(calendarStyles({ frame }), className)
+    }
+  );
+};
+
+// src/calendar-event/style.ts
+import { cva as cva2 } from "class-variance-authority";
+var eventStyles = cva2("gridui-calendar-event gridui-hover-surface gridui-focus-contained box-border min-w-0 w-full cursor-pointer text-left type-supporting disabled:cursor-not-allowed disabled:opacity-50", {
+  variants: {
+    appearance: {
+      block: "gridui-calendar-event-block",
+      compact: "gridui-calendar-event-compact"
+    }
+  },
+  defaultVariants: {
+    appearance: "block"
+  }
+});
+
+// src/calendar-event/calendar-event.tsx
+import { cn as cn2 } from "@gridui/style-utils";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var CalendarEvent = (props) => {
+  const { colors, appearance, selected, type = "button", className, style, ...restProps } = props;
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      ...restProps,
+      type,
+      "aria-pressed": selected,
+      "data-selected": selected || void 0,
+      className: cn2(eventStyles({
+        appearance
+      }), className),
+      style: {
+        "--gridui-calendar-event-accent": colors?.accent,
+        "--gridui-calendar-event-background": colors?.background,
+        "--gridui-calendar-event-foreground": colors?.foreground,
+        ...style
+      }
+    }
+  );
+};
+
+// src/shared/date.ts
+var parseDate = (value) => {
+  const date = /* @__PURE__ */ new Date(`${value}T00:00:00Z`);
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value) || !Number.isFinite(date.getTime()) || date.toISOString().slice(0, 10) !== value) {
+    throw new RangeError(`Invalid calendar date: ${value}`);
+  }
+  return date;
+};
+var addDays = (value, amount) => {
+  const date = parseDate(value);
+  date.setUTCDate(date.getUTCDate() + amount);
+  return date.toISOString().slice(0, 10);
+};
+var addMonths = (value, amount) => {
+  const date = parseDate(value);
+  const day = date.getUTCDate();
+  date.setUTCDate(1);
+  date.setUTCMonth(date.getUTCMonth() + amount);
+  const last = new Date(date);
+  last.setUTCMonth(last.getUTCMonth() + 1, 0);
+  date.setUTCDate(Math.min(day, last.getUTCDate()));
+  return date.toISOString().slice(0, 10);
+};
+var startOfWeek = (value, weekStartsOn) => {
+  if (!Number.isInteger(weekStartsOn) || weekStartsOn < 0 || weekStartsOn > 6) {
+    throw new RangeError("weekStartsOn must be an integer from 0 to 6.");
+  }
+  return addDays(value, -((parseDate(value).getUTCDay() - weekStartsOn + 7) % 7));
+};
+var formatDate = (value, locale, options) => {
+  return new Intl.DateTimeFormat(locale, {
+    ...options,
+    timeZone: "UTC"
+  }).format(parseDate(value));
+};
+var formatMinute = (minute) => {
+  return `${String(Math.floor(minute / 60)).padStart(2, "0")}:${String(minute % 60).padStart(2, "0")}`;
+};
+
+// src/shared/events.ts
+var parseTime = (value, allDay) => {
+  if (allDay) {
+    return parseDate(value).getTime() / 6e4;
+  }
+  if (!/^\d{4}-\d{2}-\d{2}T(?:[01]\d|2[0-3]):[0-5]\d$/.test(value)) {
+    throw new RangeError(`Invalid calendar time: ${value}`);
+  }
+  return parseDate(value.slice(0, 10)).getTime() / 6e4 + Number(value.slice(11, 13)) * 60 + Number(value.slice(14, 16));
+};
+var validateEvents = (events) => {
+  const ids = /* @__PURE__ */ new Set();
+  for (const event of events) {
+    if (!event.id || ids.has(event.id)) {
+      throw new RangeError("Calendar event IDs must be nonempty and unique.");
+    }
+    ids.add(event.id);
+    if (parseTime(event.end, event.allDay === true) <= parseTime(event.start, event.allDay === true)) {
+      throw new RangeError(`Calendar event ${event.id} must end after it starts.`);
+    }
+  }
+};
+var segmentsForDate = (events, date) => {
+  const start = parseDate(date).getTime() / 6e4;
+  const end = parseDate(addDays(date, 1)).getTime() / 6e4;
+  return events.flatMap((event) => {
+    const from = parseTime(event.start, event.allDay === true);
+    const to = parseTime(event.end, event.allDay === true);
+    if (from >= end || to <= start) {
+      return [];
+    }
+    return [
+      {
+        event,
+        date,
+        start: Math.max(from - start, 0),
+        end: Math.min(to - start, 1440),
+        continuesBefore: from < start,
+        continuesAfter: to > end
+      }
+    ];
+  }).sort((a, b) => {
+    return Number(b.event.allDay ?? false) - Number(a.event.allDay ?? false) || a.start - b.start || b.end - a.end || a.event.id.localeCompare(b.event.id);
+  });
+};
+var positionEvents = (segments, start, end) => {
+  const visible = segments.filter((segment) => {
+    return !segment.event.allDay && segment.start < end && segment.end > start;
+  }).map((segment) => {
+    return {
+      ...segment,
+      start: Math.max(segment.start, start),
+      end: Math.min(segment.end, end)
+    };
+  }).sort((a, b) => {
+    return a.start - b.start || b.end - a.end || a.event.id.localeCompare(b.event.id);
+  });
+  const groups = [];
+  for (const segment of visible) {
+    let group = groups.at(-1);
+    if (!group || segment.start >= group.end) {
+      group = {
+        end: segment.end,
+        segments: []
+      };
+      groups.push(group);
+    }
+    group.end = Math.max(group.end, segment.end);
+    group.segments.push(segment);
+  }
+  return groups.flatMap((group) => {
+    const ends = [];
+    const positioned = group.segments.map((segment) => {
+      let column = ends.findIndex((columnEnd) => {
+        return columnEnd <= segment.start;
+      });
+      if (column < 0) {
+        column = ends.length;
+      }
+      ends[column] = segment.end;
+      return {
+        ...segment,
+        column
+      };
+    });
+    return positioned.map((segment) => {
+      return {
+        ...segment,
+        columns: ends.length
+      };
+    });
+  });
+};
+
+// src/calendar-agenda-view/calendar-agenda-view.tsx
+import { cn as cn3 } from "@gridui/style-utils";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var CalendarAgendaView = (props) => {
+  const {
+    date,
+    events,
+    locale = "en-US",
+    today,
+    days = 7,
+    empty = "No events",
+    allDayLabel = "All day",
+    formatTime = formatMinute,
+    selectedEventId,
+    onEventSelect,
+    renderEvent,
+    getEventLabel,
+    className,
+    ...restProps
+  } = props;
+  validateEvents(events);
+  if (!Number.isInteger(days) || days < 1 || days > 366) {
+    throw new RangeError("CalendarAgendaView days must be an integer from 1 to 366.");
+  }
+  const groups = Array.from({ length: days }, (_, index) => {
+    const day = addDays(date, index);
+    return {
+      day,
+      segments: segmentsForDate(events, day)
+    };
+  }).filter((group) => {
+    return group.segments.length > 0;
+  });
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ...restProps,
+      className: cn3("gridui-calendar-agenda", className),
+      role: restProps.role ?? "region",
+      "aria-label": restProps["aria-label"] ?? formatDate(date, locale, { dateStyle: "full" }),
+      children: groups.length === 0 ? empty : groups.map(({ day, segments }) => {
+        return /* @__PURE__ */ jsxs(
+          "section",
+          {
+            className: "gridui-calendar-agenda-day",
+            "aria-label": formatDate(day, locale, { dateStyle: "full" }),
+            children: [
+              /* @__PURE__ */ jsx3(
+                "h3",
+                {
+                  className: "m-0 type-ui",
+                  "aria-current": day === today ? "date" : void 0,
+                  children: formatDate(day, locale, {
+                    month: "short",
+                    day: "numeric",
+                    weekday: "short"
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "ol",
+                {
+                  className: "gridui-calendar-agenda-events",
+                  children: segments.map((segment) => {
+                    const context = {
+                      date: day,
+                      view: "agenda",
+                      continuesBefore: segment.continuesBefore,
+                      continuesAfter: segment.continuesAfter
+                    };
+                    return /* @__PURE__ */ jsx3(
+                      "li",
+                      {
+                        children: /* @__PURE__ */ jsx3(
+                          CalendarEvent,
+                          {
+                            colors: segment.event.colors,
+                            selected: selectedEventId === segment.event.id,
+                            disabled: segment.event.disabled,
+                            className: "gridui-calendar-agenda-event",
+                            "aria-label": getEventLabel?.(segment.event, context) ?? `${segment.event.title}, ${segment.event.start} \u2013 ${segment.event.end}`,
+                            onClick: () => {
+                              onEventSelect?.(segment.event, context);
+                            },
+                            children: renderEvent?.(segment.event, context) ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+                              /* @__PURE__ */ jsx3(
+                                "span",
+                                {
+                                  className: "type-caption tabular-nums",
+                                  children: segment.event.allDay ? allDayLabel : `${formatTime(segment.start)}\u2013${formatTime(segment.end)}`
+                                }
+                              ),
+                              /* @__PURE__ */ jsx3(
+                                "span",
+                                {
+                                  className: "wrap-anywhere",
+                                  children: segment.event.title
+                                }
+                              )
+                            ] })
+                          }
+                        )
+                      },
+                      segment.event.id
+                    );
+                  })
+                }
+              )
+            ]
+          },
+          day
+        );
+      })
+    }
+  );
+};
+
+// src/shared/time-grid.tsx
+import { cn as cn4 } from "@gridui/style-utils";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var TimeGrid = (props) => {
+  const {
+    columns,
+    view,
+    date,
+    events,
+    locale = "en-US",
+    today,
+    selectedEventId,
+    onEventSelect,
+    renderEvent,
+    getEventLabel,
+    startHour = 8,
+    endHour = 18,
+    hourHeight = 56,
+    allDayLabel = "All day",
+    formatTime = formatMinute,
+    onTimeSelect,
+    getTimeLabel,
+    className,
+    style,
+    ...restProps
+  } = props;
+  validateEvents(events);
+  if (!columns.length || new Set(columns.map((column) => {
+    return column.id;
+  })).size !== columns.length) {
+    throw new RangeError("Calendar columns must have unique IDs and cannot be empty.");
+  }
+  if (!Number.isInteger(startHour) || !Number.isInteger(endHour) || startHour < 0 || endHour > 24 || startHour >= endHour || !Number.isFinite(hourHeight) || hourHeight <= 0) {
+    throw new RangeError("Calendar hours must form an ordered range within 0\u201324; hourHeight must be positive.");
+  }
+  const hours = Array.from({ length: endHour - startHour }, (_, index) => {
+    return startHour + index;
+  });
+  const lanes = columns.map((column) => {
+    const segments = segmentsForDate(events, column.date).filter((segment) => {
+      return column.resourceId === void 0 || segment.event.resourceId === column.resourceId;
+    });
+    return {
+      column,
+      segments
+    };
+  });
+  const context = (segment) => {
+    return {
+      date: segment.date,
+      view,
+      continuesBefore: segment.continuesBefore,
+      continuesAfter: segment.continuesAfter
+    };
+  };
+  const label = (segment) => {
+    return getEventLabel?.(segment.event, context(segment)) ?? `${segment.event.title}, ${segment.event.start} \u2013 ${segment.event.end}`;
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ...restProps,
+      role: restProps.role ?? "region",
+      "aria-label": restProps["aria-label"] ?? formatDate(date, locale, { dateStyle: "full" }),
+      className: cn4("gridui-calendar-time-grid", className),
+      style: {
+        "--gridui-calendar-columns": columns.length,
+        "--gridui-calendar-hour-height": `${hourHeight}px`,
+        "--gridui-calendar-hours": hours.length,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            className: "gridui-calendar-time-corner"
+          }
+        ),
+        columns.map((column) => {
+          return /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              className: "gridui-calendar-time-heading",
+              "data-today": column.date === today || void 0,
+              children: [
+                /* @__PURE__ */ jsx4(
+                  "div",
+                  {
+                    className: "type-ui",
+                    children: column.label
+                  }
+                ),
+                column.description !== void 0 && /* @__PURE__ */ jsx4(
+                  "div",
+                  {
+                    className: "type-caption text-muted",
+                    children: column.description
+                  }
+                )
+              ]
+            },
+            column.id
+          );
+        }),
+        lanes.some((lane) => {
+          return lane.segments.some((segment) => {
+            return segment.event.allDay;
+          });
+        }) && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: "gridui-calendar-all-day-label type-caption text-muted",
+              children: allDayLabel
+            }
+          ),
+          lanes.map(({ column, segments }) => {
+            return /* @__PURE__ */ jsx4(
+              "div",
+              {
+                className: "gridui-calendar-all-day",
+                children: segments.filter((segment) => {
+                  return segment.event.allDay;
+                }).map((segment) => {
+                  return /* @__PURE__ */ jsx4(
+                    CalendarEvent,
+                    {
+                      colors: segment.event.colors,
+                      appearance: "compact",
+                      selected: selectedEventId === segment.event.id,
+                      disabled: segment.event.disabled,
+                      "aria-label": label(segment),
+                      onClick: () => {
+                        onEventSelect?.(segment.event, context(segment));
+                      },
+                      children: renderEvent?.(segment.event, context(segment)) ?? segment.event.title
+                    },
+                    segment.event.id
+                  );
+                })
+              },
+              column.id
+            );
+          })
+        ] }),
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            className: "gridui-calendar-time-axis",
+            "aria-hidden": "true",
+            children: hours.map((hour) => {
+              return /* @__PURE__ */ jsx4(
+                "span",
+                {
+                  className: "type-caption text-muted tabular-nums",
+                  children: formatTime(hour * 60)
+                },
+                hour
+              );
+            })
+          }
+        ),
+        lanes.map(({ column, segments }) => {
+          return /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              className: "gridui-calendar-time-lane",
+              children: [
+                onTimeSelect && hours.map((hour) => {
+                  const selection = {
+                    date: column.date,
+                    minute: hour * 60,
+                    ...column.resourceId === void 0 ? {} : { resourceId: column.resourceId }
+                  };
+                  return /* @__PURE__ */ jsx4(
+                    "button",
+                    {
+                      type: "button",
+                      className: "gridui-calendar-time-slot gridui-focus-contained gridui-hover-surface",
+                      "aria-label": getTimeLabel?.(selection) ?? `${column.date} ${formatTime(hour * 60)}${column.resourceId ? `, ${column.resourceId}` : ""}`,
+                      onClick: () => {
+                        onTimeSelect(selection);
+                      }
+                    },
+                    hour
+                  );
+                }),
+                positionEvents(segments, startHour * 60, endHour * 60).map((segment) => {
+                  const range = (endHour - startHour) * 60;
+                  return /* @__PURE__ */ jsx4(
+                    CalendarEvent,
+                    {
+                      colors: segment.event.colors,
+                      selected: selectedEventId === segment.event.id,
+                      disabled: segment.event.disabled,
+                      "aria-label": label(segment),
+                      "data-event-id": segment.event.id,
+                      "data-continues-before": segment.continuesBefore || void 0,
+                      "data-continues-after": segment.continuesAfter || void 0,
+                      className: "gridui-calendar-positioned-event",
+                      style: {
+                        top: `${(segment.start - startHour * 60) / range * 100}%`,
+                        height: `calc(${(segment.end - segment.start) / range * 100}% - 2px)`,
+                        insetInlineStart: `calc(${segment.column / segment.columns * 100}% + 2px)`,
+                        width: `calc(${100 / segment.columns}% - 4px)`
+                      },
+                      onClick: () => {
+                        onEventSelect?.(segment.event, context(segment));
+                      },
+                      children: renderEvent?.(segment.event, context(segment)) ?? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+                        /* @__PURE__ */ jsx4(
+                          "span",
+                          {
+                            className: "gridui-calendar-event-title",
+                            children: segment.event.title
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs2(
+                          "span",
+                          {
+                            className: "gridui-calendar-event-time type-caption tabular-nums",
+                            children: [
+                              formatTime(segment.start),
+                              "\u2013",
+                              formatTime(segment.end)
+                            ]
+                          }
+                        )
+                      ] })
+                    },
+                    segment.event.id
+                  );
+                })
+              ]
+            },
+            column.id
+          );
+        })
+      ]
+    }
+  );
+};
+
+// src/calendar-day-view/calendar-day-view.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var CalendarDayView = (props) => {
+  const { resources, ...restProps } = props;
+  const columns = resources?.map((resource) => {
+    return {
+      id: resource.id,
+      resourceId: resource.id,
+      date: props.date,
+      label: resource.label,
+      description: resource.description
+    };
+  }) ?? [
+    {
+      id: props.date,
+      date: props.date,
+      label: formatDate(props.date, props.locale ?? "en-US", {
+        weekday: "long",
+        month: "short",
+        day: "numeric"
+      })
+    }
+  ];
+  return /* @__PURE__ */ jsx5(
+    TimeGrid,
+    {
+      ...restProps,
+      columns,
+      view: "day"
+    }
+  );
+};
+
+// src/calendar-month-view/calendar-month-view.tsx
+import { cn as cn5 } from "@gridui/style-utils";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var CalendarMonthView = (props) => {
+  const { date, events, locale = "en-US", today, weekStartsOn = 1, maxEvents = 3, selectedEventId, onDateSelect, onEventSelect, renderEvent, getEventLabel, getMoreLabel, className, ...restProps } = props;
+  validateEvents(events);
+  if (!Number.isInteger(maxEvents) || maxEvents < 1) {
+    throw new RangeError("CalendarMonthView maxEvents must be a positive integer.");
+  }
+  const month = date.slice(0, 7);
+  parseDate(date);
+  const start = startOfWeek(`${month}-01`, weekStartsOn);
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      ...restProps,
+      className: cn5("gridui-calendar-month", className),
+      role: restProps.role ?? "region",
+      "aria-label": restProps["aria-label"] ?? formatDate(date, locale, {
+        month: "long",
+        year: "numeric"
+      }),
+      children: /* @__PURE__ */ jsxs3(
+        "table",
+        {
+          className: "gridui-calendar-month-table",
+          children: [
+            /* @__PURE__ */ jsx6("thead", { children: /* @__PURE__ */ jsx6("tr", { children: Array.from({ length: 7 }, (_, index) => {
+              const day = addDays(start, index);
+              return /* @__PURE__ */ jsx6(
+                "th",
+                {
+                  scope: "col",
+                  className: "type-caption text-muted",
+                  children: formatDate(day, locale, { weekday: "short" })
+                },
+                day
+              );
+            }) }) }),
+            /* @__PURE__ */ jsx6("tbody", { children: Array.from({ length: 6 }, (_, row) => {
+              return /* @__PURE__ */ jsx6(
+                "tr",
+                {
+                  children: Array.from({ length: 7 }, (_column, col) => {
+                    const day = addDays(start, row * 7 + col);
+                    const segments = segmentsForDate(events, day);
+                    const shown = onDateSelect ? segments.slice(0, maxEvents) : segments;
+                    return /* @__PURE__ */ jsxs3(
+                      "td",
+                      {
+                        "data-outside": !day.startsWith(month) || void 0,
+                        children: [
+                          /* @__PURE__ */ jsx6(
+                            "button",
+                            {
+                              type: "button",
+                              className: "gridui-calendar-day-number gridui-hover-surface gridui-focus-contained",
+                              "aria-label": formatDate(day, locale, { dateStyle: "full" }),
+                              "aria-current": day === today ? "date" : void 0,
+                              "aria-pressed": day === date,
+                              onClick: () => {
+                                onDateSelect?.(day);
+                              },
+                              children: parseDate(day).getUTCDate()
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs3(
+                            "div",
+                            {
+                              className: "gridui-calendar-month-events",
+                              children: [
+                                shown.map((segment) => {
+                                  const context = {
+                                    date: day,
+                                    view: "month",
+                                    continuesBefore: segment.continuesBefore,
+                                    continuesAfter: segment.continuesAfter
+                                  };
+                                  return /* @__PURE__ */ jsx6(
+                                    CalendarEvent,
+                                    {
+                                      appearance: "compact",
+                                      colors: segment.event.colors,
+                                      selected: selectedEventId === segment.event.id,
+                                      disabled: segment.event.disabled,
+                                      "aria-label": getEventLabel?.(segment.event, context) ?? `${segment.event.title}, ${segment.event.start} \u2013 ${segment.event.end}`,
+                                      onClick: () => {
+                                        onEventSelect?.(segment.event, context);
+                                      },
+                                      children: renderEvent?.(segment.event, context) ?? segment.event.title
+                                    },
+                                    segment.event.id
+                                  );
+                                }),
+                                segments.length > shown.length && /* @__PURE__ */ jsx6(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    className: "gridui-calendar-more gridui-hover-surface gridui-focus-contained type-caption",
+                                    onClick: () => {
+                                      onDateSelect?.(day);
+                                    },
+                                    children: getMoreLabel?.(segments.length - shown.length, day) ?? `+${segments.length - shown.length} more`
+                                  }
+                                )
+                              ]
+                            }
+                          )
+                        ]
+                      },
+                      day
+                    );
+                  })
+                },
+                row
+              );
+            }) })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/calendar-toolbar/calendar-toolbar.tsx
+import { Button } from "@gridui/button";
+import { cn as cn6 } from "@gridui/style-utils";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var defaults = {
+  previous: "Previous period",
+  next: "Next period",
+  today: "Today",
+  views: "Calendar views",
+  day: "Day",
+  week: "Week",
+  month: "Month",
+  agenda: "Agenda"
+};
+var CalendarToolbar = (props) => {
+  const { date, view, onNavigate, onViewChange, onToday, locale = "en-US", weekStartsOn = 1, views = [
+    "day",
+    "week",
+    "month",
+    "agenda"
+  ], labels, title, children, className, ...restProps } = props;
+  const text = {
+    ...defaults,
+    ...labels
+  };
+  const start = view === "week" ? startOfWeek(date, weekStartsOn) : date;
+  let caption = formatDate(date, locale, {
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  });
+  if (view === "month") {
+    caption = formatDate(date, locale, {
+      month: "long",
+      year: "numeric"
+    });
+  } else if (view === "week") {
+    const first = formatDate(start, locale, {
+      month: "short",
+      day: "numeric"
+    });
+    const last = formatDate(addDays(start, 6), locale, {
+      month: "short",
+      day: "numeric",
+      year: "numeric"
+    });
+    caption = `${first} \u2013 ${last}`;
+  }
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      ...restProps,
+      className: cn6("gridui-calendar-toolbar flex min-w-0 flex-wrap items-center gap-gridui-8", className),
+      children: [
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: "flex min-w-0 flex-wrap items-center gap-gridui-4",
+            children: [
+              /* @__PURE__ */ jsx7(
+                Button,
+                {
+                  variant: "quiet",
+                  layout: "icon",
+                  size: "small",
+                  "aria-label": text.previous,
+                  onClick: () => {
+                    onNavigate(-1);
+                  },
+                  children: /* @__PURE__ */ jsx7(
+                    ChevronLeft,
+                    {
+                      "aria-hidden": "true"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx7(
+                Button,
+                {
+                  variant: "quiet",
+                  layout: "icon",
+                  size: "small",
+                  "aria-label": text.next,
+                  onClick: () => {
+                    onNavigate(1);
+                  },
+                  children: /* @__PURE__ */ jsx7(
+                    ChevronRight,
+                    {
+                      "aria-hidden": "true"
+                    }
+                  )
+                }
+              ),
+              onToday && /* @__PURE__ */ jsx7(
+                Button,
+                {
+                  variant: "secondary",
+                  size: "small",
+                  onClick: onToday,
+                  children: text.today
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "div",
+          {
+            className: "min-w-0 flex-1 type-ui wrap-anywhere",
+            "aria-live": "polite",
+            children: title ?? caption
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "div",
+          {
+            className: "flex flex-wrap gap-gridui-4",
+            role: "group",
+            "aria-label": text.views,
+            children: views.map((item) => {
+              return /* @__PURE__ */ jsx7(
+                Button,
+                {
+                  size: "small",
+                  variant: item === view ? "primary" : "quiet",
+                  "aria-pressed": item === view,
+                  onClick: () => {
+                    onViewChange(item);
+                  },
+                  children: text[item]
+                },
+                item
+              );
+            })
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+
+// src/calendar-week-view/calendar-week-view.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var CalendarWeekView = (props) => {
+  const { weekStartsOn = 1, days = 7, ...restProps } = props;
+  if (!Number.isInteger(days) || days < 1 || days > 7) {
+    throw new RangeError("CalendarWeekView days must be an integer from 1 to 7.");
+  }
+  const start = startOfWeek(props.date, weekStartsOn);
+  const columns = Array.from({ length: days }, (_, index) => {
+    const date = addDays(start, index);
+    return {
+      id: date,
+      date,
+      label: formatDate(date, props.locale ?? "en-US", { weekday: "short" }),
+      description: formatDate(date, props.locale ?? "en-US", { day: "numeric" })
+    };
+  });
+  return /* @__PURE__ */ jsx8(
+    TimeGrid,
+    {
+      ...restProps,
+      columns,
+      view: "week"
+    }
+  );
+};
+
+// src/use-calendar/use-calendar.ts
+import { useState } from "react";
+var useCalendar = (options) => {
+  const { defaultDate, date: controlledDate, defaultView = "day", view: controlledView, onDateChange, onViewChange } = options;
+  parseDate(controlledDate ?? defaultDate);
+  const [
+    localDate,
+    setLocalDate
+  ] = useState(defaultDate);
+  const [
+    localView,
+    setLocalView
+  ] = useState(defaultView);
+  const date = controlledDate ?? localDate;
+  const view = controlledView ?? localView;
+  const setDate = (next) => {
+    parseDate(next);
+    if (next === date) {
+      return;
+    }
+    if (controlledDate === void 0) {
+      setLocalDate(next);
+    }
+    onDateChange?.(next);
+  };
+  const setView = (next) => {
+    if (next === view) {
+      return;
+    }
+    if (controlledView === void 0) {
+      setLocalView(next);
+    }
+    onViewChange?.(next);
+  };
+  const navigate = (direction) => {
+    setDate(view === "month" ? addMonths(date, direction) : addDays(date, direction * (view === "day" ? 1 : 7)));
+  };
+  return {
+    date,
+    view,
+    setDate,
+    setView,
+    navigate
+  };
+};
+export {
+  Calendar,
+  CalendarAgendaView,
+  CalendarDayView,
+  CalendarEvent,
+  CalendarMonthView,
+  CalendarToolbar,
+  CalendarWeekView,
+  useCalendar
+};
+//# sourceMappingURL=index.js.map