mljr-css 0.1.0

package/src/components/input.css

@@ -0,0 +1,504 @@
+/* ============================================
+   MLJR CSS Framework - Input Component
+   Claymorphism: Soft, pressed-in fields
+   ============================================ */
+
+/* Shared input container base */
+.mljr-input-container,
+.mljr-textarea-container,
+.mljr-select-container,
+.mljr-search,
+.mljr-number-input {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+/* Shared input/textarea base styles */
+.mljr-input,
+.mljr-textarea {
+  display: block;
+  width: 100%;
+  padding: var(--mljr-space-3) var(--mljr-space-4);
+  font-size: var(--mljr-text-sm);
+  line-height: var(--mljr-leading-normal);
+  color: var(--mljr-text);
+  background-color: var(--mljr-bg);
+  border: none;
+  border-radius: var(--mljr-radius-md);
+  box-shadow: var(--mljr-clay-inset);
+  transition: box-shadow var(--mljr-transition-fast), background-color var(--mljr-transition-fast);
+}
+
+.mljr-input::placeholder,
+.mljr-textarea::placeholder {
+  color: var(--mljr-text-muted);
+}
+
+.mljr-input:hover,
+.mljr-textarea:hover {
+  background-color: var(--mljr-bg-secondary);
+}
+
+.mljr-input:focus,
+.mljr-textarea:focus {
+  outline: none;
+  background-color: var(--mljr-bg);
+  box-shadow:
+    var(--mljr-clay-inset-sm),
+    0 0 0 3px var(--mljr-primary-200);
+}
+
+.mljr-input:disabled,
+.mljr-textarea:disabled {
+  background-color: var(--mljr-bg-tertiary);
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.mljr-input:read-only {
+  background-color: var(--mljr-bg-secondary);
+}
+
+.mljr-textarea {
+  min-height: 80px;
+  resize: vertical;
+}
+
+/* Input Sizes */
+.mljr-input-sm {
+  padding: var(--mljr-space-2) var(--mljr-space-3);
+  font-size: var(--mljr-text-xs);
+  border-radius: var(--mljr-radius-sm);
+}
+
+.mljr-input-lg {
+  padding: var(--mljr-space-4) var(--mljr-space-5);
+  font-size: var(--mljr-text-base);
+  border-radius: var(--mljr-radius-lg);
+}
+
+/* Input States - error */
+.mljr-input-error,
+.mljr-input-container-error .mljr-input {
+  box-shadow:
+    var(--mljr-clay-inset),
+    inset 0 0 0 2px var(--mljr-error-light);
+}
+
+.mljr-input-error:focus,
+.mljr-input-container-error .mljr-input:focus {
+  box-shadow:
+    var(--mljr-clay-inset-sm),
+    0 0 0 3px rgba(239, 68, 68, 0.2);
+}
+
+/* Input States - success */
+.mljr-input-success,
+.mljr-input-container-success .mljr-input {
+  box-shadow:
+    var(--mljr-clay-inset),
+    inset 0 0 0 2px var(--mljr-success-light);
+}
+
+.mljr-input-success:focus,
+.mljr-input-container-success .mljr-input:focus {
+  box-shadow:
+    var(--mljr-clay-inset-sm),
+    0 0 0 3px rgba(16, 185, 129, 0.2);
+}
+
+/* Input with Icon */
+.mljr-input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.mljr-input-icon-left {
+  position: absolute;
+  left: var(--mljr-space-4);
+  pointer-events: none;
+  color: var(--mljr-text-muted);
+  z-index: 1;
+}
+
+.mljr-input-icon-right {
+  position: absolute;
+  right: var(--mljr-space-4);
+  pointer-events: none;
+  color: var(--mljr-text-muted);
+  z-index: 1;
+}
+
+.mljr-input-wrapper .mljr-input-icon-left + .mljr-input {
+  padding-left: var(--mljr-space-10);
+}
+
+.mljr-input-wrapper .mljr-input:has(+ .mljr-input-icon-right),
+.mljr-input--icon-right {
+  padding-right: var(--mljr-space-10);
+}
+
+/* Form Group */
+.mljr-form-group {
+  margin-bottom: var(--mljr-space-4);
+}
+
+/* Label */
+.mljr-label {
+  display: block;
+  margin-bottom: var(--mljr-space-2);
+  font-size: var(--mljr-text-sm);
+  font-weight: 500;
+  color: var(--mljr-text);
+}
+
+.mljr-label-required::after {
+  content: " *";
+  color: var(--mljr-error);
+}
+
+/* Helper Text */
+.mljr-input-helper {
+  margin-top: var(--mljr-space-1);
+  font-size: var(--mljr-text-xs);
+  color: var(--mljr-text-muted);
+}
+
+.mljr-input-error-text {
+  margin-top: var(--mljr-space-1);
+  font-size: var(--mljr-text-xs);
+  color: var(--mljr-error);
+}
+
+/* ============================================
+   Range Slider - Soft rounded style
+   ============================================ */
+
+.mljr-range {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 8px;
+  background: var(--mljr-bg-tertiary);
+  border-radius: var(--mljr-radius-full);
+  outline: none;
+  cursor: pointer;
+  box-shadow: var(--mljr-clay-inset-sm);
+}
+
+.mljr-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 1.5rem;
+  height: 1.5rem;
+  background: var(--mljr-gradient-primary);
+  border-radius: var(--mljr-radius-full);
+  cursor: pointer;
+  border: none;
+  box-shadow: var(--mljr-clay-shadow-sm);
+  transition: all var(--mljr-transition-fast);
+}
+
+.mljr-range::-moz-range-thumb {
+  width: 1.5rem;
+  height: 1.5rem;
+  background: var(--mljr-gradient-primary);
+  border-radius: var(--mljr-radius-full);
+  cursor: pointer;
+  border: none;
+  box-shadow: var(--mljr-clay-shadow-sm);
+  transition: all var(--mljr-transition-fast);
+}
+
+.mljr-range::-webkit-slider-thumb:hover {
+  transform: scale(1.1);
+  box-shadow: var(--mljr-clay-shadow);
+}
+
+.mljr-range::-moz-range-thumb:hover {
+  transform: scale(1.1);
+  box-shadow: var(--mljr-clay-shadow);
+}
+
+.mljr-range:focus::-webkit-slider-thumb {
+  box-shadow: var(--mljr-clay-shadow), 0 0 0 4px var(--mljr-primary-200);
+}
+
+.mljr-range:focus::-moz-range-thumb {
+  box-shadow: var(--mljr-clay-shadow), 0 0 0 4px var(--mljr-primary-200);
+}
+
+/* Range with progress fill */
+.mljr-range-filled {
+  background: linear-gradient(to right, var(--mljr-primary-400) 0%, var(--mljr-primary-400) var(--mljr-range-value, 50%), var(--mljr-bg-tertiary) var(--mljr-range-value, 50%));
+}
+
+/* Secondary range */
+.mljr-range-secondary::-webkit-slider-thumb {
+  background: var(--mljr-gradient-secondary);
+}
+
+.mljr-range-secondary::-moz-range-thumb {
+  background: var(--mljr-gradient-secondary);
+}
+
+/* ============================================
+   Number Input with Spinner
+   ============================================ */
+
+.mljr-number-input {
+  display: flex;
+  align-items: stretch;
+  border-radius: var(--mljr-radius-md);
+  overflow: hidden;
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+.mljr-number-input .mljr-input {
+  text-align: center;
+  box-shadow: none;
+  border-radius: 0;
+  -moz-appearance: textfield;
+}
+
+.mljr-number-input .mljr-input::-webkit-inner-spin-button,
+.mljr-number-input .mljr-input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.mljr-number-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  background: var(--mljr-bg-secondary);
+  border: none;
+  cursor: pointer;
+  color: var(--mljr-text);
+  transition: all var(--mljr-transition-fast);
+}
+
+.mljr-number-btn:hover {
+  background: var(--mljr-primary-100);
+  color: var(--mljr-primary-600);
+}
+
+.mljr-number-btn:active {
+  background: var(--mljr-primary-200);
+}
+
+.mljr-number-btn-decrement {
+  border-radius: var(--mljr-radius-md) 0 0 var(--mljr-radius-md);
+}
+
+.mljr-number-btn-increment {
+  border-radius: 0 var(--mljr-radius-md) var(--mljr-radius-md) 0;
+}
+
+/* ============================================
+   Search Input
+   ============================================ */
+
+.mljr-search {
+  box-shadow: var(--mljr-clay-inset);
+  border-radius: var(--mljr-radius-full);
+  background: var(--mljr-bg);
+}
+
+.mljr-search:focus-within {
+  box-shadow:
+    var(--mljr-clay-inset-sm),
+    0 0 0 3px var(--mljr-primary-200);
+}
+
+.mljr-search-input {
+  width: 100%;
+  padding: var(--mljr-space-3) var(--mljr-space-12);
+  background: transparent;
+  border: none;
+  border-radius: var(--mljr-radius-full);
+}
+
+.mljr-search-input:focus {
+  outline: none;
+}
+
+.mljr-search-icon {
+  position: absolute;
+  left: var(--mljr-space-4);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--mljr-text-muted);
+  z-index: 2;
+  pointer-events: none;
+}
+
+.mljr-search-clear {
+  position: absolute;
+  right: var(--mljr-space-3);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1.75rem;
+  height: 1.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--mljr-bg-secondary);
+  border: none;
+  border-radius: var(--mljr-radius-full);
+  color: var(--mljr-text-muted);
+  cursor: pointer;
+  z-index: 2;
+  transition: all var(--mljr-transition-fast);
+}
+
+.mljr-search-clear:hover {
+  background: var(--mljr-bg-tertiary);
+  color: var(--mljr-text);
+}
+
+/* ============================================
+   Color Picker
+   ============================================ */
+
+.mljr-color-picker {
+  display: flex;
+  align-items: center;
+  gap: var(--mljr-space-3);
+}
+
+.mljr-color-input {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 3rem;
+  height: 3rem;
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  border-radius: var(--mljr-radius-md);
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+.mljr-color-input::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.mljr-color-input::-webkit-color-swatch {
+  border: none;
+  border-radius: var(--mljr-radius-md);
+}
+
+.mljr-color-input::-moz-color-swatch {
+  border: none;
+  border-radius: var(--mljr-radius-md);
+}
+
+.mljr-color-preview {
+  width: 3rem;
+  height: 3rem;
+  border-radius: var(--mljr-radius-md);
+  background: var(--mljr-color-value, var(--mljr-primary-500));
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+/* ============================================
+   File Input
+   ============================================ */
+
+.mljr-file-input {
+  position: relative;
+  display: inline-flex;
+  cursor: pointer;
+}
+
+.mljr-file-input input[type="file"] {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.mljr-file-input-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mljr-space-2);
+  padding: var(--mljr-space-3) var(--mljr-space-5);
+  font-size: var(--mljr-text-sm);
+  font-weight: 500;
+  color: var(--mljr-text);
+  background: var(--mljr-bg);
+  border-radius: var(--mljr-radius-lg);
+  box-shadow: var(--mljr-clay-btn);
+  transition: all var(--mljr-transition-fast);
+}
+
+.mljr-file-input:hover .mljr-file-input-label {
+  transform: translateY(-2px);
+  box-shadow: var(--mljr-clay-shadow);
+}
+
+.mljr-file-input:active .mljr-file-input-label {
+  transform: translateY(0);
+  box-shadow: var(--mljr-clay-btn-pressed);
+}
+
+/* Drop zone */
+.mljr-drop-zone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--mljr-space-3);
+  padding: var(--mljr-space-10);
+  text-align: center;
+  cursor: pointer;
+  border-radius: var(--mljr-radius-xl);
+  border: 2px dashed var(--mljr-border-strong);
+  background: var(--mljr-bg-secondary);
+  transition: all var(--mljr-transition-fast);
+}
+
+.mljr-drop-zone:hover,
+.mljr-drop-zone.dragging {
+  border-color: var(--mljr-primary-400);
+  background: var(--mljr-primary-50);
+}
+
+.mljr-drop-zone-icon {
+  width: 3rem;
+  height: 3rem;
+  color: var(--mljr-text-muted);
+}
+
+.mljr-drop-zone-text {
+  font-size: var(--mljr-text-sm);
+  color: var(--mljr-text-secondary);
+}
+
+.mljr-drop-zone-hint {
+  font-size: var(--mljr-text-xs);
+  color: var(--mljr-text-muted);
+}
+
+/* Dark mode */
+.dark .mljr-input,
+.dark .mljr-textarea,
+[data-theme="dark"] .mljr-input,
+[data-theme="dark"] .mljr-textarea {
+  background-color: var(--mljr-bg-secondary);
+  box-shadow: var(--mljr-clay-inset);
+}
+
+.dark .mljr-input:focus,
+.dark .mljr-textarea:focus,
+[data-theme="dark"] .mljr-input:focus,
+[data-theme="dark"] .mljr-textarea:focus {
+  box-shadow:
+    var(--mljr-clay-inset-sm),
+    0 0 0 3px rgba(249, 115, 22, 0.2);
+}

package/src/components/modal.css

@@ -0,0 +1,179 @@
+/* ============================================
+   MLJR CSS Framework - Modal Component
+   Claymorphism: Frosted glass modals
+   ============================================ */
+
+/* Modal Backdrop */
+.mljr-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--mljr-z-modal-backdrop);
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--mljr-space-4);
+}
+
+.mljr-modal-backdrop[data-state="open"] { animation: mljr-fade-in var(--mljr-transition); }
+.mljr-modal-backdrop[data-state="closed"] { animation: mljr-fade-out var(--mljr-transition); }
+
+/* Modal Container */
+.mljr-modal {
+  position: relative;
+  z-index: var(--mljr-z-modal);
+  width: 100%;
+  max-width: 32rem;
+  max-height: calc(100vh - var(--mljr-space-8));
+  background-color: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(20px);
+  border-radius: var(--mljr-radius-2xl);
+  box-shadow: var(--mljr-clay-shadow-xl);
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.mljr-modal[data-state="open"] { animation: mljr-scale-in var(--mljr-transition); }
+.mljr-modal[data-state="closed"] { animation: mljr-scale-out var(--mljr-transition); }
+
+/* Modal Sizes */
+.mljr-modal-sm { max-width: 24rem; }
+.mljr-modal-lg { max-width: 48rem; }
+.mljr-modal-xl { max-width: 64rem; }
+.mljr-modal-full {
+  max-width: calc(100vw - var(--mljr-space-8));
+  max-height: calc(100vh - var(--mljr-space-8));
+}
+
+/* Modal Header */
+.mljr-modal-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--mljr-space-4);
+  padding: var(--mljr-space-6);
+  border-bottom: 1px solid var(--mljr-border);
+}
+
+.mljr-modal-title {
+  font-family: var(--mljr-font-display);
+  font-size: var(--mljr-text-xl);
+  font-weight: 600;
+  color: var(--mljr-text);
+}
+
+.mljr-modal-description {
+  margin-top: var(--mljr-space-1);
+  font-size: var(--mljr-text-sm);
+  color: var(--mljr-text-secondary);
+}
+
+.mljr-modal-close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  background: var(--mljr-bg-secondary);
+  border: none;
+  border-radius: var(--mljr-radius-full);
+  color: var(--mljr-text-muted);
+  cursor: pointer;
+  transition: all var(--mljr-transition-fast);
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+.mljr-modal-close:hover {
+  background-color: var(--mljr-bg-tertiary);
+  color: var(--mljr-text);
+  transform: scale(1.05);
+}
+
+.mljr-modal-close:active {
+  box-shadow: var(--mljr-clay-inset-sm);
+  transform: scale(1);
+}
+
+.mljr-modal-close:focus-visible {
+  outline: 3px solid var(--mljr-primary-300);
+  outline-offset: 2px;
+}
+
+/* Modal Body */
+.mljr-modal-body {
+  flex: 1;
+  padding: var(--mljr-space-6);
+  overflow-y: auto;
+}
+
+/* Modal Footer */
+.mljr-modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--mljr-space-3);
+  padding: var(--mljr-space-4) var(--mljr-space-6);
+  border-top: 1px solid var(--mljr-border);
+  background-color: rgba(255, 251, 247, 0.5);
+}
+
+.mljr-modal-footer-between { justify-content: space-between; }
+
+/* Animations */
+@keyframes mljr-fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes mljr-fade-out { from { opacity: 1; } to { opacity: 0; } }
+@keyframes mljr-scale-in { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
+@keyframes mljr-scale-out { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.95) translateY(10px); } }
+
+/* Drawer variant */
+.mljr-modal-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  max-width: 24rem;
+  max-height: 100vh;
+  border-radius: var(--mljr-radius-2xl) 0 0 var(--mljr-radius-2xl);
+  border-left: 1px solid var(--mljr-border);
+}
+
+.mljr-modal-drawer[data-state="open"] { animation: mljr-slide-in-right var(--mljr-transition); }
+.mljr-modal-drawer[data-state="closed"] { animation: mljr-slide-out-right var(--mljr-transition); }
+
+.mljr-modal-drawer-left {
+  right: auto;
+  left: 0;
+  border-radius: 0 var(--mljr-radius-2xl) var(--mljr-radius-2xl) 0;
+  border-left: none;
+  border-right: 1px solid var(--mljr-border);
+}
+
+.mljr-modal-drawer-left[data-state="open"] { animation: mljr-slide-in-left var(--mljr-transition); }
+.mljr-modal-drawer-left[data-state="closed"] { animation: mljr-slide-out-left var(--mljr-transition); }
+
+@keyframes mljr-slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
+@keyframes mljr-slide-out-right { from { transform: translateX(0); } to { transform: translateX(100%); } }
+@keyframes mljr-slide-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }
+@keyframes mljr-slide-out-left { from { transform: translateX(0); } to { transform: translateX(-100%); } }
+
+/* Dark mode */
+.dark .mljr-modal,
+[data-theme="dark"] .mljr-modal {
+  background-color: rgba(41, 37, 36, 0.9);
+  border-color: rgba(68, 64, 60, 0.5);
+}
+
+.dark .mljr-modal-footer,
+[data-theme="dark"] .mljr-modal-footer {
+  background-color: rgba(28, 25, 23, 0.5);
+}
+
+.dark .mljr-modal-close,
+[data-theme="dark"] .mljr-modal-close {
+  background: var(--mljr-bg-tertiary);
+}