@deepnoid/ui 0.0.90 → 0.0.92

package/dist/index.js

@@ -7278,7 +7278,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]",
@@ -7297,7 +7297,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]"],
@@ -7740,10 +7740,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"
         ]
       }
     },
@@ -7754,8 +7754,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"
         ]
       }
     }
@@ -8002,21 +8002,23 @@ var useDatePicker = ({ initialDate, initialTime }) => {
   const [targetRect, setTargetRect] = (0, import_react30.useState)(null);
   const [popupWidth, setPopupWidth] = (0, import_react30.useState)(0);
   const [popupHeight, setPopupHeight] = (0, import_react30.useState)(0);
+  const [isFocusInput, setIsFocusInput] = (0, import_react30.useState)(false);
   const dateInputRef = (0, import_react30.useRef)(null);
   const datePickerWrapperRef = (0, import_react30.useRef)(null);
   const datePickerRef = (0, import_react30.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) {
@@ -8030,6 +8032,12 @@ var useDatePicker = ({ initialDate, initialTime }) => {
   const handleChangeTime = (time) => {
     setSelectedTime(time);
   };
+  const handleFocusInput = () => {
+    setIsFocusInput(true);
+  };
+  const handleBlueInput = () => {
+    setIsFocusInput(false);
+  };
   (0, import_react30.useEffect)(() => {
     const onClickOutside = (e) => {
       if (datePickerRef.current && !datePickerRef.current.contains(e.target) && datePickerWrapperRef.current && !datePickerWrapperRef.current.contains(e.target)) {
@@ -8050,12 +8058,15 @@ var useDatePicker = ({ initialDate, initialTime }) => {
     selectedTime,
     targetRect,
     popupHeight,
+    isFocusInput,
     dateInputRef,
     datePickerWrapperRef,
     datePickerRef,
     handleToggleDatePicker,
     handleChangeDate,
     handleChangeTime,
+    handleFocusInput,
+    handleBlueInput,
     calculatePositionWithScroll
   };
 };
@@ -8256,7 +8267,7 @@ var calendarStyle = tv({
 // src/components/dateTimePicker/timePicker.tsx
 var import_react32 = require("react");
 var import_jsx_runtime29 = 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;
@@ -8276,7 +8287,10 @@ var TimePicker = ({ color = "primary", selectedTime, onChangeTime }) => {
       setSelectedMinute(minute);
       setSelectedPeriod(period);
     }
-  }, [selectedTime]);
+    if (isFocusInput) {
+      scrollToSelectedTime();
+    }
+  }, [selectedTime, isFocusInput]);
   (0, import_react32.useEffect)(() => {
     scrollToSelectedTime();
   }, []);
@@ -8365,24 +8379,38 @@ var timePicker_default = TimePicker;
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var DatePicker = (0, import_react33.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_react33.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_react33.useCallback)(
     () => ({
       className: slots.base({ class: classNames == null ? void 0 : classNames.base })
@@ -8415,17 +8443,29 @@ var DatePicker = (0, import_react33.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_react33.useCallback)(
     () => ({
@@ -8508,8 +8548,8 @@ var DatePicker = (0, import_react33.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: [
@@ -8519,10 +8559,24 @@ var DatePicker = (0, import_react33.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_runtime30.jsx)(timePicker_default, { color: originalProps.color, selectedTime, onChangeTime: handleChangeTime })
+            type === "time" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              timePicker_default,
+              {
+                color: originalProps.color,
+                selectedTime,
+                isFocusInput,
+                onChangeTime: (time) => {
+                  handleChangeTime(time);
+                  if (onChangeTime) onChangeTime(time);
+                }
+              }
+            )
           ]
         }
       ),

package/dist/index.mjs

@@ -5,10 +5,6 @@ import {
 } from "./chunk-P6AZMYVR.mjs";
 import "./chunk-DSBSLSJW.mjs";
 import "./chunk-ODMRJXLJ.mjs";
-import "./chunk-3MY6LO7N.mjs";
-import {
-  tabs_default
-} from "./chunk-KRI5IALM.mjs";
 import "./chunk-RRAZM5D3.mjs";
 import {
   textarea_default
@@ -22,6 +18,10 @@ import "./chunk-ZOTHPHXA.mjs";
 import {
   toast_default
 } from "./chunk-PXUBPWKU.mjs";
+import "./chunk-3MY6LO7N.mjs";
+import {
+  tabs_default
+} from "./chunk-KRI5IALM.mjs";
 import "./chunk-LVFI2NOH.mjs";
 import {
   switch_default
@@ -32,16 +32,16 @@ import {
 } from "./chunk-6YE26GOI.mjs";
 import "./chunk-DWROPKZW.mjs";
 import "./chunk-VG4644BG.mjs";
-import "./chunk-MV2WCFK7.mjs";
-import {
-  slider_default
-} from "./chunk-A3RWT3JJ.mjs";
 import "./chunk-QCEKPS7U.mjs";
 import {
   select_default
-} from "./chunk-2BCJZILI.mjs";
-import "./chunk-S3QS5B7F.mjs";
+} from "./chunk-JN7EGKJL.mjs";
 import "./chunk-RZZWHI6O.mjs";
+import "./chunk-S3QS5B7F.mjs";
+import "./chunk-MV2WCFK7.mjs";
+import {
+  slider_default
+} from "./chunk-A3RWT3JJ.mjs";
 import "./chunk-7VOQKIIK.mjs";
 import {
   progress_default
@@ -53,7 +53,7 @@ import {
 import "./chunk-DJOG6Z35.mjs";
 import {
   modal_default
-} from "./chunk-L7P6OBUX.mjs";
+} from "./chunk-3WTG4YNN.mjs";
 import "./chunk-7B7LRG5J.mjs";
 import {
   pagination_default
@@ -63,7 +63,7 @@ import "./chunk-2GCSFWHD.mjs";
 import {
   input_default
 } from "./chunk-3DRIHQOM.mjs";
-import "./chunk-HAOK24MK.mjs";
+import "./chunk-VUYUQGLF.mjs";
 import "./chunk-QZ3LVYJW.mjs";
 import {
   checkbox_default
@@ -71,29 +71,29 @@ import {
 import "./chunk-75HLCORR.mjs";
 import {
   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 {
   list_default
 } from "./chunk-EYY4CRRR.mjs";
 import {
   listItem_default
-} from "./chunk-EDEV4IK4.mjs";
+} from "./chunk-SKQNTNEA.mjs";
 import "./chunk-NMSDSEBD.mjs";
-import "./chunk-VUYUQGLF.mjs";
+import "./chunk-HAOK24MK.mjs";
+import {
+  card_default
+} from "./chunk-2ALY3PH5.mjs";
 import {
   button_group_default
 } from "./chunk-NGQ3MK2J.mjs";
 import {
   button_default
 } from "./chunk-UR64ZUAU.mjs";
-import {
-  card_default
-} from "./chunk-2ALY3PH5.mjs";
 import "./chunk-27Y6K5NK.mjs";
 import {
   accordion_default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepnoid/ui",
-  "version": "0.0.90",
+  "version": "0.0.92",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/index.js",

package/dist/{chunk-2BCJZILI.mjs → chunk-JN7EGKJL.mjs}

@@ -1,10 +1,10 @@
 "use client";
-import {
-  useSelect
-} from "./chunk-S3QS5B7F.mjs";
 import {
   option_default
 } from "./chunk-RZZWHI6O.mjs";
+import {
+  useSelect
+} from "./chunk-S3QS5B7F.mjs";
 import {
   Icon_default
 } from "./chunk-LCI6RPWE.mjs";