Time Picker

import { Box, TimePicker } from "@seed-design/react";

export default function TimePickerPreview() {
  return (
    <Box width="358px" maxWidth="100%">
      <TimePicker defaultValue={{ hour: 10, minute: 30 }} />
    </Box>
  );
}

"use client";

import { Box, Text, TimePicker, VStack, type TimePickerValue } from "@seed-design/react";
import * as React from "react";

export default function TimePickerControlled() {
  const [value, setValue] = React.useState<TimePickerValue>({ hour: 10, minute: 30 });

  return (
    <VStack gap="x3" align="center">
      <Box width="358px" maxWidth="100%">
        <TimePicker value={value} onValueChange={setValue} />
      </Box>
      <Text>
        {String(value.hour).padStart(2, "0")}:{String(value.minute).padStart(2, "0")}
      </Text>
    </VStack>
  );
}

"use client";

import { Box, HStack, Text, TimePicker, VStack, type TimePickerValue } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import * as React from "react";

function formatTime({ hour, minute }: TimePickerValue) {
  const period = hour < 12 ? "오전" : "오후";
  const displayHour = hour % 12 || 12;

  return `${period} ${displayHour}:${String(minute).padStart(2, "0")}`;
}

export default function TimePickerInline() {
  const [value, setValue] = React.useState<TimePickerValue>({ hour: 10, minute: 30 });
  const [savedValue, setSavedValue] = React.useState(value);

  return (
    <VStack width="358px" maxWidth="100%" gap="x4">
      <VStack gap="x1">
        <Text id="business-open-time-label" textStyle="t5Bold">
          영업 시작 시간
        </Text>
        <Text color="fg.neutralMuted">현재 설정: {formatTime(savedValue)}</Text>
      </VStack>
      <Box width="full">
        <TimePicker
          aria-labelledby="business-open-time-label"
          value={value}
          onValueChange={setValue}
        />
      </Box>
      <HStack justify="flex-end">
        <ActionButton variant="neutralSolid" onClick={() => setSavedValue(value)}>
          완료
        </ActionButton>
      </HStack>
    </VStack>
  );
}

"use client";

import { Portal, TimePicker, type TimePickerValue } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import {
  BottomSheetBody,
  BottomSheetContent,
  BottomSheetFooter,
  BottomSheetRoot,
} from "seed-design/ui/bottom-sheet";
import { FieldButton, FieldButtonValue } from "seed-design/ui/field-button";
import * as React from "react";

function formatTime({ hour, minute }: TimePickerValue) {
  const period = hour < 12 ? "오전" : "오후";
  const displayHour = hour % 12 || 12;

  return `${period} ${displayHour}:${String(minute).padStart(2, "0")}`;
}

export default function TimePickerBottomSheet() {
  const [open, setOpen] = React.useState(false);
  const [value, setValue] = React.useState<TimePickerValue>({ hour: 10, minute: 30 });
  const [draft, setDraft] = React.useState(value);

  const handleOpenChange = (nextOpen: boolean) => {
    if (nextOpen) setDraft(value);
    setOpen(nextOpen);
  };

  return (
    <BottomSheetRoot open={open} onOpenChange={handleOpenChange}>
      <FieldButton
        label="영업 시작 시간"
        values={[formatTime(value)]}
        style={{ width: "240px", maxWidth: "100%" }}
        buttonProps={{
          "aria-label": `영업 시작 시간, ${formatTime(value)}`,
          "aria-haspopup": "dialog",
          "aria-expanded": open,
          onClick: () => handleOpenChange(true),
        }}
      >
        <FieldButtonValue>{formatTime(value)}</FieldButtonValue>
      </FieldButton>
      <Portal>
        <BottomSheetContent title="시간 선택" showCloseButton={false} showHandle>
          <BottomSheetBody paddingX="x4">
            <TimePicker value={draft} onValueChange={setDraft} />
          </BottomSheetBody>
          <BottomSheetFooter>
            <ActionButton
              variant="neutralSolid"
              onClick={() => {
                setValue(draft);
                setOpen(false);
              }}
            >
              완료
            </ActionButton>
          </BottomSheetFooter>
        </BottomSheetContent>
      </Portal>
    </BottomSheetRoot>
  );
}

"use client";

import { Box, Text, TimePicker, VStack, type TimePickerValue } from "@seed-design/react";
import * as React from "react";

export default function TimePickerDateValue() {
  const [date, setDate] = React.useState(() => new Date(2026, 6, 28, 13, 30));
  const value: TimePickerValue = {
    hour: date.getHours(),
    minute: date.getMinutes(),
  };

  const handleValueChange = ({ hour, minute }: TimePickerValue) => {
    setDate((currentDate) => {
      const nextDate = new Date(currentDate);
      nextDate.setHours(hour, minute, 0, 0);
      return nextDate;
    });
  };

  return (
    <VStack gap="x3" align="center">
      <Box width="358px" maxWidth="100%">
        <TimePicker value={value} onValueChange={handleValueChange} />
      </Box>
      <Text>{date.toLocaleString("ko-KR")}</Text>
    </VStack>
  );
}

import { Box, TimePicker } from "@seed-design/react";

export default function TimePickerMinuteStep() {
  return (
    <Box width="358px" maxWidth="100%">
      <TimePicker defaultValue={{ hour: 9, minute: 13 }} minuteStep={5} />
    </Box>
  );
}

import { Box, TimePicker } from "@seed-design/react";

export default function TimePickerDisabled() {
  return (
    <Box width="358px" maxWidth="100%">
      <TimePicker disabled defaultValue={{ hour: 10, minute: 30 }} />
    </Box>
  );
}

import { Box, TimePicker } from "@seed-design/react";

export default function TimePickerLocalization() {
  return (
    <Box width="358px" maxWidth="100%">
      <TimePicker
        locale="en-US"
        aria-label="Select time"
        periodAriaLabel="AM/PM"
        hourAriaLabel="Hour"
        minuteAriaLabel="Minute"
        defaultValue={{ hour: 13, minute: 30 }}
      />
    </Box>
  );
}