@deepnoid/ui 0.1.223 → 1.0.0

package/dist/chunk-E4VJDQD5.mjs

@@ -0,0 +1,142 @@
+"use client";
+import {
+  backdrop_default
+} from "./chunk-P4GNXDMO.mjs";
+import {
+  button_default
+} from "./chunk-63JRWMWN.mjs";
+import {
+  Icon_default
+} from "./chunk-A6UUVHC6.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-DPWUIAVC.mjs";
+
+// src/components/modal/modal.tsx
+import { forwardRef, useMemo, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Modal = forwardRef((props, ref) => {
+  const [localProps, variantProps] = mapPropsVariants(props, modal.variantKeys);
+  const {
+    isOpen,
+    iconName,
+    title,
+    content,
+    confirmButtonText,
+    cancelButtonText,
+    showCloseButton = true,
+    isKeyboardDismissDisabled = false,
+    hasBackdrop = true,
+    onConfirm,
+    onCancel,
+    extraFooter,
+    classNames,
+    ...restProps
+  } = localProps;
+  const variant = props.variant || "horizontal";
+  const slots = useMemo(() => modal(variantProps), [variantProps]);
+  useEffect(() => {
+    document.body.classList.toggle("overflow-hidden", !!isOpen);
+    if (!isOpen || isKeyboardDismissDisabled) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") onCancel == null ? void 0 : onCancel();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.classList.remove("overflow-hidden");
+    };
+  }, [isOpen, isKeyboardDismissDisabled, onCancel]);
+  if (!isOpen) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      hasBackdrop && /* @__PURE__ */ jsx(backdrop_default, { open: true }),
+      /* @__PURE__ */ jsxs("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), ...restProps, children: [
+        /* @__PURE__ */ jsxs("div", { className: slots.titleWrapper({ class: classNames == null ? void 0 : classNames.titleWrapper }), children: [
+          iconName && /* @__PURE__ */ jsx(
+            Icon_default,
+            {
+              name: iconName,
+              size: variant === "vertical" ? 40 : 30,
+              fill: true,
+              className: slots.icon({ class: classNames == null ? void 0 : classNames.icon })
+            }
+          ),
+          title && /* @__PURE__ */ jsx("div", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title })
+        ] }),
+        showCloseButton && /* @__PURE__ */ jsx(Icon_default, { name: "close", className: slots.closeIcon({ class: classNames == null ? void 0 : classNames.closeIcon }), onClick: onCancel }),
+        typeof content === "string" ? /* @__PURE__ */ jsx("div", { className: slots.content({ class: classNames == null ? void 0 : classNames.content }), children: content }) : content,
+        (cancelButtonText || confirmButtonText) && /* @__PURE__ */ jsxs("div", { className: slots.footerWrapper({ class: classNames == null ? void 0 : classNames.footerWrapper }), children: [
+          /* @__PURE__ */ jsxs("div", { className: slots.footer({ class: classNames == null ? void 0 : classNames.footer }), children: [
+            cancelButtonText && /* @__PURE__ */ jsx(button_default, { variant: "outline", color: props.color, full: true, onClick: onCancel, children: cancelButtonText }),
+            confirmButtonText && /* @__PURE__ */ jsx(button_default, { color: props.color, full: true, onClick: onConfirm, children: confirmButtonText })
+          ] }),
+          extraFooter
+        ] })
+      ] })
+    ] }),
+    document.body
+  );
+});
+Modal.displayName = "Modal";
+var modal_default = Modal;
+var modal = tv({
+  slots: {
+    base: [
+      "group/modal",
+      "absolute",
+      "fixed",
+      "top-1/2",
+      "left-1/2",
+      "-translate-x-1/2",
+      "-translate-y-1/2",
+      "z-[50]",
+      "rounded-2xl",
+      "min-w-[340px]",
+      "flex",
+      "flex-col",
+      "justify-center",
+      "gap-20",
+      "p-20",
+      "bg-body-background",
+      "shadow-drop",
+      "shadow-foreground/20",
+      "rounded-2xl",
+      "overflow-hidden"
+    ],
+    icon: [],
+    titleWrapper: ["flex", "items-center", "gap-10"],
+    title: ["text-xl", "font-extrabold", "text-body-foreground"],
+    content: ["text-md", "text-center", "break-words", "bg-trans-soft", "rounded-5", "p-lg", "text-body-foreground"],
+    footerWrapper: ["flex", "flex-col", "gap-5"],
+    footer: ["flex", "gap-10"],
+    closeIcon: ["absolute", "top-[20px]", "right-[20px]", "cursor-pointer", "z-60", "text-neutral-dark"]
+  },
+  variants: {
+    variant: {
+      vertical: { titleWrapper: ["flex-col"] },
+      horizontal: { titleWrapper: ["flex-row"] }
+    },
+    color: {
+      primary: { icon: ["text-primary-main"] },
+      secondary: { icon: ["text-secondary-main"] },
+      neutral: { icon: ["text-neutral-main"] },
+      success: { icon: ["text-success-main"] },
+      info: { icon: ["text-info-main"] },
+      warning: { icon: ["text-warning-main"] },
+      danger: { icon: ["text-danger-main"] }
+    }
+  },
+  defaultVariants: {
+    variant: "horizontal",
+    color: "primary"
+  }
+});
+
+export {
+  modal_default
+};

package/dist/{chunk-TE5JU3WA.mjs → chunk-EAWNUQDB.mjs}

@@ -4,10 +4,10 @@ import {
 } from "./chunk-F3HENRVM.mjs";
 import {
   input_default
-} from "./chunk-EJ4GDC6K.mjs";
+} from "./chunk-S2T4GHJA.mjs";
 import {
   Icon_default
-} from "./chunk-6AID2NLT.mjs";
+} from "./chunk-A6UUVHC6.mjs";
 import {
   clsx
 } from "./chunk-27Y6K5NK.mjs";
@@ -16,7 +16,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-U4DJHAM5.mjs";
+} from "./chunk-DPWUIAVC.mjs";
 
 // src/components/pagination/pagination.tsx
 import { forwardRef, useMemo, useState } from "react";
@@ -55,32 +55,34 @@ var Pagination = forwardRef((originalProps, ref) => {
       }
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), ref, children: [
+  return /* @__PURE__ */ jsxs("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
     /* @__PURE__ */ jsxs("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-      showFirstLastButtons && /* @__PURE__ */ jsx(
-        "div",
-        {
-          "aria-label": "firstPage",
-          "data-disabled": isFirstPageDisabled,
-          className: slots.icon({
-            class: clsx(classNames == null ? void 0 : classNames.icon, isFirstPageDisabled && "!text-neutral-light !cursor-default")
-          }),
-          onClick: !isFirstPageDisabled ? handleClickMovePage(1) : void 0,
-          children: /* @__PURE__ */ jsx(Icon_default, { name: "left-double-chevron", size })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          "aria-label": "prevPage",
-          "data-disabled": isPrevPageDisabled,
-          className: slots.icon({
-            class: clsx(classNames == null ? void 0 : classNames.icon, isPrevPageDisabled && "!text-neutral-light !cursor-default")
-          }),
-          onClick: !isPrevPageDisabled ? handleClickMovePage(currentPage - 1) : void 0,
-          children: /* @__PURE__ */ jsx(Icon_default, { name: "left-chevron", size })
-        }
-      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+        showFirstLastButtons && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-label": "firstPage",
+            "data-disabled": isFirstPageDisabled,
+            className: slots.icon({
+              class: clsx(classNames == null ? void 0 : classNames.icon, isFirstPageDisabled && "!text-neutral-light !cursor-default")
+            }),
+            onClick: !isFirstPageDisabled ? handleClickMovePage(1) : void 0,
+            children: /* @__PURE__ */ jsx(Icon_default, { name: "left-double", size })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-label": "prevPage",
+            "data-disabled": isPrevPageDisabled,
+            className: slots.icon({
+              class: clsx(classNames == null ? void 0 : classNames.icon, isPrevPageDisabled && "!text-neutral-light !cursor-default")
+            }),
+            onClick: !isPrevPageDisabled ? handleClickMovePage(currentPage - 1) : void 0,
+            children: /* @__PURE__ */ jsx(Icon_default, { name: "left", size })
+          }
+        )
+      ] }),
       showPageNumber && pageList.map((page, index) => /* @__PURE__ */ jsx(
         "div",
         {
@@ -91,30 +93,32 @@ var Pagination = forwardRef((originalProps, ref) => {
         },
         index
       )),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          "aria-label": "nextPage",
-          "data-disabled": isNextPageDisabled,
-          className: slots.icon({
-            class: clsx(classNames == null ? void 0 : classNames.icon, isNextPageDisabled && "!text-neutral-light !cursor-default")
-          }),
-          onClick: !isNextPageDisabled ? handleClickMovePage(currentPage + 1) : void 0,
-          children: /* @__PURE__ */ jsx(Icon_default, { name: "right-chevron", size })
-        }
-      ),
-      showFirstLastButtons && /* @__PURE__ */ jsx(
-        "div",
-        {
-          "aria-label": "lastPage",
-          "data-disabled": isLastPageDisabled,
-          className: slots.icon({
-            class: clsx(classNames == null ? void 0 : classNames.icon, isLastPageDisabled && "!text-neutral-light !cursor-default")
-          }),
-          onClick: !isLastPageDisabled ? handleClickMovePage(totalPage) : void 0,
-          children: /* @__PURE__ */ jsx(Icon_default, { name: "right-double-chevron", size })
-        }
-      )
+      /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-label": "nextPage",
+            "data-disabled": isNextPageDisabled,
+            className: slots.icon({
+              class: clsx(classNames == null ? void 0 : classNames.icon, isNextPageDisabled && "!text-neutral-light !cursor-default")
+            }),
+            onClick: !isNextPageDisabled ? handleClickMovePage(currentPage + 1) : void 0,
+            children: /* @__PURE__ */ jsx(Icon_default, { name: "right", size })
+          }
+        ),
+        showFirstLastButtons && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-label": "lastPage",
+            "data-disabled": isLastPageDisabled,
+            className: slots.icon({
+              class: clsx(classNames == null ? void 0 : classNames.icon, isLastPageDisabled && "!text-neutral-light !cursor-default")
+            }),
+            onClick: !isLastPageDisabled ? handleClickMovePage(totalPage) : void 0,
+            children: /* @__PURE__ */ jsx(Icon_default, { name: "right-double", size })
+          }
+        )
+      ] })
     ] }),
     showPageLabel && /* @__PURE__ */ jsxs("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: [
       /* @__PURE__ */ jsx(
@@ -141,8 +145,8 @@ var pagination_default = Pagination;
 var paginationStyle = tv(
   {
     slots: {
-      base: ["flex", "items-center", "select-none", "gap-[20px]"],
-      wrapper: ["flex", "items-center", "overflow-hidden", "gap-[5px]"],
+      base: ["flex", "items-center", "select-none", "gap-20"],
+      wrapper: ["flex", "items-center", "overflow-hidden", "gap-5"],
       icon: [
         "flex",
         "items-center",
@@ -164,15 +168,24 @@ var paginationStyle = tv(
         "text-neutral-main",
         "data-[selected=true]:font-bold"
       ],
-      label: ["whitespace-nowrap", "text-neutral-main", "flex", "items-center", "gap-[5px]", "text-sm"]
+      label: ["whitespace-nowrap", "text-neutral-main", "flex", "items-center", "gap-5", "text-sm"]
     },
     variants: {
       variant: {
         solid: {
-          button: ["rounded-[5px]"]
+          button: ["rounded-sm"]
         },
         underline: {
-          button: ["rounded-0", "bg-body-background"]
+          button: [
+            "rounded-0",
+            "relative",
+            "after:content-['']",
+            "after:absolute",
+            "after:inset-x-0",
+            "after:bottom-0",
+            "after:border-solid",
+            "after:border-transparent"
+          ]
         }
       },
       size: {
@@ -197,7 +210,7 @@ var paginationStyle = tv(
       disabled: {
         true: {
           icon: ["!text-neutral-light", "!cursor-default"],
-          button: ["!text-neutral-light", "!cursor-default"]
+          button: ["!text-neutral-light", "!cursor-default", "data-[selected=true]:after:border-neutral-light"]
         }
       }
     },
@@ -242,120 +255,64 @@ var paginationStyle = tv(
         variant: "underline",
         color: "primary",
         class: {
-          button: ["hover:text-primary-main", "data-[selected=true]:text-primary-main"],
+          button: [
+            "hover:text-primary-main",
+            "data-[selected=true]:text-primary-main",
+            "data-[selected=true]:after:border-primary-main"
+          ],
           icon: ["hover:text-primary-main", "data-[disabled=true]:hover:text-neutral-light"]
         }
       },
-      {
-        variant: "underline",
-        color: "primary",
-        size: "sm",
-        class: {
-          button: ["data-[selected=true]:shadow-[inset_0_-1px_0_0_var(--dn-primary-main)]"]
-        }
-      },
-      {
-        variant: "underline",
-        color: "primary",
-        size: "md",
-        class: {
-          button: ["data-[selected=true]:shadow-[inset_0_-1.25px_0_0_var(--dn-primary-main)]"]
-        }
-      },
-      {
-        variant: "underline",
-        color: "primary",
-        size: "lg",
-        class: {
-          button: ["data-[selected=true]:shadow-[inset_0_-1.5px_0_0_var(--dn-primary-main)]"]
-        }
-      },
-      {
-        variant: "underline",
-        color: "primary",
-        size: "xl",
-        class: {
-          button: ["data-[selected=true]:shadow-[inset_0_-1.75px_0_0_var(--dn-primary-main)]"]
-        }
-      },
       {
         variant: "underline",
         color: "secondary",
         class: {
-          button: ["hover:text-secondary-main", "data-[selected=true]:text-secondary-main"],
+          button: [
+            "hover:text-secondary-main",
+            "data-[selected=true]:text-secondary-main",
+            "data-[selected=true]:after:border-secondary-main"
+          ],
           icon: ["hover:text-secondary-main", "data-[disabled=true]:hover:text-neutral-light"]
         }
       },
-      {
-        variant: "underline",
-        color: "secondary",
-        size: "sm",
-        class: {
-          button: ["data-[selected=true]:shadow-[inset_0_-1px_0_0_var(--dn-secondary-main)]"]
-        }
-      },
-      {
-        variant: "underline",
-        color: "secondary",
-        size: "md",
-        class: {
-          button: ["data-[selected=true]:shadow-[inset_0_-1.25px_0_0_var(--dn-secondary-main)]"]
-        }
-      },
-      {
-        variant: "underline",
-        color: "secondary",
-        size: "lg",
-        class: {
-          button: ["data-[selected=true]:shadow-[inset_0_-1.5px_0_0_var(--dn-secondary-main)]"]
-        }
-      },
-      {
-        variant: "underline",
-        color: "secondary",
-        size: "xl",
-        class: {
-          button: ["data-[selected=true]:shadow-[inset_0_-1.75px_0_0_var(--dn-secondary-main)]"]
-        }
-      },
       {
         variant: "underline",
         color: "neutral",
         class: {
-          button: ["hover:text-neutral-dark", "data-[selected=true]:text-neutral-dark"],
+          button: [
+            "hover:text-neutral-dark",
+            "data-[selected=true]:text-neutral-dark",
+            "data-[selected=true]:after:border-neutral-main"
+          ],
           icon: ["hover:text-neutral-dark", "data-[disabled=true]:hover:text-neutral-light"]
         }
       },
       {
         variant: "underline",
-        color: "neutral",
         size: "sm",
         class: {
-          button: ["data-[selected=true]:shadow-[inset_0_-1px_0_0_var(--dn-neutral-main)]"]
+          button: ["after:border-b-sm"]
         }
       },
       {
         variant: "underline",
-        color: "neutral",
         size: "md",
         class: {
-          button: ["data-[selected=true]:shadow-[inset_0_-1.25px_0_0_var(--dn-neutral-main)]"]
+          button: ["after:border-b-md"]
         }
       },
       {
         variant: "underline",
-        color: "neutral",
         size: "lg",
         class: {
-          button: ["data-[selected=true]:shadow-[inset_0_-1.5px_0_0_var(--dn-neutral-main)]"]
+          button: ["after:border-b-lg"]
         }
       },
       {
         variant: "underline",
-        color: "neutral",
         size: "xl",
         class: {
-          button: ["data-[selected=true]:shadow-[inset_0_-1.75px_0_0_var(--dn-neutral-main)]"]
+          button: ["after:border-b-xl"]
         }
       }
     ],

package/dist/{chunk-OXJX5G3O.mjs → chunk-EIVSXVP5.mjs}

@@ -1,13 +1,13 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-6AID2NLT.mjs";
+} from "./chunk-A6UUVHC6.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-U4DJHAM5.mjs";
+} from "./chunk-DPWUIAVC.mjs";
 
 // src/components/starRating/starRating.tsx
 import { forwardRef, useMemo, useState } from "react";

package/dist/{chunk-JGG3ZUNG.mjs → chunk-GSOTTSR4.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-U4DJHAM5.mjs";
+} from "./chunk-DPWUIAVC.mjs";
 
 // src/components/accordion/accordion.tsx
 import { Children, cloneElement, forwardRef, useMemo, useState } from "react";

package/dist/{chunk-NGRGAY42.mjs → chunk-HKF5BNPX.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-U4DJHAM5.mjs";
+} from "./chunk-DPWUIAVC.mjs";
 
 // src/components/list/list.tsx
 import { Children, cloneElement, forwardRef, isValidElement, useMemo } from "react";

package/dist/{chunk-2URJGQFC.mjs → chunk-JUKILR6X.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-6AID2NLT.mjs";
+} from "./chunk-A6UUVHC6.mjs";
 import {
   clsx
 } from "./chunk-27Y6K5NK.mjs";
@@ -10,7 +10,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-U4DJHAM5.mjs";
+} from "./chunk-DPWUIAVC.mjs";
 
 // src/components/toast/toast.tsx
 import { forwardRef, useImperativeHandle, useMemo, useRef } from "react";

package/dist/{chunk-DW3BX4M2.mjs → chunk-KPOXK7NN.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-U4DJHAM5.mjs";
+} from "./chunk-DPWUIAVC.mjs";
 
 // src/components/tabs/tabs.tsx
 import { forwardRef, useCallback, useMemo, useState } from "react";

package/dist/{chunk-5KC3IFNR.mjs → chunk-LJSGQO4B.mjs}

@@ -11,7 +11,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-U4DJHAM5.mjs";
+} from "./chunk-DPWUIAVC.mjs";
 
 // src/components/tooltip/tooltip.tsx
 import { forwardRef, useCallback, useMemo, useRef, useState, useEffect } from "react";

package/dist/{chunk-LH6Z7SDZ.mjs → chunk-M7V5YMM2.mjs}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-U4DJHAM5.mjs";
+} from "./chunk-DPWUIAVC.mjs";
 
 // src/components/charts/areaChart.tsx
 import { forwardRef, useMemo, useState, useRef, useEffect, useId } from "react";