@broxus/react-uikit 0.1.1 → 0.1.2

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

@@ -0,0 +1,41 @@
+"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.Right = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Component_1 = require("../Component");
+const defaultElement = 'div';
+function Right(props) {
+    const { className, ...restProps } = props;
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)('uk-navbar-right', className), component: defaultElement, ...restProps }));
+}
+exports.Right = Right;
+if (process.env.NODE_ENV !== 'production') {
+    Right.displayName = 'Navbar.Right';
+}

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../Component';
+export declare type NavbarToggleProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, {
+    icon?: boolean;
+}>;
+declare const defaultElement = "div";
+export declare function Toggle<E extends React.ElementType = typeof defaultElement>(props: NavbarToggleProps<E>): JSX.Element;
+export declare namespace Toggle {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1,43 @@
+"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.Toggle = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Component_1 = require("../Component");
+const defaultElement = 'div';
+function Toggle(props) {
+    const { className, icon = false, ...restProps } = props;
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)('uk-navbar-toggle', {
+            'uk-navbar-toggle-icon': icon,
+        }, className), component: defaultElement, ...restProps }));
+}
+exports.Toggle = Toggle;
+if (process.env.NODE_ENV !== 'production') {
+    Toggle.displayName = 'Navbar.Toggle';
+}

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Center } from './Center';
+import { Container } from './Container';
+import { Item } from './Item';
+import { Left } from './Left';
+import { Nav } from './Nav';
+import { Right } from './Right';
+import { Toggle } from './Toggle';
+import type { NavbarProps } from './Navbar';
+import './index.scss';
+export type { NavbarProps };
+export interface CompoundedNavbar extends React.FunctionComponent<NavbarProps> {
+    Center: typeof Center;
+    Container: typeof Container;
+    Item: typeof Item;
+    Left: typeof Left;
+    Nav: typeof Nav;
+    Right: typeof Right;
+    Toggle: typeof Toggle;
+}
+export declare const Navbar: CompoundedNavbar;

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

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

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../Component';
+import './index.scss';
+export declare type SectionOwnProps = {
+    color?: 'default' | 'muted' | 'primary' | 'secondary' | 'tertiary';
+    preserveColor?: boolean;
+    size?: 'xsmall' | 'small' | 'large' | 'xlarge';
+};
+export declare type SectionProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, SectionOwnProps>;
+declare const defaultElement = "section";
+export declare function Section<E extends React.ElementType = typeof defaultElement>(props: SectionProps<E>): JSX.Element;
+export {};

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

@@ -0,0 +1,43 @@
+"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.Section = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Component_1 = require("../Component");
+require("./index.scss");
+const defaultElement = 'section';
+function Section(props) {
+    const { className, color, preserveColor, size, ...restProps } = props;
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)('uk-section', {
+            [`uk-section-${size}`]: size !== undefined,
+            [`uk-section-${color}`]: color !== undefined,
+            'uk-preserve-color': preserveColor,
+        }, className), component: defaultElement, ...restProps }));
+}
+exports.Section = Section;

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import './index.scss';
+interface Props extends React.HTMLAttributes<HTMLSpanElement> {
+    ratio?: number;
+}
+export declare function Spinner(props: Props): JSX.Element;
+export {};

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

@@ -0,0 +1,43 @@
+"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.Spinner = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Icon_1 = require("../Icon");
+require("./index.scss");
+function Spinner(props) {
+    const { className, ratio, ...restProps } = props;
+    return (React.createElement("span", { className: (0, classnames_1.default)([
+            'uk-spinner',
+            'uk-icon',
+        ], className), ...restProps },
+        React.createElement("svg", { ...Icon_1.defaultProps, ...(0, Icon_1.getSize)(20, 20, ratio), viewBox: "0 0 30 30" },
+            React.createElement("circle", { fill: "none", stroke: "currentColor", cx: "15", cy: "15", r: "14" }))));
+}
+exports.Spinner = Spinner;

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { TabPane } from 'rc-tabs';
+import type { TabPaneProps, TabsProps } from 'rc-tabs';
+import './index.scss';
+export type { TabPaneProps };
+export declare type TabType = 'line' | 'card' | 'editable-card';
+export declare type TabsPosition = 'top' | 'right' | 'bottom' | 'left';
+export interface TabProps extends Exclude<TabsProps, 'editable'> {
+    addIcon?: React.ReactNode;
+    centered?: boolean;
+    hideAdd?: boolean;
+    prefixCls?: string;
+    size?: string;
+    type?: TabType;
+    onEdit?: (e: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => void;
+}
+export declare function Tabs(props: TabProps): JSX.Element;
+export declare namespace Tabs {
+    var Pane: typeof TabPane;
+}

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

@@ -0,0 +1,60 @@
+"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.Tabs = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const rc_tabs_1 = __importStar(require("rc-tabs"));
+const ConfrigProvider_1 = require("../ConfrigProvider");
+require("./index.scss");
+const Icon_1 = require("../Icon");
+function Tabs(props) {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { addIcon, centered, className, direction, hideAdd, moreIcon = React.createElement(Icon_1.Icon, { icon: "more_horizontal" }), prefixCls = `${config.prefixCls}-tabs`, size, type, onEdit, ...restProps } = props;
+    let editable;
+    if (type === 'editable-card') {
+        editable = {
+            addIcon: addIcon || React.createElement(Icon_1.Icon, { icon: "add" }),
+            removeIcon: React.createElement(Icon_1.Icon, { icon: "close" }),
+            showAdd: hideAdd !== true,
+            // eslint-disable-next-line sort-keys
+            onEdit: (editType, { key, event }) => {
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                onEdit?.(editType === 'add' ? event : key, editType);
+            },
+        };
+    }
+    return (React.createElement(rc_tabs_1.default, { direction: direction, moreTransitionName: `${config.prefixCls}-motion-slide-up`, ...restProps, className: (0, classnames_1.default)({
+            [`${prefixCls}-${size}`]: size,
+            [`${prefixCls}-card`]: ['card', 'editable-card'].includes(type),
+            [`${prefixCls}-editable-card`]: type === 'editable-card',
+            [`${prefixCls}-centered`]: centered,
+        }, className), editable: editable, moreIcon: moreIcon, prefixCls: prefixCls }));
+}
+exports.Tabs = Tabs;
+Tabs.Pane = rc_tabs_1.TabPane;

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { BreakpointsConfig } from '../../types';
+import type { PolymorphicComponentProps } from '../Component';
+export declare type TextAlign = 'left' | 'right' | 'center' | 'justify';
+export declare type TextOwnProps = {
+    align?: TextAlign | BreakpointsConfig<TextAlign>;
+    className?: string;
+    color?: 'meta' | 'muted' | 'emphasis' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger';
+    column?: number | BreakpointsConfig<number>;
+    decoration?: 'none';
+    dropcap?: boolean;
+    italic?: boolean;
+    size?: 'default' | 'small' | 'medium' | 'large' | 'lead';
+    transform?: 'capitalize' | 'uppercase' | 'lowercase';
+    verticalAlign?: 'top' | 'middle' | 'bottom' | 'baseline';
+    weight?: 'thin' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'lighter' | 'bolder';
+    wrap?: 'truncate' | 'break' | 'nowrap';
+};
+export declare type TextProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, TextOwnProps>;
+declare const defaultElement = "p";
+export declare function Text<E extends React.ElementType = typeof defaultElement>(props: TextProps<E>): JSX.Element;
+export {};

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

@@ -0,0 +1,55 @@
+"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.Text = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("../../utils");
+const Component_1 = require("../Component");
+const defaultElement = 'p';
+function Text(props) {
+    const { align, className, color, column, decoration, dropcap, italic, size, transform, verticalAlign, weight, wrap, ...restProps } = props;
+    const alignClassName = React.useMemo(() => (typeof align === 'string'
+        ? `uk-text-${align}`
+        : (0, utils_1.getBreakpointsConfigClasses)('uk', 'align', align)), [align]);
+    const columnClassName = React.useMemo(() => (typeof column === 'number'
+        ? `uk-column-1-${column}`
+        : (0, utils_1.getBreakpointsConfigClasses)('uk', 'column-1', column)), [column]);
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(columnClassName, alignClassName, {
+            'uk-dropcap': dropcap,
+            [`uk-text-${color}`]: color !== undefined,
+            [`uk-text-${size}`]: size !== undefined,
+            [`uk-text-${transform}`]: transform !== undefined,
+            [`uk-text-${verticalAlign}`]: verticalAlign !== undefined,
+            [`uk-text-${weight}`]: weight !== undefined,
+            [`uk-text-${wrap}`]: wrap !== undefined,
+            'uk-text-decoration-none': decoration === 'none',
+            'uk-text-italic': italic,
+        }, className), component: defaultElement, ...restProps }));
+}
+exports.Text = Text;

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

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

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

@@ -0,0 +1,43 @@
+"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.Tile = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Component_1 = require("../Component");
+require("./index.scss");
+const defaultElement = 'div';
+function Tile(props) {
+    const { className, preserveColor, size, type, ...restProps } = props;
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)('uk-tile', {
+            [`uk-tile-${size}`]: size !== undefined,
+            [`uk-tile-${type}`]: type !== undefined,
+            'uk-preserve-color': preserveColor,
+        }, className), component: defaultElement, ...restProps }));
+}
+exports.Tile = Tile;

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../Component';
+import type { WidthBreakpointsConfig, WidthSize } from './types';
+export interface WidthOwnProps extends WidthBreakpointsConfig {
+    size?: WidthSize;
+}
+export declare type WidthProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, WidthOwnProps>;
+declare const defaultElement = "div";
+export declare function Width<E extends React.ElementType = typeof defaultElement>(props: WidthProps<E>): JSX.Element;
+export {};

package/dist/cjs/components/Width/Width.js

@@ -0,0 +1,39 @@
+"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.Width = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Component_1 = require("../Component");
+const utils_1 = require("./utils");
+const defaultElement = 'div';
+function Width(props) {
+    const { className, size, s, m, l, xl, ...restProps } = props;
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)((0, utils_1.getWidthClassname)(size, 'uk'), (0, utils_1.getWidthClassname)({ l, m, s, xl }, 'uk'), className), component: defaultElement, ...restProps }));
+}
+exports.Width = Width;

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

@@ -0,0 +1,4 @@
+import './index.scss';
+export * from './Width';
+export * from './types';
+export * from './utils';

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

@@ -0,0 +1,20 @@
+"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 });
+require("./index.scss");
+__exportStar(require("./Width"), exports);
+__exportStar(require("./types"), exports);
+__exportStar(require("./utils"), exports);

package/dist/cjs/components/Width/types.d.ts

@@ -0,0 +1,6 @@
+import type { BreakpointsConfig } from '../../types';
+export declare type WidthSize = 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge' | 'auto' | 'expand' | '1-1' | '1-2' | '1-3' | '1-4' | '1-5' | '1-6' | '2-3' | '2-5' | '3-4' | '3-5' | '4-5' | '5-6';
+export declare type BreakpointsWidthSize = Exclude<WidthSize, 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'>;
+export declare type WidthBreakpointsConfig = BreakpointsConfig<BreakpointsWidthSize>;
+export declare type ChildWidthSize = 1 | 2 | 3 | 4 | 5 | 6 | 'auto' | 'expand';
+export declare type ChildWidthBreakpointsConfig = BreakpointsConfig<ChildWidthSize>;

package/dist/cjs/components/Width/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,5 @@
+import type { ChildWidthBreakpointsConfig, ChildWidthSize, WidthBreakpointsConfig, WidthSize } from './types';
+export declare function getWidthClassname(value: WidthSize, prefixCls?: string): string;
+export declare function getWidthClassname(config: WidthBreakpointsConfig, prefixCl?: string): string;
+export declare function getChildWidthClassname(value: ChildWidthSize, prefixCls?: string): string;
+export declare function getChildWidthClassname(config: ChildWidthBreakpointsConfig, prefixCls?: string): string[];

package/dist/cjs/components/Width/utils.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getChildWidthClassname = exports.getWidthClassname = void 0;
+const utils_1 = require("../../utils");
+function getWidthClassname(valueOrConfig, prefixCls = 'uk') {
+    if (typeof valueOrConfig === 'string') {
+        return `${prefixCls}-width-${valueOrConfig}`;
+    }
+    if (typeof valueOrConfig === 'object' && !Array.isArray(valueOrConfig)) {
+        return (0, utils_1.getBreakpointsConfigClasses)(prefixCls, 'width', valueOrConfig);
+    }
+    return undefined;
+}
+exports.getWidthClassname = getWidthClassname;
+function getChildWidthClassname(valueOrConfig, prefixCls = 'uk') {
+    if (typeof valueOrConfig === 'string' || typeof valueOrConfig === 'number') {
+        if (typeof valueOrConfig === 'string' && ['auto', 'expand'].includes(valueOrConfig)) {
+            return `${prefixCls}-child-width-${valueOrConfig}`;
+        }
+        return `${prefixCls}-child-width-1-${valueOrConfig}`;
+    }
+    if (typeof valueOrConfig === 'object' && !Array.isArray(valueOrConfig)) {
+        return Object.entries(valueOrConfig).map(([key, value]) => `${getChildWidthClassname(value)}${key !== 'default' ? `@${key}` : ''}`);
+    }
+    return undefined;
+}
+exports.getChildWidthClassname = getChildWidthClassname;

package/dist/cjs/index.d.ts

@@ -0,0 +1,40 @@
+export * from './components/Accordion';
+export * from './components/Alert';
+export * from './components/Align';
+export * from './components/Article';
+export * from './components/Badge';
+export * from './components/Breadcrumb';
+export * from './components/Button';
+export * from './components/Card';
+export * from './components/Close';
+export * from './components/Component';
+export * from './components/ConfrigProvider';
+export * from './components/Container';
+export * from './components/Control';
+export * from './components/Cover';
+export * from './components/DescriptionList';
+export * from './components/Divider';
+export * from './components/Dotnav';
+export * from './components/Drawer';
+export * from './components/Drop';
+export * from './components/Dropdown';
+export * from './components/Flex';
+export * from './components/Form';
+export * from './components/Grid';
+export * from './components/Heading';
+export * from './components/Icon';
+export * from './components/Iconnav';
+export * from './components/Label';
+export * from './components/Link';
+export * from './components/List';
+export * from './components/Modal';
+export * from './components/Nav';
+export * from './components/Navbar';
+export * from './components/Section';
+export * from './components/Spinner';
+export * from './components/Tabs';
+export * from './components/Text';
+export * from './components/Tile';
+export * from './components/Width';
+export * from './types';
+export * from './utils';