@flux-ui/components 3.0.0-next.0

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

@@ -0,0 +1,64 @@
+@use '$flux/css/mixin';
+
+@value placeholder from './Placeholder.module.scss';
+
+.gallery {
+    display: grid;
+    gap: 9px;
+    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+}
+
+.galleryAdd {
+    composes: placeholder;
+
+    aspect-ratio: 1 / 1;
+    color: rgb(var(--gray-7));
+
+    @include mixin.hover {
+        background: rgb(var(--gray-1));
+        border-color: rgb(var(--gray-3));
+    }
+}
+
+.galleryMove {
+    transition: 360ms var(--swift-out);
+}
+
+.galleryItem {
+    position: relative;
+    aspect-ratio: 1 / 1;
+
+    :local(.remove) {
+        z-index: 1;
+    }
+}
+
+.galleryItemImage {
+    position: absolute;
+    display: block;
+    inset: 0;
+    height: 100%;
+    width: 100%;
+    border-radius: var(--radius);
+    object-fit: cover;
+    object-position: center;
+    outline: 1px solid rgb(0 0 0 / .025);
+    outline-offset: -1px;
+}
+
+.galleryItemLoader {
+    position: absolute;
+    display: flex;
+    inset: 1px;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(2px) saturate(180%);
+    background: rgb(0 0 0 / .25);
+    border-radius: calc(var(--radius) - 1px);
+    z-index: 0;
+
+    .spinner {
+        --track: rgb(255 255 255 / .25);
+        --value: rgb(255 255 255);
+    }
+}

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

@@ -0,0 +1,24 @@
+@use '$flux/css/mixin';
+
+.grid {
+    display: grid;
+    gap: var(--gap);
+    grid-template-columns: repeat(var(--columns), 1fr);
+    container: grid / inline-size;
+}
+
+.gridColumn {
+    display: flex;
+    flex-flow: column;
+    gap: var(--gap);
+}
+
+$-breakpoints: xl, lg, md, sm, xs;
+
+@each $-breakpoint in $-breakpoints {
+    @include mixin.container-breakpoint-down(grid, $-breakpoint) {
+        .gridColumn {
+            grid-column: span var(--#{$-breakpoint});
+        }
+    }
+}

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

@@ -0,0 +1,104 @@
+@value basePane from './base/Pane.module.scss';
+
+@layer flux-base {
+    .icon {
+        height: 1em;
+        width: 1em;
+        flex-shrink: 0;
+        font-size: 20px;
+        line-height: 1;
+    }
+
+    .fontAwesomeIcon {
+        composes: icon;
+
+        display: inline-block;
+    }
+
+    .materialSymbolIcon {
+        composes: icon;
+
+        display: inline-flex;
+        color: currentColor;
+        font-family: 'Material Symbols Outlined', sans-serif;
+        font-weight: 400;
+        font-style: normal;
+        user-select: none;
+        -webkit-font-feature-settings: 'liga';
+        -webkit-font-smoothing: antialiased;
+    }
+
+    .iconBoxed {
+        composes: basePane;
+
+        display: flex;
+        height: 1em;
+        width: 1em;
+        align-items: center;
+        flex-shrink: 0;
+        justify-content: center;
+        font-size: 42px;
+
+        .icon {
+            font-size: .33em;
+        }
+
+        .materialSymbolIcon {
+            font-size: .5em;
+        }
+    }
+
+    .iconBoxedDefault {
+        composes: iconBoxed;
+
+        box-shadow: var(--shadow-sm);
+    }
+
+    .iconBoxedColored {
+        composes: iconBoxed;
+
+        border: 0;
+    }
+
+    .iconBoxedGray {
+        composes: iconBoxedColored;
+
+        background: rgb(var(--gray-2));
+        color: var(--foreground);
+    }
+
+    .iconBoxedPrimary {
+        composes: iconBoxedColored;
+
+        background: rgb(var(--primary-2));
+        color: rgb(var(--primary-10));
+    }
+
+    .iconBoxedDanger {
+        composes: iconBoxedColored;
+
+        background: rgb(var(--danger-2));
+        color: rgb(var(--danger-10));
+    }
+
+    .iconBoxedInfo {
+        composes: iconBoxedColored;
+
+        background: rgb(var(--info-2));
+        color: rgb(var(--info-10));
+    }
+
+    .iconBoxedSuccess {
+        composes: iconBoxedColored;
+
+        background: rgb(var(--success-2));
+        color: rgb(var(--success-10));
+    }
+
+    .iconBoxedWarning {
+        composes: iconBoxedColored;
+
+        background: rgb(var(--warning-2));
+        color: rgb(var(--warning-10));
+    }
+}

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

@@ -0,0 +1,15 @@
+.info {
+    display: flex;
+    gap: 15px;
+
+    > .icon {
+        margin-top: 1px;
+        flex-shrink: 0;
+        color: rgb(var(--primary-7));
+    }
+}
+
+.infoBody {
+    align-items: center;
+    line-height: 1.5;
+}

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

@@ -0,0 +1,63 @@
+@use '$flux/css/mixin';
+
+@value baseAutoGrid from './base/Grid.module.scss';
+
+@layer flux-base {
+    .aspectRatio {
+        position: relative;
+        flex-shrink: 0;
+
+        > * {
+            height: 100%;
+            width: 100%;
+        }
+    }
+
+    .autoGrid {
+        composes: baseAutoGrid;
+    }
+
+    .container {
+        margin-left: auto;
+        margin-right: auto;
+        padding-left: var(--gutter);
+        padding-right: var(--gutter);
+        width: 100%;
+
+        @include mixin.breakpoint-max-widths;
+    }
+
+    .spacer {
+        flex-grow: 1;
+    }
+
+    .stack {
+        gap: var(--gap, 0);
+
+        &.isCentered {
+            place-content: center;
+            place-items: center;
+        }
+
+        &.isFill {
+            width: 100%;
+        }
+
+        &.isWrapping {
+            flex-wrap: wrap;
+        }
+    }
+
+    .stackHorizontal {
+        composes: stack;
+
+        display: flex;
+    }
+
+    .stackVertical {
+        composes: stack;
+
+        display: flex;
+        flex-flow: column;
+    }
+}

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

@@ -0,0 +1,32 @@
+@value stackHorizontal, stackVertical from './Layout.module.scss';
+
+.legendHorizontal {
+    composes: stackHorizontal;
+
+    gap: 12px 21px;
+}
+
+.legendVertical {
+    composes: stackVertical;
+
+    gap: 12px;
+}
+
+.legendItem {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 6px;
+    font-size: 14px;
+    line-height: 1;
+
+    &::before {
+        display: block;
+        margin-top: 1px;
+        height: 12px;
+        width: 12px;
+        content: '';
+        flex: 0 0 12px;
+        background: var(--color);
+        border-radius: 99px;
+    }
+}

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

@@ -0,0 +1,314 @@
+@use '$flux/css/mixin';
+
+@value button, buttonIcon, buttonLabel from './base/Button.module.scss';
+@value basePane from './base/Pane.module.scss';
+
+.menu {
+    display: flex;
+    flex-flow: column;
+}
+
+.menuNormal {
+    composes: menu;
+
+    gap: 6px;
+}
+
+.menuLarge {
+    composes: menu;
+
+    gap: 9px;
+}
+
+.menuGroup {
+    counter-reset: menu-group;
+}
+
+.menuGroupHorizontal {
+    composes: menuGroup;
+
+    display: flex;
+    gap: 3px;
+}
+
+.menuGroupVertical {
+    composes: menuGroup;
+
+    display: flex;
+    flex-flow: column;
+    gap: 1px;
+}
+
+.menuItem {
+    composes: button;
+
+    height: unset;
+    min-height: 42px;
+    padding: 6px 12px;
+    gap: 15px;
+    justify-content: flex-start;
+    border: 0;
+    box-shadow: none;
+    color: var(--foreground);
+    text-align: left;
+
+    @include mixin.hover {
+        background: rgb(var(--gray-2));
+    }
+
+    &:active {
+        background: rgb(var(--gray-3));
+    }
+}
+
+.menuItemIcon {
+    composes: buttonIcon;
+
+    color: var(--foreground-prominent);
+}
+
+.menuItemLabel {
+    composes: buttonLabel;
+
+    flex-grow: 1;
+    font-weight: 400;
+    text-align: left;
+
+    &:only-child {
+        margin-left: 0;
+        margin-right: 0;
+        min-width: unset;
+    }
+}
+
+.menuItemActive {
+    background: rgb(var(--primary-7));
+    color: rgb(var(--primary-1));
+
+    .menuItemIcon {
+        color: rgb(var(--primary-0));
+    }
+
+    @media (hover: hover) {
+        &:hover {
+            background: rgb(var(--primary-7));
+        }
+    }
+
+    &:active {
+        background: rgb(var(--primary-7));
+    }
+}
+
+.menuItemDestructive {
+    .menuItemIcon {
+        color: rgb(var(--danger-8));
+    }
+
+    .menuItemLabel {
+        color: rgb(var(--danger-8));
+    }
+}
+
+.menuItemHighlighted {
+    background: rgb(var(--primary-2));
+    color: rgb(var(--primary-7));
+
+    .menuItemIcon {
+        color: rgb(var(--primary-8));
+    }
+
+    @media (hover: hover) {
+        &:hover {
+            background: rgb(var(--primary-2));
+        }
+    }
+
+    &:active {
+        background: rgb(var(--primary-2));
+    }
+}
+
+[dark] .menuItemHighlighted {
+    background: rgb(var(--primary-11) / .5);
+
+    @media (hover: hover) {
+        &:hover {
+            background: rgb(var(--primary-11) / .5);
+        }
+    }
+
+    &:active {
+        background: rgb(var(--primary-11) / .5);
+    }
+}
+
+.menuItemIndented {
+    margin-left: 33px;
+}
+
+.menuItemSelectableIcon {
+    composes: buttonIcon;
+}
+
+.menuItemSelected .menuItemSelectableIcon {
+    color: rgb(var(--primary-7));
+}
+
+.menuItemCommand {
+    margin-top: 1px;
+    margin-left: auto;
+    padding-left: 6px;
+    color: var(--foreground-secondary);
+    font: inherit;
+    font-size: 14px;
+    white-space: nowrap;
+}
+
+.menuItemCommandIcon {
+    margin-right: -6px;
+    color: var(--foreground-secondary);
+
+    &.icon {
+        font-size: 16px;
+    }
+}
+
+.menuItemCommand + .menuItemCommandIcon {
+    margin-left: -9px;
+}
+
+.menuItemActive .menuItemCommand,
+.menuItemActive .menuItemCommandIcon {
+    color: rgb(var(--primary-4));
+}
+
+.menuItemImage {
+    margin-left: -2px;
+    margin-right: -2px;
+    height: 24px;
+    width: 24px;
+    border-radius: 3px;
+}
+
+.menuGroupHorizontal .menuItem {
+    flex-basis: 0;
+    flex-grow: 1;
+
+    &:has(.menuItemIcon:only-child) {
+        justify-content: center;
+    }
+}
+
+.menuTitle {
+    padding: 0 12px;
+    color: var(--foreground-prominent);
+    font-size: 18px;
+    font-weight: 700;
+}
+
+.menuSubHeader {
+    position: sticky;
+    display: flex;
+    top: 0;
+    margin-top: -9px;
+    margin-bottom: -3px;
+    padding: 12px 12px 6px;
+    align-items: center;
+    gap: 9px;
+    background: linear-gradient(to bottom, rgb(var(--gray-0)) 75%, transparent);
+    font-size: 14px;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.menuSubHeaderIcon,
+.menuSubHeaderLabel {
+    color: var(--foreground-secondary);
+}
+
+.menuSubHeaderIcon {
+    font-size: 16px;
+}
+
+.menuSubHeaderLabel {
+    flex-grow: 1;
+}
+
+.menuItem + .menuSubHeader {
+    margin-top: 9px;
+}
+
+.menuLarge .menuItem {
+    position: relative;
+    padding-left: 15px;
+    padding-right: 15px;
+
+    &::after {
+        position: absolute;
+        display: block;
+        top: 12px;
+        right: 12px;
+        bottom: 12px;
+        width: 4px;
+        content: '';
+        background: rgb(var(--primary-7));
+        border-radius: 99px;
+        opacity: 0;
+        transition: opacity 180ms var(--swift-out);
+    }
+}
+
+.menuLarge .menuItem:not(.menuItemIndented) {
+    min-height: 48px;
+
+    &::after {
+        background: rgb(var(--primary-0));
+    }
+}
+
+.menuLarge .menuItemActive {
+    &::after {
+        opacity: 1;
+    }
+
+    &.menuItemIndented {
+        background: rgb(var(--gray-2));
+
+        .menuItemIcon,
+        .menuItemLabel {
+            color: var(--foreground-prominent);
+        }
+    }
+}
+
+:local(.basePane) > .menu {
+    margin-left: 9px;
+    margin-right: 9px;
+
+    &:first-child {
+        margin-top: 9px;
+    }
+
+    &:last-child {
+        margin-bottom: 9px;
+    }
+
+    > :where(.divider, .separator) {
+        margin: 3px -9px;
+    }
+}
+
+:local(.expandableBody) > .menu {
+    margin-left: 9px;
+    margin-right: 9px;
+
+    &:last-child {
+        margin-bottom: 9px;
+    }
+
+    > :where(.divider, .separator) {
+        margin-left: 21px;
+        margin-right: 21px;
+    }
+}