@utilitywarehouse/hearth-react-native 0.4.1 → 0.5.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.4.1 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.5.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.4.1 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.5.0 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint --max-warnings 0
 
 Rule | Time (ms) | Relative

package/CHANGELOG.md

@@ -1,5 +1,59 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.5.0
+
+### Minor Changes
+
+- [#583](https://github.com/utilitywarehouse/hearth/pull/583) [`a31ab40`](https://github.com/utilitywarehouse/hearth/commit/a31ab40e4ccf4533aae2df16cc456d6db92d4e7b) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `Carousel` component
+
+- [#567](https://github.com/utilitywarehouse/hearth/pull/567) [`b6869cf`](https://github.com/utilitywarehouse/hearth/commit/b6869cfaca7b3a5aacb27c06733f0243b6faa02a) Thanks [@MichalCiesliczka](https://github.com/MichalCiesliczka)! - Adds `ProgressStepper` component
+
+- [#596](https://github.com/utilitywarehouse/hearth/pull/596) [`61f1073`](https://github.com/utilitywarehouse/hearth/commit/61f10735a42445b6e4eb90282a2b340317f1ec08) Thanks [@jordmccord](https://github.com/jordmccord)! - `List` component updates:
+
+  - [BREAKING] The `text` prop in `ListItem` is now `heading`.
+  - Added `ListAction` component.
+  - Added `badge` prop to `ListItem`.
+  - Added `numericValue` prop to `ListItem`.
+  - Removes `divider` prop from `List` and `ListItem`; dividers are now handled automatically.
+
+- [#585](https://github.com/utilitywarehouse/hearth/pull/585) [`4894c34`](https://github.com/utilitywarehouse/hearth/commit/4894c34acaadcbbaba78fd64be2f8ae862200e1f) Thanks [@dorota-uw](https://github.com/dorota-uw)! - [BREAKING] `DescriptionListItem` updates:
+
+  - Removed `Link` props: `linkText`, `linkHref`, `linkIcon`, `linkIconPosition`, `linkOnPress`, `linkTarget`, `linkShowIcon`.
+  - Added `trailingContent` prop to allow custom trailing content (e.g. Link, Button).
+  - Added validation text support to `DescriptionListItem` via `invalidText` prop.
+
+- [#572](https://github.com/utilitywarehouse/hearth/pull/572) [`9fa6499`](https://github.com/utilitywarehouse/hearth/commit/9fa6499b6eb1534c2ce7dc4352b1f848b94786ec) Thanks [@MichalCiesliczka](https://github.com/MichalCiesliczka)! - Adds `IndicatorIconButton` component
+
+- [#596](https://github.com/utilitywarehouse/hearth/pull/596) [`61f1073`](https://github.com/utilitywarehouse/hearth/commit/61f10735a42445b6e4eb90282a2b340317f1ec08) Thanks [@jordmccord](https://github.com/jordmccord)! - [BREAKING] `SectionHeader` updates:
+
+  - Removed `Link` props: `linkText`, `linkOnPress`, `linkAccessibilityLabel`.
+  - Added `trailingContent` prop to allow custom trailing content (e.g. Link, Button).
+  - Added `badge` prop to display a `Badge` next to the heading.
+  - Adds `invalidText` prop for validation messages.
+
+- [#596](https://github.com/utilitywarehouse/hearth/pull/596) [`61f1073`](https://github.com/utilitywarehouse/hearth/commit/61f10735a42445b6e4eb90282a2b340317f1ec08) Thanks [@jordmccord](https://github.com/jordmccord)! - [BREAKING] Migrates `DescriptionList` `SectionHeader` to use `headerTrailingContent`
+
+### Patch Changes
+
+- [#596](https://github.com/utilitywarehouse/hearth/pull/596) [`61f1073`](https://github.com/utilitywarehouse/hearth/commit/61f10735a42445b6e4eb90282a2b340317f1ec08) Thanks [@jordmccord](https://github.com/jordmccord)! - Updates all interactive components fonts
+
+- [#589](https://github.com/utilitywarehouse/hearth/pull/589) [`635a392`](https://github.com/utilitywarehouse/hearth/commit/635a392c80e883790e3fe2cae3b22453288911f1) Thanks [@dorota-uw](https://github.com/dorota-uw)! - Added underline to Ghost button
+
+- [#596](https://github.com/utilitywarehouse/hearth/pull/596) [`61f1073`](https://github.com/utilitywarehouse/hearth/commit/61f10735a42445b6e4eb90282a2b340317f1ec08) Thanks [@jordmccord](https://github.com/jordmccord)! - Upgrade `@utilitywarehouse/hearth-react-native-icons` to `0.6.0`
+
+- Updated dependencies [[`e707eec`](https://github.com/utilitywarehouse/hearth/commit/e707eec790550cab71f2541c26a38c5691e9cbca)]:
+  - @utilitywarehouse/hearth-react-native-icons@0.7.0
+
+## 0.4.2
+
+### Patch Changes
+
+- [#570](https://github.com/utilitywarehouse/hearth/pull/570) [`364e1ac`](https://github.com/utilitywarehouse/hearth/commit/364e1ac1ee6c83327b0614d90bf280e283144ae6) Thanks [@dorota-uw](https://github.com/dorota-uw)! - Switched the logic for enabling/disabling comma separator in CurrencyInput
+
+- [#573](https://github.com/utilitywarehouse/hearth/pull/573) [`2c28614`](https://github.com/utilitywarehouse/hearth/commit/2c28614b5a9335dda15895c90e08774574d82d85) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes `Radio` and `Checkbox` helper overflow issue
+
+- [#573](https://github.com/utilitywarehouse/hearth/pull/573) [`2c28614`](https://github.com/utilitywarehouse/hearth/commit/2c28614b5a9335dda15895c90e08774574d82d85) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes semantic text colour issue
+
 ## 0.4.1
 
 ### Patch Changes

package/build/components/Alert/AlertTitle.js

@@ -1,27 +1,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet } from 'react-native-unistyles';
-import { DetailText } from '../DetailText';
+import { BodyText } from '../BodyText';
 import { useAlertContext } from './Alert.context';
 const AlertTitle = ({ children, style, ...props }) => {
     const { colorScheme } = useAlertContext();
     styles.useVariants({ colorScheme });
-    return (_jsx(DetailText, { size: "md", style: [styles.title, style], ...props, children: children }));
+    return (_jsx(BodyText, { size: "md", weight: "semibold", style: [styles.title, style], ...props, children: children }));
 };
 const styles = StyleSheet.create(theme => ({
     title: {
         variants: {
             colorScheme: {
                 info: {
-                    color: theme.color.feedback.info.foreground,
+                    color: theme.color.feedback.info.foreground.default,
                 },
                 positive: {
-                    color: theme.color.feedback.positive.foreground,
+                    color: theme.color.feedback.positive.foreground.default,
                 },
                 danger: {
-                    color: theme.color.feedback.danger.foreground,
+                    color: theme.color.feedback.danger.foreground.default,
                 },
                 warning: {
-                    color: theme.color.feedback.warning.foreground,
+                    color: theme.color.feedback.warning.foreground.default,
                 },
             },
         },

package/build/components/Badge/Badge.js

@@ -6,11 +6,11 @@ import { BadgeContext } from './Badge.context';
 import BadgeIcon from './BadgeIcon';
 import BadgeText from './BadgeText';
 const Badge = ({ children, ...props }) => {
-    const { variant = 'subtle', icon, colorScheme = 'info', flatBase = false, size = 'sm', style, ...rest } = props;
+    const { variant = 'subtle', icon, colorScheme = 'info', flatBase = false, size = 'sm', style, text, ...rest } = props;
     const value = useMemo(() => ({ colorScheme, flatBase, variant, size }), [colorScheme, flatBase, variant, size]);
-    const childIsText = typeof children === 'string' || typeof children === 'number';
+    const childIsText = typeof children === 'string' || typeof children === 'number' || !!text;
     styles.useVariants({ colorScheme, flatBase, variant, size });
-    return (_jsx(BadgeContext.Provider, { value: value, children: _jsxs(View, { ...rest, style: [styles.container, style], children: [!!icon && _jsx(BadgeIcon, { as: icon }), childIsText ? _jsx(BadgeText, { children: children }) : children] }) }));
+    return (_jsx(BadgeContext.Provider, { value: value, children: _jsxs(View, { ...rest, style: [styles.container, style], children: [!!icon && _jsx(BadgeIcon, { as: icon }), childIsText ? _jsx(BadgeText, { children: text ?? children }) : children] }) }));
 };
 Badge.displayName = 'Badge';
 const styles = StyleSheet.create(theme => ({

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

@@ -6,5 +6,6 @@ interface BadgeProps extends ViewProps {
     size?: 'sm' | 'md';
     icon?: ComponentType;
     flatBase?: boolean;
+    text?: string | number;
 }
 export default BadgeProps;

package/build/components/Button/ButtonRoot.js

@@ -79,6 +79,7 @@ const styles = StyleSheet.create(theme => ({
                 ghost: {
                     backgroundColor: 'transparent',
                     borderWidth: 0,
+                    textDecoration: 'underline',
                 },
             },
             size: {
@@ -324,6 +325,7 @@ const styles = StyleSheet.create(theme => ({
                 variant: 'ghost',
                 colorScheme: 'functional',
                 styles: {
+                    textDecorationColor: theme.color.interactive.functional.foreground.subtle,
                     _web: {
                         _hover: {
                             backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
@@ -371,6 +373,7 @@ const styles = StyleSheet.create(theme => ({
                 variant: 'ghost',
                 colorScheme: 'affirmative',
                 styles: {
+                    textDecorationColor: theme.color.interactive.affirmative.foreground.subtle,
                     _web: {
                         _hover: {
                             backgroundColor: theme.color.interactive.affirmative.surface.subtle.hover,
@@ -394,6 +397,7 @@ const styles = StyleSheet.create(theme => ({
                 variant: 'ghost',
                 colorScheme: 'destructive',
                 styles: {
+                    textDecorationColor: theme.color.interactive.destructive.foreground.subtle,
                     _web: {
                         _hover: {
                             backgroundColor: theme.color.interactive.destructive.surface.subtle.hover,

package/build/components/Button/ButtonText.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet } from 'react-native-unistyles';
-import { DetailText } from '../DetailText';
+import { BodyText } from '../BodyText';
 import { useButtonContext } from './Button.context';
 const ButtonText = ({ children, ...props }) => {
     const { colorScheme, variant, inverted, disabled } = useButtonContext();
     styles.useVariants({ colorScheme, variant, inverted, disabled });
-    return (_jsx(DetailText, { size: "md", ...props, style: [styles.text, props.style], children: children }));
+    return (_jsx(BodyText, { size: "md", weight: "semibold", ...props, style: [styles.text, props.style], children: children }));
 };
 ButtonText.displayName = 'ButtonText';
 const styles = StyleSheet.create(theme => ({

package/build/components/Card/CardRoot.js

@@ -49,7 +49,7 @@ const Card = ({ children, variant = 'subtle', colorScheme = 'neutralStrong', noP
     const context = useMemo(() => ({
         pressed: showPressed && active,
     }), [showPressed, active]);
-    return (_jsx(CardContext.Provider, { value: context, children: _jsx(Pressable, { ...remainingProps, disabled: disabled, style: [styles.card, computedStyles, style], onPress: handlePress, children: children }) }));
+    return (_jsx(CardContext.Provider, { value: context, children: _jsx(Pressable, { ...remainingProps, disabled: disabled, style: [styles.card, computedStyles, style], onPress: handlePress, accessible: showPressed, importantForAccessibility: showPressed ? 'yes' : 'no', children: children }) }));
 };
 Card.displayName = 'Card';
 const styles = StyleSheet.create(theme => ({

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

@@ -0,0 +1,4 @@
+import { CarouselContextValue } from './Carousel.props';
+declare const CarouselContext: import("react").Context<CarouselContextValue>;
+export declare const useCarouselContext: () => CarouselContextValue;
+export default CarouselContext;

package/build/components/Carousel/Carousel.context.js

@@ -0,0 +1,4 @@
+import { createContext, useContext } from 'react';
+const CarouselContext = createContext({});
+export const useCarouselContext = () => useContext(CarouselContext);
+export default CarouselContext;

package/build/components/Carousel/Carousel.d.ts

@@ -0,0 +1,6 @@
+import { CarouselProps } from './Carousel.props';
+declare const Carousel: {
+    ({ centered, children, disabled, inactiveItemOpacity, itemWidth, onSnapToItem, showOverflow, style, width, itemsStyle, activeIndex: initialActiveIndex, showControls, showNavigation, controlsStyle, controlsItemStyle, controlsActiveItemStyle, controlsAccessibilityHidden, inverted, ref, ...props }: CarouselProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Carousel;

package/build/components/Carousel/Carousel.js

@@ -0,0 +1,278 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { FlatList, Platform, ScrollView, View, } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import CarouselContext from './Carousel.context';
+import { CarouselControls } from './CarouselControls';
+import { CarouselItem } from './CarouselItem';
+const Carousel = ({ centered = false, children, disabled = false, inactiveItemOpacity = 1, itemWidth, onSnapToItem, showOverflow = false, style, width, itemsStyle, activeIndex: initialActiveIndex = 0, showControls = true, showNavigation = false, controlsStyle, controlsItemStyle, controlsActiveItemStyle, controlsAccessibilityHidden = true, inverted = false, ref, ...props }) => {
+    const [activeIndex, setActiveIndex] = useState(initialActiveIndex);
+    const [numItems, setNumItems] = useState(0);
+    const scrollViewRef = useRef(null);
+    const flatListRef = useRef(null);
+    const isWeb = Platform.OS === 'web';
+    const isProgrammaticScroll = useRef(false);
+    // Expose scroll methods through ref
+    useImperativeHandle(ref, () => ({
+        scrollToIndex: ({ index, animated = true }) => {
+            if (isWeb && scrollViewRef.current) {
+                isProgrammaticScroll.current = true;
+                const itemWidthValue = itemWidth || width;
+                const offset = centered ? (width - (itemWidth || width)) / 2 : 0;
+                const scrollX = index * itemWidthValue - offset;
+                scrollViewRef.current.scrollTo({ x: scrollX, animated: animated ?? true });
+                setTimeout(() => {
+                    isProgrammaticScroll.current = false;
+                }, 500);
+            }
+            else if (flatListRef.current) {
+                flatListRef.current.scrollToIndex({ index, animated: animated ?? true });
+            }
+            setActiveIndex(index);
+        },
+        scrollToOffset: ({ offset, animated = true, }) => {
+            if (isWeb && scrollViewRef.current) {
+                isProgrammaticScroll.current = true;
+                scrollViewRef.current.scrollTo({ x: offset, animated: animated ?? true });
+                setTimeout(() => {
+                    isProgrammaticScroll.current = false;
+                }, 500);
+            }
+            else if (flatListRef.current) {
+                flatListRef.current.scrollToOffset({ offset, animated: animated ?? true });
+            }
+        },
+    }), [isWeb, itemWidth, width, centered]);
+    // Recursively check if CarouselControls exists in the children tree
+    const hasCarouselControlsInTree = (node) => {
+        if (!node)
+            return false;
+        if (typeof node === 'object' && 'type' in node) {
+            if (node.type === CarouselControls ||
+                node.type?.displayName === 'CarouselControls') {
+                return true;
+            }
+            // Check children recursively
+            if ('props' in node && node.props && typeof node.props === 'object') {
+                const props = node.props;
+                if (props.children) {
+                    const childArray = Children.toArray(props.children);
+                    return childArray.some(child => hasCarouselControlsInTree(child));
+                }
+            }
+        }
+        return false;
+    };
+    // Filter only CarouselItem children for the carousel
+    const { carouselItems, otherChildren, hasCarouselControls } = useMemo(() => {
+        const childrenArray = Children.toArray(children);
+        const carouselItems = [];
+        const otherChildren = [];
+        childrenArray.forEach(child => {
+            if (typeof child === 'object' &&
+                'type' in child &&
+                (child.type === CarouselItem || child.type?.displayName === 'CarouselItem')) {
+                carouselItems.push(child);
+            }
+            else {
+                otherChildren.push(child);
+            }
+        });
+        // Recursively check if any CarouselControls exist in the tree
+        const hasCarouselControls = childrenArray.some(child => hasCarouselControlsInTree(child));
+        return { carouselItems, otherChildren, hasCarouselControls };
+    }, [children]);
+    const innerMargin = width - (itemWidth || width);
+    const containerStyles = {
+        marginHorizontal: centered ? innerMargin / 2 : 0,
+        overflow: showOverflow ? 'visible' : 'hidden',
+    };
+    const context = useMemo(() => ({
+        activeIndex,
+        numItems: carouselItems.length,
+        setActiveIndex,
+        setNumItems,
+        controlsAccessibilityHidden,
+        inverted,
+        disabled,
+    }), [
+        activeIndex,
+        carouselItems.length,
+        setActiveIndex,
+        setNumItems,
+        controlsAccessibilityHidden,
+        inverted,
+        disabled,
+    ]);
+    // On web, we need to prevent overflow from expanding the container
+    const webContainerStyles = isWeb
+        ? {
+            width,
+            maxWidth: width,
+            overflow: 'hidden', // Always clip on web to prevent expansion
+        }
+        : {};
+    // For web centered layouts, add padding to content container
+    const webContentContainerStyle = isWeb && centered
+        ? {
+            paddingHorizontal: innerMargin / 2,
+        }
+        : {};
+    useEffect(() => {
+        setNumItems((carouselItems || []).length);
+    }, [carouselItems, setNumItems]);
+    // Set initial scroll position on web
+    useEffect(() => {
+        if (isWeb && scrollViewRef.current && initialActiveIndex > 0) {
+            // Use setTimeout to ensure ScrollView is mounted
+            setTimeout(() => {
+                if (scrollViewRef.current) {
+                    const itemWidthValue = itemWidth || width;
+                    const offset = centered ? innerMargin / 2 : 0;
+                    const scrollX = initialActiveIndex * itemWidthValue - offset;
+                    scrollViewRef.current.scrollTo({ x: scrollX, animated: false });
+                }
+            }, 0);
+        }
+    }, [isWeb, initialActiveIndex, itemWidth, width, centered, innerMargin]);
+    // Scroll to active index when it changes (for programmatic navigation)
+    useEffect(() => {
+        if (!isProgrammaticScroll.current) {
+            isProgrammaticScroll.current = true;
+            if (isWeb && scrollViewRef.current) {
+                const itemWidthValue = itemWidth || width;
+                const offset = centered ? innerMargin / 2 : 0;
+                const scrollX = activeIndex * itemWidthValue - offset;
+                scrollViewRef.current.scrollTo({ x: scrollX, animated: true });
+            }
+            else if (!isWeb &&
+                flatListRef.current &&
+                activeIndex >= 0 &&
+                activeIndex < carouselItems.length) {
+                flatListRef.current.scrollToIndex({ index: activeIndex, animated: true });
+            }
+            setTimeout(() => {
+                isProgrammaticScroll.current = false;
+            }, 500);
+        }
+    }, [activeIndex, isWeb, itemWidth, width, centered, innerMargin, carouselItems.length]);
+    // Web scroll handler - track scroll position
+    const handleWebScroll = useCallback((event) => {
+        if (!isWeb || isProgrammaticScroll.current)
+            return;
+        const scrollX = event.nativeEvent.contentOffset.x;
+        const itemWidthValue = itemWidth || width;
+        // For centered layouts, account for the padding offset
+        const offset = centered ? innerMargin / 2 : 0;
+        const index = Math.round((scrollX + offset) / itemWidthValue);
+        if (index >= 0 && index < carouselItems.length && index !== activeIndex) {
+            setActiveIndex?.(index);
+        }
+    }, [
+        activeIndex,
+        centered,
+        innerMargin,
+        isWeb,
+        itemWidth,
+        carouselItems.length,
+        setActiveIndex,
+        width,
+    ]);
+    // Web scroll end handler - update when scroll completes
+    const handleWebScrollEnd = useCallback((event) => {
+        if (!isWeb || isProgrammaticScroll.current)
+            return;
+        const scrollX = event.nativeEvent.contentOffset.x;
+        const itemWidthValue = itemWidth || width;
+        // For centered layouts, account for the padding offset
+        const offset = centered ? innerMargin / 2 : 0;
+        const index = Math.round((scrollX + offset) / itemWidthValue);
+        if (index >= 0 && index < carouselItems.length) {
+            setActiveIndex?.(index);
+            onSnapToItem?.(index);
+        }
+    }, [
+        centered,
+        innerMargin,
+        isWeb,
+        itemWidth,
+        carouselItems.length,
+        onSnapToItem,
+        setActiveIndex,
+        width,
+    ]);
+    // Native viewable items handler
+    const handleViewableItemsChanged = useCallback(({ viewableItems }) => {
+        if (!viewableItems.length) {
+            return;
+        }
+        const index = viewableItems[viewableItems.length - 1].index || 0;
+        setActiveIndex?.(index);
+        onSnapToItem?.(index);
+    }, [onSnapToItem, setActiveIndex]);
+    const controls = (_jsx(CarouselControls, { style: [styles.controls, controlsStyle], itemStyle: controlsItemStyle, activeItemStyle: controlsActiveItemStyle, showNavigation: showNavigation, accessibilityHidden: controlsAccessibilityHidden }));
+    // Render for web using ScrollView with scroll snap
+    if (isWeb) {
+        return (_jsx(CarouselContext.Provider, { value: context, children: _jsxs(View, { style: style, children: [_jsx(ScrollView, { horizontal: true, onScroll: handleWebScroll, onMomentumScrollEnd: handleWebScrollEnd, onScrollEndDrag: handleWebScrollEnd, ref: scrollViewRef, scrollEnabled: !disabled, pointerEvents: disabled ? 'none' : 'auto', scrollEventThrottle: 16, showsHorizontalScrollIndicator: false, snapToInterval: itemWidth || width, snapToAlignment: centered ? 'center' : 'start', decelerationRate: "fast", style: [styles.webContainer, webContainerStyles, itemsStyle], contentContainerStyle: [styles.webContentContainer, webContentContainerStyle], ...props, children: carouselItems.map((item, index) => cloneElement(item, {
+                            active: index === activeIndex,
+                            inactiveOpacity: inactiveItemOpacity,
+                            key: item?.key || item.props?.id || index,
+                            width: itemWidth || width,
+                            style: [
+                                item.props?.style,
+                                styles.webItem,
+                                centered ? styles.webItemCentered : styles.webItemStart,
+                            ],
+                        })) }), showControls && !hasCarouselControls && controls, otherChildren] }) }));
+    }
+    // Render for native using FlatList
+    return (_jsx(CarouselContext.Provider, { value: context, children: _jsxs(View, { style: style, children: [_jsx(FlatList, { ref: flatListRef, bounces: false, data: carouselItems, decelerationRate: "fast", disableIntervalMomentum // Prevents scrolling more than one item at a time
+                    : true, getItemLayout: (_, index) => ({
+                        length: itemWidth || width,
+                        offset: (itemWidth || width) * index,
+                        index,
+                    }), horizontal: true, initialScrollIndex: activeIndex, pagingEnabled: true, onViewableItemsChanged: handleViewableItemsChanged, overScrollMode: "never" // Prevents stretching of first and last items when reaching each end of the carousel (Android only)
+                    , removeClippedSubviews: !showOverflow, renderItem: ({ index, item }) => cloneElement(item, {
+                        active: index === activeIndex,
+                        inactiveOpacity: inactiveItemOpacity,
+                        key: item?.key || item.props?.id || index,
+                        width: itemWidth || width,
+                    }), scrollEnabled: !disabled, showsHorizontalScrollIndicator: false, snapToInterval: itemWidth || width, snapToAlignment: "center", style: [itemsStyle, containerStyles], viewabilityConfig: { itemVisiblePercentThreshold: 51 }, ...props }), showControls && !hasCarouselControls && controls, otherChildren] }) }));
+};
+Carousel.displayName = 'Carousel';
+const styles = StyleSheet.create(theme => ({
+    controls: {
+        marginTop: theme.space['200'],
+    },
+    webContainer: {
+        _web: {
+            scrollSnapType: 'x mandatory',
+            WebkitOverflowScrolling: 'touch',
+            overflowX: 'scroll',
+            overflowY: 'hidden',
+        },
+    },
+    webContentContainer: {
+        _web: {
+            display: 'flex',
+            flexDirection: 'row',
+        },
+    },
+    webItem: {
+        _web: {
+            scrollSnapStop: 'always',
+            flexShrink: 0,
+        },
+    },
+    webItemCentered: {
+        _web: {
+            scrollSnapAlign: 'center',
+        },
+    },
+    webItemStart: {
+        _web: {
+            scrollSnapAlign: 'start',
+        },
+    },
+}));
+export default Carousel;

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

@@ -0,0 +1,65 @@
+import { ReactElement } from 'react';
+import { FlatListProps, PressableProps, ViewProps, ViewStyle } from 'react-native';
+export interface CarouselRef {
+    scrollToIndex: (params: {
+        index: number;
+        animated?: boolean | null;
+    }) => void;
+    scrollToOffset: (params: {
+        offset: number;
+        animated?: boolean | null;
+    }) => void;
+}
+export interface CarouselContextValue {
+    activeIndex: number;
+    numItems: number;
+    setActiveIndex: (index: number) => void;
+    setNumItems: (count: number) => void;
+    controlsAccessibilityHidden?: boolean;
+    inverted?: boolean;
+    disabled?: boolean;
+}
+export interface CarouselItemProps extends ViewProps {
+    active?: boolean;
+    key?: string | number;
+    inactiveOpacity?: number;
+    width?: number;
+}
+export interface CarouselProps extends Omit<FlatListProps<ReactElement<CarouselItemProps>>, 'accessibilityActions' | 'accessibilityLabel' | 'accessibilityRole' | 'accessible' | 'bounces' | 'children' | 'data' | 'decelerationRate' | 'getItemLayout' | 'horizontal' | 'pagingEnabled' | 'onAccessibilityAction' | 'onViewableItemsChanged' | 'overScrollMode' | 'renderItem' | 'showsHorizontalScrollIndicator' | 'snapToInterval' | 'snapToAlignment' | 'viewabilityConfig' | 'style'> {
+    activeIndex?: number;
+    centered?: boolean;
+    disabled?: boolean;
+    inactiveItemOpacity?: number;
+    itemWidth?: number;
+    onSnapToItem?: (index: number) => void;
+    showOverflow?: boolean;
+    width: number;
+    children?: ViewProps['children'];
+    itemsStyle?: FlatListProps<ReactElement<CarouselItemProps>>['style'];
+    style?: ViewStyle;
+    showControls?: boolean;
+    showNavigation?: boolean;
+    controlsStyle?: ViewProps['style'];
+    controlsItemStyle?: ViewProps['style'];
+    controlsActiveItemStyle?: ViewProps['style'];
+    controlsAccessibilityHidden?: boolean;
+    ref?: React.Ref<CarouselRef>;
+    inverted?: boolean;
+}
+export interface CarouselProviderProps {
+    initialActiveIndex?: number;
+}
+export interface CarouselControlsProps extends ViewProps {
+    itemStyle?: ViewProps['style'];
+    activeItemStyle?: ViewProps['style'];
+    showNavigation?: boolean;
+    onPressPrev?: () => void;
+    onPressNext?: () => void;
+    accessibilityHidden?: boolean;
+}
+export interface CarouselControlsItemProps extends Omit<PressableProps, 'style'> {
+    active: boolean;
+    index: number;
+    style?: ViewProps['style'];
+    activeStyle?: ViewProps['style'];
+}

package/build/components/Carousel/Carousel.props.js

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

package/build/components/Carousel/CarouselControlItem.d.ts

@@ -0,0 +1,24 @@
+import { CarouselControlsItemProps } from './Carousel.props';
+export declare const CarouselControlItemRoot: ({ active, style, index, activeStyle, onPress, disabled, ...props }: CarouselControlsItemProps & {
+    states?: {
+        active?: boolean;
+        disabled?: boolean;
+    };
+}) => import("react/jsx-runtime").JSX.Element;
+declare const CarouselControlItem: import("react").ForwardRefExoticComponent<CarouselControlsItemProps & {
+    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 CarouselControlItem;

package/build/components/Carousel/CarouselControlItem.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createPressable } from '@gluestack-ui/pressable';
+import { useContext } from 'react';
+import { Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import CarouselContext from './Carousel.context';
+export const CarouselControlItemRoot = ({ active, style, index, activeStyle, onPress, disabled, ...props }) => {
+    const { inverted, numItems } = useContext(CarouselContext);
+    styles.useVariants({ active, inverted });
+    return (_jsx(Pressable, { style: [styles.item, active && activeStyle], onPress: onPress, disabled: disabled, accessibilityLabel: `Page ${index + 1} of ${numItems}`, ...props, children: _jsx(View, { style: [styles.circle, style] }) }));
+};
+const CarouselControlItem = createPressable({
+    Root: CarouselControlItemRoot,
+});
+CarouselControlItem.displayName = 'CarouselControlItem';
+const styles = StyleSheet.create(theme => ({
+    item: {
+        width: 24,
+        height: 24,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    circle: {
+        width: theme.components.carouselControl.size,
+        height: theme.components.carouselControl.size,
+        borderRadius: theme.borderRadius.full,
+        borderColor: theme.color.interactive.functional.border.subtle,
+        borderWidth: theme.borderWidth[2],
+        backgroundColor: 'transparent',
+        paddingTop: theme.space['100'],
+        overflow: 'hidden',
+        _hover: {
+            backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
+        },
+        variants: {
+            active: {
+                true: {
+                    backgroundColor: theme.color.interactive.functional.foreground.subtle,
+                    _hover: {
+                        backgroundColor: theme.color.interactive.functional.foreground.subtle,
+                    },
+                },
+            },
+            inverted: {
+                true: {
+                    borderColor: theme.color.interactive.functional.border.inverted,
+                    _hover: {
+                        backgroundColor: theme.color.interactive.functional.surface.subtle.inverted.hover,
+                    },
+                },
+            },
+        },
+        compoundVariants: [
+            {
+                active: true,
+                inverted: true,
+                styles: {
+                    backgroundColor: theme.color.interactive.functional.foreground.inverted,
+                },
+            },
+        ],
+    },
+}));
+export default CarouselControlItem;

package/build/components/Carousel/CarouselControls.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { CarouselControlsProps } from './Carousel.props';
+export declare const CarouselControls: FC<CarouselControlsProps>;
+export default CarouselControls;