@ctlyst.id/internal-ui 1.1.0-canary.0 → 2.0.0-canary.1

package/dist/internal-ui.esm.js

@@ -1,6 +1,6 @@
-import { useToken, Box, Text, useColorModeValue, Breadcrumb, BreadcrumbItem, BreadcrumbLink, useStyleConfig, Card, Checkbox as Checkbox$1, Flex, Spinner, Table, Thead, Tr, Th, Tbody, Td, InputGroup, Input as Input$1, InputRightAddon, FormControl, FormLabel as FormLabel$1, InputRightElement, FormHelperText, FormErrorMessage, theme as theme$1, InputLeftAddon, InputLeftElement, Textarea as Textarea$1, Image, useDisclosure, Popover as Popover$1, HStack, VStack, PopoverTrigger, Avatar, PopoverContent, PopoverArrow, PopoverBody, useColorMode as useColorMode$1, Badge, forwardRef as forwardRef$1, ModalBody as ModalBody$1, ModalCloseButton as ModalCloseButton$1, ModalFooter as ModalFooter$1, ModalHeader as ModalHeader$1, createIcon, Icon, Portal, Link, Button as Button$1, VisuallyHidden, Select as Select$1, useTab, useMultiStyleConfig, TabList as TabList$1, TabPanel as TabPanel$1, Stack, Heading, createMultiStyleConfigHelpers, extendTheme } from '@chakra-ui/react';
+import { useToken, Box, Text, useColorModeValue, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Checkbox as Checkbox$1, Flex, Spinner, Table, Thead, Tr, Th, Tbody, Td, InputGroup, Input as Input$1, InputRightAddon, FormControl, FormLabel as FormLabel$1, InputRightElement, FormHelperText, FormErrorMessage, theme as theme$1, InputLeftAddon, InputLeftElement, forwardRef, useStyleConfig, Textarea as Textarea$1, Image, useDisclosure, Popover as Popover$1, HStack, VStack, PopoverTrigger, Avatar, PopoverContent, PopoverArrow, PopoverBody, useColorMode as useColorMode$1, Badge, ModalBody as ModalBody$1, ModalCloseButton as ModalCloseButton$1, ModalFooter as ModalFooter$1, ModalHeader as ModalHeader$1, createIcon, Icon, Portal, Link, Button as Button$1, VisuallyHidden, Select as Select$1, useTab, useMultiStyleConfig, TabList as TabList$1, TabPanel as TabPanel$1, Stack, Heading, createMultiStyleConfigHelpers, defineStyleConfig as defineStyleConfig$1, defineStyle as defineStyle$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, 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, useRef, useEffect, useState, useMemo, Fragment, useCallback, createContext, useContext } from 'react';
+import React__default, { createElement, useRef, useEffect, useState, useMemo, Fragment, forwardRef as forwardRef$1, 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';
@@ -15,8 +15,8 @@ import ReactSelectAsyncCreatable from 'react-select/async-creatable';
 import ReactSelectCreatable from 'react-select/creatable';
 import { useDropzone } from 'react-dropzone';
 import { mode, getColor } from '@chakra-ui/theme-tools';
-import { defineStyleConfig, defineStyle, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1 } from '@chakra-ui/styled-system';
 import { checkboxAnatomy, inputAnatomy, popoverAnatomy, radioAnatomy, switchAnatomy } from '@chakra-ui/anatomy';
+import { defineStyleConfig, defineStyle, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1 } from '@chakra-ui/styled-system';
 import '@fontsource/poppins';
 import axios from 'axios';
 
@@ -115,22 +115,6 @@ BreadCrumb.defaultProps = {
   spacing: 2
 };
 
-const CardCustom = /*#__PURE__*/forwardRef(({
-  children,
-  ...rest
-}, ref) => {
-  const styles = useStyleConfig('Card', rest);
-  return /*#__PURE__*/React__default.createElement(Card, Object.assign({
-    __css: styles,
-    backgroundColor: "white.high",
-    ref: ref
-  }, rest), children);
-});
-CardCustom.defaultProps = {
-  withShadow: true,
-  isRounded: true
-};
-
 function CheckboxComponent({
   isError = false,
   helpText = '',
@@ -1792,6 +1776,7 @@ const Field = props => {
   return /*#__PURE__*/React__default.createElement(FormControl, {
     isInvalid: isError
   }, label && (typeof label === 'string' ? /*#__PURE__*/React__default.createElement(FormLabel$1, {
+    mb: 1,
     fontSize: "text.sm",
     requiredIndicator: undefined
   }, isRequired && /*#__PURE__*/React__default.createElement(Box, {
@@ -1871,21 +1856,36 @@ InputField.defaultProps = {
   elementRight: undefined
 };
 
+const Loader = /*#__PURE__*/forwardRef((props, ref) => {
+  const styles = useStyleConfig('LoaderStyle', props);
+  return /*#__PURE__*/React__default.createElement(Box, {
+    ref: ref,
+    __css: styles
+  });
+});
+
 const TextareaField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     value,
+    isLoading,
     ...inputProps
   } = props;
-  return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, inputProps), /*#__PURE__*/React__default.createElement(Textarea$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, inputProps), /*#__PURE__*/React__default.createElement(Box, {
+    position: "relative"
+  }, /*#__PURE__*/React__default.createElement(Textarea$1, Object.assign({
     ref: ref,
     value: value
-  }, inputProps)));
+  }, inputProps)), isLoading && /*#__PURE__*/React__default.createElement(Box, {
+    zIndex: 999,
+    top: 2,
+    right: 2,
+    position: "absolute"
+  }, /*#__PURE__*/React__default.createElement(Loader, {
+    size: "sm"
+  }))));
 });
 TextareaField.defaultProps = {
-  addOnLeft: undefined,
-  addOnRight: undefined,
-  elementLeft: undefined,
-  elementRight: undefined
+  isLoading: undefined
 };
 
 const XMSLogo = () => /*#__PURE__*/React__default.createElement(Image, {
@@ -2072,14 +2072,6 @@ Header.defaultProps = {
   hideSwitchMode: false
 };
 
-const Loader = /*#__PURE__*/forwardRef$1((props, ref) => {
-  const styles = useStyleConfig('LoaderStyle', props);
-  return /*#__PURE__*/React__default.createElement(Box, {
-    ref: ref,
-    __css: styles
-  });
-});
-
 const ModalBody = /*#__PURE__*/React__default.forwardRef(({
   children,
   ...rest
@@ -2090,7 +2082,7 @@ const ModalBody = /*#__PURE__*/React__default.forwardRef(({
   }, rest), children);
 });
 
-const ModalCloseButton = /*#__PURE__*/forwardRef((props, ref) => {
+const ModalCloseButton = /*#__PURE__*/forwardRef$1((props, ref) => {
   return /*#__PURE__*/React__default.createElement(ModalCloseButton$1, Object.assign({
     ref: ref,
     top: 4,
@@ -2100,7 +2092,7 @@ const ModalCloseButton = /*#__PURE__*/forwardRef((props, ref) => {
   }, props));
 });
 
-const ModalFooter = /*#__PURE__*/forwardRef(({
+const ModalFooter = /*#__PURE__*/forwardRef$1(({
   children,
   ...rest
 }, ref) => {
@@ -2111,7 +2103,7 @@ const ModalFooter = /*#__PURE__*/forwardRef(({
   }, rest), children);
 });
 
-const ModalHeader = /*#__PURE__*/forwardRef(({
+const ModalHeader = /*#__PURE__*/forwardRef$1(({
   children,
   ...rest
 }, ref) => {
@@ -2262,7 +2254,7 @@ Navigation.defaultProps = {
   host: undefined
 };
 
-const PaginationButton = /*#__PURE__*/forwardRef$1(({
+const PaginationButton = /*#__PURE__*/forwardRef(({
   className,
   style,
   isActive,
@@ -2674,7 +2666,7 @@ function SelectCreatable({
   })));
 }
 
-const Tab = /*#__PURE__*/forwardRef$1((props, ref) => {
+const Tab = /*#__PURE__*/forwardRef((props, ref) => {
   var _props$leftAddon, _props$rightAddon;
   const tabProps = useTab({
     ...props,
@@ -2702,13 +2694,13 @@ const Tab = /*#__PURE__*/forwardRef$1((props, ref) => {
   })));
 });
 
-const TabList = /*#__PURE__*/forwardRef$1((props, ref) => /*#__PURE__*/React__default.createElement(TabList$1, {
+const TabList = /*#__PURE__*/forwardRef((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$1((props, ref) => /*#__PURE__*/React__default.createElement(TabPanel$1, {
+const TabPanel = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(TabPanel$1, {
   px: 0,
   ref: ref
 }, props.children));
@@ -2907,15 +2899,6 @@ const Button = {
   }
 };
 
-const CardStyle = /*#__PURE__*/defineStyleConfig({
-  baseStyle: props => {
-    return {
-      shadow: props.withShadow ? 'raised' : 'none',
-      borderRadius: props.isRounded ? 'lg' : 'none'
-    };
-  }
-});
-
 const {
   definePartsStyle,
   defineMultiStyleConfig
@@ -3339,37 +3322,90 @@ const Switch = /*#__PURE__*/defineMultiStyleConfig$2({
   baseStyle: baseStyle$3
 });
 
-const Textarea = {
-  baseStyle: {
+const getProps = props => {
+  const {
+    isError,
+    isSuccess,
+    isDisabled
+  } = props;
+  let borderColor = 'neutral.400';
+  let focusBorderColor = 'primary.500';
+  if (isError) {
+    borderColor = 'danger.500';
+    focusBorderColor = 'danger.500';
+  } else if (isSuccess) {
+    borderColor = 'success.500';
+    focusBorderColor = 'success.500';
+  } else if (isDisabled && !isError && !isSuccess) {
+    borderColor = 'neutral.400';
+    focusBorderColor = 'danger.500';
+  }
+  return {
+    focusBorderColor,
+    borderColor
+  };
+};
+const outline$1 = /*#__PURE__*/defineStyle$1(props => {
+  const {
+    focusBorderColor,
+    borderColor
+  } = getProps(props);
+  return {
+    background: 'white.high',
+    color: 'black.high',
+    borderColor,
+    fontSize: 'text.sm',
+    padding: 2,
+    borderRadius: 'md',
+    borderWidth: '1px',
+    outline: 'none',
+    _disabled: {
+      opacity: 1,
+      color: 'black.low',
+      background: 'neutral.300'
+    },
+    _placeholder: {
+      color: 'black.low'
+    },
     _hover: {
-      borderColor: 'primary.500',
-      boxShadow: 'none',
-      outline: 'none'
+      borderColor
     },
     _focus: {
-      borderColor: 'primary.500',
-      boxShadow: 'none',
-      outline: 'none'
+      outline: 'none',
+      borderColor: focusBorderColor,
+      boxShadow: 'none'
     },
     _focusVisible: {
-      borderColor: 'primary.500',
-      boxShadow: 'none',
-      outline: 'none'
+      outline: 'none',
+      borderColor: focusBorderColor,
+      boxShadow: 'none'
     },
     _focusWithin: {
-      borderColor: 'primary.500',
-      boxShadow: 'none',
-      outline: 'none'
+      outline: 'none',
+      borderColor: focusBorderColor,
+      boxShadow: 'none'
+    },
+    _invalid: {
+      outline: 'none',
+      borderColor: 'danger.500',
+      boxShadow: 'none'
     }
+  };
+});
+const Textarea = /*#__PURE__*/defineStyleConfig$1({
+  variants: {
+    outline: outline$1
+  },
+  defaultProps: {
+    variant: 'outline'
   }
-};
+});
 
 
 
 var components = {
   __proto__: null,
   Button: Button,
-  Card: CardStyle,
   Checkbox: Checkbox,
   FormLabel: FormLabel,
   Input: Input,
@@ -3438,5 +3474,5 @@ const Provider = ({
 };
 Provider.displayName = 'Provider';
 
-export { BreadCrumb, CardCustom as Card, CheckboxComponent as Checkbox, DataTable, DatePickerMonth, Datepicker, Field, Header, InputField, Loader, Navigation as MainMenu, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, MultiDatePickerMonth, Pagination, PaginationDetail, PaginationFilter, Provider, ProviderContext, Select, SelectAsync, SelectAsyncCreatable, SelectCreatable, Tab, TabList, TabPanel, TextareaField, Uploader, theme, useInternalUI };
+export { BreadCrumb, CheckboxComponent as Checkbox, DataTable, DatePickerMonth, Datepicker, Field, Header, InputField, Loader, Navigation as MainMenu, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, MultiDatePickerMonth, Pagination, PaginationDetail, PaginationFilter, Provider, ProviderContext, Select, SelectAsync, SelectAsyncCreatable, SelectCreatable, Tab, TabList, TabPanel, TextareaField, Uploader, theme, useInternalUI };
 //# sourceMappingURL=internal-ui.esm.js.map