@deepnoid/ui 0.0.88 → 0.0.90

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-IZOMH2SL.mjs → chunk-S3O52LLG.mjs}

@@ -63,15 +63,15 @@ Switch.displayName = "Switch";
 var switch_default = Switch;
 var toggle = tv({
   slots: {
-    base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer",
+    base: ["group/switch", "relative", "max-w-fit", "inline-flex", "items-center", "justify-start", "cursor-pointer"],
     outerWrapper: [
       "relative",
       "inline-flex",
       "items-center",
       "justify-start",
       "flex-shrink-0",
-      "overflow-hidden",
       "bg-neutral-soft",
+      "overflow-hidden",
       "rounded-full",
       "px-[2px]"
     ],
@@ -84,7 +84,7 @@ var toggle = tv({
       "overflow-hidden",
       "bg-neutral-light",
       "rounded-full",
-      "group-has-[:checked]:bg-primary-main"
+      "group-has-[:checked]/switch:bg-primary-main"
     ],
     thumb: [
       "z-10",
@@ -96,33 +96,33 @@ var toggle = tv({
       "rounded-full",
       "origin-right"
     ],
-    label: "relative text-foreground select-none"
+    label: ["relative", "text-foreground", "select-none"]
   },
   variants: {
     size: {
       sm: {
-        outerWrapper: "w-[48px] h-[24px] px-[3px]",
-        wrapper: "w-[42px] h-[18px] px-[3px]",
-        thumb: ["w-[12px] h-[12px]", "group-has-[:checked]:ml-[24px]"],
+        outerWrapper: ["w-[48px]", "h-[24px]", "px-[3px]"],
+        wrapper: ["w-[42px]", "h-[18px]", "px-[3px]"],
+        thumb: ["w-[12px]", "h-[12px]", "group-has-[:checked]/switch:ml-[24px]"],
         label: "text-sm"
       },
       md: {
-        outerWrapper: "w-[60px] h-[30px] px-[3px]",
-        wrapper: "w-[54px] h-[24px] px-[3px]",
-        thumb: ["w-[18px] h-[18px]", "group-has-[:checked]:ml-[30px]"],
+        outerWrapper: ["w-[60px]", "h-[30px]", "px-[3px]"],
+        wrapper: ["w-[54px]", "h-[24px]", "px-[3px]"],
+        thumb: ["w-[18px]", "h-[18px]", "group-has-[:checked]/switch:ml-[30px]"],
         label: "text-md"
       },
       lg: {
-        outerWrapper: "w-[72px] h-[36px] px-[3px]",
-        wrapper: "w-[66px] h-[30px] px-[3px]",
-        thumb: ["w-[24px] h-[24px]", "group-has-[:checked]:ml-[36px]"],
+        outerWrapper: ["w-[72px]", "h-[36px]", "px-[3px]"],
+        wrapper: ["w-[66px]", "h-[30px]", "px-[3px]"],
+        thumb: ["w-[24px]", "h-[24px]", "group-has-[:checked]/switch:ml-[36px]"],
         label: "text-lg"
       }
     },
     isDisabled: {
       true: {
         base: "pointer-events-none",
-        wrapper: "bg-neutral-light group-has-[:checked]:bg-neutral-light",
+        wrapper: "bg-neutral-light group-has-[:checked]/switch:bg-neutral-light",
         thumb: "bg-trans-soft"
       }
     },