@deepnoid/ui 0.1.78 → 0.1.80

package/dist/chunk-UWXCAR5C.mjs

@@ -0,0 +1,535 @@
+"use client";
+import {
+  scrollArea_default
+} from "./chunk-M37VBNB3.mjs";
+import {
+  skeleton_default
+} from "./chunk-6PN3DGOE.mjs";
+import {
+  pagination_default
+} from "./chunk-CC2F5HQX.mjs";
+import {
+  checkbox_default
+} from "./chunk-SKOCUCE5.mjs";
+import {
+  clsx
+} from "./chunk-27Y6K5NK.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+
+// src/components/table/table.tsx
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState
+} from "react";
+import { tv } from "tailwind-variants";
+
+// src/components/table/table-body.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TableBody = ({
+  slots,
+  rows,
+  columns,
+  size,
+  color,
+  rowCheckbox = false,
+  checkedRows,
+  onCheckRow,
+  isLoading = false,
+  emptyContent,
+  skeletonRow,
+  classNames,
+  className
+}) => {
+  const renderTdSkeleton = (key, column) => {
+    const isCheckbox = key.includes("checkbox");
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        className: slots.td({ class: classNames == null ? void 0 : classNames.td }),
+        style: isCheckbox ? {
+          width: "40px",
+          minWidth: "40px",
+          maxWidth: "40px",
+          flexShrink: 0,
+          flexGrow: 0,
+          boxSizing: "border-box"
+        } : column ? getCellStyle(column) : void 0,
+        children: /* @__PURE__ */ jsx(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" })
+      },
+      key
+    );
+  };
+  const renderCheckboxCell = (rowId) => /* @__PURE__ */ jsx(
+    "td",
+    {
+      className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"),
+      style: {
+        width: "40px",
+        minWidth: "40px",
+        maxWidth: "40px",
+        flexShrink: 0,
+        flexGrow: 0,
+        boxSizing: "border-box"
+      },
+      children: /* @__PURE__ */ jsx(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) })
+    }
+  );
+  const renderSkeletonRow = (rowIndex) => /* @__PURE__ */ jsxs("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
+    columns.map((column, colIdx) => renderTdSkeleton(`skeleton-${rowIndex}-${colIdx}`, column)),
+    rowCheckbox && renderTdSkeleton(`skeleton-checkbox-${rowIndex}`)
+  ] }, `skeleton-${rowIndex}`);
+  const renderEmptyRow = () => /* @__PURE__ */ jsx("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ jsx("td", { colSpan: columns.length + (rowCheckbox ? 1 : 0), className: slots.empty({ class: classNames == null ? void 0 : classNames.empty }), children: emptyContent }) });
+  const renderDataRow = (row, rowIndex) => /* @__PURE__ */ jsxs("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
+    columns.map((column, colIdx) => {
+      var _a;
+      const value = row[column.field];
+      const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
+      const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
+      return /* @__PURE__ */ jsx(
+        "td",
+        {
+          className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), column.className),
+          style: getCellStyle(column),
+          children: content
+        },
+        `${rowIndex}-${colIdx}`
+      );
+    }),
+    rowCheckbox && renderCheckboxCell(row.id)
+  ] }, rowIndex);
+  const renderRows = () => {
+    if (isLoading) return skeletonRow ? Array.from({ length: skeletonRow }, (_, idx) => renderSkeletonRow(idx)) : /* @__PURE__ */ jsx(Fragment, {});
+    if (!rows.length && emptyContent) return renderEmptyRow();
+    return rows.map((row, index) => renderDataRow(row, index));
+  };
+  return /* @__PURE__ */ jsx("tbody", { className: `${slots.tbody({ class: classNames == null ? void 0 : classNames.tbody })} ${className || ""}`, children: renderRows() });
+};
+var table_body_default = TableBody;
+
+// src/components/table/table.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Table = forwardRef((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, tableStyle.variantKeys);
+  const {
+    rows,
+    columns,
+    rowCheckbox = false,
+    totalData = 0,
+    pagination,
+    onPageChange,
+    emptyContent,
+    isLoading = false,
+    classNames,
+    color,
+    size,
+    skeletonRow,
+    onCheckedRowsChange
+  } = { ...props, ...variantProps };
+  const { page = 1, perPage = 15 } = pagination || {};
+  const showPagination = pagination && totalData > 0 && !isLoading;
+  const [checkedRows, setCheckedRows] = useState(/* @__PURE__ */ new Set());
+  const tableMinWidth = useMemo(() => {
+    const columnsWidth = columns.reduce((total, column) => {
+      if (column.width) return total + column.width;
+      if (column.minWidth) return total + column.minWidth;
+      return total + 100;
+    }, 0);
+    const checkboxWidth = rowCheckbox ? 40 : 0;
+    return columnsWidth + checkboxWidth;
+  }, [columns, rowCheckbox]);
+  useEffect(() => {
+    onCheckedRowsChange == null ? void 0 : onCheckedRowsChange(getCheckedRowData(checkedRows));
+  }, [checkedRows]);
+  useEffect(() => {
+    const currentRowIds = new Set(rows.map((row) => row.id));
+    const checkedRowIds = Array.from(checkedRows);
+    const hasValidCheckedRows = checkedRowIds.every((id) => currentRowIds.has(id));
+    if (!hasValidCheckedRows) {
+      setCheckedRows(/* @__PURE__ */ new Set());
+    }
+  }, [rows.map((row) => row.id).join(",")]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      checkedRows,
+      setCheckedRows
+    }),
+    [checkedRows]
+  );
+  const handleAllRowCheck = (checked) => {
+    const updated = checked ? new Set(rows.map((row) => row.id)) : /* @__PURE__ */ new Set();
+    setCheckedRows(updated);
+  };
+  const handleRowCheck = (id, checked) => {
+    setCheckedRows((prev) => {
+      const updated = new Set(prev);
+      checked ? updated.add(id) : updated.delete(id);
+      return updated;
+    });
+  };
+  const getCheckedRowData = (checked) => rows.filter((row) => checked.has(row.id));
+  const slots = useMemo(() => tableStyle(variantProps), [variantProps]);
+  return /* @__PURE__ */ jsxs2("div", { "data-table": "base", className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ jsx2(scrollArea_default, { direction: "x", size: size === "xl" ? "lg" : size, children: /* @__PURE__ */ jsxs2(
+      "table",
+      {
+        className: slots.table({ class: classNames == null ? void 0 : classNames.table }),
+        style: {
+          tableLayout: "fixed",
+          width: "100%",
+          minWidth: `${tableMinWidth}px`
+        },
+        children: [
+          /* @__PURE__ */ jsx2(
+            table_head_default,
+            {
+              columns,
+              size,
+              color,
+              rowCheckbox,
+              isCheckedAll: checkedRows.size === rows.length && rows.length > 0,
+              onCheckAll: handleAllRowCheck,
+              isLoading,
+              classNames,
+              slots
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            table_body_default,
+            {
+              slots,
+              rows,
+              columns,
+              size,
+              color,
+              rowCheckbox,
+              checkedRows,
+              onCheckRow: handleRowCheck,
+              emptyContent,
+              isLoading,
+              skeletonRow,
+              className: clsx(
+                "transition-all duration-150 ease-out",
+                isLoading ? "-translate-y-2 opacity-0" : "translate-y-0 opacity-100",
+                classNames
+              )
+            }
+          )
+        ]
+      }
+    ) }),
+    showPagination && /* @__PURE__ */ jsx2("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx2(
+      pagination_default,
+      {
+        color,
+        currentPage: page,
+        totalPage: Math.ceil(totalData / perPage),
+        groupSize: 10,
+        handleChangePage: (newPage) => onPageChange == null ? void 0 : onPageChange({ page: newPage, perPage })
+      }
+    ) })
+  ] });
+});
+Table.displayName = "Table";
+var table_default = Table;
+var tableStyle = tv({
+  slots: {
+    base: ["flex", "flex-col", "relative", "select-none", "gap-[20px]"],
+    table: ["w-full", "h-auto"],
+    thead: ["w-full"],
+    tbody: ["w-full"],
+    tr: ["group/tr", "outline-none", "w-full", "h-full"],
+    th: [
+      "text-body-foreground",
+      "font-bold",
+      "whitespace-nowrap",
+      "outline-none",
+      "align-middle",
+      "px-[10px]",
+      "[&>div]:flex",
+      "[&>div]:gap-[10px]"
+    ],
+    td: [
+      "relative",
+      "text-foreground",
+      "whitespace-normal",
+      "outline-none",
+      "[&>*]:z-1",
+      "[&>*]:relative",
+      "px-[10px]",
+      "gap-[10px]",
+      "transition duration-200",
+      "align-middle"
+    ],
+    empty: [
+      "relative",
+      "text-foreground",
+      "whitespace-normal",
+      "outline-none",
+      "[&>*]:z-1",
+      "[&>*]:relative",
+      "align-middle"
+    ]
+  },
+  variants: {
+    variant: {
+      solid: {
+        tbody: ["[&>tr]:border-b"]
+      },
+      outline: {
+        tbody: ["[&>td]:border"],
+        th: ["border"],
+        td: ["border"]
+      },
+      underline: {
+        tbody: ["[&>tr]:border-b"],
+        th: ["border-t-[2px]", "border-b"]
+      }
+    },
+    size: {
+      sm: {
+        tr: ["text-sm"]
+      },
+      md: {
+        tr: ["text-md"]
+      },
+      lg: {
+        tr: ["text-lg"]
+      },
+      xl: {
+        tr: ["text-xl"]
+      }
+    },
+    color: {
+      primary: {
+        tbody: ["[&>tr]:border-primary-light"]
+      },
+      secondary: {
+        tbody: ["[&>tr]:border-secondary-light"]
+      },
+      neutral: {
+        tbody: ["[&>tr]:border-neutral-light"]
+      }
+    },
+    height: {
+      narrow: {},
+      wide: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "solid",
+      color: "primary",
+      class: {
+        th: ["bg-primary-soft"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "secondary",
+      class: {
+        th: ["bg-secondary-soft"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "neutral",
+      class: {
+        th: ["bg-neutral-soft"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "primary",
+      class: {
+        th: ["bg-primary-soft", "border-primary-light"],
+        td: ["border-primary-light"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "secondary",
+      class: {
+        th: ["bg-secondary-soft", "border-secondary-light"],
+        td: ["border-secondary-light"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "neutral",
+      class: {
+        th: ["bg-neutral-soft", "border-neutral-light"],
+        td: ["border-neutral-light"]
+      }
+    },
+    {
+      variant: "underline",
+      color: "primary",
+      class: {
+        th: ["bg-body-background", "border-t-[2px]", "border-b", "border-primary-main"]
+      }
+    },
+    {
+      variant: "underline",
+      color: "secondary",
+      class: {
+        th: ["bg-body-background", "border-t-[2px]", "border-b", "border-secondary-main"]
+      }
+    },
+    {
+      variant: "underline",
+      color: "neutral",
+      class: {
+        th: ["bg-body-background", "border-t-[2px]", "border-b", "border-neutral-main"]
+      }
+    },
+    {
+      height: "narrow",
+      size: "sm",
+      class: {
+        tr: ["h-[30px]"]
+      }
+    },
+    {
+      height: "narrow",
+      size: "md",
+      class: {
+        tr: ["h-[40px]"]
+      }
+    },
+    {
+      height: "narrow",
+      size: "lg",
+      class: {
+        tr: ["h-[50px]"]
+      }
+    },
+    {
+      height: "narrow",
+      size: "xl",
+      class: {
+        tr: ["h-[60px]"]
+      }
+    },
+    {
+      height: "wide",
+      size: "sm",
+      class: {
+        tr: ["h-[40px]"]
+      }
+    },
+    {
+      height: "wide",
+      size: "md",
+      class: {
+        tr: ["h-[50px]"]
+      }
+    },
+    {
+      height: "wide",
+      size: "lg",
+      class: {
+        tr: ["h-[60px]"]
+      }
+    },
+    {
+      height: "wide",
+      size: "xl",
+      class: {
+        tr: ["h-[70px]"]
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: "solid",
+    size: "md",
+    color: "primary",
+    height: "narrow"
+  }
+});
+var getCellStyle = (column) => {
+  const hasFixedWidth = column.width;
+  const hasMinWidth = column.minWidth;
+  return {
+    width: hasFixedWidth ? `${column.width}px` : "auto",
+    minWidth: hasMinWidth ? `${column.minWidth}px` : hasFixedWidth ? `${column.width}px` : void 0,
+    maxWidth: column.maxWidth ? `${column.maxWidth}px` : void 0,
+    height: column.height ? `${column.height}px` : void 0,
+    textAlign: column.align || "center",
+    boxSizing: "border-box",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  };
+};
+
+// src/components/table/table-head.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var TableHead = ({
+  slots,
+  columns,
+  color,
+  size,
+  rowCheckbox = false,
+  isCheckedAll,
+  isLoading = false,
+  classNames,
+  onCheckAll
+}) => {
+  const handleClickCheckAll = (e) => {
+    e.preventDefault();
+    onCheckAll(!isCheckedAll);
+  };
+  const renderTh = (content, key, column, isCheckbox) => /* @__PURE__ */ jsx3(
+    "th",
+    {
+      className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column == null ? void 0 : column.className),
+      style: isCheckbox ? {
+        width: "40px",
+        minWidth: "40px",
+        maxWidth: "40px",
+        flexShrink: 0,
+        flexGrow: 0,
+        boxSizing: "border-box"
+      } : column ? getCellStyle(column) : void 0,
+      children: content
+    },
+    key
+  );
+  const renderSkeletonRow = () => /* @__PURE__ */ jsx3("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ jsxs3("tr", { className: clsx(slots.tr({ class: classNames == null ? void 0 : classNames.tr }), "[&>th]:border-0"), children: [
+    columns.map(
+      (column, idx) => renderTh(/* @__PURE__ */ jsx3(skeleton_default, { color, rounded: "lg", speed: "fast" }), `skeleton-${idx}`, column)
+    ),
+    rowCheckbox && renderTh(/* @__PURE__ */ jsx3(skeleton_default, { color, rounded: "lg", speed: "fast" }), "checkbox-skeleton", void 0, true)
+  ] }) });
+  const renderContentRow = () => /* @__PURE__ */ jsx3("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ jsxs3("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
+    columns.map((column, idx) => renderTh(column.headerName, `${column.field}-${idx}`, column)),
+    rowCheckbox && renderTh(
+      /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-center", onClick: handleClickCheckAll, children: /* @__PURE__ */ jsx3(
+        checkbox_default,
+        {
+          size,
+          checked: isCheckedAll,
+          onChange: (e) => onCheckAll(e.target.checked)
+        }
+      ) }),
+      "checkbox",
+      void 0,
+      true
+    )
+  ] }) });
+  return isLoading ? renderSkeletonRow() : renderContentRow();
+};
+var table_head_default = TableHead;
+
+export {
+  table_head_default,
+  table_body_default,
+  table_default,
+  getCellStyle
+};

package/dist/components/dateTimePicker/dateTimePicker.mjs

@@ -2,11 +2,11 @@
 import {
   dateTimePickerStyle,
   dateTimePicker_default
-} from "../../chunk-YF2N2OBY.mjs";
-import "../../chunk-WYHCK7XL.mjs";
+} from "../../chunk-L65ETSUY.mjs";
+import "../../chunk-ZYS4NSXT.mjs";
 import "../../chunk-7MVEAQ7Z.mjs";
-import "../../chunk-B6XJNGQL.mjs";
 import "../../chunk-QFIS6N5R.mjs";
+import "../../chunk-B6XJNGQL.mjs";
 import "../../chunk-FWJ2ZKH6.mjs";
 import "../../chunk-TUXYVNTY.mjs";
 import "../../chunk-P732YGHO.mjs";

package/dist/components/dateTimePicker/index.mjs

@@ -2,11 +2,11 @@
 import "../../chunk-75HLCORR.mjs";
 import {
   dateTimePicker_default
-} from "../../chunk-YF2N2OBY.mjs";
-import "../../chunk-WYHCK7XL.mjs";
+} from "../../chunk-L65ETSUY.mjs";
+import "../../chunk-ZYS4NSXT.mjs";
 import "../../chunk-7MVEAQ7Z.mjs";
-import "../../chunk-B6XJNGQL.mjs";
 import "../../chunk-QFIS6N5R.mjs";
+import "../../chunk-B6XJNGQL.mjs";
 import "../../chunk-FWJ2ZKH6.mjs";
 import "../../chunk-TUXYVNTY.mjs";
 import "../../chunk-P732YGHO.mjs";

package/dist/components/dateTimePicker/timePicker.mjs

@@ -1,10 +1,10 @@
 "use client";
 import {
   timePicker_default
-} from "../../chunk-WYHCK7XL.mjs";
+} from "../../chunk-ZYS4NSXT.mjs";
 import "../../chunk-7MVEAQ7Z.mjs";
-import "../../chunk-B6XJNGQL.mjs";
 import "../../chunk-QFIS6N5R.mjs";
+import "../../chunk-B6XJNGQL.mjs";
 import "../../chunk-FUPY7MXT.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-JP4TEWP7.mjs";

package/dist/components/list/index.mjs

@@ -1,11 +1,11 @@
 "use client";
 import "../../chunk-7MVEAQ7Z.mjs";
-import {
-  list_default
-} from "../../chunk-B6XJNGQL.mjs";
 import {
   listItem_default
 } from "../../chunk-QFIS6N5R.mjs";
+import {
+  list_default
+} from "../../chunk-B6XJNGQL.mjs";
 import "../../chunk-FUPY7MXT.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-JP4TEWP7.mjs";