@broxus/react-uikit 0.21.0 → 0.23.0

package/dist/assets/width.css

@@ -0,0 +1,538 @@
+/* ========================================================================
+   Component: Width
+ ========================================================================== */
+/* Equal child widths
+ ========================================================================== */
+[class*=uk-child-width] > * {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.uk-child-width-1-2 > * {
+  width: 50%;
+}
+
+.uk-child-width-1-3 > * {
+  width: calc(100% * 1 / 3.001);
+}
+
+.uk-child-width-1-4 > * {
+  width: 25%;
+}
+
+.uk-child-width-1-5 > * {
+  width: 20%;
+}
+
+.uk-child-width-1-6 > * {
+  width: calc(100% * 1 / 6.001);
+}
+
+.uk-child-width-auto > * {
+  width: auto;
+}
+
+/*
+ * 1. Reset the `min-width`, which is set to auto by default, because
+ *    flex items won't shrink below their minimum intrinsic content size.
+ *    Using `1px` instead of `0`, so items still wrap into the next line,
+ *    if they have zero width and padding and the predecessor is 100% wide.
+ */
+.uk-child-width-expand > :not([class*=uk-width]) {
+  flex: 1;
+  /* 1 */
+  min-width: 1px;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: 640px) {
+  .uk-child-width-1-1\@s > * {
+    width: 100%;
+  }
+  .uk-child-width-1-2\@s > * {
+    width: 50%;
+  }
+  .uk-child-width-1-3\@s > * {
+    width: calc(100% * 1 / 3.001);
+  }
+  .uk-child-width-1-4\@s > * {
+    width: 25%;
+  }
+  .uk-child-width-1-5\@s > * {
+    width: 20%;
+  }
+  .uk-child-width-1-6\@s > * {
+    width: calc(100% * 1 / 6.001);
+  }
+  .uk-child-width-auto\@s > * {
+    width: auto;
+  }
+  .uk-child-width-expand\@s > :not([class*=uk-width]) {
+    flex: 1;
+    min-width: 1px;
+  }
+}
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-child-width-1-1\@m > * {
+    width: 100%;
+  }
+  .uk-child-width-1-2\@m > * {
+    width: 50%;
+  }
+  .uk-child-width-1-3\@m > * {
+    width: calc(100% * 1 / 3.001);
+  }
+  .uk-child-width-1-4\@m > * {
+    width: 25%;
+  }
+  .uk-child-width-1-5\@m > * {
+    width: 20%;
+  }
+  .uk-child-width-1-6\@m > * {
+    width: calc(100% * 1 / 6.001);
+  }
+  .uk-child-width-auto\@m > * {
+    width: auto;
+  }
+  .uk-child-width-expand\@m > :not([class*=uk-width]) {
+    flex: 1;
+    min-width: 1px;
+  }
+}
+/* Desktop and bigger */
+@media (min-width: 1200px) {
+  .uk-child-width-1-1\@l > * {
+    width: 100%;
+  }
+  .uk-child-width-1-2\@l > * {
+    width: 50%;
+  }
+  .uk-child-width-1-3\@l > * {
+    width: calc(100% * 1 / 3.001);
+  }
+  .uk-child-width-1-4\@l > * {
+    width: 25%;
+  }
+  .uk-child-width-1-5\@l > * {
+    width: 20%;
+  }
+  .uk-child-width-1-6\@l > * {
+    width: calc(100% * 1 / 6.001);
+  }
+  .uk-child-width-auto\@l > * {
+    width: auto;
+  }
+  .uk-child-width-expand\@l > :not([class*=uk-width]) {
+    flex: 1;
+    min-width: 1px;
+  }
+}
+/* Large screen and bigger */
+@media (min-width: 1600px) {
+  .uk-child-width-1-1\@xl > * {
+    width: 100%;
+  }
+  .uk-child-width-1-2\@xl > * {
+    width: 50%;
+  }
+  .uk-child-width-1-3\@xl > * {
+    width: calc(100% * 1 / 3.001);
+  }
+  .uk-child-width-1-4\@xl > * {
+    width: 25%;
+  }
+  .uk-child-width-1-5\@xl > * {
+    width: 20%;
+  }
+  .uk-child-width-1-6\@xl > * {
+    width: calc(100% * 1 / 6.001);
+  }
+  .uk-child-width-auto\@xl > * {
+    width: auto;
+  }
+  .uk-child-width-expand\@xl > :not([class*=uk-width]) {
+    flex: 1;
+    min-width: 1px;
+  }
+}
+/* Single Widths
+ ========================================================================== */
+/*
+ * 1. `max-width` is needed for the pixel-based classes
+ */
+[class*=uk-width] {
+  box-sizing: border-box;
+  /* 1 */
+  max-width: 100%;
+  width: 100%;
+}
+
+/* Halves */
+.uk-width-1-2 {
+  width: 50%;
+}
+
+/* Thirds */
+.uk-width-1-3 {
+  width: calc(100% * 1 / 3.001);
+}
+
+.uk-width-2-3 {
+  width: calc(100% * 2 / 3.001);
+}
+
+/* Quarters */
+.uk-width-1-4 {
+  width: 25%;
+}
+
+.uk-width-3-4 {
+  width: 75%;
+}
+
+/* Fifths */
+.uk-width-1-5 {
+  width: 20%;
+}
+
+.uk-width-2-5 {
+  width: 40%;
+}
+
+.uk-width-3-5 {
+  width: 60%;
+}
+
+.uk-width-4-5 {
+  width: 80%;
+}
+
+/* Sixths */
+.uk-width-1-6 {
+  width: calc(100% * 1 / 6.001);
+}
+
+.uk-width-5-6 {
+  width: calc(100% * 5 / 6.001);
+}
+
+/* Pixel */
+.uk-width-small {
+  width: var(--width-small-width);
+}
+
+.uk-width-medium {
+  width: var(--width-medium-width);
+}
+
+.uk-width-large {
+  width: var(--width-large-width);
+}
+
+.uk-width-xlarge {
+  width: var(--width-xlarge-width);
+}
+
+.uk-width-2xlarge {
+  width: var(--width-2xlarge-width);
+}
+
+/* Auto */
+.uk-width-auto {
+  width: auto;
+}
+
+/* Expand */
+.uk-width-expand {
+  flex: 1;
+  min-width: 1px;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: 640px) {
+  /* Whole */
+  .uk-width-1-1\@s {
+    width: 100%;
+  }
+  /* Halves */
+  .uk-width-1-2\@s {
+    width: 50%;
+  }
+  /* Thirds */
+  .uk-width-1-3\@s {
+    width: calc(100% * 1 / 3.001);
+  }
+  .uk-width-2-3\@s {
+    width: calc(100% * 2 / 3.001);
+  }
+  /* Quarters */
+  .uk-width-1-4\@s {
+    width: 25%;
+  }
+  .uk-width-3-4\@s {
+    width: 75%;
+  }
+  /* Fifths */
+  .uk-width-1-5\@s {
+    width: 20%;
+  }
+  .uk-width-2-5\@s {
+    width: 40%;
+  }
+  .uk-width-3-5\@s {
+    width: 60%;
+  }
+  .uk-width-4-5\@s {
+    width: 80%;
+  }
+  /* Sixths */
+  .uk-width-1-6\@s {
+    width: calc(100% * 1 / 6.001);
+  }
+  .uk-width-5-6\@s {
+    width: calc(100% * 5 / 6.001);
+  }
+  /* Pixel */
+  .uk-width-small\@s {
+    width: var(--width-small-width);
+  }
+  .uk-width-medium\@s {
+    width: var(--width-medium-width);
+  }
+  .uk-width-large\@s {
+    width: var(--width-large-width);
+  }
+  .uk-width-xlarge\@s {
+    width: var(--width-xlarge-width);
+  }
+  .uk-width-2xlarge\@s {
+    width: var(--width-2xlarge-width);
+  }
+  /* Auto */
+  .uk-width-auto\@s {
+    width: auto;
+  }
+  /* Expand */
+  .uk-width-expand\@s {
+    flex: 1;
+    min-width: 1px;
+  }
+}
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  /* Whole */
+  .uk-width-1-1\@m {
+    width: 100%;
+  }
+  /* Halves */
+  .uk-width-1-2\@m {
+    width: 50%;
+  }
+  /* Thirds */
+  .uk-width-1-3\@m {
+    width: calc(100% * 1 / 3.001);
+  }
+  .uk-width-2-3\@m {
+    width: calc(100% * 2 / 3.001);
+  }
+  /* Quarters */
+  .uk-width-1-4\@m {
+    width: 25%;
+  }
+  .uk-width-3-4\@m {
+    width: 75%;
+  }
+  /* Fifths */
+  .uk-width-1-5\@m {
+    width: 20%;
+  }
+  .uk-width-2-5\@m {
+    width: 40%;
+  }
+  .uk-width-3-5\@m {
+    width: 60%;
+  }
+  .uk-width-4-5\@m {
+    width: 80%;
+  }
+  /* Sixths */
+  .uk-width-1-6\@m {
+    width: calc(100% * 1 / 6.001);
+  }
+  .uk-width-5-6\@m {
+    width: calc(100% * 5 / 6.001);
+  }
+  /* Pixel */
+  .uk-width-small\@m {
+    width: var(--width-small-width);
+  }
+  .uk-width-medium\@m {
+    width: var(--width-medium-width);
+  }
+  .uk-width-large\@m {
+    width: var(--width-large-width);
+  }
+  .uk-width-xlarge\@m {
+    width: var(--width-xlarge-width);
+  }
+  .uk-width-2xlarge\@m {
+    width: var(--width-2xlarge-width);
+  }
+  /* Auto */
+  .uk-width-auto\@m {
+    width: auto;
+  }
+  /* Expand */
+  .uk-width-expand\@m {
+    flex: 1;
+    min-width: 1px;
+  }
+}
+/* Desktop and bigger */
+@media (min-width: 1200px) {
+  /* Whole */
+  .uk-width-1-1\@l {
+    width: 100%;
+  }
+  /* Halves */
+  .uk-width-1-2\@l {
+    width: 50%;
+  }
+  /* Thirds */
+  .uk-width-1-3\@l {
+    width: calc(100% * 1 / 3.001);
+  }
+  .uk-width-2-3\@l {
+    width: calc(100% * 2 / 3.001);
+  }
+  /* Quarters */
+  .uk-width-1-4\@l {
+    width: 25%;
+  }
+  .uk-width-3-4\@l {
+    width: 75%;
+  }
+  /* Fifths */
+  .uk-width-1-5\@l {
+    width: 20%;
+  }
+  .uk-width-2-5\@l {
+    width: 40%;
+  }
+  .uk-width-3-5\@l {
+    width: 60%;
+  }
+  .uk-width-4-5\@l {
+    width: 80%;
+  }
+  /* Sixths */
+  .uk-width-1-6\@l {
+    width: calc(100% * 1 / 6.001);
+  }
+  .uk-width-5-6\@l {
+    width: calc(100% * 5 / 6.001);
+  }
+  /* Pixel */
+  .uk-width-small\@l {
+    width: var(--width-small-width);
+  }
+  .uk-width-medium\@l {
+    width: var(--width-medium-width);
+  }
+  .uk-width-large\@l {
+    width: var(--width-large-width);
+  }
+  .uk-width-xlarge\@l {
+    width: var(--width-xlarge-width);
+  }
+  .uk-width-2xlarge\@l {
+    width: var(--width-2xlarge-width);
+  }
+  /* Auto */
+  .uk-width-auto\@l {
+    width: auto;
+  }
+  /* Expand */
+  .uk-width-expand\@l {
+    flex: 1;
+    min-width: 1px;
+  }
+}
+/* Large screen and bigger */
+@media (min-width: 1600px) {
+  /* Whole */
+  .uk-width-1-1\@xl {
+    width: 100%;
+  }
+  /* Halves */
+  .uk-width-1-2\@xl {
+    width: 50%;
+  }
+  /* Thirds */
+  .uk-width-1-3\@xl {
+    width: calc(100% * 1 / 3.001);
+  }
+  .uk-width-2-3\@xl {
+    width: calc(100% * 2 / 3.001);
+  }
+  /* Quarters */
+  .uk-width-1-4\@xl {
+    width: 25%;
+  }
+  .uk-width-3-4\@xl {
+    width: 75%;
+  }
+  /* Fifths */
+  .uk-width-1-5\@xl {
+    width: 20%;
+  }
+  .uk-width-2-5\@xl {
+    width: 40%;
+  }
+  .uk-width-3-5\@xl {
+    width: 60%;
+  }
+  .uk-width-4-5\@xl {
+    width: 80%;
+  }
+  /* Sixths */
+  .uk-width-1-6\@xl {
+    width: calc(100% * 1 / 6.001);
+  }
+  .uk-width-5-6\@xl {
+    width: calc(100% * 5 / 6.001);
+  }
+  /* Pixel */
+  .uk-width-small\@xl {
+    width: var(--width-small-width);
+  }
+  .uk-width-medium\@xl {
+    width: var(--width-medium-width);
+  }
+  .uk-width-large\@xl {
+    width: var(--width-large-width);
+  }
+  .uk-width-xlarge\@xl {
+    width: var(--width-xlarge-width);
+  }
+  .uk-width-2xlarge\@xl {
+    width: var(--width-2xlarge-width);
+  }
+  /* Auto */
+  .uk-width-auto\@xl {
+    width: auto;
+  }
+  /* Expand */
+  .uk-width-expand\@xl {
+    flex: 1;
+    min-width: 1px;
+  }
+}
+:root {
+  --width-small-width: 150px;
+  --width-medium-width: 300px;
+  --width-large-width: 450px;
+  --width-xlarge-width: 600px;
+  --width-2xlarge-width: 750px;
+}

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

@@ -1,9 +1,10 @@
 import { type CollapseProps } from '@rc-component/collapse';
 import * as React from 'react';
+import { type Direction } from '../../types';
 export interface AccordionProps extends CollapseProps {
-    direction?: string;
+    direction?: Direction;
 }
-export declare function Accordion(props: AccordionProps): React.JSX.Element;
+export declare function Accordion({ className, direction, ...props }: AccordionProps): React.ReactElement;
 export declare namespace Accordion {
     var displayName: string;
 }

package/dist/cjs/components/Accordion/Accordion.js

@@ -42,9 +42,9 @@ const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const utils_1 = require("../../utils");
-function Accordion(props) {
+function Accordion({ className, direction, ...props }) {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { className, direction, prefixCls = config.prefixCls, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'accordion'), [config, prefixCls]);
     return (React.createElement(collapse_1.default, { className: (0, classnames_1.default)({
             [`${rootCls}-rtl`]: direction === 'rtl',

package/dist/cjs/components/Accordion/Item.d.ts

@@ -3,11 +3,7 @@ import * as React from 'react';
 export interface AccordionItemProps extends Omit<CollapsePanelProps, 'expandIcon' | 'prefixCls'> {
     expandIcon?: (props: AccordionItemProps) => React.ReactNode;
 }
-/**
- * Use Accordion items props instead
- * @deprecated
- */
-export declare function Item(props: React.PropsWithChildren<AccordionItemProps>): React.JSX.Element;
+export declare function Item({ expandIcon, ...props }: React.PropsWithChildren<AccordionItemProps>): React.ReactElement;
 export declare namespace Item {
     var displayName: string;
 }

package/dist/cjs/components/Accordion/Item.js

@@ -37,15 +37,10 @@ exports.Item = Item;
 const collapse_1 = require("@rc-component/collapse");
 const React = __importStar(require("react"));
 const Icon_1 = require("../../components/Icon");
-/**
- * Use Accordion items props instead
- * @deprecated
- */
-function Item(props) {
-    const { expandIcon, ...restProps } = props;
+function Item({ expandIcon, ...props }) {
     const mergedExpandIcon = React.useMemo(() => expandIcon
         || (({ isActive }) => (React.createElement(Icon_1.Icon, { icon: isActive ? 'expand_more' : 'chevron_right' }))), [expandIcon]);
-    return React.createElement(collapse_1.Panel, { expandIcon: mergedExpandIcon, ...restProps });
+    return React.createElement(collapse_1.Panel, { expandIcon: mergedExpandIcon, ...props });
 }
 if (process.env.NODE_ENV !== 'production') {
     Item.displayName = 'Accordion.Item';

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

@@ -1,7 +1,7 @@
 import type * as React from 'react';
 import { type AccordionProps } from '../../components/Accordion/Accordion';
 import { type AccordionItemProps, Item } from '../../components/Accordion/Item';
-export type { AccordionProps, AccordionItemProps };
+export type { AccordionItemProps, AccordionProps };
 export interface Accordion extends React.FunctionComponent<AccordionProps> {
     Item: typeof Item;
 }

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

@@ -42,25 +42,23 @@ const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const Close_1 = require("../../components/Close");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
-exports.Alert = React.forwardRef((props, ref) => {
+exports.Alert = React.forwardRef(({ children, className, closable = true, severity, style, onClose, onClosed, ...props }, ref) => {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { children, className, closable = true, closeIcon = config.alert?.closeIcon, prefixCls = config.prefixCls, severity, style, onClose, onClosed, ...restProps } = props;
+    const { closeIcon = config.alert?.closeIcon, prefixCls = config.prefixCls, ...restProps } = props;
     const [closed, setClosed] = React.useState(false);
     const close = React.useCallback(() => {
         onClose?.();
         setClosed(true);
     }, [onClose]);
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'alert'), [config, prefixCls]);
-    React.useImperativeHandle(ref, () => ({
-        close,
-    }), [close]);
+    React.useImperativeHandle(ref, () => ({ close }), [close]);
     return (React.createElement(motion_1.default, { motionAppear: false, motionEnter: false, motionName: `${rootCls}-motion`, visible: !closed, onLeaveEnd: onClosed, onLeaveStart: node => ({
             maxHeight: node.offsetHeight,
         }) }, ({ className: motionClassName, style: motionStyle }) => (React.createElement("div", { className: (0, classnames_1.default)(rootCls, {
             [`${rootCls}-${severity}`]: severity !== undefined,
         }, className, motionClassName), "data-show": !closed, role: "alert", style: { ...style, ...motionStyle }, ...restProps },
         closable && (React.isValidElement(closeIcon) ? (React.cloneElement(closeIcon, {
-            // @ts-ignore
+            // @ts-ignore .....
             className: `${rootCls}-close`,
             onClick: close,
         })) : (React.createElement(Close_1.Close, { className: `${rootCls}-close`, onClick: close }))),

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

@@ -7,9 +7,9 @@ export interface AlignOwnProps extends Omit<AlignBreakpointsConfig, 'default'> {
     direction?: Direction;
     prefixCls?: string;
 }
-export type AlignProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<AlignOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, AlignOwnProps>;
+export type AlignProps<E extends React.ElementType = React.ElementType> = AlignOwnProps & PolymorphicProps<E> & PolymorphicProps<E, AlignOwnProps>;
 declare const defaultElement = "div";
-export declare function Align<E extends React.ElementType = typeof defaultElement>(props: AlignProps<E>): React.JSX.Element;
+export declare function Align<E extends React.ElementType = typeof defaultElement>({ align, className, component, l, m, s, xl, ...props }: React.PropsWithChildren<AlignProps<E>>): React.ReactElement;
 export declare namespace Align {
     var displayName: string;
 }

package/dist/cjs/components/Align/Align.js

@@ -43,9 +43,9 @@ const utils_1 = require("../../components/Align/utils");
 const Component_1 = require("../../components/Component");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const defaultElement = 'div';
-function Align(props) {
+function Align({ align = 'left', className, component = defaultElement, l, m, s, xl, ...props }) {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { align = 'left', className, direction = config.direction, l, m, prefixCls = config.prefixCls, s, xl, ...restProps } = props;
+    const { direction = config.direction, prefixCls = config.prefixCls, ...restProps } = props;
     const isRtl = React.useMemo(() => direction === 'rtl', [direction]);
     const mergedAlign = React.useMemo(() => {
         if (isRtl && align === 'left') {
@@ -56,7 +56,7 @@ function Align(props) {
         }
         return align;
     }, [align, isRtl]);
-    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)((0, utils_1.getAlignClassname)(mergedAlign, prefixCls || config.prefixCls), (0, utils_1.getAlignClassname)({ l, m, s, xl }, prefixCls || config.prefixCls), className), component: defaultElement, ...restProps }));
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)((0, utils_1.getAlignClassname)(mergedAlign, prefixCls || config.prefixCls), (0, utils_1.getAlignClassname)({ l, m, s, xl }, prefixCls || config.prefixCls), className), component: component, ...restProps }));
 }
 if (process.env.NODE_ENV !== 'production') {
     Align.displayName = 'Align';

package/dist/cjs/components/Align/Center.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type AlignProps } from '../../components/Align/Align';
-export declare function Center(props: Omit<AlignProps, 'align'>): React.JSX.Element;
+export declare function Center(props: Omit<AlignProps, 'align'>): React.ReactElement;
 export declare namespace Center {
     var displayName: string;
 }

package/dist/cjs/components/Align/Left.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type AlignProps } from '../../components/Align/Align';
-export declare function Left(props: Omit<AlignProps, 'align'>): React.JSX.Element;
+export declare function Left(props: Omit<AlignProps, 'align'>): React.ReactElement;
 export declare namespace Left {
     var displayName: string;
 }

package/dist/cjs/components/Align/Right.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type AlignProps } from '../../components/Align/Align';
-export declare function Right(props: Omit<AlignProps, 'align'>): React.JSX.Element;
+export declare function Right(props: Omit<AlignProps, 'align'>): React.ReactElement;
 export declare namespace Right {
     var displayName: string;
 }

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 export interface ArticleProps extends React.HTMLAttributes<HTMLElement> {
     prefixCls?: string;
 }
-export declare function Article(props: ArticleProps): React.JSX.Element;
+export declare function Article({ className, ...props }: ArticleProps): React.ReactElement;
 export declare namespace Article {
     var displayName: string;
 }