@olwiba/ui 0.1.14 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.1.14",
+  "version": "0.2.0",
   "private": false,
   "type": "module",
   "sideEffects": false,

package/src/app/AuthSection.tsx

@@ -1,8 +1,19 @@
 'use client';
 
 import * as React from 'react';
-import { Building2, ShieldCheck, Sparkles } from 'lucide-react';
-import { Badge, CardContent, CardDescription, CardHeader, CardTitle, Label, cn } from '@olwiba/cn';
+import { Building2, Loader2, ShieldCheck, Sparkles } from 'lucide-react';
+import {
+  Badge,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  Label,
+  cn,
+} from '@olwiba/cn';
 import { Button } from '../primitives/Button';
 import { Card } from '../primitives/Card';
 import { Input } from '../primitives/Input';
@@ -65,19 +76,34 @@ function SplitAuth({ children, panel }: { children: React.ReactNode; panel?: Rea
 // ─── Shared form slot ─────────────────────────────────────────────────────────
 
 export interface AuthFormProps {
-  /** Controls form title, fields, and footer text. @default 'signin' */
-  mode?: 'signin' | 'signup';
+  /**
+   * Controls form title, fields, and footer text.
+   * - `'signin'` / `'signup'` — email + password
+   * - `'forgot-password'` — email only, sends a reset link
+   * - `'reset-password'` — new password + confirmation
+   * - `'verify'` — one-time code entry (email verification or 2FA)
+   * @default 'signin'
+   */
+  mode?: 'signin' | 'signup' | 'forgot-password' | 'reset-password' | 'verify';
   onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
   onSso?: () => void;
   /** (signin) Link to the sign-up page */
   signUpHref?: string;
-  /** (signup) Link back to the sign-in page */
+  /** (signup / forgot-password / reset-password / verify) Link back to the sign-in page */
   signInHref?: string;
   forgotPasswordHref?: string;
+  /** (verify) Re-sends the one-time code */
+  onResend?: () => void;
+  /** (verify) Address the code was sent to, shown in the description */
+  destination?: string;
+  /** (verify) Number of digits in the code. @default 6 */
+  codeLength?: number;
   /** Brand node — in centered layout renders above the card; in split layout renders inside the card */
   brand?: React.ReactNode;
   /** Error message displayed below the form fields */
   error?: string;
+  /** Positive confirmation message displayed below the form fields (e.g. "Reset link sent") */
+  success?: string;
   /** Disables the submit button and shows a loading label */
   loading?: boolean;
   /** Render prop for links — use to inject framework-native link components (e.g. TanStack Router Link) */
@@ -90,6 +116,14 @@ export interface AuthFormProps {
   defaultPassword?: string;
 }
 
+const authCopy = {
+  signin: { title: 'Sign in', description: 'Enter your email and password to continue.', submit: 'Sign in' },
+  signup: { title: 'Create an account', description: 'Enter your details to create your account.', submit: 'Create account' },
+  'forgot-password': { title: 'Reset your password', description: 'Enter the email on your account and we’ll send you a link to reset your password.', submit: 'Send reset link' },
+  'reset-password': { title: 'Choose a new password', description: 'Your new password must be different from previous passwords.', submit: 'Reset password' },
+  verify: { title: 'Enter your code', description: 'We sent a verification code to your email.', submit: 'Verify' },
+} as const;
+
 function DefaultForm({
   mode = 'signin',
   onSubmit,
@@ -97,8 +131,12 @@ function DefaultForm({
   signUpHref = '#',
   signInHref = '#',
   forgotPasswordHref = '#',
+  onResend,
+  destination,
+  codeLength = 6,
   brand,
   error,
+  success,
   loading,
   renderLink = defaultRenderLink,
   footer,
@@ -106,9 +144,14 @@ function DefaultForm({
   defaultPassword,
 }: AuthFormProps) {
   const isSignUp = mode === 'signup';
+  const isForgotPassword = mode === 'forgot-password';
+  const isResetPassword = mode === 'reset-password';
+  const isVerify = mode === 'verify';
+  const [code, setCode] = React.useState('');
   const hasPrefill = !!(defaultEmail || defaultPassword);
   const prefillStyle = (active: boolean): React.CSSProperties | undefined =>
     active ? { animation: 'auth-prefill 1.6s ease-out 0.35s 1 both' } : undefined;
+  const copy = authCopy[mode];
 
   return (
     <Card className="w-full">
@@ -118,11 +161,11 @@ function DefaultForm({
       )}
       <CardHeader>
         {brand && <div className="mb-2">{brand}</div>}
-        <CardTitle>{isSignUp ? 'Create an account' : 'Sign in'}</CardTitle>
+        <CardTitle>{copy.title}</CardTitle>
         <CardDescription>
-          {isSignUp
-            ? 'Enter your details to create your account.'
-            : 'Enter your email and password to continue.'}
+          {isVerify && destination ? (
+            <>We sent a verification code to <span className="font-medium text-foreground">{destination}</span>.</>
+          ) : copy.description}
         </CardDescription>
       </CardHeader>
       <CardContent className="space-y-4">
@@ -133,66 +176,125 @@ function DefaultForm({
               <Input id="auth-name" name="name" type="text" placeholder="Your name" autoComplete="name" />
             </div>
           )}
-          <div className="space-y-2">
-            <Label htmlFor="auth-email">Email address</Label>
-            <Input
-              id="auth-email"
-              name="email"
-              type="email"
-              placeholder="name@company.com"
-              autoComplete="email"
-              defaultValue={defaultEmail}
-              style={prefillStyle(!!defaultEmail)}
-            />
-          </div>
-          <div className="space-y-2">
-            <div className="flex items-center justify-between">
-              <Label htmlFor="auth-password">Password</Label>
-              {!isSignUp && forgotPasswordHref && renderLink({
-                href: forgotPasswordHref,
-                className: 'text-xs text-muted-foreground underline underline-offset-4 hover:text-foreground',
-                children: 'Forgot password?',
-              })}
+
+          {(mode === 'signin' || mode === 'signup' || isForgotPassword) && (
+            <div className="space-y-2">
+              <Label htmlFor="auth-email">Email address</Label>
+              <Input
+                id="auth-email"
+                name="email"
+                type="email"
+                placeholder="name@company.com"
+                autoComplete="email"
+                defaultValue={defaultEmail}
+                style={prefillStyle(!!defaultEmail)}
+              />
             </div>
-            <Input
-              id="auth-password"
-              name="password"
-              type="password"
-              placeholder="••••••••"
-              autoComplete={isSignUp ? 'new-password' : 'current-password'}
-              defaultValue={defaultPassword}
-              style={prefillStyle(!!defaultPassword)}
-            />
-          </div>
+          )}
+
+          {(mode === 'signin' || mode === 'signup') && (
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="auth-password">Password</Label>
+                {!isSignUp && forgotPasswordHref && renderLink({
+                  href: forgotPasswordHref,
+                  className: 'text-xs text-muted-foreground underline underline-offset-4 hover:text-foreground',
+                  children: 'Forgot password?',
+                })}
+              </div>
+              <Input
+                id="auth-password"
+                name="password"
+                type="password"
+                placeholder="••••••••"
+                autoComplete={isSignUp ? 'new-password' : 'current-password'}
+                defaultValue={defaultPassword}
+                style={prefillStyle(!!defaultPassword)}
+              />
+            </div>
+          )}
+
+          {isResetPassword && (
+            <>
+              <div className="space-y-2">
+                <Label htmlFor="auth-new-password">New password</Label>
+                <Input id="auth-new-password" name="password" type="password" placeholder="••••••••" autoComplete="new-password" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="auth-confirm-password">Confirm password</Label>
+                <Input id="auth-confirm-password" name="confirmPassword" type="password" placeholder="••••••••" autoComplete="new-password" />
+              </div>
+            </>
+          )}
+
+          {isVerify && (
+            <div className="space-y-2">
+              <input type="hidden" name="code" value={code} />
+              <div className="flex justify-center py-2">
+                <InputOTP maxLength={codeLength} value={code} onChange={setCode} containerClassName="justify-center">
+                  <InputOTPGroup>
+                    {Array.from({ length: codeLength }).map((_, i) => (
+                      <InputOTPSlot key={i} index={i} />
+                    ))}
+                  </InputOTPGroup>
+                </InputOTP>
+              </div>
+            </div>
+          )}
+
           {error && (
-            <p className="text-sm font-medium text-destructive">{error}</p>
+            <p role="alert" className="text-sm font-medium text-destructive">{error}</p>
           )}
+          {success && (
+            <p role="status" className="text-sm font-medium text-primary">{success}</p>
+          )}
+
           <div className="flex flex-col gap-2">
-            <Button type="submit" className="w-full" disabled={loading}>
-              {loading ? 'Please wait…' : isSignUp ? 'Create account' : 'Sign in'}
+            <Button type="submit" className="w-full" disabled={loading || (isVerify && code.length < codeLength)}>
+              {loading && <Loader2 className="size-4 animate-spin" />}
+              {loading ? 'Please wait…' : copy.submit}
             </Button>
-            {onSso && (
+            {onSso && (mode === 'signin' || mode === 'signup') && (
               <Button type="button" variant="outline" className="w-full" onClick={onSso} disabled={loading}>
                 Use SSO
               </Button>
             )}
           </div>
         </form>
-        <p className="text-center text-xs text-muted-foreground">
-          {isSignUp ? (
-            <>
-              Already have an account?{' '}
-              {renderLink({ href: signInHref, className: 'text-foreground underline underline-offset-4', children: 'Sign in' })}
-            </>
-          ) : (
-            signUpHref && (
+
+        {isVerify && onResend && (
+          <p className="text-center text-xs text-muted-foreground">
+            Didn&rsquo;t get a code?{' '}
+            <button type="button" onClick={onResend} className="text-foreground underline underline-offset-4">
+              Resend
+            </button>
+          </p>
+        )}
+
+        {(mode === 'signin' || mode === 'signup') && (
+          <p className="text-center text-xs text-muted-foreground">
+            {isSignUp ? (
               <>
-                New here?{' '}
-                {renderLink({ href: signUpHref, className: 'text-foreground underline underline-offset-4', children: 'Create an account' })}
+                Already have an account?{' '}
+                {renderLink({ href: signInHref, className: 'text-foreground underline underline-offset-4', children: 'Sign in' })}
               </>
-            )
-          )}
-        </p>
+            ) : (
+              signUpHref && (
+                <>
+                  New here?{' '}
+                  {renderLink({ href: signUpHref, className: 'text-foreground underline underline-offset-4', children: 'Create an account' })}
+                </>
+              )
+            )}
+          </p>
+        )}
+
+        {(isForgotPassword || isResetPassword || isVerify) && (
+          <p className="text-center text-xs text-muted-foreground">
+            {renderLink({ href: signInHref, className: 'text-foreground underline underline-offset-4', children: 'Back to sign in' })}
+          </p>
+        )}
+
         {footer && <div>{footer}</div>}
       </CardContent>
     </Card>

package/src/app/BillingPanel.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import * as React from 'react';
+import type { ColumnDef } from '@tanstack/react-table';
+import { CreditCard, Download } from 'lucide-react';
+import { Badge, Progress } from '@olwiba/cn';
+import { Button } from '../primitives/Button';
+import { DataTable } from '../components/DataTable';
+import { SettingsSection } from './SettingsSection';
+
+export interface BillingUsageMetric {
+  label: string;
+  used: number;
+  limit: number;
+  unit?: string;
+}
+
+export interface BillingInvoice {
+  id: string;
+  date: string;
+  amount: string;
+  status: 'paid' | 'open' | 'void';
+  downloadUrl?: string;
+}
+
+export interface BillingPaymentMethod {
+  brand: string;
+  last4: string;
+  expiry: string;
+}
+
+export interface BillingPanelProps {
+  planName: string;
+  planPrice?: string;
+  renewalDate?: string;
+  usage?: BillingUsageMetric[];
+  paymentMethod?: BillingPaymentMethod;
+  invoices?: BillingInvoice[];
+  onManagePlan?: () => void;
+  onUpdatePaymentMethod?: () => void;
+  className?: string;
+}
+
+const invoiceStatusVariant = {
+  paid: 'secondary',
+  open: 'outline',
+  void: 'destructive',
+} as const;
+
+/**
+ * In-app billing summary — current plan + usage, payment method, invoice
+ * history. Built from `SettingsSection` rows and `DataTable`, rather than a
+ * one-off billing page each time. Marketing plan comparisons stay in
+ * `PricingSection`/`UpgradePrompt` — this is the account-side view.
+ */
+export function BillingPanel({
+  planName,
+  planPrice,
+  renewalDate,
+  usage,
+  paymentMethod,
+  invoices,
+  onManagePlan,
+  onUpdatePaymentMethod,
+  className,
+}: BillingPanelProps) {
+  // Dates and amounts are display strings — sorting them would be lexicographic, so keep it off
+  const invoiceColumns = React.useMemo<ColumnDef<BillingInvoice>[]>(() => [
+    { accessorKey: 'date', header: 'Date', enableSorting: false },
+    { accessorKey: 'amount', header: 'Amount', enableSorting: false },
+    {
+      accessorKey: 'status',
+      header: 'Status',
+      enableSorting: false,
+      cell: ({ row }) => (
+        <Badge variant={invoiceStatusVariant[row.original.status]} className="capitalize">
+          {row.original.status}
+        </Badge>
+      ),
+    },
+    {
+      id: 'download',
+      header: '',
+      cell: ({ row }) =>
+        row.original.downloadUrl ? (
+          <Button variant="ghost" size="icon" className="size-8" asChild>
+            <a href={row.original.downloadUrl} download>
+              <Download className="size-4" />
+              <span className="sr-only">Download invoice</span>
+            </a>
+          </Button>
+        ) : null,
+      enableSorting: false,
+    },
+  ], []);
+
+  return (
+    <div className={className}>
+      <div className="divide-y divide-border">
+        <SettingsSection title="Current plan" description="Your subscription and usage against plan limits.">
+          <div className="flex flex-wrap items-center justify-between gap-4 rounded-lg border bg-card/60 p-4">
+            <div>
+              <div className="flex items-center gap-2">
+                <p className="text-lg font-semibold">{planName}</p>
+                {planPrice && <Badge variant="secondary">{planPrice}</Badge>}
+              </div>
+              {renewalDate && <p className="mt-1 text-sm text-muted-foreground">Renews {renewalDate}</p>}
+            </div>
+            {onManagePlan && <Button onClick={onManagePlan}>Manage plan</Button>}
+          </div>
+          {usage && usage.length > 0 && (
+            <div className="mt-4 space-y-4">
+              {usage.map((metric) => {
+                const overLimit = metric.limit > 0 && metric.used > metric.limit;
+                const percent = metric.limit > 0 ? Math.min(100, (metric.used / metric.limit) * 100) : 0;
+                return (
+                  <div key={metric.label} className="space-y-1.5">
+                    <div className="flex items-center justify-between text-sm">
+                      <span>{metric.label}</span>
+                      <span className={overLimit ? 'font-medium text-destructive' : 'text-muted-foreground'}>
+                        {metric.used}{metric.unit} / {metric.limit}{metric.unit}
+                      </span>
+                    </div>
+                    <Progress value={percent} className={overLimit ? '[&>div]:bg-destructive' : undefined} />
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </SettingsSection>
+
+        {paymentMethod && (
+          <SettingsSection title="Payment method" description="Used for your subscription renewal.">
+            <div className="flex items-center justify-between gap-4 rounded-lg border bg-card/60 p-4">
+              <div className="flex items-center gap-3">
+                <CreditCard className="size-5 text-muted-foreground" />
+                <p className="text-sm">
+                  <span className="font-medium capitalize">{paymentMethod.brand}</span> ending in {paymentMethod.last4}
+                  <span className="text-muted-foreground"> · expires {paymentMethod.expiry}</span>
+                </p>
+              </div>
+              {onUpdatePaymentMethod && <Button variant="outline" onClick={onUpdatePaymentMethod}>Update</Button>}
+            </div>
+          </SettingsSection>
+        )}
+
+        {invoices && invoices.length > 0 && (
+          <SettingsSection title="Billing history" description="Download past invoices for your records.">
+            <DataTable columns={invoiceColumns} data={invoices} pageSize={5} />
+          </SettingsSection>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/app/OnboardingWizard.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import * as React from 'react';
+import { Check, Loader2 } from 'lucide-react';
+import { cn } from '@olwiba/cn';
+import { Button } from '../primitives/Button';
+
+export interface OnboardingStep {
+  id: string;
+  title: string;
+  description?: string;
+  content: React.ReactNode;
+  /** Runs before advancing past this step. Return `false`/an error string to block. */
+  onNext?: () => boolean | string | Promise<boolean | string>;
+}
+
+export interface OnboardingWizardProps {
+  steps: OnboardingStep[];
+  /** Called after the last step's `onNext` succeeds. */
+  onComplete?: () => void;
+  onStepChange?: (index: number) => void;
+  /** Controlled current step index — omit to let the component manage it internally. */
+  step?: number;
+  onStepIndexChange?: (index: number) => void;
+  completeLabel?: string;
+  className?: string;
+}
+
+/**
+ * Stateful multi-step onboarding flow. One component driven by a `steps`
+ * prop — swap the array to reshape the flow rather than hand-building a
+ * new wizard per feature.
+ */
+export function OnboardingWizard({
+  steps,
+  onComplete,
+  onStepChange,
+  step: stepProp,
+  onStepIndexChange,
+  completeLabel = 'Finish',
+  className,
+}: OnboardingWizardProps) {
+  const [internalStep, setInternalStep] = React.useState(0);
+  const [error, setError] = React.useState<string | null>(null);
+  const [pending, setPending] = React.useState(false);
+  const index = stepProp ?? internalStep;
+  const current = steps[index];
+  const isLast = index === steps.length - 1;
+
+  const goTo = (next: number) => {
+    setError(null);
+    if (stepProp === undefined) setInternalStep(next);
+    onStepIndexChange?.(next);
+    onStepChange?.(next);
+  };
+
+  const handleNext = async () => {
+    if (current.onNext) {
+      setPending(true);
+      let result: boolean | string;
+      try {
+        result = await current.onNext();
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Something went wrong. Please try again.');
+        return;
+      } finally {
+        setPending(false);
+      }
+      if (result === false) { setError('Please complete this step before continuing.'); return; }
+      if (typeof result === 'string') { setError(result); return; }
+    }
+    if (isLast) {
+      onComplete?.();
+    } else {
+      goTo(index + 1);
+    }
+  };
+
+  const handleBack = () => {
+    if (index > 0) goTo(index - 1);
+  };
+
+  return (
+    <div className={cn('w-full max-w-lg space-y-8', className)}>
+      <ol className="flex items-center" aria-label="Progress">
+        {steps.map((step, i) => (
+          <li
+            key={step.id}
+            aria-current={i === index ? 'step' : undefined}
+            className={cn('flex items-center', i !== steps.length - 1 && 'flex-1')}
+          >
+            <div
+              className={cn(
+                'flex size-8 shrink-0 items-center justify-center rounded-full border text-xs font-medium',
+                i < index ? 'border-primary bg-primary text-primary-foreground' : i === index ? 'border-primary text-primary' : 'border-border text-muted-foreground',
+              )}
+            >
+              {i < index ? <Check className="size-4" /> : i + 1}
+              <span className="sr-only">{step.title}{i < index ? ' (completed)' : ''}</span>
+            </div>
+            {i !== steps.length - 1 && (
+              <div className={cn('mx-2 h-px flex-1', i < index ? 'bg-primary' : 'bg-border')} />
+            )}
+          </li>
+        ))}
+      </ol>
+
+      <div className="space-y-4">
+        <div>
+          <h2 className="text-xl font-semibold tracking-tight">{current.title}</h2>
+          {current.description && <p className="mt-1 text-sm text-muted-foreground">{current.description}</p>}
+        </div>
+        <div>{current.content}</div>
+        {error && <p role="alert" className="text-sm font-medium text-destructive">{error}</p>}
+      </div>
+
+      <div className="flex items-center justify-between">
+        <Button type="button" variant="ghost" onClick={handleBack} disabled={index === 0 || pending}>
+          Back
+        </Button>
+        <Button type="button" onClick={handleNext} disabled={pending}>
+          {pending && <Loader2 className="size-4 animate-spin" />}
+          {pending ? 'Please wait…' : isLast ? completeLabel : 'Continue'}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/app/SettingsSection.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { cn } from '@olwiba/cn';
+
+export interface SettingsSectionProps {
+  title: string;
+  description?: string;
+  /** Form fields, buttons, or any content for the right-hand column — e.g. a `<form>`. */
+  children: React.ReactNode;
+  /** Marks the section as a destructive action (e.g. "Delete account") — renders the title in the destructive color. @default false */
+  danger?: boolean;
+  className?: string;
+}
+
+/**
+ * One title+description+content row for a settings page. Stack a few inside
+ * a `<div className="divide-y divide-border">` to build a full settings
+ * page — one block reused per row, rather than a bespoke layout each time.
+ */
+export function SettingsSection({ title, description, children, danger = false, className }: SettingsSectionProps) {
+  return (
+    <div className={cn('grid grid-cols-1 gap-x-8 gap-y-6 py-10 sm:grid-cols-3', className)}>
+      <div>
+        <h2 className={cn('text-base font-semibold', danger && 'text-destructive')}>{title}</h2>
+        {description && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
+      </div>
+      <div className="sm:col-span-2">{children}</div>
+    </div>
+  );
+}