@broxus/react-uikit 0.1.1 → 0.1.2

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

@@ -0,0 +1,160 @@
+import * as React from 'react';
+import { tuple } from '@broxus/js-utils';
+import classNames from 'classnames';
+import RcDrawer from 'rc-drawer';
+import { addModalMode, removeModalMode, useForceUpdate } from '../../utils';
+import './index.scss';
+const DrawerContext = React.createContext(null);
+const PlacementTypes = tuple('top', 'right', 'bottom', 'left');
+const SizeTypes = tuple('default', 'large');
+const defaultPushState = { distance: 180 };
+export const Drawer = React.forwardRef((props, ref) => {
+    const { animation, children, className, defaultOpen, destroyOnClose, direction, duration = 'var(--drawer-transition-duration)', ease = 'var(--ease-in-out-circ)', keyboard = true, level = null, maskClosable = true, open, placement = 'right', prefixCls = 'uk-drawer', push = defaultPushState, showMask = true, size = 'default', style, trigger, wrapperClassName, zIndex, ...restProps } = props;
+    const forceUpdate = useForceUpdate();
+    const parentDrawer = React.useContext(DrawerContext);
+    const destroyClose = React.useRef(false);
+    const [internalPush, setPush] = React.useState(false);
+    const [internalOpen, setOpen] = React.useState(defaultOpen);
+    // eslint-disable-next-line no-param-reassign
+    const mergedOpen = open === undefined ? internalOpen : open;
+    React.useEffect(() => {
+        // fix: delete drawer in child and re-render, no push started.
+        // <Drawer>{show && <Drawer />}</Drawer>
+        if (mergedOpen && parentDrawer) {
+            parentDrawer.push();
+        }
+        return () => {
+            if (parentDrawer) {
+                parentDrawer.pull();
+                // parentDrawer = null
+            }
+        };
+    }, []);
+    React.useEffect(() => {
+        if (parentDrawer) {
+            if (mergedOpen) {
+                parentDrawer.push();
+                forceUpdate();
+            }
+            else {
+                parentDrawer.pull();
+                forceUpdate();
+            }
+        }
+    }, [mergedOpen]);
+    const drawerClassName = React.useMemo(() => classNames({
+        [`${prefixCls}-${size}`]: size !== undefined,
+        [`${prefixCls}-${animation}`]: animation !== undefined,
+        [`${prefixCls}-rtl`]: direction === 'rtl',
+        'no-mask': !showMask,
+    }, className), [prefixCls, size, animation, showMask, direction, className]);
+    const drawerWrapperClassName = React.useMemo(() => classNames(`${prefixCls}-container`, {
+        [`${prefixCls}-${animation}-container`]: animation !== undefined,
+    }, wrapperClassName), [prefixCls, animation, wrapperClassName]);
+    const operations = React.useMemo(() => ({
+        pull() {
+            if (push) {
+                setPush(false);
+                forceUpdate();
+            }
+        },
+        push() {
+            if (push) {
+                setPush(true);
+                forceUpdate();
+            }
+        },
+    }), [push]);
+    React.useImperativeHandle(ref, () => operations, [operations]);
+    const isDestroyOnClose = destroyOnClose && !mergedOpen;
+    const afterVisibleChange = (visible) => {
+        restProps.afterVisibleChange?.(visible);
+        if (visible) {
+            addModalMode();
+        }
+        else {
+            removeModalMode();
+        }
+    };
+    const getRcDrawerStyle = () => {
+        // get drawer push width or height
+        const getPushTransform = (_placement) => {
+            let distance;
+            // noinspection SuspiciousTypeOfGuard
+            if (typeof push === 'boolean') {
+                distance = push ? defaultPushState.distance : 0;
+            }
+            else {
+                distance = push?.distance;
+            }
+            distance = parseFloat(String(distance || 0));
+            if (_placement === 'left' || _placement === 'right') {
+                return `translateX(${_placement === 'left' ? distance : -distance}px)`;
+            }
+            if (_placement === 'top' || _placement === 'bottom') {
+                return `translateY(${_placement === 'top' ? distance : -distance}px)`;
+            }
+            return '';
+        };
+        return {
+            transform: internalPush ? getPushTransform(placement) : undefined,
+            zIndex,
+            ...style,
+        };
+    };
+    const collapse = () => {
+        setOpen(false);
+    };
+    const expand = () => {
+        setOpen(true);
+    };
+    const onClose = (event) => {
+        setOpen(false);
+        restProps.onClose?.(event);
+    };
+    const onDestroyTransitionEnd = () => {
+        if (!isDestroyOnClose) {
+            return;
+        }
+        if (!mergedOpen) {
+            destroyClose.current = true;
+            forceUpdate();
+        }
+    };
+    const renderBody = () => {
+        if (destroyClose.current && !mergedOpen) {
+            return null;
+        }
+        destroyClose.current = false;
+        const containerStyle = {};
+        if (isDestroyOnClose) {
+            // Increase the opacity transition, delete children after closing.
+            containerStyle.opacity = 0;
+            containerStyle.transition = 'opacity var(--transition-duration)';
+        }
+        return (React.createElement("div", { className: `${prefixCls}-body-wrapper`, style: containerStyle, onTransitionEnd: onDestroyTransitionEnd },
+            React.createElement("div", { className: `${prefixCls}-body` }, children)));
+    };
+    return (React.createElement(DrawerContext.Provider, { value: operations },
+        trigger?.({ collapse, expand, isOpen: !!mergedOpen }),
+        React.createElement(RcDrawer, { ...{
+                afterVisibleChange,
+                children,
+                className: drawerClassName,
+                defaultOpen,
+                duration,
+                ease,
+                handler: false,
+                keyboard,
+                level: (animation !== undefined && level == null) ? 'all' : level,
+                maskClosable,
+                open: mergedOpen,
+                placement,
+                prefixCls,
+                showMask,
+                style: getRcDrawerStyle(),
+                wrapperClassName: drawerWrapperClassName,
+                ...restProps,
+                onClose,
+            } }, renderBody())));
+});

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { TriggerProps } from 'rc-trigger';
+import type { ActionType, AlignType, AnimationType, BuildInPlacements } from 'rc-trigger/lib/interface';
+import './index.scss';
+export interface DropProps extends Pick<TriggerProps, 'children' | 'getPopupContainer' | 'mouseEnterDelay' | 'mouseLeaveDelay'> {
+    align?: AlignType;
+    alignPoint?: boolean;
+    animation?: AnimationType;
+    arrow?: boolean;
+    hideAction?: ActionType[];
+    minOverlayWidthMatchTrigger?: boolean;
+    openClassName?: string;
+    overlay?: (() => React.ReactElement) | React.ReactElement;
+    overlayClassName?: string;
+    overlayStyle?: React.CSSProperties;
+    placement?: string;
+    placements?: BuildInPlacements;
+    prefixCls?: string;
+    showAction?: ActionType[];
+    transitionName?: string;
+    trigger?: ActionType | ActionType[];
+    visible?: boolean;
+    onOverlayClick?: (e: Event) => void;
+    onVisibleChange?: (visible: boolean) => void;
+}
+export declare const Drop: React.ForwardRefExoticComponent<DropProps & React.RefAttributes<unknown>>;

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

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import Trigger from 'rc-trigger';
+import Placements from './placements';
+import './index.scss';
+export const Drop = React.forwardRef((props, ref) => {
+    const { align, alignPoint, animation, arrow = false, children, getPopupContainer, hideAction, minOverlayWidthMatchTrigger, overlay, overlayClassName, overlayStyle, prefixCls = 'uk-drop', placement = 'bottom-left', placements = Placements, showAction, transitionName = 'uk-motion-slide-up', trigger = ['hover'], visible, onOverlayClick, onVisibleChange, ...restProps } = props;
+    const triggerRef = React.useRef(null);
+    const [triggerVisible, setTriggerVisible] = React.useState();
+    const mergedVisible = 'visible' in restProps ? visible : triggerVisible;
+    const onPopupVisibleChange = (value) => {
+        setTriggerVisible(value);
+        onVisibleChange?.(value);
+    };
+    const getOverlayElement = () => {
+        if (typeof overlay === 'function') {
+            return overlay();
+        }
+        return overlay;
+    };
+    const getDropElement = () => (React.createElement(React.Fragment, null,
+        arrow && React.createElement("div", { className: `${prefixCls}-arrow` }),
+        React.cloneElement(getOverlayElement(), {
+            onClick: onOverlayClick,
+        })));
+    const getDropElementOrLambda = () => {
+        if (typeof overlay === 'function') {
+            return getDropElement;
+        }
+        return getDropElement();
+    };
+    const getMinOverlayWidthMatchTrigger = () => {
+        if (minOverlayWidthMatchTrigger !== undefined) {
+            return minOverlayWidthMatchTrigger;
+        }
+        return !alignPoint;
+    };
+    const renderChildren = () => {
+        const childrenProps = children.props ? children.props : {};
+        const childClassName = classNames(childrenProps.className, 'uk-open');
+        return triggerVisible && children
+            ? React.cloneElement(children, {
+                className: childClassName,
+            })
+            : children;
+    };
+    React.useImperativeHandle(ref, () => triggerRef.current);
+    let triggerHideAction = hideAction;
+    if (!triggerHideAction && trigger.indexOf('contextMenu') > -1) {
+        triggerHideAction = ['click'];
+    }
+    return (React.createElement(Trigger, { ref: triggerRef, ...restProps, action: trigger, builtinPlacements: placements, getPopupContainer: getPopupContainer, hideAction: triggerHideAction || [], popup: getDropElementOrLambda(), popupAlign: align, popupAnimation: animation, popupClassName: classNames(overlayClassName, {
+            [`${prefixCls}-show-arrow`]: arrow,
+        }), popupPlacement: placement, popupStyle: overlayStyle, popupTransitionName: transitionName, popupVisible: mergedVisible, prefixCls: prefixCls, showAction: showAction, stretch: getMinOverlayWidthMatchTrigger() ? 'minWidth' : '', onPopupVisibleChange: onPopupVisibleChange }, renderChildren()));
+});
+if (process.env.NODE_ENV !== 'production') {
+    Drop.displayName = 'Drop';
+}

package/dist/esm/components/Drop/placements.d.ts

@@ -0,0 +1,57 @@
+declare const placements: {
+    'bottom-center': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+        targetOffset: number[];
+    };
+    'bottom-left': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+        targetOffset: number[];
+    };
+    'bottom-right': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+        targetOffset: number[];
+    };
+    'top-center': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+        targetOffset: number[];
+    };
+    'top-left': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+        targetOffset: number[];
+    };
+    'top-right': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+        targetOffset: number[];
+    };
+};
+export default placements;

package/dist/esm/components/Drop/placements.js

@@ -0,0 +1,44 @@
+const autoAdjustOverflow = {
+    adjustX: 1,
+    adjustY: 1,
+};
+const targetOffset = [0, 0];
+const placements = {
+    'bottom-center': {
+        offset: [0, 4],
+        overflow: autoAdjustOverflow,
+        points: ['tc', 'bc'],
+        targetOffset,
+    },
+    'bottom-left': {
+        offset: [0, 4],
+        overflow: autoAdjustOverflow,
+        points: ['tl', 'bl'],
+        targetOffset,
+    },
+    'bottom-right': {
+        offset: [0, 4],
+        overflow: autoAdjustOverflow,
+        points: ['tr', 'br'],
+        targetOffset,
+    },
+    'top-center': {
+        offset: [0, -4],
+        overflow: autoAdjustOverflow,
+        points: ['bc', 'tc'],
+        targetOffset,
+    },
+    'top-left': {
+        offset: [0, -4],
+        overflow: autoAdjustOverflow,
+        points: ['bl', 'tl'],
+        targetOffset,
+    },
+    'top-right': {
+        offset: [0, -4],
+        overflow: autoAdjustOverflow,
+        points: ['br', 'tr'],
+        targetOffset,
+    },
+};
+export default placements;

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { DropProps } from '../Drop';
+import './index.scss';
+export declare type DropdownProps = DropProps;
+export declare const Dropdown: React.ForwardRefExoticComponent<DropProps & React.RefAttributes<unknown>>;

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Drop } from '../Drop';
+import './index.scss';
+export const Dropdown = React.forwardRef((props, ref) => {
+    const { children, ...restProps } = props;
+    return (React.createElement(Drop, { ref: ref, ...restProps, prefixCls: "uk-dropdown" }, children));
+});
+if (process.env.NODE_ENV !== 'production') {
+    Dropdown.displayName = 'Dropdown';
+}

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { BreakpointsConfig } from '../../types';
+import type { PolymorphicComponentProps } from '../Component';
+import './index.scss';
+export declare type FlexAlignContent = 'stretch' | 'between' | 'around' | 'top' | 'middle' | 'bottom';
+export declare type FlexAlignItems = 'stretch' | 'top' | 'middle' | 'bottom';
+export declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export declare type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
+export declare type FlexJustifyContent = 'left' | 'center' | 'right' | 'between' | 'around';
+export declare type FlexItemDimensions = 'none' | 'auto' | 'fill' | '1';
+export declare type FlexBreakpoint = {
+    alignContent?: FlexAlignContent;
+    alignItems?: FlexAlignItems;
+    flexDirection?: FlexDirection;
+    flexWrap?: FlexWrap;
+    itemDimensions?: FlexItemDimensions;
+    justifyContent?: FlexJustifyContent;
+};
+export declare type FlexBreakpointsConfig = BreakpointsConfig<FlexBreakpoint>;
+export declare type FlexOwnProps = FlexBreakpoint & FlexBreakpointsConfig & {
+    inline?: boolean;
+};
+export declare type FlexProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, FlexOwnProps>;
+declare const defaultElement = "div";
+export declare function Flex<E extends React.ElementType = typeof defaultElement>(props: FlexProps<E>): JSX.Element;
+export {};

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Component } from '../Component';
+import './index.scss';
+const defaultElement = 'div';
+export function Flex(props) {
+    const { alignContent, alignItems, className, flexDirection, flexWrap, inline, itemDimensions, justifyContent, ...restProps } = props;
+    return (React.createElement(Component, { className: classNames({
+            'uk-flex': !inline,
+            'uk-flex-inline': inline,
+            [`uk-flex-${alignItems}`]: alignItems !== undefined,
+            [`uk-flex-${flexDirection}`]: flexDirection !== undefined,
+            [`uk-flex-${flexWrap}`]: flexWrap !== undefined,
+            [`uk-flex-wrap-${alignContent}`]: flexWrap !== undefined && alignContent !== undefined,
+            [`uk-flex-${justifyContent}`]: justifyContent !== undefined,
+            [`uk-flex-${itemDimensions}`]: itemDimensions !== undefined,
+        }, className), component: defaultElement, ...restProps }));
+}

package/dist/esm/components/Form/Controls.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare type ControlsProps = React.HTMLAttributes<HTMLDivElement>;
+export declare function Controls(props: ControlsProps): JSX.Element;
+export declare namespace Controls {
+    var displayName: string;
+}

package/dist/esm/components/Form/Controls.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import classNames from 'classnames';
+export function Controls(props) {
+    const { className, ...restProps } = props;
+    return (React.createElement("div", { className: classNames('uk-form-controls', className), ...restProps }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Controls.displayName = 'Form.Controls';
+}

package/dist/esm/components/Form/ControlsText.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare type ControlsTextProps = React.HTMLAttributes<HTMLDivElement>;
+export declare function ControlsText(props: ControlsTextProps): JSX.Element;
+export declare namespace ControlsText {
+    var displayName: string;
+}

package/dist/esm/components/Form/ControlsText.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import classNames from 'classnames';
+export function ControlsText(props) {
+    const { className, ...restProps } = props;
+    return (React.createElement("div", { className: classNames('uk-form-controls-text', className), ...restProps }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    ControlsText.displayName = 'Form.ControlsText';
+}

package/dist/esm/components/Form/Fieldset.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare type FieldsetProps = React.FieldsetHTMLAttributes<HTMLFieldSetElement>;
+export declare function Fieldset(props: FieldsetProps): JSX.Element;
+export declare namespace Fieldset {
+    var displayName: string;
+}

package/dist/esm/components/Form/Fieldset.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import classNames from 'classnames';
+export function Fieldset(props) {
+    const { className, ...restProps } = props;
+    return (React.createElement("fieldset", { className: classNames('uk-fieldset', className), ...restProps }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Fieldset.displayName = 'Form.Fieldset';
+}

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../Component';
+export interface FormOwnProps {
+    layout?: 'stacked' | 'horizontal';
+}
+export declare type FormProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, FormOwnProps>;
+declare const defaultElement = "form";
+export declare function Form<E extends React.ElementType = typeof defaultElement>(props: FormProps<E>): JSX.Element;
+export {};

package/dist/esm/components/Form/Form.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Component } from '../Component';
+const defaultElement = 'form';
+export function Form(props) {
+    const { className, layout, ...restProps } = props;
+    return (React.createElement(Component, { className: classNames('uk-form', {
+            [`uk-form-${layout}`]: layout !== undefined,
+        }, className), component: defaultElement, ...restProps }));
+}

package/dist/esm/components/Form/Label.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement>;
+export declare function Label(props: LabelProps): JSX.Element;
+export declare namespace Label {
+    var displayName: string;
+}

package/dist/esm/components/Form/Label.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import classNames from 'classnames';
+export function Label(props) {
+    const { className, htmlFor, ...restProps } = props;
+    return (React.createElement("label", { className: classNames('uk-form-label', className), htmlFor: htmlFor, ...restProps }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Label.displayName = 'Form.Label';
+}

package/dist/esm/components/Form/Legend.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare type LegendProps = React.HTMLAttributes<HTMLLegendElement>;
+export declare function Legend(props: LegendProps): JSX.Element;
+export declare namespace Legend {
+    var displayName: string;
+}

package/dist/esm/components/Form/Legend.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import classNames from 'classnames';
+export function Legend(props) {
+    const { className, ...restProps } = props;
+    return (React.createElement("legend", { className: classNames('uk-legend', className), ...restProps }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Legend.displayName = 'Form.Legend';
+}

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Controls } from './Controls';
+import { ControlsText } from './ControlsText';
+import { Fieldset } from './Fieldset';
+import { Label } from './Label';
+import { Legend } from './Legend';
+import type { FormProps } from './Form';
+import './index.scss';
+export type { FormProps };
+export interface CompoundedForm extends React.FunctionComponent<FormProps> {
+    Controls: typeof Controls;
+    ControlsText: typeof ControlsText;
+    Fieldset: typeof Fieldset;
+    Label: typeof Label;
+    Legend: typeof Legend;
+}
+export declare const Form: CompoundedForm;

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

@@ -0,0 +1,13 @@
+import { Controls } from './Controls';
+import { ControlsText } from './ControlsText';
+import { Fieldset } from './Fieldset';
+import { Form as InternalForm } from './Form';
+import { Label } from './Label';
+import { Legend } from './Legend';
+import './index.scss';
+export const Form = InternalForm;
+Form.Controls = Controls;
+Form.ControlsText = ControlsText;
+Form.Fieldset = Fieldset;
+Form.Label = Label;
+Form.Legend = Legend;

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../Component';
+import type { ChildWidthBreakpointsConfig, ChildWidthSize } from '../Width';
+import './index.scss';
+export declare type GridGap = 'collapse' | 'xsmall' | 'small' | 'medium' | 'large';
+export declare type GridOwnProps = {
+    childWidth?: ChildWidthSize | ChildWidthBreakpointsConfig;
+    columnGap?: GridGap;
+    divider?: boolean;
+    gap?: GridGap;
+    margin?: GridGap;
+    match?: boolean;
+    rowGap?: GridGap;
+};
+export declare type GridProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, GridOwnProps>;
+declare const defaultElement = "div";
+export declare function Grid<E extends React.ElementType = typeof defaultElement>(props: GridProps<E>): JSX.Element;
+export {};

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Component } from '../Component';
+import { getChildWidthClassname } from '../Width';
+import './index.scss';
+const defaultElement = 'div';
+export function Grid(props) {
+    const { childWidth, className, columnGap, divider, gap, margin, match, rowGap, ...restProps } = props;
+    const childWithClassName = React.useMemo(() => getChildWidthClassname(childWidth), [childWidth]);
+    return (React.createElement(Component, { className: classNames('uk-grid', {
+            [`uk-grid-${gap}`]: gap !== undefined,
+            [`uk-grid-row-${rowGap}`]: rowGap !== undefined,
+            [`uk-grid-column-${columnGap}`]: columnGap !== undefined,
+            [`uk-grid-margin-${margin}`]: margin !== undefined,
+            'uk-grid-divider': divider,
+            'uk-grid-match': match,
+        }, childWithClassName, className), component: defaultElement, "data-uk-grid": "margin: ", ...restProps }));
+}

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { PolymorphicComponentProps } from '../Component';
+import './index.scss';
+export declare type HeadingOwnProps = {
+    decoration?: 'bullet' | 'divider' | 'line';
+    size?: 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
+};
+export declare type HeadingProps<E extends React.ElementType> = PolymorphicComponentProps<E, HeadingOwnProps>;
+declare const defaultElement = "div";
+export declare function Heading<E extends React.ElementType = typeof defaultElement>(props: HeadingProps<E>): JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Component } from '../Component';
+import './index.scss';
+const defaultElement = 'div';
+export function Heading(props) {
+    const { children, className, size, decoration, ...restProps } = props;
+    return (React.createElement(Component, { className: classNames({
+            [`uk-heading-${decoration}`]: decoration !== undefined,
+            [`uk-heading-${size}`]: size !== undefined,
+        }, className), component: defaultElement, ...restProps }, decoration === 'line' ? (React.createElement("span", null, children)) : children));
+}

package/dist/esm/components/Icon/Button.d.ts

@@ -0,0 +1,5 @@
+import type { IconProps } from './Icon';
+export declare function Button(props: IconProps): JSX.Element;
+export declare namespace Button {
+    var displayName: string;
+}

package/dist/esm/components/Icon/Button.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Icon } from './Icon';
+export function Button(props) {
+    return (React.createElement(Icon, { component: "button", role: "button", type: "button", ...props }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Button.displayName = 'Icon.Button';
+}

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../Component';
+export declare type IconOwnProps = {
+    icon: string;
+    material?: boolean;
+    mode?: 'button' | 'image' | 'link';
+    prefixCls?: string;
+    round?: boolean;
+};
+export declare type IconProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, IconOwnProps>;
+declare const defaultElement = "span";
+export declare function Icon<E extends React.ElementType = typeof defaultElement>(props: IconProps<E>): JSX.Element | null;
+export {};