@react-native-ohos/native-base 3.4.29-rc.1

package/lib/commonjs/components/composites/Popper/Popper.js

@@ -0,0 +1,276 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Popper = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _overlays = require("@react-native-aria/overlays");
+
+var _reactNative = require("react-native");
+
+var _utils = require("../../../utils");
+
+var _Box = _interopRequireDefault(require("../../primitives/Box"));
+
+var _useHasResponsiveProps = require("../../../hooks/useHasResponsiveProps");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 defaultArrowHeight = 15;
+const defaultArrowWidth = 15;
+
+const getDiagonalLength = (height, width) => {
+  return Math.pow(height * height + width * width, 0.5);
+};
+
+const [PopperProvider, usePopperContext] = (0, _utils.createContext)('PopperContext');
+
+const Popper = props => {
+  return /*#__PURE__*/_react.default.createElement(PopperProvider, props, props.children);
+};
+
+exports.Popper = Popper;
+
+const PopperContent = /*#__PURE__*/_react.default.forwardRef(({
+  children,
+  style,
+  ...rest
+}, ref) => {
+  const {
+    triggerRef,
+    shouldFlip,
+    crossOffset,
+    offset,
+    placement: placementProp,
+    onClose,
+    shouldOverlapWithTrigger,
+    setOverlayRef
+  } = usePopperContext('PopperContent');
+
+  const overlayRef = _react.default.useRef(null); // const { top } = useSafeAreaInsets();
+
+
+  const {
+    overlayProps,
+    rendered,
+    arrowProps,
+    placement
+  } = (0, _overlays.useOverlayPosition)({
+    targetRef: triggerRef,
+    overlayRef,
+    shouldFlip: shouldFlip,
+    crossOffset: crossOffset,
+    isOpen: rest.isOpen,
+    offset: offset,
+    placement: placementProp,
+    containerPadding: 0,
+    onClose: onClose,
+    shouldOverlapWithTrigger
+  });
+  const restElements = [];
+  let arrowElement = null;
+
+  _react.default.useEffect(() => {
+    setOverlayRef && setOverlayRef(overlayRef);
+  }, [overlayRef, setOverlayRef]); // Might have performance impact if there are a lot of siblings!
+  // Shouldn't be an issue with popovers since it would have atmost 2. Arrow and Content.
+
+
+  _react.default.Children.forEach(children, child => {
+    if ( /*#__PURE__*/_react.default.isValidElement(child) && // @ts-ignore
+    child.type.displayName === 'PopperArrow') {
+      arrowElement = /*#__PURE__*/_react.default.cloneElement(child, {
+        // @ts-ignore
+        arrowProps,
+        actualPlacement: placement
+      });
+    } else {
+      restElements.push(child);
+    }
+  });
+
+  let arrowHeight = 0;
+  let arrowWidth = 0;
+
+  if (arrowElement) {
+    arrowHeight = defaultArrowHeight;
+    arrowWidth = defaultArrowWidth; //@ts-ignore
+
+    if (arrowElement.props.height) {
+      //@ts-ignore
+      arrowHeight = arrowElement.props.height;
+    } //@ts-ignore
+
+
+    if (arrowElement.props.width) {
+      //@ts-ignore
+      arrowWidth = arrowElement.props.width;
+    }
+  }
+
+  const containerStyle = _react.default.useMemo(() => getContainerStyle({
+    placement,
+    arrowHeight,
+    arrowWidth
+  }), [arrowHeight, arrowWidth, placement]);
+
+  const overlayStyle = _react.default.useMemo(() => _reactNative.StyleSheet.create({
+    overlay: { ...overlayProps.style,
+      // To handle translucent android StatusBar
+      // marginTop: Platform.select({ android: top, default: 0 }),
+      opacity: rendered ? 1 : 0,
+      position: 'absolute'
+    }
+  }), [rendered, overlayProps.style]); //TODO: refactor for responsive prop
+
+
+  if ((0, _useHasResponsiveProps.useHasResponsiveProps)(rest)) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    ref: overlayRef,
+    collapsable: false,
+    style: overlayStyle.overlay
+  }, arrowElement, /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    style: _reactNative.StyleSheet.flatten([containerStyle, style])
+  }, rest, {
+    ref: ref
+  }), restElements));
+}); // This is an internal implementation of PopoverArrow
+
+
+const PopperArrow = /*#__PURE__*/_react.default.forwardRef(({
+  height = defaultArrowHeight,
+  width = defaultArrowWidth,
+  //@ts-ignore - Will be passed by React.cloneElement from PopperContent
+  arrowProps,
+  //@ts-ignore - Will be passed by React.cloneElement from PopperContent
+  actualPlacement,
+  style,
+  borderColor = '#52525b',
+  backgroundColor = 'black',
+  ...rest
+}, ref) => {
+  const additionalStyles = _react.default.useMemo(() => getArrowStyles({
+    placement: actualPlacement,
+    height,
+    width
+  }), [actualPlacement, height, width]);
+
+  const triangleStyle = _react.default.useMemo(() => ({
+    position: 'absolute',
+    width,
+    height
+  }), [width, height]);
+
+  const arrowStyles = _react.default.useMemo(() => [arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.style, triangleStyle, additionalStyles, style], [triangleStyle, additionalStyles, arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.style, style]);
+
+  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    ref: ref,
+    style: arrowStyles,
+    borderColor: borderColor,
+    backgroundColor: backgroundColor,
+    zIndex: 1
+  }, rest));
+});
+
+const getArrowStyles = props => {
+  const additionalStyles = {
+    transform: []
+  };
+  const diagonalLength = getDiagonalLength(defaultArrowHeight, defaultArrowHeight);
+
+  if (props.placement === 'top' && props.width) {
+    additionalStyles.transform.push({
+      translateX: -props.width / 2
+    });
+    additionalStyles.transform.push({
+      rotate: '45deg'
+    });
+    additionalStyles.bottom = Math.ceil((diagonalLength - defaultArrowHeight) / 2);
+    additionalStyles.borderBottomWidth = 1;
+    additionalStyles.borderRightWidth = 1;
+  }
+
+  if (props.placement === 'bottom' && props.width) {
+    additionalStyles.transform.push({
+      translateX: -props.width / 2
+    });
+    additionalStyles.transform.push({
+      rotate: '45deg'
+    });
+    additionalStyles.top = Math.ceil((diagonalLength - defaultArrowHeight) / 2);
+    additionalStyles.borderTopWidth = 1;
+    additionalStyles.borderLeftWidth = 1;
+  }
+
+  if (props.placement === 'left' && props.height) {
+    additionalStyles.transform.push({
+      translateY: -props.height / 2
+    });
+    additionalStyles.transform.push({
+      rotate: '45deg'
+    });
+    additionalStyles.right = Math.ceil((diagonalLength - defaultArrowHeight) / 2);
+    additionalStyles.borderTopWidth = 1;
+    additionalStyles.borderRightWidth = 1;
+  }
+
+  if (props.placement === 'right' && props.height) {
+    additionalStyles.transform.push({
+      translateY: -props.height / 2
+    });
+    additionalStyles.transform.push({
+      rotate: '45deg'
+    });
+    additionalStyles.left = Math.ceil((diagonalLength - defaultArrowHeight) / 2);
+    additionalStyles.borderBottomWidth = 1;
+    additionalStyles.borderLeftWidth = 1;
+  }
+
+  return additionalStyles;
+};
+
+const getContainerStyle = ({
+  placement,
+  arrowHeight
+}) => {
+  const diagonalLength = getDiagonalLength(arrowHeight, arrowHeight) / 2;
+
+  if (placement === 'top') {
+    return {
+      marginBottom: diagonalLength
+    };
+  }
+
+  if (placement === 'bottom') {
+    return {
+      marginTop: diagonalLength
+    };
+  }
+
+  if (placement === 'left') {
+    return {
+      marginRight: diagonalLength
+    };
+  }
+
+  if (placement === 'right') {
+    return {
+      marginLeft: diagonalLength
+    };
+  }
+
+  return {};
+};
+
+PopperArrow.displayName = 'PopperArrow';
+Popper.Content = PopperContent;
+Popper.Arrow = PopperArrow;
+//# sourceMappingURL=Popper.js.map

package/lib/commonjs/components/composites/Popper/Popper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Popper.tsx"],"names":["defaultArrowHeight","defaultArrowWidth","getDiagonalLength","height","width","Math","pow","PopperProvider","usePopperContext","Popper","props","children","PopperContent","React","forwardRef","style","rest","ref","triggerRef","shouldFlip","crossOffset","offset","placement","placementProp","onClose","shouldOverlapWithTrigger","setOverlayRef","overlayRef","useRef","overlayProps","rendered","arrowProps","targetRef","isOpen","containerPadding","restElements","arrowElement","useEffect","Children","forEach","child","isValidElement","type","displayName","cloneElement","actualPlacement","push","arrowHeight","arrowWidth","containerStyle","useMemo","getContainerStyle","overlayStyle","StyleSheet","create","overlay","opacity","position","flatten","PopperArrow","borderColor","backgroundColor","additionalStyles","getArrowStyles","triangleStyle","arrowStyles","transform","diagonalLength","translateX","rotate","bottom","ceil","borderBottomWidth","borderRightWidth","top","borderTopWidth","borderLeftWidth","translateY","right","left","marginBottom","marginTop","marginRight","marginLeft","Content","Arrow"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport { useOverlayPosition } from '@react-native-aria/overlays';\r\nimport { StyleSheet, View, ViewStyle } from 'react-native';\r\nimport type {\r\n  IPopperProps,\r\n  IScrollContentStyle,\r\n  IArrowStyles,\r\n  IPopoverArrowProps,\r\n} from './types';\r\nimport { createContext } from '../../../utils';\r\nimport Box, { IBoxProps } from '../../primitives/Box';\r\n// import { useSafeAreaInsets } from 'react-native-safe-area-context';\r\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\r\n\r\nconst defaultArrowHeight = 15;\r\nconst defaultArrowWidth = 15;\r\n\r\nconst getDiagonalLength = (height: number, width: number) => {\r\n  return Math.pow(height * height + width * width, 0.5);\r\n};\r\n\r\ntype PopperContext = IPopperProps & {\r\n  triggerRef: any;\r\n  onClose: any;\r\n  setOverlayRef?: (overlayRef: any) => void;\r\n};\r\n\r\nconst [PopperProvider, usePopperContext] = createContext<PopperContext>(\r\n  'PopperContext'\r\n);\r\n\r\nconst Popper = (\r\n  props: IPopperProps & {\r\n    triggerRef: any;\r\n    onClose: any;\r\n    setOverlayRef?: (overlayRef: any) => void;\r\n  }\r\n) => {\r\n  return <PopperProvider {...props}>{props.children}</PopperProvider>;\r\n};\r\n\r\nconst PopperContent = React.forwardRef(\r\n  ({ children, style, ...rest }: IBoxProps & { isOpen: boolean }, ref: any) => {\r\n    const {\r\n      triggerRef,\r\n      shouldFlip,\r\n      crossOffset,\r\n      offset,\r\n      placement: placementProp,\r\n      onClose,\r\n      shouldOverlapWithTrigger,\r\n      setOverlayRef,\r\n    } = usePopperContext('PopperContent');\r\n    const overlayRef = React.useRef(null);\r\n\r\n    // const { top } = useSafeAreaInsets();\r\n    const {\r\n      overlayProps,\r\n      rendered,\r\n      arrowProps,\r\n      placement,\r\n    } = useOverlayPosition({\r\n      targetRef: triggerRef,\r\n      overlayRef,\r\n      shouldFlip: shouldFlip,\r\n      crossOffset: crossOffset,\r\n      isOpen: rest.isOpen,\r\n      offset: offset,\r\n      placement: placementProp as any,\r\n      containerPadding: 0,\r\n      onClose: onClose,\r\n      shouldOverlapWithTrigger,\r\n    });\r\n\r\n    const restElements: React.ReactNode[] = [];\r\n    let arrowElement: React.ReactElement | null = null;\r\n\r\n    React.useEffect(() => {\r\n      setOverlayRef && setOverlayRef(overlayRef);\r\n    }, [overlayRef, setOverlayRef]);\r\n\r\n    // Might have performance impact if there are a lot of siblings!\r\n    // Shouldn't be an issue with popovers since it would have atmost 2. Arrow and Content.\r\n    React.Children.forEach(children, (child) => {\r\n      if (\r\n        React.isValidElement(child) &&\r\n        // @ts-ignore\r\n        child.type.displayName === 'PopperArrow'\r\n      ) {\r\n        arrowElement = React.cloneElement(child, {\r\n          // @ts-ignore\r\n          arrowProps,\r\n          actualPlacement: placement,\r\n        });\r\n      } else {\r\n        restElements.push(child);\r\n      }\r\n    });\r\n\r\n    let arrowHeight = 0;\r\n    let arrowWidth = 0;\r\n\r\n    if (arrowElement) {\r\n      arrowHeight = defaultArrowHeight;\r\n      arrowWidth = defaultArrowWidth;\r\n\r\n      //@ts-ignore\r\n      if (arrowElement.props.height) {\r\n        //@ts-ignore\r\n        arrowHeight = arrowElement.props.height;\r\n      }\r\n\r\n      //@ts-ignore\r\n      if (arrowElement.props.width) {\r\n        //@ts-ignore\r\n        arrowWidth = arrowElement.props.width;\r\n      }\r\n    }\r\n\r\n    const containerStyle = React.useMemo(\r\n      () =>\r\n        getContainerStyle({\r\n          placement,\r\n          arrowHeight,\r\n          arrowWidth,\r\n        }),\r\n      [arrowHeight, arrowWidth, placement]\r\n    );\r\n\r\n    const overlayStyle = React.useMemo(\r\n      () =>\r\n        StyleSheet.create({\r\n          overlay: {\r\n            ...overlayProps.style,\r\n            // To handle translucent android StatusBar\r\n            // marginTop: Platform.select({ android: top, default: 0 }),\r\n            opacity: rendered ? 1 : 0,\r\n            position: 'absolute',\r\n          },\r\n        }),\r\n      [rendered, overlayProps.style]\r\n    );\r\n    //TODO: refactor for responsive prop\r\n    if (useHasResponsiveProps(rest)) {\r\n      return null;\r\n    }\r\n\r\n    return (\r\n      <View ref={overlayRef} collapsable={false} style={overlayStyle.overlay}>\r\n        {arrowElement}\r\n        <Box\r\n          style={StyleSheet.flatten([containerStyle, style])}\r\n          {...rest}\r\n          ref={ref}\r\n        >\r\n          {restElements}\r\n        </Box>\r\n      </View>\r\n    );\r\n  }\r\n);\r\n\r\n// This is an internal implementation of PopoverArrow\r\nconst PopperArrow = React.forwardRef(\r\n  (\r\n    {\r\n      height = defaultArrowHeight,\r\n      width = defaultArrowWidth,\r\n\r\n      //@ts-ignore - Will be passed by React.cloneElement from PopperContent\r\n      arrowProps,\r\n      //@ts-ignore - Will be passed by React.cloneElement from PopperContent\r\n      actualPlacement,\r\n      style,\r\n      borderColor = '#52525b',\r\n      backgroundColor = 'black',\r\n      ...rest\r\n    }: IPopoverArrowProps & IBoxProps<IPopoverArrowProps>,\r\n    ref: any\r\n  ) => {\r\n    const additionalStyles = React.useMemo(\r\n      () => getArrowStyles({ placement: actualPlacement, height, width }),\r\n      [actualPlacement, height, width]\r\n    );\r\n\r\n    const triangleStyle: ViewStyle = React.useMemo(\r\n      () => ({\r\n        position: 'absolute',\r\n        width,\r\n        height,\r\n      }),\r\n      [width, height]\r\n    );\r\n\r\n    const arrowStyles = React.useMemo(\r\n      () => [arrowProps?.style, triangleStyle, additionalStyles, style],\r\n      [triangleStyle, additionalStyles, arrowProps?.style, style]\r\n    );\r\n\r\n    return (\r\n      <Box\r\n        ref={ref}\r\n        style={arrowStyles}\r\n        borderColor={borderColor}\r\n        backgroundColor={backgroundColor}\r\n        zIndex={1}\r\n        {...rest}\r\n      />\r\n    );\r\n  }\r\n);\r\n\r\nconst getArrowStyles = (props: IArrowStyles) => {\r\n  const additionalStyles: any = {\r\n    transform: [],\r\n  };\r\n\r\n  const diagonalLength = getDiagonalLength(\r\n    defaultArrowHeight,\r\n    defaultArrowHeight\r\n  );\r\n\r\n  if (props.placement === 'top' && props.width) {\r\n    additionalStyles.transform.push({ translateX: -props.width / 2 });\r\n    additionalStyles.transform.push({ rotate: '45deg' });\r\n    additionalStyles.bottom = Math.ceil(\r\n      (diagonalLength - defaultArrowHeight) / 2\r\n    );\r\n    additionalStyles.borderBottomWidth = 1;\r\n    additionalStyles.borderRightWidth = 1;\r\n  }\r\n\r\n  if (props.placement === 'bottom' && props.width) {\r\n    additionalStyles.transform.push({ translateX: -props.width / 2 });\r\n    additionalStyles.transform.push({ rotate: '45deg' });\r\n    additionalStyles.top = Math.ceil((diagonalLength - defaultArrowHeight) / 2);\r\n    additionalStyles.borderTopWidth = 1;\r\n    additionalStyles.borderLeftWidth = 1;\r\n  }\r\n\r\n  if (props.placement === 'left' && props.height) {\r\n    additionalStyles.transform.push({ translateY: -props.height / 2 });\r\n    additionalStyles.transform.push({ rotate: '45deg' });\r\n    additionalStyles.right = Math.ceil(\r\n      (diagonalLength - defaultArrowHeight) / 2\r\n    );\r\n    additionalStyles.borderTopWidth = 1;\r\n    additionalStyles.borderRightWidth = 1;\r\n  }\r\n\r\n  if (props.placement === 'right' && props.height) {\r\n    additionalStyles.transform.push({ translateY: -props.height / 2 });\r\n    additionalStyles.transform.push({ rotate: '45deg' });\r\n    additionalStyles.left = Math.ceil(\r\n      (diagonalLength - defaultArrowHeight) / 2\r\n    );\r\n    additionalStyles.borderBottomWidth = 1;\r\n    additionalStyles.borderLeftWidth = 1;\r\n  }\r\n\r\n  return additionalStyles;\r\n};\r\n\r\nconst getContainerStyle = ({ placement, arrowHeight }: IScrollContentStyle) => {\r\n  const diagonalLength = getDiagonalLength(arrowHeight, arrowHeight) / 2;\r\n\r\n  if (placement === 'top') {\r\n    return { marginBottom: diagonalLength };\r\n  }\r\n\r\n  if (placement === 'bottom') {\r\n    return { marginTop: diagonalLength };\r\n  }\r\n\r\n  if (placement === 'left') {\r\n    return { marginRight: diagonalLength };\r\n  }\r\n\r\n  if (placement === 'right') {\r\n    return { marginLeft: diagonalLength };\r\n  }\r\n\r\n  return {};\r\n};\r\n\r\nPopperArrow.displayName = 'PopperArrow';\r\nPopper.Content = PopperContent;\r\nPopper.Arrow = PopperArrow;\r\n\r\nexport { Popper };\r\n"]}

package/lib/commonjs/components/composites/Popper/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Popper", {
+  enumerable: true,
+  get: function () {
+    return _Popper.Popper;
+  }
+});
+
+var _Popper = require("./Popper");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/composites/Popper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA","sourcesContent":["export { Popper } from './Popper';\r\n"]}

package/lib/commonjs/components/composites/Popper/types.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=types.js.map

package/lib/commonjs/components/composites/Popper/types.js.map

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

package/lib/commonjs/components/composites/Progress/index.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _primitives = require("../../primitives");
+
+var _useThemeProps = require("../../../hooks/useThemeProps");
+
+var _useHasResponsiveProps = require("../../../hooks/useHasResponsiveProps");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 Progress = (props, ref) => {
+  const {
+    min,
+    max,
+    value,
+    _filledTrack,
+    children,
+    ...resolvedProps
+  } = (0, _useThemeProps.usePropsResolution)('Progress', props); //TODO: refactor for responsive prop
+
+  if ((0, _useHasResponsiveProps.useHasResponsiveProps)(props)) {
+    return null;
+  }
+
+  let valueWidth = value < max && value > min ? (value - min) / (max - min) * 100 : value > min ? 100 : 0;
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, _extends({}, resolvedProps, {
+    ref: ref,
+    accessible: true,
+    accessibilityRole: "progressbar",
+    accessibilityValue: {
+      min: min,
+      max: max,
+      now: valueWidth
+    }
+  }), /*#__PURE__*/_react.default.createElement(_primitives.Box, _extends({
+    w: "".concat(valueWidth, "%")
+  }, _filledTrack), children));
+};
+
+var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(Progress));
+
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/composites/Progress/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":["Progress","props","ref","min","max","value","_filledTrack","children","resolvedProps","valueWidth","now"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;AA+CA,MAAMA,QAAQ,GAAG,CAACC,KAAD,EAAwBC,GAAxB,KAAsC;AACrD,QAAM;AACJC,IAAAA,GADI;AAEJC,IAAAA,GAFI;AAGJC,IAAAA,KAHI;AAIJC,IAAAA,YAJI;AAKJC,IAAAA,QALI;AAMJ,OAAGC;AANC,MAOF,uCAAmB,UAAnB,EAA+BP,KAA/B,CAPJ,CADqD,CAUrD;;AACA,MAAI,kDAAsBA,KAAtB,CAAJ,EAAkC;AAChC,WAAO,IAAP;AACD;;AAED,MAAIQ,UAAU,GACZJ,KAAK,GAAGD,GAAR,IAAeC,KAAK,GAAGF,GAAvB,GACK,CAACE,KAAK,GAAGF,GAAT,KAAiBC,GAAG,GAAGD,GAAvB,CAAD,GAAgC,GADpC,GAEIE,KAAK,GAAGF,GAAR,GACA,GADA,GAEA,CALN;AAOA,sBACE,6BAAC,eAAD,eACMK,aADN;AAEE,IAAA,GAAG,EAAEN,GAFP;AAGE,IAAA,UAAU,MAHZ;AAIE,IAAA,iBAAiB,EAAC,aAJpB;AAKE,IAAA,kBAAkB,EAAE;AAClBC,MAAAA,GAAG,EAAEA,GADa;AAElBC,MAAAA,GAAG,EAAEA,GAFa;AAGlBM,MAAAA,GAAG,EAAED;AAHa;AALtB,mBAWE,6BAAC,eAAD;AAAK,IAAA,CAAC,YAAKA,UAAL;AAAN,KAA8BH,YAA9B,GACGC,QADH,CAXF,CADF;AAiBD,CAvCD;;4BAyCe,+BAAK,uBAAWP,QAAX,CAAL,C","sourcesContent":["import React, { memo, forwardRef } from 'react';\r\nimport { Box } from '../../primitives';\r\nimport type { InterfaceBoxProps } from '../../primitives/Box';\r\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\r\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\r\nimport type { ColorSchemeType } from '../../../components/types';\r\nimport type {\r\n  CustomProps,\r\n  ThemeComponentSizeType,\r\n} from '../../../components/types';\r\n\r\nexport interface InterfaceProgressProps\r\n  extends InterfaceBoxProps<IProgressProps> {\r\n  /**\r\n   * Value of Progress.\r\n   * @default 0\r\n   */\r\n  value?: number;\r\n  /**\r\n   * Defines height of Progress\r\n   * @default sm\r\n   */\r\n  size?: ThemeComponentSizeType<'Progress'>;\r\n\r\n  /**\r\n   * The color scheme of the progress. This should be one of the color keys in the theme (e.g.\"green\", \"red\").\r\n   * @default primary\r\n   */\r\n  colorScheme?: ColorSchemeType;\r\n  // /**\r\n  //  * Whether progress is indeterminate\r\n  //  * @default false\r\n  //  */\r\n  // isIndeterminate?: boolean;\r\n  /**\r\n   * Pseudo prop to give Prop to filled track\r\n   */\r\n  _filledTrack?: InterfaceBoxProps<IProgressProps>;\r\n  /**\r\n   * Min progress value\r\n   * @default 0\r\n   */\r\n  min?: number;\r\n  /**\r\n   * Max progress value\r\n   * @default 100\r\n   */\r\n  max?: number;\r\n}\r\n\r\nexport type IProgressProps = InterfaceProgressProps & CustomProps<'Progress'>;\r\nconst Progress = (props: IProgressProps, ref?: any) => {\r\n  const {\r\n    min,\r\n    max,\r\n    value,\r\n    _filledTrack,\r\n    children,\r\n    ...resolvedProps\r\n  } = usePropsResolution('Progress', props);\r\n\r\n  //TODO: refactor for responsive prop\r\n  if (useHasResponsiveProps(props)) {\r\n    return null;\r\n  }\r\n\r\n  let valueWidth =\r\n    value < max && value > min\r\n      ? ((value - min) / (max - min)) * 100\r\n      : value > min\r\n      ? 100\r\n      : 0;\r\n\r\n  return (\r\n    <Box\r\n      {...resolvedProps}\r\n      ref={ref}\r\n      accessible\r\n      accessibilityRole=\"progressbar\"\r\n      accessibilityValue={{\r\n        min: min,\r\n        max: max,\r\n        now: valueWidth,\r\n      }}\r\n    >\r\n      <Box w={`${valueWidth}%`} {..._filledTrack}>\r\n        {children}\r\n      </Box>\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default memo(forwardRef(Progress));\r\n"]}

package/lib/commonjs/components/composites/SimpleGrid/SimpleGrid.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _primitives = require("../../primitives");
+
+var _useThemeProps = require("../../../hooks/useThemeProps");
+
+var _useHasResponsiveProps = require("../../../hooks/useHasResponsiveProps");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 DEBUG_STYLES = false ? {
+  rows: {
+    borderWidth: '1px'
+  },
+  cols: {
+    borderWidth: '1px'
+  }
+} : {
+  rows: {},
+  cols: {}
+};
+
+const SimpleGrid = (props, ref) => {
+  const {
+    columns,
+    space,
+    spacingX,
+    spacingY,
+    minChildWidth,
+    children,
+    ...remainingProps
+  } = (0, _useThemeProps.useThemeProps)('SimpleGrid', props); //TODO: refactor for responsive prop
+
+  if ((0, _useHasResponsiveProps.useHasResponsiveProps)(props)) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+  }
+
+  let cellSpacing = space !== null && space !== void 0 ? space : 0;
+  let cellSpacingX = spacingX !== null && spacingX !== void 0 ? spacingX : cellSpacing;
+  let cellSpacingY = spacingY !== null && spacingY !== void 0 ? spacingY : cellSpacing;
+
+  const childrenArray = _react.default.Children.toArray(children);
+
+  if (columns) {
+    let rowSlices = [];
+
+    for (let i = 0; i < childrenArray.length; i = i + columns) {
+      rowSlices.push(childrenArray.slice(i, i + columns));
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_primitives.VStack, _extends({}, DEBUG_STYLES.rows, {
+      space: cellSpacingY
+    }, remainingProps, {
+      ref: ref
+    }), rowSlices.map((row, rowIndex) => {
+      return /*#__PURE__*/_react.default.createElement(_primitives.HStack, {
+        space: cellSpacingX,
+        key: rowIndex
+      }, row.map(col => {
+        return /*#__PURE__*/_react.default.createElement(_primitives.Box, _extends({}, DEBUG_STYLES.cols, {
+          key: col.key
+        }), col);
+      }));
+    }));
+  } // Needs more work for empty spacing i.e. auto-fit. Current workaround is to use wrap and let the columns be created dynamically
+  // https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/
+  else if (minChildWidth) {
+      return /*#__PURE__*/_react.default.createElement(_primitives.Box, _extends({
+        flexDirection: "row",
+        flexWrap: "wrap",
+        justifyContent: "center"
+      }, remainingProps, {
+        ref: ref
+      }), childrenArray.map(col => {
+        return /*#__PURE__*/_react.default.createElement(_primitives.Box, _extends({}, DEBUG_STYLES.cols, {
+          mx: cellSpacingX,
+          my: cellSpacingY,
+          key: col.key,
+          minWidth: minChildWidth
+        }), col);
+      }));
+    }
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+};
+
+var _default = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(SimpleGrid));
+
+exports.default = _default;
+//# sourceMappingURL=SimpleGrid.js.map

package/lib/commonjs/components/composites/SimpleGrid/SimpleGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SimpleGrid.tsx"],"names":["DEBUG_STYLES","rows","borderWidth","cols","SimpleGrid","props","ref","columns","space","spacingX","spacingY","minChildWidth","children","remainingProps","cellSpacing","cellSpacingX","cellSpacingY","childrenArray","React","Children","toArray","rowSlices","i","length","push","slice","map","row","rowIndex","col","key","memo","forwardRef"],"mappings":";;;;;;;AAAA;;AACA;;AAGA;;AACA;;;;;;AAEA,MAAMA,YAAY,GAAG,QACjB;AACEC,EAAAA,IAAI,EAAE;AACJC,IAAAA,WAAW,EAAE;AADT,GADR;AAIEC,EAAAA,IAAI,EAAE;AACJD,IAAAA,WAAW,EAAE;AADT;AAJR,CADiB,GASjB;AACED,EAAAA,IAAI,EAAE,EADR;AAEEE,EAAAA,IAAI,EAAE;AAFR,CATJ;;AAcA,MAAMC,UAAU,GAAG,CAACC,KAAD,EAA0BC,GAA1B,KAAqD;AACtE,QAAM;AACJC,IAAAA,OADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA,QAHI;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,aALI;AAMJC,IAAAA,QANI;AAOJ,OAAGC;AAPC,MAQF,kCAAc,YAAd,EAA4BR,KAA5B,CARJ,CADsE,CAUtE;;AACA,MAAI,kDAAsBA,KAAtB,CAAJ,EAAkC;AAChC,wBAAO,2DAAP;AACD;;AACD,MAAIS,WAAW,GAAGN,KAAH,aAAGA,KAAH,cAAGA,KAAH,GAAY,CAA3B;AACA,MAAIO,YAAY,GAAGN,QAAH,aAAGA,QAAH,cAAGA,QAAH,GAAeK,WAA/B;AACA,MAAIE,YAAY,GAAGN,QAAH,aAAGA,QAAH,cAAGA,QAAH,GAAeI,WAA/B;;AAEA,QAAMG,aAAa,GAAGC,eAAMC,QAAN,CAAeC,OAAf,CAAuBR,QAAvB,CAAtB;;AAEA,MAAIL,OAAJ,EAAa;AACX,QAAIc,SAAS,GAAG,EAAhB;;AACA,SAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGL,aAAa,CAACM,MAAlC,EAA0CD,CAAC,GAAGA,CAAC,GAAGf,OAAlD,EAA2D;AACzDc,MAAAA,SAAS,CAACG,IAAV,CAAeP,aAAa,CAACQ,KAAd,CAAoBH,CAApB,EAAuBA,CAAC,GAAGf,OAA3B,CAAf;AACD;;AAED,wBACE,6BAAC,kBAAD,eACMP,YAAY,CAACC,IADnB;AAEE,MAAA,KAAK,EAAEe;AAFT,OAGMH,cAHN;AAIE,MAAA,GAAG,EAAEP;AAJP,QAMGe,SAAS,CAACK,GAAV,CAAc,CAACC,GAAD,EAAMC,QAAN,KAAmB;AAChC,0BACE,6BAAC,kBAAD;AAAQ,QAAA,KAAK,EAAEb,YAAf;AAA6B,QAAA,GAAG,EAAEa;AAAlC,SACGD,GAAG,CAACD,GAAJ,CAASG,GAAD,IAAc;AACrB,4BACE,6BAAC,eAAD,eAAS7B,YAAY,CAACG,IAAtB;AAA4B,UAAA,GAAG,EAAE0B,GAAG,CAACC;AAArC,YACGD,GADH,CADF;AAKD,OANA,CADH,CADF;AAWD,KAZA,CANH,CADF;AAsBD,GA5BD,CA6BA;AACA;AA9BA,OA+BK,IAAIlB,aAAJ,EAAmB;AACtB,0BACE,6BAAC,eAAD;AACE,QAAA,aAAa,EAAC,KADhB;AAEE,QAAA,QAAQ,EAAC,MAFX;AAGE,QAAA,cAAc,EAAC;AAHjB,SAIME,cAJN;AAKE,QAAA,GAAG,EAAEP;AALP,UAOGW,aAAa,CAACS,GAAd,CAAmBG,GAAD,IAAc;AAC/B,4BACE,6BAAC,eAAD,eACM7B,YAAY,CAACG,IADnB;AAEE,UAAA,EAAE,EAAEY,YAFN;AAGE,UAAA,EAAE,EAAEC,YAHN;AAIE,UAAA,GAAG,EAAEa,GAAG,CAACC,GAJX;AAKE,UAAA,QAAQ,EAAEnB;AALZ,YAOGkB,GAPH,CADF;AAWD,OAZA,CAPH,CADF;AAuBD;;AAED,sBAAO,2DAAP;AACD,CA9ED;;4BA+EeX,eAAMa,IAAN,eAAWb,eAAMc,UAAN,CAAiB5B,UAAjB,CAAX,C","sourcesContent":["import React from 'react';\r\nimport { Box, HStack, VStack } from '../../primitives';\r\nimport type { ISimpleGridProps } from './types';\r\n// const isDebug = process.env.NODE_ENV !== 'production';\r\nimport { useThemeProps } from '../../../hooks/useThemeProps';\r\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\r\n\r\nconst DEBUG_STYLES = false\r\n  ? {\r\n      rows: {\r\n        borderWidth: '1px',\r\n      },\r\n      cols: {\r\n        borderWidth: '1px',\r\n      },\r\n    }\r\n  : {\r\n      rows: {},\r\n      cols: {},\r\n    };\r\n\r\nconst SimpleGrid = (props: ISimpleGridProps, ref?: any): JSX.Element => {\r\n  const {\r\n    columns,\r\n    space,\r\n    spacingX,\r\n    spacingY,\r\n    minChildWidth,\r\n    children,\r\n    ...remainingProps\r\n  } = useThemeProps('SimpleGrid', props);\r\n  //TODO: refactor for responsive prop\r\n  if (useHasResponsiveProps(props)) {\r\n    return <></>;\r\n  }\r\n  let cellSpacing = space ?? 0;\r\n  let cellSpacingX = spacingX ?? cellSpacing;\r\n  let cellSpacingY = spacingY ?? cellSpacing;\r\n\r\n  const childrenArray = React.Children.toArray(children);\r\n\r\n  if (columns) {\r\n    let rowSlices = [];\r\n    for (let i = 0; i < childrenArray.length; i = i + columns) {\r\n      rowSlices.push(childrenArray.slice(i, i + columns));\r\n    }\r\n\r\n    return (\r\n      <VStack\r\n        {...DEBUG_STYLES.rows}\r\n        space={cellSpacingY}\r\n        {...remainingProps}\r\n        ref={ref}\r\n      >\r\n        {rowSlices.map((row, rowIndex) => {\r\n          return (\r\n            <HStack space={cellSpacingX} key={rowIndex}>\r\n              {row.map((col: any) => {\r\n                return (\r\n                  <Box {...DEBUG_STYLES.cols} key={col.key}>\r\n                    {col}\r\n                  </Box>\r\n                );\r\n              })}\r\n            </HStack>\r\n          );\r\n        })}\r\n      </VStack>\r\n    );\r\n  }\r\n  // Needs more work for empty spacing i.e. auto-fit. Current workaround is to use wrap and let the columns be created dynamically\r\n  // https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/\r\n  else if (minChildWidth) {\r\n    return (\r\n      <Box\r\n        flexDirection=\"row\"\r\n        flexWrap=\"wrap\"\r\n        justifyContent=\"center\"\r\n        {...remainingProps}\r\n        ref={ref}\r\n      >\r\n        {childrenArray.map((col: any) => {\r\n          return (\r\n            <Box\r\n              {...DEBUG_STYLES.cols}\r\n              mx={cellSpacingX}\r\n              my={cellSpacingY}\r\n              key={col.key}\r\n              minWidth={minChildWidth}\r\n            >\r\n              {col}\r\n            </Box>\r\n          );\r\n        })}\r\n      </Box>\r\n    );\r\n  }\r\n\r\n  return <></>;\r\n};\r\nexport default React.memo(React.forwardRef(SimpleGrid));\r\n"]}

package/lib/commonjs/components/composites/SimpleGrid/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SimpleGrid", {
+  enumerable: true,
+  get: function () {
+    return _SimpleGrid.default;
+  }
+});
+
+var _SimpleGrid = _interopRequireDefault(require("./SimpleGrid"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/composites/SimpleGrid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA","sourcesContent":["export { default as SimpleGrid } from './SimpleGrid';\r\nexport type { ISimpleGridProps } from './types';\r\n"]}

package/lib/commonjs/components/composites/SimpleGrid/types.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=types.js.map

package/lib/commonjs/components/composites/SimpleGrid/types.js.map

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

package/lib/commonjs/components/composites/Skeleton/Skeleton.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _hooks = require("../../../hooks");
+
+var _utils = require("../../../utils");
+
+var _Box = _interopRequireDefault(require("../../primitives/Box"));
+
+var _useHasResponsiveProps = require("../../../hooks/useHasResponsiveProps");
+
+var _useToken = require("../../../hooks/useToken");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 = (props, ref) => {
+  const isDomUsable = (0, _utils.canUseDom)();
+  const {
+    children,
+    startColor,
+    endColor,
+    ...resolvedProps
+  } = (0, _hooks.usePropsResolution)('Skeleton', props); // Setting blink Animation
+
+  const blinkAnim = _react.default.useRef(new _reactNative.Animated.Value(0)).current;
+
+  const tokenisedStartColor = (0, _useToken.useToken)('colors', startColor); // Generating blink animation in a sequence
+
+  _react.default.useEffect(() => {
+    //Check if window is loaded
+    if (isDomUsable) {
+      const blink = _reactNative.Animated.sequence([_reactNative.Animated.timing(blinkAnim, {
+        toValue: 1,
+        duration: resolvedProps.fadeDuration * 10000 * (1 / resolvedProps.speed),
+        useNativeDriver: _reactNative.Platform.OS !== 'web'
+      }), _reactNative.Animated.timing(blinkAnim, {
+        toValue: 0,
+        duration: resolvedProps.fadeDuration * 10000 * (1 / resolvedProps.speed),
+        useNativeDriver: _reactNative.Platform.OS !== 'web'
+      })]);
+
+      _reactNative.Animated.loop(blink).start();
+    }
+  }, [blinkAnim, isDomUsable, resolvedProps]);
+
+  const skeletonStyle = {
+    skeleton: {
+      height: '100%',
+      width: '100%',
+      backgroundColor: tokenisedStartColor,
+      opacity: blinkAnim // Bind opacity to animated value
+
+    }
+  }; //TODO: refactor for responsive prop
+
+  if ((0, _useHasResponsiveProps.useHasResponsiveProps)(props)) {
+    return null;
+  }
+
+  return resolvedProps.isLoaded ? children : /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    bg: endColor
+  }, resolvedProps, {
+    ref: ref
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    style: skeletonStyle.skeleton
+  }));
+};
+
+var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(Skeleton));
+
+exports.default = _default;
+//# sourceMappingURL=Skeleton.js.map

package/lib/commonjs/components/composites/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Skeleton.tsx"],"names":["Skeleton","props","ref","isDomUsable","children","startColor","endColor","resolvedProps","blinkAnim","React","useRef","Animated","Value","current","tokenisedStartColor","useEffect","blink","sequence","timing","toValue","duration","fadeDuration","speed","useNativeDriver","Platform","OS","loop","start","skeletonStyle","skeleton","height","width","backgroundColor","opacity","isLoaded"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AAEA,MAAMA,QAAQ,GAAG,CAACC,KAAD,EAAwBC,GAAxB,KAAqC;AACpD,QAAMC,WAAW,GAAG,uBAApB;AACA,QAAM;AACJC,IAAAA,QADI;AAEJC,IAAAA,UAFI;AAGJC,IAAAA,QAHI;AAIJ,OAAGC;AAJC,MAKF,+BAAmB,UAAnB,EAA+BN,KAA/B,CALJ,CAFoD,CAQpD;;AACA,QAAMO,SAAS,GAAGC,eAAMC,MAAN,CAAa,IAAIC,sBAASC,KAAb,CAAmB,CAAnB,CAAb,EAAoCC,OAAtD;;AACA,QAAMC,mBAAmB,GAAG,wBAAS,QAAT,EAAmBT,UAAnB,CAA5B,CAVoD,CAYpD;;AACAI,iBAAMM,SAAN,CAAgB,MAAM;AACpB;AACA,QAAIZ,WAAJ,EAAiB;AACf,YAAMa,KAAK,GAAGL,sBAASM,QAAT,CAAkB,CAC9BN,sBAASO,MAAT,CAAgBV,SAAhB,EAA2B;AACzBW,QAAAA,OAAO,EAAE,CADgB;AAEzBC,QAAAA,QAAQ,EACNb,aAAa,CAACc,YAAd,GAA6B,KAA7B,IAAsC,IAAId,aAAa,CAACe,KAAxD,CAHuB;AAIzBC,QAAAA,eAAe,EAAEC,sBAASC,EAAT,KAAgB;AAJR,OAA3B,CAD8B,EAO9Bd,sBAASO,MAAT,CAAgBV,SAAhB,EAA2B;AACzBW,QAAAA,OAAO,EAAE,CADgB;AAEzBC,QAAAA,QAAQ,EACNb,aAAa,CAACc,YAAd,GAA6B,KAA7B,IAAsC,IAAId,aAAa,CAACe,KAAxD,CAHuB;AAIzBC,QAAAA,eAAe,EAAEC,sBAASC,EAAT,KAAgB;AAJR,OAA3B,CAP8B,CAAlB,CAAd;;AAcAd,4BAASe,IAAT,CAAcV,KAAd,EAAqBW,KAArB;AACD;AACF,GAnBD,EAmBG,CAACnB,SAAD,EAAYL,WAAZ,EAAyBI,aAAzB,CAnBH;;AAqBA,QAAMqB,aAAkB,GAAG;AACzBC,IAAAA,QAAQ,EAAE;AACRC,MAAAA,MAAM,EAAE,MADA;AAERC,MAAAA,KAAK,EAAE,MAFC;AAGRC,MAAAA,eAAe,EAAElB,mBAHT;AAIRmB,MAAAA,OAAO,EAAEzB,SAJD,CAIY;;AAJZ;AADe,GAA3B,CAlCoD,CA2CpD;;AACA,MAAI,kDAAsBP,KAAtB,CAAJ,EAAkC;AAChC,WAAO,IAAP;AACD;;AAED,SAAOM,aAAa,CAAC2B,QAAd,GACL9B,QADK,gBAGL,6BAAC,YAAD;AAAK,IAAA,EAAE,EAAEE;AAAT,KAAuBC,aAAvB;AAAsC,IAAA,GAAG,EAAEL;AAA3C,mBACE,6BAAC,qBAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE0B,aAAa,CAACC;AAApC,IADF,CAHF;AAOD,CAvDD;;4BAyDe,+BAAK,uBAAW7B,QAAX,CAAL,C","sourcesContent":["import React, { memo, forwardRef } from 'react';\r\nimport { Animated, Platform } from 'react-native';\r\nimport { usePropsResolution } from '../../../hooks';\r\nimport { canUseDom } from '../../../utils';\r\nimport Box from '../../primitives/Box';\r\nimport type { ISkeletonProps } from './types';\r\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\r\nimport { useToken } from '../../../hooks/useToken';\r\n\r\nconst Skeleton = (props: ISkeletonProps, ref: any) => {\r\n  const isDomUsable = canUseDom();\r\n  const {\r\n    children,\r\n    startColor,\r\n    endColor,\r\n    ...resolvedProps\r\n  } = usePropsResolution('Skeleton', props);\r\n  // Setting blink Animation\r\n  const blinkAnim = React.useRef(new Animated.Value(0)).current;\r\n  const tokenisedStartColor = useToken('colors', startColor);\r\n\r\n  // Generating blink animation in a sequence\r\n  React.useEffect(() => {\r\n    //Check if window is loaded\r\n    if (isDomUsable) {\r\n      const blink = Animated.sequence([\r\n        Animated.timing(blinkAnim, {\r\n          toValue: 1,\r\n          duration:\r\n            resolvedProps.fadeDuration * 10000 * (1 / resolvedProps.speed),\r\n          useNativeDriver: Platform.OS !== 'web',\r\n        }),\r\n        Animated.timing(blinkAnim, {\r\n          toValue: 0,\r\n          duration:\r\n            resolvedProps.fadeDuration * 10000 * (1 / resolvedProps.speed),\r\n          useNativeDriver: Platform.OS !== 'web',\r\n        }),\r\n      ]);\r\n      Animated.loop(blink).start();\r\n    }\r\n  }, [blinkAnim, isDomUsable, resolvedProps]);\r\n\r\n  const skeletonStyle: any = {\r\n    skeleton: {\r\n      height: '100%',\r\n      width: '100%',\r\n      backgroundColor: tokenisedStartColor,\r\n      opacity: blinkAnim, // Bind opacity to animated value\r\n    },\r\n  };\r\n\r\n  //TODO: refactor for responsive prop\r\n  if (useHasResponsiveProps(props)) {\r\n    return null;\r\n  }\r\n\r\n  return resolvedProps.isLoaded ? (\r\n    children\r\n  ) : (\r\n    <Box bg={endColor} {...resolvedProps} ref={ref}>\r\n      <Animated.View style={skeletonStyle.skeleton} />\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default memo(forwardRef(Skeleton));\r\n"]}