@flux-ui/components 3.0.0-next.0

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

@@ -0,0 +1,79 @@
+.divider {
+    position: relative;
+    display: grid;
+    contain: paint;
+    margin-top: 18px;
+    margin-bottom: 18px;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.dividerContentStart {
+    composes: divider;
+
+    justify-items: start;
+}
+
+.dividerContentCenter {
+    composes: divider;
+
+    justify-items: center;
+}
+
+.dividerContentEnd {
+    composes: divider;
+
+    justify-items: end;
+}
+
+.dividerContent {
+    position: relative;
+    display: flex;
+
+    &::before,
+    &::after {
+        position: absolute;
+        display: block;
+        top: 50%;
+        translate: 0 -50%;
+    }
+
+    &::before {
+        left: -100dvh;
+        right: calc(100% + 15px);
+    }
+
+    &::after {
+        left: calc(100% + 15px);
+        right: -100dvh;
+    }
+}
+
+.dividerLine {
+    width: 100%;
+    border: 0;
+}
+
+.dividerContent::before,
+.dividerContent::after,
+.dividerLine {
+    height: 1px;
+    content: '';
+    background: rgb(var(--gray-2));
+}
+
+.separator {
+    background: rgb(var(--gray-2));
+}
+
+.separatorHorizontal {
+    composes: separator;
+
+    height: 1px;
+}
+
+.separatorVertical {
+    composes: separator;
+
+    width: 1px;
+}

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

@@ -0,0 +1,99 @@
+.dropZone {
+    display: grid;
+    align-items: center;
+    gap: 15px 30px;
+    grid-template-columns: 1fr;
+
+    &:has(> .dropZoneActions) {
+        grid-template-columns: auto 1fr;
+    }
+}
+
+.dropZoneActions {
+    display: flex;
+    flex-flow: column;
+    gap: 15px;
+}
+
+.dropZoneBorder {
+    position: absolute;
+    inset: var(--dz-inset);
+    height: var(--dz-height);
+    width: var(--dz-width);
+    overflow: visible;
+    pointer-events: none;
+
+    :global(rect) {
+        fill: var(--dz-fill);
+        rx: var(--dz-radius);
+        stroke: var(--dz-stroke);
+        stroke-dasharray: 6px 6px;
+        stroke-width: 2px;
+        transition: 270ms var(--swift-out);
+        transition-property: fill, stroke;
+    }
+}
+
+.dropZoneContent {
+    --dz-fill: transparent;
+    --dz-stroke: transparent;
+    --dz-inset: -1px;
+    --dz-radius: var(--radius);
+    --dz-height: calc(100% + 2px);
+    --dz-width: calc(100% + 2px);
+
+    position: relative;
+
+    &:has(.avatar) {
+        --dz-inset: -3px;
+        --dz-radius: 999px;
+        --dz-height: calc(100% + 6px);
+        --dz-width: calc(100% + 6px);
+    }
+
+    &:has(.placeholder) {
+        --dz-fill: rgb(var(--gray-1));
+        --dz-stroke: rgb(var(--gray-3));
+    }
+
+    :local(.avatar) {
+        display: block;
+    }
+
+    :local(.placeholder) {
+        background: transparent;
+        border: 0;
+    }
+}
+
+.isDragging .dropZoneContent {
+    --dz-stroke: rgb(var(--primary-7));
+}
+
+.isDraggingOver .dropZoneContent {
+    &:has(.placeholder) {
+        --dz-fill: rgb(var(--primary-2));
+    }
+
+    .dropZoneBorder rect {
+        animation: dropZoneBorderAnimation 480ms linear infinite both;
+    }
+}
+
+.dropZoneLoader {
+    position: absolute;
+    display: flex;
+    inset: var(--dz-inset);
+    align-items: center;
+    justify-content: center;
+    background: rgb(var(--gray-1) / .84);
+    backdrop-filter: blur(3px) saturate(180%);
+    border-radius: var(--dz-radius);
+    z-index: 100;
+}
+
+@keyframes dropZoneBorderAnimation {
+    to {
+        stroke-dashoffset: -12px;
+    }
+}

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

@@ -0,0 +1,112 @@
+@use '$flux/css/mixin';
+
+@value basePane from './base/Pane.module.scss';
+
+.expandable {
+    display: flex;
+    flex-flow: column;
+}
+
+.expandableOpened {
+    composes: expandable;
+}
+
+.expandableHeader {
+    display: flex;
+    height: 60px;
+    padding-left: 21px;
+    padding-right: 21px;
+    align-items: center;
+    gap: 12px;
+    background: unset;
+    border: 0;
+    color: var(--foreground-prominent);
+    cursor: pointer;
+    text-align: left;
+    transition: background 180ms var(--swift-out);
+    transition-property: background, mixin.focus-ring-transition-properties();
+    z-index: 1;
+
+    @include mixin.focus-ring();
+
+    @include mixin.hover {
+        background: rgb(var(--gray-1));
+    }
+
+    :is(span) {
+        flex-grow: 1;
+        font-weight: 600;
+    }
+
+    :local(.icon):last-child {
+        color: var(--foreground-secondary);
+    }
+}
+
+.expandableBody {
+    transition: height 390ms var(--swift-out), translate 300ms var(--swift-out) 120ms, opacity 300ms var(--swift-out) 120ms;
+
+    &:global(.v-enter-from),
+    &:global(.v-leave-to) {
+        opacity: 0;
+        translate: 0 -15px;
+    }
+
+    &:global(.v-enter-to),
+    &:global(.v-leave-from) {
+        opacity: 1;
+    }
+
+    &:global(.v-leave-active) {
+        transition-delay: 0s;
+    }
+
+    &:global(.v-enter-active),
+    &:global(.v-leave-active) {
+        overflow: hidden;
+    }
+}
+
+.expandableContent {
+    padding: 0 21px 21px;
+}
+
+:local(.basePane) > .expandable {
+    border-radius: inherit;
+}
+
+:local(.basePane) > .expandable .expandableHeader {
+    border-radius: inherit;
+}
+
+:local(.basePane) > .expandableOpened .expandableHeader {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.expandableGroup {
+    display: flex;
+    flex-flow: column;
+
+    .expandable + .expandable {
+        border-top: 1px solid rgb(var(--gray-2));
+    }
+
+    &:not(:first-child) {
+        border-top: 1px solid rgb(var(--gray-2));
+    }
+
+    &:not(:last-child) {
+        border-bottom: 1px solid rgb(var(--gray-2));
+    }
+}
+
+:local(.basePane) > .expandableGroup:first-child .expandable:first-child .expandableHeader {
+    border-top-left-radius: var(--radius);
+    border-top-right-radius: var(--radius);
+}
+
+:local(.basePane) > .expandableGroup:last-child .expandable:not(.expandableOpened):last-child .expandableHeader {
+    border-bottom-left-radius: var(--radius);
+    border-bottom-right-radius: var(--radius);
+}

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

@@ -0,0 +1,38 @@
+.fader {
+    position: relative;
+    background: black;
+    border-radius: inherit;
+    contain: paint;
+    z-index: 0;
+}
+
+.faderItem {
+    position: absolute;
+    display: block;
+    inset: 0;
+    transition: 660ms var(--deceleration-curve);
+
+    &.isCurrent {}
+
+    &:not(.isCurrent) {
+        opacity: 0;
+        pointer-events: none;
+        scale: 1.05;
+        transition-delay: 90ms;
+        z-index: 1;
+    }
+
+    :is(img) {
+        position: absolute;
+        display: block;
+        inset: 0;
+        height: 100%;
+        width: 100%;
+        border-radius: 0;
+
+        &:not(.focalPointImage) {
+            object-fit: cover;
+            object-position: center;
+        }
+    }
+}

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

@@ -0,0 +1,80 @@
+@value basePaneStructure from './base/Pane.module.scss';
+
+.filter {
+    max-height: 50dvh;
+    max-width: 100%;
+    padding: 9px;
+    width: 330px;
+    overflow: auto;
+    scrollbar-width: none;
+    transition: height 150ms var(--deceleration-curve);
+    z-index: 0;
+
+    &::-webkit-scrollbar {
+        display: none;
+        height: 0;
+        width: 0;
+    }
+
+    .menu {
+        > :where(.divider, .separator) {
+            margin: 3px -9px;
+        }
+
+        > .menuGroup > .menuSubHeader {
+            top: 51px;
+        }
+
+        > .menuGroup:has(.filterSearch) > .menuSubHeader {
+            top: 105px;
+        }
+
+        .menuItemLabel {
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    .paneBody {
+        margin: -9px;
+    }
+}
+
+.filterHeader {
+    position: sticky;
+    margin: -9px -9px 3px;
+    padding: 9px;
+    top: -9px;
+    background: rgb(var(--gray-0));
+    border-bottom: 1px solid rgb(var(--gray-2));
+    z-index: 2;
+
+    &:first-child {
+        border-top-left-radius: var(--radius);
+        border-top-right-radius: var(--radius);
+    }
+}
+
+.filterBack {
+    flex-grow: 1;
+}
+
+.filterReset {
+    width: 42px;
+    justify-content: center;
+}
+
+.filterDatePicker {
+    margin: -9px;
+}
+
+.filterSearch {
+    position: sticky;
+    top: 52px;
+    margin: -9px -9px 0;
+    padding: 9px;
+    background: linear-gradient(to bottom, rgb(var(--gray-0)) 75%, transparent);
+    z-index: 1;
+}

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

@@ -0,0 +1,63 @@
+.flyout {
+    display: contents;
+}
+
+.flyoutDialog {
+    top: var(--pane-y);
+    left: var(--pane-x);
+    margin: 0;
+    padding: 12px;
+    background: unset;
+    border: 0;
+    font-size: 1rem;
+
+    &::backdrop {
+        background: unset;
+    }
+}
+
+.flyoutPane {
+    max-height: calc(100dvh - 120px);
+    box-shadow: var(--shadow-md);
+    overflow: auto;
+    transform: translate3d(var(--pane-mx), var(--pane-my), 0);
+
+    &.isAutoWidth {
+        width: var(--opener-width);
+    }
+
+    &.isClosing {
+        animation: close 210ms var(--swift-out) both;
+    }
+
+    &.isOpening {
+        animation: open 210ms var(--deceleration-curve) both;
+    }
+}
+
+@keyframes close {
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes open {
+    from {
+        opacity: 0;
+        transform: translate3d(0, 0, 0)
+    }
+}
+
+@keyframes mobileClose {
+    to {
+        opacity: 0;
+        transform: translate3d(0, 100%, 0)
+    }
+}
+
+@keyframes mobileOpen {
+    from {
+        opacity: 0;
+        transform: translate3d(0, 100%, 0)
+    }
+}

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

@@ -0,0 +1,84 @@
+.focalPointImage {
+    object-fit: cover;
+}
+
+.focalPointEditor {
+    position: relative;
+    margin-left: auto;
+    margin-right: auto;
+    max-height: 210px;
+    max-width: 100%;
+    aspect-ratio: var(--aspect-ratio);
+    user-select: none;
+}
+
+.focalPointEditorArea {
+    position: absolute;
+    height: 42px;
+    width: 42px;
+    background: rgb(0 0 0 / .1);
+    border: 4px solid white;
+    border-radius: 99px;
+    box-shadow: var(--shadow-md);
+    cursor: move;
+    transform: translate3d(-50%, -50%, 0);
+}
+
+.focalPointEditorImage {
+    position: relative;
+    display: block;
+    height: 100%;
+    width: 100%;
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-lg);
+    pointer-events: none;
+}
+
+.focalPointPreview {
+    position: relative;
+    height: 210px;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.focalPointPreviewImage {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    right: -50%;
+    bottom: -50%;
+    max-height: 210px;
+    max-width: 100%;
+    background-size: cover;
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-lg);
+    transform: translate3d(-50%, -50%, 0);
+    animation: focalPointPreview 6s var(--swift-out) infinite;
+}
+
+@keyframes focalPointPreview {
+    0% {
+        aspect-ratio: var(--aspect-ratio);
+    }
+
+    20% {
+        aspect-ratio: 1;
+    }
+
+    40% {
+        aspect-ratio: 16 / 9;
+    }
+
+    60% {
+        aspect-ratio: 3 / 4;
+    }
+
+    80% {
+        aspect-ratio: 3 / 1;
+    }
+
+    100% {
+        aspect-ratio: var(--aspect-ratio);
+    }
+}