@deepnoid/ui 0.0.89 → 0.0.90

package/dist/chunk-2ZFHB4JM.mjs

@@ -0,0 +1,76 @@
+"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 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 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);
+  };
+  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,
+    dateInputRef,
+    datePickerWrapperRef,
+    datePickerRef,
+    handleToggleDatePicker,
+    handleChangeDate,
+    handleChangeTime,
+    calculatePositionWithScroll
+  };
+};
+
+export {
+  useDatePicker
+};

package/dist/chunk-75HLCORR.mjs

@@ -0,0 +1 @@
+"use client";

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

@@ -65,13 +65,13 @@ var listItem = tv({
     },
     size: {
       sm: {
-        base: "h-[30px] text-sm"
+        base: "min-h-[30px] text-sm"
       },
       md: {
-        base: "h-[40px] text-md"
+        base: "min-h-[40px] text-md"
       },
       lg: {
-        base: "h-[50px] text-lg"
+        base: "min-h-[50px] text-lg"
       }
     },
     color: {

package/dist/{chunk-HFVZFUC3.mjs → chunk-L7P6OBUX.mjs}

@@ -149,7 +149,7 @@ Modal.displayName = "Modal";
 var modal_default = Modal;
 var modal = tv({
   slots: {
-    backdrop: ["relative w-screen h-screen fixed inset-0 bg-black/60", "z-[9999]"],
+    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"],
     closeIcon: [

package/dist/chunk-N6IEGD4K.mjs

@@ -0,0 +1,119 @@
+"use client";
+import {
+  list_default
+} from "./chunk-EYY4CRRR.mjs";
+import {
+  listItem_default
+} from "./chunk-EDEV4IK4.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 }) => {
+  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);
+    }
+  }, [selectedTime]);
+  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-P732YGHO.mjs

@@ -0,0 +1,18 @@
+"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-S2VUKVCH.mjs

@@ -0,0 +1,319 @@
+"use client";
+import {
+  useDatePicker
+} from "./chunk-2ZFHB4JM.mjs";
+import {
+  calendar_default
+} from "./chunk-WX32MAKV.mjs";
+import {
+  timePicker_default
+} from "./chunk-N6IEGD4K.mjs";
+import {
+  Icon_default
+} from "./chunk-LCI6RPWE.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-J725QONZ.mjs";
+
+// src/components/dateTimePicker/dateTimePicker.tsx
+import React, { forwardRef, useCallback, useMemo } 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, dateTimePickerStyle.variantKeys);
+  const { classNames, label, errorMessage, startContent, endContent, type = "date", ...inputProps } = props;
+  const slots = useMemo(() => dateTimePickerStyle({ ...variantProps }), [variantProps]);
+  const {
+    selectedDate,
+    selectedTime,
+    targetRect,
+    popupHeight,
+    datePickerRef,
+    dateInputRef,
+    datePickerWrapperRef,
+    handleToggleDatePicker,
+    handleChangeDate,
+    handleChangeTime,
+    calculatePositionWithScroll
+  } = useDatePicker({
+    initialDate: void 0
+  });
+  const position = targetRect ? calculatePositionWithScroll(targetRect, popupHeight) : null;
+  const getBaseProps = useCallback(
+    () => ({
+      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
+    }),
+    [slots, classNames]
+  );
+  const getLabelProps = useCallback(
+    () => ({
+      className: slots.label({ class: classNames == null ? void 0 : classNames.label })
+    }),
+    [slots, classNames]
+  );
+  const getInnerWrapperProps = useCallback(
+    () => ({
+      className: slots.innerWrapper({ class: classNames == null ? void 0 : classNames.innerWrapper })
+    }),
+    [slots, classNames]
+  );
+  const getInputWrapperProps = useCallback(
+    () => ({
+      className: slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper }),
+      ref: datePickerRef
+    }),
+    [slots, classNames]
+  );
+  const getInputProps = useCallback(
+    () => ({
+      ...inputProps,
+      ref: ref || dateInputRef,
+      className: slots.input({ class: classNames == null ? void 0 : classNames.input }),
+      size: 0,
+      type,
+      value: type === "date" ? selectedDate || "" : type === "time" ? selectedTime || "" : "",
+      onChange: (e) => {
+        if (type === "date") {
+          handleChangeDate(e.target.value);
+        } else if (type === "time") {
+          handleChangeTime(e.target.value);
+        }
+      },
+      max: "9999-12-31"
+    }),
+    [inputProps, ref, dateInputRef, slots, classNames == null ? void 0 : classNames.input, selectedDate]
+  );
+  const getContentProps = useCallback(
+    () => ({
+      className: slots.content({ class: classNames == null ? void 0 : classNames.content }),
+      size: originalProps.size
+    }),
+    [slots, classNames, originalProps.size]
+  );
+  const getErrorMessageProps = useCallback(
+    () => ({
+      className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })
+    }),
+    [slots, classNames]
+  );
+  const renderStartContent = () => {
+    if (React.isValidElement(startContent)) {
+      const existingProps = startContent.props;
+      const mergedProps = {
+        ...getContentProps(),
+        className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
+      };
+      return React.cloneElement(startContent, mergedProps);
+    } else {
+      const contentProps = getContentProps();
+      return /* @__PURE__ */ jsx("div", { ...contentProps, children: startContent });
+    }
+  };
+  const renderDateTimePickerIcon = () => /* @__PURE__ */ jsx("div", { ...getContentProps(), onClick: handleToggleDatePicker, children: /* @__PURE__ */ jsx(
+    Icon_default,
+    {
+      name: type === "time" ? "clock" : "calendar",
+      size: originalProps.size,
+      className: "cursor-pointer",
+      fill: type === "date"
+    }
+  ) });
+  const renderContentWithIcon = () => {
+    if (React.isValidElement(endContent)) {
+      const existingProps = endContent.props;
+      const mergedProps = {
+        ...getContentProps(),
+        className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
+      };
+      return React.cloneElement(endContent, mergedProps);
+    } else if (errorMessage) {
+      const iconProps = { ...getContentProps(), className: getContentProps().className };
+      return /* @__PURE__ */ jsx("div", { ...iconProps, children: /* @__PURE__ */ jsx(Icon_default, { name: "exclamation-circle", fill: true, size: originalProps.size }) });
+    } else {
+      return /* @__PURE__ */ jsx(Fragment, {});
+    }
+  };
+  const renderEndContent = () => {
+    switch (type) {
+      case "date":
+      case "datetime-local":
+      case "month":
+      case "week":
+      case "time":
+        return renderDateTimePickerIcon();
+      default:
+        return renderContentWithIcon();
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { ...getBaseProps(), children: [
+      label && /* @__PURE__ */ jsx("label", { ...getLabelProps(), children: label }),
+      /* @__PURE__ */ jsxs("div", { ...getInnerWrapperProps(), children: [
+        /* @__PURE__ */ jsxs("div", { ...getInputWrapperProps(), children: [
+          startContent && renderStartContent(),
+          /* @__PURE__ */ jsx("input", { ...getInputProps() }),
+          renderEndContent()
+        ] }),
+        errorMessage && /* @__PURE__ */ jsx("p", { ...getErrorMessageProps(), children: errorMessage })
+      ] })
+    ] }),
+    targetRect && /* @__PURE__ */ jsx(Fragment, { children: createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: datePickerWrapperRef,
+          style: {
+            position: "absolute",
+            top: position == null ? void 0 : position.top,
+            left: position == null ? void 0 : position.left,
+            zIndex: 1e3
+          },
+          children: [
+            type === "date" && /* @__PURE__ */ jsx(
+              calendar_default,
+              {
+                color: originalProps.color,
+                selectedDate,
+                highlightWeekend: originalProps.highlightWeekend,
+                onChangeDate: handleChangeDate
+              }
+            ),
+            type === "time" && /* @__PURE__ */ jsx(timePicker_default, { color: originalProps.color, selectedTime, onChangeTime: handleChangeTime })
+          ]
+        }
+      ),
+      document.body
+    ) })
+  ] });
+});
+DatePicker.displayName = "DatePicker";
+var dateTimePicker_default = DatePicker;
+var dateTimePickerStyle = tv({
+  slots: {
+    base: ["group/input", "flex", "flex-col", "inline-block"],
+    label: ["flex", "items-center"],
+    innerWrapper: ["flex", "flex-col"],
+    inputWrapper: [
+      "flex",
+      "items-center",
+      "transition",
+      "duration-200",
+      "group-has-[p]/input:border-danger-main",
+      "group-has-[p]/input:bg-danger-soft"
+    ],
+    input: ["w-full", "h-full", "bg-transparent", "placeholder:text-neutral-main", "focus-visible:outline-none"],
+    content: ["flex", "items-center", "select-none", "group-has-[p]/input:text-danger-main"],
+    errorMessage: ["text-danger-main"]
+  },
+  variants: {
+    variant: {
+      solid: {
+        inputWrapper: ["bg-trans-soft", "hover:bg-trans-light", "has-[:focus]:bg-trans-light"]
+      },
+      normal: {
+        inputWrapper: [
+          "bg-transparent",
+          "border",
+          "border-neutral-main",
+          "hover:bg-trans-soft",
+          "has-[:focus]:bg-trans-soft"
+        ]
+      },
+      line: {
+        inputWrapper: [
+          "bg-transparent",
+          "border-b",
+          "border-neutral-main",
+          "!rounded-none",
+          "hover:bg-trans-soft",
+          "has-[:focus]:bg-trans-soft"
+        ]
+      }
+    },
+    color: {
+      primary: {
+        inputWrapper: ["has-[:focus]:border-primary-main"],
+        content: ["text-primary-main"]
+      },
+      secondary: {
+        inputWrapper: ["has-[:focus]:border-secondary-main"],
+        content: ["text-secondary-main"]
+      }
+    },
+    size: {
+      sm: {
+        base: ["text-sm", "gap-[6px]"],
+        innerWrapper: ["group-has-[p]/input:gap-[6px]"],
+        inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[6px]", "py-[4.5px]", "gap-[6px]"],
+        errorMessage: ["text-sm"]
+      },
+      md: {
+        base: ["text-md", "gap-[8px]"],
+        innerWrapper: ["group-has-[p]/input:gap-[8px]"],
+        inputWrapper: ["w-[240px]", "h-[30px]", "rounded-md", "px-[8px]", "py-[6.5px]", "gap-[8px]"],
+        errorMessage: ["text-md"]
+      },
+      lg: {
+        base: ["text-lg", "gap-[10px]"],
+        innerWrapper: ["group-has-[p]/input:gap-[10px]"],
+        inputWrapper: ["w-[240px]", "h-[36px]", "rounded-lg", "px-[10px]", "py-[8px]", "gap-[10px]"],
+        errorMessage: ["text-lg"]
+      }
+    },
+    radius: {
+      default: "",
+      none: {
+        inputWrapper: ["rounded-none"]
+      },
+      full: {
+        inputWrapper: ["rounded-full"]
+      }
+    },
+    fullWidth: {
+      true: {
+        base: ["w-full"],
+        innerWrapper: ["flex-1"],
+        inputWrapper: ["w-full"]
+      }
+    },
+    isDisabled: {
+      true: {
+        label: ["text-neutral-light"],
+        inputWrapper: ["bg-neutral-soft", "border-neutral-light", "pointer-events-none"],
+        input: ["text-neutral-light", "placeholder:text-neutral-light"],
+        content: ["text-neutral-light"],
+        errorMessage: ["text-danger-light"]
+      }
+    },
+    isRequired: {
+      true: {
+        label: ["after:content-['*']", "after:text-danger-main", "after:ml-0.5"]
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "solid",
+    color: "primary",
+    size: "md",
+    fullWidth: false,
+    isDisabled: false,
+    isRequired: false
+  },
+  compoundVariants: [
+    {
+      isDisabled: true,
+      isRequired: true,
+      class: {
+        label: ["after:text-danger-light"]
+      }
+    }
+  ]
+});
+
+export {
+  dateTimePicker_default,
+  dateTimePickerStyle
+};

package/dist/{chunk-MOINJECK.mjs → chunk-S3O52LLG.mjs}

@@ -73,8 +73,7 @@ var toggle = tv({
       "bg-neutral-soft",
       "overflow-hidden",
       "rounded-full",
-      "px-[2px]",
-      "hover:bg-primary-main/20"
+      "px-[2px]"
     ],
     wrapper: [
       "relative",