react-miui 0.19.0 → 0.20.1

package/src/theme.ts

@@ -1,6 +1,21 @@
 import { createStitches } from "@stitches/react";
 
-export const {
+import type { StyledComponent } from "@stitches/react/types/styled-component";
+import type { CSS as StitchesCSS } from "@stitches/react";
+
+const RATIOS = {
+    dimensions: 3,
+    border: 2.666666,
+    font: 1.666666,
+};
+
+// eslint-disable-next-line @typescript-eslint/no-magic-numbers
+const pxToRem = (px: number) => `${px / 16}rem`;
+const dimensionsPxToRem = (px: number) => pxToRem(px / RATIOS.dimensions);
+const borderPxToRem = (px: number) => pxToRem(px / RATIOS.border);
+const fontPxToRem = (px: number) => pxToRem(px / RATIOS.font);
+
+const {
     styled,
     css,
     globalCss,
@@ -11,7 +26,76 @@ export const {
     config,
 } = createStitches({
     theme: {
-        colors: {},
+        colors: {
+            background: "white",
+
+            mainColor: "#008ad2",
+            mainColorAlt: "#006AA9",
+
+            activeBg: "#e7e7e7",
+            inactiveBg: "#d3d3de",
+            inactiveDarkBg: "#999",
+
+            toggleHandleBg: "#e0e0e0",
+            toggleHandleBorder: "#cdcdcd",
+            toggleBgDisabled: "#f0f0f0",
+            toggleHandleBorderDisabled: "#c29f7d",
+            toggleHandleBgDisabled: "#deae84",
+
+            icon: "#636363",
+            border: "#d5d5d5",
+            buttonBorder: "#bababa",
+
+            headerBorder: "#c8c8c9",
+            headerBg: "#efeff0",
+            headerText: "#484848",
+            text: "#323232",
+            sub: "#959595",
+
+            popText: "#666",
+
+            toolbarBorder: "#ababab",
+            toolbarBg: "#f8f8f8",
+            modalBg: "#f7f7f7",
+            modalButtonBg: "#f8f8f8",
+            modalButtonBorder: "#c2c2c2",
+
+            inputDisabledBg: "#f3f3f3",
+            inputDisabledText: "#959595",
+
+            choiceBg: "#ffffff",
+            choiceText: "#999999",
+            choiceActiveBg: "#f3f3f3",
+            choiceActiveText: "#313131",
+            choiceBorder: "#cfcfcf",
+
+            selectorText: "#606060",
+            selectorActive: "#008ad2",
+
+            // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
+            blue1: "#038bf4",
+            blue2: "#b7d6f5",
+            blue3: "#dbe6ff",
+            orange1: "#ff7200",
+            orange1Darker: "#cc5b00",
+            purple1: "#7357e8",
+            green1: "#3ec234",
+            green1Darker: "#38af2f",
+            pink1: "#ff388f",
+            red1: "#ea2700",
+            yellow1: "#ffde9d",
+            yellow2: "#e4a429",
+            yellow3: "#fff5db",
+            pinky1: "#f5c0b7",
+            pinky2: "#e07b67",
+            pinky3: "#ffe1db",
+
+            grey1: "#737373",
+            focusColor: "#dcaf00",
+            scrollbarsThumb: "#737373",
+            scrollbarsBg: "transparent",
+            tableStripedBg: "#fafafa",
+        },
     },
     utils: {
         mx: (value: string) => ({ marginLeft: value, marginRight: value }),
@@ -19,3 +103,26 @@ export const {
         size: (value: string) => ({ width: value, height: value }),
     },
 });
+
+type ThemeCSS = StitchesCSS<typeof config>;
+
+type OverwriteProps<
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/no-use-before-define
+    T extends StyledComponent<Type, OldProps, Media, TheCSS>,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Props, Type = any, OldProps = any, Media = any, TheCSS = any,
+> = StyledComponent<Type, Props, Media, TheCSS>;
+
+export type {
+    ThemeCSS,
+    OverwriteProps,
+};
+
+export {
+    styled, css, globalCss, keyframes, getCssText, theme, createTheme, config,
+
+    pxToRem,
+    dimensionsPxToRem,
+    borderPxToRem,
+    fontPxToRem,
+};

package/dist/components/form/TextArea.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/form/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAMrD,UAAU,KAAK;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,GAAG,KAAK,CAwBjF,CAAC;AAEF,OAAO,EACH,QAAQ,GACX,CAAC"}

package/dist/components/form/TextArea.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/form/TextArea.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqD;AAErD,4DAAoC;AAEpC,kFAA+C;AAM/C,MAAM,QAAQ,GAAwE,CAAC,EAItF,EAAE,EAAE;QAJkF,EACnF,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,MAAM,OAElB,EADM,KAAK,cAH2E,8CAItF,CADW;IAER,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,WAAW,GAAG,IAAA,mBAAW,EAAC,CAAC,CAAwC,EAAE,EAAE;QACzE,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;IACjB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,UAAU,GAAG,IAAA,mBAAW,EAAC,CAAC,CAAwC,EAAE,EAAE;QACxE,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,CAAC,CAAC,CAAC;IAChB,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,GAAG,GAAG,IAAA,oBAAU,EAAC,2BAAM,CAAC,OAAO,EAAE;QACnC,CAAC,2BAAM,CAAC,cAAc,CAAC,EAAE,OAAO;KACnC,EAAE,2BAAM,CAAC,KAAK,EAAE,2BAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAE7C,OAAO,CACH,4DAAc,KAAK,IAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,IAAI,CACpF,CAAC;AACN,CAAC,CAAC;AAGE,4BAAQ"}

package/esm/components/form/TextArea.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/form/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAMrD,UAAU,KAAK;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,GAAG,KAAK,CAwBjF,CAAC;AAEF,OAAO,EACH,QAAQ,GACX,CAAC"}

package/esm/components/form/TextArea.js

@@ -1,20 +0,0 @@
-import React, { useCallback, useState } from "react";
-import classnames from "classnames";
-import styles from "./input/Input.module.scss";
-const TextArea = ({ className, children, onFocus, onBlur, ...props }) => {
-    const [focused, setFocused] = useState(false);
-    const handleFocus = useCallback((e) => {
-        setFocused(true);
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
-    }, [onFocus]);
-    const handleBlur = useCallback((e) => {
-        setFocused(false);
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-    }, [onBlur]);
-    const cls = classnames(styles.wrapper, {
-        [styles.wrapperFocused]: focused,
-    }, styles.input, styles.textarea, className);
-    return (React.createElement("textarea", { ...props, onFocus: handleFocus, onBlur: handleBlur, className: cls }));
-};
-export { TextArea, };
-//# sourceMappingURL=TextArea.js.map

package/esm/components/form/TextArea.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/form/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAM/C,MAAM,QAAQ,GAAwE,CAAC,EACnF,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,MAAM,EACf,GAAG,KAAK,EACX,EAAE,EAAE;IACD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAwC,EAAE,EAAE;QACzE,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;IACjB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,CAAwC,EAAE,EAAE;QACxE,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,CAAC,CAAC,CAAC;IAChB,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE;QACnC,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,OAAO;KACnC,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAE7C,OAAO,CACH,qCAAc,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,GAAI,CACpF,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EACH,QAAQ,GACX,CAAC"}