@dayflow/core 3.0.1 → 3.1.1

package/dist/styles.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.2.0 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer base {
   *, ::after, ::before, ::backdrop, ::file-selector-button {
@@ -163,6 +163,7 @@
 }
 @layer theme {
   :root, :host {
+    --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);
     --color-green-500: oklch(72.3% 0.219 149.579);
@@ -230,20 +231,6 @@
     --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(--color-background);
-    --color-foreground: var(--color-foreground);
-    --color-hover: var(--color-hover);
-    --color-border: var(--color-border);
-    --color-card: var(--color-card);
-    --color-card-foreground: var(--color-card-foreground);
-    --color-muted: var(--color-muted);
-    --color-muted-foreground: var(--color-muted-foreground);
-    --color-primary: var(--color-primary);
-    --color-primary-foreground: var(--color-primary-foreground);
-    --color-secondary: var(--color-secondary);
-    --color-secondary-foreground: var(--color-secondary-foreground);
-    --color-destructive: var(--color-destructive);
-    --color-destructive-foreground: var(--color-destructive-foreground);
   }
 }
 .pointer-events-auto {
@@ -279,6 +266,12 @@
 .inset-y-0 {
   inset-block: calc(var(--spacing) * 0);
 }
+.start {
+  inset-inline-start: var(--spacing);
+}
+.end {
+  inset-inline-end: var(--spacing);
+}
 .-top-1\.5 {
   top: calc(var(--spacing) * -1.5);
 }
@@ -289,7 +282,7 @@
   top: calc(var(--spacing) * 1);
 }
 .top-1\/2 {
-  top: calc(1/2 * 100%);
+  top: calc(1 / 2 * 100%);
 }
 .top-4 {
   top: calc(var(--spacing) * 4);
@@ -384,6 +377,9 @@
 .z-10001 {
   z-index: 10001;
 }
+.z-\[9999\] {
+  z-index: 9999;
+}
 .col-span-2 {
   grid-column: span 2 / span 2;
 }
@@ -713,7 +709,7 @@
   transform-origin: 100% 0;
 }
 .-translate-x-1\/2 {
-  --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
 .translate-x-5 {
@@ -721,7 +717,7 @@
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
 .-translate-y-1\/2 {
-  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
 .scale-75 {
@@ -1023,7 +1019,7 @@
   border-style: none;
 }
 .border-border {
-  border-color: var(--color-border);
+  border-color: var(--df-color-border);
 }
 .border-gray-100 {
   border-color: var(--color-gray-100);
@@ -1035,12 +1031,12 @@
   border-color: var(--color-gray-300);
 }
 .border-primary {
-  border-color: var(--color-primary);
+  border-color: var(--df-color-primary);
 }
 .border-primary\/50 {
-  border-color: var(--color-primary);
+  border-color: var(--df-color-primary);
   @supports (color: color-mix(in lab, red, red)) {
-    border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
+    border-color: color-mix(in oklab, var(--df-color-primary) 50%, transparent);
   }
 }
 .border-slate-100 {
@@ -1053,10 +1049,10 @@
   border-color: transparent;
 }
 .border-l-primary {
-  border-left-color: var(--color-primary);
+  border-left-color: var(--df-color-primary);
 }
 .bg-background {
-  background-color: var(--color-background);
+  background-color: var(--df-color-background);
 }
 .bg-black\/30 {
   background-color: color-mix(in srgb, #000 30%, transparent);
@@ -1086,7 +1082,7 @@
   background-color: var(--color-blue-500);
 }
 .bg-destructive {
-  background-color: var(--color-destructive);
+  background-color: var(--df-color-destructive);
 }
 .bg-gray-50 {
   background-color: var(--color-gray-50);
@@ -1119,27 +1115,27 @@
   background-color: var(--color-green-500);
 }
 .bg-primary {
-  background-color: var(--color-primary);
+  background-color: var(--df-color-primary);
 }
 .bg-primary\/10 {
-  background-color: var(--color-primary);
+  background-color: var(--df-color-primary);
   @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
+    background-color: color-mix(in oklab, var(--df-color-primary) 10%, transparent);
   }
 }
 .bg-primary\/30 {
-  background-color: var(--color-primary);
+  background-color: var(--df-color-primary);
   @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
+    background-color: color-mix(in oklab, var(--df-color-primary) 30%, transparent);
   }
 }
 .bg-secondary {
-  background-color: var(--color-secondary);
+  background-color: var(--df-color-secondary);
 }
 .bg-secondary\/10 {
-  background-color: var(--color-secondary);
+  background-color: var(--df-color-secondary);
   @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--color-secondary) 10%, transparent);
+    background-color: color-mix(in oklab, var(--df-color-secondary) 10%, transparent);
   }
 }
 .bg-slate-50 {
@@ -1367,10 +1363,10 @@
   color: var(--color-blue-900);
 }
 .text-destructive {
-  color: var(--color-destructive);
+  color: var(--df-color-destructive);
 }
 .text-destructive-foreground {
-  color: var(--color-destructive-foreground);
+  color: var(--df-color-destructive-foreground);
 }
 .text-gray-300 {
   color: var(--color-gray-300);
@@ -1394,16 +1390,19 @@
   color: var(--color-gray-900);
 }
 .text-primary {
-  color: var(--color-primary);
+  color: var(--df-color-primary);
 }
 .text-primary-foreground {
-  color: var(--color-primary-foreground);
+  color: var(--df-color-primary-foreground);
+}
+.text-red-500 {
+  color: var(--color-red-500);
 }
 .text-secondary {
-  color: var(--color-secondary);
+  color: var(--df-color-secondary);
 }
 .text-secondary-foreground {
-  color: var(--color-secondary-foreground);
+  color: var(--df-color-secondary-foreground);
 }
 .text-slate-300 {
   color: var(--color-slate-300);
@@ -1511,18 +1510,18 @@
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 .shadow-primary\/20 {
-  --tw-shadow-color: var(--color-primary);
+  --tw-shadow-color: var(--df-color-primary);
   @supports (color: color-mix(in lab, red, red)) {
-    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 20%, transparent) var(--tw-shadow-alpha), transparent);
+    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--df-color-primary) 20%, transparent) var(--tw-shadow-alpha), transparent);
   }
 }
 .ring-primary {
-  --tw-ring-color: var(--color-primary);
+  --tw-ring-color: var(--df-color-primary);
 }
 .ring-primary\/20 {
-  --tw-ring-color: var(--color-primary);
+  --tw-ring-color: var(--df-color-primary);
   @supports (color: color-mix(in lab, red, red)) {
-    --tw-ring-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+    --tw-ring-color: color-mix(in oklab, var(--df-color-primary) 20%, transparent);
   }
 }
 .ring-offset-1 {
@@ -1533,10 +1532,6 @@
   --tw-ring-offset-width: 2px;
   --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
 }
-.blur {
-  --tw-blur: blur(8px);
-  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-}
 .grayscale-\[0\.5\] {
   --tw-grayscale: grayscale(0.5);
   filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -1618,7 +1613,7 @@
 }
 .group-focus-within\:text-primary {
   &:is(:where(.group):focus-within *) {
-    color: var(--color-primary);
+    color: var(--df-color-primary);
   }
 }
 .group-hover\:scale-110 {
@@ -1698,16 +1693,16 @@
 .hover\:bg-destructive {
   &:hover {
     @media (hover: hover) {
-      background-color: var(--color-destructive);
+      background-color: var(--df-color-destructive);
     }
   }
 }
 .hover\:bg-destructive\/90 {
   &:hover {
     @media (hover: hover) {
-      background-color: var(--color-destructive);
+      background-color: var(--df-color-destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-destructive) 90%, transparent);
+        background-color: color-mix(in oklab, var(--df-color-destructive) 90%, transparent);
       }
     }
   }
@@ -1743,16 +1738,16 @@
 .hover\:bg-primary {
   &:hover {
     @media (hover: hover) {
-      background-color: var(--color-primary);
+      background-color: var(--df-color-primary);
     }
   }
 }
 .hover\:bg-primary\/10 {
   &:hover {
     @media (hover: hover) {
-      background-color: var(--color-primary);
+      background-color: var(--df-color-primary);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
+        background-color: color-mix(in oklab, var(--df-color-primary) 10%, transparent);
       }
     }
   }
@@ -1760,9 +1755,9 @@
 .hover\:bg-primary\/90 {
   &:hover {
     @media (hover: hover) {
-      background-color: var(--color-primary);
+      background-color: var(--df-color-primary);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
+        background-color: color-mix(in oklab, var(--df-color-primary) 90%, transparent);
       }
     }
   }
@@ -1770,9 +1765,9 @@
 .hover\:bg-secondary\/20 {
   &:hover {
     @media (hover: hover) {
-      background-color: var(--color-secondary);
+      background-color: var(--df-color-secondary);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-secondary) 20%, transparent);
+        background-color: color-mix(in oklab, var(--df-color-secondary) 20%, transparent);
       }
     }
   }
@@ -1787,7 +1782,7 @@
 .hover\:text-destructive-foreground {
   &:hover {
     @media (hover: hover) {
-      color: var(--color-destructive-foreground);
+      color: var(--df-color-destructive-foreground);
     }
   }
 }
@@ -1815,7 +1810,7 @@
 .hover\:text-primary {
   &:hover {
     @media (hover: hover) {
-      color: var(--color-primary);
+      color: var(--df-color-primary);
     }
   }
 }
@@ -1865,17 +1860,17 @@
 }
 .focus\:border-primary {
   &:focus {
-    border-color: var(--color-primary);
+    border-color: var(--df-color-primary);
   }
 }
 .focus\:bg-destructive {
   &:focus {
-    background-color: var(--color-destructive);
+    background-color: var(--df-color-destructive);
   }
 }
 .focus\:bg-primary {
   &:focus {
-    background-color: var(--color-primary);
+    background-color: var(--df-color-primary);
   }
 }
 .focus\:bg-slate-100 {
@@ -1885,7 +1880,7 @@
 }
 .focus\:text-destructive-foreground {
   &:focus {
-    color: var(--color-destructive-foreground);
+    color: var(--df-color-destructive-foreground);
   }
 }
 .focus\:text-white {
@@ -1907,7 +1902,7 @@
 }
 .focus\:ring-primary {
   &:focus {
-    --tw-ring-color: var(--color-primary);
+    --tw-ring-color: var(--df-color-primary);
   }
 }
 .focus\:ring-offset-1 {
@@ -2026,7 +2021,7 @@
 }
 .dark\:border-l-primary {
   .dark & {
-    border-left-color: var(--color-primary);
+    border-left-color: var(--df-color-primary);
   }
 }
 .dark\:bg-black\/80 {
@@ -2104,9 +2099,9 @@
 }
 .dark\:bg-primary\/20 {
   .dark & {
-    background-color: var(--color-primary);
+    background-color: var(--df-color-primary);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+      background-color: color-mix(in oklab, var(--df-color-primary) 20%, transparent);
     }
   }
 }
@@ -2286,7 +2281,7 @@
   .dark & {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-primary);
+        background-color: var(--df-color-primary);
       }
     }
   }
@@ -2295,9 +2290,9 @@
   .dark & {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-primary);
+        background-color: var(--df-color-primary);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+          background-color: color-mix(in oklab, var(--df-color-primary) 20%, transparent);
         }
       }
     }
@@ -2385,7 +2380,7 @@
 .dark\:focus\:bg-primary {
   .dark & {
     &:focus {
-      background-color: var(--color-primary);
+      background-color: var(--df-color-primary);
     }
   }
 }
@@ -2499,53 +2494,57 @@
 :root {
   color-scheme: light dark;
 }
-:where(:root) {
-  --color-background: rgb(255 255 255);
-  --color-foreground: rgb(46 46 46);
-  --color-hover: rgb(245 245 245);
-  --color-border: rgb(229 229 229);
-  --color-card: rgb(255 255 255);
-  --color-card-foreground: rgb(46 46 46);
-  --color-muted: rgb(243 244 246);
-  --color-muted-foreground: rgb(107 114 128);
-  --color-primary: rgb(46 46 46);
-  --color-primary-foreground: rgb(255 255 255);
-  --color-secondary: rgb(100 116 139);
-  --color-secondary-foreground: rgb(255 255 255);
-  --color-destructive: rgb(212 36 34);
-  --color-destructive-foreground: rgb(255 255 255);
-}
-:where(.dark) {
-  --color-background: rgb(21 21 21);
-  --color-hover: rgb(28 28 28);
-  --color-foreground: rgb(229 229 229);
-  --color-card: rgb(31 41 55);
-  --color-card-foreground: rgb(229 229 229);
-  --color-border: rgb(56 56 56);
-  --color-muted: rgb(55 65 81);
-  --color-muted-foreground: rgb(156 163 175);
-  --color-primary: rgb(229 229 229);
-  --color-primary-foreground: rgb(23 23 23);
-  --color-secondary: rgb(156 163 175);
-  --color-secondary-foreground: rgb(23 23 23);
-  --color-destructive: rgb(147 70 69);
-  --color-destructive-foreground: rgb(254 242 242);
-}
-@media (prefers-color-scheme: dark) {
-  :root:not(.light):not(.dark) {
-    --color-background: rgb(17 24 39);
-    --color-foreground: rgb(243 244 246);
-    --color-border: rgb(55 65 81);
-    --color-card: rgb(31 41 55);
-    --color-card-foreground: rgb(243 244 246);
-    --color-muted: rgb(55 65 81);
-    --color-muted-foreground: rgb(156 163 175);
-  }
-}
-body {
-  background: var(--color-background);
-  color: var(--color-foreground);
-  font-family: Arial, Helvetica, sans-serif;
+@layer df-theme {
+  :where(:root) {
+    --df-color-background: rgb(255 255 255);
+    --df-color-foreground: rgb(46 46 46);
+    --df-color-hover: rgb(245 245 245);
+    --df-color-border: rgb(229 229 229);
+    --df-color-card: rgb(255 255 255);
+    --df-color-card-foreground: rgb(46 46 46);
+    --df-color-muted: rgb(243 244 246);
+    --df-color-muted-foreground: rgb(107 114 128);
+    --df-color-primary: rgb(46 46 46);
+    --df-color-primary-foreground: rgb(255 255 255);
+    --df-color-secondary: rgb(100 116 139);
+    --df-color-secondary-foreground: rgb(255 255 255);
+    --df-color-destructive: rgb(212 36 34);
+    --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-foreground: rgb(229 229 229);
+    --df-color-card: rgb(31 41 55);
+    --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-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-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-foreground: rgb(229 229 229);
+      --df-color-border: rgb(56 56 56);
+      --df-color-card: rgb(31 41 55);
+      --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-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-destructive: rgb(147 70 69);
+      --df-color-destructive-foreground: rgb(254 242 242);
+    }
+  }
 }
 @layer components {
   .df-calendar-container {
@@ -2736,30 +2735,37 @@ body {
     -webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%);
   }
 }
-::-webkit-scrollbar {
-  width: 2px;
-  height: 2px;
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
 }
-* {
-  scrollbar-width: thin;
-  scrollbar-color: #d1d5db transparent;
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
-.dark * {
-  scrollbar-color: #4b5563 transparent;
+.df-calendar-container *::-webkit-scrollbar {
+  width: 2px;
+  height: 2px;
 }
-::-webkit-scrollbar-track {
+.df-calendar-container *::-webkit-scrollbar-track {
   background: transparent;
 }
-::-webkit-scrollbar-thumb {
+.df-calendar-container *::-webkit-scrollbar-thumb {
   background: #d1d5db;
   border-radius: 1px;
 }
-.dark ::-webkit-scrollbar-thumb {
+.dark .df-calendar-container *::-webkit-scrollbar-thumb {
   background: #4b5563;
 }
-::-webkit-scrollbar-thumb:hover {
+.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;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dayflow/core",
-  "version": "3.0.1",
+  "version": "3.1.1",
   "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",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",