@deepnoid/ui 0.1.156 → 0.1.157

package/dist/chunk-TCURFCQ2.mjs

@@ -1,315 +0,0 @@
-"use client";
-import {
-  day_default
-} from "./chunk-4DESGO3D.mjs";
-import {
-  formatDateToString,
-  formatStringToDate
-} from "./chunk-FWFEKWWD.mjs";
-import {
-  input_default
-} from "./chunk-47MQPUEY.mjs";
-import {
-  text_button_default
-} from "./chunk-Q364C3FI.mjs";
-import {
-  button_default
-} from "./chunk-UIRHCS6B.mjs";
-import {
-  icon_button_default
-} from "./chunk-7RG7CQQM.mjs";
-import {
-  Icon_default
-} from "./chunk-Q2YLULZH.mjs";
-import {
-  mapPropsVariants
-} from "./chunk-E3G5QXSH.mjs";
-import {
-  tv
-} from "./chunk-CDXBML6O.mjs";
-
-// src/components/picker/datePicker.tsx
-import {
-  forwardRef,
-  useCallback,
-  useMemo,
-  useState,
-  useRef,
-  useEffect,
-  Fragment
-} from "react";
-import { createPortal } from "react-dom";
-import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
-var DatePicker = forwardRef((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, datePickerStyle.variantKeys);
-  const {
-    classNames,
-    label,
-    errorMessage,
-    helperMessage,
-    value,
-    onChange,
-    size = "md",
-    variant = "solid",
-    color = "primary",
-    full = false,
-    disabled = false,
-    placeholder = "",
-    format = "YYYY-MM-DD",
-    locale = "default",
-    daysOfWeek = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"],
-    monthYearFormat = (year, month) => locale === "default" ? `${year}. ${(month + 1).toString().padStart(2, "0")}` : new Date(year, month).toLocaleString(locale, { year: "numeric", month: "2-digit" }),
-    resetTitle,
-    todayTitle,
-    cancelTitle,
-    confirmTitle,
-    ...inputProps
-  } = { ...props, ...variantProps };
-  const [selectedDate, setSelectedDate] = useState(value || "");
-  const [tempSelectedDate, setTempSelectedDate] = useState(value || "");
-  const [isPanelOpen, setIsPanelOpen] = useState(false);
-  const [currentDate, setCurrentDate] = useState(tempSelectedDate ? new Date(tempSelectedDate) : /* @__PURE__ */ new Date());
-  const inputWrapperRef = useRef(null);
-  const calendarWrapperRef = useRef(null);
-  const [panelPos, setPanelPos] = useState({ top: -9999, left: -9999 });
-  const blurTimeoutRef = useRef(null);
-  const formatDate = (dateString) => {
-    if (!dateString) return "";
-    const [year, month, day] = dateString.split("-");
-    switch (format) {
-      case "MM/DD/YYYY":
-        return `${month}/${day}/${year}`;
-      case "DD/MM/YYYY":
-        return `${day}/${month}/${year}`;
-      default:
-        return dateString;
-    }
-  };
-  const displayValue = useMemo(() => formatDate(selectedDate), [selectedDate, format]);
-  const calculatePosition = useCallback(() => {
-    if (inputWrapperRef.current) {
-      const rect = inputWrapperRef.current.getBoundingClientRect();
-      setPanelPos({ top: rect.bottom + window.scrollY + 6, left: rect.left + window.scrollX });
-    }
-  }, []);
-  const handleFocusInput = () => {
-    if (disabled) return;
-    if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
-    calculatePosition();
-    setIsPanelOpen(true);
-  };
-  const handleClose = () => {
-    blurTimeoutRef.current = setTimeout(() => setIsPanelOpen(false), 100);
-  };
-  const handleInputKeyDown = (e) => {
-    if (disabled) return;
-    if (["Enter", " "].includes(e.key)) {
-      e.preventDefault();
-      calculatePosition();
-      setIsPanelOpen((prev) => !prev);
-    } else if (e.key === "Escape") setIsPanelOpen(false);
-  };
-  const handleCalendarIconClick = (e) => {
-    e.preventDefault();
-    if (disabled) return;
-    if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
-    calculatePosition();
-    setIsPanelOpen((prev) => !prev);
-  };
-  const handleClearDate = (e) => {
-    e.preventDefault();
-    setTempSelectedDate("");
-  };
-  const handleCalendarMouseDown = (e) => {
-    e.preventDefault();
-    if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
-  };
-  const getCalendarDates = useCallback(() => {
-    const year = currentDate.getFullYear();
-    const month = currentDate.getMonth();
-    const firstDayOfMonth = new Date(year, month, 1).getDay();
-    const lastDateOfMonth = new Date(year, month + 1, 0).getDate();
-    const lastDateOfPrevMonth = new Date(year, month, 0).getDate();
-    let dates = [];
-    for (let i = firstDayOfMonth - 1; i >= 0; i--) dates.push({ date: lastDateOfPrevMonth - i, currentMonth: false });
-    for (let date = 1; date <= lastDateOfMonth; date++) dates.push({ date, currentMonth: true });
-    const remainingDays = 42 - dates.length;
-    for (let i = 1; i <= remainingDays; i++) dates.push({ date: i, currentMonth: false });
-    const weeks = [];
-    for (let i = 0; i < dates.length; i += 7) weeks.push(dates.slice(i, i + 7));
-    return weeks;
-  }, [currentDate]);
-  const handlePrevMonth = () => setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1));
-  const handleNextMonth = () => setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1));
-  const handleDateSelect = (date, isCurrentMonth) => {
-    if (!isCurrentMonth) return;
-    const selected = new Date(currentDate.getFullYear(), currentDate.getMonth(), date);
-    const formatted = formatDateToString(selected);
-    setTempSelectedDate(formatted);
-  };
-  const handleSetToday = () => {
-    const today = /* @__PURE__ */ new Date();
-    const formatted = formatDateToString(today);
-    setCurrentDate(today);
-    setTempSelectedDate(formatted);
-  };
-  const handleConfirmDate = () => {
-    setSelectedDate(tempSelectedDate);
-    onChange == null ? void 0 : onChange(tempSelectedDate);
-    setIsPanelOpen(false);
-  };
-  const handleResetDate = () => {
-    setTempSelectedDate(selectedDate);
-    setIsPanelOpen(false);
-  };
-  const getDayProps = useCallback(
-    (dateObj) => {
-      const today = /* @__PURE__ */ new Date();
-      const isToday = today.getDate() === dateObj.date && today.getMonth() === currentDate.getMonth() && today.getFullYear() === currentDate.getFullYear();
-      const formatted = tempSelectedDate ? formatStringToDate(tempSelectedDate) : null;
-      const isSelected = (formatted == null ? void 0 : formatted.getDate()) === dateObj.date && formatted.getMonth() === currentDate.getMonth() && formatted.getFullYear() === currentDate.getFullYear();
-      return dateObj.currentMonth && isSelected ? "selected" : dateObj.currentMonth && isToday ? "today" : !dateObj.currentMonth ? "disabled" : "default";
-    },
-    [tempSelectedDate, currentDate]
-  );
-  useEffect(() => {
-    setSelectedDate(value || "");
-    setTempSelectedDate(value || "");
-    if (value) setCurrentDate(new Date(value));
-  }, [value]);
-  const slots = useMemo(() => datePickerStyle({ ...variantProps }), [variantProps]);
-  const endContent = /* @__PURE__ */ jsx(Icon_default, { name: "calendar", size, className: "cursor-pointer", fill: true, onClick: handleCalendarIconClick });
-  return /* @__PURE__ */ jsxs(Fragment2, { children: [
-    /* @__PURE__ */ jsx("div", { ref: inputWrapperRef, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), onClick: handleFocusInput, children: /* @__PURE__ */ jsx(
-      input_default,
-      {
-        ...inputProps,
-        ref,
-        label,
-        value: displayValue,
-        placeholder,
-        errorMessage,
-        helperMessage,
-        size,
-        variant,
-        color,
-        full,
-        disabled,
-        endContent,
-        onFocus: handleFocusInput,
-        onBlur: handleClose,
-        onKeyDown: handleInputKeyDown,
-        onChange: () => {
-        },
-        classNames: {
-          base: classNames == null ? void 0 : classNames.inputBase,
-          inputWrapper: classNames == null ? void 0 : classNames.inputWrapper,
-          input: classNames == null ? void 0 : classNames.input,
-          label: classNames == null ? void 0 : classNames.label,
-          errorMessage: classNames == null ? void 0 : classNames.errorMessage,
-          helperMessage: classNames == null ? void 0 : classNames.helperMessage
-        }
-      }
-    ) }),
-    isPanelOpen && createPortal(
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: calendarWrapperRef,
-          className: slots.calendarWrapper({ class: classNames == null ? void 0 : classNames.calendarWrapper }),
-          style: { position: "absolute", top: panelPos.top, left: panelPos.left, zIndex: 1e3 },
-          onMouseDown: handleCalendarMouseDown,
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: slots.calendarHead({ class: classNames == null ? void 0 : classNames.calendarHead }), children: [
-              /* @__PURE__ */ jsx(icon_button_default, { name: "left", variant: "soft", color: "neutral", onClick: handlePrevMonth }),
-              /* @__PURE__ */ jsx("span", { className: "text-xl font-extrabold", children: monthYearFormat(currentDate.getFullYear(), currentDate.getMonth()) }),
-              /* @__PURE__ */ jsx(icon_button_default, { name: "right", variant: "soft", color: "neutral", onClick: handleNextMonth })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7", children: daysOfWeek.map((day, index) => /* @__PURE__ */ jsx(day_default, { variant: "text", children: day }, `${day}-${index}`)) }),
-            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-[5px] text-center", children: getCalendarDates().map((week, weekIndex) => /* @__PURE__ */ jsx(Fragment, { children: week.map((dateObj, index) => /* @__PURE__ */ jsx(
-              day_default,
-              {
-                variant: getDayProps(dateObj),
-                onClick: () => handleDateSelect(dateObj.date, dateObj.currentMonth),
-                children: dateObj.date
-              },
-              index
-            )) }, weekIndex)) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex justify-between px-[10px]", children: [
-              /* @__PURE__ */ jsx(
-                text_button_default,
-                {
-                  variant: "underline",
-                  color: "neutral",
-                  size: "sm",
-                  classNames: { base: "font-bold" },
-                  onClick: handleClearDate,
-                  children: resetTitle
-                }
-              ),
-              /* @__PURE__ */ jsx(text_button_default, { variant: "underline", size: "sm", classNames: { base: "font-bold" }, onClick: handleSetToday, children: todayTitle })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex gap-[10px]", children: [
-              /* @__PURE__ */ jsx(
-                button_default,
-                {
-                  variant: "soft",
-                  color: "neutral",
-                  size: "sm",
-                  classNames: { base: "flex flex-1" },
-                  onClick: handleResetDate,
-                  children: cancelTitle
-                }
-              ),
-              /* @__PURE__ */ jsx(button_default, { size: "sm", classNames: { base: "flex flex-1" }, onClick: handleConfirmDate, children: confirmTitle })
-            ] })
-          ]
-        }
-      ),
-      document.body
-    )
-  ] });
-});
-DatePicker.displayName = "DatePicker";
-var datePicker_default = DatePicker;
-var datePickerStyle = tv({
-  slots: {
-    base: ["group/datepicker", "flex", "flex-col", "cursor-pointer"],
-    calendarWrapper: [
-      "flex",
-      "flex-col",
-      "rounded-xl",
-      "bg-body-background",
-      "shadow-drop-xl",
-      "gap-[5px]",
-      "overflow-auto",
-      "w-[300px]",
-      "select-none",
-      "p-[10px]"
-    ],
-    calendarHead: ["calendar-header", "flex", "items-center", "justify-between", "h-[40px]"],
-    inputBase: [],
-    inputWrapper: [],
-    input: [],
-    label: [],
-    errorMessage: [],
-    helperMessage: []
-  },
-  variants: {
-    color: { primary: {}, secondary: {} },
-    size: { sm: {}, md: {}, lg: {}, xl: {} },
-    full: { true: { base: ["w-full"] } },
-    disabled: { true: { base: ["pointer-events-none"] } }
-  },
-  defaultVariants: {
-    color: "primary",
-    size: "md",
-    full: false,
-    disabled: false
-  }
-});
-
-export {
-  datePicker_default,
-  datePickerStyle
-};