@utilitywarehouse/hearth-react-native 0.22.0 → 0.23.0-test-list

package/.turbo/turbo-build.log

@@ -1,4 +1,5 @@
-
-> @utilitywarehouse/hearth-react-native@0.22.0 build /home/runner/work/hearth/hearth/packages/react-native
-> tsc
-
+
+
+> @utilitywarehouse/hearth-react-native@0.23.0-test-list build /Users/filmondaniels/Projects/Work/hearth/packages/react-native
+> tsc
+

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @utilitywarehouse/hearth-react-native
 
+## 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

package/build/components/List/List.js

@@ -6,7 +6,7 @@ import { Card } from '../Card';
 import { SectionHeader } from '../SectionHeader';
 import { ListContext } from './List.context';
 const List = ({ children, heading, helperText, headerTrailingContent, invalidText, ...props }) => {
-    const { loading, disabled, container = 'none' } = props;
+    const { loading, disabled, container = 'none', testID, style, ...rest } = props;
     const orderRef = useRef([]);
     const [firstItemId, setFirstItemId] = useState(undefined);
     const containerToCard = {
@@ -35,7 +35,7 @@ const List = ({ children, heading, helperText, headerTrailingContent, invalidTex
         registerItem,
     };
     styles.useVariants({ disabled });
-    return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...props, style: [styles.container, props.style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, trailingContent: headerTrailingContent, invalidText: invalidText })) : null, container === 'none' ? (_jsx(View, { children: children })) : (React.Children.count(children) > 0 && (_jsx(Card, { ...containerToCard, noPadding: true, style: styles.card, children: _jsx(_Fragment, { children: children }) })))] }) }));
+    return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...rest, style: [styles.container, style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, trailingContent: headerTrailingContent, invalidText: invalidText })) : null, container === 'none' ? (_jsx(View, { testID: testID, children: children })) : (React.Children.count(children) > 0 && (_jsx(Card, { ...containerToCard, noPadding: true, style: styles.card, testID: testID, children: _jsx(_Fragment, { children: children }) })))] }) }));
 };
 List.displayName = 'List';
 const styles = StyleSheet.create(theme => ({

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, ...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, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;

package/build/components/Modal/Modal.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { BottomSheetFooter, } from '@gorhom/bottom-sheet';
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { useCallback, useEffect, useImperativeHandle, useRef } from 'react';
-import { AccessibilityInfo, Platform, View, findNodeHandle } from 'react-native';
+import { AccessibilityInfo, 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, ...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', ...props }) => {
     const bottomSheetModalRef = useRef(null);
     const viewRef = useRef(null);
     const scrollViewRef = useRef(null);
@@ -105,9 +105,10 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         noButtons,
         stickyFooter,
         showHandle: props.showHandle,
+        background: background === 'brand' ? 'brand' : 'primary',
     });
-    const footer = (_jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, ...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" }), _jsx(Heading, { size: "lg", textAlign: "center", 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, children: heading })) : null, description && !image ? _jsx(BodyText, { accessible: true, children: description }) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...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, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : null] })] })) : null, children, (!stickyFooter || inNavModal) && !noButtons ? footer : null] })) }));
+    const footer = (_jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, inverted: background === 'brand' && inNavModal, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, inverted: background === 'brand' && 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" }), _jsx(Heading, { size: "lg", textAlign: "center", 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, children: heading })) : null, description && !image ? _jsx(BodyText, { accessible: true, children: description }) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: background === 'brand' && 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, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : null] })] })) : null, inNavModal ? _jsx(ScrollView, { style: { flex: 1 }, children: children }) : children, (!stickyFooter || inNavModal) && !noButtons ? footer : null] })) }));
     const renderFooter = useCallback((props) => (_jsx(BottomSheetFooter, { ...props, children: _jsx(View, { style: styles.footerWrap, children: footer }) })), [
         onPressPrimaryButton,
         primaryButtonText,
@@ -116,7 +117,10 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         primaryButtonProps,
         secondaryButtonProps,
     ]);
-    return inNavModal ? (_jsxs(View, { style: { flex: 1, backgroundColor: theme.color.background.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 })] }));
+    return inNavModal ? (_jsxs(View, { style: {
+            flex: 1,
+            backgroundColor: theme.color.background[background === 'brand' ? '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 })] }));
 };
 const styles = StyleSheet.create((theme, rt) => ({
     modal: {
@@ -225,6 +229,14 @@ const styles = StyleSheet.create((theme, rt) => ({
         gap: theme.components.modal.gap,
         padding: theme.components.modal.padding,
         paddingBottom: theme.components.modal.padding + rt.insets.bottom,
+        variants: {
+            background: {
+                primary: {},
+                brand: {
+                    backgroundColor: theme.color.background.brand,
+                },
+            },
+        },
     },
     androidContainer: {
         height: rt.insets.top + 18,

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

@@ -24,5 +24,6 @@ interface ModalProps extends Omit<BottomSheetProps, 'children'> {
     primaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
     secondaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
     closeButtonProps?: Omit<UnstyledIconButtonProps, 'children'>;
+    background?: 'default' | 'brand';
 }
 export default ModalProps;

package/build/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,6 @@
+import type ProgressBarProps from './ProgressBar.props';
+declare const ProgressBar: {
+    ({ variant, colorScheme, size, value, min, max, label, hideLabel, formatValueText, "aria-valuetext": ariaValueText, accessibilityLabel, ...rest }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ProgressBar;

package/build/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import ProgressBarCircular from './ProgressBarCircular';
+import ProgressBarLinear from './ProgressBarLinear';
+const clampValue = (value, min, max) => {
+    if (max <= min)
+        return min;
+    return Math.min(Math.max(value, min), max);
+};
+const valueToPercent = (value, min, max) => {
+    const range = max - min;
+    if (range <= 0)
+        return 0;
+    return ((value - min) / range) * 100;
+};
+const ProgressBar = ({ variant = 'linear', colorScheme = 'default', size = 'md', value, min = 0, max = 100, label, hideLabel, formatValueText, 'aria-valuetext': ariaValueText, accessibilityLabel, ...rest }) => {
+    const effectiveValue = colorScheme === 'success' && !formatValueText ? max : clampValue(value, min, max);
+    const percentValue = valueToPercent(effectiveValue, min, max);
+    const clampedPercent = Math.max(0, Math.min(100, percentValue));
+    const valueText = formatValueText
+        ? formatValueText(effectiveValue, { min, max, percent: clampedPercent })
+        : `${Math.round(clampedPercent)}%`;
+    const valueTextForAria = ariaValueText ?? valueText;
+    const internalProps = {
+        percent: clampedPercent,
+        label,
+        valueText,
+        hideLabel,
+        colorScheme,
+        size,
+    };
+    return (_jsx(View, { ...rest, accessible: true, role: "progressbar", accessibilityRole: "progressbar", accessibilityLabel: accessibilityLabel ?? label, accessibilityValue: { min, max, now: effectiveValue, text: valueTextForAria }, "aria-valuenow": effectiveValue, "aria-valuemin": min, "aria-valuemax": max, "aria-valuetext": valueTextForAria, "data-colorscheme": colorScheme, children: variant === 'circular' ? (_jsx(ProgressBarCircular, { ...internalProps })) : (_jsx(ProgressBarLinear, { ...internalProps })) }));
+};
+ProgressBar.displayName = 'ProgressBar';
+export default ProgressBar;

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

@@ -0,0 +1,60 @@
+import { ViewProps } from 'react-native';
+export type ProgressBarVariant = 'linear' | 'circular';
+export type ProgressBarColorScheme = 'default' | 'success' | 'danger';
+export type ProgressBarSize = 'sm' | 'md';
+export interface ProgressBarProps extends ViewProps {
+    variant?: ProgressBarVariant;
+    /**
+     * Set the visual appearance.
+     * @default 'default'
+     */
+    colorScheme?: ProgressBarColorScheme;
+    /**
+     * Sets the circular variant size. Does not affect the appearance of the linear variant.
+     * @default 'md'
+     */
+    size?: ProgressBarSize;
+    /**
+     * The current progress value.
+     */
+    value: number;
+    /**
+     * The minimum value.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The maximum value.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Required text label for the progress bar.
+     */
+    label: string;
+    /**
+     * Visually hide the label and value text.
+     */
+    hideLabel?: boolean;
+    /**
+     * Override the default percentage value label formatting.
+     */
+    formatValueText?: (value: number, meta: {
+        min: number;
+        max: number;
+        percent: number;
+    }) => string;
+    /**
+     * A human-readable text alternative for the current value.
+     */
+    'aria-valuetext'?: string;
+}
+export interface ProgressBarInternalProps {
+    percent: number;
+    label: string;
+    valueText: string;
+    hideLabel?: boolean;
+    colorScheme: ProgressBarColorScheme;
+    size: ProgressBarSize;
+}
+export default ProgressBarProps;

package/build/components/ProgressBar/ProgressBar.props.js

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

package/build/components/ProgressBar/ProgressBarCircular.d.ts

@@ -0,0 +1,6 @@
+import type { ProgressBarInternalProps } from './ProgressBar.props';
+declare const ProgressBarCircular: {
+    ({ percent, label, valueText, hideLabel, colorScheme, size, }: ProgressBarInternalProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ProgressBarCircular;

package/build/components/ProgressBar/ProgressBarCircular.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Text, View } from 'react-native';
+import Animated, { Easing, useAnimatedProps, useReducedMotion, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { Circle, G, Svg } from 'react-native-svg';
+import { StyleSheet } from 'react-native-unistyles';
+import useTheme from '../../hooks/useTheme';
+import { BodyText } from '../BodyText';
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const ProgressBarCircular = ({ percent, label, valueText, hideLabel, colorScheme, size, }) => {
+    const { components } = useTheme();
+    const isReducedMotion = useReducedMotion();
+    const progress = useSharedValue(0);
+    const hasMountedRef = useRef(false);
+    useEffect(() => {
+        const target = Math.max(0, Math.min(100, percent)) / 100;
+        if (isReducedMotion) {
+            progress.value = target;
+            hasMountedRef.current = true;
+            return;
+        }
+        if (!hasMountedRef.current) {
+            progress.value = target;
+            hasMountedRef.current = true;
+            return;
+        }
+        progress.value = withTiming(target, { duration: 300, easing: Easing.out(Easing.ease) });
+    }, [percent, isReducedMotion, progress]);
+    const circularTokens = components.progressBar.circular[size];
+    const barWidth = 'bar' in circularTokens ? circularTokens.bar.width : circularTokens.barWidth;
+    const diameter = circularTokens.height;
+    const radius = (diameter - barWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const animatedCircleProps = useAnimatedProps(() => ({
+        strokeDashoffset: circumference * (1 - progress.value),
+    }));
+    const indicatorColor = colorScheme === 'success'
+        ? components.progressBar.progress.successColor
+        : colorScheme === 'danger'
+            ? components.progressBar.progress.dangerColor
+            : components.progressBar.progress.defaultColor;
+    styles.useVariants({ size });
+    return (_jsxs(View, { style: styles.container, children: [_jsx(Svg, { width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}`, style: styles.svg, children: _jsxs(G, { origin: `${diameter / 2}, ${diameter / 2}`, rotation: -90, children: [_jsx(Circle, { cx: "50%", cy: "50%", r: radius, stroke: components.progressBar.barColor, strokeWidth: barWidth, fill: "transparent" }), _jsx(AnimatedCircle, { cx: "50%", cy: "50%", r: radius, stroke: indicatorColor, strokeWidth: barWidth, fill: "transparent", strokeLinecap: "round", strokeDasharray: circumference, animatedProps: animatedCircleProps })] }) }), _jsxs(View, { style: styles.content, children: [_jsx(Text, { style: styles.valueText, children: valueText }), !hideLabel && size === 'md' ? (_jsx(BodyText, { style: styles.label, size: "md", weight: "semibold", children: label })) : null] })] }));
+};
+ProgressBarCircular.displayName = 'ProgressBarCircular';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'relative',
+        variants: {
+            size: {
+                md: {
+                    width: theme.components.progressBar.circular.md.height,
+                    height: theme.components.progressBar.circular.md.height,
+                },
+                sm: {
+                    width: theme.components.progressBar.circular.sm.height,
+                    height: theme.components.progressBar.circular.sm.height,
+                },
+            },
+        },
+    },
+    svg: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+    },
+    content: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        _web: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+        },
+        variants: {
+            size: {
+                md: {
+                    gap: theme.components.progressBar.circular.md.gap,
+                },
+                sm: {
+                    gap: 0,
+                },
+            },
+        },
+    },
+    valueText: {
+        color: theme.color.text.primary,
+        textAlign: 'center',
+        variants: {
+            size: {
+                md: {
+                    fontFamily: theme.components.progressBar.circular.md.label.fontFamily,
+                    fontSize: theme.components.progressBar.circular.md.label.fontSize,
+                    lineHeight: theme.components.progressBar.circular.md.label.lineHeight,
+                    fontWeight: theme.components.progressBar.circular.md.label.fontWeight,
+                },
+                sm: {
+                    fontFamily: theme.typography.mobile.bodyText.fontFamily,
+                    fontSize: theme.typography.mobile.bodyText.md.fontSize,
+                    lineHeight: theme.typography.mobile.bodyText.md.lineHeight,
+                    fontWeight: theme.fontWeight.semibold,
+                },
+            },
+        },
+    },
+    label: {
+        textAlign: 'center',
+        maxWidth: 90,
+    },
+}));
+export default ProgressBarCircular;

package/build/components/ProgressBar/ProgressBarLinear.d.ts

@@ -0,0 +1,6 @@
+import type { ProgressBarInternalProps } from './ProgressBar.props';
+declare const ProgressBarLinear: {
+    ({ percent, label, valueText, hideLabel, colorScheme, }: ProgressBarInternalProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ProgressBarLinear;

package/build/components/ProgressBar/ProgressBarLinear.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Platform, View } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+import useTheme from '../../hooks/useTheme';
+import { BodyText } from '../BodyText';
+const ProgressBarLinear = ({ percent, label, valueText, hideLabel, colorScheme, }) => {
+    const { components } = useTheme();
+    const isReducedMotion = useReducedMotion();
+    const progress = useSharedValue(0);
+    const hasMountedRef = useRef(false);
+    const [trackWidth, setTrackWidth] = useState(0);
+    useEffect(() => {
+        const target = Math.max(0, Math.min(100, percent)) / 100;
+        if (isReducedMotion) {
+            progress.value = target;
+            hasMountedRef.current = true;
+            return;
+        }
+        if (!hasMountedRef.current) {
+            progress.value = target;
+            hasMountedRef.current = true;
+            return;
+        }
+        progress.value = withTiming(target, { duration: 300, easing: Easing.out(Easing.ease) });
+    }, [percent, isReducedMotion, progress]);
+    const animatedStyle = useAnimatedStyle(() => ({
+        width: trackWidth * progress.value,
+    }));
+    const indicatorColor = colorScheme === 'success'
+        ? components.progressBar.progress.successColor
+        : colorScheme === 'danger'
+            ? components.progressBar.progress.dangerColor
+            : components.progressBar.progress.defaultColor;
+    const handleTrackLayout = (event) => {
+        setTrackWidth(event.nativeEvent.layout.width);
+    };
+    return (_jsxs(View, { style: styles.container, children: [!hideLabel && (_jsxs(View, { style: styles.header, children: [_jsx(BodyText, { size: "md", weight: "semibold", style: styles.label, children: label }), _jsx(BodyText, { size: "md", style: styles.value, children: valueText })] })), _jsx(View, { style: styles.track, onLayout: handleTrackLayout, children: Platform.OS === 'web' ? (_jsx(View, { style: [
+                        styles.indicator,
+                        { width: `${Math.max(0, Math.min(100, percent))}%` },
+                        { backgroundColor: indicatorColor },
+                    ] })) : (_jsx(Animated.View, { style: [styles.indicator, animatedStyle, { backgroundColor: indicatorColor }] })) })] }));
+};
+ProgressBarLinear.displayName = 'ProgressBarLinear';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        width: '100%',
+        gap: theme.components.progressBar.linear.gap,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: theme.components.progressBar.linear.label.gap,
+    },
+    label: {
+        flex: 1,
+    },
+    value: {
+        flexShrink: 0,
+        textAlign: 'right',
+    },
+    track: {
+        width: '100%',
+        height: theme.components.progressBar.linear.bar.height,
+        backgroundColor: theme.components.progressBar.barColor,
+        borderRadius: theme.components.progressBar.linear.bar.borderRadius,
+        overflow: 'hidden',
+    },
+    indicator: {
+        height: '100%',
+        borderRadius: theme.components.progressBar.linear.bar.borderRadius,
+        _web: {
+            height: '100%',
+        },
+    },
+}));
+export default ProgressBarLinear;

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

@@ -0,0 +1,2 @@
+export { default as ProgressBar } from './ProgressBar';
+export type { ProgressBarColorScheme, ProgressBarProps, ProgressBarSize, ProgressBarVariant, } from './ProgressBar.props';

package/build/components/ProgressBar/index.js

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

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;