@workos-inc/widgets 1.6.1 → 1.7.0-pre.1

package/dist/esm/lib/edit-user-role-dialog.js

@@ -6,9 +6,7 @@ import {
   Card,
   Callout,
   CheckboxGroup,
-  Dialog,
   Flex,
-  Select,
   ScrollArea,
   Text,
   VisuallyHidden,
@@ -16,15 +14,7 @@ import {
 } from "@radix-ui/themes";
 import { useState } from "react";
 import { useUpdateUserRole } from "./api/user.js";
-import {
-  DialogContent,
-  PrimaryButton,
-  SecondaryButton,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  Skeleton
-} from "./elements.js";
+import { Dialog, Button, Select, Skeleton } from "./elements.js";
 import { getBestName } from "./utils.js";
 import {
   useRolesAndConfig
@@ -95,7 +85,7 @@ function EditSingleUserRoleDialogContent({
   const errorId = `${selectId}-error`;
   const showErrorMessage = !!queryState.error;
   const showSingleRoleInfo = queryState.isSuccess && roles.length === 1;
-  return /* @__PURE__ */ jsxs(DialogContent, { maxWidth: "480px", children: [
+  return /* @__PURE__ */ jsxs(Dialog.Content, { maxWidth: "480px", children: [
     /* @__PURE__ */ jsx(Dialog.Title, { children: "Edit role" }),
     /* @__PURE__ */ jsxs(Dialog.Description, { children: [
       "Select the role to assign to ",
@@ -119,7 +109,7 @@ function EditSingleUserRoleDialogContent({
               disabled: queryState.isLoading || showSingleRoleInfo,
               children: [
                 /* @__PURE__ */ jsx(Skeleton, { loading: queryState.isLoading, children: /* @__PURE__ */ jsx(
-                  SelectTrigger,
+                  Select.Trigger,
                   {
                     id: selectId,
                     placeholder: "Assign a role",
@@ -128,7 +118,7 @@ function EditSingleUserRoleDialogContent({
                     "aria-describedby": [showErrorMessage && errorId, showSingleRoleInfo && infoId].filter(Boolean).join(" ") || void 0
                   }
                 ) }),
-                /* @__PURE__ */ jsx(SelectContent, { children: roles.map((role) => /* @__PURE__ */ jsx(SelectItem, { value: role.slug, children: role.name }, role.slug)) })
+                /* @__PURE__ */ jsx(Select.Content, { children: roles.map((role) => /* @__PURE__ */ jsx(Select.Item, { value: role.slug, children: role.name }, role.slug)) })
               ]
             }
           ),
@@ -139,9 +129,9 @@ function EditSingleUserRoleDialogContent({
     ) }),
     updateUser.error ? /* @__PURE__ */ jsx(Callout.Root, { color: "red", mt: "4", mb: "-2", children: /* @__PURE__ */ jsx(Callout.Text, { children: getMutationErrorMessage(updateUser.error) }) }) : null,
     /* @__PURE__ */ jsxs(Flex, { mt: "5", gap: "3", justify: "end", children: [
-      /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(SecondaryButton, { disabled: updateUser.isPending, children: "Cancel" }) }),
+      /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", disabled: updateUser.isPending, children: "Cancel" }) }),
       /* @__PURE__ */ jsx(
-        PrimaryButton,
+        Button,
         {
           form: formId,
           loading: updateUser.isPending,
@@ -191,7 +181,7 @@ function EditMultipleUserRolesDialogContent({
   const checkboxGroupId = `role-checkbox-group-${rootId}`;
   const infoId = `${checkboxGroupId}-info`;
   const showSingleRoleInfo = queryState.isSuccess && roles.length === 1;
-  return /* @__PURE__ */ jsxs(DialogContent, { maxWidth: "480px", children: [
+  return /* @__PURE__ */ jsxs(Dialog.Content, { maxWidth: "480px", children: [
     /* @__PURE__ */ jsxs(
       Flex,
       {
@@ -272,9 +262,9 @@ function EditMultipleUserRolesDialogContent({
           showSingleRoleInfo ? /* @__PURE__ */ jsx(Text, { color: "gray", size: "2", id: infoId, mt: "1", children: "You cannot update the role for this user as there is only one role available." }) : null,
           error ? /* @__PURE__ */ jsx(Callout.Root, { color: "red", mt: "4", mb: "-2", children: /* @__PURE__ */ jsx(Callout.Text, { children: error }) }) : null,
           /* @__PURE__ */ jsxs(Flex, { mt: "5", gap: "3", justify: "end", children: [
-            /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(SecondaryButton, { disabled: updateUser.isPending, children: "Cancel" }) }),
+            /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", disabled: updateUser.isPending, children: "Cancel" }) }),
             /* @__PURE__ */ jsx(
-              PrimaryButton,
+              Button,
               {
                 form: formId,
                 loading: updateUser.isPending,

package/dist/esm/lib/edit-user-role-dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/edit-user-role-dialog.tsx"],"sourcesContent":["// @ts-nocheck\n// Unclear why, but there is a versioning conflict somewhere causing the build\n// to fail based on types with the Checkbox component. Will fix asap.\n\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Box,\n  Card,\n  Callout,\n  CheckboxGroup,\n  Dialog,\n  Flex,\n  Select,\n  ScrollArea,\n  Text,\n  VisuallyHidden,\n  Separator,\n} from \"@radix-ui/themes\";\nimport { type ReactNode, useState } from \"react\";\nimport { useUpdateUserRole } from \"./api/user.js\";\nimport {\n  DialogContent,\n  PrimaryButton,\n  SecondaryButton,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  Skeleton,\n} from \"./elements.js\";\nimport { getBestName } from \"./utils.js\";\nimport {\n  Member,\n  MemberRole,\n  RolesAndConfig403,\n  RolesAndConfig404,\n  useRolesAndConfig,\n} from \"../api/endpoint.js\";\n\ninterface EditUserRoleDialogProps extends Dialog.RootProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  user: Member;\n  children?: ReactNode;\n}\n\nexport function EditUserRoleDialog({\n  children,\n  user,\n  ...props\n}: EditUserRoleDialogProps) {\n  const rolesAndConfigQuery = useRolesAndConfig({\n    query: {\n      initialData: { roles: [], multipleRolesEnabled: false },\n    },\n  });\n  const { data, ...restQueryState } = rolesAndConfigQuery;\n  const queryState = {\n    error: restQueryState.error,\n    isLoading: restQueryState.isLoading,\n    isSuccess: restQueryState.isSuccess,\n  };\n\n  return (\n    <Dialog.Root {...props}>\n      {children && <Dialog.Trigger>{children}</Dialog.Trigger>}\n      {data.multipleRolesEnabled ? (\n        <EditMultipleUserRolesDialogContent\n          user={user}\n          roles={data.roles}\n          queryState={queryState}\n          onFormSubmitSuccess={() => props.onOpenChange(false)}\n        />\n      ) : (\n        <EditSingleUserRoleDialogContent\n          user={user}\n          roles={data.roles}\n          queryState={queryState}\n          onFormSubmitSuccess={() => props.onOpenChange(false)}\n        />\n      )}\n    </Dialog.Root>\n  );\n}\n\ninterface EditSingleUserRoleDialogContentProps {\n  user: Member;\n  roles: MemberRole[];\n  queryState: {\n    error: RolesAndConfig403 | RolesAndConfig404 | null;\n    isLoading: boolean;\n    isSuccess: boolean;\n  };\n  onFormSubmitSuccess: () => void;\n}\n\nexport function EditSingleUserRoleDialogContent({\n  user,\n  roles,\n  queryState,\n  onFormSubmitSuccess,\n}: EditSingleUserRoleDialogContentProps) {\n  const displayName = getBestName(user) || user.email;\n  const updateUser = useUpdateUserRole();\n  const [selectedRole, setSelectedRole] = useState(\n    user.roles?.at(0)?.slug || \"Unknown\",\n  );\n\n  const onSubmitForm = ({ id, roles }: { id: string; roles: string[] }) => {\n    updateUser.mutate(\n      { userId: id, data: { roles } },\n      {\n        onSuccess: () => {\n          onFormSubmitSuccess();\n        },\n      },\n    );\n  };\n\n  const rootId = React.useId();\n  const formId = `edit-user-form-${rootId}`;\n  const selectId = `role-select-${rootId}`;\n  const selectLabelId = `${selectId}-label`;\n  const infoId = `${selectId}-info`;\n  const errorId = `${selectId}-error`;\n  const showErrorMessage = !!queryState.error;\n  const showSingleRoleInfo = queryState.isSuccess && roles.length === 1;\n\n  return (\n    <DialogContent maxWidth=\"480px\">\n      <Dialog.Title>Edit role</Dialog.Title>\n      <Dialog.Description>\n        Select the role to assign to <Text weight=\"bold\">{displayName}</Text>\n      </Dialog.Description>\n      <Flex mt=\"2\" direction=\"column\" gap=\"1\" asChild>\n        <form\n          id={formId}\n          onSubmit={async (event) => {\n            event.preventDefault();\n            onSubmitForm({ id: user.id, roles: [selectedRole] });\n          }}\n        >\n          <Select.Root\n            name=\"roles\"\n            value={selectedRole ?? \"Unknown\"}\n            onValueChange={setSelectedRole}\n            disabled={queryState.isLoading || showSingleRoleInfo}\n          >\n            <Skeleton loading={queryState.isLoading}>\n              <SelectTrigger\n                id={selectId}\n                placeholder=\"Assign a role\"\n                aria-labelledby={selectLabelId}\n                aria-invalid={showErrorMessage || undefined}\n                aria-describedby={\n                  [showErrorMessage && errorId, showSingleRoleInfo && infoId]\n                    .filter(Boolean)\n                    .join(\" \") || undefined\n                }\n              />\n            </Skeleton>\n\n            <SelectContent>\n              {roles.map((role) => (\n                <SelectItem key={role.slug} value={role.slug}>\n                  {role.name}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select.Root>\n\n          {showErrorMessage ? (\n            <Text color=\"red\" size=\"2\" id={errorId}>\n              {getRoleSelectErrorMessage(queryState.error)}\n            </Text>\n          ) : null}\n\n          {showSingleRoleInfo ? (\n            <Text color=\"gray\" size=\"2\" id={infoId} mt=\"1\">\n              You cannot update the role for this user as there is only one role\n              available.\n            </Text>\n          ) : null}\n        </form>\n      </Flex>\n\n      {updateUser.error ? (\n        <Callout.Root color=\"red\" mt=\"4\" mb=\"-2\">\n          <Callout.Text>\n            {getMutationErrorMessage(updateUser.error)}\n          </Callout.Text>\n        </Callout.Root>\n      ) : null}\n\n      <Flex mt=\"5\" gap=\"3\" justify=\"end\">\n        <Dialog.Close>\n          <SecondaryButton disabled={updateUser.isPending}>\n            Cancel\n          </SecondaryButton>\n        </Dialog.Close>\n\n        <PrimaryButton\n          form={formId}\n          loading={updateUser.isPending}\n          disabled={queryState.isLoading || showSingleRoleInfo || undefined}\n        >\n          Save\n        </PrimaryButton>\n      </Flex>\n      {/* mirror errors in a live region */}\n      <VisuallyHidden asChild>\n        <section aria-live=\"polite\">\n          {getMutationErrorMessage(updateUser.error)}\n        </section>\n      </VisuallyHidden>\n    </DialogContent>\n  );\n}\n\ntype EditMultipleUserRolesDialogContentProps =\n  EditSingleUserRoleDialogContentProps;\n\nfunction EditMultipleUserRolesDialogContent({\n  user,\n  roles,\n  queryState,\n  onFormSubmitSuccess,\n}: EditMultipleUserRolesDialogContentProps) {\n  const displayName = getBestName(user) || user.email;\n  const updateUser = useUpdateUserRole();\n  const [error, setError] = useState<string | null>(null);\n\n  React.useEffect(() => {\n    if (queryState.error && !error) {\n      setError(\"There was an error fetching roles. Please try again.\");\n    }\n  }, [queryState.error, error]);\n\n  const onSubmitForm = ({ id, roles }: { id: string; roles: string[] }) => {\n    if (roles.length === 0) {\n      setError(\"Please select at least one role\");\n      return;\n    }\n    updateUser.mutate(\n      { userId: id, data: { roles } },\n      {\n        onSuccess: () => {\n          onFormSubmitSuccess();\n        },\n        onError: () => {\n          setError(\n            \"There was an error updating the user role. Please try again.\",\n          );\n        },\n      },\n    );\n  };\n\n  const rootId = React.useId();\n  const formId = `edit-user-form-${rootId}`;\n  const checkboxGroupId = `role-checkbox-group-${rootId}`;\n  const infoId = `${checkboxGroupId}-info`;\n  const showSingleRoleInfo = queryState.isSuccess && roles.length === 1;\n  return (\n    <DialogContent maxWidth=\"480px\">\n      <Flex\n        direction=\"column\"\n        gap=\"1\"\n        maxHeight=\"calc(100vh - var(--dialog-content-padding) * 2 - var(--space-6) - max(var(--space-6), 6vh)\"\n        minHeight=\"200px\"\n      >\n        <Dialog.Title>Edit roles</Dialog.Title>\n        <Dialog.Description>\n          Select the roles to assign to <Text weight=\"bold\">{displayName}</Text>\n        </Dialog.Description>\n        <Flex mt=\"4\" direction=\"column\" gap=\"1\" asChild minHeight=\"0\">\n          <Card\n            asChild\n            style={{ display: \"flex\", padding: \"2px 0\", flexGrow: 0 }}\n          >\n            <form\n              id={formId}\n              onSubmit={async (event) => {\n                event.preventDefault();\n                const formData = new FormData(event.currentTarget);\n                const selectedRoles = formData\n                  .getAll(\"roles\")\n                  .map((role) => role.toString());\n                onSubmitForm({ id: user.id, roles: selectedRoles });\n              }}\n            >\n              <ScrollArea>\n                <CheckboxGroup.Root\n                  defaultValue={user.roles?.map((role) => role.slug) || []}\n                  name=\"roles\"\n                  style={{ gap: \"0\" }}\n                  id={checkboxGroupId}\n                  onValueChange={(values) => {\n                    if (error && values.length > 0) {\n                      setError(\"\");\n                    }\n                  }}\n                >\n                  {roles.map((role, i) => (\n                    <Box key={role.slug}>\n                      <Flex px=\"4\" justify=\"center\" py=\"3\">\n                        <CheckboxGroup.Item\n                          value={role.slug}\n                          style={{\n                            width: \"100%\",\n                            gap: \"var(--space-3)\",\n                            alignItems: \"center\",\n                          }}\n                          disabled={showSingleRoleInfo}\n                        >\n                          <Flex direction=\"column\" width=\"100%\">\n                            <Text weight=\"bold\" size=\"2\">\n                              {role.name}\n                            </Text>\n                            <Text\n                              color=\"gray\"\n                              size=\"2\"\n                              style={{\n                                overflow: \"hidden\",\n                                textOverflow: \"ellipsis\",\n                                whiteSpace: \"nowrap\",\n                              }}\n                            >\n                              {role.description}\n                            </Text>\n                          </Flex>\n                        </CheckboxGroup.Item>\n                      </Flex>\n                      {i !== roles.length - 1 && (\n                        <Separator orientation=\"horizontal\" size=\"4\" />\n                      )}\n                    </Box>\n                  ))}\n                </CheckboxGroup.Root>\n              </ScrollArea>\n            </form>\n          </Card>\n        </Flex>\n\n        {showSingleRoleInfo ? (\n          <Text color=\"gray\" size=\"2\" id={infoId} mt=\"1\">\n            You cannot update the role for this user as there is only one role\n            available.\n          </Text>\n        ) : null}\n\n        {error ? (\n          <Callout.Root color=\"red\" mt=\"4\" mb=\"-2\">\n            <Callout.Text>{error}</Callout.Text>\n          </Callout.Root>\n        ) : null}\n\n        <Flex mt=\"5\" gap=\"3\" justify=\"end\">\n          <Dialog.Close>\n            <SecondaryButton disabled={updateUser.isPending}>\n              Cancel\n            </SecondaryButton>\n          </Dialog.Close>\n\n          <PrimaryButton\n            form={formId}\n            loading={updateUser.isPending}\n            disabled={queryState.isLoading || showSingleRoleInfo || undefined}\n          >\n            Save\n          </PrimaryButton>\n        </Flex>\n      </Flex>\n      {/* mirror errors in a live region */}\n      <VisuallyHidden asChild>\n        <section aria-live=\"polite\">\n          {getMutationErrorMessage(updateUser.error)}\n        </section>\n      </VisuallyHidden>\n    </DialogContent>\n  );\n}\n\nfunction getRoleSelectErrorMessage(error: unknown) {\n  if (!error) {\n    return null;\n  }\n  // TODO Handle server errors\n  return \"There was an error fetching roles. Please try again.\";\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n  if (!error) {\n    return null;\n  }\n  // TODO Handle server errors\n  return \"There was an error updating the user role. Please try again.\";\n}\n"],"mappings":";AAgEI,SACe,KADf;AA3DJ,YAAY,WAAW;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAyB,gBAAgB;AACzC,SAAS,yBAAyB;AAClC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B;AAAA,EAKE;AAAA,OACK;AASA,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA4B;AAC1B,QAAM,sBAAsB,kBAAkB;AAAA,IAC5C,OAAO;AAAA,MACL,aAAa,EAAE,OAAO,CAAC,GAAG,sBAAsB,MAAM;AAAA,IACxD;AAAA,EACF,CAAC;AACD,QAAM,EAAE,MAAM,GAAG,eAAe,IAAI;AACpC,QAAM,aAAa;AAAA,IACjB,OAAO,eAAe;AAAA,IACtB,WAAW,eAAe;AAAA,IAC1B,WAAW,eAAe;AAAA,EAC5B;AAEA,SACE,qBAAC,OAAO,MAAP,EAAa,GAAG,OACd;AAAA,gBAAY,oBAAC,OAAO,SAAP,EAAgB,UAAS;AAAA,IACtC,KAAK,uBACJ;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO,KAAK;AAAA,QACZ;AAAA,QACA,qBAAqB,MAAM,MAAM,aAAa,KAAK;AAAA;AAAA,IACrD,IAEA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO,KAAK;AAAA,QACZ;AAAA,QACA,qBAAqB,MAAM,MAAM,aAAa,KAAK;AAAA;AAAA,IACrD;AAAA,KAEJ;AAEJ;AAaO,SAAS,gCAAgC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyC;AACvC,QAAM,cAAc,YAAY,IAAI,KAAK,KAAK;AAC9C,QAAM,aAAa,kBAAkB;AACrC,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,IACtC,KAAK,OAAO,GAAG,CAAC,GAAG,QAAQ;AAAA,EAC7B;AAEA,QAAM,eAAe,CAAC,EAAE,IAAI,OAAAA,OAAM,MAAuC;AACvE,eAAW;AAAA,MACT,EAAE,QAAQ,IAAI,MAAM,EAAE,OAAAA,OAAM,EAAE;AAAA,MAC9B;AAAA,QACE,WAAW,MAAM;AACf,8BAAoB;AAAA,QACtB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,SAAS,MAAM,MAAM;AAC3B,QAAM,SAAS,kBAAkB,MAAM;AACvC,QAAM,WAAW,eAAe,MAAM;AACtC,QAAM,gBAAgB,GAAG,QAAQ;AACjC,QAAM,SAAS,GAAG,QAAQ;AAC1B,QAAM,UAAU,GAAG,QAAQ;AAC3B,QAAM,mBAAmB,CAAC,CAAC,WAAW;AACtC,QAAM,qBAAqB,WAAW,aAAa,MAAM,WAAW;AAEpE,SACE,qBAAC,iBAAc,UAAS,SACtB;AAAA,wBAAC,OAAO,OAAP,EAAa,uBAAS;AAAA,IACvB,qBAAC,OAAO,aAAP,EAAmB;AAAA;AAAA,MACW,oBAAC,QAAK,QAAO,QAAQ,uBAAY;AAAA,OAChE;AAAA,IACA,oBAAC,QAAK,IAAG,KAAI,WAAU,UAAS,KAAI,KAAI,SAAO,MAC7C;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,UAAU,OAAO,UAAU;AACzB,gBAAM,eAAe;AACrB,uBAAa,EAAE,IAAI,KAAK,IAAI,OAAO,CAAC,YAAY,EAAE,CAAC;AAAA,QACrD;AAAA,QAEA;AAAA;AAAA,YAAC,OAAO;AAAA,YAAP;AAAA,cACC,MAAK;AAAA,cACL,OAAO,gBAAgB;AAAA,cACvB,eAAe;AAAA,cACf,UAAU,WAAW,aAAa;AAAA,cAElC;AAAA,oCAAC,YAAS,SAAS,WAAW,WAC5B;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,aAAY;AAAA,oBACZ,mBAAiB;AAAA,oBACjB,gBAAc,oBAAoB;AAAA,oBAClC,oBACE,CAAC,oBAAoB,SAAS,sBAAsB,MAAM,EACvD,OAAO,OAAO,EACd,KAAK,GAAG,KAAK;AAAA;AAAA,gBAEpB,GACF;AAAA,gBAEA,oBAAC,iBACE,gBAAM,IAAI,CAAC,SACV,oBAAC,cAA2B,OAAO,KAAK,MACrC,eAAK,QADS,KAAK,IAEtB,CACD,GACH;AAAA;AAAA;AAAA,UACF;AAAA,UAEC,mBACC,oBAAC,QAAK,OAAM,OAAM,MAAK,KAAI,IAAI,SAC5B,oCAA0B,WAAW,KAAK,GAC7C,IACE;AAAA,UAEH,qBACC,oBAAC,QAAK,OAAM,QAAO,MAAK,KAAI,IAAI,QAAQ,IAAG,KAAI,2FAG/C,IACE;AAAA;AAAA;AAAA,IACN,GACF;AAAA,IAEC,WAAW,QACV,oBAAC,QAAQ,MAAR,EAAa,OAAM,OAAM,IAAG,KAAI,IAAG,MAClC,8BAAC,QAAQ,MAAR,EACE,kCAAwB,WAAW,KAAK,GAC3C,GACF,IACE;AAAA,IAEJ,qBAAC,QAAK,IAAG,KAAI,KAAI,KAAI,SAAQ,OAC3B;AAAA,0BAAC,OAAO,OAAP,EACC,8BAAC,mBAAgB,UAAU,WAAW,WAAW,oBAEjD,GACF;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,SAAS,WAAW;AAAA,UACpB,UAAU,WAAW,aAAa,sBAAsB;AAAA,UACzD;AAAA;AAAA,MAED;AAAA,OACF;AAAA,IAEA,oBAAC,kBAAe,SAAO,MACrB,8BAAC,aAAQ,aAAU,UAChB,kCAAwB,WAAW,KAAK,GAC3C,GACF;AAAA,KACF;AAEJ;AAKA,SAAS,mCAAmC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4C;AAC1C,QAAM,cAAc,YAAY,IAAI,KAAK,KAAK;AAC9C,QAAM,aAAa,kBAAkB;AACrC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AAEtD,QAAM,UAAU,MAAM;AACpB,QAAI,WAAW,SAAS,CAAC,OAAO;AAC9B,eAAS,sDAAsD;AAAA,IACjE;AAAA,EACF,GAAG,CAAC,WAAW,OAAO,KAAK,CAAC;AAE5B,QAAM,eAAe,CAAC,EAAE,IAAI,OAAAA,OAAM,MAAuC;AACvE,QAAIA,OAAM,WAAW,GAAG;AACtB,eAAS,iCAAiC;AAC1C;AAAA,IACF;AACA,eAAW;AAAA,MACT,EAAE,QAAQ,IAAI,MAAM,EAAE,OAAAA,OAAM,EAAE;AAAA,MAC9B;AAAA,QACE,WAAW,MAAM;AACf,8BAAoB;AAAA,QACtB;AAAA,QACA,SAAS,MAAM;AACb;AAAA,YACE;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,SAAS,MAAM,MAAM;AAC3B,QAAM,SAAS,kBAAkB,MAAM;AACvC,QAAM,kBAAkB,uBAAuB,MAAM;AACrD,QAAM,SAAS,GAAG,eAAe;AACjC,QAAM,qBAAqB,WAAW,aAAa,MAAM,WAAW;AACpE,SACE,qBAAC,iBAAc,UAAS,SACtB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,WAAU;AAAA,QAEV;AAAA,8BAAC,OAAO,OAAP,EAAa,wBAAU;AAAA,UACxB,qBAAC,OAAO,aAAP,EAAmB;AAAA;AAAA,YACY,oBAAC,QAAK,QAAO,QAAQ,uBAAY;AAAA,aACjE;AAAA,UACA,oBAAC,QAAK,IAAG,KAAI,WAAU,UAAS,KAAI,KAAI,SAAO,MAAC,WAAU,KACxD;AAAA,YAAC;AAAA;AAAA,cACC,SAAO;AAAA,cACP,OAAO,EAAE,SAAS,QAAQ,SAAS,SAAS,UAAU,EAAE;AAAA,cAExD;AAAA,gBAAC;AAAA;AAAA,kBACC,IAAI;AAAA,kBACJ,UAAU,OAAO,UAAU;AACzB,0BAAM,eAAe;AACrB,0BAAM,WAAW,IAAI,SAAS,MAAM,aAAa;AACjD,0BAAM,gBAAgB,SACnB,OAAO,OAAO,EACd,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC;AAChC,iCAAa,EAAE,IAAI,KAAK,IAAI,OAAO,cAAc,CAAC;AAAA,kBACpD;AAAA,kBAEA,8BAAC,cACC;AAAA,oBAAC,cAAc;AAAA,oBAAd;AAAA,sBACC,cAAc,KAAK,OAAO,IAAI,CAAC,SAAS,KAAK,IAAI,KAAK,CAAC;AAAA,sBACvD,MAAK;AAAA,sBACL,OAAO,EAAE,KAAK,IAAI;AAAA,sBAClB,IAAI;AAAA,sBACJ,eAAe,CAAC,WAAW;AACzB,4BAAI,SAAS,OAAO,SAAS,GAAG;AAC9B,mCAAS,EAAE;AAAA,wBACb;AAAA,sBACF;AAAA,sBAEC,gBAAM,IAAI,CAAC,MAAM,MAChB,qBAAC,OACC;AAAA,4CAAC,QAAK,IAAG,KAAI,SAAQ,UAAS,IAAG,KAC/B;AAAA,0BAAC,cAAc;AAAA,0BAAd;AAAA,4BACC,OAAO,KAAK;AAAA,4BACZ,OAAO;AAAA,8BACL,OAAO;AAAA,8BACP,KAAK;AAAA,8BACL,YAAY;AAAA,4BACd;AAAA,4BACA,UAAU;AAAA,4BAEV,+BAAC,QAAK,WAAU,UAAS,OAAM,QAC7B;AAAA,kDAAC,QAAK,QAAO,QAAO,MAAK,KACtB,eAAK,MACR;AAAA,8BACA;AAAA,gCAAC;AAAA;AAAA,kCACC,OAAM;AAAA,kCACN,MAAK;AAAA,kCACL,OAAO;AAAA,oCACL,UAAU;AAAA,oCACV,cAAc;AAAA,oCACd,YAAY;AAAA,kCACd;AAAA,kCAEC,eAAK;AAAA;AAAA,8BACR;AAAA,+BACF;AAAA;AAAA,wBACF,GACF;AAAA,wBACC,MAAM,MAAM,SAAS,KACpB,oBAAC,aAAU,aAAY,cAAa,MAAK,KAAI;AAAA,2BA9BvC,KAAK,IAgCf,CACD;AAAA;AAAA,kBACH,GACF;AAAA;AAAA,cACF;AAAA;AAAA,UACF,GACF;AAAA,UAEC,qBACC,oBAAC,QAAK,OAAM,QAAO,MAAK,KAAI,IAAI,QAAQ,IAAG,KAAI,2FAG/C,IACE;AAAA,UAEH,QACC,oBAAC,QAAQ,MAAR,EAAa,OAAM,OAAM,IAAG,KAAI,IAAG,MAClC,8BAAC,QAAQ,MAAR,EAAc,iBAAM,GACvB,IACE;AAAA,UAEJ,qBAAC,QAAK,IAAG,KAAI,KAAI,KAAI,SAAQ,OAC3B;AAAA,gCAAC,OAAO,OAAP,EACC,8BAAC,mBAAgB,UAAU,WAAW,WAAW,oBAEjD,GACF;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM;AAAA,gBACN,SAAS,WAAW;AAAA,gBACpB,UAAU,WAAW,aAAa,sBAAsB;AAAA,gBACzD;AAAA;AAAA,YAED;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,IAEA,oBAAC,kBAAe,SAAO,MACrB,8BAAC,aAAQ,aAAU,UAChB,kCAAwB,WAAW,KAAK,GAC3C,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,0BAA0B,OAAgB;AACjD,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAEA,SAAS,wBAAwB,OAAgB;AAC/C,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,SAAO;AACT;","names":["roles"]}
+{"version":3,"sources":["../../../src/lib/edit-user-role-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Box,\n  Card,\n  Callout,\n  CheckboxGroup,\n  Flex,\n  ScrollArea,\n  Text,\n  VisuallyHidden,\n  Separator,\n} from \"@radix-ui/themes\";\nimport { type ReactNode, useState } from \"react\";\nimport { useUpdateUserRole } from \"./api/user.js\";\nimport { Dialog, Button, Select, Skeleton } from \"./elements.js\";\nimport { getBestName } from \"./utils.js\";\nimport {\n  Member,\n  MemberRole,\n  RolesAndConfig403,\n  RolesAndConfig404,\n  useRolesAndConfig,\n} from \"../api/endpoint.js\";\n\ninterface EditUserRoleDialogProps extends Dialog.RootProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  user: Member;\n  children?: ReactNode;\n}\n\nexport function EditUserRoleDialog({\n  children,\n  user,\n  ...props\n}: EditUserRoleDialogProps) {\n  const rolesAndConfigQuery = useRolesAndConfig({\n    query: {\n      initialData: { roles: [], multipleRolesEnabled: false },\n    },\n  });\n  const { data, ...restQueryState } = rolesAndConfigQuery;\n  const queryState = {\n    error: restQueryState.error,\n    isLoading: restQueryState.isLoading,\n    isSuccess: restQueryState.isSuccess,\n  };\n\n  return (\n    <Dialog.Root {...props}>\n      {children && <Dialog.Trigger>{children}</Dialog.Trigger>}\n      {data.multipleRolesEnabled ? (\n        <EditMultipleUserRolesDialogContent\n          user={user}\n          roles={data.roles}\n          queryState={queryState}\n          onFormSubmitSuccess={() => props.onOpenChange(false)}\n        />\n      ) : (\n        <EditSingleUserRoleDialogContent\n          user={user}\n          roles={data.roles}\n          queryState={queryState}\n          onFormSubmitSuccess={() => props.onOpenChange(false)}\n        />\n      )}\n    </Dialog.Root>\n  );\n}\n\ninterface EditSingleUserRoleDialogContentProps {\n  user: Member;\n  roles: MemberRole[];\n  queryState: {\n    error: RolesAndConfig403 | RolesAndConfig404 | null;\n    isLoading: boolean;\n    isSuccess: boolean;\n  };\n  onFormSubmitSuccess: () => void;\n}\n\nexport function EditSingleUserRoleDialogContent({\n  user,\n  roles,\n  queryState,\n  onFormSubmitSuccess,\n}: EditSingleUserRoleDialogContentProps) {\n  const displayName = getBestName(user) || user.email;\n  const updateUser = useUpdateUserRole();\n  const [selectedRole, setSelectedRole] = useState(\n    user.roles?.at(0)?.slug || \"Unknown\",\n  );\n\n  const onSubmitForm = ({ id, roles }: { id: string; roles: string[] }) => {\n    updateUser.mutate(\n      { userId: id, data: { roles } },\n      {\n        onSuccess: () => {\n          onFormSubmitSuccess();\n        },\n      },\n    );\n  };\n\n  const rootId = React.useId();\n  const formId = `edit-user-form-${rootId}`;\n  const selectId = `role-select-${rootId}`;\n  const selectLabelId = `${selectId}-label`;\n  const infoId = `${selectId}-info`;\n  const errorId = `${selectId}-error`;\n  const showErrorMessage = !!queryState.error;\n  const showSingleRoleInfo = queryState.isSuccess && roles.length === 1;\n\n  return (\n    <Dialog.Content maxWidth=\"480px\">\n      <Dialog.Title>Edit role</Dialog.Title>\n      <Dialog.Description>\n        Select the role to assign to <Text weight=\"bold\">{displayName}</Text>\n      </Dialog.Description>\n      <Flex mt=\"2\" direction=\"column\" gap=\"1\" asChild>\n        <form\n          id={formId}\n          onSubmit={async (event) => {\n            event.preventDefault();\n            onSubmitForm({ id: user.id, roles: [selectedRole] });\n          }}\n        >\n          <Select.Root\n            name=\"roles\"\n            value={selectedRole ?? \"Unknown\"}\n            onValueChange={setSelectedRole}\n            disabled={queryState.isLoading || showSingleRoleInfo}\n          >\n            <Skeleton loading={queryState.isLoading}>\n              <Select.Trigger\n                id={selectId}\n                placeholder=\"Assign a role\"\n                aria-labelledby={selectLabelId}\n                aria-invalid={showErrorMessage || undefined}\n                aria-describedby={\n                  [showErrorMessage && errorId, showSingleRoleInfo && infoId]\n                    .filter(Boolean)\n                    .join(\" \") || undefined\n                }\n              />\n            </Skeleton>\n\n            <Select.Content>\n              {roles.map((role) => (\n                <Select.Item key={role.slug} value={role.slug}>\n                  {role.name}\n                </Select.Item>\n              ))}\n            </Select.Content>\n          </Select.Root>\n\n          {showErrorMessage ? (\n            <Text color=\"red\" size=\"2\" id={errorId}>\n              {getRoleSelectErrorMessage(queryState.error)}\n            </Text>\n          ) : null}\n\n          {showSingleRoleInfo ? (\n            <Text color=\"gray\" size=\"2\" id={infoId} mt=\"1\">\n              You cannot update the role for this user as there is only one role\n              available.\n            </Text>\n          ) : null}\n        </form>\n      </Flex>\n\n      {updateUser.error ? (\n        <Callout.Root color=\"red\" mt=\"4\" mb=\"-2\">\n          <Callout.Text>\n            {getMutationErrorMessage(updateUser.error)}\n          </Callout.Text>\n        </Callout.Root>\n      ) : null}\n\n      <Flex mt=\"5\" gap=\"3\" justify=\"end\">\n        <Dialog.Close>\n          <Button variant=\"secondary\" disabled={updateUser.isPending}>\n            Cancel\n          </Button>\n        </Dialog.Close>\n\n        <Button\n          form={formId}\n          loading={updateUser.isPending}\n          disabled={queryState.isLoading || showSingleRoleInfo || undefined}\n        >\n          Save\n        </Button>\n      </Flex>\n      {/* mirror errors in a live region */}\n      <VisuallyHidden asChild>\n        <section aria-live=\"polite\">\n          {getMutationErrorMessage(updateUser.error)}\n        </section>\n      </VisuallyHidden>\n    </Dialog.Content>\n  );\n}\n\ntype EditMultipleUserRolesDialogContentProps =\n  EditSingleUserRoleDialogContentProps;\n\nfunction EditMultipleUserRolesDialogContent({\n  user,\n  roles,\n  queryState,\n  onFormSubmitSuccess,\n}: EditMultipleUserRolesDialogContentProps) {\n  const displayName = getBestName(user) || user.email;\n  const updateUser = useUpdateUserRole();\n  const [error, setError] = useState<string | null>(null);\n\n  React.useEffect(() => {\n    if (queryState.error && !error) {\n      setError(\"There was an error fetching roles. Please try again.\");\n    }\n  }, [queryState.error, error]);\n\n  const onSubmitForm = ({ id, roles }: { id: string; roles: string[] }) => {\n    if (roles.length === 0) {\n      setError(\"Please select at least one role\");\n      return;\n    }\n    updateUser.mutate(\n      { userId: id, data: { roles } },\n      {\n        onSuccess: () => {\n          onFormSubmitSuccess();\n        },\n        onError: () => {\n          setError(\n            \"There was an error updating the user role. Please try again.\",\n          );\n        },\n      },\n    );\n  };\n\n  const rootId = React.useId();\n  const formId = `edit-user-form-${rootId}`;\n  const checkboxGroupId = `role-checkbox-group-${rootId}`;\n  const infoId = `${checkboxGroupId}-info`;\n  const showSingleRoleInfo = queryState.isSuccess && roles.length === 1;\n  return (\n    <Dialog.Content maxWidth=\"480px\">\n      <Flex\n        direction=\"column\"\n        gap=\"1\"\n        maxHeight=\"calc(100vh - var(--dialog-content-padding) * 2 - var(--space-6) - max(var(--space-6), 6vh)\"\n        minHeight=\"200px\"\n      >\n        <Dialog.Title>Edit roles</Dialog.Title>\n        <Dialog.Description>\n          Select the roles to assign to <Text weight=\"bold\">{displayName}</Text>\n        </Dialog.Description>\n        <Flex mt=\"4\" direction=\"column\" gap=\"1\" asChild minHeight=\"0\">\n          <Card\n            asChild\n            style={{ display: \"flex\", padding: \"2px 0\", flexGrow: 0 }}\n          >\n            <form\n              id={formId}\n              onSubmit={async (event) => {\n                event.preventDefault();\n                const formData = new FormData(event.currentTarget);\n                const selectedRoles = formData\n                  .getAll(\"roles\")\n                  .map((role) => role.toString());\n                onSubmitForm({ id: user.id, roles: selectedRoles });\n              }}\n            >\n              <ScrollArea>\n                <CheckboxGroup.Root\n                  defaultValue={user.roles?.map((role) => role.slug) || []}\n                  name=\"roles\"\n                  style={{ gap: \"0\" }}\n                  id={checkboxGroupId}\n                  onValueChange={(values) => {\n                    if (error && values.length > 0) {\n                      setError(\"\");\n                    }\n                  }}\n                >\n                  {roles.map((role, i) => (\n                    <Box key={role.slug}>\n                      <Flex px=\"4\" justify=\"center\" py=\"3\">\n                        <CheckboxGroup.Item\n                          value={role.slug}\n                          style={{\n                            width: \"100%\",\n                            gap: \"var(--space-3)\",\n                            alignItems: \"center\",\n                          }}\n                          disabled={showSingleRoleInfo}\n                        >\n                          <Flex direction=\"column\" width=\"100%\">\n                            <Text weight=\"bold\" size=\"2\">\n                              {role.name}\n                            </Text>\n                            <Text\n                              color=\"gray\"\n                              size=\"2\"\n                              style={{\n                                overflow: \"hidden\",\n                                textOverflow: \"ellipsis\",\n                                whiteSpace: \"nowrap\",\n                              }}\n                            >\n                              {role.description}\n                            </Text>\n                          </Flex>\n                        </CheckboxGroup.Item>\n                      </Flex>\n                      {i !== roles.length - 1 && (\n                        <Separator orientation=\"horizontal\" size=\"4\" />\n                      )}\n                    </Box>\n                  ))}\n                </CheckboxGroup.Root>\n              </ScrollArea>\n            </form>\n          </Card>\n        </Flex>\n\n        {showSingleRoleInfo ? (\n          <Text color=\"gray\" size=\"2\" id={infoId} mt=\"1\">\n            You cannot update the role for this user as there is only one role\n            available.\n          </Text>\n        ) : null}\n\n        {error ? (\n          <Callout.Root color=\"red\" mt=\"4\" mb=\"-2\">\n            <Callout.Text>{error}</Callout.Text>\n          </Callout.Root>\n        ) : null}\n\n        <Flex mt=\"5\" gap=\"3\" justify=\"end\">\n          <Dialog.Close>\n            <Button variant=\"secondary\" disabled={updateUser.isPending}>\n              Cancel\n            </Button>\n          </Dialog.Close>\n\n          <Button\n            form={formId}\n            loading={updateUser.isPending}\n            disabled={queryState.isLoading || showSingleRoleInfo || undefined}\n          >\n            Save\n          </Button>\n        </Flex>\n      </Flex>\n      {/* mirror errors in a live region */}\n      <VisuallyHidden asChild>\n        <section aria-live=\"polite\">\n          {getMutationErrorMessage(updateUser.error)}\n        </section>\n      </VisuallyHidden>\n    </Dialog.Content>\n  );\n}\n\nfunction getRoleSelectErrorMessage(error: unknown) {\n  if (!error) {\n    return null;\n  }\n  // TODO Handle server errors\n  return \"There was an error fetching roles. Please try again.\";\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n  if (!error) {\n    return null;\n  }\n  // TODO Handle server errors\n  return \"There was an error updating the user role. Please try again.\";\n}\n"],"mappings":"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","names":["roles"]}

package/dist/esm/lib/elements/alert-dialog.d.ts

@@ -0,0 +1,3 @@
+import 'react';
+export { Action, ActionProps, Cancel, CancelProps, Description, DescriptionProps, Root, RootProps, Title, TitleProps, Trigger, TriggerProps } from '@radix-ui/themes/components/alert-dialog';
+export { A as Content, C as ContentProps } from '../../alert-dialog-BlG3_awx.js';

package/dist/esm/lib/elements/alert-dialog.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  Content as RadixAlertDialogContent
+} from "@radix-ui/themes/components/alert-dialog";
+import { useElement } from "../widgets-context.js";
+import { getDomProps, namespaceClassNames } from "../utils.js";
+import { useDialogOverlayHack } from "./utils.js";
+const AlertDialogContent = React.forwardRef(
+  function AlertDialogContent2({ className, ...props }, forwardedRef) {
+    const element = useElement("dialog");
+    const { ref } = useDialogOverlayHack(forwardedRef, {
+      className: namespaceClassNames("dialog-overlay"),
+      selector: ".rt-DialogOverlay"
+    });
+    return /* @__PURE__ */ jsx(
+      RadixAlertDialogContent,
+      {
+        ref,
+        ...getDomProps({ elementId: "dialog", className }),
+        ...props,
+        ...element
+      }
+    );
+  }
+);
+import {
+  Action,
+  Cancel,
+  Description,
+  Root,
+  Title,
+  Trigger
+} from "@radix-ui/themes/components/alert-dialog";
+export {
+  Action,
+  Cancel,
+  AlertDialogContent as Content,
+  Description,
+  Root,
+  Title,
+  Trigger
+};
+//# sourceMappingURL=alert-dialog.js.map

package/dist/esm/lib/elements/alert-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/lib/elements/alert-dialog.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport {\n  Content as RadixAlertDialogContent,\n  type ContentProps as RadixAlertDialogContentProps,\n} from \"@radix-ui/themes/components/alert-dialog\";\nimport { useElement } from \"../widgets-context.js\";\nimport { getDomProps, namespaceClassNames } from \"../utils.js\";\nimport { useDialogOverlayHack } from \"./utils.js\";\n\ninterface ContentProps extends RadixAlertDialogContentProps {}\n\nconst AlertDialogContent = React.forwardRef<HTMLDivElement, ContentProps>(\n  function AlertDialogContent({ className, ...props }, forwardedRef) {\n    const element = useElement(\"dialog\");\n    const { ref } = useDialogOverlayHack(forwardedRef, {\n      className: namespaceClassNames(\"dialog-overlay\"),\n      selector: \".rt-DialogOverlay\",\n    });\n    return (\n      <RadixAlertDialogContent\n        ref={ref}\n        {...getDomProps({ elementId: \"dialog\", className })}\n        {...props}\n        {...element}\n      />\n    );\n  },\n);\n\nexport { AlertDialogContent as Content };\nexport type { ContentProps };\n\nexport {\n  Action,\n  Cancel,\n  Description,\n  Root,\n  Title,\n  Trigger,\n} from \"@radix-ui/themes/components/alert-dialog\";\nexport type {\n  ActionProps,\n  CancelProps,\n  DescriptionProps,\n  RootProps,\n  TitleProps,\n  TriggerProps,\n} from \"@radix-ui/themes/components/alert-dialog\";\n"],"mappings":";AAoBM;AAnBN,YAAY,WAAW;AACvB;AAAA,EACE,WAAW;AAAA,OAEN;AACP,SAAS,kBAAkB;AAC3B,SAAS,aAAa,2BAA2B;AACjD,SAAS,4BAA4B;AAIrC,MAAM,qBAAqB,MAAM;AAAA,EAC/B,SAASA,oBAAmB,EAAE,WAAW,GAAG,MAAM,GAAG,cAAc;AACjE,UAAM,UAAU,WAAW,QAAQ;AACnC,UAAM,EAAE,IAAI,IAAI,qBAAqB,cAAc;AAAA,MACjD,WAAW,oBAAoB,gBAAgB;AAAA,MAC/C,UAAU;AAAA,IACZ,CAAC;AACD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAG,YAAY,EAAE,WAAW,UAAU,UAAU,CAAC;AAAA,QACjD,GAAG;AAAA,QACH,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAKA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":["AlertDialogContent"]}

package/dist/esm/lib/elements/dialog.d.ts

@@ -0,0 +1,3 @@
+import 'react';
+export { Close, CloseProps, Description, DescriptionProps, Root, RootProps, Title, TitleProps, Trigger, TriggerProps } from '@radix-ui/themes/components/dialog';
+export { D as Content, C as ContentProps } from '../../dialog-C15qCLN3.js';

package/dist/esm/lib/elements/dialog.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  Content as RadixDialogContent
+} from "@radix-ui/themes/components/dialog";
+import { useElement } from "../widgets-context.js";
+import { getDomProps, namespaceClassNames } from "../utils.js";
+import { useDialogOverlayHack } from "./utils.js";
+const DialogContent = React.forwardRef(
+  function DialogContent2({ className, ...props }, forwardedRef) {
+    const element = useElement("dialog");
+    const { ref } = useDialogOverlayHack(forwardedRef, {
+      className: namespaceClassNames("dialog-overlay"),
+      selector: ".rt-DialogOverlay"
+    });
+    return /* @__PURE__ */ jsx(
+      RadixDialogContent,
+      {
+        ref,
+        ...getDomProps({ elementId: "dialog", className }),
+        ...props,
+        ...element
+      }
+    );
+  }
+);
+import {
+  Close,
+  Description,
+  Root,
+  Title,
+  Trigger
+} from "@radix-ui/themes/components/dialog";
+export {
+  Close,
+  DialogContent as Content,
+  Description,
+  Root,
+  Title,
+  Trigger
+};
+//# sourceMappingURL=dialog.js.map

package/dist/esm/lib/elements/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/lib/elements/dialog.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport {\n  Content as RadixDialogContent,\n  type ContentProps as RadixDialogContentProps,\n} from \"@radix-ui/themes/components/dialog\";\nimport { useElement } from \"../widgets-context.js\";\nimport { getDomProps, namespaceClassNames } from \"../utils.js\";\nimport { useDialogOverlayHack } from \"./utils.js\";\n\ninterface ContentProps extends RadixDialogContentProps {}\n\nconst DialogContent = React.forwardRef<HTMLDivElement, ContentProps>(\n  function DialogContent({ className, ...props }, forwardedRef) {\n    const element = useElement(\"dialog\");\n    const { ref } = useDialogOverlayHack(forwardedRef, {\n      className: namespaceClassNames(\"dialog-overlay\"),\n      selector: \".rt-DialogOverlay\",\n    });\n    return (\n      <RadixDialogContent\n        ref={ref}\n        {...getDomProps({ elementId: \"dialog\", className })}\n        {...props}\n        {...element}\n      />\n    );\n  },\n);\n\nexport { DialogContent as Content };\nexport type { ContentProps };\n\nexport {\n  Close,\n  Description,\n  Root,\n  Title,\n  Trigger,\n} from \"@radix-ui/themes/components/dialog\";\nexport type {\n  CloseProps,\n  DescriptionProps,\n  RootProps,\n  TitleProps,\n  TriggerProps,\n} from \"@radix-ui/themes/components/dialog\";\n"],"mappings":";AAoBM;AAnBN,YAAY,WAAW;AACvB;AAAA,EACE,WAAW;AAAA,OAEN;AACP,SAAS,kBAAkB;AAC3B,SAAS,aAAa,2BAA2B;AACjD,SAAS,4BAA4B;AAIrC,MAAM,gBAAgB,MAAM;AAAA,EAC1B,SAASA,eAAc,EAAE,WAAW,GAAG,MAAM,GAAG,cAAc;AAC5D,UAAM,UAAU,WAAW,QAAQ;AACnC,UAAM,EAAE,IAAI,IAAI,qBAAqB,cAAc;AAAA,MACjD,WAAW,oBAAoB,gBAAgB;AAAA,MAC/C,UAAU;AAAA,IACZ,CAAC;AACD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAG,YAAY,EAAE,WAAW,UAAU,UAAU,CAAC;AAAA,QACjD,GAAG;AAAA,QACH,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAKA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":["DialogContent"]}

package/dist/esm/lib/elements/dropdown-menu.d.ts

@@ -0,0 +1,3 @@
+import 'react';
+export { Group, GroupProps, Label, LabelProps, RadioGroup, RadioGroupProps, Root, RootProps, Separator, SeparatorProps, Sub, SubContent, SubContentProps, SubProps, SubTrigger, SubTriggerProps, Trigger, TriggerIcon, TriggerIconProps, TriggerProps } from '@radix-ui/themes/components/dropdown-menu';
+export { C as CheckboxItem, b as CheckboxItemProps, D as Content, a as ContentProps, M as Item, I as ItemProps, R as RadioItem, c as RadioItemProps } from '../../dropdown-menu-BQ5LtvdR.js';

package/dist/esm/lib/elements/dropdown-menu.js

@@ -0,0 +1,131 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  Content as RadixContent,
+  Item as RadixItem,
+  CheckboxItem as RadixCheckboxItem,
+  RadioItem as RadixRadioItem
+} from "@radix-ui/themes/components/dropdown-menu";
+import cx from "clsx";
+import { useElement } from "../widgets-context.js";
+import { getDomProps, namespaceClassNames } from "../utils.js";
+const DropdownMenuContent = React.forwardRef(
+  function DropdownMenuContent2({ className, ...props }, ref) {
+    const element = useElement("dropdown");
+    return /* @__PURE__ */ jsx(
+      RadixContent,
+      {
+        ref,
+        className: cx(namespaceClassNames("dropdown"), className),
+        ...props,
+        ...element
+      }
+    );
+  }
+);
+const MenuItem = React.forwardRef(function MenuItem2({ className, variant = "primary", ...props }, ref) {
+  const element = useElement(`${variant}MenuItem`);
+  return /* @__PURE__ */ jsx(
+    RadixItem,
+    {
+      ref,
+      ...getDomProps({
+        elementId: `${variant}MenuItem`,
+        className: cx(
+          className,
+          // TODO: Remove BEM-style selector once conventions are standardized
+          variant !== "primary" && `menu-item--${variant}`
+        )
+      }),
+      ...getItemRadixProps(variant),
+      ...props,
+      ...element
+    }
+  );
+});
+const CheckboxMenuItem = React.forwardRef(
+  function CheckboxMenuItem2({ className, variant = "primary", ...props }, ref) {
+    const element = useElement(`${variant}MenuItem`);
+    return /* @__PURE__ */ jsx(
+      RadixCheckboxItem,
+      {
+        ref,
+        className: cx(
+          className,
+          namespaceClassNames(
+            "menu-item",
+            // TODO: Remove BEM-style selector once conventions are standardized
+            variant !== "primary" && `menu-item--${variant}`
+          )
+        ),
+        ...getItemRadixProps(variant),
+        ...props,
+        ...element
+      }
+    );
+  }
+);
+const RadioMenuItem = React.forwardRef(
+  function RadioMenuItem2({ className, variant = "primary", ...props }, ref) {
+    const element = useElement(`${variant}MenuItem`);
+    return /* @__PURE__ */ jsx(
+      RadixRadioItem,
+      {
+        ref,
+        className: cx(
+          className,
+          namespaceClassNames(
+            "menu-item",
+            // TODO: Remove BEM-style selector once conventions are standardized
+            variant !== "primary" && `menu-item--${variant}`
+          )
+        ),
+        ...getItemRadixProps(variant),
+        ...props,
+        ...element
+      }
+    );
+  }
+);
+function getItemRadixProps(variant) {
+  if (variant === "primary") {
+    return {};
+  }
+  if (variant === "destructive") {
+    return {
+      color: "red"
+    };
+  }
+  variant;
+  return {};
+}
+import {
+  Group,
+  Label,
+  RadioGroup,
+  Root,
+  Separator,
+  Sub,
+  SubContent,
+  SubTrigger,
+  Trigger,
+  TriggerIcon
+} from "@radix-ui/themes/components/dropdown-menu";
+export {
+  CheckboxMenuItem as CheckboxItem,
+  DropdownMenuContent as Content,
+  Group,
+  MenuItem as Item,
+  Label,
+  RadioGroup,
+  RadioMenuItem as RadioItem,
+  Root,
+  Separator,
+  Sub,
+  SubContent,
+  SubTrigger,
+  Trigger,
+  TriggerIcon
+};
+//# sourceMappingURL=dropdown-menu.js.map

package/dist/esm/lib/elements/dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/lib/elements/dropdown-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Content as RadixContent,\n  Item as RadixItem,\n  CheckboxItem as RadixCheckboxItem,\n  RadioItem as RadixRadioItem,\n  type ContentProps as RadixContentProps,\n  type ItemProps as RadixItemProps,\n  type CheckboxItemProps as RadixCheckboxItemProps,\n  type RadioItemProps as RadixRadioItemProps,\n} from \"@radix-ui/themes/components/dropdown-menu\";\nimport cx from \"clsx\";\nimport { useElement } from \"../widgets-context.js\";\nimport { getDomProps, namespaceClassNames } from \"../utils.js\";\n\ninterface ContentProps extends Omit<RadixContentProps, \"variant\"> {}\n\nconst DropdownMenuContent = React.forwardRef<HTMLDivElement, ContentProps>(\n  function DropdownMenuContent({ className, ...props }, ref) {\n    const element = useElement(\"dropdown\");\n    return (\n      <RadixContent\n        ref={ref}\n        className={cx(namespaceClassNames(\"dropdown\"), className)}\n        {...props}\n        {...element}\n      />\n    );\n  },\n);\n\ninterface ItemProps extends Omit<RadixItemProps, \"variant\" | \"color\"> {\n  variant?: \"primary\" | \"destructive\";\n}\n\nconst MenuItem = React.forwardRef<HTMLDivElement, ItemProps>(function MenuItem(\n  { className, variant = \"primary\", ...props },\n  ref,\n) {\n  const element = useElement(`${variant}MenuItem`);\n  return (\n    <RadixItem\n      ref={ref}\n      {...getDomProps({\n        elementId: `${variant}MenuItem`,\n        className: cx(\n          className,\n          // TODO: Remove BEM-style selector once conventions are standardized\n          variant !== \"primary\" && `menu-item--${variant}`,\n        ),\n      })}\n      {...getItemRadixProps(variant)}\n      {...props}\n      {...element}\n    />\n  );\n});\n\ninterface CheckboxItemProps extends Omit<RadixCheckboxItemProps, \"variant\"> {\n  variant?: \"primary\";\n}\n\nconst CheckboxMenuItem = React.forwardRef<HTMLDivElement, CheckboxItemProps>(\n  function CheckboxMenuItem({ className, variant = \"primary\", ...props }, ref) {\n    const element = useElement(`${variant}MenuItem`);\n    return (\n      <RadixCheckboxItem\n        ref={ref}\n        className={cx(\n          className,\n          namespaceClassNames(\n            \"menu-item\",\n            // TODO: Remove BEM-style selector once conventions are standardized\n            variant !== \"primary\" && `menu-item--${variant}`,\n          ),\n        )}\n        {...getItemRadixProps(variant)}\n        {...props}\n        {...element}\n      />\n    );\n  },\n);\n\ninterface RadioItemProps extends Omit<RadixRadioItemProps, \"variant\"> {\n  variant?: \"primary\";\n}\n\nconst RadioMenuItem = React.forwardRef<HTMLDivElement, RadioItemProps>(\n  function RadioMenuItem({ className, variant = \"primary\", ...props }, ref) {\n    const element = useElement(`${variant}MenuItem`);\n    return (\n      <RadixRadioItem\n        ref={ref}\n        className={cx(\n          className,\n          namespaceClassNames(\n            \"menu-item\",\n            // TODO: Remove BEM-style selector once conventions are standardized\n            variant !== \"primary\" && `menu-item--${variant}`,\n          ),\n        )}\n        {...getItemRadixProps(variant)}\n        {...props}\n        {...element}\n      />\n    );\n  },\n);\n\nfunction getItemRadixProps(\n  variant: Exclude<ItemProps[\"variant\"], undefined>,\n): Pick<RadixItemProps, \"color\"> {\n  if (variant === \"primary\") {\n    return {};\n  }\n  if (variant === \"destructive\") {\n    return {\n      color: \"red\",\n    };\n  }\n  variant satisfies never;\n  return {};\n}\n\nexport {\n  DropdownMenuContent as Content,\n  MenuItem as Item,\n  CheckboxMenuItem as CheckboxItem,\n  RadioMenuItem as RadioItem,\n};\n\nexport type { ContentProps, ItemProps, CheckboxItemProps, RadioItemProps };\n\nexport {\n  Group,\n  Label,\n  RadioGroup,\n  Root,\n  Separator,\n  Sub,\n  SubContent,\n  SubTrigger,\n  Trigger,\n  TriggerIcon,\n} from \"@radix-ui/themes/components/dropdown-menu\";\nexport type {\n  GroupProps,\n  LabelProps,\n  RadioGroupProps,\n  RootProps,\n  SeparatorProps,\n  SubContentProps,\n  SubProps,\n  SubTriggerProps,\n  TriggerIconProps,\n  TriggerProps,\n} from \"@radix-ui/themes/components/dropdown-menu\";\n"],"mappings":";AAuBM;AArBN,YAAY,WAAW;AACvB;AAAA,EACE,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,aAAa;AAAA,OAKR;AACP,OAAO,QAAQ;AACf,SAAS,kBAAkB;AAC3B,SAAS,aAAa,2BAA2B;AAIjD,MAAM,sBAAsB,MAAM;AAAA,EAChC,SAASA,qBAAoB,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACzD,UAAM,UAAU,WAAW,UAAU;AACrC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,oBAAoB,UAAU,GAAG,SAAS;AAAA,QACvD,GAAG;AAAA,QACH,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAMA,MAAM,WAAW,MAAM,WAAsC,SAASC,UACpE,EAAE,WAAW,UAAU,WAAW,GAAG,MAAM,GAC3C,KACA;AACA,QAAM,UAAU,WAAW,GAAG,OAAO,UAAU;AAC/C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACC,GAAG,YAAY;AAAA,QACd,WAAW,GAAG,OAAO;AAAA,QACrB,WAAW;AAAA,UACT;AAAA;AAAA,UAEA,YAAY,aAAa,cAAc,OAAO;AAAA,QAChD;AAAA,MACF,CAAC;AAAA,MACA,GAAG,kBAAkB,OAAO;AAAA,MAC5B,GAAG;AAAA,MACH,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAMD,MAAM,mBAAmB,MAAM;AAAA,EAC7B,SAASC,kBAAiB,EAAE,WAAW,UAAU,WAAW,GAAG,MAAM,GAAG,KAAK;AAC3E,UAAM,UAAU,WAAW,GAAG,OAAO,UAAU;AAC/C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE;AAAA;AAAA,YAEA,YAAY,aAAa,cAAc,OAAO;AAAA,UAChD;AAAA,QACF;AAAA,QACC,GAAG,kBAAkB,OAAO;AAAA,QAC5B,GAAG;AAAA,QACH,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAMA,MAAM,gBAAgB,MAAM;AAAA,EAC1B,SAASC,eAAc,EAAE,WAAW,UAAU,WAAW,GAAG,MAAM,GAAG,KAAK;AACxE,UAAM,UAAU,WAAW,GAAG,OAAO,UAAU;AAC/C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE;AAAA;AAAA,YAEA,YAAY,aAAa,cAAc,OAAO;AAAA,UAChD;AAAA,QACF;AAAA,QACC,GAAG,kBAAkB,OAAO;AAAA,QAC5B,GAAG;AAAA,QACH,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,SAAS,kBACP,SAC+B;AAC/B,MAAI,YAAY,WAAW;AACzB,WAAO,CAAC;AAAA,EACV;AACA,MAAI,YAAY,eAAe;AAC7B,WAAO;AAAA,MACL,OAAO;AAAA,IACT;AAAA,EACF;AACA;AACA,SAAO,CAAC;AACV;AAWA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":["DropdownMenuContent","MenuItem","CheckboxMenuItem","RadioMenuItem"]}

package/dist/esm/lib/elements/select.d.ts

@@ -0,0 +1,4 @@
+import 'react';
+import '@radix-ui/themes';
+export { Group, GroupProps, Label, LabelProps, Root, RootProps, Separator, SeparatorProps } from '@radix-ui/themes/components/select';
+export { a as Content, C as ContentProps, b as Item, I as ItemProps, S as Trigger, T as TriggerProps } from '../../select-KR89Qnvm.js';

package/dist/esm/lib/elements/select.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Select as RadixSelect } from "@radix-ui/themes";
+import cx from "clsx";
+import { useElement } from "../widgets-context.js";
+import { getDomProps, namespaceClassNames } from "../utils.js";
+const SelectTrigger = React.forwardRef(
+  function SelectTrigger2({ className, ...props }, ref) {
+    const element = useElement("select");
+    return /* @__PURE__ */ jsx(
+      RadixSelect.Trigger,
+      {
+        ref,
+        ...getDomProps({ elementId: "select", className }),
+        ...props,
+        ...element
+      }
+    );
+  }
+);
+const SelectContent = React.forwardRef(
+  function SelectContent2({ className, ...props }, ref) {
+    const element = useElement("dropdown");
+    return /* @__PURE__ */ jsx(
+      RadixSelect.Content,
+      {
+        ref,
+        ...getDomProps({
+          elementId: "dropdown",
+          // TODO: This should probably be removed in the next major version. We
+          // should have a consistent way to differentiate between dropdowns and
+          // selects in the elements API.
+          className: cx(className, namespaceClassNames("select-dropdown"))
+        }),
+        ...props,
+        ...element
+      }
+    );
+  }
+);
+const SelectItem = React.forwardRef(
+  function SelectItem2({ className, ...props }, ref) {
+    const element = useElement("primaryMenuItem");
+    return /* @__PURE__ */ jsx(
+      RadixSelect.Item,
+      {
+        ref,
+        ...getDomProps({
+          elementId: "primaryMenuItem",
+          // TODO: This should probably be removed in the next major version. We
+          // should have a consistent way to differentiate between dropdowns and
+          // selects in the elements API.
+          className: cx(className, namespaceClassNames("select-item"))
+        }),
+        ...props,
+        ...element
+      }
+    );
+  }
+);
+import {
+  Group,
+  Label,
+  Root,
+  Separator
+} from "@radix-ui/themes/components/select";
+export {
+  SelectContent as Content,
+  Group,
+  SelectItem as Item,
+  Label,
+  Root,
+  Separator,
+  SelectTrigger as Trigger
+};
+//# sourceMappingURL=select.js.map

package/dist/esm/lib/elements/select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/lib/elements/select.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Select as RadixSelect } from \"@radix-ui/themes\";\nimport cx from \"clsx\";\nimport { useElement } from \"../widgets-context.js\";\nimport { getDomProps, namespaceClassNames } from \"../utils.js\";\n\ninterface TriggerProps extends Omit<RadixSelect.TriggerProps, \"variant\"> {}\n\nconst SelectTrigger = React.forwardRef<HTMLButtonElement, TriggerProps>(\n  function SelectTrigger({ className, ...props }, ref) {\n    const element = useElement(\"select\");\n    return (\n      <RadixSelect.Trigger\n        ref={ref}\n        {...getDomProps({ elementId: \"select\", className })}\n        {...props}\n        {...element}\n      />\n    );\n  },\n);\n\ninterface ContentProps extends Omit<RadixSelect.ContentProps, \"variant\"> {}\n\nconst SelectContent = React.forwardRef<HTMLDivElement, ContentProps>(\n  function SelectContent({ className, ...props }, ref) {\n    const element = useElement(\"dropdown\");\n    return (\n      <RadixSelect.Content\n        ref={ref}\n        {...getDomProps({\n          elementId: \"dropdown\",\n          // TODO: This should probably be removed in the next major version. We\n          // should have a consistent way to differentiate between dropdowns and\n          // selects in the elements API.\n          className: cx(className, namespaceClassNames(\"select-dropdown\")),\n        })}\n        {...props}\n        {...element}\n      />\n    );\n  },\n);\n\ninterface ItemProps extends Omit<RadixSelect.ItemProps, \"variant\"> {}\n\nconst SelectItem = React.forwardRef<HTMLDivElement, ItemProps>(\n  function SelectItem({ className, ...props }, ref) {\n    const element = useElement(\"primaryMenuItem\");\n    return (\n      <RadixSelect.Item\n        ref={ref}\n        {...getDomProps({\n          elementId: \"primaryMenuItem\",\n          // TODO: This should probably be removed in the next major version. We\n          // should have a consistent way to differentiate between dropdowns and\n          // selects in the elements API.\n          className: cx(className, namespaceClassNames(\"select-item\")),\n        })}\n        {...props}\n        {...element}\n      />\n    );\n  },\n);\n\nexport {\n  SelectTrigger as Trigger,\n  SelectContent as Content,\n  SelectItem as Item,\n};\n\nexport type { TriggerProps, ContentProps, ItemProps };\n\nexport {\n  Group,\n  Label,\n  Root,\n  Separator,\n} from \"@radix-ui/themes/components/select\";\nexport type {\n  GroupProps,\n  LabelProps,\n  RootProps,\n  SeparatorProps,\n} from \"@radix-ui/themes/components/select\";\n"],"mappings":";AAcM;AAZN,YAAY,WAAW;AACvB,SAAS,UAAU,mBAAmB;AACtC,OAAO,QAAQ;AACf,SAAS,kBAAkB;AAC3B,SAAS,aAAa,2BAA2B;AAIjD,MAAM,gBAAgB,MAAM;AAAA,EAC1B,SAASA,eAAc,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACnD,UAAM,UAAU,WAAW,QAAQ;AACnC,WACE;AAAA,MAAC,YAAY;AAAA,MAAZ;AAAA,QACC;AAAA,QACC,GAAG,YAAY,EAAE,WAAW,UAAU,UAAU,CAAC;AAAA,QACjD,GAAG;AAAA,QACH,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAIA,MAAM,gBAAgB,MAAM;AAAA,EAC1B,SAASC,eAAc,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACnD,UAAM,UAAU,WAAW,UAAU;AACrC,WACE;AAAA,MAAC,YAAY;AAAA,MAAZ;AAAA,QACC;AAAA,QACC,GAAG,YAAY;AAAA,UACd,WAAW;AAAA;AAAA;AAAA;AAAA,UAIX,WAAW,GAAG,WAAW,oBAAoB,iBAAiB,CAAC;AAAA,QACjE,CAAC;AAAA,QACA,GAAG;AAAA,QACH,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAIA,MAAM,aAAa,MAAM;AAAA,EACvB,SAASC,YAAW,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAChD,UAAM,UAAU,WAAW,iBAAiB;AAC5C,WACE;AAAA,MAAC,YAAY;AAAA,MAAZ;AAAA,QACC;AAAA,QACC,GAAG,YAAY;AAAA,UACd,WAAW;AAAA;AAAA;AAAA;AAAA,UAIX,WAAW,GAAG,WAAW,oBAAoB,aAAa,CAAC;AAAA,QAC7D,CAAC;AAAA,QACA,GAAG;AAAA,QACH,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAUA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":["SelectTrigger","SelectContent","SelectItem"]}

package/dist/esm/lib/elements/utils.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+/**
+ * HACK: Radix themes does not expose the dialog overlay, but we want consumer
+ * to be able to style it with a classname. This will add a classname to the
+ * overlay when the dialog content is mounted.
+ */
+declare function useDialogOverlayHack(forwardedRef: React.Ref<HTMLDivElement | null>, { className, selector }: {
+    className: string;
+    selector: string;
+}): {
+    ref: React.Ref<HTMLDivElement | null>;
+};
+
+export { useDialogOverlayHack };

package/dist/esm/lib/elements/utils.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useLayoutEffect } from "../use-layout-effect.js";
+function useDialogOverlayHack(forwardedRef, { className, selector }) {
+  const [node, setNode] = React.useState(null);
+  const ref = useComposedRefs(forwardedRef, setNode);
+  useLayoutEffect(() => {
+    if (!node) {
+      return;
+    }
+    const document = node.ownerDocument;
+    const overlay = document.querySelector(selector);
+    overlay?.classList.add(className);
+  }, [node, className, selector]);
+  return { ref };
+}
+export {
+  useDialogOverlayHack
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/lib/elements/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/lib/elements/utils.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useComposedRefs } from \"@radix-ui/react-compose-refs\";\nimport { useLayoutEffect } from \"../use-layout-effect.js\";\n\n/**\n * HACK: Radix themes does not expose the dialog overlay, but we want consumer\n * to be able to style it with a classname. This will add a classname to the\n * overlay when the dialog content is mounted.\n */\nexport function useDialogOverlayHack(\n  forwardedRef: React.Ref<HTMLDivElement | null>,\n  { className, selector }: { className: string; selector: string },\n): { ref: React.Ref<HTMLDivElement | null> } {\n  const [node, setNode] = React.useState<HTMLDivElement | null>(null);\n  const ref = useComposedRefs(forwardedRef, setNode as any);\n  useLayoutEffect(() => {\n    if (!node) {\n      return;\n    }\n    const document = node.ownerDocument;\n    const overlay = document.querySelector<HTMLDivElement>(selector);\n    overlay?.classList.add(className);\n  }, [node, className, selector]);\n\n  return { ref };\n}\n"],"mappings":"AAAA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAOzB,SAAS,qBACd,cACA,EAAE,WAAW,SAAS,GACqB;AAC3C,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAgC,IAAI;AAClE,QAAM,MAAM,gBAAgB,cAAc,OAAc;AACxD,kBAAgB,MAAM;AACpB,QAAI,CAAC,MAAM;AACT;AAAA,IACF;AACA,UAAM,WAAW,KAAK;AACtB,UAAM,UAAU,SAAS,cAA8B,QAAQ;AAC/D,aAAS,UAAU,IAAI,SAAS;AAAA,EAClC,GAAG,CAAC,MAAM,WAAW,QAAQ,CAAC;AAE9B,SAAO,EAAE,IAAI;AACf;","names":[]}

package/dist/esm/lib/elements.d.ts

@@ -1,32 +1,35 @@
 import * as React from 'react';
-import { ButtonProps, IconButtonProps, SkeletonProps, Select, TextProps, TextField as TextField$1, BadgeProps, DropdownMenu, AvatarProps as AvatarProps$1, Dialog, AlertDialog } from '@radix-ui/themes';
+import { ButtonProps as ButtonProps$1, IconButtonProps, SkeletonProps, TextProps, TextField as TextField$1, BadgeProps, AvatarProps as AvatarProps$1 } from '@radix-ui/themes';
 import { GetPropDefTypes, dialogContentPropDefs, buttonPropDefs, iconButtonPropDefs, textFieldRootPropDefs, selectTriggerPropDefs, badgePropDefs, dropdownMenuContentPropDefs, dropdownMenuItemPropDefs, avatarPropDefs, textPropDefs, skeletonPropDefs } from '@radix-ui/themes/props';
+export { d as Dialog } from '../dialog-C15qCLN3.js';
+export { a as AlertDialog } from '../alert-dialog-BlG3_awx.js';
+export { d as DropdownMenu } from '../dropdown-menu-BQ5LtvdR.js';
+export { s as Select } from '../select-KR89Qnvm.js';
+import '@radix-ui/themes/components/dialog';
+import '@radix-ui/themes/components/alert-dialog';
+import '@radix-ui/themes/components/dropdown-menu';
+import '@radix-ui/themes/components/select';
 
-declare const PrimaryButton: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-declare const SecondaryButton: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-declare const DestructiveButton: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface ButtonProps extends Omit<ButtonProps$1, "variant" | "color"> {
+    variant?: "primary" | "secondary" | "destructive";
+    unsafe_radixVariant?: ButtonProps$1["variant"];
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
 declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLSpanElement>>;
-declare const SelectTrigger: React.ForwardRefExoticComponent<Select.TriggerProps & React.RefAttributes<HTMLButtonElement>>;
-declare const SelectContent: React.ForwardRefExoticComponent<Select.ContentProps & React.RefAttributes<HTMLDivElement>>;
-declare const SelectItem: React.ForwardRefExoticComponent<Select.ItemProps & React.RefAttributes<HTMLDivElement>>;
 declare const Label: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLLabelElement>>;
 declare const TextField: React.ForwardRefExoticComponent<TextField$1.RootProps & React.RefAttributes<HTMLInputElement>>;
 declare const TextFieldSlot: React.ForwardRefExoticComponent<TextField$1.SlotProps & React.RefAttributes<HTMLDivElement>>;
 declare const PasswordField: React.ForwardRefExoticComponent<TextField$1.RootProps & React.RefAttributes<HTMLInputElement>>;
 declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
-declare const DropdownMenuContent: React.ForwardRefExoticComponent<DropdownMenu.ContentProps & React.RefAttributes<HTMLDivElement>>;
-declare const PrimaryMenuItem: React.ForwardRefExoticComponent<DropdownMenu.ItemProps & React.RefAttributes<HTMLDivElement>>;
-declare const DestructiveMenuItem: React.ForwardRefExoticComponent<DropdownMenu.ItemProps & React.RefAttributes<HTMLDivElement>>;
 interface AvatarProps extends AvatarProps$1 {
     dim?: boolean;
 }
 declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLImageElement>>;
-declare const DialogContent: React.ForwardRefExoticComponent<Dialog.ContentProps & React.RefAttributes<HTMLDivElement>>;
-declare const AlertDialogContent: React.ForwardRefExoticComponent<AlertDialog.ContentProps & React.RefAttributes<HTMLDivElement>>;
 type OmitAsChild<T> = {
     [K in keyof T]: T[K] extends undefined ? undefined : Omit<NonNullable<T[K]>, "asChild">;
 };
+
 type Elements = OmitAsChild<{
     dialog?: GetPropDefTypes<typeof dialogContentPropDefs>;
     primaryButton?: GetPropDefTypes<typeof buttonPropDefs>;
@@ -44,4 +47,4 @@ type Elements = OmitAsChild<{
     skeleton?: GetPropDefTypes<typeof skeletonPropDefs>;
 }>;
 
-export { AlertDialogContent, Avatar, Badge, DestructiveButton, DestructiveMenuItem, DialogContent, DropdownMenuContent, type Elements, IconButton, Label, PasswordField, PrimaryButton, PrimaryMenuItem, SecondaryButton, SelectContent, SelectItem, SelectTrigger, Skeleton, TextField, TextFieldSlot };
+export { Avatar, Badge, Button, type ButtonProps, type Elements, IconButton, Label, PasswordField, Skeleton, TextField, TextFieldSlot };