mljr-css 0.1.0

package/src/components/stepper.css

@@ -0,0 +1,257 @@
+/* ============================================
+   MLJR CSS Framework - Stepper Component
+   Claymorphism: Step navigation with soft shadows
+   ============================================ */
+
+.mljr-stepper {
+  display: flex;
+  width: 100%;
+}
+
+.mljr-stepper-vertical {
+  flex-direction: column;
+}
+
+.mljr-stepper-horizontal {
+  flex-direction: row;
+}
+
+/* Step Item */
+.mljr-step {
+  display: flex;
+  flex: 1;
+  position: relative;
+}
+
+.mljr-stepper-horizontal .mljr-step {
+  align-items: flex-start;
+}
+
+.mljr-stepper-vertical .mljr-step {
+  align-items: stretch;
+  min-height: 80px;
+}
+
+.mljr-step:not(:last-child)::after {
+  content: '';
+  flex: 1;
+  background: var(--mljr-bg-tertiary);
+  transition: background var(--mljr-transition-fast);
+}
+
+.mljr-stepper-horizontal .mljr-step:not(:last-child)::after {
+  height: 2px;
+  margin-top: 1rem;
+  margin-left: var(--mljr-space-2);
+  margin-right: var(--mljr-space-2);
+  border-radius: var(--mljr-radius-full);
+  box-shadow: var(--mljr-clay-inset-xs);
+}
+
+.mljr-stepper-vertical .mljr-step:not(:last-child)::after {
+  width: 2px;
+  margin-left: 1rem;
+  margin-top: var(--mljr-space-2);
+  margin-bottom: var(--mljr-space-2);
+  border-radius: var(--mljr-radius-full);
+  box-shadow: var(--mljr-clay-inset-xs);
+}
+
+.mljr-step-completed:not(:last-child)::after {
+  background: var(--mljr-primary-500);
+  box-shadow: 0 0 4px rgba(249, 115, 22, 0.3);
+}
+
+/* Step Content */
+.mljr-step-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--mljr-space-2);
+  z-index: 1;
+}
+
+.mljr-stepper-vertical .mljr-step-content {
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+/* Step Indicator */
+.mljr-step-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  font-size: var(--mljr-text-sm);
+  font-weight: 600;
+  color: var(--mljr-text-muted);
+  background: var(--mljr-bg);
+  border-radius: var(--mljr-radius-full);
+  box-shadow: var(--mljr-clay-shadow-sm);
+  transition: all var(--mljr-transition-fast);
+  flex-shrink: 0;
+}
+
+.mljr-step-active .mljr-step-indicator {
+  background: var(--mljr-gradient-primary);
+  color: white;
+  box-shadow: 
+    var(--mljr-clay-shadow-sm),
+    0 0 8px rgba(249, 115, 22, 0.3);
+  transform: scale(1.1);
+}
+
+.mljr-step-completed .mljr-step-indicator {
+  background: var(--mljr-primary-500);
+  color: white;
+}
+
+.mljr-step-error .mljr-step-indicator {
+  background: var(--mljr-error);
+  color: white;
+}
+
+.mljr-step-disabled .mljr-step-indicator {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Step Icon */
+.mljr-step-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* Step Text */
+.mljr-step-text {
+  text-align: center;
+}
+
+.mljr-stepper-vertical .mljr-step-text {
+  text-align: left;
+  padding-top: var(--mljr-space-1);
+}
+
+.mljr-step-title {
+  font-size: var(--mljr-text-sm);
+  font-weight: 500;
+  color: var(--mljr-text-muted);
+  transition: color var(--mljr-transition-fast);
+}
+
+.mljr-step-active .mljr-step-title {
+  color: var(--mljr-text);
+  font-weight: 600;
+}
+
+.mljr-step-completed .mljr-step-title {
+  color: var(--mljr-text);
+}
+
+.mljr-step-description {
+  font-size: var(--mljr-text-xs);
+  color: var(--mljr-text-muted);
+  margin-top: var(--mljr-space-1);
+  max-width: 150px;
+}
+
+.mljr-stepper-vertical .mljr-step-description {
+  max-width: 200px;
+}
+
+/* Clickable Step */
+.mljr-step-clickable {
+  cursor: pointer;
+}
+
+.mljr-step-clickable:hover .mljr-step-indicator {
+  transform: scale(1.1);
+  box-shadow: var(--mljr-clay-shadow);
+}
+
+.mljr-step-clickable.mljr-step-active:hover .mljr-step-indicator {
+  transform: scale(1.15);
+}
+
+/* Step Content Panel */
+.mljr-stepper-content {
+  margin-top: var(--mljr-space-6);
+  padding: var(--mljr-space-6);
+  background: var(--mljr-bg);
+  border-radius: var(--mljr-radius-xl);
+  box-shadow: var(--mljr-clay-inset);
+}
+
+/* Step Actions */
+.mljr-stepper-actions {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--mljr-space-3);
+  margin-top: var(--mljr-space-6);
+}
+
+.mljr-stepper-actions-right {
+  display: flex;
+  gap: var(--mljr-space-3);
+  margin-left: auto;
+}
+
+/* Sizes */
+.mljr-stepper-sm .mljr-step-indicator {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: var(--mljr-text-xs);
+}
+
+.mljr-stepper-sm .mljr-stepper-horizontal .mljr-step:not(:last-child)::after {
+  margin-top: 0.75rem;
+}
+
+.mljr-stepper-lg .mljr-step-indicator {
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: var(--mljr-text-base);
+}
+
+.mljr-stepper-lg .mljr-stepper-horizontal .mljr-step:not(:last-child)::after {
+  margin-top: 1.25rem;
+}
+
+/* Alternative Style - Pills */
+.mljr-stepper-pills .mljr-step-content {
+  flex-direction: row;
+  gap: var(--mljr-space-2);
+  padding: var(--mljr-space-2) var(--mljr-space-4);
+  background: var(--mljr-bg);
+  border-radius: var(--mljr-radius-full);
+  box-shadow: var(--mljr-clay-shadow-sm);
+  transition: all var(--mljr-transition-fast);
+}
+
+.mljr-stepper-pills .mljr-step-active .mljr-step-content {
+  background: var(--mljr-primary-100);
+  box-shadow: var(--mljr-clay-shadow);
+}
+
+.mljr-stepper-pills .mljr-step:not(:last-child)::after {
+  display: none;
+}
+
+/* Dark Mode */
+.dark .mljr-step-indicator,
+[data-theme="dark"] .mljr-step-indicator {
+  background: var(--mljr-bg-secondary);
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+.dark .mljr-step:not(:last-child)::after,
+[data-theme="dark"] .mljr-step:not(:last-child)::after {
+  background: var(--mljr-bg-tertiary);
+}
+
+.dark .mljr-stepper-content,
+[data-theme="dark"] .mljr-stepper-content {
+  background: var(--mljr-bg-secondary);
+  box-shadow: var(--mljr-clay-inset);
+}

package/src/components/table.css

@@ -0,0 +1,184 @@
+/* ============================================
+   MLJR CSS Framework - Table Component
+   Claymorphism: Soft rounded table wrapper
+   ============================================ */
+
+.mljr-table-wrapper {
+  position: relative;
+  width: 100%;
+  overflow-x: auto;
+  border-radius: var(--mljr-radius-lg);
+  box-shadow: var(--mljr-clay-shadow-sm);
+  border: 1px solid var(--mljr-border);
+  background: var(--mljr-bg);
+}
+
+.mljr-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--mljr-text-sm);
+  font-family: var(--mljr-font-sans);
+}
+
+.mljr-table th,
+.mljr-table td,
+.mljr-table-th,
+.mljr-table-td {
+  padding: var(--mljr-space-3) var(--mljr-space-4);
+  text-align: left;
+  border-bottom: 1px solid var(--mljr-border);
+}
+
+.mljr-table th,
+.mljr-table-th,
+.mljr-table-header th {
+  font-weight: 600;
+  font-size: var(--mljr-text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--mljr-text-secondary);
+  background: var(--mljr-bg-secondary);
+}
+
+.mljr-table td,
+.mljr-table-td {
+  color: var(--mljr-text);
+}
+
+.mljr-table tbody tr,
+.mljr-table-body .mljr-table-row {
+  transition: background-color var(--mljr-transition-fast);
+}
+
+.mljr-table tbody tr:hover,
+.mljr-table-body .mljr-table-row:hover {
+  background: var(--mljr-bg-secondary);
+}
+
+.mljr-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+/* Striped variant */
+.mljr-table-striped tbody tr:nth-child(even) {
+  background: var(--mljr-bg-secondary);
+}
+
+.mljr-table-striped tbody tr:nth-child(even):hover {
+  background: var(--mljr-bg-tertiary);
+}
+
+/* Compact variant */
+.mljr-table-compact th,
+.mljr-table-compact td {
+  padding: var(--mljr-space-2) var(--mljr-space-3);
+}
+
+/* Bordered variant */
+.mljr-table-bordered th,
+.mljr-table-bordered td {
+  border: 1px solid var(--mljr-border);
+}
+
+/* Selection styling */
+.mljr-table tbody tr.mljr-table-selected {
+  background: var(--mljr-primary-50);
+}
+
+.mljr-table tbody tr.mljr-table-selected td {
+  color: var(--mljr-primary-700);
+}
+
+.dark .mljr-table tbody tr.mljr-table-selected,
+[data-theme="dark"] .mljr-table tbody tr.mljr-table-selected {
+  background: rgba(249, 115, 22, 0.1);
+}
+
+.dark .mljr-table tbody tr.mljr-table-selected td,
+[data-theme="dark"] .mljr-table tbody tr.mljr-table-selected td {
+  color: var(--mljr-primary-400);
+}
+
+/* Sortable headers */
+.mljr-table th.mljr-table-sortable {
+  cursor: pointer;
+  user-select: none;
+  transition: color var(--mljr-transition-fast);
+}
+
+.mljr-table th.mljr-table-sortable:hover {
+  color: var(--mljr-primary-600);
+}
+
+.mljr-table th.mljr-table-sortable::after {
+  content: '';
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: var(--mljr-space-2);
+  vertical-align: middle;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid currentColor;
+  opacity: 0.3;
+}
+
+.mljr-table th.mljr-table-sort-asc::after {
+  border-top: none;
+  border-bottom: 4px solid currentColor;
+  opacity: 1;
+}
+
+.mljr-table th.mljr-table-sort-desc::after {
+  opacity: 1;
+}
+
+/* Empty state */
+.mljr-table-empty {
+  text-align: center;
+  padding: var(--mljr-space-8) var(--mljr-space-4);
+  color: var(--mljr-text-muted);
+}
+
+/* Responsive stacked table on small screens */
+@media (max-width: 640px) {
+  .mljr-table-responsive thead {
+    display: none;
+  }
+
+  .mljr-table-responsive tbody tr {
+    display: block;
+    margin-bottom: var(--mljr-space-4);
+    border: 1px solid var(--mljr-border);
+    border-radius: var(--mljr-radius-md);
+    overflow: hidden;
+  }
+
+  .mljr-table-responsive tbody td {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--mljr-border);
+  }
+
+  .mljr-table-responsive tbody td::before {
+    content: attr(data-label);
+    font-weight: 600;
+    color: var(--mljr-text-secondary);
+  }
+
+  .mljr-table-responsive tbody td:last-child {
+    border-bottom: none;
+  }
+}
+
+/* Dark mode */
+.dark .mljr-table-wrapper,
+[data-theme="dark"] .mljr-table-wrapper {
+  background: var(--mljr-bg-secondary);
+  border-color: var(--mljr-border);
+}
+
+.dark .mljr-table th,
+[data-theme="dark"] .mljr-table th {
+  background: var(--mljr-bg-tertiary);
+}

package/src/components/tabs.css

@@ -0,0 +1,219 @@
+/* ============================================
+   MLJR CSS Framework - Tabs Component
+   Claymorphism: Soft rounded tabs with clay shadows
+   ============================================ */
+
+.mljr-tabs {
+  width: 100%;
+}
+
+/* Tab List - Default now has soft clay styling */
+.mljr-tabs-list {
+  display: flex;
+  background-color: var(--mljr-bg-secondary);
+  border-radius: var(--mljr-radius-xl);
+  padding: var(--mljr-space-1);
+  gap: var(--mljr-space-1);
+  box-shadow: var(--mljr-clay-inset-sm);
+  border: 1px solid var(--mljr-frosted-border);
+}
+
+.mljr-tabs-list-center { justify-content: center; }
+.mljr-tabs-list-end { justify-content: flex-end; }
+.mljr-tabs-list-stretch .mljr-tab { flex: 1; }
+
+/* Tab Trigger - Soft rounded with clay effect */
+.mljr-tab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--mljr-space-2);
+  padding: var(--mljr-space-2) var(--mljr-space-4);
+  font-size: var(--mljr-text-sm);
+  font-weight: 500;
+  color: var(--mljr-text-secondary);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: all var(--mljr-transition-fast);
+  white-space: nowrap;
+  position: relative;
+  border-radius: var(--mljr-radius-lg);
+}
+
+.mljr-tab:hover {
+  color: var(--mljr-text);
+  background-color: var(--mljr-bg-tertiary);
+}
+
+.mljr-tab:focus-visible {
+  outline: 3px solid var(--mljr-primary-300);
+  outline-offset: -2px;
+  border-radius: var(--mljr-radius-lg);
+}
+
+.mljr-tab[aria-selected="true"],
+.mljr-tab.mljr-tab-active {
+  color: var(--mljr-primary-600);
+  background-color: var(--mljr-bg);
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+.dark .mljr-tabs-list,
+[data-theme="dark"] .mljr-tabs-list {
+  background-color: var(--mljr-bg-secondary);
+  border-color: var(--mljr-border);
+}
+
+.dark .mljr-tab[aria-selected="true"],
+.dark .mljr-tab.mljr-tab-active,
+[data-theme="dark"] .mljr-tab[aria-selected="true"],
+[data-theme="dark"] .mljr-tab.mljr-tab-active {
+  background-color: var(--mljr-bg-tertiary);
+  color: var(--mljr-primary-400);
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+.mljr-tab:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Secondary Color Tabs (Purple) */
+.mljr-tabs-secondary .mljr-tab[aria-selected="true"],
+.mljr-tabs-secondary .mljr-tab.mljr-tab-active {
+  color: var(--mljr-secondary-600);
+  background: linear-gradient(135deg, var(--mljr-secondary-50) 0%, var(--mljr-secondary-100) 100%);
+  box-shadow:
+    6px 6px 12px rgba(168, 85, 247, 0.15),
+    -4px -4px 10px rgba(255, 255, 255, 0.9),
+    inset 0px 2px 4px rgba(255, 255, 255, 0.5);
+}
+
+.dark .mljr-tabs-secondary .mljr-tab[aria-selected="true"],
+.dark .mljr-tabs-secondary .mljr-tab.mljr-tab-active,
+[data-theme="dark"] .mljr-tabs-secondary .mljr-tab[aria-selected="true"],
+[data-theme="dark"] .mljr-tabs-secondary .mljr-tab.mljr-tab-active {
+  background: rgba(168, 85, 247, 0.15);
+  color: var(--mljr-secondary-400);
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+/* Tab Content */
+.mljr-tabs-content {
+  padding: var(--mljr-space-4) 0;
+}
+
+.mljr-tabs-panel {
+  display: none;
+}
+
+.mljr-tabs-panel[data-state="active"],
+.mljr-tabs-panel.mljr-tabs-panel-active {
+  display: block;
+  animation: mljr-tab-content-in var(--mljr-transition) ease-out;
+}
+
+.mljr-tabs-panel:not([hidden]) {
+  display: block;
+  animation: mljr-tab-content-in var(--mljr-transition) ease-out;
+}
+
+/* Tab content slide-in animation */
+@keyframes mljr-tab-content-in {
+  0% {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Note: mljr-fade-in keyframe is defined in modal.css */
+
+/* Pill Tabs Variant - Even more rounded */
+.mljr-tabs-pills .mljr-tabs-list {
+  border-radius: var(--mljr-radius-full);
+}
+
+.mljr-tabs-pills .mljr-tab {
+  border-radius: var(--mljr-radius-full);
+}
+
+.mljr-tabs-pills .mljr-tab[aria-selected="true"],
+.mljr-tabs-pills .mljr-tab.mljr-tab-active {
+  border-radius: var(--mljr-radius-full);
+}
+
+/* Bordered Tabs Variant - Card-style tabs */
+.mljr-tabs-bordered .mljr-tabs-list {
+  background: transparent;
+  box-shadow: none;
+  border: none;
+  border-bottom: 1px solid var(--mljr-border);
+  border-radius: 0;
+  padding: 0;
+}
+
+.mljr-tabs-bordered .mljr-tab {
+  border-radius: var(--mljr-radius-lg) var(--mljr-radius-lg) 0 0;
+  border: 1px solid transparent;
+  border-bottom: none;
+  margin-bottom: -1px;
+}
+
+.mljr-tabs-bordered .mljr-tab[aria-selected="true"],
+.mljr-tabs-bordered .mljr-tab.mljr-tab-active {
+  background-color: var(--mljr-bg);
+  border-color: var(--mljr-border);
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+.mljr-tabs-bordered .mljr-tabs-content {
+  background: var(--mljr-frosted-bg-subtle);
+  border: 1px solid var(--mljr-border);
+  border-top: none;
+  border-radius: 0 0 var(--mljr-radius-lg) var(--mljr-radius-lg);
+  padding: var(--mljr-space-4);
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+/* Vertical Tabs */
+.mljr-tabs-vertical {
+  display: flex;
+  gap: var(--mljr-space-4);
+}
+
+.mljr-tabs-vertical .mljr-tabs-list {
+  flex-direction: column;
+  border-radius: var(--mljr-radius-xl);
+  min-width: 160px;
+}
+
+.mljr-tabs-vertical .mljr-tab {
+  justify-content: flex-start;
+  border-radius: var(--mljr-radius-lg);
+}
+
+.mljr-tabs-vertical .mljr-tab[aria-selected="true"],
+.mljr-tabs-vertical .mljr-tab.mljr-tab-active {
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+.mljr-tabs-vertical .mljr-tabs-content {
+  flex: 1;
+  padding: 0;
+}
+
+/* Tab Sizes */
+.mljr-tabs-sm .mljr-tab {
+  padding: var(--mljr-space-1) var(--mljr-space-3);
+  font-size: var(--mljr-text-xs);
+}
+
+.mljr-tabs-lg .mljr-tab {
+  padding: var(--mljr-space-3) var(--mljr-space-5);
+  font-size: var(--mljr-text-base);
+}