{"_id":"@alzore16/ls-red","name":"@alzore16/ls-red","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@alzore16/ls-red","version":"1.0.0","description":"Red. — Illustrated Growth authentication theme (login + signup) for React. Config-driven, backend-agnostic.","type":"module","main":"./dist/ls-red.cjs","module":"./dist/ls-red.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/ls-red.js","require":"./dist/ls-red.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","red"],"license":"MIT","publishConfig":{"access":"public"},"_id":"@alzore16/ls-red@1.0.0","_nodeVersion":"24.15.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-VlGD83av/zEicOrezeNMtaxff1r2GKlLIY3GNKflFQvLVqhJcI4AtxvMLQtboYkQM8+Yf99T0rKLvOOALMPNtw==","shasum":"48c2f507dd4402aa9ef367564171f81e9ad3ca54","tarball":"https://registry.npmjs.org/@alzore16/ls-red/-/ls-red-1.0.0.tgz","fileCount":6,"unpackedSize":5791887,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDzhuNCt3xgxN2tIUT0p8c9bUJ0EOn0GH893ZJQVsQrOAIhAJZ1vH3zNc8hHgaWnQYHw12WvhofDuhTCWDsAi0Qyu6G"}]},"_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-red_1.0.0_1786860987406_0.6335919358606841"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-16T06:16:27.263Z","1.0.0":"2026-08-16T06:16:27.629Z","modified":"2026-08-16T06:16:27.859Z"},"maintainers":[{"name":"owaisali16","email":"s.owaisaliavengers@gmail.com"}],"description":"Red. — Illustrated Growth authentication theme (login + signup) for React. Config-driven, backend-agnostic.","keywords":["auth","authentication","login","signup","react","theme","alzore","red"],"license":"MIT","readme":"# @alzore16/ls-red — Red.\n\n**Red. — Illustrated Growth** authentication theme (Login + Signup) for React —\na warm illustrated page with top-bar actions, decorative SVG/graphic\nillustrations and a config-driven auth card. Every color, font, spacing token,\nstring, icon and illustration 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-red\n```\n\n### pnpm\n\n```bash\npnpm add @alzore16/ls-red\n```\n\n### yarn\n\n```bash\nyarn add @alzore16/ls-red\n```\n\n### bun\n\n```bash\nbun add @alzore16/ls-red\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 { AuthContainer, defaultTheme } from \"@alzore16/ls-red\";\nimport \"@alzore16/ls-red/style.css\";\n\nfunction App() {\n  const [mode, setMode] = useState(\"login\");\n\n  return (\n    <AuthContainer\n      theme={defaultTheme}\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      }}\n      onSocialLogin={(providerId, mode) => {\n        console.log(\"social\", providerId, mode);\n      }}\n    />\n  );\n}\n\nexport default App;\n```\n\n> **CSS**: import `@alzore16/ls-red/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-red/src/...` or `@alzore16/ls-red/dist/...`.\n\n| Export            | Description                                                       |\n| ----------------- | ---------------------------------------------------------------- |\n| `AuthContainer`   | The full-page auth layout (top bar, illustrations, auth card).   |\n| `AuthCard`        | The login/signup card (heading, fields, submit, social buttons). |\n| `SocialButtons`   | Config-driven social login buttons.                              |\n| `Illustrations`   | Decorative left/right SVG art + background image.                |\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| `authBackend`     | The default backend adapter object (see below).                  |\n\n---\n\n## Props\n\n### `AuthContainer`\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 container 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 — your backend hook.               |\n| `onSocialLogin`      | `(providerId, mode) => void`        | Called on a social provider click.                                 |\n\n### `AuthCard`\n\nSame props as `AuthContainer` minus the theme-override (it takes the full\nmerged `ThemeConfig`). Used internally by `AuthContainer`.\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.\nConnect your own backend in two ways:\n\n### 1. Props (recommended)\n\nPass `onSubmit` (and optionally `onSocialLogin`) to `AuthContainer`. They\nreplace the default adapter entirely:\n\n```jsx\n<AuthContainer\n  onSubmit={async (values, mode) => {\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(\"Invalid email or password\");\n    // ...store session, redirect, etc.\n  }}\n/>\n```\n\nAny thrown error aborts the submit (the button still shows its loading state\nwhile the promise is pending — implement your own error display via the\nreturned promise).\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<AuthResponse>;\n  login(data: LoginData): Promise<AuthResponse>;\n  logout(): Promise<AuthResponse>;\n  forgotPassword(email: string): Promise<AuthResponse>;\n  resetPassword(data: ResetPasswordData): Promise<AuthResponse>;\n  socialLogin(provider: string): Promise<AuthResponse>;\n}\n```\n\n- Resolve with `{ success: true, user, session }` for success.\n- Resolve with `{ success: false, error }` or throw an `Error` to surface a\n  failure.\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\nEvery visual and textual value comes from the theme config. Pass partial\noverrides — they are deep-merged over the default:\n\n```jsx\nimport { AuthContainer } from \"@alzore16/ls-red\";\n\n<AuthContainer\n  theme={{\n    colors: { primaryButtonBg: \"#3B82F6\", primaryButtonBgHover: \"#1D4ED8\" },\n    copy: { login: { headingLine2: \"Start Today\" } },\n    brand: { wordmark: \"Acme\" },\n  }}\n/>\n```\n\nThe full config shape (`ThemeConfig`) is exported as a type: `brand`,\n`topBarActions`, `illustrations`, `colors`, `typography`, `layout`, `copy`,\n`socialProviders`, `fields`, `validation`. The background illustration ships\nbundled inside the package (inline) — no external asset paths required.\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-red/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, sets `min-height: 100vh` and `overflow-x: hidden` on\n  `html, body` — if you embed it inside an existing page, scope it to a\n  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/tablet show the full illustrated page; mobile hides the\n  side illustrations and shows a compact hero strip — unchanged from the\n  original theme.\n\n---\n\n## TypeScript\n\nThe package ships with full type declarations (`dist/index.d.ts`), including:\n\n- `AuthContainerProps`, `AuthCardProps`, `SocialButtonsProps`, `IllustrationsProps`\n- `ThemeConfig` and all sub-config types, plus `DeepPartial` for overrides\n- `AuthUser`, `AuthResponse`, `SignupData`, `LoginData`, `ResetPasswordData`,\n  `SocialProvider`, `AuthBackend`\n\n```tsx\nimport { AuthContainer, type AuthContainerProps } from \"@alzore16/ls-red\";\n\nconst props: AuthContainerProps = {\n  initialMode: \"login\",\n  onSubmit: async (values, mode) => {\n    /* ... */\n  },\n};\n```\n\n---\n\n## License\n\nMIT","readmeFilename":"README.md","_rev":"1-159059f4f81b8d5389595f642d9f7d10"}