@flux-ui/components 3.0.0-next.0

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

@@ -0,0 +1,812 @@
+@use '$flux/css/mixin';
+
+@value button, buttonLabel from './base/Button.module.scss';
+@value basePaneStructure from './base/Pane.module.scss';
+
+%-form-input-group-inner-styles {
+    height: 100%;
+    min-height: unset;
+    border: 0;
+    border-radius: 0;
+
+    @include mixin.focus-ring-remove();
+
+    &:first-child {
+        border-top-left-radius: calc(var(--radius) - 1px);
+        border-bottom-left-radius: calc(var(--radius) - 1px);
+    }
+
+    &:last-child {
+        border-top-right-radius: calc(var(--radius) - 1px);
+        border-bottom-right-radius: calc(var(--radius) - 1px);
+    }
+}
+
+.formStructureElement {
+    display: flex;
+    flex-flow: column;
+}
+
+.form {
+    composes: formStructureElement;
+    gap: 42px;
+}
+
+:local(.pane) > .form {
+    display: contents;
+    gap: 0;
+}
+
+.formColumn,
+.formSection {
+    composes: formStructureElement;
+    gap: 18px;
+}
+
+.form,
+.formColumn,
+.formSection {
+    > :local(.button) {
+        align-self: flex-start;
+    }
+}
+
+.formRow {
+    display: flex;
+    flex-grow: 1;
+    gap: 12px;
+}
+
+.formSectionTitle {
+    color: var(--foreground-prominent);
+    font-size: 18px;
+    font-weight: 800;
+}
+
+.formField {
+    display: flex;
+    flex: 1 1 0;
+    flex-flow: column;
+    gap: 6px;
+}
+
+.formFieldHeader {
+    display: flex;
+    margin-bottom: 0;
+    width: 100%;
+    align-items: center;
+    align-self: flex-start;
+    gap: 6px;
+    font-size: unset;
+}
+
+.formFieldLabel {
+    min-height: 1.6em;
+    color: var(--foreground-prominent);
+    font-weight: 600;
+}
+
+.formFieldOptional {
+    color: var(--foreground-secondary);
+    font-size: .85em;
+}
+
+.formFieldValue {
+    margin-left: auto;
+    color: var(--foreground-secondary);
+    font-size: .85em;
+}
+
+.formFieldCounter {
+    margin-left: auto;
+    color: var(--foreground-secondary);
+    font-size: .85em;
+    white-space: nowrap;
+}
+
+.formFieldAddition {
+    display: flex;
+    gap: 9px;
+    font-size: 14px;
+}
+
+.formFieldAdditionIcon {
+    margin-top: 3px;
+}
+
+.formFieldAdditionError {
+    composes: formFieldAddition;
+
+    color: rgb(var(--danger-7));
+}
+
+.formFieldAdditionHint {
+    composes: formFieldAddition;
+
+    color: var(--foreground-secondary);
+}
+
+.formInput {
+    position: relative;
+    display: block;
+    height: 42px;
+    width: 100%;
+    padding: 0 12px;
+    align-self: start;
+    background: rgb(var(--gray-0));
+    background-clip: padding-box;
+    border: 1px solid rgb(var(--gray-3));
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-px);
+    color: var(--foreground);
+    transition: 180ms var(--swift-out);
+    transition-property: background, border-color, mixin.focus-ring-transition-properties();
+
+    &::placeholder {
+        color: var(--foreground-secondary);
+    }
+
+    &.isSecondary {
+        background: rgb(var(--gray-2));
+        border-color: transparent;
+        box-shadow: none;
+    }
+}
+
+.formInputDisabled {
+    composes: formInput;
+
+    background: rgb(var(--gray-2));
+    cursor: not-allowed;
+
+    input {
+        cursor: inherit;
+    }
+}
+
+.formInputEnabled {
+    composes: formInput;
+
+    @include mixin.focus-ring(-1px, true);
+
+    @include mixin.hover {
+        border-color: rgb(var(--gray-4));
+    }
+}
+
+.formInputIcon {
+    position: absolute;
+    margin-top: 11px;
+    margin-bottom: 11px;
+    color: var(--foreground-secondary);
+    pointer-events: none;
+}
+
+.formInputIconTrailing {
+    composes: formInputIcon;
+
+    right: 12px;
+}
+
+.formInputIconLeading {
+    composes: formInputIcon;
+
+    left: 12px;
+}
+
+.formInputIconPasswordToggle {
+    composes: formInputIconTrailing;
+
+    pointer-events: unset;
+    cursor: pointer;
+
+    @include mixin.hover {
+        color: var(--foreground);
+    }
+}
+
+.formInputNative {
+    position: absolute;
+    inset: 0;
+    height: 100%;
+    width: 100%;
+    padding: 0 12px;
+    background: unset;
+    border: 0;
+    border-radius: inherit;
+    color: inherit;
+    font: inherit;
+    outline: 0;
+    text-align: left;
+
+    &::placeholder {
+        color: var(--foreground-secondary);
+    }
+
+    &::-webkit-search-decoration,
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration {
+        -webkit-appearance: none;
+    }
+
+    &::-webkit-color-swatch {
+        border: 0;
+        border-radius: calc(var(--radius) / 2);
+    }
+
+    &::-webkit-color-swatch-wrapper {
+        margin: 0 -12px;
+        padding: 3px;
+        width: calc(100% + 24px);
+    }
+}
+
+.formInputNativeHasIconLeading {
+    padding-left: 42px;
+}
+
+.formInputNativeHasIconTrailing {
+    padding-right: 42px;
+}
+
+.formInputAddition {
+    composes: formInput;
+
+    display: flex;
+    width: unset;
+    align-items: center;
+    flex-grow: 0;
+    justify-content: center;
+    background: rgb(var(--gray-1));
+    color: var(--foreground-secondary);
+    pointer-events: none;
+
+    &:has(+ .formInput .formInputNative) {
+        border-right: 1px solid rgb(var(--gray-3));
+    }
+
+    + .formInputAddition {
+        border-left: 1px solid rgb(var(--gray-3));
+    }
+
+    @at-root .formInput:has(.formInputNative) + & {
+        border-left: 1px solid rgb(var(--gray-3));
+    }
+}
+
+.formInputGroup {
+    composes: formInputEnabled;
+
+    display: flex;
+    padding: 0;
+
+    @include mixin.focus-ring(-1px, true);
+
+    > :is(.formInput, .formSelect, :local(.button)) {
+        @extend %-form-input-group-inner-styles;
+
+        + :is(:local(.button), :local(.buttonGroup)) {
+            margin: 0;
+            border-left: 1px solid rgb(var(--gray-3));
+        }
+    }
+
+    > :local(.buttonGroup) > :local(.button) {
+        @extend %-form-input-group-inner-styles;
+
+        + :local(.button) {
+            margin: 0;
+            border-left: 1px solid rgb(var(--gray-3));
+        }
+    }
+
+    > :local(.buttonGroup):not(:first-child) > :local(.button):first-child {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    &.isSecondary {
+        .formInput {
+            background: transparent;
+            border-color: transparent;
+            box-shadow: none;
+        }
+
+        .formInputAddition:not(:last-child) {
+            padding-right: 0;
+        }
+
+        .secondaryButton {
+            background: transparent;
+            border-color: rgb(var(--gray-3));
+            box-shadow: none;
+
+            @include mixin.hover {
+                background: rgb(var(--gray-3));
+            }
+        }
+    }
+}
+
+.formDateInput {
+    cursor: default;
+
+    :is(input) {
+        text-align: left;
+
+        &::-webkit-input-placeholder {
+            visibility: hidden;
+        }
+
+        &::-webkit-calendar-picker-indicator {
+            display: none;
+            -webkit-appearance: none;
+        }
+    }
+}
+
+.formDateRangeInput {
+    composes: formInput;
+
+    display: flex;
+    align-items: center;
+    cursor: default;
+}
+
+.formDateTimeInput {
+    .formInput:last-child {
+        max-width: 99px;
+    }
+
+    .inputGroup {
+        flex-grow: 1;
+    }
+}
+
+.formTimeInput {
+    composes: formDateInput;
+}
+
+.formSelect {
+    composes: formInput;
+
+    position: relative;
+    display: flex;
+    height: unset;
+    min-height: 42px;
+    padding: 0 39px 0 6px;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0 6px;
+    cursor: pointer;
+
+    &:not(.isDisabled) {
+        @include mixin.focus-ring(-1px, true);
+
+        @include mixin.hover {
+            border-color: rgb(var(--gray-4));
+        }
+    }
+
+    &.isDisabled {
+        cursor: not-allowed;
+    }
+
+    &.isFocused {
+        @include mixin.focus-outline-visible(-1px);
+    }
+
+    .badge {
+        margin-top: 6px;
+        margin-bottom: 6px;
+        max-width: 100%;
+        flex: 0 0 auto;
+    }
+}
+
+.formSelectIcon {
+    position: absolute;
+    top: 50%;
+    right: 12px;
+    translate: 0 -50%;
+}
+
+.formSelectInput {
+    position: sticky;
+    top: 0;
+    height: 48px;
+    margin-bottom: 9px;
+    background: rgb(var(--gray-0));
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0;
+    outline: 0;
+    z-index: 2;
+
+    @include mixin.focus-ring-remove;
+
+    .formInputIcon {
+        margin: 15px;
+        font-size: 18px;
+    }
+
+    .formInputNative {
+        padding-left: 21px;
+        padding-right: 21px;
+    }
+}
+
+.formSelectPlaceholder {
+    margin-left: 6px;
+    margin-right: 6px;
+    color: var(--foreground-secondary);
+    user-select: none;
+}
+
+.formSelectPopup {
+    composes: basePaneStructure;
+
+    position: fixed;
+    display: block;
+    top: 0;
+    left: 0;
+    width: var(--width, auto);
+    max-height: max(330px, 50dvh);
+    min-width: 120px;
+    box-shadow: var(--shadow-md);
+    overflow: auto;
+    translate: var(--x) var(--y);
+    z-index: 10000;
+
+    .menuItem {
+        contain-intrinsic-size: #{'auto 42px'};
+        content-visibility: auto;
+    }
+
+    &.isKeyboardAction .menuItem {
+        transition: 0s;
+    }
+
+    &.isSearchable .menuSubHeader {
+        top: 48px;
+    }
+}
+
+.formSelectSelected {
+    position: absolute;
+    height: 100%;
+    padding-left: 12px;
+    padding-right: 42px;
+    inset: -1px;
+    pointer-events: none;
+
+    :local(.buttonLabel) {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+.isDisabled .formSelectIcon {
+    opacity: .5;
+}
+
+.isDisabled .formSelectSelected {
+    background: rgb(var(--gray-2));
+    border: 1px solid rgb(var(--gray-3));
+    color: var(--foreground-secondary);
+    opacity: 1;
+}
+
+.formTextArea {
+    height: unset;
+    // 18px = padding / 2px = border
+    min-height: calc(18px + 2px + var(--rows, 1) * 1lh);
+    padding-top: 9px;
+    padding-bottom: 9px;
+    flex-shrink: 0;
+    field-sizing: content;
+    resize: vertical;
+}
+
+.formTextAreaDisabled {
+    composes: formInputDisabled;
+    composes: formTextArea;
+}
+
+.formTextAreaEnabled {
+    composes: formInputEnabled;
+    composes: formTextArea;
+}
+
+.checkbox {
+    display: inline-flex;
+    flex-shrink: 0;
+    gap: 12px;
+    outline: 0;
+}
+
+.checkboxElement,
+.checkboxNative {
+    margin: 1px 0;
+    height: 22px;
+    width: 22px;
+}
+
+.checkboxElement {
+    position: relative;
+    display: inline-flex;
+    height: 22px;
+    width: 22px;
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+    background: rgb(var(--gray-3));
+    border: 0;
+    border-radius: calc(var(--radius) / 2);
+    color: rgb(var(--primary-0));
+    cursor: pointer;
+    pointer-events: none;
+    transition: 210ms var(--swift-out);
+    transition-property: background, color, mixin.focus-ring-transition-properties();
+
+    @include mixin.focus-outline;
+
+    .icon {
+        opacity: 0;
+        scale: .85;
+        transition: inherit;
+        transition-property: opacity;
+
+        :is(path) {
+            stroke: white;
+            stroke-width: 54px;
+        }
+    }
+}
+
+.checkboxLabel {
+    align-self: center;
+}
+
+.checkboxNative {
+    position: absolute;
+    opacity: 0;
+
+    @include mixin.hover {
+        + .checkboxElement {
+            background: rgb(var(--gray-4));
+        }
+    }
+
+    &:is(:checked, :indeterminate) + .checkboxElement {
+        background: rgb(var(--primary-7));
+
+        .icon {
+            opacity: 1;
+        }
+    }
+
+    &:focus-visible + .checkboxElement {
+        @include mixin.focus-outline-visible(2px);
+    }
+}
+
+.quantitySelector {
+    align-self: center;
+    justify-self: center;
+    border: 1px solid rgb(var(--gray-3));
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-px);
+    overflow: hidden;
+
+    @include mixin.focus-ring-transition(2px, true);
+
+    @include mixin.hover {
+        border-color: rgb(var(--gray-4));
+    }
+}
+
+.quantitySelectorButton {
+    margin: -1px;
+    border: 0;
+
+    &:first-child {
+        margin-right: 0;
+    }
+
+    &:last-child {
+        margin-left: 0;
+    }
+
+    &,
+    &:focus-visible,
+    &:focus-within {
+        outline: 0;
+    }
+}
+
+.quantitySelectorInput {
+    composes: formInput;
+
+    margin: -1px 0;
+    padding-left: 0;
+    padding-right: 0;
+    border-radius: 0;
+    font-variant-numeric: tabular-nums;
+    font-weight: 700;
+    text-align: center;
+
+    &:hover {
+        border-color: rgb(var(--gray-3));
+    }
+
+    &,
+    &:focus-visible,
+    &:focus-within {
+        outline: 0 !important;
+    }
+
+    & {
+        -moz-appearance: textfield;
+    }
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+}
+
+.pinInput {
+    display: grid;
+    width: min-content;
+    gap: .4ch;
+    grid-template-columns: repeat(var(--max-length, 0), 1fr);
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 24px;
+    font-weight: 700;
+}
+
+.pinInputField {
+    padding: 0;
+    width: 2.7ch;
+    background-clip: padding-box;
+    border: 1px solid rgb(var(--gray-3));
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-px);
+    font: inherit;
+    line-height: 3.3ch;
+    outline: 0;
+    text-align: center;
+    transition: 180ms var(--swift-out);
+    transition-property: border-color, mixin.focus-ring-transition-properties();
+}
+
+.pinInputEnabled {
+    composes: pinInput;
+
+    .pinInputField {
+        background-color: rgb(var(--gray-0));
+        color: var(--foreground-prominent);
+
+        @include mixin.focus-ring(-1px, true);
+    }
+}
+
+.pinInputDisabled {
+    composes: pinInput;
+
+    .pinInputField {
+        background-color: rgb(var(--gray-2));
+        color: var(--foreground-secondary);
+        cursor: not-allowed;
+    }
+}
+
+.toggle {
+    position: relative;
+    display: block;
+    width: 54px;
+    height: 30px;
+    flex: 0 0 auto;
+    background: rgb(var(--gray-2));
+    border-radius: 99px;
+    contain: paint;
+
+    &.isChecked {
+        .toggleInput::after {
+            translate: 24px 0;
+        }
+
+        &:not(.isSwitch) {
+            background: rgb(var(--primary-7));
+
+            .toggleIcon {
+                color: rgb(var(--primary-0));
+            }
+
+            .toggleInput::after {
+                border-color: transparent;
+            }
+        }
+
+        .toggleIconOn {
+            translate: calc(-50% + 24px) -50%;
+        }
+    }
+
+    &:not(.isChecked) .toggleIconOff {
+        translate: calc(-50% - 24px) -50%;
+    }
+
+    &.isDisabled {
+        cursor: not-allowed;
+        opacity: .6;
+    }
+}
+
+.toggleIcon {
+    position: absolute;
+    top: 50%;
+    color: var(--foreground-secondary);
+    pointer-events: none;
+    translate: -50% -50%;
+}
+
+.toggleIconOff {
+    composes: toggleIcon;
+
+    left: 15px;
+}
+
+.toggleIconOn {
+    composes: toggleIcon;
+
+    left: 39px;
+}
+
+.toggleInput {
+    -webkit-appearance: none;
+    appearance: none;
+
+    position: relative;
+    display: block;
+    margin: 0;
+    height: inherit;
+    width: inherit;
+    background: unset;
+    border: 0;
+    border-radius: inherit;
+    cursor: pointer;
+    outline: 0;
+
+    @include mixin.focus-ring(2px);
+
+    &::after {
+        position: absolute;
+        display: block;
+        top: 3px;
+        left: 3px;
+        height: 24px;
+        width: 24px;
+        content: '';
+        background: rgb(var(--gray-0));
+        background-clip: padding-box;
+        border: 1px solid rgb(var(--gray-3));
+        border-radius: 99px;
+        box-shadow: var(--shadow-sm);
+    }
+}
+
+.toggle,
+.toggleIcon,
+.toggleInput,
+.toggleInput::after {
+    transition: 210ms var(--swift-out);
+    transition-property: background, border-color, color, opacity, scale, translate, mixin.focus-ring-transition-properties();
+}