@optiaxiom/react 1.9.10 → 1.9.11

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

@@ -20,6 +20,7 @@ import { ProteusSeparator } from './ProteusSeparator.js';
 import { ProteusShow } from './ProteusShow.js';
 import { ProteusText } from './ProteusText.js';
 import { ProteusTextarea } from './ProteusTextarea.js';
+import { ProteusTime } from './ProteusTime.js';
 import { ProteusValue } from './ProteusValue.js';
 import { safeParseElement } from './schemas.js';
 
@@ -104,6 +105,8 @@ const ProteusElement = ({
       return /* @__PURE__ */ jsx(ProteusText, { ...omitType(element) });
     case "Textarea":
       return /* @__PURE__ */ jsx(ProteusTextarea, { ...omitType(element) });
+    case "Time":
+      return /* @__PURE__ */ jsx(ProteusTime, { ...omitType(element) });
     case "Value":
       return /* @__PURE__ */ jsx(
         ProteusValue,

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

@@ -3,9 +3,10 @@ import { jsx } from 'react/jsx-runtime';
 import { Field } from '../field/Field.js';
 import '../field/FieldLabel.js';
 import { ProteusElement } from './ProteusElement.js';
+import { useResolvedProteusProps } from './useResolvedProteusProps.js';
 
 function ProteusField({ children, ...props }) {
-  return /* @__PURE__ */ jsx(Field, { ...props, children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
+  return /* @__PURE__ */ jsx(Field, { ...useResolvedProteusProps(props), children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
 }
 ProteusField.displayName = "@optiaxiom/react/ProteusField";
 

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

@@ -2,9 +2,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { Group } from '../group/Group.js';
 import { ProteusElement } from './ProteusElement.js';
+import { useResolvedProteusProps } from './useResolvedProteusProps.js';
 
 function ProteusGroup({ children, ...props }) {
-  return /* @__PURE__ */ jsx(Group, { ...props, children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
+  return /* @__PURE__ */ jsx(Group, { ...useResolvedProteusProps(props), children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
 }
 ProteusGroup.displayName = "@optiaxiom/react/ProteusGroup";
 

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

@@ -2,9 +2,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { Heading } from '../heading/Heading.js';
 import { ProteusElement } from './ProteusElement.js';
+import { useResolvedProteusProps } from './useResolvedProteusProps.js';
 
 function ProteusHeading({ children, ...props }) {
-  return /* @__PURE__ */ jsx(Heading, { ...props, children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
+  return /* @__PURE__ */ jsx(Heading, { ...useResolvedProteusProps(props), children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
 }
 ProteusHeading.displayName = "@optiaxiom/react/ProteusHeading";
 

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wLXXILuv.css';
-import './../../../../assets/src/proteus-document/ProteusImage.css.ts.vanilla-OtqkruZJ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Boo8Am80.css';
+import './../../../../assets/src/proteus-document/ProteusImage.css.ts.vanilla-Ckr9JAKL.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{justifyContent:'center'},'_19uskvg']});
-var root = recipeRuntime({base:[{},'_45wbw5','_1pmy0o7']});
+var actions = recipeRuntime({base:[{justifyContent:'center'},'_1wsw34']});
+var root = recipeRuntime({base:[{},'q8119f','_13bkpk3']});
 
 export { actions, root };

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

@@ -22,6 +22,7 @@ import { IconCheck } from '../icons/IconCheck.js';
 import { IconCopy } from '../icons/IconCopy.js';
 import { IconDownload } from '../icons/IconDownload.js';
 import { Spinner } from '../spinner/Spinner.js';
+import { downloadFile } from './downloadFile.js';
 import { root, actions } from './ProteusImage-css.js';
 import { useResolvedProteusValue } from './useResolvedProteusValue.js';
 
@@ -29,7 +30,9 @@ function ProteusImage(props) {
   const resolvedSrc = useResolvedProteusValue(props.src);
   const resolvedAlt = useResolvedProteusValue(props.alt);
   const [isCopied, setIsCopied] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
   const [isLoaded, setIsLoaded] = useState(false);
+  const imgRef = useRef(null);
   const timerRef = useRef();
   return /* @__PURE__ */ jsxs(ActionsRoot, { ...root(), children: [
     !isLoaded && /* @__PURE__ */ jsx(
@@ -57,22 +60,42 @@ function ProteusImage(props) {
           {
             alt: String(resolvedAlt),
             onLoad: () => setIsLoaded(true),
+            ref: imgRef,
             src: String(resolvedSrc)
           }
         )
       }
     ),
-    /* @__PURE__ */ jsx(ActionsContent, { ...actions(), children: /* @__PURE__ */ jsxs(Group, { bg: "bg.default", gap: "4", p: "4", rounded: "md", children: [
+    isLoaded && /* @__PURE__ */ jsx(ActionsContent, { ...actions(), children: /* @__PURE__ */ jsxs(Group, { bg: "bg.default", gap: "4", p: "4", rounded: "md", children: [
       /* @__PURE__ */ jsx(
         Button,
         {
           appearance: "subtle",
           "aria-label": "Copy",
           icon: isCopied ? /* @__PURE__ */ jsx(IconCheck, { pointerEvents: "none" }) : /* @__PURE__ */ jsx(IconCopy, { pointerEvents: "none" }),
-          onClick: async (event) => {
-            event.preventDefault();
+          onClick: async () => {
+            if (!imgRef.current) {
+              return;
+            }
             setIsCopied(true);
-            await navigator.clipboard.writeText(String(resolvedSrc));
+            const canvas = document.createElement("canvas");
+            canvas.width = imgRef.current.naturalWidth;
+            canvas.height = imgRef.current.naturalHeight;
+            canvas.getContext("2d")?.drawImage(imgRef.current, 0, 0);
+            const blob = await new Promise((resolve) => {
+              try {
+                canvas.toBlob(resolve, "image/png");
+              } catch {
+                resolve(null);
+              }
+            });
+            if (blob) {
+              await navigator.clipboard.write([
+                new ClipboardItem({ "image/png": blob })
+              ]);
+            } else {
+              await navigator.clipboard.writeText(String(resolvedSrc));
+            }
             clearTimeout(timerRef.current);
             timerRef.current = window.setTimeout(() => {
               setIsCopied(false);
@@ -104,6 +127,19 @@ function ProteusImage(props) {
           "aria-label": "Download",
           asChild: true,
           icon: /* @__PURE__ */ jsx(IconDownload, {}),
+          loading: isDownloading,
+          onClick: async (event) => {
+            event.preventDefault();
+            if (isDownloading) {
+              return;
+            }
+            setIsDownloading(true);
+            try {
+              await downloadFile(String(resolvedSrc));
+            } finally {
+              setIsDownloading(false);
+            }
+          },
           size: "sm",
           children: /* @__PURE__ */ jsx("a", { download: true, href: String(resolvedSrc) })
         }

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

@@ -7,6 +7,7 @@ import '../input/InputRoot.js';
 import { useProteusDocumentContext } from './ProteusDocumentContext.js';
 import { useProteusDocumentPathContext } from './ProteusDocumentPathContext.js';
 import { useProteusValue } from './useProteusValue.js';
+import { useResolvedProteusProps } from './useResolvedProteusProps.js';
 
 function ProteusInput(props) {
   const { onDataChange, readOnly } = useProteusDocumentContext(
@@ -19,7 +20,7 @@ function ProteusInput(props) {
   return /* @__PURE__ */ jsx(
     Input,
     {
-      ...props,
+      ...useResolvedProteusProps(props),
       onValueChange: (value2) => {
         if (props.name) {
           onDataChange?.(`${parentPath}/${props.name}`, value2);

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

@@ -2,9 +2,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { Link } from '../link/Link.js';
 import { ProteusElement } from './ProteusElement.js';
+import { useResolvedProteusProps } from './useResolvedProteusProps.js';
 
 function ProteusLink({ children, ...props }) {
-  return /* @__PURE__ */ jsx(Link, { ...props, children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
+  return /* @__PURE__ */ jsx(Link, { ...useResolvedProteusProps(props), children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
 }
 ProteusLink.displayName = "@optiaxiom/react/ProteusLink";
 

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

@@ -1,9 +1,10 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { Range } from '../range/Range.js';
+import { useResolvedProteusProps } from './useResolvedProteusProps.js';
 
 function ProteusRange(props) {
-  return /* @__PURE__ */ jsx(Range, { ...props });
+  return /* @__PURE__ */ jsx(Range, { ...useResolvedProteusProps(props) });
 }
 ProteusRange.displayName = "@optiaxiom/react/ProteusRange";
 

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

@@ -8,6 +8,7 @@ import { useProteusDocumentContext } from './ProteusDocumentContext.js';
 import { useProteusDocumentPathContext } from './ProteusDocumentPathContext.js';
 import { ProteusElement } from './ProteusElement.js';
 import { useProteusValue } from './useProteusValue.js';
+import { useResolvedProteusProps } from './useResolvedProteusProps.js';
 
 function ProteusSelect({
   children,
@@ -27,7 +28,7 @@ function ProteusSelect({
   return /* @__PURE__ */ jsx(
     Select,
     {
-      ...props,
+      ...useResolvedProteusProps(props),
       onValueChange: (value2) => {
         if (readOnly) {
           return;

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

@@ -3,9 +3,10 @@ import { jsx } from 'react/jsx-runtime';
 import '../select/Select.js';
 import { SelectContent } from '../select/SelectContent.js';
 import '../select/SelectTrigger.js';
+import { useResolvedProteusProps } from './useResolvedProteusProps.js';
 
 function ProteusSelectContent(props) {
-  return /* @__PURE__ */ jsx(SelectContent, { ...props });
+  return /* @__PURE__ */ jsx(SelectContent, { ...useResolvedProteusProps(props) });
 }
 ProteusSelectContent.displayName = "@optiaxiom/react/ProteusSelectContent";
 

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

@@ -4,13 +4,14 @@ import '../select/Select.js';
 import '../select/SelectContent.js';
 import { SelectTrigger } from '../select/SelectTrigger.js';
 import { ProteusElement } from './ProteusElement.js';
+import { useResolvedProteusProps } from './useResolvedProteusProps.js';
 
 function ProteusSelectTrigger({
   children,
   ...props
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 }) {
-  return /* @__PURE__ */ jsx(SelectTrigger, { ...props, children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
+  return /* @__PURE__ */ jsx(SelectTrigger, { ...useResolvedProteusProps(props), children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
 }
 ProteusSelectTrigger.displayName = "@optiaxiom/react/ProteusSelectTrigger";
 

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

@@ -1,9 +1,10 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { Separator } from '../separator/Separator.js';
+import { useResolvedProteusProps } from './useResolvedProteusProps.js';
 
 function ProteusSeparator(props) {
-  return /* @__PURE__ */ jsx(Separator, { ...props });
+  return /* @__PURE__ */ jsx(Separator, { ...useResolvedProteusProps(props) });
 }
 ProteusSeparator.displayName = "@optiaxiom/react/ProteusSeparator";
 

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

@@ -2,9 +2,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { Text } from '../text/Text.js';
 import { ProteusElement } from './ProteusElement.js';
+import { useResolvedProteusProps } from './useResolvedProteusProps.js';
 
 function ProteusText({ children, ...props }) {
-  return /* @__PURE__ */ jsx(Text, { ...props, children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
+  return /* @__PURE__ */ jsx(Text, { ...useResolvedProteusProps(props), children: children && /* @__PURE__ */ jsx(ProteusElement, { element: children }) });
 }
 ProteusText.displayName = "@optiaxiom/react/ProteusText";
 

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

@@ -4,6 +4,7 @@ import { Textarea } from '../textarea/Textarea.js';
 import { useProteusDocumentContext } from './ProteusDocumentContext.js';
 import { useProteusDocumentPathContext } from './ProteusDocumentPathContext.js';
 import { useProteusValue } from './useProteusValue.js';
+import { useResolvedProteusProps } from './useResolvedProteusProps.js';
 
 function ProteusTextarea(props) {
   const { onDataChange, readOnly } = useProteusDocumentContext(
@@ -16,7 +17,7 @@ function ProteusTextarea(props) {
   return /* @__PURE__ */ jsx(
     Textarea,
     {
-      ...props,
+      ...useResolvedProteusProps(props),
       onValueChange: (value2) => {
         if (props.name) {
           onDataChange?.(`${parentPath}/${props.name}`, value2);

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

@@ -0,0 +1,10 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Time } from '../time/Time.js';
+
+function ProteusTime(props) {
+  return /* @__PURE__ */ jsx(Time, { ...props });
+}
+ProteusTime.displayName = "@optiaxiom/react/ProteusTime";
+
+export { ProteusTime };

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

@@ -0,0 +1,12 @@
+async function downloadFile(url) {
+  const response = await fetch(url);
+  const blob = await response.blob();
+  const objectUrl = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = objectUrl;
+  a.download = url.split("/").pop() || "";
+  a.click();
+  URL.revokeObjectURL(objectUrl);
+}
+
+export { downloadFile };