@optiaxiom/proteus 0.2.13-next.2 → 0.2.14

package/dist/esm/assets/src/proteus-chart/{ProteusChart.css.ts.vanilla-dJjly98l.css → ProteusChart.css.ts.vanilla-CfYErTvq.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom.g7voo0;
-@layer optiaxiom.g7voo0 {
+@layer optiaxiom.yvqquz;
+@layer optiaxiom.yvqquz {
   .ProteusChart__jmlqij1 {
     border-radius: 16px;
   }

package/dist/esm/assets/src/proteus-chart/{ProteusChartTooltipContent.css.ts.vanilla-Crdo1SWy.css → ProteusChartTooltipContent.css.ts.vanilla-CFiMPH60.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom.g7voo0;
-@layer optiaxiom.g7voo0 {
+@layer optiaxiom.yvqquz;
+@layer optiaxiom.yvqquz {
   .ProteusChartTooltipContent__1gsvq810 {
     min-width: 128px;
     position: absolute;

package/dist/esm/assets/src/proteus-document/{ProteusDocumentShell.css.ts.vanilla-DvoqWndD.css → ProteusDocumentShell.css.ts.vanilla-C6b32Qx3.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom.g7voo0;
-@layer optiaxiom.g7voo0 {
+@layer optiaxiom.yvqquz;
+@layer optiaxiom.yvqquz {
   .ProteusDocumentShell__vpuvfj1 {
     margin: -4px;
   }

package/dist/esm/assets/src/proteus-image-carousel/{ProteusImageCarousel.css.ts.vanilla-DWOlO6KM.css → ProteusImageCarousel.css.ts.vanilla-Dvvb8Qx5.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom.g7voo0;
-@layer optiaxiom.g7voo0 {
+@layer optiaxiom.yvqquz;
+@layer optiaxiom.yvqquz {
   .ProteusImageCarousel__1t6qej70 {
     outline: none;
     user-select: none;

package/dist/esm/assets/src/proteus-question/{ProteusQuestion.css.ts.vanilla-DLqLEZxX.css → ProteusQuestion.css.ts.vanilla-BTVHkw1E.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom.g7voo0;
-@layer optiaxiom.g7voo0 {
+@layer optiaxiom.yvqquz;
+@layer optiaxiom.yvqquz {
   .ProteusQuestion__8f590p0 {
     outline: none;
   }

package/dist/esm/proteus-card-link/ProteusCardLink.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { CardLink } from '@optiaxiom/react';
+import { useState } from 'react';
+import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
+import { useResolveProteusValues } from '../proteus-document/useResolveProteusValues.js';
+
+function ProteusCardLink({
+  children,
+  onClick,
+  ...props
+}) {
+  const { onEvent } = useProteusDocumentContext(
+    "@optiaxiom/proteus/ProteusCardLink"
+  );
+  const resolvedOnClick = useResolveProteusValues(
+    onClick ?? {}
+  );
+  const [loading, setLoading] = useState(false);
+  return /* @__PURE__ */ jsx(
+    CardLink,
+    {
+      "aria-busy": loading || void 0,
+      onClick: onClick ? async (event) => {
+        event.preventDefault();
+        if (loading) {
+          return;
+        }
+        setLoading(true);
+        await onEvent(resolvedOnClick);
+        setLoading(false);
+      } : void 0,
+      target: "_blank",
+      ...props,
+      children
+    }
+  );
+}
+ProteusCardLink.displayName = "@optiaxiom/proteus/ProteusCardLink";
+
+export { ProteusCardLink };

package/dist/esm/proteus-chart/ProteusChart-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-chart/ProteusChart.css.ts.vanilla-dJjly98l.css';
+import './../assets/src/proteus-chart/ProteusChart.css.ts.vanilla-CfYErTvq.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
 var chart = recipe({base:[{border:'1',borderColor:'border.tertiary',fontSize:'sm',p:'16'},'ProteusChart__jmlqij1','ProteusChart__jmlqij0']});

package/dist/esm/proteus-chart/ProteusChartTooltipContent-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-chart/ProteusChartTooltipContent.css.ts.vanilla-Crdo1SWy.css';
+import './../assets/src/proteus-chart/ProteusChartTooltipContent.css.ts.vanilla-CFiMPH60.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
 var tooltip = recipe({base:[{bg:'bg.default',border:'1',borderColor:'border.secondary',display:'grid',fontSize:'sm',gap:'6',pointerEvents:'none',px:'8',py:'10',rounded:'lg',shadow:'lg',transition:'all',z:'popover'},'ProteusChartTooltipContent__1gsvq810']});

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

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-document/ProteusDocumentShell.css.ts.vanilla-DvoqWndD.css';
+import './../assets/src/proteus-document/ProteusDocumentShell.css.ts.vanilla-C6b32Qx3.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']}}});

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

@@ -20,6 +20,7 @@ function ProteusDocumentShell({
   onInteraction,
   onMessage,
   onOpenChange,
+  onPreview,
   onTrack,
   onUpload,
   open: openProp,
@@ -61,6 +62,7 @@ function ProteusDocumentShell({
   }, []);
   const collapsible = collapsibleProp && element.appName;
   const Trigger = collapsible ? DisclosureTrigger : Box;
+  const inline = !element.title && !element.appName && !element.blocking;
   return /* @__PURE__ */ jsx(
     ProteusDocumentProvider,
     {
@@ -98,6 +100,8 @@ function ProteusDocumentShell({
           if (typeof event.url === "string") {
             window.open(event.url, "_blank", "noopener,noreferrer");
           }
+        } else if (event.action === "preview") {
+          await onPreview?.(event.file);
         }
         return;
       }),
@@ -114,13 +118,13 @@ function ProteusDocumentShell({
       children: /* @__PURE__ */ jsxs(
         Disclosure,
         {
-          bg: "bg.default",
-          border: "1",
-          borderColor: "border.tertiary",
+          bg: inline ? void 0 : "bg.default",
+          border: inline ? void 0 : "1",
+          borderColor: inline ? void 0 : "border.tertiary",
           onOpenChange: setOpen,
           open,
-          p: "20",
-          rounded: "xl",
+          p: inline ? void 0 : "20",
+          rounded: inline ? void 0 : "xl",
           children: [
             element.appName && /* @__PURE__ */ jsx(Trigger, { py: "0", ...collapsible ? { chevronPosition: "end" } : {}, children: /* @__PURE__ */ jsxs(Group, { fontSize: "sm", gap: "8", children: [
               /* @__PURE__ */ jsx(

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

@@ -1,17 +1,19 @@
 "use client";
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { Text, Separator, SelectTrigger, SelectContent, Link, Box, Heading, Group, Field, CardLink, CardHeader, Card, Badge, Avatar } from '@optiaxiom/react';
+import { Text, Separator, SelectTrigger, SelectContent, Link, Box, Heading, Group, Field, CardHeader, Card, Badge, Avatar } from '@optiaxiom/react';
 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 { ProteusBridge } from '../proteus-bridge/ProteusBridge.js';
+import { ProteusCardLink } from '../proteus-card-link/ProteusCardLink.js';
 import { ProteusDataTable } from '../proteus-data-table/ProteusDataTable.js';
 import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
 import { useProteusDocumentPathContext } from '../proteus-document/ProteusDocumentPathContext.js';
 import { resolveProteusProp } from '../proteus-document/resolveProteusProp.js';
 import { safeParseElement } from '../proteus-document/schemas.js';
 import { ProteusFederated } from '../proteus-federated/ProteusFederated.js';
+import { ProteusFileIcon } from '../proteus-file-icon/ProteusFileIcon.js';
 import { ProteusFileUpload } from '../proteus-file-upload/ProteusFileUpload.js';
 import { ProteusImageCarousel } from '../proteus-image-carousel/ProteusImageCarousel.js';
 import { ProteusImage } from '../proteus-image/ProteusImage.js';
@@ -82,7 +84,7 @@ const ProteusElement = ({
     case "CardHeader":
       return /* @__PURE__ */ jsx(CardHeader, { ...resolve(element) });
     case "CardLink":
-      return /* @__PURE__ */ jsx(CardLink, { target: "_blank", ...resolve(element) });
+      return /* @__PURE__ */ jsx(ProteusCardLink, { ...resolve(element) });
     case "Chart":
       return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
         ProteusChart,
@@ -106,6 +108,8 @@ const ProteusElement = ({
       );
     case "Field":
       return /* @__PURE__ */ jsx(Field, { ...resolve(element) });
+    case "FileIcon":
+      return /* @__PURE__ */ jsx(ProteusFileIcon, { ...resolve(element) });
     case "FileUpload":
       return /* @__PURE__ */ jsx(ProteusFileUpload, { ...resolve(element) });
     case "Group":

package/dist/esm/proteus-file-icon/ProteusFileIcon.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { IconFileImage, IconFileVideo, IconMusic, IconPresentationScreen, IconTableLayout, IconFileZipper, IconFileLines, IconCode, IconFile } from '@optiaxiom/icons';
+import { Box } from '@optiaxiom/react';
+
+const mimeIconMap = [
+  [/^image\//, IconFileImage],
+  [/^video\//, IconFileVideo],
+  [/^audio\//, IconMusic],
+  [/presentation|powerpoint|keynote|slides/, IconPresentationScreen],
+  [/spreadsheet|excel|csv|tsv|parquet/, IconTableLayout],
+  [/zip|tar|compress|archive|x-7z|x-rar/, IconFileZipper],
+  [/pdf|word|wordprocessing|opendocument\.text|^text\//, IconFileLines],
+  [
+    /json|xml|yaml|javascript|typescript|html|css|x-sh|x-python|code|script/,
+    IconCode
+  ]
+];
+function ProteusFileIcon({ mimeType, ...props }) {
+  const Icon = getIconForMimeType(mimeType);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      asChild: true,
+      bg: "bg.secondary",
+      color: "fg.tertiary",
+      p: "8",
+      rounded: "md",
+      ...props,
+      children: /* @__PURE__ */ jsx(Icon, {})
+    }
+  );
+}
+function getIconForMimeType(mimeType) {
+  if (mimeType) {
+    for (const [pattern, Icon] of mimeIconMap) {
+      if (pattern.test(mimeType)) {
+        return Icon;
+      }
+    }
+  }
+  return IconFile;
+}
+ProteusFileIcon.displayName = "@optiaxiom/proteus/ProteusFileIcon";
+
+export { ProteusFileIcon };

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

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-image-carousel/ProteusImageCarousel.css.ts.vanilla-DWOlO6KM.css';
+import './../assets/src/proteus-image-carousel/ProteusImageCarousel.css.ts.vanilla-Dvvb8Qx5.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
 var carousel = recipe({base:[{flexDirection:'column',gap:'12'},'ProteusImageCarousel__1t6qej70']});

package/dist/esm/proteus-question/ProteusQuestion-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-question/ProteusQuestion.css.ts.vanilla-DLqLEZxX.css';
+import './../assets/src/proteus-question/ProteusQuestion.css.ts.vanilla-BTVHkw1E.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
 var addon = recipe({base:[{display:'grid',fontWeight:'500',placeItems:'center',rounded:'lg',size:'md',transition:'colors'},'ProteusQuestion__8f590p3'],variants:{cursor:{pointer:{cursor:'pointer'}}}});