@makroz/web 1.2.1 → 1.2.3

package/dist/components/MkAccordion.module.css

@@ -0,0 +1,79 @@
+.accordion { 
+    --mk-accordion-border: var(--mk-border);
+    --mk-accordion-bg: transparent;
+    --mk-accordion-header-hover: var(--mk-muted);
+    --mk-accordion-radius: var(--mk-radius, 8px);
+    --mk-accordion-color: var(--mk-foreground);
+    --mk-accordion-muted-color: var(--mk-muted-foreground);
+
+    width: 100%; 
+    color: var(--mk-accordion-color);
+}
+
+/* ── Default ── */
+.default .item { border-bottom: 1px solid var(--mk-accordion-border); }
+.default .item:last-child { border-bottom: none; }
+
+/* ── Bordered ── */
+.bordered { 
+    border: 1px solid var(--mk-accordion-border); 
+    border-radius: var(--mk-accordion-radius); 
+    overflow: hidden; 
+}
+.bordered .item + .item { border-top: 1px solid var(--mk-accordion-border); }
+
+/* ── Separated ── */
+.separated { display: flex; flex-direction: column; gap: 0.5rem; }
+.separated .item { 
+    border: 1px solid var(--mk-accordion-border); 
+    border-radius: var(--mk-accordion-radius); 
+    overflow: hidden; 
+}
+
+/* ── Header ── */
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 0.875rem 1rem;
+    background-color: var(--mk-accordion-bg);
+    border: none;
+    cursor: pointer;
+    color: inherit;
+    font-size: 0.9375rem;
+    font-weight: 500;
+    outline: none;
+    transition: background-color 0.15s ease;
+    text-align: left;
+}
+
+.header:hover { background-color: var(--mk-accordion-header-hover); }
+.header:focus-visible { box-shadow: inset 0 0 0 2px var(--mk-primary); }
+.header:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.title { flex: 1; }
+
+.chevron {
+    display: flex;
+    color: var(--mk-accordion-muted-color);
+    transition: transform 0.2s ease;
+    flex-shrink: 0;
+}
+.chevronOpen { transform: rotate(180deg); }
+
+/* ── Body ── */
+.body {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.25s ease;
+}
+
+.bodyOpen { max-height: 1000px; }
+
+.content {
+    padding: 0 1rem 1rem;
+    font-size: 0.875rem;
+    color: var(--mk-accordion-muted-color);
+    line-height: 1.6;
+}

package/dist/components/MkAlert.module.css

@@ -0,0 +1,103 @@
+.alert {
+    --mk-alert-bg: var(--mk-muted);
+    --mk-alert-border: var(--mk-primary);
+    --mk-alert-color: var(--mk-foreground);
+
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    padding: 0.875rem 1rem;
+    border-radius: var(--mk-radius, 8px);
+    border-left: 4px solid var(--mk-alert-border);
+    background-color: var(--mk-alert-bg);
+    color: var(--mk-alert-color);
+    transition: all 0.2s ease;
+}
+
+.icon {
+    font-size: 1.1rem;
+    flex-shrink: 0;
+    padding-top: 1px;
+    color: var(--mk-alert-border);
+}
+
+.body {
+    flex: 1;
+    min-width: 0;
+}
+.title {
+    display: block;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+}
+.content {
+    margin: 0;
+    font-size: 0.875rem;
+    line-height: 1.5;
+}
+.action {
+    margin-top: 0.5rem;
+}
+
+.dismiss {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 0.875rem;
+    flex-shrink: 0;
+    padding: 2px 4px;
+    border-radius: 4px;
+    line-height: 1;
+    color: currentColor;
+    opacity: 0.6;
+    transition: opacity 0.15s;
+}
+.dismiss:hover {
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+/* Variants - solid tinted backgrounds (12% color, not 90% transparent) */
+.info {
+    --mk-alert-border: #3b82f6;
+    --mk-alert-bg: color-mix(in srgb, #3b82f6 12%, var(--mk-background));
+    --mk-alert-color: #1e3a5f;
+}
+
+.success {
+    --mk-alert-border: #22c55e;
+    --mk-alert-bg: color-mix(in srgb, #22c55e 12%, var(--mk-background));
+    --mk-alert-color: #14532d;
+}
+
+.warning {
+    --mk-alert-border: #f59e0b;
+    --mk-alert-bg: color-mix(in srgb, #f59e0b 12%, var(--mk-background));
+    --mk-alert-color: #78350f;
+}
+
+.error {
+    --mk-alert-border: #ef4444;
+    --mk-alert-bg: color-mix(in srgb, #ef4444 12%, var(--mk-background));
+    --mk-alert-color: #7f1d1d;
+}
+
+.default {
+    --mk-alert-border: var(--mk-primary);
+    --mk-alert-bg: var(--mk-muted);
+}
+
+/* Dark mode overrides */
+.mk-dark .info {
+    --mk-alert-color: #bfdbfe;
+}
+.mk-dark .success {
+    --mk-alert-color: #bbf7d0;
+}
+.mk-dark .warning {
+    --mk-alert-color: #fde68a;
+}
+.mk-dark .error {
+    --mk-alert-color: #fecaca;
+}

package/dist/components/MkAvatar.module.css

@@ -0,0 +1,62 @@
+.avatar {
+    --mk-avatar-bg: var(--mk-muted);
+    --mk-avatar-color: var(--mk-foreground);
+    --mk-avatar-radius: 50%;
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--mk-avatar-radius);
+    background-color: var(--mk-avatar-bg);
+    overflow: hidden;
+    flex-shrink: 0;
+}
+
+.image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.initials {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--mk-avatar-color);
+    font-weight: 600;
+    letter-spacing: 0.025em;
+}
+
+.status {
+    --mk-status-border: var(--mk-background);
+
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 25%;
+    height: 25%;
+    min-width: 8px;
+    min-height: 8px;
+    border-radius: 50%;
+    border: 2px solid var(--mk-status-border);
+}
+
+.online {
+    --mk-status-bg: #22c55e;
+    background-color: var(--mk-status-bg);
+}
+.offline {
+    --mk-status-bg: #9ca3af;
+    background-color: var(--mk-status-bg);
+}
+.away {
+    --mk-status-bg: #f59e0b;
+    background-color: var(--mk-status-bg);
+}
+.busy {
+    --mk-status-bg: #ef4444;
+    background-color: var(--mk-status-bg);
+}

package/dist/components/MkBadge.module.css

@@ -0,0 +1,74 @@
+.badge {
+    --mk-badge-bg: var(--mk-muted);
+    --mk-badge-color: var(--mk-foreground);
+    --mk-badge-radius: 999px;
+
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-weight: 500;
+    border-radius: var(--mk-badge-radius);
+    white-space: nowrap;
+    line-height: 1;
+    background-color: var(--mk-badge-bg);
+    color: var(--mk-badge-color);
+    transition: all 0.2s ease;
+}
+
+.sm {
+    font-size: 0.6875rem;
+    padding: 0.125rem 0.5rem;
+}
+.md {
+    font-size: 0.75rem;
+    padding: 0.25rem 0.625rem;
+}
+
+/* Variants - solid background with contrasting text */
+.default {
+    --mk-badge-bg: var(--mk-muted);
+    --mk-badge-color: var(--mk-foreground);
+}
+
+.primary {
+    --mk-badge-bg: var(--mk-primary);
+    --mk-badge-color: var(--mk-primary-foreground);
+}
+
+.success {
+    --mk-badge-bg: #22c55e;
+    --mk-badge-color: #ffffff;
+}
+
+.warning {
+    --mk-badge-bg: #f59e0b;
+    --mk-badge-color: #ffffff;
+}
+
+.error {
+    --mk-badge-bg: #ef4444;
+    --mk-badge-color: #ffffff;
+}
+
+.info {
+    --mk-badge-bg: #3b82f6;
+    --mk-badge-color: #ffffff;
+}
+
+/* Dark mode - adjust for better visibility */
+.mk-dark .success {
+    --mk-badge-bg: #16a34a;
+    --mk-badge-color: #ffffff;
+}
+.mk-dark .warning {
+    --mk-badge-bg: #d97706;
+    --mk-badge-color: #ffffff;
+}
+
+.dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: currentColor;
+    flex-shrink: 0;
+}

package/dist/components/MkButton.module.css

@@ -0,0 +1,85 @@
+.button {
+    --mk-btn-bg: var(--mk-primary);
+    --mk-btn-color: var(--mk-primary-foreground);
+    --mk-btn-border: transparent;
+    --mk-btn-radius: var(--mk-radius, 8px);
+    --mk-btn-padding: 0.5rem 1rem;
+    --mk-btn-font-size: 0.875rem;
+    --mk-btn-gap: 0.5rem;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--mk-btn-padding);
+    font-family: var(--mk-font-sans);
+    font-weight: 500;
+    font-size: var(--mk-btn-font-size);
+    border-radius: var(--mk-btn-radius);
+    background-color: var(--mk-btn-bg);
+    color: var(--mk-btn-color);
+    border: 1px solid var(--mk-btn-border);
+    gap: var(--mk-btn-gap);
+    cursor: pointer;
+    transition: var(--mk-transition);
+    outline: none;
+}
+
+.button:active {
+    transform: scale(0.98);
+}
+
+.button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Variants */
+.primary {
+    --mk-btn-bg: var(--mk-primary);
+    --mk-btn-color: var(--mk-primary-foreground);
+}
+
+.primary:hover:not(:disabled) {
+    filter: brightness(1.1);
+}
+
+.outline {
+    --mk-btn-bg: transparent;
+    --mk-btn-border: var(--mk-border);
+    --mk-btn-color: var(--mk-foreground);
+}
+
+.outline:hover:not(:disabled) {
+    background-color: var(--mk-accent);
+}
+
+.ghost {
+    --mk-btn-bg: transparent;
+    --mk-btn-border: transparent;
+    --mk-btn-color: var(--mk-foreground);
+}
+
+.ghost:hover:not(:disabled) {
+    background-color: var(--mk-accent);
+}
+
+.error {
+    --mk-btn-bg: var(--mk-error);
+    --mk-btn-color: #ffffff;
+}
+
+/* Loader Animation */
+.loader {
+    width: 1rem;
+    height: 1rem;
+    border: 2px solid currentColor;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}

package/dist/components/MkCard.module.css

@@ -0,0 +1,63 @@
+.card {
+    --mk-card-bg: var(--mk-background);
+    --mk-card-border: var(--mk-border);
+    --mk-card-radius: var(--mk-radius, 8px);
+    --mk-card-shadow: none;
+    --mk-card-hover-shadow: 0 6px 16px rgba(0,0,0,0.1);
+    --mk-card-color: var(--mk-foreground);
+    --mk-card-muted-color: var(--mk-muted-foreground);
+
+    border-radius: var(--mk-card-radius);
+    background-color: var(--mk-card-bg);
+    color: var(--mk-card-color);
+    transition: var(--mk-transition);
+    overflow: hidden;
+}
+
+:global([data-theme='dark']) .card {
+    --mk-card-hover-shadow: 0 6px 16px rgba(0,0,0,0.4);
+}
+
+.default { border: 1px solid var(--mk-card-border); }
+.outlined { border: 2px solid var(--mk-card-border); background: transparent; }
+.elevated { 
+    --mk-card-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
+    border: none; 
+    box-shadow: var(--mk-card-shadow); 
+}
+
+:global([data-theme='dark']) .elevated {
+    --mk-card-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.2);
+}
+
+.pad-none {}
+.pad-sm { padding: 0.75rem; }
+.pad-md { padding: 1rem; }
+.pad-lg { padding: 1.5rem; }
+
+.clickable { cursor: pointer; }
+.clickable:hover { box-shadow: var(--mk-card-hover-shadow); transform: translateY(-1px); }
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 0.75rem;
+}
+
+.title {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: inherit;
+}
+
+.subtitle {
+    margin: 0.125rem 0 0;
+    font-size: 0.8125rem;
+    color: var(--mk-card-muted-color);
+}
+
+.headerRight { flex-shrink: 0; }
+.body {}
+.footer { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--mk-card-border); }

package/dist/components/MkCheck.module.css

@@ -0,0 +1,87 @@
+.container {
+    --mk-check-bg: var(--mk-background);
+    --mk-check-border: var(--mk-border);
+    --mk-check-checked-bg: var(--mk-primary);
+    --mk-check-radius: calc(var(--mk-radius, 8px) * 0.375);
+    --mk-check-color: var(--mk-foreground);
+    --mk-check-accent: var(--mk-primary);
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    color: var(--mk-check-color);
+}
+
+.label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    user-select: none;
+    color: inherit;
+}
+
+.label.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.checkbox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid var(--mk-check-border);
+    border-radius: var(--mk-check-radius);
+    background-color: var(--mk-check-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; }
+
+.checkbox:hover {
+    border-color: var(--mk-check-accent);
+}
+
+.checkbox:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-check-accent), transparent 80%);
+}
+
+.checked {
+    background-color: var(--mk-check-checked-bg);
+    border-color: var(--mk-check-checked-bg);
+    color: var(--mk-primary-foreground, #fff);
+}
+
+.indeterminate {
+    background-color: var(--mk-check-checked-bg);
+    border-color: var(--mk-check-checked-bg);
+    color: var(--mk-primary-foreground, #fff);
+}
+
+.error {
+    --mk-check-border: var(--mk-error);
+    --mk-check-accent: var(--mk-error);
+}
+
+.icon {
+    width: 12px;
+    height: 12px;
+}
+
+.text {
+    font-size: 0.875rem;
+    color: inherit;
+    line-height: 1.4;
+}
+
+.errorText {
+    font-size: 0.75rem;
+    color: var(--mk-error);
+    font-weight: 500;
+    margin-left: 1.75rem;
+}

package/dist/components/MkDatePicker.module.css

@@ -0,0 +1,77 @@
+.wrapper {
+    --mk-datepicker-bg: var(--mk-background);
+    --mk-datepicker-border: var(--mk-border);
+    --mk-datepicker-color: var(--mk-foreground);
+    --mk-datepicker-radius: var(--mk-radius, 8px);
+    --mk-datepicker-focus: var(--mk-primary);
+    
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    width: 100%;
+    color: var(--mk-datepicker-color);
+}
+
+.label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: inherit;
+    opacity: 0.9;
+}
+
+.inputContainer {
+    position: relative;
+    width: 100%;
+}
+
+.input {
+    width: 100%;
+    padding: 0.625rem 0.875rem;
+    font-size: 0.875rem;
+    color: inherit;
+    background-color: var(--mk-datepicker-bg);
+    border: 1px solid var(--mk-datepicker-border);
+    border-radius: var(--mk-datepicker-radius);
+    transition: all 0.2s ease;
+    outline: none;
+    font-family: inherit;
+    appearance: none;
+}
+
+/* Browser calendar indicator */
+.input::-webkit-calendar-picker-indicator {
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.2s ease;
+}
+
+:global([data-theme='dark']) .input::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+    opacity: 0.8;
+}
+
+.input::-webkit-calendar-picker-indicator:hover {
+    opacity: 1;
+}
+
+.input:focus {
+    border-color: var(--mk-datepicker-focus);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-datepicker-focus), transparent 85%);
+}
+
+.hasError {
+    --mk-datepicker-border: var(--mk-error);
+    --mk-datepicker-focus: var(--mk-error);
+}
+
+.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background-color: var(--mk-muted);
+}
+
+.errorText {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--mk-error);
+}

package/dist/components/MkDivider.module.css

@@ -0,0 +1,39 @@
+.horizontal {
+    --mk-divider-color: var(--mk-border);
+    --mk-divider-thickness: 1px;
+    
+    width: 100%;
+    height: var(--mk-divider-thickness);
+    background-color: var(--mk-divider-color);
+}
+
+.solid { border-style: none; }
+.dashed { background: none; border-top: var(--mk-divider-thickness) dashed var(--mk-divider-color); height: 0; }
+.dotted { background: none; border-top: var(--mk-divider-thickness) dotted var(--mk-divider-color); height: 0; }
+
+.h-sm { margin: 0.5rem 0; }
+.h-md { margin: 1rem 0; }
+.h-lg { margin: 1.5rem 0; }
+
+.vertical {
+    --mk-divider-color: var(--mk-border);
+    --mk-divider-thickness: 1px;
+
+    width: var(--mk-divider-thickness);
+    align-self: stretch;
+    background-color: var(--mk-divider-color);
+    min-height: 1em;
+}
+
+.v-sm { margin: 0 0.5rem; }
+.v-md { margin: 0 1rem; }
+.v-lg { margin: 0 1.5rem; }
+
+.withLabel {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.line { flex: 1; height: var(--mk-divider-thickness, 1px); background-color: var(--mk-divider-color, var(--mk-border)); }
+.label { font-size: 0.75rem; color: var(--mk-muted-foreground); white-space: nowrap; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }