mljr-css 0.1.0

package/src/components/carousel.css

@@ -0,0 +1,179 @@
+/* ============================================
+   MLJR CSS Framework - Carousel Component
+   Claymorphism: Soft rounded carousel
+   ============================================ */
+
+.mljr-carousel {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--mljr-radius-xl);
+  outline: none;
+}
+
+.mljr-carousel:focus-visible {
+  outline: 3px solid var(--mljr-primary-300);
+  outline-offset: 2px;
+}
+
+.mljr-carousel-inner {
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+  transition: transform var(--mljr-transition-slow);
+  will-change: transform;
+}
+
+.mljr-carousel-item {
+  flex: 0 0 100%;
+  width: 100%;
+  min-width: 100%;
+  display: block;
+  overflow: hidden;
+}
+
+.mljr-carousel-item img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Peek variant - shows partial next slide */
+.mljr-carousel-peek .mljr-carousel-item {
+  flex: 0 0 85%;
+  min-width: 85%;
+  padding-right: var(--mljr-space-4);
+}
+
+/* Navigation Buttons */
+.mljr-carousel-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3rem;
+  height: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--mljr-bg);
+  border: none;
+  color: var(--mljr-text);
+  cursor: pointer;
+  z-index: 50;
+  border-radius: var(--mljr-radius-sm);
+  transition: all var(--mljr-transition-fast);
+  box-shadow: var(--mljr-clay-shadow);
+}
+
+.mljr-carousel-btn:hover:not(:disabled) {
+  background: var(--mljr-gradient-primary);
+  color: white;
+  transform: translateY(-50%) scale(1.05);
+}
+
+.mljr-carousel-btn:active:not(:disabled) {
+  transform: translateY(-50%) scale(1);
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+.mljr-carousel-btn:focus-visible {
+  outline: 3px solid var(--mljr-primary-300);
+  outline-offset: 2px;
+}
+
+.mljr-carousel-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.mljr-carousel-btn-prev { left: var(--mljr-space-4); }
+.mljr-carousel-btn-next { right: var(--mljr-space-4); }
+
+/* Dark mode buttons */
+.dark .mljr-carousel-btn,
+[data-theme="dark"] .mljr-carousel-btn {
+  background-color: var(--mljr-bg-secondary);
+}
+
+/* Indicators - Soft rounded dots */
+.mljr-carousel-indicators {
+  position: absolute;
+  bottom: var(--mljr-space-4);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: center;
+  gap: var(--mljr-space-2);
+  padding: var(--mljr-space-2) var(--mljr-space-3);
+  z-index: 50;
+  background-color: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(8px);
+  border-radius: var(--mljr-radius-full);
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+.mljr-carousel-indicator {
+  width: 0.625rem;
+  height: 0.625rem;
+  background-color: var(--mljr-gray-300);
+  border: none;
+  border-radius: var(--mljr-radius-full);
+  cursor: pointer;
+  transition: all var(--mljr-transition-fast);
+  opacity: 1;
+  visibility: visible;
+}
+
+.mljr-carousel-indicator:hover {
+  background-color: var(--mljr-primary-300);
+}
+
+.mljr-carousel-indicator:focus-visible {
+  outline: 2px solid var(--mljr-primary-300);
+  outline-offset: 2px;
+}
+
+.mljr-carousel-indicator.active,
+.mljr-carousel-indicator[aria-selected="true"] {
+  background: var(--mljr-gradient-primary);
+  transform: scale(1.2);
+  box-shadow: 0 0 8px rgba(249, 115, 22, 0.3);
+}
+
+/* Dark mode indicators */
+.dark .mljr-carousel-indicators,
+[data-theme="dark"] .mljr-carousel-indicators {
+  background-color: rgba(41, 37, 36, 0.8);
+}
+
+.dark .mljr-carousel-indicator,
+[data-theme="dark"] .mljr-carousel-indicator {
+  background-color: var(--mljr-gray-600);
+}
+
+.dark .mljr-carousel-indicator.active,
+[data-theme="dark"] .mljr-carousel-indicator.active {
+  box-shadow: 0 0 12px rgba(249, 115, 22, 0.4);
+}
+
+/* Fade variant */
+.mljr-carousel-fade .mljr-carousel-inner {
+  position: relative;
+}
+
+.mljr-carousel-fade .mljr-carousel-item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  opacity: 0;
+  transition: opacity var(--mljr-transition-slow);
+  pointer-events: none;
+}
+
+.mljr-carousel-fade .mljr-carousel-item.active {
+  position: relative;
+  opacity: 1;
+  pointer-events: auto;
+}

package/src/components/checkbox.css

@@ -0,0 +1,303 @@
+/* ============================================
+   MLJR CSS Framework - Checkbox & Radio Components
+   Claymorphism: Soft rounded controls with shadows
+   ============================================ */
+
+/* Checkbox */
+.mljr-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mljr-space-2);
+  cursor: pointer;
+  user-select: none;
+}
+
+.mljr-checkbox-input {
+  appearance: none;
+  width: 1.25rem;
+  height: 1.25rem;
+  background-color: var(--mljr-bg);
+  border: none;
+  border-radius: var(--mljr-radius-sm);
+  cursor: pointer;
+  transition: all var(--mljr-transition-fast);
+  flex-shrink: 0;
+  box-shadow: var(--mljr-clay-inset-sm);
+}
+
+.mljr-checkbox-input:hover {
+  background-color: var(--mljr-bg-secondary);
+}
+
+.mljr-checkbox-input:focus {
+  outline: none;
+  box-shadow:
+    var(--mljr-clay-inset-sm),
+    0 0 0 3px var(--mljr-primary-200);
+}
+
+.mljr-checkbox-input:checked {
+  background-color: var(--mljr-primary-500);
+  background-image:
+    linear-gradient(135deg, var(--mljr-primary-400) 0%, var(--mljr-primary-600) 100%),
+    url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+  background-size: 100% 100%, 70% 70%;
+  background-position: center, center;
+  background-repeat: no-repeat, no-repeat;
+  box-shadow:
+    4px 4px 8px rgba(249, 115, 22, 0.35),
+    -3px -3px 6px rgba(255, 255, 255, 0.9),
+    inset 0px 2px 4px rgba(255, 255, 255, 0.3);
+}
+
+.mljr-checkbox-input:indeterminate {
+  background-color: var(--mljr-primary-500);
+  background-image:
+    linear-gradient(135deg, var(--mljr-primary-400) 0%, var(--mljr-primary-600) 100%),
+    url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4 8a1 1 0 011-1h6a1 1 0 110 2H5a1 1 0 01-1-1z'/%3e%3c/svg%3e");
+  background-size: 100% 100%, 70% 70%;
+  background-position: center, center;
+  background-repeat: no-repeat, no-repeat;
+  box-shadow:
+    4px 4px 8px rgba(249, 115, 22, 0.35),
+    -3px -3px 6px rgba(255, 255, 255, 0.9),
+    inset 0px 2px 4px rgba(255, 255, 255, 0.3);
+}
+
+.mljr-checkbox-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.mljr-checkbox-label {
+  font-size: var(--mljr-text-sm);
+  color: var(--mljr-text);
+}
+
+/* Primary Color Checkbox (explicit) */
+.mljr-checkbox-primary .mljr-checkbox-input:checked,
+.mljr-checkbox-primary .mljr-checkbox-input:indeterminate {
+  background-color: var(--mljr-primary-500);
+  background-image:
+    linear-gradient(135deg, var(--mljr-primary-400) 0%, var(--mljr-primary-600) 100%),
+    url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+  box-shadow:
+    4px 4px 8px rgba(249, 115, 22, 0.35),
+    -3px -3px 6px rgba(255, 255, 255, 0.9),
+    inset 0px 2px 4px rgba(255, 255, 255, 0.3);
+}
+
+/* Secondary Color Checkbox */
+.mljr-checkbox-secondary .mljr-checkbox-input:focus {
+  box-shadow:
+    var(--mljr-clay-inset-sm),
+    0 0 0 3px var(--mljr-secondary-200);
+}
+
+.mljr-checkbox-secondary .mljr-checkbox-input:checked,
+.mljr-checkbox-secondary .mljr-checkbox-input:indeterminate {
+  background-color: var(--mljr-secondary-500);
+  background-image:
+    linear-gradient(135deg, var(--mljr-secondary-400) 0%, var(--mljr-secondary-600) 100%),
+    url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+  background-size: 100% 100%, 70% 70%;
+  background-position: center, center;
+  background-repeat: no-repeat, no-repeat;
+  box-shadow:
+    4px 4px 8px rgba(168, 85, 247, 0.35),
+    -3px -3px 6px rgba(255, 255, 255, 0.9),
+    inset 0px 2px 4px rgba(255, 255, 255, 0.3);
+}
+
+/* Radio */
+.mljr-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mljr-space-2);
+  cursor: pointer;
+  user-select: none;
+}
+
+.mljr-radio-input {
+  appearance: none;
+  width: 1.25rem;
+  height: 1.25rem;
+  background-color: var(--mljr-bg);
+  border: none;
+  border-radius: var(--mljr-radius-full);
+  cursor: pointer;
+  transition: all var(--mljr-transition-fast);
+  flex-shrink: 0;
+  box-shadow: var(--mljr-clay-inset-sm);
+}
+
+.mljr-radio-input:hover {
+  background-color: var(--mljr-bg-secondary);
+}
+
+.mljr-radio-input:focus {
+  outline: none;
+  box-shadow:
+    var(--mljr-clay-inset-sm),
+    0 0 0 3px var(--mljr-primary-200);
+}
+
+.mljr-radio-input:checked {
+  background-color: var(--mljr-primary-500);
+  background-image:
+    linear-gradient(135deg, var(--mljr-primary-400) 0%, var(--mljr-primary-600) 100%),
+    url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='4'/%3e%3c/svg%3e");
+  background-size: 100% 100%, 60% 60%;
+  background-position: center, center;
+  background-repeat: no-repeat, no-repeat;
+  box-shadow:
+    4px 4px 8px rgba(249, 115, 22, 0.35),
+    -3px -3px 6px rgba(255, 255, 255, 0.9),
+    inset 0px 2px 4px rgba(255, 255, 255, 0.3);
+}
+
+.mljr-radio-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.mljr-radio-label {
+  font-size: var(--mljr-text-sm);
+  color: var(--mljr-text);
+}
+
+/* Primary Color Radio (explicit) */
+.mljr-radio-primary .mljr-radio-input:checked {
+  background-color: var(--mljr-primary-500);
+  background-image:
+    linear-gradient(135deg, var(--mljr-primary-400) 0%, var(--mljr-primary-600) 100%),
+    url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='4'/%3e%3c/svg%3e");
+  box-shadow:
+    4px 4px 8px rgba(249, 115, 22, 0.35),
+    -3px -3px 6px rgba(255, 255, 255, 0.9),
+    inset 0px 2px 4px rgba(255, 255, 255, 0.3);
+}
+
+/* Secondary Color Radio */
+.mljr-radio-secondary .mljr-radio-input:focus {
+  box-shadow:
+    var(--mljr-clay-inset-sm),
+    0 0 0 3px var(--mljr-secondary-200);
+}
+
+.mljr-radio-secondary .mljr-radio-input:checked {
+  background-color: var(--mljr-secondary-500);
+  background-image:
+    linear-gradient(135deg, var(--mljr-secondary-400) 0%, var(--mljr-secondary-600) 100%),
+    url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='4'/%3e%3c/svg%3e");
+  background-size: 100% 100%, 60% 60%;
+  background-position: center, center;
+  background-repeat: no-repeat, no-repeat;
+  box-shadow:
+    4px 4px 8px rgba(168, 85, 247, 0.35),
+    -3px -3px 6px rgba(255, 255, 255, 0.9),
+    inset 0px 2px 4px rgba(255, 255, 255, 0.3);
+}
+
+/* Radio Group */
+.mljr-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mljr-space-2);
+}
+
+.mljr-radio-group-horizontal {
+  flex-direction: row;
+  gap: var(--mljr-space-4);
+}
+
+/* Switch / Toggle */
+.mljr-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mljr-space-2);
+  cursor: pointer;
+  user-select: none;
+}
+
+.mljr-switch-input {
+  appearance: none;
+  width: 2.75rem;
+  height: 1.5rem;
+  background-color: var(--mljr-gray-300);
+  border-radius: var(--mljr-radius-full);
+  position: relative;
+  cursor: pointer;
+  transition: background-color var(--mljr-transition-fast);
+  flex-shrink: 0;
+  box-shadow: var(--mljr-clay-inset-sm);
+}
+
+.mljr-switch-input::before {
+  content: "";
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  background-color: white;
+  top: 50%;
+  left: 3px;
+  transform: translateY(-50%);
+  transition: left var(--mljr-transition-fast);
+  border-radius: var(--mljr-radius-full);
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+.mljr-switch-input:checked {
+  background: var(--mljr-gradient-primary);
+  box-shadow:
+    inset 2px 2px 4px rgba(0, 0, 0, 0.1),
+    inset -2px -2px 4px rgba(255, 255, 255, 0.2);
+}
+
+.mljr-switch-input:checked::before {
+  left: calc(100% - 1.125rem - 3px);
+}
+
+.mljr-switch-input:focus {
+  outline: none;
+  box-shadow:
+    var(--mljr-clay-inset-sm),
+    0 0 0 3px var(--mljr-primary-200);
+}
+
+.mljr-switch-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.mljr-switch-label {
+  font-size: var(--mljr-text-sm);
+  color: var(--mljr-text);
+}
+
+/* Secondary Color Switch */
+.mljr-switch-secondary .mljr-switch-input:checked {
+  background: var(--mljr-gradient-secondary);
+}
+
+.mljr-switch-secondary .mljr-switch-input:focus {
+  box-shadow:
+    var(--mljr-clay-inset-sm),
+    0 0 0 3px var(--mljr-secondary-200);
+}
+
+/* Dark mode adjustments */
+.dark .mljr-checkbox-input,
+.dark .mljr-radio-input,
+.dark .mljr-switch-input,
+[data-theme="dark"] .mljr-checkbox-input,
+[data-theme="dark"] .mljr-radio-input,
+[data-theme="dark"] .mljr-switch-input {
+  background-color: var(--mljr-bg-secondary);
+  box-shadow: var(--mljr-clay-inset-sm);
+}
+
+.dark .mljr-switch-input:not(:checked),
+[data-theme="dark"] .mljr-switch-input:not(:checked) {
+  background-color: var(--mljr-gray-600);
+}

package/src/components/chip.css

@@ -0,0 +1,207 @@
+/* ============================================
+   MLJR CSS Framework - Chip/Tag Component
+   Claymorphism: Soft rounded labels
+   ============================================ */
+
+.mljr-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mljr-space-1);
+  padding: var(--mljr-space-1) var(--mljr-space-3);
+  font-size: var(--mljr-text-xs);
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: var(--mljr-text);
+  background: var(--mljr-bg);
+  border-radius: var(--mljr-radius-full);
+  box-shadow: var(--mljr-clay-shadow-xs);
+  transition: all var(--mljr-transition-fast);
+  cursor: default;
+  white-space: nowrap;
+}
+
+.mljr-chip:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+/* Variants */
+.mljr-chip-primary {
+  background: var(--mljr-primary-100);
+  color: var(--mljr-primary-700);
+  box-shadow: 
+    2px 2px 4px rgba(249, 115, 22, 0.15),
+    -2px -2px 4px rgba(255, 255, 255, 0.8);
+}
+
+.mljr-chip-secondary {
+  background: var(--mljr-secondary-100);
+  color: var(--mljr-secondary-700);
+  box-shadow: 
+    2px 2px 4px rgba(168, 85, 247, 0.15),
+    -2px -2px 4px rgba(255, 255, 255, 0.8);
+}
+
+.mljr-chip-accent {
+  background: var(--mljr-accent-100);
+  color: var(--mljr-accent-700);
+  box-shadow: 
+    2px 2px 4px rgba(20, 184, 166, 0.15),
+    -2px -2px 4px rgba(255, 255, 255, 0.8);
+}
+
+.mljr-chip-success {
+  background: rgba(16, 185, 129, 0.15);
+  color: var(--mljr-success-dark);
+  box-shadow: 
+    2px 2px 4px rgba(16, 185, 129, 0.1),
+    -2px -2px 4px rgba(255, 255, 255, 0.8);
+}
+
+.mljr-chip-warning {
+  background: rgba(245, 158, 11, 0.15);
+  color: var(--mljr-warning-dark);
+  box-shadow: 
+    2px 2px 4px rgba(245, 158, 11, 0.1),
+    -2px -2px 4px rgba(255, 255, 255, 0.8);
+}
+
+.mljr-chip-error {
+  background: rgba(239, 68, 68, 0.15);
+  color: var(--mljr-error-dark);
+  box-shadow: 
+    2px 2px 4px rgba(239, 68, 68, 0.1),
+    -2px -2px 4px rgba(255, 255, 255, 0.8);
+}
+
+.mljr-chip-outline {
+  background: transparent;
+  box-shadow: inset 0 0 0 1.5px var(--mljr-border-strong);
+}
+
+.mljr-chip-outline:hover {
+  box-shadow: inset 0 0 0 1.5px var(--mljr-primary-400), var(--mljr-clay-shadow-xs);
+}
+
+/* Sizes */
+.mljr-chip-sm {
+  padding: 0.125rem var(--mljr-space-2);
+  font-size: var(--mljr-text-xs);
+}
+
+.mljr-chip-lg {
+  padding: var(--mljr-space-2) var(--mljr-space-4);
+  font-size: var(--mljr-text-sm);
+}
+
+/* Clickable */
+.mljr-chip-clickable {
+  cursor: pointer;
+}
+
+.mljr-chip-clickable:active {
+  transform: translateY(0);
+  box-shadow: var(--mljr-clay-inset-xs);
+}
+
+/* Removable */
+.mljr-chip-removable {
+  padding-right: var(--mljr-space-2);
+}
+
+.mljr-chip-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
+  margin-left: var(--mljr-space-1);
+  background: transparent;
+  border: none;
+  border-radius: var(--mljr-radius-full);
+  color: currentColor;
+  opacity: 0.6;
+  cursor: pointer;
+  transition: all var(--mljr-transition-fast);
+}
+
+.mljr-chip-remove:hover {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+/* With Icon */
+.mljr-chip-icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.mljr-chip-sm .mljr-chip-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.mljr-chip-lg .mljr-chip-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+/* Avatar in Chip */
+.mljr-chip-avatar {
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-left: calc(var(--mljr-space-1) * -1);
+  margin-right: var(--mljr-space-1);
+  border-radius: var(--mljr-radius-full);
+  object-fit: cover;
+}
+
+/* Group */
+.mljr-chip-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mljr-space-2);
+}
+
+/* Disabled */
+.mljr-chip-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Dark Mode */
+.dark .mljr-chip,
+[data-theme="dark"] .mljr-chip {
+  background: var(--mljr-bg-secondary);
+  box-shadow: var(--mljr-clay-shadow-xs);
+}
+
+.dark .mljr-chip-primary,
+[data-theme="dark"] .mljr-chip-primary {
+  background: rgba(249, 115, 22, 0.2);
+  color: var(--mljr-primary-300);
+  box-shadow: 
+    2px 2px 4px rgba(0, 0, 0, 0.3),
+    -2px -2px 4px rgba(68, 64, 60, 0.2);
+}
+
+.dark .mljr-chip-secondary,
+[data-theme="dark"] .mljr-chip-secondary {
+  background: rgba(168, 85, 247, 0.2);
+  color: var(--mljr-secondary-300);
+}
+
+.dark .mljr-chip-accent,
+[data-theme="dark"] .mljr-chip-accent {
+  background: rgba(20, 184, 166, 0.2);
+  color: var(--mljr-accent-300);
+}
+
+.dark .mljr-chip-outline,
+[data-theme="dark"] .mljr-chip-outline {
+  background: transparent;
+  box-shadow: inset 0 0 0 1.5px var(--mljr-border);
+}