@caffeinebounce/identity 0.12.2 → 0.12.3

package/dist/index.d.mts

@@ -484,6 +484,8 @@ interface DeleteAccountSectionProps {
 declare function DeleteAccountSection({ createClient, email, retentionDays, }: DeleteAccountSectionProps): react_jsx_runtime.JSX.Element;
 
 interface EmailSectionProps {
+    /** Render the change action as a compact pencil icon instead of a text label */
+    changeButtonPresentation?: "label" | "icon";
     /** Function to create a Supabase client */
     createClient: CreateClientFn;
     /** User ID (reserved for future use) */
@@ -495,7 +497,7 @@ interface EmailSectionProps {
     /** Callback when email is changed */
     onEmailChanged: (newEmail: string) => void;
 }
-declare function EmailSection({ createClient, userId: _userId, email, isVerified, onEmailChanged, }: EmailSectionProps): react_jsx_runtime.JSX.Element;
+declare function EmailSection({ changeButtonPresentation, createClient, userId: _userId, email, isVerified, onEmailChanged, }: EmailSectionProps): react_jsx_runtime.JSX.Element;
 
 interface LinkedAccountsSectionProps {
     /** Function to create a Supabase client */

package/dist/index.d.ts

@@ -484,6 +484,8 @@ interface DeleteAccountSectionProps {
 declare function DeleteAccountSection({ createClient, email, retentionDays, }: DeleteAccountSectionProps): react_jsx_runtime.JSX.Element;
 
 interface EmailSectionProps {
+    /** Render the change action as a compact pencil icon instead of a text label */
+    changeButtonPresentation?: "label" | "icon";
     /** Function to create a Supabase client */
     createClient: CreateClientFn;
     /** User ID (reserved for future use) */
@@ -495,7 +497,7 @@ interface EmailSectionProps {
     /** Callback when email is changed */
     onEmailChanged: (newEmail: string) => void;
 }
-declare function EmailSection({ createClient, userId: _userId, email, isVerified, onEmailChanged, }: EmailSectionProps): react_jsx_runtime.JSX.Element;
+declare function EmailSection({ changeButtonPresentation, createClient, userId: _userId, email, isVerified, onEmailChanged, }: EmailSectionProps): react_jsx_runtime.JSX.Element;
 
 interface LinkedAccountsSectionProps {
     /** Function to create a Supabase client */

package/dist/index.js

@@ -3786,6 +3786,7 @@ function useVerificationFlow({
   };
 }
 function EmailSection({
+  changeButtonPresentation = "label",
   createClient,
   userId: _userId,
   email,
@@ -3813,6 +3814,26 @@ function EmailSection({
   const handleStartChange = () => {
     openEntryStep();
   };
+  const changeButton = changeButtonPresentation === "icon" ? /* @__PURE__ */ jsxRuntime.jsx(
+    primitives.Button,
+    {
+      "aria-label": "Change email",
+      onClick: handleStartChange,
+      size: "icon-sm",
+      type: "button",
+      variant: "outline",
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PencilLine, { "aria-hidden": "true", className: "size-4" })
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    primitives.Button,
+    {
+      onClick: handleStartChange,
+      size: "sm",
+      type: "button",
+      variant: "outline",
+      children: "Change"
+    }
+  );
   const handleSendCode = async () => {
     if (!newEmail || !newEmail.includes("@")) {
       setError("Please enter a valid email address");
@@ -3892,16 +3913,10 @@ function EmailSection({
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: email })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      primitives.Button,
-      {
-        type: "button",
-        variant: "outline",
-        size: "sm",
-        onClick: handleStartChange,
-        children: "Change"
-      }
-    ),
+    changeButtonPresentation === "icon" ? /* @__PURE__ */ jsxRuntime.jsx(primitives.TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxRuntime.jsxs(primitives.Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(primitives.TooltipTrigger, { asChild: true, children: changeButton }),
+      /* @__PURE__ */ jsxRuntime.jsx(primitives.TooltipContent, { side: "top", children: "Change email" })
+    ] }) }) : changeButton,
     /* @__PURE__ */ jsxRuntime.jsx(primitives.Dialog, { open: dialogOpen, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(primitives.DialogContent, { className: "sm:max-w-md", children: [
       step === "enter-email" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(primitives.DialogHeader, { children: [

package/dist/index.mjs

@@ -1,8 +1,8 @@
 "use client";
-import { cn, FieldLabel, Input, Button, PasswordInput, defaultPasswordRules, FieldError, PasswordRequirements, Checkbox, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Badge, Tooltip, TooltipTrigger, TooltipContent, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Label, DialogFooter, Spinner, extendedPasswordRules, VerificationCodeInput, Tabs, TabsList, TabsTrigger, TabsContent, InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@caffeinebounce/ui/primitives';
+import { cn, FieldLabel, Input, Button, PasswordInput, defaultPasswordRules, FieldError, PasswordRequirements, Checkbox, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Badge, Tooltip, TooltipTrigger, TooltipContent, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Label, DialogFooter, TooltipProvider, Spinner, extendedPasswordRules, VerificationCodeInput, Tabs, TabsList, TabsTrigger, TabsContent, InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@caffeinebounce/ui/primitives';
 import { useSearchParams, useRouter } from 'next/navigation';
 import { createContext, useState, useEffect, useCallback, useRef, useMemo, useContext } from 'react';
-import { ArrowLeft, AlertCircle, Loader2, Shield, AlertTriangle, Smartphone, Check, Mail, KeyRound, Info, Trash2, CheckCircle2, Link2, Unlink, Phone, Copy, Download, Lightbulb, X } from 'lucide-react';
+import { ArrowLeft, AlertCircle, Loader2, Shield, AlertTriangle, Smartphone, Check, Mail, KeyRound, Info, Trash2, CheckCircle2, Link2, Unlink, Phone, Copy, Download, Lightbulb, X, PencilLine } from 'lucide-react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { getClientOrigin, generateDeviceFingerprint, formatPhoneInput, isPreviewEnvironment, formatDate } from '@caffeinebounce/shared-utils';
 export { generateDeviceFingerprint, generateSecureToken, getClientIP, getGeolocationFromIP, hashString } from '@caffeinebounce/shared-utils';
@@ -3781,6 +3781,7 @@ function useVerificationFlow({
   };
 }
 function EmailSection({
+  changeButtonPresentation = "label",
   createClient,
   userId: _userId,
   email,
@@ -3808,6 +3809,26 @@ function EmailSection({
   const handleStartChange = () => {
     openEntryStep();
   };
+  const changeButton = changeButtonPresentation === "icon" ? /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": "Change email",
+      onClick: handleStartChange,
+      size: "icon-sm",
+      type: "button",
+      variant: "outline",
+      children: /* @__PURE__ */ jsx(PencilLine, { "aria-hidden": "true", className: "size-4" })
+    }
+  ) : /* @__PURE__ */ jsx(
+    Button,
+    {
+      onClick: handleStartChange,
+      size: "sm",
+      type: "button",
+      variant: "outline",
+      children: "Change"
+    }
+  );
   const handleSendCode = async () => {
     if (!newEmail || !newEmail.includes("@")) {
       setError("Please enter a valid email address");
@@ -3887,16 +3908,10 @@ function EmailSection({
         /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: email })
       ] })
     ] }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        type: "button",
-        variant: "outline",
-        size: "sm",
-        onClick: handleStartChange,
-        children: "Change"
-      }
-    ),
+    changeButtonPresentation === "icon" ? /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: changeButton }),
+      /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: "Change email" })
+    ] }) }) : changeButton,
     /* @__PURE__ */ jsx(Dialog, { open: dialogOpen, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
       step === "enter-email" && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs(DialogHeader, { children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caffeinebounce/identity",
-  "version": "0.12.2",
+  "version": "0.12.3",
   "description": "Authentication components and handlers for Caffeine Bounce projects",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",