@broxus/react-uikit 0.3.0 → 0.4.0

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import omit from 'rc-util/lib/omit';
+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';

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

@@ -4,4 +4,4 @@ export type HeaderProps = {
     className?: string;
     style?: React.CSSProperties;
 };
-export declare const Header: React.MemoExoticComponent<(props: HeaderProps) => JSX.Element>;
+export declare const Header: React.MemoExoticComponent<(props: HeaderProps) => React.JSX.Element>;

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 import { NavContext } from '../../components/Nav/context/NavContext';
 export const Header = React.memo((props) => {
     const { className, ...restProps } = props;

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

@@ -13,4 +13,4 @@ export interface NavItemProps extends Omit<NavItemType, 'label' | 'key'>, Omit<R
      */
     warnKey?: boolean;
 }
-export declare const InternalNavItem: React.MemoExoticComponent<(props: NavItemProps) => JSX.Element>;
+export declare const InternalNavItem: React.MemoExoticComponent<(props: NavItemProps) => React.JSX.Element>;

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

@@ -1,8 +1,8 @@
-import * as React from 'react';
 import classNames from 'classnames';
 import KeyCode from 'rc-util/lib/KeyCode';
 import warning from 'rc-util/lib/warning';
-import { useConfig } from '../../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../../components/ConfigProvider';
 import { useNavId } from '../../../components/Nav/context/IdContext';
 import { NavContext } from '../../../components/Nav/context/NavContext';
 import { useFullPath } from '../../../components/Nav/context/PathContext';

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import Overflow from 'rc-overflow';
 import omit from 'rc-util/lib/omit';
 import warning from 'rc-util/lib/warning';
+import * as React from 'react';
 export class LegacyNavItem extends React.Component {
     render() {
         const { attribute, elementRef, title, ...restProps } = this.props;

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) => JSX.Element | null>;
+export declare const Item: React.MemoExoticComponent<(props: NavItemProps) => React.JSX.Element | null>;

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
 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) => {

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { type CSSMotionProps } from 'rc-motion';
+import * as React from 'react';
 import { type BuiltinPlacements, type ItemType, type NavClickEventHandler, type NavMode, type NavModifier, type NavRef, type RenderIconType, type SelectEventHandler, type TriggerSubNavAction } from '../../components/Nav/types';
 import { type Direction } from '../../types';
 export interface NavProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onClick' | 'onSelect' | 'dir'> {

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

@@ -1,12 +1,11 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import Overflow from 'rc-overflow';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import isEqual from 'rc-util/lib/isEqual';
-import { useConfig } from '../../components/ConfrigProvider';
-import { useMounted } from '../../hooks';
-import { getNavId, IdContext } from '../../components/Nav/context/IdContext';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { useConfig } from '../../components/ConfigProvider';
+import { IdContext, getNavId } from '../../components/Nav/context/IdContext';
 import { NavContextProvider } from '../../components/Nav/context/NavContext';
 import { PathRegisterContext, PathUserContext } from '../../components/Nav/context/PathContext';
 import { PrivateContext } from '../../components/Nav/context/PrivateContext';
@@ -18,6 +17,7 @@ import { Item } from '../../components/Nav/Item';
 import { Sub } from '../../components/Nav/Sub';
 import { parseItems } from '../../components/Nav/utils/nodeUtil';
 import { warnItemProp } from '../../components/Nav/utils/warnUtil';
+import { useMounted } from '../../hooks';
 import { getCollapseMotion, getMotionName } from '../../utils';
 const EMPTY_LIST = [];
 const ForwardedNav = React.forwardRef((props, ref) => {

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import CSSMotion from 'rc-motion';
+import * as React from 'react';
 import { NavContext, NavContextProvider } from '../../../components/Nav/context/NavContext';
 import { SubNavList } from '../../../components/Nav/Sub/SubNavList';
 import { getMotion } from '../../../components/Nav/utils/motionUtil';

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

@@ -11,4 +11,4 @@ export interface PopupTriggerProps {
     visible: boolean;
     onVisibleChange: (visible: boolean) => void;
 }
-export declare const PopupTrigger: React.MemoExoticComponent<(props: PopupTriggerProps) => JSX.Element>;
+export declare const PopupTrigger: React.MemoExoticComponent<(props: PopupTriggerProps) => React.JSX.Element>;

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

@@ -1,8 +1,8 @@
-import * as React from 'react';
 import classNames from 'classnames';
 import Trigger from 'rc-trigger';
 import raf from 'rc-util/lib/raf';
-import { useConfig } from '../../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../../components/ConfigProvider';
 import { NavContext } from '../../../components/Nav/context/NavContext';
 import { placements, placementsRtl } from '../../../components/Nav/placements';
 import { getMotion } from '../../../components/Nav/utils/motionUtil';

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 import { NavContext } from '../../../components/Nav/context/NavContext';
 const ForwardedSubNavList = React.forwardRef((props, ref) => {
     const { className, children, ...restProps } = props;

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

@@ -10,4 +10,4 @@ export interface SubNavProps extends Omit<SubNavType, 'children' | 'key' | 'labe
     /** @private Do not use. Private warning empty usage */
     warnKey?: boolean;
 }
-export declare const Sub: React.MemoExoticComponent<(props: SubNavProps) => JSX.Element>;
+export declare const Sub: React.MemoExoticComponent<(props: SubNavProps) => React.JSX.Element>;

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

@@ -1,8 +1,8 @@
-import * as React from 'react';
 import { noop } from '@broxus/js-utils';
 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';
 import { PathTrackerContext, PathUserContext, useFullPath, useMeasure, } from '../../../components/Nav/context/PathContext';

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { type CSSMotionProps } from 'rc-motion';
+import * as React from 'react';
 import { type BuiltinPlacements, type NavClickEventHandler, type NavMode, type RenderIconType, type TriggerSubNavAction } from '../../../components/Nav/types';
 export interface NavContextProps {
     activeKey: string;

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import useMemo from 'rc-util/lib/hooks/useMemo';
+import * as React from 'react';
 import shallowEqual from 'shallowequal';
-import { useConfig } from '../../../components/ConfrigProvider';
+import { useConfig } from '../../../components/ConfigProvider';
 export const NavContext = React.createContext({
     popupPrefixCls: 'dropdown',
     prefixCls: 'nav',
@@ -24,8 +24,8 @@ export function NavContextProvider(props) {
     const { children, locked, ...restProps } = props;
     const inheritableContext = useMemo(() => mergeProps({
         ...context,
-        popupPrefixCls: `${config.prefixCls}-dropdown`,
-        prefixCls: `${config.prefixCls}-nav`,
+        popupPrefixCls: context.popupPrefixCls ?? `${config.prefixCls}-dropdown`,
+        prefixCls: context.prefixCls ?? `${config.prefixCls}-nav`,
     }, restProps), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [context, restProps], (prev, next) => !locked && (prev[0] !== next[0] || !shallowEqual(prev[1], next[1])));

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import { getFocusNodeList } from 'rc-util/lib/Dom/focus';
 import KeyCode from 'rc-util/lib/KeyCode';
 import raf from 'rc-util/lib/raf';
+import * as React from 'react';
 import { getNavId } from '../../../components/Nav/context/IdContext';
 // destruct to reduce minify size
 const { LEFT, RIGHT, UP, DOWN, ENTER, ESC } = KeyCode;

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

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

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

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

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

@@ -245,14 +245,11 @@
         transform-origin: 0 0;
 
         &::before {
-            bottom: 0;
             content: ' ';
             height: 100%;
-            left: 0;
+            inset: -7px 0 0;
             opacity: 0.0001;
             position: absolute;
-            right: 0;
-            top: -7px;
             width: 100%;
             z-index: -1;
         }

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

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

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

@@ -4,4 +4,4 @@ export interface NavbarCenterOwnProps extends React.HTMLAttributes<HTMLElement>
     prefixCls?: string;
 }
 export type NavbarCenterProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<NavbarCenterOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, NavbarCenterOwnProps>;
-export declare const Center: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: NavbarCenterProps<E>) => JSX.Element)>;
+export declare const Center: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: NavbarCenterProps<E>) => React.JSX.Element)>;

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 import { Component } from '../../components/Component';
-import { useConfig } from '../../components/ConfrigProvider';
+import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
 export const Center = React.memo((props) => {
     const config = useConfig();

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

@@ -5,4 +5,4 @@ export interface NavbarContainerOwnProps extends React.HTMLAttributes<HTMLElemen
     transparent?: boolean;
 }
 export type NavbarContainerProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<NavbarContainerOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, NavbarContainerOwnProps>;
-export declare const Container: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: NavbarContainerProps<E>) => JSX.Element)>;
+export declare const Container: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: NavbarContainerProps<E>) => React.JSX.Element)>;

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 import { Component } from '../../components/Component';
-import { useConfig } from '../../components/ConfrigProvider';
+import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
 export const Container = React.memo((props) => {
     const config = useConfig();

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

@@ -5,4 +5,4 @@ export interface NavbarItemOwnProps extends React.HTMLAttributes<HTMLElement> {
     prefixCls?: string;
 }
 export type NavbarItemProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<NavbarItemOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, NavbarItemOwnProps>;
-export declare const Item: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: NavbarItemProps<E>) => JSX.Element)>;
+export declare const Item: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: NavbarItemProps<E>) => React.JSX.Element)>;

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 import { Component } from '../../components/Component';
-import { useConfig } from '../../components/ConfrigProvider';
+import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
 export const Item = React.memo((props) => {
     const config = useConfig();

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

@@ -4,4 +4,4 @@ export interface NavbarLeftOwnProps extends React.HTMLAttributes<HTMLElement> {
     prefixCls?: string;
 }
 export type NavbarLeftProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<NavbarLeftOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, NavbarLeftOwnProps>;
-export declare const Left: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: NavbarLeftProps<E>) => JSX.Element)>;
+export declare const Left: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: NavbarLeftProps<E>) => React.JSX.Element)>;

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 import { Component } from '../../components/Component';
-import { useConfig } from '../../components/ConfrigProvider';
+import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
 export const Left = React.memo((props) => {
     const config = useConfig();

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

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

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import { useConfig } from '../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../components/ConfigProvider';
 import { Nav as BaseNav } from '../../components/Nav';
 export const Nav = React.memo((props) => {
     const config = useConfig();

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

@@ -4,4 +4,4 @@ export interface NavbarProps extends React.HTMLAttributes<HTMLElement> {
     prefixCls?: string;
     transparent?: boolean;
 }
-export declare const Navbar: React.MemoExoticComponent<(props: NavbarProps) => JSX.Element>;
+export declare const Navbar: React.MemoExoticComponent<(props: NavbarProps) => React.JSX.Element>;

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import { useConfig } from '../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../components/ConfigProvider';
 export const Navbar = React.memo((props) => {
     const config = useConfig();
     const { asContainer, className, prefixCls = config.prefixCls, transparent, ...restProps } = props;

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

@@ -4,4 +4,4 @@ export interface NavbarRightOwnProps extends React.HTMLAttributes<HTMLElement> {
     prefixCls?: string;
 }
 export type NavbarRightProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<NavbarRightOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, NavbarRightOwnProps>;
-export declare const Right: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: NavbarRightProps<E>) => JSX.Element)>;
+export declare const Right: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: NavbarRightProps<E>) => React.JSX.Element)>;

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 import { Component } from '../../components/Component';
-import { useConfig } from '../../components/ConfrigProvider';
+import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
 export const Right = React.memo((props) => {
     const config = useConfig();

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

@@ -5,4 +5,4 @@ export type NavbarToggleOwnProps = {
     prefixCls?: string;
 };
 export type NavbarToggleProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<NavbarToggleOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, NavbarToggleOwnProps>;
-export declare const Toggle: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: NavbarToggleProps<E>) => JSX.Element)>;
+export declare const Toggle: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: NavbarToggleProps<E>) => React.JSX.Element)>;

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 import { Component } from '../../components/Component';
-import { useConfig } from '../../components/ConfrigProvider';
+import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
 export const Toggle = React.memo((props) => {
     const config = useConfig();

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

@@ -1,10 +1,10 @@
 import type * as React from 'react';
 import { Center } from '../../components/Navbar/Center';
 import { Container } from '../../components/Navbar/Container';
-import { type NavbarProps } from '../../components/Navbar/Navbar';
 import { Item } from '../../components/Navbar/Item';
 import { Left } from '../../components/Navbar/Left';
 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';

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

@@ -1,9 +1,9 @@
 import { Center } from '../../components/Navbar/Center';
 import { Container } from '../../components/Navbar/Container';
-import { Navbar as InternalNavbar } from '../../components/Navbar/Navbar';
 import { Item } from '../../components/Navbar/Item';
 import { Left } from '../../components/Navbar/Left';
 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';

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

@@ -3,4 +3,4 @@ import './index.scss';
 export interface ProgressProps extends React.ProgressHTMLAttributes<HTMLProgressElement> {
     prefixCls?: string;
 }
-export declare const Progress: React.MemoExoticComponent<(props: ProgressProps) => JSX.Element>;
+export declare const Progress: React.MemoExoticComponent<(props: ProgressProps) => React.JSX.Element>;

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

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

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

@@ -113,10 +113,6 @@
     @include hook-progress-misc;
 }
 
-// @mixin hook-progress() {}
-// @mixin hook-progress-bar() {}
-// @mixin hook-progress-misc() {}
-
 
 // Vars
 // ========================================================================

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

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
 import './index.scss';
 export type SectionOwnProps = {
-    color?: 'default' | 'muted' | 'primary' | 'secondary' | 'tertiary';
     preserveColor?: boolean;
     size?: 'xsmall' | 'small' | 'large' | 'xlarge';
+    type?: 'default' | 'muted' | 'primary' | 'secondary' | 'tertiary';
 };
 export type SectionProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<SectionOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, SectionOwnProps>;
-export declare const Section: React.MemoExoticComponent<(<E extends React.ElementType<any> = "section">(props: SectionProps<E>) => JSX.Element)>;
+export declare const Section: React.MemoExoticComponent<(<E extends React.ElementType<any> = "section">(props: SectionProps<E>) => React.JSX.Element)>;

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

@@ -1,16 +1,16 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 import { Component } from '../../components/Component';
-import { useConfig } from '../../components/ConfrigProvider';
+import { useConfig } from '../../components/ConfigProvider';
 import './index.scss';
 const defaultElement = 'section';
 export const Section = React.memo((props) => {
     const config = useConfig();
-    const { className, color, prefixCls = config.prefixCls, preserveColor, size, ...restProps } = props;
+    const { className, prefixCls = config.prefixCls, preserveColor, size, type, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'section'), [config, prefixCls]);
     return (React.createElement(Component, { className: classNames(rootCls, {
             [`${rootCls}-${size}`]: size !== undefined,
-            [`${rootCls}-${color}`]: color !== undefined,
+            [`${rootCls}-${type}`]: type !== undefined,
             [`${prefixCls || config.prefixCls}-preserve-color`]: preserveColor,
         }, className), component: defaultElement, ...restProps }));
 });

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

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

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

@@ -1,12 +1,12 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import { useConfig } from '../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../components/ConfigProvider';
 import { defaultSvgProps, getSize } from '../../components/Icon';
 import './index.scss';
 export const Spinner = React.memo((props) => {
     const config = useConfig();
     const { className, prefixCls = config.prefixCls, ratio, ...restProps } = props;
-    return (React.createElement("span", { className: classNames([`${prefixCls || config.prefixCls}-spinner`, `${prefixCls || config.prefixCls}-icon`], className), ...restProps },
-        React.createElement("svg", { ...defaultSvgProps, ...getSize(20, 20, ratio), viewBox: "0 0 20 20" },
-            React.createElement("circle", { fill: "none", stroke: "currentColor", cx: 10, cy: 10, r: 9 }))));
+    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` } }))));
 });

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

@@ -5,8 +5,6 @@
 //
 // ========================================================================
 
-@use 'sass:math';
-
 
 // Variables
 // ========================================================================
@@ -45,23 +43,24 @@
 
 .uk-spinner > * > * {
     animation: uk-spinner-dash var(--spinner-duration) var(--ease-in-out) infinite;
-    stroke-dasharray: var(--spinner-circumference);
+    stroke-dasharray: $spinner-circumference;
     stroke-dashoffset: 0;
     stroke-linecap: round;
     stroke-width: var(--spinner-stroke-width);
     transform-origin: center;
+    will-change: auto;
 }
 
 @keyframes uk-spinner-dash {
-    0% { stroke-dashoffset: var(--spinner-circumference); }
+    0% { stroke-dashoffset: $spinner-circumference; }
 
     50% {
-        stroke-dashoffset: calc(var(--spinner-circumference) / 4);
+        stroke-dashoffset: ($spinner-circumference * 0.25);
         transform: rotate(135deg);
     }
 
     100% {
-        stroke-dashoffset: var(--spinner-circumference);
+        stroke-dashoffset: $spinner-circumference;
         transform: rotate(450deg);
     }
 }
@@ -81,7 +80,5 @@
 :root {
     --spinner-size: #{$spinner-size};
     --spinner-stroke-width: #{$spinner-stroke-width};
-    --spinner-radius: #{floor(math.div(($spinner-size - $spinner-stroke-width), 2))}; // Minus stroke width to prevent overflow clipping
-    --spinner-circumference: #{round(2 * math.$pi * $spinner-radius)};
     --spinner-duration: #{$spinner-duration};
 }

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

@@ -0,0 +1,27 @@
+import { type SwitchChangeEventHandler, type SwitchClickEventHandler } from 'rc-switch';
+import * as React from 'react';
+import { type Direction } from '../../types';
+import './index.scss';
+export type SwitchSize = 'small';
+export type SwitchProps = {
+    autoFocus?: boolean;
+    checked?: boolean;
+    checkedChildren?: React.ReactNode;
+    className?: string;
+    defaultChecked?: boolean;
+    direction?: Direction;
+    disabled?: boolean;
+    id?: string;
+    loading?: boolean;
+    loadingIcon?: React.ReactNode;
+    prefixCls?: string;
+    size?: SwitchSize;
+    style?: React.CSSProperties;
+    tabIndex?: number;
+    title?: string;
+    unCheckedChildren?: React.ReactNode;
+    onChange?: SwitchChangeEventHandler;
+    onClick?: SwitchClickEventHandler;
+    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
+};
+export declare const Switch: React.MemoExoticComponent<React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>>;

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

@@ -0,0 +1,19 @@
+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';
+const ForwardedSwitch = React.forwardRef((props, ref) => {
+    const config = useConfig();
+    const { className, direction = config.direction, loading, loadingIcon, prefixCls = config.prefixCls, ...restProps } = props;
+    const { size } = 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 }));
+});
+export const Switch = React.memo(ForwardedSwitch);