@broxus/react-uikit 0.18.0 → 0.19.0

package/styles/segmented.scss

@@ -0,0 +1,271 @@
+// Name:            Segmented
+// Description:     Component to create a multiple options with only one selectable
+//
+// Component:       `uk-segmented`
+//
+// Modifiers:       `uk-segmented-small`
+//                  `uk-segmented-large`
+//
+// States:          `uk-active`
+//                  `uk-first-column`
+//
+// ========================================================================
+
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use 'variables' as *;
+
+
+/* ========================================================================
+   Component: Segmented
+ ========================================================================== */
+
+.uk-segmented {
+    background-color: var(--segmented-background);
+    border-radius: var(--segmented-border-radius);
+    box-sizing: border-box;
+    display: inline-block;
+    padding: var(--segmented-padding-vertical) var(--segmented-padding-horizontal);
+    @if meta.mixin-exists('hook-segmented') {
+        @include hook-segmented;
+    }
+}
+
+.uk-segmented-group {
+    align-items: stretch;
+    border-radius: inherit;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    gap: var(--segmented-group-gutter);
+    justify-content: flex-start;
+    position: relative;
+    width: 100%;
+    @if meta.mixin-exists('hook-segmented-group') {
+        @include hook-segmented-group;
+    }
+}
+
+
+/* Items
+ ========================================================================== */
+
+.uk-segmented-item {
+    border-radius: calc(var(--segmented-border-radius) * 0.677);
+    box-sizing: border-box;
+    color: var(--segmented-item-color);
+    cursor: pointer;
+    line-height: calc(var(--segmented-item-height) - var(--segmented-padding-vertical) * 2);
+    min-height: calc(var(--segmented-item-height) - var(--segmented-padding-vertical) * 2);
+    position: relative;
+    text-align: center;
+    transform: translateZ(0);
+    transition: color var(--transition-medium-fast-duration) var(--ease-in-out);
+    @if meta.mixin-exists('hook-segmented-item') {
+        @include hook-segmented-item;
+    }
+}
+
+.uk-segmented-item::after {
+    border-radius: inherit;
+    content: '';
+    height: 100%;
+    inset-inline-start: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    transition: opacity var(--transition-medium-fast-duration);
+    width: 100%;
+    z-index: -1;
+}
+
+/* Hover state */
+.uk-segmented-item:not(.uk-segmented-item-selected, .uk-segmented-item-disabled):hover {
+    color: var(--segmented-item-hover-color);
+
+    &::after {
+        background-color: var(--segmented-item-hover-background);
+        opacity: 1;
+    }
+
+    @if meta.mixin-exists('hook-segmented-item-hover') {
+        @include hook-segmented-item-hover;
+    }
+}
+
+/* Active (onclick) state */
+.uk-segmented-item:not(.uk-segmented-item-selected, .uk-segmented-item-disabled):active {
+    color: var(--segmented-item-onclick-color);
+
+    &::after {
+        background-color: var(--segmented-item-onclick-background);
+        opacity: 1;
+    }
+
+    @if meta.mixin-exists('hook-segmented-item-onclick') {
+        @include hook-segmented-item-onclick;
+    }
+}
+
+/* Selected state (non-disabled) */
+.uk-segmented-item-selected:not(.uk-segmented-item-disabled) {
+    background-color: var(--segmented-item-selected-background);
+    color: var(--segmented-item-selected-color);
+
+    @if meta.mixin-exists('hook-segmented-item-selected') {
+        @include hook-segmented-item-selected;
+    }
+}
+
+/* Selected state (non-disabled) */
+.uk-segmented-item:not(.uk-segmented-item-disabled) [aria-checked="true"] {
+    color: var(--segmented-item-selected-color);
+    transition: color var(--transition-fast-duration) var(--ease-out) var(--transition-medium-fast-duration);
+}
+
+/* Selected state (disabled) */
+.uk-segmented-item-selected:where(.uk-segmented-item-disabled) {
+    background-color: var(--segmented-item-disabled-background);
+}
+
+/* Disabled state */
+.uk-segmented-item-disabled,
+.uk-segmented-item-disabled:hover,
+.uk-segmented-item-disabled:focus {
+    color: var(--segmented-item-disabled-color);
+    cursor: not-allowed;
+    @if meta.mixin-exists('hook-segmented-item-disabled') {
+        @include hook-segmented-item-disabled;
+    }
+}
+
+.uk-segmented-item-label {
+    box-sizing: border-box;
+    line-height: inherit;
+    min-height: inherit;
+    overflow: hidden;
+    padding: 0 var(--segmented-item-padding-horizontal);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    @if meta.mixin-exists('hook-segmented-item-label') {
+        @include hook-segmented-item-label;
+    }
+}
+
+.uk-segmented-item-input {
+    height: 0;
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    width: 0;
+}
+
+
+/* Thumb
+ ========================================================================== */
+
+.uk-segmented-thumb {
+    background-color: var(--segmented-item-selected-background);
+    border-radius: calc(var(--segmented-border-radius) * 0.677);
+    box-sizing: border-box;
+    height: 100%;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    position: absolute;
+    transition: transform var(--transition-duration) var(--ease-in-out),
+        width var(--transition-duration) var(--ease-in-out);
+    width: 0;
+    @if meta.mixin-exists('hook-segmented-thumb') {
+        @include hook-segmented-thumb;
+    }
+}
+
+.uk-segmented-thumb ~ .uk-segmented-item:not(.uk-segmented-item-selected, .uk-segmented-item-disabled)::after {
+    background-color: transparent;
+}
+
+.uk-segmented-thumb-motion-appear-active,
+.uk-segmented-thumb-motion-enter-active {
+    transition: transform var(--transition-duration) var(--ease-in-out),
+        width var(--transition-duration) var(--ease-in-out);
+    will-change: transform, width;
+}
+
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-segmented-small .uk-segmented-item {
+    line-height: calc(var(--segmented-item-small-height) - var(--segmented-padding-vertical) * 2);
+    min-height: calc(var(--segmented-item-small-height) - var(--segmented-padding-vertical) * 2);
+}
+
+.uk-segmented-medium .uk-segmented-item {
+    line-height: calc(var(--segmented-item-medium-height) - var(--segmented-padding-vertical) * 2);
+    min-height: calc(var(--segmented-item-medium-height) - var(--segmented-padding-vertical) * 2);
+}
+
+.uk-segmented-large .uk-segmented-item {
+    line-height: calc(var(--segmented-item-large-height) - var(--segmented-padding-vertical) * 2);
+    min-height: calc(var(--segmented-item-large-height) - var(--segmented-padding-vertical) * 2);
+}
+
+
+/* Vertical modifier
+ ========================================================================== */
+
+.uk-segmented-vertical .uk-segmented-group {
+    flex-direction: column;
+}
+
+.uk-segmented-vertical .uk-segmented-item {
+    text-align: left;
+    width: 100%;
+}
+
+.uk-segmented-vertical .uk-segmented-thumb {
+    height: 0;
+    transition: transform var(--transition-duration) var(--ease-in-out),
+        height var(--transition-duration) var(--ease-in-out);
+    width: 100%;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if meta.mixin-exists('hook-segmented-misc') {
+    @include hook-segmented-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --segmented-background: var(--global-default-background);
+    --segmented-padding-horizontal: var(--global-xsmall-gutter);
+    --segmented-padding-vertical: var(--global-xsmall-gutter);
+    --segmented-border-radius: var(--global-border-radius);
+    --segmented-group-gutter: var(--global-xsmall-gutter);
+    --segmented-item-height: var(--global-control-height);
+    --segmented-item-padding-horizontal: var(--global-small-gutter);
+    --segmented-item-padding-vertical: var(--global-xsmall-gutter);
+    --segmented-item-small-height: var(--global-control-small-height);
+    --segmented-item-medium-height: var(--global-control-medium-height);
+    --segmented-item-large-height: var(--global-control-large-height);
+    --segmented-item-color: var(--global-color);
+    --segmented-item-hover-background: var(--global-muted-background);
+    --segmented-item-hover-color: var(--global-color);
+    --segmented-item-onclick-background: var(--global-default-background);
+    --segmented-item-onclick-color: var(--global-color);
+    --segmented-item-selected-background: var(--global-primary-background);
+    --segmented-item-selected-color: var(--global-inverse-color);
+    --segmented-item-disabled-background: var(--global-muted-background);
+    --segmented-item-disabled-color: var(--global-muted-color);
+}

package/{dist/esm/components/Control/Select/index.scss → styles/select.scss}

@@ -11,11 +11,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../../styles/variables.scss';
+@use 'variables' as *;
 
 
 // Mixins
@@ -41,7 +43,7 @@
     padding: 0;
     position: relative;
     width: 100%;
-    @if mixin-exists(hook-select) {
+    @if meta.mixin-exists('hook-select') {
         @include hook-select;
     }
 }
@@ -53,7 +55,7 @@
     padding: 0 var(--select-selector-padding-horizontal);
     position: relative;
     width: 100%;
-    @if mixin-exists(hook-select-selector) {
+    @if meta.mixin-exists('hook-select-selector') {
         @include hook-select-selector;
     }
 }
@@ -78,7 +80,7 @@
     margin: 0;
     outline: none;
     padding: 0;
-    @if mixin-exists(hook-select-selection-search-input) {
+    @if meta.mixin-exists('hook-select-selection-search-input') {
         @include hook-select-selection-search-input;
     }
 }
@@ -117,7 +119,7 @@
     pointer-events: none;
     text-overflow: ellipsis;
     white-space: nowrap;
-    @if mixin-exists(hook-select-selection-placeholder) {
+    @if meta.mixin-exists('hook-select-selection-placeholder') {
         @include hook-select-selection-placeholder;
     }
 
@@ -144,7 +146,7 @@
 
 .uk-select-single .uk-select-selector {
     overflow: hidden;
-    @if mixin-exists(hook-select-single-selector) {
+    @if meta.mixin-exists('hook-select-single-selector') {
         @include hook-select-single-selector;
     }
 }
@@ -154,7 +156,7 @@
     display: flex;
     inset: 0 var(--select-selector-padding-horizontal) 0 var(--select-selector-padding-horizontal);
     position: absolute;
-    @if mixin-exists(hook-select-single-selection-search) {
+    @if meta.mixin-exists('hook-select-single-selection-search') {
         @include hook-select-single-selection-search;
     }
 }
@@ -163,7 +165,7 @@
     height: 100%;
     line-height: initial;
     width: 100%;
-    @if mixin-exists(hook-select-single-selection-search-input) {
+    @if meta.mixin-exists('hook-select-single-selection-search-input') {
         @include hook-select-single-selection-search-input;
     }
 }
@@ -177,7 +179,7 @@
 .uk-select-single .uk-select-selection-item {
     position: relative;
     user-select: none;
-    @if mixin-exists(hook-select-single-selection-item) {
+    @if meta.mixin-exists('hook-select-single-selection-item') {
         @include hook-select-single-selection-item;
     }
 }
@@ -185,7 +187,7 @@
 // Opacity selection if open
 .uk-select-single.uk-select-open .uk-select-selection-item {
     color: var(--select-selection-placeholder-color);
-    @if mixin-exists(hook-select-single-open-selection-item) {
+    @if meta.mixin-exists('hook-select-single-open-selection-item') {
         @include hook-select-single-open-selection-item;
     }
 }
@@ -196,7 +198,7 @@
 
 .uk-select-multiple .uk-select-selector {
     padding: var(--select-gutter) var(--select-selector-padding-horizontal);
-    @if mixin-exists(hook-select-multiple-selector) {
+    @if meta.mixin-exists('hook-select-multiple-selector') {
         @include hook-select-multiple-selector;
     }
 }
@@ -208,7 +210,7 @@
     top: 50%;
     transform: translateY(-50%);
     transition: all var(--transition-duration);
-    @if mixin-exists(hook-select-multiple-selection-placeholder) {
+    @if meta.mixin-exists('hook-select-multiple-selection-placeholder') {
         @include hook-select-multiple-selection-placeholder;
     }
 }
@@ -256,7 +258,7 @@
         line-height var(--transition-duration),
         height var(--transition-duration);
     user-select: none;
-    @if mixin-exists(hook-select-multiple-selection-item) {
+    @if meta.mixin-exists('hook-select-multiple-selection-item') {
         @include hook-select-multiple-selection-item;
     }
 }
@@ -279,7 +281,7 @@
     display: inline-flex;
     flex-wrap: wrap;
     padding-right: var(--select-gutter);
-    @if mixin-exists(hook-select-multiple-selection-item-remove) {
+    @if meta.mixin-exists('hook-select-multiple-selection-item-remove') {
         @include hook-select-multiple-selection-item-remove;
     }
 }
@@ -292,7 +294,7 @@
     display: flex;
     flex: none;
     position: relative;
-    @if mixin-exists(hook-select-multiple-selection-search) {
+    @if meta.mixin-exists('hook-select-multiple-selection-search') {
         @include hook-select-multiple-selection-search;
     }
 }
@@ -306,7 +308,7 @@
 .uk-select-multiple .uk-select-selection-search-input {
     min-width: 4.1px; // fix search cursor missing
     width: 100%;
-    @if mixin-exists(hook-select-multiple-selection-search-input) {
+    @if meta.mixin-exists('hook-select-multiple-selection-search-input') {
         @include hook-select-multiple-selection-search-input;
     }
 }
@@ -356,14 +358,14 @@
 /* Arrow */
 .uk-select-arrow {
     --icon-size: var(--select-arrow-icon-size);
-    @if mixin-exists(hook-select-arrow) {
+    @if meta.mixin-exists('hook-select-arrow') {
         @include hook-select-arrow;
     }
 }
 
 /* Clear */
 .uk-select-clear {
-    @if mixin-exists(hook-select-clear) {
+    @if meta.mixin-exists('hook-select-clear') {
         @include hook-select-clear;
     }
 }
@@ -405,7 +407,7 @@
     position: absolute;
     top: -9999px;
     z-index: calc(var(--global-z-index) + 30);
-    @if mixin-exists(hook-select-dropdown) {
+    @if meta.mixin-exists('hook-select-dropdown') {
         @include hook-select-dropdown;
     }
 }
@@ -444,7 +446,7 @@
 .uk-select-item-empty {
     color: var(--select-item-disabled-color);
     text-align: center;
-    @if mixin-exists(select-item) {
+    @if meta.mixin-exists('select-item') {
         @include select-item;
     }
 }
@@ -471,7 +473,7 @@
 .uk-select-item {
     cursor: pointer;
     transition: background var(--transition-duration) ease;
-    @if mixin-exists(select-item) {
+    @if meta.mixin-exists('select-item') {
         @include select-item;
     }
 }
@@ -555,10 +557,17 @@
 }
 
 // Hover state (unused for disabled state)
-.uk-control-select/*:not(.uk-disabled)*/:hover .uk-select {
+.uk-control-select:not(.uk-disabled):hover .uk-select {
     border-color: var(--select-hover-border);
 }
 
+// Focus state (unused for disabled state)
+.uk-control-select:not(.uk-disabled):focus .uk-select,
+.uk-control-select:not(.uk-disabled):focus-within .uk-select,
+.uk-control-select.uk-focused:not(.uk-disabled) .uk-select {
+    border-color: var(--select-focus-border);
+}
+
 // Disabled state
 .uk-control-select.uk-disabled {
     border-color: var(--select-disabled-border);
@@ -796,7 +805,7 @@
     --select-selection-item-line-height: #{$select-selection-item-line-height};
     --select-selection-item-remove-icon-size: var(--select-selection-item-font-size);
     --select-selection-item-remove-icon-hover-color: var(--global-primary-background);
-    --select-dropdown-background: #{$select-dropdown-background};
+    --select-dropdown-background: var(--global-muted-background);
     --select-dropdown-border: var(--control-border);
     --select-dropdown-border-style: var(--control-border-style);
     --select-dropdown-border-width: var(--control-border-width);
@@ -806,10 +815,10 @@
     --select-icon-disabled-color: var(--control-disabled-color);
     --select-item-color: var(--control-color);
     --select-item-line-height: #{$select-item-line-height};
-    --select-item-disabled-color: var(--control-disabled-color);
+    --select-item-active-background: var(--global-default-background);
     --select-item-selected-background: #{$select-item-selected-background};
     --select-item-selected-state-color: var(--global-primary-background);
-    --select-item-active-background: var(--global-default-background);
+    --select-item-disabled-color: var(--control-disabled-color);
     --select-item-group-color: var(--global-muted-color);
     --select-item-group-font-size: var(--global-small-font-size);
     --select-item-group-text-transform: #{$select-item-group-text-transform};

package/{dist/cjs/components/Spinner/index.scss → styles/spinner.scss}

@@ -5,11 +5,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -21,7 +23,7 @@
  */
 
 .uk-spinner {
-    @if mixin-exists(hook-spinner) {
+    @if meta.mixin-exists('hook-spinner') {
         @include hook-spinner;
     }
 }
@@ -69,7 +71,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-spinner-misc) {
+@if meta.mixin-exists('hook-spinner-misc') {
     @include hook-spinner-misc;
 }
 

package/{dist/esm/styles → styles}/sticky.scss

@@ -9,11 +9,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import 'variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -45,7 +47,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-sticky-misc) {
+@if meta.mixin-exists('hook-sticky-misc') {
     @include hook-sticky-misc;
 }
 

package/{dist/esm/components/Subnav/index.scss → styles/subnav.scss}

@@ -11,11 +11,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -43,7 +45,7 @@
 
     /* 4 */
     padding: 0;
-    @if mixin-exists(hook-subnav) {
+    @if meta.mixin-exists('hook-subnav') {
         @include hook-subnav;
     }
 }
@@ -88,7 +90,7 @@
 
     /* 1 */
     display: flex;
-    @if mixin-exists(hook-subnav-item) {
+    @if meta.mixin-exists('hook-subnav-item') {
         @include hook-subnav-item;
     }
 }
@@ -99,7 +101,7 @@
     color: var(--subnav-item-hover-color);
     outline: none;
     text-decoration: var(--subnav-item-hover-text-decoration);
-    @if mixin-exists(hook-subnav-item-hover) {
+    @if meta.mixin-exists('hook-subnav-item-hover') {
         @include hook-subnav-item-hover;
     }
 }
@@ -107,7 +109,7 @@
 /* Active */
 .uk-subnav > .uk-active > a {
     color: var(--subnav-item-active-color);
-    @if mixin-exists(hook-subnav-item-active) {
+    @if meta.mixin-exists('hook-subnav-item-active') {
         @include hook-subnav-item-active;
     }
 }
@@ -149,7 +151,7 @@
 /* 1 */
 .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
     border-left-color: var(--subnav-divider-border);
-    @if mixin-exists(hook-subnav-divider) {
+    @if meta.mixin-exists('hook-subnav-divider') {
         @include hook-subnav-divider;
     }
 }
@@ -162,7 +164,7 @@
     background: var(--subnav-pill-item-background);
     color: var(--subnav-pill-item-color);
     padding: var(--subnav-pill-item-padding-vertical) var(--subnav-pill-item-padding-horizontal);
-    @if mixin-exists(hook-subnav-pill-item) {
+    @if meta.mixin-exists('hook-subnav-pill-item') {
         @include hook-subnav-pill-item;
     }
 }
@@ -172,7 +174,7 @@
 .uk-subnav-pill > * > a:focus {
     background-color: var(--subnav-pill-item-hover-background);
     color: var(--subnav-pill-item-hover-color);
-    @if mixin-exists(hook-subnav-pill-item-hover) {
+    @if meta.mixin-exists('hook-subnav-pill-item-hover') {
         @include hook-subnav-pill-item-hover;
     }
 }
@@ -181,7 +183,7 @@
 .uk-subnav-pill > * > a:active {
     background-color: var(--subnav-pill-item-onclick-background);
     color: var(--subnav-pill-item-onclick-color);
-    @if mixin-exists(hook-subnav-pill-item-onclick) {
+    @if meta.mixin-exists('hook-subnav-pill-item-onclick') {
         @include hook-subnav-pill-item-onclick;
     }
 }
@@ -190,7 +192,7 @@
 .uk-subnav-pill > .uk-active > a {
     background-color: var(--subnav-pill-item-active-background);
     color: var(--subnav-pill-item-active-color);
-    @if mixin-exists(hook-subnav-pill-item-active) {
+    @if meta.mixin-exists('hook-subnav-pill-item-active') {
         @include hook-subnav-pill-item-active;
     }
 }
@@ -202,7 +204,7 @@
 
 .uk-subnav > .uk-disabled > a {
     color: var(--subnav-item-disabled-color);
-    @if mixin-exists(hook-subnav-item-disabled) {
+    @if meta.mixin-exists('hook-subnav-item-disabled') {
         @include hook-subnav-item-disabled;
     }
 }
@@ -211,7 +213,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-subnav-misc) {
+@if meta.mixin-exists('hook-subnav-misc') {
     @include hook-subnav-misc;
 }
 
@@ -229,8 +231,8 @@
     --subnav-divider-border-height: #{$subnav-divider-border-height};
     --subnav-divider-border-width: var(--global-border-width);
     --subnav-divider-border: var(--global-border);
-    --subnav-pill-item-padding-vertical: #{$subnav-pill-item-padding-vertical};
     --subnav-pill-item-padding-horizontal: #{$subnav-pill-item-padding-horizontal};
+    --subnav-pill-item-padding-vertical: #{$subnav-pill-item-padding-vertical};
     --subnav-pill-item-background: #{$subnav-pill-item-background};
     --subnav-pill-item-color: #{$subnav-item-color};
     --subnav-pill-item-hover-background: var(--global-muted-background);

package/{dist/esm/styles → styles}/svg.scss

@@ -5,6 +5,8 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 /* ========================================================================
    Component: SVG
@@ -39,8 +41,6 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-svg-misc) {
+@if meta.mixin-exists('hook-svg-misc') {
     @include hook-svg-misc;
 }
-
-// @mixin hook-svg-misc() {}