mljr-css 1.0.14 → 1.1.0

package/src/components/dock.css

@@ -0,0 +1,211 @@
+/* ============================================
+   MLJR CSS Framework - Dock Component
+   Claymorphism: Bottom navigation dock (mobile/macOS style)
+   ============================================ */
+
+.mljr-dock {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--mljr-space-2);
+  padding: var(--mljr-space-2) var(--mljr-space-4);
+  background: linear-gradient(
+    145deg,
+    var(--mljr-bg) 0%,
+    var(--mljr-bg-secondary) 100%
+  );
+  border-radius: var(--mljr-radius-2xl);
+  box-shadow: var(--mljr-clay-shadow-lg);
+  border: 1px solid var(--mljr-frosted-border);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+/* Fixed bottom positioning */
+.mljr-dock-fixed {
+  position: fixed;
+  bottom: var(--mljr-space-4);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+  max-width: calc(100vw - var(--mljr-space-8));
+}
+
+/* Frosted glass variant */
+.mljr-dock-frosted {
+  background: rgba(255, 255, 255, 0.7);
+}
+
+.dark .mljr-dock-frosted {
+  background: rgba(28, 25, 23, 0.7);
+}
+
+/* Full width variant */
+.mljr-dock-full {
+  border-radius: 0;
+  width: 100%;
+  justify-content: space-around;
+}
+
+/* Dock item */
+.mljr-dock-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--mljr-space-1);
+  padding: var(--mljr-space-2) var(--mljr-space-3);
+  border-radius: var(--mljr-radius-lg);
+  cursor: pointer;
+  text-decoration: none;
+  color: var(--mljr-text-secondary);
+  background: transparent;
+  border: none;
+  font-family: inherit;
+  transition: all var(--mljr-transition-fast);
+  position: relative;
+  min-width: 52px;
+}
+
+.mljr-dock-item:hover {
+  background: linear-gradient(
+    145deg,
+    var(--mljr-bg-secondary) 0%,
+    var(--mljr-bg-tertiary) 100%
+  );
+  color: var(--mljr-text);
+  box-shadow: var(--mljr-clay-shadow-sm);
+  transform: translateY(-4px) scale(1.08);
+}
+
+.mljr-dock-item:active {
+  transform: translateY(-2px) scale(1.04);
+}
+
+/* Active state */
+.mljr-dock-item-active {
+  color: var(--mljr-primary-600);
+}
+
+.mljr-dock-item-active .mljr-dock-icon-wrapper {
+  background: linear-gradient(
+    145deg,
+    var(--mljr-primary-50) 0%,
+    var(--mljr-primary-100) 100%
+  );
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+.dark .mljr-dock-item-active {
+  color: var(--mljr-primary-400);
+}
+
+.dark .mljr-dock-item-active .mljr-dock-icon-wrapper {
+  background: linear-gradient(
+    145deg,
+    rgba(249, 115, 22, 0.2) 0%,
+    rgba(249, 115, 22, 0.1) 100%
+  );
+}
+
+/* Active dot indicator */
+.mljr-dock-item-active::after {
+  content: '';
+  position: absolute;
+  bottom: 2px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 4px;
+  height: 4px;
+  background: var(--mljr-primary-500);
+  border-radius: var(--mljr-radius-full);
+}
+
+/* Icon wrapper */
+.mljr-dock-icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--mljr-radius-md);
+  transition: all var(--mljr-transition-fast);
+}
+
+/* Item label */
+.mljr-dock-label {
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+/* Badge */
+.mljr-dock-badge {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  background: var(--mljr-error);
+  color: white;
+  font-size: 10px;
+  font-weight: 700;
+  min-width: 16px;
+  height: 16px;
+  border-radius: var(--mljr-radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+  line-height: 1;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+/* Dock without labels */
+.mljr-dock-no-labels .mljr-dock-label {
+  display: none;
+}
+
+.mljr-dock-no-labels .mljr-dock-item-active::after {
+  bottom: 4px;
+}
+
+/* Dock sizes */
+.mljr-dock-sm .mljr-dock-icon-wrapper {
+  width: 24px;
+  height: 24px;
+}
+
+.mljr-dock-sm .mljr-dock-item {
+  min-width: 40px;
+  padding: var(--mljr-space-1) var(--mljr-space-2);
+}
+
+.mljr-dock-lg .mljr-dock-icon-wrapper {
+  width: 40px;
+  height: 40px;
+}
+
+.mljr-dock-lg .mljr-dock-item {
+  min-width: 64px;
+  padding: var(--mljr-space-3) var(--mljr-space-4);
+}
+
+/* Dock divider */
+.mljr-dock-divider {
+  width: 1px;
+  height: 40px;
+  background: var(--mljr-border);
+  border-radius: var(--mljr-radius-full);
+  flex-shrink: 0;
+  margin: 0 var(--mljr-space-1);
+}
+
+/* Zoom effect on hover (macOS-like) */
+.mljr-dock-zoom .mljr-dock-item:hover {
+  transform: translateY(-8px) scale(1.2);
+}
+
+.mljr-dock-zoom .mljr-dock-item:hover + .mljr-dock-item,
+.mljr-dock-zoom .mljr-dock-item:has(+ .mljr-dock-item:hover) {
+  transform: translateY(-4px) scale(1.1);
+}

package/src/components/drop-zone.css

@@ -0,0 +1,257 @@
+/* ============================================================
+   DropZone / Advanced File Upload Component
+   ============================================================ */
+
+/* ── Drop zone wrapper ── */
+.mljr-dropzone {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mljr-space-4);
+}
+
+/* ── Main drop area ── */
+.mljr-dropzone-area {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--mljr-space-3);
+  padding: var(--mljr-space-10) var(--mljr-space-6);
+  border: 2px dashed var(--mljr-border);
+  border-radius: var(--mljr-radius-xl);
+  background: var(--mljr-bg-secondary);
+  cursor: pointer;
+  text-align: center;
+  transition:
+    border-color var(--mljr-transition-fast),
+    background var(--mljr-transition-fast),
+    transform var(--mljr-transition-fast);
+  outline: none;
+}
+
+.mljr-dropzone-area:hover,
+.mljr-dropzone-area:focus-visible {
+  border-color: var(--mljr-primary-400);
+  background: color-mix(in srgb, var(--mljr-primary-500) 4%, var(--mljr-bg-secondary));
+}
+
+.mljr-dropzone-area.mljr-dropzone-dragging {
+  border-color: var(--mljr-primary-500);
+  border-style: solid;
+  background: color-mix(in srgb, var(--mljr-primary-500) 8%, var(--mljr-bg-secondary));
+  transform: scale(1.01);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mljr-primary-500) 20%, transparent);
+}
+
+.mljr-dropzone-area.mljr-dropzone-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.mljr-dropzone-area.mljr-dropzone-error {
+  border-color: var(--mljr-error);
+}
+
+/* ── Icon ── */
+.mljr-dropzone-icon {
+  width: 48px;
+  height: 48px;
+  color: var(--mljr-text-muted);
+  transition: color var(--mljr-transition-fast);
+}
+
+.mljr-dropzone-area:hover .mljr-dropzone-icon,
+.mljr-dropzone-area.mljr-dropzone-dragging .mljr-dropzone-icon {
+  color: var(--mljr-primary-500);
+}
+
+/* ── Text ── */
+.mljr-dropzone-title {
+  font-size: var(--mljr-text-base);
+  font-weight: 600;
+  color: var(--mljr-text);
+}
+
+.mljr-dropzone-subtitle {
+  font-size: var(--mljr-text-sm);
+  color: var(--mljr-text-muted);
+}
+
+.mljr-dropzone-hint {
+  font-size: var(--mljr-text-xs);
+  color: var(--mljr-text-muted);
+  margin-top: var(--mljr-space-1);
+}
+
+/* ── File list ── */
+.mljr-dropzone-files {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mljr-space-2);
+}
+
+/* ── File item ── */
+.mljr-dropzone-file {
+  display: flex;
+  align-items: center;
+  gap: var(--mljr-space-3);
+  padding: var(--mljr-space-3) var(--mljr-space-4);
+  background: var(--mljr-bg-secondary);
+  border: 1px solid var(--mljr-border);
+  border-radius: var(--mljr-radius-lg);
+  box-shadow: var(--mljr-clay-shadow-sm);
+  transition: box-shadow var(--mljr-transition-fast);
+}
+
+.mljr-dropzone-file:hover {
+  box-shadow: var(--mljr-clay-shadow);
+}
+
+/* ── Thumbnail / preview ── */
+.mljr-dropzone-thumb {
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  border-radius: var(--mljr-radius-md);
+  object-fit: cover;
+  background: var(--mljr-bg);
+  border: 1px solid var(--mljr-border);
+}
+
+.mljr-dropzone-file-icon {
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  border-radius: var(--mljr-radius-md);
+  background: var(--mljr-bg);
+  border: 1px solid var(--mljr-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--mljr-text-muted);
+  font-size: var(--mljr-text-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+/* ── File info ── */
+.mljr-dropzone-file-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mljr-space-1);
+}
+
+.mljr-dropzone-file-name {
+  font-size: var(--mljr-text-sm);
+  font-weight: 500;
+  color: var(--mljr-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mljr-dropzone-file-size {
+  font-size: var(--mljr-text-xs);
+  color: var(--mljr-text-muted);
+}
+
+/* ── Progress bar ── */
+.mljr-dropzone-progress {
+  height: 4px;
+  background: var(--mljr-border);
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.mljr-dropzone-progress-fill {
+  height: 100%;
+  background: var(--mljr-primary-500);
+  border-radius: 999px;
+  transition: width 0.3s ease;
+}
+
+.mljr-dropzone-file-uploading .mljr-dropzone-progress-fill {
+  background: var(--mljr-primary-500);
+}
+
+.mljr-dropzone-file-complete .mljr-dropzone-progress-fill {
+  background: var(--mljr-success);
+}
+
+.mljr-dropzone-file-error .mljr-dropzone-progress-fill {
+  background: var(--mljr-error);
+}
+
+/* ── File status badge ── */
+.mljr-dropzone-status {
+  display: flex;
+  align-items: center;
+  gap: var(--mljr-space-1);
+  font-size: var(--mljr-text-xs);
+}
+
+.mljr-dropzone-status-uploading { color: var(--mljr-primary-500); }
+.mljr-dropzone-status-complete  { color: var(--mljr-success); }
+.mljr-dropzone-status-error     { color: var(--mljr-error); }
+.mljr-dropzone-status-idle      { color: var(--mljr-text-muted); }
+
+/* ── Remove button ── */
+.mljr-dropzone-remove {
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: transparent;
+  border: 1px solid var(--mljr-border);
+  color: var(--mljr-text-muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--mljr-transition-fast);
+  padding: 0;
+}
+
+.mljr-dropzone-remove:hover {
+  background: var(--mljr-error-bg, color-mix(in srgb, var(--mljr-error) 12%, transparent));
+  border-color: var(--mljr-error);
+  color: var(--mljr-error);
+}
+
+/* ── Error message ── */
+.mljr-dropzone-error-msg {
+  font-size: var(--mljr-text-sm);
+  color: var(--mljr-error);
+  padding: var(--mljr-space-2) var(--mljr-space-3);
+  background: color-mix(in srgb, var(--mljr-error) 10%, transparent);
+  border-radius: var(--mljr-radius-md);
+  border: 1px solid color-mix(in srgb, var(--mljr-error) 30%, transparent);
+}
+
+/* ── Summary row ── */
+.mljr-dropzone-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--mljr-text-sm);
+  color: var(--mljr-text-muted);
+}
+
+.mljr-dropzone-clear-all {
+  background: none;
+  border: none;
+  font-size: var(--mljr-text-sm);
+  color: var(--mljr-text-muted);
+  cursor: pointer;
+  padding: var(--mljr-space-1) var(--mljr-space-2);
+  border-radius: var(--mljr-radius-sm);
+  transition: color var(--mljr-transition-fast);
+}
+
+.mljr-dropzone-clear-all:hover {
+  color: var(--mljr-error);
+}

package/src/components/footer.css

@@ -4,9 +4,6 @@
    ============================================ */
 
 .mljr-footer {
-  background: var(--mljr-bg-secondary);
-  border-top: 1px solid var(--mljr-border);
-  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
   position: relative;
 }
 
@@ -209,9 +206,9 @@
 /* Dark Mode */
 .dark .mljr-footer,
 [data-theme="dark"] .mljr-footer {
-  background: var(--mljr-bg-secondary);
+  background: transparent;
   border-color: var(--mljr-border);
-  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
+  box-shadow: none;
 }
 
 .dark .mljr-footer::before,
@@ -229,3 +226,52 @@
 [data-theme="dark"] .mljr-footer-bottom {
   border-color: var(--mljr-border);
 }
+
+/* Newsletter signup */
+.mljr-footer-newsletter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mljr-space-6);
+  padding: var(--mljr-space-6) 0;
+  border-bottom: 1px solid var(--mljr-border);
+  flex-wrap: wrap;
+}
+
+.mljr-footer-newsletter-content {
+  flex: 1;
+  min-width: 200px;
+}
+
+.mljr-footer-newsletter-title {
+  font-size: var(--mljr-text-lg);
+  font-weight: 700;
+  color: var(--mljr-text);
+  margin: 0 0 var(--mljr-space-1) 0;
+}
+
+.mljr-footer-newsletter-desc {
+  font-size: var(--mljr-text-sm);
+  color: var(--mljr-text-secondary);
+  margin: 0;
+}
+
+.mljr-footer-newsletter-form {
+  display: flex;
+  gap: var(--mljr-space-2);
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.mljr-footer-newsletter-input {
+  min-width: 200px;
+}
+
+.mljr-footer-newsletter-success {
+  display: flex;
+  align-items: center;
+  gap: var(--mljr-space-2);
+  color: var(--mljr-success);
+  font-size: var(--mljr-text-sm);
+  font-weight: 500;
+}

package/src/components/gauge.css

@@ -0,0 +1,63 @@
+/* ============================================
+   MLJR CSS Framework - Gauge Component
+   Claymorphism: Circular arc SVG gauge
+   ============================================ */
+
+.mljr-gauge {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--mljr-space-2);
+  font-family: var(--mljr-font-sans);
+}
+
+.mljr-gauge-svg {
+  display: block;
+  overflow: visible;
+}
+
+.mljr-gauge-track {
+  fill: none;
+  stroke-linecap: round;
+  opacity: 0.18;
+}
+
+.dark .mljr-gauge-track,
+[data-theme="dark"] .mljr-gauge-track {
+  opacity: 0.22;
+}
+
+.mljr-gauge-fill {
+  fill: none;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.mljr-gauge-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  line-height: 1.2;
+}
+
+.mljr-gauge-value {
+  font-size: 1.75rem;
+  font-weight: 800;
+  color: var(--mljr-text);
+  line-height: 1;
+}
+
+.mljr-gauge-unit {
+  font-size: var(--mljr-text-sm);
+  font-weight: 500;
+  color: var(--mljr-text-muted);
+  margin-top: 2px;
+}
+
+.mljr-gauge-label {
+  font-size: var(--mljr-text-sm);
+  font-weight: 500;
+  color: var(--mljr-text-muted);
+  text-align: center;
+}