@macroui/macroui 1.0.31 → 4.0.1

package/src/components/tab.css

@@ -0,0 +1,557 @@
+.tabs {
+  @layer daisyui.l1.l2.l3 {
+    @apply flex flex-wrap;
+    --tabs-height: auto;
+    --tabs-direction: row;
+    --tab-height: calc(var(--size-field, 0.25rem) * 10);
+    height: var(--tabs-height);
+    flex-direction: var(--tabs-direction);
+  }
+}
+
+.tab {
+  @layer daisyui.l1.l2.l3 {
+    @apply hover:text-base-content relative inline-flex cursor-pointer appearance-none flex-wrap items-center justify-center text-center select-none;
+    --tab-p: 0.75rem;
+    --tab-bg: var(--color-base-100);
+    --tab-border-color: var(--color-base-300);
+    --tab-radius-ss: 0;
+    --tab-radius-se: 0;
+    --tab-radius-es: 0;
+    --tab-radius-ee: 0;
+    --tab-order: 0;
+    --tab-radius-min: calc(0.75rem - var(--border));
+    --tab-radius-limit: min(var(--radius-field), var(--tab-radius-min));
+    --tab-radius-grad:
+      #0000 calc(69% - var(--border)),
+      var(--tab-border-color) calc(69% - var(--border) + 0.25px),
+      var(--tab-border-color) 69%,
+      var(--tab-bg) calc(69% + 0.25px);
+    border-color: #0000;
+    order: var(--tab-order);
+    height: var(--tab-height);
+    font-size: 0.875rem;
+    padding-inline: var(--tab-p);
+
+    &:is(input[type="radio"]) {
+      @apply min-w-fit;
+
+      &:after {
+        --tw-content: attr(aria-label);
+        content: var(--tw-content);
+      }
+    }
+    &:is(label) {
+      @apply relative;
+      input {
+        @apply absolute inset-0 cursor-pointer appearance-none opacity-0;
+      }
+    }
+
+    &:checked,
+    &:is(label:has(:checked)),
+    &:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) {
+      & + .tab-content {
+        @apply block;
+      }
+    }
+    &:not(
+      :checked,
+      label:has(:checked),
+      :hover,
+      .tab-active,
+      [aria-selected="true"],
+      [aria-current="true"],
+      [aria-current="page"]
+    ) {
+      @apply text-base-content/50;
+    }
+
+    &:not(input):empty {
+      @apply grow cursor-default;
+    }
+
+    /* &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]),
+    &:is(input:checked),
+    &:is(label:has(:checked)) {
+      @apply text-base-content;
+    } */
+
+    &:focus {
+      @apply outline-hidden;
+    }
+
+    &:focus-visible,
+    &:is(label:has(:checked:focus-visible)) {
+      outline: 2px solid currentColor;
+      outline-offset: -5px;
+    }
+
+    &[disabled] {
+      @apply pointer-events-none opacity-40;
+    }
+  }
+}
+
+.tab-content {
+  @layer daisyui.l1.l2.l3 {
+    @apply order-1 hidden border-transparent;
+    --tabcontent-radius-ss: var(--radius-box);
+    --tabcontent-radius-se: var(--radius-box);
+    --tabcontent-radius-es: var(--radius-box);
+    --tabcontent-radius-ee: var(--radius-box);
+
+    --tabcontent-order: 1;
+    width: 100%;
+    height: calc(100% - var(--tab-height) + var(--border));
+    margin: var(--tabcontent-margin);
+    order: var(--tabcontent-order);
+    border-width: var(--border);
+    border-start-start-radius: var(--tabcontent-radius-ss);
+    border-start-end-radius: var(--tabcontent-radius-se);
+    border-end-start-radius: var(--tabcontent-radius-es);
+    border-end-end-radius: var(--tabcontent-radius-ee);
+  }
+}
+
+.tab-disabled {
+  @layer daisyui.l1.l2 {
+    @apply pointer-events-none opacity-40;
+  }
+}
+
+.tabs-border {
+  @layer daisyui.l1.l2 {
+    > .tab {
+      --tab-border-color: #0000 #0000 var(--tab-border-color) #0000;
+      position: relative;
+      border-radius: var(--radius-field);
+      &:before {
+        content: "";
+        background-color: var(--tab-border-color);
+        transition: background-color 0.2s ease;
+        width: 80%;
+        height: 3px;
+        border-radius: var(--radius-field);
+        bottom: 0;
+        left: 10%;
+        position: absolute;
+      }
+      &:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not(
+          .tab-disabled,
+          [disabled]
+        ),
+      &:is(input:checked),
+      &:is(label:has(:checked)) {
+        &:before {
+          --tab-border-color: currentColor;
+          border-top: 3px solid;
+        }
+      }
+    }
+  }
+}
+
+.tabs-lift {
+  @layer daisyui.l1.l2 {
+    --tabs-height: auto;
+    --tabs-direction: row;
+
+    > .tab {
+      --tab-border: 0 0 var(--border) 0;
+      --tab-radius-ss: var(--tab-radius-limit);
+      --tab-radius-se: var(--tab-radius-limit);
+      --tab-radius-es: 0;
+      --tab-radius-ee: 0;
+      --tab-paddings: var(--border) var(--tab-p) 0 var(--tab-p);
+      --tab-border-colors: #0000 #0000 var(--tab-border-color) #0000;
+      --tab-corner-width: calc(100% + var(--tab-radius-limit) * 2);
+      --tab-corner-height: var(--tab-radius-limit);
+      --tab-corner-position: top left, top right;
+      /* --last-tab-margin: 0 var(--tab-p) 0 0; */
+
+      border-width: var(--tab-border);
+      border-start-start-radius: var(--tab-radius-ss);
+      border-start-end-radius: var(--tab-radius-se);
+      border-end-start-radius: var(--tab-radius-es);
+      border-end-end-radius: var(--tab-radius-ee);
+      padding: var(--tab-paddings);
+      border-color: var(--tab-border-colors);
+
+      &:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not(
+          .tab-disabled,
+          [disabled]
+        ),
+      &:is(input:checked, label:has(:checked)) {
+        --tab-border: var(--border) var(--border) 0 var(--border);
+        --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000
+          var(--tab-border-color);
+        --tab-paddings: 0 calc(var(--tab-p) - var(--border)) var(--border)
+          calc(var(--tab-p) - var(--border));
+        --tab-inset: auto auto 0 auto;
+        --radius-start: radial-gradient(circle at top left, var(--tab-radius-grad));
+        --radius-end: radial-gradient(circle at top right, var(--tab-radius-grad));
+        background-color: var(--tab-bg);
+
+        &:before {
+          z-index: 1;
+          content: "";
+          display: block;
+          position: absolute;
+          width: var(--tab-corner-width);
+          height: var(--tab-corner-height);
+          background-position: var(--tab-corner-position);
+          background-image: var(--radius-start), var(--radius-end);
+          background-size: var(--tab-radius-limit) var(--tab-radius-limit);
+          background-repeat: no-repeat;
+          inset: var(--tab-inset);
+        }
+
+        &:first-child:before {
+          --radius-start: none;
+        }
+        [dir="rtl"] &:first-child:before {
+          transform: rotateY(180deg);
+        }
+
+        &:last-child:before {
+          --radius-end: none;
+        }
+        [dir="rtl"] &:last-child:before {
+          transform: rotateY(180deg);
+        }
+      }
+
+      /* &:last-of-type {
+        margin: var(--last-tab-margin);
+      } */
+    }
+
+    &:has(> .tab-content) {
+      > .tab:first-child {
+        &:not(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) {
+          --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000
+            var(--tab-border-color);
+        }
+      }
+    }
+
+    > .tab-content {
+      --tabcontent-margin: calc(-1 * var(--border)) 0 0 0;
+      --tabcontent-radius-ss: 0;
+      --tabcontent-radius-se: var(--radius-box);
+      --tabcontent-radius-es: var(--radius-box);
+      --tabcontent-radius-ee: var(--radius-box);
+    }
+
+    :checked,
+    label:has(:checked),
+    :is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) {
+      & + .tab-content {
+        &:nth-child(1),
+        &:nth-child(n + 3) {
+          --tabcontent-radius-ss: var(--radius-box);
+        }
+      }
+    }
+  }
+}
+
+.tabs-top {
+  @layer daisyui.l1.l2 {
+    --tabs-height: auto;
+    --tabs-direction: row;
+
+    > .tab {
+      --tab-order: 0;
+      --tab-border: 0 0 var(--border) 0;
+      --tab-radius-ss: var(--tab-radius-limit);
+      --tab-radius-se: var(--tab-radius-limit);
+      --tab-radius-es: 0;
+      --tab-radius-ee: 0;
+      --tab-paddings: var(--border) var(--tab-p) 0 var(--tab-p);
+      --tab-border-colors: #0000 #0000 var(--tab-border-color) #0000;
+      --tab-corner-width: calc(100% + var(--tab-radius-limit) * 2);
+      --tab-corner-height: var(--tab-radius-limit);
+      --tab-corner-position: top left, top right;
+      /* --last-tab-margin: 0 var(--tab-p) 0 0; */
+
+      &:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not(
+          .tab-disabled,
+          [disabled]
+        ),
+      &:is(input:checked),
+      &:is(label:has(:checked)) {
+        --tab-border: var(--border) var(--border) 0 var(--border);
+        --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000
+          var(--tab-border-color);
+        --tab-paddings: 0 calc(var(--tab-p) - var(--border)) var(--border)
+          calc(var(--tab-p) - var(--border));
+        --tab-inset: auto auto 0 auto;
+        --radius-start: radial-gradient(circle at top left, var(--tab-radius-grad));
+        --radius-end: radial-gradient(circle at top right, var(--tab-radius-grad));
+      }
+    }
+
+    &:has(> .tab-content) {
+      > .tab:first-child {
+        &:not(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) {
+          --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000
+            var(--tab-border-color);
+        }
+      }
+    }
+
+    > .tab-content {
+      --tabcontent-order: 1;
+      --tabcontent-margin: calc(-1 * var(--border)) 0 0 0;
+      --tabcontent-radius-ss: 0;
+      --tabcontent-radius-se: var(--radius-box);
+      --tabcontent-radius-es: var(--radius-box);
+      --tabcontent-radius-ee: var(--radius-box);
+    }
+
+    :checked,
+    label:has(:checked),
+    :is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) {
+      & + .tab-content {
+        &:nth-child(1),
+        &:nth-child(n + 3) {
+          --tabcontent-radius-ss: var(--radius-box);
+        }
+      }
+    }
+  }
+}
+
+.tabs-bottom {
+  @layer daisyui.l1.l2 {
+    --tabs-height: auto;
+    --tabs-direction: row;
+
+    > .tab {
+      --tab-order: 1;
+      --tab-border: var(--border) 0 0 0;
+      --tab-radius-ss: 0;
+      --tab-radius-se: 0;
+      --tab-radius-es: var(--tab-radius-limit);
+      --tab-radius-ee: var(--tab-radius-limit);
+      --tab-border-colors: var(--tab-border-color) #0000 #0000 #0000;
+      --tab-paddings: 0 var(--tab-p) var(--border) var(--tab-p);
+      --tab-corner-width: calc(100% + var(--tab-radius-limit) * 2);
+      --tab-corner-height: var(--tab-radius-limit);
+      --tab-corner-position: top left, top right;
+      /* --last-tab-margin: 0 var(--tab-p) 0 0; */
+
+      &:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not(
+          .tab-disabled,
+          [disabled]
+        ),
+      &:is(input:checked),
+      &:is(label:has(:checked)) {
+        --tab-border: 0 var(--border) var(--border) var(--border);
+        --tab-border-colors: #0000 var(--tab-border-color) var(--tab-border-color)
+          var(--tab-border-color);
+        --tab-paddings: var(--border) calc(var(--tab-p) - var(--border)) 0
+          calc(var(--tab-p) - var(--border));
+        --tab-inset: 0 auto auto auto;
+        --radius-start: radial-gradient(circle at bottom left, var(--tab-radius-grad));
+        --radius-end: radial-gradient(circle at bottom right, var(--tab-radius-grad));
+      }
+    }
+
+    &:has(> .tab-content) {
+      > .tab:first-child {
+        &:not(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) {
+          --tab-border-colors: #0000 var(--tab-border-color) var(--tab-border-color)
+            var(--tab-border-color);
+        }
+      }
+    }
+
+    > .tab-content {
+      --tabcontent-order: 0;
+      --tabcontent-margin: 0 0 calc(-1 * var(--border)) 0;
+      --tabcontent-radius-ss: var(--radius-box);
+      --tabcontent-radius-se: var(--radius-box);
+      --tabcontent-radius-es: 0;
+      --tabcontent-radius-ee: var(--radius-box);
+    }
+
+    > :checked,
+    > :is(label:has(:checked)),
+    > :is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) {
+      & + .tab-content:not(:nth-child(2)) {
+        --tabcontent-radius-es: var(--radius-box);
+      }
+    }
+  }
+}
+
+/* .tabs-start {
+  @layer daisyui.l1.l2 {
+    --tabs-height: 10rem;
+    --tabs-direction: column;
+
+    > .tab {
+      --tab-order: 0;
+      --tab-border: 0 1px 0 0;
+      --tab-radius-ss: var(--tab-radius-limit);
+      --tab-radius-se: 0;
+      --tab-radius-es: var(--tab-radius-limit);
+      --tab-radius-ee: 0;
+      --tab-paddings: 1px var(--tab-p) 1px calc(var(--tab-p) + 1px);
+      --tab-border-colors: #0000 #0000 var(--tab-border-color) #0000;
+      --tab-corner-width: var(--tab-radius-limit);
+      --tab-corner-height: calc(100% + var(--tab-radius-limit) * 2);
+      --tab-corner-position: top right, bottom right;
+      --last-tab-margin: 0 0 0 0;
+
+      &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]),
+      &:is(input:checked),
+      &:is(label:has(:checked)) {
+        --tab-border: 1px 0 1px 1px;
+        --tab-border-colors: var(--tab-border-color) #0000 var(--tab-border-color) var(--tab-border-color);
+        --tab-paddings: 0 calc(1px + var(--tab-p)) 0 var(--tab-p);
+        --tab-inset: auto 0 auto auto;
+        --radius-start: radial-gradient(circle at top left, var(--tab-radius-grad));
+        --radius-end: radial-gradient(circle at bottom right, var(--tab-radius-grad));
+      }
+    }
+
+    &:has(> .tab-content) {
+      > .tab:first-child {
+        &:not(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) {
+          --tab-border-colors: var(--tab-border-color) #0000 var(--tab-border-color) var(--tab-border-color);
+        }
+      }
+    }
+
+    > .tab-content {
+      --tabcontent-order: 1;
+      --tabcontent-margin: 0 0 0 -1px;
+      --tabcontent-radius-ss: 0;
+      --tabcontent-radius-se: var(--radius-box);
+      --tabcontent-radius-es: var(--radius-box);
+      --tabcontent-radius-ee: var(--radius-box);
+    }
+
+    :checked,
+    label:has(:checked),
+    :is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) {
+      & + .tab-content:not(:nth-child(2)) {
+        --tabcontent-radius-ss: var(--radius-box);
+      }
+    }
+  }
+} */
+
+.tabs-box {
+  @layer daisyui.l1.l2 {
+    @apply bg-base-200 p-1;
+    /*
+      using --tabs-box-radius CSS variable to avoid Nuxt build issue
+      https://github.com/saadeghi/daisyui/issues/3724
+    */
+    --tabs-box-radius: calc(3 * var(--radius-field));
+    border-radius: calc(
+      min(var(--tab-height) / 2, var(--radius-field)) + min(0.25rem, var(--tabs-box-radius))
+    );
+    box-shadow:
+      0 -0.5px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset,
+      0 0.5px oklch(0% 0 0 / calc(var(--depth) * 0.05)) inset;
+
+    > .tab {
+      @apply rounded-field;
+      border-style: none;
+
+      &:focus-visible,
+      &:is(label:has(:checked:focus-visible)) {
+        outline-offset: 2px;
+      }
+      &:focus-visible {
+        @apply z-1;
+      }
+    }
+
+    > :is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not(
+        .tab-disabled,
+        [disabled]
+      ),
+    > :is(input:checked),
+    > :is(label:has(:checked)) {
+      background-color: var(--tab-bg, var(--color-base-100));
+      box-shadow:
+        0 1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset,
+        0 1px 1px -1px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 50%), #0000),
+        0 1px 6px -4px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 100%), #0000);
+      @media (forced-colors: active) {
+        border: 1px solid;
+      }
+    }
+    > .tab-content {
+      @apply mt-1;
+      /* Compensate for p-1 */
+      height: calc(100% - var(--tab-height) + var(--border) - 0.5rem);
+      border-radius: calc(
+        min(var(--tab-height) / 2, var(--radius-field)) +
+          min(0.25rem, var(--tabs-box-radius)) - var(--border)
+      );
+    }
+  }
+}
+
+.tabs-xs {
+  @layer daisyui.l1.l2 {
+    --tab-height: calc(var(--size-field, 0.25rem) * 6);
+    & > .tab {
+      font-size: 0.75rem;
+      --tab-p: 0.375rem;
+      --tab-radius-min: calc(0.5rem - var(--border));
+    }
+  }
+}
+
+.tabs-sm {
+  @layer daisyui.l1.l2 {
+    --tab-height: calc(var(--size-field, 0.25rem) * 8);
+    & > .tab {
+      font-size: 0.875rem;
+      --tab-p: 0.5rem;
+      --tab-radius-min: calc(0.5rem - var(--border));
+    }
+  }
+}
+
+.tabs-md {
+  @layer daisyui.l1.l2 {
+    --tab-height: calc(var(--size-field, 0.25rem) * 10);
+    & > .tab {
+      font-size: 0.875rem;
+      --tab-p: 0.75rem;
+      --tab-radius-min: calc(0.75rem - var(--border));
+    }
+  }
+}
+
+.tabs-lg {
+  @layer daisyui.l1.l2 {
+    --tab-height: calc(var(--size-field, 0.25rem) * 12);
+    & > .tab {
+      font-size: 1.125rem;
+      --tab-p: 1rem;
+      --tab-radius-min: calc(1.5rem - var(--border));
+    }
+  }
+}
+
+.tabs-xl {
+  @layer daisyui.l1.l2 {
+    --tab-height: calc(var(--size-field, 0.25rem) * 14);
+    & > .tab {
+      font-size: 1.125rem;
+      --tab-p: 1.25rem;
+      --tab-radius-min: calc(2rem - var(--border));
+    }
+  }
+}

package/src/components/table.css

@@ -0,0 +1,126 @@
+.table {
+  @layer daisyui.l1.l2.l3 {
+    font-size: 0.875rem;
+    @apply rounded-box relative w-full border-separate border-spacing-0 text-left rtl:text-right;
+
+    tr.row-hover {
+      &,
+      &:nth-child(even) {
+        @apply hover:bg-base-200;
+      }
+    }
+
+    :where(th, td) {
+      @apply px-4 py-3 align-middle;
+    }
+
+    :where(thead, tfoot) {
+      @apply text-base-content/60 whitespace-nowrap;
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+
+    :where(tfoot tr:first-child :is(td, th)) {
+      border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000);
+    }
+
+    :where(.table-pin-rows thead tr) {
+      @apply bg-base-100 sticky top-0 z-1;
+    }
+
+    :where(.table-pin-rows tfoot tr) {
+      @apply bg-base-100 sticky bottom-0 z-1;
+    }
+
+    :where(.table-pin-cols tr th) {
+      @apply bg-base-100 sticky right-0 left-0;
+    }
+
+    :where(thead tr :is(td, th), tbody tr:not(:last-child) :is(td, th)) {
+      border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000);
+    }
+  }
+}
+
+.table-zebra {
+  @layer daisyui.l1.l2 {
+    tbody {
+      tr {
+        &:where(:nth-child(even)) {
+          @apply bg-base-200;
+
+          :where(.table-pin-cols tr th) {
+            @apply bg-base-200;
+          }
+        }
+
+        &.row-hover {
+          &,
+          &:where(:nth-child(even)) {
+            @apply hover:bg-base-300;
+          }
+        }
+      }
+    }
+  }
+}
+
+.table-xs {
+  @layer daisyui.l1.l2 {
+    :not(thead, tfoot) tr {
+      font-size: 0.6875rem;
+    }
+
+    :where(th, td) {
+      @apply px-2 py-1;
+    }
+  }
+}
+
+.table-sm {
+  @layer daisyui.l1.l2 {
+    :not(thead, tfoot) tr {
+      font-size: 0.75rem;
+    }
+
+    :where(th, td) {
+      @apply px-3 py-2;
+    }
+  }
+}
+
+.table-md {
+  @layer daisyui.l1.l2 {
+    :not(thead, tfoot) tr {
+      font-size: 0.875rem;
+    }
+
+    :where(th, td) {
+      @apply px-4 py-3;
+    }
+  }
+}
+
+.table-lg {
+  @layer daisyui.l1.l2 {
+    :not(thead, tfoot) tr {
+      font-size: 1.125rem;
+    }
+
+    :where(th, td) {
+      @apply px-5 py-4;
+    }
+  }
+}
+
+.table-xl {
+  @layer daisyui.l1.l2 {
+    :not(thead, tfoot) tr {
+      font-size: 1.375rem;
+    }
+
+    :where(th, td) {
+      @apply px-6 py-5;
+    }
+  }
+}