@ovotech/element-native 5.5.0 → 5.7.0

package/dist/components/ActionList/Action.d.ts

@@ -0,0 +1,23 @@
+import React, { PropsWithChildren } from 'react';
+import { AccessibilityRole, TouchableOpacityProps, View } from 'react-native';
+import { IconName } from '../../providers';
+import { SemanticVariants } from '../Badge';
+type ActionProps = PropsWithChildren<TouchableOpacityProps & {
+    accessibilityRole?: AccessibilityRole;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    iconLeft?: IconName;
+    iconRight?: IconName;
+    inverted?: boolean;
+    onPress?: () => void;
+    fullWidth?: boolean;
+    testID?: string;
+    inList?: boolean;
+    standalone?: boolean;
+    badgeText?: string;
+    badgeVariant?: SemanticVariants;
+    hint?: string;
+    ref?: React.RefObject<View | null>;
+}>;
+declare const Action: ({ accessibilityRole, accessibilityLabel, accessibilityHint, children, fullWidth, inverted, onPress, testID, iconLeft, iconRight, standalone, badgeVariant, badgeText, hint, ref, ...rest }: ActionProps) => import("react/jsx-runtime").JSX.Element;
+export { Action };

package/dist/components/ActionList/Action.js

@@ -0,0 +1,29 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Action = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const hooks_1 = require("../../hooks");
+const Badge_1 = require("../Badge");
+const styled_1 = require("./styled");
+const ActionWrapper = (_a) => {
+    var { children, accessibilityRole, accessibilityLabel, accessibilityHint, activeOpacity = 0.75, fullWidth, hasBorder = false, inverted = false, inList, onPress, testID, standalone = false, ref } = _a, rest = __rest(_a, ["children", "accessibilityRole", "accessibilityLabel", "accessibilityHint", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inList", "onPress", "testID", "standalone", "ref"]);
+    return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionWrapper, Object.assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID, inList: inList }, rest, { children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: onPress, children: (0, jsx_runtime_1.jsx)(styled_1.StyledActionInner, { fullWidth: fullWidth, inList: inList, standalone: standalone, children: children }) }) })));
+};
+const Action = (_a) => {
+    var { accessibilityRole = 'link', accessibilityLabel, accessibilityHint, children, fullWidth = false, inverted = false, onPress, testID, iconLeft, iconRight, standalone = false, badgeVariant = 'info', badgeText, hint, ref } = _a, rest = __rest(_a, ["accessibilityRole", "accessibilityLabel", "accessibilityHint", "children", "fullWidth", "inverted", "onPress", "testID", "iconLeft", "iconRight", "standalone", "badgeVariant", "badgeText", "hint", "ref"]);
+    const { smallAndUp } = (0, hooks_1.useBreakpoint)();
+    return ((0, jsx_runtime_1.jsxs)(ActionWrapper, Object.assign({ ref: ref, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, fullWidth: fullWidth, inverted: inverted, onPress: onPress, testID: testID, standalone: standalone, hint: hint, badgeText: badgeText }, rest, { children: [iconLeft ? ((0, jsx_runtime_1.jsx)(styled_1.StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [typeof children === 'string' ? ((0, jsx_runtime_1.jsxs)(styled_1.StyledTextWrapper, { children: [(0, jsx_runtime_1.jsx)(styled_1.StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, children: children }), badgeText ? ((0, jsx_runtime_1.jsx)(Badge_1.Badge, { variant: badgeVariant, children: badgeText })) : null] })) : ((0, jsx_runtime_1.jsx)(styled_1.StyledActionNodeWrapper, { children: children })), hint ? ((0, jsx_runtime_1.jsx)(styled_1.StyledHintText, { inverted: inverted, children: hint })) : null] }), iconRight ? ((0, jsx_runtime_1.jsx)(styled_1.StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
+};
+exports.Action = Action;

package/dist/components/ActionList/ActionList.d.ts

@@ -1,28 +1,12 @@
-import React, { PropsWithChildren } from 'react';
-import { AccessibilityRole, TouchableOpacityProps, View, ViewProps } from 'react-native';
-import { IconName } from '../../providers';
-import { SemanticVariants } from '../Badge';
-type ActionListProps = ViewProps & {
-    inverted?: boolean;
-    borderBottom?: boolean;
+import { ViewProps } from 'react-native';
+import { IconNameExtended } from '../../providers';
+type ActionListBaseProps = ViewProps & {
+    iconColor?: string;
 };
-type ActionProps = PropsWithChildren<TouchableOpacityProps & {
-    accessibilityRole?: AccessibilityRole;
-    accessibilityLabel?: string;
-    accessibilityHint?: string;
-    iconLeft?: IconName;
-    iconRight?: IconName;
-    inverted?: boolean;
-    onPress?: () => void;
-    fullWidth?: boolean;
-    testID?: string;
-    inList?: boolean;
-    standalone?: boolean;
-    badgeText?: string;
-    badgeVariant?: SemanticVariants;
-    hint?: string;
-    ref?: React.RefObject<View | null>;
-}>;
-declare const ActionList: ({ children, inverted, borderBottom, ...rest }: ActionListProps) => import("react/jsx-runtime").JSX.Element;
-declare const Action: ({ accessibilityRole, accessibilityLabel, accessibilityHint, children, fullWidth, inverted, onPress, testID, iconLeft, iconRight, standalone, badgeVariant, badgeText, hint, ref, ...rest }: ActionProps) => import("react/jsx-runtime").JSX.Element;
-export { Action, ActionList };
+type ActionListProps = ActionListBaseProps & {
+    iconName?: IconNameExtended;
+    heading?: string;
+    subheading?: string;
+};
+export declare const ActionList: ({ children, iconName, iconColor, heading, subheading, ...rest }: ActionListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ActionList/ActionList.js

@@ -11,38 +11,22 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionList = exports.Action = void 0;
+exports.ActionList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
-const hooks_1 = require("../../hooks");
 const utils_1 = require("../../utils");
-const Badge_1 = require("../Badge");
+const Divider_1 = require("../Divider");
+const ActionListHeading_1 = require("./components/ActionListHeading");
 const styled_1 = require("./styled");
 const ActionList = (_a) => {
-    var { children, inverted, borderBottom } = _a, rest = __rest(_a, ["children", "inverted", "borderBottom"]);
+    var { children, iconName, iconColor, heading, subheading } = _a, rest = __rest(_a, ["children", "iconName", "iconColor", "heading", "subheading"]);
     const validChildren = (0, utils_1.getValidChildren)(children);
     const childCount = react_1.Children.count(validChildren);
-    return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionList, Object.assign({}, rest, { children: react_1.Children.map(validChildren, (child, index) => {
-            var _a, _b;
-            return (0, react_1.cloneElement)(child, {
-                fullWidth: true,
-                index,
-                hasBorder: (childCount > 1 && index !== childCount - 1) || borderBottom,
-                inverted: (_a = child.props.inverted) !== null && _a !== void 0 ? _a : inverted, // prioritise child prop
-                inList: true,
-                iconRight: (_b = child.props.iconRight) !== null && _b !== void 0 ? _b : 'chevron-right-small',
-            });
-        }) })));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(ActionListHeading_1.ActionListHeading, { iconName: iconName, heading: heading, subheading: subheading, iconColor: iconColor }), (0, jsx_runtime_1.jsx)(styled_1.StyledActionList, Object.assign({}, rest, { children: react_1.Children.map(validChildren, (child, index) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, react_1.cloneElement)(child, {
+                            fullWidth: true,
+                            index,
+                            inList: true,
+                        }), childCount > 1 && index !== childCount - 1 && (0, jsx_runtime_1.jsx)(Divider_1.Divider, {})] }))) }))] }));
 };
 exports.ActionList = ActionList;
-const ActionWrapper = (_a) => {
-    var { children, accessibilityRole, accessibilityLabel, accessibilityHint, activeOpacity = 0.75, fullWidth, hasBorder = false, inverted = false, inList, onPress, testID, standalone = false, ref } = _a, rest = __rest(_a, ["children", "accessibilityRole", "accessibilityLabel", "accessibilityHint", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inList", "onPress", "testID", "standalone", "ref"]);
-    return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionWrapper, Object.assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID, inList: inList }, rest, { children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: onPress, children: (0, jsx_runtime_1.jsx)(styled_1.StyledActionInner, { fullWidth: fullWidth, inList: inList, standalone: standalone, children: children }) }) })));
-};
-const Action = (_a) => {
-    var { accessibilityRole = 'link', accessibilityLabel, accessibilityHint, children, fullWidth = false, inverted = false, onPress, testID, iconLeft, iconRight, standalone = false, badgeVariant = 'info', badgeText, hint, ref } = _a, rest = __rest(_a, ["accessibilityRole", "accessibilityLabel", "accessibilityHint", "children", "fullWidth", "inverted", "onPress", "testID", "iconLeft", "iconRight", "standalone", "badgeVariant", "badgeText", "hint", "ref"]);
-    const { smallAndUp } = (0, hooks_1.useBreakpoint)();
-    return ((0, jsx_runtime_1.jsxs)(ActionWrapper, Object.assign({ ref: ref, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, fullWidth: fullWidth, inverted: inverted, onPress: onPress, testID: testID, standalone: standalone, hint: hint, badgeText: badgeText }, rest, { children: [iconLeft ? ((0, jsx_runtime_1.jsx)(styled_1.StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [typeof children === 'string' ? ((0, jsx_runtime_1.jsxs)(styled_1.StyledTextWrapper, { children: [(0, jsx_runtime_1.jsx)(styled_1.StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, children: children }), badgeText ? ((0, jsx_runtime_1.jsx)(Badge_1.Badge, { variant: badgeVariant, children: badgeText })) : null] })) : ((0, jsx_runtime_1.jsx)(styled_1.StyledActionNodeWrapper, { children: children })), hint ? ((0, jsx_runtime_1.jsx)(styled_1.StyledHintText, { inverted: inverted, children: hint })) : null] }), iconRight ? ((0, jsx_runtime_1.jsx)(styled_1.StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
-};
-exports.Action = Action;

package/dist/components/ActionList/ActionListItems/DataListItem.d.ts

@@ -0,0 +1,23 @@
+import { ImageSourcePropType } from 'react-native';
+import { IconNameExtended } from '../../../providers';
+type Graphic = {
+    type: 'icon';
+    icon: IconNameExtended;
+    iconColor?: string;
+} | {
+    type: 'image';
+    image: ImageSourcePropType | string;
+} | undefined;
+type Props = {
+    testID?: string;
+    graphic?: Graphic;
+    progressRingPercentage?: number;
+    heading?: string;
+    subHeading?: string;
+    statusText?: 'Info' | 'Error';
+    valueText?: string;
+    valueSubText?: string;
+    directionLabel?: 'In' | 'Out';
+};
+export declare const DataListItem: ({ testID, graphic, progressRingPercentage, heading, subHeading, statusText, valueText, valueSubText, directionLabel, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ActionList/ActionListItems/DataListItem.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataListItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const use_font_scaling_1 = require("../../../hooks/use-font-scaling");
+const styled_native_1 = require("../../../styled.native");
+const Icon_1 = require("../../Icon");
+const LabelText_1 = require("../../LabelText");
+const P_1 = require("../../P");
+const ProgressRing_1 = require("./ProgressRing");
+const styles_1 = require("./styles");
+const DataListItem = ({ testID, graphic, progressRingPercentage, heading, subHeading, statusText, valueText, valueSubText, directionLabel, }) => {
+    const theme = (0, styled_native_1.useTheme)();
+    const isError = statusText === 'Error';
+    const hasProgressRing = progressRingPercentage !== undefined;
+    const { isFontScalingLarge } = (0, use_font_scaling_1.useFontScaling)();
+    const IconContent = (graphic === null || graphic === void 0 ? void 0 : graphic.type) === 'icon' ? ((0, jsx_runtime_1.jsx)(styles_1.GraphicContainer, { isIcon: true, hasProgress: hasProgressRing, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: graphic.icon, size: 24, color: graphic.iconColor ? graphic.iconColor : theme.color.brand.brand }) })) : null;
+    return ((0, jsx_runtime_1.jsxs)(styles_1.ActionListItemWrapper, { testID: testID, children: [(graphic === null || graphic === void 0 ? void 0 : graphic.type) === 'icon' &&
+                (hasProgressRing ? ((0, jsx_runtime_1.jsx)(ProgressRing_1.ProgressRing, { percentage: progressRingPercentage, children: IconContent })) : (IconContent)), (graphic === null || graphic === void 0 ? void 0 : graphic.type) === 'image' && ((0, jsx_runtime_1.jsx)(styles_1.GraphicContainer, { children: (0, jsx_runtime_1.jsx)(styles_1.StyledImage, { source: typeof graphic.image === 'string'
+                        ? { uri: graphic.image }
+                        : graphic.image, resizeMode: "cover", accessibilityLabel: 'Data List Image' }) })), (0, jsx_runtime_1.jsxs)(styles_1.LeftTextContainer, { children: [heading && (0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: heading }), subHeading && (0, jsx_runtime_1.jsx)(P_1.P, { size: "sm", children: subHeading }), statusText && ((0, jsx_runtime_1.jsx)(styles_1.StatusText, { size: "sm", isError: isError, children: statusText }))] }), (0, jsx_runtime_1.jsxs)(styles_1.RightTextContainer, { children: [(0, jsx_runtime_1.jsxs)(styles_1.DirectionAndValueTextContainer, { children: [directionLabel && ((0, jsx_runtime_1.jsx)(styles_1.DirectionLabelContainer, { scaledUpFont: isFontScalingLarge, children: (0, jsx_runtime_1.jsx)(styles_1.OnSurfaceP, { size: "sm", children: directionLabel }) })), valueText && ((0, jsx_runtime_1.jsx)(styles_1.ValueTextContainer, { scaledUpFont: isFontScalingLarge, children: (0, jsx_runtime_1.jsx)(styles_1.DataValueText, { isError: isError, size: "lg", children: valueText }) }))] }), valueSubText && (0, jsx_runtime_1.jsx)(styles_1.OnSurfaceP, { size: "sm", children: valueSubText })] })] }));
+};
+exports.DataListItem = DataListItem;

package/dist/components/ActionList/ActionListItems/EditableListItem.d.ts

@@ -0,0 +1,43 @@
+type Option = {
+    label: string;
+    value: string;
+};
+type ValueByType = {
+    text: string;
+    location: string;
+    email: string;
+    textarea: string;
+    number: number | null;
+    currency: number | null;
+    select: Option | null;
+};
+type EditableInput = {
+    type: 'text';
+    defaultValue?: ValueByType['text'];
+} | {
+    type: 'location';
+    defaultValue?: ValueByType['location'];
+} | {
+    type: 'email';
+    defaultValue?: ValueByType['email'];
+} | {
+    type: 'textarea';
+    defaultValue?: ValueByType['textarea'];
+} | {
+    type: 'number';
+    defaultValue?: ValueByType['number'];
+} | {
+    type: 'currency';
+    defaultValue?: ValueByType['currency'];
+} | {
+    type: 'select';
+    options: Option[];
+    defaultValue?: ValueByType['select'];
+};
+type Props = {
+    heading?: string;
+    input: EditableInput;
+    onSave?: (value: any) => void;
+};
+export declare const EditableListItem: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<any>>;
+export {};

package/dist/components/ActionList/ActionListItems/EditableListItem.js

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditableListItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const CurrencyInput_1 = require("../../CurrencyInput");
+const EmailInput_1 = require("../../EmailInput");
+const Input_1 = require("../../Input/Input");
+const Link_1 = require("../../Link");
+const Margin_1 = require("../../Margin");
+const NumberInput_1 = require("../../NumberInput");
+const P_1 = require("../../P");
+const SelectField_1 = require("../../SelectField");
+const Strong_1 = require("../../Strong");
+const TextareaInput_1 = require("../../TextareaInput");
+const styles_1 = require("./styles");
+const getInitialValue = (input) => {
+    var _a, _b, _c;
+    switch (input.type) {
+        case 'number':
+        case 'currency':
+            return (_a = input.defaultValue) !== null && _a !== void 0 ? _a : null;
+        case 'select':
+            return (_b = input.defaultValue) !== null && _b !== void 0 ? _b : null;
+        case 'text':
+        case 'location':
+        case 'email':
+        case 'textarea':
+            return (_c = input.defaultValue) !== null && _c !== void 0 ? _c : '';
+    }
+};
+function acceptNumericInput(nextText, prevText) {
+    var _a;
+    if (nextText === '')
+        return '';
+    if (!/^[0-9.]*$/.test(nextText))
+        return prevText;
+    if (((_a = nextText.match(/\./g)) !== null && _a !== void 0 ? _a : []).length > 1)
+        return prevText;
+    return nextText;
+}
+function parseDraftNumericText(text) {
+    if (text === '' || text === '.' || text.endsWith('.'))
+        return null;
+    const n = Number(text);
+    return Number.isFinite(n) ? n : null;
+}
+exports.EditableListItem = (0, react_1.forwardRef)(({ heading, input, onSave }, ref) => {
+    const inputRef = (0, react_1.useRef)(null);
+    const initialValue = (0, react_1.useMemo)(() => getInitialValue(input), [input]);
+    const [editState, setEditState] = (0, react_1.useState)('initial');
+    const [value, setValue] = (0, react_1.useState)(initialValue);
+    const [draft, setDraft] = (0, react_1.useState)(initialValue);
+    const [numericInputText, setNumericInputText] = (0, react_1.useState)('');
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        getValue: () => value,
+    }));
+    const handleNumericChange = (nextText) => {
+        const accepted = acceptNumericInput(nextText, numericInputText);
+        if (accepted === numericInputText)
+            return;
+        setNumericInputText(accepted);
+    };
+    const startEditing = () => {
+        setDraft(value);
+        setEditState('editing');
+        if (input.type === 'number' || input.type === 'currency') {
+            const n = value;
+            setNumericInputText(n === null ? '' : String(n));
+        }
+        requestAnimationFrame(() => {
+            var _a, _b;
+            (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
+    };
+    const saveEditing = () => {
+        const nextValue = input.type === 'number' || input.type === 'currency'
+            ? parseDraftNumericText(numericInputText)
+            : draft;
+        setValue(nextValue);
+        setEditState('initial');
+        onSave === null || onSave === void 0 ? void 0 : onSave(nextValue);
+    };
+    const cancelEditing = () => {
+        setDraft(value);
+        if (input.type === 'number' || input.type === 'currency') {
+            const n = value;
+            setNumericInputText(n === null ? '' : String(n));
+        }
+        setEditState('initial');
+    };
+    const displayValue = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        switch (input.type) {
+            case 'select':
+                return (_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : '-';
+            case 'number':
+            case 'currency':
+                return (_b = value === null || value === void 0 ? void 0 : value.toString()) !== null && _b !== void 0 ? _b : '-';
+            default: {
+                const v = value;
+                return v === '' ? '-' : v;
+            }
+        }
+    }, [input.type, value]);
+    const renderEditingInput = () => {
+        var _a;
+        if (editState !== 'editing')
+            return null;
+        switch (input.type) {
+            case 'text':
+                return ((0, jsx_runtime_1.jsx)(Input_1.Input, { ref: inputRef, value: draft, onChangeText: v => setDraft(v) }));
+            case 'location':
+                return ((0, jsx_runtime_1.jsx)(Input_1.Input, { ref: inputRef, value: draft, onChangeText: v => setDraft(v), iconLeft: "address" }));
+            case 'email':
+                return ((0, jsx_runtime_1.jsx)(EmailInput_1.EmailInput, { ref: inputRef, value: draft, onChangeText: v => setDraft(v) }));
+            case 'textarea':
+                return ((0, jsx_runtime_1.jsx)(TextareaInput_1.TextareaInput, { ref: inputRef, value: draft, onChangeText: v => setDraft(v) }));
+            case 'number':
+                return ((0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { ref: inputRef, value: numericInputText, onChangeText: handleNumericChange }));
+            case 'currency':
+                return ((0, jsx_runtime_1.jsx)(CurrencyInput_1.CurrencyInput, { ref: inputRef, value: numericInputText, onChangeText: handleNumericChange }));
+            case 'select': {
+                const selected = (_a = draft) !== null && _a !== void 0 ? _a : {
+                    label: 'None',
+                    value: 'default',
+                };
+                return ((0, jsx_runtime_1.jsx)(SelectField_1.SelectField, { ref: inputRef, label: "", options: input.options, onSelected: opt => setDraft(opt.value === 'default' ? null : opt), defaultSelected: selected }));
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(styles_1.ActionListItemWrapper, { children: (0, jsx_runtime_1.jsxs)(styles_1.EditableListContainer, { children: [heading && ((0, jsx_runtime_1.jsx)(P_1.P, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: heading }) })), editState === 'initial' ? ((0, jsx_runtime_1.jsxs)(styles_1.InitialStateContainer, { children: [(0, jsx_runtime_1.jsx)(styles_1.ValueText, { children: displayValue }), (0, jsx_runtime_1.jsx)(Link_1.TextLink, { onPress: startEditing, children: (0, jsx_runtime_1.jsx)(P_1.P, { size: "md", children: displayValue === '-' ? 'Add' : 'Change' }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderEditingInput(), (0, jsx_runtime_1.jsx)(Margin_1.Margin, { top: 2 }), (0, jsx_runtime_1.jsxs)(styles_1.EditButtonsContainer, { children: [(0, jsx_runtime_1.jsx)(Link_1.TextLink, { onPress: saveEditing, children: (0, jsx_runtime_1.jsx)(P_1.P, { children: "Save" }) }), (0, jsx_runtime_1.jsx)(Link_1.TextLink, { onPress: cancelEditing, children: (0, jsx_runtime_1.jsx)(P_1.P, { children: "Cancel" }) })] })] }))] }) }));
+});
+exports.EditableListItem.displayName = 'EditableListItem';

package/dist/components/ActionList/ActionListItems/NavigationListItem.d.ts

@@ -0,0 +1,16 @@
+import { PropsWithChildren } from 'react';
+import { AccessibilityRole, TouchableOpacityProps } from 'react-native';
+import { IconNameExtended } from '../../../providers';
+type NavigationListItemProps = PropsWithChildren<Omit<TouchableOpacityProps, 'onPress'>> & {
+    testID?: string;
+    iconLeft?: IconNameExtended;
+    heading?: string;
+    subHeading?: string;
+    iconRight?: IconNameExtended;
+    onPress?: () => void;
+    accessibilityRole?: AccessibilityRole;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+};
+export declare const NavigationListItem: ({ testID, iconLeft, iconRight, heading, subHeading, onPress, accessibilityRole, accessibilityLabel, accessibilityHint, activeOpacity, disabled, ...touchableProps }: NavigationListItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ActionList/ActionListItems/NavigationListItem.js

@@ -0,0 +1,30 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationListItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const styled_native_1 = require("../../../styled.native");
+const Icon_1 = require("../../Icon");
+const P_1 = require("../../P");
+const styles_1 = require("./styles");
+const NavigationListItem = (_a) => {
+    var { testID, iconLeft, iconRight, heading, subHeading, onPress, accessibilityRole, accessibilityLabel, accessibilityHint, activeOpacity = 0.75, disabled } = _a, touchableProps = __rest(_a, ["testID", "iconLeft", "iconRight", "heading", "subHeading", "onPress", "accessibilityRole", "accessibilityLabel", "accessibilityHint", "activeOpacity", "disabled"]);
+    const theme = (0, styled_native_1.useTheme)();
+    const isPressable = !!onPress && !disabled;
+    const Wrapper = isPressable ? react_native_1.TouchableOpacity : react_native_1.View;
+    return ((0, jsx_runtime_1.jsx)(Wrapper, Object.assign({ testID: testID }, (isPressable && Object.assign({ activeOpacity,
+        onPress,
+        disabled, accessible: true, accessibilityRole: accessibilityRole !== null && accessibilityRole !== void 0 ? accessibilityRole : 'button', accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : heading, accessibilityHint }, touchableProps)), { children: (0, jsx_runtime_1.jsxs)(styles_1.ActionListItemWrapper, { children: [iconLeft && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: iconLeft, size: 24, color: theme.color.brand.brand })), (heading || subHeading) && ((0, jsx_runtime_1.jsxs)(styles_1.TextContainer, { children: [heading && (0, jsx_runtime_1.jsx)(P_1.P, { children: heading }), subHeading && (0, jsx_runtime_1.jsx)(styles_1.SubHeading, { size: "sm", children: subHeading })] })), iconRight && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: iconRight, size: 20 })] }) })));
+};
+exports.NavigationListItem = NavigationListItem;

package/dist/components/ActionList/ActionListItems/ProgressRing.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type ProgressRingWrapperProps = {
+    percentage: number;
+    children: React.ReactNode;
+};
+export declare const ProgressRing: React.FC<ProgressRingWrapperProps>;
+export {};

package/dist/components/ActionList/ActionListItems/ProgressRing.js

@@ -0,0 +1,66 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressRing = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const styled_native_1 = __importStar(require("../../../styled.native"));
+const styles_1 = require("./styles");
+const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+const Outer = (0, styled_native_1.default)(react_native_1.View)(({ outerSize }) => (0, styled_native_1.css) `
+    width: ${outerSize}px;
+    height: ${outerSize}px;
+    position: relative;
+    justify-content: center;
+    align-items: center;
+  `);
+const RingSvg = (0, styled_native_1.default)(react_native_svg_1.default) `
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+const ProgressRing = ({ percentage, children, }) => {
+    const theme = (0, styled_native_1.useTheme)();
+    const innerSize = styles_1.PROGESS_RING_INNER;
+    const strokeWidth = 2;
+    const outerSize = innerSize + 2 * strokeWidth;
+    const pct = clamp(percentage, 0, 100);
+    const radius = (outerSize - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const dashOffset = circumference * (1 - pct / 100);
+    return ((0, jsx_runtime_1.jsxs)(Outer, { outerSize: outerSize, children: [(0, jsx_runtime_1.jsxs)(RingSvg, { width: outerSize, height: outerSize, viewBox: `0 0 ${outerSize} ${outerSize}`, children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Circle, { cx: outerSize / 2, cy: outerSize / 2, r: radius, stroke: theme.color.surface.border, strokeWidth: strokeWidth, fill: "none" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Circle, { cx: outerSize / 2, cy: outerSize / 2, r: radius, stroke: theme.color.brand.brand, strokeWidth: strokeWidth, fill: "none", strokeDasharray: `${circumference} ${circumference}`, strokeDashoffset: dashOffset, transform: `rotate(-90 ${outerSize / 2} ${outerSize / 2})` })] }), children] }));
+};
+exports.ProgressRing = ProgressRing;

package/dist/components/ActionList/ActionListItems/ToggleListItem.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    testID?: string;
+    heading: string;
+    hintText?: string;
+    checked: boolean;
+    onToggle: () => void;
+};
+export declare const ToggleListItem: ({ testID, heading, hintText, checked, onToggle, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ActionList/ActionListItems/ToggleListItem.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleListItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const HintText_1 = require("../../HintText");
+const P_1 = require("../../P");
+const styles_1 = require("./styles");
+const ToggleListItem = ({ testID, heading, hintText, checked, onToggle, }) => {
+    return ((0, jsx_runtime_1.jsxs)(styles_1.ActionListItemWrapper, { testID: testID ? `${testID}-toggle` : undefined, children: [(0, jsx_runtime_1.jsxs)(styles_1.TextContainer, { children: [(0, jsx_runtime_1.jsx)(P_1.P, { children: heading }), hintText && (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hintText })] }), (0, jsx_runtime_1.jsx)(react_native_1.Switch, { value: checked, onValueChange: onToggle, accessibilityRole: "switch", accessibilityLabel: heading, accessibilityState: { checked } })] }));
+};
+exports.ToggleListItem = ToggleListItem;

package/dist/components/ActionList/ActionListItems/styles.d.ts

@@ -0,0 +1,51 @@
+import { Image, ImageBackground, View } from 'react-native';
+export declare const ActionListItemWrapper: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core").ThemeNative, {}, never>;
+export declare const TextContainer: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core").ThemeNative, {}, never>;
+export declare const EditableListContainer: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core").ThemeNative, {}, never>;
+export declare const InitialStateContainer: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core").ThemeNative, {}, never>;
+export declare const ValueText: import("styled-components").StyledComponent<(props: import("react-native").TextProps & {
+    inverted?: boolean;
+    ref?: React.Ref<import("react-native").Text>;
+    size?: "xl" | "lg" | "sm" | "md";
+}) => import("react/jsx-runtime").JSX.Element, import("@ovotech/element-core").ThemeNative, {}, never>;
+export declare const EditButtonsContainer: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core").ThemeNative, {}, never>;
+export declare const NavigationListContainer: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core").ThemeNative, {}, never>;
+export declare const SubHeading: import("styled-components").StyledComponent<(props: import("react-native").TextProps & {
+    inverted?: boolean;
+    ref?: React.Ref<import("react-native").Text>;
+    size?: "xl" | "lg" | "sm" | "md";
+}) => import("react/jsx-runtime").JSX.Element, import("@ovotech/element-core").ThemeNative, {}, never>;
+export declare const LeftTextContainer: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core").ThemeNative, {}, never>;
+export declare const RightTextContainer: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core").ThemeNative, {}, never>;
+export declare const StyledImage: import("styled-components").StyledComponent<typeof Image, import("@ovotech/element-core").ThemeNative, {}, never>;
+export declare const StatusText: import("styled-components").StyledComponent<(props: import("react-native").TextProps & {
+    inverted?: boolean;
+    ref?: React.Ref<import("react-native").Text>;
+    size?: "xl" | "lg" | "sm" | "md";
+}) => import("react/jsx-runtime").JSX.Element, import("@ovotech/element-core").ThemeNative, {
+    isError?: boolean;
+}, never>;
+export declare const ValueTextContainer: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core").ThemeNative, {
+    scaledUpFont?: boolean;
+}, never>;
+export declare const DataValueText: import("styled-components").StyledComponent<(props: import("react-native").TextProps & {
+    inverted?: boolean;
+    ref?: React.Ref<import("react-native").Text>;
+    size?: "xl" | "lg" | "sm" | "md";
+}) => import("react/jsx-runtime").JSX.Element, import("@ovotech/element-core").ThemeNative, {
+    isError?: boolean;
+}, never>;
+export declare const DirectionLabelContainer: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core").ThemeNative, {
+    scaledUpFont?: boolean;
+}, never>;
+export declare const OnSurfaceP: import("styled-components").StyledComponent<(props: import("react-native").TextProps & {
+    inverted?: boolean;
+    ref?: React.Ref<import("react-native").Text>;
+    size?: "xl" | "lg" | "sm" | "md";
+}) => import("react/jsx-runtime").JSX.Element, import("@ovotech/element-core").ThemeNative, {}, never>;
+export declare const DirectionAndValueTextContainer: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core").ThemeNative, {}, never>;
+export declare const PROGESS_RING_INNER = 42;
+export declare const GraphicContainer: import("styled-components").StyledComponent<typeof ImageBackground, import("@ovotech/element-core").ThemeNative, {
+    isIcon?: boolean;
+    hasProgress?: boolean;
+}, never>;