@macroui/macroui 4.0.0 → 4.0.2

package/src/components/avatar.css

@@ -0,0 +1,60 @@
+.avatar-group {
+  @layer daisyui.l1.l2.l3 {
+    @apply flex overflow-hidden;
+
+    .avatar {
+      @apply overflow-hidden rounded-full;
+      border: 4px solid var(--color-base-100);
+    }
+  }
+}
+
+.avatar {
+  @layer daisyui.l1.l2.l3 {
+    @apply relative inline-flex align-middle;
+
+    & > div {
+      @apply block aspect-square overflow-hidden;
+    }
+
+    img {
+      @apply h-full w-full object-cover;
+    }
+  }
+}
+
+.avatar-placeholder {
+  @layer daisyui.l1.l2 {
+    & > div {
+      @apply flex items-center justify-center;
+    }
+  }
+}
+
+.avatar-online {
+  @layer daisyui.l1.l2 {
+    &:before {
+      content: "";
+      @apply bg-success absolute z-1 block rounded-full;
+      outline: 2px solid var(--color-base-100);
+      width: 15%;
+      height: 15%;
+      top: 7%;
+      right: 7%;
+    }
+  }
+}
+
+.avatar-offline {
+  @layer daisyui.l1.l2 {
+    &:before {
+      content: "";
+      @apply bg-base-300 absolute z-1 block rounded-full;
+      outline: 2px solid var(--color-base-100);
+      width: 15%;
+      height: 15%;
+      top: 7%;
+      right: 7%;
+    }
+  }
+}

package/src/components/badge.css

@@ -0,0 +1,151 @@
+.badge {
+  @layer daisyui.l1.l2.l3 {
+    @apply rounded-selector inline-flex items-center justify-center gap-2 align-middle;
+    color: var(--badge-fg);
+    border: var(--border) solid var(--badge-color, var(--color-base-200));
+    font-size: 0.875rem;
+    width: fit-content;
+    background-size: auto, calc(var(--noise) * 100%);
+    background-image: none, var(--fx-noise);
+    background-color: var(--badge-bg);
+    --badge-bg: var(--badge-color, var(--color-base-100));
+    --badge-fg: var(--color-base-content);
+    --size: calc(var(--size-selector, 0.25rem) * 6);
+    height: var(--size);
+    padding-inline: calc(var(--size) / 2 - var(--border));
+  }
+}
+
+.badge-outline {
+  @layer daisyui.l1.l2 {
+    color: var(--badge-color);
+    --badge-bg: #0000;
+    background-image: none;
+    border-color: currentColor;
+  }
+}
+
+.badge-dash {
+  @layer daisyui.l1.l2 {
+    color: var(--badge-color);
+    --badge-bg: #0000;
+    background-image: none;
+    border-color: currentColor;
+    border-style: dashed;
+  }
+}
+
+.badge-soft {
+  @layer daisyui.l1.l2 {
+    color: var(--badge-color, var(--color-base-content));
+    background-color: color-mix(
+      in oklab,
+      var(--badge-color, var(--color-base-content)) 8%,
+      var(--color-base-100)
+    );
+    border-color: color-mix(
+      in oklab,
+      var(--badge-color, var(--color-base-content)) 10%,
+      var(--color-base-100)
+    );
+    background-image: none;
+  }
+}
+
+.badge-primary {
+  @layer daisyui.l1.l2 {
+    --badge-color: var(--color-primary);
+    --badge-fg: var(--color-primary-content);
+  }
+}
+
+.badge-secondary {
+  @layer daisyui.l1.l2 {
+    --badge-color: var(--color-secondary);
+    --badge-fg: var(--color-secondary-content);
+  }
+}
+
+.badge-accent {
+  @layer daisyui.l1.l2 {
+    --badge-color: var(--color-accent);
+    --badge-fg: var(--color-accent-content);
+  }
+}
+
+.badge-neutral {
+  @layer daisyui.l1.l2 {
+    --badge-color: var(--color-neutral);
+    --badge-fg: var(--color-neutral-content);
+  }
+}
+
+.badge-info {
+  @layer daisyui.l1.l2 {
+    --badge-color: var(--color-info);
+    --badge-fg: var(--color-info-content);
+  }
+}
+
+.badge-success {
+  @layer daisyui.l1.l2 {
+    --badge-color: var(--color-success);
+    --badge-fg: var(--color-success-content);
+  }
+}
+
+.badge-warning {
+  @layer daisyui.l1.l2 {
+    --badge-color: var(--color-warning);
+    --badge-fg: var(--color-warning-content);
+  }
+}
+
+.badge-error {
+  @layer daisyui.l1.l2 {
+    --badge-color: var(--color-error);
+    --badge-fg: var(--color-error-content);
+  }
+}
+
+.badge-ghost {
+  @layer daisyui.l1.l2 {
+    @apply border-base-200 bg-base-200 text-base-content;
+    background-image: none;
+  }
+}
+
+.badge-xs {
+  @layer daisyui.l1.l2 {
+    --size: calc(var(--size-selector, 0.25rem) * 4);
+    font-size: 0.625rem;
+  }
+}
+
+.badge-sm {
+  @layer daisyui.l1.l2 {
+    --size: calc(var(--size-selector, 0.25rem) * 5);
+    font-size: 0.75rem;
+  }
+}
+
+.badge-md {
+  @layer daisyui.l1.l2 {
+    --size: calc(var(--size-selector, 0.25rem) * 6);
+    font-size: 0.875rem;
+  }
+}
+
+.badge-lg {
+  @layer daisyui.l1.l2 {
+    --size: calc(var(--size-selector, 0.25rem) * 7);
+    font-size: 1rem;
+  }
+}
+
+.badge-xl {
+  @layer daisyui.l1.l2 {
+    --size: calc(var(--size-selector, 0.25rem) * 8);
+    font-size: 1.125rem;
+  }
+}

package/src/components/breadcrumbs.css

@@ -0,0 +1,40 @@
+.breadcrumbs {
+  @layer daisyui.l1.l2.l3 {
+    @apply max-w-full overflow-x-auto py-2;
+
+    > menu,
+    > ul,
+    > ol {
+      @apply flex min-h-min items-center whitespace-nowrap;
+
+      > li {
+        @apply flex items-center;
+
+        > * {
+          @apply flex cursor-pointer items-center gap-2 hover:underline;
+
+          &:focus {
+            @apply outline-hidden;
+          }
+
+          &:focus-visible {
+            outline: 2px solid currentColor;
+            outline-offset: 2px;
+          }
+        }
+
+        & + *:before {
+          content: "";
+          @apply me-3 ms-2 block h-1.5 w-1.5 opacity-40;
+          rotate: 45deg;
+          border-top: 1px solid;
+          border-right: 1px solid;
+          background-color: #0000;
+        }
+        [dir="rtl"] & + *:before {
+          rotate: -135deg;
+        }
+      }
+    }
+  }
+}

package/src/components/button.css

@@ -0,0 +1,362 @@
+:where(.btn) {
+  @layer daisyui.l1.l2.l3 {
+    width: unset;
+  }
+}
+
+.prose :where(a.btn:not(.btn-link)):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  @apply no-underline;
+}
+
+.btn {
+  @layer daisyui.l1.l2.l3 {
+    @apply inline-flex shrink-0 cursor-pointer flex-nowrap items-center justify-center gap-1.5 text-center align-middle outline-offset-2 select-none;
+    padding-inline: var(--btn-p);
+    color: var(--btn-fg);
+    --tw-prose-links: var(--btn-fg);
+    height: var(--size);
+    font-size: var(--fontsize, 0.875rem);
+    font-weight: 600;
+    outline-color: var(--btn-color, var(--color-base-content));
+    transition-property: color, background-color, border-color, box-shadow;
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    transition-duration: 0.2s;
+    border-start-start-radius: var(--join-ss, var(--radius-field));
+    border-start-end-radius: var(--join-se, var(--radius-field));
+    border-end-start-radius: var(--join-es, var(--radius-field));
+    border-end-end-radius: var(--join-ee, var(--radius-field));
+    background-color: var(--btn-bg);
+    background-size: auto, calc(var(--noise) * 100%);
+    background-image: none, var(--btn-noise);
+    border-width: var(--border);
+    border-style: solid;
+    border-color: var(--btn-border);
+    text-shadow: 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 0.15));
+    touch-action: manipulation;
+    box-shadow:
+      0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset,
+      var(--btn-shadow);
+    --size: calc(var(--size-field, 0.25rem) * 10);
+    --btn-bg: var(--btn-color, var(--color-base-200));
+    --btn-fg: var(--color-base-content);
+    --btn-p: 1rem;
+    --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%));
+    --btn-shadow:
+      0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000),
+      0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);
+    --btn-noise: var(--fx-noise);
+    @media (hover: hover) {
+      &:hover {
+        --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
+      }
+    }
+
+    &:focus-visible,
+    &:has(:focus-visible) {
+      outline-width: 2px;
+      outline-style: solid;
+      isolation: isolate;
+    }
+
+    &:active:not(.btn-active) {
+      translate: 0 0.5px;
+      --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%);
+      --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
+      --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
+    }
+
+    &:is(input[type="checkbox"], input[type="radio"]) {
+      @apply appearance-none;
+
+      /* &:not(.btn-square, .btn-circle) {
+        @apply w-auto;
+      } */
+
+      &[aria-label]::after {
+        --tw-content: attr(aria-label);
+        content: var(--tw-content);
+      }
+    }
+    &:where(input:checked:not(.filter .btn)) {
+      --btn-color: var(--color-primary);
+      --btn-fg: var(--color-primary-content);
+      isolation: isolate;
+    }
+  }
+}
+
+.btn-disabled,
+.btn:disabled,
+.btn[disabled] {
+  @layer daisyui.l1.l2 {
+    &:not(.btn-link, .btn-ghost) {
+      @apply bg-base-content/10;
+      box-shadow: none;
+    }
+
+    @apply pointer-events-none;
+    --btn-border: #0000;
+    --btn-noise: none;
+    --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
+  }
+}
+
+.btn-active {
+  @layer daisyui.l1.l2 {
+    --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
+    --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
+    isolation: isolate;
+  }
+}
+
+.btn-primary {
+  @layer daisyui.l1.l2.l3 {
+    --btn-color: var(--color-primary);
+    --btn-fg: var(--color-primary-content);
+  }
+}
+
+.btn-secondary {
+  @layer daisyui.l1.l2.l3 {
+    --btn-color: var(--color-secondary);
+    --btn-fg: var(--color-secondary-content);
+  }
+}
+
+.btn-accent {
+  @layer daisyui.l1.l2.l3 {
+    --btn-color: var(--color-accent);
+    --btn-fg: var(--color-accent-content);
+  }
+}
+
+.btn-neutral {
+  @layer daisyui.l1.l2.l3 {
+    --btn-color: var(--color-neutral);
+    --btn-fg: var(--color-neutral-content);
+  }
+}
+
+.btn-info {
+  @layer daisyui.l1.l2.l3 {
+    --btn-color: var(--color-info);
+    --btn-fg: var(--color-info-content);
+  }
+}
+
+.btn-success {
+  @layer daisyui.l1.l2.l3 {
+    --btn-color: var(--color-success);
+    --btn-fg: var(--color-success-content);
+  }
+}
+
+.btn-warning {
+  @layer daisyui.l1.l2.l3 {
+    --btn-color: var(--color-warning);
+    --btn-fg: var(--color-warning-content);
+  }
+}
+
+.btn-error {
+  @layer daisyui.l1.l2.l3 {
+    --btn-color: var(--color-error);
+    --btn-fg: var(--color-error-content);
+  }
+}
+
+.btn-ghost {
+  @layer daisyui.l1 {
+    &:not(.btn-active, :hover, :active:focus, :focus-visible, input:checked:not(.filter .btn)) {
+      --btn-shadow: "";
+      --btn-bg: #0000;
+      --btn-border: #0000;
+      --btn-noise: none;
+      &:not(:disabled, [disabled], .btn-disabled) {
+        @apply outline-current;
+        --btn-fg: var(--btn-color, currentColor);
+      }
+    }
+
+    @media (hover: none) {
+      &:not(.btn-active, :active, :focus-visible, input:checked:not(.filter .btn)):hover {
+        @apply outline-current;
+        --btn-shadow: "";
+        --btn-bg: #0000;
+        --btn-fg: var(--btn-color, currentColor);
+        --btn-border: #0000;
+        --btn-noise: none;
+      }
+    }
+  }
+}
+
+.btn-link {
+  @layer daisyui.l1 {
+    @apply underline outline-current;
+    --btn-border: #0000;
+    --btn-bg: #0000;
+    --btn-noise: none;
+    --btn-shadow: "";
+
+    &:not(.btn-disabled, .btn:disabled, .btn[disabled]) {
+      --btn-fg: var(--btn-color, var(--color-primary));
+    }
+
+    &:is(.btn-active, :hover, :active:focus, :focus-visible) {
+      --btn-border: #0000;
+      --btn-bg: #0000;
+    }
+  }
+}
+
+.btn-outline,
+.btn-dash {
+  @layer daisyui.l1 {
+    &:not(
+      .btn-active,
+      :hover,
+      :active:focus,
+      :focus-visible,
+      input:checked:not(.filter .btn),
+      :disabled,
+      [disabled],
+      .btn-disabled
+    ) {
+      --btn-shadow: "";
+      --btn-bg: #0000;
+      --btn-fg: var(--btn-color);
+      --btn-border: var(--btn-color);
+      --btn-noise: none;
+    }
+
+    @media (hover: none) {
+      &:not(.btn-active, :active, :focus-visible, input:checked:not(.filter .btn)):hover {
+        --btn-shadow: "";
+        --btn-bg: #0000;
+        --btn-fg: var(--btn-color);
+        --btn-border: var(--btn-color);
+        --btn-noise: none;
+      }
+    }
+  }
+}
+
+.btn-dash {
+  border-style: dashed;
+}
+
+.btn-soft {
+  @layer daisyui.l1 {
+    &:not(
+      .btn-active,
+      :hover,
+      :active:focus,
+      :focus-visible,
+      input:checked:not(.filter .btn),
+      :disabled,
+      [disabled],
+      .btn-disabled
+    ) {
+      --btn-shadow: "";
+      --btn-fg: var(--btn-color, var(--color-base-content));
+      --btn-bg: color-mix(
+        in oklab,
+        var(--btn-color, var(--color-base-content)) 8%,
+        var(--color-base-100)
+      );
+      --btn-border: color-mix(
+        in oklab,
+        var(--btn-color, var(--color-base-content)) 10%,
+        var(--color-base-100)
+      );
+      --btn-noise: none;
+    }
+
+    @media (hover: none) {
+      &:not(.btn-active, :active, :focus-visible, input:checked:not(.filter .btn)):hover {
+        --btn-shadow: "";
+        --btn-fg: var(--btn-color, var(--color-base-content));
+        --btn-bg: color-mix(
+          in oklab,
+          var(--btn-color, var(--color-base-content)) 8%,
+          var(--color-base-100)
+        );
+        --btn-border: color-mix(
+          in oklab,
+          var(--btn-color, var(--color-base-content)) 10%,
+          var(--color-base-100)
+        );
+        --btn-noise: none;
+      }
+    }
+  }
+}
+
+.btn-xs {
+  @layer daisyui.l1.l2 {
+    --fontsize: 0.6875rem;
+    --btn-p: 0.5rem;
+    --size: calc(var(--size-field, 0.25rem) * 6);
+  }
+}
+
+.btn-sm {
+  @layer daisyui.l1.l2 {
+    --fontsize: 0.75rem;
+    --btn-p: 0.75rem;
+    --size: calc(var(--size-field, 0.25rem) * 8);
+  }
+}
+
+.btn-md {
+  @layer daisyui.l1.l2 {
+    --fontsize: 0.875rem;
+    --btn-p: 1rem;
+    --size: calc(var(--size-field, 0.25rem) * 10);
+  }
+}
+
+.btn-lg {
+  @layer daisyui.l1.l2 {
+    --fontsize: 1.125rem;
+    --btn-p: 1.25rem;
+    --size: calc(var(--size-field, 0.25rem) * 12);
+  }
+}
+
+.btn-xl {
+  @layer daisyui.l1.l2 {
+    --fontsize: 1.375rem;
+    --btn-p: 1.5rem;
+    --size: calc(var(--size-field, 0.25rem) * 14);
+  }
+}
+
+.btn-square {
+  @layer daisyui.l1.l2 {
+    @apply px-0;
+    width: var(--size);
+    height: var(--size);
+  }
+}
+
+.btn-circle {
+  @layer daisyui.l1.l2 {
+    @apply rounded-full px-0;
+    width: var(--size);
+    height: var(--size);
+  }
+}
+
+.btn-wide {
+  @layer daisyui.l1.l2 {
+    @apply w-full max-w-64;
+  }
+}
+
+.btn-block {
+  @layer daisyui.l1.l2 {
+    @apply w-full;
+  }
+}