@tecsinapse/react-native-kit 2.2.1 → 3.3.0

package/dist/esm/components/molecules/DatePicker/DatePicker.js

@@ -1,5 +1,5 @@
 import { DatePicker as DatePicker$1 } from '@tecsinapse/react-core';
-import React__default from 'react';
+import React__default, { useMemo } from 'react';
 import { getLocale } from '../../../utils/date.js';
 import 'react-native';
 import { ModalView } from '../../atoms/Modal/ui/BaseModalView.js';
@@ -11,17 +11,45 @@ import { CalendarBoxContent } from './styled.js';
 const DatePicker = ({
   locale,
   onChange,
+  value,
+  type,
   ...rest
 }) => {
   const modal = useLazyModalManager();
-  const handleChange = (value) => {
-    onChange?.(value);
+  const handleChange = (value2) => {
+    onChange?.(value2);
     modal.requestUpdate();
   };
+  const getYear = useMemo(() => {
+    if (value) {
+      if (type === "range") {
+        if (value.lowest !== void 0)
+          return new Date(value.lowest).getFullYear();
+      } else {
+        return new Date(value).getFullYear();
+      }
+    }
+    return void 0;
+  }, [value]);
+  const getMonth = useMemo(() => {
+    if (value) {
+      if (type === "range") {
+        if (value.lowest !== void 0)
+          return new Date(value.lowest).getMonth();
+      } else {
+        return new Date(value).getMonth();
+      }
+    }
+    return void 0;
+  }, [value]);
   return /* @__PURE__ */ React__default.createElement(
     DatePicker$1,
     {
       ...rest,
+      value,
+      month: getMonth,
+      year: getYear,
+      type,
       TextComponent: Text,
       CalendarComponent: Calendar,
       locale: locale ?? getLocale(),
@@ -37,4 +65,3 @@ const NativeModal = ({ children, ...others }) => {
 };
 
 export { DatePicker };
-//# sourceMappingURL=DatePicker.js.map

package/dist/esm/components/molecules/DatePicker/styled.js

@@ -6,4 +6,3 @@ const CalendarBoxContent = styled(BoxContent)`
 `;
 
 export { CalendarBoxContent };
-//# sourceMappingURL=styled.js.map

package/dist/esm/components/molecules/DateTimePicker/DateTimePicker.js

@@ -1,11 +1,11 @@
-import { DateTimePicker as DateTimePicker$1 } from '@tecsinapse/react-core';
+import { DateTimePicker as DateTimePicker$1, ControlledDateTimeSelector } from '@tecsinapse/react-core';
 import React__default from 'react';
 import { getLocale } from '../../../utils/date.js';
 import 'react-native';
 import { ModalView } from '../../atoms/Modal/ui/BaseModalView.js';
 import { useLazyModalManager } from '../../atoms/Modal/useLazyModalManager.js';
 import Text from '../../atoms/Text/Text.js';
-import { DateTimeSelector } from '../DateTimeSelector/DateTimeSelector.js';
+import DateTimePickerSelector from '../DateTimePickerSelector/DateTimePickerSelector.js';
 
 const DateTimePicker = ({
   locale,
@@ -17,10 +17,16 @@ const DateTimePicker = ({
     {
       ...rest,
       TextComponent: Text,
-      DateTimeSelectorComponent: DateTimeSelector,
+      DateTimeSelectorComponent: (props) => /* @__PURE__ */ React__default.createElement(
+        ControlledDateTimeSelector,
+        {
+          SelectorComponent: DateTimePickerSelector,
+          ...props
+        }
+      ),
       locale: locale ?? getLocale(),
-      requestShowSelector: () => modal.show(),
-      requestCloseSelector: () => modal.close(),
+      requestShowSelector: modal.show,
+      requestCloseSelector: modal.close,
       renderSelector: (selector, blur) => modal.sync(/* @__PURE__ */ React__default.createElement(NativeModal, { onClose: blur }, selector))
     }
   );
@@ -30,4 +36,3 @@ const NativeModal = ({ children, ...others }) => {
 };
 
 export { DateTimePicker };
-//# sourceMappingURL=DateTimePicker.js.map

package/dist/esm/components/molecules/DateTimePickerSelector/DateTimePickerSelector.js

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { Button } from '../../atoms/Button/Button.js';
+import { Icon } from '@tecsinapse/react-core';
+import Text from '../../atoms/Text/Text.js';
+import ScrollableSelector from '../ScrollableSelector/ScrollableSelector.js';
+import { Calendar } from '../Calendar/Calendar.js';
+import { Root, Header, BackButton, Content } from './styled.js';
+import { getLocale } from '../../../utils/date.js';
+
+const DateTimePickerSelector = ({
+  TextComponent = Text,
+  currentMode,
+  handlePressBack,
+  modalTitle,
+  isDate,
+  date,
+  handleCalendarChange,
+  isMonth,
+  setDate,
+  handlePressConfirm,
+  confirmButtonText,
+  locale,
+  yearLabel,
+  monthLabel,
+  hourLabel,
+  minuteLabel,
+  ...rest
+}) => {
+  return /* @__PURE__ */ React.createElement(Root, { ...rest }, /* @__PURE__ */ React.createElement(Header, null, currentMode === 1 && /* @__PURE__ */ React.createElement(BackButton, { onPress: handlePressBack }, /* @__PURE__ */ React.createElement(
+    Icon,
+    {
+      type: "material-community",
+      name: "chevron-left",
+      size: "mega",
+      colorVariant: "secondary"
+    }
+  )), /* @__PURE__ */ React.createElement(TextComponent, { typography: "base", colorVariant: "secondary" }, modalTitle)), isDate ? /* @__PURE__ */ React.createElement(
+    Calendar,
+    {
+      type: "day",
+      value: date,
+      onChange: handleCalendarChange,
+      year: date.getFullYear(),
+      month: date.getMonth()
+    }
+  ) : isMonth ? /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(
+    ScrollableSelector,
+    {
+      onChange: setDate,
+      value: date,
+      yearLabel,
+      monthLabel,
+      format: "MM-yyyy",
+      locale: locale ?? getLocale()
+    }
+  )) : /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(
+    ScrollableSelector,
+    {
+      onChange: setDate,
+      value: date,
+      hourLabel,
+      minuteLabel,
+      format: "HH-mm",
+      locale: locale ?? getLocale()
+    }
+  )), /* @__PURE__ */ React.createElement(Button, { color: "primary", onPress: handlePressConfirm }, /* @__PURE__ */ React.createElement(TextComponent, { fontWeight: "bold", fontColor: "light" }, confirmButtonText || "OK")));
+};
+
+export { DateTimePickerSelector as default };

package/dist/esm/components/molecules/DateTimePickerSelector/styled.js

@@ -0,0 +1,27 @@
+import styled from '@emotion/native';
+import { PressableSurface } from '@tecsinapse/react-core';
+
+const Root = styled.View`
+  position: relative;
+  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
+`;
+const Content = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: ${({ theme }) => theme.spacing.deca};
+  margin-bottom: ${({ theme }) => theme.spacing.deca};
+`;
+const BackButton = styled(PressableSurface)`
+  border-radius: ${({ theme }) => theme.borderRadius.mili};
+  padding: ${({ theme }) => theme.spacing.micro};
+  margin-right: ${({ theme }) => theme.spacing.mili};
+  aspect-ratio: 1;
+`;
+const Header = styled.View`
+  flex-direction: row;
+  align-items: center;
+  margin-top: ${({ theme }) => theme.spacing.mili};
+  margin-bottom: ${({ theme }) => theme.spacing.mili};
+`;
+
+export { BackButton, Content, Header, Root };

package/dist/esm/components/molecules/Grid/Grid.js

@@ -62,4 +62,3 @@ const Grid = ({
 };
 
 export { Grid as default };
-//# sourceMappingURL=Grid.js.map

package/dist/esm/components/molecules/Grid/Item/Item.js

@@ -53,4 +53,3 @@ const GridItem = ({
 };
 
 export { GridItem as default };
-//# sourceMappingURL=Item.js.map

package/dist/esm/components/molecules/IconTextButton/IconTextButton.js

@@ -40,4 +40,3 @@ const IconTextButton = ({
 };
 
 export { IconTextButton as default };
-//# sourceMappingURL=IconTextButton.js.map

package/dist/esm/components/molecules/IconTextButton/TextComponent.js

@@ -25,4 +25,3 @@ const TextComponent = ({
 var TextComponent$1 = React__default.memo(TextComponent);
 
 export { TextComponent$1 as default };
-//# sourceMappingURL=TextComponent.js.map

package/dist/esm/components/molecules/IconTextButton/styled.js

@@ -25,4 +25,3 @@ const StyledText = styled(Text)`
 `;
 
 export { StyledIconTextButton, StyledText };
-//# sourceMappingURL=styled.js.map

package/dist/esm/components/molecules/InputPassword/InputPassword.js

@@ -26,4 +26,3 @@ const InputPassword = React__default.forwardRef(
 InputPassword.displayName = "InputPassword";
 
 export { InputPassword as default };
-//# sourceMappingURL=InputPassword.js.map

package/dist/esm/components/molecules/LabeledSwitch/LabelComponent.js

@@ -26,4 +26,3 @@ const LabelComponent = ({
 var LabelComponent$1 = React__default.memo(LabelComponent);
 
 export { LabelComponent$1 as default };
-//# sourceMappingURL=LabelComponent.js.map

package/dist/esm/components/molecules/LabeledSwitch/LabeledSwitch.js

@@ -47,4 +47,3 @@ const LabeledSwitch = ({
 };
 
 export { LabeledSwitch as default };
-//# sourceMappingURL=LabeledSwitch.js.map

package/dist/esm/components/molecules/LabeledSwitch/styled.js

@@ -21,4 +21,3 @@ const StyledLabel = styled(Text)`
 `;
 
 export { StyledLabel, StyledView };
-//# sourceMappingURL=styled.js.map

package/dist/esm/components/molecules/ScrollableSelector/ScrollableSelector.js

@@ -0,0 +1,141 @@
+import React__default, { useMemo, useState, useEffect, useCallback } from 'react';
+import { StyleSheet, Dimensions, View } from 'react-native';
+import Text from '../../atoms/Text/Text.js';
+import { BlockLabels } from './styled.js';
+import DateBlock from './components/DateBlock.js';
+
+const ScrollableSelector = ({
+  value,
+  onChange,
+  height,
+  width,
+  fontSize,
+  textColor,
+  startYear,
+  endYear,
+  markColor,
+  markHeight,
+  markWidth,
+  format,
+  monthLabel,
+  yearLabel,
+  hourLabel,
+  minuteLabel,
+  TextComponent = Text
+}) => {
+  const date = useMemo(() => value ?? /* @__PURE__ */ new Date(), [value]);
+  const [months, setMonths] = useState([]);
+  const [years, setYears] = useState([]);
+  const [hour, setHour] = useState([]);
+  const [minutes, setMinutes] = useState([]);
+  useEffect(() => {
+    const end = endYear || (/* @__PURE__ */ new Date()).getFullYear();
+    const start = !startYear || startYear > end ? end - 100 : startYear;
+    const _months = [...Array(12)].map((_, index) => index + 1);
+    const _years = [...Array(end - start + 1)].map((_, index) => start + index);
+    const _hour = [...Array(24)].map((_, index) => index);
+    const _minutes = [...Array(60)].map((_, index) => index);
+    setMonths(_months);
+    setYears(_years);
+    setHour(_hour);
+    setMinutes(_minutes);
+  }, []);
+  const pickerHeight = Math.round(
+    height ?? Dimensions.get("window").height / 3.5
+  );
+  const pickerWidth = width ?? "100%";
+  const changeHandle = useCallback(
+    (type, digit) => {
+      switch (type) {
+        case "month":
+          date.setMonth(digit - 1);
+          break;
+        case "year":
+          date.setFullYear(digit);
+          break;
+        case "hour":
+          date.setHours(digit);
+          break;
+        case "minutes":
+          date.setMinutes(digit);
+      }
+      onChange?.(date);
+    },
+    [date]
+  );
+  const getOrder = useCallback(() => {
+    return (format || "dd-MM-yyyy").split("-").map((type, index) => {
+      switch (type) {
+        case "MM":
+          return {
+            name: "month",
+            digits: months,
+            value: date.getMonth() + 1
+          };
+        case "yyyy":
+          return { name: "year", digits: years, value: date.getFullYear() };
+        case "HH":
+          return { name: "hour", digits: hour, value: date.getHours() };
+        case "mm":
+          return {
+            name: "minutes",
+            digits: minutes,
+            value: date.getMinutes()
+          };
+        default:
+          return {
+            name: ["day", "month", "year", "hour", "minutes"][index],
+            digits: [months, years, hour, minutes][index],
+            value: [
+              date.getDate(),
+              date.getMonth() + 1,
+              date.getFullYear(),
+              date.getHours(),
+              date.getMinutes()
+            ][index]
+          };
+      }
+    });
+  }, [format, date, months, years, hour, minutes]);
+  return /* @__PURE__ */ React__default.createElement(View, { style: { flexDirection: "column", width: "100%" } }, /* @__PURE__ */ React__default.createElement(BlockLabels, null, format === "MM-yyyy" ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(TextComponent, null, monthLabel), /* @__PURE__ */ React__default.createElement(TextComponent, null, yearLabel)) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(TextComponent, null, hourLabel), /* @__PURE__ */ React__default.createElement(TextComponent, null, minuteLabel))), /* @__PURE__ */ React__default.createElement(
+    View,
+    {
+      style: [styles.picker, { height: pickerHeight, width: pickerWidth }]
+    },
+    getOrder().map((el, index) => {
+      return /* @__PURE__ */ React__default.createElement(
+        DateBlock,
+        {
+          date: value ?? /* @__PURE__ */ new Date(),
+          digits: el.digits,
+          value: el.value,
+          onChange: changeHandle,
+          height: pickerHeight,
+          fontSize: fontSize ?? 22,
+          textColor,
+          markColor,
+          markHeight,
+          markWidth: markWidth ?? 70,
+          type: el.name,
+          key: index
+        }
+      );
+    })
+  ));
+};
+const styles = StyleSheet.create({
+  picker: {
+    flexDirection: "row",
+    width: "100%"
+  },
+  digit: {
+    fontSize: 20,
+    textAlign: "center"
+  },
+  gradient: {
+    position: "absolute",
+    width: "100%"
+  }
+});
+
+export { ScrollableSelector as default };

package/dist/esm/components/molecules/ScrollableSelector/components/DateBlock.js

@@ -0,0 +1,97 @@
+import React__default, { useRef, useEffect } from 'react';
+import { TouchableOpacity, Text } from 'react-native';
+import { Block, Mark, StyledScrollView } from '../styled.js';
+import { format } from 'date-fns';
+
+const DateBlock = ({
+  value,
+  digits,
+  type,
+  onChange,
+  height = 170,
+  fontSize,
+  textColor,
+  markColor,
+  markHeight,
+  markWidth,
+  TextComponent = Text,
+  locale
+}) => {
+  const months = [...Array(12)].map(
+    (_, index) => format((/* @__PURE__ */ new Date()).setMonth(index), "MMM", { locale }).slice(
+      0,
+      3
+    )
+  );
+  const dHeight = Math.round(height / 4);
+  const mHeight = markHeight ?? Math.min(dHeight, 65);
+  const mWidth = markWidth ?? 70;
+  const offsets = digits.map((_, index) => index * dHeight);
+  const scrollRef = useRef(null);
+  const snapScrollToIndex = (index) => {
+    scrollRef?.current?.scrollTo({ y: dHeight * index, animated: true });
+  };
+  useEffect(() => {
+    snapScrollToIndex(value - digits[0]);
+  }, [scrollRef.current]);
+  const handleMomentumScrollEnd = ({ nativeEvent }) => {
+    const digit = Math.round(nativeEvent.contentOffset.y / dHeight + digits[0]);
+    onChange(type, digit);
+  };
+  const getDisplayedValue = (granularity) => (value2) => {
+    if (granularity === "month") {
+      return months[value2 - 1];
+    } else {
+      return value2.toString().padStart(2, "0");
+    }
+  };
+  return /* @__PURE__ */ React__default.createElement(Block, null, /* @__PURE__ */ React__default.createElement(
+    Mark,
+    {
+      markTop: (height - mHeight) / 2,
+      markColor: markColor ?? "rgba(0, 0, 0, 0.05)",
+      markHeight: 24,
+      markWidth: mWidth
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    StyledScrollView,
+    {
+      ref: scrollRef,
+      snapToOffsets: offsets,
+      decelerationRate: "fast",
+      showsVerticalScrollIndicator: false,
+      scrollEventThrottle: 0,
+      onMomentumScrollEnd: handleMomentumScrollEnd,
+      fadingEdgeLength: 300
+    },
+    digits.map((value2, index) => {
+      return /* @__PURE__ */ React__default.createElement(
+        TouchableOpacity,
+        {
+          key: index,
+          onPress: () => {
+            onChange(type, digits[index]);
+            snapScrollToIndex(index);
+          }
+        },
+        /* @__PURE__ */ React__default.createElement(
+          TextComponent,
+          {
+            style: {
+              textAlign: "center",
+              fontSize: fontSize || 22,
+              color: textColor || "#000000",
+              marginBottom: index === digits.length - 1 ? height / 2 - dHeight / 2 : 0,
+              marginTop: index === 0 ? height / 2 - dHeight / 2 : 0,
+              lineHeight: dHeight,
+              height: dHeight
+            }
+          },
+          getDisplayedValue(type)(value2)
+        )
+      );
+    })
+  ));
+};
+
+export { DateBlock as default };

package/dist/esm/components/molecules/ScrollableSelector/styled.js

@@ -0,0 +1,44 @@
+import styled from '@emotion/native';
+import { ScrollView } from 'react-native';
+
+styled.View`
+  flex-direction: row;
+  width: 100%;
+`;
+const Block = styled.View`
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  height: 100%;
+`;
+const BlockLabels = styled.View`
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-around;
+  margin-bottom: 10px;
+`;
+styled.ScrollView`
+  width: 100%;
+`;
+styled.Text`
+  font-size: ${({ fontSize }) => `${fontSize}px`};
+  text-align: center;
+  color: #000000;
+  margin-bottom: ${({ marginBottom }) => `${marginBottom}px`};
+  margin-top: ${({ marginTop }) => `${marginTop}px`};
+  line-height: ${({ lineHeight }) => `${lineHeight}px`};
+  height: ${({ height }) => `${height}px`};
+`;
+const Mark = styled.View`
+  position: absolute;
+  border-radius: 10px;
+  background-color: ${({ theme }) => theme.color.primary.light};
+  height: ${({ markHeight }) => `${markHeight}px`};
+  width: ${({ markWidth }) => `${markWidth}px`};
+`;
+const StyledScrollView = styled(ScrollView)`
+  width: 100%;
+`;
+
+export { Block, BlockLabels, Mark, StyledScrollView };

package/dist/esm/components/molecules/Select/Modal.js

@@ -201,4 +201,3 @@ const MemoizedOption = ({
 const Modal = Component;
 
 export { Modal };
-//# sourceMappingURL=Modal.js.map

package/dist/esm/components/molecules/Select/Select.js

@@ -194,4 +194,3 @@ function Select({
 }
 
 export { Select as default };
-//# sourceMappingURL=Select.js.map

package/dist/esm/components/molecules/Select/styled.js

@@ -1,7 +1,6 @@
 import styled, { css } from '@emotion/native';
-import { disabledInputStyles, PressableSurface, RFValueStr, Button, Icon, RFValue } from '@tecsinapse/react-core';
+import { disabledInputStyles, RFValueStr, PressableSurface, Icon, RFValue } from '@tecsinapse/react-core';
 import { View, ActivityIndicator } from 'react-native';
-import Input from '../../atoms/Input/Input.js';
 import Text from '../../atoms/Text/Text.js';
 
 const getStyledModal = (safeTop = 0) => {
@@ -17,15 +16,6 @@ const StyledSelectionText = styled(Text)(
     ${disabledInputStyles(props)};
   `
 );
-styled(View)`
-  aspect-ratio: 1;
-  height: 100%;
-`;
-styled(
-  PressableSurface
-)`
-  width: 100%;
-`;
 styled(View)`
   position: relative;
   width: 100%;
@@ -36,22 +26,17 @@ styled(View)`
   padding: ${({ theme }) => theme.spacing.deca};
   height: ${RFValueStr("75px")};
 `;
-styled(Button)`
-  aspect-ratio: 1;
-  height: 100%;
-`;
 const SearchBarContainer = styled(View)`
   padding: ${({ theme }) => theme.spacing.deca};
   position: relative;
 `;
-styled(Input)`
-  margin-bottom: ${({ theme }) => theme.spacing.deca};
-`;
 const ListItem = styled(PressableSurface)`
   border-bottom-width: ${RFValueStr("1px")};
   border-color: ${({ theme }) => theme.color.secondary.light};
-  padding-vertical: ${({ theme }) => theme.spacing.mili};
-  padding-horizontal: ${({ theme }) => theme.spacing.deca};
+  padding-top: ${({ theme }) => theme.spacing.mili};
+  padding-bottom: ${({ theme }) => theme.spacing.mili};
+  padding-left: ${({ theme }) => theme.spacing.deca};
+  padding-right: ${({ theme }) => theme.spacing.deca};
 `;
 const ModalFooter = styled(View)`
   width: 100%;
@@ -75,4 +60,3 @@ const StyledTextItemSelect = styled(Text)`
 `;
 
 export { FetchIndicator, ListItem, ModalFooter, SearchBarContainer, SelectIcon, StyledSelectionText, StyledTextItemSelect, TextTitleModal, getStyledModal };
-//# sourceMappingURL=styled.js.map

package/dist/esm/components/molecules/Snackbar/Snackbar.js

@@ -11,4 +11,3 @@ const Snackbar = ({
 };
 
 export { Snackbar as default };
-//# sourceMappingURL=Snackbar.js.map

package/dist/esm/components/molecules/Snackbar/styled.js

@@ -7,4 +7,3 @@ const SnackbarStyled = styled(Snackbar)`
 `;
 
 export { SnackbarStyled };
-//# sourceMappingURL=styled.js.map

package/dist/esm/index.js

@@ -24,7 +24,7 @@ export { default as TextArea } from './components/atoms/TextArea/TextArea.js';
 export { Calendar } from './components/molecules/Calendar/Calendar.js';
 export { DatePicker } from './components/molecules/DatePicker/DatePicker.js';
 export { DateTimePicker } from './components/molecules/DateTimePicker/DateTimePicker.js';
-export { DateTimeSelector } from './components/molecules/DateTimeSelector/DateTimeSelector.js';
+export { default as DateTimePickerSelector } from './components/molecules/DateTimePickerSelector/DateTimePickerSelector.js';
 export { default as IconTextButton } from './components/molecules/IconTextButton/IconTextButton.js';
 export { default as InputPassword } from './components/molecules/InputPassword/InputPassword.js';
 export { default as LabeledSwitch } from './components/molecules/LabeledSwitch/LabeledSwitch.js';
@@ -32,4 +32,3 @@ export { default as Select } from './components/molecules/Select/Select.js';
 export { default as Snackbar } from './components/molecules/Snackbar/Snackbar.js';
 export { default as GridItem } from './components/molecules/Grid/Item/Item.js';
 export { default as Grid } from './components/molecules/Grid/Grid.js';
-//# sourceMappingURL=index.js.map

package/dist/esm/utils/date.js

@@ -13,4 +13,3 @@ const getLocale = () => {
 };
 
 export { getLocale };
-//# sourceMappingURL=date.js.map

package/dist/types/components/atoms/BottomNavigator/styled.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { PressableProps, ViewProps } from 'react-native';
+export declare const StyledView: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, {}, {
+    ref?: import("react").Ref<import("react-native").View> | undefined;
+}>;
+export declare const TabContainer: import("@emotion/native").StyledComponent<PressableProps & import("react").RefAttributes<import("react-native").View> & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    selected: boolean;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, {}, {}>;
+export declare const TabContent: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, {}, {
+    ref?: import("react").Ref<import("react-native").View> | undefined;
+}>;
+export declare const CustomTabContent: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, {}, {
+    ref?: import("react").Ref<import("react-native").View> | undefined;
+}>;