@tecsinapse/react-core 1.20.0 → 1.21.0

package/esm/components/atoms/ProgressBar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","names":["useTheme","React","Animated","extractNumbersFromString","Container","Progress","Segment","ProgressBar","segments","_segments","valueMin","_valueNow","valueNow","valueMax","color","colorTone","animate","animationParameters","rest","theme","animationValue","useRef","Value","current","totalProgress","Math","max","segmentWidth","items","Array","keys","segmentsRender","map","index","min","minmax","width","progressPercent","timing","toValue","duration","length","useNativeDriver","delay","direction","start","rangeAnimation","interpolate","inputRange","outputRange","borderRightWidth","backgroundColor"],"sources":["../../../../src/components/atoms/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import { useTheme } from '@emotion/react';\nimport * as React from 'react';\nimport { Animated, ViewProps } from 'react-native';\nimport {\n  ColorGradationType,\n  ColorType,\n  ThemeProp,\n} from '@tecsinapse/react-core';\nimport { extractNumbersFromString } from '../../../utils';\nimport { Container, Progress, Segment } from './styled';\n\nexport interface ProgressBarProps extends ViewProps {\n  /** Number of segments. Defaults to 1. Set to 1 when 0 or less */\n  segments?: number;\n  /** Minimum possible value (0% of the bar). Defaults to 0 */\n  valueMin?: number;\n  /** Maximum possible value (100% of the bar). Defaults to 100 */\n  valueMax?: number;\n  /** Current value */\n  valueNow: number | string;\n  /** Filled partition color. Defaults to 'primary' */\n  color?: ColorType;\n  /** Filled partition color tone. Defaults to 'medium' */\n  colorTone?: ColorGradationType;\n  /** Animation */\n  animate: boolean;\n  /** Parameters animation  */\n  animationParameters?: { direction: 'left' | 'right'; duration: number };\n}\n\nconst ProgressBar: React.FC<ProgressBarProps> = ({\n  segments: _segments = 1,\n  valueMin = 0,\n  valueNow: _valueNow,\n  valueMax = 100,\n  color = 'primary',\n  colorTone = 'medium',\n  animate,\n  animationParameters,\n  ...rest\n}) => {\n  const theme = useTheme() as ThemeProp;\n  const animationValue = React.useRef(new Animated.Value(0)).current;\n\n  const valueNow =\n    typeof _valueNow === 'string'\n      ? extractNumbersFromString(_valueNow)\n      : _valueNow;\n\n  const totalProgress = ((valueNow - valueMin) / (valueMax - valueMin)) * 100;\n  const segments = Math.max(1, _segments);\n  const segmentWidth = 100 / Math.max(segments);\n\n  const items = [...Array(segments).keys()];\n\n  const segmentsRender = items.map(index => {\n    const max = segmentWidth * (index + 1);\n    const min = segmentWidth * index;\n    const minmax = (totalProgress - min) / (max - min);\n    const width = (minmax > 1 ? 1 : minmax < 0 ? 0 : minmax) * 100;\n\n    let progressPercent: string | Animated.AnimatedInterpolation = `${width}%`;\n\n    if (animate && animationParameters) {\n      Animated.timing(animationValue, {\n        toValue: 1,\n        duration: animationParameters.duration / items.length,\n        useNativeDriver: false,\n        delay:\n          animationParameters.direction === 'right'\n            ? index * (animationParameters.duration / items.length)\n            : (items.length - index - 1) *\n              (animationParameters.duration / items.length),\n      }).start();\n\n      const rangeAnimation =\n        animationParameters?.direction === 'right'\n          ? [`${valueMin < 0 ? 0 : valueMin}%`, `${width}%`]\n          : [`${valueMax}%`, `${width}%`];\n\n      progressPercent = animationValue.interpolate?.({\n        inputRange: [0, 1],\n        outputRange: rangeAnimation,\n      });\n    }\n\n    return (\n      <Segment\n        key={index}\n        style={{\n          borderRightWidth: index == segments - 1 ? 0 : 2,\n        }}\n      >\n        <Progress\n          style={{\n            width: progressPercent,\n            backgroundColor: theme.color[color][colorTone],\n            borderRightWidth: width > 0 && width < 100 ? 2 : 0,\n          }}\n        />\n      </Segment>\n    );\n  });\n\n  return <Container {...rest}>{segmentsRender}</Container>;\n};\n\nexport default ProgressBar;\n"],"mappings":"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"}
+{"version":3,"file":"ProgressBar.js","sources":["../../../../src/components/atoms/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import { useTheme } from '@emotion/react';\nimport * as React from 'react';\nimport { Animated, ViewProps } from 'react-native';\nimport {\n  ColorGradationType,\n  ColorType,\n  ThemeProp,\n} from '@tecsinapse/react-core';\nimport { extractNumbersFromString } from '../../../utils';\nimport { Container, Progress, Segment } from './styled';\n\nexport interface ProgressBarProps extends ViewProps {\n  /** Number of segments. Defaults to 1. Set to 1 when 0 or less */\n  segments?: number;\n  /** Minimum possible value (0% of the bar). Defaults to 0 */\n  valueMin?: number;\n  /** Maximum possible value (100% of the bar). Defaults to 100 */\n  valueMax?: number;\n  /** Current value */\n  valueNow: number | string;\n  /** Filled partition color. Defaults to 'primary' */\n  color?: ColorType;\n  /** Filled partition color tone. Defaults to 'medium' */\n  colorTone?: ColorGradationType;\n  /** Animation */\n  animate: boolean;\n  /** Parameters animation  */\n  animationParameters?: { direction: 'left' | 'right'; duration: number };\n}\n\nconst ProgressBar: React.FC<ProgressBarProps> = ({\n  segments: _segments = 1,\n  valueMin = 0,\n  valueNow: _valueNow,\n  valueMax = 100,\n  color = 'primary',\n  colorTone = 'medium',\n  animate,\n  animationParameters,\n  ...rest\n}) => {\n  const theme = useTheme() as ThemeProp;\n  const animationValue = React.useRef(new Animated.Value(0)).current;\n\n  const valueNow =\n    typeof _valueNow === 'string'\n      ? extractNumbersFromString(_valueNow)\n      : _valueNow;\n\n  const totalProgress = ((valueNow - valueMin) / (valueMax - valueMin)) * 100;\n  const segments = Math.max(1, _segments);\n  const segmentWidth = 100 / Math.max(segments);\n\n  const items = [...Array(segments).keys()];\n\n  const segmentsRender = items.map(index => {\n    const max = segmentWidth * (index + 1);\n    const min = segmentWidth * index;\n    const minmax = (totalProgress - min) / (max - min);\n    const width = (minmax > 1 ? 1 : minmax < 0 ? 0 : minmax) * 100;\n\n    let progressPercent: string | Animated.AnimatedInterpolation = `${width}%`;\n\n    if (animate && animationParameters) {\n      Animated.timing(animationValue, {\n        toValue: 1,\n        duration: animationParameters.duration / items.length,\n        useNativeDriver: false,\n        delay:\n          animationParameters.direction === 'right'\n            ? index * (animationParameters.duration / items.length)\n            : (items.length - index - 1) *\n              (animationParameters.duration / items.length),\n      }).start();\n\n      const rangeAnimation =\n        animationParameters?.direction === 'right'\n          ? [`${valueMin < 0 ? 0 : valueMin}%`, `${width}%`]\n          : [`${valueMax}%`, `${width}%`];\n\n      progressPercent = animationValue.interpolate?.({\n        inputRange: [0, 1],\n        outputRange: rangeAnimation,\n      });\n    }\n\n    return (\n      <Segment\n        key={index}\n        style={{\n          borderRightWidth: index == segments - 1 ? 0 : 2,\n        }}\n      >\n        <Progress\n          style={{\n            width: progressPercent,\n            backgroundColor: theme.color[color][colorTone],\n            borderRightWidth: width > 0 && width < 100 ? 2 : 0,\n          }}\n        />\n      </Segment>\n    );\n  });\n\n  return <Container {...rest}>{segmentsRender}</Container>;\n};\n\nexport default ProgressBar;\n"],"names":["_a"],"mappings":"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"}

package/esm/components/atoms/ProgressBar/styled.js

@@ -1,26 +1,32 @@
-var _templateObject, _templateObject2, _templateObject3;
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 import styled from '@emotion/native';
 import { Animated } from 'react-native';
-import { RFValueStr } from '../../../utils';
-export var Container = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  height: ", ";\n  border-radius: ", ";\n  width: 100%;\n  flex-direction: row;\n  overflow: hidden;\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.spacing.mili;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.spacing.mili;
-});
-export var Segment = styled.View(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1;\n  background-color: ", ";\n  border-right-width: ", ";\n  border-color: ", ";\n"])), function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.color.secondary.light;
-}, RFValueStr('2px'), function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.color.secondary.xlight;
-});
-export var Progress = styled(Animated.View)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 100%;\n  border-color: ", ";\n"])), function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.color.secondary.xlight;
-});
-//# sourceMappingURL=styled.js.map
+import 'react';
+import '../Text/styled.js';
+import '../Input/styled.js';
+import 'currency.js';
+import '../Input/InputElement/InputElement.js';
+import '../Input/InputMaskElement/InputMaskElement.js';
+import '../Input/PressableInputContainer/styled.js';
+import { RFValueStr } from '../../../utils/ResponsiveFontSize.js';
+
+const Container = styled.View`
+  display: flex;
+  height: ${({ theme }) => theme.spacing.mili};
+  border-radius: ${({ theme }) => theme.spacing.mili};
+  width: 100%;
+  flex-direction: row;
+  overflow: hidden;
+`;
+const Segment = styled.View`
+  flex: 1;
+  background-color: ${({ theme }) => theme.color.secondary.light};
+  border-right-width: ${RFValueStr("2px")};
+  border-color: ${({ theme }) => theme.color.secondary.xlight};
+`;
+const Progress = styled(Animated.View)`
+  height: 100%;
+  border-color: ${({ theme }) => theme.color.secondary.xlight};
+`;
+
+export { Container, Progress, Segment };
+//# sourceMappingURL=styled.js.map

package/esm/components/atoms/ProgressBar/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["styled","Animated","RFValueStr","Container","View","theme","spacing","mili","Segment","color","secondary","light","xlight","Progress"],"sources":["../../../../src/components/atoms/ProgressBar/styled.ts"],"sourcesContent":["import styled from '@emotion/native';\nimport { Animated } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { RFValueStr } from '../../../utils';\n\nexport const Container = styled.View<Partial<StyleProps>>`\n  display: flex;\n  height: ${({ theme }) => theme.spacing.mili};\n  border-radius: ${({ theme }) => theme.spacing.mili};\n  width: 100%;\n  flex-direction: row;\n  overflow: hidden;\n`;\n\nexport const Segment = styled.View<Partial<StyleProps>>`\n  flex: 1;\n  background-color: ${({ theme }) => theme.color.secondary.light};\n  border-right-width: ${RFValueStr('2px')};\n  border-color: ${({ theme }) => theme.color.secondary.xlight};\n`;\n\nexport const Progress = styled(Animated.View)<Partial<StyleProps>>`\n  height: 100%;\n  border-color: ${({ theme }) => theme.color.secondary.xlight};\n`;\n"],"mappings":";;;;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,SAASC,QAAT,QAAyB,cAAzB;AAEA,SAASC,UAAT,QAA2B,gBAA3B;AAEA,OAAO,IAAMC,SAAS,GAAGH,MAAM,CAACI,IAAV,gMAEV;EAAA,IAAGC,KAAH,QAAGA,KAAH;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcC,IAA7B;AAAA,CAFU,EAGH;EAAA,IAAGF,KAAH,SAAGA,KAAH;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcC,IAA7B;AAAA,CAHG,CAAf;AASP,OAAO,IAAMC,OAAO,GAAGR,MAAM,CAACI,IAAV,qKAEE;EAAA,IAAGC,KAAH,SAAGA,KAAH;EAAA,OAAeA,KAAK,CAACI,KAAN,CAAYC,SAAZ,CAAsBC,KAArC;AAAA,CAFF,EAGIT,UAAU,CAAC,KAAD,CAHd,EAIF;EAAA,IAAGG,KAAH,SAAGA,KAAH;EAAA,OAAeA,KAAK,CAACI,KAAN,CAAYC,SAAZ,CAAsBE,MAArC;AAAA,CAJE,CAAb;AAOP,OAAO,IAAMC,QAAQ,GAAGb,MAAM,CAACC,QAAQ,CAACG,IAAV,CAAT,kHAEH;EAAA,IAAGC,KAAH,SAAGA,KAAH;EAAA,OAAeA,KAAK,CAACI,KAAN,CAAYC,SAAZ,CAAsBE,MAArC;AAAA,CAFG,CAAd"}
+{"version":3,"file":"styled.js","sources":["../../../../src/components/atoms/ProgressBar/styled.ts"],"sourcesContent":["import styled from '@emotion/native';\nimport { Animated } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { RFValueStr } from '../../../utils';\n\nexport const Container = styled.View<Partial<StyleProps>>`\n  display: flex;\n  height: ${({ theme }) => theme.spacing.mili};\n  border-radius: ${({ theme }) => theme.spacing.mili};\n  width: 100%;\n  flex-direction: row;\n  overflow: hidden;\n`;\n\nexport const Segment = styled.View<Partial<StyleProps>>`\n  flex: 1;\n  background-color: ${({ theme }) => theme.color.secondary.light};\n  border-right-width: ${RFValueStr('2px')};\n  border-color: ${({ theme }) => theme.color.secondary.xlight};\n`;\n\nexport const Progress = styled(Animated.View)<Partial<StyleProps>>`\n  height: 100%;\n  border-color: ${({ theme }) => theme.color.secondary.xlight};\n`;\n"],"names":[],"mappings":";;;;;;;;;;;AAKO,MAAM,YAAY,MAAO,CAAA,IAAA,CAAA;AAAA;AAAA,UAAA,EAEpB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,iBAAA,EACtB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMzC,MAAM,UAAU,MAAO,CAAA,IAAA,CAAA;AAAA;AAAA,oBAAA,EAER,CAAC,EAAE,KAAA,EAAY,KAAA,KAAA,CAAM,MAAM,SAAU,CAAA,KAAA,CAAA;AAAA,sBAAA,EACnC,WAAW,KAAK,CAAA,CAAA;AAAA,gBAAA,EACtB,CAAC,EAAE,KAAA,EAAY,KAAA,KAAA,CAAM,MAAM,SAAU,CAAA,MAAA,CAAA;AAAA,EAAA;AAG1C,MAAA,QAAA,GAAW,MAAO,CAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AAAA;AAAA,gBAAA,EAE1B,CAAC,EAAE,KAAA,EAAY,KAAA,KAAA,CAAM,MAAM,SAAU,CAAA,MAAA,CAAA;AAAA;;;;"}

package/esm/components/atoms/RadioButton/RadioButton.js

@@ -1,51 +1,77 @@
-var _excluded = ["children", "onChange", "checked", "labelPosition", "disabled", "color", "colorTone"];
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-import React from 'react';
+import React__default from 'react';
 import { Pressable } from 'react-native';
-import { Icon } from '../Icon';
-import { IconViewStyled, IconWrapper, ScaledView, ViewStyled } from './styled';
+import Icon from '../Icon/Icon.js';
+import { ViewStyled, IconViewStyled, IconWrapper, ScaledView } from './styled.js';
 
-var RadioButton = function RadioButton(_ref) {
-  var children = _ref.children,
-      onChange = _ref.onChange,
-      checked = _ref.checked,
-      _ref$labelPosition = _ref.labelPosition,
-      labelPosition = _ref$labelPosition === void 0 ? 'right' : _ref$labelPosition,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'primary' : _ref$color,
-      _ref$colorTone = _ref.colorTone,
-      colorTone = _ref$colorTone === void 0 ? 'medium' : _ref$colorTone,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var handleChange = function handleChange() {
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const RadioButton = (_a) => {
+  var _b = _a, {
+    children,
+    onChange,
+    checked,
+    labelPosition = "right",
+    disabled = false,
+    color = "primary",
+    colorTone = "medium"
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "onChange",
+    "checked",
+    "labelPosition",
+    "disabled",
+    "color",
+    "colorTone"
+  ]);
+  const handleChange = () => {
     onChange && onChange(!checked);
   };
-
-  return React.createElement(Pressable, _extends({}, rest, {
-    disabled: disabled,
+  return /* @__PURE__ */ React__default.createElement(Pressable, __spreadProps(__spreadValues({}, rest), {
+    disabled,
     onPress: handleChange,
     accessibilityRole: "radio"
-  }), React.createElement(ViewStyled, null, labelPosition === 'left' && children, checked && React.createElement(IconViewStyled, null, React.createElement(IconWrapper, null, React.createElement(ScaledView, null, React.createElement(Icon, {
+  }), /* @__PURE__ */ React__default.createElement(ViewStyled, null, labelPosition === "left" && children, checked && /* @__PURE__ */ React__default.createElement(IconViewStyled, null, /* @__PURE__ */ React__default.createElement(IconWrapper, null, /* @__PURE__ */ React__default.createElement(ScaledView, null, /* @__PURE__ */ React__default.createElement(Icon, {
     name: "circle",
     colorVariant: color,
-    colorTone: colorTone,
+    colorTone,
     type: "material-community",
     size: "centi"
-  })))), !checked && React.createElement(IconViewStyled, null, React.createElement(IconWrapper, null, React.createElement(ScaledView, null, React.createElement(Icon, {
+  })))), !checked && /* @__PURE__ */ React__default.createElement(IconViewStyled, null, /* @__PURE__ */ React__default.createElement(IconWrapper, null, /* @__PURE__ */ React__default.createElement(ScaledView, null, /* @__PURE__ */ React__default.createElement(Icon, {
     name: "circle",
     fontColor: "light",
     type: "material-community",
     size: "centi"
-  })))), labelPosition === 'right' && children));
+  })))), labelPosition === "right" && children));
 };
 
-export default RadioButton;
-//# sourceMappingURL=RadioButton.js.map
+export { RadioButton as default };
+//# sourceMappingURL=RadioButton.js.map

package/esm/components/atoms/RadioButton/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","names":["React","Pressable","Icon","IconViewStyled","IconWrapper","ScaledView","ViewStyled","RadioButton","children","onChange","checked","labelPosition","disabled","color","colorTone","rest","handleChange"],"sources":["../../../../src/components/atoms/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Pressable, StyleProp, ViewStyle } from 'react-native';\nimport { ColorGradationType, ColorType } from '../../../types/defaults';\nimport { Icon } from '../Icon';\nimport { IconViewStyled, IconWrapper, ScaledView, ViewStyled } from './styled';\n\nexport interface RadioButtonProps {\n  /** Element is checked */\n  checked?: boolean;\n  /** Change handler */\n  onChange?: (checked: boolean) => void;\n  /** Position of children */\n  labelPosition?: 'left' | 'right';\n  /** Element is not clickable */\n  disabled?: boolean;\n  /** Color definition from theme */\n  color?: ColorType;\n  /** Color gradation from theme */\n  colorTone?: ColorGradationType;\n  style?: StyleProp<ViewStyle>;\n}\n\nconst RadioButton: FC<RadioButtonProps> = ({\n  children,\n  onChange,\n  checked,\n  labelPosition = 'right',\n  disabled = false,\n  color = 'primary',\n  colorTone = 'medium',\n  ...rest\n}): JSX.Element => {\n  const handleChange = () => {\n    onChange && onChange(!checked);\n  };\n\n  return (\n    <Pressable\n      {...rest}\n      disabled={disabled}\n      onPress={handleChange}\n      accessibilityRole=\"radio\"\n    >\n      <ViewStyled>\n        {labelPosition === 'left' && children}\n        {checked && (\n          <IconViewStyled>\n            <IconWrapper>\n              <ScaledView>\n                <Icon\n                  name=\"circle\"\n                  colorVariant={color}\n                  colorTone={colorTone}\n                  type=\"material-community\"\n                  size=\"centi\"\n                />\n              </ScaledView>\n            </IconWrapper>\n          </IconViewStyled>\n        )}\n        {!checked && (\n          <IconViewStyled>\n            <IconWrapper>\n              <ScaledView>\n                <Icon\n                  name=\"circle\"\n                  fontColor=\"light\"\n                  type=\"material-community\"\n                  size=\"centi\"\n                />\n              </ScaledView>\n            </IconWrapper>\n          </IconViewStyled>\n        )}\n        {labelPosition === 'right' && children}\n      </ViewStyled>\n    </Pressable>\n  );\n};\n\nexport default RadioButton;\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAP,MAA0B,OAA1B;AACA,SAASC,SAAT,QAAgD,cAAhD;AAEA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,cAAT,EAAyBC,WAAzB,EAAsCC,UAAtC,EAAkDC,UAAlD,QAAoE,UAApE;;AAkBA,IAAMC,WAAiC,GAAG,SAApCA,WAAoC,OASvB;EAAA,IARjBC,QAQiB,QARjBA,QAQiB;EAAA,IAPjBC,QAOiB,QAPjBA,QAOiB;EAAA,IANjBC,OAMiB,QANjBA,OAMiB;EAAA,8BALjBC,aAKiB;EAAA,IALjBA,aAKiB,mCALD,OAKC;EAAA,yBAJjBC,QAIiB;EAAA,IAJjBA,QAIiB,8BAJN,KAIM;EAAA,sBAHjBC,KAGiB;EAAA,IAHjBA,KAGiB,2BAHT,SAGS;EAAA,0BAFjBC,SAEiB;EAAA,IAFjBA,SAEiB,+BAFL,QAEK;EAAA,IADdC,IACc;;EACjB,IAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;IACzBP,QAAQ,IAAIA,QAAQ,CAAC,CAACC,OAAF,CAApB;EACD,CAFD;;EAIA,OACE,oBAAC,SAAD,eACMK,IADN;IAEE,QAAQ,EAAEH,QAFZ;IAGE,OAAO,EAAEI,YAHX;IAIE,iBAAiB,EAAC;EAJpB,IAME,oBAAC,UAAD,QACGL,aAAa,KAAK,MAAlB,IAA4BH,QAD/B,EAEGE,OAAO,IACN,oBAAC,cAAD,QACE,oBAAC,WAAD,QACE,oBAAC,UAAD,QACE,oBAAC,IAAD;IACE,IAAI,EAAC,QADP;IAEE,YAAY,EAAEG,KAFhB;IAGE,SAAS,EAAEC,SAHb;IAIE,IAAI,EAAC,oBAJP;IAKE,IAAI,EAAC;EALP,EADF,CADF,CADF,CAHJ,EAiBG,CAACJ,OAAD,IACC,oBAAC,cAAD,QACE,oBAAC,WAAD,QACE,oBAAC,UAAD,QACE,oBAAC,IAAD;IACE,IAAI,EAAC,QADP;IAEE,SAAS,EAAC,OAFZ;IAGE,IAAI,EAAC,oBAHP;IAIE,IAAI,EAAC;EAJP,EADF,CADF,CADF,CAlBJ,EA+BGC,aAAa,KAAK,OAAlB,IAA6BH,QA/BhC,CANF,CADF;AA0CD,CAxDD;;AA0DA,eAAeD,WAAf"}
+{"version":3,"file":"RadioButton.js","sources":["../../../../src/components/atoms/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Pressable, StyleProp, ViewStyle } from 'react-native';\nimport { ColorGradationType, ColorType } from '../../../types/defaults';\nimport { Icon } from '../Icon';\nimport { IconViewStyled, IconWrapper, ScaledView, ViewStyled } from './styled';\n\nexport interface RadioButtonProps {\n  /** Element is checked */\n  checked?: boolean;\n  /** Change handler */\n  onChange?: (checked: boolean) => void;\n  /** Position of children */\n  labelPosition?: 'left' | 'right';\n  /** Element is not clickable */\n  disabled?: boolean;\n  /** Color definition from theme */\n  color?: ColorType;\n  /** Color gradation from theme */\n  colorTone?: ColorGradationType;\n  style?: StyleProp<ViewStyle>;\n}\n\nconst RadioButton: FC<RadioButtonProps> = ({\n  children,\n  onChange,\n  checked,\n  labelPosition = 'right',\n  disabled = false,\n  color = 'primary',\n  colorTone = 'medium',\n  ...rest\n}): JSX.Element => {\n  const handleChange = () => {\n    onChange && onChange(!checked);\n  };\n\n  return (\n    <Pressable\n      {...rest}\n      disabled={disabled}\n      onPress={handleChange}\n      accessibilityRole=\"radio\"\n    >\n      <ViewStyled>\n        {labelPosition === 'left' && children}\n        {checked && (\n          <IconViewStyled>\n            <IconWrapper>\n              <ScaledView>\n                <Icon\n                  name=\"circle\"\n                  colorVariant={color}\n                  colorTone={colorTone}\n                  type=\"material-community\"\n                  size=\"centi\"\n                />\n              </ScaledView>\n            </IconWrapper>\n          </IconViewStyled>\n        )}\n        {!checked && (\n          <IconViewStyled>\n            <IconWrapper>\n              <ScaledView>\n                <Icon\n                  name=\"circle\"\n                  fontColor=\"light\"\n                  type=\"material-community\"\n                  size=\"centi\"\n                />\n              </ScaledView>\n            </IconWrapper>\n          </IconViewStyled>\n        )}\n        {labelPosition === 'right' && children}\n      </ViewStyled>\n    </Pressable>\n  );\n};\n\nexport default RadioButton;\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBM,MAAA,WAAA,GAAoC,CAAC,EASxB,KAAA;AATwB,EACzC,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,aAAgB,GAAA,OAAA;AAAA,IAChB,QAAW,GAAA,KAAA;AAAA,IACX,KAAQ,GAAA,SAAA;AAAA,IACR,SAAY,GAAA,QAAA;AAAA,GA7Bd,GAsB2C,EAQtC,EAAA,IAAA,GAAA,SAAA,CARsC,EAQtC,EAAA;AAAA,IAPH,UAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,WAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAY,QAAA,IAAA,QAAA,CAAS,CAAC,OAAO,CAAA,CAAA;AAAA,GAC/B,CAAA;AAEA,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,4CACK,IADL,CAAA,EAAA;AAAA,IAEC,QAAA;AAAA,IACA,OAAS,EAAA,YAAA;AAAA,IACT,iBAAkB,EAAA,OAAA;AAAA,GAAA,CAAA,kBAEjBA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,IAAA,EACE,aAAkB,KAAA,MAAA,IAAU,QAC5B,EAAA,OAAA,oBACEA,cAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,kBACEA,cAAA,CAAA,aAAA,CAAA,WAAA,EAAA,IAAA,kBACEA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,IAAA,kBACEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IACC,IAAK,EAAA,QAAA;AAAA,IACL,YAAc,EAAA,KAAA;AAAA,IACd,SAAA;AAAA,IACA,IAAK,EAAA,oBAAA;AAAA,IACL,IAAK,EAAA,OAAA;AAAA,GACP,CACF,CACF,CACF,CAAA,EAED,CAAC,OAAA,oBACCA,cAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,kBACEA,cAAA,CAAA,aAAA,CAAA,WAAA,EAAA,IAAA,kBACEA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,IAAA,kBACEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IACC,IAAK,EAAA,QAAA;AAAA,IACL,SAAU,EAAA,OAAA;AAAA,IACV,IAAK,EAAA,oBAAA;AAAA,IACL,IAAK,EAAA,OAAA;AAAA,GACP,CACF,CACF,CACF,GAED,aAAkB,KAAA,OAAA,IAAW,QAChC,CACF,CAAA,CAAA;AAEJ;;;;"}

package/esm/components/atoms/RadioButton/styled.js

@@ -1,30 +1,26 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 import styled from '@emotion/native';
 import { View } from 'react-native';
-export var IconWrapper = styled(View)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  border-color: ", ";\n  border-width: ", ";\n  background-color: ", ";\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.borderRadius.pill;
-}, function (_ref2) {
-  var theme = _ref2.theme,
-      _ref2$color = _ref2.color,
-      color = _ref2$color === void 0 ? 'primary' : _ref2$color,
-      _ref2$colorTone = _ref2.colorTone,
-      colorTone = _ref2$colorTone === void 0 ? 'medium' : _ref2$colorTone;
-  return theme.color[color][colorTone];
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.borderWidth.nano;
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.miscellaneous.surfaceColor;
-});
-export var ScaledView = styled(View)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  transform: scale(0.8);\n"])));
-export var IconViewStyled = styled(View)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: ", ";\n"])), function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.spacing.mili;
-});
-export var ViewStyled = styled(View)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  align-items: center;\n  flex-direction: row;\n"])));
-//# sourceMappingURL=styled.js.map
+
+const IconWrapper = styled(View)`
+  border-radius: ${({ theme }) => theme.borderRadius.pill};
+  border-color: ${({
+  theme,
+  color = "primary",
+  colorTone = "medium"
+}) => theme.color[color][colorTone]};
+  border-width: ${({ theme }) => theme.borderWidth.nano};
+  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
+`;
+const ScaledView = styled(View)`
+  transform: scale(0.8);
+`;
+const IconViewStyled = styled(View)`
+  padding: ${({ theme }) => theme.spacing.mili};
+`;
+const ViewStyled = styled(View)`
+  align-items: center;
+  flex-direction: row;
+`;
+
+export { IconViewStyled, IconWrapper, ScaledView, ViewStyled };
+//# sourceMappingURL=styled.js.map

package/esm/components/atoms/RadioButton/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["styled","View","IconWrapper","theme","borderRadius","pill","color","colorTone","borderWidth","nano","miscellaneous","surfaceColor","ScaledView","IconViewStyled","spacing","mili","ViewStyled"],"sources":["../../../../src/components/atoms/RadioButton/styled.ts"],"sourcesContent":["import styled from '@emotion/native';\nimport { View } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { RadioButtonProps } from './RadioButton';\n\nexport const IconWrapper = styled(View)<Partial<RadioButtonProps & StyleProps>>`\n  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.pill};\n  border-color: ${({\n    theme,\n    color = 'primary',\n    colorTone = 'medium',\n  }: StyleProps & RadioButtonProps) => theme.color[color][colorTone]};\n  border-width: ${({ theme }: StyleProps) => theme.borderWidth.nano};\n  background-color: ${({ theme }: StyleProps) =>\n    theme.miscellaneous.surfaceColor};\n`;\n\nexport const ScaledView = styled(View)`\n  transform: scale(0.8);\n`;\n\nexport const IconViewStyled = styled(View)<Partial<StyleProps>>`\n  padding: ${({ theme }: StyleProps) => theme.spacing.mili};\n`;\n\nexport const ViewStyled = styled(View)`\n  align-items: center;\n  flex-direction: row;\n`;\n"],"mappings":";;;;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,SAASC,IAAT,QAAqB,cAArB;AAIA,OAAO,IAAMC,WAAW,GAAGF,MAAM,CAACC,IAAD,CAAT,yKACL;EAAA,IAAGE,KAAH,QAAGA,KAAH;EAAA,OAA2BA,KAAK,CAACC,YAAN,CAAmBC,IAA9C;AAAA,CADK,EAEN;EAAA,IACdF,KADc,SACdA,KADc;EAAA,wBAEdG,KAFc;EAAA,IAEdA,KAFc,4BAEN,SAFM;EAAA,4BAGdC,SAHc;EAAA,IAGdA,SAHc,gCAGF,QAHE;EAAA,OAIqBJ,KAAK,CAACG,KAAN,CAAYA,KAAZ,EAAmBC,SAAnB,CAJrB;AAAA,CAFM,EAON;EAAA,IAAGJ,KAAH,SAAGA,KAAH;EAAA,OAA2BA,KAAK,CAACK,WAAN,CAAkBC,IAA7C;AAAA,CAPM,EAQF;EAAA,IAAGN,KAAH,SAAGA,KAAH;EAAA,OAClBA,KAAK,CAACO,aAAN,CAAoBC,YADF;AAAA,CARE,CAAjB;AAYP,OAAO,IAAMC,UAAU,GAAGZ,MAAM,CAACC,IAAD,CAAT,mGAAhB;AAIP,OAAO,IAAMY,cAAc,GAAGb,MAAM,CAACC,IAAD,CAAT,4FACd;EAAA,IAAGE,KAAH,SAAGA,KAAH;EAAA,OAA2BA,KAAK,CAACW,OAAN,CAAcC,IAAzC;AAAA,CADc,CAApB;AAIP,OAAO,IAAMC,UAAU,GAAGhB,MAAM,CAACC,IAAD,CAAT,yHAAhB"}
+{"version":3,"file":"styled.js","sources":["../../../../src/components/atoms/RadioButton/styled.ts"],"sourcesContent":["import styled from '@emotion/native';\nimport { View } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { RadioButtonProps } from './RadioButton';\n\nexport const IconWrapper = styled(View)<Partial<RadioButtonProps & StyleProps>>`\n  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.pill};\n  border-color: ${({\n    theme,\n    color = 'primary',\n    colorTone = 'medium',\n  }: StyleProps & RadioButtonProps) => theme.color[color][colorTone]};\n  border-width: ${({ theme }: StyleProps) => theme.borderWidth.nano};\n  background-color: ${({ theme }: StyleProps) =>\n    theme.miscellaneous.surfaceColor};\n`;\n\nexport const ScaledView = styled(View)`\n  transform: scale(0.8);\n`;\n\nexport const IconViewStyled = styled(View)<Partial<StyleProps>>`\n  padding: ${({ theme }: StyleProps) => theme.spacing.mili};\n`;\n\nexport const ViewStyled = styled(View)`\n  align-items: center;\n  flex-direction: row;\n`;\n"],"names":[],"mappings":";;;AAKa,MAAA,WAAA,GAAc,OAAO,IAAI,CAAA,CAAA;AAAA,iBAAA,EACnB,CAAC,EAAE,KAAM,EAAA,KAAkB,MAAM,YAAa,CAAA,IAAA,CAAA;AAAA,gBAAA,EAC/C,CAAC;AAAA,EACf,KAAA;AAAA,EACA,KAAQ,GAAA,SAAA;AAAA,EACR,SAAY,GAAA,QAAA;AACd,CAAqC,KAAA,KAAA,CAAM,MAAM,KAAO,CAAA,CAAA,SAAA,CAAA,CAAA;AAAA,gBAAA,EACxC,CAAC,EAAE,KAAM,EAAA,KAAkB,MAAM,WAAY,CAAA,IAAA,CAAA;AAAA,oBAAA,EACzC,CAAC,EAAE,KAAM,EAAA,KAC3B,MAAM,aAAc,CAAA,YAAA,CAAA;AAAA,EAAA;AAGX,MAAA,UAAA,GAAa,OAAO,IAAI,CAAA,CAAA;AAAA;AAAA,EAAA;AAIxB,MAAA,cAAA,GAAiB,OAAO,IAAI,CAAA,CAAA;AAAA,WAAA,EAC5B,CAAC,EAAE,KAAM,EAAA,KAAkB,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA;AAGzC,MAAA,UAAA,GAAa,OAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA;;;;"}

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

@@ -1,87 +1,113 @@
-var _excluded = ["onChange", "activeColor", "activeColorTone", "inactiveColor", "inactiveColorTone", "active", "dotStyle", "disabled"];
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 import { useTheme } from '@emotion/react';
-import React, { useCallback, useEffect } from 'react';
+import React__default, { useEffect, useCallback } from 'react';
 import { Animated } from 'react-native';
-import { extractNumbersFromString, lightenDarkenColor, RFValueStr } from '../../../utils';
-import { PressableSurface } from '../PressableSurface';
-import { transitionSwitch } from './animation';
-import { StyledSwitch, StyledSwitchContent, SWITCH_PIN_WIDTH } from './styled';
+import { extractNumbersFromString } from '../../../utils/extractNumbersFromString.js';
+import '../Text/styled.js';
+import '../Input/styled.js';
+import 'currency.js';
+import '../Input/InputElement/InputElement.js';
+import '../Input/InputMaskElement/InputMaskElement.js';
+import '../Input/PressableInputContainer/styled.js';
+import { lightenDarkenColor } from '../../../utils/lightenDarkenColor.js';
+import { RFValueStr } from '../../../utils/ResponsiveFontSize.js';
+import PressableSurface from '../PressableSurface/PressableSurface.js';
+import { transitionSwitch } from './animation.js';
+import { StyledSwitchContent, StyledSwitch, SWITCH_PIN_WIDTH } from './styled.js';
 
-var Switch = function Switch(_ref) {
-  var onChange = _ref.onChange,
-      _ref$activeColor = _ref.activeColor,
-      activeColor = _ref$activeColor === void 0 ? 'primary' : _ref$activeColor,
-      _ref$activeColorTone = _ref.activeColorTone,
-      activeColorTone = _ref$activeColorTone === void 0 ? 'medium' : _ref$activeColorTone,
-      _ref$inactiveColor = _ref.inactiveColor,
-      inactiveColor = _ref$inactiveColor === void 0 ? 'secondary' : _ref$inactiveColor,
-      _ref$inactiveColorTon = _ref.inactiveColorTone,
-      inactiveColorTone = _ref$inactiveColorTon === void 0 ? 'light' : _ref$inactiveColorTon,
-      active = _ref.active,
-      dotStyle = _ref.dotStyle,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var theme = useTheme();
-  var width = React.useRef(0);
-  var transitionValue = React.useRef(new Animated.Value(0)).current;
-  var animatedColor = React.useRef(new Animated.Value(0)).current;
-
-  var calculateTranslate = function calculateTranslate() {
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const Switch = (_a) => {
+  var _b = _a, {
+    onChange,
+    activeColor = "primary",
+    activeColorTone = "medium",
+    inactiveColor = "secondary",
+    inactiveColorTone = "light",
+    active,
+    dotStyle,
+    disabled = false
+  } = _b, rest = __objRest(_b, [
+    "onChange",
+    "activeColor",
+    "activeColorTone",
+    "inactiveColor",
+    "inactiveColorTone",
+    "active",
+    "dotStyle",
+    "disabled"
+  ]);
+  const theme = useTheme();
+  const width = React__default.useRef(0);
+  const transitionValue = React__default.useRef(new Animated.Value(0)).current;
+  const animatedColor = React__default.useRef(new Animated.Value(0)).current;
+  const calculateTranslate = () => {
     if (width.current > 0) {
       return width.current - extractNumbersFromString(theme.spacing.micro) * 2 - extractNumbersFromString(RFValueStr(SWITCH_PIN_WIDTH));
     }
-
     return 0;
   };
-
-  var getBackgroundColor = function getBackgroundColor(color) {
+  const getBackgroundColor = (color) => {
     return disabled ? lightenDarkenColor(theme.color[inactiveColor][inactiveColorTone], 20) : color;
   };
-
-  var interpolateColor = animatedColor.interpolate({
+  const interpolateColor = animatedColor.interpolate({
     inputRange: [0, 1],
-    outputRange: [getBackgroundColor(theme.color[inactiveColor][inactiveColorTone]), getBackgroundColor(theme.color[activeColor][activeColorTone])]
+    outputRange: [
+      getBackgroundColor(theme.color[inactiveColor][inactiveColorTone]),
+      getBackgroundColor(theme.color[activeColor][activeColorTone])
+    ]
   });
-  useEffect(function () {
-    var translate = calculateTranslate();
+  useEffect(() => {
+    const translate = calculateTranslate();
     transitionSwitch(active, translate, transitionValue, animatedColor);
   }, [active]);
-  var handleChange = useCallback(function () {
+  const handleChange = useCallback(() => {
     onChange(!active);
   }, [active, onChange]);
-
-  var handleSwitchLayout = function handleSwitchLayout(lce) {
+  const handleSwitchLayout = (lce) => {
     width.current = lce.nativeEvent.layout.width;
-    var translate = calculateTranslate();
+    const translate = calculateTranslate();
     transitionSwitch(active, translate, transitionValue, animatedColor);
   };
-
-  return React.createElement(PressableSurface, _extends({}, rest, {
+  return /* @__PURE__ */ React__default.createElement(PressableSurface, __spreadProps(__spreadValues({}, rest), {
     onPress: handleChange,
     effect: "none",
-    disabled: disabled
-  }), React.createElement(StyledSwitchContent, {
+    disabled
+  }), /* @__PURE__ */ React__default.createElement(StyledSwitchContent, {
     onLayout: handleSwitchLayout,
-    style: {
-      backgroundColor: interpolateColor
-    }
-  }, React.createElement(StyledSwitch, {
-    style: [dotStyle, {
-      transform: [{
-        translateX: transitionValue
-      }]
-    }]
+    style: { backgroundColor: interpolateColor }
+  }, /* @__PURE__ */ React__default.createElement(StyledSwitch, {
+    style: [dotStyle, { transform: [{ translateX: transitionValue }] }]
   })));
 };
 
-export default Switch;
-//# sourceMappingURL=Switch.js.map
+export { Switch as default };
+//# sourceMappingURL=Switch.js.map

package/esm/components/atoms/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["useTheme","React","useCallback","useEffect","Animated","extractNumbersFromString","lightenDarkenColor","RFValueStr","PressableSurface","transitionSwitch","StyledSwitch","StyledSwitchContent","SWITCH_PIN_WIDTH","Switch","onChange","activeColor","activeColorTone","inactiveColor","inactiveColorTone","active","dotStyle","disabled","rest","theme","width","useRef","transitionValue","Value","current","animatedColor","calculateTranslate","spacing","micro","getBackgroundColor","color","interpolateColor","interpolate","inputRange","outputRange","translate","handleChange","handleSwitchLayout","lce","nativeEvent","layout","backgroundColor","transform","translateX"],"sources":["../../../../src/components/atoms/Switch/Switch.tsx"],"sourcesContent":["import { useTheme } from '@emotion/react';\nimport React, { FC, useCallback, useEffect } from 'react';\nimport {\n  Animated,\n  LayoutChangeEvent,\n  StyleProp,\n  ViewStyle,\n} from 'react-native';\nimport {\n  ColorGradationType,\n  ColorType,\n  ThemeProp,\n} from '@tecsinapse/react-core';\nimport {\n  extractNumbersFromString,\n  lightenDarkenColor,\n  RFValueStr,\n} from '../../../utils';\nimport { PressableSurface } from '../PressableSurface';\nimport { transitionSwitch } from './animation';\nimport { StyledSwitch, StyledSwitchContent, SWITCH_PIN_WIDTH } from './styled';\n\nexport interface SwitchProps {\n  onChange: (active: boolean) => void;\n  active: boolean;\n  activeColor?: ColorType;\n  activeColorTone?: ColorGradationType;\n  inactiveColor?: ColorType;\n  inactiveColorTone?: ColorGradationType;\n  style?: StyleProp<ViewStyle>;\n  dotStyle?: StyleProp<ViewStyle>;\n  disabled?: boolean;\n}\n\nconst Switch: FC<SwitchProps> = ({\n  onChange,\n  activeColor = 'primary',\n  activeColorTone = 'medium',\n  inactiveColor = 'secondary',\n  inactiveColorTone = 'light',\n  active,\n  dotStyle,\n  disabled = false,\n  ...rest\n}): JSX.Element => {\n  const theme = useTheme() as ThemeProp;\n\n  const width = React.useRef(0);\n  const transitionValue = React.useRef(new Animated.Value(0)).current;\n  const animatedColor = React.useRef(new Animated.Value(0)).current;\n\n  const calculateTranslate = () => {\n    if (width.current > 0) {\n      return (\n        width.current -\n        extractNumbersFromString(theme.spacing.micro) * 2 -\n        extractNumbersFromString(RFValueStr(SWITCH_PIN_WIDTH))\n      );\n    }\n    return 0;\n  };\n\n  const getBackgroundColor = (color: string) => {\n    return disabled\n      ? lightenDarkenColor(theme.color[inactiveColor][inactiveColorTone], 20)\n      : color;\n  };\n\n  const interpolateColor = animatedColor.interpolate({\n    inputRange: [0, 1],\n    outputRange: [\n      getBackgroundColor(theme.color[inactiveColor][inactiveColorTone]),\n      getBackgroundColor(theme.color[activeColor][activeColorTone]),\n    ],\n  });\n\n  useEffect(() => {\n    const translate = calculateTranslate();\n    transitionSwitch(active, translate, transitionValue, animatedColor);\n  }, [active]);\n\n  const handleChange = useCallback(() => {\n    onChange(!active);\n  }, [active, onChange]);\n\n  const handleSwitchLayout = (lce: LayoutChangeEvent) => {\n    width.current = lce.nativeEvent.layout.width;\n    const translate = calculateTranslate();\n    transitionSwitch(active, translate, transitionValue, animatedColor);\n  };\n\n  return (\n    <PressableSurface\n      {...rest}\n      onPress={handleChange}\n      effect=\"none\"\n      disabled={disabled}\n    >\n      <StyledSwitchContent\n        onLayout={handleSwitchLayout}\n        style={{ backgroundColor: interpolateColor }}\n      >\n        <StyledSwitch\n          style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}\n        />\n      </StyledSwitchContent>\n    </PressableSurface>\n  );\n};\n\nexport default Switch;\n"],"mappings":";;;;;;;;AAAA,SAASA,QAAT,QAAyB,gBAAzB;AACA,OAAOC,KAAP,IAAoBC,WAApB,EAAiCC,SAAjC,QAAkD,OAAlD;AACA,SACEC,QADF,QAKO,cALP;AAWA,SACEC,wBADF,EAEEC,kBAFF,EAGEC,UAHF,QAIO,gBAJP;AAKA,SAASC,gBAAT,QAAiC,qBAAjC;AACA,SAASC,gBAAT,QAAiC,aAAjC;AACA,SAASC,YAAT,EAAuBC,mBAAvB,EAA4CC,gBAA5C,QAAoE,UAApE;;AAcA,IAAMC,MAAuB,GAAG,SAA1BA,MAA0B,OAUb;EAAA,IATjBC,QASiB,QATjBA,QASiB;EAAA,4BARjBC,WAQiB;EAAA,IARjBA,WAQiB,iCARH,SAQG;EAAA,gCAPjBC,eAOiB;EAAA,IAPjBA,eAOiB,qCAPC,QAOD;EAAA,8BANjBC,aAMiB;EAAA,IANjBA,aAMiB,mCAND,WAMC;EAAA,iCALjBC,iBAKiB;EAAA,IALjBA,iBAKiB,sCALG,OAKH;EAAA,IAJjBC,MAIiB,QAJjBA,MAIiB;EAAA,IAHjBC,QAGiB,QAHjBA,QAGiB;EAAA,yBAFjBC,QAEiB;EAAA,IAFjBA,QAEiB,8BAFN,KAEM;EAAA,IADdC,IACc;;EACjB,IAAMC,KAAK,GAAGvB,QAAQ,EAAtB;EAEA,IAAMwB,KAAK,GAAGvB,KAAK,CAACwB,MAAN,CAAa,CAAb,CAAd;EACA,IAAMC,eAAe,GAAGzB,KAAK,CAACwB,MAAN,CAAa,IAAIrB,QAAQ,CAACuB,KAAb,CAAmB,CAAnB,CAAb,EAAoCC,OAA5D;EACA,IAAMC,aAAa,GAAG5B,KAAK,CAACwB,MAAN,CAAa,IAAIrB,QAAQ,CAACuB,KAAb,CAAmB,CAAnB,CAAb,EAAoCC,OAA1D;;EAEA,IAAME,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;IAC/B,IAAIN,KAAK,CAACI,OAAN,GAAgB,CAApB,EAAuB;MACrB,OACEJ,KAAK,CAACI,OAAN,GACAvB,wBAAwB,CAACkB,KAAK,CAACQ,OAAN,CAAcC,KAAf,CAAxB,GAAgD,CADhD,GAEA3B,wBAAwB,CAACE,UAAU,CAACK,gBAAD,CAAX,CAH1B;IAKD;;IACD,OAAO,CAAP;EACD,CATD;;EAWA,IAAMqB,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAmB;IAC5C,OAAOb,QAAQ,GACXf,kBAAkB,CAACiB,KAAK,CAACW,KAAN,CAAYjB,aAAZ,EAA2BC,iBAA3B,CAAD,EAAgD,EAAhD,CADP,GAEXgB,KAFJ;EAGD,CAJD;;EAMA,IAAMC,gBAAgB,GAAGN,aAAa,CAACO,WAAd,CAA0B;IACjDC,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CADqC;IAEjDC,WAAW,EAAE,CACXL,kBAAkB,CAACV,KAAK,CAACW,KAAN,CAAYjB,aAAZ,EAA2BC,iBAA3B,CAAD,CADP,EAEXe,kBAAkB,CAACV,KAAK,CAACW,KAAN,CAAYnB,WAAZ,EAAyBC,eAAzB,CAAD,CAFP;EAFoC,CAA1B,CAAzB;EAQAb,SAAS,CAAC,YAAM;IACd,IAAMoC,SAAS,GAAGT,kBAAkB,EAApC;IACArB,gBAAgB,CAACU,MAAD,EAASoB,SAAT,EAAoBb,eAApB,EAAqCG,aAArC,CAAhB;EACD,CAHQ,EAGN,CAACV,MAAD,CAHM,CAAT;EAKA,IAAMqB,YAAY,GAAGtC,WAAW,CAAC,YAAM;IACrCY,QAAQ,CAAC,CAACK,MAAF,CAAR;EACD,CAF+B,EAE7B,CAACA,MAAD,EAASL,QAAT,CAF6B,CAAhC;;EAIA,IAAM2B,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,GAAD,EAA4B;IACrDlB,KAAK,CAACI,OAAN,GAAgBc,GAAG,CAACC,WAAJ,CAAgBC,MAAhB,CAAuBpB,KAAvC;IACA,IAAMe,SAAS,GAAGT,kBAAkB,EAApC;IACArB,gBAAgB,CAACU,MAAD,EAASoB,SAAT,EAAoBb,eAApB,EAAqCG,aAArC,CAAhB;EACD,CAJD;;EAMA,OACE,oBAAC,gBAAD,eACMP,IADN;IAEE,OAAO,EAAEkB,YAFX;IAGE,MAAM,EAAC,MAHT;IAIE,QAAQ,EAAEnB;EAJZ,IAME,oBAAC,mBAAD;IACE,QAAQ,EAAEoB,kBADZ;IAEE,KAAK,EAAE;MAAEI,eAAe,EAAEV;IAAnB;EAFT,GAIE,oBAAC,YAAD;IACE,KAAK,EAAE,CAACf,QAAD,EAAW;MAAE0B,SAAS,EAAE,CAAC;QAAEC,UAAU,EAAErB;MAAd,CAAD;IAAb,CAAX;EADT,EAJF,CANF,CADF;AAiBD,CA1ED;;AA4EA,eAAeb,MAAf"}
+{"version":3,"file":"Switch.js","sources":["../../../../src/components/atoms/Switch/Switch.tsx"],"sourcesContent":["import { useTheme } from '@emotion/react';\nimport React, { FC, useCallback, useEffect } from 'react';\nimport {\n  Animated,\n  LayoutChangeEvent,\n  StyleProp,\n  ViewStyle,\n} from 'react-native';\nimport {\n  ColorGradationType,\n  ColorType,\n  ThemeProp,\n} from '@tecsinapse/react-core';\nimport {\n  extractNumbersFromString,\n  lightenDarkenColor,\n  RFValueStr,\n} from '../../../utils';\nimport { PressableSurface } from '../PressableSurface';\nimport { transitionSwitch } from './animation';\nimport { StyledSwitch, StyledSwitchContent, SWITCH_PIN_WIDTH } from './styled';\n\nexport interface SwitchProps {\n  onChange: (active: boolean) => void;\n  active: boolean;\n  activeColor?: ColorType;\n  activeColorTone?: ColorGradationType;\n  inactiveColor?: ColorType;\n  inactiveColorTone?: ColorGradationType;\n  style?: StyleProp<ViewStyle>;\n  dotStyle?: StyleProp<ViewStyle>;\n  disabled?: boolean;\n}\n\nconst Switch: FC<SwitchProps> = ({\n  onChange,\n  activeColor = 'primary',\n  activeColorTone = 'medium',\n  inactiveColor = 'secondary',\n  inactiveColorTone = 'light',\n  active,\n  dotStyle,\n  disabled = false,\n  ...rest\n}): JSX.Element => {\n  const theme = useTheme() as ThemeProp;\n\n  const width = React.useRef(0);\n  const transitionValue = React.useRef(new Animated.Value(0)).current;\n  const animatedColor = React.useRef(new Animated.Value(0)).current;\n\n  const calculateTranslate = () => {\n    if (width.current > 0) {\n      return (\n        width.current -\n        extractNumbersFromString(theme.spacing.micro) * 2 -\n        extractNumbersFromString(RFValueStr(SWITCH_PIN_WIDTH))\n      );\n    }\n    return 0;\n  };\n\n  const getBackgroundColor = (color: string) => {\n    return disabled\n      ? lightenDarkenColor(theme.color[inactiveColor][inactiveColorTone], 20)\n      : color;\n  };\n\n  const interpolateColor = animatedColor.interpolate({\n    inputRange: [0, 1],\n    outputRange: [\n      getBackgroundColor(theme.color[inactiveColor][inactiveColorTone]),\n      getBackgroundColor(theme.color[activeColor][activeColorTone]),\n    ],\n  });\n\n  useEffect(() => {\n    const translate = calculateTranslate();\n    transitionSwitch(active, translate, transitionValue, animatedColor);\n  }, [active]);\n\n  const handleChange = useCallback(() => {\n    onChange(!active);\n  }, [active, onChange]);\n\n  const handleSwitchLayout = (lce: LayoutChangeEvent) => {\n    width.current = lce.nativeEvent.layout.width;\n    const translate = calculateTranslate();\n    transitionSwitch(active, translate, transitionValue, animatedColor);\n  };\n\n  return (\n    <PressableSurface\n      {...rest}\n      onPress={handleChange}\n      effect=\"none\"\n      disabled={disabled}\n    >\n      <StyledSwitchContent\n        onLayout={handleSwitchLayout}\n        style={{ backgroundColor: interpolateColor }}\n      >\n        <StyledSwitch\n          style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}\n        />\n      </StyledSwitchContent>\n    </PressableSurface>\n  );\n};\n\nexport default Switch;\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCM,MAAA,MAAA,GAA0B,CAAC,EAUd,KAAA;AAVc,EAC/B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,WAAc,GAAA,SAAA;AAAA,IACd,eAAkB,GAAA,QAAA;AAAA,IAClB,aAAgB,GAAA,WAAA;AAAA,IAChB,iBAAoB,GAAA,OAAA;AAAA,IACpB,MAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,GA1Cb,GAkCiC,EAS5B,EAAA,IAAA,GAAA,SAAA,CAT4B,EAS5B,EAAA;AAAA,IARH,UAAA;AAAA,IACA,aAAA;AAAA,IACA,iBAAA;AAAA,IACA,eAAA;AAAA,IACA,mBAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,MAAM,QAAQ,QAAS,EAAA,CAAA;AAEvB,EAAM,MAAA,KAAA,GAAQA,cAAM,CAAA,MAAA,CAAO,CAAC,CAAA,CAAA;AAC5B,EAAM,MAAA,eAAA,GAAkBA,eAAM,MAAO,CAAA,IAAI,SAAS,KAAM,CAAA,CAAC,CAAC,CAAE,CAAA,OAAA,CAAA;AAC5D,EAAM,MAAA,aAAA,GAAgBA,eAAM,MAAO,CAAA,IAAI,SAAS,KAAM,CAAA,CAAC,CAAC,CAAE,CAAA,OAAA,CAAA;AAE1D,EAAA,MAAM,qBAAqB,MAAM;AAC/B,IAAI,IAAA,KAAA,CAAM,UAAU,CAAG,EAAA;AACrB,MACE,OAAA,KAAA,CAAM,OACN,GAAA,wBAAA,CAAyB,KAAM,CAAA,OAAA,CAAQ,KAAK,CAAA,GAAI,CAChD,GAAA,wBAAA,CAAyB,UAAW,CAAA,gBAAgB,CAAC,CAAA,CAAA;AAAA,KAEzD;AACA,IAAO,OAAA,CAAA,CAAA;AAAA,GACT,CAAA;AAEA,EAAM,MAAA,kBAAA,GAAqB,CAAC,KAAkB,KAAA;AAC5C,IAAA,OAAO,WACH,kBAAmB,CAAA,KAAA,CAAM,MAAM,aAAe,CAAA,CAAA,iBAAA,CAAA,EAAoB,EAAE,CACpE,GAAA,KAAA,CAAA;AAAA,GACN,CAAA;AAEA,EAAM,MAAA,gBAAA,GAAmB,cAAc,WAAY,CAAA;AAAA,IACjD,UAAA,EAAY,CAAC,CAAA,EAAG,CAAC,CAAA;AAAA,IACjB,WAAa,EAAA;AAAA,MACX,kBAAmB,CAAA,KAAA,CAAM,KAAM,CAAA,aAAA,CAAA,CAAe,iBAAkB,CAAA,CAAA;AAAA,MAChE,kBAAmB,CAAA,KAAA,CAAM,KAAM,CAAA,WAAA,CAAA,CAAa,eAAgB,CAAA,CAAA;AAAA,KAC9D;AAAA,GACD,CAAA,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,YAAY,kBAAmB,EAAA,CAAA;AACrC,IAAiB,gBAAA,CAAA,MAAA,EAAQ,SAAW,EAAA,eAAA,EAAiB,aAAa,CAAA,CAAA;AAAA,GACpE,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EAAM,MAAA,YAAA,GAAe,YAAY,MAAM;AACrC,IAAA,QAAA,CAAS,CAAC,MAAM,CAAA,CAAA;AAAA,GACf,EAAA,CAAC,MAAQ,EAAA,QAAQ,CAAC,CAAA,CAAA;AAErB,EAAM,MAAA,kBAAA,GAAqB,CAAC,GAA2B,KAAA;AACrD,IAAM,KAAA,CAAA,OAAA,GAAU,GAAI,CAAA,WAAA,CAAY,MAAO,CAAA,KAAA,CAAA;AACvC,IAAA,MAAM,YAAY,kBAAmB,EAAA,CAAA;AACrC,IAAiB,gBAAA,CAAA,MAAA,EAAQ,SAAW,EAAA,eAAA,EAAiB,aAAa,CAAA,CAAA;AAAA,GACpE,CAAA;AAEA,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,mDACK,IADL,CAAA,EAAA;AAAA,IAEC,OAAS,EAAA,YAAA;AAAA,IACT,MAAO,EAAA,MAAA;AAAA,IACP,QAAA;AAAA,GAAA,CAAA,kBAECA,cAAA,CAAA,aAAA,CAAA,mBAAA,EAAA;AAAA,IACC,QAAU,EAAA,kBAAA;AAAA,IACV,KAAA,EAAO,EAAE,eAAA,EAAiB,gBAAiB,EAAA;AAAA,GAAA,kBAE1CA,cAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AAAA,IACC,KAAA,EAAO,CAAC,QAAA,EAAU,EAAE,SAAA,EAAW,CAAC,EAAE,UAAY,EAAA,eAAA,EAAiB,CAAA,EAAG,CAAA;AAAA,GACpE,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}

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

@@ -1,8 +1,9 @@
 import { Animated, Easing } from 'react-native';
-var ANIMATION_SPEED = 140;
-export var transitionSwitch = function transitionSwitch(active, translate, transitionValue, animatedColor) {
-  if (translate <= 0) return;
 
+const ANIMATION_SPEED = 140;
+const transitionSwitch = (active, translate, transitionValue, animatedColor) => {
+  if (translate <= 0)
+    return;
   if (active) {
     Animated.timing(transitionValue, {
       toValue: translate,
@@ -17,7 +18,6 @@ export var transitionSwitch = function transitionSwitch(active, translate, trans
     }).start();
     return;
   }
-
   Animated.timing(transitionValue, {
     toValue: 0,
     duration: ANIMATION_SPEED,
@@ -30,4 +30,6 @@ export var transitionSwitch = function transitionSwitch(active, translate, trans
     useNativeDriver: false
   }).start();
 };
-//# sourceMappingURL=animation.js.map
+
+export { transitionSwitch };
+//# sourceMappingURL=animation.js.map