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

package/styles/index.js

@@ -1,142 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    BodyMain: function() {
-        return _Body.BodyMain;
-    },
-    BodyRoot: function() {
-        return _Body.BodyRoot;
-    },
-    StylesGlobal: function() {
-        return _Global.StylesGlobal;
-    },
-    stylesGlobal: function() {
-        return _Global.stylesGlobal;
-    },
-    MediaDirection: function() {
-        return _media.MediaDirection;
-    },
-    MediaQuery: function() {
-        return _media.MediaQuery;
-    },
-    MediaQueryFunction: function() {
-        return _media.MediaQueryFunction;
-    },
-    between: function() {
-        return _media.between;
-    },
-    down: function() {
-        return _media.down;
-    },
-    generateMediaQueries: function() {
-        return _media.generateMediaQueries;
-    },
-    max: function() {
-        return _media.max;
-    },
-    min: function() {
-        return _media.min;
-    },
-    only: function() {
-        return _media.only;
-    },
-    up: function() {
-        return _media.up;
-    },
-    useMedia: function() {
-        return _media.useMedia;
-    },
-    SpacingArgs: function() {
-        return _spacing.SpacingArgs;
-    },
-    SpacingDevices: function() {
-        return _spacing.SpacingDevices;
-    },
-    SpacingDirection: function() {
-        return _spacing.SpacingDirection;
-    },
-    SpacingDirectionAxis: function() {
-        return _spacing.SpacingDirectionAxis;
-    },
-    SpacingFactor: function() {
-        return _spacing.SpacingFactor;
-    },
-    SpacingProperty: function() {
-        return _spacing.SpacingProperty;
-    },
-    SpacingSize: function() {
-        return _spacing.SpacingSize;
-    },
-    spacing: function() {
-        return _spacing.spacing;
-    },
-    spacingBottom: function() {
-        return _spacing.spacingBottom;
-    },
-    spacingTop: function() {
-        return _spacing.spacingTop;
-    },
-    spacingVertical: function() {
-        return _spacing.spacingVertical;
-    },
-    colStretch: function() {
-        return _styled.colStretch;
-    },
-    centered: function() {
-        return _styled.centered;
-    },
-    ellipsis: function() {
-        return _styled.ellipsis;
-    },
-    inset0: function() {
-        return _styled.inset0;
-    },
-    invisible: function() {
-        return _styled.invisible;
-    },
-    overlay: function() {
-        return _styled.overlay;
-    },
-    stateFocus: function() {
-        return _styled.stateFocus;
-    },
-    breakpoints: function() {
-        return _theme.breakpoints;
-    },
-    createTheme: function() {
-        return _theme.createTheme;
-    },
-    useTheme: function() {
-        return _theme.useTheme;
-    },
-    THEME_DEFAULT: function() {
-        return _themevanilla.THEME_DEFAULT;
-    },
-    THEME_KEY: function() {
-        return _themevanilla.THEME_KEY;
-    },
-    ThemeVanillaContext: function() {
-        return _themevanilla.ThemeVanillaContext;
-    },
-    ThemeVanillaProvider: function() {
-        return _themevanilla.ThemeVanillaProvider;
-    },
-    getInitialThemeFromClient: function() {
-        return _themevanilla.getInitialThemeFromClient;
-    }
-});
-const _Body = require("./Body");
-const _Global = require("./Global");
-const _media = require("./media");
-const _spacing = require("./spacing");
-const _styled = require("./styled");
-const _theme = require("./theme");
-const _themevanilla = require("./theme--vanilla");

package/styles/media.js

@@ -1,139 +0,0 @@
-/// TODO:FIXME: this should use code from `useMqWidthCreator`
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    min: function() {
-        return min;
-    },
-    max: function() {
-        return max;
-    },
-    up: function() {
-        return up;
-    },
-    down: function() {
-        return down;
-    },
-    between: function() {
-        return between;
-    },
-    only: function() {
-        return only;
-    },
-    useMedia: function() {
-        return useMedia;
-    },
-    generateMediaQueries: function() {
-        return generateMediaQueries;
-    }
-});
-const _react = require("react");
-const _theme = require("./theme");
-const { min, max, up, down, between, only } = generateMediaQueries(_theme.breakpoints);
-function useMedia(media) {
-    const { breakpoints } = (0, _theme.useTheme)();
-    const [matches, setMatches] = (0, _react.useState)(false);
-    const [direction = "min", breakpoint] = media.split(":");
-    let px = breakpoints[breakpoint];
-    if (direction === "max") {
-        px = px - 0.02;
-    }
-    const query = `(${direction}-width: ${px}px)`;
-    (0, _react.useEffect)(()=>{
-        const mq = window.matchMedia(query);
-        const handleChange = (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 ()=>{
-                mq.removeListener(handleChange);
-            };
-        }
-        mq.addEventListener("change", handleChange);
-        return ()=>{
-            mq.removeEventListener("change", handleChange);
-        };
-    }, [
-        query
-    ]);
-    return matches;
-}
-function generateMediaQueries(breakpoints) {
-    const temp = Object.keys(breakpoints).map((key)=>{
-        const br = key;
-        return [
-            br,
-            breakpoints[br]
-        ];
-    });
-    const sortedKeys = temp.sort((a, b)=>a[1] - b[1]).map((item)=>item[0]);
-    const getNext = (breakpoint)=>{
-        const 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
-    const min = (br)=>`@media (min-width: ${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
-    const max = (br)=>`@media (max-width: ${breakpoints[br] - 0.02}px)`;
-    for(const br in breakpoints){
-        const _br = br;
-        min[_br] = `@media (min-width: ${breakpoints[_br]}px)`;
-        max[_br] = `@media (max-width: ${breakpoints[_br] - 0.02}px)`;
-    }
-    /**
-   * It behaves the same as `min`
-   * @inheritdoc {max}
-   */ const 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.
-   */ const down = (br)=>{
-        const brNext = getNext(br);
-        // TODO: if br does not exists otherwise throw Error
-        return brNext && `@media (max-width: ${breakpoints[brNext] - 0.02}px)`;
-    };
-    /**
-   * Media query between the two given breakpoints
-   */ const between = (br1, br2)=>{
-        return `@media (min-width: ${breakpoints[br1]}px) and (max-width: ${breakpoints[br2] - 0.02}px)`;
-    };
-    /**
-   * Media query to apply from the given breakpoint until the next, just for its
-   * full range
-   */ const only = (br)=>{
-        const brNext = getNext(br);
-        return brNext ? between(br, brNext) : min(br);
-    };
-    return {
-        min,
-        max,
-        up,
-        down,
-        between,
-        only
-    };
-}

package/styles/spacing.js

@@ -1,70 +0,0 @@
-// import type { DefaultTheme } from "styled-components";
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    spacing: function() {
-        return spacing;
-    },
-    spacingTop: function() {
-        return spacingTop;
-    },
-    spacingBottom: function() {
-        return spacingBottom;
-    },
-    spacingVertical: function() {
-        return spacingVertical;
-    }
-});
-function _spacing(theme, size = "md", factor = 1, property = "padding", direction = "top", devices = [
-    "mobile",
-    "tablet",
-    "desktop"
-]) {
-    const { breakpoints, devices: DEVICES, spaces: SPACES } = theme;
-    let css = "";
-    const prop = `${property}-${direction}`;
-    if (!devices.length || devices[0] === "mobile") {
-        css += `@media(max-width: ${breakpoints[DEVICES.mobile]}px){
-        ${prop}: ${SPACES["mobile"][size] * factor}px;
-      }`;
-    } else {
-        for(let index = 0; index < devices.length; index++){
-            const device = devices[index];
-            if (device === "mobile") {
-                css += `${prop}: ${SPACES[device][size] * factor}px;`;
-            } else if (device === "tablet") {
-                css += `@media(min-width: ${breakpoints[DEVICES.tablet]}px){
-          ${prop}: ${SPACES["tablet"][size] * factor}px;
-        }`;
-            } else if (device === "desktop") {
-                css += `@media(min-width: ${breakpoints[DEVICES.desktop]}px){
-          ${prop}: ${SPACES["desktop"][size] * factor}px;
-        }`;
-            }
-        }
-    }
-    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);
-}
-function spacingTop(size, factor, property, devices) {
-    return _spacing(this, size, factor, property, "top", devices);
-}
-function spacingBottom(size, factor, property, devices) {
-    return _spacing(this, size, factor, property, "bottom", devices);
-}
-function spacingVertical(size, factor, property, devices) {
-    return _spacing(this, size, factor, property, "top", devices) + _spacing(this, size, factor, property, "bottom", devices);
-}

package/styles/styled.js

@@ -1,58 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    colStretch: function() {
-        return colStretch;
-    },
-    inset0: function() {
-        return inset0;
-    },
-    overlay: function() {
-        return overlay;
-    },
-    centered: function() {
-        return centered;
-    },
-    ellipsis: function() {
-        return ellipsis;
-    },
-    invisible: function() {
-        return invisible;
-    },
-    stateFocus: function() {
-        return stateFocus;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _react = /*#__PURE__*/ _interop_require_default._(require("react"));
-const colStretch = (direction, bg)=>{
-    return `
-    background: ${bg};
-    position: relative;
-
-    &:before{
-      z-index: -1;
-      content: '';
-      position: absolute;
-      right: ${direction === "left" ? "100%" : "-100vw"};
-      left: ${direction === "right" ? "100%" : "-100vw"};
-      top: 0;
-      bottom: 0;
-      background: ${bg};
-    }
-  `;
-};
-const inset0 = `top:0;left:0;right:0;bottom:0;`;
-const overlay = `position: absolute;${inset0}`;
-const centered = `display: flex;align-items: center;justify-content: center;`;
-const ellipsis = `overflow: hidden;text-overflow: ellipsis;white-space: nowrap;`;
-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;`;
-const stateFocus = `outline: 0px;box-shadow: 0 0 0 0.2rem rgba(200, 200, 200, 0.25);`;

package/styles/theme--vanilla.js

@@ -1,82 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    THEME_KEY: function() {
-        return THEME_KEY;
-    },
-    THEME_DEFAULT: function() {
-        return THEME_DEFAULT;
-    },
-    getInitialThemeFromClient: function() {
-        return getInitialThemeFromClient;
-    },
-    ThemeVanillaContext: function() {
-        return ThemeVanillaContext;
-    },
-    ThemeVanillaProvider: function() {
-        return ThemeVanillaProvider;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _isBrowser = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/isBrowser"));
-const _useUpdateEffect = /*#__PURE__*/ _interop_require_default._(require("../hooks/useUpdateEffect"));
-const THEME_KEY = "theme";
-const THEME_DEFAULT = "light";
-const getInitialThemeFromClient = ()=>{
-    if (typeof window !== "undefined" && window.localStorage) {
-        const storedPrefs = window.localStorage.getItem(THEME_KEY);
-        if (typeof storedPrefs === "string") {
-            return storedPrefs;
-        }
-        const userMedia = window.matchMedia("(prefers-color-scheme: dark)");
-        if (userMedia.matches) {
-            return "dark";
-        }
-    }
-    return THEME_DEFAULT;
-};
-const ThemeVanillaContext = /*#__PURE__*/ (0, _react.createContext)({
-    theme: "light",
-    setTheme: undefined
-});
-const ThemeVanillaProvider = ({ initialTheme, children })=>{
-    const [theme, setTheme] = (0, _react.useState)(initialTheme);
-    const rawSetTheme = (rawTheme)=>{
-        if (!rawTheme || !_isBrowser.default) {
-            return;
-        }
-        const root = window.document.documentElement;
-        const isDark = rawTheme === "dark";
-        root.classList.remove(isDark ? "light" : "dark");
-        root.classList.add(rawTheme);
-        localStorage.setItem(THEME_KEY, rawTheme);
-    // setCookie(THEME_KEY, rawTheme);
-    };
-    (0, _react.useEffect)(()=>{
-        const theme = getInitialThemeFromClient();
-        setTheme(theme);
-        rawSetTheme(theme);
-    }, []);
-    (0, _useUpdateEffect.default)(()=>{
-        rawSetTheme(theme);
-    }, [
-        theme
-    ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(ThemeVanillaContext.Provider, {
-        value: {
-            theme,
-            setTheme
-        },
-        children: children
-    });
-};

package/styles/theme.js

@@ -1,49 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    breakpoints: function() {
-        return breakpoints;
-    },
-    createTheme: function() {
-        return createTheme;
-    },
-    useTheme: function() {
-        return useTheme;
-    }
-});
-const _styledcomponents = require("styled-components");
-const DEFAULT_BREAKPOINTS = {
-    xs: 0,
-    sm: 440,
-    md: 768,
-    lg: 1024,
-    xl: 1368,
-    xxl: 1690
-};
-const breakpoints = process.env["BREAKPOINTS"] ? process.env["BREAKPOINTS"].split(",").reduce((map, pair)=>{
-    const [key, value] = pair.split(":");
-    map[key] = parseFloat(value);
-    return map;
-}, {}) : DEFAULT_BREAKPOINTS;
-const themeDefault = {
-    maxWidth: breakpoints.xxl,
-    breakpoints,
-    devices: {
-        mobile: "sm",
-        tablet: "md",
-        desktop: "lg"
-    }
-};
-const createTheme = (options)=>({
-        ...themeDefault,
-        ...options
-    });
-const useTheme = _styledcomponents.useTheme;

package/tw/index.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "KoineDialog", {
-    enumerable: true,
-    get: function() {
-        return _bare.KoineDialog;
-    }
-});
-const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("../shared"), exports);
-const _bare = require("../Dialog/tw/bare");
- // export * from "../Form";
- // 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/twm/index.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "KoineDialog", {
-    enumerable: true,
-    get: function() {
-        return _framer.KoineDialog;
-    }
-});
-const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("../shared"), exports);
-const _framer = require("../Dialog/tw/framer");
- // export * from "../Form";
- // 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/types.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});