feat: sheet component

packages/daisyui/src/components/sheet.css

@@ -0,0 +1,226 @@
+.sheet {
+  @layer daisyui.l1.l2.l3 {
+    @apply pointer-events-none fixed z-50 overflow-clip;
+
+    --sheet-tr: 0.3s cubic-bezier(0.5, 1.2, 0.3, 1);
+
+    inset-block-start: anchor(top, 0);
+    inset-inline-start: anchor(start, 0);
+    width: anchor-size(width, 100vw);
+    height: anchor-size(height, 100lvh);
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: overlay var(--sheet-tr) allow-discrete;
+    }
+
+    &:has(> [type="checkbox"]:checked) {
+      @apply z-100;
+    }
+
+    &[popover] {
+      @apply inline-flex bg-transparent;
+    }
+
+    > [type="checkbox"] {
+      @apply fixed h-0 w-0 appearance-none opacity-0;
+
+      :has(&:focus-visible) label.sheet-button {
+        outline: 2px solid;
+        outline-offset: 2px;
+      }
+
+      &:focus-visible ~ label.sheet-handle,
+      &:focus-visible ~ * label.sheet-handle {
+        outline: 2px solid;
+        outline-offset: -2px;
+      }
+    }
+  }
+}
+
+.sheet-backdrop {
+  @layer daisyui.l1.l2.l3 {
+    @apply pointer-events-none invisible absolute inset-0 opacity-0;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition:
+        visibility var(--sheet-tr) allow-discrete,
+        opacity var(--sheet-tr) allow-discrete;
+    }
+
+    input:checked ~ &,
+    :popover-open > & {
+      @apply pointer-events-auto visible opacity-100;
+
+      :root:has(&) {
+        /* from here */
+        --page-has-backdrop: 1;
+        --page-overflow: hidden;
+        --page-scroll-bg: var(--page-scroll-bg-on);
+        --page-scroll-gutter: stable;
+        --page-scroll-transition: var(--page-scroll-transition-on);
+        animation: set-page-has-scroll forwards;
+        animation-timeline: scroll();
+        /* to here t be replaced with below line when #4354 is merged */
+        /* --page-scroll-lock: ; */
+      }
+    }
+  }
+}
+
+.sheet-content {
+  @layer daisyui.l1.l2.l3 {
+    @apply fixed flex translate-0 flex-col overflow-clip;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: translate var(--sheet-tr);
+    }
+
+    > * {
+      @apply pointer-events-auto hidden;
+
+      @media (prefers-reduced-motion: no-preference) {
+        transition: display var(--sheet-tr) allow-discrete;
+      }
+    }
+
+    input:checked ~ & > *,
+    :popover-open > & > * {
+      @apply inline-grid;
+    }
+
+    &:has(.sheet-handle) {
+      --sheet-peek: var(--sheet-handle-size, 1rem);
+    }
+  }
+}
+
+.sheet-handle {
+  @layer daisyui.l1.l2.l3 {
+    @apply absolute inline-grid cursor-pointer p-1;
+
+    &:after {
+      @apply rounded-full bg-base-content/30;
+      content: var(--tw-content, "");
+    }
+  }
+}
+
+.sheet-content-top {
+  @layer daisyui.l1.l2 {
+    @apply top-0 w-full rounded-b-box;
+
+    --tw-translate-y: calc(var(--sheet-peek, 0px) + env(safe-area-inset-top, 0px) - 100%);
+    max-height: 90%;
+
+    input:checked ~ &,
+    :popover-open > & {
+      @apply translate-y-0;
+      padding-block-start: env(safe-area-inset-top, 0px);
+    }
+
+    &:has(.sheet-handle) {
+      @apply pb-(--sheet-peek);
+    }
+
+    .sheet-handle {
+      @apply bottom-0 left-[50%] h-(--sheet-peek) w-20 max-w-full -translate-x-[50%];
+    }
+  }
+}
+
+.sheet-content-bottom {
+  @layer daisyui.l1.l2 {
+    @apply bottom-0 w-full rounded-t-box;
+
+    --tw-translate-y: calc(100% - var(--sheet-peek, 0px) - env(safe-area-inset-bottom, 0px));
+    max-height: 90%;
+
+    input:checked ~ &,
+    :popover-open > & {
+      @apply translate-y-0;
+      padding-block-end: env(safe-area-inset-bottom, 0px);
+    }
+
+    &:has(.sheet-handle) {
+      @apply pt-(--sheet-peek);
+    }
+
+    .sheet-handle {
+      @apply top-0 left-[50%] h-(--sheet-peek) w-20 max-w-full -translate-x-[50%];
+    }
+  }
+}
+
+.sheet-content-start {
+  @layer daisyui.l1.l2 {
+    @apply start-0 h-full rounded-e-box;
+
+    --tw-translate-x: calc(var(--sheet-peek, 0px) + env(safe-area-inset-left, 0px) - 100%);
+    max-width: 90%;
+
+    &:dir(rtl) {
+      --tw-translate-x: calc(100% - var(--sheet-peek, 0px) - env(safe-area-inset-right, 0px));
+    }
+
+    input:checked ~ &,
+    :popover-open > & {
+      @apply translate-x-0;
+      padding-inline-start: env(safe-area-inset-left, 0px);
+
+      &:dir(rtl) {
+        padding-inline-start: env(safe-area-inset-right, 0px);
+      }
+    }
+
+    &:has(.sheet-handle) {
+      @apply pe-(--sheet-peek);
+    }
+
+    .sheet-handle {
+      @apply end-0 top-[50%] h-20 max-h-full w-(--sheet-peek) -translate-y-[50%];
+    }
+  }
+}
+
+.sheet-content-end {
+  @layer daisyui.l1.l2 {
+    @apply end-0 h-full rounded-s-box;
+
+    --tw-translate-x: calc(100% - var(--sheet-peek, 0px) - env(safe-area-inset-right, 0px));
+    max-width: 90%;
+
+    &:dir(rtl) {
+      --tw-translate-x: calc(var(--sheet-peek, 0px) + env(safe-area-inset-left, 0px) - 100%);
+    }
+
+    input:checked ~ &,
+    :popover-open > & {
+      @apply translate-x-0;
+      padding-inline-end: env(safe-area-inset-right, 0px);
+
+      &:dir(rtl) {
+        padding-inline-end: env(safe-area-inset-left, 0px);
+      }
+    }
+
+    &:has(.sheet-handle) {
+      @apply ps-(--sheet-peek);
+    }
+
+    .sheet-handle {
+      @apply start-0 top-[50%] h-20 max-h-full w-(--sheet-peek) -translate-y-[50%];
+    }
+  }
+}
+
+.sheet-anchored {
+  @layer daisyui.l1.l2 {
+    position: absolute;
+    position-anchor: var(--sheet-anchor-name);
+
+    > .sheet-content {
+      position: absolute;
+    }
+  }
+}

packages/docs/src/global.css

@@ -128,6 +128,10 @@
     );
     background-size: 40px 40px;
   }
+  .preview-full-container {
+    @apply -m-4 xl:-my-10 flex items-center justify-center;
+    width: calc(100% + 8 * var(--spacing));
+  }
 }
 
 /* changelog */

packages/docs/src/lib/data/pages.js

@@ -107,6 +107,10 @@ export const pages = [
             name: "Modal",
             href: "/components/modal/",
           },
+          {
+            name: "Sheet",
+            href: "/components/sheet/",
+          },
           {
             name: "Swap",
             href: "/components/swap/",