@robosophy/ui-react 1.0.1 → 4.0.0

package/AGENTS.md

@@ -29,21 +29,33 @@ The main barrel (`@robosophy/ui-react`) loads all components including PrimeReac
 
 PrimeReact apps:
 
+Crea un archivo `layers.css` en tu aplicación:
+
+```css
+/* layers.css */
+@layer prime-base, prime-design;
+@import "primereact/resources/themes/fluent-light/theme.css" layer(prime-base);
+@import "@robosophy/prime-theme/prime.css" layer(prime-design);
+```
+
+Luego importa este archivo en tu aplicación:
+
 ```tsx
 import { PrimeReactProvider } from "primereact/api";
-import RobosophyPreset from "@robosophy/prime-theme";
-import "@robosophy/prime-theme/prime.css";
+import "./layers.css";
 import "@robosophy/ui-react/styles.css";
 
 function MyApp({ Component, pageProps }) {
   return (
-    <PrimeReactProvider value={{ theme: { preset: RobosophyPreset } }}>
+    <PrimeReactProvider>
       <Component {...pageProps} />
     </PrimeReactProvider>
   );
 }
 ```
 
+El archivo `layers.css` configura los CSS Cascade Layers, permitiendo que los estilos de la aplicación sobrescriban los del design system si es necesario.
+
 Non-PrimeReact apps:
 
 ```tsx

package/README.md

@@ -28,25 +28,31 @@ npm install @robosophy/ui-react @robosophy/tokens react react-dom
 
 ## PrimeReact theme
 
-If your app uses PrimeReact, configure the Robosophy preset and load its tokens/overrides once:
+PrimeReact 10 usa un sistema de temas CSS. Necesitas importar el tema `fluent-light` seguido de los overrides de Robosophy:
 
 ```tsx
-// app/layout.tsx or pages/_app.tsx
+// app/layout.tsx o pages/_app.tsx
 import { PrimeReactProvider } from "primereact/api";
-import RobosophyPreset from "@robosophy/prime-theme";
+import "primereact/resources/themes/fluent-light/theme.css";
 import "@robosophy/prime-theme/prime.css";
 import "@robosophy/ui-react/styles.css";
 
 function MyApp({ Component, pageProps }) {
   return (
-    <PrimeReactProvider value={{ theme: { preset: RobosophyPreset } }}>
+    <PrimeReactProvider>
       <Component {...pageProps} />
     </PrimeReactProvider>
   );
 }
 ```
 
-`prime.css` already imports `@robosophy/tokens/tokens.css`, so don't duplicate that import.
+**Orden de importación (crítico):**
+1. Tema base de PrimeReact (ej: `fluent-light/theme.css`) — estilos estructurales
+2. `@robosophy/prime-theme/prime.css` — aplica tokens `--rs-*` a componentes de PrimeReact
+
+`prime.css` ya importa `@robosophy/tokens/tokens.css`, así que no dupliques ese import.
+
+Solo `fluent-light` es compatible con los overrides de Robosophy.
 
 If your app doesn't use PrimeReact, import tokens once:
 

package/dist/{chunk-AEWPQXHG.js → chunk-H3GFVSAQ.js}

@@ -44,7 +44,9 @@ var RsSidebar = forwardRef(
     const [isHovered, setIsHovered] = useState(false);
     const [activeParent, setActiveParent] = useState(null);
     const [isModuleMenuOpen, setIsModuleMenuOpen] = useState(false);
+    const [menuTop, setMenuTop] = useState(88);
     const rootRef = useRef(null);
+    const headerRef = useRef(null);
     const isFirstRenderRef = useRef(true);
     const onExpandedChangeRef = useRef(onExpandedChange);
     onExpandedChangeRef.current = onExpandedChange;
@@ -77,6 +79,9 @@ var RsSidebar = forwardRef(
         setIsModuleMenuOpen(false);
         onModuleSelect?.(module);
         if (navigateOnModuleSelect && typeof window !== "undefined" && module.link) {
+          console.warn(
+            "[RsSidebar] navigateOnModuleSelect is deprecated. Use onModuleSelect and handle navigation in your app to avoid full page reloads in SPAs."
+          );
           window.location.href = module.link;
         }
       },
@@ -122,6 +127,11 @@ var RsSidebar = forwardRef(
       }
       return classes.join(" ");
     }, [variant, isExpanded, mobileOpen, activeParent]);
+    useEffect(() => {
+      if (headerRef.current) {
+        setMenuTop(headerRef.current.offsetHeight);
+      }
+    }, [isExpanded, mobileOpen]);
     useEffect(() => {
       if (!mobileOpen) {
         setActiveParent(null);
@@ -212,7 +222,7 @@ var RsSidebar = forwardRef(
       if (header) {
         return header;
       }
-      return /* @__PURE__ */ jsxs("header", { className: "rs-sidebar__header", children: [
+      return /* @__PURE__ */ jsxs("header", { ref: headerRef, className: "rs-sidebar__header", children: [
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -248,7 +258,8 @@ var RsSidebar = forwardRef(
             ] })
           }
         ),
-        renderHeaderAction()
+        renderHeaderAction(),
+        renderModuleMenu()
       ] });
     };
     const renderHeaderAction = () => {
@@ -285,10 +296,8 @@ var RsSidebar = forwardRef(
         Menu,
         {
           className: "rs-sidebar__module-menu",
-          model: moduleMenuItems,
-          pt: {
-            root: { role: "menu" }
-          }
+          style: { "--rs-sidebar-menu-top": `${menuTop}px` },
+          model: moduleMenuItems
         }
       );
     };
@@ -335,7 +344,6 @@ var RsSidebar = forwardRef(
         onMouseLeave: () => setHovered(false),
         children: [
           renderHeaderContent(),
-          renderModuleMenu(),
           /* @__PURE__ */ jsxs("div", { className: "rs-sidebar__content", children: [
             /* @__PURE__ */ jsx("nav", { className: "rs-sidebar__nav", "aria-label": "Secciones", children: /* @__PURE__ */ jsxs("ul", { className: "rs-sidebar__list", children: [
               activeParent && /* @__PURE__ */ jsx("li", { className: "rs-sidebar__list-item", children: /* @__PURE__ */ jsxs(

package/dist/components/RsSidebar/index.css

@@ -142,41 +142,41 @@
   overflow: hidden;
   padding: 0;
   position: absolute;
-  top: 88px;
+  top: var(--rs-sidebar-menu-top, 88px);
   z-index: 20;
 }
 .rs-sidebar__module-menu .p-menu-list {
   gap: 0;
   padding: 0;
 }
-.rs-sidebar__module-option .p-menu-item-content {
+.rs-sidebar__module-option .p-menuitem-content {
   color: var(--rs-sidebar-color);
   border-radius: 0;
 }
-.rs-sidebar__module-option .p-menu-item-link {
+.rs-sidebar__module-option .p-menuitem-link {
   font-family: inherit;
   font-size: inherit;
   line-height: 1;
   min-height: 38px;
   padding: 10px 14px;
 }
-.rs-sidebar__module-option:not(.p-disabled) .p-menu-item-content:hover,
-.rs-sidebar__module-option--active .p-menu-item-content {
+.rs-sidebar__module-option:not(.p-disabled) .p-menuitem-content:hover,
+.rs-sidebar__module-option--active .p-menuitem-content {
   background: var(--rs-sidebar-hover);
   color: var(--rs-sidebar-color);
 }
-.rs-sidebar__module-option--disabled .p-menu-item-content {
+.rs-sidebar__module-option--disabled .p-menuitem-content {
   color: var(--rs-sidebar-muted);
   cursor: not-allowed;
 }
-.rs-sidebar__module-option--disabled .p-menu-item-content:hover {
+.rs-sidebar__module-option--disabled .p-menuitem-content:hover {
   background: transparent;
 }
-.rs-sidebar__module-option.p-focus .p-menu-item-content {
+.rs-sidebar__module-option.p-focus .p-menuitem-content {
   background: var(--rs-sidebar-hover);
   color: var(--rs-sidebar-color);
 }
-.rs-sidebar__module-option.p-focus .p-menu-item-link {
+.rs-sidebar__module-option.p-focus .p-menuitem-link {
   outline: 2px solid var(--rs-color-stroke-focused, #48a0d4);
   outline-offset: -2px;
 }
@@ -298,7 +298,7 @@
 .rs-sidebar--mobile-open .rs-sidebar__module-menu {
   left: 16px;
   min-width: min(320px, calc(100% - 32px));
-  top: 88px;
+  top: var(--rs-sidebar-menu-top, 88px);
 }
 .rs-sidebar--mobile-open .rs-sidebar__item {
   font-size: 18px;

package/dist/components/RsSidebar/index.d.ts

@@ -22,6 +22,10 @@ type RsSidebarProps = {
     items: RsSidebarItem[];
     footerItems?: RsSidebarItem[];
     modules?: RsSidebarModule[];
+    /**
+     * @deprecated Use `onModuleSelect` instead and handle navigation in your app.
+     * This prop causes a full page reload in SPAs.
+     */
     navigateOnModuleSelect?: boolean;
     title?: string;
     icon?: string;

package/dist/components/RsSidebar/index.js

@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE. DO NOT EDIT MANUALLY.
 import {
   RsSidebar_default
-} from "../../chunk-AEWPQXHG.js";
+} from "../../chunk-H3GFVSAQ.js";
 import "../../chunk-PEJOAJYL.js";
 import "../../chunk-D4ZW5VUU.js";
 export {

package/dist/index.css

@@ -192,41 +192,41 @@
   overflow: hidden;
   padding: 0;
   position: absolute;
-  top: 88px;
+  top: var(--rs-sidebar-menu-top, 88px);
   z-index: 20;
 }
 .rs-sidebar__module-menu .p-menu-list {
   gap: 0;
   padding: 0;
 }
-.rs-sidebar__module-option .p-menu-item-content {
+.rs-sidebar__module-option .p-menuitem-content {
   color: var(--rs-sidebar-color);
   border-radius: 0;
 }
-.rs-sidebar__module-option .p-menu-item-link {
+.rs-sidebar__module-option .p-menuitem-link {
   font-family: inherit;
   font-size: inherit;
   line-height: 1;
   min-height: 38px;
   padding: 10px 14px;
 }
-.rs-sidebar__module-option:not(.p-disabled) .p-menu-item-content:hover,
-.rs-sidebar__module-option--active .p-menu-item-content {
+.rs-sidebar__module-option:not(.p-disabled) .p-menuitem-content:hover,
+.rs-sidebar__module-option--active .p-menuitem-content {
   background: var(--rs-sidebar-hover);
   color: var(--rs-sidebar-color);
 }
-.rs-sidebar__module-option--disabled .p-menu-item-content {
+.rs-sidebar__module-option--disabled .p-menuitem-content {
   color: var(--rs-sidebar-muted);
   cursor: not-allowed;
 }
-.rs-sidebar__module-option--disabled .p-menu-item-content:hover {
+.rs-sidebar__module-option--disabled .p-menuitem-content:hover {
   background: transparent;
 }
-.rs-sidebar__module-option.p-focus .p-menu-item-content {
+.rs-sidebar__module-option.p-focus .p-menuitem-content {
   background: var(--rs-sidebar-hover);
   color: var(--rs-sidebar-color);
 }
-.rs-sidebar__module-option.p-focus .p-menu-item-link {
+.rs-sidebar__module-option.p-focus .p-menuitem-link {
   outline: 2px solid var(--rs-color-stroke-focused, #48a0d4);
   outline-offset: -2px;
 }
@@ -348,7 +348,7 @@
 .rs-sidebar--mobile-open .rs-sidebar__module-menu {
   left: 16px;
   min-width: min(320px, calc(100% - 32px));
-  top: 88px;
+  top: var(--rs-sidebar-menu-top, 88px);
 }
 .rs-sidebar--mobile-open .rs-sidebar__item {
   font-size: 18px;

package/dist/index.js

@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE. DO NOT EDIT MANUALLY.
 import {
   RsSidebar_default
-} from "./chunk-AEWPQXHG.js";
+} from "./chunk-H3GFVSAQ.js";
 import {
   RsIcon_default,
   rsPrimeIcon

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robosophy/ui-react",
-  "version": "1.0.1",
+  "version": "4.0.0",
   "private": false,
   "license": "UNLICENSED",
   "type": "module",
@@ -43,6 +43,7 @@
     "test": "vitest run"
   },
   "peerDependencies": {
+    "@robosophy/prime-theme": ">=2.0.0",
     "primereact": ">=10",
     "react": ">=18",
     "react-dom": ">=18"
@@ -56,10 +57,13 @@
     },
     "primereact": {
       "optional": true
+    },
+    "@robosophy/prime-theme": {
+      "optional": true
     }
   },
   "dependencies": {
-    "@robosophy/tokens": "^1.0.4"
+    "@robosophy/tokens": "^1.1.0"
   },
   "devDependencies": {
     "@storybook/addon-docs": "^9.1.0",