@armoyu/ui 1.0.0 → 1.0.1

package/src/components/RollingNumber.tsx

@@ -15,7 +15,7 @@ export function RollingNumber({ value, className = "" }: RollingNumberProps) {
   }, [value]);
 
   return (
-    <div className={`flex items-center overflow-hidden h-[1.2em] leading-[1.2em] ${className}`}>
+    <div className={`flex items-baseline overflow-hidden h-[1.2em] leading-none ${className}`}>
       {digits.map((digit, idx) => (
         <Digit key={`${idx}-${digit}`} char={digit} />
       ))}
@@ -34,11 +34,11 @@ function Digit({ char }: { char: string }) {
   }, [char, isNumber]);
 
   if (!isNumber) {
-    return <span className="inline-block transition-all duration-500">{char}</span>;
+    return <span className="inline-block transition-all duration-500 min-w-[0.2em] text-center">{char}</span>;
   }
 
   return (
-    <div className="relative w-[0.6em] h-[1.2em] flex flex-col transition-transform duration-500 ease-out" 
+    <div className="relative w-[0.65em] h-[1.2em] flex flex-col transition-transform duration-500 ease-out shrink-0" 
          style={{ transform: `translateY(-${offset}%)` }}>
       {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((n) => (
         <span key={n} className="h-[1.2em] flex items-center justify-center shrink-0">

package/src/components/modules/profile/ProfileStats.tsx

@@ -21,28 +21,28 @@ export function ProfileStats() {
         <div className="text-center md:text-left">
           <div className="text-2xl font-black text-armoyu-text flex items-baseline">
             <RollingNumber value={followers.value} />
-            <span className="text-sm ml-0.5">{followers.unit}</span>
+            <span className="text-lg font-bold ml-1 text-armoyu-text/80">{followers.unit}</span>
           </div>
           <div className="text-xs font-bold text-armoyu-text-muted uppercase tracking-wider mt-1">Takipçi</div>
         </div>
         <div className="text-center md:text-left">
           <div className="text-2xl font-black text-armoyu-text flex items-baseline">
             <RollingNumber value={following.value} />
-            <span className="text-sm ml-0.5">{following.unit}</span>
+            <span className="text-lg font-bold ml-1 text-armoyu-text/80">{following.unit}</span>
           </div>
           <div className="text-xs font-bold text-armoyu-text-muted uppercase tracking-wider mt-1">Takip</div>
         </div>
         <div className="text-center md:text-left">
           <div className="text-2xl font-black text-armoyu-text flex items-baseline">
             <RollingNumber value={views.value} />
-            <span className="text-sm ml-0.5">{views.unit}</span>
+            <span className="text-lg font-bold ml-1 text-armoyu-text/80">{views.unit}</span>
           </div>
           <div className="text-xs font-bold text-armoyu-text-muted uppercase tracking-wider mt-1">Görüntülenme</div>
         </div>
         <div className="text-center md:text-left">
           <div className="text-2xl font-black text-emerald-500 flex items-baseline">
             <RollingNumber value={respect.value} />
-            <span className="text-sm ml-0.5">{respect.unit}</span>
+            <span className="text-lg font-bold ml-1 text-emerald-500/80">{respect.unit}</span>
           </div>
           <div className="text-xs font-bold text-armoyu-text-muted uppercase tracking-wider mt-1">Saygı Puanı</div>
         </div>

package/src/components/showcase/CommunityTab.tsx

@@ -1,22 +1,22 @@
-import React from 'react';
-import { 
-  ForumBoard, 
-  GroupCard, 
-  groupList, 
-  MOCK_FORUM_CATEGORIES 
-} from '../../index';
-
-export function CommunityTab() {
-  return (
-    <div className="space-y-12">
-       <h3 className="text-2xl font-black italic uppercase tracking-tighter border-l-4 border-orange-500 pl-4">Topluluk & Forum</h3>
-       <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-          <div className="md:col-span-2">
-             <ForumBoard {...MOCK_FORUM_CATEGORIES[1].boards[0]} />
-          </div>
-          <GroupCard {...groupList[0]} />
-          <GroupCard {...groupList[1]} />
-       </div>
-    </div>
-  );
-}
+import React from 'react';
+import { 
+  ForumBoard, 
+  GroupCard, 
+  groupList, 
+  MOCK_FORUM_CATEGORIES 
+} from '../../index';
+
+export function CommunityTab() {
+  return (
+    <div className="space-y-12">
+       <h3 className="text-2xl font-black italic uppercase tracking-tighter border-l-4 border-orange-500 pl-4">Topluluk & Forum</h3>
+       <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          <div className="md:col-span-2">
+             <ForumBoard {...MOCK_FORUM_CATEGORIES[1].boards[0]} />
+          </div>
+          <GroupCard {...groupList[0]} />
+          <GroupCard {...groupList[1]} />
+       </div>
+    </div>
+  );
+}

package/src/components/showcase/CorporateTab.tsx

@@ -1,38 +1,38 @@
-import React from 'react';
-import { 
-  Header, 
-  Footer, 
-  ViewModeToggle 
-} from '../../index';
-
-export function CorporateTab() {
-  return (
-    <div className="space-y-16">
-       <div className="space-y-6">
-          <div className="flex items-center justify-between">
-             <h3 className="text-2xl font-black italic uppercase tracking-tighter border-l-4 border-indigo-500 pl-4">Header Bileşeni</h3>
-             <span className="text-[10px] font-bold text-armoyu-text-muted uppercase italic bg-black/20 px-3 py-1 rounded-lg">Kütüphane Bileşeni Önizleme</span>
-          </div>
-          <div className="rounded-[32px] overflow-hidden border border-white/5 shadow-2xl relative">
-             <Header />
-          </div>
-       </div>
-
-       <div className="space-y-6">
-          <h3 className="text-2xl font-black italic uppercase tracking-tighter border-l-4 border-indigo-500 pl-4">Footer Bileşeni</h3>
-          <div className="rounded-[32px] overflow-hidden border border-white/5 shadow-2xl">
-             <Footer />
-          </div>
-       </div>
-
-       <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-8">
-          <div className="glass-panel p-8 rounded-[40px]">
-             <h4 className="text-[10px] font-black uppercase text-center mb-6 opacity-30 italic">Görünüm Seçici</h4>
-             <div className="flex justify-center">
-                <ViewModeToggle mode="grid" onChange={() => {}} />
-             </div>
-          </div>
-       </div>
-    </div>
-  );
-}
+import React from 'react';
+import { 
+  Header, 
+  Footer, 
+  ViewModeToggle 
+} from '../../index';
+
+export function CorporateTab() {
+  return (
+    <div className="space-y-16">
+       <div className="space-y-6">
+          <div className="flex items-center justify-between">
+             <h3 className="text-2xl font-black italic uppercase tracking-tighter border-l-4 border-indigo-500 pl-4">Header Bileşeni</h3>
+             <span className="text-[10px] font-bold text-armoyu-text-muted uppercase italic bg-black/20 px-3 py-1 rounded-lg">Kütüphane Bileşeni Önizleme</span>
+          </div>
+          <div className="rounded-[32px] overflow-hidden border border-white/5 shadow-2xl relative">
+             <Header />
+          </div>
+       </div>
+
+       <div className="space-y-6">
+          <h3 className="text-2xl font-black italic uppercase tracking-tighter border-l-4 border-indigo-500 pl-4">Footer Bileşeni</h3>
+          <div className="rounded-[32px] overflow-hidden border border-white/5 shadow-2xl">
+             <Footer />
+          </div>
+       </div>
+
+       <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-8">
+          <div className="glass-panel p-8 rounded-[40px]">
+             <h4 className="text-[10px] font-black uppercase text-center mb-6 opacity-30 italic">Görünüm Seçici</h4>
+             <div className="flex justify-center">
+                <ViewModeToggle mode="grid" onChange={() => {}} />
+             </div>
+          </div>
+       </div>
+    </div>
+  );
+}

package/src/components/showcase/GeneralTab.tsx

@@ -1,41 +1,41 @@
-import React from 'react';
-import { 
-  Button, 
-  RollingNumber, 
-  Slider, 
-  StatsGrid, 
-  mockGlobalStats 
-} from '../../index';
-
-export function GeneralTab() {
-  return (
-    <div className="space-y-12">
-      <h3 className="text-2xl font-black italic uppercase tracking-tighter border-l-4 border-blue-500 pl-4">Temel Bileşenler</h3>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-        <div className="glass-panel p-8 rounded-[40px] space-y-6">
-          <h4 className="text-xs font-black uppercase tracking-widest text-armoyu-text-muted mb-4 opacity-50 italic">Butonlar</h4>
-          <div className="flex flex-wrap gap-4">
-            <Button>Normal Buton</Button>
-            <Button variant="ghost">Hayalet Buton</Button>
-            <Button className="bg-gradient-to-r from-blue-600 to-indigo-600">Premium Buton</Button>
-            <Button className="bg-emerald-500">Başarı</Button>
-          </div>
-        </div>
-        <div className="glass-panel p-8 rounded-[40px] space-y-6">
-          <h4 className="text-xs font-black uppercase tracking-widest text-armoyu-text-muted mb-4 opacity-50 italic">Sayı Animasyonları</h4>
-          <div className="flex items-center gap-8">
-             <div className="text-4xl font-black text-blue-500 italic"><RollingNumber value="14.2" />B</div>
-             <div className="text-3xl font-black text-armoyu-text italic opacity-60"><RollingNumber value="1250" /></div>
-          </div>
-        </div>
-        <div className="glass-panel p-8 rounded-[40px] space-y-6 md:col-span-2">
-           <h4 className="text-xs font-black uppercase tracking-widest text-armoyu-text-muted mb-4 opacity-50 italic">Slider / Carousel</h4>
-           <Slider />
-        </div>
-        <div className="md:col-span-2">
-           <StatsGrid stats={mockGlobalStats} />
-        </div>
-      </div>
-    </div>
-  );
-}
+import React from 'react';
+import { 
+  Button, 
+  RollingNumber, 
+  Slider, 
+  StatsGrid, 
+  mockGlobalStats 
+} from '../../index';
+
+export function GeneralTab() {
+  return (
+    <div className="space-y-12">
+      <h3 className="text-2xl font-black italic uppercase tracking-tighter border-l-4 border-blue-500 pl-4">Temel Bileşenler</h3>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div className="glass-panel p-8 rounded-[40px] space-y-6">
+          <h4 className="text-xs font-black uppercase tracking-widest text-armoyu-text-muted mb-4 opacity-50 italic">Butonlar</h4>
+          <div className="flex flex-wrap gap-4">
+            <Button>Normal Buton</Button>
+            <Button variant="ghost">Hayalet Buton</Button>
+            <Button className="bg-gradient-to-r from-blue-600 to-indigo-600">Premium Buton</Button>
+            <Button className="bg-emerald-500">Başarı</Button>
+          </div>
+        </div>
+        <div className="glass-panel p-8 rounded-[40px] space-y-6">
+          <h4 className="text-xs font-black uppercase tracking-widest text-armoyu-text-muted mb-4 opacity-50 italic">Sayı Animasyonları</h4>
+          <div className="flex items-center gap-8">
+             <div className="text-4xl font-black text-blue-500 italic"><RollingNumber value="14.2" />B</div>
+             <div className="text-3xl font-black text-armoyu-text italic opacity-60"><RollingNumber value="1250" /></div>
+          </div>
+        </div>
+        <div className="glass-panel p-8 rounded-[40px] space-y-6 md:col-span-2">
+           <h4 className="text-xs font-black uppercase tracking-widest text-armoyu-text-muted mb-4 opacity-50 italic">Slider / Carousel</h4>
+           <Slider />
+        </div>
+        <div className="md:col-span-2">
+           <StatsGrid stats={mockGlobalStats} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/showcase/MessagesTab.tsx

@@ -1,26 +1,26 @@
-import React from 'react';
-import { 
-  ChatNotes, 
-  ChatList, 
-  ChatContainer, 
-  MOCK_SESSION 
-} from '../../index';
-
-export function MessagesTab() {
-  return (
-    <div className="space-y-12">
-       <h3 className="text-2xl font-black italic uppercase tracking-tighter border-l-4 border-emerald-500 pl-4">Mesajlaşma Sistemi</h3>
-       <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 h-[700px]">
-          <div className="lg:col-span-4 glass-panel rounded-[40px] overflow-hidden flex flex-col">
-             <ChatNotes />
-             <div className="flex-1 overflow-hidden p-2">
-                <ChatList contacts={MOCK_SESSION.chatList} activeId="c1" onSelect={() => {}} />
-             </div>
-          </div>
-          <div className="lg:col-span-8 glass-panel rounded-[40px] overflow-hidden">
-             <ChatContainer />
-          </div>
-       </div>
-    </div>
-  );
-}
+import React from 'react';
+import { 
+  ChatNotes, 
+  ChatList, 
+  ChatContainer, 
+  MOCK_SESSION 
+} from '../../index';
+
+export function MessagesTab() {
+  return (
+    <div className="space-y-12">
+       <h3 className="text-2xl font-black italic uppercase tracking-tighter border-l-4 border-emerald-500 pl-4">Mesajlaşma Sistemi</h3>
+       <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 h-[700px]">
+          <div className="lg:col-span-4 glass-panel rounded-[40px] overflow-hidden flex flex-col">
+             <ChatNotes />
+             <div className="flex-1 overflow-hidden p-2">
+                <ChatList contacts={MOCK_SESSION.chatList} activeId="c1" onSelect={() => {}} />
+             </div>
+          </div>
+          <div className="lg:col-span-8 glass-panel rounded-[40px] overflow-hidden">
+             <ChatContainer />
+          </div>
+       </div>
+    </div>
+  );
+}

package/src/components/showcase/ProfileTab.tsx

@@ -1,20 +1,20 @@
-import React from 'react';
-import { 
-  ProfileHeader, 
-  ProfileStats, 
-  ProfileContent, 
-  userList 
-} from '../../index';
-
-export function ProfileTab() {
-  const me = userList[0];
-  
-  return (
-    <div className="space-y-12">
-       <h3 className="text-2xl font-black italic uppercase tracking-tighter border-l-4 border-pink-500 pl-4">Kullanıcı Profili</h3>
-       <ProfileHeader user={me} isOwnProfile={true} />
-       <ProfileStats />
-       <ProfileContent user={me} />
-    </div>
-  );
-}
+import React from 'react';
+import { 
+  ProfileHeader, 
+  ProfileStats, 
+  ProfileContent, 
+  userList 
+} from '../../index';
+
+export function ProfileTab() {
+  const me = userList[0];
+  
+  return (
+    <div className="space-y-12">
+       <h3 className="text-2xl font-black italic uppercase tracking-tighter border-l-4 border-pink-500 pl-4">Kullanıcı Profili</h3>
+       <ProfileHeader user={me} isOwnProfile={true} />
+       <ProfileStats />
+       <ProfileContent user={me} />
+    </div>
+  );
+}

package/src/components/showcase/ShopTab.tsx

@@ -1,24 +1,24 @@
-import React from 'react';
-import { 
-  StoreHeader, 
-  NewsCard, 
-  newsList 
-} from '../../index';
-
-export function ShopTab() {
-  return (
-    <div className="space-y-12">
-       <h3 className="text-2xl font-black italic uppercase tracking-tighter border-l-4 border-yellow-500 pl-4">Mağaza & İçerik</h3>
-       <div className="space-y-8">
-          <div className="glass-panel p-6 rounded-[32px]">
-             <StoreHeader searchQuery="" setSearchQuery={() => {}} />
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-             {newsList.map(news => (
-               <NewsCard key={news.slug} {...news} />
-             ))}
-          </div>
-       </div>
-    </div>
-  );
-}
+import React from 'react';
+import { 
+  StoreHeader, 
+  NewsCard, 
+  newsList 
+} from '../../index';
+
+export function ShopTab() {
+  return (
+    <div className="space-y-12">
+       <h3 className="text-2xl font-black italic uppercase tracking-tighter border-l-4 border-yellow-500 pl-4">Mağaza & İçerik</h3>
+       <div className="space-y-8">
+          <div className="glass-panel p-6 rounded-[32px]">
+             <StoreHeader searchQuery="" setSearchQuery={() => {}} />
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+             {newsList.map(news => (
+               <NewsCard key={news.slug} {...news} />
+             ))}
+          </div>
+       </div>
+    </div>
+  );
+}

package/src/components/showcase/SocialTab.tsx

@@ -1,28 +1,28 @@
-import React from 'react';
-import { 
-  AuthSidebarLeft, 
-  Stories, 
-  PostCard, 
-  postList 
-} from '../../index';
-
-export function SocialTab() {
-  const samplePosts = postList.slice(0, 3);
-  
-  return (
-    <div className="space-y-12">
-       <h3 className="text-2xl font-black italic uppercase tracking-tighter border-l-4 border-purple-500 pl-4">Sosyal Modüller</h3>
-       <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
-          <aside className="lg:col-span-3">
-             <AuthSidebarLeft />
-          </aside>
-          <div className="lg:col-span-9 space-y-8">
-             <Stories />
-             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                {samplePosts.map(post => <PostCard key={post.id} {...post} />)}
-             </div>
-          </div>
-       </div>
-    </div>
-  );
-}
+import React from 'react';
+import { 
+  AuthSidebarLeft, 
+  Stories, 
+  PostCard, 
+  postList 
+} from '../../index';
+
+export function SocialTab() {
+  const samplePosts = postList.slice(0, 3);
+  
+  return (
+    <div className="space-y-12">
+       <h3 className="text-2xl font-black italic uppercase tracking-tighter border-l-4 border-purple-500 pl-4">Sosyal Modüller</h3>
+       <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
+          <aside className="lg:col-span-3">
+             <AuthSidebarLeft />
+          </aside>
+          <div className="lg:col-span-9 space-y-8">
+             <Stories />
+             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {samplePosts.map(post => <PostCard key={post.id} {...post} />)}
+             </div>
+          </div>
+       </div>
+    </div>
+  );
+}