mljr-css 0.1.0

package/src/components/textarea.css

@@ -0,0 +1,164 @@
+/* ============================================
+   MLJR CSS Framework - Textarea Component
+   Claymorphism: Soft pressed-in textarea
+   ============================================ */
+
+.mljr-textarea-wrapper {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+.mljr-textarea {
+  display: block;
+  width: 100%;
+  min-height: 100px;
+  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);
+  resize: vertical;
+  font-family: inherit;
+}
+
+.mljr-textarea::placeholder {
+  color: var(--mljr-text-muted);
+}
+
+.mljr-textarea:hover {
+  background-color: var(--mljr-bg-secondary);
+}
+
+.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-textarea:disabled {
+  background-color: var(--mljr-bg-tertiary);
+  opacity: 0.6;
+  cursor: not-allowed;
+  resize: none;
+}
+
+.mljr-textarea:read-only {
+  background-color: var(--mljr-bg-secondary);
+}
+
+/* Sizes */
+.mljr-textarea-sm {
+  padding: var(--mljr-space-2) var(--mljr-space-3);
+  font-size: var(--mljr-text-xs);
+  min-height: 80px;
+  border-radius: var(--mljr-radius-sm);
+}
+
+.mljr-textarea-lg {
+  padding: var(--mljr-space-4) var(--mljr-space-5);
+  font-size: var(--mljr-text-base);
+  min-height: 150px;
+  border-radius: var(--mljr-radius-lg);
+}
+
+/* States */
+.mljr-textarea-error {
+  box-shadow:
+    var(--mljr-clay-inset),
+    inset 0 0 0 2px var(--mljr-error-light);
+}
+
+.mljr-textarea-error:focus {
+  box-shadow:
+    var(--mljr-clay-inset-sm),
+    0 0 0 3px rgba(239, 68, 68, 0.2);
+}
+
+.mljr-textarea-success {
+  box-shadow:
+    var(--mljr-clay-inset),
+    inset 0 0 0 2px var(--mljr-success-light);
+}
+
+.mljr-textarea-success:focus {
+  box-shadow:
+    var(--mljr-clay-inset-sm),
+    0 0 0 3px rgba(16, 185, 129, 0.2);
+}
+
+/* With Label */
+.mljr-textarea-label {
+  display: block;
+  margin-bottom: var(--mljr-space-2);
+  font-size: var(--mljr-text-sm);
+  font-weight: 500;
+  color: var(--mljr-text);
+}
+
+.mljr-textarea-label-required::after {
+  content: " *";
+  color: var(--mljr-error);
+}
+
+/* Helper/Error Text */
+.mljr-textarea-helper {
+  margin-top: var(--mljr-space-1);
+  font-size: var(--mljr-text-xs);
+  color: var(--mljr-text-muted);
+}
+
+.mljr-textarea-error-text {
+  margin-top: var(--mljr-space-1);
+  font-size: var(--mljr-text-xs);
+  color: var(--mljr-error);
+}
+
+/* Character Count */
+.mljr-textarea-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: var(--mljr-space-1);
+}
+
+.mljr-textarea-count {
+  font-size: var(--mljr-text-xs);
+  color: var(--mljr-text-muted);
+}
+
+.mljr-textarea-count-warning {
+  color: var(--mljr-warning);
+}
+
+.mljr-textarea-count-error {
+  color: var(--mljr-error);
+}
+
+/* Auto-resize */
+.mljr-textarea-auto-resize {
+  resize: none;
+  overflow: hidden;
+  min-height: 100px;
+  max-height: 400px;
+}
+
+/* Dark Mode */
+.dark .mljr-textarea,
+[data-theme="dark"] .mljr-textarea {
+  background-color: var(--mljr-bg-secondary);
+  box-shadow: var(--mljr-clay-inset);
+}
+
+.dark .mljr-textarea: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/toast.css

@@ -0,0 +1,294 @@
+/* ============================================
+   MLJR CSS Framework - Toast/Notification Component
+   Claymorphism: Soft rounded toasts
+   ============================================ */
+
+/* Toast container - positions toasts */
+.mljr-toast-container {
+  position: fixed;
+  z-index: var(--mljr-z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--mljr-space-3);
+  padding: var(--mljr-space-4);
+  pointer-events: none;
+  max-height: 100vh;
+  overflow: hidden;
+}
+
+/* Position variants */
+.mljr-toast-container-top-right {
+  top: 0;
+  right: 0;
+  align-items: flex-end;
+}
+
+.mljr-toast-container-top-left {
+  top: 0;
+  left: 0;
+  align-items: flex-start;
+}
+
+.mljr-toast-container-top-center {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+.mljr-toast-container-bottom-right {
+  bottom: 0;
+  right: 0;
+  align-items: flex-end;
+  flex-direction: column-reverse;
+}
+
+.mljr-toast-container-bottom-left {
+  bottom: 0;
+  left: 0;
+  align-items: flex-start;
+  flex-direction: column-reverse;
+}
+
+.mljr-toast-container-bottom-center {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+  flex-direction: column-reverse;
+}
+
+/* Toast item */
+.mljr-toast {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--mljr-space-3);
+  min-width: 18rem;
+  max-width: 24rem;
+  padding: var(--mljr-space-4);
+  background: var(--mljr-bg);
+  font-family: var(--mljr-font-sans);
+  font-size: var(--mljr-text-sm);
+  pointer-events: auto;
+  border-radius: var(--mljr-radius-lg);
+  box-shadow: var(--mljr-clay-shadow-lg);
+  border: 1px solid var(--mljr-border);
+  overflow: hidden;
+  animation: mljr-toast-in 0.3s ease-out;
+}
+
+@keyframes mljr-toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Left-side toasts animate from left */
+.mljr-toast-container-top-left .mljr-toast,
+.mljr-toast-container-bottom-left .mljr-toast {
+  animation-name: mljr-toast-in-left;
+}
+
+@keyframes mljr-toast-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Center toasts animate from top/bottom */
+.mljr-toast-container-top-center .mljr-toast {
+  animation-name: mljr-toast-in-top;
+}
+
+@keyframes mljr-toast-in-top {
+  from {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.mljr-toast-container-bottom-center .mljr-toast {
+  animation-name: mljr-toast-in-bottom;
+}
+
+@keyframes mljr-toast-in-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Exit animation class */
+.mljr-toast-exit {
+  animation: mljr-toast-out 0.2s ease-in forwards;
+}
+
+@keyframes mljr-toast-out {
+  to {
+    opacity: 0;
+    transform: translateX(100%) scale(0.95);
+  }
+}
+
+.mljr-toast-icon {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-top: 0.125rem;
+}
+
+.mljr-toast-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.mljr-toast-title {
+  font-weight: 600;
+  color: var(--mljr-text);
+  margin-bottom: var(--mljr-space-1);
+}
+
+.mljr-toast-message {
+  color: var(--mljr-text-secondary);
+}
+
+.mljr-toast-close {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  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;
+  opacity: 0.7;
+  transition: all var(--mljr-transition-fast);
+}
+
+.mljr-toast-close:hover {
+  opacity: 1;
+  background: var(--mljr-bg-tertiary);
+}
+
+/* Progress bar for auto-dismiss */
+.mljr-toast-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 3px;
+  background: var(--mljr-gradient-primary);
+  border-radius: 0 0 var(--mljr-radius-lg) var(--mljr-radius-lg);
+  animation: mljr-toast-progress linear forwards;
+}
+
+@keyframes mljr-toast-progress {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0%;
+  }
+}
+
+/* Type variants - left border accent */
+.mljr-toast-info {
+  border-left: 4px solid var(--mljr-info);
+}
+
+.mljr-toast-info .mljr-toast-icon {
+  color: var(--mljr-info);
+}
+
+.mljr-toast-info .mljr-toast-progress {
+  background: var(--mljr-info);
+}
+
+.mljr-toast-success {
+  border-left: 4px solid var(--mljr-success);
+}
+
+.mljr-toast-success .mljr-toast-icon {
+  color: var(--mljr-success);
+}
+
+.mljr-toast-success .mljr-toast-progress {
+  background: var(--mljr-success);
+}
+
+.mljr-toast-warning {
+  border-left: 4px solid var(--mljr-warning);
+}
+
+.mljr-toast-warning .mljr-toast-icon {
+  color: var(--mljr-warning);
+}
+
+.mljr-toast-warning .mljr-toast-progress {
+  background: var(--mljr-warning);
+}
+
+.mljr-toast-error {
+  border-left: 4px solid var(--mljr-error);
+}
+
+.mljr-toast-error .mljr-toast-icon {
+  color: var(--mljr-error);
+}
+
+.mljr-toast-error .mljr-toast-progress {
+  background: var(--mljr-error);
+}
+
+/* Actions in toast */
+.mljr-toast-actions {
+  display: flex;
+  gap: var(--mljr-space-2);
+  margin-top: var(--mljr-space-2);
+}
+
+.mljr-toast-action {
+  padding: var(--mljr-space-1) var(--mljr-space-2);
+  font-size: var(--mljr-text-xs);
+  font-weight: 500;
+  color: var(--mljr-primary-600);
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color var(--mljr-transition-fast);
+}
+
+.mljr-toast-action:hover {
+  color: var(--mljr-primary-500);
+  text-decoration: underline;
+}
+
+/* Dark mode */
+.dark .mljr-toast,
+[data-theme="dark"] .mljr-toast {
+  background: var(--mljr-bg-secondary);
+  border-color: var(--mljr-border);
+  box-shadow: var(--mljr-clay-shadow-lg);
+}

package/src/components/tooltip.css

@@ -0,0 +1,99 @@
+/* ============================================
+   MLJR CSS Framework - Tooltip Component
+   Claymorphism: Soft rounded tooltips
+   ============================================ */
+
+.mljr-tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.mljr-tooltip-content {
+  position: absolute;
+  z-index: var(--mljr-z-tooltip);
+  padding: var(--mljr-space-2) var(--mljr-space-3);
+  font-family: var(--mljr-font-sans);
+  font-size: var(--mljr-text-sm);
+  line-height: var(--mljr-leading-tight);
+  color: var(--mljr-text);
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--mljr-transition-fast), visibility var(--mljr-transition-fast);
+  pointer-events: none;
+  border-radius: var(--mljr-radius-md);
+  background-color: var(--mljr-bg);
+  box-shadow: var(--mljr-clay-shadow);
+  border: 1px solid var(--mljr-border);
+}
+
+/* Positions */
+.mljr-tooltip-top .mljr-tooltip-content {
+  bottom: calc(100% + 10px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.mljr-tooltip-bottom .mljr-tooltip-content {
+  top: calc(100% + 10px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.mljr-tooltip-left .mljr-tooltip-content {
+  right: calc(100% + 10px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.mljr-tooltip-right .mljr-tooltip-content {
+  left: calc(100% + 10px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* Show on hover/focus */
+.mljr-tooltip:hover .mljr-tooltip-content,
+.mljr-tooltip:focus-within .mljr-tooltip-content,
+.mljr-tooltip-visible .mljr-tooltip-content {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Size variants */
+.mljr-tooltip-sm .mljr-tooltip-content {
+  padding: var(--mljr-space-1) var(--mljr-space-2);
+  font-size: var(--mljr-text-xs);
+}
+
+.mljr-tooltip-lg .mljr-tooltip-content {
+  padding: var(--mljr-space-3) var(--mljr-space-4);
+  font-size: var(--mljr-text-base);
+}
+
+/* Color variants */
+.mljr-tooltip-primary .mljr-tooltip-content {
+  background: var(--mljr-gradient-primary);
+  color: white;
+  border: none;
+  box-shadow:
+    var(--mljr-clay-shadow),
+    0 0 12px rgba(249, 115, 22, 0.2);
+}
+
+.mljr-tooltip-secondary .mljr-tooltip-content {
+  background: var(--mljr-gradient-secondary);
+  color: white;
+  border: none;
+  box-shadow:
+    var(--mljr-clay-shadow),
+    0 0 12px rgba(20, 184, 166, 0.2);
+}
+
+/* Dark mode */
+.dark .mljr-tooltip-content,
+[data-theme="dark"] .mljr-tooltip-content {
+  background-color: var(--mljr-bg-secondary);
+  border-color: var(--mljr-border);
+  color: var(--mljr-text);
+}

package/src/index.css

@@ -0,0 +1,54 @@
+/* ============================================
+   MLJR CSS Framework
+   A TailwindCSS-based CSS framework with
+   orange/purple color scheme
+   ============================================ */
+
+/* All imports must come first before @tailwind directives */
+@import "./themes/variables.css";
+@import "./base/reset.css";
+@import "./base/typography.css";
+@import "./layout/container.css";
+@import "./layout/header.css";
+@import "./layout/footer.css";
+@import "./layout/navigation.css";
+@import "./layout/sidebar.css";
+@import "./layout/navbar.css";
+@import "./components/footer.css";
+@import "./components/button.css";
+@import "./components/input.css";
+@import "./components/select.css";
+@import "./components/checkbox.css";
+@import "./components/alert.css";
+@import "./components/badge.css";
+@import "./components/card.css";
+@import "./components/modal.css";
+@import "./components/tabs.css";
+@import "./components/accordion.css";
+@import "./components/carousel.css";
+@import "./components/tooltip.css";
+@import "./components/progress.css";
+@import "./components/skeleton.css";
+@import "./components/avatar.css";
+@import "./components/divider.css";
+@import "./components/spinner.css";
+@import "./components/toast.css";
+@import "./components/popover.css";
+@import "./components/dropdown.css";
+@import "./components/pagination.css";
+@import "./components/breadcrumb.css";
+@import "./components/table.css";
+@import "./components/password.css";
+@import "./components/chip.css";
+@import "./components/radio.css";
+@import "./components/textarea.css";
+@import "./components/file-upload.css";
+@import "./components/stepper.css";
+@import "./components/drawer.css";
+@import "./components/empty-state.css";
+@import "./utilities/utilities.css";
+
+/* Tailwind Base */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;