@broxus/react-uikit 0.1.2 → 0.2.0

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

@@ -223,6 +223,14 @@
 }
 
 
+/* Tabpane
+ ========================================================================== */
+
+.uk-tabs-tabpane-hidden {
+    display: none;
+}
+
+
 /* Card modifier
  ========================================================================== */
 
@@ -628,12 +636,12 @@
 }
 
 .uk-tabs-dropdown-rtl { direction: rtl; }
+
 .uk-tabs-dropdown-rtl .uk-tabs-dropdown-menu-item {
     text-align: right;
 }
 
 
-
 // Ink Bar
 // ========================================================================
 

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

@@ -1,8 +1,8 @@
 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 = {
+import { type PolymorphicProps } from '../Component';
+import { type BreakpointsConfig } from '../../types';
+export type TextAlign = 'left' | 'right' | 'center' | 'justify';
+export type TextOwnProps = {
     align?: TextAlign | BreakpointsConfig<TextAlign>;
     className?: string;
     color?: 'meta' | 'muted' | 'emphasis' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger';
@@ -10,13 +10,12 @@ export declare type TextOwnProps = {
     decoration?: 'none';
     dropcap?: boolean;
     italic?: boolean;
+    prefixCls?: string;
     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 {};
+export type TextProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<TextOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, TextOwnProps>;
+export declare const Text: React.MemoExoticComponent<(<E extends React.ElementType<any> = "p">(props: TextProps<E>) => JSX.Element)>;

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

@@ -1,25 +1,28 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { getBreakpointsConfigClasses } from '../../utils';
 import { Component } from '../Component';
+import { useConfig } from '../ConfrigProvider';
+import { getBreakpointsConfigClasses } from '../../utils';
 const defaultElement = 'p';
-export 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}`
-        : getBreakpointsConfigClasses('uk', 'align', align)), [align]);
-    const columnClassName = React.useMemo(() => (typeof column === 'number'
-        ? `uk-column-1-${column}`
-        : getBreakpointsConfigClasses('uk', 'column-1', column)), [column]);
+export const Text = React.memo((props) => {
+    const config = useConfig();
+    const { align, className, color, column, decoration, dropcap, italic, prefixCls = config.prefixCls, size, transform, verticalAlign, weight, wrap, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'text'), [config, prefixCls]);
+    const alignClassName = React.useMemo(() => typeof align === 'string'
+        ? `${rootCls}-${align}`
+        : getBreakpointsConfigClasses(prefixCls || config.prefixCls, 'align', align), [align, config.prefixCls, prefixCls, rootCls]);
+    const columnClassName = React.useMemo(() => typeof column === 'number'
+        ? `${prefixCls || config.prefixCls}-column-1-${column}`
+        : getBreakpointsConfigClasses(prefixCls || config.prefixCls, 'column-1', column), [column, config.prefixCls, prefixCls]);
     return (React.createElement(Component, { className: classNames(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,
+            [`${prefixCls || config.prefixCls}-dropcap`]: dropcap,
+            [`${rootCls}-${color}`]: color !== undefined,
+            [`${rootCls}-${size}`]: size !== undefined,
+            [`${rootCls}-${transform}`]: transform !== undefined,
+            [`${rootCls}-${verticalAlign}`]: verticalAlign !== undefined,
+            [`${rootCls}-${weight}`]: weight !== undefined,
+            [`${rootCls}-${wrap}`]: wrap !== undefined,
+            [`${rootCls}-decoration-none`]: decoration === 'none',
+            [`${rootCls}-italic`]: italic,
         }, className), component: defaultElement, ...restProps }));
-}
+});

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

@@ -1,12 +1,11 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
+import { type PolymorphicProps } from '../Component';
 import './index.scss';
-export declare type TileOwnProps = {
+export type TileOwnProps = {
+    prefixCls?: string;
     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 {};
+export type TileProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<TileOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, TileOwnProps>;
+export declare const Tile: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: TileProps<E>) => JSX.Element)>;

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

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

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

@@ -30,8 +30,8 @@
 .uk-tile {
     box-sizing: border-box;
     display: flow-root;
-    padding: var(--tile-padding-vertical) var(--tile-padding-horizontal);
     position: relative;
+    padding: var(--tile-padding-vertical) var(--tile-padding-horizontal);
     @if mixin-exists(hook-tile) {
         @include hook-tile;
     }
@@ -40,8 +40,8 @@
 /* Phone landscape and bigger */
 @media (min-width: $breakpoint-small) {
     .uk-tile {
-        padding-left: var(--tile-padding-horizontal-s);
         padding-right: var(--tile-padding-horizontal-s);
+        padding-left: var(--tile-padding-horizontal-s);
     }
 }
 
@@ -69,8 +69,8 @@
  */
 
 .uk-tile-xsmall {
-    padding-bottom: var(--tile-xsmall-padding-vertical);
     padding-top: var(--tile-xsmall-padding-vertical);
+    padding-bottom: var(--tile-xsmall-padding-vertical);
 }
 
 /*
@@ -78,8 +78,8 @@
  */
 
 .uk-tile-small {
-    padding-bottom: var(--tile-small-padding-vertical);
     padding-top: var(--tile-small-padding-vertical);
+    padding-bottom: var(--tile-small-padding-vertical);
 }
 
 /*
@@ -87,15 +87,15 @@
  */
 
 .uk-tile-large {
-    padding-bottom: var(--tile-large-padding-vertical);
     padding-top: var(--tile-large-padding-vertical);
+    padding-bottom: var(--tile-large-padding-vertical);
 }
 
 /* Tablet landscape and bigger */
 @media (min-width: $breakpoint-medium) {
     .uk-tile-large {
-        padding-bottom: var(--tile-large-padding-vertical-m);
         padding-top: var(--tile-large-padding-vertical-m);
+        padding-bottom: var(--tile-large-padding-vertical-m);
     }
 }
 
@@ -105,15 +105,15 @@
  */
 
 .uk-tile-xlarge {
-    padding-bottom: var(--tile-xlarge-padding-vertical);
     padding-top: var(--tile-xlarge-padding-vertical);
+    padding-bottom: var(--tile-xlarge-padding-vertical);
 }
 
 /* Tablet landscape and bigger */
 @media (min-width: $breakpoint-medium) {
     .uk-tile-xlarge {
-        padding-bottom: var(--tile-xlarge-padding-vertical-m);
         padding-top: var(--tile-xlarge-padding-vertical-m);
+        padding-bottom: var(--tile-xlarge-padding-vertical-m);
     }
 }
 

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

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
-import type { WidthBreakpointsConfig, WidthSize } from './types';
+import { type PolymorphicProps } from '../Component';
+import { type WidthBreakpointsConfig, type WidthSize } from '../Width/types';
 export interface WidthOwnProps extends WidthBreakpointsConfig {
+    prefixCls?: string;
     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 {};
+export type WidthProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<WidthOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, WidthOwnProps>;
+export declare const Width: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: WidthProps<E>) => JSX.Element)>;

package/dist/esm/components/Width/Width.js

@@ -1,9 +1,16 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Component } from '../Component';
-import { getWidthClassname } from './utils';
+import { getWidthClassname } from '../Width/utils';
+import { useConfig } from '../ConfrigProvider';
 const defaultElement = 'div';
-export function Width(props) {
-    const { className, size, s, m, l, xl, ...restProps } = props;
-    return (React.createElement(Component, { className: classNames(getWidthClassname(size, 'uk'), getWidthClassname({ l, m, s, xl }, 'uk'), className), component: defaultElement, ...restProps }));
-}
+export const Width = React.memo((props) => {
+    const config = useConfig();
+    const { className, prefixCls = config.prefixCls, size, s, m, l, xl, ...restProps } = props;
+    return (React.createElement(Component, { className: classNames(getWidthClassname(size, prefixCls || config.prefixCls), getWidthClassname({
+            l,
+            m,
+            s,
+            xl,
+        }, prefixCls || config.prefixCls), className), component: defaultElement, ...restProps }));
+});

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import type { ChildWidthBreakpointsConfig, ChildWidthSize, WidthBreakpointsConfig, WidthSize } from './types';
+import { type ChildWidthBreakpointsConfig, type ChildWidthSize, type WidthBreakpointsConfig, type WidthSize } from '../Width/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;

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

@@ -16,7 +16,9 @@ export function getChildWidthClassname(valueOrConfig, prefixCls = 'uk') {
         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 Object.entries(valueOrConfig).map(([key, value]) => `${getChildWidthClassname(value)}${key !== 'default'
+            ? `@${key}`
+            : ''}`);
     }
     return undefined;
 }

package/dist/esm/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from '../hooks/useContext';
+export * from '../hooks/useForceUpdate';
+export * from '../hooks/useMounted';

package/dist/esm/hooks/index.js

@@ -0,0 +1,3 @@
+export * from '../hooks/useContext';
+export * from '../hooks/useForceUpdate';
+export * from '../hooks/useMounted';

package/dist/esm/hooks/useContext.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function useContext<T>(Context: React.Context<T>): NonNullable<T>;

package/dist/esm/hooks/useContext.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export function useContext(Context) {
+    const context = React.useContext(Context);
+    if (context == null) {
+        throw new Error(`use${Context.displayName || Context.constructor.name || 'Unknown'} must be used within a ${Context.displayName || Context.constructor.name || 'Unknown'}.Provider`);
+    }
+    return context;
+}

package/dist/esm/hooks/useMounted.d.ts

@@ -0,0 +1 @@
+export declare function useMounted(): boolean;

package/dist/esm/hooks/useMounted.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export function useMounted() {
+    const mounted = React.useRef(false);
+    React.useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    return mounted.current;
+}

package/dist/esm/index.d.ts

@@ -1,40 +1,43 @@
-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/Link';
+export * from './components/Heading';
+export * from './components/Divider';
+export * from './components/List';
+export * from './components/DescriptionList';
+export * from './components/Icon';
+export * from './components/Form';
+export * from './components/Control';
 export * from './components/Button';
-export * from './components/Card';
+export * from './components/Progress';
 export * from './components/Close';
-export * from './components/Component';
-export * from './components/ConfrigProvider';
+export * from './components/Spinner';
+export * from './components/Alert';
+export * from './components/Badge';
+export * from './components/Label';
+export * from './components/Article';
+export * from './components/Section';
 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/Tile';
+export * from './components/Card';
 export * from './components/Nav';
 export * from './components/Navbar';
-export * from './components/Section';
-export * from './components/Spinner';
+export * from './components/Breadcrumb';
 export * from './components/Tabs';
-export * from './components/Text';
-export * from './components/Tile';
+export * from './components/Dotnav';
+export * from './components/Iconnav';
+export * from './components/Accordion';
+export * from './components/Drop';
+export * from './components/Dropdown';
+export * from './components/Modal';
+export * from './components/Drawer';
+export * from './components/Component';
+export * from './components/ComponentProvider';
+export * from './components/ConfrigProvider';
 export * from './components/Width';
+export * from './components/Text';
+export * from './components/Cover';
+export * from './components/Align';
+export * from './components/Flex';
+export * from './hooks';
 export * from './types';
 export * from './utils';

package/dist/esm/index.js

@@ -1,40 +1,43 @@
-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/Link';
+export * from './components/Heading';
+export * from './components/Divider';
+export * from './components/List';
+export * from './components/DescriptionList';
+export * from './components/Icon';
+export * from './components/Form';
+export * from './components/Control';
 export * from './components/Button';
-export * from './components/Card';
+export * from './components/Progress';
 export * from './components/Close';
-export * from './components/Component';
-export * from './components/ConfrigProvider';
+export * from './components/Spinner';
+export * from './components/Alert';
+export * from './components/Badge';
+export * from './components/Label';
+export * from './components/Article';
+export * from './components/Section';
 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/Tile';
+export * from './components/Card';
 export * from './components/Nav';
 export * from './components/Navbar';
-export * from './components/Section';
-export * from './components/Spinner';
+export * from './components/Breadcrumb';
 export * from './components/Tabs';
-export * from './components/Text';
-export * from './components/Tile';
+export * from './components/Dotnav';
+export * from './components/Iconnav';
+export * from './components/Accordion';
+export * from './components/Drop';
+export * from './components/Dropdown';
+export * from './components/Modal';
+export * from './components/Drawer';
+export * from './components/Component';
+export * from './components/ComponentProvider';
+export * from './components/ConfrigProvider';
 export * from './components/Width';
+export * from './components/Text';
+export * from './components/Cover';
+export * from './components/Align';
+export * from './components/Flex';
+export * from './hooks';
 export * from './types';
 export * from './utils';

package/dist/esm/styles/_import.components.scss

@@ -15,8 +15,7 @@
 @import '../components/Form/index.scss'; // After: Icon
 @import '../components/Control/index.scss'; // After: Icon
 @import '../components/Button/index.scss';
-
-// @import '../components/Progress/index.scss';
+@import '../components/Progress/index.scss';
 
 // Layout
 @import '../components/Section/index.scss';

package/dist/esm/styles/_import.scss

@@ -15,8 +15,7 @@
 @import 'form.scss'; // After: Icon
 @import 'control.scss';
 @import 'button.scss';
-
-// @import 'progress.scss';
+@import 'progress.scss';
 
 // Layout
 @import 'section.scss';