@koine/react 2.0.0-beta.1 → 2.0.0-beta.100

package/styles/media.d.ts

@@ -1,67 +0,0 @@
-import { Breakpoint, Breakpoints } from "./theme";
-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}`;
-export type MediaQueryFunction = {
-    [Breakpoint in keyof Breakpoints]: string;
-} & {
-    (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;
-    up: MediaQueryFunction;
-    down: (br: Breakpoint) => string;
-    between: (br1: Breakpoint, br2: Breakpoint) => string;
-    only: (br: Breakpoint) => string;
-};

package/styles/media.js

@@ -1,161 +0,0 @@
-"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];
-    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 () {
-        var mq = window.matchMedia(query);
-        var handleChange = function (event) {
-            setMatches(event.matches);
-        };
-        setMatches(mq.matches);
-        // Safari < 14 can't use addEventListener on a MediaQueryList
-        // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
-        if (!mq.addEventListener) {
-            // Update the state whenever the media query match state changes
-            mq.addListener(handleChange);
-            // Clean up on unmount and if the query changes
-            return function () {
-                mq.removeListener(handleChange);
-            };
-        }
-        mq.addEventListener("change", handleChange);
-        return function () {
-            mq.removeEventListener("change", handleChange);
-        };
-    }, [query]);
-    return matches;
-}
-exports.useMedia = useMedia;
-/**
- * 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) {}
- * ```
- */
-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];
-    };
-    /**
-     * It behaves the same as `@media (min-width: ${value}px)`
-     * where value is the given breakpoint value.
-     * For ease of use this can be used both as a function `min("md")` and as an
-     * object literal `min.md`.
-     */ // @ts-expect-error FIXME: at some point
-    var min = function (br) {
-        return "@media (min-width: ".concat(breakpoints[br], "px)");
-    };
-    /**
-     * It behaves the same as `@media (max-width: ${value}px)`
-     * where value is the given breakpoint value.
-     * For ease of use this can be used both as a function `max("md")` and as an
-     * object literal `max.md`.
-     */ // @ts-expect-error FIXME: at some point
-    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)");
-    }
-    /**
-     * It behaves the same as `min`
-     * @inheritdoc {max}
-     */
-    var up = min;
-    /**
-     * It behaves similarly to `max` but you will use the "next" breakpoint,
-     * specifying CSS that will apply from the given breakpoint and down.
-     */
-    var down = function (br) {
-        var brNext = getNext(br);
-        // TODO: if br does not exists otherwise throw Error
-        return brNext && "@media (max-width: ".concat(breakpoints[brNext] - 0.02, "px)");
-    };
-    /**
-     * Media query between the two given breakpoints
-     */
-    var between = function (br1, br2) {
-        return "@media (min-width: ".concat(breakpoints[br1], "px) and (max-width: ").concat(breakpoints[br2] - 0.02, "px)");
-    };
-    /**
-     * Media query to apply from the given breakpoint until the next, just for its
-     * full range
-     */
-    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,
-    };
-}
-exports.generateMediaQueries = generateMediaQueries;

package/styles/media.mjs

@@ -1,156 +0,0 @@
-/// 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];
-    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);
-        // Safari < 14 can't use addEventListener on a MediaQueryList
-        // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
-        if (!mq.addEventListener) {
-            // Update the state whenever the media query match state changes
-            mq.addListener(handleChange);
-            // Clean up on unmount and if the query changes
-            return function () {
-                mq.removeListener(handleChange);
-            };
-        }
-        mq.addEventListener("change", handleChange);
-        return function () {
-            mq.removeEventListener("change", handleChange);
-        };
-    }, [query]);
-    return matches;
-}
-/**
- * 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 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];
-    };
-    /**
-     * It behaves the same as `@media (min-width: ${value}px)`
-     * where value is the given breakpoint value.
-     * For ease of use this can be used both as a function `min("md")` and as an
-     * object literal `min.md`.
-     */ // @ts-expect-error FIXME: at some point
-    var min = function (br) {
-        return "@media (min-width: ".concat(breakpoints[br], "px)");
-    };
-    /**
-     * It behaves the same as `@media (max-width: ${value}px)`
-     * where value is the given breakpoint value.
-     * For ease of use this can be used both as a function `max("md")` and as an
-     * object literal `max.md`.
-     */ // @ts-expect-error FIXME: at some point
-    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)");
-    }
-    /**
-     * It behaves the same as `min`
-     * @inheritdoc {max}
-     */
-    var up = min;
-    /**
-     * It behaves similarly to `max` but you will use the "next" breakpoint,
-     * specifying CSS that will apply from the given breakpoint and down.
-     */
-    var down = function (br) {
-        var brNext = getNext(br);
-        // TODO: if br does not exists otherwise throw Error
-        return brNext && "@media (max-width: ".concat(breakpoints[brNext] - 0.02, "px)");
-    };
-    /**
-     * Media query between the two given breakpoints
-     */
-    var between = function (br1, br2) {
-        return "@media (min-width: ".concat(breakpoints[br1], "px) and (max-width: ").concat(breakpoints[br2] - 0.02, "px)");
-    };
-    /**
-     * Media query to apply from the given breakpoint until the next, just for its
-     * full range
-     */
-    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/package.json

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

package/styles/spacing.d.ts

@@ -1,13 +0,0 @@
-import type { Theme } from "./theme";
-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;
-export type SpacingDevices = keyof Theme["devices"];
-export type SpacingArgs = Parameters<typeof spacing>;
-export declare function spacing(this: Theme, size?: SpacingSize, factor?: SpacingFactor, property?: SpacingProperty, direction?: SpacingDirectionAxis, devices?: SpacingDevices[]): string;
-export declare function spacingTop(this: Theme, size?: SpacingSize, factor?: SpacingFactor, property?: SpacingProperty, devices?: SpacingDevices[]): string;
-export declare function spacingBottom(this: Theme, size?: SpacingSize, factor?: SpacingFactor, property?: SpacingProperty, devices?: SpacingDevices[]): string;
-export declare function spacingVertical(this: Theme, size?: SpacingSize, factor?: SpacingFactor, property?: SpacingProperty, devices?: SpacingDevices[]): string;

package/styles/spacing.js

@@ -1,52 +0,0 @@
-"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; }
-    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;
-}
-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) {
-    return _spacing(this, size, factor, property, "top", devices);
-}
-exports.spacingTop = spacingTop;
-function spacingBottom(size, factor, property, devices) {
-    return _spacing(this, size, factor, property, "bottom", 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/styles/spacing.mjs

@@ -1,45 +0,0 @@
-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 +0,0 @@
-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

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.stateFocus = exports.invisible = exports.ellipsis = exports.centered = exports.overlay = exports.inset0 = exports.colStretch = void 0;
-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  ");
-};
-exports.colStretch = colStretch;
-/** @see https://caniuse.com/?search=inset */
-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
- */
-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

@@ -1,13 +0,0 @@
-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  ");
-};
-/** @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.d.ts

@@ -1,17 +0,0 @@
-/// <reference types="react" />
-export declare const THEME_KEY = "theme";
-export declare const THEME_DEFAULT: ThemeVanillaValue;
-export declare const getInitialThemeFromClient: () => ThemeVanillaValue;
-export type ThemeCookie = {
-    [THEME_KEY]: ThemeVanillaValue;
-};
-export type ThemeVanillaValue = "light" | "dark";
-export type ThemeVanillaContextType = {
-    theme: ThemeVanillaValue;
-    setTheme?: React.Dispatch<React.SetStateAction<ThemeVanillaValue>>;
-};
-export declare const ThemeVanillaContext: import("react").Context<ThemeVanillaContextType>;
-export type ThemeVanillaProviderProps = React.PropsWithChildren<{
-    initialTheme: ThemeVanillaValue;
-}>;
-export declare const ThemeVanillaProvider: ({ initialTheme, children, }: ThemeVanillaProviderProps) => import("react/jsx-runtime").JSX.Element;

package/styles/theme--vanilla.js

@@ -1,64 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeVanillaProvider = exports.ThemeVanillaContext = exports.getInitialThemeFromClient = 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"));
-// import setCookie from "@koine/utils/setCookie";
-// import parseCookie from "@koine/utils/parseCookie";
-var useUpdateEffect_1 = tslib_1.__importDefault(require("../hooks/useUpdateEffect"));
-exports.THEME_KEY = "theme";
-exports.THEME_DEFAULT = "light";
-// export const getInitialThemeFromRequest = (
-//   cookie?: string
-// ): ThemeVanillaValue => {
-//   if (cookie) {
-//     const parsed = parseCookie<ThemeCookie>(cookie);
-//     return parsed?.theme;
-//   }
-//   return THEME_DEFAULT;
-// };
-var getInitialThemeFromClient = function () {
-    if (typeof window !== "undefined" && window.localStorage) {
-        var storedPrefs = window.localStorage.getItem(exports.THEME_KEY);
-        if (typeof storedPrefs === "string") {
-            return storedPrefs;
-        }
-        var userMedia = window.matchMedia("(prefers-color-scheme: dark)");
-        if (userMedia.matches) {
-            return "dark";
-        }
-    }
-    return exports.THEME_DEFAULT;
-};
-exports.getInitialThemeFromClient = getInitialThemeFromClient;
-exports.ThemeVanillaContext = (0, react_1.createContext)({
-    theme: "light",
-    setTheme: undefined,
-});
-var ThemeVanillaProvider = function (_a) {
-    var initialTheme = _a.initialTheme, children = _a.children;
-    var _b = (0, react_1.useState)(initialTheme), theme = _b[0], setTheme = _b[1];
-    var rawSetTheme = function (rawTheme) {
-        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(exports.THEME_KEY, rawTheme);
-        // setCookie(THEME_KEY, rawTheme);
-    };
-    (0, react_1.useEffect)(function () {
-        var theme = (0, exports.getInitialThemeFromClient)();
-        setTheme(theme);
-        rawSetTheme(theme);
-    }, []);
-    (0, useUpdateEffect_1.default)(function () {
-        rawSetTheme(theme);
-    }, [theme]);
-    return ((0, jsx_runtime_1.jsx)(exports.ThemeVanillaContext.Provider, { value: { theme: theme, setTheme: setTheme }, children: children }));
-};
-exports.ThemeVanillaProvider = ThemeVanillaProvider;