@dayflow/core 3.3.1 → 3.3.3

package/dist/styles.components.css

@@ -100,10 +100,21 @@
 }
 .df-calendar-container,
 .df-portal {
+  --color-background: var(--df-color-background);
+  --color-foreground: var(--df-color-foreground);
+  --color-hover: var(--df-color-hover);
+  --color-border: var(--df-color-border);
+  --color-card: var(--df-color-card);
+  --color-card-foreground: var(--df-color-card-foreground);
+  --color-muted: var(--df-color-muted);
+  --color-muted-foreground: var(--df-color-muted-foreground);
   --color-primary: var(--df-color-primary);
   --color-primary-foreground: var(--df-color-primary-foreground);
+  --color-secondary: var(--df-color-secondary);
+  --color-secondary-foreground: var(--df-color-secondary-foreground);
   --color-destructive: var(--df-color-destructive);
   --color-destructive-foreground: var(--df-color-destructive-foreground);
+  --hover: var(--df-color-hover);
 }
 @layer df-theme {
   :where(:root) {
@@ -190,6 +201,7 @@
     .df-all-day-cell,
     .df-time-column,
     .df-time-grid-row,
+    .df-time-grid-boundary,
     .df-all-day-row,
     .df-mini-calendar {
       border-color: var(--df-color-border);

package/dist/styles.css

@@ -233,6 +233,20 @@
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-geist-sans);
     --default-mono-font-family: var(--font-geist-mono);
+    --color-background: var(--df-color-background);
+    --color-foreground: var(--df-color-foreground);
+    --color-hover: var(--df-color-hover);
+    --color-border: var(--df-color-border);
+    --color-card: var(--df-color-card);
+    --color-card-foreground: var(--df-color-card-foreground);
+    --color-muted: var(--df-color-muted);
+    --color-muted-foreground: var(--df-color-muted-foreground);
+    --color-primary: var(--df-color-primary);
+    --color-primary-foreground: var(--df-color-primary-foreground);
+    --color-secondary: var(--df-color-secondary);
+    --color-secondary-foreground: var(--df-color-secondary-foreground);
+    --color-destructive: var(--df-color-destructive);
+    --color-destructive-foreground: var(--df-color-destructive-foreground);
   }
 }
 .pointer-events-auto {
@@ -382,6 +396,9 @@
 .z-10001 {
   z-index: 10001;
 }
+.z-\[15\] {
+  z-index: 15;
+}
 .z-\[9999\] {
   z-index: 9999;
 }
@@ -412,6 +429,9 @@
 .-mx-1 {
   margin-inline: calc(var(--spacing) * -1);
 }
+.mx-0\.5 {
+  margin-inline: calc(var(--spacing) * 0.5);
+}
 .mx-2 {
   margin-inline: calc(var(--spacing) * 2);
 }
@@ -493,6 +513,9 @@
 .block {
   display: block;
 }
+.block\! {
+  display: block !important;
+}
 .flex {
   display: flex;
 }
@@ -770,6 +793,9 @@
   --tw-scale-z: 110%;
   scale: var(--tw-scale-x) var(--tw-scale-y);
 }
+.-rotate-90 {
+  rotate: calc(90deg * -1);
+}
 .rotate-45 {
   rotate: 45deg;
 }
@@ -833,6 +859,9 @@
 .flex-row {
   flex-direction: row;
 }
+.flex-wrap {
+  flex-wrap: wrap;
+}
 .items-center {
   align-items: center;
 }
@@ -932,6 +961,9 @@
     margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
   }
 }
+.gap-y-0\.5 {
+  row-gap: calc(var(--spacing) * 0.5);
+}
 .self-stretch {
   align-self: stretch;
 }
@@ -1724,6 +1756,11 @@
     }
   }
 }
+.last\:mb-0 {
+  &:last-child {
+    margin-bottom: calc(var(--spacing) * 0);
+  }
+}
 .last\:border-0 {
   &:last-child {
     border-style: var(--tw-border-style);
@@ -2081,6 +2118,11 @@
     width: 70%;
   }
 }
+.md\:flex-row {
+  @media (width >= 48rem) {
+    flex-direction: row;
+  }
+}
 .md\:text-xs {
   @media (width >= 48rem) {
     font-size: var(--text-xs);
@@ -2576,10 +2618,20 @@
 .df-calendar-container,
 .df-portal {
   --color-background: var(--df-color-background);
+  --color-foreground: var(--df-color-foreground);
+  --color-hover: var(--df-color-hover);
+  --color-border: var(--df-color-border);
+  --color-card: var(--df-color-card);
+  --color-card-foreground: var(--df-color-card-foreground);
+  --color-muted: var(--df-color-muted);
+  --color-muted-foreground: var(--df-color-muted-foreground);
   --color-primary: var(--df-color-primary);
   --color-primary-foreground: var(--df-color-primary-foreground);
+  --color-secondary: var(--df-color-secondary);
+  --color-secondary-foreground: var(--df-color-secondary-foreground);
   --color-destructive: var(--df-color-destructive);
   --color-destructive-foreground: var(--df-color-destructive-foreground);
+  --hover: var(--df-color-hover);
 }
 @layer df-theme {
   :where(:root) {
@@ -2640,18 +2692,10 @@
     flex-direction: row;
     overflow: hidden;
     border-radius: var(--radius-lg);
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--color-gray-200);
-    background-color: var(--color-white);
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    .dark & {
-      border-color: var(--color-gray-700);
-    }
-    .dark & {
-      background-color: var(--color-gray-900);
-    }
+    background-color: var(--df-color-background);
+    border: 1px solid var(--df-color-border);
     --df-calendar-height: 800px;
     height: var(--df-calendar-height, 800px);
     font-family: Arial;
@@ -2664,10 +2708,7 @@
   .df-calendar-time-column {
     width: calc(var(--spacing) * 20);
     flex-shrink: 0;
-    border-color: var(--color-gray-200);
-    .dark & {
-      border-color: var(--color-gray-700);
-    }
+    border-color: var(--df-color-border);
   }
   .df-calendar-nav-button {
     border-radius: 0.25rem;
@@ -2727,12 +2768,7 @@
     align-items: center;
     justify-content: center;
     border-radius: var(--radius-sm);
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--color-gray-300);
-    .dark & {
-      border-color: var(--color-gray-600);
-    }
+    border: 1px solid var(--df-color-border);
     -webkit-appearance: none;
        -moz-appearance: none;
             appearance: none;
@@ -2757,66 +2793,37 @@
     transform: rotate(45deg);
   }
   .df-header {
-    background-color: var(--color-white);
-    .dark & {
-      background-color: var(--color-gray-900);
-    }
+    background-color: var(--df-color-background);
   }
   .df-calendar {
-    background-color: var(--color-white);
-    .dark & {
-      background-color: var(--color-gray-900);
-    }
+    background-color: var(--df-color-background);
   }
   .df-month-view {
-    background-color: var(--color-white);
-    .dark & {
-      background-color: var(--color-gray-900);
-    }
+    background-color: var(--df-color-background);
   }
   .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);
-    }
+    background-color: var(--df-color-background);
+    border-color: var(--df-color-border);
   }
   .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);
-    }
+    border-color: var(--df-color-border);
   }
   .df-time-column {
-    border-color: var(--color-gray-200);
-    .dark & {
-      border-color: var(--color-gray-700);
-    }
+    border-color: var(--df-color-border);
   }
   .df-time-grid-row,
+  .df-time-grid-boundary,
   .df-all-day-row,
   .df-mini-calendar {
-    border-color: var(--color-gray-200);
-    .dark & {
-      border-color: var(--color-gray-700);
-    }
+    border-color: var(--df-color-border);
   }
   .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);
-    }
+    background-color: var(--df-color-card);
+    border-color: var(--df-color-border);
   }
   .df-portal .bg-destructive {
     background-color: var(--df-color-destructive);
@@ -2836,14 +2843,8 @@
     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);
-    }
+    background-color: var(--df-color-background);
+    border-color: var(--df-color-border);
   }
   .df-year-grid-month {
     --heat-1: #ebf5ff;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dayflow/core",
-  "version": "3.3.1",
+  "version": "3.3.3",
   "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",