prime-ui-kit 0.4.0 → 0.5.1

package/dist/components/index.js

@@ -27,6 +27,8 @@ function useOverlayPortalLayer() {
 
 // src/layout/app-shell/AppShell.tsx
 import * as React4 from "react";
+import { useLayoutEffect } from "react";
+import { useInRouterContext, useLocation } from "react-router-dom";
 
 // src/components/scroll-container/ScrollContainer.tsx
 import * as React3 from "react";
@@ -100,13 +102,26 @@ function toDataAttributes(input) {
   return result;
 }
 
+// src/internal/mergeRefs.ts
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (ref == null) continue;
+      if (typeof ref === "function") {
+        ref(value);
+      } else {
+        ref.current = value;
+      }
+    }
+  };
+}
+
 // src/layout/app-shell/AppShell.module.css
 var AppShell_default = {
   layoutRoot: "AppShell_layoutRoot2",
   layoutMain: "AppShell_layoutMain2",
   layoutNav: "AppShell_layoutNav2",
-  layoutMainSurface: "AppShell_layoutMainSurface2",
-  layoutMainPage: "AppShell_layoutMainPage2"
+  layoutMainInset: "AppShell_layoutMainInset2"
 };
 
 // src/layout/app-shell/AppShell.tsx
@@ -128,7 +143,7 @@ function AppShellNav({ className, children, ...rest }) {
   return /* @__PURE__ */ jsx4("div", { className: cx(AppShell_default.layoutNav, className), "data-layout-region": "nav", ...rest, children });
 }
 AppShellNav.displayName = "AppShell.Nav";
-var AppShellMain = React4.forwardRef(function AppShellMain2({ variant = "plain", className, children, ...rest }, forwardedRef) {
+var AppShellMain = React4.forwardRef(function AppShellMain2({ className, children, ...rest }, forwardedRef) {
   return /* @__PURE__ */ jsx4(
     ScrollContainer,
     {
@@ -136,12 +151,7 @@ var AppShellMain = React4.forwardRef(function AppShellMain2({ variant = "plain",
       ref: forwardedRef,
       axis: "vertical",
       overscrollBehavior: "contain",
-      className: cx(
-        AppShell_default.layoutMain,
-        variant === "surface" && AppShell_default.layoutMainSurface,
-        variant === "page" && AppShell_default.layoutMainPage,
-        className
-      ),
+      className: cx(AppShell_default.layoutMain, className),
       "data-layout-region": "main",
       ...rest,
       children
@@ -149,8 +159,35 @@ var AppShellMain = React4.forwardRef(function AppShellMain2({ variant = "plain",
   );
 });
 AppShellMain.displayName = "AppShell.Main";
+var AppShellMainInset = React4.forwardRef(
+  function AppShellMainInset2({ className, children, ...rest }, forwardedRef) {
+    return /* @__PURE__ */ jsx4(
+      "div",
+      {
+        ref: forwardedRef,
+        className: cx(AppShell_default.layoutMainInset, className),
+        "data-app-shell-main-inset": "",
+        ...rest,
+        children
+      }
+    );
+  }
+);
+AppShellMainInset.displayName = "AppShell.MainInset";
+function AppShellMainRouteScrollReset({
+  mainRef
+}) {
+  const { pathname } = useLocation();
+  useLayoutEffect(() => {
+    mainRef.current?.scrollTo(0, 0);
+  }, [pathname]);
+  return null;
+}
 var AppShellTemplate = React4.forwardRef(
   function AppShellTemplate2({ fillViewport, className, nav, children, navProps, mainProps, ...rootRest }, forwardedRef) {
+    const mainElementRef = React4.useRef(null);
+    const setMainRef = React4.useMemo(() => mergeRefs(mainElementRef, forwardedRef), [forwardedRef]);
+    const inRouter = useInRouterContext();
     return /* @__PURE__ */ jsxs(
       AppShellRoot,
       {
@@ -160,7 +197,10 @@ var AppShellTemplate = React4.forwardRef(
         "data-layout-template": "app",
         children: [
           /* @__PURE__ */ jsx4(AppShellNav, { ...navProps, children: nav }),
-          /* @__PURE__ */ jsx4(AppShellMain, { ref: forwardedRef, ...mainProps, children })
+          /* @__PURE__ */ jsxs(AppShellMain, { ref: setMainRef, ...mainProps, children: [
+            /* @__PURE__ */ jsx4(AppShellMainInset, { children }),
+            inRouter ? /* @__PURE__ */ jsx4(AppShellMainRouteScrollReset, { mainRef: mainElementRef }) : null
+          ] })
         ]
       }
     );
@@ -171,6 +211,7 @@ var AppShell = {
   Root: AppShellRoot,
   Nav: AppShellNav,
   Main: AppShellMain,
+  MainInset: AppShellMainInset,
   Template: AppShellTemplate
 };
 
@@ -178,9 +219,9 @@ var AppShell = {
 import {
   ChevronsUpDown,
   PanelLeftClose,
-  PanelLeftOpen as PanelLeftOpen2,
+  PanelLeftOpen,
   PanelRightClose,
-  PanelRightOpen as PanelRightOpen2
+  PanelRightOpen
 } from "lucide-react";
 import * as React17 from "react";
 import { NavLink } from "react-router-dom";
@@ -493,22 +534,6 @@ var Typography = { Root: TypographyRoot };
 
 // src/internal/slot.tsx
 import * as React12 from "react";
-
-// src/internal/mergeRefs.ts
-function mergeRefs(...refs) {
-  return (value) => {
-    for (const ref of refs) {
-      if (ref == null) continue;
-      if (typeof ref === "function") {
-        ref(value);
-      } else {
-        ref.current = value;
-      }
-    }
-  };
-}
-
-// src/internal/slot.tsx
 import { Fragment, jsx as jsx8 } from "react/jsx-runtime";
 function mergeProps(slotProps, childProps) {
   const merged = { ...slotProps };
@@ -560,6 +585,7 @@ var Sidebar_default = {
   navArea: "Sidebar_navArea2",
   backdrop: "Sidebar_backdrop2",
   navPanel: "Sidebar_navPanel2",
+  navPanelSurface: "Sidebar_navPanelSurface2",
   header: "Sidebar_header2",
   headerRow: "Sidebar_headerRow2",
   headerMain: "Sidebar_headerMain2",
@@ -597,15 +623,12 @@ var Sidebar_default = {
   navCategoryTrigger: "Sidebar_navCategoryTrigger2",
   navCategoryLabel: "Sidebar_navCategoryLabel2",
   navCategoryCount: "Sidebar_navCategoryCount2",
-  navCategoryPanel: "Sidebar_navCategoryPanel2",
-  floatingToggle: "Sidebar_floatingToggle2"
+  navCategoryPanel: "Sidebar_navCategoryPanel2"
 };
 
 // src/layout/sidebar/SidebarRoot.tsx
 import { animate, useMotionValue, useMotionValueEvent, useReducedMotion } from "framer-motion";
-import { PanelLeftOpen, PanelRightOpen } from "lucide-react";
 import * as React16 from "react";
-import { createPortal as createPortal2 } from "react-dom";
 
 // src/hooks/useEscapeKey.ts
 import * as React13 from "react";
@@ -870,21 +893,11 @@ var SidebarRoot = React16.forwardRef(function SidebarRoot2({
     if (root == null) return;
     root.style.setProperty("--sb-progress", value.toString());
   });
-  const [floatingPortalReady, setFloatingPortalReady] = React16.useState(false);
-  React16.useLayoutEffect(() => {
-    setFloatingPortalReady(true);
-  }, []);
-  const showFloatingToggle = Boolean(responsive) && isMobile && !openState;
   const closeMobile = React16.useCallback(() => {
     setLayoutState("hidden");
   }, [setLayoutState]);
   const navAreaRef = useOverlayModal(mobileOpen, closeMobile);
   const navPanelId = React16.useId();
-  const floatingToggleLabel = side === "left" ? "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0441\u0430\u0439\u0434\u0431\u0430\u0440" : "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0441\u0430\u0439\u0434\u0431\u0430\u0440 \u0441\u043F\u0440\u0430\u0432\u0430";
-  const floatingToggleIcon = side === "left" ? /* @__PURE__ */ jsx9(PanelLeftOpen, { size: "1em" }) : /* @__PURE__ */ jsx9(PanelRightOpen, { size: "1em" });
-  const onFloatingToggleClick = React16.useCallback(() => {
-    setLayoutState("expanded");
-  }, [setLayoutState]);
   const contextValue = React16.useMemo(
     () => ({
       size,
@@ -901,7 +914,7 @@ var SidebarRoot = React16.forwardRef(function SidebarRoot2({
     }),
     [isMobile, layoutState, navPanelId, openState, setOpen, setState, side, size, toggleOpen]
   );
-  return /* @__PURE__ */ jsx9(SidebarProvider, { value: contextValue, children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx9(SidebarProvider, { value: contextValue, children: /* @__PURE__ */ jsx9(
     "aside",
     {
       ...rest,
@@ -920,37 +933,20 @@ var SidebarRoot = React16.forwardRef(function SidebarRoot2({
         "sidebar-mode": layoutState,
         "sidebar-root": true
       }),
-      children: [
-        /* @__PURE__ */ jsxs2("div", { ref: navAreaRef, className: Sidebar_default.navArea, children: [
-          /* @__PURE__ */ jsx9(
-            "button",
-            {
-              type: "button",
-              className: Sidebar_default.backdrop,
-              "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C \u0441\u0430\u0439\u0434\u0431\u0430\u0440",
-              onClick: closeMobile,
-              tabIndex: mobileOpen ? 0 : -1,
-              "aria-hidden": mobileOpen ? void 0 : true
-            }
-          ),
-          children
-        ] }),
-        showFloatingToggle && floatingPortalReady && typeof document !== "undefined" ? createPortal2(
-          /* @__PURE__ */ jsx9(
-            "button",
-            {
-              type: "button",
-              className: Sidebar_default.floatingToggle,
-              onClick: onFloatingToggleClick,
-              "aria-label": floatingToggleLabel,
-              "aria-controls": navPanelId,
-              "data-side": side,
-              children: /* @__PURE__ */ jsx9("span", { className: Sidebar_default.menuIcon, "aria-hidden": "true", children: floatingToggleIcon })
-            }
-          ),
-          document.body
-        ) : null
-      ]
+      children: /* @__PURE__ */ jsxs2("div", { ref: navAreaRef, className: Sidebar_default.navArea, children: [
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            type: "button",
+            className: Sidebar_default.backdrop,
+            "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C \u0441\u0430\u0439\u0434\u0431\u0430\u0440",
+            onClick: closeMobile,
+            tabIndex: mobileOpen ? 0 : -1,
+            "aria-hidden": mobileOpen ? void 0 : true
+          }
+        ),
+        children
+      ] })
     }
   ) });
 });
@@ -961,9 +957,9 @@ import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 var SidebarComposedRoot = SidebarRoot;
 function iconForToggle(state, side) {
   if (side === "left") {
-    return state === "hidden" ? /* @__PURE__ */ jsx10(PanelLeftOpen2, { size: "1em" }) : /* @__PURE__ */ jsx10(PanelLeftClose, { size: "1em" });
+    return state === "hidden" ? /* @__PURE__ */ jsx10(PanelLeftOpen, { size: "1em" }) : /* @__PURE__ */ jsx10(PanelLeftClose, { size: "1em" });
   }
-  return state === "hidden" ? /* @__PURE__ */ jsx10(PanelRightOpen2, { size: "1em" }) : /* @__PURE__ */ jsx10(PanelRightClose, { size: "1em" });
+  return state === "hidden" ? /* @__PURE__ */ jsx10(PanelRightOpen, { size: "1em" }) : /* @__PURE__ */ jsx10(PanelRightClose, { size: "1em" });
 }
 var SidebarToggleButton = React17.forwardRef(
   ({
@@ -1005,19 +1001,18 @@ function SidebarNavPanel({
   children,
   ...rest
 }) {
-  const { navPanelId, isMobile, state } = useSidebarContext();
-  const showEdgeToggle = showToggle && !(isMobile && state === "hidden");
-  return /* @__PURE__ */ jsxs3(
+  const { navPanelId } = useSidebarContext();
+  return /* @__PURE__ */ jsx10(
     "nav",
     {
       ...rest,
       id: id ?? navPanelId,
       className: cx(Sidebar_default.navPanel, className),
       "aria-label": rest["aria-label"] ?? "Sidebar navigation",
-      children: [
+      children: /* @__PURE__ */ jsxs3("div", { className: Sidebar_default.navPanelSurface, children: [
         children,
-        showEdgeToggle ? /* @__PURE__ */ jsx10(SidebarToggleButton, { placement: "edge" }) : null
-      ]
+        showToggle ? /* @__PURE__ */ jsx10(SidebarToggleButton, { placement: "edge" }) : null
+      ] })
     }
   );
 }