@broxus/react-uikit 0.22.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({ className, direction, ...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/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({ expandIcon, ...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,10 +37,6 @@ 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({ expandIcon, ...props }) {
     const mergedExpandIcon = React.useMemo(() => expandIcon
         || (({ isActive }) => (React.createElement(Icon_1.Icon, { icon: isActive ? 'expand_more' : 'chevron_right' }))), [expandIcon]);

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

@@ -51,9 +51,7 @@ exports.Alert = React.forwardRef(({ children, className, closable = true, severi
         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, {

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

@@ -9,7 +9,7 @@ export interface AlignOwnProps extends Omit<AlignBreakpointsConfig, 'default'> {
 }
 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>({ align, className, component, l, m, s, xl, ...props }: React.PropsWithChildren<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/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({ className, ...props }: ArticleProps): React.JSX.Element;
+export declare function Article({ className, ...props }: ArticleProps): React.ReactElement;
 export declare namespace Article {
     var displayName: string;
 }

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

@@ -5,7 +5,7 @@ export interface ArticleMetaOwnProps {
 }
 export type ArticleMetaProps<E extends React.ElementType = React.ElementType> = ArticleMetaOwnProps & PolymorphicProps<E> & PolymorphicProps<E, ArticleMetaOwnProps>;
 declare const defaultElement = "p";
-export declare function Meta<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<ArticleMetaProps<E>>): React.JSX.Element;
+export declare function Meta<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<ArticleMetaProps<E>>): React.ReactElement;
 export declare namespace Meta {
     var displayName: string;
 }

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

@@ -5,7 +5,7 @@ export interface ArticleTitleOwnProps {
 }
 export type ArticleTitleProps<E extends React.ElementType = React.ElementType> = ArticleTitleOwnProps & PolymorphicProps<E> & PolymorphicProps<E, ArticleTitleOwnProps>;
 declare const defaultElement = "h1";
-export declare function Title<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<ArticleTitleProps<E>>): React.JSX.Element;
+export declare function Title<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<ArticleTitleProps<E>>): React.ReactElement;
 export declare namespace Title {
     var displayName: string;
 }

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

@@ -5,7 +5,7 @@ export interface BadgeOwnProps {
 }
 export type BadgeProps<E extends React.ElementType = React.ElementType> = BadgeOwnProps & PolymorphicProps<E> & PolymorphicProps<E, BadgeOwnProps>;
 declare const defaultElement = "span";
-export declare function Badge<E extends React.ElementType = typeof defaultElement>({ className, ...props }: React.PropsWithChildren<BadgeProps<E>>): React.JSX.Element;
+export declare function Badge<E extends React.ElementType = typeof defaultElement>({ className, ...props }: React.PropsWithChildren<BadgeProps<E>>): React.ReactElement;
 export declare namespace Badge {
     var displayName: string;
 }

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

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

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 interface BreadcrumbItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
     disabled?: boolean;
 }
-export declare function Item({ className, disabled, ...props }: BreadcrumbItemProps): React.JSX.Element;
+export declare function Item({ className, disabled, ...props }: BreadcrumbItemProps): React.ReactElement;
 export declare namespace Item {
     var displayName: string;
 }

package/dist/cjs/components/Button/Group.d.ts

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