@stackframe/stack-shared 2.8.51 → 2.8.52

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @stackframe/stack-shared
 
+## 2.8.52
+
+### Patch Changes
+
+- Various changes
+
 ## 2.8.51
 
 ### Patch Changes

package/dist/apps/apps-ui.d.mts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AppId } from './apps-config.mjs';
+
+declare const appSquareWidthExpression = "max(min(11vw,180px),80px)";
+declare const appSquarePaddingExpression = "max(min(1vw,1.5rem),0.25rem)";
+type AppIconProps = {
+    appId: AppId;
+    /**
+     * Icon component from the app frontend config
+     */
+    IconComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+    /**
+     * Optional logo component from the app frontend config
+     */
+    LogoComponent?: React.FunctionComponent<{}>;
+    className?: string;
+    disabled?: boolean;
+    style?: React.CSSProperties;
+    /**
+     * cn utility function for className merging (e.g., from stack-ui or tailwind-merge)
+     */
+    cn: (...inputs: any[]) => string;
+};
+declare function AppIcon({ appId, IconComponent, LogoComponent, className, disabled, style, cn, }: AppIconProps): react_jsx_runtime.JSX.Element;
+
+export { AppIcon, type AppIconProps, appSquarePaddingExpression, appSquareWidthExpression };

package/dist/apps/apps-ui.d.ts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AppId } from './apps-config.js';
+
+declare const appSquareWidthExpression = "max(min(11vw,180px),80px)";
+declare const appSquarePaddingExpression = "max(min(1vw,1.5rem),0.25rem)";
+type AppIconProps = {
+    appId: AppId;
+    /**
+     * Icon component from the app frontend config
+     */
+    IconComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+    /**
+     * Optional logo component from the app frontend config
+     */
+    LogoComponent?: React.FunctionComponent<{}>;
+    className?: string;
+    disabled?: boolean;
+    style?: React.CSSProperties;
+    /**
+     * cn utility function for className merging (e.g., from stack-ui or tailwind-merge)
+     */
+    cn: (...inputs: any[]) => string;
+};
+declare function AppIcon({ appId, IconComponent, LogoComponent, className, disabled, style, cn, }: AppIconProps): react_jsx_runtime.JSX.Element;
+
+export { AppIcon, type AppIconProps, appSquarePaddingExpression, appSquareWidthExpression };

package/dist/apps/apps-ui.js

@@ -0,0 +1,110 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/apps/apps-ui.tsx
+var apps_ui_exports = {};
+__export(apps_ui_exports, {
+  AppIcon: () => AppIcon,
+  appSquarePaddingExpression: () => appSquarePaddingExpression,
+  appSquareWidthExpression: () => appSquareWidthExpression
+});
+module.exports = __toCommonJS(apps_ui_exports);
+var import_arrays = require("../utils/arrays.js");
+var import_apps_config = require("./apps-config.js");
+var import_jsx_runtime = require("react/jsx-runtime");
+var appSquareWidthExpression = "max(min(11vw,180px),80px)";
+var appSquarePaddingExpression = "max(min(1vw,1.5rem),0.25rem)";
+function AppIcon({
+  appId,
+  IconComponent,
+  LogoComponent,
+  className,
+  disabled,
+  style,
+  cn
+}) {
+  const svgGradients = (gradients) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "0", height: "0", children: Object.entries(gradients).map(([id, gradient]) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("linearGradient", { id, x1: "100%", y1: "100%", x2: "0%", y2: "0%", children: gradient.map((color, index) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { stopColor: color, offset: `${index * 100 / (gradient.length - 1)}%` }, index);
+      }) }, id);
+    }) });
+  };
+  const app = import_apps_config.ALL_APPS[appId];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style,
+      className: cn(
+        "relative w-24 h-24 rounded-[24.154%] overflow-hidden select-none",
+        !disabled && "bg-[linear-gradient(45deg,#dde,#fff)] dark:bg-[linear-gradient(45deg,#222,#666)]",
+        disabled && "border-gray-400/70 border-dashed border-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("w-full h-full isolate relative"), children: LogoComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "absolute inset-[20%] w-[60%] h-[60%] rounded-[24.154%] overflow-hidden flex items-center justify-center border",
+            style: {
+              opacity: disabled ? 0.6 : 1
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LogoComponent, {})
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "0", height: "0", children: svgGradients({
+            "app-icon-gradient-light": ["#c0f", "#66f", "#4af"],
+            "app-icon-gradient-dark": ["#3ec", "#9af", "#a5f"],
+            "app-icon-gradient-light-expert": ["#f0c", "#f66", "#fa4"],
+            "app-icon-gradient-dark-expert": ["#f0c", "#f66", "#fa4"],
+            "app-icon-gradient-light-integration": ["#E5AB00", "#FFBA00", "#F8DF80"],
+            "app-icon-gradient-dark-integration": ["#E5AB00", "#FFBA00", "#F8DF80"]
+          }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            IconComponent,
+            {
+              opacity: disabled ? 0.75 : 1,
+              className: cn(
+                "inset-[20%] w-[60%] h-[60%] bg-clip-text text-transparent text-white absolute",
+                (0, import_arrays.typedIncludes)(app.tags, "expert") ? "stroke-[url(#app-icon-gradient-light-expert)] dark:stroke-[url(#app-icon-gradient-dark-expert)]" : (0, import_arrays.typedIncludes)(app.tags, "integration") ? "stroke-[url(#app-icon-gradient-light-integration)] dark:stroke-[url(#app-icon-gradient-dark-integration)]" : "stroke-[url(#app-icon-gradient-light)] dark:stroke-[url(#app-icon-gradient-dark)]"
+              )
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute top-0 left-[-100%] right-0 flex flex-col gap-1 [transform:_rotate(-45deg)_translateY(24px)] [transform-origin:top_center]", children: app.stage !== "stable" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: cn(
+              "h-4 uppercase text-xs font-bold font-mono tracking-widest text-center",
+              disabled ? "bg-gray-400/80 text-white" : app.stage === "alpha" ? "bg-red-500 text-white" : "bg-yellow-600 text-white"
+            ),
+            children: app.stage
+          }
+        ) })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AppIcon,
+  appSquarePaddingExpression,
+  appSquareWidthExpression
+});
+//# sourceMappingURL=apps-ui.js.map

package/dist/apps/apps-ui.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/apps/apps-ui.tsx"],"sourcesContent":["import { typedIncludes } from \"../utils/arrays\";\nimport { ALL_APPS, AppId } from \"./apps-config\";\n\nexport const appSquareWidthExpression = \"max(min(11vw,180px),80px)\";\nexport const appSquarePaddingExpression = \"max(min(1vw,1.5rem),0.25rem)\";\n\nexport type AppIconProps = {\n  appId: AppId,\n  /**\n   * Icon component from the app frontend config\n   */\n  IconComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>,\n  /**\n   * Optional logo component from the app frontend config\n   */\n  LogoComponent?: React.FunctionComponent<{}>,\n  className?: string,\n  disabled?: boolean,\n  style?: React.CSSProperties,\n  /**\n   * cn utility function for className merging (e.g., from stack-ui or tailwind-merge)\n   */\n  cn: (...inputs: any[]) => string,\n};\n\nexport function AppIcon({\n  appId,\n  IconComponent,\n  LogoComponent,\n  className,\n  disabled,\n  style,\n  cn,\n}: AppIconProps) {\n  const svgGradients = (gradients: Record<string, string[]>) => {\n    return (\n      <svg width=\"0\" height=\"0\">\n        {Object.entries(gradients).map(([id, gradient]) => {\n          return (\n            <linearGradient key={id} id={id} x1=\"100%\" y1=\"100%\" x2=\"0%\" y2=\"0%\">\n              {gradient.map((color, index) => {\n                return <stop key={index} stopColor={color} offset={`${index * 100 / (gradient.length - 1)}%`} />;\n              })}\n            </linearGradient>\n          );\n        })}\n      </svg>\n    );\n  };\n\n  const app = ALL_APPS[appId];\n\n  return (\n    <div\n      style={style}\n      className={cn(\n        \"relative w-24 h-24 rounded-[24.154%] overflow-hidden select-none\",\n        !disabled && \"bg-[linear-gradient(45deg,#dde,#fff)] dark:bg-[linear-gradient(45deg,#222,#666)]\",\n        disabled && 'border-gray-400/70 border-dashed border-4',\n        className,\n      )}\n    >\n      <div className={cn(\"w-full h-full isolate relative\")}>\n        {LogoComponent ? (\n          <div\n            className=\"absolute inset-[20%] w-[60%] h-[60%] rounded-[24.154%] overflow-hidden flex items-center justify-center border\"\n            style={{\n              opacity: disabled ? 0.6 : 1,\n            }}\n          >\n            <LogoComponent />\n          </div>\n        ) : (\n          <>\n            <svg width=\"0\" height=\"0\">\n              {svgGradients({\n                \"app-icon-gradient-light\": [\"#c0f\", \"#66f\", \"#4af\"],\n                \"app-icon-gradient-dark\": [\"#3ec\", \"#9af\", \"#a5f\"],\n                \"app-icon-gradient-light-expert\": [\"#f0c\", \"#f66\", \"#fa4\"],\n                \"app-icon-gradient-dark-expert\": [\"#f0c\", \"#f66\", \"#fa4\"],\n                \"app-icon-gradient-light-integration\": [\"#E5AB00\", \"#FFBA00\", \"#F8DF80\"],\n                \"app-icon-gradient-dark-integration\": [\"#E5AB00\", \"#FFBA00\", \"#F8DF80\"],\n              })}\n            </svg>\n            <IconComponent\n              opacity={disabled ? 0.75 : 1}\n              className={cn(\n                \"inset-[20%] w-[60%] h-[60%] bg-clip-text text-transparent text-white absolute\",\n                (typedIncludes(app.tags, \"expert\")\n                  ? \"stroke-[url(#app-icon-gradient-light-expert)] dark:stroke-[url(#app-icon-gradient-dark-expert)]\"\n                  : typedIncludes(app.tags, \"integration\")\n                    ? \"stroke-[url(#app-icon-gradient-light-integration)] dark:stroke-[url(#app-icon-gradient-dark-integration)]\"\n                    : \"stroke-[url(#app-icon-gradient-light)] dark:stroke-[url(#app-icon-gradient-dark)]\"\n                )\n              )}\n            />\n          </>\n        )}\n      </div>\n      <div className=\"absolute top-0 left-[-100%] right-0 flex flex-col gap-1 [transform:_rotate(-45deg)_translateY(24px)] [transform-origin:top_center]\">\n        {app.stage !== \"stable\" && (\n          <div className={cn(\n            \"h-4 uppercase text-xs font-bold font-mono tracking-widest text-center\",\n            disabled\n              ? \"bg-gray-400/80 text-white\"\n              : app.stage === \"alpha\"\n                ? \"bg-red-500 text-white\"\n                : \"bg-yellow-600 text-white\"\n            )}\n          >\n            {app.stage}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA8B;AAC9B,yBAAgC;AAwCT;AAtChB,IAAM,2BAA2B;AACjC,IAAM,6BAA6B;AAqBnC,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiB;AACf,QAAM,eAAe,CAAC,cAAwC;AAC5D,WACE,4CAAC,SAAI,OAAM,KAAI,QAAO,KACnB,iBAAO,QAAQ,SAAS,EAAE,IAAI,CAAC,CAAC,IAAI,QAAQ,MAAM;AACjD,aACE,4CAAC,oBAAwB,IAAQ,IAAG,QAAO,IAAG,QAAO,IAAG,MAAK,IAAG,MAC7D,mBAAS,IAAI,CAAC,OAAO,UAAU;AAC9B,eAAO,4CAAC,UAAiB,WAAW,OAAO,QAAQ,GAAG,QAAQ,OAAO,SAAS,SAAS,EAAE,OAAvE,KAA4E;AAAA,MAChG,CAAC,KAHkB,EAIrB;AAAA,IAEJ,CAAC,GACH;AAAA,EAEJ;AAEA,QAAM,MAAM,4BAAS,KAAK;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,CAAC,YAAY;AAAA,QACb,YAAY;AAAA,QACZ;AAAA,MACF;AAAA,MAEA;AAAA,oDAAC,SAAI,WAAW,GAAG,gCAAgC,GAChD,0BACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,SAAS,WAAW,MAAM;AAAA,YAC5B;AAAA,YAEA,sDAAC,iBAAc;AAAA;AAAA,QACjB,IAEA,4EACE;AAAA,sDAAC,SAAI,OAAM,KAAI,QAAO,KACnB,uBAAa;AAAA,YACZ,2BAA2B,CAAC,QAAQ,QAAQ,MAAM;AAAA,YAClD,0BAA0B,CAAC,QAAQ,QAAQ,MAAM;AAAA,YACjD,kCAAkC,CAAC,QAAQ,QAAQ,MAAM;AAAA,YACzD,iCAAiC,CAAC,QAAQ,QAAQ,MAAM;AAAA,YACxD,uCAAuC,CAAC,WAAW,WAAW,SAAS;AAAA,YACvE,sCAAsC,CAAC,WAAW,WAAW,SAAS;AAAA,UACxE,CAAC,GACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,WAAW,OAAO;AAAA,cAC3B,WAAW;AAAA,gBACT;AAAA,oBACC,6BAAc,IAAI,MAAM,QAAQ,IAC7B,wGACA,6BAAc,IAAI,MAAM,aAAa,IACnC,8GACA;AAAA,cAER;AAAA;AAAA,UACF;AAAA,WACF,GAEJ;AAAA,QACA,4CAAC,SAAI,WAAU,sIACZ,cAAI,UAAU,YACb;AAAA,UAAC;AAAA;AAAA,YAAI,WAAW;AAAA,cACd;AAAA,cACA,WACI,8BACA,IAAI,UAAU,UACZ,0BACA;AAAA,YACN;AAAA,YAEC,cAAI;AAAA;AAAA,QACP,GAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}