@utilitywarehouse/hearth-react-native 0.10.0 → 0.12.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.10.0 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.12.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.10.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.12.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,23 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.12.0
+
+### Minor Changes
+
+- [#685](https://github.com/utilitywarehouse/hearth/pull/685) [`10f5209`](https://github.com/utilitywarehouse/hearth/commit/10f52095e5f36e58f9821e3fec3fdf43f4578fbb) Thanks [@jordmccord](https://github.com/jordmccord)! - [BREAKING] Component props moved from objects to React Nodes
+
+### Patch Changes
+
+- [#687](https://github.com/utilitywarehouse/hearth/pull/687) [`11e8176`](https://github.com/utilitywarehouse/hearth/commit/11e8176ced40b0a8b2d27e07c482ed10a7b7ce7a) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes `Input` refs
+
+## 0.11.0
+
+### Minor Changes
+
+- [#674](https://github.com/utilitywarehouse/hearth/pull/674) [`c617257`](https://github.com/utilitywarehouse/hearth/commit/c617257974b11c39d706d6fd46712a284ff5fe10) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `DateInput` component
+
+- [#663](https://github.com/utilitywarehouse/hearth/pull/663) [`8889a07`](https://github.com/utilitywarehouse/hearth/commit/8889a07e347e9289928e679cee495d7656a4e9aa) Thanks [@Utakato](https://github.com/Utakato)! - Add Avatar component
+
 ## 0.10.0
 
 ### Minor Changes

package/build/components/Avatar/Avatar.d.ts

@@ -0,0 +1,6 @@
+import AvatarProps from './Avatar.props';
+declare const Avatar: {
+    ({ src, name, size, delayMs, onLoadingStatusChange, style, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Avatar;

package/build/components/Avatar/Avatar.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { UserMediumIcon, UserSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { useEffect, useState } from 'react';
+import { Image, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
+import { getInitials } from '../../utils';
+import BodyText from '../BodyText/BodyText';
+const Avatar = ({ src, name, size = 'md', delayMs = 0, onLoadingStatusChange, style, ...props }) => {
+    const [status, setStatus] = useState('idle');
+    const [isDelayed, setIsDelayed] = useState(delayMs > 0);
+    const { components } = useTheme();
+    useEffect(() => {
+        if (!src) {
+            setStatus('idle');
+            return;
+        }
+        setStatus('loading');
+    }, [src]);
+    useEffect(() => {
+        onLoadingStatusChange?.(status);
+    }, [status, onLoadingStatusChange]);
+    useEffect(() => {
+        if (delayMs <= 0) {
+            setIsDelayed(false);
+            return;
+        }
+        const timerId = setTimeout(() => {
+            setIsDelayed(false);
+        }, delayMs);
+        return () => clearTimeout(timerId);
+    }, [delayMs]);
+    styles.useVariants({ size });
+    const initials = getInitials(name);
+    const handleLoad = () => setStatus('loaded');
+    const handleError = () => setStatus('error');
+    const showImage = src && status === 'loaded';
+    const showFallback = !showImage && !isDelayed;
+    const textSize = size === 'sm' ? 'md' : 'lg';
+    const FallbackIcon = size === 'sm' ? UserSmallIcon : UserMediumIcon;
+    return (_jsxs(View, { ...props, style: [styles.container, style], accessibilityRole: showImage && name ? 'image' : undefined, accessibilityLabel: showImage ? name : undefined, children: [src && (_jsx(Image, { source: src, style: styles.image, onLoad: handleLoad, onError: handleError, accessibilityElementsHidden: true })), showFallback && (_jsx(View, { style: styles.fallback, children: name ? (_jsx(BodyText, { size: textSize, weight: "semibold", textTransform: "uppercase", style: styles.text, children: initials })) : (_jsx(FallbackIcon, {})) }))] }));
+};
+Avatar.displayName = 'Avatar';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        overflow: 'hidden',
+        backgroundColor: theme.color.surface.pig.subtle,
+        variants: {
+            size: {
+                sm: {
+                    width: theme.components.avatar.sm.width,
+                    height: theme.components.avatar.sm.height,
+                    borderRadius: theme.components.avatar.sm.borderRadius,
+                },
+                md: {
+                    width: theme.components.avatar.md.width,
+                    height: theme.components.avatar.md.height,
+                    borderRadius: theme.components.avatar.md.borderRadius,
+                },
+            },
+        },
+    },
+    image: {
+        width: '100%',
+        height: '100%',
+        position: 'absolute',
+    },
+    fallback: {
+        width: '100%',
+        height: '100%',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    text: {
+        color: theme.color.text.primary,
+    },
+}));
+export default Avatar;

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

@@ -0,0 +1,28 @@
+import type { ImageSourcePropType, ViewProps } from 'react-native';
+export type AvatarLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
+interface AvatarProps extends ViewProps {
+    /**
+     * The image source to display.
+     */
+    src?: ImageSourcePropType;
+    /**
+     * The name associated with the avatar, used for creating initials and accessibility label.
+     */
+    name?: string;
+    /**
+     * Sets the avatar size.
+     * @default md
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Delay in milliseconds before the image is rendered.
+     * Useful to prevent flickering when the image loads very quickly.
+     * @default 0
+     */
+    delayMs?: number;
+    /**
+     * Callback fired when the loading status of the image changes.
+     */
+    onLoadingStatusChange?: (status: AvatarLoadingStatus) => void;
+}
+export default AvatarProps;

package/build/components/Avatar/Avatar.props.js

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

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

@@ -0,0 +1,2 @@
+export { default as Avatar } from './Avatar';
+export type { default as AvatarProps, AvatarLoadingStatus } from './Avatar.props';

package/build/components/Avatar/index.js

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

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

@@ -0,0 +1,7 @@
+declare const BannerContext: import("react").Context<{
+    direction: "horizontal" | "vertical";
+}>;
+export declare const useBannerContext: () => {
+    direction: "horizontal" | "vertical";
+};
+export default BannerContext;

package/build/components/Banner/Banner.context.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+const BannerContext = createContext({
+    direction: 'horizontal',
+});
+export const useBannerContext = () => {
+    return useContext(BannerContext);
+};
+export default BannerContext;

package/build/components/Banner/Banner.js

@@ -1,34 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronRightSmallIcon, CloseSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { Image, Pressable, View } from 'react-native';
+import { useMemo } from 'react';
+import { Pressable, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { Card } from '../Card';
 import { Heading } from '../Heading';
 import { IconContainer } from '../IconContainer';
-import { ThemedImage } from '../ThemedImage';
 import { UnstyledIconButton } from '../UnstyledIconButton';
-const isThemedImageProps = (props) => {
-    return 'light' in props && 'dark' in props;
-};
+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', colorScheme = 'pig', style, ...props }) => {
     const hasIllustration = Boolean(illustration);
     styles.useVariants({ direction, hasIllustration });
+    const context = useMemo(() => ({
+        direction,
+    }), [direction]);
     const renderIconOrImage = () => {
         if (icon) {
             return (_jsx(IconContainer, { icon: icon, variant: iconContainerVariant, size: iconContainerSize, color: iconContainerColor, style: styles.media }));
         }
         if (illustration) {
-            if (isThemedImageProps(illustration)) {
-                return (_jsx(ThemedImage, { ...illustration, resizeMode: "cover", style: [styles.media, styles.imageWrapper, illustration.style] }));
-            }
-            return (_jsx(Image, { ...illustration, resizeMode: "cover", style: [styles.media, styles.imageWrapper, illustration.style] }));
+            return illustration;
         }
         if (image) {
-            if (isThemedImageProps(image)) {
-                return (_jsx(View, { style: [styles.media, styles.imageWrapper], children: _jsx(ThemedImage, { ...image, style: [styles.image, image.style] }) }));
-            }
-            return (_jsx(View, { style: [styles.media, styles.imageWrapper], children: _jsx(Image, { ...image, style: [styles.image, image.style] }) }));
+            return image;
         }
         return null;
     };
@@ -43,9 +38,9 @@ const Banner = ({ icon, iconContainerVariant = 'subtle', iconContainerSize = 'md
     };
     const content = (_jsxs(View, { style: styles.container, children: [onClose && direction === 'vertical' && (_jsx(UnstyledIconButton, { icon: CloseSmallIcon, size: "sm", onPress: onClose, style: styles.closeButton, accessibilityLabel: "Close banner" })), renderIconOrImage(), _jsxs(View, { style: styles.contentContainer, children: [_jsxs(View, { style: styles.contentTextContainer, children: [_jsxs(View, { style: styles.textContainer, children: [_jsx(Heading, { size: "sm", style: styles.heading, textAlign: hasIllustration && direction === 'vertical' ? 'center' : 'left', children: heading }), _jsx(BodyText, { size: "md", style: styles.description, textAlign: hasIllustration && direction === 'vertical' ? 'center' : 'left', children: description })] }), renderAction()] }), onPress && (_jsx(UnstyledIconButton, { icon: ChevronRightSmallIcon, size: "sm", onPress: onPress, style: styles.chevron })), onClose && direction === 'horizontal' && (_jsx(UnstyledIconButton, { icon: CloseSmallIcon, size: "sm", onPress: onClose, style: styles.closeButton, accessibilityLabel: "Close banner" }))] })] }));
     if (onPress) {
-        return (_jsx(Card, { variant: variant, style: [styles.card, style], ...props, children: _jsx(Pressable, { onPress: onPress, accessibilityRole: "button", style: styles.pressable, children: content }) }));
+        return (_jsx(BannerContext.Provider, { value: context, children: _jsx(Card, { variant: variant, style: [styles.card, style], ...props, children: _jsx(Pressable, { onPress: onPress, accessibilityRole: "button", style: styles.pressable, children: content }) }) }));
     }
-    return (_jsx(Card, { variant: variant, style: [styles.card, style], ...props, children: content }));
+    return (_jsx(BannerContext.Provider, { value: context, children: _jsx(Card, { variant: variant, style: [styles.card, style], ...props, children: content }) }));
 };
 Banner.displayName = 'Banner';
 const styles = StyleSheet.create(theme => ({
@@ -100,31 +95,6 @@ const styles = StyleSheet.create(theme => ({
             },
         },
     },
-    imageWrapper: {
-        flexDirection: 'row',
-        variants: {
-            direction: {
-                horizontal: {},
-                vertical: {
-                    width: '100%',
-                },
-            },
-        },
-    },
-    image: {
-        borderRadius: theme.borderRadius.md,
-        borderColor: theme.color.border.strong,
-        borderWidth: theme.borderWidth[1],
-        variants: {
-            direction: {
-                horizontal: { width: 160, height: 95 },
-                vertical: {
-                    width: '100%',
-                    height: 160,
-                },
-            },
-        },
-    },
     contentContainer: {
         alignItems: 'flex-start',
         justifyContent: 'space-between',

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

@@ -1,7 +1,5 @@
-import type { ComponentType, ReactElement } from 'react';
-import { ImageProps } from 'react-native';
+import type { ComponentType, ReactElement, ReactNode } from 'react';
 import type CardProps from '../Card/Card.props';
-import { ThemedImageProps } from '../ThemedImage';
 export type BannerDirection = 'horizontal' | 'vertical';
 export interface BannerProps extends Omit<CardProps, 'noPadding' | 'variant' | 'colorScheme' | 'space' | 'gap' | 'rowGap' | 'columnGap' | 'flexDirection' | 'flexWrap' | 'alignItems' | 'justifyContent'> {
     /**
@@ -28,12 +26,12 @@ export interface BannerProps extends Omit<CardProps, 'noPadding' | 'variant' | '
      * Illustration to display in the banner
      * Mutually exclusive with icon and image
      */
-    illustration?: ThemedImageProps | ImageProps;
+    illustration?: ReactNode;
     /**
      * Image to display in the banner
      * Mutually exclusive with icon and illustration
      */
-    image?: ThemedImageProps | ImageProps;
+    image?: ReactNode;
     /**
      * Heading text
      */

package/build/components/Banner/BannerIllustration.d.ts

@@ -0,0 +1,4 @@
+import { ImageProps } from 'react-native';
+import { ThemedImageProps } from '../ThemedImage';
+declare const BannerIllustration: (props: ImageProps | ThemedImageProps) => import("react/jsx-runtime").JSX.Element;
+export default BannerIllustration;

package/build/components/Banner/BannerIllustration.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { isThemedImageProps } from '../../utils';
+import { ThemedImage } from '../ThemedImage';
+import { useBannerContext } from './Banner.context';
+const BannerIllustration = (props) => {
+    const { direction } = useBannerContext();
+    styles.useVariants({ direction });
+    if (isThemedImageProps(props)) {
+        return (_jsx(View, { style: [styles.media, styles.imageWrapper], children: _jsx(ThemedImage, { ...props, style: [styles.image, props.style] }) }));
+    }
+    return (_jsx(View, { style: [styles.media, styles.imageWrapper], children: _jsx(Image, { ...props, style: [styles.image, props.style] }) }));
+};
+const styles = StyleSheet.create(theme => ({
+    media: {
+        flexShrink: 0,
+        variants: {
+            direction: {
+                horizontal: {},
+                vertical: {
+                    alignSelf: 'flex-start',
+                },
+            },
+        },
+    },
+    imageWrapper: {
+        flexDirection: 'row',
+        variants: {
+            direction: {
+                horizontal: {},
+                vertical: {
+                    width: '100%',
+                },
+            },
+        },
+    },
+    image: {
+        borderRadius: theme.borderRadius.md,
+        borderColor: theme.color.border.strong,
+        borderWidth: theme.borderWidth[1],
+        variants: {
+            direction: {
+                horizontal: { width: 160, height: 95 },
+                vertical: {
+                    width: '100%',
+                    height: 160,
+                },
+            },
+        },
+    },
+}));
+export default BannerIllustration;

package/build/components/Banner/BannerImage.d.ts

@@ -0,0 +1,4 @@
+import { ImageProps } from 'react-native';
+import { ThemedImageProps } from '../ThemedImage';
+declare const BannerImage: (props: ImageProps | ThemedImageProps) => import("react/jsx-runtime").JSX.Element;
+export default BannerImage;

package/build/components/Banner/BannerImage.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { isThemedImageProps } from '../../utils';
+import { ThemedImage } from '../ThemedImage';
+import { useBannerContext } from './Banner.context';
+const BannerImage = (props) => {
+    const { direction } = useBannerContext();
+    styles.useVariants({ direction });
+    if (isThemedImageProps(props)) {
+        return (_jsx(View, { style: [styles.media, styles.imageWrapper], children: _jsx(ThemedImage, { ...props, style: [styles.image, props.style] }) }));
+    }
+    return (_jsx(View, { style: [styles.media, styles.imageWrapper], children: _jsx(Image, { ...props, style: [styles.image, props.style] }) }));
+};
+const styles = StyleSheet.create(theme => ({
+    media: {
+        flexShrink: 0,
+        variants: {
+            direction: {
+                horizontal: {},
+                vertical: {
+                    alignSelf: 'flex-start',
+                },
+            },
+        },
+    },
+    imageWrapper: {
+        flexDirection: 'row',
+        variants: {
+            direction: {
+                horizontal: {},
+                vertical: {
+                    width: '100%',
+                },
+            },
+        },
+    },
+    image: {
+        borderRadius: theme.borderRadius.md,
+        borderColor: theme.color.border.strong,
+        borderWidth: theme.borderWidth[1],
+        variants: {
+            direction: {
+                horizontal: { width: 160, height: 95 },
+                vertical: {
+                    width: '100%',
+                    height: 160,
+                },
+            },
+        },
+    },
+}));
+export default BannerImage;

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

@@ -1,2 +1,4 @@
 export { default as Banner } from './Banner';
 export type { default as BannerProps } from './Banner.props';
+export { default as BannerIllustration } from './BannerIllustration';
+export { default as BannerImage } from './BannerImage';

package/build/components/Banner/index.js

@@ -1 +1,3 @@
 export { default as Banner } from './Banner';
+export { default as BannerIllustration } from './BannerIllustration';
+export { default as BannerImage } from './BannerImage';

package/build/components/Card/CardAction/CardAction.props.d.ts

@@ -1,6 +1,5 @@
-import { ComponentType } from 'react';
+import { ComponentType, ReactNode } from 'react';
 import type { PressableProps, ViewProps } from 'react-native';
-import BadgeProps from '../../Badge/Badge.props';
 import { IconContainerProps } from '../../IconContainer';
 interface CardActionBaseProps extends Omit<PressableProps, 'children'> {
     loading?: boolean;
@@ -10,7 +9,7 @@ interface CardActionBaseProps extends Omit<PressableProps, 'children'> {
 interface CardActionContentProps {
     heading: string;
     helperText?: string;
-    badge?: BadgeProps;
+    badge?: ReactNode;
     badgePosition?: 'bottom' | 'middle' | 'right' | 'top';
     iconContainer?: boolean;
     iconContainerVariant?: IconContainerProps['variant'];

package/build/components/Card/CardAction/CardActionRoot.js

@@ -3,7 +3,6 @@ import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-ico
 import { useMemo } from 'react';
 import { Pressable, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { Badge } from '../../Badge';
 import { IconContainer } from '../../IconContainer';
 import { Skeleton } from '../../Skeleton';
 import { useCardContext } from '../Card.context';
@@ -46,7 +45,7 @@ const CardActionRoot = ({ heading, helperText, leadingContent, trailingContent,
     if (loading) {
         return (_jsxs(Pressable, { ...props, testID: loadingTestID, style: [styles.container, styles.alignCenter, props.style], disabled: isDisabled, children: [leadingContent || leadingIcon ? (_jsx(Skeleton, { width: 24, height: 24, style: styles.alignCenter })) : null, _jsxs(CardActionContent, { children: [_jsx(Skeleton, { width: "80%", height: 24, borderRadius: "xs" }), _jsx(Skeleton, { width: "100%", height: 24, borderRadius: "xs" })] }), trailingIcon || trailingContent ? (_jsx(Skeleton, { width: 24, height: 24, borderRadius: "xs", style: styles.alignCenter })) : null] }));
     }
-    return (_jsx(CardActionContext.Provider, { value: value, children: _jsx(Pressable, { ...props, testID: testID, style: [styles.container, props.style], disabled: isDisabled, accessibilityRole: onPress ? 'button' : undefined, children: children ? (children) : (_jsxs(_Fragment, { children: [leadingIcon && iconContainer ? (_jsx(View, { style: styles.iconContainerWrap, children: _jsx(IconContainer, { style: styles.iconContainer, icon: leadingIcon, variant: iconContainerVariant, color: iconContainerColor, radiusNone: true }) })) : null, _jsxs(View, { style: styles.withIconContainer, children: [leadingContent ? (_jsx(CardActionLeadingContent, { children: leadingContent })) : null, leadingIcon && !iconContainer && !leadingContent ? (_jsx(CardActionLeadingContent, { children: _jsx(CardActionIcon, { as: leadingIcon }) })) : null, _jsxs(CardActionContent, { children: [badgePosition === 'top' && badge ? _jsx(Badge, { ...badge }) : null, _jsx(CardActionText, { children: heading }), badgePosition === 'middle' && badge ? _jsx(Badge, { ...badge }) : null, helperText ? _jsx(CardActionHelperText, { children: helperText }) : null, badgePosition === 'bottom' && badge ? _jsx(Badge, { ...badge }) : null] }), badgePosition === 'right' && badge ? (_jsx(Badge, { ...badge, style: [badge.style, styles.alignCenter] })) : null, trailingContent ? (_jsx(CardActionTrailingContent, { children: trailingContent })) : null, trailingIcon && !trailingContent ? (_jsx(CardActionTrailingContent, { children: _jsx(CardActionTrailingIcon, { as: trailingIcon }) })) : null] })] })) }) }));
+    return (_jsx(CardActionContext.Provider, { value: value, children: _jsx(Pressable, { ...props, testID: testID, style: [styles.container, props.style], disabled: isDisabled, accessibilityRole: onPress ? 'button' : undefined, children: children ? (children) : (_jsxs(_Fragment, { children: [leadingIcon && iconContainer ? (_jsx(View, { style: styles.iconContainerWrap, children: _jsx(IconContainer, { style: styles.iconContainer, icon: leadingIcon, variant: iconContainerVariant, color: iconContainerColor, radiusNone: true }) })) : null, _jsxs(View, { style: styles.withIconContainer, children: [leadingContent ? (_jsx(CardActionLeadingContent, { children: leadingContent })) : null, leadingIcon && !iconContainer && !leadingContent ? (_jsx(CardActionLeadingContent, { children: _jsx(CardActionIcon, { as: leadingIcon }) })) : null, _jsxs(CardActionContent, { children: [badgePosition === 'top' && badge ? badge : null, _jsx(CardActionText, { children: heading }), badgePosition === 'middle' && badge ? badge : null, helperText ? _jsx(CardActionHelperText, { children: helperText }) : null, badgePosition === 'bottom' && badge ? badge : null] }), badgePosition === 'right' && badge ? (_jsx(View, { style: styles.alignCenter, children: badge })) : null, trailingContent ? (_jsx(CardActionTrailingContent, { children: trailingContent })) : null, trailingIcon && !trailingContent ? (_jsx(CardActionTrailingContent, { children: _jsx(CardActionTrailingIcon, { as: trailingIcon }) })) : null] })] })) }) }));
 };
 CardActionRoot.displayName = 'CardActionRoot';
 const styles = StyleSheet.create(theme => ({

package/build/components/Checkbox/Checkbox.js

@@ -5,7 +5,6 @@ import { Helper } from '../Helper';
 import { useCheckboxGroupContext } from './CheckboxGroup.context';
 import StyledCheckboxGroup from './CheckboxGroupRoot';
 import StyledCheckboxIcon from './CheckboxIcon';
-import CheckboxImage from './CheckboxImage';
 import StyledCheckboxIndicator from './CheckboxIndicator';
 import StyledCheckboxLabel from './CheckboxLabel';
 import StyledCheckbox from './CheckboxRoot';
@@ -31,7 +30,7 @@ const Checkbox = ({ children, label, disabled, checked, helperIcon, helperText,
     const { validationStatus: groupValidationStatus, type: groupType } = useCheckboxGroupContext();
     const validationStatus = fieldValidationStatus ?? groupValidationStatus ?? validation ?? 'initial';
     const checkboxType = groupType ?? type;
-    const checkboxChildren = children ? (children) : (_jsxs(_Fragment, { children: [_jsx(CheckboxIndicator, { children: _jsx(CheckboxIcon, {}) }), image ? _jsx(CheckboxImage, { ...image }) : null, _jsxs(CheckboxTextContent, { children: [!!label && _jsx(CheckboxLabel, { children: label }), !!helperText && _jsx(Helper, { disabled: disabled, icon: helperIcon, text: helperText }), validationStatus === 'invalid' && !!invalidText && (_jsx(Helper, { showIcon: showValidationIcon, disabled: disabled, validationStatus: "invalid", text: invalidText })), validationStatus === 'valid' && !!validText && (_jsx(Helper, { disabled: disabled, showIcon: showValidationIcon, validationStatus: "valid", text: validText }))] })] }));
+    const checkboxChildren = children ? (children) : (_jsxs(_Fragment, { children: [_jsx(CheckboxIndicator, { children: _jsx(CheckboxIcon, {}) }), image ? image : null, _jsxs(CheckboxTextContent, { children: [!!label && _jsx(CheckboxLabel, { children: label }), !!helperText && _jsx(Helper, { disabled: disabled, icon: helperIcon, text: helperText }), validationStatus === 'invalid' && !!invalidText && (_jsx(Helper, { showIcon: showValidationIcon, disabled: disabled, validationStatus: "invalid", text: invalidText })), validationStatus === 'valid' && !!validText && (_jsx(Helper, { disabled: disabled, showIcon: showValidationIcon, validationStatus: "valid", text: validText }))] })] }));
     return (
     // @ts-expect-error - type
     _jsx(CheckboxComponent, { ...props, isDisabled: disabled, isChecked: checked, children: checkboxType === 'tile' ? (_jsx(CheckboxTileRoot, { children: checkboxChildren })) : (checkboxChildren) }));

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

@@ -1,5 +1,5 @@
-import type { ComponentType } from 'react';
-import type { ImageProps, PressableProps, ViewProps } from 'react-native';
+import type { ComponentType, ReactNode } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
 type CheckboxBaseProps = {
     onChange?: (isSelected: boolean) => void;
     disabled?: boolean;
@@ -30,7 +30,7 @@ type CheckboxWithoutChildrenProps = {
     invalidText?: string;
     validText?: string;
     showValidationIcon?: boolean;
-    image?: ImageProps;
+    image?: ReactNode;
 } & CheckboxBaseProps;
 type CheckboxProps = CheckboxWithChildrenProps | CheckboxWithoutChildrenProps;
 export default CheckboxProps;

package/build/components/Checkbox/CheckboxImage.d.ts

@@ -1,6 +1,7 @@
 import { ImageProps } from 'react-native';
+import { ThemedImageProps } from '../ThemedImage';
 declare const CheckboxImage: {
-    ({ source, style, ...props }: ImageProps): import("react/jsx-runtime").JSX.Element;
+    ({ ...props }: ImageProps | ThemedImageProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default CheckboxImage;

package/build/components/Checkbox/CheckboxImage.js

@@ -1,5 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Image } from 'react-native';
-const CheckboxImage = ({ source, style, ...props }) => (_jsx(Image, { source: source, style: style, ...props }));
+import { isThemedImageProps } from '../../utils';
+import { ThemedImage } from '../ThemedImage';
+const CheckboxImage = ({ ...props }) => {
+    if (isThemedImageProps(props)) {
+        return _jsx(ThemedImage, { ...props });
+    }
+    return _jsx(Image, { ...props });
+};
 CheckboxImage.displayName = 'CheckboxImage';
 export default CheckboxImage;

package/build/components/DateInput/DateInput.d.ts

@@ -0,0 +1,6 @@
+import type { DateInputProps } from './DateInput.props';
+declare const DateInput: {
+    ({ label, helperText, helperIcon, validationStatus, validText, invalidText, disabled, readonly, required, hideDay, hideMonth, hideYear, dayPlaceholder, monthPlaceholder, yearPlaceholder, dayValue, monthValue, yearValue, onDayChange, onMonthChange, onYearChange, onDayFocus, onMonthFocus, onYearFocus, onDayBlur, onMonthBlur, onYearBlur, ...props }: DateInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default DateInput;

package/build/components/DateInput/DateInput.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { FormField } from '../FormField';
+import DateInputSegment from './DateInputSegment';
+const DateInput = ({ label, helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled, readonly, required, hideDay = false, hideMonth = false, hideYear = false, dayPlaceholder = 'DD', monthPlaceholder = 'MM', yearPlaceholder = 'YYYY', dayValue, monthValue, yearValue, onDayChange, onMonthChange, onYearChange, onDayFocus, onMonthFocus, onYearFocus, onDayBlur, onMonthBlur, onYearBlur, ...props }) => {
+    return (_jsx(FormField, { label: label, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, required: required, style: styles.wrap, ...props, children: _jsxs(View, { style: styles.container, children: [!hideDay && (_jsx(DateInputSegment, { label: "Day", placeholder: dayPlaceholder, value: dayValue, onChange: onDayChange, onFocus: onDayFocus, onBlur: onDayBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 2, testID: "date-input-day" })), !hideMonth && (_jsx(DateInputSegment, { label: "Month", placeholder: monthPlaceholder, value: monthValue, onChange: onMonthChange, onFocus: onMonthFocus, onBlur: onMonthBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 2, testID: "date-input-month" })), !hideYear && (_jsx(DateInputSegment, { label: "Year", placeholder: yearPlaceholder, value: yearValue, onChange: onYearChange, onFocus: onYearFocus, onBlur: onYearBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 4, testID: "date-input-year" }))] }) }));
+};
+DateInput.displayName = 'DateInput';
+const styles = StyleSheet.create(theme => ({
+    wrap: {
+        gap: theme.components.input.gap,
+    },
+    container: {
+        flexDirection: 'row',
+        gap: theme.components.input.date.gap,
+    },
+}));
+export default DateInput;

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

@@ -0,0 +1,79 @@
+import type { TextInputProps } from 'react-native';
+import type { FormFieldBaseProps } from '../FormField/FormField.props';
+export interface DateInputProps extends FormFieldBaseProps {
+    /**
+     * Whether the day segment is hidden.
+     * @default false
+     */
+    hideDay?: boolean;
+    /**
+     * Whether the month segment is hidden.
+     * @default false
+     */
+    hideMonth?: boolean;
+    /**
+     * Whether the year segment is hidden.
+     * @default false
+     */
+    hideYear?: boolean;
+    /**
+     * Placeholder text for the day segment.
+     */
+    dayPlaceholder?: string;
+    /**
+     * Placeholder text for the month segment.
+     */
+    monthPlaceholder?: string;
+    /**
+     * Placeholder text for the year segment.
+     */
+    yearPlaceholder?: string;
+    /**
+     * The controlled value for the day segment. Must be used with an `onDayChange` handler.
+     */
+    dayValue?: string;
+    /**
+     * The controlled value for the month segment. Must be used with an `onMonthChange` handler.
+     */
+    monthValue?: string;
+    /**
+     * The controlled value for the year segment. Must be used with an `onYearChange` handler.
+     */
+    yearValue?: string;
+    /**
+     * Callback fired when the day value changes.
+     */
+    onDayChange?: (text: string) => void;
+    /**
+     * Callback fired when the month value changes.
+     */
+    onMonthChange?: (text: string) => void;
+    /**
+     * Callback fired when the year value changes.
+     */
+    onYearChange?: (text: string) => void;
+    /**
+     * Callback fired when the day segment receives focus.
+     */
+    onDayFocus?: TextInputProps['onFocus'];
+    /**
+     * Callback fired when the month segment receives focus.
+     */
+    onMonthFocus?: TextInputProps['onFocus'];
+    /**
+     * Callback fired when the year segment receives focus.
+     */
+    onYearFocus?: TextInputProps['onFocus'];
+    /**
+     * Callback fired when the day segment loses focus.
+     */
+    onDayBlur?: TextInputProps['onBlur'];
+    /**
+     * Callback fired when the month segment loses focus.
+     */
+    onMonthBlur?: TextInputProps['onBlur'];
+    /**
+     * Callback fired when the year segment loses focus.
+     */
+    onYearBlur?: TextInputProps['onBlur'];
+}

package/build/components/DateInput/DateInput.props.js

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