@macroui/macroui 1.0.31 → 4.0.1

package/src/components/modal.css

@@ -0,0 +1,182 @@
+.modal {
+  @layer daisyui.l1.l2.l3 {
+    @apply pointer-events-none invisible fixed inset-0 m-0 grid h-full max-h-none w-full max-w-none items-center justify-items-center bg-transparent p-0 text-[inherit];
+    transition:
+      visibility 0.3s allow-discrete,
+      background-color 0.3s ease-out,
+      opacity 0.1s ease-out;
+    overflow: clip;
+    overscroll-behavior: contain;
+    z-index: 999;
+    scrollbar-gutter: auto;
+
+    &::backdrop {
+      @apply hidden;
+    }
+  }
+
+  @layer daisyui.l1.l2 {
+    &.modal-open,
+    &[open],
+    &:target,
+    .modal-toggle:checked + & {
+      @apply pointer-events-auto visible opacity-100;
+      transition:
+        visibility 0s allow-discrete,
+        background-color 0.3s ease-out,
+        opacity 0.1s ease-out;
+      background-color: oklch(0% 0 0/ 0.4);
+
+      .modal-box {
+        translate: 0 0;
+        scale: 1;
+        opacity: 1;
+      }
+
+      :root:has(&) {
+        --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();
+      }
+    }
+
+    @starting-style {
+      &.modal-open,
+      &[open],
+      &:target,
+      .modal-toggle:checked + & {
+        @apply opacity-0;
+      }
+    }
+  }
+}
+
+.modal-action {
+  @layer daisyui.l1.l2.l3 {
+    @apply mt-6 flex justify-end gap-2;
+  }
+}
+
+.modal-toggle {
+  @layer daisyui.l1.l2.l3 {
+    @apply fixed h-0 w-0 appearance-none opacity-0;
+  }
+}
+
+.modal-backdrop {
+  @layer daisyui.l1.l2.l3 {
+    @apply col-start-1 row-start-1 grid self-stretch justify-self-stretch text-transparent;
+    z-index: -1;
+
+    button {
+      @apply cursor-pointer;
+    }
+  }
+}
+
+.modal-box {
+  @layer daisyui.l1.l2.l3 {
+    @apply bg-base-100 col-start-1 row-start-1 max-h-screen w-11/12 max-w-[32rem] p-6;
+    transition:
+      translate 0.3s ease-out,
+      scale 0.3s ease-out,
+      opacity 0.2s ease-out 0.05s,
+      box-shadow 0.3s ease-out;
+    border-top-left-radius: var(--modal-tl, var(--radius-box));
+    border-top-right-radius: var(--modal-tr, var(--radius-box));
+    border-bottom-left-radius: var(--modal-bl, var(--radius-box));
+    border-bottom-right-radius: var(--modal-br, var(--radius-box));
+    scale: 95%;
+    opacity: 0;
+    box-shadow: oklch(0% 0 0/ 0.25) 0px 25px 50px -12px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+}
+
+.modal-top {
+  @layer daisyui.l1.l2 {
+    @apply place-items-start;
+
+    .modal-box {
+      @apply h-auto w-full max-w-none;
+      max-height: calc(100vh - 5em);
+      translate: 0 -100%;
+      scale: 1;
+      --modal-tl: 0;
+      --modal-tr: 0;
+      --modal-bl: var(--radius-box);
+      --modal-br: var(--radius-box);
+    }
+  }
+}
+
+.modal-middle {
+  @layer daisyui.l1.l2 {
+    @apply place-items-center;
+
+    .modal-box {
+      @apply h-auto w-11/12 max-w-[32rem];
+      max-height: calc(100vh - 5em);
+      translate: 0 2%;
+      scale: 98%;
+      --modal-tl: var(--radius-box);
+      --modal-tr: var(--radius-box);
+      --modal-bl: var(--radius-box);
+      --modal-br: var(--radius-box);
+    }
+  }
+}
+
+.modal-bottom {
+  @layer daisyui.l1.l2 {
+    @apply place-items-end;
+
+    .modal-box {
+      @apply h-auto w-full max-w-none;
+      max-height: calc(100vh - 5em);
+      translate: 0 100%;
+      scale: 1;
+      --modal-tl: var(--radius-box);
+      --modal-tr: var(--radius-box);
+      --modal-bl: 0;
+      --modal-br: 0;
+    }
+  }
+}
+
+.modal-start {
+  @layer daisyui.l1.l2 {
+    @apply place-items-start;
+
+    .modal-box {
+      @apply h-screen max-h-none w-auto max-w-none;
+      translate: -100% 0;
+      scale: 1;
+      --modal-tl: 0;
+      --modal-tr: var(--radius-box);
+      --modal-bl: 0;
+      --modal-br: var(--radius-box);
+    }
+  }
+}
+
+.modal-end {
+  @layer daisyui.l1.l2 {
+    @apply place-items-end;
+
+    .modal-box {
+      @apply h-screen max-h-none w-auto max-w-none;
+      translate: 100% 0;
+      scale: 1;
+      --modal-tl: var(--radius-box);
+      --modal-tr: 0;
+      --modal-bl: var(--radius-box);
+      --modal-br: 0;
+    }
+  }
+}

package/src/components/navbar.css

@@ -0,0 +1,36 @@
+.navbar {
+  @layer daisyui.l1.l2.l3 {
+    @apply flex w-full items-center;
+    padding: 0.5rem;
+    min-height: 4rem;
+  }
+}
+
+:where(.navbar) {
+  @layer daisyui.l1.l2 {
+    @apply relative;
+  }
+}
+
+.navbar-start {
+  @layer daisyui.l1.l2.l3 {
+    @apply inline-flex items-center;
+    width: 50%;
+    justify-content: flex-start;
+  }
+}
+
+.navbar-center {
+  @layer daisyui.l1.l2.l3 {
+    @apply inline-flex items-center;
+    @apply shrink-0;
+  }
+}
+
+.navbar-end {
+  @layer daisyui.l1.l2.l3 {
+    @apply inline-flex items-center;
+    width: 50%;
+    justify-content: flex-end;
+  }
+}

package/src/components/progress.css

@@ -0,0 +1,108 @@
+.progress {
+  @layer daisyui.l1.l2.l3 {
+    @apply rounded-box text-base-content relative h-2 w-full appearance-none overflow-hidden bg-current/20;
+    &:indeterminate {
+      background-image: repeating-linear-gradient(
+        90deg,
+        currentColor -1%,
+        currentColor 10%,
+        #0000 10%,
+        #0000 90%
+      );
+      background-size: 200%;
+      background-position-x: 15%;
+      @media (prefers-reduced-motion: no-preference) {
+        animation: progress 5s ease-in-out infinite;
+      }
+
+      @supports (-moz-appearance: none) {
+        &::-moz-progress-bar {
+          @apply bg-transparent;
+          @media (prefers-reduced-motion: no-preference) {
+            animation: progress 5s ease-in-out infinite;
+            background-image: repeating-linear-gradient(
+              90deg,
+              currentColor -1%,
+              currentColor 10%,
+              #0000 10%,
+              #0000 90%
+            );
+            background-size: 200%;
+            background-position-x: 15%;
+          }
+        }
+      }
+    }
+
+    @supports (-moz-appearance: none) {
+      &::-moz-progress-bar {
+        @apply rounded-box bg-current;
+      }
+    }
+
+    @supports (-webkit-appearance: none) {
+      &::-webkit-progress-bar {
+        @apply rounded-box bg-transparent;
+      }
+
+      &::-webkit-progress-value {
+        @apply rounded-box;
+        background-color: currentColor;
+      }
+    }
+  }
+}
+
+.progress-primary {
+  @layer daisyui.l1.l2 {
+    @apply text-primary;
+  }
+}
+
+.progress-secondary {
+  @layer daisyui.l1.l2 {
+    @apply text-secondary;
+  }
+}
+
+.progress-accent {
+  @layer daisyui.l1.l2 {
+    @apply text-accent;
+  }
+}
+
+.progress-neutral {
+  @layer daisyui.l1.l2 {
+    @apply text-neutral;
+  }
+}
+
+.progress-info {
+  @layer daisyui.l1.l2 {
+    @apply text-info;
+  }
+}
+
+.progress-success {
+  @layer daisyui.l1.l2 {
+    @apply text-success;
+  }
+}
+
+.progress-warning {
+  @layer daisyui.l1.l2 {
+    @apply text-warning;
+  }
+}
+
+.progress-error {
+  @layer daisyui.l1.l2 {
+    @apply text-error;
+  }
+}
+
+@keyframes progress {
+  50% {
+    background-position-x: -115%;
+  }
+}

package/src/components/radialprogress.css

@@ -0,0 +1,39 @@
+.radial-progress {
+  @layer daisyui.l1.l2.l3 {
+    @apply relative inline-grid h-[var(--size)] w-[var(--size)] place-content-center rounded-full bg-transparent;
+    vertical-align: middle;
+    box-sizing: content-box;
+    --value: 0;
+    --size: 5rem;
+    --thickness: calc(var(--size) / 10);
+    --radialprogress: calc(var(--value) * 1%);
+    transition: --radialprogress 0.3s linear;
+
+    &:before {
+      @apply absolute inset-0 rounded-full;
+      content: "";
+      background:
+        radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness)
+          var(--thickness) no-repeat,
+        conic-gradient(currentColor var(--radialprogress), #0000 0);
+      -webkit-mask: radial-gradient(
+        farthest-side,
+        #0000 calc(100% - var(--thickness)),
+        #000 calc(100% + 0.5px - var(--thickness))
+      );
+      mask: radial-gradient(
+        farthest-side,
+        #0000 calc(100% - var(--thickness)),
+        #000 calc(100% + 0.5px - var(--thickness))
+      );
+    }
+
+    &:after {
+      @apply absolute rounded-full bg-current;
+      transition: transform 0.3s linear;
+      content: "";
+      inset: calc(50% - var(--thickness) / 2);
+      transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%));
+    }
+  }
+}

package/src/components/radio.css

@@ -0,0 +1,158 @@
+.radio {
+  @layer daisyui.l1.l2.l3 {
+    @apply relative inline-block shrink-0 cursor-pointer appearance-none rounded-full p-1 align-middle;
+    border: var(--border) solid var(--input-color, color-mix(in srgb, currentColor 20%, #0000));
+    box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset;
+    --size: calc(var(--size-selector, 0.25rem) * 6);
+    width: var(--size);
+    height: var(--size);
+    color: var(--input-color, currentColor);
+    &:before {
+      @apply block size-full rounded-full;
+      --tw-content: "";
+      content: var(--tw-content);
+      background-size: auto, calc(var(--noise) * 100%);
+      background-image: none, var(--fx-noise);
+    }
+
+    &:focus-visible {
+      outline: 2px solid currentColor;
+    }
+
+    &:checked,
+    &[aria-checked="true"] {
+      @apply bg-base-100 border-current;
+      @media (prefers-reduced-motion: no-preference) {
+        animation: radio 0.2s ease-out;
+      }
+
+      &:before {
+        @apply bg-current;
+        box-shadow:
+          0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset,
+          0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset,
+          0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1));
+      }
+      @media (forced-colors: active) {
+        &:before {
+          @apply outline -outline-offset-1;
+        }
+      }
+      @media print {
+        &:before {
+          outline: 0.25rem solid;
+          outline-offset: -1rem;
+        }
+      }
+    }
+  }
+}
+
+.radio-primary {
+  @layer daisyui.l1.l2 {
+    --input-color: var(--color-primary);
+  }
+}
+
+.radio-secondary {
+  @layer daisyui.l1.l2 {
+    --input-color: var(--color-secondary);
+  }
+}
+
+.radio-accent {
+  @layer daisyui.l1.l2 {
+    --input-color: var(--color-accent);
+  }
+}
+
+.radio-neutral {
+  @layer daisyui.l1.l2 {
+    --input-color: var(--color-neutral);
+  }
+}
+
+.radio-info {
+  @layer daisyui.l1.l2 {
+    --input-color: var(--color-info);
+  }
+}
+
+.radio-success {
+  @layer daisyui.l1.l2 {
+    --input-color: var(--color-success);
+  }
+}
+
+.radio-warning {
+  @layer daisyui.l1.l2 {
+    --input-color: var(--color-warning);
+  }
+}
+
+.radio-error {
+  @layer daisyui.l1.l2 {
+    --input-color: var(--color-error);
+  }
+}
+
+.radio:disabled {
+  @layer daisyui.l1.l2 {
+    @apply cursor-not-allowed opacity-20;
+  }
+}
+
+.radio-xs {
+  @layer daisyui.l1.l2 {
+    padding: 0.125rem;
+    &:is([type="radio"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 4);
+    }
+  }
+}
+
+.radio-sm {
+  @layer daisyui.l1.l2 {
+    padding: 0.1875rem;
+    &:is([type="radio"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 5);
+    }
+  }
+}
+
+.radio-md {
+  @layer daisyui.l1.l2 {
+    padding: 0.25rem;
+    &:is([type="radio"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 6);
+    }
+  }
+}
+
+.radio-lg {
+  @layer daisyui.l1.l2 {
+    padding: 0.3125rem;
+    &:is([type="radio"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 7);
+    }
+  }
+}
+
+.radio-xl {
+  @layer daisyui.l1.l2 {
+    padding: 0.375rem;
+    &:is([type="radio"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 8);
+    }
+  }
+}
+
+@keyframes radio {
+  0% {
+    padding: 5px;
+  }
+
+  50% {
+    padding: 3px;
+  }
+}

package/src/components/range.css

@@ -0,0 +1,186 @@
+.range {
+  @layer daisyui.l1.l2.l3 {
+    appearance: none;
+    -webkit-appearance: none;
+    --range-thumb: var(--color-base-100);
+    --range-thumb-size: calc(var(--size-selector, 0.25rem) * 6);
+    --range-progress: currentColor;
+    --range-fill: 1;
+    --range-p: 0.25rem;
+    --range-bg: color-mix(in oklab, currentColor 10%, #0000);
+    @apply cursor-pointer overflow-hidden bg-transparent align-middle;
+    width: clamp(3rem, 20rem, 100%);
+    /* --radius-selector-max is a separate variable because ~ calc(min(calc(--var))) ~ gives build error in PostCSS+Nuxt */
+    --radius-selector-max: calc(
+      var(--radius-selector) + var(--radius-selector) + var(--radius-selector)
+    );
+    border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
+    border: none;
+    height: var(--range-thumb-size);
+
+    [dir="rtl"] & {
+      --range-dir: -1;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: 2px solid;
+      outline-offset: 2px;
+    }
+
+    &::-webkit-slider-runnable-track {
+      @apply w-full;
+      background-color: var(--range-bg);
+      border-radius: var(--radius-selector);
+      height: calc(var(--range-thumb-size) * 0.5);
+    }
+    @media (forced-colors: active) {
+      &::-webkit-slider-runnable-track {
+        border: 1px solid;
+      }
+    }
+
+    &::-webkit-slider-thumb {
+      @apply relative box-border;
+      border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
+      background-color: var(--range-thumb);
+      height: var(--range-thumb-size);
+      width: var(--range-thumb-size);
+      border: var(--range-p) solid;
+      appearance: none;
+      -webkit-appearance: none;
+      top: 50%;
+      color: var(--range-progress);
+      transform: translateY(-50%);
+      box-shadow:
+        0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset,
+        0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset,
+        0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000),
+        0 0 0 2rem var(--range-thumb) inset,
+        calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2))
+          0 0 calc(100cqw * var(--range-fill));
+    }
+
+    &::-moz-range-track {
+      @apply w-full;
+      background-color: var(--range-bg);
+      border-radius: var(--radius-selector);
+      height: calc(var(--range-thumb-size) * 0.5);
+    }
+    @media (forced-colors: active) {
+      &::-moz-range-track {
+        border: 1px solid;
+      }
+    }
+
+    &::-moz-range-thumb {
+      @apply relative box-border;
+      border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
+      background-color: currentColor;
+      height: var(--range-thumb-size);
+      width: var(--range-thumb-size);
+      border: var(--range-p) solid;
+      top: 50%;
+      color: var(--range-progress);
+      box-shadow:
+        0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset,
+        0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset,
+        0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000),
+        0 0 0 2rem var(--range-thumb) inset,
+        calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2))
+          0 0 calc(100cqw * var(--range-fill));
+    }
+    &:disabled {
+      @apply cursor-not-allowed opacity-30;
+    }
+  }
+}
+
+.range-primary {
+  @layer daisyui.l1.l2 {
+    @apply text-primary;
+    --range-thumb: var(--color-primary-content);
+  }
+}
+
+.range-secondary {
+  @layer daisyui.l1.l2 {
+    @apply text-secondary;
+    --range-thumb: var(--color-secondary-content);
+  }
+}
+
+.range-accent {
+  @layer daisyui.l1.l2 {
+    @apply text-accent;
+    --range-thumb: var(--color-accent-content);
+  }
+}
+
+.range-neutral {
+  @layer daisyui.l1.l2 {
+    @apply text-neutral;
+    --range-thumb: var(--color-neutral-content);
+  }
+}
+
+.range-success {
+  @layer daisyui.l1.l2 {
+    @apply text-success;
+    --range-thumb: var(--color-success-content);
+  }
+}
+
+.range-warning {
+  @layer daisyui.l1.l2 {
+    @apply text-warning;
+    --range-thumb: var(--color-warning-content);
+  }
+}
+
+.range-info {
+  @layer daisyui.l1.l2 {
+    @apply text-info;
+    --range-thumb: var(--color-info-content);
+  }
+}
+
+.range-error {
+  @layer daisyui.l1.l2 {
+    @apply text-error;
+    --range-thumb: var(--color-error-content);
+  }
+}
+
+.range-xs {
+  @layer daisyui.l1.l2 {
+    --range-thumb-size: calc(var(--size-selector, 0.25rem) * 4);
+  }
+}
+
+.range-sm {
+  @layer daisyui.l1.l2 {
+    --range-thumb-size: calc(var(--size-selector, 0.25rem) * 5);
+  }
+}
+
+.range-md {
+  @layer daisyui.l1.l2 {
+    --range-thumb-size: calc(var(--size-selector, 0.25rem) * 6);
+  }
+}
+
+.range-lg {
+  @layer daisyui.l1.l2 {
+    --range-thumb-size: calc(var(--size-selector, 0.25rem) * 7);
+  }
+}
+
+.range-xl {
+  @layer daisyui.l1.l2 {
+    --range-thumb-size: calc(var(--size-selector, 0.25rem) * 8);
+  }
+}