@workos-inc/widgets 1.3.1 → 1.4.1

package/dist/cjs/lib/delete-user-dialog.d.cts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AlertDialog } from '@radix-ui/themes';
+import { ReactNode } from 'react';
+import { Member } from '../api/endpoint.cjs';
+import '@tanstack/react-query';
+import '../api/widgets-api-client.cjs';
+
+interface DeleteUserDialogProps extends AlertDialog.RootProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    user: Member;
+    children?: ReactNode;
+}
+declare function DeleteUserDialog({ children, user, ...props }: DeleteUserDialogProps): react_jsx_runtime.JSX.Element;
+
+export { DeleteUserDialog };

package/dist/cjs/lib/domain-actions.cjs

@@ -0,0 +1,89 @@
+"use strict";
+"use client";
+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);
+var domain_actions_exports = {};
+__export(domain_actions_exports, {
+  DomainActions: () => DomainActions
+});
+module.exports = __toCommonJS(domain_actions_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_themes = require("@radix-ui/themes");
+var import_react_icons = require("@radix-ui/react-icons");
+var import_view_dns_record_dialog = require("./view-dns-record-dialog.js");
+var import_delete_domain_dialog = require("./delete-domain-dialog.js");
+const DomainActions = ({
+  domain,
+  onDeleteDomain,
+  onReverifyDomain
+}) => {
+  const [viewDnsDialogOpen, setViewDnsDialogOpen] = (0, import_react.useState)(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = (0, import_react.useState)(false);
+  if (domain.state === "Verified") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_delete_domain_dialog.DeleteDomainDialog,
+      {
+        domain,
+        onDeleteDomain,
+        open: deleteDialogOpen,
+        onOpenChange: setDeleteDialogOpen,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.IconButton, { variant: "ghost", size: "2", color: "gray", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.TrashIcon, {}) })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.DropdownMenu.Root, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DropdownMenu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.IconButton, { variant: "ghost", size: "2", color: "gray", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.DotsHorizontalIcon, {}) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.DropdownMenu.Content, { side: "bottom", align: "end", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.DropdownMenu.Item, { onClick: () => setViewDnsDialogOpen(true), children: domain.state === "Failed" ? "Restart verification" : "View DNS record" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_themes.DropdownMenu.Item,
+          {
+            color: "red",
+            onClick: () => setDeleteDialogOpen(true),
+            children: "Remove domain"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_view_dns_record_dialog.ViewDnsRecordDialog,
+      {
+        domain,
+        onReverifyDomain,
+        open: viewDnsDialogOpen,
+        onOpenChange: setViewDnsDialogOpen
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_delete_domain_dialog.DeleteDomainDialog,
+      {
+        domain,
+        onDeleteDomain,
+        open: deleteDialogOpen,
+        onOpenChange: setDeleteDialogOpen
+      }
+    )
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DomainActions
+});
+//# sourceMappingURL=domain-actions.cjs.map

package/dist/cjs/lib/domain-actions.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/domain-actions.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useState } from \"react\";\nimport { DropdownMenu, IconButton } from \"@radix-ui/themes\";\nimport { DotsHorizontalIcon, TrashIcon } from \"@radix-ui/react-icons\";\nimport { OrganizationDomain } from \"../api/endpoint.js\";\nimport { ViewDnsRecordDialog } from \"./view-dns-record-dialog.js\";\nimport { DeleteDomainDialog } from \"./delete-domain-dialog.js\";\n\ninterface DomainActionsProps {\n  domain: OrganizationDomain;\n  onDeleteDomain: (domainId: string) => void;\n  onReverifyDomain: (domainId: string) => void;\n}\n\nexport const DomainActions = ({\n  domain,\n  onDeleteDomain,\n  onReverifyDomain,\n}: DomainActionsProps) => {\n  const [viewDnsDialogOpen, setViewDnsDialogOpen] = useState(false);\n  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);\n\n  if (domain.state === \"Verified\") {\n    return (\n      <>\n        <DeleteDomainDialog\n          domain={domain}\n          onDeleteDomain={onDeleteDomain}\n          open={deleteDialogOpen}\n          onOpenChange={setDeleteDialogOpen}\n        >\n          <IconButton variant=\"ghost\" size=\"2\" color=\"gray\">\n            <TrashIcon />\n          </IconButton>\n        </DeleteDomainDialog>\n      </>\n    );\n  }\n\n  return (\n    <>\n      <DropdownMenu.Root>\n        <DropdownMenu.Trigger>\n          <IconButton variant=\"ghost\" size=\"2\" color=\"gray\">\n            <DotsHorizontalIcon />\n          </IconButton>\n        </DropdownMenu.Trigger>\n        <DropdownMenu.Content side=\"bottom\" align=\"end\">\n          <DropdownMenu.Item onClick={() => setViewDnsDialogOpen(true)}>\n            {domain.state === \"Failed\"\n              ? \"Restart verification\"\n              : \"View DNS record\"}\n          </DropdownMenu.Item>\n          <DropdownMenu.Item\n            color=\"red\"\n            onClick={() => setDeleteDialogOpen(true)}\n          >\n            Remove domain\n          </DropdownMenu.Item>\n        </DropdownMenu.Content>\n      </DropdownMenu.Root>\n\n      <ViewDnsRecordDialog\n        domain={domain}\n        onReverifyDomain={onReverifyDomain}\n        open={viewDnsDialogOpen}\n        onOpenChange={setViewDnsDialogOpen}\n      />\n\n      <DeleteDomainDialog\n        domain={domain}\n        onDeleteDomain={onDeleteDomain}\n        open={deleteDialogOpen}\n        onOpenChange={setDeleteDialogOpen}\n      />\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BM;AAvBN,mBAAyB;AACzB,oBAAyC;AACzC,yBAA8C;AAE9C,oCAAoC;AACpC,kCAAmC;AAQ5B,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF,MAA0B;AACxB,QAAM,CAAC,mBAAmB,oBAAoB,QAAI,uBAAS,KAAK;AAChE,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAS,KAAK;AAE9D,MAAI,OAAO,UAAU,YAAY;AAC/B,WACE,2EACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,cAAc;AAAA,QAEd,sDAAC,4BAAW,SAAQ,SAAQ,MAAK,KAAI,OAAM,QACzC,sDAAC,gCAAU,GACb;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AAEA,SACE,4EACE;AAAA,iDAAC,2BAAa,MAAb,EACC;AAAA,kDAAC,2BAAa,SAAb,EACC,sDAAC,4BAAW,SAAQ,SAAQ,MAAK,KAAI,OAAM,QACzC,sDAAC,yCAAmB,GACtB,GACF;AAAA,MACA,6CAAC,2BAAa,SAAb,EAAqB,MAAK,UAAS,OAAM,OACxC;AAAA,oDAAC,2BAAa,MAAb,EAAkB,SAAS,MAAM,qBAAqB,IAAI,GACxD,iBAAO,UAAU,WACd,yBACA,mBACN;AAAA,QACA;AAAA,UAAC,2BAAa;AAAA,UAAb;AAAA,YACC,OAAM;AAAA,YACN,SAAS,MAAM,oBAAoB,IAAI;AAAA,YACxC;AAAA;AAAA,QAED;AAAA,SACF;AAAA,OACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,cAAc;AAAA;AAAA,IAChB;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,cAAc;AAAA;AAAA,IAChB;AAAA,KACF;AAEJ;","names":[]}

package/dist/cjs/lib/domain-actions.d.cts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { OrganizationDomain } from '../api/endpoint.cjs';
+import '@tanstack/react-query';
+import '../api/widgets-api-client.cjs';
+
+interface DomainActionsProps {
+    domain: OrganizationDomain;
+    onDeleteDomain: (domainId: string) => void;
+    onReverifyDomain: (domainId: string) => void;
+}
+declare const DomainActions: ({ domain, onDeleteDomain, onReverifyDomain, }: DomainActionsProps) => react_jsx_runtime.JSX.Element;
+
+export { DomainActions };

package/dist/cjs/lib/domain-item.cjs

@@ -0,0 +1,86 @@
+"use strict";
+"use client";
+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);
+var domain_item_exports = {};
+__export(domain_item_exports, {
+  DomainItem: () => DomainItem
+});
+module.exports = __toCommonJS(domain_item_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_themes = require("@radix-ui/themes");
+var import_icon_panel = require("./icon-panel.js");
+var import_utils = require("./utils.js");
+var import_status = require("./status.js");
+var import_name_server_icon = require("./name-server-icon.js");
+var import_domain_actions = require("./domain-actions.js");
+const DomainItem = ({
+  domain,
+  onDeleteDomain,
+  onReverifyDomain
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "4", align: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon_panel.IconPanel, { color: domain.nameServer === "Other" ? "gray" : "panel", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_name_server_icon.NameServerIcon, { provider: domain.nameServer }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", highContrast: true, weight: "bold", as: "p", children: domain.domain }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Text, { size: "2", color: "gray", as: "p", children: [
+        "Added",
+        " ",
+        (0, import_utils.getComparativeReadableDate)(/* @__PURE__ */ new Date(), new Date(domain.createdAt))
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { ml: "auto", mr: "2", gap: "4", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { gap: "1", align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_status.Status, { state: getDomainStatus(domain), children: domainStateToLabel(domain) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_domain_actions.DomainActions,
+        {
+          domain,
+          onDeleteDomain,
+          onReverifyDomain
+        }
+      )
+    ] })
+  ] });
+};
+const domainStateToLabel = (domain) => {
+  switch (domain.state) {
+    case "Verified":
+    case "LegacyVerified":
+      return "Verified";
+    case "Pending":
+      return "Verification pending";
+    case "Failed":
+      return "Verification failed";
+  }
+};
+const getDomainStatus = (domain) => {
+  switch (domain.state) {
+    case "Verified":
+    case "LegacyVerified":
+      return "success";
+    case "Pending":
+      return "waiting";
+    case "Failed":
+      return "error";
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DomainItem
+});
+//# sourceMappingURL=domain-item.cjs.map

package/dist/cjs/lib/domain-item.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/domain-item.tsx"],"sourcesContent":["\"use client\";\n\nimport { Flex, Text } from \"@radix-ui/themes\";\nimport { OrganizationDomain } from \"../api/endpoint.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport { getComparativeReadableDate } from \"./utils.js\";\nimport { Status } from \"./status.js\";\nimport { NameServerIcon } from \"./name-server-icon.js\";\nimport { DomainActions } from \"./domain-actions.js\";\n\ninterface DomainItemProps {\n  domain: OrganizationDomain;\n  onDeleteDomain: (domainId: string) => void;\n  onReverifyDomain: (domainId: string) => void;\n}\n\nexport const DomainItem = ({\n  domain,\n  onDeleteDomain,\n  onReverifyDomain,\n}: DomainItemProps) => {\n  return (\n    <Flex gap=\"4\" align=\"center\">\n      <IconPanel color={domain.nameServer === \"Other\" ? \"gray\" : \"panel\"}>\n        <NameServerIcon provider={domain.nameServer} />\n      </IconPanel>\n\n      <Flex direction=\"column\">\n        <Text size=\"2\" highContrast weight=\"bold\" as=\"p\">\n          {domain.domain}\n        </Text>\n\n        <Text size=\"2\" color=\"gray\" as=\"p\">\n          Added{\" \"}\n          {getComparativeReadableDate(new Date(), new Date(domain.createdAt))}\n        </Text>\n      </Flex>\n\n      <Flex ml=\"auto\" mr=\"2\" gap=\"4\" align=\"center\">\n        <Flex gap=\"1\" align=\"center\">\n          <Status state={getDomainStatus(domain)}>\n            {domainStateToLabel(domain)}\n          </Status>\n        </Flex>\n\n        <DomainActions\n          domain={domain}\n          onDeleteDomain={onDeleteDomain}\n          onReverifyDomain={onReverifyDomain}\n        />\n      </Flex>\n    </Flex>\n  );\n};\n\nconst domainStateToLabel = (domain: OrganizationDomain) => {\n  switch (domain.state) {\n    case \"Verified\":\n    case \"LegacyVerified\":\n      return \"Verified\";\n    case \"Pending\":\n      return \"Verification pending\";\n    case \"Failed\":\n      return \"Verification failed\";\n  }\n};\n\nconst getDomainStatus = (domain: OrganizationDomain) => {\n  switch (domain.state) {\n    case \"Verified\":\n    case \"LegacyVerified\":\n      return \"success\";\n    case \"Pending\":\n      return \"waiting\";\n    case \"Failed\":\n      return \"error\";\n  }\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBQ;AAtBR,oBAA2B;AAE3B,wBAA0B;AAC1B,mBAA2C;AAC3C,oBAAuB;AACvB,8BAA+B;AAC/B,4BAA8B;AAQvB,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACrB,SACE,6CAAC,sBAAK,KAAI,KAAI,OAAM,UAClB;AAAA,gDAAC,+BAAU,OAAO,OAAO,eAAe,UAAU,SAAS,SACzD,sDAAC,0CAAe,UAAU,OAAO,YAAY,GAC/C;AAAA,IAEA,6CAAC,sBAAK,WAAU,UACd;AAAA,kDAAC,sBAAK,MAAK,KAAI,cAAY,MAAC,QAAO,QAAO,IAAG,KAC1C,iBAAO,QACV;AAAA,MAEA,6CAAC,sBAAK,MAAK,KAAI,OAAM,QAAO,IAAG,KAAI;AAAA;AAAA,QAC3B;AAAA,YACL,yCAA2B,oBAAI,KAAK,GAAG,IAAI,KAAK,OAAO,SAAS,CAAC;AAAA,SACpE;AAAA,OACF;AAAA,IAEA,6CAAC,sBAAK,IAAG,QAAO,IAAG,KAAI,KAAI,KAAI,OAAM,UACnC;AAAA,kDAAC,sBAAK,KAAI,KAAI,OAAM,UAClB,sDAAC,wBAAO,OAAO,gBAAgB,MAAM,GAClC,6BAAmB,MAAM,GAC5B,GACF;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,MAAM,qBAAqB,CAAC,WAA+B;AACzD,UAAQ,OAAO,OAAO;AAAA,IACpB,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,EACX;AACF;AAEA,MAAM,kBAAkB,CAAC,WAA+B;AACtD,UAAQ,OAAO,OAAO;AAAA,IACpB,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,EACX;AACF;","names":[]}

package/dist/cjs/lib/domain-item.d.cts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { OrganizationDomain } from '../api/endpoint.cjs';
+import '@tanstack/react-query';
+import '../api/widgets-api-client.cjs';
+
+interface DomainItemProps {
+    domain: OrganizationDomain;
+    onDeleteDomain: (domainId: string) => void;
+    onReverifyDomain: (domainId: string) => void;
+}
+declare const DomainItem: ({ domain, onDeleteDomain, onReverifyDomain, }: DomainItemProps) => react_jsx_runtime.JSX.Element;
+
+export { DomainItem };

package/dist/cjs/lib/edit-user-profile-dialog.cjs

@@ -0,0 +1,170 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var edit_user_profile_dialog_exports = {};
+__export(edit_user_profile_dialog_exports, {
+  EditUserProfileDialog: () => EditUserProfileDialog
+});
+module.exports = __toCommonJS(edit_user_profile_dialog_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_themes = require("@radix-ui/themes");
+var import_endpoint = require("../api/endpoint.js");
+var import_react_query = require("@tanstack/react-query");
+var React = __toESM(require("react"), 1);
+var Form = __toESM(require("@radix-ui/react-form"), 1);
+var import_elements = require("./elements.js");
+var import_save_button = require("./save-button.js");
+function EditUserProfileDialog({
+  children,
+  user,
+  ...props
+}) {
+  const [open, setOpen] = React.useState(false);
+  const handleClose = React.useCallback(() => {
+    setOpen(false);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_themes.Dialog.Root,
+    {
+      ...props,
+      open: props.open ?? open,
+      onOpenChange: props.onOpenChange ?? setOpen,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Dialog.Trigger, { children }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.DialogContent, { maxWidth: "480px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, { user, onClose: handleClose }) })
+      ]
+    }
+  );
+}
+function Content({ user, onClose }) {
+  const client = (0, import_react_query.useQueryClient)();
+  const updateMe = (0, import_endpoint.useUpdateMe)({
+    mutation: {
+      onSettled: () => {
+        client.invalidateQueries({ queryKey: (0, import_endpoint.getMeQueryKey)() });
+      },
+      onSuccess: (newProfile) => {
+        client.setQueryData((0, import_endpoint.getMeQueryKey)(), {
+          ...user,
+          firstName: newProfile.firstName || user.firstName,
+          lastName: newProfile.lastName || user.lastName
+        });
+      }
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Dialog.Title, { mb: "5", children: "Edit name" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Dialog.Description, { children: [
+      "Edit the details of ",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { weight: "bold", children: user.email })
+    ] }) }),
+    updateMe.error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Callout.Root, { color: "red", my: "-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Callout.Text, { children: getMutationErrorMessage(updateMe.error) }) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      Form.Root,
+      {
+        onSubmit: async (event) => {
+          event.preventDefault();
+          const formData = new FormData(event.currentTarget);
+          const firstName = formData.get("firstName")?.toString();
+          const lastName = formData.get("lastName")?.toString();
+          updateMe.mutate({
+            data: {
+              firstName: firstName ?? void 0,
+              lastName: lastName ?? void 0
+            }
+          });
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { my: "5", direction: "column", gap: "4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Form.Field, { name: "firstName", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", gap: "1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Form.Label, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Label, { children: "First name" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Form.Control, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_elements.TextField,
+                {
+                  "data-1p-ignore": true,
+                  autoComplete: "given-name",
+                  defaultValue: user.firstName ?? "",
+                  placeholder: "Your first name",
+                  disabled: updateMe.isPending || updateMe.isSuccess
+                }
+              ) })
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Form.Field, { name: "lastName", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", gap: "1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Form.Label, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Label, { children: "Last name" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Form.Control, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_elements.TextField,
+                {
+                  "data-1p-ignore": true,
+                  autoComplete: "family-name",
+                  defaultValue: user.lastName ?? "",
+                  placeholder: "Your last name",
+                  disabled: updateMe.isPending || updateMe.isSuccess
+                }
+              ) })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { mt: "5", gap: "3", justify: "end", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Dialog.Close, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_elements.SecondaryButton,
+              {
+                disabled: updateMe.isPending || updateMe.isSuccess,
+                children: "Cancel"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_save_button.SaveButton,
+              {
+                asChild: true,
+                loading: updateMe.isPending,
+                done: updateMe.isSuccess,
+                onDone: onClose,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.PrimaryButton, { children: "Save" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { "aria-live": "polite", children: getMutationErrorMessage(updateMe.error) }) })
+        ]
+      }
+    )
+  ] });
+}
+function getMutationErrorMessage(error) {
+  if (error instanceof Error) {
+    return error.message;
+  }
+  if (typeof error === "object" && error !== null && "message" in error && typeof error.message === "string") {
+    return error.message;
+  }
+  return "Something went wrong. Please try again.";
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EditUserProfileDialog
+});
+//# sourceMappingURL=edit-user-profile-dialog.cjs.map

package/dist/cjs/lib/edit-user-profile-dialog.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/edit-user-profile-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Callout, Dialog, Flex, Text, VisuallyHidden } from \"@radix-ui/themes\";\nimport { getMeQueryKey, Me, useUpdateMe } from \"../api/endpoint.js\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport * as React from \"react\";\nimport { type ReactNode } from \"react\";\nimport * as Form from \"@radix-ui/react-form\";\nimport {\n  DialogContent,\n  Label,\n  PrimaryButton,\n  SecondaryButton,\n  TextField,\n} from \"./elements.js\";\nimport { SaveButton } from \"./save-button.js\";\n\ninterface EditUserProfileDialogProps extends Dialog.RootProps {\n  user: Me;\n  children?: ReactNode;\n}\n\nexport function EditUserProfileDialog({\n  children,\n  user,\n  ...props\n}: EditUserProfileDialogProps) {\n  const [open, setOpen] = React.useState(false);\n\n  const handleClose = React.useCallback(() => {\n    setOpen(false);\n  }, []);\n\n  return (\n    <Dialog.Root\n      {...props}\n      open={props.open ?? open}\n      onOpenChange={props.onOpenChange ?? setOpen}\n    >\n      <Dialog.Trigger>{children}</Dialog.Trigger>\n\n      <DialogContent maxWidth=\"480px\">\n        <Content user={user} onClose={handleClose} />\n      </DialogContent>\n    </Dialog.Root>\n  );\n}\n\ninterface ContentProps extends Pick<EditUserProfileDialogProps, \"user\"> {\n  onClose: () => void;\n}\n\nfunction Content({ user, onClose }: ContentProps) {\n  const client = useQueryClient();\n  const updateMe = useUpdateMe({\n    mutation: {\n      onSettled: () => {\n        client.invalidateQueries({ queryKey: getMeQueryKey() });\n      },\n      onSuccess: (newProfile) => {\n        client.setQueryData(getMeQueryKey(), {\n          ...user,\n          firstName: newProfile.firstName || user.firstName,\n          lastName: newProfile.lastName || user.lastName,\n        });\n      },\n    },\n  });\n\n  return (\n    <>\n      <Dialog.Title mb=\"5\">Edit name</Dialog.Title>\n      <VisuallyHidden>\n        <Dialog.Description>\n          Edit the details of <Text weight=\"bold\">{user.email}</Text>\n        </Dialog.Description>\n      </VisuallyHidden>\n\n      {updateMe.error ? (\n        <Callout.Root color=\"red\" my=\"-2\">\n          <Callout.Text>{getMutationErrorMessage(updateMe.error)}</Callout.Text>\n        </Callout.Root>\n      ) : null}\n\n      <Form.Root\n        onSubmit={async (event) => {\n          event.preventDefault();\n          const formData = new FormData(event.currentTarget);\n          const firstName = formData.get(\"firstName\")?.toString();\n          const lastName = formData.get(\"lastName\")?.toString();\n          updateMe.mutate({\n            data: {\n              firstName: firstName ?? undefined,\n              lastName: lastName ?? undefined,\n            },\n          });\n        }}\n      >\n        <Flex my=\"5\" direction=\"column\" gap=\"4\">\n          <Form.Field name=\"firstName\" asChild>\n            <Flex direction=\"column\" gap=\"1\">\n              <Form.Label asChild>\n                <Label>First name</Label>\n              </Form.Label>\n              <Form.Control asChild>\n                <TextField\n                  data-1p-ignore\n                  autoComplete=\"given-name\"\n                  defaultValue={user.firstName ?? \"\"}\n                  placeholder=\"Your first name\"\n                  disabled={updateMe.isPending || updateMe.isSuccess}\n                />\n              </Form.Control>\n            </Flex>\n          </Form.Field>\n\n          <Form.Field name=\"lastName\" asChild>\n            <Flex direction=\"column\" gap=\"1\">\n              <Form.Label asChild>\n                <Label>Last name</Label>\n              </Form.Label>\n              <Form.Control asChild>\n                <TextField\n                  data-1p-ignore\n                  autoComplete=\"family-name\"\n                  defaultValue={user.lastName ?? \"\"}\n                  placeholder=\"Your last name\"\n                  disabled={updateMe.isPending || updateMe.isSuccess}\n                />\n              </Form.Control>\n            </Flex>\n          </Form.Field>\n        </Flex>\n\n        <Flex mt=\"5\" gap=\"3\" justify=\"end\">\n          <Dialog.Close>\n            <SecondaryButton\n              disabled={updateMe.isPending || updateMe.isSuccess}\n            >\n              Cancel\n            </SecondaryButton>\n          </Dialog.Close>\n\n          <SaveButton\n            asChild\n            loading={updateMe.isPending}\n            done={updateMe.isSuccess}\n            onDone={onClose}\n          >\n            <PrimaryButton>Save</PrimaryButton>\n          </SaveButton>\n        </Flex>\n\n        {/* mirror errors in a live region */}\n        <VisuallyHidden asChild>\n          <section aria-live=\"polite\">\n            {getMutationErrorMessage(updateMe.error)}\n          </section>\n        </VisuallyHidden>\n      </Form.Root>\n    </>\n  );\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n  if (error instanceof Error) {\n    return error.message;\n  }\n\n  if (\n    typeof error === \"object\" &&\n    error !== null &&\n    \"message\" in error &&\n    typeof error.message === \"string\"\n  ) {\n    return error.message;\n  }\n\n  // TODO Handle server errors\n  return \"Something went wrong. Please try again.\";\n}\n"],"mappings":"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","names":[]}

package/dist/cjs/lib/edit-user-profile-dialog.d.cts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Dialog } from '@radix-ui/themes';
+import { Me } from '../api/endpoint.cjs';
+import { ReactNode } from 'react';
+import '@tanstack/react-query';
+import '../api/widgets-api-client.cjs';
+
+interface EditUserProfileDialogProps extends Dialog.RootProps {
+    user: Me;
+    children?: ReactNode;
+}
+declare function EditUserProfileDialog({ children, user, ...props }: EditUserProfileDialogProps): react_jsx_runtime.JSX.Element;
+
+export { EditUserProfileDialog };