@macroui/macroui 4.0.0 → 4.0.2

package/src/components/textarea.css

@@ -0,0 +1,179 @@
+.textarea {
+  @layer daisyui.l1.l2.l3 {
+    border: var(--border) solid #0000;
+    @apply bg-base-100 rounded-field min-h-20 shrink appearance-none py-2 align-middle;
+    width: clamp(3rem, 20rem, 100%);
+    padding-inline-start: 0.75rem;
+    padding-inline-end: 0.75rem;
+    font-size: max(var(--font-size, 0.875rem), 0.875rem);
+    touch-action: manipulation;
+    border-color: var(--input-color);
+    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;
+    --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
+    textarea {
+      @apply appearance-none bg-transparent;
+      border: none;
+
+      &:focus,
+      &:focus-within {
+        @apply outline-hidden;
+      }
+    }
+
+    &:focus,
+    &:focus-within {
+      --input-color: var(--color-base-content);
+      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;
+    }
+
+    /* increase font size in iOS so the page won't zoom */
+    @media (pointer: coarse) {
+      @supports (-webkit-touch-callout: none) {
+        &:focus,
+        &:focus-within {
+          --font-size: 1rem;
+        }
+      }
+    }
+
+    &:has(> textarea[disabled]),
+    &:is(:disabled, [disabled]) {
+      @apply border-base-200 bg-base-200 placeholder-base-content text-base-content/40 placeholder-base-content/20 cursor-not-allowed;
+      box-shadow: none;
+    }
+
+    &:has(> textarea[disabled]) > textarea[disabled] {
+      @apply cursor-not-allowed;
+    }
+  }
+}
+
+.textarea-ghost {
+  @layer daisyui.l1.l2 {
+    @apply bg-transparent;
+    box-shadow: none;
+    border-color: #0000;
+
+    &:focus,
+    &:focus-within {
+      @apply text-base-content bg-base-100;
+      border-color: #0000;
+      box-shadow: none;
+    }
+  }
+}
+
+.textarea-neutral {
+  @layer daisyui.l1.l2 {
+    &,
+    &:focus,
+    &:focus-within {
+      --input-color: var(--color-neutral);
+    }
+  }
+}
+
+.textarea-primary {
+  @layer daisyui.l1.l2 {
+    &,
+    &:focus,
+    &:focus-within {
+      --input-color: var(--color-primary);
+    }
+  }
+}
+
+.textarea-secondary {
+  @layer daisyui.l1.l2 {
+    &,
+    &:focus,
+    &:focus-within {
+      --input-color: var(--color-secondary);
+    }
+  }
+}
+
+.textarea-accent {
+  @layer daisyui.l1.l2 {
+    &,
+    &:focus,
+    &:focus-within {
+      --input-color: var(--color-accent);
+    }
+  }
+}
+
+.textarea-info {
+  @layer daisyui.l1.l2 {
+    &,
+    &:focus,
+    &:focus-within {
+      --input-color: var(--color-info);
+    }
+  }
+}
+
+.textarea-success {
+  @layer daisyui.l1.l2 {
+    &,
+    &:focus,
+    &:focus-within {
+      --input-color: var(--color-success);
+    }
+  }
+}
+
+.textarea-warning {
+  @layer daisyui.l1.l2 {
+    &,
+    &:focus,
+    &:focus-within {
+      --input-color: var(--color-warning);
+    }
+  }
+}
+
+.textarea-error {
+  @layer daisyui.l1.l2 {
+    &,
+    &:focus,
+    &:focus-within {
+      --input-color: var(--color-error);
+    }
+  }
+}
+
+.textarea-xs {
+  @layer daisyui.l1.l2 {
+    font-size: max(var(--font-size, 0.6875rem), 0.6875rem);
+  }
+}
+
+.textarea-sm {
+  @layer daisyui.l1.l2 {
+    font-size: max(var(--font-size, 0.75rem), 0.75rem);
+  }
+}
+
+.textarea-md {
+  @layer daisyui.l1.l2 {
+    font-size: max(var(--font-size, 0.875rem), 0.875rem);
+  }
+}
+
+.textarea-lg {
+  @layer daisyui.l1.l2 {
+    font-size: max(var(--font-size, 1.125rem), 1.125rem);
+  }
+}
+
+.textarea-xl {
+  @layer daisyui.l1.l2 {
+    font-size: max(var(--font-size, 1.375rem), 1.375rem);
+  }
+}

package/src/components/textrotate.css

@@ -0,0 +1,71 @@
+.text-rotate {
+  height: 1lh;
+  @layer daisyui.l1.l2.l3 {
+    @apply inline-block overflow-hidden align-bottom whitespace-nowrap;
+    transition-property: none;
+    /* aliasing Tailwind's variable so it inherits */
+    --duration: var(--tw-duration);
+    > * {
+      @apply grid justify-items-start;
+      height: calc(var(--items, 1) * 100%);
+      &:has(*:nth-child(2)) {
+        --items: 2;
+        animation: rotator var(--duration, 10s) linear(0 0% 49%, 0.5 50% 99%, 1 100% 100%) infinite;
+      }
+      &:has(*:nth-child(3)) {
+        --items: 3;
+        animation: rotator var(--duration, 10s)
+          linear(0 0% 32%, 0.333333 33% 65%, 0.666666 66% 99%, 1 100% 100%) infinite;
+      }
+      &:has(*:nth-child(4)) {
+        --items: 4;
+        animation: rotator var(--duration, 10s)
+          linear(0 0% 24%, 0.25 25% 49%, 0.5 50% 74%, 0.75 75% 99%, 1 100% 100%) infinite;
+      }
+      &:has(*:nth-child(5)) {
+        --items: 5;
+        animation: rotator var(--duration, 10s)
+          linear(0 0% 19%, 0.2 20% 39%, 0.4 40% 59%, 0.6 60% 79%, 0.8 80% 99%, 1 100% 100%) infinite;
+      }
+      &:has(*:nth-child(6)) {
+        --items: 6;
+        animation: rotator var(--duration, 10s)
+          linear(
+            0 0% 15%,
+            0.16666 16% 32%,
+            0.333333 33% 49%,
+            0.5 50% 65%,
+            0.666666 66% 82%,
+            0.833333 83% 99%,
+            1 100% 100%
+          )
+          infinite;
+      }
+      > * {
+        align-content: baseline;
+        clip-path: inset(0.5px 0px 0.5px 0px);
+        &:nth-child(1) {
+          translate: var(--first-item-position);
+        }
+      }
+    }
+    &:hover {
+      > * {
+        animation-play-state: paused;
+      }
+    }
+  }
+}
+@keyframes rotator {
+  89.9999%,
+  100% {
+    --first-item-position: 0 0%;
+  }
+  90%,
+  99.9999% {
+    --first-item-position: 0 calc(var(--items) * 100%);
+  }
+  100% {
+    translate: 0 -100%;
+  }
+}

package/src/components/timeline.css

@@ -0,0 +1,250 @@
+.timeline {
+  @layer daisyui.l1.l2.l3 {
+    @apply relative flex;
+
+    > li {
+      @apply relative grid shrink-0 items-center;
+      grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var(
+          --timeline-row-end,
+          minmax(0, 1fr)
+        );
+      grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var(
+          --timeline-col-end,
+          minmax(0, 1fr)
+        );
+
+      > hr {
+        border: none;
+        @apply w-full;
+
+        &:first-child {
+          @apply col-start-1 row-start-2;
+        }
+
+        &:last-child {
+          @apply col-start-3 col-end-[none] row-start-2 row-end-auto;
+        }
+        @media print {
+          border: 0.1px solid var(--color-base-300);
+        }
+      }
+    }
+
+    :where(hr) {
+      @apply bg-base-300 h-1;
+    }
+
+    &:has(.timeline-middle hr) {
+      &:first-child {
+        @apply rounded-e-selector rounded-s-none;
+      }
+
+      &:last-child {
+        @apply rounded-s-selector rounded-e-none;
+      }
+    }
+
+    &:not(:has(.timeline-middle)) {
+      :first-child hr:last-child {
+        @apply rounded-s-selector rounded-e-none;
+      }
+
+      :last-child hr:first-child {
+        @apply rounded-e-selector rounded-s-none;
+      }
+    }
+  }
+}
+
+.timeline-box {
+  @layer daisyui.l1.l2.l3 {
+    border: var(--border) solid;
+    @apply rounded-box bg-base-100 border-base-300 px-4 py-2;
+    font-size: 0.75rem;
+    box-shadow: 0 1px 2px 0 oklch(0% 0 0/0.05);
+  }
+}
+
+.timeline-start {
+  @layer daisyui.l1.l2.l3 {
+    @apply col-start-1 col-end-4 row-start-1 row-end-2 m-1 self-end justify-self-center;
+  }
+}
+
+.timeline-middle {
+  @layer daisyui.l1.l2.l3 {
+    @apply col-start-2 row-start-2;
+  }
+}
+
+.timeline-end {
+  @layer daisyui.l1.l2.l3 {
+    @apply col-start-1 col-end-4 row-start-3 row-end-4 m-1 self-start justify-self-center;
+  }
+}
+
+.timeline-compact {
+  @layer daisyui.l1.l2 {
+    --timeline-row-start: 0;
+
+    .timeline-start {
+      @apply col-start-1 col-end-4 row-start-3 row-end-4 self-start justify-self-center;
+    }
+
+    li:has(.timeline-start) {
+      .timeline-end {
+        @apply col-start-[none] row-start-auto;
+      }
+    }
+
+    &.timeline-vertical {
+      > li {
+        --timeline-col-start: 0;
+      }
+
+      .timeline-start {
+        @apply col-start-3 col-end-4 row-start-1 row-end-4 self-center justify-self-start;
+      }
+
+      li:has(.timeline-start) {
+        .timeline-end {
+          @apply col-start-auto row-start-[none];
+        }
+      }
+    }
+  }
+}
+
+.timeline-snap-icon {
+  @layer daisyui.l1.l2 {
+    > li {
+      --timeline-col-start: 0.5rem;
+      --timeline-row-start: minmax(0, 1fr);
+    }
+  }
+}
+
+.timeline-vertical {
+  @layer daisyui.l1.l2 {
+    @apply flex-col;
+
+    > li {
+      @apply justify-items-center;
+      --timeline-row-start: minmax(0, 1fr);
+      --timeline-row-end: minmax(0, 1fr);
+
+      > hr {
+        @apply h-full w-1;
+
+        &:first-child {
+          @apply col-start-2 row-start-1;
+        }
+
+        &:last-child {
+          @apply col-start-2 col-end-auto row-start-3 row-end-[none];
+        }
+      }
+    }
+
+    .timeline-start {
+      @apply col-start-1 col-end-2 row-start-1 row-end-4 self-center justify-self-end;
+    }
+
+    .timeline-end {
+      @apply col-start-3 col-end-4 row-start-1 row-end-4 self-center justify-self-start;
+    }
+
+    &:has(.timeline-middle) {
+      > li {
+        > hr {
+          &:first-child {
+            @apply rounded-b-selector rounded-t-none;
+          }
+
+          &:last-child {
+            @apply rounded-t-selector rounded-b-none;
+          }
+        }
+      }
+    }
+
+    &:not(:has(.timeline-middle)) {
+      :first-child {
+        > hr:last-child {
+          @apply rounded-t-selector rounded-b-none;
+        }
+      }
+
+      :last-child {
+        > hr:first-child {
+          @apply rounded-b-selector rounded-t-none;
+        }
+      }
+    }
+
+    &.timeline-snap-icon {
+      > li {
+        --timeline-col-start: minmax(0, 1fr);
+        --timeline-row-start: 0.5rem;
+      }
+    }
+  }
+}
+
+.timeline-horizontal {
+  @layer daisyui.l1.l2 {
+    @apply flex-row;
+
+    > li {
+      @apply items-center;
+
+      > hr {
+        @apply h-1 w-full;
+
+        &:first-child {
+          @apply col-start-1 row-start-2;
+        }
+
+        &:last-child {
+          @apply col-start-3 col-end-[none] row-start-2 row-end-auto;
+        }
+      }
+    }
+
+    .timeline-start {
+      @apply col-start-1 col-end-4 row-start-1 row-end-2 self-end justify-self-center;
+    }
+
+    .timeline-end {
+      @apply col-start-1 col-end-4 row-start-3 row-end-4 self-start justify-self-center;
+    }
+
+    &:has(.timeline-middle) {
+      > li {
+        > hr {
+          &:first-child {
+            @apply rounded-e-selector rounded-s-none;
+          }
+
+          &:last-child {
+            @apply rounded-s-selector rounded-e-none;
+          }
+        }
+      }
+    }
+
+    &:not(:has(.timeline-middle)) {
+      :first-child {
+        > hr:last-child {
+          @apply rounded-s-selector rounded-e-none;
+        }
+      }
+
+      :last-child {
+        > hr:first-child {
+          @apply rounded-e-selector rounded-s-none;
+        }
+      }
+    }
+  }
+}

package/src/components/toast.css

@@ -0,0 +1,68 @@
+.toast {
+  @layer daisyui.l1.l2.l3 {
+    @apply fixed start-auto end-4 top-auto bottom-4 flex flex-col gap-2 bg-transparent;
+    translate: var(--toast-x, 0) var(--toast-y, 0);
+    width: max-content;
+    max-width: calc(100vw - 2rem);
+
+    & > * {
+      @media (prefers-reduced-motion: no-preference) {
+        animation: toast 0.25s ease-out;
+      }
+    }
+  }
+}
+
+.toast-start {
+  @layer daisyui.l1.l2 {
+    @apply start-4 end-auto;
+    --toast-x: 0;
+  }
+}
+
+.toast-center {
+  @layer daisyui.l1.l2 {
+    @apply start-1/2 end-1/2;
+    --toast-x: -50%;
+  }
+}
+
+.toast-end {
+  @layer daisyui.l1.l2 {
+    @apply start-auto end-4;
+    --toast-x: 0;
+  }
+}
+
+.toast-bottom {
+  @layer daisyui.l1.l2 {
+    @apply top-auto bottom-4;
+    --toast-y: 0;
+  }
+}
+
+.toast-middle {
+  @layer daisyui.l1.l2 {
+    @apply top-1/2 bottom-auto;
+    --toast-y: -50%;
+  }
+}
+
+.toast-top {
+  @layer daisyui.l1.l2 {
+    @apply top-4 bottom-auto;
+    --toast-y: 0;
+  }
+}
+
+@keyframes toast {
+  0% {
+    scale: 0.9;
+    opacity: 0;
+  }
+
+  100% {
+    scale: 1;
+    opacity: 1;
+  }
+}