@optiaxiom/react 1.9.16 → 1.9.17

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

@@ -4,6 +4,7 @@ import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 import { Group } from '../group/Group.js';
+import { applyFormatter } from './getProteusValue.js';
 import { tooltip, value } from './ProteusChartTooltipContent-css.js';
 
 function ProteusChartTooltipContent({
@@ -16,7 +17,7 @@ function ProteusChartTooltipContent({
   }
   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(
+    /* @__PURE__ */ jsx("div", { children: payload.filter((item) => item.type !== "none").map((item, i) => /* @__PURE__ */ jsxs(
       Box,
       {
         alignItems: "center",
@@ -36,10 +37,10 @@ function ProteusChartTooltipContent({
             ),
             /* @__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 })
+          /* @__PURE__ */ jsx(Box, { ...value(), children: applyFormatter(item.value, "Number") })
         ]
       },
-      item.dataKey
+      i
     )) })
   ] });
 }

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

@@ -0,0 +1,58 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box } from '../box/Box.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
+import { Group } from '../group/Group.js';
+import { useRadioGroupContext } from '../radio/RadioGroupContext.js';
+import { Text } from '../text/Text.js';
+import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
+import { choice, input, addon } from './ProteusChoiceGroup-css.js';
+import { useProteusDocumentContext } from './ProteusDocumentContext.js';
+import { useResolvedProteusProps } from './useResolvedProteusProps.js';
+
+function ProteusChoice({
+  addonBefore,
+  children,
+  className,
+  description,
+  onClick,
+  value,
+  ...props
+}) {
+  const { boxProps, restProps } = extractBoxProps(props);
+  const groupContext = useRadioGroupContext("@optiaxiom/react/ProteusChoice");
+  const { onEvent } = useProteusDocumentContext(
+    "@optiaxiom/react/ProteusChoice"
+  );
+  const resolvedOnClick = useResolvedProteusProps(
+    onClick ?? {}
+  );
+  return /* @__PURE__ */ jsx(Box, { asChild: true, ...choice({}, className), ...boxProps, children: /* @__PURE__ */ jsxs("label", { children: [
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(Box, { asChild: true, ...input(), children: /* @__PURE__ */ jsx(
+      "input",
+      {
+        checked: groupContext?.value === value,
+        name: groupContext?.name,
+        onChange: (event) => {
+          groupContext?.onChange?.(event);
+          if (onClick) {
+            void onEvent(resolvedOnClick);
+          }
+        },
+        type: "radio",
+        value,
+        ...restProps
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxs(Group, { gap: "12", children: [
+      addonBefore && /* @__PURE__ */ jsx(Box, { ...addon(), children: addonBefore }),
+      /* @__PURE__ */ jsxs(Group, { flex: "1", flexDirection: "column", gap: "2", children: [
+        children && /* @__PURE__ */ jsx(Text, { fontWeight: "500", children }),
+        description && /* @__PURE__ */ jsx(Text, { color: "fg.secondary", fontSize: "sm", children: description })
+      ] })
+    ] })
+  ] }) });
+}
+ProteusChoice.displayName = "@optiaxiom/react/ProteusChoice";
+
+export { ProteusChoice };

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

@@ -0,0 +1,10 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D8I-bHqr.css';
+import './../../../../assets/src/proteus-document/ProteusChoiceGroup.css.ts.vanilla-DifGOwv5.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var addon = recipeRuntime({base:[{display:'grid',fontWeight:'500',placeItems:'center',rounded:'lg',size:'md',transition:'colors'},'_1y6o7eg']});
+var choice = recipeRuntime({base:[{border:'1',color:'fg.default',cursor:'pointer',flexDirection:'column',fontSize:'md',gap:'8',px:'16',py:'12',rounded:'lg',transition:'colors'},'_3ner4b','_1je4m29']});
+var choiceGroup = recipeRuntime({base:{flexDirection:'column',gap:'8'}});
+var input = recipeRuntime({base:'_1y5672t'});
+
+export { addon, choice, choiceGroup, input };

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

@@ -0,0 +1,39 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Group } from '../group/Group.js';
+import { RadioGroupProvider } from '../radio/RadioGroupContext.js';
+import { choiceGroup } from './ProteusChoiceGroup-css.js';
+import { useProteusDocumentContext } from './ProteusDocumentContext.js';
+import { useProteusDocumentPathContext } from './ProteusDocumentPathContext.js';
+import { useProteusValue } from './useProteusValue.js';
+
+function ProteusChoiceGroup({
+  children,
+  name
+}) {
+  const { onDataChange, readOnly } = useProteusDocumentContext(
+    "@optiaxiom/react/ProteusChoiceGroup"
+  );
+  const { path: parentPath } = useProteusDocumentPathContext(
+    "@optiaxiom/react/ProteusChoiceGroup"
+  );
+  const resolved = useProteusValue({ path: name ?? "" });
+  const value = name ? String(resolved ?? "") : "";
+  return /* @__PURE__ */ jsx(
+    RadioGroupProvider,
+    {
+      disabled: readOnly ?? false,
+      name,
+      onChange: (event) => {
+        if (name) {
+          onDataChange?.(`${parentPath}/${name}`, event.target.value);
+        }
+      },
+      value,
+      children: /* @__PURE__ */ jsx(Group, { ...choiceGroup(), children })
+    }
+  );
+}
+ProteusChoiceGroup.displayName = "@optiaxiom/react/ProteusChoiceGroup";
+
+export { ProteusChoiceGroup };

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

@@ -1,8 +1,10 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { createColumnHelper, useReactTable, getCoreRowModel } from '@tanstack/react-table';
+import { get } from 'jsonpointer';
 import { DataTable } from '../data-table/DataTable.js';
 import { DataTableBody } from '../data-table/DataTableBody.js';
+import { applyFormatter } from './getProteusValue.js';
 
 const ProteusDataTable = ({
   columns,
@@ -10,11 +12,19 @@ const ProteusDataTable = ({
 }) => {
   const tableData = data;
   const columnHelper = createColumnHelper();
-  const columnDefs = columns.map(
-    (col) => columnHelper.accessor(col.accessorKey, {
-      header: col.header
-    })
-  );
+  const columnDefs = columns.map((col) => {
+    return columnHelper.accessor(
+      (row) => {
+        const value = get(row, "/" + col.accessorKey);
+        return col.format ? String(applyFormatter(value, col.format)) : value;
+      },
+      {
+        header: col.header,
+        id: col.accessorKey,
+        size: col.size
+      }
+    );
+  });
   const table = useReactTable({
     columns: columnDefs,
     data: tableData,

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

@@ -17,15 +17,18 @@ function ProteusDocumentRenderer({
     {
       element: {
         ...result.data,
-        actions: /* @__PURE__ */ jsx(ProteusElement, { element: result.data.actions }),
-        body: /* @__PURE__ */ jsx(ProteusElement, { element: result.data.body }),
-        subtitle: /* @__PURE__ */ jsx(ProteusElement, { element: result.data.subtitle }),
-        title: /* @__PURE__ */ jsx(ProteusElement, { element: result.data.title })
+        actions: hasValue(result.data.actions) && /* @__PURE__ */ jsx(ProteusElement, { element: result.data.actions }),
+        body: hasValue(result.data.body) && /* @__PURE__ */ jsx(ProteusElement, { element: result.data.body }),
+        subtitle: hasValue(result.data.subtitle) && /* @__PURE__ */ jsx(ProteusElement, { element: result.data.subtitle }),
+        title: hasValue(result.data.title) && /* @__PURE__ */ jsx(ProteusElement, { element: result.data.title })
       },
       ...props
     }
   );
 }
 ProteusDocumentRenderer.displayName = "@optiaxiom/react/ProteusDocumentRenderer";
+function hasValue(value) {
+  return !!value && (!Array.isArray(value) || value.length > 0);
+}
 
 export { ProteusDocumentRenderer };

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

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { set } from 'jsonpointer';
+import { useState, useRef, useEffect } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
@@ -11,7 +12,6 @@ import { DisclosureTrigger } from '../disclosure/DisclosureTrigger.js';
 import { Group } from '../group/Group.js';
 import { Heading } from '../heading/Heading.js';
 import { useEffectEvent } from '../hooks/useEffectEvent.js';
-import 'react';
 import '../field/FieldContext.js';
 import '../utils/conditions.js';
 import '../utils/isHoverSupported.js';
@@ -31,6 +31,13 @@ function ProteusDocumentShell({
   open: openProp,
   readOnly = false
 }) {
+  const [valid, setValid] = useState(false);
+  const formRef = useRef(null);
+  useEffect(() => {
+    if (formRef.current) {
+      setValid(formRef.current.checkValidity());
+    }
+  }, []);
   const [open, setOpen] = useControllableState({
     defaultProp: defaultOpen,
     onChange: onOpenChange,
@@ -61,6 +68,7 @@ function ProteusDocumentShell({
         }
       }),
       readOnly,
+      valid,
       children: /* @__PURE__ */ jsxs(
         Disclosure,
         {
@@ -81,7 +89,7 @@ function ProteusDocumentShell({
                   flex: "none",
                   rounded: "xs",
                   size: "20",
-                  children: element.appIcon ? /* @__PURE__ */ jsx("img", { src: element.appIcon }) : /* @__PURE__ */ jsx("div", {})
+                  children: element.appIcon ? /* @__PURE__ */ jsx("img", { alt: "", src: element.appIcon }) : /* @__PURE__ */ jsx("div", {})
                 }
               ),
               /* @__PURE__ */ jsx(Text, { fontWeight: "500", children: element.appName }),
@@ -101,8 +109,20 @@ function ProteusDocumentShell({
                     /* @__PURE__ */ jsx(Heading, { fontSize: "lg", fontWeight: "600", level: "2", lineClamp: "2", children: element.title }),
                     !!element.subtitle && /* @__PURE__ */ jsx(Text, { color: "fg.secondary", fontSize: "sm", children: element.subtitle })
                   ] }),
-                  element.body,
-                  !readOnly && /* @__PURE__ */ jsx(Group, { gap: "16", justifyContent: "end", w: "full", children: element.actions })
+                  /* @__PURE__ */ jsx(Group, { asChild: true, flexDirection: "column", gap: "16", children: /* @__PURE__ */ jsx(
+                    "form",
+                    {
+                      onChange: (event) => {
+                        const form = event.currentTarget;
+                        setTimeout(() => {
+                          setValid(form.checkValidity());
+                        });
+                      },
+                      ref: formRef,
+                      children: element.body
+                    }
+                  ) }),
+                  element.actions && !readOnly && /* @__PURE__ */ jsx(Group, { gap: "16", justifyContent: "end", w: "full", children: element.actions })
                 ]
               }
             )

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

@@ -1,11 +1,25 @@
 "use client";
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { lazy, Suspense } from 'react';
+import { Avatar } from '../avatar/Avatar.js';
+import '../avatar/AvatarGroup.js';
 import { Badge } from '../badge/Badge.js';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { Card } from '../card/Card.js';
+import '../card/CardAction.js';
+import '../card/CardCheckbox.js';
+import '../card/CardFooter.js';
+import { CardHeader } from '../card/CardHeader.js';
+import '../card/CardImage.js';
+import { CardLink } from '../card/CardLink.js';
+import '../card/CardPreview.js';
 import { Field } from '../field/Field.js';
 import '../field/FieldLabel.js';
 import { Group } from '../group/Group.js';
 import { Heading } from '../heading/Heading.js';
+import { IconCalendar } from '../icons/IconCalendar.js';
 import { Link } from '../link/Link.js';
 import { Range } from '../range/Range.js';
 import '../select/Select.js';
@@ -16,6 +30,8 @@ import { Text } from '../text/Text.js';
 import { Time } from '../time/Time.js';
 import { ProteusAction } from './ProteusAction.js';
 import { ProteusCancelAction } from './ProteusCancelAction.js';
+import { ProteusChoice } from './ProteusChoice.js';
+import { ProteusChoiceGroup } from './ProteusChoiceGroup.js';
 import { ProteusDataTable } from './ProteusDataTable.js';
 import { useProteusDocumentContext } from './ProteusDocumentContext.js';
 import { useProteusDocumentPathContext } from './ProteusDocumentPathContext.js';
@@ -26,7 +42,7 @@ import { ProteusSelect } from './ProteusSelect.js';
 import { ProteusShow } from './ProteusShow.js';
 import { ProteusTextarea } from './ProteusTextarea.js';
 import { ProteusValue } from './ProteusValue.js';
-import { resolveProteusValue } from './resolveProteusValue.js';
+import { resolveProteusProp } from './resolveProteusProp.js';
 import { safeParseElement } from './schemas.js';
 
 const ProteusChart = lazy(async () => {
@@ -54,22 +70,28 @@ const ProteusElement = ({
   }
   const element = result.data;
   const resolve = (obj) => {
-    const { $type: _$type, children, ...rest } = obj;
-    const resolved = {
-      children: children ? /* @__PURE__ */ jsx(ProteusElement, { element: children }) : children
-    };
+    const { $type: _$type, ...rest } = obj;
+    const resolved = {};
     for (const [key, value] of Object.entries(rest)) {
-      resolved[key] = resolveProteusValue(value, data, parentPath);
+      resolved[key] = resolveProteusProp(value, data, parentPath);
     }
     return resolved;
   };
   switch (element.$type) {
     case "Action":
       return /* @__PURE__ */ jsx(ProteusAction, { ...resolve(element) });
+    case "Avatar":
+      return /* @__PURE__ */ jsx(Avatar, { ...resolve(element) });
     case "Badge":
       return /* @__PURE__ */ jsx(Badge, { ...resolve(element) });
     case "CancelAction":
       return /* @__PURE__ */ jsx(ProteusCancelAction, { ...resolve(element) });
+    case "Card":
+      return /* @__PURE__ */ jsx(Card, { ...resolve(element) });
+    case "CardHeader":
+      return /* @__PURE__ */ jsx(CardHeader, { ...resolve(element) });
+    case "CardLink":
+      return /* @__PURE__ */ jsx(CardLink, { ...resolve(element) });
     case "Chart":
       return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
         ProteusChart,
@@ -77,6 +99,20 @@ const ProteusElement = ({
           ...resolve(element)
         }
       ) });
+    case "Choice":
+      return /* @__PURE__ */ jsx(
+        ProteusChoice,
+        {
+          ...resolve(element)
+        }
+      );
+    case "ChoiceGroup":
+      return /* @__PURE__ */ jsx(
+        ProteusChoiceGroup,
+        {
+          ...resolve(element)
+        }
+      );
     case "DataTable":
       return /* @__PURE__ */ jsx(
         ProteusDataTable,
@@ -90,6 +126,8 @@ const ProteusElement = ({
       return /* @__PURE__ */ jsx(Group, { ...resolve(element) });
     case "Heading":
       return /* @__PURE__ */ jsx(Heading, { ...resolve(element) });
+    case "IconCalendar":
+      return /* @__PURE__ */ jsx(Box, { asChild: true, ...resolve(element), children: /* @__PURE__ */ jsx(IconCalendar, {}) });
     case "Image":
       return /* @__PURE__ */ jsx(ProteusImage, { ...resolve(element) });
     case "Input":

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

@@ -1,11 +1,12 @@
 "use client";
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useProteusDocumentPathContext, ProteusDocumentPathProvider } from './ProteusDocumentPathContext.js';
 import { useProteusValue } from './useProteusValue.js';
 
 function ProteusMap({
   children,
-  path
+  path,
+  separator
 }) {
   const { path: parentPath } = useProteusDocumentPathContext(
     "@optiaxiom/react/ProteusMap"
@@ -14,11 +15,14 @@ function ProteusMap({
   if (!Array.isArray(array)) {
     return null;
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: array.map((_, index) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment, { children: array.map((_, index) => /* @__PURE__ */ jsxs(
     ProteusDocumentPathProvider,
     {
       path: `${path.startsWith("/") ? path : `${parentPath}/${path}`}/${index}`,
-      children
+      children: [
+        index > 0 && separator,
+        children
+      ]
     },
     index
   )) });

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

@@ -26,8 +26,9 @@ const formatters = {
     return value;
   },
   Number: (value, options) => {
-    if (typeof value === "number") {
-      return new Intl.NumberFormat(void 0, options).format(value);
+    const num = typeof value === "number" ? value : typeof value === "string" && value !== "" ? Number(value) : NaN;
+    if (!Number.isNaN(num)) {
+      return new Intl.NumberFormat(void 0, options).format(num);
     }
     return value;
   }
@@ -45,4 +46,4 @@ function applyFormatter(value, formatter) {
   return fn(value, options);
 }
 
-export { getProteusValue };
+export { applyFormatter, getProteusValue };