@deepnoid/ui 0.1.109 → 0.1.111

package/dist/index.mjs

@@ -3,6 +3,16 @@ import "./chunk-MBLZYQCN.mjs";
 import {
   tree_default
 } from "./chunk-HBEPQQOM.mjs";
+import "./chunk-HIE2YRGA.mjs";
+import {
+  tooltip_default
+} from "./chunk-YBVJFHH6.mjs";
+import "./chunk-ZMOAFSYE.mjs";
+import "./chunk-WSIADHVC.mjs";
+import "./chunk-3MY6LO7N.mjs";
+import {
+  tabs_default
+} from "./chunk-NBJHZ4X2.mjs";
 import "./chunk-RRAZM5D3.mjs";
 import {
   textarea_default
@@ -11,57 +21,62 @@ import "./chunk-LUWGOKLG.mjs";
 import {
   ToastProvider,
   useToast
-} from "./chunk-IQYWSATB.mjs";
-import "./chunk-ZOTHPHXA.mjs";
+} from "./chunk-X67ELNP6.mjs";
 import {
   toast_default
 } from "./chunk-J5K7RN5X.mjs";
-import "./chunk-HIE2YRGA.mjs";
+import "./chunk-ZOTHPHXA.mjs";
+import "./chunk-LVFI2NOH.mjs";
 import {
-  tooltip_default
-} from "./chunk-YBVJFHH6.mjs";
-import "./chunk-ZMOAFSYE.mjs";
-import "./chunk-WSIADHVC.mjs";
+  switch_default
+} from "./chunk-AGE57VDD.mjs";
 import "./chunk-DX3KXNP6.mjs";
 import {
   definition_table_default
 } from "./chunk-3M6VYLOU.mjs";
 import {
   table_default
-} from "./chunk-2OK3VF75.mjs";
-import "./chunk-3MY6LO7N.mjs";
+} from "./chunk-U3O7RIXM.mjs";
+import "./chunk-MZ76AA76.mjs";
 import {
-  tabs_default
-} from "./chunk-NBJHZ4X2.mjs";
+  skeleton_default
+} from "./chunk-6PN3DGOE.mjs";
 import "./chunk-DQRAFUDA.mjs";
 import {
   scrollArea_default
 } from "./chunk-M37VBNB3.mjs";
-import "./chunk-QCEKPS7U.mjs";
+import "./chunk-7B7LRG5J.mjs";
 import {
-  select_default
-} from "./chunk-2EECKYM4.mjs";
-import "./chunk-MZ76AA76.mjs";
+  pagination_default
+} from "./chunk-GDKDD2MW.mjs";
+import "./chunk-F3HENRVM.mjs";
+import "./chunk-BG7VAVOX.mjs";
 import {
-  skeleton_default
-} from "./chunk-6PN3DGOE.mjs";
-import "./chunk-LVFI2NOH.mjs";
+  timePicker_default
+} from "./chunk-CV6IVDL6.mjs";
+import "./chunk-QCEKPS7U.mjs";
 import {
-  switch_default
-} from "./chunk-AGE57VDD.mjs";
+  select_default
+} from "./chunk-YCLB7ZNK.mjs";
 import "./chunk-TPFN22HR.mjs";
 import {
   radio_default
 } from "./chunk-FF56E2UQ.mjs";
+import "./chunk-7MVEAQ7Z.mjs";
+import {
+  list_default
+} from "./chunk-3IILPVRA.mjs";
+import {
+  listItem_default
+} from "./chunk-KPNIWFLU.mjs";
 import "./chunk-DJOG6Z35.mjs";
 import {
   modal_default
 } from "./chunk-3I35VMMV.mjs";
-import "./chunk-7B7LRG5J.mjs";
+import "./chunk-MGEWSREV.mjs";
 import {
-  pagination_default
-} from "./chunk-GDKDD2MW.mjs";
-import "./chunk-F3HENRVM.mjs";
+  chip_default
+} from "./chunk-7K463ANW.mjs";
 import "./chunk-32GA3YW4.mjs";
 import {
   drawer_default
@@ -78,25 +93,6 @@ import "./chunk-2GCSFWHD.mjs";
 import {
   input_default
 } from "./chunk-XRYETYWI.mjs";
-import "./chunk-MGEWSREV.mjs";
-import {
-  chip_default
-} from "./chunk-7K463ANW.mjs";
-import "./chunk-75HLCORR.mjs";
-import {
-  dateTimePicker_default
-} from "./chunk-ZSQQFMEC.mjs";
-import "./chunk-Y4W76B42.mjs";
-import "./chunk-X5XJWJSO.mjs";
-import "./chunk-7MVEAQ7Z.mjs";
-import {
-  list_default
-} from "./chunk-3IILPVRA.mjs";
-import {
-  listItem_default
-} from "./chunk-KPNIWFLU.mjs";
-import "./chunk-FWJ2ZKH6.mjs";
-import "./chunk-P732YGHO.mjs";
 import "./chunk-VYNBJBXD.mjs";
 import {
   areaChart_default
@@ -106,7 +102,7 @@ import {
 } from "./chunk-GAZ472ZU.mjs";
 import {
   circularProgress_default
-} from "./chunk-7VS6YXNB.mjs";
+} from "./chunk-ZWLRSZTC.mjs";
 import {
   radarChart_default
 } from "./chunk-63KZGR73.mjs";
@@ -176,7 +172,6 @@ export {
   checkbox_default as CheckBox,
   chip_default as Chip,
   circularProgress_default as CircularProgress,
-  dateTimePicker_default as DateTimePicker,
   definition_table_default as DefinitionTable,
   drawer_default as Drawer,
   fileUpload_default as FileUpload,
@@ -198,6 +193,7 @@ export {
   tabs_default as Tabs,
   text_button_default as TextButton,
   textarea_default as Textarea,
+  timePicker_default as TimePicker,
   toast_default as Toast,
   ToastProvider,
   tooltip_default as Tooltip,

package/package.json

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

package/dist/chunk-FWJ2ZKH6.mjs

@@ -1,87 +0,0 @@
-"use client";
-import {
-  formatDateToString
-} from "./chunk-P732YGHO.mjs";
-
-// src/components/dateTimePicker/useDateTimePicker.tsx
-import { useState, useEffect, useRef } from "react";
-var useDatePicker = ({ initialDate, initialTime }) => {
-  const [selectedDate, setSelectedDate] = useState(
-    initialDate ? formatDateToString(initialDate) : ""
-  );
-  const [selectedTime, setSelectedTime] = useState(initialTime ? initialTime : "");
-  const [targetRect, setTargetRect] = useState(null);
-  const [popupWidth, setPopupWidth] = useState(0);
-  const [popupHeight, setPopupHeight] = useState(0);
-  const [isFocusInput, setIsFocusInput] = useState(false);
-  const dateInputRef = useRef(null);
-  const datePickerWrapperRef = useRef(null);
-  const datePickerRef = useRef(null);
-  const DATE_PICKER_GAP = 4;
-  const calculatePositionWithScroll = (targetRect2) => {
-    if (targetRect2 && popupWidth && popupHeight) {
-      const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
-      const scrollLeft = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
-      const spaceBelow = window.innerHeight - (targetRect2.y + targetRect2.height + DATE_PICKER_GAP);
-      const spaceAbove = targetRect2.y - DATE_PICKER_GAP;
-      const top = spaceBelow < popupHeight && spaceAbove > popupHeight ? targetRect2.y - popupHeight - DATE_PICKER_GAP : targetRect2.y + targetRect2.height + DATE_PICKER_GAP;
-      return {
-        top: top + scrollTop,
-        left: targetRect2.x + targetRect2.width - popupWidth + scrollLeft
-      };
-    }
-  };
-  const handleToggleDatePicker = () => {
-    if (datePickerRef.current) {
-      const rect = datePickerRef.current.getBoundingClientRect();
-      setTargetRect((prevRect) => prevRect ? null : { x: rect.x, y: rect.y, width: rect.width, height: rect.height });
-    }
-  };
-  const handleChangeDate = (date) => {
-    setSelectedDate(date);
-  };
-  const handleChangeTime = (time) => {
-    setSelectedTime(time);
-  };
-  const handleFocusInput = () => {
-    setIsFocusInput(true);
-  };
-  const handleBlueInput = () => {
-    setIsFocusInput(false);
-  };
-  useEffect(() => {
-    const onClickOutside = (e) => {
-      if (datePickerRef.current && !datePickerRef.current.contains(e.target) && datePickerWrapperRef.current && !datePickerWrapperRef.current.contains(e.target)) {
-        setTargetRect(null);
-      }
-    };
-    window.addEventListener("mousedown", onClickOutside);
-    return () => window.removeEventListener("mousedown", onClickOutside);
-  }, []);
-  useEffect(() => {
-    if (datePickerWrapperRef.current) {
-      setPopupHeight(datePickerWrapperRef.current.getBoundingClientRect().height);
-      setPopupWidth(datePickerWrapperRef.current.getBoundingClientRect().width);
-    }
-  }, [targetRect]);
-  return {
-    selectedDate,
-    selectedTime,
-    targetRect,
-    popupHeight,
-    isFocusInput,
-    dateInputRef,
-    datePickerWrapperRef,
-    datePickerRef,
-    handleToggleDatePicker,
-    handleChangeDate,
-    handleChangeTime,
-    handleFocusInput,
-    handleBlueInput,
-    calculatePositionWithScroll
-  };
-};
-
-export {
-  useDatePicker
-};

package/dist/chunk-P732YGHO.mjs

@@ -1,18 +0,0 @@
-"use client";
-
-// src/components/dateTimePicker/util.ts
-var formatDateToString = (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}`;
-};
-var formatStringToDate = (date) => {
-  const formattedDate = new Date(date);
-  return formattedDate;
-};
-
-export {
-  formatDateToString,
-  formatStringToDate
-};

package/dist/chunk-X5XJWJSO.mjs

@@ -1,122 +0,0 @@
-"use client";
-import {
-  list_default
-} from "./chunk-3IILPVRA.mjs";
-import {
-  listItem_default
-} from "./chunk-KPNIWFLU.mjs";
-
-// src/components/dateTimePicker/timePicker.tsx
-import { useState, useRef, useEffect } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime }) => {
-  const TOTAL_HOURS = 12;
-  const TOTAL_MINUTES = 60;
-  const ITEM_HEIGHT = 30;
-  const PERIODS = ["AM", "PM"];
-  const [selectedHour, setSelectedHour] = useState("01");
-  const [selectedMinute, setSelectedMinute] = useState("00");
-  const [selectedPeriod, setSelectedPeriod] = useState("AM");
-  const hourRef = useRef(null);
-  const minuteRef = useRef(null);
-  const periodRef = useRef(null);
-  const hoursArray = [...Array(TOTAL_HOURS).keys()].map((i) => (i + 1).toString().padStart(2, "0"));
-  const minutesArray = [...Array(TOTAL_MINUTES).keys()].map((i) => i.toString().padStart(2, "0"));
-  useEffect(() => {
-    if (selectedTime) {
-      const { formattedHour, minute, period } = parseAndFormatTime(selectedTime);
-      setSelectedHour(formattedHour);
-      setSelectedMinute(minute);
-      setSelectedPeriod(period);
-    }
-    if (isFocusInput) {
-      scrollToSelectedTime();
-    }
-  }, [selectedTime, isFocusInput]);
-  useEffect(() => {
-    scrollToSelectedTime();
-  }, []);
-  const parseAndFormatTime = (time) => {
-    const [hour, minute] = time.split(":").map((part) => part.padStart(2, "0"));
-    const parsedHour = parseInt(hour, 10);
-    const period = parsedHour >= 12 ? "PM" : "AM";
-    const formattedHour = parsedHour % 12 === 0 ? "12" : (parsedHour % 12).toString().padStart(2, "0");
-    return { formattedHour, minute, period };
-  };
-  const scrollToSelectedTime = () => {
-    if (selectedTime) {
-      const { formattedHour, minute, period } = parseAndFormatTime(selectedTime);
-      if (hourRef.current) {
-        hourRef.current.scrollTop = (parseInt(formattedHour) - 1) * ITEM_HEIGHT;
-      }
-      if (minuteRef.current) {
-        minuteRef.current.scrollTop = parseInt(minute) * ITEM_HEIGHT;
-      }
-      if (periodRef.current) {
-        periodRef.current.scrollTop = period === "AM" ? 0 : ITEM_HEIGHT;
-      }
-    }
-  };
-  const handleTimeChange = (hour, minute, period) => {
-    const parsedHour = parseInt(hour);
-    let hour24 = parsedHour;
-    if (period === "PM" && parsedHour !== 12) {
-      hour24 = parsedHour + 12;
-    } else if (period === "AM" && parsedHour === 12) {
-      hour24 = 0;
-    }
-    const formattedTime = `${hour24.toString().padStart(2, "0")}:${minute}`;
-    if (onChangeTime) {
-      onChangeTime(formattedTime);
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-[200px] p-[10px] gap-[5px] border border-neutral-main rounded-md bg-background shadow-lg", children: [
-    /* @__PURE__ */ jsx(list_default, { ref: periodRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: PERIODS.map((period, index) => /* @__PURE__ */ jsx(
-      listItem_default,
-      {
-        color,
-        selected: period === selectedPeriod,
-        title: period,
-        size: "sm",
-        classNames: { base: "w-[50px] min-h-[30px]", titleWrapper: "flex justify-center" },
-        onClick: () => {
-          handleTimeChange(selectedHour, selectedMinute, period);
-        }
-      },
-      `${period}-${index}`
-    )) }),
-    /* @__PURE__ */ jsx(list_default, { ref: hourRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: hoursArray.map((hour, index) => /* @__PURE__ */ jsx(
-      listItem_default,
-      {
-        color,
-        selected: hour === selectedHour,
-        title: hour,
-        size: "sm",
-        classNames: { base: "w-[50px] min-h-[30px]", titleWrapper: "flex justify-center" },
-        onClick: () => {
-          handleTimeChange(hour, selectedMinute, selectedPeriod);
-        }
-      },
-      `${hour}-${index}`
-    )) }),
-    /* @__PURE__ */ jsx(list_default, { ref: minuteRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: minutesArray.map((minute, index) => /* @__PURE__ */ jsx(
-      listItem_default,
-      {
-        color,
-        selected: minute === selectedMinute,
-        title: minute,
-        size: "sm",
-        classNames: { base: "w-[50px] min-h-[30px]", titleWrapper: "flex justify-center" },
-        onClick: () => {
-          handleTimeChange(selectedHour, minute, selectedPeriod);
-        }
-      },
-      `${minute}-${index}`
-    )) })
-  ] });
-};
-var timePicker_default = TimePicker;
-
-export {
-  timePicker_default
-};

package/dist/chunk-Y4W76B42.mjs

@@ -1,210 +0,0 @@
-"use client";
-import {
-  formatDateToString,
-  formatStringToDate
-} from "./chunk-P732YGHO.mjs";
-import {
-  Icon_default
-} from "./chunk-33DLD2L6.mjs";
-import {
-  mapPropsVariants
-} from "./chunk-E3G5QXSH.mjs";
-import {
-  tv
-} from "./chunk-CDXBML6O.mjs";
-
-// src/components/dateTimePicker/calendar.tsx
-import React, {
-  forwardRef,
-  useCallback,
-  useMemo,
-  useState,
-  useImperativeHandle,
-  useEffect
-} from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var Calendar = forwardRef((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, calendarStyle.variantKeys);
-  const { selectedDate, classNames, highlightWeekend = true, onChangeDate, ...inputProps } = props;
-  const [currentDate, setCurrentDate] = useState(selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date());
-  const daysOfWeek = ["S", "M", "T", "W", "T", "F", "S"];
-  useEffect(() => {
-    if (selectedDate) {
-      setCurrentDate(new Date(selectedDate));
-    }
-  }, [selectedDate]);
-  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;
-    if (onChangeDate) {
-      const selected = new Date(currentDate.getFullYear(), currentDate.getMonth(), date);
-      const formatted = formatDateToString(selected);
-      onChangeDate(formatted);
-    }
-  };
-  useImperativeHandle(ref, () => ({
-    getSelectedDate: () => selectedDate
-  }));
-  const slots = useMemo(() => calendarStyle({ ...variantProps }), [variantProps]);
-  const getBaseProps = useCallback(
-    () => ({
-      className: `${slots.base({ class: classNames == null ? void 0 : classNames.base })}`
-    }),
-    [slots, classNames]
-  );
-  const getDateTitleProps = useCallback(
-    (index) => {
-      return {
-        className: `${slots.dateTitle({
-          class: classNames == null ? void 0 : classNames.date
-        })}`,
-        "data-saturday": highlightWeekend && index === 6,
-        "data-sunday": highlightWeekend && index === 0
-      };
-    },
-    [slots, classNames, 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) : "";
-      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: `${slots.date({
-          class: classNames == null ? void 0 : classNames.date
-        })}`,
-        "data-today": dateObj.currentMonth && isToday,
-        "data-selected": dateObj.currentMonth && isSelected,
-        "data-disabled": !dateObj.currentMonth,
-        "data-saturday": highlightWeekend && dayOfWeek === 6,
-        "data-sunday": highlightWeekend && dayOfWeek === 0,
-        onClick: () => handleDateSelect(dateObj.date, dateObj.currentMonth)
-      };
-    },
-    [slots, classNames, selectedDate, currentDate, highlightWeekend]
-  );
-  const calendarDates = getCalendarDates();
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { ...getBaseProps(), 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: currentDate.toLocaleString("default", { year: "numeric", month: "2-digit" }) }),
-      /* @__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);
-    }) })
-  ] }) });
-});
-Calendar.displayName = "Calendar";
-var calendar_default = Calendar;
-var calendarStyle = tv({
-  slots: {
-    base: [
-      "flex",
-      "flex-col",
-      "w-[240px]",
-      "border",
-      "border-neutral-main",
-      "bg-background",
-      "rounded-md",
-      "p-4",
-      "shadow-lg",
-      "select-none"
-    ],
-    dateTitle: ["text-sm", "font-[500]", "data-[saturday=true]:text-[#1E7EEE]", "data-[sunday=true]:text-[#FF4684]"],
-    date: [
-      "flex",
-      "justify-center",
-      "items-center",
-      "h-[25px]",
-      "text-sm",
-      "rounded-full",
-      "cursor-pointer",
-      "hover:bg-neutral-soft",
-      "data-[today=true]:border",
-      "data-[today=true]:border-foreground",
-      "data-[saturday=true]:text-[#1E7EEE]",
-      "data-[saturday=true]:!border-[#1E7EEE]",
-      "data-[sunday=true]:text-[#FF4684]",
-      "data-[sunday=true]:!border-[#FF4684]",
-      "data-[selected=true]:!text-white",
-      "data-[selected=true]:border-none",
-      "data-[disabled=true]:!text-neutral-main",
-      "data-[disabled=true]:cursor-default",
-      "data-[disabled=true]:hover:bg-transparent"
-    ]
-  },
-  variants: {
-    variant: {
-      solid: {}
-    },
-    color: {
-      primary: {
-        date: ["data-[selected=true]:!border-primary-main", "data-[selected=true]:bg-primary-main"]
-      },
-      secondary: {
-        date: ["data-[selected=true]:!border-secondary-main", "data-[selected=true]:bg-secondary-main"]
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "solid",
-    color: "primary"
-  },
-  compoundVariants: [
-    {
-      disabled: true,
-      isRequired: true,
-      class: {}
-    }
-  ]
-});
-
-export {
-  calendar_default,
-  calendarStyle
-};