@deepnoid/ui 0.1.18 → 0.1.20

package/dist/index.mjs

@@ -1,25 +1,14 @@
 "use client";
-import "./chunk-LUWGOKLG.mjs";
-import {
-  ToastProvider,
-  useToast
-} from "./chunk-HDNQOLUJ.mjs";
-import "./chunk-ZOTHPHXA.mjs";
-import {
-  toast_default
-} from "./chunk-5OBP42D6.mjs";
 import "./chunk-HIE2YRGA.mjs";
 import {
   tooltip_default
 } from "./chunk-Z2537DF6.mjs";
 import "./chunk-ZMOAFSYE.mjs";
 import "./chunk-WSIADHVC.mjs";
-import "./chunk-2UUH2MBF.mjs";
+import "./chunk-MBLZYQCN.mjs";
 import {
-  table_default
-} from "./chunk-2YRRWNYG.mjs";
-import "./chunk-ETX4WR6J.mjs";
-import "./chunk-3DPVPTHL.mjs";
+  tree_default
+} from "./chunk-BPVRXFIC.mjs";
 import "./chunk-RRAZM5D3.mjs";
 import {
   textarea_default
@@ -28,6 +17,28 @@ import "./chunk-3MY6LO7N.mjs";
 import {
   tabs_default
 } from "./chunk-2YMAKIZ6.mjs";
+import "./chunk-LUWGOKLG.mjs";
+import {
+  ToastProvider,
+  useToast
+} from "./chunk-YBDA3WQP.mjs";
+import "./chunk-ZOTHPHXA.mjs";
+import {
+  toast_default
+} from "./chunk-OUAKGMDW.mjs";
+import "./chunk-LVFI2NOH.mjs";
+import {
+  switch_default
+} from "./chunk-Z74QNVPG.mjs";
+import "./chunk-DX3KXNP6.mjs";
+import {
+  form_table_default
+} from "./chunk-3BKCODIL.mjs";
+import {
+  table_default
+} from "./chunk-LNYMVBV5.mjs";
+import "./chunk-63WXGSTV.mjs";
+import "./chunk-3DPVPTHL.mjs";
 import "./chunk-DQRAFUDA.mjs";
 import {
   scrollArea_default
@@ -35,17 +46,17 @@ import {
 import "./chunk-QCEKPS7U.mjs";
 import {
   select_default
-} from "./chunk-MJT6ZW4C.mjs";
-import "./chunk-P6NVCCBZ.mjs";
+} from "./chunk-BXXAMH3R.mjs";
 import "./chunk-S3QS5B7F.mjs";
-import "./chunk-LVFI2NOH.mjs";
+import "./chunk-OF3X4BXG.mjs";
+import "./chunk-DJOG6Z35.mjs";
 import {
-  switch_default
-} from "./chunk-Z74QNVPG.mjs";
+  modal_default
+} from "./chunk-ZUSUVPYV.mjs";
 import "./chunk-7B7LRG5J.mjs";
 import {
   pagination_default
-} from "./chunk-UHFJ7ZFM.mjs";
+} from "./chunk-EGHTZLZJ.mjs";
 import "./chunk-F3HENRVM.mjs";
 import "./chunk-TPFN22HR.mjs";
 import {
@@ -54,68 +65,66 @@ import {
 import "./chunk-2GCSFWHD.mjs";
 import {
   input_default
-} from "./chunk-7TXQPX4O.mjs";
-import "./chunk-DJOG6Z35.mjs";
-import {
-  modal_default
-} from "./chunk-RXIFDECK.mjs";
+} from "./chunk-JOCMCOEK.mjs";
+import "./chunk-QZ3LVYJW.mjs";
 import "./chunk-MGEWSREV.mjs";
+import {
+  chip_default
+} from "./chunk-6HX3PPL6.mjs";
 import "./chunk-75HLCORR.mjs";
 import {
   dateTimePicker_default
-} from "./chunk-QIDZXCYP.mjs";
-import "./chunk-5ANQDLRS.mjs";
-import "./chunk-AG7AWQKH.mjs";
+} from "./chunk-EYVRTVRM.mjs";
+import "./chunk-Q72LZAPG.mjs";
+import "./chunk-OWG4RL2T.mjs";
 import "./chunk-7MVEAQ7Z.mjs";
+import {
+  listItem_default
+} from "./chunk-PZIVMTKX.mjs";
 import {
   list_default
 } from "./chunk-HIVPDIEP.mjs";
-import {
-  listItem_default
-} from "./chunk-FONJYZKH.mjs";
 import "./chunk-FWJ2ZKH6.mjs";
 import "./chunk-P732YGHO.mjs";
-import "./chunk-QZ3LVYJW.mjs";
-import {
-  checkbox_default
-} from "./chunk-D6QI3DJG.mjs";
-import {
-  chip_default
-} from "./chunk-BFM3LPBK.mjs";
-import "./chunk-7DLOYKVC.mjs";
-import {
-  avatar_default
-} from "./chunk-UYPVP36M.mjs";
-import "./chunk-SE5TU755.mjs";
-import {
-  backdrop_default
-} from "./chunk-LL6F3WDX.mjs";
 import "./chunk-KYIODWXL.mjs";
 import {
   breadcrumb_default
-} from "./chunk-RPDPB4JP.mjs";
+} from "./chunk-6KXBXGYR.mjs";
 import "./chunk-MY5U63QO.mjs";
 import {
   button_group_default
 } from "./chunk-LPZOH3RP.mjs";
 import {
   button_default
-} from "./chunk-7A5M7DRD.mjs";
+} from "./chunk-PNRS23HE.mjs";
 import {
   icon_button_default
-} from "./chunk-K7Z6PVXE.mjs";
+} from "./chunk-VQROXH43.mjs";
 import "./chunk-6WSACUIB.mjs";
-import "./chunk-6PNKRBUT.mjs";
 import "./chunk-LXHUO6VM.mjs";
-import {
-  text_button_default
-} from "./chunk-WFMFC7R6.mjs";
+import "./chunk-6PNKRBUT.mjs";
 import "./chunk-ZYIIXWVY.mjs";
 import {
   Icon_default,
   iconTemplate
-} from "./chunk-DADMVOYI.mjs";
-import "./chunk-A7OXEUCC.mjs";
+} from "./chunk-HWL7TPUN.mjs";
+import {
+  text_button_default
+} from "./chunk-WFMFC7R6.mjs";
+import {
+  checkbox_default
+} from "./chunk-D6QI3DJG.mjs";
+import "./chunk-7USF56CT.mjs";
+import "./chunk-IZM66FHP.mjs";
+import "./chunk-SE5TU755.mjs";
+import {
+  backdrop_default
+} from "./chunk-LL6F3WDX.mjs";
+import "./chunk-7DLOYKVC.mjs";
+import {
+  avatar_default
+} from "./chunk-XQGD4ZIX.mjs";
+import "./chunk-3IU2RPSM.mjs";
 import {
   deepnoidUi,
   tv
@@ -132,6 +141,7 @@ export {
   checkbox_default as CheckBox,
   chip_default as Chip,
   dateTimePicker_default as DateTimePicker,
+  form_table_default as FormTable,
   Icon_default as Icon,
   icon_button_default as IconButton,
   input_default as Input,
@@ -150,6 +160,7 @@ export {
   toast_default as Toast,
   ToastProvider,
   tooltip_default as Tooltip,
+  tree_default as Tree,
   deepnoidUi,
   iconTemplate,
   tv,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepnoid/ui",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "license": "MIT",
   "sideEffects": false,
   "exports": {

package/types/images.d.ts

@@ -0,0 +1,14 @@
+declare module "*.png" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.jpg" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.svg" {
+  const value: string;
+  export default value;
+}

package/dist/chunk-5OBP42D6.mjs

@@ -1,117 +0,0 @@
-"use client";
-import {
-  Icon_default
-} from "./chunk-DADMVOYI.mjs";
-import {
-  tv
-} from "./chunk-4ZJFD3L3.mjs";
-import {
-  mapPropsVariants
-} from "./chunk-E3G5QXSH.mjs";
-
-// src/components/toast/toast.tsx
-import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Toast = forwardRef((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, toast.variantKeys);
-  const { width = 300, placement, classNames, showIcon = true, showCloseButton = true, onClose, ...toastProps } = props;
-  const slots = useMemo(() => toast({ ...variantProps }), [variantProps]);
-  const toastRef = useRef(null);
-  useImperativeHandle(
-    ref,
-    () => ({
-      getWidth: () => {
-        if (toastRef.current) {
-          return toastRef.current.offsetWidth;
-        }
-      }
-    }),
-    []
-  );
-  const getBaseProps = useCallback(
-    () => ({
-      className: slots.base({
-        class: [
-          classNames == null ? void 0 : classNames.base,
-          width ? `w-[${width}px]` : "",
-          (placement == null ? void 0 : placement.includes("top")) ? "animate-slideInFromTop" : "animate-slideInFromBottom"
-        ]
-      })
-    }),
-    [slots, classNames == null ? void 0 : classNames.base]
-  );
-  return /* @__PURE__ */ jsxs("div", { ref: toastRef, ...getBaseProps(), children: [
-    showIcon && /* @__PURE__ */ jsx(Icon_default, { name: originalProps.icon || "info-circle", fill: true, className: "mt-[2px]" }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 select-none", children: props.content }),
-    showCloseButton && /* @__PURE__ */ jsx(Icon_default, { name: "close", className: "cursor-pointer mt-[2px]", onClick: onClose })
-  ] });
-});
-Toast.displayName = "Toast";
-var toast_default = Toast;
-var toast = tv({
-  slots: {
-    base: [
-      "relative",
-      "inline-flex",
-      "items-start",
-      "border",
-      "rounded-md",
-      "text-md",
-      "p-[10px]",
-      "gap-[5px]",
-      "z-0",
-      "transition-all",
-      "duration-300",
-      "overflow-auto"
-    ],
-    content: [
-      "absolute",
-      "top-0",
-      "left-0",
-      "inline-flex",
-      "items-center",
-      "justify-center",
-      "font-[500]",
-      "text-white",
-      "bg-trans-strong"
-    ]
-  },
-  variants: {
-    color: {
-      primary: {
-        base: "bg-primary-soft border-primary-light text-primary-main"
-      },
-      secondary: {
-        base: "bg-secondary-soft border-secondary-light text-secondary-main"
-      },
-      default: {
-        base: "bg-default-soft border-default-light text-default-main"
-      },
-      success: {
-        base: "bg-success-soft border-success-light text-success-main"
-      },
-      info: {
-        base: "bg-info-soft border-info-light text-info-main"
-      },
-      warning: {
-        base: "bg-warning-soft border-warning-light text-warning-main"
-      },
-      danger: {
-        base: "bg-danger-soft border-danger-light text-danger-main"
-      }
-    },
-    disableAnimation: {
-      true: {
-        base: "animate-none"
-      }
-    }
-  },
-  defaultVariants: {
-    color: "default",
-    disableAnimation: false
-  }
-});
-
-export {
-  toast_default
-};

package/dist/chunk-HDNQOLUJ.mjs

@@ -1,83 +0,0 @@
-"use client";
-import {
-  getToastPosition
-} from "./chunk-ZOTHPHXA.mjs";
-import {
-  toast_default
-} from "./chunk-5OBP42D6.mjs";
-
-// src/components/toast/use-toast.tsx
-import { createContext, useContext, useState, useCallback, useEffect, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var ToastContext = createContext(null);
-var useToast = () => {
-  const context = useContext(ToastContext);
-  if (!context) {
-    throw new Error("useToast must be used within a ToastProvider");
-  }
-  return context;
-};
-var ToastProvider = ({
-  globalOptions,
-  children
-}) => {
-  const [toasts, setToasts] = useState([]);
-  const [containerStyle, setContainerStyle] = useState({});
-  const toastRef = useRef(null);
-  const addToast = useCallback((content, options) => {
-    const id = Date.now() + Math.floor(Math.random() * 1e5);
-    const newToast = {
-      id,
-      content,
-      ...options
-    };
-    setToasts((prevToasts) => [...prevToasts, newToast]);
-    setTimeout(() => {
-      setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id));
-    }, options.duration || 3e3);
-  }, []);
-  const removeToast = useCallback((id) => {
-    setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id));
-  }, []);
-  const value = {
-    default: (content, options) => addToast(content, { type: "default", icon: "info-circle", color: "default", ...globalOptions, ...options }),
-    info: (content, options) => addToast(content, { type: "info", icon: "info-circle", color: "info", ...globalOptions, ...options }),
-    success: (content, options) => addToast(content, { type: "success", icon: "check-circle", color: "success", ...globalOptions, ...options }),
-    warning: (content, options) => addToast(content, {
-      type: "warning",
-      icon: "exclamation-triangle",
-      color: "warning",
-      ...globalOptions,
-      ...options
-    }),
-    error: (content, options) => addToast(content, { type: "error", icon: "exclamation-circle", color: "danger", ...globalOptions, ...options })
-  };
-  useEffect(() => {
-    var _a;
-    const width = (globalOptions == null ? void 0 : globalOptions.width) ? globalOptions == null ? void 0 : globalOptions.width : typeof ((_a = toastRef.current) == null ? void 0 : _a.getWidth) === "function" ? toastRef.current.getWidth() : 300;
-    const offset = 20;
-    const calculatePosition = () => {
-      const placement = (globalOptions == null ? void 0 : globalOptions.placement) || "bottom-right";
-      const { top, left, bottom, right } = getToastPosition(placement, width, offset);
-      setContainerStyle({
-        position: "fixed",
-        top: top !== void 0 ? `${top}px` : void 0,
-        left: left !== void 0 ? `${left}px` : void 0,
-        bottom: bottom !== void 0 ? `${bottom}px` : void 0,
-        right: right !== void 0 ? `${right}px` : void 0
-      });
-    };
-    calculatePosition();
-    window.addEventListener("resize", calculatePosition);
-    return () => window.removeEventListener("resize", calculatePosition);
-  }, [globalOptions == null ? void 0 : globalOptions.placement, globalOptions == null ? void 0 : globalOptions.width]);
-  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
-    children,
-    /* @__PURE__ */ jsx("div", { id: "deepnoid-toast-container", className: "flex flex-col gap-[10px]", style: containerStyle, children: toasts.map((toast) => /* @__PURE__ */ jsx(toast_default, { ref: toastRef, onClose: () => removeToast(toast.id), ...toast }, toast.id)) })
-  ] });
-};
-
-export {
-  useToast,
-  ToastProvider
-};

package/dist/chunk-RXIFDECK.mjs

@@ -1,213 +0,0 @@
-"use client";
-import {
-  button_default
-} from "./chunk-7A5M7DRD.mjs";
-import {
-  Icon_default
-} from "./chunk-DADMVOYI.mjs";
-import {
-  tv
-} from "./chunk-4ZJFD3L3.mjs";
-import {
-  mapPropsVariants
-} from "./chunk-E3G5QXSH.mjs";
-
-// src/components/modal/modal.tsx
-import { forwardRef, useCallback, useMemo, useEffect } from "react";
-import { createPortal } from "react-dom";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var Modal = forwardRef((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, modal.variantKeys);
-  const {
-    classNames,
-    isOpen,
-    icon,
-    title,
-    subTitle,
-    content,
-    confirmButtonText,
-    cancelButtonText,
-    showCloseButton,
-    isDismissable = true,
-    isKeyboardDismissDisabled = false,
-    onConfirm,
-    onCancel
-  } = props;
-  const slots = useMemo(() => modal({ ...variantProps }), [...Object.values(variantProps)]);
-  const getBackdropProps = useCallback(
-    () => ({
-      className: slots.backdrop({ class: classNames == null ? void 0 : classNames.backdrop }),
-      onClick: (e) => {
-        if (isDismissable && e.target === e.currentTarget && onCancel) {
-          onCancel();
-        }
-      }
-    }),
-    [slots, classNames == null ? void 0 : classNames.backdrop, isDismissable, onCancel]
-  );
-  const getModalWrapperProps = useCallback(
-    () => ({
-      className: slots.modalWrapper({ class: classNames == null ? void 0 : classNames.modalWrapper }),
-      "data-icon-visibility": typeof icon !== "undefined"
-    }),
-    [slots, classNames == null ? void 0 : classNames.modalWrapper, icon]
-  );
-  const getIconProps = useCallback(
-    () => ({
-      className: slots.icon({ class: [classNames == null ? void 0 : classNames.icon] })
-    }),
-    [slots, classNames == null ? void 0 : classNames.icon]
-  );
-  const getCloseIconProps = useCallback(
-    () => ({
-      className: slots.closeIcon({ class: [classNames == null ? void 0 : classNames.closeIcon, showCloseButton ? "" : "hidden"] })
-    }),
-    [slots, classNames == null ? void 0 : classNames.closeIcon, showCloseButton]
-  );
-  const getBodyWrapperProps = useCallback(
-    () => ({
-      className: slots.bodyWrapper({ class: classNames == null ? void 0 : classNames.bodyWrapper })
-    }),
-    [slots, classNames == null ? void 0 : classNames.bodyWrapper]
-  );
-  const getTitleWrapperProps = useCallback(
-    () => ({
-      className: slots.titleWrapper({ class: classNames == null ? void 0 : classNames.titleWrapper })
-    }),
-    [slots, classNames == null ? void 0 : classNames.titleWrapper]
-  );
-  const getTitleProps = useCallback(
-    () => ({
-      className: slots.title({ class: classNames == null ? void 0 : classNames.title })
-    }),
-    [slots, classNames == null ? void 0 : classNames.title]
-  );
-  const getSubTitleProps = useCallback(
-    () => ({
-      className: slots.subTitle({ class: classNames == null ? void 0 : classNames.subTitle })
-    }),
-    [slots, classNames == null ? void 0 : classNames.subTitle]
-  );
-  const getBodyProps = useCallback(
-    () => ({
-      className: slots.body({ class: classNames == null ? void 0 : classNames.body })
-    }),
-    [slots, classNames == null ? void 0 : classNames.body]
-  );
-  const getContentProps = useCallback(
-    () => ({
-      className: slots.content({ class: classNames == null ? void 0 : classNames.content })
-    }),
-    [slots, classNames == null ? void 0 : classNames.content]
-  );
-  const getFooterWrapperProps = useCallback(
-    () => ({
-      className: slots.footerWrapper({ class: classNames == null ? void 0 : classNames.footerWrapper })
-    }),
-    [slots, classNames == null ? void 0 : classNames.footerWrapper]
-  );
-  useEffect(() => {
-    if (isOpen) {
-      document.body.classList.add("overflow-hidden");
-    } else {
-      document.body.classList.remove("overflow-hidden");
-    }
-    if (!isOpen || isKeyboardDismissDisabled) return;
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape" && onCancel) {
-        onCancel();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-      document.body.classList.remove("overflow-hidden");
-    };
-  }, [isOpen, isKeyboardDismissDisabled, onCancel]);
-  return /* @__PURE__ */ jsx(Fragment, { children: isOpen && createPortal(
-    /* @__PURE__ */ jsx("div", { ...getBackdropProps(), children: /* @__PURE__ */ jsxs("div", { ref, ...getModalWrapperProps(), children: [
-      typeof icon === "string" ? /* @__PURE__ */ jsx("div", { ...getIconProps(), children: /* @__PURE__ */ jsx(Icon_default, { name: icon, className: "h-[80px] w-[80px]" }) }) : /* @__PURE__ */ jsx("div", { ...getIconProps(), children: icon }),
-      /* @__PURE__ */ jsxs("div", { ...getBodyWrapperProps(), children: [
-        showCloseButton && /* @__PURE__ */ jsx(Icon_default, { name: "close", ...getCloseIconProps(), onClick: onCancel }),
-        /* @__PURE__ */ jsxs("div", { ...getBodyProps(), children: [
-          (title || subTitle) && /* @__PURE__ */ jsxs("div", { ...getTitleWrapperProps(), children: [
-            title && /* @__PURE__ */ jsx("div", { ...getTitleProps(), children: title }),
-            subTitle && /* @__PURE__ */ jsx("div", { ...getSubTitleProps(), children: subTitle })
-          ] }),
-          content && typeof content === "string" ? /* @__PURE__ */ jsx("div", { ...getContentProps(), children: content }) : content,
-          (cancelButtonText || confirmButtonText) && /* @__PURE__ */ jsxs("div", { ...getFooterWrapperProps(), children: [
-            cancelButtonText && /* @__PURE__ */ jsx(button_default, { variant: "outline", color: originalProps.color, fullWidth: true, onClick: onCancel, children: cancelButtonText }),
-            confirmButtonText && /* @__PURE__ */ jsx(button_default, { size: "md", color: originalProps.color, fullWidth: true, onClick: onConfirm, children: confirmButtonText })
-          ] })
-        ] })
-      ] })
-    ] }) }),
-    document.body
-  ) });
-});
-Modal.displayName = "Modal";
-var modal_default = Modal;
-var modal = tv({
-  slots: {
-    backdrop: ["relative w-screen h-screen fixed inset-0 bg-black/60", "z-[900]"],
-    modalWrapper: ["group/modal", "absolute", "top-1/2", "-translate-y-1/2", "left-1/2", "-translate-x-1/2"],
-    icon: ["absolute", "top-[-40px]", "left-1/2", "-translate-x-1/2", "z-10"],
-    closeIcon: [
-      "absolute",
-      "top-[20px]",
-      "right-[20px]",
-      "cursor-pointer",
-      "z-10",
-      "group-data-[icon-visibility=true]/modal:top-[80px]"
-    ],
-    titleWrapper: ["relative", "flex", "flex-col", "gap-[10px]"],
-    title: "text-h5 text-center text-foreground",
-    subTitle: "text-lg text-center text-neutral-dark",
-    bodyWrapper: [
-      "min-w-[400px]",
-      "flex flex-col justify-center",
-      "p-[20px]",
-      "bg-background",
-      "shadow-drop shadow-foreground/20 rounded-xxlg",
-      "overflow-hidden",
-      "group-data-[icon-visibility=true]/modal:mt-[0]",
-      "group-data-[icon-visibility=true]/modal:pt-[60px]"
-    ],
-    body: ["flex", "flex-col", "gap-[20px]"],
-    content: ["text-md text-center", "break-words", "bg-neutral-soft", "rounded-[5px]", "p-[10px]"],
-    footerWrapper: ["flex gap-[20px]"]
-  },
-  variants: {
-    color: {
-      primary: {
-        icon: "text-primary-main"
-      },
-      secondary: {
-        icon: "text-secondary-main"
-      },
-      neutral: {
-        icon: "text-neutral-main"
-      },
-      success: {
-        icon: "text-success-main"
-      },
-      info: {
-        icon: "text-info-main"
-      },
-      warning: {
-        icon: "text-warning-main"
-      },
-      danger: {
-        icon: "text-danger-main"
-      }
-    }
-  },
-  defaultVariants: {
-    color: "primary"
-  }
-});
-
-export {
-  modal_default,
-  modal
-};