@utilitywarehouse/hearth-react-native 0.4.2 → 0.6.0

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

@@ -1,5 +1,6 @@
-import { ComponentType, Ref } from 'react';
-import type { ViewProps, View } from 'react-native';
+import { Ref } from 'react';
+import type { View, ViewProps } from 'react-native';
+import BadgeProps from '../Badge/Badge.props';
 interface SectionHeaderBaseProps extends Omit<ViewProps, 'children'> {
     ref?: Ref<View>;
 }
@@ -7,25 +8,17 @@ export interface SectionHeaderWithChildren extends SectionHeaderBaseProps {
     children: ViewProps['children'];
     heading?: never;
     helperText?: never;
-    linkText?: never;
-    linkHref?: never;
-    linkOnPress?: never;
-    linkTarget?: never;
-    linkIcon?: never;
-    linkIconPosition?: never;
-    linkShowIcon?: never;
+    trailingContent?: never;
+    badge?: never;
+    invalidText?: never;
 }
 export interface SectionHeaderWithoutChildren extends SectionHeaderBaseProps {
     children?: never;
     heading: string;
     helperText?: string;
-    linkText?: string;
-    linkHref?: string;
-    linkOnPress?: () => void;
-    linkTarget?: '_blank' | '_self' | '_parent' | '_top';
-    linkIcon?: ComponentType;
-    linkIconPosition?: 'left' | 'right';
-    linkShowIcon?: boolean;
+    trailingContent?: React.ReactNode;
+    badge?: BadgeProps;
+    invalidText?: string;
 }
 type SectionHeaderProps = SectionHeaderWithChildren | SectionHeaderWithoutChildren;
 export default SectionHeaderProps;

package/build/components/SectionHeader/SectionHeaderTrailingContent.d.ts

@@ -0,0 +1,6 @@
+import { type ViewProps } from 'react-native';
+declare const SectionHeaderTrailingContent: {
+    ({ children, ...props }: ViewProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default SectionHeaderTrailingContent;

package/build/components/SectionHeader/SectionHeaderTrailingContent.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+const SectionHeaderTrailingContent = ({ children, ...props }) => {
+    return (_jsx(View, { ...props, style: [styles.container, props.style], children: children }));
+};
+SectionHeaderTrailingContent.displayName = 'SectionHeaderTrailingContent';
+const styles = StyleSheet.create({
+    container: {
+        alignSelf: 'flex-start',
+    },
+});
+export default SectionHeaderTrailingContent;

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

@@ -2,3 +2,4 @@ export { default as SectionHeader } from './SectionHeader';
 export { default as SectionHeaderHeading } from './SectionHeaderHeading';
 export { default as SectionHeaderHelperText } from './SectionHeaderHelperText';
 export { default as SectionHeaderTextContent } from './SectionHeaderTextContent';
+export { default as SectionHeaderTrailingContent } from './SectionHeaderTrailingContent';

package/build/components/SectionHeader/index.js

@@ -2,3 +2,4 @@ export { default as SectionHeader } from './SectionHeader';
 export { default as SectionHeaderHeading } from './SectionHeaderHeading';
 export { default as SectionHeaderHelperText } from './SectionHeaderHelperText';
 export { default as SectionHeaderTextContent } from './SectionHeaderTextContent';
+export { default as SectionHeaderTrailingContent } from './SectionHeaderTrailingContent';

package/build/components/Tabs/Tab.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useRef } from 'react';
 import { Platform, Pressable, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { DetailText } from '../DetailText';
 import { Icon } from '../Icon';
 import { useTabsContext } from './Tabs.context';
 import { createPressable } from '@gluestack-ui/pressable';
+import { BodyText } from '../BodyText';
 const Tab = ({ value, children, icon, disabled, style, states, ...props }) => {
     const { value: active, select, size, disabled: allDisabled, registerTabLayout, } = useTabsContext();
     const { active: pressed } = states || { active: false };
@@ -23,7 +23,7 @@ const Tab = ({ value, children, icon, disabled, style, states, ...props }) => {
     }, [value, registerTabLayout]);
     return (_jsx(Pressable, { ref: ref, accessibilityRole: "tab", accessibilityState: { selected: isActive, disabled: !!(disabled || allDisabled) }, onPress: handlePress, onLayout: handleLayout, style: [styles.tab, style], ...(Platform.OS === 'web'
             ? { id: `tab-${value}`, 'aria-controls': `tabpanel-${value}` }
-            : null), ...props, children: _jsxs(View, { style: styles.content, children: [icon ? _jsx(Icon, { as: icon }) : null, _jsx(DetailText, { size: size, children: children })] }) }));
+            : null), ...props, children: _jsxs(View, { style: styles.content, children: [icon ? _jsx(Icon, { as: icon }) : null, _jsx(BodyText, { size: size, weight: "semibold", children: children })] }) }));
 };
 Tab.displayName = 'Tab';
 const styles = StyleSheet.create(theme => ({

package/build/components/ThemedImage/ThemedImage.d.ts

@@ -0,0 +1,12 @@
+import type ThemedImageProps from './ThemedImage.props';
+/**
+ * ThemedImage component that displays different images or components based on the current theme
+ * @param light - Image source or SVG component to display in light mode
+ * @param dark - Image source or SVG component to display in dark mode
+ * @param ...rest - All other Image props including width/height for SVG components
+ */
+declare const ThemedImage: {
+    ({ light, dark, ...props }: ThemedImageProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ThemedImage;

package/build/components/ThemedImage/ThemedImage.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isValidElement } from 'react';
+import { Image } from 'react-native';
+import useColorMode from '../../hooks/useColorMode';
+/**
+ * ThemedImage component that displays different images or components based on the current theme
+ * @param light - Image source or SVG component to display in light mode
+ * @param dark - Image source or SVG component to display in dark mode
+ * @param ...rest - All other Image props including width/height for SVG components
+ */
+const ThemedImage = ({ light, dark, ...props }) => {
+    const [colorMode] = useColorMode();
+    const source = colorMode === 'light' ? light : dark;
+    // If the source is a React element (like an SVG component), render it directly
+    if (isValidElement(source)) {
+        return source;
+    }
+    // If the source is a component type (function/class), instantiate it with props
+    if (typeof source === 'function') {
+        const Source = source;
+        return _jsx(Source, { ...props });
+    }
+    // Otherwise, render as a regular Image with the source
+    return _jsx(Image, { source: source, ...props });
+};
+ThemedImage.displayName = 'ThemedImage';
+export default ThemedImage;

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

@@ -0,0 +1,13 @@
+import type { ComponentType, ReactElement } from 'react';
+import type { ImageProps, ImageSourcePropType } from 'react-native';
+interface ThemedImageProps extends Omit<ImageProps, 'source'> {
+    /**
+     * Image source or component to display in light mode
+     */
+    light: ImageSourcePropType | ReactElement | ComponentType<any>;
+    /**
+     * Image source or component to display in dark mode
+     */
+    dark: ImageSourcePropType | ReactElement | ComponentType<any>;
+}
+export default ThemedImageProps;

package/build/components/ThemedImage/ThemedImage.props.js

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

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

@@ -0,0 +1,2 @@
+export { default as ThemedImage } from './ThemedImage';
+export type { default as ThemedImageProps } from './ThemedImage.props';

package/build/components/ThemedImage/index.js

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

package/build/components/ToggleButton/ToggleButtonText.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet } from 'react-native-unistyles';
-import { DetailText } from '../DetailText';
+import { BodyText } from '../BodyText';
 const ToggleButtonText = ({ children, toggled, ...props }) => {
     styles.useVariants({ toggled });
-    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 }));
 };
 ToggleButtonText.displayName = 'ToggleButtonText';
 const styles = StyleSheet.create(theme => ({

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

@@ -1,5 +1,6 @@
 import type { ComponentType } from 'react';
 import type { PressableProps, ViewProps } from 'react-native';
+import { ColorValue } from '../../types';
 export type UnstyledIconButtonProps = {
     disabled?: boolean;
     pressed?: boolean;
@@ -8,5 +9,7 @@ export type UnstyledIconButtonProps = {
     size?: 'sm' | 'md';
     inverted?: boolean;
     children?: React.ReactNode;
-    iconStyle?: ViewProps['style'];
+    iconStyle?: ViewProps['style'] & {
+        color?: ColorValue;
+    };
 } & PressableProps;

package/build/components/index.d.ts

@@ -6,8 +6,10 @@ export * from './BottomSheet';
 export * from './Box';
 export * from './Button';
 export * from './Card';
+export * from './Carousel';
 export * from './Center';
 export * from './Checkbox';
+export * from './Container';
 export * from './CurrencyInput';
 export * from './DatePicker';
 export * from './DatePickerInput';
@@ -23,12 +25,14 @@ export * from './HTMLElements';
 export * from './Icon';
 export * from './IconButton';
 export * from './IconContainer';
+export * from './IndicatorIconButton';
 export * from './InlineLink';
 export * from './Input';
 export * from './Label';
 export * from './Link';
 export * from './List';
 export * from './Modal';
+export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
 export * from './SectionHeader';
@@ -38,6 +42,7 @@ export * from './Spinner';
 export * from './Switch';
 export * from './Tabs';
 export * from './Textarea';
+export * from './ThemedImage';
 export * from './ToggleButtonCard';
 export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, StatusBar, View, } from 'react-native';
 export { Pressable } from 'react-native';

package/build/components/index.js

@@ -7,8 +7,10 @@ export * from './BottomSheet';
 export * from './Box';
 export * from './Button';
 export * from './Card';
+export * from './Carousel';
 export * from './Center';
 export * from './Checkbox';
+export * from './Container';
 export * from './CurrencyInput';
 export * from './DatePicker';
 export * from './DatePickerInput';
@@ -24,12 +26,14 @@ export * from './HTMLElements';
 export * from './Icon';
 export * from './IconButton';
 export * from './IconContainer';
+export * from './IndicatorIconButton';
 export * from './InlineLink';
 export * from './Input';
 export * from './Label';
 export * from './Link';
 export * from './List';
 export * from './Modal';
+export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
 export * from './SectionHeader';
@@ -39,6 +43,7 @@ export * from './Spinner';
 export * from './Switch';
 export * from './Tabs';
 export * from './Textarea';
+export * from './ThemedImage';
 export * from './ToggleButtonCard';
 export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, StatusBar, View, } from 'react-native';
 export { Pressable } from 'react-native';

package/build/core/themes.d.ts

@@ -464,8 +464,8 @@ export declare const lightTheme: {
                 readonly minWidth: 320;
             };
             readonly container: {
+                readonly margin: 16;
                 readonly paddingBottom: 32;
-                readonly paddingHorizontal: 16;
                 readonly paddingTop: 24;
                 readonly width: 360;
             };
@@ -474,7 +474,6 @@ export declare const lightTheme: {
                 readonly columnWidth: 64;
                 readonly gridSize: 8;
                 readonly gutter: 16;
-                readonly margin: 16;
             };
             readonly spacing: {
                 readonly '2xl': 28;
@@ -493,8 +492,8 @@ export declare const lightTheme: {
                 readonly minWidth: 740;
             };
             readonly container: {
+                readonly margin: 32;
                 readonly paddingBottom: 32;
-                readonly paddingHorizontal: 32;
                 readonly paddingTop: 24;
                 readonly width: 744;
             };
@@ -503,7 +502,6 @@ export declare const lightTheme: {
                 readonly columnWidth: 64;
                 readonly gridSize: 8;
                 readonly gutter: 24;
-                readonly margin: 32;
             };
             readonly spacing: {
                 readonly '2xl': 28;
@@ -522,8 +520,8 @@ export declare const lightTheme: {
                 readonly minWidth: 992;
             };
             readonly container: {
+                readonly margin: 32;
                 readonly paddingBottom: 48;
-                readonly paddingHorizontal: 32;
                 readonly paddingTop: 32;
                 readonly width: 1096;
             };
@@ -532,7 +530,6 @@ export declare const lightTheme: {
                 readonly columnWidth: 64;
                 readonly gridSize: 8;
                 readonly gutter: 24;
-                readonly margin: 32;
             };
             readonly spacing: {
                 readonly '2xl': 40;
@@ -1814,8 +1811,8 @@ export declare const darkTheme: {
                 readonly minWidth: 320;
             };
             readonly container: {
+                readonly margin: 16;
                 readonly paddingBottom: 32;
-                readonly paddingHorizontal: 16;
                 readonly paddingTop: 24;
                 readonly width: 360;
             };
@@ -1824,7 +1821,6 @@ export declare const darkTheme: {
                 readonly columnWidth: 64;
                 readonly gridSize: 8;
                 readonly gutter: 16;
-                readonly margin: 16;
             };
             readonly spacing: {
                 readonly '2xl': 28;
@@ -1843,8 +1839,8 @@ export declare const darkTheme: {
                 readonly minWidth: 740;
             };
             readonly container: {
+                readonly margin: 32;
                 readonly paddingBottom: 32;
-                readonly paddingHorizontal: 32;
                 readonly paddingTop: 24;
                 readonly width: 744;
             };
@@ -1853,7 +1849,6 @@ export declare const darkTheme: {
                 readonly columnWidth: 64;
                 readonly gridSize: 8;
                 readonly gutter: 24;
-                readonly margin: 32;
             };
             readonly spacing: {
                 readonly '2xl': 28;
@@ -1872,8 +1867,8 @@ export declare const darkTheme: {
                 readonly minWidth: 992;
             };
             readonly container: {
+                readonly margin: 32;
                 readonly paddingBottom: 48;
-                readonly paddingHorizontal: 32;
                 readonly paddingTop: 32;
                 readonly width: 1096;
             };
@@ -1882,7 +1877,6 @@ export declare const darkTheme: {
                 readonly columnWidth: 64;
                 readonly gridSize: 8;
                 readonly gutter: 24;
-                readonly margin: 32;
             };
             readonly spacing: {
                 readonly '2xl': 40;
@@ -3176,8 +3170,8 @@ export declare const themes: {
                     readonly minWidth: 320;
                 };
                 readonly container: {
+                    readonly margin: 16;
                     readonly paddingBottom: 32;
-                    readonly paddingHorizontal: 16;
                     readonly paddingTop: 24;
                     readonly width: 360;
                 };
@@ -3186,7 +3180,6 @@ export declare const themes: {
                     readonly columnWidth: 64;
                     readonly gridSize: 8;
                     readonly gutter: 16;
-                    readonly margin: 16;
                 };
                 readonly spacing: {
                     readonly '2xl': 28;
@@ -3205,8 +3198,8 @@ export declare const themes: {
                     readonly minWidth: 740;
                 };
                 readonly container: {
+                    readonly margin: 32;
                     readonly paddingBottom: 32;
-                    readonly paddingHorizontal: 32;
                     readonly paddingTop: 24;
                     readonly width: 744;
                 };
@@ -3215,7 +3208,6 @@ export declare const themes: {
                     readonly columnWidth: 64;
                     readonly gridSize: 8;
                     readonly gutter: 24;
-                    readonly margin: 32;
                 };
                 readonly spacing: {
                     readonly '2xl': 28;
@@ -3234,8 +3226,8 @@ export declare const themes: {
                     readonly minWidth: 992;
                 };
                 readonly container: {
+                    readonly margin: 32;
                     readonly paddingBottom: 48;
-                    readonly paddingHorizontal: 32;
                     readonly paddingTop: 32;
                     readonly width: 1096;
                 };
@@ -3244,7 +3236,6 @@ export declare const themes: {
                     readonly columnWidth: 64;
                     readonly gridSize: 8;
                     readonly gutter: 24;
-                    readonly margin: 32;
                 };
                 readonly spacing: {
                     readonly '2xl': 40;
@@ -4526,8 +4517,8 @@ export declare const themes: {
                     readonly minWidth: 320;
                 };
                 readonly container: {
+                    readonly margin: 16;
                     readonly paddingBottom: 32;
-                    readonly paddingHorizontal: 16;
                     readonly paddingTop: 24;
                     readonly width: 360;
                 };
@@ -4536,7 +4527,6 @@ export declare const themes: {
                     readonly columnWidth: 64;
                     readonly gridSize: 8;
                     readonly gutter: 16;
-                    readonly margin: 16;
                 };
                 readonly spacing: {
                     readonly '2xl': 28;
@@ -4555,8 +4545,8 @@ export declare const themes: {
                     readonly minWidth: 740;
                 };
                 readonly container: {
+                    readonly margin: 32;
                     readonly paddingBottom: 32;
-                    readonly paddingHorizontal: 32;
                     readonly paddingTop: 24;
                     readonly width: 744;
                 };
@@ -4565,7 +4555,6 @@ export declare const themes: {
                     readonly columnWidth: 64;
                     readonly gridSize: 8;
                     readonly gutter: 24;
-                    readonly margin: 32;
                 };
                 readonly spacing: {
                     readonly '2xl': 28;
@@ -4584,8 +4573,8 @@ export declare const themes: {
                     readonly minWidth: 992;
                 };
                 readonly container: {
+                    readonly margin: 32;
                     readonly paddingBottom: 48;
-                    readonly paddingHorizontal: 32;
                     readonly paddingTop: 32;
                     readonly width: 1096;
                 };
@@ -4594,7 +4583,6 @@ export declare const themes: {
                     readonly columnWidth: 64;
                     readonly gridSize: 8;
                     readonly gutter: 24;
-                    readonly margin: 32;
                 };
                 readonly spacing: {
                     readonly '2xl': 40;

package/build/hooks/useStyleProps.js

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import useTheme from './useTheme';
 import { propStyleMapping, resolveThemeValue, themeStyleMapping, viewStyleProps } from '../utils';
+import useTheme from './useTheme';
 /**
  * Hook to process utility style props and resolve theme values
  * @param props Component props to process

package/build/tokens/components/dark/button.d.ts

@@ -9,7 +9,7 @@ declare const _default: {
         readonly paddingHorizontal: 16;
         readonly paddingVertical: 12;
     };
-    readonly minWidth: 80;
+    readonly minWidth: 30;
     readonly shadowColor: "#101010";
     readonly sm: {
         readonly paddingHorizontal: 16;

package/build/tokens/components/dark/button.js

@@ -9,7 +9,7 @@ export default {
         paddingHorizontal: 16,
         paddingVertical: 12,
     },
-    minWidth: 80,
+    minWidth: 30,
     shadowColor: '#101010',
     sm: {
         paddingHorizontal: 16,

package/build/tokens/components/dark/dialog.d.ts

@@ -8,6 +8,7 @@ declare const _default: {
     readonly borderRadius: 16;
     readonly content: {
         readonly gap: 12;
+        readonly paddingBottom: 12;
     };
     readonly gap: 24;
     readonly padding: 24;

package/build/tokens/components/dark/dialog.js

@@ -8,6 +8,7 @@ export default {
     borderRadius: 16,
     content: {
         gap: 12,
+        paddingBottom: 12,
     },
     gap: 24,
     padding: 24,

package/build/tokens/components/dark/illustrations.d.ts

@@ -2,6 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
+    readonly colorMode: "dark";
     readonly mode: "dark";
 };
 export default _default;

package/build/tokens/components/dark/illustrations.js

@@ -2,5 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
+    colorMode: 'dark',
     mode: 'dark',
 };

package/build/tokens/components/dark/toast.d.ts

@@ -4,7 +4,10 @@
 declare const _default: {
     readonly backgroundColor: "#3f3f3f";
     readonly borderRadius: 8;
-    readonly gapHorizontal: 8;
+    readonly gapHorizontal: 16;
     readonly padding: 14;
+    readonly stack: {
+        readonly gapHorizontal: 8;
+    };
 };
 export default _default;

package/build/tokens/components/dark/toast.js

@@ -4,6 +4,9 @@
 export default {
     backgroundColor: '#3f3f3f',
     borderRadius: 8,
-    gapHorizontal: 8,
+    gapHorizontal: 16,
     padding: 14,
+    stack: {
+        gapHorizontal: 8,
+    },
 };

package/build/tokens/components/light/button.d.ts

@@ -9,7 +9,7 @@ declare const _default: {
         readonly paddingHorizontal: 16;
         readonly paddingVertical: 12;
     };
-    readonly minWidth: 80;
+    readonly minWidth: 30;
     readonly shadowColor: "#101010";
     readonly sm: {
         readonly paddingHorizontal: 16;

package/build/tokens/components/light/button.js

@@ -9,7 +9,7 @@ export default {
         paddingHorizontal: 16,
         paddingVertical: 12,
     },
-    minWidth: 80,
+    minWidth: 30,
     shadowColor: '#101010',
     sm: {
         paddingHorizontal: 16,

package/build/tokens/components/light/dialog.d.ts

@@ -8,6 +8,7 @@ declare const _default: {
     readonly borderRadius: 16;
     readonly content: {
         readonly gap: 12;
+        readonly paddingBottom: 12;
     };
     readonly gap: 24;
     readonly padding: 24;

package/build/tokens/components/light/dialog.js

@@ -8,6 +8,7 @@ export default {
     borderRadius: 16,
     content: {
         gap: 12,
+        paddingBottom: 12,
     },
     gap: 24,
     padding: 24,

package/build/tokens/components/light/illustrations.d.ts

@@ -2,6 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
+    readonly colorMode: "light";
     readonly mode: "light";
 };
 export default _default;

package/build/tokens/components/light/illustrations.js

@@ -2,5 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
+    colorMode: 'light',
     mode: 'light',
 };

package/build/tokens/components/light/toast.d.ts

@@ -4,7 +4,10 @@
 declare const _default: {
     readonly backgroundColor: "#101010";
     readonly borderRadius: 8;
-    readonly gapHorizontal: 8;
+    readonly gapHorizontal: 16;
     readonly padding: 14;
+    readonly stack: {
+        readonly gapHorizontal: 8;
+    };
 };
 export default _default;

package/build/tokens/components/light/toast.js

@@ -4,6 +4,9 @@
 export default {
     backgroundColor: '#101010',
     borderRadius: 8,
-    gapHorizontal: 8,
+    gapHorizontal: 16,
     padding: 14,
+    stack: {
+        gapHorizontal: 8,
+    },
 };