@bds-web/ui 1.17.0 → 1.18.0

package/dist/CalendarIcon/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ui";
+//# sourceMappingURL=index.d.ts.map

package/dist/CalendarIcon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/CalendarIcon/index.ts"],"names":[],"mappings":"AAAA,cAAc,MAAM,CAAC"}

package/dist/CalendarIcon/index.js

@@ -0,0 +1 @@
+export * from "./ui";

package/dist/CalendarIcon/ui/index.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    size?: number;
+    pointer?: boolean;
+}
+export declare const CalendarIcon: ({ size, pointer }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/CalendarIcon/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/CalendarIcon/ui/index.tsx"],"names":[],"mappings":"AAEA,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,GAAI,mBAAgC,KAAK,4CAejE,CAAC"}

package/dist/CalendarIcon/ui/index.js

@@ -0,0 +1,5 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CalendarIcon = ({ size = 16, pointer = false }) => {
+    return (_jsx("svg", { width: size * (14 / 16), height: size, viewBox: "0 0 14 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { cursor: pointer ? "pointer" : "default" }, children: _jsx("path", { d: "M1.55556 16C1.12778 16 0.761574 15.8433 0.456944 15.53C0.152315 15.2167 0 14.84 0 14.4V3.2C0 2.76 0.152315 2.38333 0.456944 2.07C0.761574 1.75667 1.12778 1.6 1.55556 1.6H2.33333V0H3.88889V1.6H10.1111V0H11.6667V1.6H12.4444C12.8722 1.6 13.2384 1.75667 13.5431 2.07C13.8477 2.38333 14 2.76 14 3.2V14.4C14 14.84 13.8477 15.2167 13.5431 15.53C13.2384 15.8433 12.8722 16 12.4444 16H1.55556ZM1.55556 14.4H12.4444V6.4H1.55556V14.4ZM1.55556 4.8H12.4444V3.2H1.55556V4.8Z", fill: "currentColor" }) }));
+};

package/dist/ChevronIcon/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ui";
+//# sourceMappingURL=index.d.ts.map

package/dist/ChevronIcon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ChevronIcon/index.ts"],"names":[],"mappings":"AAAA,cAAc,MAAM,CAAC"}

package/dist/ChevronIcon/index.js

@@ -0,0 +1 @@
+export * from "./ui";

package/dist/ChevronIcon/ui/index.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    className?: string;
+    size?: number;
+    rotate?: number;
+}
+export declare const ChevronIcon: ({ className, size, rotate }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/ChevronIcon/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ChevronIcon/ui/index.tsx"],"names":[],"mappings":"AAEA,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,GAAI,6BAAuC,KAAK,4CA6CvE,CAAC"}

package/dist/ChevronIcon/ui/index.js

@@ -0,0 +1,5 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ChevronIcon = ({ className, size = 16, rotate = 90 }) => {
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: { transform: `rotate(${rotate}deg)` }, children: [_jsx("mask", { id: "mask0_13542_2460", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: size, height: size, children: _jsx("rect", { y: size, width: size, height: size, rx: "2", transform: "rotate(-90 0 16)", fill: "#D9D9D9" }) }), _jsxs("g", { mask: "url(#mask0_13542_2460)", children: [_jsx("path", { d: "M14.6666 5.33333L7.99998 12L1.33331 5.33333L2.51665 4.15L7.99998 9.63333L13.4833 4.15L14.6666 5.33333Z", fill: "currentColor" }), _jsx("path", { d: "M14.6666 5.33333L7.99998 12L1.33331 5.33333L2.51665 4.15L7.99998 9.63333L13.4833 4.15L14.6666 5.33333Z", fill: "currentColor", fillOpacity: "0.2" }), _jsx("path", { d: "M14.6666 5.33333L7.99998 12L1.33331 5.33333L2.51665 4.15L7.99998 9.63333L13.4833 4.15L14.6666 5.33333Z", fill: "currentColor", fillOpacity: "0.2" })] })] }));
+};

package/dist/DatePicker/constants/index.d.ts

@@ -0,0 +1,10 @@
+export declare const DAYS: readonly ["일", "월", "화", "수", "목", "금", "토"];
+export declare const ITEM_HEIGHT = 44;
+export declare const VISIBLE_COUNT = 5;
+export declare const OFFSET: number;
+export declare const HOURS: number[];
+export declare const MINUTES: number[];
+export declare const REPEAT_COUNT = 3;
+export declare const INFINITE_HOURS: any[];
+export declare const INFINITE_MINUTES: any[];
+//# sourceMappingURL=index.d.ts.map

package/dist/DatePicker/constants/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/constants/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI,8CAA+C,CAAC;AAEjE,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,eAAO,MAAM,aAAa,IAAI,CAAC;AAC/B,eAAO,MAAM,MAAM,QAAgC,CAAC;AAEpD,eAAO,MAAM,KAAK,UAA0C,CAAC;AAC7D,eAAO,MAAM,OAAO,UAA0C,CAAC;AAE/D,eAAO,MAAM,YAAY,IAAI,CAAC;AAC9B,eAAO,MAAM,cAAc,OAAyC,CAAC;AACrE,eAAO,MAAM,gBAAgB,OAA2C,CAAC"}

package/dist/DatePicker/constants/index.js

@@ -0,0 +1,9 @@
+export const DAYS = ['일', '월', '화', '수', '목', '금', '토'];
+export const ITEM_HEIGHT = 44;
+export const VISIBLE_COUNT = 5;
+export const OFFSET = Math.floor(VISIBLE_COUNT / 2);
+export const HOURS = Array.from({ length: 24 }, (_, i) => i);
+export const MINUTES = Array.from({ length: 60 }, (_, i) => i);
+export const REPEAT_COUNT = 3;
+export const INFINITE_HOURS = Array(REPEAT_COUNT).fill(HOURS).flat();
+export const INFINITE_MINUTES = Array(REPEAT_COUNT).fill(MINUTES).flat();

package/dist/DatePicker/hooks/useClickOutside.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from "react";
+export declare const useClickOutside: <T extends HTMLElement>(onClickOutside: () => void, ignoreRefs?: RefObject<HTMLElement | null>[]) => RefObject<T | null>;
+//# sourceMappingURL=useClickOutside.d.ts.map

package/dist/DatePicker/hooks/useClickOutside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClickOutside.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/hooks/useClickOutside.ts"],"names":[],"mappings":"AAEA,OAAO,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,WAAW,EACnD,gBAAgB,MAAM,IAAI,EAC1B,aAAY,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAO,wBA+BjD,CAAC"}

package/dist/DatePicker/hooks/useClickOutside.js

@@ -0,0 +1,22 @@
+"use client";
+import { useEffect, useRef } from "react";
+export const useClickOutside = (onClickOutside, ignoreRefs = []) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const handler = (e) => {
+            const target = e.target;
+            if (!ref.current)
+                return;
+            if (ref.current.contains(target))
+                return;
+            if (ignoreRefs.some(ignoreRef => ignoreRef.current &&
+                ignoreRef.current.contains(target))) {
+                return;
+            }
+            onClickOutside();
+        };
+        document.addEventListener("mousedown", handler);
+        return () => document.removeEventListener("mousedown", handler);
+    }, [onClickOutside, ignoreRefs]);
+    return ref;
+};

package/dist/DatePicker/hooks/useDatePicker.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from "react";
+export declare const useDatePicker: (date: Date, portalRef?: RefObject<HTMLElement | null>) => {
+    isOpen: boolean;
+    setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    current: Date;
+    goPrevMonth: () => void;
+    goNextMonth: () => void;
+    selected: Date;
+    setSelected: import("react").Dispatch<import("react").SetStateAction<Date>>;
+    calendar: import("../types/calendar-cell").CalendarCell[];
+    containerRef: RefObject<HTMLDivElement | null>;
+};
+//# sourceMappingURL=useDatePicker.d.ts.map

package/dist/DatePicker/hooks/useDatePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDatePicker.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/hooks/useDatePicker.ts"],"names":[],"mappings":"AAEA,OAAO,EAAyB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzD,eAAO,MAAM,aAAa,GACxB,MAAM,IAAI,EACV,YAAY,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC;;;;;;;;;;CAuC1C,CAAC"}

package/dist/DatePicker/hooks/useDatePicker.js

@@ -0,0 +1,28 @@
+"use client";
+import { useCallback, useState } from "react";
+import { getMonthCalendar } from "../utils/get-month-calendar";
+import { useClickOutside } from "./useClickOutside";
+export const useDatePicker = (date, portalRef) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [current, setCurrent] = useState(() => new Date(date.getFullYear(), date.getMonth(), 1));
+    const [selected, setSelected] = useState(date);
+    const year = current.getFullYear();
+    const month = current.getMonth();
+    const calendar = getMonthCalendar(year, month);
+    const goPrevMonth = () => setCurrent(new Date(year, month - 1, 1));
+    const goNextMonth = () => setCurrent(new Date(year, month + 1, 1));
+    const close = useCallback(() => setIsOpen(false), []);
+    const ignoreRefs = portalRef ? [portalRef] : [];
+    const containerRef = useClickOutside(close, ignoreRefs);
+    return {
+        isOpen,
+        setIsOpen,
+        current,
+        goPrevMonth,
+        goNextMonth,
+        selected,
+        setSelected,
+        calendar,
+        containerRef,
+    };
+};

package/dist/DatePicker/hooks/useTimePicker.d.ts

@@ -0,0 +1,13 @@
+import { Time } from "../types/time";
+export declare const useTimePicker: (time: Time) => {
+    isOpen: boolean;
+    setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    selected: Time;
+    hourRef: import("react").RefObject<HTMLDivElement | null>;
+    minuteRef: import("react").RefObject<HTMLDivElement | null>;
+    handleScroll: (ref: React.RefObject<HTMLDivElement>, values: number[], infiniteValues: number[], key: "hour" | "minute") => () => void;
+    containerRef: import("react").RefObject<HTMLDivElement>;
+    infiniteHours: any[];
+    infiniteMinutes: any[];
+};
+//# sourceMappingURL=useTimePicker.d.ts.map

package/dist/DatePicker/hooks/useTimePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTimePicker.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/hooks/useTimePicker.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGrC,eAAO,MAAM,aAAa,GAAI,MAAM,IAAI;;;;;;wBA6B7B,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,UAC5B,MAAM,EAAE,kBACA,MAAM,EAAE,OACnB,MAAM,GAAG,QAAQ;;;;CAuD3B,CAAC"}

package/dist/DatePicker/hooks/useTimePicker.js

@@ -0,0 +1,72 @@
+"use client";
+import { useEffect, useRef, useCallback, useState } from "react";
+import { ITEM_HEIGHT, HOURS, MINUTES, INFINITE_HOURS, INFINITE_MINUTES, OFFSET } from "../constants";
+import { useClickOutside } from "./useClickOutside";
+export const useTimePicker = (time) => {
+    const hourRef = useRef(null);
+    const minuteRef = useRef(null);
+    const snapTimer = useRef();
+    const isAdjusting = useRef(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const [selected, setSelected] = useState(time);
+    const close = useCallback(() => setIsOpen(false), []);
+    const containerRef = useClickOutside(close);
+    const getMiddleOffset = (value, total) => {
+        return (total + value - OFFSET) * ITEM_HEIGHT;
+    };
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        setSelected(time);
+        if (hourRef.current) {
+            hourRef.current.scrollTop = getMiddleOffset(time.hour, HOURS.length);
+        }
+        if (minuteRef.current) {
+            minuteRef.current.scrollTop = getMiddleOffset(time.minute, MINUTES.length);
+        }
+    }, [isOpen]);
+    const handleScroll = useCallback((ref, values, infiniteValues, key) => () => {
+        if (isAdjusting.current || !ref.current)
+            return;
+        window.clearTimeout(snapTimer.current);
+        snapTimer.current = window.setTimeout(() => {
+            if (!ref.current)
+                return;
+            const scrollTop = ref.current.scrollTop;
+            const index = Math.round(scrollTop / ITEM_HEIGHT) + OFFSET;
+            const totalItems = values.length;
+            ref.current.scrollTo({
+                top: (index - OFFSET) * ITEM_HEIGHT,
+                behavior: "smooth",
+            });
+            const actualValue = infiniteValues[index];
+            setSelected((prev) => ({
+                ...prev,
+                [key]: actualValue,
+            }));
+            setTimeout(() => {
+                if (!ref.current)
+                    return;
+                const currentScrollTop = ref.current.scrollTop;
+                const currentIndex = Math.round(currentScrollTop / ITEM_HEIGHT) + OFFSET;
+                if (currentIndex < totalItems || currentIndex >= totalItems * 2) {
+                    isAdjusting.current = true;
+                    const middleIndex = totalItems + actualValue;
+                    ref.current.scrollTop = (middleIndex - OFFSET) * ITEM_HEIGHT;
+                    isAdjusting.current = false;
+                }
+            }, 150);
+        }, 80);
+    }, []);
+    return {
+        isOpen,
+        setIsOpen,
+        selected,
+        hourRef,
+        minuteRef,
+        handleScroll,
+        containerRef,
+        infiniteHours: INFINITE_HOURS,
+        infiniteMinutes: INFINITE_MINUTES,
+    };
+};

package/dist/DatePicker/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ui";
+export * from "./types/props";
+//# sourceMappingURL=index.d.ts.map

package/dist/DatePicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DatePicker/index.ts"],"names":[],"mappings":"AAAA,cAAc,MAAM,CAAC;AACrB,cAAc,eAAe,CAAC"}

package/dist/DatePicker/index.js

@@ -0,0 +1,2 @@
+export * from "./ui";
+export * from "./types/props";

package/dist/DatePicker/types/calendar-cell.d.ts

@@ -0,0 +1,5 @@
+export interface CalendarCell {
+    date: Date | null;
+    day: number | null;
+}
+//# sourceMappingURL=calendar-cell.d.ts.map

package/dist/DatePicker/types/calendar-cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-cell.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/types/calendar-cell.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB"}

package/dist/DatePicker/types/calendar-cell.js

@@ -0,0 +1,2 @@
+;
+export {};

package/dist/DatePicker/types/props.d.ts

@@ -0,0 +1,7 @@
+export interface DatePickerProps {
+    date?: Date;
+    onChangeDate?: (date: Date) => void;
+    disablePast?: boolean;
+    title?: string;
+}
+//# sourceMappingURL=props.d.ts.map

package/dist/DatePicker/types/props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/types/props.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/DatePicker/types/props.js

@@ -0,0 +1 @@
+export {};

package/dist/DatePicker/types/time.d.ts

@@ -0,0 +1,5 @@
+export interface Time {
+    hour: number;
+    minute: number;
+}
+//# sourceMappingURL=time.d.ts.map

package/dist/DatePicker/types/time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/types/time.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,IAAI;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB"}

package/dist/DatePicker/types/time.js

@@ -0,0 +1 @@
+export {};

package/dist/DatePicker/ui/DatePickerPortal.d.ts

@@ -0,0 +1,9 @@
+interface DatePickerPortalProps {
+    children: React.ReactNode;
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    portalRef: React.RefObject<HTMLDivElement | null>;
+    isOpen: boolean;
+}
+export declare const DatePickerPortal: ({ children, containerRef, portalRef, isOpen, }: DatePickerPortalProps) => import("react").ReactPortal | null;
+export {};
+//# sourceMappingURL=DatePickerPortal.d.ts.map

package/dist/DatePicker/ui/DatePickerPortal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerPortal.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/ui/DatePickerPortal.tsx"],"names":[],"mappings":"AAKA,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAClD,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,GAAI,gDAK9B,qBAAqB,uCAqCvB,CAAC"}

package/dist/DatePicker/ui/DatePickerPortal.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+export const DatePickerPortal = ({ children, containerRef, portalRef, isOpen, }) => {
+    const [position, setPosition] = useState({
+        top: 0,
+        left: 0,
+        width: 0,
+    });
+    useEffect(() => {
+        if (!isOpen || !containerRef.current)
+            return;
+        const rect = containerRef.current.getBoundingClientRect();
+        setPosition({
+            top: rect.bottom + window.scrollY + 8,
+            left: rect.left + window.scrollX,
+            width: rect.width,
+        });
+    }, [isOpen, containerRef]);
+    if (!isOpen)
+        return null;
+    return createPortal(_jsx("div", { ref: portalRef, style: {
+            position: "absolute",
+            top: position.top,
+            left: position.left,
+            width: position.width,
+            zIndex: 100000,
+        }, onPointerDown: e => e.stopPropagation(), children: children }), document.body);
+};

package/dist/DatePicker/ui/index.d.ts

@@ -0,0 +1,3 @@
+import { DatePickerProps } from "../types/props";
+export declare const DatePicker: ({ date, onChangeDate, disablePast, title, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/DatePicker/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/ui/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAOjD,eAAO,MAAM,UAAU,GAAI,6CAKxB,eAAe,4CA0FjB,CAAC"}

package/dist/DatePicker/ui/index.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as S from "./style";
+import { parseDate } from "../utils/parse-date";
+import { DAYS } from "../constants";
+import { getIsPast } from "../utils/get-is-past";
+import { useDatePicker } from "../hooks/useDatePicker";
+import { CalendarIcon } from "../../CalendarIcon";
+import { ChevronIcon } from "../../ChevronIcon";
+import { Button } from "../../Button";
+import { DatePickerPortal } from "./DatePickerPortal";
+import { useRef } from "react";
+export const DatePicker = ({ date = new Date(), onChangeDate = () => { }, disablePast = false, title = "날짜 선택", }) => {
+    const portalRef = useRef(null);
+    const { isOpen, setIsOpen, current, goPrevMonth, goNextMonth, selected, setSelected, calendar, containerRef, } = useDatePicker(date, portalRef);
+    return (_jsxs(S.Container, { ref: containerRef, onClick: () => setIsOpen(prev => !prev), children: [_jsx(S.DateText, { children: parseDate(date) }), _jsx(CalendarIcon, { size: 16, pointer: true }), _jsx(DatePickerPortal, { containerRef: containerRef, portalRef: portalRef, isOpen: isOpen, children: _jsxs(S.Calender, { ref: portalRef, "$isOpen": isOpen, onClick: e => e.stopPropagation(), children: [_jsx(S.Title, { children: title }), _jsxs(S.Header, { children: [_jsxs(S.MonthText, { children: [current.getFullYear(), "\uB144 ", current.getMonth() + 1, "\uC6D4"] }), _jsxs(S.Arrows, { children: [_jsx(S.Arrow, { onClick: goPrevMonth, children: _jsx(ChevronIcon, { size: 16, rotate: 90 }) }), _jsx(S.Arrow, { onClick: goNextMonth, children: _jsx(ChevronIcon, { size: 16, rotate: -90 }) })] })] }), _jsx(S.WeekRow, { children: DAYS.map(day => (_jsx(S.Week, { children: day }, day))) }), _jsx(S.Grid, { children: calendar.map((cell, i) => cell.day ? (_jsx(S.Day, { "$selected": selected?.toDateString() ===
+                                    cell.date?.toDateString(), "$isPast": disablePast && getIsPast(cell.date), onClick: () => setSelected(cell.date), children: cell.day }, i)) : (_jsx("div", {}, i))) }), _jsx(Button, { buttonSize: "large", buttonType: "primary", onClick: () => {
+                                onChangeDate(selected);
+                                setIsOpen(false);
+                            }, children: "\uC120\uD0DD" })] }) })] }));
+};

package/dist/DatePicker/ui/style.d.ts

@@ -0,0 +1,54 @@
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DateText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const Calender: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $isOpen: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Title: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const Header: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MonthText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Arrows: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Arrow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const WeekRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Week: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const Grid: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Day: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $selected?: boolean;
+    $isPast?: boolean;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+//# sourceMappingURL=style.d.ts.map

package/dist/DatePicker/ui/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/ui/style.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,SAAS;;;yGAarB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;2GAIpB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;aAAyB,OAAO;yGAYpD,CAAC;AAEF,eAAO,MAAM,KAAK;;;iHAEjB,CAAC;AAEF,eAAO,MAAM,MAAM;;;yGAIlB,CAAC;AAEF,eAAO,MAAM,SAAS;;;yGAErB,CAAC;AAEF,eAAO,MAAM,MAAM;;;yGAGlB,CAAC;AAEF,eAAO,MAAM,KAAK;;;qHAGjB,CAAC;AAEF,eAAO,MAAM,OAAO;;;yGAMnB,CAAC;AAEF,eAAO,MAAM,IAAI;;;2GAGhB,CAAC;AAEF,eAAO,MAAM,IAAI;;;yGAIhB,CAAC;AAEF,eAAO,MAAM,GAAG;;;;gBAA+B,OAAO;cAAY,OAAO;qHASxE,CAAC"}

package/dist/DatePicker/ui/style.js

@@ -0,0 +1,82 @@
+"use client";
+import { colors } from "@bds-web/colors";
+import { shapes } from "@bds-web/shapes";
+import { typoCss } from "@bds-web/typography";
+import styled from "@emotion/styled";
+export const Container = styled.div `
+  width: fit-content;
+  height: 48px;
+  background-color: ${colors.static.white};
+  border-radius: ${shapes.medium};
+  padding: 5px 20px;
+  color: ${colors.greyScale[90]};
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  gap: 10px;
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
+`;
+export const DateText = styled.span `
+  ${typoCss("Body")}
+  flex: 1;
+  user-select: none;
+`;
+export const Calender = styled.div `
+  background-color: ${colors.static.white};
+  border-radius: ${shapes.large};
+  position: absolute;
+  top: calc(100% + 8px);
+  left: -2px;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  cursor: default;
+  z-index: ${({ $isOpen }) => ($isOpen ? 1000 : -1)};
+`;
+export const Title = styled.h2 `
+  ${typoCss("H3")}
+`;
+export const Header = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+export const MonthText = styled.div `
+  ${typoCss("Body")}
+`;
+export const Arrows = styled.div `
+  display: flex;
+  gap: 8px;
+`;
+export const Arrow = styled.button `
+  padding: 8px;
+  cursor: pointer;
+`;
+export const WeekRow = styled.div `
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  text-align: center;
+  color: ${colors.greyScale[60]};
+  margin-bottom: 4px;
+`;
+export const Week = styled.span `
+  ${typoCss("Caption1")}
+  flex: 1;
+`;
+export const Grid = styled.div `
+  width: 280px;
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+`;
+export const Day = styled.button `
+  ${typoCss("Body")}
+  height: 38px;
+  border-radius: ${shapes.small};
+  border: none;
+  cursor: pointer;
+  background: ${({ $selected }) => ($selected ? colors.blue.light : 'transparent')};
+  color: ${({ $selected }) => ($selected ? colors.static.white : colors.greyScale[60])};
+  opacity: ${({ $isPast }) => ($isPast ? 0.5 : 1)};
+`;

package/dist/DatePicker/utils/get-current-time.d.ts

@@ -0,0 +1,5 @@
+export declare const getCurrentTime: () => {
+    hour: number;
+    minute: number;
+};
+//# sourceMappingURL=get-current-time.d.ts.map

package/dist/DatePicker/utils/get-current-time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-current-time.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/utils/get-current-time.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc;;;CAM1B,CAAA"}

package/dist/DatePicker/utils/get-current-time.js

@@ -0,0 +1,7 @@
+export const getCurrentTime = () => {
+    const now = new Date();
+    return {
+        hour: now.getHours(),
+        minute: now.getMinutes(),
+    };
+};

package/dist/DatePicker/utils/get-is-past.d.ts

@@ -0,0 +1,2 @@
+export declare const getIsPast: (date: Date | null) => boolean;
+//# sourceMappingURL=get-is-past.d.ts.map

package/dist/DatePicker/utils/get-is-past.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-is-past.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/utils/get-is-past.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,GAAI,MAAM,IAAI,GAAG,IAAI,KAAG,OAG7C,CAAA"}

package/dist/DatePicker/utils/get-is-past.js

@@ -0,0 +1,5 @@
+export const getIsPast = (date) => {
+    if (!date)
+        return false;
+    return Number(date) < Number(new Date(new Date().setHours(0, 0, 0, 0)));
+};

package/dist/DatePicker/utils/get-month-calendar.d.ts

@@ -0,0 +1,3 @@
+import { CalendarCell } from "../types/calendar-cell";
+export declare const getMonthCalendar: (year: number, month: number) => CalendarCell[];
+//# sourceMappingURL=get-month-calendar.d.ts.map

package/dist/DatePicker/utils/get-month-calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-month-calendar.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/utils/get-month-calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAEtD,eAAO,MAAM,gBAAgB,GAAI,MAAM,MAAM,EAAE,OAAO,MAAM,KAAG,YAAY,EAoB1E,CAAA"}

package/dist/DatePicker/utils/get-month-calendar.js

@@ -0,0 +1,16 @@
+export const getMonthCalendar = (year, month) => {
+    const firstDayOfMonth = new Date(year, month, 1);
+    const startWeekDay = firstDayOfMonth.getDay();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const cells = [];
+    for (let i = 0; i < startWeekDay; i++) {
+        cells.push({ date: null, day: null });
+    }
+    for (let day = 1; day <= daysInMonth; day++) {
+        cells.push({
+            date: new Date(year, month, day),
+            day,
+        });
+    }
+    return cells;
+};

package/dist/DatePicker/utils/pad.d.ts

@@ -0,0 +1,2 @@
+export declare const pad: (n: number) => string;
+//# sourceMappingURL=pad.d.ts.map

package/dist/DatePicker/utils/pad.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pad.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/utils/pad.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,GAAG,GAAI,GAAG,MAAM,WAAkC,CAAC"}

package/dist/DatePicker/utils/pad.js

@@ -0,0 +1 @@
+export const pad = (n) => n.toString().padStart(2, '0');

package/dist/DatePicker/utils/parse-date.d.ts

@@ -0,0 +1,2 @@
+export declare const parseDate: (date: Date) => string;
+//# sourceMappingURL=parse-date.d.ts.map

package/dist/DatePicker/utils/parse-date.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parse-date.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/utils/parse-date.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,GAAI,MAAM,IAAI,KAAG,MAMtC,CAAA"}

package/dist/DatePicker/utils/parse-date.js

@@ -0,0 +1,6 @@
+export const parseDate = (date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}. ${month}. ${day}`;
+};

package/dist/index.d.ts

@@ -4,4 +4,5 @@ export * from "./TextInput";
 export * from "./Modal";
 export * from "./Dropdown";
 export * from "./Checkbox";
+export * from "./DatePicker";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC"}

package/dist/index.js

@@ -4,3 +4,4 @@ export * from "./TextInput";
 export * from "./Modal";
 export * from "./Dropdown";
 export * from "./Checkbox";
+export * from "./DatePicker";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bds-web/ui",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",