@sneekin/ui 0.2.2 → 0.3.0

package/README.md

@@ -57,6 +57,26 @@ The code entry step shows the destination with an inline way to change it,
 and submits itself on the sixth digit — no separate verify tap needed on
 mobile.
 
+## Phone entry
+
+By default the identify step opens in phone mode with a country chip —
+flag, dial code, searchable picker — and a "Use email instead" link that
+swaps it for a plain email field. The chip guesses the country from the
+visitor's browser locale, then updates itself if they paste a full
+international number (anything starting with `+`):
+
+```tsx
+<SneekOtpLogin defaultCountry="GB" {...handlers} />
+```
+
+Lock the field to just one identifier — no chip, no toggle:
+
+```tsx
+<SneekOtpLogin identifierMode="email" {...handlers} />
+```
+
+`identifierMode` is `'both' | 'phone' | 'email'`, default `'both'`.
+
 Swap the mark, drop the sub-heading, or remove the Sneek line:
 
 ```tsx
@@ -81,8 +101,10 @@ control carries a stable class (`.sneek-otp-input`, `.sneek-otp-button`,
 | `onSuccess` | `(result: TResult) => void` | — |
 | `title` | `string` | `'Sign in'` |
 | `subtitle` | `ReactNode \| null` | `'We will send you a one-time code.'` |
-| `identifierLabel` | `string` | `'Email or mobile'` |
-| `identifierPlaceholder` | `string` | `'you@company.com or +91…'` |
+| `identifierMode` | `'both' \| 'phone' \| 'email'` | `'both'` |
+| `defaultCountry` | ISO 3166-1 alpha-2, e.g. `'GB'` | guessed from locale, else India |
+| `identifierLabel` | `string` | `'Mobile number'` / `'Email address'`, per mode |
+| `identifierPlaceholder` | `string` | email mode only; `'you@company.com'` |
 | `theme` | `'auto' \| 'light' \| 'dark'` | `'auto'` |
 | `accentColor` | `string` | Sneek orange, tuned per mode |
 | `logo` | `ReactNode \| null` | Sneek mark |

package/dist/component.d.ts

@@ -1,6 +1,7 @@
 import { type CSSProperties, type ReactNode } from 'react';
 import { type SneekOtpHandlers } from './use-sneek-otp';
 export type SneekTheme = 'auto' | 'light' | 'dark';
+export type SneekIdentifierMode = 'phone' | 'email' | 'both';
 export interface SneekOtpLoginProps<TResult = unknown> extends SneekOtpHandlers<TResult> {
     /** Heading above the form. @default 'Sign in' */
     title?: string;
@@ -8,9 +9,20 @@ export interface SneekOtpLoginProps<TResult = unknown> extends SneekOtpHandlers<
     verifyTitle?: string;
     /** Sub-heading. Pass `null` to remove it. */
     subtitle?: ReactNode;
-    /** Label for the identifier input. */
+    /**
+     * Which identifiers a visitor can sign in with. `'both'` starts on phone
+     * with a country chip and offers a link to switch to email.
+     * @default 'both'
+     */
+    identifierMode?: SneekIdentifierMode;
+    /**
+     * ISO 3166-1 alpha-2 country to preselect for the phone chip. Leave unset
+     * to guess from the browser's locale, falling back to India.
+     */
+    defaultCountry?: string;
+    /** Overrides the auto label ("Mobile number" / "Email address"). */
     identifierLabel?: string;
-    /** Placeholder for the identifier input. */
+    /** Overrides the auto placeholder. Only used in email mode. */
     identifierPlaceholder?: string;
     /**
      * Colour scheme. `auto` follows the visitor's system setting.

package/dist/countries.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Country calling codes for the phone-mode chip in the identify step.
+ *
+ * Flags are computed from the ISO 3166-1 alpha-2 code (two regional-indicator
+ * codepoints) rather than hand-typed emoji, so there is no chance of a flag
+ * silently drifting from its country. Where a dial code is shared by several
+ * territories (+1, +7, +44, +61...), the first entry is the one auto-detect
+ * and the default resolve to — the largest or best-known user of that code.
+ */
+export interface Country {
+    iso2: string;
+    name: string;
+    dial: string;
+}
+export declare const COUNTRIES: readonly Country[];
+export declare const DEFAULT_COUNTRY_ISO2 = "IN";
+export declare function flagEmoji(iso2: string): string;
+export declare function countryByIso2(iso2: string): Country | undefined;
+/**
+ * Longest-dial-code-first match against a digit string (no '+'). Tries 3, 2,
+ * then 1-digit prefixes so e.g. "44" resolves to the UK rather than being cut
+ * short at a 1-digit code that happens to also exist.
+ */
+export declare function countryByDialPrefix(digits: string): Country | undefined;
+/** Best-effort guess from the browser's locale region, e.g. "en-GB" -> GB. */
+export declare function detectCountryFromLocale(): Country | undefined;

package/dist/country-picker.d.ts

@@ -0,0 +1,12 @@
+import { type Country } from './countries';
+export interface CountryPickerProps {
+    country: Country;
+    onSelect: (country: Country) => void;
+    disabled?: boolean;
+}
+/**
+ * The flag + dial-code chip in front of the phone number field. Opens a
+ * searchable list on click; the number field itself keeps auto-detecting
+ * from pasted content independently of this — this is the manual path.
+ */
+export declare function CountryPicker({ country, onSelect, disabled }: CountryPickerProps): import("react").JSX.Element;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { useSneekOtp, type SneekOtpHandlers, type UseSneekOtp, } from './use-sneek-otp';
-export { SneekOtpLogin, type SneekOtpLoginProps, type SneekTheme, } from './component';
+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';