@optiaxiom/react 1.9.6 → 1.9.7

package/dist/cjs/ProteusChart-B6jRxqt9.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-D_AdTfRE.js');
+require('./assets/src/layers/layers.css.ts.vanilla-iaXD05J2.css');
+require('./assets/src/proteus-document/ProteusChart.css.ts.vanilla-BhOtqx0-.css');
+require('./assets/src/proteus-document/ProteusChartTooltipContent.css.ts.vanilla-BCUTLp87.css');
+var unstable = require('./unstable-242mVuqv.js');
+require('react');
+require('@radix-ui/react-slot');
+require('./assets/src/badge/Badge.css.ts.vanilla-CRgejJr8.css');
+require('./assets/src/link/Link.css.ts.vanilla-B9IrSBJC.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-BFZuRb08.css');
+require('downshift');
+require('./assets/src/command/CommandItem.css.ts.vanilla-abrJL6XN.css');
+require('./assets/src/menu/MenuInput.css.ts.vanilla-WHHyLQ62.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-CobE3002.css');
+require('@vanilla-extract/dynamic');
+require('./assets/src/backdrop/Backdrop.css.ts.vanilla-DDPJ5HZA.css');
+require('./assets/src/dialog/DialogContent.css.ts.vanilla-ltIeJo8g.css');
+require('./assets/src/dialog/DialogFooter.css.ts.vanilla-CUFF6DX_.css');
+require('./assets/src/dialog/DialogHeader.css.ts.vanilla-DA9N-Aak.css');
+require('./assets/src/alert-dialog/AlertDialogContent.css.ts.vanilla-BYfx4EcM.css');
+require('./assets/src/alert-dialog/AlertDialogFooter.css.ts.vanilla-CTXgSXF6.css');
+require('./assets/src/alert-dialog/AlertDialogHeader.css.ts.vanilla-CoDUJtUJ.css');
+require('@tanstack/react-table');
+require('@tanstack/react-virtual');
+require('./assets/src/table/Table.css.ts.vanilla-CB5Bbl9R.css');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-CobE3002.css');
+require('./assets/src/actions/ActionsContent.css.ts.vanilla-D_pawuqt.css');
+require('./assets/src/table/TableBody.css.ts.vanilla-DuoOSRRm.css');
+require('./assets/src/table/TableRow.css.ts.vanilla-D4XGmkhz.css');
+require('./assets/src/table/TableCell.css.ts.vanilla-CaHZC2u3.css');
+require('./assets/src/table/TableHeader.css.ts.vanilla-DipC5HbM.css');
+require('./assets/src/table/TableHeaderCell.css.ts.vanilla-De50vXEo.css');
+require('./assets/src/data-table/DataTableBody.css.ts.vanilla-DzK1xxBU.css');
+require('./assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-DJ8JxWsX.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-TOH9es8f.css');
+require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-CfR3-Zm2.css');
+require('./assets/src/calendar/CalendarGrid.css.ts.vanilla-CMouJMyb.css');
+require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-ykgsj9om.css');
+require('./assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-DK0qbY-n.css');
+require('./assets/src/calendar/CalendarPreviousMonthButton.css.ts.vanilla-DvpopYG1.css');
+require('@radix-ui/react-collapsible');
+require('./assets/src/disclosure/DisclosureContent.css.ts.vanilla-BqdGXoV9.css');
+require('./assets/src/cover/Cover.css.ts.vanilla-CyIQGZaJ.css');
+require('./assets/src/disclosure/DisclosureTrigger.css.ts.vanilla-D1Qh71Nu.css');
+require('@radix-ui/react-label');
+require('@radix-ui/react-tooltip');
+require('@optiaxiom/globals/fonts');
+require('./assets/src/sprinkles/properties.css.ts.vanilla-CUlmd92Z.css');
+require('./assets/src/box/Box.css.ts.vanilla-Dc-1-d3V.css');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-CobE3002.css');
+require('./assets/src/button/ButtonRoot.css.ts.vanilla-CWwxuYwh.css');
+require('./assets/src/button/ButtonLoadable.css.ts.vanilla-DqNkvfeJ.css');
+require('./assets/src/text/Text.css.ts.vanilla-sqhsXy5C.css');
+require('./assets/src/spinner/Spinner.css.ts.vanilla-D-q_vZpS.css');
+require('./assets/src/transition/Transition.css.ts.vanilla-tpsVSHjj.css');
+require('./assets/src/alert/Alert.css.ts.vanilla-BoekewV6.css');
+require('@radix-ui/react-avatar');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-CobE3002.css');
+require('./assets/src/avatar/Avatar.css.ts.vanilla-DFQ7cJMu.css');
+require('@radix-ui/react-popover');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-CobE3002.css');
+require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-B0Aq2wnn.css');
+require('./assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-C9BBixEY.css');
+require('@radix-ui/react-visually-hidden');
+require('./assets/src/checkbox/CheckboxControl.css.ts.vanilla-CeNmR5st.css');
+require('./assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-Cq2CXe6W.css');
+require('./assets/src/listbox/ListboxItem.css.ts.vanilla-y57Lbbw_.css');
+require('./assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-C8epWxe1.css');
+require('./assets/src/skeleton/Skeleton.css.ts.vanilla-ChatJ78k.css');
+require('@radix-ui/react-separator');
+require('./assets/src/separator/Separator.css.ts.vanilla-BKcR1UQ3.css');
+require('./assets/src/switch/Switch.css.ts.vanilla-BjkySQ0s.css');
+require('./assets/src/modal/ModalListbox.css.ts.vanilla-DYkS-t4f.css');
+require('@radix-ui/react-portal');
+require('./assets/src/input/Input.css.ts.vanilla-liWs6eoz.css');
+require('./assets/src/input/InputControl.css.ts.vanilla-DPrf2eNf.css');
+require('./assets/src/input/InputRoot.css.ts.vanilla-CS_BBw__.css');
+require('./assets/src/textarea/Textarea.css.ts.vanilla-Cnhy_QmN.css');
+require('./assets/src/textarea/TextareaAutosize.css.ts.vanilla-QacgvZya.css');
+require('./assets/src/details-panel/DetailsPanel.css.ts.vanilla-BCs-zeXT.css');
+require('./assets/src/details-panel/DetailsPanelFooter.css.ts.vanilla-CUJNhqPG.css');
+require('./assets/src/details-panel/DetailsPanelHeader.css.ts.vanilla-Do544VeX.css');
+require('./assets/src/file-upload/FileUpload.css.ts.vanilla-W9vihqH2.css');
+require('./assets/src/file-upload/FileUploadDropzone.css.ts.vanilla-80evIY0y.css');
+require('./assets/src/highlight/Highlight.css.ts.vanilla-BR5cFrvH.css');
+require('@radix-ui/react-hover-card');
+require('./assets/src/hover-card/HoverCardTrigger.css.ts.vanilla-CSFJg0Zt.css');
+require('./assets/src/inline-input/InlineInput.css.ts.vanilla-C-AktPDh.css');
+require('react-resizable-panels');
+require('./assets/src/resizable/ResizableHandle.css.ts.vanilla-CZc7HWNZ.css');
+require('./assets/src/layout/Layout.css.ts.vanilla-C7yX-s8y.css');
+require('./assets/src/layout/LayoutContent.css.ts.vanilla-CgG8Zu38.css');
+require('./assets/src/pill/Pill.css.ts.vanilla-DN2IOgas.css');
+require('@radix-ui/react-roving-focus');
+require('./assets/src/pill-menu/PillMenuTrigger.css.ts.vanilla-iErMAhnu.css');
+require('jsonpointer');
+require('./assets/src/range/Range.css.ts.vanilla-C9E4lqyG.css');
+require('@cfworker/json-schema');
+require('@dnd-kit/helpers');
+require('@dnd-kit/react');
+require('./assets/src/sortable/SortableHandle.css.ts.vanilla-DA73sxuz.css');
+require('@dnd-kit/react/sortable');
+require('./assets/src/sortable/SortableItem.css.ts.vanilla-BV38MEBs.css');
+
+var chart = Textarea.recipeRuntime({base:[{fontSize:'sm'},'_1x78wnh']});
+
+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'},'_1h88w1e']});
+var value = Textarea.recipeRuntime({base:[{color:'fg.default',fontWeight:'500'},'wzcn0u']});
+
+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;