@deepnoid/ui 0.1.19 → 0.1.21

package/dist/index.mjs

@@ -1,33 +1,40 @@
 "use client";
+import "./chunk-LUWGOKLG.mjs";
+import {
+  ToastProvider,
+  useToast
+} from "./chunk-7KUFDVGL.mjs";
+import "./chunk-ZOTHPHXA.mjs";
+import {
+  toast_default
+} from "./chunk-2DLKV6TT.mjs";
+import "./chunk-RRAZM5D3.mjs";
+import {
+  textarea_default
+} from "./chunk-BKE6QF6W.mjs";
 import "./chunk-HIE2YRGA.mjs";
 import {
   tooltip_default
-} from "./chunk-Z2537DF6.mjs";
+} from "./chunk-IL5ENWCR.mjs";
 import "./chunk-ZMOAFSYE.mjs";
 import "./chunk-WSIADHVC.mjs";
-import "./chunk-2UUH2MBF.mjs";
+import "./chunk-MBLZYQCN.mjs";
+import {
+  tree_default
+} from "./chunk-XGYQ6D3S.mjs";
+import "./chunk-DX3KXNP6.mjs";
+import {
+  form_table_default
+} from "./chunk-3BKCODIL.mjs";
 import {
   table_default
-} from "./chunk-3TJAGKKY.mjs";
-import "./chunk-63WXGSTV.mjs";
-import "./chunk-3DPVPTHL.mjs";
+} from "./chunk-7CFOD7G4.mjs";
+import "./chunk-QHWFHOW2.mjs";
+import "./chunk-MV7RSV4D.mjs";
 import "./chunk-3MY6LO7N.mjs";
 import {
   tabs_default
-} from "./chunk-2YMAKIZ6.mjs";
-import "./chunk-RRAZM5D3.mjs";
-import {
-  textarea_default
-} from "./chunk-BKE6QF6W.mjs";
-import "./chunk-LUWGOKLG.mjs";
-import {
-  ToastProvider,
-  useToast
-} from "./chunk-HDNQOLUJ.mjs";
-import "./chunk-ZOTHPHXA.mjs";
-import {
-  toast_default
-} from "./chunk-5OBP42D6.mjs";
+} from "./chunk-SSMMWMQC.mjs";
 import "./chunk-DQRAFUDA.mjs";
 import {
   scrollArea_default
@@ -35,93 +42,93 @@ import {
 import "./chunk-QCEKPS7U.mjs";
 import {
   select_default
-} from "./chunk-MJT6ZW4C.mjs";
-import "./chunk-P6NVCCBZ.mjs";
-import "./chunk-S3QS5B7F.mjs";
+} from "./chunk-MW7CSRIE.mjs";
 import "./chunk-LVFI2NOH.mjs";
 import {
   switch_default
 } from "./chunk-Z74QNVPG.mjs";
+import "./chunk-DJOG6Z35.mjs";
+import {
+  modal_default
+} from "./chunk-OV7CZNXU.mjs";
 import "./chunk-7B7LRG5J.mjs";
 import {
   pagination_default
-} from "./chunk-UHFJ7ZFM.mjs";
+} from "./chunk-UTC2D6GV.mjs";
 import "./chunk-F3HENRVM.mjs";
 import "./chunk-TPFN22HR.mjs";
 import {
   radio_default
-} from "./chunk-QIRL6HY6.mjs";
+} from "./chunk-YIIFWADW.mjs";
 import "./chunk-2GCSFWHD.mjs";
 import {
   input_default
-} from "./chunk-7TXQPX4O.mjs";
-import "./chunk-DJOG6Z35.mjs";
-import {
-  modal_default
-} from "./chunk-RXIFDECK.mjs";
+} from "./chunk-2Y7IBUAZ.mjs";
+import "./chunk-QZ3LVYJW.mjs";
 import "./chunk-MGEWSREV.mjs";
+import {
+  chip_default
+} from "./chunk-FBAR75U4.mjs";
 import "./chunk-75HLCORR.mjs";
 import {
   dateTimePicker_default
-} from "./chunk-QIDZXCYP.mjs";
-import "./chunk-5ANQDLRS.mjs";
-import "./chunk-AG7AWQKH.mjs";
+} from "./chunk-JHDYQCEE.mjs";
+import "./chunk-DUPQBPI2.mjs";
+import "./chunk-Q6BZ76DI.mjs";
 import "./chunk-7MVEAQ7Z.mjs";
-import {
-  list_default
-} from "./chunk-HIVPDIEP.mjs";
 import {
   listItem_default
-} from "./chunk-FONJYZKH.mjs";
+} from "./chunk-SDHQUYFI.mjs";
+import {
+  list_default
+} from "./chunk-UFVQPPPW.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-HQLSHEK6.mjs";
 import "./chunk-MY5U63QO.mjs";
 import {
   button_group_default
 } from "./chunk-LPZOH3RP.mjs";
 import {
   button_default
-} from "./chunk-7A5M7DRD.mjs";
+} from "./chunk-MQI5SZWO.mjs";
 import {
   icon_button_default
-} from "./chunk-K7Z6PVXE.mjs";
+} from "./chunk-EWZAHXN7.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-KCOHU7X7.mjs";
+import {
+  checkbox_default
+} from "./chunk-7H5XPHY6.mjs";
+import "./chunk-E3G5QXSH.mjs";
+import "./chunk-7DLOYKVC.mjs";
+import {
+  avatar_default
+} from "./chunk-XQGD4ZIX.mjs";
+import "./chunk-3IU2RPSM.mjs";
+import "./chunk-SE5TU755.mjs";
+import {
+  backdrop_default
+} from "./chunk-P5QCU457.mjs";
+import "./chunk-27Y6K5NK.mjs";
 import {
   deepnoidUi,
   tv
 } from "./chunk-4ZJFD3L3.mjs";
-import "./chunk-27Y6K5NK.mjs";
-import "./chunk-E3G5QXSH.mjs";
+import "./chunk-7USF56CT.mjs";
+import "./chunk-IZM66FHP.mjs";
 import "./chunk-AC6TWLRT.mjs";
 export {
   avatar_default as Avatar,
@@ -132,6 +139,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 +158,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.19",
+  "version": "0.1.21",
   "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-MJT6ZW4C.mjs

@@ -1,255 +0,0 @@
-"use client";
-import {
-  option_default
-} from "./chunk-P6NVCCBZ.mjs";
-import {
-  useSelect
-} from "./chunk-S3QS5B7F.mjs";
-import {
-  Icon_default
-} from "./chunk-DADMVOYI.mjs";
-import {
-  tv
-} from "./chunk-4ZJFD3L3.mjs";
-import {
-  mapPropsVariants
-} from "./chunk-E3G5QXSH.mjs";
-
-// src/components/select/select.tsx
-import { forwardRef, useMemo, useCallback } from "react";
-import { createPortal } from "react-dom";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var Select = forwardRef((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, select.variantKeys);
-  const { classNames, options, defaultOption, onChange, ...inputProps } = props;
-  const slots = useMemo(() => select({ ...variantProps }), [variantProps]);
-  const {
-    targetRect,
-    selectedOption,
-    optionWrapperHeight,
-    selectWrapperRef,
-    optionWrapperRef,
-    handleToggleSelect,
-    handleChangeOption,
-    calculatePositionWithScroll
-  } = useSelect({
-    options,
-    defaultOption,
-    onChange
-  });
-  const position = targetRect ? calculatePositionWithScroll(targetRect, optionWrapperHeight) : null;
-  const getBaseProps = useCallback(
-    () => ({
-      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
-    }),
-    [slots, classNames]
-  );
-  const getLabelProps = useCallback(
-    () => ({
-      className: slots.label({ class: classNames == null ? void 0 : classNames.label })
-    }),
-    [slots, classNames]
-  );
-  const getSelectWrapperProps = useCallback(
-    () => ({
-      className: slots.selectWrapper({ class: classNames == null ? void 0 : classNames.selectWrapper }),
-      ref: selectWrapperRef,
-      onClick: handleToggleSelect
-    }),
-    [slots, classNames]
-  );
-  const getSelectProps = useCallback(
-    () => ({
-      ...inputProps,
-      ref,
-      className: slots.select({ class: classNames == null ? void 0 : classNames.select }),
-      value: (selectedOption == null ? void 0 : selectedOption.value) || "",
-      readOnly: true,
-      size: 0
-    }),
-    [slots, classNames, inputProps, selectedOption, ref]
-  );
-  const getOptionsWrapperProps = useCallback(
-    () => ({
-      className: slots.optionsWrapper({ class: classNames == null ? void 0 : classNames.optionsWrapper }),
-      ref: optionWrapperRef
-    }),
-    [slots, classNames]
-  );
-  const getErrorMessageProps = useCallback(
-    () => ({
-      className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })
-    }),
-    [slots, classNames]
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { ...getBaseProps(), children: [
-      props.label && /* @__PURE__ */ jsx("label", { ...getLabelProps(), children: props.label }),
-      /* @__PURE__ */ jsxs("div", { "data-expanded": !!targetRect, ...getSelectWrapperProps(), children: [
-        /* @__PURE__ */ jsx("input", { ...getSelectProps() }),
-        /* @__PURE__ */ jsx(Icon_default, { name: !!targetRect ? "arrow-triangle-up" : "arrow-triangle-down", size: originalProps.size, fill: true })
-      ] }),
-      props.errorMessage && /* @__PURE__ */ jsx("p", { ...getErrorMessageProps(), children: props.errorMessage })
-    ] }),
-    targetRect && /* @__PURE__ */ jsx(Fragment, { children: createPortal(
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          ...getOptionsWrapperProps(),
-          style: {
-            position: "absolute",
-            top: position == null ? void 0 : position.top,
-            left: position == null ? void 0 : position.left,
-            width: targetRect.width
-          },
-          children: options.map((option) => /* @__PURE__ */ jsx(
-            option_default,
-            {
-              variant: originalProps.variant,
-              size: originalProps.size,
-              color: originalProps.color,
-              option,
-              isSelected: (selectedOption == null ? void 0 : selectedOption.key) === option.key,
-              onClick: () => handleChangeOption(option),
-              children: option.value
-            },
-            option.key
-          ))
-        }
-      ),
-      document.body
-    ) })
-  ] });
-});
-Select.displayName = "Select";
-var select_default = Select;
-var select = tv({
-  slots: {
-    base: ["group/select", "flex flex-col"],
-    label: ["flex", "items-center"],
-    selectWrapper: [
-      "flex",
-      "items-center",
-      "bg-transparent",
-      "border-neutral-main",
-      "transition duration-200",
-      "group-has-[p]/select:border-danger-main",
-      "group-has-[p]/select:text-danger-main",
-      "group-has-[p]/select:bg-danger-soft"
-    ],
-    select: [
-      "w-full",
-      "bg-transparent",
-      "text-foreground",
-      "cursor-inherit",
-      "cursor-pointer",
-      "placeholder:text-neutral-main",
-      "group-has-[p]/select:text-danger-main",
-      "focus-visible:outline-none"
-    ],
-    optionsWrapper: ["w-[240px]", "border", "bg-background", "cursor-pointer", "overflow-y-auto"],
-    errorMessage: ["text-danger-main"]
-  },
-  variants: {
-    variant: {
-      solid: {
-        selectWrapper: "bg-trans-soft hover:bg-trans-light data-[expanded=true]:bg-trans-light group-has-[p]/select:bg-danger-soft"
-      },
-      normal: {
-        selectWrapper: "border hover:bg-trans-soft data-[expanded=true]:bg-trans-soft"
-      },
-      line: {
-        selectWrapper: "border-b !rounded-none hover:bg-trans-soft data-[expanded=true]:bg-trans-soft",
-        optionsWrapper: "!rounded-none"
-      }
-    },
-    color: {
-      primary: {
-        selectWrapper: "data-[expanded=true]:border-primary-main text-primary-main",
-        optionsWrapper: "border-primary-main",
-        select: "data-[expanded=true]:text-primary-main"
-      },
-      secondary: {
-        selectWrapper: "data-[expanded=true]:border-secondary-main text-secondary-main",
-        optionsWrapper: "border-secondary-main",
-        select: "data-[expanded=true]:text-secondary-main"
-      }
-    },
-    size: {
-      sm: {
-        base: "text-sm gap-[6px]",
-        selectWrapper: "w-[240px] h-[24px] px-[6px] py-[4.5px] gap-[6px] rounded-sm",
-        optionsWrapper: "max-h-[96px] rounded-sm",
-        errorMessage: "text-sm"
-      },
-      md: {
-        base: "text-md gap-[8px]",
-        selectWrapper: "w-[240px] h-[30px] px-[8px] py-[6.5px] gap-[8px] rounded-md",
-        optionsWrapper: "max-h-[120px] rounded-md",
-        errorMessage: "text-md"
-      },
-      lg: {
-        base: "text-lg gap-[10px]",
-        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: {
-      default: "",
-      none: {
-        selectWrapper: "rounded-none",
-        optionsWrapper: "rounded-none"
-      },
-      full: {
-        selectWrapper: "rounded-full"
-      }
-    },
-    fullWidth: {
-      true: {
-        selectWrapper: "w-full",
-        optionsWrapper: "w-full"
-      }
-    },
-    isDisabled: {
-      true: {
-        base: "cursor-default",
-        selectWrapper: "bg-neutral-soft border-neutral-light text-neutral-light pointer-events-none",
-        select: "text-neutral-light focus:text-neutral-light",
-        label: "text-neutral-light"
-      }
-    },
-    isRequired: {
-      true: {
-        label: "after:content-['*'] after:text-danger-main after:ml-0.5"
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "solid",
-    color: "primary",
-    size: "md",
-    fullWidth: false,
-    isDisabled: false,
-    isRequired: false
-  },
-  compoundVariants: [
-    {
-      isDisabled: true,
-      isRequired: true,
-      class: {
-        label: "after:text-danger-light"
-      }
-    }
-  ]
-});
-
-export {
-  select_default
-};