@deepnoid/ui 0.1.111 → 0.1.113

package/dist/chunk-K4XJAP6G.mjs

@@ -0,0 +1,408 @@
+"use client";
+import {
+  formatDateToString,
+  formatStringToDate
+} from "./chunk-FWFEKWWD.mjs";
+import {
+  Icon_default
+} from "./chunk-FU4CDBVG.mjs";
+import {
+  clsx
+} from "./chunk-27Y6K5NK.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-CDXBML6O.mjs";
+
+// src/components/picker/datePicker.tsx
+import React, { forwardRef, useCallback, useMemo, useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DatePicker = forwardRef((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, datePickerStyle.variantKeys);
+  const {
+    classNames,
+    label,
+    errorMessage,
+    value,
+    onChange,
+    size,
+    placeholder = "",
+    format = "YYYY-MM-DD",
+    highlightWeekend = true,
+    calendarColor = "primary",
+    locale = "default",
+    daysOfWeek = ["S", "M", "T", "W", "T", "F", "S"],
+    monthYearFormat = (year, month) => new Date(year, month).toLocaleString(locale, { year: "numeric", month: "2-digit" }),
+    ...inputProps
+  } = props;
+  const [selectedDate, setSelectedDate] = useState(value || "");
+  const [isPanelOpen, setIsPanelOpen] = useState(false);
+  const [currentDate, setCurrentDate] = useState(selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date());
+  const inputWrapperRef = useRef(null);
+  const panelWrapperRef = useRef(null);
+  const [panelPos, setPanelPos] = useState({ top: -9999, left: -9999 });
+  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(() => {
+    return 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 = () => {
+    calculatePosition();
+    setIsPanelOpen(true);
+  };
+  const handleInputBlur = () => {
+    setTimeout(() => setIsPanelOpen(false), 150);
+  };
+  const handleInputKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      calculatePosition();
+      setIsPanelOpen((prev) => !prev);
+    } else if (e.key === "Escape") {
+      setIsPanelOpen(false);
+    }
+  };
+  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);
+    setSelectedDate(formatted);
+    onChange == null ? void 0 : onChange(formatted);
+    setIsPanelOpen(false);
+  };
+  const handleClearDate = () => {
+    setSelectedDate("");
+    onChange == null ? void 0 : onChange("");
+  };
+  const slots = useMemo(() => datePickerStyle({ ...variantProps }), [variantProps]);
+  const getDateTitleProps = useCallback(
+    (index) => {
+      return {
+        className: clsx(
+          "text-sm font-[500]",
+          highlightWeekend && index === 6 && "text-[#1E7EEE]",
+          highlightWeekend && index === 0 && "text-[#FF4684]"
+        )
+      };
+    },
+    [highlightWeekend]
+  );
+  const getDateProps = useCallback(
+    (dateObj) => {
+      const today = /* @__PURE__ */ new Date();
+      const isToday = today.getDate() === dateObj.date && today.getMonth() === currentDate.getMonth() && today.getFullYear() === currentDate.getFullYear();
+      const formatted = selectedDate ? formatStringToDate(selectedDate) : null;
+      const isSelected = formatted ? formatted.getDate() === dateObj.date && formatted.getMonth() === currentDate.getMonth() && formatted.getFullYear() === currentDate.getFullYear() : false;
+      const dayOfWeek = new Date(currentDate.getFullYear(), currentDate.getMonth(), dateObj.date).getDay();
+      return {
+        className: clsx(
+          "flex justify-center items-center h-[25px] text-sm rounded-full cursor-pointer hover:bg-neutral-light",
+          dateObj.currentMonth && isToday && "border border-foreground",
+          dateObj.currentMonth && isSelected && "!text-white border-none",
+          calendarColor === "primary" && dateObj.currentMonth && isSelected && "!border-primary-main bg-primary-main",
+          calendarColor === "secondary" && dateObj.currentMonth && isSelected && "!border-secondary-main bg-secondary-main",
+          highlightWeekend && dayOfWeek === 6 && "text-neutral-main",
+          highlightWeekend && dayOfWeek === 6 && isToday && "!border-neutral-light",
+          highlightWeekend && dayOfWeek === 0 && "text-danger-main",
+          highlightWeekend && dayOfWeek === 0 && isToday && "!border-danger-light",
+          !dateObj.currentMonth && "!text-neutral-main cursor-default hover:bg-transparent"
+        ),
+        onClick: () => handleDateSelect(dateObj.date, dateObj.currentMonth)
+      };
+    },
+    [selectedDate, currentDate, highlightWeekend, calendarColor]
+  );
+  const calendarDates = getCalendarDates();
+  useEffect(() => {
+    if (value !== void 0) {
+      setSelectedDate(value);
+      if (value) {
+        setCurrentDate(new Date(value));
+      }
+    }
+  }, [value]);
+  useEffect(() => {
+    if (selectedDate) {
+      setCurrentDate(new Date(selectedDate));
+    }
+  }, [selectedDate]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+      label && /* @__PURE__ */ jsx("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+      /* @__PURE__ */ jsxs("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+        /* @__PURE__ */ jsxs("div", { ref: inputWrapperRef, className: slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper }), children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...inputProps,
+              ref,
+              className: slots.input({ class: classNames == null ? void 0 : classNames.input }),
+              type: "text",
+              value: displayValue,
+              placeholder,
+              readOnly: true,
+              onFocus: handleFocusInput,
+              onBlur: handleInputBlur,
+              onKeyDown: handleInputKeyDown
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }), children: [
+            displayValue && /* @__PURE__ */ jsx(
+              Icon_default,
+              {
+                name: "close",
+                className: "text-neutral-light hover:text-neutral-main mr-[5px] cursor-pointer",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleClearDate();
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Icon_default,
+              {
+                name: "calendar",
+                className: "cursor-pointer",
+                fill: true,
+                onClick: () => {
+                  calculatePosition();
+                  setIsPanelOpen((v) => !v);
+                }
+              }
+            )
+          ] })
+        ] }),
+        errorMessage && /* @__PURE__ */ jsx("p", { className: clsx("error", slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })), children: errorMessage })
+      ] })
+    ] }),
+    isPanelOpen && createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: panelWrapperRef,
+          className: slots.optionsWrapper({ class: classNames == null ? void 0 : classNames.optionsWrapper }),
+          style: {
+            position: "absolute",
+            top: panelPos.top,
+            left: panelPos.left,
+            zIndex: 1e3
+          },
+          onMouseDown: (e) => e.preventDefault(),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "calendar-header mb-4 flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx(Icon_default, { name: "brace-left", size: "md", className: "cursor-pointer", onClick: handlePrevMonth }),
+              /* @__PURE__ */ jsx("span", { className: "text-h6 font-semibold", children: monthYearFormat(currentDate.getFullYear(), currentDate.getMonth()) }),
+              /* @__PURE__ */ jsx(Icon_default, { name: "brace-right", size: "md", className: "cursor-pointer", onClick: handleNextMonth })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-2 text-center", children: daysOfWeek.map((day, index) => /* @__PURE__ */ jsx("div", { ...getDateTitleProps(index), children: day }, `${day}-${index}`)) }),
+            /* @__PURE__ */ jsx("div", { className: "mt-2 grid grid-cols-7 gap-[5px] text-center", children: calendarDates.map((week, weekIndex) => {
+              const hasCurrentMonthDates = week.some((dateObj) => dateObj.currentMonth);
+              if (!hasCurrentMonthDates) return null;
+              return /* @__PURE__ */ jsx(React.Fragment, { children: week.map((dateObj, index) => {
+                return /* @__PURE__ */ jsx("div", { ...getDateProps(dateObj), children: dateObj.date }, index);
+              }) }, weekIndex);
+            }) })
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+});
+DatePicker.displayName = "DatePicker";
+var datePicker_default = DatePicker;
+var datePickerStyle = tv({
+  slots: {
+    base: ["group/datepicker", "flex", "flex-col"],
+    label: ["flex", "items-center", "font-bold", "text-body-foreground", "min-w-[80px]"],
+    wrapper: ["flex", "flex-col"],
+    inputWrapper: [
+      "flex",
+      "items-center",
+      "justify-between",
+      "border",
+      "cursor-pointer",
+      "text-neutral-main",
+      "group-has-[p.error]/datepicker:border-danger-main",
+      "group-has-[p.error]/datepicker:bg-danger-soft",
+      "group-has-[p.error]/datepicker:text-danger-main",
+      "group-has-[p.error]/datepicker:hover:bg-danger-soft"
+    ],
+    input: [
+      "bg-transparent",
+      "w-full",
+      "outline-none",
+      "placeholder:text-neutral-main",
+      "text-body-foreground",
+      "group-has-[p.error]/datepicker:text-danger-main",
+      "group-has-[p.error]/datepicker:placeholder:text-danger-main",
+      "cursor-pointer"
+    ],
+    icon: [
+      "flex",
+      "items-center",
+      "select-none",
+      "text-body-foreground",
+      "group-has-[p.error]/datepicker:text-danger-main"
+    ],
+    optionsWrapper: [
+      "flex",
+      "flex-col",
+      "border",
+      "rounded-md",
+      "bg-body-background",
+      "shadow-lg",
+      "overflow-auto",
+      "w-[240px]",
+      "select-none",
+      "p-[10px]"
+    ],
+    errorMessage: ["text-danger-main", "text-sm"]
+  },
+  variants: {
+    color: {
+      primary: {
+        icon: ["text-primary-main"]
+      },
+      secondary: {
+        icon: ["text-secondary-main"]
+      }
+    },
+    size: {
+      sm: {
+        base: ["text-sm", "gap-[4px]"],
+        label: ["text-sm"],
+        wrapper: ["gap-[4px]"],
+        inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[4px]"],
+        input: ["text-sm"],
+        icon: ["text-sm"],
+        errorMessage: ["text-sm"]
+      },
+      md: {
+        base: ["text-md", "gap-[6px]"],
+        label: ["text-md"],
+        wrapper: ["gap-[6px]"],
+        inputWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-[6px]"],
+        input: ["text-md"],
+        icon: ["text-md"],
+        errorMessage: ["text-sm"]
+      },
+      lg: {
+        base: ["text-lg", "gap-[8px]"],
+        label: ["text-lg"],
+        wrapper: ["gap-[8px]"],
+        inputWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-[8px]"],
+        input: ["text-lg"],
+        icon: ["text-lg"],
+        errorMessage: ["text-md"]
+      },
+      xl: {
+        base: ["text-xl", "gap-[10px]"],
+        label: ["text-xl"],
+        wrapper: ["gap-[10px]"],
+        inputWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-[10px]"],
+        input: ["text-xl"],
+        icon: ["text-xl"],
+        errorMessage: ["text-md"]
+      }
+    },
+    full: {
+      true: {
+        base: ["w-full"],
+        wrapper: ["w-full"],
+        inputWrapper: ["w-full"]
+      }
+    },
+    disabled: {
+      true: {
+        base: ["pointer-events-none"],
+        label: ["text-neutral-light"],
+        inputWrapper: [
+          "bg-neutral-soft",
+          "border-neutral-light",
+          "group-has-[p.error]/datepicker:text-danger-light",
+          "group-has-[p.error]/datepicker:bg-danger-soft",
+          "group-has-[p.error]/datepicker:border-danger-light",
+          "cursor-not-allowed"
+        ],
+        input: [
+          "text-neutral-light",
+          "placeholder:text-neutral-light",
+          "group-has-[p.error]/datepicker:text-danger-light",
+          "group-has-[p.error]/datepicker:placeholder:text-danger-light",
+          "cursor-not-allowed"
+        ],
+        icon: ["text-neutral-light"],
+        errorMessage: ["text-danger-light"]
+      }
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    full: false,
+    disabled: false
+  }
+});
+
+export {
+  datePicker_default,
+  datePickerStyle
+};

package/dist/{chunk-HBEPQQOM.mjs → chunk-KOELCZTB.mjs}

@@ -1,13 +1,13 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-33DLD2L6.mjs";
-import {
-  tv
-} from "./chunk-CDXBML6O.mjs";
+} from "./chunk-FU4CDBVG.mjs";
 import {
   clsx
 } from "./chunk-27Y6K5NK.mjs";
+import {
+  tv
+} from "./chunk-CDXBML6O.mjs";
 
 // src/components/tree/tree.tsx
 import { forwardRef, useMemo, useState, useCallback } from "react";

package/dist/{chunk-CV6IVDL6.mjs → chunk-LXDKYJ5H.mjs}

@@ -1,10 +1,13 @@
 "use client";
 import {
   select_default
-} from "./chunk-YCLB7ZNK.mjs";
+} from "./chunk-S6ZXK2UP.mjs";
 import {
   Icon_default
-} from "./chunk-33DLD2L6.mjs";
+} from "./chunk-FU4CDBVG.mjs";
+import {
+  clsx
+} from "./chunk-27Y6K5NK.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
@@ -154,7 +157,7 @@ var TimePicker = forwardRef((originalProps, ref) => {
             )
           ] })
         ] }),
-        errorMessage && /* @__PURE__ */ jsx("p", { className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage }), children: errorMessage })
+        errorMessage && /* @__PURE__ */ jsx("p", { className: clsx("error", slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })), children: errorMessage })
       ] })
     ] }),
     isPanelOpen && createPortal(
@@ -244,10 +247,10 @@ var timePickerStyle = tv({
       "cursor-pointer",
       "text-neutral-main",
       "hover:bg-trans-soft",
-      "group-has-[p.error]/input:border-danger-main",
-      "group-has-[p.error]/input:bg-danger-soft",
-      "group-has-[p.error]/input:text-danger-main",
-      "group-has-[p.error]/input:hover:bg-danger-soft"
+      "group-has-[p.error]/timepicker:border-danger-main",
+      "group-has-[p.error]/timepicker:bg-danger-soft",
+      "group-has-[p.error]/timepicker:text-danger-main",
+      "group-has-[p.error]/timepicker:hover:bg-danger-soft"
     ],
     input: [
       "bg-transparent",
@@ -255,13 +258,19 @@ var timePickerStyle = tv({
       "outline-none",
       "placeholder:text-neutral-main",
       "text-body-foreground",
-      "group-has-[p.error]/input:text-danger-main",
-      "group-has-[p.error]/input:placeholder:text-danger-main",
+      "group-has-[p.error]/timepicker:text-danger-main",
+      "group-has-[p.error]/timepicker:placeholder:text-danger-main",
       "cursor-pointer"
     ],
-    icon: ["flex", "items-center", "select-none", "text-body-foreground", "group-has-[p.error]/input:text-danger-main"],
+    icon: [
+      "flex",
+      "items-center",
+      "select-none",
+      "text-body-foreground",
+      "group-has-[p.error]/timepicker:text-danger-main"
+    ],
     optionsWrapper: ["border", "rounded", "bg-body-background", "shadow", "overflow-auto"],
-    errorMessage: ["text-danger-main", "mt-1", "text-sm"],
+    errorMessage: ["text-danger-main", "text-sm"],
     selectWrapper: []
   },
   variants: {
@@ -325,16 +334,16 @@ var timePickerStyle = tv({
         inputWrapper: [
           "bg-neutral-soft",
           "border-neutral-light",
-          "group-has-[p.error]/input:text-danger-light",
-          "group-has-[p.error]/input:bg-danger-soft",
-          "group-has-[p.error]/input:border-danger-light",
+          "group-has-[p.error]/timepicker:text-danger-light",
+          "group-has-[p.error]/timepicker:bg-danger-soft",
+          "group-has-[p.error]/timepicker:border-danger-light",
           "cursor-not-allowed"
         ],
         input: [
           "text-neutral-light",
           "placeholder:text-neutral-light",
-          "group-has-[p.error]/input:text-danger-light",
-          "group-has-[p.error]/input:placeholder:text-danger-light",
+          "group-has-[p.error]/timepicker:text-danger-light",
+          "group-has-[p.error]/timepicker:placeholder:text-danger-light",
           "cursor-not-allowed"
         ],
         icon: ["text-neutral-light"],

package/dist/{chunk-EQWU2F5T.mjs → chunk-MLD6EZAE.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   template
-} from "./chunk-XEEDMB5O.mjs";
+} from "./chunk-DDJ2EU3P.mjs";
 import {
   tv
 } from "./chunk-CDXBML6O.mjs";

package/dist/{chunk-KPNIWFLU.mjs → chunk-OMVVASRP.mjs}

@@ -1,13 +1,13 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-33DLD2L6.mjs";
+} from "./chunk-FU4CDBVG.mjs";
+import {
+  avatar_default
+} from "./chunk-MLD6EZAE.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
-import {
-  avatar_default
-} from "./chunk-EQWU2F5T.mjs";
 import {
   tv
 } from "./chunk-CDXBML6O.mjs";

package/dist/{chunk-XRYETYWI.mjs → chunk-PYCIG6N3.mjs}

@@ -1,16 +1,16 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-33DLD2L6.mjs";
+} from "./chunk-FU4CDBVG.mjs";
+import {
+  clsx
+} from "./chunk-27Y6K5NK.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
 } from "./chunk-CDXBML6O.mjs";
-import {
-  clsx
-} from "./chunk-27Y6K5NK.mjs";
 
 // src/components/input/input.tsx
 import {

package/dist/{chunk-YCLB7ZNK.mjs → chunk-S6ZXK2UP.mjs}

@@ -1,16 +1,16 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-33DLD2L6.mjs";
+} from "./chunk-FU4CDBVG.mjs";
+import {
+  clsx
+} from "./chunk-27Y6K5NK.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
 } from "./chunk-CDXBML6O.mjs";
-import {
-  clsx
-} from "./chunk-27Y6K5NK.mjs";
 
 // src/components/select/select.tsx
 import { forwardRef, useMemo, useState, useRef, useEffect } from "react";

package/dist/{chunk-GDKDD2MW.mjs → chunk-TLOKYBIC.mjs}

@@ -4,19 +4,19 @@ import {
 } from "./chunk-F3HENRVM.mjs";
 import {
   input_default
-} from "./chunk-XRYETYWI.mjs";
+} from "./chunk-PYCIG6N3.mjs";
 import {
   Icon_default
-} from "./chunk-33DLD2L6.mjs";
+} from "./chunk-FU4CDBVG.mjs";
+import {
+  clsx
+} from "./chunk-27Y6K5NK.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
 } from "./chunk-CDXBML6O.mjs";
-import {
-  clsx
-} from "./chunk-27Y6K5NK.mjs";
 
 // src/components/pagination/pagination.tsx
 import { forwardRef, useMemo, useState } from "react";