@ctlyst.id/internal-ui 2.0.23 → 2.0.24

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

@@ -10,4 +10,5 @@ export { default as LoaderStyle } from './loader';
 export { default as Popover } from './popover';
 export { default as Radio } from './radio';
 export { default as Switch } from './switch';
+export { default as Table } from './table';
 export { default as Textarea } from './textarea';

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

@@ -0,0 +1,165 @@
+declare const tableTheme: {
+    baseStyle?: {
+        table: {
+            fontVariantNumeric: string;
+            borderCollapse: string;
+            width: string;
+        };
+        th: {
+            fontFamily: string;
+            fontWeight: string;
+            textTransform: string;
+            letterSpacing: string;
+            textAlign: string;
+            height: string;
+        };
+        td: {
+            textAlign: string;
+            height: string;
+        };
+        caption: {
+            mt: number;
+            fontFamily: string;
+            textAlign: string;
+            fontWeight: string;
+        };
+    } | undefined;
+    sizes?: {
+        sm: {
+            th: {
+                px: string;
+                py: string;
+                lineHeight: string;
+                fontSize: string;
+            };
+            td: {
+                px: string;
+                py: string;
+                fontSize: string;
+                lineHeight: string;
+            };
+            caption: {
+                px: string;
+                py: string;
+                fontSize: string;
+            };
+        };
+        md: {
+            th: {
+                px: string;
+                py: string;
+                lineHeight: string;
+                fontSize: string;
+            };
+            td: {
+                px: string;
+                py: string;
+                lineHeight: string;
+            };
+            caption: {
+                px: string;
+                py: string;
+                fontSize: string;
+            };
+        };
+        lg: {
+            th: {
+                px: string;
+                py: string;
+                lineHeight: string;
+                fontSize: string;
+            };
+            td: {
+                px: string;
+                py: string;
+                lineHeight: string;
+            };
+            caption: {
+                px: string;
+                py: string;
+                fontSize: string;
+            };
+        };
+    } | undefined;
+    variants?: {
+        simple: (props: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+            th: {
+                '&[data-is-numeric=true]': {
+                    textAlign: string;
+                };
+                color: string;
+                borderBottom: string;
+                borderColor: string;
+            };
+            td: {
+                '&[data-is-numeric=true]': {
+                    textAlign: string;
+                };
+                borderBottom: string;
+                borderColor: string;
+            };
+            caption: {
+                color: string;
+            };
+            tfoot: {
+                tr: {
+                    '&:last-of-type': {
+                        th: {
+                            borderBottomWidth: number;
+                        };
+                    };
+                };
+            };
+        };
+        striped: (props: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+            th: {
+                '&[data-is-numeric=true]': {
+                    textAlign: string;
+                };
+                color: string;
+                borderBottom: string;
+                borderColor: string;
+            };
+            td: {
+                '&[data-is-numeric=true]': {
+                    textAlign: string;
+                };
+                borderBottom: string;
+                borderColor: string;
+            };
+            caption: {
+                color: string;
+            };
+            tbody: {
+                tr: {
+                    '&:nth-of-type(odd)': {
+                        'th, td': {
+                            borderBottomWidth: string;
+                            borderColor: string;
+                        };
+                        td: {
+                            background: string;
+                        };
+                    };
+                };
+            };
+            tfoot: {
+                tr: {
+                    '&:last-of-type': {
+                        th: {
+                            borderBottomWidth: number;
+                        };
+                    };
+                };
+            };
+        };
+        unstyled: {};
+    } | undefined;
+    defaultProps?: {
+        size?: "sm" | "md" | "lg" | undefined;
+        variant?: "simple" | "striped" | "unstyled" | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+    parts: ("table" | "thead" | "tbody" | "tr" | "th" | "td" | "tfoot" | "caption")[];
+};
+export default tableTheme;

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

@@ -4466,6 +4466,186 @@ const Switch$1 = /*#__PURE__*/defineMultiStyleConfig$4({
   }
 });
 
+const {
+  defineMultiStyleConfig: defineMultiStyleConfig$5,
+  definePartsStyle: definePartsStyle$6
+} = /*#__PURE__*/styledSystem.createMultiStyleConfigHelpers(anatomy.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__*/styledSystem.defineStyle({
+  '&[data-is-numeric=true]': {
+    textAlign: 'end'
+  }
+});
+const variantSimple = /*#__PURE__*/definePartsStyle$6(props => {
+  const {
+    colorScheme: c
+  } = props;
+  return {
+    th: {
+      color: themeTools.mode('gray.600', 'gray.400')(props),
+      borderBottom: '1px',
+      borderColor: themeTools.mode(`${c}.100`, `${c}.700`)(props),
+      ...numericStyles
+    },
+    td: {
+      borderBottom: '1px',
+      borderColor: themeTools.mode(`${c}.100`, `${c}.700`)(props),
+      ...numericStyles
+    },
+    caption: {
+      color: themeTools.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: themeTools.mode('gray.600', 'gray.400')(props),
+      borderBottom: '1px',
+      borderColor: themeTools.mode(`${c}.100`, `${c}.700`)(props),
+      ...numericStyles
+    },
+    td: {
+      borderBottom: '1px',
+      borderColor: themeTools.mode(`${c}.100`, `${c}.700`)(props),
+      ...numericStyles
+    },
+    caption: {
+      color: themeTools.mode('gray.600', 'gray.100')(props)
+    },
+    tbody: {
+      tr: {
+        '&:nth-of-type(odd)': {
+          'th, td': {
+            borderBottomWidth: '1px',
+            borderColor: themeTools.mode(`${c}.100`, `${c}.700`)(props)
+          },
+          td: {
+            background: themeTools.mode(`${c}.100`, `${c}.700`)(props)
+          }
+        }
+      }
+    },
+    tfoot: {
+      tr: {
+        '&:last-of-type': {
+          th: {
+            borderBottomWidth: 0
+          }
+        }
+      }
+    }
+  };
+});
+const variants$4 = {
+  simple: variantSimple,
+  striped: variantStripe,
+  unstyled: /*#__PURE__*/styledSystem.defineStyle({})
+};
+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'
+    },
+    td: {
+      px: '2',
+      py: '4',
+      lineHeight: '5'
+    },
+    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,
@@ -4561,6 +4741,7 @@ var components = {
   Popover: Popover,
   Radio: Radio,
   Switch: Switch$1,
+  Table: tableTheme,
   Textarea: Textarea
 };