@koine/react 2.0.0-beta.2 → 2.0.0-beta.5

package/Buttons/ButtonComposite.mjs

@@ -1,28 +1,72 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo } from "react";
 import styled from "styled-components";
-var Root = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  min-width: 0;\n\n  & svg {\n    font-size: 2em !important;\n    margin: 0 0.33em 0 0 !important;\n  }\n"], ["\n  ", "\n  min-width: 0;\n\n  & svg {\n    font-size: 2em !important;\n    margin: 0 0.33em 0 0 !important;\n  }\n"])), function (p) {
-    return p.$icon ? "display: flex;" : "display: inline-block; text-align: left;";
-});
-var ButtonCompositeIcon = styled.svg(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  float: left;\n"], ["\n  float: left;\n"])));
-var BesidesIcon = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  text-align: left;\n  line-height: 1.2;\n"], ["\n  text-align: left;\n  line-height: 1.2;\n"])));
-var Main = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: block;\n  font-size: 0.9em;\n\n  &:last-child {\n    margin-top: ", ";\n  }\n"], ["\n  display: block;\n  font-size: 0.9em;\n\n  &:last-child {\n    margin-top: ", ";\n  }\n"])), function (p) { return (p.$reverse && !p.$icon ? "0.5em" : "0"); });
-var Sub = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  text-transform: none;\n  font-size: 0.7em;\n  font-weight: 500;\n\n  ", " + & {\n    margin-top: ", ";\n  }\n"], ["\n  display: block;\n  text-transform: none;\n  font-size: 0.7em;\n  font-weight: 500;\n\n  ", " + & {\n    margin-top: ", ";\n  }\n"])), Main, function (p) { return (p.$reverse && !p.$icon ? "0.5em" : "0"); });
-var Text = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""])));
-var Inner = memo(function (_a) {
-    var textMain = _a.textMain, textSub = _a.textSub, text = _a.text, $reverse = _a.$reverse, $icon = _a.$icon;
-    return (_jsxs(_Fragment, { children: [$reverse ? (_jsxs(_Fragment, { children: [textSub && (_jsx(Sub, { "$icon": $icon, "$reverse": $reverse, children: textSub })), textMain && (_jsx(Main, { "$icon": $icon, "$reverse": $reverse, children: textMain }))] })) : (_jsxs(_Fragment, { children: [textMain && (_jsx(Main, { "$icon": $icon, "$reverse": $reverse, children: textMain })), textSub && (_jsx(Sub, { "$icon": $icon, "$reverse": $reverse, children: textSub }))] })), text && _jsx(Text, { children: text })] }));
-});
-export var KoineButtonComposite = function (_a) {
-    var Icon = _a.Icon, _b = _a.iconProps, iconProps = _b === void 0 ? {} : _b, textMain = _a.textMain, textSub = _a.textSub, textReverse = _a.textReverse, text = _a.text, _c = _a.Button, Button = _c === void 0 ? "button" : _c, _d = _a.ButtonLink, ButtonLink = _d === void 0 ? "a" : _d, props = __rest(_a, ["Icon", "iconProps", "textMain", "textSub", "textReverse", "text", "Button", "ButtonLink"]);
-    var Btn = props.href ? ButtonLink : Button;
-    var styledProps = {
+const Root = styled.span`
+  ${(p)=>p.$icon ? `display: flex;` : `display: inline-block; text-align: left;`}
+  min-width: 0;
+
+  & svg {
+    font-size: 2em !important;
+    margin: 0 0.33em 0 0 !important;
+  }
+`;
+const ButtonCompositeIcon = styled.svg`
+  float: left;
+`;
+const BesidesIcon = styled.span`
+  text-align: left;
+  line-height: 1.2;
+`;
+const Main = styled.span`
+  display: block;
+  font-size: 0.9em;
+
+  &:last-child {
+    margin-top: ${(p)=>p.$reverse && !p.$icon ? "0.5em" : "0"};
+  }
+`;
+const Sub = styled.span`
+  display: block;
+  text-transform: none;
+  font-size: 0.7em;
+  font-weight: 500;
+
+  ${Main} + & {
+    margin-top: ${(p)=>p.$reverse && !p.$icon ? "0.5em" : "0"};
+  }
+`;
+const Text = styled.span``;
+const Inner = /*#__PURE__*/ memo(({ textMain, textSub, text, $reverse, $icon })=>/*#__PURE__*/ React.createElement(React.Fragment, null, $reverse ? /*#__PURE__*/ React.createElement(React.Fragment, null, textSub && /*#__PURE__*/ React.createElement(Sub, {
+        $icon: $icon,
+        $reverse: $reverse
+    }, textSub), textMain && /*#__PURE__*/ React.createElement(Main, {
+        $icon: $icon,
+        $reverse: $reverse
+    }, textMain)) : /*#__PURE__*/ React.createElement(React.Fragment, null, textMain && /*#__PURE__*/ React.createElement(Main, {
+        $icon: $icon,
+        $reverse: $reverse
+    }, textMain), textSub && /*#__PURE__*/ React.createElement(Sub, {
+        $icon: $icon,
+        $reverse: $reverse
+    }, textSub)), text && /*#__PURE__*/ React.createElement(Text, null, text)));
+export const KoineButtonComposite = ({ Icon, iconProps = {}, textMain, textSub, textReverse, text, Button = "button", ButtonLink = "a", ...props })=>{
+    const Btn = props.href ? ButtonLink : Button;
+    const styledProps = {
         $icon: !!Icon,
         $reverse: textReverse,
-        $twoLines: !!(textMain && textSub && !Icon),
+        $twoLines: !!(textMain && textSub && !Icon)
     };
-    var innerProps = __assign({ textMain: textMain, textSub: textSub, text: text }, styledProps);
-    return (_jsxs(Root, __assign({ as: Btn }, props, styledProps, { children: [Icon && _jsx(ButtonCompositeIcon, __assign({ as: Icon }, iconProps)), Icon ? (_jsx(BesidesIcon, __assign({}, styledProps, { children: _jsx(Inner, __assign({}, innerProps)) }))) : (_jsx(Inner, __assign({}, innerProps)))] })));
+    const innerProps = {
+        textMain,
+        textSub,
+        text,
+        ...styledProps
+    };
+    return /*#__PURE__*/ React.createElement(Root, {
+        as: Btn,
+        ...props,
+        ...styledProps
+    }, Icon && /*#__PURE__*/ React.createElement(ButtonCompositeIcon, {
+        as: Icon,
+        ...iconProps
+    }), Icon ? /*#__PURE__*/ React.createElement(BesidesIcon, styledProps, /*#__PURE__*/ React.createElement(Inner, innerProps)) : /*#__PURE__*/ React.createElement(Inner, innerProps));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Buttons/ButtonFab.js

@@ -1,9 +1,27 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconButtonFab = exports.buttonFab = void 0;
-var tslib_1 = require("tslib");
-var styled_components_1 = tslib_1.__importStar(require("styled-components"));
-var IconButton_1 = require("./IconButton");
-exports.buttonFab = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  box-shadow: 3px 3px 6px -4px rgb(0, 0, 0, 0.5);\n"], ["\n  box-shadow: 3px 3px 6px -4px rgb(0, 0, 0, 0.5);\n"])));
-exports.IconButtonFab = (0, styled_components_1.default)(IconButton_1.IconButton)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.buttonFab);
-var templateObject_1, templateObject_2;
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    buttonFab: function() {
+        return buttonFab;
+    },
+    IconButtonFab: function() {
+        return IconButtonFab;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _styledcomponents = /*#__PURE__*/ _interop_require_wildcard._(require("styled-components"));
+const _IconButton = require("./IconButton");
+const buttonFab = (0, _styledcomponents.css)`
+  box-shadow: 3px 3px 6px -4px rgb(0, 0, 0, 0.5);
+`;
+const IconButtonFab = (0, _styledcomponents.default)(_IconButton.IconButton)`
+  ${buttonFab}
+`;

package/Buttons/ButtonFab.mjs

@@ -1,6 +1,8 @@
-import { __makeTemplateObject } from "tslib";
 import styled, { css } from "styled-components";
 import { IconButton } from "./IconButton";
-export var buttonFab = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-shadow: 3px 3px 6px -4px rgb(0, 0, 0, 0.5);\n"], ["\n  box-shadow: 3px 3px 6px -4px rgb(0, 0, 0, 0.5);\n"])));
-export var IconButtonFab = styled(IconButton)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), buttonFab);
-var templateObject_1, templateObject_2;
+export const buttonFab = css`
+  box-shadow: 3px 3px 6px -4px rgb(0, 0, 0, 0.5);
+`;
+export const IconButtonFab = styled(IconButton)`
+  ${buttonFab}
+`;

package/Buttons/ButtonLink.d.ts

@@ -1,5 +1,5 @@
-import { KoineComponentProps, KoineComponent } from "../types";
 import { KoineLinkProps } from "../Link";
+import { KoineComponent, KoineComponentProps } from "../types";
 import { KoineButtonUiProps } from "./Button";
 export type KoineButtonLinkProps = KoineButtonUiProps & KoineLinkProps;
 export type ButtonLinkProps = KoineComponentProps<KoineButtonLinkProps, {

package/Buttons/ButtonLink.js

@@ -1,15 +1,28 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineButtonLink = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var Button_1 = require("./Button");
-var Root = (0, styled_components_1.default)(Button_1.KoineButton)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  text-decoration: none;\n"], ["\n  text-decoration: none;\n"])));
-var KoineButtonLink = function (_a) {
-    var href = _a.href, _b = _a.Link, Link = _b === void 0 ? "a" : _b, props = tslib_1.__rest(_a, ["href", "Link"]);
-    var isRelative = href && href.startsWith("/");
-    return isRelative ? ((0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ href: href }, props, { as: Link }))) : ((0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ href: href }, props, { as: "a" })));
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "KoineButtonLink", {
+    enumerable: true,
+    get: function() {
+        return KoineButtonLink;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const _Button = require("./Button");
+const Root = (0, _styledcomponents.default)(_Button.KoineButton)`
+  text-decoration: none;
+`;
+const KoineButtonLink = ({ href, Link = "a", ...props })=>{
+    const isRelative = href && href.startsWith("/");
+    return isRelative ? /*#__PURE__*/ React.createElement(Root, {
+        href: href,
+        ...props,
+        as: Link
+    }) : /*#__PURE__*/ React.createElement(Root, {
+        href: href,
+        ...props,
+        as: "a"
+    });
 };
-exports.KoineButtonLink = KoineButtonLink;
-var templateObject_1;

package/Buttons/ButtonLink.mjs

@@ -1,11 +1,17 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { KoineButton } from "./Button";
-var Root = styled(KoineButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-decoration: none;\n"], ["\n  text-decoration: none;\n"])));
-export var KoineButtonLink = function (_a) {
-    var href = _a.href, _b = _a.Link, Link = _b === void 0 ? "a" : _b, props = __rest(_a, ["href", "Link"]);
-    var isRelative = href && href.startsWith("/");
-    return isRelative ? (_jsx(Root, __assign({ href: href }, props, { as: Link }))) : (_jsx(Root, __assign({ href: href }, props, { as: "a" })));
+const Root = styled(KoineButton)`
+  text-decoration: none;
+`;
+export const KoineButtonLink = ({ href, Link = "a", ...props })=>{
+    const isRelative = href && href.startsWith("/");
+    return isRelative ? /*#__PURE__*/ React.createElement(Root, {
+        href: href,
+        ...props,
+        as: Link
+    }) : /*#__PURE__*/ React.createElement(Root, {
+        href: href,
+        ...props,
+        as: "a"
+    });
 };
-var templateObject_1;

package/Buttons/IconButton.js

@@ -1,10 +1,41 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconButton = exports.iconBtnStyleBase = exports.iconBtnStyleReset = void 0;
-var tslib_1 = require("tslib");
-var styled_components_1 = tslib_1.__importStar(require("styled-components"));
-var Button_1 = require("./Button");
-exports.iconBtnStyleReset = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\n  height: 44px;\n  border-radius: 100%;\n  ", "\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\n  height: 44px;\n  border-radius: 100%;\n  ", "\n"])), Button_1.btnStyleReset);
-exports.iconBtnStyleBase = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.iconBtnStyleReset);
-exports.IconButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n"])), exports.iconBtnStyleBase, function (p) { return p.$variant === "outlined" && Button_1.btnStyleOutlined; }, function (p) { return p.$variant === "contained" && Button_1.btnStyleContained; });
-var templateObject_1, templateObject_2, templateObject_3;
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    iconBtnStyleReset: function() {
+        return iconBtnStyleReset;
+    },
+    iconBtnStyleBase: function() {
+        return iconBtnStyleBase;
+    },
+    IconButton: function() {
+        return IconButton;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _styledcomponents = /*#__PURE__*/ _interop_require_wildcard._(require("styled-components"));
+const _Button = require("./Button");
+const iconBtnStyleReset = (0, _styledcomponents.css)`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 100%;
+  ${_Button.btnStyleReset}
+`;
+const iconBtnStyleBase = (0, _styledcomponents.css)`
+  ${iconBtnStyleReset}
+`;
+const IconButton = _styledcomponents.default.button`
+  ${iconBtnStyleBase}
+  ${(p)=>p.$variant === "outlined" && _Button.btnStyleOutlined}
+  ${(p)=>p.$variant === "contained" && _Button.btnStyleContained}
+`;

package/Buttons/IconButton.mjs

@@ -1,7 +1,19 @@
-import { __makeTemplateObject } from "tslib";
 import styled, { css } from "styled-components";
-import { btnStyleReset, btnStyleOutlined, btnStyleContained, } from "./Button";
-export var iconBtnStyleReset = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\n  height: 44px;\n  border-radius: 100%;\n  ", "\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\n  height: 44px;\n  border-radius: 100%;\n  ", "\n"])), btnStyleReset);
-export var iconBtnStyleBase = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), iconBtnStyleReset);
-export var IconButton = styled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n"])), iconBtnStyleBase, function (p) { return p.$variant === "outlined" && btnStyleOutlined; }, function (p) { return p.$variant === "contained" && btnStyleContained; });
-var templateObject_1, templateObject_2, templateObject_3;
+import { btnStyleContained, btnStyleOutlined, btnStyleReset } from "./Button";
+export const iconBtnStyleReset = css`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 100%;
+  ${btnStyleReset}
+`;
+export const iconBtnStyleBase = css`
+  ${iconBtnStyleReset}
+`;
+export const IconButton = styled.button`
+  ${iconBtnStyleBase}
+  ${(p)=>p.$variant === "outlined" && btnStyleOutlined}
+  ${(p)=>p.$variant === "contained" && btnStyleContained}
+`;

package/Buttons/index.js

@@ -1,8 +1,10 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Button"), exports);
-tslib_1.__exportStar(require("./ButtonComposite"), exports);
-tslib_1.__exportStar(require("./ButtonFab"), exports);
-tslib_1.__exportStar(require("./ButtonLink"), exports);
-tslib_1.__exportStar(require("./IconButton"), exports);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./Button"), exports);
+_export_star._(require("./ButtonComposite"), exports);
+_export_star._(require("./ButtonFab"), exports);
+_export_star._(require("./ButtonLink"), exports);
+_export_star._(require("./IconButton"), exports);

package/Calendar/CalendarDaygridCell.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { KoineComponentProps, KoineComponent } from "../types";
-import type { CalendarsMap, CalendarView, CalendarViewEvent, CalendarViewDayProps } from "./types";
+import type { KoineComponent, KoineComponentProps } from "../types";
+import type { CalendarView, CalendarViewDayProps, CalendarViewEvent, CalendarsMap } from "./types";
 import { UseCalendarReturn } from "./useCalendar";
 export type KoineCalendarDaygridCellProps = {
     eventClicked?: UseCalendarReturn["eventClicked"];

package/Calendar/CalendarDaygridCell.js

@@ -1,11 +1,16 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CalendarDaygridCell = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var md_1 = require("react-icons/md");
-var utils_1 = require("./utils");
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CalendarDaygridCell", {
+    enumerable: true,
+    get: function() {
+        return CalendarDaygridCell;
+    }
+});
+const _react = require("react");
+const _md = require("react-icons/md");
+const _utils = require("./utils");
 /**
  * Style for button within a event cell
  *
@@ -13,49 +18,65 @@ var utils_1 = require("./utils");
  * ellipsed btn texts, with `Start` as block element and underneath the `Title`
  * on multiple lines, but that would mean that we loose the ability to interweave
  * single-day events among the spaces left by wider multi-days events.
- */
-var styleBtn = {
+ */ const styleBtn = {
     overflow: "hidden",
     whiteSpace: "nowrap",
-    textOverflow: "ellipsis",
+    textOverflow: "ellipsis"
 };
-var CalendarDaygridCell = function (_a) {
-    var eventClicked = _a.eventClicked, setEventClicked = _a.setEventClicked, 
-    // eventHovered,
-    setEventHovered = _a.setEventHovered, view = _a.view, maxEvents = _a.maxEvents, events = _a.events, calendarsMap = _a.calendarsMap, _b = _a.Cell, Cell = _b === void 0 ? "div" : _b, _c = _a.CellOverflow, CellOverflow = _c === void 0 ? "div" : _c, _d = _a.CellEvent, CellEvent = _d === void 0 ? "div" : _d, _e = _a.CellEventBtn, CellEventBtn = _e === void 0 ? "div" : _e, _f = _a.CellEventTitle, CellEventTitle = _f === void 0 ? "span" : _f, _g = _a.CellEventStart, CellEventStart = _g === void 0 ? "span" : _g;
-    var _h = (0, react_1.useState)(false), isExpanded = _h[0], expand = _h[1];
-    var eventsWithoutPlaceholders = events.filter(function (event) { return !event.placeholder; });
-    return ((0, jsx_runtime_1.jsx)(Cell, { children: events.map(function (event, i) {
-            if (i === maxEvents && !isExpanded) {
-                return ((0, jsx_runtime_1.jsxs)(CellOverflow, { onClick: function () { return expand(true); }, children: [(0, jsx_runtime_1.jsx)(md_1.MdAdd, {}), eventsWithoutPlaceholders.length - maxEvents] }, "overflowMessage" + i));
-            }
-            if (i > maxEvents && !isExpanded)
-                return null;
-            if (event.placeholder) {
-                return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(CellEvent, { "$placeholder": true, children: (0, jsx_runtime_1.jsx)(CellEventBtn, { "aria-hidden": "true", style: { visibility: "hidden" }, "$placeholder": true, children: (0, jsx_runtime_1.jsx)(CellEventTitle, { children: "\u00A0" }) }) }) }, event.key));
-            }
-            var styleEvent = {
-                zIndex: event.firstOfMulti ? 1 : 0,
-                position: "relative",
-                width: event.firstOfMulti ? "".concat(100 * event.width, "%") : "100%",
-            };
-            if (!calendarsMap[event.calendar.id].on) {
-                // @ts-expect-error nevermind
-                styleBtn.display = "none";
-            }
-            var styledProps = {
-                $view: view,
-                $selected: (eventClicked === null || eventClicked === void 0 ? void 0 : eventClicked.uid) === event.uid,
-                $past: event.isPast,
-                $color: event.color,
-                $isOutOfRange: event.$isOutOfRange,
-                $isToday: event.$isToday,
-            };
-            return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(CellEvent, tslib_1.__assign({ style: styleEvent }, styledProps, { children: (0, jsx_runtime_1.jsx)(CellEventBtn, tslib_1.__assign({ role: "button", style: styleBtn }, styledProps, { onClick: function () {
-                            return setEventClicked(function (prev) {
-                                return (prev === null || prev === void 0 ? void 0 : prev.uid) === event.uid ? null : event;
-                            });
-                        }, onMouseEnter: function () { return setEventHovered(event); }, onMouseLeave: function () { return setEventHovered(null); }, children: event.allDay ? ((0, jsx_runtime_1.jsx)(CellEventTitle, { children: event.title })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(CellEventStart, { children: (0, utils_1.getDisplayTime)(event.start) }), (0, jsx_runtime_1.jsx)(CellEventTitle, { children: event.title })] })) })) })) }, event.key));
-        }) }));
+const CalendarDaygridCell = ({ eventClicked, setEventClicked, // eventHovered,
+setEventHovered, view, maxEvents, events, calendarsMap, Cell = "div", CellOverflow = "div", CellEvent = "div", CellEventBtn = "div", CellEventTitle = "span", CellEventStart = "span" })=>{
+    const [isExpanded, expand] = (0, _react.useState)(false);
+    const eventsWithoutPlaceholders = events.filter((event)=>!event.placeholder);
+    return /*#__PURE__*/ React.createElement(Cell, null, events.map((event, i)=>{
+        if (i === maxEvents && !isExpanded) {
+            return /*#__PURE__*/ React.createElement(CellOverflow, {
+                key: "overflowMessage" + i,
+                onClick: ()=>expand(true)
+            }, /*#__PURE__*/ React.createElement(_md.MdAdd, null), eventsWithoutPlaceholders.length - maxEvents);
+        }
+        if (i > maxEvents && !isExpanded) return null;
+        if (event.placeholder) {
+            return /*#__PURE__*/ React.createElement(_react.Fragment, {
+                key: event.key
+            }, /*#__PURE__*/ React.createElement(CellEvent, {
+                $placeholder: true
+            }, /*#__PURE__*/ React.createElement(CellEventBtn, {
+                "aria-hidden": "true",
+                style: {
+                    visibility: "hidden"
+                },
+                $placeholder: true
+            }, /*#__PURE__*/ React.createElement(CellEventTitle, null, "\xa0"))));
+        }
+        const styleEvent = {
+            zIndex: event.firstOfMulti ? 1 : 0,
+            position: "relative",
+            width: event.firstOfMulti ? `${100 * event.width}%` : "100%"
+        };
+        if (!calendarsMap[event.calendar.id].on) {
+            // @ts-expect-error nevermind
+            styleBtn.display = "none";
+        }
+        const styledProps = {
+            $view: view,
+            $selected: eventClicked?.uid === event.uid,
+            $past: event.isPast,
+            $color: event.color,
+            $isOutOfRange: event.$isOutOfRange,
+            $isToday: event.$isToday
+        };
+        return /*#__PURE__*/ React.createElement(_react.Fragment, {
+            key: event.key
+        }, /*#__PURE__*/ React.createElement(CellEvent, {
+            style: styleEvent,
+            ...styledProps
+        }, /*#__PURE__*/ React.createElement(CellEventBtn, {
+            role: "button",
+            style: styleBtn,
+            ...styledProps,
+            onClick: ()=>setEventClicked((prev)=>prev?.uid === event.uid ? null : event),
+            onMouseEnter: ()=>setEventHovered(event),
+            onMouseLeave: ()=>setEventHovered(null)
+        }, event.allDay ? /*#__PURE__*/ React.createElement(CellEventTitle, null, event.title) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(CellEventStart, null, (0, _utils.getDisplayTime)(event.start)), /*#__PURE__*/ React.createElement(CellEventTitle, null, event.title)))));
+    }));
 };
-exports.CalendarDaygridCell = CalendarDaygridCell;

package/Calendar/CalendarDaygridCell.mjs

@@ -1,5 +1,3 @@
-import { __assign } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Fragment, useState } from "react";
 import { MdAdd as IconExpand } from "react-icons/md";
 import { getDisplayTime } from "./utils";
@@ -10,48 +8,65 @@ import { getDisplayTime } from "./utils";
  * ellipsed btn texts, with `Start` as block element and underneath the `Title`
  * on multiple lines, but that would mean that we loose the ability to interweave
  * single-day events among the spaces left by wider multi-days events.
- */
-var styleBtn = {
+ */ const styleBtn = {
     overflow: "hidden",
     whiteSpace: "nowrap",
-    textOverflow: "ellipsis",
+    textOverflow: "ellipsis"
 };
-export var CalendarDaygridCell = function (_a) {
-    var eventClicked = _a.eventClicked, setEventClicked = _a.setEventClicked, 
-    // eventHovered,
-    setEventHovered = _a.setEventHovered, view = _a.view, maxEvents = _a.maxEvents, events = _a.events, calendarsMap = _a.calendarsMap, _b = _a.Cell, Cell = _b === void 0 ? "div" : _b, _c = _a.CellOverflow, CellOverflow = _c === void 0 ? "div" : _c, _d = _a.CellEvent, CellEvent = _d === void 0 ? "div" : _d, _e = _a.CellEventBtn, CellEventBtn = _e === void 0 ? "div" : _e, _f = _a.CellEventTitle, CellEventTitle = _f === void 0 ? "span" : _f, _g = _a.CellEventStart, CellEventStart = _g === void 0 ? "span" : _g;
-    var _h = useState(false), isExpanded = _h[0], expand = _h[1];
-    var eventsWithoutPlaceholders = events.filter(function (event) { return !event.placeholder; });
-    return (_jsx(Cell, { children: events.map(function (event, i) {
-            if (i === maxEvents && !isExpanded) {
-                return (_jsxs(CellOverflow, { onClick: function () { return expand(true); }, children: [_jsx(IconExpand, {}), eventsWithoutPlaceholders.length - maxEvents] }, "overflowMessage" + i));
-            }
-            if (i > maxEvents && !isExpanded)
-                return null;
-            if (event.placeholder) {
-                return (_jsx(Fragment, { children: _jsx(CellEvent, { "$placeholder": true, children: _jsx(CellEventBtn, { "aria-hidden": "true", style: { visibility: "hidden" }, "$placeholder": true, children: _jsx(CellEventTitle, { children: "\u00A0" }) }) }) }, event.key));
-            }
-            var styleEvent = {
-                zIndex: event.firstOfMulti ? 1 : 0,
-                position: "relative",
-                width: event.firstOfMulti ? "".concat(100 * event.width, "%") : "100%",
-            };
-            if (!calendarsMap[event.calendar.id].on) {
-                // @ts-expect-error nevermind
-                styleBtn.display = "none";
-            }
-            var styledProps = {
-                $view: view,
-                $selected: (eventClicked === null || eventClicked === void 0 ? void 0 : eventClicked.uid) === event.uid,
-                $past: event.isPast,
-                $color: event.color,
-                $isOutOfRange: event.$isOutOfRange,
-                $isToday: event.$isToday,
-            };
-            return (_jsx(Fragment, { children: _jsx(CellEvent, __assign({ style: styleEvent }, styledProps, { children: _jsx(CellEventBtn, __assign({ role: "button", style: styleBtn }, styledProps, { onClick: function () {
-                            return setEventClicked(function (prev) {
-                                return (prev === null || prev === void 0 ? void 0 : prev.uid) === event.uid ? null : event;
-                            });
-                        }, onMouseEnter: function () { return setEventHovered(event); }, onMouseLeave: function () { return setEventHovered(null); }, children: event.allDay ? (_jsx(CellEventTitle, { children: event.title })) : (_jsxs(_Fragment, { children: [_jsx(CellEventStart, { children: getDisplayTime(event.start) }), _jsx(CellEventTitle, { children: event.title })] })) })) })) }, event.key));
-        }) }));
+export const CalendarDaygridCell = ({ eventClicked, setEventClicked, // eventHovered,
+setEventHovered, view, maxEvents, events, calendarsMap, Cell = "div", CellOverflow = "div", CellEvent = "div", CellEventBtn = "div", CellEventTitle = "span", CellEventStart = "span" })=>{
+    const [isExpanded, expand] = useState(false);
+    const eventsWithoutPlaceholders = events.filter((event)=>!event.placeholder);
+    return /*#__PURE__*/ React.createElement(Cell, null, events.map((event, i)=>{
+        if (i === maxEvents && !isExpanded) {
+            return /*#__PURE__*/ React.createElement(CellOverflow, {
+                key: "overflowMessage" + i,
+                onClick: ()=>expand(true)
+            }, /*#__PURE__*/ React.createElement(IconExpand, null), eventsWithoutPlaceholders.length - maxEvents);
+        }
+        if (i > maxEvents && !isExpanded) return null;
+        if (event.placeholder) {
+            return /*#__PURE__*/ React.createElement(Fragment, {
+                key: event.key
+            }, /*#__PURE__*/ React.createElement(CellEvent, {
+                $placeholder: true
+            }, /*#__PURE__*/ React.createElement(CellEventBtn, {
+                "aria-hidden": "true",
+                style: {
+                    visibility: "hidden"
+                },
+                $placeholder: true
+            }, /*#__PURE__*/ React.createElement(CellEventTitle, null, "\xa0"))));
+        }
+        const styleEvent = {
+            zIndex: event.firstOfMulti ? 1 : 0,
+            position: "relative",
+            width: event.firstOfMulti ? `${100 * event.width}%` : "100%"
+        };
+        if (!calendarsMap[event.calendar.id].on) {
+            // @ts-expect-error nevermind
+            styleBtn.display = "none";
+        }
+        const styledProps = {
+            $view: view,
+            $selected: eventClicked?.uid === event.uid,
+            $past: event.isPast,
+            $color: event.color,
+            $isOutOfRange: event.$isOutOfRange,
+            $isToday: event.$isToday
+        };
+        return /*#__PURE__*/ React.createElement(Fragment, {
+            key: event.key
+        }, /*#__PURE__*/ React.createElement(CellEvent, {
+            style: styleEvent,
+            ...styledProps
+        }, /*#__PURE__*/ React.createElement(CellEventBtn, {
+            role: "button",
+            style: styleBtn,
+            ...styledProps,
+            onClick: ()=>setEventClicked((prev)=>prev?.uid === event.uid ? null : event),
+            onMouseEnter: ()=>setEventHovered(event),
+            onMouseLeave: ()=>setEventHovered(null)
+        }, event.allDay ? /*#__PURE__*/ React.createElement(CellEventTitle, null, event.title) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(CellEventStart, null, getDisplayTime(event.start)), /*#__PURE__*/ React.createElement(CellEventTitle, null, event.title)))));
+    }));
 };

package/Calendar/CalendarDaygridNav.d.ts

@@ -1,4 +1,4 @@
-import type { KoineComponentProps, KoineComponent } from "../types";
+import type { KoineComponent, KoineComponentProps } from "../types";
 import type { CalendarRange, CalendarView } from "./types";
 export type KoineCalendarDaygridNavProps = {
     locale: string;