@sincpro/mobile-ui 3.0.1 → 3.1.0

package/dist/widgets/TimeZoneSelectorModal.js

@@ -1,67 +1,474 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { FlashList } from "@shopify/flash-list";
-import Button from "../Actions/Actions.Button.js";
 import Sheet from "../Dialog/Dialog.Sheet.js";
+import { DialogActions } from "../Dialog/dialog-actions.js";
 import Icon from "../Display/Display.Icon.js";
+import { inputTextStyle } from "../Form/input-text.js";
 import Pressable from "../primitives/Pressable.js";
 import { useTheme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
+import { matchesSearch } from "../utils/search.js";
 import { useMemo, useState } from "react";
 import { TextInput, View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 const TIMEZONES_LOCALES = {
-    bolivia: { timezone: "America/La_Paz", locale: "es-BO" },
-    costaRica: { timezone: "America/Costa_Rica", locale: "es-CR" },
-    guatemala: { timezone: "America/Guatemala", locale: "es-GT" },
-    argentina: { timezone: "America/Argentina/Buenos_Aires", locale: "es-AR" },
-    peru: { timezone: "America/Lima", locale: "es-PE" },
-    newYork: { timezone: "America/New_York", locale: "en-US" },
-    japon: { timezone: "Asia/Tokyo", locale: "ja-JP" },
+  bolivia: {
+    timezone: "America/La_Paz",
+    locale: "es-BO"
+  },
+  costaRica: {
+    timezone: "America/Costa_Rica",
+    locale: "es-CR"
+  },
+  guatemala: {
+    timezone: "America/Guatemala",
+    locale: "es-GT"
+  },
+  argentina: {
+    timezone: "America/Argentina/Buenos_Aires",
+    locale: "es-AR"
+  },
+  peru: {
+    timezone: "America/Lima",
+    locale: "es-PE"
+  },
+  newYork: {
+    timezone: "America/New_York",
+    locale: "en-US"
+  },
+  japon: {
+    timezone: "Asia/Tokyo",
+    locale: "ja-JP"
+  }
 };
-function TimezoneRow({ item, isSelected, onSelect, }) {
-    const theme = useTheme();
-    return (_jsxs(Pressable, { accessibilityHint: item.locale, accessibilityLabel: item.label, accessibilityRole: "radio", accessibilityState: { checked: isSelected, selected: isSelected }, className: "flex-row items-center p-4 border-b border-border-light", onPress: onSelect, style: {
-            minHeight: 64,
-            backgroundColor: isSelected ? theme.container.info : theme.bg.card,
-        }, testID: `timezone-${item.timezone}`, children: [_jsx(Icon, { color: isSelected ? theme.info : theme.text.secondary, name: "time", size: 24 }), _jsxs(View, { className: "ml-3 flex-1", children: [_jsx(Typography.Text, { semibold: true, children: item.label }), _jsx(Typography.Text, { className: "text-text-tertiary text-xs", children: item.locale })] }), isSelected && (_jsx(View, { className: "w-6 h-6 rounded-full bg-info items-center justify-center", children: _jsx(Icon, { color: theme.text.inverse, name: "check", size: 16 }) }))] }));
+function TimezoneRow(t0) {
+  const $ = _c(26);
+  const {
+    item,
+    isSelected,
+    onSelect
+  } = t0;
+  const theme = useTheme();
+  let t1;
+  if ($[0] !== isSelected) {
+    t1 = {
+      checked: isSelected,
+      selected: isSelected
+    };
+    $[0] = isSelected;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const t2 = isSelected ? theme.container.info : theme.bg.card;
+  let t3;
+  if ($[2] !== t2) {
+    t3 = {
+      minHeight: 64,
+      backgroundColor: t2
+    };
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const t4 = `timezone-${item.timezone}`;
+  const t5 = isSelected ? theme.info : theme.text.secondary;
+  let t6;
+  if ($[4] !== t5) {
+    t6 = _jsx(Icon, {
+      color: t5,
+      name: "time",
+      size: 24
+    });
+    $[4] = t5;
+    $[5] = t6;
+  } else {
+    t6 = $[5];
+  }
+  let t7;
+  if ($[6] !== item.label) {
+    t7 = _jsx(Typography.Text, {
+      semibold: true,
+      children: item.label
+    });
+    $[6] = item.label;
+    $[7] = t7;
+  } else {
+    t7 = $[7];
+  }
+  let t8;
+  if ($[8] !== item.locale) {
+    t8 = _jsx(Typography.Text, {
+      className: "text-text-tertiary",
+      children: item.locale
+    });
+    $[8] = item.locale;
+    $[9] = t8;
+  } else {
+    t8 = $[9];
+  }
+  let t9;
+  if ($[10] !== t7 || $[11] !== t8) {
+    t9 = _jsxs(View, {
+      className: "ml-3 flex-1",
+      children: [t7, t8]
+    });
+    $[10] = t7;
+    $[11] = t8;
+    $[12] = t9;
+  } else {
+    t9 = $[12];
+  }
+  let t10;
+  if ($[13] !== isSelected || $[14] !== theme.text) {
+    t10 = isSelected && _jsx(View, {
+      className: "w-6 h-6 rounded-full bg-info items-center justify-center",
+      children: _jsx(Icon, {
+        color: theme.text.inverse,
+        name: "check",
+        size: 16
+      })
+    });
+    $[13] = isSelected;
+    $[14] = theme.text;
+    $[15] = t10;
+  } else {
+    t10 = $[15];
+  }
+  let t11;
+  if ($[16] !== item.label || $[17] !== item.locale || $[18] !== onSelect || $[19] !== t1 || $[20] !== t10 || $[21] !== t3 || $[22] !== t4 || $[23] !== t6 || $[24] !== t9) {
+    t11 = _jsxs(Pressable, {
+      accessibilityHint: item.locale,
+      accessibilityLabel: item.label,
+      accessibilityRole: "radio",
+      accessibilityState: t1,
+      className: "flex-row items-center p-4 border-b border-border-light",
+      onPress: onSelect,
+      style: t3,
+      testID: t4,
+      children: [t6, t9, t10]
+    });
+    $[16] = item.label;
+    $[17] = item.locale;
+    $[18] = onSelect;
+    $[19] = t1;
+    $[20] = t10;
+    $[21] = t3;
+    $[22] = t4;
+    $[23] = t6;
+    $[24] = t9;
+    $[25] = t11;
+  } else {
+    t11 = $[25];
+  }
+  return t11;
 }
 function EmptyState() {
-    const theme = useTheme();
-    return (_jsxs(View, { className: "p-8 items-center justify-center", style: { minHeight: 200 }, children: [_jsx(Icon, { color: theme.text.tertiary, name: "search-empty", size: 48 }), _jsx(Typography.Text, { className: "text-text-secondary text-center mt-4", children: "No se encontraron zonas horarias" })] }));
+  const $ = _c(6);
+  const theme = useTheme();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {
+      minHeight: 200
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let t1;
+  if ($[1] !== theme.text.tertiary) {
+    t1 = _jsx(Icon, {
+      color: theme.text.tertiary,
+      name: "search-empty",
+      size: 48
+    });
+    $[1] = theme.text.tertiary;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = _jsx(Typography.Text, {
+      className: "text-text-secondary text-center mt-4",
+      children: "No se encontraron zonas horarias"
+    });
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t1) {
+    t3 = _jsxs(View, {
+      className: "p-8 items-center justify-center",
+      style: t0,
+      children: [t1, t2]
+    });
+    $[4] = t1;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  return t3;
 }
-function TimeZoneSelectorModal({ visible, onClose, onSelect, currentTimezone, }) {
-    const theme = useTheme();
-    const [query, setQuery] = useState("");
-    const [selectedTimezone, setSelectedTimezone] = useState(currentTimezone || null);
-    const timezoneList = useMemo(() => {
-        return Object.values(TIMEZONES_LOCALES).map((tz) => ({
-            ...tz,
-            label: tz.timezone.replace(/_/g, " ").replace("America/", ""),
-        }));
-    }, []);
-    const filteredTimezones = useMemo(() => {
-        if (!query.trim())
-            return timezoneList;
-        const normalizedQuery = query
-            .trim()
-            .toLowerCase()
-            .normalize("NFD")
-            .replace(/[\u0300-\u036f]/g, "");
-        return timezoneList.filter(({ label, timezone }) => {
-            const normalizedLabel = label
-                .toLowerCase()
-                .normalize("NFD")
-                .replace(/[\u0300-\u036f]/g, "");
-            const normalizedTz = timezone.toLowerCase();
-            return (normalizedLabel.includes(normalizedQuery) || normalizedTz.includes(normalizedQuery));
+function TimeZoneSelectorModal(t0) {
+  const $ = _c(42);
+  const {
+    visible,
+    onClose,
+    onSelect,
+    currentTimezone
+  } = t0;
+  const theme = useTheme();
+  const [query, setQuery] = useState("");
+  const [selectedTimezone, setSelectedTimezone] = useState(currentTimezone || null);
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = Object.values(TIMEZONES_LOCALES).map(_temp);
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const timezoneList = t1;
+  let t2;
+  if ($[1] !== query) {
+    t2 = timezoneList.filter(t3 => {
+      const {
+        label,
+        timezone
+      } = t3;
+      return matchesSearch(query, label, timezone);
+    });
+    $[1] = query;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const filteredTimezones = t2;
+  let t3;
+  if ($[3] !== onClose || $[4] !== onSelect || $[5] !== selectedTimezone) {
+    t3 = function handleConfirm() {
+      const selected = timezoneList.find(tz_0 => tz_0.timezone === selectedTimezone);
+      if (selected) {
+        onSelect({
+          timezone: selected.timezone,
+          locale: selected.locale
         });
-    }, [query, timezoneList]);
-    function handleConfirm() {
-        const selected = timezoneList.find((tz) => tz.timezone === selectedTimezone);
-        if (selected) {
-            onSelect({ timezone: selected.timezone, locale: selected.locale });
-            onClose();
-        }
-    }
-    return (_jsx(Sheet, { footer: _jsxs(View, { className: "flex-row gap-3", children: [_jsx(View, { className: "flex-1", children: _jsx(Button, { onPress: onClose, title: "Cancelar", variant: "outline" }) }), selectedTimezone && (_jsx(View, { className: "flex-1", children: _jsx(Button, { onPress: handleConfirm, title: "Confirmar", variant: "primary" }) }))] }), onClose: onClose, scrollable: false, snapPoints: ["90%"], testID: "timezone-sheet", title: "Zona Horaria", visible: visible, children: _jsxs(View, { className: "flex-1", children: [_jsxs(View, { className: "px-5 pb-3", children: [_jsx(Typography.Text, { className: "text-text-secondary text-xs mb-3", children: "Selecciona tu zona horaria" }), _jsx(TextInput, { accessibilityLabel: "Buscar zona horaria", className: "bg-bg-muted px-4 py-3 rounded-xl", onChangeText: setQuery, placeholder: "Buscar zona horaria...", placeholderTextColor: theme.text.tertiary, selectionColor: theme.primary, style: { color: theme.text.primary }, testID: "timezone-search", underlineColorAndroid: "transparent", value: query })] }), _jsx(FlashList, { contentContainerStyle: { flexGrow: 1 }, data: filteredTimezones, extraData: selectedTimezone, keyboardDismissMode: "on-drag", keyboardShouldPersistTaps: "handled", keyExtractor: (item) => item.timezone, ListEmptyComponent: EmptyState, maintainVisibleContentPosition: { disabled: true }, renderItem: ({ item }) => (_jsx(TimezoneRow, { isSelected: selectedTimezone === item.timezone, item: item, onSelect: () => setSelectedTimezone(item.timezone) })), style: { flex: 1 }, testID: "timezone-list" })] }) }));
+        onClose();
+      }
+    };
+    $[3] = onClose;
+    $[4] = onSelect;
+    $[5] = selectedTimezone;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const handleConfirm = t3;
+  let t4;
+  if ($[7] !== onClose) {
+    t4 = {
+      onPress: onClose,
+      title: "Cancelar"
+    };
+    $[7] = onClose;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== handleConfirm || $[10] !== selectedTimezone) {
+    t5 = selectedTimezone ? {
+      onPress: handleConfirm,
+      title: "Confirmar"
+    } : undefined;
+    $[9] = handleConfirm;
+    $[10] = selectedTimezone;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  let t6;
+  if ($[12] !== t4 || $[13] !== t5) {
+    t6 = _jsx(DialogActions, {
+      cancel: t4,
+      confirm: t5
+    });
+    $[12] = t4;
+    $[13] = t5;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  let t7;
+  if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = ["90%"];
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  let t8;
+  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = _jsx(Typography.Text, {
+      className: "text-text-secondary mb-3",
+      children: "Selecciona tu zona horaria"
+    });
+    $[16] = t8;
+  } else {
+    t8 = $[16];
+  }
+  const t9 = theme.text.tertiary;
+  const t10 = theme.primary;
+  let t11;
+  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = inputTextStyle();
+    $[17] = t11;
+  } else {
+    t11 = $[17];
+  }
+  let t12;
+  if ($[18] !== theme.text.primary) {
+    t12 = [t11, {
+      color: theme.text.primary
+    }];
+    $[18] = theme.text.primary;
+    $[19] = t12;
+  } else {
+    t12 = $[19];
+  }
+  let t13;
+  if ($[20] !== query || $[21] !== t12 || $[22] !== theme.primary || $[23] !== theme.text.tertiary) {
+    t13 = _jsxs(View, {
+      className: "px-5 pb-3",
+      children: [t8, _jsx(TextInput, {
+        accessibilityLabel: "Buscar zona horaria",
+        className: "bg-bg-muted px-4 py-3 rounded-xl",
+        onChangeText: setQuery,
+        placeholder: "Buscar zona horaria...",
+        placeholderTextColor: t9,
+        selectionColor: t10,
+        style: t12,
+        testID: "timezone-search",
+        underlineColorAndroid: "transparent",
+        value: query
+      })]
+    });
+    $[20] = query;
+    $[21] = t12;
+    $[22] = theme.primary;
+    $[23] = theme.text.tertiary;
+    $[24] = t13;
+  } else {
+    t13 = $[24];
+  }
+  let t14;
+  if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+    t14 = {
+      flexGrow: 1
+    };
+    $[25] = t14;
+  } else {
+    t14 = $[25];
+  }
+  let t15;
+  if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+    t15 = {
+      disabled: true
+    };
+    $[26] = t15;
+  } else {
+    t15 = $[26];
+  }
+  let t16;
+  if ($[27] !== selectedTimezone) {
+    t16 = t17 => {
+      const {
+        item: item_0
+      } = t17;
+      return _jsx(TimezoneRow, {
+        isSelected: selectedTimezone === item_0.timezone,
+        item: item_0,
+        onSelect: () => setSelectedTimezone(item_0.timezone)
+      });
+    };
+    $[27] = selectedTimezone;
+    $[28] = t16;
+  } else {
+    t16 = $[28];
+  }
+  let t17;
+  if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+    t17 = {
+      flex: 1
+    };
+    $[29] = t17;
+  } else {
+    t17 = $[29];
+  }
+  let t18;
+  if ($[30] !== filteredTimezones || $[31] !== selectedTimezone || $[32] !== t16) {
+    t18 = _jsx(FlashList, {
+      contentContainerStyle: t14,
+      data: filteredTimezones,
+      extraData: selectedTimezone,
+      keyboardDismissMode: "on-drag",
+      keyboardShouldPersistTaps: "handled",
+      keyExtractor: _temp2,
+      ListEmptyComponent: EmptyState,
+      maintainVisibleContentPosition: t15,
+      renderItem: t16,
+      style: t17,
+      testID: "timezone-list"
+    });
+    $[30] = filteredTimezones;
+    $[31] = selectedTimezone;
+    $[32] = t16;
+    $[33] = t18;
+  } else {
+    t18 = $[33];
+  }
+  let t19;
+  if ($[34] !== t13 || $[35] !== t18) {
+    t19 = _jsxs(View, {
+      className: "flex-1",
+      children: [t13, t18]
+    });
+    $[34] = t13;
+    $[35] = t18;
+    $[36] = t19;
+  } else {
+    t19 = $[36];
+  }
+  let t20;
+  if ($[37] !== onClose || $[38] !== t19 || $[39] !== t6 || $[40] !== visible) {
+    t20 = _jsx(Sheet, {
+      footer: t6,
+      onClose: onClose,
+      scrollable: false,
+      snapPoints: t7,
+      testID: "timezone-sheet",
+      title: "Zona Horaria",
+      visible: visible,
+      children: t19
+    });
+    $[37] = onClose;
+    $[38] = t19;
+    $[39] = t6;
+    $[40] = visible;
+    $[41] = t20;
+  } else {
+    t20 = $[41];
+  }
+  return t20;
+}
+function _temp2(item) {
+  return item.timezone;
+}
+function _temp(tz) {
+  return {
+    ...tz,
+    label: tz.timezone.replace(/_/g, " ").replace("America/", "")
+  };
 }
 export { TimeZoneSelectorModal };

package/dist/widgets/index.js

@@ -1,6 +1,6 @@
-export { default as CollectionOptions, } from "./CollectionOptions.js";
-export { FilterBar, } from "./FilterBar.js";
-export { default as FilterBuilder, } from "./FilterBuilder.js";
+export { default as CollectionOptions } from "./CollectionOptions.js";
+export { FilterBar } from "./FilterBar.js";
+export { default as FilterBuilder } from "./FilterBuilder.js";
 export { PromoBanner } from "./PromoBanner.js";
 export { PromoModal } from "./PromoModal.js";
 export { QuickActions } from "./QuickActions.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/mobile-ui",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Sincpro Mobile design system: generic, presentational React Native components (no domain logic)",
   "main": "expo/AppEntry.js",
   "types": "./dist/index.d.ts",
@@ -56,6 +56,7 @@
   "peerDependencies": {
     "@expo-google-fonts/ibm-plex-mono": ">=0.4.1 <1",
     "@expo-google-fonts/ibm-plex-sans": ">=0.4.1 <1",
+    "@expo-google-fonts/material-symbols": ">=0.4.1 <1",
     "@expo/ui": ">=58.0.27 <59",
     "@shopify/flash-list": ">=2.3.2 <3",
     "expo-checkbox": ">=58.0.2 <59",
@@ -92,6 +93,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.29.13",
+    "@babel/plugin-transform-react-jsx": "^7.29.7",
+    "@babel/preset-typescript": "^7.28.5",
     "@expo-google-fonts/ibm-plex-mono": "^0.4.1",
     "@expo-google-fonts/ibm-plex-sans": "^0.4.1",
     "@expo/ui": "~58.0.27",
@@ -107,6 +110,7 @@
     "@types/node": "^26.6.6",
     "@types/react": "~19.3.0",
     "babel-plugin-module-resolver": "^5.0.3",
+    "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^9.35.0",
     "eslint-config-expo": "~58.0.4",
     "eslint-config-prettier": "^10.1.8",
@@ -140,6 +144,7 @@
     "react-native-sortables": "^1.10.1",
     "react-native-svg": "15.16.0",
     "react-native-worklets": "0.13.0",
+    "reassure": "^1.6.1",
     "storybook": "10.6.6",
     "tailwindcss": "3.4.19",
     "test-renderer": "^1.0.0",

package/tailwind.preset.js

@@ -88,12 +88,14 @@ module.exports = {
         ring: "rgb(var(--ring) / <alpha-value>)",
         input: "rgb(var(--input) / <alpha-value>)",
       },
+      // The faces the DS loads (IBM Plex Sans). Components take fonts from Typography,
+      // which follows configureFonts; these classes only serve raw Text in host apps.
       fontFamily: {
-        light: ["Montserrat_300Light"],
-        regular: ["Montserrat_400Regular"],
-        medium: ["Montserrat_500Medium"],
-        semibold: ["Montserrat_600SemiBold"],
-        extrabold: ["Montserrat_800ExtraBold"],
+        light: ["IBMPlexSans_300Light"],
+        regular: ["IBMPlexSans_400Regular"],
+        medium: ["IBMPlexSans_500Medium"],
+        semibold: ["IBMPlexSans_600SemiBold"],
+        extrabold: ["IBMPlexSans_700Bold"],
       },
       fontSize: {
         xs: ["10px", { lineHeight: "16px" }],

package/dist/Form/Form.InputField.d.ts

@@ -1,10 +0,0 @@
-import TextInputF from "./Form.TextInput.js";
-import React, { FC } from "react";
-import { TextInputProps } from "react-native";
-export interface InputFieldProps extends TextInputProps {
-    label: string;
-    inputProps: React.ComponentProps<typeof TextInputF>;
-    error?: string;
-}
-declare const InputField: FC<InputFieldProps>;
-export default InputField;

package/dist/Form/Form.InputField.js

@@ -1,38 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import TextInputF from "./Form.TextInput.js";
-import { tv } from "../theme/tw.js";
-import { Typography } from "../Typography/index.js";
-import { useState } from "react";
-import { View } from "react-native";
-const inputFieldBorder = tv({
-    base: "rounded p-2",
-    variants: {
-        state: {
-            error: "border-2 border-danger",
-            focused: "border-2 border-border-focus",
-            default: "border border-input",
-        },
-    },
-    defaultVariants: { state: "default" },
-});
-const InputField = ({ label, inputProps, error }) => {
-    const [isFocused, setIsFocused] = useState(false);
-    const hasError = Boolean(error);
-    const handleFocus = (e) => {
-        setIsFocused(true);
-        inputProps?.onFocus?.(e);
-    };
-    const handleBlur = (e) => {
-        setIsFocused(false);
-        inputProps?.onBlur?.(e);
-    };
-    const getState = () => {
-        if (hasError)
-            return "error";
-        if (isFocused)
-            return "focused";
-        return "default";
-    };
-    return (_jsxs(View, { className: "mb-4", children: [_jsx(Typography.Text, { className: "mb-1", variant: "bodyLarge", children: label }), _jsx(TextInputF, { className: inputFieldBorder({ state: getState() }), ...inputProps, onBlur: handleBlur, onFocus: handleFocus }), error && (_jsx(Typography.Text, { className: "mt-1 text-danger", variant: "bodySmall", children: error }))] }));
-};
-export default InputField;

package/dist/Form/Form.KeyboardToolbar.d.ts

@@ -1,22 +0,0 @@
-import { type ReactNode } from "react";
-import { type StyleProp, type TextStyle, type ViewStyle } from "react-native";
-export type KeyboardToolbarAction = "previous" | "next" | "done";
-export interface KeyboardToolbarProps {
-    previousLabel?: string;
-    nextLabel?: string;
-    doneLabel?: string;
-    showDoneLabel?: boolean;
-    onHeightChange?: (height: number) => void;
-    className?: string;
-    style?: StyleProp<ViewStyle>;
-    actionStyle?: StyleProp<ViewStyle>;
-    labelStyle?: StyleProp<TextStyle>;
-    iconSize?: number;
-    bottomGapOffset?: number;
-    testID?: string;
-    renderActionContent?: (action: KeyboardToolbarAction, state: {
-        label: string;
-        disabled: boolean;
-    }) => ReactNode;
-}
-export default function KeyboardToolbar({ previousLabel, nextLabel, doneLabel, showDoneLabel, onHeightChange, className, style, actionStyle, labelStyle, iconSize, bottomGapOffset, testID, renderActionContent, }: KeyboardToolbarProps): import("react").JSX.Element;