@broxus/react-uikit 0.3.0 → 0.4.0

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

@@ -0,0 +1,216 @@
+// Name:            Switch
+// Description:     Switch Selector
+//
+// Component:       `uk-switch`
+//
+// ========================================================================
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+/* ========================================================================
+   Component: Switch
+ ========================================================================== */
+
+.uk-switch {
+    appearance: none;
+    background: var(--switch-background);
+    border: var(--switch-border-width) var(--switch-border-style) var(--switch-border);
+    border-radius: var(--switch-border-radius);
+    box-sizing: content-box;
+    color: inherit;
+    cursor: pointer;
+    display: inline-block;
+    font: inherit;
+    height: var(--switch-height);
+    line-height: var(--switch-height);
+    margin: 0;
+    min-width: var(--switch-width);
+    padding: 0;
+    position: relative;
+    transition: all var(--transition-medium-fast-duration);
+    user-select: none;
+    vertical-align: middle;
+
+    @if mixin-exists(hook-switch) {
+        @include hook-switch;
+    }
+}
+
+.uk-switch:not(.uk-switch-disabled):hover::after {
+    visibility: visible;
+}
+
+.uk-switch-handle {
+    height: calc(var(--switch-height) - var(--switch-handle-offset) * 2);
+    inset-inline-start: var(--switch-handle-offset);
+    position: absolute;
+    top: var(--switch-handle-offset);
+    transition: all var(--transition-medium-fast-duration) var(--ease-in-out);
+    width: calc(var(--switch-height) - var(--switch-handle-offset) * 2);
+    z-index: 10;
+
+    @if mixin-exists(hook-switch-handle) {
+        @include hook-switch-handle;
+    }
+}
+
+.uk-switch-handle::before {
+    background: var(--switch-handle-background);
+    border-radius: var(--switch-handle-border-radius);
+    bottom: 0;
+    content: '';
+    inset-inline-end: 0;
+    inset-inline-start: 0;
+    position: absolute;
+    top: 0;
+    transition: all var(--transition-medium-fast-duration) var(--ease-in-out);
+}
+
+
+/* Inner
+ ========================================================================== */
+
+.uk-switch-inner {
+    border-radius: var(--switch-border-radius);
+    box-sizing: border-box;
+    display: block;
+    height: 100%;
+    overflow: hidden;
+    padding-inline-end: calc((var(--switch-height) + var(--switch-handle-offset)) / 2.6666);
+    padding-inline-start: calc(var(--switch-height) + var(--switch-handle-offset));
+    transition: padding-inline-start var(--transition-medium-fast-duration) var(--ease-in-out), padding-inline-end var(--transition-medium-fast-duration) var(--ease-in-out);
+}
+
+.uk-switch-inner-checked,
+.uk-switch-inner-unchecked {
+    display: block;
+    pointer-events: none;
+    transition: margin-inline-start var(--transition-medium-fast-duration) var(--ease-in-out), margin-inline-end var(--transition-medium-fast-duration) var(--ease-in-out);
+}
+
+.uk-switch-inner-checked {
+    margin-inline-end: calc(100% - var(--switch-height) + ((var(--switch-height) + var(--switch-handle-offset)) * 2));
+    margin-inline-start: calc(-100% + var(--switch-height) - ((var(--switch-height) + var(--switch-handle-offset)) * 2));
+}
+
+.uk-switch-inner-unchecked {
+    margin-inline-end: 0;
+    margin-inline-start: 0;
+    margin-top: calc(var(--switch-height) * -1);
+}
+
+
+/* States
+ ========================================================================== */
+
+// Active state
+.uk-switch:not(.uk-switch-disabled):active .uk-switch-handle::before {
+    inset-inline-end: -30%;
+    inset-inline-start: 0;
+}
+
+.uk-switch-checked:not(.uk-switch-disabled):active .uk-switch-handle::before {
+    inset-inline-end: 0;
+    inset-inline-start: -30%;
+}
+
+.uk-switch:not(.uk-switch-disabled, .uk-switch-checked):active .uk-switch-inner-unchecked {
+    margin-inline-end: calc(var(--switch-handle-offset) * -2);
+    margin-inline-start: calc(var(--switch-handle-offset) * 2);
+}
+
+.uk-switch-checked:not(.uk-switch-disabled):active .uk-switch-inner-checked {
+    margin-inline-end: calc(var(--switch-handle-offset) * 2);
+    margin-inline-start: calc(var(--switch-handle-offset) * -2);
+}
+
+// Checked state
+.uk-switch-checked {
+    background: var(--switch-checked-background);
+
+    @if mixin-exists(hook-switch-checked) {
+        @include hook-switch-checked;
+    }
+}
+
+.uk-switch-checked::after {
+    animation: uk-wave-effect 0.36s var(--ease-in-out);
+    animation-fill-mode: backwards;
+    border: var(--switch-border-width) solid var(--switch-checked-background);
+    border-radius: var(--switch-border-radius);
+    box-sizing: border-box;
+    content: '';
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    visibility: hidden;
+    width: 100%;
+}
+
+.uk-switch-checked .uk-switch-handle {
+    inset-inline-start: calc(100% - var(--switch-height) + var(--switch-handle-offset));
+
+    @if mixin-exists(hook-switch-checked-handle) {
+        @include hook-switch-checked-handle;
+    }
+}
+
+.uk-switch-checked .uk-switch-handle::before {
+    background: var(--switch-handle-checked-background);
+}
+
+.uk-switch-checked .uk-switch-inner {
+    padding-inline-end: calc(var(--switch-height) + var(--switch-handle-offset));
+    padding-inline-start: calc((var(--switch-height) + var(--switch-handle-offset)) / 2.6666);
+}
+
+.uk-switch-checked .uk-switch-inner-checked {
+    margin-inline-end: 0;
+    margin-inline-start: 0;
+}
+
+.uk-switch-checked .uk-switch-inner-unchecked {
+    margin-inline-end: calc(-100% + var(--switch-height) - ((var(--switch-height) + var(--switch-handle-offset)) * 2));
+    margin-inline-start: calc(100% - var(--switch-height) + ((var(--switch-height) + var(--switch-handle-offset)) * 2));
+}
+
+// Disabled
+.uk-switch-disabled {
+    cursor: not-allowed;
+    opacity: 0.65;
+
+    @if mixin-exists(hook-switch-disabled) {
+        @include hook-switch-disabled;
+    }
+}
+
+
+/* Hooks
+ ========================================================================== */
+
+@if mixin-exists(hook-switch-misc) {
+    @include hook-switch-misc;
+}
+
+
+/* Vars
+ ========================================================================== */
+
+:root {
+    --switch-background: #{$switch-background};
+    --switch-border: var(--global-border);
+    --switch-border-style: var(--global-border-style);
+    --switch-border-width: var(--global-border-width);
+    --switch-checked-background: var(--global-success-background);
+    --switch-border-radius: #{$switch-border-radius};
+    --switch-height: #{$switch-height};
+    --switch-width: #{$switch-width};
+    --switch-handle-background: var(--global-background);
+    --switch-handle-checked-background: var(--global-background);
+    --switch-handle-border-radius: #{$switch-handle-border-radius};
+    --switch-handle-offset: #{$switch-handle-offset};
+}

package/dist/esm/components/Tabs/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../components/Tabs/hooks/useAnimateConfig';
+export * from '../../../components/Tabs/hooks/useLegacyItems';

package/dist/esm/components/Tabs/hooks/index.js

@@ -0,0 +1,2 @@
+export * from '../../../components/Tabs/hooks/useAnimateConfig';
+export * from '../../../components/Tabs/hooks/useLegacyItems';

package/dist/esm/components/Tabs/hooks/useAnimateConfig.d.ts

@@ -0,0 +1,3 @@
+import { type AnimatedConfig } from 'rc-tabs/lib/interface';
+import { type TabsProps } from '../../../components/Tabs';
+export declare const useAnimateConfig: (prefixCls: string, animated?: TabsProps['animated']) => AnimatedConfig;

package/dist/esm/components/Tabs/hooks/useAnimateConfig.js

@@ -0,0 +1,37 @@
+import { getMotionName } from '../../../utils';
+const motion = {
+    motionAppear: false,
+    motionEnter: true,
+    motionLeave: true,
+};
+export const useAnimateConfig = (prefixCls, animated = {
+    inkBar: true,
+    tabPane: false,
+}) => {
+    let mergedAnimated;
+    if (animated === false) {
+        mergedAnimated = {
+            inkBar: false,
+            tabPane: false,
+        };
+    }
+    else if (animated === true) {
+        mergedAnimated = {
+            inkBar: true,
+            tabPane: true,
+        };
+    }
+    else {
+        mergedAnimated = {
+            inkBar: true,
+            ...(typeof animated === 'object' ? animated : {}),
+        };
+    }
+    if (mergedAnimated.tabPane) {
+        mergedAnimated.tabPaneMotion = {
+            ...motion,
+            motionName: getMotionName(prefixCls, 'switch'),
+        };
+    }
+    return mergedAnimated;
+};

package/dist/esm/components/Tabs/hooks/useLegacyItems.d.ts

@@ -0,0 +1,4 @@
+import { type Tab } from 'rc-tabs/lib/interface';
+import * as React from 'react';
+import { type TabsProps } from '../../../components/Tabs';
+export default function useLegacyItems(items?: TabsProps['items'], children?: React.ReactNode): Tab[];

package/dist/esm/components/Tabs/hooks/useLegacyItems.js

@@ -0,0 +1,26 @@
+import { warn } from '@broxus/js-utils';
+import toArray from 'rc-util/lib/Children/toArray';
+import * as React from 'react';
+function filter(items) {
+    return items.filter(item => item);
+}
+export default function useLegacyItems(items, children) {
+    if (items) {
+        return items;
+    }
+    warn(!children, 'Tabs', 'Tabs.TabPane is deprecated. Please use `items` directly.');
+    const childrenItems = toArray(children).map((node) => {
+        if (React.isValidElement(node)) {
+            const { key, props } = node;
+            const { tab, ...restProps } = props || {};
+            const item = {
+                key: String(key),
+                ...restProps,
+                label: tab,
+            };
+            return item;
+        }
+        return null;
+    });
+    return filter(childrenItems);
+}

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import { type TabsProps as RcTabsProps } from 'rc-tabs';
 import { type Tab, type TabPosition as TabsPosition } from 'rc-tabs/lib/interface';
+import * as React from 'react';
 import './index.scss';
 export { type Tab };
 export type TabType = 'line' | 'card' | 'editable-card';
@@ -8,9 +8,10 @@ export { type TabsPosition };
 export interface TabsProps extends Exclude<RcTabsProps, 'editable'> {
     addIcon?: React.ReactNode;
     centered?: boolean;
+    children?: React.ReactNode;
     hideAdd?: boolean;
-    size?: string;
+    size?: 'medium' | 'large';
     type?: TabType;
-    onEdit?: (e: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => void;
+    onEdit?: (event: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => void;
 }
-export declare const Tabs: React.MemoExoticComponent<(props: TabsProps) => JSX.Element>;
+export declare const Tabs: React.MemoExoticComponent<(props: TabsProps) => React.JSX.Element>;

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

@@ -1,13 +1,15 @@
-import * as React from 'react';
 import classNames from 'classnames';
 import RcTabs from 'rc-tabs';
-import { useConfig } from '../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../components/ConfigProvider';
 import { Icon } from '../../components/Icon';
+import { useAnimateConfig } from '../../components/Tabs/hooks';
 import { getMotionName } from '../../utils';
 import './index.scss';
+import useLegacyItems from '../../components/Tabs/hooks/useLegacyItems';
 export const Tabs = React.memo((props) => {
     const config = useConfig();
-    const { addIcon, centered, className, direction, hideAdd, moreIcon = React.createElement(Icon, { icon: "more_horizontal" }), prefixCls = config.prefixCls, size, type, onEdit, ...restProps } = props;
+    const { addIcon, animated, centered, children, className, direction, hideAdd, items, moreIcon = React.createElement(Icon, { icon: "more_horizontal" }), prefixCls = config.prefixCls, size, type, onEdit, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'tabs'), [config, prefixCls]);
     const editable = React.useMemo(() => (type === 'editable-card'
         ? {
@@ -21,7 +23,7 @@ export const Tabs = React.memo((props) => {
             },
         }
         : undefined), [addIcon, hideAdd, onEdit, type]);
-    return (React.createElement(RcTabs, { direction: direction, moreTransitionName: getMotionName(prefixCls || config.prefixCls, 'slide-bottom-small'), ...restProps, className: classNames({
+    return (React.createElement(RcTabs, { animated: useAnimateConfig(rootCls, animated), direction: direction, items: useLegacyItems(items, children), moreTransitionName: getMotionName(prefixCls || config.prefixCls, 'slide-bottom-small'), ...restProps, className: classNames({
             [`${rootCls}-${size}`]: size,
             [`${rootCls}-card`]: ['card', 'editable-card'].includes(type),
             [`${rootCls}-editable-card`]: type === 'editable-card',

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

@@ -116,6 +116,7 @@
 .uk-tabs-nav-add {
     background: var(--tabs-card-tab-background);
     border: var(--tabs-card-tab-border-width) var(--tabs-card-tab-border-style) var(--tabs-card-tab-border);
+    color: var(--tabs-tab-color);
     cursor: pointer;
     min-width: var(--tabs-card-height);
     outline: 0 none;
@@ -152,6 +153,7 @@
     cursor: pointer;
     display: inline-flex;
     font-size: var(--tabs-tab-font-size);
+    justify-content: space-between;
     outline: none;
     padding: var(--tabs-tab-padding-vertical) var(--tabs-tab-padding-horizontal);
     position: relative;
@@ -211,7 +213,8 @@
     font-size: var(--tabs-tab-remove-font-size);
     margin-left: var(--tabs-card-gutter);
     margin-right: calc(var(--tabs-card-gutter) * -1);
-    outline: none;
+    outline: 0 none;
+    padding: 0;
     transition: all var(--transition-duration);
 }
 
@@ -225,14 +228,6 @@
 }
 
 
-/* Tabpane
- ========================================================================== */
-
-.uk-tabs-tabpane-hidden {
-    display: none;
-}
-
-
 /* Card modifier
  ========================================================================== */
 
@@ -254,6 +249,24 @@
 }
 
 
+/* Content
+ ========================================================================== */
+
+.uk-tabs-content {
+    box-sizing: border-box;
+    position: relative;
+    width: 100%;
+}
+
+
+/* Tabpane
+ ========================================================================== */
+
+.uk-tabs-tabpane-hidden {
+    display: none;
+}
+
+
 /* Position modifier
  ========================================================================== */
 
@@ -669,6 +682,37 @@
 }
 
 
+// Motion
+// ========================================================================
+
+.uk-tabs-motion-switch {
+    &-appear,
+    &-enter {
+        transition: none;
+
+        &-start { opacity: 0; }
+
+        &-active {
+            opacity: 1;
+            transition: opacity var(--transition-duration);
+        }
+    }
+
+    &-leave {
+        inset: 0;
+        position: absolute;
+        transition: none;
+
+        &-start { opacity: 1; }
+
+        &-active {
+            opacity: 0;
+            transition: opacity var(--transition-duration);
+        }
+    }
+}
+
+
 // Hooks
 // ========================================================================
 

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

@@ -18,4 +18,4 @@ export type TextOwnProps = {
     wrap?: 'truncate' | 'break' | 'nowrap';
 };
 export type TextProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<TextOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, TextOwnProps>;
-export declare const Text: React.MemoExoticComponent<(<E extends React.ElementType<any> = "p">(props: TextProps<E>) => JSX.Element)>;
+export declare const Text: React.MemoExoticComponent<(<E extends React.ElementType<any> = "p">(props: TextProps<E>) => React.JSX.Element)>;

package/dist/esm/components/Text/index.js

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 import { Component } from '../../components/Component';
-import { useConfig } from '../../components/ConfrigProvider';
+import { useConfig } from '../../components/ConfigProvider';
 import { getBreakpointsConfigClasses } from '../../utils';
 const defaultElement = 'p';
 export const Text = React.memo((props) => {

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

@@ -8,4 +8,4 @@ export type TileOwnProps = {
     type?: 'default' | 'muted' | 'primary' | 'secondary' | 'tertiary';
 };
 export type TileProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<TileOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, TileOwnProps>;
-export declare const Tile: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: TileProps<E>) => JSX.Element)>;
+export declare const Tile: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: TileProps<E>) => React.JSX.Element)>;

package/dist/esm/components/Tile/index.js

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 import { Component } from '../../components/Component';
-import { useConfig } from '../../components/ConfrigProvider';
+import { useConfig } from '../../components/ConfigProvider';
 import './index.scss';
 const defaultElement = 'div';
 export const Tile = React.memo((props) => {

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

@@ -21,6 +21,7 @@
 
 @import '../../styles/variables.scss';
 
+
 /* ========================================================================
    Component: Tile
  ========================================================================== */
@@ -58,6 +59,7 @@
     margin-bottom: 0;
 }
 
+
 /* Size modifiers
  ========================================================================== */
 
@@ -113,6 +115,7 @@
     }
 }
 
+
 /* Style modifiers
  ========================================================================== */
 
@@ -240,6 +243,7 @@
     }
 }
 
+
 // Hooks
 // ========================================================================
 
@@ -247,6 +251,7 @@
     @include hook-tile-misc;
 }
 
+
 // Vars
 // ========================================================================
 

package/dist/esm/components/Width/Width.d.ts

@@ -6,4 +6,4 @@ export interface WidthOwnProps extends WidthBreakpointsConfig {
     size?: WidthSize;
 }
 export type WidthProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<WidthOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, WidthOwnProps>;
-export declare const Width: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: WidthProps<E>) => JSX.Element)>;
+export declare const Width: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: WidthProps<E>) => React.JSX.Element)>;

package/dist/esm/components/Width/Width.js

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 import { Component } from '../../components/Component';
-import { useConfig } from '../../components/ConfrigProvider';
+import { useConfig } from '../../components/ConfigProvider';
 import { getWidthClassname } from '../../components/Width/utils';
 const defaultElement = 'div';
 export const Width = React.memo((props) => {

package/dist/esm/components/Width/types.d.ts

@@ -1,6 +1,5 @@
 import { type BreakpointsConfig } from '../../types';
 export type WidthSize = 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge' | 'auto' | 'expand' | '1-1' | '1-2' | '1-3' | '1-4' | '1-5' | '1-6' | '2-3' | '2-5' | '3-4' | '3-5' | '4-5' | '5-6';
-export type BreakpointsWidthSize = Exclude<WidthSize, 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'>;
-export type WidthBreakpointsConfig = BreakpointsConfig<BreakpointsWidthSize>;
+export type WidthBreakpointsConfig = BreakpointsConfig<WidthSize>;
 export type ChildWidthSize = 1 | 2 | 3 | 4 | 5 | 6 | 'auto' | 'expand';
 export type ChildWidthBreakpointsConfig = BreakpointsConfig<ChildWidthSize>;

package/dist/esm/components/Width/utils.d.ts

@@ -1,5 +1,3 @@
-import { type ChildWidthBreakpointsConfig, type ChildWidthSize, type WidthBreakpointsConfig, type WidthSize } from '../../components/Width/types';
-export declare function getWidthClassname(value: WidthSize, prefixCls?: string): string;
-export declare function getWidthClassname(config: WidthBreakpointsConfig, prefixCl?: string): string;
-export declare function getChildWidthClassname(value: ChildWidthSize, prefixCls?: string): string;
-export declare function getChildWidthClassname(config: ChildWidthBreakpointsConfig, prefixCls?: string): string[];
+import { type ChildWidthBreakpointsConfig, type ChildWidthSize, type WidthBreakpointsConfig, type WidthSize } from '../../components/Width';
+export declare function getWidthClassname(valueOrConfig: WidthSize | WidthBreakpointsConfig, prefixCls?: string): string | undefined;
+export declare function getChildWidthClassname(valueOrConfig: ChildWidthSize | ChildWidthBreakpointsConfig | undefined, prefixCls?: string): string | undefined;

package/dist/esm/components/Width/utils.js

@@ -16,7 +16,9 @@ export function getChildWidthClassname(valueOrConfig, prefixCls = 'uk') {
         return `${prefixCls}-child-width-1-${valueOrConfig}`;
     }
     if (typeof valueOrConfig === 'object' && !Array.isArray(valueOrConfig)) {
-        return Object.entries(valueOrConfig).map(([key, value]) => `${getChildWidthClassname(value)}${key !== 'default' ? `@${key}` : ''}`);
+        return Object.entries(valueOrConfig)
+            .map(([key, value]) => `${getChildWidthClassname(value)}${key !== 'default' ? `@${key}` : ''}`)
+            .join(' ');
     }
     return undefined;
 }

package/dist/esm/index.d.ts

@@ -8,6 +8,7 @@ export * from './components/Form';
 export * from './components/Control';
 export * from './components/Button';
 export * from './components/Progress';
+export * from './components/Switch';
 export * from './components/Close';
 export * from './components/Spinner';
 export * from './components/Alert';
@@ -32,7 +33,7 @@ export * from './components/Modal';
 export * from './components/Drawer';
 export * from './components/Component';
 export * from './components/ComponentProvider';
-export * from './components/ConfrigProvider';
+export * from './components/ConfigProvider';
 export * from './components/Width';
 export * from './components/Text';
 export * from './components/Cover';

package/dist/esm/index.js

@@ -8,6 +8,7 @@ export * from './components/Form';
 export * from './components/Control';
 export * from './components/Button';
 export * from './components/Progress';
+export * from './components/Switch';
 export * from './components/Close';
 export * from './components/Spinner';
 export * from './components/Alert';
@@ -32,7 +33,7 @@ export * from './components/Modal';
 export * from './components/Drawer';
 export * from './components/Component';
 export * from './components/ComponentProvider';
-export * from './components/ConfrigProvider';
+export * from './components/ConfigProvider';
 export * from './components/Width';
 export * from './components/Text';
 export * from './components/Cover';