@macroui/macroui 1.0.31 → 4.0.1

package/src/components/alert.css

@@ -0,0 +1,126 @@
+.alert {
+  /* override the border style of Tailwind CSS Typography plugin */
+  border-width: var(--border);
+  border-color: var(--alert-border-color, var(--color-base-200));
+  @layer daisyui.l1.l2.l3 {
+    border-style: solid;
+    --alert-border-color: var(--color-base-200);
+    @apply rounded-box text-base-content grid items-center gap-4 px-4 py-3;
+    background-color: var(--alert-color, var(--color-base-200));
+    justify-content: start;
+    justify-items: start;
+    grid-auto-flow: column;
+    grid-template-columns: auto;
+    text-align: start;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    background-size: auto, calc(var(--noise) * 100%);
+    background-image: none, var(--fx-noise);
+    box-shadow:
+      0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset,
+      0 1px
+        color-mix(
+          in oklab,
+          color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200)))
+            calc(var(--depth) * 20%),
+          #0000
+        ),
+      0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));
+    &:has(:nth-child(2)) {
+      grid-template-columns: auto minmax(auto, 1fr);
+    }
+  }
+}
+
+.alert-info {
+  @layer daisyui.l1.l2 {
+    @apply text-info-content;
+    --alert-border-color: var(--color-info);
+    --alert-color: var(--color-info);
+  }
+}
+
+.alert-success {
+  @layer daisyui.l1.l2 {
+    @apply text-success-content;
+    --alert-border-color: var(--color-success);
+    --alert-color: var(--color-success);
+  }
+}
+
+.alert-warning {
+  @layer daisyui.l1.l2 {
+    @apply text-warning-content;
+    --alert-border-color: var(--color-warning);
+    --alert-color: var(--color-warning);
+  }
+}
+
+.alert-error {
+  @layer daisyui.l1.l2 {
+    @apply text-error-content;
+    --alert-border-color: var(--color-error);
+    --alert-color: var(--color-error);
+  }
+}
+
+.alert-soft {
+  @layer daisyui.l1 {
+    color: var(--alert-color, var(--color-base-content));
+    background: color-mix(
+      in oklab,
+      var(--alert-color, var(--color-base-content)) 8%,
+      var(--color-base-100)
+    );
+    --alert-border-color: color-mix(
+      in oklab,
+      var(--alert-color, var(--color-base-content)) 10%,
+      var(--color-base-100)
+    );
+    box-shadow: none;
+    background-image: none;
+  }
+}
+.alert-outline {
+  @layer daisyui.l1 {
+    @apply bg-transparent;
+    color: var(--alert-color);
+    box-shadow: none;
+    background-image: none;
+  }
+}
+.alert-dash {
+  @layer daisyui.l1 {
+    @apply bg-transparent;
+    color: var(--alert-color);
+    border-style: dashed;
+    box-shadow: none;
+    background-image: none;
+  }
+}
+
+.alert-vertical {
+  @layer daisyui.l1.l2 {
+    justify-content: center;
+    justify-items: center;
+    grid-auto-flow: row;
+    grid-template-columns: auto;
+    text-align: center;
+    &:has(:nth-child(2)) {
+      grid-template-columns: auto;
+    }
+  }
+}
+
+.alert-horizontal {
+  @layer daisyui.l1.l2 {
+    justify-content: start;
+    justify-items: start;
+    grid-auto-flow: column;
+    grid-template-columns: auto;
+    text-align: start;
+    &:has(:nth-child(2)) {
+      grid-template-columns: auto minmax(auto, 1fr);
+    }
+  }
+}

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;
+        }
+      }
+    }
+  }
+}