@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

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

@@ -0,0 +1,18 @@
+import { ComponentType } from 'react';
+import type { ViewProps } from 'react-native';
+export interface DescriptionListProps extends ViewProps {
+    /** Direction orientation for items */
+    direction?: 'row' | 'column';
+    /** Override heading/term column width when layout is row (defaults to token) */
+    itemHeadingWidth?: number;
+    heading?: string;
+    helperText?: string;
+    linkText?: string;
+    linkHref?: string;
+    linkIcon?: ComponentType;
+    linkIconPosition?: 'left' | 'right';
+    linkOnPress?: () => void;
+    linkTarget?: '_blank' | '_self' | '_parent' | '_top';
+    linkShowIcon?: boolean;
+}
+export default DescriptionListProps;

package/build/components/DescriptionList/DescriptionListItem.d.ts

@@ -0,0 +1,6 @@
+import type DescriptionListItemProps from './DescriptionListItem.props';
+declare const DescriptionListItem: {
+    ({ heading, description, headingWidth, linkText, linkHref, linkIcon, linkIconPosition, linkOnPress, linkTarget, linkShowIcon, style, ...props }: DescriptionListItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default DescriptionListItem;

package/build/components/DescriptionList/DescriptionListItem.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
+import { BodyText } from '../BodyText';
+import { Link } from '../Link';
+import { useDescriptionListContext } from './DescriptionList.context';
+const DescriptionListItem = ({ heading, description, headingWidth, linkText, linkHref, linkIcon, linkIconPosition, linkOnPress, linkTarget, linkShowIcon, style, ...props }) => {
+    const { components } = useTheme();
+    const { direction, itemHeadingWidth = components.descriptionList.item.row.headingWidth } = useDescriptionListContext();
+    styles.useVariants({ direction });
+    const headingIsText = typeof heading === 'string' || typeof heading === 'number';
+    const descIsText = typeof description === 'string' || typeof description === 'number';
+    const combinedLabel = headingIsText && descIsText ? `${heading}: ${description}` : undefined;
+    const hideDescendants = !!combinedLabel;
+    return (_jsxs(View, { accessibilityRole: "text", accessible: !!combinedLabel, accessibilityLabel: combinedLabel, ...props, style: [styles.item, style], children: [_jsxs(View, { style: styles.textWrap, importantForAccessibility: hideDescendants ? 'no-hide-descendants' : undefined, accessibilityElementsHidden: hideDescendants || undefined, children: [_jsx(View, { style: [direction === 'row' && { width: headingWidth || itemHeadingWidth }], children: headingIsText ? _jsx(BodyText, { style: styles.headingText, children: heading }) : heading }), _jsx(View, { style: styles.descriptionWrapper, children: descIsText ? _jsx(BodyText, { children: description }) : description })] }), linkText ? (_jsx(Link, { href: linkHref, onPress: linkOnPress, target: linkTarget, showIcon: linkShowIcon, icon: linkIcon, iconPosition: linkIconPosition, accessibilityRole: "link", children: linkText })) : null] }));
+};
+DescriptionListItem.displayName = 'DescriptionListItem';
+const styles = StyleSheet.create(theme => ({
+    item: {
+        width: theme.space.full,
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        gap: theme.components.descriptionList.item.gap,
+    },
+    textWrap: {
+        flex: 1,
+        variants: {
+            direction: {
+                row: {
+                    flexDirection: 'row',
+                    alignItems: 'flex-start',
+                    gap: theme.components.descriptionList.item.row.gap,
+                },
+                column: {
+                    flexDirection: 'column',
+                    gap: theme.components.descriptionList.item.column.gap,
+                },
+            },
+        },
+    },
+    headingText: {
+        color: theme.color.text.secondary,
+    },
+    descriptionWrapper: {
+        flex: 1,
+    },
+}));
+export default DescriptionListItem;

package/build/components/DescriptionList/DescriptionListItem.props.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+export interface DescriptionListItemProps extends ViewProps {
+    /** Heading / label part */
+    heading: ReactNode;
+    /** Description / value part */
+    description: ReactNode;
+    headingWidth?: number;
+    linkText?: string;
+    linkHref?: string;
+    linkIcon?: ComponentType;
+    linkIconPosition?: 'left' | 'right';
+    linkOnPress?: () => void;
+    linkTarget?: '_blank' | '_self' | '_parent' | '_top';
+    linkShowIcon?: boolean;
+}
+export default DescriptionListItemProps;

package/build/components/DescriptionList/DescriptionListItem.props.js

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

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

@@ -0,0 +1,4 @@
+export { default as DescriptionList } from './DescriptionList';
+export type { default as DescriptionListProps } from './DescriptionList.props';
+export { default as DescriptionListItem } from './DescriptionListItem';
+export type { default as DescriptionListItemProps } from './DescriptionListItem.props';

package/build/components/DescriptionList/index.js

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

package/build/components/DetailText/DetailText.js

@@ -42,7 +42,7 @@ const DetailText = ({ children, color, size = 'md', truncated, underline, strike
 DetailText.displayName = 'DetailText';
 const styles = StyleSheet.create(theme => ({
     text: {
-        color: theme.components.text.color,
+        color: theme.color.text.primary,
         fontWeight: theme.fontWeight.regular,
         fontFamily: theme.typography.mobile.detailText.fontFamily,
         fontStyle: 'normal',
@@ -106,7 +106,7 @@ const styles = StyleSheet.create(theme => ({
             },
             inverted: {
                 true: {
-                    color: theme.components.text.colorInverted,
+                    color: theme.color.text.inverted,
                 },
             },
         },

package/build/components/Divider/Divider.js

@@ -14,7 +14,7 @@ const Divider = ({ orientation = 'horizontal', color, space, height, width, flex
 Divider.displayName = 'Divider';
 const styles = StyleSheet.create(theme => ({
     divider: {
-        backgroundColor: theme.components.divider.color,
+        backgroundColor: theme.color.border.subtle,
         variants: {
             orientation: {
                 horizontal: {
@@ -28,11 +28,13 @@ const styles = StyleSheet.create(theme => ({
             },
             space: {
                 none: {},
+                '2xs': {},
                 xs: {},
                 sm: {},
                 md: {},
                 lg: {},
                 xl: {},
+                '2xl': {},
             },
             flexItem: {
                 true: {
@@ -48,6 +50,17 @@ const styles = StyleSheet.create(theme => ({
                     marginVertical: 0,
                 },
             },
+            {
+                orientation: 'horizontal',
+                space: '2xs',
+                styles: {
+                    marginVertical: {
+                        base: theme.layout.mobile.spacing['2xs'],
+                        md: theme.layout.tablet.spacing['2xs'],
+                        lg: theme.layout.desktop.spacing['2xs'],
+                    },
+                },
+            },
             {
                 orientation: 'horizontal',
                 space: 'xs',
@@ -103,6 +116,17 @@ const styles = StyleSheet.create(theme => ({
                     },
                 },
             },
+            {
+                orientation: 'horizontal',
+                space: '2xl',
+                styles: {
+                    marginVertical: {
+                        base: theme.layout.mobile.spacing['2xl'],
+                        md: theme.layout.tablet.spacing['2xl'],
+                        lg: theme.layout.desktop.spacing['2xl'],
+                    },
+                },
+            },
             {
                 orientation: 'vertical',
                 space: 'none',
@@ -110,6 +134,17 @@ const styles = StyleSheet.create(theme => ({
                     marginHorizontal: 0,
                 },
             },
+            {
+                orientation: 'vertical',
+                space: '2xs',
+                styles: {
+                    marginHorizontal: {
+                        base: theme.layout.mobile.spacing['2xs'],
+                        md: theme.layout.tablet.spacing['2xs'],
+                        lg: theme.layout.desktop.spacing['2xs'],
+                    },
+                },
+            },
             {
                 orientation: 'vertical',
                 space: 'xs',
@@ -165,6 +200,17 @@ const styles = StyleSheet.create(theme => ({
                     },
                 },
             },
+            {
+                orientation: 'vertical',
+                space: '2xl',
+                styles: {
+                    marginHorizontal: {
+                        base: theme.layout.mobile.spacing['2xl'],
+                        md: theme.layout.tablet.spacing['2xl'],
+                        lg: theme.layout.desktop.spacing['2xl'],
+                    },
+                },
+            },
         ],
     },
     extraStyles: (color, width, height) => ({

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

@@ -1,8 +1,8 @@
 import type { DimensionValue, ViewProps } from 'react-native';
-import type { ColorValue } from '../../types';
+import type { ColorValue, SpacingValues } from '../../types';
 interface DividerProps extends Omit<ViewProps, 'children'> {
     color?: ColorValue;
-    space?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    space?: SpacingValues;
     orientation?: 'horizontal' | 'vertical';
     height?: DimensionValue;
     width?: DimensionValue;

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

@@ -1,9 +1,10 @@
-import type { ViewProps, ViewStyle, FlexAlignType } from 'react-native';
+import type { FlexAlignType, ViewProps, ViewStyle } from 'react-native';
+import { SpacingValues } from '../../types';
 interface FlexProps extends ViewProps {
     direction?: ViewStyle['flexDirection'];
     align?: FlexAlignType;
     justify?: ViewStyle['justifyContent'];
     wrap?: ViewStyle['flexWrap'];
-    space?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    space?: SpacingValues;
 }
 export default FlexProps;

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

@@ -1,6 +1,6 @@
 import { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import { UnistylesBreakpoints } from 'react-native-unistyles';
-import { SpaceValue } from '../../types';
+import { SpaceValue, SpacingValues } from '../../types';
 export type GridColumns = {
     [key in keyof UnistylesBreakpoints]?: number;
 };
@@ -13,7 +13,7 @@ export interface GridProps extends ViewProps {
     /**
      * Spacing between grid items (applies to both rows and columns)
      */
-    space?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    space?: SpacingValues;
     /**
      * Gap between items (overrides spacing if provided)
      */

package/build/components/Heading/Heading.js

@@ -41,7 +41,7 @@ const Heading = ({ children, color, size = 'lg', truncated, underline, strikeThr
 Heading.displayName = 'Heading';
 const styles = StyleSheet.create(theme => ({
     text: {
-        color: theme.components.text.color,
+        color: theme.color.text.primary,
         fontFamily: theme.typography.mobile.heading.fontFamily,
         marginVertical: 0,
         fontStyle: 'normal',
@@ -128,7 +128,7 @@ const styles = StyleSheet.create(theme => ({
             },
             inverted: {
                 true: {
-                    color: theme.components.text.colorInverted,
+                    color: theme.color.text.inverted,
                 },
             },
         },

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

@@ -1,4 +1,5 @@
-import type { TextProps, TextStyle } from 'react-native';
+import type { Ref } from 'react';
+import type { Text, TextProps, TextStyle } from 'react-native';
 import type { ColorValue } from '../../types';
 interface HeadingProps extends TextProps {
     size?: 'sm' | 'md' | 'lg' | 'xl';
@@ -14,5 +15,6 @@ interface HeadingProps extends TextProps {
     textDecorationColor?: ColorValue;
     userSelect?: TextStyle['userSelect'];
     inverted?: boolean;
+    ref?: Ref<Text>;
 }
 export default HeadingProps;

package/build/components/Helper/HelperIcon.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Platform } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
 import { useHelperContext } from './HelperContext';
-import { Platform } from 'react-native';
 const HelperIcon = (props) => {
     const { validationStatus } = useHelperContext();
     styles.useVariants({ validationStatus });
@@ -18,10 +18,10 @@ const styles = StyleSheet.create(theme => ({
         variants: {
             validationStatus: {
                 valid: {
-                    color: theme.components.text.colorValid,
+                    color: theme.color.feedback.positive.foreground.subtle,
                 },
                 invalid: {
-                    color: theme.components.text.colorInvalid,
+                    color: theme.color.feedback.danger.foreground.subtle,
                 },
                 initial: {},
             },

package/build/components/Helper/HelperText.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet } from 'react-native-unistyles';
-import { useHelperContext } from './HelperContext';
 import { BodyText } from '../BodyText';
+import { useHelperContext } from './HelperContext';
 const HelperText = (props) => {
     const { validationStatus, disabled } = useHelperContext();
     styles.useVariants({ validationStatus, disabled });
@@ -10,14 +10,14 @@ const HelperText = (props) => {
 HelperText.displayName = 'HelperText';
 const styles = StyleSheet.create(theme => ({
     text: {
-        color: theme.components.text.colorSecondary,
+        color: theme.color.text.secondary,
         variants: {
             validationStatus: {
                 valid: {
-                    color: theme.components.text.colorValid,
+                    color: theme.color.feedback.positive.foreground.subtle,
                 },
                 invalid: {
-                    color: theme.components.text.colorInvalid,
+                    color: theme.color.feedback.danger.foreground.subtle,
                 },
                 initial: {},
             },

package/build/components/IconButton/IconButtonIcon.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Platform } from 'react-native';
-import { useIconButtonContext } from './IconButton.context';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
+import { useIconButtonContext } from './IconButton.context';
 const IconButtonIcon = (props) => {
     const { colorScheme, variant, inverted, disabled, size } = useIconButtonContext();
     styles.useVariants({
@@ -27,10 +27,10 @@ const styles = StyleSheet.create(theme => ({
                 ghost: {},
             },
             colorScheme: {
-                yellow: {},
-                red: {},
-                green: {},
-                grey: {},
+                highlight: {},
+                destructive: {},
+                affirmative: {},
+                functional: {},
             },
             inverted: {
                 true: {},
@@ -52,88 +52,88 @@ const styles = StyleSheet.create(theme => ({
         compoundVariants: [
             {
                 variant: 'emphasis',
-                colorScheme: 'yellow',
+                colorScheme: 'highlight',
                 styles: {
-                    color: theme.components.button.emphasis.yellow.foregroundColor,
+                    color: theme.color.interactive.highlight.foreground.strong,
                 },
             },
             {
                 variant: 'solid',
-                colorScheme: 'yellow',
+                colorScheme: 'highlight',
                 styles: {
-                    color: theme.components.button.solid.yellow.foregroundColor,
+                    color: theme.color.interactive.highlight.foreground.strong,
                 },
             },
             {
                 variant: 'solid',
-                colorScheme: 'red',
+                colorScheme: 'destructive',
                 styles: {
-                    color: theme.components.button.solid.red.foregroundColor,
+                    color: theme.color.interactive.destructive.foreground.strong,
                 },
             },
             {
                 variant: 'solid',
-                colorScheme: 'green',
+                colorScheme: 'affirmative',
                 styles: {
-                    color: theme.components.button.solid.green.foregroundColor,
+                    color: theme.color.interactive.affirmative.foreground.strong,
                 },
             },
             {
                 variant: 'outline',
-                colorScheme: 'red',
+                colorScheme: 'destructive',
                 styles: {
-                    color: theme.components.button.outline.red.foregroundColor,
+                    color: theme.color.interactive.destructive.foreground.subtle,
                 },
             },
             {
                 variant: 'outline',
-                colorScheme: 'green',
+                colorScheme: 'affirmative',
                 styles: {
-                    color: theme.components.button.outline.green.foregroundColor,
+                    color: theme.color.interactive.affirmative.foreground.subtle,
                 },
             },
             {
                 variant: 'outline',
-                colorScheme: 'grey',
+                colorScheme: 'functional',
                 styles: {
-                    color: theme.components.button.outline.grey.foregroundColor,
+                    color: theme.color.interactive.functional.foreground.subtle,
                 },
             },
             {
                 variant: 'outline',
-                colorScheme: 'grey',
+                colorScheme: 'functional',
                 inverted: true,
                 styles: {
-                    color: theme.components.button.outline.grey.inverted.foregroundColor,
+                    color: theme.color.interactive.functional.foreground.strong,
                 },
             },
             {
                 variant: 'ghost',
-                colorScheme: 'red',
+                colorScheme: 'destructive',
                 styles: {
-                    color: theme.components.button.ghost.red.foregroundColor,
+                    color: theme.color.interactive.destructive.foreground.subtle,
                 },
             },
             {
                 variant: 'ghost',
-                colorScheme: 'green',
+                colorScheme: 'affirmative',
                 styles: {
-                    color: theme.components.button.ghost.green.foregroundColor,
+                    color: theme.color.interactive.affirmative.foreground.subtle,
                 },
             },
             {
                 variant: 'ghost',
-                colorScheme: 'grey',
+                colorScheme: 'functional',
                 styles: {
-                    color: theme.components.button.outline.grey.foregroundColor,
+                    color: theme.color.interactive.functional.foreground.subtle,
                 },
             },
             {
                 variant: 'ghost',
-                colorScheme: 'grey',
+                colorScheme: 'functional',
                 inverted: true,
                 styles: {
-                    color: theme.components.button.outline.grey.inverted.foregroundColor,
+                    color: theme.color.interactive.functional.foreground.strong,
                 },
             },
         ],