@ovotech/element-native 5.5.0 → 5.6.0

package/dist/components/PasswordInput/PasswordVisibilityToggle.js

@@ -4,6 +4,7 @@ exports.PasswordVisibilityToggle = exports.useTogglePasswordVisibility = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Icon_1 = require("../Icon");
+const styled_1 = require("../Input/styled");
 const PasswordInput_styled_1 = require("./PasswordInput.styled");
 const useTogglePasswordVisibility = () => {
     const [isPasswordVisible, setIsPasswordVisible] = (0, react_1.useState)(false);
@@ -16,12 +17,5 @@ const useTogglePasswordVisibility = () => {
     };
 };
 exports.useTogglePasswordVisibility = useTogglePasswordVisibility;
-const PasswordVisibilityToggle = ({ iconName, visibilityToggleLabel, handlePasswordVisibility, }) => {
-    const [focused, setFocused] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsx)(PasswordInput_styled_1.StyledPressable, { testID: "password-input-visibility-toggle", focused: focused, accessible: true, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: 16, onFocus: () => {
-            setFocused(true);
-        }, onBlur: () => {
-            setFocused(false);
-        }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: iconName, size: 16, pointerEvents: "none" }) }));
-};
+const PasswordVisibilityToggle = ({ iconName, visibilityToggleLabel, handlePasswordVisibility, }) => ((0, jsx_runtime_1.jsx)(PasswordInput_styled_1.StyledPressable, { testID: "password-input-visibility-toggle", accessible: true, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: styled_1.ICON_SIZE, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: iconName, size: styled_1.ICON_SIZE, pointerEvents: "none" }) }));
 exports.PasswordVisibilityToggle = PasswordVisibilityToggle;

package/dist/components/RadioCard/RadioCard.d.ts

@@ -6,6 +6,7 @@ type Props = Omit<TouchableOpacityProps, 'children'> & {
     invalid?: boolean;
     activeOpacity?: number;
     ref?: React.Ref<View>;
+    alignment?: 'center' | 'left' | 'right';
 };
-export declare const RadioCard: ({ label, checked, invalid, activeOpacity, testID, ref, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioCard: ({ label, checked, invalid, activeOpacity, testID, alignment, ref, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/RadioCard/RadioCard.js

@@ -10,68 +10,18 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioCard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const element_core_1 = require("@ovotech/element-core");
 const react_native_1 = require("react-native");
-const styled_components_1 = require("styled-components");
-const styled_native_1 = __importDefault(require("../../styled.native"));
 const LabelText_1 = require("../LabelText");
-const StyledRadioInputWrapper = styled_native_1.default.View(({ theme }) => {
-    return `
-      width: ${(0, element_core_1.numToPx)(theme.space[600])};
-      height: ${(0, element_core_1.numToPx)(theme.space[600])};
-      margin-top: ${(0, element_core_1.numToPx)(theme.space[200])};
-    `;
-});
-const StyledRadioInput = styled_native_1.default.View(({ theme, invalid, checked }) => {
-    return `
-      width: ${(0, element_core_1.numToPx)(theme.space[600])};
-      height: ${(0, element_core_1.numToPx)(theme.space[600])};
-      border: ${(0, element_core_1.numToPx)(theme.border.width.md)} solid;
-      align-items: center;
-      justify-content: center;
-      border-radius: ${(0, element_core_1.numToPx)(theme.space[600])};
-      border-color: ${invalid
-        ? theme.input.color.borderError
-        : checked
-            ? theme.input.color.selected
-            : theme.input.color.border};
-      background: ${checked ? theme.input.color.selectedTint : 'transparent'};
-    `;
-});
-const StyledRadioInputDot = styled_native_1.default.View(({ theme, checked }) => {
-    return `
-      width: ${(0, element_core_1.numToPx)(theme.space[300])};
-      height: ${(0, element_core_1.numToPx)(theme.space[300])};
-      border-radius: ${(0, element_core_1.numToPx)(theme.space[300])};
-      background: ${theme.input.color.selected};
-      opacity: ${checked ? 1 : 0};
-    `;
-});
-const Input = (_a) => {
-    var { checked, invalid, testID } = _a, rest = __rest(_a, ["checked", "invalid", "testID"]);
-    return ((0, jsx_runtime_1.jsx)(StyledRadioInputWrapper, Object.assign({}, rest, { children: (0, jsx_runtime_1.jsx)(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: (0, jsx_runtime_1.jsx)(StyledRadioInputDot, { checked: checked }) }) })));
-};
-const StyledWrapper = styled_native_1.default.View(({ theme, checked, invalid }) => (0, styled_components_1.css) `
-    align-items: center;
-    background: ${theme.color.surface.bright};
-    padding: ${(0, element_core_1.numToPx)(theme.space[200])};
-    min-width: 82px;
-    border-radius: ${(0, element_core_1.numToPx)(theme.border.radius.lg)};
-    border: ${(0, element_core_1.numToPx)(theme.border.width.md)} solid;
-    border-color: ${invalid
-    ? theme.input.color.borderError
-    : checked
-        ? theme.input.color.selected
-        : 'transparent'};
-  `);
+const RadioCard_styles_1 = require("./RadioCard.styles");
 const RadioCard = (_a) => {
-    var { label, checked, invalid, activeOpacity = 0.8, testID, ref } = _a, rest = __rest(_a, ["label", "checked", "invalid", "activeOpacity", "testID", "ref"]);
-    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, Object.assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked } }, rest, { children: (0, jsx_runtime_1.jsxs)(StyledWrapper, { checked: checked, invalid: invalid, children: [typeof label === 'string' ? (0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }) : label, (0, jsx_runtime_1.jsx)(Input, { checked: checked, invalid: invalid, testID: testID })] }) })));
+    var { label, checked, invalid, activeOpacity = 0.8, testID, alignment = 'center', ref } = _a, rest = __rest(_a, ["label", "checked", "invalid", "activeOpacity", "testID", "alignment", "ref"]);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, Object.assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked } }, rest, { children: (0, jsx_runtime_1.jsxs)(RadioCard_styles_1.StyledWrapper, { checked: checked, invalid: invalid, alignment: alignment, children: [(0, jsx_runtime_1.jsx)(RadioCard_styles_1.TextContainer, { children: typeof label === 'string' ? (0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }) : label }), (0, jsx_runtime_1.jsx)(Input, { checked: checked, invalid: invalid, testID: testID })] }) })));
 };
 exports.RadioCard = RadioCard;
+const Input = (_a) => {
+    var { checked, invalid, testID } = _a, rest = __rest(_a, ["checked", "invalid", "testID"]);
+    return ((0, jsx_runtime_1.jsx)(RadioCard_styles_1.StyledRadioInputWrapper, Object.assign({}, rest, { children: (0, jsx_runtime_1.jsx)(RadioCard_styles_1.StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: (0, jsx_runtime_1.jsx)(RadioCard_styles_1.StyledRadioInputDot, { checked: checked }) }) })));
+};