@deepnoid/ui 0.0.112 → 0.1.1

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-7HHFRKJU.mjs → chunk-GLBASISV.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-ZOTHPHXA.mjs";
 import {
   toast_default
-} from "./chunk-PXUBPWKU.mjs";
+} from "./chunk-XIHAABHB.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-FDKT4IBP.mjs → chunk-HKXUNG3H.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-2ZT6V4QR.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
-import {
-  tv
-} from "./chunk-J725QONZ.mjs";
 
 // src/components/dateTimePicker/calendar.tsx
 import React, {

package/dist/chunk-J5WJD6XZ.mjs

@@ -0,0 +1,221 @@
+"use client";
+import {
+  tv
+} from "./chunk-2ZT6V4QR.mjs";
+import {
+  clsx
+} from "./chunk-27Y6K5NK.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+
+// src/components/checkbox/checkbox.tsx
+import { forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CheckBox = forwardRef((originalProps, ref) => {
+  var _a, _b;
+  const [props, variantProps] = mapPropsVariants(originalProps, checkboxStyle.variantKeys);
+  const { children, classNames, labelPosition = "end", ...inputProps } = props;
+  const slots = useMemo(() => checkboxStyle({ ...variantProps }), [variantProps]);
+  const isSelected = (_b = (_a = inputProps.checked) != null ? _a : inputProps.defaultChecked) != null ? _b : false;
+  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: "checkbox", ref }) }),
+        /* @__PURE__ */ jsx("span", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: /* @__PURE__ */ jsx(
+          CheckBoxIcon,
+          {
+            size: variantProps.size,
+            isSelected,
+            className: slots.icon({ class: classNames == null ? void 0 : classNames.icon })
+          }
+        ) }),
+        children && /* @__PURE__ */ jsx("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children })
+      ]
+    }
+  );
+});
+CheckBox.displayName = "CheckBox";
+var checkbox_default = CheckBox;
+var CheckBoxIcon = ({ size, isSelected, className }) => {
+  const strokeWidth = useMemo(() => {
+    switch (size) {
+      case "sm":
+        return 1;
+      case "md":
+        return 1.25;
+      case "lg":
+        return 1.5;
+      case "xl":
+        return 1.75;
+      default:
+        return 1.25;
+    }
+  }, [size]);
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 13 13", fill: "none", className, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M2.16667 6.90123L5.63334 10.1111L10.8333 2.88889",
+      stroke: "white",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      style: isSelected ? { transition: "stroke-dashoffset 250ms linear 0.2s" } : {}
+    }
+  ) });
+};
+var checkboxStyle = tv({
+  slots: {
+    base: ["group", "relative", "inline-flex", "items-center", "cursor-pointer"],
+    wrapper: [
+      "relative",
+      "inline-flex",
+      "items-center",
+      "justify-center",
+      "before:content-['']",
+      "before:bg-body-background",
+      "before:absolute",
+      "before:inset-0",
+      "before:border",
+      "before:border-neutral-light",
+      "before:box-border",
+      "before:z-10",
+      "after:content-['']",
+      "after:absolute",
+      "after:inset-0",
+      "after:scale-50",
+      "after:opacity-0",
+      "group-has-[:checked]:after:scale-100",
+      "group-has-[:checked]:after:opacity-100",
+      "before:transition duration-200"
+    ],
+    icon: ["z-10", "opacity-0", "group-has-[:checked]:opacity-100", "text-neutral-light"],
+    labelReverse: ["flex-row-reverse"],
+    label: ["relative", "text-body-foreground", "select-none"]
+  },
+  variants: {
+    color: {
+      primary: {
+        wrapper: [
+          "group-has-[:checked]:before:border-primary-main",
+          "group-has-[:checked]:before:bg-primary-main",
+          "group-hover:before:border-primary-light",
+          "group-hover:before:bg-primary-soft"
+        ]
+      },
+      secondary: {
+        wrapper: [
+          "group-has-[:checked]:before:border-secondary-main",
+          "group-has-[:checked]:before:bg-secondary-main",
+          "group-hover:before:border-secondary-light",
+          "group-hover:before:bg-secondary-soft"
+        ]
+      },
+      neutral: {
+        wrapper: [
+          "group-has-[:checked]:before:border-neutral-main",
+          "group-has-[:checked]:before:bg-neutral-main",
+          "group-hover:before:border-neutral-light",
+          "group-hover:before:bg-neutral-soft"
+        ]
+      }
+    },
+    size: {
+      sm: {
+        base: ["gap-[8px]"],
+        wrapper: [
+          "w-[12px]",
+          "h-[12px]",
+          "rounded-[2px]",
+          "before:border-sm",
+          "before:rounded-[2px]",
+          "after:rounded-[2px]"
+        ],
+        label: ["text-sm"],
+        icon: ["w-[10px]", "h-[10px]"]
+      },
+      md: {
+        base: ["gap-[8px]"],
+        wrapper: [
+          "w-[15px]",
+          "h-[15px]",
+          "rounded-[2px]",
+          "before:border-md",
+          "before:rounded-[2px]",
+          "after:rounded-[2px]"
+        ],
+        label: ["text-md"],
+        icon: ["w-[13px]", "h-[13px]"]
+      },
+      lg: {
+        base: ["gap-[10px]"],
+        wrapper: [
+          "w-[18px]",
+          "h-[18px]",
+          "rounded-[4px]",
+          "before:border-lg",
+          "before:rounded-[4px]",
+          "after:rounded-[4px]"
+        ],
+        label: ["text-lg"],
+        icon: ["w-[16px]", "h-[16px]"]
+      },
+      xl: {
+        base: ["gap-[10px]"],
+        wrapper: [
+          "w-[21px]",
+          "h-[21px]",
+          "rounded-[4px]",
+          "before:border-xl",
+          "before:rounded-[2px]",
+          "after:rounded-[2px]"
+        ],
+        label: ["text-xl"],
+        icon: ["w-[19px]", "h-[19px]"]
+      }
+    },
+    isInvalid: {
+      true: {
+        wrapper: [
+          "before:border-danger-main",
+          "group-has-[:checked]:before:bg-danger-main",
+          "group-has-[:checked]:before:border-danger-main",
+          "group-hover:before:border-danger-light",
+          "group-hover:before:bg-danger-soft"
+        ],
+        label: ["text-danger-main"]
+      }
+    },
+    isDisabled: {
+      true: {
+        base: ["opacity-disabled", "cursor-not-allowed", "pointer-events-auto", "text-neutral-light"],
+        wrapper: [
+          "cursor-not-allowed",
+          "after:bg-neutral-soft",
+          "before:border-neutral-light",
+          "before:bg-neutral-soft",
+          "group-has-[:checked]:before:bg-neutral-soft",
+          "group-has-[:checked]:before:border-neutral-light",
+          "group-hover:before:border-neutral-light",
+          "group-hover:before:bg-neutral-soft"
+        ],
+        label: ["text-neutral-light"],
+        icon: ["text-neutral-light", "opacity-0"]
+      }
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    isDisabled: false
+  }
+});
+
+export {
+  checkbox_default
+};

package/dist/chunk-LXHUO6VM.mjs

@@ -0,0 +1,46 @@
+"use client";
+
+// src/components/ripple/ripple.tsx
+import { AnimatePresence, m, LazyMotion, domAnimation, clamp } from "framer-motion";
+import { Fragment, jsx } from "react/jsx-runtime";
+var Ripple = (props) => {
+  const { ripples = [], motionProps, color = "currentColor", style, onClear } = props;
+  return /* @__PURE__ */ jsx(Fragment, { children: ripples.map((ripple) => {
+    const duration = clamp(ripple.size > 100 ? 0.75 : 0.5, 0.01 * ripple.size, 0.2);
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsx(
+      m.span,
+      {
+        animate: { transform: "scale(2)", opacity: 0 },
+        className: "deepnoidui-ripple",
+        exit: { opacity: 0 },
+        initial: { transform: "scale(0)", opacity: 0.35 },
+        style: {
+          position: "absolute",
+          backgroundColor: color,
+          borderRadius: "100%",
+          transformOrigin: "center",
+          pointerEvents: "none",
+          overflow: "hidden",
+          inset: 0,
+          zIndex: 0,
+          top: ripple.y,
+          left: ripple.x,
+          width: `${ripple.size}px`,
+          height: `${ripple.size}px`,
+          ...style
+        },
+        transition: { duration },
+        onAnimationComplete: () => {
+          onClear(ripple.key);
+        },
+        ...motionProps
+      }
+    ) }) }, ripple.key);
+  }) });
+};
+Ripple.displayName = "HeroUI.Ripple";
+var ripple_default = Ripple;
+
+export {
+  ripple_default
+};

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-NGQ3MK2J.mjs → chunk-N4F3R6HG.mjs}

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