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

package/styles/spacing.mjs

@@ -1,46 +0,0 @@
-// import type { DefaultTheme } from "styled-components";
-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;
-}
-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.mjs

@@ -1,26 +0,0 @@
-import React from "react";
-export 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};
-    }
-  `;
-};
-/** @see https://caniuse.com/?search=inset */ export const inset0 = `top:0;left:0;right:0;bottom:0;`;
-export const overlay = `position: absolute;${inset0}`;
-export const centered = `display: flex;align-items: center;justify-content: center;`;
-export 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 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 const stateFocus = `outline: 0px;box-shadow: 0 0 0 0.2rem rgba(200, 200, 200, 0.25);`;

package/styles/theme--vanilla.mjs

@@ -1,65 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useEffect, useState } from "react";
-import isBrowser from "@koine/utils/isBrowser";
-// import setCookie from "@koine/utils/setCookie";
-// import parseCookie from "@koine/utils/parseCookie";
-import useUpdateEffect from "../hooks/useUpdateEffect";
-export const THEME_KEY = "theme";
-export const THEME_DEFAULT = "light";
-// export const getInitialThemeFromRequest = (
-//   cookie?: string
-// ): ThemeVanillaValue => {
-//   if (cookie) {
-//     const parsed = parseCookie<ThemeCookie>(cookie);
-//     return parsed?.theme;
-//   }
-//   return THEME_DEFAULT;
-// };
-export 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;
-};
-export const ThemeVanillaContext = /*#__PURE__*/ createContext({
-    theme: "light",
-    setTheme: undefined
-});
-export const ThemeVanillaProvider = ({ initialTheme, children })=>{
-    const [theme, setTheme] = useState(initialTheme);
-    const rawSetTheme = (rawTheme)=>{
-        if (!rawTheme || !isBrowser) {
-            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);
-    };
-    useEffect(()=>{
-        const theme = getInitialThemeFromClient();
-        setTheme(theme);
-        rawSetTheme(theme);
-    }, []);
-    useUpdateEffect(()=>{
-        rawSetTheme(theme);
-    }, [
-        theme
-    ]);
-    return /*#__PURE__*/ _jsx(ThemeVanillaContext.Provider, {
-        value: {
-            theme,
-            setTheme
-        },
-        children: children
-    });
-};

package/styles/theme.mjs

@@ -1,38 +0,0 @@
-import { useTheme as _useTheme } from "styled-components";
-const DEFAULT_BREAKPOINTS = {
-    xs: 0,
-    sm: 440,
-    md: 768,
-    lg: 1024,
-    xl: 1368,
-    xxl: 1690
-};
-/**
- * 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 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"
-    }
-};
-export const createTheme = (options)=>({
-        ...themeDefault,
-        ...options
-    });
-export const useTheme = _useTheme;

package/tw/index.mjs

@@ -1,30 +0,0 @@
-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/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.mjs

@@ -1,30 +0,0 @@
-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/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.mjs

@@ -1 +0,0 @@
-export { };