@sneekin/ui 0.1.2 → 0.2.0

package/dist/state.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Framework-agnostic state machine for the Sneek passwordless OTP flow.
+ *
+ * Kept free of React so it can be unit-tested in isolation and reused by other
+ * front-end bindings later (Vue/Svelte). The hook in `use-sneek-otp.ts` is a
+ * thin wrapper around this reducer.
+ */
+export type SneekChannel = 'sms' | 'whatsapp' | 'email';
+/** Which screen of the two-step flow is showing. */
+export type SneekOtpStep = 'identify' | 'verify';
+/** Async lifecycle for the in-flight request. */
+export type SneekOtpStatus = 'idle' | 'sending' | 'verifying';
+export interface SneekOtpState {
+    step: SneekOtpStep;
+    status: SneekOtpStatus;
+    /** The email / mobile / username the user typed. */
+    identifier: string;
+    /** The OTP code the user typed on the verify screen. */
+    code: string;
+    /** Opaque id returned by the partner backend, replayed on verify. */
+    requestId: string;
+    /** Channels the OTP was actually delivered over. */
+    channels: SneekChannel[];
+    /** Seconds until the OTP expires (from the request response). */
+    expiresInSeconds: number;
+    /** User-facing error message, or null. */
+    error: string | null;
+}
+export declare const initialOtpState: SneekOtpState;
+export interface RequestOtpResult {
+    requestId: string;
+    channels?: SneekChannel[];
+    expiresInSeconds?: number;
+}
+export type SneekOtpAction = {
+    type: 'set_identifier';
+    value: string;
+} | {
+    type: 'set_code';
+    value: string;
+} | {
+    type: 'request_start';
+} | {
+    type: 'request_success';
+    result: RequestOtpResult;
+} | {
+    type: 'request_error';
+    message: string;
+} | {
+    type: 'verify_start';
+} | {
+    type: 'verify_error';
+    message: string;
+} | {
+    type: 'reset';
+} | {
+    type: 'back_to_identify';
+};
+export declare function otpReducer(state: SneekOtpState, action: SneekOtpAction): SneekOtpState;
+/** "SMS, WhatsApp" — human label for the channels an OTP was sent over. */
+export declare function formatChannels(channels: SneekChannel[]): string;
+/** Normalize any thrown value into a user-facing message. */
+export declare function toMessage(error: unknown, fallback: string): string;

package/dist/theme.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Theme for the drop-in login card.
+ *
+ * The package ships zero dependencies and no stylesheet, so the tokens are
+ * injected once as CSS custom properties scoped to `.sneek-otp`. That buys two
+ * things inline styles cannot: a `prefers-color-scheme` media query, and real
+ * `:focus-visible` / `:hover` states.
+ *
+ * Light and dark are authored independently rather than one being an inversion
+ * of the other. In dark, the page-to-card lightness delta carries depth and the
+ * card needs no shadow; in light both are near-white, so the card takes a
+ * visible border and a real shadow.
+ */
+export declare const SNEEK_STYLE_ID = "sneek-otp-styles";
+/** Brand orange. The single accent — nothing else on the card is coloured. */
+export declare const SNEEK_ACCENT_DARK = "#f86513";
+/** Darkened for light mode so it clears WCAG AA as text and as a button fill. */
+export declare const SNEEK_ACCENT_LIGHT = "#b83f06";
+export declare function buildStyles(accent?: string): string;

package/dist/use-sneek-otp.d.ts

@@ -0,0 +1,40 @@
+import { type RequestOtpResult, type SneekOtpState } from './state';
+/**
+ * Partner-supplied transport. These call the *partner's own backend*, which in
+ * turn talks to the Sneek API with the secret server-side key. The browser
+ * never sees a Sneek API key — that is the whole security model of this package.
+ */
+export interface SneekOtpHandlers<TResult = unknown> {
+    /** Ask the partner backend to send an OTP to `identifier`. */
+    requestOtp: (identifier: string) => Promise<RequestOtpResult>;
+    /** Verify the code with the partner backend; resolve with the auth result. */
+    verifyOtp: (input: {
+        requestId: string;
+        code: string;
+    }) => Promise<TResult>;
+    /** Called after a successful verification with the partner's result. */
+    onSuccess?: (result: TResult) => void;
+    /** Called on any error (request or verify). */
+    onError?: (error: unknown) => void;
+}
+export interface UseSneekOtp extends SneekOtpState {
+    setIdentifier: (value: string) => void;
+    setCode: (value: string) => void;
+    /** Submit the identify step — triggers `requestOtp`. */
+    sendOtp: () => Promise<void>;
+    /** Submit the verify step — triggers `verifyOtp`. */
+    verify: () => Promise<void>;
+    /** Go back to the identify screen (e.g. "use a different email"). */
+    back: () => void;
+    /** Re-send the OTP to the same identifier. */
+    resend: () => Promise<void>;
+    /** Convenience booleans. */
+    isSending: boolean;
+    isVerifying: boolean;
+    isBusy: boolean;
+}
+/**
+ * Headless hook implementing the passwordless OTP login flow. Bring your own
+ * markup, or use the {@link SneekOtpLogin} component for a styled default.
+ */
+export declare function useSneekOtp<TResult = unknown>(handlers: SneekOtpHandlers<TResult>): UseSneekOtp;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@sneekin/ui",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "publishConfig": {
     "access": "public"
   },
-  "description": "Drop-in passwordless OTP login UI for React, powered by Sneek",
+  "description": "Drop-in passwordless login UI for React — themed, accessible, zero dependencies. Powered by Sneek.",
   "homepage": "https://sneek.in/docs",
   "bugs": {
     "url": "https://sneek.in/docs"
@@ -24,7 +24,7 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && tsc -p tsconfig.json --emitDeclarationOnly --declarationMap false",
     "type-check": "tsc --noEmit",
     "test": "node --test --import tsx test/*.test.ts"
   },
@@ -43,12 +43,12 @@
     "react": ">=17.0.0"
   },
   "devDependencies": {
-    "@types/node": "^20.11.0",
-    "@types/react": "^18.2.0",
-    "react": "^18.2.0",
-    "tsup": "^8.0.0",
-    "tsx": "^4.7.0",
-    "typescript": "^5.3.3"
+    "@types/node": "20.19.43",
+    "@types/react": "18.3.31",
+    "react": "18.3.1",
+    "tsup": "8.5.1",
+    "tsx": "4.21.0",
+    "typescript": "6.0.3"
   },
   "engines": {
     "node": ">=18"

package/dist/index.d.mts

@@ -1,160 +0,0 @@
-import { ReactNode, CSSProperties } from 'react';
-
-/**
- * Framework-agnostic state machine for the Sneek passwordless OTP flow.
- *
- * Kept free of React so it can be unit-tested in isolation and reused by other
- * front-end bindings later (Vue/Svelte). The hook in `use-sneek-otp.ts` is a
- * thin wrapper around this reducer.
- */
-type SneekChannel = 'sms' | 'whatsapp' | 'email';
-/** Which screen of the two-step flow is showing. */
-type SneekOtpStep = 'identify' | 'verify';
-/** Async lifecycle for the in-flight request. */
-type SneekOtpStatus = 'idle' | 'sending' | 'verifying';
-interface SneekOtpState {
-    step: SneekOtpStep;
-    status: SneekOtpStatus;
-    /** The email / mobile / username the user typed. */
-    identifier: string;
-    /** The OTP code the user typed on the verify screen. */
-    code: string;
-    /** Opaque id returned by the partner backend, replayed on verify. */
-    requestId: string;
-    /** Channels the OTP was actually delivered over. */
-    channels: SneekChannel[];
-    /** Seconds until the OTP expires (from the request response). */
-    expiresInSeconds: number;
-    /** User-facing error message, or null. */
-    error: string | null;
-}
-declare const initialOtpState: SneekOtpState;
-interface RequestOtpResult {
-    requestId: string;
-    channels?: SneekChannel[];
-    expiresInSeconds?: number;
-}
-type SneekOtpAction = {
-    type: 'set_identifier';
-    value: string;
-} | {
-    type: 'set_code';
-    value: string;
-} | {
-    type: 'request_start';
-} | {
-    type: 'request_success';
-    result: RequestOtpResult;
-} | {
-    type: 'request_error';
-    message: string;
-} | {
-    type: 'verify_start';
-} | {
-    type: 'verify_error';
-    message: string;
-} | {
-    type: 'reset';
-} | {
-    type: 'back_to_identify';
-};
-declare function otpReducer(state: SneekOtpState, action: SneekOtpAction): SneekOtpState;
-/** "SMS, WhatsApp" — human label for the channels an OTP was sent over. */
-declare function formatChannels(channels: SneekChannel[]): string;
-
-/**
- * Partner-supplied transport. These call the *partner's own backend*, which in
- * turn talks to the Sneek API with the secret server-side key. The browser
- * never sees a Sneek API key — that is the whole security model of this package.
- */
-interface SneekOtpHandlers<TResult = unknown> {
-    /** Ask the partner backend to send an OTP to `identifier`. */
-    requestOtp: (identifier: string) => Promise<RequestOtpResult>;
-    /** Verify the code with the partner backend; resolve with the auth result. */
-    verifyOtp: (input: {
-        requestId: string;
-        code: string;
-    }) => Promise<TResult>;
-    /** Called after a successful verification with the partner's result. */
-    onSuccess?: (result: TResult) => void;
-    /** Called on any error (request or verify). */
-    onError?: (error: unknown) => void;
-}
-interface UseSneekOtp extends SneekOtpState {
-    setIdentifier: (value: string) => void;
-    setCode: (value: string) => void;
-    /** Submit the identify step — triggers `requestOtp`. */
-    sendOtp: () => Promise<void>;
-    /** Submit the verify step — triggers `verifyOtp`. */
-    verify: () => Promise<void>;
-    /** Go back to the identify screen (e.g. "use a different email"). */
-    back: () => void;
-    /** Re-send the OTP to the same identifier. */
-    resend: () => Promise<void>;
-    /** Convenience booleans. */
-    isSending: boolean;
-    isVerifying: boolean;
-    isBusy: boolean;
-}
-/**
- * Headless hook implementing the passwordless OTP login flow. Bring your own
- * markup, or use the {@link SneekOtpLogin} component for a styled default.
- */
-declare function useSneekOtp<TResult = unknown>(handlers: SneekOtpHandlers<TResult>): UseSneekOtp;
-
-interface SneekOtpLoginProps<TResult = unknown> extends SneekOtpHandlers<TResult> {
-    /** Heading shown above the form. @default 'Sign in' */
-    title?: string;
-    /** Sub-heading. @default 'Passwordless login powered by Sneek' */
-    subtitle?: ReactNode;
-    /** Label for the identifier input. */
-    identifierLabel?: string;
-    /** Placeholder for the identifier input. */
-    identifierPlaceholder?: string;
-    /** Brand colour for the primary button. @default '#56d3b5' */
-    accentColor?: string;
-    /** Optional logo rendered above the title. */
-    logo?: ReactNode;
-    /** Override the outer container style. */
-    style?: CSSProperties;
-    /** Extra className on the outer container. */
-    className?: string;
-}
-/**
- * Drop-in, dependency-free passwordless OTP login card. The component never
- * receives a Sneek API key; it calls the partner-supplied handlers, which talk
- * to the partner backend. Use {@link createFetchHandlers} for the common case.
- */
-declare function SneekOtpLogin<TResult = unknown>(props: SneekOtpLoginProps<TResult>): ReactNode;
-
-interface FetchHandlerOptions {
-    /**
-     * Partner backend endpoint that sends an OTP. Receives `{ identifier }`,
-     * must return `{ requestId, channels?, expiresInSeconds? }`.
-     * @default '/api/auth/request-otp'
-     */
-    requestUrl?: string;
-    /**
-     * Partner backend endpoint that verifies an OTP. Receives
-     * `{ requestId, code }`, returns whatever your app needs (session, token…).
-     * @default '/api/auth/verify-otp'
-     */
-    verifyUrl?: string;
-    /** Extra headers (e.g. CSRF token) to send on both requests. */
-    headers?: Record<string, string>;
-    /** Forwarded to fetch — set to 'include' if you use cookie sessions. */
-    credentials?: RequestCredentials;
-}
-/**
- * Build {@link SneekOtpHandlers} that POST to your own backend endpoints.
- * Those endpoints call the Sneek API server-side with your secret key.
- */
-declare function createFetchHandlers<TResult = unknown>(options?: FetchHandlerOptions): {
-    requestOtp: (identifier: string) => Promise<RequestOtpResult>;
-    verifyOtp: (input: {
-        requestId: string;
-        code: string;
-    }) => Promise<TResult>;
-};
-
-export { type FetchHandlerOptions, type RequestOtpResult, type SneekChannel, type SneekOtpAction, type SneekOtpHandlers, SneekOtpLogin, type SneekOtpLoginProps, type SneekOtpState, type SneekOtpStatus, type SneekOtpStep, type UseSneekOtp, createFetchHandlers, formatChannels, initialOtpState, otpReducer, useSneekOtp };