@authdog/react-elements 0.0.30 → 0.0.32

package/dist/styles.css

@@ -641,12 +641,12 @@ video {
 .mb-2 {
   margin-bottom: 0.5rem;
 }
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
 .mb-4 {
   margin-bottom: 1rem;
 }
-.mb-6 {
-  margin-bottom: 1.5rem;
-}
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -748,9 +748,6 @@ video {
 .h-px {
   height: 1px;
 }
-.h-screen {
-  height: 100vh;
-}
 .min-h-4 {
   min-height: 1rem;
 }
@@ -838,8 +835,8 @@ video {
 .grid-cols-\[0_1fr\] {
   grid-template-columns: 0 1fr;
 }
-.grid-cols-\[16rem\2c 1fr\] {
-  grid-template-columns: 16rem 1fr;
+.grid-cols-\[14rem\2c 1fr\] {
+  grid-template-columns: 14rem 1fr;
 }
 .grid-rows-\[auto_auto\] {
   grid-template-rows: auto auto;
@@ -890,6 +887,11 @@ video {
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
+.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
+}
 .space-y-3 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
@@ -900,16 +902,16 @@ video {
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
+.space-y-5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
+}
 .space-y-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
 }
-.space-y-8 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
-}
 .self-start {
   align-self: flex-start;
 }
@@ -1051,15 +1053,12 @@ video {
 .p-1 {
   padding: 0.25rem;
 }
-.p-10 {
-  padding: 2.5rem;
+.p-3 {
+  padding: 0.75rem;
 }
 .p-4 {
   padding: 1rem;
 }
-.p-6 {
-  padding: 1.5rem;
-}
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1592,9 +1591,29 @@ video {
 .dark\:bg-destructive\/60:is(.dark *) {
   background-color: hsl(var(--destructive) / 0.6);
 }
+.dark\:bg-gray-800:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
+}
 .dark\:bg-input\/30:is(.dark *) {
   background-color: hsl(var(--input) / 0.3);
 }
+.dark\:text-gray-100:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
+}
+.dark\:text-gray-300:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
+}
+.dark\:text-gray-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+.dark\:hover\:bg-gray-800:hover:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
+}
 .dark\:focus-visible\:ring-destructive\/40:focus-visible:is(.dark *) {
   --tw-ring-color: hsl(var(--destructive) / 0.4);
 }
@@ -1614,6 +1633,10 @@ video {
 }
 @media (min-width: 768px) {
 
+  .md\:mb-4 {
+    margin-bottom: 1rem;
+  }
+
   .md\:flex {
     display: flex;
   }
@@ -1622,6 +1645,20 @@ video {
     display: none;
   }
 
+  .md\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+  }
+
+  .md\:p-4 {
+    padding: 1rem;
+  }
+
+  .md\:p-5 {
+    padding: 1.25rem;
+  }
+
   .md\:px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authdog/react-elements",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.mts",

package/src/components/core/user-profile.tsx

@@ -50,18 +50,20 @@ export const UserProfile = ({
   }
   
   return (
-    <div className="grid grid-cols-[16rem,1fr] h-screen bg-gray-100">
-      <div className="h-full border-r p-6 bg-white flex flex-col min-w-0">
-        <div className="mb-6">
-          <h1 className="text-xl font-bold">Account</h1>
-          <p className="text-sm text-gray-500">Manage your account info.</p>
+    <div className="grid grid-cols-[14rem,1fr] w-full bg-transparent">
+      <div className="h-full border-r p-3 md:p-4 bg-transparent flex flex-col min-w-0">
+        <div className="mb-3 md:mb-4">
+          <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">Account</h1>
+          <p className="text-sm text-gray-500 dark:text-gray-400">Manage your account info.</p>
         </div>
 
         <nav className="space-y-1 flex-1">
           <button
             onClick={() => setActiveTab("profile")}
             className={`flex items-center w-full px-3 py-2 text-sm rounded-md ${
-              activeTab === "profile" ? "bg-gray-100 text-gray-900" : "text-gray-700 hover:bg-gray-50"
+              activeTab === "profile"
+                ? "bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100"
+                : "text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800"
             }`}
           >
             {renderIcon(User)}
@@ -79,9 +81,9 @@ export const UserProfile = ({
         </nav>
       </div>
 
-      <div className="h-full p-10 overflow-y-auto min-w-0 bg-white">
-        <div className="flex justify-between items-center mb-6">
-          <h2 className="text-xl font-semibold">
+      <div className="h-full p-3 md:p-5 min-w-0 bg-transparent">
+        <div className="flex justify-between items-center mb-3 md:mb-4">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
             {activeTab === "profile" ? "Profile details" : "Security settings"}
           </h2>
           {/* <button className="text-gray-500 hover:text-gray-700">
@@ -90,17 +92,17 @@ export const UserProfile = ({
         </div>
 
         {activeTab === "profile" ? (
-          <div className="space-y-8">
+          <div className="space-y-5 md:space-y-6">
             {/* Profile Section */}
             <div>
-              <h3 className="text-sm font-medium mb-4">Profile</h3>
+              <h3 className="text-sm font-medium mb-3 text-gray-900 dark:text-gray-100">Profile</h3>
               <div className="flex items-center justify-between">
                 <div className="flex items-center">
                   <Avatar className="h-12 w-12 mr-4 border">
                     <AvatarImage src={user.photos?.[0]?.value} alt="Profile picture" />
                     <AvatarFallback>{user.displayName?.split(" ").map((n: string) => n[0]).join("")}</AvatarFallback>
                   </Avatar>
-                  <span className="font-medium">{user.displayName}</span>
+                  <span className="font-medium text-gray-900 dark:text-gray-100">{user.displayName}</span>
                 </div>
                 {/* <Button variant="outline" size="sm">
                   Edit profile
@@ -110,8 +112,8 @@ export const UserProfile = ({
 
             {/* Email Addresses Section */}
             <div>
-              <h3 className="text-sm font-medium mb-4">Email addresses</h3>
-              <div className="space-y-3">
+              <h3 className="text-sm font-medium mb-3 text-gray-900 dark:text-gray-100">Email addresses</h3>
+              <div className="space-y-2.5">
 
                 {/* {JSON.stringify(user)} */}
 
@@ -126,18 +128,19 @@ export const UserProfile = ({
                   </div>
                 ))} */}
 
-                {
-                  user.emails.map((email: any, idx: number) => (
-                    <div className="flex items-center justify-between" key={email.value}>
-                      <span>{email.value}</span>
-                      {idx === 0 && (
-                        <Badge variant="outline" className="text-xs bg-gray-100 text-gray-700 hover:bg-gray-100">
-                          Primary
-                        </Badge>
-                      )}
-                    </div>
-                  ))
-                }
+                {user.emails.map((email: any, idx: number) => (
+                  <div className="flex items-center justify-between" key={email.value}>
+                    <span className="text-gray-900 dark:text-gray-100">{email.value}</span>
+                    {idx === 0 && (
+                      <Badge
+                        variant="outline"
+                        className="text-xs bg-gray-100 text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-800"
+                      >
+                        Primary
+                      </Badge>
+                    )}
+                  </div>
+                ))}
                 {/* <Button variant="ghost" size="sm" className="flex items-center text-gray-700">
                   {renderIcon(PlusCircle)}
                   Add email address
@@ -147,8 +150,8 @@ export const UserProfile = ({
 
             {/* Phone Number Section */}
             {/* <div>
-              <h3 className="text-sm font-medium mb-4">Phone number</h3>
-              <div className="space-y-3">
+              <h3 className="text-sm font-medium mb-3">Phone number</h3>
+              <div className="space-y-2.5">
                 <div className="flex items-center justify-between">
                   <span>+1 (555) 123-4567</span>
                   <Badge variant="outline" className="text-xs bg-gray-100 text-gray-700 hover:bg-gray-100">
@@ -164,29 +167,29 @@ export const UserProfile = ({
 
             {/* Connected Accounts Section */}
             <div>
-              <h3 className="text-sm font-medium mb-4">Connected accounts</h3>
-              <div className="space-y-3">
+              <h3 className="text-sm font-medium mb-3 text-gray-900 dark:text-gray-100">Connected accounts</h3>
+              <div className="space-y-2.5">
                 <div className="flex items-center justify-between" key={user.provider}>
                     <div className="flex items-center">
                       <div className="mr-2">
-                        <span>{user.provider}</span>
+                        <span className="text-gray-900 dark:text-gray-100">{user.provider}</span>
                       </div>
                     </div>
-                    <span className="text-sm text-gray-500">{user?.emails?.[0]?.value}</span>
+                    <span className="text-sm text-gray-500 dark:text-gray-400">{user?.emails?.[0]?.value}</span>
                   </div>
               </div>
             </div>
           </div>
         ) : (
-          <div className="space-y-8">
+          <div className="space-y-5 md:space-y-6">
             {/* Security Settings */}
             <div key="two-factor">
-              <h3 className="text-sm font-medium mb-4">Two-factor authentication</h3>
-              <div className="space-y-3">
+              <h3 className="text-sm font-medium mb-3 text-gray-900 dark:text-gray-100">Two-factor authentication</h3>
+              <div className="space-y-2.5">
                 <div className="flex items-center justify-between">
                   <div>
-                    <p className="font-medium">Two-factor authentication</p>
-                    <p className="text-sm text-gray-500">Add an extra layer of security to your account</p>
+                    <p className="font-medium text-gray-900 dark:text-gray-100">Two-factor authentication</p>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">Add an extra layer of security to your account</p>
                   </div>
                   <Button variant="outline" size="sm">
                     Enable
@@ -196,12 +199,12 @@ export const UserProfile = ({
             </div>
 
             <div key="password">
-              <h3 className="text-sm font-medium mb-4">Password</h3>
-              <div className="space-y-3">
+              <h3 className="text-sm font-medium mb-3 text-gray-900 dark:text-gray-100">Password</h3>
+              <div className="space-y-2.5">
                 <div className="flex items-center justify-between">
                   <div>
-                    <p className="font-medium">Change password</p>
-                    <p className="text-sm text-gray-500">Last changed 3 months ago</p>
+                    <p className="font-medium text-gray-900 dark:text-gray-100">Change password</p>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">Last changed 3 months ago</p>
                   </div>
                   <Button variant="outline" size="sm">
                     Change
@@ -211,12 +214,12 @@ export const UserProfile = ({
             </div>
 
             <div key="sessions">
-              <h3 className="text-sm font-medium mb-4">Active sessions</h3>
-              <div className="space-y-3">
+              <h3 className="text-sm font-medium mb-3 text-gray-900 dark:text-gray-100">Active sessions</h3>
+              <div className="space-y-2.5">
                 <div className="flex items-center justify-between">
                   <div>
-                    <p className="font-medium">Current session</p>
-                    <p className="text-sm text-gray-500">Chrome on Windows • Active now</p>
+                    <p className="font-medium text-gray-900 dark:text-gray-100">Current session</p>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">Chrome on Windows • Active now</p>
                   </div>
                   <Button variant="outline" size="sm">
                     Sign out