@nation-a/ui 0.10.8 → 0.11.1

package/dist/index.cjs

@@ -3557,11 +3557,42 @@ const getPortalNode = (cb) => {
 };
 const subscribe = () => () => {
 };
+function useDebounce(value, delay2) {
+  const [debouncedValue, setDebouncedValue] = React.useState(value);
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay2);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay2]);
+  return debouncedValue;
+}
 const [TabsProvider, useTabsContext] = createContext({
   name: "TabsContext",
   hookName: "useTabsContext",
   providerName: "<TabsProvider />"
 });
+const TabContent = React.forwardRef((props, ref) => {
+  const [contentProps, localProps] = createSplitProps()(props, ["value"]);
+  const tabs = useTabsContext();
+  const renderStrategyProps = useRenderStrategyPropsContext();
+  const presence = usePresence({
+    ...renderStrategyProps,
+    present: useDebounce(tabs.value === props.value, 0),
+    immediate: true
+  });
+  const mergedProps = mergeProps(tabs.getContentProps(contentProps), presence.getPresenceProps(), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(PresenceProvider, { value: presence, children: presence.unmounted ? null : /* @__PURE__ */ jsxRuntime.jsx(ark.div, { ...mergedProps, ref: composeRefs(presence.ref, ref) }) });
+});
+TabContent.displayName = "TabContent";
+const TabIndicator = React.forwardRef((props, ref) => {
+  const tabs = useTabsContext();
+  const mergedProps = mergeProps(tabs.getIndicatorProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(ark.div, { ...mergedProps, ref });
+});
+TabIndicator.displayName = "TabIndicator";
 const TabList = React.forwardRef((props, ref) => {
   const tabs = useTabsContext();
   const mergedProps = mergeProps(tabs.getListProps(), props);
@@ -5961,16 +5992,16 @@ const dialogRecipe = sva({
     }
   }
 });
-const { withRootProvider: withRootProvider$1, withContext: withContext$2 } = createStyleContext(dialogRecipe);
-const Root$2 = withRootProvider$1(DialogRoot);
-const Backdrop$1 = withContext$2(DialogBackdrop, "backdrop");
-const Trigger$1 = withContext$2(DialogTrigger, "trigger");
-const Content$1 = withContext$2(DialogContent, "content");
-const Title = withContext$2(DialogTitle, "title");
-const Description$1 = withContext$2(DialogDescription, "description");
-const Positioner = withContext$2(DialogPositioner, "positioner");
-const Header = withContext$2(ark.header, "header");
-const Footer = withContext$2(
+const { withRootProvider: withRootProvider$2, withContext: withContext$3 } = createStyleContext(dialogRecipe);
+const Root$3 = withRootProvider$2(DialogRoot);
+const Backdrop$1 = withContext$3(DialogBackdrop, "backdrop");
+const Trigger$2 = withContext$3(DialogTrigger, "trigger");
+const Content$2 = withContext$3(DialogContent, "content");
+const Title = withContext$3(DialogTitle, "title");
+const Description$1 = withContext$3(DialogDescription, "description");
+const Positioner = withContext$3(DialogPositioner, "positioner");
+const Header = withContext$3(ark.header, "header");
+const Footer = withContext$3(
   ({ orientation = "horizontal", className, ...props }) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       ark.footer,
@@ -5988,13 +6019,13 @@ const Footer = withContext$2(
   },
   "footer"
 );
-const Body = withContext$2(ark.main, "body");
-const CloseTrigger = withContext$2(DialogCloseTrigger, "closeTrigger");
+const Body = withContext$3(ark.main, "body");
+const CloseTrigger = withContext$3(DialogCloseTrigger, "closeTrigger");
 const Dialog = {
-  Root: Root$2,
+  Root: Root$3,
   Backdrop: Backdrop$1,
-  Trigger: Trigger$1,
-  Content: Content$1,
+  Trigger: Trigger$2,
+  Content: Content$2,
   Title,
   Description: Description$1,
   Positioner,
@@ -9741,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,
       {
@@ -9761,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
       }
@@ -9836,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,
@@ -9852,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: [
@@ -9914,20 +9951,20 @@ const navigationRecipe = sva({
     }
   }
 });
-const { withRootProvider, withContext: withContext$1 } = createStyleContext(navigationRecipe);
-const Root$1 = withRootProvider(TabsRoot);
-const Trigger = withContext$1(
+const { withRootProvider: withRootProvider$1, withContext: withContext$2 } = createStyleContext(navigationRecipe);
+const Root$2 = withRootProvider$1(TabsRoot);
+const Trigger$1 = withContext$2(
   ({ icon, label, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(TabTrigger, { ...props, children: [
     icon,
     label
   ] }),
   "trigger"
 );
-const List = withContext$1(TabList, "list");
+const List$1 = withContext$2(TabList, "list");
 const Navigation = {
-  Root: Root$1,
-  Item: Trigger,
-  List
+  Root: Root$2,
+  Item: Trigger$1,
+  List: List$1
 };
 const tagRecipe = cva({
   base: {
@@ -10448,6 +10485,169 @@ const Textarea = React.forwardRef(
 );
 Textarea.displayName = "Textarea";
 const index = React.memo(Textarea);
+const tabsRecipe = sva({
+  className: "tabs",
+  slots: anatomy$1.keys(),
+  base: {
+    root: {
+      display: "flex",
+      width: "full",
+      flexDirection: "column"
+    },
+    list: {
+      display: "flex",
+      flexShrink: "0",
+      flexDirection: "row",
+      overflowX: "auto",
+      position: "relative",
+      scrollbarWidth: "none",
+      "&::-webkit-scrollbar": {
+        display: "none"
+      }
+    },
+    trigger: {
+      alignItems: "center",
+      color: "content.neutral.subtlest",
+      cursor: "pointer",
+      display: "inline-flex",
+      flexShrink: "0",
+      gap: "2",
+      justifyContent: "center",
+      px: "4",
+      py: "2",
+      textStyle: "label.md",
+      transition: "all",
+      transitionDuration: "normal",
+      transitionTimingFunction: "default",
+      whiteSpace: "nowrap",
+      _disabled: {
+        color: "content.neutral.disabled",
+        cursor: "not-allowed"
+      },
+      _hover: {
+        color: "content.neutral.hovered"
+      },
+      _selected: {
+        color: "content.neutral.bold"
+      }
+    },
+    content: {
+      pt: "4"
+    },
+    indicator: {
+      width: "var(--width)",
+      height: "2px",
+      borderRadius: "xs",
+      background: "content.neutral.bold",
+      bottom: "0px"
+    }
+  },
+  variants: {
+    variant: {
+      line: {
+        list: {
+          borderBottomWidth: "1px",
+          borderColor: "background.neutral.selected"
+        }
+      },
+      enclosed: {
+        list: {
+          p: "16px 0 0 16px",
+          borderRadius: "md",
+          gap: "16"
+        },
+        trigger: {
+          borderRadius: "full",
+          _selected: {
+            background: "background.neutral.selected"
+          }
+        },
+        indicator: {
+          display: "none"
+        }
+      }
+    },
+    fitted: {
+      true: {
+        root: {
+          width: "100%"
+        },
+        list: {
+          width: "100%",
+          p: 1,
+          overflowX: "visible"
+        },
+        trigger: {
+          flex: 1,
+          justifyContent: "center",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        }
+      }
+    },
+    bottomLine: {
+      true: {
+        list: {
+          borderBottomWidth: "1px",
+          borderColor: "background.neutral.selected"
+        }
+      },
+      false: {
+        list: {
+          borderBottomWidth: "0px"
+        }
+      }
+    },
+    shadow: {
+      true: {
+        list: {
+          boxShadow: "0px 8px 12px 0px var(--colors-semantic-shadow-overlay, rgba(0, 0, 0, 0.08))"
+        }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "enclosed",
+      fitted: true,
+      css: {
+        list: {
+          background: "background.neutral.default",
+          borderRadius: "full"
+        }
+      }
+    },
+    {
+      variant: "enclosed",
+      bottomLine: true,
+      css: {
+        list: {
+          borderBottomWidth: "0px"
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: "line",
+    fitted: false,
+    bottomLine: true,
+    shadow: false
+  }
+});
+const { withRootProvider, withContext: withContext$1 } = createStyleContext(tabsRecipe);
+const Root$1 = withRootProvider(TabsRoot);
+const List = withContext$1(TabList, "list");
+const Trigger = withContext$1(TabTrigger, "trigger");
+const Content$1 = withContext$1(TabContent, "content");
+const Indicator = withContext$1(TabIndicator, "indicator");
+const Tabs = Object.assign(Root$1, {
+  Root: Root$1,
+  List,
+  Trigger,
+  Content: Content$1,
+  Indicator
+});
 function definePreset(preset2) {
   return preset2;
 }
@@ -10903,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) ? {
@@ -10949,6 +11173,11 @@ const ToastProvider = ({ children }) => {
     },
     overlap: true
   });
+  React.useEffect(() => {
+    toast._setReady();
+    return () => {
+    };
+  }, []);
   React.useEffect(() => {
     let currentZIndexCounter = 1300;
     const showToasts = () => {
@@ -10977,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 () => {
@@ -11027,6 +11257,7 @@ exports.Navigation = Navigation;
 exports.Portal = Portal;
 exports.Spinner = Spinner;
 exports.Stack = Stack2;
+exports.Tabs = Tabs;
 exports.Tag = index$2;
 exports.Text = Text;
 exports.TextArea = index;