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

package/sc/index.d.ts

@@ -1,30 +1,30 @@
-export * from "../shared";
-export * from "../Alert";
-export * from "../Animations";
-export * from "../Autocomplete";
-export * from "../Bg";
-export * from "../Breadcrumbs";
-export * from "../Buttons";
-export * from "../Carousel";
-export * from "../Collapsable";
-export * from "../Debug";
-export { KoineDialog, type KoineDialogProps } from "../Dialog/sc/bare";
-export { KoineForm, type KoineFormProps } from "../Form/sc/bare";
-export * from "../Forms";
-export * from "../Grid";
-export * from "../Hamburger";
-export * from "../Header";
-export * from "../Hidden";
-export * from "../Img";
-export * from "../Link";
-export * from "../MenuItem";
-export * from "../Pagination";
-export * from "../Pill";
-export * from "../Progress";
-export * from "../Rating";
-export * from "../Sidebar";
-export * from "../Spacing";
-export * from "../Sticky";
-export * from "../styles";
-export * from "../Tabs";
-export * from "../Typography";
+export * from "../shared/index.js";
+export * from "../Alert/index.js";
+export * from "../Animations/index.js";
+export * from "../Autocomplete/index.js";
+export * from "../Bg/index.js";
+export * from "../Breadcrumbs/index.js";
+export * from "../Buttons/index.js";
+export * from "../Carousel/index.js";
+export * from "../Collapsable/index.js";
+export * from "../Debug/index.js";
+export { KoineDialog, type KoineDialogProps } from "../Dialog/sc/bare.js";
+export { KoineForm, type KoineFormProps } from "../Form/sc/bare.js";
+export * from "../Forms/index.js";
+export * from "../Grid/index.js";
+export * from "../Hamburger/index.js";
+export * from "../Header/index.js";
+export * from "../Hidden/index.js";
+export * from "../Img/index.js";
+export * from "../Link/index.js";
+export * from "../MenuItem/index.js";
+export * from "../Pagination/index.js";
+export * from "../Pill/index.js";
+export * from "../Progress/index.js";
+export * from "../Rating/index.js";
+export * from "../Sidebar/index.js";
+export * from "../Spacing/index.js";
+export * from "../Sticky/index.js";
+export * from "../styles/index.js";
+export * from "../Tabs/index.js";
+export * from "../Typography/index.js";

package/sc/index.js

@@ -0,0 +1,30 @@
+export * from "../shared/index.js";
+export * from "../Alert/index.js";
+export * from "../Animations/index.js";
+export * from "../Autocomplete/index.js";
+export * from "../Bg/index.js";
+export * from "../Breadcrumbs/index.js";
+export * from "../Buttons/index.js";
+export * from "../Carousel/index.js";
+export * from "../Collapsable/index.js";
+export * from "../Debug/index.js";
+export { KoineDialog } from "../Dialog/sc/bare.js";
+export { KoineForm } from "../Form/sc/bare.js";
+export * from "../Forms/index.js";
+export * from "../Grid/index.js";
+export * from "../Hamburger/index.js";
+export * from "../Header/index.js";
+export * from "../Hidden/index.js";
+export * from "../Img/index.js";
+export * from "../Link/index.js";
+export * from "../MenuItem/index.js";
+export * from "../Pagination/index.js";
+export * from "../Pill/index.js";
+export * from "../Progress/index.js";
+export * from "../Rating/index.js";
+export * from "../Sidebar/index.js";
+export * from "../Spacing/index.js";
+export * from "../Sticky/index.js";
+export * from "../styles/index.js";
+export * from "../Tabs/index.js";
+export * from "../Typography/index.js";

package/scm/index.d.ts

@@ -1,29 +1,29 @@
-export * from "../shared";
-export * from "../Alert";
-export * from "../Animations";
-export * from "../Autocomplete";
-export * from "../Bg";
-export * from "../Breadcrumbs";
-export * from "../Buttons";
-export * from "../Carousel";
-export * from "../Collapsable";
-export * from "../Debug";
-export { KoineDialog, type KoineDialogProps } from "../Dialog/sc/framer";
-export * from "../Forms";
-export * from "../Grid";
-export * from "../Hamburger";
-export * from "../Header";
-export * from "../Hidden";
-export * from "../Img";
-export * from "../Link";
-export * from "../MenuItem";
-export * from "../Pagination";
-export * from "../Pill";
-export * from "../Progress";
-export * from "../Rating";
-export * from "../Sidebar";
-export * from "../Spacing";
-export * from "../Sticky";
-export * from "../styles";
-export * from "../Tabs";
-export * from "../Typography";
+export * from "../shared/index.js";
+export * from "../Alert/index.js";
+export * from "../Animations/index.js";
+export * from "../Autocomplete/index.js";
+export * from "../Bg/index.js";
+export * from "../Breadcrumbs/index.js";
+export * from "../Buttons/index.js";
+export * from "../Carousel/index.js";
+export * from "../Collapsable/index.js";
+export * from "../Debug/index.js";
+export { KoineDialog, type KoineDialogProps } from "../Dialog/sc/framer.js";
+export * from "../Forms/index.js";
+export * from "../Grid/index.js";
+export * from "../Hamburger/index.js";
+export * from "../Header/index.js";
+export * from "../Hidden/index.js";
+export * from "../Img/index.js";
+export * from "../Link/index.js";
+export * from "../MenuItem/index.js";
+export * from "../Pagination/index.js";
+export * from "../Pill/index.js";
+export * from "../Progress/index.js";
+export * from "../Rating/index.js";
+export * from "../Sidebar/index.js";
+export * from "../Spacing/index.js";
+export * from "../Sticky/index.js";
+export * from "../styles/index.js";
+export * from "../Tabs/index.js";
+export * from "../Typography/index.js";

package/scm/index.js

@@ -0,0 +1,29 @@
+export * from "../shared/index.js";
+export * from "../Alert/index.js";
+export * from "../Animations/index.js";
+export * from "../Autocomplete/index.js";
+export * from "../Bg/index.js";
+export * from "../Breadcrumbs/index.js";
+export * from "../Buttons/index.js";
+export * from "../Carousel/index.js";
+export * from "../Collapsable/index.js";
+export * from "../Debug/index.js";
+export { KoineDialog } from "../Dialog/sc/framer.js";
+export * from "../Forms/index.js";
+export * from "../Grid/index.js";
+export * from "../Hamburger/index.js";
+export * from "../Header/index.js";
+export * from "../Hidden/index.js";
+export * from "../Img/index.js";
+export * from "../Link/index.js";
+export * from "../MenuItem/index.js";
+export * from "../Pagination/index.js";
+export * from "../Pill/index.js";
+export * from "../Progress/index.js";
+export * from "../Rating/index.js";
+export * from "../Sidebar/index.js";
+export * from "../Spacing/index.js";
+export * from "../Sticky/index.js";
+export * from "../styles/index.js";
+export * from "../Tabs/index.js";
+export * from "../Typography/index.js";

package/shared/index.d.ts

@@ -1,8 +1,8 @@
-export * from "../Calendar";
-export * from "../Dialog";
-export * from "../FaviconTags";
-export * from "../helpers";
-export * from "../hooks";
-export * from "../Meta";
-export * from "../NoJs";
-export * from "../types";
+export * from "../Calendar/index.js";
+export * from "../Dialog/index.js";
+export * from "../FaviconTags.js";
+export * from "../helpers/index.js";
+export * from "../hooks/index.js";
+export * from "../Meta/index.js";
+export * from "../NoJs/index.js";
+export * from "../types.js";

package/shared/index.js

@@ -0,0 +1,8 @@
+export * from "../Calendar/index.js";
+export * from "../Dialog/index.js";
+export * from "../FaviconTags.js";
+export * from "../helpers/index.js";
+export * from "../hooks/index.js";
+export * from "../Meta/index.js";
+export * from "../NoJs/index.js";
+export * from "../types.js";

package/styles/Body.d.ts

@@ -1,10 +1,2 @@
 export declare const BodyRoot: any;
-/**
- * If you have background graphics to overlap you might need to add:
- *
- * ```css
- * z-index: 1;
- * position: relative;
- * ```
- */
 export declare const BodyMain: any;

package/styles/Body.js

@@ -0,0 +1,5 @@
+import { __makeTemplateObject } from "tslib";
+import styled from "styled-components";
+export var BodyRoot = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n"], ["\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n"])));
+export var BodyMain = styled.main(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+var templateObject_1, templateObject_2;

package/styles/Global.d.ts

@@ -1,15 +1,2 @@
-/**
- * App global style
- *
- * For examples of what to do here take a look at [Bootstrap's reset](https://github.com/twbs/bootstrap/blob/main/scss/_reboot.scss)
- * and similar.
- *
- * What we do here:
- * - set the base font family on all possible elements including placeholders prevent Chrome showing a standard font when using the autofill feature
- *  - @see https://stackoverflow.com/a/60987373/1938970
- * - set the base font size on all possible elements to prevent weird zooming on input fields on iPhone iOS devices.
- *  - @see https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/
- *  - @see https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/
- */
 export declare const stylesGlobal = "\n  body {\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: scroll;\n  }\n\n  body,\n  button,\n  input,\n  textarea,\n  select,\n  select:-webkit-autofill::first-line,\n  input:-webkit-autofill::first-line {\n    font-family: var(--font), -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n      Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\",\n      sans-serif;\n    font-size: var(--fontSize);\n  }\n\n  html {\n    box-sizing: border-box;\n    @media (prefers-reduced-motion: no-preference) {\n      scroll-behavior: smooth;\n    }\n  }\n\n  *,\n  *:before,\n  *:after {\n    box-sizing: inherit;\n    -webkit-tap-highlight-color: transparent;\n  }\n";
 export declare const StylesGlobal: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;

package/styles/Global.js

@@ -0,0 +1,5 @@
+import { __makeTemplateObject } from "tslib";
+import { createGlobalStyle } from "styled-components";
+export var stylesGlobal = "\n  body {\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: scroll;\n  }\n\n  body,\n  button,\n  input,\n  textarea,\n  select,\n  select:-webkit-autofill::first-line,\n  input:-webkit-autofill::first-line {\n    font-family: var(--font), -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n      Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\",\n      sans-serif;\n    font-size: var(--fontSize);\n  }\n\n  html {\n    box-sizing: border-box;\n    @media (prefers-reduced-motion: no-preference) {\n      scroll-behavior: smooth;\n    }\n  }\n\n  *,\n  *:before,\n  *:after {\n    box-sizing: inherit;\n    -webkit-tap-highlight-color: transparent;\n  }\n";
+export var StylesGlobal = createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["", ""], ["", ""])), stylesGlobal);
+var templateObject_1;

package/styles/index.d.ts

@@ -1,7 +1,7 @@
-export { BodyMain, BodyRoot } from "./Body";
-export { StylesGlobal, stylesGlobal } from "./Global";
-export { MediaDirection, MediaQuery, MediaQueryFunction, between, down, generateMediaQueries, max, min, only, up, useMedia, } from "./media";
-export { SpacingArgs, SpacingDevices, SpacingDirection, SpacingDirectionAxis, SpacingFactor, SpacingProperty, SpacingSize, spacing, spacingBottom, spacingTop, spacingVertical, } from "./spacing";
-export { colStretch, centered, ellipsis, inset0, invisible, overlay, stateFocus, } from "./styled";
-export { breakpoints, createTheme, useTheme, type Breakpoint, type Breakpoints, type Theme, type ThemeOptions, } from "./theme";
-export { THEME_DEFAULT, THEME_KEY, type ThemeCookie, ThemeVanillaContext, type ThemeVanillaContextType, ThemeVanillaProvider, type ThemeVanillaProviderProps, type ThemeVanillaValue, getInitialThemeFromClient, } from "./theme--vanilla";
+export { BodyMain, BodyRoot } from "./Body.js";
+export { StylesGlobal, stylesGlobal } from "./Global.js";
+export { MediaDirection, MediaQuery, MediaQueryFunction, between, down, generateMediaQueries, max, min, only, up, useMedia, } from "./media.js";
+export { SpacingArgs, SpacingDevices, SpacingDirection, SpacingDirectionAxis, SpacingFactor, SpacingProperty, SpacingSize, spacing, spacingBottom, spacingTop, spacingVertical, } from "./spacing.js";
+export { colStretch, centered, ellipsis, inset0, invisible, overlay, stateFocus, } from "./styled.js";
+export { breakpoints, createTheme, useTheme, type Breakpoint, type Breakpoints, type Theme, type ThemeOptions, } from "./theme.js";
+export { THEME_DEFAULT, THEME_KEY, type ThemeCookie, ThemeVanillaContext, type ThemeVanillaContextType, ThemeVanillaProvider, type ThemeVanillaProviderProps, type ThemeVanillaValue, getInitialThemeFromClient, } from "./theme--vanilla.js";

package/styles/index.js

@@ -0,0 +1,7 @@
+export { BodyMain, BodyRoot } from "./Body.js";
+export { StylesGlobal, stylesGlobal } from "./Global.js";
+export { between, down, generateMediaQueries, max, min, only, up, useMedia, } from "./media.js";
+export { spacing, spacingBottom, spacingTop, spacingVertical, } from "./spacing.js";
+export { colStretch, centered, ellipsis, inset0, invisible, overlay, stateFocus, } from "./styled.js";
+export { breakpoints, createTheme, useTheme, } from "./theme.js";
+export { THEME_DEFAULT, THEME_KEY, ThemeVanillaContext, ThemeVanillaProvider, getInitialThemeFromClient, } from "./theme--vanilla.js";

package/styles/media.d.ts

@@ -1,4 +1,4 @@
-import { Breakpoint, Breakpoints } from "./theme";
+import { Breakpoint, Breakpoints } from "./theme.js";
 export declare const min: MediaQueryFunction, max: MediaQueryFunction, up: MediaQueryFunction, down: (br: Breakpoint) => string, between: (br1: Breakpoint, br2: Breakpoint) => string, only: (br: Breakpoint) => string;
 export type MediaDirection = "min" | "max";
 export type MediaQuery = `${MediaDirection}:${Breakpoint}`;
@@ -8,55 +8,6 @@ export type MediaQueryFunction = {
     (breakpoint: Breakpoint): string;
 };
 export declare function useMedia(media: MediaQuery): boolean;
-/**
- * Generate media queries helpers
- *
- * Usage:
- * ```jsx
- * import { generateMediaQueries } from "@koine/react";
- *
- * export const breakpoints = {
- *   xs: 0,
- *   sm: 440,
- *   md: 768,
- *   lg: 1024,
- *   xl: 1368,
- *   xxl: 1690,
- * } as const;
- *
- * export const { min, max, up, down, between, only } = generateMediaQueries(breakpoints);
- * ```
- *
- * Consider the following syntaxes, using normal CSS is just slightly
- * longer but it aovid js imports, reduce the js overhead and improve CSS
- * highlighting in the editor.
- *
- * Even if we would reduce the function signature to the bare minimum the advantage
- * in terms of typing would not be much, also loosing in readability.
- *
- * ```css
- * // but unfortunately this does not work
- * @media (min-width: var(--b-sm)) {}
- * @media (min-width: 480px) {}
- *
- * ${media("min", "sm")} {}
- * ${mediaMin("sm")} {}
- * ${min.sm} {}
- * ${p => p.theme.min.sm}``
- * ```
- *
- * Related projects:
- * @see https://github.com/mg901/styled-breakpoints
- * @see https://github.com/morajabi/styled-media-query
- *
- * @see https://www.w3.org/TR/mediaqueries-5/#custom-mq The spec would allow for
- * something like this syntax
- *
- * ```css
- * @custom-media --narrow-window (max-width: 30em);
- * @media (--narrow-window) {}
- * ```
- */
 export declare function generateMediaQueries(breakpoints: Breakpoints): {
     min: MediaQueryFunction;
     max: MediaQueryFunction;

package/styles/media.js

@@ -0,0 +1,74 @@
+var _a;
+import { useEffect, useState } from "react";
+import { breakpoints, useTheme } from "./theme.js";
+export var min = (_a = generateMediaQueries(breakpoints), _a.min), max = _a.max, up = _a.up, down = _a.down, between = _a.between, only = _a.only;
+export function useMedia(media) {
+    var breakpoints = useTheme().breakpoints;
+    var _a = useState(false), matches = _a[0], setMatches = _a[1];
+    var _b = media.split(":"), _c = _b[0], direction = _c === void 0 ? "min" : _c, breakpoint = _b[1];
+    var px = breakpoints[breakpoint];
+    if (direction === "max") {
+        px = px - 0.02;
+    }
+    var query = "(".concat(direction, "-width: ").concat(px, "px)");
+    useEffect(function () {
+        var mq = window.matchMedia(query);
+        var handleChange = function (event) {
+            setMatches(event.matches);
+        };
+        setMatches(mq.matches);
+        if (!mq.addEventListener) {
+            mq.addListener(handleChange);
+            return function () {
+                mq.removeListener(handleChange);
+            };
+        }
+        mq.addEventListener("change", handleChange);
+        return function () {
+            mq.removeEventListener("change", handleChange);
+        };
+    }, [query]);
+    return matches;
+}
+export function generateMediaQueries(breakpoints) {
+    var temp = Object.keys(breakpoints).map(function (key) {
+        var br = key;
+        return [br, breakpoints[br]];
+    });
+    var sortedKeys = temp.sort(function (a, b) { return a[1] - b[1]; }).map(function (item) { return item[0]; });
+    var getNext = function (breakpoint) {
+        var index = sortedKeys.indexOf(breakpoint);
+        return sortedKeys[index + 1];
+    };
+    var min = function (br) {
+        return "@media (min-width: ".concat(breakpoints[br], "px)");
+    };
+    var max = function (br) {
+        return "@media (max-width: ".concat(breakpoints[br] - 0.02, "px)");
+    };
+    for (var br in breakpoints) {
+        var _br = br;
+        min[_br] = "@media (min-width: ".concat(breakpoints[_br], "px)");
+        max[_br] = "@media (max-width: ".concat(breakpoints[_br] - 0.02, "px)");
+    }
+    var up = min;
+    var down = function (br) {
+        var brNext = getNext(br);
+        return brNext && "@media (max-width: ".concat(breakpoints[brNext] - 0.02, "px)");
+    };
+    var between = function (br1, br2) {
+        return "@media (min-width: ".concat(breakpoints[br1], "px) and (max-width: ").concat(breakpoints[br2] - 0.02, "px)");
+    };
+    var only = function (br) {
+        var brNext = getNext(br);
+        return brNext ? between(br, brNext) : min(br);
+    };
+    return {
+        min: min,
+        max: max,
+        up: up,
+        down: down,
+        between: between,
+        only: only,
+    };
+}

package/styles/spacing.d.ts

@@ -1,7 +1,6 @@
-import type { Theme } from "./theme";
+import type { Theme } from "./theme.js";
 export type SpacingSize = "sm" | "md" | "lg";
 export type SpacingProperty = "padding" | "margin";
-/** @default 1 */
 export type SpacingFactor = number;
 export type SpacingDirection = "top" | "bottom";
 export type SpacingDirectionAxis = "vertical" | SpacingDirection;

package/styles/spacing.js

@@ -0,0 +1,45 @@
+function _spacing(theme, size, factor, property, direction, devices) {
+    if (size === void 0) { size = "md"; }
+    if (factor === void 0) { factor = 1; }
+    if (property === void 0) { property = "padding"; }
+    if (direction === void 0) { direction = "top"; }
+    if (devices === void 0) { devices = ["mobile", "tablet", "desktop"]; }
+    var breakpoints = theme.breakpoints, DEVICES = theme.devices, SPACES = theme.spaces;
+    var css = "";
+    var prop = "".concat(property, "-").concat(direction);
+    if (!devices.length || devices[0] === "mobile") {
+        css += "@media(max-width: ".concat(breakpoints[DEVICES.mobile], "px){\n        ").concat(prop, ": ").concat(SPACES["mobile"][size] * factor, "px;\n      }");
+    }
+    else {
+        for (var index = 0; index < devices.length; index++) {
+            var device = devices[index];
+            if (device === "mobile") {
+                css += "".concat(prop, ": ").concat(SPACES[device][size] * factor, "px;");
+            }
+            else if (device === "tablet") {
+                css += "@media(min-width: ".concat(breakpoints[DEVICES.tablet], "px){\n          ").concat(prop, ": ").concat(SPACES["tablet"][size] * factor, "px;\n        }");
+            }
+            else if (device === "desktop") {
+                css += "@media(min-width: ".concat(breakpoints[DEVICES.desktop], "px){\n          ").concat(prop, ": ").concat(SPACES["desktop"][size] * factor, "px;\n        }");
+            }
+        }
+    }
+    return css;
+}
+export function spacing(size, factor, property, direction, devices) {
+    if (direction === "vertical") {
+        return (_spacing(this, size, factor, property, "top", devices) +
+            _spacing(this, size, factor, property, "bottom", devices));
+    }
+    return _spacing(this, size, factor, property, direction, devices);
+}
+export function spacingTop(size, factor, property, devices) {
+    return _spacing(this, size, factor, property, "top", devices);
+}
+export function spacingBottom(size, factor, property, devices) {
+    return _spacing(this, size, factor, property, "bottom", devices);
+}
+export function spacingVertical(size, factor, property, devices) {
+    return (_spacing(this, size, factor, property, "top", devices) +
+        _spacing(this, size, factor, property, "bottom", devices));
+}

package/styles/styled.d.ts

@@ -1,12 +1,8 @@
 import React from "react";
 export declare const colStretch: (direction: "left" | "right", bg: React.CSSProperties["background"]) => string;
-/** @see https://caniuse.com/?search=inset */
 export declare const inset0 = "top:0;left:0;right:0;bottom:0;";
 export declare const overlay: string;
 export declare const centered = "display: flex;align-items: center;justify-content: center;";
 export declare const ellipsis = "overflow: hidden;text-overflow: ellipsis;white-space: nowrap;";
-/**
- * @see import("@mui/utils").visuallyHidden https://github.com/mui-org/material-ui/blob/master/packages/mui-utils/src/visuallyHidden.ts
- */
 export declare const invisible = "border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;white-space: nowrap;width: 1px;";
 export declare const stateFocus = "outline: 0px;box-shadow: 0 0 0 0.2rem rgba(200, 200, 200, 0.25);";

package/styles/styled.js

@@ -0,0 +1,9 @@
+export var colStretch = function (direction, bg) {
+    return "\n    background: ".concat(bg, ";\n    position: relative;\n\n    &:before{\n      z-index: -1;\n      content: '';\n      position: absolute;\n      right: ").concat(direction === "left" ? "100%" : "-100vw", ";\n      left: ").concat(direction === "right" ? "100%" : "-100vw", ";\n      top: 0;\n      bottom: 0;\n      background: ").concat(bg, ";\n    }\n  ");
+};
+export var inset0 = "top:0;left:0;right:0;bottom:0;";
+export var overlay = "position: absolute;".concat(inset0);
+export var centered = "display: flex;align-items: center;justify-content: center;";
+export var ellipsis = "overflow: hidden;text-overflow: ellipsis;white-space: nowrap;";
+export var invisible = "border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;white-space: nowrap;width: 1px;";
+export var stateFocus = "outline: 0px;box-shadow: 0 0 0 0.2rem rgba(200, 200, 200, 0.25);";

package/styles/theme--vanilla.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useEffect, useState } from "react";
+import isBrowser from "@koine/utils/isBrowser";
+import useUpdateEffect from "../hooks/useUpdateEffect.js";
+export var THEME_KEY = "theme";
+export var THEME_DEFAULT = "light";
+export var getInitialThemeFromClient = function () {
+    if (typeof window !== "undefined" && window.localStorage) {
+        var storedPrefs = window.localStorage.getItem(THEME_KEY);
+        if (typeof storedPrefs === "string") {
+            return storedPrefs;
+        }
+        var userMedia = window.matchMedia("(prefers-color-scheme: dark)");
+        if (userMedia.matches) {
+            return "dark";
+        }
+    }
+    return THEME_DEFAULT;
+};
+export var ThemeVanillaContext = createContext({
+    theme: "light",
+    setTheme: undefined,
+});
+export var ThemeVanillaProvider = function (_a) {
+    var initialTheme = _a.initialTheme, children = _a.children;
+    var _b = useState(initialTheme), theme = _b[0], setTheme = _b[1];
+    var rawSetTheme = function (rawTheme) {
+        if (!rawTheme || !isBrowser) {
+            return;
+        }
+        var root = window.document.documentElement;
+        var isDark = rawTheme === "dark";
+        root.classList.remove(isDark ? "light" : "dark");
+        root.classList.add(rawTheme);
+        localStorage.setItem(THEME_KEY, rawTheme);
+    };
+    useEffect(function () {
+        var theme = getInitialThemeFromClient();
+        setTheme(theme);
+        rawSetTheme(theme);
+    }, []);
+    useUpdateEffect(function () {
+        rawSetTheme(theme);
+    }, [theme]);
+    return (_jsx(ThemeVanillaContext.Provider, { value: { theme: theme, setTheme: setTheme }, children: children }));
+};

package/styles/theme.d.ts

@@ -1,16 +1,5 @@
 export type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 export type Breakpoints = Record<Breakpoint, number>;
-/**
- * You can override the default breakpoints through the .env variable
- *
- * FIXME: find a better way to configure it, the problem is that we use the media
- * queries within this pre-compiled library and thrught it was better to avoid
- * using theming props for a more ergonomic usage.
- *
- * ```.env
- * BREAKPOINTS=xs:0,sm:440,md:768,lg:1024,xl:1368,xxl:1690
- * ```
- */
 export declare const breakpoints: Breakpoints;
 export declare const createTheme: (options: ThemeOptions) => Theme;
 export declare const useTheme: () => Theme;
@@ -20,56 +9,38 @@ export type Theme = {
         quarter: number;
         third: number;
         half: number;
-        /** @default 60 */
         normal: number;
         double: number;
         triple: number;
     };
     breakpoints: Breakpoints;
     devices: {
-        /** @default "sm" */
         mobile: keyof Breakpoints;
-        /** @default "md" */
         tablet: keyof Breakpoints;
-        /** @default "lg" */
         desktop: keyof Breakpoints;
     };
     spaces: {
         mobile: {
-            /** @default 10 */
             sm: number;
-            /** @default 20 */
             md: number;
-            /** @default 40 */
             lg: number;
         };
         tablet: {
-            /** @default 15 */
             sm: number;
-            /** @default 30 */
             md: number;
-            /** @default 60 */
             lg: number;
         };
         desktop: {
-            /** @default 20 */
             sm: number;
-            /** @default 40 */
             md: number;
-            /** @default 80 */
             lg: number;
         };
     };
     header: {
-        /** @default "lg" */
         breakpoint: keyof Breakpoints;
-        /** @default [82, 134] */
         height: [number, number];
-        /** @default [60, 90] */
         heightSticky: [number, number];
-        /** @default [76, 76] */
         logoWidth: [number, number];
-        /** @default [70, 70] */
         logoWidthSticky: [number, number];
     };
 };

package/styles/theme.js

@@ -0,0 +1,30 @@
+import { __assign } from "tslib";
+import { useTheme as _useTheme } from "styled-components";
+var DEFAULT_BREAKPOINTS = {
+    xs: 0,
+    sm: 440,
+    md: 768,
+    lg: 1024,
+    xl: 1368,
+    xxl: 1690,
+};
+export var breakpoints = process.env["BREAKPOINTS"]
+    ? process.env["BREAKPOINTS"].split(",").reduce(function (map, pair) {
+        var _a = pair.split(":"), key = _a[0], value = _a[1];
+        map[key] = parseFloat(value);
+        return map;
+    }, {})
+    : DEFAULT_BREAKPOINTS;
+var themeDefault = {
+    maxWidth: breakpoints.xxl,
+    breakpoints: breakpoints,
+    devices: {
+        mobile: "sm",
+        tablet: "md",
+        desktop: "lg",
+    },
+};
+export var createTheme = function (options) {
+    return (__assign(__assign({}, themeDefault), options));
+};
+export var useTheme = _useTheme;