@makroz/web 1.3.0 → 1.4.0

package/dist/components/MkThemeEditor.module.css

@@ -1,177 +0,0 @@
-.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

@@ -1,95 +0,0 @@
-.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

@@ -1,43 +0,0 @@
-.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

@@ -1,59 +0,0 @@
-.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

@@ -1,124 +0,0 @@
-/**
- * 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);
-}