@utilitywarehouse/hearth-react-native 0.26.0 → 0.27.1

package/.turbo/turbo-build.log

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

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.26.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.27.1 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint .
 
 
@@ -60,13 +60,13 @@
 
 Rule                                      | Time (ms) | Relative
 :-----------------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars         |  1316.387 |    59.6%
-react-hooks/exhaustive-deps               |    96.698 |     4.4%
-no-global-assign                          |    93.436 |     4.2%
-react-hooks/rules-of-hooks                |    81.760 |     3.7%
-no-unexpected-multiline                   |    47.972 |     2.2%
-no-misleading-character-class             |    43.286 |     2.0%
-@typescript-eslint/triple-slash-reference |    33.417 |     1.5%
-@typescript-eslint/ban-ts-comment         |    32.258 |     1.5%
-no-regex-spaces                           |    29.418 |     1.3%
-no-loss-of-precision                      |    25.945 |     1.2%
+@typescript-eslint/no-unused-vars         |  1499.293 |    61.6%
+react-hooks/exhaustive-deps               |   127.430 |     5.2%
+react-hooks/rules-of-hooks                |    84.158 |     3.5%
+no-global-assign                          |    65.981 |     2.7%
+no-unexpected-multiline                   |    44.926 |     1.8%
+@typescript-eslint/ban-ts-comment         |    39.212 |     1.6%
+@typescript-eslint/triple-slash-reference |    36.913 |     1.5%
+no-misleading-character-class             |    36.268 |     1.5%
+no-useless-escape                         |    28.431 |     1.2%
+@typescript-eslint/no-unused-expressions  |    25.564 |     1.1%

package/CHANGELOG.md

@@ -1,5 +1,87 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.27.1
+
+### Patch Changes
+
+- [#990](https://github.com/utilitywarehouse/hearth/pull/990) [`958e0e1`](https://github.com/utilitywarehouse/hearth/commit/958e0e1a9d5451d1e11fecadc69ae3c5ad9d42ca) Thanks [@declanelcocks](https://github.com/declanelcocks)! - 🐛 [FIX]: Fix `Modal` layout when `inNavModal` and `stickyFooter={false}`.
+
+  Corrects the container flex style for `inNavModal` modals with a non-sticky footer, where the UX was not great when scrolling.
+
+  **Components affected**:
+  - `Modal`
+
+  **Developer changes**:
+
+  No changes required.
+
+- [#992](https://github.com/utilitywarehouse/hearth/pull/992) [`2560b3d`](https://github.com/utilitywarehouse/hearth/commit/2560b3dcba7ed4981fad585628f96afd07d8de4f) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Add optional leading `icon` support to `SegmentedControlOption`.
+
+  This adds an optional `icon` prop to `SegmentedControlOption`, allowing icons to be displayed before option labels in segmented controls.
+
+  Docs and stories were updated to include icon usage examples.
+
+  **Components affected**:
+  - `SegmentedControlOption`
+
+  **Developer changes**:
+
+  No changes required for existing usage.
+
+  To use the new optional icon prop:
+
+  ```tsx
+  import { SegmentedControl, SegmentedControlOption } from '@utilitywarehouse/hearth-react-native';
+  import { ElectricitySmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+
+  <SegmentedControl defaultValue="energy">
+    <SegmentedControlOption value="energy" icon={ElectricitySmallIcon}>
+      Energy
+    </SegmentedControlOption>
+    <SegmentedControlOption value="broadband">Broadband</SegmentedControlOption>
+  </SegmentedControl>;
+  ```
+
+## 0.27.0
+
+### Minor Changes
+
+- [#987](https://github.com/utilitywarehouse/hearth/pull/987) [`eb962d2`](https://github.com/utilitywarehouse/hearth/commit/eb962d2f33b63fa3aeda0b291fd41ace90d04c41) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `SegmentedControl` and `SegmentedControlOption` components.
+
+  This introduces a new segmented control component for switching between a small set of related options.
+  The component includes controlled and uncontrolled usage, size variants (`sm`, `md`), animated selected indicator movement, and improved accessibility semantics for screen readers.
+
+  **Components affected**:
+  - `SegmentedControl`
+  - `SegmentedControlOption`
+
+  **Developer changes**:
+
+  Import and compose the new components as follows:
+
+  ```tsx
+  import { SegmentedControl, SegmentedControlOption } from '@utilitywarehouse/hearth-react-native';
+
+  <SegmentedControl defaultValue="day" size="sm">
+    <SegmentedControlOption value="day">Day</SegmentedControlOption>
+    <SegmentedControlOption value="week">Week</SegmentedControlOption>
+    <SegmentedControlOption value="month">Month</SegmentedControlOption>
+  </SegmentedControl>;
+  ```
+
+### Patch Changes
+
+- [#989](https://github.com/utilitywarehouse/hearth/pull/989) [`c97122e`](https://github.com/utilitywarehouse/hearth/commit/c97122eb429ec4adef656fb245a9256a5619df61) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Ensure horizontal `Banner` fills available width when `onPress` is not provided.
+
+  Fixed a layout issue where a horizontal `Banner` without `onPress` could fail to stretch correctly within its parent container.
+
+  **Components affected**:
+  - `Banner`
+
+  **Developer changes**:
+
+  No changes required.
+
 ## 0.26.0
 
 ### Minor Changes

package/build/components/Banner/Banner.js

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

package/build/components/Modal/Modal.js

@@ -120,7 +120,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
     });
     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 InNavModalContainer = scrollable ? ScrollView : View;
-    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg", color: isBrandBackground && inNavModal ? theme.color.icon.inverted : undefined }), _jsx(Heading, { size: "lg", textAlign: "center", inverted: isBrandBackground && inNavModal, children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, inverted: isBrandBackground && inNavModal, children: heading })) : null, description && !image ? (_jsx(BodyText, { accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: isBrandBackground && inNavModal, ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] })] })) : null, inNavModal && (_jsxs(InNavModalContainer, { style: { flexGrow: stickyFooter ? 1 : 0 }, children: [children, !stickyFooter ? _jsx(View, { style: styles.inNavModalFooterContainer, children: footer }) : null] })), !inNavModal && children, ((!stickyFooter && !inNavModal) || (inNavModal && stickyFooter)) && !noButtons ? footer : null] })) }));
+    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg", color: isBrandBackground && inNavModal ? theme.color.icon.inverted : undefined }), _jsx(Heading, { size: "lg", textAlign: "center", inverted: isBrandBackground && inNavModal, children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, inverted: isBrandBackground && inNavModal, children: heading })) : null, description && !image ? (_jsx(BodyText, { accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: isBrandBackground && inNavModal, ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] })] })) : null, inNavModal && (_jsxs(InNavModalContainer, { style: { flex: stickyFooter ? 1 : 0 }, children: [children, !stickyFooter ? _jsx(View, { style: styles.inNavModalFooterContainer, children: footer }) : null] })), !inNavModal && children, ((!stickyFooter && !inNavModal) || (inNavModal && stickyFooter)) && !noButtons ? footer : null] })) }));
     const renderFooter = useCallback((props) => (_jsx(BottomSheetFooter, { ...props, children: _jsx(View, { style: styles.footerWrap, children: footer }) })), [
         onPressPrimaryButton,
         primaryButtonText,

package/build/components/PillGroup/Pill.js

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

package/build/components/PillGroup/PillGroup.js

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

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

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

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

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

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

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

package/build/components/SegmentedControl/SegmentedControl.js

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

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

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

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

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

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

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

package/build/components/SegmentedControl/SegmentedControlOption.js

@@ -0,0 +1,141 @@
+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 { Icon } from '../Icon';
+import { useSegmentedControlContext } from './SegmentedControl.context';
+const AnimatedView = Animated.createAnimatedComponent(View);
+const SegmentedControlOptionRoot = ({ value, children, icon, 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.contentWrap, accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: [icon ? _jsx(Icon, { as: icon, size: "sm", style: styles.icon }) : null, _jsxs(View, { style: styles.labelWrap, 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,
+                },
+            },
+        },
+    },
+    contentWrap: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: theme.components.segmentedControl.gap,
+    },
+    labelWrap: {
+        position: 'relative',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    labelSizer: {
+        opacity: 0,
+    },
+    textLayer: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    icon: {
+        variants: {
+            selected: {
+                true: {
+                    color: theme.color.icon.inverted,
+                },
+                false: {
+                    color: theme.color.icon.primary,
+                },
+            },
+        },
+    },
+    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,14 @@
+import type { ComponentType, 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;
+    /** Optional leading icon. */
+    icon?: ComponentType<any>;
+    /** 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';