@broxus/react-uikit 0.10.0 → 0.12.0

package/dist/cjs/components/Accordion/Item.d.ts

@@ -1,6 +1,7 @@
 import { type CollapsePanelProps } from 'rc-collapse';
 import * as React from 'react';
-export type AccordionItemProps = React.PropsWithChildren<Omit<CollapsePanelProps, 'prefixCls'>>;
+export interface AccordionItemProps extends React.PropsWithChildren<Omit<CollapsePanelProps, 'prefixCls'>> {
+}
 /**
  * Use Accordion items props instead
  * @deprecated

package/dist/cjs/components/Alert/index.d.ts

@@ -9,7 +9,7 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
     onClose?: VoidFunction;
     onClosed?: MotionEndEventHandler;
 }
-export type AlertRef = {
+export interface AlertRef {
     close: VoidFunction;
-};
+}
 export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<AlertRef>>;

package/dist/cjs/components/Align/Align.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
 import { type Direction } from '../../types';
-export type AlignOwnProps = {
+export interface AlignOwnProps {
     direction?: Direction;
     prefixCls?: string;
     side?: 'left' | 'right';
-};
+}
 export type AlignProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<AlignOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, AlignOwnProps>;
 declare const defaultElement = "div";
 export declare function Align<E extends React.ElementType = typeof defaultElement>(props: AlignProps<E>): React.JSX.Element;

package/dist/cjs/components/Card/context.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export type CardContextConsumerProps = {
+export interface CardContextConsumerProps {
     getRootCls(): string | undefined;
-};
+}
 export declare const CardContext: React.Context<CardContextConsumerProps>;

package/dist/cjs/components/ConfigProvider/index.js

@@ -29,6 +29,8 @@ const js_utils_1 = require("@broxus/js-utils");
 const React = __importStar(require("react"));
 exports.ConfigContext = React.createContext({
     breakpoints: {
+        '2xl': 2560,
+        '3xl': 3440,
         l: 1200,
         m: 960,
         s: 640,

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

@@ -15,7 +15,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
     showArrow?: boolean;
 }
 export declare const Select: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {
-    ref?: React.Ref<BaseSelectRef> | undefined;
+    ref?: React.Ref<BaseSelectRef>;
 }) => React.ReactElement) & {
     SECRET_COMBOBOX_MODE_DO_NOT_USE: string;
     Option: typeof Option;

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

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

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

@@ -15,4 +15,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../../components/Tabs/hooks/useAnimateConfig"), exports);
-__exportStar(require("../../../components/Tabs/hooks/useLegacyItems"), exports);

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

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

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

@@ -1,16 +1,33 @@
 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 TabsPosition = 'left' | 'right' | 'top' | 'bottom';
+export interface Tab {
+    active?: boolean;
+    animated?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    closable?: boolean;
+    closeIcon?: React.ReactNode;
+    destroyInactiveTabPane?: boolean;
+    disabled?: boolean;
+    forceRender?: boolean;
+    icon?: React.ReactNode;
+    id?: string;
+    key: string;
+    label: React.ReactNode;
+    prefixCls?: string;
+    style?: React.CSSProperties;
+    tabKey?: string;
+}
 export type TabType = 'line' | 'card' | 'editable-card';
-export { type TabsPosition };
-export interface TabsProps extends Exclude<RcTabsProps, 'editable'> {
+export interface TabsProps extends Exclude<RcTabsProps, 'editable' | 'items' | 'tabPosition'> {
     addIcon?: React.ReactNode;
     centered?: boolean;
-    children?: React.ReactNode;
     hideAdd?: boolean;
+    items?: Tab[];
     size?: 'medium' | 'large';
+    tabPosition?: TabsPosition;
     type?: TabType;
     onEdit?: (event: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => void;
 }

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

@@ -37,7 +37,7 @@ const utils_1 = require("../../utils");
 require("./index.scss");
 function Tabs(props) {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { addIcon, animated, centered, children, className, direction, hideAdd, items, moreIcon = React.createElement(Icon_1.Icon, { icon: "more_horizontal" }), prefixCls = config.prefixCls, size, type, onEdit, ...restProps } = props;
+    const { addIcon, animated, centered, className, direction, hideAdd, items, more, 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'
         ? {
@@ -51,11 +51,15 @@ function Tabs(props) {
             },
         }
         : undefined), [addIcon, hideAdd, onEdit, type]);
-    return (React.createElement(rc_tabs_1.default, { animated: (0, hooks_1.useAnimateConfig)(rootCls, animated), direction: direction, items: (0, hooks_1.useLegacyItems)(items, children), moreTransitionName: (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'slide-bottom-small'), ...restProps, className: (0, classnames_1.default)({
+    return (React.createElement(rc_tabs_1.default, { animated: (0, hooks_1.useAnimateConfig)(rootCls, animated), direction: direction, items: items, ...restProps, className: (0, classnames_1.default)({
             [`${rootCls}-${size}`]: size,
             [`${rootCls}-card`]: ['card', 'editable-card'].includes(type),
             [`${rootCls}-editable-card`]: type === 'editable-card',
             [`${rootCls}-centered`]: centered,
-        }, className), editable: editable, moreIcon: moreIcon, prefixCls: rootCls }));
+        }, className), editable: editable, more: {
+            icon: React.createElement(Icon_1.Icon, { icon: "more_horizontal" }),
+            transitionName: (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'slide-bottom-small'),
+            ...more,
+        }, prefixCls: rootCls }));
 }
 exports.Tabs = Tabs;

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

@@ -47,7 +47,7 @@
 @import 'breadcrumb.scss';
 
 // @import 'pagination.scss';
-@import 'tabs';
+@import 'tabs.scss';
 @import 'dotnav.scss';
 
 // @import 'thumbnav.scss';

package/dist/cjs/styles/_import.scss

@@ -62,7 +62,7 @@
 @import 'breadcrumb.scss';
 
 // @import 'pagination.scss';
-@import 'tabs';
+@import 'tabs.scss';
 @import 'dotnav.scss';
 
 // @import 'thumbnav.scss';

package/dist/cjs/styles/variables.scss

@@ -21,11 +21,15 @@ $breakpoint-small:                                              640px !default;
 $breakpoint-medium:                                             960px !default;  // Tablet Landscape
 $breakpoint-large:                                              1200px !default; // Desktop
 $breakpoint-xlarge:                                             1600px !default; // Large Screens
+$breakpoint-2xlarge:                                            2560px !default; // Wide Screens
+$breakpoint-3xlarge:                                            3440px !default; // Ultra Wide Screens
 
 $breakpoint-xsmall-max:                                         ($breakpoint-small - 1) !default;
 $breakpoint-small-max:                                          ($breakpoint-medium - 1) !default;
 $breakpoint-medium-max:                                         ($breakpoint-large - 1) !default;
 $breakpoint-large-max:                                          ($breakpoint-xlarge - 1) !default;
+$breakpoint-xlarge-max:                                         ($breakpoint-2xlarge - 1) !default;
+$breakpoint-2xlarge-max:                                        ($breakpoint-3xlarge - 1) !default;
 
 
 // Global variables

package/dist/cjs/styles/vars.scss

@@ -14,10 +14,14 @@
     --breakpoint-medium: #{$breakpoint-medium};
     --breakpoint-large: #{$breakpoint-large};
     --breakpoint-xlarge: #{$breakpoint-xlarge};
-    --breakpoint-xsmall-max: #{$breakpoint-small - 1};
-    --breakpoint-small-max: #{$breakpoint-medium - 1};
-    --breakpoint-medium-max: #{$breakpoint-large - 1};
-    --breakpoint-large-max: #{$breakpoint-xlarge - 1};
+    --breakpoint-2xlarge: #{$breakpoint-2xlarge};
+    --breakpoint-3xlarge: #{$breakpoint-3xlarge};
+    --breakpoint-xsmall-max: #{$breakpoint-xsmall-max};
+    --breakpoint-small-max: #{$breakpoint-small-max};
+    --breakpoint-medium-max: #{$breakpoint-medium-max};
+    --breakpoint-large-max: #{$breakpoint-large-max};
+    --breakpoint-xlarge-max: #{$breakpoint-xlarge-max};
+    --breakpoint-2xlarge-max: #{$breakpoint-2xlarge-max};
 
 
     // Global variables