@utilitywarehouse/hearth-react-native 0.23.0 → 0.25.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.23.0 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.25.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.23.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.25.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
-   74: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
-  274:5  warning  React Hook useCallback has a missing dependency: 'footer'. Either include it or remove the dependency array                                                                                                                                   react-hooks/exhaustive-deps
+   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
 
 /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
@@ -60,13 +60,13 @@
 
 Rule                                      | Time (ms) | Relative
 :-----------------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars         |  2022.725 |    59.1%
-react-hooks/exhaustive-deps               |   192.308 |     5.6%
-no-global-assign                          |   140.412 |     4.1%
-react-hooks/rules-of-hooks                |   101.894 |     3.0%
-@typescript-eslint/ban-ts-comment         |    78.579 |     2.3%
-no-misleading-character-class             |    64.143 |     1.9%
-no-unexpected-multiline                   |    47.419 |     1.4%
-@typescript-eslint/triple-slash-reference |    40.424 |     1.2%
-no-loss-of-precision                      |    39.686 |     1.2%
-no-regex-spaces                           |    38.266 |     1.1%
+@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%

package/CHANGELOG.md

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

package/build/components/DatePicker/DatePickerCalendar.js

@@ -1,22 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import TimePickerView from '../TimePicker/TimePickerView';
 import { useDatePickerContext } from './DatePicker.context';
 import Days from './DatePickerDays';
 import Footer from './DatePickerFooter';
 import Header from './DatePickerHeader';
 import Months from './DatePickerMonths';
 import Years from './DatePickerYears';
-import TimePicker from './TimePicker';
-const CalendarView = {
-    year: _jsx(Years, {}),
-    month: _jsx(Months, {}),
-    day: _jsx(Days, {}),
-    time: _jsx(TimePicker, {}),
-};
 const Calendar = () => {
-    const { hideHeader, hideFooter, calendarView, containerHeight, navigationPosition } = useDatePickerContext();
-    return (_jsxs(View, { style: [styles.container], testID: "calendar", children: [!hideHeader ? _jsx(Header, { navigationPosition: navigationPosition }) : null, _jsx(View, { style: styles.containerInner(containerHeight), children: CalendarView[calendarView] }), !hideFooter ? _jsx(Footer, {}) : null] }));
+    const { hideHeader, hideFooter, calendarView, containerHeight, navigationPosition, currentDate, onSelectDate, timeZone, use12Hours, } = useDatePickerContext();
+    const calendarContent = calendarView === 'year' ? (_jsx(Years, {})) : calendarView === 'month' ? (_jsx(Months, {})) : calendarView === 'time' ? (_jsx(TimePickerView, { currentDate: currentDate, onSelectDate: onSelectDate, timeZone: timeZone, use12Hours: use12Hours, containerHeight: containerHeight })) : (_jsx(Days, {}));
+    return (_jsxs(View, { style: [styles.container], testID: "calendar", children: [!hideHeader ? _jsx(Header, { navigationPosition: navigationPosition }) : null, _jsx(View, { style: styles.containerInner(containerHeight), children: calendarContent }), !hideFooter ? _jsx(Footer, {}) : null] }));
 };
 const styles = StyleSheet.create(theme => ({
     container: {

package/build/components/Modal/Modal.js

@@ -20,6 +20,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
     const theme = useTheme();
     const backgroundOpacity = useSharedValue(0);
     const pretendContentTranslateY = useSharedValue(20);
+    const isBrandBackground = background === 'brand';
     const triggerCloseAnimation = useCallback(() => {
         if (Platform.OS === 'android' && inNavModal) {
             pretendContentTranslateY.value = withTiming(20, {
@@ -105,10 +106,10 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         noButtons,
         stickyFooter,
         showHandle: props.showHandle,
-        background: background === 'brand' ? 'brand' : 'primary',
+        background: isBrandBackground ? 'brand' : 'primary',
     });
-    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 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 renderFooter = useCallback((props) => (_jsx(BottomSheetFooter, { ...props, children: _jsx(View, { style: styles.footerWrap, children: footer }) })), [
         onPressPrimaryButton,
         primaryButtonText,
@@ -119,7 +120,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
     ]);
     return inNavModal ? (_jsxs(View, { style: {
             flex: 1,
-            backgroundColor: theme.color.background[background === 'brand' ? 'brand' : 'primary'],
+            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 })] }));
 };
 const styles = StyleSheet.create((theme, rt) => ({

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

@@ -3,16 +3,14 @@ import { ViewProps } from 'react-native';
 import { BottomSheetProps } from '../BottomSheet';
 import { ButtonWithoutChildrenProps } from '../Button/Button.props';
 import { UnstyledIconButtonProps } from '../UnstyledIconButton';
-interface ModalProps extends Omit<BottomSheetProps, 'children'> {
+interface ModalPropsBase extends Omit<BottomSheetProps, 'children'> {
     loading?: boolean;
     image?: ReactNode;
     showCloseButton?: boolean;
     heading?: string;
     loadingHeading?: string;
     description?: string;
-    inNavModal?: boolean;
     fullscreen?: boolean;
-    stickyFooter?: boolean;
     children?: ViewProps['children'];
     onPressPrimaryButton?: () => void;
     primaryButtonText?: string;
@@ -24,6 +22,14 @@ interface ModalProps extends Omit<BottomSheetProps, 'children'> {
     primaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
     secondaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
     closeButtonProps?: Omit<UnstyledIconButtonProps, 'children'>;
-    background?: 'default' | 'brand';
 }
+type ModalProps = (ModalPropsBase & {
+    inNavModal?: false | undefined;
+    stickyFooter?: boolean;
+    background?: never;
+}) | (ModalPropsBase & {
+    inNavModal: true;
+    stickyFooter?: never;
+    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/TimePicker/TimePicker.d.ts

@@ -0,0 +1,6 @@
+import type { TimePickerProps } from './TimePicker.props';
+declare const TimePicker: {
+    ({ timeZone, date, onChange, use12Hours, minuteInterval, hideFooter, style, ref, onCancel, }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TimePicker;

package/build/components/TimePicker/TimePicker.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, findNodeHandle, Platform, View as RNView } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BottomSheetModal, BottomSheetView } from '../BottomSheet';
+import { Button } from '../Button';
+import TimePickerView from './TimePickerView';
+dayjs.extend(utc);
+dayjs.extend(timezone);
+const Footer = ({ onCancel, onConfirm }) => {
+    return (_jsxs(RNView, { style: styles.footer, testID: "footer", children: [_jsx(Button, { variant: "ghost", colorScheme: "functional", onPress: onCancel, children: "Cancel" }), _jsx(Button, { variant: "ghost", colorScheme: "functional", onPress: onConfirm, children: "Ok" })] }));
+};
+const TimePicker = ({ timeZone, date, onChange, use12Hours, minuteInterval, hideFooter, style, ref, onCancel = () => { }, }) => {
+    dayjs.tz.setDefault(timeZone);
+    dayjs.locale('en');
+    const modalRef = useRef(null);
+    const pickerViewRef = useRef(null);
+    useImperativeHandle(ref, () => modalRef.current);
+    const [currentDate, setCurrentDate] = useState(() => {
+        return date ? dayjs.tz(date, timeZone) : dayjs().tz(timeZone);
+    });
+    useEffect(() => {
+        const nextDate = date ? dayjs.tz(date, timeZone) : dayjs().tz(timeZone);
+        const isSameMinute = dayjs(currentDate).isSame(nextDate, 'minute');
+        if (!isSameMinute) {
+            setCurrentDate(nextDate);
+        }
+    }, [currentDate, date, timeZone]);
+    const closeTimePicker = useCallback(() => {
+        modalRef.current?.close();
+    }, []);
+    const handleSelectDate = useCallback((selectedDate) => {
+        const newDate = dayjs.tz(selectedDate ?? currentDate, timeZone);
+        if (!dayjs(currentDate).isSame(newDate, 'minute')) {
+            setCurrentDate(newDate);
+        }
+        onChange?.({ date: newDate ? dayjs(newDate).toDate() : newDate });
+    }, [currentDate, onChange, timeZone]);
+    const handleCancel = useCallback(() => {
+        onCancel?.();
+        closeTimePicker();
+    }, [closeTimePicker, onCancel]);
+    const handleConfirm = useCallback(() => {
+        closeTimePicker();
+    }, [closeTimePicker]);
+    const handleChange = useCallback((index) => {
+        if (index > -1) {
+            setTimeout(() => {
+                AccessibilityInfo.announceForAccessibility('Time picker opened.');
+                const targetRef = pickerViewRef.current;
+                if (targetRef) {
+                    const nodeHandle = findNodeHandle(targetRef);
+                    if (nodeHandle) {
+                        AccessibilityInfo.setAccessibilityFocus(nodeHandle);
+                    }
+                }
+            }, 50);
+        }
+    }, []);
+    const contentStyle = useMemo(() => [styles.container, style], [style]);
+    return (_jsx(BottomSheetModal, { ref: modalRef, onChange: handleChange, accessible: false, enableContentPanningGesture: false, children: _jsx(BottomSheetView, { children: _jsxs(RNView, { ref: pickerViewRef, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Time picker' : undefined, importantForAccessibility: Platform.OS === 'android' ? 'yes' : 'auto', style: contentStyle, children: [_jsx(TimePickerView, { currentDate: currentDate, onSelectDate: handleSelectDate, timeZone: timeZone, use12Hours: use12Hours, minuteInterval: minuteInterval }), !hideFooter ? _jsx(Footer, { onCancel: handleCancel, onConfirm: handleConfirm }) : null] }) }) }));
+};
+TimePicker.displayName = 'TimePicker';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        backgroundColor: theme.color.background.secondary,
+        gap: theme.components.datePicker.calendar.gap,
+    },
+    footer: {
+        flexDirection: 'row',
+        gap: theme.components.datePicker.calendar.footer.gap,
+        justifyContent: 'flex-end',
+    },
+}));
+export default TimePicker;