@flux-ui/components 3.0.0-next.0

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

@@ -0,0 +1,103 @@
+@value sparklesContainer, sparklesContainerActive, sparklesParticles from './base/Effect.module.scss';
+
+.stepperStep {
+    position: relative;
+}
+
+.stepperSteps {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    justify-content: space-between;
+    background: inherit;
+    z-index: 0;
+
+    &::before,
+    &::after {
+        --margin: 15px;
+        --max: calc(100% - var(--margin) * 2);
+
+        position: absolute;
+        display: block;
+        top: calc(50% - 2px);
+        left: 0;
+        margin-left: var(--margin);
+        margin-right: var(--margin);
+        height: 4px;
+        content: '';
+        z-index: -1;
+    }
+
+    &::before {
+        width: var(--max);
+        background: rgb(var(--gray-2));
+    }
+
+    &::after {
+        width: calc(min(1, var(--progress)) * var(--max));
+        background: rgb(var(--primary-7));
+        transition: width 300ms var(--swift-out);
+    }
+}
+
+.stepperStepsItem {
+    composes: sparklesContainer;
+
+    position: relative;
+    display: flex;
+    height: 33px;
+    width: 33px;
+    align-items: center;
+    justify-content: center;
+    background: rgb(var(--gray-3));
+    border: 0;
+    border-radius: 99px;
+    color: var(--foreground);
+    cursor: default;
+    font-size: 14px;
+    font-weight: 700;
+    outline: 6px solid transparent;
+    outline-offset: -2px;
+    transition: 300ms var(--swift-out);
+    transition-property: background, border, color, outline;
+
+    .icon {
+        overflow: visible;
+        scale: .8;
+
+        :is(path) {
+            stroke: currentColor;
+            stroke-width: 54px;
+        }
+    }
+}
+
+.stepperStepsItemComplete {
+    composes: sparklesContainerActive;
+    composes: stepperStepsItem;
+
+    background: rgb(var(--primary-7));
+    border-color: rgb(var(--primary-7));
+    color: rgb(var(--primary-0));
+}
+
+.stepperStepsItemCurrent {
+    composes: stepperStepsItem;
+
+    background: rgb(var(--gray-1));
+    color: var(--foreground-prominent);
+    outline-color: rgb(var(--primary-7));
+    outline-width: 2px;
+    transition-delay: 75ms;
+}
+
+.stepperStepsItemIdle {
+    composes: stepperStepsItem;
+
+    outline-color: rgb(var(--gray-0));
+}
+
+.stepperStepsItemParticles {
+    composes: sparklesParticles;
+}

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

@@ -0,0 +1,162 @@
+@use '$flux/css/mixin';
+
+.tab {
+    position: relative;
+}
+
+.tabBar {
+    --tab-padding: 12px;
+
+    position: relative;
+    box-shadow: inset 0 -2px rgb(var(--gray-2));
+    z-index: 0;
+}
+
+.tabBarArrow {
+    position: absolute;
+    display: flex;
+    top: 3px;
+    height: calc(100% - 6px);
+    width: 30px;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius);
+    color: var(--foreground);
+    cursor: pointer;
+    outline: 0;
+    transition: background 180ms var(--swift-out);
+    z-index: 1;
+
+    @media (hover: hover) {
+        &:hover {
+            background: rgb(var(--gray-2));
+        }
+    }
+}
+
+.tabBarArrowStart {
+    composes: tabBarArrow;
+
+    left: -6px;
+}
+
+.tabBarArrowEnd {
+    composes: tabBarArrow;
+
+    right: -6px;
+}
+
+.tabBarTabs {
+    --mask-start: 0%;
+    --mask-end: 100%;
+    --mask: linear-gradient(to right, transparent, black var(--mask-start), black, black var(--mask-end), transparent);
+
+    display: flex;
+    margin-left: -3px;
+    margin-right: -3px;
+    padding-left: 3px;
+    padding-right: 3px;
+    align-items: flex-end;
+    gap: 30px;
+    overflow: hidden;
+
+    -webkit-mask-image: var(--mask);
+    mask-image: var(--mask);
+
+    &.isStartMasked {
+        --mask-start: 60px;
+    }
+
+    &.isEndMasked {
+        --mask-end: calc(100% - 60px);
+    }
+}
+
+.tabBarItem {
+    display: inline-flex;
+    padding: var(--tab-padding) 0;
+    align-items: center;
+    gap: 9px;
+    background: unset;
+    border: 0;
+    border-bottom: 2px solid transparent;
+    color: var(--foreground);
+    contain: layout;
+    cursor: pointer;
+    font-weight: 500;
+    outline: 0;
+    transition: 180ms var(--swift-out);
+    transition-property: border-color, color;
+    white-space: nowrap;
+
+    &::before {
+        position: absolute;
+        inset: 0;
+        content: '';
+        border-radius: var(--radius);
+        pointer-events: none;
+        transition: 180ms var(--swift-out) mixin.focus-ring-transition-properties();
+    }
+
+    @include mixin.focus-ring-pseudo(before);
+
+    @media (hover: hover) {
+        &:hover {
+            border-color: var(--foreground);
+        }
+    }
+}
+
+.tabBarItemActive {
+    composes: tabBarItem;
+
+    border-color: rgb(var(--primary-7));
+    color: var(--foreground-prominent);
+}
+
+.tabs {
+    display: flex;
+    flex-flow: column;
+    overflow: visible;
+}
+
+.tabsBar {
+    margin-bottom: 18px;
+}
+
+.basePaneStructure > .tabBar,
+.basePaneStructure > .tabs >.tabBar {
+    --tab-padding: 18px;
+
+    padding-left: 21px;
+    padding-right: 21px;
+    background: rgb(var(--gray-1));
+
+    &:first-child {
+        border-radius: var(--radius) var(--radius) 0 0;
+    }
+
+    &:not(:first-child) {
+        border-top: 1px solid rgb(var(--gray-2));
+    }
+}
+
+.basePaneStructure > .paneHeader + .tabBar,
+.basePaneStructure > .paneHeader + .tabs > .tabBar {
+    padding-top: 6px;
+
+    &:not(:first-child) {
+        border-top: 0;
+    }
+}
+
+.paneHeader:has(+ .tabBar),
+.paneHeader:has(+ .tabs > .tabBar) {
+    background: rgb(var(--gray-1));
+}
+
+.basePaneStructure > .tabs > .tabsBar {
+    margin-bottom: 0;
+}

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

@@ -0,0 +1,164 @@
+@value basePaneElement, basePaneLoader, basePaneStructure from './base/Pane.module.scss';
+
+.table {
+    composes: basePaneElement;
+
+    position: relative;
+    overflow: auto;
+
+    :is(caption) {
+        color: var(--foreground-secondary);
+        font-size: 14px;
+        text-align: left;
+    }
+}
+
+.tableBase {
+    min-width: 100%;
+    bottom: 0;
+    border-spacing: 0;
+    text-align: left;
+}
+
+.tableLoader {
+    composes: basePaneLoader;
+}
+
+.tableRow {
+    height: 0;
+    margin: 0;
+    padding: 0;
+}
+
+.tableCell {
+    height: 0;
+    padding: 0;
+    border: 0 solid rgb(var(--gray-2));
+
+    @-moz-document url-prefix() {
+        height: 100%;
+    }
+}
+
+.tableCellContent {
+    display: flex;
+    height: 100%;
+    padding: 12px 15px;
+    align-items: flex-start;
+}
+
+.tableHeader {
+    composes: tableCell;
+
+    border-bottom: 2px solid rgb(var(--gray-2));
+    color: var(--foreground-prominent);
+
+    &.isShrinking {
+        width: 0;
+        white-space: nowrap;
+    }
+
+    &.isSticky {
+        position: sticky;
+        top: 0;
+        background: rgb(var(--gray-1));
+    }
+}
+
+.tableHeaderContent {
+    composes: tableCellContent;
+
+    align-items: center;
+    font-size: 14px;
+}
+
+tbody .tableRow:nth-child(even) .tableCell.isStriped {
+    background: rgb(var(--gray-2));
+}
+
+@media (hover: hover) {
+    tbody .tableRow:hover .tableCell.isHoverable,
+    tbody .tableRow:has(:focus-visible) .tableCell.isHoverable {
+        background: rgb(var(--gray-1));
+    }
+}
+
+tfoot .tableCell {
+    border-top: 1px solid rgb(var(--gray-2));
+}
+
+.tableCell + .tableCell.isBordered {
+    border-left-width: 1px;
+}
+
+.tableRow + .tableRow .tableCell.isSeparated {
+    border-top-width: 1px;
+}
+
+.tableActions {
+    margin: -3px 0 -3px -3px;
+
+    .action {
+        @media (hover: hover) {
+            &:hover {
+                background: rgb(var(--gray-3));
+            }
+        }
+
+        &:active {
+            background: rgb(var(--gray-4));
+        }
+    }
+}
+
+.tableSort {
+    display: flex;
+    height: 24px;
+    width: 24px;
+    margin: -3px -6px -3px 6px;
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+    background: unset;
+    border: 0;
+    border-radius: calc(var(--radius) / 2);
+    color: var(--foreground-secondary);
+    cursor: pointer;
+    outline: 0;
+
+    @media (hover: hover) {
+        &:hover {
+            background: rgb(var(--gray-2));
+            color: var(--foreground);
+        }
+    }
+}
+
+:local(.basePaneStructure) > .table .tableCell:first-child .tableCellContent {
+    padding-left: 21px;
+}
+
+:local(.basePaneStructure) > .table .tableCell:last-child .tableCellContent {
+    padding-right: 21px;
+}
+
+:local(.basePaneStructure) > .table .tableActions {
+    margin-right: -3px;
+}
+
+:local(.basePaneStructure) > .table :is(caption) {
+    padding: 12px 21px;
+    border-top: 1px solid rgb(var(--gray-3));
+}
+
+:local(.basePaneStructure) > .table .tableLoader {
+    border-radius: var(--radius);
+}
+
+:not(:local(.basePaneStructure)) > .table .tableCell:not(.isBordered):first-child .tableCellContent {
+    padding-left: 0;
+}
+
+:not(:local(.basePaneStructure)) > .table .tableCell:not(.isBordered):last-child .tableCellContent {
+    padding-right: 0;
+}

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

@@ -0,0 +1,173 @@
+.timeline {
+    display: flex;
+    flex-flow: column;
+    gap: 15px;
+}
+
+.timelineItem {
+    position: relative;
+    display: grid;
+    gap: 21px;
+    grid-template-columns: 42px minmax(0, 1fr);
+}
+
+.timelineItemIcon,
+.timelineItemPhoto {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 99px;
+    outline: 6px solid rgb(var(--gray-0));
+}
+
+.timelineItemIcon {
+    margin: 3px;
+    height: 36px;
+    width: 36px;
+}
+
+.timelineItemPhoto {
+    height: 42px;
+    width: 42px;
+}
+
+.timelineItemPhotoIcon {
+    position: absolute;
+    display: flex;
+    right: -9px;
+    bottom: -9px;
+    height: 30px;
+    width: 30px;
+    align-items: center;
+    justify-content: center;
+    background: rgb(var(--gray-0));
+    border-radius: 99px;
+}
+
+.timelineItemPhotoImage {
+    position: absolute;
+    inset: 0;
+    height: 100%;
+    width: 100%;
+    border-radius: inherit;
+    object-fit: cover;
+    object-position: center;
+}
+
+.timelineItemBody {
+    position: relative;
+    align-self: center;
+    padding-top: 9px;
+    padding-bottom: 9px;
+}
+
+.timelineItemHeader {
+    display: flex;
+    margin-bottom: 9px;
+    flex-flow: column;
+
+    :is(strong) {
+        color: var(--foreground-prominent);
+    }
+
+    :is(span) {
+        color: var(--foreground-secondary);
+        font-size: 14px;
+    }
+}
+
+.timelineItemLine {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    height: 100%;
+    width: 2px;
+    background: rgb(var(--gray-2));
+}
+
+.timeline .timelineItem:last-of-type .timelineItemLine {
+    display: none;
+}
+
+.timelineItemGray {
+    composes: timelineItem;
+
+    .timelineItemIcon,
+    .timelineItemPhotoIcon {
+        color: var(--foreground-prominent);
+    }
+
+    .timelineItemIcon {
+        background: rgb(var(--gray-2));
+    }
+}
+
+.timelineItemPrimary {
+    composes: timelineItem;
+
+    .timelineItemIcon,
+    .timelineItemPhotoIcon {
+        color: rgb(var(--primary-7));
+    }
+
+    .timelineItemIcon {
+        background: rgb(var(--primary-2));
+    }
+}
+
+.timelineItemDanger {
+    composes: timelineItem;
+
+    .timelineItemIcon,
+    .timelineItemPhotoIcon {
+        color: rgb(var(--danger-7));
+    }
+
+    .timelineItemIcon {
+        background: rgb(var(--danger-2));
+    }
+}
+
+.timelineItemInfo {
+    composes: timelineItem;
+
+    .timelineItemIcon,
+    .timelineItemPhotoIcon {
+        color: rgb(var(--info-7));
+    }
+
+    .timelineItemIcon {
+        background: rgb(var(--info-2));
+    }
+}
+
+.timelineItemSuccess {
+    composes: timelineItem;
+
+    .timelineItemIcon,
+    .timelineItemPhotoIcon {
+        color: rgb(var(--success-7));
+    }
+
+    .timelineItemIcon {
+        background: rgb(var(--success-2));
+    }
+}
+
+.timelineItemWarning {
+    composes: timelineItem;
+
+    .timelineItemIcon,
+    .timelineItemPhotoIcon {
+        color: rgb(var(--warning-7));
+    }
+
+    .timelineItemIcon {
+        background: rgb(var(--warning-2));
+    }
+}
+
+[dark] .timelineItemIcon {
+    background: rgb(var(--gray-2));
+}

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

@@ -0,0 +1,82 @@
+@value basePane, basePaneStructure from './base/Pane.module.scss';
+
+.toolbar {
+    padding: 6px;
+    contain: paint;
+
+    :local(.separatorVertical) {
+        margin-top: 6px;
+        margin-bottom: 6px;
+        align-self: stretch;
+    }
+}
+
+.toolbarFlat {
+    composes: basePane;
+    composes: toolbar;
+
+    position: relative;
+    align-self: flex-start;
+    box-shadow: var(--shadow-sm);
+}
+
+.toolbarFloating {
+    composes: basePane;
+    composes: toolbar;
+
+    position: absolute;
+    box-shadow: var(--shadow-md);
+    z-index: 1;
+
+    &.isFree {
+        translate: -50% -50%;
+    }
+
+    &.isTopEnd,
+    &.isTopStart {
+        top: 0;
+        translate: 0 -50%;
+    }
+
+    &.isBottomEnd,
+    &.isBottomStart {
+        bottom: 0;
+        translate: 0 50%;
+    }
+
+    &.isTopEnd,
+    &.isBottomEnd {
+        right: 21px;
+    }
+
+    &.isTopStart,
+    &.isBottomStart {
+        left: 21px;
+    }
+}
+
+:local(.basePaneStructure) > .toolbarFlat {
+    padding: 12px 15px;
+    background: rgb(var(--gray-1));
+    border: 1px solid rgb(var(--gray-11) / .05);
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0;
+    box-shadow: none;
+
+    &:first-child {
+        border-top: 0;
+        border-top-left-radius: var(--radius);
+        border-top-right-radius: var(--radius);
+    }
+
+    &:last-child {
+        border-bottom: 0;
+        border-bottom-left-radius: var(--radius);
+        border-bottom-right-radius: var(--radius);
+    }
+}
+
+.paneHeader + .toolbarFlat {
+    margin-top: 21px;
+}