@ctlyst.id/internal-ui 2.0.4 → 2.0.6

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from './alert';
 export * from './badge';
 export * from './breadcrumb';
 export * from './button';
@@ -14,6 +15,7 @@ export * from './modal';
 export * from './navigation';
 export * from './pagination';
 export * from './radio';
+export * from './rating';
 export * from './select';
 export * from './switch';
 export * from './tabs';

package/dist/config/theme/components/form-label.d.ts

@@ -1,6 +1,7 @@
 declare const FormLabel: {
     baseStyle?: {
         fontSize: string;
+        fontWeight: string;
         marginEnd: number;
         mb: number;
     } | undefined;

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

@@ -4,29 +4,259 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var react = require('@chakra-ui/react');
+var sharedUtils = require('@chakra-ui/shared-utils');
+var system = require('@chakra-ui/system');
 var React = require('react');
 var React__default = _interopDefault(React);
+var reactContext = require('@chakra-ui/react-context');
+var internalIcon = require('@ctlyst.id/internal-icon');
+var utils = require('@chakra-ui/utils');
+var react = require('@chakra-ui/react');
 var fi = require('react-icons/fi');
 var icons = require('@chakra-ui/icons');
 var react$1 = require('@emotion/react');
 var reactTable = require('@tanstack/react-table');
 var classnames = _interopDefault(require('classnames'));
 var ReactDatePicker = _interopDefault(require('react-datepicker'));
-var system = require('@chakra-ui/system');
 var styled = _interopDefault(require('@emotion/styled'));
-var internalIcon = require('@ctlyst.id/internal-icon');
 var ReactSelect = _interopDefault(require('react-select'));
 var reactSelectAsyncPaginate = require('react-select-async-paginate');
 var ReactSelectAsyncCreatable = _interopDefault(require('react-select/async-creatable'));
 var ReactSelectCreatable = _interopDefault(require('react-select/creatable'));
-var sharedUtils = require('@chakra-ui/shared-utils');
 var reactDropzone = require('react-dropzone');
 var anatomy = require('@chakra-ui/anatomy');
 var styledSystem = require('@chakra-ui/styled-system');
 var themeTools = require('@chakra-ui/theme-tools');
 var axios = _interopDefault(require('axios'));
 
+/* eslint-disable react/require-default-props */
+function CheckIcon() {
+  return /*#__PURE__*/React__default.createElement(internalIcon.CheckCircle, {
+    color: "inherit",
+    size: 4
+  });
+}
+function InfoIcon() {
+  return /*#__PURE__*/React__default.createElement(internalIcon.Info, {
+    color: "inherit",
+    size: 4
+  });
+}
+function WarningIcon() {
+  return /*#__PURE__*/React__default.createElement(internalIcon.AlertTriangle, {
+    color: "inherit",
+    size: 4
+  });
+}
+
+const [AlertProvider, useAlertContext] = /*#__PURE__*/reactContext.createContext({
+  name: 'AlertContext',
+  hookName: 'useAlertContext',
+  providerName: '<Alert />'
+});
+const [AlertStylesProvider, useAlertStyles] = /*#__PURE__*/reactContext.createContext({
+  name: `AlertStylesContext`,
+  hookName: `useAlertStyles`,
+  providerName: '<Alert />'
+});
+const STATUSES = {
+  info: {
+    icon: InfoIcon,
+    colorScheme: 'info'
+  },
+  warning: {
+    icon: InfoIcon,
+    colorScheme: 'warning'
+  },
+  success: {
+    icon: CheckIcon,
+    colorScheme: 'success'
+  },
+  error: {
+    icon: WarningIcon,
+    colorScheme: 'danger'
+  }
+};
+function getStatusColorScheme(status) {
+  return STATUSES[status].colorScheme;
+}
+function getStatusIcon(status) {
+  return STATUSES[status].icon;
+}
+
+/**
+ * Alert is used to communicate the state or status of a
+ * page, feature or action
+ *
+ * @see Docs https://chakra-ui.com/docs/components/alert
+ * @see WAI-ARIA https://www.w3.org/WAI/ARIA/apg/patterns/alert/
+ */
+const Alert = /*#__PURE__*/system.forwardRef(function Alert(props, ref) {
+  var _props$colorScheme;
+  const {
+    status = 'info',
+    addRole = true,
+    children,
+    ...rest
+  } = system.omitThemingProps(props);
+  const colorScheme = (_props$colorScheme = props.colorScheme) !== null && _props$colorScheme !== void 0 ? _props$colorScheme : getStatusColorScheme(status);
+  const styles = system.useMultiStyleConfig('Alert', {
+    ...props,
+    colorScheme
+  });
+  const alertStyles = {
+    width: '100%',
+    display: 'grid',
+    gridTemplateColumns: 'auto 1fr auto auto',
+    alignItems: 'center',
+    position: 'relative',
+    overflow: 'hidden',
+    ...styles.container
+  };
+  return /*#__PURE__*/React__default.createElement(AlertProvider, {
+    value: {
+      status
+    }
+  }, /*#__PURE__*/React__default.createElement(AlertStylesProvider, {
+    value: styles
+  }, /*#__PURE__*/React__default.createElement(system.chakra.div, Object.assign({
+    "data-status": status,
+    role: addRole ? 'alert' : undefined,
+    ref: ref
+  }, rest, {
+    className: sharedUtils.cx('chakra-alert', props.className),
+    __css: alertStyles
+  }), children)));
+});
+Alert.displayName = 'Alert';
+
+const Loader = /*#__PURE__*/react.forwardRef((props, ref) => {
+  const styles = react.useStyleConfig('LoaderStyle', props);
+  return /*#__PURE__*/React__default.createElement(react.Box, {
+    ref: ref,
+    __css: styles
+  });
+});
+
+const Button = props => {
+  const {
+    children,
+    variant,
+    size,
+    ...rest
+  } = props;
+  const getLoaderSize = () => {
+    if (size === 'lg') return 'md';
+    if (size === 'md') return 'sm';
+    return 'xs';
+  };
+  const getLoaderColor = () => {
+    if (variant === 'primary' || variant === 'danger') return 'white';
+    if (variant === 'outline-danger') return 'danger';
+    return 'primary';
+  };
+  return /*#__PURE__*/React__default.createElement(react.Button, Object.assign({
+    size: size,
+    variant: variant,
+    spinner: /*#__PURE__*/React__default.createElement(Loader, {
+      size: getLoaderSize(),
+      color: getLoaderColor()
+    })
+  }, rest), children);
+};
+
+function AlertAction({
+  children,
+  className
+}) {
+  const styles = useAlertStyles();
+  const css = styles.action;
+  return /*#__PURE__*/React__default.createElement(Button, {
+    "data-test-id": "alert-action",
+    className: utils.cx('chakra-alert__close', className),
+    variant: "link",
+    color: "inherit",
+    fontWeight: "700",
+    __css: css
+  }, children);
+}
+AlertAction.displayName = 'AlertAction';
+
+function AlertClose({
+  className,
+  children,
+  ...rest
+}) {
+  const styles = useAlertStyles();
+  const css = styles.close;
+  return /*#__PURE__*/React__default.createElement(system.chakra.span, Object.assign({
+    display: "inherit",
+    "data-status": 'alert-close'
+  }, rest, {
+    className: sharedUtils.cx('chakra-alert__close', className),
+    __css: css
+  }), children || /*#__PURE__*/React__default.createElement(internalIcon.Close, {
+    color: "inherit",
+    size: 4
+  }));
+}
+AlertClose.displayName = 'AlertClose';
+
+const AlertDescription = /*#__PURE__*/system.forwardRef(function AlertDescription(props, ref) {
+  const styles = useAlertStyles();
+  const {
+    status
+  } = useAlertContext();
+  const descriptionStyles = {
+    display: 'inline',
+    ...styles.description
+  };
+  return /*#__PURE__*/React__default.createElement(system.chakra.div, Object.assign({
+    ref: ref,
+    "data-status": status
+  }, props, {
+    className: sharedUtils.cx('chakra-alert__desc', props.className),
+    __css: descriptionStyles
+  }));
+});
+AlertDescription.displayName = 'AlertDescription';
+
+function AlertIcon({
+  className,
+  children,
+  ...rest
+}) {
+  const {
+    status
+  } = useAlertContext();
+  const BaseIcon = getStatusIcon(status);
+  const styles = useAlertStyles();
+  const css = styles.icon;
+  return /*#__PURE__*/React__default.createElement(system.chakra.span, Object.assign({
+    display: "inherit",
+    "data-status": status
+  }, rest, {
+    className: sharedUtils.cx('chakra-alert__icon', className),
+    __css: css
+  }), children || /*#__PURE__*/React__default.createElement(BaseIcon, null));
+}
+AlertIcon.displayName = 'AlertIcon';
+
+const AlertTitle = /*#__PURE__*/system.forwardRef(function AlertTitle(props, ref) {
+  const styles = useAlertStyles();
+  const {
+    status
+  } = useAlertContext();
+  return /*#__PURE__*/React__default.createElement(system.chakra.div, Object.assign({
+    ref: ref,
+    "data-status": status
+  }, props, {
+    className: sharedUtils.cx('chakra-alert__title', props.className),
+    __css: styles.title
+  }));
+});
+AlertTitle.displayName = 'AlertTitle';
+
 const Badge = props => {
   const {
     children,
@@ -38,7 +268,7 @@ const Badge = props => {
     variant: "primary-solid",
     padding: "0 8px",
     height: "18px",
-    display: "flex",
+    display: "inline-flex",
     alignItems: "center",
     justifyContent: "space-between",
     textTransform: "none"
@@ -143,41 +373,6 @@ BreadCrumb.defaultProps = {
   spacing: 2
 };
 
-const Loader = /*#__PURE__*/react.forwardRef((props, ref) => {
-  const styles = react.useStyleConfig('LoaderStyle', props);
-  return /*#__PURE__*/React__default.createElement(react.Box, {
-    ref: ref,
-    __css: styles
-  });
-});
-
-const Button = props => {
-  const {
-    children,
-    variant,
-    size,
-    ...rest
-  } = props;
-  const getLoaderSize = () => {
-    if (size === 'lg') return 'md';
-    if (size === 'md') return 'sm';
-    return 'xs';
-  };
-  const getLoaderColor = () => {
-    if (variant === 'primary' || variant === 'danger') return 'white';
-    if (variant === 'outline-danger') return 'danger';
-    return 'primary';
-  };
-  return /*#__PURE__*/React__default.createElement(react.Button, Object.assign({
-    size: size,
-    variant: variant,
-    spinner: /*#__PURE__*/React__default.createElement(Loader, {
-      size: getLoaderSize(),
-      color: getLoaderColor()
-    })
-  }, rest), children);
-};
-
 const CardCustom = /*#__PURE__*/React.forwardRef(({
   children,
   ...rest
@@ -1955,20 +2150,26 @@ const InputAddonLeft = ({
   children
 }) => {
   return /*#__PURE__*/React__default.createElement(react.InputLeftAddon, {
-    borderLeftRadius: "md",
     backgroundColor: "neutral.200",
     px: 3,
-    py: 2.5
+    py: 2.5,
+    style: {
+      border: 0,
+      marginInlineEnd: 0
+    }
   }, children);
 };
 const InputAddonRight = ({
   children
 }) => {
   return /*#__PURE__*/React__default.createElement(react.InputRightAddon, {
-    borderRightRadius: "md",
     backgroundColor: "neutral.200",
     px: 3,
-    py: 2.5
+    py: 2.5,
+    style: {
+      border: 0,
+      marginInlineStart: 0
+    }
   }, children);
 };
 
@@ -2750,6 +2951,18 @@ RadioGroupComponent.defaultProps = {
   errorMessage: ''
 };
 
+const Rating = ({
+  value
+}) => {
+  return /*#__PURE__*/React__default.createElement(react.Grid, {
+    gap: '4px',
+    display: "flex"
+  }, [...Array(5)].map((_, i) => /*#__PURE__*/React__default.createElement(internalIcon.Rating, {
+    color: i < value ? '#FFA230' : '#E0E0E0',
+    size: 24
+  })));
+};
+
 const SelectWrapper = ({
   children,
   isError = false
@@ -3755,6 +3968,7 @@ const Chips = /*#__PURE__*/styledSystem.defineStyleConfig({
 
 const baseStyle$2 = /*#__PURE__*/styledSystem.defineStyle({
   fontSize: 'field.sm',
+  fontWeight: 'normal',
   marginEnd: 1,
   mb: 1
 });
@@ -4546,6 +4760,12 @@ Object.defineProperty(exports, 'useTabsStyles', {
     return react.useTabsStyles;
   }
 });
+exports.Alert = Alert;
+exports.AlertAction = AlertAction;
+exports.AlertClose = AlertClose;
+exports.AlertDescription = AlertDescription;
+exports.AlertIcon = AlertIcon;
+exports.AlertTitle = AlertTitle;
 exports.Badge = Badge;
 exports.Box = react.Box;
 exports.BreadCrumb = BreadCrumb;
@@ -4578,6 +4798,7 @@ exports.Provider = Provider;
 exports.ProviderContext = ProviderContext;
 exports.Radio = RadioComponent;
 exports.RadioGroup = RadioGroupComponent;
+exports.Rating = Rating;
 exports.Select = Select;
 exports.SelectAsync = SelectAsync;
 exports.SelectAsyncCreatable = SelectAsyncCreatable;
@@ -4593,5 +4814,6 @@ exports.Uploader = Uploader;
 exports.Wrap = react.Wrap;
 exports.foundations = foundations;
 exports.theme = theme;
+exports.useAlertStyles = useAlertStyles;
 exports.useInternalUI = useInternalUI;
 //# sourceMappingURL=internal-ui.cjs.development.js.map