@koine/react 1.1.10 → 1.1.12

package/scm/index.mjs

@@ -0,0 +1,31 @@
+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 } from "../Dialog/sc/framer";
+// export { KoineForm, type KoineFormProps} from "../Form/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 "../Select";
+export * from "../Sidebar";
+export * from "../Spacing";
+export * from "../Sticky";
+export * from "../styles";
+export * from "../Tabs";
+export * from "../Typography";

package/scm/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/scm/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/shared/index.js

@@ -1,8 +1,11 @@
-export * from "../Calendar";
-export * from "../Dialog";
-export * from "../FaviconTags";
-export * from "../helpers";
-export * from "../hooks";
-export * from "../Meta";
-export * from "../NoJs";
-export * from "../types";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("../Calendar"), exports);
+tslib_1.__exportStar(require("../Dialog"), exports);
+tslib_1.__exportStar(require("../FaviconTags"), exports);
+tslib_1.__exportStar(require("../helpers"), exports);
+tslib_1.__exportStar(require("../hooks"), exports);
+tslib_1.__exportStar(require("../Meta"), exports);
+tslib_1.__exportStar(require("../NoJs"), exports);
+tslib_1.__exportStar(require("../types"), exports);

package/shared/index.mjs

@@ -0,0 +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";

package/shared/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/shared/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/styles/Body.js

@@ -1,6 +1,9 @@
-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"])));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BodyMain = exports.BodyRoot = void 0;
+var tslib_1 = require("tslib");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+exports.BodyRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_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"])));
 /**
  * If you have background graphics to overlap you might need to add:
  *
@@ -9,5 +12,5 @@ export var BodyRoot = styled.div(templateObject_1 || (templateObject_1 = __makeT
  * position: relative;
  * ```
  */
-export var BodyMain = styled.main(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+exports.BodyMain = styled_components_1.default.main(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
 var templateObject_1, templateObject_2;

package/styles/Body.mjs

@@ -0,0 +1,13 @@
+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"])));
+/**
+ * If you have background graphics to overlap you might need to add:
+ *
+ * ```css
+ * z-index: 1;
+ * position: relative;
+ * ```
+ */
+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.js

@@ -1,5 +1,8 @@
-import { __makeTemplateObject } from "tslib";
-import { createGlobalStyle } from "styled-components";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StylesGlobal = exports.stylesGlobal = void 0;
+var tslib_1 = require("tslib");
+var styled_components_1 = require("styled-components");
 /**
  * App global style
  *
@@ -13,6 +16,6 @@ import { createGlobalStyle } from "styled-components";
  *  - @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 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);
+exports.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";
+exports.StylesGlobal = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["", ""], ["", ""])), exports.stylesGlobal);
 var templateObject_1;

package/styles/Global.mjs

@@ -0,0 +1,18 @@
+import { __makeTemplateObject } from "tslib";
+import { createGlobalStyle } from "styled-components";
+/**
+ * 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 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.js

@@ -1,7 +1,10 @@
-export * from "./Body";
-export * from "./Global";
-export * from "./media";
-export * from "./spacing";
-export * from "./styled";
-export * from "./theme";
-export * from "./theme--vanilla";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Body"), exports);
+tslib_1.__exportStar(require("./Global"), exports);
+tslib_1.__exportStar(require("./media"), exports);
+tslib_1.__exportStar(require("./spacing"), exports);
+tslib_1.__exportStar(require("./styled"), exports);
+tslib_1.__exportStar(require("./theme"), exports);
+tslib_1.__exportStar(require("./theme--vanilla"), exports);

package/styles/index.mjs

@@ -0,0 +1,7 @@
+export * from "./Body";
+export * from "./Global";
+export * from "./media";
+export * from "./spacing";
+export * from "./styled";
+export * from "./theme";
+export * from "./theme--vanilla";

package/styles/media.js

@@ -1,18 +1,21 @@
+"use strict";
 /// TODO:FIXME: this should use code from `useMqWidthCreator`
 var _a;
-import { useState, useEffect } from "react";
-import { useTheme, breakpoints } from "./theme";
-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];
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateMediaQueries = exports.useMedia = exports.only = exports.between = exports.down = exports.up = exports.max = exports.min = void 0;
+var react_1 = require("react");
+var theme_1 = require("./theme");
+exports.min = (_a = generateMediaQueries(theme_1.breakpoints), _a.min), exports.max = _a.max, exports.up = _a.up, exports.down = _a.down, exports.between = _a.between, exports.only = _a.only;
+function useMedia(media) {
+    var breakpoints = (0, theme_1.useTheme)().breakpoints;
+    var _a = (0, react_1.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 () {
+    (0, react_1.useEffect)(function () {
         var mq = window.matchMedia(query);
         var handleChange = function (event) {
             setMatches(event.matches);
@@ -35,6 +38,7 @@ export function useMedia(media) {
     }, [query]);
     return matches;
 }
+exports.useMedia = useMedia;
 /**
  * Generate media queries helpers
  *
@@ -84,7 +88,7 @@ export function useMedia(media) {
  * @media (--narrow-window) {}
  * ```
  */
-export function generateMediaQueries(breakpoints) {
+function generateMediaQueries(breakpoints) {
     var temp = Object.keys(breakpoints).map(function (key) {
         var br = key;
         return [br, breakpoints[br]];
@@ -154,3 +158,4 @@ export function generateMediaQueries(breakpoints) {
         only: only,
     };
 }
+exports.generateMediaQueries = generateMediaQueries;

package/{node/styles/media.js → styles/media.mjs}

@@ -1,21 +1,18 @@
-"use strict";
 /// TODO:FIXME: this should use code from `useMqWidthCreator`
 var _a;
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateMediaQueries = exports.useMedia = exports.only = exports.between = exports.down = exports.up = exports.max = exports.min = void 0;
-var react_1 = require("react");
-var theme_1 = require("./theme");
-exports.min = (_a = generateMediaQueries(theme_1.breakpoints), _a.min), exports.max = _a.max, exports.up = _a.up, exports.down = _a.down, exports.between = _a.between, exports.only = _a.only;
-function useMedia(media) {
-    var breakpoints = (0, theme_1.useTheme)().breakpoints;
-    var _a = (0, react_1.useState)(false), matches = _a[0], setMatches = _a[1];
+import { useState, useEffect } from "react";
+import { useTheme, breakpoints } from "./theme";
+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)");
-    (0, react_1.useEffect)(function () {
+    useEffect(function () {
         var mq = window.matchMedia(query);
         var handleChange = function (event) {
             setMatches(event.matches);
@@ -38,7 +35,6 @@ function useMedia(media) {
     }, [query]);
     return matches;
 }
-exports.useMedia = useMedia;
 /**
  * Generate media queries helpers
  *
@@ -88,7 +84,7 @@ exports.useMedia = useMedia;
  * @media (--narrow-window) {}
  * ```
  */
-function generateMediaQueries(breakpoints) {
+export function generateMediaQueries(breakpoints) {
     var temp = Object.keys(breakpoints).map(function (key) {
         var br = key;
         return [br, breakpoints[br]];
@@ -158,4 +154,3 @@ function generateMediaQueries(breakpoints) {
         only: only,
     };
 }
-exports.generateMediaQueries = generateMediaQueries;

package/styles/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/styles/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/styles/spacing.js

@@ -1,3 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spacingVertical = exports.spacingBottom = exports.spacingTop = exports.spacing = void 0;
 function _spacing(theme, size, factor, property, direction, devices) {
     if (size === void 0) { size = "md"; }
     if (factor === void 0) { factor = 1; }
@@ -26,20 +29,24 @@ function _spacing(theme, size, factor, property, direction, devices) {
     }
     return css;
 }
-export function spacing(size, factor, property, direction, devices) {
+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) {
+exports.spacing = spacing;
+function spacingTop(size, factor, property, devices) {
     return _spacing(this, size, factor, property, "top", devices);
 }
-export function spacingBottom(size, factor, property, devices) {
+exports.spacingTop = spacingTop;
+function spacingBottom(size, factor, property, devices) {
     return _spacing(this, size, factor, property, "bottom", devices);
 }
-export function spacingVertical(size, factor, property, devices) {
+exports.spacingBottom = spacingBottom;
+function spacingVertical(size, factor, property, devices) {
     return (_spacing(this, size, factor, property, "top", devices) +
         _spacing(this, size, factor, property, "bottom", devices));
 }
+exports.spacingVertical = spacingVertical;

package/{node/styles/spacing.js → styles/spacing.mjs}

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.spacingVertical = exports.spacingBottom = exports.spacingTop = exports.spacing = void 0;
 function _spacing(theme, size, factor, property, direction, devices) {
     if (size === void 0) { size = "md"; }
     if (factor === void 0) { factor = 1; }
@@ -29,24 +26,20 @@ function _spacing(theme, size, factor, property, direction, devices) {
     }
     return css;
 }
-function spacing(size, factor, property, direction, devices) {
+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);
 }
-exports.spacing = spacing;
-function spacingTop(size, factor, property, devices) {
+export function spacingTop(size, factor, property, devices) {
     return _spacing(this, size, factor, property, "top", devices);
 }
-exports.spacingTop = spacingTop;
-function spacingBottom(size, factor, property, devices) {
+export function spacingBottom(size, factor, property, devices) {
     return _spacing(this, size, factor, property, "bottom", devices);
 }
-exports.spacingBottom = spacingBottom;
-function spacingVertical(size, factor, property, devices) {
+export function spacingVertical(size, factor, property, devices) {
     return (_spacing(this, size, factor, property, "top", devices) +
         _spacing(this, size, factor, property, "bottom", devices));
 }
-exports.spacingVertical = spacingVertical;

package/styles/styled.js

@@ -1,13 +1,17 @@
-export function colStretch(direction, bg) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stateFocus = exports.invisible = exports.ellipsis = exports.centered = exports.overlay = exports.inset0 = exports.colStretch = void 0;
+function colStretch(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  ");
 }
+exports.colStretch = colStretch;
 /** @see https://caniuse.com/?search=inset */
-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;";
+exports.inset0 = "top:0;left:0;right:0;bottom:0;";
+exports.overlay = "position: absolute;".concat(exports.inset0);
+exports.centered = "display: flex;align-items: center;justify-content: center;";
+exports.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 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);";
+exports.invisible = "border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;white-space: nowrap;width: 1px;";
+exports.stateFocus = "outline: 0px;box-shadow: 0 0 0 0.2rem rgba(200, 200, 200, 0.25);";

package/styles/styled.mjs

@@ -0,0 +1,13 @@
+export function colStretch(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  ");
+}
+/** @see https://caniuse.com/?search=inset */
+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;";
+/**
+ * @see import("@mui/utils").visuallyHidden https://github.com/mui-org/material-ui/blob/master/packages/mui-utils/src/visuallyHidden.ts
+ */
+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

@@ -1,23 +1,27 @@
-import { __assign } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useState } from "react";
-import isBrowser from "@koine/utils/isBrowser";
-import setCookie from "@koine/utils/setCookie";
-import parseCookie from "@koine/utils/parseCookie";
-import useMount from "../hooks/useMount";
-import useUpdateEffect from "../hooks/useUpdateEffect";
-export var THEME_KEY = "theme";
-export var THEME_DEFAULT = "light";
-export var getInitialThemeFromRequest = function (cookie) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeVanillaProvider = exports.ThemeVanillaContext = exports.getInitialThemeFromClient = exports.getInitialThemeFromRequest = exports.THEME_DEFAULT = exports.THEME_KEY = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var isBrowser_1 = tslib_1.__importDefault(require("@koine/utils/isBrowser"));
+var setCookie_1 = tslib_1.__importDefault(require("@koine/utils/setCookie"));
+var parseCookie_1 = tslib_1.__importDefault(require("@koine/utils/parseCookie"));
+var useMount_1 = tslib_1.__importDefault(require("../hooks/useMount"));
+var useUpdateEffect_1 = tslib_1.__importDefault(require("../hooks/useUpdateEffect"));
+exports.THEME_KEY = "theme";
+exports.THEME_DEFAULT = "light";
+var getInitialThemeFromRequest = function (cookie) {
     if (cookie) {
-        var parsed = parseCookie(cookie);
+        var parsed = (0, parseCookie_1.default)(cookie);
         return parsed === null || parsed === void 0 ? void 0 : parsed.theme;
     }
-    return THEME_DEFAULT;
+    return exports.THEME_DEFAULT;
 };
-export var getInitialThemeFromClient = function () {
+exports.getInitialThemeFromRequest = getInitialThemeFromRequest;
+var getInitialThemeFromClient = function () {
     if (typeof window !== "undefined" && window.localStorage) {
-        var storedPrefs = window.localStorage.getItem(THEME_KEY);
+        var storedPrefs = window.localStorage.getItem(exports.THEME_KEY);
         if (typeof storedPrefs === "string") {
             return storedPrefs;
         }
@@ -26,33 +30,35 @@ export var getInitialThemeFromClient = function () {
             return "dark";
         }
     }
-    return THEME_DEFAULT;
+    return exports.THEME_DEFAULT;
 };
-export var ThemeVanillaContext = createContext({
+exports.getInitialThemeFromClient = getInitialThemeFromClient;
+exports.ThemeVanillaContext = (0, react_1.createContext)({
     theme: "light",
     setTheme: undefined,
 });
-export var ThemeVanillaProvider = function (_a) {
+var ThemeVanillaProvider = function (_a) {
     var initialTheme = _a.initialTheme, children = _a.children;
-    var _b = useState(initialTheme), theme = _b[0], setTheme = _b[1];
+    var _b = (0, react_1.useState)(initialTheme), theme = _b[0], setTheme = _b[1];
     var rawSetTheme = function (rawTheme) {
-        if (!rawTheme || !isBrowser) {
+        if (!rawTheme || !isBrowser_1.default) {
             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);
-        setCookie(THEME_KEY, rawTheme);
+        localStorage.setItem(exports.THEME_KEY, rawTheme);
+        (0, setCookie_1.default)(exports.THEME_KEY, rawTheme);
     };
-    useMount(function () {
-        var theme = getInitialThemeFromClient();
+    (0, useMount_1.default)(function () {
+        var theme = (0, exports.getInitialThemeFromClient)();
         setTheme(theme);
         rawSetTheme(theme);
     });
-    useUpdateEffect(function () {
+    (0, useUpdateEffect_1.default)(function () {
         rawSetTheme(theme);
     }, [theme]);
-    return (_jsx(ThemeVanillaContext.Provider, __assign({ value: { theme: theme, setTheme: setTheme } }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(exports.ThemeVanillaContext.Provider, tslib_1.__assign({ value: { theme: theme, setTheme: setTheme } }, { children: children })));
 };
+exports.ThemeVanillaProvider = ThemeVanillaProvider;

package/styles/theme--vanilla.mjs

@@ -0,0 +1,58 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useState } from "react";
+import isBrowser from "@koine/utils/isBrowser";
+import setCookie from "@koine/utils/setCookie";
+import parseCookie from "@koine/utils/parseCookie";
+import useMount from "../hooks/useMount";
+import useUpdateEffect from "../hooks/useUpdateEffect";
+export var THEME_KEY = "theme";
+export var THEME_DEFAULT = "light";
+export var getInitialThemeFromRequest = function (cookie) {
+    if (cookie) {
+        var parsed = parseCookie(cookie);
+        return parsed === null || parsed === void 0 ? void 0 : parsed.theme;
+    }
+    return THEME_DEFAULT;
+};
+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);
+        setCookie(THEME_KEY, rawTheme);
+    };
+    useMount(function () {
+        var theme = getInitialThemeFromClient();
+        setTheme(theme);
+        rawSetTheme(theme);
+    });
+    useUpdateEffect(function () {
+        rawSetTheme(theme);
+    }, [theme]);
+    return (_jsx(ThemeVanillaContext.Provider, __assign({ value: { theme: theme, setTheme: setTheme } }, { children: children })));
+};

package/styles/theme.js

@@ -1,5 +1,8 @@
-import { __assign } from "tslib";
-import { useTheme as _useTheme } from "styled-components";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTheme = exports.createTheme = exports.breakpoints = void 0;
+var tslib_1 = require("tslib");
+var styled_components_1 = require("styled-components");
 var DEFAULT_BREAKPOINTS = {
     xs: 0,
     sm: 440,
@@ -19,7 +22,7 @@ var DEFAULT_BREAKPOINTS = {
  * BREAKPOINTS=xs:0,sm:440,md:768,lg:1024,xl:1368,xxl:1690
  * ```
  */
-export var breakpoints = process.env["BREAKPOINTS"]
+exports.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);
@@ -27,15 +30,16 @@ export var breakpoints = process.env["BREAKPOINTS"]
     }, {})
     : DEFAULT_BREAKPOINTS;
 var themeDefault = {
-    maxWidth: breakpoints.xxl,
-    breakpoints: breakpoints,
+    maxWidth: exports.breakpoints.xxl,
+    breakpoints: exports.breakpoints,
     devices: {
         mobile: "sm",
         tablet: "md",
         desktop: "lg",
     },
 };
-export var createTheme = function (options) {
-    return (__assign(__assign({}, themeDefault), options));
+var createTheme = function (options) {
+    return (tslib_1.__assign(tslib_1.__assign({}, themeDefault), options));
 };
-export var useTheme = _useTheme;
+exports.createTheme = createTheme;
+exports.useTheme = styled_components_1.useTheme;