@ledgerhq/lumen-ui-rnative 0.0.62 → 0.0.63

package/.storybook/main.ts

@@ -28,6 +28,9 @@ const config: StorybookConfig = {
       ...config.resolve.alias,
       'react-native': 'react-native-web',
       'react-native-svg': 'react-native-svg-web',
+      '@react-native-community/blur': fileURLToPath(
+        new URL('./mocks/blur.tsx', import.meta.url),
+      ),
     };
 
     return mergeConfig(config, {

package/.storybook/mocks/blur.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { View, ViewProps } from 'react-native';
+
+/**
+ * Mock BlurView for web/storybook
+ * @react-native-community/blur doesn't work on web, so we use a simple View
+ */
+export const BlurView = (props: ViewProps & { blurAmount?: number }) => {
+  const { blurAmount, ...restProps } = props;
+  return <View {...restProps} />;
+};

package/babel.config.js

@@ -11,7 +11,7 @@ export default function (api) {
         },
       ],
     ],
-    plugins: ['react-native-worklets/plugin'],
+    plugins: ['react-native-worklets/plugin', 'react-native-reanimated/plugin'],
     env: {
       test: {
         presets: [

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.0.61",
+  "version": "0.0.62",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",

package/dist/src/lib/Components/Icon/Icon.js

@@ -31,6 +31,6 @@ const useStyles = (lx, size, color) => {
 };
 export const Icon = ({ size = 24, color, lx = {}, children, viewBox, ref, ...props }) => {
     const styles = useStyles(lx, size, color);
-    return (_jsx(Svg, { ref: ref, width: styles.container.width, height: styles.container.height, strokeWidth: styles.container.strokeWidth, viewBox: viewBox, color: styles.color, fill: 'none', pointerEvents: 'none', ...props, children: children }));
+    return (_jsx(Svg, { ref: ref, width: styles.container.width, height: styles.container.height, strokeWidth: styles.container.strokeWidth, viewBox: viewBox, color: styles.color, fill: 'none', style: { pointerEvents: 'none' }, ...props, children: children }));
 };
 Icon.displayName = 'Icon';

package/dist/src/lib/Components/Spot/Spot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spot.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spot/Spot.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAkB,SAAS,EAAY,MAAM,SAAS,CAAC;AAgF9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,IAAI,UAAW,SAAS,4CA2DpC,CAAC"}
+{"version":3,"file":"Spot.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spot/Spot.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAkB,SAAS,EAAY,MAAM,SAAS,CAAC;AAgF9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,IAAI,UAAW,SAAS,4CA2DpC,CAAC"}

package/dist/src/lib/Components/TabBar/TabBar.d.ts

@@ -0,0 +1,33 @@
+import { TabBarItemProps, TabBarProps } from './types';
+/**
+ * Individual tab item component that displays an icon and label.
+ * Must be used as a child of TabBar.
+ *
+ * @example
+ * <TabBarItem value="home" label="Home" icon={HomeFill} activeIcon={HomeActive} />
+ */
+export declare function TabBarItem({ value, label, icon, activeIcon, }: TabBarItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TabBarItem {
+    var displayName: string;
+}
+/**
+ * A horizontal tab bar with animated pill background and icon transitions.
+ * Provides smooth animations for active state changes and press interactions.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/react-native_navigation-tabbar--docs Storybook}
+ * @see {@link https://ldls.vercel.app/?path=/docs/react-native_navigation-tabbar--docs#dos-and-donts Guidelines}
+ *
+ * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
+ *
+ * @example
+ * import { TabBar, TabBarItem } from '@ledgerhq/lumen-ui-rnative';
+ * import { HomeFill, Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * const [activeTab, setActiveTab] = useState('home');
+ * <TabBar active={activeTab} onTabPress={setActiveTab}>
+ *   <TabBarItem value="home" label="Home" icon={HomeFill} />
+ *   <TabBarItem value="settings" label="Settings" icon={Settings} />
+ * </TabBar>
+ */
+export declare function TabBar({ active, onTabPress, children, ...props }: TabBarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TabBar.d.ts.map

package/dist/src/lib/Components/TabBar/TabBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TabBar/TabBar.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAIvD;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,UAAU,GACX,EAAE,eAAe,2CA+FjB;yBApGe,UAAU;;;AAwG1B;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,2CAiFb"}

package/dist/src/lib/Components/TabBar/TabBar.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BlurView } from '@react-native-community/blur';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { StyleSheet, Text } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withSequence, withTiming, } from 'react-native-reanimated';
+import { useStyleSheet, useTheme } from '../../../styles';
+import { Placeholder } from '../../Symbols';
+import { Box, Pressable } from '../Utility';
+import { TabBarContextProvider, useTabBarContext } from './TabBarContext';
+const PILL_INSET = 4;
+/**
+ * Individual tab item component that displays an icon and label.
+ * Must be used as a child of TabBar.
+ *
+ * @example
+ * <TabBarItem value="home" label="Home" icon={HomeFill} activeIcon={HomeActive} />
+ */
+export function TabBarItem({ value, label, icon, activeIcon, }) {
+    const styles = useStyles();
+    const { active, onTabPress } = useTabBarContext();
+    const isActive = active === value;
+    const activeProgress = useSharedValue(isActive ? 1 : 0);
+    const pressProgress = useSharedValue(1);
+    const Icon = icon ?? Placeholder;
+    const ActiveIcon = activeIcon ?? Icon;
+    useEffect(() => {
+        activeProgress.value = withDelay(50, withTiming(isActive ? 1 : 0, {
+            duration: 200,
+            easing: Easing.bezier(0.4, 0, 0.2, 1),
+        }));
+    }, [isActive, activeProgress]);
+    function onPress() {
+        onTabPress(value);
+    }
+    function onPressIn() {
+        pressProgress.value = withTiming(0.9, {
+            duration: 100,
+            easing: Easing.bezier(0, 0, 0.2, 1),
+        });
+    }
+    function onPressOut() {
+        pressProgress.value = withSequence(withTiming(0.95, {
+            duration: 0,
+        }), withTiming(1, {
+            duration: 120,
+            easing: Easing.out(Easing.quad),
+        }));
+    }
+    const scaleStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: pressProgress.value }],
+    }), [pressProgress]);
+    const activeIconStyle = useAnimatedStyle(() => ({
+        opacity: activeProgress.value,
+    }), [activeProgress]);
+    const inactiveIconStyle = useAnimatedStyle(() => ({
+        opacity: 1 - activeProgress.value,
+    }), [activeProgress]);
+    return (_jsxs(Pressable, { style: styles.item, onPress: onPress, onPressIn: onPressIn, onPressOut: onPressOut, accessibilityRole: 'tab', accessibilityLabel: label ?? value, accessibilityState: { selected: isActive }, children: [_jsx(Animated.View, { style: scaleStyle, children: _jsxs(Box, { style: styles.itemIconContainer, children: [_jsx(Animated.View, { style: [styles.itemIcon, inactiveIconStyle], children: _jsx(Icon, { size: 20 }) }), _jsx(Animated.View, { style: [styles.itemIcon, activeIconStyle], children: _jsx(ActiveIcon, { size: 20 }) })] }) }), label && (_jsx(Text, { style: [styles.itemText, isActive && styles.activeItemText], numberOfLines: 1, children: label }))] }));
+}
+TabBarItem.displayName = 'TabBarItem';
+/**
+ * A horizontal tab bar with animated pill background and icon transitions.
+ * Provides smooth animations for active state changes and press interactions.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/react-native_navigation-tabbar--docs Storybook}
+ * @see {@link https://ldls.vercel.app/?path=/docs/react-native_navigation-tabbar--docs#dos-and-donts Guidelines}
+ *
+ * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
+ *
+ * @example
+ * import { TabBar, TabBarItem } from '@ledgerhq/lumen-ui-rnative';
+ * import { HomeFill, Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * const [activeTab, setActiveTab] = useState('home');
+ * <TabBar active={activeTab} onTabPress={setActiveTab}>
+ *   <TabBarItem value="home" label="Home" icon={HomeFill} />
+ *   <TabBarItem value="settings" label="Settings" icon={Settings} />
+ * </TabBar>
+ */
+export function TabBar({ active, onTabPress, children, ...props }) {
+    const styles = useStyles();
+    const { theme, colorScheme } = useTheme();
+    const pillProgress = useSharedValue(0);
+    const itemWidth = useSharedValue(0);
+    const itemHeight = useSharedValue(0);
+    const hasLayoutRef = useRef(false);
+    const getActiveIndex = useCallback(() => {
+        return React.Children.toArray(children).findIndex((child) => {
+            if (React.isValidElement(child)) {
+                return child.props.value === active;
+            }
+            return false;
+        });
+    }, [active, children]);
+    function onLayout(e) {
+        const { width, height } = e.nativeEvent.layout;
+        const count = React.Children.count(children);
+        const slotWidth = (width - PILL_INSET * 2) / count;
+        itemWidth.value = slotWidth;
+        itemHeight.value = height;
+        if (!hasLayoutRef.current) {
+            hasLayoutRef.current = true;
+            const index = getActiveIndex();
+            if (index >= 0) {
+                pillProgress.value = index * slotWidth;
+            }
+        }
+    }
+    function handleTabPress(value) {
+        onTabPress?.(value);
+    }
+    useEffect(() => {
+        if (!hasLayoutRef.current) {
+            return;
+        }
+        const index = getActiveIndex();
+        if (index >= 0 && itemWidth.value > 0) {
+            pillProgress.value = withTiming(index * itemWidth.value, {
+                duration: 300,
+                easing: Easing.bezier(0.4, 0, 0.2, 1),
+            });
+        }
+    }, [itemWidth, pillProgress, getActiveIndex]);
+    const animatedPillStyle = useAnimatedStyle(() => ({
+        transform: [{ translateX: pillProgress.value }],
+        width: itemWidth.value,
+        height: itemHeight.value - PILL_INSET * 2,
+    }), [pillProgress, itemWidth, itemHeight]);
+    return (_jsx(TabBarContextProvider, { value: { active, onTabPress: handleTabPress }, children: _jsxs(Box, { style: styles.container, onLayout: onLayout, accessibilityRole: 'tablist', ...props, children: [children, _jsx(BlurView, { style: styles.blur, blurAmount: theme.blur.md, blurType: colorScheme === 'dark' ? 'dark' : 'light' }), _jsx(Animated.View, { style: [styles.pill, animatedPillStyle] })] }) }));
+}
+const useStyles = () => useStyleSheet((t) => ({
+    container: {
+        height: t.sizes.s56,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        padding: t.spacings.s4,
+        alignItems: 'center',
+        borderRadius: t.borderRadius.full,
+        backgroundColor: t.colors.bg.mutedTransparent,
+        overflow: 'hidden',
+    },
+    blur: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: -1,
+    },
+    item: {
+        flex: 1,
+        paddingVertical: t.spacings.s4,
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: t.spacings.s2,
+    },
+    itemText: {
+        ...t.typographies.body4,
+        paddingHorizontal: t.spacings.s12,
+        color: t.colors.text.base,
+    },
+    itemIcon: {
+        position: 'absolute',
+    },
+    itemIconContainer: {
+        width: 20,
+        height: 20,
+        position: 'relative',
+    },
+    activeItemText: {
+        ...t.typographies.body4SemiBold,
+    },
+    pill: {
+        position: 'absolute',
+        top: PILL_INSET,
+        left: PILL_INSET,
+        borderRadius: t.borderRadius.full,
+        backgroundColor: t.colors.bg.mutedTransparent,
+    },
+}), []);

package/dist/src/lib/Components/TabBar/TabBar.stories.d.ts

@@ -0,0 +1,50 @@
+import type { StoryObj } from '@storybook/react-native-web-vite';
+import { TabBar, TabBarItem } from './TabBar';
+declare const meta: {
+    title: string;
+    component: typeof TabBar;
+    subcomponents: {
+        TabBarItem: typeof TabBarItem;
+    };
+    parameters: {
+        layout: string;
+        backgrounds: {
+            default: string;
+        };
+    };
+    argTypes: {
+        active: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onTabPress: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        children: {
+            control: false;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;
+export declare const Complex: Story;
+export declare const MissingLabel: Story;
+//# sourceMappingURL=TabBar.stories.d.ts.map

package/dist/src/lib/Components/TabBar/TabBar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TabBar/TabBar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAiBvE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE9C,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KA2BlB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAmBrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAY1B,CAAC"}

package/dist/src/lib/Components/TabBar/TabBar.stories.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { BasketPutIn, HomeFill, Settings, Placeholder, Chart1, Bell, CoinPercent, Home, LifeRing, LifeRingFill, Cart, CreditCard, CreditCardFill, } from '../../Symbols';
+import { TabBar, TabBarItem } from './TabBar';
+const meta = {
+    title: 'Navigation/TabBar',
+    component: TabBar,
+    subcomponents: {
+        TabBarItem,
+    },
+    parameters: {
+        layout: 'centered',
+        backgrounds: { default: 'light' },
+    },
+    argTypes: {
+        active: {
+            control: 'text',
+            description: 'The currently active tab value',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        onTabPress: {
+            action: 'tab pressed',
+            description: 'Callback function when a tab is pressed',
+            table: {
+                type: { summary: '(active: string) => void' },
+            },
+        },
+        children: {
+            control: false,
+            description: 'TabBarItem children',
+            table: {
+                type: { summary: 'TabBarChildren' },
+            },
+        },
+    },
+};
+export default meta;
+export const Base = {
+    args: {},
+    render: () => {
+        const [active, setActive] = useState('home');
+        return (_jsxs(TabBar, { active: active, onTabPress: setActive, lx: { width: 's320' }, children: [_jsx(TabBarItem, { value: 'home', label: 'Home', icon: Home, activeIcon: HomeFill }), _jsx(TabBarItem, { value: 'pay', label: 'Pay', icon: CreditCard, activeIcon: CreditCardFill }), _jsx(TabBarItem, { value: 'help', label: 'Help', icon: LifeRing, activeIcon: LifeRingFill })] }));
+    },
+};
+export const Complex = {
+    args: {},
+    render: () => {
+        const [active, setActive] = useState('portfolio');
+        return (_jsxs(TabBar, { active: active, onTabPress: setActive, lx: { width: 's320' }, children: [_jsx(TabBarItem, { value: 'market', label: 'Market', icon: Chart1 }), _jsx(TabBarItem, { value: 'portfolio', label: 'Portfolio', icon: CoinPercent, activeIcon: CoinPercent }), _jsx(TabBarItem, { value: 'shop', label: 'Shop', icon: BasketPutIn }), _jsx(TabBarItem, { value: 'notifications', label: 'Alerts', icon: Bell }), _jsx(TabBarItem, { value: 'settings', label: 'Settings', icon: Settings })] }));
+    },
+};
+export const MissingLabel = {
+    args: {},
+    render: () => {
+        const [active, setActive] = useState('tab1');
+        return (_jsxs(TabBar, { active: active, onTabPress: setActive, lx: { width: 's320' }, children: [_jsx(TabBarItem, { value: 'tab1' }), _jsx(TabBarItem, { value: 'tab2', label: 'Tab', icon: Placeholder }), _jsx(TabBarItem, { value: 'tab3', icon: Cart })] }));
+    },
+};

package/dist/src/lib/Components/TabBar/TabBarContext.d.ts

@@ -0,0 +1,11 @@
+export type TabBarContextValue = {
+    active?: string;
+    onTabPress: (value: string) => void;
+};
+declare const TabBarContextProvider: import("react").FC<{
+    children: import("react").ReactNode;
+    value: TabBarContextValue;
+}>;
+export declare const useTabBarContext: () => TabBarContextValue;
+export { TabBarContextProvider };
+//# sourceMappingURL=TabBarContext.d.ts.map

package/dist/src/lib/Components/TabBar/TabBarContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBarContext.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TabBar/TabBarContext.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF,QAAA,MAAO,qBAAqB;;;EACqB,CAAC;AAElD,eAAO,MAAM,gBAAgB,0BAIzB,CAAC;AAEL,OAAO,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/src/lib/Components/TabBar/TabBarContext.js

@@ -0,0 +1,7 @@
+import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
+const [TabBarContextProvider, _useTabBarSafeContext] = createSafeContext('TabBar');
+export const useTabBarContext = () => _useTabBarSafeContext({
+    consumerName: 'TabBarItem',
+    contextRequired: true,
+});
+export { TabBarContextProvider };

package/dist/src/lib/Components/TabBar/index.d.ts

@@ -0,0 +1,3 @@
+export { TabBar, TabBarItem } from './TabBar';
+export type { TabBarProps, TabBarItemProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/lib/Components/TabBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TabBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC9C,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC"}

package/dist/src/lib/Components/TabBar/index.js

@@ -0,0 +1 @@
+export { TabBar, TabBarItem } from './TabBar';

package/dist/src/lib/Components/TabBar/types.d.ts

@@ -0,0 +1,43 @@
+import { ComponentType, ReactNode } from 'react';
+import { IconSize } from '../Icon';
+import { BoxProps } from '../Utility';
+type IconComponent = ComponentType<{
+    size?: IconSize;
+    className?: string;
+}>;
+export type TabBarItemProps = {
+    /**
+     * The unique identifier for the tab item.
+     */
+    value: string;
+    /**
+     * The display label for the tab item.
+     * If not provided, the icon will be centered.
+     */
+    label?: string;
+    /**
+     * The icon component to display when the tab is inactive.
+     */
+    icon?: IconComponent;
+    /**
+     * The icon component to display when the tab is active.
+     * If not provided, the inactive icon will be used.
+     */
+    activeIcon?: IconComponent;
+};
+export type TabBarProps = {
+    /**
+     * The value of the currently active tab.
+     */
+    active: string;
+    /**
+     * The callback function called when a tab is pressed.
+     */
+    onTabPress: (active: string) => void;
+    /**
+     * The tab items to display.
+     */
+    children: ReactNode;
+} & Omit<BoxProps, 'children'>;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/src/lib/Components/TabBar/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TabBar/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,KAAK,aAAa,GAAG,aAAa,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC"}

package/dist/src/lib/Components/TabBar/types.js

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

package/dist/src/lib/Components/index.d.ts

@@ -16,6 +16,7 @@ export * from './Select';
 export * from './Spot';
 export * from './Subheader';
 export * from './Switch';
+export * from './TabBar';
 export * from './Tag';
 export * from './Utility';
 export * from './TextInput';

package/dist/src/lib/Components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC"}

package/dist/src/lib/Components/index.js

@@ -16,6 +16,7 @@ export * from './Select';
 export * from './Spot';
 export * from './Subheader';
 export * from './Switch';
+export * from './TabBar';
 export * from './Tag';
 export * from './Utility';
 export * from './TextInput';