@flux-ui/components 3.0.0-next.0

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

@@ -0,0 +1,171 @@
+@value basePaneStructure, basePaneLoader from './base/Pane.module.scss';
+
+.calendar {
+    composes: basePaneStructure;
+
+    display: flex;
+    flex-flow: column;
+    box-shadow: var(--shadow-sm);
+    contain: paint;
+}
+
+.calendarActions {
+    align-items: center;
+}
+
+.calendarLoader {
+    composes: basePaneLoader;
+}
+
+.calendarCurrent {
+    display: flex;
+    gap: 9px;
+}
+
+.calendarCurrentValue {
+    padding: 0;
+    background: none;
+    border: 0;
+    cursor: pointer;
+    font-size: 30px;
+    letter-spacing: -.05em;
+    line-height: 1.5em;
+    text-transform: capitalize;
+
+    @media (hover: hover) {
+        &:hover {
+            color: rgb(var(--primary-7));
+        }
+    }
+}
+
+.calendarCurrentMonth {
+    composes: calendarCurrentValue;
+
+    color: var(--foreground-prominent);
+    font-weight: 700;
+}
+
+.calendarCurrentYear {
+    composes: calendarCurrentValue;
+
+    color: var(--foreground);
+}
+
+.calendarCells {
+    display: grid;
+    flex-grow: 1;
+    gap: 1px;
+    grid-template-columns: repeat(7, 1fr);
+    grid-template-rows: min-content repeat(6, auto);
+    background: rgb(var(--gray-2));
+}
+
+.calendarCell {
+    padding: 12px 21px;
+    background: rgb(var(--gray-0));
+}
+
+.calendarDay {
+    composes: calendarCell;
+
+    padding-left: 0;
+    padding-right: 0;
+    color: var(--foreground-secondary);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 1em;
+    text-align: center;
+    text-transform: capitalize;
+}
+
+.calendarEntry {
+    composes: calendarCell;
+
+    position: relative;
+    min-height: 105px;
+    padding-bottom: 39px;
+
+    &.isDisabled {
+        background: rgb(var(--gray-1));
+        color: var(--foreground-secondary);
+        pointer-events: none;
+
+        .calendarEntryDate {
+            opacity: .25;
+        }
+
+        .calendarEvents {
+            opacity: .75;
+            pointer-events: none;
+        }
+    }
+}
+
+.calendarEntryDate {
+    position: absolute;
+    right: 21px;
+    bottom: 15px;
+    color: var(--foreground);
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 1em;
+}
+
+.calendarEvents {
+    display: grid;
+    grid-auto-rows: 1fr;
+    gap: 3px;
+}
+
+.calendarEvent {
+    margin-left: -9px;
+    margin-right: -9px;
+    padding: 6px 9px;
+    background: rgb(var(--primary-2));
+    border: 0;
+    color: rgb(var(--primary-9));
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 1.3em;
+    text-align: left;
+
+    /** note: This works in all browsers. */
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+
+    &.isSingle {
+        border-radius: calc(var(--radius) / 2);
+    }
+
+    &.isMiddle {
+        margin-left: -22px;
+        margin-right: -22px;
+    }
+
+    &.isStart {
+        margin-right: -21px;
+        border-top-left-radius: calc(var(--radius) / 2);
+        border-bottom-left-radius: calc(var(--radius) / 2);
+    }
+
+    &.isEnd {
+        margin-left: -21px;
+        border-top-right-radius: calc(var(--radius) / 2);
+        border-bottom-right-radius: calc(var(--radius) / 2);
+    }
+
+    &:not(.isSingle):not(.isStart) {
+        span {
+            opacity: 0;
+        }
+    }
+
+    @media (hover: hover) {
+        &:hover {
+            background: rgb(var(--primary-3));
+        }
+    }
+}

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

@@ -0,0 +1,58 @@
+@use '$flux/css/mixin';
+
+.chip {
+    display: flex;
+    height: 36px;
+    padding: 0 12px;
+    align-items: center;
+    flex-grow: 0;
+    gap: 9px;
+    background: rgb(var(--gray-1));
+    border: 1px solid rgb(var(--gray-3));
+    border-radius: 99px;
+    color: var(--foreground);
+    transition: 180ms var(--swift-out);
+    transition-property: background, border, color, mixin.focus-ring-transition-properties();
+
+    &.isSelectable {
+        cursor: pointer;
+
+        @include mixin.focus-ring(2px);
+
+        @media (hover: hover) {
+            &:hover {
+                background: rgb(var(--gray-2));
+            }
+        }
+    }
+
+    &.isSelected {
+        background: rgb(var(--primary-2));
+        border-color: rgb(var(--primary-4));
+        color: rgb(var(--primary-7));
+
+        @media (hover: hover) {
+            &:hover {
+                background: rgb(var(--primary-3));
+            }
+        }
+    }
+
+    :is(span) {
+        font-size: 14px;
+        font-weight: 500;
+        white-space: nowrap;
+    }
+}
+
+[dark] .chip.isSelected {
+    background: rgb(var(--primary-11) / .5);
+    border-color: rgb(var(--primary-11));
+    color: rgb(var(--primary-5));
+
+    @media (hover: hover) {
+        &:hover {
+            background: rgb(var(--primary-10) / .5);
+        }
+    }
+}

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

@@ -0,0 +1,184 @@
+@use '$flux/css/mixin';
+
+.colorPicker {
+    --transparent: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC);
+
+    display: flex;
+    padding: 21px;
+    flex-flow: column;
+    gap: 15px;
+}
+
+.colorPickerPreview {
+    position: relative;
+    height: 60px;
+    width: 60px;
+    border-radius: var(--radius);
+    overflow: hidden;
+
+    &::after,
+    &::before {
+        position: absolute;
+        inset: 0;
+        content: '';
+        border-radius: inherit;
+    }
+
+    &::before {
+        background: var(--transparent) repeat center;
+    }
+
+    &::after {
+        background: var(--color);
+        box-shadow: inset 0 0 0 1px rgb(var(--gray-11) / .05);
+    }
+}
+
+.colorPickerSaturation {
+    background: var(--pickerBackground, black);
+    border: 0;
+
+    &::before,
+    &::after {
+        position: absolute;
+        content: '';
+        inset: 0;
+        border-radius: inherit;
+    }
+
+    &::before {
+        background: linear-gradient(to right, white, transparent);
+    }
+
+    &::after {
+        background: linear-gradient(to top, black, transparent);
+        box-shadow: inset 0 0 0 1px rgb(var(--gray-11) / .05);
+    }
+}
+
+.colorPickerSlider {
+    position: relative;
+    margin-left: 0;
+    margin-right: 0;
+
+    .sliderTrackValue {
+        background: unset;
+    }
+}
+
+.colorPickerAlphaSlider {
+    composes: colorPickerSlider;
+
+    .sliderTrack {
+        background: var(--transparent) repeat center;
+    }
+}
+
+.colorPickerHueSlider {
+    composes: colorPickerSlider;
+
+    .sliderTrack {
+        background: linear-gradient(to right, rgb(255, 0, 0) 0, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0));
+        border-color: rgb(0 0 0 / .1);
+    }
+}
+
+.colorPickerValue {
+    display: flex;
+    align-items: flex-end;
+    gap: 9px;
+
+    .formFieldLabel {
+        min-height: unset;
+        font-size: 12px;
+        line-height: 15px;
+    }
+
+    .formInput {
+        height: 36px;
+    }
+}
+
+.colorSelect {
+    display: flex;
+    flex-flow: row wrap;
+    gap: 9px;
+}
+
+.colorSelectItem {
+    display: flex;
+    height: 30px;
+    width: 30px;
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: 15px;
+    cursor: pointer;
+    transition: 150ms var(--swift-out);
+    transition-property: background, border, scale;
+
+    .icon {
+        transition: inherit;
+        transition-property: scale;
+    }
+
+    @include mixin.hover {
+        scale: 1.1;
+    }
+
+    &:active {
+        scale: .9;
+    }
+}
+
+.colorSelectColor {
+    composes: colorSelectItem;
+
+    background: var(--color);
+    border: 2px solid color-mix(in srgb, var(--color), black 9%);
+}
+
+.colorSelectColorDeselected {
+    composes: colorSelectColor;
+
+    .icon {
+        scale: .5;
+    }
+}
+
+.colorSelectColorSelected {
+    composes: colorSelectColor;
+
+    background: transparent;
+    border: 3px solid var(--color);
+}
+
+.colorSelectCustom {
+    composes: colorSelectItem;
+
+    background: rgb(var(--gray-1));
+    border: 1px solid rgb(var(--gray-3));
+}
+
+.colorSelectCustomPicker {
+    width: 330px;
+}
+
+.colorSelectButtons {
+    display: flex;
+    padding-top: 0;
+    gap: 9px;
+
+    .button:first-child {
+        flex-grow: 1;
+    }
+}
+
+.colorSelectCheck {
+    color: var(--color);
+
+    :is(path) {
+        stroke: currentColor;
+        stroke-width: 54px;
+    }
+}

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

@@ -0,0 +1,123 @@
+.comment {
+    display: grid;
+    max-width: 100%;
+    gap: 3px 15px;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: repeat(2, auto);
+
+    :local(.avatar) {
+        align-self: end;
+        grid-column: 2;
+        grid-row: 1;
+    }
+
+    .commentContent {
+        grid-column: 1;
+        grid-row: 1;
+    }
+
+    .commentFooter {
+        grid-column: 1;
+        grid-row: 2;
+    }
+
+    &.isReceived {
+        grid-template-columns: auto 1fr;
+
+        :local(.avatar) {
+            grid-column: 1;
+        }
+
+        .commentContent {
+            grid-column: 2;
+        }
+
+        .commentFooter {
+            grid-column: 2;
+        }
+    }
+}
+
+.commentContent {
+    min-width: 0;
+    padding: 12px 18px;
+    background: linear-gradient(to bottom, rgb(var(--gray-0)), rgb(var(--gray-1)));
+    border: 1px solid rgb(var(--gray-3));
+    border-radius: calc(var(--radius) * 2);
+    box-shadow: var(--shadow-xs);
+}
+
+.comment:not(.isReceived) .commentContent {
+    border-bottom-right-radius: var(--radius);
+}
+
+.comment.isReceived .commentContent {
+    background: linear-gradient(to bottom, rgb(var(--gray-1)), rgb(var(--gray-2)));
+    border-bottom-left-radius: var(--radius);
+}
+
+.comment.isTyping .commentContent {
+    width: min-content;
+}
+
+.commentTyping {
+    display: block;
+    margin: 6px;
+    height: 6px;
+    width: 6px;
+    border-radius: 6px;
+    animation: commentTyping 1s linear infinite both;
+}
+
+.commentFooter {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    justify-content: flex-end;
+    font-size: 12px;
+    font-weight: 500;
+
+    :global(span) {
+        margin-right: auto;
+    }
+
+    :global(time) {
+        color: var(--foreground-secondary);
+    }
+}
+
+[dark] .commentContent {
+    background: linear-gradient(to bottom, rgb(var(--gray-1)), rgb(var(--gray-0)));
+}
+
+[dark] .comment.isReceived .commentContent {
+    background: linear-gradient(to bottom, rgb(var(--gray-2)), rgb(var(--gray-1)));
+}
+
+@keyframes commentTyping {
+    0%,
+    80%,
+    100% {
+        background: rgb(var(--gray-3));
+        box-shadow: -9px 0 rgb(var(--gray-3)), 9px 0 rgb(var(--gray-3));
+        translate: 0 0;
+    }
+
+    20% {
+        background: rgb(var(--gray-3));
+        box-shadow: -9px -3px rgb(var(--gray-5)), 9px 0 rgb(var(--gray-3));
+        translate: 0 0;
+    }
+
+    40% {
+        background: rgb(var(--gray-5));
+        box-shadow: -9px 3px rgb(var(--gray-3)), 9px 3px rgb(var(--gray-3));
+        translate: 0 -3px;
+    }
+
+    60% {
+        background: rgb(var(--gray-3));
+        box-shadow: -9px 0 rgb(var(--gray-3)), 9px -3px rgb(var(--gray-5));
+        translate: 0 0;
+    }
+}

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

@@ -0,0 +1,193 @@
+@use '$flux/css/mixin';
+
+.datePicker {
+    display: flex;
+    max-height: 420px;
+    flex-flow: column;
+    border-radius: inherit;
+    overflow: auto;
+    user-select: none;
+    z-index: 0;
+}
+
+.datePickerDates,
+.datePickerMonths,
+.datePickerYears,
+.datePickerHeader {
+    padding: 15px;
+}
+
+.datePickerHeader {
+    position: sticky;
+    display: flex;
+    top: 0;
+    align-items: center;
+    background: rgb(var(--gray-1));
+    border-bottom: 1px solid rgb(var(--gray-2));
+    z-index: 1;
+}
+
+.datePickerHeaderView {
+    display: flex;
+    height: 42px;
+    margin-left: auto;
+    margin-right: auto;
+    align-items: center;
+    gap: 9px;
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.datePickerHeaderViewButton {
+    padding: 0;
+    background: unset;
+    border: 0;
+    cursor: pointer;
+    text-transform: capitalize;
+
+    &:first-child {
+        color: var(--foreground-prominent);
+    }
+
+    &:last-child {
+        color: var(--foreground-secondary);
+    }
+
+    @include mixin.hover {
+        color: rgb(var(--primary-7));
+    }
+}
+
+.datePickerDate {
+    display: flex;
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 1;
+    background: unset;
+    border: 0;
+    border-radius: var(--radius);
+    color: var(--foreground-prominent);
+    cursor: pointer;
+    font-size: 14px;
+    outline: 0;
+    transition: 180ms var(--swift-out);
+    transition-property: background, border-radius, color, opacity;
+
+    @include mixin.hover {
+        background: rgb(var(--gray-2));
+        color: var(--foreground-prominent);
+    }
+
+    &.isDisabled:not(.isRangeEntry, .isRangeEnd, .isRangeStart, .isSelectionEntry, .isSelectionEnd, .isSelectionStart) {
+        opacity: .25;
+        pointer-events: none;
+    }
+
+    &:not(.isDisabled) {
+        font-weight: 500;
+    }
+
+    &.isSelected {
+        background: rgb(var(--primary-7));
+        color: rgb(var(--primary-1));
+        font-weight: 700;
+    }
+
+    &.isRangeEntry {
+        background: rgb(var(--primary-3));
+        border-radius: 0;
+        color: rgb(var(--primary-11));
+    }
+
+    &.isRangeEnd,
+    &.isRangeStart {
+        background: rgb(var(--primary-7));
+        color: rgb(var(--primary-1));
+        font-weight: 700;
+    }
+
+    [dark] &.isRangeEntry {
+        background: rgb(var(--primary-7) / .75);
+        color: rgb(0 0 0 / .975);
+    }
+
+    [dark] &.isRangeStart,
+    [dark] &.isRangeEnd {
+        background: rgb(var(--primary-7));
+        color: rgb(0 0 0 / .975);
+    }
+
+    &.isRangeEntry:nth-child(7n + 8),
+    &.isRangeStart {
+        border-top-left-radius: var(--radius);
+        border-bottom-left-radius: var(--radius);
+    }
+
+    &.isRangeEntry:nth-child(7n),
+    &.isRangeEnd {
+        border-top-right-radius: var(--radius);
+        border-bottom-right-radius: var(--radius);
+    }
+
+    &.isSelectionEntry {
+        background: rgb(var(--gray-2));
+        border-radius: 0;
+        color: var(--foreground-prominent);
+    }
+
+    &.isSelectionEnd,
+    &.isSelectionStart {
+        background: rgb(var(--gray-3));
+        font-weight: 700;
+    }
+
+    &.isSelectionEntry:nth-child(7n + 8),
+    &.isSelectionStart {
+        border-top-left-radius: var(--radius);
+        border-bottom-left-radius: var(--radius);
+    }
+
+    &.isSelectionEntry:nth-child(7n),
+    &.isSelectionEnd {
+        border-top-right-radius: var(--radius);
+        border-bottom-right-radius: var(--radius);
+    }
+}
+
+.datePickerDates {
+    position: relative;
+}
+
+.datePickerDatesGrid {
+    display: grid;
+    gap: 3px 0;
+    grid-template-columns: repeat(7, 1fr);
+}
+
+.datePickerDay {
+    margin-bottom: 6px;
+    color: var(--foreground-secondary);
+    font-size: 12px;
+    font-weight: 500;
+    text-align: center;
+    text-transform: uppercase;
+}
+
+.datePickerMonths,
+.datePickerYears {
+    display: grid;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 300px;
+    width: 100%;
+    gap: 9px;
+    grid-template-columns: repeat(3, 1fr);
+
+    .button {
+        contain: size layout;
+        contain-intrinsic-size: 0 42px;
+        content-visibility: auto;
+        text-transform: capitalize;
+    }
+}