rn-feav-ui 1.0.4 → 1.0.6

package/dist/components/Carousel/index.js

@@ -0,0 +1,47 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CarouselFEA = void 0;
+var React = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var CarouselFEA = function (_a) {
+    var children = _a.children, style = _a.style, pageWidth = _a.pageWidth;
+    return (React.createElement(react_native_1.ScrollView, { horizontal: true, pagingEnabled: true, showsHorizontalScrollIndicator: false, style: style, contentContainerStyle: styles.row }, React.Children.map(children, function (child, idx) { return (React.createElement(react_native_1.View, { key: idx, style: [styles.page, pageWidth ? { width: pageWidth } : undefined] }, child)); })));
+};
+exports.CarouselFEA = CarouselFEA;
+var styles = react_native_1.StyleSheet.create({
+    row: { alignItems: "stretch" },
+    page: { width: 320, paddingRight: 12 },
+});

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+export type ChartSeriesPointFEA = {
+    label: string;
+    value: number;
+};
+export declare const ChartFEA: ({ data, height, style, title, }: {
+    data: ChartSeriesPointFEA[];
+    height?: number;
+    style?: StyleProp<ViewStyle>;
+    title?: string;
+}) => React.JSX.Element;

package/dist/components/Chart/index.js

@@ -0,0 +1,75 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChartFEA = void 0;
+var React = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var ThemeFEAVUiProvider_1 = require("../../theme/ThemeFEAVUiProvider");
+var ChartFEA = function (_a) {
+    var data = _a.data, _b = _a.height, height = _b === void 0 ? 140 : _b, style = _a.style, title = _a.title;
+    var theme = (0, ThemeFEAVUiProvider_1.useTheme)().theme;
+    var max = Math.max.apply(Math, __spreadArray([1], data.map(function (d) { return d.value; }), false));
+    return (React.createElement(react_native_1.View, { style: [styles.wrap, { borderColor: theme.colors.border, backgroundColor: theme.colors.card }, style] },
+        title ? React.createElement(react_native_1.Text, { style: { color: theme.colors.foreground, fontWeight: "700", marginBottom: 10 } }, title) : null,
+        React.createElement(react_native_1.View, { style: [styles.chart, { height: height }] }, data.map(function (d) {
+            var h = Math.max(2, (d.value / max) * height);
+            return (React.createElement(react_native_1.View, { key: d.label, style: styles.col },
+                React.createElement(react_native_1.View, { style: [
+                        styles.bar,
+                        {
+                            height: h,
+                            backgroundColor: theme.colors.primary,
+                        },
+                    ] }),
+                React.createElement(react_native_1.Text, { numberOfLines: 1, style: [styles.xlab, { color: theme.colors.mutedForeground }] }, d.label)));
+        }))));
+};
+exports.ChartFEA = ChartFEA;
+var styles = react_native_1.StyleSheet.create({
+    wrap: { borderWidth: 1, borderRadius: 12, padding: 12 },
+    chart: { flexDirection: "row", alignItems: "flex-end", gap: 10 },
+    col: { flex: 1, alignItems: "center", gap: 6 },
+    bar: { width: "100%", borderRadius: 10 },
+    xlab: { fontSize: 10 },
+});

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+export declare const CollapsibleFEA: ({ open, onOpenChange, trigger, children, style, }: {
+    open: boolean;
+    onOpenChange: (next: boolean) => void;
+    trigger?: React.ReactNode;
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}) => React.JSX.Element;
+export declare const CollapsibleTriggerFEA: ({ title, open, onPress, style, }: {
+    title: string;
+    open: boolean;
+    onPress: () => void;
+    style?: StyleProp<ViewStyle>;
+}) => React.JSX.Element;

package/dist/components/Collapsible/index.js

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsibleTriggerFEA = exports.CollapsibleFEA = void 0;
+var React = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var ThemeFEAVUiProvider_1 = require("../../theme/ThemeFEAVUiProvider");
+var CollapsibleFEA = function (_a) {
+    var open = _a.open, onOpenChange = _a.onOpenChange, trigger = _a.trigger, children = _a.children, style = _a.style;
+    return (React.createElement(react_native_1.View, { style: style },
+        trigger ? (React.createElement(react_native_1.Pressable, { onPress: function () { return onOpenChange(!open); } }, trigger)) : null,
+        open ? React.createElement(react_native_1.View, { style: styles.content }, children) : null));
+};
+exports.CollapsibleFEA = CollapsibleFEA;
+var CollapsibleTriggerFEA = function (_a) {
+    var title = _a.title, open = _a.open, onPress = _a.onPress, style = _a.style;
+    var theme = (0, ThemeFEAVUiProvider_1.useTheme)().theme;
+    return (React.createElement(react_native_1.Pressable, { onPress: onPress, style: function (_a) {
+            var pressed = _a.pressed;
+            return [
+                styles.trigger,
+                { borderColor: theme.colors.border, backgroundColor: pressed ? theme.colors.muted : "transparent" },
+                style,
+            ];
+        } },
+        React.createElement(react_native_1.Text, { style: { color: theme.colors.foreground, fontWeight: "700" } }, title),
+        React.createElement(react_native_1.Text, { style: { color: theme.colors.mutedForeground, fontWeight: "700" } }, open ? "−" : "+")));
+};
+exports.CollapsibleTriggerFEA = CollapsibleTriggerFEA;
+var styles = react_native_1.StyleSheet.create({
+    trigger: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        borderWidth: 1,
+        borderRadius: 12,
+        paddingVertical: 10,
+        paddingHorizontal: 12,
+    },
+    content: { paddingTop: 10 },
+});

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+export type ComboboxOptionFEA = {
+    label: string;
+    value: string;
+};
+export declare const ComboboxFEA: ({ value, onValueChange, options, placeholder, style, }: {
+    value?: string;
+    onValueChange: (next: string) => void;
+    options: ComboboxOptionFEA[];
+    placeholder?: string;
+    style?: StyleProp<ViewStyle>;
+}) => React.JSX.Element;

package/dist/components/Combobox/index.js

@@ -0,0 +1,107 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComboboxFEA = void 0;
+var React = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var ThemeFEAVUiProvider_1 = require("../../theme/ThemeFEAVUiProvider");
+var Popover_1 = require("../Popover");
+var Separator_1 = require("../Separator");
+var ComboboxFEA = function (_a) {
+    var _b;
+    var value = _a.value, onValueChange = _a.onValueChange, options = _a.options, _c = _a.placeholder, placeholder = _c === void 0 ? "Select..." : _c, style = _a.style;
+    var theme = (0, ThemeFEAVUiProvider_1.useTheme)().theme;
+    var _d = React.useState(false), open = _d[0], setOpen = _d[1];
+    var _e = React.useState(""), q = _e[0], setQ = _e[1];
+    var selected = options.find(function (o) { return o.value === value; });
+    var filtered = options.filter(function (o) { return o.label.toLowerCase().includes(q.trim().toLowerCase()); });
+    return (React.createElement(Popover_1.PopoverFEA, { open: open, onOpenChange: function (next) {
+            setOpen(next);
+            if (!next)
+                setQ("");
+        }, trigger: React.createElement(react_native_1.Pressable, { style: [
+                styles.trigger,
+                { borderColor: theme.colors.input, backgroundColor: theme.colors.background },
+                style,
+            ] },
+            React.createElement(react_native_1.Text, { style: { color: selected ? theme.colors.foreground : theme.colors.mutedForeground, fontWeight: "500" } }, (_b = selected === null || selected === void 0 ? void 0 : selected.label) !== null && _b !== void 0 ? _b : placeholder),
+            React.createElement(react_native_1.Text, { style: { color: theme.colors.mutedForeground } }, "\u2315")), contentStyle: { padding: 0 } },
+        React.createElement(react_native_1.View, { style: { padding: 12 } },
+            React.createElement(react_native_1.TextInput, { value: q, onChangeText: setQ, placeholder: "Search...", placeholderTextColor: theme.colors.mutedForeground, style: [
+                    styles.search,
+                    {
+                        borderColor: theme.colors.input,
+                        color: theme.colors.foreground,
+                        backgroundColor: theme.colors.background,
+                    },
+                ] })),
+        React.createElement(Separator_1.SeparatorFEA, null),
+        React.createElement(react_native_1.View, { style: { maxHeight: 320 } }, filtered.length === 0 ? (React.createElement(react_native_1.View, { style: { padding: 12 } },
+            React.createElement(react_native_1.Text, { style: { color: theme.colors.mutedForeground } }, "No results"))) : (filtered.map(function (o, idx) { return (React.createElement(React.Fragment, { key: o.value },
+            React.createElement(react_native_1.Pressable, { onPress: function () {
+                    onValueChange(o.value);
+                    setOpen(false);
+                }, style: function (_a) {
+                    var pressed = _a.pressed;
+                    return [
+                        styles.item,
+                        { backgroundColor: pressed ? theme.colors.muted : "transparent" },
+                    ];
+                } },
+                React.createElement(react_native_1.Text, { style: { color: theme.colors.foreground, fontWeight: "500" } }, o.label)),
+            idx < filtered.length - 1 ? React.createElement(Separator_1.SeparatorFEA, { style: { opacity: 0.6 } }) : null)); })))));
+};
+exports.ComboboxFEA = ComboboxFEA;
+var styles = react_native_1.StyleSheet.create({
+    trigger: {
+        borderWidth: 1,
+        borderRadius: 10,
+        paddingVertical: 10,
+        paddingHorizontal: 12,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+    },
+    search: {
+        borderWidth: 1,
+        borderRadius: 10,
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+    },
+    item: {
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+    },
+});

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

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+export type CommandItemFEA = {
+    label: string;
+    value: string;
+    keywords?: string[];
+    onSelect?: () => void;
+};
+export declare const CommandFEA: ({ open, onOpenChange, trigger, items, placeholder, style, }: {
+    open: boolean;
+    onOpenChange: (next: boolean) => void;
+    trigger: React.ReactNode;
+    items: CommandItemFEA[];
+    placeholder?: string;
+    style?: StyleProp<ViewStyle>;
+}) => React.JSX.Element;

package/dist/components/Command/index.js

@@ -0,0 +1,87 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommandFEA = void 0;
+var React = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var Popover_1 = require("../Popover");
+var Separator_1 = require("../Separator");
+var ThemeFEAVUiProvider_1 = require("../../theme/ThemeFEAVUiProvider");
+var CommandFEA = function (_a) {
+    var open = _a.open, onOpenChange = _a.onOpenChange, trigger = _a.trigger, items = _a.items, _b = _a.placeholder, placeholder = _b === void 0 ? "Type a command or search..." : _b, style = _a.style;
+    var theme = (0, ThemeFEAVUiProvider_1.useTheme)().theme;
+    var _c = React.useState(""), q = _c[0], setQ = _c[1];
+    var filtered = items.filter(function (it) {
+        var _a;
+        var hay = "".concat(it.label, " ").concat(((_a = it.keywords) !== null && _a !== void 0 ? _a : []).join(" ")).toLowerCase();
+        return hay.includes(q.trim().toLowerCase());
+    });
+    return (React.createElement(Popover_1.PopoverFEA, { open: open, onOpenChange: function (next) {
+            onOpenChange(next);
+            if (!next)
+                setQ("");
+        }, trigger: trigger, contentStyle: [{ padding: 0 }, style] },
+        React.createElement(react_native_1.View, { style: { padding: 12 } },
+            React.createElement(react_native_1.TextInput, { value: q, onChangeText: setQ, placeholder: placeholder, placeholderTextColor: theme.colors.mutedForeground, style: [
+                    styles.input,
+                    { borderColor: theme.colors.input, color: theme.colors.foreground, backgroundColor: theme.colors.background },
+                ] })),
+        React.createElement(Separator_1.SeparatorFEA, null),
+        React.createElement(react_native_1.View, { style: { maxHeight: 320 } }, filtered.length === 0 ? (React.createElement(react_native_1.View, { style: { padding: 12 } },
+            React.createElement(react_native_1.Text, { style: { color: theme.colors.mutedForeground } }, "No results"))) : (filtered.map(function (it, idx) { return (React.createElement(React.Fragment, { key: it.value },
+            React.createElement(react_native_1.Pressable, { onPress: function () {
+                    var _a;
+                    (_a = it.onSelect) === null || _a === void 0 ? void 0 : _a.call(it);
+                    onOpenChange(false);
+                }, style: function (_a) {
+                    var pressed = _a.pressed;
+                    return [
+                        styles.item,
+                        { backgroundColor: pressed ? theme.colors.muted : "transparent" },
+                    ];
+                } },
+                React.createElement(react_native_1.Text, { style: { color: theme.colors.foreground, fontWeight: "600" } }, it.label)),
+            idx < filtered.length - 1 ? React.createElement(Separator_1.SeparatorFEA, { style: { opacity: 0.6 } }) : null)); })))));
+};
+exports.CommandFEA = CommandFEA;
+var styles = react_native_1.StyleSheet.create({
+    input: {
+        borderWidth: 1,
+        borderRadius: 10,
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+    },
+    item: { paddingHorizontal: 12, paddingVertical: 10 },
+});

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

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { DropdownMenuItemFEA } from "../DropdownMenu";
+export declare const ContextMenuFEA: ({ items, children, }: {
+    items: DropdownMenuItemFEA[];
+    children: React.ReactNode;
+}) => React.JSX.Element;

package/dist/components/ContextMenu/index.js

@@ -0,0 +1,45 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextMenuFEA = void 0;
+var React = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var DropdownMenu_1 = require("../DropdownMenu");
+var ContextMenuFEA = function (_a) {
+    var items = _a.items, children = _a.children;
+    var _b = React.useState(false), open = _b[0], setOpen = _b[1];
+    return (React.createElement(DropdownMenu_1.DropdownMenuFEA, { open: open, onOpenChange: setOpen, items: items, trigger: React.createElement(react_native_1.Pressable, { onLongPress: function () { return setOpen(true); }, delayLongPress: 250 }, children), style: { maxWidth: 360 } }));
+};
+exports.ContextMenuFEA = ContextMenuFEA;

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

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+export type DataTableColumnFEA<Row> = {
+    key: string;
+    header: string;
+    flex?: number;
+    align?: "left" | "center" | "right";
+    render?: (row: Row) => React.ReactNode;
+};
+export declare const DataTableFEA: <Row>({ columns, data, style, headerStyle, rowKey, }: {
+    columns: DataTableColumnFEA<Row>[];
+    data: Row[];
+    style?: StyleProp<ViewStyle>;
+    headerStyle?: StyleProp<ViewStyle>;
+    rowKey?: (row: Row, index: number) => string;
+}) => React.JSX.Element;