@helpdice/ui 2.5.4 → 2.5.8

package/esm/skeleton/index.js

@@ -3,6 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
+import { useTheme } from '@helpdice/theme';
 import React, { useState } from 'react';
 var Skeleton = function Skeleton(_ref) {
   var width = _ref.width,
@@ -13,6 +14,7 @@ var Skeleton = function Skeleton(_ref) {
     duration = _ref.duration,
     children = _ref.children,
     loaded = _ref.loaded;
+  var theme = useTheme();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isHidden = _useState2[0],
@@ -36,13 +38,16 @@ var Skeleton = function Skeleton(_ref) {
   //     }
   // }
 
+  var lightGradient = "linear-gradient(90deg, rgba(211, 211, 211, 0) 0, rgba(211, 211, 211, 0.6) 70%, rgba(211, 211, 211, 0))";
+  var darkGradient = "linear-gradient(90deg, rgba(211, 211, 211, 0) 0, rgba(42, 40, 40, 0.6) 70%, rgba(211, 211, 211, 0))";
   return /*#__PURE__*/React.createElement("div", {
-    className: "jsx-638717868"
+    className: _JSXStyle.dynamic([["641831790", [theme.palette.background, theme.type == "dark" ? darkGradient : lightGradient]]])
   }, loaded || isHidden ? children : /*#__PURE__*/React.createElement("div", {
     style: skeletonStyle,
-    className: "jsx-638717868" + " " + "skeleton-box"
+    className: _JSXStyle.dynamic([["641831790", [theme.palette.background, theme.type == "dark" ? darkGradient : lightGradient]]]) + " " + "skeleton-box"
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "638717868"
-  }, ".skeleton-box.jsx-638717868{display:inline-block;position:relative;overflow:hidden;background-color:#fff;text-align:center;}.skeleton-box.jsx-638717868::after{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);background-image:linear-gradient(90deg,rgba(211,211,211,0) 0,rgba(211,211,211,0.6) 70%,rgba(211,211,211,0));-webkit-animation:shimmer-jsx-638717868 1.5s infinite;animation:shimmer-jsx-638717868 1.5s infinite;content:'';}@-webkit-keyframes shimmer-jsx-638717868{100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}}@keyframes shimmer-jsx-638717868{100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}}"));
+    id: "641831790",
+    dynamic: [theme.palette.background, theme.type == "dark" ? darkGradient : lightGradient]
+  }, ".skeleton-box.__jsx-style-dynamic-selector{display:inline-block;position:relative;overflow:hidden;background-color:".concat(theme.palette.background, ";text-align:center;}.skeleton-box.__jsx-style-dynamic-selector::after{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);background-image:").concat(theme.type == "dark" ? darkGradient : lightGradient, ";-webkit-animation:shimmer-__jsx-style-dynamic-selector 1.5s infinite;animation:shimmer-__jsx-style-dynamic-selector 1.5s infinite;content:'';}@-webkit-keyframes shimmer-__jsx-style-dynamic-selector{100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}}@keyframes shimmer-__jsx-style-dynamic-selector{100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}}")));
 };
 export default Skeleton;

package/esm/table/table-body.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableDataItemBase, TableOnCellClick, TableOnRowClick, TableRowClassNameHandler } from './table-types';
+import { RowErrorMap, TableDataItemBase, TableOnCellClick, TableOnRowClick, TableRowClassNameHandler } from './table-types';
 interface Props<TableDataItem extends TableDataItemBase> {
     hover: boolean;
     emptyText: string;
@@ -7,16 +7,17 @@ interface Props<TableDataItem extends TableDataItemBase> {
     onCell?: TableOnCellClick<TableDataItem>;
     data: Array<TableDataItem>;
     className?: string;
-    textPlaceholder?: boolean;
+    rowErrors: RowErrorMap;
     rowClassName: TableRowClassNameHandler<TableDataItem>;
     rowDraggable?: boolean;
     readOnly?: boolean;
+    isLoading: boolean;
     onSelected?: (selected: any[]) => void;
 }
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>;
 export type TableBodyProps<TableDataItem extends TableDataItemBase> = Props<TableDataItem> & NativeAttrs;
 declare const TableBody: {
-    <TableDataItem extends TableDataItemBase>({ data, emptyText, onRow, onCell, rowClassName, textPlaceholder, rowDraggable, readOnly, onSelected }: TableBodyProps<TableDataItem>): React.JSX.Element;
+    <TableDataItem extends TableDataItemBase>({ data, emptyText, onRow, onCell, rowClassName, isLoading, rowErrors, rowDraggable, readOnly, onSelected }: TableBodyProps<TableDataItem>): React.JSX.Element;
     displayName: string;
 };
 export default TableBody;

package/esm/table/table-body.js

@@ -4,7 +4,7 @@ import _JSXStyle from "../styled-jsx.es.js";
 import React, { useState } from 'react';
 import { useTheme, useClasses } from '@helpdice/theme';
 import _ from 'lodash';
-import Placeholder from '../placeholder';
+// import Placeholder from '../placeholder';
 import TableCell from './table-cell';
 import { useTableContext } from './table-context';
 import { DataTable } from '@helpdice/pro';
@@ -14,7 +14,8 @@ var TableBody = function TableBody(_ref) {
     onRow = _ref.onRow,
     onCell = _ref.onCell,
     rowClassName = _ref.rowClassName,
-    textPlaceholder = _ref.textPlaceholder,
+    isLoading = _ref.isLoading,
+    rowErrors = _ref.rowErrors,
     _ref$rowDraggable = _ref.rowDraggable,
     rowDraggable = _ref$rowDraggable === void 0 ? false : _ref$rowDraggable,
     _ref$readOnly = _ref.readOnly,
@@ -84,6 +85,7 @@ var TableBody = function TableBody(_ref) {
     // console.log(frow);
     var isRowSelected = selected.indexOf(row) !== -1;
     var hoverColor = theme.palette.accents_1;
+    var rowError = rowErrors === null || rowErrors === void 0 ? void 0 : rowErrors.get(row.id);
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", {
       draggable: rowDraggable,
       role: "checkbox",
@@ -104,27 +106,35 @@ var TableBody = function TableBody(_ref) {
           }
         }
       },
-      className: _JSXStyle.dynamic([["787902152", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)) || "")
+      className: _JSXStyle.dynamic([["2988536338", [theme.palette.accents_1, theme.palette.warningLighter, theme.palette.error, theme.palette.border, rowError ? theme.type == "dark" ? theme.palette.accents_1 : theme.palette.accents_8 : theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(rowError ? 'row-error' : '', " ").concat(className)) || "")
     }, /*#__PURE__*/React.createElement(TableCell, {
       columns: cols,
       row: rw,
+      isLoading: isLoading,
+      errors: rowError,
       rowIndex: index,
       emptyText: emptyText,
       onCellClick: onCell
     })), /*#__PURE__*/React.createElement(_JSXStyle, {
-      id: "787902152",
-      dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
-    }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(2.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
-  }
-  if ((data === null || data === void 0 ? void 0 : data.length) === 0) {
-    return /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-      colSpan: columns === null || columns === void 0 ? void 0 : columns.length
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Placeholder, {
-      empty: true,
-      textOnly: textPlaceholder,
-      msg: "No Entries Found"
-    })))));
+      id: "2988536338",
+      dynamic: [theme.palette.accents_1, theme.palette.warningLighter, theme.palette.error, theme.palette.border, rowError ? theme.type == "dark" ? theme.palette.accents_1 : theme.palette.accents_8 : theme.palette.accents_6]
+    }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.row-error.__jsx-style-dynamic-selector{background:").concat(theme.palette.warningLighter, " !important;border:2px dashed ").concat(theme.palette.error, ";margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(rowError ? theme.type == "dark" ? theme.palette.accents_1 : theme.palette.accents_8 : theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(2.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
   }
+
+  // if (data?.length === 0) {
+  //   return (
+  //     <tbody>
+  //       <tr>
+  //         <td colSpan={columns?.length}>
+  //           <div>
+  // <Placeholder empty textOnly={textPlaceholder} msg="No Entries Found" />
+  //           </div>
+  //         </td>
+  //       </tr>
+  //     </tbody>
+  //   )
+  // }
+
   return /*#__PURE__*/React.createElement("tbody", {
     className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
   }, data.map(function (row, index) {

package/esm/table/table-cell.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
-import { TableDataItemBase, TableAbstractColumn, TableOnCellClick } from './table-types';
+import { TableDataItemBase, TableAbstractColumn, TableOnCellClick, FieldError } from './table-types';
 interface Props<TableDataItem extends TableDataItemBase> {
     columns: Array<TableAbstractColumn<TableDataItem>>;
     row: TableDataItem;
     rowIndex: number;
     emptyText: string;
+    errors?: FieldError;
     onCellClick?: TableOnCellClick<TableDataItem>;
+    isLoading: boolean;
 }
 export type TableCellData<TableDataItem> = {
     row: number;
@@ -14,5 +16,5 @@ export type TableCellData<TableDataItem> = {
 };
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>;
 export type TableCellProps<TableDataItem extends TableDataItemBase> = Props<TableDataItem> & NativeAttrs;
-declare const TableCell: <TableDataItem extends TableDataItemBase>({ columns, row, rowIndex, emptyText, onCellClick }: TableCellProps<TableDataItem>) => React.JSX.Element;
+declare const TableCell: <TableDataItem extends TableDataItemBase>({ columns, row, errors, rowIndex, emptyText, onCellClick, isLoading }: TableCellProps<TableDataItem>) => React.JSX.Element;
 export default TableCell;

package/esm/table/table-cell.js

@@ -1,17 +1,23 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
+import Tooltip from '../tooltip';
+import Skeleton from '../skeleton';
 var TableCell = function TableCell(_ref) {
   var columns = _ref.columns,
     row = _ref.row,
+    _ref$errors = _ref.errors,
+    errors = _ref$errors === void 0 ? {} : _ref$errors,
     rowIndex = _ref.rowIndex,
     emptyText = _ref.emptyText,
-    onCellClick = _ref.onCellClick;
+    onCellClick = _ref.onCellClick,
+    isLoading = _ref.isLoading;
   /* eslint-disable react/jsx-no-useless-fragment */
   return /*#__PURE__*/React.createElement(React.Fragment, null, columns.map(function (column, index) {
     var _ref2, _currentRowValue$valu, _row$_id;
     var currentRowValue = row[column.prop];
     var cellValue = (_ref2 = (_currentRowValue$valu = currentRowValue === null || currentRowValue === void 0 ? void 0 : currentRowValue.value) !== null && _currentRowValue$valu !== void 0 ? _currentRowValue$valu : currentRowValue) !== null && _ref2 !== void 0 ? _ref2 : emptyText;
     var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
+    var hasError = errors[column.prop];
     return /*#__PURE__*/React.createElement("td", {
       style: _extends({
         fontSize: "".concat(column === null || column === void 0 ? void 0 : column.fontSize),
@@ -20,6 +26,7 @@ var TableCell = function TableCell(_ref) {
         paddingRight: '0.3rem',
         color: "".concat(column === null || column === void 0 ? void 0 : column.color),
         boxSizing: 'border-box',
+        border: "".concat(hasError ? '2px dashed red' : 'none'),
         whiteSpace: column !== null && column !== void 0 && column.noWrap ? 'nowrap' : 'normal'
       }, currentRowValue === null || currentRowValue === void 0 ? void 0 : currentRowValue.style),
       "data-column": column.prop,
@@ -28,8 +35,17 @@ var TableCell = function TableCell(_ref) {
         return onCellClick && onCellClick(currentRowValue, rowIndex, index);
       },
       className: column.className
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "cell"
+    }, isLoading ? /*#__PURE__*/React.createElement(Skeleton, {
+      borderRadius: "10px",
+      style: {
+        margin: '5px 0px 5px 5px'
+      },
+      width: "95%",
+      height: 20
+    }) : /*#__PURE__*/React.createElement(Tooltip.Small, {
+      className: "cell",
+      text: hasError,
+      disabled: hasError ? false : true
     }, shouldBeRenderElement ? shouldBeRenderElement : cellValue));
   }));
   /* eslint-enable */

package/esm/table/table-types.d.ts

@@ -21,3 +21,5 @@ export type TableOnRowClick<TableDataItem> = (rowData: TableDataItem, rowIndex:
 export type TableOnCellClick<TableDataItem> = (cellValue: TableDataItem[keyof TableDataItem], rowIndex: number, colunmIndex: number) => void;
 export type TableOnChange<TableDataItem> = (data: Array<TableDataItem>) => void;
 export type TableRowClassNameHandler<TableDataItem> = (rowData: TableDataItem, rowIndex: number) => string;
+export type FieldError = Record<string, string>;
+export type RowErrorMap = Map<number | string, FieldError>;

package/esm/table/table.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableDataItemBase, TableOnCellClick, TableOnChange, TableOnRowClick, TableRowClassNameHandler } from './table-types';
+import { RowErrorMap, TableDataItemBase, TableOnCellClick, TableOnChange, TableOnRowClick, TableRowClassNameHandler } from './table-types';
 import { ScaleProps } from '../use-scale';
 interface Props<TableDataItem extends TableDataItemBase> {
     data?: Array<TableDataItem>;
@@ -25,6 +25,10 @@ interface Props<TableDataItem extends TableDataItemBase> {
     previousCursor?: string;
     nextCursor?: string;
     hasMore?: boolean;
+    rowErrors?: RowErrorMap;
+    containerStyle?: object;
+    loading?: string;
+    isLoading?: boolean;
     onNextPage?: (next?: string) => void;
     onPreviousPage?: (prev?: string) => void;
 }

package/esm/table/table.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "cursorPagination", "previousCursor", "nextCursor", "hasMore", "onNextPage", "onPreviousPage", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "textPlaceholder", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
+var _excluded = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "cursorPagination", "previousCursor", "nextCursor", "hasMore", "onNextPage", "onPreviousPage", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "textPlaceholder", "onSelected", "dataLength", "viewLength", "className", "loading", "isLoading", "containerStyle", "rowErrors", "rowClassName"];
 import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
@@ -18,6 +18,9 @@ import { ChevronLeft, ChevronRight } from '@helpdice/icons';
 import Pagination from '../pagination';
 import Button from '../button';
 import Tooltip from '../tooltip';
+import Placeholder from '../placeholder';
+import { useTheme } from '@helpdice/theme';
+import Loading from 'components/loading';
 function TableComponent(tableProps) {
   /* eslint-disable  @typescript-eslint/no-unused-vars */
   var _ref = tableProps,
@@ -57,6 +60,13 @@ function TableComponent(tableProps) {
     viewLength = _ref.viewLength,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? 'default' : _ref$loading,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    containerStyle = _ref.containerStyle,
+    _ref$rowErrors = _ref.rowErrors,
+    rowErrors = _ref$rowErrors === void 0 ? new Map() : _ref$rowErrors,
     _ref$rowClassName = _ref.rowClassName,
     rowClassName = _ref$rowClassName === void 0 ? function () {
       return '';
@@ -65,6 +75,7 @@ function TableComponent(tableProps) {
   /* eslint-enable @typescript-eslint/no-unused-vars */
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
+  var theme = useTheme();
   var ref = useRef(null);
   var _useRealShape = useRealShape(ref),
     _useRealShape2 = _slicedToArray(_useRealShape, 2),
@@ -115,41 +126,61 @@ function TableComponent(tableProps) {
   };
   return /*#__PURE__*/React.createElement(TableContext.Provider, {
     value: contextValue
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      borderBottom: "1px solid ".concat(theme.palette.border),
+      borderBottomLeftRadius: '5px',
+      borderBottomRightRadius: '5px'
+    },
+    className: _JSXStyle.dynamic([["1809040460", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.background]]])
+  }, /*#__PURE__*/React.createElement("div", {
+    style: _extends({
+      overflow: 'auto'
+    }, containerStyle),
+    className: _JSXStyle.dynamic([["1809040460", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.background]]])
   }, /*#__PURE__*/React.createElement("table", _extends({
     ref: ref
   }, props, {
-    className: _JSXStyle.dynamic([["2040515329", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
+    className: _JSXStyle.dynamic([["1809040460", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.background]]]) + " " + (props && props.className != null && props.className || className || "")
   }), /*#__PURE__*/React.createElement(TableHead, {
     stickyHeader: stickyHeader,
     onFilters: onFilters,
     showFilters: showFilters,
     columns: columns,
     width: width
-  }), /*#__PURE__*/React.createElement(TableBody, {
+  }), !isLoading && /*#__PURE__*/React.createElement(TableBody, {
     data: data,
     hover: hover,
     emptyText: emptyText,
     onRow: onRow,
     onCell: onCell,
-    textPlaceholder: textPlaceholder,
+    isLoading: loading === "skeleton" && isLoading,
+    rowErrors: rowErrors
+    // textPlaceholder={textPlaceholder}
+    ,
     rowClassName: rowClassName,
     rowDraggable: rowDraggable,
     readOnly: readOnly,
     onSelected: onSelected
-  }), children, cursorPagination ? /*#__PURE__*/React.createElement("tfoot", {
-    className: _JSXStyle.dynamic([["2040515329", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
-  }, /*#__PURE__*/React.createElement("td", {
-    colSpan: columns === null || columns === void 0 ? void 0 : columns.length,
-    className: _JSXStyle.dynamic([["2040515329", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
-  }, /*#__PURE__*/React.createElement("div", {
+  }), children), loading === "default" && isLoading ? /*#__PURE__*/React.createElement(Loading, null) : data.length == 0 && /*#__PURE__*/React.createElement(Placeholder, {
+    empty: true,
+    textOnly: textPlaceholder,
+    msg: "No Data to show"
+  })), cursorPagination || viewLength ? /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1809040460", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.background]]]) + " " + "table-footer"
+  }, cursorPagination ? /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
       gap: 10,
       margin: '10px'
     },
-    className: _JSXStyle.dynamic([["2040515329", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    text: "Previous"
+    className: _JSXStyle.dynamic([["1809040460", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.background]]])
+  }, /*#__PURE__*/React.createElement(Tooltip.Small, {
+    text: "Previous",
+    type: "dark"
   }, /*#__PURE__*/React.createElement(Button, {
     disabled: !previousCursor,
     onClick: function onClick() {
@@ -159,8 +190,9 @@ function TableComponent(tableProps) {
     px: 0.6,
     scale: 2 / 3,
     iconRight: /*#__PURE__*/React.createElement(ChevronLeft, null)
-  })), /*#__PURE__*/React.createElement(Tooltip, {
-    text: "Next"
+  })), /*#__PURE__*/React.createElement(Tooltip.Small, {
+    text: "Next",
+    type: "dark"
   }, /*#__PURE__*/React.createElement(Button, {
     disabled: !nextCursor,
     onClick: function onClick() {
@@ -170,12 +202,7 @@ function TableComponent(tableProps) {
     px: 0.6,
     scale: 2 / 3,
     iconRight: /*#__PURE__*/React.createElement(ChevronRight, null)
-  }))))) : dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement("tfoot", {
-    className: _JSXStyle.dynamic([["2040515329", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
-  }, /*#__PURE__*/React.createElement("td", {
-    colSpan: columns === null || columns === void 0 ? void 0 : columns.length,
-    className: _JSXStyle.dynamic([["2040515329", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
-  }, /*#__PURE__*/React.createElement(Pagination, {
+  }))) : dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement(Pagination, {
     style: {
       marginLeft: '10px',
       marginRight: '10px',
@@ -190,10 +217,10 @@ function TableComponent(tableProps) {
     },
     limit: 5,
     count: Number(dataLength / viewLength)
-  }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ChevronRight, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ChevronLeft, null))))) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2040515329",
-    dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
-  }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}tfoot.__jsx-style-dynamic-selector td.__jsx-style-dynamic-selector{position:-webkit-sticky;position:sticky;bottom:0;z-index:2;}"))));
+  }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ChevronRight, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ChevronLeft, null))) : null) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1809040460",
+    dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.background]
+  }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.table-footer.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.background, ";width:100%;bottom:0;}"))));
 }
 TableComponent.displayName = 'Table';
 TableComponent.Column = TableColumn;

package/esm/text/text.d.ts

@@ -19,7 +19,10 @@ interface Props {
     blockquote?: boolean;
     noWrap?: boolean;
     className?: string;
+    display?: string;
     color?: TextTypes;
+    alignItems?: string;
+    justify?: string;
     align?: 'center' | 'right' | 'left';
 }
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;

package/esm/text/text.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "noWrap", "collapse", "children", "className"];
+var _excluded = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "noWrap", "collapse", "children", "className", "display", "alignItems", "justify"];
 /* "use client" */;
 import React, { useMemo, useState } from 'react';
 import TextChild from './child';
@@ -50,6 +50,10 @@ var TextComponent = function TextComponent(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'block' : _ref$display,
+    alignItems = _ref.alignItems,
+    justify = _ref.justify,
     props = _objectWithoutProperties(_ref, _excluded);
   var elements = {
     h1: h1,
@@ -104,7 +108,10 @@ var TextComponent = function TextComponent(_ref) {
   }, [renderableChildElements, children]);
   return /*#__PURE__*/React.createElement(TextChild, _extends({
     style: {
-      textAlign: props.align
+      textAlign: props.align,
+      display: display,
+      alignItems: alignItems,
+      justifyContent: justify
     },
     className: "".concat(className, " ").concat(noWrap ? 'no-wrap' : ''),
     tag: tag

package/esm/textarea/textarea.d.ts

@@ -14,6 +14,9 @@ interface Props {
     onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
     onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
     className?: string;
+    error?: boolean;
+    helperText?: string;
+    label?: string;
     resize?: TextareaResizes;
 }
 type NativeAttrs = Omit<React.TextareaHTMLAttributes<any>, keyof Props>;

package/esm/textarea/textarea.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "resize"];
+var _excluded = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "helperText", "error", "label", "resize"];
 import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
@@ -10,6 +10,8 @@ import { useTheme, useClasses } from '@helpdice/theme';
 import { tuple } from '../utils/prop-types';
 import { getColors } from '../input/styles';
 import useScale, { withScale } from '../use-scale';
+import Text from '../text';
+import InputBlockLabel from '../input/input-block-label';
 var resizeTypes = tuple('none', 'both', 'horizontal', 'vertical', 'initial', 'inherit');
 var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$type = _ref.type,
@@ -27,6 +29,9 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onChange = _ref.onChange,
     value = _ref.value,
     placeholder = _ref.placeholder,
+    helperText = _ref.helperText,
+    error = _ref.error,
+    label = _ref.label,
     _ref$resize = _ref.resize,
     resize = _ref$resize === void 0 ? 'none' : _ref$resize,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -83,6 +88,8 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   var textareaProps = _extends({}, props, controlledValue);
   return /*#__PURE__*/React.createElement("div", {
+    className: "with-label"
+  }, label && /*#__PURE__*/React.createElement(InputBlockLabel, null, label), /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["12276481", [theme.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme.palette.accents_1, theme.palette.accents_2, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.palette.background]]]) + " " + (classes || "")
   }, /*#__PURE__*/React.createElement("textarea", _extends({
     ref: textareaRef,
@@ -97,7 +104,17 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "12276481",
     dynamic: [theme.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme.palette.accents_1, theme.palette.accents_2, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.palette.background]
-  }, ".wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:".concat(theme.layout.radius, ";border:1px solid ").concat(borderColor, ";color:").concat(color, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;min-width:12.5rem;max-width:95vw;--textarea-font-size:").concat(SCALES.font(0.875), ";--textarea-height:").concat(SCALES.height(1, 'auto'), ";width:").concat(SCALES.width(1, 'initial'), ";height:var(--textarea-height);margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}.wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_1, ";border-color:").concat(theme.palette.accents_2, ";cursor:not-allowed;}textarea.__jsx-style-dynamic-selector{background-color:transparent;box-shadow:none;display:block;font-family:").concat(theme.font.sans, ";font-size:var(--textarea-font-size);width:100%;height:var(--textarea-height);border:none;outline:none;padding:").concat(SCALES.pt(0.5), " ").concat(SCALES.pr(0.5), " ").concat(SCALES.pb(0.5), " ").concat(SCALES.pl(0.5), ";resize:").concat(resize, ";}.disabled.__jsx-style-dynamic-selector>textarea.__jsx-style-dynamic-selector{cursor:not-allowed;}textarea.__jsx-style-dynamic-selector:-webkit-autofill,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;}")));
+  }, ".wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:".concat(theme.layout.radius, ";border:1px solid ").concat(borderColor, ";color:").concat(color, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;min-width:12.5rem;max-width:95vw;--textarea-font-size:").concat(SCALES.font(0.875), ";--textarea-height:").concat(SCALES.height(1, 'auto'), ";width:").concat(SCALES.width(1, 'initial'), ";height:var(--textarea-height);margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}.wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_1, ";border-color:").concat(theme.palette.accents_2, ";cursor:not-allowed;}textarea.__jsx-style-dynamic-selector{background-color:transparent;box-shadow:none;display:block;font-family:").concat(theme.font.sans, ";font-size:var(--textarea-font-size);width:100%;height:var(--textarea-height);border:none;outline:none;padding:").concat(SCALES.pt(0.5), " ").concat(SCALES.pr(0.5), " ").concat(SCALES.pb(0.5), " ").concat(SCALES.pl(0.5), ";resize:").concat(resize, ";}.disabled.__jsx-style-dynamic-selector>textarea.__jsx-style-dynamic-selector{cursor:not-allowed;}textarea.__jsx-style-dynamic-selector:-webkit-autofill,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;}"))), helperText && /*#__PURE__*/React.createElement(Text, {
+    font: 0.8,
+    style: {
+      marginTop: 0.4,
+      marginRight: 0,
+      marginLeft: 0,
+      marginBottom: '0.4rem',
+      textAlign: 'left'
+    },
+    color: error ? "error" : 'default'
+  }, "\xA0", helperText));
 });
 TextareaComponent.displayName = 'Textarea';
 var Textarea = withScale(TextareaComponent);

package/esm/tooltip/index.d.ts

@@ -1,8 +1,7 @@
 import Tooltip from './tooltip';
 export type { TooltipProps, TooltipOnVisibleChange, TooltipTypes, TooltipTriggers, TooltipPlacement, } from './tooltip';
-import SmallTooltip from './tooltip-small';
 export type TooltipComponentType = typeof Tooltip & {
-    Small: typeof SmallTooltip;
+    Small: typeof Tooltip;
 };
 declare const _default: TooltipComponentType;
 export default _default;

package/esm/tooltip/tooltip-content.d.ts

@@ -3,7 +3,7 @@ import { Placement, SnippetTypes } from '../utils/prop-types';
 interface Props {
     parent?: RefObject<HTMLElement | null> | undefined;
     placement: Placement;
-    type: SnippetTypes;
+    color: SnippetTypes;
     visible: boolean;
     hideArrow: boolean;
     offset: number;

package/esm/tooltip/tooltip-content.js

@@ -20,8 +20,8 @@ var TooltipContent = function TooltipContent(_ref) {
     offset = _ref.offset,
     iconOffset = _ref.iconOffset,
     placement = _ref.placement,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'default' : _ref$type,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'default' : _ref$color,
     className = _ref.className,
     hideArrow = _ref.hideArrow;
   var theme = useTheme();
@@ -34,9 +34,9 @@ var TooltipContent = function TooltipContent(_ref) {
     rect = _useState2[0],
     setRect = _useState2[1];
   var colors = useMemo(function () {
-    return getColors(type, theme.palette);
-  }, [type, theme.palette]);
-  var hasShadow = type === 'default';
+    return getColors(color, theme.palette);
+  }, [color, theme.palette]);
+  var hasShadow = color === 'default';
   var classes = useClasses('tooltip-content', className);
 
   // console.log('Having Parent', parent);

package/esm/tooltip/tooltip-small.d.ts

@@ -1,7 +1,4 @@
 import React from 'react';
-type SmallTooltipProps = {
-    children?: React.ReactNode;
-    text?: string | React.ReactNode;
-};
-declare const _default: React.NamedExoticComponent<SmallTooltipProps>;
+import { TooltipProps } from './tooltip';
+declare const _default: React.NamedExoticComponent<TooltipProps>;
 export default _default;

package/esm/tooltip/tooltip-small.js

@@ -3,7 +3,6 @@ import React, { memo } from 'react';
 import Tooltip from './tooltip';
 var SmallTooltip = function SmallTooltip(props) {
   return /*#__PURE__*/React.createElement(Tooltip, _extends({
-    text: props.text,
     font: 0.8,
     px: 0.6,
     py: 0.4

package/esm/tooltip/tooltip.d.ts

@@ -6,7 +6,7 @@ export type TooltipTriggers = TriggerTypes;
 export type TooltipPlacement = Placement;
 interface Props {
     text: string | React.ReactNode;
-    type?: TooltipTypes;
+    color?: TooltipTypes;
     placement?: TooltipPlacement;
     visible?: boolean;
     initialVisible?: boolean;
@@ -14,6 +14,7 @@ interface Props {
     trigger?: TooltipTriggers;
     enterDelay?: number;
     leaveDelay?: number;
+    disabled?: boolean;
     offset?: number;
     className?: string;
     portalClassName?: string;