@macroui/macroui 1.0.31 → 4.0.1

package/src/components/collapse.css

@@ -0,0 +1,302 @@
+.collapse:not(td, tr, colgroup) {
+  visibility: revert-layer;
+}
+
+.collapse {
+  @layer daisyui.l1.l2.l3 {
+    display: grid;
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--radius-box, 1rem);
+    width: 100%;
+    grid-template-rows: max-content 0fr;
+    grid-template-columns: minmax(0, 1fr);
+    isolation: isolate;
+    @media (prefers-reduced-motion: no-preference) {
+      transition: grid-template-rows 0.2s;
+    }
+
+    > input:is([type="checkbox"], [type="radio"]) {
+      grid-column-start: 1;
+      grid-row-start: 1;
+      appearance: none;
+      opacity: 0;
+    }
+
+    &:is(
+      [open],
+      [tabindex]:focus:not(.collapse-close),
+      [tabindex]:focus-within:not(.collapse-close)
+    ),
+    &:not(.collapse-close):has(> input:is([type="checkbox"], [type="radio"]):checked) {
+      grid-template-rows: max-content 1fr;
+    }
+
+    &:is(
+        [open],
+        [tabindex]:focus:not(.collapse-close),
+        [tabindex]:focus-within:not(.collapse-close)
+      )
+      > .collapse-content,
+    &:not(.collapse-close)
+      > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) {
+      content-visibility: visible;
+      min-height: fit-content;
+      @supports not (content-visibility: visible) {
+        visibility: visible;
+      }
+    }
+    &:focus-visible,
+    &:has(> input:is([type="checkbox"], [type="radio"]):focus-visible),
+    &:has(summary:focus-visible) {
+      outline-color: var(--color-base-content);
+      outline-style: solid;
+      outline-width: 2px;
+      outline-offset: 2px;
+    }
+
+    &:not(.collapse-close) {
+      > input[type="checkbox"],
+      > input[type="radio"]:not(:checked),
+      > .collapse-title {
+        cursor: pointer;
+      }
+    }
+
+    &[tabindex]:focus:not(.collapse-close, .collapse[open]),
+    &[tabindex]:focus-within:not(.collapse-close, .collapse[open]) {
+      > .collapse-title {
+        cursor: unset;
+      }
+    }
+
+    &:is(
+        [open],
+        [tabindex]:focus:not(.collapse-close),
+        [tabindex]:focus-within:not(.collapse-close)
+      )
+      > :where(.collapse-content),
+    &:not(.collapse-close)
+      > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) {
+      padding-bottom: 1rem;
+    }
+
+    > input:is([type="checkbox"], [type="radio"]) {
+      z-index: 1;
+      width: 100%;
+      padding: 1rem;
+      padding-inline-end: 3rem;
+      min-height: 1lh;
+      transition: background-color 0.2s ease-out;
+    }
+  }
+
+  @layer daisyui.l1.l2 {
+    &:is([open]) {
+      &.collapse-arrow {
+        > .collapse-title:after {
+          @media (prefers-reduced-motion: no-preference) {
+            transform: translateY(-50%) rotate(225deg);
+          }
+        }
+      }
+    }
+
+    &.collapse-open {
+      &.collapse-arrow {
+        > .collapse-title:after {
+          @media (prefers-reduced-motion: no-preference) {
+            transform: translateY(-50%) rotate(225deg);
+          }
+        }
+      }
+    }
+
+    &[tabindex].collapse-arrow:focus:not(.collapse-close),
+    &.collapse-arrow[tabindex]:focus-within:not(.collapse-close) {
+      > .collapse-title:after {
+        transform: translateY(-50%) rotate(225deg);
+      }
+    }
+
+    &.collapse-arrow:not(.collapse-close) {
+      > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after {
+        transform: translateY(-50%) rotate(225deg);
+      }
+    }
+
+    &[open] {
+      &.collapse-plus {
+        > .collapse-title:after {
+          --tw-content: "−";
+          content: var(--tw-content);
+        }
+      }
+    }
+
+    &.collapse-open {
+      &.collapse-plus {
+        > .collapse-title:after {
+          --tw-content: "−";
+          content: var(--tw-content);
+        }
+      }
+    }
+
+    &[tabindex].collapse-plus:focus:not(.collapse-close) {
+      > .collapse-title:after {
+        --tw-content: "−";
+        content: var(--tw-content);
+      }
+    }
+
+    &.collapse-plus:not(.collapse-close) {
+      > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after {
+        --tw-content: "−";
+        content: var(--tw-content);
+      }
+    }
+  }
+}
+
+.collapse-title,
+.collapse-content {
+  @layer daisyui.l1.l2.l3 {
+    grid-column-start: 1;
+    grid-row-start: 1;
+  }
+}
+
+.collapse-content {
+  @layer daisyui.l1.l2.l3 {
+    content-visibility: hidden;
+    grid-column-start: 1;
+    grid-row-start: 2;
+    min-height: 0;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    cursor: unset;
+    @supports not (content-visibility: hidden) {
+      visibility: hidden;
+    }
+    @media (prefers-reduced-motion: no-preference) {
+      transition:
+        content-visibility 0.2s allow-discrete,
+        visibility 0.2s allow-discrete,
+        min-height 0.2s ease-out allow-discrete,
+        padding 0.1s ease-out 20ms,
+        background-color 0.2s ease-out;
+    }
+  }
+}
+
+.collapse:is(details) {
+  @layer daisyui.l1.l2.l3 {
+    width: 100%;
+    @media (prefers-reduced-motion: no-preference) {
+      &::details-content {
+        transition:
+          content-visibility 0.2s allow-discrete,
+          visibility 0.2s allow-discrete,
+          min-height 0.2s ease-out allow-discrete,
+          padding 0.1s ease-out 20ms,
+          background-color 0.2s ease-out,
+          height 0.2s;
+        height: 0;
+        interpolate-size: allow-keywords;
+      }
+
+      &:where([open])::details-content {
+        height: auto;
+      }
+    }
+    & summary {
+      position: relative;
+      display: block;
+
+      &::-webkit-details-marker {
+        display: none;
+      }
+    }
+
+    & > .collapse-content {
+      content-visibility: visible;
+    }
+  }
+}
+
+.collapse:is(details) summary {
+  @layer daisyui.l1.l2.l3 {
+    outline: none;
+  }
+}
+
+.collapse-arrow {
+  @layer daisyui.l1.l2 {
+    > .collapse-title:after {
+      position: absolute;
+      display: block;
+      height: 0.5rem;
+      width: 0.5rem;
+      transform: translateY(-100%) rotate(45deg);
+      @media (prefers-reduced-motion: no-preference) {
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 0.2s;
+      }
+      top: 50%;
+      inset-inline-end: 1.4rem;
+      content: "";
+      transform-origin: 75% 75%;
+      box-shadow: 2px 2px;
+      pointer-events: none;
+    }
+  }
+}
+
+.collapse-plus {
+  @layer daisyui.l1.l2 {
+    > .collapse-title:after {
+      position: absolute;
+      display: block;
+      height: 0.5rem;
+      width: 0.5rem;
+      @media (prefers-reduced-motion: no-preference) {
+        transition-property: all;
+        transition-duration: 300ms;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      top: 0.9rem;
+      inset-inline-end: 1.4rem;
+      --tw-content: "+";
+      content: var(--tw-content);
+      pointer-events: none;
+    }
+  }
+}
+
+.collapse-title {
+  @layer daisyui.l1.l2.l3 {
+    position: relative;
+
+    width: 100%;
+    padding: 1rem;
+    padding-inline-end: 3rem;
+    min-height: 1lh;
+    transition: background-color 0.2s ease-out;
+  }
+}
+
+.collapse-open {
+  @layer daisyui.l1.l2 {
+    grid-template-rows: max-content 1fr;
+    > .collapse-content {
+      content-visibility: visible;
+      min-height: fit-content;
+      padding-bottom: 1rem;
+      @supports not (content-visibility: visible) {
+        visibility: visible;
+      }
+    }
+  }
+}

package/src/components/countdown.css

@@ -0,0 +1,56 @@
+.countdown {
+  &.countdown {
+    line-height: 1em;
+  }
+
+  @layer daisyui.l1.l2.l3 {
+    @apply inline-flex;
+
+    & > * {
+      @apply invisible relative inline-block overflow-y-clip;
+      transition: width 0.4s ease-out 0.2s;
+      height: 1em;
+      --value-v: calc(mod(max(0, var(--value)), 1000));
+      --value-hundreds: calc(round(to-zero, var(--value-v) / 100, 1));
+      --value-tens: calc(round(to-zero, mod(var(--value-v), 100) / 10, 1));
+      --value-ones: calc(mod(var(--value-v), 100));
+      --show-hundreds: clamp(clamp(0, var(--digits, 1) - 2, 1), var(--value-hundreds), 1);
+      --show-tens: clamp(
+        clamp(0, var(--digits, 1) - 1, 1),
+        var(--value-tens) + var(--show-hundreds),
+        1
+      );
+      --first-digits: calc(round(to-zero, var(--value-v) / 10, 1));
+      width: calc(1ch + var(--show-tens) * 1ch + var(--show-hundreds) * 1ch);
+      direction: ltr;
+
+      &:before,
+      &:after {
+        @apply visible absolute overflow-x-clip;
+        --tw-content: "00\A 01\A 02\A 03\A 04\A 05\A 06\A 07\A 08\A 09\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A 60\A 61\A 62\A 63\A 64\A 65\A 66\A 67\A 68\A 69\A 70\A 71\A 72\A 73\A 74\A 75\A 76\A 77\A 78\A 79\A 80\A 81\A 82\A 83\A 84\A 85\A 86\A 87\A 88\A 89\A 90\A 91\A 92\A 93\A 94\A 95\A 96\A 97\A 98\A 99\A";
+        content: var(--tw-content);
+        font-variant-numeric: tabular-nums;
+        white-space: pre;
+        text-align: end;
+        direction: rtl;
+        transition:
+          all 1s cubic-bezier(1, 0, 0, 1),
+          width 0.2s ease-out 0.2s,
+          opacity 0.2s ease-out 0.2s;
+      }
+
+      &:before {
+        width: calc(1ch + var(--show-hundreds) * 1ch);
+        top: calc(var(--first-digits) * -1em);
+        inset-inline-end: 0;
+        opacity: var(--show-tens);
+      }
+
+      &:after {
+        width: 1ch;
+        top: calc(var(--value-ones) * -1em);
+        inset-inline-start: 0;
+      }
+    }
+  }
+}

package/src/components/diff.css

@@ -0,0 +1,93 @@
+.diff {
+  @layer daisyui.l1.l2.l3 {
+    @apply relative grid w-full overflow-hidden select-none;
+    grid-template-rows: 1fr 1.8rem 1fr;
+    direction: ltr;
+    container-type: inline-size;
+    grid-template-columns: auto 1fr;
+    &:focus-visible,
+    &:has(.diff-item-1:focus-visible) {
+      @apply outline-base-content outline-2 outline-offset-1;
+    }
+    &:focus-visible {
+      @apply outline-base-content outline-2 outline-offset-1;
+      .diff-resizer {
+        min-width: 95cqi;
+        max-width: 95cqi;
+      }
+    }
+    &:has(.diff-item-1:focus-visible) {
+      @apply outline-2 outline-offset-1;
+      .diff-resizer {
+        min-width: 5cqi;
+        max-width: 5cqi;
+      }
+    }
+    @supports (-webkit-overflow-scrolling: touch) and (overflow: -webkit-paged-x) {
+      &:focus {
+        .diff-resizer {
+          min-width: 5cqi;
+          max-width: 5cqi;
+        }
+      }
+      &:has(.diff-item-1:focus) {
+        .diff-resizer {
+          min-width: 95cqi;
+          max-width: 95cqi;
+        }
+      }
+    }
+  }
+}
+.diff-resizer {
+  @layer daisyui.l1.l2.l3 {
+    @apply relative isolate z-2 col-start-1 row-start-2 h-3 w-[50cqi] max-w-[calc(100cqi-1rem)] min-w-[1rem] resize-x overflow-hidden opacity-0;
+    transform: scaleY(5) translate(0.32rem, 50%);
+    cursor: ew-resize;
+    transform-origin: 100% 100%;
+    clip-path: inset(calc(100% - 0.75rem) 0 0 calc(100% - 0.75rem));
+    transition:
+      min-width 0.3s ease-out,
+      max-width 0.3s ease-out;
+  }
+}
+.diff-item-2 {
+  @layer daisyui.l1.l2.l3 {
+    @apply relative col-start-1 row-span-3 row-start-1;
+    &:after {
+      @apply bg-base-100/98 pointer-events-none absolute top-1/2 right-px bottom-0 z-2 rounded-full;
+      width: 1.2rem;
+      height: 1.8rem;
+      border: 2px solid var(--color-base-100);
+      content: "";
+      border: 0.5px solid #0000001f;
+      outline: 1px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);
+      outline-offset: -3px;
+      /* disable blur and shadow becuse of performance */
+      /* backdrop-filter: blur(8px); */
+      /* box-shadow: 0 1px 2px 0 oklch(0% 0 0 / 0.1); */
+      translate: 50% -50%;
+    }
+    > * {
+      @apply pointer-events-none absolute top-0 bottom-0 left-0 h-full w-[100cqi] max-w-none object-cover object-center;
+    }
+    @supports (-webkit-overflow-scrolling: touch) and (overflow: -webkit-paged-x) {
+      &:after {
+        --tw-content: none;
+        content: var(--tw-content);
+      }
+    }
+  }
+}
+.diff-item-1 {
+  @layer daisyui.l1.l2.l3 {
+    @apply relative z-1 col-start-1 row-span-3 row-start-1 overflow-hidden;
+    border-right: 2px solid var(--color-base-100);
+    &:focus-visible {
+      @apply outline-none;
+    }
+    > * {
+      @apply pointer-events-none absolute top-0 bottom-0 left-0 h-full w-[100cqi] max-w-none object-cover object-center;
+    }
+  }
+}

package/src/components/divider.css

@@ -0,0 +1,148 @@
+.divider {
+  @layer daisyui.l1.l2.l3 {
+    @apply flex h-4 flex-row items-center self-stretch whitespace-nowrap;
+    margin: var(--divider-m, 1rem 0);
+    /*
+    used --divider-color to avoid this issue
+    https://github.com/tailwindlabs/tailwindcss/issues/17556
+    https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Afalse%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6225920%7D%2C%22include%22%3A0%2C%22exclude%22%3A0%2C%22source%22%3A%22.broken%20%7B%5Cn%20%20%26%3A%3Abefore%2C%20%26%3A%3Aafter%20%7B%5Cn%20%20%20%20background%3A%20blue%3B%5Cn%20%20%20%20%40media%20print%20%7B%5Cn%20%20%20%20%20%20background%3A%20orange%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%5Cn%5Cn.fine%20%7B%5Cn%20%20%26%3A%3Abefore%2C%20%26%3A%3Aafter%20%7B%5Cn%20%20%20%20background%3A%20blue%3B%5Cn%20%20%7D%5Cn%7D%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D
+    https://github.com/tailwindlabs/tailwindcss/pull/17562
+  */
+    --divider-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+
+    &:before,
+    &:after {
+      content: "";
+      @apply h-0.5 w-full grow;
+      background-color: var(--divider-color);
+    }
+    @media print {
+      &:before,
+      &:after {
+        border: 0.5px solid;
+      }
+    }
+
+    &:not(:empty) {
+      @apply gap-4;
+    }
+  }
+}
+
+.divider-horizontal {
+  @layer daisyui.l1.l2 {
+    --divider-m: 0 1rem;
+    &.divider {
+      @apply h-auto w-4 flex-col;
+
+      &:before {
+        @apply h-full w-0.5;
+      }
+
+      &:after {
+        @apply h-full w-0.5;
+      }
+    }
+  }
+}
+
+.divider-vertical {
+  @layer daisyui.l1.l2 {
+    --divider-m: 1rem 0;
+    &.divider {
+      @apply h-4 w-auto flex-row;
+
+      &:before {
+        @apply h-0.5 w-full;
+      }
+
+      &:after {
+        @apply h-0.5 w-full;
+      }
+    }
+  }
+}
+
+.divider-neutral {
+  @layer daisyui.l1.l2 {
+    &:before,
+    &:after {
+      @apply bg-neutral;
+    }
+  }
+}
+
+.divider-primary {
+  @layer daisyui.l1.l2 {
+    &:before,
+    &:after {
+      @apply bg-primary;
+    }
+  }
+}
+
+.divider-secondary {
+  @layer daisyui.l1.l2 {
+    &:before,
+    &:after {
+      @apply bg-secondary;
+    }
+  }
+}
+
+.divider-accent {
+  @layer daisyui.l1.l2 {
+    &:before,
+    &:after {
+      @apply bg-accent;
+    }
+  }
+}
+
+.divider-success {
+  @layer daisyui.l1.l2 {
+    &:before,
+    &:after {
+      @apply bg-success;
+    }
+  }
+}
+
+.divider-warning {
+  @layer daisyui.l1.l2 {
+    &:before,
+    &:after {
+      @apply bg-warning;
+    }
+  }
+}
+
+.divider-info {
+  @layer daisyui.l1.l2 {
+    &:before,
+    &:after {
+      @apply bg-info;
+    }
+  }
+}
+
+.divider-error {
+  @layer daisyui.l1.l2 {
+    &:before,
+    &:after {
+      @apply bg-error;
+    }
+  }
+}
+
+.divider-start:before {
+  @layer daisyui.l1.l2 {
+    @apply hidden;
+  }
+}
+
+.divider-end:after {
+  @layer daisyui.l1.l2 {
+    @apply hidden;
+  }
+}

package/src/components/dock.css

@@ -0,0 +1,123 @@
+.dock {
+  @layer daisyui.l1.l2.l3 {
+    @apply bg-base-100 fixed right-0 bottom-0 left-0 z-1 flex w-full flex-row items-center justify-around p-2 text-current;
+    border-top: 0.5px solid color-mix(in oklab, var(--color-base-content) 5%, #0000);
+    height: 4rem;
+    height: calc(4rem + env(safe-area-inset-bottom));
+    padding-bottom: env(safe-area-inset-bottom);
+    > * {
+      @apply rounded-box relative mb-2 flex h-full max-w-32 shrink-1 basis-full cursor-pointer flex-col items-center justify-center gap-px bg-transparent;
+      transition: opacity 0.2s ease-out;
+      @media (hover: hover) {
+        &:hover {
+          @apply opacity-80;
+        }
+      }
+      &[aria-disabled="true"],
+      &[disabled] {
+        &,
+        &:hover {
+          @apply text-base-content/10 pointer-events-none opacity-100;
+        }
+      }
+      .dock-label {
+        font-size: 0.6875rem;
+      }
+      &:after {
+        content: "";
+        @apply absolute h-1 w-6 rounded-full bg-transparent;
+        bottom: 0.2rem;
+        border-top: 3px solid transparent;
+        transition:
+          background-color 0.1s ease-out,
+          text-color 0.1s ease-out,
+          width 0.1s ease-out;
+      }
+    }
+  }
+}
+.dock-active {
+  @layer daisyui.l1.l2 {
+    &:after {
+      @apply w-10 bg-current text-current;
+    }
+  }
+}
+.dock-xs {
+  @layer daisyui.l1.l2 {
+    height: 3rem;
+    height: calc(3rem + env(safe-area-inset-bottom));
+
+    .dock-active {
+      &:after {
+        bottom: -0.1rem;
+      }
+    }
+
+    .dock-label {
+      font-size: 0.625rem;
+    }
+  }
+}
+
+.dock-sm {
+  @layer daisyui.l1.l2 {
+    @apply h-14;
+    height: 3.5rem;
+    height: calc(3.5rem + env(safe-area-inset-bottom));
+
+    .dock-active {
+      &:after {
+        bottom: -0.1rem;
+      }
+    }
+
+    .dock-label {
+      font-size: 0.625rem;
+    }
+  }
+}
+
+.dock-md {
+  @layer daisyui.l1.l2 {
+    height: 4rem;
+    height: calc(4rem + env(safe-area-inset-bottom));
+    .dock-label {
+      font-size: 0.6875rem;
+    }
+  }
+}
+
+.dock-lg {
+  @layer daisyui.l1.l2 {
+    height: 4.5rem;
+    height: calc(4.5rem + env(safe-area-inset-bottom));
+
+    .dock-active {
+      &:after {
+        bottom: 0.4rem;
+      }
+    }
+
+    .dock-label {
+      font-size: 0.6875rem;
+    }
+  }
+}
+
+.dock-xl {
+  @layer daisyui.l1.l2 {
+    height: 5rem;
+    height: calc(5rem + env(safe-area-inset-bottom));
+
+    .dock-active {
+      &:after {
+        bottom: 0.4rem;
+      }
+    }
+
+    .dock-label {
+      font-size: 0.75rem;
+    }
+  }
+}