@workos-inc/widgets 0.0.0-pre.1 → 0.0.0-pre.3

package/src/lib/users-search.tsx

@@ -2,17 +2,18 @@
 
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { Cross2Icon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
-import { Checkbox, DropdownMenu, Flex, IconButton } from "@radix-ui/themes";
+import { IconButton } from "@radix-ui/themes";
 import * as React from "react";
 import { useDebouncedCallback } from "use-debounce";
-import { PrimaryMenuItem, TextField, TextFieldSlot } from "./elements";
+import { TextField, TextFieldSlot } from "./elements";
 import { useSearchContext } from "./search-provider";
 import { useUsersManagementContext } from "./users-management-context";
+import { cx } from "./utils";
 
 type UsersSearchProps = React.ComponentPropsWithoutRef<typeof TextField>;
 
 export const UsersSearch = React.forwardRef<HTMLInputElement, UsersSearchProps>(
-  (props, ref) => {
+  ({ className, ...props }, ref) => {
     const { inputRef, clearSearch, searchValue, setSearchValue } =
       useSearchContext();
     const { dispatch } = useUsersManagementContext();
@@ -29,6 +30,7 @@ export const UsersSearch = React.forwardRef<HTMLInputElement, UsersSearchProps>(
     return (
       <TextField
         ref={useComposedRefs(inputRef, ref)}
+        className={cx(["users-search"], className)}
         autoComplete="off"
         placeholder="Search by name or e-mail"
         value={searchValue}
@@ -63,68 +65,8 @@ export const UsersSearch = React.forwardRef<HTMLInputElement, UsersSearchProps>(
               <Cross2Icon aria-hidden="true" />
             </IconButton>
           )}
-          {/* <FilterMenu /> */}
         </TextFieldSlot>
       </TextField>
     );
   },
 );
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function FilterMenu() {
-  return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>
-        <IconButton
-          size="1"
-          color="gray"
-          variant="ghost"
-          radius="full"
-          aria-label="Filter users"
-          title="Filter users"
-        >
-          <FilterIcon aria-hidden="true" />
-        </IconButton>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content size="2" align="end">
-        <PrimaryMenuItem>
-          <Flex gap="2" align="center">
-            <Checkbox variant="surface" />
-            One
-          </Flex>
-        </PrimaryMenuItem>
-        <PrimaryMenuItem>
-          <Flex gap="2" align="center">
-            <Checkbox />
-            Two
-          </Flex>
-        </PrimaryMenuItem>
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
-  );
-}
-
-const FilterIcon = React.forwardRef<
-  SVGSVGElement,
-  React.ComponentPropsWithRef<"svg">
->(function FilterIcon({ children, ...props }, forwardedRef) {
-  return (
-    <svg
-      width="15"
-      height="15"
-      viewBox="0 0 15 15"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-      ref={forwardedRef}
-      {...props}
-    >
-      {children}
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M1.5 1C1.22386 1 1 1.22386 1 1.5V4.5C1 4.66316 1.07961 4.81605 1.21327 4.90962L6 8.26033V13.5C6 13.6733 6.08973 13.8342 6.23713 13.9253C6.38454 14.0164 6.56861 14.0247 6.72361 13.9472L8.72361 12.9472C8.893 12.8625 9 12.6894 9 12.5V8.26033L13.7867 4.90962C13.9204 4.81605 14 4.66316 14 4.5V1.5C14 1.22386 13.7761 1 13.5 1H1.5ZM2 4.23967V2H13V4.23967L8.21327 7.59038C8.07961 7.68395 8 7.83684 8 8V12.191L7 12.691V8C7 7.83684 6.92039 7.68395 6.78673 7.59038L2 4.23967ZM12 3H3V4H12V3Z"
-        fill="black"
-      />
-    </svg>
-  );
-});

package/src/lib/utils.ts

@@ -1,4 +1,6 @@
+import clsx from "clsx";
 import type { User } from "./api/user";
+import { WIDGETS_CLASS_NAMESPACE } from "./constants";
 
 export const canUseDOM = !!(
   typeof window !== "undefined" &&
@@ -92,3 +94,22 @@ export async function parseErrorResponse(
     };
   }
 }
+
+export function namespaceClassName(className: string) {
+  return `${WIDGETS_CLASS_NAMESPACE}-${className}`;
+}
+
+export function cx(
+  baseClass: string | null | string[],
+  ...classes: (string | false | null | undefined)[]
+): string {
+  if (baseClass) {
+    return clsx(
+      typeof baseClass === "string"
+        ? namespaceClassName(baseClass)
+        : baseClass.map(namespaceClassName),
+      ...classes,
+    );
+  }
+  return clsx(...classes);
+}

package/src/users-management.client.tsx

@@ -4,7 +4,11 @@ import * as React from "react";
 import { useRoles } from "./lib/api/role";
 import { useUsers } from "./lib/api/user";
 import { useIsHydrated } from "./lib/use-is-hydrated";
-import { UsersManagement as UsersManagementPresentational } from "./lib/users-management";
+import {
+  UsersManagementError,
+  UsersManagementLoading,
+  UsersManagement as UsersManagementPresentational,
+} from "./lib/users-management";
 import {
   UsersManagementContextProvider,
   UsersManagementContextType,
@@ -13,9 +17,10 @@ import {
   UsersManagementState,
   useUsersManagementState,
 } from "./lib/users-management-state";
+import { ErrorBoundary } from "./lib/error-boundary";
 
 export interface UsersManagementProps {
-  authToken: string | null | undefined;
+  authToken: string | (() => Promise<string>) | null | undefined;
 }
 
 const initialState: UsersManagementState = {
@@ -28,11 +33,13 @@ export const UsersManagement: React.FC<UsersManagementProps> = ({
   authToken = null,
 }) => {
   const isHydrated = useIsHydrated();
-
   const [state, dispatch] = useUsersManagementState(initialState);
   const context = React.useMemo<UsersManagementContextType>(
     () => ({
-      authToken,
+      authToken:
+        typeof authToken === "string"
+          ? () => Promise.resolve(authToken)
+          : authToken,
       state,
       dispatch,
     }),
@@ -41,19 +48,33 @@ export const UsersManagement: React.FC<UsersManagementProps> = ({
 
   const rolesQuery = useRoles(context);
   const usersQuery = useUsers(context);
-  const isFetching = usersQuery.isFetching || rolesQuery.isFetching;
-  const isLoading = usersQuery.isLoading || rolesQuery.isLoading;
-  const isPending =
-    usersQuery.isPlaceholderData || rolesQuery.isPlaceholderData;
+
+  if (
+    usersQuery.isLoading ||
+    rolesQuery.isLoading ||
+    usersQuery.isPending ||
+    // render loading state on the server to prevent FOUC or hydration mismatch
+    !isHydrated
+  ) {
+    return <UsersManagementLoading />;
+  }
+
+  if (usersQuery.isError || rolesQuery.isError) {
+    return (
+      <UsersManagementError error={usersQuery.error || rolesQuery.isError} />
+    );
+  }
 
   return (
-    <UsersManagementContextProvider value={context}>
-      <UsersManagementPresentational
-        userData={usersQuery.data}
-        rolesData={rolesQuery.data}
-        isInitialLoading={(isFetching && isLoading) || !isHydrated}
-        isPending={isPending}
-      />
-    </UsersManagementContextProvider>
+    <ErrorBoundary FallbackComponent={UsersManagementError}>
+      <UsersManagementContextProvider value={context}>
+        <UsersManagementPresentational
+          userData={usersQuery.data}
+          rolesData={rolesQuery.data}
+          isPending={usersQuery.isFetching}
+          disableRolesFilter={rolesQuery.isPending || rolesQuery.isFetching}
+        />
+      </UsersManagementContextProvider>
+    </ErrorBoundary>
   );
 };

package/src/users-management.css

@@ -0,0 +1,4 @@
+.woswidgets-widget:where([data-woswidgets-widget-id="users-management"]) {
+  display: flex;
+  flex-direction: column;
+}

package/src/workos-widgets.client.tsx

@@ -4,6 +4,7 @@ import { Theme as RadixThemes } from "@radix-ui/themes";
 import type { GetPropDefTypes, themePropDefs } from "@radix-ui/themes/props";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import * as React from "react";
+import { cx } from "./lib/utils";
 import { DEFAULT_API_HOSTNAME } from "./lib/api/config";
 import type { Elements } from "./lib/elements";
 import { WidgetsContext } from "./lib/widgets-context";
@@ -62,7 +63,7 @@ export const WorkOsWidgets: React.FC<WorkOsWidgetsProps> = ({
       <RadixThemes
         {...radixThemesProps}
         style={customStyle}
-        className={className}
+        className={cx("root", className)}
       >
         <WidgetsContext.Provider value={{ elements, apiBaseUrl }}>
           {children}

package/dist/cjs/lib/label.d.ts

@@ -1,7 +0,0 @@
-import { type TextProps } from "@radix-ui/themes";
-type LabelProps = Omit<Extract<TextProps, {
-    as: "label";
-}>, "as">;
-export declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
-export {};
-//# sourceMappingURL=label.d.ts.map

package/dist/cjs/lib/label.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/lib/label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGxD,KAAK,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE;IAAE,EAAE,EAAE,OAAO,CAAA;CAAE,CAAC,EAAE,IAAI,CAAC,CAAC;AAElE,eAAO,MAAM,KAAK,yGAMjB,CAAC"}

package/dist/cjs/lib/label.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Label = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const themes_1 = require("@radix-ui/themes");
-const react_1 = require("react");
-exports.Label = (0, react_1.forwardRef)(({ children, ...props }, ref) => ((0, jsx_runtime_1.jsx)(themes_1.Text, { as: "label", ref: ref, weight: "bold", size: "2", ...props, children: children })));
-exports.Label.displayName = "Label";
-//# sourceMappingURL=label.js.map

package/dist/cjs/lib/label.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"label.js","sourceRoot":"","sources":["../../../src/lib/label.tsx"],"names":[],"mappings":";;;;AAAA,6CAAwD;AACxD,iCAAmC;AAItB,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC/B,uBAAC,aAAI,IAAC,EAAE,EAAC,OAAO,EAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAC,MAAM,EAAC,IAAI,EAAC,GAAG,KAAK,KAAK,YACxD,QAAQ,GACJ,CACR,CACF,CAAC;AAEF,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

package/dist/cjs/lib/pagination.d.ts

@@ -1,8 +0,0 @@
-import type { PaginationData } from "./api/user";
-interface PaginationProps {
-    isPending?: boolean;
-    pagination?: PaginationData;
-}
-export declare const Pagination: ({ isPending, pagination }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=pagination.d.ts.map

package/dist/cjs/lib/pagination.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/lib/pagination.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B;AAED,eAAO,MAAM,UAAU,8BAA+B,eAAe,4CAyDpE,CAAC"}

package/dist/cjs/lib/pagination.js

@@ -1,67 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Pagination = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const React = __importStar(require("react"));
-const themes_1 = require("@radix-ui/themes");
-const elements_1 = require("./elements");
-const users_management_context_1 = require("./users-management-context");
-const Pagination = ({ isPending, pagination }) => {
-    const { dispatch } = (0, users_management_context_1.useUsersManagementContext)();
-    // we only want to show the loading indicator if the request is still pending
-    // after 500ms. If the request is fast enough the indicator is a bit jarring.
-    const [deferredLoading, setDeferredLoading] = React.useState(false);
-    React.useEffect(() => {
-        if (isPending) {
-            const timeoutId = window.setTimeout(() => {
-                setDeferredLoading(true);
-            }, 500);
-            return () => {
-                window.clearTimeout(timeoutId);
-            };
-        }
-        else {
-            setDeferredLoading(false);
-        }
-    }, [isPending]);
-    return ((0, jsx_runtime_1.jsxs)(themes_1.Flex, { gap: "2", justify: "end", children: [(0, jsx_runtime_1.jsx)(themes_1.Skeleton, { loading: !pagination, children: (0, jsx_runtime_1.jsx)(elements_1.SecondaryButton, { size: "1", disabled: !pagination?.after || isPending || undefined, loading: deferredLoading, onClick: () => {
-                        if (pagination?.after) {
-                            dispatch({
-                                type: "SET_PAGINATION",
-                                pagination: { after: pagination.after },
-                            });
-                        }
-                    }, children: "Previous" }) }), (0, jsx_runtime_1.jsx)(themes_1.Skeleton, { loading: !pagination, children: (0, jsx_runtime_1.jsx)(elements_1.SecondaryButton, { size: "1", disabled: !pagination?.before || isPending || undefined, loading: deferredLoading, onClick: () => {
-                        if (pagination?.before) {
-                            dispatch({
-                                type: "SET_PAGINATION",
-                                pagination: { before: pagination.before },
-                            });
-                        }
-                    }, children: "Next" }) })] }));
-};
-exports.Pagination = Pagination;
-//# sourceMappingURL=pagination.js.map

package/dist/cjs/lib/pagination.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../src/lib/pagination.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,6CAAkD;AAClD,yCAA6C;AAE7C,yEAAuE;AAOhE,MAAM,UAAU,GAAG,CAAC,EAAE,SAAS,EAAE,UAAU,EAAmB,EAAE,EAAE;IACvE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,oDAAyB,GAAE,CAAC;IAEjD,6EAA6E;IAC7E,6EAA6E;IAC7E,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,SAAS,EAAE,CAAC;YACd,MAAM,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACvC,kBAAkB,CAAC,IAAI,CAAC,CAAC;YAC3B,CAAC,EAAE,GAAG,CAAC,CAAC;YACR,OAAO,GAAG,EAAE;gBACV,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;YACjC,CAAC,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACL,wBAAC,aAAI,IAAC,GAAG,EAAC,GAAG,EAAC,OAAO,EAAC,KAAK,aACzB,uBAAC,iBAAQ,IAAC,OAAO,EAAE,CAAC,UAAU,YAC5B,uBAAC,0BAAe,IACd,IAAI,EAAC,GAAG,EACR,QAAQ,EAAE,CAAC,UAAU,EAAE,KAAK,IAAI,SAAS,IAAI,SAAS,EACtD,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAI,UAAU,EAAE,KAAK,EAAE,CAAC;4BACtB,QAAQ,CAAC;gCACP,IAAI,EAAE,gBAAgB;gCACtB,UAAU,EAAE,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE;6BACxC,CAAC,CAAC;wBACL,CAAC;oBACH,CAAC,yBAGe,GACT,EACX,uBAAC,iBAAQ,IAAC,OAAO,EAAE,CAAC,UAAU,YAC5B,uBAAC,0BAAe,IACd,IAAI,EAAC,GAAG,EACR,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,IAAI,SAAS,IAAI,SAAS,EACvD,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAI,UAAU,EAAE,MAAM,EAAE,CAAC;4BACvB,QAAQ,CAAC;gCACP,IAAI,EAAE,gBAAgB;gCACtB,UAAU,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE;6BAC1C,CAAC,CAAC;wBACL,CAAC;oBACH,CAAC,qBAGe,GACT,IACN,CACR,CAAC;AACJ,CAAC,CAAC;AAzDW,QAAA,UAAU,cAyDrB"}

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

@@ -1,7 +0,0 @@
-import { type TextProps } from "@radix-ui/themes";
-type LabelProps = Omit<Extract<TextProps, {
-    as: "label";
-}>, "as">;
-export declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
-export {};
-//# sourceMappingURL=label.d.ts.map

package/dist/esm/lib/label.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/lib/label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGxD,KAAK,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE;IAAE,EAAE,EAAE,OAAO,CAAA;CAAE,CAAC,EAAE,IAAI,CAAC,CAAC;AAElE,eAAO,MAAM,KAAK,yGAMjB,CAAC"}

package/dist/esm/lib/label.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Text } from "@radix-ui/themes";
-import { forwardRef } from "react";
-export const Label = forwardRef(({ children, ...props }, ref) => (_jsx(Text, { as: "label", ref: ref, weight: "bold", size: "2", ...props, children: children })));
-Label.displayName = "Label";
-//# sourceMappingURL=label.js.map

package/dist/esm/lib/label.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"label.js","sourceRoot":"","sources":["../../../src/lib/label.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC/B,KAAC,IAAI,IAAC,EAAE,EAAC,OAAO,EAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAC,MAAM,EAAC,IAAI,EAAC,GAAG,KAAK,KAAK,YACxD,QAAQ,GACJ,CACR,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

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

@@ -1,8 +0,0 @@
-import type { PaginationData } from "./api/user";
-interface PaginationProps {
-    isPending?: boolean;
-    pagination?: PaginationData;
-}
-export declare const Pagination: ({ isPending, pagination }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=pagination.d.ts.map

package/dist/esm/lib/pagination.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/lib/pagination.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B;AAED,eAAO,MAAM,UAAU,8BAA+B,eAAe,4CAyDpE,CAAC"}

package/dist/esm/lib/pagination.js

@@ -1,40 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { Flex, Skeleton } from "@radix-ui/themes";
-import { SecondaryButton } from "./elements";
-import { useUsersManagementContext } from "./users-management-context";
-export const Pagination = ({ isPending, pagination }) => {
-    const { dispatch } = useUsersManagementContext();
-    // we only want to show the loading indicator if the request is still pending
-    // after 500ms. If the request is fast enough the indicator is a bit jarring.
-    const [deferredLoading, setDeferredLoading] = React.useState(false);
-    React.useEffect(() => {
-        if (isPending) {
-            const timeoutId = window.setTimeout(() => {
-                setDeferredLoading(true);
-            }, 500);
-            return () => {
-                window.clearTimeout(timeoutId);
-            };
-        }
-        else {
-            setDeferredLoading(false);
-        }
-    }, [isPending]);
-    return (_jsxs(Flex, { gap: "2", justify: "end", children: [_jsx(Skeleton, { loading: !pagination, children: _jsx(SecondaryButton, { size: "1", disabled: !pagination?.after || isPending || undefined, loading: deferredLoading, onClick: () => {
-                        if (pagination?.after) {
-                            dispatch({
-                                type: "SET_PAGINATION",
-                                pagination: { after: pagination.after },
-                            });
-                        }
-                    }, children: "Previous" }) }), _jsx(Skeleton, { loading: !pagination, children: _jsx(SecondaryButton, { size: "1", disabled: !pagination?.before || isPending || undefined, loading: deferredLoading, onClick: () => {
-                        if (pagination?.before) {
-                            dispatch({
-                                type: "SET_PAGINATION",
-                                pagination: { before: pagination.before },
-                            });
-                        }
-                    }, children: "Next" }) })] }));
-};
-//# sourceMappingURL=pagination.js.map

package/dist/esm/lib/pagination.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../src/lib/pagination.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7C,OAAO,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAOvE,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,SAAS,EAAE,UAAU,EAAmB,EAAE,EAAE;IACvE,MAAM,EAAE,QAAQ,EAAE,GAAG,yBAAyB,EAAE,CAAC;IAEjD,6EAA6E;IAC7E,6EAA6E;IAC7E,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,SAAS,EAAE,CAAC;YACd,MAAM,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACvC,kBAAkB,CAAC,IAAI,CAAC,CAAC;YAC3B,CAAC,EAAE,GAAG,CAAC,CAAC;YACR,OAAO,GAAG,EAAE;gBACV,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;YACjC,CAAC,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACL,MAAC,IAAI,IAAC,GAAG,EAAC,GAAG,EAAC,OAAO,EAAC,KAAK,aACzB,KAAC,QAAQ,IAAC,OAAO,EAAE,CAAC,UAAU,YAC5B,KAAC,eAAe,IACd,IAAI,EAAC,GAAG,EACR,QAAQ,EAAE,CAAC,UAAU,EAAE,KAAK,IAAI,SAAS,IAAI,SAAS,EACtD,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAI,UAAU,EAAE,KAAK,EAAE,CAAC;4BACtB,QAAQ,CAAC;gCACP,IAAI,EAAE,gBAAgB;gCACtB,UAAU,EAAE,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE;6BACxC,CAAC,CAAC;wBACL,CAAC;oBACH,CAAC,yBAGe,GACT,EACX,KAAC,QAAQ,IAAC,OAAO,EAAE,CAAC,UAAU,YAC5B,KAAC,eAAe,IACd,IAAI,EAAC,GAAG,EACR,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,IAAI,SAAS,IAAI,SAAS,EACvD,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAI,UAAU,EAAE,MAAM,EAAE,CAAC;4BACvB,QAAQ,CAAC;gCACP,IAAI,EAAE,gBAAgB;gCACtB,UAAU,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE;6BAC1C,CAAC,CAAC;wBACL,CAAC;oBACH,CAAC,qBAGe,GACT,IACN,CACR,CAAC;AACJ,CAAC,CAAC"}

package/src/lib/label.tsx

@@ -1,14 +0,0 @@
-import { Text, type TextProps } from "@radix-ui/themes";
-import { forwardRef } from "react";
-
-type LabelProps = Omit<Extract<TextProps, { as: "label" }>, "as">;
-
-export const Label = forwardRef<HTMLLabelElement, LabelProps>(
-  ({ children, ...props }, ref) => (
-    <Text as="label" ref={ref} weight="bold" size="2" {...props}>
-      {children}
-    </Text>
-  ),
-);
-
-Label.displayName = "Label";

package/src/lib/pagination.tsx

@@ -1,69 +0,0 @@
-import * as React from "react";
-import { Flex, Skeleton } from "@radix-ui/themes";
-import { SecondaryButton } from "./elements";
-import type { PaginationData } from "./api/user";
-import { useUsersManagementContext } from "./users-management-context";
-
-interface PaginationProps {
-  isPending?: boolean;
-  pagination?: PaginationData;
-}
-
-export const Pagination = ({ isPending, pagination }: PaginationProps) => {
-  const { dispatch } = useUsersManagementContext();
-
-  // we only want to show the loading indicator if the request is still pending
-  // after 500ms. If the request is fast enough the indicator is a bit jarring.
-  const [deferredLoading, setDeferredLoading] = React.useState(false);
-  React.useEffect(() => {
-    if (isPending) {
-      const timeoutId = window.setTimeout(() => {
-        setDeferredLoading(true);
-      }, 500);
-      return () => {
-        window.clearTimeout(timeoutId);
-      };
-    } else {
-      setDeferredLoading(false);
-    }
-  }, [isPending]);
-
-  return (
-    <Flex gap="2" justify="end">
-      <Skeleton loading={!pagination}>
-        <SecondaryButton
-          size="1"
-          disabled={!pagination?.after || isPending || undefined}
-          loading={deferredLoading}
-          onClick={() => {
-            if (pagination?.after) {
-              dispatch({
-                type: "SET_PAGINATION",
-                pagination: { after: pagination.after },
-              });
-            }
-          }}
-        >
-          Previous
-        </SecondaryButton>
-      </Skeleton>
-      <Skeleton loading={!pagination}>
-        <SecondaryButton
-          size="1"
-          disabled={!pagination?.before || isPending || undefined}
-          loading={deferredLoading}
-          onClick={() => {
-            if (pagination?.before) {
-              dispatch({
-                type: "SET_PAGINATION",
-                pagination: { before: pagination.before },
-              });
-            }
-          }}
-        >
-          Next
-        </SecondaryButton>
-      </Skeleton>
-    </Flex>
-  );
-};