doct-ui-auth-kit 1.0.0

package/dist/types/auth-layout-types.d.ts

@@ -0,0 +1,94 @@
+import type { ReactNode } from 'react';
+/**
+ * Layout configuration types
+ */
+export type AuthLayoutVariant = 'mobile' | 'desktop';
+export type AuthLayoutMaxWidth = 'sm' | 'md' | 'lg';
+/** Text/alignment variant for Logo, Title, Description slots */
+export type AuthLayoutAlign = 'left' | 'center' | 'right';
+/**
+ * Props for AuthLayout.Root component
+ */
+export interface AuthLayoutRootProps {
+    /** Main content (compound components) */
+    children: ReactNode;
+    /** Layout variation for spacing and alignment */
+    variant?: AuthLayoutVariant;
+    /** Maximum width constraint for the content area */
+    maxWidth?: AuthLayoutMaxWidth;
+    /** Additional className for the root container */
+    className?: string;
+    /** Additional className for the content wrapper */
+    contentClassName?: string;
+}
+/**
+ * Props for AuthLayout.Header component
+ */
+export interface AuthLayoutHeaderProps {
+    /** Header content */
+    children: ReactNode;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Props for AuthLayout.Logo component
+ */
+export interface AuthLayoutLogoProps {
+    /** Logo content */
+    children: ReactNode;
+    /** Alignment: left, center (default), or right */
+    align?: AuthLayoutAlign;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Props for AuthLayout.Title component
+ */
+export interface AuthLayoutTitleProps {
+    /** Title content */
+    children: ReactNode;
+    /** Alignment: left, center (default), or right */
+    align?: AuthLayoutAlign;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Props for AuthLayout.Description component
+ */
+export interface AuthLayoutDescriptionProps {
+    /** Description content */
+    children: ReactNode;
+    /** Alignment: left, center (default), or right */
+    align?: AuthLayoutAlign;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Props for AuthLayout.Body component
+ */
+export interface AuthLayoutBodyProps {
+    /** Body content (forms, buttons, etc.) */
+    children: ReactNode;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Props for AuthLayout.Main component
+ */
+export interface AuthLayoutMainProps {
+    /** Main content (Logo, Title, Description, Body slots) */
+    children: ReactNode;
+    /** When true, constrains main content width to 320px (max-w-[320px]) */
+    sm?: boolean;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Props for AuthLayout.Footer component
+ */
+export interface AuthLayoutFooterProps {
+    /** Footer content */
+    children: ReactNode;
+    /** Additional className */
+    className?: string;
+}

package/dist/types/common.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Common utility types and interfaces used across the application
+ */
+export type Nullable<T> = T | null;
+export type Optional<T> = T | undefined;
+export type Maybe<T> = T | null | undefined;
+export type ID = string | number;
+export interface BaseEntity {
+    id: ID;
+    createdAt?: string;
+    updatedAt?: string;
+}
+export type Status = 'idle' | 'loading' | 'success' | 'error';
+export interface ApiResponse<T> {
+    data: T;
+    message?: string;
+    success: boolean;
+}
+export interface PaginatedResponse<T> {
+    data: T[];
+    total: number;
+    page: number;
+    limit: number;
+    totalPages: number;
+}

package/dist/types/forms.d.ts

@@ -0,0 +1,124 @@
+import type { KeyboardEvent } from 'react';
+import type { Control, FieldValues } from 'react-hook-form';
+export interface BaseFormFieldProps {
+    name: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+    error?: string;
+    helperText?: string;
+}
+export interface RHFInputFieldProps extends BaseFormFieldProps {
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
+    autoComplete?: string;
+    maxLength?: number;
+    minLength?: number;
+    pattern?: string;
+    control?: Control<FieldValues>;
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    numericOnly?: boolean;
+}
+export interface RHFPasswordFieldProps extends BaseFormFieldProps {
+    showPassword?: boolean;
+    togglePasswordVisibility?: () => void;
+    control?: Control<FieldValues>;
+}
+export interface RHFTextareaFieldProps extends BaseFormFieldProps {
+    rows?: number;
+    maxLength?: number;
+    minLength?: number;
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    control?: Control<FieldValues>;
+}
+export interface RHFPhoneInputFieldProps extends BaseFormFieldProps {
+    countryCode?: string;
+    preferredCountries?: string[];
+    enableSearch?: boolean;
+    searchPlaceholder?: string;
+    autoFormat?: boolean;
+    control?: Control<FieldValues>;
+}
+/** Props for RHF wrapper around DoctPhoneInput (docthub-core-components). */
+export interface RHFDoctPhoneInputFieldProps extends BaseFormFieldProps {
+    defaultCountry?: string;
+    variant?: 'default' | 'flag';
+    control?: Control<FieldValues>;
+}
+export interface RHFOtpInputFieldProps extends BaseFormFieldProps {
+    length?: number;
+    type?: 'text' | 'number' | 'password';
+    autoFocus?: boolean;
+    autoSubmit?: boolean;
+    onComplete?: (otp: string) => void;
+    inputClassName?: string;
+    control?: Control<FieldValues>;
+}
+export interface FormLayoutProps {
+    children: React.ReactNode;
+    className?: string;
+    onSubmit?: (data: Record<string, unknown>) => void;
+    onReset?: () => void;
+}
+export interface FormHeaderProps {
+    title: string;
+    subtitle?: string;
+    onBack?: () => void;
+    className?: string;
+}
+export interface FormFooterProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export interface FormCardProps {
+    children: React.ReactNode;
+    className?: string;
+    title?: string;
+    subtitle?: string;
+    headerActions?: React.ReactNode;
+    footerActions?: React.ReactNode;
+}
+export interface ValidationRule {
+    required?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: RegExp;
+    min?: number;
+    max?: number;
+    email?: boolean;
+    url?: boolean;
+    custom?: (value: unknown) => boolean | string;
+}
+export interface FormValidationSchema {
+    [fieldName: string]: ValidationRule;
+}
+export interface FormState {
+    isValid: boolean;
+    isDirty: boolean;
+    isSubmitting: boolean;
+    errors: Record<string, string>;
+    touched: Record<string, boolean>;
+    values: Record<string, unknown>;
+}
+export interface FormSubmissionOptions {
+    validateOnSubmit?: boolean;
+    resetOnSuccess?: boolean;
+    showSuccessMessage?: boolean;
+    successMessage?: string;
+    onSuccess?: (data: Record<string, unknown>) => void;
+    onError?: (error: unknown) => void;
+}
+export interface UseFormReturn<T = Record<string, unknown>> {
+    register: (name: keyof T) => object;
+    handleSubmit: (onSubmit: (data: T) => void) => (e: React.FormEvent) => void;
+    watch: (name?: keyof T) => unknown;
+    setValue: (name: keyof T, value: T[keyof T]) => void;
+    getValues: () => T;
+    reset: (values?: T) => void;
+    formState: FormState;
+    errors: Record<keyof T, string>;
+    isValid: boolean;
+    isDirty: boolean;
+    isSubmitting: boolean;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Central export file for all types and interfaces
+ * Import types from here: import type { User, ApiResponse } from '@/types';
+ */
+export * from './common';
+export * from './user';

package/dist/types/user.d.ts

@@ -0,0 +1,31 @@
+/**
+ * User-related types and interfaces
+ */
+import type { BaseEntity } from './common';
+export interface User extends BaseEntity {
+    name: string;
+    email: string;
+    avatar?: string;
+    role?: UserRole;
+}
+export type UserRole = 'admin' | 'user' | 'guest';
+export interface UserProfile extends User {
+    bio?: string;
+    phone?: string;
+    address?: Address;
+}
+export interface Address {
+    street?: string;
+    city?: string;
+    state?: string;
+    zipCode?: string;
+    country?: string;
+}
+export interface LoginCredentials {
+    email: string;
+    password: string;
+}
+export interface RegisterData extends LoginCredentials {
+    name: string;
+    confirmPassword: string;
+}

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,104 @@
+{
+  "name": "doct-ui-auth-kit",
+  "version": "1.0.0",
+  "description": "Composable React auth SDK – layouts, login/signup/OTP pages, SSO provider, and auth flow hooks for Docthub",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": ["dist", "README.md"],
+  "keywords": [
+    "react",
+    "auth",
+    "sdk",
+    "docthub",
+    "login",
+    "signup",
+    "sso",
+    "otp"
+  ],
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/docthub/doct-ui-auth-kit"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build && tsc -p tsconfig.build.json",
+    "prepublishOnly": "npm run build",
+    "lint": "biome lint .",
+    "preview": "vite preview",
+    "format": "biome format --write .",
+    "lint:biome": "biome lint .",
+    "check": "biome check .",
+    "check:fix": "biome check --write .",
+    "type-check": "tsc --noEmit",
+    "prepare": "husky",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css",
+    "./pages": {
+      "types": "./dist/pages/index.d.ts",
+      "import": "./dist/pages.js"
+    }
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "docthub-core-components": "^2.54.0",
+    "react-hook-form": "^7.50.0",
+    "zod": "^4.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "dayjs": "^1.11.19",
+    "docthub-core-components": "^2.54.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-hook-form": "^7.71.1",
+    "react-icons": "^5.5.0",
+    "react-phone-number-input": "^3.4.14",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.3.14",
+    "@chromatic-com/storybook": "^5.0.0",
+    "@eslint/js": "^9.39.1",
+    "@storybook/addon-a11y": "^10.2.6",
+    "@storybook/addon-docs": "^10.2.6",
+    "@storybook/addon-onboarding": "^10.2.6",
+    "@storybook/addon-vitest": "^10.2.6",
+    "@storybook/react-vite": "^10.2.6",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "autoprefixer": "^10.4.24",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "glob": "^13.0.1",
+    "globals": "^16.5.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
+    "playwright": "^1.58.1",
+    "postcss": "^8.5.6",
+    "storybook": "^10.2.6",
+    "tailwind-merge": "^3.0.1",
+    "tailwindcss": "^3.4.16",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4",
+    "vitest": "^4.0.18",
+    "vite-plugin-dts": "^4.5.0"
+  }
+}