@makroz/web 1.2.6 → 1.4.0

package/dist/components/MkDropDown.module.css

@@ -1,108 +0,0 @@
-.container {
-    position: relative;
-    display: inline-block;
-}
-
-.trigger {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: var(--mk-transition);
-    opacity: 0.8;
-}
-
-.trigger:hover {
-    opacity: 1;
-}
-
-.menu {
-    --mk-dropdown-bg: var(--mk-popover);
-    --mk-dropdown-fg: var(--mk-popover-foreground);
-    --mk-dropdown-border: var(--mk-border);
-    --mk-dropdown-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    --mk-dropdown-radius: var(--mk-radius, 8px);
-
-    position: absolute;
-    top: calc(100% + 8px);
-    right: 0;
-    min-width: 200px;
-    max-width: 300px;
-    background-color: var(--mk-dropdown-bg);
-    color: var(--mk-dropdown-fg);
-    border: 1px solid var(--mk-dropdown-border);
-    border-radius: var(--mk-dropdown-radius);
-    box-shadow: var(--mk-dropdown-shadow);
-    z-index: 50;
-    overflow: hidden;
-    animation: mk-fade-in 0.2s ease-out;
-}
-
-:global([data-theme='dark']) .menu {
-    --mk-dropdown-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
-}
-
-.search {
-    padding: 8px;
-    border-bottom: 1px solid var(--mk-border);
-    background-color: var(--mk-muted);
-}
-
-.searchInput {
-    width: 100%;
-    padding: 6px 12px;
-    background-color: var(--mk-background);
-    border: 1px solid var(--mk-border);
-    border-radius: 4px;
-    color: inherit;
-    font-size: 0.875rem;
-    outline: none;
-}
-
-.searchInput:focus {
-    border-color: var(--mk-primary);
-}
-
-.optionsList {
-    max-height: 250px;
-    overflow-y: auto;
-    padding: 4px;
-}
-
-.option {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 12px;
-    border-radius: 4px;
-    cursor: pointer;
-    color: inherit;
-    font-size: 0.875rem;
-    transition: var(--mk-transition);
-}
-
-.option:hover {
-    background-color: var(--mk-muted);
-}
-
-.active {
-    background-color: var(--mk-primary);
-    color: var(--mk-primary-foreground);
-}
-
-.active:hover {
-    background-color: var(--mk-primary);
-}
-
-.icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.empty {
-    padding: 12px;
-    text-align: center;
-    color: var(--mk-muted-foreground);
-    font-size: 0.875rem;
-}

package/dist/components/MkEmptyState.module.css

@@ -1,35 +0,0 @@
-.container {
-    --mk-empty-color: var(--mk-foreground);
-    --mk-empty-muted-color: var(--mk-muted-foreground);
-    --mk-empty-padding: 3rem 1.5rem;
-    --mk-empty-gap: 0.5rem;
-
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: var(--mk-empty-padding);
-    gap: var(--mk-empty-gap);
-    text-align: center;
-    color: var(--mk-empty-color);
-}
-
-.icon { font-size: 2.5rem; color: var(--mk-empty-muted-color); }
-.defaultIcon { font-size: 3rem; color: var(--mk-empty-muted-color); opacity: 0.8; }
-
-.title {
-    margin: 0;
-    font-size: 1.125rem;
-    font-weight: 600;
-    color: inherit;
-}
-
-.description {
-    margin: 0;
-    font-size: 0.875rem;
-    color: var(--mk-empty-muted-color);
-    max-width: 320px;
-    line-height: 1.5;
-}
-
-.action { margin-top: 0.75rem; }

package/dist/components/MkFileUpload.module.css

@@ -1,74 +0,0 @@
-.container { 
-    --mk-upload-bg: var(--mk-muted);
-    --mk-upload-border: var(--mk-border);
-    --mk-upload-radius: var(--mk-radius, 8px);
-    --mk-upload-hover-bg: color-mix(in srgb, var(--mk-primary), transparent 95%);
-    --mk-upload-accent: var(--mk-primary);
-    --mk-upload-color: var(--mk-foreground);
-    --mk-upload-muted-color: var(--mk-muted-foreground);
-
-    display: flex; 
-    flex-direction: column; 
-    gap: 0.75rem; 
-}
-
-.dropzone {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 0.375rem;
-    padding: 2rem 1.5rem;
-    border: 2px dashed var(--mk-upload-border);
-    border-radius: var(--mk-upload-radius);
-    background-color: var(--mk-upload-bg);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    text-align: center;
-    outline: none;
-    color: var(--mk-upload-color);
-}
-
-.dropzone:hover, .dropzone:focus-visible {
-    border-color: var(--mk-upload-accent);
-    background-color: var(--mk-upload-hover-bg);
-}
-
-.dragging {
-    border-color: var(--mk-upload-accent);
-    background-color: color-mix(in srgb, var(--mk-upload-accent), transparent 88%);
-    transform: scale(1.01);
-}
-
-.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
-.hasError { 
-    --mk-upload-border: var(--mk-error); 
-    --mk-upload-accent: var(--mk-error);
-    --mk-upload-hover-bg: color-mix(in srgb, var(--mk-error), transparent 95%);
-}
-
-.hiddenInput { display: none; }
-.uploadIcon { font-size: 2rem; color: var(--mk-upload-muted-color); }
-.label { font-size: 0.9375rem; font-weight: 500; color: inherit; }
-.sublabel { font-size: 0.8125rem; color: var(--mk-upload-muted-color); }
-.error { font-size: 0.8125rem; color: var(--mk-error); font-weight: 500; margin: 0; }
-
-.fileList { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
-
-.fileItem {
-    display: flex;
-    align-items: center;
-    gap: 0.625rem;
-    padding: 0.5rem 0.75rem;
-    background-color: var(--mk-upload-bg);
-    border: 1px solid var(--mk-upload-border);
-    border-radius: 6px;
-    color: var(--mk-upload-color);
-}
-
-.thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
-.fileIconDoc { font-size: 1.5rem; flex-shrink: 0; }
-.fileName { flex: 1; font-size: 0.875rem; color: inherit; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
-.fileSize { font-size: 0.75rem; color: var(--mk-upload-muted-color); flex-shrink: 0; }
-.removeBtn { background: none; border: none; cursor: pointer; color: var(--mk-upload-muted-color); font-size: 0.875rem; padding: 2px 4px; border-radius: 4px; transition: all 0.15s ease; }
-.removeBtn:hover { color: var(--mk-error); background-color: color-mix(in srgb, var(--mk-error), transparent 95%); }

package/dist/components/MkInfiniteList.module.css

@@ -1,69 +0,0 @@
-.scrollContainer {
-    --mk-inf-list-gap: 1rem;
-    --mk-inf-list-item-bg: transparent;
-    --mk-inf-list-border: var(--mk-border);
-    --mk-inf-list-radius: var(--mk-radius, 8px);
-    --mk-inf-list-muted-color: var(--mk-muted-foreground);
-
-    width: 100%;
-    margin: 1rem 0;
-}
-
-.list {
-    display: flex;
-    flex-direction: column;
-    gap: var(--mk-inf-list-gap);
-}
-
-.itemWrapper {
-    width: 100%;
-    background-color: var(--mk-inf-list-item-bg);
-    animation: mk-fade-in 0.5s var(--mk-ease-out) backwards;
-    animation-delay: calc(var(--row-index, 0) * 0.05s);
-}
-
-.trigger {
-    height: 10px;
-    margin-top: 10px;
-}
-
-.loadingArea {
-    display: flex;
-    flex-direction: column;
-    gap: var(--mk-inf-list-gap);
-    padding: 1rem 0;
-}
-
-.defaultSkeleton {
-    height: 4rem;
-    background-color: var(--mk-muted);
-    background-image: linear-gradient(
-        90deg,
-        transparent 25%,
-        var(--mk-border) 50%,
-        transparent 75%
-    );
-    background-size: 200% 100%;
-    animation: mk-shimmer 2s infinite linear;
-    border-radius: var(--mk-inf-list-radius);
-    width: 100%;
-}
-
-.empty {
-    text-align: center;
-    padding: 4rem 1rem;
-    color: var(--mk-inf-list-muted-color);
-    font-size: 0.875rem;
-    border: 1px dashed var(--mk-inf-list-border);
-    border-radius: var(--mk-inf-list-radius);
-}
-
-@keyframes skeleton-loading {
-    0% { background-position: 200% 0; }
-    100% { background-position: -200% 0; }
-}
-
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
-}

package/dist/components/MkInput.module.css

@@ -1,94 +0,0 @@
-.container {
-    --mk-input-bg: var(--mk-background);
-    --mk-input-border: var(--mk-border);
-    --mk-input-color: var(--mk-foreground);
-    --mk-input-radius: var(--mk-radius, 8px);
-    --mk-input-focus-border: var(--mk-primary);
-    --mk-input-placeholder: var(--mk-muted-foreground);
-    
-    display: flex;
-    flex-direction: column;
-    gap: 0.375rem;
-    width: 100%;
-}
-
-.label {
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: var(--mk-input-color);
-    opacity: 0.9;
-}
-
-.wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 100%;
-}
-
-.input {
-    width: 100%;
-    padding: 0.625rem 0.875rem;
-    font-size: 0.875rem;
-    background-color: var(--mk-input-bg);
-    border: 1px solid var(--mk-input-border);
-    border-radius: var(--mk-input-radius);
-    color: var(--mk-input-color);
-    transition: var(--mk-transition);
-    outline: none;
-}
-
-.input::placeholder {
-    color: var(--mk-input-placeholder);
-}
-
-.input:focus {
-    border-color: var(--mk-input-focus-border);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-input-focus-border), transparent 85%);
-}
-
-.wrapperError .input {
-    --mk-input-border: var(--mk-error);
-    --mk-input-focus-border: var(--mk-error);
-}
-
-.wrapperSuccess .input {
-    --mk-input-border: var(--mk-success, #10b981);
-    --mk-input-focus-border: var(--mk-success, #10b981);
-}
-
-.iconLeft, .iconRight {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--mk-muted-foreground);
-    pointer-events: none;
-}
-
-.iconLeft {
-    left: 0.875rem;
-}
-
-.iconRight {
-    right: 0.875rem;
-}
-
-.inputWithLeft {
-    padding-left: 2.5rem;
-}
-
-.inputWithRight {
-    padding-right: 2.5rem;
-}
-
-.errorText {
-    font-size: 0.75rem;
-    color: var(--mk-error);
-    font-weight: 500;
-}
-
-.helperText {
-    font-size: 0.75rem;
-    color: var(--mk-muted-foreground);
-}

package/dist/components/MkLoading.module.css

@@ -1,39 +0,0 @@
-.wrapper {
-    --mk-loading-color: var(--mk-primary);
-    --mk-loading-muted: var(--mk-muted-foreground);
-    --mk-loading-overlay-bg: color-mix(in srgb, var(--mk-background) 80%, transparent);
-    --mk-loading-overlay-blur: 4px;
-
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 0.75rem;
-}
-
-.spinner {
-    animation: mk-spin 0.75s linear infinite;
-    color: var(--mk-loading-color);
-}
-
-@keyframes mk-spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.label {
-    font-size: 0.8125rem;
-    color: var(--mk-loading-muted);
-}
-
-.overlay {
-    position: fixed;
-    inset: 0;
-    z-index: 9999;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--mk-loading-overlay-bg);
-    backdrop-filter: blur(var(--mk-loading-overlay-blur));
-}

package/dist/components/MkModal.module.css

@@ -1,107 +0,0 @@
-.overlay {
-    --mk-modal-overlay: rgba(0, 0, 0, 0.4);
-    --mk-modal-blur: 8px;
-
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background: var(--mk-modal-overlay);
-    backdrop-filter: blur(var(--mk-modal-blur));
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-    animation: mk-fade-in 0.3s ease-out;
-}
-
-:global([data-theme='dark']) .overlay {
-    --mk-modal-overlay: rgba(0, 0, 0, 0.6);
-}
-
-.container {
-    --mk-modal-bg: var(--mk-background);
-    --mk-modal-border: var(--mk-border);
-    --mk-modal-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-    --mk-modal-color: var(--mk-foreground);
-    --mk-modal-header-bg: transparent;
-    --mk-modal-footer-bg: var(--mk-muted);
-
-    background: var(--mk-modal-bg);
-    border: 1px solid var(--mk-modal-border);
-    border-radius: var(--mk-radius);
-    max-width: 90vw;
-    max-height: 90vh;
-    display: flex;
-    flex-direction: column;
-    box-shadow: var(--mk-modal-shadow);
-    animation: mk-scale-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-    overflow: hidden;
-    color: var(--mk-modal-color);
-}
-
-:global([data-theme='dark']) .container {
-    --mk-modal-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
-}
-
-.sm { width: 400px; }
-.md { width: 600px; }
-.lg { width: 800px; }
-.full { width: 95vw; height: 95vh; }
-
-.header {
-    padding: 1.5rem;
-    border-bottom: 1px solid var(--mk-modal-border);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background: var(--mk-modal-header-bg);
-}
-
-.header h2 {
-    margin: 0;
-    font-size: 1.25rem;
-    font-weight: 700;
-    color: inherit;
-}
-
-.closeBtn {
-    background: none;
-    border: none;
-    font-size: 1.5rem;
-    color: var(--mk-muted-foreground);
-    cursor: pointer;
-    transition: var(--mk-transition);
-    line-height: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 4px;
-    border-radius: 4px;
-}
-
-.closeBtn:hover {
-    color: var(--mk-foreground);
-    background-color: var(--mk-muted);
-}
-
-.content {
-    padding: 1.5rem;
-    overflow-y: auto;
-    line-height: 1.6;
-}
-
-.footer {
-    padding: 1.5rem;
-    border-top: 1px solid var(--mk-modal-border);
-    display: flex;
-    justify-content: flex-end;
-    gap: 1rem;
-    background: var(--mk-modal-footer-bg);
-}
-
-@keyframes mk-scale-up {
-    from { transform: scale(0.9) translateY(20px); opacity: 0; }
-    to { transform: scale(1) translateY(0); opacity: 1; }
-}

package/dist/components/MkProgressBar.module.css

@@ -1,48 +0,0 @@
-.container { 
-    display: flex; 
-    flex-direction: column; 
-    gap: 0.375rem; 
-    width: 100%; 
-}
-
-.header { display: flex; justify-content: space-between; align-items: center; }
-.label { font-size: 0.8125rem; font-weight: 500; color: var(--mk-foreground); }
-.percent { font-size: 0.75rem; color: var(--mk-muted-foreground); font-weight: 600; font-variant-numeric: tabular-nums; }
-
-.track {
-    --mk-progress-track-bg: var(--mk-muted);
-    --mk-progress-radius: 999px;
-
-    width: 100%;
-    background-color: var(--mk-progress-track-bg);
-    border-radius: var(--mk-progress-radius);
-    overflow: hidden;
-}
-
-.sm { height: 4px; }
-.md { height: 8px; }
-.lg { height: 12px; }
-
-.bar {
-    --mk-progress-color: var(--mk-primary);
-    
-    height: 100%;
-    border-radius: 999px;
-    background-color: var(--mk-progress-color);
-    transition: width 0.4s ease, background-color 0.2s ease;
-}
-
-.animated { animation: mk-progress-shimmer 2s infinite; }
-
-@keyframes mk-progress-shimmer {
-    0% { opacity: 1; }
-    50% { opacity: 0.75; }
-    100% { opacity: 1; }
-}
-
-/* Variant Overrides */
-.primary { --mk-progress-color: var(--mk-primary); }
-.success { --mk-progress-color: #22c55e; }
-.warning { --mk-progress-color: #f59e0b; }
-.error   { --mk-progress-color: #ef4444; }
-.info    { --mk-progress-color: #3b82f6; }

package/dist/components/MkRadio.module.css

@@ -1,74 +0,0 @@
-.container { 
-    --mk-radio-bg: var(--mk-background);
-    --mk-radio-border: var(--mk-border);
-    --mk-radio-accent: var(--mk-primary);
-    --mk-radio-color: var(--mk-foreground);
-    --mk-radio-muted-color: var(--mk-muted-foreground);
-
-    display: flex; 
-    flex-direction: column; 
-    gap: 0.375rem; 
-    color: var(--mk-radio-color);
-}
-
-.groupLabel { 
-    font-size: 0.875rem; 
-    font-weight: 500; 
-    color: inherit;
-    opacity: 0.9; 
-}
-
-.options { display: flex; gap: 0.75rem; }
-.vertical { flex-direction: column; }
-.horizontal { flex-direction: row; flex-wrap: wrap; }
-
-.option {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    cursor: pointer;
-    user-select: none;
-    color: inherit;
-}
-.option.disabled { opacity: 0.5; cursor: not-allowed; }
-
-.radio {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 2px solid var(--mk-radio-border);
-    border-radius: 50%;
-    background-color: var(--mk-radio-bg);
-    transition: all 0.15s ease;
-    flex-shrink: 0;
-    cursor: pointer;
-}
-
-.sm { width: 16px; height: 16px; }
-.md { width: 20px; height: 20px; }
-.lg { width: 24px; height: 24px; }
-
-.radio:hover { border-color: var(--mk-radio-accent); }
-.radio:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-radio-accent), transparent 80%); }
-
-.selected { border-color: var(--mk-radio-accent); }
-.error { 
-    --mk-radio-border: var(--mk-error);
-    --mk-radio-accent: var(--mk-error);
-}
-
-.dot {
-    width: 60%;
-    height: 60%;
-    border-radius: 50%;
-    background-color: var(--mk-radio-accent);
-    animation: mk-scale-in 0.15s ease;
-}
-
-@keyframes mk-scale-in {
-    from { transform: scale(0); }
-    to { transform: scale(1); }
-}
-
-.text { font-size: 0.875rem; color: inherit; }
-.errorText { font-size: 0.75rem; color: var(--mk-error); font-weight: 500; }