@bolio-ui/core 1.1.8 → 2.0.0-alpha.0

package/esm/Calendar/Calendar.js

@@ -0,0 +1,243 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["value", "onChange", "min", "max", "locale", "weekStartsOn", "autoFocus", "previousLabel", "nextLabel", "className"];
+import _JSXStyle from "styled-jsx/style";
+import React, { useEffect, useId, useMemo, useRef, useState } from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+import { addDays, addMonths, clampDate, isSameDay, startOfDay, toISO } from './date-utils';
+var CalendarComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var customValue = _ref.value,
+    onChange = _ref.onChange,
+    min = _ref.min,
+    max = _ref.max,
+    _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? 'en-US' : _ref$locale,
+    _ref$weekStartsOn = _ref.weekStartsOn,
+    weekStartsOn = _ref$weekStartsOn === void 0 ? 0 : _ref$weekStartsOn,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+    _ref$previousLabel = _ref.previousLabel,
+    previousLabel = _ref$previousLabel === void 0 ? 'Previous month' : _ref$previousLabel,
+    _ref$nextLabel = _ref.nextLabel,
+    nextLabel = _ref$nextLabel === void 0 ? 'Next month' : _ref$nextLabel,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var headingId = useId();
+  var minDay = useMemo(function () {
+    return min ? startOfDay(min) : undefined;
+  }, [min]);
+  var maxDay = useMemo(function () {
+    return max ? startOfDay(max) : undefined;
+  }, [max]);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    selfValue = _useState2[0],
+    setSelfValue = _useState2[1];
+  var selected = customValue !== undefined ? customValue : selfValue;
+  var _useState3 = useState(function () {
+      return clampDate(startOfDay(selected || new Date()), minDay, maxDay);
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    focused = _useState4[0],
+    setFocused = _useState4[1];
+  var gridRef = useRef(null);
+  // The DOM focus only follows the focused day after the keyboard or on mount.
+  var moveFocus = useRef(autoFocus);
+  var time = selected ? selected.getTime() : null;
+  useEffect(function () {
+    if (time === null) return;
+    setFocused(clampDate(startOfDay(new Date(time)), minDay, maxDay));
+  }, [time, minDay, maxDay]);
+  useEffect(function () {
+    var _gridRef$current, _gridRef$current$quer;
+    if (!moveFocus.current) return;
+    moveFocus.current = false;
+    (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : (_gridRef$current$quer = _gridRef$current.querySelector("[data-date=\"".concat(toISO(focused), "\"]"))) === null || _gridRef$current$quer === void 0 ? void 0 : _gridRef$current$quer.focus();
+  }, [focused]);
+  var formats = useMemo(function () {
+    return {
+      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]);
+  var weekdays = useMemo(function () {
+    return Array.from({
+      length: 7
+    }, function (_, index) {
+      // 2023-01-01 is a Sunday
+      var date = new Date(2023, 0, 1 + (weekStartsOn + index) % 7);
+      return {
+        "short": formats["short"].format(date),
+        "long": formats["long"].format(date)
+      };
+    });
+  }, [formats, weekStartsOn]);
+  var year = focused.getFullYear();
+  var month = focused.getMonth();
+  var weeks = useMemo(function () {
+    var offset = (new Date(year, month, 1).getDay() - weekStartsOn + 7) % 7;
+    var total = new Date(year, month + 1, 0).getDate();
+    var cells = [].concat(_toConsumableArray(Array.from({
+      length: offset
+    }, function () {
+      return null;
+    })), _toConsumableArray(Array.from({
+      length: total
+    }, function (_, index) {
+      return new Date(year, month, index + 1);
+    })));
+    while (cells.length % 7) {
+      cells.push(null);
+    }
+    return Array.from({
+      length: cells.length / 7
+    }, function (_, index) {
+      return cells.slice(index * 7, index * 7 + 7);
+    });
+  }, [year, month, weekStartsOn]);
+  var isDisabled = function isDisabled(date) {
+    return Boolean(minDay && date < minDay || maxDay && date > maxDay);
+  };
+  var today = new Date();
+  var previousDisabled = Boolean(minDay && new Date(year, month, 0) < minDay);
+  var nextDisabled = Boolean(maxDay && new Date(year, month + 1, 1) > maxDay);
+  var select = function select(date) {
+    if (isDisabled(date)) return;
+    setFocused(date);
+    if (customValue === undefined) setSelfValue(date);
+    onChange && onChange(date);
+  };
+  var keyDownHandler = function keyDownHandler(event, date) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      return select(date);
+    }
+    var weekIndex = (date.getDay() - weekStartsOn + 7) % 7;
+    var 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));
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["697595925", [SCALES.font(1), theme.palette.foreground, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.layout.radius, theme.palette.accents_2, theme.palette.primary, theme.palette.accents_3, theme.palette.accents_4, theme.palette.background, theme.palette.primary, theme.palette.primary]]]) + " " + (props && props.className != null && props.className || useClasses('calendar', className) || "")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["697595925", [SCALES.font(1), theme.palette.foreground, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.layout.radius, theme.palette.accents_2, theme.palette.primary, theme.palette.accents_3, theme.palette.accents_4, theme.palette.background, theme.palette.primary, theme.palette.primary]]]) + " " + "header"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "aria-label": previousLabel,
+    disabled: previousDisabled,
+    onClick: function onClick() {
+      return setFocused(clampDate(addMonths(focused, -1), minDay, maxDay));
+    },
+    className: _JSXStyle.dynamic([["697595925", [SCALES.font(1), theme.palette.foreground, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.layout.radius, theme.palette.accents_2, theme.palette.primary, theme.palette.accents_3, theme.palette.accents_4, theme.palette.background, theme.palette.primary, theme.palette.primary]]])
+  }, "\u2039"), /*#__PURE__*/React.createElement("div", {
+    id: headingId,
+    "aria-live": "polite",
+    className: _JSXStyle.dynamic([["697595925", [SCALES.font(1), theme.palette.foreground, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.layout.radius, theme.palette.accents_2, theme.palette.primary, theme.palette.accents_3, theme.palette.accents_4, theme.palette.background, theme.palette.primary, theme.palette.primary]]]) + " " + "title"
+  }, formats.month.format(focused)), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "aria-label": nextLabel,
+    disabled: nextDisabled,
+    onClick: function onClick() {
+      return setFocused(clampDate(addMonths(focused, 1), minDay, maxDay));
+    },
+    className: _JSXStyle.dynamic([["697595925", [SCALES.font(1), theme.palette.foreground, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.layout.radius, theme.palette.accents_2, theme.palette.primary, theme.palette.accents_3, theme.palette.accents_4, theme.palette.background, theme.palette.primary, theme.palette.primary]]])
+  }, "\u203A")), /*#__PURE__*/React.createElement("table", {
+    ref: gridRef,
+    role: "grid",
+    "aria-labelledby": headingId,
+    className: _JSXStyle.dynamic([["697595925", [SCALES.font(1), theme.palette.foreground, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.layout.radius, theme.palette.accents_2, theme.palette.primary, theme.palette.accents_3, theme.palette.accents_4, theme.palette.background, theme.palette.primary, theme.palette.primary]]])
+  }, /*#__PURE__*/React.createElement("thead", {
+    className: _JSXStyle.dynamic([["697595925", [SCALES.font(1), theme.palette.foreground, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.layout.radius, theme.palette.accents_2, theme.palette.primary, theme.palette.accents_3, theme.palette.accents_4, theme.palette.background, theme.palette.primary, theme.palette.primary]]])
+  }, /*#__PURE__*/React.createElement("tr", {
+    role: "row",
+    className: _JSXStyle.dynamic([["697595925", [SCALES.font(1), theme.palette.foreground, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.layout.radius, theme.palette.accents_2, theme.palette.primary, theme.palette.accents_3, theme.palette.accents_4, theme.palette.background, theme.palette.primary, theme.palette.primary]]])
+  }, weekdays.map(function (weekday) {
+    return /*#__PURE__*/React.createElement("th", {
+      key: weekday["long"],
+      role: "columnheader",
+      scope: "col",
+      className: _JSXStyle.dynamic([["697595925", [SCALES.font(1), theme.palette.foreground, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.layout.radius, theme.palette.accents_2, theme.palette.primary, theme.palette.accents_3, theme.palette.accents_4, theme.palette.background, theme.palette.primary, theme.palette.primary]]])
+    }, /*#__PURE__*/React.createElement("abbr", {
+      title: weekday["long"],
+      className: _JSXStyle.dynamic([["697595925", [SCALES.font(1), theme.palette.foreground, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.layout.radius, theme.palette.accents_2, theme.palette.primary, theme.palette.accents_3, theme.palette.accents_4, theme.palette.background, theme.palette.primary, theme.palette.primary]]])
+    }, weekday["short"]));
+  }))), /*#__PURE__*/React.createElement("tbody", {
+    className: _JSXStyle.dynamic([["697595925", [SCALES.font(1), theme.palette.foreground, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.layout.radius, theme.palette.accents_2, theme.palette.primary, theme.palette.accents_3, theme.palette.accents_4, theme.palette.background, theme.palette.primary, theme.palette.primary]]])
+  }, weeks.map(function (week, index) {
+    return /*#__PURE__*/React.createElement("tr", {
+      key: index,
+      role: "row",
+      className: _JSXStyle.dynamic([["697595925", [SCALES.font(1), theme.palette.foreground, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.layout.radius, theme.palette.accents_2, theme.palette.primary, theme.palette.accents_3, theme.palette.accents_4, theme.palette.background, theme.palette.primary, theme.palette.primary]]])
+    }, week.map(function (date, cell) {
+      return date ? /*#__PURE__*/React.createElement("td", {
+        key: cell,
+        role: "gridcell",
+        "aria-selected": Boolean(selected && isSameDay(date, selected)),
+        className: _JSXStyle.dynamic([["697595925", [SCALES.font(1), theme.palette.foreground, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.layout.radius, theme.palette.accents_2, theme.palette.primary, theme.palette.accents_3, theme.palette.accents_4, theme.palette.background, theme.palette.primary, theme.palette.primary]]])
+      }, /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        "data-date": toISO(date),
+        "aria-label": formats.day.format(date),
+        "aria-current": isSameDay(date, today) ? 'date' : undefined,
+        tabIndex: isSameDay(date, focused) ? 0 : -1,
+        disabled: isDisabled(date),
+        onClick: function onClick() {
+          return select(date);
+        },
+        onKeyDown: function onKeyDown(event) {
+          return keyDownHandler(event, date);
+        },
+        className: _JSXStyle.dynamic([["697595925", [SCALES.font(1), theme.palette.foreground, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.layout.radius, theme.palette.accents_2, theme.palette.primary, theme.palette.accents_3, theme.palette.accents_4, theme.palette.background, theme.palette.primary, theme.palette.primary]]]) + " " + (useClasses({
+          selected: Boolean(selected && isSameDay(date, selected)),
+          today: isSameDay(date, today)
+        }) || "")
+      }, date.getDate())) : /*#__PURE__*/React.createElement("td", {
+        key: cell,
+        role: "gridcell",
+        "aria-hidden": "true",
+        className: _JSXStyle.dynamic([["697595925", [SCALES.font(1), theme.palette.foreground, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.layout.radius, theme.palette.accents_2, theme.palette.primary, theme.palette.accents_3, theme.palette.accents_4, theme.palette.background, theme.palette.primary, theme.palette.primary]]])
+      });
+    }));
+  }))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "697595925",
+    dynamic: [SCALES.font(1), theme.palette.foreground, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.layout.radius, theme.palette.accents_2, theme.palette.primary, theme.palette.accents_3, theme.palette.accents_4, theme.palette.background, theme.palette.primary, theme.palette.primary]
+  }, ".calendar.__jsx-style-dynamic-selector{display:inline-block;font-size:".concat(SCALES.font(1), ";color:").concat(theme.palette.foreground, ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.header.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:0.5em;}.title.__jsx-style-dynamic-selector{font-weight:600;text-transform:capitalize;}table.__jsx-style-dynamic-selector{border-collapse:collapse;}th.__jsx-style-dynamic-selector{padding:0.25em 0;font-size:0.75em;font-weight:500;color:").concat(theme.palette.accents_5, ";}th.__jsx-style-dynamic-selector abbr.__jsx-style-dynamic-selector{-webkit-text-decoration:none;text-decoration:none;}td.__jsx-style-dynamic-selector{padding:1px;text-align:center;}button.__jsx-style-dynamic-selector{font:inherit;color:inherit;cursor:pointer;background:transparent;border:1px solid transparent;border-radius:").concat(theme.layout.radius, ";}.header.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector{width:2em;height:2em;font-size:1.25em;line-height:1;}td.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector{width:2.5em;height:2.5em;}button.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector:not(:disabled){background-color:").concat(theme.palette.accents_2, ";}button.__jsx-style-dynamic-selector:focus-visible{outline:2px solid ").concat(theme.palette.primary, ";outline-offset:1px;}button.__jsx-style-dynamic-selector:disabled{cursor:not-allowed;color:").concat(theme.palette.accents_3, ";}.today.__jsx-style-dynamic-selector{border-color:").concat(theme.palette.accents_4, ";}.selected.__jsx-style-dynamic-selector,.selected.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector:not(:disabled){color:").concat(theme.palette.background, ";background-color:").concat(theme.palette.primary, ";border-color:").concat(theme.palette.primary, ";}")));
+});
+CalendarComponent.displayName = 'BolioUICalendar';
+var Calendar = withScale(CalendarComponent);
+export default Calendar;

package/esm/Calendar/date-utils.d.ts

@@ -0,0 +1,7 @@
+export declare const startOfDay: (date: Date) => Date;
+export declare const addDays: (date: Date, amount: number) => Date;
+export declare const addMonths: (date: Date, amount: number) => Date;
+export declare const isSameDay: (a: Date, b: Date) => boolean;
+export declare const clampDate: (date: Date, min?: Date, max?: Date) => Date;
+export declare const toISO: (date: Date) => string;
+export declare const fromISO: (text: string) => Date | null;

package/esm/Calendar/date-utils.js

@@ -0,0 +1,39 @@
+export var startOfDay = function startOfDay(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+};
+export var addDays = function addDays(date, amount) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);
+};
+
+// Keeps the day inside the target month, so January 31 plus one month is February 28.
+export var addMonths = function addMonths(date, amount) {
+  var target = new Date(date.getFullYear(), date.getMonth() + amount, 1);
+  var lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+  return new Date(target.getFullYear(), target.getMonth(), Math.min(date.getDate(), lastDay));
+};
+export var isSameDay = function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+};
+export var clampDate = function clampDate(date, min, max) {
+  if (min && date < min) return min;
+  if (max && date > max) return max;
+  return date;
+};
+var pad = function pad(value) {
+  return String(value).padStart(2, '0');
+};
+export var toISO = function toISO(date) {
+  return "".concat(date.getFullYear(), "-").concat(pad(date.getMonth() + 1), "-").concat(pad(date.getDate()));
+};
+
+// Only real dates: 2026-02-31 is not accepted.
+export var fromISO = function fromISO(text) {
+  var match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(text.trim());
+  if (!match) return null;
+  var year = +match[1],
+    month = +match[2],
+    day = +match[3];
+  var date = new Date(year, month - 1, day);
+  var isReal = date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
+  return isReal ? date : null;
+};

package/esm/Calendar/index.d.ts

@@ -0,0 +1,3 @@
+import Calendar from './Calendar';
+export type { CalendarProps } from './Calendar';
+export default Calendar;

package/esm/Calendar/index.js

@@ -0,0 +1,3 @@
+'use client';
+import Calendar from './Calendar';
+export default Calendar;

package/esm/Capacity/Capacity.d.ts

@@ -5,7 +5,9 @@ interface Props {
     color?: string;
     className?: string;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type CapacityProps = Props & NativeAttrs;
-declare const Capacity: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type CapacityProps = Props & NativeAttrs;
+declare const Capacity: import("../use-scale/with-scale").ScaleComponent<HTMLDivElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Capacity;

package/esm/Capacity/Capacity.js

@@ -1,34 +1,29 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["value", "limit", "color", "className"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useMemo } from 'react';
 import useTheme from '../use-theme';
 import { useProportions } from '../utils/calculations';
 import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
-
 var getColor = function getColor(val, palette) {
   if (val < 33) return palette.info;
   if (val < 66) return palette.warning;
   return palette.errorDark;
 };
-
-function CapacityComponent(_ref) {
+var CapacityComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$value = _ref.value,
-      value = _ref$value === void 0 ? 0 : _ref$value,
-      _ref$limit = _ref.limit,
-      limit = _ref$limit === void 0 ? 100 : _ref$limit,
-      userColor = _ref.color,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    value = _ref$value === void 0 ? 0 : _ref$value,
+    _ref$limit = _ref.limit,
+    limit = _ref$limit === void 0 ? 100 : _ref$limit,
+    userColor = _ref.color,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var percentValue = useProportions(value, limit);
   var classes = useClasses('capacity', className);
   var color = useMemo(function () {
@@ -36,17 +31,17 @@ function CapacityComponent(_ref) {
     return getColor(percentValue, theme.palette);
   }, [userColor, percentValue, theme.palette]);
   return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
     title: "".concat(percentValue, "%")
   }, props, {
-    className: _JSXStyle.dynamic([["3589142679", [SCALES.width(3.125), SCALES.height(0.625), theme.layout.radius, theme.palette.accents_2, SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), percentValue, color]]]) + " " + (props && props.className != null && props.className || classes || "")
+    className: _JSXStyle.dynamic([["3030733389", [SCALES.width(3.125), SCALES.height(0.625), theme.layout.radius, theme.palette.accents_2, SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), percentValue, color]]]) + " " + (props && props.className != null && props.className || classes || "")
   }), /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["3589142679", [SCALES.width(3.125), SCALES.height(0.625), theme.layout.radius, theme.palette.accents_2, SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), percentValue, color]]])
+    className: _JSXStyle.dynamic([["3030733389", [SCALES.width(3.125), SCALES.height(0.625), theme.layout.radius, theme.palette.accents_2, SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), percentValue, color]]])
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3589142679",
+    id: "3030733389",
     dynamic: [SCALES.width(3.125), SCALES.height(0.625), theme.layout.radius, theme.palette.accents_2, SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), percentValue, color]
   }, ".capacity.__jsx-style-dynamic-selector{width:".concat(SCALES.width(3.125), ";height:").concat(SCALES.height(0.625), ";border-radius:").concat(theme.layout.radius, ";overflow:hidden;background-color:").concat(theme.palette.accents_2, ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}span.__jsx-style-dynamic-selector{width:").concat(percentValue, "%;background-color:").concat(color, ";height:100%;margin:0;padding:0;display:block;}")));
-}
-
+});
 CapacityComponent.displayName = 'BolioUICapacity';
 var Capacity = withScale(CapacityComponent);
 export default Capacity;

package/esm/Capacity/index.d.ts

@@ -1,3 +1,3 @@
-import Capacity from "./Capacity";
-export type { CapacityProps } from "./Capacity";
+import Capacity from './Capacity';
+export type { CapacityProps } from './Capacity';
 export default Capacity;

package/esm/Capacity/index.js

@@ -1,2 +1,3 @@
+'use client';
 import Capacity from './Capacity';
 export default Capacity;

package/esm/Card/Card.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CardTypes } from "../utils/prop-types";
+import { CardTypes } from '../utils/prop-types';
 interface Props {
     hoverable?: boolean;
     rounded?: boolean;
@@ -8,7 +8,9 @@ interface Props {
     className?: string;
     type?: CardTypes;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type CardProps = Props & NativeAttrs;
-declare const Card: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type CardProps = Props & NativeAttrs;
+declare const Card: import("../use-scale/with-scale").ScaleComponent<HTMLDivElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Card;

package/esm/Card/Card.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "hoverable", "rounded", "bordered", "className", "shadow", "type"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useMemo } from 'react';
 import useTheme from '../use-theme';
 import { getStyles } from './styles';
@@ -19,54 +19,47 @@ var defaultProps = {
   shadow: false,
   className: ''
 };
-
-function CardComponent(_ref) {
+var CardComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      hoverable = _ref.hoverable,
-      rounded = _ref.rounded,
-      bordered = _ref.bordered,
-      className = _ref.className,
-      shadow = _ref.shadow,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'default' : _ref$type,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    hoverable = _ref.hoverable,
+    rounded = _ref.rounded,
+    bordered = _ref.bordered,
+    className = _ref.className,
+    shadow = _ref.shadow,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var hoverShadow = useMemo(function () {
     if (shadow) return theme.expressiveness.shadowMedium;
     return hoverable ? theme.expressiveness.shadowSmall : 'none';
   }, [hoverable, shadow, theme.expressiveness]);
-
   var _useMemo = useMemo(function () {
-    return getStyles(type, theme.palette, shadow);
-  }, [type, theme.palette, shadow]),
-      color = _useMemo.color,
-      bgColor = _useMemo.bgColor,
-      borderColor = _useMemo.borderColor;
-
+      return getStyles(type, theme.palette, shadow);
+    }, [type, theme.palette, shadow]),
+    color = _useMemo.color,
+    bgColor = _useMemo.bgColor,
+    borderColor = _useMemo.borderColor;
   var _pickChild = pickChild(children, CardFooter),
-      _pickChild2 = _slicedToArray(_pickChild, 2),
-      withoutFooterChildren = _pickChild2[0],
-      footerChildren = _pickChild2[1];
-
+    _pickChild2 = _slicedToArray(_pickChild, 2),
+    withoutFooterChildren = _pickChild2[0],
+    footerChildren = _pickChild2[1];
   var _pickChild3 = pickChild(withoutFooterChildren, Image),
-      _pickChild4 = _slicedToArray(_pickChild3, 2),
-      withoutImageChildren = _pickChild4[0],
-      imageChildren = _pickChild4[1];
-
+    _pickChild4 = _slicedToArray(_pickChild3, 2),
+    withoutImageChildren = _pickChild4[0],
+    imageChildren = _pickChild4[1];
   var hasContent = hasChild(withoutImageChildren, CardContent);
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["3321159247", [theme.palette.background, rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, bordered ? '1px solid' + borderColor : 'none', SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]]]) + " " + (props && props.className != null && props.className || useClasses('card', className) || "")
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["3501183919", [theme.palette.background, rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, bordered ? '1px solid' + borderColor : 'none', SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]]]) + " " + (props && props.className != null && props.className || useClasses('card', className) || "")
   }), imageChildren, hasContent ? withoutImageChildren : /*#__PURE__*/React.createElement(CardContent, null, withoutImageChildren), footerChildren, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3321159247",
+    id: "3501183919",
     dynamic: [theme.palette.background, rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, bordered ? '1px solid' + borderColor : 'none', SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]
   }, ".card.__jsx-style-dynamic-selector{background:".concat(theme.palette.background, ";-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";border:").concat(bordered ? '1px solid' + borderColor : 'none', ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.card.__jsx-style-dynamic-selector:hover{box-shadow:").concat(hoverShadow, ";}.card.__jsx-style-dynamic-selector img{width:100%;}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}")));
-}
-
+});
 CardComponent.defaultProps = defaultProps;
 CardComponent.displayName = 'BolioUICard';
 var Card = withScale(CardComponent);

package/esm/Card/CardContent.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 interface Props {
     className?: string;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type CardContentProps = Props & NativeAttrs;
-declare const CardContent: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type CardContentProps = Props & NativeAttrs;
+declare const CardContent: import("../use-scale/with-scale").ScaleComponent<unknown, Props & NativeAttrs>;
 export default CardContent;

package/esm/Card/CardContent.js

@@ -1,20 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "children"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
-
 function CardContentComponent(_ref) {
   var _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    className = _ref$className === void 0 ? '' : _ref$className,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   return /*#__PURE__*/React.createElement("div", _extends({}, props, {
     className: _JSXStyle.dynamic([["3819126313", [SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(1), SCALES.pr(1), SCALES.pb(1), SCALES.pl(1), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || useClasses('content', className) || "")
   }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
@@ -22,7 +19,6 @@ function CardContentComponent(_ref) {
     dynamic: [SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(1), SCALES.pr(1), SCALES.pb(1), SCALES.pl(1), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
   }, ".content.__jsx-style-dynamic-selector{width:".concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(1), " ").concat(SCALES.pr(1), " ").concat(SCALES.pb(1), " ").concat(SCALES.pl(1), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.content.__jsx-style-dynamic-selector>p:first-child{margin-top:0;}.content.__jsx-style-dynamic-selector>p:last-child{margin-bottom:0;}")));
 }
-
 CardContentComponent.displayName = 'BolioUICardContent';
 var CardContent = withScale(CardContentComponent);
 export default CardContent;

package/esm/Card/CardFooter.d.ts

@@ -3,7 +3,7 @@ interface Props {
     disableAutoMargin?: boolean;
     className?: string;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type CardFooterProps = Props & NativeAttrs;
-declare const CardFooter: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type CardFooterProps = Props & NativeAttrs;
+declare const CardFooter: import("../use-scale/with-scale").ScaleComponent<unknown, Props & NativeAttrs>;
 export default CardFooter;

package/esm/Card/CardFooter.js

@@ -1,25 +1,21 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "className", "disableAutoMargin"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import useTheme from '../use-theme';
 import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
-
 function CardFooterComponent(_ref) {
   var children = _ref.children,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$disableAutoMargi = _ref.disableAutoMargin,
-      disableAutoMargin = _ref$disableAutoMargi === void 0 ? false : _ref$disableAutoMargi,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$disableAutoMargi = _ref.disableAutoMargin,
+    disableAutoMargin = _ref$disableAutoMargi === void 0 ? false : _ref$disableAutoMargi,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var classes = useClasses({
     'auto-margin': !disableAutoMargin
   }, className);
@@ -30,7 +26,6 @@ function CardFooterComponent(_ref) {
     dynamic: [SCALES.py(0.66), SCALES.px(1.31), SCALES.font(0.875), theme.palette.border, theme.layout.radius, theme.layout.radius, SCALES.height(3.3), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.layout.gapQuarter]
   }, "footer.__jsx-style-dynamic-selector{padding:".concat(SCALES.py(0.66), " ").concat(SCALES.px(1.31), ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;color:inherit;background-color:inherit;font-size:").concat(SCALES.font(0.875), ";border-top:1px solid ").concat(theme.palette.border, ";border-bottom-left-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";min-height:").concat(SCALES.height(3.3), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.auto-margin.__jsx-style-dynamic-selector *{margin-top:0;margin-bottom:0;margin-right:").concat(theme.layout.gapQuarter, ";}")));
 }
-
 CardFooterComponent.displayName = 'BolioUICardFooter';
 var CardFooter = withScale(CardFooterComponent);
 export default CardFooter;