@dreamtree-org/twreact-ui 1.3.0 → 1.3.2

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

@@ -0,0 +1,53 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { AlertCircle, RotateCw } from 'lucide-react';
+import { cn } from '../../utils/cn.js';
+import Button from '../core/Button.js';
+
+var _excluded = ["title", "description", "onRetry", "retryLabel", "className"];
+// Extracted from CampaignPro/components/app/page-error.tsx (7 products hand-roll one).
+// Neutral copy and a retry; never shows a raw error.message.
+var ErrorState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "We couldn't load this" : _ref$title,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? 'Your data is safe. Try again, and if it keeps happening, contact support.' : _ref$description,
+    onRetry = _ref.onRetry,
+    _ref$retryLabel = _ref.retryLabel,
+    retryLabel = _ref$retryLabel === void 0 ? 'Try again' : _ref$retryLabel,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    role: "alert",
+    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",
+      "aria-hidden": "true",
+      children: jsx(AlertCircle, {
+        className: "h-6 w-6"
+      })
+    }), jsx("h3", {
+      className: "text-base font-semibold text-foreground",
+      children: title
+    }), description && jsx("p", {
+      className: "max-w-sm text-sm text-muted",
+      children: description
+    }), onRetry && jsx(Button, {
+      variant: "outline",
+      className: "mt-3",
+      onClick: onRetry,
+      leftIcon: jsx(RotateCw, {
+        className: "h-4 w-4",
+        "aria-hidden": "true"
+      }),
+      children: retryLabel
+    })]
+  }));
+});
+ErrorState.displayName = 'ErrorState';
+
+export { ErrorState as default };

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

@@ -0,0 +1,134 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cn } from '../../utils/cn.js';
+
+var _excluded = ["variant", "rows", "label", "className"];
+// Extracted from venturepro/client/src/components/States.jsx (6 products hand-roll loaders).
+// A skeleton shaped like the content that replaces it; no page-level spinners.
+// Plain bars rather than twreact Skeleton: Skeleton gives every bar its own role="status" and an
+// inline colour, which would nest live regions inside this one.
+var Bone = function Bone(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '100%' : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 14 : _ref$height,
+    className = _ref.className;
+  return jsx("span", {
+    "aria-hidden": "true",
+    className: cn('block animate-pulse rounded-control bg-gray-200 motion-reduce:animate-none', className),
+    style: {
+      width: width,
+      height: height
+    }
+  });
+};
+var Line = Bone;
+var shapes = {
+  table: function table(rows) {
+    return jsx("div", {
+      className: "divide-y divide-gray-200",
+      children: Array.from({
+        length: rows
+      }, function (_, i) {
+        return jsxs("div", {
+          className: "flex items-center gap-4 px-4 py-3",
+          children: [jsx(Line, {
+            width: "30%"
+          }), jsx(Line, {
+            width: "20%"
+          }), jsx(Line, {
+            width: "15%"
+          }), jsx(Line, {
+            width: "10%"
+          })]
+        }, i);
+      })
+    });
+  },
+  cards: function cards(rows) {
+    return jsx("div", {
+      className: "grid gap-4 p-4 sm:grid-cols-2 lg:grid-cols-3",
+      children: Array.from({
+        length: rows
+      }, function (_, i) {
+        return jsxs("div", {
+          className: "flex flex-col gap-3 rounded-card border border-gray-200 p-4",
+          children: [jsx(Line, {
+            width: "60%",
+            height: 16
+          }), jsx(Line, {}), jsx(Line, {
+            width: "80%"
+          })]
+        }, i);
+      })
+    });
+  },
+  stats: function stats(rows) {
+    return jsx("div", {
+      className: "grid grid-cols-2 gap-4 lg:grid-cols-4",
+      children: Array.from({
+        length: rows
+      }, function (_, i) {
+        return jsxs("div", {
+          className: "flex items-center gap-4 rounded-card border border-gray-200 bg-surface p-5",
+          children: [jsx(Bone, {
+            width: 48,
+            height: 48
+          }), jsxs("div", {
+            className: "flex flex-1 flex-col gap-2",
+            children: [jsx(Line, {
+              width: "60%"
+            }), jsx(Line, {
+              width: "40%",
+              height: 24
+            })]
+          })]
+        }, i);
+      })
+    });
+  },
+  detail: function detail(rows) {
+    return jsx("div", {
+      className: "grid grid-cols-[minmax(8rem,auto)_1fr] gap-x-6 gap-y-3 p-4",
+      children: Array.from({
+        length: rows
+      }, function (_, i) {
+        return jsxs(React.Fragment, {
+          children: [jsx(Line, {
+            width: "70%"
+          }), jsx(Line, {
+            width: "".concat(50 + i * 17 % 40, "%")
+          })]
+        }, i);
+      })
+    });
+  }
+};
+var LoadingState = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var _ref2$variant = _ref2.variant,
+    variant = _ref2$variant === void 0 ? 'table' : _ref2$variant,
+    rows = _ref2.rows,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? 'Loading…' : _ref2$label,
+    className = _ref2.className,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var count = rows !== null && rows !== void 0 ? rows : variant === 'stats' ? 4 : variant === 'cards' ? 3 : 5;
+  var render = shapes[variant] || shapes.table;
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    role: "status",
+    "aria-busy": "true",
+    "aria-live": "polite",
+    className: cn(className)
+  }, props), {}, {
+    children: [jsx("span", {
+      className: "sr-only",
+      children: label
+    }), render(count)]
+  }));
+});
+LoadingState.displayName = 'LoadingState';
+
+export { Bone, LoadingState as default };

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

@@ -0,0 +1,51 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { ArrowLeft } from 'lucide-react';
+import { cn } from '../../utils/cn.js';
+
+var _excluded = ["title", "subtitle", "actions", "back", "linkAs", "className"];
+// Extracted from taskpro/client/src/features/shared/PageHeader.jsx (31 imports) and the
+// CampaignPro UX guide's page anatomy: one h1, a muted subtitle, actions top right.
+var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var title = _ref.title,
+    subtitle = _ref.subtitle,
+    actions = _ref.actions,
+    back = _ref.back,
+    _ref$linkAs = _ref.linkAs,
+    Link = _ref$linkAs === void 0 ? 'a' : _ref$linkAs,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn('flex flex-col gap-3', className)
+  }, props), {}, {
+    children: [back && jsxs(Link, {
+      href: back.href,
+      className: "inline-flex w-fit items-center gap-1.5 rounded-control text-sm text-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2",
+      children: [jsx(ArrowLeft, {
+        className: "h-4 w-4",
+        "aria-hidden": "true"
+      }), back.label]
+    }), jsxs("div", {
+      className: "flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between",
+      children: [jsxs("div", {
+        className: "min-w-0",
+        children: [jsx("h1", {
+          className: "text-xl font-semibold tracking-tight text-foreground sm:text-2xl",
+          children: title
+        }), subtitle && jsx("p", {
+          className: "mt-1 max-w-2xl text-sm text-muted",
+          children: subtitle
+        })]
+      }), actions && jsx("div", {
+        className: "flex flex-wrap items-center gap-3",
+        children: actions
+      })]
+    })]
+  }));
+});
+PageHeader.displayName = 'PageHeader';
+
+export { PageHeader as default };

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

@@ -0,0 +1,79 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { ArrowUp, ArrowDown } from 'lucide-react';
+import { cn } from '../../utils/cn.js';
+import Card from '../utility/Card.js';
+import { Bone } from './LoadingState.js';
+
+var _excluded = ["label", "value", "icon", "tone", "change", "loading", "className"];
+// Extracted from PracticePro/components/ui/StatCard.tsx (28 imports), with tones mapped to the
+// semantic scales instead of product colours. Class names are written out in full so Tailwind keeps them.
+var TONES = {
+  primary: 'bg-primary-50 text-primary-600',
+  secondary: 'bg-secondary-100 text-secondary-600',
+  success: 'bg-success-50 text-success-600',
+  warning: 'bg-warning-50 text-warning-600',
+  error: 'bg-error-50 text-error-600',
+  info: 'bg-info-50 text-info-600'
+};
+var StatCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _change$goodWhenUp, _change$unit;
+  var label = _ref.label,
+    value = _ref.value,
+    icon = _ref.icon,
+    _ref$tone = _ref.tone,
+    tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
+    change = _ref.change,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var up = change ? change.value >= 0 : false;
+  var good = change ? ((_change$goodWhenUp = change.goodWhenUp) !== null && _change$goodWhenUp !== void 0 ? _change$goodWhenUp : true) === up : false;
+  return jsx(Card, _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn('h-full', className)
+  }, props), {}, {
+    children: jsxs("div", {
+      className: "flex items-start gap-4 p-5",
+      children: [icon && jsx("span", {
+        className: cn('grid h-12 w-12 shrink-0 place-items-center rounded-card', TONES[tone] || TONES.primary),
+        "aria-hidden": "true",
+        children: icon
+      }), jsxs("div", {
+        className: "min-w-0",
+        children: [jsx("p", {
+          className: "text-sm text-muted",
+          children: label
+        }), loading ? jsx(Bone, {
+          height: 32,
+          width: 72,
+          className: "mt-1"
+        }) : jsx("p", {
+          className: "mt-0.5 text-2xl font-semibold tracking-tight text-foreground tabular-nums sm:text-3xl",
+          children: value
+        }), change && !loading && jsxs("p", {
+          className: "mt-1 flex items-center gap-1 text-xs text-muted",
+          children: [jsxs("span", {
+            className: cn('inline-flex items-center gap-0.5 font-semibold', good ? 'text-success-600' : 'text-error-600'),
+            children: [up ? jsx(ArrowUp, {
+              className: "h-3.5 w-3.5",
+              "aria-hidden": "true"
+            }) : jsx(ArrowDown, {
+              className: "h-3.5 w-3.5",
+              "aria-hidden": "true"
+            }), jsxs("span", {
+              className: "sr-only",
+              children: [up ? 'Up' : 'Down', " "]
+            }), Math.abs(change.value), (_change$unit = change.unit) !== null && _change$unit !== void 0 ? _change$unit : '%']
+          }), change.period]
+        })]
+      })]
+    })
+  }));
+});
+StatCard.displayName = 'StatCard';
+
+export { StatCard as default };

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

@@ -0,0 +1,55 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cn } from '../../utils/cn.js';
+import Badge from '../utility/Badge.js';
+
+var _excluded = ["status", "map", "tone", "icon", "children", "className"];
+// Extracted from billpro/client/src/components/StatusPill.jsx (10 products hand-roll one).
+// One map from domain state to tone + human label; unknown states are humanized, never shown raw.
+var TONE_TO_VARIANT = {
+  neutral: 'secondary',
+  info: 'primary',
+  success: 'success',
+  warning: 'warning',
+  danger: 'error',
+  muted: 'outline',
+  // Semantic tones are accepted too.
+  primary: 'primary',
+  secondary: 'secondary',
+  error: 'error'
+};
+var humanizeStatus = function humanizeStatus(status) {
+  var words = String(status).replace(/[_-]+/g, ' ').trim().toLowerCase();
+  return words.charAt(0).toUpperCase() + words.slice(1);
+};
+var StatusPill = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref2;
+  var status = _ref.status,
+    map = _ref.map,
+    tone = _ref.tone,
+    icon = _ref.icon,
+    children = _ref.children,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var entry = status != null && map ? map[status] : undefined;
+  var resolvedTone = (entry === null || entry === void 0 ? void 0 : entry.tone) || tone || 'neutral';
+  var label = (_ref2 = children !== null && children !== void 0 ? children : entry === null || entry === void 0 ? void 0 : entry.label) !== null && _ref2 !== void 0 ? _ref2 : status != null ? humanizeStatus(status) : null;
+  var resolvedIcon = icon !== null && icon !== void 0 ? icon : entry === null || entry === void 0 ? void 0 : entry.icon;
+  return jsxs(Badge, _objectSpread2(_objectSpread2({
+    ref: ref,
+    variant: TONE_TO_VARIANT[resolvedTone] || 'secondary',
+    size: "sm",
+    className: cn('gap-1.5 whitespace-nowrap', className)
+  }, props), {}, {
+    children: [resolvedIcon && jsx("span", {
+      className: "inline-flex h-3.5 w-3.5 items-center",
+      "aria-hidden": "true",
+      children: resolvedIcon
+    }), label]
+  }));
+});
+StatusPill.displayName = 'StatusPill';
+
+export { StatusPill as default, humanizeStatus };

package/dist/esm/components/charts/AreaChart.js

@@ -0,0 +1,16 @@
+'use client';
+import { objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import CartesianChart from './CartesianChart.js';
+
+var AreaChart = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return jsx(CartesianChart, _objectSpread2(_objectSpread2({
+    ref: ref
+  }, props), {}, {
+    kind: "area"
+  }));
+});
+AreaChart.displayName = "AreaChart";
+
+export { AreaChart as default };

package/dist/esm/components/charts/BarChart.js

@@ -0,0 +1,16 @@
+'use client';
+import { objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import CartesianChart from './CartesianChart.js';
+
+var BarChart = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return jsx(CartesianChart, _objectSpread2(_objectSpread2({
+    ref: ref
+  }, props), {}, {
+    kind: "bar"
+  }));
+});
+BarChart.displayName = "BarChart";
+
+export { BarChart as default };

package/dist/esm/components/charts/CartesianChart.js

@@ -0,0 +1,250 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { ResponsiveContainer, AreaChart, BarChart, LineChart, CartesianGrid, XAxis, YAxis, Tooltip, Bar, Area, Line } from 'recharts';
+import { ChartFrame, ChartTooltipContent } from './ChartFrame.js';
+import { useChartTheme, useReducedMotion, defaultValueFormatter } from './chartTheme.js';
+
+var _excluded = ["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"];
+var ROOTS = {
+  line: LineChart,
+  bar: BarChart,
+  area: AreaChart
+};
+var TITLES = {
+  line: "Line chart",
+  bar: "Bar chart",
+  area: "Area chart"
+};
+var CURVES = {
+  linear: "linear",
+  monotone: "monotone",
+  step: "step",
+  natural: "natural"
+};
+function renderSeries(kind, _ref) {
+  var category = _ref.category,
+    color = _ref.color,
+    curve = _ref.curve,
+    stacked = _ref.stacked,
+    showDots = _ref.showDots,
+    connectNulls = _ref.connectNulls,
+    animate = _ref.animate,
+    horizontal = _ref.horizontal,
+    barRadius = _ref.barRadius;
+  var common = {
+    dataKey: category,
+    name: category,
+    isAnimationActive: animate
+  };
+  if (kind === "bar") {
+    var radius = horizontal ? [0, barRadius, barRadius, 0] : [barRadius, barRadius, 0, 0];
+    return jsx(Bar, _objectSpread2(_objectSpread2({}, common), {}, {
+      fill: color,
+      stackId: stacked ? "stack" : undefined,
+      radius: stacked ? 0 : radius,
+      maxBarSize: 48
+    }), category);
+  }
+  if (kind === "area") {
+    return jsx(Area, _objectSpread2(_objectSpread2({}, common), {}, {
+      type: curve,
+      stroke: color,
+      fill: color,
+      fillOpacity: stacked ? 0.4 : 0.15,
+      strokeWidth: 2,
+      stackId: stacked ? "stack" : undefined,
+      dot: showDots ? {
+        r: 3,
+        fill: color,
+        strokeWidth: 0
+      } : false,
+      activeDot: {
+        r: 4,
+        strokeWidth: 0,
+        fill: color
+      },
+      connectNulls: connectNulls
+    }), category);
+  }
+  return jsx(Line, _objectSpread2(_objectSpread2({}, common), {}, {
+    type: curve,
+    stroke: color,
+    strokeWidth: 2,
+    dot: showDots ? {
+      r: 3,
+      fill: color,
+      strokeWidth: 0
+    } : false,
+    activeDot: {
+      r: 4,
+      strokeWidth: 0,
+      fill: color
+    },
+    connectNulls: connectNulls
+  }), category);
+}
+/** Shared implementation of LineChart / BarChart / AreaChart. */
+var CartesianChart = /*#__PURE__*/React.forwardRef(function CartesianChart(_ref2, ref) {
+  var kind = _ref2.kind,
+    data = _ref2.data,
+    index = _ref2.index,
+    _ref2$categories = _ref2.categories,
+    categories = _ref2$categories === void 0 ? [] : _ref2$categories,
+    colors = _ref2.colors,
+    _ref2$valueFormatter = _ref2.valueFormatter,
+    valueFormatter = _ref2$valueFormatter === void 0 ? defaultValueFormatter : _ref2$valueFormatter,
+    xAxisFormatter = _ref2.xAxisFormatter,
+    _ref2$height = _ref2.height,
+    height = _ref2$height === void 0 ? 300 : _ref2$height,
+    _ref2$showLegend = _ref2.showLegend,
+    showLegend = _ref2$showLegend === void 0 ? true : _ref2$showLegend,
+    _ref2$showTooltip = _ref2.showTooltip,
+    showTooltip = _ref2$showTooltip === void 0 ? true : _ref2$showTooltip,
+    _ref2$showXAxis = _ref2.showXAxis,
+    showXAxis = _ref2$showXAxis === void 0 ? true : _ref2$showXAxis,
+    _ref2$showYAxis = _ref2.showYAxis,
+    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,
+    _ref2$curveType = _ref2.curveType,
+    curveType = _ref2$curveType === void 0 ? "monotone" : _ref2$curveType,
+    _ref2$stacked = _ref2.stacked,
+    stacked = _ref2$stacked === void 0 ? false : _ref2$stacked,
+    _ref2$horizontal = _ref2.horizontal,
+    horizontal = _ref2$horizontal === void 0 ? false : _ref2$horizontal,
+    _ref2$showDots = _ref2.showDots,
+    showDots = _ref2$showDots === void 0 ? false : _ref2$showDots,
+    _ref2$connectNulls = _ref2.connectNulls,
+    connectNulls = _ref2$connectNulls === void 0 ? false : _ref2$connectNulls,
+    _ref2$animate = _ref2.animate,
+    animate = _ref2$animate === void 0 ? true : _ref2$animate,
+    title = _ref2.title,
+    description = _ref2.description,
+    emptyState = _ref2.emptyState,
+    _ref2$accessibleTable = _ref2.accessibleTable,
+    accessibleTable = _ref2$accessibleTable === void 0 ? true : _ref2$accessibleTable,
+    className = _ref2.className,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var _useChartTheme = useChartTheme(categories, colors),
+    chrome = _useChartTheme.chrome,
+    series = _useChartTheme.series;
+  var reducedMotion = useReducedMotion();
+  var Root = ROOTS[kind];
+  var isHorizontalBars = kind === "bar" && horizontal;
+  var curve = CURVES[curveType] || "monotone";
+  var tick = {
+    fill: chrome.axis,
+    fontSize: 12
+  };
+  var formatIndex = xAxisFormatter || function (v) {
+    return v == null ? "" : String(v);
+  };
+  var categoryAxis = {
+    dataKey: index,
+    tick: tick,
+    tickLine: false,
+    axisLine: false,
+    tickFormatter: xAxisFormatter,
+    hide: !showXAxis,
+    minTickGap: 8
+  };
+  var valueAxis = {
+    tick: tick,
+    tickLine: false,
+    axisLine: false,
+    tickFormatter: valueFormatter,
+    hide: !showYAxis,
+    width: yAxisWidth
+  };
+  return jsx(ChartFrame, _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: className,
+    title: title,
+    description: description,
+    defaultTitle: TITLES[kind],
+    data: data,
+    height: height,
+    emptyState: emptyState,
+    accessibleTable: accessibleTable,
+    legend: showLegend ? categories.map(function (c, i) {
+      return {
+        name: c,
+        color: series[i]
+      };
+    }) : null,
+    tableColumns: [{
+      key: index,
+      label: index,
+      format: formatIndex
+    }].concat(_toConsumableArray(categories.map(function (c) {
+      return {
+        key: c,
+        label: c,
+        format: valueFormatter
+      };
+    })))
+  }, rest), {}, {
+    children: jsx(ResponsiveContainer, {
+      width: "100%",
+      height: "100%",
+      minWidth: 0,
+      children: jsxs(Root, {
+        data: data,
+        layout: isHorizontalBars ? "vertical" : "horizontal",
+        margin: {
+          top: 8,
+          right: 8,
+          bottom: 0,
+          left: 0
+        },
+        accessibilityLayer: false,
+        children: [showGrid && jsx(CartesianGrid, {
+          stroke: chrome.grid,
+          strokeDasharray: "3 3",
+          vertical: isHorizontalBars,
+          horizontal: !isHorizontalBars
+        }), isHorizontalBars ? jsx(XAxis, _objectSpread2(_objectSpread2({
+          type: "number"
+        }, valueAxis), {}, {
+          hide: !showXAxis,
+          width: undefined
+        })) : jsx(XAxis, _objectSpread2({}, categoryAxis)), isHorizontalBars ? jsx(YAxis, _objectSpread2(_objectSpread2({
+          type: "category"
+        }, categoryAxis), {}, {
+          hide: !showYAxis,
+          width: yAxisWidth,
+          interval: 0
+        })) : jsx(YAxis, _objectSpread2({}, valueAxis)), showTooltip && jsx(Tooltip, {
+          cursor: kind === "bar" ? {
+            fill: chrome.grid,
+            fillOpacity: 0.4
+          } : {
+            stroke: chrome.grid
+          },
+          isAnimationActive: false,
+          content: jsx(ChartTooltipContent, {
+            valueFormatter: valueFormatter
+          })
+        }), categories.map(function (category, i) {
+          return renderSeries(kind, {
+            category: category,
+            color: series[i],
+            curve: curve,
+            stacked: stacked,
+            showDots: showDots,
+            connectNulls: connectNulls,
+            animate: animate && !reducedMotion,
+            horizontal: isHorizontalBars,
+            barRadius: 4
+          });
+        })]
+      })
+    })
+  }));
+});
+
+export { CartesianChart as default };