@deepnoid/ui 0.1.115 → 0.1.116

package/dist/index.mjs

@@ -1,17 +1,17 @@
 "use client";
-import "./chunk-MBLZYQCN.mjs";
-import {
-  tree_default
-} from "./chunk-5AEN7QTL.mjs";
 import "./chunk-LUWGOKLG.mjs";
 import {
   ToastProvider,
   useToast
-} from "./chunk-MTQGHQ7Z.mjs";
+} from "./chunk-MG5E5YZ7.mjs";
 import "./chunk-ZOTHPHXA.mjs";
 import {
   toast_default
-} from "./chunk-EDAREIAN.mjs";
+} from "./chunk-TRNL3IXF.mjs";
+import "./chunk-MBLZYQCN.mjs";
+import {
+  tree_default
+} from "./chunk-PMSUPDDW.mjs";
 import "./chunk-HIE2YRGA.mjs";
 import {
   tooltip_default
@@ -20,12 +20,11 @@ import "./chunk-ZMOAFSYE.mjs";
 import "./chunk-WSIADHVC.mjs";
 import "./chunk-DX3KXNP6.mjs";
 import {
-  table_default
-} from "./chunk-TMHYS2DC.mjs";
-import "./chunk-3MY6LO7N.mjs";
+  definition_table_default
+} from "./chunk-3M6VYLOU.mjs";
 import {
-  tabs_default
-} from "./chunk-NBJHZ4X2.mjs";
+  table_default
+} from "./chunk-TO6OPRBH.mjs";
 import "./chunk-RRAZM5D3.mjs";
 import {
   textarea_default
@@ -38,9 +37,10 @@ import "./chunk-LVFI2NOH.mjs";
 import {
   switch_default
 } from "./chunk-AGE57VDD.mjs";
+import "./chunk-3MY6LO7N.mjs";
 import {
-  definition_table_default
-} from "./chunk-3M6VYLOU.mjs";
+  tabs_default
+} from "./chunk-NBJHZ4X2.mjs";
 import "./chunk-TPFN22HR.mjs";
 import {
   radio_default
@@ -49,46 +49,46 @@ import "./chunk-DQRAFUDA.mjs";
 import {
   scrollArea_default
 } from "./chunk-M37VBNB3.mjs";
-import "./chunk-7B7LRG5J.mjs";
+import "./chunk-DJOG6Z35.mjs";
 import {
-  pagination_default
-} from "./chunk-UNYKQTEP.mjs";
-import "./chunk-F3HENRVM.mjs";
-import "./chunk-ZG4WRZOU.mjs";
+  modal_default
+} from "./chunk-HD2PTCE6.mjs";
+import "./chunk-4VWG4726.mjs";
 import {
   datePicker_default
-} from "./chunk-2VQM2ZBF.mjs";
+} from "./chunk-2Q25LXZT.mjs";
+import {
+  day_default
+} from "./chunk-4DESGO3D.mjs";
 import {
   timePicker_default
-} from "./chunk-AHBBUMPX.mjs";
+} from "./chunk-6VNOOJDQ.mjs";
 import "./chunk-QCEKPS7U.mjs";
 import {
   select_default
-} from "./chunk-QREBEXKF.mjs";
+} from "./chunk-RSD67ORA.mjs";
 import "./chunk-FWFEKWWD.mjs";
+import "./chunk-32GA3YW4.mjs";
 import "./chunk-7MVEAQ7Z.mjs";
 import {
   list_default
 } from "./chunk-3IILPVRA.mjs";
 import {
   listItem_default
-} from "./chunk-BFZ6OTVA.mjs";
-import "./chunk-DJOG6Z35.mjs";
+} from "./chunk-PHWTRXOL.mjs";
+import "./chunk-7B7LRG5J.mjs";
 import {
-  modal_default
-} from "./chunk-CEMBGO4V.mjs";
+  pagination_default
+} from "./chunk-3ZH6PWFC.mjs";
+import "./chunk-F3HENRVM.mjs";
 import "./chunk-MGEWSREV.mjs";
 import {
   chip_default
-} from "./chunk-BKYNB52Z.mjs";
-import "./chunk-32GA3YW4.mjs";
-import {
-  drawer_default
-} from "./chunk-S7Y7XUBL.mjs";
+} from "./chunk-676Y7NKV.mjs";
 import "./chunk-RLXOHILK.mjs";
 import {
   fileUpload_default
-} from "./chunk-NEBMBSKV.mjs";
+} from "./chunk-CUCLHYCE.mjs";
 import "./chunk-7VOQKIIK.mjs";
 import {
   progress_default
@@ -96,7 +96,10 @@ import {
 import "./chunk-2GCSFWHD.mjs";
 import {
   input_default
-} from "./chunk-L3WKBOWY.mjs";
+} from "./chunk-ER3SUAE2.mjs";
+import {
+  drawer_default
+} from "./chunk-S7Y7XUBL.mjs";
 import "./chunk-VYNBJBXD.mjs";
 import {
   areaChart_default
@@ -121,7 +124,7 @@ import {
 import "./chunk-KYIODWXL.mjs";
 import {
   breadcrumb_default
-} from "./chunk-7YCUFFKZ.mjs";
+} from "./chunk-VPGJ4HZ7.mjs";
 import "./chunk-MY5U63QO.mjs";
 import {
   text_button_default
@@ -131,10 +134,10 @@ import {
 } from "./chunk-ITWKPTSD.mjs";
 import {
   button_default
-} from "./chunk-AX3FVJMY.mjs";
+} from "./chunk-F7PC2JAF.mjs";
 import {
   icon_button_default
-} from "./chunk-WKMBRUGX.mjs";
+} from "./chunk-LZRBMVT7.mjs";
 import "./chunk-6WSACUIB.mjs";
 import "./chunk-LXHUO6VM.mjs";
 import "./chunk-SZL743JC.mjs";
@@ -142,7 +145,7 @@ import "./chunk-ZYIIXWVY.mjs";
 import {
   Icon_default,
   iconTemplate
-} from "./chunk-FU4CDBVG.mjs";
+} from "./chunk-HLYTCS7L.mjs";
 import "./chunk-NMSDSEBD.mjs";
 import {
   accordion_default
@@ -154,8 +157,8 @@ import "./chunk-E3G5QXSH.mjs";
 import "./chunk-7DLOYKVC.mjs";
 import {
   avatar_default
-} from "./chunk-MLD6EZAE.mjs";
-import "./chunk-DDJ2EU3P.mjs";
+} from "./chunk-UPPNTDNG.mjs";
+import "./chunk-LCWEO4U6.mjs";
 import {
   deepnoidUi,
   tv
@@ -177,6 +180,7 @@ export {
   chip_default as Chip,
   circularProgress_default as CircularProgress,
   datePicker_default as DatePicker,
+  day_default as Day,
   definition_table_default as DefinitionTable,
   drawer_default as Drawer,
   fileUpload_default as FileUpload,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepnoid/ui",
-  "version": "0.1.115",
+  "version": "0.1.116",
   "license": "MIT",
   "sideEffects": false,
   "exports": {

package/dist/chunk-2VQM2ZBF.mjs

@@ -1,408 +0,0 @@
-"use client";
-import {
-  formatDateToString,
-  formatStringToDate
-} from "./chunk-FWFEKWWD.mjs";
-import {
-  Icon_default
-} from "./chunk-FU4CDBVG.mjs";
-import {
-  mapPropsVariants
-} from "./chunk-E3G5QXSH.mjs";
-import {
-  tv
-} from "./chunk-CDXBML6O.mjs";
-import {
-  clsx
-} from "./chunk-27Y6K5NK.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
-};