@utilitywarehouse/hearth-react-native 0.25.0 → 0.27.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.25.0 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.27.0 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.25.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.27.0 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint .
 
 
@@ -31,8 +31,8 @@
   78:8  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
 
 /home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.tsx
-   75:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-  291:5  warning  React Hook useCallback has a missing dependency: 'footer'. Either include it or remove the dependency array                                                                                                                                   react-hooks/exhaustive-deps
+   86:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+  313:5  warning  React Hook useCallback has a missing dependency: 'footer'. Either include it or remove the dependency array                                                                                                                                   react-hooks/exhaustive-deps
 
 /home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.web.tsx
   66:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
@@ -58,15 +58,15 @@
 
 ✖ 25 problems (0 errors, 25 warnings)
 
-Rule                                      | Time (ms) | Relative
-:-----------------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars         |  1535.077 |    58.6%
-react-hooks/exhaustive-deps               |   186.011 |     7.1%
-no-global-assign                          |    92.645 |     3.5%
-react-hooks/rules-of-hooks                |    90.323 |     3.4%
-no-misleading-character-class             |    64.601 |     2.5%
-no-unexpected-multiline                   |    47.391 |     1.8%
-@typescript-eslint/ban-ts-comment         |    39.233 |     1.5%
-@typescript-eslint/triple-slash-reference |    36.020 |     1.4%
-no-useless-escape                         |    31.051 |     1.2%
-@typescript-eslint/no-unused-expressions  |    28.768 |     1.1%
+Rule                              | Time (ms) | Relative
+:---------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars |  1531.354 |    62.0%
+react-hooks/exhaustive-deps       |   115.862 |     4.7%
+no-global-assign                  |    82.745 |     3.3%
+react-hooks/rules-of-hooks        |    81.422 |     3.3%
+@typescript-eslint/ban-ts-comment |    54.976 |     2.2%
+no-misleading-character-class     |    43.812 |     1.8%
+no-unexpected-multiline           |    39.804 |     1.6%
+no-fallthrough                    |    33.437 |     1.4%
+no-regex-spaces                   |    28.539 |     1.2%
+no-shadow-restricted-names        |    25.451 |     1.0%

package/CHANGELOG.md

@@ -1,5 +1,76 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.27.0
+
+### Minor Changes
+
+- [#987](https://github.com/utilitywarehouse/hearth/pull/987) [`eb962d2`](https://github.com/utilitywarehouse/hearth/commit/eb962d2f33b63fa3aeda0b291fd41ace90d04c41) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `SegmentedControl` and `SegmentedControlOption` components.
+
+  This introduces a new segmented control component for switching between a small set of related options.
+  The component includes controlled and uncontrolled usage, size variants (`sm`, `md`), animated selected indicator movement, and improved accessibility semantics for screen readers.
+
+  **Components affected**:
+  - `SegmentedControl`
+  - `SegmentedControlOption`
+
+  **Developer changes**:
+
+  Import and compose the new components as follows:
+
+  ```tsx
+  import { SegmentedControl, SegmentedControlOption } from '@utilitywarehouse/hearth-react-native';
+
+  <SegmentedControl defaultValue="day" size="sm">
+    <SegmentedControlOption value="day">Day</SegmentedControlOption>
+    <SegmentedControlOption value="week">Week</SegmentedControlOption>
+    <SegmentedControlOption value="month">Month</SegmentedControlOption>
+  </SegmentedControl>;
+  ```
+
+### Patch Changes
+
+- [#989](https://github.com/utilitywarehouse/hearth/pull/989) [`c97122e`](https://github.com/utilitywarehouse/hearth/commit/c97122eb429ec4adef656fb245a9256a5619df61) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Ensure horizontal `Banner` fills available width when `onPress` is not provided.
+
+  Fixed a layout issue where a horizontal `Banner` without `onPress` could fail to stretch correctly within its parent container.
+
+  **Components affected**:
+  - `Banner`
+
+  **Developer changes**:
+
+  No changes required.
+
+## 0.26.0
+
+### Minor Changes
+
+- [#981](https://github.com/utilitywarehouse/hearth/pull/981) [`df56387`](https://github.com/utilitywarehouse/hearth/commit/df563872e6bf040d419f6c7fce2343ebe560edb9) Thanks [@declanelcocks](https://github.com/declanelcocks)! - 🌟 [ENHANCEMENT]: Improve `Modal` behaviour when used inside a React Navigation modal (`inNavModal`).
+
+  The following improvements have been made to the `Modal` component when used in a navigation context with `inNavModal={true}`:
+  - **`scrollable` prop**: Content is now rendered inside a `ScrollView` by default. Set `scrollable={false}` to opt out, for example when you need to centre content or use a custom layout.
+  - **`stickyFooter` support**: The `stickyFooter` prop now works correctly in `inNavModal` mode.
+  - **Auto full-screen detection**: When the modal fills the entire screen (e.g. with `presentation: 'fullScreenModal'`), the `fullscreen` style is applied automatically. The `fullscreen` prop is no longer available when `inNavModal` is `true`.
+
+  **Components affected**:
+  - `Modal`
+
+  **Developer changes**:
+
+  No changes are required for existing usage. If you were passing `fullscreen` alongside `inNavModal={true}`, remove the `fullscreen` prop — full-screen styling is now detected automatically:
+
+  ```diff
+  - <Modal inNavModal fullscreen>
+  + <Modal inNavModal>
+  ```
+
+  To disable the default `ScrollView` wrapping in `inNavModal` mode:
+
+  ```tsx
+  <Modal inNavModal scrollable={false}>
+    {/* custom layout */}
+  </Modal>
+  ```
+
 ## 0.25.0
 
 ### Minor Changes

package/build/components/Banner/Banner.js

@@ -11,7 +11,7 @@ import { UnstyledIconButton } from '../UnstyledIconButton';
 import BannerContext from './Banner.context';
 const Banner = ({ icon, iconContainerVariant = 'subtle', iconContainerSize = 'md', iconContainerColor = 'pig', illustration, image, heading, description, direction = 'horizontal', link, button, onPress, onClose, variant = 'subtle', style, ...props }) => {
     const hasIllustration = Boolean(illustration);
-    styles.useVariants({ direction, hasIllustration });
+    styles.useVariants({ direction, hasIllustration, isPressable: Boolean(onPress) });
     const context = useMemo(() => ({
         direction,
     }), [direction]);
@@ -66,6 +66,10 @@ const styles = StyleSheet.create(theme => ({
                 true: {},
                 false: {},
             },
+            isPressable: {
+                true: {},
+                false: {},
+            },
         },
         compoundVariants: [
             {
@@ -82,6 +86,13 @@ const styles = StyleSheet.create(theme => ({
                     alignItems: 'center',
                 },
             },
+            {
+                direction: 'horizontal',
+                isPressable: false,
+                styles: {
+                    flex: 1,
+                },
+            },
         ],
     },
     media: {

package/build/components/Modal/Modal.d.ts

@@ -3,5 +3,5 @@ import ModalProps from './Modal.props';
 type Modal<T = any> = BottomSheetModalMethods<T> & {
     triggerCloseAnimation?: () => void;
 };
-declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, fullscreen, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal, stickyFooter, background, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, fullscreen, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal, stickyFooter, background, scrollable, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;

package/build/components/Modal/Modal.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { BottomSheetFooter, } from '@gorhom/bottom-sheet';
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { useCallback, useEffect, useImperativeHandle, useRef } from 'react';
-import { AccessibilityInfo, Platform, ScrollView, View, findNodeHandle } from 'react-native';
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, Dimensions, Platform, ScrollView, View, findNodeHandle } from 'react-native';
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withTiming, } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
@@ -13,7 +13,7 @@ import { Button } from '../Button';
 import { Heading } from '../Heading';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
-const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', fullscreen = false, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal = false, stickyFooter = true, background = 'default', ...props }) => {
+const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', fullscreen = false, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal = false, stickyFooter = true, background = 'default', scrollable = true, ...props }) => {
     const bottomSheetModalRef = useRef(null);
     const viewRef = useRef(null);
     const scrollViewRef = useRef(null);
@@ -21,6 +21,13 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
     const backgroundOpacity = useSharedValue(0);
     const pretendContentTranslateY = useSharedValue(20);
     const isBrandBackground = background === 'brand';
+    const [inNavModalHeight, setInNavModalHeight] = useState();
+    const isNavModalFullScreen = useMemo(() => {
+        if (!inNavModalHeight || !inNavModal)
+            return false;
+        const screenHeight = Dimensions.get('window').height;
+        return inNavModalHeight >= screenHeight;
+    }, [inNavModalHeight, inNavModal]);
     const triggerCloseAnimation = useCallback(() => {
         if (Platform.OS === 'android' && inNavModal) {
             pretendContentTranslateY.value = withTiming(20, {
@@ -107,9 +114,13 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         stickyFooter,
         showHandle: props.showHandle,
         background: isBrandBackground ? 'brand' : 'primary',
+        ...(inNavModal && {
+            fullscreen: isNavModalFullScreen,
+        }),
     });
     const footer = (_jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, inverted: isBrandBackground && inNavModal, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, inverted: isBrandBackground && inNavModal, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] }));
-    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg", color: isBrandBackground && inNavModal ? theme.color.icon.inverted : undefined }), _jsx(Heading, { size: "lg", textAlign: "center", inverted: isBrandBackground && inNavModal, children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, inverted: isBrandBackground && inNavModal, children: heading })) : null, description && !image ? (_jsx(BodyText, { accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: isBrandBackground && inNavModal, ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] })] })) : null, inNavModal ? _jsx(ScrollView, { style: { flex: 1 }, children: children }) : children, (!stickyFooter || inNavModal) && !noButtons ? footer : null] })) }));
+    const InNavModalContainer = scrollable ? ScrollView : View;
+    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg", color: isBrandBackground && inNavModal ? theme.color.icon.inverted : undefined }), _jsx(Heading, { size: "lg", textAlign: "center", inverted: isBrandBackground && inNavModal, children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, inverted: isBrandBackground && inNavModal, children: heading })) : null, description && !image ? (_jsx(BodyText, { accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: isBrandBackground && inNavModal, ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] })] })) : null, inNavModal && (_jsxs(InNavModalContainer, { style: { flexGrow: stickyFooter ? 1 : 0 }, children: [children, !stickyFooter ? _jsx(View, { style: styles.inNavModalFooterContainer, children: footer }) : null] })), !inNavModal && children, ((!stickyFooter && !inNavModal) || (inNavModal && stickyFooter)) && !noButtons ? footer : null] })) }));
     const renderFooter = useCallback((props) => (_jsx(BottomSheetFooter, { ...props, children: _jsx(View, { style: styles.footerWrap, children: footer }) })), [
         onPressPrimaryButton,
         primaryButtonText,
@@ -118,7 +129,9 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         primaryButtonProps,
         secondaryButtonProps,
     ]);
-    return inNavModal ? (_jsxs(View, { style: {
+    return inNavModal ? (_jsxs(View, { onLayout: (e) => {
+            setInNavModalHeight(e.nativeEvent.layout.height);
+        }, style: {
             flex: 1,
             backgroundColor: theme.color.background[isBrandBackground ? 'brand' : 'primary'],
         }, children: [Platform.OS === 'android' ? (_jsx(Animated.View, { style: [styles.androidContainer, animatedBackgroundStyle], children: _jsx(Animated.View, { style: [styles.pretendContent, animatedPretendContentStyle] }) })) : null, _jsx(Animated.View, { style: [styles.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle], children: _jsx(View, { style: styles.inNavModalContent, children: content }) })] })) : (_jsxs(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image || fullscreen ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, style: styles.modal, footerComponent: stickyFooter && !noButtons ? renderFooter : undefined, ...props, onChange: handleChange, children: [loading ? _jsx(View, { style: styles.loadingTop }) : null, _jsx(BottomSheetScrollView, { contentContainerStyle: styles.scrollView, ref: scrollViewRef, children: content })] }));
@@ -227,8 +240,6 @@ const styles = StyleSheet.create((theme, rt) => ({
         borderTopLeftRadius: theme.components.modal.borderRadius,
         borderTopRightRadius: theme.components.modal.borderRadius,
         backgroundColor: theme.color.surface.neutral.strong,
-        gap: theme.components.modal.gap,
-        padding: theme.components.modal.padding,
         paddingBottom: theme.components.modal.padding + rt.insets.bottom,
         variants: {
             background: {
@@ -237,8 +248,20 @@ const styles = StyleSheet.create((theme, rt) => ({
                     backgroundColor: theme.color.background.brand,
                 },
             },
+            fullscreen: {
+                true: {
+                    padding: theme.components.modal.padding,
+                    paddingTop: rt.insets.top,
+                },
+                false: {
+                    padding: theme.components.modal.padding,
+                }
+            }
         },
     },
+    inNavModalFooterContainer: {
+        paddingTop: theme.components.modal.padding,
+    },
     androidContainer: {
         height: rt.insets.top + 18,
         paddingLeft: theme.components.modal.padding,

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

@@ -11,6 +11,7 @@ interface ModalPropsBase extends Omit<BottomSheetProps, 'children'> {
     loadingHeading?: string;
     description?: string;
     fullscreen?: boolean;
+    stickyFooter?: boolean;
     children?: ViewProps['children'];
     onPressPrimaryButton?: () => void;
     primaryButtonText?: string;
@@ -25,11 +26,12 @@ interface ModalPropsBase extends Omit<BottomSheetProps, 'children'> {
 }
 type ModalProps = (ModalPropsBase & {
     inNavModal?: false | undefined;
-    stickyFooter?: boolean;
+    scrollable?: never;
     background?: never;
 }) | (ModalPropsBase & {
     inNavModal: true;
-    stickyFooter?: never;
+    fullscreen?: never;
+    scrollable?: boolean;
     background?: 'default' | 'brand';
 });
 export default ModalProps;

package/build/components/PillGroup/Pill.js

@@ -35,7 +35,6 @@ const styles = StyleSheet.create(theme => ({
             _hover: {
                 backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
             },
-            // '_focus-visible': theme.helpers.focusVisible,
         },
         variants: {
             active: {

package/build/components/PillGroup/PillGroup.js

@@ -20,10 +20,13 @@ export const PillGroup = ({ children, value, multiple = false, wrap = true, onCh
             }
         },
     }), [normalizedValue, multiple, onChange]);
-    return (_jsx(PillGroupContext.Provider, { value: contextValue, children: wrap ? (_jsx(Box, { style: [styles.group, styles.wrap, style], ...props, children: children })) : (_jsx(ScrollView, { horizontal: true, contentContainerStyle: [styles.group, style], showsHorizontalScrollIndicator: false, ...props, children: children })) }));
+    return (_jsx(PillGroupContext.Provider, { value: contextValue, children: wrap ? (_jsx(Box, { style: [styles.group, styles.wrap, style], ...props, children: children })) : (_jsx(ScrollView, { horizontal: true, style: styles.scrollView, contentContainerStyle: [styles.group, style], showsHorizontalScrollIndicator: false, ...props, children: children })) }));
 };
 PillGroup.displayName = 'PillGroup';
 const styles = StyleSheet.create(theme => ({
+    scrollView: {
+        flexGrow: 0,
+    },
     group: {
         flexDirection: 'row',
         gap: theme.components.pill.group.gap,

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

@@ -0,0 +1,14 @@
+export type SegmentedControlContextValue = {
+    value?: string;
+    select: (value: string) => void;
+    disabled?: boolean;
+    size: 'sm' | 'md';
+    registerOptionLayout: (value: string, layout: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }) => void;
+};
+export declare const SegmentedControlContext: import("react").Context<SegmentedControlContextValue | null>;
+export declare const useSegmentedControlContext: () => SegmentedControlContextValue;

package/build/components/SegmentedControl/SegmentedControl.context.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export const SegmentedControlContext = createContext(null);
+export const useSegmentedControlContext = () => {
+    const context = useContext(SegmentedControlContext);
+    if (!context) {
+        throw new Error('SegmentedControlOption must be used within SegmentedControl');
+    }
+    return context;
+};

package/build/components/SegmentedControl/SegmentedControl.d.ts

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

package/build/components/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,196 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { View } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+import { useStyleProps } from '../../hooks';
+import { SegmentedControlContext } from './SegmentedControl.context';
+const Indicator = Animated.createAnimatedComponent(View);
+const GROUP_BORDER_WIDTH = 1;
+const SegmentedControl = ({ value: controlledValue, defaultValue, onValueChange, size = 'sm', disabled = false, children, style, ...props }) => {
+    const { computedStyles, remainingProps } = useStyleProps(props);
+    const isReducedMotion = useReducedMotion();
+    const indicatorPositionOffset = GROUP_BORDER_WIDTH;
+    const optionValues = useMemo(() => {
+        const values = [];
+        const walk = (node) => {
+            Children.forEach(node, child => {
+                if (!isValidElement(child))
+                    return;
+                const childType = child.type;
+                const childProps = child.props;
+                if (childType?.displayName === 'SegmentedControlOption' &&
+                    typeof childProps?.value === 'string') {
+                    values.push(childProps.value);
+                }
+                if (childProps?.children) {
+                    walk(childProps.children);
+                }
+            });
+        };
+        walk(children);
+        return values;
+    }, [children]);
+    const optionValuesKey = useMemo(() => optionValues.join('|'), [optionValues]);
+    const optionValuesRef = useRef(optionValues);
+    useEffect(() => {
+        optionValuesRef.current = optionValues;
+    }, [optionValues]);
+    const getInitialValue = () => {
+        if (controlledValue !== undefined)
+            return controlledValue;
+        if (defaultValue !== undefined)
+            return defaultValue;
+        return optionValues[0];
+    };
+    const [uncontrolledValue, setUncontrolledValue] = useState(getInitialValue);
+    useEffect(() => {
+        if (controlledValue !== undefined) {
+            setUncontrolledValue(controlledValue);
+        }
+    }, [controlledValue]);
+    useEffect(() => {
+        const currentOptionValues = optionValuesRef.current;
+        setUncontrolledValue(prev => {
+            if (!prev)
+                return currentOptionValues[0];
+            if (!currentOptionValues.includes(prev))
+                return currentOptionValues[0];
+            return prev;
+        });
+    }, [optionValuesKey]);
+    const currentValue = controlledValue !== undefined ? controlledValue : uncontrolledValue;
+    const indicatorX = useSharedValue(0);
+    const indicatorWidth = useSharedValue(0);
+    const indicatorY = useSharedValue(0);
+    const indicatorHeight = useSharedValue(0);
+    const [hasIndicator, setHasIndicator] = useState(false);
+    const layoutsRef = useRef(new Map());
+    const prevValueRef = useRef(undefined);
+    const initialisedRef = useRef(false);
+    const select = useCallback((nextValue) => {
+        if (disabled)
+            return;
+        if (controlledValue === undefined) {
+            setUncontrolledValue(nextValue);
+        }
+        onValueChange?.(nextValue);
+    }, [controlledValue, disabled, onValueChange]);
+    const registerOptionLayout = useCallback((value, layout) => {
+        layoutsRef.current.set(value, layout);
+        const activeValue = controlledValue !== undefined ? controlledValue : uncontrolledValue;
+        if (!activeValue || activeValue !== value)
+            return;
+        if (!initialisedRef.current) {
+            indicatorX.value = Math.max(0, layout.x - indicatorPositionOffset);
+            indicatorWidth.value = layout.width;
+            indicatorY.value = Math.max(0, layout.y - indicatorPositionOffset);
+            indicatorHeight.value = layout.height;
+            prevValueRef.current = activeValue;
+            initialisedRef.current = true;
+            setHasIndicator(true);
+            return;
+        }
+        if (prevValueRef.current === activeValue)
+            return;
+        const config = {
+            delay: 200,
+            duration: isReducedMotion ? 0 : 220,
+            easing: Easing.out(Easing.cubic),
+        };
+        indicatorX.value = withTiming(Math.max(0, layout.x - indicatorPositionOffset), config);
+        indicatorWidth.value = withTiming(layout.width, config);
+        indicatorY.value = withTiming(Math.max(0, layout.y - indicatorPositionOffset), config);
+        indicatorHeight.value = withTiming(layout.height, config);
+        prevValueRef.current = activeValue;
+    }, [
+        controlledValue,
+        indicatorHeight,
+        indicatorWidth,
+        indicatorX,
+        indicatorY,
+        indicatorPositionOffset,
+        isReducedMotion,
+        uncontrolledValue,
+    ]);
+    useEffect(() => {
+        if (!currentValue || !initialisedRef.current)
+            return;
+        if (prevValueRef.current === undefined || prevValueRef.current === currentValue)
+            return;
+        const layout = layoutsRef.current.get(currentValue);
+        if (!layout)
+            return;
+        const config = {
+            duration: isReducedMotion ? 0 : 220,
+            easing: Easing.out(Easing.cubic),
+        };
+        indicatorX.value = withTiming(Math.max(0, layout.x - indicatorPositionOffset), config);
+        indicatorWidth.value = withTiming(layout.width, config);
+        indicatorY.value = withTiming(Math.max(0, layout.y - indicatorPositionOffset), config);
+        indicatorHeight.value = withTiming(layout.height, config);
+        prevValueRef.current = currentValue;
+    }, [
+        currentValue,
+        indicatorHeight,
+        indicatorWidth,
+        indicatorX,
+        indicatorY,
+        indicatorPositionOffset,
+        isReducedMotion,
+        optionValuesKey,
+    ]);
+    const indicatorStyle = useAnimatedStyle(() => ({
+        transform: [{ translateX: indicatorX.value }, { translateY: indicatorY.value }],
+        width: indicatorWidth.value,
+        height: indicatorHeight.value,
+    }));
+    styles.useVariants({ disabled, size });
+    const contextValue = useMemo(() => ({
+        value: currentValue,
+        select,
+        disabled,
+        size,
+        registerOptionLayout,
+    }), [currentValue, select, disabled, size, registerOptionLayout]);
+    return (_jsx(SegmentedControlContext.Provider, { value: contextValue, children: _jsxs(View, { accessibilityRole: "radiogroup", accessibilityState: { disabled }, style: [styles.container, computedStyles, style], ...remainingProps, children: [hasIndicator ? (_jsx(Indicator, { pointerEvents: "none", style: [styles.indicator, indicatorStyle] })) : null, children] }) }));
+};
+SegmentedControl.displayName = 'SegmentedControl';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignSelf: 'flex-start',
+        gap: theme.components.segmentedControl.group.gap,
+        height: theme.components.segmentedControl.group.height,
+        borderRadius: theme.components.segmentedControl.group.borderRadius,
+        borderWidth: theme.components.segmentedControl.group.borderWidth,
+        backgroundColor: theme.color.surface.neutral.subtle,
+        borderColor: theme.color.border.strong,
+        variants: {
+            size: {
+                sm: {
+                    height: 32,
+                    padding: 2,
+                },
+                md: {
+                    height: theme.components.segmentedControl.group.height,
+                    padding: 2,
+                },
+            },
+            disabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+        },
+    },
+    indicator: {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        borderRadius: theme.components.segmentedControl.borderRadius,
+        backgroundColor: theme.color.interactive.brand.surface.strong.default,
+    },
+}));
+export default SegmentedControl;

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

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+import type { FlexLayoutProps } from '../../types';
+export interface SegmentedControlProps extends ViewProps, FlexLayoutProps {
+    /** Controlled selected option value. */
+    value?: string;
+    /** Initial selected option value for uncontrolled mode. */
+    defaultValue?: string;
+    /** Called when selected option changes. */
+    onValueChange?: (value: string) => void;
+    /** Size variant. */
+    size?: 'sm' | 'md';
+    /** Disables all options in the control. */
+    disabled?: boolean;
+    /** SegmentedControlOption children. */
+    children: ReactNode;
+}
+export default SegmentedControlProps;

package/build/components/SegmentedControl/SegmentedControl.props.js

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

package/build/components/SegmentedControl/SegmentedControlOption.d.ts

@@ -0,0 +1,18 @@
+import type SegmentedControlOptionProps from './SegmentedControlOption.props';
+declare const SegmentedControlOption: import("react").ForwardRefExoticComponent<SegmentedControlOptionProps & {
+    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 SegmentedControlOption;