@sneekin/ui 0.4.1 → 1.0.0

package/README.md

@@ -18,12 +18,12 @@ React 17 or newer, as a peer dependency.
 ## Use it
 
 ```tsx
-import { SneekOtpLogin, createFetchHandlers } from '@sneekin/ui';
+import { SneekLogin, createFetchHandlers } from '@sneekin/ui';
 
 export function Login() {
   return (
-    <SneekOtpLogin
-      {...createFetchHandlers({ baseUrl: '/api/auth' })}
+    <SneekLogin
+      {...createFetchHandlers()}
       onSuccess={(session) => router.push('/app')}
     />
   );
@@ -34,23 +34,41 @@ export function Login() {
 
 | Route | Body | Returns |
 | --- | --- | --- |
-| `POST {baseUrl}/request-otp` | `{ identifier }` | `{ requestId, channels, expiresInSeconds }` |
-| `POST {baseUrl}/verify-otp` | `{ requestId, code }` | whatever your session payload is |
+| `POST /api/auth/request` | `{ identifier }` | `{ requestId, channel?, maskedIdentifier?, expiresAt? }` |
+| `POST /api/auth/verify` | `{ requestId, code }` | whatever your session payload is |
+
+Point them elsewhere with `createFetchHandlers({ requestUrl, verifyUrl })`.
 
 Your server holds the Sneek API key and calls Sneek. The browser never sees it.
 
+## You never pick the channel
+
+Ask Sneek to verify a person; **Sneek decides how**. The channel comes from the
+`authChannels` bitmask on your application — SMS, WhatsApp, email, and push and
+QR-scan as they land — and can change without a front-end release.
+
+`channel` and `maskedIdentifier` come back on the request response for **display
+only**. The card uses them to say what actually happened:
+
+```
+Sent via WhatsApp to +91***29
+```
+
+If your backend does not forward them, the card falls back to `Sent to <what the
+visitor typed>` and nothing else changes. Neither field is ever an input.
+
 ## Theming
 
 It follows the system colour scheme out of the box. Pin it if you prefer:
 
 ```tsx
-<SneekOtpLogin theme="dark" {...handlers} />
+<SneekLogin theme="dark" {...handlers} />
 ```
 
 Override the single accent colour — everything else derives from it:
 
 ```tsx
-<SneekOtpLogin accentColor="#7c3aed" {...handlers} />
+<SneekLogin accentColor="#7c3aed" {...handlers} />
 ```
 
 The code entry step shows the destination with an inline way to change it,
@@ -66,13 +84,13 @@ itself if the visitor pastes a full international number (anything
 starting with `+`):
 
 ```tsx
-<SneekOtpLogin defaultCountry="GB" {...handlers} />
+<SneekLogin defaultCountry="GB" {...handlers} />
 ```
 
 Lock the field to just one identifier — no chip, no toggle:
 
 ```tsx
-<SneekOtpLogin identifierMode="email" {...handlers} />
+<SneekLogin identifierMode="email" {...handlers} />
 ```
 
 `identifierMode` is `'both' | 'phone' | 'email'`, default `'both'`.
@@ -80,7 +98,7 @@ Lock the field to just one identifier — no chip, no toggle:
 Swap the mark, drop the sub-heading, or remove the Sneek line:
 
 ```tsx
-<SneekOtpLogin
+<SneekLogin
   logo={<MyLogo />}
   subtitle={null}
   showBranding={false}
@@ -89,18 +107,20 @@ Swap the mark, drop the sub-heading, or remove the Sneek line:
 ```
 
 For anything further, `className` and `style` land on the outer card, and every
-control carries a stable class (`.sneek-otp-input`, `.sneek-otp-button`,
-`.sneek-otp-link`) you can target.
+control carries a stable class (`.sneek-login-input`, `.sneek-login-button`,
+`.sneek-login-link`) you can target.
 
 ## Props
 
 | Prop | Type | Default |
 | --- | --- | --- |
-| `requestOtp` | `(identifier) => Promise<RequestOtpResult>` | — (required) |
-| `verifyOtp` | `(requestId, code) => Promise<TResult>` | — (required) |
+| `requestVerification` | `(identifier) => Promise<VerificationRequest>` | — (required) |
+| `verify` | `({ requestId, code }) => Promise<TResult>` | — (required) |
 | `onSuccess` | `(result: TResult) => void` | — |
+| `onError` | `(error: unknown) => void` | — |
 | `title` | `string` | `'Sign in'` |
-| `subtitle` | `ReactNode \| null` | `'We will send you a one-time code.'` |
+| `verifyTitle` | `string` | `'Enter the code'` |
+| `subtitle` | `ReactNode \| null` | `'Enter your email or phone to continue.'` |
 | `identifierMode` | `'both' \| 'phone' \| 'email'` | `'both'` |
 | `defaultCountry` | ISO 3166-1 alpha-2, e.g. `'GB'` | `'IN'` (India) |
 | `identifierLabel` | `string` | `'Mobile number'` / `'Email address'`, per mode |
@@ -117,13 +137,17 @@ If the card does not suit you, use the hook and render whatever you like. It
 holds the whole state machine — step, busy flags, errors, resend:
 
 ```tsx
-import { useSneekOtp, createFetchHandlers } from '@sneekin/ui';
+import { useSneekLogin, createFetchHandlers } from '@sneekin/ui';
 
-const otp = useSneekOtp(createFetchHandlers({ baseUrl: '/api/auth' }));
-// otp.step, otp.identifier, otp.code, otp.error,
-// otp.sendOtp(), otp.verify(), otp.resend(), otp.back()
+const login = useSneekLogin(createFetchHandlers());
+// login.step, login.identifier, login.code, login.error,
+// login.channel, login.maskedIdentifier,
+// login.startVerification(), login.submitCode(), login.resend(), login.back()
 ```
 
+`channelLabel(login.channel)` turns the raw channel into something readable
+(`whatsapp` → `WhatsApp`) if you write your own status line.
+
 ## License
 
 UNLICENSED — © Abblor Tech Pvt Ltd.

package/dist/component.d.ts

@@ -1,8 +1,8 @@
 import { type CSSProperties, type ReactNode } from 'react';
-import { type SneekOtpHandlers } from './use-sneek-otp';
+import { type SneekLoginHandlers } from './use-sneek-login.js';
 export type SneekTheme = 'auto' | 'light' | 'dark';
 export type SneekIdentifierMode = 'phone' | 'email' | 'both';
-export interface SneekOtpLoginProps<TResult = unknown> extends SneekOtpHandlers<TResult> {
+export interface SneekLoginProps<TResult = unknown> extends SneekLoginHandlers<TResult> {
     /** Heading above the form. @default 'Sign in' */
     title?: string;
     /** Heading once the code has been sent. @default 'Enter the code' */
@@ -55,10 +55,10 @@ export interface SneekOtpLoginProps<TResult = unknown> extends SneekOtpHandlers<
  *
  * @example
  * ```tsx
- * <SneekOtpLogin
- *   {...createFetchHandlers({ baseUrl: '/api/auth' })}
+ * <SneekLogin
+ *   {...createFetchHandlers()}
  *   onSuccess={(session) => router.push('/app')}
  * />
  * ```
  */
-export declare function SneekOtpLogin<TResult = unknown>(props: SneekOtpLoginProps<TResult>): ReactNode;
+export declare function SneekLogin<TResult = unknown>(props: SneekLoginProps<TResult>): ReactNode;

package/dist/country-picker.d.ts

@@ -1,4 +1,4 @@
-import { type Country } from './countries';
+import { type Country } from './countries.js';
 export interface CountryPickerProps {
     country: Country;
     onSelect: (country: Country) => void;

package/dist/fetch-handlers.d.ts

@@ -1,15 +1,16 @@
-import type { RequestOtpResult } from './state';
+import type { VerificationRequest } from './state.js';
 export interface FetchHandlerOptions {
     /**
-     * Partner backend endpoint that sends an OTP. Receives `{ identifier }`,
-     * must return `{ requestId, channels?, expiresInSeconds? }`.
-     * @default '/api/auth/request-otp'
+     * Partner backend endpoint that starts a verification. Receives
+     * `{ identifier }`, must return
+     * `{ requestId, channel?, maskedIdentifier?, expiresAt? }`.
+     * @default '/api/auth/request'
      */
     requestUrl?: string;
     /**
-     * Partner backend endpoint that verifies an OTP. Receives
+     * Partner backend endpoint that completes a verification. Receives
      * `{ requestId, code }`, returns whatever your app needs (session, token…).
-     * @default '/api/auth/verify-otp'
+     * @default '/api/auth/verify'
      */
     verifyUrl?: string;
     /** Extra headers (e.g. CSRF token) to send on both requests. */
@@ -18,12 +19,12 @@ export interface FetchHandlerOptions {
     credentials?: RequestCredentials;
 }
 /**
- * Build {@link SneekOtpHandlers} that POST to your own backend endpoints.
+ * Build {@link SneekLoginHandlers} that POST to your own backend endpoints.
  * Those endpoints call the Sneek API server-side with your secret key.
  */
 export declare function createFetchHandlers<TResult = unknown>(options?: FetchHandlerOptions): {
-    requestOtp: (identifier: string) => Promise<RequestOtpResult>;
-    verifyOtp: (input: {
+    requestVerification: (identifier: string) => Promise<VerificationRequest>;
+    verify: (input: {
         requestId: string;
         code: string;
     }) => Promise<TResult>;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-export { useSneekOtp, type SneekOtpHandlers, type UseSneekOtp, } from './use-sneek-otp';
-export { SneekOtpLogin, type SneekOtpLoginProps, type SneekTheme, type SneekIdentifierMode, } from './component';
-export { SNEEK_ACCENT_DARK, SNEEK_ACCENT_LIGHT, } from './theme';
-export { COUNTRIES, DEFAULT_COUNTRY_ISO2, flagEmoji, countryByIso2, countryByDialPrefix, detectCountryFromLocale, type Country, } from './countries';
-export { createFetchHandlers, type FetchHandlerOptions, } from './fetch-handlers';
-export { otpReducer, initialOtpState, formatChannels, type SneekChannel, type SneekOtpStep, type SneekOtpStatus, type SneekOtpState, type SneekOtpAction, type RequestOtpResult, } from './state';
+export { useSneekLogin, type SneekLoginHandlers, type UseSneekLogin, } from './use-sneek-login.js';
+export { SneekLogin, type SneekLoginProps, type SneekTheme, type SneekIdentifierMode, } from './component.js';
+export { SNEEK_ACCENT_DARK, SNEEK_ACCENT_LIGHT, } from './theme.js';
+export { COUNTRIES, DEFAULT_COUNTRY_ISO2, flagEmoji, countryByIso2, countryByDialPrefix, detectCountryFromLocale, type Country, } from './countries.js';
+export { createFetchHandlers, type FetchHandlerOptions, } from './fetch-handlers.js';
+export { loginReducer, initialLoginState, channelLabel, type SneekChannel, type SneekLoginStep, type SneekLoginStatus, type SneekLoginState, type SneekLoginAction, type VerificationRequest, } from './state.js';