rn-feav-ui 1.0.5 → 1.0.6

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/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./components";
 export * from "./theme/ThemeFEAVUiProvider";
+export { lightTheme, darkTheme } from "./theme/colors";
 export * from "./examples/Showcase";

package/dist/index.js

@@ -14,6 +14,10 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.darkTheme = exports.lightTheme = void 0;
 __exportStar(require("./components"), exports);
 __exportStar(require("./theme/ThemeFEAVUiProvider"), exports);
+var colors_1 = require("./theme/colors");
+Object.defineProperty(exports, "lightTheme", { enumerable: true, get: function () { return colors_1.lightTheme; } });
+Object.defineProperty(exports, "darkTheme", { enumerable: true, get: function () { return colors_1.darkTheme; } });
 __exportStar(require("./examples/Showcase"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-feav-ui",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Shadcn-style React Native UI kit with theme support.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/readme.md

@@ -81,3 +81,593 @@ All exports are available directly from `rn-feav-ui`.
 Full demo screen:
 
 - `src/examples/Showcase.tsx`
+
+---
+
+## API Reference
+
+### Theme & hooks
+
+| Export | Description |
+| --- | --- |
+| `ThemeFEAVUiProvider` | Wraps the app; provides `theme` and `toggleTheme`. Props: `children: React.ReactNode`. |
+| `useTheme()` | Returns `{ theme, toggleTheme } \| null`. `theme` is `lightTheme \| darkTheme`. |
+| `lightTheme` / `darkTheme` | Exported from the package root for typing or static access: `import { lightTheme, darkTheme } from "rn-feav-ui"`. Prefer `useTheme()` at runtime inside components. |
+
+**`theme.colors` (semantic tokens)** include: `background`, `foreground`, `card`, `cardForeground`, `muted`, `mutedForeground`, `border`, `input`, `ring`, `primary`, `primaryForeground`, `secondary`, `secondaryForeground`, `destructive`, `destructiveForeground`, plus aliases `bg`, `text`, `glass`. See `src/theme/colors.ts`.
+
+| Export | Description |
+| --- | --- |
+| `SonnerFEA` | Toast host; wrap app (or subtree) so `useToastFEA()` works. Props: `children`. |
+| `useToastFEA()` | Returns `{ toast }`. `toast({ title, description?, variant? })` with `variant`: `"default"` \| `"destructive"`. |
+| `ToastFEA` | Alias of `SonnerFEA`. |
+
+---
+
+### Core
+
+#### `ButtonFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `string` | — | Button label. |
+| `variant` | `"primary" \| "glass" \| "soft" \| "outline" \| "ghost"` | `"primary"` | Visual style. |
+| `size` | `"default" \| "sm" \| "lg"` | `"default"` | Padding scale. |
+| `onPress` | `() => void` | — | Press handler. |
+| `disabled` | `boolean` | `false` | Disables interaction. |
+| `loading` | `boolean` | `false` | Shows spinner and blocks press. |
+| `leftIcon` / `rightIcon` | `React.ReactNode` | — | Optional icons around label. |
+| `fullWidth` | `boolean` | `false` | Stretches button to parent width. |
+| `style` | `StyleProp<ViewStyle>` | — | Root touchable / wrapper style. |
+| `textStyle` | `StyleProp<TextStyle>` | — | Label text style override. |
+| `testID` | `string` | — | Test identifier. |
+| `accessibilityLabel` / `accessibilityHint` / `accessibilityRole` / `accessibilityState` | `TouchableOpacityProps[...]` | — | Accessibility passthrough. |
+| `hitSlop` / `delayLongPress` / `activeOpacity` | `TouchableOpacityProps[...]` | — | Touchable behavior passthrough. |
+
+#### `CardFEA` / `GlassCardFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `children` | `React.ReactNode` | Content. |
+| `style` | `StyleProp<ViewStyle>` | Container style. |
+| `onPress` (`CardFEA`) | `() => void` | If set, card becomes pressable. |
+| `testID` (`CardFEA`) | `string` | Root test identifier. |
+| `accessibilityLabel` / `accessibilityRole` / `accessibilityHint` (`CardFEA`) | `ViewProps[...]` | Accessibility props on root. |
+
+#### `TypographyFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` | — | Text content. |
+| `variant` | `"h1" \| "h2" \| "h3" \| "p" \| "small" \| "muted"` | `"p"` | Typography scale; `muted` uses `mutedForeground`. |
+| `style` | `StyleProp<TextStyle>` | — | `Text` style. |
+| `numberOfLines` | `number` | — | Truncates text after N lines. |
+| `ellipsizeMode` | `"head" \| "middle" \| "tail" \| "clip"` | — | Ellipsis behavior when truncated. |
+| `selectable` | `boolean` | — | Enables text selection/copy. |
+| `testID` | `string` | — | Test identifier. |
+| `maxFontSizeMultiplier` | `number` | — | Caps dynamic type scaling. |
+| `onPress` | `() => void` | — | Optional press handler. |
+| `accessibilityRole` | `"text" \| "header" \| "link" \| "none"` | — | Accessibility role. |
+
+#### `SeparatorFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `style` | `StyleProp<ViewStyle>` | Line style (height 1, full width). |
+
+#### `LabelFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `children` | `React.ReactNode` | Label text. |
+| `style` | `StyleProp<TextStyle>` | Text style. |
+| `required` | `boolean` | Appends red `*` when true. |
+| `disabled` | `boolean` | Reduces label opacity. |
+| `testID` | `string` | Test identifier. |
+| `nativeID` | `string` | Can be linked from input `accessibilityLabelledBy`. |
+| `numberOfLines` | `number` | Truncate label lines. |
+
+#### `BadgeFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `label` | `string` | Badge text. |
+| `leftIcon` | `React.ReactNode` | Optional leading icon/dot. |
+| `style` | `StyleProp<ViewStyle>` | Container style. |
+| `textStyle` | `StyleProp<TextStyle>` | Badge label style. |
+| `testID` | `string` | Test identifier. |
+| `accessibilityLabel` | `string` | Accessible label override (defaults to `label`). |
+| `onPress` | `() => void` | Makes badge tappable (`Pressable`). |
+
+#### `AvatarFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `source` | `ImageSourcePropType` | — | If set, shows image. |
+| `fallback` | `string` | — | Initials (max 2 chars shown). |
+| `size` | `number` | `40` | Width/height of circle. |
+
+#### `AspectRatioFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `ratio` | `number` | `1` | `width / height` for `aspectRatio`. |
+| `children` | `React.ReactNode` | — | Content. |
+| `style` | `StyleProp<ViewStyle>` | — | Wrapper style. |
+
+#### `KbdFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `children` | `React.ReactNode` | Keyboard hint text. |
+| `style` | `StyleProp<TextStyle>` | Inner text style. |
+
+#### `SpinnerFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `size` | `"small" \| "large"` | `"small"` | `ActivityIndicator` size. |
+| `style` | `StyleProp<ViewStyle>` | — | Wrapper style. |
+
+#### `SkeletonFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `height` | `number` | `80` | Block height. |
+| `borderRadius` | `number` | `12` | Corner radius. |
+| `marginVertical` | `number` | `8` | Vertical margin. |
+| `style` | `StyleProp<ViewStyle>` | — | Extra style. |
+
+#### `EmptyFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `string` | `"No data"` | Heading. |
+| `description` | `string` | — | Subtext. |
+| `style` | `StyleProp<ViewStyle>` | — | Container style. |
+
+---
+
+### Form
+
+#### `InputFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `style` | `StyleProp<TextStyle>` | Passed to `TextInput`. |
+| `...TextInputProps` | `Omit<TextInputProps, "placeholderTextColor" \| "style">` | Forwards all standard RN `TextInput` props (e.g. `value`, `onChangeText`, `keyboardType`, `editable`, etc.). `placeholderTextColor` is themed internally. |
+
+#### `TextareaFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `style` | `StyleProp<TextStyle>` | Multiline `TextInput` style. |
+| `...TextInputProps` | `Omit<TextInputProps, "placeholderTextColor" \| "style">` | Forwards RN `TextInput` props while forcing `multiline` and `textAlignVertical="top"`. |
+
+#### `CheckboxFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `checked` | `boolean` | — | Controlled checked state. |
+| `onChange` | `(next: boolean) => void` | — | Toggle handler. |
+| `label` | `string` | — | Optional label. |
+| `disabled` | `boolean` | `false` | Disables interaction. |
+| `size` | `number` | `18` | Checkbox square size. |
+| `style` | `StyleProp<ViewStyle>` | — | Row container style. |
+| `labelStyle` | `StyleProp<TextStyle>` | — | Label text style. |
+| `testID` | `string` | — | Test identifier. |
+| `accessibilityLabel` | `string` | — | Accessible label override. |
+
+#### `SwitchFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `boolean` | — | Controlled value. |
+| `onValueChange` | `(next: boolean) => void` | — | Change handler. |
+| `label` | `string` | — | Optional label row. |
+| `labelPosition` | `"left" \| "right"` | `"left"` | Places label before/after switch. |
+| `disabled` | `boolean` | `false` | — |
+| `style` | `StyleProp<ViewStyle>` | — | Row container. |
+| `testID` | `string` | — | Test identifier. |
+| `accessibilityLabel` | `string` | — | Accessibility label override. |
+| `thumbColor` | `ColorValue` | `"#ffffff"` | Thumb color override. |
+| `ios_backgroundColor` | `ColorValue` | — | iOS inactive background. |
+
+#### `FieldFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `label` | `string` | Optional field label. |
+| `description` | `string` | Helper text (hidden if `error` set). |
+| `error` | `string` | Error message (takes priority over description). |
+| `children` | `React.ReactNode` | Input/control. |
+| `style` | `StyleProp<ViewStyle>` | Field wrapper. |
+
+#### `InputGroupFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `children` | `React.ReactNode` | Grouped inputs. |
+| `style` | `StyleProp<ViewStyle>` | Bordered container. |
+
+#### `RadioGroupFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `string` | Selected `value`. |
+| `onValueChange` | `(next: string) => void` | Selection change. |
+| `options` | `RadioOptionFEA[]` | `{ label, value, disabled? }`. |
+| `style` | `StyleProp<ViewStyle>` | — |
+
+#### `NativeSelectFEA` / `SelectFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `string` | — | Selected option `value`. |
+| `onValueChange` | `(next: string) => void` | — | Selection handler. |
+| `options` | `SelectOptionFEA[]` | — | `{ label, value, disabled? }`. |
+| `placeholder` | `string` | `"Select..."` | When nothing selected. |
+| `style` | `StyleProp<ViewStyle>` | — | Menu / trigger styling. |
+
+`SelectFEA` is an alias of `NativeSelectFEA`.
+
+#### `ComboboxFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `string` | Selected value. |
+| `onValueChange` | `(next: string) => void` | — |
+| `options` | `ComboboxOptionFEA[]` | `{ label, value }`. |
+| `placeholder` | `string` | Trigger placeholder. |
+| `style` | `StyleProp<ViewStyle>` | — |
+
+#### `InputOTPFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `string` | — | Controlled OTP string. |
+| `onChange` | `(next: string) => void` | — | Updates full string. |
+| `length` | `number` | `6` | Number of cells. |
+| `style` | `StyleProp<ViewStyle>` | — | Row style. |
+
+#### `DatePickerFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `Date` | — | Current date (defaults internally to “now” for display). |
+| `onChange` | `(next: Date) => void` | — | Emits new date when Y/M/D changes. |
+| `startYear` | `number` | `1970` | Year list start. |
+| `endYear` | `number` | current year + 10 | Year list end. |
+| `style` | `StyleProp<ViewStyle>` | — | Row of selects. |
+
+---
+
+### Overlays & menus
+
+#### `DialogFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `open` | `boolean` | Visibility. |
+| `onOpenChange` | `(next: boolean) => void` | Close/open; backdrop tap closes. |
+| `children` | `React.ReactNode` | Usually `DialogHeaderFEA` + body + `DialogFooterFEA`. |
+| `style` | `StyleProp<ViewStyle>` | Inner `CardFEA` style. |
+
+#### `DialogHeaderFEA` / `DialogFooterFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `children` | `React.ReactNode` | Layout sections. |
+
+#### `AlertDialogFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `open` | `boolean` | — | — |
+| `onOpenChange` | `(next: boolean) => void` | — | — |
+| `title` | `string` | — | Heading. |
+| `description` | `string` | — | Body text. |
+| `cancelText` | `string` | `"Cancel"` | Cancel button label. |
+| `actionText` | `string` | `"Continue"` | Confirm button label. |
+| `destructive` | `boolean` | `false` | Uses softer/destructive styling for action. |
+| `onAction` | `() => void` | — | Runs before close on confirm. |
+
+#### `ModalFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `visible` | `boolean` | Renders overlay + card when true. |
+| `children` | `React.ReactNode` | Content inside card. |
+| `style` | `StyleProp<ViewStyle>` | Card style. |
+
+#### `SheetFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `open` | `boolean` | — |
+| `onOpenChange` | `(next: boolean) => void` | — |
+| `children` | `React.ReactNode` | Bottom sheet body. |
+| `style` | `StyleProp<ViewStyle>` | Card style. |
+
+#### `DrawerFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `open` | `boolean` | — | — |
+| `onOpenChange` | `(next: boolean) => void` | — | — |
+| `side` | `"left" \| "right"` | `"left"` | Slide from edge. |
+| `children` | `React.ReactNode` | — |
+| `style` | `StyleProp<ViewStyle>` | Panel style. |
+
+#### `PopoverFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `open` | `boolean` | — |
+| `onOpenChange` | `(next: boolean) => void` | — |
+| `trigger` | `React.ReactNode` | Pressing toggles open (wrapped in `Pressable`). |
+| `children` | `React.ReactNode` | Popover body inside `CardFEA`. |
+| `contentStyle` | `StyleProp<ViewStyle>` | Inner card style. |
+
+#### `DropdownMenuFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `open` | `boolean` | — |
+| `onOpenChange` | `(next: boolean) => void` | — |
+| `trigger` | `React.ReactNode` | Opens menu. |
+| `items` | `DropdownMenuItemFEA[]` | `{ label, onSelect?, destructive?, disabled? }`. |
+| `style` | `StyleProp<ViewStyle>` | Passed to popover content. |
+
+#### `ContextMenuFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `items` | `DropdownMenuItemFEA[]` | Same as dropdown items. |
+| `children` | `React.ReactNode` | Long-press target. |
+
+#### `CommandFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `open` | `boolean` | — | — |
+| `onOpenChange` | `(next: boolean) => void` | — | — |
+| `trigger` | `React.ReactNode` | — |
+| `items` | `CommandItemFEA[]` | `{ label, value, keywords?, onSelect? }`. |
+| `placeholder` | `string` | `"Type a command or search..."` | Search field. |
+| `style` | `StyleProp<ViewStyle>` | — |
+
+#### `TooltipFEA` / `HoverCardFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `text` | `string` | Tooltip copy. |
+| `children` | `React.ReactNode` | Tap to show brief modal-style hint. |
+
+`HoverCardFEA` is an alias of `TooltipFEA` (React Native has no hover).
+
+---
+
+### Navigation & layout
+
+#### `NavbarFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `title` | `string` | Header title. |
+| `style` | `StyleProp<ViewStyle>` | — |
+
+#### `TabBarFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `children` | `React.ReactNode` | Typically row of buttons. |
+| `style` | `StyleProp<ViewStyle>` | — |
+
+#### `TabsFEA` / `TabsListFEA` / `TabsTriggerFEA` / `TabsContentFEA`
+
+| Component | Main props |
+| --- | --- |
+| `TabsFEA` | `defaultValue: string`, `children` |
+| `TabsListFEA` | `children`, `style?` |
+| `TabsTriggerFEA` | `value: string`, `children` |
+| `TabsContentFEA` | `value: string`, `children` (shown when tab matches) |
+
+#### `BreadcrumbFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `items` | `BreadcrumbItemFEA[]` | `{ label, onPress? }` — last item usually has no `onPress`. |
+| `separator` | `string` | Default `"/"`. |
+| `style` | `StyleProp<ViewStyle>` | — |
+
+#### `NavigationMenuFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `string` | Active item `value`. |
+| `onValueChange` | `(next: string) => void` | — |
+| `items` | `NavigationMenuItemFEA[]` | `{ label, value, disabled? }`. |
+| `style` | `StyleProp<ViewStyle>` | — |
+
+#### `MenubarFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `items` | `MenubarItemFEA[]` | `{ label, items: DropdownMenuItemFEA[] }` per top-level menu. |
+| `style` | `StyleProp<ViewStyle>` | Horizontal bar. |
+
+#### `PaginationFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `page` | `number` | — | Current page (1-based). |
+| `pageCount` | `number` | — | Total pages. |
+| `onPageChange` | `(next: number) => void` | — | Page navigation. |
+| `siblingCount` | `number` | `1` | Neighbor page buttons around current. |
+| `style` | `StyleProp<ViewStyle>` | — | Row style. |
+
+#### `SidebarFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `open` | `boolean` | Uses `DrawerFEA` under the hood. |
+| `onOpenChange` | `(next: boolean) => void` | — |
+| `value` | `string` | Active item. |
+| `onValueChange` | `(next: string) => void` | Optional. |
+| `items` | `SidebarItemFEA[]` | `{ label, value, disabled? }`. |
+| `header` / `footer` | `React.ReactNode` | Optional slots. |
+| `style` | `StyleProp<ViewStyle>` | Drawer panel style. |
+
+#### `ScrollAreaFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| Forwards | `ScrollViewProps` | Same as RN `ScrollView`; `showsVerticalScrollIndicator` defaults to `false`. |
+
+---
+
+### Data display
+
+#### `ListItemFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `title` | `string` | Primary line. |
+| `subtitle` | `string` | Secondary line. |
+| `style` | `StyleProp<ViewStyle>` | — |
+
+#### `TableFEA` / `TableHeadFEA` / `TableRowFEA` / `TableCellFEA`
+
+| Component | Props |
+| --- | --- |
+| `TableFEA` | `children`, `style?` |
+| `TableHeadFEA` | `children`, `style?` |
+| `TableRowFEA` | `children`, `style?` |
+| `TableCellFEA` | `children`, `flex?` (default 1), `align?`: `"left"\|"center"\|"right"`, `style?` |
+
+#### `DataTableFEA<Row>`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `columns` | `DataTableColumnFEA<Row>[]` | `key`, `header`, `flex?`, `align?`, `render?`. |
+| `data` | `Row[]` | Row objects; cell = `row[key]` unless `render` set. |
+| `rowKey` | `(row, index) => string` | Optional stable keys. |
+| `style` / `headerStyle` | `StyleProp<ViewStyle>` | Table / header row. |
+
+#### `CalendarFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `Date` | Selected day. |
+| `onChange` | `(next: Date) => void` | Day press. |
+| `style` | `StyleProp<ViewStyle>` | Container. |
+
+#### `ChartFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `data` | `ChartSeriesPointFEA[]` | — | `{ label, value }` bar series. |
+| `height` | `number` | `140` | Chart height. |
+| `title` | `string` | — | Optional heading. |
+| `style` | `StyleProp<ViewStyle>` | — | Container. |
+
+---
+
+### Interaction
+
+#### `AccordionFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `string` | — | Header. |
+| `children` | `React.ReactNode` | — | Collapsible body. |
+| `defaultOpen` | `boolean` | `false` | Initial open state. |
+| `style` | `StyleProp<ViewStyle>` | — | Card wrapper. |
+
+#### `CollapsibleFEA` / `CollapsibleTriggerFEA`
+
+| `CollapsibleFEA` | `open`, `onOpenChange`, `trigger?`, `children`, `style?` |
+| `CollapsibleTriggerFEA` | `title`, `open`, `onPress`, `style?` |
+
+#### `ToggleFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `pressed` | `boolean` | — |
+| `onPressedChange` | `(next: boolean) => void` | — |
+| `children` | `React.ReactNode` | Label. |
+| `disabled` | `boolean` | — |
+| `style` | `StyleProp<ViewStyle>` | — |
+
+#### `ToggleGroupFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `type` | `"single" \| "multiple"` | `"single"` | Selection mode. |
+| `value` | `string \| string[]` | — | Selected value(s). |
+| `onValueChange` | `(next: string \| string[]) => void` | — | — |
+| `items` | `{ label, value, disabled? }[]` | — | — |
+| `style` | `StyleProp<ViewStyle>` | — | Row. |
+
+#### `SliderFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `number` | — | Current value. |
+| `onValueChange` | `(next: number) => void` | — | Snapped to `step`. |
+| `min` / `max` / `step` | `number` | `0` / `100` / `1` | Range. |
+| `style` | `StyleProp<ViewStyle>` | — | Track. |
+
+#### `ResizableFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `width` / `height` | `DimensionValue` | RN dimension (number or `%`). |
+| `children` | `React.ReactNode` | — |
+| `style` | `StyleProp<ViewStyle>` | — |
+
+#### `CarouselFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `children` | `React.ReactNode[]` | Pages (array of nodes). |
+| `pageWidth` | `number` | Optional fixed page width. |
+| `style` | `StyleProp<ViewStyle>` | `ScrollView` style. |
+
+#### `BottomSheetFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `children` | `React.ReactNode` | Anchored bottom sheet content. |
+| `style` | `StyleProp<ViewStyle>` | Animated container. |
+
+---
+
+### Alerts & misc
+
+#### `AlertFEA`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `string` | — | — |
+| `description` | `string` | — | — |
+| `variant` | `"default" \| "destructive"` | `"default"` | — |
+| `style` | `StyleProp<ViewStyle>` | — | — |
+
+#### `ProgressFEA`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `number` | 0–100 fill. |
+| `style` | `StyleProp<ViewStyle>` | Track. |
+
+#### `ThemeSwitchFEA`
+
+Renders a text button that calls `toggleTheme` from context. No props.
+
+---
+
+### TypeScript
+
+Import types when exported next to components, e.g. `DropdownMenuItemFEA`, `DataTableColumnFEA`, `SelectOptionFEA`, `BreadcrumbItemFEA`, `ChartSeriesPointFEA`, etc. Use your IDE “Go to definition” on `dist/**/*.d.ts` after `npm run build` for the exact emitted types.