@optiaxiom/proteus 0.1.22 → 0.1.24

package/dist/esm/assets/src/proteus-document/ProteusDocumentShell.css.ts.vanilla-DxHEfy0L.css

@@ -0,0 +1,17 @@
+@layer optiaxiom.tmkl1w;
+@layer optiaxiom.tmkl1w {
+  .ProteusDocumentShell__vpuvfj1 {
+    margin: -4px;
+  }
+  .ProteusDocumentShell__vpuvfj2 {
+    align-self: center;
+    bottom: 8px;
+    margin-top: -56px;
+    opacity: 0;
+    position: sticky;
+    z-index: 10;
+  }
+  .ProteusDocumentShell__vpuvfj0[data-can-scroll] .ProteusDocumentShell__vpuvfj2 {
+    opacity: 1;
+  }
+}

package/dist/esm/index.js

@@ -1,5 +1,4 @@
 export { ProteusAction } from './proteus-action/ProteusAction.js';
-export { ProteusCancelAction } from './proteus-action/ProteusCancelAction.js';
 export { ProteusChart } from './proteus-chart/ProteusChart.js';
 export { ProteusDataTable } from './proteus-data-table/ProteusDataTable.js';
 export { ProteusDocumentRenderer } from './proteus-document/ProteusDocumentRenderer.js';

package/dist/esm/proteus-document/ProteusDocumentShell-css.js

@@ -0,0 +1,7 @@
+import './../assets/src/proteus-document/ProteusDocumentShell.css.ts.vanilla-DxHEfy0L.css';
+import { recipe } from '@optiaxiom/react/css-runtime';
+
+var body = recipe({base:[{flexDirection:'column',gap:'16'},'ProteusDocumentShell__vpuvfj0'],variants:{truncate:{false:{},true:[{maxH:'sm',overflow:'auto',p:'4'},'ProteusDocumentShell__vpuvfj1']}}});
+var scrollIndicator = recipe({base:[{bg:'bg.secondary',border:'1',borderColor:'border.secondary',color:'fg.secondary',display:'grid',flex:'none',placeItems:'center',pointerEvents:'none',rounded:'full',shadow:'sm',size:'lg',transition:'opacity'},'ProteusDocumentShell__vpuvfj2']});
+
+export { body, scrollIndicator };

package/dist/esm/proteus-document/ProteusDocumentShell.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { IconSouth } from '@optiaxiom/icons';
 import { Disclosure, DisclosureTrigger, Box, Group, Text, DisclosureContent, Heading, Tooltip } from '@optiaxiom/react';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { set } from 'jsonpointer';
@@ -7,6 +8,7 @@ import { useState, useRef, useEffect } from 'react';
 import { useEffectEvent } from '../hooks/useEffectEvent.js';
 import { downloadFile } from '../proteus-image/downloadFile.js';
 import { ProteusDocumentProvider } from './ProteusDocumentContext.js';
+import { scrollIndicator, body } from './ProteusDocumentShell-css.js';
 
 function ProteusDocumentShell({
   collapsible: collapsibleProp,
@@ -34,6 +36,26 @@ function ProteusDocumentShell({
     onChange: onOpenChange,
     prop: openProp
   });
+  const bodyRef = useRef(null);
+  useEffect(() => {
+    const node = bodyRef.current;
+    if (!node)
+      return;
+    const update = () => {
+      if (node.scrollHeight - node.scrollTop - node.clientHeight > 1) {
+        node.dataset.canScroll = "";
+      } else {
+        delete node.dataset.canScroll;
+      }
+    };
+    const observer = new ResizeObserver(update);
+    observer.observe(node);
+    node.addEventListener("scroll", update, { passive: true });
+    return () => {
+      observer.disconnect();
+      node.removeEventListener("scroll", update);
+    };
+  }, []);
   const collapsible = collapsibleProp && element.appName;
   const Trigger = collapsible ? DisclosureTrigger : Box;
   return /* @__PURE__ */ jsx(
@@ -151,7 +173,17 @@ function ProteusDocumentShell({
                       },
                       ref: formRef,
                       children: [
-                        element.body,
+                        /* @__PURE__ */ jsxs(
+                          Group,
+                          {
+                            ref: element.compact ? bodyRef : void 0,
+                            ...body({ truncate: element.compact }),
+                            children: [
+                              element.body,
+                              element.compact && /* @__PURE__ */ jsx(Box, { ...scrollIndicator(), children: /* @__PURE__ */ jsx(IconSouth, {}) })
+                            ]
+                          }
+                        ),
                         element.actions && !readOnly && /* @__PURE__ */ jsx(Group, { gap: "16", justifyContent: "end", w: "full", children: element.actions })
                       ]
                     }

package/dist/esm/proteus-element/ProteusElement.js

@@ -5,7 +5,6 @@ import { Time, Range } from '@optiaxiom/react/unstable';
 import { lazy, Suspense } from 'react';
 import { IconCalendar } from '../icons/IconCalendar.js';
 import { ProteusAction } from '../proteus-action/ProteusAction.js';
-import { ProteusCancelAction } from '../proteus-action/ProteusCancelAction.js';
 import { ProteusDataTable } from '../proteus-data-table/ProteusDataTable.js';
 import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
 import { useProteusDocumentPathContext } from '../proteus-document/ProteusDocumentPathContext.js';
@@ -66,8 +65,8 @@ const ProteusElement = ({
       return /* @__PURE__ */ jsx(Avatar, { ...resolve(element) });
     case "Badge":
       return /* @__PURE__ */ jsx(Badge, { ...resolve(element) });
-    case "CancelAction":
-      return /* @__PURE__ */ jsx(ProteusCancelAction, { ...resolve(element) });
+    case "Button":
+      return /* @__PURE__ */ jsx(ProteusAction, { ...resolve(element) });
     case "Card":
       return /* @__PURE__ */ jsx(Card, { ...resolve(element) });
     case "CardHeader":

package/dist/esm/schema/public-schema.json.js

@@ -2673,6 +2673,10 @@ var definitions = {
 				$ref: "#/definitions/ProteusNode",
 				description: "The main content of the document."
 			},
+			compact: {
+				description: "If true, constrains the body to a max height and makes it scrollable when content overflows.",
+				type: "boolean"
+			},
 			subtitle: {
 				$ref: "#/definitions/ProteusNode",
 				description: "A brief description or tagline that provides additional context about the Proteus document's purpose."
@@ -2704,7 +2708,7 @@ var definitions = {
 				$ref: "#/definitions/ProteusBadge"
 			},
 			{
-				$ref: "#/definitions/ProteusCancelAction"
+				$ref: "#/definitions/ProteusButton"
 			},
 			{
 				$ref: "#/definitions/ProteusCard"
@@ -3703,17 +3707,18 @@ var definitions = {
 		],
 		type: "object"
 	},
-	ProteusCancelAction: {
+	ProteusButton: {
 		additionalProperties: false,
 		examples: [
 			{
-				$type: "CancelAction",
-				children: "Cancel"
+				$type: "Button",
+				appearance: "primary",
+				children: "Action"
 			}
 		],
 		properties: {
 			$type: {
-				"const": "CancelAction"
+				"const": "Button"
 			},
 			alignItems: {
 				$ref: "#/definitions/SprinkleProp_alignItems"
@@ -3724,6 +3729,38 @@ var definitions = {
 			animation: {
 				$ref: "#/definitions/SprinkleProp_animation"
 			},
+			appearance: {
+				anyOf: [
+					{
+						"const": "default"
+					},
+					{
+						"const": "danger"
+					},
+					{
+						"const": "primary"
+					},
+					{
+						"const": "subtle"
+					},
+					{
+						"const": "danger-outline"
+					},
+					{
+						"const": "default-opal"
+					},
+					{
+						"const": "inverse"
+					},
+					{
+						"const": "primary-opal"
+					},
+					{
+						$ref: "#/definitions/ProteusExpression"
+					}
+				],
+				description: "Control the appearance by selecting between the different button types."
+			},
 			backgroundImage: {
 				$ref: "#/definitions/SprinkleProp_backgroundImage"
 			},
@@ -3880,6 +3917,23 @@ var definitions = {
 			transition: {
 				$ref: "#/definitions/SprinkleProp_transition"
 			},
+			type: {
+				anyOf: [
+					{
+						"const": "button"
+					},
+					{
+						"const": "reset"
+					},
+					{
+						"const": "submit"
+					},
+					{
+						$ref: "#/definitions/ProteusExpression"
+					}
+				],
+				description: "The default behavior of the button."
+			},
 			w: {
 				$ref: "#/definitions/SprinkleProp_w"
 			},
@@ -3889,9 +3943,9 @@ var definitions = {
 			z: {
 				$ref: "#/definitions/SprinkleProp_z"
 			},
-			placeholder: {
-				description: "Placeholder text for the text input field",
-				type: "string"
+			onClick: {
+				$ref: "#/definitions/ProteusEventHandler",
+				description: "Action triggered when button is clicked"
 			}
 		},
 		required: [

package/dist/esm/schema/runtime-schema.json.js

@@ -2661,6 +2661,10 @@ var definitions = {
 				$ref: "#/definitions/ProteusNode",
 				description: "The main content of the document."
 			},
+			compact: {
+				description: "If true, constrains the body to a max height and makes it scrollable when content overflows.",
+				type: "boolean"
+			},
 			subtitle: {
 				$ref: "#/definitions/ProteusNode",
 				description: "A brief description or tagline that provides additional context about the Proteus document's purpose."
@@ -2692,7 +2696,7 @@ var definitions = {
 				$ref: "#/definitions/ProteusBadge"
 			},
 			{
-				$ref: "#/definitions/ProteusCancelAction"
+				$ref: "#/definitions/ProteusButton"
 			},
 			{
 				$ref: "#/definitions/ProteusCard"
@@ -3683,16 +3687,17 @@ var definitions = {
 		],
 		type: "object"
 	},
-	ProteusCancelAction: {
+	ProteusButton: {
 		examples: [
 			{
-				$type: "CancelAction",
-				children: "Cancel"
+				$type: "Button",
+				appearance: "primary",
+				children: "Action"
 			}
 		],
 		properties: {
 			$type: {
-				"const": "CancelAction"
+				"const": "Button"
 			},
 			alignItems: {
 				$ref: "#/definitions/SprinkleProp_alignItems"
@@ -3703,6 +3708,38 @@ var definitions = {
 			animation: {
 				$ref: "#/definitions/SprinkleProp_animation"
 			},
+			appearance: {
+				anyOf: [
+					{
+						"const": "default"
+					},
+					{
+						"const": "danger"
+					},
+					{
+						"const": "primary"
+					},
+					{
+						"const": "subtle"
+					},
+					{
+						"const": "danger-outline"
+					},
+					{
+						"const": "default-opal"
+					},
+					{
+						"const": "inverse"
+					},
+					{
+						"const": "primary-opal"
+					},
+					{
+						$ref: "#/definitions/ProteusExpression"
+					}
+				],
+				description: "Control the appearance by selecting between the different button types."
+			},
 			backgroundImage: {
 				$ref: "#/definitions/SprinkleProp_backgroundImage"
 			},
@@ -3859,6 +3896,23 @@ var definitions = {
 			transition: {
 				$ref: "#/definitions/SprinkleProp_transition"
 			},
+			type: {
+				anyOf: [
+					{
+						"const": "button"
+					},
+					{
+						"const": "reset"
+					},
+					{
+						"const": "submit"
+					},
+					{
+						$ref: "#/definitions/ProteusExpression"
+					}
+				],
+				description: "The default behavior of the button."
+			},
 			w: {
 				$ref: "#/definitions/SprinkleProp_w"
 			},
@@ -3868,9 +3922,9 @@ var definitions = {
 			z: {
 				$ref: "#/definitions/SprinkleProp_z"
 			},
-			placeholder: {
-				description: "Placeholder text for the text input field",
-				type: "string"
+			onClick: {
+				$ref: "#/definitions/ProteusEventHandler",
+				description: "Action triggered when button is clicked"
 			}
 		},
 		required: [

package/dist/index.d.ts

@@ -2,18 +2,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { BoxProps, SelectProps, Disclosure, ButtonProps, InputProps, TextareaProps } from '@optiaxiom/react';
 import { ReactNode, ComponentPropsWithoutRef } from 'react';
 
-type ProteusCancelActionProps = {
-    children?: ReactNode;
-    /**
-     * Placeholder text for the text input field
-     */
-    placeholder?: string;
-};
-declare function ProteusCancelAction({ children, placeholder, }: ProteusCancelActionProps): react_jsx_runtime.JSX.Element;
-declare namespace ProteusCancelAction {
-    var displayName: string;
-}
-
 type Series = {
     dataKey: string;
     name?: string;
@@ -252,6 +240,7 @@ type ProteusDocument$2 = {
     appName?: string;
     blocking?: boolean;
     body: ReactNode;
+    compact?: boolean;
     subtitle?: ReactNode;
     title?: ReactNode;
     titleIcon?: string;
@@ -311,6 +300,7 @@ type ProteusDocument = {
     appName?: string;
     blocking?: boolean;
     body: unknown;
+    compact?: boolean;
     subtitle?: unknown;
     title?: unknown;
     titleIcon?: string;
@@ -332,5 +322,5 @@ declare namespace ProteusTextarea {
 
 declare function useProteusValue(element: ProteusValueProps): any;
 
-export { ProteusAction, ProteusCancelAction, ProteusChart, ProteusDataTable, ProteusDocumentRenderer, ProteusDocumentShell, ProteusImage, ProteusImageCarousel, ProteusInput, ProteusMap, ProteusSelect, ProteusShow, ProteusTextarea, safeParseDocument, useProteusValue };
+export { ProteusAction, ProteusChart, ProteusDataTable, ProteusDocumentRenderer, ProteusDocumentShell, ProteusImage, ProteusImageCarousel, ProteusInput, ProteusMap, ProteusSelect, ProteusShow, ProteusTextarea, safeParseDocument, useProteusValue };
 export type { ProteusDocumentRendererProps, ProteusDocumentShellProps };