@robosophy/ui-react 3.0.0 → 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/core";
-import RobosophyPreset from "@robosophy/prime-theme";
-import "@robosophy/prime-theme/prime.css";
+import { PrimeReactProvider } from "primereact/api";
+import "./layers.css";
 import "@robosophy/ui-react/styles.css";
 
 function MyApp({ Component, pageProps }) {
   return (
-    <PrimeReactProvider 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
-import { PrimeReactProvider } from "@primereact/core";
-import RobosophyPreset from "@robosophy/prime-theme";
+// app/layout.tsx o pages/_app.tsx
+import { PrimeReactProvider } from "primereact/api";
+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 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:
 
@@ -148,7 +154,7 @@ robosophyMaterialSymbols({
 For PrimeReact APIs that receive `icon` as a string, use the helper:
 
 ```tsx
-import { Button } from "@primereact/ui/button";
+import { Button } from "primereact/button";
 import { rsPrimeIcon } from "@robosophy/ui-react";
 
 <Button label="Inicio" icon={rsPrimeIcon("home")} />
@@ -158,7 +164,7 @@ import { rsPrimeIcon } from "@robosophy/ui-react";
 For full control over props (fill, grade, etc.), use the `icon` slot:
 
 ```tsx
-import { Button } from "@primereact/ui/button";
+import { Button } from "primereact/button";
 import { RsIcon } from "@robosophy/ui-react";
 
 <Button label="Favorito" icon={<RsIcon name="favorite" fill color="danger" />} />

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

@@ -4,7 +4,7 @@ import {
 
 // src/components/RsSidebar/RsSidebar.tsx
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Menu } from "@primereact/ui/menu";
+import { Menu } from "primereact/menu";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var variantIconMap = {
   pc: "article",
@@ -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,11 +79,30 @@ 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;
         }
       },
       [navigateOnModuleSelect, onModuleSelect]
     );
+    const moduleMenuItems = useMemo(
+      () => modules.map((module) => {
+        const isCurrent = module.active || module.text === displayedHeaderTitle;
+        return {
+          className: [
+            "rs-sidebar__module-option",
+            isCurrent ? "rs-sidebar__module-option--active" : "",
+            module.disabled || isCurrent ? "rs-sidebar__module-option--disabled" : ""
+          ].filter(Boolean).join(" "),
+          command: () => selectModule(module),
+          disabled: module.disabled || isCurrent,
+          label: module.text
+        };
+      }),
+      [modules, displayedHeaderTitle, selectModule]
+    );
     const displayedItems = useMemo(
       () => activeParent ? (activeParent.children ?? []).filter(isVisible) : visibleItems,
       [activeParent, visibleItems]
@@ -106,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);
@@ -196,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",
           {
@@ -232,7 +258,8 @@ var RsSidebar = forwardRef(
             ] })
           }
         ),
-        renderHeaderAction()
+        renderHeaderAction(),
+        renderModuleMenu()
       ] });
     };
     const renderHeaderAction = () => {
@@ -265,24 +292,14 @@ var RsSidebar = forwardRef(
       if (!hasModuleSelector || !isModuleMenuOpen) {
         return null;
       }
-      return /* @__PURE__ */ jsx(Menu.Root, { className: "rs-sidebar__module-menu", children: /* @__PURE__ */ jsx(Menu.List, { role: "menu", children: modules.map((module) => {
-        const isCurrent = module.active || module.text === displayedHeaderTitle;
-        return /* @__PURE__ */ jsx(
-          Menu.Item,
-          {
-            value: module.text,
-            className: [
-              "rs-sidebar__module-option",
-              isCurrent ? "rs-sidebar__module-option--active" : "",
-              module.disabled || isCurrent ? "rs-sidebar__module-option--disabled" : ""
-            ].filter(Boolean).join(" "),
-            disabled: module.disabled || isCurrent,
-            onSelect: () => selectModule(module),
-            children: module.text
-          },
-          module.text
-        );
-      }) }) });
+      return /* @__PURE__ */ jsx(
+        Menu,
+        {
+          className: "rs-sidebar__module-menu",
+          style: { "--rs-sidebar-menu-top": `${menuTop}px` },
+          model: moduleMenuItems
+        }
+      );
     };
     const renderFooterContent = () => {
       if (typeof footer === "function") {
@@ -327,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

@@ -132,7 +132,7 @@
   line-height: 1;
   text-overflow: ellipsis;
 }
-.rs-sidebar__module-menu {
+.rs-sidebar__module-menu.p-menu {
   background: var(--rs-sidebar-background);
   border: 1px solid var(--rs-sidebar-border);
   border-radius: 4px;
@@ -142,37 +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-menu .rs-sidebar__module-option {
+.rs-sidebar__module-option .p-menuitem-content {
   color: var(--rs-sidebar-color);
   border-radius: 0;
+}
+.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-menu .rs-sidebar__module-option:not(.p-disabled):hover,
-.rs-sidebar__module-menu .rs-sidebar__module-option--active {
+.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-menu .rs-sidebar__module-option--disabled {
+.rs-sidebar__module-option--disabled .p-menuitem-content {
   color: var(--rs-sidebar-muted);
   cursor: not-allowed;
 }
-.rs-sidebar__module-menu .rs-sidebar__module-option--disabled:hover {
+.rs-sidebar__module-option--disabled .p-menuitem-content:hover {
   background: transparent;
 }
-.rs-sidebar__module-menu .rs-sidebar__module-option.p-focus {
+.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-menuitem-link {
   outline: 2px solid var(--rs-color-stroke-focused, #48a0d4);
   outline-offset: -2px;
 }
@@ -294,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-DA5JOU36.js";
+} from "../../chunk-H3GFVSAQ.js";
 import "../../chunk-PEJOAJYL.js";
 import "../../chunk-D4ZW5VUU.js";
 export {

package/dist/index.css

@@ -182,7 +182,7 @@
   line-height: 1;
   text-overflow: ellipsis;
 }
-.rs-sidebar__module-menu {
+.rs-sidebar__module-menu.p-menu {
   background: var(--rs-sidebar-background);
   border: 1px solid var(--rs-sidebar-border);
   border-radius: 4px;
@@ -192,37 +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-menu .rs-sidebar__module-option {
+.rs-sidebar__module-option .p-menuitem-content {
   color: var(--rs-sidebar-color);
   border-radius: 0;
+}
+.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-menu .rs-sidebar__module-option:not(.p-disabled):hover,
-.rs-sidebar__module-menu .rs-sidebar__module-option--active {
+.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-menu .rs-sidebar__module-option--disabled {
+.rs-sidebar__module-option--disabled .p-menuitem-content {
   color: var(--rs-sidebar-muted);
   cursor: not-allowed;
 }
-.rs-sidebar__module-menu .rs-sidebar__module-option--disabled:hover {
+.rs-sidebar__module-option--disabled .p-menuitem-content:hover {
   background: transparent;
 }
-.rs-sidebar__module-menu .rs-sidebar__module-option.p-focus {
+.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-menuitem-link {
   outline: 2px solid var(--rs-color-stroke-focused, #48a0d4);
   outline-offset: -2px;
 }
@@ -344,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-DA5JOU36.js";
+} from "./chunk-H3GFVSAQ.js";
 import {
   RsIcon_default,
   rsPrimeIcon

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robosophy/ui-react",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "private": false,
   "license": "UNLICENSED",
   "type": "module",
@@ -43,9 +43,10 @@
     "test": "vitest run"
   },
   "peerDependencies": {
-    "@primereact/ui": ">=11",
-    "react": ">=19",
-    "react-dom": ">=19"
+    "@robosophy/prime-theme": ">=2.0.0",
+    "primereact": ">=10",
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -54,15 +55,17 @@
     "react-dom": {
       "optional": true
     },
-    "@primereact/ui": {
+    "primereact": {
+      "optional": true
+    },
+    "@robosophy/prime-theme": {
       "optional": true
     }
   },
   "dependencies": {
-    "@robosophy/tokens": "^1.0.4"
+    "@robosophy/tokens": "^1.1.0"
   },
   "devDependencies": {
-    "@primereact/ui": "^11.2.0",
     "@storybook/addon-docs": "^9.1.0",
     "@storybook/react": "^9.1.0",
     "@storybook/react-vite": "^9.1.0",
@@ -71,7 +74,7 @@
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "jsdom": "^26.1.0",
-    "primereact": "^11.2.0",
+    "primereact": "^10.9.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "storybook": "^9.1.0",