@deepnoid/ui 0.0.84 → 0.0.86

package/dist/index.js

@@ -108,7 +108,6 @@ __export(src_exports, {
   ButtonGroup: () => button_group_default,
   Card: () => card_default,
   CheckBox: () => checkbox_default,
-  Dropdown: () => dropdown_default,
   Icon: () => Icon_default,
   Input: () => input_default,
   List: () => list_default,
@@ -124,10 +123,12 @@ __export(src_exports, {
   Tabs: () => tabs_default,
   Textarea: () => textarea_default,
   Toast: () => toast_default,
+  ToastProvider: () => ToastProvider,
   Tooltip: () => tooltip_default,
   deepnoidUi: () => deepnoidUi,
   iconTemplate: () => iconTemplate,
-  tv: () => tv
+  tv: () => tv,
+  useToast: () => useToast
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -7330,198 +7331,56 @@ var listItem = tv({
   ]
 });
 
-// src/components/dropdown/dropdown.tsx
-var import_react28 = __toESM(require("react"));
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var Dropdown = (0, import_react28.forwardRef)((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, dropdown.variantKeys);
-  const { children, classNames } = props;
-  const slots = (0, import_react28.useMemo)(() => dropdown({ ...variantProps }), [...Object.values(variantProps)]);
-  const getBaseProps = (0, import_react28.useCallback)(() => {
-    return {
-      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
-    };
-  }, [slots, classNames == null ? void 0 : classNames.base]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ref, ...getBaseProps(), children: import_react28.default.Children.map(children, (child, index) => {
-    return import_react28.default.cloneElement(child, {
-      ...variantProps,
-      ...child.props
-    });
-  }) });
-});
-Dropdown.displayName = "Dropdown";
-var dropdown_default = Dropdown;
-var dropdown = tv({
-  slots: {
-    base: ["flex", "flex-col"]
-  },
-  variants: {
-    variant: {
-      solid: {},
-      line: {}
-    },
-    size: {
-      sm: {},
-      md: {},
-      lg: {}
-    },
-    color: {
-      primary: {},
-      secondary: {}
-    }
-  },
-  defaultVariants: {
-    variant: "solid",
-    color: "primary",
-    size: "md"
-  }
-});
-
 // src/components/toast/toast.tsx
-var import_react30 = require("react");
-var import_react_dom4 = require("react-dom");
-
-// src/components/toast/useToast.ts
-var import_react29 = require("react");
-
-// src/components/toast/toast-utils.ts
-var getToastPosition = (placement, targetRect, width, height, offset) => {
-  let x = 0, y = 0;
-  switch (placement) {
-    case "top":
-      x = targetRect.left + targetRect.width / 2 - width / 2;
-      y = targetRect.top - height - offset;
-      break;
-    case "left":
-      x = targetRect.left - width - offset;
-      y = targetRect.top + targetRect.height / 2 - height / 2;
-      break;
-    case "right":
-      x = targetRect.right + offset;
-      y = targetRect.top + targetRect.height / 2 - height / 2;
-      break;
-    case "bottom":
-      x = targetRect.left + targetRect.width / 2 - width / 2;
-      y = targetRect.bottom + offset;
-      break;
-    case "top-start":
-      x = targetRect.left;
-      y = targetRect.top - height - offset;
-      break;
-    case "top-end":
-      x = targetRect.right - width;
-      y = targetRect.top - height - offset;
-      break;
-    case "bottom-start":
-      x = targetRect.left;
-      y = targetRect.bottom + offset;
-      break;
-    case "bottom-end":
-      x = targetRect.right - width;
-      y = targetRect.bottom + offset;
-      break;
-    case "left-start":
-      x = targetRect.left - width - offset;
-      y = targetRect.top;
-      break;
-    case "left-end":
-      x = targetRect.left - width - offset;
-      y = targetRect.bottom - height;
-      break;
-    case "right-start":
-      x = targetRect.right + offset;
-      y = targetRect.top;
-      break;
-    case "right-end":
-      x = targetRect.right + offset;
-      y = targetRect.bottom - height;
-      break;
-  }
-  return { toastX: x, toastY: y };
-};
-
-// src/components/toast/useToast.ts
-var useToast = ({ placement, offset, targetRect }) => {
-  const [toastPosition, setToastPosition] = (0, import_react29.useState)({ x: 0, y: 0 });
-  const toastRef = (0, import_react29.useRef)(null);
-  (0, import_react29.useEffect)(() => {
-    if (targetRect && toastRef.current) {
-      const { width, height } = toastRef.current.getBoundingClientRect();
-      const scrollX = window.scrollX;
-      const scrollY = window.scrollY;
-      const adjustedTargetRect = {
-        ...targetRect,
-        left: targetRect.left + scrollX,
-        top: targetRect.top + scrollY,
-        right: targetRect.right + scrollX,
-        bottom: targetRect.bottom + scrollY
-      };
-      const { toastX, toastY } = getToastPosition(placement, adjustedTargetRect, width, height, offset);
-      setToastPosition({ x: toastX, y: toastY });
-    }
-  }, [placement, offset, targetRect]);
-  return { toastPosition, toastRef };
-};
-
-// src/components/toast/toast.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var Toast = (0, import_react30.forwardRef)((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, tooltip2.variantKeys);
-  const { placement = "bottom", offset = 5, classNames, ...tooltipProps } = props;
-  const slots = (0, import_react30.useMemo)(() => tooltip2({ ...variantProps }), [variantProps]);
-  const [targetRect, setTargetRect] = (0, import_react30.useState)(null);
-  const { toastPosition, toastRef } = useToast({ placement, offset, targetRect });
-  const condition = true;
-  const getBaseProps = (0, import_react30.useCallback)(
+var import_react28 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var Toast = (0, import_react28.forwardRef)((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, toast.variantKeys);
+  const { placement, classNames, showIcon = true, showCloseButton = true, onClose, ...toastProps } = props;
+  const slots = (0, import_react28.useMemo)(() => toast({ ...variantProps }), [variantProps]);
+  const toastRef = (0, import_react28.useRef)(null);
+  (0, import_react28.useImperativeHandle)(
+    ref,
     () => ({
-      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
+      getWidth: () => {
+        if (toastRef.current) {
+          return toastRef.current.offsetWidth;
+        }
+      }
     }),
-    [slots, classNames == null ? void 0 : classNames.base]
+    []
   );
-  const getContentProps = (0, import_react30.useCallback)(
+  const getBaseProps = (0, import_react28.useCallback)(
     () => ({
-      className: slots.content({ class: classNames == null ? void 0 : classNames.content })
+      className: slots.base({
+        class: [classNames == null ? void 0 : classNames.base, (placement == null ? void 0 : placement.includes("top")) ? "animate-slideInFromTop" : "animate-slideInFromBottom"]
+      })
     }),
-    [slots, classNames == null ? void 0 : classNames.content]
+    [slots, classNames == null ? void 0 : classNames.base]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { ...getBaseProps(), onPointerLeave: () => setTargetRect(null), onPointerEnter: () => {
-    }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { name: "info-circle", fill: true }),
-      props.content,
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { name: "close", className: "cursor-pointer" })
-    ] }),
-    condition && (0, import_react_dom4.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-        "div",
-        {
-          ref: toastRef,
-          ...getContentProps(),
-          style: {
-            visibility: toastPosition.x !== 0 ? "visible" : "hidden",
-            transform: `translate3d(${toastPosition.x}px, ${toastPosition.y}px, 0)`
-          },
-          children: props.content
-        }
-      ),
-      document.body
-    )
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ref: toastRef, ...getBaseProps(), children: [
+    showIcon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon_default, { name: originalProps.icon || "info-circle", fill: true, className: "mt-[2px]" }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex-1", children: props.content }),
+    showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon_default, { name: "close", className: "cursor-pointer mt-[2px]", onClick: onClose })
   ] });
 });
 Toast.displayName = "Toast";
 var toast_default = Toast;
-var tooltip2 = tv({
+var toast = tv({
   slots: {
     base: [
-      "z-0",
+      "w-[300px]",
       "relative",
       "inline-flex",
-      "items-center",
-      "text-md",
-      "gap-[5px]",
+      "items-start",
       "border",
+      "rounded-md",
+      "text-md",
       "p-[10px]",
-      "rounded-md"
+      "gap-[5px]",
+      "z-0",
+      "transition-all",
+      "duration-300"
     ],
     content: [
       "absolute",
@@ -7571,6 +7430,115 @@ var tooltip2 = tv({
   }
 });
 
+// src/components/toast/use-toast.tsx
+var import_react29 = require("react");
+
+// src/components/toast/toast-utils.ts
+var getToastPosition = (placement, width, offset) => {
+  let top = void 0;
+  let left = void 0;
+  let bottom = void 0;
+  let right = void 0;
+  const viewportWidth = window.innerWidth;
+  switch (placement) {
+    case "top-left":
+      top = offset;
+      left = offset;
+      break;
+    case "top-right":
+      top = offset;
+      right = offset;
+      break;
+    case "top-center":
+      top = offset;
+      left = (viewportWidth - width) / 2;
+      break;
+    case "bottom-left":
+      bottom = offset;
+      left = offset;
+      break;
+    case "bottom-right":
+      bottom = offset;
+      right = offset;
+      break;
+    case "bottom-center":
+      bottom = offset;
+      left = (viewportWidth - width) / 2;
+      break;
+  }
+  return { top, left, bottom, right };
+};
+
+// src/components/toast/use-toast.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var ToastContext = (0, import_react29.createContext)(null);
+var useToast = () => {
+  const context = (0, import_react29.useContext)(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};
+var ToastProvider = ({
+  globalOptions,
+  children
+}) => {
+  const [toasts, setToasts] = (0, import_react29.useState)([]);
+  const [containerStyle, setContainerStyle] = (0, import_react29.useState)({});
+  const toastRef = (0, import_react29.useRef)();
+  const addToast = (0, import_react29.useCallback)((content, options) => {
+    const id = Date.now();
+    const newToast = {
+      id,
+      content,
+      ...options
+    };
+    setToasts((prevToasts) => [...prevToasts, newToast]);
+    setTimeout(() => {
+      setToasts((prevToasts) => prevToasts.filter((toast2) => toast2.id !== id));
+    }, options.duration || 3e3);
+  }, []);
+  const removeToast = (0, import_react29.useCallback)((id) => {
+    setToasts((prevToasts) => prevToasts.filter((toast2) => toast2.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 })
+  };
+  (0, import_react29.useEffect)(() => {
+    var _a;
+    const width = typeof ((_a = toastRef.current) == null ? void 0 : _a.getWidth) === "function" ? toastRef.current.getWidth() : (globalOptions == null ? void 0 : globalOptions.width) || 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__ */ (0, import_jsx_runtime27.jsxs)(ToastContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { id: "deepnoid-toast-container", className: "flex flex-col gap-[10px]", style: containerStyle, children: toasts.map((toast2) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(toast_default, { ref: toastRef, onClose: () => removeToast(toast2.id), ...toast2 }, toast2.id)) })
+  ] });
+};
+
 // ../tailwind-config/src/plugin.ts
 var import_plugin = __toESM(require_plugin());
 
@@ -7914,6 +7882,104 @@ var fontSize = {
   ]
 };
 
+// ../tailwind-config/src/animation/slide.ts
+var sliceAnimation = {
+  slideInFromTop: "slideInFromTop 0.5s ease-out",
+  slideInFromBottom: "slideInFromBottom 0.5s ease-out",
+  slideInFromLeft: "slideInFromLeft 0.5s ease-out",
+  slideInFromRight: "slideInFromRight 0.5s ease-out",
+  slideOutToTop: "slideOutToTop 0.5s ease-in",
+  slideOutToBottom: "slideOutToBottom 0.5s ease-in",
+  slideOutToLeft: "slideOutToLeft 0.5s ease-in",
+  slideOutToRight: "slideOutToRight 0.5s ease-in"
+};
+var sliceKeyframe = {
+  slideInFromTop: {
+    "0%": {
+      transform: "translateY(-10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    }
+  },
+  slideInFromBottom: {
+    "0%": {
+      transform: "translateY(10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    }
+  },
+  slideInFromLeft: {
+    "0%": {
+      transform: "translateX(-10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    }
+  },
+  slideInFromRight: {
+    "0%": {
+      transform: "translateX(10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    }
+  },
+  slideOutToTop: {
+    "0%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateY(-10px)",
+      opacity: "0"
+    }
+  },
+  slideOutToBottom: {
+    "0%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateY(10px)",
+      opacity: "0"
+    }
+  },
+  slideOutToLeft: {
+    "0%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateX(-10px)",
+      opacity: "0"
+    }
+  },
+  slideOutToRight: {
+    "0%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateX(10px)",
+      opacity: "0"
+    }
+  }
+};
+
+// ../tailwind-config/src/animation/index.ts
+var animation = { ...sliceAnimation };
+var keyframes = { ...sliceKeyframe };
+
 // ../../node_modules/flat/index.js
 function isBuffer(obj) {
   return obj && obj.constructor && typeof obj.constructor.isBuffer === "function" && obj.constructor.isBuffer(obj);
@@ -8094,7 +8160,9 @@ var deepnoidUi = (colorChip = {}, defaultTheme = "light") => {
           borderRadius,
           fontSize,
           boxShadow,
-          gap
+          gap,
+          keyframes,
+          animation
         }
       }
     }
@@ -8108,7 +8176,6 @@ var deepnoidUi = (colorChip = {}, defaultTheme = "light") => {
   ButtonGroup,
   Card,
   CheckBox,
-  Dropdown,
   Icon,
   Input,
   List,
@@ -8124,8 +8191,10 @@ var deepnoidUi = (colorChip = {}, defaultTheme = "light") => {
   Tabs,
   Textarea,
   Toast,
+  ToastProvider,
   Tooltip,
   deepnoidUi,
   iconTemplate,
-  tv
+  tv,
+  useToast
 });