@deepnoid/ui 1.0.21 → 1.0.23

package/dist/chunk-PPTFOHMW.mjs

@@ -0,0 +1,169 @@
+"use client";
+import {
+  clsx
+} from "./chunk-KJFYLLMP.mjs";
+import {
+  tv
+} from "./chunk-UP6RPQDX.mjs";
+
+// src/components/table/definition-table.tsx
+import { forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_CELL_CLASSES = "px-[10px] py-[8px] text-md border-r border-neutral-light h-[50px]";
+var FIRST_CELL_WIDTH_CLASS = "w-[120px] font-bold text-md text-body-foreground";
+var getMaxColCount = (rows) => {
+  let maxCols = 0;
+  rows.forEach((row) => {
+    let count = 0;
+    row.cells.forEach((cell) => {
+      count += cell.colSpan || 1;
+    });
+    maxCols = Math.max(maxCols, count);
+  });
+  return maxCols;
+};
+var renderColGroup = (rows) => {
+  const maxCols = getMaxColCount(rows);
+  const colWidths = [];
+  colWidths[0] = "120px";
+  rows.forEach((row) => {
+    let colIndex = 0;
+    row.cells.forEach((cell) => {
+      const span = cell.colSpan || 1;
+      if (colIndex > 0 && cell.width && cell.width !== "auto" && colIndex < maxCols) {
+        colWidths[colIndex] = cell.width;
+      }
+      colIndex += span;
+    });
+  });
+  const cols = [];
+  for (let i = 0; i < maxCols; i++) {
+    cols.push(/* @__PURE__ */ jsx("col", { style: { width: colWidths[i] || "auto" } }, i));
+  }
+  return /* @__PURE__ */ jsx("colgroup", { children: cols });
+};
+var getHighlightColumnIndex = (rows, key) => {
+  if (!key) return null;
+  for (const row of rows) {
+    let colIndex = 0;
+    for (const cell of row.cells) {
+      const span = cell.colSpan || 1;
+      if (cell.key === key) return colIndex;
+      colIndex += span;
+    }
+  }
+  return null;
+};
+function DefinitionTableRow({
+  cells,
+  className,
+  rowIndex = 0,
+  rowCount = 0,
+  highlightColumnIndex
+}) {
+  return /* @__PURE__ */ jsx("tr", { className: clsx("border-neutral-light border-b", className), children: cells.map((cell, colIndex) => {
+    const isFirstCell = colIndex === 0;
+    const isHighlighted = colIndex === highlightColumnIndex;
+    const isFirstRow = rowIndex === 0;
+    const isLastRow = rowIndex === rowCount - 1;
+    const borderHighlightClass = isHighlighted ? clsx(
+      "border-l-[2px] border-r-[2px] border-primary-main bg-neutral-soft",
+      isFirstRow && "border-t-[2px]",
+      isLastRow && "border-b-[2px]"
+    ) : "";
+    const combinedClassName = clsx(
+      DEFAULT_CELL_CLASSES,
+      isFirstCell && FIRST_CELL_WIDTH_CLASS,
+      cell.className,
+      borderHighlightClass
+    );
+    let cellStyle;
+    if (isFirstCell) {
+      cellStyle = {
+        width: "120px",
+        minWidth: "120px",
+        maxWidth: "120px"
+      };
+    } else if (cell.width && cell.width !== "auto") {
+      cellStyle = {
+        width: cell.width,
+        minWidth: cell.width,
+        maxWidth: cell.width
+      };
+    } else {
+      cellStyle = { width: "100%" };
+    }
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        className: combinedClassName,
+        colSpan: cell.colSpan,
+        rowSpan: cell.rowSpan,
+        style: { ...cellStyle, height: "50px" },
+        children: cell.content
+      },
+      colIndex
+    );
+  }) });
+}
+var DefinitionTable = forwardRef(
+  ({ rows = [], header, footer, highlightColumnKey, classNames }, ref) => {
+    const slots = useMemo(() => DefinitionTableStyle(), []);
+    const highlightColumnIndex = useMemo(
+      () => getHighlightColumnIndex(rows, highlightColumnKey),
+      [rows, highlightColumnKey]
+    );
+    const maxColCount = useMemo(() => getMaxColCount(rows), [rows]);
+    return /* @__PURE__ */ jsxs("div", { className: clsx(slots.base(), classNames == null ? void 0 : classNames.base), ref, children: [
+      /* @__PURE__ */ jsxs("table", { className: clsx(slots.table(), classNames == null ? void 0 : classNames.table), children: [
+        renderColGroup(rows),
+        header != null && /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+          "th",
+          {
+            className: clsx(slots.header(), classNames == null ? void 0 : classNames.header),
+            colSpan: maxColCount,
+            children: header
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsx(
+          DefinitionTableRow,
+          {
+            ...row,
+            className: row.className,
+            highlightColumnIndex,
+            rowCount: rows.length,
+            rowIndex: i
+          },
+          i
+        )) })
+      ] }),
+      footer ? /* @__PURE__ */ jsx("div", { children: footer }) : null
+    ] });
+  }
+);
+DefinitionTable.displayName = "DefinitionTable";
+var definition_table_default = DefinitionTable;
+var DefinitionTableStyle = tv({
+  slots: {
+    base: ["flex", "flex-col", "gap-[30px]"],
+    table: ["w-full", "table-auto", "border", "border-neutral-light"],
+    header: [
+      "text-body-foreground",
+      "font-bold",
+      "text-center",
+      "align-middle",
+      "whitespace-nowrap",
+      "bg-neutral-soft",
+      "px-[10px]",
+      "py-[8px]",
+      "text-md",
+      "border-b",
+      "border-neutral-light",
+      "h-[50px]"
+    ]
+  }
+});
+
+export {
+  definition_table_default
+};

package/dist/chunk-Q3SNUBIS.mjs

@@ -0,0 +1,114 @@
+"use client";
+import {
+  ripple_default
+} from "./chunk-EAFNOTY3.mjs";
+import {
+  useRipple
+} from "./chunk-SZL743JC.mjs";
+import {
+  Icon_default
+} from "./chunk-C7OETP3D.mjs";
+import {
+  buttonBaseStyle
+} from "./chunk-2WAQRWST.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-UWT2WB6H.mjs";
+import {
+  tv
+} from "./chunk-UP6RPQDX.mjs";
+
+// src/components/button/image-button.tsx
+import { forwardRef, useMemo, useCallback } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ImageButton = forwardRef((props, ref) => {
+  const [localProps, variantProps] = mapPropsVariants(props, imageButtonStyle.variantKeys);
+  const { classNames, src, alt, disableRipple, disabled, isLoading, size, isInGroup, onMouseDown, ...buttonProps } = {
+    ...localProps,
+    ...variantProps
+  };
+  const slots = useMemo(() => imageButtonStyle({ ...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,
+      className: slots.base({ class: classNames == null ? void 0 : classNames.base }),
+      "data-loading": isLoading,
+      disabled: disabled || isLoading,
+      onMouseDown: handleMouseDown,
+      ref,
+      style: { padding: 0, ...buttonProps.style },
+      children: isLoading ? /* @__PURE__ */ jsx(Icon_default, { className: "animate-spin", name: "loading", size }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("img", { src, alt, className: slots.image({ class: classNames == null ? void 0 : classNames.image }) }),
+        !disableRipple && /* @__PURE__ */ jsx(ripple_default, { ...rippleProps })
+      ] })
+    }
+  );
+});
+ImageButton.displayName = "ImageButton";
+var image_button_default = ImageButton;
+var imageButtonStyle = tv({
+  extend: buttonBaseStyle,
+  slots: {
+    base: [],
+    image: ["object-cover", "object-center"]
+  },
+  variants: {
+    size: {
+      sm: {
+        base: ["w-[24px]", "h-[24px]", "rounded-sm"],
+        image: ["w-[12px]", "h-[12px]"]
+      },
+      md: {
+        base: ["w-[32px]", "h-[32px]", "rounded-md"],
+        image: ["w-[14px]", "h-[14px]"]
+      },
+      lg: {
+        base: ["w-[40px]", "h-[40px]", "rounded-lg"],
+        image: ["w-[16px]", "h-[16px]"]
+      },
+      xl: {
+        base: ["w-[50px]", "h-[50px]", "rounded-xl"],
+        image: ["w-[18px]", "h-[18px]"]
+      }
+    },
+    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 {
+  image_button_default
+};

package/dist/{chunk-AO6LNH3D.mjs → chunk-QDAHI6GC.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   clsx
-} from "./chunk-27Y6K5NK.mjs";
+} from "./chunk-KJFYLLMP.mjs";
 import {
   mapPropsVariants
-} from "./chunk-E3G5QXSH.mjs";
+} from "./chunk-UWT2WB6H.mjs";
 import {
   tv
 } from "./chunk-UP6RPQDX.mjs";
@@ -24,9 +24,9 @@ var Radio = forwardRef((originalProps, ref) => {
         labelPosition === "start" && slots.labelReverse({ class: classNames == null ? void 0 : classNames.labelReverse })
       ),
       children: [
-        /* @__PURE__ */ jsx("div", { className: "hidden", children: /* @__PURE__ */ jsx("input", { ...inputProps, type: "radio", ref }) }),
+        /* @__PURE__ */ jsx("div", { className: "hidden", children: /* @__PURE__ */ jsx("input", { ...inputProps, ref, type: "radio" }) }),
         /* @__PURE__ */ jsx("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: /* @__PURE__ */ jsx("span", { className: slots.innerDot({ class: classNames == null ? void 0 : classNames.innerDot }) }) }),
-        /* @__PURE__ */ jsx("div", { className: slots.labelWrapper({ class: classNames == null ? void 0 : classNames.labelWrapper }), children: children && /* @__PURE__ */ jsx("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children }) })
+        /* @__PURE__ */ jsx("div", { className: slots.labelWrapper({ class: classNames == null ? void 0 : classNames.labelWrapper }), children: children ? /* @__PURE__ */ jsx("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children }) : null })
       ]
     }
   );