@helpdice/ui 2.5.8-beta.0 → 2.5.9

package/esm/circular-progress/CircularProgress.js

@@ -0,0 +1,110 @@
+"use client";
+
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { forwardRef, useId } from "react";
+import { motion } from "framer-motion";
+import { useCircularProgress } from "./useCircularProgress";
+var statusColors = {
+  "default": "#3b82f6",
+  success: "#10b981",
+  warning: "#f59e0b",
+  error: "#ef4444"
+};
+var CircularProgress = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 140 : _ref$size,
+    _ref$strokeWidth = _ref.strokeWidth,
+    strokeWidth = _ref$strokeWidth === void 0 ? 12 : _ref$strokeWidth,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? 0 : _ref$value,
+    _ref$min = _ref.min,
+    min = _ref$min === void 0 ? 0 : _ref$min,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 100 : _ref$max,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "determinate" : _ref$variant,
+    _ref$status = _ref.status,
+    status = _ref$status === void 0 ? "default" : _ref$status,
+    _ref$gradient = _ref.gradient,
+    gradient = _ref$gradient === void 0 ? true : _ref$gradient,
+    _ref$showPercentage = _ref.showPercentage,
+    showPercentage = _ref$showPercentage === void 0 ? true : _ref$showPercentage,
+    label = _ref.label;
+  var _useCircularProgress = useCircularProgress({
+      value: value,
+      min: min,
+      max: max,
+      variant: variant
+    }),
+    percentage = _useCircularProgress.percentage,
+    displayValue = _useCircularProgress.displayValue;
+  var radius = (size - strokeWidth) / 2;
+  var circumference = 2 * Math.PI * radius;
+  var strokeDashoffset = circumference - percentage / 100 * circumference;
+  var baseColor = statusColors[status];
+
+  // SSR-SAFE ID
+  var gradientId = useId();
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    role: "progressbar",
+    "aria-valuemin": min,
+    "aria-valuemax": max,
+    "aria-valuenow": variant === "determinate" ? value : undefined,
+    className: _JSXStyle.dynamic([["4042284457", [size * 0.18]]]) + " " + "wrapper"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: size,
+    height: size,
+    className: _JSXStyle.dynamic([["4042284457", [size * 0.18]]])
+  }, gradient && /*#__PURE__*/React.createElement("defs", {
+    className: _JSXStyle.dynamic([["4042284457", [size * 0.18]]])
+  }, /*#__PURE__*/React.createElement("linearGradient", {
+    id: gradientId,
+    className: _JSXStyle.dynamic([["4042284457", [size * 0.18]]])
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: "0%",
+    stopColor: baseColor,
+    className: _JSXStyle.dynamic([["4042284457", [size * 0.18]]])
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: "100%",
+    stopColor: "#9333ea",
+    className: _JSXStyle.dynamic([["4042284457", [size * 0.18]]])
+  }))), /*#__PURE__*/React.createElement("circle", {
+    stroke: "#e5e7eb",
+    fill: "none",
+    strokeWidth: strokeWidth,
+    r: radius,
+    cx: size / 2,
+    cy: size / 2,
+    className: _JSXStyle.dynamic([["4042284457", [size * 0.18]]])
+  }), /*#__PURE__*/React.createElement(motion.circle, {
+    fill: "none",
+    stroke: gradient ? "url(#".concat(gradientId, ")") : baseColor,
+    strokeWidth: strokeWidth,
+    strokeLinecap: "round",
+    strokeDasharray: circumference,
+    r: radius,
+    cx: size / 2,
+    cy: size / 2,
+    initial: false,
+    animate: {
+      strokeDashoffset: variant === "determinate" ? strokeDashoffset : circumference * 0.4,
+      rotate: variant === "indeterminate" ? 360 : 0
+    },
+    transition: variant === "indeterminate" ? {
+      repeat: Infinity,
+      duration: 1.2,
+      ease: "linear"
+    } : {
+      duration: 0.6,
+      ease: "easeOut"
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4042284457", [size * 0.18]]]) + " " + "label"
+  }, label !== null && label !== void 0 ? label : showPercentage && variant === "determinate" ? "".concat(Math.round(displayValue), "%") : null), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4042284457",
+    dynamic: [size * 0.18]
+  }, ".wrapper.__jsx-style-dynamic-selector{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}svg.__jsx-style-dynamic-selector{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}.label.__jsx-style-dynamic-selector{position:absolute;font-weight:700;font-size:".concat(size * 0.18, "px;}")));
+});
+CircularProgress.displayName = "CircularProgress";
+export default CircularProgress;

package/esm/circular-progress/index.d.ts

@@ -1,4 +1,3 @@
-import CircularProgressBar from './CircularProgressbar';
-import CircularProgress from './CircularProgressbarWithChildren';
-import buildStyles from './buildStyles';
-export { CircularProgressBar, CircularProgress, buildStyles };
+import CircularProgress from "./CircularProgress";
+export { useCircularProgress } from "./useCircularProgress";
+export default CircularProgress;

package/esm/circular-progress/index.js

@@ -1,4 +1,3 @@
-import CircularProgressBar from './CircularProgressbar';
-import CircularProgress from './CircularProgressbarWithChildren';
-import buildStyles from './buildStyles';
-export { CircularProgressBar, CircularProgress, buildStyles };
+import CircularProgress from "./CircularProgress";
+export { useCircularProgress } from "./useCircularProgress";
+export default CircularProgress;

package/esm/circular-progress/useCircularProgress.d.ts

@@ -0,0 +1,12 @@
+export type ProgressVariant = "determinate" | "indeterminate";
+interface UseCircularProgressProps {
+    value?: number;
+    min?: number;
+    max?: number;
+    variant?: ProgressVariant;
+}
+export declare function useCircularProgress({ value, min, max, variant, }: UseCircularProgressProps): {
+    percentage: number;
+    displayValue: number;
+};
+export {};

package/esm/circular-progress/useCircularProgress.js

@@ -0,0 +1,35 @@
+"use client";
+
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useEffect, useMemo, useState } from "react";
+export function useCircularProgress(_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? 0 : _ref$value,
+    _ref$min = _ref.min,
+    min = _ref$min === void 0 ? 0 : _ref$min,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 100 : _ref$max,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "determinate" : _ref$variant;
+  var normalizedValue = useMemo(function () {
+    if (variant !== "determinate") return 0;
+    return Math.min(Math.max(value, min), max);
+  }, [value, min, max, variant]);
+  var percentage = useMemo(function () {
+    if (variant !== "determinate") return 0;
+    return (normalizedValue - min) / (max - min) * 100;
+  }, [normalizedValue, min, max, variant]);
+
+  // SSR-safe animated number
+  var _useState = useState(normalizedValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    displayValue = _useState2[0],
+    setDisplayValue = _useState2[1];
+  useEffect(function () {
+    setDisplayValue(normalizedValue);
+  }, [normalizedValue]);
+  return {
+    percentage: percentage,
+    displayValue: displayValue
+  };
+}

package/esm/index.d.ts

@@ -20,7 +20,7 @@ export { default as Checkbox } from './checkbox';
 export type { CheckboxProps, CheckboxGroupProps } from './checkbox';
 export { default as Code } from './code';
 export type { CodeProps } from './code';
-export { CircularProgressBar, CircularProgress, buildStyles } from './circular-progress';
+export { default as CircularProgress, useCircularProgress } from './circular-progress';
 export { default as Collapse } from './collapse';
 export type { CollapseProps, CollapseGroupProps } from './collapse';
 export { default as Description } from './description';
@@ -80,6 +80,7 @@ export { default as Spinner } from './spinner';
 export type { SpinnerProps } from './spinner';
 export { default as Table } from './table';
 export type { TableProps, TableColumnProps } from './table';
+export type { RowErrorMap, FieldError } from './table/table-types';
 export { default as Tabs } from './tabs';
 export type { TabsProps } from './tabs';
 export { default as Tag } from './tag';

package/esm/index.js

@@ -12,7 +12,7 @@ export { default as Capacity } from './capacity';
 export { default as Card } from './card';
 export { default as Checkbox } from './checkbox';
 export { default as Code } from './code';
-export { CircularProgressBar, CircularProgress, buildStyles } from './circular-progress';
+export { default as CircularProgress, useCircularProgress } from './circular-progress';
 export { default as Collapse } from './collapse';
 export { default as Description } from './description';
 export { default as Display } from './display';

package/esm/list/list-item.js

@@ -59,23 +59,23 @@ var ListItemComponent = function ListItemComponent(_ref) {
     },
     onClick: clickHandler
   }, props, {
-    className: _JSXStyle.dynamic([["937997701", [direction, justify, alignItems, theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + (props && props.className != null && props.className || classes || "")
+    className: _JSXStyle.dynamic([["2945599429", [direction, justify, alignItems, theme.palette.accents_5, SCALES.font(0.775), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + (props && props.className != null && props.className || classes || "")
   }), children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["937997701", [direction, justify, alignItems, theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + "item-left"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["937997701", [direction, justify, alignItems, theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]])
+    className: _JSXStyle.dynamic([["2945599429", [direction, justify, alignItems, theme.palette.accents_5, SCALES.font(0.775), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + "item-left"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2945599429", [direction, justify, alignItems, theme.palette.accents_5, SCALES.font(0.775), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]])
   }, leading), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["937997701", [direction, justify, alignItems, theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + "item-description"
+    className: _JSXStyle.dynamic([["2945599429", [direction, justify, alignItems, theme.palette.accents_5, SCALES.font(0.775), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + "item-description"
   }, /*#__PURE__*/React.createElement("p", {
-    className: _JSXStyle.dynamic([["937997701", [direction, justify, alignItems, theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + "item-description-primary"
+    className: _JSXStyle.dynamic([["2945599429", [direction, justify, alignItems, theme.palette.accents_5, SCALES.font(0.775), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + "item-description-primary"
   }, primary), secondary && /*#__PURE__*/React.createElement("small", {
-    className: _JSXStyle.dynamic([["937997701", [direction, justify, alignItems, theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + "item-description-secondary"
+    className: _JSXStyle.dynamic([["2945599429", [direction, justify, alignItems, theme.palette.accents_5, SCALES.font(0.775), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + "item-description-secondary"
   }, secondary))), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["937997701", [direction, justify, alignItems, theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + "item-right"
+    className: _JSXStyle.dynamic([["2945599429", [direction, justify, alignItems, theme.palette.accents_5, SCALES.font(0.775), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + "item-right"
   }, trailing)), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "937997701",
-    dynamic: [direction, justify, alignItems, theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]
-  }, ".item.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:".concat(direction, ";-ms-flex-direction:").concat(direction, ";flex-direction:").concat(direction, ";box-sizing:border-box;-webkit-box-pack:").concat(justify, ";-webkit-justify-content:").concat(justify, ";-ms-flex-pack:").concat(justify, ";justify-content:").concat(justify, ";-webkit-align-items:").concat(alignItems, ";-webkit-box-align:").concat(alignItems, ";-ms-flex-align:").concat(alignItems, ";align-items:").concat(alignItems, ";color:").concat(theme.palette.accents_5, ";-webkit-transition:color,background-color 150ms linear;transition:color,background-color 150ms linear;line-height:1.25em;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";padding:").concat(SCALES.pt(0.5), " ").concat(SCALES.pr(0.75), " ").concat(SCALES.pb(0.5), " ").concat(SCALES.pl(0.75), ";cursor:").concat(hasHandler ? 'pointer' : 'default', ";}.item-description.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:5px;}.item-description-primary.__jsx-style-dynamic-selector{margin:0;}.item-description-secondary.__jsx-style-dynamic-selector{margin:0;}.item-left.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.7rem;}.item.__jsx-style-dynamic-selector:hover{color:").concat(theme.palette.foreground, ";}.item.line.__jsx-style-dynamic-selector{line-height:0;padding:0;background-color:").concat(theme.palette.border, ";height:").concat(SCALES.height(0.0625), ";margin:").concat(SCALES.mt(0.35), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0.35), " ").concat(SCALES.ml(0), ";width:").concat(SCALES.width(1, '100%'), ";}.item.title.__jsx-style-dynamic-selector{font-weight:500;font-size:").concat(SCALES.font(0.925), ";color:").concat(theme.palette.foreground, ";}"))), line && /*#__PURE__*/React.createElement(ListItem, {
+    id: "2945599429",
+    dynamic: [direction, justify, alignItems, theme.palette.accents_5, SCALES.font(0.775), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]
+  }, ".item.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:".concat(direction, ";-ms-flex-direction:").concat(direction, ";flex-direction:").concat(direction, ";box-sizing:border-box;gap:5px;-webkit-box-pack:").concat(justify, ";-webkit-justify-content:").concat(justify, ";-ms-flex-pack:").concat(justify, ";justify-content:").concat(justify, ";-webkit-align-items:").concat(alignItems, ";-webkit-box-align:").concat(alignItems, ";-ms-flex-align:").concat(alignItems, ";align-items:").concat(alignItems, ";color:").concat(theme.palette.accents_5, ";-webkit-transition:color,background-color 150ms linear;transition:color,background-color 150ms linear;line-height:1.25em;font-size:").concat(SCALES.font(0.775), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";padding:").concat(SCALES.pt(0.5), " ").concat(SCALES.pr(0.75), " ").concat(SCALES.pb(0.5), " ").concat(SCALES.pl(0.75), ";cursor:").concat(hasHandler ? 'pointer' : 'default', ";}.item-description.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.item-description-primary.__jsx-style-dynamic-selector{font-weight:500;margin:0;}.item-description-secondary.__jsx-style-dynamic-selector{margin:0;}.item-left.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.7rem;}.item.__jsx-style-dynamic-selector:hover{color:").concat(theme.palette.foreground, ";}.item.line.__jsx-style-dynamic-selector{line-height:0;padding:0;background-color:").concat(theme.palette.border, ";height:").concat(SCALES.height(0.0625), ";margin:").concat(SCALES.mt(0.35), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0.35), " ").concat(SCALES.ml(0), ";width:").concat(SCALES.width(1, '100%'), ";}.item.title.__jsx-style-dynamic-selector{font-weight:500;font-size:").concat(SCALES.font(0.925), ";color:").concat(theme.palette.foreground, ";}"))), line && /*#__PURE__*/React.createElement(ListItem, {
     line: true,
     showTitle: false
   }));

package/esm/notetip/note-tip.d.ts

@@ -6,7 +6,9 @@ export type NotetipProps = {
     text: React.ReactNode;
     placement?: Placement;
     delay?: number;
+    disabled?: boolean;
     duration?: number;
+    className?: string;
     animation?: AnimationVariant;
 };
 declare const Notetip: React.FC<NotetipProps>;

package/esm/notetip/note-tip.js

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _JSXStyle from "../styled-jsx.es.js";
 import React, { useState, useRef, useEffect, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { useTheme } from '@helpdice/theme';
+import { useTheme, useClasses } from '@helpdice/theme';
 var OFFSET = 8;
 var Notetip = function Notetip(_ref) {
   var children = _ref.children,
@@ -14,7 +14,10 @@ var Notetip = function Notetip(_ref) {
     _ref$duration = _ref.duration,
     duration = _ref$duration === void 0 ? 200 : _ref$duration,
     _ref$animation = _ref.animation,
-    animation = _ref$animation === void 0 ? 'fade' : _ref$animation;
+    animation = _ref$animation === void 0 ? 'fade' : _ref$animation,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    className = _ref.className;
   var theme = useTheme();
   var referenceRef = useRef(null);
   var tooltipRef = useRef(null);
@@ -90,8 +93,8 @@ var Notetip = function Notetip(_ref) {
         return setOpen(false);
       }, 2000);
     },
-    className: _JSXStyle.dynamic([["633836393", [theme.palette.accents_1, duration, duration, duration]]])
-  }, children), show && /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["633836393", [theme.palette.accents_1, duration, duration, duration]]]) + " " + (useClasses('', className) || "")
+  }, children), show && !disabled ? /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", {
     ref: tooltipRef,
     style: {
       position: 'fixed',
@@ -100,7 +103,7 @@ var Notetip = function Notetip(_ref) {
       transitionDuration: "".concat(duration, "ms")
     },
     className: _JSXStyle.dynamic([["633836393", [theme.palette.accents_1, duration, duration, duration]]]) + " " + "tooltip-box ".concat(animation)
-  }, text), document.body), /*#__PURE__*/React.createElement(_JSXStyle, {
+  }, text), document.body) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "633836393",
     dynamic: [theme.palette.accents_1, duration, duration, duration]
   }, ".tooltip-box.__jsx-style-dynamic-selector{background:".concat(theme.palette.accents_1, ";padding:4px 10px;border-radius:4px;font-size:12px;white-space:nowrap;z-index:9999;opacity:0;}.fade.__jsx-style-dynamic-selector{-webkit-animation:fadeIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;animation:fadeIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;}.scale.__jsx-style-dynamic-selector{-webkit-animation:scaleIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;animation:scaleIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;}.slide.__jsx-style-dynamic-selector{-webkit-animation:slideIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;animation:slideIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;}@-webkit-keyframes fadeIn-__jsx-style-dynamic-selector{to{opacity:1;}}@keyframes fadeIn-__jsx-style-dynamic-selector{to{opacity:1;}}@-webkit-keyframes scaleIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}to{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}@keyframes scaleIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}to{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}@-webkit-keyframes slideIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px);}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}@keyframes slideIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px);}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}")));

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,15 +7,17 @@ interface Props<TableDataItem extends TableDataItemBase> {
     onCell?: TableOnCellClick<TableDataItem>;
     data: Array<TableDataItem>;
     className?: string;
+    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, 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

@@ -14,6 +14,8 @@ var TableBody = function TableBody(_ref) {
     onRow = _ref.onRow,
     onCell = _ref.onCell,
     rowClassName = _ref.rowClassName,
+    isLoading = _ref.isLoading,
+    rowErrors = _ref.rowErrors,
     _ref$rowDraggable = _ref.rowDraggable,
     rowDraggable = _ref$rowDraggable === void 0 ? false : _ref$rowDraggable,
     _ref$readOnly = _ref.readOnly,
@@ -83,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",
@@ -103,17 +106,19 @@ 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;}")));
+      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) {

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,7 +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", "containerStyle", "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" */
 
@@ -20,6 +20,7 @@ import Button from '../button';
 import Tooltip from '../tooltip';
 import Placeholder from '../placeholder';
 import { useTheme } from '@helpdice/theme';
+import Loading from '../loading';
 function TableComponent(tableProps) {
   /* eslint-disable  @typescript-eslint/no-unused-vars */
   var _ref = tableProps,
@@ -59,7 +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 '';
@@ -144,19 +151,21 @@ function TableComponent(tableProps) {
     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
+    onCell: onCell,
+    isLoading: loading === "skeleton" && isLoading,
+    rowErrors: rowErrors
     // textPlaceholder={textPlaceholder}
     ,
     rowClassName: rowClassName,
     rowDraggable: rowDraggable,
     readOnly: readOnly,
     onSelected: onSelected
-  }), children), data.length == 0 && /*#__PURE__*/React.createElement(Placeholder, {
+  }), 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"
@@ -171,7 +180,6 @@ function TableComponent(tableProps) {
     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",
-    placement: "bottom",
     type: "dark"
   }, /*#__PURE__*/React.createElement(Button, {
     disabled: !previousCursor,
@@ -184,7 +192,6 @@ function TableComponent(tableProps) {
     iconRight: /*#__PURE__*/React.createElement(ChevronLeft, null)
   })), /*#__PURE__*/React.createElement(Tooltip.Small, {
     text: "Next",
-    placement: "bottom",
     type: "dark"
   }, /*#__PURE__*/React.createElement(Button, {
     disabled: !nextCursor,

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;