@dayflow/core 3.2.3 → 3.3.1

package/dist/styles.css

@@ -163,6 +163,7 @@
 }
 @layer theme {
   :root, :host {
+    --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-yellow-200: oklch(94.5% 0.129 101.54);
     --color-yellow-600: oklch(68.1% 0.162 75.834);
@@ -183,7 +184,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);
@@ -200,6 +200,7 @@
     --spacing: 0.25rem;
     --container-sm: 24rem;
     --container-md: 28rem;
+    --container-xl: 36rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -426,6 +427,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 +586,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);
 }
@@ -673,6 +680,9 @@
 .max-w-sm {
   max-width: var(--container-sm);
 }
+.max-w-xl {
+  max-width: var(--container-xl);
+}
 .min-w-0 {
   min-width: calc(var(--spacing) * 0);
 }
@@ -868,12 +878,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 +955,9 @@
 .overflow-y-auto {
   overflow-y: auto;
 }
+.overscroll-contain {
+  overscroll-behavior: contain;
+}
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1081,6 +1100,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 +1382,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 +1425,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 +1494,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 +1760,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 +1870,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 +1919,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 +1961,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 +1981,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 +2223,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);
@@ -2238,6 +2276,11 @@
     color: var(--color-gray-900);
   }
 }
+.dark\:text-red-400 {
+  .dark & {
+    color: var(--color-red-400);
+  }
+}
 .dark\:text-slate-50 {
   .dark & {
     color: var(--color-slate-50);
@@ -2352,15 +2395,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 +2455,6 @@
     }
   }
 }
-.dark\:hover\:text-white {
-  .dark & {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-white);
-      }
-    }
-  }
-}
 .dark\:hover\:shadow-lg {
   .dark & {
     &:hover {
@@ -2452,20 +2477,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 +2570,16 @@
 .bcp-petal-ring {
   pointer-events: none;
 }
-:root {
+.df-calendar-container {
   color-scheme: light dark;
-  font-family: Arial;
+}
+.df-calendar-container,
+.df-portal {
+  --color-background: var(--df-color-background);
+  --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 +2599,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 +2654,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 +2669,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 +2692,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 +2718,7 @@
       }
     }
   }
-  .calendar-checkbox {
+  .df-calendar-checkbox {
     margin-right: calc(var(--spacing) * 2);
     display: inline-flex;
     height: calc(var(--spacing) * 4);
@@ -2720,15 +2739,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 +2756,182 @@
     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-portal .bg-destructive {
+    background-color: var(--df-color-destructive);
+    color: var(--df-color-destructive-foreground);
   }
-  to {
-    transform: translateY(0);
+  .df-portal .hover\:bg-destructive\/90:hover {
+    background-color: var(--df-color-destructive);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(
+      in srgb,
+      var(--df-color-destructive) 90%,
+      transparent
+    );
+    }
+  }
+  .df-portal .text-destructive-foreground {
+    color: var(--df-color-destructive-foreground);
+  }
+  .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);
+    }
+  }
+  .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;