@timmbr/ui 1.4.2 → 1.5.0

package/dist/components/AuthModal/subcomponents/AuthModalIdentifierForm.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useAuthModalLabels } from '../AuthModal.labels.js';
+import { authModalInputVariants, authModalLinkVariants } from '../AuthModal.styles.js';
+import { AuthStepHeader, AuthForm, AuthFieldError, AuthSubmitButton, AuthTextLink } from './AuthModalParts.js';
+
+const INPUT_ID = "auth-identifier-input";
+const ERROR_ID = "auth-identifier-error";
+function AuthModalIdentifierForm({ form, legal }) {
+  const labels = useAuthModalLabels();
+  const {
+    identifier = "",
+    onIdentifierChange,
+    onIdentifierSubmit,
+    onUsePassword,
+    isLoading = false,
+    error
+  } = form;
+  const isEmpty = !identifier.trim();
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "auth-modal-identifier-step", className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx(AuthStepHeader, { title: labels.identifierTitle, subtitle: labels.identifierSubtitle }),
+    /* @__PURE__ */ jsxs(AuthForm, { onSubmit: onIdentifierSubmit, className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: INPUT_ID, className: "sr-only", children: labels.identifierLabel }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: INPUT_ID,
+            type: "text",
+            inputMode: "email",
+            autoComplete: "username",
+            autoCapitalize: "none",
+            spellCheck: false,
+            value: identifier,
+            onChange: (e) => onIdentifierChange?.(e.target.value),
+            placeholder: labels.identifierPlaceholder,
+            disabled: isLoading,
+            autoFocus: true,
+            "aria-invalid": !!error || void 0,
+            "aria-describedby": error ? ERROR_ID : void 0,
+            className: authModalInputVariants({ invalid: !!error })
+          }
+        ),
+        /* @__PURE__ */ jsx(AuthFieldError, { id: ERROR_ID, children: error })
+      ] }),
+      /* @__PURE__ */ jsx(AuthSubmitButton, { isLoading, disabled: isEmpty, children: labels.continue }),
+      onUsePassword && /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx(AuthTextLink, { onClick: onUsePassword, disabled: isLoading || isEmpty, className: "text-body-2", children: labels.usePassword }) }),
+      /* @__PURE__ */ jsxs("p", { className: "text-body-3 text-grey-600 text-center leading-relaxed pt-1", children: [
+        labels.legalPrefix,
+        " ",
+        /* @__PURE__ */ jsx("a", { href: legal?.termsUrl ?? "/terms", className: authModalLinkVariants(), children: labels.termsOfUse }),
+        " ",
+        "&",
+        " ",
+        /* @__PURE__ */ jsx("a", { href: legal?.privacyUrl ?? "/privacy", className: authModalLinkVariants(), children: labels.privacyPolicy })
+      ] })
+    ] })
+  ] });
+}
+AuthModalIdentifierForm.displayName = "AuthModalIdentifierForm";
+
+export { AuthModalIdentifierForm };

package/dist/components/AuthModal/subcomponents/AuthModalOAuth.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { AuthModalOAuthProps } from '../AuthModal.types';
+export interface AuthModalOAuthSectionProps extends AuthModalOAuthProps {
+    /** Disable every provider (e.g. while an OTP request is in flight) */
+    disabled?: boolean;
+}
+export declare function AuthModalOAuth({ providers, disabled }: AuthModalOAuthSectionProps): React.JSX.Element | null;
+export declare namespace AuthModalOAuth {
+    var displayName: string;
+}
+//# sourceMappingURL=AuthModalOAuth.d.ts.map

package/dist/components/AuthModal/subcomponents/AuthModalOAuth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthModalOAuth.d.ts","sourceRoot":"","sources":["../../../../src/components/AuthModal/subcomponents/AuthModalOAuth.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAE9D,MAAM,WAAW,0BAA2B,SAAQ,mBAAmB;IACrE,sEAAsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,0BAA0B,4BAsBjF;yBAtBe,cAAc"}

package/dist/components/AuthModal/subcomponents/AuthModalOAuth.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { OAuthButton } from './OAuthButton.js';
+import { useAuthModalLabels } from '../AuthModal.labels.js';
+
+function AuthModalOAuth({ providers, disabled }) {
+  const labels = useAuthModalLabels();
+  if (!providers || providers.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "auth-modal-oauth-section", className: "mt-6 flex flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center my-2", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx("div", { className: "w-full border-t border-border-warm" }) }),
+      /* @__PURE__ */ jsx("div", { className: "relative px-3 bg-grey-50 text-body-3 text-sand-muted uppercase font-medium tracking-wider", children: labels.oauthDivider })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col gap-3", children: providers.map((provider) => /* @__PURE__ */ jsx(OAuthButton, { provider, disabled }, provider.id)) })
+  ] });
+}
+AuthModalOAuth.displayName = "AuthModalOAuth";
+
+export { AuthModalOAuth };

package/dist/components/AuthModal/subcomponents/AuthModalOtpForm.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { AuthModalFormProps } from '../AuthModal.types';
+export interface AuthModalOtpFormProps {
+    form: AuthModalFormProps;
+}
+export declare function AuthModalOtpForm({ form }: AuthModalOtpFormProps): React.JSX.Element;
+export declare namespace AuthModalOtpForm {
+    var displayName: string;
+}
+//# sourceMappingURL=AuthModalOtpForm.d.ts.map

package/dist/components/AuthModal/subcomponents/AuthModalOtpForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthModalOtpForm.d.ts","sourceRoot":"","sources":["../../../../src/components/AuthModal/subcomponents/AuthModalOtpForm.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAS7D,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,kBAAkB,CAAC;CAC1B;AAED,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,EAAE,qBAAqB,qBAgE/D;yBAhEe,gBAAgB"}

package/dist/components/AuthModal/subcomponents/AuthModalOtpForm.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useAuthModalLabels } from '../AuthModal.labels.js';
+import { AuthStepHeader, AuthDestination, AuthForm, AuthSubmitButton, AuthTextLink } from './AuthModalParts.js';
+import { OtpInput } from '../../OtpInput/OtpInput.js';
+
+function AuthModalOtpForm({ form }) {
+  const labels = useAuthModalLabels();
+  const {
+    identifier = "",
+    otp = "",
+    otpLength = 6,
+    onOtpChange,
+    onOtpSubmit,
+    onResendOtp,
+    onEditIdentifier,
+    isLoading = false,
+    error,
+    destination,
+    resendCountdown = 0
+  } = form;
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "auth-modal-otp-step", className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx(
+      AuthStepHeader,
+      {
+        title: labels.otpTitle,
+        subtitle: /* @__PURE__ */ jsxs("span", { className: "inline-flex flex-wrap items-center gap-1", children: [
+          labels.otpSentTo,
+          " ",
+          /* @__PURE__ */ jsx(
+            AuthDestination,
+            {
+              value: destination || identifier,
+              onEdit: onEditIdentifier,
+              disabled: isLoading
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(AuthForm, { onSubmit: onOtpSubmit, className: "space-y-6", children: [
+      /* @__PURE__ */ jsx(
+        OtpInput,
+        {
+          length: otpLength,
+          value: otp,
+          onChange: onOtpChange,
+          disabled: isLoading,
+          autoFocus: true,
+          autoComplete: "one-time-code",
+          "aria-label": labels.otpLabel,
+          error: error ?? void 0
+        }
+      ),
+      /* @__PURE__ */ jsx(AuthSubmitButton, { isLoading, disabled: otp.length !== otpLength, children: labels.otpSubmit }),
+      /* @__PURE__ */ jsx("div", { className: "text-center pt-1 text-body-3", children: resendCountdown > 0 ? /* @__PURE__ */ jsx("p", { className: "text-grey-600", "aria-live": "polite", children: labels.otpResendIn(resendCountdown) }) : onResendOtp && /* @__PURE__ */ jsx(AuthTextLink, { onClick: onResendOtp, disabled: isLoading, children: labels.otpResend }) })
+    ] })
+  ] });
+}
+AuthModalOtpForm.displayName = "AuthModalOtpForm";
+
+export { AuthModalOtpForm };

package/dist/components/AuthModal/subcomponents/AuthModalParts.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+/** A <form> that never falls back to a native, page-reloading submit. */
+export declare function AuthForm({ onSubmit, className, children, }: {
+    onSubmit?: (e: React.FormEvent) => void;
+    className?: string;
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** Step heading. `focusOnMount` moves focus here for steps without an input to focus. */
+export declare function AuthStepHeader({ title, subtitle, focusOnMount, }: {
+    title: React.ReactNode;
+    subtitle?: React.ReactNode;
+    focusOnMount?: boolean;
+}): React.JSX.Element;
+export declare function AuthFieldError({ id, children }: {
+    id: string;
+    children?: React.ReactNode;
+}): React.JSX.Element | null;
+export declare function AuthSubmitButton({ isLoading, disabled, children, }: {
+    isLoading?: boolean;
+    disabled?: boolean;
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function AuthTextLink({ onClick, disabled, className, children, }: {
+    onClick?: () => void;
+    disabled?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** Masked destination with an optional "Edit" link back to the identifier step. */
+export declare function AuthDestination({ value, onEdit, disabled, }: {
+    value: string;
+    onEdit?: () => void;
+    disabled?: boolean;
+}): React.JSX.Element;
+type PasswordFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type'> & {
+    id: string;
+    label: string;
+    onValueChange?: (value: string) => void;
+    invalid?: boolean;
+    describedBy?: string;
+};
+export declare function AuthPasswordField({ id, label, onValueChange, invalid, describedBy, className, ...inputProps }: PasswordFieldProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=AuthModalParts.d.ts.map

package/dist/components/AuthModal/subcomponents/AuthModalParts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthModalParts.d.ts","sourceRoot":"","sources":["../../../../src/components/AuthModal/subcomponents/AuthModalParts.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,yEAAyE;AACzE,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE;IACD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAaA;AAED,yFAAyF;AACzF,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,YAAoB,GACrB,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,qBAcA;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4BAO1F;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAmBA;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE;IACD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAWA;AAED,mFAAmF;AACnF,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,MAAM,EACN,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,qBAYA;AAED,KAAK,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAAG;IACjG,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,EAAE,EACF,KAAK,EACL,aAAa,EACb,OAAO,EACP,WAAW,EACX,SAAS,EACT,GAAG,UAAU,EACd,EAAE,kBAAkB,qBA+BpB"}

package/dist/components/AuthModal/subcomponents/AuthModalParts.js

@@ -0,0 +1,134 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@timmbr/utils';
+import { EyeOff, Eye } from '@timmbr/icons';
+import { useAuthModalLabels } from '../AuthModal.labels.js';
+import { authModalHeadingVariants, authModalSubtitleVariants, authModalSubmitButtonVariants, authModalLinkVariants, authModalInputVariants } from '../AuthModal.styles.js';
+import { Spinner } from '../../Spinner/Spinner.js';
+
+function AuthForm({
+  onSubmit,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "form",
+    {
+      noValidate: true,
+      className,
+      onSubmit: (e) => {
+        e.preventDefault();
+        onSubmit?.(e);
+      },
+      children
+    }
+  );
+}
+function AuthStepHeader({
+  title,
+  subtitle,
+  focusOnMount = false
+}) {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (focusOnMount) ref.current?.focus();
+  }, [focusOnMount]);
+  return /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+    /* @__PURE__ */ jsx("h2", { ref, tabIndex: -1, className: authModalHeadingVariants(), children: title }),
+    subtitle && /* @__PURE__ */ jsx("div", { className: authModalSubtitleVariants(), children: subtitle })
+  ] });
+}
+function AuthFieldError({ id, children }) {
+  if (!children) return null;
+  return /* @__PURE__ */ jsx("p", { id, role: "alert", "data-slot": "auth-modal-error", className: "mt-2 text-body-3 text-destructive font-medium", children });
+}
+function AuthSubmitButton({
+  isLoading,
+  disabled,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "submit",
+      disabled: disabled || isLoading,
+      "aria-busy": isLoading || void 0,
+      className: authModalSubmitButtonVariants(),
+      children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Spinner, { size: "sm", variant: "white", decorative: true }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children })
+      ] }) : children
+    }
+  );
+}
+function AuthTextLink({
+  onClick,
+  disabled,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled,
+      className: cn(authModalLinkVariants(), className),
+      children
+    }
+  );
+}
+function AuthDestination({
+  value,
+  onEdit,
+  disabled
+}) {
+  const labels = useAuthModalLabels();
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "font-medium text-grey-950 break-all", children: value }),
+    onEdit && /* @__PURE__ */ jsx(AuthTextLink, { onClick: onEdit, disabled, className: "text-body-3", children: labels.edit })
+  ] });
+}
+function AuthPasswordField({
+  id,
+  label,
+  onValueChange,
+  invalid,
+  describedBy,
+  className,
+  ...inputProps
+}) {
+  const labels = useAuthModalLabels();
+  const [visible, setVisible] = React.useState(false);
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: id, className: "sr-only", children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id,
+          type: visible ? "text" : "password",
+          onChange: (e) => onValueChange?.(e.target.value),
+          "aria-invalid": invalid || void 0,
+          "aria-describedby": describedBy,
+          className: cn(authModalInputVariants({ invalid: !!invalid }), "pr-12"),
+          ...inputProps
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setVisible((v) => !v),
+          "aria-label": visible ? labels.hidePassword : labels.showPassword,
+          "aria-pressed": visible,
+          className: "absolute inset-y-0 right-0 flex w-12 items-center justify-center text-grey-600 hover:text-grey-950 focus:outline-none focus-visible:text-primary cursor-pointer",
+          children: visible ? /* @__PURE__ */ jsx(EyeOff, { className: "size-5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Eye, { className: "size-5", "aria-hidden": "true" })
+        }
+      )
+    ] })
+  ] });
+}
+
+export { AuthDestination, AuthFieldError, AuthForm, AuthPasswordField, AuthStepHeader, AuthSubmitButton, AuthTextLink };

package/dist/components/AuthModal/subcomponents/AuthModalPasswordForm.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { AuthModalFormProps } from '../AuthModal.types';
+export interface AuthModalPasswordFormProps {
+    form: AuthModalFormProps;
+}
+export declare function AuthModalPasswordForm({ form }: AuthModalPasswordFormProps): React.JSX.Element;
+export declare namespace AuthModalPasswordForm {
+    var displayName: string;
+}
+//# sourceMappingURL=AuthModalPasswordForm.d.ts.map

package/dist/components/AuthModal/subcomponents/AuthModalPasswordForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthModalPasswordForm.d.ts","sourceRoot":"","sources":["../../../../src/components/AuthModal/subcomponents/AuthModalPasswordForm.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAW7D,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,kBAAkB,CAAC;CAC1B;AAID,wBAAgB,qBAAqB,CAAC,EAAE,IAAI,EAAE,EAAE,0BAA0B,qBAsDzE;yBAtDe,qBAAqB"}

package/dist/components/AuthModal/subcomponents/AuthModalPasswordForm.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useAuthModalLabels } from '../AuthModal.labels.js';
+import { AuthStepHeader, AuthDestination, AuthForm, AuthPasswordField, AuthFieldError, AuthSubmitButton, AuthTextLink } from './AuthModalParts.js';
+
+const ERROR_ID = "auth-password-error";
+function AuthModalPasswordForm({ form }) {
+  const labels = useAuthModalLabels();
+  const {
+    identifier = "",
+    password = "",
+    onPasswordChange,
+    onPasswordSubmit,
+    onForgotPassword,
+    onEditIdentifier,
+    isLoading = false,
+    error
+  } = form;
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "auth-modal-password-step", className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx(
+      AuthStepHeader,
+      {
+        title: labels.passwordTitle,
+        subtitle: /* @__PURE__ */ jsx(AuthDestination, { value: identifier, onEdit: onEditIdentifier, disabled: isLoading })
+      }
+    ),
+    /* @__PURE__ */ jsxs(AuthForm, { onSubmit: onPasswordSubmit, className: "space-y-4", children: [
+      /* @__PURE__ */ jsx("input", { type: "hidden", name: "username", autoComplete: "username", value: identifier, readOnly: true }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          AuthPasswordField,
+          {
+            id: "auth-password-input",
+            label: labels.passwordLabel,
+            placeholder: labels.passwordPlaceholder,
+            autoComplete: "current-password",
+            value: password,
+            onValueChange: onPasswordChange,
+            disabled: isLoading,
+            autoFocus: true,
+            invalid: !!error,
+            describedBy: error ? ERROR_ID : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(AuthFieldError, { id: ERROR_ID, children: error })
+      ] }),
+      /* @__PURE__ */ jsx(AuthSubmitButton, { isLoading, disabled: !password, children: labels.passwordSubmit }),
+      onForgotPassword && /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx(AuthTextLink, { onClick: onForgotPassword, disabled: isLoading, className: "text-body-2", children: labels.forgotPassword }) })
+    ] })
+  ] });
+}
+AuthModalPasswordForm.displayName = "AuthModalPasswordForm";
+
+export { AuthModalPasswordForm };

package/dist/components/AuthModal/subcomponents/AuthModalSetPasswordForm.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { AuthModalFormProps } from '../AuthModal.types';
+export interface AuthModalSetPasswordFormProps {
+    form: AuthModalFormProps;
+}
+export declare function AuthModalSetPasswordForm({ form }: AuthModalSetPasswordFormProps): React.JSX.Element;
+export declare namespace AuthModalSetPasswordForm {
+    var displayName: string;
+}
+//# sourceMappingURL=AuthModalSetPasswordForm.d.ts.map

package/dist/components/AuthModal/subcomponents/AuthModalSetPasswordForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthModalSetPasswordForm.d.ts","sourceRoot":"","sources":["../../../../src/components/AuthModal/subcomponents/AuthModalSetPasswordForm.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAU7D,MAAM,WAAW,6BAA6B;IAC5C,IAAI,EAAE,kBAAkB,CAAC;CAC1B;AAKD,wBAAgB,wBAAwB,CAAC,EAAE,IAAI,EAAE,EAAE,6BAA6B,qBA0E/E;yBA1Ee,wBAAwB"}

package/dist/components/AuthModal/subcomponents/AuthModalSetPasswordForm.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useAuthModalLabels } from '../AuthModal.labels.js';
+import { AuthStepHeader, AuthForm, AuthPasswordField, AuthFieldError, AuthSubmitButton, AuthTextLink } from './AuthModalParts.js';
+
+const HINT_ID = "auth-new-password-hint";
+const ERROR_ID = "auth-set-password-error";
+function AuthModalSetPasswordForm({ form }) {
+  const labels = useAuthModalLabels();
+  const {
+    setPasswordMode = "create",
+    newPassword = "",
+    onNewPasswordChange,
+    confirmPassword = "",
+    onConfirmPasswordChange,
+    onSetPasswordSubmit,
+    onSkipSetPassword,
+    isLoading = false,
+    error
+  } = form;
+  const isReset = setPasswordMode === "reset";
+  const mismatch = confirmPassword.length > 0 && confirmPassword !== newPassword;
+  const shownError = error ?? (mismatch ? labels.passwordMismatch : null);
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "auth-modal-set-password-step", className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx(
+      AuthStepHeader,
+      {
+        title: isReset ? labels.setPasswordResetTitle : labels.setPasswordCreateTitle,
+        subtitle: isReset ? labels.setPasswordResetSubtitle : labels.setPasswordCreateSubtitle
+      }
+    ),
+    /* @__PURE__ */ jsxs(AuthForm, { onSubmit: onSetPasswordSubmit, className: "space-y-4", children: [
+      /* @__PURE__ */ jsx(
+        AuthPasswordField,
+        {
+          id: "auth-new-password-input",
+          label: labels.newPasswordLabel,
+          placeholder: labels.newPasswordLabel,
+          autoComplete: "new-password",
+          value: newPassword,
+          onValueChange: onNewPasswordChange,
+          disabled: isLoading,
+          autoFocus: true,
+          describedBy: HINT_ID
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          AuthPasswordField,
+          {
+            id: "auth-confirm-password-input",
+            label: labels.confirmPasswordLabel,
+            placeholder: labels.confirmPasswordLabel,
+            autoComplete: "new-password",
+            value: confirmPassword,
+            onValueChange: onConfirmPasswordChange,
+            disabled: isLoading,
+            invalid: !!shownError,
+            describedBy: shownError ? ERROR_ID : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(AuthFieldError, { id: ERROR_ID, children: shownError })
+      ] }),
+      /* @__PURE__ */ jsx("p", { id: HINT_ID, className: "text-body-3 text-grey-600", children: labels.passwordHint }),
+      /* @__PURE__ */ jsx(
+        AuthSubmitButton,
+        {
+          isLoading,
+          disabled: !newPassword || newPassword !== confirmPassword,
+          children: labels.setPasswordSubmit
+        }
+      ),
+      !isReset && onSkipSetPassword && /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx(AuthTextLink, { onClick: onSkipSetPassword, disabled: isLoading, className: "text-body-2", children: labels.skipForNow }) })
+    ] })
+  ] });
+}
+AuthModalSetPasswordForm.displayName = "AuthModalSetPasswordForm";
+
+export { AuthModalSetPasswordForm };

package/dist/components/AuthModal/subcomponents/AuthModalSuccess.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { AuthModalFormProps } from '../AuthModal.types';
+export interface AuthModalSuccessProps {
+    form: AuthModalFormProps;
+}
+export declare function AuthModalSuccess({ form }: AuthModalSuccessProps): React.JSX.Element;
+export declare namespace AuthModalSuccess {
+    var displayName: string;
+}
+//# sourceMappingURL=AuthModalSuccess.d.ts.map

package/dist/components/AuthModal/subcomponents/AuthModalSuccess.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthModalSuccess.d.ts","sourceRoot":"","sources":["../../../../src/components/AuthModal/subcomponents/AuthModalSuccess.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,kBAAkB,CAAC;CAC1B;AAED,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,EAAE,qBAAqB,qBAkB/D;yBAlBe,gBAAgB"}

package/dist/components/AuthModal/subcomponents/AuthModalSuccess.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { CheckCircle } from '@timmbr/icons';
+import { useAuthModalLabels } from '../AuthModal.labels.js';
+import { AuthStepHeader } from './AuthModalParts.js';
+
+function AuthModalSuccess({ form }) {
+  const labels = useAuthModalLabels();
+  const { successTitle = labels.successTitle, successMessage } = form;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "auth-modal-success-step",
+      role: "status",
+      "aria-live": "polite",
+      className: "flex flex-col items-center justify-center text-center gap-4 py-10 min-h-[320px]",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex size-16 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(CheckCircle, { className: "size-9", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx(AuthStepHeader, { title: successTitle, subtitle: successMessage, focusOnMount: true })
+      ]
+    }
+  );
+}
+AuthModalSuccess.displayName = "AuthModalSuccess";
+
+export { AuthModalSuccess };

package/dist/components/AuthModal/subcomponents/OAuthButton.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { AuthOAuthProvider } from '../AuthModal.types';
+export interface OAuthButtonProps {
+    provider: AuthOAuthProvider;
+    /** Disable while another sign-in request is in flight */
+    disabled?: boolean;
+}
+export declare function OAuthButton({ provider, disabled }: OAuthButtonProps): React.JSX.Element;
+export declare namespace OAuthButton {
+    var displayName: string;
+}
+//# sourceMappingURL=OAuthButton.d.ts.map

package/dist/components/AuthModal/subcomponents/OAuthButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OAuthButton.d.ts","sourceRoot":"","sources":["../../../../src/components/AuthModal/subcomponents/OAuthButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAe5D,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,gBAAgB,qBAoBnE;yBApBe,WAAW"}

package/dist/components/AuthModal/subcomponents/OAuthButton.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { GitHubIcon, AppleIcon, GoogleIcon } from '@timmbr/icons';
+import { useAuthModalLabels } from '../AuthModal.labels.js';
+import { authModalSecondaryButtonVariants } from '../AuthModal.styles.js';
+import { Spinner } from '../../Spinner/Spinner.js';
+
+const PROVIDER_ICONS = {
+  google: GoogleIcon,
+  apple: AppleIcon,
+  github: GitHubIcon
+};
+function ProviderIcon({ provider }) {
+  if (provider.icon) return /* @__PURE__ */ jsx(Fragment, { children: provider.icon });
+  const BuiltIn = PROVIDER_ICONS[provider.id.toLowerCase()];
+  return BuiltIn ? /* @__PURE__ */ jsx(BuiltIn, { className: "size-5 shrink-0" }) : null;
+}
+function OAuthButton({ provider, disabled }) {
+  const labels = useAuthModalLabels();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: provider.onClick,
+      disabled: disabled || provider.disabled || provider.isLoading,
+      "aria-busy": provider.isLoading || void 0,
+      "data-slot": `oauth-button-${provider.id}`,
+      className: authModalSecondaryButtonVariants(),
+      children: [
+        provider.isLoading ? /* @__PURE__ */ jsx(Spinner, { size: "sm", variant: "primary", decorative: true }) : /* @__PURE__ */ jsx(ProviderIcon, { provider }),
+        /* @__PURE__ */ jsx("span", { children: labels.oauthContinueWith(provider.name) })
+      ]
+    }
+  );
+}
+OAuthButton.displayName = "OAuthButton";
+
+export { OAuthButton };

package/dist/components/AuthModal/subcomponents/index.d.ts

@@ -0,0 +1,9 @@
+export * from './OAuthButton';
+export * from './AuthModalBanner';
+export * from './AuthModalIdentifierForm';
+export * from './AuthModalOtpForm';
+export * from './AuthModalPasswordForm';
+export * from './AuthModalSetPasswordForm';
+export * from './AuthModalOAuth';
+export * from './AuthModalSuccess';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/AuthModal/subcomponents/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/AuthModal/subcomponents/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC"}