juxscript 1.1.245 → 1.1.247

package/lib/styles/modal.css

@@ -1,402 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════════
- * MODAL BASE STYLES
- * ═══════════════════════════════════════════════════════════════════ */
-
-/* Modal Overlay - Base positioning */
-.jux-modal-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  background-color: rgba(0, 0, 0, 0.8);
-  backdrop-filter: blur(2px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Modal Container */
-.jux-modal {
-  position: relative;
-  background-color: #ffffff;
-  border: 1px solid #e4e4e7;
-  border-radius: 0.5rem;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  width: 100%;
-  max-width: 32rem;
-  z-index: 51;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 1.5rem;
-}
-
-.jux-modal-small { max-width: 24rem; }
-.jux-modal-medium { max-width: 32rem; }
-.jux-modal-large { max-width: 48rem; }
-
-/* ═══════════════════════════════════════════════════════════════════
- * POSITION VARIANTS
- * ═══════════════════════════════════════════════════════════════════ */
-
-/* Center (default) */
-.jux-modal-position-center {
-  align-items: center;
-  justify-content: center;
-}
-
-/* Top position */
-.jux-modal-position-top {
-  align-items: flex-start;
-  justify-content: center;
-  padding-top: 2rem;
-}
-
-.jux-modal-position-top .jux-modal {
-  animation: modalSlideDown 0.3s ease-out;
-}
-
-@keyframes modalSlideDown {
-  from {
-    transform: translateY(-20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-/* Bottom position (bottom sheet) */
-.jux-modal-position-bottom {
-  align-items: flex-end;
-  justify-content: center;
-  padding: 0;
-}
-
-.jux-modal-position-bottom .jux-modal {
-  border-radius: 0.75rem 0.75rem 0 0;
-  max-height: 90vh;
-  overflow-y: auto;
-  width: 100%;
-  max-width: 100%;
-  animation: modalSlideUp 0.3s ease-out;
-}
-
-@keyframes modalSlideUp {
-  from {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-/* Fullscreen position */
-.jux-modal-position-fullscreen {
-  align-items: stretch;
-  justify-content: stretch;
-  padding: 0;
-}
-
-.jux-modal-position-fullscreen .jux-modal {
-  max-width: 100%;
-  width: 100%;
-  height: 100%;
-  border-radius: 0;
-  margin: 0;
-  max-height: 100vh;
-  animation: modalFadeIn 0.2s ease-out;
-}
-
-@keyframes modalFadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-/* ═══════════════════════════════════════════════════════════════════
- * POPOVER VARIANTS (Tooltip-style)
- * ═══════════════════════════════════════════════════════════════════ */
-
-.jux-modal-position-popover-top,
-.jux-modal-position-popover-bottom,
-.jux-modal-position-popover-left,
-.jux-modal-position-popover-right {
-  background-color: rgba(0, 0, 0, 0.2);
-  backdrop-filter: none;
-}
-
-.jux-modal-position-popover-top .jux-modal,
-.jux-modal-position-popover-bottom .jux-modal,
-.jux-modal-position-popover-left .jux-modal,
-.jux-modal-position-popover-right .jux-modal {
-  max-width: 20rem;
-  padding: 1rem;
-  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  border-radius: 0.5rem;
-}
-
-/* Popover Top */
-.jux-modal-position-popover-top {
-  align-items: flex-start;
-  justify-content: center;
-  padding-top: 1rem;
-}
-
-.jux-modal-position-popover-top .jux-modal {
-  animation: popoverSlideDown 0.2s ease-out;
-}
-
-@keyframes popoverSlideDown {
-  from {
-    transform: translateY(-10px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-/* Popover Bottom */
-.jux-modal-position-popover-bottom {
-  align-items: flex-end;
-  justify-content: center;
-  padding-bottom: 1rem;
-}
-
-.jux-modal-position-popover-bottom .jux-modal {
-  animation: popoverSlideUp 0.2s ease-out;
-}
-
-@keyframes popoverSlideUp {
-  from {
-    transform: translateY(10px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-/* Popover Left */
-.jux-modal-position-popover-left {
-  align-items: center;
-  justify-content: flex-start;
-  padding-left: 1rem;
-}
-
-.jux-modal-position-popover-left .jux-modal {
-  animation: popoverSlideRight 0.2s ease-out;
-}
-
-@keyframes popoverSlideRight {
-  from {
-    transform: translateX(-10px);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-/* Popover Right */
-.jux-modal-position-popover-right {
-  align-items: center;
-  justify-content: flex-end;
-  padding-right: 1rem;
-}
-
-.jux-modal-position-popover-right .jux-modal {
-  animation: popoverSlideLeft 0.2s ease-out;
-}
-
-@keyframes popoverSlideLeft {
-  from {
-    transform: translateX(10px);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-/* Smaller close button for popovers */
-.jux-modal-position-popover-top .jux-modal-close,
-.jux-modal-position-popover-bottom .jux-modal-close,
-.jux-modal-position-popover-left .jux-modal-close,
-.jux-modal-position-popover-right .jux-modal-close {
-  width: 1.25rem;
-  height: 1.25rem;
-  font-size: 1rem;
-  top: 0.5rem;
-  right: 0.5rem;
-}
-
-/* ═══════════════════════════════════════════════════════════════════
- * MODAL CONTENT SECTIONS
- * ═══════════════════════════════════════════════════════════════════ */
-
-/* Header */
-.jux-modal-header {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.75rem;
-  padding: 0;
-  text-align: left;
-}
-
-.jux-modal-header-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: #09090b;
-  margin-top: 0.125rem;
-}
-
-.jux-modal-header-title {
-  flex: 1;
-  font-size: 1.125rem;
-  font-weight: 600;
-  line-height: 1.2;
-  color: #09090b;
-}
-
-/* Body / Content */
-.jux-modal-content {
-  padding: 0;
-  font-size: 0.875rem;
-  color: #71717a;
-  line-height: 1.5;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-/* Footer with Actions */
-.jux-modal-footer {
-  padding: 0;
-  padding-top: 0.5rem;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-/* Modal Action Buttons */
-.jux-modal-action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  border-radius: 0.375rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  height: 2.5rem;
-  padding: 0 1rem;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  border: 1px solid transparent;
-}
-
-.jux-modal-action-ghost {
-  background-color: transparent;
-  color: #09090b;
-  border: none;
-}
-.jux-modal-action-ghost:hover {
-  background-color: #f4f4f5;
-  color: #18181b;
-}
-
-.jux-modal-action-secondary {
-  border: 1px solid #e4e4e7;
-  background-color: #ffffff;
-  color: #09090b;
-}
-.jux-modal-action-secondary:hover {
-  background-color: #f4f4f5;
-  color: #18181b;
-}
-
-.jux-modal-action-primary {
-  background-color: #18181b;
-  color: #fafafa;
-  border: none;
-}
-.jux-modal-action-primary:hover {
-  background-color: #27272a;
-}
-
-.jux-modal-action-destructive {
-  background-color: #ef4444;
-  color: #ffffff;
-  border: none;
-}
-.jux-modal-action-destructive:hover {
-  background-color: #dc2626;
-}
-
-/* Close Button (X) */
-.jux-modal-close {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-  border-radius: 0.125rem;
-  opacity: 0.7;
-  transition: opacity 0.15s ease;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  color: #71717a;
-  padding: 0.25rem;
-  width: 1.5rem;
-  height: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.25rem;
-  line-height: 1;
-}
-
-.jux-modal-close:hover {
-  opacity: 1;
-  color: #09090b;
-}
-
-.jux-modal-close:focus-visible {
-  outline: 2px solid #18181b;
-  outline-offset: 2px;
-}
-
-/* ═══════════════════════════════════════════════════════════════════
- * RESPONSIVE ADJUSTMENTS
- * ═══════════════════════════════════════════════════════════════════ */
-
-@media (max-width: 640px) {
-  .jux-modal-position-top,
-  .jux-modal-position-center {
-    padding: 1rem;
-  }
-
-  .jux-modal-position-bottom .jux-modal {
-    max-height: 95vh;
-  }
-
-  .jux-modal-position-popover-top .jux-modal,
-  .jux-modal-position-popover-bottom .jux-modal,
-  .jux-modal-position-popover-left .jux-modal,
-  .jux-modal-position-popover-right .jux-modal {
-    max-width: calc(100vw - 2rem);
-  }
-}

package/lib/styles/modifiers.css

@@ -1,103 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════════
- * JUX LAYOUT MODIFIERS
- * Utility classes for precision layout control (used by LayoutExtensions)
- * ═══════════════════════════════════════════════════════════════════ */
-
-/* ═════════════════════════════════════════════════════════════════
- * DISPLAY UTILITIES
- * ═════════════════════════════════════════════════════════════════ */
-
-.jux-display-block { display: block !important; }
-.jux-display-inline { display: inline !important; }
-.jux-display-inline-block { display: inline-block !important; }
-.jux-display-flex { display: flex !important; }
-.jux-display-grid { display: grid !important; }
-.jux-display-none { display: none !important; }
-
-/* ═════════════════════════════════════════════════════════════════
- * POSITION UTILITIES
- * ═════════════════════════════════════════════════════════════════ */
-
-.jux-position-static { position: static !important; }
-.jux-position-relative { position: relative !important; }
-.jux-position-absolute { position: absolute !important; }
-.jux-position-fixed { position: fixed !important; }
-.jux-position-sticky { position: sticky !important; }
-
-/* ═════════════════════════════════════════════════════════════════
- * OVERFLOW UTILITIES
- * ═════════════════════════════════════════════════════════════════ */
-
-.jux-overflow-visible { overflow: visible !important; }
-.jux-overflow-hidden { overflow: hidden !important; }
-.jux-overflow-scroll { overflow: scroll !important; }
-.jux-overflow-auto { overflow: auto !important; }
-
-.jux-overflow-x-visible { overflow-x: visible !important; }
-.jux-overflow-x-hidden { overflow-x: hidden !important; }
-.jux-overflow-x-scroll { overflow-x: scroll !important; }
-.jux-overflow-x-auto { overflow-x: auto !important; }
-
-.jux-overflow-y-visible { overflow-y: visible !important; }
-.jux-overflow-y-hidden { overflow-y: hidden !important; }
-.jux-overflow-y-scroll { overflow-y: scroll !important; }
-.jux-overflow-y-auto { overflow-y: auto !important; }
-
-/* ═════════════════════════════════════════════════════════════════
- * CURSOR UTILITIES
- * ═════════════════════════════════════════════════════════════════ */
-
-.jux-cursor-pointer { cursor: pointer !important; }
-.jux-cursor-default { cursor: default !important; }
-.jux-cursor-not-allowed { cursor: not-allowed !important; }
-.jux-cursor-grab { cursor: grab !important; }
-.jux-cursor-grabbing { cursor: grabbing !important; }
-
-/* ═════════════════════════════════════════════════════════════════
- * POINTER EVENTS
- * ═════════════════════════════════════════════════════════════════ */
-
-.jux-pointer-events-auto { pointer-events: auto !important; }
-.jux-pointer-events-none { pointer-events: none !important; }
-
-/* ═════════════════════════════════════════════════════════════════
- * USER SELECT
- * ═════════════════════════════════════════════════════════════════ */
-
-.jux-select-auto { user-select: auto !important; }
-.jux-select-none { user-select: none !important; }
-.jux-select-text { user-select: text !important; }
-.jux-select-all { user-select: all !important; }
-
-/* ═════════════════════════════════════════════════════════════════
- * TEXT UTILITIES
- * ═════════════════════════════════════════════════════════════════ */
-
-.jux-text-left { text-align: left !important; }
-.jux-text-center { text-align: center !important; }
-.jux-text-right { text-align: right !important; }
-.jux-text-justify { text-align: justify !important; }
-
-.jux-text-uppercase { text-transform: uppercase !important; }
-.jux-text-lowercase { text-transform: lowercase !important; }
-.jux-text-capitalize { text-transform: capitalize !important; }
-.jux-text-none { text-transform: none !important; }
-
-.jux-whitespace-normal { white-space: normal !important; }
-.jux-whitespace-nowrap { white-space: nowrap !important; }
-.jux-whitespace-pre { white-space: pre !important; }
-.jux-whitespace-pre-wrap { white-space: pre-wrap !important; }
-.jux-whitespace-pre-line { white-space: pre-line !important; }
-
-.jux-word-wrap-normal { word-wrap: normal !important; }
-.jux-word-wrap-break { word-wrap: break-word !important; }
-
-/* ═════════════════════════════════════════════════════════════════
- * BORDER STYLE UTILITIES
- * ═════════════════════════════════════════════════════════════════ */
-
-.jux-border-solid { border-style: solid !important; }
-.jux-border-dashed { border-style: dashed !important; }
-.jux-border-dotted { border-style: dotted !important; }
-.jux-border-double { border-style: double !important; }
-.jux-border-none { border-style: none !important; }