@broxus/react-uikit 0.3.0 → 0.4.0

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

@@ -27,13 +27,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Left = void 0;
-const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
 const Component_1 = require("../../components/Component");
-const ConfrigProvider_1 = require("../../components/ConfrigProvider");
+const ConfigProvider_1 = require("../../components/ConfigProvider");
 const defaultElement = 'div';
 exports.Left = React.memo((props) => {
-    const config = (0, ConfrigProvider_1.useConfig)();
+    const config = (0, ConfigProvider_1.useConfig)();
     const { className, prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'navbar-left'), [config, prefixCls]);
     return React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: defaultElement, ...restProps });

package/dist/cjs/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/cjs/components/Navbar/Nav.js

@@ -27,12 +27,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Nav = void 0;
-const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const ConfrigProvider_1 = require("../../components/ConfrigProvider");
+const React = __importStar(require("react"));
+const ConfigProvider_1 = require("../../components/ConfigProvider");
 const Nav_1 = require("../../components/Nav");
 exports.Nav = React.memo((props) => {
-    const config = (0, ConfrigProvider_1.useConfig)();
+    const config = (0, ConfigProvider_1.useConfig)();
     const { className, prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'navbar'), [config, prefixCls]);
     return (React.createElement(Nav_1.Nav, { className: (0, classnames_1.default)(`${rootCls}-nav`, className), popupPrefixCls: `${rootCls}-dropdown`, ...restProps, mode: "horizontal" }));

package/dist/cjs/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/cjs/components/Navbar/Navbar.js

@@ -27,11 +27,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Navbar = void 0;
-const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const ConfrigProvider_1 = require("../../components/ConfrigProvider");
+const React = __importStar(require("react"));
+const ConfigProvider_1 = require("../../components/ConfigProvider");
 exports.Navbar = React.memo((props) => {
-    const config = (0, ConfrigProvider_1.useConfig)();
+    const config = (0, ConfigProvider_1.useConfig)();
     const { asContainer, className, prefixCls = config.prefixCls, transparent, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'navbar'), [config, prefixCls]);
     return (React.createElement("nav", { className: (0, classnames_1.default)(rootCls, {

package/dist/cjs/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/cjs/components/Navbar/Right.js

@@ -27,13 +27,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Right = void 0;
-const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
 const Component_1 = require("../../components/Component");
-const ConfrigProvider_1 = require("../../components/ConfrigProvider");
+const ConfigProvider_1 = require("../../components/ConfigProvider");
 const defaultElement = 'div';
 exports.Right = React.memo((props) => {
-    const config = (0, ConfrigProvider_1.useConfig)();
+    const config = (0, ConfigProvider_1.useConfig)();
     const { className, prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'navbar'), [config, prefixCls]);
     return React.createElement(Component_1.Component, { className: (0, classnames_1.default)(`${rootCls}-right`, className), component: defaultElement, ...restProps });

package/dist/cjs/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/cjs/components/Navbar/Toggle.js

@@ -27,13 +27,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Toggle = void 0;
-const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
 const Component_1 = require("../../components/Component");
-const ConfrigProvider_1 = require("../../components/ConfrigProvider");
+const ConfigProvider_1 = require("../../components/ConfigProvider");
 const defaultElement = 'div';
 exports.Toggle = React.memo((props) => {
-    const config = (0, ConfrigProvider_1.useConfig)();
+    const config = (0, ConfigProvider_1.useConfig)();
     const { className, icon, prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'navbar-toggle'), [config, prefixCls]);
     return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, {

package/dist/cjs/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/cjs/components/Navbar/index.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Navbar = void 0;
 const Center_1 = require("../../components/Navbar/Center");
 const Container_1 = require("../../components/Navbar/Container");
-const Navbar_1 = require("../../components/Navbar/Navbar");
 const Item_1 = require("../../components/Navbar/Item");
 const Left_1 = require("../../components/Navbar/Left");
 const Nav_1 = require("../../components/Navbar/Nav");
+const Navbar_1 = require("../../components/Navbar/Navbar");
 const Right_1 = require("../../components/Navbar/Right");
 const Toggle_1 = require("../../components/Navbar/Toggle");
 require("./index.scss");

package/dist/cjs/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/cjs/components/Progress/index.js

@@ -27,12 +27,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Progress = void 0;
-const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const ConfrigProvider_1 = require("../../components/ConfrigProvider");
+const React = __importStar(require("react"));
+const ConfigProvider_1 = require("../../components/ConfigProvider");
 require("./index.scss");
 exports.Progress = React.memo((props) => {
-    const config = (0, ConfrigProvider_1.useConfig)();
+    const config = (0, ConfigProvider_1.useConfig)();
     const { className, prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'progress'), [config, prefixCls]);
     return React.createElement("progress", { className: (0, classnames_1.default)(rootCls, className), ...restProps });

package/dist/cjs/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/cjs/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/cjs/components/Section/index.js

@@ -27,19 +27,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Section = void 0;
-const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
 const Component_1 = require("../../components/Component");
-const ConfrigProvider_1 = require("../../components/ConfrigProvider");
+const ConfigProvider_1 = require("../../components/ConfigProvider");
 require("./index.scss");
 const defaultElement = 'section';
 exports.Section = React.memo((props) => {
-    const config = (0, ConfrigProvider_1.useConfig)();
-    const { className, color, prefixCls = config.prefixCls, preserveColor, size, ...restProps } = props;
+    const config = (0, ConfigProvider_1.useConfig)();
+    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_1.Component, { className: (0, classnames_1.default)(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/cjs/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/cjs/components/Spinner/index.js

@@ -27,15 +27,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Spinner = void 0;
-const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const ConfrigProvider_1 = require("../../components/ConfrigProvider");
+const React = __importStar(require("react"));
+const ConfigProvider_1 = require("../../components/ConfigProvider");
 const Icon_1 = require("../../components/Icon");
 require("./index.scss");
 exports.Spinner = React.memo((props) => {
-    const config = (0, ConfrigProvider_1.useConfig)();
+    const config = (0, ConfigProvider_1.useConfig)();
     const { className, prefixCls = config.prefixCls, ratio, ...restProps } = props;
-    return (React.createElement("span", { className: (0, classnames_1.default)([`${prefixCls || config.prefixCls}-spinner`, `${prefixCls || config.prefixCls}-icon`], className), ...restProps },
-        React.createElement("svg", { ...Icon_1.defaultSvgProps, ...(0, Icon_1.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: (0, classnames_1.default)([`${prefixCls || config.prefixCls}-spinner`, `${prefixCls || config.prefixCls}-icon`], className), role: "status", ...restProps },
+        React.createElement("svg", { ...Icon_1.defaultSvgProps, ...(0, Icon_1.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/cjs/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/cjs/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/cjs/components/Switch/index.js

@@ -0,0 +1,48 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const rc_switch_1 = __importDefault(require("rc-switch"));
+const React = __importStar(require("react"));
+const ConfigProvider_1 = require("../../components/ConfigProvider");
+const Spinner_1 = require("../../components/Spinner");
+require("./index.scss");
+const ForwardedSwitch = React.forwardRef((props, ref) => {
+    const config = (0, ConfigProvider_1.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_1.Spinner, { className: `${rootCls}-loading-icon` })))), [loading, loadingIcon, rootCls]);
+    return (React.createElement(rc_switch_1.default, { ref: ref, className: (0, classnames_1.default)({
+            [`${rootCls}-small`]: size === 'small',
+            [`${rootCls}-loading`]: loading,
+            [`${rootCls}-rtl`]: direction === 'rtl',
+        }, className), prefixCls: rootCls, loadingIcon: mergedLoadingIcon, ...restProps }));
+});
+exports.Switch = React.memo(ForwardedSwitch);

package/dist/cjs/components/Switch/index.scss

@@ -0,0 +1,216 @@
+// Name:            Switch
+// Description:     Switch Selector
+//
+// Component:       `uk-switch`
+//
+// ========================================================================
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+/* ========================================================================
+   Component: Switch
+ ========================================================================== */
+
+.uk-switch {
+    appearance: none;
+    background: var(--switch-background);
+    border: var(--switch-border-width) var(--switch-border-style) var(--switch-border);
+    border-radius: var(--switch-border-radius);
+    box-sizing: content-box;
+    color: inherit;
+    cursor: pointer;
+    display: inline-block;
+    font: inherit;
+    height: var(--switch-height);
+    line-height: var(--switch-height);
+    margin: 0;
+    min-width: var(--switch-width);
+    padding: 0;
+    position: relative;
+    transition: all var(--transition-medium-fast-duration);
+    user-select: none;
+    vertical-align: middle;
+
+    @if mixin-exists(hook-switch) {
+        @include hook-switch;
+    }
+}
+
+.uk-switch:not(.uk-switch-disabled):hover::after {
+    visibility: visible;
+}
+
+.uk-switch-handle {
+    height: calc(var(--switch-height) - var(--switch-handle-offset) * 2);
+    inset-inline-start: var(--switch-handle-offset);
+    position: absolute;
+    top: var(--switch-handle-offset);
+    transition: all var(--transition-medium-fast-duration) var(--ease-in-out);
+    width: calc(var(--switch-height) - var(--switch-handle-offset) * 2);
+    z-index: 10;
+
+    @if mixin-exists(hook-switch-handle) {
+        @include hook-switch-handle;
+    }
+}
+
+.uk-switch-handle::before {
+    background: var(--switch-handle-background);
+    border-radius: var(--switch-handle-border-radius);
+    bottom: 0;
+    content: '';
+    inset-inline-end: 0;
+    inset-inline-start: 0;
+    position: absolute;
+    top: 0;
+    transition: all var(--transition-medium-fast-duration) var(--ease-in-out);
+}
+
+
+/* Inner
+ ========================================================================== */
+
+.uk-switch-inner {
+    border-radius: var(--switch-border-radius);
+    box-sizing: border-box;
+    display: block;
+    height: 100%;
+    overflow: hidden;
+    padding-inline-end: calc((var(--switch-height) + var(--switch-handle-offset)) / 2.6666);
+    padding-inline-start: calc(var(--switch-height) + var(--switch-handle-offset));
+    transition: padding-inline-start var(--transition-medium-fast-duration) var(--ease-in-out), padding-inline-end var(--transition-medium-fast-duration) var(--ease-in-out);
+}
+
+.uk-switch-inner-checked,
+.uk-switch-inner-unchecked {
+    display: block;
+    pointer-events: none;
+    transition: margin-inline-start var(--transition-medium-fast-duration) var(--ease-in-out), margin-inline-end var(--transition-medium-fast-duration) var(--ease-in-out);
+}
+
+.uk-switch-inner-checked {
+    margin-inline-end: calc(100% - var(--switch-height) + ((var(--switch-height) + var(--switch-handle-offset)) * 2));
+    margin-inline-start: calc(-100% + var(--switch-height) - ((var(--switch-height) + var(--switch-handle-offset)) * 2));
+}
+
+.uk-switch-inner-unchecked {
+    margin-inline-end: 0;
+    margin-inline-start: 0;
+    margin-top: calc(var(--switch-height) * -1);
+}
+
+
+/* States
+ ========================================================================== */
+
+// Active state
+.uk-switch:not(.uk-switch-disabled):active .uk-switch-handle::before {
+    inset-inline-end: -30%;
+    inset-inline-start: 0;
+}
+
+.uk-switch-checked:not(.uk-switch-disabled):active .uk-switch-handle::before {
+    inset-inline-end: 0;
+    inset-inline-start: -30%;
+}
+
+.uk-switch:not(.uk-switch-disabled, .uk-switch-checked):active .uk-switch-inner-unchecked {
+    margin-inline-end: calc(var(--switch-handle-offset) * -2);
+    margin-inline-start: calc(var(--switch-handle-offset) * 2);
+}
+
+.uk-switch-checked:not(.uk-switch-disabled):active .uk-switch-inner-checked {
+    margin-inline-end: calc(var(--switch-handle-offset) * 2);
+    margin-inline-start: calc(var(--switch-handle-offset) * -2);
+}
+
+// Checked state
+.uk-switch-checked {
+    background: var(--switch-checked-background);
+
+    @if mixin-exists(hook-switch-checked) {
+        @include hook-switch-checked;
+    }
+}
+
+.uk-switch-checked::after {
+    animation: uk-wave-effect 0.36s var(--ease-in-out);
+    animation-fill-mode: backwards;
+    border: var(--switch-border-width) solid var(--switch-checked-background);
+    border-radius: var(--switch-border-radius);
+    box-sizing: border-box;
+    content: '';
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    visibility: hidden;
+    width: 100%;
+}
+
+.uk-switch-checked .uk-switch-handle {
+    inset-inline-start: calc(100% - var(--switch-height) + var(--switch-handle-offset));
+
+    @if mixin-exists(hook-switch-checked-handle) {
+        @include hook-switch-checked-handle;
+    }
+}
+
+.uk-switch-checked .uk-switch-handle::before {
+    background: var(--switch-handle-checked-background);
+}
+
+.uk-switch-checked .uk-switch-inner {
+    padding-inline-end: calc(var(--switch-height) + var(--switch-handle-offset));
+    padding-inline-start: calc((var(--switch-height) + var(--switch-handle-offset)) / 2.6666);
+}
+
+.uk-switch-checked .uk-switch-inner-checked {
+    margin-inline-end: 0;
+    margin-inline-start: 0;
+}
+
+.uk-switch-checked .uk-switch-inner-unchecked {
+    margin-inline-end: calc(-100% + var(--switch-height) - ((var(--switch-height) + var(--switch-handle-offset)) * 2));
+    margin-inline-start: calc(100% - var(--switch-height) + ((var(--switch-height) + var(--switch-handle-offset)) * 2));
+}
+
+// Disabled
+.uk-switch-disabled {
+    cursor: not-allowed;
+    opacity: 0.65;
+
+    @if mixin-exists(hook-switch-disabled) {
+        @include hook-switch-disabled;
+    }
+}
+
+
+/* Hooks
+ ========================================================================== */
+
+@if mixin-exists(hook-switch-misc) {
+    @include hook-switch-misc;
+}
+
+
+/* Vars
+ ========================================================================== */
+
+:root {
+    --switch-background: #{$switch-background};
+    --switch-border: var(--global-border);
+    --switch-border-style: var(--global-border-style);
+    --switch-border-width: var(--global-border-width);
+    --switch-checked-background: var(--global-success-background);
+    --switch-border-radius: #{$switch-border-radius};
+    --switch-height: #{$switch-height};
+    --switch-width: #{$switch-width};
+    --switch-handle-background: var(--global-background);
+    --switch-handle-checked-background: var(--global-background);
+    --switch-handle-border-radius: #{$switch-handle-border-radius};
+    --switch-handle-offset: #{$switch-handle-offset};
+}

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

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

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

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../../components/Tabs/hooks/useAnimateConfig"), exports);
+__exportStar(require("../../../components/Tabs/hooks/useLegacyItems"), exports);

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

@@ -0,0 +1,3 @@
+import { type AnimatedConfig } from 'rc-tabs/lib/interface';
+import { type TabsProps } from '../../../components/Tabs';
+export declare const useAnimateConfig: (prefixCls: string, animated?: TabsProps['animated']) => AnimatedConfig;