@broxus/react-uikit 0.5.5 → 0.6.1

package/dist/cjs/types.d.ts

@@ -1,9 +1,15 @@
 export type BreakpointsConfig<T> = {
+    /** Default value. Will be used for all sizes by default */
     default?: T;
+    /** Extra small size: Phone portrait: 480px by default */
     xs?: T;
+    /** Small size: Phone landscape: 640px by default */
     s?: T;
+    /** Medium size: Tablet Landscape: 960px by default */
     m?: T;
+    /** Large size: Desktop: 1200px by default */
     l?: T;
+    /** Extra large size: Large screens: 1600px by default */
     xl?: T;
 };
 export type HeadingSize = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/dist/esm/components/Button/index.scss

@@ -418,77 +418,92 @@
 }
 
 .uk-button-default.uk-button-ghost {
+    background-color: transparent;
     border-color: var(--button-ghost-default-border);
     color: var(--button-ghost-default-color);
 }
 
 .uk-button-default.uk-button-ghost:hover,
 .uk-button-default.uk-button-ghost:focus {
+    background-color: transparent;
     border-color: var(--button-ghost-default-hover-border);
 }
 
 .uk-button-default.uk-button-ghost:active,
 .uk-button-default.uk-button-ghost.active {
+    background-color: transparent;
     border-color: var(--button-ghost-default-active-border);
 }
 
 .uk-button-primary.uk-button-ghost {
+    background-color: transparent;
     border-color: var(--button-ghost-primary-border);
     color: var(--button-ghost-primary-color);
 }
 
 .uk-button-primary.uk-button-ghost:hover,
 .uk-button-primary.uk-button-ghost:focus {
+    background-color: transparent;
     border-color: var(--button-ghost-primary-hover-border);
 }
 
 .uk-button-primary.uk-button-ghost:active,
 .uk-button-primary.uk-button-ghost.active {
+    background-color: transparent;
     border-color: var(--button-ghost-primary-active-border);
 }
 
 .uk-button-secondary.uk-button-ghost {
+    background-color: transparent;
     border-color: var(--button-ghost-secondary-border);
     color: var(--button-ghost-secondary-color);
 }
 
 .uk-button-secondary.uk-button-ghost:hover,
 .uk-button-secondary.uk-button-ghost:focus {
+    background-color: transparent;
     border-color: var(--button-ghost-secondary-hover-border);
 }
 
 .uk-button-secondary.uk-button-ghost:active,
 .uk-button-secondary.uk-button-ghost.active {
+    background-color: transparent;
     border-color: var(--button-ghost-secondary-active-border);
 }
 
 .uk-button-tertiary.uk-button-ghost {
+    background-color: transparent;
     border-color: var(--button-ghost-tertiary-border);
     color: var(--button-ghost-tertiary-color);
 }
 
 .uk-button-tertiary.uk-button-ghost:hover,
 .uk-button-tertiary.uk-button-ghost:focus {
+    background-color: transparent;
     border-color: var(--button-ghost-tertiary-hover-border);
 }
 
 .uk-button-tertiary.uk-button-ghost:active,
 .uk-button-tertiary.uk-button-ghost.active {
+    background-color: transparent;
     border-color: var(--button-ghost-tertiary-active-border);
 }
 
 .uk-button-danger.uk-button-ghost {
+    background-color: transparent;
     border-color: var(--button-ghost-danger-border);
     color: var(--button-ghost-danger-color);
 }
 
 .uk-button-danger.uk-button-ghost:hover,
 .uk-button-danger.uk-button-ghost:focus {
+    background-color: transparent;
     border-color: var(--button-ghost-danger-hover-border);
 }
 
 .uk-button-danger.uk-button-ghost:active,
 .uk-button-danger.uk-button-ghost.active {
+    background-color: transparent;
     border-color: var(--button-ghost-danger-active-border);
 }
 

package/dist/esm/components/ConfigProvider/index.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
+import { type ButtonProps } from '../../components/Button';
 import { type BreakpointsConfig, type TooltipOptions } from '../../types';
-import { ButtonProps } from "../../components/Button";
 export type ColorMode = 'light' | 'dark';
-export type ConfigContextConsumerProps = {
-    breakpoints?: Exclude<BreakpointsConfig<number>, 'default'>;
+export type ConfigContextConsumedProps = {
+    breakpoints: Exclude<BreakpointsConfig<number>, 'default'>;
     buttonShape?: ButtonProps['shape'];
     buttonSize?: ButtonProps['size'];
     cardPrimaryColorMode?: ColorMode;
@@ -24,7 +24,7 @@ export type ConfigContextConsumerProps = {
     tileSecondaryColorMode?: ColorMode;
     tileTertiaryColorMode?: ColorMode;
 };
-export type ConfigContextProviderProps = React.PropsWithChildren<ConfigContextConsumerProps>;
-export declare const ConfigContext: React.Context<ConfigContextConsumerProps>;
-export declare function useConfig(): ConfigContextConsumerProps;
+export type ConfigContextProviderProps = React.PropsWithChildren<ConfigContextConsumedProps>;
+export declare const ConfigContext: React.Context<ConfigContextConsumedProps>;
+export declare function useConfig(): ConfigContextConsumedProps;
 export declare function ConfigContextProvider(props: Partial<ConfigContextProviderProps>): React.JSX.Element;

package/dist/esm/components/Control/Select/index.d.ts

@@ -5,13 +5,14 @@ import * as React from 'react';
 import { type ControlProps, type SizeType } from '../../../components/Control/types';
 import './index.scss';
 export type { BaseSelectRef, OptionProps };
-export interface InternalSelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<RcSelectProps<ValueType, OptionType>, 'mode'> {
+export interface InternalSelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<RcSelectProps<ValueType, OptionType>, 'allowClear' | 'mode'> {
     mode?: 'multiple' | 'tags' | 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
     size?: SizeType;
     suffixIcon?: React.ReactNode;
 }
 export interface SelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<ControlProps<ValueType>, 'value' | 'defaultValue'>, Omit<InternalSelectProps<ValueType, OptionType>, 'inputIcon' | 'mode' | 'getInputElement' | 'backfill'> {
     mode?: 'multiple' | 'tags';
+    showArrow?: boolean;
 }
 export declare const Select: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {
     ref?: React.Ref<BaseSelectRef> | undefined;

package/dist/esm/components/Tabs/index.scss

@@ -1,4 +1,4 @@
-// Name:            Tab
+// Name:            Tabs
 // Description:     Component to create a tabbed navigation
 //
 // Component:       `uk-tabs`

package/dist/esm/styles/_import.components.scss

@@ -10,7 +10,7 @@
 @import 'list.scss';
 @import 'description-list.scss';
 
-// @import '../components/Table/index.scss';
+// @import 'table.scss';
 @import 'icon.scss';
 @import 'form.scss'; // After: Icon
 @import 'control.scss'; // After: Icon
@@ -61,4 +61,3 @@
 @import 'drawer.scss';
 
 // @import 'sticky.scss';
-// @import '../components/Switcher/index.scss';

package/dist/esm/styles/_import.scss

@@ -47,7 +47,6 @@
 @import 'drawer.scss';
 
 // @import 'sticky.scss';
-// @import 'switcher.scss';
 // @import 'leader.scss';
 @import 'tooltip.scss';
 

package/dist/esm/styles/mixins.scss

@@ -2073,60 +2073,6 @@
 
 @mixin hook-switcher-misc() {}
 
-@mixin hook-tab() {}
-@mixin hook-tab-item() {}
-@mixin hook-tab-item-hover() {}
-@mixin hook-tab-item-active() {}
-@mixin hook-tab-item-disabled() {}
-@mixin hook-tab-bottom() {}
-@mixin hook-tab-bottom-item() {}
-@mixin hook-tab-left() {}
-@mixin hook-tab-left-item() {}
-@mixin hook-tab-right() {}
-@mixin hook-tab-right-item() {}
-@mixin hook-tab-misc() {}
-@mixin hook-inverse-tab() {}
-@mixin hook-inverse-tab-item() {}
-@mixin hook-inverse-tab-item-hover() {}
-@mixin hook-inverse-tab-item-active() {}
-@mixin hook-inverse-tab-item-disabled() {}
-@mixin hook-inverse-component-tab() {
-    .uk-tab {
-        @if mixin-exists(hook-inverse-tab) {
-            @include hook-inverse-tab;
-        }
-    }
-
-    .uk-tab > * > a {
-        color: var(--inverse-tab-item-color);
-        @if mixin-exists(hook-inverse-tab-item) {
-            @include hook-inverse-tab-item;
-        }
-    }
-
-    .uk-tab > * > a:hover {
-        color: var(--inverse-tab-item-hover-color);
-        @if mixin-exists(hook-inverse-tab-item-hover) {
-            @include hook-inverse-tab-item-hover;
-        }
-    }
-
-    .uk-tab > .uk-active > a {
-        color: var(--inverse-tab-item-active-color);
-        @if mixin-exists(hook-inverse-tab-item-active) {
-            @include hook-inverse-tab-item-active;
-        }
-    }
-
-    .uk-tab > .uk-disabled > a {
-        color: var(--inverse-tab-item-disabled-color);
-        @if mixin-exists(hook-inverse-tab-item-disabled) {
-            @include hook-inverse-tab-item-disabled;
-        }
-    }
-
-}
-
 @mixin hook-tabs() {}
 @mixin hook-tabs-tab() {}
 @mixin hook-tabs-tab-hover() {}
@@ -2408,7 +2354,6 @@
     @include hook-inverse-component-breadcrumb;
 
     @include hook-inverse-component-pagination;
-    @include hook-inverse-component-tab;
     @include hook-inverse-component-tabs;
     @include hook-inverse-component-table;
 

package/dist/esm/styles/variables.scss

@@ -1602,25 +1602,6 @@ $switch-handle-border-radius:                                   100px !default;
 $switch-handle-offset:                                          2px !default;
 
 
-// Tab
-// ========================================================================
-
-$tab-margin-horizontal:                                         20px !default;
-$tab-item-padding-horizontal:                                   10px !default;
-$tab-item-padding-vertical:                                     5px !default;
-$tab-item-color:                                                $global-muted-color !default;
-$tab-item-hover-color:                                          $global-color !default;
-$tab-item-hover-text-decoration:                                none !default;
-$tab-item-active-color:                                         $global-primary-background !default;
-$tab-item-disabled-color:                                       $global-muted-color !default;
-
-// Inverse
-$inverse-tab-item-color:                                        $inverse-global-muted-color !default;
-$inverse-tab-item-hover-color:                                  $inverse-global-color !default;
-$inverse-tab-item-active-color:                                 $inverse-global-emphasis-color !default;
-$inverse-tab-item-disabled-color:                               $inverse-global-muted-color !default;
-
-
 // Tabs
 // ========================================================================