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

package/esm/chunk-P245HSVB.js

@@ -0,0 +1,450 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  joinClasses,
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Calendar/Calendar.tsx
+import React, { useEffect, useId, useMemo, useRef, useState } from "react";
+
+// core/Calendar/date-utils.ts
+var startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+var addDays = (date, amount) => new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);
+var addMonths = (date, amount) => {
+  const target = new Date(date.getFullYear(), date.getMonth() + amount, 1);
+  const lastDay = new Date(
+    target.getFullYear(),
+    target.getMonth() + 1,
+    0
+  ).getDate();
+  return new Date(
+    target.getFullYear(),
+    target.getMonth(),
+    Math.min(date.getDate(), lastDay)
+  );
+};
+var isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var clampDate = (date, min, max) => {
+  if (min && date < min) return min;
+  if (max && date > max) return max;
+  return date;
+};
+var pad = (value) => String(value).padStart(2, "0");
+var toISO = (date) => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+var fromISO = (text) => {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(text.trim());
+  if (!match) return null;
+  const [year, month, day] = [+match[1], +match[2], +match[3]];
+  const date = new Date(year, month - 1, day);
+  const isReal = date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
+  return isReal ? date : null;
+};
+var getISOWeek = (date) => {
+  const thursday = addDays(date, 3 - (date.getDay() + 6) % 7);
+  const firstThursday = new Date(thursday.getFullYear(), 0, 4);
+  const weekOne = addDays(firstThursday, 3 - (firstThursday.getDay() + 6) % 7);
+  return 1 + Math.round((thursday.getTime() - weekOne.getTime()) / 6048e5);
+};
+
+// 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", "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
+import { jsx, jsxs } from "react/jsx-runtime";
+var CalendarComponent = React.forwardRef(
+  ({
+    mode = "single",
+    value: customValue,
+    onChange,
+    maxSelected,
+    min,
+    max,
+    shouldDisableDate,
+    locale = "en-US",
+    weekStartsOn = 0,
+    showOutsideDays = false,
+    showWeekNumbers = false,
+    numberOfMonths = 1,
+    month: customMonth,
+    defaultMonth,
+    onMonthChange,
+    autoFocus = false,
+    previousLabel = "Previous month",
+    nextLabel = "Next month",
+    weekLabel = "Week",
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const headingId = useId();
+    const minDay = useMemo(() => min ? startOfDay(min) : void 0, [min]);
+    const maxDay = useMemo(() => max ? startOfDay(max) : void 0, [max]);
+    const [selfValue, setSelfValue] = useState(
+      mode === "multiple" ? [] : mode === "range" ? [null, null] : null
+    );
+    const current = customValue !== void 0 ? customValue : selfValue;
+    const isRange = mode === "range";
+    const [rangeStart, rangeEnd] = isRange ? current : [];
+    const selectedDays = isRange ? [rangeStart, rangeEnd].filter(Boolean) : mode === "multiple" ? current : current ? [current] : [];
+    const anchor = selectedDays[0] || null;
+    const [hovered, setHovered] = useState(null);
+    const [focused, setFocused] = useState(
+      () => clampDate(
+        startOfDay(anchor || customMonth || defaultMonth || /* @__PURE__ */ new Date()),
+        minDay,
+        maxDay
+      )
+    );
+    const count = Math.max(1, Math.floor(numberOfMonths));
+    const focusedIndex = focused.getFullYear() * 12 + focused.getMonth();
+    const [viewStart, setViewStart] = useState(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 = useRef(null);
+    const moveFocus = useRef(autoFocus);
+    const time = anchor ? anchor.getTime() : null;
+    useEffect(() => {
+      if (time === null) return;
+      setFocused(clampDate(startOfDay(new Date(time)), minDay, maxDay));
+    }, [time, minDay, maxDay]);
+    const monthTime = customMonth ? new Date(customMonth.getFullYear(), customMonth.getMonth(), 1).getTime() : null;
+    useEffect(() => {
+      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)
+      );
+    }, [monthTime, minDay, maxDay]);
+    useEffect(() => {
+      var _a, _b;
+      if (!moveFocus.current) return;
+      moveFocus.current = false;
+      (_b = (_a = gridRef.current) == null ? void 0 : _a.querySelector(`[data-date="${toISO(focused)}"]`)) == null ? void 0 : _b.focus();
+    }, [focused]);
+    const formats = useMemo(
+      () => ({
+        month: new Intl.DateTimeFormat(locale, {
+          month: "long",
+          year: "numeric"
+        }),
+        day: new Intl.DateTimeFormat(locale, {
+          weekday: "long",
+          year: "numeric",
+          month: "long",
+          day: "numeric"
+        }),
+        short: new Intl.DateTimeFormat(locale, { weekday: "short" }),
+        long: new Intl.DateTimeFormat(locale, { weekday: "long" })
+      }),
+      [locale]
+    );
+    const weekdays = useMemo(
+      () => Array.from({ length: 7 }, (_, index) => {
+        const date = new Date(2023, 0, 1 + (weekStartsOn + index) % 7);
+        return {
+          short: formats.short.format(date),
+          long: formats.long.format(date)
+        };
+      }),
+      [formats, weekStartsOn]
+    );
+    const outsideDays = showOutsideDays && count === 1;
+    const monthViews = useMemo(
+      () => 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 { year, month, date: new Date(year, month, 1), weeks };
+      }),
+      [first, count, weekStartsOn, outsideDays]
+    );
+    const firstMonth = monthViews[0];
+    const lastMonthView = monthViews[count - 1];
+    const lastMonth = useRef(first);
+    useEffect(() => {
+      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(firstMonth.year, firstMonth.month, 0) < minDay
+    );
+    const nextDisabled = Boolean(
+      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);
+    };
+    const select = (date) => {
+      if (isDisabled(date)) return;
+      setFocused(date);
+      if (isRange) {
+        const start = rangeStart;
+        const startsNew = !start || rangeEnd || date < start;
+        return commit(startsNew ? [date, null] : [start, date]);
+      }
+      if (mode === "multiple") {
+        const list = current;
+        if (list.some((item) => isSameDay(item, date)))
+          return commit(list.filter((item) => !isSameDay(item, date)));
+        if (maxSelected !== void 0 && list.length >= maxSelected) return;
+        return commit([...list, date].sort((a, b) => +a - +b));
+      }
+      commit(date);
+    };
+    const isSelected = (date) => selectedDays.some((item) => isSameDay(item, date));
+    const previewEnd = isRange ? rangeEnd || hovered : null;
+    const [low, high] = rangeStart && previewEnd ? rangeStart <= previewEnd ? [rangeStart, previewEnd] : [previewEnd, rangeStart] : [null, null];
+    const isInRange = (date) => Boolean(low && high && date > low && date < high);
+    const keyDownHandler = (event, date) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        return select(date);
+      }
+      const weekIndex = (date.getDay() - weekStartsOn + 7) % 7;
+      const targets = {
+        ArrowLeft: addDays(date, -1),
+        ArrowRight: addDays(date, 1),
+        ArrowUp: addDays(date, -7),
+        ArrowDown: addDays(date, 7),
+        Home: addDays(date, -weekIndex),
+        End: addDays(date, 6 - weekIndex),
+        PageUp: addMonths(date, event.shiftKey ? -12 : -1),
+        PageDown: addMonths(date, event.shiftKey ? 12 : 1)
+      };
+      if (!(event.key in targets)) return;
+      event.preventDefault();
+      moveFocus.current = true;
+      setFocused(clampDate(targets[event.key], minDay, maxDay));
+    };
+    const calendarStyle = {
+      "--calendar-font-size": SCALES.font(1),
+      "--calendar-text-color": theme.palette.foreground,
+      "--calendar-width": SCALES.width(1, "auto"),
+      "--calendar-height": SCALES.height(1, "auto"),
+      "--calendar-padding-top": SCALES.pt(0),
+      "--calendar-padding-right": SCALES.pr(0),
+      "--calendar-padding-bottom": SCALES.pb(0),
+      "--calendar-padding-left": SCALES.pl(0),
+      "--calendar-margin-top": SCALES.mt(0),
+      "--calendar-margin-right": SCALES.mr(0),
+      "--calendar-margin-bottom": SCALES.mb(0),
+      "--calendar-margin-left": SCALES.ml(0),
+      "--calendar-weekday-color": theme.palette.accents_5,
+      "--calendar-radius": theme.layout.radius,
+      "--calendar-hover-bg": theme.palette.accents_2,
+      "--calendar-focus-outline": theme.palette.primary,
+      "--calendar-disabled-color": theme.palette.accents_3,
+      "--calendar-today-border": theme.palette.accents_4,
+      "--calendar-selected-color": "#fff",
+      "--calendar-selected-bg": theme.palette.primary,
+      "--calendar-range-bg": `color-mix(in srgb, ${theme.palette.primary} 18%, transparent)`,
+      "--calendar-outside-color": theme.palette.accents_4,
+      "--calendar-week-color": theme.palette.accents_4,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: use_classes_default(Calendar_module_css_default.calendar, className),
+        style: calendarStyle,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: gridRef,
+            className: Calendar_module_css_default.months,
+            onMouseLeave: () => setHovered(null),
+            children: monthViews.map(({ month, date: monthDate, weeks }, step) => /* @__PURE__ */ jsxs("div", { className: Calendar_module_css_default.month, children: [
+              /* @__PURE__ */ jsxs("div", { className: Calendar_module_css_default.header, children: [
+                step === 0 ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: joinClasses(Calendar_module_css_default.button, Calendar_module_css_default.navButton),
+                    "aria-label": previousLabel,
+                    disabled: previousDisabled,
+                    onClick: () => goToMonth(-1),
+                    children: "\u2039"
+                  }
+                ) : /* @__PURE__ */ jsx("span", { className: Calendar_module_css_default.navSpacer, "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    id: `${headingId}-${step}`,
+                    className: Calendar_module_css_default.title,
+                    "aria-live": "polite",
+                    children: formats.month.format(monthDate)
+                  }
+                ),
+                step === count - 1 ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: joinClasses(Calendar_module_css_default.button, Calendar_module_css_default.navButton),
+                    "aria-label": nextLabel,
+                    disabled: nextDisabled,
+                    onClick: () => goToMonth(1),
+                    children: "\u203A"
+                  }
+                ) : /* @__PURE__ */ jsx("span", { className: Calendar_module_css_default.navSpacer, "aria-hidden": "true" })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "table",
+                {
+                  role: "grid",
+                  "aria-labelledby": `${headingId}-${step}`,
+                  className: Calendar_module_css_default.table,
+                  "aria-multiselectable": mode !== "single" || void 0,
+                  children: [
+                    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { role: "row", children: [
+                      showWeekNumbers && /* @__PURE__ */ jsx("th", { role: "columnheader", className: Calendar_module_css_default.th }),
+                      weekdays.map((weekday) => /* @__PURE__ */ jsx(
+                        "th",
+                        {
+                          role: "columnheader",
+                          scope: "col",
+                          className: Calendar_module_css_default.th,
+                          children: /* @__PURE__ */ jsx("abbr", { title: weekday.long, children: weekday.short })
+                        },
+                        weekday.long
+                      ))
+                    ] }) }),
+                    /* @__PURE__ */ jsx("tbody", { children: weeks.map((week, index) => {
+                      const reference = week.find(Boolean);
+                      const weekNumber = getISOWeek(
+                        addDays(reference, 3 - week.indexOf(reference))
+                      );
+                      return /* @__PURE__ */ jsxs("tr", { role: "row", children: [
+                        showWeekNumbers && /* @__PURE__ */ jsx(
+                          "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__ */ jsx(
+                              "td",
+                              {
+                                role: "gridcell",
+                                className: Calendar_module_css_default.td,
+                                "aria-hidden": "true"
+                              },
+                              cell
+                            );
+                          const selectedDay = isSelected(date);
+                          const outside = date.getMonth() !== month;
+                          return /* @__PURE__ */ jsx(
+                            "td",
+                            {
+                              role: "gridcell",
+                              className: joinClasses(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__ */ jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  "data-date": toISO(date),
+                                  "aria-label": formats.day.format(date),
+                                  "aria-current": isSameDay(date, today) ? "date" : void 0,
+                                  className: joinClasses(
+                                    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()
+                                }
+                              )
+                            },
+                            cell
+                          );
+                        })
+                      ] }, index);
+                    }) })
+                  ]
+                }
+              )
+            ] }, step))
+          }
+        )
+      }
+    );
+  }
+);
+CalendarComponent.displayName = "BolioUICalendar";
+var Calendar = with_scale_default(CalendarComponent);
+var Calendar_default = Calendar;
+
+// core/Calendar/index.ts
+var Calendar_default2 = Calendar_default;
+
+export {
+  startOfDay,
+  toISO,
+  fromISO,
+  Calendar_default2 as Calendar_default
+};

package/esm/chunk-REWKR7S3.js

@@ -0,0 +1,109 @@
+import {
+  Image_default
+} from "./chunk-TWIOSRRP.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/ImageZoom/ImageZoom.tsx
+import React, { useEffect, useRef, useState } from "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
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ImageZoom = React.forwardRef(
+  ({
+    src,
+    alt,
+    zoomSrc,
+    caption,
+    closeLabel = "Close",
+    className = "",
+    ...imageProps
+  }, ref) => {
+    const [open, setOpen] = useState(false);
+    const dialog = useRef(null);
+    useEffect(() => {
+      var _a;
+      if (open) (_a = dialog.current) == null ? void 0 : _a.showModal();
+    }, [open]);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref,
+          type: "button",
+          className: use_classes_default(ImageZoom_module_css_default.trigger, className),
+          "aria-haspopup": "dialog",
+          onClick: () => setOpen(true),
+          children: /* @__PURE__ */ jsx(Image_default, { src, alt, ...imageProps })
+        }
+      ),
+      open && /* @__PURE__ */ jsxs(
+        "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__ */ jsxs("figure", { className: ImageZoom_module_css_default.figure, children: [
+              /* @__PURE__ */ jsx("img", { src: zoomSrc || src, alt, className: ImageZoom_module_css_default.zoomed }),
+              caption && /* @__PURE__ */ jsx("figcaption", { className: ImageZoom_module_css_default.caption, children: caption })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "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__ */ jsx(
+                  "svg",
+                  {
+                    viewBox: "0 0 24 24",
+                    width: "1.5em",
+                    height: "1.5em",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsx(
+                      "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;
+
+export {
+  ImageZoom_default2 as ImageZoom_default
+};