@deepnoid/ui 0.0.90 → 0.0.92

package/dist/{chunk-L7P6OBUX.mjs → chunk-3WTG4YNN.mjs}

@@ -151,7 +151,7 @@ var modal = tv({
   slots: {
     backdrop: ["relative w-screen h-screen fixed inset-0 bg-black/60", "z-[900]"],
     modalWrapper: ["group/modal", "absolute", "top-1/2", "-translate-y-1/2", "left-1/2", "-translate-x-1/2"],
-    icon: ["absolute", "top-[20px]", "left-1/2", "-translate-x-1/2", "z-10"],
+    icon: ["absolute", "top-[0px]", "left-1/2", "-translate-x-1/2", "z-10"],
     closeIcon: [
       "absolute",
       "top-[20px]",
@@ -170,7 +170,7 @@ var modal = tv({
       "bg-background",
       "shadow-drop shadow-foreground/20 rounded-xxlg",
       "overflow-hidden",
-      "group-data-[icon-visibility=true]/modal:mt-[60px]",
+      "group-data-[icon-visibility=true]/modal:mt-[40px]",
       "group-data-[icon-visibility=true]/modal:pt-[60px]"
     ],
     body: ["flex", "flex-col", "gap-[20px]"],

package/dist/{chunk-2ZFHB4JM.mjs → chunk-FWJ2ZKH6.mjs}

@@ -13,21 +13,23 @@ var useDatePicker = ({ initialDate, 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 dataPickerGap = 4;
-  const calculatePositionWithScroll = (targetRect2, popupHeight2) => {
-    if (popupWidth === 0 || popupHeight2 === 0) return;
-    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 + dataPickerGap);
-    const spaceAbove = targetRect2.y - dataPickerGap;
-    const top = spaceBelow < popupHeight2 && spaceAbove > popupHeight2 ? targetRect2.y - popupHeight2 - dataPickerGap : targetRect2.y + targetRect2.height + dataPickerGap;
-    return {
-      top: top + scrollTop,
-      left: targetRect2.x + targetRect2.width - popupWidth + scrollLeft
-    };
+  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) {
@@ -41,6 +43,12 @@ var useDatePicker = ({ initialDate, initialTime }) => {
   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)) {
@@ -61,12 +69,15 @@ var useDatePicker = ({ initialDate, initialTime }) => {
     selectedTime,
     targetRect,
     popupHeight,
+    isFocusInput,
     dateInputRef,
     datePickerWrapperRef,
     datePickerRef,
     handleToggleDatePicker,
     handleChangeDate,
     handleChangeTime,
+    handleFocusInput,
+    handleBlueInput,
     calculatePositionWithScroll
   };
 };

package/dist/{chunk-N6IEGD4K.mjs → chunk-NUIYVRYF.mjs}

@@ -4,12 +4,12 @@ import {
 } from "./chunk-EYY4CRRR.mjs";
 import {
   listItem_default
-} from "./chunk-EDEV4IK4.mjs";
+} from "./chunk-SKQNTNEA.mjs";
 
 // src/components/dateTimePicker/timePicker.tsx
 import { useState, useRef, useEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var TimePicker = ({ color = "primary", selectedTime, onChangeTime }) => {
+var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime }) => {
   const TOTAL_HOURS = 12;
   const TOTAL_MINUTES = 60;
   const ITEM_HEIGHT = 30;
@@ -29,7 +29,10 @@ var TimePicker = ({ color = "primary", selectedTime, onChangeTime }) => {
       setSelectedMinute(minute);
       setSelectedPeriod(period);
     }
-  }, [selectedTime]);
+    if (isFocusInput) {
+      scrollToSelectedTime();
+    }
+  }, [selectedTime, isFocusInput]);
   useEffect(() => {
     scrollToSelectedTime();
   }, []);

package/dist/{chunk-EDEV4IK4.mjs → chunk-SKQNTNEA.mjs}

@@ -94,10 +94,10 @@ var listItem = tv({
       color: "primary",
       class: {
         base: [
-          "hover:text-primary-main",
+          "hover:text-primary-strong",
           "hover:bg-primary-soft",
-          "data-[selected=true]:text-primary-main",
-          "data-[selected=true]:bg-primary-soft"
+          "data-[selected=true]:text-white",
+          "data-[selected=true]:bg-primary-main"
         ]
       }
     },
@@ -108,8 +108,8 @@ var listItem = tv({
         base: [
           "hover:text-secondary-main",
           "hover:bg-secondary-soft",
-          "data-[selected=true]:text-secondary-main",
-          "data-[selected=true]:bg-secondary-soft"
+          "data-[selected=true]:text-white",
+          "data-[selected=true]:bg-secondary-main"
         ]
       }
     }

package/dist/{chunk-S2VUKVCH.mjs → chunk-VNO4XOQG.mjs}

@@ -1,13 +1,13 @@
 "use client";
 import {
   useDatePicker
-} from "./chunk-2ZFHB4JM.mjs";
+} from "./chunk-FWJ2ZKH6.mjs";
 import {
   calendar_default
 } from "./chunk-WX32MAKV.mjs";
 import {
   timePicker_default
-} from "./chunk-N6IEGD4K.mjs";
+} from "./chunk-NUIYVRYF.mjs";
 import {
   Icon_default
 } from "./chunk-LCI6RPWE.mjs";
@@ -24,24 +24,38 @@ import { createPortal } from "react-dom";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var DatePicker = forwardRef((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, dateTimePickerStyle.variantKeys);
-  const { classNames, label, errorMessage, startContent, endContent, type = "date", ...inputProps } = props;
+  const {
+    classNames,
+    label,
+    errorMessage,
+    startContent,
+    endContent,
+    type = "date",
+    value,
+    onChangeDate,
+    onChangeTime,
+    ...inputProps
+  } = props;
   const slots = useMemo(() => dateTimePickerStyle({ ...variantProps }), [variantProps]);
   const {
     selectedDate,
     selectedTime,
     targetRect,
     popupHeight,
+    isFocusInput,
     datePickerRef,
     dateInputRef,
     datePickerWrapperRef,
     handleToggleDatePicker,
     handleChangeDate,
     handleChangeTime,
+    handleFocusInput,
+    handleBlueInput,
     calculatePositionWithScroll
   } = useDatePicker({
     initialDate: void 0
   });
-  const position = targetRect ? calculatePositionWithScroll(targetRect, popupHeight) : null;
+  const position = targetRect ? calculatePositionWithScroll(targetRect) : null;
   const getBaseProps = useCallback(
     () => ({
       className: slots.base({ class: classNames == null ? void 0 : classNames.base })
@@ -74,17 +88,29 @@ var DatePicker = forwardRef((originalProps, ref) => {
       className: slots.input({ class: classNames == null ? void 0 : classNames.input }),
       size: 0,
       type,
-      value: type === "date" ? selectedDate || "" : type === "time" ? selectedTime || "" : "",
+      value: value !== void 0 ? value : type === "date" ? selectedDate || "" : type === "time" ? selectedTime || "" : "",
       onChange: (e) => {
         if (type === "date") {
           handleChangeDate(e.target.value);
+          if (onChangeDate) {
+            onChangeDate(e.target.value);
+          }
         } else if (type === "time") {
           handleChangeTime(e.target.value);
+          if (onChangeTime) {
+            onChangeTime(e.target.value);
+          }
         }
       },
+      onFocus: (e) => {
+        handleFocusInput();
+      },
+      onBlur: (e) => {
+        handleBlueInput();
+      },
       max: "9999-12-31"
     }),
-    [inputProps, ref, dateInputRef, slots, classNames == null ? void 0 : classNames.input, selectedDate]
+    [inputProps, ref, dateInputRef, slots, classNames == null ? void 0 : classNames.input, selectedDate, selectedTime, type, value]
   );
   const getContentProps = useCallback(
     () => ({
@@ -167,8 +193,8 @@ var DatePicker = forwardRef((originalProps, ref) => {
           ref: datePickerWrapperRef,
           style: {
             position: "absolute",
-            top: position == null ? void 0 : position.top,
-            left: position == null ? void 0 : position.left,
+            top: (position == null ? void 0 : position.top) || -99999,
+            left: (position == null ? void 0 : position.left) || -99999,
             zIndex: 1e3
           },
           children: [
@@ -178,10 +204,24 @@ var DatePicker = forwardRef((originalProps, ref) => {
                 color: originalProps.color,
                 selectedDate,
                 highlightWeekend: originalProps.highlightWeekend,
-                onChangeDate: handleChangeDate
+                onChangeDate: (date) => {
+                  handleChangeDate(date);
+                  if (onChangeDate) onChangeDate(date);
+                }
               }
             ),
-            type === "time" && /* @__PURE__ */ jsx(timePicker_default, { color: originalProps.color, selectedTime, onChangeTime: handleChangeTime })
+            type === "time" && /* @__PURE__ */ jsx(
+              timePicker_default,
+              {
+                color: originalProps.color,
+                selectedTime,
+                isFocusInput,
+                onChangeTime: (time) => {
+                  handleChangeTime(time);
+                  if (onChangeTime) onChangeTime(time);
+                }
+              }
+            )
           ]
         }
       ),

package/dist/components/dateTimePicker/dateTimePicker.d.mts

@@ -17,6 +17,8 @@ interface Props extends Omit<ComponentProps<"input">, "size"> {
         size?: "sm" | "md" | "lg";
     }> | string;
     classNames?: SlotsToClasses<DateTimePickerSlots>;
+    onChangeDate?: (date: string) => void;
+    onChangeTime?: (time: string) => void;
 }
 type DateTimePickerProps = Props & DateTimePickerVariantProps;
 declare const DatePicker: React__default.ForwardRefExoticComponent<Omit<DateTimePickerProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;

package/dist/components/dateTimePicker/dateTimePicker.d.ts

@@ -17,6 +17,8 @@ interface Props extends Omit<ComponentProps<"input">, "size"> {
         size?: "sm" | "md" | "lg";
     }> | string;
     classNames?: SlotsToClasses<DateTimePickerSlots>;
+    onChangeDate?: (date: string) => void;
+    onChangeTime?: (time: string) => void;
 }
 type DateTimePickerProps = Props & DateTimePickerVariantProps;
 declare const DatePicker: React__default.ForwardRefExoticComponent<Omit<DateTimePickerProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;

package/dist/components/dateTimePicker/dateTimePicker.js

@@ -101,21 +101,23 @@ var useDatePicker = ({ initialDate, initialTime }) => {
   const [targetRect, setTargetRect] = (0, import_react.useState)(null);
   const [popupWidth, setPopupWidth] = (0, import_react.useState)(0);
   const [popupHeight, setPopupHeight] = (0, import_react.useState)(0);
+  const [isFocusInput, setIsFocusInput] = (0, import_react.useState)(false);
   const dateInputRef = (0, import_react.useRef)(null);
   const datePickerWrapperRef = (0, import_react.useRef)(null);
   const datePickerRef = (0, import_react.useRef)(null);
-  const dataPickerGap = 4;
-  const calculatePositionWithScroll = (targetRect2, popupHeight2) => {
-    if (popupWidth === 0 || popupHeight2 === 0) return;
-    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 + dataPickerGap);
-    const spaceAbove = targetRect2.y - dataPickerGap;
-    const top = spaceBelow < popupHeight2 && spaceAbove > popupHeight2 ? targetRect2.y - popupHeight2 - dataPickerGap : targetRect2.y + targetRect2.height + dataPickerGap;
-    return {
-      top: top + scrollTop,
-      left: targetRect2.x + targetRect2.width - popupWidth + scrollLeft
-    };
+  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) {
@@ -129,6 +131,12 @@ var useDatePicker = ({ initialDate, initialTime }) => {
   const handleChangeTime = (time) => {
     setSelectedTime(time);
   };
+  const handleFocusInput = () => {
+    setIsFocusInput(true);
+  };
+  const handleBlueInput = () => {
+    setIsFocusInput(false);
+  };
   (0, import_react.useEffect)(() => {
     const onClickOutside = (e) => {
       if (datePickerRef.current && !datePickerRef.current.contains(e.target) && datePickerWrapperRef.current && !datePickerWrapperRef.current.contains(e.target)) {
@@ -149,12 +157,15 @@ var useDatePicker = ({ initialDate, initialTime }) => {
     selectedTime,
     targetRect,
     popupHeight,
+    isFocusInput,
     dateInputRef,
     datePickerWrapperRef,
     datePickerRef,
     handleToggleDatePicker,
     handleChangeDate,
     handleChangeTime,
+    handleFocusInput,
+    handleBlueInput,
     calculatePositionWithScroll
   };
 };
@@ -4059,10 +4070,10 @@ var listItem = tv({
       color: "primary",
       class: {
         base: [
-          "hover:text-primary-main",
+          "hover:text-primary-strong",
           "hover:bg-primary-soft",
-          "data-[selected=true]:text-primary-main",
-          "data-[selected=true]:bg-primary-soft"
+          "data-[selected=true]:text-white",
+          "data-[selected=true]:bg-primary-main"
         ]
       }
     },
@@ -4073,8 +4084,8 @@ var listItem = tv({
         base: [
           "hover:text-secondary-main",
           "hover:bg-secondary-soft",
-          "data-[selected=true]:text-secondary-main",
-          "data-[selected=true]:bg-secondary-soft"
+          "data-[selected=true]:text-white",
+          "data-[selected=true]:bg-secondary-main"
         ]
       }
     }
@@ -4083,7 +4094,7 @@ var listItem = tv({
 
 // src/components/dateTimePicker/timePicker.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var TimePicker = ({ color = "primary", selectedTime, onChangeTime }) => {
+var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime }) => {
   const TOTAL_HOURS = 12;
   const TOTAL_MINUTES = 60;
   const ITEM_HEIGHT = 30;
@@ -4103,7 +4114,10 @@ var TimePicker = ({ color = "primary", selectedTime, onChangeTime }) => {
       setSelectedMinute(minute);
       setSelectedPeriod(period);
     }
-  }, [selectedTime]);
+    if (isFocusInput) {
+      scrollToSelectedTime();
+    }
+  }, [selectedTime, isFocusInput]);
   (0, import_react5.useEffect)(() => {
     scrollToSelectedTime();
   }, []);
@@ -4192,24 +4206,38 @@ var timePicker_default = TimePicker;
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var DatePicker = (0, import_react6.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, dateTimePickerStyle.variantKeys);
-  const { classNames, label, errorMessage, startContent, endContent, type = "date", ...inputProps } = props;
+  const {
+    classNames,
+    label,
+    errorMessage,
+    startContent,
+    endContent,
+    type = "date",
+    value,
+    onChangeDate,
+    onChangeTime,
+    ...inputProps
+  } = props;
   const slots = (0, import_react6.useMemo)(() => dateTimePickerStyle({ ...variantProps }), [variantProps]);
   const {
     selectedDate,
     selectedTime,
     targetRect,
     popupHeight,
+    isFocusInput,
     datePickerRef,
     dateInputRef,
     datePickerWrapperRef,
     handleToggleDatePicker,
     handleChangeDate,
     handleChangeTime,
+    handleFocusInput,
+    handleBlueInput,
     calculatePositionWithScroll
   } = useDatePicker({
     initialDate: void 0
   });
-  const position = targetRect ? calculatePositionWithScroll(targetRect, popupHeight) : null;
+  const position = targetRect ? calculatePositionWithScroll(targetRect) : null;
   const getBaseProps = (0, import_react6.useCallback)(
     () => ({
       className: slots.base({ class: classNames == null ? void 0 : classNames.base })
@@ -4242,17 +4270,29 @@ var DatePicker = (0, import_react6.forwardRef)((originalProps, ref) => {
       className: slots.input({ class: classNames == null ? void 0 : classNames.input }),
       size: 0,
       type,
-      value: type === "date" ? selectedDate || "" : type === "time" ? selectedTime || "" : "",
+      value: value !== void 0 ? value : type === "date" ? selectedDate || "" : type === "time" ? selectedTime || "" : "",
       onChange: (e) => {
         if (type === "date") {
           handleChangeDate(e.target.value);
+          if (onChangeDate) {
+            onChangeDate(e.target.value);
+          }
         } else if (type === "time") {
           handleChangeTime(e.target.value);
+          if (onChangeTime) {
+            onChangeTime(e.target.value);
+          }
         }
       },
+      onFocus: (e) => {
+        handleFocusInput();
+      },
+      onBlur: (e) => {
+        handleBlueInput();
+      },
       max: "9999-12-31"
     }),
-    [inputProps, ref, dateInputRef, slots, classNames == null ? void 0 : classNames.input, selectedDate]
+    [inputProps, ref, dateInputRef, slots, classNames == null ? void 0 : classNames.input, selectedDate, selectedTime, type, value]
   );
   const getContentProps = (0, import_react6.useCallback)(
     () => ({
@@ -4335,8 +4375,8 @@ var DatePicker = (0, import_react6.forwardRef)((originalProps, ref) => {
           ref: datePickerWrapperRef,
           style: {
             position: "absolute",
-            top: position == null ? void 0 : position.top,
-            left: position == null ? void 0 : position.left,
+            top: (position == null ? void 0 : position.top) || -99999,
+            left: (position == null ? void 0 : position.left) || -99999,
             zIndex: 1e3
           },
           children: [
@@ -4346,10 +4386,24 @@ var DatePicker = (0, import_react6.forwardRef)((originalProps, ref) => {
                 color: originalProps.color,
                 selectedDate,
                 highlightWeekend: originalProps.highlightWeekend,
-                onChangeDate: handleChangeDate
+                onChangeDate: (date) => {
+                  handleChangeDate(date);
+                  if (onChangeDate) onChangeDate(date);
+                }
               }
             ),
-            type === "time" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(timePicker_default, { color: originalProps.color, selectedTime, onChangeTime: handleChangeTime })
+            type === "time" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              timePicker_default,
+              {
+                color: originalProps.color,
+                selectedTime,
+                isFocusInput,
+                onChangeTime: (time) => {
+                  handleChangeTime(time);
+                  if (onChangeTime) onChangeTime(time);
+                }
+              }
+            )
           ]
         }
       ),

package/dist/components/dateTimePicker/dateTimePicker.mjs

@@ -2,14 +2,14 @@
 import {
   dateTimePickerStyle,
   dateTimePicker_default
-} from "../../chunk-S2VUKVCH.mjs";
-import "../../chunk-2ZFHB4JM.mjs";
+} from "../../chunk-VNO4XOQG.mjs";
+import "../../chunk-FWJ2ZKH6.mjs";
 import "../../chunk-WX32MAKV.mjs";
 import "../../chunk-P732YGHO.mjs";
-import "../../chunk-N6IEGD4K.mjs";
+import "../../chunk-NUIYVRYF.mjs";
 import "../../chunk-7MVEAQ7Z.mjs";
 import "../../chunk-EYY4CRRR.mjs";
-import "../../chunk-EDEV4IK4.mjs";
+import "../../chunk-SKQNTNEA.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-LCI6RPWE.mjs";
 import "../../chunk-IOCRFIQF.mjs";