@broxus/react-uikit 0.9.2 → 0.11.0

package/dist/esm/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/esm/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/esm/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/esm/components/Article/context.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 export const ArticleContext = React.createContext({
     getRootCls() {

package/dist/esm/components/Card/Card.js

@@ -7,7 +7,7 @@ import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
 export function Card(props) {
     const config = useConfig();
-    const { asBody, className, kind, colorMode = kind !== 'default' && kind !== undefined
+    const { asBody, className, kind, colorMode = kind && kind !== 'default'
         // @ts-ignore
         ? config[`card${capitalizeFirstLetter(kind)}ColorMode`]
         : undefined, hoverable, prefixCls = config.prefixCls, size, ...restProps } = props;
@@ -19,11 +19,11 @@ export function Card(props) {
     }), [rootCls]);
     return (React.createElement(CardContext.Provider, { value: context },
         React.createElement(Component, { className: classNames(rootCls, {
-                [`${rootCls}-${kind}`]: kind !== undefined,
-                [`${rootCls}-${size}`]: size !== undefined,
+                [`${rootCls}-${kind}`]: kind && ['default', 'primary', 'secondary', 'tertiary'].includes(kind),
+                [`${rootCls}-${size}`]: size && ['small', 'large'].includes(size),
                 [`${rootCls}-body`]: asBody,
                 [`${rootCls}-hover`]: hoverable,
-                [`${config.prefixCls}-${colorMode}`]: colorMode !== undefined,
+                [`${config.prefixCls}-${colorMode}`]: colorMode && ['dark', 'light'].includes(colorMode),
             }, className), component: defaultElement, ...restProps })));
 }
 if (process.env.NODE_ENV !== 'production') {

package/dist/esm/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/esm/components/Card/context.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 export const CardContext = React.createContext({
     getRootCls() {

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

@@ -1,3 +1,4 @@
+'use client';
 import { error } from '@broxus/js-utils';
 import * as React from 'react';
 export const ConfigContext = React.createContext({

package/dist/esm/components/Control/Checkbox/CheckboxGroupContext.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 export const CheckboxGroupContext = React.createContext(null);
 export function useCheckboxGroup() {

package/dist/esm/components/Control/Radio/RadioGroupContext.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 export const RadioGroupContext = React.createContext(null);
 export function useRadioGroup() {

package/dist/esm/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/esm/components/Flex/Flex.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
 import { type BreakpointsConfig } from '../../types';
-export type FlexAlignContent = 'stretch' | 'between' | 'around' | 'start' | 'middle' | 'end';
-export type FlexAlignItems = 'stretch' | 'start' | 'middle' | 'end';
+export type FlexAlignContent = 'stretch' | 'between' | 'around' | 'start' | 'center' | 'end';
+export type FlexAlignItems = 'stretch' | 'start' | 'center' | 'end';
 export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
 export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
 export type FlexJustifyContent = 'start' | 'center' | 'end' | 'between' | 'around';

package/dist/esm/components/Flex/Flex.js

@@ -9,13 +9,13 @@ const alignContentMap = new Map([
     ['around', 'around'],
     ['between', 'between'],
     ['end', 'right'],
-    ['middle', 'middle'],
+    ['center', 'middle'],
     ['start', 'left'],
     ['stretch', 'stretch'],
 ]);
 const alignItemsMap = new Map([
     ['end', 'bottom'],
-    ['middle', 'middle'],
+    ['center', 'middle'],
     ['start', 'top'],
     ['stretch', 'stretch'],
 ]);

package/dist/esm/components/Flex/context.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 export const FlexContext = React.createContext({
     getRootCls() {

package/dist/esm/components/Form/context.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 export const FormContext = React.createContext({
     getRootCls() {

package/dist/esm/components/Nav/context/IdContext.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 export const IdContext = React.createContext(undefined);
 export function getNavId(uuid, eventKey) {

package/dist/esm/components/Nav/context/NavContext.js

@@ -1,3 +1,4 @@
+'use client';
 import useMemo from 'rc-util/lib/hooks/useMemo';
 import * as React from 'react';
 import shallowEqual from 'shallowequal';

package/dist/esm/components/Nav/context/PathContext.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 const EmptyList = [];
 export const PathRegisterContext = React.createContext(null);

package/dist/esm/components/Nav/context/PrivateContext.js

@@ -1,2 +1,3 @@
+'use client';
 import * as React from 'react';
 export const PrivateContext = React.createContext({});

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

@@ -6,11 +6,11 @@ import './index.scss';
 const defaultElement = 'section';
 export function Section(props) {
     const config = useConfig();
-    const { className, prefixCls = config.prefixCls, preserveColor, size, kind, ...restProps } = props;
+    const { className, kind, prefixCls = config.prefixCls, preserveColor, size, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'section'), [config, prefixCls]);
     return (React.createElement(Component, { className: classNames(rootCls, {
-            [`${rootCls}-${size}`]: size !== undefined,
-            [`${rootCls}-${kind}`]: kind !== undefined,
+            [`${rootCls}-${size}`]: size && ['xsmall', 'small', 'large', 'xlarge'].includes(size),
+            [`${rootCls}-${kind}`]: kind && ['default', 'muted', 'primary', 'secondary', 'tertiary'].includes(kind),
             [`${prefixCls || config.prefixCls}-preserve-color`]: preserveColor,
         }, className), component: defaultElement, ...restProps }));
 }

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

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

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

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

package/dist/esm/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/esm/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/esm/components/Tabs/index.js

@@ -3,12 +3,12 @@ import RcTabs from 'rc-tabs';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
 import { Icon } from '../../components/Icon';
-import { useAnimateConfig, useLegacyItems } from '../../components/Tabs/hooks';
+import { useAnimateConfig } from '../../components/Tabs/hooks';
 import { getMotionName } from '../../utils';
 import './index.scss';
 export function Tabs(props) {
     const config = useConfig();
-    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 { 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'
         ? {
@@ -22,10 +22,14 @@ export function Tabs(props) {
             },
         }
         : undefined), [addIcon, hideAdd, onEdit, type]);
-    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({
+    return (React.createElement(RcTabs, { animated: useAnimateConfig(rootCls, animated), direction: direction, items: items, ...restProps, className: classNames({
             [`${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, { icon: "more_horizontal" }),
+            transitionName: getMotionName(prefixCls || config.prefixCls, 'slide-bottom-small'),
+            ...more,
+        }, prefixCls: rootCls }));
 }

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

@@ -16,13 +16,13 @@ export function Text(props) {
         : getBreakpointsConfigClasses(prefixCls || config.prefixCls, 'column-1', column)), [column, config.prefixCls, prefixCls]);
     return (React.createElement(Component, { className: classNames(columnClassName, alignClassName, {
             [`${prefixCls || config.prefixCls}-dropcap`]: dropcap,
-            [`${rootCls}-${color}`]: color !== undefined,
-            [`${rootCls}-${kind}`]: kind !== undefined,
-            [`${rootCls}-${size}`]: size !== undefined,
-            [`${rootCls}-${transform}`]: transform !== undefined,
-            [`${rootCls}-${verticalAlign}`]: verticalAlign !== undefined,
-            [`${rootCls}-${weight}`]: weight !== undefined,
-            [`${rootCls}-${wrap}`]: wrap !== undefined,
+            [`${rootCls}-${color}`]: color && ['muted', 'emphasis', 'primary', 'secondary', 'tertiary', 'success', 'warning', 'danger'].includes(color),
+            [`${rootCls}-${kind}`]: kind && ['meta', 'lead', 'base'].includes(kind),
+            [`${rootCls}-${size}`]: size && ['xsmall', 'small', 'large'].includes(size),
+            [`${rootCls}-${transform}`]: transform && ['capitalize', 'uppercase', 'lowercase'].includes(transform),
+            [`${rootCls}-${verticalAlign}`]: verticalAlign && ['top', 'middle', 'bottom', 'baseline'].includes(verticalAlign),
+            [`${rootCls}-${weight}`]: weight && ['thin', 'light', 'normal', 'medium', 'semibold', 'bold', 'lighter', 'bolder'].includes(weight),
+            [`${rootCls}-${wrap}`]: wrap && ['truncate', 'break', 'nowrap'].includes(wrap),
             [`${rootCls}-decoration-none`]: decoration === 'none',
             [`${rootCls}-italic`]: italic,
         }, className), component: defaultElement, ...restProps }));

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

@@ -6,11 +6,11 @@ import './index.scss';
 const defaultElement = 'div';
 export function Tile(props) {
     const config = useConfig();
-    const { className, prefixCls = config.prefixCls, preserveColor, size, kind, ...restProps } = props;
+    const { className, kind, prefixCls = config.prefixCls, preserveColor, size, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'tile'), [config, prefixCls]);
     return (React.createElement(Component, { className: classNames(rootCls, {
-            [`${rootCls}-${size}`]: size !== undefined,
-            [`${rootCls}-${kind}`]: kind !== undefined,
+            [`${rootCls}-${size}`]: size && ['xsmall', 'small', 'large', 'xlarge'].includes(size),
+            [`${rootCls}-${kind}`]: kind && ['default', 'muted', 'primary', 'secondary', 'tertiary'].includes(kind),
             [`${prefixCls || config.prefixCls}-preserve-color`]: preserveColor,
         }, className), component: defaultElement, ...restProps }));
 }