@macroui/macroui 4.0.0 → 4.0.2

package/src/components/mask.css

@@ -0,0 +1,108 @@
+.mask {
+  @layer daisyui.l1.l2.l3 {
+    @apply inline-block align-middle;
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+  }
+}
+
+.mask-half-1 {
+  @layer daisyui.l1.l2 {
+    mask-size: 200%;
+    mask-position: left;
+    @apply [mask-position:left] rtl:[mask-position:right];
+  }
+}
+
+.mask-half-2 {
+  @layer daisyui.l1.l2 {
+    mask-size: 200%;
+    mask-position: right;
+    @apply [mask-position:right] rtl:[mask-position:left];
+  }
+}
+
+.mask-squircle {
+  @layer daisyui.l1.l2 {
+    mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/%3e%3c/svg%3e");
+  }
+}
+
+.mask-decagon {
+  @layer daisyui.l1.l2 {
+    mask-image: url("data:image/svg+xml,%3csvg width='192' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 58.779 19.098 36.327 50v61.804l-36.327 50L96 200l-58.779-19.098-36.327-50V69.098l36.327-50z' fill-rule='evenodd'/%3e%3c/svg%3e");
+  }
+}
+
+.mask-diamond {
+  @layer daisyui.l1.l2 {
+    mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m100 0 100 100-100 100L0 100z' fill-rule='evenodd'/%3e%3c/svg%3e");
+  }
+}
+
+.mask-heart {
+  @layer daisyui.l1.l2 {
+    mask-image: url("data:image/svg+xml,%3csvg width='200' height='185' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
+  }
+}
+
+.mask-hexagon {
+  @layer daisyui.l1.l2 {
+    mask-image: url("data:image/svg+xml,%3csvg width='182' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.3 65.486c0-9.196 6.687-20.063 14.211-25.078l61.86-35.946c8.36-5.016 20.899-5.016 29.258 0l61.86 35.946c8.36 5.015 14.211 15.882 14.211 25.078v71.055c0 9.196-6.687 20.063-14.211 25.079l-61.86 35.945c-8.36 4.18-20.899 4.18-29.258 0L14.51 161.62C6.151 157.44.3 145.737.3 136.54V65.486Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
+  }
+}
+
+.mask-hexagon-2 {
+  @layer daisyui.l1.l2 {
+    mask-image: url("data:image/svg+xml,%3csvg width='200' height='182' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M64.786 181.4c-9.196 0-20.063-6.687-25.079-14.21L3.762 105.33c-5.016-8.36-5.016-20.9 0-29.259l35.945-61.86C44.723 5.851 55.59 0 64.786 0h71.055c9.196 0 20.063 6.688 25.079 14.211l35.945 61.86c4.18 8.36 4.18 20.899 0 29.258l-35.945 61.86c-4.18 8.36-15.883 14.211-25.079 14.211H64.786Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
+  }
+}
+
+.mask-circle {
+  @layer daisyui.l1.l2 {
+    mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle fill='black' cx='100' cy='100' r='100' fill-rule='evenodd'/%3e%3c/svg%3e");
+  }
+}
+
+.mask-pentagon {
+  @layer daisyui.l1.l2 {
+    mask-image: url("data:image/svg+xml,%3csvg width='192' height='181' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 95.106 69.098-36.327 111.804H37.22L.894 69.098z' fill-rule='evenodd'/%3e%3c/svg%3e");
+  }
+}
+
+.mask-star {
+  @layer daisyui.l1.l2 {
+    mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z' fill-rule='evenodd'/%3e%3c/svg%3e");
+  }
+}
+
+.mask-star-2 {
+  @layer daisyui.l1.l2 {
+    mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e");
+  }
+}
+
+.mask-triangle {
+  @layer daisyui.l1.l2 {
+    mask-image: url("data:image/svg+xml,%3csvg width='174' height='149' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 148.476-86.603.185L43.86 74.423 87 0l43.14 74.423 43.463 74.238z' fill-rule='evenodd'/%3e%3c/svg%3e");
+  }
+}
+
+.mask-triangle-2 {
+  @layer daisyui.l1.l2 {
+    mask-image: url("data:image/svg+xml,%3csvg width='174' height='150' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 .738 86.603-.184-43.463 74.238L87 149.214 43.86 74.792.397.554z' fill-rule='evenodd'/%3e%3c/svg%3e");
+  }
+}
+
+.mask-triangle-3 {
+  @layer daisyui.l1.l2 {
+    mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m149.369 87.107.185 86.603-74.239-43.463L.893 87.107l74.422-43.14L149.554.505z' fill-rule='evenodd'/%3e%3c/svg%3e");
+  }
+}
+
+.mask-triangle-4 {
+  @layer daisyui.l1.l2 {
+    mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.631 87.107.446.505l74.239 43.462 74.422 43.14-74.422 43.14L.446 173.71z' fill-rule='evenodd'/%3e%3c/svg%3e");
+  }
+}

package/src/components/menu.css

@@ -0,0 +1,298 @@
+.menu {
+  @layer daisyui.l1.l2.l3 {
+    @apply flex w-fit flex-col flex-wrap p-2;
+    --menu-active-fg: var(--color-neutral-content);
+    --menu-active-bg: var(--color-neutral);
+    font-size: 0.875rem;
+
+    :where(li ul) {
+      @apply relative ms-4 ps-2 whitespace-nowrap;
+
+      &:before {
+        @apply bg-base-content absolute start-0 top-3 bottom-3 opacity-10;
+        width: var(--border);
+        content: "";
+      }
+    }
+
+    :where(li > .menu-dropdown:not(.menu-dropdown-show)) {
+      @apply hidden;
+    }
+
+    :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)),
+    :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+      @apply rounded-field grid grid-flow-col content-start items-center gap-2 px-3 py-1.5 text-start;
+      transition-property: color, background-color, box-shadow;
+      transition-duration: 0.2s;
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      grid-auto-columns: minmax(auto, max-content) auto max-content;
+      text-wrap: balance;
+      user-select: none;
+    }
+
+    :where(li > details > summary) {
+      @apply outline-hidden;
+
+      &::-webkit-details-marker {
+        @apply hidden;
+      }
+    }
+
+    :where(li > details > summary),
+    :where(li > .menu-dropdown-toggle) {
+      &:after {
+        @apply justify-self-end;
+        display: block;
+        height: 0.375rem;
+        width: 0.375rem;
+        rotate: -135deg;
+        translate: 0 -1px;
+        transition-property: rotate, translate;
+        transition-duration: 0.2s;
+        content: "";
+        transform-origin: 50% 50%;
+        box-shadow: 2px 2px inset;
+        pointer-events: none;
+      }
+    }
+
+    details {
+      overflow: hidden;
+      interpolate-size: allow-keywords;
+    }
+    details::details-content {
+      block-size: 0;
+      @media (prefers-reduced-motion: no-preference) {
+        transition-behavior: allow-discrete;
+        transition-property: block-size, content-visibility;
+        transition-duration: 0.2s;
+        transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      }
+    }
+    details[open]::details-content {
+      block-size: auto;
+    }
+
+    :where(li > details[open] > summary):after,
+    :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
+      rotate: 45deg;
+      translate: 0 1px;
+    }
+
+    :where(
+      li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title),
+      li:not(.menu-title, .disabled) > details > summary:not(.menu-title)
+    ):not(.menu-active, :active, .btn) {
+      &.menu-focus,
+      &:focus-visible {
+        @apply bg-base-content/10 text-base-content cursor-pointer outline-hidden;
+      }
+    }
+    :where(
+      li:not(.menu-title, .disabled)
+        > *:not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover,
+      li:not(.menu-title, .disabled)
+        > details
+        > summary:not(.menu-title):not(.menu-active, :active, .btn):hover
+    ) {
+      @apply bg-base-content/10 cursor-pointer outline-hidden;
+      box-shadow:
+        0 1px oklch(0% 0 0 / 0.01) inset,
+        0 -1px oklch(100% 0 0 / 0.01) inset;
+    }
+
+    :where(li:empty) {
+      @apply bg-base-content opacity-10;
+      margin: 0.5rem 1rem;
+      height: 1px;
+    }
+
+    :where(li) {
+      @apply relative flex shrink-0 flex-col flex-wrap items-stretch;
+
+      .badge {
+        @apply justify-self-end;
+      }
+
+      & > *:not(ul, .menu-title, details, .btn):active,
+      & > *:not(ul, .menu-title, details, .btn).menu-active,
+      & > details > summary:active {
+        @apply outline-hidden;
+        color: var(--menu-active-fg);
+        background-color: var(--menu-active-bg);
+        background-size: auto, calc(var(--noise) * 100%);
+        background-image: none, var(--fx-noise);
+        &:not(&:active) {
+          box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg);
+        }
+      }
+
+      &.menu-disabled {
+        @apply text-base-content/20 pointer-events-none;
+      }
+    }
+    .dropdown:focus-within {
+      .menu-dropdown-toggle:after {
+        rotate: 45deg;
+        translate: 0 1px;
+      }
+    }
+    .dropdown-content {
+      @apply mt-2 p-2;
+      &:before {
+        @apply hidden;
+      }
+    }
+  }
+}
+
+.menu-title {
+  @layer daisyui.l1.l2.l3 {
+    @apply text-base-content/40 px-3 py-2;
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+}
+
+.menu-horizontal {
+  @layer daisyui.l1.l2 {
+    @apply inline-flex flex-row;
+
+    & > li:not(.menu-title) > details {
+      & > ul {
+        @apply bg-base-100 rounded-box absolute ms-0 mt-4 origin-top py-2 pe-2 opacity-0;
+        scale: 95%;
+        box-shadow:
+          0 1px 3px 0 oklch(0% 0 0/0.1),
+          0 1px 2px -1px oklch(0% 0 0/0.1);
+
+        @media (prefers-reduced-motion: no-preference) {
+          @starting-style {
+            scale: 95%;
+            opacity: 0;
+          }
+
+          animation: menu 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);
+        }
+      }
+
+      &[open] > ul {
+        @apply opacity-100;
+        scale: 100%;
+      }
+    }
+
+    & > li > details > ul {
+      &:before {
+        --tw-content: none;
+        content: var(--tw-content);
+      }
+    }
+  }
+}
+
+.menu-vertical {
+  @layer daisyui.l1.l2 {
+    @apply inline-flex flex-col;
+
+    & > li:not(.menu-title) > details > ul {
+      @apply relative ms-4 mt-0 py-0 pe-0;
+      background-color: revert-layer;
+      border-radius: revert-layer;
+      animation: revert-layer;
+      transition: revert-layer;
+      box-shadow: revert-layer;
+    }
+  }
+}
+
+.menu-xs {
+  @layer daisyui.l1.l2 {
+    :where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
+    :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+      @apply rounded-field px-2 py-1;
+      font-size: 0.6875rem;
+    }
+
+    .menu-title {
+      @apply px-2 py-1;
+    }
+  }
+}
+
+.menu-sm {
+  @layer daisyui.l1.l2 {
+    :where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
+    :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+      @apply rounded-field px-2.5 py-1;
+      font-size: 0.75rem;
+    }
+
+    .menu-title {
+      @apply px-3 py-2;
+    }
+  }
+}
+
+.menu-md {
+  @layer daisyui.l1.l2 {
+    :where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
+    :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+      @apply rounded-field px-3 py-1.5;
+      font-size: 0.875rem;
+    }
+
+    .menu-title {
+      @apply px-3 py-2;
+    }
+  }
+}
+
+.menu-lg {
+  @layer daisyui.l1.l2 {
+    :where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
+    :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+      @apply rounded-field px-4 py-1.5;
+      font-size: 1.125rem;
+    }
+
+    .menu-title {
+      @apply px-6 py-3;
+    }
+  }
+}
+
+.menu-xl {
+  @layer daisyui.l1.l2 {
+    :where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
+    :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+      @apply rounded-field px-5 py-1.5;
+      font-size: 1.375rem;
+    }
+
+    .menu-title {
+      @apply px-6 py-3;
+    }
+  }
+}
+
+/* allow use cases like group-hover:menu-active to make a menu item active when the menu is hovered */
+:where(:not(ul, details, .menu-title, .btn)).menu-active {
+  @layer daisyui.l1.l2 {
+    @apply outline-hidden;
+    color: var(--menu-active-fg);
+    background-color: var(--menu-active-bg);
+    background-size: auto, calc(var(--noise) * 100%);
+    background-image: none, var(--fx-noise);
+  }
+}
+
+@keyframes menu {
+  0% {
+    opacity: 0;
+  }
+}

package/src/components/mockup.css

@@ -0,0 +1,150 @@
+.mockup-code {
+  @layer daisyui.l1.l2.l3 {
+    @apply bg-neutral text-neutral-content rounded-box relative overflow-hidden overflow-x-auto py-5;
+    font-size: 0.875rem;
+    direction: ltr;
+
+    &:before {
+      content: "";
+      @apply mb-4 block h-3 w-3 rounded-full opacity-30;
+      box-shadow:
+        1.4em 0,
+        2.8em 0,
+        4.2em 0;
+    }
+
+    pre {
+      @apply pr-5;
+
+      &:before {
+        content: "";
+        margin-right: 2ch;
+      }
+
+      &[data-prefix] {
+        &:before {
+          --tw-content: attr(data-prefix);
+          content: var(--tw-content);
+          @apply inline-block w-8 text-right opacity-50;
+        }
+      }
+    }
+  }
+}
+
+.mockup-window {
+  @layer daisyui.l1.l2.l3 {
+    @apply rounded-box relative flex flex-col overflow-hidden overflow-x-auto pt-5;
+
+    &:before {
+      content: "";
+      @apply mb-4 block aspect-square h-3 shrink-0 self-start rounded-full opacity-30;
+      box-shadow:
+        1.4em 0,
+        2.8em 0,
+        4.2em 0;
+    }
+    [dir="rtl"] &:before {
+      @apply self-end;
+    }
+
+    pre[data-prefix] {
+      &:before {
+        --tw-content: attr(data-prefix);
+        content: var(--tw-content);
+        @apply inline-block text-right;
+      }
+    }
+  }
+}
+
+.mockup-browser {
+  @layer daisyui.l1.l2.l3 {
+    @apply rounded-box relative overflow-hidden overflow-x-auto;
+
+    pre[data-prefix] {
+      &:before {
+        --tw-content: attr(data-prefix);
+        content: var(--tw-content);
+        @apply inline-block text-right;
+      }
+    }
+
+    .mockup-browser-toolbar {
+      @apply my-3 inline-flex w-full items-center pr-[1.4em] rtl:flex-row-reverse;
+
+      &:before {
+        content: "";
+        @apply mr-[4.8rem] inline-block aspect-square h-3 rounded-full opacity-30;
+        box-shadow:
+          1.4em 0,
+          2.8em 0,
+          4.2em 0;
+      }
+
+      .input {
+        @apply bg-base-200 mx-auto flex h-full items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap;
+        font-size: 0.75rem;
+        direction: ltr;
+
+        &:before {
+          content: "";
+          @apply size-4 opacity-50;
+          background-color: currentColor;
+          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z' clip-rule='evenodd' /%3E%3C/svg%3E")
+            no-repeat center;
+          mask-size: contain;
+        }
+      }
+    }
+  }
+}
+
+.mockup-phone {
+  @layer daisyui.l1.l2.l3 {
+    @apply inline-grid justify-items-center;
+    border: 5px solid #6b6b6b;
+    border-radius: 65px;
+    background-color: #000;
+    padding: 6px;
+    overflow: hidden;
+    width: 100%;
+    max-width: 462px;
+    aspect-ratio: 462 / 978;
+    @supports (corner-shape: superellipse(1.45)) {
+      border-radius: 90px;
+      corner-shape: superellipse(1.45);
+    }
+  }
+}
+.mockup-phone-camera {
+  @layer daisyui.l1.l2.l3 {
+    grid-column: 1/1;
+    grid-row: 1/1;
+    background: #000;
+    height: 3.7%;
+    width: 28%;
+    border-radius: 17px;
+    z-index: 1;
+    margin-top: 3%;
+  }
+}
+.mockup-phone-display {
+  @layer daisyui.l1.l2.l3 {
+    border-radius: 54px;
+    grid-column: 1/1;
+    grid-row: 1/1;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    @supports (corner-shape: superellipse(1.87)) {
+      border-radius: 101px;
+      corner-shape: superellipse(1.87);
+    }
+    & > img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+}