@macroui/macroui 1.0.31 → 4.0.1

package/src/components/drawer.css

@@ -0,0 +1,166 @@
+.drawer {
+  @layer daisyui.l1.l2.l3 {
+    @apply relative grid;
+    width: 100%;
+    grid-auto-columns: max-content auto;
+  }
+}
+
+.drawer-content {
+  @layer daisyui.l1.l2.l3 {
+    @apply col-start-2 row-start-1 min-w-0;
+  }
+}
+
+:where(.drawer-side) {
+  @layer daisyui.l1.l2.l3 {
+    @apply overflow-x-hidden overflow-y-hidden;
+  }
+}
+
+.drawer-side {
+  @layer daisyui.l1.l2.l3 {
+    @apply pointer-events-none invisible fixed start-0 top-0 z-10 col-start-1 row-start-1 grid w-full grid-cols-1 grid-rows-1 items-start justify-items-start overscroll-contain bg-transparent opacity-0;
+    transition:
+      opacity 0.2s ease-out 0.1s allow-discrete,
+      visibility 0.3s ease-out 0.1s allow-discrete;
+    height: 100vh;
+    height: 100dvh;
+
+    > .drawer-overlay {
+      @apply sticky top-0 cursor-pointer place-self-stretch;
+      background-color: oklch(0% 0 0 / 40%);
+    }
+
+    > * {
+      @apply col-start-1 row-start-1;
+    }
+
+    > :not(.drawer-overlay) {
+      @apply will-change-transform;
+      transition:
+        translate 0.3s ease-out,
+        width 0.2s ease-out;
+      translate: -100%;
+
+      [dir="rtl"] & {
+        translate: 100%;
+      }
+    }
+  }
+}
+
+.drawer-toggle {
+  @layer daisyui.l1.l2.l3 {
+    @apply fixed h-0 w-0 appearance-none opacity-0;
+    :where(&:checked ~ .drawer-side) {
+      scrollbar-color: color-mix(in oklch, currentColor 35%, #0000)
+        oklch(0 0 0 / calc(var(--page-has-backdrop, 0) * 0.4));
+    }
+
+    :where(:root:has(&:checked)) {
+      --page-has-backdrop: 1;
+      --page-overflow: hidden;
+      --page-scroll-bg: var(--page-scroll-bg-on);
+      --page-scroll-gutter: stable;
+      --page-scroll-transition: var(--page-scroll-transition-on);
+      animation: set-page-has-scroll forwards;
+      animation-timeline: scroll();
+    }
+  }
+
+  @layer daisyui.l1.l2 {
+    :where(&:checked ~ .drawer-side) {
+      @apply pointer-events-auto visible overflow-y-auto opacity-100;
+
+      > :not(.drawer-overlay) {
+        translate: 0%;
+      }
+    }
+
+    &:focus-visible ~ .drawer-content label.drawer-button {
+      outline: 2px solid;
+      outline-offset: 2px;
+    }
+  }
+}
+
+.drawer-end {
+  @layer daisyui.l1.l2 {
+    grid-auto-columns: auto max-content;
+
+    > .drawer-toggle {
+      ~ .drawer-content {
+        @apply col-start-1;
+      }
+
+      ~ .drawer-side {
+        @apply col-start-2 justify-items-end;
+      }
+
+      ~ .drawer-side > :not(.drawer-overlay) {
+        translate: 100%;
+
+        [dir="rtl"] & {
+          translate: -100%;
+        }
+      }
+
+      &:checked ~ .drawer-side > :not(.drawer-overlay) {
+        translate: 0%;
+      }
+    }
+  }
+}
+
+.drawer-open {
+  @layer daisyui.l1.l2.l3 {
+    > .drawer-toggle:checked {
+      ~ .drawer-side {
+        scrollbar-color: revert-layer;
+      }
+
+      :root:has(&) {
+        --page-overflow: revert-layer;
+        --page-scroll-gutter: revert-layer;
+        --page-scroll-bg: revert-layer;
+        --page-scroll-transition: revert-layer;
+        --page-has-backdrop: revert-layer;
+        animation: revert-layer;
+        animation-timeline: revert-layer;
+      }
+    }
+  }
+
+  @layer daisyui.l1.l2 {
+    > .drawer-side {
+      @apply overflow-y-auto;
+    }
+
+    > .drawer-toggle {
+      @apply hidden;
+
+      ~ .drawer-side {
+        @apply pointer-events-auto visible sticky block w-auto overscroll-auto opacity-100;
+
+        > .drawer-overlay {
+          @apply cursor-default bg-transparent;
+        }
+      }
+
+      &:checked ~ .drawer-side {
+        @apply pointer-events-auto visible;
+      }
+    }
+  }
+
+  @layer daisyui.l1 {
+    > .drawer-toggle ~ .drawer-side > :not(.drawer-overlay) {
+      translate: 0%;
+
+      [dir="rtl"] & {
+        translate: 0%;
+      }
+    }
+  }
+}

package/src/components/dropdown.css

@@ -0,0 +1,247 @@
+.dropdown {
+  @layer daisyui.l1.l2.l3 {
+    @apply relative inline-block;
+    position-area: var(--anchor-v, bottom) var(--anchor-h, span-right);
+
+    & > *:not(:has(~ [class*="dropdown-content"])):focus {
+      @apply outline-hidden;
+    }
+    .dropdown-content {
+      @apply absolute;
+    }
+    &.dropdown-close .dropdown-content,
+    &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content,
+    &.dropdown-hover:not(:hover)
+      [tabindex]:first-child:focus:not(:focus-visible)
+      ~ .dropdown-content {
+      @apply hidden origin-top opacity-0;
+      scale: 95%;
+    }
+
+    &[popover],
+    .dropdown-content {
+      z-index: 999;
+      @media (prefers-reduced-motion: no-preference) {
+        animation: dropdown 0.2s;
+        transition-property: opacity, scale, display;
+        transition-behavior: allow-discrete;
+        transition-duration: 0.2s;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      }
+    }
+    @starting-style {
+      &[popover],
+      .dropdown-content {
+        scale: 95%;
+        opacity: 0;
+      }
+    }
+
+    &:not(.dropdown-close) {
+      &.dropdown-open,
+      &:not(.dropdown-hover):focus,
+      &:focus-within {
+        > [tabindex]:first-child {
+          @apply pointer-events-none;
+        }
+        .dropdown-content {
+          @apply opacity-100;
+          scale: 100%;
+        }
+      }
+
+      &.dropdown-hover:hover {
+        .dropdown-content {
+          @apply opacity-100;
+          scale: 100%;
+        }
+      }
+    }
+
+    &:is(details) {
+      summary {
+        &::-webkit-details-marker {
+          @apply hidden;
+        }
+      }
+    }
+
+    /* experimental */
+    &:where([popover]) {
+      background: #0000;
+    }
+    &[popover] {
+      @apply fixed text-inherit;
+
+      /* align-self: anchor-center; */
+      /* justify-self: anchor-center; */
+      /* left: anchor(right); */
+      /* align-self: anchor-center; */
+
+      @supports not (position-area: bottom) {
+        @apply m-auto;
+
+        &.dropdown-close,
+        &.dropdown-open:not(:popover-open) {
+          @apply hidden origin-top opacity-0;
+          scale: 95%;
+        }
+
+        &::backdrop {
+          background-color: color-mix(in oklab, #000 30%, #0000);
+        }
+      }
+
+      &.dropdown-close,
+      &:not(.dropdown-open, :popover-open) {
+        @apply hidden origin-top opacity-0;
+        scale: 95%;
+      }
+    }
+  }
+}
+
+.dropdown-start {
+  @layer daisyui.l1.l2 {
+    --anchor-h: span-right;
+
+    :where(.dropdown-content) {
+      @apply end-auto;
+      translate: 0 0;
+      [dir="rtl"] & {
+        translate: 0 0;
+      }
+    }
+
+    &.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: span-bottom;
+
+      .dropdown-content {
+        @apply top-0 bottom-auto;
+      }
+    }
+
+    &.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: span-bottom;
+
+      .dropdown-content {
+        @apply top-0 bottom-auto;
+      }
+    }
+  }
+}
+
+.dropdown-center {
+  @layer daisyui.l1.l2 {
+    --anchor-h: center;
+
+    :where(.dropdown-content) {
+      @apply end-1/2;
+      translate: 50% 0;
+      [dir="rtl"] & {
+        translate: -50% 0;
+      }
+    }
+
+    &.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: center;
+
+      .dropdown-content {
+        @apply top-auto bottom-1/2;
+        translate: 0 50%;
+      }
+    }
+
+    &.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: center;
+
+      .dropdown-content {
+        @apply top-auto bottom-1/2;
+        translate: 0 50%;
+      }
+    }
+  }
+}
+
+.dropdown-end {
+  @layer daisyui.l1.l2 {
+    --anchor-h: span-left;
+
+    :where(.dropdown-content) {
+      @apply end-0;
+      translate: 0 0;
+      [dir="rtl"] & {
+        translate: 0 0;
+      }
+    }
+
+    &.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: span-top;
+
+      .dropdown-content {
+        @apply top-auto bottom-0;
+      }
+    }
+
+    &.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: span-top;
+
+      .dropdown-content {
+        @apply top-auto bottom-0;
+      }
+    }
+  }
+}
+
+.dropdown-left {
+  @layer daisyui.l1.l2 {
+    --anchor-h: left;
+    --anchor-v: span-bottom;
+
+    .dropdown-content {
+      @apply end-full top-0 bottom-auto origin-right;
+    }
+  }
+}
+
+.dropdown-right {
+  @layer daisyui.l1.l2 {
+    --anchor-h: right;
+    --anchor-v: span-bottom;
+
+    .dropdown-content {
+      @apply start-full top-0 bottom-auto origin-left;
+    }
+  }
+}
+
+.dropdown-bottom {
+  @layer daisyui.l1.l2 {
+    --anchor-v: bottom;
+
+    .dropdown-content {
+      @apply top-full bottom-auto origin-top;
+    }
+  }
+}
+
+.dropdown-top {
+  @layer daisyui.l1.l2 {
+    --anchor-v: top;
+
+    .dropdown-content {
+      @apply top-auto bottom-full origin-bottom;
+    }
+  }
+}
+@keyframes dropdown {
+  0% {
+    opacity: 0;
+  }
+}

package/src/components/fab.css

@@ -0,0 +1,139 @@
+.fab {
+  @layer daisyui.l1.l2.l3 {
+    @apply pointer-events-none fixed end-4 bottom-4 z-999 flex flex-col-reverse items-end gap-2 text-sm whitespace-nowrap;
+    > * {
+      @apply pointer-events-auto flex items-center gap-2;
+      &:hover,
+      &:has(:focus-visible) {
+        @apply z-1;
+      }
+    }
+    > [tabindex] {
+      &:first-child {
+        @apply relative grid;
+        transition-property: opacity, visibility, rotate;
+        transition-duration: 0.2s;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      }
+    }
+
+    .fab-close {
+      @apply absolute end-0 bottom-0;
+    }
+    .fab-main-action {
+      @apply absolute end-0 bottom-0;
+    }
+    &:focus-within {
+      &:has(.fab-close),
+      &:has(.fab-main-action) {
+        > [tabindex] {
+          @apply rotate-90 opacity-0;
+        }
+      }
+    }
+    > :nth-child(n + 2) {
+      @apply invisible scale-80 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 {
+        @apply scale-100;
+      }
+    }
+    > :nth-child(3) {
+      transition-delay: 30ms;
+    }
+    > :nth-child(4) {
+      transition-delay: 60ms;
+    }
+    > :nth-child(5) {
+      transition-delay: 90ms;
+    }
+    > :nth-child(6) {
+      transition-delay: 120ms;
+    }
+    /* checkbox method experiment - not a good idea because it needs a second click to close */
+    /* > label {
+    @apply relative;
+    > input {
+      @apply pointer-events-none absolute inset-0 opacity-0;
+    }
+  } */
+    /* &:has(:checked), */
+    &:focus-within {
+      > [tabindex]:first-child {
+        @apply pointer-events-none;
+      }
+      > :nth-child(n + 2) {
+        @apply visible scale-100 opacity-100;
+      }
+    }
+  }
+}
+.fab-flower {
+  @layer daisyui.l1.l2.l3 {
+    @apply 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) {
+      @apply hidden;
+    }
+    &: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;
+      }
+    }
+  }
+}

package/src/components/fieldset.css

@@ -0,0 +1,23 @@
+.fieldset {
+  @layer daisyui.l1.l2.l3 {
+    @apply grid gap-1.5 py-1;
+    font-size: 0.75rem;
+    grid-template-columns: 1fr;
+    grid-auto-rows: max-content;
+  }
+}
+.fieldset-legend {
+  @layer daisyui.l1.l2.l3 {
+    @apply text-base-content -mb-1 flex items-center justify-between gap-2 py-2;
+    font-weight: 600;
+  }
+}
+/* deprecated in favor of label - but stays in source code to avoid breaking change */
+.fieldset-label {
+  @layer daisyui.l1.l2.l3 {
+    @apply text-base-content/60 flex items-center gap-1.5;
+    &:has(input) {
+      @apply cursor-pointer;
+    }
+  }
+}