@broxus/react-uikit 0.18.0 → 0.19.0

package/dist/esm/components/Heading/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 Heading(props) {
     const config = useConfig();

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

@@ -2,7 +2,6 @@ import type * as React from 'react';
 import { Button } from '../../components/Icon/Button';
 import { type IconOwnProps, type IconProps } from '../../components/Icon/Icon';
 import { Link } from '../../components/Icon/Link';
-import './index.scss';
 export * from '../../components/Icon/default-svg-props';
 export * from '../../components/Icon/get-size';
 export type { IconProps, IconOwnProps };

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

@@ -1,7 +1,6 @@
 import { Button } from '../../components/Icon/Button';
 import { Icon as InternalIcon } from '../../components/Icon/Icon';
 import { Link } from '../../components/Icon/Link';
-import './index.scss';
 export * from '../../components/Icon/default-svg-props';
 export * from '../../components/Icon/get-size';
 export const Icon = InternalIcon;

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

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

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

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

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

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

package/dist/esm/components/Label/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 Label(props) {
     const config = useConfig();
     const { className, large, prefixCls = config.prefixCls, type, ...restProps } = props;

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
-import './index.scss';
 export interface LinkOwnProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     prefixCls?: string;
     type?: 'heading' | 'muted' | 'reset' | 'text' | 'toggle';

package/dist/esm/components/Link/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 = 'a';
 export const Link = React.forwardRef((props, ref) => {
     const config = useConfig();

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

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

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

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

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

@@ -1 +1,11 @@
-export * from '../../components/Modal/Modal';
+import { type DialogProps } from '@rc-component/dialog';
+import * as React from 'react';
+import { type Direction } from '../../types';
+export interface ModalProps extends Omit<DialogProps, 'afterClose'> {
+    centered?: boolean;
+    direction?: Direction;
+    full?: boolean;
+    getContainer?: string | HTMLElement | (() => HTMLElement) | false;
+    onClosed?: VoidFunction;
+}
+export declare function Modal(props: ModalProps): React.JSX.Element;

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

@@ -1 +1,40 @@
-export * from '../../components/Modal/Modal';
+import { canUseDocElement } from '@broxus/js-utils';
+import Dialog from '@rc-component/dialog';
+import classNames from 'classnames';
+import * as React from 'react';
+import { Close } from '../../components/Close';
+import { useConfig } from '../../components/ConfigProvider';
+import { getMotionName } from '../../utils';
+let mousePosition;
+const getClickPosition = (event) => {
+    mousePosition = {
+        x: event.pageX,
+        y: event.pageY,
+    };
+    setTimeout(() => {
+        mousePosition = null;
+    }, 100);
+};
+if (canUseDocElement()) {
+    document.documentElement.addEventListener('click', getClickPosition, true);
+}
+export function Modal(props) {
+    const config = useConfig();
+    const { centered, children, className, closable = true, closeIcon, focusTriggerAfterClose = true, full, prefixCls = config.prefixCls, visible, onClose, onClosed, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'modal'), [config, prefixCls]);
+    const defaultMaskTransitionName = React.useMemo(() => getMotionName(prefixCls || config.prefixCls, 'fade'), [config.prefixCls, prefixCls]);
+    const defaultTransitionName = React.useMemo(() => getMotionName(prefixCls || config.prefixCls, 'zoom'), [config.prefixCls, prefixCls]);
+    return (React.createElement(Dialog, { className: classNames(className, {
+            [`${rootCls}-centered`]: centered && !full,
+            [`${rootCls}-full`]: full && !centered,
+        }), focusTriggerAfterClose: focusTriggerAfterClose, maskTransitionName: defaultMaskTransitionName, mousePosition: mousePosition, prefixCls: rootCls, transitionName: defaultTransitionName, visible: visible, ...restProps, onClose: onClose, afterClose: onClosed, classNames: {
+            ...restProps.classNames,
+            section: classNames(`${rootCls}-content`, restProps.classNames?.section),
+        }, closable: false, closeIcon: null },
+        closable
+            && (closeIcon || (React.createElement(Close, { className: classNames({
+                    [`${rootCls}-close-default`]: !full,
+                    [`${rootCls}-close-full`]: full,
+                }), component: "button", onClick: onClose }))),
+        children));
+}

package/dist/esm/components/Nav/Group/InternalNavItemGroup.d.ts

@@ -8,4 +8,7 @@ export interface NavItemGroupProps extends Omit<NavItemGroupType, 'children' | '
     /** @private Do not use. Private warning empty usage */
     warnKey?: boolean;
 }
-export declare function InternalNavItemGroup(props: NavItemGroupProps): React.JSX.Element;
+export declare function InternalNavItemGroup({ children, className, title, ...restProps }: NavItemGroupProps): React.JSX.Element;
+export declare namespace InternalNavItemGroup {
+    var displayName: string;
+}

package/dist/esm/components/Nav/Group/InternalNavItemGroup.js

@@ -3,8 +3,7 @@ import omit from '@rc-component/util/lib/omit';
 import classNames from 'classnames';
 import * as React from 'react';
 import { NavContext } from '../../../components/Nav/context/NavContext';
-export function InternalNavItemGroup(props) {
-    const { children, className, title, ...restProps } = props;
+export function InternalNavItemGroup({ children, className, title, ...restProps }) {
     const { prefixCls } = React.useContext(NavContext);
     const groupRootCls = React.useMemo(() => `${prefixCls}-group`, [prefixCls]);
     const subRootCls = React.useMemo(() => `${prefixCls}-sub`, [prefixCls]);
@@ -12,3 +11,6 @@ export function InternalNavItemGroup(props) {
         React.createElement("div", { className: `${groupRootCls}-header`, role: "presentation", title: typeof title === 'string' ? title : undefined }, title),
         React.createElement("ul", { className: subRootCls, role: "group" }, children)));
 }
+if (process.env.NODE_ENV !== 'production') {
+    InternalNavItemGroup.displayName = 'Nav.InternalNavItemGroup';
+}

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

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { type NavItemGroupProps } from '../../../components/Nav/Group/InternalNavItemGroup';
-export declare const Group: React.MemoExoticComponent<(props: NavItemGroupProps) => React.JSX.Element>;
+export declare const Group: React.MemoExoticComponent<({ children, eventKey, ...restProps }: NavItemGroupProps) => React.JSX.Element>;

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

@@ -3,8 +3,7 @@ import * as React from 'react';
 import { useFullPath, useMeasure } from '../../../components/Nav/context/PathContext';
 import { InternalNavItemGroup } from '../../../components/Nav/Group/InternalNavItemGroup';
 import { parseChildren } from '../../../components/Nav/utils/nodeUtil';
-export const Group = React.memo((props) => {
-    const { children, eventKey, ...restProps } = props;
+export const Group = React.memo(({ children, eventKey, ...restProps }) => {
     const connectedKeyPath = useFullPath(eventKey);
     const measure = useMeasure();
     const childList = parseChildren(children, connectedKeyPath);

package/dist/esm/components/Nav/Item/InternalNavItem.d.ts

@@ -13,4 +13,7 @@ export interface NavItemProps extends Omit<NavItemType, 'label' | 'key'>, Omit<R
      */
     warnKey?: boolean;
 }
-export declare function InternalNavItem(props: NavItemProps): React.JSX.Element;
+export declare function InternalNavItem({ children, className, disabled, eventKey, itemIcon, role, style, warnKey, onClick, onFocus, onKeyDown, onMouseEnter, onMouseLeave, ...restProps }: NavItemProps): React.JSX.Element;
+export declare namespace InternalNavItem {
+    var displayName: string;
+}

package/dist/esm/components/Nav/Item/InternalNavItem.js

@@ -11,9 +11,8 @@ import { useActive } from '../../../components/Nav/hooks/useActive';
 import { useDirectionStyle } from '../../../components/Nav/hooks/useDirectionStyle';
 import { LegacyNavItem } from '../../../components/Nav/Item/LegacyNavItem';
 import { warnItemProp } from '../../../components/Nav/utils/warnUtil';
-export function InternalNavItem(props) {
+export function InternalNavItem({ children, className, disabled, eventKey, itemIcon, role, style, warnKey, onClick, onFocus, onKeyDown, onMouseEnter, onMouseLeave, ...restProps }) {
     const config = useConfig();
-    const { className, children, disabled, eventKey, itemIcon, role, style, warnKey, onClick, onFocus, onKeyDown, onMouseEnter, onMouseLeave, ...restProps } = props;
     const domDataId = useNavId(eventKey);
     const { disabled: contextDisabled = disabled, itemIcon: contextItemIcon, overflowDisabled, selectedKeys, onActive, onItemClick, } = React.useContext(NavContext);
     const { _internalRenderMenuItem } = React.useContext(PrivateContext);
@@ -82,7 +81,24 @@ export function InternalNavItem(props) {
         itemIcon || contextItemIcon,
         children));
     if (_internalRenderMenuItem) {
-        renderNode = _internalRenderMenuItem(renderNode, props, { selected });
+        renderNode = _internalRenderMenuItem(renderNode, {
+            children,
+            className,
+            disabled,
+            itemIcon,
+            role,
+            style,
+            // eslint-disable-next-line sort-keys
+            onClick,
+            onFocus,
+            onKeyDown,
+            onMouseEnter,
+            onMouseLeave,
+            ...restProps,
+        }, { selected });
     }
     return renderNode;
 }
+if (process.env.NODE_ENV !== 'production') {
+    InternalNavItem.displayName = 'Nav.InternalNavItem';
+}

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

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { type NavItemProps } from '../../../components/Nav/Item/InternalNavItem';
-export declare const Item: React.MemoExoticComponent<(props: NavItemProps) => React.JSX.Element | null>;
+export declare const Item: React.MemoExoticComponent<({ eventKey, ...restProps }: NavItemProps) => React.JSX.Element | null>;

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

@@ -2,8 +2,7 @@ import { noop } from '@broxus/js-utils';
 import * as React from 'react';
 import { useFullPath, useMeasure } from '../../../components/Nav/context/PathContext';
 import { InternalNavItem } from '../../../components/Nav/Item/InternalNavItem';
-export const Item = React.memo((props) => {
-    const { eventKey } = props;
+export const Item = React.memo(({ eventKey, ...restProps }) => {
     const measure = useMeasure();
     const connectedKeyPath = useFullPath(eventKey);
     React.useEffect(() => {
@@ -18,7 +17,7 @@ export const Item = React.memo((props) => {
     if (measure) {
         return null;
     }
-    return React.createElement(InternalNavItem, { ...props });
+    return React.createElement(InternalNavItem, { ...restProps });
 });
 if (process.env.NODE_ENV !== 'production') {
     Item.displayName = 'Nav.Item';

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

@@ -5,4 +5,7 @@ export interface InlineSubNavListProps {
     keyPath: string[];
     children: React.ReactNode;
 }
-export declare function InlineSubNavList(props: InlineSubNavListProps): React.JSX.Element | null;
+export declare function InlineSubNavList({ children, id, keyPath, open }: InlineSubNavListProps): React.JSX.Element | null;
+export declare namespace InlineSubNavList {
+    var displayName: string;
+}

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

@@ -4,9 +4,8 @@ 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

@@ -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 }
@@ -49,7 +48,10 @@ export function PopupTrigger(props) {
             }
         };
     }, [visible]);
-    return (React.createElement(Trigger, { action: disabled || !triggerSubNavAction ? [] : [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

@@ -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

@@ -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

@@ -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/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/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-component/switch';
 import * as React from 'react';
 import { type Direction } from '../../types';
-import './index.scss';
 export type SwitchSize = 'small';
 export type SwitchProps = {
     autoFocus?: boolean;