@flux-ui/components 3.0.0 → 3.1.0

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

@@ -288,6 +288,63 @@
     padding-right: 42px;
 }
 
+.formNumberInputNative {
+    composes: formInputNative;
+
+    padding-right: 38px;
+    appearance: textfield;
+    -moz-appearance: textfield;
+    font-variant-numeric: tabular-nums;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+        margin: 0;
+        -webkit-appearance: none;
+    }
+}
+
+.formNumberInputButtons {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    width: 33px;
+    border-left: 1px solid var(--surface-stroke);
+    border-radius: 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0;
+    overflow: hidden;
+}
+
+.formNumberInputButton {
+    display: flex;
+    flex: 1 1 0;
+    margin: 0;
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+    background: var(--surface);
+    border: 0;
+    color: var(--foreground-secondary);
+    cursor: pointer;
+    transition: var(--transition-default);
+    transition-property: background, color;
+
+    & + & {
+        border-top: 1px solid var(--surface-stroke);
+    }
+
+    @include mixin.hover {
+        background: var(--surface-hover);
+        color: var(--foreground);
+    }
+
+    &:disabled {
+        color: var(--surface-stroke);
+        cursor: not-allowed;
+    }
+}
+
 .formInputAddition {
     composes: formInput;
 
@@ -584,23 +641,37 @@
     composes: formTextArea;
 }
 
-.checkbox {
+.formCheckboxGroup {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+
+    &.isInline {
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 8px 20px;
+    }
+}
+
+.formCheckbox {
     display: inline-flex;
     flex-shrink: 0;
+    align-items: flex-start;
     gap: 12px;
-    line-height: 20px;
+    line-height: 21px;
     outline: 0;
 
     &.isDisabled {
         cursor: not-allowed;
 
-        .checkboxElement {
+        .formCheckboxElement {
             background: var(--surface-disabled);
             border-color: var(--surface-stroke);
             color: var(--foreground-secondary);
         }
 
-        .checkboxLabel {
+        .formCheckboxLabel {
             color: var(--foreground-secondary);
         }
     }
@@ -608,30 +679,31 @@
     &.isReadonly {
         cursor: default;
 
-        .checkboxNative {
+        .formCheckboxNative {
             pointer-events: none;
         }
     }
 
-    &.isInvalid .checkboxElement {
+    &.isInvalid .formCheckboxElement {
         border-color: var(--danger-500);
     }
 }
 
-.checkboxElement,
-.checkboxNative {
+.formCheckboxElement,
+.formCheckboxNative {
     margin: 1px 0 0;
     height: 20px;
     width: 20px;
 }
 
-.checkboxElement {
+.formCheckboxElement {
     position: relative;
     display: inline-flex;
     height: 20px;
     width: 20px;
     padding: 0;
     align-items: center;
+    flex-shrink: 0;
     justify-content: center;
     background: var(--gray-50);
     border: 1px solid var(--gray-200);
@@ -657,22 +729,34 @@
     }
 }
 
-.checkboxLabel {
-    align-self: center;
+.formCheckboxText {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: 3px;
 }
 
-.checkboxNative {
+.formCheckboxLabel {
+    line-height: 21px;
+}
+
+.formCheckboxSubLabel {
+    color: var(--foreground-secondary);
+    font-size: 14px;
+}
+
+.formCheckboxNative {
     position: absolute;
     cursor: pointer;
     opacity: 0;
 
     @include mixin.hover {
-        + .checkboxElement {
+        + .formCheckboxElement {
             background: var(--gray-100);
         }
     }
 
-    &:is(:checked, :indeterminate) + .checkboxElement {
+    &:is(:checked, :indeterminate) + .formCheckboxElement {
         background: var(--primary-600);
         border-color: var(--primary-600);
 
@@ -681,7 +765,7 @@
         }
     }
 
-    &:focus-visible + .checkboxElement {
+    &:focus-visible + .formCheckboxElement {
         @include mixin.focus-outline-visible(2px);
     }
 
@@ -689,14 +773,136 @@
         cursor: not-allowed;
     }
 
-    &:disabled + .checkboxElement {
+    &:disabled + .formCheckboxElement {
         background: var(--gray-100);
         border-color: var(--gray-200);
         color: var(--foreground-secondary);
     }
 }
 
-.quantitySelector {
+.formRadioGroup {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+
+    &.isInline {
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 9px 21px;
+    }
+}
+
+.formRadio {
+    display: inline-flex;
+    flex-shrink: 0;
+    gap: 12px;
+    line-height: 21px;
+    outline: 0;
+    cursor: pointer;
+
+    &.isDisabled {
+        cursor: not-allowed;
+
+        .formRadioElement {
+            background: var(--surface-disabled);
+            border-color: var(--surface-stroke);
+        }
+
+        .formRadioLabel {
+            color: var(--foreground-secondary);
+        }
+    }
+
+    &.isReadonly {
+        cursor: default;
+
+        .formRadioNative {
+            pointer-events: none;
+        }
+    }
+
+    &.isInvalid .formRadioElement {
+        border-color: var(--danger-500);
+    }
+}
+
+.formRadioElement,
+.formRadioNative {
+    margin: 1px 0 0;
+    height: 20px;
+    width: 20px;
+}
+
+.formRadioElement {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    height: 20px;
+    width: 20px;
+    align-items: center;
+    justify-content: center;
+    background: var(--gray-50);
+    border: 1px solid var(--gray-200);
+    border-radius: 50%;
+    cursor: pointer;
+    pointer-events: none;
+    transition: 210ms var(--swift-out);
+    transition-property: background, border-color, mixin.focus-ring-transition-properties();
+
+    @include mixin.focus-outline;
+
+    &::after {
+        content: '';
+        height: 8px;
+        width: 8px;
+        background: var(--primary-25);
+        border-radius: 50%;
+        scale: 0;
+        transition: inherit;
+        transition-property: scale;
+    }
+}
+
+.formRadioLabel {
+    align-self: center;
+}
+
+.formRadioNative {
+    position: absolute;
+    cursor: pointer;
+    opacity: 0;
+
+    @include mixin.hover {
+        + .formRadioElement {
+            background: var(--gray-100);
+        }
+    }
+
+    &:checked + .formRadioElement {
+        background: var(--primary-600);
+        border-color: var(--primary-600);
+
+        &::after {
+            scale: 1;
+        }
+    }
+
+    &:focus-visible + .formRadioElement {
+        @include mixin.focus-outline-visible(2px);
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+    }
+
+    &:disabled + .formRadioElement {
+        background: var(--gray-100);
+        border-color: var(--gray-200);
+    }
+}
+
+.formQuantitySelector {
     min-width: max-content;
     align-self: center;
     justify-self: center;
@@ -714,7 +920,7 @@
     }
 }
 
-.quantitySelectorButton {
+.formQuantitySelectorButton {
     margin: -1px;
     border: 0;
 
@@ -733,7 +939,7 @@
     }
 }
 
-.quantitySelectorInput {
+.formQuantitySelectorInput {
     composes: formInput;
 
     margin: -1px 0;
@@ -765,7 +971,7 @@
     }
 }
 
-.pinInput {
+.formPinInput {
     display: grid;
     width: min-content;
     gap: .4ch;
@@ -777,7 +983,7 @@
     font-weight: 700;
 }
 
-.pinInputField {
+.formPinInputField {
     padding: 0;
     width: 2.7ch;
     border: 1px solid var(--surface-stroke);
@@ -791,10 +997,10 @@
     transition-property: border-color, mixin.focus-ring-transition-properties();
 }
 
-.pinInputEnabled {
-    composes: pinInput;
+.formPinInputEnabled {
+    composes: formPinInput;
 
-    .pinInputField {
+    .formPinInputField {
         background-color: var(--surface);
         color: var(--foreground-prominent);
 
@@ -802,17 +1008,17 @@
     }
 }
 
-.pinInputDisabled {
-    composes: pinInput;
+.formPinInputDisabled {
+    composes: formPinInput;
 
-    .pinInputField {
+    .formPinInputField {
         background-color: var(--surface-disabled);
         color: var(--foreground-secondary);
         cursor: not-allowed;
     }
 }
 
-.toggle {
+.formToggle {
     position: relative;
     display: block;
     width: 54px;
@@ -825,35 +1031,35 @@
 
     @include mixin.focus-outline;
 
-    &:has(.toggleInput:focus-visible) {
+    &:has(.formToggleInput:focus-visible) {
         @include mixin.focus-outline-visible(2px);
     }
 
     &.isChecked {
         border-color: transparent;
 
-        .toggleInput::after {
+        .formToggleInput::after {
             translate: 24px 0;
         }
 
         &:not(.isSwitch) {
             background: var(--primary-600);
 
-            .toggleIcon {
+            .formToggleIcon {
                 color: var(--primary-25);
             }
 
-            .toggleInput::after {
+            .formToggleInput::after {
                 border-color: transparent;
             }
         }
 
-        .toggleIconOn {
+        .formToggleIconOn {
             translate: calc(-50% + 24px) -50%;
         }
     }
 
-    &:not(.isChecked) .toggleIconOff {
+    &:not(.isChecked) .formToggleIconOff {
         translate: calc(-50% - 24px) -50%;
     }
 
@@ -862,7 +1068,7 @@
         opacity: .6;
     }
 
-    &.isReadonly .toggleInput {
+    &.isReadonly .formToggleInput {
         pointer-events: none;
     }
 
@@ -871,7 +1077,7 @@
     }
 }
 
-.toggleIcon {
+.formToggleIcon {
     position: absolute;
     top: 50%;
     color: var(--foreground-secondary);
@@ -879,19 +1085,19 @@
     translate: -50% -50%;
 }
 
-.toggleIconOff {
-    composes: toggleIcon;
+.formToggleIconOff {
+    composes: formToggleIcon;
 
     left: 15px;
 }
 
-.toggleIconOn {
-    composes: toggleIcon;
+.formToggleIconOn {
+    composes: formToggleIcon;
 
     left: 39px;
 }
 
-.toggleInput {
+.formToggleInput {
     -webkit-appearance: none;
     appearance: none;
 
@@ -921,10 +1127,10 @@
     }
 }
 
-.toggle,
-.toggleIcon,
-.toggleInput,
-.toggleInput::after {
+.formToggle,
+.formToggleIcon,
+.formToggleInput,
+.formToggleInput::after {
     transition: 210ms var(--swift-out);
     transition-property: background, border-color, color, opacity, scale, translate, mixin.focus-ring-transition-properties();
 }

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

@@ -8,24 +8,6 @@
     background: var(--gray-50);
     border: 1px solid var(--surface-stroke);
     border-radius: var(--radius);
-
-    &.isSmall {
-        height: 30px;
-        padding: 0 12px;
-        gap: 9px;
-    }
-
-    &.isMedium {
-        height: 36px;
-        padding: 0 15px;
-        gap: 9px;
-    }
-
-    &.isLarge {
-        height: 48px;
-        padding: 0 21px;
-        gap: 12px;
-    }
 }
 
 .segmentedControlFill {
@@ -81,6 +63,24 @@
         cursor: default;
     }
 
+    &.isSmall {
+        height: 30px;
+        padding: 0 12px;
+        gap: 9px;
+    }
+
+    &.isMedium {
+        height: 36px;
+        padding: 0 15px;
+        gap: 9px;
+    }
+
+    &.isLarge {
+        height: 48px;
+        padding: 0 21px;
+        gap: 12px;
+    }
+
     &:disabled {
         opacity: .5;
         pointer-events: none;

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

@@ -0,0 +1,67 @@
+@use '~flux/components/css/mixin';
+
+.skeleton {
+    position: relative;
+    display: block;
+    height: 1em;
+    width: 100%;
+    background: var(--gray-100);
+    border-radius: var(--radius);
+    overflow: hidden;
+
+    &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent 0%, var(--surface) 50%, transparent 100%);
+        translate: -100% 0;
+        animation: skeleton-shimmer 1.6s ease-in-out infinite;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        animation: skeleton-pulse 1.6s ease-in-out infinite;
+
+        &::after {
+            display: none;
+        }
+    }
+}
+
+.isText {
+    height: 1em;
+    border-radius: var(--radius-half);
+    vertical-align: middle;
+}
+
+.isCircle {
+    height: 40px;
+    width: 40px;
+    flex-shrink: 0;
+    border-radius: 50%;
+}
+
+.isRectangle {
+    height: 120px;
+    border-radius: 0;
+}
+
+.isRounded {
+    height: 120px;
+    border-radius: calc(var(--radius) * 2);
+}
+
+@keyframes skeleton-shimmer {
+    from {
+        translate: -100% 0;
+    }
+
+    to {
+        translate: 100% 0;
+    }
+}
+
+@keyframes skeleton-pulse {
+    50% {
+        opacity: .5;
+    }
+}

package/src/data/di.ts

@@ -9,7 +9,9 @@ export const FluxKanbanInjectionKey: InjectionKey<FluxKanbanInjection> = Symbol(
 export const FluxExpandableGroupInjectionKey: InjectionKey<FluxExpandableGroupInjection> = Symbol();
 export const FluxFlyoutInjectionKey: InjectionKey<FluxFlyoutInjection> = Symbol();
 export const FluxFilterInjectionKey: InjectionKey<FluxFilterInjection> = Symbol();
+export const FluxFormCheckboxGroupInjectionKey: InjectionKey<FluxFormCheckboxGroupInjection> = Symbol();
 export const FluxFormFieldInjectionKey: InjectionKey<FluxFormFieldInjection> = Symbol();
+export const FluxFormRadioGroupInjectionKey: InjectionKey<FluxFormRadioGroupInjection> = Symbol();
 export const FluxSegmentedControlInjectionKey: InjectionKey<FluxSegmentedControlInjection> = Symbol();
 export const FluxSplitViewInjectionKey: InjectionKey<FluxSplitViewInjection> = Symbol();
 export const FluxTabBarInjectionKey: InjectionKey<FluxTabBarInjection> = Symbol();
@@ -150,6 +152,22 @@ export type FluxFlyoutInjection = {
 
 export type FluxFormFieldInjection = {
     readonly id?: string;
+    readonly labelId?: string;
+    readonly isGroup?: boolean;
+
+    registerControl?(): string;
+};
+
+export type FluxFormCheckboxGroupValue = string | number | boolean;
+
+export type FluxFormCheckboxGroupInjection = {
+    readonly modelValue: Ref<FluxFormCheckboxGroupValue[]>;
+    readonly disabled: Ref<boolean>;
+    readonly isReadonly: Ref<boolean>;
+    readonly error: Ref<string | null | undefined>;
+
+    has(value: FluxFormCheckboxGroupValue): boolean;
+    toggle(value: FluxFormCheckboxGroupValue): void;
 };
 
 export type FluxSplitViewPaneSpec = {
@@ -169,6 +187,18 @@ export type FluxSplitViewInjection = {
     getPaneIndex(id: number): number;
 };
 
+export type FluxFormRadioGroupValue = string | number | boolean;
+
+export type FluxFormRadioGroupInjection = {
+    readonly name: string;
+    readonly modelValue: Ref<FluxFormRadioGroupValue | undefined>;
+    readonly disabled: Ref<boolean>;
+    readonly isReadonly: Ref<boolean>;
+    readonly error: Ref<string | null | undefined>;
+
+    select(value: FluxFormRadioGroupValue): void;
+};
+
 export type FluxSegmentedControlValue = string | number;
 
 export type FluxSegmentedControlInjection = {