@flux-ui/components 3.0.0-next.0

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

@@ -0,0 +1,62 @@
+.tooltip {
+    position: fixed;
+    display: flex;
+    top: 0;
+    left: 0;
+    max-width: 360px;
+    padding: 9px 15px;
+    flex-flow: column;
+    background: rgb(var(--gray-11) / .9);
+    backdrop-filter: blur(6px) saturate(180%);
+    border-radius: var(--radius);
+    color: rgb(var(--gray-0));
+    font-variant-numeric: tabular-nums;
+    pointer-events: none;
+    translate: calc(var(--x) * 1px) calc(var(--y) * 1px);
+    z-index: 100000;
+
+    &::after {
+        position: absolute;
+        display: block;
+        top: var(--arrowY);
+        left: var(--arrowX);
+        height: 9px;
+        width: 9px;
+        content: '';
+        background: inherit;
+        border-radius: 0 0 3px 0;
+        clip-path: polygon(100% 100%, 99% 0%, 0% 99%);
+        rotate: var(--arrowAngle);
+        transform-origin: center;
+        translate: -50% -50%;
+    }
+}
+
+[dark] .tooltip {
+    background: rgb(0 0 0 / .9);
+    color: white;
+}
+
+.tooltipAbove {
+    composes: tooltip;
+
+    transform-origin: bottom center;
+}
+
+.tooltipBelow {
+    composes: tooltip;
+
+    transform-origin: top center;
+}
+
+.tooltipEnd {
+    composes: tooltip;
+
+    transform-origin: center left;
+}
+
+.tooltipStart {
+    composes: tooltip;
+
+    transform-origin: center right;
+}

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

@@ -0,0 +1,142 @@
+.breakthroughTransitionEnterActive,
+.breakthroughTransitionBackEnterActive,
+.breakthroughTransitionLeaveActive,
+.breakthroughTransitionBackLeaveActive {
+    transform-origin: top center;
+    transition-property: opacity, scale, translate;
+}
+
+.breakthroughTransitionEnterActive,
+.breakthroughTransitionBackEnterActive {
+    transition-duration: 180ms;
+    transition-timing-function: var(--deceleration-curve);
+}
+
+.breakthroughTransitionLeaveActive,
+.breakthroughTransitionBackLeaveActive {
+    transition-duration: 120ms;
+    transition-timing-function: var(--acceleration-curve);
+}
+
+.breakthroughTransitionEnterFrom,
+.breakthroughTransitionBackLeaveTo {
+    opacity: 0;
+    scale: .975;
+}
+
+.breakthroughTransitionLeaveTo,
+.breakthroughTransitionBackEnterFrom {
+    opacity: 0;
+    scale: 1.025;
+}
+
+.fadeTransitionEnterActive,
+.fadeTransitionLeaveActive {
+    transition: opacity 150ms var(--swift-out) !important;
+}
+
+.fadeTransitionEnterFrom,
+.fadeTransitionLeaveTo {
+    opacity: 0;
+}
+
+.fadeTransitionEnterTo,
+.fadeTransitionLeaveFrom {
+    opacity: 1;
+}
+
+.routeTransitionEnterActive,
+.routeTransitionBackEnterActive,
+.routeTransitionLeaveActive,
+.routeTransitionBackLeaveActive {
+    transform-origin: center 50dvh;
+    transition-property: opacity, scale;
+}
+
+.routeTransitionEnterActive,
+.routeTransitionBackEnterActive {
+    transition-duration: 180ms;
+    transition-timing-function: var(--deceleration-curve);
+}
+
+.routeTransitionLeaveActive,
+.routeTransitionBackLeaveActive {
+    transition-duration: 120ms;
+    transition-timing-function: var(--acceleration-curve);
+}
+
+.routeTransitionEnterFrom,
+.routeTransitionBackLeaveTo {
+    opacity: 0;
+    scale: .975;
+}
+
+.routeTransitionLeaveTo,
+.routeTransitionBackEnterFrom {
+    opacity: 0;
+    scale: .975;
+}
+
+.tooltipTransitionEnterActive,
+.tooltipTransitionLeaveActive {
+    transition: 210ms var(--swift-out);
+    transition-property: opacity, scale;
+}
+
+.tooltipTransitionEnterFrom {
+    scale: .975;
+}
+
+.tooltipTransitionEnterFrom,
+.tooltipTransitionLeaveTo {
+    opacity: 0;
+}
+
+.verticalWindowTransitionEnterActive,
+.verticalWindowTransitionBackEnterActive {
+    contain: paint;
+    transition: 150ms var(--deceleration-curve);
+    transition-property: opacity, transform;
+}
+
+.verticalWindowTransitionLeaveActive,
+.verticalWindowTransitionBackLeaveActive {
+    transition: 150ms var(--acceleration-curve);
+    transition-property: opacity, transform;
+}
+
+.verticalWindowTransitionBackLeaveTo,
+.verticalWindowTransitionEnterFrom {
+    opacity: 0;
+    transform: translate3d(0, 15px, 0);
+}
+
+.verticalWindowTransitionBackEnterFrom,
+.verticalWindowTransitionLeaveTo {
+    opacity: 0;
+    transform: translate3d(0, -15px, 0);
+}
+
+.windowTransitionEnterActive,
+.windowTransitionBackEnterActive {
+    transition: 150ms var(--deceleration-curve);
+    transition-property: height, opacity, transform;
+}
+
+.windowTransitionLeaveActive,
+.windowTransitionBackLeaveActive {
+    transition: 150ms var(--acceleration-curve);
+    transition-property: height, opacity, transform;
+}
+
+.windowTransitionBackLeaveTo,
+.windowTransitionEnterFrom {
+    opacity: 0;
+    transform: translate3d(15px, 0, 0);
+}
+
+.windowTransitionBackEnterFrom,
+.windowTransitionLeaveTo {
+    opacity: 0;
+    transform: translate3d(-15px, 0, 0);
+}

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

@@ -0,0 +1,70 @@
+@property --shine-degrees {
+    syntax: '<angle>';
+    initial-value: 0deg;
+    inherits: false;
+}
+
+.fillVisual {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.animatedColors {
+    composes: fillVisual;
+
+    filter: blur(60px) saturate(180%);
+}
+
+.dotPattern {
+    composes: fillVisual;
+
+    fill: rgb(var(--gray-4));
+    pointer-events: none;
+}
+
+.flickeringGrid {
+    composes: fillVisual;
+
+    pointer-events: none;
+}
+
+.gridPattern {
+    composes: fillVisual;
+
+    fill: rgb(var(--gray-2));
+    stroke: rgb(var(--gray-4));
+    pointer-events: none;
+}
+
+.borderShine {
+    position: relative;
+
+    --shine-radius: var(--radius);
+    --shine-mask: linear-gradient(#fff #{0} #{0}) content-box, linear-gradient(#fff #{0} #{0});
+
+    &::before {
+        position: absolute;
+        display: block;
+        inset: calc(var(--shine-offset) * -1px);
+        padding: calc(var(--shine-width) * 1px);
+        content: '';
+        background: conic-gradient(from var(--shine-degrees), #{var(--shine-colors)});
+        border-radius: var(--shine-radius);
+        pointer-events: none;
+        animation: borderShinePosition calc(var(--shine-duration) * 1s) linear infinite;
+        mask: var(--shine-mask);
+        -webkit-mask-composite: xor;
+        mask-composite: exclude;
+    }
+}
+
+@keyframes borderShinePosition {
+    from {
+        --shine-degrees: 0deg;
+    }
+    to {
+        --shine-degrees: 360deg;
+    }
+}

package/src/css/component/base/Button.module.scss

@@ -0,0 +1,87 @@
+@use '$flux/css/mixin';
+
+@layer flux-base {
+    .button {
+        display: inline-flex;
+        height: 42px;
+        padding: 0 12px;
+        align-items: center;
+        flex-grow: 0;
+        flex-shrink: 0;
+        gap: 12px;
+        justify-content: center;
+        background: unset;
+        border: 1px solid;
+        border-radius: var(--radius);
+        box-shadow: var(--shadow-px);
+        cursor: pointer;
+        font: inherit;
+        text-decoration: none;
+        transition: 180ms var(--swift-out);
+        transition-property: background, border, box-shadow, color, scale, mixin.focus-ring-transition-properties();
+        user-select: none;
+
+        @include mixin.focus-ring(2px);
+
+        &:active {
+            box-shadow: none;
+        }
+
+        &:focus-visible {
+            z-index: 1;
+        }
+
+        &:disabled,
+        &[aria-disabled=true] {
+            box-shadow: none;
+            opacity: .5;
+            pointer-events: none;
+        }
+
+        &.isSmall {
+            height: 36px;
+            padding: 0 9px;
+        }
+
+        &.isMedium {
+            height: 42px;
+            padding: 0 12px;
+        }
+
+        &.isLarge {
+            height: 48px;
+            padding: 0 15px;
+        }
+
+        &.isXl {
+            height: 54px;
+            padding: 0 18px;
+        }
+
+        &.isFilled {
+            align-self: stretch;
+        }
+    }
+
+    .buttonIcon {
+        flex-shrink: 0;
+        font-size: 20px;
+
+        &:only-child {
+            margin-left: -2px;
+            margin-right: -2px;
+        }
+    }
+
+    .buttonLabel {
+        display: inline-block;
+        font-weight: 500;
+        text-align: center;
+
+        &:only-child {
+            margin-left: 6px;
+            margin-right: 6px;
+            min-width: 42px;
+        }
+    }
+}

package/src/css/component/base/Effect.module.scss

@@ -0,0 +1,139 @@
+@use 'sass:math';
+
+$-bubble-d: 3rem;
+$-bubble-r: .5 * $-bubble-d;
+$-sparkle-d: .375rem;
+$-sparkle-r: .5 * $-sparkle-d;
+
+@mixin -bubble($ext) {
+    border-width: $ext;
+    opacity: .15;
+    transform: scale(1);
+}
+
+@mixin -sparkles($amount) {
+    $-shadow-list: ();
+    $-amount-pairs: 5;
+    $-group-base-angle: math.div(360deg, $-amount-pairs);
+    $-group-distr-r: (1 + $amount * .5) * $-bubble-r;
+    $-amount-particles: 3;
+    $-sparkle-base-angle: math.div(360deg, $-amount-particles);
+    $-sparkle-off-angle: 72deg;
+    $-spread-r: -$amount * $-sparkle-r;
+
+    @for $i from 0 to $-amount-pairs {
+        $-group-curr-angle: $i * $-group-base-angle - 90deg;
+        $-xg: $-group-distr-r * cos($-group-curr-angle);
+        $-yg: $-group-distr-r * sin($-group-curr-angle);
+
+        @for $j from 0 to $-amount-particles {
+            $-sparkle-curr-angle: $-group-curr-angle + $-sparkle-off-angle + $j * $-sparkle-base-angle;
+            $-xs: $-xg + $-sparkle-d * cos($-sparkle-curr-angle);
+            $-ys: $-yg + $-sparkle-d * sin($-sparkle-curr-angle);
+
+            $-shadow-list: $-shadow-list, $-xs $-ys 0 $-spread-r hsl(($i + $j) * $-group-base-angle, 100%, 75%);
+        }
+    }
+
+    box-shadow: $-shadow-list;
+}
+
+.sparklesContainer {
+    z-index: 0;
+}
+
+.sparklesParticles {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    align-self: center;
+    cursor: pointer;
+    font-size: 24px;
+    user-select: none;
+
+    &:before,
+    &:after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        content: '';
+        border-radius: 50%;
+        z-index: -1;
+    }
+
+    &:before {
+        height: $-bubble-d;
+        margin: -$-bubble-r;
+        width: $-bubble-d;
+        box-sizing: border-box;
+        border: $-bubble-r solid currentColor;
+        transform: scale(0);
+    }
+
+    &:after {
+        margin: -$-sparkle-r;
+        width: $-sparkle-d;
+        height: $-sparkle-d;
+    }
+}
+
+.sparklesContainerActive .sparklesParticles {
+    animation: heart 1s var(--deceleration-curve);
+    filter: none;
+    will-change: font-size;
+
+    &:before, &:after {
+        animation: inherit;
+        animation-timing-function: var(--deceleration-curve);
+    }
+
+    &:before {
+        animation-name: bubble;
+        will-change: transform, border-width, border-color;
+    }
+
+    &:after {
+        animation-name: sparkles;
+        will-change: opacity, box-shadow;
+    }
+}
+
+@keyframes bubble {
+    15% {
+        @include -bubble($-bubble-r);
+    }
+
+    40%,
+    100% {
+        @include -bubble(0);
+    }
+}
+
+@keyframes heart {
+    0%,
+    17.5% {
+        font-size: 0;
+    }
+}
+
+@keyframes sparkles {
+    0%,
+    20% {
+        opacity: 0;
+    }
+
+    21% {
+        opacity: 1;
+
+        @include -sparkles(0);
+    }
+
+    100% {
+        opacity: 0;
+
+        @include -sparkles(1);
+    }
+}

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

@@ -0,0 +1,8 @@
+@layer flux-base {
+    .baseAutoGrid {
+        --min-column-width: 0;
+
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(calc(var(--min-column-width) * 1px), 1fr));
+    }
+}

package/src/css/component/base/Pane.module.scss

@@ -0,0 +1,54 @@
+@layer flux-base {
+    .basePane {
+        background: rgb(var(--gray-0));
+        background-clip: padding-box;
+        border: 1px solid rgb(var(--gray-11) / .05);
+        border-radius: var(--radius);
+    }
+
+    [dark] .basePane {
+        border-color: rgb(var(--gray-3));
+    }
+
+    .basePaneLoader {
+        position: absolute;
+        display: flex;
+        inset: 0;
+        align-items: center;
+        justify-content: center;
+        backdrop-filter: blur(2px) saturate(180%);
+        background: rgb(var(--gray-0) / .75);
+        border-radius: inherit;
+        z-index: 100;
+    }
+
+    .basePaneStructure {
+        composes: basePane;
+
+        position: relative;
+    }
+
+    .basePaneStructure > .basePaneStructure {
+        background: unset;
+        border: 0;
+        box-shadow: none;
+    }
+}
+
+.basePane > .basePaneElement,
+.basePane > :local(.form) > .basePaneElement {
+    &:first-child {
+        border-top-left-radius: calc(var(--radius) - 1px);
+        border-top-right-radius: calc(var(--radius) - 1px);
+    }
+
+    &:last-child,
+    &:not(.paneHeader):nth-last-child(1 of .basePaneElement) {
+        border-bottom-left-radius: calc(var(--radius) - 1px);
+        border-bottom-right-radius: calc(var(--radius) - 1px);
+    }
+
+    &:only-child {
+        border: 0;
+    }
+}

package/src/css/component/primitive/CoordinatePicker.module.scss

@@ -0,0 +1,24 @@
+@value sliderThumb from './Slider.module.scss';
+
+.coordinatePicker {
+    position: relative;
+    aspect-ratio: 5 / 3;
+    background: rgb(var(--gray-1));
+    border: 1px solid rgb(var(--gray-11) / .05);
+    border-radius: calc(var(--radius) / 2);
+    z-index: 0;
+}
+
+.coordinatePickerThumb {
+    composes: sliderThumb;
+
+    z-index: 1;
+
+    &.isDisabled {
+        counter-reset: t;
+    }
+
+    &.isDragging {
+        counter-reset: t;
+    }
+}

package/src/css/component/primitive/Slider.module.scss

@@ -0,0 +1,116 @@
+@use '$flux/css/mixin';
+
+.slider {
+    position: relative;
+    display: flex;
+    margin: 6px;
+    flex-flow: column;
+    gap: 9px;
+    touch-action: pan-y;
+
+    &.isDisabled {
+        cursor: not-allowed;
+    }
+
+    &.isDragging {
+        cursor: grabbing;
+    }
+}
+
+.sliderThumb {
+    position: absolute;
+    top: 50%;
+    height: 24px;
+    width: 24px;
+    padding: 0;
+    background: rgb(var(--gray-0));
+    background-clip: padding-box;
+    border: 1px solid rgb(var(--gray-11) / .05);
+    border-radius: 99px;
+    box-shadow: var(--shadow-sm);
+    cursor: grab;
+    outline: 0;
+    translate: -50% -50%;
+
+    @include mixin.focus-ring-transition(2px);
+
+    @media (hover: hover) {
+        &:hover {
+            background-color: rgb(var(--gray-2));
+        }
+    }
+
+    &.isDisabled {
+        background-color: rgb(var(--gray-1));
+        box-shadow: none;
+        pointer-events: none;
+    }
+
+    &.isDragging {
+        box-shadow: var(--shadow-md);
+        cursor: grabbing;
+    }
+}
+
+[dark] .sliderThumb {
+    background-color: rgb(var(--gray-1));
+    border-color: rgb(var(--gray-11) / .4);
+}
+
+.sliderTrack {
+    position: relative;
+    height: 12px;
+    background: rgb(var(--gray-2));
+    border-radius: calc(var(--radius) / 2);
+    box-shadow: inset 0 0 0 1px rgb(var(--gray-3));
+}
+
+.sliderTrackValue {
+    position: absolute;
+    display: block;
+    top: 0;
+    height: inherit;
+    background: rgb(var(--primary-7));
+    border-radius: inherit;
+}
+
+.slider.isDisabled .sliderTrackValue {
+    background: rgb(var(--gray-4));
+}
+
+.tick {
+    position: absolute;
+    left: calc(var(--position) * 100% - 1px);
+    bottom: 0;
+    height: 9px;
+    width: 2px;
+    background: rgb(var(--gray-4));
+    border-radius: 99px;
+    color: var(--foreground-prominent);
+    font-size: 10px;
+    font-weight: 600;
+    pointer-events: none;
+}
+
+.tickLarge {
+    composes: tick;
+
+    :is(span) {
+        position: relative;
+        display: inline-block;
+        translate: -50% -100%;
+    }
+}
+
+.tickSmall {
+    composes: tick;
+
+    height: 6px;
+    opacity: .5;
+}
+
+.ticks {
+    position: relative;
+    display: block;
+    height: 21px;
+}

package/src/css/index.scss

@@ -0,0 +1,5 @@
+@use 'layers';
+
+@use 'reset';
+@use 'base';
+@use 'typography';

package/src/css/layers.scss

@@ -0,0 +1 @@
+@layer flux-reset, flux-base, flux-component;