@makroz/web 1.2.1 → 1.2.3

package/dist/components/MkDropDown.module.css

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

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

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

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

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

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

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

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

@@ -0,0 +1,74 @@
+.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; }