@deepnoid/ui 0.0.111 → 0.1.0

package/dist/{chunk-PO3ADNA5.mjs → chunk-PFYYYUJW.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   checkbox_default
-} from "./chunk-ANYPMQH4.mjs";
+} from "./chunk-XTGRSVYO.mjs";
 import {
   clsx
 } from "./chunk-27Y6K5NK.mjs";

package/dist/chunk-PKVQXVCS.mjs

@@ -0,0 +1,170 @@
+"use client";
+import {
+  tv
+} from "./chunk-IE2BRM7Z.mjs";
+import {
+  clsx
+} from "./chunk-27Y6K5NK.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+
+// src/components/radio/radio.tsx
+import { forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Radio = forwardRef((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, radioStyle.variantKeys);
+  const { children, classNames, labelPosition = "end", ...inputProps } = props;
+  const slots = useMemo(() => radioStyle({ ...variantProps }), [variantProps]);
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: clsx(
+        slots.base({ class: classNames == null ? void 0 : classNames.base }),
+        labelPosition === "start" && slots.labelReverse({ class: classNames == null ? void 0 : classNames.labelReverse })
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "hidden", children: /* @__PURE__ */ jsx("input", { ...inputProps, type: "radio", ref }) }),
+        /* @__PURE__ */ jsx("span", { className: slots.outerDot({ class: classNames == null ? void 0 : classNames.outerDot }), children: /* @__PURE__ */ jsx("span", { className: slots.innerDot({ class: classNames == null ? void 0 : classNames.innerDot }) }) }),
+        /* @__PURE__ */ jsx("div", { className: slots.labelWrapper({ class: classNames == null ? void 0 : classNames.labelWrapper }), children: children && /* @__PURE__ */ jsx("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children }) })
+      ]
+    }
+  );
+});
+Radio.displayName = "Radio";
+var radio_default = Radio;
+var radioStyle = tv({
+  slots: {
+    base: [
+      "group/radio",
+      "relative",
+      "max-w-fit",
+      "inline-flex",
+      "items-center",
+      "justify-start",
+      "cursor-pointer",
+      "tap-highlight-transparent"
+    ],
+    outerDot: [
+      "inline-flex",
+      "items-center",
+      "justify-center",
+      "relative",
+      "flex-shrink-0",
+      "w-[15px]",
+      "h-[15px]",
+      "rounded-full",
+      "border",
+      "border-default",
+      "before:content-['']",
+      "before:absolute",
+      "before:inset-0",
+      "before:rounded-full"
+    ],
+    innerDot: [
+      "inline-block",
+      "w-[8px]",
+      "h-[8px]",
+      "rounded-full",
+      "bg-primary-main",
+      "opacity-0",
+      "transition-opacity",
+      "group-has-[:checked]/radio:opacity-100"
+    ],
+    labelWrapper: ["flex", "flex-col"],
+    labelReverse: ["flex-row-reverse"],
+    label: ["text-foreground", "select-none"]
+  },
+  variants: {
+    color: {
+      primary: {
+        outerDot: [
+          "group-has-[:checked]/radio:border-primary-main",
+          "group-has-[:checked]/radio:border-primary-main",
+          "group-hover/radio:border-primary-light",
+          "group-hover/radio:bg-primary-soft"
+        ],
+        innerDot: ["bg-primary-main"]
+      },
+      secondary: {
+        outerDot: [
+          "group-has-[:checked]/radio:border-secondary-main",
+          "group-hover/radio:border-secondary-light",
+          "group-hover/radio:bg-secondary-soft"
+        ],
+        innerDot: ["bg-secondary-main"]
+      },
+      neutral: {
+        outerDot: [
+          "group-has-[:checked]/radio:border-neutral-main",
+          "group-hover/radio:border-neutral-light",
+          "group-hover/radio:bg-neutral-soft"
+        ],
+        innerDot: ["bg-neutral-main"]
+      }
+    },
+    size: {
+      sm: {
+        base: ["gap-[8px]"],
+        outerDot: ["w-[12px]", "h-[12px]", "border-sm"],
+        innerDot: ["w-[6px]", "h-[6px]"],
+        label: ["text-sm"]
+      },
+      md: {
+        base: ["gap-[8px]"],
+        outerDot: ["w-[15px]", "h-[15px]", "border-md"],
+        innerDot: ["w-[8px]", "h-[8px]"],
+        label: ["text-md"]
+      },
+      lg: {
+        base: ["gap-[10px]"],
+        outerDot: ["w-[18px]", "h-[18px]", "border-lg"],
+        innerDot: ["w-[10px]", "h-[10px]"],
+        label: ["text-lg"]
+      },
+      xl: {
+        base: ["gap-[10px]"],
+        outerDot: ["w-[21px]", "h-[21px]", "border-xl"],
+        innerDot: ["w-[12px]", "h-[12px]"],
+        label: ["text-xl"]
+      }
+    },
+    isInvalid: {
+      true: {
+        outerDot: [
+          "border-danger-main",
+          "group-has-[:checked]/radio:border-danger-main",
+          "group-hover/radio:border-danger-light",
+          "group-hover/radio:bg-danger-soft"
+        ],
+        innerDot: ["bg-danger-main"],
+        label: ["text-danger-main"]
+      }
+    },
+    isDisabled: {
+      true: {
+        base: ["opacity-disabled", "cursor-not-allowed", "pointer-events-auto", "text-neutral-light"],
+        outerDot: [
+          "cursor-not-allowed",
+          "border-neutral-light",
+          "bg-neutral-soft",
+          "group-has-[:checked]/radio:bg-neutral-soft",
+          "group-has-[:checked]/radio:border-neutral-light",
+          "group-hover/radio:border-neutral-light",
+          "group-hover/radio:bg-neutral-soft"
+        ],
+        innerDot: ["bg-neutral-soft"],
+        label: ["text-neutral-light"]
+      }
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    isDisabled: false
+  }
+});
+
+export {
+  radio_default
+};

package/dist/{chunk-NGQ3MK2J.mjs → chunk-Q5WACGVP.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   tv
-} from "./chunk-J725QONZ.mjs";
+} from "./chunk-IE2BRM7Z.mjs";
 
 // src/components/button/button-group.tsx
 import React, { forwardRef } from "react";

package/dist/{chunk-FDKT4IBP.mjs → chunk-QJHZJRSQ.mjs}

@@ -5,13 +5,13 @@ import {
 } from "./chunk-P732YGHO.mjs";
 import {
   Icon_default
-} from "./chunk-LCI6RPWE.mjs";
+} from "./chunk-24NQEB73.mjs";
+import {
+  tv
+} from "./chunk-IE2BRM7Z.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
-import {
-  tv
-} from "./chunk-J725QONZ.mjs";
 
 // src/components/dateTimePicker/calendar.tsx
 import React, {

package/dist/{chunk-7HHFRKJU.mjs → chunk-QNA2GDTN.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-ZOTHPHXA.mjs";
 import {
   toast_default
-} from "./chunk-PXUBPWKU.mjs";
+} from "./chunk-FYJZ7Q5L.mjs";
 
 // src/components/toast/use-toast.tsx
 import { createContext, useContext, useState, useCallback, useEffect, useRef } from "react";
@@ -23,7 +23,7 @@ var ToastProvider = ({
 }) => {
   const [toasts, setToasts] = useState([]);
   const [containerStyle, setContainerStyle] = useState({});
-  const toastRef = useRef();
+  const toastRef = useRef(null);
   const addToast = useCallback((content, options) => {
     const id = Date.now() + Math.floor(Math.random() * 1e5);
     const newToast = {

package/dist/{chunk-UZL66GNP.mjs → chunk-RQ76IOYC.mjs}

@@ -3,11 +3,14 @@ import {
   usePagination_default
 } from "./chunk-F3HENRVM.mjs";
 import {
-  mapPropsVariants
-} from "./chunk-E3G5QXSH.mjs";
+  input_default
+} from "./chunk-SK2A72R2.mjs";
 import {
   tv
-} from "./chunk-J725QONZ.mjs";
+} from "./chunk-IE2BRM7Z.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
 
 // src/components/pagination/pagination.tsx
 import { forwardRef, useCallback, useMemo } from "react";
@@ -21,6 +24,7 @@ var Pagination = forwardRef((originalProps, ref) => {
     totalPage,
     showPageNumber = true,
     showPageLabel,
+    showPageInput,
     showFirstLastButtons,
     handleChangePage
   } = props;
@@ -33,8 +37,8 @@ var Pagination = forwardRef((originalProps, ref) => {
   const slots = useMemo(() => pagination({ ...variantProps }), [variantProps]);
   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]
+    () => ({ className: `${slots.label({ class: classNames == null ? void 0 : classNames.label })} + ${showPageInput && " !min-w-[55px]"}` }),
+    [slots, classNames, showPageInput]
   );
   const getWrapperProps = useCallback(
     () => ({ className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }) }),
@@ -45,8 +49,41 @@ var Pagination = forwardRef((originalProps, ref) => {
     () => ({ className: slots.button({ class: classNames == null ? void 0 : classNames.button }) }),
     [slots, classNames]
   );
+  const getLabelWrapperProps = useCallback(
+    () => ({
+      className: "flex shrink-0",
+      onSubmit: (e) => {
+        e.preventDefault();
+        if (showPageInput && handleChangePage) {
+          const formData = new FormData(e.target);
+          const page = formData.get("pagination-input");
+          if (page) handleChangePage(+page);
+        }
+      }
+    }),
+    [handleChangePage, showPageInput]
+  );
+  const getInputProps = useCallback(
+    () => ({
+      defaultValue: currentPage,
+      size: "sm",
+      name: "pagination-input",
+      type: "number",
+      max: totalPage,
+      min: 1,
+      classNames: { inputWrapper: "!w-[48px] h-[20px] px-[6px]", input: "input-arrow-hide" }
+    }),
+    [currentPage, totalPage]
+  );
   return /* @__PURE__ */ jsxs("div", { ...getBaseProps(), children: [
     showPageLabel && /* @__PURE__ */ jsx("span", { ...getLabelProps(), children: `${currentPage} of ${totalPage}` }),
+    /* @__PURE__ */ jsxs("form", { ...getLabelWrapperProps(), children: [
+      showPageInput && /* @__PURE__ */ jsx(input_default, { ...getInputProps() }, `${currentPage}+pagination-input`),
+      showPageLabel && /* @__PURE__ */ jsxs("span", { ...getLabelProps(), children: [
+        !showPageInput && currentPage,
+        ` of ${totalPage}`
+      ] })
+    ] }),
     /* @__PURE__ */ jsxs("div", { ...getWrapperProps(), children: [
       showFirstLastButtons && /* @__PURE__ */ jsx(
         "div",
@@ -97,7 +134,14 @@ var Pagination = forwardRef((originalProps, ref) => {
           onClick: currentPage < totalPage ? handleClickMovePage(totalPage) : void 0,
           children: ">>"
         }
-      )
+      ),
+      /* @__PURE__ */ jsxs("form", { ...getLabelWrapperProps(), children: [
+        showPageInput && /* @__PURE__ */ jsx(input_default, { ...getInputProps() }, `${currentPage}+pagination-input`),
+        showPageLabel && /* @__PURE__ */ jsxs("span", { ...getLabelProps(), children: [
+          !showPageInput && currentPage,
+          ` of ${totalPage}`
+        ] })
+      ] })
     ] })
   ] });
 });
@@ -108,7 +152,7 @@ var pagination = tv(
     slots: {
       base: "flex items-center select-none",
       label: "text-primary-main text-right whitespace-nowrap",
-      wrapper: "flex overflow-hidden",
+      wrapper: "flex overflow-hidden flex items-center",
       icon: "flex items-center justify-center cursor-pointer",
       button: "flex items-center justify-center cursor-pointer data-[selected=true]:font-[600] transition duration-200"
     },
@@ -142,6 +186,12 @@ var pagination = tv(
           label: "min-w-[105px] text-lg mr-[14px]",
           icon: ["h-[20px] text-lg"],
           button: ["min-w-[37px] h-[20px] text-lg"]
+        },
+        xl: {
+          wrapper: "gap-[10px]",
+          label: "min-w-[105px] text-lg mr-[14px]",
+          icon: ["h-[20px] text-lg"],
+          button: ["min-w-[37px] h-[20px] text-lg"]
         }
       },
       color: {
@@ -209,6 +259,15 @@ var pagination = tv(
           icon: "min-w-[50px] h-[24px] border-l"
         }
       },
+      {
+        variant: "line",
+        size: "xl",
+        class: {
+          wrapper: "border rounded-lg gap-0",
+          button: "!min-w-[50px] h-[24px] border-l",
+          icon: "min-w-[50px] h-[24px] border-l"
+        }
+      },
       {
         variant: "line",
         color: "primary",

package/dist/chunk-RRL6KBU4.mjs

@@ -0,0 +1,145 @@
+"use client";
+import {
+  useTooltip
+} from "./chunk-ZMOAFSYE.mjs";
+import {
+  getTailClassName,
+  getTailStyles
+} from "./chunk-WSIADHVC.mjs";
+import {
+  tv
+} from "./chunk-IE2BRM7Z.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+
+// src/components/tooltip/tooltip.tsx
+import { forwardRef, useCallback, useMemo, useRef, useState, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Tooltip = forwardRef((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, tooltipStyle.variantKeys);
+  const { placement = "top", offset = 5, delay = 100, persistent = false, classNames } = props;
+  const slots = useMemo(() => tooltipStyle({ ...variantProps }), [variantProps]);
+  const [targetRect, setTargetRect] = useState(null);
+  const { tooltipPosition, tooltipRef } = useTooltip({
+    placement,
+    offset,
+    delay,
+    targetRect
+  });
+  const childrenRef = useRef(null);
+  const delayTimeoutRef = useRef(null);
+  const getProps = useCallback(
+    (slotKey, classNameKey) => ({
+      className: slots[slotKey]({ class: classNames == null ? void 0 : classNames[classNameKey] })
+    }),
+    [slots, classNames]
+  );
+  const getBaseProps = useCallback(() => getProps("base", "base"), [getProps]);
+  const getContentProps = useCallback(() => getProps("content", "content"), [getProps]);
+  const showTooltip = useCallback(() => {
+    if (childrenRef.current) {
+      const rect = childrenRef.current.getBoundingClientRect();
+      setTargetRect({
+        width: rect.width,
+        height: rect.height,
+        left: rect.left,
+        top: rect.top,
+        right: rect.right,
+        bottom: rect.bottom
+      });
+    }
+  }, []);
+  const hideTooltip = useCallback(() => {
+    if (!persistent) {
+      delayTimeoutRef.current = window.setTimeout(() => setTargetRect(null), delay);
+    }
+  }, [persistent, delay]);
+  useEffect(() => {
+    if (persistent) showTooltip();
+  }, [persistent, showTooltip]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: (node) => {
+          if (ref) {
+            if (typeof ref === "function") ref(node);
+            else ref.current = node;
+          }
+          childrenRef.current = node;
+        },
+        ...getBaseProps(),
+        onPointerEnter: !persistent ? showTooltip : void 0,
+        onPointerLeave: !persistent ? hideTooltip : void 0,
+        children: props.children
+      }
+    ),
+    targetRect && createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: tooltipRef,
+          ...getContentProps(),
+          onPointerEnter: !persistent ? () => delayTimeoutRef.current && clearTimeout(delayTimeoutRef.current) : void 0,
+          onPointerLeave: !persistent ? hideTooltip : void 0,
+          style: {
+            visibility: "visible",
+            transform: `translate3d(${tooltipPosition.x}px, ${tooltipPosition.y}px, 0)`
+          },
+          children: [
+            props.content,
+            variantProps.tail && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `absolute h-2 w-2 rotate-45 bg-inherit ${getTailClassName(placement)}`,
+                style: getTailStyles(placement)
+              }
+            )
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+});
+Tooltip.displayName = "Tooltip";
+var tooltip_default = Tooltip;
+var tooltipStyle = tv({
+  slots: {
+    base: ["z-0", "relative", "bg-transparent"],
+    content: [
+      "absolute",
+      "top-0",
+      "left-0",
+      "inline-flex",
+      "items-center",
+      "justify-center",
+      "font-[500]",
+      "text-common-white",
+      "bg-common-black"
+    ]
+  },
+  variants: {
+    size: {
+      sm: { content: ["text-sm", "rounded-[5px]", "px-[10px]", "py-[6px]"] },
+      md: { content: ["text-md", "rounded-[5px]", "px-[10px]", "py-[6px]"] },
+      lg: { content: ["text-lg", "rounded-[5px]", "px-[10px]", "py-[6px]"] },
+      xl: { content: ["text-xl", "rounded-[5px]", "px-[10px]", "py-[6px]"] }
+    },
+    tail: {
+      true: { content: [] },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    placement: "top",
+    tail: false
+  }
+});
+
+export {
+  tooltip_default
+};

package/dist/chunk-SE5TU755.mjs

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

package/dist/{chunk-ZNEEYSIK.mjs → chunk-SK2A72R2.mjs}

@@ -1,13 +1,13 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-LCI6RPWE.mjs";
+} from "./chunk-24NQEB73.mjs";
+import {
+  tv
+} from "./chunk-IE2BRM7Z.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
-import {
-  tv
-} from "./chunk-J725QONZ.mjs";
 
 // src/components/input/input.tsx
 import React, { forwardRef, useRef, useCallback, useMemo } from "react";
@@ -199,6 +199,12 @@ var inputStyle = tv({
         innerWrapper: ["group-has-[p]/input:gap-[10px]"],
         inputWrapper: ["w-[240px]", "h-[36px]", "rounded-lg", "px-[10px]", "py-[8px]", "gap-[10px]"],
         errorMessage: ["text-lg"]
+      },
+      xl: {
+        base: ["text-xl", "gap-[10px]"],
+        innerWrapper: ["group-has-[p]/input:gap-[10px]"],
+        inputWrapper: ["w-[240px]", "h-[36px]", "rounded-xl", "px-[10px]", "py-[8px]", "gap-[10px]"],
+        errorMessage: ["text-xl"]
       }
     },
     radius: {

package/dist/{chunk-PRLGHYFO.mjs → chunk-UAMIPCUD.mjs}

@@ -1,16 +1,16 @@
 "use client";
 import {
   button_default
-} from "./chunk-UR64ZUAU.mjs";
+} from "./chunk-X2MQCISM.mjs";
 import {
   Icon_default
-} from "./chunk-LCI6RPWE.mjs";
+} from "./chunk-24NQEB73.mjs";
+import {
+  tv
+} from "./chunk-IE2BRM7Z.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
-import {
-  tv
-} from "./chunk-J725QONZ.mjs";
 
 // src/components/modal/modal.tsx
 import { forwardRef, useCallback, useMemo, useEffect } from "react";
@@ -126,7 +126,7 @@ var Modal = forwardRef((originalProps, ref) => {
   }, [isOpen, isKeyboardDismissDisabled, onCancel]);
   return /* @__PURE__ */ jsx(Fragment, { children: isOpen && createPortal(
     /* @__PURE__ */ jsx("div", { ...getBackdropProps(), children: /* @__PURE__ */ jsxs("div", { ref, ...getModalWrapperProps(), children: [
-      typeof icon === "string" ? /* @__PURE__ */ jsx("div", { ...getIconProps(), children: /* @__PURE__ */ jsx(Icon_default, { name: icon, className: "w-[80px] h-[80px]" }) }) : /* @__PURE__ */ jsx("div", { ...getIconProps(), children: icon }),
+      typeof icon === "string" ? /* @__PURE__ */ jsx("div", { ...getIconProps(), children: /* @__PURE__ */ jsx(Icon_default, { name: icon, className: "h-[80px] w-[80px]" }) }) : /* @__PURE__ */ jsx("div", { ...getIconProps(), children: icon }),
       /* @__PURE__ */ jsxs("div", { ...getBodyWrapperProps(), children: [
         showCloseButton && /* @__PURE__ */ jsx(Icon_default, { name: "close", ...getCloseIconProps(), onClick: onCancel }),
         /* @__PURE__ */ jsxs("div", { ...getBodyProps(), children: [
@@ -136,7 +136,7 @@ var Modal = forwardRef((originalProps, ref) => {
           ] }),
           content && typeof content === "string" ? /* @__PURE__ */ jsx("div", { ...getContentProps(), children: content }) : content,
           (cancelButtonText || confirmButtonText) && /* @__PURE__ */ jsxs("div", { ...getFooterWrapperProps(), children: [
-            cancelButtonText && /* @__PURE__ */ jsx(button_default, { variant: "line", size: "md", color: originalProps.color, fullWidth: true, onClick: onCancel, children: cancelButtonText }),
+            cancelButtonText && /* @__PURE__ */ jsx(button_default, { variant: "outline", color: originalProps.color, fullWidth: true, onClick: onCancel, children: cancelButtonText }),
             confirmButtonText && /* @__PURE__ */ jsx(button_default, { size: "md", color: originalProps.color, fullWidth: true, onClick: onConfirm, children: confirmButtonText })
           ] })
         ] })

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

@@ -1,19 +1,19 @@
 "use client";
+import {
+  option_default
+} from "./chunk-2HSK6XGZ.mjs";
 import {
   useSelect
 } from "./chunk-S3QS5B7F.mjs";
-import {
-  option_default
-} from "./chunk-RZZWHI6O.mjs";
 import {
   Icon_default
-} from "./chunk-LCI6RPWE.mjs";
+} from "./chunk-24NQEB73.mjs";
+import {
+  tv
+} from "./chunk-IE2BRM7Z.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
-import {
-  tv
-} from "./chunk-J725QONZ.mjs";
 
 // src/components/select/select.tsx
 import { forwardRef, useMemo, useCallback } from "react";
@@ -193,6 +193,12 @@ var select = tv({
         selectWrapper: "w-[240px] h-[36px] px-[10px] py-[8px] gap-[10px] rounded-lg",
         optionsWrapper: "max-h-[144px] rounded-lg",
         errorMessage: "text-lg"
+      },
+      xl: {
+        base: "text-lg gap-[10px]",
+        selectWrapper: "w-[240px] h-[36px] px-[10px] py-[8px] gap-[10px] rounded-xl",
+        optionsWrapper: "max-h-[144px] rounded-xl",
+        errorMessage: "text-xl"
       }
     },
     radius: {