Date Picker

import { Box } from "@seed-design/react";
import { DatePicker } from "seed-design/ui/date-picker";

export default function DatePickerPreview() {
  return (
    <Box width="358px" maxWidth="100%">
      <DatePicker
        today={{ year: 2026, month: 7, day: 30 }}
        defaultValue={{ year: 2026, month: 7, day: 30 }}
      />
    </Box>
  );
}

"use client";

import { Box, VStack } from "@seed-design/react";
import {
  ContinuousDatePicker,
  DatePicker,
  TwoMonthDatePicker,
  WeekDatePicker,
} from "seed-design/ui/date-picker";
import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";
import * as React from "react";

const today = { year: 2026, month: 7, day: 30 };

const layoutOptions = [
  { value: "month", label: "한 달" },
  { value: "twoMonths", label: "두 달" },
  { value: "week", label: "한 주" },
  { value: "continuous", label: "연속" },
] as const;

type DatePickerLayout = (typeof layoutOptions)[number]["value"];

export default function DatePickerVisibleRanges() {
  const [layout, setLayout] = React.useState<DatePickerLayout>("month");

  const picker = (() => {
    switch (layout) {
      case "twoMonths":
        return <TwoMonthDatePicker today={today} />;
      case "week":
        return <WeekDatePicker today={today} />;
      case "continuous":
        return (
          <ContinuousDatePicker
            today={today}
            yearRange={{ start: 2026, end: 2027 }}
            height="full"
          />
        );
      default:
        return <DatePicker today={today} />;
    }
  })();

  return (
    <VStack gap="x6" width="full" align="center">
      <SegmentedControl
        aria-label="Date Picker 레이아웃"
        value={layout}
        onValueChange={(value) => setLayout(value as DatePickerLayout)}
      >
        {layoutOptions.map((option) => (
          <SegmentedControlItem key={option.value} value={option.value}>
            {option.label}
          </SegmentedControlItem>
        ))}
      </SegmentedControl>
      <Box
        width={layout === "twoMonths" ? "720px" : "358px"}
        height={layout === "continuous" ? "420px" : undefined}
        maxWidth="full"
      >
        {picker}
      </Box>
    </VStack>
  );
}

"use client";

import { Box, dateOnOrAfter, dateOnOrBefore } from "@seed-design/react";
import { ContinuousDatePicker } from "seed-design/ui/date-picker";

const today = { year: 2026, month: 12, day: 15 };
const thirtyDaysLater = { year: 2027, month: 1, day: 14 };

export default function ContinuousDatePickerMonthRange() {
  return (
    <Box width="358px" height="420px" maxWidth="full">
      <ContinuousDatePicker
        selectionMode="range"
        today={today}
        yearRange={{ start: 2026, end: 2027 }}
        monthRange={{
          start: { year: today.year, month: today.month },
          end: { year: thirtyDaysLater.year, month: thirtyDaysLater.month },
        }}
        constraints={[dateOnOrAfter(today), dateOnOrBefore(thirtyDaysLater)]}
        height="full"
      />
    </Box>
  );
}

"use client";

import {
  Box,
  Text,
  VStack,
  type DatePickerDate,
  type DatePickerRangeValue,
} from "@seed-design/react";
import { DatePicker } from "seed-design/ui/date-picker";
import * as React from "react";

const today = { year: 2026, month: 7, day: 30 };

export default function DatePickerSelectionModes() {
  const [single, setSingle] = React.useState<DatePickerDate>(today);
  const [range, setRange] = React.useState<DatePickerRangeValue>({
    start: { year: 2026, month: 7, day: 10 },
    end: { year: 2026, month: 7, day: 13 },
  });
  const [multiple, setMultiple] = React.useState<DatePickerDate[]>([
    { year: 2026, month: 7, day: 7 },
    { year: 2026, month: 7, day: 14 },
  ]);

  return (
    <VStack gap="x8" align="center">
      <VStack gap="x2" align="center">
        <Text textStyle="t5Bold">Single</Text>
        <Box width="358px" maxWidth="100%">
          <DatePicker today={today} value={single} onValueChange={setSingle} />
        </Box>
      </VStack>
      <VStack gap="x2" align="center">
        <Text textStyle="t5Bold">Range</Text>
        <Box width="358px" maxWidth="100%">
          <DatePicker selectionMode="range" today={today} value={range} onValueChange={setRange} />
        </Box>
      </VStack>
      <VStack gap="x2" align="center">
        <Text textStyle="t5Bold">Multiple</Text>
        <Box width="358px" maxWidth="100%">
          <DatePicker
            selectionMode="multiple"
            today={today}
            value={multiple}
            onValueChange={setMultiple}
          />
        </Box>
      </VStack>
    </VStack>
  );
}

"use client";

import {
  Box,
  Text,
  VStack,
  excludeDates,
  rangeDayCountAtLeast,
  rangeDayCountAtMost,
  type DatePickerDate,
  type DatePickerRangeValue,
} from "@seed-design/react";
import { TwoMonthDatePicker } from "seed-design/ui/date-picker";
import * as React from "react";

const bookedDateKeys = new Set(["2026-07-18", "2026-07-19", "2026-07-25"]);

function toDateKey(date: DatePickerDate) {
  return `${date.year}-${String(date.month).padStart(2, "0")}-${String(date.day).padStart(2, "0")}`;
}

const constraints = [
  rangeDayCountAtLeast(1),
  rangeDayCountAtMost(14),
  excludeDates((date) => bookedDateKeys.has(toDateKey(date))),
];

export default function DatePickerReservation() {
  const [value, setValue] = React.useState<DatePickerRangeValue>({
    start: { year: 2026, month: 7, day: 10 },
  });

  return (
    <VStack gap="x3" align="center">
      <Box width="720px" maxWidth="100%">
        <TwoMonthDatePicker
          selectionMode="range"
          today={{ year: 2026, month: 7, day: 1 }}
          value={value}
          onValueChange={setValue}
          constraints={constraints}
          aria-label="체크인 및 체크아웃 날짜"
        />
      </Box>
      <Text>
        체크인 {toDateKey(value.start)}
        {value.end ? ` · 체크아웃 ${toDateKey(value.end)}` : " · 체크아웃을 선택하세요"}
      </Text>
      <VStack gap="x1" align="center">
        <Text textStyle="t2Regular" color="fg.neutralMuted">
          선택 구간은 체크인·체크아웃을 포함해 1~14일이어야 합니다.
        </Text>
        <Text textStyle="t2Regular" color="fg.neutralMuted">
          예약 완료일(7월 18일·19일·25일)이 포함된 구간은 선택할 수 없습니다.
        </Text>
      </VStack>
    </VStack>
  );
}

"use client";

import { Box, Text, VStack, dateOnOrAfter, type DatePickerRangeValue } from "@seed-design/react";
import { DatePicker } from "seed-design/ui/date-picker";
import * as React from "react";

const today = { year: 2026, month: 8, day: 10 } as const;

const initialValue: DatePickerRangeValue = {
  start: { year: 2026, month: 8, day: 7 },
  end: { year: 2026, month: 8, day: 14 },
};

function formatDate(date: DatePickerRangeValue["start"]) {
  return `${date.year}.${date.month}.${date.day}`;
}

export default function DatePickerReadOnlyRangeStart() {
  const [value, setValue] = React.useState(initialValue);

  return (
    <VStack gap="x3" align="center">
      <Box width="358px" maxWidth="100%">
        <DatePicker
          selectionMode="range"
          rangeStartReadOnly
          today={today}
          constraints={[dateOnOrAfter(today)]}
          value={value}
          onValueChange={setValue}
        />
      </Box>
      <Text>
        광고 기간 {formatDate(value.start)}
        {value.end ? ` ~ ${formatDate(value.end)}` : ""}
      </Text>
    </VStack>
  );
}

"use client";

import { Box, Text } from "@seed-design/react";
import { DatePicker } from "seed-design/ui/date-picker";

const prices = new Map([
  [10, "12만원"],
  [11, "9만원"],
  [12, "11만원"],
  [14, "8만원"],
]);

export default function DatePickerCustomCell() {
  return (
    <Box width="358px" maxWidth="100%">
      <DatePicker
        today={{ year: 2026, month: 7, day: 1 }}
        renderDateCellSupplement={({ date, isUnavailable }) => (
          <Box asChild maxWidth="full">
            <Text as="span" textStyle="t1Regular" color="fg.neutralMuted" maxLines={1}>
              {isUnavailable ? "선택 불가" : (prices.get(date.day) ?? "예약 가능")}
            </Text>
          </Box>
        )}
        constraints={[(date) => date.day !== 13]}
      />
    </Box>
  );
}

"use client";

import { Box, Text, VStack, type DatePickerDate, type TimePickerValue } from "@seed-design/react";
import { DatePicker } from "seed-design/ui/date-picker";
import { TimePicker } from "seed-design/ui/time-picker";
import * as React from "react";

const TODAY: DatePickerDate = { year: 2026, month: 7, day: 30 };

export default function DatePickerDateAndTime() {
  const [date, setDate] = React.useState<DatePickerDate>(TODAY);
  const [time, setTime] = React.useState<TimePickerValue>({ hour: 14, minute: 30 });

  return (
    <VStack gap="x4" align="center">
      <Box width="358px" maxWidth="100%">
        <DatePicker today={TODAY} value={date} onValueChange={setDate} />
      </Box>
      <Box width="358px" maxWidth="100%">
        <TimePicker value={time} onValueChange={setTime} />
      </Box>
      <Text>
        {date.year}.{date.month}.{date.day}. {String(time.hour).padStart(2, "0")}:
        {String(time.minute).padStart(2, "0")}
      </Text>
    </VStack>
  );
}

"use client";

import { ActionButton, Box, HStack, type DatePickerDate } from "@seed-design/react";
import { DatePicker, type DatePickerActions } from "seed-design/ui/date-picker";
import * as React from "react";

const today: DatePickerDate = { year: 2026, month: 7, day: 30 };

export default function DatePickerNavigationActions() {
  const actionsRef = React.useRef<DatePickerActions>(null);

  return (
    <Box width="358px" maxWidth="100%">
      <HStack gap="x2" marginBottom="x3">
        <ActionButton
          variant="neutralWeak"
          onClick={() => actionsRef.current?.navigateToDate(today)}
        >
          오늘로 이동
        </ActionButton>
        <ActionButton variant="neutralWeak" onClick={() => actionsRef.current?.focusDate(today)}>
          오늘에 포커스
        </ActionButton>
      </HStack>
      <DatePicker
        actionsRef={actionsRef}
        today={today}
        defaultViewDate={{ year: 2026, month: 5, day: 1 }}
      />
    </Box>
  );
}