@akanjs/ui 0.9.34 → 0.9.36

package/Input.d.ts

@@ -23,7 +23,7 @@ export declare const Input: {
     Checkbox: ({ checked, onChange, className, ...rest }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
 };
 export type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "type" | "onChange" | "onPressEnter"> & {
-    inputRef?: RefObject<HTMLTextAreaElement>;
+    inputRef?: RefObject<HTMLTextAreaElement | null>;
     value: string;
     nullable?: boolean;
     inputClassName?: string;

package/Load/Units.d.ts

@@ -1,10 +1,10 @@
 import { DataList } from "@akanjs/base";
 import { ClientInit } from "@akanjs/signal";
-import { MutableRefObject, ReactNode } from "react";
+import { ReactNode, RefObject } from "react";
 interface DefaultProps<L extends {
     id: string;
 }> {
-    containerRef?: MutableRefObject<HTMLDivElement | null>;
+    containerRef?: RefObject<HTMLDivElement>;
     className?: string;
     style?: React.CSSProperties;
     noDiv?: boolean;

package/System/Client.d.ts

@@ -1,7 +1,6 @@
 import type { BaseClientEnv } from "@akanjs/base";
-import { type Location } from "@akanjs/client";
-import { AnimatedComponent } from "@react-spring/web";
-import { ExoticComponent, HTMLAttributes, MutableRefObject } from "react";
+import { type Location, type TransitionStyle } from "@akanjs/client";
+import { HTMLAttributes, RefObject } from "react";
 export declare const Client: {
     (): import("react/jsx-runtime").JSX.Element;
     Wrapper: ({ children, theme }: ClientWrapperProps) => import("react/jsx-runtime").JSX.Element;
@@ -16,10 +15,10 @@ interface ClientWrapperProps {
 export declare const ClientWrapper: ({ children, theme }: ClientWrapperProps) => import("react/jsx-runtime").JSX.Element;
 interface ClientPathWrapperProps extends Omit<HTMLAttributes<HTMLDivElement>, "style"> {
     bind?: () => any;
-    wrapperRef?: MutableRefObject<HTMLDivElement | null> | null;
+    wrapperRef?: RefObject<HTMLDivElement> | null;
     pageType?: "current" | "prev" | "cached";
     location?: Location;
-    style?: NonNullable<AnimatedComponent<ExoticComponent>["defaultProps"]>["style"];
+    style?: TransitionStyle;
     prefix?: string;
     children?: any;
     layoutStyle?: "web" | "mobile";

package/animated.d.ts

@@ -0,0 +1,5 @@
+export declare const animated: {
+    div: import("react-spring").AnimatedComponent<"div">;
+    g: import("react-spring").AnimatedComponent<"g">;
+    progress: import("react-spring").AnimatedComponent<"progress">;
+};

package/cjs/BottomSheet.js

@@ -24,6 +24,7 @@ module.exports = __toCommonJS(BottomSheet_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_client = require("@akanjs/client");
 var import_store = require("@akanjs/store");
+var import_ui = require("@akanjs/ui");
 var import_react = require("@use-gesture/react");
 var import_react2 = require("react");
 var import_bi = require("react-icons/bi");
@@ -69,7 +70,7 @@ const BottomSheet = (0, import_react2.forwardRef)(
     }, [open]);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_spring.a.div,
+        import_ui.animated.div,
         {
           style: {
             opacity
@@ -82,7 +83,7 @@ const BottomSheet = (0, import_react2.forwardRef)(
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        import_react_spring.a.div,
+        import_ui.animated.div,
         {
           ref,
           style: { y, paddingTop: type === "full" ? pageState.topSafeArea : 0 },
@@ -91,7 +92,7 @@ const BottomSheet = (0, import_react2.forwardRef)(
             "h-[100vh]": type === "full"
           }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex h-8 w-full items-start justify-center pt-2", children: type === "half" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_spring.a.div, { ...bind(), className: "flex h-8 w-full items-start justify-center pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-2 w-32 rounded-full bg-gray-300" }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex h-8 w-full items-start justify-center pt-2", children: type === "half" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.animated.div, { ...bind(), className: "flex h-8 w-full items-start justify-center pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-2 w-32 rounded-full bg-gray-300" }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "button",
               {
                 onClick: () => void closeModal(),

package/cjs/Dialog/Modal.js

@@ -34,6 +34,7 @@ module.exports = __toCommonJS(Modal_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_client = require("@akanjs/client");
 var import_next = require("@akanjs/next");
+var import_ui = require("@akanjs/ui");
 var Dialog = __toESM(require("@radix-ui/react-dialog"));
 var import_react = require("@use-gesture/react");
 var import_react2 = require("react");
@@ -47,7 +48,7 @@ const interpolate = (o, i, t) => {
 };
 const Modal = ({ className, bodyClassName, confirmClose, children, onCancel }) => {
   const { open, setOpen, title, action } = (0, import_react2.useContext)(import_context.DialogContext);
-  const openRef = (0, import_react2.useRef)(null);
+  const openRef = (0, import_react2.useRef)(open);
   const { l } = (0, import_next.usePage)();
   const ref = (0, import_react2.useRef)(null);
   const [{ translate }, api] = (0, import_react_spring.useSpring)(() => ({ translate: 1 }));
@@ -117,7 +118,7 @@ const Modal = ({ className, bodyClassName, confirmClose, children, onCancel }) =
         className: "fixed top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center",
         asChild: true,
         forceMount: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "z-10", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_spring.a.div, { ref, style: { translateY, opacity }, children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "z-10", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.animated.div, { ref, style: { translateY, opacity }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "button",
             {
@@ -135,7 +136,7 @@ const Modal = ({ className, bodyClassName, confirmClose, children, onCancel }) =
               ),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog.Title, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                  import_react_spring.a.div,
+                  import_ui.animated.div,
                   {
                     ...bind(),
                     className: "animate-fadeIn relative z-10 flex w-full cursor-pointer touch-pan-y flex-col items-center justify-center px-4 pt-1",

package/cjs/DragAction.js

@@ -23,6 +23,7 @@ __export(DragAction_exports, {
 module.exports = __toCommonJS(DragAction_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_client = require("@akanjs/client");
+var import_ui = require("@akanjs/ui");
 var import_react = require("@use-gesture/react");
 var import_react2 = require("react");
 var import_react_spring = require("react-spring");
@@ -81,13 +82,13 @@ const DragAction = ({ className, children, onClick, onLeft, onRight }) => {
 };
 const Body = ({ children }) => {
   const { bind, x, onClick } = (0, import_react2.useContext)(DragActionContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_spring.animated.div, { className: "cursor-pointer", ...bind(), style: { x, touchAction: "pan-y" }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.animated.div, { className: "cursor-pointer", ...bind(), style: { x, touchAction: "pan-y" }, children });
 };
 DragAction.Body = Body;
 const Left = ({ children }) => {
   const { bind, leftOpacity, leftWidth } = (0, import_react2.useContext)(DragActionContext);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react_spring.animated.div,
+    import_ui.animated.div,
     {
       ...bind(),
       style: { touchAction: "pan-y", opacity: leftOpacity, width: leftWidth },
@@ -100,7 +101,7 @@ DragAction.Left = Left;
 const Right = ({ children }) => {
   const { bind, rightOpacity, rightWidth } = (0, import_react2.useContext)(DragActionContext);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react_spring.animated.div,
+    import_ui.animated.div,
     {
       ...bind(),
       style: { opacity: rightOpacity, width: rightWidth },

package/cjs/DraggableList.js

@@ -33,6 +33,7 @@ __export(DraggableList_exports, {
 module.exports = __toCommonJS(DraggableList_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_client = require("@akanjs/client");
+var import_ui = require("@akanjs/ui");
 var import_web = require("@react-spring/web");
 var import_react = require("@use-gesture/react");
 var import_lodash = __toESM(require("lodash.clamp"));
@@ -93,7 +94,7 @@ const DragList = ({ className, mode = "vertical", children, onChange, onRemove }
     }
   });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_client.clsx)(`flex gap-0`, { "flex-col": mode === "vertical" }, className), children: springs.map(({ zIndex, shadow, movement, scale }, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_web.animated.div,
+    import_ui.animated.div,
     {
       ref: (el) => {
         refs.current[i] = el;

package/cjs/KeyboardAvoiding.js

@@ -24,6 +24,7 @@ module.exports = __toCommonJS(KeyboardAvoiding_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_client = require("@akanjs/client");
 var import_store = require("@akanjs/store");
+var import_ui = require("@akanjs/ui");
 var import_react = require("react");
 var import_react_spring = require("react-spring");
 const KeyboardAvoiding = ({ children, className }) => {
@@ -62,5 +63,5 @@ const KeyboardAvoiding = ({ children, className }) => {
       defaultHeight.current = heightNum;
     }
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_spring.a.div, { className: "h-auto", style: { marginBottom: height }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.animated.div, { className: "h-auto", style: { marginBottom: height }, children });
 };

package/cjs/Layout/Sider.js

@@ -23,30 +23,66 @@ __export(Sider_exports, {
 module.exports = __toCommonJS(Sider_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_client = require("@akanjs/client");
+var import_store = require("@akanjs/store");
+var import_ui = require("@akanjs/ui");
+var import_react = require("react");
 var import_ai = require("react-icons/ai");
 var import_bi = require("react-icons/bi");
+var import_react_spring = require("react-spring");
 const Sider = ({ className, bgClassName, children }) => {
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const path = import_store.st.use.path();
+  (0, import_react.useEffect)(() => {
+    setIsOpen(false);
+  }, [path]);
+  const siderAnimation = (0, import_react_spring.useSpring)({
+    translateX: isOpen ? "0%" : "-100%",
+    config: { tension: 300, friction: 30 }
+  });
+  const overlayAnimation = (0, import_react_spring.useSpring)({
+    opacity: isOpen ? 1 : 0,
+    config: { tension: 300, friction: 30 }
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "drawer-content", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: "sider", className: "btn btn-ghost", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineMenu, {}) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "drawer drawer-start fixed", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { id: "sider", type: "checkbox", className: "drawer-toggle" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "drawer-side", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: "sider", className: (0, import_client.clsx)("drawer-overlay", bgClassName) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("bg-base-200 text-base-content h-full w-3/4 p-4 md:w-80", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        className: "btn btn-ghost",
+        onClick: () => {
+          setIsOpen(true);
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineMenu, {})
+      }
+    ),
+    isOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ui.animated.div,
+      {
+        style: overlayAnimation,
+        className: (0, import_client.clsx)("fixed inset-0 z-40 h-screen w-screen", bgClassName),
+        onClick: () => {
+          setIsOpen(false);
+        }
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_ui.animated.div,
+      {
+        style: siderAnimation,
+        className: (0, import_client.clsx)("bg-base-200 text-base-content fixed top-0 left-0 z-50 h-full w-3/4 p-4 md:w-80", className),
+        children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "button",
             {
               className: "absolute top-4 left-4 text-lg",
-              onClick: (e) => {
-                e.preventDefault();
-                document.getElementById("sider")?.click();
+              onClick: () => {
+                setIsOpen(false);
               },
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_bi.BiX, {})
             }
           ),
           children
-        ] })
-      ] })
-    ] })
+        ]
+      }
+    )
   ] });
 };

package/cjs/Layout/Template.js

@@ -23,5 +23,5 @@ module.exports = __toCommonJS(Template_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_client = require("@akanjs/client");
 const Template = ({ className, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_client.clsx)("flex w-full max-w-[100vw] flex-col gap-6 p-2", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_client.clsx)("flex w-full flex-col gap-6 p-2", className), children });
 };

package/cjs/Load/PageCSR.js

@@ -23,21 +23,22 @@ __export(PageCSR_exports, {
 module.exports = __toCommonJS(PageCSR_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-const setFetchedData = (target, data) => {
-  Reflect.defineMetadata("fetchedData", data, target);
+const setFetchedData = (target, data, pathname) => {
+  const fetchedData = Reflect.getMetadata("fetchedData", target) ?? {};
+  Reflect.defineMetadata("fetchedData", { ...fetchedData, [pathname]: data }, target);
 };
-const getFetchedData = (target) => {
-  const data = Reflect.getMetadata("fetchedData", target);
-  return data ?? null;
+const getFetchedData = (target, pathname) => {
+  const data = Reflect.getMetadata("fetchedData", target) ?? {};
+  return data[pathname] ?? null;
 };
 const PageCSR = ({ of, loader, render, loading, noCache = false }) => {
   const fetchData = (0, import_react.useMemo)(() => {
-    const cachedData = getFetchedData(of);
+    const cachedData = getFetchedData(of, location.pathname);
     if (!noCache && cachedData)
       return cachedData;
     else
       return loader();
-  }, []);
+  }, [location.pathname]);
   const [fetchState, setFetchState] = (0, import_react.useState)(
     fetchData instanceof Promise ? { fulfilled: false, value: null } : { fulfilled: true, value: fetchData }
   );
@@ -48,7 +49,7 @@ const PageCSR = ({ of, loader, render, loading, noCache = false }) => {
       try {
         const ret = await fetchData;
         setFetchState({ fulfilled: true, value: ret });
-        setFetchedData(of, ret);
+        setFetchedData(of, ret, location.pathname);
       } catch (err) {
       }
     })();

package/cjs/Loading/ProgressBar.js

@@ -23,8 +23,9 @@ __export(ProgressBar_exports, {
 module.exports = __toCommonJS(ProgressBar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_client = require("@akanjs/client");
+var import_ui = require("@akanjs/ui");
 var import_react_spring = require("react-spring");
 const ProgressBar = ({ className, value, max }) => {
   const progress = (0, import_react_spring.useSpring)({ value: 0, to: { value } });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_spring.a.progress, { className: (0, import_client.clsx)("progress w-full", className), value: progress.value, max });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.animated.progress, { className: (0, import_client.clsx)("progress w-full", className), value: progress.value, max });
 };

package/cjs/Popconfirm.js

@@ -27,6 +27,7 @@ var import_next = require("@akanjs/next");
 var import_web = require("@react-spring/web");
 var import_react = require("react");
 var import_bi = require("react-icons/bi");
+var import_animated = require("./animated");
 //! 디자인 수정, 테마 적용 안됨
 const Popconfirm = ({
   title,
@@ -81,7 +82,7 @@ const Popconfirm = ({
         }
       ),
       isConfirming && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        import_web.animated.div,
+        import_animated.animated.div,
         {
           className: "popconfirm border-base-300 bg-base-100 absolute -right-2 bottom-0 z-10 translate-y-[106%] rounded-lg border p-4 shadow-xl",
           style: popconfirmProps,

package/cjs/ScreenNavigator.js

@@ -23,6 +23,7 @@ __export(ScreenNavigator_exports, {
 module.exports = __toCommonJS(ScreenNavigator_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_client = require("@akanjs/client");
+var import_ui = require("@akanjs/ui");
 var import_react = require("@use-gesture/react");
 var import_react2 = require("react");
 var import_react_spring = require("react-spring");
@@ -100,7 +101,7 @@ const ScreenNavigator = ({
       setCurrentMenu(menus[1]);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScreenNavigatorContext.Provider, { value: { bind, xValue, onClickMenu, menus, currentMenu, setMenu }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_spring.a.div, { ...bind(), className: "flex h-full w-[200vw] overflow-x-scroll", style: { x: xValue }, ref, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScreenNavigatorContext.Provider, { value: { bind, xValue, onClickMenu, menus, currentMenu, setMenu }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.animated.div, { ...bind(), className: "flex h-full w-[200vw] overflow-x-scroll", style: { x: xValue }, ref, children }) });
 };
 const NavbarItem = ({ menu, children, className }) => {
   const { onClickMenu, currentMenu } = (0, import_react2.useContext)(ScreenNavigatorContext);

package/cjs/System/CSR.js

@@ -26,7 +26,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_client = require("@akanjs/client");
 var import_next = require("@akanjs/next");
 var import_store = require("@akanjs/store");
-var import_web = require("@react-spring/web");
+var import_ui = require("@akanjs/ui");
 var import_react = require("react");
 var import_react_dom = require("react-dom");
 var import_FontFace = require("../FontFace");
@@ -151,7 +151,7 @@ const CSRWrapper = ({
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "pageContainers", className: "isolate" }),
           csrLoaded ? pathRoutes.map((pathRoute) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CSRPageContainer, { pathRoute, prefix, layoutStyle }, pathRoute.path)) : null,
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_web.a.div,
+            import_ui.animated.div,
             {
               id: "topSafeArea",
               className: (0, import_client.clsx)("bg-base-100 fixed inset-x-0 top-0", {}),
@@ -160,7 +160,7 @@ const CSRWrapper = ({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_web.a.div,
+            import_ui.animated.div,
             {
               id: "topInsetContainer",
               className: (0, import_client.clsx)("bg-base-100 fixed inset-x-0 isolate", {}),
@@ -168,7 +168,7 @@ const CSRWrapper = ({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_web.a.div,
+            import_ui.animated.div,
             {
               id: "topLeftActionContainer",
               className: (0, import_client.clsx)("aspect-1 absolute top-0 isolate flex items-center justify-center", {}),
@@ -176,7 +176,7 @@ const CSRWrapper = ({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_web.a.div,
+            import_ui.animated.div,
             {
               id: "bottomInsetContainer",
               className: (0, import_client.clsx)("fixed inset-x-0 isolate", {}),
@@ -184,7 +184,7 @@ const CSRWrapper = ({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_web.a.div,
+            import_ui.animated.div,
             {
               id: "bottomSafeArea",
               className: "bg-base-100 fixed inset-x-0",
@@ -305,7 +305,7 @@ const CSRPageContainer = ({ pathRoute, prefix, layoutStyle }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     (0, import_react_dom.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_web.a.div,
+        import_ui.animated.div,
         {
           id: `pageContainer-${pathRoute.path}`,
           style: { ...page?.containerStyle ?? {}, zIndex },

package/cjs/System/Client.js

@@ -33,7 +33,7 @@ var import_common = require("@akanjs/common");
 var import_next = require("@akanjs/next");
 var import_signal = require("@akanjs/signal");
 var import_store = require("@akanjs/store");
-var import_web = require("@react-spring/web");
+var import_ui = require("@akanjs/ui");
 var import_navigation = require("next/navigation");
 var import_next_themes = require("next-themes");
 var import_react = require("react");
@@ -87,7 +87,7 @@ const ClientPathWrapper = ({
         setGestureEnabled
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_web.a.div,
+        import_ui.animated.div,
         {
           ...bind && pathRoute.pageState.gesture && gestureEnabled ? bind() : {},
           className: (0, import_client.clsx)("group/path", className),

package/cjs/animated.js

@@ -0,0 +1,29 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var animated_exports = {};
+__export(animated_exports, {
+  animated: () => animated
+});
+module.exports = __toCommonJS(animated_exports);
+var import_web = require("@react-spring/web");
+const animated = {
+  div: (0, import_web.a)("div"),
+  g: (0, import_web.a)("g"),
+  progress: (0, import_web.a)("progress")
+};

package/cjs/index.js

@@ -57,7 +57,8 @@ __export(ui_exports, {
   Tab: () => import_Tab.Tab,
   Table: () => import_Table.Table,
   ToggleSelect: () => import_ToggleSelect.ToggleSelect,
-  Unauthorized: () => import_Unauthorized.Unauthorized
+  Unauthorized: () => import_Unauthorized.Unauthorized,
+  animated: () => import_animated.animated
 });
 module.exports = __toCommonJS(ui_exports);
 var import_Data = require("./Data");
@@ -101,3 +102,4 @@ var import_Select = require("./Select");
 var import_Table = require("./Table");
 var import_ToggleSelect = require("./ToggleSelect");
 var import_Unauthorized = require("./Unauthorized");
+var import_animated = require("./animated");

package/esm/BottomSheet.js

@@ -2,10 +2,11 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "@akanjs/client";
 import { st } from "@akanjs/store";
+import { animated } from "@akanjs/ui";
 import { useDrag } from "@use-gesture/react";
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { BiX } from "react-icons/bi";
-import { a, config, useSpring } from "react-spring";
+import { config, useSpring } from "react-spring";
 const BottomSheet = forwardRef(
   ({ open, onCancel, type = "half", children }, bottomSheetRef) => {
     const ref = useRef(null);
@@ -47,7 +48,7 @@ const BottomSheet = forwardRef(
     }, [open]);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        a.div,
+        animated.div,
         {
           style: {
             opacity
@@ -60,7 +61,7 @@ const BottomSheet = forwardRef(
         }
       ),
       /* @__PURE__ */ jsxs(
-        a.div,
+        animated.div,
         {
           ref,
           style: { y, paddingTop: type === "full" ? pageState.topSafeArea : 0 },
@@ -69,7 +70,7 @@ const BottomSheet = forwardRef(
             "h-[100vh]": type === "full"
           }),
           children: [
-            /* @__PURE__ */ jsx("div", { className: "flex h-8 w-full items-start justify-center pt-2", children: type === "half" ? /* @__PURE__ */ jsx(a.div, { ...bind(), className: "flex h-8 w-full items-start justify-center pt-2", children: /* @__PURE__ */ jsx("div", { className: "h-2 w-32 rounded-full bg-gray-300" }) }) : /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("div", { className: "flex h-8 w-full items-start justify-center pt-2", children: type === "half" ? /* @__PURE__ */ jsx(animated.div, { ...bind(), className: "flex h-8 w-full items-start justify-center pt-2", children: /* @__PURE__ */ jsx("div", { className: "h-2 w-32 rounded-full bg-gray-300" }) }) : /* @__PURE__ */ jsx(
               "button",
               {
                 onClick: () => void closeModal(),

package/esm/Dialog/Modal.js

@@ -2,11 +2,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "@akanjs/client";
 import { usePage } from "@akanjs/next";
+import { animated } from "@akanjs/ui";
 import * as Dialog from "@radix-ui/react-dialog";
 import { useDrag } from "@use-gesture/react";
 import { useContext, useEffect, useRef, useState } from "react";
 import { BiX } from "react-icons/bi";
-import { a, config, useSpring } from "react-spring";
+import { config, useSpring } from "react-spring";
 import { DialogContext } from "./context";
 const MODAL_MARGIN = 0;
 const OPACITY = { START: 0, END: 1 };
@@ -15,7 +16,7 @@ const interpolate = (o, i, t) => {
 };
 const Modal = ({ className, bodyClassName, confirmClose, children, onCancel }) => {
   const { open, setOpen, title, action } = useContext(DialogContext);
-  const openRef = useRef(null);
+  const openRef = useRef(open);
   const { l } = usePage();
   const ref = useRef(null);
   const [{ translate }, api] = useSpring(() => ({ translate: 1 }));
@@ -85,7 +86,7 @@ const Modal = ({ className, bodyClassName, confirmClose, children, onCancel }) =
         className: "fixed top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center",
         asChild: true,
         forceMount: true,
-        children: /* @__PURE__ */ jsx("div", { className: "z-10", children: /* @__PURE__ */ jsxs(a.div, { ref, style: { translateY, opacity }, children: [
+        children: /* @__PURE__ */ jsx("div", { className: "z-10", children: /* @__PURE__ */ jsxs(animated.div, { ref, style: { translateY, opacity }, children: [
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -103,7 +104,7 @@ const Modal = ({ className, bodyClassName, confirmClose, children, onCancel }) =
               ),
               children: [
                 /* @__PURE__ */ jsx(Dialog.Title, { asChild: true, children: /* @__PURE__ */ jsxs(
-                  a.div,
+                  animated.div,
                   {
                     ...bind(),
                     className: "animate-fadeIn relative z-10 flex w-full cursor-pointer touch-pan-y flex-col items-center justify-center px-4 pt-1",

package/esm/DragAction.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "@akanjs/client";
+import { animated } from "@akanjs/ui";
 import { useGesture } from "@use-gesture/react";
 import { createContext, useContext, useRef } from "react";
-import { animated, SpringValue, useSpring } from "react-spring";
+import { SpringValue, useSpring } from "react-spring";
 const DragActionContext = createContext({
   bind: () => ({}),
   x: new SpringValue(0),

package/esm/DraggableList.js

@@ -1,7 +1,8 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "@akanjs/client";
-import { animated, config, useSprings } from "@react-spring/web";
+import { animated } from "@akanjs/ui";
+import { config, useSprings } from "@react-spring/web";
 import { useGesture } from "@use-gesture/react";
 import clamp from "lodash.clamp";
 import swap from "lodash-move";

package/esm/KeyboardAvoiding.js

@@ -2,8 +2,9 @@
 import { jsx } from "react/jsx-runtime";
 import { useCsr } from "@akanjs/client";
 import { st } from "@akanjs/store";
+import { animated } from "@akanjs/ui";
 import { useEffect, useRef } from "react";
-import { a, useSpring } from "react-spring";
+import { useSpring } from "react-spring";
 const KeyboardAvoiding = ({ children, className }) => {
   const keyboardHeight = st.use.keyboardHeight();
   const defaultHeight = useRef(null);
@@ -40,7 +41,7 @@ const KeyboardAvoiding = ({ children, className }) => {
       defaultHeight.current = heightNum;
     }
   }, []);
-  return /* @__PURE__ */ jsx(a.div, { className: "h-auto", style: { marginBottom: height }, children });
+  return /* @__PURE__ */ jsx(animated.div, { className: "h-auto", style: { marginBottom: height }, children });
 };
 export {
   KeyboardAvoiding

package/esm/Layout/Sider.js

@@ -1,31 +1,67 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "@akanjs/client";
+import { st } from "@akanjs/store";
+import { animated } from "@akanjs/ui";
+import { useEffect, useState } from "react";
 import { AiOutlineMenu } from "react-icons/ai";
 import { BiX } from "react-icons/bi";
+import { useSpring } from "react-spring";
 const Sider = ({ className, bgClassName, children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const path = st.use.path();
+  useEffect(() => {
+    setIsOpen(false);
+  }, [path]);
+  const siderAnimation = useSpring({
+    translateX: isOpen ? "0%" : "-100%",
+    config: { tension: 300, friction: 30 }
+  });
+  const overlayAnimation = useSpring({
+    opacity: isOpen ? 1 : 0,
+    config: { tension: 300, friction: 30 }
+  });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: "drawer-content", children: /* @__PURE__ */ jsx("label", { htmlFor: "sider", className: "btn btn-ghost", children: /* @__PURE__ */ jsx(AiOutlineMenu, {}) }) }),
-    /* @__PURE__ */ jsxs("div", { className: "drawer drawer-start fixed", children: [
-      /* @__PURE__ */ jsx("input", { id: "sider", type: "checkbox", className: "drawer-toggle" }),
-      /* @__PURE__ */ jsxs("div", { className: "drawer-side", children: [
-        /* @__PURE__ */ jsx("label", { htmlFor: "sider", className: clsx("drawer-overlay", bgClassName) }),
-        /* @__PURE__ */ jsxs("div", { className: clsx("bg-base-200 text-base-content h-full w-3/4 p-4 md:w-80", className), children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "btn btn-ghost",
+        onClick: () => {
+          setIsOpen(true);
+        },
+        children: /* @__PURE__ */ jsx(AiOutlineMenu, {})
+      }
+    ),
+    isOpen ? /* @__PURE__ */ jsx(
+      animated.div,
+      {
+        style: overlayAnimation,
+        className: clsx("fixed inset-0 z-40 h-screen w-screen", bgClassName),
+        onClick: () => {
+          setIsOpen(false);
+        }
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs(
+      animated.div,
+      {
+        style: siderAnimation,
+        className: clsx("bg-base-200 text-base-content fixed top-0 left-0 z-50 h-full w-3/4 p-4 md:w-80", className),
+        children: [
           /* @__PURE__ */ jsx(
             "button",
             {
               className: "absolute top-4 left-4 text-lg",
-              onClick: (e) => {
-                e.preventDefault();
-                document.getElementById("sider")?.click();
+              onClick: () => {
+                setIsOpen(false);
               },
               children: /* @__PURE__ */ jsx(BiX, {})
             }
           ),
           children
-        ] })
-      ] })
-    ] })
+        ]
+      }
+    )
   ] });
 };
 export {

package/esm/Layout/Template.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "@akanjs/client";
 const Template = ({ className, children }) => {
-  return /* @__PURE__ */ jsx("div", { className: clsx("flex w-full max-w-[100vw] flex-col gap-6 p-2", className), children });
+  return /* @__PURE__ */ jsx("div", { className: clsx("flex w-full flex-col gap-6 p-2", className), children });
 };
 export {
   Template

package/esm/Load/PageCSR.js

@@ -1,21 +1,22 @@
 "use client";
 import { Fragment, jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
-const setFetchedData = (target, data) => {
-  Reflect.defineMetadata("fetchedData", data, target);
+const setFetchedData = (target, data, pathname) => {
+  const fetchedData = Reflect.getMetadata("fetchedData", target) ?? {};
+  Reflect.defineMetadata("fetchedData", { ...fetchedData, [pathname]: data }, target);
 };
-const getFetchedData = (target) => {
-  const data = Reflect.getMetadata("fetchedData", target);
-  return data ?? null;
+const getFetchedData = (target, pathname) => {
+  const data = Reflect.getMetadata("fetchedData", target) ?? {};
+  return data[pathname] ?? null;
 };
 const PageCSR = ({ of, loader, render, loading, noCache = false }) => {
   const fetchData = useMemo(() => {
-    const cachedData = getFetchedData(of);
+    const cachedData = getFetchedData(of, location.pathname);
     if (!noCache && cachedData)
       return cachedData;
     else
       return loader();
-  }, []);
+  }, [location.pathname]);
   const [fetchState, setFetchState] = useState(
     fetchData instanceof Promise ? { fulfilled: false, value: null } : { fulfilled: true, value: fetchData }
   );
@@ -26,7 +27,7 @@ const PageCSR = ({ of, loader, render, loading, noCache = false }) => {
       try {
         const ret = await fetchData;
         setFetchState({ fulfilled: true, value: ret });
-        setFetchedData(of, ret);
+        setFetchedData(of, ret, location.pathname);
       } catch (err) {
       }
     })();

package/esm/Loading/ProgressBar.js

@@ -1,10 +1,11 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "@akanjs/client";
-import { a, useSpring } from "react-spring";
+import { animated } from "@akanjs/ui";
+import { useSpring } from "react-spring";
 const ProgressBar = ({ className, value, max }) => {
   const progress = useSpring({ value: 0, to: { value } });
-  return /* @__PURE__ */ jsx(a.progress, { className: clsx("progress w-full", className), value: progress.value, max });
+  return /* @__PURE__ */ jsx(animated.progress, { className: clsx("progress w-full", className), value: progress.value, max });
 };
 export {
   ProgressBar

package/esm/Popconfirm.js

@@ -3,9 +3,10 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //! 디자인 수정, 테마 적용 안됨
 import { clsx } from "@akanjs/client";
 import { usePage } from "@akanjs/next";
-import { animated, useSpring } from "@react-spring/web";
+import { useSpring } from "@react-spring/web";
 import { useEffect, useState } from "react";
 import { BiMessageRoundedError } from "react-icons/bi";
+import { animated } from "./animated";
 const Popconfirm = ({
   title,
   description,

package/esm/ScreenNavigator.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "@akanjs/client";
+import { animated } from "@akanjs/ui";
 import { useDrag } from "@use-gesture/react";
 import { createContext, useContext, useEffect, useRef, useState } from "react";
-import { a, SpringValue, useSpringValue } from "react-spring";
+import { SpringValue, useSpringValue } from "react-spring";
 const ScreenNavigatorContext = createContext({
   bind: () => ({}),
   xValue: new SpringValue(0),
@@ -78,7 +79,7 @@ const ScreenNavigator = ({
       setCurrentMenu(menus[1]);
     }
   };
-  return /* @__PURE__ */ jsx(ScreenNavigatorContext.Provider, { value: { bind, xValue, onClickMenu, menus, currentMenu, setMenu }, children: /* @__PURE__ */ jsx(a.div, { ...bind(), className: "flex h-full w-[200vw] overflow-x-scroll", style: { x: xValue }, ref, children }) });
+  return /* @__PURE__ */ jsx(ScreenNavigatorContext.Provider, { value: { bind, xValue, onClickMenu, menus, currentMenu, setMenu }, children: /* @__PURE__ */ jsx(animated.div, { ...bind(), className: "flex h-full w-[200vw] overflow-x-scroll", style: { x: xValue }, ref, children }) });
 };
 const NavbarItem = ({ menu, children, className }) => {
   const { onClickMenu, currentMenu } = useContext(ScreenNavigatorContext);

package/esm/System/CSR.js

@@ -3,7 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx, device, getPathInfo, router, useCsr } from "@akanjs/client";
 import { usePushNoti } from "@akanjs/next";
 import { st } from "@akanjs/store";
-import { a } from "@react-spring/web";
+import { animated } from "@akanjs/ui";
 import { useEffect } from "react";
 import { createPortal } from "react-dom";
 import { FontFace } from "../FontFace";
@@ -128,7 +128,7 @@ const CSRWrapper = ({
           /* @__PURE__ */ jsx("div", { id: "pageContainers", className: "isolate" }),
           csrLoaded ? pathRoutes.map((pathRoute) => /* @__PURE__ */ jsx(CSRPageContainer, { pathRoute, prefix, layoutStyle }, pathRoute.path)) : null,
           /* @__PURE__ */ jsx(
-            a.div,
+            animated.div,
             {
               id: "topSafeArea",
               className: clsx("bg-base-100 fixed inset-x-0 top-0", {}),
@@ -137,7 +137,7 @@ const CSRWrapper = ({
             }
           ),
           /* @__PURE__ */ jsx(
-            a.div,
+            animated.div,
             {
               id: "topInsetContainer",
               className: clsx("bg-base-100 fixed inset-x-0 isolate", {}),
@@ -145,7 +145,7 @@ const CSRWrapper = ({
             }
           ),
           /* @__PURE__ */ jsx(
-            a.div,
+            animated.div,
             {
               id: "topLeftActionContainer",
               className: clsx("aspect-1 absolute top-0 isolate flex items-center justify-center", {}),
@@ -153,7 +153,7 @@ const CSRWrapper = ({
             }
           ),
           /* @__PURE__ */ jsx(
-            a.div,
+            animated.div,
             {
               id: "bottomInsetContainer",
               className: clsx("fixed inset-x-0 isolate", {}),
@@ -161,7 +161,7 @@ const CSRWrapper = ({
             }
           ),
           /* @__PURE__ */ jsx(
-            a.div,
+            animated.div,
             {
               id: "bottomSafeArea",
               className: "bg-base-100 fixed inset-x-0",
@@ -282,7 +282,7 @@ const CSRPageContainer = ({ pathRoute, prefix, layoutStyle }) => {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     createPortal(
       /* @__PURE__ */ jsx(
-        a.div,
+        animated.div,
         {
           id: `pageContainer-${pathRoute.path}`,
           style: { ...page?.containerStyle ?? {}, zIndex },

package/esm/System/Client.js

@@ -16,7 +16,7 @@ import { Logger } from "@akanjs/common";
 import { useFetch } from "@akanjs/next";
 import { fetch } from "@akanjs/signal";
 import { st } from "@akanjs/store";
-import { a } from "@react-spring/web";
+import { animated } from "@akanjs/ui";
 import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
 import { ThemeProvider, useTheme } from "next-themes";
 import { useEffect, useState } from "react";
@@ -70,7 +70,7 @@ const ClientPathWrapper = ({
         setGestureEnabled
       },
       children: /* @__PURE__ */ jsx(
-        a.div,
+        animated.div,
         {
           ...bind && pathRoute.pageState.gesture && gestureEnabled ? bind() : {},
           className: clsx("group/path", className),

package/esm/animated.js

@@ -0,0 +1,10 @@
+"use client";
+import { a } from "@react-spring/web";
+const animated = {
+  div: a("div"),
+  g: a("g"),
+  progress: a("progress")
+};
+export {
+  animated
+};

package/esm/index.js

@@ -39,6 +39,7 @@ import { Select } from "./Select";
 import { Table } from "./Table";
 import { ToggleSelect } from "./ToggleSelect";
 import { Unauthorized } from "./Unauthorized";
+import { animated } from "./animated";
 export {
   BottomSheet,
   Button,
@@ -80,5 +81,6 @@ export {
   Tab,
   Table,
   ToggleSelect,
-  Unauthorized
+  Unauthorized,
+  animated
 };

package/index.d.ts

@@ -39,3 +39,4 @@ export { Select } from "./Select";
 export { Table } from "./Table";
 export { ToggleSelect } from "./ToggleSelect";
 export { Unauthorized } from "./Unauthorized";
+export { animated } from "./animated";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akanjs/ui",
-  "version": "0.9.34",
+  "version": "0.9.36",
   "sourceType": "module",
   "publishConfig": {
     "access": "public"
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@capacitor/browser": "7.0.1",
-    "@radix-ui/react-dialog": "1.1.4",
+    "@radix-ui/react-dialog": "1.1.14",
     "@react-spring/web": "^9.7.5",
     "@use-gesture/react": "^10.3.1",
     "clsx": "^2.1.1",
@@ -27,11 +27,11 @@
     "lodash.clamp": "^4.0.3",
     "next": "15.3.2",
     "next-themes": "0.4.4",
-    "react": "18.3.1",
+    "react": "19.1.1",
     "react-copy-to-clipboard": "5.1.0",
     "react-datepicker": "7.5.0",
     "react-device-detect": "^2.2.3",
-    "react-dom": "18.3.1",
+    "react-dom": "19.1.1",
     "react-easy-crop": "^5.2.0",
     "react-icons": "^5.4.0",
     "react-simple-pull-to-refresh": "^1.3.3",