@deepnoid/ui 0.1.0 → 0.1.1

package/dist/{chunk-IE2BRM7Z.mjs → chunk-2ZT6V4QR.mjs}

@@ -221,35 +221,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"
     }
   ],
@@ -257,7 +252,6 @@ var fontSize = {
     "12px",
     {
       lineHeight: "18px",
-      letterSpacing: "-2%",
       fontWeight: "400"
     }
   ],
@@ -265,7 +259,6 @@ var fontSize = {
     "14px",
     {
       lineHeight: "21px",
-      letterSpacing: "-2%",
       fontWeight: "400"
     }
   ],
@@ -273,7 +266,6 @@ var fontSize = {
     "16px",
     {
       lineHeight: "24px",
-      letterSpacing: "-2%",
       fontWeight: "400"
     }
   ],
@@ -281,7 +273,6 @@ var fontSize = {
     "18px",
     {
       lineHeight: "27px",
-      letterSpacing: "-2%",
       fontWeight: "400"
     }
   ]

package/dist/{chunk-PKVQXVCS.mjs → chunk-56VCX2QR.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   tv
-} from "./chunk-IE2BRM7Z.mjs";
+} from "./chunk-2ZT6V4QR.mjs";
 import {
   clsx
 } from "./chunk-27Y6K5NK.mjs";

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

@@ -1,13 +1,13 @@
 "use client";
 import {
   button_default
-} from "./chunk-X2MQCISM.mjs";
+} from "./chunk-S65S7QZ5.mjs";
 import {
   Icon_default
 } from "./chunk-24NQEB73.mjs";
 import {
   tv
-} from "./chunk-IE2BRM7Z.mjs";
+} from "./chunk-2ZT6V4QR.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/{chunk-MW6Y3FSE.mjs → chunk-AYWI2CRE.mjs}

@@ -1,13 +1,13 @@
 "use client";
 import {
   avatar_default
-} from "./chunk-XAA5KY6A.mjs";
+} from "./chunk-CF6O6TCF.mjs";
 import {
   Icon_default
 } from "./chunk-24NQEB73.mjs";
 import {
   tv
-} from "./chunk-IE2BRM7Z.mjs";
+} from "./chunk-2ZT6V4QR.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/{chunk-XAA5KY6A.mjs → chunk-CF6O6TCF.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-P2TMIZRH.mjs";
 import {
   tv
-} from "./chunk-IE2BRM7Z.mjs";
+} from "./chunk-2ZT6V4QR.mjs";
 
 // src/components/avatar/avatar.tsx
 import { forwardRef, useMemo } from "react";

package/dist/chunk-DUOYMLZL.mjs

@@ -0,0 +1,283 @@
+"use client";
+import {
+  input_default
+} from "./chunk-RT5NKQX4.mjs";
+import {
+  usePagination_default
+} from "./chunk-F3HENRVM.mjs";
+import {
+  Icon_default
+} from "./chunk-24NQEB73.mjs";
+import {
+  tv
+} from "./chunk-2ZT6V4QR.mjs";
+import {
+  clsx
+} from "./chunk-27Y6K5NK.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+
+// src/components/pagination/pagination.tsx
+import { forwardRef, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Pagination = forwardRef((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, paginationStyle.variantKeys);
+  const {
+    classNames,
+    currentPage,
+    groupSize,
+    totalPage,
+    showPageNumber = true,
+    showPageLabel,
+    showFirstLastButtons,
+    handleChangePage,
+    variant,
+    size
+  } = { ...props, ...variantProps };
+  const [inputPage, setInputPage] = useState(currentPage);
+  const slots = useMemo(() => paginationStyle(variantProps), [variantProps]);
+  const { pageList, handleClickMovePage } = usePagination_default({
+    currentPage,
+    totalPage,
+    groupSize,
+    handleChangePage
+  });
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      const parsed = Number(inputPage);
+      if (!isNaN(parsed) && parsed >= 1 && parsed <= totalPage) {
+        handleChangePage == null ? void 0 : handleChangePage(parsed);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), ref, children: [
+    /* @__PURE__ */ jsxs("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+      showFirstLastButtons && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-label": "firstPage",
+          "data-is-active": currentPage > 1,
+          className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }),
+          onClick: currentPage > 1 ? handleClickMovePage(1) : void 0,
+          children: /* @__PURE__ */ jsx(Icon_default, { name: "left-double-chevron" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-label": "prevPage",
+          "data-is-active": currentPage > 1,
+          className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }),
+          onClick: currentPage > 1 ? handleClickMovePage(currentPage - 1) : void 0,
+          children: /* @__PURE__ */ jsx(Icon_default, { name: "left-chevron" })
+        }
+      ),
+      showPageNumber && pageList.map((page, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: slots.button({ class: classNames == null ? void 0 : classNames.button }),
+          "data-selected": currentPage === page,
+          onClick: handleClickMovePage(page),
+          children: page
+        },
+        index
+      )),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-label": "nextPage",
+          "data-is-active": currentPage < totalPage,
+          className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }),
+          onClick: currentPage < totalPage ? handleClickMovePage(currentPage + 1) : void 0,
+          children: /* @__PURE__ */ jsx(Icon_default, { name: "right-chevron" })
+        }
+      ),
+      showFirstLastButtons && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-label": "lastPage",
+          "data-is-active": currentPage < totalPage,
+          className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }),
+          onClick: currentPage < totalPage ? handleClickMovePage(totalPage) : void 0,
+          children: /* @__PURE__ */ jsx(Icon_default, { name: "right-double-chevron" })
+        }
+      )
+    ] }),
+    showPageLabel && /* @__PURE__ */ jsxs("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: [
+      /* @__PURE__ */ 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"
+            )
+          }
+        }
+      ),
+      ` of ${totalPage.toLocaleString("ko-kr")}`
+    ] })
+  ] });
+});
+Pagination.displayName = "Pagination";
+var pagination_default = Pagination;
+var paginationStyle = tv(
+  {
+    slots: {
+      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: ["rounded-[5px]", "border-transparent"]
+        },
+        underline: {
+          button: ["rounded-0", "border-transparent"]
+        }
+      },
+      size: {
+        sm: {
+          button: ["text-sm", "data-[selected=true]:border-sm"]
+        },
+        md: {
+          button: ["text-md", "data-[selected=true]:border-md"]
+        },
+        lg: {
+          button: ["text-lg", "data-[selected=true]:border-lg"]
+        },
+        xl: {
+          button: ["text-xl", "data-[selected=true]:border-xl"]
+        }
+      },
+      color: {
+        primary: {},
+        secondary: {},
+        neutral: {}
+      },
+      isDisabled: {
+        true: {
+          icon: ["!text-neutral-light", "!cursor-default"],
+          button: ["!text-neutral-light", "!cursor-default"]
+        }
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "solid",
+        color: "primary",
+        class: {
+          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]:bg-secondary-soft"
+          ],
+          icon: ["hover:stroke-secondary-main"]
+        }
+      },
+      {
+        variant: "solid",
+        color: "neutral",
+        class: {
+          button: [
+            "hover:text-neutral-dark",
+            "data-[selected=true]:text-neutral-dark",
+            "data-[selected=true]:bg-neutral-soft"
+          ],
+          icon: ["hover:stroke-neutral-main"]
+        }
+      },
+      {
+        variant: "underline",
+        color: "primary",
+        class: {
+          button: [
+            "hover:text-primary-main",
+            "data-[selected=true]:text-primary-main",
+            "data-[selected=true]:border-b-primary-main"
+          ],
+          icon: ["hover:stroke-primary-main"]
+        }
+      },
+      {
+        variant: "underline",
+        color: "secondary",
+        class: {
+          button: [
+            "hover:text-secondary-main",
+            "data-[selected=true]:text-secondary-main",
+            "data-[selected=true]:border-b-secondary-main"
+          ],
+          icon: ["hover:stroke-secondary-main"]
+        }
+      },
+      {
+        variant: "underline",
+        color: "neutral",
+        class: {
+          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
+  }
+);
+
+export {
+  pagination_default,
+  paginationStyle
+};

package/dist/{chunk-QNA2GDTN.mjs → chunk-GLBASISV.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-ZOTHPHXA.mjs";
 import {
   toast_default
-} from "./chunk-FYJZ7Q5L.mjs";
+} from "./chunk-XIHAABHB.mjs";
 
 // src/components/toast/use-toast.tsx
 import { createContext, useContext, useState, useCallback, useEffect, useRef } from "react";

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

@@ -8,7 +8,7 @@ import {
 } from "./chunk-24NQEB73.mjs";
 import {
   tv
-} from "./chunk-IE2BRM7Z.mjs";
+} from "./chunk-2ZT6V4QR.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/{chunk-XTGRSVYO.mjs → chunk-J5WJD6XZ.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   tv
-} from "./chunk-IE2BRM7Z.mjs";
+} from "./chunk-2ZT6V4QR.mjs";
 import {
   clsx
 } from "./chunk-27Y6K5NK.mjs";

package/dist/chunk-M2IRRTFM.mjs

@@ -0,0 +1,79 @@
+"use client";
+import {
+  checkbox_default
+} from "./chunk-J5WJD6XZ.mjs";
+import {
+  clsx
+} from "./chunk-27Y6K5NK.mjs";
+
+// src/components/table/table-body.tsx
+import { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+var TableBody = ({
+  slots,
+  columns,
+  rows,
+  size,
+  selectableRows,
+  checkedRows,
+  onCheckRow,
+  emptyContent,
+  classNames
+}) => {
+  const generateColumnStyles = useCallback((column) => {
+    const alignClass = column.align ? `text-${column.align}` : "text-left";
+    return clsx(alignClass, column.className);
+  }, []);
+  const getCellProps = useCallback(
+    (column, row) => {
+      if (!column || !row) {
+        return {
+          className: slots.td({ class: classNames == null ? void 0 : classNames.td })
+        };
+      }
+      const value = row[column.field];
+      const formattedValue = column.valueFormatter ? column.valueFormatter({ id: column.field, field: column.field, value }) : value;
+      const children = column.renderCell ? column.renderCell({
+        id: column.field,
+        field: column.field,
+        value,
+        formattedValue,
+        row
+      }) : formattedValue;
+      const columnStyles = generateColumnStyles(column);
+      return {
+        children,
+        className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), columnStyles),
+        style: {
+          width: column.width ? `${column.width}px` : void 0,
+          minWidth: column.minWidth ? `${column.minWidth}px` : void 0,
+          maxWidth: column.maxWidth ? `${column.maxWidth}px` : void 0,
+          height: column.height ? `${column.height}px` : void 0
+        }
+      };
+    },
+    [classNames == null ? void 0 : classNames.td, generateColumnStyles, slots]
+  );
+  const hasRows = rows.length > 0;
+  const colSpan = (columns.length || 1) + (selectableRows ? 1 : 0);
+  return /* @__PURE__ */ jsx("tbody", { className: slots.tbody({ class: classNames == null ? void 0 : classNames.tbody }), children: hasRows ? rows.map((row, rowIndex) => {
+    const isRowChecked = checkedRows.has(rowIndex);
+    return /* @__PURE__ */ jsxs("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), "aria-checked": isRowChecked, children: [
+      columns.map((column) => /* @__PURE__ */ createElement("td", { ...getCellProps(column, row), key: column.field })),
+      selectableRows && /* @__PURE__ */ jsx("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
+        checkbox_default,
+        {
+          size,
+          checked: isRowChecked,
+          onChange: (e) => onCheckRow(rowIndex, e.target.checked)
+        }
+      ) }) })
+    ] }, rowIndex);
+  }) : /* @__PURE__ */ jsx("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ jsx("td", { colSpan, className: slots.td({ class: classNames == null ? void 0 : classNames.td }), children: emptyContent || /* @__PURE__ */ jsx("div", { className: "text-neutral-dark py-4 text-center", children: "No data available" }) }) }) });
+};
+var table_body_default = TableBody;
+
+export {
+  table_body_default
+};

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

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

package/dist/{chunk-WQBOPCH6.mjs → chunk-ON5SGXHZ.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   tv
-} from "./chunk-IE2BRM7Z.mjs";
+} from "./chunk-2ZT6V4QR.mjs";
 
 // src/components/backdrop/backdrop.tsx
 import { useEffect, useState } from "react";

package/dist/chunk-OQS4LGZK.mjs

@@ -0,0 +1,27 @@
+"use client";
+import {
+  checkbox_default
+} from "./chunk-J5WJD6XZ.mjs";
+import {
+  clsx
+} from "./chunk-27Y6K5NK.mjs";
+
+// src/components/table/table-head.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var TableHead = ({ columns, slots, size, selectableRows, isCheckedAll, classNames, onCheckAll }) => {
+  const handleClickCheckAll = (e) => {
+    e.preventDefault();
+    onCheckAll(!isCheckedAll);
+  };
+  const renderColumnHeaders = () => columns.map((column, index) => /* @__PURE__ */ jsx("th", { className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column), children: column.headerName }, `${column.field}${index}thead`));
+  const renderSelectAllCheckbox = () => selectableRows && /* @__PURE__ */ jsx("th", { className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th })), onClick: handleClickCheckAll, children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(checkbox_default, { size, checked: isCheckedAll }) }) });
+  return /* @__PURE__ */ jsx("thead", { className: clsx(slots.thead({ class: classNames == null ? void 0 : classNames.thead })), children: /* @__PURE__ */ jsxs("tr", { className: clsx(slots.tr({ class: classNames == null ? void 0 : classNames.tr })), children: [
+    renderColumnHeaders(),
+    renderSelectAllCheckbox()
+  ] }) });
+};
+var table_head_default = TableHead;
+
+export {
+  table_head_default
+};

package/dist/{chunk-KCYJYS66.mjs → chunk-RCU5MLBU.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-24NQEB73.mjs";
 import {
   tv
-} from "./chunk-IE2BRM7Z.mjs";
+} from "./chunk-2ZT6V4QR.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";