@ctlyst.id/internal-ui 2.0.6 → 2.0.8

package/dist/components/button/__stories__/button.stories.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 declare const _default: {
     chakra: {
         theme: Record<string, any>;

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

@@ -1,2 +1,3 @@
 export { default as Button } from './components/button';
 export * from './components/button';
+export { ButtonGroup, ButtonGroupProps, CloseButton, CloseButtonProps } from '@chakra-ui/react';

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

@@ -0,0 +1 @@
+export { Icon, IconProps, Image, ImageProps } from '@chakra-ui/react';

package/dist/components/index.d.ts

@@ -20,4 +20,5 @@ export * from './select';
 export * from './switch';
 export * from './tabs';
 export * from './text';
+export * from './tooltip';
 export * from './uploader';

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

@@ -1,12 +1 @@
-export { default as Box } from './components/box';
-export * from './components/box';
-export { default as Container } from './components/container';
-export * from './components/container';
-export { default as Flex } from './components/flex';
-export * from './components/flex';
-export { default as Grid } from './components/grid';
-export * from './components/grid';
-export { default as Stack } from './components/stack';
-export * from './components/stack';
-export { default as Wrap } from './components/wrap';
-export * from './components/wrap';
+export { Box, BoxProps, Container, ContainerProps, Divider, DividerProps, Flex, FlexProps, Grid, GridItem, GridItemProps, GridProps, HStack, Stack, StackProps, VStack, Wrap, WrapItem, WrapItemProps, WrapProps, } from '@chakra-ui/react';

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

@@ -0,0 +1 @@
+export { List, ListIcon, ListItem, ListItemProps, ListProps, OrderedList, UnorderedList } from '@chakra-ui/react';

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

@@ -0,0 +1 @@
+export { Popover, PopoverAnchor, PopoverArrow, PopoverArrowProps, PopoverBody, PopoverBodyProps, PopoverCloseButton, PopoverContent, PopoverContentProps, PopoverFooter, PopoverFooterProps, PopoverHeader, PopoverHeaderProps, PopoverProps, PopoverTrigger, Portal, PortalProps, } from '@chakra-ui/react';

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

@@ -1,2 +1 @@
-export { default as Text } from './components/text';
-export * from './components/text';
+export { Heading, HeadingProps, Text, TextProps } from '@chakra-ui/react';

package/dist/components/tooltip/__stories__/tooltip.stories.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare const _default: {
+    chakra: {
+        theme: Record<string, any>;
+    };
+    title: string;
+    decorators: ((Story: React.ElementType) => JSX.Element)[];
+};
+export default _default;
+export declare const Default: () => JSX.Element;

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

@@ -0,0 +1 @@
+export { Tooltip, TooltipProps } from '@chakra-ui/react';

package/dist/config/theme/components/checkbox.d.ts

@@ -8,7 +8,6 @@ declare const Checkbox: {
         };
         icon: {
             color: string;
-            width: string;
         };
         label: {
             fontWeight: string;
@@ -48,6 +47,9 @@ declare const Checkbox: {
             label: {
                 fontSize: string;
             };
+            icon: {
+                fontSize: string;
+            };
         };
         unstyled: {
             control: {
@@ -62,6 +64,7 @@ declare const Checkbox: {
                     _disabled: {
                         backgroundColor: string;
                         borderColor: string;
+                        opacity: number;
                     };
                 };
                 _disabled: {
@@ -71,10 +74,21 @@ declare const Checkbox: {
                 _indeterminate: {
                     borderColor: string;
                     backgroundColor: string;
+                    _disabled: {
+                        backgroundColor: string;
+                        borderColor: string;
+                        opacity: number;
+                    };
                 };
             };
             label: {
                 fontSize: string;
+                _disabled: {
+                    opacity: number;
+                };
+            };
+            icon: {
+                fontSize: string;
             };
         };
     } | undefined;

package/dist/config/theme/components/chips.d.ts

@@ -13,9 +13,12 @@ declare const Chips: {
     sizes?: {
         sm: {
             fontSize: string;
+            lineHeight: number;
         };
         md: {
             fontSize: string;
+            paddingY: number;
+            lineHeight: number;
         };
     } | undefined;
     variants?: {

package/dist/config/theme/components/radio.d.ts

@@ -10,6 +10,7 @@ declare const Radio: {
             textStyle: string;
             color: string;
             _disabled: {
+                opacity: number;
                 color: string;
             };
         };
@@ -42,6 +43,7 @@ declare const Radio: {
                             h: string;
                             w: string;
                             bg: string;
+                            opacity: number;
                         };
                     };
                 };
@@ -72,6 +74,7 @@ declare const Radio: {
                     _disabled: {
                         borderColor: string;
                         bg: string;
+                        opacity: number;
                         _before: {
                             h: string;
                             w: string;

package/dist/hooks/index.d.ts

@@ -1 +1,2 @@
 export { default as useFetcher } from './useFetcher';
+export { useColorModeValue, useDisclosure, UseDisclosureProps } from '@chakra-ui/react';

package/dist/index.d.ts

@@ -1,3 +1,5 @@
 export * from './components';
 export * from './config';
+export * from './hooks';
 export * from './provider';
+export { extendTheme } from '@chakra-ui/react';

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

@@ -405,15 +405,21 @@ function CheckboxComponent({
   }, rest, {
     isDisabled: isDisabled
   }), children && /*#__PURE__*/React__default.createElement(react.Text, {
+    as: "span",
+    display: "block",
     textStyle: "text.sm",
-    color: isDisabled ? 'black.low' : 'black.high'
+    color: isDisabled ? 'black.medium' : 'black.high'
   }, children))), /*#__PURE__*/React__default.createElement(react.Box, {
     mt: "5px",
     ml: "24px"
   }, isError ? /*#__PURE__*/React__default.createElement(react.Text, {
+    as: "span",
+    display: "block",
     textStyle: "text.xs",
     color: "danger.500"
   }, errorText) : /*#__PURE__*/React__default.createElement(react.Text, {
+    as: "span",
+    display: "block",
     textStyle: "text.xs",
     color: "black.medium"
   }, helpText)));
@@ -2355,7 +2361,8 @@ const Profile = ({
   }, (data === null || data === void 0 ? void 0 : data.office) && /*#__PURE__*/React.createElement(react.Text, {
     color: "neutral.700",
     display: "inline-block",
-    mr: 0.5
+    mr: 0.5,
+    as: "span"
   }, data.office, " |", ' '), data === null || data === void 0 ? void 0 : data.userRole)), /*#__PURE__*/React.createElement(react.PopoverTrigger, null, /*#__PURE__*/React.createElement(react.Avatar, {
     size: 'sm',
     bg: "primary.500",
@@ -2905,15 +2912,21 @@ function RadioComponent({
   }, rest, {
     isDisabled: isDisabled
   }), children && /*#__PURE__*/React__default.createElement(react.Text, {
+    as: "span",
+    display: "block",
     textStyle: "text.sm",
-    color: isDisabled ? 'black.low' : 'black.high'
+    color: isDisabled ? 'black.medium' : 'black.high'
   }, children))), /*#__PURE__*/React__default.createElement(react.Box, {
     mt: "5px",
     ml: "24px"
   }, isError ? /*#__PURE__*/React__default.createElement(react.Text, {
+    as: "span",
+    display: "block",
     textStyle: "text.xs",
     color: "danger.500"
   }, errorText) : /*#__PURE__*/React__default.createElement(react.Text, {
+    as: "span",
+    display: "block",
     textStyle: "text.xs",
     color: "black.medium"
   }, helpText)));
@@ -3163,9 +3176,6 @@ function SelectCreatable({
  */
 const Switch = /*#__PURE__*/react.forwardRef(function Switch(props, ref) {
   const styles = react.useMultiStyleConfig('Switch', props);
-  const {
-    size = 'md'
-  } = props;
   const {
     spacing = '0.5rem',
     children,
@@ -3227,10 +3237,10 @@ const Switch = /*#__PURE__*/react.forwardRef(function Switch(props, ref) {
     transform: "translate(-50%, -50%)"
   }, /*#__PURE__*/React__default.createElement(internalIcon.Check, {
     color: "white",
-    size: getIconSize(size)
+    size: getIconSize(props.size)
   }), /*#__PURE__*/React__default.createElement(internalIcon.Close, {
     color: state.isDisabled ? 'neutral.600' : 'neutral.900',
-    size: getIconSize(size)
+    size: getIconSize(props.size)
   })), /*#__PURE__*/React__default.createElement(react.chakra.span, {
     __css: styles.thumb,
     className: "chakra-switch__thumb",
@@ -3243,6 +3253,9 @@ const Switch = /*#__PURE__*/react.forwardRef(function Switch(props, ref) {
     __css: labelStyles
   }), children));
 });
+Switch.defaultProps = {
+  size: 'sm'
+};
 
 const Tab = /*#__PURE__*/react.forwardRef((props, ref) => {
   var _props$leftAddon, _props$rightAddon;
@@ -3508,6 +3521,10 @@ const Badge$1 = {
       color: 'white'
     },
     'neutral-solid': {
+      bg: 'neutral.900',
+      color: 'white'
+    },
+    'disabled-solid': {
       bg: 'neutral.600',
       color: 'white'
     },
@@ -3532,7 +3549,11 @@ const Badge$1 = {
       color: 'danger.500'
     },
     'neutral-light': {
-      bg: 'neutral.100',
+      bg: 'neutral.200',
+      color: 'neutral.900'
+    },
+    'disabled-light': {
+      bg: 'neutral.200',
       color: 'neutral.600'
     }
   },
@@ -3831,8 +3852,7 @@ const baseStyle$1 = /*#__PURE__*/definePartsStyle$1({
     border: '1px solid'
   },
   icon: {
-    color: 'neutral.50',
-    width: '9px'
+    color: 'neutral.50'
   },
   label: {
     fontWeight: '400',
@@ -3841,8 +3861,8 @@ const baseStyle$1 = /*#__PURE__*/definePartsStyle$1({
     ml: '8px'
   },
   _disabled: {
-    background: 'neutral.500',
-    border: '1px solid',
+    background: 'neutral.200',
+    border: '0',
     borderColor: 'neutral.500',
     cursor: 'not-allowed'
   }
@@ -3865,11 +3885,14 @@ const errors = /*#__PURE__*/definePartsStyle$1({
   },
   label: {
     fontSize: '12px'
+  },
+  icon: {
+    fontSize: '7px'
   }
 });
 const unstyled = /*#__PURE__*/definePartsStyle$1({
   control: {
-    borderColor: 'neutral.500',
+    borderColor: 'neutral.600',
     _checked: {
       borderColor: 'primary.500',
       backgroundColor: 'primary.500',
@@ -3878,21 +3901,33 @@ const unstyled = /*#__PURE__*/definePartsStyle$1({
         backgroundColor: 'primary.600'
       },
       _disabled: {
-        backgroundColor: 'neutral.500',
-        borderColor: 'neutral.500'
+        backgroundColor: 'primary.500',
+        borderColor: 'primary.500',
+        opacity: 0.3
       }
     },
     _disabled: {
-      backgroundColor: 'neutral.500',
-      borderColor: 'neutral.500'
+      backgroundColor: 'neutral.200',
+      borderColor: 'neutral.200'
     },
     _indeterminate: {
       borderColor: 'primary.500',
-      backgroundColor: 'primary.500'
+      backgroundColor: 'primary.500',
+      _disabled: {
+        backgroundColor: 'primary.500',
+        borderColor: 'primary.500',
+        opacity: 0.3
+      }
     }
   },
   label: {
-    fontSize: '12px'
+    fontSize: '12px',
+    _disabled: {
+      opacity: 1
+    }
+  },
+  icon: {
+    fontSize: '7px'
   }
 });
 const variants$1 = {
@@ -3955,10 +3990,13 @@ const Chips = /*#__PURE__*/styledSystem.defineStyleConfig({
   },
   sizes: {
     sm: {
-      fontSize: '12px'
+      fontSize: '12px',
+      lineHeight: 4
     },
     md: {
-      fontSize: '14px'
+      fontSize: '14px',
+      paddingY: 2,
+      lineHeight: 5
     }
   },
   defaultProps: {
@@ -4018,7 +4056,7 @@ const size = {
   }),
   sm: /*#__PURE__*/styledSystem.defineStyle({
     fontSize: 'text.sm',
-    h: 9.5,
+    h: 9,
     borderRadius: 'md'
   })
 };
@@ -4202,7 +4240,8 @@ const baseStyle$4 = /*#__PURE__*/definePartsStyle$4({
     textStyle: 'text.sm',
     color: 'black.high',
     _disabled: {
-      color: 'black.low'
+      opacity: 1,
+      color: 'black.medium'
     }
   }
 });
@@ -4219,21 +4258,22 @@ const errors$1 = /*#__PURE__*/definePartsStyle$4({
       },
       _hover: {
         borderColor: 'danger.500',
-        bg: 'gray.200'
+        bg: 'neutral.200'
       },
       _disabled: {
         borderColor: 'danger.500',
-        bg: 'white',
+        bg: 'white.high',
         _before: {
           h: '10px',
           w: '10px',
-          bg: 'neutral.500'
+          bg: 'primary.500',
+          opacity: 0.3
         }
       }
     },
     _disabled: {
       borderColor: 'danger.500',
-      bg: 'neutral.500'
+      bg: 'neutral.200'
     }
   },
   label: {
@@ -4256,18 +4296,19 @@ const unstyled$2 = /*#__PURE__*/definePartsStyle$4({
         bg: 'gray.200'
       },
       _disabled: {
-        borderColor: 'neutral.500',
-        bg: 'white',
+        borderColor: 'primary.500',
+        bg: 'white.high',
+        opacity: 0.3,
         _before: {
           h: '10px',
           w: '10px',
-          bg: 'neutral.500'
+          bg: 'primary.500'
         }
       }
     },
     _disabled: {
-      borderColor: 'neutral.500',
-      bg: 'neutral.500'
+      borderColor: 'neutral.200',
+      bg: 'neutral.200'
     }
   },
   label: {
@@ -4514,6 +4555,35 @@ const Provider = ({
 };
 Provider.displayName = 'Provider';
 
+function useFetcher() {
+  const {
+    instance
+  } = useInternalUI();
+  const axiosInstance = React.useMemo(() => instance || axios, [instance]);
+  const fetcher = async ({
+    url,
+    data,
+    method,
+    headers,
+    ...config
+  }) => {
+    const response = await axiosInstance.request({
+      data,
+      url,
+      method,
+      headers: {
+        'Content-Type': 'application/json; charset=utf-8',
+        ...headers
+      },
+      ...config
+    });
+    return response;
+  };
+  return {
+    fetcher
+  };
+}
+
 Object.defineProperty(exports, 'AlertDialog', {
   enumerable: true,
   get: function () {
@@ -4556,6 +4626,42 @@ Object.defineProperty(exports, 'AlertDialogOverlay', {
     return react.ModalOverlay;
   }
 });
+Object.defineProperty(exports, 'Box', {
+  enumerable: true,
+  get: function () {
+    return react.Box;
+  }
+});
+Object.defineProperty(exports, 'ButtonGroup', {
+  enumerable: true,
+  get: function () {
+    return react.ButtonGroup;
+  }
+});
+Object.defineProperty(exports, 'ChakraProvider', {
+  enumerable: true,
+  get: function () {
+    return react.ChakraProvider;
+  }
+});
+Object.defineProperty(exports, 'CloseButton', {
+  enumerable: true,
+  get: function () {
+    return react.CloseButton;
+  }
+});
+Object.defineProperty(exports, 'Container', {
+  enumerable: true,
+  get: function () {
+    return react.Container;
+  }
+});
+Object.defineProperty(exports, 'Divider', {
+  enumerable: true,
+  get: function () {
+    return react.Divider;
+  }
+});
 Object.defineProperty(exports, 'Drawer', {
   enumerable: true,
   get: function () {
@@ -4598,6 +4704,36 @@ Object.defineProperty(exports, 'DrawerOverlay', {
     return react.ModalOverlay;
   }
 });
+Object.defineProperty(exports, 'Flex', {
+  enumerable: true,
+  get: function () {
+    return react.Flex;
+  }
+});
+Object.defineProperty(exports, 'Grid', {
+  enumerable: true,
+  get: function () {
+    return react.Grid;
+  }
+});
+Object.defineProperty(exports, 'GridItem', {
+  enumerable: true,
+  get: function () {
+    return react.GridItem;
+  }
+});
+Object.defineProperty(exports, 'HStack', {
+  enumerable: true,
+  get: function () {
+    return react.HStack;
+  }
+});
+Object.defineProperty(exports, 'Heading', {
+  enumerable: true,
+  get: function () {
+    return react.Heading;
+  }
+});
 Object.defineProperty(exports, 'InputElementLeft', {
   enumerable: true,
   get: function () {
@@ -4640,6 +4776,12 @@ Object.defineProperty(exports, 'ModalOverlay', {
     return react.ModalOverlay;
   }
 });
+Object.defineProperty(exports, 'Stack', {
+  enumerable: true,
+  get: function () {
+    return react.Stack;
+  }
+});
 Object.defineProperty(exports, 'TabIndicator', {
   enumerable: true,
   get: function () {
@@ -4670,6 +4812,54 @@ Object.defineProperty(exports, 'TabsProvider', {
     return react.TabsProvider;
   }
 });
+Object.defineProperty(exports, 'Text', {
+  enumerable: true,
+  get: function () {
+    return react.Text;
+  }
+});
+Object.defineProperty(exports, 'Tooltip', {
+  enumerable: true,
+  get: function () {
+    return react.Tooltip;
+  }
+});
+Object.defineProperty(exports, 'VStack', {
+  enumerable: true,
+  get: function () {
+    return react.VStack;
+  }
+});
+Object.defineProperty(exports, 'Wrap', {
+  enumerable: true,
+  get: function () {
+    return react.Wrap;
+  }
+});
+Object.defineProperty(exports, 'WrapItem', {
+  enumerable: true,
+  get: function () {
+    return react.WrapItem;
+  }
+});
+Object.defineProperty(exports, 'extendTheme', {
+  enumerable: true,
+  get: function () {
+    return react.extendTheme;
+  }
+});
+Object.defineProperty(exports, 'useColorModeValue', {
+  enumerable: true,
+  get: function () {
+    return react.useColorModeValue;
+  }
+});
+Object.defineProperty(exports, 'useDisclosure', {
+  enumerable: true,
+  get: function () {
+    return react.useDisclosure;
+  }
+});
 Object.defineProperty(exports, 'useDrawerContext', {
   enumerable: true,
   get: function () {
@@ -4767,19 +4957,15 @@ exports.AlertDescription = AlertDescription;
 exports.AlertIcon = AlertIcon;
 exports.AlertTitle = AlertTitle;
 exports.Badge = Badge;
-exports.Box = react.Box;
 exports.BreadCrumb = BreadCrumb;
 exports.Button = Button;
 exports.Card = CardCustom;
 exports.Checkbox = CheckboxComponent;
 exports.CheckboxGroup = CheckboxGroupComponent;
-exports.Container = react.Container;
 exports.DataTable = DataTable;
 exports.DatePickerMonth = DatePickerMonth;
 exports.Datepicker = Datepicker;
 exports.Field = Field;
-exports.Flex = react.Flex;
-exports.Grid = react.Grid;
 exports.Header = Header;
 exports.InputAddonLeft = InputAddonLeft;
 exports.InputAddonRight = InputAddonRight;
@@ -4803,17 +4989,15 @@ exports.Select = Select;
 exports.SelectAsync = SelectAsync;
 exports.SelectAsyncCreatable = SelectAsyncCreatable;
 exports.SelectCreatable = SelectCreatable;
-exports.Stack = react.Stack;
 exports.Switch = Switch;
 exports.Tab = Tab;
 exports.TabList = TabList;
 exports.TabPanel = TabPanel;
-exports.Text = react.Text;
 exports.TextareaField = TextareaField;
 exports.Uploader = Uploader;
-exports.Wrap = react.Wrap;
 exports.foundations = foundations;
 exports.theme = theme;
 exports.useAlertStyles = useAlertStyles;
+exports.useFetcher = useFetcher;
 exports.useInternalUI = useInternalUI;
 //# sourceMappingURL=internal-ui.cjs.development.js.map