@macroui/macroui 4.0.0 → 4.0.2

package/src/components/fileinput.css

@@ -0,0 +1,265 @@
+.file-input {
+  @layer daisyui.l1.l2.l3 {
+    cursor: pointer;
+    border: var(--border) solid #0000;
+    @apply bg-base-100 inline-flex cursor-pointer appearance-none items-center align-middle select-none;
+    width: clamp(3rem, 20rem, 100%);
+    height: var(--size);
+    padding-inline-end: 0.75rem;
+    font-size: 0.875rem;
+    line-height: 2;
+    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));
+    border-color: var(--input-color);
+    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;
+    --size: calc(var(--size-field, 0.25rem) * 10);
+    --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
+    &::file-selector-button {
+      @apply me-4 cursor-pointer px-4 select-none;
+      height: calc(100% + var(--border) * 2);
+      margin-block: calc(var(--border) * -1);
+      margin-inline-start: calc(var(--border) * -1);
+      font-size: 0.875rem;
+      color: var(--btn-fg);
+      border-width: var(--border);
+      border-style: solid;
+      border-color: var(--btn-border);
+      border-start-start-radius: calc(var(--join-ss, var(--radius-field) - var(--border)));
+      border-end-start-radius: calc(var(--join-es, var(--radius-field) - var(--border)));
+      font-weight: 600;
+      background-color: var(--btn-bg);
+      background-size: calc(var(--noise) * 100%);
+      background-image: var(--btn-noise);
+      text-shadow: 0 0.5px oklch(1 0 0 / calc(var(--depth) * 0.15));
+      box-shadow:
+        0 0.5px 0 0.5px
+          color-mix(
+            in oklab,
+            color-mix(in oklab, white 30%, var(--btn-bg)) calc(var(--depth) * 20%),
+            #0000
+          )
+          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-border: color-mix(in oklab, var(--btn-bg), #000 5%);
+      --btn-shadow:
+        0 3px 2px -2px color-mix(in oklab, var(--btn-bg) 30%, #0000),
+        0 4px 3px -2px color-mix(in oklab, var(--btn-bg) 30%, #0000);
+      --btn-noise: var(--fx-noise);
+    }
+
+    &:focus {
+      --input-color: var(--color-base-content);
+      box-shadow: 0 1px color-mix(in oklab, var(--input-color) 10%, #0000);
+      outline: 2px solid var(--input-color);
+      outline-offset: 2px;
+      isolation: isolate;
+    }
+    &:has(> input[disabled]),
+    &:is(:disabled, [disabled]) {
+      @apply border-base-200 bg-base-200 placeholder-base-content placeholder-base-content/20 cursor-not-allowed;
+      box-shadow: none;
+      color: color-mix(in oklch, var(--color-base-content) 20%, #0000);
+
+      &::file-selector-button {
+        @apply border-base-200 bg-base-200 cursor-not-allowed;
+        --btn-border: #0000;
+        --btn-noise: none;
+        --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
+      }
+    }
+  }
+}
+.file-input-ghost {
+  @layer daisyui.l1.l2 {
+    @apply bg-transparent;
+    transition: background-color 0.2s;
+    box-shadow: none;
+    border-color: #0000;
+    &::file-selector-button {
+      @apply ms-0 me-4 h-full cursor-pointer px-4 select-none;
+      margin-block: 0;
+      border-start-end-radius: calc(var(--join-ss, var(--radius-field) - var(--border)));
+      border-end-end-radius: calc(var(--join-es, var(--radius-field) - var(--border)));
+    }
+
+    &:focus,
+    &:focus-within {
+      @apply text-base-content bg-base-100;
+      border-color: #0000;
+      box-shadow: none;
+    }
+  }
+}
+
+.file-input-neutral {
+  @layer daisyui.l1.l2 {
+    --btn-color: var(--color-neutral);
+    &::file-selector-button {
+      color: var(--color-neutral-content);
+    }
+    &,
+    &:focus,
+    &:focus-within {
+      --input-color: var(--color-neutral);
+    }
+  }
+}
+
+.file-input-primary {
+  @layer daisyui.l1.l2 {
+    --btn-color: var(--color-primary);
+    &::file-selector-button {
+      color: var(--color-primary-content);
+    }
+    &,
+    &:focus,
+    &:focus-within {
+      --input-color: var(--color-primary);
+    }
+  }
+}
+
+.file-input-secondary {
+  @layer daisyui.l1.l2 {
+    --btn-color: var(--color-secondary);
+    &::file-selector-button {
+      color: var(--color-secondary-content);
+    }
+    &,
+    &:focus,
+    &:focus-within {
+      --input-color: var(--color-secondary);
+    }
+  }
+}
+
+.file-input-accent {
+  @layer daisyui.l1.l2 {
+    --btn-color: var(--color-accent);
+    &::file-selector-button {
+      color: var(--color-accent-content);
+    }
+    &,
+    &:focus,
+    &:focus-within {
+      --input-color: var(--color-accent);
+    }
+  }
+}
+
+.file-input-info {
+  @layer daisyui.l1.l2 {
+    --btn-color: var(--color-info);
+    &::file-selector-button {
+      color: var(--color-info-content);
+    }
+    &,
+    &:focus,
+    &:focus-within {
+      --input-color: var(--color-info);
+    }
+  }
+}
+.file-input-success {
+  @layer daisyui.l1.l2 {
+    --btn-color: var(--color-success);
+    &::file-selector-button {
+      color: var(--color-success-content);
+    }
+    &,
+    &:focus,
+    &:focus-within {
+      --input-color: var(--color-success);
+    }
+  }
+}
+
+.file-input-warning {
+  @layer daisyui.l1.l2 {
+    --btn-color: var(--color-warning);
+    &::file-selector-button {
+      color: var(--color-warning-content);
+    }
+    &,
+    &:focus,
+    &:focus-within {
+      --input-color: var(--color-warning);
+    }
+  }
+}
+
+.file-input-error {
+  @layer daisyui.l1.l2 {
+    --btn-color: var(--color-error);
+    &::file-selector-button {
+      color: var(--color-error-content);
+    }
+    &,
+    &:focus,
+    &:focus-within {
+      --input-color: var(--color-error);
+    }
+  }
+}
+.file-input-xs {
+  @layer daisyui.l1.l2 {
+    --size: calc(var(--size-field, 0.25rem) * 6);
+    font-size: 0.6875rem;
+    line-height: 1rem;
+    &::file-selector-button {
+      font-size: 0.6875rem;
+    }
+  }
+}
+
+.file-input-sm {
+  @layer daisyui.l1.l2 {
+    --size: calc(var(--size-field, 0.25rem) * 8);
+    font-size: 0.75rem;
+    line-height: 1.5rem;
+    &::file-selector-button {
+      font-size: 0.75rem;
+    }
+  }
+}
+
+.file-input-md {
+  @layer daisyui.l1.l2 {
+    --size: calc(var(--size-field, 0.25rem) * 10);
+    font-size: 0.875rem;
+    line-height: 2;
+    &::file-selector-button {
+      font-size: 0.875rem;
+    }
+  }
+}
+
+.file-input-lg {
+  @layer daisyui.l1.l2 {
+    --size: calc(var(--size-field, 0.25rem) * 12);
+    font-size: 1.125rem;
+    line-height: 2.5rem;
+    &::file-selector-button {
+      font-size: 1.125rem;
+    }
+  }
+}
+
+.file-input-xl {
+  @layer daisyui.l1.l2 {
+    @apply pe-6;
+    --size: calc(var(--size-field, 0.25rem) * 14);
+    font-size: 1.125rem;
+    line-height: 3rem;
+    &::file-selector-button {
+      font-size: 1.375rem;
+    }
+  }
+}

package/src/components/filter.css

@@ -0,0 +1,42 @@
+.filter {
+  @layer daisyui.l1.l2.l3 {
+    @apply flex flex-wrap;
+    input[type="radio"] {
+      @apply w-auto;
+    }
+    input {
+      @apply overflow-hidden opacity-100;
+      scale: 1;
+      transition:
+        margin 0.1s,
+        opacity 0.3s,
+        padding 0.3s,
+        border-width 0.1s;
+      &:not(:last-child) {
+        @apply me-1;
+      }
+      &.filter-reset {
+        @apply aspect-square;
+        &::after {
+          --tw-content: "×";
+          content: var(--tw-content);
+        }
+      }
+    }
+    &:not(:has(input:checked:not(.filter-reset))) {
+      .filter-reset,
+      input[type="reset"] {
+        scale: 0;
+        border-width: 0;
+        @apply mx-0 w-0 px-0 opacity-0;
+      }
+    }
+    &:has(input:checked:not(.filter-reset)) {
+      input:not(:checked, .filter-reset, input[type="reset"]) {
+        scale: 0;
+        border-width: 0;
+        @apply mx-0 w-0 px-0 opacity-0;
+      }
+    }
+  }
+}

package/src/components/footer.css

@@ -0,0 +1,45 @@
+.footer {
+  @layer daisyui.l1.l2.l3 {
+    @apply grid w-full grid-flow-row place-items-start gap-x-4 gap-y-10;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+
+    & > * {
+      @apply grid place-items-start gap-2;
+    }
+
+    &.footer-center {
+      @apply grid-flow-col-dense place-items-center text-center;
+
+      & > * {
+        @apply place-items-center;
+      }
+    }
+  }
+}
+.footer-title {
+  @layer daisyui.l1.l2.l3 {
+    @apply mb-2 uppercase opacity-60;
+    font-weight: 600;
+  }
+}
+
+.footer-horizontal {
+  @layer daisyui.l1.l2 {
+    @apply grid-flow-col;
+
+    &.footer-center {
+      @apply grid-flow-row-dense;
+    }
+  }
+}
+
+.footer-vertical {
+  @layer daisyui.l1.l2 {
+    @apply grid-flow-row;
+
+    &.footer-center {
+      @apply grid-flow-col-dense;
+    }
+  }
+}

package/src/components/hero.css

@@ -0,0 +1,21 @@
+.hero {
+  @layer daisyui.l1.l2.l3 {
+    @apply grid w-full place-items-center bg-cover bg-center;
+
+    & > * {
+      @apply col-start-1 row-start-1;
+    }
+  }
+}
+
+.hero-overlay {
+  @layer daisyui.l1.l2.l3 {
+    @apply bg-neutral/50 col-start-1 row-start-1 h-full w-full;
+  }
+}
+
+.hero-content {
+  @layer daisyui.l1.l2.l3 {
+    @apply isolate flex max-w-[80rem] items-center justify-center gap-4 p-4;
+  }
+}

package/src/components/hover3d.css

@@ -0,0 +1,128 @@
+.hover-3d {
+  @layer daisyui.l1.l2.l3 {
+    display: inline-grid;
+    perspective: 75rem;
+    --transform: 0, 0;
+    --shine: 100% 100%;
+    --shadow: 0rem 0rem 0rem;
+    --ease: linear(0, 0.931 13.8%, 1.196 21.4%, 1.343 29.8%, 1.378 36%, 1.365 43.2%, 1.059 78%, 1);
+
+    filter: drop-shadow(var(--shadow) 0.1rem #00000003) drop-shadow(var(--shadow) 0.2rem #00000003)
+      drop-shadow(var(--shadow) 0.3rem #00000003) drop-shadow(var(--shadow) 0.4rem #00000003);
+    transition: filter ease-out 400ms;
+    > :nth-child(n + 2) {
+      isolation: isolate;
+      z-index: 1;
+    }
+    > :first-child {
+      overflow: hidden;
+      grid-area: 1/1/4/4;
+      transform: rotate3d(var(--transform), 0, 10deg);
+      transition:
+        transform var(--ease) 500ms,
+        scale var(--ease) 500ms,
+        outline-color ease-out 500ms;
+      outline: 0.5px solid #0000;
+      outline-offset: -1px;
+      &:before {
+        @apply size-1/3;
+        content: "";
+        pointer-events: none;
+        position: absolute;
+        z-index: 1;
+        scale: 500%;
+        opacity: 0;
+        filter: blur(0.75rem);
+        background-image: radial-gradient(circle at 50%, #fff3 10%, transparent 50%);
+        translate: var(--shine);
+        transition:
+          translate ease-out 400ms,
+          opacity ease-out 400ms;
+      }
+    }
+    &:hover {
+      --ease: linear(0, 0.708 15.2%, 0.927 23.6%, 1.067 33%, 1.12 41%, 1.13 50.2%, 1.019 83.2%, 1);
+      & > :first-child {
+        outline-color: #fff1;
+        &:before,
+        &:after {
+          opacity: 1;
+        }
+      }
+    }
+    > :nth-child(n + 2) {
+      scale: 1.2;
+    }
+    > :nth-child(2) {
+      grid-area: 1/1/2/2;
+    }
+    > :nth-child(3) {
+      grid-area: 1/2/2/3;
+    }
+    > :nth-child(4) {
+      grid-area: 1/3/2/4;
+    }
+    > :nth-child(5) {
+      grid-area: 2/1/3/2;
+    }
+    > :nth-child(6) {
+      grid-area: 2/3/3/4;
+    }
+    > :nth-child(7) {
+      grid-area: 3/1/4/2;
+    }
+    > :nth-child(8) {
+      grid-area: 3/2/4/3;
+    }
+
+    > :nth-child(9) {
+      grid-area: 3/3/4/4;
+    }
+    &:hover {
+      > :first-child {
+        scale: 1.05;
+      }
+    }
+
+    &:has(> :nth-child(2):hover) {
+      --transform: -1, 1;
+      --shine: 0% 0%;
+      --shadow: -0.5rem -0.5rem;
+    }
+    &:has(> :nth-child(3):hover) {
+      --transform: -1, 0;
+      --shine: 100% 0%;
+      --shadow: 0rem -0.5rem;
+    }
+    &:has(> :nth-child(4):hover) {
+      --transform: -1, -1;
+      --shine: 200% 0%;
+      --shadow: 0.5rem -0.5rem;
+    }
+    &:has(> :nth-child(5):hover) {
+      --transform: 0, 1;
+      --shine: 0% 100%;
+      --shadow: -0.5rem 0rem;
+    }
+    &:has(> :nth-child(6):hover) {
+      --transform: 0, -1;
+      --shine: 200% 100%;
+      --shadow: 0.5rem 0rem;
+    }
+    &:has(> :nth-child(7):hover) {
+      --transform: 1, 1;
+      --shine: 0% 200%;
+      --shadow: -0.5rem 0.5rem;
+    }
+    &:has(> :nth-child(8):hover) {
+      --transform: 1, 0;
+      --shine: 100% 200%;
+      --shadow: 0rem 0.5rem;
+    }
+    &:has(> :nth-child(9):hover) {
+      --transform: 1, -1;
+      --shine: 200% 200%;
+      --shadow: 0.5rem 0.5rem;
+    }
+  }
+}

package/src/components/hovergallery.css

@@ -0,0 +1,87 @@
+.hover-gallery {
+  @layer daisyui.l1.l2.l3 {
+    --items: 1;
+    grid-template-columns: repeat(var(--items), 1fr);
+    width: 100%;
+    gap: 1px;
+    overflow: hidden;
+    &,
+    &:is(figure) {
+      display: inline-grid;
+    }
+    &:has(> :nth-child(3)) {
+      --items: 2;
+    }
+    &:has(> :nth-child(4)) {
+      --items: 3;
+    }
+    &:has(> :nth-child(5)) {
+      --items: 4;
+    }
+    &:has(> :nth-child(6)) {
+      --items: 5;
+    }
+    &:has(> :nth-child(7)) {
+      --items: 6;
+    }
+    &:has(> :nth-child(8)) {
+      --items: 7;
+    }
+    &:has(> :nth-child(9)) {
+      --items: 8;
+    }
+    &:has(> :nth-child(10)) {
+      --items: 9;
+    }
+    > * {
+      opacity: 0;
+      height: 100%;
+      grid-row: 1;
+      object-fit: cover;
+      width: 100%;
+      &:nth-child(1) {
+        grid-column: 1 / -1;
+        opacity: 1;
+      }
+      &:nth-child(2) {
+        grid-column: 1;
+      }
+      &:nth-child(3) {
+        grid-column: 2;
+      }
+      &:nth-child(4) {
+        grid-column: 3;
+      }
+      &:nth-child(5) {
+        grid-column: 4;
+      }
+      &:nth-child(6) {
+        grid-column: 5;
+      }
+      &:nth-child(7) {
+        grid-column: 6;
+      }
+      &:nth-child(8) {
+        grid-column: 7;
+      }
+      &:nth-child(9) {
+        grid-column: 8;
+      }
+      &:nth-child(10) {
+        grid-column: 9;
+      }
+      &:nth-child(n + 11) {
+        display: none;
+      }
+    }
+    > *:hover {
+      grid-column: 1 / -1;
+      opacity: 1;
+    }
+    &:has(*:hover) {
+      > :nth-child(1) {
+        @apply hidden;
+      }
+    }
+  }
+}

package/src/components/indicator.css

@@ -0,0 +1,76 @@
+.indicator {
+  @layer daisyui.l1.l2.l3 {
+    @apply relative inline-flex;
+    width: max-content;
+
+    :where(.indicator-item) {
+      z-index: 1;
+      @apply absolute whitespace-nowrap;
+      top: var(--indicator-t, 0);
+      bottom: var(--indicator-b, auto);
+      left: var(--indicator-s, auto);
+      right: var(--indicator-e, 0);
+      translate: var(--indicator-x, 50%) var(--indicator-y, -50%);
+    }
+  }
+}
+.indicator-start {
+  @layer daisyui.l1.l2 {
+    --indicator-s: 0;
+    --indicator-e: auto;
+    --indicator-x: -50%;
+    [dir="rtl"] & {
+      --indicator-s: auto;
+      --indicator-e: 0;
+      --indicator-x: 50%;
+    }
+  }
+}
+
+.indicator-center {
+  @layer daisyui.l1.l2 {
+    --indicator-s: 50%;
+    --indicator-e: 50%;
+    --indicator-x: -50%;
+    [dir="rtl"] & {
+      --indicator-x: 50%;
+    }
+  }
+}
+
+.indicator-end {
+  @layer daisyui.l1.l2 {
+    --indicator-s: auto;
+    --indicator-e: 0;
+    --indicator-x: 50%;
+    [dir="rtl"] & {
+      --indicator-s: 0;
+      --indicator-e: auto;
+      --indicator-x: -50%;
+    }
+  }
+}
+
+.indicator-bottom {
+  @layer daisyui.l1.l2 {
+    --indicator-t: auto;
+    --indicator-b: 0;
+    --indicator-y: 50%;
+  }
+}
+
+.indicator-middle {
+  @layer daisyui.l1.l2 {
+    --indicator-t: 50%;
+    --indicator-b: 50%;
+    --indicator-y: -50%;
+  }
+}
+
+.indicator-top {
+  @layer daisyui.l1.l2 {
+    --indicator-t: 0;
+    --indicator-b: auto;
+    --indicator-y: -50%;
+  }
+}