@macroui/macroui 4.0.0 → 4.0.2

package/src/components/card.css

@@ -0,0 +1,203 @@
+.card {
+  @layer daisyui.l1.l2.l3 {
+    @apply rounded-box relative flex flex-col;
+    outline-width: 2px;
+    transition: outline 0.2s ease-in-out;
+    outline: 0 solid #0000;
+    outline-offset: 2px;
+    &:focus {
+      @apply outline-hidden;
+    }
+
+    &:focus-visible {
+      outline-color: currentColor;
+    }
+
+    :where(figure:first-child) {
+      @apply overflow-hidden;
+      border-start-start-radius: inherit;
+      border-start-end-radius: inherit;
+      border-end-start-radius: unset;
+      border-end-end-radius: unset;
+    }
+
+    :where(figure:last-child) {
+      @apply overflow-hidden;
+      border-start-start-radius: unset;
+      border-start-end-radius: unset;
+      border-end-start-radius: inherit;
+      border-end-end-radius: inherit;
+    }
+
+    figure {
+      @apply flex items-center justify-center;
+    }
+    &:has(> input:is(input[type="checkbox"], input[type="radio"])) {
+      @apply cursor-pointer;
+      user-select: none;
+    }
+    &:has(> :checked) {
+      outline: 2px solid currentColor;
+    }
+  }
+}
+
+.card-border {
+  @layer daisyui.l1.l2 {
+    border: var(--border) solid var(--color-base-200);
+  }
+}
+
+.card-dash {
+  @layer daisyui.l1.l2 {
+    border: var(--border) dashed var(--color-base-200);
+  }
+}
+
+.image-full {
+  @layer daisyui.l1.l2 {
+    @apply grid;
+
+    > * {
+      @apply col-start-1 row-start-1;
+    }
+
+    > .card-body {
+      @apply text-neutral-content relative;
+    }
+
+    :where(figure) {
+      @apply overflow-hidden;
+      border-radius: inherit;
+    }
+
+    > figure img {
+      @apply h-full object-cover;
+      filter: brightness(28%);
+    }
+  }
+}
+
+.card-title {
+  @layer daisyui.l1.l2.l3 {
+    @apply flex items-center gap-2;
+    font-size: var(--cardtitle-fs, 1.125rem);
+    font-weight: 600;
+  }
+}
+
+.card-body {
+  @layer daisyui.l1.l2.l3 {
+    @apply flex flex-auto flex-col gap-2;
+    padding: var(--card-p, 1.5rem);
+    font-size: var(--card-fs, 0.875rem);
+
+    :where(p) {
+      @apply grow;
+    }
+  }
+}
+
+.card-actions {
+  @layer daisyui.l1.l2.l3 {
+    @apply flex flex-wrap items-start gap-2;
+  }
+}
+
+.card-xs {
+  @layer daisyui.l1.l2 {
+    .card-body {
+      --card-p: 0.5rem;
+      --card-fs: 0.6875rem;
+    }
+
+    .card-title {
+      --cardtitle-fs: 0.875rem;
+    }
+  }
+}
+
+.card-sm {
+  @layer daisyui.l1.l2 {
+    .card-body {
+      --card-p: 1rem;
+      --card-fs: 0.75rem;
+    }
+
+    .card-title {
+      --cardtitle-fs: 1rem;
+    }
+  }
+}
+
+.card-md {
+  @layer daisyui.l1.l2 {
+    .card-body {
+      --card-p: 1.5rem;
+      --card-fs: 0.875rem;
+    }
+
+    .card-title {
+      --cardtitle-fs: 1.125rem;
+    }
+  }
+}
+
+.card-lg {
+  @layer daisyui.l1.l2 {
+    .card-body {
+      --card-p: 2rem;
+      --card-fs: 1rem;
+    }
+
+    .card-title {
+      --cardtitle-fs: 1.25rem;
+    }
+  }
+}
+
+.card-xl {
+  @layer daisyui.l1.l2 {
+    .card-body {
+      --card-p: 2.5rem;
+      --card-fs: 1.125rem;
+    }
+
+    .card-title {
+      --cardtitle-fs: 1.375rem;
+    }
+  }
+}
+
+.card-side {
+  @layer daisyui.l1.l2 {
+    align-items: stretch;
+    flex-direction: row;
+
+    :where(figure:first-child) {
+      @apply overflow-hidden;
+      border-start-start-radius: inherit;
+      border-start-end-radius: unset;
+      border-end-start-radius: inherit;
+      border-end-end-radius: unset;
+    }
+
+    :where(figure:last-child) {
+      @apply overflow-hidden;
+      border-start-start-radius: unset;
+      border-start-end-radius: inherit;
+      border-end-start-radius: unset;
+      border-end-end-radius: inherit;
+    }
+
+    figure > * {
+      max-width: unset;
+    }
+
+    :where(figure > *) {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+}

package/src/components/carousel.css

@@ -0,0 +1,59 @@
+.carousel {
+  @layer daisyui.l1.l2.l3 {
+    @apply inline-flex overflow-x-scroll;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    @media (prefers-reduced-motion: no-preference) {
+      scroll-behavior: smooth;
+    }
+
+    &::-webkit-scrollbar {
+      @apply hidden;
+    }
+  }
+}
+
+.carousel-vertical {
+  @layer daisyui.l1.l2 {
+    @apply flex-col overflow-y-scroll;
+    scroll-snap-type: y mandatory;
+  }
+}
+
+.carousel-horizontal {
+  @layer daisyui.l1.l2 {
+    @apply flex-row overflow-x-scroll;
+    scroll-snap-type: x mandatory;
+  }
+}
+
+.carousel-item {
+  @layer daisyui.l1.l2.l3 {
+    @apply box-content flex flex-none;
+    scroll-snap-align: start;
+  }
+}
+
+.carousel-start {
+  @layer daisyui.l1.l2 {
+    .carousel-item {
+      scroll-snap-align: start;
+    }
+  }
+}
+
+.carousel-center {
+  @layer daisyui.l1.l2 {
+    .carousel-item {
+      scroll-snap-align: center;
+    }
+  }
+}
+
+.carousel-end {
+  @layer daisyui.l1.l2 {
+    .carousel-item {
+      scroll-snap-align: end;
+    }
+  }
+}

package/src/components/chat.css

@@ -0,0 +1,157 @@
+.chat {
+  @layer daisyui.l1.l2.l3 {
+    @apply grid auto-rows-min gap-x-3 py-1;
+    --mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e");
+  }
+}
+
+.chat-bubble {
+  @layer daisyui.l1.l2.l3 {
+    @apply rounded-field bg-base-300 text-base-content relative block w-fit px-4 py-2;
+    grid-row-end: 3;
+    min-height: 2rem;
+    min-width: 2.5rem;
+    max-width: 90%;
+
+    &:before {
+      @apply absolute bottom-0 h-3 w-3;
+      background-color: inherit;
+      content: "";
+      mask-repeat: no-repeat;
+      mask-image: var(--mask-chat);
+      mask-position: 0px -1px;
+      mask-size: 0.8125rem;
+    }
+  }
+}
+
+.chat-bubble-primary {
+  @layer daisyui.l1.l2 {
+    @apply bg-primary text-primary-content;
+  }
+}
+
+.chat-bubble-secondary {
+  @layer daisyui.l1.l2 {
+    @apply bg-secondary text-secondary-content;
+  }
+}
+
+.chat-bubble-accent {
+  @layer daisyui.l1.l2 {
+    @apply bg-accent text-accent-content;
+  }
+}
+
+.chat-bubble-neutral {
+  @layer daisyui.l1.l2 {
+    @apply bg-neutral text-neutral-content;
+  }
+}
+
+/* state colors */
+.chat-bubble-info {
+  @layer daisyui.l1.l2 {
+    @apply bg-info text-info-content;
+  }
+}
+
+.chat-bubble-success {
+  @layer daisyui.l1.l2 {
+    @apply bg-success text-success-content;
+  }
+}
+
+.chat-bubble-warning {
+  @layer daisyui.l1.l2 {
+    @apply bg-warning text-warning-content;
+  }
+}
+
+.chat-bubble-error {
+  @layer daisyui.l1.l2 {
+    @apply bg-error text-error-content;
+  }
+}
+
+.chat-image {
+  @layer daisyui.l1.l2.l3 {
+    @apply row-span-2 self-end;
+  }
+}
+
+.chat-header {
+  @layer daisyui.l1.l2.l3 {
+    @apply row-start-1 flex gap-1;
+    font-size: 0.6875rem;
+  }
+}
+
+.chat-footer {
+  @layer daisyui.l1.l2.l3 {
+    @apply row-start-3 flex gap-1;
+    font-size: 0.6875rem;
+  }
+}
+
+.chat-start {
+  @layer daisyui.l1.l2 {
+    @apply place-items-start;
+    grid-template-columns: auto 1fr;
+
+    .chat-header {
+      @apply col-start-2;
+    }
+
+    .chat-footer {
+      @apply col-start-2;
+    }
+
+    .chat-image {
+      @apply col-start-1;
+    }
+
+    .chat-bubble {
+      @apply col-start-2 rounded-es-none;
+
+      &:before {
+        transform: rotateY(0deg);
+        inset-inline-start: -0.75rem;
+      }
+      [dir="rtl"] &:before {
+        transform: rotateY(180deg);
+      }
+    }
+  }
+}
+
+.chat-end {
+  @layer daisyui.l1.l2 {
+    @apply place-items-end;
+    grid-template-columns: 1fr auto;
+
+    .chat-header {
+      @apply col-start-1;
+    }
+
+    .chat-footer {
+      @apply col-start-1;
+    }
+
+    .chat-image {
+      @apply col-start-2;
+    }
+
+    .chat-bubble {
+      @apply col-start-1 rounded-ee-none;
+
+      &:before {
+        transform: rotateY(180deg);
+        inset-inline-start: 100%;
+      }
+      [dir="rtl"] &:before {
+        transform: rotateY(0deg);
+      }
+    }
+  }
+}

package/src/components/checkbox.css

@@ -0,0 +1,174 @@
+.checkbox {
+  @layer daisyui.l1.l2.l3 {
+    border: var(--border) solid
+      var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000));
+    @apply text-base-content rounded-selector relative inline-block shrink-0 cursor-pointer appearance-none p-1 align-middle;
+    box-shadow:
+      0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset,
+      0 0 #0000 inset,
+      0 0 #0000;
+    transition:
+      background-color 0.2s,
+      box-shadow 0.2s;
+    --size: calc(var(--size-selector, 0.25rem) * 6);
+    width: var(--size);
+    height: var(--size);
+    background-size: auto, calc(var(--noise) * 100%);
+    background-image: none, var(--fx-noise);
+    &:before {
+      --tw-content: "";
+      content: var(--tw-content);
+      @apply block size-full rotate-45 bg-current opacity-0;
+      transition:
+        clip-path 0.3s,
+        opacity 0.1s,
+        rotate 0.3s,
+        translate 0.3s;
+      transition-delay: 0.1s;
+      clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);
+      box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
+      font-size: 1rem;
+      line-height: 0.75;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--input-color, currentColor);
+      outline-offset: 2px;
+    }
+
+    &:checked,
+    &[aria-checked="true"] {
+      background-color: var(--input-color, #0000);
+      box-shadow:
+        0 0 #0000 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));
+
+      &:before {
+        clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
+        @apply opacity-100;
+      }
+      @media (forced-colors: active) {
+        &:before {
+          @apply rotate-0 bg-transparent [--tw-content:"✔︎"] [clip-path:none];
+        }
+      }
+      @media print {
+        &:before {
+          @apply rotate-0 bg-transparent;
+          --tw-content: "✔︎";
+          clip-path: none;
+        }
+      }
+    }
+
+    &:indeterminate {
+      background-color: var(
+        --input-color,
+        color-mix(in oklab, var(--color-base-content) 20%, #0000)
+      );
+      &:before {
+        @apply rotate-0 opacity-100;
+        translate: 0 -35%;
+        clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
+      }
+    }
+  }
+}
+
+.checkbox-primary {
+  @layer daisyui.l1.l2 {
+    @apply text-primary-content;
+    --input-color: var(--color-primary);
+  }
+}
+
+.checkbox-secondary {
+  @layer daisyui.l1.l2 {
+    @apply text-secondary-content;
+    --input-color: var(--color-secondary);
+  }
+}
+
+.checkbox-accent {
+  @layer daisyui.l1.l2 {
+    @apply text-accent-content;
+    --input-color: var(--color-accent);
+  }
+}
+
+.checkbox-neutral {
+  @layer daisyui.l1.l2 {
+    @apply text-neutral-content;
+    --input-color: var(--color-neutral);
+  }
+}
+
+.checkbox-info {
+  @layer daisyui.l1.l2 {
+    @apply text-info-content;
+    --input-color: var(--color-info);
+  }
+}
+
+.checkbox-success {
+  @layer daisyui.l1.l2 {
+    @apply text-success-content;
+    --input-color: var(--color-success);
+  }
+}
+
+.checkbox-warning {
+  @layer daisyui.l1.l2 {
+    @apply text-warning-content;
+    --input-color: var(--color-warning);
+  }
+}
+
+.checkbox-error {
+  @layer daisyui.l1.l2 {
+    @apply text-error-content;
+    --input-color: var(--color-error);
+  }
+}
+
+.checkbox:disabled {
+  @layer daisyui.l1.l2 {
+    @apply cursor-not-allowed opacity-20;
+  }
+}
+
+.checkbox-xs {
+  @layer daisyui.l1.l2 {
+    @apply p-[0.125rem];
+    --size: calc(var(--size-selector, 0.25rem) * 4);
+  }
+}
+
+.checkbox-sm {
+  @layer daisyui.l1.l2 {
+    @apply p-[0.1875rem];
+    --size: calc(var(--size-selector, 0.25rem) * 5);
+  }
+}
+
+.checkbox-md {
+  @layer daisyui.l1.l2 {
+    @apply p-[0.25rem];
+    --size: calc(var(--size-selector, 0.25rem) * 6);
+  }
+}
+
+.checkbox-lg {
+  @layer daisyui.l1.l2 {
+    @apply p-[0.3125rem];
+    --size: calc(var(--size-selector, 0.25rem) * 7);
+  }
+}
+
+.checkbox-xl {
+  @layer daisyui.l1.l2 {
+    @apply p-[0.375rem];
+    --size: calc(var(--size-selector, 0.25rem) * 8);
+  }
+}