@deepnoid/ui 0.0.83 → 0.0.86

package/dist/{chunk-GJKNTX2T.mjs → chunk-AHORH5PH.mjs}

@@ -1,10 +1,11 @@
 "use client";
 import {
   template
-} from "./chunk-TLYAFXE2.mjs";
+} from "./chunk-QURXBWKK.mjs";
 
 // src/components/icon/Icon.tsx
 import { jsx } from "react/jsx-runtime";
+var iconTemplate = template;
 var Icon = ({ name, size = "md", fill = false, className, onClick, ...props }) => {
   const SVGIcon = template[name];
   const getInputIconSize = (size2) => {
@@ -12,12 +13,12 @@ var Icon = ({ name, size = "md", fill = false, className, onClick, ...props }) =
       case "sm":
         return "size-[15px]";
       case "md":
-        return "size-[17px]";
+        return "size-[17px] stroke-[1.25px]";
       case "lg":
-        return "size-[20px]";
+        return "size-[20px] stroke-[1.5px]";
     }
   };
-  return /* @__PURE__ */ jsx("div", { onClick, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "w-fit h-fit", onClick, children: /* @__PURE__ */ jsx(
     SVGIcon,
     {
       fill,
@@ -29,5 +30,6 @@ var Icon = ({ name, size = "md", fill = false, className, onClick, ...props }) =
 var Icon_default = Icon;
 
 export {
+  iconTemplate,
   Icon_default
 };

package/dist/{chunk-7LYJAJIS.mjs → chunk-EWKYBS7I.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-66WCZEEU.mjs";
 import {
   Icon_default
-} from "./chunk-GJKNTX2T.mjs";
+} from "./chunk-AHORH5PH.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
@@ -150,15 +150,22 @@ var modal_default = Modal;
 var modal = tv({
   slots: {
     backdrop: ["relative w-screen h-screen fixed inset-0 bg-black/60", "z-[9999]"],
-    modalWrapper: ["group", "absolute", "top-1/2", "-translate-y-1/2", "left-1/2", "-translate-x-1/2"],
-    icon: ["absolute", "top-[20px]", "left-1/2", "-translate-x-1/2", "z-10"],
+    modalWrapper: ["group/modal", "absolute", "top-1/2", "-translate-y-1/2", "left-1/2", "-translate-x-1/2"],
+    icon: [
+      "absolute",
+      "top-[20px]",
+      "left-1/2",
+      "-translate-x-1/2",
+      "z-10",
+      "group-data-[modal-icon-visibility=true]/modal:top-[80px]"
+    ],
     closeIcon: [
       "absolute",
       "top-[20px]",
       "right-[20px]",
       "cursor-pointer",
       "z-10",
-      "group-data-[icon-visibility=true]:top-[80px]"
+      "group-data-[modal-icon-visibility=true]/modal:top-[80px]"
     ],
     titleWrapper: ["relative", "flex", "flex-col", "gap-[10px]"],
     title: "text-h5 text-center text-foreground",
@@ -170,8 +177,8 @@ var modal = tv({
       "bg-background",
       "shadow-drop shadow-foreground/20 rounded-xxlg",
       "overflow-hidden",
-      "group-data-[icon-visibility=true]:mt-[60px]",
-      "group-data-[icon-visibility=true]:pt-[60px]"
+      "group-data-[modal-icon-visibility=true]/modal:mt-[60px]",
+      "group-data-[modal-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]"],

package/dist/chunk-FRIK4CS7.mjs

@@ -0,0 +1,83 @@
+"use client";
+import {
+  getToastPosition
+} from "./chunk-ZOTHPHXA.mjs";
+import {
+  toast_default
+} from "./chunk-HH2LF2SU.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();
+  const addToast = useCallback((content, options) => {
+    const id = Date.now();
+    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 = 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__ */ 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-HH2LF2SU.mjs

@@ -0,0 +1,113 @@
+"use client";
+import {
+  Icon_default
+} from "./chunk-AHORH5PH.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-J725QONZ.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 { 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, (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", 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: [
+      "w-[300px]",
+      "relative",
+      "inline-flex",
+      "items-start",
+      "border",
+      "rounded-md",
+      "text-md",
+      "p-[10px]",
+      "gap-[5px]",
+      "z-0",
+      "transition-all",
+      "duration-300"
+    ],
+    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-H737LHAY.mjs → chunk-KA4L5SCT.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-GJKNTX2T.mjs";
+} from "./chunk-AHORH5PH.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
@@ -131,18 +131,18 @@ Input.displayName = "Input";
 var input_default = Input;
 var inputStyle = tv({
   slots: {
-    base: ["group", "flex", "flex-col"],
+    base: ["group/input", "flex", "flex-col"],
     label: ["flex", "items-center"],
     innerWrapper: ["flex", "flex-col"],
     inputWrapper: [
       "flex",
       "items-center",
-      "group-has-[p]:border-danger-main",
-      "group-has-[p]:bg-danger-soft",
+      "group-has-[p]/input:border-danger-main",
+      "group-has-[p]/input:bg-danger-soft",
       "transition duration-200"
     ],
     input: ["w-full", "h-full", "bg-transparent", "placeholder:text-neutral-main", "focus-visible:outline-none"],
-    content: ["flex", "items-center", "group-has-[p]:text-danger-main", "select-none"],
+    content: ["flex", "items-center", "group-has-[p]/input:text-danger-main", "select-none"],
     errorMessage: ["text-danger-main"]
   },
   variants: {
@@ -183,19 +183,19 @@ var inputStyle = tv({
     size: {
       sm: {
         base: ["text-sm", "gap-[6px]"],
-        innerWrapper: ["group-has-[p]:gap-[6px]"],
+        innerWrapper: ["group-has-[p]/input:gap-[6px]"],
         inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[6px]", "py-[4.5px]", "gap-[6px]"],
         errorMessage: ["text-sm"]
       },
       md: {
         base: ["text-md", "gap-[8px]"],
-        innerWrapper: ["group-has-[p]:gap-[8px]"],
+        innerWrapper: ["group-has-[p]/input:gap-[8px]"],
         inputWrapper: ["w-[240px]", "h-[30px]", "rounded-md", "px-[8px]", "py-[6.5px]", "gap-[8px]"],
         errorMessage: ["text-md"]
       },
       lg: {
         base: ["text-lg", "gap-[10px]"],
-        innerWrapper: ["group-has-[p]:gap-[10px]"],
+        innerWrapper: ["group-has-[p]/input:gap-[10px]"],
         inputWrapper: ["w-[240px]", "h-[36px]", "rounded-lg", "px-[10px]", "py-[8px]", "gap-[10px]"],
         errorMessage: ["text-lg"]
       }

package/dist/{chunk-BHSCW5D6.mjs → chunk-LGELMZCN.mjs}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-27Y6K5NK.mjs";
 import {
   Icon_default
-} from "./chunk-GJKNTX2T.mjs";
+} from "./chunk-AHORH5PH.mjs";
 
 // src/components/table/table-body.tsx
 import React, { useState, useCallback, useEffect } from "react";

package/dist/{chunk-6U736HAX.mjs → chunk-PSXPOYLX.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-PUFNT5LS.mjs";
 import {
   table_body_default
-} from "./chunk-BHSCW5D6.mjs";
+} from "./chunk-LGELMZCN.mjs";
 import {
   clsx
 } from "./chunk-27Y6K5NK.mjs";

package/dist/{chunk-WIKB37T7.mjs → chunk-QCOPD2HG.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-GJKNTX2T.mjs";
+} from "./chunk-AHORH5PH.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";