manolis-ui 0.25.4 → 0.27.4

package/dist/style.css

@@ -318,6 +318,98 @@
       }
     }
   }
+  .fab {
+    @layer daisyui.l1.l2.l3 {
+      pointer-events: none;
+      position: fixed;
+      inset-inline-end: calc(0.25rem * 4);
+      bottom: calc(0.25rem * 4);
+      z-index: 999;
+      display: flex;
+      flex-direction: column-reverse;
+      align-items: flex-end;
+      gap: calc(0.25rem * 2);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      white-space: nowrap;
+      > * {
+        pointer-events: auto;
+        display: flex;
+        align-items: center;
+        gap: calc(0.25rem * 2);
+        &:hover, &:has(:focus-visible) {
+          z-index: 1;
+        }
+      }
+      > [tabindex] {
+        &:first-child {
+          position: relative;
+          display: grid;
+          transition-property: opacity, visibility, rotate;
+          transition-duration: 0.2s;
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        }
+      }
+      .fab-close {
+        position: absolute;
+        inset-inline-end: calc(0.25rem * 0);
+        bottom: calc(0.25rem * 0);
+      }
+      .fab-main-action {
+        position: absolute;
+        inset-inline-end: calc(0.25rem * 0);
+        bottom: calc(0.25rem * 0);
+      }
+      &:focus-within {
+        &:has(.fab-close), &:has(.fab-main-action) {
+          > [tabindex] {
+            rotate: 90deg;
+            opacity: 0%;
+          }
+        }
+        > [tabindex]:first-child {
+          pointer-events: none;
+        }
+        > :nth-child(n + 2) {
+          visibility: visible;
+          --tw-scale-x: 100%;
+          --tw-scale-y: 100%;
+          --tw-scale-z: 100%;
+          scale: var(--tw-scale-x) var(--tw-scale-y);
+          opacity: 100%;
+        }
+      }
+      > :nth-child(n + 2) {
+        visibility: hidden;
+        --tw-scale-x: 80%;
+        --tw-scale-y: 80%;
+        --tw-scale-z: 80%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+        opacity: 0%;
+        transition-property: opacity, scale, visibility;
+        transition-duration: 0.2s;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        &.fab-main-action, &.fab-close {
+          --tw-scale-x: 100%;
+          --tw-scale-y: 100%;
+          --tw-scale-z: 100%;
+          scale: var(--tw-scale-x) var(--tw-scale-y);
+        }
+      }
+      > :nth-child(3) {
+        transition-delay: 30ms;
+      }
+      > :nth-child(4) {
+        transition-delay: 60ms;
+      }
+      > :nth-child(5) {
+        transition-delay: 90ms;
+      }
+      > :nth-child(6) {
+        transition-delay: 120ms;
+      }
+    }
+  }
   .drawer-open {
     @layer daisyui.l1.l2.l3 {
       > .drawer-toggle:checked {
@@ -2879,6 +2971,9 @@
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
+  .top-6 {
+    top: calc(var(--spacing) * 6);
+  }
   .top-full {
     top: 100%;
   }
@@ -2888,18 +2983,27 @@
   .right-5 {
     right: calc(var(--spacing) * 5);
   }
+  .right-6 {
+    right: calc(var(--spacing) * 6);
+  }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
   .bottom-5 {
     bottom: calc(var(--spacing) * 5);
   }
+  .bottom-6 {
+    bottom: calc(var(--spacing) * 6);
+  }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
   .left-5 {
     left: calc(var(--spacing) * 5);
   }
+  .left-6 {
+    left: calc(var(--spacing) * 6);
+  }
   .join {
     display: inline-flex;
     align-items: stretch;
@@ -4307,6 +4411,69 @@
       flex-shrink: 0;
     }
   }
+  .fab-flower {
+    @layer daisyui.l1.l2.l3 {
+      display: grid;
+      --position: 0rem;
+      > *:nth-child(-n + 2) {
+        --position: 0rem;
+      }
+      > * {
+        grid-area: 1/1;
+        --degree: 180deg;
+        --flip-degree: calc(180deg - var(--degree));
+        transform: translateX(calc(cos(var(--degree)) * var(--position))) translateY(calc(sin(var(--degree)) * -1 * var(--position)));
+        [dir="rtl"] & {
+          transform: translateX(calc(cos(var(--flip-degree)) * var(--position))) translateY(calc(sin(var(--flip-degree)) * -1 * var(--position)));
+        }
+      }
+      > :nth-child(n + 7) {
+        display: none;
+      }
+      &:has(:nth-child(3)) {
+        --position: 140%;
+        > :nth-child(3) {
+          --degree: 135deg;
+        }
+      }
+      &:has(:nth-child(4)) {
+        --position: 140%;
+        > :nth-child(3) {
+          --degree: 165deg;
+        }
+        > :nth-child(4) {
+          --degree: 105deg;
+        }
+      }
+      &:has(:nth-child(5)) {
+        --position: 180%;
+        > :nth-child(3) {
+          --degree: 180deg;
+        }
+        > :nth-child(4) {
+          --degree: 135deg;
+        }
+        > :nth-child(5) {
+          --degree: 90deg;
+        }
+      }
+      &:has(:nth-child(6)) {
+        --position: 220%;
+        > :nth-child(3) {
+          --degree: 180deg;
+        }
+        > :nth-child(4) {
+          --degree: 150deg;
+        }
+        > :nth-child(5) {
+          --degree: 120deg;
+        }
+        > :nth-child(6) {
+          --degree: 90deg;
+        }
+      }
+    }
+  }
   .carousel {
     @layer daisyui.l1.l2.l3 {
       display: inline-flex;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "manolis-ui",
   "private": false,
-  "version": "0.25.4",
+  "version": "0.27.4",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -41,6 +41,9 @@
     "@tailwindcss/cli": "4.1.14",
     "@tailwindcss/container-queries": "^0.1.1",
     "cally": "^0.8.0",
+    "embla-carousel": "^8.6.0",
+    "embla-carousel-autoplay": "^8.6.0",
+    "embla-carousel-vue": "^8.6.0",
     "lucide-vue-next": "^0.468.0",
     "path": "^0.12.7",
     "process": "^0.11.10",