rn-feav-ui 1.0.5 → 1.0.7

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

@@ -1,8 +1,15 @@
 import * as React from "react";
-import { StyleProp, ViewStyle } from "react-native";
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
 type BadgeProps = {
     label: string;
+    /** Optional leading icon or dot. */
+    leftIcon?: React.ReactNode;
     style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    testID?: string;
+    accessibilityLabel?: string;
+    /** If set, badge is tappable. */
+    onPress?: () => void;
 };
-export declare const BadgeFEA: ({ label, style }: BadgeProps) => React.JSX.Element;
+export declare const BadgeFEA: ({ label, leftIcon, style, textStyle, testID, accessibilityLabel, onPress, }: BadgeProps) => React.JSX.Element;
 export {};

package/dist/components/Badge/index.js

@@ -38,23 +38,38 @@ var ThemeFEAVUiProvider_1 = require("../../theme/ThemeFEAVUiProvider");
 var React = __importStar(require("react"));
 var react_native_1 = require("react-native");
 var BadgeFEA = function (_a) {
-    var label = _a.label, _b = _a.style, style = _b === void 0 ? {} : _b;
+    var label = _a.label, leftIcon = _a.leftIcon, _b = _a.style, style = _b === void 0 ? {} : _b, textStyle = _a.textStyle, testID = _a.testID, accessibilityLabel = _a.accessibilityLabel, onPress = _a.onPress;
     var theme = (0, ThemeFEAVUiProvider_1.useTheme)().theme;
-    return (React.createElement(react_native_1.View, { style: [
-            styles.badge,
-            {
-                backgroundColor: theme.colors.secondary,
-                borderColor: theme.colors.border,
-            },
-            style,
-        ] },
+    var body = (React.createElement(React.Fragment, null,
+        leftIcon,
         React.createElement(react_native_1.Text, { style: [
                 styles.label,
                 { color: theme.colors.secondaryForeground },
+                textStyle,
             ] }, label)));
+    var shellStyle = [
+        styles.badge,
+        {
+            backgroundColor: theme.colors.secondary,
+            borderColor: theme.colors.border,
+        },
+        style,
+    ];
+    if (onPress) {
+        return (React.createElement(react_native_1.Pressable, { testID: testID, accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : label, accessibilityRole: "button", onPress: onPress, style: function (_a) {
+                var pressed = _a.pressed;
+                return [shellStyle, styles.row, pressed && { opacity: 0.85 }];
+            } }, body));
+    }
+    return (React.createElement(react_native_1.View, { testID: testID, accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : label, style: [shellStyle, styles.row] }, body));
 };
 exports.BadgeFEA = BadgeFEA;
 var styles = react_native_1.StyleSheet.create({
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 6,
+    },
     badge: {
         paddingHorizontal: 10,
         paddingVertical: 4,

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

@@ -1,14 +1,21 @@
 import * as React from "react";
-import { StyleProp, ViewStyle } from "react-native";
+import { StyleProp, TextStyle, TouchableOpacityProps, ViewStyle } from "react-native";
 type ButtonVariant = "primary" | "glass" | "soft" | "outline" | "ghost";
 type ButtonSize = "default" | "sm" | "lg";
+type TouchablePassthrough = Pick<TouchableOpacityProps, "testID" | "accessibilityLabel" | "accessibilityHint" | "accessibilityRole" | "accessibilityState" | "hitSlop" | "delayLongPress" | "activeOpacity">;
 type ButtonProps = {
     title: string;
     variant?: ButtonVariant;
     size?: ButtonSize;
     onPress: () => void;
     disabled?: boolean;
+    loading?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    /** Stretch to parent width (common for forms). */
+    fullWidth?: boolean;
     style?: StyleProp<ViewStyle>;
-};
-export declare const ButtonFEA: ({ title, variant, size, onPress, disabled, style, }: ButtonProps) => React.JSX.Element;
+    textStyle?: StyleProp<TextStyle>;
+} & TouchablePassthrough;
+export declare const ButtonFEA: ({ title, variant, size, onPress, disabled, loading, leftIcon, rightIcon, fullWidth, style, textStyle, testID, accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityState, hitSlop, delayLongPress, activeOpacity, }: ButtonProps) => React.JSX.Element;
 export {};

package/dist/components/Button/index.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -39,85 +50,95 @@ var ThemeFEAVUiProvider_1 = require("../../theme/ThemeFEAVUiProvider");
 var react_native_1 = require("react-native");
 var GlassCard_1 = require("../GlassCard");
 var ButtonFEA = function (_a) {
-    var title = _a.title, _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.size, size = _c === void 0 ? "default" : _c, onPress = _a.onPress, _d = _a.disabled, disabled = _d === void 0 ? false : _d, style = _a.style;
+    var title = _a.title, _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.size, size = _c === void 0 ? "default" : _c, onPress = _a.onPress, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.loading, loading = _e === void 0 ? false : _e, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, _f = _a.fullWidth, fullWidth = _f === void 0 ? false : _f, style = _a.style, textStyle = _a.textStyle, testID = _a.testID, accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, _g = _a.accessibilityRole, accessibilityRole = _g === void 0 ? "button" : _g, accessibilityState = _a.accessibilityState, hitSlop = _a.hitSlop, delayLongPress = _a.delayLongPress, activeOpacity = _a.activeOpacity;
     var theme = (0, ThemeFEAVUiProvider_1.useTheme)().theme;
     var sizeStyle = size === "sm"
         ? styles.sizeSm
         : size === "lg"
             ? styles.sizeLg
             : styles.sizeDefault;
+    var inactive = disabled || loading;
+    var touchableProps = {
+        testID: testID,
+        accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : title,
+        accessibilityHint: accessibilityHint,
+        accessibilityRole: accessibilityRole,
+        accessibilityState: __assign({ disabled: inactive }, accessibilityState),
+        hitSlop: hitSlop,
+        delayLongPress: delayLongPress,
+        activeOpacity: activeOpacity !== null && activeOpacity !== void 0 ? activeOpacity : (variant === "glass" ? 0.85 : 0.9),
+        onPress: onPress,
+        disabled: inactive,
+    };
+    var widthStyle = fullWidth ? { alignSelf: "stretch", width: "100%" } : undefined;
+    var renderLabel = function (color, opacity) { return (React.createElement(react_native_1.View, { style: styles.contentRow },
+        loading ? (React.createElement(react_native_1.ActivityIndicator, { size: "small", color: color })) : (leftIcon),
+        React.createElement(react_native_1.Text, { style: [styles.text, { color: color, opacity: opacity }, textStyle] }, title),
+        !loading ? rightIcon : null)); };
     if (variant === "glass") {
-        return (React.createElement(GlassCard_1.GlassCardFEA, { style: [styles.glassCard, style] },
-            React.createElement(react_native_1.TouchableOpacity, { onPress: onPress, activeOpacity: 0.85, style: [styles.baseButton, sizeStyle], disabled: disabled },
-                React.createElement(react_native_1.Text, { style: [
-                        styles.text,
-                        { color: theme.colors.foreground, opacity: disabled ? 0.5 : 1 },
-                    ] }, title))));
+        return (React.createElement(GlassCard_1.GlassCardFEA, { style: [styles.glassCard, widthStyle, style] },
+            React.createElement(react_native_1.TouchableOpacity, __assign({}, touchableProps, { style: [styles.baseButton, sizeStyle] }), renderLabel(theme.colors.foreground, inactive ? 0.5 : 1))));
     }
     if (variant === "soft") {
-        return (React.createElement(react_native_1.TouchableOpacity, { onPress: onPress, activeOpacity: 0.9, disabled: disabled, style: [
+        return (React.createElement(react_native_1.TouchableOpacity, __assign({}, touchableProps, { style: [
                 styles.baseButton,
                 sizeStyle,
                 styles.softButton,
                 { backgroundColor: theme.colors.secondary, borderColor: theme.colors.border },
-                disabled && styles.disabled,
+                inactive && styles.disabled,
+                widthStyle,
                 style,
-            ] },
-            React.createElement(react_native_1.Text, { style: [
-                    styles.text,
-                    { color: theme.colors.secondaryForeground, opacity: disabled ? 0.6 : 1 },
-                ] }, title)));
+            ] }), renderLabel(theme.colors.secondaryForeground, inactive ? 0.6 : 1)));
     }
     if (variant === "outline") {
-        return (React.createElement(react_native_1.TouchableOpacity, { onPress: onPress, activeOpacity: 0.9, disabled: disabled, style: [
+        return (React.createElement(react_native_1.TouchableOpacity, __assign({}, touchableProps, { style: [
                 styles.baseButton,
                 sizeStyle,
                 styles.outlineButton,
                 {
                     borderColor: theme.colors.border,
                 },
-                disabled && styles.disabled,
+                inactive && styles.disabled,
+                widthStyle,
                 style,
-            ] },
-            React.createElement(react_native_1.Text, { style: [
-                    styles.text,
-                    {
-                        color: theme.colors.foreground,
-                        opacity: disabled ? 0.6 : 1,
-                    },
-                ] }, title)));
+            ] }), renderLabel(theme.colors.foreground, inactive ? 0.6 : 1)));
     }
     if (variant === "ghost") {
-        return (React.createElement(react_native_1.TouchableOpacity, { onPress: onPress, activeOpacity: 0.9, disabled: disabled, style: [
+        return (React.createElement(react_native_1.TouchableOpacity, __assign({}, touchableProps, { style: [
                 styles.baseButton,
                 sizeStyle,
                 styles.ghostButton,
-                disabled && styles.disabledGhost,
+                inactive && styles.disabledGhost,
+                widthStyle,
                 style,
-            ] },
-            React.createElement(react_native_1.Text, { style: [
-                    styles.text,
-                    {
-                        color: theme.colors.foreground,
-                        opacity: disabled ? 0.5 : 1,
-                    },
-                ] }, title)));
+            ] }), renderLabel(theme.colors.foreground, inactive ? 0.5 : 1)));
     }
-    return (React.createElement(react_native_1.TouchableOpacity, { onPress: onPress, activeOpacity: 0.9, disabled: disabled, style: [
+    return (React.createElement(react_native_1.TouchableOpacity, __assign({}, touchableProps, { style: [
             styles.baseButton,
             sizeStyle,
             { backgroundColor: theme.colors.primary },
-            disabled && { opacity: 0.7 },
+            inactive && { opacity: 0.7 },
+            widthStyle,
             style,
-        ] },
-        React.createElement(react_native_1.Text, { style: [
-                styles.text,
-                { color: theme.colors.primaryForeground },
-                disabled && { opacity: 0.8 },
-            ] }, title)));
+        ] }),
+        React.createElement(react_native_1.View, { style: styles.contentRow },
+            loading ? (React.createElement(react_native_1.ActivityIndicator, { size: "small", color: theme.colors.primaryForeground })) : (leftIcon),
+            React.createElement(react_native_1.Text, { style: [
+                    styles.text,
+                    { color: theme.colors.primaryForeground },
+                    inactive && { opacity: 0.8 },
+                    textStyle,
+                ] }, title),
+            !loading ? rightIcon : null)));
 };
 exports.ButtonFEA = ButtonFEA;
 var styles = react_native_1.StyleSheet.create({
+    contentRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8,
+    },
     baseButton: {
         borderRadius: 999,
         justifyContent: "center",

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

@@ -1,8 +1,12 @@
 import * as React from "react";
-import { StyleProp, ViewStyle } from "react-native";
+import { StyleProp, ViewProps, ViewStyle } from "react-native";
 type CardProps = {
     children: React.ReactNode;
     style?: StyleProp<ViewStyle>;
-};
-export declare const CardFEA: ({ children, style }: CardProps) => React.JSX.Element;
+    /** When set, the card is pressable (e.g. list row). */
+    onPress?: () => void;
+    /** Passed to the root `View` or `Pressable`. */
+    testID?: string;
+} & Pick<ViewProps, "accessibilityLabel" | "accessibilityRole" | "accessibilityHint">;
+export declare const CardFEA: ({ children, style, onPress, testID, accessibilityLabel, accessibilityRole, accessibilityHint, }: CardProps) => React.JSX.Element;
 export {};

package/dist/components/Card/index.js

@@ -38,16 +38,23 @@ var React = __importStar(require("react"));
 var react_native_1 = require("react-native");
 var ThemeFEAVUiProvider_1 = require("../../theme/ThemeFEAVUiProvider");
 var CardFEA = function (_a) {
-    var children = _a.children, style = _a.style;
+    var children = _a.children, style = _a.style, onPress = _a.onPress, testID = _a.testID, accessibilityLabel = _a.accessibilityLabel, accessibilityRole = _a.accessibilityRole, accessibilityHint = _a.accessibilityHint;
     var theme = (0, ThemeFEAVUiProvider_1.useTheme)().theme;
-    return (React.createElement(react_native_1.View, { style: [
-            styles.card,
-            {
-                backgroundColor: theme.colors.card,
-                borderColor: theme.colors.border,
-            },
-            style,
-        ] }, children));
+    var cardStyle = [
+        styles.card,
+        {
+            backgroundColor: theme.colors.card,
+            borderColor: theme.colors.border,
+        },
+        style,
+    ];
+    if (onPress) {
+        return (React.createElement(react_native_1.Pressable, { onPress: onPress, testID: testID, accessibilityLabel: accessibilityLabel, accessibilityRole: accessibilityRole !== null && accessibilityRole !== void 0 ? accessibilityRole : "button", accessibilityHint: accessibilityHint, style: function (_a) {
+                var pressed = _a.pressed;
+                return [cardStyle, pressed && { opacity: 0.92 }];
+            } }, children));
+    }
+    return (React.createElement(react_native_1.View, { testID: testID, accessibilityLabel: accessibilityLabel, accessibilityRole: accessibilityRole, accessibilityHint: accessibilityHint, style: cardStyle }, children));
 };
 exports.CardFEA = CardFEA;
 var styles = react_native_1.StyleSheet.create({

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

@@ -1,7 +1,15 @@
 import * as React from "react";
-export declare const CheckboxFEA: ({ checked, onChange, label, disabled, }: {
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
+export declare const CheckboxFEA: ({ checked, onChange, label, disabled, size, style, testID, accessibilityLabel, accessibilityHint, labelStyle, }: {
     checked: boolean;
     onChange: (next: boolean) => void;
     label?: string;
     disabled?: boolean;
+    /** Box width/height in dp. */
+    size?: number;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    labelStyle?: StyleProp<TextStyle>;
 }) => React.JSX.Element;

package/dist/components/Checkbox/index.js

@@ -38,18 +38,27 @@ var React = __importStar(require("react"));
 var react_native_1 = require("react-native");
 var ThemeFEAVUiProvider_1 = require("../../theme/ThemeFEAVUiProvider");
 var CheckboxFEA = function (_a) {
-    var checked = _a.checked, onChange = _a.onChange, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
+    var checked = _a.checked, onChange = _a.onChange, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 18 : _c, style = _a.style, testID = _a.testID, accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, labelStyle = _a.labelStyle;
     var theme = (0, ThemeFEAVUiProvider_1.useTheme)().theme;
-    return (React.createElement(react_native_1.Pressable, { onPress: function () { return !disabled && onChange(!checked); }, style: styles.row, disabled: disabled },
+    return (React.createElement(react_native_1.Pressable, { testID: testID, accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : label, accessibilityHint: accessibilityHint, accessibilityRole: "checkbox", accessibilityState: { checked: checked, disabled: disabled }, onPress: function () { return !disabled && onChange(!checked); }, style: [styles.row, style], disabled: disabled },
         React.createElement(react_native_1.View, { style: [
                 styles.box,
                 {
+                    width: size,
+                    height: size,
+                    borderRadius: Math.max(4, size / 5),
                     borderColor: checked ? theme.colors.primary : theme.colors.input,
                     backgroundColor: checked ? theme.colors.primary : "transparent",
                     opacity: disabled ? 0.5 : 1,
                 },
-            ] }, checked ? React.createElement(react_native_1.Text, { style: styles.tick }, "\u2713") : null),
-        label ? (React.createElement(react_native_1.Text, { style: { color: theme.colors.foreground, opacity: disabled ? 0.6 : 1 } }, label)) : null));
+            ] }, checked ? (React.createElement(react_native_1.Text, { style: [
+                styles.tick,
+                { fontSize: Math.max(10, size * 0.65), lineHeight: Math.max(12, size * 0.72) },
+            ] }, "\u2713")) : null),
+        label ? (React.createElement(react_native_1.Text, { style: [
+                { color: theme.colors.foreground, opacity: disabled ? 0.6 : 1, flexShrink: 1 },
+                labelStyle,
+            ] }, label)) : null));
 };
 exports.CheckboxFEA = CheckboxFEA;
 var styles = react_native_1.StyleSheet.create({
@@ -59,17 +68,12 @@ var styles = react_native_1.StyleSheet.create({
         gap: 8,
     },
     box: {
-        width: 18,
-        height: 18,
-        borderRadius: 4,
         borderWidth: 1.5,
         alignItems: "center",
         justifyContent: "center",
     },
     tick: {
         color: "#ffffff",
-        fontSize: 12,
-        lineHeight: 13,
         fontWeight: "700",
     },
 });

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

@@ -1,8 +1,7 @@
 import * as React from "react";
-import { StyleProp, ViewStyle } from "react-native";
-type InputProps = {
-    placeholder: string;
-    style?: StyleProp<ViewStyle>;
+import { StyleProp, TextInputProps, TextStyle } from "react-native";
+export type InputFEAProps = Omit<TextInputProps, "placeholderTextColor" | "style"> & {
+    /** Merged after themed base styles. */
+    style?: StyleProp<TextStyle>;
 };
-export declare const InputFEA: ({ placeholder, style }: InputProps) => React.JSX.Element;
-export {};
+export declare const InputFEA: ({ style, editable, ...rest }: InputFEAProps) => React.JSX.Element;

package/dist/components/Input/index.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -32,23 +43,35 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+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.InputFEA = void 0;
 var ThemeFEAVUiProvider_1 = require("../../theme/ThemeFEAVUiProvider");
 var React = __importStar(require("react"));
 var react_native_1 = require("react-native");
 var InputFEA = function (_a) {
-    var placeholder = _a.placeholder, _b = _a.style, style = _b === void 0 ? {} : _b;
+    var style = _a.style, _b = _a.editable, editable = _b === void 0 ? true : _b, rest = __rest(_a, ["style", "editable"]);
     var theme = (0, ThemeFEAVUiProvider_1.useTheme)().theme;
-    return (React.createElement(react_native_1.TextInput, { placeholder: placeholder, placeholderTextColor: theme.colors.mutedForeground, style: [
+    return (React.createElement(react_native_1.TextInput, __assign({ editable: editable, placeholderTextColor: theme.colors.mutedForeground }, rest, { style: [
             styles.base,
             {
                 backgroundColor: theme.colors.background,
                 color: theme.colors.foreground,
                 borderColor: theme.colors.input,
+                opacity: editable ? 1 : 0.55,
             },
             style,
-        ] }));
+        ] })));
 };
 exports.InputFEA = InputFEA;
 var styles = react_native_1.StyleSheet.create({

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

@@ -1,6 +1,13 @@
 import * as React from "react";
 import { StyleProp, TextStyle } from "react-native";
-export declare const LabelFEA: ({ children, style, }: {
+export declare const LabelFEA: ({ children, style, required, disabled, testID, nativeID, numberOfLines, }: {
     children: React.ReactNode;
     style?: StyleProp<TextStyle>;
+    /** Shows a trailing asterisk when true. */
+    required?: boolean;
+    disabled?: boolean;
+    testID?: string;
+    /** Wire to an input via `nativeID` / `accessibilityLabelledBy` patterns. */
+    nativeID?: string;
+    numberOfLines?: number;
 }) => React.JSX.Element;

package/dist/components/Label/index.js

@@ -38,9 +38,15 @@ var React = __importStar(require("react"));
 var react_native_1 = require("react-native");
 var ThemeFEAVUiProvider_1 = require("../../theme/ThemeFEAVUiProvider");
 var LabelFEA = function (_a) {
-    var children = _a.children, style = _a.style;
+    var children = _a.children, style = _a.style, required = _a.required, disabled = _a.disabled, testID = _a.testID, nativeID = _a.nativeID, numberOfLines = _a.numberOfLines;
     var theme = (0, ThemeFEAVUiProvider_1.useTheme)().theme;
-    return React.createElement(react_native_1.Text, { style: [styles.base, { color: theme.colors.text }, style] }, children);
+    return (React.createElement(react_native_1.Text, { nativeID: nativeID, testID: testID, numberOfLines: numberOfLines, style: [
+            styles.base,
+            { color: theme.colors.foreground, opacity: disabled ? 0.6 : 1 },
+            style,
+        ] },
+        children,
+        required ? React.createElement(react_native_1.Text, { style: { color: theme.colors.destructive } }, " *") : null));
 };
 exports.LabelFEA = LabelFEA;
 var styles = react_native_1.StyleSheet.create({

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

@@ -1,9 +1,16 @@
 import * as React from "react";
-import { StyleProp, ViewStyle } from "react-native";
-export declare const SwitchFEA: ({ value, onValueChange, label, style, disabled, }: {
+import { StyleProp, ViewStyle, ColorValue } from "react-native";
+export declare const SwitchFEA: ({ value, onValueChange, label, labelPosition, style, disabled, testID, accessibilityLabel, thumbColor, ios_backgroundColor, }: {
     value: boolean;
     onValueChange: (next: boolean) => void;
     label?: string;
+    /** Label row placement relative to the switch. */
+    labelPosition?: "left" | "right";
     style?: StyleProp<ViewStyle>;
     disabled?: boolean;
+    testID?: string;
+    accessibilityLabel?: string;
+    /** Overrides default white thumb. */
+    thumbColor?: ColorValue;
+    ios_backgroundColor?: ColorValue;
 }) => React.JSX.Element;

package/dist/components/Switch/index.js

@@ -38,10 +38,16 @@ var React = __importStar(require("react"));
 var react_native_1 = require("react-native");
 var ThemeFEAVUiProvider_1 = require("../../theme/ThemeFEAVUiProvider");
 var SwitchFEA = function (_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, label = _a.label, style = _a.style, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
+    var value = _a.value, onValueChange = _a.onValueChange, label = _a.label, _b = _a.labelPosition, labelPosition = _b === void 0 ? "left" : _b, style = _a.style, _c = _a.disabled, disabled = _c === void 0 ? false : _c, testID = _a.testID, accessibilityLabel = _a.accessibilityLabel, thumbColor = _a.thumbColor, ios_backgroundColor = _a.ios_backgroundColor;
     var theme = (0, ThemeFEAVUiProvider_1.useTheme)().theme;
-    return (React.createElement(react_native_1.View, { style: [{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, style] },
-        label ? (React.createElement(react_native_1.Text, { style: { color: theme.colors.foreground, opacity: disabled ? 0.6 : 1 } }, label)) : (React.createElement(react_native_1.View, null)),
-        React.createElement(react_native_1.Switch, { value: value, onValueChange: onValueChange, disabled: disabled, trackColor: { false: theme.colors.input, true: theme.colors.primary }, thumbColor: "#ffffff" })));
+    var labelEl = label ? (React.createElement(react_native_1.Text, { style: { color: theme.colors.foreground, opacity: disabled ? 0.6 : 1, flexShrink: 1 } }, label)) : null;
+    var track = { false: theme.colors.input, true: theme.colors.primary };
+    var sw = (React.createElement(react_native_1.Switch, { testID: testID, accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : label, value: value, onValueChange: onValueChange, disabled: disabled, trackColor: track, thumbColor: thumbColor !== null && thumbColor !== void 0 ? thumbColor : "#ffffff", ios_backgroundColor: ios_backgroundColor }));
+    return (React.createElement(react_native_1.View, { style: [
+            { flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 12 },
+            style,
+        ] }, labelPosition === "left" ? (React.createElement(React.Fragment, null, labelEl !== null && labelEl !== void 0 ? labelEl : React.createElement(react_native_1.View, null),
+        sw)) : (React.createElement(React.Fragment, null,
+        sw, labelEl !== null && labelEl !== void 0 ? labelEl : React.createElement(react_native_1.View, null)))));
 };
 exports.SwitchFEA = SwitchFEA;

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

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { StyleProp, ViewStyle } from "react-native";
-export declare const TextareaFEA: ({ placeholder, style, }: {
-    placeholder?: string;
-    style?: StyleProp<ViewStyle>;
-}) => React.JSX.Element;
+import { StyleProp, TextInputProps, TextStyle } from "react-native";
+export type TextareaFEAProps = Omit<TextInputProps, "placeholderTextColor" | "style" | "multiline"> & {
+    style?: StyleProp<TextStyle>;
+};
+export declare const TextareaFEA: ({ style, editable, ...rest }: TextareaFEAProps) => React.JSX.Element;

package/dist/components/Textarea/index.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -32,23 +43,35 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+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.TextareaFEA = void 0;
 var React = __importStar(require("react"));
 var react_native_1 = require("react-native");
 var ThemeFEAVUiProvider_1 = require("../../theme/ThemeFEAVUiProvider");
 var TextareaFEA = function (_a) {
-    var placeholder = _a.placeholder, style = _a.style;
+    var style = _a.style, _b = _a.editable, editable = _b === void 0 ? true : _b, rest = __rest(_a, ["style", "editable"]);
     var theme = (0, ThemeFEAVUiProvider_1.useTheme)().theme;
-    return (React.createElement(react_native_1.TextInput, { multiline: true, textAlignVertical: "top", placeholder: placeholder, placeholderTextColor: theme.colors.mutedForeground, style: [
+    return (React.createElement(react_native_1.TextInput, __assign({ multiline: true, textAlignVertical: "top", editable: editable, placeholderTextColor: theme.colors.mutedForeground }, rest, { style: [
             styles.base,
             {
                 backgroundColor: theme.colors.background,
                 color: theme.colors.foreground,
                 borderColor: theme.colors.input,
+                opacity: editable ? 1 : 0.55,
             },
             style,
-        ] }));
+        ] })));
 };
 exports.TextareaFEA = TextareaFEA;
 var styles = react_native_1.StyleSheet.create({

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

@@ -1,9 +1,16 @@
 import * as React from "react";
 import { StyleProp, TextStyle } from "react-native";
 type TypographyVariant = "h1" | "h2" | "h3" | "p" | "small" | "muted";
-export declare const TypographyFEA: ({ children, variant, style, }: {
+export declare const TypographyFEA: ({ children, variant, style, numberOfLines, ellipsizeMode, selectable, testID, maxFontSizeMultiplier, onPress, accessibilityRole, }: {
     children: React.ReactNode;
     variant?: TypographyVariant;
     style?: StyleProp<TextStyle>;
+    numberOfLines?: number;
+    ellipsizeMode?: "head" | "middle" | "tail" | "clip";
+    selectable?: boolean;
+    testID?: string;
+    maxFontSizeMultiplier?: number;
+    onPress?: () => void;
+    accessibilityRole?: "text" | "header" | "link" | "none";
 }) => React.JSX.Element;
 export {};

package/dist/components/Typography/index.js

@@ -38,7 +38,7 @@ var React = __importStar(require("react"));
 var react_native_1 = require("react-native");
 var ThemeFEAVUiProvider_1 = require("../../theme/ThemeFEAVUiProvider");
 var TypographyFEA = function (_a) {
-    var children = _a.children, _b = _a.variant, variant = _b === void 0 ? "p" : _b, style = _a.style;
+    var children = _a.children, _b = _a.variant, variant = _b === void 0 ? "p" : _b, style = _a.style, numberOfLines = _a.numberOfLines, ellipsizeMode = _a.ellipsizeMode, selectable = _a.selectable, testID = _a.testID, maxFontSizeMultiplier = _a.maxFontSizeMultiplier, onPress = _a.onPress, accessibilityRole = _a.accessibilityRole;
     var theme = (0, ThemeFEAVUiProvider_1.useTheme)().theme;
     var variantStyle = variant === "h1"
         ? styles.h1
@@ -51,7 +51,7 @@ var TypographyFEA = function (_a) {
                     : variant === "muted"
                         ? styles.muted
                         : styles.p;
-    return (React.createElement(react_native_1.Text, { style: [
+    return (React.createElement(react_native_1.Text, { testID: testID, accessibilityRole: accessibilityRole, numberOfLines: numberOfLines, ellipsizeMode: ellipsizeMode, selectable: selectable, maxFontSizeMultiplier: maxFontSizeMultiplier, onPress: onPress, style: [
             variantStyle,
             {
                 color: variant === "muted" ? theme.colors.mutedForeground : theme.colors.foreground,

package/dist/examples/Showcase.d.ts

@@ -1,2 +1,10 @@
 import * as React from "react";
-export declare const Showcase: () => React.JSX.Element;
+import { ViewStyle } from "react-native";
+type ShowcaseScreenPropsFEA = {
+    contentContainerStyle?: ViewStyle;
+};
+export declare const ShowcaseScreenFEA: ({ contentContainerStyle }: ShowcaseScreenPropsFEA) => React.JSX.Element;
+export declare const ShowcaseWithProviderFEA: (props: ShowcaseScreenPropsFEA) => React.JSX.Element;
+export declare const ShowcaseFEA: (props: ShowcaseScreenPropsFEA) => React.JSX.Element;
+export declare const Showcase: (props: ShowcaseScreenPropsFEA) => React.JSX.Element;
+export {};