@ctlyst.id/internal-ui 2.0.4 → 2.0.5

package/dist/internal-ui.esm.js

@@ -1,26 +1,256 @@
-import { Badge as Badge$2, useToken, Box, Text, useColorModeValue, Breadcrumb, BreadcrumbItem, BreadcrumbLink, forwardRef, useStyleConfig, Button as Button$2, Card, Checkbox as Checkbox$1, FormControl, FormLabel as FormLabel$1, FormHelperText, FormErrorMessage, CheckboxGroup, Stack, Flex, Spinner, Table, Thead, Tr, Th, Tbody, Td, defineStyle, InputGroup, Input as Input$1, InputRightAddon, InputRightElement, theme as theme$1, InputLeftAddon, Textarea as Textarea$1, Image, useDisclosure, Popover as Popover$1, HStack, VStack, PopoverTrigger, Avatar, PopoverContent, PopoverArrow, PopoverBody, useColorMode as useColorMode$1, Container, Grid, Wrap, ModalBody as ModalBody$1, ModalCloseButton as ModalCloseButton$1, ModalFooter as ModalFooter$1, ModalHeader as ModalHeader$1, createIcon, Icon, Portal, Link, VisuallyHidden, Select as Select$1, Radio as Radio$1, RadioGroup, useMultiStyleConfig, omitThemingProps, useCheckbox, chakra, useTab, TabList as TabList$1, TabPanel as TabPanel$1, Heading, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, defineStyleConfig as defineStyleConfig$1, extendTheme } from '@chakra-ui/react';
+import { cx, dataAttr } from '@chakra-ui/shared-utils';
+import { forwardRef, omitThemingProps, useMultiStyleConfig, chakra, useColorMode } from '@chakra-ui/system';
+import React__default, { createElement, forwardRef as forwardRef$2, useRef, useEffect, useState, useMemo, Fragment, useCallback, createContext as createContext$1, useContext } from 'react';
+import { createContext } from '@chakra-ui/react-context';
+import { CheckCircle, Info, AlertTriangle, Close, EyeOff, Eye, Rating as Rating$1, Check } from '@ctlyst.id/internal-icon';
+import { cx as cx$1 } from '@chakra-ui/utils';
+import { forwardRef as forwardRef$1, useStyleConfig, Box, Button as Button$2, Badge as Badge$2, useToken, Text, useColorModeValue, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Card, Checkbox as Checkbox$1, FormControl, FormLabel as FormLabel$1, FormHelperText, FormErrorMessage, CheckboxGroup, Stack, Flex, Spinner, Table, Thead, Tr, Th, Tbody, Td, defineStyle, InputGroup, Input as Input$1, InputRightAddon, InputRightElement, theme as theme$1, InputLeftAddon, Textarea as Textarea$1, Image, useDisclosure, Popover as Popover$1, HStack, VStack, PopoverTrigger, Avatar, PopoverContent, PopoverArrow, PopoverBody, useColorMode as useColorMode$1, Container, Grid, Wrap, ModalBody as ModalBody$1, ModalCloseButton as ModalCloseButton$1, ModalFooter as ModalFooter$1, ModalHeader as ModalHeader$1, createIcon, Icon, Portal, Link, VisuallyHidden, Select as Select$1, Radio as Radio$1, RadioGroup, useMultiStyleConfig as useMultiStyleConfig$1, omitThemingProps as omitThemingProps$1, useCheckbox, chakra as chakra$1, useTab, TabList as TabList$1, TabPanel as TabPanel$1, Heading, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, defineStyleConfig as defineStyleConfig$1, extendTheme } from '@chakra-ui/react';
 export { AlertDialog, ModalBody as AlertDialogBody, ModalCloseButton as AlertDialogCloseButton, AlertDialogContent, ModalFooter as AlertDialogFooter, ModalHeader as AlertDialogHeader, ModalOverlay as AlertDialogOverlay, Drawer, ModalBody as DrawerBody, ModalCloseButton as DrawerCloseButton, DrawerContent, ModalFooter as DrawerFooter, ModalHeader as DrawerHeader, ModalOverlay as DrawerOverlay, InputLeftElement as InputElementLeft, InputRightElement as InputElementRight, Modal, ModalContent, ModalContextProvider, ModalFocusScope, ModalOverlay, TabIndicator, TabPanels, Tabs, TabsDescendantsProvider, TabsProvider, useDrawerContext, useModal, useModalContext, useModalStyles, useTab, useTabIndicator, useTabList, useTabPanel, useTabPanels, useTabs, useTabsContext, useTabsDescendant, useTabsDescendants, useTabsDescendantsContext, useTabsStyles } from '@chakra-ui/react';
-import React__default, { createElement, forwardRef as forwardRef$1, useRef, useEffect, useState, useMemo, Fragment, useCallback, createContext, useContext } from 'react';
 import { FiChevronsRight, FiHome, FiCalendar, FiX, FiPower, FiMoon, FiSun, FiShoppingBag, FiShoppingCart, FiRepeat, FiBox, FiLayers, FiDollarSign, FiUsers, FiRotateCcw, FiSettings, FiLayout, FiGift, FiChevronDown } from 'react-icons/fi';
 import { ChevronUpIcon, ChevronDownIcon, UpDownIcon, ArrowLeftIcon, ChevronLeftIcon, ChevronRightIcon, ArrowRightIcon } from '@chakra-ui/icons';
 import { css, Global, keyframes } from '@emotion/react';
 import { useReactTable, getCoreRowModel, getSortedRowModel, flexRender } from '@tanstack/react-table';
 import classnames from 'classnames';
 import ReactDatePicker from 'react-datepicker';
-import { useColorMode } from '@chakra-ui/system';
 import styled from '@emotion/styled';
-import { Close, EyeOff, Eye, Check } from '@ctlyst.id/internal-icon';
 import ReactSelect from 'react-select';
 import { AsyncPaginate } from 'react-select-async-paginate';
 import ReactSelectAsyncCreatable from 'react-select/async-creatable';
 import ReactSelectCreatable from 'react-select/creatable';
-import { cx, dataAttr } from '@chakra-ui/shared-utils';
 import { useDropzone } from 'react-dropzone';
 import { alertAnatomy, checkboxAnatomy, inputAnatomy, popoverAnatomy, radioAnatomy, switchAnatomy } from '@chakra-ui/anatomy';
 import { createMultiStyleConfigHelpers, cssVar, defineStyleConfig, defineStyle as defineStyle$1 } from '@chakra-ui/styled-system';
 import { transparentize, mode, calc, cssVar as cssVar$1 } from '@chakra-ui/theme-tools';
 import axios from 'axios';
 
+/* eslint-disable react/require-default-props */
+function CheckIcon() {
+  return /*#__PURE__*/React__default.createElement(CheckCircle, {
+    color: "inherit",
+    size: 4
+  });
+}
+function InfoIcon() {
+  return /*#__PURE__*/React__default.createElement(Info, {
+    color: "inherit",
+    size: 4
+  });
+}
+function WarningIcon() {
+  return /*#__PURE__*/React__default.createElement(AlertTriangle, {
+    color: "inherit",
+    size: 4
+  });
+}
+
+const [AlertProvider, useAlertContext] = /*#__PURE__*/createContext({
+  name: 'AlertContext',
+  hookName: 'useAlertContext',
+  providerName: '<Alert />'
+});
+const [AlertStylesProvider, useAlertStyles] = /*#__PURE__*/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__*/forwardRef(function Alert(props, ref) {
+  var _props$colorScheme;
+  const {
+    status = 'info',
+    addRole = true,
+    children,
+    ...rest
+  } = omitThemingProps(props);
+  const colorScheme = (_props$colorScheme = props.colorScheme) !== null && _props$colorScheme !== void 0 ? _props$colorScheme : getStatusColorScheme(status);
+  const styles = 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(chakra.div, Object.assign({
+    "data-status": status,
+    role: addRole ? 'alert' : undefined,
+    ref: ref
+  }, rest, {
+    className: cx('chakra-alert', props.className),
+    __css: alertStyles
+  }), children)));
+});
+Alert.displayName = 'Alert';
+
+const Loader = /*#__PURE__*/forwardRef$1((props, ref) => {
+  const styles = useStyleConfig('LoaderStyle', props);
+  return /*#__PURE__*/React__default.createElement(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(Button$2, 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: cx$1('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(chakra.span, Object.assign({
+    display: "inherit",
+    "data-status": 'alert-close'
+  }, rest, {
+    className: cx('chakra-alert__close', className),
+    __css: css
+  }), children || /*#__PURE__*/React__default.createElement(Close, {
+    color: "inherit",
+    size: 4
+  }));
+}
+AlertClose.displayName = 'AlertClose';
+
+const AlertDescription = /*#__PURE__*/forwardRef(function AlertDescription(props, ref) {
+  const styles = useAlertStyles();
+  const {
+    status
+  } = useAlertContext();
+  const descriptionStyles = {
+    display: 'inline',
+    ...styles.description
+  };
+  return /*#__PURE__*/React__default.createElement(chakra.div, Object.assign({
+    ref: ref,
+    "data-status": status
+  }, props, {
+    className: 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(chakra.span, Object.assign({
+    display: "inherit",
+    "data-status": status
+  }, rest, {
+    className: cx('chakra-alert__icon', className),
+    __css: css
+  }), children || /*#__PURE__*/React__default.createElement(BaseIcon, null));
+}
+AlertIcon.displayName = 'AlertIcon';
+
+const AlertTitle = /*#__PURE__*/forwardRef(function AlertTitle(props, ref) {
+  const styles = useAlertStyles();
+  const {
+    status
+  } = useAlertContext();
+  return /*#__PURE__*/React__default.createElement(chakra.div, Object.assign({
+    ref: ref,
+    "data-status": status
+  }, props, {
+    className: cx('chakra-alert__title', props.className),
+    __css: styles.title
+  }));
+});
+AlertTitle.displayName = 'AlertTitle';
+
 const Badge = props => {
   const {
     children,
@@ -32,7 +262,7 @@ const Badge = props => {
     variant: "primary-solid",
     padding: "0 8px",
     height: "18px",
-    display: "flex",
+    display: "inline-flex",
     alignItems: "center",
     justifyContent: "space-between",
     textTransform: "none"
@@ -137,42 +367,7 @@ BreadCrumb.defaultProps = {
   spacing: 2
 };
 
-const Loader = /*#__PURE__*/forwardRef((props, ref) => {
-  const styles = useStyleConfig('LoaderStyle', props);
-  return /*#__PURE__*/React__default.createElement(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(Button$2, Object.assign({
-    size: size,
-    variant: variant,
-    spinner: /*#__PURE__*/React__default.createElement(Loader, {
-      size: getLoaderSize(),
-      color: getLoaderColor()
-    })
-  }, rest), children);
-};
-
-const CardCustom = /*#__PURE__*/forwardRef$1(({
+const CardCustom = /*#__PURE__*/forwardRef$2(({
   children,
   ...rest
 }, ref) => {
@@ -2290,7 +2485,7 @@ const ModalBody = /*#__PURE__*/React__default.forwardRef(({
   }, rest), children);
 });
 
-const ModalCloseButton = /*#__PURE__*/forwardRef$1((props, ref) => {
+const ModalCloseButton = /*#__PURE__*/forwardRef$2((props, ref) => {
   return /*#__PURE__*/React__default.createElement(ModalCloseButton$1, Object.assign({
     ref: ref,
     top: 4,
@@ -2300,7 +2495,7 @@ const ModalCloseButton = /*#__PURE__*/forwardRef$1((props, ref) => {
   }, props));
 });
 
-const ModalFooter = /*#__PURE__*/forwardRef$1(({
+const ModalFooter = /*#__PURE__*/forwardRef$2(({
   children,
   ...rest
 }, ref) => {
@@ -2311,7 +2506,7 @@ const ModalFooter = /*#__PURE__*/forwardRef$1(({
   }, rest), children);
 });
 
-const ModalHeader = /*#__PURE__*/forwardRef$1(({
+const ModalHeader = /*#__PURE__*/forwardRef$2(({
   children,
   ...rest
 }, ref) => {
@@ -2462,7 +2657,7 @@ Navigation.defaultProps = {
   host: undefined
 };
 
-const PaginationButton = /*#__PURE__*/forwardRef(({
+const PaginationButton = /*#__PURE__*/forwardRef$1(({
   className,
   style,
   isActive,
@@ -2744,6 +2939,18 @@ RadioGroupComponent.defaultProps = {
   errorMessage: ''
 };
 
+const Rating = ({
+  value
+}) => {
+  return /*#__PURE__*/React__default.createElement(Grid, {
+    gap: '4px',
+    display: "flex"
+  }, [...Array(5)].map((_, i) => /*#__PURE__*/React__default.createElement(Rating$1, {
+    color: i < value ? '#FFA230' : '#E0E0E0',
+    size: 24
+  })));
+};
+
 const SelectWrapper = ({
   children,
   isError = false
@@ -2942,8 +3149,8 @@ function SelectCreatable({
  * @see Docs https://chakra-ui.com/docs/components/switch
  * @see WAI-ARIA https://www.w3.org/WAI/ARIA/apg/patterns/switch/
  */
-const Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
-  const styles = useMultiStyleConfig('Switch', props);
+const Switch = /*#__PURE__*/forwardRef$1(function Switch(props, ref) {
+  const styles = useMultiStyleConfig$1('Switch', props);
   const {
     size = 'md'
   } = props;
@@ -2951,7 +3158,7 @@ const Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
     spacing = '0.5rem',
     children,
     ...ownProps
-  } = omitThemingProps(props);
+  } = omitThemingProps$1(props);
   const {
     state,
     getInputProps,
@@ -2988,7 +3195,7 @@ const Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
     };
     return iconSize[value];
   };
-  return /*#__PURE__*/React__default.createElement(chakra.label, Object.assign({}, getRootProps(), {
+  return /*#__PURE__*/React__default.createElement(chakra$1.label, Object.assign({}, getRootProps(), {
     display: "flex",
     alignItems: "center",
     className: cx('chakra-switch', props.className),
@@ -2996,7 +3203,7 @@ const Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
   }), /*#__PURE__*/React__default.createElement("input", Object.assign({
     "data-test-id": "",
     className: "chakra-switch__input"
-  }, getInputProps({}, ref))), /*#__PURE__*/React__default.createElement(chakra.span, Object.assign({}, getCheckboxProps(), {
+  }, getInputProps({}, ref))), /*#__PURE__*/React__default.createElement(chakra$1.span, Object.assign({}, getCheckboxProps(), {
     className: "chakra-switch__track",
     pos: "relative",
     __css: trackStyles
@@ -3012,12 +3219,12 @@ const Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
   }), /*#__PURE__*/React__default.createElement(Close, {
     color: state.isDisabled ? 'neutral.600' : 'neutral.900',
     size: getIconSize(size)
-  })), /*#__PURE__*/React__default.createElement(chakra.span, {
+  })), /*#__PURE__*/React__default.createElement(chakra$1.span, {
     __css: styles.thumb,
     className: "chakra-switch__thumb",
     "data-checked": dataAttr(state.isChecked),
     "data-hover": dataAttr(state.isHovered)
-  })), children && /*#__PURE__*/React__default.createElement(chakra.span, Object.assign({
+  })), children && /*#__PURE__*/React__default.createElement(chakra$1.span, Object.assign({
     className: "chakra-switch__label",
     color: state.isDisabled ? 'black.low' : 'black.high'
   }, getLabelProps(), {
@@ -3025,14 +3232,14 @@ const Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
   }), children));
 });
 
-const Tab = /*#__PURE__*/forwardRef((props, ref) => {
+const Tab = /*#__PURE__*/forwardRef$1((props, ref) => {
   var _props$leftAddon, _props$rightAddon;
   const tabProps = useTab({
     ...props,
     ref
   });
   const isSelected = !!tabProps['aria-selected'];
-  const styles = useMultiStyleConfig('Tabs', tabProps);
+  const styles = useMultiStyleConfig$1('Tabs', tabProps);
   return /*#__PURE__*/createElement(Button$2, Object.assign({
     p: 3,
     fontSize: "text.md",
@@ -3053,13 +3260,13 @@ const Tab = /*#__PURE__*/forwardRef((props, ref) => {
   })));
 });
 
-const TabList = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(TabList$1, {
+const TabList = /*#__PURE__*/forwardRef$1((props, ref) => /*#__PURE__*/React__default.createElement(TabList$1, {
   borderBottom: "1px solid",
   borderColor: useColorModeValue('gray.200', 'bright-gray.800'),
   ref: ref
 }, props.children));
 
-const TabPanel = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(TabPanel$1, {
+const TabPanel = /*#__PURE__*/forwardRef$1((props, ref) => /*#__PURE__*/React__default.createElement(TabPanel$1, {
   px: 0,
   ref: ref
 }, props.children));
@@ -4259,7 +4466,7 @@ const theme = /*#__PURE__*/extendTheme({
   config
 });
 
-const ProviderContext = /*#__PURE__*/createContext({
+const ProviderContext = /*#__PURE__*/createContext$1({
   instance: undefined
 });
 const useInternalUI = () => {
@@ -4294,5 +4501,5 @@ const Provider = ({
 };
 Provider.displayName = 'Provider';
 
-export { Badge, Box, BreadCrumb, Button, CardCustom as Card, CheckboxComponent as Checkbox, CheckboxGroupComponent as CheckboxGroup, Container, DataTable, DatePickerMonth, Datepicker, Field, Flex, Grid, Header, InputAddonLeft, InputAddonRight, InputField, Loader, Navigation as MainMenu, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, MultiDatePickerMonth, Pagination, PaginationDetail, PaginationFilter, Provider, ProviderContext, RadioComponent as Radio, RadioGroupComponent as RadioGroup, Select, SelectAsync, SelectAsyncCreatable, SelectCreatable, Stack, Switch, Tab, TabList, TabPanel, Text, TextareaField, Uploader, Wrap, foundations, theme, useInternalUI };
+export { Alert, AlertAction, AlertClose, AlertDescription, AlertIcon, AlertTitle, Badge, Box, BreadCrumb, Button, CardCustom as Card, CheckboxComponent as Checkbox, CheckboxGroupComponent as CheckboxGroup, Container, DataTable, DatePickerMonth, Datepicker, Field, Flex, Grid, Header, InputAddonLeft, InputAddonRight, InputField, Loader, Navigation as MainMenu, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, MultiDatePickerMonth, Pagination, PaginationDetail, PaginationFilter, Provider, ProviderContext, RadioComponent as Radio, RadioGroupComponent as RadioGroup, Rating, Select, SelectAsync, SelectAsyncCreatable, SelectCreatable, Stack, Switch, Tab, TabList, TabPanel, Text, TextareaField, Uploader, Wrap, foundations, theme, useAlertStyles, useInternalUI };
 //# sourceMappingURL=internal-ui.esm.js.map