tcce-design-system-test 0.3.24 → 0.3.26

package/dist/tcce-design-system-components.d.ts

@@ -768,6 +768,24 @@ export declare const LinkVariantStyles: {
     plain: RuleSet<object>;
 };
 
+/**
+ * Renders a sidebar menu item with optional nested children, permissions, and navigation handling.
+ *
+ * @param item - The menu item data, including label, icon, href (internal), path (external), permissions, and optional children.
+ * @param userRoles - The current user's roles, used to determine permission to view the item.
+ * @param level - The nesting level of the menu item (default is 0).
+ * @param activePath - The current active navigation path, used to highlight the active item.
+ *
+ * @returns The rendered menu item, or `null` if the user does not have permission to view it.
+ *
+ * @remarks
+ * - Supports collapsing/expanding of nested menu items.
+ * - Handles permission checks for both the item and its children.
+ * - Integrates with sidebar collapse state and highlights the active path.
+ * - Internal navigation usa `href`; external usa `path` (URL completo provisto por `navigationConfig`).
+ */
+export declare const MenuItem: default_2.FC<Props>;
+
 /**
  * Button to open sidebar on mobile devices.
  * @param $hidden - Whether the button is hidden.
@@ -881,6 +899,14 @@ export declare interface PinSpecificProps {
     onPinComplete?: (value: string) => void;
 }
 
+declare interface Props {
+    item: NavigationItem;
+    userRoles: string[];
+    level?: number;
+    activePath?: string;
+    onNavigate?: (href: string) => void;
+}
+
 export declare const RadioInput: ForwardRefExoticComponent<RadioInputProps & RefAttributes<HTMLInputElement>>;
 
 export declare const RadioInputDot: default_2.ForwardRefExoticComponent<RadioInputDotProps & default_2.RefAttributes<HTMLInputElement>>;
@@ -1170,6 +1196,7 @@ declare interface SpinnerProps {
 export declare interface Step {
     id: string | number;
     label?: string;
+    content?: React.ReactNode | string;
 }
 
 /**

package/dist/tcce-design-system-components.js

@@ -9544,7 +9544,13 @@ const Ks = T.div`
     transform: rotate(${({ $open: e }) => e ? "90deg" : "0deg"});
     pointer-events: none;
     transition: transform 0.3s ease-out;
-`, vc = ({ item: e, userRoles: t, level: n = 0, activePath: r, onNavigate: o }) => {
+`, vc = ({
+  item: e,
+  userRoles: t,
+  level: n = 0,
+  activePath: r,
+  onNavigate: o
+}) => {
   const [s, i] = ze(!1), { isCollapsed: a, setIsMobileOpen: c } = gc(), u = Fe(
     () => (e.children || []).filter((S) => Ys(t, S.permissions)),
     [e.children, t]
@@ -10722,7 +10728,7 @@ function jv(e) {
 const rn = {
   sm: {
     circle: "2rem",
-    fontSize: N[16],
+    fontSize: N[14],
     line: "2px"
   },
   md: {
@@ -10732,7 +10738,7 @@ const rn = {
   },
   lg: {
     circle: "3.25rem",
-    fontSize: N[24],
+    fontSize: N[20],
     line: "3px"
   }
 }, sv = T.div`
@@ -10810,7 +10816,8 @@ const rn = {
     position: absolute;
     ${N[14]}
     font-weight: 500;
-    color: var(--color-main-blue-primary);
+    color: var(--color-main-white);
+    background-color: var(--color-main-blue-primary);
     padding: 0.5rem 0.75rem;
     border-radius: 0.375rem;
     white-space: nowrap;
@@ -10818,11 +10825,23 @@ const rn = {
     pointer-events: none;
     transition: opacity 0.2s ease;
     z-index: 10;
+    box-shadow: var(--shadow-black-button);
 
-    right: calc(100%);
+    right: calc(100% + 0.75rem);
     top: 50%;
     transform: translateY(-50%);
 
+    /* Arrow pointing to the circle */
+    &::after {
+        content: '';
+        position: absolute;
+        left: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+        border: 6px solid transparent;
+        border-left-color: var(--color-main-blue-primary);
+    }
+
     ${Pc}:hover & {
         opacity: 1;
     }
@@ -10856,7 +10875,7 @@ const rn = {
             l && (h.key === "Enter" || h.key === " ") && (h.preventDefault(), i(c));
           },
           children: [
-            c + 1,
+            a.content ?? c + 1,
             a.label && n === "vertical" && /* @__PURE__ */ m(uv, { children: a.label })
           ]
         }
@@ -10908,6 +10927,7 @@ export {
   Cy as LinkDisabledStyles,
   ky as LinkSizeStyles,
   Ty as LinkVariantStyles,
+  vc as MenuItem,
   Sy as MobileOpenBtn,
   xy as Nav,
   gy as Overlay,