@xqmsg/ui-core 0.18.8 → 0.19.0

package/dist/components/icons/neutral/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export interface NeutralProps {
     boxSize: number | string;
+    color?: string;
 }
 /**
  * A functional React component utilized to render the `Neutral` icon component

package/dist/components/toast/Toast.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { ToastProps } from '.';
+declare const meta: Meta<ToastProps>;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ToastProps>;

package/dist/components/toast/index.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+export declare type ToastVariant = 'positive' | 'warning' | 'error' | 'neutral';
+export interface ToastProps {
+    variant: ToastVariant;
+    message: ReactNode;
+    buttonText?: string;
+    onClick?: () => void;
+}
+/**
+ * A functional React component utilized to render the `Toast` component
+ */
+export declare const Toast: React.FC<ToastProps>;

package/dist/hooks/useToast.d.ts

@@ -0,0 +1,6 @@
+import { ToastPosition } from '@chakra-ui/react';
+import React from 'react';
+import { ToastProps } from '../components/toast';
+export declare const useToast: (props: ToastProps & {
+    position: ToastPosition;
+}) => () => React.Key;

package/dist/index.d.ts

@@ -16,5 +16,6 @@ export * from './components/tabs';
 export * from './components/text';
 export * from './theme/provider';
 export * from './components/toolbar';
+export * from './hooks/useToast';
 export * from './components/form/utils/formErrors';
 export * from './theme/foundations/colors';

package/dist/theme/provider/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ChakraProviderProps } from '@chakra-ui/provider';
+import { ChakraProviderProps } from '@chakra-ui/react';
 /**
  * A functional React wrapper component utilized to consume the custom XQ theme via `ChakraProvider`
  */

package/dist/ui-core.cjs.development.js

@@ -12,7 +12,6 @@ var lodash = require('lodash');
 var icons = require('@chakra-ui/icons');
 var reactRouterDom = require('react-router-dom');
 var hi = require('react-icons/hi');
-var provider = require('@chakra-ui/provider');
 var themeTools = require('@chakra-ui/theme-tools');
 var system = require('@chakra-ui/system');
 
@@ -91,7 +90,7 @@ var SvgNeutral = function SvgNeutral(props, ref) {
     ref: ref
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
     d: "M7 4.5V4a.5.5 0 0 0-.5.5H7Zm.005 0h.5a.5.5 0 0 0-.5-.5v.5Zm0 .005v.5a.5.5 0 0 0 .5-.5h-.5Zm-.005 0h-.5a.5.5 0 0 0 .5.5v-.5Zm-.724 1.548a.5.5 0 1 0 .448.894l-.448-.894Zm.252.433-.224-.447.224.447Zm.708.569.485.12-.485-.12Zm-.472 1.89-.485-.12.485.12Zm.708.569.224.447-.224-.447Zm.252.433a.5.5 0 1 0-.448-.894l.448.894ZM12.5 7A5.5 5.5 0 0 1 7 12.5v1A6.5 6.5 0 0 0 13.5 7h-1ZM7 12.5A5.5 5.5 0 0 1 1.5 7h-1A6.5 6.5 0 0 0 7 13.5v-1ZM1.5 7A5.5 5.5 0 0 1 7 1.5v-1A6.5 6.5 0 0 0 .5 7h1ZM7 1.5A5.5 5.5 0 0 1 12.5 7h1A6.5 6.5 0 0 0 7 .5v1ZM7 5h.005V4H7v1Zm-.495-.5v.005h1V4.5h-1Zm.5-.495H7v1h.005v-1Zm.495.5V4.5h-1v.005h1Zm-.776 2.442.027-.014-.447-.894-.028.014.448.894Zm.027-.014L6.28 8.824l.97.243.472-1.891-.97-.243Zm.945 3.028.028-.014-.448-.894-.027.014.447.894ZM6.279 8.824a1 1 0 0 0 1.417 1.137l-.447-.894-.97-.243Zm.472-1.89.97.242a1 1 0 0 0-1.417-1.137l.447.894Z",
-    fill: "#3C3C43",
+    fill: "current",
     fillOpacity: 0.6
   })));
 };
@@ -103,9 +102,11 @@ var Memo$1 = /*#__PURE__*/React.memo(ForwardRef$1);
  */
 
 var Neutral = function Neutral(_ref) {
-  var boxSize = _ref.boxSize;
+  var color = _ref.color,
+      boxSize = _ref.boxSize;
   return /*#__PURE__*/React__default.createElement(Memo$1, {
-    boxSize: boxSize
+    boxSize: boxSize,
+    fill: color || '#3C3C43'
   });
 };
 
@@ -4177,7 +4178,7 @@ var customXQChakraTheme = /*#__PURE__*/react.extendTheme( /*#__PURE__*/_extends$
 var XQThemeProvider = function XQThemeProvider(_ref) {
   var children = _ref.children,
       cssVarsRoot = _ref.cssVarsRoot;
-  return /*#__PURE__*/React__default.createElement(provider.ChakraProvider, {
+  return /*#__PURE__*/React__default.createElement(react.ChakraProvider, {
     theme: customXQChakraTheme,
     resetCSS: true,
     cssVarsRoot: cssVarsRoot
@@ -4317,6 +4318,87 @@ var Toolbar = function Toolbar(_ref) {
   }, children, " ")));
 };
 
+/**
+ * A functional React component utilized to render the `Toast` component
+ */
+
+var Toast = function Toast(_ref) {
+  var variant = _ref.variant,
+      message = _ref.message,
+      buttonText = _ref.buttonText,
+      onClick = _ref.onClick;
+  var Icon = React.useMemo(function () {
+    switch (variant) {
+      case 'error':
+        return /*#__PURE__*/React__default.createElement(Error$1, {
+          boxSize: "16px"
+        });
+
+      case 'neutral':
+        return /*#__PURE__*/React__default.createElement(Neutral, {
+          boxSize: "16px",
+          color: "white"
+        });
+
+      case 'positive':
+        return /*#__PURE__*/React__default.createElement(Positive, {
+          boxSize: "16px"
+        });
+
+      case 'warning':
+        return /*#__PURE__*/React__default.createElement(Warning, {
+          boxSize: "16px"
+        });
+
+      default:
+        return null;
+    }
+  }, [variant]);
+  return /*#__PURE__*/React__default.createElement(react.Flex, {
+    alignItems: "center",
+    width: "fit-content",
+    height: "32px",
+    p: "8px",
+    bg: "#151515D9",
+    borderColor: "#9999991A",
+    borderRadius: "8px"
+  }, /*#__PURE__*/React__default.createElement(react.Box, {
+    pr: "8px"
+  }, Icon), /*#__PURE__*/React__default.createElement(react.Text, {
+    pr: "16px",
+    fontSize: "13px",
+    color: colors.label.primary.dark
+  }, message), onClick && buttonText && /*#__PURE__*/React__default.createElement(react.Flex, {
+    ml: "auto",
+    justifyContent: "flex-end"
+  }, /*#__PURE__*/React__default.createElement(react.Button, {
+    color: colors.fill.action,
+    style: {
+      background: 'transparent',
+      border: 'transparent',
+      boxShadow: 'none'
+    },
+    _hover: {
+      bg: 'transparent',
+      border: 'transparent',
+      boxShadow: 'none'
+    },
+    onClick: onClick
+  }, buttonText)));
+};
+
+var useToast = function useToast(props) {
+  var toast = react.useToast();
+  return function () {
+    return toast({
+      position: props.position,
+      render: function render() {
+        return /*#__PURE__*/React__default.createElement(Toast, Object.assign({}, props));
+      }
+    });
+  };
+};
+
 function formatErrorResponse(error) {
   var _error$response, _error$response$data;
 
@@ -4392,4 +4474,5 @@ exports.Warning = Warning;
 exports.XQThemeProvider = XQThemeProvider;
 exports.colors = colors;
 exports.formatErrorResponse = formatErrorResponse;
+exports.useToast = useToast;
 //# sourceMappingURL=ui-core.cjs.development.js.map