react-miui 0.23.0 → 0.23.1

package/CHANGELOG.md

@@ -3,7 +3,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
-## [0.23.0] - 2023-08-03
+## [0.23.1] - 2023-08-04
+### Fixed
+- regression: missing css files in npm package
+
+## [0.23.0] - 2023-08-04
 ### Dev
 - big deps, config and builds upgrade
 ### Fixed

package/dist/components/form/Checkbox.module.scss

@@ -0,0 +1,71 @@
+.checkbox {
+    input {
+        width: 0;
+        height: 0;
+        transform: scale(0);
+        margin: 0;
+        vertical-align: middle;
+
+        &:focus-visible {
+            + .checkmark {
+                box-shadow: 0 0 5px black;
+            }
+        }
+
+        + .checkmark + .label:not(:empty) {
+            margin-left: 0.75em;
+        }
+    }
+}
+
+.checkmark {
+    border-radius: 100px;
+    background: none;
+    border: 1px solid var(--inactive-bg);
+    width: 18px;
+    height: 18px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    vertical-align: middle;
+    box-sizing: border-box;
+
+    svg {
+        display: none;
+        width: 9px;
+        height: 9px;
+        fill: white;
+    }
+
+    + .label {
+        vertical-align: middle;
+    }
+}
+
+.checkmarkChecked {
+    border-width: 0;
+    color: var(--main-color);
+    background: currentColor;
+
+    svg {
+        display: inline-block;
+    }
+
+    &.checkmarkDisabled {
+        background: var(--inactive-dark-bg);
+    }
+}
+
+.checkmarkDisabled {
+    background: var(--active-bg);
+
+    + .label {
+        color: var(--input-disabled-text);
+    }
+}
+
+.checkmarkReadOnly {
+    + .label {
+        color: var(--input-disabled-text);
+    }
+}

package/dist/components/form/Label.module.scss

@@ -0,0 +1,15 @@
+.label + .label {
+    margin-top: 23px;
+    display: block;
+}
+
+.text {
+    font-size: calc(28px / var(--ratio-font));
+    margin-bottom: calc(24px / var(--ratio-dimensions));
+    color: var(--sub);
+}
+
+.textBig {
+    font-size: calc(34px / var(--ratio-font));
+
+}

package/dist/components/form/Toggle.module.scss

@@ -0,0 +1,55 @@
+.container {
+    --ratio-dimensions: 2.5;
+
+    display: inline-flex;
+    align-items: center;
+    border: 1px solid #ccc;
+    border-radius: 100px;
+    position: relative;
+    line-height: 0;
+    width: calc(110px / var(--ratio-dimensions));
+    height: calc(62px / var(--ratio-dimensions));
+    padding-left: calc(8px / var(--ratio-dimensions));
+    box-sizing: border-box;
+
+    input {
+        position: absolute;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        visibility: hidden;
+
+        &:not(:checked) + .toggle {
+            transform: translateX(0);
+            background: var(--toggle-handle-bg);
+            border-color: var(--toggle-handle-border);
+        }
+
+        &[data-undetermined=true] + .toggle {
+            transform: translateX(calc(24px / var(--ratio-dimensions)));
+            background: var(--toggle-handle-border);
+            border-color: var(--toggle-handle-border);
+        }
+
+        &:disabled:checked + .toggle {
+            border-color: var(--toggle-handle-border-disabled);
+            background: var(--toggle-handle-bg-disabled);
+        }
+    }
+}
+
+.disabled {
+    background: var(--toggle-bg-disabled);
+}
+
+.toggle {
+    box-sizing: border-box;
+    border-radius: 100px;
+    display: inline-block;
+    width: calc(44px / var(--ratio-dimensions));
+    height: calc(44px / var(--ratio-dimensions));
+    border: calc(1px / var(--ratio-border)) solid var(--orange1-darker);
+    background: var(--orange1);
+    transition: transform 200ms, background-color 200ms, border-color 200ms;
+    transform: translateX(calc(48px / var(--ratio-dimensions)));
+}

package/dist/components/form/choice/Choice.module.scss

@@ -0,0 +1,56 @@
+.choice {
+    input {
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        opacity: 0;
+        margin: 0;
+        position: absolute;
+
+        &:checked + span {
+            color: var(--choice-active-text);
+            background: var(--choice-active-bg);
+        }
+    }
+
+    span {
+        display: flex;
+        padding: 0 1em;
+        flex: 1;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+        font-size: calc(24px / var(--ratio-font));
+        color: var(--choice-text);
+        background: var(--choice-bg);
+        white-space: nowrap;
+    }
+
+    display: flex;
+    border: 1px solid var(--choice-border); // @TODO width
+    position: relative;
+    border-radius: 8px;
+    overflow: hidden;
+    width: max-content;
+    margin-left: auto;
+    margin-right: auto;
+
+    label {
+        flex: 1;
+        height: calc(89px / var(--ratio-dimensions));
+        display: flex;
+
+        + label {
+            border-left: 1px solid var(--choice-border);
+        }
+    }
+}
+
+.wide {
+    width: 100%;
+}
+
+.left {
+    margin-left: unset;
+    margin-right: unset;
+}

package/dist/components/form/input/Input.module.scss

@@ -0,0 +1,7 @@
+.textarea {
+    padding: 1.2em calc(36px / var(--ratio-dimensions));
+    height: unset;
+    resize: vertical;
+    min-height: calc(103px * 3 / var(--ratio-dimensions))
+}
+

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

@@ -0,0 +1,15 @@
+.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/header/Header.module.scss

@@ -0,0 +1,108 @@
+.header {
+    --border-color: var(--header-border);
+    --background-color: var(--header-bg);
+    background-clip: padding-box;
+    background: var(--background-color);
+    display: flex;
+    align-items: center;
+    font-size: 15px;
+    font-weight: bold;
+    box-sizing: border-box;
+    color: var(--header-text);
+}
+
+.header--toolbar {
+    --border-color: var(--toolbar-border);
+    --background-color: var(--toolbar-bg);
+}
+
+.header--colored {
+    --border-color: var(--custom-header-color);
+    --background-color: var(--custom-header-color);
+    color: var(--custom-text-color);
+}
+
+.header--top, .header--bottom {
+    padding: 0 16.666px;
+    min-height: 44px;
+}
+.header--left, .header--right {
+    padding: 16.666px 0;
+    min-width: 44px;
+    flex-direction: column;
+
+    > .contents {
+        flex-direction: column;
+        align-items: center;
+    }
+}
+
+.header--top {
+    border-bottom: 0.37px solid var(--border-color);
+}
+.header--bottom {
+    border-top: 0.37px solid var(--border-color);
+    order: 2;
+}
+.header--left {
+    border-right: 0.37px solid var(--border-color);
+}
+.header--right {
+    border-left: 0.37px solid var(--border-color);
+    order: 2;
+}
+
+.contents {
+    flex: 1;
+    display: flex;
+}
+
+.header--center > .contents {
+    justify-content: center;
+}
+
+.header--top, .header--bottom {
+    .before {
+        margin-right: calc(50px / var(--ratio-dimensions));
+        height: 100%;
+        padding: 7px 0;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .after {
+        margin-left: calc(50px / var(--ratio-dimensions));
+        height: 100%;
+        padding: 7px 0;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .actions {
+        margin: calc(56px / var(--ratio-dimensions)) 0;
+    }
+}
+
+.header--left, .header--right {
+    .before {
+        margin-bottom: calc(50px / var(--ratio-dimensions));
+        flex-direction: column;
+    }
+
+    .after {
+        margin-top: calc(50px / var(--ratio-dimensions));
+        flex-direction: column;
+    }
+
+    .actions {
+        margin: 0 calc(56px / var(--ratio-dimensions));
+    }
+}
+
+.before, .after {
+    display: flex;
+}

package/dist/components/layout/header/HeaderIconAction.module.scss

@@ -0,0 +1,26 @@
+.btn, .a {
+    height: 100%;
+    aspect-ratio: 1;
+    background: none;
+    border-radius: 666px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: calc(2px / var(--ratio-border)) solid transparent;
+    color: currentColor;
+
+    &:hover {
+        background: #00000022;
+    }
+    &:active {
+        background: #00000011;
+        color: currentColor;
+    }
+}
+
+.icon {
+    width: 16px;
+    height: 16px;
+    display: block;
+    fill: currentColor;
+}

package/dist/components/layout/header/StickyHeader.module.scss

@@ -0,0 +1,18 @@
+.stickyHeader {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    &__content {
+        flex: 1;
+        overflow: auto;
+
+        &--bottom, &--right {
+            order: 1;
+        }
+    }
+}
+
+.stickyHeader--left, .stickyHeader--right {
+    flex-direction: row;
+}

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

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

package/dist/components/layout/table/Table.module.scss

@@ -0,0 +1,30 @@
+.table {
+    border-spacing: 10px;
+    border-collapse: collapse;
+
+    > * > tr > * {
+        text-align: left;
+        padding: 0.75em 0.5em;
+        border-bottom: 1px solid var(--border);
+    }
+
+    > thead > tr:last-child > * {
+        border-bottom: 2px solid var(--border);
+        box-shadow: 0 4px 10px -10px rgba(0, 0, 0, 0.6);
+    }
+}
+
+.striped {
+    > tbody > tr:nth-child(even) > * {
+        background: var(--table-striped-bg);
+    }
+}
+
+.centered {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.wide {
+    width: 100%;
+}

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

@@ -0,0 +1,26 @@
+.action {
+    height: calc(102px / var(--ratio-dimensions));
+    width: calc(102px / var(--ratio-dimensions));
+    border-radius: 100px;
+    border: calc(1px / var(--ratio-border)) solid var(--button-border);
+    background: white;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.a {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.button {
+    border: none;
+    padding: 0;
+    background: none;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    gap: calc(18px / var(--ratio-dimensions));
+}

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

@@ -0,0 +1,11 @@
+.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

@@ -0,0 +1,45 @@
+.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

@@ -0,0 +1,15 @@
+.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

@@ -0,0 +1,57 @@
+.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

@@ -0,0 +1,31 @@
+.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/pop/Pop.module.scss

@@ -0,0 +1,60 @@
+.overlay {
+    position: fixed;
+    background: #0000004c;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 4;
+}
+
+.pop {
+    z-index: 5;
+    position: absolute;
+    background: white;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+.li {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+
+    + .li {
+        border-top: 1px solid var(--border);
+    }
+}
+
+.button {
+    border: none;
+    background: white;
+    height: calc(116px / var(--ratio-dimensions));
+    padding: 0 calc(42px / var(--ratio-dimensions));
+    box-sizing: border-box;
+    width: 100%;
+    min-width: calc(460px / var(--ratio-dimensions));
+    text-align: left;
+    color: var(--pop-text);
+    font-size: calc(26px / var(--ratio-font));
+    font-weight: revert;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+        background: var(--active-bg);
+    }
+}
+
+.icon {
+    fill: currentColor;
+    margin-right: calc(42px / var(--ratio-dimensions));
+}
+
+.fakeIcon {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    margin-right: calc(42px / var(--ratio-dimensions));
+}