@deepnoid/ui 0.1.223 → 1.0.0

package/dist/chunk-RFHWRBAB.mjs

@@ -0,0 +1,105 @@
+"use client";
+import {
+  ripple_default
+} from "./chunk-LXHUO6VM.mjs";
+import {
+  useRipple
+} from "./chunk-SZL743JC.mjs";
+import {
+  Icon_default
+} from "./chunk-A6UUVHC6.mjs";
+import {
+  buttonBaseStyle
+} from "./chunk-Z4NO7SMY.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-DPWUIAVC.mjs";
+
+// src/components/button/icon-button.tsx
+import { forwardRef, useMemo, useCallback } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var IconButton = forwardRef((props, ref) => {
+  const [localProps, variantProps] = mapPropsVariants(props, iconButtonStyle.variantKeys);
+  const { classNames, name, disableRipple, disabled, isLoading, size, isInGroup, onMouseDown, ...buttonProps } = {
+    ...localProps,
+    ...variantProps
+  };
+  const slots = useMemo(() => iconButtonStyle({ ...variantProps }), [variantProps]);
+  const { onPress, onClear, ripples } = useRipple();
+  const handleRipple = useCallback(
+    (e) => {
+      if (!disableRipple && !disabled) {
+        onPress(e);
+      }
+    },
+    [disableRipple, disabled, onPress]
+  );
+  const handleMouseDown = useCallback(
+    (e) => {
+      onMouseDown == null ? void 0 : onMouseDown(e);
+      handleRipple(e);
+    },
+    [onMouseDown, handleRipple]
+  );
+  const rippleProps = useMemo(() => ({ ripples, onClear }), [ripples, onClear]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...buttonProps,
+      onMouseDown: handleMouseDown,
+      ref,
+      disabled: disabled || isLoading,
+      "data-loading": isLoading,
+      className: slots.base({ class: classNames == null ? void 0 : classNames.base }),
+      children: isLoading ? /* @__PURE__ */ jsx(Icon_default, { name: "loading", size, className: "animate-spin" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Icon_default, { name, size }),
+        !disableRipple && /* @__PURE__ */ jsx(ripple_default, { ...rippleProps })
+      ] })
+    }
+  );
+});
+IconButton.displayName = "IconButton";
+var icon_button_default = IconButton;
+var iconButtonStyle = tv({
+  extend: buttonBaseStyle,
+  variants: {
+    size: {
+      sm: {
+        base: ["w-[24px]", "h-[24px]", "rounded-sm"]
+      },
+      md: {
+        base: ["w-[32px]", "h-[32px]", "rounded-md"]
+      },
+      lg: {
+        base: ["w-[40px]", "h-[40px]", "rounded-lg"]
+      },
+      xl: {
+        base: ["w-[50px]", "h-[50px]", "rounded-xl"]
+      }
+    },
+    full: {
+      true: {
+        base: ["w-full", "h-full"]
+      }
+    },
+    isLoading: {
+      true: {}
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "solid",
+    color: "primary",
+    full: false,
+    disabled: false,
+    isLoading: false,
+    isInGroup: false
+  }
+});
+
+export {
+  icon_button_default
+};

package/dist/{chunk-EJ4GDC6K.mjs → chunk-S2T4GHJA.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/input/input.tsx
 import {
@@ -158,10 +158,10 @@ var inputStyle = tv(
         "placeholder:text-neutral-main",
         "outline-none",
         "focus:ring-0",
-        "group-has-[:hover:not(:read-only):not(:focus)]/input:text-neutral-dark",
-        "group-has-[:hover:not(:read-only):not(:focus)]/input:placeholder:text-neutral-dark",
-        "group-has-[:focus:not(:read-only)]/input:text-neutral-dark",
-        "group-has-[:focus:not(:read-only)]/input:placeholder:text-neutral-dark",
+        "group-hover/input:text-neutral-dark",
+        "group-hover/input:placeholder:text-neutral-dark",
+        "focus:text-neutral-dark",
+        "focus:placeholder:text-neutral-dark",
         "read-only:!text-body-foreground",
         "read-only:placeholder:!text-body-foreground"
       ],
@@ -170,10 +170,10 @@ var inputStyle = tv(
         "items-center",
         "select-none",
         "text-neutral-main",
-        "group-has-[:hover:not(:read-only):not(:focus)]/input:text-neutral-dark",
-        "read-only:!text-body-foreground"
+        "transition-colors",
+        "group-hover/input:text-neutral-dark"
       ],
-      helperMessage: ["text-neutral-main", "group-has-[:hover:not(:read-only):not(:focus)]/input:text-neutral-dark"],
+      helperMessage: ["text-neutral-main", "group-hover/input:text-neutral-dark"],
       errorMessage: ["text-danger-main"],
       readonlyWrapper: [
         "pointer-events-none",
@@ -212,46 +212,46 @@ var inputStyle = tv(
       },
       color: {
         primary: {
-          content: ["group-has-[:focus:not(:read-only)]/input:text-primary-main", "read-only:!text-primary-main"],
-          helperMessage: ["group-has-[:focus:not(:read-only)]/input:text-primary-main"],
-          readonly: ["text-primary-main"]
+          content: ["group-focus-within/input:!text-primary-main"],
+          helperMessage: ["group-focus-within/input:!text-primary-main"],
+          readonly: ["!text-primary-main"]
         },
         secondary: {
-          content: ["group-has-[:focus:not(:read-only)]/input:text-secondary-main", "read-only:!text-secondary-main"],
-          helperMessage: ["group-has-[:focus:not(:read-only)]/input:text-secondary-main"],
-          readonly: ["text-secondary-main"]
+          content: ["group-focus-within/input:!text-secondary-main"],
+          helperMessage: ["group-focus-within/input:!text-secondary-main"],
+          readonly: ["!text-secondary-main"]
         }
       },
       size: {
         sm: {
-          base: ["text-sm", "gap-[4px]"],
+          base: ["text-sm", "gap-sm"],
           label: ["text-sm"],
-          innerWrapper: ["gap-[4px]"],
-          inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[4px]", "gap-[4px]"],
+          innerWrapper: ["gap-sm"],
+          inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-xs", "gap-sm"],
           helperMessage: ["text-sm"],
           errorMessage: ["text-sm"]
         },
         md: {
-          base: ["text-md", "gap-[6px]"],
+          base: ["text-md", "gap-md"],
           label: ["text-md"],
-          innerWrapper: ["gap-[6px]"],
-          inputWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-[6px]", "gap-[6px]"],
+          innerWrapper: ["gap-md"],
+          inputWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-sm", "gap-md"],
           helperMessage: ["text-sm"],
           errorMessage: ["text-sm"]
         },
         lg: {
-          base: ["text-lg", "gap-[8px]"],
+          base: ["text-lg", "gap-lg"],
           label: ["text-lg"],
-          innerWrapper: ["gap-[8px]"],
-          inputWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-[8px]", "gap-[8px]"],
+          innerWrapper: ["gap-lg"],
+          inputWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-md", "gap-lg"],
           helperMessage: ["text-md"],
           errorMessage: ["text-md"]
         },
         xl: {
-          base: ["text-xl", "gap-[10px]"],
+          base: ["text-xl", "gap-xl"],
           label: ["text-xl"],
-          innerWrapper: ["gap-[10px]"],
-          inputWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-[10px]", "gap-[10px]"],
+          innerWrapper: ["gap-xl"],
+          inputWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-lg", "gap-xl"],
           helperMessage: ["text-md"],
           errorMessage: ["text-md"]
         }

package/dist/{chunk-5VTYO3RF.mjs → chunk-TBI5O3OL.mjs}

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

package/dist/{chunk-FZYZSMSS.mjs → chunk-TBRF36RK.mjs}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-3IBJXQTJ.mjs";
 import {
   text_button_default
-} from "./chunk-NDNIAALB.mjs";
+} from "./chunk-YBDQSEPV.mjs";
 
 // src/components/picker/timePicker/Panel.tsx
 import { forwardRef, useEffect, useState } from "react";

package/dist/{chunk-Q3KBMVJS.mjs → chunk-TEERNFIT.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   pagination_default
-} from "./chunk-TE5JU3WA.mjs";
+} from "./chunk-EAWNUQDB.mjs";
 import {
   checkbox_default
-} from "./chunk-3DCUMRYP.mjs";
+} from "./chunk-NPQBJO6G.mjs";
 import {
   scrollArea_default
 } from "./chunk-EWS3FESG.mjs";
@@ -16,7 +16,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 
 // src/components/table/table-head.tsx
-import { useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState3 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState3 } from "react";
 
 // src/components/table/table.tsx
 import {
@@ -24,7 +24,8 @@ import {
   useEffect,
   useImperativeHandle,
   useMemo,
-  useState as useState2
+  useState as useState2,
+  useRef as useRef2
 } from "react";
 import { tv } from "tailwind-variants";
 
@@ -66,7 +67,16 @@ function TableCell({
         textOverflow: isTextContent ? "ellipsis" : void 0
       },
       title: showTitle && isTextContent ? String(content != null ? content : "") : void 0,
-      children: content
+      children: isTextContent ? content : /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx(
+            "flex w-full items-center",
+            column.align === "right" ? "justify-end" : column.align === "left" ? "justify-start" : "justify-center"
+          ),
+          children: content
+        }
+      )
     },
     `${row.id}-${column.field}-${colIdx}-${rowIndex}`
   );
@@ -91,7 +101,7 @@ var TableBody = ({
     {
       className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"),
       style: { width: "40px", minWidth: "40px", textAlign: "center" },
-      children: /* @__PURE__ */ jsx("div", { "data-checkbox": true, children: /* @__PURE__ */ jsx(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) }) })
+      children: /* @__PURE__ */ jsx("div", { "data-checkbox": true, className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) }) })
     },
     `checkbox-${rowId}-${rowIndex}`
   );
@@ -172,17 +182,26 @@ var Table = forwardRef((originalProps, ref) => {
     const checkboxWidth = rowCheckbox ? 40 : 0;
     return columnsWidth + checkboxWidth;
   }, [columns, rowCheckbox]);
+  const prevCheckedRef = useRef2("");
   useEffect(() => {
-    onCheckedRowsChange == null ? void 0 : onCheckedRowsChange(getCheckedRowData(checkedRowIds));
+    const currentCheckedStr = Array.from(checkedRowIds).sort().join(",");
+    if (prevCheckedRef.current !== currentCheckedStr) {
+      prevCheckedRef.current = currentCheckedStr;
+      onCheckedRowsChange == null ? void 0 : onCheckedRowsChange(getCheckedRowData(checkedRowIds));
+    }
   }, [checkedRowIds]);
   useEffect(() => {
     const currentRowIds = new Set(rows.map((row) => row.id));
     const ids = Array.from(checkedRowIds);
     const hasValidCheckedRows = ids.every((id) => currentRowIds.has(id));
     if (!hasValidCheckedRows) {
-      setCheckedRowIds(new Set(checkedRows == null ? void 0 : checkedRows.map((row) => row.id)));
+      const newCheckedSet = new Set(checkedRows == null ? void 0 : checkedRows.map((row) => row.id));
+      const newCheckedStr = Array.from(newCheckedSet).sort().join(",");
+      if (prevCheckedRef.current !== newCheckedStr) {
+        setCheckedRowIds(newCheckedSet);
+      }
     }
-  }, [rows.map((row) => row.id).join(",")]);
+  }, [rows]);
   useImperativeHandle(
     ref,
     () => ({
@@ -276,7 +295,7 @@ var Table = forwardRef((originalProps, ref) => {
         color,
         size: "sm",
         currentPage: page,
-        totalPage: Math.ceil(totalData / perPage),
+        totalPage: Math.ceil(totalData / (perPage || 1)),
         groupSize: paginationGroupSize,
         showFirstLastButtons,
         showPageLabel,
@@ -290,11 +309,11 @@ Table.displayName = "Table";
 var table_default = Table;
 var tableStyle = tv({
   slots: {
-    base: ["flex", "flex-col", "relative", "select-none", "gap-[20px]", "h-full", "min-h-0"],
+    base: ["flex", "flex-col", "relative", "select-none", "gap-20", "h-full", "min-h-0"],
     scroll: [],
     table: ["w-full", "h-auto"],
-    thead: ["w-full"],
-    tbody: ["w-full"],
+    thead: ["w-full", "px-lg"],
+    tbody: ["w-full", "[&>tr:hover]:bg-common-hover"],
     tr: ["group/tr", "outline-none", "w-full", "h-full"],
     th: [
       "text-body-foreground",
@@ -302,9 +321,9 @@ var tableStyle = tv({
       "whitespace-nowrap",
       "outline-none",
       "align-middle",
-      "px-[10px]",
+      "px-[5px]",
       "[&>div]:flex",
-      "[&>div]:gap-[10px]"
+      "[&>div]:gap-10"
     ],
     td: [
       "relative",
@@ -314,8 +333,8 @@ var tableStyle = tv({
       "outline-none",
       "[&>*]:z-1",
       "[&>*]:relative",
-      "px-[10px]",
-      "gap-[10px]",
+      "px-[5px]",
+      "gap-10",
       "transition duration-200",
       "align-middle"
     ],
@@ -333,17 +352,10 @@ var tableStyle = tv({
   },
   variants: {
     variant: {
-      solid: {
-        tbody: ["[&>tr]:border-b"]
-      },
-      outline: {
-        tbody: ["[&>td]:border"],
-        th: ["border"],
-        td: ["border"]
-      },
+      solid: {},
+      outline: {},
       underline: {
-        tbody: ["[&>tr]:border-b"],
-        th: ["border-t-[2px]", "border-b"]
+        th: ["bg-body-background", "border-t-[2px]", "border-b-[1px]"]
       }
     },
     size: {
@@ -382,26 +394,32 @@ var tableStyle = tv({
     }
   },
   compoundVariants: [
+    { variant: "solid", size: "sm", class: { tbody: ["[&>tr]:border-b-sm"] } },
+    { variant: "solid", size: "md", class: { tbody: ["[&>tr]:border-b-md"] } },
+    { variant: "solid", size: "lg", class: { tbody: ["[&>tr]:border-b-lg"] } },
+    { variant: "solid", size: "xl", class: { tbody: ["[&>tr]:border-b-xl"] } },
+    { variant: "outline", size: "sm", class: { th: ["border-sm"], td: ["border-sm"] } },
+    { variant: "outline", size: "md", class: { th: ["border-md"], td: ["border-md"] } },
+    { variant: "outline", size: "lg", class: { th: ["border-lg"], td: ["border-lg"] } },
+    { variant: "outline", size: "xl", class: { th: ["border-xl"], td: ["border-xl"] } },
+    { variant: "underline", size: "sm", class: { tbody: ["[&>tr]:border-b-sm"], th: ["border-b-sm"] } },
+    { variant: "underline", size: "md", class: { tbody: ["[&>tr]:border-b-md"], th: ["border-b-md"] } },
+    { variant: "underline", size: "lg", class: { tbody: ["[&>tr]:border-b-lg"], th: ["border-b-lg"] } },
+    { variant: "underline", size: "xl", class: { tbody: ["[&>tr]:border-b-xl"], th: ["border-b-xl"] } },
     {
       variant: "solid",
       color: "primary",
-      class: {
-        th: ["bg-primary-soft"]
-      }
+      class: { th: ["bg-primary-soft"] }
     },
     {
       variant: "solid",
       color: "secondary",
-      class: {
-        th: ["bg-secondary-soft"]
-      }
+      class: { th: ["bg-secondary-soft"] }
     },
     {
       variant: "solid",
       color: "neutral",
-      class: {
-        th: ["bg-neutral-soft"]
-      }
+      class: { th: ["bg-neutral-soft"] }
     },
     {
       variant: "outline",
@@ -431,21 +449,21 @@ var tableStyle = tv({
       variant: "underline",
       color: "primary",
       class: {
-        th: ["bg-body-background", "border-t-[2px]", "border-b", "border-primary-main"]
+        th: ["border-primary-light"]
       }
     },
     {
       variant: "underline",
       color: "secondary",
       class: {
-        th: ["bg-body-background", "border-t-[2px]", "border-b", "border-secondary-main"]
+        th: ["border-secondary-light"]
       }
     },
     {
       variant: "underline",
       color: "neutral",
       class: {
-        th: ["bg-body-background", "border-t-[2px]", "border-b", "border-neutral-main"]
+        th: ["border-neutral-light"]
       }
     },
     {
@@ -537,7 +555,7 @@ function TableHeaderCell({
   slots,
   classNames
 }) {
-  const thRef = useRef2(null);
+  const thRef = useRef3(null);
   const [showTitle, setShowTitle] = useState3(false);
   useLayoutEffect2(() => {
     if (!isCheckbox && thRef.current) {
@@ -545,12 +563,17 @@ function TableHeaderCell({
       setShowTitle(el.scrollWidth > el.clientWidth);
     }
   }, [content, isCheckbox]);
-  const titleText = !isCheckbox && showTitle ? typeof content === "string" || typeof content === "number" ? String(content) : "" : void 0;
+  const isTextContent = ["string", "number"].includes(typeof content) || content === null || content === void 0;
+  const titleText = !isCheckbox && showTitle && isTextContent ? String(content) : void 0;
   return /* @__PURE__ */ jsx3(
     "th",
     {
       ref: thRef,
-      className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column == null ? void 0 : column.className, !isCheckbox && "truncate"),
+      className: clsx(
+        slots.th({ class: classNames == null ? void 0 : classNames.th }),
+        column == null ? void 0 : column.className,
+        !isCheckbox && isTextContent && "truncate"
+      ),
       style: isCheckbox ? {
         width: "40px",
         minWidth: "40px",
@@ -559,11 +582,19 @@ function TableHeaderCell({
         flexGrow: 0,
         boxSizing: "border-box"
       } : column ? {
-        ...getCellStyle(column),
-        textAlign: "center"
+        ...getCellStyle(column)
       } : void 0,
       title: titleText,
-      children: content
+      children: isTextContent ? content : /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: clsx(
+            "flex w-full items-center",
+            isCheckbox ? "justify-center" : (column == null ? void 0 : column.align) === "right" ? "justify-end" : (column == null ? void 0 : column.align) === "left" ? "justify-start" : "justify-center"
+          ),
+          children: content
+        }
+      )
     }
   );
 }
@@ -590,7 +621,7 @@ var TableHead = ({
     rowCheckbox && /* @__PURE__ */ jsx3(
       TableHeaderCell,
       {
-        content: /* @__PURE__ */ jsx3("div", { "data-checkbox": true, children: /* @__PURE__ */ jsx3(
+        content: /* @__PURE__ */ jsx3("div", { "data-checkbox": true, className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx3(
           checkbox_default,
           {
             size,

package/dist/{chunk-RH3AHG52.mjs → chunk-V5XX3CGL.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   GlobalModalContext
-} from "./chunk-R2XKPG4K.mjs";
+} from "./chunk-OPSMMRA2.mjs";
 
 // src/components/modal/useGlobalModal.tsx
 import { useContext } from "react";

package/dist/{chunk-6WD32ERF.mjs → chunk-VO2ZIGIK.mjs}

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