@utilitywarehouse/hearth-react-native 0.25.0 → 0.27.0

package/build/components/SegmentedControl/SegmentedControlOption.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPressable } from '@gluestack-ui/pressable';
+import { useEffect } from 'react';
+import { Platform, Pressable, View } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { useSegmentedControlContext } from './SegmentedControl.context';
+const AnimatedView = Animated.createAnimatedComponent(View);
+const SegmentedControlOptionRoot = ({ value, children, accessibilityLabel, disabled = false, style, states = {}, ...props }) => {
+    const { value: selectedValue, select, disabled: allDisabled, size, registerOptionLayout, } = useSegmentedControlContext();
+    const { active = false } = states;
+    const reducedMotion = useReducedMotion();
+    const selected = selectedValue === value;
+    const isDisabled = disabled || !!allDisabled;
+    const selectedProgress = useSharedValue(selected ? 1 : 0);
+    useEffect(() => {
+        selectedProgress.value = withTiming(selected ? 1 : 0, {
+            duration: reducedMotion ? 0 : 220,
+            easing: Easing.out(Easing.cubic),
+        });
+    }, [reducedMotion, selected, selectedProgress]);
+    const regularLabelStyle = useAnimatedStyle(() => ({
+        opacity: 1 - selectedProgress.value,
+    }));
+    const selectedLabelStyle = useAnimatedStyle(() => ({
+        opacity: selectedProgress.value,
+    }));
+    styles.useVariants({ selected, disabled: isDisabled, size, active });
+    const onPress = () => {
+        if (isDisabled)
+            return;
+        select(value);
+    };
+    const accessibleLabel = typeof children === 'string' || typeof children === 'number' ? String(children) : value;
+    return (_jsx(Pressable, { ...props, accessibilityRole: "radio", accessibilityState: { checked: selected, disabled: isDisabled }, accessibilityLabel: accessibilityLabel ?? accessibleLabel, onPress: onPress, onLayout: e => registerOptionLayout(value, e.nativeEvent.layout), disabled: isDisabled, style: [styles.option, style], ...(Platform.OS === 'web'
+            ? { 'aria-label': accessibilityLabel ?? accessibleLabel }
+            : null), children: _jsxs(View, { style: styles.labelWrap, accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: [_jsx(BodyText, { size: "md", weight: "semibold", style: styles.labelSizer, accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: children }), _jsx(AnimatedView, { pointerEvents: "none", style: [styles.textLayer, regularLabelStyle], accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: _jsx(BodyText, { size: "md", weight: "regular", style: styles.textRegular, children: children }) }), _jsx(AnimatedView, { pointerEvents: "none", style: [styles.textLayer, selectedLabelStyle], accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: _jsx(BodyText, { size: "md", weight: "semibold", style: styles.textSelected, children: children }) })] }) }));
+};
+const SegmentedControlOption = createPressable({ Root: SegmentedControlOptionRoot });
+SegmentedControlOption.displayName = 'SegmentedControlOption';
+const styles = StyleSheet.create(theme => ({
+    option: {
+        minWidth: theme.components.segmentedControl.minWidth,
+        height: theme.components.segmentedControl.height,
+        borderRadius: theme.components.segmentedControl.borderRadius,
+        paddingHorizontal: theme.components.segmentedControl.paddingHorizontal,
+        paddingVertical: theme.components.segmentedControl.paddingVertical,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'transparent',
+        zIndex: 1,
+        variants: {
+            size: {
+                sm: {
+                    height: 28,
+                    paddingHorizontal: theme.space[150],
+                    paddingVertical: 0,
+                },
+                md: {
+                    height: 44,
+                    paddingHorizontal: theme.components.segmentedControl.paddingHorizontal,
+                    paddingVertical: theme.components.segmentedControl.paddingVertical,
+                },
+            },
+            selected: {
+                true: {
+                    backgroundColor: 'transparent',
+                    _web: {
+                        _active: {
+                            backgroundColor: theme.color.interactive.brand.surface.strong.active,
+                        },
+                    },
+                },
+                false: {
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
+                        },
+                        _active: {
+                            backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+                        },
+                    },
+                },
+            },
+            active: {
+                true: {
+                    backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+                },
+            },
+        },
+    },
+    labelWrap: {
+        position: 'relative',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    labelSizer: {
+        opacity: 0,
+    },
+    textLayer: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    textRegular: {
+        color: theme.color.text.primary,
+    },
+    textSelected: {
+        color: theme.color.text.inverted,
+        variants: {
+            disabled: {
+                true: {
+                    opacity: 1,
+                },
+            },
+        },
+    },
+}));
+export default SegmentedControlOption;

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

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+export interface SegmentedControlOptionProps extends Omit<PressableProps, 'children'> {
+    /** Unique option value. */
+    value: string;
+    /** Option label/content. */
+    children: ReactNode;
+    /** Disables only this option. */
+    disabled?: boolean;
+    style?: ViewProps['style'];
+}
+export default SegmentedControlOptionProps;

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

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

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

@@ -0,0 +1,4 @@
+export { default as SegmentedControl } from './SegmentedControl';
+export type { SegmentedControlProps } from './SegmentedControl.props';
+export { default as SegmentedControlOption } from './SegmentedControlOption';
+export type { SegmentedControlOptionProps } from './SegmentedControlOption.props';

package/build/components/SegmentedControl/index.js

@@ -0,0 +1,2 @@
+export { default as SegmentedControl } from './SegmentedControl';
+export { default as SegmentedControlOption } from './SegmentedControlOption';

package/build/components/index.d.ts

@@ -45,6 +45,7 @@ export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
 export * from './SectionHeader';
+export * from './SegmentedControl';
 export * from './Select';
 export * from './Skeleton';
 export * from './Spinner';

package/build/components/index.js

@@ -46,6 +46,7 @@ export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
 export * from './SectionHeader';
+export * from './SegmentedControl';
 export * from './Select';
 export * from './Skeleton';
 export * from './Spinner';

package/docs/changelog.mdx

@@ -9,6 +9,142 @@ import { BackToTopButton } from './components';
 The changelog for the Hearth React Native library. Here you can find all the changes, improvements, and bug fixes for each version.
 
 
+## 0.25.0
+
+### Minor Changes
+
+- [#982](https://github.com/utilitywarehouse/hearth/pull/982) [`506b388`](https://github.com/utilitywarehouse/hearth/commit/506b388ae1ef1065f013024a14bd9e2599a6442d) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `TimePicker` and `TimePickerInput` components with 12/24-hour support and minute intervals.
+
+  Includes a shared time picker view, updated wheel behavior for native platforms, and polished visuals like gradient fades.
+
+  **Components affected**:
+  - `TimePicker`
+  - `TimePickerInput`
+
+  ```tsx
+  import { TimePicker, TimePickerInput } from '@utilitywarehouse/hearth-react-native';
+  import { useRef, useState } from 'react';
+  import type { DateType } from '@utilitywarehouse/hearth-react-native';
+
+  const Example = () => {
+    const [value, setValue] = useState<DateType>();
+    const pickerRef = useRef(null);
+
+    return (
+      <>
+        <TimePickerInput
+          value={value}
+          onChange={({ date }) => setValue(date ?? undefined)}
+          onClear={() => setValue(undefined)}
+          timePickerProps={{ use12Hours: true, minuteInterval: 5 }}
+        />
+        <TimePicker
+          ref={pickerRef}
+          date={value}
+          onChange={({ date }) => setValue(date)}
+          use12Hours
+          minuteInterval={5}
+        />
+      </>
+    );
+  };
+  ```
+
+## 0.24.0
+
+### Minor Changes
+
+- [#977](https://github.com/utilitywarehouse/hearth/pull/977) [`9d2b534`](https://github.com/utilitywarehouse/hearth/commit/9d2b5348a5748cb613f537808069de2e86bd21d7) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `ProgressBar` component with linear and circular variants.
+
+  **Developer changes**:
+
+  Use `ProgressBar` with a default percentage label, or override the label to show a custom value:
+
+  ```tsx
+  import { ProgressBar } from '@utilitywarehouse/hearth-react-native';
+
+  <ProgressBar value={42} label="Uploading documents" />
+
+  <ProgressBar
+      value={68}
+      max={100}
+      label="Data allowance"
+      variant="circular"
+      formatValueText={(value, { max }) => `${max - value}GB remaining`}
+  />
+  ```
+
+### Patch Changes
+
+- [#978](https://github.com/utilitywarehouse/hearth/pull/978) [`26a1173`](https://github.com/utilitywarehouse/hearth/commit/26a11731a493a8b92ac2a3a183516376ab54663b) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Tighten `Modal` prop types and fix brand background text styling
+
+  Improves TypeScript safety so `stickyFooter` is not allowed when `inNavModal` is true, and `background` can only be set when `inNavModal` is true. Also ensures headings, body text, and button content are correctly inverted when using the brand background.
+
+  **Components affected**:
+  - `Modal`
+
+  **Developer changes**:
+  No changes required unless you were relying on invalid prop combinations.
+
+## 0.23.0
+
+### Minor Changes
+
+- [#975](https://github.com/utilitywarehouse/hearth/pull/975) [`102f04e`](https://github.com/utilitywarehouse/hearth/commit/102f04e0d560cf0faa21da5020c230e88e857251) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add a `background` option for Modal when used inside navigation modals
+
+  Modal now supports a `background` prop with `default` and `brand` values. When `background="brand"` is used in a navigation modal, the buttons and close icon invert for contrast, and the content area is scrollable.
+
+  **Components affected**:
+  - `Modal`
+
+  **Developer changes**:
+
+  No changes required. To opt in to the brand background:
+
+  ```tsx
+  <Modal background="brand" inNavModal>
+    ...
+  </Modal>
+  ```
+
+## 0.22.1
+
+### Patch Changes
+
+- [#971](https://github.com/utilitywarehouse/hearth/pull/971) [`be1dfeb`](https://github.com/utilitywarehouse/hearth/commit/be1dfebd4b43f2df8ef6c5eaa42a88364e796479) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Improve VerificationInput OTP handling and accessibility
+
+  VerificationInput now uses a single hidden input to manage focus, selection, and paste behaviour across platforms, improving caret handling and bulk entry. Accessibility labels and hints are now derived from the form field to provide clearer screen reader output.
+
+  **Components affected**:
+  - `VerificationInput`
+
+  **Developer changes**:
+
+  No changes required.
+
+## 0.22.0
+
+### Minor Changes
+
+- [#968](https://github.com/utilitywarehouse/hearth/pull/968) [`cee5811`](https://github.com/utilitywarehouse/hearth/commit/cee5811020af02fe754d8311ec8313c1793f108a) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `badge` support to Radio and Checkbox (including tiles).
+
+  **Components affected**:
+  - `Radio`
+  - `RadioTile`
+  - `Checkbox`
+  - `CheckboxTile`
+
+  **Developer changes**:
+  You can now pass a `badge` React node to render beneath helper text. No changes required unless you want to use the new prop.
+
+### Patch Changes
+
+- [#966](https://github.com/utilitywarehouse/hearth/pull/966) [`4e9f3f0`](https://github.com/utilitywarehouse/hearth/commit/4e9f3f0284e50da5ba4e49e132dac745a1a8a68d) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Allow Card layout props and remove forced alignment
+
+  Card now accepts flex layout and display props, and it no longer forces `alignItems: flex-start` on the root, so custom alignment works as expected.
+
+- [#969](https://github.com/utilitywarehouse/hearth/pull/969) [`c5c988b`](https://github.com/utilitywarehouse/hearth/commit/c5c988b65f1133b85b822037b086a524bc1255e3) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Render the Modal footer in navigation modals
+
 ## 0.21.0
 
 ### Minor Changes

package/docs/components/AllComponents.web.tsx

@@ -82,6 +82,8 @@ import {
   RadioCardGroup,
   RadioGroup,
   SectionHeader,
+  SegmentedControl,
+  SegmentedControlOption,
   Select,
   Skeleton,
   Spinner,
@@ -743,6 +745,18 @@ const AllComponents: React.FC = () => {
               />
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper
+            name="Segmented Control"
+            link="/?path=/docs/components-segmented-control--docs"
+          >
+            <Center flex={1}>
+              <SegmentedControl defaultValue="day" alignSelf="center">
+                <SegmentedControlOption value="day">Day</SegmentedControlOption>
+                <SegmentedControlOption value="week">Week</SegmentedControlOption>
+                <SegmentedControlOption value="month">Month</SegmentedControlOption>
+              </SegmentedControl>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Select" link="/?path=/docs/forms-select--docs">
             <Center flex={1}>
               <BottomSheetModalProvider>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.25.0",
+  "version": "0.27.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -57,10 +57,10 @@
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-icons": "^0.8.0",
     "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
     "@utilitywarehouse/hearth-svg-assets": "^0.5.0",
-    "@utilitywarehouse/hearth-tokens": "^0.2.3"
+    "@utilitywarehouse/hearth-tokens": "^0.2.3",
+    "@utilitywarehouse/hearth-react-icons": "^0.8.0"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",

package/src/components/Banner/Banner.tsx

@@ -29,7 +29,7 @@ const Banner = ({
   ...props
 }: BannerProps) => {
   const hasIllustration = Boolean(illustration);
-  styles.useVariants({ direction, hasIllustration });
+  styles.useVariants({ direction, hasIllustration, isPressable: Boolean(onPress) });
 
   const context = useMemo(
     () => ({
@@ -174,6 +174,10 @@ const styles = StyleSheet.create(theme => ({
         true: {},
         false: {},
       },
+      isPressable: {
+        true: {},
+        false: {},
+      },
     },
     compoundVariants: [
       {
@@ -190,6 +194,13 @@ const styles = StyleSheet.create(theme => ({
           alignItems: 'center',
         },
       },
+      {
+        direction: 'horizontal',
+        isPressable: false,
+        styles: {
+          flex: 1,
+        },
+      },
     ],
   },
   media: {

package/src/components/Modal/Modal.docs.mdx

@@ -107,9 +107,10 @@ The Modal component extends the `BottomSheetModal` component and accepts all of
 | `primaryButtonProps`          | `Omit<ButtonWithoutChildrenProps, 'children'>`                     | Additional props to pass to the primary button (colorScheme defaults to 'highlight', variant to 'solid')      | -              |
 | `secondaryButtonProps`        | `Omit<ButtonWithoutChildrenProps, 'children'>`                     | Additional props to pass to the secondary button (colorScheme defaults to 'functional', variant to 'outline') | -              |
 | `closeButtonProps`            | `Omit<UnstyledIconButtonProps, 'children'>`                        | Additional props to pass to the close button                                                                  | -              |
-| `fullscreen`                  | `boolean`                                                          | Whether the modal should take up the full screen height                                                       | `false`        |
+| `fullscreen`                  | `boolean`                                                          | Whether the modal should take up the full screen height. Only applies when `inNavModal` is `false`            | `false`        |
 | `inNavModal`                  | `boolean`                                                          | Renders the modal correctly when used inside a navigation modal                                               | `false`        |
 | `background`                  | `'default' \| 'brand'`                                             | Sets the modal background. Only applies when `inNavModal` is `true`                                           | `'default'`    |
+| `scrollable`                  | `boolean`                                                          | Whether the modal's content should be placed in a `ScrollView`. Only applies when `inNavModal` is `true`      | `true`         |
 
 \* use this to detect if the modal has been opened or closed, index 0 indicates open state and -1 indicates closed state
 
@@ -462,11 +463,16 @@ const AlertModal = () => {
 
 ### Modal In Navigation Modal
 
-When using the Modal component in a navigation context, you can set it to `inNavModal` mode, this will make it behave like a standard modal screen.
+When wanting to use the Modal component in a navigation context using [React Navigation](https://reactnavigation.org/docs/modal), you can set `inNavModal` to `true` to make it behave like a standard modal screen.
+
+Within React Navigation, you can set `presentation: 'modal'` in the screen's settings to have the Modal look and behave like a standard modal/bottom sheet, or you can set `presentation: 'fullScreenModal'` to have the Modal fill the entire screen.
+
+When using `inNavModal`, by default the content will be rendered inside a `ScrollView` to ensure it is scrollable, especially on smaller devices or smaller modals. You can disable this by setting `scrollable={false}` if, for example, you need to center your content or add some custom content.
+
 Here's an example of how to implement this with custom close animations for Android:
 
 ```tsx
-import { useNavigation } from 'react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
 import { useCallback, useEffect, useRef } from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 

package/src/components/Modal/Modal.props.ts

@@ -12,6 +12,7 @@ interface ModalPropsBase extends Omit<BottomSheetProps, 'children'> {
   loadingHeading?: string;
   description?: string;
   fullscreen?: boolean;
+  stickyFooter?: boolean;
   children?: ViewProps['children'];
   onPressPrimaryButton?: () => void;
   primaryButtonText?: string;
@@ -28,12 +29,13 @@ 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';
     });
 

package/src/components/Modal/Modal.tsx

@@ -6,8 +6,8 @@ import {
 } from '@gorhom/bottom-sheet';
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 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,
@@ -51,6 +51,7 @@ const Modal = ({
   inNavModal = false,
   stickyFooter = true,
   background = 'default',
+  scrollable = true,
   ...props
 }: ModalProps) => {
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
@@ -61,6 +62,16 @@ const Modal = ({
   const pretendContentTranslateY = useSharedValue(20);
   const isBrandBackground = background === 'brand';
 
+  const [inNavModalHeight, setInNavModalHeight] = useState<number>();
+
+  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, {
@@ -173,6 +184,9 @@ const Modal = ({
     stickyFooter,
     showHandle: props.showHandle,
     background: isBrandBackground ? 'brand' : 'primary',
+    ...(inNavModal && {
+      fullscreen: isNavModalFullScreen,
+    }),
   });
 
   const footer = (
@@ -200,6 +214,8 @@ const Modal = ({
     </View>
   );
 
+  const InNavModalContainer = scrollable ? ScrollView : View;
+
   const content = (
     <>
       {loading ? (
@@ -275,8 +291,14 @@ const Modal = ({
               </View>
             </View>
           ) : null}
-          {inNavModal ? <ScrollView style={{ flex: 1 }}>{children}</ScrollView> : children}
-          {(!stickyFooter || inNavModal) && !noButtons ? footer : null}
+          {inNavModal && (
+            <InNavModalContainer style={{ flexGrow: stickyFooter ? 1 : 0 }}>
+              {children}
+              {!stickyFooter ? <View style={styles.inNavModalFooterContainer}>{footer}</View> : null}
+            </InNavModalContainer>
+          )}
+          {!inNavModal && children}
+          {((!stickyFooter && !inNavModal) || (inNavModal && stickyFooter)) && !noButtons ? footer : null}
         </View>
       )}
     </>
@@ -300,6 +322,9 @@ const Modal = ({
 
   return inNavModal ? (
     <View
+      onLayout={(e) => {
+        setInNavModalHeight(e.nativeEvent.layout.height);
+      }}
       style={{
         flex: 1,
         backgroundColor: theme.color.background[isBrandBackground ? 'brand' : 'primary'],
@@ -313,7 +338,9 @@ const Modal = ({
       <Animated.View
         style={[styles.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle]}
       >
-        <View style={styles.inNavModalContent}>{content}</View>
+        <View style={styles.inNavModalContent}>
+          {content}
+        </View>
       </Animated.View>
     </View>
   ) : (
@@ -444,8 +471,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: {
@@ -454,8 +479,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/src/components/PillGroup/Pill.tsx

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

package/src/components/PillGroup/PillGroup.tsx

@@ -42,6 +42,7 @@ export const PillGroup = ({
       ) : (
         <ScrollView
           horizontal
+          style={styles.scrollView}
           contentContainerStyle={[styles.group, style]}
           showsHorizontalScrollIndicator={false}
           {...props}
@@ -56,6 +57,9 @@ export const PillGroup = ({
 PillGroup.displayName = 'PillGroup';
 
 const styles = StyleSheet.create(theme => ({
+  scrollView: {
+    flexGrow: 0,
+  },
   group: {
     flexDirection: 'row',
     gap: theme.components.pill.group.gap,

package/src/components/SegmentedControl/SegmentedControl.context.ts

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