{"_id":"@alzore16/ls-aurora","name":"@alzore16/ls-aurora","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@alzore16/ls-aurora","version":"1.0.0","description":"Aurora Light — card-style authentication theme (login + signup) for React. Config-driven, backend-agnostic.","type":"module","main":"./dist/ls-aurora.cjs","module":"./dist/ls-aurora.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/ls-aurora.js","require":"./dist/ls-aurora.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.4","framer-motion":"^11.15.0","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.6.3","vite":"^5.4.11"},"keywords":["auth","authentication","login","signup","react","theme","alzore","aurora"],"license":"MIT","publishConfig":{"access":"public"},"_id":"@alzore16/ls-aurora@1.0.0","_nodeVersion":"24.15.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-HDgoS6K7vvzRdEs3XMEi9DZatStiepXhSoK8okyzQtHq8N9Q0rhl6WGyyLLLYyOa//mfJXIuzQ5Q/6MOytNqZA==","shasum":"4d230a846d69fb4713ed84c1f73d11250f316044","tarball":"https://registry.npmjs.org/@alzore16/ls-aurora/-/ls-aurora-1.0.0.tgz","fileCount":6,"unpackedSize":93418,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDAgSdLxW0sAG0or0hLL8C7sNBU/lP+SEq8BLSwlW992QIhALJpZWvw+KSabur7WO6BwsiES9SmGPfW3Hk22XIQJ8XI"}]},"_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-aurora_1.0.0_1786860897403_0.18159053315719764"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-16T06:14:57.229Z","1.0.0":"2026-08-16T06:14:57.556Z","modified":"2026-08-16T06:14:57.797Z"},"maintainers":[{"name":"owaisali16","email":"s.owaisaliavengers@gmail.com"}],"description":"Aurora Light — card-style authentication theme (login + signup) for React. Config-driven, backend-agnostic.","keywords":["auth","authentication","login","signup","react","theme","alzore","aurora"],"license":"MIT","readme":"# @alzore16/ls-aurora — Aurora Light\n\n**Aurora Light** authentication theme (Login + Signup) for React — a card with\na photo panel, config-driven fields, social login buttons and smooth animated\ntransitions. Every color, font, spacing token, string, image and social\nprovider lives in a single theme config object. No authentication provider is\nbundled 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-aurora\n```\n\n### pnpm\n\n```bash\npnpm add @alzore16/ls-aurora\n```\n\n### yarn\n\n```bash\nyarn add @alzore16/ls-aurora\n```\n\n### bun\n\n```bash\nbun add @alzore16/ls-aurora\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 { AuthCard, themeConfig } from \"@alzore16/ls-aurora\";\nimport \"@alzore16/ls-aurora/style.css\";\n\nfunction App() {\n  const [mode, setMode] = useState(\"login\");\n\n  return (\n    <AuthCard\n      config={themeConfig}\n      mode={mode}\n      onModeChange={setMode}\n      onSubmit={async (values, mode) => {\n        // Your auth call goes here — see \"Backend integration\".\n        const res = await fetch(\"/api/auth/\" + mode, {\n          method: \"POST\",\n          headers: { \"Content-Type\": \"application/json\" },\n          body: JSON.stringify(values),\n        });\n        if (!res.ok) throw new Error(\"Authentication failed\");\n        return res.json(); // { user, session }\n      }}\n      onAuthSuccess={(result, mode) => console.log(\"authenticated\", mode, result)}\n    />\n  );\n}\n\nexport default App;\n```\n\n> **CSS**: import `@alzore16/ls-aurora/style.css` once in your app. It ships\n> inside the package — nothing to copy from this repository.\n\n---\n\n## Public API\n\nEverything is exported from the package root — never import internal paths\nlike `@alzore16/ls-aurora/src/...` or `@alzore16/ls-aurora/dist/...`.\n\n| Export            | Description                                                          |\n| ----------------- | ------------------------------------------------------------------- |\n| `AuthCard`        | The top-level auth card (photo panel + form, login/signup modes).    |\n| `AuthForm`        | The form (fields, validation, submit, social buttons).               |\n| `PhotoPanel`      | The left photo panel + logo chip.                                    |\n| `resolvePhoto`    | Photo resolution helper (`images.photo` → entry for a view).         |\n| `SocialButtons`   | Config-driven social login buttons.                                  |\n| `themeConfig` / `theme` | The default theme configuration object.                        |\n| `authBackend`     | The default backend adapter object (see below).                      |\n\n---\n\n## Props\n\n### `AuthCard`\n\n| Prop                 | Type                                | Description                                                        |\n| -------------------- | ----------------------------------- | ------------------------------------------------------------------ |\n| `config`             | `ThemeConfig`                       | Theme config. Defaults to the exported `themeConfig`.              |\n| `initialMode`        | `\"login\" \\| \"signup\"`               | Initial mode when `mode` is uncontrolled. Default `\"login\"`.       |\n| `mode`               | `\"login\" \\| \"signup\"`               | Controlled mode. Omit to let the card manage its own state.        |\n| `onModeChange`       | `(mode) => void`                    | Called when the user switches login ↔ signup.                      |\n| `onSubmit`           | `(values, mode) => unknown`         | Overrides the adapter for login/signup — your backend hook.        |\n| `onSocialLogin`      | `(providerId, mode) => unknown`     | Overrides the adapter for social provider clicks.                  |\n| `onForgotPassword`   | `() => unknown`                     | Overrides the adapter for \"Forgot password?\".                      |\n| `onAuthSuccess`      | `(result, mode) => void`            | Called with the backend result after a successful auth action.     |\n| `onBack`             | `(view) => void`                    | Replaces the default back-arrow behavior.                          |\n\n---\n\n## Backend integration\n\nThe package contains **no backend provider** (no Supabase, Firebase, Auth0,\nClerk, NextAuth, or custom API). The UI routes every action through a\ndeveloper-controlled contract. Connect your own backend in two ways:\n\n### 1. Props (recommended)\n\nPass `onSubmit`, `onSocialLogin` and `onForgotPassword` to `AuthCard`. They\nreplace the default adapter entirely. Any thrown error or resolved\n`{ error: \"message\" }` is displayed inside the card.\n\n### 2. The `authBackend` adapter object\n\nThe exported `authBackend` follows a documented contract:\n\n```ts\ninterface AuthBackend {\n  signup(data: SignupData): Promise<AuthResult>;\n  login(data: LoginData): Promise<AuthResult>;\n  logout(): Promise<void>;\n  forgotPassword(email: string): Promise<AuthResult>;\n  socialLogin(provider: string): Promise<AuthResult>;\n}\n```\n\n- Resolve with `{ user, session }` (or `{}`) for success.\n- Resolve with `{ error: \"user-friendly message\" }` or throw an `Error` to\n  surface a failure in the UI.\n- The demo stub in the package resolves with a fake success — replace it by\n  providing the props above, or copy the adapter into your own module and\n  implement each method against your API.\n\n> **Security**: never put backend credentials or service-role keys in the\n> browser. Call your own API endpoints.\n\n---\n\n## Customization\n\nEverything comes from the theme config. Pass a full config object (based on\nthe exported `themeConfig`) or build your own:\n\n```jsx\n<AuthCard\n  config={{\n    ...themeConfig,\n    colors: { ...themeConfig.colors, buttonBackground: \"#3B82F6\" },\n    copy: { ...themeConfig.copy, login: { ...themeConfig.copy.login, heading: \"Welcome back to Acme\" } },\n    socialProviders: [{ id: \"google\", label: \"Continue with Google\", icon: \"google\" }],\n  }}\n/>\n```\n\nThe config shape (`ThemeConfig`) is exported as a type: `meta`, `images`,\n`colors`, `typography`, `layout`, `copy`, `links`, `fields`,\n`socialProviders`, `toggles`, `validation`. Photos are remote URLs by default\n(Unsplash) — point them at your own assets.\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\"`).\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-aurora/style.css` exactly once in your app.\n- The theme is designed as a **full-viewport auth card** (min-height 100vh).\n  Its CSS resets body margins and sets `overflow-x: hidden` on `html, body` —\n  if you 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 side-by-side card, tablet and mobile stack the photo\n  panel above the form — 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- `AuthCardProps`, `AuthFormProps`, `PhotoPanelProps`, `SocialButtonsProps`\n- `ThemeConfig` and all sub-config types\n- `AuthUser`, `AuthResult`, `SignupData`, `LoginData`, `AuthBackend`\n\n```tsx\nimport { AuthCard, type AuthCardProps } from \"@alzore16/ls-aurora\";\n\nconst props: AuthCardProps = {\n  initialMode: \"login\",\n  onSubmit: async (values, mode) => {\n    /* ... */\n  },\n};\n```\n\n---\n\n## License\n\nMIT","readmeFilename":"README.md","_rev":"1-66b0d8e77027a713f37483d450b347a2"}