@tecsinapse/react-core 3.3.7 → 3.4.1

package/LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 TecSinapse
+Copyright (c) 2024 TecSinapse
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -4,8 +4,7 @@
 
 [![Stars](https://img.shields.io/github/stars/tecsinapse/design-system?style=social)](https://github.com/tecsinapse/design-system/) [![License](https://img.shields.io/github/license/tecsinapse/design-system)](./LICENSE.md) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](CODE_OF_CONDUCT.md)![build workflow](https://github.com/tecsinapse/design-system/actions/workflows/ci.yml/badge.svg)
 
-
-[TecSinapse Design System](https://tecsinapse.github.io/design-system) is the hybrid implementation of the [TecSinapse](https://www.tecsinapse.com.br/) Design System. 
+[TecSinapse Design System](https://tecsinapse.github.io/design-system) is the hybrid implementation of the [TecSinapse](https://www.tecsinapse.com.br/) Design System.
 Our primary goal is to create a system that can be used to build a wide variety of TecSinapase websites and apps, while providing a consistent and inclusive user experience to our end users.
 In addition, the design system and component library should be easy to use for developers and designers.
 
@@ -24,11 +23,12 @@ Here are a few helpful links for getting started:
 ## Packages
 
 | Package                                                         | Content                                              | Version                                                                                                                                    |
-|-----------------------------------------------------------------|------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------|
+| --------------------------------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
 | **[@tecsinapse/react-core](./packages/react-core)**             | the core hybrid React component library              | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-core.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-core)             |
 | **[@tecsinapse/react-web-kit](./packages/react-web-kit)**       | the React component library focused on web           | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-web-kit.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-web-kit)       |
 | **[@tecsinapse/react-native-kit](./packages/react-native-kit)** | the React native component library focused on mobile | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-native-kit.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-native-kit) |
 | **[@tecsinapse/react-charts](./packages/react-charts)**         | Charts for React based on SVG                        | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-charts.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-charts)         |
+| **[@tecsinapse/cortex-core](./packages/cortex-core)**           | The core library for tailwindcss based design        | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Fcortex-core.svg)](https://badge.fury.io/js/%40tecsinapse%2Fcortex-core)           |
 
 ## Code of conduct
 
@@ -41,27 +41,29 @@ If you feel another member of the community violated our code or you are experie
 At times, it may be necessary to test changes directly in a product, and not in the design system, and for this to work in a less laborious way, we can follow the steps below:
 
 3 terminal tabs should open:
+
 - In one run the JS code watch:
+
 ```
 yarn build:watch
 ```
+
 - In another run the watch of the TS code watch
+
 ```
 yarn build:declarations:watch
 ```
+
 - On another run yalc push (this script updates linked local projects)
+
 ```
 yarn yalc:push
 ```
 
 With that, all changes will be in yalc locally.
 
-To access in your application, see this [example](https://github.com/tecsinapse/vendas-web-poc-playground#tools) in topic "**Yalc link Design System:**"
-
-
 ### Maintainers
 
-- [Beatriz Silva](mailto:beatriz.silva@tecsinapse.com.br)
 - [Denner Vidal](mailto:denner.vidal@tecsinapse.com.br)
 - [Gabriel Sanches](mailto:gabriel.sanches@tecsinapse.com.br)
 - [Lucas Ramos](mailto:lucas.ramos@tecsinapse.com.br)

package/dist/cjs/components/atoms/Input/InputContainer/InputContainer.js

@@ -23,10 +23,8 @@ const InputContainer = ({
   ...rest
 }) => {
   let _defaultLabelColor = labelColorVariant;
-  if (variant === "error")
-    _defaultLabelColor = "error";
-  if (variant === "success")
-    _defaultLabelColor = "success";
+  if (variant === "error") _defaultLabelColor = "error";
+  if (variant === "success") _defaultLabelColor = "success";
   const _labelColorVariant = disabled ? "secondary" : _defaultLabelColor;
   const _labelColorTone = disabled ? "light" : labelColorTone;
   return /* @__PURE__ */ React.createElement(

package/dist/cjs/components/atoms/Input/InputMaskElement/InputMaskElement.js

@@ -40,8 +40,7 @@ const InputMaskElement = React.forwardRef(
       (value2) => {
         if (maskValue !== void 0 && setMaskValue !== void 0) {
           setMaskValue(value2);
-        } else
-          onChange && onChange(value2);
+        } else onChange && onChange(value2);
       },
       [value]
     );

package/dist/cjs/components/atoms/Input/hooks/useNumberMask.js

@@ -22,8 +22,7 @@ const getInternalNumberAndMask = (value, options) => {
       const currentPrecision = decimalIndex + precision;
       if (decimalIndex !== -1 && currentPrecision <= stringValue.length) {
         const zeros = stringValue.length + 1 - currentPrecision;
-        for (let i = 0; i < zeros; i++)
-          stringValue = stringValue + `0`;
+        for (let i = 0; i < zeros; i++) stringValue = stringValue + `0`;
       }
       internalNumber = Number(stringValue);
     } else {

package/dist/cjs/components/atoms/Input/hooks/useStringMask.js

@@ -43,22 +43,17 @@ const getMask = (mask, newValue) => {
   }
   maskArray.forEach((exp) => {
     if (typeof exp !== "string") {
-      if (Array.isArray(exp))
-        regexArray.push(exp);
-      else
-        regexArray.push(exp);
+      if (Array.isArray(exp)) regexArray.push(exp);
+      else regexArray.push(exp);
     } else {
       for (let i = 0; i < exp.length; i++) {
         if (exp[i] === "\\") {
           regexArray.push(exp[i + 1]);
           i++;
         } else {
-          if (exp[i] === "9")
-            regexArray.push(/\d/);
-          else if (exp[i] === "a")
-            regexArray.push(/[a-zA-Z]/);
-          else
-            regexArray.push(exp[i]);
+          if (exp[i] === "9") regexArray.push(/\d/);
+          else if (exp[i] === "a") regexArray.push(/[a-zA-Z]/);
+          else regexArray.push(exp[i]);
         }
       }
     }

package/dist/cjs/components/atoms/Switch/animation.js

@@ -4,8 +4,7 @@ var reactNative = require('react-native');
 
 const ANIMATION_SPEED = 140;
 const transitionSwitch = (active, translate, transitionValue, animatedColor) => {
-  if (translate <= 0)
-    return;
+  if (translate <= 0) return;
   if (active) {
     reactNative.Animated.timing(transitionValue, {
       toValue: translate,

package/dist/cjs/components/molecules/Calendar/Calendar.js

@@ -78,8 +78,7 @@ function Calendar({
     () => [...Array(6).keys()].map(
       (week) => [...Array(7).keys()].map((weekDayIndex) => {
         let addDays = 6 * week + week + weekDayIndex - startingWeekDay;
-        if (weeksInMonth == 5 && startingWeekDay == 0)
-          addDays -= 7;
+        if (weeksInMonth == 5 && startingWeekDay == 0) addDays -= 7;
         return dateFns.add(referenceDate, {
           days: addDays
         });

package/dist/cjs/components/molecules/Calendar/components/MonthWeek.js

@@ -14,12 +14,10 @@ const MonthWeek = ({
 }) => {
   const checkIfIsBetween = React.useCallback(
     (date, _value) => {
-      if (type !== "range" || !_value)
-        return false;
+      if (type !== "range" || !_value) return false;
       else {
         const { lowest, highest } = _value;
-        if (!highest)
-          return false;
+        if (!highest) return false;
         return dateFns.compareAsc(lowest, date) <= 0 && dateFns.compareAsc(highest, date) >= 0;
       }
     },
@@ -27,8 +25,7 @@ const MonthWeek = ({
   );
   const checkIfIsSelected = React.useCallback(
     (date, _value) => {
-      if (!_value)
-        return false;
+      if (!_value) return false;
       else if (type === "range" && _value) {
         const { lowest, highest } = _value;
         return dateFns.isSameDay(lowest, date) || (highest ? dateFns.isSameDay(highest, date) : false);

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

@@ -68,8 +68,7 @@ function DatePicker({
     handleFocus();
   }, [handleFocus, requestShowCalendar]);
   const getDisplayValue = () => {
-    if (!value)
-      return placeholder;
+    if (!value) return placeholder;
     if (type === "day") {
       return dateFns.format(value, format, { locale });
     } else {
@@ -78,8 +77,7 @@ function DatePicker({
         return `${dateFns.format(lowest, format, {
           locale
         })} - ${dateFns.format(highest, format, { locale })}`;
-      else
-        return placeholder;
+      else return placeholder;
     }
   };
   const StyledText = styled.getStyledTextComponent(TextComponent);

package/dist/cjs/components/molecules/DateTimeSelector/DateTimeSelector.js

@@ -30,8 +30,7 @@ function _interopNamespaceDefault(e) {
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 function getThresholdUnit(mode, threshold) {
-  if (!threshold)
-    return {};
+  if (!threshold) return {};
   if (mode === "month") {
     return { months: threshold };
   } else if (["date", "datetime"].includes(mode)) {

package/dist/cjs/components/molecules/Grid/functions.js

@@ -16,10 +16,8 @@ const getGridItemPadding = (pos, _spacing, themeSpacing) => {
       return extractNumbersFromString.extractNumbersFromString(themeSpacing[_spacing]);
     else if (typeof _spacing === "object" && _spacing[pos]) {
       return extractNumbersFromString.extractNumbersFromString(themeSpacing[_spacing[pos] ?? "0"]);
-    } else
-      return void 0;
-  } else
-    return void 0;
+    } else return void 0;
+  } else return void 0;
 };
 const getGridItemColumSpan = (columns, span) => 100 / (columns / span);
 

package/dist/cjs/hooks/useDebouncedState.js

@@ -6,8 +6,7 @@ function useDebouncedState(initialState, timeoutCallback, timeoutMs = 166) {
   const timeoutId = React.useRef();
   const [state, setState] = React.useState(initialState);
   React.useEffect(() => {
-    if (timeoutId.current)
-      clearTimeout(timeoutId.current);
+    if (timeoutId.current) clearTimeout(timeoutId.current);
     if (timeoutCallback)
       timeoutId.current = setTimeout(() => timeoutCallback(state), timeoutMs);
   }, [state]);

package/dist/cjs/styles/definitions.js

@@ -42,8 +42,7 @@ const statusColor = {
 };
 const hex2rgba = (hex, alpha = 1) => {
   const rgb = ((hex ?? "").match(/\w\w/g) ?? []).map((x) => parseInt(x, 16));
-  if (!rgb || (rgb ?? []).length === 0)
-    return "";
+  if (!rgb || (rgb ?? []).length === 0) return "";
   const [r, g, b] = rgb;
   return `rgba(${r},${g},${b},${alpha})`;
 };

package/dist/cjs/utils/ResponsiveFontSize.js

@@ -6,8 +6,7 @@ var IPhoneXHelper = require('./IPhoneXHelper.js');
 
 const STANDARD_SCREEN_HEIGHT = 680;
 const RFPercentage = (percent) => {
-  if (reactNative.Platform.OS === "web")
-    return percent;
+  if (reactNative.Platform.OS === "web") return percent;
   const { height, width } = reactNative.Dimensions.get("window");
   const standardLength = width > height ? width : height;
   const offset = width > height ? 0 : reactNative.Platform.OS === "ios" ? 78 : reactNative.StatusBar.currentHeight || 0;
@@ -16,8 +15,7 @@ const RFPercentage = (percent) => {
   return Math.round(heightPercent);
 };
 const RFValue = (fontSize, standardScreenHeight = STANDARD_SCREEN_HEIGHT) => {
-  if (reactNative.Platform.OS === "web")
-    return fontSize;
+  if (reactNative.Platform.OS === "web") return fontSize;
   const { height, width } = reactNative.Dimensions.get("window");
   const standardLength = width > height ? width : height;
   const offset = width > height ? 0 : reactNative.Platform.OS === "ios" ? 78 : reactNative.StatusBar.currentHeight || 0;

package/dist/cjs/utils/lightenDarkenColor.js

@@ -8,20 +8,14 @@ const lightenDarkenColor = (color, variation) => {
   }
   const num = parseInt(color, 16);
   let r = (num >> 16) + variation;
-  if (r > 255)
-    r = 255;
-  else if (r < 0)
-    r = 0;
+  if (r > 255) r = 255;
+  else if (r < 0) r = 0;
   let b = (num >> 8 & 255) + variation;
-  if (b > 255)
-    b = 255;
-  else if (b < 0)
-    b = 0;
+  if (b > 255) b = 255;
+  else if (b < 0) b = 0;
   let g = (num & 255) + variation;
-  if (g > 255)
-    g = 255;
-  else if (g < 0)
-    g = 0;
+  if (g > 255) g = 255;
+  else if (g < 0) g = 0;
   return (usePound ? "#" : "") + (g | b << 8 | r << 16).toString(16);
 };
 

package/dist/esm/components/atoms/Input/InputContainer/InputContainer.js

@@ -21,10 +21,8 @@ const InputContainer = ({
   ...rest
 }) => {
   let _defaultLabelColor = labelColorVariant;
-  if (variant === "error")
-    _defaultLabelColor = "error";
-  if (variant === "success")
-    _defaultLabelColor = "success";
+  if (variant === "error") _defaultLabelColor = "error";
+  if (variant === "success") _defaultLabelColor = "success";
   const _labelColorVariant = disabled ? "secondary" : _defaultLabelColor;
   const _labelColorTone = disabled ? "light" : labelColorTone;
   return /* @__PURE__ */ React__default.createElement(

package/dist/esm/components/atoms/Input/InputMaskElement/InputMaskElement.js

@@ -38,8 +38,7 @@ const InputMaskElement = React__default.forwardRef(
       (value2) => {
         if (maskValue !== void 0 && setMaskValue !== void 0) {
           setMaskValue(value2);
-        } else
-          onChange && onChange(value2);
+        } else onChange && onChange(value2);
       },
       [value]
     );

package/dist/esm/components/atoms/Input/hooks/useNumberMask.js

@@ -20,8 +20,7 @@ const getInternalNumberAndMask = (value, options) => {
       const currentPrecision = decimalIndex + precision;
       if (decimalIndex !== -1 && currentPrecision <= stringValue.length) {
         const zeros = stringValue.length + 1 - currentPrecision;
-        for (let i = 0; i < zeros; i++)
-          stringValue = stringValue + `0`;
+        for (let i = 0; i < zeros; i++) stringValue = stringValue + `0`;
       }
       internalNumber = Number(stringValue);
     } else {

package/dist/esm/components/atoms/Input/hooks/useStringMask.js

@@ -41,22 +41,17 @@ const getMask = (mask, newValue) => {
   }
   maskArray.forEach((exp) => {
     if (typeof exp !== "string") {
-      if (Array.isArray(exp))
-        regexArray.push(exp);
-      else
-        regexArray.push(exp);
+      if (Array.isArray(exp)) regexArray.push(exp);
+      else regexArray.push(exp);
     } else {
       for (let i = 0; i < exp.length; i++) {
         if (exp[i] === "\\") {
           regexArray.push(exp[i + 1]);
           i++;
         } else {
-          if (exp[i] === "9")
-            regexArray.push(/\d/);
-          else if (exp[i] === "a")
-            regexArray.push(/[a-zA-Z]/);
-          else
-            regexArray.push(exp[i]);
+          if (exp[i] === "9") regexArray.push(/\d/);
+          else if (exp[i] === "a") regexArray.push(/[a-zA-Z]/);
+          else regexArray.push(exp[i]);
         }
       }
     }

package/dist/esm/components/atoms/Switch/animation.js

@@ -2,8 +2,7 @@ import { Animated, Easing } from 'react-native';
 
 const ANIMATION_SPEED = 140;
 const transitionSwitch = (active, translate, transitionValue, animatedColor) => {
-  if (translate <= 0)
-    return;
+  if (translate <= 0) return;
   if (active) {
     Animated.timing(transitionValue, {
       toValue: translate,

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

@@ -58,8 +58,7 @@ function Calendar({
     () => [...Array(6).keys()].map(
       (week) => [...Array(7).keys()].map((weekDayIndex) => {
         let addDays = 6 * week + week + weekDayIndex - startingWeekDay;
-        if (weeksInMonth == 5 && startingWeekDay == 0)
-          addDays -= 7;
+        if (weeksInMonth == 5 && startingWeekDay == 0) addDays -= 7;
         return add(referenceDate, {
           days: addDays
         });

package/dist/esm/components/molecules/Calendar/components/MonthWeek.js

@@ -12,12 +12,10 @@ const MonthWeek = ({
 }) => {
   const checkIfIsBetween = React__default.useCallback(
     (date, _value) => {
-      if (type !== "range" || !_value)
-        return false;
+      if (type !== "range" || !_value) return false;
       else {
         const { lowest, highest } = _value;
-        if (!highest)
-          return false;
+        if (!highest) return false;
         return compareAsc(lowest, date) <= 0 && compareAsc(highest, date) >= 0;
       }
     },
@@ -25,8 +23,7 @@ const MonthWeek = ({
   );
   const checkIfIsSelected = React__default.useCallback(
     (date, _value) => {
-      if (!_value)
-        return false;
+      if (!_value) return false;
       else if (type === "range" && _value) {
         const { lowest, highest } = _value;
         return isSameDay(lowest, date) || (highest ? isSameDay(highest, date) : false);

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

@@ -48,8 +48,7 @@ function DatePicker({
     handleFocus();
   }, [handleFocus, requestShowCalendar]);
   const getDisplayValue = () => {
-    if (!value)
-      return placeholder;
+    if (!value) return placeholder;
     if (type === "day") {
       return format(value, format$1, { locale });
     } else {
@@ -58,8 +57,7 @@ function DatePicker({
         return `${format(lowest, format$1, {
           locale
         })} - ${format(highest, format$1, { locale })}`;
-      else
-        return placeholder;
+      else return placeholder;
     }
   };
   const StyledText = getStyledTextComponent(TextComponent);

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

@@ -9,8 +9,7 @@ import { Selector } from './Selector.js';
 import { Root, Header, BackButton, Content, SelectorContainer } from './styled.js';
 
 function getThresholdUnit(mode, threshold) {
-  if (!threshold)
-    return {};
+  if (!threshold) return {};
   if (mode === "month") {
     return { months: threshold };
   } else if (["date", "datetime"].includes(mode)) {

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

@@ -14,10 +14,8 @@ const getGridItemPadding = (pos, _spacing, themeSpacing) => {
       return extractNumbersFromString(themeSpacing[_spacing]);
     else if (typeof _spacing === "object" && _spacing[pos]) {
       return extractNumbersFromString(themeSpacing[_spacing[pos] ?? "0"]);
-    } else
-      return void 0;
-  } else
-    return void 0;
+    } else return void 0;
+  } else return void 0;
 };
 const getGridItemColumSpan = (columns, span) => 100 / (columns / span);
 

package/dist/esm/hooks/useDebouncedState.js

@@ -4,8 +4,7 @@ function useDebouncedState(initialState, timeoutCallback, timeoutMs = 166) {
   const timeoutId = useRef();
   const [state, setState] = useState(initialState);
   useEffect(() => {
-    if (timeoutId.current)
-      clearTimeout(timeoutId.current);
+    if (timeoutId.current) clearTimeout(timeoutId.current);
     if (timeoutCallback)
       timeoutId.current = setTimeout(() => timeoutCallback(state), timeoutMs);
   }, [state]);

package/dist/esm/styles/definitions.js

@@ -40,8 +40,7 @@ const statusColor = {
 };
 const hex2rgba = (hex, alpha = 1) => {
   const rgb = ((hex ?? "").match(/\w\w/g) ?? []).map((x) => parseInt(x, 16));
-  if (!rgb || (rgb ?? []).length === 0)
-    return "";
+  if (!rgb || (rgb ?? []).length === 0) return "";
   const [r, g, b] = rgb;
   return `rgba(${r},${g},${b},${alpha})`;
 };

package/dist/esm/utils/ResponsiveFontSize.js

@@ -4,8 +4,7 @@ import { isIphoneX } from './IPhoneXHelper.js';
 
 const STANDARD_SCREEN_HEIGHT = 680;
 const RFPercentage = (percent) => {
-  if (Platform.OS === "web")
-    return percent;
+  if (Platform.OS === "web") return percent;
   const { height, width } = Dimensions.get("window");
   const standardLength = width > height ? width : height;
   const offset = width > height ? 0 : Platform.OS === "ios" ? 78 : StatusBar.currentHeight || 0;
@@ -14,8 +13,7 @@ const RFPercentage = (percent) => {
   return Math.round(heightPercent);
 };
 const RFValue = (fontSize, standardScreenHeight = STANDARD_SCREEN_HEIGHT) => {
-  if (Platform.OS === "web")
-    return fontSize;
+  if (Platform.OS === "web") return fontSize;
   const { height, width } = Dimensions.get("window");
   const standardLength = width > height ? width : height;
   const offset = width > height ? 0 : Platform.OS === "ios" ? 78 : StatusBar.currentHeight || 0;

package/dist/esm/utils/lightenDarkenColor.js

@@ -6,20 +6,14 @@ const lightenDarkenColor = (color, variation) => {
   }
   const num = parseInt(color, 16);
   let r = (num >> 16) + variation;
-  if (r > 255)
-    r = 255;
-  else if (r < 0)
-    r = 0;
+  if (r > 255) r = 255;
+  else if (r < 0) r = 0;
   let b = (num >> 8 & 255) + variation;
-  if (b > 255)
-    b = 255;
-  else if (b < 0)
-    b = 0;
+  if (b > 255) b = 255;
+  else if (b < 0) b = 0;
   let g = (num & 255) + variation;
-  if (g > 255)
-    g = 255;
-  else if (g < 0)
-    g = 0;
+  if (g > 255) g = 255;
+  else if (g < 0) g = 0;
   return (usePound ? "#" : "") + (g | b << 8 | r << 16).toString(16);
 };
 

package/dist/types/components/atoms/Avatar/Avatar.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AvatarProps } from './types';
+declare const Avatar: React.FC<AvatarProps>;
+export default Avatar;

package/dist/types/components/atoms/Avatar/helpers.d.ts

@@ -0,0 +1 @@
+export declare const getIniciais: (name: string) => string;

package/dist/types/components/atoms/Avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Avatar } from './Avatar';
+export type { AvatarProps } from './types';

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

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import { Image, View } from 'react-native';
+import { TextProps } from '../Text';
+import { AvatarProps } from './types';
+export declare const ContainerButtonAvatar: import("@emotion/native").StyledComponent<import("../PressableSurface").PressableSurfaceProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("../../../types/defaults").ThemeProviderProps & AvatarProps>, {}, {}>;
+export declare const StyledAvatar: import("@emotion/native").StyledComponent<import("react-native").ImageProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {
+    ref?: import("react").Ref<Image> | undefined;
+}>;
+export declare const StyledBackground: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const getStyledTextComponent: (component: FC<TextProps>) => import("@emotion/native").StyledComponent<TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;

package/dist/types/components/atoms/Avatar/types.d.ts

@@ -0,0 +1,12 @@
+import { IconSize } from '../../../types/defaults';
+import { ImageSourcePropType } from 'react-native';
+import { FC } from 'react';
+import { TextProps } from '../Text';
+export type SizeAvatar = Omit<IconSize, 'centi' | 'deca'>;
+export interface AvatarProps {
+    source?: ImageSourcePropType;
+    name: string;
+    onPress?: () => void;
+    size?: keyof SizeAvatar;
+    TextComponent?: FC<TextProps>;
+}

package/dist/types/components/atoms/Badge/Badge.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { ColorGradationType, ColorType } from '../../../types/defaults';
+export interface BadgeProps {
+    color: ColorType;
+    tone?: ColorGradationType;
+    style?: StyleProp<ViewStyle>;
+    value: React.ReactNode;
+    children?: ReactNode;
+}
+declare const Badge: ({ children, style, color, tone, value, }: BadgeProps) => JSX.Element;
+export default Badge;

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

@@ -0,0 +1,2 @@
+export { default as Badge } from './Badge';
+export type { BadgeProps } from './Badge';

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { View } from 'react-native';
+import { BadgeProps } from './Badge';
+export declare const BadgeStyle: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("../../../types/defaults").ThemeProviderProps & BadgeProps>, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const ViewStyled: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("../../../types/defaults").ThemeProviderProps & BadgeProps>, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;

package/dist/types/components/atoms/BoxContent/BoxContent.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { ViewProps } from 'react-native';
+export interface BoxContentProps extends ViewProps {
+    variant: 'top' | 'bottom' | 'left' | 'right';
+}
+declare const BoxContent: FC<BoxContentProps>;
+export default BoxContent;

package/dist/types/components/atoms/BoxContent/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BoxContent } from './BoxContent';
+export type { BoxContentProps } from './BoxContent';