@broxus/react-uikit 0.20.1 → 0.22.0

package/dist/esm/components/Navbar/Toggle.js

@@ -3,13 +3,13 @@ import * as React from 'react';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
-export function Toggle(props) {
+export function Toggle({ className, component = defaultElement, icon, ...props }) {
     const config = useConfig();
-    const { className, icon, prefixCls = config.prefixCls, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'navbar-toggle'), [config, prefixCls]);
     return (React.createElement(Component, { className: classNames(rootCls, {
             [`${rootCls}-icon`]: icon,
-        }, className), component: defaultElement, ...restProps }));
+        }, className), component: component, ...restProps }));
 }
 if (process.env.NODE_ENV !== 'production') {
     Toggle.displayName = 'Navbar.Toggle';

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

@@ -8,5 +8,5 @@ export interface OverlayOwnProps {
 }
 export type OverlayProps<E extends React.ElementType = React.ElementType> = OverlayOwnProps & PolymorphicProps<E> & PolymorphicProps<E, OverlayOwnProps>;
 declare const defaultElement = "div";
-export declare function Overlay<E extends React.ElementType = typeof defaultElement>(props: React.PropsWithChildren<OverlayProps<E>>): React.JSX.Element;
+export declare function Overlay<E extends React.ElementType = typeof defaultElement>({ className, component, icon, position, type, ...props }: React.PropsWithChildren<OverlayProps<E>>): React.JSX.Element;
 export {};

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

@@ -15,14 +15,14 @@ const positions = [
     'center',
     'cover',
 ];
-export function Overlay(props) {
+export function Overlay({ className, component = defaultElement, icon, position = 'bottom', type = 'default', ...props }) {
     const config = useConfig();
-    const { className, icon, position = 'bottom', prefixCls = config.prefixCls, type = 'default', ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'overlay'), [config, prefixCls]);
     const positionRootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'position'), [config, prefixCls]);
     return (React.createElement(Component, { className: classNames(rootCls, {
+            [`${positionRootCls}-${position}`]: position && positions.includes(position),
             [`${rootCls}-${type}`]: type && ['default', 'primary'].includes(type),
             [`${rootCls}-icon`]: icon,
-            [`${positionRootCls}-${position}`]: position && positions.includes(position),
-        }, className), component: defaultElement, ...restProps }));
+        }, className), component: component, ...restProps }));
 }

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

@@ -2,4 +2,4 @@ import * as React from 'react';
 export interface ProgressProps extends React.ProgressHTMLAttributes<HTMLProgressElement> {
     prefixCls?: string;
 }
-export declare function Progress(props: ProgressProps): React.JSX.Element;
+export declare function Progress({ className, ...props }: ProgressProps): React.JSX.Element;

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

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
-export function Progress(props) {
+export function Progress({ className, ...props }) {
     const config = useConfig();
-    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'progress'), [config, prefixCls]);
     return React.createElement("progress", { className: classNames(rootCls, className), ...restProps });
 }

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

@@ -5,7 +5,7 @@ export interface SectionOwnProps {
     preserveColor?: boolean;
     size?: 'xsmall' | 'small' | 'large' | 'xlarge';
 }
-export type SectionProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<SectionOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, SectionOwnProps>;
+export type SectionProps<E extends React.ElementType = React.ElementType> = SectionOwnProps & PolymorphicProps<E> & PolymorphicProps<E, SectionOwnProps>;
 declare const defaultElement = "section";
-export declare function Section<E extends React.ElementType = typeof defaultElement>(props: SectionProps<E>): React.JSX.Element;
+export declare function Section<E extends React.ElementType = typeof defaultElement>({ className, component, kind, preserveColor, size, ...props }: React.PropsWithChildren<SectionProps<E>>): React.JSX.Element;
 export {};

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

@@ -3,13 +3,13 @@ import * as React from 'react';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'section';
-export function Section(props) {
+export function Section({ className, component = defaultElement, kind, preserveColor, size, ...props }) {
     const config = useConfig();
-    const { className, kind, prefixCls = config.prefixCls, preserveColor, size, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'section'), [config, prefixCls]);
     return (React.createElement(Component, { className: classNames(rootCls, {
-            [`${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 }));
+            [`${rootCls}-${kind}`]: kind && ['default', 'muted', 'primary', 'secondary', 'tertiary'].includes(kind),
+            [`${rootCls}-${size}`]: size && ['xsmall', 'small', 'large', 'xlarge'].includes(size),
+        }, className), component: component, ...restProps }));
 }

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

@@ -6,8 +6,8 @@ interface SegmentedLabeledOptionWithoutIcon<ValueType = RcSegmentedValue> extend
     label: RcSegmentedLabeledOption['label'];
 }
 interface SegmentedLabeledOptionWithIcon<ValueType = RcSegmentedValue> extends Omit<RcSegmentedLabeledOption<ValueType>, 'label'> {
-    label?: RcSegmentedLabeledOption['label'];
     icon: React.ReactNode;
+    label?: RcSegmentedLabeledOption['label'];
 }
 export type SegmentedLabeledOption<ValueType = RcSegmentedValue> = SegmentedLabeledOptionWithIcon<ValueType> | SegmentedLabeledOptionWithoutIcon<ValueType>;
 export type SegmentedOptions<T = SegmentedRawOption> = (T | SegmentedLabeledOption<T>)[];
@@ -16,4 +16,4 @@ export interface SegmentedProps<ValueType = RcSegmentedValue> extends Omit<RcSeg
     size?: SizeType;
     vertical?: boolean;
 }
-export declare function Segmented<ValueType = RcSegmentedValue>(props: SegmentedProps<ValueType>): React.JSX.Element;
+export declare function Segmented<ValueType = RcSegmentedValue>({ className, options, size, vertical, ...props }: SegmentedProps<ValueType>): React.JSX.Element;

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

@@ -5,12 +5,12 @@ import { useConfig } from '../../components/ConfigProvider';
 function isSegmentedLabeledOptionWithIcon(option) {
     return typeof option === 'object' && !!option?.icon;
 }
-export function Segmented(props) {
+export function Segmented({ className, options = [], size, vertical, ...props }) {
     const config = useConfig();
-    const { className, options = [], prefixCls = config.prefixCls, size, vertical, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'segmented'), [config, prefixCls]);
     const mergedOptions = React.useMemo(() => options.map(option => {
-        // @ts-ignore
+        // @ts-ignore bla bla ts
         if (isSegmentedLabeledOptionWithIcon(option)) {
             const { icon, label, ...restOpts } = option;
             return {

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

@@ -0,0 +1,4 @@
+import { type SliderProps } from '@rc-component/slider';
+import { type SliderRef } from '@rc-component/slider/lib/Slider';
+import * as React from 'react';
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps<number | number[]> & React.RefAttributes<SliderRef>>;

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

@@ -0,0 +1,10 @@
+import RcSlider from '@rc-component/slider';
+import classNames from 'classnames';
+import * as React from 'react';
+import { useConfig } from '../../components/ConfigProvider';
+export const Slider = React.forwardRef(({ className, ...props }, ref) => {
+    const config = useConfig();
+    const { prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'slider'), [config, prefixCls]);
+    return (React.createElement(RcSlider, { ref: ref, className: classNames(rootCls, {}, className), prefixCls: rootCls, ...restProps }));
+});

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

@@ -3,4 +3,4 @@ export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
     prefixCls?: string;
     ratio?: number;
 }
-export declare function Spinner(props: SpinnerProps): React.JSX.Element;
+export declare function Spinner({ className, ratio, ...props }: SpinnerProps): React.JSX.Element;

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

@@ -2,10 +2,10 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
 import { defaultSvgProps, getSize } from '../../components/Icon';
-export function Spinner(props) {
+export function Spinner({ className, ratio, ...props }) {
     const config = useConfig();
-    const { className, prefixCls = config.prefixCls, ratio, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     return (React.createElement("div", { className: classNames([`${prefixCls || config.prefixCls}-spinner`, `${prefixCls || config.prefixCls}-icon`], className), role: "status", ...restProps },
         React.createElement("svg", { ...defaultSvgProps, ...getSize(20, 20, ratio), viewBox: "0 0 30 30" },
-            React.createElement("circle", { fill: "none", stroke: "currentColor", cx: 15, cy: 15, r: 13, style: { strokeWidth: `${(2 / (ratio ?? 1)).toFixed(6)}px` } }))));
+            React.createElement("circle", { cx: 15, cy: 15, fill: "none", r: 13, stroke: "currentColor", style: { strokeWidth: `${(2 / (ratio ?? 1)).toFixed(6)}px` } }))));
 }

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

@@ -3,4 +3,4 @@ export interface SubnavProps extends React.HTMLAttributes<HTMLUListElement> {
     prefixCls?: string;
     type?: 'divider' | 'pill';
 }
-export declare function Subnav(props: SubnavProps): React.JSX.Element;
+export declare function Subnav({ className, type, ...props }: SubnavProps): React.JSX.Element;

package/dist/esm/components/Subnav/Subnav.js

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
-export function Subnav(props) {
+export function Subnav({ className, type, ...props }) {
     const config = useConfig();
-    const { className, prefixCls = config.prefixCls, type, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'subnav'), [config, prefixCls]);
     return (React.createElement("ul", { className: classNames(rootCls, {
             [`${rootCls}-${type}`]: type !== undefined,

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

@@ -2,7 +2,7 @@ import { type SwitchChangeEventHandler, type SwitchClickEventHandler } from '@rc
 import * as React from 'react';
 import { type Direction } from '../../types';
 export type SwitchSize = 'small';
-export type SwitchProps = {
+export interface SwitchProps {
     autoFocus?: boolean;
     checked?: boolean;
     checkedChildren?: React.ReactNode;
@@ -22,5 +22,5 @@ export type SwitchProps = {
     onChange?: SwitchChangeEventHandler;
     onClick?: SwitchClickEventHandler;
     onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
-};
+}
 export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -3,15 +3,14 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
 import { Spinner } from '../../components/Spinner';
-export const Switch = React.forwardRef((props, ref) => {
+export const Switch = React.forwardRef(({ className, loading, loadingIcon, size, ...props }, ref) => {
     const config = useConfig();
-    const { className, direction = config.direction, loading, loadingIcon, prefixCls = config.prefixCls, ...restProps } = props;
-    const { size } = props;
+    const { direction = config.direction, prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'switch'), [config, prefixCls]);
     const mergedLoadingIcon = React.useMemo(() => (React.createElement("div", { className: `${rootCls}-handle` }, loading && (loadingIcon ?? React.createElement(Spinner, { className: `${rootCls}-loading-icon` })))), [loading, loadingIcon, rootCls]);
     return (React.createElement(RcSwitch, { ref: ref, className: classNames({
-            [`${rootCls}-small`]: size === 'small',
             [`${rootCls}-loading`]: loading,
             [`${rootCls}-rtl`]: direction === 'rtl',
-        }, className), prefixCls: rootCls, loadingIcon: mergedLoadingIcon, ...restProps }));
+            [`${rootCls}-small`]: size === 'small',
+        }, className), loadingIcon: mergedLoadingIcon, prefixCls: rootCls, ...restProps }));
 });

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

@@ -30,4 +30,4 @@ export interface TabsProps extends Exclude<RcTabsProps, 'editable' | 'items' | '
     type?: TabType;
     onEdit?: (event: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => void;
 }
-export declare function Tabs(props: TabsProps): React.JSX.Element;
+export declare function Tabs({ addIcon, animated, centered, className, direction, hideAdd, items, more, size, type, onEdit, ...props }: TabsProps): React.JSX.Element;

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

@@ -5,18 +5,16 @@ import { useConfig } from '../../components/ConfigProvider';
 import { Icon } from '../../components/Icon';
 import { useAnimateConfig } from '../../components/Tabs/hooks';
 import { getMotionName } from '../../utils';
-export function Tabs(props) {
+export function Tabs({ addIcon, animated, centered, className, direction, hideAdd, items, more, size, type, onEdit, ...props }) {
     const config = useConfig();
-    const { addIcon, animated, centered, className, direction, hideAdd, items, more, prefixCls = config.prefixCls, size, type, onEdit, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'tabs'), [config, prefixCls]);
     const editable = React.useMemo(() => (type === 'editable-card'
         ? {
             addIcon: addIcon || React.createElement(Icon, { icon: "add" }),
             removeIcon: React.createElement(Icon, { icon: "close" }),
             showAdd: hideAdd !== true,
-            // eslint-disable-next-line sort-keys
-            onEdit: (editType, { key, event }) => {
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            onEdit: (editType, { event, key }) => {
                 onEdit?.(editType === 'add' ? event : key, editType);
             },
         }
@@ -24,8 +22,8 @@ export function Tabs(props) {
     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,
+            [`${rootCls}-editable-card`]: type === 'editable-card',
         }, className), editable: editable, more: {
             icon: React.createElement(Icon, { icon: "more_horizontal" }),
             transitionName: getMotionName(prefixCls || config.prefixCls, 'slide-bottom-small'),

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
 import { type BreakpointsConfig } from '../../types';
 export type TextAlign = 'left' | 'right' | 'center' | 'justify';
-export type TextOwnProps = {
+export interface TextOwnProps {
     align?: TextAlign | BreakpointsConfig<TextAlign>;
     className?: string;
     color?: 'muted' | 'emphasis' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger';
@@ -18,8 +18,8 @@ export type TextOwnProps = {
     verticalAlign?: 'top' | 'middle' | 'bottom' | 'baseline';
     weight?: 'thin' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'lighter' | 'bolder';
     wrap?: 'truncate' | 'break' | 'nowrap';
-};
-export type TextProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<TextOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, TextOwnProps>;
+}
+export type TextProps<E extends React.ElementType = React.ElementType> = TextOwnProps & PolymorphicProps<E> & PolymorphicProps<E, TextOwnProps>;
 declare const defaultElement = "span";
-export declare function Text<E extends React.ElementType = typeof defaultElement>(props: TextProps<E>): React.JSX.Element;
+export declare function Text<E extends React.ElementType = typeof defaultElement>({ align, className, color, column, component, decoration, dropcap, italic, kind, loading, size, transform, verticalAlign, weight, wrap, ...props }: React.PropsWithChildren<TextProps<E>>): React.JSX.Element;
 export {};

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

@@ -4,9 +4,9 @@ import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 import { getBreakpointsConfigClasses } from '../../utils';
 const defaultElement = 'span';
-export function Text(props) {
+export function Text({ align, className, color, column, component = defaultElement, decoration, dropcap, italic, kind, loading, size, transform, verticalAlign, weight, wrap, ...props }) {
     const config = useConfig();
-    const { align, className, color, column, decoration, dropcap, italic, kind, loading, prefixCls = config.prefixCls, size, transform, verticalAlign, weight, wrap, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'text'), [config, prefixCls]);
     const alignClassName = React.useMemo(() => (typeof align === 'string'
         ? `${rootCls}-${align}`
@@ -16,15 +16,33 @@ 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 && ['muted', 'emphasis', 'primary', 'secondary', 'tertiary', 'success', 'warning', 'danger'].includes(color),
+            [`${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}-${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,
             [`${rootCls}-loading`]: loading,
-        }, className), component: defaultElement, ...restProps }));
+        }, className), component: component, ...restProps }));
 }

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
-export type TileOwnProps = {
+export interface TileOwnProps {
     kind?: 'default' | 'muted' | 'primary' | 'secondary' | 'tertiary';
     prefixCls?: string;
     preserveColor?: boolean;
     size?: 'xsmall' | 'small' | 'large' | 'xlarge';
-};
-export type TileProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<TileOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, TileOwnProps>;
+}
+export type TileProps<E extends React.ElementType = React.ElementType> = TileOwnProps & PolymorphicProps<E> & PolymorphicProps<E, TileOwnProps>;
 declare const defaultElement = "div";
-export declare function Tile<E extends React.ElementType = typeof defaultElement>(props: TileProps<E>): React.JSX.Element;
+export declare function Tile<E extends React.ElementType = typeof defaultElement>({ className, component, kind, preserveColor, size, ...props }: React.PropsWithChildren<TileProps<E>>): React.JSX.Element;
 export {};

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

@@ -3,13 +3,13 @@ import * as React from 'react';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
-export function Tile(props) {
+export function Tile({ className, component = defaultElement, kind, preserveColor, size, ...props }) {
     const config = useConfig();
-    const { className, kind, prefixCls = config.prefixCls, preserveColor, size, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'tile'), [config, prefixCls]);
     return (React.createElement(Component, { className: classNames(rootCls, {
-            [`${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 }));
+            [`${rootCls}-${kind}`]: kind && ['default', 'muted', 'primary', 'secondary', 'tertiary'].includes(kind),
+            [`${rootCls}-${size}`]: size && ['xsmall', 'small', 'large', 'xlarge'].includes(size),
+        }, className), component: component, ...restProps }));
 }

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

@@ -5,7 +5,7 @@ export interface WidthOwnProps extends Omit<WidthBreakpointsConfig, 'default'> {
     prefixCls?: string;
     size?: WidthSize | WidthBreakpointsConfig;
 }
-export type WidthProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<WidthOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, WidthOwnProps>;
+export type WidthProps<E extends React.ElementType = React.ElementType> = WidthOwnProps & PolymorphicProps<E> & PolymorphicProps<E, WidthOwnProps>;
 declare const defaultElement = "div";
-export declare function Width<E extends React.ElementType = typeof defaultElement>(props: WidthProps<E>): React.JSX.Element;
+export declare function Width<E extends React.ElementType = typeof defaultElement>({ className, component, l, m, s, size, xl, ...props }: React.PropsWithChildren<WidthProps<E>>): React.JSX.Element;
 export {};

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

@@ -4,8 +4,8 @@ import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 import { getWidthClassname } from '../../components/Width/utils';
 const defaultElement = 'div';
-export function Width(props) {
+export function Width({ className, component = defaultElement, l, m, s, size, xl, ...props }) {
     const config = useConfig();
-    const { className, prefixCls = config.prefixCls, size, s, m, l, xl, ...restProps } = props;
-    return (React.createElement(Component, { className: classNames(getWidthClassname(size, prefixCls || config.prefixCls), getWidthClassname({ l, m, s, xl }, prefixCls || config.prefixCls), className), component: defaultElement, ...restProps }));
+    const { prefixCls = config.prefixCls, ...restProps } = props;
+    return (React.createElement(Component, { className: classNames(getWidthClassname(size, prefixCls || config.prefixCls), getWidthClassname({ l, m, s, xl }, prefixCls || config.prefixCls), className), component: component, ...restProps }));
 }

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

@@ -1,3 +1,3 @@
-export * from '../../components/Width/Width';
 export * from '../../components/Width/types';
 export * from '../../components/Width/utils';
+export * from '../../components/Width/Width';

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

@@ -1,3 +1,3 @@
-export * from '../../components/Width/Width';
 export * from '../../components/Width/types';
 export * from '../../components/Width/utils';
+export * from '../../components/Width/Width';

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/Slider';
 export * from './components/Switch';
 export * from './components/Close';
 export * from './components/Spinner';

package/dist/esm/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable perfectionist/sort-exports */
 export * from './components/Link';
 export * from './components/Heading';
 export * from './components/Divider';
@@ -8,6 +9,7 @@ export * from './components/Form';
 export * from './components/Control';
 export * from './components/Button';
 export * from './components/Progress';
+export * from './components/Slider';
 export * from './components/Switch';
 export * from './components/Close';
 export * from './components/Spinner';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@broxus/react-uikit",
-    "version": "0.20.1",
+    "version": "0.22.0",
     "description": "React-based UIkit library",
     "license": "MIT",
     "keywords": [
@@ -30,9 +30,7 @@
     },
     "files": [
         "dist",
-        "styles",
-        "LICENSE",
-        "README.md"
+        "styles"
     ],
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",
@@ -58,39 +56,37 @@
         "prepare": "npx yarn cleanup && npx yarn build"
     },
     "dependencies": {
-        "@broxus/js-utils": "^1.5.0",
-        "@rc-component/collapse": "^1.1.0",
-        "@rc-component/dialog": "^1.4.0",
-        "@rc-component/drawer": "^1.1.0",
-        "@rc-component/dropdown": "^1.0.0",
-        "@rc-component/input": "^1.1.0",
-        "@rc-component/input-number": "^1.2.0",
-        "@rc-component/motion": "^1.1.4",
-        "@rc-component/picker": "^1.3.0",
-        "@rc-component/resize-observer": "^1.0.0",
-        "@rc-component/segmented": "^1.2.1",
-        "@rc-component/select": "^1.1.3",
-        "@rc-component/switch": "^1.0.0",
-        "@rc-component/tabs": "^1.5.1",
-        "@rc-component/textarea": "^1.1.0",
-        "@rc-component/trigger": "^3.5.2",
-        "@rc-component/util": "^1.2.2",
+        "@broxus/js-utils": "^1.5.1",
+        "@rc-component/collapse": "~1.1.1",
+        "@rc-component/dialog": "~1.5.0",
+        "@rc-component/drawer": "~1.1.0",
+        "@rc-component/dropdown": "~1.0.0",
+        "@rc-component/input": "~1.1.2",
+        "@rc-component/input-number": "~1.6.0",
+        "@rc-component/motion": "~1.1.4",
+        "@rc-component/picker": "~1.6.0",
+        "@rc-component/resize-observer": "~1.0.0",
+        "@rc-component/segmented": "~1.2.2",
+        "@rc-component/select": "~1.2.1",
+        "@rc-component/slider": "~1.0.0",
+        "@rc-component/switch": "~1.0.2",
+        "@rc-component/tabs": "~1.6.0",
+        "@rc-component/textarea": "~1.1.2",
+        "@rc-component/trigger": "~3.6.15",
+        "@rc-component/util": "~1.4.0",
         "classnames": "^2.5.1",
-        "rc-motion": "npm:@rc-component/motion@^1.1.4",
-        "rc-overflow": "^1.4.1",
-        "rc-resize-observer": "npm:@rc-component/resize-observer@^1.0.0",
-        "rc-slider": "^11.1.8",
-        "rc-util": "npm:@rc-component/util@^1.2.2",
+        "rc-dialog": "npm:@rc-component/dialog@~1.5.0",
+        "rc-motion": "npm:@rc-component/motion@~1.1.4",
+        "rc-overflow": "~1.5.0",
+        "rc-resize-observer": "npm:@rc-component/resize-observer@~1.0.0",
+        "rc-util": "npm:@rc-component/util@~1.4.0",
         "shallowequal": "^1.1.0",
-        "uikit": "^3.23.11"
-    },
-    "optionalDependencies": {
-        "luxon": "^3.7.0"
+        "uikit": "^3.24.2"
     },
     "peerDependencies": {
         "luxon": "^3.7.0",
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
     },
-    "gitHead": "dcc68d6287bd46e2e6526fd9fb30c38ad5a35767"
+    "gitHead": "b7737eba86330231643d40ea21bbc7fbb54a4469"
 }

package/styles/_import.components.scss

@@ -8,8 +8,7 @@
 @forward 'heading';
 @forward 'divider';
 @forward 'list';
-@forward 'description-list';
-
+@forward 'description-list'; //
 // @forward 'table';
 @forward 'icon';
 @forward 'form'; // After: Icon
@@ -21,6 +20,7 @@
 @forward 'datepicker';
 @forward 'button';
 @forward 'progress';
+@forward 'slider';
 @forward 'switch';
 
 // Layout
@@ -39,7 +39,6 @@
 @forward 'placeholder';
 @forward 'badge';
 @forward 'label';
-
 @forward 'overlay'; // After: Icon
 @forward 'article'; // After: Subnav
 // @forward 'comment';
@@ -50,8 +49,7 @@
 @forward 'navbar'; // After: Card, Grid, Nav, Icon, Search
 @forward 'subnav';
 @forward 'segmented';
-@forward 'breadcrumb';
-
+@forward 'breadcrumb'; //
 // @forward 'pagination';
 @forward 'tabs';
 @forward 'dotnav';

package/styles/_import.scss

@@ -8,8 +8,7 @@
 @forward 'heading';
 @forward 'divider';
 @forward 'list';
-@forward 'description-list';
-
+@forward 'description-list'; //
 // @forward 'table';
 @forward 'icon';
 @forward 'form'; // After: Icon
@@ -21,11 +20,13 @@
 @forward 'datepicker';
 @forward 'button';
 @forward 'progress';
+@forward 'slider';
 @forward 'switch';
 
 // Layout
 @forward 'section';
 @forward 'container';
+@forward 'grid';
 @forward 'tile';
 @forward 'card';
 
@@ -50,16 +51,12 @@
 @forward 'modal'; // After: Close
 @forward 'drawer';
 @forward 'datepicker';
-@forward 'sticky';
-
+@forward 'sticky'; //
 // @forward 'leader';
-@forward 'tooltip';
-
+@forward 'tooltip'; //
 // @forward 'sortable';
 // @forward 'countdown';
 
-@forward 'grid';
-
 // Navs
 @forward 'nav';
 @forward 'navbar'; // After: Card, Grid, Nav, Icon, Search