@pingux/astro 2.142.1-alpha.1 → 2.143.0-alpha.1

package/lib/cjs/components/Text/Text.stories.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Default = exports.CustomWidth = exports.CustomStyle = void 0;
+exports["default"] = exports.Onyx = exports.Default = exports.CustomWidth = exports.CustomStyle = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
@@ -429,6 +429,359 @@ var Default = function Default() {
   }))));
 };
 exports.Default = Default;
+var Onyx = function Onyx() {
+  var _context7, _context8, _context9, _context10, _context11, _context12;
+  var fontSizesOnyx = {
+    xxx: '33.8px (xxx)',
+    xl: '22.5px (xl)',
+    lg: '18.8px (lg)',
+    md: '15px (md)',
+    sm: '12px (sm)',
+    xs: '11px (xs)',
+    h2: '26.3px (h2)'
+  };
+  var fontWeightsOnyx = {
+    '-1': '300 (-1)',
+    '0': '400 (0)',
+    '1': '500 (1)',
+    '2': '600 (2)',
+    '3': '700 (3)'
+  };
+  var headingVariants = {
+    H1: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.xxx,
+      example: (0, _react2.jsx)(_index.Text, {
+        variant: "H1",
+        as: "h1"
+      }, '<Text variant="H1" as="H1"/>')
+    },
+    H2: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.h2,
+      example: (0, _react2.jsx)(_index.Text, {
+        variant: "H2",
+        as: "h2"
+      }, '<Text variant="H2" as="H2"/>')
+    },
+    H3: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.xl,
+      example: (0, _react2.jsx)(_index.Text, {
+        variant: "H3",
+        as: "h3"
+      }, '<Text variant="H3" as="H3"/>')
+    },
+    H4: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.lg,
+      example: (0, _react2.jsx)(_index.Text, {
+        variant: "H4",
+        as: "h4"
+      }, '<Text variant="H4" as="H4"/>')
+    },
+    H5: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.md,
+      example: (0, _react2.jsx)(_index.Text, {
+        variant: "H5",
+        as: "h5"
+      }, '<Text variant="H5" as="H5"/>')
+    },
+    H6: {
+      weight: fontWeightsOnyx[0],
+      fontSize: fontSizesOnyx.sm,
+      example: (0, _react2.jsx)(_index.Text, {
+        variant: "H6",
+        as: "h6"
+      }, '<Text variant="H6" as="H6"/>')
+    }
+  };
+  var baseAndSubtitleVariants = {
+    'Base (default variant of Text)': {
+      weight: fontWeightsOnyx[0],
+      fontSize: fontSizesOnyx.md,
+      color: 'text.primary',
+      example: (0, _react2.jsx)(_index.Text, {
+        variant: "base",
+        fontWeight: "0"
+      }, '<Text variant="base"/>')
+    },
+    Subtitle: {
+      weight: fontWeightsOnyx[0],
+      fontSize: fontSizesOnyx.sm,
+      color: 'text.secondary',
+      example: (0, _react2.jsx)(_index.Text, {
+        variant: "subtitle"
+      }, '<Text variant="subtitle"/>')
+    }
+  };
+  var largeVariants = {
+    Bold: {
+      weight: fontWeightsOnyx[3],
+      fontSize: fontSizesOnyx.lg,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "lg",
+        fontWeight: "3"
+      }, '<Text fontSize="lg" fontWeight="3">')
+    },
+    Semibold: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.lg,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "lg",
+        fontWeight: "2"
+      }, '<Text fontSize="lg" fontWeight="2">')
+    },
+    Regular: {
+      weight: fontWeightsOnyx[0],
+      fontSize: fontSizesOnyx.lg,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "lg",
+        fontWeight: "0"
+      }, '<Text fontSize="lg" fontWeight="0">')
+    },
+    Light: {
+      weight: fontWeightsOnyx[-1],
+      fontSize: fontSizesOnyx.lg,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "lg",
+        fontWeight: "0"
+      }, '<Text fontSize="lg" fontWeight="0">')
+    }
+  };
+  var mediumVariants = {
+    Bold: {
+      weight: fontWeightsOnyx[3],
+      fontSize: fontSizesOnyx.md,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "md",
+        fontWeight: "3"
+      }, '<Text fontSize="md" fontWeight="3">')
+    },
+    Semibold: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.md,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "md",
+        fontWeight: "2"
+      }, '<Text fontSize="md" fontWeight="2">')
+    },
+    Regular: {
+      weight: fontWeightsOnyx[0],
+      fontSize: fontSizesOnyx.md,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "md",
+        fontWeight: "0"
+      }, '<Text fontSize="md" fontWeight="0">')
+    },
+    Light: {
+      weight: fontWeightsOnyx[-1],
+      fontSize: fontSizesOnyx.md,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "md",
+        fontWeight: "-1"
+      }, '<Text fontSize="md" fontWeight="-1">')
+    }
+  };
+  var smallVariants = {
+    Bold: {
+      weight: fontWeightsOnyx[3],
+      fontSize: fontSizesOnyx.sm,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "sm",
+        fontWeight: "3"
+      }, '<Text fontSize="sm" fontWeight="3">')
+    },
+    Semibold: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.sm,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "sm",
+        fontWeight: "2"
+      }, '<Text fontSize="sm" fontWeight="2">')
+    },
+    Regular: {
+      weight: fontWeightsOnyx[0],
+      fontSize: fontSizesOnyx.sm,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "sm",
+        fontWeight: "0"
+      }, '<Text fontSize="sm" fontWeight="0">')
+    },
+    Light: {
+      weight: fontWeightsOnyx[-1],
+      fontSize: fontSizesOnyx.sm,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "sm",
+        fontWeight: "-1"
+      }, '<Text fontSize="sm" fontWeight="-1">')
+    }
+  };
+  var xsmallVariants = {
+    Bold: {
+      weight: fontWeightsOnyx[3],
+      fontSize: fontSizesOnyx.xs,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "xs",
+        fontWeight: "3"
+      }, '<Text fontSize="xs" fontWeight="3">')
+    },
+    Semibold: {
+      weight: fontWeightsOnyx[2],
+      fontSize: fontSizesOnyx.xs,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "xs",
+        fontWeight: "2"
+      }, '<Text fontSize="xs" fontWeight="2">')
+    },
+    Regular: {
+      weight: fontWeightsOnyx[0],
+      fontSize: fontSizesOnyx.xs,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "xs",
+        fontWeight: "0"
+      }, '<Text fontSize="xs" fontWeight="0">')
+    },
+    Light: {
+      weight: fontWeightsOnyx[-1],
+      fontSize: fontSizesOnyx.xs,
+      example: (0, _react2.jsx)(_index.Text, {
+        fontSize: "xs",
+        fontWeight: "-1"
+      }, '<Text fontSize="xs" fontWeight="-1">')
+    }
+  };
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Table, {
+    mb: "xx"
+  }, (0, _react2.jsx)(TableHeading, {
+    title: "Heading"
+  }), (0, _react2.jsx)(_index.TableBody, {
+    sx: sx.tableBody
+  }, (0, _map["default"])(_context7 = (0, _entries["default"])(headingVariants)).call(_context7, function (_ref15) {
+    var _ref16 = (0, _slicedToArray2["default"])(_ref15, 2),
+      key = _ref16[0],
+      value = _ref16[1];
+    return (0, _react2.jsx)(TableData, {
+      variant: key,
+      value: value,
+      key: key
+    });
+  }))), (0, _react2.jsx)(_index.Table, {
+    mb: "xx"
+  }, (0, _react2.jsx)(_index.TableHead, null, (0, _react2.jsx)(_index.TableRow, {
+    key: "head"
+  }, (0, _react2.jsx)(_index.TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "60%"
+  }, "Base and Subtitle"), (0, _react2.jsx)(_index.TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "20%"
+  }, "Weight"), (0, _react2.jsx)(_index.TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "30%"
+  }, "Size"), (0, _react2.jsx)(_index.TableCell, {
+    sx: sx.cell,
+    isHeading: true,
+    width: "40%"
+  }, "Color"), (0, _react2.jsx)(_index.TableCell, {
+    sx: sx.cell,
+    isHeading: true
+  }, "Example"))), (0, _react2.jsx)(_index.TableBody, {
+    sx: sx.tableBody
+  }, (0, _map["default"])(_context8 = (0, _entries["default"])(baseAndSubtitleVariants)).call(_context8, function (_ref17) {
+    var _ref18 = (0, _slicedToArray2["default"])(_ref17, 2),
+      key = _ref18[0],
+      value = _ref18[1];
+    return (0, _react2.jsx)(_index.TableRow, {
+      sx: {
+        backgroundColor: 'transparent !important'
+      },
+      key: key
+    }, (0, _react2.jsx)(_index.TableCell, {
+      sx: sx.cell,
+      width: "60%"
+    }, (0, _react2.jsx)(_index.Text, null, key)), (0, _react2.jsx)(_index.TableCell, {
+      sx: sx.cell,
+      width: "20%"
+    }, (0, _react2.jsx)(_index.Text, null, value.weight)), (0, _react2.jsx)(_index.TableCell, {
+      sx: sx.cell,
+      width: "30%"
+    }, (0, _react2.jsx)(_index.Text, null, value.fontSize)), (0, _react2.jsx)(_index.TableCell, {
+      sx: sx.cell,
+      width: "40%"
+    }, (0, _react2.jsx)(_index.Text, null, value.color)), (0, _react2.jsx)(_index.TableCell, {
+      sx: sx.cell
+    }, value.example));
+  }))), (0, _react2.jsx)(_index.Table, {
+    mb: "xx"
+  }, (0, _react2.jsx)(TableHeading, {
+    title: "Large"
+  }), (0, _react2.jsx)(_index.TableBody, {
+    sx: sx.tableBody
+  }, (0, _map["default"])(_context9 = (0, _entries["default"])(largeVariants)).call(_context9, function (_ref19) {
+    var _ref20 = (0, _slicedToArray2["default"])(_ref19, 2),
+      key = _ref20[0],
+      value = _ref20[1];
+    return (0, _react2.jsx)(TableData, {
+      variant: key,
+      value: value,
+      key: key
+    });
+  }))), (0, _react2.jsx)(_index.Table, {
+    mb: "xx"
+  }, (0, _react2.jsx)(TableHeading, {
+    title: "Medium"
+  }), (0, _react2.jsx)(_index.TableBody, {
+    sx: sx.tableBody
+  }, (0, _map["default"])(_context10 = (0, _entries["default"])(mediumVariants)).call(_context10, function (_ref21) {
+    var _ref22 = (0, _slicedToArray2["default"])(_ref21, 2),
+      key = _ref22[0],
+      value = _ref22[1];
+    return (0, _react2.jsx)(TableData, {
+      variant: key,
+      value: value,
+      key: key
+    });
+  }))), (0, _react2.jsx)(_index.Table, {
+    mb: "xx"
+  }, (0, _react2.jsx)(TableHeading, {
+    title: "Small"
+  }), (0, _react2.jsx)(_index.TableBody, {
+    sx: sx.tableBody
+  }, (0, _map["default"])(_context11 = (0, _entries["default"])(smallVariants)).call(_context11, function (_ref23) {
+    var _ref24 = (0, _slicedToArray2["default"])(_ref23, 2),
+      key = _ref24[0],
+      value = _ref24[1];
+    return (0, _react2.jsx)(TableData, {
+      variant: key,
+      value: value,
+      key: key
+    });
+  }))), (0, _react2.jsx)(_index.Table, {
+    mb: "xx"
+  }, (0, _react2.jsx)(TableHeading, {
+    title: "XSmall"
+  }), (0, _react2.jsx)(_index.TableBody, {
+    sx: sx.tableBody
+  }, (0, _map["default"])(_context12 = (0, _entries["default"])(xsmallVariants)).call(_context12, function (_ref25) {
+    var _ref26 = (0, _slicedToArray2["default"])(_ref25, 2),
+      key = _ref26[0],
+      value = _ref26[1];
+    return (0, _react2.jsx)(TableData, {
+      variant: key,
+      value: value,
+      key: key
+    });
+  }))));
+};
+exports.Onyx = Onyx;
+Default.parameters = {
+  codesandbox: false
+};
 var CustomWidth = function CustomWidth(args) {
   return (0, _react2.jsx)(_index.Box, {
     width: 200

package/lib/cjs/components/Text/Text.styles.d.ts

@@ -121,6 +121,16 @@ export declare const text: {
         color: string;
         fontFamily: string;
     };
+    pageHeaderBody: {
+        fontSize: string;
+        color: string;
+        fontFamily: string;
+        display: string;
+        overflowWrap: overflowWrap;
+        maxWidth: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
+    };
     panelHeaderSubtext: {
         textOverflow: string;
         overflow: string;

package/lib/cjs/components/Text/Text.styles.js

@@ -236,6 +236,11 @@ var text = _objectSpread(_objectSpread(_objectSpread({
     color: 'text.secondary',
     fontFamily: 'standard'
   },
+  pageHeaderBody: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'sm',
+    color: 'text.secondary',
+    fontFamily: 'standard'
+  }),
   panelHeaderSubtext: _objectSpread(_objectSpread({}, listViewItemSubtext), textEllipsis),
   panelHeaderText: _objectSpread(_objectSpread({}, listViewItemText), textEllipsis),
   sectionTitle: sectionTitle,

package/lib/cjs/components/TextField/TextField.stories.js

@@ -23,6 +23,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _react = _interopRequireWildcard(require("react"));
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _hooks = require("../../hooks");
 var _useCopyToClipboard = _interopRequireDefault(require("../../hooks/useCopyToClipboard"));
 var _index = require("../../index");
 var _labelModes = require("../../utils/devUtils/constants/labelModes");
@@ -289,6 +290,12 @@ var WithSlots = function WithSlots() {
     top: '5px',
     height: '32px'
   };
+  var onyxButtonSx = {
+    position: 'absolute',
+    right: 0,
+    top: '9px',
+    height: '32px'
+  };
   var containerSx = {
     sx: {
       '& input': {
@@ -296,6 +303,9 @@ var WithSlots = function WithSlots() {
       }
     }
   };
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    themeState = _useGetTheme.themeState;
+  var isOnyx = themeState.isOnyx;
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.TextField, {
     label: "Multiple Addresses",
     labelMode: "float",
@@ -307,7 +317,7 @@ var WithSlots = function WithSlots() {
     slots: {
       inContainer: (0, _react2.jsx)(_CopyButton["default"], {
         onPress: copyAddressesToClipboard,
-        sx: buttonSx,
+        sx: isOnyx ? onyxButtonSx : buttonSx,
         iconProps: {
           sx: {
             path: {
@@ -329,7 +339,7 @@ var WithSlots = function WithSlots() {
     slots: {
       inContainer: (0, _react2.jsx)(_CopyButton["default"], {
         onPress: copyJsonToClipboard,
-        sx: buttonSx,
+        sx: isOnyx ? onyxButtonSx : buttonSx,
         iconProps: {
           sx: {
             path: {

package/lib/cjs/hooks/useCircularLoader/useCircularLoader.d.ts

@@ -0,0 +1,23 @@
+import { LoaderSize } from '../../types';
+interface UseCircularLoaderProps {
+    size?: LoaderSize;
+    mode?: string;
+    progress?: number;
+    isAstro: boolean;
+    defaultLoaderSize: number;
+}
+export declare const circularSizes: {
+    sm: number;
+    md: number;
+    lg: number;
+};
+declare const useCircularLoader: (props: UseCircularLoaderProps) => {
+    size: LoaderSize;
+    isCircle: boolean;
+    radius: number;
+    center: number;
+    strokeWidth: number;
+    dashLength: number;
+    gapLength: number;
+};
+export default useCircularLoader;

package/lib/cjs/hooks/useCircularLoader/useCircularLoader.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.circularSizes = void 0;
+var _parseInt2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/parse-int"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _useTShirtSize2 = _interopRequireDefault(require("../useTShirtSize"));
+var _excluded = ["mode", "size", "isAstro", "defaultLoaderSize", "progress"];
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var circularSizes = {
+  'sm': 16,
+  'md': 24,
+  'lg': 32
+};
+exports.circularSizes = circularSizes;
+var useCircularLoader = function useCircularLoader(props) {
+  var mode = props.mode,
+    size = props.size,
+    isAstro = props.isAstro,
+    defaultLoaderSize = props.defaultLoaderSize,
+    _props$progress = props.progress,
+    progress = _props$progress === void 0 ? 75 : _props$progress,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useTShirtSize = (0, _useTShirtSize2["default"])({
+      size: size || defaultLoaderSize,
+      sizes: circularSizes
+    }),
+    sizeProps = _useTShirtSize.sizeProps;
+  if (mode === 'dots' || isAstro) {
+    return _objectSpread({
+      size: size || defaultLoaderSize,
+      isCircle: false,
+      radius: 0,
+      center: 0,
+      strokeWidth: 0,
+      dashLength: 0,
+      gapLength: 0
+    }, others);
+  }
+  var parsedSize = (0, _parseInt2["default"])(sizeProps.size, 10);
+  var actualSize = parsedSize * (10 / 12);
+  var strokeWidth = (parsedSize - actualSize) / 2;
+
+  // Calculate the radius, considering the strokeWidth to fit within the given size
+  var radius = (actualSize - strokeWidth) / 2;
+
+  // Center of the circle
+  var center = actualSize / 2;
+
+  // Calculate the circumference
+  var circumference = 2 * Math.PI * radius;
+
+  // Calculate the dash and gap lengths for the progress
+  var dashLength = progress / 100 * circumference;
+  var gapLength = circumference;
+  return _objectSpread({
+    center: center,
+    isCircle: true,
+    radius: radius,
+    strokeWidth: strokeWidth,
+    dashLength: dashLength,
+    gapLength: gapLength,
+    size: actualSize
+  }, others);
+};
+var _default = useCircularLoader;
+exports["default"] = _default;

package/lib/cjs/hooks/useCircularLoader/useCircularLoader.test.d.ts

@@ -0,0 +1 @@
+export {};