@dreamtree-org/twreact-ui 1.3.10 → 1.3.11

package/dist/charts/index.js

@@ -11,14 +11,19 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-var _excluded$3 = ["className", "title", "description", "defaultTitle", "data", "height", "emptyState", "legend", "accessibleTable", "tableColumns", "children", "aria-label"];
+var _excluded$3 = ["className", "title", "description", "defaultTitle", "data", "height", "aspectRatio", "emptyState", "legend", "accessibleTable", "tableColumns", "children", "aria-label"];
 // The swatch colour arrives as a custom property so a token (`rgb(var(--dt-*))`)
 // and a resolved rgb() string both work.
 var swatch = function swatch(size) {
   return cn.cn("inline-block shrink-0 rounded-full bg-[color:var(--dt-chart-color)]", size);
 };
-var sizeStyle = function sizeStyle(height) {
-  return {
+// `aspectRatio` (e.g. 16 / 9), when given, replaces the fixed height so the chart
+// scales with its container width.
+var sizeStyle = function sizeStyle(height, aspectRatio) {
+  return aspectRatio ? {
+    aspectRatio: String(aspectRatio),
+    width: "100%"
+  } : {
     height: typeof height === "number" ? "".concat(height, "px") : height
   };
 };
@@ -53,6 +58,7 @@ function ChartTooltipContent(_ref2) {
   if (!active || !payload || !payload.length) return null;
   return jsxRuntime.jsxs("div", {
     className: "rounded-md border border-gray-200 bg-white px-3 py-2 text-xs text-gray-900 shadow-md dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100",
+    "data-chart-tooltip": "",
     children: [!hideLabel && label != null && label !== "" && jsxRuntime.jsx("p", {
       className: "mb-1 font-medium",
       children: label
@@ -126,6 +132,7 @@ var ChartFrame = /*#__PURE__*/React__default.default.forwardRef(function ChartFr
     defaultTitle = _ref4.defaultTitle,
     data = _ref4.data,
     height = _ref4.height,
+    aspectRatio = _ref4.aspectRatio,
     _ref4$emptyState = _ref4.emptyState,
     emptyState = _ref4$emptyState === void 0 ? "No data to display" : _ref4$emptyState,
     legend = _ref4.legend,
@@ -141,7 +148,7 @@ var ChartFrame = /*#__PURE__*/React__default.default.forwardRef(function ChartFr
     return jsxRuntime.jsx("div", cn._objectSpread2(cn._objectSpread2({
       ref: ref,
       className: cn.cn("flex w-full items-center justify-center rounded-md border border-dashed border-gray-300 text-sm text-gray-500 dark:border-gray-700 dark:text-gray-400", className),
-      style: sizeStyle(height),
+      style: sizeStyle(height, aspectRatio),
       role: "status",
       "aria-label": name,
       "data-empty": "true"
@@ -158,7 +165,7 @@ var ChartFrame = /*#__PURE__*/React__default.default.forwardRef(function ChartFr
       "aria-label": name,
       "aria-describedby": description ? descriptionId : undefined,
       className: "w-full text-gray-500 dark:text-gray-400",
-      style: sizeStyle(height),
+      style: sizeStyle(height, aspectRatio),
       children: children
     }), description && jsxRuntime.jsx("p", {
       id: descriptionId,
@@ -345,7 +352,108 @@ function useChartId() {
   return "dt-chart-".concat(React.useId().replace(/[^A-Za-z0-9_-]/g, ""));
 }
 
-var _excluded$2 = ["kind", "data", "index", "categories", "colors", "valueFormatter", "xAxisFormatter", "height", "showLegend", "showTooltip", "showXAxis", "showYAxis", "showGrid", "yAxisWidth", "curveType", "stacked", "horizontal", "showDots", "connectNulls", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
+// Internal to the charts entry point. Small-screen helpers for the cartesian
+// charts: measured width (for adaptive ticks / axis width) and a tooltip that a
+// tap can pin open on touch screens.
+/** Gap (px) recharts keeps between x-axis ticks: wider on narrow charts so labels don't collide. */
+function tickGapFor(width) {
+  if (!width) return 8;
+  if (width < 360) return 32;
+  if (width < 640) return 16;
+  return 8;
+}
+/** Default value-axis width (px) when the consumer didn't set `yAxisWidth`. */
+function yAxisWidthFor(width) {
+  if (!width) return 48;
+  return width < 400 ? 36 : 48;
+}
+/** Tracks the rendered width of `ref`'s element. `0` until measured. */
+function useElementWidth() {
+  var ref = React.useRef(null);
+  var _useState = React.useState(0),
+    _useState2 = cn._slicedToArray(_useState, 2),
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  React.useEffect(function () {
+    var node = ref.current;
+    if (!node) return undefined;
+    var measure = function measure() {
+      return setWidth(Math.round(node.getBoundingClientRect().width || 0));
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return undefined;
+    var observer = new ResizeObserver(measure);
+    observer.observe(node);
+    return function () {
+      return observer.disconnect();
+    };
+  }, []);
+  return [ref, width];
+}
+var readIndex = function readIndex(state) {
+  var _state$activeTooltipI;
+  var raw = (_state$activeTooltipI = state === null || state === void 0 ? void 0 : state.activeTooltipIndex) !== null && _state$activeTooltipI !== void 0 ? _state$activeTooltipI : state === null || state === void 0 ? void 0 : state.activeIndex;
+  if (raw === undefined || raw === null || raw === "") return undefined;
+  var n = Number(raw);
+  return Number.isNaN(n) ? raw : n;
+};
+/**
+ * Tap-to-pin tooltip for touch. A tap on the chart pins the tooltip at the
+ * tapped point; a second tap on the chart, or a tap outside it, unpins it.
+ * Mouse and pen keep the normal hover tooltip.
+ *
+ * Returns props for a wrapper element, an `onChartClick` for the recharts root
+ * and `tooltipProps` to spread on `<Tooltip>`.
+ */
+function usePinnedTooltip() {
+  var enabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  var wrapperRef = React.useRef(null);
+  var pointerType = React.useRef("mouse");
+  var _useState3 = React.useState(null),
+    _useState4 = cn._slicedToArray(_useState3, 2),
+    pinned = _useState4[0],
+    setPinned = _useState4[1]; // null | { index }
+  var onPointerDownCapture = React.useCallback(function (e) {
+    pointerType.current = e.pointerType || "mouse";
+  }, []);
+  var toggle = React.useCallback(function (state) {
+    if (!enabled || pointerType.current !== "touch") return;
+    setPinned(function (current) {
+      return current ? null : {
+        index: readIndex(state)
+      };
+    });
+  }, [enabled]);
+  // A tap outside the chart unpins.
+  React.useEffect(function () {
+    if (!pinned) return undefined;
+    var onDown = function onDown(e) {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) setPinned(null);
+    };
+    document.addEventListener("pointerdown", onDown);
+    return function () {
+      return document.removeEventListener("pointerdown", onDown);
+    };
+  }, [pinned]);
+  var tooltipProps = pinned ? cn._objectSpread2({
+    active: true
+  }, pinned.index !== undefined ? {
+    defaultIndex: pinned.index
+  } : {}) : {};
+  return {
+    pinned: Boolean(pinned),
+    wrapperProps: {
+      ref: wrapperRef,
+      onPointerDownCapture: onPointerDownCapture,
+      "data-tooltip-pinned": pinned ? "true" : undefined
+    },
+    onChartClick: toggle,
+    tooltipProps: tooltipProps
+  };
+}
+
+var _excluded$2 = ["kind", "data", "index", "categories", "colors", "valueFormatter", "xAxisFormatter", "height", "aspectRatio", "showLegend", "showTooltip", "showXAxis", "showYAxis", "showGrid", "yAxisWidth", "curveType", "stacked", "horizontal", "showDots", "connectNulls", "animate", "title", "description", "emptyState", "accessibleTable", "className"],
+  _excluded2 = ["ref"];
 var ROOTS = {
   line: recharts.LineChart,
   bar: recharts.BarChart,
@@ -439,6 +547,7 @@ var CartesianChart = /*#__PURE__*/React__default.default.forwardRef(function Car
     xAxisFormatter = _ref2.xAxisFormatter,
     _ref2$height = _ref2.height,
     height = _ref2$height === void 0 ? 300 : _ref2$height,
+    aspectRatio = _ref2.aspectRatio,
     _ref2$showLegend = _ref2.showLegend,
     showLegend = _ref2$showLegend === void 0 ? true : _ref2$showLegend,
     _ref2$showTooltip = _ref2.showTooltip,
@@ -449,8 +558,7 @@ var CartesianChart = /*#__PURE__*/React__default.default.forwardRef(function Car
     showYAxis = _ref2$showYAxis === void 0 ? true : _ref2$showYAxis,
     _ref2$showGrid = _ref2.showGrid,
     showGrid = _ref2$showGrid === void 0 ? true : _ref2$showGrid,
-    _ref2$yAxisWidth = _ref2.yAxisWidth,
-    yAxisWidth = _ref2$yAxisWidth === void 0 ? 48 : _ref2$yAxisWidth,
+    yAxisWidth = _ref2.yAxisWidth,
     _ref2$curveType = _ref2.curveType,
     curveType = _ref2$curveType === void 0 ? "monotone" : _ref2$curveType,
     _ref2$stacked = _ref2.stacked,
@@ -485,6 +593,20 @@ var CartesianChart = /*#__PURE__*/React__default.default.forwardRef(function Car
   var formatIndex = xAxisFormatter || function (v) {
     return v == null ? "" : String(v);
   };
+  var _useElementWidth = useElementWidth(),
+    _useElementWidth2 = cn._slicedToArray(_useElementWidth, 2),
+    measureRef = _useElementWidth2[0],
+    width = _useElementWidth2[1];
+  var pin = usePinnedTooltip(showTooltip);
+  var _pin$wrapperProps = pin.wrapperProps,
+    pinRef = _pin$wrapperProps.ref,
+    pinWrapperProps = cn._objectWithoutProperties(_pin$wrapperProps, _excluded2);
+  // An explicit yAxisWidth always wins; otherwise narrow charts give the plot more room.
+  var valueAxisWidth = yAxisWidth !== null && yAxisWidth !== void 0 ? yAxisWidth : yAxisWidthFor(width);
+  var setWrapperNode = React__default.default.useCallback(function (node) {
+    measureRef.current = node;
+    pinRef.current = node;
+  }, [measureRef, pinRef]);
   var categoryAxis = {
     dataKey: index,
     tick: tick,
@@ -492,7 +614,7 @@ var CartesianChart = /*#__PURE__*/React__default.default.forwardRef(function Car
     axisLine: false,
     tickFormatter: xAxisFormatter,
     hide: !showXAxis,
-    minTickGap: 8
+    minTickGap: tickGapFor(width)
   };
   var valueAxis = {
     tick: tick,
@@ -500,7 +622,7 @@ var CartesianChart = /*#__PURE__*/React__default.default.forwardRef(function Car
     axisLine: false,
     tickFormatter: valueFormatter,
     hide: !showYAxis,
-    width: yAxisWidth
+    width: valueAxisWidth
   };
   return jsxRuntime.jsx(ChartFrame, cn._objectSpread2(cn._objectSpread2({
     ref: ref,
@@ -510,6 +632,7 @@ var CartesianChart = /*#__PURE__*/React__default.default.forwardRef(function Car
     defaultTitle: TITLES[kind],
     data: data,
     height: height,
+    aspectRatio: aspectRatio,
     emptyState: emptyState,
     accessibleTable: accessibleTable,
     legend: showLegend ? categories.map(function (c, i) {
@@ -530,64 +653,70 @@ var CartesianChart = /*#__PURE__*/React__default.default.forwardRef(function Car
       };
     })))
   }, rest), {}, {
-    children: jsxRuntime.jsx(recharts.ResponsiveContainer, {
-      width: "100%",
-      height: "100%",
-      minWidth: 0,
-      children: jsxRuntime.jsxs(Root, {
-        id: chartId,
-        data: data,
-        layout: isHorizontalBars ? "vertical" : "horizontal",
-        margin: {
-          top: 8,
-          right: 8,
-          bottom: 0,
-          left: 0
-        },
-        accessibilityLayer: false,
-        children: [showGrid && jsxRuntime.jsx(recharts.CartesianGrid, {
-          stroke: chrome.grid,
-          strokeDasharray: "3 3",
-          vertical: isHorizontalBars,
-          horizontal: !isHorizontalBars
-        }), isHorizontalBars ? jsxRuntime.jsx(recharts.XAxis, cn._objectSpread2(cn._objectSpread2({
-          type: "number"
-        }, valueAxis), {}, {
-          hide: !showXAxis,
-          width: undefined
-        })) : jsxRuntime.jsx(recharts.XAxis, cn._objectSpread2({}, categoryAxis)), isHorizontalBars ? jsxRuntime.jsx(recharts.YAxis, cn._objectSpread2(cn._objectSpread2({
-          type: "category"
-        }, categoryAxis), {}, {
-          hide: !showYAxis,
-          width: yAxisWidth,
-          interval: 0
-        })) : jsxRuntime.jsx(recharts.YAxis, cn._objectSpread2({}, valueAxis)), showTooltip && jsxRuntime.jsx(recharts.Tooltip, {
-          cursor: kind === "bar" ? {
-            fill: chrome.grid,
-            fillOpacity: 0.4
-          } : {
-            stroke: chrome.grid
+    children: jsxRuntime.jsx("div", cn._objectSpread2(cn._objectSpread2({
+      className: "h-full w-full",
+      ref: setWrapperNode
+    }, pinWrapperProps), {}, {
+      children: jsxRuntime.jsx(recharts.ResponsiveContainer, {
+        width: "100%",
+        height: "100%",
+        minWidth: 0,
+        children: jsxRuntime.jsxs(Root, {
+          id: chartId,
+          onClick: pin.onChartClick,
+          data: data,
+          layout: isHorizontalBars ? "vertical" : "horizontal",
+          margin: {
+            top: 8,
+            right: 8,
+            bottom: 0,
+            left: 0
           },
-          isAnimationActive: false,
-          content: jsxRuntime.jsx(ChartTooltipContent, {
-            valueFormatter: valueFormatter
-          })
-        }), categories.map(function (category, i) {
-          return renderSeries(kind, {
-            id: "".concat(chartId, "-").concat(i),
-            category: category,
-            color: series[i],
-            curve: curve,
-            stacked: stacked,
-            showDots: showDots,
-            connectNulls: connectNulls,
-            animate: animate && !reducedMotion,
-            horizontal: isHorizontalBars,
-            barRadius: 4
-          });
-        })]
+          accessibilityLayer: false,
+          children: [showGrid && jsxRuntime.jsx(recharts.CartesianGrid, {
+            stroke: chrome.grid,
+            strokeDasharray: "3 3",
+            vertical: isHorizontalBars,
+            horizontal: !isHorizontalBars
+          }), isHorizontalBars ? jsxRuntime.jsx(recharts.XAxis, cn._objectSpread2(cn._objectSpread2({
+            type: "number"
+          }, valueAxis), {}, {
+            hide: !showXAxis,
+            width: undefined
+          })) : jsxRuntime.jsx(recharts.XAxis, cn._objectSpread2({}, categoryAxis)), isHorizontalBars ? jsxRuntime.jsx(recharts.YAxis, cn._objectSpread2(cn._objectSpread2({
+            type: "category"
+          }, categoryAxis), {}, {
+            hide: !showYAxis,
+            width: valueAxisWidth,
+            interval: 0
+          })) : jsxRuntime.jsx(recharts.YAxis, cn._objectSpread2({}, valueAxis)), showTooltip && jsxRuntime.jsx(recharts.Tooltip, cn._objectSpread2({
+            cursor: kind === "bar" ? {
+              fill: chrome.grid,
+              fillOpacity: 0.4
+            } : {
+              stroke: chrome.grid
+            },
+            isAnimationActive: false,
+            content: jsxRuntime.jsx(ChartTooltipContent, {
+              valueFormatter: valueFormatter
+            })
+          }, pin.tooltipProps)), categories.map(function (category, i) {
+            return renderSeries(kind, {
+              id: "".concat(chartId, "-").concat(i),
+              category: category,
+              color: series[i],
+              curve: curve,
+              stacked: stacked,
+              showDots: showDots,
+              connectNulls: connectNulls,
+              animate: animate && !reducedMotion,
+              horizontal: isHorizontalBars,
+              barRadius: 4
+            });
+          })]
+        })
       })
-    })
+    }))
   }));
 });
 

package/dist/components/charts/CartesianChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../../src/components/charts/CartesianChart.jsx"],"names":[],"mappings":";AA0DA,iEAAiE;AACjE,wFA2HG;kBAtLe,OAAO"}
+{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../../src/components/charts/CartesianChart.jsx"],"names":[],"mappings":";AA2DA,iEAAiE;AACjE,wFA6IG;kBAzMe,OAAO"}

package/dist/components/charts/ChartFrame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartFrame.d.ts","sourceRoot":"","sources":["../../../src/components/charts/ChartFrame.jsx"],"names":[],"mappings":"AASA;;4CAWC;AAED;;;;;;mDAgBC;AA8BD;;;;GAIG;AACH,mFA4DG;kBArI0B,OAAO"}
+{"version":3,"file":"ChartFrame.d.ts","sourceRoot":"","sources":["../../../src/components/charts/ChartFrame.jsx"],"names":[],"mappings":"AAcA;;4CAWC;AAED;;;;;;mDAgBC;AA8BD;;;;GAIG;AACH,mFA6DG;kBA3I0B,OAAO"}

package/dist/components/charts/useChartLayout.d.ts

@@ -0,0 +1,25 @@
+/** Gap (px) recharts keeps between x-axis ticks: wider on narrow charts so labels don't collide. */
+export function tickGapFor(width: any): 8 | 16 | 32;
+/** Default value-axis width (px) when the consumer didn't set `yAxisWidth`. */
+export function yAxisWidthFor(width: any): 36 | 48;
+/** Tracks the rendered width of `ref`'s element. `0` until measured. */
+export function useElementWidth(): (number | import("react").MutableRefObject<null>)[];
+/**
+ * Tap-to-pin tooltip for touch. A tap on the chart pins the tooltip at the
+ * tapped point; a second tap on the chart, or a tap outside it, unpins it.
+ * Mouse and pen keep the normal hover tooltip.
+ *
+ * Returns props for a wrapper element, an `onChartClick` for the recharts root
+ * and `tooltipProps` to spread on `<Tooltip>`.
+ */
+export function usePinnedTooltip(enabled?: boolean): {
+    pinned: boolean;
+    wrapperProps: {
+        ref: import("react").MutableRefObject<null>;
+        onPointerDownCapture: (e: any) => void;
+        "data-tooltip-pinned": string | undefined;
+    };
+    onChartClick: (state: any) => void;
+    tooltipProps: {};
+};
+//# sourceMappingURL=useChartLayout.d.ts.map

package/dist/components/charts/useChartLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChartLayout.d.ts","sourceRoot":"","sources":["../../../src/components/charts/useChartLayout.js"],"names":[],"mappings":"AAOA,oGAAoG;AACpG,oDAKC;AAED,+EAA+E;AAC/E,mDAGC;AAED,wEAAwE;AACxE,uFAcC;AASD;;;;;;;GAOG;AACH;;;;;;;;;EAyCC"}

package/dist/components/core/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/core/Button.jsx"],"names":[],"mappings":";AAIA,gFAkEG;kBAtE+B,OAAO"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/core/Button.jsx"],"names":[],"mappings":";AAYA,gFAgGG;kBA5G+B,OAAO"}

package/dist/components/core/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/core/Checkbox.jsx"],"names":[],"mappings":";AA+DA,kFA8JE;kBAtNK,OAAO"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/core/Checkbox.jsx"],"names":[],"mappings":";AAuFA,kFAmKE;kBAnPK,OAAO"}

package/dist/components/core/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/core/ColorPicker.jsx"],"names":[],"mappings":";AA0FA,qFAiLG;kBA3QyD,OAAO"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/core/ColorPicker.jsx"],"names":[],"mappings":";AAmGA,qFA+LG;kBAlSyD,OAAO"}

package/dist/components/core/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/core/Input.jsx"],"names":[],"mappings":";AAIA,+EAmOG;kBAvOqE,OAAO"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/core/Input.jsx"],"names":[],"mappings":";AAyCA,+EAgRG;kBAzTqE,OAAO"}

package/dist/components/core/Loader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.d.ts","sourceRoot":"","sources":["../../../src/components/core/Loader.jsx"],"names":[],"mappings":";AAmBA,gFA8IG;kBAhK+B,OAAO"}
+{"version":3,"file":"Loader.d.ts","sourceRoot":"","sources":["../../../src/components/core/Loader.jsx"],"names":[],"mappings":";AA6BA,gFA2GG;kBAvI+B,OAAO"}

package/dist/components/core/LocationPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LocationPicker.d.ts","sourceRoot":"","sources":["../../../src/components/core/LocationPicker.jsx"],"names":[],"mappings":";AAyBA,wFAuJG;kBA/KuD,OAAO"}
+{"version":3,"file":"LocationPicker.d.ts","sourceRoot":"","sources":["../../../src/components/core/LocationPicker.jsx"],"names":[],"mappings":";AAmCA,wFAqNG;kBAvP8D,OAAO"}

package/dist/components/core/ProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/core/ProgressBar.jsx"],"names":[],"mappings":";AAgDA,qFAiGG;kBAjJ+B,OAAO"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/core/ProgressBar.jsx"],"names":[],"mappings":";AAgDA,qFAqGG;kBArJ+B,OAAO"}

package/dist/components/core/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/core/Radio.jsx"],"names":[],"mappings":";AAmBA,+EAwKG;kBAnLI,OAAO"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/core/Radio.jsx"],"names":[],"mappings":";AAkBA,+EA2KG;kBArLI,OAAO"}

package/dist/components/core/Rate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Rate.d.ts","sourceRoot":"","sources":["../../../src/components/core/Rate.jsx"],"names":[],"mappings":";AA2CA,8EAyJG;kBAnMiD,OAAO"}
+{"version":3,"file":"Rate.d.ts","sourceRoot":"","sources":["../../../src/components/core/Rate.jsx"],"names":[],"mappings":";AA2CA,8EAyNG;kBAnQiD,OAAO"}

package/dist/components/core/RoundedTag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RoundedTag.d.ts","sourceRoot":"","sources":["../../../src/components/core/RoundedTag.jsx"],"names":[],"mappings":";AAIA,oFAgKG;kBApK+B,OAAO"}
+{"version":3,"file":"RoundedTag.d.ts","sourceRoot":"","sources":["../../../src/components/core/RoundedTag.jsx"],"names":[],"mappings":";AAIA,oFAkKG;kBAtK+B,OAAO"}

package/dist/components/core/Skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/core/Skeleton.jsx"],"names":[],"mappings":";AA0BA,kFAsFG;kBAhH+B,OAAO"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/core/Skeleton.jsx"],"names":[],"mappings":";AAqCA,kFAiEG;kBAtG+B,OAAO"}

package/dist/components/core/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/core/Slider.jsx"],"names":[],"mappings":";AAMA,gFAgGG;kBAtGuD,OAAO"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/core/Slider.jsx"],"names":[],"mappings":";AAMA,gFAwHG;kBA9HiE,OAAO"}

package/dist/components/core/SpeechToText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpeechToText.d.ts","sourceRoot":"","sources":["../../../src/components/core/SpeechToText.jsx"],"names":[],"mappings":";AAqBA,sFAgQE;kBA9QK,OAAO"}
+{"version":3,"file":"SpeechToText.d.ts","sourceRoot":"","sources":["../../../src/components/core/SpeechToText.jsx"],"names":[],"mappings":";AA8BA,sFA+SE;kBAtUK,OAAO"}

package/dist/components/core/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/core/Switch.jsx"],"names":[],"mappings":";AAqEA,gFA8JG;kBAnO2D,OAAO"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/core/Switch.jsx"],"names":[],"mappings":";AA8EA,gFAiOG;kBA/SmE,OAAO"}

package/dist/components/core/Tabs.d.ts

@@ -1,7 +1,3 @@
-export function TabList({ children, className }: {
-    children: any;
-    className?: string | undefined;
-}): import("react/jsx-runtime").JSX.Element;
 export function Tab({ children, index, className, iconLeft, iconRight, disabled, tabClassName, }: {
     children: any;
     index: any;
@@ -21,7 +17,8 @@ export function Panel({ children, index, className, animated }: {
     className?: string | undefined;
     animated?: boolean | undefined;
 }): import("react/jsx-runtime").JSX.Element | null;
+export const TabList: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 export default Tabs;
-declare const Tabs: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from "react";
+declare const Tabs: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 //# sourceMappingURL=Tabs.d.ts.map

package/dist/components/core/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/core/Tabs.jsx"],"names":[],"mappings":"AA0GA;;;4CAuBC;AAGD;;;;;;;;4CAmHC;AAGD;;;4CAcC;AAED;;;;;mDAyBC;;AA/OD,8EAiDG;kBA7FI,OAAO"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/core/Tabs.jsx"],"names":[],"mappings":"AAgPA;;;;;;;;4CA+IC;AAGD;;;4CAsDC;AAED;;;;;mDAyBC;AAnVD,gFA2GG;;kBAlOI,OAAO;AA0Dd,8EAwDG"}

package/dist/components/core/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/core/Textarea.jsx"],"names":[],"mappings":";AA0BA,kFAgGG;kBA1HiG,OAAO"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/core/Textarea.jsx"],"names":[],"mappings":";AAiCA,kFAqGG;kBAtIiG,OAAO"}

package/dist/components/navigation/Breadcrumbs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Breadcrumbs.jsx"],"names":[],"mappings":";AAQA,qFAoDG;kBA5De,OAAO"}
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Breadcrumbs.jsx"],"names":[],"mappings":";AA4BA,qFA4GG;kBAxIgD,OAAO"}

package/dist/components/navigation/FootNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FootNav.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/FootNav.jsx"],"names":[],"mappings":";AAmBA,iFA0DG;kBA7Ee,OAAO"}
+{"version":3,"file":"FootNav.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/FootNav.jsx"],"names":[],"mappings":";AAoDA,iFAuFG;kBA3Ie,OAAO"}

package/dist/components/utility/Avatar.d.ts

@@ -1,3 +1,11 @@
+export const AVATAR_SIZES: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+};
 export default Avatar;
 declare const Avatar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/dist/components/utility/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Avatar.jsx"],"names":[],"mappings":";AAIA,gFAoHG;kBAxHe,OAAO"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Avatar.jsx"],"names":[],"mappings":"AAKA;;;;;;;EAOE;;AAEF,gFA6GG;kBA3He,OAAO"}

package/dist/components/utility/AvatarGroup.d.ts

@@ -0,0 +1,4 @@
+export default AvatarGroup;
+declare const AvatarGroup: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';
+//# sourceMappingURL=AvatarGroup.d.ts.map

package/dist/components/utility/AvatarGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../src/components/utility/AvatarGroup.jsx"],"names":[],"mappings":";AAkBA,qFA2CG;kBA7De,OAAO"}

package/dist/components/utility/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Badge.jsx"],"names":[],"mappings":";AAGA,+EA8CG;kBAjDe,OAAO"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Badge.jsx"],"names":[],"mappings":";AA8BA,+EAuCG;kBArEe,OAAO"}

package/dist/components/utility/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Card.jsx"],"names":[],"mappings":";AAGA,8EAqBG;kBAxBe,OAAO"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Card.jsx"],"names":[],"mappings":";AAYA,8EAyCG;kBArDe,OAAO"}

package/dist/components/utility/Carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Carousel.jsx"],"names":[],"mappings":"AAUA,iFAoGE;;kBA9GgB,OAAO"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Carousel.jsx"],"names":[],"mappings":"AA2BA,iFAkME;;kBA7NgB,OAAO"}

package/dist/components/utility/FileUpload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../src/components/utility/FileUpload.jsx"],"names":[],"mappings":";AAYA,oFAyKG;kBArLkD,OAAO"}
+{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../src/components/utility/FileUpload.jsx"],"names":[],"mappings":";AAqBA,oFA4OG;kBAjQkD,OAAO"}

package/dist/components/utility/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Pagination.jsx"],"names":[],"mappings":";AAIA,oFA8HG;kBAlIe,OAAO"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Pagination.jsx"],"names":[],"mappings":";AAkBA,oFA4IG;kBA9Je,OAAO"}

package/dist/components/utility/Sortable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sortable.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Sortable.jsx"],"names":[],"mappings":";AAqBA,kFAoHG;kBAzI0G,OAAO"}
+{"version":3,"file":"Sortable.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Sortable.jsx"],"names":[],"mappings":";AAqBA,kFAsHG;kBA3I0G,OAAO"}

package/dist/components/utility/Stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Stepper.jsx"],"names":[],"mappings":";AAIA,iFAuIG;kBA3Ie,OAAO"}
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Stepper.jsx"],"names":[],"mappings":";AAgEA,iFAqIG;kBArMe,OAAO"}

package/dist/esm/components/blocks/EmptyState.js

@@ -22,7 +22,7 @@ var EmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: cn('flex flex-col items-center justify-center gap-2 text-center', compact ? 'px-4 py-8' : 'px-6 py-12', className)
   }, props), {}, {
     children: [jsx("span", {
-      className: "mb-1 grid h-12 w-12 place-items-center rounded-full bg-secondary-100 text-muted",
+      className: "mb-1 grid h-12 w-12 place-items-center rounded-full bg-secondary-100 text-muted dark:bg-gray-800",
       "aria-hidden": "true",
       children: icon || jsx(Inbox, {
         className: "h-6 w-6"

package/dist/esm/components/blocks/ErrorState.js

@@ -25,7 +25,7 @@ var ErrorState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: cn('flex flex-col items-center justify-center gap-2 px-6 py-12 text-center', className)
   }, props), {}, {
     children: [jsx("span", {
-      className: "mb-1 grid h-12 w-12 place-items-center rounded-full bg-error-50 text-error-600",
+      className: "mb-1 grid h-12 w-12 place-items-center rounded-full bg-error-50 text-error-600 dark:bg-error-900/30 dark:text-error-400",
       "aria-hidden": "true",
       children: jsx(AlertCircle, {
         className: "h-6 w-6"

package/dist/esm/components/blocks/LoadingState.js

@@ -17,7 +17,7 @@ var Bone = function Bone(_ref) {
     className = _ref.className;
   return jsx("span", {
     "aria-hidden": "true",
-    className: cn('block animate-pulse rounded-control bg-gray-200 motion-reduce:animate-none', className),
+    className: cn('block animate-pulse rounded-control bg-line motion-reduce:animate-none', className),
     style: {
       width: width,
       height: height
@@ -28,7 +28,7 @@ var Line = Bone;
 var shapes = {
   table: function table(rows) {
     return jsx("div", {
-      className: "divide-y divide-gray-200",
+      className: "divide-y divide-line",
       children: Array.from({
         length: rows
       }, function (_, i) {
@@ -54,7 +54,7 @@ var shapes = {
         length: rows
       }, function (_, i) {
         return jsxs("div", {
-          className: "flex flex-col gap-3 rounded-card border border-gray-200 p-4",
+          className: "flex flex-col gap-3 rounded-card border border-line p-4",
           children: [jsx(Line, {
             width: "60%",
             height: 16
@@ -72,7 +72,7 @@ var shapes = {
         length: rows
       }, function (_, i) {
         return jsxs("div", {
-          className: "flex items-center gap-4 rounded-card border border-gray-200 bg-surface p-5",
+          className: "flex items-center gap-4 rounded-card border border-line bg-surface p-5",
           children: [jsx(Bone, {
             width: 48,
             height: 48