@timmbr/ui 1.4.2 → 1.6.0

package/dist/components/AuthModal/AuthModal.types.d.ts

@@ -0,0 +1,158 @@
+import type { ReactNode, FormEvent } from 'react';
+export interface AuthModalBannerData {
+    title?: string;
+    subtitle?: string;
+    promoBadge?: string;
+    termsNotice?: string;
+    imageUrl?: string;
+    iconUrl?: string;
+    logoUrl?: string;
+}
+/**
+ * IDENTIFIER → OTP | PASSWORD → [SET_PASSWORD] → SUCCESS
+ * - IDENTIFIER: email or phone, "Continue" (OTP) or "Use password instead"
+ * - OTP: one-time code
+ * - PASSWORD: password sign-in, with "Forgot password?"
+ * - SET_PASSWORD: create (new account, skippable) or reset (forgot password)
+ * - SUCCESS: signed-in confirmation
+ */
+export type AuthModalStep = 'IDENTIFIER' | 'OTP' | 'PASSWORD' | 'SET_PASSWORD' | 'SUCCESS';
+export type AuthModalSetPasswordMode = 'create' | 'reset';
+export interface AuthOAuthProvider {
+    /** Provider identifier, e.g. 'google', 'apple', 'github', or custom */
+    id: 'google' | 'apple' | 'github' | string;
+    /** Display label for the provider, e.g. 'Google', 'Apple', 'GitHub' */
+    name: string;
+    /** Custom icon ReactNode. If omitted, built-in icon is used for google, apple, github */
+    icon?: ReactNode;
+    /** Click handler for initiating OAuth flow */
+    onClick: () => void;
+    /** Whether this provider is currently in a loading state */
+    isLoading?: boolean;
+    /** Whether this provider is disabled */
+    disabled?: boolean;
+}
+export interface AuthModalBannerProps {
+    /** Promotional banner content. The banner is hidden when no image is provided. */
+    data?: AuthModalBannerData;
+    /** Link for the promo's terms notice (e.g. "*T&C Apply"); not the site's Terms of Use */
+    promoTermsUrl?: string;
+    /** Custom banner wrapper class */
+    className?: string;
+}
+export interface AuthModalFormProps {
+    /** Current step (see AuthModalStep) */
+    step?: AuthModalStep;
+    /** Whether an async request is currently loading */
+    isLoading?: boolean;
+    /** Error message for the current step */
+    error?: string | null;
+    /** Identifier input value (phone number or email) */
+    identifier?: string;
+    onIdentifierChange?: (value: string) => void;
+    /** Primary action: send a one-time code */
+    onIdentifierSubmit?: (e: FormEvent) => void;
+    /** Secondary action: switch to the PASSWORD step. Hidden when omitted. */
+    onUsePassword?: () => void;
+    /** One-time code value */
+    otp?: string;
+    onOtpChange?: (value: string) => void;
+    onOtpSubmit?: (e: FormEvent) => void;
+    /** Number of digits in the code. Defaults to 6 */
+    otpLength?: number;
+    onResendOtp?: () => void;
+    /** Resend countdown in seconds (0 = enabled) */
+    resendCountdown?: number;
+    /** Masked destination where the code was sent (e.g. a***x@gmail.com) */
+    destination?: string;
+    /** "Edit" link on OTP/PASSWORD steps: go back to IDENTIFIER */
+    onEditIdentifier?: () => void;
+    password?: string;
+    onPasswordChange?: (value: string) => void;
+    onPasswordSubmit?: (e: FormEvent) => void;
+    /** "Forgot password?" — typically sends a one-time code instead */
+    onForgotPassword?: () => void;
+    setPasswordMode?: AuthModalSetPasswordMode;
+    newPassword?: string;
+    onNewPasswordChange?: (value: string) => void;
+    confirmPassword?: string;
+    onConfirmPasswordChange?: (value: string) => void;
+    onSetPasswordSubmit?: (e: FormEvent) => void;
+    /** "Skip for now" (create mode only). Hidden when omitted. */
+    onSkipSetPassword?: () => void;
+    /** Heading shown on the SUCCESS step */
+    successTitle?: string;
+    /** Supporting text shown on the SUCCESS step */
+    successMessage?: string;
+}
+export interface AuthModalOAuthProps {
+    /** List of OAuth providers to display */
+    providers?: AuthOAuthProvider[];
+}
+export interface AuthModalLegalProps {
+    /** Terms of Service URL. Defaults to '/terms' */
+    termsUrl?: string;
+    /** Privacy Policy URL. Defaults to '/privacy' */
+    privacyUrl?: string;
+}
+/** All user-facing copy. Every key has an English default. */
+export interface AuthModalLabels {
+    dialogTitle: string;
+    dialogDescription: string;
+    close: string;
+    identifierTitle: string;
+    identifierSubtitle: string;
+    identifierLabel: string;
+    identifierPlaceholder: string;
+    continue: string;
+    usePassword: string;
+    legalPrefix: string;
+    termsOfUse: string;
+    privacyPolicy: string;
+    oauthDivider: string;
+    oauthContinueWith: (providerName: string) => string;
+    otpTitle: string;
+    otpSentTo: string;
+    otpLabel: string;
+    otpSubmit: string;
+    otpResend: string;
+    otpResendIn: (seconds: number) => string;
+    edit: string;
+    passwordTitle: string;
+    passwordLabel: string;
+    passwordPlaceholder: string;
+    passwordSubmit: string;
+    forgotPassword: string;
+    showPassword: string;
+    hidePassword: string;
+    setPasswordCreateTitle: string;
+    setPasswordCreateSubtitle: string;
+    setPasswordResetTitle: string;
+    setPasswordResetSubtitle: string;
+    newPasswordLabel: string;
+    confirmPasswordLabel: string;
+    passwordHint: string;
+    passwordMismatch: string;
+    setPasswordSubmit: string;
+    skipForNow: string;
+    successTitle: string;
+}
+export interface AuthModalProps {
+    /** Controlled open state */
+    isOpen: boolean;
+    /** Callback fired when modal is closed */
+    onClose: () => void;
+    /** Promotional banner section configuration */
+    banner?: AuthModalBannerProps;
+    /** Form state, inputs, and submission callbacks */
+    form: AuthModalFormProps;
+    /** OAuth social login configuration (shown on the IDENTIFIER step) */
+    oauth?: AuthModalOAuthProps;
+    /** Legal links configuration */
+    legal?: AuthModalLegalProps;
+    /** Override any user-facing copy */
+    labels?: Partial<AuthModalLabels>;
+    /** Optional custom class name for dialog container */
+    className?: string;
+}
+//# sourceMappingURL=AuthModal.types.d.ts.map

package/dist/components/AuthModal/AuthModal.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthModal.types.d.ts","sourceRoot":"","sources":["../../../src/components/AuthModal/AuthModal.types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+export * from './AuthModal';
+export * from './AuthModal.types';
+export * from './AuthModal.styles';
+export { DEFAULT_AUTH_MODAL_LABELS } from './AuthModal.labels';
+export * from './subcomponents';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AuthModal/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,cAAc,iBAAiB,CAAC"}

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { AuthModalBannerProps } from '../AuthModal.types';
+/**
+ * Promotional side panel (≥ sm). All content comes from the consumer (CMS);
+ * without an image the banner isn't rendered at all.
+ */
+export declare function AuthModalBanner({ data, promoTermsUrl, className }: AuthModalBannerProps): React.JSX.Element | null;
+export declare namespace AuthModalBanner {
+    var displayName: string;
+}
+//# sourceMappingURL=AuthModalBanner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AuthModalBanner.d.ts","sourceRoot":"","sources":["../../../../src/components/AuthModal/subcomponents/AuthModalBanner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE/D;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,oBAAoB,4BAqEvF;yBArEe,eAAe"}

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

@@ -0,0 +1,58 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '@timmbr/utils';
+import { authModalBannerVariants } from '../AuthModal.styles.js';
+
+function AuthModalBanner({ data, promoTermsUrl, className }) {
+  if (!data?.imageUrl) return null;
+  const brandIcon = data.iconUrl || data.logoUrl;
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "auth-modal-banner", className: cn(authModalBannerVariants(), className), children: [
+    /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: "absolute inset-0 pointer-events-none z-0", children: [
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: data.imageUrl,
+          alt: "",
+          width: 320,
+          height: 454,
+          loading: "lazy",
+          decoding: "async",
+          className: "h-full w-full object-cover object-center"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-grey-1000/20" })
+    ] }),
+    (brandIcon || data.title || data.subtitle) && /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex items-center gap-3 pt-2", children: [
+      brandIcon && /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: brandIcon,
+          alt: "",
+          width: 56,
+          height: 56,
+          loading: "lazy",
+          decoding: "async",
+          className: "size-14 object-contain"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "text-grey-50 text-left leading-tight", children: [
+        data.title && /* @__PURE__ */ jsx("p", { className: "text-h4 tracking-[1.4px]", children: data.title }),
+        data.subtitle && /* @__PURE__ */ jsx("p", { className: "font-medium text-body-2 tracking-[0.7px]", children: data.subtitle })
+      ] })
+    ] }),
+    (data.promoBadge || data.termsNotice) && /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex flex-col items-start gap-4 pb-2", children: [
+      data.promoBadge && /* @__PURE__ */ jsx("div", { className: "bg-primary-400 px-3.5 py-1.5 rounded-sm shadow-sm", children: /* @__PURE__ */ jsx("span", { className: "text-grey-50 font-semibold text-body-3 tracking-wider uppercase", children: data.promoBadge }) }),
+      data.termsNotice && (promoTermsUrl ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: promoTermsUrl,
+          className: "text-grey-50/80 hover:text-grey-50 text-body-3 underline underline-offset-2 transition-colors",
+          children: data.termsNotice
+        }
+      ) : /* @__PURE__ */ jsx("p", { className: "text-grey-50/80 text-body-3", children: data.termsNotice }))
+    ] })
+  ] });
+}
+AuthModalBanner.displayName = "AuthModalBanner";
+
+export { AuthModalBanner };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AuthModalIdentifierForm.d.ts","sourceRoot":"","sources":["../../../../src/components/AuthModal/subcomponents/AuthModalIdentifierForm.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAGlF,MAAM,WAAW,4BAA4B;IAC3C,IAAI,EAAE,kBAAkB,CAAC;IACzB,KAAK,CAAC,EAAE,mBAAmB,CAAC;CAC7B;AAKD,wBAAgB,uBAAuB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,4BAA4B,qBAkEpF;yBAlEe,uBAAuB"}

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"}