@flux-ui/components 3.0.0-next.0

package/src/css/component/Placeholder.module.scss

@@ -0,0 +1,72 @@
+@use '$flux/css/mixin';
+
+.placeholder {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex: 1 1 0;
+    flex-flow: column;
+    justify-content: center;
+    background: rgb(var(--gray-1));
+    border: 1px dashed rgb(var(--gray-3));
+    border-radius: var(--radius);
+    text-align: center;
+    user-select: none;
+
+    &.isButton {
+        cursor: pointer;
+
+        @include mixin.hover {
+            background: rgb(var(--gray-2));
+        }
+    }
+
+    &.isExtended {
+        padding: 27px;
+        gap: 9px;
+
+        .placeholderIcon {
+            font-size: 24px;
+        }
+    }
+
+    &.isSimple {
+        padding: 18px;
+    }
+
+    &.isSmall {
+        padding: 12px;
+        font-size: 12px;
+
+        .placeholderCaption :is(strong) {
+            color: var(--foreground-secondary);
+            font-weight: 400;
+        }
+
+        .placeholderIcon {
+            color: var(--foreground-secondary);
+        }
+    }
+
+    :local(.button) {
+        align-self: center;
+    }
+}
+
+.placeholderCaption {
+    display: flex;
+    align-items: stretch;
+    flex-flow: column;
+
+    :is(p) {
+        margin: 0;
+        max-width: 510px;
+        color: var(--foreground-secondary);
+        font-size: 14px;
+    }
+}
+
+.placeholderIcon {
+    color: rgb(var(--primary-7));
+    font-size: 20px;
+}

package/src/css/component/Progress.module.scss

@@ -0,0 +1,84 @@
+@value basePaneStructure from './base/Pane.module.scss';
+
+.progressBar {
+    position: relative;
+}
+
+.progressBarTrack {
+    position: relative;
+    height: 9px;
+    background: rgb(var(--gray-2));
+    border-radius: calc(var(--radius) / 2);
+    box-shadow: inset 0 0 0 1px rgb(var(--gray-3));
+    contain: paint;
+}
+
+.progressBarValue {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: inherit;
+    background: linear-gradient(to right, rgb(var(--primary-8)) 20%, rgb(var(--primary-6)), rgb(var(--primary-8)) 80%);
+    background-size: 150px 100%;
+    border-radius: inherit;
+    animation: progressBarValue 1s linear infinite;
+}
+
+.progressBarTrackIndeterminate {
+    composes: progressBarTrack;
+
+    .progressBarValue {
+        background: linear-gradient(to right, rgb(var(--primary-8)) 20%, rgb(var(--primary-6)), rgb(var(--primary-8)) 80%);
+        background-size: 90px 100%;
+        animation: progressBarIndeterminate 1s linear infinite;
+    }
+}
+
+.progressBarInfo {
+    display: flex;
+    gap: 21px;
+    justify-content: flex-end;
+    font-size: 14px;
+}
+
+.progressBarProgress {
+    flex-shrink: 0;
+    font-variant-numeric: tabular-nums;
+    font-weight: 500;
+}
+
+.progressBarStatus {
+    margin-right: auto;
+    color: var(--foreground-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+:local(.basePaneStructure) > .progressBar:first-child {
+    margin: 9px 9px 0;
+}
+
+:local(.basePaneStructure) > .progressBar:last-child {
+    margin: 0 9px 9px;
+}
+
+@keyframes progressBarIndeterminate {
+    from {
+        background-position-x: 90px;
+    }
+
+    to {
+        background-position-x: -90px;
+    }
+}
+
+@keyframes progressBarValue {
+    from {
+        background-position-x: -150px;
+    }
+
+    to {
+        background-position-x: 150px;
+    }
+}

package/src/css/component/Remove.module.scss

@@ -0,0 +1,29 @@
+@use '$flux/css/mixin';
+
+.remove {
+    position: absolute;
+    display: flex;
+    top: -9px;
+    right: -9px;
+    height: 27px;
+    width: 27px;
+    align-items: center;
+    justify-content: center;
+    background: rgb(var(--danger-7));
+    border: 3px solid rgb(var(--gray-0));
+    border-radius: 99px;
+    color: rgb(var(--danger-0));
+    cursor: pointer;
+    transition: 300ms var(--swift-out);
+    transition-property: background, opacity, scale;
+
+    @include mixin.hover {
+        background: rgb(var(--danger-8));
+    }
+
+    &.isHidden {
+        opacity: 0;
+        pointer-events: none;
+        scale: .5;
+    }
+}

package/src/css/component/Root.module.scss

@@ -0,0 +1,8 @@
+.root {
+    display: contents;
+
+    &.isLocked {
+        cursor: default;
+        overflow: hidden;
+    }
+}

package/src/css/component/SegmentedControl.module.scss

@@ -0,0 +1,82 @@
+@use '$flux/css/mixin';
+
+.segmentedControl {
+    position: relative;
+    align-items: center;
+    gap: 1px;
+    background: rgb(var(--gray-1));
+    border: 1px solid rgb(var(--gray-2));
+    border-radius: var(--radius);
+}
+
+.segmentedControlFill {
+    composes: segmentedControl;
+
+    display: flex;
+}
+
+.segmentedControlInline {
+    composes: segmentedControl;
+
+    display: inline-flex;
+    width: min-content;
+}
+
+.segmentedControlHighlight {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    background: rgb(var(--gray-0));
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-sm);
+    outline: 1px solid rgb(var(--gray-3));
+    pointer-events: none;
+    transition: 300ms var(--swift-out);
+    transition-property: left, width;
+}
+
+.segmentedControlItem {
+    display: flex;
+    height: 36px;
+    padding-left: 12px;
+    padding-right: 12px;
+    align-items: center;
+    flex: 1 1 0;
+    gap: 9px;
+    justify-content: center;
+    background: none;
+    border: 0;
+    border-radius: calc(var(--radius) - 3px);
+    color: var(--foreground);
+    cursor: pointer;
+    font-weight: 500;
+    text-align: center;
+    transition: 300ms var(--swift-out);
+    transition-property: background, color;
+
+    @include mixin.hover {
+        background: rgb(var(--gray-2));
+    }
+
+    &.isActive {
+        background: none;
+        color: var(--foreground-prominent);
+        cursor: default;
+    }
+
+    > * {
+        position: relative;
+    }
+}
+
+.segmentedControlSeparator {
+    height: 15px;
+    width: 1px;
+    flex-shrink: 0;
+    background: rgb(var(--gray-3));
+    transition: opacity 300ms var(--swift-out);
+
+    &.isActive {
+        opacity: 0;
+    }
+}

package/src/css/component/Snackbar.module.scss

@@ -0,0 +1,227 @@
+@use '$flux/css/mixin';
+
+@value basePane from './base/Pane.module.scss';
+
+.snackbar {
+    composes: basePane;
+
+    display: flex;
+    box-shadow: var(--shadow-xl), var(--shadow-2xl);
+    overflow: hidden;
+
+    .action {
+        margin: 12px 12px 12px 0;
+    }
+
+    .progressBar {
+        margin-top: 9px;
+
+        &:not(:last-child) {
+            margin-bottom: 6px;
+        }
+    }
+
+    .progressBarTrack {
+        height: 6px;
+    }
+}
+
+.snackbarContent {
+    display: flex;
+    padding: 15px 18px;
+    align-items: flex-start;
+    flex-grow: 1;
+    gap: 15px;
+
+    > .icon,
+    > .spinner {
+        flex-shrink: 0;
+        translate: 0 3px;
+    }
+}
+
+.snackbarBody {
+    display: flex;
+    align-self: stretch;
+    flex-flow: column;
+    flex-grow: 1;
+}
+
+.snackbarMessage {
+    color: var(--foreground);
+}
+
+.snackbarSubMessage {
+    color: var(--foreground-secondary);
+    font-size: 14px;
+}
+
+.snackbarTitle {
+    font-weight: 500;
+}
+
+.snackbarAction {
+    display: flex;
+    padding: 6px 15px;
+    min-width: 84px;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+    background: rgb(var(--gray-0));
+    border: 0;
+    border-radius: 0;
+    color: var(--foreground);
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    outline: 0;
+    text-align: center;
+    transition: 180ms var(--swift-out);
+    transition-property: background, color;
+
+    &:hover {
+        background: rgb(var(--gray-1));
+        color: var(--foreground-prominent);
+    }
+
+    &:active {
+        background: rgb(var(--gray-2));
+    }
+}
+
+.snackbarActions {
+    display: flex;
+    padding-left: 1px;
+    flex-flow: column;
+    flex-grow: 1;
+    gap: 1px;
+    background: rgb(var(--gray-2));
+}
+
+.snackbarGray {
+    composes: snackbar;
+
+    .snackbarAction:first-child,
+    .snackbarContent > .icon,
+    .snackbarTitle {
+        color: var(--foreground-prominent);
+    }
+}
+
+.snackbarPrimary {
+    composes: snackbar;
+
+    .snackbarAction:first-child,
+    .snackbarContent > .icon,
+    .snackbarTitle {
+        color: rgb(var(--primary-7));
+    }
+
+    .spinnerEffect,
+    .spinnerValue {
+        stroke: rgb(var(--primary-8));
+    }
+}
+
+.snackbarDanger {
+    composes: snackbar;
+
+    .snackbarAction:first-child,
+    .snackbarContent > .icon,
+    .snackbarTitle {
+        color: rgb(var(--danger-7));
+    }
+
+    .spinnerEffect,
+    .spinnerValue {
+        stroke: rgb(var(--danger-8));
+    }
+}
+
+.snackbarInfo {
+    composes: snackbar;
+
+    .snackbarAction:first-child,
+    .snackbarContent > .icon,
+    .snackbarTitle {
+        color: rgb(var(--info-7));
+    }
+
+    .spinnerEffect,
+    .spinnerValue {
+        stroke: rgb(var(--info-8));
+    }
+}
+
+.snackbarSuccess {
+    composes: snackbar;
+
+    .snackbarAction:first-child,
+    .snackbarContent > .icon,
+    .snackbarTitle {
+        color: rgb(var(--success-7));
+    }
+
+    .spinnerEffect,
+    .spinnerValue {
+        stroke: rgb(var(--success-8));
+    }
+}
+
+.snackbarWarning {
+    composes: snackbar;
+
+    .snackbarAction:first-child,
+    .snackbarContent > .icon,
+    .snackbarTitle {
+        color: rgb(var(--warning-7));
+    }
+
+    .spinnerEffect,
+    .spinnerValue {
+        stroke: rgb(var(--warning-8));
+    }
+}
+
+.snackbars {
+    position: fixed;
+    display: flex;
+    flex-flow: column;
+    gap: 15px;
+    z-index: 100000;
+
+    @include mixin.breakpoint-down(sm) {
+        left: 15px;
+        right: 15px;
+        bottom: 15px;
+    }
+
+    @include mixin.breakpoint-up(md) {
+        width: 540px;
+        top: 30px;
+        left: calc(50dvw - 270px);
+    }
+}
+
+.snackbarsEnterActive,
+.snackbarsLeaveActive,
+.snackbarsMove {
+    transition: 420ms var(--swift-out);
+}
+
+.snackbarsLeaveActive {
+    position: absolute;
+    width: 100%;
+}
+
+.snackbarsEnterFrom {
+    opacity: 0;
+    transform: translate3d(0, -15px, 0);
+}
+
+.snackbarsLeaveTo {
+    opacity: 0;
+    scale: .95;
+    translate: 0 -15px;
+    z-index: -1;
+}

package/src/css/component/Spinner.module.scss

@@ -0,0 +1,36 @@
+.spinner {
+    --track: rgb(var(--gray-2));
+    --value: rgb(var(--primary-7));
+
+    display: inline-block;
+    height: 1em;
+    width: 1em;
+    flex: 0 0 1em;
+    animation: spinner 5s linear infinite;
+    font-size: 20px;
+}
+
+.spinnerTrack {
+    stroke: var(--track);
+}
+
+.spinnerEffect,
+.spinnerValue {
+    stroke: var(--value);
+    transform-origin: center;
+    animation: spinner 1.2s var(--swift-out) infinite;
+}
+
+.spinnerEffect {
+    opacity: .25;
+    animation-delay: -1.05s;
+}
+
+@keyframes spinner {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(1turn);
+    }
+}

package/src/css/component/Statistic.module.scss

@@ -0,0 +1,118 @@
+.statistic {
+    padding: 21px;
+    gap: 21px;
+
+    &.isGray .statisticIcon {
+        background: rgb(var(--gray-2));
+        color: rgb(var(--gray-7));
+    }
+
+    &.isPrimary .statisticIcon {
+        background: rgb(var(--primary-2));
+        color: rgb(var(--primary-7));
+    }
+
+    &.isDanger .statisticIcon {
+        background: rgb(var(--danger-2));
+        color: rgb(var(--danger-7));
+    }
+
+    &.isInfo .statisticIcon {
+        background: rgb(var(--info-2));
+        color: rgb(var(--info-7));
+    }
+
+    &.isSuccess .statisticIcon {
+        background: rgb(var(--success-2));
+        color: rgb(var(--success-7));
+    }
+
+    &.isWarning .statisticIcon {
+        background: rgb(var(--warning-2));
+        color: rgb(var(--warning-7));
+    }
+}
+
+.statisticChange {
+    display: flex;
+    align-items: center;
+    align-self: flex-end;
+    gap: 6px;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1;
+
+    &.isGray {
+        color: var(--foreground-prominent);
+    }
+
+    &.isPrimary {
+        color: rgb(var(--primary-7));
+    }
+
+    &.isDanger {
+        color: rgb(var(--danger-7));
+    }
+
+    &.isInfo {
+        color: rgb(var(--info-7));
+    }
+
+    &.isSuccess {
+        color: rgb(var(--success-7));
+    }
+
+    &.isWarning {
+        color: rgb(var(--warning-7));
+    }
+}
+
+.statisticData {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+    gap: 9px;
+    line-height: 1;
+
+    :is(span) {
+        color: var(--foreground-secondary);
+    }
+
+    :is(strong) {
+        color: var(--foreground-prominent);
+        font-size: 24px;
+        font-weight: 700;
+    }
+}
+
+.statisticIcon {
+    display: flex;
+    height: 48px;
+    width: 48px;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius);
+}
+
+.statisticHorizontal {
+    composes: statistic;
+
+    display: flex;
+}
+
+.statisticVertical {
+    composes: statistic;
+
+    display: flex;
+    align-items: center;
+    flex-flow: column;
+    text-align: center;
+
+    .statisticChange {
+        align-self: center;
+    }
+
+    .statisticData {
+        align-items: center;
+    }
+}