react-miui 0.28.3 → 0.30.0

package/src/utils/useTailSpin.ts

@@ -0,0 +1,38 @@
+import { useId, useMemo } from "react";
+
+const src = `<svg xmlns="http://www.w3.org/2000/svg" width="69" height="69" viewBox="0 0 38 38"><defs><linearGradient id="iidd" x1="8.042%" x2="65.682%" y1="0%" y2="23.865%"><stop offset="0%" stop-color="#fff" stop-opacity="0"/><stop offset="63.146%" stop-color="#fff" stop-opacity=".631"/><stop offset="100%" stop-color="#fff"/></linearGradient></defs><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><path stroke="url(#iidd)" stroke-width="2" d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" dur="0.9s" from="0 18 18" repeatCount="indefinite" to="360 18 18" type="rotate"/></path><circle cx="36" cy="18" r="1" fill="#fff"><animateTransform attributeName="transform" dur="0.9s" from="0 18 18" repeatCount="indefinite" to="360 18 18" type="rotate"/></circle></g></svg>`;
+
+type Options = {
+    /**
+     * Size of the spinner, can be unitless, defaults to 2rem
+     */
+    size?: string | number | undefined;
+    /**
+     * Color of the spinner, defaults to currentColor
+     */
+    color?: string | undefined;
+    /**
+     * Time in ms for a full spin
+     */
+    speed?: number | undefined;
+};
+
+const DEFAULT_SPEED = 400;
+const DEFAULT_SIZE = "2rem";
+const DEFAULT_COLOR = "currentColor";
+
+const useTailSpin = ({ size = DEFAULT_SIZE, color = DEFAULT_COLOR, speed = DEFAULT_SPEED }: Options) => {
+    const id = useId();
+
+    return useMemo(() => {
+        const svg = src.replace(/iidd/gu, id).replace(/69/gu, String(size))
+            .replace(/#fff/gu, color).replace(/0\.9s/gu, `${speed}ms`);
+        const encoded = encodeURIComponent(svg).replace(/'/gu, "%27")
+            .replace(/"/gu, "%22");
+        return `data:image/svg+xml,${encoded}`;
+    }, [size, color, speed]);
+};
+
+export {
+    useTailSpin,
+};

package/.prettierignore

@@ -1,3 +0,0 @@
-*.js
-*.ts
-*.tsx

package/.prettierrc.json

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

package/dist/components/layout/card/Card.module.scss

@@ -1,15 +0,0 @@
-.card {
-    background: var(--background);
-    border-radius: 5px;
-    display: flex;
-    flex-direction: column;
-
-    + .card {
-        margin-top: 23px;
-    }
-}
-
-.margin {
-    margin-left: 23px;
-    margin-right: 23px;
-}

package/dist/components/layout/section/SearchContainer.module.scss

@@ -1,3 +0,0 @@
-.section {
-    margin: 12px;
-}

package/dist/components/ui/action/EqualActions.module.scss

@@ -1,11 +0,0 @@
-.actions {
-    --actions-count: 1;
-    display: inline-grid;
-    grid-template-columns: repeat(var(--actions-count), 1fr);
-    gap: calc(56px / var(--ratio-dimensions));
-}
-
-.vertical {
-    grid-template-columns: auto;
-    grid-template-rows: repeat(var(--actions-count), 1fr);
-}

package/dist/components/ui/directionPad/Pad.module.scss

@@ -1,45 +0,0 @@
-.pad {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 150px;
-    border-radius: 666px;
-    width: 150px;
-    border: 1px solid #aaa;
-    background: white;
-
-    &__line {
-        display: flex;
-    }
-
-    &__button {
-        height: 50px;
-        width: 50px;
-        margin: 0;
-        border-radius: 666px;
-        border: none;
-        display: block;
-        background: none;
-    }
-
-    &__middle {
-        display: block;
-        margin: 0;
-        height: 50px;
-        width: 50px;
-        border: 1px solid #999;
-        box-sizing: border-box;
-        border-radius: 666px;
-        background: none;
-    }
-
-    &__dot {
-        display: block;
-        width: 4px;
-        height: 4px;
-        border-radius: 666px;
-        background: black;
-        margin: auto;
-    }
-}

package/dist/components/ui/drawer/Drawer.module.scss

@@ -1,15 +0,0 @@
-.drawer {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: white;
-    z-index: 1;
-
-    transition: transform 300ms;
-}
-
-.content {
-    height: 100%;
-}

package/dist/components/ui/keyValue/KeyValue.module.scss

@@ -1,57 +0,0 @@
-.container {
-    --kv-border-color: var(--header-border);
-    --kv-border: calc(1px / var(--ratio-border)) solid var(--kv-border-color);
-    --kv-background-color: white;
-    --kv-hover-background-color: var(--active-bg);
-    border: 1px solid var(--kv-border-color);
-    background-color: var(--kv-background-color);
-    border-radius: 5px;
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.item {
-    display: inline-flex;
-    box-sizing: border-box;
-    padding: 10px;
-    align-items: center;
-    gap: 10px;
-    border: none;
-    background: none;
-}
-
-button.item:hover {
-    background: var(--kv-hover-background-color)
-}
-
-.kv {
-    display: flex;
-    flex-direction: column;
-    gap: 3px;
-}
-
-.key {
-    font-size: calc(22px / var(--ratio-font));
-    color: var(--sub);
-}
-
-.value {
-    font-size: calc(29px / var(--ratio-font));
-}
-
-.itemNotFirstRow {
-    border-top: var(--kv-border);
-}
-
-.itemNotFirstCol {
-    border-left: var(--kv-border);
-}
-
-.itemLastWithoutFullRow {
-    border-right: var(--kv-border);
-}
-
-.missingItem {
-    border-top: var(--kv-border);
-    border-left: var(--kv-border);
-}

package/dist/components/ui/message/Message.module.scss

@@ -1,31 +0,0 @@
-.container {
-    border-top: 1px solid var(--border);
-    border-bottom: 1px solid var(--border);
-    padding: calc(47px / var(--ratio-dimensions)) calc(83px / var(--ratio-dimensions));
-    font-weight: 500;
-    line-height: 1.25;
-}
-
-.box {
-    border-left: 1px solid var(--border);
-    border-right: 1px solid var(--border);
-    margin: 12px;
-}
-
-.warning {
-    background-color: var(--yellow3);
-    border-color: var(--yellow1);
-    color: var(--yellow2);
-}
-
-.error {
-    background-color: var(--pinky3);
-    border-color: var(--pinky1);
-    color: var(--pinky2);
-}
-
-.info {
-    background-color: var(--blue3);
-    border-color: var(--blue2);
-    color: var(--blue1);
-}

package/dist/components/ui/modal/ModalButton.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-type Variant = "main";
-interface Props {
-    variant?: Variant | Variant[];
-}
-declare const ModalButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & Props>;
-export { ModalButton };
-//# sourceMappingURL=ModalButton.d.ts.map

package/dist/components/ui/modal/ModalButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ModalButton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/ModalButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,KAAK,OAAO,GAAG,MAAM,CAAC;AAEtB,UAAU,KAAK;IACX,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;CACjC;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAUhF,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/ui/modal/ModalButton.js

@@ -1,31 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalButton = void 0;
-const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_1 = require("../../../utils/index");
-const ModalButtons_module_scss_1 = __importDefault(require("./ModalButtons.module.scss"));
-const ModalButton = (_a) => {
-    var { className, children, variant } = _a, props = __rest(_a, ["className", "children", "variant"]);
-    const v = (0, index_1.makeVariants)(variant);
-    const cls = (0, classnames_1.default)(ModalButtons_module_scss_1.default.button, {
-        [ModalButtons_module_scss_1.default.buttonMain]: v.includes("main"),
-    }, className);
-    return react_1.default.createElement("button", Object.assign({}, props, { className: cls }), children);
-};
-exports.ModalButton = ModalButton;
-//# sourceMappingURL=ModalButton.js.map

package/dist/components/ui/modal/ModalButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ModalButton.js","sourceRoot":"","sources":["../../../../src/components/ui/modal/ModalButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAE1B,4DAAoC;AAEpC,gDAAoD;AAEpD,0FAAgD;AAQhD,MAAM,WAAW,GAAoE,CAAC,EAErF,EAAE,EAAE;QAFiF,EAClF,SAAS,EAAE,QAAQ,EAAE,OAAO,OAC/B,EADoC,KAAK,cAD4C,oCAErF,CADyC;IAEtC,MAAM,CAAC,GAAG,IAAA,oBAAY,EAAC,OAAO,CAAC,CAAC;IAEhC,MAAM,GAAG,GAAG,IAAA,oBAAU,EAAC,kCAAM,CAAC,MAAM,EAAE;QAClC,CAAC,kCAAM,CAAC,UAAoB,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC;KACpD,EAAE,SAAS,CAAC,CAAC;IAEd,OAAO,0DAAY,KAAK,IAAE,SAAS,EAAE,GAAG,KAAG,QAAQ,CAAU,CAAC;AAClE,CAAC,CAAC;AAEO,kCAAW"}

package/dist/components/ui/stats/Stats.module.scss

@@ -1,48 +0,0 @@
-.stats {
-    --stats-border: 1px solid rgba(255, 255, 255, .15);
-    --stats-bg: rgba(255, 255, 255, .05);
-    --stats-value-color: rgba(255, 255, 255, .9);
-    --stats-label-color: rgba(255, 255, 255, .61);
-
-    display: flex;
-    width: 100%;
-    padding: calc(60px / var(--ratio-dimensions)) 0;
-    margin: 0;
-    border-top: var(--stats-border);
-    background: var(--stats-bg);
-    background-clip: padding-box;
-    list-style-type: none;
-}
-
-.stats-dark {
-    --stats-border: 1px solid rgba(0, 0, 0, .15);
-    --stats-bg: rgba(0, 0, 0, .05);
-    --stats-value-color: rgba(0, 0, 0, .9);
-    --stats-label-color: rgba(0, 0, 0, .61);
-}
-
-.item {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    text-align: center;
-    gap: calc(20px / var(--ratio-dimensions));
-}
-
-.separator {
-    border-left: var(--stats-border);
-}
-
-.label {
-    display: block;
-    color: var(--stats-label-color);
-    font-size: calc(22px / var(--ratio-font));
-}
-
-.value {
-    display: block;
-    color: var(--stats-value-color);
-    font-size: calc(30px / var(--ratio-font));
-}

package/dist/components/ui/tabs/Item.module.scss

@@ -1,11 +0,0 @@
-.button {
-    border: none;
-    padding: 0;
-    font-size: calc(29px / var(--ratio-font));
-    color: var(--selector-text);
-    background: none;
-}
-
-.active {
-    color: var(--selector-active);
-}

package/dist/components/ui/tabs/Selector.module.scss

@@ -1,6 +0,0 @@
-.selector {
-    display: flex;
-    flex: 1;
-    justify-content: center;
-    gap: calc(114px / var(--ratio-dimensions));
-}

package/dist/global.scss

@@ -1,95 +0,0 @@
-// @TODO prefix variable names
-:root {
-    --ratio-dimensions: 3;
-    --ratio-border:     2.666666;
-    // font is calculated from top to bottom
-    --ratio-font:       1.666666;
-
-    --background: white;
-
-    --main-color: #008ad2;
-    --main-color-alt: #006AA9;
-
-    --active-bg: #e7e7e7;
-    --inactive-bg: #d3d3d3;
-    --inactive-dark-bg: #999;
-
-    --toggle-handle-bg: #e0e0e0;
-    --toggle-handle-border: #cdcdcd;
-    --toggle-bg-disabled: #f0f0f0;
-    --toggle-handle-border-disabled: #c29f7d;
-    --toggle-handle-bg-disabled: #deae84;
-
-    --icon: #636363;
-    --border: #d5d5d5;
-    --button-border: #bababa;
-
-    --header-border: #c8c8c9;
-    --header-bg: #efeff0;
-    --header-text: #484848;
-    --text: #323232;
-    --sub: #959595;
-
-    --pop-text: #666;
-
-    --toolbar-border: #ababab;
-    --toolbar-bg: #f8f8f8;
-    --modal-bg: #f7f7f7;
-    --modal-button-bg: #f8f8f8;
-    --modal-button-border: #c2c2c2;
-
-    --input-disabled-bg: #f3f3f3;
-    --input-disabled-text: #959595;
-
-    --choice-bg: #ffffff;
-    --choice-text: #999999;
-    --choice-active-bg: #f3f3f3;
-    --choice-active-text: #313131;
-    --choice-border: #cfcfcf;
-
-    --selector-text: #606060;
-    --selector-active: var(--main-color);
-
-    // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
-    --blue1: #038bf4;
-    --blue2: #b7d6f5;
-    --blue3: #dbe6ff;
-    --orange1: #ff7200;
-    --orange1-darker: #cc5b00;
-    --purple1: #7357e8;
-    --green1: #3ec234;
-    --green1-darker: #38af2f;
-    --pink1: #ff388f;
-    --red1: #ea2700;
-    --yellow1: #ffde9d;
-    --yellow2: #e4a429;
-    --yellow3: #fff5db;
-    --pinky1: #f5c0b7;
-    --pinky2: #e07b67;
-    --pinky3: #ffe1db;
-
-    --grey1: #737373;
-
-    --focus-color: #dcaf00;
-
-    --scrollbars-thumb: var(--grey1);
-    --scrollbars-bg: transparent;
-
-    --table-striped-bg: #fafafa;
-}
-
-*:focus {
-    outline: none!important;
-}
-
-*:focus-visible:focus-visible {
-    outline: none!important;
-    border-color: var(--focus-color);
-    background-color: var(--focus-bg-set);
-}
-
-
-body {
-    font-size: 15px;
-    color: var(--text);
-}

package/dist/scrollbars.scss

@@ -1,22 +0,0 @@
-.miui-scrollbars {
-    overflow-y: auto;
-    scrollbar-color: var(--scrollbars-thumb) var(--scrollbars-bg);
-    scrollbar-width: thin !important;
-
-    &::-webkit-scrollbar {
-        width: 6px;
-        background-color: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb:vertical {
-        background: var(--scrollbars-thumb);
-        background-clip: padding-box;
-        border: 2px solid var(--scrollbars-bg);
-        min-height: 10px;
-    }
-
-    &::-webkit-scrollbar-thumb:vertical:active {
-        background: var(--scrollbars-thumb);
-        border: 2px solid var(--scrollbars-bg);
-    }
-}

package/dist/utils/makeVariants.d.ts

@@ -1,3 +0,0 @@
-declare const makeVariants: <T extends string>(variants: T | T[] | undefined) => T[];
-export { makeVariants, };
-//# sourceMappingURL=makeVariants.d.ts.map

package/dist/utils/makeVariants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"makeVariants.d.ts","sourceRoot":"","sources":["../../src/utils/makeVariants.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY,GAAI,CAAC,SAAS,MAAM,EAAE,UAAU,CAAC,GAAG,CAAC,EAAE,GAAG,SAAS,KAAG,CAAC,EAQxE,CAAC;AAEF,OAAO,EACH,YAAY,GACf,CAAC"}

package/dist/utils/makeVariants.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeVariants = void 0;
-const makeVariants = (variants) => {
-    if (!variants) {
-        return [];
-    }
-    if (typeof variants === "string") {
-        return variants.split(" ").filter(Boolean);
-    }
-    return variants;
-};
-exports.makeVariants = makeVariants;
-//# sourceMappingURL=makeVariants.js.map

package/dist/utils/makeVariants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"makeVariants.js","sourceRoot":"","sources":["../../src/utils/makeVariants.ts"],"names":[],"mappings":";;;AAAA,MAAM,YAAY,GAAG,CAAmB,QAA6B,EAAO,EAAE;IAC1E,IAAI,CAAC,QAAQ,EAAE,CAAC;QACZ,OAAO,EAAE,CAAC;IACd,CAAC;IACD,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;QAC/B,OAAO,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAQ,CAAC;IACtD,CAAC;IACD,OAAO,QAAQ,CAAC;AACpB,CAAC,CAAC;AAGE,oCAAY"}

package/docs/assets/pages.css

@@ -1,14 +0,0 @@
-.tsd-navigation li.pages-entry.pages-entry-page > a {
-	color: var(--color-link);
-}
-.tsd-navigation li.pages-entry > a {
-	padding-top: 0.25rem;
-	padding-bottom: 0.25rem;
-}
-.tsd-page-toolbar .table-cell .pages-entry {
-	white-space: normal;
-}
-
-#tsd-search .results .pages-entry-page > a::before {
-	content: '📚 ';
-}