@bolio-ui/core 3.0.0-alpha.0 → 3.0.0-alpha.2

package/dist/{chunk-IBC5BABS.js → chunk-P245HSVB.js}

@@ -53,7 +53,7 @@ var getISOWeek = (date) => {
 };
 
 // css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Calendar/Calendar.module.css.bolio-css-module-source
-var Calendar_module_css_default = { "calendar": "Calendar-module_calendar__KlHdi", "header": "Calendar-module_header__d6VGN", "title": "Calendar-module_title__r0GX1", "table": "Calendar-module_table__q-H-S", "th": "Calendar-module_th__N9m4h", "td": "Calendar-module_td__YyI6L", "button": "Calendar-module_button__h3ZK-", "navButton": "Calendar-module_navButton__jmnwu", "dayButton": "Calendar-module_dayButton__-4eeR", "today": "Calendar-module_today__fx9vj", "selected": "Calendar-module_selected__kIUsl", "outside": "Calendar-module_outside__cSs5z", "inRange": "Calendar-module_inRange__0XK-F", "rangeStart": "Calendar-module_rangeStart__T1amH", "rangeEnd": "Calendar-module_rangeEnd__B55oD", "weekNumber": "Calendar-module_weekNumber__J1hkP" };
+var Calendar_module_css_default = { "calendar": "Calendar-module_calendar__KlHdi", "months": "Calendar-module_months__vypnr", "header": "Calendar-module_header__d6VGN", "navSpacer": "Calendar-module_navSpacer__TcVxJ", "title": "Calendar-module_title__r0GX1", "table": "Calendar-module_table__q-H-S", "th": "Calendar-module_th__N9m4h", "td": "Calendar-module_td__YyI6L", "button": "Calendar-module_button__h3ZK-", "navButton": "Calendar-module_navButton__jmnwu", "dayButton": "Calendar-module_dayButton__-4eeR", "today": "Calendar-module_today__fx9vj", "selected": "Calendar-module_selected__kIUsl", "outside": "Calendar-module_outside__cSs5z", "inRange": "Calendar-module_inRange__0XK-F", "rangeStart": "Calendar-module_rangeStart__T1amH", "rangeEnd": "Calendar-module_rangeEnd__B55oD", "weekNumber": "Calendar-module_weekNumber__J1hkP" };
 
 // core/Calendar/Calendar.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -70,6 +70,7 @@ var CalendarComponent = _react2.default.forwardRef(
     weekStartsOn = 0,
     showOutsideDays = false,
     showWeekNumbers = false,
+    numberOfMonths = 1,
     month: customMonth,
     defaultMonth,
     onMonthChange,
@@ -102,6 +103,14 @@ var CalendarComponent = _react2.default.forwardRef(
         maxDay
       )
     );
+    const count = Math.max(1, Math.floor(numberOfMonths));
+    const focusedIndex = focused.getFullYear() * 12 + focused.getMonth();
+    const [viewStart, setViewStart] = _react.useState.call(void 0, focusedIndex);
+    let first = viewStart;
+    if (focusedIndex < first) first = focusedIndex;
+    else if (focusedIndex > first + count - 1)
+      first = focusedIndex - (count - 1);
+    if (first !== viewStart) setViewStart(first);
     const gridRef = _react.useRef.call(void 0, null);
     const moveFocus = _react.useRef.call(void 0, autoFocus);
     const time = anchor ? anchor.getTime() : null;
@@ -113,6 +122,7 @@ var CalendarComponent = _react2.default.forwardRef(
     _react.useEffect.call(void 0, () => {
       if (monthTime === null) return;
       const target = new Date(monthTime);
+      setViewStart(target.getFullYear() * 12 + target.getMonth());
       setFocused(
         (last) => last.getFullYear() === target.getFullYear() && last.getMonth() === target.getMonth() ? last : clampDate(target, minDay, maxDay)
       );
@@ -150,47 +160,58 @@ var CalendarComponent = _react2.default.forwardRef(
       }),
       [formats, weekStartsOn]
     );
-    const year = focused.getFullYear();
-    const month = focused.getMonth();
-    const weeks = _react.useMemo.call(void 0, () => {
-      const offset = (new Date(year, month, 1).getDay() - weekStartsOn + 7) % 7;
-      const total = new Date(year, month + 1, 0).getDate();
-      const cells = [
-        ...Array.from(
-          { length: offset },
-          (_, index) => showOutsideDays ? new Date(year, month, index - offset + 1) : null
-        ),
-        ...Array.from(
-          { length: total },
-          (_, index) => new Date(year, month, index + 1)
-        )
-      ];
-      while (cells.length % 7)
-        cells.push(
-          showOutsideDays ? new Date(year, month, cells.length - offset + 1) : null
+    const outsideDays = showOutsideDays && count === 1;
+    const monthViews = _react.useMemo.call(void 0, 
+      () => Array.from({ length: count }, (_, step) => {
+        const index = first + step;
+        const year = Math.floor(index / 12);
+        const month = index % 12;
+        const offset = (new Date(year, month, 1).getDay() - weekStartsOn + 7) % 7;
+        const total = new Date(year, month + 1, 0).getDate();
+        const cells = [
+          ...Array.from(
+            { length: offset },
+            (_2, cell) => outsideDays ? new Date(year, month, cell - offset + 1) : null
+          ),
+          ...Array.from(
+            { length: total },
+            (_2, cell) => new Date(year, month, cell + 1)
+          )
+        ];
+        while (cells.length % 7)
+          cells.push(
+            outsideDays ? new Date(year, month, cells.length - offset + 1) : null
+          );
+        const weeks = Array.from(
+          { length: cells.length / 7 },
+          (_2, row) => cells.slice(row * 7, row * 7 + 7)
         );
-      return Array.from(
-        { length: cells.length / 7 },
-        (_, index) => cells.slice(index * 7, index * 7 + 7)
-      );
-    }, [year, month, weekStartsOn, showOutsideDays]);
-    const lastMonth = _react.useRef.call(void 0, `${year}-${month}`);
+        return { year, month, date: new Date(year, month, 1), weeks };
+      }),
+      [first, count, weekStartsOn, outsideDays]
+    );
+    const firstMonth = monthViews[0];
+    const lastMonthView = monthViews[count - 1];
+    const lastMonth = _react.useRef.call(void 0, first);
     _react.useEffect.call(void 0, () => {
-      const key = `${year}-${month}`;
-      if (key === lastMonth.current) return;
-      lastMonth.current = key;
-      if (onMonthChange) onMonthChange(new Date(year, month, 1));
-    }, [year, month]);
+      if (first === lastMonth.current) return;
+      lastMonth.current = first;
+      if (onMonthChange) onMonthChange(firstMonth.date);
+    }, [first]);
     const isDisabled = (date) => Boolean(
       minDay && date < minDay || maxDay && date > maxDay || shouldDisableDate && shouldDisableDate(date)
     );
     const today = /* @__PURE__ */ new Date();
     const previousDisabled = Boolean(
-      minDay && new Date(year, month, 0) < minDay
+      minDay && new Date(firstMonth.year, firstMonth.month, 0) < minDay
     );
     const nextDisabled = Boolean(
-      maxDay && new Date(year, month + 1, 1) > maxDay
+      maxDay && new Date(lastMonthView.year, lastMonthView.month + 1, 1) > maxDay
     );
+    const goToMonth = (step) => {
+      setViewStart(first + step);
+      setFocused(clampDate(addMonths(focused, step), minDay, maxDay));
+    };
     const commit = (next) => {
       if (customValue === void 0) setSelfValue(next);
       if (onChange) onChange(next);
@@ -263,139 +284,153 @@ var CalendarComponent = _react2.default.forwardRef(
       "--calendar-week-color": theme.palette.accents_4,
       ...style
     };
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "div",
       {
         ref,
         className: _chunk5KUROAEPjs.use_classes_default.call(void 0, Calendar_module_css_default.calendar, className),
         style: calendarStyle,
         ...props,
-        children: [
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: Calendar_module_css_default.header, children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              "button",
-              {
-                type: "button",
-                className: _chunk5KUROAEPjs.joinClasses.call(void 0, Calendar_module_css_default.button, Calendar_module_css_default.navButton),
-                "aria-label": previousLabel,
-                disabled: previousDisabled,
-                onClick: () => setFocused(clampDate(addMonths(focused, -1), minDay, maxDay)),
-                children: "\u2039"
-              }
-            ),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { id: headingId, className: Calendar_module_css_default.title, "aria-live": "polite", children: formats.month.format(focused) }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              "button",
-              {
-                type: "button",
-                className: _chunk5KUROAEPjs.joinClasses.call(void 0, Calendar_module_css_default.button, Calendar_module_css_default.navButton),
-                "aria-label": nextLabel,
-                disabled: nextDisabled,
-                onClick: () => setFocused(clampDate(addMonths(focused, 1), minDay, maxDay)),
-                children: "\u203A"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            "table",
-            {
-              ref: gridRef,
-              role: "grid",
-              "aria-labelledby": headingId,
-              className: Calendar_module_css_default.table,
-              "aria-multiselectable": mode !== "single" || void 0,
-              onMouseLeave: () => setHovered(null),
-              children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { role: "row", children: [
-                  showWeekNumbers && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { role: "columnheader", className: Calendar_module_css_default.th }),
-                  weekdays.map((weekday) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    "th",
-                    {
-                      role: "columnheader",
-                      scope: "col",
-                      className: Calendar_module_css_default.th,
-                      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "abbr", { title: weekday.long, children: weekday.short })
-                    },
-                    weekday.long
-                  ))
-                ] }) }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: weeks.map((week, index) => {
-                  const reference = week.find(Boolean);
-                  const weekNumber = getISOWeek(
-                    addDays(reference, 3 - week.indexOf(reference))
-                  );
-                  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { role: "row", children: [
-                    showWeekNumbers && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                      "th",
-                      {
-                        role: "rowheader",
-                        scope: "row",
-                        className: Calendar_module_css_default.weekNumber,
-                        "aria-label": `${weekLabel} ${weekNumber}`,
-                        children: weekNumber
-                      }
-                    ),
-                    week.map((date, cell) => {
-                      if (!date)
-                        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                          "td",
-                          {
-                            role: "gridcell",
-                            className: Calendar_module_css_default.td,
-                            "aria-hidden": "true"
-                          },
-                          cell
-                        );
-                      const selectedDay = isSelected(date);
-                      const outside = date.getMonth() !== month;
-                      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        "td",
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            ref: gridRef,
+            className: Calendar_module_css_default.months,
+            onMouseLeave: () => setHovered(null),
+            children: monthViews.map(({ month, date: monthDate, weeks }, step) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: Calendar_module_css_default.month, children: [
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: Calendar_module_css_default.header, children: [
+                step === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "button",
+                  {
+                    type: "button",
+                    className: _chunk5KUROAEPjs.joinClasses.call(void 0, Calendar_module_css_default.button, Calendar_module_css_default.navButton),
+                    "aria-label": previousLabel,
+                    disabled: previousDisabled,
+                    onClick: () => goToMonth(-1),
+                    children: "\u2039"
+                  }
+                ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: Calendar_module_css_default.navSpacer, "aria-hidden": "true" }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "div",
+                  {
+                    id: `${headingId}-${step}`,
+                    className: Calendar_module_css_default.title,
+                    "aria-live": "polite",
+                    children: formats.month.format(monthDate)
+                  }
+                ),
+                step === count - 1 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "button",
+                  {
+                    type: "button",
+                    className: _chunk5KUROAEPjs.joinClasses.call(void 0, Calendar_module_css_default.button, Calendar_module_css_default.navButton),
+                    "aria-label": nextLabel,
+                    disabled: nextDisabled,
+                    onClick: () => goToMonth(1),
+                    children: "\u203A"
+                  }
+                ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: Calendar_module_css_default.navSpacer, "aria-hidden": "true" })
+              ] }),
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                "table",
+                {
+                  role: "grid",
+                  "aria-labelledby": `${headingId}-${step}`,
+                  className: Calendar_module_css_default.table,
+                  "aria-multiselectable": mode !== "single" || void 0,
+                  children: [
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { role: "row", children: [
+                      showWeekNumbers && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { role: "columnheader", className: Calendar_module_css_default.th }),
+                      weekdays.map((weekday) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                        "th",
                         {
-                          role: "gridcell",
-                          className: _chunk5KUROAEPjs.joinClasses.call(void 0, Calendar_module_css_default.td, {
-                            [Calendar_module_css_default.inRange]: isInRange(date),
-                            [Calendar_module_css_default.rangeStart]: Boolean(
-                              low && isSameDay(date, low) && high
-                            ),
-                            [Calendar_module_css_default.rangeEnd]: Boolean(
-                              high && isSameDay(date, high) && low
-                            )
-                          }),
-                          "aria-selected": selectedDay || isInRange(date),
-                          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                            "button",
+                          role: "columnheader",
+                          scope: "col",
+                          className: Calendar_module_css_default.th,
+                          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "abbr", { title: weekday.long, children: weekday.short })
+                        },
+                        weekday.long
+                      ))
+                    ] }) }),
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: weeks.map((week, index) => {
+                      const reference = week.find(Boolean);
+                      const weekNumber = getISOWeek(
+                        addDays(reference, 3 - week.indexOf(reference))
+                      );
+                      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { role: "row", children: [
+                        showWeekNumbers && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                          "th",
+                          {
+                            role: "rowheader",
+                            scope: "row",
+                            className: Calendar_module_css_default.weekNumber,
+                            "aria-label": `${weekLabel} ${weekNumber}`,
+                            children: weekNumber
+                          }
+                        ),
+                        week.map((date, cell) => {
+                          if (!date)
+                            return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                              "td",
+                              {
+                                role: "gridcell",
+                                className: Calendar_module_css_default.td,
+                                "aria-hidden": "true"
+                              },
+                              cell
+                            );
+                          const selectedDay = isSelected(date);
+                          const outside = date.getMonth() !== month;
+                          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                            "td",
                             {
-                              type: "button",
-                              "data-date": toISO(date),
-                              "aria-label": formats.day.format(date),
-                              "aria-current": isSameDay(date, today) ? "date" : void 0,
-                              className: _chunk5KUROAEPjs.joinClasses.call(void 0, 
-                                Calendar_module_css_default.button,
-                                Calendar_module_css_default.dayButton,
+                              role: "gridcell",
+                              className: _chunk5KUROAEPjs.joinClasses.call(void 0, Calendar_module_css_default.td, {
+                                [Calendar_module_css_default.inRange]: isInRange(date),
+                                [Calendar_module_css_default.rangeStart]: Boolean(
+                                  low && isSameDay(date, low) && high
+                                ),
+                                [Calendar_module_css_default.rangeEnd]: Boolean(
+                                  high && isSameDay(date, high) && low
+                                )
+                              }),
+                              "aria-selected": selectedDay || isInRange(date),
+                              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                                "button",
                                 {
-                                  [Calendar_module_css_default.selected]: selectedDay,
-                                  [Calendar_module_css_default.today]: isSameDay(date, today),
-                                  [Calendar_module_css_default.outside]: outside
+                                  type: "button",
+                                  "data-date": toISO(date),
+                                  "aria-label": formats.day.format(date),
+                                  "aria-current": isSameDay(date, today) ? "date" : void 0,
+                                  className: _chunk5KUROAEPjs.joinClasses.call(void 0, 
+                                    Calendar_module_css_default.button,
+                                    Calendar_module_css_default.dayButton,
+                                    {
+                                      [Calendar_module_css_default.selected]: selectedDay,
+                                      [Calendar_module_css_default.today]: isSameDay(date, today),
+                                      [Calendar_module_css_default.outside]: outside
+                                    }
+                                  ),
+                                  tabIndex: isSameDay(date, focused) ? 0 : -1,
+                                  disabled: isDisabled(date),
+                                  onClick: () => select(date),
+                                  onMouseEnter: () => isRange && setHovered(date),
+                                  onKeyDown: (event) => keyDownHandler(event, date),
+                                  children: date.getDate()
                                 }
-                              ),
-                              tabIndex: isSameDay(date, focused) ? 0 : -1,
-                              disabled: isDisabled(date),
-                              onClick: () => select(date),
-                              onMouseEnter: () => isRange && setHovered(date),
-                              onKeyDown: (event) => keyDownHandler(event, date),
-                              children: date.getDate()
-                            }
-                          )
-                        },
-                        cell
-                      );
-                    })
-                  ] }, index);
-                }) })
-              ]
-            }
-          )
-        ]
+                              )
+                            },
+                            cell
+                          );
+                        })
+                      ] }, index);
+                    }) })
+                  ]
+                }
+              )
+            ] }, step))
+          }
+        )
       }
     );
   }

package/dist/chunk-REWKR7S3.js

@@ -0,0 +1,109 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkTWIOSRRPjs = require('./chunk-TWIOSRRP.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/ImageZoom/ImageZoom.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/ImageZoom/ImageZoom.module.css.bolio-css-module-source
+var ImageZoom_module_css_default = { "trigger": "ImageZoom-module_trigger__-42Bz", "dialog": "ImageZoom-module_dialog__TjA9E", "figure": "ImageZoom-module_figure__YIBq1", "zoomed": "ImageZoom-module_zoomed__7gfCP", "caption": "ImageZoom-module_caption__6SFRA", "close": "ImageZoom-module_close__iEiwJ" };
+
+// core/ImageZoom/ImageZoom.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var ImageZoom = _react2.default.forwardRef(
+  ({
+    src,
+    alt,
+    zoomSrc,
+    caption,
+    closeLabel = "Close",
+    className = "",
+    ...imageProps
+  }, ref) => {
+    const [open, setOpen] = _react.useState.call(void 0, false);
+    const dialog = _react.useRef.call(void 0, null);
+    _react.useEffect.call(void 0, () => {
+      var _a;
+      if (open) (_a = dialog.current) == null ? void 0 : _a.showModal();
+    }, [open]);
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          ref,
+          type: "button",
+          className: _chunk5KUROAEPjs.use_classes_default.call(void 0, ImageZoom_module_css_default.trigger, className),
+          "aria-haspopup": "dialog",
+          onClick: () => setOpen(true),
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTWIOSRRPjs.Image_default, { src, alt, ...imageProps })
+        }
+      ),
+      open && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "dialog",
+        {
+          ref: dialog,
+          "aria-label": alt,
+          className: ImageZoom_module_css_default.dialog,
+          onClose: () => setOpen(false),
+          onKeyDown: (event) => {
+            var _a;
+            if (event.key === "Escape") (_a = dialog.current) == null ? void 0 : _a.close();
+          },
+          onClick: (event) => {
+            var _a;
+            if (event.target === event.currentTarget) (_a = dialog.current) == null ? void 0 : _a.close();
+          },
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "figure", { className: ImageZoom_module_css_default.figure, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: zoomSrc || src, alt, className: ImageZoom_module_css_default.zoomed }),
+              caption && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "figcaption", { className: ImageZoom_module_css_default.caption, children: caption })
+            ] }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                type: "button",
+                className: ImageZoom_module_css_default.close,
+                "aria-label": closeLabel,
+                onClick: () => {
+                  var _a;
+                  return (_a = dialog.current) == null ? void 0 : _a.close();
+                },
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "svg",
+                  {
+                    viewBox: "0 0 24 24",
+                    width: "1.5em",
+                    height: "1.5em",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      "path",
+                      {
+                        d: "M6 6l12 12M18 6L6 18",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+ImageZoom.displayName = "BolioUIImageZoom";
+var ImageZoom_default = ImageZoom;
+
+// core/ImageZoom/index.ts
+var ImageZoom_default2 = ImageZoom_default;
+
+
+
+exports.ImageZoom_default = ImageZoom_default2;