@veracity/vui 1.1.0 → 1.1.2

package/dist/cjs/progress/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./progress"), exports);
+var progress_1 = require("./progress");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(progress_1).default; } });
+__exportStar(require("./progress.types"), exports);

package/dist/cjs/progress/progress.d.ts

@@ -0,0 +1,6 @@
+import { ProgressProps } from './progress.types';
+export declare const ProgressBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** Indicates a process progress. */
+export declare const Progress: import("../core").VuiComponent<"div", ProgressProps>;
+export default Progress;
+//# sourceMappingURL=progress.d.ts.map

package/dist/cjs/progress/progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/progress/progress.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAEhD,eAAO,MAAM,YAAY,+HAGxB,CAAA;AAID,oCAAoC;AACpC,eAAO,MAAM,QAAQ,sDAoCnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/cjs/progress/progress.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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.prototype.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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Progress = exports.ProgressBase = void 0;
+const react_1 = __importStar(require("react"));
+const box_1 = require("../box");
+const core_1 = require("../core");
+const utils_1 = require("../utils");
+exports.ProgressBase = core_1.styled.divBox `
+  display: flex;
+  width: 100%;
+`;
+const minPercentageDisplay = 3;
+/** Indicates a process progress. */
+exports.Progress = (0, core_1.vui)((props, ref) => {
+    const { className, size = 'md', value = 0, max = 100, showPercentage } = props, rest = __rest(props, ["className", "size", "value", "max", "showPercentage"]);
+    const [width, setWidth] = (0, react_1.useState)(0);
+    const styles = (0, core_1.useStyleConfig)('Progress', props);
+    (0, react_1.useEffect)(() => {
+        const w = !value ? 0 : Math.ceil((value / max) * 100);
+        setWidth(w > 100 ? 100 : w);
+    }, [value, max]);
+    return (react_1.default.createElement(exports.ProgressBase, Object.assign({ className: (0, utils_1.cs)('vui-progress', className), ref: ref }, styles.container, rest, { bg: "grey.10", borderRadius: "sm", h: 1 }),
+        react_1.default.createElement(box_1.Box, { bg: "prussian.80", borderRadius: "sm", position: "relative", textAlign: "right", transition: "width 0.4s ease-in-out;", w: `${width}%` }, showPercentage && value >= minPercentageDisplay && (react_1.default.createElement(box_1.Box, Object.assign({}, styles.percentage, { position: "absolute", right: "0" }), `${width}%`)))));
+});
+exports.default = exports.Progress;

package/dist/cjs/progress/progress.types.d.ts

@@ -0,0 +1,8 @@
+import { SystemProps } from '../system';
+import { ThemingProps } from '../theme';
+export declare type ProgressProps = SystemProps & ThemingProps<'Progress'> & {
+    value?: number;
+    max?: number;
+    showPercentage?: boolean;
+};
+//# sourceMappingURL=progress.types.d.ts.map

package/dist/cjs/progress/progress.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.types.d.ts","sourceRoot":"","sources":["../../../src/progress/progress.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,aAAa,GAAG,WAAW,GACrC,YAAY,CAAC,UAAU,CAAC,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA"}

package/dist/cjs/progress/progress.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/progress/theme.d.ts

@@ -0,0 +1,47 @@
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {
+        size: string;
+    };
+    sizes: {
+        sm: {
+            container: {
+                minH: string;
+            };
+            percentage: {
+                fontSize: string;
+                top: string;
+            };
+        };
+        md: {
+            container: {
+                minH: string;
+            };
+            percentage: {
+                fontSize: string;
+                top: string;
+            };
+        };
+        lg: {
+            container: {
+                minH: string;
+            };
+            percentage: {
+                fontSize: string;
+                top: string;
+            };
+        };
+        xl: {
+            container: {
+                minH: string;
+            };
+            percentage: {
+                fontSize: string;
+                top: string;
+            };
+        };
+    };
+    variants: {};
+};
+export default _default;
+//# sourceMappingURL=theme.d.ts.map

package/dist/cjs/progress/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/progress/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,wBAKC"}

package/dist/cjs/progress/theme.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const baseStyle = {};
+const defaultProps = {
+    size: 'md'
+};
+const sizes = {
+    sm: {
+        container: {
+            minH: '4px'
+        },
+        percentage: {
+            fontSize: '80%',
+            top: '-16px'
+        }
+    },
+    md: {
+        container: {
+            minH: '8px'
+        },
+        percentage: {
+            fontSize: '100%',
+            top: '-20px'
+        }
+    },
+    lg: {
+        container: {
+            minH: '12px'
+        },
+        percentage: {
+            fontSize: '110%',
+            top: '-22px'
+        }
+    },
+    xl: {
+        container: {
+            minH: '16px'
+        },
+        percentage: {
+            fontSize: '120%',
+            top: '-24px'
+        }
+    }
+};
+const variants = {};
+exports.default = {
+    baseStyle,
+    defaultProps,
+    sizes,
+    variants
+};

package/dist/cjs/tabs/index.d.ts

@@ -0,0 +1,5 @@
+export * from './tabs';
+export * from './tab';
+export { default } from './tabs';
+export * from './tabs.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAChC,cAAc,cAAc,CAAA"}

package/dist/cjs/tabs/index.js

@@ -0,0 +1,25 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./tabs"), exports);
+__exportStar(require("./tab"), exports);
+var tabs_1 = require("./tabs");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(tabs_1).default; } });
+__exportStar(require("./tabs.types"), exports);

package/dist/cjs/tabs/tab.d.ts

@@ -0,0 +1,8 @@
+import { TabProps } from './tabs.types';
+export declare const TabBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/**
+ * Implements a Tab component
+ */
+export declare const Tab: import("../core").VuiComponent<"div", TabProps>;
+export default Tab;
+//# sourceMappingURL=tab.d.ts.map

package/dist/cjs/tabs/tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../src/tabs/tab.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAEvC,eAAO,MAAM,OAAO,+HAEnB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,GAAG,iDAOd,CAAA;AAEF,eAAe,GAAG,CAAA"}

package/dist/cjs/tabs/tab.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tab = exports.TabBase = void 0;
+const react_1 = __importDefault(require("react"));
+const core_1 = require("../core");
+const utils_1 = require("../utils");
+exports.TabBase = core_1.styled.divBox `
+  width: 100%;
+`;
+/**
+ * Implements a Tab component
+ */
+exports.Tab = (0, core_1.vui)((props, ref) => {
+    const { children, className } = props;
+    return (react_1.default.createElement(exports.TabBase, { className: (0, utils_1.cs)('vui-tab', className), ref: ref }, children));
+});
+exports.default = exports.Tab;

package/dist/cjs/tabs/tabs.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TabsProps } from './tabs.types';
+export declare const TabsBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").AnimationProps & import("..").BackgroundColorProps & import("..").BorderProps & import("..").BorderTopProps & import("..").BorderRightProps & import("..").BorderBottomProps & import("..").BorderLeftProps & import("..").BorderColorProps & import("..").BorderTopColorProps & import("..").BorderRightColorProps & import("..").BorderBottomColorProps & import("..").BorderLeftColorProps & import("..").BorderWidthProps & import("..").BorderTopWidthProps & import("..").BorderRightWidthProps & import("..").BorderBottomWidthProps & import("..").BorderLeftWidthProps & import("..").BorderStyleProps & import("..").BorderRadiusProps & import("..").OutlineProps & import("..").OutlineColorProps & import("..").OutlineWidthProps & import("..").OutlineStyleProps & import("..").DivideXProps & import("..").DivideYProps & import("..").DivideXReverseProps & import("..").DivideYReverseProps & import("..").DivideColorProps & import("..").DivideStyleProps & import("..").RingProps & import("..").RingColorProps & import("..").OpacityProps & import("..").BoxShadowProps & import("..").TextShadowProps & import("..").DisplayProps & import("..").AlignItemsProps & import("..").AlignContentProps & import("..").JustifyContentProps & import("..").JustifyItemsProps & import("..").FlexWrapProps & import("..").FlexGrowProps & import("..").FlexShrinkProps & import("..").FlexBasisProps & import("..").FlexDirectionProps & import("..").FlexProps & import("..").JustifySelfProps & import("..").AlignSelfProps & import("..").OrderProps & import("../system/flexboxGrids").RowProps & import("../system/flexboxGrids").ColProps & import("../system/grids").GapProps & import("../system/grids").ColumnGapProps & import("../system/grids").RowGapProps & import("../system/grids").GridColumnProps & import("../system/grids").GridRowProps & import("../system/grids").GridAutoFlowProps & import("../system/grids").GridAutoColumnsProps & import("../system/grids").GridAutoRowsProps & import("../system/grids").GridTemplateColumnsProps & import("../system/grids").GridTemplateRowsProps & import("../system/grids").GridTemplateAreasProps & import("../system/grids").GridAreaProps & import("..").AppearanceProps & import("..").CursorProps & import("..").PointerEventsProps & import("..").ResizeProps & import("..").UserSelectProps & import("..").IsTruncatedProps & import("..").FloatProps & import("..").BoxSizingProps & import("..").OverflowProps & import("..").OverflowXProps & import("..").OverflowYProps & import("..").PositionProps & import("..").ZIndexProps & import("..").TopProps & import("..").RightProps & import("..").BottomProps & import("..").LeftProps & import("..").VisibilityProps & import("..").OverscrollBehaviorProps & import("..").ObjectFitProps & import("..").MaxLinesProps & import("..").WidthProps & import("..").HeightProps & import("..").MaxWidthProps & import("..").MaxHeightProps & import("..").MinWidthProps & import("..").MinHeightProps & import("..").MarginProps & import("..").MarginTopProps & import("..").MarginRightProps & import("..").MarginBottomProps & import("..").MarginLeftProps & import("..").MarginXProps & import("..").MarginYProps & import("..").PaddingProps & import("..").PaddingTopProps & import("..").PaddingRightProps & import("..").PaddingBottomProps & import("..").PaddingLeftProps & import("..").PaddingXProps & import("..").PaddingYProps & import("..").SpaceXProps & import("..").SpaceYProps & import("..").SpaceXReverseProps & import("..").SpaceYReverseProps & import("../system/tables").BorderCollapseProps & import("../system/tables").TableLayoutProps & import("..").TransformProps & import("..").TransformOriginProps & import("..").TranslateXProps & import("..").TranslateYProps & import("..").RotateProps & import("..").SkewXProps & import("..").SkewYProps & import("..").ScaleProps & import("..").ScaleXProps & import("..").ScaleYProps & import("..").TransitionProps & import("..").TransitionPropertyProps & import("..").TransitionDurationProps & import("..").TransitionTimingFunctionProps & import("..").TransitionDelayProps & import("..").FontFamilyProps & import("..").FontSizeProps & import("..").FontStyleProps & import("..").FontWeightProps & import("..").LineHeightProps & import("..").ColorProps & import("..").TextTransformProps & import("..").TextDecorationProps & import("..").TextAlignProps & import("..").VerticalAlignProps & import("..").LetterSpacingProps & import("..").WhiteSpaceProps & import("..").TextOverflowProps & import("..").ListStyleTypeProps & import("..").ListStylePositionProps & import("..").WordBreakProps & import("..").ThemingProps<"Tabs"> & {
+    activeTabId?: number | undefined;
+    children?: React.ReactNode | React.ReactNode[];
+    onTabClick?: ((id: number) => void) | undefined;
+}, never>;
+/**
+ * Implements Tabs navigation to switch between views.
+ */
+export declare const Tabs: import("../core").VuiComponent<"div", TabsProps>;
+export default Tabs;
+//# sourceMappingURL=tabs.d.ts.map

package/dist/cjs/tabs/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAMtD,OAAO,EAAY,SAAS,EAAE,MAAM,cAAc,CAAA;AAIlD,eAAO,MAAM,QAAQ;;;;SAEpB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,kDA0Df,CAAA;AAEF,eAAe,IAAI,CAAA"}

package/dist/cjs/tabs/tabs.js

@@ -0,0 +1,92 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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.prototype.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.Tabs = exports.TabsBase = void 0;
+const react_1 = __importStar(require("react"));
+const core_1 = require("../core");
+const p_1 = require("../p");
+const utils_1 = require("../utils");
+const tab_1 = __importDefault(require("./tab"));
+const tabsNavBar_1 = __importDefault(require("./tabsNavBar"));
+const useTabsState_1 = require("./useTabsState");
+exports.TabsBase = core_1.styled.divBox `
+  width: 100%;
+`;
+/**
+ * Implements Tabs navigation to switch between views.
+ */
+exports.Tabs = (0, core_1.vui)((props, ref) => {
+    const { activeTabId, children, className, size, onTabClick } = props, rest = __rest(props, ["activeTabId", "children", "className", "size", "onTabClick"]);
+    const styles = (0, core_1.useStyleConfig)('Tabs', props);
+    const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = (0, useTabsState_1.useTabsState)('fadeIn', activeTabId);
+    (0, react_1.useEffect)(() => {
+        const t = [];
+        if (children) {
+            ;
+            children.forEach((child, index) => {
+                var _a;
+                if ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.title) {
+                    t.push({
+                        id: index,
+                        title: child.props.title,
+                        children: child.props.children,
+                        disabled: child.props.disabled,
+                        onClick: child.props.onClick
+                    });
+                }
+            });
+        }
+        setTabs(t);
+        if (activeTabId !== undefined && (tabs === null || tabs === void 0 ? void 0 : tabs[activeTabId])) {
+            setActiveTabIndex(activeTabId);
+        }
+    }, [children, activeTabId]);
+    const onNavItemClick = (id) => {
+        var _a, _b;
+        setAnimationDirection(id < activeTabIndex ? 'fadeLeft' : 'fadeRight');
+        setActiveTabIndex(id);
+        onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(id);
+        (_b = (_a = tabs.find(t => t.id === id)) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+    };
+    const activeTab = tabs === null || tabs === void 0 ? void 0 : tabs[activeTabIndex];
+    return (react_1.default.createElement(exports.TabsBase, Object.assign({ className: (0, utils_1.cs)('vui-tabs', className), ref: ref }, styles.container, rest),
+        !!(tabs === null || tabs === void 0 ? void 0 : tabs.length) && (react_1.default.createElement(tabsNavBar_1.default, { activeNavItem: activeTabIndex, animationDirection: animationDirection, onNavItemClick: onNavItemClick, size: size, tabs: tabs })),
+        (tabs === null || tabs === void 0 ? void 0 : tabs.length) ? (react_1.default.createElement(tab_1.default, { onClick: activeTab === null || activeTab === void 0 ? void 0 : activeTab.onClick, title: activeTab === null || activeTab === void 0 ? void 0 : activeTab.title }, !(activeTab === null || activeTab === void 0 ? void 0 : activeTab.disabled) && (activeTab === null || activeTab === void 0 ? void 0 : activeTab.children))) : (react_1.default.createElement(p_1.P, { p: 2 }, "Please specify Tabs."))));
+});
+exports.default = exports.Tabs;

package/dist/cjs/tabs/tabs.types.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { SystemProps } from '../system';
+import { ThemingProps } from '../theme';
+export declare type AnimationDirection = 'fadeLeft' | 'fadeRight' | 'fadeIn';
+export declare type TabsSize = 'md' | 'sm' | 'lg' | 'xl';
+export declare type TabsProps = SystemProps & ThemingProps<'Tabs'> & {
+    activeTabId?: number;
+    children?: ReactNode | ReactNode[];
+    onTabClick?: (id: number) => void;
+};
+export declare type TabProps = SystemProps & {
+    id?: number;
+    title: ReactNode;
+    children?: ReactNode;
+    disabled?: boolean;
+    onClick?: () => void;
+};
+export declare type TabNavBarProps = {
+    tabs: TabProps[];
+    onNavItemClick: (id: number) => void;
+    activeNavItem?: number;
+    animationDirection?: AnimationDirection;
+    size?: TabsSize;
+};
+//# sourceMappingURL=tabs.types.d.ts.map

package/dist/cjs/tabs/tabs.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.types.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAA;AAEpE,oBAAY,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEhD,oBAAY,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GAAG;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAA;IAClC,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAEH,oBAAY,QAAQ,GAAG,WAAW,GAAG;IACnC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,oBAAY,cAAc,GAAG;IAC3B,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA"}

package/dist/cjs/tabs/tabs.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/tabs/tabsNavBar.d.ts

@@ -0,0 +1,4 @@
+import { TabNavBarProps } from './tabs.types';
+export declare const TabsNavBar: import("../core").VuiComponent<"div", TabNavBarProps>;
+export default TabsNavBar;
+//# sourceMappingURL=tabsNavBar.d.ts.map

package/dist/cjs/tabs/tabsNavBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE7C,eAAO,MAAM,UAAU,uDAwCrB,CAAA;AAEF,eAAe,UAAU,CAAA"}

package/dist/cjs/tabs/tabsNavBar.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabsNavBar = void 0;
+const react_1 = __importDefault(require("react"));
+const box_1 = __importDefault(require("../box"));
+const core_1 = require("../core");
+const list_1 = require("../list");
+const utils_1 = require("../utils");
+exports.TabsNavBar = (0, core_1.vui)((props, ref) => {
+    var _a;
+    const { tabs, onNavItemClick, activeNavItem, animationDirection, size } = props;
+    return (react_1.default.createElement(list_1.List, { borderBottom: "1px solid grey.40", className: (0, utils_1.cs)('vui-tabsNavBar'), display: "flex", isInteractive: true, ref: ref, size: size, w: 1 }, (_a = tabs === null || tabs === void 0 ? void 0 : tabs.map) === null || _a === void 0 ? void 0 : _a.call(tabs, tab => (react_1.default.createElement(list_1.ListItem, { className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab === null || tab === void 0 ? void 0 : tab.id}`, disabled: tab.disabled, display: "inline-flex", key: tab.id, onClick: () => (tab === null || tab === void 0 ? void 0 : tab.id) !== undefined && onNavItemClick(tab.id), position: "relative" },
+        tab.title,
+        !tab.disabled && tab.id === activeNavItem && (react_1.default.createElement(box_1.default, { animation: animationDirection, bg: "prussian.80", bottom: "-1px", h: `${size === 'sm' ? 2 : 4}px`, left: 0, position: "absolute", w: 1 }, "\u00A0")))))));
+});
+exports.default = exports.TabsNavBar;

package/dist/cjs/tabs/theme.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {};
+    parts: string[];
+    sizes: {
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+    };
+    variants: {};
+};
+export default _default;
+//# sourceMappingURL=theme.d.ts.map

package/dist/cjs/tabs/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/tabs/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;AAeA,wBAMC"}

package/dist/cjs/tabs/theme.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const baseStyle = {};
+const defaultProps = {};
+const parts = ['container', 'tabsNavBar', 'tab'];
+const sizes = {
+    sm: {},
+    md: {},
+    lg: {},
+    xl: {}
+};
+const variants = {};
+exports.default = {
+    baseStyle,
+    defaultProps,
+    parts,
+    sizes,
+    variants
+};

package/dist/cjs/tabs/useTabsState.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { AnimationDirection, TabProps } from './tabs.types';
+export declare const useTabsState: (initialAnimation: AnimationDirection, activeTabId?: number | undefined) => {
+    tabs: TabProps[];
+    setTabs: import("react").Dispatch<import("react").SetStateAction<TabProps[]>>;
+    activeTabIndex: number;
+    setActiveTabIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    animationDirection: AnimationDirection;
+    setAnimationDirection: import("react").Dispatch<import("react").SetStateAction<AnimationDirection>>;
+};
+//# sourceMappingURL=useTabsState.d.ts.map

package/dist/cjs/tabs/useTabsState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabsState.d.ts","sourceRoot":"","sources":["../../../src/tabs/useTabsState.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAE3D,eAAO,MAAM,YAAY,qBAAsB,kBAAkB;;;;;;;CAMhE,CAAA"}

package/dist/cjs/tabs/useTabsState.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabsState = void 0;
+const react_1 = require("react");
+const useTabsState = (initialAnimation, activeTabId) => {
+    const [tabs, setTabs] = (0, react_1.useState)([]);
+    const [activeTabIndex, setActiveTabIndex] = (0, react_1.useState)(activeTabId !== null && activeTabId !== void 0 ? activeTabId : 0);
+    const [animationDirection, setAnimationDirection] = (0, react_1.useState)(initialAnimation);
+    return { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection };
+};
+exports.useTabsState = useTabsState;

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

@@ -702,6 +702,51 @@ declare const _default: {
             };
         };
     };
+    Progress: {
+        baseStyle: {};
+        defaultProps: {
+            size: string;
+        };
+        sizes: {
+            sm: {
+                container: {
+                    minH: string;
+                };
+                percentage: {
+                    fontSize: string;
+                    top: string;
+                };
+            };
+            md: {
+                container: {
+                    minH: string;
+                };
+                percentage: {
+                    fontSize: string;
+                    top: string;
+                };
+            };
+            lg: {
+                container: {
+                    minH: string;
+                };
+                percentage: {
+                    fontSize: string;
+                    top: string;
+                };
+            };
+            xl: {
+                container: {
+                    minH: string;
+                };
+                percentage: {
+                    fontSize: string;
+                    top: string;
+                };
+            };
+        };
+        variants: {};
+    };
     Popover: {
         baseStyle: {};
         defaultProps: {};
@@ -1009,6 +1054,18 @@ declare const _default: {
             striped: {};
         };
     };
+    Tabs: {
+        baseStyle: {};
+        defaultProps: {};
+        parts: string[];
+        sizes: {
+            sm: {};
+            md: {};
+            lg: {};
+            xl: {};
+        };
+        variants: {};
+    };
     Tag: {
         baseStyle: {};
         defaultProps: {

package/dist/cjs/theme/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,wBAiCC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,wBAmCC"}