@macroui/macroui 1.0.31 → 4.0.1

package/src/components/rating.css

@@ -0,0 +1,114 @@
+.rating {
+  @layer daisyui.l1.l2.l3 {
+    @apply relative inline-flex align-middle;
+
+    & input {
+      border: none;
+      @apply appearance-none;
+    }
+
+    :where(*) {
+      @apply bg-base-content h-6 w-6 rounded-none opacity-20;
+      @media (prefers-reduced-motion: no-preference) {
+        animation: rating 0.25s ease-out;
+      }
+      &:is(input) {
+        @apply cursor-pointer;
+      }
+    }
+
+    & .rating-hidden {
+      @apply w-2 bg-transparent;
+    }
+
+    input[type="radio"]:checked {
+      background-image: none;
+    }
+
+    * {
+      &:checked,
+      &[aria-checked="true"],
+      &[aria-current="true"],
+      &:has(~ *:checked, ~ *[aria-checked="true"], ~ *[aria-current="true"]) {
+        @apply opacity-100;
+      }
+
+      &:focus-visible {
+        scale: 1.1;
+        @media (prefers-reduced-motion: no-preference) {
+          transition: scale 0.2s ease-out;
+        }
+      }
+    }
+
+    & *:active:focus {
+      animation: none;
+    }
+
+    & *:active:focus {
+      scale: 1.1;
+    }
+  }
+
+  @layer daisyui.l1.l2 {
+    &.rating-xs :where(*:not(.rating-hidden)) {
+      @apply size-4;
+    }
+
+    &.rating-sm :where(*:not(.rating-hidden)) {
+      @apply size-5;
+    }
+
+    &.rating-md :where(*:not(.rating-hidden)) {
+      @apply size-6;
+    }
+
+    &.rating-lg :where(*:not(.rating-hidden)) {
+      @apply size-7;
+    }
+
+    &.rating-xl :where(*:not(.rating-hidden)) {
+      @apply size-8;
+    }
+  }
+}
+
+.rating-half {
+  @layer daisyui.l1.l2 {
+    :where(*:not(.rating-hidden)) {
+      @apply w-3;
+    }
+  }
+}
+
+.rating-half {
+  @layer daisyui.l1.l2 {
+    &.rating-xs *:not(.rating-hidden) {
+      @apply w-2;
+    }
+
+    &.rating-sm *:not(.rating-hidden) {
+      @apply w-2.5;
+    }
+
+    &.rating-md *:not(.rating-hidden) {
+      @apply w-3;
+    }
+
+    &.rating-lg *:not(.rating-hidden) {
+      @apply w-[.875rem];
+    }
+
+    &.rating-xl *:not(.rating-hidden) {
+      @apply w-4;
+    }
+  }
+}
+
+@keyframes rating {
+  0%,
+  40% {
+    scale: 1.1;
+    filter: brightness(1.05) contrast(1.05);
+  }
+}

package/src/components/select.css

@@ -0,0 +1,284 @@
+.select {
+  @layer daisyui.l1.l2.l3 {
+    border: var(--border) solid #0000;
+    @apply bg-base-100 relative inline-flex shrink appearance-none items-center gap-1.5 ps-3 pe-7 align-middle;
+    width: clamp(3rem, 20rem, 100%);
+    height: var(--size);
+    font-size: 0.875rem;
+    touch-action: manipulation;
+    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-image:
+      linear-gradient(45deg, #0000 50%, currentColor 50%),
+      linear-gradient(135deg, currentColor 50%, #0000 50%);
+    background-position:
+      calc(100% - 20px) calc(1px + 50%),
+      calc(100% - 16.1px) calc(1px + 50%);
+    background-size:
+      4px 4px,
+      4px 4px;
+    background-repeat: no-repeat;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    box-shadow:
+      0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset,
+      0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
+    border-color: var(--input-color);
+    --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
+    --size: calc(var(--size-field, 0.25rem) * 10);
+    [dir="rtl"] & {
+      background-position:
+        calc(0% + 12px) calc(1px + 50%),
+        calc(0% + 16px) calc(1px + 50%);
+    }
+    &[multiple] {
+      @apply h-auto overflow-auto py-3 pe-3;
+      background-image: none;
+    }
+    select {
+      @apply -ms-3 -me-7 w-[calc(100%+2.75rem)] appearance-none ps-3 pe-7;
+      height: calc(100% - calc(var(--border) * 2));
+      align-items: center;
+      background: inherit;
+      border-radius: inherit;
+      border-style: none;
+      &:focus,
+      &:focus-within {
+        @apply outline-hidden;
+      }
+      &:not(:last-child) {
+        @apply -me-5.5;
+        background-image: none;
+      }
+    }
+
+    &:focus,
+    &:focus-within {
+      --input-color: var(--color-base-content);
+      box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
+      outline: 2px solid var(--input-color);
+      outline-offset: 2px;
+      isolation: isolate;
+    }
+
+    &:has(> select[disabled]),
+    &:is(:disabled, [disabled]),
+    fieldset:disabled & {
+      @apply border-base-200 bg-base-200 placeholder-base-content text-base-content/40 placeholder-base-content/20 cursor-not-allowed;
+    }
+
+    &:has(> select[disabled]) > select[disabled] {
+      @apply cursor-not-allowed;
+    }
+    &,
+    & select {
+      @supports (appearance: base-select) {
+        appearance: base-select;
+      }
+      &::picker(select) {
+        color: inherit;
+        max-height: min(24rem, 70dvh);
+        margin-inline: 0.5rem;
+        translate: -0.5rem 0;
+        border: var(--border) solid var(--color-base-200);
+        @apply rounded-box my-2 p-2;
+        background-color: inherit;
+        box-shadow: 0 2px calc(var(--depth) * 3px) -2px oklch(0% 0 0/0.2);
+        box-shadow:
+          0 20px 25px -5px rgb(0 0 0 / calc(var(--depth) * 0.1)),
+          0 8px 10px -6px rgb(0 0 0 / calc(var(--depth) * 0.1));
+      }
+      @supports (appearance: base-select) {
+        &::picker(select) {
+          appearance: base-select;
+        }
+      }
+      &::picker-icon {
+        @apply hidden;
+      }
+      /* option::checkmark {
+      @apply hidden;
+    } */
+      optgroup {
+        @apply pt-[0.5em];
+        option {
+          &:nth-child(1) {
+            @apply mt-[0.5em];
+          }
+        }
+      }
+      option {
+        @apply rounded-field px-3 py-1.5;
+        transition-property: color, background-color;
+        transition-duration: 0.2s;
+        transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+        white-space: normal;
+        &:not(:disabled) {
+          &:hover,
+          &:focus-visible {
+            @apply bg-base-content/10 cursor-pointer outline-hidden;
+          }
+          &:active {
+            @apply bg-neutral text-neutral-content;
+            box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--color-neutral);
+          }
+        }
+      }
+    }
+    [dir="rtl"] & {
+      &::picker(select),
+      select::picker(select) {
+        translate: 0.5rem 0;
+      }
+    }
+  }
+}
+
+.select-ghost {
+  @layer daisyui.l1.l2 {
+    @apply bg-transparent;
+    transition: background-color 0.2s;
+    box-shadow: none;
+    border-color: #0000;
+
+    &:focus,
+    &:focus-within {
+      @apply text-base-content bg-base-100;
+      border-color: #0000;
+      box-shadow: none;
+    }
+  }
+}
+
+.select-neutral {
+  @layer daisyui.l1.l2 {
+    &,
+    &:focus,
+    &:focus-within {
+      --input-color: var(--color-neutral);
+    }
+  }
+}
+
+.select-primary {
+  @layer daisyui.l1.l2 {
+    &,
+    &:focus,
+    &:focus-within {
+      --input-color: var(--color-primary);
+    }
+  }
+}
+
+.select-secondary {
+  @layer daisyui.l1.l2 {
+    &,
+    &:focus,
+    &:focus-within {
+      --input-color: var(--color-secondary);
+    }
+  }
+}
+
+.select-accent {
+  @layer daisyui.l1.l2 {
+    &,
+    &:focus,
+    &:focus-within {
+      --input-color: var(--color-accent);
+    }
+  }
+}
+
+.select-info {
+  @layer daisyui.l1.l2 {
+    &,
+    &:focus,
+    &:focus-within {
+      --input-color: var(--color-info);
+    }
+  }
+}
+
+.select-success {
+  @layer daisyui.l1.l2 {
+    &,
+    &:focus,
+    &:focus-within {
+      --input-color: var(--color-success);
+    }
+  }
+}
+
+.select-warning {
+  @layer daisyui.l1.l2 {
+    &,
+    &:focus,
+    &:focus-within {
+      --input-color: var(--color-warning);
+    }
+  }
+}
+
+.select-error {
+  @layer daisyui.l1.l2 {
+    &,
+    &:focus,
+    &:focus-within {
+      --input-color: var(--color-error);
+    }
+  }
+}
+
+.select-xs {
+  @layer daisyui.l1.l2 {
+    --size: calc(var(--size-field, 0.25rem) * 6);
+    font-size: 0.6875rem;
+    option {
+      @apply px-2 py-1;
+    }
+  }
+}
+
+.select-sm {
+  @layer daisyui.l1.l2 {
+    --size: calc(var(--size-field, 0.25rem) * 8);
+    font-size: 0.75rem;
+    option {
+      @apply px-2.5 py-1;
+    }
+  }
+}
+
+.select-md {
+  @layer daisyui.l1.l2 {
+    --size: calc(var(--size-field, 0.25rem) * 10);
+    font-size: 0.875rem;
+    option {
+      @apply px-3 py-1.5;
+    }
+  }
+}
+
+.select-lg {
+  @layer daisyui.l1.l2 {
+    --size: calc(var(--size-field, 0.25rem) * 12);
+    font-size: 1.125rem;
+    option {
+      @apply px-4 py-1.5;
+    }
+  }
+}
+
+.select-xl {
+  @layer daisyui.l1.l2 {
+    --size: calc(var(--size-field, 0.25rem) * 14);
+    font-size: 1.375rem;
+    option {
+      @apply px-5 py-1.5;
+    }
+  }
+}

package/src/components/skeleton.css

@@ -0,0 +1,41 @@
+.skeleton {
+  @layer daisyui.l1.l2.l3 {
+    @apply bg-base-300 rounded-box motion-reduce:[transition-duration:15s];
+    will-change: background-position;
+    background-image: linear-gradient(
+      105deg,
+      #0000 0% 40%,
+      var(--color-base-100) 50%,
+      #0000 60% 100%
+    );
+    background-size: 200% auto;
+    background-position-x: -50%;
+
+    @media (prefers-reduced-motion: no-preference) {
+      animation: skeleton 1.8s ease-in-out infinite;
+    }
+  }
+}
+.skeleton-text {
+  @layer daisyui.l1.l2 {
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+    background-image: linear-gradient(
+      105deg,
+      color-mix(in oklab, var(--color-base-content) 20%, transparent) 0% 40%,
+      var(--color-base-content) 50%,
+      color-mix(in oklab, var(--color-base-content) 20%, transparent) 60% 100%
+    );
+  }
+}
+
+@keyframes skeleton {
+  0% {
+    background-position: 150%;
+  }
+
+  100% {
+    background-position: -50%;
+  }
+}

package/src/components/stack.css

@@ -0,0 +1,80 @@
+.stack {
+  @layer daisyui.l1.l2.l3 {
+    @apply inline-grid;
+    grid-template-columns: 3px 4px 1fr 4px 3px;
+    grid-template-rows: 3px 4px 1fr 4px 3px;
+
+    & > * {
+      @apply h-full w-full;
+      &:nth-child(n + 2) {
+        @apply w-full opacity-70;
+      }
+      &:nth-child(2) {
+        @apply z-2 opacity-90;
+      }
+      &:nth-child(1) {
+        @apply z-3 w-full;
+      }
+    }
+  }
+
+  @layer daisyui.l1.l2 {
+    &,
+    &.stack-bottom {
+      > * {
+        grid-column: 3 / 4;
+        grid-row: 3 / 6;
+        &:nth-child(2) {
+          grid-column: 2 / 5;
+          grid-row: 2 / 5;
+        }
+        &:nth-child(1) {
+          grid-column: 1 / 6;
+          grid-row: 1 / 4;
+        }
+      }
+    }
+    &.stack-top {
+      > * {
+        grid-column: 3 / 4;
+        grid-row: 1 / 4;
+        &:nth-child(2) {
+          grid-column: 2 / 5;
+          grid-row: 2 / 5;
+        }
+        &:nth-child(1) {
+          grid-column: 1 / 6;
+          grid-row: 3 / 6;
+        }
+      }
+    }
+    &.stack-start {
+      > * {
+        grid-column: 1 / 4;
+        grid-row: 3 / 4;
+        &:nth-child(2) {
+          grid-column: 2 / 5;
+          grid-row: 2 / 5;
+        }
+        &:nth-child(1) {
+          grid-column: 3 / 6;
+          grid-row: 1 / 6;
+        }
+      }
+    }
+    &.stack-end {
+      > * {
+        grid-column: 3 / 6;
+        grid-row: 3 / 4;
+        &:nth-child(2) {
+          grid-column: 2 / 5;
+          grid-row: 2 / 5;
+        }
+        &:nth-child(1) {
+          grid-column: 1 / 4;
+          grid-row: 1 / 6;
+        }
+      }
+    }
+  }
+}

package/src/components/stat.css

@@ -0,0 +1,73 @@
+.stats {
+  @layer daisyui.l1.l2.l3 {
+    @apply rounded-box relative inline-grid grid-flow-col overflow-x-auto;
+  }
+}
+
+.stat {
+  @layer daisyui.l1.l2.l3 {
+    @apply inline-grid w-full gap-x-4 px-6 py-4;
+    grid-template-columns: repeat(1, 1fr);
+
+    &:not(:last-child) {
+      border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000);
+      border-block-end: none;
+    }
+  }
+}
+
+.stat-figure {
+  @layer daisyui.l1.l2.l3 {
+    @apply col-start-2 row-span-3 row-start-1 place-self-center justify-self-end;
+  }
+}
+
+.stat-title {
+  @layer daisyui.l1.l2.l3 {
+    @apply text-base-content/60 col-start-1 whitespace-nowrap;
+    font-size: 0.75rem;
+  }
+}
+
+.stat-value {
+  @layer daisyui.l1.l2.l3 {
+    @apply col-start-1 whitespace-nowrap;
+    font-size: 2rem;
+    font-weight: 800;
+  }
+}
+
+.stat-desc {
+  @layer daisyui.l1.l2.l3 {
+    @apply text-base-content/60 col-start-1 whitespace-nowrap;
+    font-size: 0.75rem;
+  }
+}
+
+.stat-actions {
+  @layer daisyui.l1.l2.l3 {
+    @apply col-start-1 whitespace-nowrap;
+  }
+}
+
+.stats-horizontal {
+  @layer daisyui.l1.l2 {
+    @apply grid-flow-col overflow-x-auto;
+
+    .stat:not(:last-child) {
+      border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000);
+      border-block-end: none;
+    }
+  }
+}
+
+.stats-vertical {
+  @layer daisyui.l1.l2 {
+    @apply grid-flow-row overflow-y-auto;
+
+    .stat:not(:last-child) {
+      border-inline-end: none;
+      border-block-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000);
+    }
+  }
+}

package/src/components/status.css

@@ -0,0 +1,92 @@
+.status {
+  @layer daisyui.l1.l2.l3 {
+    @apply bg-base-content/20 rounded-selector inline-block aspect-square size-2 bg-center bg-no-repeat align-middle text-black/30;
+    background-image: radial-gradient(
+      circle at 35% 30%,
+      oklch(1 0 0 / calc(var(--depth) * 0.5)),
+      #0000
+    );
+    box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000);
+  }
+}
+
+.status-primary {
+  @layer daisyui.l1.l2 {
+    @apply bg-primary text-primary;
+  }
+}
+
+.status-secondary {
+  @layer daisyui.l1.l2 {
+    @apply bg-secondary text-secondary;
+  }
+}
+
+.status-accent {
+  @layer daisyui.l1.l2 {
+    @apply bg-accent text-accent;
+  }
+}
+
+.status-neutral {
+  @layer daisyui.l1.l2 {
+    @apply bg-neutral text-neutral;
+  }
+}
+
+.status-info {
+  @layer daisyui.l1.l2 {
+    @apply bg-info text-info;
+    /* background-image: url("data:image/svg+xml,%3Csvg width='1' height='5' fill='white' viewBox='0 0 1 5' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1' fill='white'/%3E%3Crect y='2' width='1' height='3'/%3E%3C/svg%3E%0A"); */
+  }
+}
+
+.status-success {
+  @layer daisyui.l1.l2 {
+    @apply bg-success text-success;
+  }
+}
+
+.status-warning {
+  @layer daisyui.l1.l2 {
+    @apply bg-warning text-warning;
+    /* background-image: url("data:image/svg+xml,%3Csvg width='1' height='5' fill='white' viewBox='0 0 1 5' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='4' width='1' height='1' /%3E%3Crect width='1' height='3'/%3E%3C/svg%3E%0A"); */
+  }
+}
+
+.status-error {
+  @layer daisyui.l1.l2 {
+    @apply bg-error text-error;
+    /* background-image: url("data:image/svg+xml,%3Csvg width='4' height='1' fill='white' viewBox='0 0 4 1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='4' height='1'/%3E%3C/svg%3E%0A"); */
+  }
+}
+
+.status-xs {
+  @layer daisyui.l1.l2 {
+    @apply size-0.5;
+  }
+}
+
+.status-sm {
+  @layer daisyui.l1.l2 {
+    @apply size-1;
+  }
+}
+
+.status-md {
+  @layer daisyui.l1.l2 {
+    @apply size-2;
+  }
+}
+
+.status-lg {
+  @layer daisyui.l1.l2 {
+    @apply size-3;
+  }
+}
+
+.status-xl {
+  @layer daisyui.l1.l2 {
+    @apply size-4;
+  }
+}