@dayflow/core 3.2.3 → 3.3.0

package/dist/styles.css

@@ -183,7 +183,6 @@
     --color-slate-600: oklch(44.6% 0.043 257.281);
     --color-slate-700: oklch(37.2% 0.044 257.287);
     --color-slate-800: oklch(27.9% 0.041 260.031);
-    --color-slate-900: oklch(20.8% 0.042 265.755);
     --color-slate-950: oklch(12.9% 0.042 264.695);
     --color-gray-50: oklch(98.5% 0.002 247.839);
     --color-gray-100: oklch(96.7% 0.003 264.542);
@@ -426,6 +425,9 @@
 .mt-1 {
   margin-top: calc(var(--spacing) * 1);
 }
+.mt-1\.5 {
+  margin-top: calc(var(--spacing) * 1.5);
+}
 .mt-2 {
   margin-top: calc(var(--spacing) * 2);
 }
@@ -582,6 +584,9 @@
 .max-h-100 {
   max-height: calc(var(--spacing) * 100);
 }
+.min-h-0 {
+  min-height: calc(var(--spacing) * 0);
+}
 .min-h-20 {
   min-height: calc(var(--spacing) * 20);
 }
@@ -868,12 +873,18 @@
 .gap-2 {
   gap: calc(var(--spacing) * 2);
 }
+.gap-2\.5 {
+  gap: calc(var(--spacing) * 2.5);
+}
 .gap-3 {
   gap: calc(var(--spacing) * 3);
 }
 .gap-4 {
   gap: calc(var(--spacing) * 4);
 }
+.gap-px {
+  gap: 1px;
+}
 .space-y-1 {
   :where(& > :not(:last-child)) {
     --tw-space-y-reverse: 0;
@@ -939,6 +950,9 @@
 .overflow-y-auto {
   overflow-y: auto;
 }
+.overscroll-contain {
+  overscroll-behavior: contain;
+}
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1081,6 +1095,9 @@
 .border-l-primary {
   border-left-color: var(--df-color-primary);
 }
+.bg-\[var\(--df-color-primary\)\] {
+  background-color: var(--df-color-primary);
+}
 .bg-background {
   background-color: var(--df-color-background);
 }
@@ -1360,6 +1377,10 @@
 .text-\[12px\] {
   font-size: 12px;
 }
+.leading-6 {
+  --tw-leading: calc(var(--spacing) * 6);
+  line-height: calc(var(--spacing) * 6);
+}
 .leading-\[16px\] {
   --tw-leading: 16px;
   line-height: 16px;
@@ -1399,6 +1420,12 @@
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.text-\[var\(--df-color-foreground\)\] {
+  color: var(--df-color-foreground);
+}
+.text-\[var\(--df-color-primary-foreground\)\] {
+  color: var(--df-color-primary-foreground);
+}
 .text-black {
   color: var(--color-black);
 }
@@ -1462,9 +1489,6 @@
 .text-slate-700 {
   color: var(--color-slate-700);
 }
-.text-slate-900 {
-  color: var(--color-slate-900);
-}
 .text-slate-950 {
   color: var(--color-slate-950);
 }
@@ -1731,6 +1755,13 @@
     }
   }
 }
+.hover\:bg-\[var\(--df-color-primary\)\] {
+  &:hover {
+    @media (hover: hover) {
+      background-color: var(--df-color-primary);
+    }
+  }
+}
 .hover\:bg-blue-100 {
   &:hover {
     @media (hover: hover) {
@@ -1834,6 +1865,13 @@
     }
   }
 }
+.hover\:text-\[var\(--df-color-primary-foreground\)\] {
+  &:hover {
+    @media (hover: hover) {
+      color: var(--df-color-primary-foreground);
+    }
+  }
+}
 .hover\:text-destructive-foreground {
   &:hover {
     @media (hover: hover) {
@@ -1876,17 +1914,17 @@
     }
   }
 }
-.hover\:text-white {
+.hover\:underline {
   &:hover {
     @media (hover: hover) {
-      color: var(--color-white);
+      text-decoration-line: underline;
     }
   }
 }
-.hover\:underline {
+.hover\:opacity-80 {
   &:hover {
     @media (hover: hover) {
-      text-decoration-line: underline;
+      opacity: 80%;
     }
   }
 }
@@ -1918,14 +1956,19 @@
     border-color: var(--df-color-primary);
   }
 }
+.focus\:bg-\[var\(--df-color-primary\)\] {
+  &:focus {
+    background-color: var(--df-color-primary);
+  }
+}
 .focus\:bg-destructive {
   &:focus {
     background-color: var(--df-color-destructive);
   }
 }
-.focus\:bg-primary {
+.focus\:text-\[var\(--df-color-primary-foreground\)\] {
   &:focus {
-    background-color: var(--df-color-primary);
+    color: var(--df-color-primary-foreground);
   }
 }
 .focus\:text-destructive-foreground {
@@ -1933,11 +1976,6 @@
     color: var(--df-color-destructive-foreground);
   }
 }
-.focus\:text-white {
-  &:focus {
-    color: var(--color-white);
-  }
-}
 .focus\:ring-1 {
   &:focus {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2180,11 +2218,6 @@
     background-color: var(--color-slate-800);
   }
 }
-.dark\:bg-slate-900 {
-  .dark & {
-    background-color: var(--color-slate-900);
-  }
-}
 .dark\:bg-slate-950 {
   .dark & {
     background-color: var(--color-slate-950);
@@ -2352,15 +2385,6 @@
     }
   }
 }
-.dark\:hover\:bg-primary {
-  .dark & {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--df-color-primary);
-      }
-    }
-  }
-}
 .dark\:hover\:bg-primary\/20 {
   .dark & {
     &:hover {
@@ -2421,15 +2445,6 @@
     }
   }
 }
-.dark\:hover\:text-white {
-  .dark & {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-white);
-      }
-    }
-  }
-}
 .dark\:hover\:shadow-lg {
   .dark & {
     &:hover {
@@ -2452,20 +2467,6 @@
     }
   }
 }
-.dark\:focus\:bg-primary {
-  .dark & {
-    &:focus {
-      background-color: var(--df-color-primary);
-    }
-  }
-}
-.dark\:focus\:text-white {
-  .dark & {
-    &:focus {
-      color: var(--color-white);
-    }
-  }
-}
 .dark\:focus\:ring-offset-slate-800 {
   .dark & {
     &:focus {
@@ -2559,9 +2560,15 @@
 .bcp-petal-ring {
   pointer-events: none;
 }
-:root {
+.df-calendar-container {
   color-scheme: light dark;
-  font-family: Arial;
+}
+.df-calendar-container,
+.df-portal {
+  --color-primary: var(--df-color-primary);
+  --color-primary-foreground: var(--df-color-primary-foreground);
+  --color-destructive: var(--df-color-destructive);
+  --color-destructive-foreground: var(--df-color-destructive-foreground);
 }
 @layer df-theme {
   :where(:root) {
@@ -2581,35 +2588,35 @@
     --df-color-destructive-foreground: rgb(255 255 255);
   }
   :where(.dark) {
-    --df-color-background: rgb(21 21 21);
-    --df-color-hover: rgb(28 28 28);
+    --df-color-background: rgb(16 24 40);
+    --df-color-hover: rgb(30 41 59);
     --df-color-foreground: rgb(229 229 229);
-    --df-color-card: rgb(31 41 55);
+    --df-color-card: rgb(16 24 40);
     --df-color-card-foreground: rgb(229 229 229);
-    --df-color-border: rgb(56 56 56);
-    --df-color-muted: rgb(55 65 81);
-    --df-color-muted-foreground: rgb(156 163 175);
+    --df-color-border: rgb(51 65 85);
+    --df-color-muted: rgb(30 41 59);
+    --df-color-muted-foreground: rgb(148 163 184);
     --df-color-primary: rgb(229 229 229);
-    --df-color-primary-foreground: rgb(23 23 23);
-    --df-color-secondary: rgb(156 163 175);
-    --df-color-secondary-foreground: rgb(23 23 23);
+    --df-color-primary-foreground: rgb(15 23 42);
+    --df-color-secondary: rgb(148 163 184);
+    --df-color-secondary-foreground: rgb(15 23 42);
     --df-color-destructive: rgb(147 70 69);
     --df-color-destructive-foreground: rgb(254 242 242);
   }
   @media (prefers-color-scheme: dark) {
     :root:not(.light):not(.dark) {
-      --df-color-background: rgb(21 21 21);
-      --df-color-hover: rgb(28 28 28);
+      --df-color-background: rgb(16 24 40);
+      --df-color-hover: rgb(30 41 59);
       --df-color-foreground: rgb(229 229 229);
-      --df-color-border: rgb(56 56 56);
-      --df-color-card: rgb(31 41 55);
+      --df-color-border: rgb(51 65 85);
+      --df-color-card: rgb(16 24 40);
       --df-color-card-foreground: rgb(229 229 229);
-      --df-color-muted: rgb(55 65 81);
-      --df-color-muted-foreground: rgb(156 163 175);
+      --df-color-muted: rgb(30 41 59);
+      --df-color-muted-foreground: rgb(148 163 184);
       --df-color-primary: rgb(229 229 229);
-      --df-color-primary-foreground: rgb(23 23 23);
-      --df-color-secondary: rgb(156 163 175);
-      --df-color-secondary-foreground: rgb(23 23 23);
+      --df-color-primary-foreground: rgb(15 23 42);
+      --df-color-secondary: rgb(148 163 184);
+      --df-color-secondary-foreground: rgb(15 23 42);
       --df-color-destructive: rgb(147 70 69);
       --df-color-destructive-foreground: rgb(254 242 242);
     }
@@ -2636,13 +2643,14 @@
     }
     --df-calendar-height: 800px;
     height: var(--df-calendar-height, 800px);
+    font-family: Arial;
   }
   @media (max-width: 768px) {
     .df-calendar-container {
       --df-calendar-height: 550px;
     }
   }
-  .calendar-time-column {
+  .df-calendar-time-column {
     width: calc(var(--spacing) * 20);
     flex-shrink: 0;
     border-color: var(--color-gray-200);
@@ -2650,7 +2658,7 @@
       border-color: var(--color-gray-700);
     }
   }
-  .calendar-nav-button {
+  .df-calendar-nav-button {
     border-radius: 0.25rem;
     padding: calc(var(--spacing) * 1);
     color: var(--color-gray-600);
@@ -2673,7 +2681,7 @@
       }
     }
   }
-  .calendar-today-button {
+  .df-calendar-today-button {
     border-radius: 0.25rem;
     padding-inline: calc(var(--spacing) * 4);
     padding-block: calc(var(--spacing) * 1);
@@ -2699,7 +2707,7 @@
       }
     }
   }
-  .calendar-checkbox {
+  .df-calendar-checkbox {
     margin-right: calc(var(--spacing) * 2);
     display: inline-flex;
     height: calc(var(--spacing) * 4);
@@ -2720,15 +2728,15 @@
     background-color: transparent;
     position: relative;
   }
-  .calendar-checkbox:focus-visible {
+  .df-calendar-checkbox:focus-visible {
     outline: 2px solid var(--checkbox-color, #3b82f6);
     outline-offset: 2px;
   }
-  .calendar-checkbox:checked {
+  .df-calendar-checkbox:checked {
     background-color: var(--checkbox-color, #3b82f6);
     border-color: var(--checkbox-color, #3b82f6);
   }
-  .calendar-checkbox:checked::after {
+  .df-calendar-checkbox:checked::after {
     content: '';
     display: block;
     width: 0.25rem;
@@ -2737,149 +2745,165 @@
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
   }
-}
-@keyframes fadeOut {
-  from {
-    opacity: 1;
+  .df-header {
+    background-color: var(--color-white);
+    .dark & {
+      background-color: var(--color-gray-900);
+    }
   }
-  to {
-    opacity: 0;
+  .df-calendar {
+    background-color: var(--color-white);
+    .dark & {
+      background-color: var(--color-gray-900);
+    }
   }
-}
-@keyframes fadeIn {
-  from {
-    opacity: 0;
+  .df-month-view {
+    background-color: var(--color-white);
+    .dark & {
+      background-color: var(--color-gray-900);
+    }
   }
-  to {
-    opacity: 1;
+  .df-week-header-row,
+  .df-week-header {
+    border-color: var(--color-gray-200);
+    background-color: var(--color-white);
+    .dark & {
+      border-color: var(--color-gray-700);
+    }
+    .dark & {
+      background-color: var(--color-gray-900);
+    }
   }
-}
-@keyframes df-event-pop-in {
-  from {
-    opacity: 0;
-    transform: scale(0.95) translateY(-4px);
+  .df-month-day-cell,
+  .df-time-grid-cell,
+  .df-all-day-cell {
+    border-color: var(--color-gray-200);
+    .dark & {
+      border-color: var(--color-gray-700);
+    }
   }
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
+  .df-time-column {
+    border-color: var(--color-gray-200);
+    .dark & {
+      border-color: var(--color-gray-700);
+    }
   }
-}
-.df-all-day-event-animate {
-  animation: df-event-pop-in 0.3s ease-out forwards;
-}
-@keyframes zoomIn {
-  from {
-    transform: scale(0.95);
+  .df-time-grid-row,
+  .df-all-day-row,
+  .df-mini-calendar {
+    border-color: var(--color-gray-200);
+    .dark & {
+      border-color: var(--color-gray-700);
+    }
   }
-  to {
-    transform: scale(1);
+  .df-event-detail-panel,
+  .df-dialog-container {
+    border-color: var(--color-gray-200);
+    background-color: var(--color-white);
+    .dark & {
+      border-color: var(--color-gray-700);
+    }
+    .dark & {
+      background-color: var(--color-gray-800);
+    }
   }
-}
-.animate-in {
-  animation-duration: 200ms;
-  animation-fill-mode: forwards;
-  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
-.fade-in {
-  animation-name: fadeIn;
-}
-.zoom-in-95 {
-  animation-name: zoomIn;
-}
-.fade-in.zoom-in-95 {
-  animation-name: fadeIn, zoomIn;
-}
-@keyframes slideUp {
-  from {
-    transform: translateY(100%);
+  .df-sidebar {
+    border-color: var(--color-gray-200);
+    background-color: var(--color-white);
+    .dark & {
+      border-color: var(--color-gray-700);
+    }
+    .dark & {
+      background-color: var(--color-gray-900);
+    }
   }
-  to {
-    transform: translateY(0);
+  .df-year-grid-month {
+    --heat-1: #ebf5ff;
+    --heat-2: #cfe8ff;
+    --heat-3: #91d5ff;
+    --heat-4: #60a5fa;
+    --heat-5: #3b82f6;
+  }
+  .dark .df-year-grid-month {
+    --heat-1: #1e3a5f;
+    --heat-2: #2563eb;
+    --heat-3: #1e40af;
+    --heat-4: #3b82f6;
+    --heat-5: #93c5fd;
+  }
+  .df-calendar-container *::-webkit-scrollbar {
+    width: 2px;
+    height: 2px;
+  }
+  .df-calendar-container *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .df-calendar-container *::-webkit-scrollbar-thumb {
+    background: #d1d5db;
+    border-radius: 1px;
+  }
+  .dark .df-calendar-container *::-webkit-scrollbar-thumb {
+    background: #4b5563;
+  }
+  .df-calendar-container *::-webkit-scrollbar-thumb:hover {
+    background: #9ca3af;
+  }
+  .df-calendar-container * {
+    scrollbar-width: thin;
+    scrollbar-color: #d1d5db transparent;
+  }
+  .dark .df-calendar-container * {
+    scrollbar-color: #4b5563 transparent;
+  }
+  .df-calendar-container .df-header-left {
+    flex: 1;
+  }
+  .df-calendar-container .df-header-mid {
+    flex: 1;
+  }
+  .df-calendar-container .df-header-right {
+    flex: 1;
+  }
+  .df-calendar-container.df-drag-active,
+  .df-calendar-container .df-drag-active {
+    -moz-user-select: none;
+         user-select: none;
+    -webkit-user-select: none;
+  }
+  .df-calendar-container.df-drag-active .calendar-event,
+  .df-calendar-container.df-drag-active .df-month-more-events,
+  .df-calendar-container.df-drag-active .df-month-title,
+  .df-calendar-container.df-drag-active .df-year-event-content {
+    pointer-events: none;
+  }
+  .df-calendar-container .df-cursor-ns-resize,
+  .df-calendar-container .df-cursor-ns-resize * {
+    cursor: ns-resize;
+  }
+  .df-calendar-container .df-cursor-ew-resize,
+  .df-calendar-container .df-cursor-ew-resize * {
+    cursor: ew-resize;
+  }
+  .df-calendar-container .df-cursor-grabbing,
+  .df-calendar-container .df-cursor-grabbing * {
+    cursor: grabbing;
+  }
+  .df-calendar-container .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+  .df-calendar-container .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
   }
 }
-@keyframes slideDown {
+@keyframes df-fade-out {
   from {
-    transform: translateY(0);
+    opacity: 1;
   }
   to {
-    transform: translateY(100%);
-  }
-}
-.animate-slide-up {
-  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-.animate-slide-down {
-  animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-@media (max-width: 767px) {
-  .mobile-mask-fade {
-    mask-image: linear-gradient(to right, black 70%, transparent 100%);
-    -webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%);
+    opacity: 0;
   }
 }
-.scrollbar-hide::-webkit-scrollbar {
-  display: none;
-}
-.scrollbar-hide {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-.df-calendar-container *::-webkit-scrollbar {
-  width: 2px;
-  height: 2px;
-}
-.df-calendar-container *::-webkit-scrollbar-track {
-  background: transparent;
-}
-.df-calendar-container *::-webkit-scrollbar-thumb {
-  background: #d1d5db;
-  border-radius: 1px;
-}
-.dark .df-calendar-container *::-webkit-scrollbar-thumb {
-  background: #4b5563;
-}
-.df-calendar-container *::-webkit-scrollbar-thumb:hover {
-  background: #9ca3af;
-}
-.df-calendar-container * {
-  scrollbar-width: thin;
-  scrollbar-color: #d1d5db transparent;
-}
-.dark .df-calendar-container * {
-  scrollbar-color: #4b5563 transparent;
-}
-.df-header-left {
-  flex: 1;
-}
-.df-header-mid {
-  flex: 1;
-}
-.df-header-right {
-  flex: 1;
-}
-.df-drag-active {
-  -moz-user-select: none;
-       user-select: none;
-  -webkit-user-select: none;
-}
-.df-drag-active .calendar-event,
-.df-drag-active .df-month-more-events,
-.df-drag-active .df-month-title,
-.df-drag-active .df-year-event-content {
-  pointer-events: none;
-}
-.df-cursor-ns-resize,
-.df-cursor-ns-resize * {
-  cursor: ns-resize;
-}
-.df-cursor-ew-resize,
-.df-cursor-ew-resize * {
-  cursor: ew-resize;
-}
-.df-cursor-grabbing,
-.df-cursor-grabbing * {
-  cursor: grabbing;
-}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dayflow/core",
-  "version": "3.2.3",
+  "version": "3.3.0",
   "description": "A flexible and feature-rich calendar engine powered by Preact with drag-and-drop support, multiple views (Day, Week, Month, Year), and plugin architecture",
   "keywords": [
     "calendar",