@jobber/components-native 0.20.0 → 0.20.1-test-web-v.8

package/dist/src/BottomSheet/BottomSheet.js

@@ -0,0 +1,52 @@
+import React, { forwardRef, useState } from "react";
+import { Modalize } from "react-native-modalize";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Keyboard, View } from "react-native";
+import { useIntl } from "react-intl";
+import { BottomSheetOption } from "./components/BottomSheetOption";
+import { styles } from "./BottomSheet.style";
+import { messages } from "./messages";
+import { useIsScreenReaderEnabled } from "../hooks";
+import { Divider } from "../Divider";
+import { Heading } from "../Heading";
+export const BottomSheet = forwardRef(BottomSheetInternal);
+function BottomSheetInternal({ children, showCancel, loading = false, heading, onOpen, onClose, }, ref) {
+    const isScreenReaderEnabled = useIsScreenReaderEnabled();
+    const [open, setOpen] = useState(false);
+    return (React.createElement(React.Fragment, null,
+        open && React.createElement(Overlay, null),
+        React.createElement(Modalize, { ref: ref, adjustToContentHeight: true, modalStyle: styles.modal, overlayStyle: styles.overlayModalize, HeaderComponent: heading && React.createElement(Header, { heading: heading }), FooterComponent: React.createElement(Footer, { cancellable: (showCancel && !loading) || isScreenReaderEnabled, onCancel: () => {
+                    var _a;
+                    (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.close();
+                } }), withHandle: false, withReactModal: isScreenReaderEnabled, onOpen: openModal, onClose: closeModal },
+            React.createElement(View, { style: !showCancel && !isScreenReaderEnabled ? styles.children : undefined }, children))));
+    function openModal() {
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        setOpen(true);
+        dismissKeyboard();
+    }
+    function closeModal() {
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+        setOpen(false);
+    }
+}
+function Header({ heading }) {
+    return (React.createElement(View, { style: styles.header },
+        React.createElement(Heading, { level: "subtitle" }, heading)));
+}
+function Footer({ cancellable, onCancel, }) {
+    const insets = useSafeAreaInsets();
+    const { formatMessage } = useIntl();
+    return (React.createElement(View, { style: { marginBottom: insets.bottom } }, cancellable && (React.createElement(View, { style: styles.children },
+        React.createElement(View, { style: styles.footerDivider },
+            React.createElement(Divider, null)),
+        React.createElement(BottomSheetOption, { text: formatMessage(messages.cancel), icon: "remove", onPress: onCancel })))));
+}
+function dismissKeyboard() {
+    //Dismisses the keyboard before opening the bottom sheet.
+    //In the case where an input text field is focused we don't want to show the bottom sheet behind or above keyboard
+    Keyboard.dismiss();
+}
+function Overlay() {
+    return React.createElement(View, { style: styles.overlay });
+}

package/dist/src/BottomSheet/BottomSheet.style.js

@@ -0,0 +1,28 @@
+import { Dimensions, StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+const { height } = Dimensions.get("window");
+const modalBorderRadius = tokens["radius-larger"];
+export const styles = StyleSheet.create({
+    overlayModalize: {
+        backgroundColor: "transparent",
+    },
+    overlay: Object.assign(Object.assign({}, StyleSheet.absoluteFillObject), { backgroundColor: tokens["color-overlay"], height }),
+    modal: {
+        borderTopLeftRadius: modalBorderRadius,
+        borderTopRightRadius: modalBorderRadius,
+        paddingTop: tokens["space-small"],
+    },
+    children: {
+        paddingBottom: tokens["space-small"],
+    },
+    header: {
+        paddingHorizontal: tokens["space-base"],
+        paddingTop: tokens["space-small"],
+        paddingBottom: tokens["space-base"],
+    },
+    footerDivider: {
+        marginHorizontal: tokens["space-base"],
+        marginTop: tokens["space-small"],
+        marginBottom: tokens["space-smaller"],
+    },
+});

package/dist/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { TouchableOpacity, View } from "react-native";
+import { styles } from "./BottomSheetOption.styles";
+import { capitalize } from "../../../utils/intl";
+import { Text } from "../../../Text";
+import { Icon } from "../../../Icon";
+export function BottomSheetOption({ text, icon, iconColor, textAlign, destructive, textTransform = "capitalize", onPress, }) {
+    const destructiveColor = "critical";
+    const textVariation = destructive ? destructiveColor : "subdued";
+    return (React.createElement(TouchableOpacity, { style: styles.bottomSheetOption, onPress: onPress, accessibilityLabel: text },
+        icon && (React.createElement(View, { style: styles.icon },
+            React.createElement(Icon, { name: icon, color: destructive ? destructiveColor : iconColor }))),
+        React.createElement(View, { style: styles.title },
+            React.createElement(Text, { variation: textVariation, emphasis: "strong", align: textAlign }, textTransform === "capitalize"
+                ? capitalize(text.toLocaleLowerCase())
+                : text))));
+}

package/dist/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.styles.js

@@ -0,0 +1,18 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+export const styles = StyleSheet.create({
+    bottomSheetOption: {
+        display: "flex",
+        flexDirection: "row",
+        alignContent: "center",
+        alignItems: "center",
+        padding: tokens["space-small"],
+    },
+    icon: {
+        paddingHorizontal: tokens["space-small"],
+    },
+    title: {
+        paddingHorizontal: tokens["space-small"],
+        flexShrink: 1,
+    },
+});

package/dist/src/BottomSheet/components/BottomSheetOption/index.js

@@ -0,0 +1 @@
+export { BottomSheetOption } from "./BottomSheetOption";

package/dist/src/BottomSheet/index.js

@@ -0,0 +1 @@
+export { BottomSheet } from "./BottomSheet";

package/dist/src/BottomSheet/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from "react-intl";
+export const messages = defineMessages({
+    cancel: {
+        id: "cancel",
+        defaultMessage: "Cancel",
+        description: "Text for the cancel action",
+    },
+});

package/dist/src/EmptyState/EmptyState.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { View } from "react-native";
+import { styles } from "./EmptyState.style";
+import { Text } from "../Text";
+import { Content } from "../Content";
+import { Icon } from "../Icon";
+import { Heading } from "../Heading";
+import { Button } from "../Button";
+function ButtonAction({ action, type }) {
+    if (!action)
+        return React.createElement(React.Fragment, null);
+    return React.createElement(Button, Object.assign({ fullWidth: false, type: type }, action));
+}
+export function EmptyState({ icon, title, description, primaryAction, secondaryAction, iconColor = "blue", }) {
+    return (React.createElement(Content, null,
+        icon && (React.createElement(View, { style: styles.icon },
+            React.createElement(Icon, { name: icon, size: "large", color: iconColor }))),
+        React.createElement(Content, { spacing: "none", childSpacing: "small" },
+            title && (React.createElement(Heading, { level: "subHeading", align: "center" }, title)),
+            description && React.createElement(Text, { align: "center" }, description),
+            (primaryAction || secondaryAction) && (React.createElement(Content, { spacing: "none", childSpacing: "small" },
+                React.createElement(ButtonAction, { action: primaryAction, type: "primary" }),
+                React.createElement(ButtonAction, { action: secondaryAction, type: "tertiary" }))))));
+}

package/dist/src/EmptyState/EmptyState.style.js

@@ -0,0 +1,8 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+export const styles = StyleSheet.create({
+    icon: {
+        marginVertical: tokens["space-small"],
+        alignItems: "center",
+    },
+});

package/dist/src/EmptyState/index.js

@@ -0,0 +1 @@
+export { EmptyState } from "./EmptyState";

package/dist/src/InputPressable/InputPressable.style.js

@@ -1,8 +1,8 @@
-import { JobberStyle } from "@jobber/design/foundation";
+import { tokens } from "@jobber/design/foundation";
 import { StyleSheet } from "react-native";
 import { typographyStyles } from "../Typography/Typography.style";
 const miniLabelFontSize = typographyStyles.smallSize.fontSize || 0;
-const miniLabelPadding = JobberStyle["space-small"];
+const miniLabelPadding = tokens["space-small"];
 export const styles = StyleSheet.create({
     pressable: {
         flex: 1,
@@ -18,6 +18,6 @@ export const styles = StyleSheet.create({
         color: typographyStyles.disabled.color,
     },
     inputInvalid: {
-        borderColor: JobberStyle["color-critical"],
+        borderColor: tokens["color-critical"],
     },
 });

package/dist/src/InputText/InputText.js

@@ -0,0 +1,138 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
+import { Platform, TextInput, } from "react-native";
+import identity from "lodash.identity";
+import { styles } from "./InputText.style";
+import { useInputAccessoriesContext } from "./context";
+import { useFormController } from "../hooks";
+import { InputFieldWrapper, useShowClear, } from "../InputFieldWrapper";
+import { commonInputStyles } from "../InputFieldWrapper/CommonInputStyles.style";
+export const InputText = forwardRef(InputTextInternal);
+// eslint-disable-next-line max-statements
+function InputTextInternal({ invalid, disabled, name, placeholder, assistiveText, keyboard, value: controlledValue, defaultValue, autoFocus, autoComplete = "off", spellCheck, textContentType = "none", validations, onChangeText, onSubmitEditing, onFocus, accessibilityLabel, accessibilityHint, autoCorrect, autoCapitalize, onBlur, multiline = false, prefix, suffix, transform = {}, clearable = multiline ? "never" : "while-editing", testID, secureTextEntry, styleOverride, }, ref) {
+    var _a;
+    const isAndroid = Platform.OS === "android";
+    const { input: inputTransform = identity, output: outputTransform = identity, } = transform;
+    const { error, field } = useFormController({
+        name,
+        value: controlledValue !== null && controlledValue !== void 0 ? controlledValue : defaultValue,
+        validations,
+    });
+    const internalValue = controlledValue !== null && controlledValue !== void 0 ? controlledValue : (_a = field.value) === null || _a === void 0 ? void 0 : _a.toString();
+    const hasValue = internalValue !== "" && internalValue !== undefined;
+    const [focused, setFocused] = useState(false);
+    const { hasMiniLabel, setHasMiniLabel } = useMiniLabel(internalValue);
+    const textInputRef = useTextInputRef({ ref, onClear: handleClear });
+    const showClear = useShowClear({
+        clearable,
+        multiline,
+        focused,
+        hasValue,
+        disabled,
+    });
+    // Android doesn't have an accessibility label like iOS does. By adding
+    // it as a placeholder it readds it like a label. However we don't want to
+    // add a placeholder on iOS.
+    const androidA11yProps = Object.assign({}, (isAndroid && {
+        placeholder: accessibilityLabel || placeholder,
+        placeholderTextColor: "transparent",
+    }));
+    const _name = name !== null && name !== void 0 ? name : field.name;
+    const { inputAccessoryID, register, unregister, setFocusedInput, canFocusNext, onFocusNext, } = useInputAccessoriesContext();
+    useEffect(() => {
+        _name &&
+            register(_name, () => {
+                var _a;
+                (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        return () => {
+            _name && unregister(_name);
+        };
+    }, [_name, register, textInputRef, unregister]);
+    const returnKeyType = useMemo(() => {
+        if (!multiline) {
+            if (inputAccessoryID && isAndroid) {
+                return "next";
+            }
+            else {
+                return "done";
+            }
+        }
+        else {
+            return undefined;
+        }
+    }, [multiline, inputAccessoryID, isAndroid]);
+    // If it's not inside an inputAcessoriesContext or cannot focus next,
+    // then hide the keyboard when the return key is pressed.
+    const shouldBlurOnSubmit = !multiline && (!inputAccessoryID || !canFocusNext || !isAndroid);
+    function handleOnFocusNext() {
+        if (multiline) {
+            return;
+        }
+        onFocusNext();
+    }
+    return (React.createElement(InputFieldWrapper, { prefix: prefix, suffix: suffix, hasValue: hasValue, hasMiniLabel: hasMiniLabel, assistiveText: assistiveText, focused: focused, error: error, invalid: invalid, placeholder: placeholder, disabled: disabled, onClear: handleClear, showClearAction: showClear, styleOverride: styleOverride },
+        React.createElement(TextInput, Object.assign({ inputAccessoryViewID: inputAccessoryID || undefined, testID: testID, autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, spellCheck: spellCheck, style: [
+                commonInputStyles.input,
+                styles.inputPaddingTop,
+                !hasMiniLabel && commonInputStyles.inputEmpty,
+                disabled && commonInputStyles.inputDisabled,
+                multiline && Platform.OS === "ios" && styles.multilineInputiOS,
+                multiline && styles.multiLineInput,
+                multiline && hasMiniLabel && styles.multiLineInputWithMini,
+                styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.inputText,
+            ], editable: !disabled, keyboardType: keyboard, value: inputTransform(internalValue), autoFocus: autoFocus, autoComplete: autoComplete, multiline: multiline, scrollEnabled: false, textContentType: textContentType, onChangeText: handleChangeText, onSubmitEditing: handleOnSubmitEditing, returnKeyType: returnKeyType, blurOnSubmit: shouldBlurOnSubmit, accessibilityLabel: accessibilityLabel || placeholder, accessibilityHint: accessibilityHint, secureTextEntry: secureTextEntry }, androidA11yProps, { onFocus: event => {
+                _name && setFocusedInput(_name);
+                setFocused(true);
+                onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+            }, onBlur: () => {
+                _name && setFocusedInput("");
+                setFocused(false);
+                onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+                field.onBlur();
+                trimWhitespace(field, onChangeText);
+            }, ref: (instance) => {
+                // RHF wants us to do it this way
+                // https://react-hook-form.com/faqs#Howtosharerefusage
+                textInputRef.current = instance;
+                field.ref(instance);
+            } }))));
+    function handleChangeText(value) {
+        const newValue = outputTransform(value);
+        setHasMiniLabel(Boolean(newValue));
+        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(newValue);
+        field.onChange(newValue);
+    }
+    function handleClear() {
+        handleChangeText("");
+    }
+    function handleOnSubmitEditing() {
+        onSubmitEditing === null || onSubmitEditing === void 0 ? void 0 : onSubmitEditing();
+        if (isAndroid) {
+            handleOnFocusNext();
+        }
+    }
+}
+function trimWhitespace(field, onChangeText) {
+    if (!field.value || !field.value.trim) {
+        return;
+    }
+    const trimmedInput = field.value.trim();
+    onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(trimmedInput);
+    field.onChange(trimmedInput);
+}
+function useTextInputRef({ ref, onClear }) {
+    const textInputRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        focus: () => { var _a; return (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+        blur: () => { var _a; return (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+        clear: onClear,
+    }), [onClear]);
+    return textInputRef;
+}
+function useMiniLabel(internalValue) {
+    const [hasMiniLabel, setHasMiniLabel] = useState(Boolean(internalValue));
+    useEffect(() => {
+        setHasMiniLabel(Boolean(internalValue));
+    }, [internalValue]);
+    return { hasMiniLabel, setHasMiniLabel };
+}

package/dist/src/InputText/InputText.style.js

@@ -0,0 +1,20 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+import { typographyStyles } from "../Typography";
+export const styles = StyleSheet.create({
+    inputPaddingTop: {
+        paddingTop: typographyStyles.smallSize.fontSize,
+    },
+    multiLineInput: {
+        paddingTop: tokens["space-base"] - tokens["space-smallest"],
+        paddingBottom: tokens["space-smaller"],
+        lineHeight: typographyStyles.defaultSize.lineHeight,
+    },
+    multiLineInputWithMini: {
+        paddingTop: tokens["space-large"],
+    },
+    multilineInputiOS: {
+        // for placeholder
+        paddingTop: (typographyStyles.smallSize.fontSize || 0) + tokens["space-smallest"],
+    },
+});

package/dist/src/InputText/context/InputAccessoriesContext.js

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+const defaultValues = {
+    elements: {},
+    focusedInput: "",
+    canFocusNext: false,
+    canFocusPrevious: false,
+    inputAccessoryID: undefined,
+    register: () => undefined,
+    unregister: () => undefined,
+    onFocusNext: () => undefined,
+    onFocusPrevious: () => undefined,
+    setFocusedInput: () => undefined,
+};
+export const InputAccessoriesContext = createContext(defaultValues);
+export function useInputAccessoriesContext() {
+    return useContext(InputAccessoriesContext);
+}

package/dist/src/InputText/context/InputAccessoriesProvider.js

@@ -0,0 +1,73 @@
+import React, { useEffect, useRef, useState } from "react";
+import { InputAccessoryView, Keyboard, Platform, 
+// eslint-disable-next-line no-restricted-imports
+Button as RNButton, View, useColorScheme, } from "react-native";
+import { v4 } from "react-native-uuid";
+import { InputAccessoriesContext } from "./InputAccessoriesContext";
+import { styles } from "./InputAccessoriesProvider.style";
+export function InputAccessoriesProvider({ children, }) {
+    const inputAccessoryID = useRef(v4()).current;
+    const { focusedInput, setFocusedInput, canFocusNext, canFocusPrevious, elements, setElements, previousKey, nextKey, } = useInputAccessoriesProviderState();
+    const colorScheme = useColorScheme();
+    return (React.createElement(InputAccessoriesContext.Provider, { value: {
+            elements,
+            focusedInput,
+            canFocusNext,
+            canFocusPrevious,
+            inputAccessoryID,
+            register,
+            unregister,
+            onFocusNext,
+            onFocusPrevious,
+            setFocusedInput,
+        } },
+        children,
+        Platform.OS === "ios" && (React.createElement(InputAccessoryView, { nativeID: inputAccessoryID },
+            React.createElement(View, { testID: "ATL-InputAccessory", style: [
+                    styles.container,
+                    colorScheme === "dark" ? styles.darkTheme : styles.lightTheme,
+                ] },
+                React.createElement(RNButton, { onPress: Keyboard.dismiss, title: "Done", testID: "ATL-InputAccessory-Done", color: colorScheme === "dark" ? "white" : undefined }))))));
+    function register(name, onFocus) {
+        elements[name] = onFocus;
+        setElements(elements);
+    }
+    function unregister(name) {
+        delete elements[name];
+        setElements(elements);
+    }
+    function onFocusNext() {
+        const nextElement = elements[nextKey];
+        nextElement === null || nextElement === void 0 ? void 0 : nextElement();
+    }
+    function onFocusPrevious() {
+        const previousElement = elements[previousKey];
+        previousElement === null || previousElement === void 0 ? void 0 : previousElement();
+    }
+}
+function useInputAccessoriesProviderState() {
+    const [focusedInput, setFocusedInput] = useState("");
+    const [canFocusNext, setCanFocusNext] = useState(false);
+    const [canFocusPrevious, setCanFocusPrevious] = useState(false);
+    const [elements, setElements] = useState({});
+    const keys = Object.keys(elements);
+    const selectedIndex = keys.findIndex(key => key === focusedInput);
+    const nextKey = keys[selectedIndex + 1];
+    const previousKey = keys[selectedIndex - 1];
+    useEffect(() => {
+        setCanFocusNext(Boolean(nextKey));
+        setCanFocusPrevious(Boolean(previousKey));
+    }, [previousKey, nextKey]);
+    return {
+        previousKey,
+        nextKey,
+        focusedInput,
+        setFocusedInput,
+        canFocusNext,
+        setCanFocusNext,
+        canFocusPrevious,
+        setCanFocusPrevious,
+        elements,
+        setElements,
+    };
+}

package/dist/src/InputText/context/InputAccessoriesProvider.style.js

@@ -0,0 +1,21 @@
+import { PlatformColor, StyleSheet } from "react-native";
+import { tokens } from "../../utils/design";
+const BAR_HEIGHT = 44;
+export const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        paddingHorizontal: tokens["space-small"],
+        borderTopWidth: tokens["space-minuscule"],
+        borderTopColor: tokens["color-border"],
+        height: BAR_HEIGHT,
+    },
+    lightTheme: {
+        backgroundColor: tokens["color-surface--background"],
+    },
+    darkTheme: {
+        // PlatformColor has to be conditional for Storybook to run without error
+        backgroundColor: PlatformColor === null || PlatformColor === void 0 ? void 0 : PlatformColor("systemGray3"),
+    },
+});

package/dist/src/InputText/context/InputAccessory.style.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../utils/design";
+export const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingHorizontal: tokens["space-small"],
+        backgroundColor: tokens["color-surface--background"],
+        borderTopWidth: tokens["space-minuscule"],
+        borderTopColor: tokens["color-border"],
+    },
+    buttonContainer: {
+        flexDirection: "row",
+    },
+});

package/dist/src/InputText/context/index.js

@@ -0,0 +1,2 @@
+export * from "./InputAccessoriesContext";
+export * from "./InputAccessoriesProvider";

package/dist/src/InputText/context/types.js

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

package/dist/src/InputText/index.js

@@ -0,0 +1,2 @@
+export { InputText } from "./InputText";
+export * from "./context";

package/dist/src/Switch/Switch.js

@@ -0,0 +1,16 @@
+import React, { useState } from "react";
+import { View } from "react-native";
+import { BaseSwitch } from "./components/BaseSwitch";
+import { styles } from "./Switch.styles";
+import { Text } from "../Text";
+export function Switch(props) {
+    const switchProps = Object.assign(Object.assign({}, props), { accessibilityLabel: props.accessibilityLabel || props.label });
+    const [labelWidth, setLabelWidth] = useState();
+    return (React.createElement(View, { style: styles.container },
+        React.createElement(View, { style: styles.row },
+            props.label && (React.createElement(View, { style: styles.label, onLayout: event => setLabelWidth(event.nativeEvent.layout.width), testID: "switch-label-view" },
+                React.createElement(Text, { variation: props.disabled ? "disabled" : "base" }, props.label))),
+            React.createElement(BaseSwitch, Object.assign({}, switchProps))),
+        props.description && (React.createElement(View, { style: [styles.description, { maxWidth: labelWidth }], testID: "switch-description-view" },
+            React.createElement(Text, { level: "textSupporting", variation: "subdued" }, props.description)))));
+}

package/dist/src/Switch/Switch.styles.js

@@ -0,0 +1,20 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+export const styles = StyleSheet.create({
+    container: {
+        marginTop: tokens["space-base"],
+        marginBottom: tokens["space-base"],
+    },
+    row: {
+        flexDirection: "row",
+        width: "100%",
+    },
+    label: {
+        flex: 1,
+        justifyContent: "center",
+        marginRight: tokens["space-small"],
+    },
+    description: {
+        marginTop: tokens["space-smaller"],
+    },
+});

package/dist/src/Switch/components/BaseSwitch/BaseSwitch.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { Platform } from "react-native";
+import { Switch } from "react-native-gesture-handler";
+import { useFormController } from "../../../hooks";
+import { tokens } from "../../../utils/design";
+export function BaseSwitch({ value, defaultValue, onValueChange, disabled = false, accessibilityLabel, name, }) {
+    const { field } = useFormController({
+        name,
+        value: value !== null && value !== void 0 ? value : defaultValue,
+    });
+    const internalValue = value !== null && value !== void 0 ? value : field.value;
+    function getThumbColor() {
+        if (Platform.OS === "android") {
+            if (disabled) {
+                return tokens["color-disabled"];
+            }
+            else if (internalValue) {
+                return tokens["color-interactive"];
+            }
+            else {
+                return tokens["color-surface--background"];
+            }
+        }
+        return undefined; //use default iOS
+    }
+    function getTrackColors() {
+        if (Platform.OS === "android") {
+            return {
+                true: disabled
+                    ? tokens["color-disabled--secondary"]
+                    : tokens["color-green--lighter"],
+                false: disabled
+                    ? tokens["color-disabled--secondary"]
+                    : tokens["color-disabled"],
+            };
+        }
+        else {
+            //iOS
+            return {
+                true: tokens["color-interactive"],
+                false: tokens["color-surface--background"],
+            };
+        }
+    }
+    return (React.createElement(Switch, { value: internalValue, onValueChange: (val) => {
+            if (!disabled) {
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(val);
+                field.onChange(val);
+            }
+        }, disabled: disabled, thumbColor: getThumbColor(), trackColor: getTrackColors(), ios_backgroundColor: tokens["color-surface--background"], accessibilityLabel: accessibilityLabel, accessibilityRole: "switch", accessibilityState: {
+            disabled: disabled,
+            checked: internalValue,
+        } }));
+}

package/dist/src/Switch/components/BaseSwitch/index.js

@@ -0,0 +1 @@
+export { BaseSwitch } from "./BaseSwitch";

package/dist/src/Switch/index.js

@@ -0,0 +1 @@
+export { Switch } from "./Switch";