@deepnoid/ui 0.1.0 → 0.1.1

package/dist/chunk-RT5NKQX4.mjs

@@ -0,0 +1,285 @@
+"use client";
+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/input/input.tsx
+import React, { forwardRef, useRef, useCallback, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Input = forwardRef((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, inputStyle.variantKeys);
+  const { classNames, label, helperText, errorText, startContent, endContent, ...inputProps } = props;
+  const inputRef = useRef(null);
+  const slots = useMemo(() => inputStyle({ ...variantProps }), [variantProps]);
+  const getContentProps = useCallback(
+    () => ({
+      className: slots.content({ class: classNames == null ? void 0 : classNames.content }),
+      size: originalProps.size
+    }),
+    [slots, classNames, originalProps.size]
+  );
+  const renderStartContent = () => {
+    if (React.isValidElement(startContent)) {
+      const existingProps = startContent.props;
+      const mergedProps = {
+        ...getContentProps(),
+        className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
+      };
+      return React.cloneElement(startContent, mergedProps);
+    } else {
+      const contentProps = getContentProps();
+      return /* @__PURE__ */ jsx("div", { ...contentProps, children: startContent });
+    }
+  };
+  const renderDateTimePickerIcon = () => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...getContentProps(),
+      onClick: () => {
+        const target = ref && "current" in ref ? ref.current : inputRef.current;
+        target == null ? void 0 : target.focus();
+        target == null ? void 0 : target.showPicker();
+      },
+      children: /* @__PURE__ */ jsx(Icon_default, { name: props.type === "time" ? "clock" : "calendar", size: originalProps.size, className: "cursor-pointer" })
+    }
+  );
+  const renderContentWithIcon = () => {
+    if (React.isValidElement(endContent)) {
+      const existingProps = endContent.props;
+      const mergedProps = {
+        ...getContentProps(),
+        className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
+      };
+      return React.cloneElement(endContent, mergedProps);
+    } else if (errorText) {
+      const iconProps = { ...getContentProps(), className: getContentProps().className };
+      return /* @__PURE__ */ jsx("div", { ...iconProps, children: /* @__PURE__ */ jsx(Icon_default, { name: "exclamation-circle", fill: true, size: originalProps.size }) });
+    } else {
+      return /* @__PURE__ */ jsx(Fragment, {});
+    }
+  };
+  const renderEndContent = () => {
+    switch (props.type) {
+      case "date":
+      case "datetime-local":
+      case "month":
+      case "week":
+      case "time":
+        return renderDateTimePickerIcon();
+      default:
+        return renderContentWithIcon();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        slots.base({ class: classNames == null ? void 0 : classNames.base }),
+        variantProps.direction === "vertical" ? slots.vertical({ class: classNames == null ? void 0 : classNames.vertical }) : slots.horizon({ class: classNames == null ? void 0 : classNames.horizon })
+      ),
+      children: [
+        label && /* @__PURE__ */ jsx("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+        /* @__PURE__ */ jsxs("div", { className: slots.innerWrapper({ class: classNames == null ? void 0 : classNames.innerWrapper }), children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: clsx(
+                slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper }),
+                inputProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
+              ),
+              children: [
+                startContent && renderStartContent(),
+                /* @__PURE__ */ jsx("input", { ...inputProps, ref: ref || inputRef, className: slots.input({ class: classNames == null ? void 0 : classNames.input }), size: 0 }),
+                renderEndContent()
+              ]
+            }
+          ),
+          helperText && !errorText && /* @__PURE__ */ jsx("p", { className: slots.helperText({ class: classNames == null ? void 0 : classNames.helperText }), children: helperText }),
+          errorText && /* @__PURE__ */ jsx("p", { className: clsx("error", slots.errorText({ class: classNames == null ? void 0 : classNames.errorText })), children: errorText })
+        ] })
+      ]
+    }
+  );
+});
+Input.displayName = "Input";
+var input_default = Input;
+var inputStyle = tv({
+  slots: {
+    base: ["group/input", "flex"],
+    vertical: ["flex-col"],
+    horizon: ["flex-row", "gap-0"],
+    label: ["flex", "items-center", "font-bold", "text-body-foreground", "w-[80px]"],
+    innerWrapper: ["flex", "flex-col"],
+    inputWrapper: ["flex", "items-center", "transition", "duration-200", "group-has-[p.error]/input:bg-danger-soft"],
+    input: [
+      "w-full",
+      "h-full",
+      "bg-transparent",
+      "text-neutral-main",
+      "placeholder:text-neutral-main",
+      "focus:outline-none",
+      "focus:ring-0",
+      "group-has-[:hover]/input:text-neutral-dark",
+      "group-has-[:hover]/input:placeholder:text-neutral-dark",
+      "group-has-[:focus]/input:text-neutral-dark",
+      "group-has-[:focus]/input:placeholder:text-neutral-dark",
+      "group-has-[p.error]/input:text-danger-main",
+      "group-has-[p.error]/input:placeholder:text-danger-main"
+    ],
+    content: [
+      "flex",
+      "items-center",
+      "select-none",
+      "text-neutral-main",
+      "group-has-[:hover]/input:text-neutral-dark",
+      "group-has-[p.error]/input:text-danger-main"
+    ],
+    helperText: ["text-neutral-main", "group-has-[:hover]/input:text-neutral-dark"],
+    errorText: ["text-danger-main"],
+    readonly: ["pointer-events-none"]
+  },
+  variants: {
+    variant: {
+      solid: {
+        inputWrapper: ["!border-transparent", "bg-trans-soft", "group-has-[:focus]/input:text-body-foreground"],
+        readonly: ["!bg-trans-light"]
+      },
+      outline: {
+        inputWrapper: [
+          "border-neutral-light",
+          "group-has-[:hover]/input:bg-trans-soft",
+          "group-has-[:focus]/input:bg-body-background",
+          "group-has-[p.error]/input:border-danger-main"
+        ],
+        readonly: ["!bg-trans-soft"]
+      },
+      underline: {
+        inputWrapper: [
+          "bg-transparent",
+          "!rounded-none",
+          "!border-t-transparent",
+          "!border-l-transparent",
+          "!border-r-transparent",
+          "group-has-[:hover]/input:bg-trans-soft",
+          "group-has-[:focus]/input:bg-body-background",
+          "group-has-[p.error]/input:border-danger-main"
+        ],
+        readonly: ["!bg-trans-soft"]
+      }
+    },
+    color: {
+      primary: {
+        content: [
+          "group-has-[:focus]/input:text-primary-main",
+          "!group-has-[p.error]:not(input:focus):hover/input:text-primary-main"
+        ],
+        helperText: [
+          "group-has-[:focus]/input:text-primary-main",
+          "group-has-[:focus:hover]/input:text-primary-main",
+          "group-has-[:focus]/input:hover:text-primary-main"
+        ]
+      },
+      secondary: {
+        content: [
+          "group-has-[:focus]/input:text-secondary-main",
+          "!group-has-[p.error]:not(input:focus):hover/input:text-secondary-main"
+        ],
+        helperText: [
+          "group-has-[:focus]/input:text-secondary-main",
+          "group-has-[:focus:hover]/input:text-secondary-main",
+          "group-has-[:focus]/input:hover:text-secondary-main"
+        ]
+      }
+    },
+    size: {
+      sm: {
+        base: ["text-sm", "gap-[4px]"],
+        label: ["text-sm"],
+        innerWrapper: ["gap-[4px]"],
+        inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[4px]", "border-sm"],
+        helperText: ["text-sm"],
+        errorText: ["text-sm"]
+      },
+      md: {
+        base: ["text-md", "gap-[6px]"],
+        label: ["text-md"],
+        innerWrapper: ["gap-[6px]"],
+        inputWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-[6px]", "border-md"],
+        helperText: ["text-sm"],
+        errorText: ["text-sm"]
+      },
+      lg: {
+        base: ["text-lg", "gap-[8px]"],
+        label: ["text-lg"],
+        innerWrapper: ["gap-[8px]"],
+        inputWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-[8px]", "border-lg"],
+        helperText: ["text-md"],
+        errorText: ["text-md"]
+      },
+      xl: {
+        base: ["text-xl", "gap-[10px]"],
+        label: ["text-xl"],
+        innerWrapper: ["gap-[10px]"],
+        inputWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-[10px]", "border-xl"],
+        helperText: ["text-md"],
+        errorText: ["text-md"]
+      }
+    },
+    direction: {
+      vertical: "",
+      horizon: ""
+    },
+    full: {
+      true: {
+        base: ["w-full"],
+        innerWrapper: ["flex-1"],
+        inputWrapper: ["w-full"]
+      }
+    },
+    disabled: {
+      true: {
+        inputWrapper: ["!bg-neutral-soft", "pointer-events-none", "!group-has-[p.error]/input:text-danger-light"],
+        input: [
+          "text-neutral-light",
+          "placeholder:text-neutral-light",
+          "group-has-[p.error]/input:text-danger-light",
+          "group-has-[p.error]/input:placeholder:text-danger-light"
+        ],
+        content: ["text-neutral-light", "group-has-[p.error]/input:text-danger-light"],
+        helperText: ["!text-neutral-light"],
+        errorText: ["!text-danger-light"]
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      disabled: true,
+      variant: ["outline", "underline"],
+      class: {
+        inputWrapper: ["!bg-body-background", "group-has-[p.error]/input:border-danger-light"]
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: "solid",
+    color: "primary",
+    size: "md",
+    direction: "vertical",
+    disabled: false,
+    readonly: false
+  }
+});
+
+export {
+  input_default,
+  inputStyle
+};

package/dist/{chunk-X2MQCISM.mjs → chunk-S65S7QZ5.mjs}

@@ -10,7 +10,7 @@ import {
 } from "./chunk-24NQEB73.mjs";
 import {
   tv
-} from "./chunk-IE2BRM7Z.mjs";
+} from "./chunk-2ZT6V4QR.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

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-3AMZ55Y6.mjs → chunk-SSEQSF5F.mjs}

@@ -1,19 +1,19 @@
 "use client";
 import {
   timePicker_default
-} from "./chunk-CATOSBI7.mjs";
+} from "./chunk-YCMZELLD.mjs";
 import {
   useDatePicker
 } from "./chunk-FWJ2ZKH6.mjs";
 import {
   calendar_default
-} from "./chunk-QJHZJRSQ.mjs";
+} from "./chunk-HKXUNG3H.mjs";
 import {
   Icon_default
 } from "./chunk-24NQEB73.mjs";
 import {
   tv
-} from "./chunk-IE2BRM7Z.mjs";
+} from "./chunk-2ZT6V4QR.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/{chunk-RRL6KBU4.mjs → chunk-U2YKMXVG.mjs}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-WSIADHVC.mjs";
 import {
   tv
-} from "./chunk-IE2BRM7Z.mjs";
+} from "./chunk-2ZT6V4QR.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

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

@@ -1,7 +1,7 @@
 "use client";
 import {
   option_default
-} from "./chunk-2HSK6XGZ.mjs";
+} from "./chunk-YZNQ2QGK.mjs";
 import {
   useSelect
 } from "./chunk-S3QS5B7F.mjs";
@@ -10,7 +10,7 @@ import {
 } from "./chunk-24NQEB73.mjs";
 import {
   tv
-} from "./chunk-IE2BRM7Z.mjs";
+} from "./chunk-2ZT6V4QR.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/{chunk-5S4XGPBB.mjs → chunk-VVOOYDJS.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   tv
-} from "./chunk-IE2BRM7Z.mjs";
+} from "./chunk-2ZT6V4QR.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/{chunk-FYJZ7Q5L.mjs → chunk-XIHAABHB.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-24NQEB73.mjs";
 import {
   tv
-} from "./chunk-IE2BRM7Z.mjs";
+} from "./chunk-2ZT6V4QR.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/{chunk-CATOSBI7.mjs → chunk-YCMZELLD.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   list_default
-} from "./chunk-5S4XGPBB.mjs";
+} from "./chunk-VVOOYDJS.mjs";
 import {
   listItem_default
-} from "./chunk-MW6Y3FSE.mjs";
+} from "./chunk-AYWI2CRE.mjs";
 
 // src/components/dateTimePicker/timePicker.tsx
 import { useState, useRef, useEffect } from "react";

package/dist/{chunk-2HSK6XGZ.mjs → chunk-YZNQ2QGK.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-24NQEB73.mjs";
 import {
   tv
-} from "./chunk-IE2BRM7Z.mjs";
+} from "./chunk-2ZT6V4QR.mjs";
 
 // src/components/select/option.tsx
 import { jsx, jsxs } from "react/jsx-runtime";