@armoyu/ui 1.1.25 → 1.1.32

package/package.json

@@ -1,49 +1,49 @@
-{
-  "name": "@armoyu/ui",
-  "version": "1.1.25",
-  "description": "Premium UI component library for ARMOYU platforms.",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist/",
-    "src/globals.css"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "private": false,
-  "scripts": {
-    "build": "tsc -p tsconfig.lib.json && tsc-alias -p tsconfig.lib.json",
-    "watch": "tsc -p tsconfig.lib.json --watch",
-    "dev": "next dev"
-  },
-  "dependencies": {
-    "@armoyu/core": "^1.1.60",
-    "plyr": "^3.8.4",
-    "plyr-react": "^6.0.0"
-  },
-  "peerDependencies": {
-    "lucide-react": "^1.7.0",
-    "next": "^16.1.7",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "socket.io-client": "^4.8.3"
-  },
-  "devDependencies": {
-    "@tailwindcss/postcss": "^4.2.2",
-    "@types/node": "^20.0.0",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "autoprefixer": "^10.4.27",
-    "lucide-react": "^1.7.0",
-    "next": "^16.1.7",
-    "postcss": "^8.5.8",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "socket.io-client": "^4.8.3",
-    "tailwindcss": "^4.2.2",
-    "tsc-alias": "^1.8.16",
-    "typescript": "^5.9.3"
-  }
+{
+  "name": "@armoyu/ui",
+  "version": "1.1.32",
+  "description": "Premium UI component library for ARMOYU platforms.",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/",
+    "src/globals.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "private": false,
+  "scripts": {
+    "build": "tsc -p tsconfig.lib.json && tsc-alias -p tsconfig.lib.json",
+    "watch": "tsc -p tsconfig.lib.json --watch",
+    "dev": "next dev"
+  },
+  "dependencies": {
+    "@armoyu/core": "^1.1.62",
+    "plyr": "^3.8.4",
+    "plyr-react": "^6.0.0"
+  },
+  "peerDependencies": {
+    "lucide-react": "^1.7.0",
+    "next": "^16.1.7",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "socket.io-client": "^4.8.3"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.2.2",
+    "@types/node": "^20.0.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "autoprefixer": "^10.4.27",
+    "lucide-react": "^1.7.0",
+    "next": "^16.1.7",
+    "postcss": "^8.5.8",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "socket.io-client": "^4.8.3",
+    "tailwindcss": "^4.2.2",
+    "tsc-alias": "^1.8.16",
+    "typescript": "^5.9.3"
+  }
 }

package/src/globals.css

@@ -1,238 +1,298 @@
-@import "tailwindcss";
-@import "plyr-react/plyr.css";
-
-/* Plyr Custom Theme */
-:root {
-  --plyr-color-main: #3b82f6; /* Armoyu Blue */
-}
-
-.plyr {
-  border-radius: inherit;
-}
-
-.plyr--video {
-  background: transparent;
-}
-@source "./components/**/*.{js,ts,jsx,tsx}";
-@source "./app/**/*.{js,ts,jsx,tsx}";
-
-/* 
- * TAILWIND V4 DARK MODE STRATEGY FIX
- * Varsayılan olarak Tailwind v4 sistem temasına (@media prefers-color-scheme) bakar.
- * Aşağıdaki kural ile Tailwind'in sadece .dark class'ı varken çalışmasını sağlıyoruz.
- */
-@custom-variant dark (&:where(.dark, .dark *));
-
-/*
- * GLOBAL TEMALANDIRMA DEĞİŞKENLERİ
- * Bu yapı sayesinde gelecekte yüzlerce farklı renk/tema (Kırmızı Mod, RGB Modu vb.) tanımlanabilir.
- */
-@layer base {
-  :root {
-    --armoyu-bg: #f8fafc;
-    /* Slate 50 - Daha asil bir açık gri */
-    --armoyu-fg: #0f172a;
-
-    --armoyu-header-bg: rgba(255, 255, 255, 0.85);
-    --armoyu-header-border: rgba(0, 0, 0, 0.04);
-
-    --armoyu-drawer-bg: rgba(255, 255, 255, 0.9);
-    --armoyu-drawer-border: rgba(0, 0, 0, 0.04);
-
-    --armoyu-card-bg: rgba(255, 255, 255, 0.75);
-    --armoyu-card-border: rgba(0, 0, 0, 0.04);
-
-    --armoyu-text: #1e293b;
-    /* Slate 800 */
-    --armoyu-text-muted: #64748b;
-    /* Slate 500 */
-    --armoyu-panel-width: 90%;
-  }
-
-  .dark {
-    --armoyu-bg: #0a0a0e;
-    --armoyu-fg: #f8fafc;
-
-    --armoyu-header-bg: #0a0a0e;
-    /* Tamamen Mat Koyu Siyah */
-    --armoyu-header-border: rgba(255, 255, 255, 0.05);
-
-    --armoyu-drawer-bg: rgba(10, 10, 14, 0.65);
-    /* Menü Çekmecesi Yüksek Saydamlık */
-    --armoyu-drawer-border: rgba(255, 255, 255, 0.1);
-
-    --armoyu-card-bg: rgba(10, 10, 14, 0.4);
-    --armoyu-card-border: rgba(255, 255, 255, 0.05);
-
-    --armoyu-text: #ffffff;
-    --armoyu-text-muted: #9ca3af;
-  }
-
-  body {
-    background-color: var(--armoyu-bg);
-    background-image:
-      radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.03) 0, transparent 50%),
-      radial-gradient(at 50% 0%, rgba(139, 92, 246, 0.03) 0, transparent 50%),
-      radial-gradient(at 100% 0%, rgba(59, 130, 246, 0.03) 0, transparent 50%);
-    color: var(--armoyu-fg);
-    line-height: inherit;
-    font-family: var(--font-sans);
-    min-height: 100vh;
-    overflow-x: hidden;
-  }
-
-  .dark body {
-    background-image: none;
-    /* Dark modda düz siyah/koyu kalsın */
-  }
-
-  /* Kullanıcının istediği özel açık tema arka plan kuralı */
-  @media (prefers-color-scheme: light) {
-    body {
-      background-color: var(--armoyu-bg);
-    }
-  }
-}
-
-@theme {
-  --color-background: #0a0a0e;
-  --color-foreground: #ededed;
-  --color-primary: #3b82f6;
-  --color-secondary: #1e1e24;
-  --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  --animate-fill-bar: fill-bar 5s linear forwards;
-
-  /* TAILWIND TANIMLAMALARI (Tüm proje genelinde class olarak kullanılabilir hale getirir) */
-  --color-armoyu-bg: var(--armoyu-bg);
-  --color-armoyu-fg: var(--armoyu-fg);
-  --color-armoyu-header-bg: var(--armoyu-header-bg);
-  --color-armoyu-header-border: var(--armoyu-header-border);
-  --color-armoyu-drawer-bg: var(--armoyu-drawer-bg);
-  --color-armoyu-drawer-border: var(--armoyu-drawer-border);
-  --color-armoyu-card-bg: var(--armoyu-card-bg);
-  --color-armoyu-card-border: var(--armoyu-card-border);
-  --color-armoyu-text: var(--armoyu-text);
-  --color-armoyu-text-muted: var(--armoyu-text-muted);
-  --spacing-armoyu-panel: var(--armoyu-panel-width);
-}
-
-/* Glassmorphism Classes */
-.glass-panel {
-  background: var(--armoyu-card-bg);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid var(--armoyu-card-border);
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03);
-}
-
-/* Koyu Tema Glassmorphism Stili */
-.dark .glass-panel {
-  background: rgba(255, 255, 255, 0.03);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.05);
-  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-}
-
-.text-gradient {
-  background: linear-gradient(to right, #3b82f6, #8b5cf6);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-/* Premium Scrollbar Styling */
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: 10px;
-}
-
-.dark ::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.05);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.2);
-}
-
-.dark ::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-/* Hide scrollbar utility (Renamed from hide-scrollbar for consistency) */
-.no-scrollbar, .scrollbar-hide {
-  -ms-overflow-style: none !important;
-  /* IE and Edge */
-  scrollbar-width: none !important;
-  /* Firefox */
-}
-
-.no-scrollbar::-webkit-scrollbar, .scrollbar-hide::-webkit-scrollbar {
-  display: none !important;
-}
-
-/* Elegant Thin Scrollbar */
-.thin-scrollbar::-webkit-scrollbar {
-  width: 4px;
-}
-
-.thin-scrollbar::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: 20px;
-}
-
-/* Slider Progress Bar Animation */
-@keyframes progressBar {
-  from {
-    width: 0%;
-  }
-
-  to {
-    width: 100%;
-  }
-}
-
-/* Slide Animations for Lightbox */
-@keyframes slideInRight {
-  from {
-    transform: translateX(100px);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes slideInLeft {
-  from {
-    transform: translateX(-100px);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-.animate-slide-right {
-  animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
-.animate-slide-left {
-  animation: slideInLeft 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
-/* Mask Fade Bottom for text truncation */
-.mask-fade-bottom {
-  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
-  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
-}
+@import "tailwindcss";
+@import "plyr-react/plyr.css";
+
+/* Plyr Custom Theme */
+:root {
+  --plyr-color-main: var(--armoyu-primary); /* Armoyu Blue */
+}
+
+.plyr {
+  border-radius: inherit;
+}
+
+.plyr--video {
+  background: transparent;
+}
+@source "./components/**/*.{js,ts,jsx,tsx}";
+@source "./app/**/*.{js,ts,jsx,tsx}";
+
+/* 
+ * TAILWIND V4 DARK MODE STRATEGY FIX
+ * Varsayılan olarak Tailwind v4 sistem temasına (@media prefers-color-scheme) bakar.
+ * Aşağıdaki kural ile Tailwind'in sadece .dark class'ı varken çalışmasını sağlıyoruz.
+ */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/*
+ * GLOBAL TEMALANDIRMA DEĞİŞKENLERİ
+ * Bu yapı sayesinde gelecekte yüzlerce farklı renk/tema (Kırmızı Mod, RGB Modu vb.) tanımlanabilir.
+ */
+@layer base {
+  :root {
+    --armoyu-primary: var(--armoyu-primary);
+    --armoyu-primary-rgb: 59, 130, 246;
+    --armoyu-primary-soft: rgba(59, 130, 246, 0.1);
+  }
+
+  [data-accent='green'] {
+    --armoyu-primary: #10b981;
+    --armoyu-primary-rgb: 16, 185, 129;
+    --armoyu-primary-soft: rgba(16, 185, 129, 0.1);
+  }
+
+  [data-accent='pink'] {
+    --armoyu-primary: #ec4899;
+    --armoyu-primary-rgb: 236, 72, 153;
+    --armoyu-primary-soft: rgba(236, 72, 153, 0.1);
+  }
+
+  [data-accent='purple'] {
+    --armoyu-primary: #8b5cf6;
+    --armoyu-primary-rgb: 139, 92, 246;
+    --armoyu-primary-soft: rgba(139, 92, 246, 0.1);
+  }
+
+  [data-accent='red'] {
+    --armoyu-primary: #ef4444;
+    --armoyu-primary-rgb: 239, 68, 68;
+    --armoyu-primary-soft: rgba(239, 68, 68, 0.1);
+  }
+
+  [data-accent='amber'] {
+    --armoyu-primary: #f59e0b;
+    --armoyu-primary-rgb: 245, 158, 11;
+    --armoyu-primary-soft: rgba(245, 158, 11, 0.1);
+  }
+
+  [data-accent='emerald'] {
+    --armoyu-primary: #059669;
+    --armoyu-primary-rgb: 5, 150, 105;
+    --armoyu-primary-soft: rgba(5, 150, 105, 0.1);
+  }
+
+  :root {
+    --armoyu-bg: color-mix(in srgb, var(--armoyu-primary) 3%, #ffffff);
+    --armoyu-fg: #0f172a;
+
+    --armoyu-secondary: color-mix(in srgb, var(--armoyu-primary) 15%, #64748b);
+    --armoyu-success: color-mix(in srgb, var(--armoyu-primary) 10%, #10b981);
+    --armoyu-warning: color-mix(in srgb, var(--armoyu-primary) 10%, #f59e0b);
+    --armoyu-danger: color-mix(in srgb, var(--armoyu-primary) 10%, #ef4444);
+
+    --armoyu-header-bg: color-mix(in srgb, var(--armoyu-primary) 4%, #ffffff);
+    --armoyu-header-border: color-mix(in srgb, var(--armoyu-primary) 12%, #f1f5f9);
+
+    --armoyu-drawer-bg: #ffffff;
+    --armoyu-drawer-border: color-mix(in srgb, var(--armoyu-primary) 12%, #f1f5f9);
+
+    --armoyu-card-bg: #ffffff;
+    --armoyu-card-border: color-mix(in srgb, var(--armoyu-primary) 10%, #f1f5f9);
+
+    --armoyu-text: #1e293b;
+    --armoyu-text-muted: #64748b;
+    --armoyu-panel-width: 90%;
+  }
+
+  .dark {
+    --armoyu-bg: color-mix(in srgb, var(--armoyu-primary) 8%, #050508);
+    --armoyu-fg: #f8fafc;
+
+    --armoyu-secondary: color-mix(in srgb, var(--armoyu-primary) 20%, #94a3b8);
+    --armoyu-success: color-mix(in srgb, var(--armoyu-primary) 15%, #059669);
+    --armoyu-warning: color-mix(in srgb, var(--armoyu-primary) 15%, #d97706);
+    --armoyu-danger: color-mix(in srgb, var(--armoyu-primary) 15%, #dc2626);
+
+    --armoyu-header-bg: color-mix(in srgb, var(--armoyu-primary) 8%, rgba(13, 13, 18, 0.85));
+    --armoyu-header-border: color-mix(in srgb, var(--armoyu-primary) 18%, #1a1a24);
+
+    --armoyu-drawer-bg: color-mix(in srgb, var(--armoyu-primary) 8%, #0d0d12);
+    --armoyu-drawer-border: color-mix(in srgb, var(--armoyu-primary) 18%, #1a1a24);
+
+    --armoyu-card-bg: color-mix(in srgb, var(--armoyu-primary) 6%, #12121a);
+    --armoyu-card-border: color-mix(in srgb, var(--armoyu-primary) 15%, #1a1a24);
+
+    --armoyu-text: #ffffff;
+    --armoyu-text-muted: #9ca3af;
+  }
+
+  body {
+    background-color: var(--armoyu-bg);
+    color: var(--armoyu-fg);
+    line-height: inherit;
+    font-family: var(--font-sans);
+    min-height: 100vh;
+    overflow-x: hidden;
+    position: relative;
+  }
+
+  body::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle at 10% 10%, rgba(var(--armoyu-primary-rgb), 0.08) 0%, transparent 40%),
+                radial-gradient(circle at 90% 90%, rgba(var(--armoyu-primary-rgb), 0.08) 0%, transparent 40%);
+    pointer-events: none;
+    z-index: -1;
+  }
+
+  .dark body {
+    background-image: none;
+  }
+
+  @media (prefers-color-scheme: light) {
+    body {
+      background-color: var(--armoyu-bg);
+    }
+  }
+}
+
+@theme {
+  --color-background: var(--armoyu-bg);
+  --color-foreground: var(--armoyu-fg);
+  --color-primary: var(--armoyu-primary);
+  --color-secondary: #1e1e24;
+  --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --animate-fill-bar: fill-bar 5s linear forwards;
+
+  --color-armoyu-bg: var(--armoyu-bg);
+  --color-armoyu-fg: var(--armoyu-fg);
+  --color-armoyu-header-bg: var(--armoyu-header-bg);
+  --color-armoyu-header-border: var(--armoyu-header-border);
+  --color-armoyu-drawer-bg: var(--armoyu-drawer-bg);
+  --color-armoyu-drawer-border: var(--armoyu-drawer-border);
+  --color-armoyu-card-bg: var(--armoyu-card-bg);
+  --color-armoyu-card-border: var(--armoyu-card-border);
+  --color-armoyu-text: var(--armoyu-text);
+  --color-armoyu-text-muted: var(--armoyu-text-muted);
+  --color-armoyu-primary: var(--armoyu-primary);
+  --color-armoyu-primary-soft: var(--armoyu-primary-soft);
+  --color-armoyu-secondary: var(--armoyu-secondary);
+  --color-armoyu-success: var(--armoyu-success);
+  --color-armoyu-warning: var(--armoyu-warning);
+  --color-armoyu-danger: var(--armoyu-danger);
+  --spacing-armoyu-panel: var(--armoyu-panel-width);
+}
+
+/* Glassmorphism Classes */
+.glass-panel {
+  background: var(--armoyu-card-bg);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid var(--armoyu-card-border);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03);
+}
+
+/* Koyu Tema Glassmorphism Stili */
+.dark .glass-panel {
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+}
+
+.text-gradient {
+  background: linear-gradient(to right, var(--armoyu-primary), #8b5cf6);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* Premium Scrollbar Styling */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* Hide scrollbar utility (Renamed from hide-scrollbar for consistency) */
+.no-scrollbar, .scrollbar-hide {
+  -ms-overflow-style: none !important;
+  /* IE and Edge */
+  scrollbar-width: none !important;
+  /* Firefox */
+}
+
+.no-scrollbar::-webkit-scrollbar, .scrollbar-hide::-webkit-scrollbar {
+  display: none !important;
+}
+
+/* Elegant Thin Scrollbar */
+.thin-scrollbar::-webkit-scrollbar {
+  width: 4px;
+}
+
+.thin-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 20px;
+}
+
+/* Slider Progress Bar Animation */
+@keyframes progressBar {
+  from {
+    width: 0%;
+  }
+
+  to {
+    width: 100%;
+  }
+}
+
+/* Slide Animations for Lightbox */
+@keyframes slideInRight {
+  from {
+    transform: translateX(100px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.animate-slide-right {
+  animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-slide-left {
+  animation: slideInLeft 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/* Mask Fade Bottom for text truncation */
+.mask-fade-bottom {
+  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
+  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
+}