@deepnoid/ui 0.0.112 → 0.1.1

package/dist/chunk-SPX2BHO2.mjs

@@ -0,0 +1,314 @@
+"use client";
+import {
+  table_body_default
+} from "./chunk-M2IRRTFM.mjs";
+import {
+  table_head_default
+} from "./chunk-OQS4LGZK.mjs";
+import {
+  pagination_default
+} from "./chunk-DUOYMLZL.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+
+// src/components/table/table.tsx
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Table = forwardRef((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, tableStyle.variantKeys);
+  const {
+    classNames,
+    rows,
+    columns,
+    size,
+    selectableRows,
+    totalData,
+    pagination,
+    onPageChange,
+    emptyContent,
+    className,
+    color
+  } = { ...props, ...variantProps };
+  const [checkedRows, setCheckedRows] = useState(/* @__PURE__ */ new Set());
+  const divRef = useRef(null);
+  const { page, perPage } = pagination || { page: 1, perPage: 10 };
+  const showPagination = pagination && typeof totalData === "number";
+  useImperativeHandle(ref, () => ({
+    checkedRows,
+    setCheckedRows
+  }));
+  useEffect(() => {
+    setCheckedRows(/* @__PURE__ */ new Set());
+  }, [rows]);
+  const handleCheckAll = (isChecked) => {
+    const newCheckedRows = isChecked ? new Set(rows.map((_, index) => index)) : /* @__PURE__ */ new Set();
+    setCheckedRows(newCheckedRows);
+  };
+  const handleCheck = (rowIndex, isChecked) => {
+    const newChecked = new Set(checkedRows);
+    isChecked ? newChecked.add(rowIndex) : newChecked.delete(rowIndex);
+    setCheckedRows(newChecked);
+  };
+  const slots = useMemo(() => tableStyle(variantProps), [variantProps]);
+  return /* @__PURE__ */ jsxs("div", { ref: divRef, "data-table": "base", className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ jsxs("table", { className: slots.table({ class: classNames == null ? void 0 : classNames.table }), children: [
+      /* @__PURE__ */ jsx(
+        table_head_default,
+        {
+          columns,
+          size,
+          selectableRows,
+          isCheckedAll: checkedRows.size === rows.length && rows.length > 0,
+          onCheckAll: handleCheckAll,
+          classNames,
+          slots
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        table_body_default,
+        {
+          slots,
+          rows,
+          columns,
+          size,
+          selectableRows,
+          checkedRows,
+          onCheckRow: handleCheck,
+          emptyContent,
+          classNames
+        }
+      )
+    ] }),
+    showPagination && /* @__PURE__ */ jsx("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ jsx(
+      pagination_default,
+      {
+        color,
+        currentPage: page,
+        totalPage: Math.ceil(totalData / perPage),
+        groupSize: 10,
+        handleChangePage: (currentPage) => onPageChange({ page: currentPage, perPage })
+      }
+    ) })
+  ] });
+});
+Table.displayName = "Table";
+var table_default = Table;
+var tableStyle = tv({
+  slots: {
+    base: ["flex", "flex-col", "relative", "select-none"],
+    table: ["w-full", "h-auto"],
+    thead: ["w-full"],
+    tbody: ["w-full"],
+    tr: ["group", "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"
+    ]
+  },
+  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"
+  }
+});
+
+export {
+  table_default
+};

package/dist/{chunk-TSMVRGDO.mjs → chunk-SSEQSF5F.mjs}

@@ -1,22 +1,22 @@
 "use client";
+import {
+  timePicker_default
+} from "./chunk-YCMZELLD.mjs";
 import {
   useDatePicker
 } from "./chunk-FWJ2ZKH6.mjs";
 import {
   calendar_default
-} from "./chunk-FDKT4IBP.mjs";
-import {
-  timePicker_default
-} from "./chunk-BCN5F2MN.mjs";
+} from "./chunk-HKXUNG3H.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/dateTimePicker.tsx
 import React, { forwardRef, useCallback, useMemo } from "react";
@@ -302,6 +302,12 @@ var dateTimePickerStyle = tv({
         innerWrapper: ["group-has-[p]/input:gap-[10px]"],
         inputWrapper: ["w-[240px]", "h-[36px]", "rounded-lg", "px-[10px]", "py-[8px]", "gap-[10px]"],
         errorMessage: ["text-lg"]
+      },
+      xl: {
+        base: ["text-xl", "gap-[10px]"],
+        innerWrapper: ["group-has-[p]/input:gap-[10px]"],
+        inputWrapper: ["w-[240px]", "h-[36px]", "rounded-xl", "px-[10px]", "py-[8px]", "gap-[10px]"],
+        errorMessage: ["text-xl"]
       }
     },
     radius: {

package/dist/chunk-U2YKMXVG.mjs

@@ -0,0 +1,145 @@
+"use client";
+import {
+  useTooltip
+} from "./chunk-ZMOAFSYE.mjs";
+import {
+  getTailClassName,
+  getTailStyles
+} from "./chunk-WSIADHVC.mjs";
+import {
+  tv
+} from "./chunk-2ZT6V4QR.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+
+// src/components/tooltip/tooltip.tsx
+import { forwardRef, useCallback, useMemo, useRef, useState, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Tooltip = forwardRef((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, tooltipStyle.variantKeys);
+  const { placement = "top", offset = 5, delay = 100, persistent = false, classNames } = props;
+  const slots = useMemo(() => tooltipStyle({ ...variantProps }), [variantProps]);
+  const [targetRect, setTargetRect] = useState(null);
+  const { tooltipPosition, tooltipRef } = useTooltip({
+    placement,
+    offset,
+    delay,
+    targetRect
+  });
+  const childrenRef = useRef(null);
+  const delayTimeoutRef = useRef(null);
+  const getProps = useCallback(
+    (slotKey, classNameKey) => ({
+      className: slots[slotKey]({ class: classNames == null ? void 0 : classNames[classNameKey] })
+    }),
+    [slots, classNames]
+  );
+  const getBaseProps = useCallback(() => getProps("base", "base"), [getProps]);
+  const getContentProps = useCallback(() => getProps("content", "content"), [getProps]);
+  const showTooltip = useCallback(() => {
+    if (childrenRef.current) {
+      const rect = childrenRef.current.getBoundingClientRect();
+      setTargetRect({
+        width: rect.width,
+        height: rect.height,
+        left: rect.left,
+        top: rect.top,
+        right: rect.right,
+        bottom: rect.bottom
+      });
+    }
+  }, []);
+  const hideTooltip = useCallback(() => {
+    if (!persistent) {
+      delayTimeoutRef.current = window.setTimeout(() => setTargetRect(null), delay);
+    }
+  }, [persistent, delay]);
+  useEffect(() => {
+    if (persistent) showTooltip();
+  }, [persistent, showTooltip]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: (node) => {
+          if (ref) {
+            if (typeof ref === "function") ref(node);
+            else ref.current = node;
+          }
+          childrenRef.current = node;
+        },
+        ...getBaseProps(),
+        onPointerEnter: !persistent ? showTooltip : void 0,
+        onPointerLeave: !persistent ? hideTooltip : void 0,
+        children: props.children
+      }
+    ),
+    targetRect && createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: tooltipRef,
+          ...getContentProps(),
+          onPointerEnter: !persistent ? () => delayTimeoutRef.current && clearTimeout(delayTimeoutRef.current) : void 0,
+          onPointerLeave: !persistent ? hideTooltip : void 0,
+          style: {
+            visibility: "visible",
+            transform: `translate3d(${tooltipPosition.x}px, ${tooltipPosition.y}px, 0)`
+          },
+          children: [
+            props.content,
+            variantProps.tail && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `absolute h-2 w-2 rotate-45 bg-inherit ${getTailClassName(placement)}`,
+                style: getTailStyles(placement)
+              }
+            )
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+});
+Tooltip.displayName = "Tooltip";
+var tooltip_default = Tooltip;
+var tooltipStyle = tv({
+  slots: {
+    base: ["z-0", "relative", "bg-transparent"],
+    content: [
+      "absolute",
+      "top-0",
+      "left-0",
+      "inline-flex",
+      "items-center",
+      "justify-center",
+      "font-[500]",
+      "text-common-white",
+      "bg-common-black"
+    ]
+  },
+  variants: {
+    size: {
+      sm: { content: ["text-sm", "rounded-[5px]", "px-[10px]", "py-[6px]"] },
+      md: { content: ["text-md", "rounded-[5px]", "px-[10px]", "py-[6px]"] },
+      lg: { content: ["text-lg", "rounded-[5px]", "px-[10px]", "py-[6px]"] },
+      xl: { content: ["text-xl", "rounded-[5px]", "px-[10px]", "py-[6px]"] }
+    },
+    tail: {
+      true: { content: [] },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    placement: "top",
+    tail: false
+  }
+});
+
+export {
+  tooltip_default
+};

package/dist/{chunk-JN7EGKJL.mjs → chunk-VRGHUYRU.mjs}

@@ -1,19 +1,19 @@
 "use client";
 import {
   option_default
-} from "./chunk-RZZWHI6O.mjs";
+} from "./chunk-YZNQ2QGK.mjs";
 import {
   useSelect
 } from "./chunk-S3QS5B7F.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/select/select.tsx
 import { forwardRef, useMemo, useCallback } from "react";
@@ -193,6 +193,12 @@ var select = tv({
         selectWrapper: "w-[240px] h-[36px] px-[10px] py-[8px] gap-[10px] rounded-lg",
         optionsWrapper: "max-h-[144px] rounded-lg",
         errorMessage: "text-lg"
+      },
+      xl: {
+        base: "text-lg gap-[10px]",
+        selectWrapper: "w-[240px] h-[36px] px-[10px] py-[8px] gap-[10px] rounded-xl",
+        optionsWrapper: "max-h-[144px] rounded-xl",
+        errorMessage: "text-xl"
       }
     },
     radius: {

package/dist/{chunk-EYY4CRRR.mjs → chunk-VVOOYDJS.mjs}

@@ -1,25 +1,21 @@
 "use client";
+import {
+  tv
+} from "./chunk-2ZT6V4QR.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
-import {
-  tv
-} from "./chunk-J725QONZ.mjs";
 
 // src/components/list/list.tsx
-import React, { forwardRef, useCallback, useMemo } from "react";
+import { Children, cloneElement, forwardRef, isValidElement, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 var List = forwardRef((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, list.variantKeys);
+  const [props, variantProps] = mapPropsVariants(originalProps, listStyle.variantKeys);
   const { children, classNames } = props;
-  const slots = useMemo(() => list({ ...variantProps }), [...Object.values(variantProps)]);
-  const getBaseProps = useCallback(() => {
-    return {
-      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
-    };
-  }, [slots, classNames == null ? void 0 : classNames.base]);
-  return /* @__PURE__ */ jsx("div", { ref, ...getBaseProps(), children: React.Children.map(children, (child, index) => {
-    return React.cloneElement(child, {
+  const slots = useMemo(() => listStyle(variantProps), [variantProps]);
+  return /* @__PURE__ */ jsx("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: Children.map(children, (child) => {
+    if (!isValidElement(child)) return child;
+    return cloneElement(child, {
       ...variantProps,
       ...child.props
     });
@@ -27,23 +23,25 @@ var List = forwardRef((originalProps, ref) => {
 });
 List.displayName = "List";
 var list_default = List;
-var list = tv({
+var listStyle = tv({
   slots: {
     base: ["flex", "flex-col"]
   },
   variants: {
     variant: {
       solid: {},
-      line: {}
+      outline: {}
     },
     size: {
       sm: {},
       md: {},
-      lg: {}
+      lg: {},
+      xl: {}
     },
     color: {
       primary: {},
-      secondary: {}
+      secondary: {},
+      neutral: {}
     }
   },
   defaultVariants: {