@deepnoid/ui 0.0.84 → 0.0.86

package/dist/components/textarea/textarea.test.mjs

@@ -1,12 +1,12 @@
 "use client";
-import "../../chunk-ILMIS63S.mjs";
+import "../../chunk-H7BLXC5M.mjs";
 import {
   textarea_default
 } from "../../chunk-WOX3SLJB.mjs";
 import {
   render,
   waitForWrapper
-} from "../../chunk-NTTHTGDK.mjs";
+} from "../../chunk-FNPWLOGV.mjs";
 import "../../chunk-IZ6II3QA.mjs";
 
 // src/components/textarea/textarea.test.tsx

package/dist/components/toast/index.d.mts

@@ -0,0 +1,9 @@
+export { default as Toast, ToastProps } from './toast.mjs';
+export { ToastProvider, useToast } from './use-toast.mjs';
+import 'tailwind-variants';
+import 'tailwind-variants/dist/config';
+import 'react';
+import './toast-utils.mjs';
+import '../icon/Icon.mjs';
+import 'react/jsx-runtime';
+import '../icon/template.mjs';

package/dist/components/toast/index.d.ts

@@ -0,0 +1,9 @@
+export { default as Toast, ToastProps } from './toast.js';
+export { ToastProvider, useToast } from './use-toast.js';
+import 'tailwind-variants';
+import 'tailwind-variants/dist/config';
+import 'react';
+import './toast-utils.js';
+import '../icon/Icon.js';
+import 'react/jsx-runtime';
+import '../icon/template.js';

package/dist/components/toast/index.js

@@ -21,13 +21,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/toast/index.ts
 var toast_exports = {};
 __export(toast_exports, {
-  Toast: () => toast_default
+  Toast: () => toast_default,
+  ToastProvider: () => ToastProvider,
+  useToast: () => useToast
 });
 module.exports = __toCommonJS(toast_exports);
 
 // src/components/toast/toast.tsx
-var import_react2 = require("react");
-var import_react_dom = require("react-dom");
+var import_react = require("react");
 
 // src/utils/tailwind-variants.ts
 var import_tailwind_variants = require("tailwind-variants");
@@ -68,88 +69,6 @@ var mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
   }
 };
 
-// src/components/toast/useToast.ts
-var import_react = 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_react.useState)({ x: 0, y: 0 });
-  const toastRef = (0, import_react.useRef)(null);
-  (0, import_react.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/icon/template.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var template = {
@@ -3699,63 +3618,53 @@ var Icon_default = Icon;
 
 // src/components/toast/toast.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var Toast = (0, import_react2.forwardRef)((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, tooltip.variantKeys);
-  const { placement = "bottom", offset = 5, classNames, ...tooltipProps } = props;
-  const slots = (0, import_react2.useMemo)(() => tooltip({ ...variantProps }), [variantProps]);
-  const [targetRect, setTargetRect] = (0, import_react2.useState)(null);
-  const { toastPosition, toastRef } = useToast({ placement, offset, targetRect });
-  const condition = true;
-  const getBaseProps = (0, import_react2.useCallback)(
+var Toast = (0, import_react.forwardRef)((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, toast.variantKeys);
+  const { placement, classNames, showIcon = true, showCloseButton = true, onClose, ...toastProps } = props;
+  const slots = (0, import_react.useMemo)(() => toast({ ...variantProps }), [variantProps]);
+  const toastRef = (0, import_react.useRef)(null);
+  (0, import_react.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_react2.useCallback)(
+  const getBaseProps = (0, import_react.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_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ...getBaseProps(), onPointerLeave: () => setTargetRect(null), onPointerEnter: () => {
-    }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: "info-circle", fill: true }),
-      props.content,
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: "close", className: "cursor-pointer" })
-    ] }),
-    condition && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsxs)("div", { ref: toastRef, ...getBaseProps(), children: [
+    showIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: originalProps.icon || "info-circle", fill: true, className: "mt-[2px]" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex-1", children: props.content }),
+    showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: "close", className: "cursor-pointer mt-[2px]", onClick: onClose })
   ] });
 });
 Toast.displayName = "Toast";
 var toast_default = Toast;
-var tooltip = 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",
@@ -3804,7 +3713,118 @@ var tooltip = tv({
     disableAnimation: false
   }
 });
+
+// src/components/toast/use-toast.tsx
+var import_react2 = 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_runtime4 = require("react/jsx-runtime");
+var ToastContext = (0, import_react2.createContext)(null);
+var useToast = () => {
+  const context = (0, import_react2.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_react2.useState)([]);
+  const [containerStyle, setContainerStyle] = (0, import_react2.useState)({});
+  const toastRef = (0, import_react2.useRef)();
+  const addToast = (0, import_react2.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_react2.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_react2.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_runtime4.jsxs)(ToastContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { id: "deepnoid-toast-container", className: "flex flex-col gap-[10px]", style: containerStyle, children: toasts.map((toast2) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(toast_default, { ref: toastRef, onClose: () => removeToast(toast2.id), ...toast2 }, toast2.id)) })
+  ] });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Toast
+  Toast,
+  ToastProvider,
+  useToast
 });

package/dist/components/toast/index.mjs

@@ -1,10 +1,13 @@
 "use client";
-import "../../chunk-W7ABNK3K.mjs";
+import "../../chunk-LUWGOKLG.mjs";
+import {
+  ToastProvider,
+  useToast
+} from "../../chunk-FRIK4CS7.mjs";
+import "../../chunk-ZOTHPHXA.mjs";
 import {
   toast_default
-} from "../../chunk-XTJL67KM.mjs";
-import "../../chunk-5T5F5WVS.mjs";
-import "../../chunk-SDNTEP5C.mjs";
+} from "../../chunk-HH2LF2SU.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-AHORH5PH.mjs";
 import "../../chunk-QURXBWKK.mjs";
@@ -12,5 +15,7 @@ import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-J725QONZ.mjs";
 import "../../chunk-IZ6II3QA.mjs";
 export {
-  toast_default as Toast
+  toast_default as Toast,
+  ToastProvider,
+  useToast
 };

package/dist/components/toast/toast-utils.d.mts

@@ -0,0 +1,9 @@
+type ToastPlacement = "top-left" | "top-right" | "top-center" | "bottom-left" | "bottom-right" | "bottom-center";
+declare const getToastPosition: (placement: ToastPlacement, width: number, offset: number) => {
+    top: number | undefined;
+    left: number | undefined;
+    bottom: number | undefined;
+    right: number | undefined;
+};
+
+export { type ToastPlacement, getToastPosition };

package/dist/components/toast/toast-utils.d.ts

@@ -0,0 +1,9 @@
+type ToastPlacement = "top-left" | "top-right" | "top-center" | "bottom-left" | "bottom-right" | "bottom-center";
+declare const getToastPosition: (placement: ToastPlacement, width: number, offset: number) => {
+    top: number | undefined;
+    left: number | undefined;
+    bottom: number | undefined;
+    right: number | undefined;
+};
+
+export { type ToastPlacement, getToastPosition };

package/dist/components/toast/toast-utils.js

@@ -24,59 +24,39 @@ __export(toast_utils_exports, {
   getToastPosition: () => getToastPosition
 });
 module.exports = __toCommonJS(toast_utils_exports);
-var getToastPosition = (placement, targetRect, width, height, offset) => {
-  let x = 0, y = 0;
+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":
-      x = targetRect.left + targetRect.width / 2 - width / 2;
-      y = targetRect.top - height - offset;
+    case "top-left":
+      top = offset;
+      left = offset;
       break;
-    case "left":
-      x = targetRect.left - width - offset;
-      y = targetRect.top + targetRect.height / 2 - height / 2;
+    case "top-right":
+      top = offset;
+      right = offset;
       break;
-    case "right":
-      x = targetRect.right + offset;
-      y = targetRect.top + targetRect.height / 2 - height / 2;
+    case "top-center":
+      top = offset;
+      left = (viewportWidth - width) / 2;
       break;
-    case "bottom":
-      x = targetRect.left + targetRect.width / 2 - width / 2;
-      y = targetRect.bottom + offset;
+    case "bottom-left":
+      bottom = offset;
+      left = offset;
       break;
-    case "top-start":
-      x = targetRect.left;
-      y = targetRect.top - height - offset;
+    case "bottom-right":
+      bottom = offset;
+      right = 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;
+    case "bottom-center":
+      bottom = offset;
+      left = (viewportWidth - width) / 2;
       break;
   }
-  return { toastX: x, toastY: y };
+  return { top, left, bottom, right };
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/components/toast/toast-utils.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   getToastPosition
-} from "../../chunk-SDNTEP5C.mjs";
+} from "../../chunk-ZOTHPHXA.mjs";
 import "../../chunk-IZ6II3QA.mjs";
 export {
   getToastPosition