@koine/react 1.0.9 → 1.0.10

package/styles/styled.js

@@ -1,27 +0,0 @@
-export function 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.d.ts

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

package/styles/theme--vanilla.js

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

package/styles/theme.d.ts

@@ -1,82 +0,0 @@
-export declare type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
-export declare 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;
-export declare type Theme = {
-    maxWidth: number;
-    gutter: {
-        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];
-    };
-};
-export declare type ThemeOptions = {
-    maxWidth?: number;
-    gutter: NonNullable<Theme["gutter"]>;
-    devices?: Theme["devices"];
-    spaces: NonNullable<Theme["spaces"]>;
-    header: NonNullable<Theme["header"]>;
-};

package/styles/theme.js

@@ -1,41 +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.d.ts

@@ -1,2 +0,0 @@
-export * from "../shared";
-export { KoineDialog, type KoineDialogProps } from "../Dialog/tw/bare";

package/tw/index.js

@@ -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 "../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/tw/package.json

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

package/twm/index.d.ts

@@ -1,2 +0,0 @@
-export * from "../shared";
-export { KoineDialog, type KoineDialogProps } from "../Dialog/tw/framer";

package/twm/index.js

@@ -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 "../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/package.json

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

package/types.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-export type { KoineImgSmartWrapProps, KoineImgSmartProps } from "./Img/types";
-export declare type Translate = (i18nKey: any, query?: any, options?: any) => string;
-export declare type Option = {
-    value: string;
-    Label?: NonNullable<import("react").ReactNode>;
-    label: NonNullable<import("react").ReactChild | import("react").ReactFragment>;
-};
-export declare type KoineComponentProps<BaseComponentProps, ExtendableProps> = BaseComponentProps & ExtendableProps;
-export declare type KoineComponent<Props = any> = string | React.ForwardRefExoticComponent<Props> | React.ExoticComponent<Props> | React.FC<Props> | ((props: Props) => JSX.Element);

package/types.js

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