@koine/react 2.0.0-beta.12 → 2.0.0-beta.15

package/Calendar/useCalendar.js

@@ -0,0 +1,176 @@
+import { __assign, __awaiter, __generator } from "tslib";
+import { useCallback, useEffect, useReducer, useState } from "react";
+import { getCalendarsEventsFromGoogle } from "./calendar-api-google.js";
+import { getEndDate, getNextDate, getPrevDate, getStartDate, isTodayInView, } from "./utils.js";
+export function useCalendar(_a) {
+    var _this = this;
+    var locale = _a.locale, apiKey = _a.apiKey, calendars = _a.calendars, initialEvents = _a.events, initialStart = _a.start, initialEnd = _a.end, _b = _a.view, initialView = _b === void 0 ? "month" : _b, _c = _a.timeZone, timeZone = _c === void 0 ? "" : _c, onError = _a.onError;
+    var _d = useState(initialView), view = _d[0], setView = _d[1];
+    var start = initialStart || getStartDate(new Date(), view);
+    var end = initialEnd || getEndDate(start, view);
+    var _e = useState([start, end]), range = _e[0], setRange = _e[1];
+    var _f = useState(isTodayInView(start, end)), todayInView = _f[0], setTodayInView = _f[1];
+    var _g = useState(initialEvents || {}), events = _g[0], setEvents = _g[1];
+    var _h = useState(null), eventHovered = _h[0], setEventHovered = _h[1];
+    var _j = useState(null), eventClicked = _j[0], setEventClicked = _j[1];
+    var _k = useReducer(function (state, action) {
+        var _a;
+        var type = action.type;
+        switch (type) {
+            case "events": {
+                var events_1 = action.payload;
+                return Object.entries(state).reduce(function (map, _a) {
+                    var id = _a[0], calendar = _a[1];
+                    map[id] = __assign(__assign({}, calendar), { events: events_1[id] || 0 });
+                    return map;
+                }, {});
+            }
+            case "visibility": {
+                var visible_1 = action.payload;
+                if (typeof visible_1 === "string") {
+                    return __assign(__assign({}, state), (_a = {}, _a[visible_1] = __assign(__assign({}, state[visible_1]), { on: !state[visible_1].on }), _a));
+                }
+                else {
+                    return Object.entries(state).reduce(function (map, _a) {
+                        var id = _a[0], calendar = _a[1];
+                        map[id] = __assign(__assign({}, calendar), { on: visible_1.indexOf(id) > -1 });
+                        return map;
+                    }, {});
+                }
+            }
+            default:
+                return state;
+        }
+    }, calendars.reduce(function (map, calendar) {
+        map[calendar.id] = __assign(__assign({}, calendar), { name: calendar.name || "", on: true, events: 0 });
+        return map;
+    }, {})), calendarsMap = _k[0], updateCalendars = _k[1];
+    var toggleCalendarVisibility = useCallback(function (idOrIds) {
+        updateCalendars({ type: "visibility", payload: idOrIds });
+    }, [updateCalendars]);
+    var updateCalendarsBasedOnEvents = useCallback(function (events) {
+        var payload = {};
+        for (var uid in events) {
+            var id = events[uid].calendar.id;
+            payload[id] = payload[id] || 0;
+            payload[id]++;
+        }
+        updateCalendars({ type: "events", payload: payload });
+    }, []);
+    var loadCalendars = useCallback(function (calendars, start, end) { return __awaiter(_this, void 0, void 0, function () {
+        var newEvents, e_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4, getCalendarsEventsFromGoogle({
+                            apiKey: apiKey,
+                            calendars: calendars,
+                            timeZone: timeZone,
+                            start: start,
+                            end: end,
+                        })];
+                case 1:
+                    newEvents = _a.sent();
+                    setEvents(newEvents);
+                    return [3, 3];
+                case 2:
+                    e_1 = _a.sent();
+                    if (onError)
+                        onError(e_1);
+                    return [3, 3];
+                case 3: return [2];
+            }
+        });
+    }); }, [setEvents, apiKey, timeZone, onError]);
+    var handleToday = useCallback(function () {
+        var start = range[0], end = range[1];
+        var newStart = getStartDate(new Date(), view);
+        var newEnd = getEndDate(newStart, view);
+        setRange([newStart, newEnd]);
+        if (start.getTime() !== newStart.getTime() ||
+            end.getTime() !== newEnd.getTime()) {
+            setEventClicked(null);
+            setEventHovered(null);
+        }
+    }, [view, range]);
+    var handlePrev = useCallback(function () {
+        setRange(function (_a) {
+            var start = _a[0];
+            var newStart = getPrevDate(start, view);
+            var newEnd = getEndDate(newStart, view);
+            return [newStart, newEnd];
+        });
+        setEventClicked(null);
+        setEventHovered(null);
+    }, [view]);
+    var handleNext = useCallback(function () {
+        setRange(function (_a) {
+            var start = _a[0];
+            var newStart = getNextDate(start, view);
+            var newEnd = getEndDate(newStart, view);
+            return [newStart, newEnd];
+        });
+        setEventClicked(null);
+        setEventHovered(null);
+    }, [view]);
+    var handleView = useCallback(function (newView) {
+        var newStart = getStartDate(start, newView);
+        var newEnd = getEndDate(newStart, newView);
+        setRange([newStart, newEnd]);
+        setView(newView);
+        setEventClicked(null);
+        setEventHovered(null);
+    }, [start]);
+    useEffect(function () {
+        var start = range[0], end = range[1];
+        loadCalendars(calendars, start, end);
+        setTodayInView(isTodayInView(start, end));
+    }, [range]);
+    useEffect(function () {
+        if (events) {
+            updateCalendarsBasedOnEvents(events);
+        }
+    }, [events, updateCalendarsBasedOnEvents]);
+    useEffect(function () {
+        if (eventClicked) {
+            if (!calendarsMap[eventClicked.calendar.id].on) {
+                setEventClicked(null);
+            }
+        }
+    }, [calendarsMap, eventClicked, setEventClicked]);
+    return {
+        view: view,
+        eventClicked: eventClicked,
+        setEventClicked: setEventClicked,
+        eventHovered: eventHovered,
+        setEventHovered: setEventHovered,
+        getDaygridNavProps: function () { return ({
+            locale: locale,
+            handlePrev: handlePrev,
+            handleNext: handleNext,
+            handleToday: handleToday,
+            handleView: handleView,
+            todayInView: todayInView,
+            range: range,
+            view: view,
+        }); },
+        getDaygridTableProps: function () { return ({
+            locale: locale,
+            events: events,
+            eventClicked: eventClicked,
+            setEventClicked: setEventClicked,
+            eventHovered: eventHovered,
+            setEventHovered: setEventHovered,
+            handlePrev: handlePrev,
+            handleNext: handleNext,
+            calendarsMap: calendarsMap,
+            range: range,
+            view: view,
+        }); },
+        getLegendProps: function () { return ({
+            calendarsMap: calendarsMap,
+            toggleCalendarVisibility: toggleCalendarVisibility,
+        }); },
+    };
+}

package/Calendar/utils.d.ts

@@ -1,4 +1,4 @@
-import type { CalendarEventsMap, CalendarView, CalendarViewWeeks } from "./types";
+import type { CalendarEventsMap, CalendarView, CalendarViewWeeks } from "./types.js";
 export declare function getEventTimestamp(dateLike: number | Date | string): number;
 export declare function getDisplayTime(date: Date): string;
 export declare function getStartDate(date: Date, view: CalendarView): Date;

package/Calendar/utils.js

@@ -0,0 +1,185 @@
+import { __assign } from "tslib";
+import addDays from "date-fns/addDays";
+import addMonths from "date-fns/addMonths";
+import addWeeks from "date-fns/addWeeks";
+import endOfMonth from "date-fns/endOfMonth";
+import endOfWeek from "date-fns/endOfWeek";
+import isWithinInterval from "date-fns/isWithinInterval";
+import startOfWeek from "date-fns/startOfWeek";
+import subMonths from "date-fns/subMonths";
+import subWeeks from "date-fns/subWeeks";
+export function getEventTimestamp(dateLike) {
+    var date = new Date(dateLike);
+    date.setHours(0, 0, 0, 0);
+    return date.valueOf() / 1000;
+}
+export function getDisplayTime(date) {
+    return (date.getHours() +
+        ":" +
+        "0".repeat(2 - date.getMinutes().toString().length) +
+        date.getMinutes());
+}
+export function getStartDate(date, view) {
+    date.setHours(0, 0, 0);
+    if (view === "month") {
+        date.setDate(1);
+    }
+    else if (view === "week") {
+        date = startOfWeek(date, { weekStartsOn: 1 });
+    }
+    return date;
+}
+export function getEndDate(start, view) {
+    var end = start;
+    if (view === "month") {
+        end = endOfMonth(start);
+    }
+    else if (view === "week") {
+        end = endOfWeek(start, { weekStartsOn: 1 });
+    }
+    end.setHours(23, 59, 59);
+    return end;
+}
+export function getPrevDate(date, view) {
+    if (view === "month") {
+        return subMonths(date, 1);
+    }
+    return subWeeks(date, 1);
+}
+export function getNextDate(date, view) {
+    if (view === "month") {
+        return addMonths(date, 1);
+    }
+    return addWeeks(date, 1);
+}
+export function isTodayInView(start, end) {
+    return isWithinInterval(new Date(), { start: start, end: end });
+}
+export function mergeCalendarEvents(first, second) {
+    var all = {};
+    addCalendarEvents(first, all);
+    addCalendarEvents(second, all);
+    return all;
+}
+export function addCalendarEvents(toAdd, toExtend) {
+    for (var id in toAdd) {
+        var event_1 = toAdd[id];
+        toExtend[id] = event_1;
+    }
+    return toExtend;
+}
+function getEventsByTimestamp(events) {
+    var output = {};
+    var _loop_1 = function (uid) {
+        var event_2 = events[uid];
+        event_2.days.forEach(function (timestamp) {
+            output[timestamp] = (output[timestamp] || {});
+            output[timestamp][uid] = event_2;
+        });
+    };
+    for (var uid in events) {
+        _loop_1(uid);
+    }
+    return output;
+}
+function getSortedEvents(events) {
+    var output = [];
+    for (var uid in events) {
+        output.push(events[uid]);
+    }
+    output.sort(function (a, b) {
+        var multi = Number(b.multi) - Number(a.multi);
+        var allDay = Number(b.allDay) - Number(a.allDay);
+        var start = a.start.getTime() - b.start.getTime();
+        var created = a.created.getTime() - b.created.getTime();
+        return multi || allDay || start || created;
+    });
+    return output;
+}
+var FREE_SLOT = 0;
+var BUSY_SLOT = 1;
+export function processEventsInView(eventsMap, calendarView, month, weeks) {
+    var eventsByTimestamp = getEventsByTimestamp(eventsMap);
+    var eventsList = getSortedEvents(eventsMap);
+    var todayDate = new Date();
+    var todayTimestamp = getEventTimestamp(todayDate);
+    var startedAtTopMap = {};
+    var viewWeeks = [];
+    var _loop_2 = function (weekIdx) {
+        var viewWeek = {
+            props: { key: "week.".concat(weekIdx) },
+            days: [],
+        };
+        var weekStartDate = weeks[weekIdx];
+        var weekStartDay = weekStartDate.getDate();
+        var weekStartTimestamp = getEventTimestamp(new Date(weekStartDate));
+        var weekEndTimestamp = getEventTimestamp(addDays(new Date(weekStartDate), 6));
+        for (var dayNumber = 0; dayNumber < 7; dayNumber++) {
+            var dayDate = new Date(new Date(weekStartDate).setDate(weekStartDay + dayNumber));
+            var dayTimestamp = getEventTimestamp(dayDate);
+            var $isToday = todayTimestamp === dayTimestamp;
+            var $isOutOfRange = calendarView === "month" && dayDate.getMonth() !== month;
+            var contextualProps = {
+                $isToday: $isToday,
+                $isOutOfRange: $isOutOfRange,
+            };
+            var viewDay = {
+                props: __assign({ key: "day.".concat(dayTimestamp) }, contextualProps),
+                timestamp: dayTimestamp + "",
+                label: dayDate.getDate() + "",
+                events: [],
+            };
+            if (eventsByTimestamp === null || eventsByTimestamp === void 0 ? void 0 : eventsByTimestamp[dayTimestamp]) {
+                var verticalSlots = Object.keys(eventsByTimestamp[dayTimestamp]).map(function () { return FREE_SLOT; });
+                for (var eventIdx = 0; eventIdx < eventsList.length; eventIdx++) {
+                    var event_3 = eventsList[eventIdx];
+                    var width = 1;
+                    var top_1 = 0;
+                    var firstOfMulti = void 0;
+                    if (!event_3.daysMap[dayTimestamp]) {
+                        continue;
+                    }
+                    if (event_3.multi) {
+                        width = event_3.days.filter(function (t) { return t >= weekStartTimestamp && t <= weekEndTimestamp; }).length;
+                        if (event_3.days.indexOf(dayTimestamp) === 0 || dayNumber === 0) {
+                            firstOfMulti = true;
+                        }
+                    }
+                    if (startedAtTopMap[event_3.uid]) {
+                        top_1 = startedAtTopMap[event_3.uid];
+                    }
+                    else {
+                        for (var verticalIdx = 0; verticalIdx < verticalSlots.length; verticalIdx++) {
+                            var freeOrBusy = verticalSlots[verticalIdx];
+                            if (freeOrBusy !== BUSY_SLOT) {
+                                top_1 = verticalIdx;
+                                break;
+                            }
+                        }
+                    }
+                    verticalSlots[top_1] = BUSY_SLOT;
+                    if (firstOfMulti) {
+                        startedAtTopMap[event_3.uid] = top_1;
+                    }
+                    viewDay.events.push(__assign(__assign(__assign({ key: "event.".concat(dayTimestamp, "-").concat(top_1) }, contextualProps), event_3), { isPast: todayDate > event_3.end, firstOfMulti: firstOfMulti, top: top_1, width: width }));
+                }
+                for (var i = 0; i < verticalSlots.length; i++) {
+                    if (verticalSlots[i] !== BUSY_SLOT) {
+                        viewDay.events.push({
+                            key: "event.".concat(dayTimestamp, "-").concat(i, "}"),
+                            placeholder: true,
+                            top: i,
+                        });
+                    }
+                }
+                viewDay.events.sort(function (a, b) { return a.top - b.top; });
+            }
+            viewWeek.days.push(viewDay);
+        }
+        viewWeeks.push(viewWeek);
+    };
+    for (var weekIdx = 0; weekIdx < weeks.length; weekIdx++) {
+        _loop_2(weekIdx);
+    }
+    return viewWeeks;
+}

package/Carousel/Carousel.js

@@ -0,0 +1 @@
+export var KoineCarousel = null;

package/Carousel/CarouselCss.d.ts

@@ -1,35 +1,13 @@
-/// <reference types="react" />
-import { ColProps, RowProps } from "../Grid";
+import { ColProps, RowProps } from "../Grid/index.js";
 export declare const CarouselCssRow: any;
 export declare const CarouselCssCol: any;
 export type KoineCarouselCssProps = ColProps & {
-    /**
-     * Override the `<Row>` gutter, if not specified `$gutter` prop is used
-     */
     $gutterRow?: RowProps["$gutter"];
-    /**
-     * Override the `<Col>` gutter, if not specified `$gutter` prop is used
-     */
     $gutterCol?: ColProps["$gutter"];
-    /**
-     * If items are not passed solely children are used
-     */
     items?: JSX.Element[];
-    /**
-     * @default undefined (in percentage)
-     */
     $proportion?: number;
-    /**
-     * @default "start"
-     */
     $snap?: React.CSSProperties["scrollSnapAlign"];
-    /**
-     * Carousel's slide width
-     */
     width?: number;
 };
 export type CarouselCssProps = React.PropsWithChildren<KoineCarouselCssProps>;
-/**
- * For programmatic usage an example here @see https://stackoverflow.com/a/65902068/9122820
- */
 export declare const KoineCarouselCss: ({ items, $gutterRow, $gutterCol, $gutter, $proportion, $snap, width, children, ...colProps }: CarouselCssProps) => import("react/jsx-runtime").JSX.Element | null;

package/Carousel/CarouselCss.js

@@ -0,0 +1,19 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, useId } from "react";
+import styled from "styled-components";
+import { Col, GRID_GUTTER_DEFAULT as DF, Row, } from "../Grid/index.js";
+export var CarouselCssRow = styled(Row)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n\n  scroll-behavior: smooth;\n  scroll-snap-type: x;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  ", "\n\n  scroll-behavior: smooth;\n  scroll-snap-type: x;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])), function (_a) {
+    var cs = _a.$gutter, gutter = _a.theme.gutter;
+    return "\n    margin-left: -".concat(cs === DF ? gutter[DF] : (gutter[DF] - gutter[cs]) * 2, "px;\n    margin-right: -").concat(cs === DF ? gutter[DF] : (gutter[DF] - gutter[cs]) * 2, "px;\n    padding-left: ").concat(cs === DF ? gutter[DF] : gutter[DF] - gutter[cs], "px;\n    padding-right: ").concat(cs === DF ? gutter[DF] : gutter[DF] - gutter[cs], "px;\n  ");
+});
+export var CarouselCssCol = styled(Col)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  position: relative;\n  scroll-snap-align: ", ";\n"], ["\n  ", "\n  position: relative;\n  scroll-snap-align: ", ";\n"])), function (p) { return p.$width && "flex-basis: ".concat(p.$width, "px; min-width: ").concat(p.$width, "px;"); }, function (p) { return p.$snap; });
+export var KoineCarouselCss = function (_a) {
+    var items = _a.items, $gutterRow = _a.$gutterRow, $gutterCol = _a.$gutterCol, _b = _a.$gutter, $gutter = _b === void 0 ? "quarter" : _b, $proportion = _a.$proportion, _c = _a.$snap, $snap = _c === void 0 ? "center" : _c, width = _a.width, children = _a.children, colProps = __rest(_a, ["items", "$gutterRow", "$gutterCol", "$gutter", "$proportion", "$snap", "width", "children"]);
+    var slides = children ? Children.toArray(children) : items;
+    var id = useId();
+    if (!slides)
+        return null;
+    return (_jsx(CarouselCssRow, { "$noWrap": true, "$gutter": $gutterRow || $gutter, children: slides.map(function (_slide, idx) { return (_jsx(CarouselCssCol, __assign({}, colProps, { "$gutter": $gutterCol || $gutter, "$width": width, children: slides[idx] }), "CarouselCssCol-".concat(id, "-").concat(idx))); }) }));
+};
+var templateObject_1, templateObject_2;

package/Carousel/index.d.ts

@@ -1 +1 @@
-export * from "./CarouselCss";
+export * from "./CarouselCss.js";

package/Carousel/index.js

@@ -0,0 +1 @@
+export * from "./CarouselCss.js";

package/Collapsable/Collapsable.js

@@ -0,0 +1 @@
+export var Collapsable = null;

package/Collapsable/CollapsableReach.d.ts

@@ -1,6 +0,0 @@
-/**
- * @file
- *
- * Maybe do a simplified version following this example:
- * https://codesandbox.io/s/framer-motion-accordion-qx958?file=/src/Example.tsx
- */

package/Collapsable/CollapsableReach.js

@@ -0,0 +1 @@
+"use strict";

package/Collapsable/index.d.ts

@@ -1 +1 @@
-export * from "./Collapsable";
+export * from "./Collapsable.js";

package/Collapsable/index.js

@@ -0,0 +1 @@
+export * from "./Collapsable.js";

package/Debug/Debug.js

@@ -0,0 +1,9 @@
+import { __makeTemplateObject } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: #f4f4f4;\n  border: 1px solid #ddd;\n  border-left: 3px solid #f36d33;\n  color: #666;\n  page-break-inside: avoid;\n  font-family: monospace;\n  font-size: small;\n  line-height: 1.6;\n  margin-bottom: 1.6em;\n  max-width: 100%;\n  overflow: auto;\n  padding: 1em 1.5em;\n  display: block;\n  word-wrap: break-word;\n"], ["\n  background: #f4f4f4;\n  border: 1px solid #ddd;\n  border-left: 3px solid #f36d33;\n  color: #666;\n  page-break-inside: avoid;\n  font-family: monospace;\n  font-size: small;\n  line-height: 1.6;\n  margin-bottom: 1.6em;\n  max-width: 100%;\n  overflow: auto;\n  padding: 1em 1.5em;\n  display: block;\n  word-wrap: break-word;\n"])));
+export var Debug = function (_a) {
+    var data = _a.data;
+    return _jsx(Root, { children: JSON.stringify(data, undefined, 2) });
+};
+var templateObject_1;

package/Debug/index.d.ts

@@ -1 +1 @@
-export * from "./Debug";
+export * from "./Debug.js";

package/Debug/index.js

@@ -0,0 +1 @@
+export * from "./Debug.js";

package/Details/Details.d.ts

@@ -1,18 +1,12 @@
-/// <reference types="react" />
-/// <reference types="react" />
 import type { Simplify } from "@koine/utils";
 import { type WithComponents } from "../helpers";
 export type OwnProps = React.ComponentPropsWithoutRef<"details"> & {
     open?: boolean;
     onChange?: () => any;
     summary: null | React.ReactNode;
-    /** Amount of milliseconds after which the component collapses */
-    /** @default "Expand" */
     ariaExpand?: string;
-    /** @default "Collapse" */
     ariaCollapse?: string;
     id?: string;
-    /** Used to trigger a recalculation effect */
     recalc?: any;
 };
 export type Components = {

package/Details/Details.js

@@ -0,0 +1,52 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useRef, useState, } from "react";
+import { extendComponent, } from "../helpers/index.js";
+import { useWindowSize } from "../hooks/useWindowSize.js";
+export var Root = "details";
+export var Summary = "summary";
+export var Body = "div";
+export var Content = "div";
+var DetailsWithRef = forwardRef(function Details(_a, ref) {
+    var id = _a.id, propOpen = _a.open, recalc = _a.recalc, summary = _a.summary, children = _a.children, _Root = _a.Root, _Summary = _a.Summary, _Body = _a.Body, _Content = _a.Content, onChange = _a.onChange, props = __rest(_a, ["id", "open", "recalc", "summary", "children", "Root", "Summary", "Body", "Content", "onChange"]);
+    var isControlled = typeof propOpen !== "undefined";
+    var _b = useState(propOpen), stateOpen = _b[0], setStateOpen = _b[1];
+    var _c = useState(0), setHeight = _c[1];
+    var hash = id ? "#".concat(id) : "";
+    var winSize = useWindowSize();
+    var open = isControlled ? propOpen : stateOpen;
+    var overflow = useState(open ? "unset" : "hidden")[0];
+    var content = useRef(null);
+    var defaultId = useId();
+    id = id || defaultId;
+    var handleClick = useCallback(function () {
+        if (hash) {
+            window.history.replaceState(null, "", open ? window.location.pathname + window.location.search : hash);
+        }
+        if (onChange) {
+            onChange();
+        }
+        if (!isControlled) {
+            setStateOpen(function (prevOpen) { return !prevOpen; });
+        }
+    }, [open, hash, onChange, isControlled]);
+    useEffect(function () {
+        if (content.current) {
+            setHeight(Math.ceil(content.current.offsetHeight));
+        }
+    }, [winSize, recalc]);
+    useEffect(function () {
+        if (!isControlled && hash && window.location.hash === hash) {
+            setStateOpen(true);
+        }
+    }, [hash, isControlled]);
+    return (_jsxs(Root, __assign({}, props, { open: open || false, children: [_jsx(Summary, { "$open": open, onClick: handleClick, children: summary || " " }), _jsx(Body, { "$open": open, style: { overflow: overflow }, children: _jsx(Content, { "$open": open, style: {
+                        pointerEvents: open ? "all" : "none",
+                    }, children: children }) })] })));
+});
+export var KoineDetails = extendComponent(DetailsWithRef, {
+    Root: Root,
+    Summary: Summary,
+    Body: Body,
+    Content: Content,
+});

package/Details/index.d.ts

@@ -1 +1 @@
-export * from "./Details";
+export * from "./Details.js";

package/Details/index.js

@@ -0,0 +1 @@
+export * from "./Details.js";

package/Dialog/DialogMui.d.ts

@@ -2,13 +2,11 @@ import ModalUnstyled, { type ModalProps as ModalUnstyledProps } from "@mui/base/
 import type { MotionProps } from "framer-motion";
 import React from "react";
 import type { Simplify } from "@koine/utils";
-import { type WithComponents } from "../helpers";
+import { type WithComponents } from "../helpers/index.js";
 type ReducedModalUnstyledProps = Omit<ModalUnstyledProps, "onClose" | "BackdropComponent" | "classes" | "closeAfterTransition" | "component" | "components" | "componentsProps">;
 export type OwnProps = React.PropsWithChildren<ReducedModalUnstyledProps & {
     onClose: (event: object, reason?: string) => any;
     title?: string;
-    /** @default true */
-    /** @default false */
     $scrollPaper?: boolean;
     mBackdrop?: MotionProps;
     mPaper?: MotionProps;

package/Dialog/DialogMui.js

@@ -0,0 +1,39 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ModalUnstyled from "@mui/base/Modal";
+import { forwardRef, useRef } from "react";
+import { MdClear as IconClose } from "react-icons/md";
+import { extendComponent } from "../helpers/index.js";
+export var Root = ModalUnstyled;
+export var Backdrop = "div";
+export var Container = "div";
+export var Paper = "div";
+export var Close = "button";
+export var Header = "div";
+export var Body = "div";
+var DialogWithRef = forwardRef(function Dialog(_a, ref) {
+    var children = _a.children, title = _a.title, $scrollPaper = _a.$scrollPaper, _Root = _a.Root, _Backdrop = _a.Backdrop, _Container = _a.Container, _Paper = _a.Paper, _Close = _a.Close, _Header = _a.Header, _Body = _a.Body, onClose = _a.onClose, props = __rest(_a, ["children", "title", "$scrollPaper", "Root", "Backdrop", "Container", "Paper", "Close", "Header", "Body", "onClose"]);
+    var backdropClick = useRef();
+    var handleMouseDown = function (event) {
+        backdropClick.current = event.target === event.currentTarget;
+    };
+    var handleBackdropClick = function (event) {
+        if (!backdropClick.current) {
+            return;
+        }
+        backdropClick.current = null;
+        if (onClose) {
+            onClose(event, "backdropClick");
+        }
+    };
+    return (_jsx(Root, __assign({ slots: { backdrop: Backdrop }, onClick: handleBackdropClick, onClose: onClose, ref: ref }, props, { children: _jsx(Container, { "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown, children: _jsxs(Paper, { "aria-label": title || "", "$scrollPaper": $scrollPaper, children: [title && _jsx(Header, { children: title }), _jsx(Close, { onClick: onClose, children: _jsx(IconClose, {}) }), _jsx(Body, { children: children })] }) }) })));
+});
+export var KoineDialog = extendComponent(DialogWithRef, {
+    Root: Root,
+    Backdrop: Backdrop,
+    Container: Container,
+    Paper: Paper,
+    Close: Close,
+    Header: Header,
+    Body: Body,
+});

package/Dialog/css/bare.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import * as _ from "../DialogMui";
+import * as _ from "../DialogMui.js";
 export declare const Root: import("react").ForwardRefExoticComponent<Omit<{
     className?: string | undefined;
     ref?: import("react").Ref<any> | undefined;

package/Dialog/css/bare.js

@@ -0,0 +1,20 @@
+import { __makeTemplateObject } from "tslib";
+import { classed, extendComponent } from "../../helpers/index.js";
+import * as _ from "../DialogMui.js";
+export var Root = classed(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["dialog"], ["dialog"])));
+export var Backdrop = classed(_.Backdrop)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["dialogBackdrop"], ["dialogBackdrop"])));
+export var Container = classed(_.Container)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["dialogContainer"], ["dialogContainer"])));
+export var Paper = classed(_.Paper)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["dialogPaper"], ["dialogPaper"])));
+export var Close = classed(_.Close)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\"dialogClose"], ["\"dialogClose"])));
+export var Header = classed(_.Header)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["dialogHeader"], ["dialogHeader"])));
+export var Body = classed(_.Body)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["dialogBody"], ["dialogBody"])));
+export var KoineDialog = extendComponent(_.KoineDialog, {
+    Root: Root,
+    Backdrop: Backdrop,
+    Container: Container,
+    Paper: Paper,
+    Close: Close,
+    Header: Header,
+    Body: Body,
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Dialog/index.d.ts

@@ -1,2 +1,2 @@
-export type { KoineDialogProps } from "./DialogMui";
-export { KoineDialog } from "./DialogMui";
+export type { KoineDialogProps } from "./DialogMui.js";
+export { KoineDialog } from "./DialogMui.js";

package/Dialog/index.js

@@ -0,0 +1 @@
+export { KoineDialog } from "./DialogMui.js";

package/Dialog/m/bare.js

@@ -0,0 +1,3 @@
+import { extendComponent } from "../../helpers/index.js";
+var Dialog = function () { return null; };
+export var KoineDialog = extendComponent(Dialog, {});