@ovotech/element-native 4.0.2-canary-e8705c2-255 → 4.0.2-canary-e5d087a-257

package/dist/components/SegmentedControls/SegmentedControls.d.ts

@@ -0,0 +1,12 @@
+import { Dispatch, SetStateAction } from 'react';
+import { SegmentTypes } from './constants';
+type SegmentedControlsProps<T extends keyof SegmentTypes> = {
+    activeSegment: SegmentTypes[T][number];
+    segments: SegmentTypes[T];
+    setActiveSegment: Dispatch<SetStateAction<SegmentTypes[T][number]>>;
+    inline?: boolean;
+    multipleRows?: boolean;
+    size?: 'small' | 'large';
+};
+export declare const SegmentedControls: <T extends keyof SegmentTypes>({ activeSegment, setActiveSegment, segments, inline, multipleRows, size, }: SegmentedControlsProps<T>) => JSX.Element;
+export {};

package/dist/components/SegmentedControls/SegmentedControls.js

@@ -0,0 +1,78 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentedControls = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+var styled_native_1 = __importStar(require("../../styled.native"));
+var SegmentButton_1 = require("./components/SegmentButton");
+var springSettings = {
+    damping: 15,
+};
+var SegmentedControls = function (_a) {
+    var activeSegment = _a.activeSegment, setActiveSegment = _a.setActiveSegment, segments = _a.segments, _b = _a.inline, inline = _b === void 0 ? false : _b, multipleRows = _a.multipleRows, _c = _a.size, size = _c === void 0 ? 'large' : _c;
+    var animatedX = (0, react_native_reanimated_1.useSharedValue)(0);
+    var animatedY = (0, react_native_reanimated_1.useSharedValue)(0);
+    var animatedHeight = (0, react_native_reanimated_1.useSharedValue)(0);
+    var animatedWidth = (0, react_native_reanimated_1.useSharedValue)(0);
+    var theme = (0, styled_native_1.useTheme)();
+    var animatedBackgroundStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
+        transform: [
+            {
+                translateX: animatedX.value,
+            },
+            {
+                translateY: animatedY.value + theme.core.space[size === 'small' ? 1 : 2],
+            } /* accounting for margin from top & bottom */,
+        ],
+        width: animatedWidth.value,
+        height: animatedHeight.value,
+        position: 'absolute',
+        borderRadius: theme.core.radius.max,
+        backgroundColor: theme.semantic.surface.elevated,
+    }); }, [animatedX, animatedY, animatedWidth, animatedHeight]);
+    return ((0, jsx_runtime_1.jsxs)(SegmentsContainer, { "$inline": inline, "$multipleRows": multipleRows, children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: animatedBackgroundStyle }), segments.map(function (segment) { return ((0, jsx_runtime_1.jsx)(SegmentButton_1.SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, onPress: function (x, y, width) {
+                    setActiveSegment(segment);
+                    animatedX.value = (0, react_native_reanimated_1.withSpring)(x, springSettings);
+                    animatedY.value = (0, react_native_reanimated_1.withSpring)(y, springSettings);
+                    animatedWidth.value = width;
+                }, onLayout: function (width, height, x, y) {
+                    if (activeSegment.key === segment.key) {
+                        animatedX.value = x;
+                        // (adrian.pop) - I couldn't figure out how to make the positioning work once the
+                        // choices go on the second row. The only way I could get it to work
+                        // was to hardcode the denominator to 3 for the single row ones
+                        // and 1.1 for the multiple row ones.
+                        animatedY.value = y - height / (multipleRows ? 1.1 : 3);
+                        animatedHeight.value = height;
+                        animatedWidth.value = width;
+                    }
+                }, multipleRows: multipleRows, size: size, inline: inline }, segment.key)); })] }));
+};
+exports.SegmentedControls = SegmentedControls;
+var SegmentsContainer = styled_native_1.default.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, $inline = _a.$inline, $multipleRows = _a.$multipleRows;
+    return "\n  flex-direction: row;\n  flex-wrap: ".concat($multipleRows ? '' : 'no-', "wrap;\n  justify-content: ").concat($multipleRows ? 'space-between' : 'space-apart', ";\n  align-items: center;\n  gap: ").concat($inline ? 0 : core.space[1], "px;\n  width: ").concat($inline ? 'auto' : '100%', ";\n  align-self: ").concat($inline ? 'flex-start' : 'stretch', ";\n  padding: ").concat(core.space[1], "px;\n  background-color: ").concat(semantic.surface.cutout, ";\n  border-radius: ").concat(core.radius.max, "px;\n");
+});

package/dist/components/SegmentedControls/components/SegmentButton.d.ts

@@ -0,0 +1,11 @@
+type SegmentButtonProps = {
+    onPress: (x: number, y: number, width: number) => void;
+    onLayout: (width: number, height: number, x: number, y: number) => void;
+    isSelected: boolean;
+    label: string;
+    multipleRows?: boolean;
+    inline?: boolean;
+    size?: 'small' | 'large';
+};
+export declare const SegmentButton: ({ onPress, onLayout, inline, isSelected, label, multipleRows, size, }: SegmentButtonProps) => JSX.Element;
+export {};

package/dist/components/{FilterSection/components/FilterButton.js → SegmentedControls/components/SegmentButton.js}

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -26,21 +22,25 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterButton = void 0;
+exports.SegmentButton = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var react_native_1 = require("react-native");
 var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-var styled_native_1 = __importStar(require("../../../styled.native"));
+var styled_native_1 = __importDefault(require("../../../styled.native"));
 var P_1 = require("../../P");
 var AnimatedP = react_native_reanimated_1.default.createAnimatedComponent(P_1.P);
-var FilterButton = function (_a) {
-    var onPress = _a.onPress, onLayout = _a.onLayout, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows;
+var SegmentButton = function (_a) {
+    var onPress = _a.onPress, onLayout = _a.onLayout, inline = _a.inline, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows, _b = _a.size, size = _b === void 0 ? 'large' : _b;
     var xRef = (0, react_1.useRef)(0);
     var yRef = (0, react_1.useRef)(0);
     var widthRef = (0, react_1.useRef)(0);
     var heightRef = (0, react_1.useRef)(0);
+    var hitslopVal = size === 'small' ? 8 : 4;
     var fontWeightAnim = (0, react_native_reanimated_1.useSharedValue)(isSelected ? 1 : 0);
     var animatedStyleNormal = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
         return {
@@ -61,8 +61,8 @@ var FilterButton = function (_a) {
         var _a = event.nativeEvent.layout, width = _a.width, height = _a.height, x = _a.x, y = _a.y;
         xRef.current = x;
         yRef.current = y;
-        widthRef.current = width;
         heightRef.current = height;
+        widthRef.current = width;
         onLayout(width, height, x, y);
     };
     var handlePress = function () {
@@ -73,21 +73,22 @@ var FilterButton = function (_a) {
         // and 1.1 for the multiple row ones.
         yRef.current - heightRef.current / (multipleRows ? 1.1 : 3), widthRef.current);
     };
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onLayout: handleLayout, onPress: handlePress, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, children: (0, jsx_runtime_1.jsxs)(SFilterSelector, { "$isSelected": isSelected, children: [(0, jsx_runtime_1.jsx)(SFilterText, { style: {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onLayout: handleLayout, onPress: handlePress, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, hitSlop: {
+            top: hitslopVal,
+            bottom: hitslopVal,
+        }, style: { flexGrow: inline || multipleRows ? undefined : 1 }, children: (0, jsx_runtime_1.jsxs)(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, children: [(0, jsx_runtime_1.jsx)(SSegmentText, { style: {
                         opacity: 0,
                         fontWeight: '900',
-                    }, "$isSelected": false, children: label }), (0, jsx_runtime_1.jsx)(SFilterText, { style: animatedStyleNormal, "$isSelected": false, numberOfLines: 1, adjustsFontSizeToFit: true, children: label }), (0, jsx_runtime_1.jsx)(SFilterText, { style: animatedStyleBold, "$isSelected": true, numberOfLines: 1, adjustsFontSizeToFit: true, children: label })] }) }));
+                    }, "$isSelected": false, children: label }), (0, jsx_runtime_1.jsx)(SSegmentText, { style: animatedStyleNormal, "$isSelected": false, numberOfLines: 1, adjustsFontSizeToFit: true, children: label }), (0, jsx_runtime_1.jsx)(SSegmentText, { style: animatedStyleBold, "$isSelected": true, numberOfLines: 1, adjustsFontSizeToFit: true, children: label })] }) }));
 };
-exports.FilterButton = FilterButton;
-var SFilterSelector = styled_native_1.default.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0 ", "px;\n  border-radius: ", "px;\n  align-items: center;\n  justify-content: center;\n"], ["\n  padding: 0 ", "px;\n  border-radius: ", "px;\n  align-items: center;\n  justify-content: center;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.core.space[4];
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.core.radius.large;
+exports.SegmentButton = SegmentButton;
+var SSegmentsWrapper = styled_native_1.default.View(function (_a) {
+    var theme = _a.theme, $size = _a.$size;
+    return "\n  padding: ".concat($size === 'small' ? 0 : 6, "px ").concat(theme.core.space[$size === 'small' ? 3 : 4], "px;\n  align-items: center;\n  justify-content: center;\n");
 });
-var SFilterText = (0, styled_native_1.default)(AnimatedP)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+var SSegmentText = (0, styled_native_1.default)(AnimatedP)(function (_a) {
     var $isSelected = _a.$isSelected, theme = _a.theme;
-    return $isSelected && (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", ";\n      font-weight: ", ";\n    "], ["\n      color: ", ";\n      font-weight: ", ";\n    "])), theme.core.color.brand.white, theme.core.fontWeight.bold);
+    return "\n    font-family: ".concat($isSelected
+        ? theme.core.fontFamily.bodyBold.native
+        : theme.core.fontFamily.body.native, ";\n    color: ").concat(theme.semantic.message.base, ";\n  ");
 });
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/{FilterSection → SegmentedControls}/constants.d.ts

@@ -1,9 +1,9 @@
-export type EnergyUseFilters = 'electricity' | 'gas' | 'combined';
-export type PeriodFilters = 'week' | 'month' | 'year';
+export type EnergyUseFilters = 'total' | 'electricity' | 'gas';
+export type PeriodFilters = 'day' | 'week' | 'month' | 'year';
 export type MeasurementFilters = 'consumption' | 'cost';
 export type ComparisonFilters = 'similar' | 'previous' | 'none';
 export type MeasurementUnit = '£' | 'kWh';
-export type Filters = {
+export type SegmentTypes = {
     ENERGY_USE: {
         key: EnergyUseFilters;
         label: string;
@@ -25,4 +25,9 @@ export type Filters = {
         label: string;
         mainScreenLabel?: string;
     }[];
+    CUSTOM: {
+        key: string;
+        label: string;
+        mainScreenLabel?: string;
+    }[];
 };

package/dist/components/SegmentedControls/index.d.ts

@@ -0,0 +1,2 @@
+import { SegmentedControls } from './SegmentedControls';
+export { SegmentedControls };

package/dist/components/SegmentedControls/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentedControls = void 0;
+var SegmentedControls_1 = require("./SegmentedControls");
+Object.defineProperty(exports, "SegmentedControls", { enumerable: true, get: function () { return SegmentedControls_1.SegmentedControls; } });

package/dist/components/index.d.ts

@@ -40,6 +40,7 @@ export * from './PasswordInput';
 export * from './PhoneField';
 export * from './PhoneInput';
 export * from './Radio';
+export * from './SegmentedControls';
 export * from './SelectField';
 export * from './SkeletonCircle';
 export * from './SkeletonCTA';

package/dist/components/index.js

@@ -56,6 +56,7 @@ __exportStar(require("./PasswordInput"), exports);
 __exportStar(require("./PhoneField"), exports);
 __exportStar(require("./PhoneInput"), exports);
 __exportStar(require("./Radio"), exports);
+__exportStar(require("./SegmentedControls"), exports);
 __exportStar(require("./SelectField"), exports);
 __exportStar(require("./SkeletonCircle"), exports);
 __exportStar(require("./SkeletonCTA"), exports);

package/dist/esm/components/SegmentedControls/SegmentedControls.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Animated, { useAnimatedStyle, useSharedValue, withSpring, } from 'react-native-reanimated';
+import styled, { useTheme } from '../../styled.native';
+import { SegmentButton } from './components/SegmentButton';
+var springSettings = {
+    damping: 15,
+};
+export var SegmentedControls = function (_a) {
+    var activeSegment = _a.activeSegment, setActiveSegment = _a.setActiveSegment, segments = _a.segments, _b = _a.inline, inline = _b === void 0 ? false : _b, multipleRows = _a.multipleRows, _c = _a.size, size = _c === void 0 ? 'large' : _c;
+    var animatedX = useSharedValue(0);
+    var animatedY = useSharedValue(0);
+    var animatedHeight = useSharedValue(0);
+    var animatedWidth = useSharedValue(0);
+    var theme = useTheme();
+    var animatedBackgroundStyle = useAnimatedStyle(function () { return ({
+        transform: [
+            {
+                translateX: animatedX.value,
+            },
+            {
+                translateY: animatedY.value + theme.core.space[size === 'small' ? 1 : 2],
+            } /* accounting for margin from top & bottom */,
+        ],
+        width: animatedWidth.value,
+        height: animatedHeight.value,
+        position: 'absolute',
+        borderRadius: theme.core.radius.max,
+        backgroundColor: theme.semantic.surface.elevated,
+    }); }, [animatedX, animatedY, animatedWidth, animatedHeight]);
+    return (_jsxs(SegmentsContainer, { "$inline": inline, "$multipleRows": multipleRows, children: [_jsx(Animated.View, { style: animatedBackgroundStyle }), segments.map(function (segment) { return (_jsx(SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, onPress: function (x, y, width) {
+                    setActiveSegment(segment);
+                    animatedX.value = withSpring(x, springSettings);
+                    animatedY.value = withSpring(y, springSettings);
+                    animatedWidth.value = width;
+                }, onLayout: function (width, height, x, y) {
+                    if (activeSegment.key === segment.key) {
+                        animatedX.value = x;
+                        // (adrian.pop) - I couldn't figure out how to make the positioning work once the
+                        // choices go on the second row. The only way I could get it to work
+                        // was to hardcode the denominator to 3 for the single row ones
+                        // and 1.1 for the multiple row ones.
+                        animatedY.value = y - height / (multipleRows ? 1.1 : 3);
+                        animatedHeight.value = height;
+                        animatedWidth.value = width;
+                    }
+                }, multipleRows: multipleRows, size: size, inline: inline }, segment.key)); })] }));
+};
+var SegmentsContainer = styled.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, $inline = _a.$inline, $multipleRows = _a.$multipleRows;
+    return "\n  flex-direction: row;\n  flex-wrap: ".concat($multipleRows ? '' : 'no-', "wrap;\n  justify-content: ").concat($multipleRows ? 'space-between' : 'space-apart', ";\n  align-items: center;\n  gap: ").concat($inline ? 0 : core.space[1], "px;\n  width: ").concat($inline ? 'auto' : '100%', ";\n  align-self: ").concat($inline ? 'flex-start' : 'stretch', ";\n  padding: ").concat(core.space[1], "px;\n  background-color: ").concat(semantic.surface.cutout, ";\n  border-radius: ").concat(core.radius.max, "px;\n");
+});

package/dist/esm/components/{FilterSection/components/FilterButton.js → SegmentedControls/components/SegmentButton.js}

@@ -1,20 +1,17 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import { Pressable } from 'react-native';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
-import styled, { css } from '../../../styled.native';
+import styled from '../../../styled.native';
 import { P } from '../../P';
 var AnimatedP = Animated.createAnimatedComponent(P);
-export var FilterButton = function (_a) {
-    var onPress = _a.onPress, onLayout = _a.onLayout, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows;
+export var SegmentButton = function (_a) {
+    var onPress = _a.onPress, onLayout = _a.onLayout, inline = _a.inline, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows, _b = _a.size, size = _b === void 0 ? 'large' : _b;
     var xRef = useRef(0);
     var yRef = useRef(0);
     var widthRef = useRef(0);
     var heightRef = useRef(0);
+    var hitslopVal = size === 'small' ? 8 : 4;
     var fontWeightAnim = useSharedValue(isSelected ? 1 : 0);
     var animatedStyleNormal = useAnimatedStyle(function () {
         return {
@@ -35,8 +32,8 @@ export var FilterButton = function (_a) {
         var _a = event.nativeEvent.layout, width = _a.width, height = _a.height, x = _a.x, y = _a.y;
         xRef.current = x;
         yRef.current = y;
-        widthRef.current = width;
         heightRef.current = height;
+        widthRef.current = width;
         onLayout(width, height, x, y);
     };
     var handlePress = function () {
@@ -47,20 +44,21 @@ export var FilterButton = function (_a) {
         // and 1.1 for the multiple row ones.
         yRef.current - heightRef.current / (multipleRows ? 1.1 : 3), widthRef.current);
     };
-    return (_jsx(Pressable, { onLayout: handleLayout, onPress: handlePress, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, children: _jsxs(SFilterSelector, { "$isSelected": isSelected, children: [_jsx(SFilterText, { style: {
+    return (_jsx(Pressable, { onLayout: handleLayout, onPress: handlePress, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, hitSlop: {
+            top: hitslopVal,
+            bottom: hitslopVal,
+        }, style: { flexGrow: inline || multipleRows ? undefined : 1 }, children: _jsxs(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, children: [_jsx(SSegmentText, { style: {
                         opacity: 0,
                         fontWeight: '900',
-                    }, "$isSelected": false, children: label }), _jsx(SFilterText, { style: animatedStyleNormal, "$isSelected": false, numberOfLines: 1, adjustsFontSizeToFit: true, children: label }), _jsx(SFilterText, { style: animatedStyleBold, "$isSelected": true, numberOfLines: 1, adjustsFontSizeToFit: true, children: label })] }) }));
+                    }, "$isSelected": false, children: label }), _jsx(SSegmentText, { style: animatedStyleNormal, "$isSelected": false, numberOfLines: 1, adjustsFontSizeToFit: true, children: label }), _jsx(SSegmentText, { style: animatedStyleBold, "$isSelected": true, numberOfLines: 1, adjustsFontSizeToFit: true, children: label })] }) }));
 };
-var SFilterSelector = styled.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0 ", "px;\n  border-radius: ", "px;\n  align-items: center;\n  justify-content: center;\n"], ["\n  padding: 0 ", "px;\n  border-radius: ", "px;\n  align-items: center;\n  justify-content: center;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.core.space[4];
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.core.radius.large;
+var SSegmentsWrapper = styled.View(function (_a) {
+    var theme = _a.theme, $size = _a.$size;
+    return "\n  padding: ".concat($size === 'small' ? 0 : 6, "px ").concat(theme.core.space[$size === 'small' ? 3 : 4], "px;\n  align-items: center;\n  justify-content: center;\n");
 });
-var SFilterText = styled(AnimatedP)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+var SSegmentText = styled(AnimatedP)(function (_a) {
     var $isSelected = _a.$isSelected, theme = _a.theme;
-    return $isSelected && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", ";\n      font-weight: ", ";\n    "], ["\n      color: ", ";\n      font-weight: ", ";\n    "])), theme.core.color.brand.white, theme.core.fontWeight.bold);
+    return "\n    font-family: ".concat($isSelected
+        ? theme.core.fontFamily.bodyBold.native
+        : theme.core.fontFamily.body.native, ";\n    color: ").concat(theme.semantic.message.base, ";\n  ");
 });
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/esm/components/SegmentedControls/index.js

@@ -0,0 +1,2 @@
+import { SegmentedControls } from './SegmentedControls';
+export { SegmentedControls };

package/dist/esm/components/index.js

@@ -40,6 +40,7 @@ export * from './PasswordInput';
 export * from './PhoneField';
 export * from './PhoneInput';
 export * from './Radio';
+export * from './SegmentedControls';
 export * from './SelectField';
 export * from './SkeletonCircle';
 export * from './SkeletonCTA';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "4.0.2-canary-e8705c2-255",
+  "version": "4.0.2-canary-e5d087a-257",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@backpackapp-io/react-native-toast": "^0.10.0",
-    "@ovotech/element-core": "3.0.1-canary-e8705c2-255",
+    "@ovotech/element-core": "3.0.1-canary-e5d087a-257",
     "deepmerge": "^4.2.2",
     "lodash.groupby": "^4.6.0",
     "react-native-reanimated-carousel": "^3.5.1"

package/dist/components/FilterSection/FilterSection.d.ts

@@ -1,498 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { Filters } from './constants';
-type FilterSectionProps<T extends keyof Filters> = {
-    filterTitle: string;
-    localFilter: Filters[T][number];
-    setLocalFilter: Dispatch<SetStateAction<Filters[T][number]>>;
-    filters: Filters[T];
-    multipleRows?: boolean;
-};
-export declare const FilterSection: <T extends keyof Filters>({ filterTitle, localFilter, setLocalFilter, filters, multipleRows, }: FilterSectionProps<T>) => JSX.Element;
-export declare const BlackHeading4: import("styled-components").StyledComponent<({ accessibilityRole, ...rest }: import("react").PropsWithChildren<import("react-native").TextProps & {
-    inverted?: boolean | undefined;
-}>) => JSX.Element, {
-    core: {
-        color: {
-            brand: {
-                midnight: string;
-                midnightTint: string;
-                forest: string;
-                forestTint: string;
-                ovo: string;
-                ovoTint: string;
-                leaf: string;
-                leafTint: string;
-                energised: string;
-                energisedTint: string;
-                offwhite: string;
-                white: string;
-                black: string;
-            };
-            neutral: {
-                darkest: string;
-                darker: string;
-                dark: string;
-                base: string;
-                light: string;
-                lighter: string;
-                lightest: string;
-            };
-            red: {
-                darkest: string;
-                darker: string;
-                dark: string;
-                base: string;
-                light: string;
-                lighter: string;
-                lightest: string;
-            };
-            orange: {
-                darkest: string;
-                darker: string;
-                dark: string;
-                base: string;
-                light: string;
-                lighter: string;
-                lightest: string;
-            };
-            yellow: {
-                darkest: string;
-                darker: string;
-                dark: string;
-                base: string;
-                light: string;
-                lighter: string;
-                lightest: string;
-            };
-            green: {
-                darkest: string;
-                darker: string;
-                dark: string;
-                base: string;
-                light: string;
-                lighter: string;
-                lightest: string;
-            };
-            blue: {
-                darkest: string;
-                darker: string;
-                dark: string;
-                base: string;
-                light: string;
-                lighter: string;
-                lightest: string;
-            };
-        };
-        fontFamily: {
-            mono: {
-                native: string;
-                web: string;
-            };
-            heading: {
-                native: string;
-                web: string;
-            };
-            body: {
-                native: string;
-                web: string;
-            };
-            bodyBold: {
-                native: string;
-                web: string;
-            };
-        };
-        fontWeight: {
-            book: number;
-            bold: number;
-            black: number;
-        };
-        fontSize: {
-            heading1: {
-                small: number;
-                large: number;
-            };
-            heading2: {
-                small: number;
-                large: number;
-            };
-            heading3: {
-                small: number;
-                large: number;
-            };
-            heading4: {
-                small: number;
-                large: number;
-            };
-            lead: {
-                small: number;
-                large: number;
-            };
-            body: {
-                small: number;
-                large: number;
-            };
-            small: {
-                small: number;
-                large: number;
-            };
-            label: {
-                small: number;
-                large: number;
-            };
-        };
-        letterSpacing: {
-            base: number;
-            compressed: number;
-            extraCompressed: number;
-        };
-        lineHeight: {
-            heading1: {
-                small: number;
-                large: number;
-            };
-            heading2: {
-                small: number;
-                large: number;
-            };
-            heading3: {
-                small: number;
-                large: number;
-            };
-            heading4: {
-                small: number;
-                large: number;
-            };
-            lead: {
-                small: number;
-                large: number;
-            };
-            body: {
-                small: number;
-                large: number;
-            };
-            small: {
-                small: number;
-                large: number;
-            };
-            label: {
-                small: number;
-                large: number;
-            };
-        };
-        borderWidth: {
-            small: number;
-            medium: number;
-            large: number;
-        };
-        breakpoint: {
-            small: number;
-            medium: number;
-            large: number;
-        };
-        mediaQuery: {
-            small: number;
-            medium: number;
-            large: number;
-        };
-        customMediaQuery: {
-            'small-and-up': number;
-            'medium-and-up': number;
-            'large-and-up': number;
-        };
-        opacity: {
-            solid: number;
-            translucent: number;
-            transparent: number;
-        };
-        radius: {
-            small: number;
-            medium: number;
-            large: number;
-            max: number;
-        };
-        space: {
-            '0': number;
-            '1': number;
-            '2': number;
-            '3': number;
-            '4': number;
-            '5': number;
-            '6': number;
-            '7': number;
-            '8': number;
-            '9': number;
-            '10': number;
-            '11': number;
-            '12': number;
-            '13': number;
-            '14': number;
-            '15': number;
-        };
-        transition: {
-            slow: number;
-            medium: number;
-            fast: number;
-        };
-    };
-    semantic: {
-        border: {
-            graphic: string;
-            differentiated: string;
-            functional: string;
-        };
-        branded: {
-            surface: string;
-            message: string;
-            heading: string;
-        };
-        neutral: {
-            surface: string;
-            message: string;
-            surfaceEmphasis: string;
-            messageOnEmphasis: string;
-            border: string;
-        };
-        success: {
-            surface: string;
-            message: string;
-            surfaceEmphasis: string;
-            messageOnEmphasis: string;
-            border: string;
-        };
-        warning: {
-            surface: string;
-            message: string;
-            surfaceEmphasis: string;
-            messageOnEmphasis: string;
-            border: string;
-        };
-        error: {
-            surface: string;
-            message: string;
-            surfaceEmphasis: string;
-            messageOnEmphasis: string;
-            border: string;
-        };
-        info: {
-            surface: string;
-            message: string;
-            surfaceEmphasis: string;
-            messageOnEmphasis: string;
-            border: string;
-        };
-        data: {
-            branded: {
-                '1': string;
-                '2': string;
-                '3': string;
-                '4': string;
-            };
-            electric: {
-                '1': string;
-                '2': string;
-                '3': string;
-                '4': string;
-            };
-            gas: {
-                '1': string;
-                '2': string;
-                '3': string;
-                '4': string;
-            };
-        };
-        focus: {
-            outline: string;
-            hover: string;
-            surface: string;
-        };
-        inverted: {
-            surface: string;
-            surfaceAlt: string;
-            border: string;
-            borderAlt: string;
-            message: {
-                branded: string;
-                base: string;
-                secondary: string;
-                link: string;
-            };
-        };
-        message: {
-            base: string;
-            secondary: string;
-            link: string;
-            error: string;
-            branded: string;
-        };
-        surface: {
-            base: string;
-            cutout: string;
-            elevated: string;
-        };
-    };
-    component: {
-        badge: {
-            variants: {
-                neutral: {
-                    background: string;
-                    foreground: string;
-                };
-                red: {
-                    background: string;
-                    foreground: string;
-                };
-                orange: {
-                    background: string;
-                    foreground: string;
-                };
-                yellow: {
-                    background: string;
-                    foreground: string;
-                };
-                green: {
-                    background: string;
-                    foreground: string;
-                };
-                blue: {
-                    background: string;
-                    foreground: string;
-                };
-            };
-        };
-        cta: {
-            primary: {
-                message: string;
-                surface: string;
-                messageHover: string;
-                surfaceHover: string;
-                messageFocused: string;
-                surfaceFocused: string;
-                outlineFocused: string;
-                backgroundFocused: string;
-                messageInverted: string;
-                surfaceInverted: string;
-            };
-            secondary: {
-                message: string;
-                surface: string;
-                messageHover: string;
-                surfaceHover: string;
-                messageFocused: string;
-                surfaceFocused: string;
-                outlineFocused: string;
-                backgroundFocused: string;
-                messageInverted: string;
-                surfaceInverted: string;
-            };
-            destructive: {
-                message: string;
-                surface: string;
-                messageHover: string;
-                surfaceHover: string;
-                messageFocused: string;
-                surfaceFocused: string;
-                outlineFocused: string;
-                backgroundFocused: string;
-                messageInverted: string;
-                surfaceInverted: string;
-            };
-        };
-        heading1: {
-            fontFamily: string;
-            fontWeight: number;
-            lineHeight: {
-                small: number;
-                large: number;
-            };
-            fontSize: {
-                small: number;
-                large: number;
-            };
-        };
-        heading2: {
-            fontFamily: string;
-            fontWeight: number;
-            lineHeight: {
-                small: number;
-                large: number;
-            };
-            fontSize: {
-                small: number;
-                large: number;
-            };
-        };
-        heading3: {
-            fontFamily: string;
-            fontWeight: number;
-            lineHeight: {
-                small: number;
-                large: number;
-            };
-            fontSize: {
-                small: number;
-                large: number;
-            };
-        };
-        heading4: {
-            fontFamily: string;
-            fontWeight: number;
-            lineHeight: {
-                small: number;
-                large: number;
-            };
-            fontSize: {
-                small: number;
-                large: number;
-            };
-        };
-        lead: {
-            fontFamily: string;
-            fontWeight: number;
-            lineHeight: {
-                small: number;
-                large: number;
-            };
-            fontSize: {
-                small: number;
-                large: number;
-            };
-        };
-        body: {
-            fontFamily: string;
-            fontWeight: number;
-            lineHeight: {
-                small: number;
-                large: number;
-            };
-            fontSize: {
-                small: number;
-                large: number;
-            };
-        };
-        small: {
-            fontFamily: string;
-            fontWeight: number;
-            lineHeight: {
-                small: number;
-                large: number;
-            };
-            fontSize: {
-                small: number;
-                large: number;
-            };
-        };
-        label: {
-            fontFamily: string;
-            fontWeight: number;
-            lineHeight: {
-                small: number;
-                large: number;
-            };
-            fontSize: {
-                small: number;
-                large: number;
-            };
-        };
-    };
-}, {}, never>;
-export {};

package/dist/components/FilterSection/FilterSection.js

@@ -1,95 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BlackHeading4 = exports.FilterSection = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-var styled_native_1 = __importDefault(require("../../styled.native"));
-var Heading4_1 = require("../Heading4");
-var FilterButton_1 = require("./components/FilterButton");
-var springSettings = {
-    damping: 15,
-};
-var FilterSection = function (_a) {
-    var filterTitle = _a.filterTitle, localFilter = _a.localFilter, setLocalFilter = _a.setLocalFilter, filters = _a.filters, multipleRows = _a.multipleRows;
-    var animatedX = (0, react_native_reanimated_1.useSharedValue)(0);
-    var animatedY = (0, react_native_reanimated_1.useSharedValue)(0);
-    var animatedWidth = (0, react_native_reanimated_1.useSharedValue)(0);
-    var animatedHeight = (0, react_native_reanimated_1.useSharedValue)(0);
-    var animatedBackgroundStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
-        return {
-            transform: [
-                { translateX: animatedX.value },
-                { translateY: animatedY.value },
-            ],
-            width: animatedWidth.value,
-            height: animatedHeight.value,
-            position: 'absolute',
-            borderRadius: 22,
-            backgroundColor: '#0a9828',
-        };
-    }, [animatedX, animatedY, animatedWidth, animatedHeight]);
-    return ((0, jsx_runtime_1.jsxs)(SectionContainer, { children: [(0, jsx_runtime_1.jsx)(exports.BlackHeading4, { children: filterTitle }), (0, jsx_runtime_1.jsxs)(FilterSelectorContainer, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: animatedBackgroundStyle }), filters.map(function (filter) { return ((0, jsx_runtime_1.jsx)(FilterButton_1.FilterButton, { isSelected: localFilter.key === filter.key, label: filter.label, onPress: function (x, y, width) {
-                            setLocalFilter(filter);
-                            animatedX.value = (0, react_native_reanimated_1.withSpring)(x, springSettings);
-                            animatedY.value = (0, react_native_reanimated_1.withSpring)(y, springSettings);
-                            animatedWidth.value = (0, react_native_reanimated_1.withSpring)(width, springSettings);
-                        }, onLayout: function (width, height, x, y) {
-                            if (localFilter.key === filter.key) {
-                                animatedX.value = x;
-                                // (adrian.pop) - I couldn't figure out how to make the positioning work once the
-                                // choices go on the second row. The only way I could get it to work
-                                // was to hardcode the denominator to 3 for the single row ones
-                                // and 1.1 for the multiple row ones.
-                                animatedY.value = y - height / (multipleRows ? 1.1 : 3);
-                                animatedWidth.value = width;
-                                animatedHeight.value = height;
-                            }
-                        }, multipleRows: multipleRows }, filter.key)); })] })] }));
-};
-exports.FilterSection = FilterSection;
-var SectionContainer = styled_native_1.default.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  gap: ", "px;\n  align-items: flex-start;\n"], ["\n  gap: ", "px;\n  align-items: flex-start;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.core.space[2];
-});
-var FilterSelectorContainer = styled_native_1.default.View(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  padding: ", "px;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: ", "px;\n  border-radius: 22px;\n  width: 100%;\n"], ["\n  background-color: ", ";\n  padding: ", "px;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: ", "px;\n  border-radius: 22px;\n  width: 100%;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.core.color.neutral.lighter;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.core.space[2];
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.core.space[1];
-});
-exports.BlackHeading4 = (0, styled_native_1.default)(Heading4_1.Heading4)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: black;\n"], ["\n  color: black;\n"])));
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/FilterSection/components/FilterButton.d.ts

@@ -1,9 +0,0 @@
-type FilterButtonProps = {
-    onPress: (x: number, y: number, width: number) => void;
-    onLayout: (width: number, height: number, x: number, y: number) => void;
-    isSelected: boolean;
-    label: string;
-    multipleRows?: boolean;
-};
-export declare const FilterButton: ({ onPress, onLayout, isSelected, label, multipleRows, }: FilterButtonProps) => JSX.Element;
-export {};

package/dist/components/FilterSection/index.d.ts

@@ -1,2 +0,0 @@
-import { FilterSelect } from '../FilterSelect';
-export { FilterSelect };

package/dist/components/FilterSection/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterSelect = void 0;
-var FilterSelect_1 = require("../FilterSelect");
-Object.defineProperty(exports, "FilterSelect", { enumerable: true, get: function () { return FilterSelect_1.FilterSelect; } });

package/dist/esm/components/FilterSection/FilterSection.js

@@ -1,65 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Animated, { useAnimatedStyle, useSharedValue, withSpring, } from 'react-native-reanimated';
-import styled from '../../styled.native';
-import { Heading4 } from '../Heading4';
-import { FilterButton } from './components/FilterButton';
-var springSettings = {
-    damping: 15,
-};
-export var FilterSection = function (_a) {
-    var filterTitle = _a.filterTitle, localFilter = _a.localFilter, setLocalFilter = _a.setLocalFilter, filters = _a.filters, multipleRows = _a.multipleRows;
-    var animatedX = useSharedValue(0);
-    var animatedY = useSharedValue(0);
-    var animatedWidth = useSharedValue(0);
-    var animatedHeight = useSharedValue(0);
-    var animatedBackgroundStyle = useAnimatedStyle(function () {
-        return {
-            transform: [
-                { translateX: animatedX.value },
-                { translateY: animatedY.value },
-            ],
-            width: animatedWidth.value,
-            height: animatedHeight.value,
-            position: 'absolute',
-            borderRadius: 22,
-            backgroundColor: '#0a9828',
-        };
-    }, [animatedX, animatedY, animatedWidth, animatedHeight]);
-    return (_jsxs(SectionContainer, { children: [_jsx(BlackHeading4, { children: filterTitle }), _jsxs(FilterSelectorContainer, { children: [_jsx(Animated.View, { style: animatedBackgroundStyle }), filters.map(function (filter) { return (_jsx(FilterButton, { isSelected: localFilter.key === filter.key, label: filter.label, onPress: function (x, y, width) {
-                            setLocalFilter(filter);
-                            animatedX.value = withSpring(x, springSettings);
-                            animatedY.value = withSpring(y, springSettings);
-                            animatedWidth.value = withSpring(width, springSettings);
-                        }, onLayout: function (width, height, x, y) {
-                            if (localFilter.key === filter.key) {
-                                animatedX.value = x;
-                                // (adrian.pop) - I couldn't figure out how to make the positioning work once the
-                                // choices go on the second row. The only way I could get it to work
-                                // was to hardcode the denominator to 3 for the single row ones
-                                // and 1.1 for the multiple row ones.
-                                animatedY.value = y - height / (multipleRows ? 1.1 : 3);
-                                animatedWidth.value = width;
-                                animatedHeight.value = height;
-                            }
-                        }, multipleRows: multipleRows }, filter.key)); })] })] }));
-};
-var SectionContainer = styled.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  gap: ", "px;\n  align-items: flex-start;\n"], ["\n  gap: ", "px;\n  align-items: flex-start;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.core.space[2];
-});
-var FilterSelectorContainer = styled.View(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  padding: ", "px;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: ", "px;\n  border-radius: 22px;\n  width: 100%;\n"], ["\n  background-color: ", ";\n  padding: ", "px;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: ", "px;\n  border-radius: 22px;\n  width: 100%;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.core.color.neutral.lighter;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.core.space[2];
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.core.space[1];
-});
-export var BlackHeading4 = styled(Heading4)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: black;\n"], ["\n  color: black;\n"])));
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/esm/components/FilterSection/index.js

@@ -1,2 +0,0 @@
-import { FilterSelect } from '../FilterSelect';
-export { FilterSelect };