npm - @powerhousedao/design-system - Versions diffs - 1.25.0 → 1.26.0 - Mend

@powerhousedao/design-system 1.25.0 → 1.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/dist/connect/components/modal/settings-modal/settings-modal.js CHANGED Viewed

@@ -7,8 +7,8 @@ const j = (c) => {
   const {
     body: m,
     title: o,
-    onSave: n,
-    children: d,
+    onSave: d,
+    children: n,
     saveLabel: x,
     cancelLabel: f,
     overlayProps: l,
@@ -42,7 +42,7 @@ const j = (c) => {
           )
         ] }),
         /* @__PURE__ */ e("div", { className: "mt-8 flex min-h-[50px] items-center justify-center rounded-md bg-slate-50 p-3 text-xs font-medium text-gray-600", children: m }),
-        /* @__PURE__ */ e("div", { className: "mt-4 flex flex-col gap-y-4", children: d }),
+        /* @__PURE__ */ e("div", { className: "mt-4 flex flex-col gap-y-4", children: n }),
         /* @__PURE__ */ r("div", { className: "mt-4 flex justify-end gap-x-4", children: [
           /* @__PURE__ */ e(
             i,
@@ -53,13 +53,13 @@ const j = (c) => {
               children: f
             }
           ),
-          /* @__PURE__ */ e(i, { onClick: n, children: x })
+          /* @__PURE__ */ e(i, { onClick: d, children: x })
         ] })
       ] })
     }
   );
 };
 export {
-  j as SettingsModal
+  j as SettingsModalOld
 };
 //# sourceMappingURL=settings-modal.js.map

package/dist/connect/components/modal/settings-modal/settings-modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"settings-modal.js","sources":["../../../../../src/connect/components/modal/settings-modal/settings-modal.tsx"],"sourcesContent":["import { Button, Icon, Modal } from \"@/powerhouse\";\nimport React, { ComponentPropsWithoutRef } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport type ~~SettingsModalProps~~ = ComponentPropsWithoutRef<typeof Modal> & {\n readonly title: React.ReactNode;\n readonly body: React.ReactNode;\n readonly cancelLabel: string;\n readonly saveLabel: string;\n readonly onSave: () => void;\n};\n\nexport const ~~SettingsModal~~: React.FC<~~SettingsModalProps~~> = (props) => {\n const {\n body,\n title,\n onSave,\n children,\n saveLabel,\n cancelLabel,\n overlayProps,\n contentProps,\n onOpenChange,\n ...restProps\n } = props;\n\n return (\n <Modal\n contentProps={{\n ...contentProps,\n className: twMerge(\"rounded-2xl\", contentProps?.className),\n }}\n onOpenChange={onOpenChange}\n overlayProps={{\n ...overlayProps,\n className: twMerge(\"top-10\", overlayProps?.className),\n }}\n {...restProps}\n >\n <div className=\"w-[432px] p-4 text-gray-900\">\n <div className=\"flex justify-between\">\n <h1 className=\"text-center text-xl font-bold\">{title}</h1>\n <button\n className=\"flex size-8 items-center justify-center rounded-md bg-gray-100 text-gray-500 outline-none hover:text-gray-900\"\n onClick={() => onOpenChange?.(false)}\n >\n <Icon name=\"XmarkLight\" size={24} />\n </button>\n </div>\n <div className=\"mt-8 flex min-h-[50px] items-center justify-center rounded-md bg-slate-50 p-3 text-xs font-medium text-gray-600\">\n {body}\n </div>\n <div className=\"mt-4 flex flex-col gap-y-4\">{children}</div>\n <div className=\"mt-4 flex justify-end gap-x-4\">\n <Button\n className=\"text-gray-900\"\n color=\"light\"\n onClick={() => onOpenChange?.(false)}\n >\n {cancelLabel}\n </Button>\n <Button onClick={onSave}>{saveLabel}</Button>\n </div>\n </div>\n </Modal>\n );\n};\n"],"names":["~~SettingsModal~~","props","body","title","onSave","children","saveLabel","cancelLabel","overlayProps","contentProps","onOpenChange","restProps","jsx","Modal","twMerge","jsxs","Icon","Button"],"mappings":";;;;;AAYa,MAAAA,~~IAA8C~~,CAACC,MAAU;~~AAC9D~~,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDV;AAGF,SAAA,gBAAAW;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,cAAc;AAAA,QACZ,GAAGJ;AAAA,QACH,WAAWK,EAAQ,eAAeL,KAAA,gBAAAA,EAAc,SAAS;AAAA,MAC3D;AAAA,MACA,cAAAC;AAAA,MACA,cAAc;AAAA,QACZ,GAAGF;AAAA,QACH,WAAWM,EAAQ,UAAUN,KAAA,gBAAAA,EAAc,SAAS;AAAA,MACtD;AAAA,MACC,GAAGG;AAAA,MAEJ,UAAA,gBAAAI,EAAC,OAAI,EAAA,WAAU,+BACb,UAAA;AAAA,QAAC,gBAAAA,EAAA,OAAA,EAAI,WAAU,wBACb,UAAA;AAAA,UAAC,gBAAAH,EAAA,MAAA,EAAG,WAAU,iCAAiC,UAAMT,GAAA;AAAA,UACrD,gBAAAS;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAS,MAAMF,KAAA,gBAAAA,EAAe;AAAA,cAE9B,UAAC,gBAAAE,EAAAI,GAAA,EAAK,MAAK,cAAa,MAAM,GAAI,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACpC,GACF;AAAA,QACC,gBAAAJ,EAAA,OAAA,EAAI,WAAU,mHACZ,UACHV,GAAA;AAAA,QACC,gBAAAU,EAAA,OAAA,EAAI,WAAU,8BAA8B,UAAAP,EAAS,CAAA;AAAA,QACtD,gBAAAU,EAAC,OAAI,EAAA,WAAU,iCACb,UAAA;AAAA,UAAA,gBAAAH;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAM;AAAA,cACN,SAAS,MAAMP,KAAA,gBAAAA,EAAe;AAAA,cAE7B,UAAAH;AAAA,YAAA;AAAA,UACH;AAAA,UACC,gBAAAK,EAAAK,GAAA,EAAO,SAASb,GAAS,UAAUE,EAAA,CAAA;AAAA,QAAA,EACtC,CAAA;AAAA,MAAA,EACF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
1	+ {"version":3,"file":"settings-modal.js","sources":["../../../../../src/connect/components/modal/settings-modal/settings-modal.tsx"],"sourcesContent":["import { Button, Icon, Modal } from \"@/powerhouse\";\nimport React, { ComponentPropsWithoutRef } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport type SettingsModalOldProps = ComponentPropsWithoutRef<typeof Modal> & {\n readonly title: React.ReactNode;\n readonly body: React.ReactNode;\n readonly cancelLabel: string;\n readonly saveLabel: string;\n readonly onSave: () => void;\n};\n\nexport const SettingsModalOld: React.FC<SettingsModalOldProps> = (props) => {\n const {\n body,\n title,\n onSave,\n children,\n saveLabel,\n cancelLabel,\n overlayProps,\n contentProps,\n onOpenChange,\n ...restProps\n } = props;\n\n return (\n <Modal\n contentProps={{\n ...contentProps,\n className: twMerge(\"rounded-2xl\", contentProps?.className),\n }}\n onOpenChange={onOpenChange}\n overlayProps={{\n ...overlayProps,\n className: twMerge(\"top-10\", overlayProps?.className),\n }}\n {...restProps}\n >\n <div className=\"w-[432px] p-4 text-gray-900\">\n <div className=\"flex justify-between\">\n <h1 className=\"text-center text-xl font-bold\">{title}</h1>\n <button\n className=\"flex size-8 items-center justify-center rounded-md bg-gray-100 text-gray-500 outline-none hover:text-gray-900\"\n onClick={() => onOpenChange?.(false)}\n >\n <Icon name=\"XmarkLight\" size={24} />\n </button>\n </div>\n <div className=\"mt-8 flex min-h-[50px] items-center justify-center rounded-md bg-slate-50 p-3 text-xs font-medium text-gray-600\">\n {body}\n </div>\n <div className=\"mt-4 flex flex-col gap-y-4\">{children}</div>\n <div className=\"mt-4 flex justify-end gap-x-4\">\n <Button\n className=\"text-gray-900\"\n color=\"light\"\n onClick={() => onOpenChange?.(false)}\n >\n {cancelLabel}\n </Button>\n <Button onClick={onSave}>{saveLabel}</Button>\n </div>\n </div>\n </Modal>\n );\n};\n"],"names":["SettingsModalOld","props","body","title","onSave","children","saveLabel","cancelLabel","overlayProps","contentProps","onOpenChange","restProps","jsx","Modal","twMerge","jsxs","Icon","Button"],"mappings":";;;;;AAYa,MAAAA,IAAoD,CAACC,MAAU;AACpE,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDV;AAGF,SAAA,gBAAAW;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,cAAc;AAAA,QACZ,GAAGJ;AAAA,QACH,WAAWK,EAAQ,eAAeL,KAAA,gBAAAA,EAAc,SAAS;AAAA,MAC3D;AAAA,MACA,cAAAC;AAAA,MACA,cAAc;AAAA,QACZ,GAAGF;AAAA,QACH,WAAWM,EAAQ,UAAUN,KAAA,gBAAAA,EAAc,SAAS;AAAA,MACtD;AAAA,MACC,GAAGG;AAAA,MAEJ,UAAA,gBAAAI,EAAC,OAAI,EAAA,WAAU,+BACb,UAAA;AAAA,QAAC,gBAAAA,EAAA,OAAA,EAAI,WAAU,wBACb,UAAA;AAAA,UAAC,gBAAAH,EAAA,MAAA,EAAG,WAAU,iCAAiC,UAAMT,GAAA;AAAA,UACrD,gBAAAS;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAS,MAAMF,KAAA,gBAAAA,EAAe;AAAA,cAE9B,UAAC,gBAAAE,EAAAI,GAAA,EAAK,MAAK,cAAa,MAAM,GAAI,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACpC,GACF;AAAA,QACC,gBAAAJ,EAAA,OAAA,EAAI,WAAU,mHACZ,UACHV,GAAA;AAAA,QACC,gBAAAU,EAAA,OAAA,EAAI,WAAU,8BAA8B,UAAAP,EAAS,CAAA;AAAA,QACtD,gBAAAU,EAAC,OAAI,EAAA,WAAU,iCACb,UAAA;AAAA,UAAA,gBAAAH;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAM;AAAA,cACN,SAAS,MAAMP,KAAA,gBAAAA,EAAe;AAAA,cAE7B,UAAAH;AAAA,YAAA;AAAA,UACH;AAAA,UACC,gBAAAK,EAAAK,GAAA,EAAO,SAASb,GAAS,UAAUE,EAAA,CAAA;AAAA,QAAA,EACtC,CAAA;AAAA,MAAA,EACF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/connect/components/modal/settings-modal-v2/about.js ADDED Viewed

@@ -0,0 +1,14 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { DependencyVersions as o } from "../settings-modal/dependency-versions/dependency-versions.js";
+function c(e) {
+  const { packageJson: s } = e;
+  return /* @__PURE__ */ n("div", { className: "bg-white p-3", children: [
+    /* @__PURE__ */ t("h2", { className: "font-semibold", children: "About" }),
+    /* @__PURE__ */ t("p", { className: "text-sm font-normal text-gray-600", children: "Connect is the hub for your most important documents and processes translated into software. Easily capture data in a structured way with Connect." }),
+    /* @__PURE__ */ t("div", { className: "my-4", children: /* @__PURE__ */ t(o, { packageJson: s }) })
+  ] });
+}
+export {
+  c as About
+};
+//# sourceMappingURL=about.js.map

package/dist/connect/components/modal/settings-modal-v2/about.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"about.js","sources":["../../../../../src/connect/components/modal/settings-modal-v2/about.tsx"],"sourcesContent":["import { DependencyVersions } from \"../settings-modal/dependency-versions/dependency-versions.js\";\n\ntype Props = {\n packageJson: unknown;\n};\nexport function About(props: Props) {\n const { packageJson } = props;\n return (\n <div className=\"bg-white p-3\">\n <h2 className=\"font-semibold\">About</h2>\n <p className=\"text-sm font-normal text-gray-600\">\n Connect is the hub for your most important documents and processes\n translated into software. Easily capture data in a structured way with\n Connect.\n </p>\n <div className=\"my-4\">\n <DependencyVersions packageJson={packageJson} />\n </div>\n </div>\n );\n}\n"],"names":["About","props","packageJson","jsxs","jsx","DependencyVersions"],"mappings":";;AAKO,SAASA,EAAMC,GAAc;AAC5B,QAAA,EAAE,aAAAC,MAAgBD;AAEtB,SAAA,gBAAAE,EAAC,OAAI,EAAA,WAAU,gBACb,UAAA;AAAA,IAAC,gBAAAC,EAAA,MAAA,EAAG,WAAU,iBAAgB,UAAK,SAAA;AAAA,IAClC,gBAAAA,EAAA,KAAA,EAAE,WAAU,qCAAoC,UAIjD,sJAAA;AAAA,sBACC,OAAI,EAAA,WAAU,QACb,UAAC,gBAAAA,EAAAC,GAAA,EAAmB,aAAAH,GAA0B,EAChD,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/connect/components/modal/settings-modal-v2/danger-zone.js ADDED Viewed

@@ -0,0 +1,130 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { Icon as s } from "../../../../powerhouse/components/icon/icon.js";
+import { capitalCase as l } from "change-case";
+import { useState as x } from "react";
+import { ConnectDropdownMenu as v } from "../../dropdown-menu/dropdown-menu.js";
+import { cn as m } from "../../../../scalars/lib/utils.js";
+import { PUBLIC as C, CLOUD as N } from "../../../constants/drives.js";
+function T(r) {
+  const { className: n, ...o } = r;
+  return /* @__PURE__ */ t("div", { className: m("h-full rounded-lg bg-white p-3", n), children: [
+    /* @__PURE__ */ e("h2", { className: "mb-4 font-semibold", children: "Modify Drives" }),
+    /* @__PURE__ */ e(b, { ...o }),
+    /* @__PURE__ */ e("h2", { className: "my-4 font-semibold", children: "Local Storage" }),
+    /* @__PURE__ */ e(w, { ...o })
+  ] });
+}
+function b(r) {
+  const { className: n, ...o } = r;
+  return /* @__PURE__ */ e("div", { className: n, children: /* @__PURE__ */ e(y, { ...o }) });
+}
+function y(r) {
+  const { className: n, ...o } = r;
+  return /* @__PURE__ */ e("div", { className: n, children: r.drives.map((i) => /* @__PURE__ */ e(D, { drive: i, ...o }, i.id)) });
+}
+function D(r) {
+  const { drive: n, className: o, onDeleteDrive: i } = r, [d, c] = x(!1), p = /* @__PURE__ */ e(s, { name: "Hdd", size: 16, className: "flex-none" }), g = /* @__PURE__ */ e(s, { name: "Server", size: 16, className: "flex-none" }), u = "icon" in n && n.icon ? /* @__PURE__ */ e(
+    "img",
+    {
+      alt: "drive icon",
+      className: "size-4 flex-none object-contain",
+      src: n.icon
+    }
+  ) : /* @__PURE__ */ e(s, { name: "M", size: 16, className: "flex-none" });
+  function f() {
+    return n.sharingType === C ? u : n.sharingType === N ? g : p;
+  }
+  const h = f();
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: m(
+        "mb-4 flex w-96 items-center gap-2 rounded-md border border-gray-200 bg-gray-50 px-3 py-2 shadow-sm last-of-type:mb-0",
+        o
+      ),
+      children: [
+        h,
+        /* @__PURE__ */ t("div", { children: [
+          /* @__PURE__ */ e("span", { className: "block text-sm font-medium leading-[18px]", children: l(n.name) }),
+          /* @__PURE__ */ t("div", { className: "flex items-baseline gap-x-2 leading-[18px]", children: [
+            /* @__PURE__ */ t("span", { className: "text-sm text-gray-600", children: [
+              l(n.sharingType),
+              " App"
+            ] }),
+            /* @__PURE__ */ t("a", { className: "group flex items-center gap-x-2 text-sm text-slate-500 transition-colors hover:text-[#9896FF]", children: [
+              "By Powerhouse",
+              /* @__PURE__ */ e(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 12 12",
+                  className: "size-4 text-gray-400 transition-colors group-hover:text-inherit",
+                  children: /* @__PURE__ */ e(
+                    "path",
+                    {
+                      d: "M7.99365 11.9939C9.46632 11.9939 10.6603 10.7999 10.6603 9.32722V7.32722C10.6603 6.95922 10.3617 6.66056 9.99365 6.66056C9.62565 6.66056 9.32699 6.95922 9.32699 7.32722V9.32722C9.32699 10.0639 8.73032 10.6606 7.99365 10.6606H2.66032C1.92365 10.6606 1.32699 10.0639 1.32699 9.32722V3.99389C1.32699 3.25723 1.92365 2.66056 2.66032 2.66056H4.66032C5.02832 2.66056 5.32699 2.36189 5.32699 1.99389C5.32699 1.6259 5.02832 1.32723 4.66032 1.32723H2.66032C1.18765 1.32723 -0.00634766 2.52123 -0.00634766 3.99389V9.32722C-0.00634766 10.7999 1.18765 11.9939 2.66032 11.9939H7.99365ZM5.32699 7.32722C5.49765 7.32722 5.67565 7.26989 5.80632 7.13989L10.1396 2.80656L11.9937 4.66056V-0.00610352H7.32699L9.18099 1.8479L4.84766 6.18123C4.58766 6.4419 4.58766 6.87922 4.84766 7.13989C4.97832 7.26989 5.15632 7.32722 5.32699 7.32722Z",
+                      fill: "currentColor"
+                    }
+                  )
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ e(
+          v,
+          {
+            items: [
+              {
+                id: "delete-drive",
+                label: "Delete",
+                icon: /* @__PURE__ */ e(s, { name: "Trash" }),
+                className: "text-red-900"
+              }
+            ],
+            onItemClick: (a) => {
+              a === "delete-drive" && i(n);
+            },
+            onOpenChange: c,
+            open: d,
+            children: /* @__PURE__ */ e(
+              "button",
+              {
+                className: "group ml-auto flex-none",
+                onClick: (a) => {
+                  a.stopPropagation(), c(!0);
+                },
+                children: /* @__PURE__ */ e(
+                  s,
+                  {
+                    className: "text-gray-600 group-hover:text-gray-900",
+                    name: "VerticalDots",
+                    size: 16
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function w(r) {
+  const { onClearStorage: n } = r;
+  return /* @__PURE__ */ e("div", { children: /* @__PURE__ */ t(
+    "button",
+    {
+      className: "flex items-center gap-x-2 rounded-md border border-gray-300 bg-transparent px-3 py-1 text-sm font-medium text-red-900 transition-colors hover:bg-gray-100",
+      onClick: n,
+      children: [
+        "Clear Storage ",
+        /* @__PURE__ */ e(s, { name: "Trash", size: 16 })
+      ]
+    }
+  ) });
+}
+export {
+  T as DangerZone
+};
+//# sourceMappingURL=danger-zone.js.map

package/dist/connect/components/modal/settings-modal-v2/danger-zone.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"danger-zone.js","sources":["../../../../../src/connect/components/modal/settings-modal-v2/danger-zone.tsx"],"sourcesContent":["import { CLOUD, PUBLIC } from \"@/connect/constants\";\nimport { UiDriveNode } from \"@/connect/types/nodes.js\";\nimport { Icon } from \"@/powerhouse/components/icon/icon.js\";\nimport { cn } from \"@/scalars\";\nimport { capitalCase } from \"change-case\";\nimport { useState } from \"react\";\nimport { ConnectDropdownMenu } from \"../../dropdown-menu/dropdown-menu.js\";\n\ntype ModifyDrivesProps = {\n drives: UiDriveNode[];\n onDeleteDrive: (uiDriveNode: UiDriveNode) => void;\n className?: string;\n};\n\ntype LocalStorageProps = {\n onClearStorage: () => void | Promise<void>;\n className?: string;\n};\n\ntype Props = ModifyDrivesProps & LocalStorageProps;\n\nexport function DangerZone(props: Props) {\n const { className, ...rest } = props;\n return (\n <div className={cn(\"h-full rounded-lg bg-white p-3\", className)}>\n <h2 className=\"mb-4 font-semibold\">Modify Drives</h2>\n <ModifyDrives {...rest} />\n <h2 className=\"my-4 font-semibold\">Local Storage</h2>\n <LocalStorage {...rest} />\n </div>\n );\n}\n\nfunction ModifyDrives(props: ModifyDrivesProps) {\n const { className, ...rest } = props;\n return (\n <div className={className}>\n <DriveList {...rest} />\n </div>\n );\n}\n\nfunction DriveList(props: ModifyDrivesProps) {\n const { className, ...rest } = props;\n return (\n <div className={className}>\n {props.drives.map((drive) => (\n <Drive key={drive.id} drive={drive} {...rest} />\n ))}\n </div>\n );\n}\n\nfunction Drive(props: ModifyDrivesProps & { drive: UiDriveNode }) {\n const { drive, className, onDeleteDrive } = props;\n const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false);\n const localDriveIcon = <Icon name=\"Hdd\" size={16} className=\"flex-none\" />;\n\n const cloudDriveIcon = <Icon name=\"Server\" size={16} className=\"flex-none\" />;\n\n const publicDriveIcon =\n \"icon\" in drive && !!drive.icon ? (\n <img\n alt=\"drive icon\"\n className=\"size-4 flex-none object-contain\"\n src={drive.icon}\n />\n ) : (\n <Icon name=\"M\" size={16} className=\"flex-none\" />\n );\n\n function getNodeIcon() {\n if (drive.sharingType === PUBLIC) {\n return publicDriveIcon;\n }\n if (drive.sharingType === CLOUD) {\n return cloudDriveIcon;\n }\n return localDriveIcon;\n }\n\n const icon = getNodeIcon();\n\n return (\n <div\n className={cn(\n \"mb-4 flex w-96 items-center gap-2 rounded-md border border-gray-200 bg-gray-50 px-3 py-2 shadow-sm last-of-type:mb-0\",\n className,\n )}\n >\n {icon}\n <div>\n <span className=\"block text-sm font-medium leading-[18px]\">\n {capitalCase(drive.name)}\n </span>\n <div className=\"flex items-baseline gap-x-2 leading-[18px]\">\n <span className=\"text-sm text-gray-600\">\n {capitalCase(drive.sharingType)} App\n </span>\n <a className=\"group flex items-center gap-x-2 text-sm text-slate-500 transition-colors hover:text-[#9896FF]\">\n By Powerhouse\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 12 12\"\n className=\"size-4 text-gray-400 transition-colors group-hover:text-inherit\"\n >\n <path\n d=\"M7.99365 11.9939C9.46632 11.9939 10.6603 10.7999 10.6603 9.32722V7.32722C10.6603 6.95922 10.3617 6.66056 9.99365 6.66056C9.62565 6.66056 9.32699 6.95922 9.32699 7.32722V9.32722C9.32699 10.0639 8.73032 10.6606 7.99365 10.6606H2.66032C1.92365 10.6606 1.32699 10.0639 1.32699 9.32722V3.99389C1.32699 3.25723 1.92365 2.66056 2.66032 2.66056H4.66032C5.02832 2.66056 5.32699 2.36189 5.32699 1.99389C5.32699 1.6259 5.02832 1.32723 4.66032 1.32723H2.66032C1.18765 1.32723 -0.00634766 2.52123 -0.00634766 3.99389V9.32722C-0.00634766 10.7999 1.18765 11.9939 2.66032 11.9939H7.99365ZM5.32699 7.32722C5.49765 7.32722 5.67565 7.26989 5.80632 7.13989L10.1396 2.80656L11.9937 4.66056V-0.00610352H7.32699L9.18099 1.8479L4.84766 6.18123C4.58766 6.4419 4.58766 6.87922 4.84766 7.13989C4.97832 7.26989 5.15632 7.32722 5.32699 7.32722Z\"\n fill=\"currentColor\"\n />\n </svg>\n </a>\n </div>\n </div>\n <ConnectDropdownMenu\n items={[\n {\n id: \"delete-drive\",\n label: \"Delete\",\n icon: <Icon name=\"Trash\" />,\n className: \"text-red-900\",\n },\n ]}\n onItemClick={(id) => {\n if (id === \"delete-drive\") {\n onDeleteDrive(drive);\n }\n }}\n onOpenChange={setIsDropdownMenuOpen}\n open={isDropdownMenuOpen}\n >\n <button\n className=\"group ml-auto flex-none\"\n onClick={(e) => {\n e.stopPropagation();\n setIsDropdownMenuOpen(true);\n }}\n >\n <Icon\n className=\"text-gray-600 group-hover:text-gray-900\"\n name=\"VerticalDots\"\n size={16}\n />\n </button>\n </ConnectDropdownMenu>\n </div>\n );\n}\n\nfunction LocalStorage(props: LocalStorageProps) {\n const { onClearStorage } = props;\n return (\n <div>\n <button\n className=\"flex items-center gap-x-2 rounded-md border border-gray-300 bg-transparent px-3 py-1 text-sm font-medium text-red-900 transition-colors hover:bg-gray-100\"\n onClick={onClearStorage}\n >\n Clear Storage <Icon name=\"Trash\" size={16} />\n </button>\n </div>\n );\n}\n"],"names":["DangerZone","props","className","rest","cn","jsx","ModifyDrives","LocalStorage","DriveList","drive","Drive","onDeleteDrive","isDropdownMenuOpen","setIsDropdownMenuOpen","useState","localDriveIcon","Icon","cloudDriveIcon","publicDriveIcon","getNodeIcon","PUBLIC","CLOUD","icon","jsxs","capitalCase","ConnectDropdownMenu","id","e","onClearStorage"],"mappings":"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"}

package/dist/connect/components/modal/settings-modal-v2/default-editor.js ADDED Viewed

@@ -0,0 +1,35 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { SelectFieldRaw as s } from "../../../../scalars/components/fragments/select-field/select-field.js";
+import { twMerge as i } from "tailwind-merge";
+function p(t) {
+  const { className: o, ...r } = t;
+  return /* @__PURE__ */ e("div", { className: i("rounded-lg p-3", o), children: /* @__PURE__ */ e(m, { ...r }) });
+}
+function m(t) {
+  const {
+    documentModelEditor: o,
+    setDocumentModelEditor: r,
+    documentModelEditorOptions: l,
+    className: d
+  } = t;
+  return /* @__PURE__ */ a("div", { children: [
+    /* @__PURE__ */ e("h3", { className: "mb-4 font-semibold text-gray-900", children: "Default Editor Selection" }),
+    /* @__PURE__ */ e(
+      s,
+      {
+        className: i("min-w-36 max-w-fit", d),
+        name: "default-editor",
+        required: !0,
+        value: o,
+        options: l,
+        multiple: !1,
+        onChange: (n) => r(n)
+      }
+    )
+  ] });
+}
+export {
+  p as DefaultEditor,
+  m as DefaultEditorSelect
+};
+//# sourceMappingURL=default-editor.js.map

package/dist/connect/components/modal/settings-modal-v2/default-editor.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"default-editor.js","sources":["../../../../../src/connect/components/modal/settings-modal-v2/default-editor.tsx"],"sourcesContent":["import type { SelectOption } from \"@/scalars/components/enum-field/types.js\";\nimport { SelectFieldRaw } from \"@/scalars/components/fragments/select-field/select-field.js\";\nimport { twMerge } from \"tailwind-merge\";\n\ntype Props = {\n documentModelEditor: string;\n setDocumentModelEditor: (value: string) => void;\n documentModelEditorOptions: SelectOption[];\n className?: string;\n};\n\nexport function DefaultEditor(props: Props) {\n const { className, ...rest } = props;\n return (\n <div className={twMerge(\"rounded-lg p-3\", className)}>\n <DefaultEditorSelect {...rest} />\n </div>\n );\n}\n\nexport function DefaultEditorSelect(props: Props) {\n const {\n documentModelEditor,\n setDocumentModelEditor,\n documentModelEditorOptions,\n className,\n } = props;\n\n return (\n <div>\n <h3 className=\"mb-4 font-semibold text-gray-900\">\n Default Editor Selection\n </h3>\n <SelectFieldRaw\n className={twMerge(\"min-w-36 max-w-fit\", className)}\n name=\"default-editor\"\n required\n value={documentModelEditor}\n options={documentModelEditorOptions}\n multiple={false}\n onChange={(value) => setDocumentModelEditor(value as string)}\n />\n </div>\n );\n}\n"],"names":["DefaultEditor","props","className","rest","jsx","twMerge","DefaultEditorSelect","documentModelEditor","setDocumentModelEditor","documentModelEditorOptions","SelectFieldRaw","value"],"mappings":";;;AAWO,SAASA,EAAcC,GAAc;AAC1C,QAAM,EAAE,WAAAC,GAAW,GAAGC,EAAA,IAASF;AAE7B,SAAA,gBAAAG,EAAC,OAAI,EAAA,WAAWC,EAAQ,kBAAkBH,CAAS,GACjD,UAAC,gBAAAE,EAAAE,GAAA,EAAqB,GAAGH,EAAA,CAAM,EACjC,CAAA;AAEJ;AAEO,SAASG,EAAoBL,GAAc;AAC1C,QAAA;AAAA,IACJ,qBAAAM;AAAA,IACA,wBAAAC;AAAA,IACA,4BAAAC;AAAA,IACA,WAAAP;AAAA,EAAA,IACED;AAEJ,2BACG,OACC,EAAA,UAAA;AAAA,IAAC,gBAAAG,EAAA,MAAA,EAAG,WAAU,oCAAmC,UAEjD,4BAAA;AAAA,IACA,gBAAAA;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,WAAWL,EAAQ,sBAAsBH,CAAS;AAAA,QAClD,MAAK;AAAA,QACL,UAAQ;AAAA,QACR,OAAOK;AAAA,QACP,SAASE;AAAA,QACT,UAAU;AAAA,QACV,UAAU,CAACE,MAAUH,EAAuBG,CAAe;AAAA,MAAA;AAAA,IAAA;AAAA,EAC7D,GACF;AAEJ;"}

package/dist/connect/components/modal/settings-modal-v2/package-manager/package-manager-input.js ADDED Viewed

@@ -0,0 +1,42 @@
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import { useState as r, useCallback as g } from "react";
+import { Input as x } from "../../../../../scalars/components/fragments/input/input.js";
+import { Button as b } from "../../../../../powerhouse/components/button/button.js";
+const y = (u) => {
+  const { onInstall: l, className: h } = u, [s, n] = r(""), [o, c] = r(!1), [e, m] = r(), i = g(() => {
+    const t = l(s);
+    t ? (c(!0), t.then(() => n("")).catch(m).finally(() => c(!1))) : (n(""), m(void 0));
+  }, [l, s]), f = g((t) => {
+    n(t.target.value);
+  }, []), p = e ? typeof e == "string" ? e : e instanceof Error ? e.message : e : " ";
+  return /* @__PURE__ */ d("div", { className: h, children: [
+    /* @__PURE__ */ a("h3", { className: "mb-4 font-semibold text-gray-900", children: "Install Package" }),
+    /* @__PURE__ */ d("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ a(
+        x,
+        {
+          name: "package",
+          className: "max-w-xs text-gray-700",
+          value: s,
+          onChange: f,
+          onSubmit: i,
+          disabled: o
+        }
+      ),
+      /* @__PURE__ */ a(
+        b,
+        {
+          className: "h-9 rounded-md text-sm",
+          onClick: i,
+          disabled: o,
+          children: "Install"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a("p", { className: "mb-3 ml-2 h-3 text-sm text-red-800", children: p })
+  ] });
+};
+export {
+  y as PackageManagerInput
+};
+//# sourceMappingURL=package-manager-input.js.map

package/dist/connect/components/modal/settings-modal-v2/package-manager/package-manager-input.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"package-manager-input.js","sources":["../../../../../../src/connect/components/modal/settings-modal-v2/package-manager/package-manager-input.tsx"],"sourcesContent":["import { Button } from \"@/powerhouse/components/button\";\nimport { Input } from \"@/scalars/components/fragments/input\";\nimport { useCallback, useState } from \"react\";\n\nexport type PackageManagerInputProps = {\n onInstall: (value: string) => void | Promise<void>;\n className?: string;\n};\nexport const PackageManagerInput: React.FC<PackageManagerInputProps> = (\n props: PackageManagerInputProps,\n) => {\n const { onInstall, className } = props;\n\n const [value, setValue] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState<unknown>();\n\n const handleSubmit = useCallback(() => {\n const result = onInstall(value);\n if (result) {\n setLoading(true);\n result\n .then(() => setValue(\"\"))\n .catch(setError)\n .finally(() => setLoading(false));\n } else {\n setValue(\"\");\n setError(undefined);\n }\n }, [onInstall, value]);\n\n const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n setValue(e.target.value);\n }, []);\n\n const errorMessage = !error\n ? \" \"\n : typeof error === \"string\"\n ? error\n : error instanceof Error\n ? error.message\n : (error as string);\n\n return (\n <div className={className}>\n <h3 className=\"mb-4 font-semibold text-gray-900\">Install Package</h3>\n <div className=\"flex items-center gap-4\">\n <Input\n name=\"package\"\n className=\"max-w-xs text-gray-700\"\n value={value}\n onChange={handleChange}\n onSubmit={handleSubmit}\n disabled={loading}\n />\n <Button\n className=\"h-9 rounded-md text-sm\"\n onClick={handleSubmit}\n disabled={loading}\n >\n Install\n </Button>\n </div>\n <p className=\"mb-3 ml-2 h-3 text-sm text-red-800\">{errorMessage}</p>\n </div>\n );\n};\n"],"names":["PackageManagerInput","props","onInstall","className","value","setValue","useState","loading","setLoading","error","setError","handleSubmit","useCallback","result","handleChange","e","errorMessage","jsxs","jsx","Input","Button"],"mappings":";;;;AAQa,MAAAA,IAA0D,CACrEC,MACG;AACG,QAAA,EAAE,WAAAC,GAAW,WAAAC,EAAA,IAAcF,GAE3B,CAACG,GAAOC,CAAQ,IAAIC,EAAS,EAAE,GAC/B,CAACC,GAASC,CAAU,IAAIF,EAAS,EAAK,GACtC,CAACG,GAAOC,CAAQ,IAAIJ,EAAkB,GAEtCK,IAAeC,EAAY,MAAM;AAC/B,UAAAC,IAASX,EAAUE,CAAK;AAC9B,IAAIS,KACFL,EAAW,EAAI,GACfK,EACG,KAAK,MAAMR,EAAS,EAAE,CAAC,EACvB,MAAMK,CAAQ,EACd,QAAQ,MAAMF,EAAW,EAAK,CAAC,MAElCH,EAAS,EAAE,GACXK,EAAS,MAAS;AAAA,EACpB,GACC,CAACR,GAAWE,CAAK,CAAC,GAEfU,IAAeF,EAAY,CAACG,MAA2C;AAClE,IAAAV,EAAAU,EAAE,OAAO,KAAK;AAAA,EACzB,GAAG,EAAE,GAECC,IAAgBP,IAElB,OAAOA,KAAU,WACfA,IACAA,aAAiB,QACfA,EAAM,UACLA,IALL;AAQF,SAAA,gBAAAQ,EAAC,SAAI,WAAAd,GACH,UAAA;AAAA,IAAC,gBAAAe,EAAA,MAAA,EAAG,WAAU,oCAAmC,UAAe,mBAAA;AAAA,IAChE,gBAAAD,EAAC,OAAI,EAAA,WAAU,2BACb,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,OAAAf;AAAA,UACA,UAAUU;AAAA,UACV,UAAUH;AAAA,UACV,UAAUJ;AAAA,QAAA;AAAA,MACZ;AAAA,MACA,gBAAAW;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAST;AAAA,UACT,UAAUJ;AAAA,UACX,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED,GACF;AAAA,IACC,gBAAAW,EAAA,KAAA,EAAE,WAAU,sCAAsC,UAAaF,EAAA,CAAA;AAAA,EAAA,GAClE;AAEJ;"}

package/dist/connect/components/modal/settings-modal-v2/package-manager/package-manager-list.js ADDED Viewed

@@ -0,0 +1,123 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { useCallback as v, useState as y } from "react";
+import { twMerge as u } from "tailwind-merge";
+import { ConnectDropdownMenu as k } from "../../../dropdown-menu/dropdown-menu.js";
+import { Icon as h } from "../../../../../powerhouse/components/icon/icon.js";
+const i = ({
+  label: s,
+  value: t
+}) => /* @__PURE__ */ o("div", { className: "flex items-start gap-2 text-sm", children: [
+  /* @__PURE__ */ o("p", { className: "text-gray-600", children: [
+    s,
+    ":"
+  ] }),
+  /* @__PURE__ */ e("p", { className: "text-gray-600", children: t })
+] }), w = (s) => {
+  const {
+    package: {
+      name: t,
+      description: c,
+      category: r,
+      publisher: m,
+      publisherUrl: n,
+      modules: d,
+      id: a,
+      removable: g
+    },
+    mutable: x,
+    onUninstall: b,
+    className: f
+  } = s, [N, p] = y(!1);
+  return /* @__PURE__ */ o(
+    "li",
+    {
+      className: u(
+        "relative flex flex-col items-start rounded-md border border-gray-200 p-3 text-sm leading-5 shadow-sm",
+        f
+      ),
+      children: [
+        /* @__PURE__ */ e("h3", { className: "font-semibold text-gray-900", children: t }),
+        /* @__PURE__ */ e(i, { label: "Description", value: c }),
+        /* @__PURE__ */ e(i, { label: "Category", value: r }),
+        /* @__PURE__ */ e(i, { label: "Publisher", value: m }),
+        /* @__PURE__ */ e(
+          i,
+          {
+            label: "Publisher URL",
+            value: /* @__PURE__ */ e("a", { className: "underline", href: n, children: n })
+          }
+        ),
+        /* @__PURE__ */ e("p", { className: "text-sm text-gray-600", children: "Modules included:" }),
+        /* @__PURE__ */ e("ul", { className: "list-disc pl-5", children: d.map((l) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e("span", { className: "text-gray-600", children: l }) }, l)) }),
+        x && g && /* @__PURE__ */ e(
+          k,
+          {
+            items: [
+              {
+                id: "uninstall",
+                label: "Uninstall",
+                icon: /* @__PURE__ */ e(h, { name: "Trash" }),
+                className: "text-red-900"
+              }
+            ],
+            onItemClick: (l) => {
+              l === "uninstall" && b(a);
+            },
+            onOpenChange: p,
+            open: N,
+            children: /* @__PURE__ */ e(
+              "button",
+              {
+                className: "group absolute right-3 top-3",
+                onClick: (l) => {
+                  l.stopPropagation(), p(!0);
+                },
+                children: /* @__PURE__ */ e(
+                  h,
+                  {
+                    className: "text-gray-600 group-hover:text-gray-900",
+                    name: "VerticalDots"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}, I = (s) => {
+  const { className: t, packages: c, onUninstall: r, mutable: m, ...n } = s, d = v(
+    (a) => {
+      r(a);
+    },
+    [r]
+  );
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      ...n,
+      className: u(
+        "flex flex-col items-stretch overflow-hidden",
+        t
+      ),
+      children: [
+        /* @__PURE__ */ e("h3", { className: "mb-4 font-semibold text-gray-900", children: "Installed Packages" }),
+        /* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto pr-2", children: /* @__PURE__ */ e("ul", { className: "flex flex-col items-stretch gap-4 pr-2", children: c.map((a) => /* @__PURE__ */ e(
+          w,
+          {
+            package: a,
+            onUninstall: d,
+            mutable: m
+          },
+          a.id
+        )) }) })
+      ]
+    }
+  );
+};
+export {
+  I as PackageManagerList,
+  w as PackageManagerListItem
+};
+//# sourceMappingURL=package-manager-list.js.map

package/dist/connect/components/modal/settings-modal-v2/package-manager/package-manager-list.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"package-manager-list.js","sources":["../../../../../../src/connect/components/modal/settings-modal-v2/package-manager/package-manager-list.tsx"],"sourcesContent":["import { ConnectDropdownMenu } from \"@/connect/components/dropdown-menu\";\nimport { Icon } from \"@/powerhouse/components/icon\";\nimport React, { ReactNode, useCallback, useState } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport type PackageDetails = {\n id: string;\n name: string;\n description: string;\n category: string;\n publisher: string;\n publisherUrl: string;\n modules: string[];\n removable: boolean;\n};\n\nexport type PackageManagerListProps = {\n mutable: boolean;\n packages: PackageDetails[];\n onUninstall: (id: string) => void;\n className?: string;\n};\n\nexport type PackageManagerListItemProps = {\n mutable: boolean;\n package: PackageDetails;\n onUninstall: (id: string) => void;\n className?: string;\n};\n\nconst PackageDetail: React.FC<{ label: string; value: ReactNode }> = ({\n label,\n value,\n}) => {\n return (\n <div className=\"flex items-start gap-2 text-sm\">\n <p className=\"text-gray-600\">{label}:</p>\n <p className=\"text-gray-600\">{value}</p>\n </div>\n );\n};\n\nexport const PackageManagerListItem: React.FC<PackageManagerListItemProps> = (\n props,\n) => {\n const {\n package: {\n name,\n description,\n category,\n publisher,\n publisherUrl,\n modules,\n id,\n removable,\n },\n mutable,\n onUninstall,\n className,\n } = props;\n const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false);\n return (\n <li\n className={twMerge(\n \"relative flex flex-col items-start rounded-md border border-gray-200 p-3 text-sm leading-5 shadow-sm\",\n className,\n )}\n >\n <h3 className=\"font-semibold text-gray-900\">{name}</h3>\n <PackageDetail label=\"Description\" value={description} />\n <PackageDetail label=\"Category\" value={category} />\n <PackageDetail label=\"Publisher\" value={publisher} />\n <PackageDetail\n label=\"Publisher URL\"\n value={\n <a className=\"underline\" href={publisherUrl}>\n {publisherUrl}\n </a>\n }\n />\n <p className=\"text-sm text-gray-600\">Modules included:</p>\n <ul className=\"list-disc pl-5\">\n {modules.map((module) => (\n <li key={module}>\n <span className=\"text-gray-600\">{module}</span>\n </li>\n ))}\n </ul>\n {mutable && removable && (\n <ConnectDropdownMenu\n items={[\n {\n id: \"uninstall\",\n label: \"Uninstall\",\n icon: <Icon name=\"Trash\" />,\n className: \"text-red-900\",\n },\n ]}\n onItemClick={(optionId) => {\n if (optionId === \"uninstall\") {\n onUninstall(id);\n }\n }}\n onOpenChange={setIsDropdownMenuOpen}\n open={isDropdownMenuOpen}\n >\n <button\n className=\"group absolute right-3 top-3\"\n onClick={(e) => {\n e.stopPropagation();\n setIsDropdownMenuOpen(true);\n }}\n >\n <Icon\n className=\"text-gray-600 group-hover:text-gray-900\"\n name=\"VerticalDots\"\n />\n </button>\n </ConnectDropdownMenu>\n )}\n </li>\n );\n};\n\nexport const PackageManagerList: React.FC<PackageManagerListProps> = (\n props,\n) => {\n const { className, packages, onUninstall, mutable, ...rest } = props;\n\n const handleUninstall = useCallback(\n (id: string) => {\n onUninstall(id);\n },\n [onUninstall],\n );\n\n return (\n <div\n {...rest}\n className={twMerge(\n \"flex flex-col items-stretch overflow-hidden\",\n className,\n )}\n >\n <h3 className=\"mb-4 font-semibold text-gray-900\">Installed Packages</h3>\n <div className=\"flex-1 overflow-y-auto pr-2\">\n <ul className=\"flex flex-col items-stretch gap-4 pr-2\">\n {packages.map((pkg) => (\n <PackageManagerListItem\n key={pkg.id}\n package={pkg}\n onUninstall={handleUninstall}\n mutable={mutable}\n />\n ))}\n </ul>\n </div>\n </div>\n );\n};\n"],"names":["PackageDetail","label","value","jsxs","jsx","PackageManagerListItem","props","name","description","category","publisher","publisherUrl","modules","id","removable","mutable","onUninstall","className","isDropdownMenuOpen","setIsDropdownMenuOpen","useState","twMerge","module","ConnectDropdownMenu","Icon","optionId","e","PackageManagerList","packages","rest","handleUninstall","useCallback","pkg"],"mappings":"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"}

package/dist/connect/components/modal/settings-modal-v2/package-manager/package-manager-select.js ADDED Viewed

@@ -0,0 +1,30 @@
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { useCallback as l } from "react";
+import { SelectFieldRaw as m } from "../../../../../scalars/components/fragments/select-field/select-field.js";
+const f = (t) => {
+  const { reactorOptions: o, reactor: c, onReactorChange: r, ...n } = t, s = l(
+    (e) => {
+      r(Array.isArray(e) ? e.at(-1) : e);
+    },
+    [r]
+  );
+  return /* @__PURE__ */ i("div", { ...n, children: [
+    /* @__PURE__ */ a("h3", { className: "mb-4 font-semibold text-gray-900", children: "Select Reactor" }),
+    /* @__PURE__ */ a(
+      m,
+      {
+        className: "min-w-36 max-w-fit",
+        name: "reactor",
+        required: !0,
+        value: c,
+        options: o,
+        multiple: !1,
+        onChange: s
+      }
+    )
+  ] });
+};
+export {
+  f as PackageManagerReactorSelect
+};
+//# sourceMappingURL=package-manager-select.js.map

package/dist/connect/components/modal/settings-modal-v2/package-manager/package-manager-select.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"package-manager-select.js","sources":["../../../../../../src/connect/components/modal/settings-modal-v2/package-manager/package-manager-select.tsx"],"sourcesContent":["import { SelectOption } from \"@/scalars/components/enum-field/types\";\nimport { SelectFieldRaw } from \"@/scalars/components/fragments/select-field\";\nimport { useCallback } from \"react\";\n\nexport type PackageManagerReactorSelectProps = {\n reactorOptions: SelectOption[];\n reactor: string;\n className?: string;\n onReactorChange: (value?: string) => void;\n};\n\nexport const PackageManagerReactorSelect: React.FC<\n PackageManagerReactorSelectProps\n> = (props) => {\n const { reactorOptions, reactor, onReactorChange, ...rest } = props;\n\n const handleChange = useCallback(\n (value: string | string[]) => {\n onReactorChange(Array.isArray(value) ? value.at(-1) : value);\n },\n [onReactorChange],\n );\n\n return (\n <div {...rest}>\n <h3 className=\"mb-4 font-semibold text-gray-900\">Select Reactor</h3>\n <SelectFieldRaw\n className=\"min-w-36 max-w-fit\"\n name=\"reactor\"\n required\n value={reactor}\n options={reactorOptions}\n multiple={false}\n onChange={handleChange}\n />\n </div>\n );\n};\n"],"names":["PackageManagerReactorSelect","props","reactorOptions","reactor","onReactorChange","rest","handleChange","useCallback","value","jsxs","jsx","SelectFieldRaw"],"mappings":";;;AAWa,MAAAA,IAET,CAACC,MAAU;AACb,QAAM,EAAE,gBAAAC,GAAgB,SAAAC,GAAS,iBAAAC,GAAiB,GAAGC,EAAS,IAAAJ,GAExDK,IAAeC;AAAA,IACnB,CAACC,MAA6B;AACZ,MAAAJ,EAAA,MAAM,QAAQI,CAAK,IAAIA,EAAM,GAAG,EAAE,IAAIA,CAAK;AAAA,IAC7D;AAAA,IACA,CAACJ,CAAe;AAAA,EAClB;AAGE,SAAA,gBAAAK,EAAC,OAAK,EAAA,GAAGJ,GACP,UAAA;AAAA,IAAC,gBAAAK,EAAA,MAAA,EAAG,WAAU,oCAAmC,UAAc,kBAAA;AAAA,IAC/D,gBAAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QACL,UAAQ;AAAA,QACR,OAAOR;AAAA,QACP,SAASD;AAAA,QACT,UAAU;AAAA,QACV,UAAUI;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GACF;AAEJ;"}

package/dist/connect/components/modal/settings-modal-v2/package-manager/package-manager.js ADDED Viewed

@@ -0,0 +1,52 @@
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { twMerge as p } from "tailwind-merge";
+import { PackageManagerInput as f } from "./package-manager-input.js";
+import { PackageManagerList as x } from "./package-manager-list.js";
+import { PackageManagerReactorSelect as k } from "./package-manager-select.js";
+const N = (r) => {
+  const {
+    className: o,
+    reactorOptions: t,
+    reactor: n,
+    onReactorChange: c,
+    onInstall: l,
+    packages: s,
+    onUninstall: m,
+    mutable: e,
+    ...g
+  } = r;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      ...g,
+      className: p(
+        "flex h-full flex-1 flex-col rounded-lg p-3",
+        o
+      ),
+      children: [
+        /* @__PURE__ */ a(
+          k,
+          {
+            reactor: n,
+            reactorOptions: t,
+            onReactorChange: c,
+            className: "mb-4"
+          }
+        ),
+        e && /* @__PURE__ */ a(f, { onInstall: l }),
+        /* @__PURE__ */ a(
+          x,
+          {
+            packages: s,
+            onUninstall: m,
+            mutable: e
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  N as PackageManager
+};
+//# sourceMappingURL=package-manager.js.map

package/dist/connect/components/modal/settings-modal-v2/package-manager/package-manager.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"package-manager.js","sources":["../../../../../../src/connect/components/modal/settings-modal-v2/package-manager/package-manager.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\nimport {\n PackageManagerInput,\n PackageManagerInputProps,\n} from \"./package-manager-input\";\nimport {\n PackageManagerList,\n PackageManagerListProps,\n} from \"./package-manager-list\";\nimport {\n PackageManagerReactorSelect,\n PackageManagerReactorSelectProps,\n} from \"./package-manager-select\";\n\ntype Props = PackageManagerReactorSelectProps &\n PackageManagerInputProps &\n PackageManagerListProps;\n\nexport const PackageManager: React.FC<Props> = (props) => {\n const {\n className,\n reactorOptions,\n reactor,\n onReactorChange,\n onInstall,\n packages,\n onUninstall,\n mutable,\n ...rest\n } = props;\n return (\n <div\n {...rest}\n className={twMerge(\n \"flex h-full flex-1 flex-col rounded-lg p-3\",\n className,\n )}\n >\n <PackageManagerReactorSelect\n reactor={reactor}\n reactorOptions={reactorOptions}\n onReactorChange={onReactorChange}\n className=\"mb-4\"\n />\n {mutable && <PackageManagerInput onInstall={onInstall} />}\n <PackageManagerList\n packages={packages}\n onUninstall={onUninstall}\n mutable={mutable}\n />\n </div>\n );\n};\n"],"names":["PackageManager","props","className","reactorOptions","reactor","onReactorChange","onInstall","packages","onUninstall","mutable","rest","jsxs","twMerge","jsx","PackageManagerReactorSelect","PackageManagerInput","PackageManagerList"],"mappings":";;;;;AAkBa,MAAAA,IAAkC,CAACC,MAAU;AAClD,QAAA;AAAA,IACJ,WAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDT;AAEF,SAAA,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGD;AAAA,MACJ,WAAWE;AAAA,QACT;AAAA,QACAV;AAAA,MACF;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAW;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SAAAV;AAAA,YACA,gBAAAD;AAAA,YACA,iBAAAE;AAAA,YACA,WAAU;AAAA,UAAA;AAAA,QACZ;AAAA,QACCI,KAAY,gBAAAI,EAAAE,GAAA,EAAoB,WAAAT,EAAsB,CAAA;AAAA,QACvD,gBAAAO;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,UAAAT;AAAA,YACA,aAAAC;AAAA,YACA,SAAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EACF;AAEJ;"}