@utilitywarehouse/hearth-react-native 0.2.0 → 0.3.1

package/build/components/Badge/BadgeText.js

@@ -3,9 +3,9 @@ import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { useBadgeContext } from './Badge.context';
 const BadgeText = ({ children, style, ...props }) => {
-    const { variant, colorScheme } = useBadgeContext();
+    const { variant, colorScheme, size } = useBadgeContext();
     styles.useVariants({ variant, colorScheme });
-    return (_jsx(BodyText, { ...props, size: "md", weight: "semibold", style: [styles.text, style], children: children }));
+    return (_jsx(BodyText, { ...props, size: size, weight: "semibold", style: [styles.text, style], children: children }));
 };
 BadgeText.displayName = 'BadgeText';
 const styles = StyleSheet.create(theme => ({
@@ -23,91 +23,89 @@ const styles = StyleSheet.create(theme => ({
                 insurance: {},
                 cashback: {},
                 pig: {},
+                highlight: {},
             },
             variant: {
-                solid: {
+                emphasis: {
+                    color: theme.color.text.primary,
+                },
+                subtle: {
                     color: theme.color.text.primary,
                 },
                 outline: {},
             },
         },
         compoundVariants: [
-            // Solid
+            // Emphasis
             {
                 colorScheme: 'info',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     color: theme.color.feedback.info.foreground.default,
                 },
             },
             {
                 colorScheme: 'danger',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     color: theme.color.feedback.danger.foreground.default,
                 },
             },
             {
                 colorScheme: 'positive',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     color: theme.color.feedback.positive.foreground.default,
                 },
             },
             {
                 colorScheme: 'warning',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     color: theme.color.feedback.warning.foreground.default,
                 },
             },
             {
                 colorScheme: 'functional',
-                variant: 'solid',
+                variant: 'emphasis',
                 styles: {
                     color: theme.color.feedback.functional.foreground.default,
                 },
             },
+            // Subtle
             {
-                colorScheme: 'energy',
-                variant: 'solid',
-                styles: {
-                    color: theme.color.text.primary,
-                },
-            },
-            {
-                colorScheme: 'broadband',
-                variant: 'solid',
+                colorScheme: 'info',
+                variant: 'subtle',
                 styles: {
-                    color: theme.color.text.primary,
+                    color: theme.color.feedback.info.foreground.default,
                 },
             },
             {
-                colorScheme: 'mobile',
-                variant: 'solid',
+                colorScheme: 'danger',
+                variant: 'subtle',
                 styles: {
-                    color: theme.color.text.primary,
+                    color: theme.color.feedback.danger.foreground.default,
                 },
             },
             {
-                colorScheme: 'insurance',
-                variant: 'solid',
+                colorScheme: 'positive',
+                variant: 'subtle',
                 styles: {
-                    color: theme.color.text.primary,
+                    color: theme.color.feedback.positive.foreground.default,
                 },
             },
             {
-                colorScheme: 'cashback',
-                variant: 'solid',
+                colorScheme: 'warning',
+                variant: 'subtle',
                 styles: {
-                    color: theme.color.text.primary,
+                    color: theme.color.feedback.warning.foreground.default,
                 },
             },
             {
-                colorScheme: 'pig',
-                variant: 'solid',
+                colorScheme: 'functional',
+                variant: 'subtle',
                 styles: {
-                    color: theme.color.text.primary,
+                    color: theme.color.feedback.functional.foreground.default,
                 },
             },
             // Outline

package/build/components/Button/Button.d.ts

@@ -6,12 +6,12 @@ export declare const ButtonGroupComponent: import("react").ForwardRefExoticCompo
     flexDirection?: import("react-native").ViewStyle["flexDirection"];
     reversed?: boolean;
     attached?: boolean;
-    space?: "xs" | "sm" | "md" | "lg" | "xl";
+    space?: import("../../types").SpacingValues;
 }> & import("react-native").ViewProps & {
     flexDirection?: import("react-native").ViewStyle["flexDirection"];
     reversed?: boolean;
     attached?: boolean;
-    space?: "xs" | "sm" | "md" | "lg" | "xl";
+    space?: import("../../types").SpacingValues;
 } & import("@gluestack-ui/button/lib/typescript/types").IButtonGroupProps>;
 declare const Button: {
     ({ children, disabled, pressed, text, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/build/components/Button/ButtonGroupRoot.d.ts

@@ -1,10 +1,11 @@
-import { type ViewStyle, type ViewProps } from 'react-native';
+import { type ViewProps, type ViewStyle } from 'react-native';
+import { SpacingValues } from '../../types';
 declare const ButtonGroupRoot: {
     ({ children, attached, flexDirection, reversed, space, ...props }: ViewProps & {
         flexDirection?: ViewStyle["flexDirection"];
         reversed?: boolean;
         attached?: boolean;
-        space?: "xs" | "sm" | "md" | "lg" | "xl";
+        space?: SpacingValues;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/build/components/Button/ButtonGroupRoot.js

@@ -24,6 +24,12 @@ const styles = StyleSheet.create(theme => ({
     text: {
         variants: {
             space: {
+                none: {
+                    gap: theme.layout.mobile.spacing.none,
+                },
+                '2xs': {
+                    gap: theme.layout.mobile.spacing['2xs'],
+                },
                 xs: {
                     gap: theme.layout.mobile.spacing.xs,
                 },
@@ -39,6 +45,9 @@ const styles = StyleSheet.create(theme => ({
                 xl: {
                     gap: theme.layout.mobile.spacing.xl,
                 },
+                '2xl': {
+                    gap: theme.layout.mobile.spacing['2xl'],
+                },
             },
             attached: {
                 true: {

package/build/components/Button/ButtonRoot.js

@@ -177,6 +177,7 @@ const styles = StyleSheet.create(theme => ({
                 colorScheme: 'affirmative',
                 styles: {
                     backgroundColor: theme.color.interactive.affirmative.surface.strong.default,
+                    borderColor: theme.color.interactive.affirmative.border.strong,
                     _web: {
                         _hover: {
                             backgroundColor: theme.color.interactive.affirmative.surface.strong.hover,

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?: '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/Checkbox/Checkbox.d.ts

@@ -10,12 +10,12 @@ declare const CheckboxIcon: import("react").ForwardRefExoticComponent<import("re
 }>;
 declare const CheckboxLabel: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("../Label/Label.props").default> & Omit<import("../Label/Label.props").default, "ref">>;
 declare const Checkbox: {
-    ({ children, label, disabled, checked, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, label, disabled, checked, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type, image, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 declare const CheckboxTile: {
     ({ type, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export { Checkbox, CheckboxGroup, CheckboxIndicator, CheckboxIcon, CheckboxLabel, CheckboxTile };
+export { Checkbox, CheckboxGroup, CheckboxIcon, CheckboxIndicator, CheckboxLabel, CheckboxTile };
 export default Checkbox;

package/build/components/Checkbox/Checkbox.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createCheckbox } from '@gluestack-ui/checkbox';
-import StyledCheckbox from './CheckboxRoot';
-import StyledCheckboxIndicator from './CheckboxIndicator';
-import StyledCheckboxIcon from './CheckboxIcon';
-import StyledCheckboxLabel from './CheckboxLabel';
-import StyledCheckboxGroup from './CheckboxGroupRoot';
+import { useFormFieldContext } from '../FormField';
 import { Helper } from '../Helper';
 import { useCheckboxGroupContext } from './CheckboxGroup.context';
-import { useFormFieldContext } from '../FormField';
-import CheckboxTileRoot from './CheckboxTileRoot';
+import StyledCheckboxGroup from './CheckboxGroupRoot';
+import StyledCheckboxIcon from './CheckboxIcon';
+import CheckboxImage from './CheckboxImage';
+import StyledCheckboxIndicator from './CheckboxIndicator';
+import StyledCheckboxLabel from './CheckboxLabel';
+import StyledCheckbox from './CheckboxRoot';
 import CheckboxTextContent from './CheckboxTextContent';
+import CheckboxTileRoot from './CheckboxTileRoot';
 const CheckboxComponent = createCheckbox({
     Root: StyledCheckbox,
     Group: StyledCheckboxGroup,
@@ -25,12 +26,12 @@ CheckboxGroup.displayName = 'CheckboxGroup';
 CheckboxIndicator.displayName = 'CheckboxIndicator';
 CheckboxIcon.displayName = 'CheckboxIcon';
 CheckboxLabel.displayName = 'CheckboxLabel';
-const Checkbox = ({ children, label, disabled, checked, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type = 'default', ...props }) => {
+const Checkbox = ({ children, label, disabled, checked, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type = 'default', image, ...props }) => {
     const { validationStatus: fieldValidationStatus } = useFormFieldContext();
     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, {}) }), _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 ? _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 }))] })] }));
     return (
     // @ts-expect-error - type
     _jsx(CheckboxComponent, { ...props, isDisabled: disabled, isChecked: checked, children: checkboxType === 'tile' ? (_jsx(CheckboxTileRoot, { children: checkboxChildren })) : (checkboxChildren) }));
@@ -40,5 +41,5 @@ const CheckboxTile = ({ type = 'tile', ...props }) => {
 };
 CheckboxTile.displayName = 'CheckboxTile';
 Checkbox.displayName = 'Checkbox';
-export { Checkbox, CheckboxGroup, CheckboxIndicator, CheckboxIcon, CheckboxLabel, CheckboxTile };
+export { Checkbox, CheckboxGroup, CheckboxIcon, CheckboxIndicator, CheckboxLabel, CheckboxTile };
 export default Checkbox;

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

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

package/build/components/Checkbox/CheckboxIcon.js

@@ -10,7 +10,7 @@ const CheckboxIcon = ({ style, ...props }) => {
 };
 const styles = StyleSheet.create(theme => ({
     icon: {
-        color: theme.color.icon.inverted,
+        color: theme.components.checkbox.checked.icon.color,
     },
 }));
 CheckboxIcon.displayName = 'CheckboxIcon';

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

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

package/build/components/Checkbox/CheckboxImage.js

@@ -0,0 +1,5 @@
+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 }));
+CheckboxImage.displayName = 'CheckboxImage';
+export default CheckboxImage;

package/build/components/Checkbox/CheckboxTileRoot.js

@@ -18,7 +18,7 @@ const styles = StyleSheet.create(theme => ({
         gap: theme.components.checkbox.gap,
         padding: theme.components.checkbox.tile.padding,
         borderWidth: theme.components.checkbox.tile.borderWidth,
-        borderColor: theme.color.border.subtle,
+        borderColor: theme.color.border.strong,
         borderRadius: theme.components.checkbox.tile.borderRadius,
         backgroundColor: theme.color.surface.neutral.strong,
         variants: {

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

@@ -1,5 +1,6 @@
-export { default as Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon, CheckboxTile, } from './Checkbox';
+export { default as Checkbox, CheckboxIcon, CheckboxIndicator, CheckboxLabel, CheckboxTile, } from './Checkbox';
+export type { default as CheckboxProps } from './Checkbox.props';
 export { default as CheckboxGroup } from './CheckboxGroup';
 export { default as CheckboxGroupTextContent } from './CheckboxGroupTextContent';
+export { default as CheckboxImage } from './CheckboxImage';
 export { default as CheckboxTextContent } from './CheckboxTextContent';
-export type { default as CheckboxProps } from './Checkbox.props';

package/build/components/Checkbox/index.js

@@ -1,4 +1,5 @@
-export { default as Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon, CheckboxTile, } from './Checkbox';
+export { default as Checkbox, CheckboxIcon, CheckboxIndicator, CheckboxLabel, CheckboxTile, } from './Checkbox';
 export { default as CheckboxGroup } from './CheckboxGroup';
 export { default as CheckboxGroupTextContent } from './CheckboxGroupTextContent';
+export { default as CheckboxImage } from './CheckboxImage';
 export { default as CheckboxTextContent } from './CheckboxTextContent';

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/CurrencyInput.props.js

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

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;

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/DescriptionList.props.js

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

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';