@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

package/build/components/Button/ButtonSpinner.js

@@ -1,53 +1,50 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
+import { useTheme } from '../../hooks';
 import { Spinner } from '../Spinner';
 import { useButtonContext } from './Button.context';
-import { useTheme } from '../../hooks';
 const ButtonSpinner = ({ color, ...props }) => {
     const { colorScheme, variant, disabled, inverted } = useButtonContext();
-    const { components, colorMode } = useTheme();
+    const { color: themeColor, colorMode } = useTheme();
     const colorProp = useMemo(() => {
-        if (variant === 'emphasis' && colorScheme === 'yellow' && inverted) {
-            return components.button.emphasis.yellow.foregroundColor;
-        }
-        if (variant === 'emphasis' && colorScheme === 'yellow') {
-            return components.button.emphasis.yellow.foregroundColor;
+        if (variant === 'emphasis' && colorScheme === 'highlight') {
+            return themeColor.interactive.highlight.foreground.strong;
         }
-        if (variant === 'solid' && colorScheme === 'yellow' && inverted) {
-            return components.button.solid.yellow.inverted.foregroundColor;
+        if (variant === 'solid' && colorScheme === 'highlight') {
+            return themeColor.interactive.highlight.foreground.strong;
         }
-        if (variant === 'solid' && colorScheme === 'yellow') {
-            return components.button.solid.yellow.foregroundColor;
+        if (variant === 'solid' && colorScheme === 'destructive') {
+            return themeColor.interactive.destructive.foreground.strong;
         }
-        if (variant === 'solid' && colorScheme === 'red') {
-            return components.button.solid.red.foregroundColor;
+        if (variant === 'solid' && colorScheme === 'affirmative') {
+            return themeColor.interactive.affirmative.foreground.strong;
         }
-        if (variant === 'solid' && colorScheme === 'green') {
-            return components.button.solid.green.foregroundColor;
+        if (variant === 'outline' && colorScheme === 'destructive') {
+            return themeColor.interactive.destructive.foreground.subtle;
         }
-        if (variant === 'outline' && colorScheme === 'red') {
-            return components.button.outline.red.foregroundColor;
+        if (variant === 'outline' && colorScheme === 'affirmative') {
+            return themeColor.interactive.affirmative.foreground.subtle;
         }
-        if (variant === 'outline' && colorScheme === 'green') {
-            return components.button.outline.green.foregroundColor;
+        if (variant === 'outline' && colorScheme === 'functional' && inverted) {
+            return themeColor.interactive.functional.foreground.strong;
         }
-        if (variant === 'outline' && colorScheme === 'grey' && inverted) {
-            return components.button.outline.grey.inverted.foregroundColor;
+        if (variant === 'outline' && colorScheme === 'functional') {
+            return themeColor.interactive.functional.foreground.subtle;
         }
-        if (variant === 'outline' && colorScheme === 'grey') {
-            return components.button.outline.grey.foregroundColor;
+        if (variant === 'ghost' && colorScheme === 'destructive') {
+            return themeColor.interactive.destructive.foreground.subtle;
         }
-        if (variant === 'ghost' && colorScheme === 'red') {
-            return components.button.ghost.red.foregroundColor;
+        if (variant === 'ghost' && colorScheme === 'affirmative') {
+            return themeColor.interactive.affirmative.foreground.subtle;
         }
-        if (variant === 'ghost' && colorScheme === 'green') {
-            return components.button.ghost.green.foregroundColor;
+        if (variant === 'ghost' && colorScheme === 'functional' && inverted) {
+            return themeColor.interactive.functional.foreground.strong;
         }
-        if (variant === 'ghost' && colorScheme === 'grey' && inverted) {
-            return components.button.ghost.grey.inverted.foregroundColor;
+        if (variant === 'ghost' && colorScheme === 'functional') {
+            return themeColor.interactive.functional.foreground.subtle;
         }
-        if (variant === 'ghost' && colorScheme === 'grey') {
-            return components.button.ghost.grey.foregroundColor;
+        if (variant === 'ghost' && colorScheme === 'destructive') {
+            return themeColor.interactive.destructive.foreground.subtle;
         }
         return color;
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/build/components/Button/ButtonText.js

@@ -18,10 +18,10 @@ const styles = StyleSheet.create(theme => ({
                 ghost: {},
             },
             colorScheme: {
-                yellow: {},
-                red: {},
-                green: {},
-                grey: {},
+                highlight: {},
+                destructive: {},
+                affirmative: {},
+                functional: {},
             },
             inverted: {
                 true: {},
@@ -33,74 +33,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: 'functional',
+                styles: {
+                    color: theme.color.interactive.functional.foreground.subtle,
+                },
+            },
+            {
+                variant: 'outline',
+                colorScheme: 'functional',
+                inverted: true,
+                styles: {
+                    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: 'outline',
-                colorScheme: 'grey',
-                inverted: true,
+                variant: 'ghost',
+                colorScheme: 'functional',
                 styles: {
-                    color: theme.components.button.outline.grey.inverted.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,
                 },
             },
         ],

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

@@ -1,11 +1,11 @@
 import { PressableProps, ViewStyle } from 'react-native';
-import { SpaceValue } from '../../types';
+import { SpaceValue, SpacingValues } from '../../types';
 interface CardProps extends PressableProps {
     variant?: 'emphasis' | 'subtle';
-    colorScheme?: 'white' | 'warmWhite' | 'purple' | 'energyBlue' | 'broadbandGreen' | 'mobileRose' | 'insuranceOrange' | 'cashbackLilac' | 'piggyPink';
+    colorScheme?: 'neutralStrong' | 'neutralSubtle' | 'brand' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'pig';
     noPadding?: boolean;
     disabled?: boolean;
-    space?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    space?: SpacingValues;
     alignItems?: ViewStyle['alignItems'];
     justifyContent?: ViewStyle['justifyContent'];
     flexDirection?: ViewStyle['flexDirection'];

package/build/components/Card/CardRoot.js

@@ -24,7 +24,7 @@ const collectChildActionHandlers = (children) => React.Children.toArray(children
     }
     return handlers;
 }, []);
-const Card = ({ children, variant = 'subtle', colorScheme = 'white', noPadding = false, style, states, space, disabled = false, onPress, ...rest }) => {
+const Card = ({ children, variant = 'subtle', colorScheme = 'neutralStrong', noPadding = false, style, states, space, disabled = false, onPress, ...rest }) => {
     const { active } = states || { active: false };
     const childActionHandlers = collectChildActionHandlers(children);
     // Extract style props using our custom hook
@@ -62,39 +62,39 @@ const styles = StyleSheet.create(theme => ({
             variant: {
                 subtle: {
                     borderWidth: theme.components.card.neutral.subtle.borderWidth,
-                    borderColor: theme.components.card.neutral.subtle.borderColor,
+                    borderColor: theme.color.border.subtle,
                 },
                 emphasis: {
                     borderWidth: theme.components.card.neutral.emphasis.borderWidth,
-                    borderColor: theme.components.card.neutral.emphasis.borderColor,
+                    borderColor: theme.color.border.strong,
                 },
             },
             colorScheme: {
-                white: {
-                    backgroundColor: theme.components.card.neutral.whiteBackgroundColor,
+                neutralStrong: {
+                    backgroundColor: theme.color.surface.neutral.strong,
                 },
-                warmWhite: {
-                    backgroundColor: theme.components.card.neutral.warmWhiteBackgroundColor,
+                neutralSubtle: {
+                    backgroundColor: theme.color.surface.neutral.subtle,
                 },
-                purple: {
+                brand: {
                     borderWidth: theme.components.card.brand.borderWidth,
                 },
-                energyBlue: {
+                energy: {
                     borderWidth: theme.components.card.brand.borderWidth,
                 },
-                broadbandGreen: {
+                broadband: {
                     borderWidth: theme.components.card.brand.borderWidth,
                 },
-                mobileRose: {
+                mobile: {
                     borderWidth: theme.components.card.brand.borderWidth,
                 },
-                insuranceOrange: {
+                insurance: {
                     borderWidth: theme.components.card.brand.borderWidth,
                 },
-                cashbackLilac: {
+                cashback: {
                     borderWidth: theme.components.card.brand.borderWidth,
                 },
-                piggyPink: {
+                pig: {
                     borderWidth: theme.components.card.brand.borderWidth,
                 },
             },
@@ -128,114 +128,114 @@ const styles = StyleSheet.create(theme => ({
         compoundVariants: [
             {
                 variant: 'subtle',
-                colorScheme: 'purple',
+                colorScheme: 'brand',
                 styles: {
-                    backgroundColor: theme.components.card.brand.subtle.purpleBackgroundColor,
-                    borderColor: theme.components.card.brand.subtle.borderColor,
+                    backgroundColor: theme.color.surface.brand.subtle,
+                    borderColor: theme.color.border.strong,
                 },
             },
             {
                 variant: 'emphasis',
-                colorScheme: 'purple',
+                colorScheme: 'brand',
                 styles: {
-                    backgroundColor: theme.components.card.brand.emphasis.purpleBackgroundColor,
-                    borderColor: theme.components.card.brand.emphasis.borderColor,
+                    backgroundColor: theme.color.surface.brand.default,
+                    borderColor: theme.color.border.strong,
                 },
             },
             {
                 variant: 'subtle',
-                colorScheme: 'energyBlue',
+                colorScheme: 'energy',
                 styles: {
-                    backgroundColor: theme.components.card.brand.subtle.energyBlueBackgroundColor,
-                    borderColor: theme.components.card.brand.subtle.borderColor,
+                    backgroundColor: theme.color.surface.energy.subtle,
+                    borderColor: theme.color.border.strong,
                 },
             },
             {
                 variant: 'emphasis',
-                colorScheme: 'energyBlue',
+                colorScheme: 'energy',
                 styles: {
-                    backgroundColor: theme.components.card.brand.emphasis.energyBlueBackgroundColor,
-                    borderColor: theme.components.card.brand.emphasis.borderColor,
+                    backgroundColor: theme.color.surface.energy.default,
+                    borderColor: theme.color.border.strong,
                 },
             },
             {
                 variant: 'subtle',
-                colorScheme: 'broadbandGreen',
+                colorScheme: 'broadband',
                 styles: {
-                    backgroundColor: theme.components.card.brand.subtle.broadbandGreenBackgroundColor,
-                    borderColor: theme.components.card.brand.subtle.borderColor,
+                    backgroundColor: theme.color.surface.broadband.subtle,
+                    borderColor: theme.color.border.strong,
                 },
             },
             {
                 variant: 'emphasis',
-                colorScheme: 'broadbandGreen',
+                colorScheme: 'broadband',
                 styles: {
-                    backgroundColor: theme.components.card.brand.emphasis.broadbandGreenBackgroundColor,
-                    borderColor: theme.components.card.brand.emphasis.borderColor,
+                    backgroundColor: theme.color.surface.broadband.default,
+                    borderColor: theme.color.border.strong,
                 },
             },
             {
                 variant: 'subtle',
-                colorScheme: 'mobileRose',
+                colorScheme: 'mobile',
                 styles: {
-                    backgroundColor: theme.components.card.brand.subtle.mobileRoseBackgroundColor,
-                    borderColor: theme.components.card.brand.subtle.borderColor,
+                    backgroundColor: theme.color.surface.mobile.subtle,
+                    borderColor: theme.color.border.strong,
                 },
             },
             {
                 variant: 'emphasis',
-                colorScheme: 'mobileRose',
+                colorScheme: 'mobile',
                 styles: {
-                    backgroundColor: theme.components.card.brand.emphasis.mobileRoseBackgroundColor,
-                    borderColor: theme.components.card.brand.emphasis.borderColor,
+                    backgroundColor: theme.color.surface.mobile.default,
+                    borderColor: theme.color.border.strong,
                 },
             },
             {
                 variant: 'subtle',
-                colorScheme: 'insuranceOrange',
+                colorScheme: 'insurance',
                 styles: {
-                    backgroundColor: theme.components.card.brand.subtle.insuranceOrangeBackgroundColor,
-                    borderColor: theme.components.card.brand.subtle.borderColor,
+                    backgroundColor: theme.color.surface.insurance.subtle,
+                    borderColor: theme.color.border.strong,
                 },
             },
             {
                 variant: 'emphasis',
-                colorScheme: 'insuranceOrange',
+                colorScheme: 'insurance',
                 styles: {
-                    backgroundColor: theme.components.card.brand.emphasis.insuranceOrangeBackgroundColor,
-                    borderColor: theme.components.card.brand.emphasis.borderColor,
+                    backgroundColor: theme.color.surface.insurance.default,
+                    borderColor: theme.color.border.strong,
                 },
             },
             {
                 variant: 'subtle',
-                colorScheme: 'cashbackLilac',
+                colorScheme: 'cashback',
                 styles: {
-                    backgroundColor: theme.components.card.brand.subtle.cashbackLilacBackgroundColor,
-                    borderColor: theme.components.card.brand.subtle.borderColor,
+                    backgroundColor: theme.color.surface.cashback.subtle,
+                    borderColor: theme.color.border.strong,
                 },
             },
             {
                 variant: 'emphasis',
-                colorScheme: 'cashbackLilac',
+                colorScheme: 'cashback',
                 styles: {
-                    backgroundColor: theme.components.card.brand.emphasis.cashbackLilacBackgroundColor,
-                    borderColor: theme.components.card.brand.emphasis.borderColor,
+                    backgroundColor: theme.color.surface.cashback.default,
+                    borderColor: theme.color.border.strong,
                 },
             },
             {
                 variant: 'subtle',
-                colorScheme: 'piggyPink',
+                colorScheme: 'pig',
                 styles: {
-                    backgroundColor: theme.components.card.brand.subtle.piggyPinkBackgroundColor,
-                    borderColor: theme.components.card.brand.subtle.borderColor,
+                    backgroundColor: theme.color.surface.pig.subtle,
+                    borderColor: theme.color.border.strong,
                 },
             },
             {
                 variant: 'emphasis',
-                colorScheme: 'piggyPink',
+                colorScheme: 'pig',
                 styles: {
-                    backgroundColor: theme.components.card.brand.emphasis.piggyPinkBackgroundColor,
-                    borderColor: theme.components.card.brand.emphasis.borderColor,
+                    backgroundColor: theme.color.surface.pig.default,
+                    borderColor: theme.color.border.strong,
                 },
             },
         ],

package/build/components/Checkbox/CheckboxIcon.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Icon } from '../Icon';
 import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { StyleSheet } from 'react-native-unistyles';
 import { Platform } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Icon } from '../Icon';
 const CheckboxIcon = ({ style, ...props }) => {
     return (_jsx(Icon, { as: TickSmallIcon, ...props, style: Platform.OS === 'web'
             ? StyleSheet.compose(styles.icon, style)
@@ -10,7 +10,7 @@ const CheckboxIcon = ({ style, ...props }) => {
 };
 const styles = StyleSheet.create(theme => ({
     icon: {
-        color: theme.components.checkbox.checked.iconColor,
+        color: theme.color.icon.inverted,
     },
 }));
 CheckboxIcon.displayName = 'CheckboxIcon';

package/build/components/Checkbox/CheckboxIndicator.js

@@ -17,8 +17,8 @@ const styles = StyleSheet.create(theme => ({
     container: {
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: theme.components.checkbox.unchecked.backgroundColor,
-        borderColor: theme.components.checkbox.unchecked.borderColor,
+        backgroundColor: theme.color.surface.neutral.strong,
+        borderColor: theme.color.border.strong,
         borderWidth: theme.components.checkbox.borderWidth,
         borderRadius: theme.components.checkbox.borderRadius,
         width: 24,
@@ -40,7 +40,7 @@ const styles = StyleSheet.create(theme => ({
         variants: {
             checked: {
                 true: {
-                    borderColor: theme.components.checkbox.checked.borderColor,
+                    borderColor: theme.color.border.strong,
                     backgroundColor: theme.components.checkbox.checked.backgroundColor,
                 },
             },

package/build/components/Checkbox/CheckboxTileRoot.js

@@ -18,14 +18,14 @@ const styles = StyleSheet.create(theme => ({
         gap: theme.components.checkbox.gap,
         padding: theme.components.checkbox.tile.padding,
         borderWidth: theme.components.checkbox.tile.borderWidth,
-        borderColor: theme.components.checkbox.tile.borderColor,
+        borderColor: theme.color.border.subtle,
         borderRadius: theme.components.checkbox.tile.borderRadius,
-        backgroundColor: theme.components.checkbox.tile.backgroundColor,
+        backgroundColor: theme.color.surface.neutral.strong,
         variants: {
             checked: {
                 true: {
                     borderWidth: theme.components.checkbox.tile.borderWidthSelected,
-                    borderColor: theme.components.checkbox.tile.borderColorSelected,
+                    borderColor: theme.color.border.strong,
                     margin: -theme.components.checkbox.tile.borderWidthSelected / 2,
                 },
             },

package/build/components/CurrencyInput/CurrencyInput.d.ts

@@ -0,0 +1,6 @@
+import type CurrencyInputProps from './CurrencyInput.props';
+declare const CurrencyInput: {
+    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, required, autoFormatThousands, value, onChangeText, ...rest }: CurrencyInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default CurrencyInput;

package/build/components/CurrencyInput/CurrencyInput.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Platform } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { formatThousands } from '../../utils';
+import { DetailText } from '../DetailText';
+import { useFormFieldContext } from '../FormField';
+import { Input, InputField, InputSlot } from '../Input';
+const CurrencyInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder, inBottomSheet = false, required, autoFormatThousands = false, value, onChangeText, ...rest }) => {
+    const formFieldContext = useFormFieldContext();
+    const { disabled: formFieldDisabled } = formFieldContext;
+    const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
+    const defaultFormat = '0.00';
+    const getPlaceholder = placeholder ?? defaultFormat;
+    const handleChangeText = (text) => {
+        if (autoFormatThousands) {
+            const formatted = formatThousands(text);
+            onChangeText?.(formatted);
+        }
+        else {
+            onChangeText?.(text);
+        }
+    };
+    const displayValue = autoFormatThousands && typeof value === 'string' ? formatThousands(value) : value;
+    return (_jsxs(Input, { validationStatus: validationStatusFromContext, disabled: formFieldDisabled ?? disabled, readonly: readonly, focused: focused, style: styles.wrap, children: [_jsx(InputSlot, { children: _jsx(DetailText, { size: "4xl", style: styles.text, children: "\u00A3" }) }), _jsx(InputField, { inputMode: "decimal", inBottomSheet: inBottomSheet, ...rest, placeholder: getPlaceholder, keyboardType: "decimal-pad", style: styles.input, value: displayValue, onChangeText: handleChangeText })] }));
+};
+CurrencyInput.displayName = 'CurrencyInput';
+const styles = StyleSheet.create(theme => ({
+    wrap: {
+        height: theme.components.input.currency.height,
+        gap: theme.components.input.currency.gap,
+    },
+    text: {
+        ...(Platform.OS === 'ios' && { lineHeight: 46 }),
+        _web: {
+            marginTop: 1,
+        },
+    },
+    input: {
+        fontSize: theme.typography.mobile.detailText['4xl'].fontSize,
+        fontFamily: theme.typography.mobile.detailText.fontFamily,
+        fontWeight: theme.typography.mobile.detailText.fontWeight,
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+    },
+}));
+export default CurrencyInput;

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

@@ -0,0 +1,14 @@
+import type { TextInputProps, ViewProps } from 'react-native';
+export interface CurrencyInputBaseProps {
+    disabled?: boolean;
+    validationStatus?: 'initial' | 'valid' | 'invalid';
+    readonly?: boolean;
+    focused?: boolean;
+    placeholder?: string;
+    inBottomSheet?: boolean;
+    required?: boolean;
+    /** When true, automatically formats the numeric value with thousand separators (e.g. 1234 -> 1,234). */
+    autoFormatThousands?: boolean;
+}
+export type CurrencyInputProps = CurrencyInputBaseProps & Omit<TextInputProps, 'children'> & ViewProps;
+export default CurrencyInputProps;

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

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

package/build/components/CurrencyInput/index.js

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

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

@@ -0,0 +1,6 @@
+export interface DescriptionListContextValue {
+    direction: 'row' | 'column';
+    itemHeadingWidth?: number;
+}
+export declare const DescriptionListContext: import("react").Context<DescriptionListContextValue | undefined>;
+export declare const useDescriptionListContext: () => DescriptionListContextValue;

package/build/components/DescriptionList/DescriptionList.context.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export const DescriptionListContext = createContext(undefined);
+export const useDescriptionListContext = () => {
+    const ctx = useContext(DescriptionListContext);
+    if (!ctx) {
+        throw new Error('DescriptionListItem must be used within a DescriptionList');
+    }
+    return ctx;
+};

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

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

package/build/components/DescriptionList/DescriptionList.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { SectionHeader } from '../SectionHeader';
+import { DescriptionListContext } from './DescriptionList.context';
+const DescriptionList = ({ direction = 'column', itemHeadingWidth, heading, helperText, linkText, linkHref, linkIcon, linkIconPosition, linkOnPress, linkTarget, linkShowIcon, children, style, ...props }) => {
+    styles.useVariants({ direction });
+    const value = useMemo(() => ({ direction, itemHeadingWidth }), [direction, itemHeadingWidth]);
+    return (_jsx(DescriptionListContext.Provider, { value: value, children: _jsxs(View, { accessibilityRole: "list", ...props, style: [styles.container, style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, linkText: linkText, linkHref: linkHref, linkIcon: linkIcon, linkIconPosition: linkIconPosition, linkOnPress: linkOnPress, linkTarget: linkTarget, linkShowIcon: linkShowIcon })) : null, children] }) }));
+};
+DescriptionList.displayName = 'DescriptionList';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        width: theme.space.full,
+        gap: theme.components.descriptionList.gap,
+        variants: {
+            direction: {
+                row: {},
+                column: {},
+            },
+        },
+    },
+}));
+export default DescriptionList;