@sky-mavis/design-system 0.2.0

package/dist/components/popover/Popover.d.ts

@@ -0,0 +1,74 @@
+import { Boundary, Placement } from '@popperjs/core';
+import React from 'react';
+export declare type PopoverControlFn<T> = (params: {
+    isOpen: boolean;
+    close: () => void;
+    open: () => void;
+    setOpen: (value: boolean) => void;
+}) => T;
+interface Props {
+    /**
+     * Should Popover appear.
+     */
+    isOpen: boolean;
+    /**
+     * Trigger when user try to close Popover using keyboard or clicking outside content.
+     */
+    onClose?: () => void;
+    /**
+     * Should Popover content be focus at the moment it appears.
+     */
+    autoFocus?: boolean;
+    /**
+     * Use with usePortal=true. Default is window.document.body.
+     */
+    portalContainer?: HTMLElement;
+    /**
+     * Decide Popover position on DOM tree. Should it be rendered inline or at portalContainer.
+     */
+    usePortal?: boolean;
+    /**
+     * Boundary to detect overflow or flip the Popover content.
+     */
+    boundary?: Boundary;
+    /**
+     * Refer to https://popper.js.org/docs/v2/constructors/#placement
+     */
+    placement?: Placement;
+    /**
+     * Should onClose trigger when user click outside of the Popover content.
+     */
+    canClickOutsideClose?: boolean;
+    /**
+     * Should onClose trigger when user press Escape button on keyboard.
+     */
+    canEscapeKeyClose?: boolean;
+    /**
+     * Content of the Popover.
+     */
+    content: React.ReactNode;
+    /**
+     * Content of the Popover.
+     */
+    popoverClassName?: string;
+    /**
+     * Target of the Popover.
+     */
+    children: React.ReactNode;
+    /**
+     * Number of milliseconds delay when Popover appears. This is useful for
+     * usage as tooltip.
+     */
+    enterDelay?: number;
+    /**
+     * Number of milliseconds delay when Popover appears. This is useful for
+     * usage as tooltip.
+     */
+    leaveDelay?: number;
+    /**
+     * Ref to wrapper around children.
+     */
+    targetRef?: (ref: HTMLSpanElement | null) => void;
+}
+export declare const Popover: React.FC<Props>;
+export {};

package/dist/components/popover/Popover.js

@@ -0,0 +1,82 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.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.Popover = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
+const react_popper_1 = require("react-popper");
+const react_transition_group_1 = require("react-transition-group");
+const dom_1 = require("../../utils/dom");
+const Overlay_1 = require("../overlay/Overlay");
+exports.Popover = props => {
+    const { isOpen, autoFocus, usePortal = true, portalContainer = dom_1.isDocDefined ? document.body : null, placement = 'auto', content, children, onClose, popoverClassName, boundary = 'clippingParents', canClickOutsideClose: closeOnClickOutsideContent, canEscapeKeyClose, targetRef, enterDelay = 0, leaveDelay = 0, } = props;
+    const [targetBox, setTargetBox] = react_1.useState(null);
+    const [contentBox, setContentBox] = react_1.useState(null);
+    const [timeout, setTimeout] = react_1.useState(0);
+    react_1.useEffect(() => {
+        if (targetBox !== null && targetRef !== undefined) {
+            targetRef(targetBox);
+        }
+    }, [targetBox]);
+    const { styles, attributes } = react_popper_1.usePopper(targetBox, contentBox, {
+        placement,
+        modifiers: [
+            { name: 'flip', options: { boundary } },
+            { name: 'offset', options: { offset: [0, 4] } },
+            { name: 'preventOverflow', options: { boundary } },
+        ],
+    });
+    react_1.useEffect(() => {
+        if (isOpen === true && autoFocus === true && contentBox !== null) {
+            contentBox.focus({ preventScroll: true });
+        }
+    }, [isOpen, contentBox]);
+    const handleKeyDown = event => {
+        if (event.which === 27 && canEscapeKeyClose === true && onClose) {
+            event.preventDefault();
+            onClose();
+        }
+    };
+    const onClickOutsideContent = () => {
+        if (closeOnClickOutsideContent === true) {
+            onClose && onClose();
+        }
+    };
+    const renderContent = () => {
+        const isInteractive = autoFocus === true || canEscapeKeyClose === true;
+        const contentChild = (react_1.default.createElement(react_transition_group_1.CSSTransition, { in: isOpen, classNames: "ds-popover-content-transition", key: "target", timeout: (timeout || 0) + 200, onEnter: () => setTimeout(enterDelay), onEntered: () => setTimeout(leaveDelay), unmountOnExit: true },
+            react_1.default.createElement(Overlay_1.WithClickOutside, { onClickOutside: onClickOutsideContent },
+                react_1.default.createElement("div", Object.assign({ className: classnames_1.default('ds-popover-content', popoverClassName), tabIndex: isInteractive ? 0 : undefined, onKeyDown: handleKeyDown, ref: setContentBox, style: Object.assign(Object.assign({}, styles.popper), { transitionDelay: `${timeout}ms` }) }, attributes.popper), content))));
+        if (usePortal === true && portalContainer !== null) {
+            return react_dom_1.createPortal(contentChild, portalContainer);
+        }
+        else {
+            return contentChild;
+        }
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("span", { ref: setTargetBox, style: { maxWidth: 'max-content', display: 'inline-block' } }, children),
+        renderContent()));
+};

package/dist/components/progress/CircularProgress.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { IntentType } from '../../commons/types';
+declare enum ProgresSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large"
+}
+export interface CircularProgressProps {
+    /**
+     * Completed percent of progress. From 0 to max.
+     *
+     * If value is undefined, Progress will change to infinity loop variant.
+     */
+    value?: number;
+    /**
+     * Max value of progress bar. Default is 100.
+     */
+    max?: number;
+    /**
+     * Size variant of Progress element.
+     *
+     * Can be Small, Medium, Large.
+     */
+    size?: ProgresSize;
+    /**
+     * Visual intent color apply to Progress background rail and train.
+     */
+    intent?: IntentType;
+    /**
+     * A space-delimited list of class names to pass along to a Progress element.
+     */
+    className?: string;
+    /**
+     * Information of the progress to beshowed in center.
+     */
+    centralLabel?: React.ReactNode;
+}
+export declare const CircularProgress: React.FC<CircularProgressProps> & {
+    sizes: typeof ProgresSize;
+};
+export {};

package/dist/components/progress/CircularProgress.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CircularProgress = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const intent_1 = require("../../utils/intent");
+const helper_1 = require("./helper");
+var ProgresSize;
+(function (ProgresSize) {
+    ProgresSize["Small"] = "small";
+    ProgresSize["Medium"] = "medium";
+    ProgresSize["Large"] = "large";
+})(ProgresSize || (ProgresSize = {}));
+const getSizeAndThickness = (progresSize) => {
+    switch (progresSize) {
+        case ProgresSize.Small:
+            return {
+                size: 20,
+                thickness: 4,
+            };
+        case ProgresSize.Medium:
+            return {
+                size: 40,
+                thickness: 6,
+            };
+        case ProgresSize.Large:
+            return {
+                size: 100,
+                thickness: 8,
+            };
+    }
+};
+exports.CircularProgress = props => {
+    const { intent, className, value, max = 100, centralLabel, size = ProgresSize.Small } = props;
+    const intentClass = intent_1.getIntentClassname(intent);
+    const isInfinity = value === undefined || value === null;
+    // calc value for static progress
+    const { size: sizeNumber, thickness } = getSizeAndThickness(size);
+    const circumference = 2 * Math.PI * ((sizeNumber - thickness) / 2);
+    const percent = !isInfinity ? helper_1.calcPercentFromValue(value, max) : undefined;
+    let circleStyle;
+    if (percent !== undefined) {
+        circleStyle = {
+            strokeDasharray: circumference.toFixed(3),
+            strokeDashoffset: `${(((100 - percent) / 100) * circumference).toFixed(3)}px`,
+        };
+    }
+    return (react_1.default.createElement("div", { className: classnames_1.default('ds-circular-progress', size, intentClass, className) },
+        react_1.default.createElement("div", { className: "ds-circular-progress-rail" }),
+        isInfinity ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: "ds-circular-progress-infinite-train" }),
+            react_1.default.createElement("div", { className: "ds-circular-progress-infinite-train" }),
+            react_1.default.createElement("div", { className: "ds-circular-progress-infinite-train" }),
+            react_1.default.createElement("div", { className: "ds-circular-progress-infinite-train" }))) : (react_1.default.createElement("div", { className: "ds-circular-progress-wrapper" },
+            react_1.default.createElement("svg", { width: sizeNumber, height: sizeNumber, viewBox: `0 0 ${sizeNumber} ${sizeNumber}`, className: "ds-circular-progress-train-svg" },
+                react_1.default.createElement("circle", { className: "ds-circular-progress-train-circle", cx: sizeNumber / 2, cy: sizeNumber / 2, r: (sizeNumber - thickness) / 2, fill: "none", strokeLinecap: "round", strokeWidth: thickness, style: circleStyle })),
+            size === ProgresSize.Large && centralLabel && (react_1.default.createElement("div", { className: "ds-circular-progress-info" }, centralLabel))))));
+};
+exports.CircularProgress.sizes = ProgresSize;

package/dist/components/progress/EllipsisProgress.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { IntentType } from '../../commons/types';
+declare enum ProgresSize {
+    Medium = "medium",
+    Large = "large"
+}
+export interface EllipsisProgressProps {
+    /**
+     * Size variant of Progress element.
+     *
+     * Can be Small, Medium, Large.
+     */
+    size?: ProgresSize;
+    /**
+     * Visual intent color apply to Progress dot.
+     */
+    intent?: IntentType;
+    /**
+     * A space-delimited list of class names to pass along to a Progress element.
+     */
+    className?: string;
+}
+export declare const EllipsisProgress: React.FC<EllipsisProgressProps> & {
+    sizes: typeof ProgresSize;
+};
+export {};

package/dist/components/progress/EllipsisProgress.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EllipsisProgress = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const intent_1 = require("../../utils/intent");
+var ProgresSize;
+(function (ProgresSize) {
+    ProgresSize["Medium"] = "medium";
+    ProgresSize["Large"] = "large";
+})(ProgresSize || (ProgresSize = {}));
+exports.EllipsisProgress = props => {
+    const { intent, className, size = ProgresSize.Medium } = props;
+    const intentClass = intent_1.getIntentClassname(intent);
+    return (react_1.default.createElement("div", { className: classnames_1.default('ds-ellipsis-progress', size, intentClass, className) }, [0, 1, 2].map(key => (react_1.default.createElement("svg", { key: key, className: "ds-ellipsis-progress-dot", width: size === ProgresSize.Large ? 16 : 12, height: size === ProgresSize.Large ? 16 : 12, viewBox: ProgresSize.Large ? '0 0 16 16' : '0 0 12 12', fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.02626 0.242432C9.13248 0.242432 16 7.00275 16 8.00001C16 8.99727 9.13248 15.7576 8.02626 15.7576C6.92004 15.7576 0 8.99727 0 8.00001C0 7.00275 6.92004 0.242432 8.02626 0.242432Z", fill: "currentColor" }))))));
+};
+exports.EllipsisProgress.sizes = ProgresSize;

package/dist/components/progress/LinearProgress.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { IntentType } from '../../commons/types';
+declare enum ProgresSize {
+    Small = "small",
+    Large = "large"
+}
+export interface LinearProgressProps {
+    /**
+     * Completed percent of progress. From 0 to max.
+     *
+     * If value is undefined, Progress will change to infinity loop variant.
+     */
+    value?: number;
+    /**
+     * Max value of progress bar. Default is 100.
+     */
+    max?: number;
+    /**
+     * Size variant of Progress element.
+     *
+     * Can be Small, Large.
+     */
+    size?: ProgresSize;
+    /**
+     * Visual intent color apply to Progress background rail and train.
+     */
+    intent?: IntentType;
+    /**
+     * A space-delimited list of class names to pass along to a Progress element.
+     */
+    className?: string;
+    /**
+     * A helper text to show optional texts.
+     */
+    helperText?: string;
+}
+export declare const LinearProgress: React.FC<LinearProgressProps> & {
+    sizes: typeof ProgresSize;
+};
+export {};

package/dist/components/progress/LinearProgress.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinearProgress = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const intent_1 = require("../../utils/intent");
+const helper_1 = require("./helper");
+var ProgresSize;
+(function (ProgresSize) {
+    ProgresSize["Small"] = "small";
+    ProgresSize["Large"] = "large";
+})(ProgresSize || (ProgresSize = {}));
+exports.LinearProgress = props => {
+    const { intent, className, value, max = 100, helperText, size = ProgresSize.Small } = props;
+    const intentClass = intent_1.getIntentClassname(intent);
+    const isInfinity = value === undefined || value === null;
+    const percent = !isInfinity ? helper_1.calcPercentFromValue(value, max) : undefined;
+    const trainWidthStyle = {
+        width: `${percent}%`,
+    };
+    return (react_1.default.createElement("div", { className: "ds-linear-progress-container" },
+        react_1.default.createElement("div", { className: classnames_1.default('ds-linear-progress', { large: size === ProgresSize.Large }, intentClass, className) }, isInfinity ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: classnames_1.default('ds-linear-progress-train', 'ds-linear-progress-infinite-train-1') }),
+            react_1.default.createElement("div", { className: classnames_1.default('ds-linear-progress-train', 'ds-linear-progress-infinite-train-2') }))) : (react_1.default.createElement("div", { className: classnames_1.default('ds-linear-progress-train'), style: trainWidthStyle }))),
+        helperText && (react_1.default.createElement("span", { className: classnames_1.default('ds-linear-progress-helper', intentClass) }, helperText))));
+};
+exports.LinearProgress.sizes = ProgresSize;

package/dist/components/progress/Step.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface StepProps {
+    /**
+     * Title for step.
+     */
+    title: React.ReactNode;
+    /**
+     * Id of the step for stepper to select.
+     */
+    id: string | number;
+    /**
+     * Addition information for Step goes here.
+     */
+    children?: React.ReactNode;
+}
+export declare const Step: (props: StepProps) => JSX.Element;
+export declare const isStepElement: (object: any) => object is React.ReactElement<StepProps, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;

package/dist/components/progress/Step.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isStepElement = exports.Step = void 0;
+const react_1 = __importDefault(require("react"));
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+exports.Step = (props) => {
+    return react_1.default.createElement(react_1.default.Fragment, null, props.children);
+};
+exports.isStepElement = (object) => {
+    return react_1.default.isValidElement(object) && object.type === exports.Step;
+};

package/dist/components/progress/StepperProgress.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+interface StepperProgressProps {
+    /**
+     * Id of current step of the progress.
+     */
+    currentStep: string | number;
+    /**
+     * Handle changing step when click on undo button by returning selected id.
+     *
+     * Only available when noTurnBack flag is false.
+     */
+    onClickUndo?: (id: string | number) => void;
+    /**
+     * Choose display type of Stepper Progress to be vertical.
+     *
+     * Default is false for horizontal.
+     */
+    vertical?: boolean;
+    /**
+     * No turning back flag to prevent go back to previous step of the progress.
+     */
+    noTurnBack?: boolean;
+    /**
+     * A space-delimited list of class names to pass along to a Progress element.
+     */
+    className?: string;
+}
+export declare const StepperProgress: React.FC<StepperProgressProps>;
+export {};

package/dist/components/progress/StepperProgress.js

@@ -0,0 +1,107 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.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.StepperProgress = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const __1 = require("../..");
+const Tick_1 = require("../../icons/Tick");
+const Undo_1 = require("../../icons/Undo");
+const Step_1 = require("./Step");
+exports.StepperProgress = props => {
+    const { currentStep, vertical = false, className, children, onClickUndo, noTurnBack } = props;
+    const currentProgress = react_1.useRef(null);
+    const [currentStepIndex, setCurrentStepIndex] = react_1.useState(0);
+    const stepElements = react_1.default.Children.toArray(children)
+        .filter(Step_1.isStepElement)
+        .map(step => step.props);
+    const calcConnectLineDist = () => {
+        var _a, _b, _c, _d;
+        if (currentProgress.current && stepElements) {
+            const connectLines = (_a = currentProgress.current) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('connect-line');
+            const stepNodes = (_b = currentProgress.current) === null || _b === void 0 ? void 0 : _b.getElementsByClassName('step-node');
+            for (let index = 1; index < (stepElements === null || stepElements === void 0 ? void 0 : stepElements.length); index++) {
+                const prevNodeX = (_c = stepNodes[index - 1]) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()[!vertical ? 'x' : 'y'];
+                const curNodeX = ((_d = stepNodes[index]) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect()[!vertical ? 'x' : 'y']) - 36;
+                const distance = curNodeX - prevNodeX;
+                connectLines[index - 1].style[vertical ? 'height' : 'width'] = distance - 8 + 'px';
+                if (vertical) {
+                    connectLines[index - 1].style.bottom = `-${distance - 4}px`;
+                }
+            }
+        }
+    };
+    const onClickNode = (id, isActivated) => () => {
+        if (onClickUndo && isActivated) {
+            onClickUndo(id);
+        }
+    };
+    react_1.useEffect(() => {
+        calcConnectLineDist();
+        setCurrentStepIndex((stepElements === null || stepElements === void 0 ? void 0 : stepElements.findIndex(obj => obj.id === currentStep)) || 0);
+    }, [children]);
+    return (react_1.default.createElement("div", { ref: currentProgress, className: classnames_1.default('ds-step-wrapper', {
+            vertical,
+            horizontal: !vertical,
+        }, className) }, stepElements === null || stepElements === void 0 ? void 0 : stepElements.map((step, index) => {
+        const isActive = index <= currentStepIndex;
+        const isActivated = index < currentStepIndex;
+        const isCurrentStep = step.id === currentStep;
+        return (react_1.default.createElement("div", { key: step.id, className: classnames_1.default('stepper', {
+                horizontal: vertical,
+                vertical: !vertical,
+            }), style: !vertical
+                ? {
+                    width: `calc(100% / ${stepElements.length})`,
+                }
+                : {} },
+            react_1.default.createElement("div", { className: classnames_1.default('step-node', {
+                    border: isActive && !isActivated,
+                    'current-step': isCurrentStep,
+                }) },
+                isActivated && !noTurnBack ? (react_1.default.createElement(__1.Tooltip, { content: "Go back to this step" },
+                    react_1.default.createElement("div", { className: classnames_1.default('step-number', {
+                            border: !isActive && !isActivated,
+                            active: isActive,
+                            activated: isActivated,
+                            backable: !noTurnBack && isActivated,
+                        }), onClick: onClickNode(step.id, isActivated) },
+                        react_1.default.createElement(Undo_1.UndoIcon, { size: 20, className: "undo-icon" }),
+                        react_1.default.createElement(Tick_1.TickIcon, { size: 20, className: "tick-icon" }),
+                        react_1.default.createElement("span", null, index + 1)))) : (react_1.default.createElement("div", { className: classnames_1.default('step-number', {
+                        border: !isActive && !isActivated,
+                        activated: isActivated,
+                        active: isActive,
+                    }), onClick: onClickNode(step.id, isActivated) },
+                    react_1.default.createElement(Tick_1.TickIcon, { size: 20, className: "tick-icon" }),
+                    react_1.default.createElement("span", null, index + 1))),
+                index < stepElements.length - 1 && (react_1.default.createElement("div", { className: classnames_1.default('connect-line', { activated: isActivated }) }))),
+            react_1.default.createElement("div", { className: classnames_1.default('step-info') },
+                react_1.default.createElement("div", { className: classnames_1.default('step-title', {
+                        active: isActive,
+                        vertical,
+                    }) }, step.title),
+                step.children && isCurrentStep && vertical && (react_1.default.createElement("div", { className: "step-desc" }, step.children)))));
+    })));
+};

package/dist/components/progress/helper.d.ts

@@ -0,0 +1 @@
+export declare const calcPercentFromValue: (value?: number | undefined, max?: number | undefined) => number | undefined;

package/dist/components/progress/helper.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calcPercentFromValue = void 0;
+exports.calcPercentFromValue = (value, max) => {
+    if (!value || !max) {
+        return undefined;
+    }
+    const percent = Math.abs((value / max) * 100);
+    if (percent > 100) {
+        return 100;
+    }
+    if (percent < 0) {
+        return 0;
+    }
+    return percent;
+};

package/dist/components/radio/Radio.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { IntentType } from '../../commons/types';
+declare type InputHtmlProps = React.InputHTMLAttributes<HTMLInputElement>;
+interface RadioProps extends InputHtmlProps {
+    /**
+     * Visual intent color apply to Radio element.
+     */
+    intent?: IntentType;
+    /**
+     * Text label for the Radio element.
+     */
+    label?: React.ReactNode;
+}
+export declare const Radio: React.FC<RadioProps>;
+export declare const isRadioElement: (object: any) => object is React.ReactElement<RadioProps, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export {};

package/dist/components/radio/Radio.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isRadioElement = exports.Radio = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const types_1 = require("../../commons/types");
+const intent_1 = require("../../utils/intent");
+exports.Radio = react_1.forwardRef((props, ref) => {
+    const { intent = types_1.IntentType.Primary, label, id, disabled, className } = props, htmlProps = __rest(props, ["intent", "label", "id", "disabled", "className"]);
+    return (react_1.default.createElement("label", { className: classnames_1.default('ds-radio', className), htmlFor: id },
+        react_1.default.createElement("input", Object.assign({ ref: ref, className: "ds-radio-input", type: "radio", id: id, disabled: disabled }, htmlProps)),
+        react_1.default.createElement("span", { className: "ds-radio-mask-focus" }),
+        react_1.default.createElement("span", { className: classnames_1.default('ds-radio-mask', intent_1.getIntentClassname(intent)) },
+            react_1.default.createElement("span", { className: "ds-radio-mask-icon" })),
+        react_1.default.createElement("span", { className: "ds-radio-label" }, label)));
+});
+exports.Radio.displayName = 'Radio';
+exports.isRadioElement = (object) => {
+    return react_1.isValidElement(object) && object.type === exports.Radio;
+};

package/dist/components/radio/RadioGroup.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface RadioGroupProps {
+    name?: string;
+    onChange?: (value: string) => void;
+    defaultValue?: string;
+    value?: string;
+}
+export declare const RadioGroup: React.FC<RadioGroupProps>;
+export {};