@optiaxiom/react 1.9.6 → 1.9.8

package/dist/cjs/ProteusChart-BDZkpu6w.js

@@ -0,0 +1,218 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var globals = require('@optiaxiom/globals');
+var recharts = require('recharts');
+var Textarea = require('./Textarea-DKvs5I60.js');
+require('./assets/src/layers/layers.css.ts.vanilla-CFqP6TLC.css');
+require('./assets/src/proteus-document/ProteusChart.css.ts.vanilla-K4YGfUNg.css');
+require('./assets/src/proteus-document/ProteusChartTooltipContent.css.ts.vanilla-BNqXogns.css');
+var unstable = require('./unstable-C7fKt8Wg.js');
+require('react');
+require('@radix-ui/react-slot');
+require('./assets/src/badge/Badge.css.ts.vanilla-DZuZ0_u9.css');
+require('./assets/src/link/Link.css.ts.vanilla-CfUdtvfl.css');
+require('@radix-ui/react-use-controllable-state');
+require('@radix-ui/react-compose-refs');
+require('@radix-ui/react-context');
+require('clsx');
+require('./assets/src/menu/MenuDialogContent.css.ts.vanilla-BABnjS2E.css');
+require('downshift');
+require('./assets/src/command/CommandItem.css.ts.vanilla-wBvWlBPj.css');
+require('./assets/src/menu/MenuInput.css.ts.vanilla-Bld1c5fm.css');
+require('@radix-ui/react-id');
+require('react-remove-scroll');
+require('@radix-ui/react-dialog');
+require('use-sync-external-store/shim');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-C5xIjKx-.css');
+require('@vanilla-extract/dynamic');
+require('./assets/src/backdrop/Backdrop.css.ts.vanilla-C1dPLQUa.css');
+require('./assets/src/dialog/DialogContent.css.ts.vanilla-CkV4m8dh.css');
+require('./assets/src/dialog/DialogFooter.css.ts.vanilla-cclUlj6w.css');
+require('./assets/src/dialog/DialogHeader.css.ts.vanilla-DJyi6ZwR.css');
+require('./assets/src/alert-dialog/AlertDialogContent.css.ts.vanilla-BSX18JBx.css');
+require('./assets/src/alert-dialog/AlertDialogFooter.css.ts.vanilla-CUdGuTC4.css');
+require('./assets/src/alert-dialog/AlertDialogHeader.css.ts.vanilla-Mqezfs-u.css');
+require('@tanstack/react-table');
+require('@tanstack/react-virtual');
+require('./assets/src/table/Table.css.ts.vanilla-BCmhv74i.css');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-C5xIjKx-.css');
+require('./assets/src/actions/ActionsContent.css.ts.vanilla-COGFLnUF.css');
+require('./assets/src/table/TableBody.css.ts.vanilla-B-DKe6UI.css');
+require('./assets/src/table/TableRow.css.ts.vanilla-BCppuPyN.css');
+require('./assets/src/table/TableCell.css.ts.vanilla-B2m9sqSY.css');
+require('./assets/src/table/TableHeader.css.ts.vanilla-CxLMwMQT.css');
+require('./assets/src/table/TableHeaderCell.css.ts.vanilla-BQcDUk-h.css');
+require('./assets/src/data-table/DataTableBody.css.ts.vanilla-zqbyv2VL.css');
+require('./assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-BlLQanet.css');
+require('react-day-picker');
+require('@radix-ui/react-popper');
+require('@radix-ui/react-dismissable-layer');
+require('@radix-ui/react-focus-guards');
+require('@radix-ui/react-focus-scope');
+require('./assets/src/calendar/Calendar.css.ts.vanilla-DqdAEDR2.css');
+require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-BMHEqWUp.css');
+require('./assets/src/calendar/CalendarGrid.css.ts.vanilla-DAms84GX.css');
+require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-BX1WLpih.css');
+require('./assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-Bg3WyngO.css');
+require('./assets/src/calendar/CalendarPreviousMonthButton.css.ts.vanilla-BCD60LXs.css');
+require('@radix-ui/react-collapsible');
+require('./assets/src/disclosure/DisclosureContent.css.ts.vanilla-BK5I9O5M.css');
+require('./assets/src/cover/Cover.css.ts.vanilla-CpHatqd2.css');
+require('./assets/src/disclosure/DisclosureTrigger.css.ts.vanilla-DNSfsG5U.css');
+require('@radix-ui/react-label');
+require('@radix-ui/react-tooltip');
+require('@optiaxiom/globals/fonts');
+require('./assets/src/sprinkles/properties.css.ts.vanilla-C9vjpIkG.css');
+require('./assets/src/box/Box.css.ts.vanilla-CiMZYggU.css');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-C5xIjKx-.css');
+require('./assets/src/button/ButtonRoot.css.ts.vanilla-B_7Bwo90.css');
+require('./assets/src/button/ButtonLoadable.css.ts.vanilla-CsO5EOAn.css');
+require('./assets/src/text/Text.css.ts.vanilla-ClBW4YaH.css');
+require('./assets/src/spinner/Spinner.css.ts.vanilla-GxRmK69L.css');
+require('./assets/src/transition/Transition.css.ts.vanilla-Mf4uNxMN.css');
+require('./assets/src/alert/Alert.css.ts.vanilla-C0EtfX9p.css');
+require('@radix-ui/react-avatar');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-C5xIjKx-.css');
+require('./assets/src/avatar/Avatar.css.ts.vanilla-B98slUhA.css');
+require('@radix-ui/react-popover');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-C5xIjKx-.css');
+require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-D2ReZtkI.css');
+require('./assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-BkXNHn1I.css');
+require('@radix-ui/react-visually-hidden');
+require('./assets/src/checkbox/CheckboxControl.css.ts.vanilla-DYjSulET.css');
+require('./assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-CCkZ0EYT.css');
+require('./assets/src/listbox/ListboxItem.css.ts.vanilla-DGn7s9Ob.css');
+require('./assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-R68KdemV.css');
+require('./assets/src/skeleton/Skeleton.css.ts.vanilla-CQvq6Q7k.css');
+require('@radix-ui/react-separator');
+require('./assets/src/separator/Separator.css.ts.vanilla-BkNgaE3v.css');
+require('./assets/src/switch/Switch.css.ts.vanilla-Cx8cr5y9.css');
+require('./assets/src/modal/ModalListbox.css.ts.vanilla-BhE0-qye.css');
+require('@radix-ui/react-portal');
+require('./assets/src/input/Input.css.ts.vanilla-Chjox1KP.css');
+require('./assets/src/input/InputControl.css.ts.vanilla-CHWYnMoP.css');
+require('./assets/src/input/InputRoot.css.ts.vanilla-BT22m1KE.css');
+require('./assets/src/textarea/Textarea.css.ts.vanilla-B0EstZhb.css');
+require('./assets/src/textarea/TextareaAutosize.css.ts.vanilla-CJZmf-rj.css');
+require('./assets/src/details-panel/DetailsPanel.css.ts.vanilla-BBzelU3a.css');
+require('./assets/src/details-panel/DetailsPanelFooter.css.ts.vanilla-Dokq1PCF.css');
+require('./assets/src/details-panel/DetailsPanelHeader.css.ts.vanilla-89wKZ608.css');
+require('./assets/src/file-upload/FileUpload.css.ts.vanilla-BfmTHxkw.css');
+require('./assets/src/file-upload/FileUploadDropzone.css.ts.vanilla-u1pAm9zW.css');
+require('./assets/src/highlight/Highlight.css.ts.vanilla-T4vUgzag.css');
+require('@radix-ui/react-hover-card');
+require('./assets/src/hover-card/HoverCardTrigger.css.ts.vanilla-C-mpXFbD.css');
+require('./assets/src/inline-input/InlineInput.css.ts.vanilla-BkZ9c4uZ.css');
+require('react-resizable-panels');
+require('./assets/src/resizable/ResizableHandle.css.ts.vanilla-CeZLXhTl.css');
+require('./assets/src/layout/Layout.css.ts.vanilla-C1zryXpS.css');
+require('./assets/src/layout/LayoutContent.css.ts.vanilla-CzUv-ZeV.css');
+require('./assets/src/pill/Pill.css.ts.vanilla-CnQEEvEn.css');
+require('@radix-ui/react-roving-focus');
+require('./assets/src/pill-menu/PillMenuTrigger.css.ts.vanilla-qx42eKIN.css');
+require('jsonpointer');
+require('./assets/src/range/Range.css.ts.vanilla-CsvbeS8G.css');
+require('@cfworker/json-schema');
+require('@dnd-kit/helpers');
+require('@dnd-kit/react');
+require('./assets/src/sortable/SortableHandle.css.ts.vanilla-DSZLIvY5.css');
+require('@dnd-kit/react/sortable');
+require('./assets/src/sortable/SortableItem.css.ts.vanilla-CeLk_D8-.css');
+
+var chart = Textarea.recipeRuntime({base:[{fontSize:'sm'},'_81gb7q']});
+
+var tooltip = Textarea.recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.secondary',display:'grid',fontSize:'sm',gap:'6',px:'8',py:'10',rounded:'lg',shadow:'lg'},'_2eve07']});
+var value = Textarea.recipeRuntime({base:[{color:'fg.default',fontWeight:'500'},'_1epybwn']});
+
+function ProteusChartTooltipContent({
+  active,
+  label,
+  payload
+}) {
+  if (!active || !payload?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Textarea.Box, { ...tooltip(), children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(Textarea.Box, { fontWeight: "500", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: payload.filter((item) => item.type !== "none").map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+      Textarea.Box,
+      {
+        alignItems: "center",
+        display: "flex",
+        gap: "8",
+        justifyContent: "space-between",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Textarea.Group, { gap: "8", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Textarea.Box,
+              {
+                flex: "none",
+                rounded: "xs",
+                size: "10",
+                style: { backgroundColor: item.color }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(Textarea.Box, { color: "fg.tertiary", children: item.name ?? item.dataKey })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(Textarea.Box, { ...value(), children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
+        ]
+      },
+      item.dataKey
+    )) })
+  ] });
+}
+
+const DEFAULT_COLORS = ["#096DD9", "#E59700", "#38C56C", "#D1D8DE"];
+const getColor = (series, index) => series.color ?? DEFAULT_COLORS[index % DEFAULT_COLORS.length];
+const ProteusChart = ({
+  data,
+  series,
+  xAxisKey
+}) => {
+  const records = unstable.useResolvedProteusValue(data);
+  return /* @__PURE__ */ jsxRuntime.jsx(Textarea.Box, { asChild: true, ...chart(), children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { aspect: 16 / 9, width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data: records, margin: { top: 20 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.CartesianGrid,
+      {
+        stroke: "#E0E0E0",
+        strokeDasharray: "4 4",
+        vertical: false
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.XAxis,
+      {
+        axisLine: false,
+        dataKey: xAxisKey,
+        tick: { fill: globals.theme.colors["fg.secondary"] },
+        tickLine: false,
+        tickMargin: 10
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: ProteusChartTooltipContent, cursor: false }),
+    series.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.Bar,
+      {
+        dataKey: s.dataKey,
+        fill: getColor(s, i),
+        name: s.name ?? s.dataKey,
+        radius: [4, 4, 0, 0],
+        children: s.labelKey && /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.LabelList,
+          {
+            dataKey: s.labelKey,
+            fill: globals.theme.colors["fg.secondary"],
+            offset: 12,
+            position: "top"
+          }
+        )
+      },
+      s.dataKey
+    ))
+  ] }) }) });
+};
+ProteusChart.displayName = "@optiaxiom/react/ProteusChart";
+
+exports.ProteusChart = ProteusChart;