@deepnoid/ui 0.1.109 → 0.1.110

package/dist/chunk-CV6IVDL6.mjs

@@ -0,0 +1,356 @@
+"use client";
+import {
+  select_default
+} from "./chunk-YCLB7ZNK.mjs";
+import {
+  Icon_default
+} from "./chunk-33DLD2L6.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-CDXBML6O.mjs";
+
+// src/components/picker/timePicker.tsx
+import { forwardRef, useCallback, useMemo, useState, useRef } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TimePicker = forwardRef((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, timePickerStyle.variantKeys);
+  const {
+    classNames,
+    label,
+    errorMessage,
+    valueRange,
+    onChangeRange,
+    size,
+    selectClassNames,
+    placeholder = "",
+    ...inputProps
+  } = props;
+  const [selectedRange, setSelectedRange] = useState(
+    valueRange || { start: "", end: "" }
+  );
+  const [isPanelOpen, setIsPanelOpen] = useState(false);
+  const inputWrapperRef = useRef(null);
+  const panelWrapperRef = useRef(null);
+  const [panelPos, setPanelPos] = useState({ top: -9999, left: -9999 });
+  const displayValue = useMemo(() => {
+    if (selectedRange.start && selectedRange.end) {
+      return `${selectedRange.start} ~ ${selectedRange.end}`;
+    }
+    return "";
+  }, [selectedRange]);
+  const calculatePosition = useCallback(() => {
+    if (inputWrapperRef.current) {
+      const rect = inputWrapperRef.current.getBoundingClientRect();
+      setPanelPos({ top: rect.bottom + window.scrollY + 6, left: rect.left + window.scrollX });
+    }
+  }, []);
+  const handleFocusInput = () => {
+    calculatePosition();
+    setIsPanelOpen(true);
+  };
+  const handleInputBlur = () => {
+    setTimeout(() => setIsPanelOpen(false), 150);
+  };
+  const handleInputKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      calculatePosition();
+      setIsPanelOpen((prev) => !prev);
+    } else if (e.key === "Escape") {
+      setIsPanelOpen(false);
+    }
+  };
+  const slots = useMemo(() => timePickerStyle({ ...variantProps }), [variantProps]);
+  const renderHourOptions = () => {
+    return Array.from({ length: 24 }, (_, i) => {
+      const value = String(i).padStart(2, "0");
+      return { label: value, value };
+    });
+  };
+  const renderMinuteOptions = () => {
+    return Array.from({ length: 60 }, (_, i) => {
+      const value = String(i).padStart(2, "0");
+      return { label: value, value };
+    });
+  };
+  const defaultSelectClassNames = {
+    selectWrapper: "!w-[80px]",
+    optionsWrapper: "max-h-[300px]"
+  };
+  const handleRangeChange = (type, option) => {
+    const [shRaw, smRaw] = selectedRange.start.split(":");
+    const [ehRaw, emRaw] = selectedRange.end.split(":");
+    const sh = (shRaw != null ? shRaw : "00").padStart(2, "0");
+    const sm = (smRaw != null ? smRaw : "00").padStart(2, "0");
+    const eh = (ehRaw != null ? ehRaw : "00").padStart(2, "0");
+    const em = (emRaw != null ? emRaw : "00").padStart(2, "0");
+    const range = {
+      start: `${type === "startHour" ? option.value : sh}:${type === "startMinute" ? option.value : sm}`,
+      end: `${type === "endHour" ? option.value : eh}:${type === "endMinute" ? option.value : em}`
+    };
+    setSelectedRange(range);
+    onChangeRange == null ? void 0 : onChangeRange(range);
+  };
+  const mergedSelectClassNames = {
+    selectWrapper: (selectClassNames == null ? void 0 : selectClassNames.selectWrapper) || defaultSelectClassNames.selectWrapper,
+    optionsWrapper: (selectClassNames == null ? void 0 : selectClassNames.optionsWrapper) || defaultSelectClassNames.optionsWrapper
+  };
+  const getSelectValue = (timeString, part) => {
+    if (!timeString) return "00";
+    const [hour, minute] = timeString.split(":");
+    return part === "hour" ? hour || "00" : minute || "00";
+  };
+  const handleClearRange = () => {
+    const emptyRange = { start: "", end: "" };
+    setSelectedRange(emptyRange);
+    onChangeRange == null ? void 0 : onChangeRange(emptyRange);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+      label && /* @__PURE__ */ jsx("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+      /* @__PURE__ */ jsxs("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+        /* @__PURE__ */ jsxs("div", { ref: inputWrapperRef, className: slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper }), children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...inputProps,
+              ref,
+              className: slots.input({ class: classNames == null ? void 0 : classNames.input }),
+              type: "text",
+              value: displayValue,
+              placeholder,
+              readOnly: true,
+              onFocus: handleFocusInput,
+              onBlur: handleInputBlur,
+              onKeyDown: handleInputKeyDown
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }), children: [
+            displayValue && /* @__PURE__ */ jsx(
+              Icon_default,
+              {
+                name: "close",
+                className: "text-neutral-light hover:text-neutral-main mr-[5px] cursor-pointer",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleClearRange();
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Icon_default,
+              {
+                name: "clock",
+                className: "cursor-pointer",
+                onClick: () => {
+                  calculatePosition();
+                  setIsPanelOpen((v) => !v);
+                }
+              }
+            )
+          ] })
+        ] }),
+        errorMessage && /* @__PURE__ */ jsx("p", { className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage }), children: errorMessage })
+      ] })
+    ] }),
+    isPanelOpen && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: panelWrapperRef,
+          className: slots.optionsWrapper({ class: classNames == null ? void 0 : classNames.optionsWrapper }),
+          style: {
+            position: "absolute",
+            top: panelPos.top,
+            left: panelPos.left,
+            zIndex: 1e3
+          },
+          onMouseDown: (e) => e.preventDefault(),
+          children: /* @__PURE__ */ jsxs("div", { className: "bg-body-background text-neutral-main flex items-center gap-[5px] p-[10px]", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[5px]", children: [
+              /* @__PURE__ */ jsx(
+                select_default,
+                {
+                  options: renderHourOptions(),
+                  value: getSelectValue(selectedRange.start, "hour"),
+                  onChange: (options) => {
+                    if (options[0]) handleRangeChange("startHour", options[0]);
+                  },
+                  classNames: mergedSelectClassNames
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: ":" }),
+              /* @__PURE__ */ jsx(
+                select_default,
+                {
+                  options: renderMinuteOptions(),
+                  value: getSelectValue(selectedRange.start, "minute"),
+                  onChange: (options) => {
+                    if (options[0]) handleRangeChange("startMinute", options[0]);
+                  },
+                  classNames: mergedSelectClassNames
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("span", { children: "~" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[5px]", children: [
+              /* @__PURE__ */ jsx(
+                select_default,
+                {
+                  options: renderHourOptions(),
+                  value: getSelectValue(selectedRange.end, "hour"),
+                  onChange: (options) => {
+                    if (options[0]) handleRangeChange("endHour", options[0]);
+                  },
+                  classNames: mergedSelectClassNames
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: ":" }),
+              /* @__PURE__ */ jsx(
+                select_default,
+                {
+                  options: renderMinuteOptions(),
+                  value: getSelectValue(selectedRange.end, "minute"),
+                  onChange: (options) => {
+                    if (options[0]) handleRangeChange("endMinute", options[0]);
+                  },
+                  classNames: mergedSelectClassNames
+                }
+              )
+            ] })
+          ] })
+        }
+      ),
+      document.body
+    )
+  ] });
+});
+TimePicker.displayName = "TimePicker";
+var timePicker_default = TimePicker;
+var timePickerStyle = tv({
+  slots: {
+    base: ["group/timepicker", "flex", "flex-col"],
+    label: ["flex", "items-center", "font-bold", "text-body-foreground", "min-w-[80px]"],
+    wrapper: ["flex", "flex-col"],
+    inputWrapper: [
+      "flex",
+      "items-center",
+      "justify-between",
+      "border",
+      "cursor-pointer",
+      "text-neutral-main",
+      "hover:bg-trans-soft",
+      "group-has-[p.error]/input:border-danger-main",
+      "group-has-[p.error]/input:bg-danger-soft",
+      "group-has-[p.error]/input:text-danger-main",
+      "group-has-[p.error]/input:hover:bg-danger-soft"
+    ],
+    input: [
+      "bg-transparent",
+      "w-full",
+      "outline-none",
+      "placeholder:text-neutral-main",
+      "text-body-foreground",
+      "group-has-[p.error]/input:text-danger-main",
+      "group-has-[p.error]/input:placeholder:text-danger-main",
+      "cursor-pointer"
+    ],
+    icon: ["flex", "items-center", "select-none", "text-body-foreground", "group-has-[p.error]/input:text-danger-main"],
+    optionsWrapper: ["border", "rounded", "bg-body-background", "shadow", "overflow-auto"],
+    errorMessage: ["text-danger-main", "mt-1", "text-sm"],
+    selectWrapper: []
+  },
+  variants: {
+    color: {
+      primary: {
+        icon: ["text-primary-main"]
+      },
+      secondary: {
+        icon: ["text-secondary-main"]
+      }
+    },
+    size: {
+      sm: {
+        base: ["text-sm", "gap-[4px]"],
+        label: ["text-sm"],
+        wrapper: ["gap-[4px]"],
+        inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[4px]"],
+        input: ["text-sm"],
+        icon: ["text-sm"],
+        errorMessage: ["text-sm"]
+      },
+      md: {
+        base: ["text-md", "gap-[6px]"],
+        label: ["text-md"],
+        wrapper: ["gap-[6px]"],
+        inputWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-[6px]"],
+        input: ["text-md"],
+        icon: ["text-md"],
+        errorMessage: ["text-sm"]
+      },
+      lg: {
+        base: ["text-lg", "gap-[8px]"],
+        label: ["text-lg"],
+        wrapper: ["gap-[8px]"],
+        inputWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-[8px]"],
+        input: ["text-lg"],
+        icon: ["text-lg"],
+        errorMessage: ["text-md"]
+      },
+      xl: {
+        base: ["text-xl", "gap-[10px]"],
+        label: ["text-xl"],
+        wrapper: ["gap-[10px]"],
+        inputWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-[10px]"],
+        input: ["text-xl"],
+        icon: ["text-xl"],
+        errorMessage: ["text-md"]
+      }
+    },
+    full: {
+      true: {
+        base: ["w-full"],
+        wrapper: ["w-full"],
+        inputWrapper: ["w-full"]
+      }
+    },
+    disabled: {
+      true: {
+        base: ["pointer-events-none"],
+        label: ["text-neutral-light"],
+        inputWrapper: [
+          "bg-neutral-soft",
+          "border-neutral-light",
+          "group-has-[p.error]/input:text-danger-light",
+          "group-has-[p.error]/input:bg-danger-soft",
+          "group-has-[p.error]/input:border-danger-light",
+          "cursor-not-allowed"
+        ],
+        input: [
+          "text-neutral-light",
+          "placeholder:text-neutral-light",
+          "group-has-[p.error]/input:text-danger-light",
+          "group-has-[p.error]/input:placeholder:text-danger-light",
+          "cursor-not-allowed"
+        ],
+        icon: ["text-neutral-light"],
+        errorMessage: ["text-danger-light"]
+      }
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    full: false,
+    disabled: false
+  }
+});
+
+export {
+  timePicker_default,
+  timePickerStyle
+};

package/dist/{chunk-2EECKYM4.mjs → chunk-YCLB7ZNK.mjs}

@@ -248,7 +248,7 @@ var select = tv({
       "group-has-[p.error]/select:text-danger-main",
       "group-has-[p.error]/select:placeholder:text-danger-main"
     ],
-    optionsWrapper: ["border", "rounded", "bg-white", "shadow", "overflow-auto"],
+    optionsWrapper: ["border", "rounded", "bg-body-background", "shadow", "overflow-auto"],
     option: ["flex", "justify-between", "items-center", "cursor-pointer"],
     helperMessage: ["text-neutral-main"],
     errorMessage: ["text-danger-main"],

package/dist/{chunk-7VS6YXNB.mjs → chunk-ZWLRSZTC.mjs}

@@ -21,7 +21,7 @@ var CircularProgress = forwardRef((originalProps, ref) => {
     }
   ];
   const BAR_SIZE = 24;
-  const OUTER_RADIUS = 88;
+  const OUTER_RADIUS = 75;
   const INNER_RADIUS = OUTER_RADIUS - BAR_SIZE;
   return /* @__PURE__ */ jsxs("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
     /* @__PURE__ */ jsxs("div", { className: "relative", style: { width: size, height: size }, children: [
@@ -42,7 +42,7 @@ var CircularProgress = forwardRef((originalProps, ref) => {
               {
                 cx: size / 2,
                 cy: size / 2,
-                r: INNER_RADIUS + BAR_SIZE / 2,
+                r: OUTER_RADIUS,
                 className: slots.background({ class: classNames == null ? void 0 : classNames.background }),
                 fill: "currentColor"
               }

package/dist/components/charts/circularProgress.js

@@ -381,7 +381,7 @@ var CircularProgress = (0, import_react.forwardRef)((originalProps, ref) => {
     }
   ];
   const BAR_SIZE = 24;
-  const OUTER_RADIUS = 88;
+  const OUTER_RADIUS = 75;
   const INNER_RADIUS = OUTER_RADIUS - BAR_SIZE;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", style: { width: size, height: size }, children: [
@@ -402,7 +402,7 @@ var CircularProgress = (0, import_react.forwardRef)((originalProps, ref) => {
               {
                 cx: size / 2,
                 cy: size / 2,
-                r: INNER_RADIUS + BAR_SIZE / 2,
+                r: OUTER_RADIUS,
                 className: slots.background({ class: classNames == null ? void 0 : classNames.background }),
                 fill: "currentColor"
               }

package/dist/components/charts/circularProgress.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   circularProgress_default
-} from "../../chunk-7VS6YXNB.mjs";
+} from "../../chunk-ZWLRSZTC.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-CDXBML6O.mjs";
 import "../../chunk-AC6TWLRT.mjs";

package/dist/components/charts/index.js

@@ -386,7 +386,7 @@ var CircularProgress = (0, import_react.forwardRef)((originalProps, ref) => {
     }
   ];
   const BAR_SIZE = 24;
-  const OUTER_RADIUS = 88;
+  const OUTER_RADIUS = 75;
   const INNER_RADIUS = OUTER_RADIUS - BAR_SIZE;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", style: { width: size, height: size }, children: [
@@ -407,7 +407,7 @@ var CircularProgress = (0, import_react.forwardRef)((originalProps, ref) => {
               {
                 cx: size / 2,
                 cy: size / 2,
-                r: INNER_RADIUS + BAR_SIZE / 2,
+                r: OUTER_RADIUS,
                 className: slots.background({ class: classNames == null ? void 0 : classNames.background }),
                 fill: "currentColor"
               }

package/dist/components/charts/index.mjs

@@ -8,7 +8,7 @@ import {
 } from "../../chunk-GAZ472ZU.mjs";
 import {
   circularProgress_default
-} from "../../chunk-7VS6YXNB.mjs";
+} from "../../chunk-ZWLRSZTC.mjs";
 import {
   radarChart_default
 } from "../../chunk-63KZGR73.mjs";

package/dist/components/picker/index.d.mts

@@ -0,0 +1,4 @@
+export { default as TimePicker, TimePickerProps } from './timePicker.mjs';
+import 'tailwind-variants';
+import 'react';
+import '../../utils/types.mjs';

package/dist/components/picker/index.d.ts

@@ -0,0 +1,4 @@
+export { default as TimePicker, TimePickerProps } from './timePicker.js';
+import 'tailwind-variants';
+import 'react';
+import '../../utils/types.js';