@slyxup/ui 0.2.15 → 0.3.0

package/src/components/BillingPortal/BillingPortal.tsx

@@ -1,184 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { injectStyles } from '../../styles';
-
-interface Subscription {
-  id: string;
-  status: string;
-  currentPeriodEnd: string | null;
-  cancelAtPeriodEnd: boolean;
-}
-interface Invoice {
-  id: string;
-  amount: number;
-  currency: string;
-  status: 'paid' | 'pending' | 'overdue' | 'refunded';
-  billedAt: string | null;
-}
-
-export interface BillingPortalProps {
-  subscription: Subscription | null;
-  invoices: Invoice[];
-  onCancel?: () => void;
-}
-
-/** Current plan + invoices table */
-export function BillingPortal({
-  subscription,
-  invoices,
-  onCancel,
-}: BillingPortalProps) {
-  injectStyles();
-  if (!subscription) {
-    return (
-      <div className="slx-card">
-        <h3 style={{ fontSize: 16, fontWeight: 600 }}>
-          No active subscription
-        </h3>
-        <p style={{ fontSize: 13.5, color: 'var(--slx-muted)', marginTop: 6 }}>
-          You don&apos;t have a subscription yet. Choose a plan to get started.
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
-      {/* Plan card */}
-      <div className="slx-card">
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-          }}
-        >
-          <div>
-            <h3 style={{ fontSize: 15, fontWeight: 600 }}>Current plan</h3>
-            <p
-              style={{ fontSize: 13, color: 'var(--slx-muted)', marginTop: 4 }}
-            >
-              Status:{' '}
-              <span
-                style={{
-                  fontWeight: 650,
-                  color:
-                    subscription.status === 'active' ||
-                    subscription.status === 'trialing'
-                      ? '#34d399'
-                      : subscription.status === 'past_due'
-                        ? 'var(--slx-danger)'
-                        : 'var(--slx-muted)',
-                }}
-              >
-                {subscription.status}
-              </span>
-            </p>
-            {subscription.currentPeriodEnd && (
-              <p
-                style={{
-                  fontSize: 12.5,
-                  color: 'var(--slx-muted)',
-                  marginTop: 4,
-                }}
-              >
-                Renews{' '}
-                {new Date(subscription.currentPeriodEnd).toLocaleDateString()}
-                {subscription.cancelAtPeriodEnd
-                  ? ' (cancels at period end)'
-                  : ''}
-              </p>
-            )}
-          </div>
-          {subscription.status !== 'canceled' &&
-            !subscription.cancelAtPeriodEnd &&
-            onCancel && (
-              <button
-                type="button"
-                onClick={onCancel}
-                style={{
-                  fontSize: 13,
-                  fontWeight: 550,
-                  background: 'transparent',
-                  border: '1px solid var(--slx-border)',
-                  borderRadius: 'var(--slx-radius)',
-                  padding: '8px 14px',
-                  cursor: 'pointer',
-                  color: 'var(--slx-danger)',
-                }}
-              >
-                Cancel
-              </button>
-            )}
-        </div>
-      </div>
-
-      {/* Invoices */}
-      {invoices.length > 0 && (
-        <div className="slx-card">
-          <h3 style={{ fontSize: 15, fontWeight: 600, marginBottom: 12 }}>
-            Invoices
-          </h3>
-          <table
-            style={{ width: '100%', fontSize: 13, borderCollapse: 'collapse' }}
-          >
-            <thead>
-              <tr
-                style={{
-                  borderBottom: '1px solid var(--slx-border)',
-                  textAlign: 'left',
-                }}
-              >
-                <th style={{ padding: '6px 0', fontWeight: 550 }}>Date</th>
-                <th style={{ padding: '6px 0', fontWeight: 550 }}>Amount</th>
-                <th style={{ padding: '6px 0', fontWeight: 550 }}>Status</th>
-              </tr>
-            </thead>
-            <tbody>
-              {invoices.map((inv) => (
-                <tr
-                  key={inv.id}
-                  style={{ borderBottom: '1px solid var(--slx-border)' }}
-                >
-                  <td style={{ padding: '8px 0' }}>
-                    {inv.billedAt
-                      ? new Date(inv.billedAt).toLocaleDateString()
-                      : '—'}
-                  </td>
-                  <td style={{ padding: '8px 0' }}>
-                    ${(inv.amount / 100).toFixed(2)} {inv.currency}
-                  </td>
-                  <td style={{ padding: '8px 0' }}>
-                    <span
-                      style={{
-                        fontSize: 11.5,
-                        fontWeight: 600,
-                        padding: '2px 8px',
-                        borderRadius: 999,
-                        background:
-                          inv.status === 'paid'
-                            ? 'rgba(52,211,153,.1)'
-                            : inv.status === 'overdue'
-                              ? 'rgba(214,69,80,.1)'
-                              : 'rgba(108,108,232,.08)',
-                        color:
-                          inv.status === 'paid'
-                            ? '#34d399'
-                            : inv.status === 'overdue'
-                              ? 'var(--slx-danger)'
-                              : 'var(--slx-accent)',
-                      }}
-                    >
-                      {inv.status}
-                    </span>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/EmailVerification/EmailVerification.tsx

@@ -1,182 +0,0 @@
-import { type FormEvent, useEffect, useState } from 'react';
-import { CheckIcon, KeyholeMark } from '../../icons';
-import { injectStyles } from '../../styles';
-
-export interface EmailVerificationProps {
-  /** Verification token (from email link ?token=...). If absent, shows resend form. */
-  token?: string;
-  apiUrl?: string;
-  onSuccess?: () => void;
-}
-
-/** Verify an email with the emailed token, or request a new link. */
-export function EmailVerification({
-  token,
-  apiUrl,
-  onSuccess,
-}: EmailVerificationProps) {
-  injectStyles();
-  const [status, setStatus] = useState<
-    'verifying' | 'success' | 'error' | 'resend'
-  >(token ? 'verifying' : 'resend');
-  const [message, setMessage] = useState<string>('');
-  const [email, setEmail] = useState('');
-  const [busy, setBusy] = useState(false);
-
-  useEffect(() => {
-    if (!token) return;
-    let cancelled = false;
-    (async () => {
-      try {
-        const base = (
-          apiUrl ??
-          process.env.NEXT_PUBLIC_SLYXUP_API_URL ??
-          'https://auth.slyxup.online'
-        ).replace(/\/$/, '');
-        const res = await fetch(`${base}/v1/verification/verify`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ token }),
-        });
-        if (cancelled) return;
-        if (res.ok) {
-          setStatus('success');
-          setTimeout(() => onSuccess?.(), 1800);
-        } else {
-          const data = await res
-            .json()
-            .catch(() => ({ error: 'Invalid or expired link' }));
-          setMessage(data.error ?? 'Invalid or expired link');
-          setStatus('error');
-        }
-      } catch {
-        if (!cancelled) {
-          setMessage('Network problem. Try again.');
-          setStatus('error');
-        }
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [token, apiUrl, onSuccess]);
-
-  async function resend(e: FormEvent) {
-    e.preventDefault();
-    setBusy(true);
-    try {
-      const base = (
-        apiUrl ??
-        process.env.NEXT_PUBLIC_SLYXUP_API_URL ??
-        'https://auth.slyxup.online'
-      ).replace(/\/$/, '');
-      await fetch(`${base}/v1/verification/resend`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email }),
-      });
-      setMessage(
-        'If that account exists, a new verification link is on its way.'
-      );
-    } catch {
-      setMessage('Network problem. Try again.');
-    } finally {
-      setBusy(false);
-    }
-  }
-
-  return (
-    <div className="slx-card">
-      <div className="slx-mark">
-        <KeyholeMark />
-      </div>
-
-      {status === 'verifying' && (
-        <>
-          <h1 className="slx-title">Verifying your email…</h1>
-          <p className="slx-subtitle">One moment while we confirm.</p>
-        </>
-      )}
-
-      {status === 'success' && (
-        <>
-          <div className="slx-success-icon">
-            <CheckIcon />
-          </div>
-          <h1 className="slx-title" style={{ textAlign: 'center' }}>
-            Email verified
-          </h1>
-          <p className="slx-subtitle" style={{ textAlign: 'center' }}>
-            You&apos;re all set. Redirecting…
-          </p>
-        </>
-      )}
-
-      {status === 'error' && (
-        <>
-          <h1 className="slx-title">Link didn&apos;t work</h1>
-          {message && (
-            <p className="slx-error-text" role="alert">
-              {message}
-            </p>
-          )}
-          <p className="slx-subtitle">Request a fresh link below.</p>
-          <form onSubmit={resend}>
-            <div className="slx-field">
-              <label className="slx-label" htmlFor="slx-verify-email">
-                Email
-              </label>
-              <input
-                id="slx-verify-email"
-                className="slx-input"
-                type="email"
-                placeholder="you@example.com"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                required
-              />
-            </div>
-            <button className="slx-btn" type="submit" disabled={busy}>
-              {busy && <span className="slx-spinner" aria-hidden="true" />}
-              {busy ? 'Sending…' : 'Resend verification email'}
-            </button>
-          </form>
-        </>
-      )}
-
-      {status === 'resend' && (
-        <>
-          <h1 className="slx-title">Verify your email</h1>
-          <p className="slx-subtitle">
-            Enter your email and we&apos;ll send a verification link.
-          </p>
-          {message && (
-            <p className="slx-hint" style={{ marginBottom: 12 }}>
-              {message}
-            </p>
-          )}
-          <form onSubmit={resend}>
-            <div className="slx-field">
-              <label className="slx-label" htmlFor="slx-verify-email2">
-                Email
-              </label>
-              <input
-                id="slx-verify-email2"
-                className="slx-input"
-                type="email"
-                placeholder="you@example.com"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                required
-              />
-            </div>
-            <button className="slx-btn" type="submit" disabled={busy}>
-              {busy && <span className="slx-spinner" aria-hidden="true" />}
-              {busy ? 'Sending…' : 'Send verification link'}
-            </button>
-          </form>
-        </>
-      )}
-    </div>
-  );
-}

package/src/components/ForgotPassword/ForgotPassword.tsx

@@ -1,124 +0,0 @@
-import { SlyxupClient } from '@slyxup/core';
-import { type FormEvent, useEffect, useState } from 'react';
-import { CheckIcon, KeyholeMark } from '../../icons';
-import { injectStyles } from '../../styles';
-
-export interface ForgotPasswordProps {
-  apiUrl?: string;
-  onSuccess?: () => void;
-  onBackToSignIn?: () => void;
-}
-
-/** Request a password-reset email. */
-export function ForgotPassword({
-  apiUrl,
-  onSuccess,
-  onBackToSignIn,
-}: ForgotPasswordProps) {
-  injectStyles();
-  const [email, setEmail] = useState('');
-  const [sent, setSent] = useState(false);
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (error) {
-      const t = setTimeout(() => setError(null), 4000);
-      return () => clearTimeout(t);
-    }
-  }, [error]);
-
-  async function onSubmit(e: FormEvent) {
-    e.preventDefault();
-    setBusy(true);
-    setError(null);
-    try {
-      await fetch(
-        `${(apiUrl ?? process.env.NEXT_PUBLIC_SLYXUP_API_URL ?? 'https://auth.slyxup.online').replace(/\/$/, '')}/v1/verification/password/forgot`,
-        {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ email }),
-        }
-      );
-      setSent(true); // always success — never reveal account existence
-      onSuccess?.();
-    } catch {
-      setError('Network problem. Check your connection and try again.');
-    } finally {
-      setBusy(false);
-    }
-    void SlyxupClient; // tree-shake guard
-  }
-
-  if (sent) {
-    return (
-      <div className="slx-card">
-        <div className="slx-success-icon">
-          <CheckIcon />
-        </div>
-        <h1 className="slx-title" style={{ textAlign: 'center' }}>
-          Check your email
-        </h1>
-        <p className="slx-subtitle" style={{ textAlign: 'center' }}>
-          If an account exists for {email}, a reset link is on its way.
-        </p>
-        {onBackToSignIn && (
-          <p className="slx-footer">
-            <button type="button" className="slx-link" onClick={onBackToSignIn}>
-              Back to sign in
-            </button>
-          </p>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <div className={`slx-card${error ? ' slx-card-error' : ''}`}>
-      <div className="slx-mark">
-        <KeyholeMark />
-      </div>
-      <h1 className="slx-title">Reset your password</h1>
-      <p className="slx-subtitle">
-        Enter your email and we&apos;ll send you a reset link.
-      </p>
-
-      {error && (
-        <p className="slx-error-text" role="alert">
-          {error}
-        </p>
-      )}
-
-      <form onSubmit={onSubmit}>
-        <div className="slx-field">
-          <label className="slx-label" htmlFor="slx-forgot-email">
-            Email
-          </label>
-          <input
-            id="slx-forgot-email"
-            className="slx-input"
-            type="email"
-            autoComplete="email"
-            placeholder="you@example.com"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            required
-          />
-        </div>
-        <button className="slx-btn" type="submit" disabled={busy}>
-          {busy && <span className="slx-spinner" aria-hidden="true" />}
-          {busy ? 'Sending…' : 'Send reset link'}
-        </button>
-      </form>
-
-      {onBackToSignIn && (
-        <p className="slx-footer">
-          <button type="button" className="slx-link" onClick={onBackToSignIn}>
-            Back to sign in
-          </button>
-        </p>
-      )}
-    </div>
-  );
-}

package/src/components/PricingTable/PricingTable.tsx

@@ -1,157 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { injectStyles } from '../../styles';
-
-interface Plan {
-  id: string;
-  name: string;
-  amount: number;
-  currency: string;
-  interval: 'month' | 'year';
-  trialDays: number | null;
-  features: string[] | null;
-  isPopular: boolean;
-}
-
-export interface PricingTableProps {
-  plans: Plan[];
-  onSelect?: (plan: Plan) => void;
-  loading?: boolean;
-}
-
-/** Clean pricing grid with popular badge */
-export function PricingTable({ plans, onSelect, loading }: PricingTableProps) {
-  injectStyles();
-  if (loading) {
-    return (
-      <div
-        className="slx-pricing"
-        style={{
-          display: 'grid',
-          gridTemplateColumns: `repeat(${Math.min(plans.length, 3)}, 1fr)`,
-          gap: 16,
-        }}
-      >
-        {[1, 2, 3].map((i) => (
-          <div
-            key={i}
-            className="slx-card"
-            style={{ minHeight: 320 }}
-            aria-busy="true"
-          />
-        ))}
-      </div>
-    );
-  }
-
-  return (
-    <div
-      style={{
-        display: 'grid',
-        gridTemplateColumns: `repeat(${Math.min(plans.length, 3)}, 1fr)`,
-        gap: 16,
-      }}
-    >
-      {plans.map((plan) => (
-        <div
-          key={plan.id}
-          className={`slx-card${plan.isPopular ? ' slx-card-popular' : ''}`}
-          style={{
-            position: plan.isPopular ? 'relative' : undefined,
-            borderColor: plan.isPopular ? 'var(--slx-accent)' : undefined,
-            display: 'flex',
-            flexDirection: 'column',
-          }}
-        >
-          {plan.isPopular && (
-            <span
-              style={{
-                position: 'absolute',
-                top: -11,
-                right: 20,
-                fontSize: 10.5,
-                fontFamily: 'var(--slx-mono)',
-                background:
-                  'linear-gradient(135deg, var(--slx-accent), #8b5cf6)',
-                color: '#fff',
-                padding: '3px 10px',
-                borderRadius: 999,
-              }}
-            >
-              POPULAR
-            </span>
-          )}
-          <h3
-            style={{ fontSize: 15, fontWeight: 550, color: 'var(--slx-muted)' }}
-          >
-            {plan.name}
-          </h3>
-          <div style={{ margin: '8px 0 2px' }}>
-            <span
-              style={{
-                fontSize: 38,
-                fontWeight: 750,
-                letterSpacing: '-0.03em',
-                fontFamily: 'var(--slx-display)',
-              }}
-            >
-              ${(plan.amount / 100).toFixed(0)}
-            </span>
-            <span style={{ fontSize: 14, color: 'var(--slx-muted)' }}>
-              /{plan.interval}
-            </span>
-          </div>
-          {plan.trialDays ? (
-            <p
-              style={{
-                fontSize: 12,
-                color: 'var(--slx-accent)',
-                marginBottom: 4,
-              }}
-            >
-              {plan.trialDays} day free trial
-            </p>
-          ) : (
-            <p style={{ fontSize: 12, color: 'transparent', marginBottom: 4 }}>
-              &nbsp;
-            </p>
-          )}
-          <ul style={{ listStyle: 'none', margin: '14px 0 22px', flex: 1 }}>
-            {((plan.features ?? []) as string[]).map((f: string) => (
-              <li
-                key={f}
-                style={{
-                  fontSize: 13.5,
-                  color: 'var(--slx-ink)',
-                  padding: '5px 0 5px 24px',
-                  position: 'relative',
-                }}
-              >
-                <span
-                  style={{
-                    position: 'absolute',
-                    left: 0,
-                    color: '#34d399',
-                    fontWeight: 700,
-                  }}
-                >
-                  &#10003;
-                </span>{' '}
-                {f}
-              </li>
-            ))}
-          </ul>
-          <button
-            type="button"
-            className="slx-btn"
-            onClick={() => onSelect?.(plan)}
-            disabled={loading}
-          >
-            Get started
-          </button>
-        </div>
-      ))}
-    </div>
-  );
-}