@makroz/web 1.2.1 → 1.2.2

package/dist/components/MkThemeEditor.module.css

@@ -0,0 +1,177 @@
+.container {
+    --mk-theme-editor-bg: var(--mk-card);
+    --mk-theme-editor-border: var(--mk-border);
+    --mk-theme-editor-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
+
+    position: fixed;
+    bottom: 1.5rem;
+    right: 1.5rem;
+    width: 320px;
+    max-height: 500px;
+    background-color: var(--mk-theme-editor-bg);
+    border: 1px solid var(--mk-theme-editor-border);
+    border-radius: var(--mk-radius, 12px);
+    box-shadow: var(--mk-theme-editor-shadow);
+    z-index: 10000;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+:global([data-theme='dark']) .container {
+    --mk-theme-editor-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.85rem 1rem;
+    background-color: var(--mk-muted);
+    border-bottom: 1px solid var(--mk-theme-editor-border);
+}
+
+.title {
+    font-size: 0.875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--mk-foreground);
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+}
+
+.section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.sectionTitle {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--mk-muted-foreground);
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+}
+
+.tokenRow {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+}
+
+.tokenInfo {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+}
+
+.tokenLabel {
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--mk-foreground);
+    font-family: inherit;
+}
+
+.tokenValue {
+    font-size: 0.7rem;
+    color: var(--mk-muted-foreground);
+    font-family: var(--mk-font-mono, monospace);
+}
+
+.colorInput {
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 2px solid var(--mk-theme-editor-border);
+    border-radius: 4px;
+    cursor: pointer;
+    background: none;
+    flex-shrink: 0;
+}
+
+.colorInput::-webkit-color-swatch-wrapper {
+    padding: 0;
+}
+.colorInput::-webkit-color-swatch {
+    border: none;
+    border-radius: 2px;
+}
+
+.footer {
+    padding: 0.75rem 1rem;
+    border-top: 1px solid var(--mk-theme-editor-border);
+    display: flex;
+    gap: 0.5rem;
+    background-color: var(--mk-muted);
+}
+
+.controlButton {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    padding: 0.5rem;
+    border-radius: 6px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: 1px solid var(--mk-theme-editor-border);
+    background-color: var(--mk-background);
+    color: var(--mk-foreground);
+}
+
+.controlButton:hover {
+    background-color: var(--mk-primary);
+    color: var(--mk-primary-foreground);
+}
+
+.minimized {
+    position: fixed;
+    bottom: 1.5rem;
+    right: 1.5rem;
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background-color: var(--mk-primary);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    z-index: 10000;
+    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+    border: none;
+}
+
+.minimized:hover {
+    transform: scale(1.1);
+}

package/dist/components/MkToastContainer.module.css

@@ -0,0 +1,95 @@
+.container {
+    position: fixed;
+    z-index: 9999;
+    padding: 1rem;
+    pointer-events: none;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.toast {
+    --mk-toast-bg: var(--mk-popover);
+    --mk-toast-fg: var(--mk-popover-foreground);
+    --mk-toast-border: var(--mk-border);
+    --mk-toast-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --mk-toast-color: var(--mk-foreground);
+    --mk-toast-radius: var(--mk-radius, 8px);
+
+    background-color: var(--mk-toast-bg);
+    color: var(--mk-toast-fg);
+    border: 1px solid var(--mk-toast-border);
+    border-radius: var(--mk-toast-radius);
+    padding: 0.85rem 1rem;
+    min-width: 280px;
+    max-width: 420px;
+    box-shadow: var(--mk-toast-shadow);
+    pointer-events: auto;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    animation: mk-fade-in 0.3s var(--mk-ease-out) backwards;
+    transition: all 0.3s var(--mk-ease-out);
+}
+
+:global([data-theme='dark']) .toast {
+    --mk-toast-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
+}
+
+.toast.exiting {
+    opacity: 0;
+    transform: scale(0.95);
+}
+
+.content {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.icon {
+    font-size: 1.2rem;
+    flex-shrink: 0;
+}
+
+.text {
+    flex-grow: 1;
+    font-size: 0.95rem;
+    font-weight: 500;
+}
+
+.close {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: var(--mk-muted-foreground);
+    line-height: 1;
+    padding: 0;
+    transition: color 0.15s ease;
+}
+
+.close:hover {
+    color: var(--mk-foreground);
+}
+
+.progress {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 3px;
+    opacity: 0.5;
+}
+
+/* Animations */
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}

package/dist/components/MkTooltip.module.css

@@ -0,0 +1,43 @@
+.wrapper { position: relative; display: inline-flex; }
+
+.tooltip {
+    --mk-tooltip-bg: var(--mk-foreground);
+    --mk-tooltip-color: var(--mk-background);
+    --mk-tooltip-radius: 6px;
+    --mk-tooltip-shadow: 0 4px 12px rgba(0,0,0,0.12);
+
+    position: absolute;
+    z-index: 100;
+    padding: 0.5rem 0.75rem;
+    background-color: var(--mk-tooltip-bg);
+    color: var(--mk-tooltip-color);
+    font-size: 0.8125rem;
+    border-radius: var(--mk-tooltip-radius);
+    white-space: nowrap;
+    pointer-events: none;
+    animation: mk-fade-in 0.1s ease;
+    box-shadow: var(--mk-tooltip-shadow);
+    line-height: 1.4;
+}
+
+:global([data-theme='dark']) .tooltip {
+    --mk-tooltip-shadow: 0 4px 12px rgba(0,0,0,0.4);
+}
+
+.top    { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
+.bottom { top: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
+.left   { right: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
+.right  { left: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
+
+.arrow {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: inherit;
+    transform: rotate(45deg);
+}
+
+.arrowTop    { bottom: -4px; left: 50%; margin-left: -4px; }
+.arrowBottom { top: -4px; left: 50%; margin-left: -4px; }
+.arrowLeft   { right: -4px; top: 50%; margin-top: -4px; }
+.arrowRight  { left: -4px; top: 50%; margin-top: -4px; }

package/dist/components/MkWindowList.module.css

@@ -0,0 +1,59 @@
+.container {
+    --mk-winlist-bg: var(--mk-background);
+    --mk-winlist-border: var(--mk-border);
+    --mk-winlist-radius: var(--mk-radius, 8px);
+    --mk-winlist-muted: var(--mk-muted-foreground);
+    --mk-winlist-accent: var(--mk-primary);
+
+    overflow-y: auto;
+    position: relative;
+    width: 100%;
+    background-color: var(--mk-winlist-bg);
+    border: 1px solid var(--mk-winlist-border);
+    border-radius: var(--mk-winlist-radius);
+    padding: 0;
+    margin: 1rem 0;
+    scrollbar-width: thin;
+    scrollbar-color: var(--mk-muted) transparent;
+    color: var(--mk-foreground);
+}
+
+.scrollArea {
+    position: relative;
+    width: 100%;
+}
+
+.itemWrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--mk-winlist-border);
+}
+
+.loader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding: 1rem;
+    text-align: center;
+    color: var(--mk-winlist-accent);
+    font-weight: 600;
+}
+
+.initialLoader, .empty {
+    padding: 4rem;
+    text-align: center;
+    color: var(--mk-winlist-muted);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+
+.empty {
+    font-style: italic;
+}

package/dist/styles/index.css

@@ -0,0 +1,124 @@
+/**
+ * MK-Director Design Tokens
+ * -------------------------
+ * Overwrite these variables in your own CSS to customize the entire UI Kit.
+ */
+
+:root {
+    /* Colors - Light Mode */
+    --mk-primary: #3b82f6;
+    --mk-primary-foreground: #ffffff;
+
+    --mk-background: #ffffff;
+    --mk-foreground: #0f172a;
+
+    --mk-muted: #f1f5f9;
+    --mk-muted-foreground: #64748b;
+
+    --mk-accent: #f8fafc;
+    --mk-accent-foreground: #0f172a;
+
+    --mk-border: #e2e8f0;
+    --mk-input: #e2e8f0;
+
+    --mk-success: #10b981;
+    --mk-success-foreground: #ffffff;
+    --mk-error: #ef4444;
+    --mk-error-foreground: #ffffff;
+    --mk-warning: #f59e0b;
+    --mk-warning-foreground: #ffffff;
+    --mk-info: #3b82f6;
+    --mk-info-foreground: #ffffff;
+
+    /* Card / Surface */
+    --mk-card: #ffffff;
+    --mk-card-foreground: #0f172a;
+
+    /* Popover / Dropdown */
+    --mk-popover: #ffffff;
+    --mk-popover-foreground: #0f172a;
+
+    /* Shared Tokens */
+    --mk-radius: 0.5rem;
+    --mk-font-sans: 'Inter', system-ui, sans-serif;
+
+    /* Animations & Transitions */
+    --mk-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    --mk-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --mk-ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --mk-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes mk-fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes mk-shimmer {
+    0% {
+        background-position: -200% 0;
+    }
+    100% {
+        background-position: 200% 0;
+    }
+}
+
+@keyframes mk-pulse-subtle {
+    0%,
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.85;
+        transform: scale(0.995);
+    }
+}
+
+/* Dark Mode */
+.mk-dark {
+    --mk-background: #0f172a;
+    --mk-foreground: #f8fafc;
+
+    --mk-muted: #1e293b;
+    --mk-muted-foreground: #94a3b8;
+
+    --mk-accent: #1e293b;
+    --mk-accent-foreground: #f8fafc;
+
+    --mk-border: #334155;
+    --mk-input: #334155;
+
+    --mk-primary: #60a5fa;
+    --mk-primary-foreground: #0f172a;
+
+    --mk-success-foreground: #0f172a;
+    --mk-error-foreground: #ffffff;
+    --mk-warning-foreground: #0f172a;
+    --mk-info-foreground: #0f172a;
+
+    /* Card / Surface */
+    --mk-card: #1e293b;
+    --mk-card-foreground: #f8fafc;
+
+    /* Popover / Dropdown */
+    --mk-popover: #1e293b;
+    --mk-popover-foreground: #f8fafc;
+}
+
+/* Global Styles */
+* {
+    border-color: var(--mk-border);
+}
+
+body {
+    background-color: var(--mk-background);
+    color: var(--mk-foreground);
+    font-family: var(--mk-font-sans);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@makroz/web",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "React UI components and hooks for MK-Director web applications",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.62.0",
-    "@makroz/core": "1.1.1"
+    "@makroz/core": "1.1.2"
   },
   "peerDependencies": {
     "next": "^16.0.0",