"use client";

import * as React from "react";
import { MobileDateDrawer } from "./index";

export interface DemoProps {
  accent?: string;
  label?: string;
  caption?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accent = "#38BDF8", label = "Date of birth", caption = "This example works best on mobile." }: DemoProps) {
  const [surface, setSurface] = React.useState<HTMLDivElement | null>(null);
  const [open, setOpen] = React.useState(false);

  // Raise the sheet on its own shortly after the card is visible, and again whenever a control changes.
  React.useEffect(() => {
    if (!surface || getComputedStyle(surface).pointerEvents === "none") return;
    const timer = window.setTimeout(() => setOpen(true), 500);
    return () => window.clearTimeout(timer);
  }, [surface, accent, label, caption]);

  return (
    <div ref={setSurface} className="mx-auto w-full max-w-[380px] px-1">
      <MobileDateDrawer accent={accent} label={label} caption={caption} open={open} onOpenChange={setOpen} />
    </div>
  );
}

1e:T2a2d, 1f:T23a74,

<script setup lang="ts">
import { computed, onBeforeUnmount, ref, watch } from "vue";

const props = withDefaults(
  defineProps<{
    accent?: string;
    label?: string;
    caption?: string;
  }>(),
  { accent: "#38BDF8", label: "Date of birth", caption: "This example works best on mobile." },
);

const WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const SHORT_MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

interface Cell {
  date: Date;
  inMonth: boolean;
  key: string;
}

function isSameDay(a: Date, b: Date) {
  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
}
function addDays(date: Date, amount: number) {
  const next = new Date(date);
  next.setDate(next.getDate() + amount);
  return next;
}
function addMonths(date: Date, amount: number) {
  return new Date(date.getFullYear(), date.getMonth() + amount, 1);
}
function buildMonthGrid(year: number, month: number): Cell[] {
  const first = new Date(year, month, 1);
  const start = addDays(first, -first.getDay());
  return Array.from({ length: 42 }, (_, i) => {
    const date = addDays(start, i);
    return { date, inMonth: date.getMonth() === month, key: `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}` };
  });
}
function formatDate(date: Date) {
  return `${SHORT_MONTHS[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
}
function contrastText(hex: string) {
  const n = parseInt(hex.replace("#", ""), 16);
  const r = (n >> 16) & 255;
  const g = (n >> 8) & 255;
  const b = n & 255;
  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
  return luminance > 0.62 ? "#14100b" : "#ffffff";
}

const today = new Date();
const open = ref(false);
const selected = ref<Date | null>(null);
const view = ref({ year: today.getFullYear(), month: today.getMonth() });
const panel = ref<HTMLElement | null>(null);
const trigger = ref<HTMLButtonElement | null>(null);

const dragging = ref(false);
const offset = ref(0);
let originY = 0;
let heldPointer = -1;

const cells = computed(() => buildMonthGrid(view.value.year, view.value.month));
const selectedLabel = computed(() => (selected.value ? formatDate(selected.value) : "Select date"));
const selectedText = computed(() => contrastText(props.accent));

function show() {
  open.value = true;
}
function hide() {
  if (!open.value) return;
  open.value = false;
  offset.value = 0;
  dragging.value = false;
}
function stepMonth(delta: number) {
  const next = addMonths(new Date(view.value.year, view.value.month, 1), delta);
  view.value = { year: next.getFullYear(), month: next.getMonth() };
}
function pick(date: Date) {
  selected.value = date;
  hide();
}

/* The handle, or any non-interactive part of the panel, can be pulled straight down. */
function grab(event: PointerEvent) {
  if (!open.value) return;
  if ((event.target as HTMLElement).closest("button")) return;
  dragging.value = true;
  heldPointer = event.pointerId;
  originY = event.clientY;
  (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
}
function drag(event: PointerEvent) {
  if (!dragging.value || event.pointerId !== heldPointer) return;
  offset.value = Math.max(0, event.clientY - originY);
}
function release() {
  if (!dragging.value) return;
  dragging.value = false;
  const height = panel.value?.offsetHeight ?? 360;
  const pulled = offset.value;
  offset.value = 0;
  if (pulled > height / 3) hide();
}

function onKeydown(event: KeyboardEvent) {
  if (event.key === "Escape") hide();
}
watch(open, (value) => {
  if (value) window.addEventListener("keydown", onKeydown);
  else window.removeEventListener("keydown", onKeydown);
});
onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown));

const panelStyle = computed(() => (dragging.value && offset.value > 0 ? { transform: `translateY(${offset.value}px)`, transition: "none" } : undefined));
</script>

<template>
  <div class="mdd" :style="{ '--mdd-accent': accent }">
    <div class="mdd__field">
      <span class="mdd__label">{{ label }}</span>
      <button ref="trigger" type="button" class="mdd__trigger" @click="show">
        <span>{{ selectedLabel }}</span>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <rect x="3.5" y="5" width="17" height="15.5" rx="2.5" />
          <path d="M3.5 9.5h17" />
          <path d="M8 3v3M16 3v3" />
          <path d="M12 12.5v5M9.5 15h5" />
        </svg>
      </button>
      <span class="mdd__caption">{{ caption }}</span>
    </div>

    <div class="mdd__scrim" :class="{ 'is-open': open }" @click="hide"></div>

    <div
      ref="panel"
      class="mdd__panel"
      :class="{ 'is-open': open, 'is-dragging': dragging }"
      role="dialog"
      aria-modal="false"
      :aria-label="label"
      :style="panelStyle"
      @pointerdown="grab"
      @pointermove="drag"
      @pointerup="release"
      @pointercancel="release"
    >
      <span class="mdd__handle" aria-hidden="true"></span>

      <div class="mdd__header">
        <button type="button" class="mdd__nav" aria-label="Previous month" @click="stepMonth(-1)">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M15 6l-6 6 6 6" />
          </svg>
        </button>
        <span class="mdd__month">{{ MONTHS[view.month] }} {{ view.year }}</span>
        <button type="button" class="mdd__nav" aria-label="Next month" @click="stepMonth(1)">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M9 6l6 6-6 6" />
          </svg>
        </button>
      </div>

      <div class="mdd__weekdays" role="row">
        <span v-for="weekday in WEEKDAYS" :key="weekday">{{ weekday }}</span>
      </div>

      <div class="mdd__grid" role="grid" :aria-label="`${MONTHS[view.month]} ${view.year}`">
        <button
          v-for="cell in cells"
          :key="cell.key"
          type="button"
          role="gridcell"
          class="mdd__day"
          :class="{ 'is-outside': !cell.inMonth, 'is-selected': selected && isSameDay(cell.date, selected) }"
          :aria-selected="selected ? isSameDay(cell.date, selected) : false"
          :aria-current="isSameDay(cell.date, today) ? 'date' : undefined"
          :aria-label="`${MONTHS[cell.date.getMonth()]} ${cell.date.getDate()}, ${cell.date.getFullYear()}`"
          :style="
            selected && isSameDay(cell.date, selected)
              ? { background: accent, color: selectedText }
              : isSameDay(cell.date, today)
                ? { boxShadow: `inset 0 0 0 1.5px ${accent}` }
                : undefined
          "
          @click="pick(cell.date)"
        >
          {{ cell.date.getDate() }}
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.mdd {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 460px;
  overflow: hidden;
  border: 1px solid rgb(128 128 128 / 0.15);
  border-radius: 16px;
  background: rgb(128 128 128 / 0.03);
  color: inherit;
  font-family: system-ui, sans-serif;
}
.mdd__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
}
.mdd__label {
  font-size: 12px;
  font-weight: 500;
  color: currentColor;
  opacity: 0.6;
}
.mdd__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border: 1px solid rgb(128 128 128 / 0.35);
  border-radius: 8px;
  background: none;
  color: currentColor;
  font: 500 14px/1.3 system-ui, sans-serif;
  cursor: pointer;
  transition: border-color 140ms ease;
}
.mdd__trigger:hover {
  border-color: rgb(128 128 128 / 0.55);
}
.mdd__trigger:focus-visible,
.mdd__nav:focus-visible,
.mdd__day:focus-visible {
  outline: 2px solid var(--mdd-accent);
  outline-offset: 2px;
}
.mdd__caption {
  font-size: 11.5px;
  line-height: 1.4;
  color: currentColor;
  opacity: 0.4;
}
.mdd__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(4 6 9 / 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mdd__scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}
.mdd__panel {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 16px 16px;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: #11151b;
  color: #e9edf3;
  box-shadow: 0 -10px 30px -16px rgb(0 0 0 / 0.9);
  outline: none;
  touch-action: none;
  transform: translateY(100%);
  transition: transform 360ms cubic-bezier(0.22, 1.15, 0.36, 1);
}
.mdd__panel.is-open {
  transform: translateY(0);
}
.mdd__panel.is-dragging {
  transition: none;
}
.mdd__handle {
  display: block;
  width: 36px;
  height: 4px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.25);
}
.mdd__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}
.mdd__nav {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: rgb(255 255 255 / 0.55);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
.mdd__nav:hover {
  background: rgb(255 255 255 / 0.1);
  color: #fff;
}
.mdd__month {
  font-size: 13px;
  font-weight: 600;
  color: rgb(255 255 255 / 0.9);
}
.mdd__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 10px;
  padding: 0 4px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgb(255 255 255 / 0.35);
}
.mdd__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 4px;
  padding: 0 4px 4px;
}
.mdd__day {
  display: grid;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: none;
  color: #fff;
  font: 500 14px/1 system-ui, sans-serif;
  cursor: pointer;
  transition: background-color 140ms ease;
}
.mdd__day:hover {
  background: rgb(255 255 255 / 0.1);
}
.mdd__day.is-outside {
  color: rgb(255 255 255 / 0.25);
}
.mdd__day.is-selected:hover {
  background: none;
}
@media (prefers-reduced-motion: reduce) {
  .mdd__scrim,
  .mdd__panel {
    transition-duration: 1ms;
  }
}
</style>

Nearby