@xqmsg/ui-core 0.11.0 → 0.12.0

package/dist/components/table/TableTypes.d.ts

@@ -8,4 +8,3 @@ export declare type TableRow<K extends ReadonlyTableColumns> = {
     [k in K[number]]: ReactNode;
 };
 export declare type TableBody<R extends ReadonlyTableColumns> = TableRow<R>[];
-export declare type TableColorScheme = 'blue' | 'cyan' | 'gray' | 'green' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'yellow' | 'whiteAlpha' | 'blackAlpha' | 'linkedin' | 'facebook' | 'messenger' | 'whatsapp' | 'twitter' | 'telegram';

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface TableTextProps {
+    primaryText: string;
+    secondaryText?: string;
+}
+/**
+ * A functional React component utilized to render the `TableText` component
+ */
+export declare const TableText: React.FC<TableTextProps>;

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

@@ -1,12 +1,10 @@
 /// <reference types="react" />
-import { ReadonlyTableColumns, TableBody, TableColorScheme, TableColumns, TableHeaders } from './TableTypes';
+import { ReadonlyTableColumns, TableBody, TableColumns, TableHeaders } from './TableTypes';
 export interface TableProps<T extends ReadonlyTableColumns> {
     columns: TableColumns;
     headers: TableHeaders<T>;
     body: TableBody<T>;
     loading?: boolean;
-    variant: 'simple' | 'striped' | 'unstyled';
-    colorScheme?: TableColorScheme;
     borderTopRadius?: boolean;
     loadMore?: () => void;
     placeholder?: string;
@@ -14,4 +12,4 @@ export interface TableProps<T extends ReadonlyTableColumns> {
 /**
  * A React component utilized to render the `Table` component
  */
-export declare function Table<T extends ReadonlyTableColumns>({ columns, headers, body, placeholder, loading, variant, colorScheme, borderTopRadius, loadMore, }: TableProps<T>): JSX.Element;
+export declare function Table<T extends ReadonlyTableColumns>({ columns, headers, body, placeholder, loading, borderTopRadius, loadMore, }: TableProps<T>): JSX.Element;

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

@@ -0,0 +1,28 @@
+declare const _default: {
+    parts: string[];
+    baseStyle: {
+        th: {
+            height: string;
+            width: string;
+            bg: string;
+            padding: string;
+        };
+        tr: {
+            fontSize: string;
+            display: string;
+            alignItems: string;
+            width: string;
+            height: string;
+            borderRadius: string;
+            _odd: {
+                background: string;
+            };
+        };
+        td: {
+            padding: string;
+            borderRadius: string;
+            width: string;
+        };
+    };
+};
+export default _default;

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

@@ -1473,8 +1473,11 @@ var TableLoadingRows = function TableLoadingRows(_ref) {
     "aria-label": "Fetch more rows",
     icon: /*#__PURE__*/React__default.createElement(hi.HiOutlineRefresh, null),
     fontSize: typography.fontSizes['3xl'],
+    bg: "transparent",
+    shadow: "none",
+    color: colors.fill.action,
     type: "button",
-    variant: "link",
+    variant: "outline",
     onClick: onLoadMore
   }));
 };
@@ -1490,24 +1493,19 @@ function Table(_ref) {
       _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? 'There is currently no available data' : _ref$placeholder,
       loading = _ref.loading,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'simple' : _ref$variant,
-      colorScheme = _ref.colorScheme,
       _ref$borderTopRadius = _ref.borderTopRadius,
       borderTopRadius = _ref$borderTopRadius === void 0 ? true : _ref$borderTopRadius,
       loadMore = _ref.loadMore;
   var columnsAsConst = generateTableColumnsAsConst(columns);
   return /*#__PURE__*/React__default.createElement(react.TableContainer, {
-    border: "1px",
-    borderColor: colors.fill.light.quaternary,
+    border: "none",
     overflowX: "auto",
     bg: "white",
     borderRadius: "md",
     borderTopLeftRadius: borderTopRadius ? 'md' : 0,
     borderTopRightRadius: borderTopRadius ? 'md' : 0
   }, /*#__PURE__*/React__default.createElement(react.Table, {
-    variant: variant,
-    colorScheme: colorScheme
+    variant: "unstyled"
   }, /*#__PURE__*/React__default.createElement(react.Thead, null, /*#__PURE__*/React__default.createElement(react.Tr, null, columnsAsConst.map(function (column) {
     return (
       /*#__PURE__*/
@@ -2365,7 +2363,37 @@ var Switch = {
   defaultProps: defaultProps$7
 };
 
-var parts$7 = ['root', 'tablist', 'tab', 'tabpanel', 'indicator'];
+var parts$7 = ['th', 'td', 'tr', 'body'];
+var baseStyle$c = {
+  th: {
+    height: 'fit-content',
+    width: '100%',
+    bg: colors.label.primary.dark,
+    padding: '5px 8px !important'
+  },
+  tr: {
+    fontSize: '13px',
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    height: 'fit-content',
+    borderRadius: 'md',
+    _odd: {
+      background: colors.fill.light.tertiary
+    }
+  },
+  td: {
+    padding: '5px 8px !important',
+    borderRadius: 'md',
+    width: '100%'
+  }
+};
+var Table$1 = {
+  parts: parts$7,
+  baseStyle: baseStyle$c
+};
+
+var parts$8 = ['root', 'tablist', 'tab', 'tabpanel', 'indicator'];
 
 function baseStyleRoot(props) {
   var orientation = props.orientation;
@@ -2405,7 +2433,7 @@ var baseStyleTabpanel = {
   p: 4
 };
 
-var baseStyle$c = function baseStyle(props) {
+var baseStyle$d = function baseStyle(props) {
   return {
     root: baseStyleRoot(props),
     tab: baseStyleTab(props),
@@ -2599,14 +2627,14 @@ var defaultProps$8 = {
   colorScheme: 'blue'
 };
 var Tabs = {
-  parts: parts$7,
-  baseStyle: baseStyle$c,
+  parts: parts$8,
+  baseStyle: baseStyle$d,
   sizes: sizes$2,
   variants: variants$8,
   defaultProps: defaultProps$8
 };
 
-var baseStyle$d = /*#__PURE__*/_extends({}, Input$1.baseStyle.field, {
+var baseStyle$e = /*#__PURE__*/_extends({}, Input$1.baseStyle.field, {
   display: 'block',
   paddingY: '8px',
   height: '80px',
@@ -2617,12 +2645,12 @@ var defaultProps$9 = {
   variant: 'default'
 };
 var Textarea = {
-  baseStyle: baseStyle$d,
+  baseStyle: baseStyle$e,
   defaultProps: defaultProps$9
 };
 
 var defaultProps$a = react.Text.defaultProps;
-var baseStyle$e = {
+var baseStyle$f = {
   fontWeight: typography.fontWeights.normal,
   fontFamily: typography.fonts.base,
   fontSize: typography.fontSizes.sm,
@@ -2631,7 +2659,7 @@ var baseStyle$e = {
 };
 
 function variantHeader() {
-  return _extends({}, baseStyle$e, {
+  return _extends({}, baseStyle$f, {
     fontWeight: typography.fontWeights.bold,
     fontSize: typography.fontSizes['3xl'],
     lineHeight: typography.lineHeights[8],
@@ -2640,7 +2668,7 @@ function variantHeader() {
 }
 
 function variantSubheader() {
-  return _extends({}, baseStyle$e, {
+  return _extends({}, baseStyle$f, {
     fontWeight: typography.fontWeights.semibold,
     fontSize: typography.fontSizes['lg'],
     lineHeight: typography.lineHeights[5],
@@ -2649,7 +2677,7 @@ function variantSubheader() {
 }
 
 function variantParagraph() {
-  return baseStyle$e;
+  return baseStyle$f;
 }
 
 var variants$9 = {
@@ -2658,7 +2686,7 @@ var variants$9 = {
   paragraph: variantParagraph
 };
 var Text$1 = {
-  baseStyle: baseStyle$e,
+  baseStyle: baseStyle$f,
   variants: variants$9,
   defaultProps: /*#__PURE__*/_extends({}, defaultProps$a, {
     variant: variants$9.paragraph
@@ -2703,6 +2731,7 @@ var customXQChakraTheme = /*#__PURE__*/react.extendTheme( /*#__PURE__*/_extends(
     Modal: Modal,
     Select: Select,
     Switch: Switch,
+    Table: Table$1,
     Tabs: Tabs,
     Textarea: Textarea,
     Text: Text$1