@tecsinapse/react-native-kit 1.12.13 → 1.13.0

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.13.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.12.16...@tecsinapse/react-native-kit@1.13.0) (2022-02-02)
+
+**Note:** Version bump only for package @tecsinapse/react-native-kit
+
+
+
+
+
+## [1.12.16](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.12.15...@tecsinapse/react-native-kit@1.12.16) (2022-01-28)
+
+**Note:** Version bump only for package @tecsinapse/react-native-kit
+
+
+
+
+
+## [1.12.15](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.12.14...@tecsinapse/react-native-kit@1.12.15) (2022-01-24)
+
+**Note:** Version bump only for package @tecsinapse/react-native-kit
+
+
+
+
+
+## [1.12.14](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.12.13...@tecsinapse/react-native-kit@1.12.14) (2022-01-19)
+
+**Note:** Version bump only for package @tecsinapse/react-native-kit
+
+
+
+
+
 ## [1.12.13](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.12.12...@tecsinapse/react-native-kit@1.12.13) (2022-01-18)
 
 **Note:** Version bump only for package @tecsinapse/react-native-kit

package/dist/components/atoms/Skeleton/Pulse.d.ts

@@ -0,0 +1,2 @@
+import { IAnimationComponent } from './types';
+export declare const Pulse: ({ active, width, height, childrenLayout, }: IAnimationComponent) => JSX.Element;

package/dist/components/atoms/Skeleton/Pulse.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Pulse = void 0;
+
+var _reactNative = require("react-native");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _animation = require("./animation");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Pulse = ({
+  active = true,
+  width,
+  height,
+  childrenLayout
+}) => {
+  const animatedValue = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  (0, _react.useEffect)(() => {
+    (0, _animation.pulseAnimation)(active, animatedValue);
+  }, [active]);
+  return _react.default.createElement(_reactNative.Animated.View, {
+    style: {
+      width: width ?? childrenLayout.width,
+      height: height ?? childrenLayout.height,
+      backgroundColor: 'rgba(0,0,0,0.05)',
+      position: 'absolute',
+      top: childrenLayout.x ?? 0,
+      left: childrenLayout.y ?? 0,
+      zIndex: 2,
+      overflow: 'hidden',
+      opacity: animatedValue
+    }
+  });
+};
+
+exports.Pulse = Pulse;
+//# sourceMappingURL=Pulse.js.map

package/dist/components/atoms/Skeleton/Pulse.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/Skeleton/Pulse.tsx"],"names":["Pulse","active","width","height","childrenLayout","animatedValue","Animated","Value","current","backgroundColor","position","top","x","left","y","zIndex","overflow","opacity"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAGO,MAAMA,KAAK,GAAG,CAAC;AACpBC,EAAAA,MAAM,GAAG,IADW;AAEpBC,EAAAA,KAFoB;AAGpBC,EAAAA,MAHoB;AAIpBC,EAAAA;AAJoB,CAAD,KAKM;AACzB,QAAMC,aAAa,GAAG,mBAAO,IAAIC,sBAASC,KAAb,CAAmB,CAAnB,CAAP,EAA8BC,OAApD;AAEA,wBAAU,MAAM;AACd,mCAAeP,MAAf,EAAuBI,aAAvB;AACD,GAFD,EAEG,CAACJ,MAAD,CAFH;AAIA,SACE,6BAAC,qBAAD,CAAU,IAAV;AACE,IAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAEA,KAAK,IAAIE,cAAc,CAACF,KAD1B;AAELC,MAAAA,MAAM,EAAEA,MAAM,IAAIC,cAAc,CAACD,MAF5B;AAGLM,MAAAA,eAAe,EAAE,kBAHZ;AAILC,MAAAA,QAAQ,EAAE,UAJL;AAKLC,MAAAA,GAAG,EAAEP,cAAc,CAACQ,CAAf,IAAoB,CALpB;AAMLC,MAAAA,IAAI,EAAET,cAAc,CAACU,CAAf,IAAoB,CANrB;AAOLC,MAAAA,MAAM,EAAE,CAPH;AAQLC,MAAAA,QAAQ,EAAE,QARL;AASLC,MAAAA,OAAO,EAAEZ;AATJ;AADT,IADF;AAeD,CA3BM","sourcesContent":["import { Animated } from 'react-native';\nimport React, { useEffect, useRef } from 'react';\nimport { pulseAnimation } from './animation';\nimport { IAnimationComponent } from './types';\n\nexport const Pulse = ({\n  active = true,\n  width,\n  height,\n  childrenLayout,\n}: IAnimationComponent) => {\n  const animatedValue = useRef(new Animated.Value(0)).current;\n\n  useEffect(() => {\n    pulseAnimation(active, animatedValue);\n  }, [active]);\n\n  return (\n    <Animated.View\n      style={{\n        width: width ?? childrenLayout.width,\n        height: height ?? childrenLayout.height,\n        backgroundColor: 'rgba(0,0,0,0.05)',\n        position: 'absolute',\n        top: childrenLayout.x ?? 0,\n        left: childrenLayout.y ?? 0,\n        zIndex: 2,\n        overflow: 'hidden',\n        opacity: animatedValue,\n      }}\n    />\n  );\n};\n"],"file":"Pulse.js"}

package/dist/components/atoms/Skeleton/Skeleton.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { BorderRadiusType } from '@tecsinapse/react-core';
+import { ViewProps } from 'react-native';
+export interface SkeletonProps extends ViewProps {
+    width?: number;
+    height?: number;
+    radius?: BorderRadiusType;
+    active?: boolean;
+    animation?: 'wave' | 'pulse';
+}
+declare const Skeleton: React.FC<SkeletonProps>;
+export default Skeleton;

package/dist/components/atoms/Skeleton/Skeleton.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _styled = require("./styled");
+
+var _Wave = require("./Wave");
+
+var _Pulse = require("./Pulse");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || 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); }
+
+const Skeleton = ({
+  children,
+  width,
+  height,
+  radius,
+  active = true,
+  animation = 'wave',
+  ...rest
+}) => {
+  const [childrenLayout, setChildrenLayout] = (0, _react.useState)({
+    width: 0,
+    height: 0,
+    y: 0,
+    x: 0
+  });
+
+  if (!width && !height && !children) {
+    throw new Error('[Skeleton] You should provide children or specify width and height');
+  }
+
+  const getChildrenLayout = event => {
+    setChildrenLayout(event.nativeEvent.layout);
+  };
+
+  return _react.default.createElement(_styled.Wrapper, _extends({
+    width: width,
+    height: height,
+    radius: radius
+  }, rest), active && animation === 'wave' ? _react.default.createElement(_Wave.Wave, {
+    active: active,
+    width: width,
+    height: height,
+    childrenLayout: childrenLayout
+  }) : _react.default.createElement(_Pulse.Pulse, {
+    active: active,
+    width: width,
+    height: height,
+    childrenLayout: childrenLayout
+  }), _react.default.createElement(_reactNative.View, {
+    onLayout: event => getChildrenLayout(event),
+    style: {
+      opacity: active ? 0 : 1
+    },
+    pointerEvents: active ? 'none' : 'auto'
+  }, children));
+};
+
+var _default = Skeleton;
+exports.default = _default;
+//# sourceMappingURL=Skeleton.js.map

package/dist/components/atoms/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/Skeleton/Skeleton.tsx"],"names":["Skeleton","children","width","height","radius","active","animation","rest","childrenLayout","setChildrenLayout","y","x","Error","getChildrenLayout","event","nativeEvent","layout","opacity"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;AAWA,MAAMA,QAAiC,GAAG,CAAC;AACzCC,EAAAA,QADyC;AAEzCC,EAAAA,KAFyC;AAGzCC,EAAAA,MAHyC;AAIzCC,EAAAA,MAJyC;AAKzCC,EAAAA,MAAM,GAAG,IALgC;AAMzCC,EAAAA,SAAS,GAAG,MAN6B;AAOzC,KAAGC;AAPsC,CAAD,KAQpC;AACJ,QAAM,CAACC,cAAD,EAAiBC,iBAAjB,IAAsC,qBAAyB;AACnEP,IAAAA,KAAK,EAAE,CAD4D;AAEnEC,IAAAA,MAAM,EAAE,CAF2D;AAGnEO,IAAAA,CAAC,EAAE,CAHgE;AAInEC,IAAAA,CAAC,EAAE;AAJgE,GAAzB,CAA5C;;AAOA,MAAI,CAACT,KAAD,IAAU,CAACC,MAAX,IAAqB,CAACF,QAA1B,EAAoC;AAClC,UAAM,IAAIW,KAAJ,CACJ,oEADI,CAAN;AAGD;;AAED,QAAMC,iBAAiB,GAAIC,KAAD,IAA8B;AACtDL,IAAAA,iBAAiB,CAACK,KAAK,CAACC,WAAN,CAAkBC,MAAnB,CAAjB;AACD,GAFD;;AAIA,SACE,6BAAC,eAAD;AAAS,IAAA,KAAK,EAAEd,KAAhB;AAAuB,IAAA,MAAM,EAAEC,MAA/B;AAAuC,IAAA,MAAM,EAAEC;AAA/C,KAA2DG,IAA3D,GACGF,MAAM,IAAIC,SAAS,KAAK,MAAxB,GACC,6BAAC,UAAD;AACE,IAAA,MAAM,EAAED,MADV;AAEE,IAAA,KAAK,EAAEH,KAFT;AAGE,IAAA,MAAM,EAAEC,MAHV;AAIE,IAAA,cAAc,EAAEK;AAJlB,IADD,GAQC,6BAAC,YAAD;AACE,IAAA,MAAM,EAAEH,MADV;AAEE,IAAA,KAAK,EAAEH,KAFT;AAGE,IAAA,MAAM,EAAEC,MAHV;AAIE,IAAA,cAAc,EAAEK;AAJlB,IATJ,EAgBE,6BAAC,iBAAD;AACE,IAAA,QAAQ,EAAEM,KAAK,IAAID,iBAAiB,CAACC,KAAD,CADtC;AAEE,IAAA,KAAK,EAAE;AAAEG,MAAAA,OAAO,EAAEZ,MAAM,GAAG,CAAH,GAAO;AAAxB,KAFT;AAGE,IAAA,aAAa,EAAEA,MAAM,GAAG,MAAH,GAAY;AAHnC,KAKGJ,QALH,CAhBF,CADF;AA0BD,CApDD;;eAsDeD,Q","sourcesContent":["import React, { useState } from 'react';\nimport { BorderRadiusType } from '@tecsinapse/react-core';\nimport { LayoutChangeEvent, View, ViewProps } from 'react-native';\nimport { Wrapper } from './styled';\nimport { Wave } from './Wave';\nimport { Pulse } from './Pulse';\nimport { ChildrenLayout } from './types';\n\nexport interface SkeletonProps extends ViewProps {\n  width?: number;\n  height?: number;\n  radius?: BorderRadiusType;\n  active?: boolean;\n  animation?: 'wave' | 'pulse';\n}\n\nconst Skeleton: React.FC<SkeletonProps> = ({\n  children,\n  width,\n  height,\n  radius,\n  active = true,\n  animation = 'wave',\n  ...rest\n}) => {\n  const [childrenLayout, setChildrenLayout] = useState<ChildrenLayout>({\n    width: 0,\n    height: 0,\n    y: 0,\n    x: 0,\n  });\n\n  if (!width && !height && !children) {\n    throw new Error(\n      '[Skeleton] You should provide children or specify width and height'\n    );\n  }\n\n  const getChildrenLayout = (event: LayoutChangeEvent) => {\n    setChildrenLayout(event.nativeEvent.layout);\n  };\n\n  return (\n    <Wrapper width={width} height={height} radius={radius} {...rest}>\n      {active && animation === 'wave' ? (\n        <Wave\n          active={active}\n          width={width}\n          height={height}\n          childrenLayout={childrenLayout}\n        />\n      ) : (\n        <Pulse\n          active={active}\n          width={width}\n          height={height}\n          childrenLayout={childrenLayout}\n        />\n      )}\n      <View\n        onLayout={event => getChildrenLayout(event)}\n        style={{ opacity: active ? 0 : 1 }}\n        pointerEvents={active ? 'none' : 'auto'}\n      >\n        {children}\n      </View>\n    </Wrapper>\n  );\n};\n\nexport default Skeleton;\n"],"file":"Skeleton.js"}

package/dist/components/atoms/Skeleton/Wave.d.ts

@@ -0,0 +1,2 @@
+import { IAnimationComponent } from './types';
+export declare const Wave: ({ active, width, height, childrenLayout, }: IAnimationComponent) => JSX.Element;

package/dist/components/atoms/Skeleton/Wave.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wave = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _reactNativeLinearGradient = _interopRequireDefault(require("react-native-linear-gradient"));
+
+var _animation = require("./animation");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const AnimatedLinearGradient = _reactNative.Animated.createAnimatedComponent(_reactNativeLinearGradient.default);
+
+const Wave = ({
+  active = true,
+  width,
+  height,
+  childrenLayout
+}) => {
+  const range = width ?? childrenLayout.width;
+  const animatedValue = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const translateX = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-range, range]
+  });
+  (0, _react.useEffect)(() => {
+    (0, _animation.waveAnimation)(active, animatedValue);
+  }, [active]);
+  return _react.default.createElement(AnimatedLinearGradient, {
+    colors: ['transparent', 'rgba(0,0,0,0.05)', 'rgba(0,0,0,0.1)', 'transparent'],
+    start: {
+      x: 0,
+      y: 0
+    },
+    end: {
+      x: 1,
+      y: 0
+    },
+    style: {
+      width: width ?? childrenLayout.width,
+      height: height ?? childrenLayout.height,
+      position: 'absolute',
+      top: childrenLayout.y ?? 0,
+      left: childrenLayout.x ?? 0,
+      zIndex: 2,
+      overflow: 'hidden',
+      transform: [{
+        translateX: translateX
+      }]
+    }
+  });
+};
+
+exports.Wave = Wave;
+//# sourceMappingURL=Wave.js.map

package/dist/components/atoms/Skeleton/Wave.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/Skeleton/Wave.tsx"],"names":["AnimatedLinearGradient","Animated","createAnimatedComponent","LinearGradient","Wave","active","width","height","childrenLayout","range","animatedValue","Value","current","translateX","interpolate","inputRange","outputRange","x","y","position","top","left","zIndex","overflow","transform"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAGA,MAAMA,sBAAsB,GAAGC,sBAASC,uBAAT,CAAiCC,kCAAjC,CAA/B;;AAEO,MAAMC,IAAI,GAAG,CAAC;AACnBC,EAAAA,MAAM,GAAG,IADU;AAEnBC,EAAAA,KAFmB;AAGnBC,EAAAA,MAHmB;AAInBC,EAAAA;AAJmB,CAAD,KAKO;AACzB,QAAMC,KAAK,GAAGH,KAAK,IAAIE,cAAc,CAACF,KAAtC;AACA,QAAMI,aAAa,GAAG,mBAAO,IAAIT,sBAASU,KAAb,CAAmB,CAAnB,CAAP,EAA8BC,OAApD;AAEA,QAAMC,UAAU,GAAGH,aAAa,CAACI,WAAd,CAA0B;AAC3CC,IAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CAD+B;AAE3CC,IAAAA,WAAW,EAAE,CAAC,CAACP,KAAF,EAASA,KAAT;AAF8B,GAA1B,CAAnB;AAKA,wBAAU,MAAM;AACd,kCAAcJ,MAAd,EAAsBK,aAAtB;AACD,GAFD,EAEG,CAACL,MAAD,CAFH;AAIA,SACE,6BAAC,sBAAD;AACE,IAAA,MAAM,EAAE,CACN,aADM,EAEN,kBAFM,EAGN,iBAHM,EAIN,aAJM,CADV;AAOE,IAAA,KAAK,EAAE;AAAEY,MAAAA,CAAC,EAAE,CAAL;AAAQC,MAAAA,CAAC,EAAE;AAAX,KAPT;AAQE,IAAA,GAAG,EAAE;AAAED,MAAAA,CAAC,EAAE,CAAL;AAAQC,MAAAA,CAAC,EAAE;AAAX,KARP;AASE,IAAA,KAAK,EAAE;AACLZ,MAAAA,KAAK,EAAEA,KAAK,IAAIE,cAAc,CAACF,KAD1B;AAELC,MAAAA,MAAM,EAAEA,MAAM,IAAIC,cAAc,CAACD,MAF5B;AAGLY,MAAAA,QAAQ,EAAE,UAHL;AAILC,MAAAA,GAAG,EAAEZ,cAAc,CAACU,CAAf,IAAoB,CAJpB;AAKLG,MAAAA,IAAI,EAAEb,cAAc,CAACS,CAAf,IAAoB,CALrB;AAMLK,MAAAA,MAAM,EAAE,CANH;AAOLC,MAAAA,QAAQ,EAAE,QAPL;AAQLC,MAAAA,SAAS,EAAE,CACT;AACEX,QAAAA,UAAU,EAAEA;AADd,OADS;AARN;AATT,IADF;AA0BD,CA5CM","sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { Animated } from 'react-native';\nimport LinearGradient from 'react-native-linear-gradient';\nimport { waveAnimation } from './animation';\nimport { IAnimationComponent } from './types';\n\nconst AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);\n\nexport const Wave = ({\n  active = true,\n  width,\n  height,\n  childrenLayout,\n}: IAnimationComponent) => {\n  const range = width ?? childrenLayout.width;\n  const animatedValue = useRef(new Animated.Value(0)).current;\n\n  const translateX = animatedValue.interpolate({\n    inputRange: [0, 1],\n    outputRange: [-range, range],\n  });\n\n  useEffect(() => {\n    waveAnimation(active, animatedValue);\n  }, [active]);\n\n  return (\n    <AnimatedLinearGradient\n      colors={[\n        'transparent',\n        'rgba(0,0,0,0.05)',\n        'rgba(0,0,0,0.1)',\n        'transparent',\n      ]}\n      start={{ x: 0, y: 0 }}\n      end={{ x: 1, y: 0 }}\n      style={{\n        width: width ?? childrenLayout.width,\n        height: height ?? childrenLayout.height,\n        position: 'absolute',\n        top: childrenLayout.y ?? 0,\n        left: childrenLayout.x ?? 0,\n        zIndex: 2,\n        overflow: 'hidden',\n        transform: [\n          {\n            translateX: translateX,\n          },\n        ],\n      }}\n    />\n  );\n};\n"],"file":"Wave.js"}

package/dist/components/atoms/Skeleton/animation.d.ts

@@ -0,0 +1,3 @@
+import { Animated } from 'react-native';
+export declare const waveAnimation: (active: boolean, animatedValue: Animated.Value) => void;
+export declare const pulseAnimation: (active: boolean, animatedValue: Animated.Value) => void;

package/dist/components/atoms/Skeleton/animation.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pulseAnimation = exports.waveAnimation = void 0;
+
+var _reactNative = require("react-native");
+
+const waveAnimation = (active, animatedValue) => {
+  if (active) {
+    _reactNative.Animated.loop(_reactNative.Animated.timing(animatedValue, {
+      toValue: 1,
+      duration: 1600,
+      easing: _reactNative.Easing.inOut(_reactNative.Easing.linear),
+      useNativeDriver: true
+    })).start();
+
+    return;
+  }
+
+  _reactNative.Animated.timing(animatedValue, {
+    toValue: 0,
+    useNativeDriver: true
+  }).start();
+};
+
+exports.waveAnimation = waveAnimation;
+
+const pulseAnimation = (active, animatedValue) => {
+  if (active) {
+    _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(animatedValue, {
+      toValue: 1,
+      duration: 800,
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(animatedValue, {
+      toValue: 0,
+      duration: 800,
+      useNativeDriver: true
+    })])).start();
+
+    return;
+  }
+
+  _reactNative.Animated.timing(animatedValue, {
+    toValue: 0,
+    useNativeDriver: true
+  }).start();
+};
+
+exports.pulseAnimation = pulseAnimation;
+//# sourceMappingURL=animation.js.map

package/dist/components/atoms/Skeleton/animation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/Skeleton/animation.ts"],"names":["waveAnimation","active","animatedValue","Animated","loop","timing","toValue","duration","easing","Easing","inOut","linear","useNativeDriver","start","pulseAnimation","sequence"],"mappings":";;;;;;;AAAA;;AAEO,MAAMA,aAAa,GAAG,CAC3BC,MAD2B,EAE3BC,aAF2B,KAGlB;AACT,MAAID,MAAJ,EAAY;AACVE,0BAASC,IAAT,CACED,sBAASE,MAAT,CAAgBH,aAAhB,EAA+B;AAC7BI,MAAAA,OAAO,EAAE,CADoB;AAE7BC,MAAAA,QAAQ,EAAE,IAFmB;AAG7BC,MAAAA,MAAM,EAAEC,oBAAOC,KAAP,CAAaD,oBAAOE,MAApB,CAHqB;AAI7BC,MAAAA,eAAe,EAAE;AAJY,KAA/B,CADF,EAOEC,KAPF;;AAQA;AACD;;AACDV,wBAASE,MAAT,CAAgBH,aAAhB,EAA+B;AAC7BI,IAAAA,OAAO,EAAE,CADoB;AAE7BM,IAAAA,eAAe,EAAE;AAFY,GAA/B,EAGGC,KAHH;AAID,CAnBM;;;;AAqBA,MAAMC,cAAc,GAAG,CAC5Bb,MAD4B,EAE5BC,aAF4B,KAGnB;AACT,MAAID,MAAJ,EAAY;AACVE,0BAASC,IAAT,CACED,sBAASY,QAAT,CAAkB,CAChBZ,sBAASE,MAAT,CAAgBH,aAAhB,EAA+B;AAC7BI,MAAAA,OAAO,EAAE,CADoB;AAE7BC,MAAAA,QAAQ,EAAE,GAFmB;AAG7BK,MAAAA,eAAe,EAAE;AAHY,KAA/B,CADgB,EAMhBT,sBAASE,MAAT,CAAgBH,aAAhB,EAA+B;AAC7BI,MAAAA,OAAO,EAAE,CADoB;AAE7BC,MAAAA,QAAQ,EAAE,GAFmB;AAG7BK,MAAAA,eAAe,EAAE;AAHY,KAA/B,CANgB,CAAlB,CADF,EAaEC,KAbF;;AAcA;AACD;;AACDV,wBAASE,MAAT,CAAgBH,aAAhB,EAA+B;AAC7BI,IAAAA,OAAO,EAAE,CADoB;AAE7BM,IAAAA,eAAe,EAAE;AAFY,GAA/B,EAGGC,KAHH;AAID,CAzBM","sourcesContent":["import { Animated, Easing } from 'react-native';\n\nexport const waveAnimation = (\n  active: boolean,\n  animatedValue: Animated.Value\n): void => {\n  if (active) {\n    Animated.loop(\n      Animated.timing(animatedValue, {\n        toValue: 1,\n        duration: 1600,\n        easing: Easing.inOut(Easing.linear),\n        useNativeDriver: true,\n      })\n    ).start();\n    return;\n  }\n  Animated.timing(animatedValue, {\n    toValue: 0,\n    useNativeDriver: true,\n  }).start();\n};\n\nexport const pulseAnimation = (\n  active: boolean,\n  animatedValue: Animated.Value\n): void => {\n  if (active) {\n    Animated.loop(\n      Animated.sequence([\n        Animated.timing(animatedValue, {\n          toValue: 1,\n          duration: 800,\n          useNativeDriver: true,\n        }),\n        Animated.timing(animatedValue, {\n          toValue: 0,\n          duration: 800,\n          useNativeDriver: true,\n        }),\n      ])\n    ).start();\n    return;\n  }\n  Animated.timing(animatedValue, {\n    toValue: 0,\n    useNativeDriver: true,\n  }).start();\n};\n"],"file":"animation.js"}

package/dist/components/atoms/Skeleton/index.d.ts

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

package/dist/components/atoms/Skeleton/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Skeleton", {
+  enumerable: true,
+  get: function () {
+    return _Skeleton.default;
+  }
+});
+Object.defineProperty(exports, "SkeletonProps", {
+  enumerable: true,
+  get: function () {
+    return _Skeleton.SkeletonProps;
+  }
+});
+
+var _Skeleton = _interopRequireWildcard(require("./Skeleton"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+//# sourceMappingURL=index.js.map

package/dist/components/atoms/Skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/Skeleton/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as Skeleton, SkeletonProps } from './Skeleton';\n"],"file":"index.js"}

package/dist/components/atoms/Skeleton/styled.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<any>, {}, {
+    ref?: import("react").Ref<import("react-native").View> | undefined;
+}>;

package/dist/components/atoms/Skeleton/styled.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = void 0;
+
+var _native = _interopRequireDefault(require("@emotion/native"));
+
+var _reactCore = require("@tecsinapse/react-core");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Wrapper = _native.default.View`
+  width: ${({
+  width
+}) => width ? `${(0, _reactCore.RFValueStr)(`${width}px`)}` : '100%'};
+  height: ${({
+  height
+}) => height ? `${(0, _reactCore.RFValueStr)(`${height}px`)}` : 'auto'};
+  border-radius: ${({
+  theme,
+  radius
+}) => radius ? theme.borderRadius[radius] : 0};
+  overflow: hidden;
+  position: relative;
+`;
+exports.Wrapper = Wrapper;
+//# sourceMappingURL=styled.js.map

package/dist/components/atoms/Skeleton/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/Skeleton/styled.ts"],"names":["Wrapper","styled","View","width","height","theme","radius","borderRadius"],"mappings":";;;;;;;AAAA;;AACA;;;;AAGO,MAAMA,OAAO,GAAGC,gBAAOC,IAA0C;AACxE,WAAW,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAgBA,KAAK,GAAI,GAAE,2BAAY,GAAEA,KAAM,IAApB,CAAyB,EAA/B,GAAmC,MAAQ;AAC3E,YAAY,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAiBA,MAAM,GAAI,GAAE,2BAAY,GAAEA,MAAO,IAArB,CAA0B,EAAhC,GAAoC,MAAQ;AAC/E,mBAAmB,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA;AAAT,CAAD,KACfA,MAAM,GAAGD,KAAK,CAACE,YAAN,CAAmBD,MAAnB,CAAH,GAAgC,CAAE;AAC5C;AACA;AACA,CAPO","sourcesContent":["import styled from '@emotion/native';\nimport { RFValueStr, StyleProps } from '@tecsinapse/react-core';\nimport { SkeletonProps } from './Skeleton';\n\nexport const Wrapper = styled.View<Partial<StyleProps & SkeletonProps>>`\n  width: ${({ width }) => (width ? `${RFValueStr(`${width}px`)}` : '100%')};\n  height: ${({ height }) => (height ? `${RFValueStr(`${height}px`)}` : 'auto')};\n  border-radius: ${({ theme, radius }: StyleProps & Partial<SkeletonProps>) =>\n    radius ? theme.borderRadius[radius] : 0};\n  overflow: hidden;\n  position: relative;\n`;\n"],"file":"styled.js"}

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

@@ -0,0 +1,12 @@
+export declare type ChildrenLayout = {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+};
+export interface IAnimationComponent {
+    width?: number;
+    height?: number;
+    active?: boolean;
+    childrenLayout: ChildrenLayout;
+}

package/dist/components/atoms/Skeleton/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/dist/components/atoms/Skeleton/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"types.js"}

package/dist/components/atoms/Text/styled.js

@@ -9,6 +9,8 @@ var _native = _interopRequireWildcard(require("@emotion/native"));
 
 var _reactCore = require("@tecsinapse/react-core");
 
+var _reactNative = require("react-native");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -21,7 +23,7 @@ const fontStyles = ({
   const fontFamily = (theme === null || theme === void 0 ? void 0 : theme.font.stack[fontStack]) || '';
   const fontStyle = theme === null || theme === void 0 ? void 0 : theme.font.files[fontWeight];
   return (0, _native.css)`
-    font-weight: normal;
+    ${_reactNative.Platform.OS === 'android' ? 'font-weight: normal;' : undefined}
     font-family: ${fontStyle === null || fontStyle === void 0 ? void 0 : fontStyle.replace('{0}', fontFamily)};
   `;
 };

package/dist/components/atoms/Text/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Text/styled.ts"],"names":["fontStyles","theme","fontStack","fontWeight","fontFamily","font","stack","fontStyle","files","replace","StyledNativeText","Text"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AAaO,MAAMA,UAAU,GAAG,CAAC;AACzBC,EAAAA,KADyB;AAEzBC,EAAAA,SAAS,GAAG,SAFa;AAGzBC,EAAAA,UAAU,GAAG;AAHY,CAAD,KAIiB;AACzC,QAAMC,UAAU,GAAG,CAAAH,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,CAAYC,KAAZ,CAAkBJ,SAAlB,MAAgC,EAAnD;AACA,QAAMK,SAAS,GAAGN,KAAH,aAAGA,KAAH,uBAAGA,KAAK,CAAEI,IAAP,CAAYG,KAAZ,CAAkBL,UAAlB,CAAlB;AACA,SAAO,gBAAI;AACb;AACA,mBAAmBI,SAFP,aAEOA,SAFP,uBAEOA,SAAS,CAAEE,OAAX,CAAmB,KAAnB,EAA0BL,UAA1B,CAAsC;AACzD,GAHE;AAID,CAXM;;;AAaA,MAAMM,gBAAgB,GAAG,qBAAOC,eAAP,EAE9BX,UAF8B,CAAzB","sourcesContent":["import styled, { css } from '@emotion/native';\nimport {\n  FontStackType,\n  FontWeightType,\n  StyleProps,\n  Text,\n} from '@tecsinapse/react-core';\nimport { TextNativeProps } from './Text';\n\nexport interface Font {\n  fontStack?: FontStackType;\n  fontWeight?: FontWeightType;\n}\n\nexport const fontStyles = ({\n  theme,\n  fontStack = 'default',\n  fontWeight = 'regular',\n}: Partial<Font & Partial<StyleProps>>) => {\n  const fontFamily = theme?.font.stack[fontStack] || '';\n  const fontStyle = theme?.font.files[fontWeight];\n  return css`\n    font-weight: normal;\n    font-family: ${fontStyle?.replace('{0}', fontFamily)};\n  `;\n};\n\nexport const StyledNativeText = styled(Text)<\n  Font & Partial<TextNativeProps> & Partial<StyleProps>\n>(fontStyles);\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Text/styled.ts"],"names":["fontStyles","theme","fontStack","fontWeight","fontFamily","font","stack","fontStyle","files","Platform","OS","undefined","replace","StyledNativeText","Text"],"mappings":";;;;;;;AAAA;;AACA;;AAMA;;;;;;AAQO,MAAMA,UAAU,GAAG,CAAC;AACzBC,EAAAA,KADyB;AAEzBC,EAAAA,SAAS,GAAG,SAFa;AAGzBC,EAAAA,UAAU,GAAG;AAHY,CAAD,KAIiB;AACzC,QAAMC,UAAU,GAAG,CAAAH,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,IAAP,CAAYC,KAAZ,CAAkBJ,SAAlB,MAAgC,EAAnD;AACA,QAAMK,SAAS,GAAGN,KAAH,aAAGA,KAAH,uBAAGA,KAAK,CAAEI,IAAP,CAAYG,KAAZ,CAAkBL,UAAlB,CAAlB;AACA,SAAO,gBAAI;AACb,MAAMM,sBAASC,EAAT,KAAgB,SAAhB,GAA4B,sBAA5B,GAAqDC,SAAU;AACrE,mBAAmBJ,SAFP,aAEOA,SAFP,uBAEOA,SAAS,CAAEK,OAAX,CAAmB,KAAnB,EAA0BR,UAA1B,CAAsC;AACzD,GAHE;AAID,CAXM;;;AAaA,MAAMS,gBAAgB,GAAG,qBAAOC,eAAP,EAE9Bd,UAF8B,CAAzB","sourcesContent":["import styled, { css } from '@emotion/native';\nimport {\n  FontStackType,\n  FontWeightType,\n  StyleProps,\n  Text,\n} from '@tecsinapse/react-core';\nimport { Platform } from 'react-native';\nimport { TextNativeProps } from './Text';\n\nexport interface Font {\n  fontStack?: FontStackType;\n  fontWeight?: FontWeightType;\n}\n\nexport const fontStyles = ({\n  theme,\n  fontStack = 'default',\n  fontWeight = 'regular',\n}: Partial<Font & Partial<StyleProps>>) => {\n  const fontFamily = theme?.font.stack[fontStack] || '';\n  const fontStyle = theme?.font.files[fontWeight];\n  return css`\n    ${Platform.OS === 'android' ? 'font-weight: normal;' : undefined}\n    font-family: ${fontStyle?.replace('{0}', fontFamily)};\n  `;\n};\n\nexport const StyledNativeText = styled(Text)<\n  Font & Partial<TextNativeProps> & Partial<StyleProps>\n>(fontStyles);\n"],"file":"styled.js"}

package/dist/components/molecules/Calendar/Calendar.d.ts

@@ -1,4 +1 @@
-export declare const Calendar: <T extends any>({ locale, ...rest }: {
-    [x: string]: any;
-    locale: any;
-}) => JSX.Element;
+export declare const Calendar: <T extends any>({ locale, ...rest }: any) => JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/Calendar/Calendar.tsx"],"names":["Calendar","locale","rest","Text"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAEO,MAAMA,QAAQ,GAAG,CAA0B;AAChDC,EAAAA,MADgD;AAEhD,KAAGC;AAF6C,CAA1B,KAGL;AACjB,SACE,6BAAC,mBAAD,eACMA,IADN;AAEE,IAAA,aAAa,EAAEC,UAFjB;AAGE,IAAA,MAAM,EAAEF,MAAM,IAAI;AAHpB,KADF;AAOD,CAXM","sourcesContent":["import { Calendar as CalendarCore, SelectionType } from '@tecsinapse/react-core';\nimport React from 'react';\nimport { getLocale } from '../../../utils/date';\nimport { Text } from '../../atoms/Text';\n\nexport const Calendar = <T extends SelectionType>({\n  locale,\n  ...rest\n}): JSX.Element => {\n  return (\n    <CalendarCore\n      {...rest}\n      TextComponent={Text}\n      locale={locale ?? getLocale()}\n    />\n  );\n};\n"],"file":"Calendar.js"}
+{"version":3,"sources":["../../../../src/components/molecules/Calendar/Calendar.tsx"],"names":["Calendar","locale","rest","Text"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAEO,MAAMA,QAAQ,GAAG,CAA0B;AAChDC,EAAAA,MADgD;AAEhD,KAAGC;AAF6C,CAA1B,KAGa;AACnC,SACE,6BAAC,mBAAD,eACMA,IADN;AAEE,IAAA,aAAa,EAAEC,UAFjB;AAGE,IAAA,MAAM,EAAEF,MAAM,IAAI;AAHpB,KADF;AAOD,CAXM","sourcesContent":["import { Calendar as CalendarCore, CalendarProps, SelectionType } from '@tecsinapse/react-core';\nimport React from 'react';\nimport { getLocale } from '../../../utils/date';\nimport { Text } from '../../atoms/Text';\n\nexport const Calendar = <T extends SelectionType>({\n  locale,\n  ...rest\n}: CalendarProps<T>): JSX.Element => {\n  return (\n    <CalendarCore\n      {...rest}\n      TextComponent={Text}\n      locale={locale ?? getLocale()}\n    />\n  );\n};\n"],"file":"Calendar.js"}

package/dist/components/molecules/DatePicker/DatePicker.d.ts

@@ -1,2 +1,3 @@
-import { DatePickerProps } from '@tecsinapse/react-core';
-export declare const DatePicker: <T extends any>({ locale, onChange, ...rest }: Omit<any, "CalendarComponent" | "renderCalendar" | "requestCloseCalendar" | "requestShowCalendar">) => JSX.Element;
+import { DatePickerProps, SelectionType } from '@tecsinapse/react-core';
+export declare type NativeDatePickerProps<T extends SelectionType> = Omit<DatePickerProps<T>, 'CalendarComponent' | 'renderCalendar' | 'requestCloseCalendar' | 'requestShowCalendar'>;
+export declare const DatePicker: <T extends any>({ locale, onChange, ...rest }: NativeDatePickerProps<T>) => JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"names":["DatePicker","locale","onChange","rest","modal","handleChange","value","requestUpdate","Text","Calendar","show","close","calendar","blur","sync","NativeModal","children","others","CalendarBoxContent"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEO,MAAMA,UAAU,GAAG,CAA0B;AAAEC,EAAAA,MAAF;AAAUC,EAAAA,QAAV;AAAoB,KAAGC;AAAvB,CAA1B,KAA4L;AAEpN,QAAMC,KAAK,GAAG,iCAAd;;AAEA,QAAMC,YAAY,GAAIC,KAAD,IAAsB;AACzCJ,IAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGI,KAAH,CAAR;AACAF,IAAAA,KAAK,CAACG,aAAN;AACD,GAHD;;AAKA,SACE,6BAAC,qBAAD,eACMJ,IADN;AAEE,IAAA,aAAa,EAAEK,UAFjB;AAGE,IAAA,iBAAiB,EAAEC,kBAHrB;AAIE,IAAA,MAAM,EAAER,MAAM,IAAI,sBAJpB;AAKE,IAAA,QAAQ,EAAEI,YALZ;AAME,IAAA,mBAAmB,EAAE,MAAMD,KAAK,CAACM,IAAN,EAN7B;AAOE,IAAA,oBAAoB,EAAE,MAAMN,KAAK,CAACO,KAAN,EAP9B;AAQE,IAAA,cAAc,EAAE,CAACC,QAAD,EAAWC,IAAX,KAAoBT,KAAK,CAACU,IAAN,CAClC,6BAAC,WAAD;AAAa,MAAA,OAAO,EAAED;AAAtB,OACGD,QADH,CADkC;AARtC,KADF;AAiBD,CA1BM;;;;AA4BP,MAAMG,WAA2B,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAY,KAAGC;AAAf,CAAD,KAA6B;AAC/D,SACE,6BAAC,gBAAD;AAAW,IAAA,YAAY,EAAEC;AAAzB,KAAiDD,MAAjD,GACGD,QADH,CADF;AAKD,CAND","sourcesContent":["import {\n  DatePicker as DatePickerCore, DatePickerProps, SelectionType, Value\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { getLocale } from '../../../utils/date';\nimport { IBaseModal, ModalView, useLazyModalManager } from '../../atoms/Modal';\nimport { Text } from '../../atoms/Text';\nimport { Calendar } from '../Calendar';\nimport { CalendarBoxContent } from './styled';\n\nexport const DatePicker = <T extends SelectionType>({ locale, onChange, ...rest }: Omit<DatePickerProps<T>, 'CalendarComponent' | 'renderCalendar' | 'requestCloseCalendar' | 'requestShowCalendar'>): JSX.Element => {\n\n  const modal = useLazyModalManager()\n  \n  const handleChange = (value?: Value<T>) => {\n    onChange?.(value)\n    modal.requestUpdate()\n  }\n  \n  return (\n    <DatePickerCore\n      {...rest}\n      TextComponent={Text}\n      CalendarComponent={Calendar}\n      locale={locale ?? getLocale()}\n      onChange={handleChange}\n      requestShowCalendar={() => modal.show()}\n      requestCloseCalendar={() => modal.close()}\n      renderCalendar={(calendar, blur) => modal.sync(\n        <NativeModal onClose={blur}>\n          {calendar}\n        </NativeModal>\n      )}\n    />\n  );\n\n};\n\nconst NativeModal: FC<IBaseModal> = ({ children, ...others }) => {\n  return (\n    <ModalView BoxComponent={CalendarBoxContent} {...others}>\n      {children}\n    </ModalView>\n  )\n}"],"file":"DatePicker.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"names":["DatePicker","locale","onChange","rest","modal","handleChange","value","requestUpdate","Text","Calendar","show","close","calendar","blur","sync","NativeModal","children","others","CalendarBoxContent"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAIO,MAAMA,UAAU,GAAG,CAA0B;AAAEC,EAAAA,MAAF;AAAUC,EAAAA,QAAV;AAAoB,KAAGC;AAAvB,CAA1B,KAAmG;AAE3H,QAAMC,KAAK,GAAG,iCAAd;;AAEA,QAAMC,YAAY,GAAIC,KAAD,IAAsB;AACzCJ,IAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGI,KAAH,CAAR;AACAF,IAAAA,KAAK,CAACG,aAAN;AACD,GAHD;;AAKA,SACE,6BAAC,qBAAD,eACMJ,IADN;AAEE,IAAA,aAAa,EAAEK,UAFjB;AAGE,IAAA,iBAAiB,EAAEC,kBAHrB;AAIE,IAAA,MAAM,EAAER,MAAM,IAAI,sBAJpB;AAKE,IAAA,QAAQ,EAAEI,YALZ;AAME,IAAA,mBAAmB,EAAE,MAAMD,KAAK,CAACM,IAAN,EAN7B;AAOE,IAAA,oBAAoB,EAAE,MAAMN,KAAK,CAACO,KAAN,EAP9B;AAQE,IAAA,cAAc,EAAE,CAACC,QAAD,EAAWC,IAAX,KAAoBT,KAAK,CAACU,IAAN,CAClC,6BAAC,WAAD;AAAa,MAAA,OAAO,EAAED;AAAtB,OACGD,QADH,CADkC;AARtC,KADF;AAiBD,CA1BM;;;;AA4BP,MAAMG,WAA2B,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAY,KAAGC;AAAf,CAAD,KAA6B;AAC/D,SACE,6BAAC,gBAAD;AAAW,IAAA,YAAY,EAAEC;AAAzB,KAAiDD,MAAjD,GACGD,QADH,CADF;AAKD,CAND","sourcesContent":["import {\n  DatePicker as DatePickerCore, DatePickerProps, SelectionType, Value\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { getLocale } from '../../../utils/date';\nimport { IBaseModal, ModalView, useLazyModalManager } from '../../atoms/Modal';\nimport { Text } from '../../atoms/Text';\nimport { Calendar } from '../Calendar';\nimport { CalendarBoxContent } from './styled';\n\nexport type NativeDatePickerProps<T extends SelectionType> = Omit<DatePickerProps<T>, 'CalendarComponent' | 'renderCalendar' | 'requestCloseCalendar' | 'requestShowCalendar'>\n\nexport const DatePicker = <T extends SelectionType>({ locale, onChange, ...rest }: NativeDatePickerProps<T>): JSX.Element => {\n\n  const modal = useLazyModalManager()\n  \n  const handleChange = (value?: Value<T>) => {\n    onChange?.(value)\n    modal.requestUpdate()\n  }\n  \n  return (\n    <DatePickerCore\n      {...rest}\n      TextComponent={Text}\n      CalendarComponent={Calendar}\n      locale={locale ?? getLocale()}\n      onChange={handleChange}\n      requestShowCalendar={() => modal.show()}\n      requestCloseCalendar={() => modal.close()}\n      renderCalendar={(calendar, blur) => modal.sync(\n        <NativeModal onClose={blur}>\n          {calendar}\n        </NativeModal>\n      )}\n    />\n  );\n\n};\n\nconst NativeModal: FC<IBaseModal> = ({ children, ...others }) => {\n  return (\n    <ModalView BoxComponent={CalendarBoxContent} {...others}>\n      {children}\n    </ModalView>\n  )\n}"],"file":"DatePicker.js"}

package/dist/components/molecules/DatePicker/index.d.ts

@@ -1 +1 @@
-export { DatePicker } from './DatePicker';
+export { DatePicker, NativeDatePickerProps } from './DatePicker';

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

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "DatePicker", {
     return _DatePicker.DatePicker;
   }
 });
+Object.defineProperty(exports, "NativeDatePickerProps", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.NativeDatePickerProps;
+  }
+});
 
 var _DatePicker = require("./DatePicker");
 //# sourceMappingURL=index.js.map

package/dist/components/molecules/DatePicker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DatePicker/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA","sourcesContent":["export { DatePicker } from './DatePicker';\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DatePicker/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA","sourcesContent":["export { DatePicker, NativeDatePickerProps } from './DatePicker';\n"],"file":"index.js"}

package/dist/components/molecules/DateTimePicker/DateTimePicker.d.ts

@@ -1,3 +1,4 @@
 import { DateTimePickerProps } from '@tecsinapse/react-core';
 import { FC } from 'react';
-export declare const DateTimePicker: FC<Omit<DateTimePickerProps, 'DateTimeSelectorComponent' | 'renderSelector' | 'requestCloseSelector' | 'requestShowSelector'>>;
+export declare type NativeDateTimePickerProps = Omit<DateTimePickerProps, 'DateTimeSelectorComponent' | 'renderSelector' | 'requestCloseSelector' | 'requestShowSelector'>;
+export declare const DateTimePicker: FC<NativeDateTimePickerProps>;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/DateTimePicker.tsx"],"names":["DateTimePicker","locale","rest","modal","Text","DateTimeSelector","show","close","selector","blur","sync","NativeModal","children","others"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEO,MAAMA,cAA8I,GAAG,CAAC;AAAEC,EAAAA,MAAF;AAAU,KAAGC;AAAb,CAAD,KAAyB;AAErL,QAAMC,KAAK,GAAG,iCAAd;AAEA,SACE,6BAAC,yBAAD,eACMD,IADN;AAEE,IAAA,aAAa,EAAEE,UAFjB;AAGE,IAAA,yBAAyB,EAAEC,kCAH7B;AAIE,IAAA,MAAM,EAAEJ,MAAM,IAAI,sBAJpB;AAKE,IAAA,mBAAmB,EAAE,MAAME,KAAK,CAACG,IAAN,EAL7B;AAME,IAAA,oBAAoB,EAAE,MAAMH,KAAK,CAACI,KAAN,EAN9B;AAOE,IAAA,cAAc,EAAE,CAACC,QAAD,EAAWC,IAAX,KAAoBN,KAAK,CAACO,IAAN,CAClC,6BAAC,WAAD;AAAa,MAAA,OAAO,EAAED;AAAtB,OACGD,QADH,CADkC;AAPtC,KADF;AAeD,CAnBM;;;;AAqBP,MAAMG,WAA2B,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAY,KAAGC;AAAf,CAAD,KAA6B;AAC/D,SACE,6BAAC,gBAAD,EAAeA,MAAf,EACGD,QADH,CADF;AAKD,CAND","sourcesContent":["import {\n  DateTimePicker as DateTimePickerCore,\n  DateTimePickerProps\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { getLocale } from '../../../utils/date';\nimport { IBaseModal, ModalView, useLazyModalManager } from '../../atoms/Modal';\nimport { Text } from '../../atoms/Text';\nimport { DateTimeSelector } from '../DateTimeSelector';\n\nexport const DateTimePicker: FC<Omit<DateTimePickerProps, 'DateTimeSelectorComponent' | 'renderSelector' | 'requestCloseSelector' | 'requestShowSelector'>> = ({ locale, ...rest }) => {\n\n  const modal = useLazyModalManager()\n\n  return (\n    <DateTimePickerCore\n      {...rest}\n      TextComponent={Text}\n      DateTimeSelectorComponent={DateTimeSelector}\n      locale={locale ?? getLocale()}\n      requestShowSelector={() => modal.show()}\n      requestCloseSelector={() => modal.close()}\n      renderSelector={(selector, blur) => modal.sync(\n        <NativeModal onClose={blur}>\n          {selector}\n        </NativeModal>\n      )}\n    />\n  );\n};\n\nconst NativeModal: FC<IBaseModal> = ({ children, ...others }) => {\n  return (\n    <ModalView {...others}>\n      {children}\n    </ModalView>\n  )\n}"],"file":"DateTimePicker.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/DateTimePicker.tsx"],"names":["DateTimePicker","locale","rest","modal","Text","DateTimeSelector","show","close","selector","blur","sync","NativeModal","children","others"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;AACA;;AACA;;AACA;;;;;;AAIO,MAAMA,cAA6C,GAAG,CAAC;AAAEC,EAAAA,MAAF;AAAU,KAAGC;AAAb,CAAD,KAAyB;AAEpF,QAAMC,KAAK,GAAG,iCAAd;AAEA,SACE,6BAAC,yBAAD,eACMD,IADN;AAEE,IAAA,aAAa,EAAEE,UAFjB;AAGE,IAAA,yBAAyB,EAAEC,kCAH7B;AAIE,IAAA,MAAM,EAAEJ,MAAM,IAAI,sBAJpB;AAKE,IAAA,mBAAmB,EAAE,MAAME,KAAK,CAACG,IAAN,EAL7B;AAME,IAAA,oBAAoB,EAAE,MAAMH,KAAK,CAACI,KAAN,EAN9B;AAOE,IAAA,cAAc,EAAE,CAACC,QAAD,EAAWC,IAAX,KAAoBN,KAAK,CAACO,IAAN,CAClC,6BAAC,WAAD;AAAa,MAAA,OAAO,EAAED;AAAtB,OACGD,QADH,CADkC;AAPtC,KADF;AAeD,CAnBM;;;;AAqBP,MAAMG,WAA2B,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAY,KAAGC;AAAf,CAAD,KAA6B;AAC/D,SACE,6BAAC,gBAAD,EAAeA,MAAf,EACGD,QADH,CADF;AAKD,CAND","sourcesContent":["import {\n  DateTimePicker as DateTimePickerCore,\n  DateTimePickerProps\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { getLocale } from '../../../utils/date';\nimport { IBaseModal, ModalView, useLazyModalManager } from '../../atoms/Modal';\nimport { Text } from '../../atoms/Text';\nimport { DateTimeSelector } from '../DateTimeSelector';\n\nexport type NativeDateTimePickerProps = Omit<DateTimePickerProps, 'DateTimeSelectorComponent' | 'renderSelector' | 'requestCloseSelector' | 'requestShowSelector'>\n\nexport const DateTimePicker: FC<NativeDateTimePickerProps> = ({ locale, ...rest }) => {\n\n  const modal = useLazyModalManager()\n\n  return (\n    <DateTimePickerCore\n      {...rest}\n      TextComponent={Text}\n      DateTimeSelectorComponent={DateTimeSelector}\n      locale={locale ?? getLocale()}\n      requestShowSelector={() => modal.show()}\n      requestCloseSelector={() => modal.close()}\n      renderSelector={(selector, blur) => modal.sync(\n        <NativeModal onClose={blur}>\n          {selector}\n        </NativeModal>\n      )}\n    />\n  );\n};\n\nconst NativeModal: FC<IBaseModal> = ({ children, ...others }) => {\n  return (\n    <ModalView {...others}>\n      {children}\n    </ModalView>\n  )\n}"],"file":"DateTimePicker.js"}

package/dist/components/molecules/DateTimePicker/index.d.ts

@@ -1 +1 @@
-export { DateTimePicker } from './DateTimePicker';
+export { DateTimePicker, NativeDateTimePickerProps } from './DateTimePicker';

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

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "DateTimePicker", {
     return _DateTimePicker.DateTimePicker;
   }
 });
+Object.defineProperty(exports, "NativeDateTimePickerProps", {
+  enumerable: true,
+  get: function () {
+    return _DateTimePicker.NativeDateTimePickerProps;
+  }
+});
 
 var _DateTimePicker = require("./DateTimePicker");
 //# sourceMappingURL=index.js.map

package/dist/components/molecules/DateTimePicker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA","sourcesContent":["export { DateTimePicker } from './DateTimePicker';\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA","sourcesContent":["export { DateTimePicker, NativeDateTimePickerProps } from './DateTimePicker';\n"],"file":"index.js"}

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { Select, SelectNativeProps } from './components/molecules/Select';
 export { Input, InputNativeProps } from './components/atoms/Input';
 export { TextArea, TextAreaProps } from './components/atoms/TextArea';
 export { Text, TextNativeProps } from './components/atoms/Text';
-export { Error, Loading, Success, Button, ButtonNativeProps } from './components/atoms/Button';
+export { Error, Loading, Success, Button, ButtonNativeProps, } from './components/atoms/Button';
 export { GroupButtonOption } from './components/atoms/GroupButton';
 export { InputPassword, InputPasswordNativeProps, } from './components/molecules/InputPassword';
 export { BottomNavigator, BottomNavigatorProps, } from './components/atoms/BottomNavigator';
@@ -12,9 +12,10 @@ export { Tag, TagProps } from './components/atoms/Tag';
 export { SnappingSlider, SnappingSliderProps, } from './components/atoms/SnappingSlider';
 export { Badge, BadgeNativeProps } from './components/atoms/Badge';
 export { Snackbar, SnackbarNativeProps } from './components/molecules/Snackbar';
-export { DatePicker } from './components/molecules/DatePicker';
-export { DateTimePicker } from './components/molecules/DateTimePicker';
+export { DatePicker, NativeDatePickerProps, } from './components/molecules/DatePicker';
+export { DateTimePicker, NativeDateTimePickerProps, } from './components/molecules/DateTimePicker';
 export { Avatar } from './components/atoms/Avatar';
 export { Calendar } from './components/molecules/Calendar';
 export { DateTimeSelector } from './components/molecules/DateTimeSelector';
-export { ModalGroupManager, ModalView, ModalLifecycleHandler, useLazyModalManager, useModalManager, IBaseModal } from './components/atoms/Modal';
+export { ModalGroupManager, ModalView, ModalLifecycleHandler, useLazyModalManager, useModalManager, IBaseModal, } from './components/atoms/Modal';
+export { Skeleton, SkeletonProps } from './components/atoms/Skeleton';

package/dist/index.js

@@ -33,7 +33,9 @@ var _exportNames = {
   Snackbar: true,
   SnackbarNativeProps: true,
   DatePicker: true,
+  NativeDatePickerProps: true,
   DateTimePicker: true,
+  NativeDateTimePickerProps: true,
   Avatar: true,
   Calendar: true,
   DateTimeSelector: true,
@@ -42,7 +44,9 @@ var _exportNames = {
   ModalLifecycleHandler: true,
   useLazyModalManager: true,
   useModalManager: true,
-  IBaseModal: true
+  IBaseModal: true,
+  Skeleton: true,
+  SkeletonProps: true
 };
 Object.defineProperty(exports, "Header", {
   enumerable: true,
@@ -218,12 +222,24 @@ Object.defineProperty(exports, "DatePicker", {
     return _DatePicker.DatePicker;
   }
 });
+Object.defineProperty(exports, "NativeDatePickerProps", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.NativeDatePickerProps;
+  }
+});
 Object.defineProperty(exports, "DateTimePicker", {
   enumerable: true,
   get: function () {
     return _DateTimePicker.DateTimePicker;
   }
 });
+Object.defineProperty(exports, "NativeDateTimePickerProps", {
+  enumerable: true,
+  get: function () {
+    return _DateTimePicker.NativeDateTimePickerProps;
+  }
+});
 Object.defineProperty(exports, "Avatar", {
   enumerable: true,
   get: function () {
@@ -278,6 +294,18 @@ Object.defineProperty(exports, "IBaseModal", {
     return _Modal.IBaseModal;
   }
 });
+Object.defineProperty(exports, "Skeleton", {
+  enumerable: true,
+  get: function () {
+    return _Skeleton.Skeleton;
+  }
+});
+Object.defineProperty(exports, "SkeletonProps", {
+  enumerable: true,
+  get: function () {
+    return _Skeleton.SkeletonProps;
+  }
+});
 
 var _reactCore = require("@tecsinapse/react-core");
 
@@ -330,4 +358,6 @@ var _Calendar = require("./components/molecules/Calendar");
 var _DateTimeSelector = require("./components/molecules/DateTimeSelector");
 
 var _Modal = require("./components/atoms/Modal");
+
+var _Skeleton = require("./components/atoms/Skeleton");
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAIA;;AAIA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["export * from '@tecsinapse/react-core';\nexport { Header, HeaderProps } from './components/atoms/Header';\nexport { Select, SelectNativeProps } from './components/molecules/Select';\nexport { Input, InputNativeProps } from './components/atoms/Input';\nexport { TextArea, TextAreaProps } from './components/atoms/TextArea';\nexport { Text, TextNativeProps } from './components/atoms/Text';\nexport { Error, Loading, Success, Button, ButtonNativeProps } from './components/atoms/Button';\nexport { GroupButtonOption } from './components/atoms/GroupButton';\nexport {\n  InputPassword,\n  InputPasswordNativeProps,\n} from './components/molecules/InputPassword';\nexport {\n  BottomNavigator,\n  BottomNavigatorProps,\n} from './components/atoms/BottomNavigator';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport {\n  SnappingSlider,\n  SnappingSliderProps,\n} from './components/atoms/SnappingSlider';\nexport { Badge, BadgeNativeProps } from './components/atoms/Badge';\nexport { Snackbar, SnackbarNativeProps } from './components/molecules/Snackbar';\nexport { DatePicker } from './components/molecules/DatePicker';\nexport { DateTimePicker } from './components/molecules/DateTimePicker';\nexport { Avatar } from './components/atoms/Avatar';\nexport { Calendar } from './components/molecules/Calendar';\nexport { DateTimeSelector } from './components/molecules/DateTimeSelector';\nexport { ModalGroupManager, ModalView, ModalLifecycleHandler, useLazyModalManager, useModalManager, IBaseModal } from './components/atoms/Modal';\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAOA;;AACA;;AAIA;;AAIA;;AACA;;AAIA;;AACA;;AACA;;AAIA;;AAIA;;AACA;;AACA;;AACA;;AAQA","sourcesContent":["export * from '@tecsinapse/react-core';\nexport { Header, HeaderProps } from './components/atoms/Header';\nexport { Select, SelectNativeProps } from './components/molecules/Select';\nexport { Input, InputNativeProps } from './components/atoms/Input';\nexport { TextArea, TextAreaProps } from './components/atoms/TextArea';\nexport { Text, TextNativeProps } from './components/atoms/Text';\nexport {\n  Error,\n  Loading,\n  Success,\n  Button,\n  ButtonNativeProps,\n} from './components/atoms/Button';\nexport { GroupButtonOption } from './components/atoms/GroupButton';\nexport {\n  InputPassword,\n  InputPasswordNativeProps,\n} from './components/molecules/InputPassword';\nexport {\n  BottomNavigator,\n  BottomNavigatorProps,\n} from './components/atoms/BottomNavigator';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport {\n  SnappingSlider,\n  SnappingSliderProps,\n} from './components/atoms/SnappingSlider';\nexport { Badge, BadgeNativeProps } from './components/atoms/Badge';\nexport { Snackbar, SnackbarNativeProps } from './components/molecules/Snackbar';\nexport {\n  DatePicker,\n  NativeDatePickerProps,\n} from './components/molecules/DatePicker';\nexport {\n  DateTimePicker,\n  NativeDateTimePickerProps,\n} from './components/molecules/DateTimePicker';\nexport { Avatar } from './components/atoms/Avatar';\nexport { Calendar } from './components/molecules/Calendar';\nexport { DateTimeSelector } from './components/molecules/DateTimeSelector';\nexport {\n  ModalGroupManager,\n  ModalView,\n  ModalLifecycleHandler,\n  useLazyModalManager,\n  useModalManager,\n  IBaseModal,\n} from './components/atoms/Modal';\nexport { Skeleton, SkeletonProps } from './components/atoms/Skeleton';\n"],"file":"index.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-native-kit",
   "description": "TecSinapse React Native components",
-  "version": "1.12.13",
+  "version": "1.13.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
@@ -13,7 +13,8 @@
   "dependencies": {
     "@emotion/native": "^11.0.0",
     "@emotion/react": "^11.4.1",
-    "@tecsinapse/react-core": "^1.12.9"
+    "@tecsinapse/react-core": "^1.12.10",
+    "react-native-linear-gradient": "^2.5.6"
   },
   "repository": {
     "type": "git",
@@ -27,6 +28,7 @@
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-native": ">=0.64.0",
+    "react-native-linear-gradient": "^2.5.6",
     "react-native-safe-area-context": "^3.1.9",
     "react-native-vector-icons": ">=8.1.0",
     "uuid": "^8.3.2"
@@ -34,5 +36,5 @@
   "devDependencies": {
     "@types/uuid": "^8.3.3"
   },
-  "gitHead": "e4ceaaed1fb32ed77967fe54a056954be7b4151a"
+  "gitHead": "7ab04c72670707ce71d0874c37347d20cf94e329"
 }

package/src/components/atoms/Skeleton/Pulse.tsx

@@ -0,0 +1,33 @@
+import { Animated } from 'react-native';
+import React, { useEffect, useRef } from 'react';
+import { pulseAnimation } from './animation';
+import { IAnimationComponent } from './types';
+
+export const Pulse = ({
+  active = true,
+  width,
+  height,
+  childrenLayout,
+}: IAnimationComponent) => {
+  const animatedValue = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    pulseAnimation(active, animatedValue);
+  }, [active]);
+
+  return (
+    <Animated.View
+      style={{
+        width: width ?? childrenLayout.width,
+        height: height ?? childrenLayout.height,
+        backgroundColor: 'rgba(0,0,0,0.05)',
+        position: 'absolute',
+        top: childrenLayout.x ?? 0,
+        left: childrenLayout.y ?? 0,
+        zIndex: 2,
+        overflow: 'hidden',
+        opacity: animatedValue,
+      }}
+    />
+  );
+};

package/src/components/atoms/Skeleton/Skeleton.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { BorderRadiusType } from '@tecsinapse/react-core';
+import { LayoutChangeEvent, View, ViewProps } from 'react-native';
+import { Wrapper } from './styled';
+import { Wave } from './Wave';
+import { Pulse } from './Pulse';
+import { ChildrenLayout } from './types';
+
+export interface SkeletonProps extends ViewProps {
+  width?: number;
+  height?: number;
+  radius?: BorderRadiusType;
+  active?: boolean;
+  animation?: 'wave' | 'pulse';
+}
+
+const Skeleton: React.FC<SkeletonProps> = ({
+  children,
+  width,
+  height,
+  radius,
+  active = true,
+  animation = 'wave',
+  ...rest
+}) => {
+  const [childrenLayout, setChildrenLayout] = useState<ChildrenLayout>({
+    width: 0,
+    height: 0,
+    y: 0,
+    x: 0,
+  });
+
+  if (!width && !height && !children) {
+    throw new Error(
+      '[Skeleton] You should provide children or specify width and height'
+    );
+  }
+
+  const getChildrenLayout = (event: LayoutChangeEvent) => {
+    setChildrenLayout(event.nativeEvent.layout);
+  };
+
+  return (
+    <Wrapper width={width} height={height} radius={radius} {...rest}>
+      {active && animation === 'wave' ? (
+        <Wave
+          active={active}
+          width={width}
+          height={height}
+          childrenLayout={childrenLayout}
+        />
+      ) : (
+        <Pulse
+          active={active}
+          width={width}
+          height={height}
+          childrenLayout={childrenLayout}
+        />
+      )}
+      <View
+        onLayout={event => getChildrenLayout(event)}
+        style={{ opacity: active ? 0 : 1 }}
+        pointerEvents={active ? 'none' : 'auto'}
+      >
+        {children}
+      </View>
+    </Wrapper>
+  );
+};
+
+export default Skeleton;

package/src/components/atoms/Skeleton/Wave.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { waveAnimation } from './animation';
+import { IAnimationComponent } from './types';
+
+const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
+
+export const Wave = ({
+  active = true,
+  width,
+  height,
+  childrenLayout,
+}: IAnimationComponent) => {
+  const range = width ?? childrenLayout.width;
+  const animatedValue = useRef(new Animated.Value(0)).current;
+
+  const translateX = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-range, range],
+  });
+
+  useEffect(() => {
+    waveAnimation(active, animatedValue);
+  }, [active]);
+
+  return (
+    <AnimatedLinearGradient
+      colors={[
+        'transparent',
+        'rgba(0,0,0,0.05)',
+        'rgba(0,0,0,0.1)',
+        'transparent',
+      ]}
+      start={{ x: 0, y: 0 }}
+      end={{ x: 1, y: 0 }}
+      style={{
+        width: width ?? childrenLayout.width,
+        height: height ?? childrenLayout.height,
+        position: 'absolute',
+        top: childrenLayout.y ?? 0,
+        left: childrenLayout.x ?? 0,
+        zIndex: 2,
+        overflow: 'hidden',
+        transform: [
+          {
+            translateX: translateX,
+          },
+        ],
+      }}
+    />
+  );
+};

package/src/components/atoms/Skeleton/animation.ts

@@ -0,0 +1,49 @@
+import { Animated, Easing } from 'react-native';
+
+export const waveAnimation = (
+  active: boolean,
+  animatedValue: Animated.Value
+): void => {
+  if (active) {
+    Animated.loop(
+      Animated.timing(animatedValue, {
+        toValue: 1,
+        duration: 1600,
+        easing: Easing.inOut(Easing.linear),
+        useNativeDriver: true,
+      })
+    ).start();
+    return;
+  }
+  Animated.timing(animatedValue, {
+    toValue: 0,
+    useNativeDriver: true,
+  }).start();
+};
+
+export const pulseAnimation = (
+  active: boolean,
+  animatedValue: Animated.Value
+): void => {
+  if (active) {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(animatedValue, {
+          toValue: 1,
+          duration: 800,
+          useNativeDriver: true,
+        }),
+        Animated.timing(animatedValue, {
+          toValue: 0,
+          duration: 800,
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
+    return;
+  }
+  Animated.timing(animatedValue, {
+    toValue: 0,
+    useNativeDriver: true,
+  }).start();
+};

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

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

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

@@ -0,0 +1,12 @@
+import styled from '@emotion/native';
+import { RFValueStr, StyleProps } from '@tecsinapse/react-core';
+import { SkeletonProps } from './Skeleton';
+
+export const Wrapper = styled.View<Partial<StyleProps & SkeletonProps>>`
+  width: ${({ width }) => (width ? `${RFValueStr(`${width}px`)}` : '100%')};
+  height: ${({ height }) => (height ? `${RFValueStr(`${height}px`)}` : 'auto')};
+  border-radius: ${({ theme, radius }: StyleProps & Partial<SkeletonProps>) =>
+    radius ? theme.borderRadius[radius] : 0};
+  overflow: hidden;
+  position: relative;
+`;

package/src/components/atoms/Skeleton/types.ts

@@ -0,0 +1,13 @@
+export type ChildrenLayout = {
+  width: number;
+  height: number;
+  x: number;
+  y: number;
+};
+
+export interface IAnimationComponent {
+  width?: number;
+  height?: number;
+  active?: boolean;
+  childrenLayout: ChildrenLayout;
+}

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

@@ -5,6 +5,7 @@ import {
   StyleProps,
   Text,
 } from '@tecsinapse/react-core';
+import { Platform } from 'react-native';
 import { TextNativeProps } from './Text';
 
 export interface Font {
@@ -20,7 +21,7 @@ export const fontStyles = ({
   const fontFamily = theme?.font.stack[fontStack] || '';
   const fontStyle = theme?.font.files[fontWeight];
   return css`
-    font-weight: normal;
+    ${Platform.OS === 'android' ? 'font-weight: normal;' : undefined}
     font-family: ${fontStyle?.replace('{0}', fontFamily)};
   `;
 };

package/src/components/molecules/Calendar/Calendar.tsx

@@ -1,4 +1,4 @@
-import { Calendar as CalendarCore, SelectionType } from '@tecsinapse/react-core';
+import { Calendar as CalendarCore, CalendarProps, SelectionType } from '@tecsinapse/react-core';
 import React from 'react';
 import { getLocale } from '../../../utils/date';
 import { Text } from '../../atoms/Text';
@@ -6,7 +6,7 @@ import { Text } from '../../atoms/Text';
 export const Calendar = <T extends SelectionType>({
   locale,
   ...rest
-}): JSX.Element => {
+}: CalendarProps<T>): JSX.Element => {
   return (
     <CalendarCore
       {...rest}

package/src/components/molecules/DatePicker/DatePicker.tsx

@@ -8,7 +8,9 @@ import { Text } from '../../atoms/Text';
 import { Calendar } from '../Calendar';
 import { CalendarBoxContent } from './styled';
 
-export const DatePicker = <T extends SelectionType>({ locale, onChange, ...rest }: Omit<DatePickerProps<T>, 'CalendarComponent' | 'renderCalendar' | 'requestCloseCalendar' | 'requestShowCalendar'>): JSX.Element => {
+export type NativeDatePickerProps<T extends SelectionType> = Omit<DatePickerProps<T>, 'CalendarComponent' | 'renderCalendar' | 'requestCloseCalendar' | 'requestShowCalendar'>
+
+export const DatePicker = <T extends SelectionType>({ locale, onChange, ...rest }: NativeDatePickerProps<T>): JSX.Element => {
 
   const modal = useLazyModalManager()
   

package/src/components/molecules/DatePicker/index.ts

@@ -1 +1 @@
-export { DatePicker } from './DatePicker';
+export { DatePicker, NativeDatePickerProps } from './DatePicker';

package/src/components/molecules/DateTimePicker/DateTimePicker.tsx

@@ -8,7 +8,9 @@ import { IBaseModal, ModalView, useLazyModalManager } from '../../atoms/Modal';
 import { Text } from '../../atoms/Text';
 import { DateTimeSelector } from '../DateTimeSelector';
 
-export const DateTimePicker: FC<Omit<DateTimePickerProps, 'DateTimeSelectorComponent' | 'renderSelector' | 'requestCloseSelector' | 'requestShowSelector'>> = ({ locale, ...rest }) => {
+export type NativeDateTimePickerProps = Omit<DateTimePickerProps, 'DateTimeSelectorComponent' | 'renderSelector' | 'requestCloseSelector' | 'requestShowSelector'>
+
+export const DateTimePicker: FC<NativeDateTimePickerProps> = ({ locale, ...rest }) => {
 
   const modal = useLazyModalManager()
 

package/src/components/molecules/DateTimePicker/index.ts

@@ -1 +1 @@
-export { DateTimePicker } from './DateTimePicker';
+export { DateTimePicker, NativeDateTimePickerProps } from './DateTimePicker';

package/src/index.ts

@@ -4,7 +4,13 @@ export { Select, SelectNativeProps } from './components/molecules/Select';
 export { Input, InputNativeProps } from './components/atoms/Input';
 export { TextArea, TextAreaProps } from './components/atoms/TextArea';
 export { Text, TextNativeProps } from './components/atoms/Text';
-export { Error, Loading, Success, Button, ButtonNativeProps } from './components/atoms/Button';
+export {
+  Error,
+  Loading,
+  Success,
+  Button,
+  ButtonNativeProps,
+} from './components/atoms/Button';
 export { GroupButtonOption } from './components/atoms/GroupButton';
 export {
   InputPassword,
@@ -21,9 +27,23 @@ export {
 } from './components/atoms/SnappingSlider';
 export { Badge, BadgeNativeProps } from './components/atoms/Badge';
 export { Snackbar, SnackbarNativeProps } from './components/molecules/Snackbar';
-export { DatePicker } from './components/molecules/DatePicker';
-export { DateTimePicker } from './components/molecules/DateTimePicker';
+export {
+  DatePicker,
+  NativeDatePickerProps,
+} from './components/molecules/DatePicker';
+export {
+  DateTimePicker,
+  NativeDateTimePickerProps,
+} from './components/molecules/DateTimePicker';
 export { Avatar } from './components/atoms/Avatar';
 export { Calendar } from './components/molecules/Calendar';
 export { DateTimeSelector } from './components/molecules/DateTimeSelector';
-export { ModalGroupManager, ModalView, ModalLifecycleHandler, useLazyModalManager, useModalManager, IBaseModal } from './components/atoms/Modal';
+export {
+  ModalGroupManager,
+  ModalView,
+  ModalLifecycleHandler,
+  useLazyModalManager,
+  useModalManager,
+  IBaseModal,
+} from './components/atoms/Modal';
+export { Skeleton, SkeletonProps } from './components/atoms/Skeleton';