@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

package/build/components/SectionHeader/SectionHeaderHelperText.d.ts

@@ -0,0 +1,6 @@
+import TextProps from '../BodyText/BodyText.props';
+declare const SectionHeaderHelperText: {
+    ({ children, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default SectionHeaderHelperText;

package/build/components/{List/ListHeading/ListHeadingHelperText.js → SectionHeader/SectionHeaderHelperText.js}

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../../BodyText';
-const ListHeadingHelperText = ({ children, ...props }) => {
+import { BodyText } from '../BodyText';
+const SectionHeaderHelperText = ({ children, ...props }) => {
     return (_jsx(BodyText, { size: "md", ...props, style: [styles.helperText, props.style], children: children }));
 };
-ListHeadingHelperText.displayName = 'ListHeadingHelperText';
+SectionHeaderHelperText.displayName = 'SectionHeaderHelperText';
 const styles = StyleSheet.create(theme => ({
     helperText: {
-        color: theme.components.text.colorSecondary,
+        color: theme.color.text.secondary,
     },
 }));
-export default ListHeadingHelperText;
+export default SectionHeaderHelperText;

package/build/components/{List/ListHeading/ListHeadingTextContent.d.ts → SectionHeader/SectionHeaderTextContent.d.ts}

@@ -1,6 +1,6 @@
 import { type ViewProps } from 'react-native';
-declare const ListHeadingTextContent: {
+declare const SectionHeaderTextContent: {
     ({ children, ...props }: ViewProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export default ListHeadingTextContent;
+export default SectionHeaderTextContent;

package/build/components/{List/ListHeading/ListHeadingTextContent.js → SectionHeader/SectionHeaderTextContent.js}

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-const ListHeadingTextContent = ({ children, ...props }) => {
+const SectionHeaderTextContent = ({ children, ...props }) => {
     return (_jsx(View, { ...props, style: [styles.container, props.style], children: children }));
 };
-ListHeadingTextContent.displayName = 'ListHeadingTextContent';
+SectionHeaderTextContent.displayName = 'SectionHeaderTextContent';
 const styles = StyleSheet.create(theme => ({
     container: {
-        gap: theme.components.list.heading.textContentGap,
+        gap: theme.components.sectionHeader.textContent.gap,
         flex: 1,
     },
 }));
-export default ListHeadingTextContent;
+export default SectionHeaderTextContent;

package/build/components/SectionHeader/index.d.ts

@@ -0,0 +1,4 @@
+export { default as SectionHeader } from './SectionHeader';
+export { default as SectionHeaderHeading } from './SectionHeaderHeading';
+export { default as SectionHeaderHelperText } from './SectionHeaderHelperText';
+export { default as SectionHeaderTextContent } from './SectionHeaderTextContent';

package/build/components/SectionHeader/index.js

@@ -0,0 +1,4 @@
+export { default as SectionHeader } from './SectionHeader';
+export { default as SectionHeaderHeading } from './SectionHeaderHeading';
+export { default as SectionHeaderHelperText } from './SectionHeaderHelperText';
+export { default as SectionHeaderTextContent } from './SectionHeaderTextContent';

package/build/components/Select/Select.js

@@ -86,9 +86,9 @@ const styles = StyleSheet.create(theme => ({
     selectContainer: {
         flexDirection: 'row',
         alignItems: 'center',
-        backgroundColor: theme.components.select.backgroundColor,
+        backgroundColor: theme.color.surface.neutral.strong,
         borderWidth: theme.components.select.borderWidth,
-        borderColor: theme.components.select.borderColor,
+        borderColor: theme.color.border.strong,
         borderRadius: theme.components.select.borderRadius,
         paddingHorizontal: theme.components.select.paddingHorizontal,
         paddingVertical: theme.components.select.paddingVertical,
@@ -101,16 +101,16 @@ const styles = StyleSheet.create(theme => ({
             },
             readonly: {
                 true: {
-                    borderColor: theme.components.select.borderColorReadOnly,
+                    borderColor: theme.color.border.subtle,
                 },
             },
             validationStatus: {
                 initial: {},
                 valid: {
-                    borderColor: theme.components.select.borderColorValid,
+                    borderColor: theme.color.feedback.positive.border,
                 },
                 invalid: {
-                    borderColor: theme.components.select.borderColorInvalid,
+                    borderColor: theme.color.feedback.danger.border,
                 },
             },
         },
@@ -133,27 +133,27 @@ const styles = StyleSheet.create(theme => ({
     pressedContainer: pressed => ({
         outlineWidth: pressed ? theme.components.select.borderWidth : 0,
         outlineStyle: 'solid',
-        outlineColor: pressed ? theme.components.select.borderColor : 'transparent',
+        outlineColor: pressed ? theme.color.border.strong : 'transparent',
         variants: {
             validationStatus: {
                 initial: {},
                 valid: {
-                    outlineColor: theme.components.select.borderColorValid,
+                    outlineColor: theme.color.feedback.positive.border,
                 },
                 invalid: {
-                    outlineColor: theme.components.select.borderColorInvalid,
+                    outlineColor: theme.color.feedback.danger.border,
                 },
             },
         },
     }),
     icon: {
-        color: theme.components.icon.color,
+        color: theme.color.icon.primary,
     },
     placeholderText: {
         variants: {
             hasValue: {
                 false: {
-                    color: theme.components.text.colorSecondary,
+                    color: theme.color.text.secondary,
                 },
             },
         },

package/build/components/Select/SelectOption.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { Pressable, View } from 'react-native';
-import { useSelectContext } from './Select.context';
-import { BodyText } from '../BodyText';
 import { StyleSheet } from 'react-native-unistyles';
-import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { BodyText } from '../BodyText';
 import { Icon } from '../Icon';
+import { useSelectContext } from './Select.context';
 const SelectOption = ({ label, value, leadingIcon: LeftIcon, trailingIcon: RightIcon, selected, disabled, onPress, }) => {
     const { selectedValue, onValueChange, close } = useSelectContext();
     const isSelected = selected !== undefined ? selected : selectedValue === value;
@@ -47,15 +47,15 @@ const styles = StyleSheet.create(theme => ({
         },
         _web: {
             _hover: {
-                backgroundColor: theme.components.select.dropdown.item.backgroundColorHover,
+                backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
             },
         },
     },
     icon: {
-        color: theme.components.select.dropdown.item.foregroundColor,
+        color: theme.color.interactive.functional.foreground.subtle,
     },
     pressed: {
-        backgroundColor: theme.components.select.dropdown.item.backgroundColorActive,
+        backgroundColor: theme.color.interactive.functional.surface.subtle.active,
     },
     labelContainer: {
         flex: 1,

package/build/components/Spinner/Spinner.web.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable react-hooks/exhaustive-deps */
+import { createSpinner } from '@gluestack-ui/spinner';
 import { useCallback, useEffect, useMemo } from 'react';
-import Animated, { useSharedValue, withTiming, useAnimatedProps, Easing, withSequence, withRepeat, useReducedMotion, } from 'react-native-reanimated';
+import { View } from 'react-native';
+import Animated, { Easing, useAnimatedProps, useReducedMotion, useSharedValue, withRepeat, withSequence, withTiming, } from 'react-native-reanimated';
 import { Circle, G, Svg } from 'react-native-svg';
-import { createSpinner } from '@gluestack-ui/spinner';
 import { StyleSheet } from 'react-native-unistyles';
-import { View } from 'react-native';
 import { useTheme } from '../../hooks';
 import { getFlattenedColorValue } from '../../utils';
 const AnimatedSvg = Animated.createAnimatedComponent(Svg);

package/build/components/Switch/Switch.js

@@ -7,7 +7,7 @@ import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { Icon } from '../Icon';
 const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = 'medium', ...accessibilityProps }) => {
-    const { components } = useTheme();
+    const { components, color } = useTheme();
     const SWITCH_WIDTH = size === 'medium' ? components.switch.md.width : components.switch.sm.width;
     const THUMB_SIZE = size === 'medium' ? components.switch.md.circle.size : components.switch.sm.circle.size;
     const PADDING = components.switch.padding;
@@ -19,7 +19,10 @@ const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = '
         transform: [{ translateX: offset.value }],
     }));
     const animatedSwitchBackgroundStyle = useAnimatedStyle(() => {
-        const backgroundColor = interpolateColor(progress.value, [0, 1], [components.switch.unchecked.backgroundColor, components.switch.checked.backgroundColor]);
+        const backgroundColor = interpolateColor(progress.value, [0, 1], [
+            color.interactive.functional.surface.strong.default,
+            color.interactive.brand.surface.strong.default,
+        ]);
         return { backgroundColor };
     });
     // Icon animations
@@ -89,10 +92,10 @@ const styles = StyleSheet.create(theme => ({
             },
             value: {
                 true: {
-                    backgroundColor: theme.components.switch.checked.backgroundColor,
+                    backgroundColor: theme.color.interactive.brand.surface.strong.default,
                 },
                 false: {
-                    backgroundColor: theme.components.switch.unchecked.backgroundColor,
+                    backgroundColor: theme.color.interactive.functional.surface.strong.default,
                 },
             },
             disabled: {
@@ -103,7 +106,7 @@ const styles = StyleSheet.create(theme => ({
         },
     },
     thumb: {
-        backgroundColor: theme.components.switch.circle.backgroundColor,
+        backgroundColor: theme.color.surface.neutral.strong,
         alignItems: 'center',
         justifyContent: 'center',
         variants: {
@@ -128,10 +131,10 @@ const styles = StyleSheet.create(theme => ({
         variants: {
             value: {
                 true: {
-                    color: theme.components.switch.checked.iconColor,
+                    color: theme.color.icon.primary,
                 },
                 false: {
-                    color: theme.components.switch.unchecked.iconColor,
+                    color: theme.color.icon.primary,
                 },
             },
         },

package/build/components/Switch/Switch.web.js

@@ -6,10 +6,9 @@ import Animated, { Easing, interpolateColor, useAnimatedStyle, useReducedMotion,
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { Icon } from '../Icon';
-// @ts-expect-error - Animated.createAnimatedComponent is not typed correctly in the library
 const AnimatedView = Animated.createAnimatedComponent(View);
 const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = 'medium', ...accessibilityProps }) => {
-    const { components } = useTheme();
+    const { components, color } = useTheme();
     const SWITCH_WIDTH = size === 'medium' ? components.switch.md.width : components.switch.sm.width;
     const THUMB_SIZE = size === 'medium' ? components.switch.md.circle.size : components.switch.sm.circle.size;
     const PADDING = components.switch.padding;
@@ -21,7 +20,10 @@ const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = '
         transform: [{ translateX: offset.value }],
     }));
     const animatedSwitchBackgroundStyle = useAnimatedStyle(() => {
-        const backgroundColor = interpolateColor(progress.value, [0, 1], [components.switch.unchecked.backgroundColor, components.switch.checked.backgroundColor]);
+        const backgroundColor = interpolateColor(progress.value, [0, 1], [
+            color.interactive.functional.surface.strong.default,
+            color.interactive.brand.surface.strong.default,
+        ]);
         return { backgroundColor };
     });
     // Icon animations
@@ -91,10 +93,10 @@ const styles = StyleSheet.create(theme => ({
             },
             value: {
                 true: {
-                    backgroundColor: theme.components.switch.checked.backgroundColor,
+                    backgroundColor: theme.color.interactive.brand.surface.strong.default,
                 },
                 false: {
-                    backgroundColor: theme.components.switch.unchecked.backgroundColor,
+                    backgroundColor: theme.color.interactive.functional.surface.strong.default,
                 },
             },
             disabled: {
@@ -105,7 +107,7 @@ const styles = StyleSheet.create(theme => ({
         },
     },
     thumb: {
-        backgroundColor: theme.components.switch.circle.backgroundColor,
+        backgroundColor: theme.color.surface.neutral.strong,
         alignItems: 'center',
         justifyContent: 'center',
         variants: {
@@ -130,10 +132,10 @@ const styles = StyleSheet.create(theme => ({
         variants: {
             value: {
                 true: {
-                    color: theme.components.switch.checked.iconColor,
+                    color: theme.color.icon.primary,
                 },
                 false: {
-                    color: theme.components.switch.unchecked.iconColor,
+                    color: theme.color.icon.primary,
                 },
             },
         },

package/build/components/Tabs/Tab.d.ts

@@ -0,0 +1,18 @@
+import type TabProps from './Tab.props';
+declare const PressableTab: import("react").ForwardRefExoticComponent<TabProps & {
+    states?: {
+        active?: boolean;
+        disabled?: boolean;
+    };
+} & Omit<import("react-native").PressableProps, "children"> & {
+    tabIndex?: 0 | -1 | undefined;
+} & {
+    children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {
+        hovered?: boolean | undefined;
+        pressed?: boolean | undefined;
+        focused?: boolean | undefined;
+        focusVisible?: boolean | undefined;
+        disabled?: boolean | undefined;
+    }) => import("react").ReactNode);
+} & import("react").RefAttributes<unknown>>;
+export default PressableTab;

package/build/components/Tabs/Tab.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef } from 'react';
+import { Platform, Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { DetailText } from '../DetailText';
+import { Icon } from '../Icon';
+import { useTabsContext } from './Tabs.context';
+import { createPressable } from '@gluestack-ui/pressable';
+const Tab = ({ value, children, icon, disabled, style, states, ...props }) => {
+    const { value: active, select, size, disabled: allDisabled, registerTabLayout, } = useTabsContext();
+    const { active: pressed } = states || { active: false };
+    const isActive = active === value;
+    styles.useVariants({ size, pressed });
+    const ref = useRef(null);
+    const handlePress = () => {
+        if (disabled || allDisabled)
+            return;
+        select(value);
+    };
+    const handleLayout = useCallback((e) => {
+        const { x, y, width, height } = e.nativeEvent.layout;
+        registerTabLayout(value, { x, y, width, height });
+    }, [value, registerTabLayout]);
+    return (_jsx(Pressable, { ref: ref, accessibilityRole: "tab", accessibilityState: { selected: isActive, disabled: !!(disabled || allDisabled) }, onPress: handlePress, onLayout: handleLayout, style: [styles.tab, style], ...(Platform.OS === 'web'
+            ? { id: `tab-${value}`, 'aria-controls': `tabpanel-${value}` }
+            : null), ...props, children: _jsxs(View, { style: styles.content, children: [icon ? _jsx(Icon, { as: icon }) : null, _jsx(DetailText, { size: size, children: children })] }) }));
+};
+Tab.displayName = 'Tab';
+const styles = StyleSheet.create(theme => ({
+    tab: {
+        position: 'relative',
+        backgroundColor: 'transparent',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: theme.components.tabs.item.paddingHorizontal,
+        paddingVertical: theme.components.tabs.item.paddingVertical,
+        _web: {
+            _hover: {
+                backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
+            },
+            '_focus-visible': {
+                ...theme.helpers.focusVisible,
+                outlineOffset: -2,
+                borderRadius: theme.borderRadius.sm,
+            },
+            _active: {
+                backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+            },
+        },
+        variants: {
+            size: {
+                md: { height: theme.components.tabs.md.height },
+                lg: { height: theme.components.tabs.lg.height },
+            },
+            pressed: {
+                true: {
+                    backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+                },
+                false: {},
+            },
+        },
+    },
+    content: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: theme.components.tabs.item.gap,
+    },
+    badge: {
+        marginLeft: theme.space[25],
+    },
+}));
+const PressableTab = createPressable({ Root: Tab });
+PressableTab.displayName = 'Tab';
+export default PressableTab;

package/build/components/Tabs/Tab.props.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+export interface TabProps extends PressableProps {
+    /** Unique value for the tab */
+    value: string;
+    /** Tab label */
+    children: ReactNode;
+    /** Optional leading icon */
+    icon?: ComponentType<any>;
+    /** Whether the tab is disabled */
+    disabled?: boolean;
+    style?: ViewProps['style'];
+}
+export default TabProps;

package/build/components/Tabs/Tab.props.js

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

package/build/components/Tabs/TabPanel.d.ts

@@ -0,0 +1,3 @@
+import type TabPanelProps from './TabPanel.props';
+declare const _default: import("react").MemoExoticComponent<({ value, children, keepMounted, style, ...rest }: TabPanelProps) => import("react/jsx-runtime").JSX.Element | null>;
+export default _default;

package/build/components/Tabs/TabPanel.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Platform, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTabsContext } from './Tabs.context';
+const TabPanel = ({ value, children, keepMounted, style, ...rest }) => {
+    const { value: active } = useTabsContext();
+    const isActive = active === value;
+    if (!isActive && !keepMounted)
+        return null;
+    styles.useVariants({ active: isActive });
+    return (_jsx(View, { ...(Platform.OS === 'web'
+            ? {
+                id: `tabpanel-${value}`,
+                role: 'tabpanel',
+                'aria-labelledby': `tab-${value}`,
+                hidden: !isActive || undefined,
+            }
+            : { accessibilityRole: 'summary' }), importantForAccessibility: isActive ? undefined : 'no-hide-descendants', accessibilityElementsHidden: isActive ? undefined : true, style: [styles.panel, style], ...rest, children: children }));
+};
+const styles = StyleSheet.create(theme => ({
+    panel: {
+        flex: 1,
+        width: '100%',
+        paddingTop: theme.space[100],
+        variants: {
+            active: {
+                true: { display: 'flex' },
+                false: { display: 'none' },
+            },
+        },
+    },
+}));
+export default memo(TabPanel);

package/build/components/Tabs/TabPanel.props.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+export interface TabPanelProps extends ViewProps {
+    value: string;
+    children: ReactNode;
+    keepMounted?: boolean;
+}
+export default TabPanelProps;

package/build/components/Tabs/TabPanel.props.js

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

package/build/components/Tabs/Tabs.context.d.ts

@@ -0,0 +1,23 @@
+import { SharedValue } from 'react-native-reanimated';
+export interface TabsContextValue {
+    value: string | undefined;
+    size: 'md' | 'lg';
+    disabled?: boolean;
+    select: (value: string) => void;
+    registerTabLayout: (value: string, layout: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }) => void;
+    getTabLayout: (value: string) => {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | undefined;
+    indicatorXSV: SharedValue<number>;
+    indicatorSizeSV: SharedValue<number>;
+}
+export declare const TabsContext: import("react").Context<TabsContextValue | undefined>;
+export declare const useTabsContext: () => TabsContextValue;

package/build/components/Tabs/Tabs.context.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+export const TabsContext = createContext(undefined);
+export const useTabsContext = () => {
+    const ctx = useContext(TabsContext);
+    if (!ctx)
+        throw new Error('Tab / TabPanel must be used within Tabs');
+    return ctx;
+};

package/build/components/Tabs/Tabs.d.ts

@@ -0,0 +1,6 @@
+import type TabsProps from './Tabs.props';
+declare const Tabs: {
+    ({ value: controlledValue, defaultValue, onValueChange, size, disabled, children, withPanels, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Tabs;

package/build/components/Tabs/Tabs.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { View } from 'react-native';
+import { Easing, useSharedValue, withTiming } from 'react-native-reanimated';
+import { TabsContext } from './Tabs.context';
+const Tabs = ({ value: controlledValue, defaultValue, onValueChange, size = 'md', disabled, children, withPanels, ...props }) => {
+    // Collect child tab values
+    const tabValues = useMemo(() => {
+        const vals = [];
+        const walk = (node) => {
+            Children.forEach(node, child => {
+                if (!isValidElement(child))
+                    return;
+                const props = child.props;
+                const type = child.type;
+                if (type?.displayName === 'Tab' && typeof props?.value === 'string') {
+                    vals.push(props.value);
+                }
+                if (props?.children)
+                    walk(props.children);
+            });
+        };
+        walk(children);
+        return vals;
+    }, [children]);
+    const getInitial = () => {
+        if (controlledValue !== undefined)
+            return controlledValue;
+        if (defaultValue)
+            return defaultValue;
+        return tabValues[0];
+    };
+    const [uncontrolled, setUncontrolled] = useState(getInitial);
+    useEffect(() => {
+        if (controlledValue !== undefined)
+            setUncontrolled(controlledValue);
+    }, [controlledValue]);
+    // Ensure value remains valid if tabs change
+    useEffect(() => {
+        setUncontrolled(prev => {
+            if (!prev)
+                return tabValues[0];
+            if (!tabValues.includes(prev))
+                return tabValues[0];
+            return prev;
+        });
+    }, [tabValues.join('|')]);
+    const currentValue = controlledValue !== undefined ? controlledValue : uncontrolled;
+    const select = useCallback((val) => {
+        if (disabled)
+            return;
+        if (controlledValue === undefined)
+            setUncontrolled(val);
+        onValueChange?.(val);
+    }, [controlledValue, disabled, onValueChange]);
+    // Indicator shared values (declared early so registerTabLayout can reference)
+    const indicatorX = useSharedValue(0);
+    const indicatorSize = useSharedValue(0);
+    // Layout registry for animated indicator
+    const layoutsRef = useRef(new Map());
+    const prevValueRef = useRef(undefined);
+    const initialisedRef = useRef(false);
+    const registerTabLayout = useCallback((value, layout) => {
+        layoutsRef.current.set(value, layout);
+        const active = controlledValue !== undefined ? controlledValue : uncontrolled;
+        if (!active)
+            return;
+        // Initial active tab: seed indicator & prevValue so first change animates
+        if (!initialisedRef.current && value === active) {
+            indicatorX.value = layout.x;
+            indicatorSize.value = layout.width;
+            prevValueRef.current = active;
+            initialisedRef.current = true;
+        }
+    }, [controlledValue, uncontrolled, indicatorX, indicatorSize]);
+    const getTabLayout = useCallback((v) => layoutsRef.current.get(v), []);
+    const contextValue = useMemo(() => ({
+        value: currentValue,
+        size,
+        select,
+        disabled,
+        registerTabLayout,
+        getTabLayout,
+        indicatorXSV: indicatorX,
+        indicatorSizeSV: indicatorSize,
+    }), [
+        currentValue,
+        size,
+        select,
+        disabled,
+        registerTabLayout,
+        getTabLayout,
+        tabValues,
+        indicatorX,
+        indicatorSize,
+    ]);
+    // Animate indicator only on value changes after initialisation
+    useEffect(() => {
+        if (!currentValue || !initialisedRef.current)
+            return;
+        if (prevValueRef.current === undefined || prevValueRef.current === currentValue)
+            return;
+        const layout = getTabLayout(currentValue);
+        if (!layout)
+            return;
+        const cfg = { duration: 250, easing: Easing.out(Easing.ease) };
+        indicatorX.value = withTiming(layout.x, cfg);
+        indicatorSize.value = withTiming(layout.width, cfg);
+        prevValueRef.current = currentValue;
+    }, [currentValue, getTabLayout, indicatorX, indicatorSize, tabValues.join('|')]);
+    return (_jsx(TabsContext.Provider, { value: contextValue, children: _jsx(View, { ...props, children: children }) }));
+};
+Tabs.displayName = 'Tabs';
+export default Tabs;

package/build/components/Tabs/Tabs.props.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+export interface TabsProps extends ViewProps {
+    /** Controlled active tab value */
+    value?: string;
+    /** Uncontrolled initial value */
+    defaultValue?: string;
+    /** Callback when active tab changes */
+    onValueChange?: (value: string) => void;
+    /** Size variant */
+    size?: 'md' | 'lg';
+    /** Tabs (Tab components) */
+    children: ReactNode;
+    /** Disable all tabs */
+    disabled?: boolean;
+    /** If true, expect sibling TabPanel components and manage their rendering/ARIA linkage */
+    withPanels?: boolean;
+}
+export default TabsProps;

package/build/components/Tabs/Tabs.props.js

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

package/build/components/Tabs/TabsList.d.ts

@@ -0,0 +1,6 @@
+import type TabsListProps from './TabsList.props';
+declare const TabsList: {
+    ({ children, style, ...rest }: TabsListProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TabsList;