@redzone/taunt-logins-ui-react 0.0.11 → 0.0.13

package/dist/styling.css

@@ -0,0 +1,239 @@
+.rzd-loginui-complete {
+  background: radial-gradient(50% 50% at 50% 50%, #132c50 0%, #0b101b 100%);
+  border-radius: 37px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  gap: 20px;
+
+  padding: 40px;
+  max-width: 620px;
+
+  min-height: 455px;
+  min-width: 500px;
+}
+
+.rzd-loginview {
+  box-sizing: border-box;
+  color: white;
+
+  .header-login {
+    font-family: "DRUNKWIDE", sans-serif;
+    font-size: 36px;
+    font-weight: bold;
+    color: white;
+    text-transform: uppercase;
+    margin: 20px 0;
+  }
+
+  .logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+    transition: filter 300ms;
+  }
+  .logo:hover {
+    filter: drop-shadow(0 0 2em #646cffaa);
+  }
+  .logo.react:hover {
+    filter: drop-shadow(0 0 2em #61dafbaa);
+  }
+
+  /* @keyframes logo-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    a:nth-of-type(2) .logo {
+      animation: logo-spin infinite 20s linear;
+    }
+  } */
+
+  .card {
+    padding: 2em;
+  }
+
+  .read-the-docs {
+    color: #888;
+  }
+}
+
+.rdz-input {
+  font-family: "Futura PT", sans-serif !important;
+  line-height: 1.5;
+  font-weight: 400 !important;
+
+  color: white;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1.2em;
+  font-weight: 400;
+  font-family: inherit;
+  background-color: transparent;
+  cursor: pointer;
+  transition: border-color 0.25s;
+
+  /* On hover, show a blue border */
+  &:hover {
+    border-color: #646cff;
+  }
+  /* On focus, show an accessible outline */
+  &:focus,
+  &:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+  }
+}
+
+input.rdz-input {
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  max-width: 480px;
+  height: 58px;
+
+  border: 2px solid #009df3;
+  box-shadow: 0px 0px 16.9px 1px #0e79f3;
+  border-radius: 11px;
+}
+
+input.rdz-input::placeholder {
+  color: white;
+  opacity: 1;
+  font-family: "Futura PT", sans-serif;
+  font-size: 1em;
+}
+
+/* Magic Email Input Container */
+.rdz-magic-email-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+}
+
+/* Error Message */
+.rdz-magic-email-error {
+  color: red;
+}
+
+/* Or Sign Up Using Text */
+.rdz-sign-up-text {
+  font-family: "Futura PT", sans-serif;
+  font-size: 1.2em;
+  font-weight: 400;
+}
+
+/* Icon Button (Rounded) */
+.rdz-icon-button {
+  width: 55px;
+  height: 55px;
+  border-radius: 50%;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    transform 0.2s ease,
+    filter 0.2s ease;
+}
+
+.rdz-icon-button img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.rdz-icon-button:hover {
+  transform: scale(1.1);
+  filter: brightness(1.1);
+}
+
+.rdz-icon-button:active {
+  transform: scale(0.95);
+}
+
+.rdz-icon-button-disabled,
+.rdz-icon-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  filter: grayscale(100%);
+  pointer-events: none;
+}
+
+.rdz-icon-button-disabled:hover,
+.rdz-icon-button:disabled:hover {
+  transform: none;
+  filter: grayscale(100%);
+}
+
+/* Magic Email Button */
+.rdz-magic-email-button {
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  font-family: "DRUNKWIDE", sans-serif;
+  border: none;
+  color: white;
+  padding: 16px 32px;
+  cursor: pointer;
+  min-height: 135px;
+  margin-bottom: -20px;
+  width: 100%;
+  max-width: 410px;
+  font-size: 22px;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  background-color: transparent;
+  transition:
+    transform 0.2s ease,
+    filter 0.2s ease;
+}
+
+.rdz-magic-email-button:hover {
+  transform: scale(1.05);
+  filter: brightness(1.1);
+}
+
+.rdz-magic-email-button:active {
+  transform: scale(0.98);
+}
+
+/* Logout Button */
+.rdz-logout-button {
+  margin-left: 8px;
+  padding: 12px 24px;
+  background-color: #3b82f6;
+  color: white;
+  border-radius: 6px;
+  border: none;
+  cursor: pointer;
+  font-family: "Futura PT", sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  transition:
+    transform 0.2s ease,
+    filter 0.2s ease;
+}
+
+.rdz-logout-button:hover {
+  transform: scale(1.05);
+  filter: brightness(1.1);
+}
+
+.rdz-logout-button:active {
+  transform: scale(0.98);
+}

package/package.json

@@ -1,58 +1,64 @@
 {
   "name": "@redzone/taunt-logins-ui-react",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
+  "main": "./dist/es/index.js",
+  "module": "./dist/es/index.js",
+  "types": "./dist/es/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/es/index.d.ts",
+        "default": "./dist/es/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
+      }
+    },
+    "./dist/styling.css": {
+      "import": "./dist/styling.css",
+      "require": "./dist/styling.css"
+    }
+  },
   "scripts": {
-    "dev": "vite",
-    "build": "tsc --project tsconfig.lib.json && vite build --config vite.config.lib.ts",
-    "build:web": "tsc && vite build",
-    "prebuild": "npm run clean",
-    "prebuild:web": "npm run clean",
-    "clean": "rm -rf dist webbuild",
+    "build": "bunchee",
+    "dev": "bunchee --watch",
+    "copy:styles": "cp src/lib/styling.css dist/styling.css",
+    "pack": "npm pack",
+    "postbuild": "npm run copy:styles",
+    "clean": "rm -rf dist",
     "lint": "eslint .",
-    "preview": "vite preview",
     "prenpm:publish": "npm run build",
     "npm:publish": "npm publish --access public",
     "fb:deploy": "firebase deploy --only hosting:dev"
   },
-  "main": "./dist/taunt-logins-ui-react.umd.js",
-  "module": "./dist/taunt-logins-ui-react.js",
-  "types": "./dist/taunt-logins-ui-react.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/taunt-logins-ui-react.js",
-      "require": "./dist/taunt-logins-ui-react.umd.js"
-    }
-  },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^7.9.3"
+    "react": "*"
+  },
+  "dependencies": {
+    "@redzone/taunt-logins": "*"
   },
   "devDependencies": {
+    "@repo/eslint-config": "*",
+    "@repo/typescript-config": "*",
     "@eslint/js": "^9.36.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
     "@types/chrome": "^0.1.21",
     "@types/node": "^24.6.0",
-    "@types/react": "^19.1.16",
-    "@types/react-dom": "^19.1.9",
-    "@vitejs/plugin-react": "^5.0.4",
-    "@vitejs/plugin-react-swc": "^4.1.0",
-    "eslint": "^9.36.0",
+    "@types/react": "*",
+    "bunchee": "latest",
+    "react": "latest",
+    "eslint": "latest",
+    "prettier": "latest",
+    "prettier-config-custom": "*",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.22",
     "globals": "^16.4.0",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.45.0",
-    "vite": "^7.1.9",
-    "vite-plugin-css-injected-by-js": "^3.5.2",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-ts": "^1.3.2-1"
+    "typescript-eslint": "^8.45.0"
   },
   "files": [
     "dist"
-  ],
-  "dependencies": {
-    "@redzone/taunt-logins": "^0.0.4"
-  }
+  ]
 }

package/README.md

@@ -1,73 +0,0 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## React Compiler
-
-The React Compiler is currently not compatible with SWC. See [this issue](https://github.com/vitejs/vite-plugin-react/issues/428) for tracking the progress.
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```

package/dist/LoadingView.d.ts

@@ -1 +0,0 @@
-export declare function LoadingView(): import("react/jsx-runtime").JSX.Element;

package/dist/LoginUIComplete.d.ts

@@ -1,6 +0,0 @@
-import { LoginComponentProps } from '.';
-type LoginUICompleteProps = LoginComponentProps & {
-    className?: string;
-};
-export declare const LoginUIComplete: ({ className, ...loginProps }: LoginUICompleteProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/LoginView.d.ts

@@ -1,41 +0,0 @@
-import { CoinbaseButtonProps } from './coinbase';
-import { MagicEmailProps } from './magic';
-import { MetaButtonProps } from './meta';
-import { MetaMaskButtonProps } from './metamask';
-import { TelegramButtonProps } from './telegram';
-export type LoginProvider = "email" | "metamask" | "telegram" | "meta" | "coinbase";
-export interface LoginComponentProps {
-    /** Array of login providers to display. If not provided, shows all providers */
-    providers?: LoginProvider[];
-    /** Whether to show the email/magic link login */
-    showEmail?: boolean;
-    /** If true, show all providers but disable unsupported ones. If false, hide unsupported providers */
-    showDisabled?: boolean;
-    /** Custom text for the divider between email and social logins */
-    dividerText?: string;
-    /** Gap between provider buttons in pixels */
-    providerGap?: number;
-    /** Whether to show terms and privacy links (default: false) */
-    showTerms?: boolean;
-    /** Terms of Service text content (if provided, will show in built-in modal) */
-    termsContent?: string;
-    /** Privacy Policy text content (if provided, will show in built-in modal) */
-    privacyContent?: string;
-    /** Custom terms of service click handler (use if you want custom modal handling) */
-    onTermsClick?: () => void;
-    /** Custom privacy policy click handler (use if you want custom modal handling) */
-    onPrivacyClick?: () => void;
-    /** Custom modal component to use for displaying terms/privacy (optional) */
-    ModalComponent?: React.ComponentType<{
-        title: string;
-        content: string;
-        onClose: () => void;
-    }>;
-    /** Callback when email is entered (for custom handling) */
-    magicEmailProps?: MagicEmailProps;
-    coinbaseProps?: CoinbaseButtonProps;
-    metamaskProps?: MetaMaskButtonProps;
-    metaProps?: MetaButtonProps;
-    telegramProps?: TelegramButtonProps;
-}
-export declare const LoginView: ({ providers, showEmail, showDisabled, dividerText, providerGap, showTerms, termsContent, privacyContent, onTermsClick, onPrivacyClick, ModalComponent, magicEmailProps, coinbaseProps, metamaskProps, metaProps, telegramProps }: LoginComponentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ModalView.d.ts

@@ -1,7 +0,0 @@
-interface ModalProps {
-    title: string;
-    content: string;
-    onClose: () => void;
-}
-export declare function ModalView({ title, content, onClose }: ModalProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/coinbase.d.ts

@@ -1,5 +0,0 @@
-export interface CoinbaseButtonProps {
-    openCoinbase?: () => void;
-    disabled?: boolean;
-}
-export declare const CoinbaseButton: ({ openCoinbase, disabled }: CoinbaseButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -1,11 +0,0 @@
-export * from './coinbase';
-export * from './LoadingView';
-export * from './LoginUIComplete';
-export * from './LoginView';
-export * from './magic';
-export * from './meta';
-export * from './metamask';
-export * from './ModalView';
-export * from './tauntContext';
-export * from './tauntProvider';
-export * from './telegram';

package/dist/magic.d.ts

@@ -1,4 +0,0 @@
-export type MagicEmailProps = {
-    onEmail?: (email: string) => void;
-};
-export declare const MagicEmailInput: ({ onEmail }: MagicEmailProps) => import("react/jsx-runtime").JSX.Element;

package/dist/meta.d.ts

@@ -1,5 +0,0 @@
-export interface MetaButtonProps {
-    openMeta?: () => void;
-    disabled?: boolean;
-}
-export declare const MetaButton: ({ openMeta, disabled }: MetaButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/metamask.d.ts

@@ -1,5 +0,0 @@
-export interface MetaMaskButtonProps {
-    openMetamask?: () => void;
-    disabled?: boolean;
-}
-export declare const MetaMaskButton: ({ openMetamask, disabled }: MetaMaskButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/taunt-logins-ui-react.d.ts

@@ -1,2 +0,0 @@
-export * from './index'
-export {}