@vuoma/react-native-ui 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,45 @@
+Vuoma Connected Application License
+Version 1.0 — October 19, 2026
+
+Copyright (c) 2026 UPPP LLC, doing business as Vuoma.
+
+Permission is granted, without a separate software license fee, to use, copy,
+modify and distribute this package and its documentation (the Software) solely
+to develop, test, operate and distribute applications that integrate with the
+Vuoma service through authorized Vuoma APIs. This includes commercial,
+studio-branded applications, websites, and development or test versions using
+mocked Vuoma responses. You may share the Software with your developers and
+contractors for these purposes and include it in source or compiled application
+distributions, subject to this license.
+
+You must retain this license and the copyright notice in copies or substantial
+portions of the Software, including an application's third-party notices. Your
+modifications must remain subject to these permitted-use limits. You may not
+use or distribute the Software as a general-purpose library for applications
+unconnected to Vuoma, or to implement or operate a replacement for the Vuoma
+service, without separate written permission from UPPP LLC.
+
+This license applies only to the Software included in this package. It does
+not license Vuoma's backend, databases, customer data, studio branding,
+third-party assets or trademarks. Separately identified third-party software
+remains subject to its own license. You retain any rights you otherwise hold
+in your application code and content.
+
+This license does not grant API credentials, access to any account or data,
+hosting, support, or a right to continued service. Access to Vuoma remains
+subject to applicable service agreements, permissions and charges. Ending
+service does not transfer the backend or authorize continued API access. You
+may retain archival copies and use the Software in development intended for an
+authorized Vuoma integration; operating it for an unrelated replacement service
+requires separate permission.
+
+All rights not expressly granted are reserved. Use outside these terms is not
+licensed. This is a source-available, restricted-use license, not an open-source
+license. Separate written agreements with UPPP LLC may grant additional rights.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. TO THE MAXIMUM EXTENT PERMITTED BY LAW, THE COPYRIGHT HOLDER
+IS NOT LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY ARISING FROM THE
+SOFTWARE OR ITS USE. Nothing in this license limits liability or rights that
+cannot lawfully be limited.

package/README.md

@@ -1,3 +1,147 @@
-# Temporary Holding Version
+# @vuoma/react-native-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Controlled React Native account and booking UI used by Vuoma's own apps. The
+same package is available for independently developed Vuoma-connected apps.
+It has no studio artwork, fonts, tenant configuration, credentials, navigation,
+network requests or storage. React and React Native are its only runtime peers. This is the renamed
+`@vuoma/native-ui` package with the same controlled component API; change
+existing import prefixes and dependencies together. Its first publication
+under the new name must be verified before registry installation. Verification
+forms preserve the complete six- or eight-digit code, including leading zeroes.
+
+```sh
+npm install @vuoma/react-native-ui@0.1.1 @vuoma/sdk@0.2.2
+```
+
+Use React 19.3 and React Native 0.88 or compatible versions in the declared peer
+ranges. Metro and Expo web consume the included TypeScript source; other ESM
+bundlers consume compiled JavaScript. Type declarations are included. Load any
+licensed custom fonts in the host before supplying typography styles.
+
+## Sign in with the public SDK
+
+Supply the client created for the selected studio and an `acceptSession`
+callback owned by your app's secure-session provider. That callback must store
+native credentials in platform secure storage and expose the current member
+session to the SDK's `tokenAdapter`. The UI never receives those credentials.
+
+```tsx
+import { useEffect, useRef, useState } from 'react'
+import { KeyboardAvoidingView, Platform, ScrollView, Text } from 'react-native'
+import { AuthContent, SignInForm, type NativeTheme } from '@vuoma/react-native-ui'
+import type { MemberAuthSession, VuomaClient } from '@vuoma/sdk'
+
+export function StudioSignIn({ client, theme, acceptSession }: {
+  client: VuomaClient
+  theme: NativeTheme
+  acceptSession: (session: MemberAuthSession, signal: AbortSignal) => Promise<void>
+}) {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [passwordVisible, setPasswordVisible] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [message, setMessage] = useState<string | null>(null)
+  const request = useRef<AbortController | null>(null)
+  useEffect(() => () => request.current?.abort(), [])
+  const ready = email.trim().includes('@') && password.length > 0 && !busy
+
+  async function submit() {
+    if (!ready || request.current) return
+    const controller = new AbortController()
+    request.current = controller
+    setBusy(true)
+    setMessage(null)
+    let issued: MemberAuthSession | undefined
+    try {
+      issued = await client.auth.signIn({ email: email.trim(), password, signal: controller.signal })
+      await acceptSession(issued, controller.signal)
+    } catch {
+      if (issued) {
+        // Revoke credentials if this device could not securely accept them.
+        void client.auth.signOut({ refreshToken: issued.refresh_token }).catch(() => {})
+      }
+      if (!controller.signal.aborted) setMessage('Sign-in could not be completed. Please try again.')
+    } finally {
+      if (request.current === controller) request.current = null
+      if (!controller.signal.aborted) { setPassword(''); setBusy(false) }
+    }
+  }
+
+  return <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
+    <ScrollView keyboardShouldPersistTaps="handled" contentContainerStyle={{ flexGrow: 1, justifyContent: 'center', alignItems: 'center', padding: 24 }}>
+      <AuthContent theme={theme} branding={<Text>Example studio</Text>}>
+        <SignInForm theme={theme} email={email} password={password}
+          passwordVisible={passwordVisible} onPasswordVisibleChange={setPasswordVisible}
+          onEmailChange={setEmail} onPasswordChange={setPassword}
+          canSubmit={ready} busy={busy} message={message} onSubmit={() => void submit()} />
+      </AuthContent>
+    </ScrollView>
+  </KeyboardAvoidingView>
+}
+```
+
+Wrap your screen in the host's safe-area handling. Clear inputs and cancel
+pending requests on account/studio changes and navigation. Browser deployments
+need a same-origin server session adapter with secure HttpOnly cookies; do not
+copy native token storage into browser local storage.
+
+## Account setup and booking
+
+All forms use controlled values, explicit submit callbacks and `canSubmit` /
+`busy` state. Busy forms lock submission, editing and auxiliary actions. Errors
+use a live accessible alert. The host supplies useful public error messages;
+never display raw provider errors or tokens.
+
+| Component | Host-owned API flow |
+| --- | --- |
+| `AccountDetailsForm` | Explicit `client.auth.requestAccountCode`, with signup/recovery intent and optional name |
+| `VerificationCodeForm` | `client.auth.confirmAccountCode`; keep its returned password capability in memory |
+| `NewPasswordForm` | Enforce password policy, then `client.auth.completePassword`; clear capability/code/password after completion or cancellation |
+| `BookingReview` | Display authoritative details, then explicitly call `client.member.bookClass` or `bookAppointmentVisit` |
+| `BookingReviewHeader` | Shared heading for a host-owned booking sheet with a separate fixed confirmation action |
+
+Supply `inputRef` to verification and new-password forms when moving keyboard
+focus between steps. Mount each step separately; the email-code field uses
+numeric one-time-code autofill and the password field uses the platform's
+secure new-password autofill. Name is omitted from `AccountDetailsForm` when
+`name` or `onNameChange` is omitted. Use `AuthLink` for resend, recovery and
+navigation controls, `AuthButton` for a separate sheet action, and `AuthMessage`
+for host-owned setup errors.
+
+`BookingReview` accepts `title`, `description`, optional `{label, value}`
+details, a `children` slot for your policy/benefit presentation, optional
+`message`, and `action: {label, onPress, disabled?, busy?}`. Render a success
+title or icon only after an authoritative receipt. Availability, credits,
+prices, waiver requirements and payment authorization remain API-owned.
+Retain the exact booking request and request ID after an uncertain response;
+check the original result before offering another booking. Do not retry with a
+new request ID or claim that a timeout means no reservation was created.
+
+This package is member UI, not a staff/admin application. It does not include
+payment-card collection, legal waiver signing, the platform account provider,
+background notifications or automatic navigation. Those integrations remain
+the host's explicit responsibility and must preserve the API's authorization
+and consent requirements.
+
+## Theme and branding
+
+Pass `theme.colors` containing `text`, `muted`, `card`, `border`, `primary` and
+`primary_contrast`. Optional `typography.body`, `typography.label` and
+`typography.heading` accept React Native text styles. `controlRadius` and
+`controlBorderWidth` customize controls. `AuthContent.branding` accepts your
+own transparent mark or full wordmark. Omit `title` and `description` for the
+simple brand-and-form layout. Password visibility uses a textual accessible
+fallback; supply `renderPasswordVisibilityIcon` for your icon library.
+
+## Verification and license
+
+`npm run verify` builds declarations, checks actual component interactions,
+packs the package and typechecks/renders an isolated consumer. The Vuoma native
+apps consume these same exports for member and platform sign-in, account
+setup, appointment review/receipts and class booking confirmation.
+
+The [Vuoma Connected Application License](./LICENSE) allows using, modifying
+and distributing this package for authorized Vuoma-connected apps, including
+commercial studio apps and mock-based development. It is source-available
+under a restricted-use license, not an open-source or general-purpose license.
+Studio branding, fonts, Vuoma's backend and customer data are not included.

package/dist/auth.d.ts

@@ -0,0 +1,89 @@
+import { type PropsWithChildren, type ReactNode, type Ref } from "react";
+import { type StyleProp, type TextInputInstance, type ViewStyle } from "react-native";
+import type { NativeTheme } from "./theme.ts";
+export interface AuthContentProps extends PropsWithChildren {
+    theme: NativeTheme;
+    branding?: ReactNode;
+    title?: string;
+    description?: string;
+    descriptionAlign?: "left" | "center";
+    footer?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/** Compose inside the host's safe-area scroll view and keyboard-avoiding shell. */
+export declare function AuthContent({ theme, branding, title, description, descriptionAlign, footer, children, style }: AuthContentProps): import("react").JSX.Element;
+export interface AuthButtonProps {
+    theme: NativeTheme;
+    label: string;
+    busy?: boolean;
+    disabled?: boolean;
+    onPress: () => void;
+}
+export declare function AuthButton({ theme, label, busy, disabled, onPress }: AuthButtonProps): import("react").JSX.Element;
+export interface AuthLinkProps {
+    theme: NativeTheme;
+    label: string;
+    accessibilityLabel?: string;
+    disabled?: boolean;
+    align?: "center" | "right";
+    onPress: () => void;
+}
+export declare function AuthLink({ theme, label, accessibilityLabel, disabled, align, onPress }: AuthLinkProps): import("react").JSX.Element;
+export declare function AuthMessage({ theme, children }: {
+    theme: NativeTheme;
+    children?: string | null;
+}): import("react").JSX.Element | null;
+export interface SignInFormProps {
+    theme: NativeTheme;
+    email: string;
+    password: string;
+    passwordVisible: boolean;
+    onEmailChange: (value: string) => void;
+    onPasswordChange: (value: string) => void;
+    onPasswordVisibleChange: (visible: boolean) => void;
+    onSubmit: () => void;
+    /** Host validation and policy determine readiness; the component grants no access. */
+    canSubmit: boolean;
+    busy?: boolean;
+    message?: string | null;
+    emailLabel?: string;
+    passwordPlaceholder?: string;
+    renderPasswordVisibilityIcon?: (visible: boolean) => ReactNode;
+    passwordHelp?: ReactNode;
+    footer?: ReactNode;
+}
+export declare function SignInForm({ theme, email, password, passwordVisible, onEmailChange, onPasswordChange, onPasswordVisibleChange, onSubmit, canSubmit, busy, message, emailLabel, passwordPlaceholder, renderPasswordVisibilityIcon, passwordHelp, footer }: SignInFormProps): import("react").JSX.Element;
+interface SubmitFormProps {
+    theme: NativeTheme;
+    busy?: boolean;
+    canSubmit: boolean;
+    onSubmit: () => void;
+    message?: string | null;
+}
+export interface AccountDetailsFormProps extends SubmitFormProps {
+    email: string;
+    onEmailChange: (value: string) => void;
+    /** Omit for existing-profile activation or password recovery. */
+    name?: string;
+    onNameChange?: (value: string) => void;
+    emailInputRef?: Ref<TextInputInstance>;
+}
+export declare function AccountDetailsForm({ theme, email, onEmailChange, name, onNameChange, emailInputRef, busy, canSubmit, onSubmit, message }: AccountDetailsFormProps): import("react").JSX.Element;
+export interface VerificationCodeFormProps extends SubmitFormProps {
+    code: string;
+    onCodeChange: (value: string) => void;
+    inputRef?: Ref<TextInputInstance>;
+    onResend?: () => void;
+    onEditEmail?: () => void;
+}
+export declare function VerificationCodeForm({ theme, code, onCodeChange, inputRef, busy, canSubmit, onSubmit, onResend, onEditEmail, message }: VerificationCodeFormProps): import("react").JSX.Element;
+export interface NewPasswordFormProps extends SubmitFormProps {
+    password: string;
+    onPasswordChange: (value: string) => void;
+    inputRef?: Ref<TextInputInstance>;
+    /** Native autofill guidance only. The host and API still enforce password policy. */
+    passwordRules?: string;
+    onRestart?: () => void;
+}
+export declare function NewPasswordForm({ theme, password, onPasswordChange, inputRef, passwordRules, busy, canSubmit, onSubmit, onRestart, message }: NewPasswordFormProps): import("react").JSX.Element;
+export {};

package/dist/auth.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { ActivityIndicator, Platform, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+/** Compose inside the host's safe-area scroll view and keyboard-avoiding shell. */
+export function AuthContent({ theme, branding, title, description, descriptionAlign = "center", footer, children, style }) {
+    return _jsxs(View, { style: [styles.content, style], children: [branding, title || description ? _jsxs(View, { style: styles.intro, children: [title ? _jsx(Text, { accessibilityRole: "header", style: [styles.title, theme.typography?.heading, { color: theme.colors.text }], children: title }) : null, description ? _jsx(Text, { style: [styles.description, theme.typography?.body, { color: theme.colors.muted, textAlign: descriptionAlign }], children: description }) : null] }) : null, _jsx(View, { style: styles.form, children: children }), footer] });
+}
+export function AuthButton({ theme, label, busy = false, disabled = false, onPress }) {
+    const locked = busy || disabled;
+    return _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: label, accessibilityState: { disabled: locked, busy }, disabled: locked, onPress: () => { if (!locked)
+            onPress(); }, style: ({ pressed }) => [styles.button, { backgroundColor: theme.colors.primary, borderRadius: theme.controlRadius ?? 12, opacity: locked ? 0.42 : pressed ? 0.8 : 1 }], children: busy ? _jsx(ActivityIndicator, { accessible: false, color: theme.colors.primary_contrast }) : _jsx(Text, { style: [styles.button_label, theme.typography?.label, { color: theme.colors.primary_contrast }], children: label }) });
+}
+export function AuthLink({ theme, label, accessibilityLabel = label, disabled = false, align = "center", onPress }) {
+    return _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: accessibilityLabel, accessibilityState: { disabled }, disabled: disabled, onPress: () => { if (!disabled)
+            onPress(); }, style: ({ pressed }) => [styles.link, align === "right" ? styles.right : null, { opacity: disabled ? 0.5 : pressed ? 0.6 : 1 }], children: _jsx(Text, { style: [styles.link_text, theme.typography?.label, { color: theme.colors.text }], children: label }) });
+}
+export function AuthMessage({ theme, children }) {
+    return children ? _jsx(Text, { accessibilityLiveRegion: "polite", accessibilityRole: "alert", style: [styles.message, theme.typography?.body, { color: theme.colors.text }], children: children }) : null;
+}
+function Field({ theme, label, children }) {
+    return _jsxs(View, { style: styles.field, children: [_jsx(Text, { style: [styles.label, theme.typography?.label, { color: theme.colors.text }], children: label }), children] });
+}
+function inputStyle(theme) {
+    return [styles.input, theme.typography?.body, { backgroundColor: theme.colors.card, borderColor: theme.colors.border, color: theme.colors.text, borderRadius: theme.controlRadius ?? 12, borderWidth: theme.controlBorderWidth ?? StyleSheet.hairlineWidth }];
+}
+export function SignInForm({ theme, email, password, passwordVisible, onEmailChange, onPasswordChange, onPasswordVisibleChange, onSubmit, canSubmit, busy = false, message, emailLabel = "Email", passwordPlaceholder = "Your password", renderPasswordVisibilityIcon, passwordHelp, footer }) {
+    const passwordInput = useRef(null);
+    const submit = () => { if (canSubmit && !busy)
+        onSubmit(); };
+    return _jsxs(View, { style: styles.form, children: [_jsx(Field, { theme: theme, label: emailLabel, children: _jsx(TextInput, { accessibilityLabel: emailLabel, autoCapitalize: "none", autoComplete: "email", autoCorrect: false, blurOnSubmit: false, editable: !busy, inputMode: "email", keyboardType: "email-address", maxLength: 320, onChangeText: value => { if (!busy)
+                        onEmailChange(value); }, onSubmitEditing: () => { if (!busy)
+                        passwordInput.current?.focus(); }, placeholder: "you@example.com", placeholderTextColor: theme.colors.muted, returnKeyType: "next", style: inputStyle(theme), textContentType: "username", value: email }) }), _jsxs(Field, { theme: theme, label: "Password", children: [_jsxs(View, { style: [styles.password_field, { backgroundColor: theme.colors.card, borderColor: theme.colors.border, borderRadius: theme.controlRadius ?? 12, borderWidth: theme.controlBorderWidth ?? StyleSheet.hairlineWidth }], children: [_jsx(TextInput, { accessibilityLabel: "Password", autoCapitalize: "none", autoComplete: "current-password", autoCorrect: false, editable: !busy, maxLength: 1_024, onChangeText: value => { if (!busy)
+                                    onPasswordChange(value); }, onSubmitEditing: submit, placeholder: passwordPlaceholder, placeholderTextColor: theme.colors.muted, ref: passwordInput, returnKeyType: "go", secureTextEntry: !passwordVisible, style: [styles.password_input, theme.typography?.body, { color: theme.colors.text }], textContentType: "password", value: password }), _jsx(Pressable, { accessibilityLabel: passwordVisible ? "Hide password" : "Show password", accessibilityRole: "button", accessibilityState: { disabled: busy }, disabled: busy, onPress: () => { if (!busy)
+                                    onPasswordVisibleChange(!passwordVisible); }, style: ({ pressed }) => [styles.password_toggle, { opacity: pressed ? 0.6 : 1 }], children: renderPasswordVisibilityIcon ? renderPasswordVisibilityIcon(passwordVisible) : _jsx(Text, { style: [styles.link_text, { color: theme.colors.muted }], children: passwordVisible ? "Hide" : "Show" }) })] }), passwordHelp] }), _jsx(AuthMessage, { theme: theme, children: message }), _jsx(AuthButton, { theme: theme, disabled: !canSubmit, busy: busy, label: busy ? "Signing in…" : "Sign in", onPress: submit }), footer] });
+}
+export function AccountDetailsForm({ theme, email, onEmailChange, name, onNameChange, emailInputRef, busy = false, canSubmit, onSubmit, message }) {
+    const localEmailRef = useRef(null);
+    const submit = () => { if (canSubmit && !busy)
+        onSubmit(); };
+    return _jsxs(View, { style: styles.form, children: [name != null && onNameChange ? _jsx(Field, { theme: theme, label: "Name", children: _jsx(TextInput, { accessibilityLabel: "Name", autoComplete: "name", textContentType: "name", editable: !busy, maxLength: 160, onChangeText: value => { if (!busy)
+                        onNameChange(value); }, onSubmitEditing: () => { if (!busy)
+                        localEmailRef.current?.focus(); }, returnKeyType: "next", style: inputStyle(theme), value: name }) }) : null, _jsx(Field, { theme: theme, label: "Email", children: _jsx(TextInput, { accessibilityLabel: "Email", autoCapitalize: "none", autoComplete: "email", autoCorrect: false, editable: !busy, inputMode: "email", keyboardType: "email-address", maxLength: 320, onChangeText: value => { if (!busy)
+                        onEmailChange(value); }, onSubmitEditing: submit, placeholder: "you@example.com", placeholderTextColor: theme.colors.muted, ref: value => { localEmailRef.current = value; if (typeof emailInputRef === "function")
+                        emailInputRef(value);
+                    else if (emailInputRef)
+                        emailInputRef.current = value; }, returnKeyType: "go", style: inputStyle(theme), textContentType: "username", value: email }) }), _jsx(AuthMessage, { theme: theme, children: message }), _jsx(AuthButton, { theme: theme, disabled: !canSubmit, busy: busy, label: busy ? "Sending code…" : "Send code", onPress: submit })] });
+}
+export function VerificationCodeForm({ theme, code, onCodeChange, inputRef, busy = false, canSubmit, onSubmit, onResend, onEditEmail, message }) {
+    const ready = canSubmit && /^(?:\d{6}|\d{8})$/u.test(code);
+    const submit = () => { if (ready && !busy)
+        onSubmit(); };
+    return _jsxs(View, { style: styles.form, children: [_jsx(Field, { theme: theme, label: "Email code", children: _jsx(TextInput, { ref: inputRef, accessibilityLabel: "Email code", autoComplete: "one-time-code", autoCorrect: false, editable: !busy, inputMode: "numeric", keyboardType: "number-pad", maxLength: 8, onChangeText: value => { if (!busy)
+                        onCodeChange(value.replace(/\D/gu, "").slice(0, 8)); }, onSubmitEditing: submit, returnKeyType: "go", style: [inputStyle(theme), styles.code], textContentType: "oneTimeCode", value: code }, "email-code") }), _jsx(AuthMessage, { theme: theme, children: message }), _jsx(AuthButton, { theme: theme, disabled: !ready, busy: busy, label: busy ? "Checking code…" : "Verify code", onPress: submit }), onResend ? _jsx(AuthLink, { theme: theme, disabled: busy, label: "Send a new code", onPress: onResend }) : null, onEditEmail ? _jsx(AuthLink, { theme: theme, disabled: busy, label: "Use a different email", onPress: onEditEmail }) : null] });
+}
+export function NewPasswordForm({ theme, password, onPasswordChange, inputRef, passwordRules, busy = false, canSubmit, onSubmit, onRestart, message }) {
+    const submit = () => { if (canSubmit && !busy)
+        onSubmit(); };
+    return _jsxs(View, { style: styles.form, children: [_jsx(Field, { theme: theme, label: "New password", children: _jsx(TextInput, { ref: inputRef, accessibilityLabel: "New password", inputMode: "text", keyboardType: "default", showSoftInputOnFocus: true, importantForAutofill: "yes", autoCapitalize: "none", autoComplete: Platform.OS === "ios" ? undefined : "new-password", autoCorrect: false, editable: !busy, maxLength: 1_024, onChangeText: value => { if (!busy)
+                        onPasswordChange(value); }, onSubmitEditing: submit, passwordRules: passwordRules, returnKeyType: "go", secureTextEntry: true, style: inputStyle(theme), textContentType: Platform.OS === "ios" ? "newPassword" : undefined, value: password }, "new-password") }), _jsx(AuthMessage, { theme: theme, children: message }), _jsx(AuthButton, { theme: theme, disabled: !canSubmit, busy: busy, label: busy ? "Saving password…" : "Save password", onPress: submit }), onRestart ? _jsx(AuthLink, { theme: theme, disabled: busy, label: "Start again with a new code", onPress: onRestart }) : null] });
+}
+const styles = StyleSheet.create({
+    content: { width: "100%", maxWidth: 400, paddingVertical: 28, gap: 32 },
+    form: { gap: 20 }, field: { gap: 8 }, label: { fontSize: 13, fontWeight: "500" },
+    intro: { gap: 10, alignItems: "center" },
+    title: { fontSize: 30, lineHeight: 37, fontWeight: "600", letterSpacing: -0.8, textAlign: "center" },
+    description: { fontSize: 15, lineHeight: 22, alignSelf: "stretch" },
+    input: { minHeight: 56, paddingHorizontal: 16, fontSize: 16 },
+    button: { minHeight: 54, alignItems: "center", justifyContent: "center", paddingHorizontal: 18, marginTop: 4 },
+    button_label: { fontSize: 16, fontWeight: "600" },
+    link: { minHeight: 44, justifyContent: "center", alignItems: "center" }, right: { alignSelf: "flex-end" },
+    link_text: { fontSize: 14, fontWeight: "500", textAlign: "center" },
+    message: { fontSize: 14, lineHeight: 20 },
+    password_field: { minHeight: 56, flexDirection: "row", alignItems: "center" },
+    password_input: { minHeight: 54, flex: 1, paddingHorizontal: 16, fontSize: 16 },
+    password_toggle: { minWidth: 48, minHeight: 54, alignItems: "center", justifyContent: "center", paddingHorizontal: 8 },
+    code: { fontSize: 24, letterSpacing: 8 },
+});

package/dist/booking.d.ts

@@ -0,0 +1,21 @@
+import type { PropsWithChildren, ReactNode } from "react";
+import { type AuthButtonProps } from "./auth.tsx";
+import type { NativeTheme } from "./theme.ts";
+export interface BookingReviewProps extends PropsWithChildren {
+    theme: NativeTheme;
+    title: string;
+    description?: string;
+    /** Render a success symbol only after the API has confirmed the booking. */
+    statusIcon?: ReactNode;
+    details?: ReadonlyArray<{
+        label: string;
+        value: string;
+    }>;
+    message?: string | null;
+    action?: Omit<AuthButtonProps, "theme">;
+    footer?: ReactNode;
+}
+export type BookingReviewHeaderProps = Pick<BookingReviewProps, "theme" | "title" | "description" | "statusIcon">;
+export declare function BookingReviewHeader({ theme, title, description, statusIcon }: BookingReviewHeaderProps): import("react").JSX.Element;
+/** Review and receipt presentation. The host owns availability, policy and payment. */
+export declare function BookingReview({ theme, title, description, statusIcon, details, message, action, footer, children }: BookingReviewProps): import("react").JSX.Element;

package/dist/booking.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, Text, View } from "react-native";
+import { AuthButton, AuthMessage } from "./auth.js";
+export function BookingReviewHeader({ theme, title, description, statusIcon }) {
+    return _jsxs(View, { style: styles.heading, children: [statusIcon, _jsx(Text, { accessibilityRole: "header", style: [styles.title, theme.typography?.heading, { color: theme.colors.text }], children: title }), description ? _jsx(Text, { style: [styles.description, theme.typography?.body, { color: theme.colors.muted }], children: description }) : null] });
+}
+/** Review and receipt presentation. The host owns availability, policy and payment. */
+export function BookingReview({ theme, title, description, statusIcon, details, message, action, footer, children }) {
+    return _jsxs(View, { style: styles.review, children: [_jsx(BookingReviewHeader, { theme: theme, title: title, description: description, statusIcon: statusIcon }), details?.length ? _jsx(View, { style: [styles.details, { borderColor: theme.colors.border, backgroundColor: theme.colors.card }], children: details.map((detail, index) => _jsxs(View, { style: styles.detail, children: [_jsx(Text, { style: [styles.detail_label, theme.typography?.label, { color: theme.colors.muted }], children: detail.label }), _jsx(Text, { style: [styles.detail_value, theme.typography?.body, { color: theme.colors.text }], children: detail.value })] }, `${index}:${detail.label}`)) }) : null, children, _jsx(AuthMessage, { theme: theme, children: message }), action ? _jsx(AuthButton, { ...action, theme: theme }) : null, footer] });
+}
+const styles = StyleSheet.create({
+    review: { gap: 20 }, heading: { gap: 8 },
+    title: { fontSize: 25, lineHeight: 31, fontWeight: "700" },
+    description: { fontSize: 16, lineHeight: 23 },
+    details: { gap: 14, padding: 18, borderWidth: StyleSheet.hairlineWidth, borderRadius: 16 },
+    detail: { gap: 4 }, detail_label: { fontSize: 14, lineHeight: 20 }, detail_value: { fontSize: 16, lineHeight: 23 },
+});

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./auth.tsx";
+export * from "./booking.tsx";
+export type { NativeTheme } from "./theme.ts";

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from "./auth.js";
+export * from "./booking.js";

package/dist/theme.d.ts

@@ -0,0 +1,19 @@
+import type { TextStyle } from "react-native";
+/** Fonts, artwork and colors are supplied by the host, never fetched by the UI. */
+export interface NativeTheme {
+    colors: {
+        text: string;
+        muted: string;
+        card: string;
+        border: string;
+        primary: string;
+        primary_contrast: string;
+    };
+    typography?: {
+        body?: TextStyle;
+        label?: TextStyle;
+        heading?: TextStyle;
+    };
+    controlRadius?: number;
+    controlBorderWidth?: number;
+}

package/dist/theme.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,44 @@
 {
   "name": "@vuoma/react-native-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "Controlled React Native authentication and booking components used by Vuoma apps",
+  "type": "module",
+  "license": "SEE LICENSE IN LICENSE",
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "react-native": "./src/index.ts",
+      "browser": "./src/index.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "test": "npm run build && node --test tests/*.test.mjs",
+    "verify": "npm test && node scripts/verify-package.mjs",
+    "prepack": "npm run build",
+    "prepare": "npm run build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=19.3.0 <20",
+    "react-native": ">=0.88.0 <1"
+  },
+  "devDependencies": {
+    "@types/react": "~19.3.0",
+    "typescript": "~6.0.3"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}

package/src/auth.tsx

@@ -0,0 +1,221 @@
+import { useRef, type PropsWithChildren, type ReactNode, type Ref } from "react"
+import { ActivityIndicator, Platform, Pressable, StyleSheet, Text, TextInput, View, type StyleProp, type TextInputInstance, type ViewStyle } from "react-native"
+import type { NativeTheme } from "./theme.ts"
+
+export interface AuthContentProps extends PropsWithChildren {
+  theme: NativeTheme
+  branding?: ReactNode
+  title?: string
+  description?: string
+  descriptionAlign?: "left" | "center"
+  footer?: ReactNode
+  style?: StyleProp<ViewStyle>
+}
+
+/** Compose inside the host's safe-area scroll view and keyboard-avoiding shell. */
+export function AuthContent({ theme, branding, title, description, descriptionAlign = "center", footer, children, style }: AuthContentProps) {
+  return <View style={[styles.content, style]}>
+    {branding}
+    {title || description ? <View style={styles.intro}>
+      {title ? <Text accessibilityRole="header" style={[styles.title, theme.typography?.heading, { color: theme.colors.text }]}>{title}</Text> : null}
+      {description ? <Text style={[styles.description, theme.typography?.body, { color: theme.colors.muted, textAlign: descriptionAlign }]}>{description}</Text> : null}
+    </View> : null}
+    <View style={styles.form}>{children}</View>
+    {footer}
+  </View>
+}
+
+export interface AuthButtonProps {
+  theme: NativeTheme
+  label: string
+  busy?: boolean
+  disabled?: boolean
+  onPress: () => void
+}
+
+export function AuthButton({ theme, label, busy = false, disabled = false, onPress }: AuthButtonProps) {
+  const locked = busy || disabled
+  return <Pressable accessibilityRole="button" accessibilityLabel={label} accessibilityState={{ disabled: locked, busy }} disabled={locked}
+    onPress={() => { if (!locked) onPress() }}
+    style={({ pressed }) => [styles.button, { backgroundColor: theme.colors.primary, borderRadius: theme.controlRadius ?? 12, opacity: locked ? 0.42 : pressed ? 0.8 : 1 }]}>
+    {busy ? <ActivityIndicator accessible={false} color={theme.colors.primary_contrast} /> : <Text style={[styles.button_label, theme.typography?.label, { color: theme.colors.primary_contrast }]}>{label}</Text>}
+  </Pressable>
+}
+
+export interface AuthLinkProps {
+  theme: NativeTheme
+  label: string
+  accessibilityLabel?: string
+  disabled?: boolean
+  align?: "center" | "right"
+  onPress: () => void
+}
+
+export function AuthLink({ theme, label, accessibilityLabel = label, disabled = false, align = "center", onPress }: AuthLinkProps) {
+  return <Pressable accessibilityRole="button" accessibilityLabel={accessibilityLabel} accessibilityState={{ disabled }} disabled={disabled}
+    onPress={() => { if (!disabled) onPress() }} style={({ pressed }) => [styles.link, align === "right" ? styles.right : null, { opacity: disabled ? 0.5 : pressed ? 0.6 : 1 }]}>
+    <Text style={[styles.link_text, theme.typography?.label, { color: theme.colors.text }]}>{label}</Text>
+  </Pressable>
+}
+
+export function AuthMessage({ theme, children }: { theme: NativeTheme; children?: string | null }) {
+  return children ? <Text accessibilityLiveRegion="polite" accessibilityRole="alert" style={[styles.message, theme.typography?.body, { color: theme.colors.text }]}>{children}</Text> : null
+}
+
+function Field({ theme, label, children }: PropsWithChildren<{ theme: NativeTheme; label: string }>) {
+  return <View style={styles.field}><Text style={[styles.label, theme.typography?.label, { color: theme.colors.text }]}>{label}</Text>{children}</View>
+}
+
+function inputStyle(theme: NativeTheme) {
+  return [styles.input, theme.typography?.body, { backgroundColor: theme.colors.card, borderColor: theme.colors.border, color: theme.colors.text, borderRadius: theme.controlRadius ?? 12, borderWidth: theme.controlBorderWidth ?? StyleSheet.hairlineWidth }]
+}
+
+export interface SignInFormProps {
+  theme: NativeTheme
+  email: string
+  password: string
+  passwordVisible: boolean
+  onEmailChange: (value: string) => void
+  onPasswordChange: (value: string) => void
+  onPasswordVisibleChange: (visible: boolean) => void
+  onSubmit: () => void
+  /** Host validation and policy determine readiness; the component grants no access. */
+  canSubmit: boolean
+  busy?: boolean
+  message?: string | null
+  emailLabel?: string
+  passwordPlaceholder?: string
+  renderPasswordVisibilityIcon?: (visible: boolean) => ReactNode
+  passwordHelp?: ReactNode
+  footer?: ReactNode
+}
+
+export function SignInForm({ theme, email, password, passwordVisible, onEmailChange, onPasswordChange, onPasswordVisibleChange, onSubmit, canSubmit, busy = false, message, emailLabel = "Email", passwordPlaceholder = "Your password", renderPasswordVisibilityIcon, passwordHelp, footer }: SignInFormProps) {
+  const passwordInput = useRef<TextInputInstance>(null)
+  const submit = () => { if (canSubmit && !busy) onSubmit() }
+  return <View style={styles.form}>
+    <Field theme={theme} label={emailLabel}>
+      <TextInput accessibilityLabel={emailLabel} autoCapitalize="none" autoComplete="email" autoCorrect={false} blurOnSubmit={false} editable={!busy}
+        inputMode="email" keyboardType="email-address" maxLength={320} onChangeText={value => { if (!busy) onEmailChange(value) }}
+        onSubmitEditing={() => { if (!busy) passwordInput.current?.focus() }} placeholder="you@example.com" placeholderTextColor={theme.colors.muted}
+        returnKeyType="next" style={inputStyle(theme)} textContentType="username" value={email} />
+    </Field>
+    <Field theme={theme} label="Password">
+      <View style={[styles.password_field, { backgroundColor: theme.colors.card, borderColor: theme.colors.border, borderRadius: theme.controlRadius ?? 12, borderWidth: theme.controlBorderWidth ?? StyleSheet.hairlineWidth }]}>
+        <TextInput accessibilityLabel="Password" autoCapitalize="none" autoComplete="current-password" autoCorrect={false} editable={!busy} maxLength={1_024}
+          onChangeText={value => { if (!busy) onPasswordChange(value) }} onSubmitEditing={submit} placeholder={passwordPlaceholder} placeholderTextColor={theme.colors.muted}
+          ref={passwordInput} returnKeyType="go" secureTextEntry={!passwordVisible} style={[styles.password_input, theme.typography?.body, { color: theme.colors.text }]}
+          textContentType="password" value={password} />
+        <Pressable accessibilityLabel={passwordVisible ? "Hide password" : "Show password"} accessibilityRole="button" accessibilityState={{ disabled: busy }} disabled={busy}
+          onPress={() => { if (!busy) onPasswordVisibleChange(!passwordVisible) }} style={({ pressed }) => [styles.password_toggle, { opacity: pressed ? 0.6 : 1 }]}>
+          {renderPasswordVisibilityIcon ? renderPasswordVisibilityIcon(passwordVisible) : <Text style={[styles.link_text, { color: theme.colors.muted }]}>{passwordVisible ? "Hide" : "Show"}</Text>}
+        </Pressable>
+      </View>
+      {passwordHelp}
+    </Field>
+    <AuthMessage theme={theme}>{message}</AuthMessage>
+    <AuthButton theme={theme} disabled={!canSubmit} busy={busy} label={busy ? "Signing in…" : "Sign in"} onPress={submit} />
+    {footer}
+  </View>
+}
+
+interface SubmitFormProps {
+  theme: NativeTheme
+  busy?: boolean
+  canSubmit: boolean
+  onSubmit: () => void
+  message?: string | null
+}
+
+export interface AccountDetailsFormProps extends SubmitFormProps {
+  email: string
+  onEmailChange: (value: string) => void
+  /** Omit for existing-profile activation or password recovery. */
+  name?: string
+  onNameChange?: (value: string) => void
+  emailInputRef?: Ref<TextInputInstance>
+}
+
+export function AccountDetailsForm({ theme, email, onEmailChange, name, onNameChange, emailInputRef, busy = false, canSubmit, onSubmit, message }: AccountDetailsFormProps) {
+  const localEmailRef = useRef<TextInputInstance>(null)
+  const submit = () => { if (canSubmit && !busy) onSubmit() }
+  return <View style={styles.form}>
+    {name != null && onNameChange ? <Field theme={theme} label="Name">
+      <TextInput accessibilityLabel="Name" autoComplete="name" textContentType="name" editable={!busy} maxLength={160} onChangeText={value => { if (!busy) onNameChange(value) }}
+        onSubmitEditing={() => { if (!busy) localEmailRef.current?.focus() }} returnKeyType="next" style={inputStyle(theme)} value={name} />
+    </Field> : null}
+    <Field theme={theme} label="Email">
+      <TextInput accessibilityLabel="Email" autoCapitalize="none" autoComplete="email" autoCorrect={false} editable={!busy} inputMode="email" keyboardType="email-address" maxLength={320}
+        onChangeText={value => { if (!busy) onEmailChange(value) }} onSubmitEditing={submit} placeholder="you@example.com" placeholderTextColor={theme.colors.muted}
+        ref={value => { localEmailRef.current = value; if (typeof emailInputRef === "function") emailInputRef(value); else if (emailInputRef) emailInputRef.current = value }}
+        returnKeyType="go" style={inputStyle(theme)} textContentType="username" value={email} />
+    </Field>
+    <AuthMessage theme={theme}>{message}</AuthMessage>
+    <AuthButton theme={theme} disabled={!canSubmit} busy={busy} label={busy ? "Sending code…" : "Send code"} onPress={submit} />
+  </View>
+}
+
+export interface VerificationCodeFormProps extends SubmitFormProps {
+  code: string
+  onCodeChange: (value: string) => void
+  inputRef?: Ref<TextInputInstance>
+  onResend?: () => void
+  onEditEmail?: () => void
+}
+
+export function VerificationCodeForm({ theme, code, onCodeChange, inputRef, busy = false, canSubmit, onSubmit, onResend, onEditEmail, message }: VerificationCodeFormProps) {
+  const ready = canSubmit && /^(?:\d{6}|\d{8})$/u.test(code)
+  const submit = () => { if (ready && !busy) onSubmit() }
+  return <View style={styles.form}>
+    <Field theme={theme} label="Email code">
+      <TextInput key="email-code" ref={inputRef} accessibilityLabel="Email code" autoComplete="one-time-code" autoCorrect={false} editable={!busy} inputMode="numeric" keyboardType="number-pad" maxLength={8}
+        onChangeText={value => { if (!busy) onCodeChange(value.replace(/\D/gu, "").slice(0, 8)) }} onSubmitEditing={submit} returnKeyType="go" style={[inputStyle(theme), styles.code]} textContentType="oneTimeCode" value={code} />
+    </Field>
+    <AuthMessage theme={theme}>{message}</AuthMessage>
+    <AuthButton theme={theme} disabled={!ready} busy={busy} label={busy ? "Checking code…" : "Verify code"} onPress={submit} />
+    {onResend ? <AuthLink theme={theme} disabled={busy} label="Send a new code" onPress={onResend} /> : null}
+    {onEditEmail ? <AuthLink theme={theme} disabled={busy} label="Use a different email" onPress={onEditEmail} /> : null}
+  </View>
+}
+
+export interface NewPasswordFormProps extends SubmitFormProps {
+  password: string
+  onPasswordChange: (value: string) => void
+  inputRef?: Ref<TextInputInstance>
+  /** Native autofill guidance only. The host and API still enforce password policy. */
+  passwordRules?: string
+  onRestart?: () => void
+}
+
+export function NewPasswordForm({ theme, password, onPasswordChange, inputRef, passwordRules, busy = false, canSubmit, onSubmit, onRestart, message }: NewPasswordFormProps) {
+  const submit = () => { if (canSubmit && !busy) onSubmit() }
+  return <View style={styles.form}>
+    <Field theme={theme} label="New password">
+      <TextInput key="new-password" ref={inputRef} accessibilityLabel="New password" inputMode="text" keyboardType="default" showSoftInputOnFocus importantForAutofill="yes"
+        autoCapitalize="none" autoComplete={Platform.OS === "ios" ? undefined : "new-password"} autoCorrect={false} editable={!busy} maxLength={1_024}
+        onChangeText={value => { if (!busy) onPasswordChange(value) }} onSubmitEditing={submit} passwordRules={passwordRules} returnKeyType="go" secureTextEntry
+        style={inputStyle(theme)} textContentType={Platform.OS === "ios" ? "newPassword" : undefined} value={password} />
+    </Field>
+    <AuthMessage theme={theme}>{message}</AuthMessage>
+    <AuthButton theme={theme} disabled={!canSubmit} busy={busy} label={busy ? "Saving password…" : "Save password"} onPress={submit} />
+    {onRestart ? <AuthLink theme={theme} disabled={busy} label="Start again with a new code" onPress={onRestart} /> : null}
+  </View>
+}
+
+const styles = StyleSheet.create({
+  content: { width: "100%", maxWidth: 400, paddingVertical: 28, gap: 32 },
+  form: { gap: 20 }, field: { gap: 8 }, label: { fontSize: 13, fontWeight: "500" },
+  intro: { gap: 10, alignItems: "center" },
+  title: { fontSize: 30, lineHeight: 37, fontWeight: "600", letterSpacing: -0.8, textAlign: "center" },
+  description: { fontSize: 15, lineHeight: 22, alignSelf: "stretch" },
+  input: { minHeight: 56, paddingHorizontal: 16, fontSize: 16 },
+  button: { minHeight: 54, alignItems: "center", justifyContent: "center", paddingHorizontal: 18, marginTop: 4 },
+  button_label: { fontSize: 16, fontWeight: "600" },
+  link: { minHeight: 44, justifyContent: "center", alignItems: "center" }, right: { alignSelf: "flex-end" },
+  link_text: { fontSize: 14, fontWeight: "500", textAlign: "center" },
+  message: { fontSize: 14, lineHeight: 20 },
+  password_field: { minHeight: 56, flexDirection: "row", alignItems: "center" },
+  password_input: { minHeight: 54, flex: 1, paddingHorizontal: 16, fontSize: 16 },
+  password_toggle: { minWidth: 48, minHeight: 54, alignItems: "center", justifyContent: "center", paddingHorizontal: 8 },
+  code: { fontSize: 24, letterSpacing: 8 },
+})

package/src/booking.tsx

@@ -0,0 +1,51 @@
+import type { PropsWithChildren, ReactNode } from "react"
+import { StyleSheet, Text, View } from "react-native"
+import { AuthButton, AuthMessage, type AuthButtonProps } from "./auth.tsx"
+import type { NativeTheme } from "./theme.ts"
+
+export interface BookingReviewProps extends PropsWithChildren {
+  theme: NativeTheme
+  title: string
+  description?: string
+  /** Render a success symbol only after the API has confirmed the booking. */
+  statusIcon?: ReactNode
+  details?: ReadonlyArray<{ label: string; value: string }>
+  message?: string | null
+  action?: Omit<AuthButtonProps, "theme">
+  footer?: ReactNode
+}
+
+export type BookingReviewHeaderProps = Pick<BookingReviewProps, "theme" | "title" | "description" | "statusIcon">
+
+export function BookingReviewHeader({ theme, title, description, statusIcon }: BookingReviewHeaderProps) {
+  return <View style={styles.heading}>
+    {statusIcon}
+    <Text accessibilityRole="header" style={[styles.title, theme.typography?.heading, { color: theme.colors.text }]}>{title}</Text>
+    {description ? <Text style={[styles.description, theme.typography?.body, { color: theme.colors.muted }]}>{description}</Text> : null}
+  </View>
+}
+
+/** Review and receipt presentation. The host owns availability, policy and payment. */
+export function BookingReview({ theme, title, description, statusIcon, details, message, action, footer, children }: BookingReviewProps) {
+  return <View style={styles.review}>
+    <BookingReviewHeader theme={theme} title={title} description={description} statusIcon={statusIcon} />
+    {details?.length ? <View style={[styles.details, { borderColor: theme.colors.border, backgroundColor: theme.colors.card }]}>
+      {details.map((detail, index) => <View key={`${index}:${detail.label}`} style={styles.detail}>
+        <Text style={[styles.detail_label, theme.typography?.label, { color: theme.colors.muted }]}>{detail.label}</Text>
+        <Text style={[styles.detail_value, theme.typography?.body, { color: theme.colors.text }]}>{detail.value}</Text>
+      </View>)}
+    </View> : null}
+    {children}
+    <AuthMessage theme={theme}>{message}</AuthMessage>
+    {action ? <AuthButton {...action} theme={theme} /> : null}
+    {footer}
+  </View>
+}
+
+const styles = StyleSheet.create({
+  review: { gap: 20 }, heading: { gap: 8 },
+  title: { fontSize: 25, lineHeight: 31, fontWeight: "700" },
+  description: { fontSize: 16, lineHeight: 23 },
+  details: { gap: 14, padding: 18, borderWidth: StyleSheet.hairlineWidth, borderRadius: 16 },
+  detail: { gap: 4 }, detail_label: { fontSize: 14, lineHeight: 20 }, detail_value: { fontSize: 16, lineHeight: 23 },
+})

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./auth.tsx"
+export * from "./booking.tsx"
+export type { NativeTheme } from "./theme.ts"

package/src/theme.ts

@@ -0,0 +1,16 @@
+import type { TextStyle } from "react-native"
+
+/** Fonts, artwork and colors are supplied by the host, never fetched by the UI. */
+export interface NativeTheme {
+  colors: {
+    text: string
+    muted: string
+    card: string
+    border: string
+    primary: string
+    primary_contrast: string
+  }
+  typography?: { body?: TextStyle; label?: TextStyle; heading?: TextStyle }
+  controlRadius?: number
+  controlBorderWidth?: number
+}