@robosophy/ui-react 1.0.0

package/dist/chunk-AEWPQXHG.js

@@ -0,0 +1,405 @@
+import {
+  RsIcon_default
+} from "./chunk-PEJOAJYL.js";
+
+// src/components/RsSidebar/RsSidebar.tsx
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Menu } from "primereact/menu";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var variantIconMap = {
+  pc: "article",
+  alta: "account_circle",
+  cc: "account_balance_wallet",
+  pog: "account_balance_wallet",
+  cyo: "nest_eco_leaf"
+};
+function isVisible(item) {
+  return item.visible !== false;
+}
+function hasVisibleChildren(item) {
+  return (item.children ?? []).some(isVisible);
+}
+var RsSidebar = forwardRef(
+  ({
+    items,
+    footerItems = [],
+    modules = [],
+    navigateOnModuleSelect = false,
+    title = "",
+    icon,
+    expanded = false,
+    expandOnHover = true,
+    mobileOpen = false,
+    ariaLabel = "Navegacion principal",
+    variant = "cyo",
+    onItemClick,
+    onCloseMobile,
+    onExpandedChange,
+    onModuleSelect,
+    header,
+    headerAction,
+    renderItem,
+    footer
+  }, ref) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const [activeParent, setActiveParent] = useState(null);
+    const [isModuleMenuOpen, setIsModuleMenuOpen] = useState(false);
+    const rootRef = useRef(null);
+    const isFirstRenderRef = useRef(true);
+    const onExpandedChangeRef = useRef(onExpandedChange);
+    onExpandedChangeRef.current = onExpandedChange;
+    const setRefs = useCallback(
+      (node) => {
+        rootRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const visibleItems = useMemo(() => items.filter(isVisible), [items]);
+    const visibleFooterItems = useMemo(() => footerItems.filter(isVisible), [footerItems]);
+    const activeModule = useMemo(
+      () => modules.find((module) => module.active) ?? modules.find((module) => module.text === title) ?? null,
+      [modules, title]
+    );
+    const displayedHeaderTitle = useMemo(
+      () => activeModule?.text || title,
+      [activeModule, title]
+    );
+    const selectModule = useCallback(
+      (module) => {
+        if (module.disabled) {
+          return;
+        }
+        setIsModuleMenuOpen(false);
+        onModuleSelect?.(module);
+        if (navigateOnModuleSelect && typeof window !== "undefined" && module.link) {
+          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]
+    );
+    const isExpanded = useMemo(
+      () => expanded || mobileOpen || isHovered,
+      [expanded, mobileOpen, isHovered]
+    );
+    const hasHeaderAction = mobileOpen;
+    const hasModuleSelector = useMemo(() => modules.length > 0, [modules]);
+    const resolvedIcon = useMemo(() => icon ?? variantIconMap[variant], [icon, variant]);
+    const rootClass = useMemo(() => {
+      const classes = ["rs-sidebar", `rs-sidebar--${variant}`];
+      if (isExpanded) {
+        classes.push("rs-sidebar--expanded");
+      }
+      if (mobileOpen) {
+        classes.push("rs-sidebar--mobile-open");
+      }
+      if (activeParent) {
+        classes.push("rs-sidebar--submenu");
+      }
+      return classes.join(" ");
+    }, [variant, isExpanded, mobileOpen, activeParent]);
+    useEffect(() => {
+      if (!mobileOpen) {
+        setActiveParent(null);
+      }
+      setIsModuleMenuOpen(false);
+    }, [mobileOpen]);
+    useEffect(() => {
+      if (activeParent && !items.some((i) => i.id === activeParent.id)) {
+        setActiveParent(null);
+      }
+    }, [items, activeParent]);
+    useEffect(() => {
+      if (isFirstRenderRef.current) {
+        isFirstRenderRef.current = false;
+        return;
+      }
+      if (!isExpanded) {
+        setActiveParent(null);
+      }
+      onExpandedChangeRef.current?.(isExpanded);
+    }, [isExpanded]);
+    useEffect(() => {
+      setIsModuleMenuOpen(false);
+    }, [activeParent]);
+    useEffect(() => {
+      const handleDocumentPointerDown = (event) => {
+        if (!isModuleMenuOpen || !rootRef.current) {
+          return;
+        }
+        if (!rootRef.current.contains(event.target)) {
+          setIsModuleMenuOpen(false);
+        }
+      };
+      document.addEventListener("pointerdown", handleDocumentPointerDown);
+      return () => {
+        document.removeEventListener("pointerdown", handleDocumentPointerDown);
+      };
+    }, [isModuleMenuOpen]);
+    const setHovered = useCallback(
+      (value) => {
+        if (!expandOnHover || mobileOpen) {
+          return;
+        }
+        setIsHovered(value);
+        if (!value) {
+          setIsModuleMenuOpen(false);
+        }
+      },
+      [expandOnHover, mobileOpen]
+    );
+    const handleItemClick = useCallback(
+      (item) => {
+        if (item.disabled) {
+          return;
+        }
+        if (hasVisibleChildren(item)) {
+          setActiveParent(item);
+          return;
+        }
+        onItemClick?.(item);
+      },
+      [onItemClick]
+    );
+    const goBack = useCallback(() => {
+      setActiveParent(null);
+    }, []);
+    const closeMobile = useCallback(() => {
+      setActiveParent(null);
+      setIsModuleMenuOpen(false);
+      onCloseMobile?.();
+    }, [onCloseMobile]);
+    const toggleModuleMenu = useCallback(() => {
+      if (!hasModuleSelector || !isExpanded) {
+        return;
+      }
+      setIsModuleMenuOpen((prev) => !prev);
+    }, [hasModuleSelector, isExpanded]);
+    const renderHeaderContent = () => {
+      if (typeof header === "function") {
+        const slotProps = {
+          expanded: isExpanded,
+          activeParent,
+          closeMobile,
+          goBack
+        };
+        return header(slotProps);
+      }
+      if (header) {
+        return header;
+      }
+      return /* @__PURE__ */ jsxs("header", { className: "rs-sidebar__header", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: [
+              "rs-sidebar__brand",
+              hasModuleSelector ? "rs-sidebar__brand--trigger" : ""
+            ].filter(Boolean).join(" "),
+            children: hasModuleSelector ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: "rs-sidebar__module-trigger",
+                type: "button",
+                "aria-expanded": isModuleMenuOpen,
+                "aria-haspopup": "menu",
+                onClick: toggleModuleMenu,
+                children: [
+                  /* @__PURE__ */ jsx(RsIcon_default, { name: resolvedIcon }),
+                  /* @__PURE__ */ jsx("span", { className: "rs-sidebar__title", children: displayedHeaderTitle }),
+                  /* @__PURE__ */ jsx(
+                    RsIcon_default,
+                    {
+                      className: "rs-sidebar__module-chevron",
+                      name: isModuleMenuOpen ? "arrow_drop_up" : "arrow_drop_down",
+                      color: "secondary",
+                      size: "sm"
+                    }
+                  )
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(RsIcon_default, { name: resolvedIcon }),
+              /* @__PURE__ */ jsx("span", { className: "rs-sidebar__title", children: displayedHeaderTitle })
+            ] })
+          }
+        ),
+        renderHeaderAction()
+      ] });
+    };
+    const renderHeaderAction = () => {
+      if (typeof headerAction === "function") {
+        const slotProps = {
+          activeParent,
+          closeMobile,
+          goBack
+        };
+        return headerAction(slotProps);
+      }
+      if (headerAction) {
+        return headerAction;
+      }
+      if (hasHeaderAction) {
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "rs-sidebar__header-button",
+            type: "button",
+            "aria-label": "Cerrar menu",
+            onClick: closeMobile,
+            children: /* @__PURE__ */ jsx(RsIcon_default, { name: "close" })
+          }
+        );
+      }
+      return null;
+    };
+    const renderModuleMenu = () => {
+      if (!hasModuleSelector || !isModuleMenuOpen) {
+        return null;
+      }
+      return /* @__PURE__ */ jsx(
+        Menu,
+        {
+          className: "rs-sidebar__module-menu",
+          model: moduleMenuItems,
+          pt: {
+            root: { role: "menu" }
+          }
+        }
+      );
+    };
+    const renderFooterContent = () => {
+      if (typeof footer === "function") {
+        const slotProps = {
+          items: visibleFooterItems,
+          expanded: isExpanded
+        };
+        return footer(slotProps);
+      }
+      if (footer) {
+        return footer;
+      }
+      if (visibleFooterItems.length > 0) {
+        return /* @__PURE__ */ jsx("nav", { className: "rs-sidebar__footer", "aria-label": "Acciones secundarias", children: /* @__PURE__ */ jsx("ul", { className: "rs-sidebar__list", children: visibleFooterItems.map((item) => /* @__PURE__ */ jsx("li", { className: "rs-sidebar__list-item", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: [
+              "rs-sidebar__item",
+              "rs-sidebar__item--footer",
+              item.active ? "rs-sidebar__item--active" : "",
+              item.disabled ? "rs-sidebar__item--disabled" : ""
+            ].filter(Boolean).join(" "),
+            type: "button",
+            disabled: item.disabled,
+            onClick: () => handleItemClick(item),
+            children: [
+              item.icon && /* @__PURE__ */ jsx(RsIcon_default, { className: "rs-sidebar__item-icon", name: item.icon }),
+              /* @__PURE__ */ jsx("span", { className: "rs-sidebar__item-label", children: item.label })
+            ]
+          }
+        ) }, item.id)) }) });
+      }
+      return null;
+    };
+    return /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        ref: setRefs,
+        "aria-label": ariaLabel,
+        className: rootClass,
+        onMouseEnter: () => setHovered(true),
+        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(
+                "button",
+                {
+                  className: "rs-sidebar__item rs-sidebar__item--back",
+                  type: "button",
+                  onClick: goBack,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      RsIcon_default,
+                      {
+                        className: "rs-sidebar__item-icon",
+                        name: "arrow_left",
+                        fill: true
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "rs-sidebar__item-label", children: activeParent.label })
+                  ]
+                }
+              ) }),
+              displayedItems.map((item) => /* @__PURE__ */ jsx("li", { className: "rs-sidebar__list-item", children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: [
+                    "rs-sidebar__item",
+                    item.active ? "rs-sidebar__item--active" : "",
+                    item.disabled ? "rs-sidebar__item--disabled" : "",
+                    hasVisibleChildren(item) ? "rs-sidebar__item--parent" : ""
+                  ].filter(Boolean).join(" "),
+                  type: "button",
+                  disabled: item.disabled,
+                  onClick: () => handleItemClick(item),
+                  children: renderItem ? renderItem(item, isExpanded) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    item.icon && /* @__PURE__ */ jsx(
+                      RsIcon_default,
+                      {
+                        className: "rs-sidebar__item-icon",
+                        name: item.icon
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "rs-sidebar__item-label", children: item.label }),
+                    hasVisibleChildren(item) && /* @__PURE__ */ jsx(
+                      RsIcon_default,
+                      {
+                        className: "rs-sidebar__item-chevron",
+                        name: "chevron_right",
+                        size: "sm"
+                      }
+                    )
+                  ] })
+                }
+              ) }, item.id))
+            ] }) }),
+            renderFooterContent()
+          ] })
+        ]
+      }
+    );
+  }
+);
+RsSidebar.displayName = "RsSidebar";
+var RsSidebar_default = RsSidebar;
+
+export {
+  RsSidebar_default
+};

package/dist/chunk-D4ZW5VUU.js

@@ -0,0 +1,12 @@
+// src/components/RsIcon/gradeUtils.ts
+var GRADE_VARIANTS = [0, -25, 200];
+function clampGrade(grade) {
+  return GRADE_VARIANTS.reduce(
+    (nearest, g) => Math.abs(g - grade) < Math.abs(nearest - grade) ? g : nearest
+  );
+}
+
+export {
+  GRADE_VARIANTS,
+  clampGrade
+};

package/dist/chunk-PEJOAJYL.js

@@ -0,0 +1,115 @@
+import {
+  clampGrade
+} from "./chunk-D4ZW5VUU.js";
+
+// src/components/RsIcon/RsIcon.tsx
+import { forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SEMANTIC_COLORS = ["primary", "secondary", "success", "warning", "danger", "inherit"];
+var RsIcon = forwardRef(
+  ({
+    name,
+    family = "outlined",
+    size = "md",
+    color = "inherit",
+    fill = false,
+    weight = 400,
+    grade = 0,
+    interactive = false,
+    ariaLabel,
+    notification = false,
+    notificationColor,
+    className
+  }, ref) => {
+    const symbolHref = useMemo(() => {
+      let gradeSuffix = "";
+      const clamped = clampGrade(grade);
+      if (clamped !== 0) {
+        gradeSuffix = clamped > 0 ? `-grad${clamped}` : `-gradN${Math.abs(clamped)}`;
+      }
+      const fillSuffix = fill ? "-fill" : "";
+      const weightSuffix = weight !== 400 ? `-wght${weight}` : "";
+      return `#rs-icon-${family}-${name}${gradeSuffix}${fillSuffix}${weightSuffix}`;
+    }, [family, name, grade, fill, weight]);
+    const isCustomColor = !SEMANTIC_COLORS.includes(color);
+    const iconSize = useMemo(() => {
+      if (typeof size === "number") return size;
+      if (size === "sm") return 18;
+      if (size === "lg") return 32;
+      return 24;
+    }, [size]);
+    const rootClass = useMemo(() => {
+      const classes = ["rs-icon", `rs-icon--${family}`];
+      if (!isCustomColor) {
+        classes.push(`rs-icon--${color}`);
+      }
+      if (interactive) {
+        classes.push("rs-icon--interactive");
+      }
+      if (size === "sm") {
+        classes.push("rs-icon--sm");
+      } else if (size === "lg") {
+        classes.push("rs-icon--lg");
+      } else {
+        classes.push("rs-icon--md");
+      }
+      if (className) {
+        classes.push(className);
+      }
+      return classes.join(" ");
+    }, [family, color, isCustomColor, interactive, size, className]);
+    const rootStyle = useMemo(
+      () => ({
+        "--rs-icon-color": isCustomColor ? color : void 0,
+        "--rs-icon-size": `${iconSize}px`
+      }),
+      [isCustomColor, color, iconSize]
+    );
+    const ariaHidden = ariaLabel ? void 0 : true;
+    const role = ariaLabel ? "img" : void 0;
+    const notificationStyle = useMemo(
+      () => notificationColor ? { backgroundColor: notificationColor } : void 0,
+      [notificationColor]
+    );
+    const svgElement = /* @__PURE__ */ jsx(
+      "svg",
+      {
+        ref,
+        "aria-hidden": ariaHidden,
+        "aria-label": ariaLabel,
+        className: rootClass,
+        role,
+        style: rootStyle,
+        width: iconSize,
+        height: iconSize,
+        fill: "currentColor",
+        children: /* @__PURE__ */ jsx("use", { href: symbolHref })
+      }
+    );
+    if (notification) {
+      return /* @__PURE__ */ jsxs("span", { className: "rs-icon-wrap", children: [
+        svgElement,
+        /* @__PURE__ */ jsx("span", { className: "rs-icon__notification", "aria-hidden": "true", style: notificationStyle })
+      ] });
+    }
+    return svgElement;
+  }
+);
+RsIcon.displayName = "RsIcon";
+var RsIcon_default = RsIcon;
+
+// src/components/RsIcon/index.ts
+var iconNamePattern = /^[a-z0-9_]+$/;
+function rsPrimeIcon(name, options = {}) {
+  const family = options.family ?? "outlined";
+  const normalizedName = name.trim();
+  if (!iconNamePattern.test(normalizedName)) {
+    throw new Error(`Invalid Material Symbols icon name: "${name}"`);
+  }
+  return `rs-icon rs-icon--prime rs-icon--${family} rs-icon-${normalizedName}`;
+}
+
+export {
+  RsIcon_default,
+  rsPrimeIcon
+};

package/dist/components/RsIcon/index.css

@@ -0,0 +1,49 @@
+/* src/components/RsIcon/RsIcon.css */
+.rs-icon {
+  align-items: center;
+  color: var(--rs-icon-color, currentColor);
+  display: inline-flex;
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  height: var(--rs-icon-size, 24px);
+  justify-content: center;
+  user-select: none;
+  width: var(--rs-icon-size, 24px);
+}
+.rs-icon--interactive {
+  cursor: pointer;
+}
+.rs-icon--primary {
+  color: var(--rs-color-icon-primary, #48a0d4);
+}
+.rs-icon--secondary {
+  color: var(--rs-color-icon-secondary, #000000);
+}
+.rs-icon--success {
+  color: var(--rs-color-icon-success, #4EAE01);
+}
+.rs-icon--warning {
+  color: var(--rs-color-icon-warning, #FF9001);
+}
+.rs-icon--danger {
+  color: var(--rs-color-icon-danger, #d80115);
+}
+.rs-icon--inherit {
+  color: currentColor;
+}
+.rs-icon-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+}
+.rs-icon__notification {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: var(--rs-color-yellow-500, #ff9001);
+}

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

@@ -0,0 +1,10 @@
+// AUTO-GENERATED FILE. DO NOT EDIT MANUALLY.
+import { b as RsIconProps, e as RsPrimeIconOptions } from '../../RsIcon.types-eBKVmRTF.js';
+export { R as RsIconColor, a as RsIconFamily, c as RsIconSize, d as RsIconWeight } from '../../RsIcon.types-eBKVmRTF.js';
+import * as react from 'react';
+
+declare const RsIcon: react.ForwardRefExoticComponent<RsIconProps & react.RefAttributes<SVGSVGElement>>;
+
+declare function rsPrimeIcon(name: string, options?: RsPrimeIconOptions): string;
+
+export { RsIconProps, RsPrimeIconOptions, RsIcon as default, rsPrimeIcon };

package/dist/components/RsIcon/index.js

@@ -0,0 +1,10 @@
+// AUTO-GENERATED FILE. DO NOT EDIT MANUALLY.
+import {
+  RsIcon_default,
+  rsPrimeIcon
+} from "../../chunk-PEJOAJYL.js";
+import "../../chunk-D4ZW5VUU.js";
+export {
+  RsIcon_default as default,
+  rsPrimeIcon
+};