@optiaxiom/proteus 0.3.0 → 1.1.0

package/dist/esm/proteus-file-upload/ProteusFileUpload.js

@@ -1,137 +1,111 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { IconPlus } from '@optiaxiom/icons';
-import { toaster, Flex } from '@optiaxiom/react';
-import { FileUpload, VisuallyHidden, FileUploadTrigger, FileUploadList, FileUploadDropzone } from '@optiaxiom/react/unstable';
-import { useRef, useState, useCallback } from 'react';
-import { useObserveValue } from '../hooks/useObserveValue.js';
-import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
-import { useProteusDocumentPathContext } from '../proteus-document/ProteusDocumentPathContext.js';
-
-function ProteusFileUpload({
-  accept,
-  maxFiles,
-  minFiles = 0,
-  name
-}) {
-  const { onDataChange, onUpload, readOnly } = useProteusDocumentContext(
-    "@optiaxiom/proteus/ProteusFileUpload"
-  );
-  const { path: parentPath } = useProteusDocumentPathContext(
-    "@optiaxiom/proteus/ProteusFileUpload"
-  );
-  const inputRef = useRef(null);
-  const itemsRef = useRef([]);
-  const [items, setItems] = useState([]);
-  const forceValueChange = useObserveValue(inputRef);
-  const multiple = maxFiles !== 1;
-  const atMax = multiple && maxFiles !== void 0 && items.length >= maxFiles;
-  const writeValue = useCallback(() => {
-    setItems(itemsRef.current);
-    if (inputRef.current) {
-      forceValueChange(
-        itemsRef.current.filter((item) => item.status === "complete").length.toString()
-      );
-    }
-    if (name) {
-      const value = itemsRef.current.filter((item) => item.status === "complete").map((item) => item.metadata).filter((metadata) => !!metadata);
-      onDataChange?.(`${parentPath}/${name}`, value);
-    }
-  }, [forceValueChange, name, onDataChange, parentPath]);
-  const handleFilesDrop = useCallback(
-    async (incoming) => {
-      let skipped = 0;
-      if (maxFiles !== void 0) {
-        const existing = multiple ? itemsRef.current.length : 0;
-        const remaining = Math.max(0, maxFiles - existing);
-        if (incoming.length > remaining) {
-          skipped = incoming.length - remaining;
-          incoming = incoming.slice(0, remaining);
-        }
-      }
-      if (skipped > 0) {
-        const accepted = incoming.length;
-        const skippedWord = skipped === 1 ? "was" : "were";
-        toaster.create(
-          accepted > 0 ? `Added ${accepted} file${accepted === 1 ? "" : "s"}. ${skipped} ${skippedWord} skipped because the limit is ${maxFiles}.` : `${skipped} file${skipped === 1 ? "" : "s"} ${skippedWord} skipped because the limit is ${maxFiles}.`,
-          { type: "warning" }
-        );
-      }
-      if (!onUpload || readOnly || incoming.length === 0) {
-        return;
-      }
-      itemsRef.current = [
-        ...multiple ? itemsRef.current : [],
-        ...incoming.map((file) => ({ file, status: "uploading" }))
-      ];
-      writeValue();
-      const result = new Map(
-        await Promise.all(
-          incoming.map(
-            (file) => onUpload(file).then(
-              (metadata) => [
-                file,
-                {
-                  file,
-                  metadata,
-                  status: "complete"
-                }
-              ]
-            ).catch(
-              () => [
-                file,
-                {
-                  file,
-                  status: "error"
-                }
-              ]
-            )
-          )
-        )
-      );
-      itemsRef.current = itemsRef.current.map(
-        (item) => result.get(item.file) ?? item
-      );
-      writeValue();
-    },
-    [maxFiles, multiple, onUpload, readOnly, writeValue]
-  );
-  const handleRemove = useCallback(
-    (item) => {
-      itemsRef.current = itemsRef.current.filter((i) => i !== item);
-      writeValue();
-    },
-    [writeValue]
-  );
-  return /* @__PURE__ */ jsxs(
-    FileUpload,
-    {
-      accept,
-      disabled: !onUpload || readOnly || atMax,
-      onFilesDrop: handleFilesDrop,
-      children: [
-        /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx(
-          "input",
-          {
-            "aria-hidden": true,
-            defaultValue: 0,
-            max: maxFiles !== void 0 ? String(maxFiles) : void 0,
-            min: String(minFiles),
-            name,
-            ref: inputRef,
-            tabIndex: -1,
-            type: "number"
-          }
-        ) }),
-        items.length > 0 ? /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", gap: "8", children: [
-          multiple && !atMax && /* @__PURE__ */ jsx(FileUploadTrigger, { alignSelf: "end", icon: /* @__PURE__ */ jsx(IconPlus, {}), children: "Add File" }),
-          /* @__PURE__ */ jsx(FileUploadList, { items, onRemove: handleRemove }),
-          !atMax && /* @__PURE__ */ jsx(FileUploadDropzone, { overlay: true })
-        ] }) : /* @__PURE__ */ jsx(FileUploadDropzone, { children: /* @__PURE__ */ jsx(FileUploadTrigger, {}) })
-      ]
-    }
-  );
+import { useProteusDocumentContext } from "../proteus-document/ProteusDocumentContext.js";
+import { useProteusDocumentPathContext } from "../proteus-document/ProteusDocumentPathContext.js";
+import { useObserveValue } from "../hooks/useObserveValue.js";
+import { Flex, toaster } from "@optiaxiom/react";
+import { useCallback, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FileUpload, FileUploadDropzone, FileUploadList, FileUploadTrigger, VisuallyHidden } from "@optiaxiom/react/unstable";
+import { IconPlus } from "@optiaxiom/icons";
+//#region src/proteus-file-upload/ProteusFileUpload.tsx
+function ProteusFileUpload({ accept, maxFiles, minFiles = 0, name }) {
+	const { onDataChange, onUpload, readOnly } = useProteusDocumentContext("@optiaxiom/proteus/ProteusFileUpload");
+	const { path: parentPath } = useProteusDocumentPathContext("@optiaxiom/proteus/ProteusFileUpload");
+	const inputRef = useRef(null);
+	const itemsRef = useRef([]);
+	const [items, setItems] = useState([]);
+	const forceValueChange = useObserveValue(inputRef);
+	const multiple = maxFiles !== 1;
+	const atMax = multiple && maxFiles !== void 0 && items.length >= maxFiles;
+	const writeValue = useCallback(() => {
+		setItems(itemsRef.current);
+		if (inputRef.current) forceValueChange(itemsRef.current.filter((item) => item.status === "complete").length.toString());
+		if (name) {
+			const value = itemsRef.current.filter((item) => item.status === "complete").map((item) => item.metadata).filter((metadata) => !!metadata);
+			onDataChange?.(`${parentPath}/${name}`, value);
+		}
+	}, [
+		forceValueChange,
+		name,
+		onDataChange,
+		parentPath
+	]);
+	const handleFilesDrop = useCallback(async (incoming) => {
+		let skipped = 0;
+		if (maxFiles !== void 0) {
+			const existing = multiple ? itemsRef.current.length : 0;
+			const remaining = Math.max(0, maxFiles - existing);
+			if (incoming.length > remaining) {
+				skipped = incoming.length - remaining;
+				incoming = incoming.slice(0, remaining);
+			}
+		}
+		if (skipped > 0) {
+			const accepted = incoming.length;
+			const skippedWord = skipped === 1 ? "was" : "were";
+			toaster.create(accepted > 0 ? `Added ${accepted} file${accepted === 1 ? "" : "s"}. ${skipped} ${skippedWord} skipped because the limit is ${maxFiles}.` : `${skipped} file${skipped === 1 ? "" : "s"} ${skippedWord} skipped because the limit is ${maxFiles}.`, { type: "warning" });
+		}
+		if (!onUpload || readOnly || incoming.length === 0) return;
+		itemsRef.current = [...multiple ? itemsRef.current : [], ...incoming.map((file) => ({
+			file,
+			status: "uploading"
+		}))];
+		writeValue();
+		const result = new Map(await Promise.all(incoming.map((file) => onUpload(file).then((metadata) => [file, {
+			file,
+			metadata,
+			status: "complete"
+		}]).catch(() => [file, {
+			file,
+			status: "error"
+		}]))));
+		itemsRef.current = itemsRef.current.map((item) => result.get(item.file) ?? item);
+		writeValue();
+	}, [
+		maxFiles,
+		multiple,
+		onUpload,
+		readOnly,
+		writeValue
+	]);
+	const handleRemove = useCallback((item) => {
+		itemsRef.current = itemsRef.current.filter((i) => i !== item);
+		writeValue();
+	}, [writeValue]);
+	return /* @__PURE__ */ jsxs(FileUpload, {
+		accept,
+		disabled: !onUpload || readOnly || atMax,
+		onFilesDrop: handleFilesDrop,
+		children: [/* @__PURE__ */ jsx(VisuallyHidden, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("input", {
+				"aria-hidden": true,
+				defaultValue: 0,
+				max: maxFiles !== void 0 ? String(maxFiles) : void 0,
+				min: String(minFiles),
+				name,
+				ref: inputRef,
+				tabIndex: -1,
+				type: "number"
+			})
+		}), items.length > 0 ? /* @__PURE__ */ jsxs(Flex, {
+			flexDirection: "column",
+			gap: "8",
+			children: [
+				multiple && !atMax && /* @__PURE__ */ jsx(FileUploadTrigger, {
+					alignSelf: "end",
+					icon: /* @__PURE__ */ jsx(IconPlus, {}),
+					children: "Add File"
+				}),
+				/* @__PURE__ */ jsx(FileUploadList, {
+					items,
+					onRemove: handleRemove
+				}),
+				!atMax && /* @__PURE__ */ jsx(FileUploadDropzone, { overlay: true })
+			]
+		}) : /* @__PURE__ */ jsx(FileUploadDropzone, { children: /* @__PURE__ */ jsx(FileUploadTrigger, {}) })]
+	});
 }
 ProteusFileUpload.displayName = "@optiaxiom/proteus/ProteusFileUpload";
-
+//#endregion
 export { ProteusFileUpload };

package/dist/esm/proteus-image/ProteusImage.js

@@ -1,111 +1,104 @@
 "use client";
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Box, Spinner, Dialog, DialogTrigger, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogClose, Button } from '@optiaxiom/react';
-import { useState } from 'react';
-import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
-
+import { useProteusDocumentContext } from "../proteus-document/ProteusDocumentContext.js";
+import { Box, Button, Dialog, DialogBody, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTrigger, Spinner } from "@optiaxiom/react";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/proteus-image/ProteusImage.tsx
 function ProteusImage(props) {
-  const { onEvent } = useProteusDocumentContext(
-    "@optiaxiom/proteus/ProteusImage"
-  );
-  const [open, setOpen] = useState(false);
-  const [isDownloading, setIsDownloading] = useState(false);
-  const [isLoaded, setIsLoaded] = useState(false);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !isLoaded && /* @__PURE__ */ jsx(
-      Box,
-      {
-        alignItems: "center",
-        bg: "bg.tertiary",
-        display: "flex",
-        justifyContent: "center",
-        p: "24",
-        rounded: "md",
-        style: { aspectRatio: "16 / 9" },
-        w: "full",
-        ...props,
-        children: /* @__PURE__ */ jsx(Spinner, {})
-      }
-    ),
-    /* @__PURE__ */ jsxs(Dialog, { onOpenChange: setOpen, open, children: [
-      /* @__PURE__ */ jsx(DialogTrigger, { "aria-label": "Expand", asChild: true, children: /* @__PURE__ */ jsx(
-        Box,
-        {
-          asChild: true,
-          cursor: "pointer",
-          display: isLoaded ? "flex" : "none",
-          objectFit: "contain",
-          overflow: "hidden",
-          rounded: "inherit",
-          size: "full",
-          ...props,
-          children: /* @__PURE__ */ jsx(
-            "img",
-            {
-              alt: props.alt,
-              draggable: true,
-              onDragStart: (event) => {
-                event.stopPropagation();
-                event.dataTransfer.effectAllowed = "copy";
-                event.dataTransfer.setData(
-                  "opal-chat-dnd-data",
-                  JSON.stringify({
-                    link: props.src,
-                    mime_type: "image/*",
-                    name: props.src?.split("/").pop()
-                  })
-                );
-              },
-              onLoad: () => setIsLoaded(true),
-              src: props.src
-            }
-          )
-        }
-      ) }),
-      /* @__PURE__ */ jsxs(DialogContent, { size: "fullscreen", children: [
-        /* @__PURE__ */ jsx(DialogHeader, { lineClamp: "1", children: props.alt }),
-        /* @__PURE__ */ jsx(DialogBody, { overflow: "hidden", children: /* @__PURE__ */ jsx(
-          Box,
-          {
-            asChild: true,
-            display: "block",
-            maxH: "full",
-            maxW: "full",
-            objectFit: "contain",
-            children: /* @__PURE__ */ jsx("img", { alt: props.alt, src: props.src })
-          }
-        ) }),
-        /* @__PURE__ */ jsxs(DialogFooter, { children: [
-          /* @__PURE__ */ jsx(DialogClose, { children: "Close" }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              appearance: "primary",
-              asChild: true,
-              loading: isDownloading,
-              onClick: async (event) => {
-                event.preventDefault();
-                if (isDownloading) {
-                  return;
-                }
-                setIsDownloading(true);
-                try {
-                  await onEvent({
-                    action: "download",
-                    url: String(props.src)
-                  });
-                } finally {
-                  setIsDownloading(false);
-                }
-              },
-              children: /* @__PURE__ */ jsx("a", { download: true, href: props.src, children: "Download" })
-            }
-          )
-        ] })
-      ] })
-    ] })
-  ] });
+	const { onEvent } = useProteusDocumentContext("@optiaxiom/proteus/ProteusImage");
+	const [open, setOpen] = useState(false);
+	const [isDownloading, setIsDownloading] = useState(false);
+	const [isLoaded, setIsLoaded] = useState(false);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [!isLoaded && /* @__PURE__ */ jsx(Box, {
+		alignItems: "center",
+		bg: "bg.tertiary",
+		display: "flex",
+		justifyContent: "center",
+		p: "24",
+		rounded: "md",
+		style: { aspectRatio: "16 / 9" },
+		w: "full",
+		...props,
+		children: /* @__PURE__ */ jsx(Spinner, {})
+	}), /* @__PURE__ */ jsxs(Dialog, {
+		onOpenChange: setOpen,
+		open,
+		children: [/* @__PURE__ */ jsx(DialogTrigger, {
+			"aria-label": "Expand",
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Box, {
+				asChild: true,
+				cursor: "pointer",
+				display: isLoaded ? "flex" : "none",
+				objectFit: "contain",
+				overflow: "hidden",
+				rounded: "inherit",
+				size: "full",
+				...props,
+				children: /* @__PURE__ */ jsx("img", {
+					alt: props.alt,
+					draggable: true,
+					onDragStart: (event) => {
+						event.stopPropagation();
+						event.dataTransfer.effectAllowed = "copy";
+						event.dataTransfer.setData("opal-chat-dnd-data", JSON.stringify({
+							link: props.src,
+							mime_type: "image/*",
+							name: props.src?.split("/").pop()
+						}));
+					},
+					onLoad: () => setIsLoaded(true),
+					src: props.src
+				})
+			})
+		}), /* @__PURE__ */ jsxs(DialogContent, {
+			size: "fullscreen",
+			children: [
+				/* @__PURE__ */ jsx(DialogHeader, {
+					lineClamp: "1",
+					children: props.alt
+				}),
+				/* @__PURE__ */ jsx(DialogBody, {
+					overflow: "hidden",
+					children: /* @__PURE__ */ jsx(Box, {
+						asChild: true,
+						display: "block",
+						maxH: "full",
+						maxW: "full",
+						objectFit: "contain",
+						children: /* @__PURE__ */ jsx("img", {
+							alt: props.alt,
+							src: props.src
+						})
+					})
+				}),
+				/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(DialogClose, { children: "Close" }), /* @__PURE__ */ jsx(Button, {
+					appearance: "primary",
+					asChild: true,
+					loading: isDownloading,
+					onClick: async (event) => {
+						event.preventDefault();
+						if (isDownloading) return;
+						setIsDownloading(true);
+						try {
+							await onEvent({
+								action: "download",
+								url: String(props.src)
+							});
+						} finally {
+							setIsDownloading(false);
+						}
+					},
+					children: /* @__PURE__ */ jsx("a", {
+						download: true,
+						href: props.src,
+						children: "Download"
+					})
+				})] })
+			]
+		})]
+	})] });
 }
 ProteusImage.displayName = "@optiaxiom/proteus/ProteusImage";
-
+//#endregion
 export { ProteusImage };

package/dist/esm/proteus-image/downloadFile.js

@@ -1,5 +1,6 @@
+//#region src/proteus-image/downloadFile.ts
 async function downloadFile(url) {
-  window.open(url, "_blank");
+	window.open(url, "_blank");
 }
-
+//#endregion
 export { downloadFile };

package/dist/esm/proteus-image-carousel/ProteusImageCarousel-css.js

@@ -1,12 +1,50 @@
-import './../assets/src/proteus-image-carousel/ProteusImageCarousel.css.ts.vanilla-CIwMJ4Cg.css';
-import { recipe } from '@optiaxiom/react/css-runtime';
-
-var carousel = recipe({base:[{flexDirection:'column',gap:'12'},'ProteusImageCarousel__1t6qej70']});
-var content = recipe({base:[{display:'grid',overflow:'hidden',rounded:'lg'},'ProteusImageCarousel__1t6qej71']});
-var navButton = recipe({base:[{bg:'bg.default',display:'grid',mx:'16',placeItems:'center',rounded:'full',size:'md',transition:'opacity'},'ProteusImageCarousel__1t6qej75'],variants:{side:{left:[{mr:'32'},'ProteusImageCarousel__1t6qej76'],right:[{ml:'32'},'ProteusImageCarousel__1t6qej77']}}});
-var slide = recipe({base:[{objectFit:'cover',size:'full'},'ProteusImageCarousel__1t6qej74']});
-var slideContainer = recipe({base:[{size:'full'},'ProteusImageCarousel__1t6qej73']});
-var thumbnail = recipe({base:[{cursor:'pointer',flex:'none',objectFit:'cover',overflow:'hidden',rounded:'lg',size:'80',transition:'opacity'},'ProteusImageCarousel__1t6qej78'],variants:{selected:{false:'ProteusImageCarousel__1t6qej79',true:'ProteusImageCarousel__1t6qej7a'}}});
-var viewport = recipe({base:[{overflow:'hidden'},'ProteusImageCarousel__1t6qej72']});
-
+import { recipe } from "@optiaxiom/react/css-runtime";
+import "./../assets/src/proteus-image-carousel/ProteusImageCarousel.css.ts.vanilla-DnlXoyv1.css";
+//#region src/proteus-image-carousel/ProteusImageCarousel.css.ts
+var carousel = recipe({ base: [{
+	flexDirection: "column",
+	gap: "12"
+}, "ProteusImageCarousel__1t6qej70"] });
+var content = recipe({ base: [{
+	display: "grid",
+	overflow: "hidden",
+	rounded: "lg"
+}, "ProteusImageCarousel__1t6qej71"] });
+var navButton = recipe({
+	base: [{
+		bg: "bg.default",
+		display: "grid",
+		mx: "16",
+		placeItems: "center",
+		rounded: "full",
+		size: "md",
+		transition: "opacity"
+	}, "ProteusImageCarousel__1t6qej75"],
+	variants: { side: {
+		left: [{ mr: "32" }, "ProteusImageCarousel__1t6qej76"],
+		right: [{ ml: "32" }, "ProteusImageCarousel__1t6qej77"]
+	} }
+});
+var slide = recipe({ base: [{
+	objectFit: "cover",
+	size: "full"
+}, "ProteusImageCarousel__1t6qej74"] });
+var slideContainer = recipe({ base: [{ size: "full" }, "ProteusImageCarousel__1t6qej73"] });
+var thumbnail = recipe({
+	base: [{
+		cursor: "pointer",
+		flex: "none",
+		objectFit: "cover",
+		overflow: "hidden",
+		rounded: "lg",
+		size: "80",
+		transition: "opacity"
+	}, "ProteusImageCarousel__1t6qej78"],
+	variants: { selected: {
+		false: "ProteusImageCarousel__1t6qej79",
+		true: "ProteusImageCarousel__1t6qej7a"
+	} }
+});
+var viewport = recipe({ base: [{ overflow: "hidden" }, "ProteusImageCarousel__1t6qej72"] });
+//#endregion
 export { carousel, content, navButton, slide, slideContainer, thumbnail, viewport };