Migre lib-auth vers React 19 et Chakra UI 3

2026-04-02 07:16:49 +02:00
parent d50ab5f7bf
commit a1e9519eee
8 changed files with 252 additions and 89 deletions
--- a/dist/react/index.js
+++ b/dist/react/index.js
@@ -1,8 +1,85 @@
 // react/AuthGuard.tsx
 import { useEffect, useState } from "react";
-import { Center, Spinner } from "@chakra-ui/react";
-import { Navigate } from "react-router-dom";
-import { Fragment, jsx } from "react/jsx-runtime";
+
+// react/chakra-compat.tsx
+import {
+  Alert as ChakraAlert,
+  Box as ChakraBox,
+  Button as ChakraButton,
+  Center as ChakraCenter,
+  HStack as ChakraHStack,
+  Icon as ChakraIcon,
+  Input as ChakraInput,
+  Spinner as ChakraSpinner,
+  Stack as ChakraStack,
+  Text as ChakraText
+} from "@chakra-ui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function normalizeSpacingProps(props) {
+  const next = { ...props };
+  if (next.spacing !== void 0 && next.gap === void 0) {
+    next.gap = next.spacing;
+  }
+  delete next.spacing;
+  return next;
+}
+function normalizeInteractiveProps(props) {
+  const next = normalizeSpacingProps(props);
+  if (next.isDisabled !== void 0 && next.disabled === void 0) {
+    next.disabled = next.isDisabled;
+  }
+  if (next.isLoading !== void 0 && next.loading === void 0) {
+    next.loading = next.isLoading;
+  }
+  delete next.isDisabled;
+  delete next.isLoading;
+  return next;
+}
+var Center = ChakraCenter;
+var Icon = ChakraIcon;
+var Input = ChakraInput;
+var Spinner = ChakraSpinner;
+function Stack(props) {
+  return /* @__PURE__ */ jsx(ChakraStack, { ...normalizeSpacingProps(props) });
+}
+function HStack(props) {
+  return /* @__PURE__ */ jsx(ChakraHStack, { ...normalizeSpacingProps(props) });
+}
+function Text(props) {
+  const next = { ...props };
+  if (next.noOfLines !== void 0 && next.lineClamp === void 0) {
+    next.lineClamp = next.noOfLines;
+  }
+  delete next.noOfLines;
+  return /* @__PURE__ */ jsx(ChakraText, { ...next });
+}
+function Button(props) {
+  const { leftIcon, rightIcon, children, ...rest } = normalizeInteractiveProps(props);
+  return /* @__PURE__ */ jsx(ChakraButton, { ...rest, children: /* @__PURE__ */ jsxs(ChakraHStack, { gap: 2, children: [
+    leftIcon ?? null,
+    /* @__PURE__ */ jsx("span", { children }),
+    rightIcon ?? null
+  ] }) });
+}
+function Alert({ children, status = "info", ...props }) {
+  return /* @__PURE__ */ jsx(ChakraAlert.Root, { status, ...props, children });
+}
+function AlertIcon() {
+  return /* @__PURE__ */ jsx(ChakraAlert.Indicator, {});
+}
+function AlertDescription({ children, ...props }) {
+  return /* @__PURE__ */ jsx(ChakraAlert.Description, { ...props, children });
+}
+function FormControl({ children, ...props }) {
+  return /* @__PURE__ */ jsx(ChakraStack, { gap: 2, ...normalizeSpacingProps(props), children });
+}
+function FormLabel(props) {
+  return /* @__PURE__ */ jsx(ChakraBox, { as: "label", fontWeight: "medium", ...props });
+}
+
+// react/AuthGuard.tsx
+import { Navigate } from "react-router";
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
 function AuthGuard({
  children,
  fetchCurrentUser,
@@ -30,12 +107,12 @@ function AuthGuard({
    };
  }, [fetchCurrentUser]);
  if (state.loading) {
-    return /* @__PURE__ */ jsx(Fragment, { children: loadingFallback ?? /* @__PURE__ */ jsx(Center, { h: "var(--app-height)", children: /* @__PURE__ */ jsx(Spinner, { size: "xl" }) }) });
+    return /* @__PURE__ */ jsx2(Fragment, { children: loadingFallback ?? /* @__PURE__ */ jsx2(Center, { h: "var(--app-height)", children: /* @__PURE__ */ jsx2(Spinner, { size: "xl" }) }) });
  }
  if (!state.authenticated) {
-    return /* @__PURE__ */ jsx(Navigate, { to: redirectTo, replace: true });
+    return /* @__PURE__ */ jsx2(Navigate, { to: redirectTo, replace: true });
  }
-  return /* @__PURE__ */ jsx(Fragment, { children: authenticatedWrapper ? authenticatedWrapper(children) : children });
+  return /* @__PURE__ */ jsx2(Fragment, { children: authenticatedWrapper ? authenticatedWrapper(children) : children });
 }

 // react/client.ts
@@ -172,9 +249,8 @@ function createAuthClient(options) {
 }

 // react/LoginForm.tsx
-import { Alert, AlertDescription, AlertIcon, Button, Center as Center2, FormControl, FormLabel, HStack, Icon, Input, Stack } from "@chakra-ui/react";
 import { FcGoogle } from "react-icons/fc";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function LoginForm({
  mode,
  texts,
@@ -202,37 +278,37 @@ function LoginForm({
      passwordConfirm: String(form.get("passwordConfirm") ?? "")
    });
  }
-  return /* @__PURE__ */ jsxs(Stack, { spacing: 5, children: [
-    errorMessage ? /* @__PURE__ */ jsxs(Alert, { status: "error", borderRadius: "md", children: [
-      /* @__PURE__ */ jsx2(AlertIcon, {}),
-      /* @__PURE__ */ jsx2(AlertDescription, { children: errorMessage })
+  return /* @__PURE__ */ jsxs2(Stack, { spacing: 5, children: [
+    errorMessage ? /* @__PURE__ */ jsxs2(Alert, { status: "error", borderRadius: "md", children: [
+      /* @__PURE__ */ jsx3(AlertIcon, {}),
+      /* @__PURE__ */ jsx3(AlertDescription, { children: errorMessage })
    ] }) : null,
-    successMessage ? /* @__PURE__ */ jsxs(Alert, { status: "success", borderRadius: "md", children: [
-      /* @__PURE__ */ jsx2(AlertIcon, {}),
-      /* @__PURE__ */ jsx2(AlertDescription, { children: successMessage })
+    successMessage ? /* @__PURE__ */ jsxs2(Alert, { status: "success", borderRadius: "md", children: [
+      /* @__PURE__ */ jsx3(AlertIcon, {}),
+      /* @__PURE__ */ jsx3(AlertDescription, { children: successMessage })
    ] }) : null,
-    /* @__PURE__ */ jsx2("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs(Stack, { spacing: 4, children: [
-      registerMode ? /* @__PURE__ */ jsxs(FormControl, { isRequired: true, children: [
-        /* @__PURE__ */ jsx2(FormLabel, { children: texts.nameLabel }),
-        /* @__PURE__ */ jsx2(Input, { name: "name", placeholder: namePlaceholder })
+    /* @__PURE__ */ jsx3("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs2(Stack, { spacing: 4, children: [
+      registerMode ? /* @__PURE__ */ jsxs2(FormControl, { isRequired: true, children: [
+        /* @__PURE__ */ jsx3(FormLabel, { children: texts.nameLabel }),
+        /* @__PURE__ */ jsx3(Input, { name: "name", placeholder: namePlaceholder })
      ] }) : null,
-      /* @__PURE__ */ jsxs(FormControl, { isRequired: true, children: [
-        /* @__PURE__ */ jsx2(FormLabel, { children: texts.emailLabel }),
-        /* @__PURE__ */ jsx2(Input, { name: "email", type: "email", placeholder: emailPlaceholder })
+      /* @__PURE__ */ jsxs2(FormControl, { isRequired: true, children: [
+        /* @__PURE__ */ jsx3(FormLabel, { children: texts.emailLabel }),
+        /* @__PURE__ */ jsx3(Input, { name: "email", type: "email", placeholder: emailPlaceholder })
      ] }),
-      /* @__PURE__ */ jsxs(FormControl, { isRequired: true, children: [
-        /* @__PURE__ */ jsx2(FormLabel, { children: texts.passwordLabel }),
-        /* @__PURE__ */ jsx2(Input, { name: "password", type: "password", minLength: 8 })
+      /* @__PURE__ */ jsxs2(FormControl, { isRequired: true, children: [
+        /* @__PURE__ */ jsx3(FormLabel, { children: texts.passwordLabel }),
+        /* @__PURE__ */ jsx3(Input, { name: "password", type: "password", minLength: 8 })
      ] }),
-      !registerMode && forgotPasswordLink ? /* @__PURE__ */ jsx2(Stack, { align: "flex-end", children: forgotPasswordLink }) : null,
-      registerMode ? /* @__PURE__ */ jsxs(FormControl, { isRequired: true, children: [
-        /* @__PURE__ */ jsx2(FormLabel, { children: texts.passwordConfirmLabel }),
-        /* @__PURE__ */ jsx2(Input, { name: "passwordConfirm", type: "password", minLength: 8 })
+      !registerMode && forgotPasswordLink ? /* @__PURE__ */ jsx3(Stack, { align: "flex-end", children: forgotPasswordLink }) : null,
+      registerMode ? /* @__PURE__ */ jsxs2(FormControl, { isRequired: true, children: [
+        /* @__PURE__ */ jsx3(FormLabel, { children: texts.passwordConfirmLabel }),
+        /* @__PURE__ */ jsx3(Input, { name: "passwordConfirm", type: "password", minLength: 8 })
      ] }) : null,
-      /* @__PURE__ */ jsx2(Button, { type: "submit", isLoading: loading, children: registerMode ? texts.submitRegisterLabel : texts.submitSignInLabel })
+      /* @__PURE__ */ jsx3(Button, { type: "submit", isLoading: loading, children: registerMode ? texts.submitRegisterLabel : texts.submitSignInLabel })
    ] }) }),
-    registerMode || !onOAuthSignIn || !providers?.google && !providers?.slack ? null : /* @__PURE__ */ jsxs(HStack, { children: [
-      providers.google ? /* @__PURE__ */ jsx2(
+    registerMode || !onOAuthSignIn || !providers?.google && !providers?.slack ? null : /* @__PURE__ */ jsxs2(HStack, { children: [
+      providers.google ? /* @__PURE__ */ jsx3(
        Button,
        {
          flex: 1,
@@ -245,7 +321,7 @@ function LoginForm({
          fontSize: { base: "md", md: "lg" },
          fontWeight: "semibold",
          iconSpacing: 4,
-          leftIcon: /* @__PURE__ */ jsx2(Center2, { boxSize: "40px", bg: "white", borderRadius: "full", boxShadow: "sm", children: /* @__PURE__ */ jsx2(Icon, { as: FcGoogle, boxSize: 6 }) }),
+          leftIcon: /* @__PURE__ */ jsx3(Center, { boxSize: "40px", bg: "white", borderRadius: "full", boxShadow: "sm", children: /* @__PURE__ */ jsx3(Icon, { as: FcGoogle, boxSize: 6 }) }),
          _hover: { bg: "gray.300" },
          _active: { bg: "gray.300" },
          isLoading: oauthLoadingProvider === "google",
@@ -253,7 +329,7 @@ function LoginForm({
          children: texts.googleLabel
        }
      ) : null,
-      providers.slack ? /* @__PURE__ */ jsx2(
+      providers.slack ? /* @__PURE__ */ jsx3(
        Button,
        {
          flex: 1,
@@ -264,25 +340,13 @@ function LoginForm({
        }
      ) : null
    ] }),
-    /* @__PURE__ */ jsx2(Button, { variant: "ghost", onClick: onModeToggle, children: registerMode ? texts.toggleToSignInLabel : texts.toggleToRegisterLabel }),
+    /* @__PURE__ */ jsx3(Button, { variant: "ghost", onClick: onModeToggle, children: registerMode ? texts.toggleToSignInLabel : texts.toggleToRegisterLabel }),
    footer ?? null
  ] });
 }

 // react/PasswordResetForms.tsx
-import {
-  Alert as Alert2,
-  AlertDescription as AlertDescription2,
-  AlertIcon as AlertIcon2,
-  Button as Button2,
-  FormControl as FormControl2,
-  FormLabel as FormLabel2,
-  Input as Input2,
-  Spinner as Spinner2,
-  Stack as Stack2,
-  Text
-} from "@chakra-ui/react";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function PasswordResetRequestForm({
  texts,
  helperText,
@@ -298,18 +362,18 @@ function PasswordResetRequestForm({
      email: String(form.get("email") ?? "")
    });
  }
-  return /* @__PURE__ */ jsxs2(Stack2, { spacing: 5, children: [
-    requestSent ? /* @__PURE__ */ jsxs2(Alert2, { status: "success", borderRadius: "md", children: [
-      /* @__PURE__ */ jsx3(AlertIcon2, {}),
-      /* @__PURE__ */ jsx3(AlertDescription2, { children: texts.requestSentMessage })
+  return /* @__PURE__ */ jsxs3(Stack, { spacing: 5, children: [
+    requestSent ? /* @__PURE__ */ jsxs3(Alert, { status: "success", borderRadius: "md", children: [
+      /* @__PURE__ */ jsx4(AlertIcon, {}),
+      /* @__PURE__ */ jsx4(AlertDescription, { children: texts.requestSentMessage })
    ] }) : null,
-    /* @__PURE__ */ jsx3("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs2(Stack2, { spacing: 4, children: [
-      /* @__PURE__ */ jsxs2(FormControl2, { isRequired: true, children: [
-        /* @__PURE__ */ jsx3(FormLabel2, { children: texts.emailLabel }),
-        /* @__PURE__ */ jsx3(Input2, { name: "email", type: "email", placeholder: emailPlaceholder })
+    /* @__PURE__ */ jsx4("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs3(Stack, { spacing: 4, children: [
+      /* @__PURE__ */ jsxs3(FormControl, { isRequired: true, children: [
+        /* @__PURE__ */ jsx4(FormLabel, { children: texts.emailLabel }),
+        /* @__PURE__ */ jsx4(Input, { name: "email", type: "email", placeholder: emailPlaceholder })
      ] }),
-      /* @__PURE__ */ jsx3(Text, { fontSize: "sm", color: "gray.600", children: helperText }),
-      /* @__PURE__ */ jsx3(Button2, { type: "submit", isLoading: loading, children: texts.submitLabel })
+      /* @__PURE__ */ jsx4(Text, { fontSize: "sm", color: "gray.600", children: helperText }),
+      /* @__PURE__ */ jsx4(Button, { type: "submit", isLoading: loading, children: texts.submitLabel })
    ] }) })
  ] });
 }
@@ -329,35 +393,35 @@ function PasswordResetConfirmForm({
    });
  }
  if (tokenState.status === "loading") {
-    return /* @__PURE__ */ jsxs2(Stack2, { align: "center", py: 6, spacing: 3, children: [
-      /* @__PURE__ */ jsx3(Spinner2, {}),
-      /* @__PURE__ */ jsx3(Text, { color: "gray.600", children: texts.loadingLabel })
+    return /* @__PURE__ */ jsxs3(Stack, { align: "center", py: 6, spacing: 3, children: [
+      /* @__PURE__ */ jsx4(Spinner, {}),
+      /* @__PURE__ */ jsx4(Text, { color: "gray.600", children: texts.loadingLabel })
    ] });
  }
  if (tokenState.status === "invalid") {
-    return /* @__PURE__ */ jsxs2(Alert2, { status: "error", borderRadius: "md", children: [
-      /* @__PURE__ */ jsx3(AlertIcon2, {}),
-      /* @__PURE__ */ jsx3(AlertDescription2, { children: tokenState.error || texts.invalidLinkLabel })
+    return /* @__PURE__ */ jsxs3(Alert, { status: "error", borderRadius: "md", children: [
+      /* @__PURE__ */ jsx4(AlertIcon, {}),
+      /* @__PURE__ */ jsx4(AlertDescription, { children: tokenState.error || texts.invalidLinkLabel })
    ] });
  }
  if (completedMode !== null) {
-    return /* @__PURE__ */ jsxs2(Alert2, { status: "success", borderRadius: "md", children: [
-      /* @__PURE__ */ jsx3(AlertIcon2, {}),
-      /* @__PURE__ */ jsx3(AlertDescription2, { children: completedMode === "create" ? texts.createSuccessLabel : texts.resetSuccessLabel })
+    return /* @__PURE__ */ jsxs3(Alert, { status: "success", borderRadius: "md", children: [
+      /* @__PURE__ */ jsx4(AlertIcon, {}),
+      /* @__PURE__ */ jsx4(AlertDescription, { children: completedMode === "create" ? texts.createSuccessLabel : texts.resetSuccessLabel })
    ] });
  }
-  return /* @__PURE__ */ jsxs2(Stack2, { spacing: 4, children: [
-    /* @__PURE__ */ jsx3(Text, { fontSize: "sm", color: "gray.600", children: tokenState.email }),
-    /* @__PURE__ */ jsx3("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs2(Stack2, { spacing: 4, children: [
-      /* @__PURE__ */ jsxs2(FormControl2, { isRequired: true, children: [
-        /* @__PURE__ */ jsx3(FormLabel2, { children: texts.passwordLabel }),
-        /* @__PURE__ */ jsx3(Input2, { name: "password", type: "password", minLength: 8 })
+  return /* @__PURE__ */ jsxs3(Stack, { spacing: 4, children: [
+    /* @__PURE__ */ jsx4(Text, { fontSize: "sm", color: "gray.600", children: tokenState.email }),
+    /* @__PURE__ */ jsx4("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs3(Stack, { spacing: 4, children: [
+      /* @__PURE__ */ jsxs3(FormControl, { isRequired: true, children: [
+        /* @__PURE__ */ jsx4(FormLabel, { children: texts.passwordLabel }),
+        /* @__PURE__ */ jsx4(Input, { name: "password", type: "password", minLength: 8 })
      ] }),
-      /* @__PURE__ */ jsxs2(FormControl2, { isRequired: true, children: [
-        /* @__PURE__ */ jsx3(FormLabel2, { children: texts.passwordConfirmLabel }),
-        /* @__PURE__ */ jsx3(Input2, { name: "passwordConfirm", type: "password", minLength: 8 })
+      /* @__PURE__ */ jsxs3(FormControl, { isRequired: true, children: [
+        /* @__PURE__ */ jsx4(FormLabel, { children: texts.passwordConfirmLabel }),
+        /* @__PURE__ */ jsx4(Input, { name: "passwordConfirm", type: "password", minLength: 8 })
      ] }),
-      /* @__PURE__ */ jsx3(Button2, { type: "submit", isLoading: loading, children: tokenState.mode === "create" ? texts.createSubmitLabel : texts.resetSubmitLabel })
+      /* @__PURE__ */ jsx4(Button, { type: "submit", isLoading: loading, children: tokenState.mode === "create" ? texts.createSubmitLabel : texts.resetSubmitLabel })
    ] }) })
  ] });
 }
--- a/dist/react/index.js.map
+++ b/dist/react/index.js.map
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@packages/auth",
-  "version": "0.0.0",
+  "version": "0.0.1",
  "private": true,
  "type": "module",
  "files": [
@@ -23,13 +23,16 @@
  "peerDependencies": {
    "@auth/express": "^0.12.1",
    "@auth/prisma-adapter": "^2.9.1",
-    "@chakra-ui/react": "^2.10.7",
+    "@chakra-ui/react": "^3.33.0",
    "@prisma/client": "^6.5.0",
    "express": "^4.21.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-icons": "^5.6.0",
-    "react-router-dom": "^6.30.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-icons": "^5.5.0",
+    "react-router": "^7.13.2",
    "zod": "^3.24.2"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0"
  }
 }
--- a/react/AuthGuard.tsx
+++ b/react/AuthGuard.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import { Center, Spinner } from "@chakra-ui/react";
-import { Navigate } from "react-router-dom";
+import { Center, Spinner } from "./chakra-compat";
+import { Navigate } from "react-router";

 type AuthGuardProps = {
  children: React.ReactNode;
--- a/react/LoginForm.tsx
+++ b/react/LoginForm.tsx
@@ -1,5 +1,5 @@
 import type { FormEvent, ReactNode } from "react";
-import { Alert, AlertDescription, AlertIcon, Button, Center, FormControl, FormLabel, HStack, Icon, Input, Stack } from "@chakra-ui/react";
+import { Alert, AlertDescription, AlertIcon, Button, Center, FormControl, FormLabel, HStack, Icon, Input, Stack } from "./chakra-compat";
 import { FcGoogle } from "react-icons/fc";
 import type { AuthProviderAvailability, AuthProviderKey, AuthSubmitValues, LoginMode } from "./types";

--- a/react/PasswordResetForms.tsx
+++ b/react/PasswordResetForms.tsx
@@ -10,7 +10,7 @@ import {
  Spinner,
  Stack,
  Text
-} from "@chakra-ui/react";
+} from "./chakra-compat";
 import type { PasswordResetMode, PasswordResetTokenState } from "./types";

 type PasswordResetRequestTexts = {
--- a/react/chakra-compat.tsx
+++ b/react/chakra-compat.tsx
@@ -0,0 +1,96 @@
+import {
+  Alert as ChakraAlert,
+  Box as ChakraBox,
+  Button as ChakraButton,
+  Center as ChakraCenter,
+  HStack as ChakraHStack,
+  Icon as ChakraIcon,
+  Input as ChakraInput,
+  Spinner as ChakraSpinner,
+  Stack as ChakraStack,
+  Text as ChakraText
+} from "@chakra-ui/react";
+import type { ReactNode } from "react";
+
+type AnyProps = Record<string, any>;
+
+function normalizeSpacingProps(props: AnyProps) {
+  const next = { ...props };
+  if (next.spacing !== undefined && next.gap === undefined) {
+    next.gap = next.spacing;
+  }
+  delete next.spacing;
+  return next;
+}
+
+function normalizeInteractiveProps(props: AnyProps) {
+  const next = normalizeSpacingProps(props);
+  if (next.isDisabled !== undefined && next.disabled === undefined) {
+    next.disabled = next.isDisabled;
+  }
+  if (next.isLoading !== undefined && next.loading === undefined) {
+    next.loading = next.isLoading;
+  }
+  delete next.isDisabled;
+  delete next.isLoading;
+  return next;
+}
+
+export const Center = ChakraCenter as any;
+export const Icon = ChakraIcon as any;
+export const Input = ChakraInput as any;
+export const Spinner = ChakraSpinner as any;
+
+export function Stack(props: AnyProps) {
+  return <ChakraStack {...normalizeSpacingProps(props)} />;
+}
+
+export function HStack(props: AnyProps) {
+  return <ChakraHStack {...normalizeSpacingProps(props)} />;
+}
+
+export function Text(props: AnyProps) {
+  const next = { ...props };
+  if (next.noOfLines !== undefined && next.lineClamp === undefined) {
+    next.lineClamp = next.noOfLines;
+  }
+  delete next.noOfLines;
+  return <ChakraText {...next} />;
+}
+
+export function Button(props: AnyProps) {
+  const { leftIcon, rightIcon, children, ...rest } = normalizeInteractiveProps(props);
+  return (
+    <ChakraButton {...rest}>
+      <ChakraHStack gap={2}>
+        {leftIcon ?? null}
+        <span>{children}</span>
+        {rightIcon ?? null}
+      </ChakraHStack>
+    </ChakraButton>
+  );
+}
+
+export function Alert({ children, status = "info", ...props }: AnyProps) {
+  return (
+    <ChakraAlert.Root status={status} {...props}>
+      {children}
+    </ChakraAlert.Root>
+  );
+}
+
+export function AlertIcon() {
+  return <ChakraAlert.Indicator />;
+}
+
+export function AlertDescription({ children, ...props }: { children: ReactNode } & AnyProps) {
+  return <ChakraAlert.Description {...props}>{children}</ChakraAlert.Description>;
+}
+
+export function FormControl({ children, ...props }: AnyProps) {
+  return <ChakraStack gap={2} {...normalizeSpacingProps(props)}>{children}</ChakraStack>;
+}
+
+export function FormLabel(props: AnyProps) {
+  return <ChakraBox as="label" fontWeight="medium" {...props} />;
+}
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -20,7 +20,7 @@ export default defineConfig({
    "react",
    "react-dom",
    "react-icons",
-    "react-router-dom",
+    "react-router",
    "zod"
  ]
 });