@deepnoid/ui 0.0.84 → 0.0.86

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

@@ -0,0 +1,207 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as tailwind_variants_dist_config from 'tailwind-variants/dist/config';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ToastPlacement } from './toast-utils.mjs';
+import { IconName } from '../icon/Icon.mjs';
+import 'react/jsx-runtime';
+import '../icon/template.mjs';
+
+interface Props {
+    icon?: IconName;
+    content?: ReactNode | string;
+    placement?: ToastPlacement;
+    classNames?: Record<string, string>;
+    showIcon?: boolean;
+    showCloseButton?: boolean;
+    onClose?: () => void;
+}
+type ToastProps = Props & ToastVariantProps;
+declare const Toast: react.ForwardRefExoticComponent<Props & ToastVariantProps & react.RefAttributes<any>>;
+
+declare const toast: tailwind_variants.TVReturnType<{
+    color: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+    disableAnimation: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    content: string[];
+}, undefined, {
+    responsiveVariants?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | {
+        color?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
+        disableAnimation?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
+    } | undefined;
+} & tailwind_variants_dist_config.TWMConfig & {
+    twMergeConfig: {
+        classGroups: {
+            fontSize: {
+                text: string[];
+            }[];
+            borderRadius: {
+                rounded: string[];
+            }[];
+            boxShadow: {
+                shadow: string[];
+            }[];
+            padding: {
+                p: string[];
+            }[];
+            gap: {
+                gap: string[];
+            }[];
+        };
+    };
+}, {
+    color: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+    disableAnimation: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    content: string[];
+}, tailwind_variants.TVReturnType<{
+    color: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+    disableAnimation: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    content: string[];
+}, undefined, tailwind_variants_dist_config.TVConfig<{
+    color: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+    disableAnimation: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    color: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+    disableAnimation: {
+        true: {
+            base: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+type ToastVariantProps = VariantProps<typeof toast>;
+type ToastSlots = keyof ReturnType<typeof toast>;
+type ToastReturnType = ReturnType<typeof toast>;
+
+export { type Props, type ToastProps, type ToastReturnType, type ToastSlots, type ToastVariantProps, Toast as default };

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

@@ -3,21 +3,24 @@ import { VariantProps } from 'tailwind-variants';
 import * as tailwind_variants_dist_config from 'tailwind-variants/dist/config';
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { SlotsToClasses } from '../../utils/types.js';
-import { T as ToastPlacement } from '../../toast-utils-c66EY-H0.js';
+import { ToastPlacement } from './toast-utils.js';
+import { IconName } from '../icon/Icon.js';
+import 'react/jsx-runtime';
+import '../icon/template.js';
 
 interface Props {
+    icon?: IconName;
     content?: ReactNode | string;
-    offset?: number;
     placement?: ToastPlacement;
-    classNames?: SlotsToClasses<ToastSlots>;
-    showStatusIcon?: boolean;
+    classNames?: Record<string, string>;
+    showIcon?: boolean;
     showCloseButton?: boolean;
+    onClose?: () => void;
 }
 type ToastProps = Props & ToastVariantProps;
-declare const Toast: react.ForwardRefExoticComponent<Props & ToastVariantProps & react.RefAttributes<HTMLDivElement>>;
+declare const Toast: react.ForwardRefExoticComponent<Props & ToastVariantProps & react.RefAttributes<any>>;
 
-declare const tooltip: tailwind_variants.TVReturnType<{
+declare const toast: tailwind_variants.TVReturnType<{
     color: {
         primary: {
             base: string;
@@ -197,8 +200,8 @@ declare const tooltip: tailwind_variants.TVReturnType<{
         };
     };
 }>, unknown, unknown, undefined>>;
-type ToastVariantProps = VariantProps<typeof tooltip>;
-type ToastSlots = keyof ReturnType<typeof tooltip>;
-type ToastReturnType = ReturnType<typeof tooltip>;
+type ToastVariantProps = VariantProps<typeof toast>;
+type ToastSlots = keyof ReturnType<typeof toast>;
+type ToastReturnType = ReturnType<typeof toast>;
 
 export { type Props, type ToastProps, type ToastReturnType, type ToastSlots, type ToastVariantProps, Toast as default };

package/dist/components/toast/toast.js

@@ -24,8 +24,7 @@ __export(toast_exports, {
   default: () => toast_default
 });
 module.exports = __toCommonJS(toast_exports);
-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");
@@ -66,88 +65,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 = {
@@ -3697,63 +3614,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",

package/dist/components/toast/toast.mjs

@@ -1,9 +1,7 @@
 "use client";
 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";

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

@@ -0,0 +1,2 @@
+
+export {  }

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

@@ -0,0 +1,2 @@
+
+export {  }