@tecsinapse/react-native-kit 1.22.1-beta.8 → 1.22.2

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../src/components/molecules/Select/styled.ts"],"sourcesContent":["import styled, { css } from '@emotion/native';\nimport {\n  Button,\n  ButtonProps,\n  disabledInputStyles,\n  Icon,\n  InputContainerProps,\n  PressableSurface,\n  PressableSurfaceProps,\n  RFValue,\n  RFValueStr,\n  StyleProps,\n} from '@tecsinapse/react-core';\nimport { ActivityIndicator, ModalProps, View, ViewProps } from 'react-native';\nimport { Input, InputNativeProps } from '../../atoms/Input';\nimport { Text } from '../../atoms/Text';\n\nexport const getStyledModal = (safeTop = 0) => {\n  return styled(View)<ModalProps & Partial<StyleProps>>`\n    padding-top: ${`${RFValue(safeTop)}px`};\n    background-color: ${({ theme }) => theme.miscellaneous.bodyColor};\n    height: 100%;\n  `;\n};\n\nexport const StyledSelectionText = styled(Text)(\n  (props: Partial<InputContainerProps> & Partial<StyleProps>) => css`\n    line-height: ${props.theme?.typography.h5.lineHeight};\n    ${disabledInputStyles(props)};\n  `\n);\n\nexport const Dummy = styled(View)`\n  aspect-ratio: 1;\n  height: 100%;\n`;\n\nexport const StyledPressableSurface = styled(\n  PressableSurface\n)<PressableSurfaceProps>`\n  width: 100%;\n`;\n\nexport const Header = styled(View)<ViewProps & Partial<StyleProps>>`\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding: ${({ theme }) => theme.spacing.deca};\n  height: ${RFValueStr('75px')};\n`;\n\nexport const CloseButton = styled(Button)<ButtonProps & Partial<StyleProps>>`\n  aspect-ratio: 1;\n  height: 100%;\n`;\n\nexport const SearchBarContainer = styled(View)<ViewProps & Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.deca};\n  position: relative;\n`;\n\nexport const SearchBar = styled(Input)<InputNativeProps & Partial<StyleProps>>`\n  margin-bottom: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const ListItem = styled(PressableSurface)<\n  PressableSurfaceProps & Partial<StyleProps>\n>`\n  border-bottom-width: ${RFValueStr('1px')};\n  border-color: ${({ theme }) => theme.color.secondary.light};\n  padding-vertical: ${({ theme }) => theme.spacing.mili};\n  padding-horizontal: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const ModalFooter = styled(View)<Partial<StyleProps>>`\n  width: 100%;\n  height: auto;\n  bottom: 0;\n  background-color: ${({ theme }) => theme.miscellaneous.bodyColor};\n  padding: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const SelectIcon = styled(Icon)<Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.centi};\n  color: ${({ theme }) => theme.color.secondary.medium};\n`;\n\nexport const FetchIndicator = styled(ActivityIndicator)`\n  align-self: center;\n`;\n\nexport const TextTitleModal = styled(Text)<Partial<StyleProps>>`\n  text-align: center;\n`;\n"],"names":[],"mappings":";;;;;;AAiBa,MAAA,cAAA,GAAiB,CAAC,OAAA,GAAU,CAAM,KAAA;AAC7C,EAAA,OAAO,OAAO,IAAI,CAAA,CAAA;AAAA,iBACD,EAAA,CAAA,EAAG,QAAQ,OAAO,CAAA,CAAA,EAAA,CAAA,CAAA;AAAA,sBAAA,EACb,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,aAAc,CAAA,SAAA,CAAA;AAAA;AAAA,EAAA,CAAA,CAAA;AAG3D,EAAA;AAEa,MAAA,mBAAA,GAAsB,OAAO,IAAI,CAAA;AAAA,EAC5C,CAAC,KAA2D,KAAA;AA1B9D,IAAA,IAAA,EAAA,CAAA;AA0BiE,IAAA,OAAA,GAAA,CAAA;AAAA,iBAAA,EAAA,CAC9C,EAAM,GAAA,KAAA,CAAA,KAAA,KAAN,IAAa,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,UAAA,CAAW,EAAG,CAAA,UAAA,CAAA;AAAA,IAAA,EACxC,oBAAoB,KAAK,CAAA,CAAA;AAAA,EAAA,CAAA,CAAA;AAAA,GAAA;AAE/B,EAAA;AAEqB,OAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA,EAAA;AAKM,MAAA;AAAA,EACpC,gBAAA;AACF,CAAA,CAAA;AAAA;AAAA,EAAA;AAIsB,OAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAAA,EAOpB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,UAAA,EAC9B,WAAW,MAAM,CAAA,CAAA;AAAA,EAAA;AAGF,OAAO,MAAM,CAAA,CAAA;AAAA;AAAA;AAAA,EAAA;AAK3B,MAAA,kBAAA,GAAqB,OAAO,IAAI,CAAA,CAAA;AAAA,WAAA,EAChC,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA;AAAA,EAAA;AAIjB,OAAO,KAAK,CAAA,CAAA;AAAA,iBAAA,EAClB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA;AAGnC,MAAA,QAAA,GAAW,OAAO,gBAAgB,CAAA,CAAA;AAAA,uBAAA,EAGtB,WAAW,KAAK,CAAA,CAAA;AAAA,gBAAA,EACvB,CAAC,EAAE,KAAA,EAAY,KAAA,KAAA,CAAM,MAAM,SAAU,CAAA,KAAA,CAAA;AAAA,oBAAA,EACjC,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,sBAAA,EAC3B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA;AAGxC,MAAA,WAAA,GAAc,OAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,oBAAA,EAIhB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,aAAc,CAAA,SAAA,CAAA;AAAA,WAAA,EAC5C,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA;AAG7B,MAAA,UAAA,GAAa,OAAO,IAAI,CAAA,CAAA;AAAA,WAAA,EACxB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,KAAA,CAAA;AAAA,SAAA,EAC/B,CAAC,EAAE,KAAA,EAAY,KAAA,KAAA,CAAM,MAAM,SAAU,CAAA,MAAA,CAAA;AAAA,EAAA;AAGnC,MAAA,cAAA,GAAiB,OAAO,iBAAiB,CAAA,CAAA;AAAA;AAAA,EAAA;AAIzC,MAAA,cAAA,GAAiB,OAAO,IAAI,CAAA,CAAA;AAAA;AAAA;;;;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"Snackbar.js","sources":["../../../../src/components/molecules/Snackbar/Snackbar.tsx"],"sourcesContent":["import React from 'react';\nimport { SnackbarProps as SnackPropsCore } from '@tecsinapse/react-core';\nimport { Text, TextNativeProps } from '../../atoms/Text';\nimport { SnackbarStyled } from './styled';\n\nexport interface SnackbarNativeProps extends Omit<SnackPropsCore, 'children'> {\n  value: string;\n  textProps?: TextNativeProps;\n}\n\nconst Snackbar: React.FC<SnackbarNativeProps> = ({\n  value,\n  textProps = { colorVariant: 'primary', colorTone: 'medium' },\n  ...rest\n}) => {\n  return (\n    <SnackbarStyled {...rest}>\n      <Text {...textProps} fontWeight=\"bold\" typography=\"base\">\n        {value}\n      </Text>\n    </SnackbarStyled>\n  );\n};\n\nexport default Snackbar;\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUM,MAAA,QAAA,GAA0C,CAAC,EAI3C,KAAA;AAJ2C,EAC/C,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,KAAA;AAAA,IACA,SAAY,GAAA,EAAE,YAAc,EAAA,SAAA,EAAW,WAAW,QAAS,EAAA;AAAA,GAZ7D,GAUiD,EAG5C,EAAA,IAAA,GAAA,SAAA,CAH4C,EAG5C,EAAA;AAAA,IAFH,OAAA;AAAA,IACA,WAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,cAAA,EAAA,cAAA,CAAA,EAAA,EAAmB,IAClB,CAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,uCAAS,SAAT,CAAA,EAAA;AAAA,IAAoB,UAAW,EAAA,MAAA;AAAA,IAAO,UAAW,EAAA,MAAA;AAAA,GAAA,CAAA,EAC/C,KACH,CACF,CAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../src/components/molecules/Snackbar/styled.ts"],"sourcesContent":["import styled from '@emotion/native';\nimport { Snackbar as SnackbarCore, StyleProps } from '@tecsinapse/react-core';\n\nexport const SnackbarStyled = styled(SnackbarCore)<Partial<StyleProps>>`\n  left: ${({ theme }) => theme.spacing.deca};\n  right: ${({ theme }) => theme.spacing.deca};\n`;\n"],"names":["SnackbarCore"],"mappings":";;;AAGa,MAAA,cAAA,GAAiB,OAAOA,QAAY,CAAA,CAAA;AAAA,QAAA,EACvC,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,SAAA,EAC5B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA;;;;"}

package/esm/utils/date.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date.js","sources":["../../src/utils/date.ts"],"sourcesContent":["import { NativeModules, Platform } from 'react-native';\nimport * as dateFnsLocales from 'date-fns/locale';\n\nexport const getLocale = (): Locale => {\n  let locale: string;\n  if (Platform.OS === 'ios') {\n    locale =\n      NativeModules.SettingsManager.settings.AppleLocale ||\n      NativeModules.SettingsManager.settings.AppleLanguages[0];\n  } else {\n    locale = NativeModules.I18nManager.localeIdentifier;\n  }\n\n  const code = locale.replace('_', '');\n\n  return dateFnsLocales[code];\n};\n"],"names":[],"mappings":";;;AAGO,MAAM,YAAY,MAAc;AACrC,EAAI,IAAA,MAAA,CAAA;AACJ,EAAI,IAAA,QAAA,CAAS,OAAO,KAAO,EAAA;AACzB,IAAA,MAAA,GACE,cAAc,eAAgB,CAAA,QAAA,CAAS,eACvC,aAAc,CAAA,eAAA,CAAgB,SAAS,cAAe,CAAA,CAAA,CAAA,CAAA;AAAA,GACnD,MAAA;AACL,IAAA,MAAA,GAAS,cAAc,WAAY,CAAA,gBAAA,CAAA;AAAA,GACrC;AAEA,EAAA,MAAM,IAAO,GAAA,MAAA,CAAO,OAAQ,CAAA,GAAA,EAAK,EAAE,CAAA,CAAA;AAEnC,EAAA,OAAO,cAAe,CAAA,IAAA,CAAA,CAAA;AACxB;;;;"}

package/package.json

@@ -1,18 +1,11 @@
 {
   "name": "@tecsinapse/react-native-kit",
   "description": "TecSinapse React Native components",
-  "version": "1.22.1-beta.8+28a3477",
+  "version": "1.22.2",
+  "main": "dist/index.js",
+  "module": "esm/index.js",
+  "types": "dist/index.d.ts",
   "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/esm/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "exports": {
-    "import": "./dist/esm/index.js",
-    "default": "./dist/cjs/index.js"
-  },
   "scripts": {
     "start": "yarn build:es --watch",
     "build:es": "yarn rollup --config",
@@ -24,10 +17,10 @@
     "yalc:show": "yalc installations show $npm_package_name"
   },
   "dependencies": {
-    "@emotion/native": "~11.10.0",
-    "@emotion/react": "~11.10.0",
-    "@tecsinapse/react-core": "^1.21.1-beta.8+28a3477",
-    "react-native-linear-gradient": "~2.5.6"
+    "@emotion/native": "^11.10.0",
+    "@emotion/react": "^11.10.0",
+    "@tecsinapse/react-core": "^1.21.2",
+    "react-native-linear-gradient": "^2.5.6"
   },
   "repository": {
     "type": "git",
@@ -49,5 +42,5 @@
   "devDependencies": {
     "@types/uuid": "^8.3.3"
   },
-  "gitHead": "28a3477be880727285a5155950d80f7d78666314"
+  "gitHead": "6fd94322cdd8670ff536a8fb8271cb519b2310c9"
 }

package/rollup.config.js

@@ -0,0 +1,39 @@
+import esbuild from 'rollup-plugin-esbuild';
+
+const outputDefaultConfig = {
+  preserveModules: true,
+  preserveModulesRoot: 'src',
+  sourcemap: true,
+};
+
+export default [
+  {
+    input: ['./src/index.ts'],
+    output: [
+      {
+        dir: 'esm',
+        format: 'esm',
+        ...outputDefaultConfig,
+      },
+      {
+        dir: 'dist',
+        format: 'cjs',
+        exports: 'auto',
+        ...outputDefaultConfig,
+      },
+    ],
+    plugins: [esbuild({ tsconfig: 'tsconfig.build.json' })],
+    external: [
+      'react',
+      'react-native',
+      'react-native-linear-gradient',
+      '@emotion/native',
+      '@emotion/react',
+      '@tecsinapse/react-core',
+      'react-native-vector-icons',
+      'react-native-safe-area-context',
+      'uuid',
+      'date-fns/locale',
+    ],
+  },
+];

package/src/components/atoms/Avatar/Avatar.tsx

@@ -0,0 +1,9 @@
+import { Avatar as AvatarCore, AvatarProps } from '@tecsinapse/react-core';
+import React from 'react';
+import { Text } from '../Text';
+
+const Avatar: React.FC<AvatarProps> = props => {
+  return <AvatarCore {...props} TextComponent={Text} />;
+};
+
+export default Avatar;

package/src/components/atoms/Avatar/index.ts

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

package/src/components/atoms/Badge/Badge.tsx

@@ -0,0 +1,34 @@
+import React, { FC } from 'react';
+import {
+  BadgeProps,
+  Badge as BadgeCore,
+  FontColorType,
+} from '@tecsinapse/react-core';
+import { Text } from '../Text';
+
+export interface BadgeNativeProps extends Omit<BadgeProps, 'value'> {
+  fontColor?: FontColorType;
+  value: string | number;
+}
+
+const Badge: FC<BadgeNativeProps> = ({
+  children,
+  fontColor = 'light',
+  value,
+  ...props
+}) => {
+  return (
+    <BadgeCore
+      {...props}
+      value={
+        <Text fontColor={fontColor} fontWeight={'bold'} typography={'label'}>
+          {value}
+        </Text>
+      }
+    >
+      {children}
+    </BadgeCore>
+  );
+};
+
+export default Badge;

package/src/components/atoms/Badge/index.ts

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

package/src/components/atoms/BottomNavigator/BottomNavigator.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { ViewProps } from 'react-native';
+import { StyledView, TabContainer } from './styled';
+import Item, { BottomNavigatorItemProps } from './Item';
+import { Text } from '../Text';
+
+export interface BottomNavigatorProps<T extends string | number | symbol>
+  extends ViewProps {
+  selected: T;
+  onSelect: (value: T) => void | never;
+  children:
+    | React.ReactElement<BottomNavigatorItemProps<T>>
+    | React.ReactElement<BottomNavigatorItemProps<T>>[];
+}
+
+function BottomNavigator<T extends string | number | symbol>({
+  selected,
+  onSelect,
+  children,
+  ...rest
+}: BottomNavigatorProps<T>): JSX.Element {
+  return (
+    <StyledView {...rest}>
+      {React.Children.map(children, child => {
+        const { value, label, labelProps, labelElement } = (
+          child as React.ReactElement<BottomNavigatorItemProps<T>>
+        ).props;
+        const isSelected = value == selected;
+
+        return (
+          <TabContainer selected={isSelected} onPress={() => onSelect(value)}>
+            {React.cloneElement(child as React.ReactElement, {
+              _selected: isSelected,
+            })}
+            {label && !labelElement && (
+              <Text
+                colorVariant={
+                  labelProps?.colorVariant || isSelected
+                    ? 'primary'
+                    : 'secondary'
+                }
+                typography={labelProps?.typography || 'sub'}
+                {...labelProps}
+              >
+                {label}
+              </Text>
+            )}
+            {labelElement && labelElement}
+          </TabContainer>
+        );
+      })}
+    </StyledView>
+  );
+}
+
+BottomNavigator.Item = Item;
+
+export default BottomNavigator;

package/src/components/atoms/BottomNavigator/Item.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { Icon, IconProps } from '@tecsinapse/react-core';
+import { TabContent, CustomTabContent } from './styled';
+import { ViewProps } from 'react-native';
+import { TextNativeProps } from '../Text';
+
+type ValueType = string | number | symbol;
+
+export interface BottomNavigatorItemProps<T extends ValueType>
+  extends Omit<ViewProps, 'children'> {
+  _selected?: boolean;
+  value: T;
+  icon: IconProps;
+  label?: string;
+  labelProps?: TextNativeProps;
+  labelElement?: React.ReactNode | React.ReactNode[];
+  children: React.ReactNode | React.ReactNode[];
+}
+
+type ItemPropsWithIcon<T extends ValueType> = Omit<
+  BottomNavigatorItemProps<T>,
+  'children'
+>;
+
+type ItemPropsWithChildren<T extends ValueType> = Omit<
+  BottomNavigatorItemProps<T>,
+  'icon' | 'label' | 'labelElement' | 'labelProps'
+>;
+
+function Item<T extends ValueType>(props: ItemPropsWithChildren<T>);
+function Item<T extends ValueType>(props: ItemPropsWithIcon<T>);
+function Item<T extends ValueType>({
+  _selected,
+  icon,
+  children,
+  ...rest
+}: Partial<BottomNavigatorItemProps<T>>): JSX.Element {
+  const styledButtonStyle = _selected
+    ? undefined
+    : { backgroundColor: 'transparent' };
+
+  const iconColorVariant = _selected ? 'primary' : 'secondary';
+
+  if (icon) {
+    return (
+      <TabContent style={styledButtonStyle} {...rest}>
+        <Icon colorVariant={iconColorVariant} size={'centi'} {...icon} />
+      </TabContent>
+    );
+  } else {
+    return <CustomTabContent>{children}</CustomTabContent>;
+  }
+}
+
+export default Item;

package/src/components/atoms/BottomNavigator/index.ts

@@ -0,0 +1,4 @@
+export { default as BottomNavigator } from './BottomNavigator';
+export { BottomNavigatorProps } from './BottomNavigator';
+
+export type { BottomNavigatorItemProps } from './Item';

package/src/components/atoms/BottomNavigator/styled.ts

@@ -0,0 +1,34 @@
+import styled from '@emotion/native';
+import { RFValueStr, StyleProps } from '@tecsinapse/react-core';
+import { PressableProps, ViewProps } from 'react-native';
+
+export const StyledView = styled.View<ViewProps & Partial<StyleProps>>`
+  flex-direction: row;
+  justify-content: space-between;
+  padding-horizontal: ${({ theme }) => theme.spacing.deca};
+  padding-bottom: ${({ theme }) => theme.spacing.kilo};
+  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
+`;
+
+export const TabContainer = styled.Pressable<
+  { selected: boolean } & PressableProps & Partial<StyleProps>
+>`
+  flex: 1;
+  margin-horizontal: ${({ theme }) => theme.spacing.mili};
+  padding-top: ${({ theme }) => theme.spacing.deca};
+  border-top-width: ${({ selected }) => (selected ? RFValueStr('2px') : 0)};
+  border-color: ${({ theme }) => theme.color.primary.medium};
+  align-items: center;
+  justify-content: flex-end;
+`;
+
+export const TabContent = styled.View<ViewProps & Partial<StyleProps>>`
+  aspect-ratio: 1;
+  justify-content: center;
+  align-items: center;
+  min-height: ${RFValueStr('48px')};
+  background-color: ${({ theme }) => theme.color.primary.xlight};
+  border-radius: ${({ theme }) => theme.borderRadius['mili']};
+`;
+
+export const CustomTabContent = styled.View<ViewProps & Partial<StyleProps>>``;

package/src/components/atoms/Button/Button.tsx

@@ -0,0 +1,23 @@
+import { Button as ButtonCore, ButtonProps } from '@tecsinapse/react-core';
+import React, { FC, useCallback } from 'react';
+import { Keyboard } from 'react-native';
+
+export type ButtonNativeProps = ButtonProps & {
+  autoDismissKeyboard?: boolean;
+};
+
+export const Button: FC<ButtonNativeProps> = ({
+  autoDismissKeyboard = true,
+  onPress,
+  ...others
+}) => {
+  const handleOnPress = useCallback(
+    event => {
+      autoDismissKeyboard && Keyboard.dismiss();
+      onPress?.(event);
+    },
+    [onPress]
+  );
+
+  return <ButtonCore {...others} onPress={handleOnPress} />;
+};

package/src/components/atoms/Button/States/Error.tsx

@@ -0,0 +1,9 @@
+import { ButtonStateProps, Error as CoreError } from '@tecsinapse/react-core';
+import React, { FC } from 'react';
+import { Text } from '../../Text';
+
+const Error: FC<ButtonStateProps> = props => {
+  return <CoreError {...props} textComponent={Text} />;
+};
+
+export default Error;

package/src/components/atoms/Button/States/Loading.tsx

@@ -0,0 +1,12 @@
+import {
+  ButtonStateProps,
+  Loading as CoreLoading,
+} from '@tecsinapse/react-core';
+import React, { FC } from 'react';
+import { Text } from '../../Text';
+
+const Loading: FC<ButtonStateProps> = props => {
+  return <CoreLoading {...props} textComponent={Text} />;
+};
+
+export default Loading;

package/src/components/atoms/Button/States/Success.tsx

@@ -0,0 +1,12 @@
+import {
+  ButtonStateProps,
+  Success as CoreSuccess,
+} from '@tecsinapse/react-core';
+import React, { FC } from 'react';
+import { Text } from '../../Text';
+
+const Success: FC<ButtonStateProps> = props => {
+  return <CoreSuccess {...props} textComponent={Text} />;
+};
+
+export default Success;

package/src/components/atoms/Button/States/index.ts

@@ -0,0 +1,3 @@
+export { default as Error } from './Error';
+export { default as Loading } from './Loading';
+export { default as Success } from './Success';

package/src/components/atoms/Button/index.ts

@@ -0,0 +1,3 @@
+export { Button } from './Button';
+export type { ButtonNativeProps } from './Button';
+export { Error, Loading, Success } from './States';

package/src/components/atoms/GroupButton/GroupButtonOption.tsx

@@ -0,0 +1,12 @@
+import {
+  GroupButtonOption as CoreGroupButtonOption,
+  GroupButtonOptionProps,
+} from '@tecsinapse/react-core';
+import React from 'react';
+import { Text } from '../Text';
+
+const GroupButtonOption = (props: GroupButtonOptionProps): JSX.Element => {
+  return <CoreGroupButtonOption {...props} TextComponent={Text} />;
+};
+
+export default GroupButtonOption;

package/src/components/atoms/GroupButton/index.ts

@@ -0,0 +1 @@
+export { default as GroupButtonOption } from './GroupButtonOption';

package/src/components/atoms/Header/Header.tsx

@@ -0,0 +1,52 @@
+import { ViewProps } from 'react-native';
+import { StyledView, FloatingButton, Dummy } from './styled';
+import { ButtonProps, Icon, IconProps } from '@tecsinapse/react-core';
+import * as React from 'react';
+
+type Attachable = ButtonProps & {
+  icon: IconProps;
+};
+
+export interface HeaderProps extends ViewProps {
+  rightButton?: Attachable;
+  leftButton?: Attachable;
+}
+
+const Header: React.FC<HeaderProps> = ({
+  rightButton,
+  leftButton,
+  children,
+  ...rest
+}) => {
+  return (
+    <StyledView {...rest}>
+      {leftButton ? (
+        <FloatingButton
+          {...leftButton}
+          variant={leftButton?.variant || 'filled'}
+          color={leftButton?.color || 'primary'}
+          size={leftButton?.size || 'small'}
+        >
+          {leftButton?.icon && <Icon {...leftButton?.icon} />}
+        </FloatingButton>
+      ) : (
+        <Dummy disabled />
+      )}
+      {children}
+      {rightButton ? (
+        <FloatingButton
+          {...rightButton}
+          variant={rightButton?.variant || 'filled'}
+          color={rightButton?.color || 'primary'}
+          size={rightButton?.size || 'small'}
+        >
+          {rightButton?.icon && <Icon {...rightButton?.icon} />}
+        </FloatingButton>
+      ) : (
+        <Dummy disabled />
+      )}
+    </StyledView>
+  );
+};
+
+export default Header;

package/src/components/atoms/Header/index.ts

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

package/src/components/atoms/Header/styled.ts

@@ -0,0 +1,18 @@
+import styled from '@emotion/native';
+import { Button, ButtonProps, StyleProps } from '@tecsinapse/react-core';
+
+export const StyledView = styled.View<Partial<StyleProps>>`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: ${({ theme }) => theme.spacing.deca};
+  width: 100%;
+`;
+
+export const FloatingButton = styled(Button)<ButtonProps & Partial<StyleProps>>`
+  aspect-ratio: 1;
+`;
+
+export const Dummy = styled(FloatingButton)`
+  background-color: rgba(0, 0, 0, 0);
+`;

package/src/components/atoms/Input/Input.tsx

@@ -0,0 +1,107 @@
+import {
+  FontStackType,
+  FontWeightType,
+  Hint,
+  InputContainer,
+  InputContainerProps,
+  InputElementProps,
+  RFValue,
+  useInputFocus,
+} from '@tecsinapse/react-core';
+import React from 'react';
+import { StyleProp, TextInput, View, ViewStyle } from 'react-native';
+import { Text } from '../Text';
+import { StyledNativeInput } from './styled';
+
+export interface InputNativeProps
+  extends Omit<InputElementProps, 'style'>,
+    InputContainerProps {
+  inputFontStack?: FontStackType;
+  inputFontWeight?: FontWeightType;
+}
+
+const Input = React.forwardRef<TextInput, InputNativeProps>(
+  (
+    {
+      label,
+      labelColor,
+      labelColorVariant,
+      labelColorTone,
+      labelTypography,
+      labelStack,
+      labelWeight,
+      leftComponent,
+      rightComponent,
+      disabled,
+      borderColor,
+      borderColorGradation,
+      inputFontStack = 'default',
+      inputFontWeight = 'bold',
+      inputContainerStyle,
+      variant = 'default',
+      hintComponent,
+      hint,
+      onFocus,
+      onBlur,
+      value,
+      placeholder,
+      ...rest
+    },
+    ref
+  ) => {
+    const _hint = hintComponent || (
+      <Hint TextComponent={Text} text={hint} variant={variant} />
+    );
+    const { focused, handleBlur, handleFocus } = useInputFocus(
+      onFocus,
+      onBlur,
+      !disabled
+    );
+
+    const internalStyle: StyleProp<ViewStyle> = {
+      minHeight: RFValue(50),
+      ...{ inputContainerStyle },
+    };
+    const onlyLabel = label && !placeholder;
+
+    return (
+      <View>
+        <InputContainer
+          label={value ? label : undefined}
+          labelColor={labelColor}
+          labelColorVariant={labelColorVariant}
+          labelColorTone={labelColorTone}
+          labelTypography={labelTypography}
+          labelStack={labelStack}
+          labelWeight={labelWeight}
+          LabelComponent={Text}
+          leftComponent={leftComponent}
+          rightComponent={rightComponent}
+          borderColor={borderColor}
+          borderColorGradation={borderColorGradation}
+          inputContainerStyle={internalStyle}
+          focused={focused}
+          disabled={disabled}
+          variant={variant}
+        >
+          <StyledNativeInput
+            {...rest}
+            placeholder={onlyLabel ? label : placeholder}
+            value={value}
+            ref={ref}
+            fontStack={inputFontStack}
+            fontWeight={inputFontWeight}
+            disabled={disabled}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+          />
+        </InputContainer>
+        {hint && _hint}
+      </View>
+    );
+  }
+);
+
+Input.displayName = 'Input';
+
+export default Input;

package/src/components/atoms/Input/index.ts

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

package/src/components/atoms/Input/styled.ts

@@ -0,0 +1,16 @@
+import styled from '@emotion/native';
+import { InputElement, StyleProps } from '@tecsinapse/react-core';
+import { Font, fontStyles } from '../Text/styled';
+import { InputNativeProps } from './Input';
+
+const StyledNativeInputBase = styled(InputElement)<
+  Partial<InputNativeProps> & Partial<StyleProps>
+>`
+  height: ${({ theme }) => theme.typography.h5.lineHeight};
+  width: 100%;
+  padding: 0;
+`;
+
+export const StyledNativeInput = styled(StyledNativeInputBase)<
+  Font & Partial<InputNativeProps> & Partial<StyleProps>
+>(fontStyles);