@ctlyst.id/internal-ui 2.0.23 → 2.0.25

package/dist/internal-ui.esm.js

@@ -18,7 +18,7 @@ import { AsyncPaginate } from 'react-select-async-paginate';
 import ReactSelectAsyncCreatable from 'react-select/async-creatable';
 import ReactSelectCreatable from 'react-select/creatable';
 import { useDropzone } from 'react-dropzone';
-import { alertAnatomy, checkboxAnatomy, inputAnatomy, popoverAnatomy, radioAnatomy, switchAnatomy } from '@chakra-ui/anatomy';
+import { alertAnatomy, checkboxAnatomy, inputAnatomy, popoverAnatomy, radioAnatomy, switchAnatomy, tableAnatomy } 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';
@@ -4460,6 +4460,198 @@ const Switch$1 = /*#__PURE__*/defineMultiStyleConfig$4({
   }
 });
 
+const {
+  defineMultiStyleConfig: defineMultiStyleConfig$5,
+  definePartsStyle: definePartsStyle$6
+} = /*#__PURE__*/createMultiStyleConfigHelpers(tableAnatomy.keys);
+const baseStyle$6 = /*#__PURE__*/definePartsStyle$6({
+  table: {
+    fontVariantNumeric: 'lining-nums tabular-nums',
+    borderCollapse: 'collapse',
+    width: 'full'
+  },
+  th: {
+    fontFamily: 'heading',
+    fontWeight: 'bold',
+    textTransform: 'uppercase',
+    letterSpacing: 'wider',
+    textAlign: 'start',
+    height: '50px'
+  },
+  td: {
+    textAlign: 'start',
+    height: '56px'
+  },
+  caption: {
+    mt: 4,
+    fontFamily: 'heading',
+    textAlign: 'center',
+    fontWeight: 'medium'
+  }
+});
+const numericStyles = /*#__PURE__*/defineStyle$1({
+  '&[data-is-numeric=true]': {
+    textAlign: 'end'
+  }
+});
+const variantSimple = /*#__PURE__*/definePartsStyle$6(props => {
+  const {
+    colorScheme: c
+  } = props;
+  return {
+    th: {
+      color: mode('gray.600', 'gray.400')(props),
+      borderBottom: '1px',
+      borderColor: mode(`${c}.100`, `${c}.700`)(props),
+      ...numericStyles
+    },
+    td: {
+      borderBottom: '1px',
+      borderColor: mode(`${c}.100`, `${c}.700`)(props),
+      ...numericStyles
+    },
+    caption: {
+      color: mode('gray.600', 'gray.100')(props)
+    },
+    tfoot: {
+      tr: {
+        '&:last-of-type': {
+          th: {
+            borderBottomWidth: 0
+          }
+        }
+      }
+    }
+  };
+});
+const variantStripe = /*#__PURE__*/definePartsStyle$6(props => {
+  const {
+    colorScheme: c
+  } = props;
+  return {
+    th: {
+      color: mode('gray.600', 'gray.400')(props),
+      borderBottom: '1px',
+      borderColor: mode(`${c}.100`, `${c}.700`)(props),
+      ...numericStyles
+    },
+    td: {
+      borderBottom: '1px',
+      borderColor: mode(`${c}.100`, `${c}.700`)(props),
+      ...numericStyles
+    },
+    caption: {
+      color: mode('gray.600', 'gray.100')(props)
+    },
+    tbody: {
+      tr: {
+        '&:nth-of-type(odd)': {
+          'th, td': {
+            borderBottomWidth: '1px',
+            borderColor: mode(`${c}.100`, `${c}.700`)(props)
+          },
+          td: {
+            background: mode(`${c}.100`, `${c}.700`)(props)
+          }
+        }
+      }
+    },
+    tfoot: {
+      tr: {
+        '&:last-of-type': {
+          th: {
+            borderBottomWidth: 0
+          }
+        }
+      }
+    }
+  };
+});
+const variants$4 = {
+  simple: variantSimple,
+  striped: variantStripe,
+  unstyled: /*#__PURE__*/defineStyle$1({})
+};
+const sizes$3 = {
+  sm: /*#__PURE__*/definePartsStyle$6({
+    th: {
+      px: '4',
+      py: '1',
+      lineHeight: '4',
+      fontSize: 'xs'
+    },
+    td: {
+      px: '4',
+      py: '2',
+      fontSize: 'sm',
+      lineHeight: '4'
+    },
+    caption: {
+      px: '4',
+      py: '2',
+      fontSize: 'xs'
+    }
+  }),
+  md: /*#__PURE__*/definePartsStyle$6({
+    th: {
+      px: '2',
+      py: '4',
+      lineHeight: '4',
+      fontSize: 'xs',
+      '&:first-of-type': {
+        pl: 6
+      },
+      '&:last-of-type': {
+        pr: 6
+      }
+    },
+    td: {
+      px: '2',
+      py: '4',
+      lineHeight: '5',
+      '&:first-of-type': {
+        pl: 6
+      },
+      '&:last-of-type': {
+        pr: 6
+      }
+    },
+    caption: {
+      px: '6',
+      py: '2',
+      fontSize: 'sm'
+    }
+  }),
+  lg: /*#__PURE__*/definePartsStyle$6({
+    th: {
+      px: '8',
+      py: '4',
+      lineHeight: '5',
+      fontSize: 'sm'
+    },
+    td: {
+      px: '8',
+      py: '5',
+      lineHeight: '6'
+    },
+    caption: {
+      px: '6',
+      py: '2',
+      fontSize: 'md'
+    }
+  })
+};
+const tableTheme = /*#__PURE__*/defineMultiStyleConfig$5({
+  baseStyle: baseStyle$6,
+  variants: variants$4,
+  sizes: sizes$3,
+  defaultProps: {
+    variant: 'simple',
+    size: 'md',
+    colorScheme: 'gray'
+  }
+});
+
 const getProps = props => {
   const {
     isError,
@@ -4555,6 +4747,7 @@ var components = {
   Popover: Popover,
   Radio: Radio,
   Switch: Switch$1,
+  Table: tableTheme,
   Textarea: Textarea
 };