@mks2508/mks-ui 0.6.7 → 0.7.0

package/dist/react-ui/blocks/Sidebar/SidebarNav.js

@@ -0,0 +1,317 @@
+"use client";
+
+import { cn } from "../../lib/utils.js";
+import { DEFAULT_ANIMATIONS, DEFAULT_DIMENSIONS, DEFAULT_VISUAL_STYLE, SIDEBAR_ARIA_LABELS, SIDEBAR_CSS_VARIABLES, SIDEBAR_TAILWIND_CLASSES } from "./Sidebar.constants.js";
+import { useSidebarContext } from "./hooks/useSidebarContext.js";
+import { useSubContent } from "./hooks/useSubContent.js";
+import { useSidebarIndicator } from "./hooks/useSidebarIndicator.js";
+import { useSidebarKeyboard } from "./hooks/useSidebarKeyboard.js";
+import { SidebarFluidIndicator } from "./SidebarFluidIndicator.js";
+import { SidebarTooltip } from "./SidebarTooltip.js";
+import { generateSidebarStyles } from "./Sidebar.styles.js";
+import { forwardRef, useEffect, useMemo, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Sidebar/SidebarNav.tsx
+/**
+* Componente de navegación del Sidebar
+*
+* @description
+* Contenedor de navegación que renderiza un elemento `<nav>` por defecto.
+* Gestiona los eventos de mouse y teclado para el indicador visual y
+* la navegación accesible.
+*
+* Este componente:
+* - Aplica data attributes para reflejar el estado (open/collapsed)
+* - Gestiona eventos de mouse para el indicador visual
+* - Gestiona navegación por teclado (arrows, home, end)
+* - Expone una ref al elemento DOM para mediciones
+*
+* Usa forwardRef para permitir acceso al elemento DOM desde componentes padre.
+*
+* @example
+* ```tsx
+* <Sidebar>
+*   <SidebarNav className="bg-zinc-900 border-zinc-800">
+*     <SidebarToggle />
+*     <SidebarIndicator />
+*     <SidebarContent>
+*       <SidebarItem href="/" />
+*     </SidebarContent>
+*   </SidebarNav>
+* </Sidebar>
+* ```
+*
+* @example
+* ```tsx
+* // Con data attributes para styling
+* <SidebarNav className="data-[open=true]:w-64 data-[open=false]:w-16">
+*   {children}
+* </SidebarNav>
+* ```
+*
+* @example
+* ```tsx
+* // Con elemento personalizado
+* <SidebarNav as="aside" aria-label="Navegación lateral">
+*   {children}
+* </SidebarNav>
+* ```
+*/
+const SidebarNav = forwardRef(function SidebarNav({ children, className = "", style, "aria-label": ariaLabel, as, ...props }, forwardedRef) {
+	const { defaultOpen, navRef, indicatorRef, dimensions, animations, collapseMode, hideBehaviour, hideOpensBehavior, layoutBehaviour, toggleId, enableFluidIndicator, enableTooltip, debug } = useSidebarContext();
+	const localNavRef = useRef(null);
+	useEffect(() => {
+		const node = localNavRef.current;
+		if (!node) return;
+		if (navRef && "current" in navRef) navRef.current = node;
+		if (typeof forwardedRef === "function") forwardedRef(node);
+		else if (forwardedRef) forwardedRef.current = node;
+	}, [navRef, forwardedRef]);
+	const { isVisible, hoveredItemId, hoveredLabel, currentItemElement, handleMouseMove, handleMouseEnter, handleMouseLeave, handleFocus, handleBlur, clearHoveredState } = useSidebarIndicator();
+	const { getSubContent } = useSubContent();
+	const subContentData = hoveredItemId ? getSubContent(hoveredItemId) : null;
+	useSidebarKeyboard();
+	const sidebarStyles = useMemo(() => generateSidebarStyles({
+		dimensions: {
+			...DEFAULT_DIMENSIONS,
+			...dimensions
+		},
+		animations: {
+			...DEFAULT_ANIMATIONS,
+			...animations
+		},
+		collapseMode,
+		hideOpensBehavior,
+		layoutBehaviour,
+		visualStyle: {
+			...DEFAULT_VISUAL_STYLE,
+			...dimensions.visualStyle
+		}
+	}), [
+		dimensions,
+		animations,
+		collapseMode,
+		hideOpensBehavior,
+		layoutBehaviour,
+		dimensions.visualStyle
+	]);
+	const Component = as || "nav";
+	const shouldShowToggle = collapseMode === "collapse" || hideBehaviour === "showIndicator";
+	const styleKey = useMemo(() => `${dimensions.collapsedWidth}-${dimensions.expandedWidth}-${layoutBehaviour}-${JSON.stringify(dimensions.visualStyle || {})}`, [
+		dimensions,
+		layoutBehaviour,
+		dimensions.visualStyle
+	]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: sidebarStyles } }, styleKey),
+		/* @__PURE__ */ jsxs("div", {
+			className: `sidebar-wrapper ${SIDEBAR_TAILWIND_CLASSES.wrapper} ${className}`,
+			style,
+			"data-layout": layoutBehaviour,
+			children: [
+				/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					id: toggleId,
+					className: "sr-only",
+					defaultChecked: defaultOpen,
+					"aria-label": "Toggle sidebar"
+				}),
+				shouldShowToggle && /* @__PURE__ */ jsx("div", {
+					className: `toggle-button-wrapper ${SIDEBAR_TAILWIND_CLASSES.toggleButtonWrapper}`,
+					children: /* @__PURE__ */ jsx("label", {
+						htmlFor: toggleId,
+						className: `${SIDEBAR_TAILWIND_CLASSES.toggleButton} bg-zinc-800 border border-zinc-700 hover:bg-zinc-700 ${collapseMode === "hide" && hideBehaviour === "showIndicator" ? "shadow-lg" : ""}`,
+						"aria-label": "Toggle sidebar",
+						children: /* @__PURE__ */ jsx("svg", {
+							className: "toggle-icon w-3 h-3 text-zinc-400",
+							fill: "none",
+							stroke: "currentColor",
+							viewBox: "0 0 24 24",
+							children: collapseMode === "hide" ? /* @__PURE__ */ jsx("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M9 5l7 7-7 7"
+							}) : /* @__PURE__ */ jsx("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M15 19l-7-7 7-7"
+							})
+						})
+					})
+				}),
+				/* @__PURE__ */ jsxs(Component, {
+					ref: localNavRef,
+					className: `sidebar-nav ${SIDEBAR_TAILWIND_CLASSES.nav}`,
+					onMouseMove: handleMouseMove,
+					onMouseEnter: handleMouseEnter,
+					onMouseLeave: handleMouseLeave,
+					onFocus: handleFocus,
+					onBlur: handleBlur,
+					"aria-label": ariaLabel || SIDEBAR_ARIA_LABELS.mainNavigation,
+					...props,
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							ref: indicatorRef,
+							className: `sidebar-indicator ${SIDEBAR_TAILWIND_CLASSES.indicator} pointer-events-none`,
+							style: {
+								background: "var(--sidebar-primary)",
+								transform: "translateY(-50%)",
+								opacity: isVisible ? 1 : 0,
+								height: `var(${SIDEBAR_CSS_VARIABLES.indicatorHeight})`,
+								width: "0.25rem",
+								anchorName: "--sidebar-indicator"
+							},
+							"aria-hidden": "true"
+						}),
+						debug && currentItemElement && navRef.current && (() => {
+							const navRect = navRef.current.getBoundingClientRect();
+							const itemRect = currentItemElement.getBoundingClientRect();
+							const top = itemRect.top - navRect.top;
+							const height = itemRect.height;
+							return /* @__PURE__ */ jsxs(Fragment, { children: [
+								/* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: `
+                    @keyframes threshold-pulse {
+                      0%, 100% {
+                        opacity: 0.6;
+                        transform: scaleX(0.95);
+                      }
+                      50% {
+                        opacity: 1;
+                        transform: scaleX(1);
+                      }
+                    }
+                  ` } }),
+								/* @__PURE__ */ jsx("div", {
+									className: "absolute pointer-events-none",
+									style: {
+										top: `${top}px`,
+										left: 0,
+										width: "100%",
+										height: "2px",
+										background: "linear-gradient(90deg, transparent 0%, rgba(251, 191, 36, 0.9) 10%, rgba(251, 191, 36, 0.9) 90%, transparent 100%)",
+										zIndex: 200,
+										animation: "threshold-pulse 2s ease-in-out infinite"
+									},
+									children: /* @__PURE__ */ jsxs("div", {
+										className: "absolute -top-4 right-2 text-[8px] text-amber-300 font-mono bg-black/90 px-1.5 py-0.5 rounded whitespace-nowrap",
+										children: [
+											"TOP: ",
+											Math.round(top),
+											"px"
+										]
+									})
+								}),
+								/* @__PURE__ */ jsx("div", {
+									className: "absolute pointer-events-none",
+									style: {
+										top: `${top + height}px`,
+										left: 0,
+										width: "100%",
+										height: "2px",
+										background: "linear-gradient(90deg, transparent 0%, rgba(239, 68, 68, 0.9) 10%, rgba(239, 68, 68, 0.9) 90%, transparent 100%)",
+										zIndex: 200,
+										animation: "threshold-pulse 2s ease-in-out infinite 1s"
+									},
+									children: /* @__PURE__ */ jsxs("div", {
+										className: "absolute -bottom-4 right-2 text-[8px] text-red-300 font-mono bg-black/90 px-1.5 py-0.5 rounded whitespace-nowrap",
+										children: [
+											"BOTTOM: ",
+											Math.round(top + height),
+											"px (H: ",
+											Math.round(height),
+											"px)"
+										]
+									})
+								})
+							] });
+						})(),
+						enableFluidIndicator && /* @__PURE__ */ jsx(SidebarFluidIndicator, {
+							targetElement: currentItemElement,
+							isVisible
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "relative z-10 h-full flex flex-col",
+							children
+						})
+					]
+				})
+			]
+		}),
+		enableTooltip && /* @__PURE__ */ jsxs(Fragment, { children: [subContentData && /* @__PURE__ */ jsx(SidebarTooltip, {
+			title: subContentData.title,
+			debug,
+			onMouseLeave: clearHoveredState,
+			children: subContentData.subContent
+		}), !subContentData && hoveredLabel && /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: `
+                  @keyframes activatePointerEventsSimple {
+                    to { pointer-events: all; }
+                  }
+
+                  .sidebar-tooltip-simple::before {
+                    content: '';
+                    position: absolute;
+                    right: 100%;
+                    top: 0;
+                    width: calc(var(--sidebar-tooltip-distance) + 0.25rem + 2px);
+                    height: 100%;
+                    clip-path: polygon(0% 25%, 100% 0%, 100% 100%, 0% 75%);
+                    pointer-events: none;
+                    animation: activatePointerEventsSimple 0s 0.15s forwards;
+                    z-index: -1;
+                    scale: 1;
+                    transition: scale 0s 0.2s;
+                    ${debug ? `
+                      background: repeating-linear-gradient(
+                        45deg,
+                        transparent,
+                        transparent 10px,
+                        rgba(244, 114, 182, 0.15) 10px,
+                        rgba(244, 114, 182, 0.15) 20px
+                      );
+                      border: 2px dashed rgb(244 114 182);
+                    ` : ""}
+                  }
+                ` } }),
+			debug && /* @__PURE__ */ jsx("div", {
+				className: "absolute text-[9px] text-pink-300 font-mono bg-black/70 px-1.5 py-0.5 rounded pointer-events-none z-50",
+				style: {
+					position: "absolute",
+					positionAnchor: "--sidebar-indicator",
+					left: "anchor(right)",
+					marginLeft: "calc((var(--sidebar-width) + var(--sidebar-tooltip-distance)) / 2)",
+					top: "anchor(center)",
+					translate: "-50% -50%",
+					zIndex: 51
+				},
+				children: "SAFETY △"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "sidebar-tooltip-simple min-w-32",
+				style: {
+					position: "absolute",
+					positionAnchor: "--sidebar-indicator",
+					left: "anchor(right)",
+					marginLeft: "calc(var(--sidebar-width) + var(--sidebar-tooltip-distance))",
+					top: "anchor(center)",
+					translate: "0 -50%",
+					zIndex: 50
+				},
+				onMouseLeave: clearHoveredState,
+				children: /* @__PURE__ */ jsx("div", {
+					className: cn("px-3 py-2 rounded-lg shadow-lg border border-border bg-card backdrop-blur-sm"),
+					children: /* @__PURE__ */ jsx("span", {
+						className: "text-sm text-foreground pointer-events-auto",
+						children: hoveredLabel
+					})
+				})
+			})
+		] })] })
+	] });
+});
+
+//#endregion
+export { SidebarNav };

package/dist/react-ui/blocks/Sidebar/SidebarSafeArea.d.ts

@@ -0,0 +1,56 @@
+import type { SidebarSafeAreaProps } from "./Sidebar.types";
+/**
+ * Componente de área segura del Sidebar
+ *
+ * @description
+ * Área reservada en la parte superior o inferior del sidebar para
+ * contenido especial como logos, usuario, configuración, etc.
+ *
+ * Las áreas seguras:
+ * - No contienen items de navegación
+ * - Tienen altura porcentual configurable
+ * - Pueden mostrar patrones de debug
+ * - Son completamente customizables
+ *
+ * Casos de uso comunes:
+ * - Top: Logo, título de la aplicación, búsqueda
+ * - Bottom: Usuario, configuración, logout
+ *
+ * @example
+ * ```tsx
+ * <SidebarNav>
+ *   <SidebarSafeArea position="top" percent={20}>
+ *     <img src="/logo.png" alt="Logo" />
+ *   </SidebarSafeArea>
+ *
+ *   <SidebarContent>
+ *     <SidebarItem href="/" />
+ *   </SidebarContent>
+ *
+ *   <SidebarSafeArea position="bottom" percent={15}>
+ *     <UserProfile />
+ *   </SidebarSafeArea>
+ * </SidebarNav>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Con estilos custom
+ * <SidebarSafeArea
+ *   position="top"
+ *   className="bg-zinc-950 border-b border-zinc-800"
+ * >
+ *   <h1>Mi App</h1>
+ * </SidebarSafeArea>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Override de porcentaje
+ * <SidebarSafeArea position="bottom" percent={30}>
+ *   <ExtendedFooter />
+ * </SidebarSafeArea>
+ * ```
+ */
+export declare const SidebarSafeArea: import("react").ForwardRefExoticComponent<SidebarSafeAreaProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SidebarSafeArea.d.ts.map

package/dist/react-ui/blocks/Sidebar/SidebarSafeArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarSafeArea.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Sidebar/SidebarSafeArea.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AAO3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,eAAO,MAAM,eAAe,iHA8D3B,CAAA"}

package/dist/react-ui/blocks/Sidebar/SidebarSafeArea.js

@@ -0,0 +1,105 @@
+"use client";
+
+import { DEFAULT_CONFIG, SIDEBAR_DEBUG_PATTERNS, SIDEBAR_TAILWIND_CLASSES } from "./Sidebar.constants.js";
+import { useSidebarContext } from "./hooks/useSidebarContext.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Sidebar/SidebarSafeArea.tsx
+/**
+* Componente de área segura del Sidebar
+*
+* @description
+* Área reservada en la parte superior o inferior del sidebar para
+* contenido especial como logos, usuario, configuración, etc.
+*
+* Las áreas seguras:
+* - No contienen items de navegación
+* - Tienen altura porcentual configurable
+* - Pueden mostrar patrones de debug
+* - Son completamente customizables
+*
+* Casos de uso comunes:
+* - Top: Logo, título de la aplicación, búsqueda
+* - Bottom: Usuario, configuración, logout
+*
+* @example
+* ```tsx
+* <SidebarNav>
+*   <SidebarSafeArea position="top" percent={20}>
+*     <img src="/logo.png" alt="Logo" />
+*   </SidebarSafeArea>
+*
+*   <SidebarContent>
+*     <SidebarItem href="/" />
+*   </SidebarContent>
+*
+*   <SidebarSafeArea position="bottom" percent={15}>
+*     <UserProfile />
+*   </SidebarSafeArea>
+* </SidebarNav>
+* ```
+*
+* @example
+* ```tsx
+* // Con estilos custom
+* <SidebarSafeArea
+*   position="top"
+*   className="bg-zinc-950 border-b border-zinc-800"
+* >
+*   <h1>Mi App</h1>
+* </SidebarSafeArea>
+* ```
+*
+* @example
+* ```tsx
+* // Override de porcentaje
+* <SidebarSafeArea position="bottom" percent={30}>
+*   <ExtendedFooter />
+* </SidebarSafeArea>
+* ```
+*/
+const SidebarSafeArea = forwardRef(function SidebarSafeArea({ children, position, percent, className = "", style, as, ...props }, ref) {
+	const context = useSidebarContext();
+	const actualPercent = percent ?? (position === "top" ? DEFAULT_CONFIG.safeAreas.topPercent : DEFAULT_CONFIG.safeAreas.bottomPercent);
+	const Component = as || "div";
+	const { debug } = context;
+	const safeAreaStyles = {
+		height: `${actualPercent}%`,
+		...style
+	};
+	if (debug) return /* @__PURE__ */ jsx(Component, {
+		ref,
+		className: `${SIDEBAR_TAILWIND_CLASSES.debugBorder} ${className}`,
+		style: {
+			...safeAreaStyles,
+			background: "repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(34,197,94,0.1) 10px, rgba(34,197,94,0.1) 20px)",
+			borderBottom: position === "top" ? `2px dashed ${SIDEBAR_DEBUG_PATTERNS.borderColor}` : void 0,
+			borderTop: position === "bottom" ? `2px dashed ${SIDEBAR_DEBUG_PATTERNS.borderColor}` : void 0
+		},
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: `${SIDEBAR_TAILWIND_CLASSES.safeArea} relative h-full`,
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "absolute top-2 left-2 text-[10px] text-emerald-300 font-mono z-50 bg-black/60 px-1.5 py-0.5 rounded",
+				children: [
+					"SAFE ",
+					actualPercent,
+					"% (",
+					position.toUpperCase(),
+					")"
+				]
+			}), children]
+		})
+	});
+	return /* @__PURE__ */ jsx(Component, {
+		ref,
+		className: `${SIDEBAR_TAILWIND_CLASSES.safeArea} ${className}`,
+		style: safeAreaStyles,
+		...props,
+		children
+	});
+});
+
+//#endregion
+export { SidebarSafeArea };

package/dist/react-ui/blocks/Sidebar/SidebarSubContent.d.ts

@@ -0,0 +1,27 @@
+import type { SidebarSubContentProps } from "./Sidebar.types";
+/**
+ * SidebarSubContent - Contenedor para sub-contenido de un item
+ *
+ * @description
+ * Componente que define sub-contenido (tooltips/popovers) para un SidebarItem.
+ * Este componente no renderiza nada por sí mismo - solo sirve como marca
+ * para que SidebarItem registre el sub-contenido en el contexto.
+ *
+ * El sub-contenido se muestra cuando el usuario hace hover sobre el item
+ * padre en el SidebarTooltip.
+ *
+ * @example
+ * ```tsx
+ * <SidebarItem label="Settings">
+ *   <SidebarSubContent title="Settings">
+ *     <SidebarSubLink href="/settings/profile">Profile</SidebarSubLink>
+ *     <SidebarSubLink href="/settings/security">Security</SidebarSubLink>
+ *   </SidebarSubContent>
+ * </SidebarItem>
+ * ```
+ */
+export declare function SidebarSubContent({ children, title }: SidebarSubContentProps): null;
+export declare namespace SidebarSubContent {
+    var displayName: string;
+}
+//# sourceMappingURL=SidebarSubContent.d.ts.map

package/dist/react-ui/blocks/Sidebar/SidebarSubContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarSubContent.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Sidebar/SidebarSubContent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAA;AAE7D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,sBAAsB,QAI5E;yBAJe,iBAAiB"}

package/dist/react-ui/blocks/Sidebar/SidebarSubContent.js

@@ -0,0 +1,31 @@
+"use client";
+
+//#region src/react-ui/blocks/Sidebar/SidebarSubContent.tsx
+/**
+* SidebarSubContent - Contenedor para sub-contenido de un item
+*
+* @description
+* Componente que define sub-contenido (tooltips/popovers) para un SidebarItem.
+* Este componente no renderiza nada por sí mismo - solo sirve como marca
+* para que SidebarItem registre el sub-contenido en el contexto.
+*
+* El sub-contenido se muestra cuando el usuario hace hover sobre el item
+* padre en el SidebarTooltip.
+*
+* @example
+* ```tsx
+* <SidebarItem label="Settings">
+*   <SidebarSubContent title="Settings">
+*     <SidebarSubLink href="/settings/profile">Profile</SidebarSubLink>
+*     <SidebarSubLink href="/settings/security">Security</SidebarSubLink>
+*   </SidebarSubContent>
+* </SidebarItem>
+* ```
+*/
+function SidebarSubContent({ children, title }) {
+	return null;
+}
+SidebarSubContent.displayName = "SidebarSubContent";
+
+//#endregion
+export { SidebarSubContent };

package/dist/react-ui/blocks/Sidebar/SidebarSubLink.d.ts

@@ -0,0 +1,20 @@
+import type { SidebarSubLinkProps } from "./Sidebar.types";
+/**
+ * SidebarSubLink - Link dentro del tooltip/sub-content
+ *
+ * @description
+ * Componente que representa un link individual dentro del tooltip
+ * que aparece cuando se hace hover sobre un SidebarItem con sub-contenido.
+ *
+ * @example
+ * ```tsx
+ * <SidebarSubLink href="/settings/profile" icon={<UserIcon />}>
+ *   Profile
+ * </SidebarSubLink>
+ * ```
+ */
+export declare function SidebarSubLink({ href, children, icon, LinkComponent, linkProps, className, onClick, animationOrder, animationState, style, }: SidebarSubLinkProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SidebarSubLink {
+    var displayName: string;
+}
+//# sourceMappingURL=SidebarSubLink.d.ts.map

package/dist/react-ui/blocks/Sidebar/SidebarSubLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarSubLink.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Sidebar/SidebarSubLink.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAA;AAE1D;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,aAAa,EACb,SAAc,EACd,SAAS,EACT,OAAO,EACP,cAAc,EACd,cAAc,EACd,KAAK,GACN,EAAE,mBAAmB,2CA0BrB;yBArCe,cAAc"}

package/dist/react-ui/blocks/Sidebar/SidebarSubLink.js

@@ -0,0 +1,44 @@
+"use client";
+
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Sidebar/SidebarSubLink.tsx
+/**
+* SidebarSubLink - Link dentro del tooltip/sub-content
+*
+* @description
+* Componente que representa un link individual dentro del tooltip
+* que aparece cuando se hace hover sobre un SidebarItem con sub-contenido.
+*
+* @example
+* ```tsx
+* <SidebarSubLink href="/settings/profile" icon={<UserIcon />}>
+*   Profile
+* </SidebarSubLink>
+* ```
+*/
+function SidebarSubLink({ href, children, icon, LinkComponent, linkProps = {}, className, onClick, animationOrder, animationState, style }) {
+	const Component = LinkComponent || "a";
+	const customStyle = {
+		...style,
+		...animationOrder !== void 0 && { "--animation-order": animationOrder }
+	};
+	return /* @__PURE__ */ jsxs(Component, {
+		href,
+		...linkProps,
+		onClick,
+		className: cn("sidebar-sublink flex items-center rounded-md px-3 py-1.5 text-sm transition-colors w-full text-left", "text-foreground hover:bg-secondary/70 hover:text-primary", className),
+		style: customStyle,
+		"data-state": animationState,
+		"data-animation-order": animationOrder,
+		children: [icon && /* @__PURE__ */ jsx("span", {
+			className: "mr-2 text-muted-foreground",
+			children: icon
+		}), /* @__PURE__ */ jsx("span", { children })]
+	});
+}
+SidebarSubLink.displayName = "SidebarSubLink";
+
+//#endregion
+export { SidebarSubLink };

package/dist/react-ui/blocks/Sidebar/SidebarToggle.d.ts

@@ -0,0 +1,52 @@
+import type { SidebarToggleProps } from "./Sidebar.types";
+/**
+ * Componente de botón toggle del Sidebar
+ *
+ * @description
+ * Botón que controla el estado abierto/cerrado del sidebar.
+ * Renderiza un `<label>` por defecto que controla un checkbox oculto,
+ * permitiendo gestionar el estado con CSS puro (:checked selector).
+ *
+ * Características:
+ * - Soporta render props para acceso al estado (open, active)
+ * - Renderiza icono de chevron por defecto (customizable)
+ * - Aplica data attributes para styling CSS
+ * - Accesibilidad completa (aria-label, aria-expanded)
+ * - Soporta prop `as` para usar elemento/componente custom
+ *
+ * @example
+ * ```tsx
+ * // Uso básico con icono por defecto
+ * <SidebarToggle />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Con render props para estado
+ * <SidebarToggle>
+ *   {({ open, active }) => (
+ *     <div className={cn(active && 'bg-blue-500')}>
+ *       {open ? <CloseIcon /> : <MenuIcon />}
+ *     </div>
+ *   )}
+ * </SidebarToggle>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Con icono custom
+ * <SidebarToggle className="bg-zinc-800">
+ *   <CustomChevronIcon />
+ * </SidebarToggle>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Como botón real (sin checkbox)
+ * <SidebarToggle as="button" onClick={() => setOpen(!open)}>
+ *   Toggle
+ * </SidebarToggle>
+ * ```
+ */
+export declare const SidebarToggle: import("react").ForwardRefExoticComponent<SidebarToggleProps & import("react").RefAttributes<HTMLButtonElement | HTMLLabelElement>>;
+//# sourceMappingURL=SidebarToggle.d.ts.map

package/dist/react-ui/blocks/Sidebar/SidebarToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarToggle.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Sidebar/SidebarToggle.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAgD,MAAM,iBAAiB,CAAA;AAuBvG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,eAAO,MAAM,aAAa,qIA6EzB,CAAA"}