@veracity/vui 1.1.0 → 1.1.2

package/dist/esm/modal/modal.js

@@ -1,5 +1,4 @@
 import React, { cloneElement, useRef } from 'react';
-import { RemoveScroll } from 'react-remove-scroll';
 import Box from '../box';
 import { vui } from '../core';
 import Portal from '../portal';
@@ -19,7 +18,7 @@ export const Modal = vui((props, ref) => {
     const { allowPinchZoom, children, className, contentProps, disableAutoFocus, disableBackdropClose, disableEscClose, disablePortal, disableReturnFocus, disableScrollLock, disableTrapFocus, finalFocusRef, hideBackdrop, initialFocusRef, isOpen, onBackdropClick: onBackdropClickProp, onClose, onEsc, preserveScrollBar, size, variant, ...rest } = props;
     const modalRef = useRef(null);
     const mouseDownTarget = useRef(null);
-    useModalManager(modalRef, isOpen);
+    useModalManager(modalRef, isOpen, disableScrollLock);
     if (!isOpen)
         return null;
     const onBackdropClick = (e) => {
@@ -39,9 +38,7 @@ export const Modal = vui((props, ref) => {
             onEsc?.();
         }
     };
-    const onMouseDown = (e) => {
-        mouseDownTarget.current = e.target;
-    };
+    const onMouseDown = (e) => (mouseDownTarget.current = e.target);
     const childProps = {
         onClick: (e) => {
             e.stopPropagation();
@@ -55,8 +52,7 @@ export const Modal = vui((props, ref) => {
             React.createElement(Box, { className: cs('vui-modal', className), ref: mergeRefs(ref, modalRef), ...rest, onKeyDown: callAll(props.onKeyDown, onKeyDown), onMouseDown: callAll(props.onMouseDown, onMouseDown) },
                 !hideBackdrop && React.createElement(ModalBackdrop, null),
                 React.createElement(FocusLock, { autoFocus: !disableAutoFocus, finalFocusRef: finalFocusRef, initialFocusRef: initialFocusRef, isDisabled: disableTrapFocus, returnFocus: !disableReturnFocus },
-                    React.createElement(RemoveScroll, { allowPinchZoom: allowPinchZoom, enabled: !disableScrollLock, forwardProps: true, removeScrollBar: !preserveScrollBar },
-                        React.createElement(ModalContent, { ...contentProps }, cloneElement(children, childProps))))))));
+                    React.createElement(ModalContent, { ...contentProps }, cloneElement(children, childProps)))))));
 });
 Modal.Backdrop = ModalBackdrop;
 Modal.Content = ModalContent;

package/dist/esm/modal/modalManager.d.ts

@@ -8,6 +8,6 @@ declare class ModalManager {
 }
 export declare const manager: ModalManager;
 /** Refs of new modals will be automatically added/removed from the state when rendering. */
-export declare function useModalManager(ref: Ref<any>, isOpen?: boolean): void;
+export declare function useModalManager(ref: Ref<any>, isOpen?: boolean, disableScrollLock?: boolean): void;
 export {};
 //# sourceMappingURL=modalManager.d.ts.map

package/dist/esm/modal/modalManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modalManager.d.ts","sourceRoot":"","sources":["../../../src/modal/modalManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAa,MAAM,OAAO,CAAA;AAEtC,0CAA0C;AAC1C,cAAM,YAAY;IAChB,MAAM,EAAE,GAAG,EAAE,CAAK;IAElB,GAAG,UAAW,GAAG,UAEhB;IAED,MAAM,UAAW,GAAG,UAEnB;IAED,UAAU,UAAW,GAAG,aAGvB;CACF;AAED,eAAO,MAAM,OAAO,cAAqB,CAAA;AAEzC,4FAA4F;AAC5F,wBAAgB,eAAe,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,EAAE,OAAO,QAQ9D"}
+{"version":3,"file":"modalManager.d.ts","sourceRoot":"","sources":["../../../src/modal/modalManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAa,MAAM,OAAO,CAAA;AAEtC,0CAA0C;AAC1C,cAAM,YAAY;IAChB,MAAM,EAAE,GAAG,EAAE,CAAK;IAElB,GAAG,UAAW,GAAG,UAEhB;IAED,MAAM,UAAW,GAAG,UAEnB;IAED,UAAU,UAAW,GAAG,aAGvB;CACF;AAED,eAAO,MAAM,OAAO,cAAqB,CAAA;AAEzC,4FAA4F;AAC5F,wBAAgB,eAAe,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,iBAAiB,CAAC,EAAE,OAAO,QAY3F"}

package/dist/esm/modal/modalManager.js

@@ -17,11 +17,17 @@ class ModalManager {
 }
 export const manager = new ModalManager();
 /** Refs of new modals will be automatically added/removed from the state when rendering. */
-export function useModalManager(ref, isOpen) {
+export function useModalManager(ref, isOpen, disableScrollLock) {
     useEffect(() => {
-        isOpen && manager.add(ref);
+        if (isOpen) {
+            manager.add(ref);
+            if (!disableScrollLock)
+                document.body.classList.add('no-scroll');
+        }
         return () => {
             manager.remove(ref);
+            if (!disableScrollLock)
+                document.body.classList.remove('no-scroll');
         };
     }, [isOpen, ref]);
 }

package/dist/esm/modal/modalStyle.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+export default _default;
+//# sourceMappingURL=modalStyle.d.ts.map

package/dist/esm/modal/modalStyle.d.ts.map

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

package/dist/esm/modal/modalStyle.js

@@ -0,0 +1,8 @@
+import { createGlobalStyle } from '../core';
+export default createGlobalStyle `
+
+body.no-scroll {
+	overflow: hidden !important;
+	overscroll-behavior: contain;
+}
+`;

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

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

package/dist/esm/progress/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/progress/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,cAAc,kBAAkB,CAAA"}

package/dist/esm/progress/index.js

@@ -0,0 +1,3 @@
+export * from './progress';
+export { default } from './progress';
+export * from './progress.types';

package/dist/esm/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/esm/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/esm/progress/progress.js

@@ -0,0 +1,22 @@
+import React, { useEffect, useState } from 'react';
+import { Box } from '../box';
+import { styled, useStyleConfig, vui } from '../core';
+import { cs } from '../utils';
+export const ProgressBase = styled.divBox `
+  display: flex;
+  width: 100%;
+`;
+const minPercentageDisplay = 3;
+/** Indicates a process progress. */
+export const Progress = vui((props, ref) => {
+    const { className, size = 'md', value = 0, max = 100, showPercentage, ...rest } = props;
+    const [width, setWidth] = useState(0);
+    const styles = useStyleConfig('Progress', props);
+    useEffect(() => {
+        const w = !value ? 0 : Math.ceil((value / max) * 100);
+        setWidth(w > 100 ? 100 : w);
+    }, [value, max]);
+    return (React.createElement(ProgressBase, { className: cs('vui-progress', className), ref: ref, ...styles.container, ...rest, bg: "grey.10", borderRadius: "sm", h: 1 },
+        React.createElement(Box, { bg: "prussian.80", borderRadius: "sm", position: "relative", textAlign: "right", transition: "width 0.4s ease-in-out;", w: `${width}%` }, showPercentage && value >= minPercentageDisplay && (React.createElement(Box, { ...styles.percentage, position: "absolute", right: "0" }, `${width}%`)))));
+});
+export default Progress;

package/dist/esm/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/esm/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/esm/progress/progress.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/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/esm/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/esm/progress/theme.js

@@ -0,0 +1,49 @@
+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 = {};
+export default {
+    baseStyle,
+    defaultProps,
+    sizes,
+    variants
+};

package/dist/esm/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/esm/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/esm/tabs/index.js

@@ -0,0 +1,4 @@
+export * from './tabs';
+export * from './tab';
+export { default } from './tabs';
+export * from './tabs.types';

package/dist/esm/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/esm/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/esm/tabs/tab.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { styled, vui } from '../core';
+import { cs } from '../utils';
+export const TabBase = styled.divBox `
+  width: 100%;
+`;
+/**
+ * Implements a Tab component
+ */
+export const Tab = vui((props, ref) => {
+    const { children, className } = props;
+    return (React.createElement(TabBase, { className: cs('vui-tab', className), ref: ref }, children));
+});
+export default Tab;

package/dist/esm/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/esm/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/esm/tabs/tabs.js

@@ -0,0 +1,50 @@
+import React, { useEffect } from 'react';
+import { styled, useStyleConfig, vui } from '../core';
+import { P } from '../p';
+import { cs } from '../utils';
+import Tab from './tab';
+import TabsNavBar from './tabsNavBar';
+import { useTabsState } from './useTabsState';
+export const TabsBase = styled.divBox `
+  width: 100%;
+`;
+/**
+ * Implements Tabs navigation to switch between views.
+ */
+export const Tabs = vui((props, ref) => {
+    const { activeTabId, children, className, size, onTabClick, ...rest } = props;
+    const styles = useStyleConfig('Tabs', props);
+    const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = useTabsState('fadeIn', activeTabId);
+    useEffect(() => {
+        const t = [];
+        if (children) {
+            ;
+            children.forEach((child, index) => {
+                if (child?.props?.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?.[activeTabId]) {
+            setActiveTabIndex(activeTabId);
+        }
+    }, [children, activeTabId]);
+    const onNavItemClick = (id) => {
+        setAnimationDirection(id < activeTabIndex ? 'fadeLeft' : 'fadeRight');
+        setActiveTabIndex(id);
+        onTabClick?.(id);
+        tabs.find(t => t.id === id)?.onClick?.();
+    };
+    const activeTab = tabs?.[activeTabIndex];
+    return (React.createElement(TabsBase, { className: cs('vui-tabs', className), ref: ref, ...styles.container, ...rest },
+        !!tabs?.length && (React.createElement(TabsNavBar, { activeNavItem: activeTabIndex, animationDirection: animationDirection, onNavItemClick: onNavItemClick, size: size, tabs: tabs })),
+        tabs?.length ? (React.createElement(Tab, { onClick: activeTab?.onClick, title: activeTab?.title }, !activeTab?.disabled && activeTab?.children)) : (React.createElement(P, { p: 2 }, "Please specify Tabs."))));
+});
+export default Tabs;

package/dist/esm/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/esm/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/esm/tabs/tabs.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/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/esm/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/esm/tabs/tabsNavBar.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Box from '../box';
+import { vui } from '../core';
+import { List, ListItem } from '../list';
+import { cs } from '../utils';
+export const TabsNavBar = vui((props, ref) => {
+    const { tabs, onNavItemClick, activeNavItem, animationDirection, size } = props;
+    return (React.createElement(List, { borderBottom: "1px solid grey.40", className: cs('vui-tabsNavBar'), display: "flex", isInteractive: true, ref: ref, size: size, w: 1 }, tabs?.map?.(tab => (React.createElement(ListItem, { className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`, disabled: tab.disabled, display: "inline-flex", key: tab.id, onClick: () => tab?.id !== undefined && onNavItemClick(tab.id), position: "relative" },
+        tab.title,
+        !tab.disabled && tab.id === activeNavItem && (React.createElement(Box, { animation: animationDirection, bg: "prussian.80", bottom: "-1px", h: `${size === 'sm' ? 2 : 4}px`, left: 0, position: "absolute", w: 1 }, "\u00A0")))))));
+});
+export default TabsNavBar;

package/dist/esm/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/esm/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/esm/tabs/theme.js

@@ -0,0 +1,17 @@
+const baseStyle = {};
+const defaultProps = {};
+const parts = ['container', 'tabsNavBar', 'tab'];
+const sizes = {
+    sm: {},
+    md: {},
+    lg: {},
+    xl: {}
+};
+const variants = {};
+export default {
+    baseStyle,
+    defaultProps,
+    parts,
+    sizes,
+    variants
+};

package/dist/esm/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/esm/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/esm/tabs/useTabsState.js

@@ -0,0 +1,7 @@
+import { useState } from 'react';
+export const useTabsState = (initialAnimation, activeTabId) => {
+    const [tabs, setTabs] = useState([]);
+    const [activeTabIndex, setActiveTabIndex] = useState(activeTabId ?? 0);
+    const [animationDirection, setAnimationDirection] = useState(initialAnimation);
+    return { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection };
+};

package/dist/esm/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/esm/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"}

package/dist/esm/theme/components.js

@@ -21,6 +21,7 @@ import P from '../p/theme';
 import Pagination from '../pagination/theme';
 import Panel from '../panel/theme';
 import Popover from '../popover/theme';
+import Progress from '../progress/theme';
 import Radio from '../radio/theme';
 import Select from '../select/theme';
 import Skeleton from '../skeleton/theme';
@@ -28,6 +29,7 @@ import Spinner from '../spinner/theme';
 import Switch from '../switch/theme';
 import T from '../t/theme';
 import Table from '../table/theme';
+import Tabs from '../tabs/theme';
 import Tag from '../tag/theme';
 import Textarea from '../textarea/theme';
 export default {
@@ -53,6 +55,7 @@ export default {
     P,
     Pagination,
     Panel,
+    Progress,
     Popover,
     Radio,
     Select,
@@ -61,6 +64,7 @@ export default {
     Switch,
     T,
     Table,
+    Tabs,
     Tag,
     Textarea
 };