@broxus/react-uikit 0.17.4 → 0.19.0

package/dist/esm/components/Nav/Sub/InlineSubNavList.js

@@ -1,12 +1,11 @@
-import CSSMotion from 'rc-motion';
+import CSSMotion from '@rc-component/motion';
 import * as React from 'react';
 import { useConfig } from '../../../components/ConfigProvider';
 import { NavContext, NavContextProvider } from '../../../components/Nav/context/NavContext';
 import { SubNavList } from '../../../components/Nav/Sub/SubNavList';
 import { getMotion } from '../../../components/Nav/utils/motionUtil';
-export function InlineSubNavList(props) {
+export function InlineSubNavList({ children, id, keyPath, open }) {
     const config = useConfig();
-    const { children, id, keyPath, open } = props;
     const fixedMode = 'inline';
     const { prefixCls, forceSubNavRender, motion, defaultMotions, mode, } = React.useContext(NavContext);
     // Always use the latest mode check
@@ -43,3 +42,6 @@ export function InlineSubNavList(props) {
     return (React.createElement(NavContextProvider, { mode: fixedMode, locked: !sameModeRef.current, prefixCls: prefixCls },
         React.createElement(CSSMotion, { visible: mergedOpen, ...mergedMotion, forceRender: forceSubNavRender, leavedClassName: `${config.prefixCls}-hidden`, removeOnLeave: false }, ({ className: motionClassName, style: motionStyle }) => (React.createElement(SubNavList, { className: motionClassName, id: id, style: motionStyle }, children)))));
 }
+if (process.env.NODE_ENV !== 'production') {
+    InlineSubNavList.displayName = 'Nav.InlineSubNavList';
+}

package/dist/esm/components/Nav/Sub/PopupTrigger.d.ts

@@ -11,4 +11,7 @@ export interface PopupTriggerProps {
     visible: boolean;
     onVisibleChange: (visible: boolean) => void;
 }
-export declare function PopupTrigger(props: PopupTriggerProps): React.JSX.Element;
+export declare function PopupTrigger({ prefixCls, visible, children, popup, popupClassName, popupOffset, disabled, mode, onVisibleChange, }: PopupTriggerProps): React.JSX.Element;
+export declare namespace PopupTrigger {
+    var displayName: string;
+}

package/dist/esm/components/Nav/Sub/PopupTrigger.js

@@ -1,6 +1,6 @@
+import Trigger from '@rc-component/trigger';
+import raf from '@rc-component/util/lib/raf';
 import classNames from 'classnames';
-import Trigger from 'rc-trigger';
-import raf from 'rc-util/lib/raf';
 import * as React from 'react';
 import { useConfig } from '../../../components/ConfigProvider';
 import { NavContext } from '../../../components/Nav/context/NavContext';
@@ -13,10 +13,9 @@ const popupPlacementMap = {
     'vertical-left': 'right-top',
     'vertical-right': 'left-top',
 };
-export function PopupTrigger(props) {
+export function PopupTrigger({ prefixCls, visible, children, popup, popupClassName, popupOffset, disabled, mode, onVisibleChange, }) {
     const config = useConfig();
-    const { prefixCls, visible, children, popup, popupClassName, popupOffset, disabled, mode, onVisibleChange, } = props;
-    const { builtinPlacements, defaultMotions, forceSubNavRender, getPopupContainer, motion, rtl, subNavCloseDelay, subNavOpenDelay, triggerSubNavAction, } = React.useContext(NavContext);
+    const { builtinPlacements, defaultMotions, forceSubNavRender, getPopupContainer, motion, rtl, subNavCloseDelay = 300, subNavOpenDelay, triggerSubNavAction = 'hover', } = React.useContext(NavContext);
     const [innerVisible, setInnerVisible] = React.useState(false);
     const placement = rtl
         ? { ...placementsRtl, ...builtinPlacements }
@@ -38,7 +37,7 @@ export function PopupTrigger(props) {
         removeOnLeave: false,
     };
     // Delay to change visible
-    const visibleRef = React.useRef();
+    const visibleRef = React.useRef(null);
     React.useEffect(() => {
         visibleRef.current = raf(() => {
             setInnerVisible(visible);
@@ -49,7 +48,10 @@ export function PopupTrigger(props) {
             }
         };
     }, [visible]);
-    return (React.createElement(Trigger, { action: disabled ? [] : [triggerSubNavAction], builtinPlacements: placement, forceRender: forceSubNavRender, getPopupContainer: getPopupContainer, mouseEnterDelay: subNavOpenDelay, mouseLeaveDelay: subNavCloseDelay, popup: popup, popupAlign: popupOffset && { offset: popupOffset }, popupClassName: classNames({
+    return (React.createElement(Trigger, { action: disabled || !triggerSubNavAction ? [] : [triggerSubNavAction], builtinPlacements: placement, forceRender: forceSubNavRender, getPopupContainer: getPopupContainer, hideAction: disabled || !triggerSubNavAction ? [] : [triggerSubNavAction], mouseEnterDelay: subNavOpenDelay, mouseLeaveDelay: subNavCloseDelay, popup: popup, popupAlign: popupOffset && { offset: popupOffset }, popupClassName: classNames({
             [`${prefixCls}-rtl`]: rtl,
         }, popupClassName), popupMotion: mergedMotion, popupPlacement: popupPlacement, popupVisible: innerVisible, prefixCls: prefixCls, stretch: mode === 'horizontal' ? 'minWidth' : undefined, onPopupVisibleChange: onVisibleChange }, children));
 }
+if (process.env.NODE_ENV !== 'production') {
+    PopupTrigger.displayName = 'Nav.PopupTrigger';
+}

package/dist/esm/components/Nav/Sub/SubNavList.js

@@ -1,8 +1,7 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import { NavContext } from '../../../components/Nav/context/NavContext';
-export const SubNavList = React.forwardRef((props, ref) => {
-    const { className, children, ...restProps } = props;
+export const SubNavList = React.forwardRef(({ children, className, ...restProps }, ref) => {
     const { mode, prefixCls, rtl } = React.useContext(NavContext);
     return (React.createElement("ul", { className: classNames({
             [prefixCls]: mode !== 'inline',

package/dist/esm/components/Nav/Sub/index.d.ts

@@ -10,7 +10,7 @@ export interface SubNavProps extends Omit<SubNavType, 'children' | 'key' | 'labe
     /** @private Do not use. Private warning empty usage */
     warnKey?: boolean;
 }
-export declare function Sub(props: SubNavProps): React.JSX.Element;
+export declare function Sub({ children, eventKey, ...restProps }: SubNavProps): React.JSX.Element;
 export declare namespace Sub {
     var displayName: string;
 }

package/dist/esm/components/Nav/Sub/index.js

@@ -1,7 +1,7 @@
 import { noop } from '@broxus/js-utils';
+import warning from '@rc-component/util/lib/warning';
 import classNames from 'classnames';
 import Overflow from 'rc-overflow';
-import warning from 'rc-util/lib/warning';
 import * as React from 'react';
 import { useNavId } from '../../../components/Nav/context/IdContext';
 import { NavContext, NavContextProvider } from '../../../components/Nav/context/NavContext';
@@ -24,7 +24,7 @@ function InternalSubNav(props) {
     const { _internalRenderSubMenuItem } = React.useContext(PrivateContext);
     const mergedDisabled = contextDisabled || disabled;
     const elementRef = React.useRef(null);
-    const popupRef = React.useRef();
+    const popupRef = React.useRef(null);
     // ================================ Warn ================================
     if (process.env.NODE_ENV !== 'production' && warnKey) {
         warning(false, 'SubNav should not leave undefined `key`.');
@@ -163,8 +163,7 @@ function InternalSubNav(props) {
     return (React.createElement(NavContextProvider, { expandIcon: mergedExpandIcon, itemIcon: mergedItemIcon, mode: mode === 'horizontal' ? 'vertical' : mode, onItemClick: onMergedItemClick }, listNode));
 }
 // eslint-disable-next-line react/no-multi-comp
-export function Sub(props) {
-    const { eventKey, children } = props;
+export function Sub({ children, eventKey, ...restProps }) {
     const connectedKeyPath = useFullPath(eventKey);
     const childList = parseChildren(children, connectedKeyPath);
     const measure = useMeasure();
@@ -177,7 +176,7 @@ export function Sub(props) {
         }
         return noop;
     }, [connectedKeyPath, eventKey, measure]);
-    return (React.createElement(PathTrackerContext.Provider, { value: connectedKeyPath }, measure ? childList : React.createElement(InternalSubNav, { ...props }, childList)));
+    return (React.createElement(PathTrackerContext.Provider, { value: connectedKeyPath }, measure ? childList : React.createElement(InternalSubNav, { eventKey: eventKey, ...restProps }, childList)));
 }
 if (process.env.NODE_ENV !== 'production') {
     Sub.displayName = 'Nav.Sub';

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

@@ -15,5 +15,5 @@ export function useNavId(eventKey) {
     return getNavId(id, eventKey);
 }
 if (process.env.NODE_ENV !== 'production') {
-    IdContext.displayName = 'IdContext';
+    IdContext.displayName = 'Nav.IdContext';
 }

package/dist/esm/components/Nav/context/NavContext.d.ts

@@ -1,4 +1,4 @@
-import { type CSSMotionProps } from 'rc-motion';
+import { type CSSMotionProps } from '@rc-component/motion';
 import * as React from 'react';
 import { type BuiltinPlacements, type NavClickEventHandler, type NavMode, type RenderIconType, type TriggerSubNavAction } from '../../../components/Nav/types';
 export interface NavContextProps {
@@ -34,4 +34,4 @@ export interface InheritableContextProps extends Partial<NavContextProps> {
     children?: React.ReactNode;
     locked?: boolean;
 }
-export declare function NavContextProvider(props: InheritableContextProps): React.JSX.Element;
+export declare function NavContextProvider({ children, locked, ...restProps }: InheritableContextProps): React.JSX.Element;

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

@@ -1,5 +1,5 @@
 'use client';
-import useMemo from 'rc-util/lib/hooks/useMemo';
+import useMemo from '@rc-component/util/lib/hooks/useMemo';
 import * as React from 'react';
 import shallowEqual from 'shallowequal';
 import { useConfig } from '../../../components/ConfigProvider';
@@ -19,10 +19,9 @@ function mergeProps(origin, target) {
     });
     return clone;
 }
-export function NavContextProvider(props) {
+export function NavContextProvider({ children, locked, ...restProps }) {
     const config = useConfig();
     const context = React.useContext(NavContext);
-    const { children, locked, ...restProps } = props;
     const inheritableContext = useMemo(() => mergeProps({
         ...context,
         popupPrefixCls: context.popupPrefixCls ?? `${config.prefixCls}-dropdown`,
@@ -33,5 +32,5 @@ export function NavContextProvider(props) {
     return React.createElement(NavContext.Provider, { value: inheritableContext }, children);
 }
 if (process.env.NODE_ENV !== 'production') {
-    NavContext.displayName = 'NavContext';
+    NavContext.displayName = 'Nav.NavContext';
 }

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

@@ -12,7 +12,7 @@ export function useFullPath(eventKey) {
 }
 export const PathUserContext = React.createContext(null);
 if (process.env.NODE_ENV !== 'production') {
-    PathRegisterContext.displayName = 'PathRegisterContext';
-    PathTrackerContext.displayName = 'PathTrackerContext';
-    PathUserContext.displayName = 'PathUserContext';
+    PathRegisterContext.displayName = 'Nav.PathRegisterContext';
+    PathTrackerContext.displayName = 'Nav.PathTrackerContext';
+    PathUserContext.displayName = 'Nav.PathUserContext';
 }

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

@@ -1,3 +1,6 @@
 'use client';
 import * as React from 'react';
 export const PrivateContext = React.createContext({});
+if (process.env.NODE_ENV !== 'production') {
+    PrivateContext.displayName = 'Nav.PrivateContext';
+}

package/dist/esm/components/Nav/hooks/useAccessibility.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { type NavMode } from '../../../components/Nav/types';
-export declare function useAccessibility<T extends HTMLElement>(mode: NavMode, activeKey: string, isRtl: boolean, id: string, containerRef: React.RefObject<HTMLUListElement>, getKeys: () => string[], getKeyPath: (key: string, includeOverflow?: boolean) => string[], triggerActiveKey: (key: string) => void, triggerAccessibilityOpen: (key: string, open?: boolean) => void, originOnKeyDown?: React.KeyboardEventHandler<T>): React.KeyboardEventHandler<T>;
+export declare function useAccessibility<T extends HTMLElement>(mode: NavMode, activeKey: string, isRtl: boolean, id: string, containerRef: React.RefObject<HTMLUListElement | null>, getKeys: () => string[], getKeyPath: (key: string, includeOverflow?: boolean) => string[], triggerActiveKey: (key: string) => void, triggerAccessibilityOpen: (key: string, open?: boolean) => void, originOnKeyDown?: React.KeyboardEventHandler<T>): React.KeyboardEventHandler<T>;

package/dist/esm/components/Nav/hooks/useAccessibility.js

@@ -1,6 +1,6 @@
-import { getFocusNodeList } from 'rc-util/lib/Dom/focus';
-import KeyCode from 'rc-util/lib/KeyCode';
-import raf from 'rc-util/lib/raf';
+import { getFocusNodeList } from '@rc-component/util/lib/Dom/focus';
+import KeyCode from '@rc-component/util/lib/KeyCode';
+import raf from '@rc-component/util/lib/raf';
 import * as React from 'react';
 import { getNavId } from '../../../components/Nav/context/IdContext';
 // destruct to reduce minify size
@@ -104,7 +104,7 @@ function getFocusableElements(container, elements) {
 function getNextFocusElement(parentQueryContainer, elements, focusMenuElement, offset = 1) {
     // Key on the menu item will not get validate parent container
     if (!parentQueryContainer) {
-        return null;
+        return undefined;
     }
     // List current level menu item elements
     const sameLevelFocusableMenuElementList = getFocusableElements(parentQueryContainer, elements);
@@ -127,8 +127,8 @@ function getNextFocusElement(parentQueryContainer, elements, focusMenuElement, o
     return sameLevelFocusableMenuElementList[focusIndex];
 }
 export function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKeys, getKeyPath, triggerActiveKey, triggerAccessibilityOpen, originOnKeyDown) {
-    const rafRef = React.useRef();
-    const activeRef = React.useRef();
+    const rafRef = React.useRef(undefined);
+    const activeRef = React.useRef(undefined);
     activeRef.current = activeKey;
     const cleanRaf = () => {
         raf.cancel(rafRef.current);

package/dist/esm/components/Nav/hooks/useKeyRecords.js

@@ -1,4 +1,4 @@
-import warning from 'rc-util/lib/warning';
+import warning from '@rc-component/util/lib/warning';
 import * as React from 'react';
 import { nextSlice } from '../../../components/Nav/utils/timeUtil';
 import { useForceUpdate } from '../../../hooks';

package/dist/esm/components/Nav/hooks/useMemoCallback.d.ts

@@ -2,4 +2,4 @@
  * Cache callback function that always return same ref instead.
  * This is used for context optimization.
  */
-export declare function useMemoCallback<T extends (...args: any[]) => void>(func: T): T;
+export declare function useMemoCallback<T extends (...args: any[]) => void>(func: T): T | undefined;

package/dist/esm/components/Nav/hooks/useUUID.js

@@ -1,4 +1,4 @@
-import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
 import * as React from 'react';
 const uniquePrefix = Math.random().toFixed(5).toString().slice(2);
 let internalId = 0;

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

@@ -5,7 +5,6 @@ import { Header } from '../../components/Nav/Header';
 import { Item } from '../../components/Nav/Item';
 import { type NavProps } from '../../components/Nav/Nav';
 import { Sub } from '../../components/Nav/Sub';
-import './index.scss';
 export type { NavProps };
 export interface Nav extends React.ForwardRefExoticComponent<NavProps> {
     Divider: typeof Divider;

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

@@ -4,7 +4,6 @@ import { Header } from '../../components/Nav/Header';
 import { Item } from '../../components/Nav/Item';
 import { Nav as InternalNav } from '../../components/Nav/Nav';
 import { Sub } from '../../components/Nav/Sub';
-import './index.scss';
 export const Nav = InternalNav;
 Nav.Divider = Divider;
 Nav.Group = Group;

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

@@ -1,3 +1,4 @@
+import { type ActionType } from '@rc-component/trigger';
 import type * as React from 'react';
 export type NavRef = {
     /**
@@ -49,7 +50,7 @@ export type ItemType = SubNavType | NavItemType | NavItemGroupType | NavDividerT
 export type NavMode = 'inline' | 'vertical' | 'vertical-left' | 'vertical-right' | 'horizontal';
 export type NavModifier = 'default' | 'primary' | 'center' | 'divider';
 export type BuiltinPlacements = Record<string, any>;
-export type TriggerSubNavAction = 'click' | 'hover';
+export type TriggerSubNavAction = ActionType;
 export interface RenderIconInfo {
     disabled?: boolean;
     isOpen?: boolean;

package/dist/esm/components/Nav/utils/alignUtil.d.ts

@@ -1,3 +1,3 @@
-import { type AlignType, type BuildInPlacements } from 'rc-trigger/lib/interface';
+import { type AlignType, type BuildInPlacements } from '@rc-component/trigger/lib/interface';
 export declare function getAlignFromPlacement(builtinPlacements: BuildInPlacements, placementStr: string, align: AlignType): AlignType;
 export declare function getAlignPopupClassName(builtinPlacements: BuildInPlacements, prefixCls: string, align: AlignType, isAlignPoint: boolean): string;

package/dist/esm/components/Nav/utils/motionUtil.d.ts

@@ -1,4 +1,4 @@
-import { type CSSMotionProps } from 'rc-motion';
+import { type CSSMotionProps } from '@rc-component/motion';
 import { type NavMode } from '../../../components/Nav/types';
 export declare function getMotion(mode: NavMode | 'other', motion?: CSSMotionProps, defaultMotions?: Partial<{
     [key in NavMode | 'other']: CSSMotionProps;

package/dist/esm/components/Nav/utils/nodeUtil.js

@@ -1,4 +1,4 @@
-import toArray from 'rc-util/lib/Children/toArray';
+import toArray from '@rc-component/util/lib/Children/toArray';
 import * as React from 'react';
 import { Divider } from '../../../components/Nav/Divider';
 import { Group } from '../../../components/Nav/Group';

package/dist/esm/components/Nav/utils/warnUtil.js

@@ -1,4 +1,4 @@
-import warning from 'rc-util/lib/warning';
+import warning from '@rc-component/util/lib/warning';
 /**
  * `onClick` event return `info.item` which point to react node directly.
  * We should warning this since it will not work on FC.

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

@@ -7,7 +7,6 @@ import { Nav } from '../../components/Navbar/Nav';
 import { type NavbarProps } from '../../components/Navbar/Navbar';
 import { Right } from '../../components/Navbar/Right';
 import { Toggle } from '../../components/Navbar/Toggle';
-import './index.scss';
 export type { NavbarProps };
 export interface Navbar extends React.FunctionComponent<NavbarProps> {
     Center: typeof Center;

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

@@ -6,7 +6,6 @@ import { Nav } from '../../components/Navbar/Nav';
 import { Navbar as InternalNavbar } from '../../components/Navbar/Navbar';
 import { Right } from '../../components/Navbar/Right';
 import { Toggle } from '../../components/Navbar/Toggle';
-import './index.scss';
 export const Navbar = InternalNavbar;
 Navbar.Center = Center;
 Navbar.Container = Container;

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
-import './index.scss';
 export interface OverlayOwnProps {
     icon?: boolean;
     overlay?: React.ReactNode;

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

@@ -2,7 +2,6 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
-import './index.scss';
 const defaultElement = 'div';
 const positions = [
     'top',

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import './index.scss';
 export interface ProgressProps extends React.ProgressHTMLAttributes<HTMLProgressElement> {
     prefixCls?: string;
 }

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

@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
-import './index.scss';
 export function Progress(props) {
     const config = useConfig();
     const { className, prefixCls = config.prefixCls, ...restProps } = props;

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

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
-import './index.scss';
-export type SectionOwnProps = {
+export interface SectionOwnProps {
     kind?: 'default' | 'muted' | 'primary' | 'secondary' | 'tertiary';
     preserveColor?: boolean;
     size?: 'xsmall' | 'small' | 'large' | 'xlarge';
-};
+}
 export type SectionProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<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;

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

@@ -2,7 +2,6 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
-import './index.scss';
 const defaultElement = 'section';
 export function Section(props) {
     const config = useConfig();

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

@@ -0,0 +1,19 @@
+import { type SegmentedLabeledOption as RcSegmentedLabeledOption, type SegmentedProps as RcSegmentedProps, type SegmentedValue as RcSegmentedValue, type SegmentedRawOption } from '@rc-component/segmented';
+import * as React from 'react';
+import { type SizeType } from '../../types';
+export { type SegmentedValue } from '@rc-component/segmented';
+interface SegmentedLabeledOptionWithoutIcon<ValueType = RcSegmentedValue> extends RcSegmentedLabeledOption<ValueType> {
+    label: RcSegmentedLabeledOption['label'];
+}
+interface SegmentedLabeledOptionWithIcon<ValueType = RcSegmentedValue> extends Omit<RcSegmentedLabeledOption<ValueType>, 'label'> {
+    label?: RcSegmentedLabeledOption['label'];
+    icon: React.ReactNode;
+}
+export type SegmentedLabeledOption<ValueType = RcSegmentedValue> = SegmentedLabeledOptionWithIcon<ValueType> | SegmentedLabeledOptionWithoutIcon<ValueType>;
+export type SegmentedOptions<T = SegmentedRawOption> = (T | SegmentedLabeledOption<T>)[];
+export interface SegmentedProps<ValueType = RcSegmentedValue> extends Omit<RcSegmentedProps<ValueType>, 'options' | 'size'> {
+    options: SegmentedOptions<ValueType>;
+    size?: SizeType;
+    vertical?: boolean;
+}
+export declare function Segmented<ValueType = RcSegmentedValue>(props: SegmentedProps<ValueType>): React.JSX.Element;

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

@@ -0,0 +1,29 @@
+import RcSegmented from '@rc-component/segmented';
+import classNames from 'classnames';
+import * as React from 'react';
+import { useConfig } from '../../components/ConfigProvider';
+function isSegmentedLabeledOptionWithIcon(option) {
+    return typeof option === 'object' && !!option?.icon;
+}
+export function Segmented(props) {
+    const config = useConfig();
+    const { className, options = [], prefixCls = config.prefixCls, size, vertical, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'segmented'), [config, prefixCls]);
+    const mergedOptions = React.useMemo(() => options.map(option => {
+        // @ts-ignore
+        if (isSegmentedLabeledOptionWithIcon(option)) {
+            const { icon, label, ...restOpts } = option;
+            return {
+                ...restOpts,
+                label: (React.createElement(React.Fragment, null,
+                    React.createElement("span", { className: `${rootCls}-item-icon` }, icon),
+                    label && React.createElement("span", null, label))),
+            };
+        }
+        return option;
+    }), [options, rootCls]);
+    return (React.createElement(RcSegmented, { className: classNames(className, {
+            [`${rootCls}-${size}`]: size,
+            [`${rootCls}-vertical`]: vertical,
+        }), options: mergedOptions, prefixCls: rootCls, vertical: vertical, ...restProps }));
+}

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import './index.scss';
 export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
     prefixCls?: string;
     ratio?: number;

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

@@ -2,7 +2,6 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
 import { defaultSvgProps, getSize } from '../../components/Icon';
-import './index.scss';
 export function Spinner(props) {
     const config = useConfig();
     const { className, prefixCls = config.prefixCls, ratio, ...restProps } = props;

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

@@ -1,7 +1,6 @@
 import type * as React from 'react';
 import { Item } from '../../components/Subnav/Item';
 import { type SubnavProps } from '../../components/Subnav/Subnav';
-import './index.scss';
 export type { SubnavProps };
 export interface Subnav extends React.FunctionComponent<SubnavProps> {
     Item: typeof Item;

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

@@ -1,5 +1,4 @@
 import { Item } from '../../components/Subnav/Item';
 import { Subnav as InnerSubnav } from '../../components/Subnav/Subnav';
-import './index.scss';
 export const Subnav = InnerSubnav;
 Subnav.Item = Item;

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

@@ -1,7 +1,6 @@
-import { type SwitchChangeEventHandler, type SwitchClickEventHandler } from 'rc-switch';
+import { type SwitchChangeEventHandler, type SwitchClickEventHandler } from '@rc-component/switch';
 import * as React from 'react';
 import { type Direction } from '../../types';
-import './index.scss';
 export type SwitchSize = 'small';
 export type SwitchProps = {
     autoFocus?: boolean;

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

@@ -1,9 +1,8 @@
+import RcSwitch from '@rc-component/switch';
 import classNames from 'classnames';
-import RcSwitch from 'rc-switch';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
 import { Spinner } from '../../components/Spinner';
-import './index.scss';
 export const Switch = React.forwardRef((props, ref) => {
     const config = useConfig();
     const { className, direction = config.direction, loading, loadingIcon, prefixCls = config.prefixCls, ...restProps } = props;

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

@@ -1,3 +1,3 @@
-import { type AnimatedConfig } from 'rc-tabs/es/interface';
+import { type AnimatedConfig } from '@rc-component/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,6 +1,5 @@
-import { type TabsProps as RcTabsProps } from 'rc-tabs';
+import { type TabsProps as RcTabsProps } from '@rc-component/tabs';
 import * as React from 'react';
-import './index.scss';
 export type TabsPosition = 'left' | 'right' | 'top' | 'bottom';
 export interface Tab {
     active?: boolean;

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

@@ -1,11 +1,10 @@
+import RcTabs from '@rc-component/tabs';
 import classNames from 'classnames';
-import RcTabs from 'rc-tabs';
 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';
 export function Tabs(props) {
     const config = useConfig();
     const { addIcon, animated, centered, className, direction, hideAdd, items, more, prefixCls = config.prefixCls, size, type, onEdit, ...restProps } = props;

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
 import { type BreakpointsConfig } from '../../types';
-import './index.scss';
 export type TextAlign = 'left' | 'right' | 'center' | 'justify';
 export type TextOwnProps = {
     align?: TextAlign | BreakpointsConfig<TextAlign>;

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

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 import { getBreakpointsConfigClasses } from '../../utils';
-import './index.scss';
 const defaultElement = 'span';
 export function Text(props) {
     const config = useConfig();

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
-import './index.scss';
 export type TileOwnProps = {
     kind?: 'default' | 'muted' | 'primary' | 'secondary' | 'tertiary';
     prefixCls?: string;

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

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

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

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
 import { type WidthBreakpointsConfig, type WidthSize } from '../../components/Width/types';
-import './index.scss';
-export interface WidthOwnProps extends WidthBreakpointsConfig {
+export interface WidthOwnProps extends Omit<WidthBreakpointsConfig, 'default'> {
     prefixCls?: string;
-    size?: WidthSize;
+    size?: WidthSize | WidthBreakpointsConfig;
 }
 export type WidthProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<WidthOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, WidthOwnProps>;
 declare const defaultElement = "div";

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

@@ -3,15 +3,9 @@ import * as React from 'react';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 import { getWidthClassname } from '../../components/Width/utils';
-import './index.scss';
 const defaultElement = 'div';
 export function Width(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 }));
+    return (React.createElement(Component, { className: classNames(getWidthClassname(size, prefixCls || config.prefixCls), getWidthClassname({ l, m, s, xl }, prefixCls || config.prefixCls), className), component: defaultElement, ...restProps }));
 }

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

@@ -1,3 +1,3 @@
 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 getWidthClassname(valueOrConfig?: WidthSize | WidthBreakpointsConfig, prefixCls?: string): string | undefined;
 export declare function getChildWidthClassname(valueOrConfig: ChildWidthSize | ChildWidthBreakpointsConfig | undefined, prefixCls?: string): string | undefined;