@nation-a/ui 0.11.0 → 0.11.1

package/dist/index.cjs

@@ -9772,7 +9772,7 @@ const DEFAULT_MIN_SNAP = 0;
 const DEFAULT_MAX_SNAP = "INNER_HEIGHT";
 const DEFAULT_BACKDROP_OPACITY = 0.5;
 const BottomSheetFrame = React.forwardRef(
-  ({ children, className, initialOpenHeightPx, springs }, ref) => {
+  ({ children, className, initialOpenHeightPx, springs, style: styleProp, css: cssProp }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       animated.section,
       {
@@ -9792,13 +9792,15 @@ const BottomSheetFrame = React.forwardRef(
             zIndex: "modal",
             backgroundColor: "surface.layer_1",
             shadow: "0 -15px 15px 0px rgba(0, 0, 0, 0.05)",
-            willChange: "auto"
+            willChange: "auto",
+            ...cssProp
           }),
           className
         ),
         style: {
           bottom: `calc(${initialOpenHeightPx}px - 100dvh)`,
-          transform: springs.transform
+          transform: springs.transform,
+          ...styleProp
         },
         children
       }
@@ -9867,7 +9869,9 @@ const BottomSheet = (props) => {
     bgBlocking = true,
     backdropOpacity = DEFAULT_BACKDROP_OPACITY,
     hideHandle = false,
-    expendOnContentDrag = false
+    expendOnContentDrag = false,
+    css: cssProp,
+    style: styleProp
   } = props;
   const { bottomSheetRef, contentRef, snapToMin, springs } = useBottomSheet({
     isOpen,
@@ -9883,13 +9887,15 @@ const BottomSheet = (props) => {
   React.useEffect(() => {
     if (snapPercent == null ? void 0 : snapPercent.min) setInitialOpenHeightPx(window.innerHeight * (snapPercent == null ? void 0 : snapPercent.min));
   }, [snapPercent == null ? void 0 : snapPercent.min]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(animated.div, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(animated.div, { className: css$1({ width: "100%" }), children: [
     bgBlocking && /* @__PURE__ */ jsxRuntime.jsx(Backdrop, { isBackdropOpen: isOpen, opacity: backdropOpacity, onBackdropClick: () => snapToMin() }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       BottomSheetFrame,
       {
         ref: bottomSheetRef,
         className,
+        style: styleProp,
+        css: cssProp,
         springs,
         initialOpenHeightPx,
         children: [
@@ -11097,8 +11103,32 @@ const toast = {
     toast.queue = [];
     return queue;
   },
+  /**
+   * ToastProvider가 준비되었는지 확인하는 상태
+   */
+  isReady: false,
+  /**
+   * 대기 중인 토스트 메시지 큐
+   */
+  pendingToasts: [],
+  /**
+   * ToastProvider에서 호출하여 준비 상태를 설정
+   */
+  _setReady: () => {
+    toast.isReady = true;
+    if (toast.pendingToasts.length > 0) {
+      toast.pendingToasts.forEach((args) => {
+        toast.show(args[0], args[1]);
+      });
+      toast.pendingToasts = [];
+    }
+  },
   // render toast
   show: (message, options) => {
+    if (!toast.isReady) {
+      toast.pendingToasts.push([message, options]);
+      return;
+    }
     const toastData = {
       description: message,
       action: (options == null ? void 0 : options.actionLabel) ? {
@@ -11143,6 +11173,11 @@ const ToastProvider = ({ children }) => {
     },
     overlap: true
   });
+  React.useEffect(() => {
+    toast._setReady();
+    return () => {
+    };
+  }, []);
   React.useEffect(() => {
     let currentZIndexCounter = 1300;
     const showToasts = () => {
@@ -11171,13 +11206,14 @@ const ToastProvider = ({ children }) => {
           if (toastData.duration) {
             options.duration = toastData.duration;
           }
-          toaster.create(options);
+          setTimeout(() => {
+            toaster.create(options);
+          }, 0);
         } catch (error) {
           console.error("Error creating toast:", error);
         }
       });
     };
-    showToasts();
     const handleToastQueue = () => showToasts();
     window.addEventListener("toast-queue-updated", handleToastQueue);
     return () => {