{"_id":"@alzore16/ls-nova","name":"@alzore16/ls-nova","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@alzore16/ls-nova","version":"1.0.0","description":"Nova — Fintech dark/light split authentication theme (login + signup) for React. Config-driven, backend-agnostic.","type":"module","main":"./dist/ls-nova.cjs","module":"./dist/ls-nova.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/ls-nova.js","require":"./dist/ls-nova.cjs"},"./style.css":"./dist/style.css","./package.json":"./package.json"},"sideEffects":["**/*.css"],"engines":{"node":">=18"},"scripts":{"build":"npm run typecheck && vite build && node scripts/copy-types.mjs","typecheck":"tsc --noEmit","prepack":"npm run build","preview":"vite preview"},"peerDependencies":{"framer-motion":"^11.0.0 || ^12.0.0 || ^13.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"devDependencies":{"@types/react":"^18.3.11","@types/react-dom":"^18.3.1","@vitejs/plugin-react":"^4.3.2","framer-motion":"^11.11.0","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.6.3","vite":"^5.4.8"},"keywords":["auth","authentication","login","signup","react","theme","alzore","nova"],"license":"MIT","publishConfig":{"access":"public"},"_id":"@alzore16/ls-nova@1.0.0","_nodeVersion":"24.15.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-nZzL0NfeBFEQ0NkzXAcagBkkZOjiW46GtZzpAHe2lTFtk7vjdrNeINc1cM6ZT78ga+rpuJppGynlTDy6djlsJA==","shasum":"1c66e83194d8b14a3e9d38dda7aee4b427b7aad9","tarball":"https://registry.npmjs.org/@alzore16/ls-nova/-/ls-nova-1.0.0.tgz","fileCount":6,"unpackedSize":636759,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCOLkGKM+4ZdCiuiFUMUb/boXNzU1r5+f5MjOdgZ0BLWQIhAIi6nQeJ7lGrt9pfaTQx49HBj4qBtyxoesUbASUrOXwY"}]},"_npmUser":{"name":"owaisali16","email":"s.owaisaliavengers@gmail.com"},"directories":{},"maintainers":[{"name":"owaisali16","email":"s.owaisaliavengers@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ls-nova_1.0.0_1786860963220_0.772930818508677"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-16T06:16:03.001Z","1.0.0":"2026-08-16T06:16:03.393Z","modified":"2026-08-16T06:16:03.620Z"},"maintainers":[{"name":"owaisali16","email":"s.owaisaliavengers@gmail.com"}],"description":"Nova — Fintech dark/light split authentication theme (login + signup) for React. Config-driven, backend-agnostic.","keywords":["auth","authentication","login","signup","react","theme","alzore","nova"],"license":"MIT","readme":"# @alzore16/ls-nova — Nova\n\n**Nova — Fintech Dark/Light Split** authentication theme (Login + Signup) for\nReact. A config-driven, backend-agnostic auth UI: every color, font, spacing\ntoken, string, icon and image lives in a single theme config object — no\nauthentication provider is bundled or hard-coded.\n\nBuilt with **React 18/19** + **Framer Motion** (peer dependencies).\n\n---\n\n## Installation\n\n### npm\n\n```bash\nnpm install @alzore16/ls-nova\n```\n\n### pnpm\n\n```bash\npnpm add @alzore16/ls-nova\n```\n\n### yarn\n\n```bash\nyarn add @alzore16/ls-nova\n```\n\n### bun\n\n```bash\nbun add @alzore16/ls-nova\n```\n\nReact, React DOM and Framer Motion are peer dependencies — your project must\nalready have them installed.\n\n---\n\n## Basic usage\n\n```jsx\nimport { useState } from \"react\";\nimport { AuthSplitLayout, defaultTheme } from \"@alzore16/ls-nova\";\nimport \"@alzore16/ls-nova/style.css\";\n\nfunction App() {\n  const [mode, setMode] = useState(\"login\");\n\n  return (\n    <AuthSplitLayout\n      theme={defaultTheme}\n      mode={mode}\n      onModeChange={setMode}\n      onSubmit={async (values, mode) => {\n        // Your auth call goes here — see \"Backend integration\".\n        console.log(mode, values);\n      }}\n      onForgotPassword={(email) => console.log(\"reset\", email)}\n    />\n  );\n}\n\nexport default App;\n```\n\n> **CSS**: import `@alzore16/ls-nova/style.css` once in your app (e.g. in\n> your root layout). It ships inside the package — nothing to copy from this\n> repository.\n\n---\n\n## Public API\n\nEverything is exported from the package root — never import internal paths\nlike `@alzore16/ls-nova/src/...` or `@alzore16/ls-nova/dist/...`.\n\n| Export                    | Description                                                            |\n| ------------------------- | ---------------------------------------------------------------------- |\n| `AuthSplitLayout`         | Full-page login/signup split layout (hero panel + form panel).         |\n| `AuthCard`                | The form card (heading, fields, validation, submit, footer).           |\n| `HeroPanel`               | The left promotional panel.                                            |\n| `theme` / `defaultTheme`  | The default theme configuration object.                                |\n| `mergeTheme(base, override)` | Deep-merges a partial override onto a config object.                |\n| `themeToCssVars(theme)`   | Flattens a config into CSS custom properties.                          |\n| `loginUser`, `registerUser`, `logoutUser`, `forgotPassword`, `getCurrentUser`, `refreshSession` | Backend adapter functions (see below). |\n\n---\n\n## Props\n\n### `AuthSplitLayout`\n\n| Prop                 | Type                                | Description                                                        |\n| -------------------- | ----------------------------------- | ------------------------------------------------------------------ |\n| `theme`              | `DeepPartial<ThemeConfig>`          | Overrides, deep-merged over the default config.                    |\n| `initialMode`        | `\"login\" \\| \"signup\"`               | Initial mode when `mode` is uncontrolled. Default `\"login\"`.       |\n| `mode`               | `\"login\" \\| \"signup\"`               | Controlled mode. Omit to let the layout manage its own state.      |\n| `onModeChange`       | `(mode) => void`                    | Called when the user switches login ↔ signup.                      |\n| `onSubmit`           | `(values, mode) => void \\| Promise` | Called after validation passes. Replaces the backend adapter.      |\n| `onForgotPassword`   | `(email) => void`                   | Called on \"Forgot password?\". Replaces the backend adapter.        |\n\n### `AuthCard`\n\nSame props as `AuthSplitLayout` (minus `theme` overrides — it takes the full\nmerged `ThemeConfig`). Used internally by `AuthSplitLayout`.\n\n---\n\n## Backend integration\n\nThe package contains **no backend provider** (no Supabase, Firebase, Auth0,\nClerk, NextAuth, or custom API). The UI only defines an integration contract.\nYou connect your own backend in two ways:\n\n### 1. Props (recommended for the component API)\n\nPass `onSubmit` (and optionally `onForgotPassword`) to `AuthSplitLayout`.\nThey replace the default adapter entirely:\n\n```jsx\n<AuthSplitLayout\n  onSubmit={async (values, mode) => {\n    const res = await fetch(\"/api/auth/\" + (mode === \"login\" ? \"login\" : \"register\"), {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify(values),\n    });\n    if (!res.ok) throw new Error(\"Invalid email or password\");\n    const session = await res.json();\n    // ...store session, redirect, etc.\n  }}\n  onForgotPassword={async (email) => {\n    await fetch(\"/api/auth/forgot-password\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify({ email }),\n    });\n  }}\n/>\n```\n\nAny thrown error is shown to the user inside the form.\n\n### 2. The adapter contract\n\nThe exported functions (`loginUser`, `registerUser`, …) follow this\ncontract — every function returns `Promise<AuthResult>`:\n\n```ts\ntype AuthResult =\n  | { success: true; user: AuthUser; session: AuthSession }\n  | { success: false; error: string };\n```\n\nYou can re-implement the adapter functions in your own module (importing the\ntypes from the package) and pass them through — or use them as the shape\nreference for your backend calls.\n\n---\n\n## Customization\n\nEvery visual and textual value comes from the theme config. Pass partial\noverrides — they are deep-merged over the default:\n\n```jsx\nimport { AuthSplitLayout } from \"@alzore16/ls-nova\";\n\n<AuthSplitLayout\n  theme={{\n    colors: { primaryButtonGradientStart: \"#3B82F6\", primaryButtonGradientEnd: \"#1D4ED8\" },\n    copy: { login: { viewHeading: \"Welcome back to Acme\" } },\n    brand: { wordmark: \"Acme\" },\n  }}\n/>\n```\n\nThe full config shape (`ThemeConfig`) is exported as a type: `hero`, `brand`,\n`modeSwitch`, `colors`, `typography`, `layout`, `copy`, `footerLinks`,\n`fields`, `validation`, `motion`. See the config reference in the source\npackage for the complete token list.\n\n---\n\n## Supported React usage\n\n- **Vite** / **Create React App** / **Webpack** / **Rspack** — any bundler\n  that understands npm packages with `exports`.\n- **Next.js App Router** — client components (`\"use client\"`); the theme is\n  a full-page component.\n- **Remix** / **Astro** / **Gatsby** — client-rendered auth pages.\n- Works with TypeScript: component props, theme config and backend adapter\n  types are all exported (autocomplete + type checking out of the box).\n\n### Styling notes\n\n- Import `@alzore16/ls-nova/style.css` exactly once in your app.\n- The theme is designed as a **full-viewport auth page** (100dvh). Its CSS\n  resets body margins and sets `overflow-x: hidden` on `html, body` — if you\n  embed it inside an existing page, scope it to a dedicated auth route.\n- No fonts are bundled: the theme uses the Inter stack with system fallbacks.\n  Load Inter yourself (e.g. Google Fonts) for the intended typography.\n- Responsive: desktop ≥1200px (side-by-side), tablet 768–1199px, mobile\n  ≤767px (auth-only, promo panel removed) — unchanged from the original theme.\n\n---\n\n## TypeScript\n\nThe package ships with full type declarations (`dist/index.d.ts`), including:\n\n- `AuthSplitLayoutProps`, `AuthCardProps`, `HeroPanelProps`\n- `ThemeConfig` and all sub-config types, plus `DeepPartial` for overrides\n- `AuthUser`, `AuthSession`, `AuthResult`, and the adapter function signatures\n\n```tsx\nimport { AuthSplitLayout, type AuthSplitLayoutProps } from \"@alzore16/ls-nova\";\n\nconst props: AuthSplitLayoutProps = {\n  initialMode: \"login\",\n  onSubmit: async (values, mode) => { /* ... */ },\n};\n```\n\n---\n\n## License\n\nMIT","readmeFilename":"README.md","_rev":"1-3b2594aa71e29c30a241d409b2a1f334"}