@react-ui-org/react-ui 0.54.0 → 0.55.1

package/src/components/Modal/Modal.scss

@@ -1,78 +0,0 @@
-@use "sass:map";
-@use "../../styles/theme/typography";
-@use "../../styles/tools/accessibility";
-@use "../../styles/tools/breakpoint";
-@use "../../styles/tools/reset";
-@use "../../styles/tools/spacing";
-@use "settings";
-@use "theme";
-
-.root {
-    --rui-local-outer-spacing: #{theme.$outer-spacing-xs};
-    --rui-local-max-width: calc(100% - (2 * var(--rui-local-outer-spacing)));
-    --rui-local-max-height: calc(100% - (2 * var(--rui-local-outer-spacing)));
-
-    position: fixed;
-    left: 50%;
-    z-index: settings.$z-index;
-    display: flex;
-    flex-direction: column;
-    max-width: var(--rui-local-max-width);
-    max-height: var(--rui-local-max-height);
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    border-radius: settings.$border-radius;
-    background: theme.$background;
-    box-shadow: theme.$box-shadow;
-    transform: translateX(-50%);
-
-    @include breakpoint.up(sm) {
-        --rui-local-outer-spacing: #{theme.$outer-spacing-sm};
-    }
-}
-
-.backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: settings.$backdrop-z-index;
-    width: 100vw;
-    height: 100vh;
-    background: theme.$backdrop-background;
-}
-
-.isRootSizeSmall {
-    width: map.get(theme.$sizes, small, width);
-}
-
-.isRootSizeMedium {
-    width: map.get(theme.$sizes, medium, width);
-}
-
-.isRootSizeLarge {
-    width: map.get(theme.$sizes, large, width);
-}
-
-.isRootSizeFullscreen {
-    width: map.get(theme.$sizes, fullscreen, width);
-    height: map.get(theme.$sizes, fullscreen, height);
-}
-
-.isRootSizeFullscreen .content {
-    height: 100%;
-}
-
-.isRootSizeAuto {
-    width: auto;
-    min-width: min(var(--rui-local-max-width), #{map.get(theme.$sizes, auto, min-width)});
-    max-width: min(var(--rui-local-max-width), #{map.get(theme.$sizes, auto, max-width)});
-}
-
-.isRootPositionCenter {
-    top: 50%;
-    transform: translate(-50%, -50%);
-}
-
-.isRootPositionTop {
-    top: var(--rui-local-outer-spacing);
-}

package/src/components/Modal/ModalBody.scss

@@ -1,18 +0,0 @@
-.root {
-    flex: 1 1 auto;
-}
-
-.isRootScrollingAuto,
-.isRootScrollingCustom {
-    min-height: 0;
-}
-
-.isRootScrollingAuto {
-    overflow-y: auto;
-    overscroll-behavior: contain;
-}
-
-.isRootScrollingCustom {
-    display: flex;
-    flex-direction: column;
-}

package/src/components/Modal/ModalCloseButton.scss

@@ -1,18 +0,0 @@
-@use "sass:map";
-@use "../../styles/theme/typography";
-@use "../../styles/tools/accessibility";
-@use "../../styles/tools/reset";
-@use "../../styles/tools/spacing";
-
-.root {
-    @include reset.button();
-    @include accessibility.min-tap-target();
-
-    font-size: map.get(typography.$font-size-values, 4);
-    line-height: 1;
-    color: inherit;
-
-    &:disabled {
-        cursor: var(--rui-cursor-not-allowed);
-    }
-}

package/src/components/Modal/ModalContent.scss

@@ -1,5 +0,0 @@
-@use "theme";
-
-.root {
-    padding: theme.$padding-y theme.$padding-x;
-}

package/src/components/Modal/ModalFooter.scss

@@ -1,35 +0,0 @@
-@use "settings";
-@use "theme";
-
-.root {
-    display: flex;
-    flex: none;
-    flex-wrap: wrap;
-    gap: theme.$footer-gap;
-    align-items: center;
-    padding: theme.$padding-y theme.$padding-x;
-    border-top: theme.$separator-width solid theme.$separator-color;
-    border-bottom-right-radius: settings.$border-radius;
-    border-bottom-left-radius: settings.$border-radius;
-    background: theme.$footer-background;
-}
-
-.isRootJustifiedToStart {
-    justify-content: flex-start;
-}
-
-.isRootJustifiedToCenter {
-    justify-content: center;
-}
-
-.isRootJustifiedToEnd {
-    justify-content: flex-end;
-}
-
-.isRootJustifiedToSpaceBetween {
-    justify-content: space-between;
-}
-
-.isRootJustifiedToStretch {
-    display: block;
-}

package/src/components/Modal/ModalHeader.scss

@@ -1,30 +0,0 @@
-@use "theme";
-
-.root {
-    display: flex;
-    flex: none;
-    gap: theme.$header-gap;
-    align-items: baseline;
-    padding: theme.$padding-y theme.$padding-x;
-    border-bottom: theme.$separator-width solid theme.$separator-color;
-}
-
-.isRootJustifiedToStart {
-    justify-content: flex-start;
-}
-
-.isRootJustifiedToCenter {
-    justify-content: center;
-}
-
-.isRootJustifiedToEnd {
-    justify-content: flex-end;
-}
-
-.isRootJustifiedToSpaceBetween {
-    justify-content: space-between;
-}
-
-.isRootJustifiedToStretch {
-    display: block;
-}

package/src/components/Modal/ModalTitle.scss

@@ -1,10 +0,0 @@
-@use "settings";
-
-.root {
-    margin-block: 0;
-    font-size: settings.$title-font-size;
-
-    &:not(:last-child) {
-        margin-bottom: 0;
-    }
-}

package/src/components/Paper/Paper.scss

@@ -1,17 +0,0 @@
-@use "theme";
-
-.root {
-    padding: theme.$padding;
-    border: theme.$border-width solid theme.$border-color;
-    border-radius: theme.$border-radius;
-    background-color: theme.$background-color;
-}
-
-.isRootMuted {
-    background-color: theme.$muted-background-color;
-    opacity: theme.$muted-opacity;
-}
-
-.isRootRaised {
-    box-shadow: theme.$raised-box-shadow;
-}

package/src/components/Popover/Popover.scss

@@ -1,236 +0,0 @@
-// 1. Reset positioning for controlled variant.
-// 2. Shift Popover so there is space for the arrow between Popover and reference element.
-// 3. Add top offset in case it's not defined by external library.
-
-@use "theme";
-
-.root {
-    position: absolute;
-    width: max-content;
-    max-width: theme.$max-width;
-    padding: theme.$padding;
-    text-align: left;
-    white-space: normal;
-    word-break: normal;
-    word-wrap: break-word;
-    color: theme.$color;
-    border: theme.$border-width solid theme.$border-color;
-    border-radius: theme.$border-radius;
-    background-color: theme.$background-color;
-    box-shadow: theme.$box-shadow;
-}
-
-.arrow {
-    position: absolute;
-    width: theme.$arrow-width;
-    height: theme.$arrow-height;
-    transform-origin: center bottom;
-
-    &::before,
-    &::after {
-        content: "";
-        position: absolute;
-        display: block;
-        border-style: solid;
-        border-color: transparent;
-    }
-
-    &::before {
-        bottom: 0;
-        border-width: theme.$arrow-height theme.$arrow-height 0;
-        border-top-color: theme.$border-color;
-    }
-
-    &::after {
-        bottom: theme.$border-width;
-        border-width: theme.$arrow-height theme.$arrow-height 0;
-        border-top-color: theme.$background-color;
-    }
-}
-
-// Sides
-.isRootAtTop {
-    bottom: 100%;
-}
-
-.isRootAtBottom {
-    top: 100%;
-}
-
-.isRootAtLeft {
-    right: 100%;
-}
-
-.isRootAtRight {
-    left: 100%;
-}
-
-// Arrows
-.isRootAtTop > .arrow {
-    top: 100%;
-}
-
-.isRootAtBottom > .arrow {
-    bottom: 100%;
-}
-
-.isRootAtLeft > .arrow {
-    left: 100%;
-}
-
-.isRootAtRight > .arrow {
-    right: 100%;
-}
-
-// Side alignments: top
-.isRootAtTop.isRootAtCenter {
-    left: 50%;
-    transform: translate(-50%, #{-1 * theme.$arrow-height});
-}
-
-.isRootAtTop.isRootAtStart {
-    left: 0;
-    transform: translate(0, #{-1 * theme.$arrow-height});
-}
-
-.isRootAtTop.isRootAtEnd {
-    right: 0;
-    transform: translate(0, #{-1 * theme.$arrow-height});
-}
-
-.isRootAtTop.isRootAtCenter > .arrow {
-    left: 50%;
-    transform: translate(-50%, 0) rotateZ(0);
-}
-
-.isRootAtTop.isRootAtStart > .arrow {
-    left: theme.$arrow-corner-offset;
-    transform: translate(0, 0) rotateZ(0);
-}
-
-.isRootAtTop.isRootAtEnd > .arrow {
-    right: theme.$arrow-corner-offset;
-    transform: translate(0, 0) rotateZ(0);
-}
-
-// Side alignments: bottom
-.isRootAtBottom.isRootAtCenter {
-    left: 50%;
-    transform: translate(-50%, #{theme.$arrow-height});
-}
-
-.isRootAtBottom.isRootAtStart {
-    left: 0;
-    transform: translate(0, #{theme.$arrow-height});
-}
-
-.isRootAtBottom.isRootAtEnd {
-    right: 0;
-    transform: translate(0, #{theme.$arrow-height});
-}
-
-.isRootAtBottom.isRootAtCenter > .arrow {
-    left: 50%;
-    transform: translate(-50%, -100%) rotateZ(180deg);
-}
-
-.isRootAtBottom.isRootAtStart > .arrow {
-    left: theme.$arrow-corner-offset;
-    transform: translate(0, -100%) rotateZ(180deg);
-}
-
-.isRootAtBottom.isRootAtEnd > .arrow {
-    right: theme.$arrow-corner-offset;
-    transform: translate(0, -100%) rotateZ(180deg);
-}
-
-// Side alignments: left
-.isRootAtLeft.isRootAtCenter {
-    top: 50%;
-    transform: translate(#{-1 * theme.$arrow-height}, -50%);
-}
-
-.isRootAtLeft.isRootAtStart {
-    top: 0;
-    transform: translate(#{-1 * theme.$arrow-height}, 0);
-}
-
-.isRootAtLeft.isRootAtEnd {
-    bottom: 0;
-    transform: translate(#{-1 * theme.$arrow-height}, 0);
-}
-
-.isRootAtLeft.isRootAtCenter > .arrow {
-    top: 50%;
-    transform: translate(0, -100%) rotateZ(-90deg);
-}
-
-.isRootAtLeft.isRootAtStart > .arrow {
-    top: theme.$arrow-corner-offset;
-    transform: translate(0, 0) rotateZ(-90deg);
-}
-
-.isRootAtLeft.isRootAtEnd > .arrow {
-    bottom: theme.$arrow-corner-offset;
-    transform: translate(0, -100%) rotateZ(-90deg);
-}
-
-// Side alignments: right
-.isRootAtRight.isRootAtCenter {
-    top: 50%;
-    transform: translate(#{theme.$arrow-height}, -50%);
-}
-
-.isRootAtRight.isRootAtStart {
-    top: 0;
-    transform: translate(#{theme.$arrow-height}, 0);
-}
-
-.isRootAtRight.isRootAtEnd {
-    bottom: 0;
-    transform: translate(#{theme.$arrow-height}, 0);
-}
-
-.isRootAtRight.isRootAtCenter > .arrow {
-    top: 50%;
-    transform: translate(0, -100%) rotateZ(90deg);
-}
-
-.isRootAtRight.isRootAtStart > .arrow {
-    top: theme.$arrow-corner-offset;
-    transform: translate(0, 0) rotateZ(90deg);
-}
-
-.isRootAtRight.isRootAtEnd > .arrow {
-    bottom: theme.$arrow-corner-offset;
-    transform: translate(0, -100%) rotateZ(90deg);
-}
-
-// Controlled placement
-.isRootControlled.isRootAtTop,
-.isRootControlled.isRootAtBottom,
-.isRootControlled.isRootAtLeft,
-.isRootControlled.isRootAtRight {
-    inset: unset; // 1.
-}
-
-.isRootControlled.isRootAtTop {
-    transform: translate(0, #{-1 * theme.$arrow-height}); // 2.
-}
-
-.isRootControlled.isRootAtBottom {
-    transform: translate(0, #{theme.$arrow-height}); // 2.
-}
-
-.isRootControlled.isRootAtLeft {
-    transform: translate(#{-1 * theme.$arrow-height}, 0); // 2.
-}
-
-.isRootControlled.isRootAtRight {
-    transform: translate(#{theme.$arrow-height}, 0); // 2.
-}
-
-.isRootControlled.isRootAtLeft.isRootAtStart,
-.isRootControlled.isRootAtRight.isRootAtStart {
-    top: 0; // 3.
-}

package/src/components/Popover/PopoverWrapper.scss

@@ -1,3 +0,0 @@
-.root {
-    position: relative;
-}

package/src/components/Radio/Radio.scss

@@ -1,83 +0,0 @@
-// 1. Legends are tricky to style, let's use a `div` instead.
-//    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#styling_with_css
-
-@use "../../styles/tools/form-fields/box-field-elements";
-@use "../../styles/tools/form-fields/box-field-layout";
-@use "../../styles/tools/form-fields/foundation";
-@use "../../styles/tools/form-fields/inline-field-elements";
-@use "../../styles/tools/form-fields/inline-field-layout";
-@use "../../styles/tools/form-fields/variants";
-@use "../../styles/tools/accessibility";
-@use "../../styles/tools/reset";
-@use "../../styles/tools/spacing";
-
-// Foundation
-.root {
-    @include foundation.root();
-    @include foundation.fieldset();
-    @include variants.visual(check);
-}
-
-// 1.
-.legend {
-    @include accessibility.hide-text();
-}
-
-// 1.
-.label,
-.optionLabel {
-    @include foundation.label();
-}
-
-.options {
-    @include reset.list();
-}
-
-.option {
-    @include inline-field-layout.field($type: radio);
-    @include inline-field-elements.min-tap-target($type: radio);
-}
-
-.input {
-    @include inline-field-elements.check-input($type: radio);
-}
-
-.helpText,
-.validationText {
-    @include foundation.help-text();
-}
-
-.isRootRequired .label {
-    @include foundation.label-required();
-}
-
-// States
-.isRootStateInvalid {
-    @include variants.validation(invalid);
-}
-
-.isRootStateValid {
-    @include variants.validation(valid);
-}
-
-.isRootStateWarning {
-    @include variants.validation(warning);
-}
-
-// Layouts
-.isRootLayoutVertical,
-.isRootLayoutHorizontal {
-    @include box-field-layout.vertical($has-list: true);
-}
-
-.isRootLayoutHorizontal {
-    @include box-field-layout.horizontal($has-min-tap-target: true);
-}
-
-.isRootFullWidth {
-    @include box-field-layout.full-width();
-}
-
-.isRootInFormLayout {
-    @include box-field-layout.in-form-layout($is-fieldset: true);
-}