@deepnoid/ui 0.1.0 → 0.1.2

package/dist/components/pagination/index.js

@@ -120,35 +120,30 @@ var fontSize = {
   h1: [
     "40px",
     {
-      letterSpacing: "-2%",
       fontWeight: "700"
     }
   ],
   h2: [
     "34px",
     {
-      letterSpacing: "-2%",
       fontWeight: "700"
     }
   ],
   h3: [
     "28px",
     {
-      letterSpacing: "-2%",
       fontWeight: "700"
     }
   ],
   h4: [
     "24px",
     {
-      letterSpacing: "-2%",
       fontWeight: "700"
     }
   ],
   h5: [
     "20px",
     {
-      letterSpacing: "-2%",
       fontWeight: "600"
     }
   ],
@@ -156,7 +151,6 @@ var fontSize = {
     "12px",
     {
       lineHeight: "18px",
-      letterSpacing: "-2%",
       fontWeight: "400"
     }
   ],
@@ -164,7 +158,6 @@ var fontSize = {
     "14px",
     {
       lineHeight: "21px",
-      letterSpacing: "-2%",
       fontWeight: "400"
     }
   ],
@@ -172,7 +165,6 @@ var fontSize = {
     "16px",
     {
       lineHeight: "24px",
-      letterSpacing: "-2%",
       fontWeight: "400"
     }
   ],
@@ -180,7 +172,6 @@ var fontSize = {
     "18px",
     {
       lineHeight: "27px",
-      letterSpacing: "-2%",
       fontWeight: "400"
     }
   ]
@@ -4055,46 +4046,53 @@ var Icon = ({ name, size = "md", fill = false, className, onClick, ...props }) =
 };
 var Icon_default = Icon;
 
+// src/utils/clsx.ts
+function clsx(...args) {
+  var i = 0, tmp, x, str = "";
+  while (i < args.length) {
+    if (tmp = args[i++]) {
+      if (x = toVal(tmp)) {
+        str && (str += " ");
+        str += x;
+      }
+    }
+  }
+  return str;
+}
+function toVal(mix) {
+  var k, y, str = "";
+  if (typeof mix === "string" || typeof mix === "number") {
+    str += mix;
+  } else if (typeof mix === "object") {
+    if (Array.isArray(mix)) {
+      var len = mix.length;
+      for (k = 0; k < len; k++) {
+        if (mix[k]) {
+          if (y = toVal(mix[k])) {
+            str && (str += " ");
+            str += y;
+          }
+        }
+      }
+    } else {
+      for (y in mix) {
+        if (mix[y]) {
+          str && (str += " ");
+          str += y;
+        }
+      }
+    }
+  }
+  return str;
+}
+
 // src/components/input/input.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Input = (0, import_react2.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, inputStyle.variantKeys);
-  const { classNames, label, errorMessage, startContent, endContent, ...inputProps } = props;
+  const { classNames, label, helperText, errorText, startContent, endContent, ...inputProps } = props;
   const inputRef = (0, import_react2.useRef)(null);
   const slots = (0, import_react2.useMemo)(() => inputStyle({ ...variantProps }), [variantProps]);
-  const getBaseProps = (0, import_react2.useCallback)(
-    () => ({
-      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
-    }),
-    [slots, classNames]
-  );
-  const getLabelProps = (0, import_react2.useCallback)(
-    () => ({
-      className: slots.label({ class: classNames == null ? void 0 : classNames.label })
-    }),
-    [slots, classNames]
-  );
-  const getInnerWrapperProps = (0, import_react2.useCallback)(
-    () => ({
-      className: slots.innerWrapper({ class: classNames == null ? void 0 : classNames.innerWrapper })
-    }),
-    [slots, classNames]
-  );
-  const getInputWrapperProps = (0, import_react2.useCallback)(
-    () => ({
-      className: slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper })
-    }),
-    [slots, classNames]
-  );
-  const getInputProps = (0, import_react2.useCallback)(
-    () => ({
-      ...inputProps,
-      ref: ref || inputRef,
-      className: slots.input({ class: classNames == null ? void 0 : classNames.input }),
-      size: 0
-    }),
-    [slots, classNames, inputProps, ref]
-  );
   const getContentProps = (0, import_react2.useCallback)(
     () => ({
       className: slots.content({ class: classNames == null ? void 0 : classNames.content }),
@@ -4102,12 +4100,6 @@ var Input = (0, import_react2.forwardRef)((originalProps, ref) => {
     }),
     [slots, classNames, originalProps.size]
   );
-  const getErrorMessageProps = (0, import_react2.useCallback)(
-    () => ({
-      className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })
-    }),
-    [slots, classNames]
-  );
   const renderStartContent = () => {
     if (import_react2.default.isValidElement(startContent)) {
       const existingProps = startContent.props;
@@ -4141,7 +4133,7 @@ var Input = (0, import_react2.forwardRef)((originalProps, ref) => {
         className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
       };
       return import_react2.default.cloneElement(endContent, mergedProps);
-    } else if (errorMessage) {
+    } else if (errorText) {
       const iconProps = { ...getContentProps(), className: getContentProps().className };
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ...iconProps, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: "exclamation-circle", fill: true, size: originalProps.size }) });
     } else {
@@ -4160,152 +4152,210 @@ var Input = (0, import_react2.forwardRef)((originalProps, ref) => {
         return renderContentWithIcon();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ...getBaseProps(), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { ...getLabelProps(), children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ...getInnerWrapperProps(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ...getInputWrapperProps(), children: [
-        startContent && renderStartContent(),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { ...getInputProps() }),
-        renderEndContent()
-      ] }),
-      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { ...getErrorMessageProps(), children: errorMessage })
-    ] })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: clsx(
+        slots.base({ class: classNames == null ? void 0 : classNames.base }),
+        variantProps.direction === "horizon" ? slots.horizon({ class: classNames == null ? void 0 : classNames.horizon }) : slots.vertical({ class: classNames == null ? void 0 : classNames.vertical })
+      ),
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: slots.innerWrapper({ class: classNames == null ? void 0 : classNames.innerWrapper }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
+            {
+              className: clsx(
+                slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper }),
+                inputProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
+              ),
+              children: [
+                startContent && renderStartContent(),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { ...inputProps, ref: ref || inputRef, className: slots.input({ class: classNames == null ? void 0 : classNames.input }), size: 0 }),
+                renderEndContent()
+              ]
+            }
+          ),
+          helperText && !errorText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: slots.helperText({ class: classNames == null ? void 0 : classNames.helperText }), children: helperText }),
+          errorText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: clsx("error", slots.errorText({ class: classNames == null ? void 0 : classNames.errorText })), children: errorText })
+        ] })
+      ]
+    }
+  );
 });
 Input.displayName = "Input";
 var input_default = Input;
 var inputStyle = tv({
   slots: {
-    base: ["group/input", "flex", "flex-col"],
-    label: ["flex", "items-center"],
+    base: ["group/input", "flex"],
+    vertical: ["flex-col"],
+    horizon: ["flex-row", "gap-0"],
+    label: ["flex", "items-center", "font-bold", "text-body-foreground", "min-w-[80px]"],
     innerWrapper: ["flex", "flex-col"],
-    inputWrapper: [
+    inputWrapper: ["flex", "items-center", "transition", "duration-200", "group-has-[p.error]/input:bg-danger-soft"],
+    input: [
+      "w-full",
+      "h-full",
+      "bg-transparent",
+      "text-neutral-main",
+      "placeholder:text-neutral-main",
+      "focus:outline-none",
+      "focus:ring-0",
+      "group-has-[:hover]/input:text-neutral-dark",
+      "group-has-[:hover]/input:placeholder:text-neutral-dark",
+      "group-has-[:focus]/input:text-neutral-dark",
+      "group-has-[:focus]/input:placeholder:text-neutral-dark",
+      "group-has-[p.error]/input:text-danger-main",
+      "group-has-[p.error]/input:placeholder:text-danger-main"
+    ],
+    content: [
       "flex",
       "items-center",
-      "transition",
-      "duration-200",
-      "group-has-[p]/input:border-danger-main",
-      "group-has-[p]/input:bg-danger-soft"
+      "select-none",
+      "text-neutral-main",
+      "group-has-[:hover]/input:text-neutral-dark",
+      "group-has-[p.error]/input:text-danger-main"
     ],
-    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"]
+    helperText: ["text-neutral-main", "group-has-[:hover]/input:text-neutral-dark"],
+    errorText: ["text-danger-main"],
+    readonly: ["pointer-events-none"]
   },
   variants: {
     variant: {
       solid: {
-        inputWrapper: ["bg-trans-soft", "hover:bg-trans-light", "has-[:focus]:bg-trans-light"]
+        inputWrapper: ["!border-transparent", "bg-trans-soft", "group-has-[:focus]/input:text-body-foreground"],
+        readonly: ["!bg-trans-light"]
       },
-      normal: {
+      outline: {
         inputWrapper: [
-          "bg-transparent",
-          "border",
-          "border-neutral-main",
-          "hover:bg-trans-soft",
-          "has-[:focus]:bg-trans-soft"
-        ]
+          "border-neutral-light",
+          "group-has-[:hover]/input:bg-trans-soft",
+          "group-has-[:focus]/input:bg-body-background",
+          "group-has-[p.error]/input:border-danger-main"
+        ],
+        readonly: ["!bg-trans-soft"]
       },
-      line: {
+      underline: {
         inputWrapper: [
           "bg-transparent",
-          "border-b",
-          "border-neutral-main",
           "!rounded-none",
-          "hover:bg-trans-soft",
-          "has-[:focus]:bg-trans-soft"
-        ]
+          "!border-t-transparent",
+          "!border-l-transparent",
+          "!border-r-transparent",
+          "group-has-[:hover]/input:bg-trans-soft",
+          "group-has-[:focus]/input:bg-body-background",
+          "group-has-[p.error]/input:border-danger-main"
+        ],
+        readonly: ["!bg-trans-soft"]
       }
     },
     color: {
       primary: {
-        inputWrapper: ["has-[:focus]:border-primary-main"],
-        content: ["text-primary-main"]
+        content: [
+          "group-has-[:focus]/input:text-primary-main",
+          "!group-has-[p.error]:not(input:focus):hover/input:text-primary-main"
+        ],
+        helperText: [
+          "group-has-[:focus]/input:text-primary-main",
+          "group-has-[:focus:hover]/input:text-primary-main",
+          "group-has-[:focus]/input:hover:text-primary-main"
+        ]
       },
       secondary: {
-        inputWrapper: ["has-[:focus]:border-secondary-main"],
-        content: ["text-secondary-main"]
+        content: [
+          "group-has-[:focus]/input:text-secondary-main",
+          "!group-has-[p.error]:not(input:focus):hover/input:text-secondary-main"
+        ],
+        helperText: [
+          "group-has-[:focus]/input:text-secondary-main",
+          "group-has-[:focus:hover]/input:text-secondary-main",
+          "group-has-[:focus]/input:hover: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"]
+        base: ["text-sm", "gap-[4px]"],
+        label: ["text-sm"],
+        innerWrapper: ["gap-[4px]"],
+        inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[4px]", "border-sm"],
+        helperText: ["text-sm"],
+        errorText: ["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"]
+        base: ["text-md", "gap-[6px]"],
+        label: ["text-md"],
+        innerWrapper: ["gap-[6px]"],
+        inputWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-[6px]", "border-md"],
+        helperText: ["text-sm"],
+        errorText: ["text-sm"]
       },
       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"]
+        base: ["text-lg", "gap-[8px]"],
+        label: ["text-lg"],
+        innerWrapper: ["gap-[8px]"],
+        inputWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-[8px]", "border-lg"],
+        helperText: ["text-md"],
+        errorText: ["text-md"]
       },
       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"]
+        label: ["text-xl"],
+        innerWrapper: ["gap-[10px]"],
+        inputWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-[10px]", "border-xl"],
+        helperText: ["text-md"],
+        errorText: ["text-md"]
       }
     },
-    radius: {
-      default: "",
-      none: {
-        inputWrapper: ["rounded-none"]
-      },
-      full: {
-        inputWrapper: ["rounded-full"]
-      }
+    direction: {
+      vertical: "",
+      horizon: ""
     },
-    fullWidth: {
+    full: {
       true: {
         base: ["w-full"],
         innerWrapper: ["flex-1"],
         inputWrapper: ["w-full"]
       }
     },
-    isDisabled: {
+    disabled: {
       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", "group-has-[p]/input:text-danger-light"],
-        errorMessage: ["text-danger-light"]
-      }
-    },
-    isRequired: {
-      true: {
-        label: ["after:content-['*']", "after:text-danger-main", "after:ml-0.5"]
+        inputWrapper: ["!bg-neutral-soft", "pointer-events-none", "!group-has-[p.error]/input:text-danger-light"],
+        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"
+        ],
+        content: ["text-neutral-light", "group-has-[p.error]/input:text-danger-light"],
+        helperText: ["!text-neutral-light"],
+        errorText: ["!text-danger-light"]
       }
     }
   },
-  defaultVariants: {
-    variant: "solid",
-    color: "primary",
-    size: "md",
-    fullWidth: false,
-    isDisabled: false,
-    isRequired: false
-  },
   compoundVariants: [
     {
-      isDisabled: true,
-      isRequired: true,
+      disabled: true,
+      variant: ["outline", "underline"],
       class: {
-        label: ["after:text-danger-light"]
+        inputWrapper: ["!bg-body-background", "group-has-[p.error]/input:border-danger-light"]
       }
     }
-  ]
+  ],
+  defaultVariants: {
+    variant: "solid",
+    color: "primary",
+    size: "md",
+    direction: "vertical",
+    disabled: false,
+    readonly: false
+  }
 });
 
 // src/components/pagination/pagination.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var Pagination = (0, import_react3.forwardRef)((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, pagination.variantKeys);
+  const [props, variantProps] = mapPropsVariants(originalProps, paginationStyle.variantKeys);
   const {
     classNames,
     currentPage,
@@ -4313,75 +4363,37 @@ var Pagination = (0, import_react3.forwardRef)((originalProps, ref) => {
     totalPage,
     showPageNumber = true,
     showPageLabel,
-    showPageInput,
     showFirstLastButtons,
-    handleChangePage
-  } = props;
-  const { startPage, endPage, pageList, handleClickMovePage } = usePagination_default({
+    handleChangePage,
+    variant,
+    size
+  } = { ...props, ...variantProps };
+  const [inputPage, setInputPage] = (0, import_react3.useState)(currentPage);
+  const slots = (0, import_react3.useMemo)(() => paginationStyle(variantProps), [variantProps]);
+  const { pageList, handleClickMovePage } = usePagination_default({
     currentPage,
     totalPage,
     groupSize,
     handleChangePage
   });
-  const slots = (0, import_react3.useMemo)(() => pagination({ ...variantProps }), [variantProps]);
-  const getBaseProps = (0, import_react3.useCallback)(() => ({ className: slots.base({ class: classNames == null ? void 0 : classNames.base }) }), [slots, classNames]);
-  const getLabelProps = (0, import_react3.useCallback)(
-    () => ({ className: `${slots.label({ class: classNames == null ? void 0 : classNames.label })} + ${showPageInput && " !min-w-[55px]"}` }),
-    [slots, classNames, showPageInput]
-  );
-  const getWrapperProps = (0, import_react3.useCallback)(
-    () => ({ className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }) }),
-    [slots, classNames]
-  );
-  const getIconProps = (0, import_react3.useCallback)(() => ({ className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }) }), [slots, classNames]);
-  const getButtonProps = (0, import_react3.useCallback)(
-    () => ({ className: slots.button({ class: classNames == null ? void 0 : classNames.button }) }),
-    [slots, classNames]
-  );
-  const getLabelWrapperProps = (0, import_react3.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);
-        }
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      const parsed = Number(inputPage);
+      if (!isNaN(parsed) && parsed >= 1 && parsed <= totalPage) {
+        handleChangePage == null ? void 0 : handleChangePage(parsed);
       }
-    }),
-    [handleChangePage, showPageInput]
-  );
-  const getInputProps = (0, import_react3.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__ */ (0, import_jsx_runtime4.jsxs)("div", { ...getBaseProps(), children: [
-    showPageLabel && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { ...getLabelProps(), children: `${currentPage} of ${totalPage}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("form", { ...getLabelWrapperProps(), children: [
-      showPageInput && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(input_default, { ...getInputProps() }, `${currentPage}+pagination-input`),
-      showPageLabel && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { ...getLabelProps(), children: [
-        !showPageInput && currentPage,
-        ` of ${totalPage}`
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ...getWrapperProps(), children: [
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
       showFirstLastButtons && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "div",
         {
           "aria-label": "firstPage",
           "data-is-active": currentPage > 1,
-          ...getIconProps(),
+          className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }),
           onClick: currentPage > 1 ? handleClickMovePage(1) : void 0,
-          children: "<<"
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon_default, { name: "left-double-chevron" })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -4389,15 +4401,15 @@ var Pagination = (0, import_react3.forwardRef)((originalProps, ref) => {
         {
           "aria-label": "prevPage",
           "data-is-active": currentPage > 1,
-          ...getIconProps(),
+          className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }),
           onClick: currentPage > 1 ? handleClickMovePage(currentPage - 1) : void 0,
-          children: "<"
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon_default, { name: "left-chevron" })
         }
       ),
       showPageNumber && pageList.map((page, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "div",
         {
-          ...getButtonProps(),
+          className: slots.button({ class: classNames == null ? void 0 : classNames.button }),
           "data-selected": currentPage === page,
           onClick: handleClickMovePage(page),
           children: page
@@ -4409,9 +4421,9 @@ var Pagination = (0, import_react3.forwardRef)((originalProps, ref) => {
         {
           "aria-label": "nextPage",
           "data-is-active": currentPage < totalPage,
-          ...getIconProps(),
+          className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }),
           onClick: currentPage < totalPage ? handleClickMovePage(currentPage + 1) : void 0,
-          children: ">"
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon_default, { name: "right-chevron" })
         }
       ),
       showFirstLastButtons && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -4419,163 +4431,179 @@ var Pagination = (0, import_react3.forwardRef)((originalProps, ref) => {
         {
           "aria-label": "lastPage",
           "data-is-active": currentPage < totalPage,
-          ...getIconProps(),
+          className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }),
           onClick: currentPage < totalPage ? handleClickMovePage(totalPage) : void 0,
-          children: ">>"
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon_default, { name: "right-double-chevron" })
+        }
+      )
+    ] }),
+    showPageLabel && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        input_default,
+        {
+          value: inputPage || 1,
+          onChange: (e) => setInputPage(Number(e.target.value)),
+          onKeyDown: handleKeyDown,
+          width: 50,
+          height: 24,
+          size: "sm",
+          classNames: {
+            inputWrapper: clsx(
+              "w-[50px] h-[24px] rounded-sm",
+              variant === "solid" ? "" : "bg-body-background border border-neutral-light"
+            )
+          }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("form", { ...getLabelWrapperProps(), children: [
-        showPageInput && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(input_default, { ...getInputProps() }, `${currentPage}+pagination-input`),
-        showPageLabel && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { ...getLabelProps(), children: [
-          !showPageInput && currentPage,
-          ` of ${totalPage}`
-        ] })
-      ] })
+      ` of ${totalPage.toLocaleString("ko-kr")}`
     ] })
   ] });
 });
 Pagination.displayName = "Pagination";
 var pagination_default = Pagination;
-var pagination = tv(
+var paginationStyle = tv(
   {
     slots: {
-      base: "flex items-center select-none",
-      label: "text-primary-main text-right whitespace-nowrap",
-      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"
+      base: ["flex", "items-center", "select-none", "gap-[20px]"],
+      wrapper: ["flex", "items-center", "overflow-hidden", "gap-[5px]"],
+      icon: [
+        "flex",
+        "items-center",
+        "justify-center",
+        "cursor-pointer",
+        "stroke-neutral-main",
+        "data-[is-active=false]:stroke-neutral-light",
+        "data-[is-active=false]:cursor-default"
+      ],
+      button: [
+        "flex",
+        "items-center",
+        "justify-center",
+        "cursor-pointer",
+        "transition",
+        "duration-200",
+        "px-[6px]",
+        "py-[4px]",
+        "text-neutral-main",
+        "data-[selected=true]:font-bold"
+      ],
+      label: ["whitespace-nowrap", "text-neutral-main", "flex", "items-center", "gap-[5px]", "text-sm"]
     },
     variants: {
       variant: {
         solid: {
-          button: ["text-neutral-dark"],
-          icon: "text-neutral-dark data-[is-active=false]:text-neutral-light data-[is-active=false]:cursor-default"
+          button: ["rounded-[5px]", "border-transparent"]
         },
-        line: {
-          wrapper: "!gap-0",
-          button: ["text-foreground"],
-          icon: "text-foreground data-[is-active=false]:text-neutral-light data-[is-active=false]:cursor-default first-of-type:border-l-0"
+        underline: {
+          button: ["rounded-0", "border-transparent"]
         }
       },
       size: {
         sm: {
-          wrapper: "gap-[6px]",
-          label: "min-w-[85px] text-sm mr-[10px]",
-          icon: ["h-[15px] text-sm"],
-          button: ["min-w-[28px] h-[15px] text-sm"]
+          button: ["text-sm", "data-[selected=true]:border-sm"]
         },
         md: {
-          wrapper: "gap-[8px]",
-          label: "min-w-[95px] text-md mr-[12px]",
-          icon: ["h-[17px] text-md"],
-          button: ["min-w-[32px] h-[17px] text-md"]
+          button: ["text-md", "data-[selected=true]:border-md"]
         },
         lg: {
-          wrapper: "gap-[10px]",
-          label: "min-w-[105px] text-lg mr-[14px]",
-          icon: ["h-[20px] text-lg"],
-          button: ["min-w-[37px] h-[20px] text-lg"]
+          button: ["text-lg", "data-[selected=true]:border-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"]
+          button: ["text-xl", "data-[selected=true]:border-xl"]
         }
       },
       color: {
-        primary: {
-          label: "text-primary-main"
-        },
-        secondary: {
-          label: "text-secondary-main"
-        }
+        primary: {},
+        secondary: {},
+        neutral: {}
       },
       isDisabled: {
         true: {
-          icon: "!text-neutral-light !cursor-default",
-          button: "!text-neutral-light !cursor-default"
+          icon: ["!text-neutral-light", "!cursor-default"],
+          button: ["!text-neutral-light", "!cursor-default"]
         }
       }
     },
-    defaultVariants: {
-      variant: "solid",
-      color: "primary",
-      size: "md",
-      isDisabled: false
-    },
     compoundVariants: [
       {
         variant: "solid",
         color: "primary",
         class: {
-          button: "hover:text-primary-main data-[selected=true]:text-primary-main data-[selected=true]:border-primary-main",
-          icon: "hover:text-primary-main"
+          button: [
+            "hover:text-primary-main",
+            "data-[selected=true]:text-primary-main",
+            "data-[selected=true]:bg-primary-soft"
+          ],
+          icon: ["hover:stroke-primary-main"]
         }
       },
       {
         variant: "solid",
         color: "secondary",
         class: {
-          button: "hover:text-secondary-main data-[selected=true]:text-secondary-main data-[selected=true]:border-secondary-main",
-          icon: "hover:text-secondary-main"
-        }
-      },
-      {
-        variant: "line",
-        size: "sm",
-        class: {
-          wrapper: "border rounded-sm gap-0",
-          button: "!min-w-[40px] h-[20px] border-l",
-          icon: "min-w-[40px] h-[20px] border-l"
-        }
-      },
-      {
-        variant: "line",
-        size: "md",
-        class: {
-          wrapper: "border rounded-md gap-0",
-          button: "!min-w-[45px] h-[22px] border-l",
-          icon: "min-w-[45px] h-[22px] border-l"
+          button: [
+            "hover:text-secondary-main",
+            "data-[selected=true]:text-secondary-main",
+            "data-[selected=true]:bg-secondary-soft"
+          ],
+          icon: ["hover:stroke-secondary-main"]
         }
       },
       {
-        variant: "line",
-        size: "lg",
+        variant: "solid",
+        color: "neutral",
         class: {
-          wrapper: "border rounded-lg gap-0",
-          button: "!min-w-[50px] h-[24px] border-l",
-          icon: "min-w-[50px] h-[24px] border-l"
+          button: [
+            "hover:text-neutral-dark",
+            "data-[selected=true]:text-neutral-dark",
+            "data-[selected=true]:bg-neutral-soft"
+          ],
+          icon: ["hover:stroke-neutral-main"]
         }
       },
       {
-        variant: "line",
-        size: "xl",
+        variant: "underline",
+        color: "primary",
         class: {
-          wrapper: "border rounded-lg gap-0",
-          button: "!min-w-[50px] h-[24px] border-l",
-          icon: "min-w-[50px] h-[24px] border-l"
+          button: [
+            "hover:text-primary-main",
+            "data-[selected=true]:text-primary-main",
+            "data-[selected=true]:border-b-primary-main"
+          ],
+          icon: ["hover:stroke-primary-main"]
         }
       },
       {
-        variant: "line",
-        color: "primary",
+        variant: "underline",
+        color: "secondary",
         class: {
-          wrapper: "border-primary-main",
-          button: "border-primary-main hover:bg-primary-soft hover:text-primary-main data-[selected=true]:bg-primary-soft data-[selected=true]:text-primary-main",
-          icon: "border-primary-main data-[selected=true]:bg-primary-soft data-[selected=true]:text-primary-main data-[is-active=true]:hover:text-primary-main data-[is-active=true]:hover:bg-primary-soft"
+          button: [
+            "hover:text-secondary-main",
+            "data-[selected=true]:text-secondary-main",
+            "data-[selected=true]:border-b-secondary-main"
+          ],
+          icon: ["hover:stroke-secondary-main"]
         }
       },
       {
-        variant: "line",
-        color: "secondary",
+        variant: "underline",
+        color: "neutral",
         class: {
-          wrapper: "border-secondary-main",
-          button: "border-secondary-main hover:bg-secondary-soft hover:text-secondary-main data-[selected=true]:bg-secondary-soft data-[selected=true]:text-secondary-main",
-          icon: "border-secondary-main data-[selected=true]:bg-secondary-soft data-[selected=true]:text-secondary-main data-[is-active=true]:hover:text-secondary-main data-[is-active=true]:hover:bg-secondary-soft"
+          button: [
+            "hover:text-neutral-dark",
+            "data-[selected=true]:text-neutral-dark",
+            "data-[selected=true]:border-b-neutral-main"
+          ],
+          icon: ["hover:stroke-neutral-main"]
         }
       }
-    ]
+    ],
+    defaultVariants: {
+      variant: "solid",
+      color: "primary",
+      size: "md",
+      isDisabled: false
+    }
   },
   {
     twMerge: false