manolis-ui 0.12.0 → 0.13.2

package/dist/style.css

@@ -2000,6 +2000,9 @@
   .bottom-5 {
     bottom: calc(var(--spacing) * 5);
   }
+  .left-0 {
+    left: calc(var(--spacing) * 0);
+  }
   .left-5 {
     left: calc(var(--spacing) * 5);
   }
@@ -2190,6 +2193,9 @@
       }
     }
   }
+  .my-2 {
+    margin-block: calc(var(--spacing) * 2);
+  }
   .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }
@@ -2273,6 +2279,9 @@
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
@@ -2297,9 +2306,6 @@
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
-  .mb-4 {
-    margin-bottom: calc(var(--spacing) * 4);
-  }
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
@@ -2477,6 +2483,54 @@
     font-size: var(--cardtitle-fs, 1.125rem);
     font-weight: 600;
   }
+  .join {
+    display: inline-flex;
+    align-items: stretch;
+    --join-ss: 0;
+    --join-se: 0;
+    --join-es: 0;
+    --join-ee: 0;
+    :where(.join-item) {
+      border-start-start-radius: var(--join-ss, 0);
+      border-start-end-radius: var(--join-se, 0);
+      border-end-start-radius: var(--join-es, 0);
+      border-end-end-radius: var(--join-ee, 0);
+      * {
+        --join-ss: var(--radius-field);
+        --join-se: var(--radius-field);
+        --join-es: var(--radius-field);
+        --join-ee: var(--radius-field);
+      }
+    }
+    > .join-item:where(:first-child) {
+      --join-ss: var(--radius-field);
+      --join-se: 0;
+      --join-es: var(--radius-field);
+      --join-ee: 0;
+    }
+    :first-child:not(:last-child) {
+      :where(.join-item) {
+        --join-ss: var(--radius-field);
+        --join-se: 0;
+        --join-es: var(--radius-field);
+        --join-ee: 0;
+      }
+    }
+    > .join-item:where(:last-child) {
+      --join-ss: 0;
+      --join-se: var(--radius-field);
+      --join-es: 0;
+      --join-ee: var(--radius-field);
+    }
+    :last-child:not(:first-child) {
+      :where(.join-item) {
+        --join-ss: 0;
+        --join-se: var(--radius-field);
+        --join-es: 0;
+        --join-ee: var(--radius-field);
+      }
+    }
+  }
   .mask {
     display: inline-block;
     vertical-align: middle;
@@ -2493,9 +2547,6 @@
   .flex {
     display: flex;
   }
-  .grid {
-    display: grid;
-  }
   .hidden {
     display: none;
   }
@@ -2593,6 +2644,14 @@
     width: var(--size);
     height: var(--size);
   }
+  .size-4 {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+  .size-6 {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+  }
   .tabs-lg {
     :where(.tab) {
       height: calc(var(--size-field, 0.25rem) * 12);
@@ -2791,6 +2850,63 @@
     width: 100%;
     max-width: calc(0.25rem * 64);
   }
+  .cally {
+    font-size: 0.7rem;
+    &::part(container) {
+      padding: 0.5rem 1rem;
+      user-select: none;
+    }
+    ::part(th) {
+      font-weight: normal;
+      block-size: auto;
+    }
+    &::part(header) {
+      direction: ltr;
+    }
+    ::part(head) {
+      opacity: 0.5;
+      font-size: 0.7rem;
+    }
+    &::part(button) {
+      border-radius: var(--radius-field);
+      border: none;
+      padding: 0.5rem;
+      background: #0000;
+    }
+    &::part(button):hover {
+      background: var(--color-base-200);
+    }
+    ::part(day) {
+      border-radius: var(--radius-field);
+      font-size: 0.7rem;
+    }
+    ::part(button day today) {
+      background: var(--color-primary);
+      color: var(--color-primary-content);
+    }
+    ::part(selected) {
+      color: var(--color-base-100);
+      background: var(--color-base-content);
+      border-radius: var(--radius-field);
+    }
+    ::part(range-inner) {
+      border-radius: 0;
+    }
+    ::part(range-start) {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+    ::part(range-end) {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
+    ::part(range-start range-end) {
+      border-radius: var(--radius-field);
+    }
+    calendar-month {
+      width: 100%;
+    }
+  }
   .rating-half {
     :where(*:not(.rating-hidden)) {
       width: calc(0.25rem * 3);
@@ -3101,9 +3217,6 @@
     overflow-y: scroll;
     scroll-snap-type: y mandatory;
   }
-  .grid-cols-7 {
-    grid-template-columns: repeat(7, minmax(0, 1fr));
-  }
   .flex-col {
     flex-direction: column;
   }
@@ -3283,12 +3396,6 @@
   .bg-primary {
     background-color: var(--color-primary);
   }
-  .bg-primary\/20 {
-    background-color: var(--color-primary);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
-    }
-  }
   .bg-secondary {
     background-color: var(--color-secondary);
   }
@@ -3860,20 +3967,45 @@
       }
     }
   }
-  .hover\:bg-base-200 {
+  .open\:-m-0\.5 {
+    &:is([open], :popover-open, :open) {
+      margin: calc(var(--spacing) * -0.5);
+    }
+  }
+  .open\:rounded {
+    &:is([open], :popover-open, :open) {
+      border-radius: 0.25rem;
+    }
+  }
+  .open\:bg-primary {
+    &:is([open], :popover-open, :open) {
+      background-color: var(--color-primary);
+    }
+  }
+  .open\:p-1 {
+    &:is([open], :popover-open, :open) {
+      padding: calc(var(--spacing) * 1);
+    }
+  }
+  .hover\:-mb-0\.5 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-base-200);
+        margin-bottom: calc(var(--spacing) * -0.5);
       }
     }
   }
-  .hover\:bg-primary\/10 {
+  .hover\:border-b-2 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-primary);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
-        }
+        border-bottom-style: var(--tw-border-style);
+        border-bottom-width: 2px;
+      }
+    }
+  }
+  .hover\:bg-base-200 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-base-200);
       }
     }
   }
@@ -3893,6 +4025,104 @@
       outline-style: none;
     }
   }
+  .max-md\:input {
+    @media (width < 48rem) {
+      cursor: text;
+      border: var(--border) solid #0000;
+      position: relative;
+      display: inline-flex;
+      flex-shrink: 1;
+      appearance: none;
+      align-items: center;
+      gap: calc(0.25rem * 2);
+      background-color: var(--color-base-100);
+      padding-inline: calc(0.25rem * 3);
+      vertical-align: middle;
+      white-space: nowrap;
+      width: clamp(3rem, 20rem, 100%);
+      height: var(--size);
+      font-size: 0.875rem;
+      border-start-start-radius: var(--join-ss, var(--radius-field));
+      border-start-end-radius: var(--join-se, var(--radius-field));
+      border-end-start-radius: var(--join-es, var(--radius-field));
+      border-end-end-radius: var(--join-ee, var(--radius-field));
+      border-color: var(--input-color);
+      box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
+      @supports (color: color-mix(in lab, red, red)) {
+        box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
+      }
+      --size: calc(var(--size-field, 0.25rem) * 10);
+      --input-color: var(--color-base-content);
+      @supports (color: color-mix(in lab, red, red)) {
+        --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
+      }
+      &:where(input) {
+        display: inline-flex;
+      }
+      :where(input) {
+        display: inline-flex;
+        height: 100%;
+        width: 100%;
+        appearance: none;
+        background-color: transparent;
+        border: none;
+        &:focus, &:focus-within {
+          outline-style: none;
+          @media (forced-colors: active) {
+            outline: 2px solid transparent;
+            outline-offset: 2px;
+          }
+        }
+      }
+      &:focus, &:focus-within {
+        --input-color: var(--color-base-content);
+        box-shadow: 0 1px var(--input-color);
+        @supports (color: color-mix(in lab, red, red)) {
+          box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
+        }
+        outline: 2px solid var(--input-color);
+        outline-offset: 2px;
+        isolation: isolate;
+      }
+      &:has(> input[disabled]), &:is(:disabled, [disabled]) {
+        cursor: not-allowed;
+        border-color: var(--color-base-200);
+        background-color: var(--color-base-200);
+        color: var(--color-base-content);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
+        }
+        &::placeholder {
+          color: var(--color-base-content);
+          @supports (color: color-mix(in lab, red, red)) {
+            color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
+          }
+        }
+        box-shadow: none;
+      }
+      &:has(> input[disabled]) > input[disabled] {
+        cursor: not-allowed;
+      }
+      &::-webkit-date-and-time-value {
+        text-align: inherit;
+      }
+      &[type="number"] {
+        &::-webkit-inner-spin-button {
+          margin-block: calc(0.25rem * -3);
+          margin-inline-end: calc(0.25rem * -3);
+        }
+      }
+      &::-webkit-calendar-picker-indicator {
+        position: absolute;
+        inset-inline-end: 0.75em;
+      }
+    }
+  }
+  .max-md\:max-w-xs {
+    @media (width < 48rem) {
+      max-width: var(--container-xs);
+    }
+  }
   .sm\:grid {
     @media (width >= 40rem) {
       display: grid;
@@ -3911,11 +4141,6 @@
       }
     }
   }
-  .md\:mt-2 {
-    @media (width >= 48rem) {
-      margin-top: calc(var(--spacing) * 2);
-    }
-  }
   .md\:block {
     @media (width >= 48rem) {
       display: block;
@@ -3951,13 +4176,6 @@
       padding-inline: calc(var(--spacing) * 10);
     }
   }
-  .md\:btn-sm {
-    @media (width >= 48rem) {
-      font-size: 0.75rem;
-      --btn-p: 0.75rem;
-      --size: calc(var(--size-field, 0.25rem) * 8);
-    }
-  }
   .md\:after\:content-\[\'\'\] {
     @media (width >= 48rem) {
       &::after {
@@ -3995,14 +4213,9 @@
       }
     }
   }
-  .lg\:w-80 {
+  .lg\:w-full {
     @media (width >= 64rem) {
-      width: calc(var(--spacing) * 80);
-    }
-  }
-  .lg\:w-\[360px\] {
-    @media (width >= 64rem) {
-      width: 360px;
+      width: 100%;
     }
   }
   .lg\:text-4xl {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "manolis-ui",
   "private": false,
-  "version": "0.12.0",
+  "version": "0.13.2",
   "type": "module",
   "files": [
     "dist/*"
@@ -34,6 +34,7 @@
     "@storybook/vue3": "^9.1.10",
     "@tailwindcss/cli": "4.1.14",
     "@tailwindcss/container-queries": "^0.1.1",
+    "cally": "^0.8.0",
     "lucide-vue-next": "^0.468.0",
     "path": "^0.12.7",
     "process": "^0.11.10",