@bds-web/ui 1.18.0 → 1.19.0

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/ui/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAKjD,eAAO,MAAM,UAAU,GAAI,6CAKxB,eAAe,4CAyBjB,CAAC"}

package/dist/DatePicker/ui/index.js

@@ -1,21 +1,17 @@
 "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";
+import { CalendarIcon } from "../../CalendarIcon";
+import { formatDate } from "../utils/format-date";
+import { formatDateInput } from "../utils/format-date-input";
+import * as S from "./style";
 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" })] }) })] }));
+    const ref = useRef(null);
+    const value = formatDateInput(date);
+    const min = disablePast ? formatDateInput(new Date()) : undefined;
+    return (_jsxs(S.Container, { onClick: () => ref.current?.showPicker(), children: [_jsx(S.DateText, { children: formatDate(date) }), _jsx(CalendarIcon, { size: 16 }), _jsx(S.HiddenDateInput, { ref: ref, type: "date", value: value, min: min, "aria-label": title, onChange: (e) => {
+                    if (e.target.value) {
+                        onChangeDate(new Date(e.target.value));
+                    }
+                } })] }));
 };

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

@@ -6,49 +6,8 @@ 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<{
+export declare const HiddenDateInput: 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>, {}>;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
 //# sourceMappingURL=style.d.ts.map

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

@@ -1 +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"}
+{"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,eAAe;;;kHAK3B,CAAC"}

package/dist/DatePicker/ui/style.js

@@ -22,61 +22,9 @@ export const DateText = styled.span `
   flex: 1;
   user-select: none;
 `;
-export const Calender = styled.div `
-  background-color: ${colors.static.white};
-  border-radius: ${shapes.large};
+export const HiddenDateInput = styled.input `
   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;
+  inset: 0;
+  opacity: 0;
   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/format-date-input.d.ts

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

package/dist/DatePicker/utils/format-date-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-date-input.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/utils/format-date-input.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,GAAI,MAAM,IAAI,WAMzC,CAAC"}

package/dist/DatePicker/utils/format-date-input.js

@@ -0,0 +1,6 @@
+export const formatDateInput = (date) => {
+    const yyyy = date.getFullYear();
+    const mm = String(date.getMonth() + 1).padStart(2, "0");
+    const dd = String(date.getDate()).padStart(2, "0");
+    return `${yyyy}-${mm}-${dd}`;
+};

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

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

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

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

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

@@ -0,0 +1,8 @@
+export const formatDate = (date) => {
+    if (!date)
+        return "";
+    const d = new Date(date);
+    const month = (d.getMonth() + 1).toString().padStart(2, "0");
+    const day = d.getDate().toString().padStart(2, "0");
+    return `${d.getFullYear()}-${month}-${day}`;
+};

package/package.json

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