@optiaxiom/react 1.9.5 → 1.9.7

package/dist/esm/packages/react/src/proteus-document/ProteusChart.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { theme } from '@optiaxiom/globals';
+import { ResponsiveContainer, BarChart, CartesianGrid, XAxis, Tooltip, Bar, LabelList } from 'recharts';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { chart } from './ProteusChart-css.js';
+import { ProteusChartTooltipContent } from './ProteusChartTooltipContent.js';
+import { useResolvedProteusValue } from './useResolvedProteusValue.js';
+
+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 = useResolvedProteusValue(data);
+  return /* @__PURE__ */ jsx(Box, { asChild: true, ...chart(), children: /* @__PURE__ */ jsx(ResponsiveContainer, { aspect: 16 / 9, width: "100%", children: /* @__PURE__ */ jsxs(BarChart, { data: records, margin: { top: 20 }, children: [
+    /* @__PURE__ */ jsx(
+      CartesianGrid,
+      {
+        stroke: "#E0E0E0",
+        strokeDasharray: "4 4",
+        vertical: false
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      XAxis,
+      {
+        axisLine: false,
+        dataKey: xAxisKey,
+        tick: { fill: theme.colors["fg.secondary"] },
+        tickLine: false,
+        tickMargin: 10
+      }
+    ),
+    /* @__PURE__ */ jsx(Tooltip, { content: ProteusChartTooltipContent, cursor: false }),
+    series.map((s, i) => /* @__PURE__ */ jsx(
+      Bar,
+      {
+        dataKey: s.dataKey,
+        fill: getColor(s, i),
+        name: s.name ?? s.dataKey,
+        radius: [4, 4, 0, 0],
+        children: s.labelKey && /* @__PURE__ */ jsx(
+          LabelList,
+          {
+            dataKey: s.labelKey,
+            fill: theme.colors["fg.secondary"],
+            offset: 12,
+            position: "top"
+          }
+        )
+      },
+      s.dataKey
+    ))
+  ] }) }) });
+};
+ProteusChart.displayName = "@optiaxiom/react/ProteusChart";
+
+export { ProteusChart };

package/dist/esm/packages/react/src/proteus-document/ProteusChartTooltipContent-css.js

@@ -0,0 +1,8 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-iaXD05J2.css';
+import './../../../../assets/src/proteus-document/ProteusChartTooltipContent.css.ts.vanilla-BCUTLp87.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var tooltip = 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 = recipeRuntime({base:[{color:'fg.default',fontWeight:'500'},'wzcn0u']});
+
+export { tooltip, value };

package/dist/esm/packages/react/src/proteus-document/ProteusChartTooltipContent.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { Group } from '../group/Group.js';
+import { tooltip, value } from './ProteusChartTooltipContent-css.js';
+
+function ProteusChartTooltipContent({
+  active,
+  label,
+  payload
+}) {
+  if (!active || !payload?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Box, { ...tooltip(), children: [
+    label && /* @__PURE__ */ jsx(Box, { fontWeight: "500", children: label }),
+    /* @__PURE__ */ jsx("div", { children: payload.filter((item) => item.type !== "none").map((item) => /* @__PURE__ */ jsxs(
+      Box,
+      {
+        alignItems: "center",
+        display: "flex",
+        gap: "8",
+        justifyContent: "space-between",
+        children: [
+          /* @__PURE__ */ jsxs(Group, { gap: "8", children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                flex: "none",
+                rounded: "xs",
+                size: "10",
+                style: { backgroundColor: item.color }
+              }
+            ),
+            /* @__PURE__ */ jsx(Box, { color: "fg.tertiary", children: item.name ?? item.dataKey })
+          ] }),
+          /* @__PURE__ */ jsx(Box, { ...value(), children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
+        ]
+      },
+      item.dataKey
+    )) })
+  ] });
+}
+
+export { ProteusChartTooltipContent };

package/dist/esm/packages/react/src/proteus-document/ProteusDataTable.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { createColumnHelper, useReactTable, getCoreRowModel } from '@tanstack/react-table';
+import { DataTable } from '../data-table/DataTable.js';
+import { DataTableBody } from '../data-table/DataTableBody.js';
+import { useResolvedProteusValue } from './useResolvedProteusValue.js';
+
+const ProteusDataTable = ({
+  columns,
+  data
+}) => {
+  const tableData = useResolvedProteusValue(data);
+  const columnHelper = createColumnHelper();
+  const columnDefs = columns.map(
+    (col) => columnHelper.accessor(col.accessorKey, {
+      header: col.header
+    })
+  );
+  const table = useReactTable({
+    columns: columnDefs,
+    data: tableData,
+    enableSorting: false,
+    getCoreRowModel: getCoreRowModel()
+  });
+  return /* @__PURE__ */ jsx(DataTable, { maxH: "md", table, children: /* @__PURE__ */ jsx(DataTableBody, {}) });
+};
+ProteusDataTable.displayName = "@optiaxiom/react/ProteusDataTable";
+
+export { ProteusDataTable };

package/dist/esm/packages/react/src/proteus-document/ProteusDocumentRenderer.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { set } from 'jsonpointer';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
@@ -24,7 +25,6 @@ function ProteusDocumentRenderer({
   data = {},
   defaultOpen = true,
   element: elementProp,
-  onCancelAction,
   onDataChange,
   onMessage,
   onOpenChange,
@@ -44,9 +44,10 @@ function ProteusDocumentRenderer({
     ProteusDocumentProvider,
     {
       data,
-      onCancelAction,
-      onDataChange: useEffectEvent((name, value) => {
-        onDataChange?.({ ...data, [name]: value });
+      onDataChange: useEffectEvent((path, value) => {
+        const next = structuredClone(data);
+        set(next, path, value);
+        onDataChange?.(next);
       }),
       onEvent: useEffectEvent(
         (event) => {
@@ -67,7 +68,7 @@ function ProteusDocumentRenderer({
           onOpenChange: setOpen,
           open,
           p: "16",
-          rounded: "lg",
+          rounded: "xl",
           children: result.success && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
               Trigger,
@@ -75,9 +76,18 @@ function ProteusDocumentRenderer({
                 py: "0",
                 ...collapsible ? { chevronPosition: "end" } : {},
                 children: /* @__PURE__ */ jsxs(Group, { fontSize: "sm", gap: "8", children: [
-                  /* @__PURE__ */ jsx(Box, { bg: "bg.accent.subtle", rounded: "xs", size: "20" }),
+                  /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      asChild: true,
+                      bg: result.data.appIcon ? void 0 : "bg.accent.subtle",
+                      rounded: "xs",
+                      size: "20",
+                      children: result.data.appIcon ? /* @__PURE__ */ jsx("img", { src: result.data.appIcon }) : /* @__PURE__ */ jsx("div", {})
+                    }
+                  ),
                   /* @__PURE__ */ jsx(Text, { fontWeight: "500", children: result.data.appName }),
-                  !open && /* @__PURE__ */ jsx(Text, { color: "fg.secondary", children: result.data.title })
+                  !open && /* @__PURE__ */ jsx(Text, { color: "fg.secondary", children: /* @__PURE__ */ jsx(ProteusElement, { element: result.data.title }) })
                 ] })
               }
             ),
@@ -91,8 +101,8 @@ function ProteusDocumentRenderer({
                 pt: "16",
                 children: [
                   /* @__PURE__ */ jsxs(Group, { flexDirection: "column", gap: "4", children: [
-                    /* @__PURE__ */ jsx(Heading, { fontSize: "lg", fontWeight: "600", level: "2", children: result.data.title }),
-                    result.data.subtitle && /* @__PURE__ */ jsx(Text, { color: "fg.secondary", fontSize: "sm", children: result.data.subtitle })
+                    /* @__PURE__ */ jsx(Heading, { fontSize: "lg", fontWeight: "600", level: "2", children: /* @__PURE__ */ jsx(ProteusElement, { element: result.data.title }) }),
+                    !!result.data.subtitle && /* @__PURE__ */ jsx(Text, { color: "fg.secondary", fontSize: "sm", children: /* @__PURE__ */ jsx(ProteusElement, { element: result.data.subtitle }) })
                   ] }),
                   /* @__PURE__ */ jsx(ProteusElement, { element: result.data.body }),
                   !!result.data.actions && !readOnly && /* @__PURE__ */ jsx(Group, { gap: "16", justifyContent: "end", w: "full", children: /* @__PURE__ */ jsx(ProteusElement, { element: result.data.actions }) })

package/dist/esm/packages/react/src/proteus-document/ProteusElement.js

@@ -1,7 +1,10 @@
 "use client";
 import { jsx, Fragment } from 'react/jsx-runtime';
+import { lazy, Suspense } from 'react';
 import { ProteusAction } from './ProteusAction.js';
+import { ProteusBadge } from './ProteusBadge.js';
 import { ProteusCancelAction } from './ProteusCancelAction.js';
+import { ProteusDataTable } from './ProteusDataTable.js';
 import { ProteusField } from './ProteusField.js';
 import { ProteusGroup } from './ProteusGroup.js';
 import { ProteusHeading } from './ProteusHeading.js';
@@ -20,6 +23,11 @@ import { ProteusTextarea } from './ProteusTextarea.js';
 import { ProteusValue } from './ProteusValue.js';
 import { safeParseElement } from './schemas.js';
 
+const ProteusChart = lazy(async () => {
+  return {
+    default: (await import('./ProteusChart.js')).ProteusChart
+  };
+});
 const ProteusElement = ({
   element: elementProp
 }) => {
@@ -38,8 +46,24 @@ const ProteusElement = ({
   switch (element.$type) {
     case "Action":
       return /* @__PURE__ */ jsx(ProteusAction, { ...omitType(element) });
+    case "Badge":
+      return /* @__PURE__ */ jsx(ProteusBadge, { ...omitType(element) });
     case "CancelAction":
       return /* @__PURE__ */ jsx(ProteusCancelAction, { ...omitType(element) });
+    case "Chart":
+      return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+        ProteusChart,
+        {
+          ...omitType(element)
+        }
+      ) });
+    case "DataTable":
+      return /* @__PURE__ */ jsx(
+        ProteusDataTable,
+        {
+          ...omitType(element)
+        }
+      );
     case "Field":
       return /* @__PURE__ */ jsx(ProteusField, { ...omitType(element) });
     case "Group":

package/dist/esm/packages/react/src/proteus-document/ProteusImage.js

@@ -3,9 +3,18 @@ import { jsx } from 'react/jsx-runtime';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
+import { useResolvedProteusValue } from './useResolvedProteusValue.js';
 
 function ProteusImage(props) {
-  return /* @__PURE__ */ jsx(Box, { asChild: true, display: "block", objectFit: "cover", ...props, children: /* @__PURE__ */ jsx("img", {}) });
+  const resolvedSrc = useResolvedProteusValue(props.src);
+  const resolvedAlt = useResolvedProteusValue(props.alt);
+  return /* @__PURE__ */ jsx(Box, { asChild: true, display: "block", objectFit: "cover", ...props, children: /* @__PURE__ */ jsx(
+    "img",
+    {
+      alt: typeof resolvedAlt === "string" ? resolvedAlt : "",
+      src: typeof resolvedSrc === "string" ? resolvedSrc : ""
+    }
+  ) });
 }
 ProteusImage.displayName = "@optiaxiom/react/ProteusImage";
 

package/dist/esm/packages/react/src/proteus-document/ProteusInput.js

@@ -5,22 +5,28 @@ import '../input/InputAddon.js';
 import '../input/InputControl.js';
 import '../input/InputRoot.js';
 import { useProteusDocumentContext } from './ProteusDocumentContext.js';
+import { useProteusDocumentPathContext } from './ProteusDocumentPathContext.js';
+import { useProteusValue } from './useProteusValue.js';
 
 function ProteusInput(props) {
-  const { data, onDataChange, readOnly } = useProteusDocumentContext(
+  const { onDataChange, readOnly } = useProteusDocumentContext(
     "@optiaxiom/react/ProteusInput"
   );
+  const { path: parentPath } = useProteusDocumentPathContext(
+    "@optiaxiom/react/ProteusInput"
+  );
+  const value = useProteusValue(props.name ?? "");
   return /* @__PURE__ */ jsx(
     Input,
     {
       ...props,
-      onValueChange: (value) => {
+      onValueChange: (value2) => {
         if (props.name) {
-          onDataChange?.(props.name, value);
+          onDataChange?.(`${parentPath}/${props.name}`, value2);
         }
       },
       readOnly,
-      value: props.name ? data[props.name] : ""
+      value: props.name ? String(value ?? "") : ""
     }
   );
 }

package/dist/esm/packages/react/src/proteus-document/ProteusSelect.js

@@ -5,19 +5,25 @@ import { Select } from '../select/Select.js';
 import '../select/SelectContent.js';
 import '../select/SelectTrigger.js';
 import { useProteusDocumentContext } from './ProteusDocumentContext.js';
+import { useProteusDocumentPathContext } from './ProteusDocumentPathContext.js';
 import { ProteusElement } from './ProteusElement.js';
+import { useProteusValue } from './useProteusValue.js';
 
 function ProteusSelect({
   children,
   options = [],
   ...props
 }) {
-  const { data, onDataChange, readOnly } = useProteusDocumentContext(
+  const { onDataChange, readOnly } = useProteusDocumentContext(
+    "@optiaxiom/react/ProteusSelect"
+  );
+  const { path: parentPath } = useProteusDocumentPathContext(
     "@optiaxiom/react/ProteusSelect"
   );
   const optionsRef = useRef(options);
   optionsRef.current = options;
-  const value = props.name ? data[props.name] : options[0]?.value ?? "";
+  const resolved = useProteusValue(props.name ?? "");
+  const value = props.name ? String(resolved ?? options[0]?.value ?? "") : options[0]?.value ?? "";
   return /* @__PURE__ */ jsx(
     Select,
     {
@@ -27,7 +33,7 @@ function ProteusSelect({
           return;
         }
         if (props.name) {
-          onDataChange?.(props.name, value2);
+          onDataChange?.(`${parentPath}/${props.name}`, value2);
         }
       },
       options,

package/dist/esm/packages/react/src/proteus-document/ProteusShow.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { getProteusValue } from './getProteusValue.js';
 import { useProteusDocumentContext } from './ProteusDocumentContext.js';
 import { useProteusDocumentPathContext } from './ProteusDocumentPathContext.js';
 import { ProteusElement } from './ProteusElement.js';
+import { resolveProteusValue } from './resolveProteusValue.js';
 
 function ProteusShow({
   children,
@@ -37,44 +37,38 @@ function evaluateCondition(condition, data, parentPath) {
     );
   }
   if ("!!" in condition) {
-    const value = resolveValue(condition["!!"], data, parentPath);
+    const value = resolveProteusValue(condition["!!"], data, parentPath);
     return !!value;
   }
   if ("==" in condition) {
     const [left, right] = condition["=="];
-    return resolveValue(left, data, parentPath) === resolveValue(right, data, parentPath);
+    return resolveProteusValue(left, data, parentPath) === resolveProteusValue(right, data, parentPath);
   } else if ("!=" in condition) {
     const [left, right] = condition["!="];
-    return resolveValue(left, data, parentPath) !== resolveValue(right, data, parentPath);
+    return resolveProteusValue(left, data, parentPath) !== resolveProteusValue(right, data, parentPath);
   } else if ("<" in condition) {
     const [left, right] = condition["<"];
-    const leftVal = resolveValue(left, data, parentPath);
-    const rightVal = resolveValue(right, data, parentPath);
+    const leftVal = resolveProteusValue(left, data, parentPath);
+    const rightVal = resolveProteusValue(right, data, parentPath);
     return typeof leftVal === "number" && typeof rightVal === "number" && leftVal < rightVal;
   } else if ("<=" in condition) {
     const [left, right] = condition["<="];
-    const leftVal = resolveValue(left, data, parentPath);
-    const rightVal = resolveValue(right, data, parentPath);
+    const leftVal = resolveProteusValue(left, data, parentPath);
+    const rightVal = resolveProteusValue(right, data, parentPath);
     return typeof leftVal === "number" && typeof rightVal === "number" && leftVal <= rightVal;
   } else if (">" in condition) {
     const [left, right] = condition[">"];
-    const leftVal = resolveValue(left, data, parentPath);
-    const rightVal = resolveValue(right, data, parentPath);
+    const leftVal = resolveProteusValue(left, data, parentPath);
+    const rightVal = resolveProteusValue(right, data, parentPath);
     return typeof leftVal === "number" && typeof rightVal === "number" && leftVal > rightVal;
   } else if (">=" in condition) {
     const [left, right] = condition[">="];
-    const leftVal = resolveValue(left, data, parentPath);
-    const rightVal = resolveValue(right, data, parentPath);
+    const leftVal = resolveProteusValue(left, data, parentPath);
+    const rightVal = resolveProteusValue(right, data, parentPath);
     return typeof leftVal === "number" && typeof rightVal === "number" && leftVal >= rightVal;
   }
   return false;
 }
-function resolveValue(value, data, parentPath) {
-  if (typeof value === "object" && value !== null && "$type" in value && value.$type === "Value" && "path" in value && typeof value.path === "string") {
-    return getProteusValue(data, value.path, parentPath);
-  }
-  return value;
-}
 ProteusShow.displayName = "@optiaxiom/react/ProteusShow";
 
 export { ProteusShow };

package/dist/esm/packages/react/src/proteus-document/ProteusTextarea.js

@@ -2,22 +2,28 @@
 import { jsx } from 'react/jsx-runtime';
 import { Textarea } from '../textarea/Textarea.js';
 import { useProteusDocumentContext } from './ProteusDocumentContext.js';
+import { useProteusDocumentPathContext } from './ProteusDocumentPathContext.js';
+import { useProteusValue } from './useProteusValue.js';
 
 function ProteusTextarea(props) {
-  const { data, onDataChange, readOnly } = useProteusDocumentContext(
+  const { onDataChange, readOnly } = useProteusDocumentContext(
     "@optiaxiom/react/ProteusTextarea"
   );
+  const { path: parentPath } = useProteusDocumentPathContext(
+    "@optiaxiom/react/ProteusTextarea"
+  );
+  const value = useProteusValue(props.name ?? "");
   return /* @__PURE__ */ jsx(
     Textarea,
     {
       ...props,
-      onValueChange: (value) => {
+      onValueChange: (value2) => {
         if (props.name) {
-          onDataChange?.(props.name, value);
+          onDataChange?.(`${parentPath}/${props.name}`, value2);
         }
       },
       readOnly,
-      value: props.name ? data[props.name] : void 0
+      value: props.name ? String(value ?? "") : void 0
     }
   );
 }