@mks2508/mks-ui 0.6.8 → 0.7.0

package/dist/react-ui/blocks/BottomNavBar/useIOSSafariFix.js

@@ -0,0 +1,178 @@
+"use client";
+
+import { useCallback, useEffect, useRef } from "react";
+
+//#region src/react-ui/blocks/BottomNavBar/useIOSSafariFix.ts
+/**
+* @fileoverview iOS Safari detection and fix hooks
+* @description Handles iOS Safari viewport bugs with fixed positioning
+* @module MobileBottomNav/useIOSSafariFix
+* @version 1.0.0
+*
+* Known iOS Safari Bugs:
+* - Fixed elements shift when address bar shrinks/expands
+* - visualViewport.offsetTop doesn't reset after keyboard dismissal
+* - 100dvh creates gaps at bottom for overlays
+* - position: fixed breaks after keyboard interaction
+*
+* This hook provides workarounds for these issues.
+*/
+/**
+* Detects iOS version and Safari browser
+* @returns {IOSVersion} iOS detection result
+*/
+function detectIOSVersion() {
+	if (typeof window === "undefined" || typeof navigator === "undefined") return {
+		isIOS: false,
+		isSafari: false,
+		majorVersion: null,
+		minorVersion: null,
+		hasViewportBugs: false
+	};
+	const ua = navigator.userAgent;
+	const isIOS = /iPad|iPhone|iPod/.test(ua) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
+	const isSafari = /Safari/.test(ua) && !/Chrome|CriOS|FxiOS|EdgiOS/.test(ua);
+	let majorVersion = null;
+	let minorVersion = null;
+	const versionMatch = ua.match(/OS (\d+)_(\d+)/);
+	if (versionMatch) {
+		majorVersion = Number.parseInt(versionMatch[1], 10);
+		minorVersion = Number.parseInt(versionMatch[2], 10);
+	}
+	return {
+		isIOS,
+		isSafari,
+		majorVersion,
+		minorVersion,
+		hasViewportBugs: isIOS && majorVersion !== null && majorVersion >= 18
+	};
+}
+/**
+* Hook to apply iOS Safari viewport bug fixes
+*
+* @param {IOSSafariFixConfig} config - Configuration options
+* @returns {{ isKeyboardVisible: boolean; iosInfo: IOSVersion }} Hook state
+*
+* @example
+* ```tsx
+* const { isKeyboardVisible, iosInfo } = useIOSSafariFix({
+*   enableScrollFix: true,
+*   enableKeyboardFix: true,
+*   onKeyboardVisibilityChange: (visible) => console.log('Keyboard:', visible)
+* });
+* ```
+*/
+function useIOSSafariFix(config = {}) {
+	const { enableScrollFix = true, enableKeyboardFix = true, onKeyboardVisibilityChange, debug = false } = config;
+	const iosInfoRef = useRef(detectIOSVersion());
+	const isKeyboardVisibleRef = useRef(false);
+	const initialViewportHeightRef = useRef(null);
+	const log = useCallback((message, ...args) => {
+		if (debug) console.log(`[iOS Safari Fix] ${message}`, ...args);
+	}, [debug]);
+	useEffect(() => {
+		const iosInfo = iosInfoRef.current;
+		if (!iosInfo.hasViewportBugs || !enableScrollFix) return;
+		log("Applying iOS Safari scroll fix");
+		document.documentElement.classList.add("ios-safari-fix");
+		if (iosInfo.majorVersion !== null && iosInfo.majorVersion >= 18) document.documentElement.classList.add("ios-26-fix");
+		return () => {
+			document.documentElement.classList.remove("ios-safari-fix", "ios-26-fix");
+		};
+	}, [enableScrollFix, log]);
+	useEffect(() => {
+		const iosInfo = iosInfoRef.current;
+		if (!iosInfo.isIOS || !enableKeyboardFix) return;
+		if (typeof window !== "undefined" && window.visualViewport) initialViewportHeightRef.current = window.visualViewport.height;
+		const handleViewportResize = () => {
+			if (!window.visualViewport || initialViewportHeightRef.current === null) return;
+			const currentHeight = window.visualViewport.height;
+			const keyboardVisible = initialViewportHeightRef.current - currentHeight > 150;
+			if (keyboardVisible !== isKeyboardVisibleRef.current) {
+				isKeyboardVisibleRef.current = keyboardVisible;
+				log("Keyboard visibility changed:", keyboardVisible);
+				if (keyboardVisible) {
+					document.documentElement.classList.add("keyboard-visible");
+					document.documentElement.classList.remove("keyboard-dismissed");
+				} else {
+					document.documentElement.classList.remove("keyboard-visible");
+					document.documentElement.classList.add("keyboard-dismissed");
+					setTimeout(() => {
+						document.documentElement.classList.remove("keyboard-dismissed");
+					}, 100);
+					if (iosInfo.hasViewportBugs) requestAnimationFrame(() => {
+						document.body.style.display = "none";
+						document.body.offsetHeight;
+						document.body.style.display = "";
+					});
+				}
+				onKeyboardVisibilityChange?.(keyboardVisible);
+			}
+		};
+		const handleFocusIn = (e) => {
+			const target = e.target;
+			if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) log("Input focused, preparing for keyboard");
+		};
+		const handleFocusOut = () => {
+			setTimeout(() => {
+				if (window.visualViewport && initialViewportHeightRef.current) {
+					if (initialViewportHeightRef.current - window.visualViewport.height < 50) {
+						if (iosInfoRef.current.hasViewportBugs) {
+							log("Focus out detected, applying iOS fix");
+							document.documentElement.classList.add("keyboard-dismissed");
+							setTimeout(() => {
+								document.documentElement.classList.remove("keyboard-dismissed");
+							}, 100);
+						}
+					}
+				}
+			}, 100);
+		};
+		window.visualViewport?.addEventListener("resize", handleViewportResize);
+		document.addEventListener("focusin", handleFocusIn);
+		document.addEventListener("focusout", handleFocusOut);
+		return () => {
+			window.visualViewport?.removeEventListener("resize", handleViewportResize);
+			document.removeEventListener("focusin", handleFocusIn);
+			document.removeEventListener("focusout", handleFocusOut);
+			document.documentElement.classList.remove("keyboard-visible", "keyboard-dismissed");
+		};
+	}, [
+		enableKeyboardFix,
+		onKeyboardVisibilityChange,
+		log
+	]);
+	return {
+		isKeyboardVisible: isKeyboardVisibleRef.current,
+		iosInfo: iosInfoRef.current
+	};
+}
+/**
+* Hook to force reset fixed element positioning after iOS viewport bugs
+*
+* @param {React.RefObject<HTMLElement>} elementRef - Ref to the fixed element
+* @returns {{ forceReset: () => void }} Reset function
+*
+* @example
+* ```tsx
+* const navRef = useRef<HTMLElement>(null);
+* const { forceReset } = useIOSFixedReset(navRef);
+*
+* // Call forceReset() after keyboard dismissal or scroll issues
+* ```
+*/
+function useIOSFixedReset(elementRef) {
+	return { forceReset: useCallback(() => {
+		const element = elementRef.current;
+		if (!element) return;
+		element.style.transform = "translateZ(0) translateY(0.01px)";
+		requestAnimationFrame(() => {
+			requestAnimationFrame(() => {
+				if (element) element.style.transform = "translateZ(0)";
+			});
+		});
+	}, [elementRef]) };
+}
+
+//#endregion
+export { useIOSSafariFix as default, detectIOSVersion, useIOSFixedReset };

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

@@ -0,0 +1,285 @@
+import { type SidebarDimensions, type SidebarSafeAreas, type SidebarAnimations, type SidebarConfig } from "./Sidebar.types";
+/**
+ * Dimensiones por defecto del sidebar
+ * @constant
+ */
+export declare const DEFAULT_DIMENSIONS: SidebarDimensions;
+/**
+ * Áreas seguras por defecto
+ * @constant
+ */
+export declare const DEFAULT_SAFE_AREAS: SidebarSafeAreas;
+/**
+ * Animaciones por defecto
+ * @constant
+ */
+export declare const DEFAULT_ANIMATIONS: SidebarAnimations;
+/**
+ * Configuración por defecto del sidebar
+ * @constant
+ *
+ * @description
+ * Los colores se obtienen automáticamente de los tokens CSS de mks-ui:
+ * - --sidebar: Color de fondo
+ * - --sidebar-foreground: Color de texto
+ * - --sidebar-primary: Color primario (indicador)
+ * - --sidebar-accent: Color de hover
+ * - --sidebar-border: Color de bordes
+ */
+export declare const DEFAULT_CONFIG: SidebarConfig;
+/**
+ * Teclas de navegación del sidebar
+ * @constant
+ */
+export declare const SIDEBAR_KEYBOARD_KEYS: {
+    /** Flecha abajo - navegar al siguiente item */
+    readonly ARROW_DOWN: "ArrowDown";
+    /** Flecha arriba - navegar al item anterior */
+    readonly ARROW_UP: "ArrowUp";
+    /** Home - ir al primer item */
+    readonly HOME: "Home";
+    /** End - ir al último item */
+    readonly END: "End";
+    /** Tab - navegación estándar */
+    readonly TAB: "Tab";
+    /** Escape - cerrar sidebar o quitar focus */
+    readonly ESCAPE: "Escape";
+};
+/**
+ * Tipo derivado de las teclas del teclado
+ */
+export type SidebarKeyboardKey = (typeof SIDEBAR_KEYBOARD_KEYS)[keyof typeof SIDEBAR_KEYBOARD_KEYS];
+/**
+ * Timing functions perfectas para animaciones suaves
+ * @constant
+ */
+export declare const SIDEBAR_TIMING_FUNCTIONS: {
+    /** Ease-out perfecto para elevación de iconos */
+    readonly EASE_OUT_PERFECT: "cubic-bezier(0.4, 0, 0.2, 1)";
+    /** Ease-in-out suave */
+    readonly EASE_IN_OUT_SMOOTH: "cubic-bezier(0.45, 0, 0.55, 1)";
+    /** Spring suave */
+    readonly SPRING_SOFT: "cubic-bezier(0.34, 1.56, 0.64, 1)";
+};
+/**
+ * Atributos data-* para styling CSS y selección de elementos
+ * @constant
+ */
+export declare const SIDEBAR_DATA_ATTRIBUTES: {
+    /** data-open - indica si el sidebar está abierto */
+    readonly OPEN: "data-open";
+    /** data-collapsed - indica si el sidebar está colapsado */
+    readonly COLLAPSED: "data-collapsed";
+    /** data-focused - indica si un elemento está enfocado */
+    readonly FOCUSED: "data-focused";
+    /** data-hovered - indica si el mouse está sobre un elemento */
+    readonly HOVERED: "data-hovered";
+    /** data-disabled - indica si un elemento está deshabilitado */
+    readonly DISABLED: "data-disabled";
+    /** data-sidebar-item - marca un item del sidebar para navegación */
+    readonly ITEM: "data-sidebar-item";
+    /** data-active - indica si un toggle/botón está activo */
+    readonly ACTIVE: "data-active";
+    /** data-visible - indica si un elemento es visible */
+    readonly VISIBLE: "data-visible";
+};
+/**
+ * Clases Tailwind reutilizables para componentes del sidebar
+ * @constant
+ */
+export declare const SIDEBAR_TAILWIND_CLASSES: {
+    /** Clases base para el wrapper */
+    readonly wrapper: "relative";
+    /** Clases base para el nav */
+    readonly nav: "relative h-screen border-r";
+    /** Clases base para el indicador */
+    readonly indicator: "absolute left-0 rounded-r-full pointer-events-none";
+    /** Clases base para el botón toggle */
+    readonly toggleButton: "block w-6 h-6 rounded-full cursor-pointer flex items-center justify-center transition-colors";
+    /** Clases para el wrapper del botón toggle */
+    readonly toggleButtonWrapper: "absolute top-6 z-30";
+    /** Clases base para el contenedor de items */
+    readonly content: "flex flex-col items-center";
+    /** Clases base para áreas seguras */
+    readonly safeArea: "flex items-center justify-center";
+    /** Clases de borde debug */
+    readonly debugBorder: "border-dashed";
+    /** Clases de focus ring (accesibilidad) */
+    readonly focusRing: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2";
+    /** Clases SR-only (screen reader only) */
+    readonly srOnly: "sr-only";
+};
+/**
+ * Tipo derivado de las clases Tailwind
+ */
+export type SidebarTailwindClass = (typeof SIDEBAR_TAILWIND_CLASSES)[keyof typeof SIDEBAR_TAILWIND_CLASSES];
+/**
+ * Patrones visuales para modo debug
+ * @constant
+ */
+export declare const SIDEBAR_DEBUG_PATTERNS: {
+    /** Patrón de rayas para áreas seguras */
+    readonly safeArea: "repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.03) 10px, rgba(255,255,255,0.03) 20px)";
+    /** Fondo semi-transparente para área de contenido */
+    readonly contentArea: "rgba(0, 0, 0, 0.5)";
+    /** Color de borde para debug */
+    readonly borderColor: "rgb(34 197 94)";
+    /** Opacidad de borde debug */
+    readonly borderOpacity: "0.3";
+};
+/**
+ * Roles ARIA para accesibilidad
+ * @constant
+ */
+export declare const SIDEBAR_ARIA_ROLES: {
+    /** Rol para el nav principal */
+    readonly navigation: "navigation";
+    /** Rol para lista de items */
+    readonly list: "list";
+    /** Rol para item individual */
+    readonly listitem: "listitem";
+    /** Rol para botón toggle */
+    readonly button: "button";
+};
+/**
+ * Labels ARIA por defecto para accesibilidad
+ * @constant
+ */
+export declare const SIDEBAR_ARIA_LABELS: {
+    /** Label para toggle */
+    readonly toggleSidebar: "Alternar sidebar";
+    /** Label para navegación principal */
+    readonly mainNavigation: "Navegación principal";
+    /** Label cuando sidebar está abierto */
+    readonly sidebarOpen: "Sidebar abierto";
+    /** Label cuando sidebar está cerrado */
+    readonly sidebarClosed: "Sidebar cerrado";
+};
+/**
+ * Configuración de estilo visual por defecto del sidebar
+ * @constant
+ */
+export declare const DEFAULT_VISUAL_STYLE: {
+    readonly marginTop: "0";
+    readonly marginBottom: "0";
+    readonly marginLeft: "0";
+    readonly marginRight: "0";
+    readonly height: "100vh";
+    readonly borderRadius: "0";
+    readonly boxShadow: "none";
+};
+/**
+ * Preconfiguraciones de estilo visual para el sidebar
+ * @constant
+ */
+export declare const SIDEBAR_VISUAL_PRESETS: {
+    /** Estilo por defecto: pegado a bordes */
+    readonly DEFAULT: {
+        readonly marginTop: "0";
+        readonly marginBottom: "0";
+        readonly marginLeft: "0";
+        readonly marginRight: "0";
+        readonly height: "100vh";
+        readonly borderRadius: "0";
+        readonly boxShadow: "none";
+    };
+    /** Estilo floating: separado y con sombra */
+    readonly FLOATING_CARD: {
+        readonly marginTop: "1rem";
+        readonly marginBottom: "1rem";
+        readonly marginLeft: "1rem";
+        readonly marginRight: "0";
+        readonly height: "calc(100vh - 2rem)";
+        readonly borderRadius: "0.75rem";
+        readonly boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)";
+    };
+    /** Estilo moderno: esquinas redondeadas suaves */
+    readonly MODERN_ROUNDED: {
+        readonly marginTop: "0.5rem";
+        readonly marginBottom: "0.5rem";
+        readonly marginLeft: "0.5rem";
+        readonly marginRight: "0";
+        readonly height: "calc(100vh - 1rem)";
+        readonly borderRadius: "1rem";
+        readonly boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
+    };
+    /** Estilo minimal: ligera separación */
+    readonly MINIMAL_SPACED: {
+        readonly marginTop: "0.25rem";
+        readonly marginBottom: "0.25rem";
+        readonly marginLeft: "0.25rem";
+        readonly marginRight: "0";
+        readonly height: "calc(100vh - 0.5rem)";
+        readonly borderRadius: "0.5rem";
+        readonly boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)";
+    };
+};
+/**
+ * Tipo para los presets de estilo visual
+ */
+export type SidebarVisualPreset = keyof typeof SIDEBAR_VISUAL_PRESETS;
+/**
+ * Breakpoints para responsive behavior
+ * @constant
+ */
+export declare const SIDEBAR_BREAKPOINTS: {
+    /** Ancho mínimo para mostrar sidebar expandido */
+    readonly minExpandedWidth: 768;
+    /** Ancho mínimo para sidebar colapsado */
+    readonly minCollapsedWidth: 640;
+    /** Ancho para forzar modo mobile */
+    readonly mobileWidth: 480;
+};
+/**
+ * Límites y valores seguros para validación
+ * @constant
+ */
+export declare const SIDEBAR_LIMITS: {
+    /** Porcentaje mínimo para safe area */
+    readonly minSafeAreaPercent: 0;
+    /** Porcentaje máximo para safe area */
+    readonly maxSafeAreaPercent: 50;
+    /** Número máximo de items recomendado */
+    readonly maxRecommendedItems: 20;
+    /** Duración mínima de transición (ms) */
+    readonly minTransitionDuration: 0;
+    /** Duración máxima de transición (ms) */
+    readonly maxTransitionDuration: 1000;
+};
+/**
+ * Nombres de CSS variables utilizadas
+ * @constant
+ */
+export declare const SIDEBAR_CSS_VARIABLES: {
+    /** Ancho cuando cerrado */
+    readonly widthClosed: "--sidebar-width-closed";
+    /** Ancho cuando abierto */
+    readonly widthOpen: "--sidebar-width-open";
+    /** Ancho actual */
+    readonly width: "--sidebar-width";
+    /** Color de fondo */
+    readonly background: "--sidebar-bg";
+    /** Color de borde (variable interna para evitar colisión con --sidebar-border de shadcn) */
+    readonly borderColor: "--sidebar-border-color";
+    /** Color de hover */
+    readonly hover: "--sidebar-hover";
+    /** Color del indicador */
+    readonly indicator: "--sidebar-indicator";
+    /** Altura del indicador */
+    readonly indicatorHeight: "--sidebar-indicator-height";
+    /** Distancia del tooltip al sidebar */
+    readonly tooltipDistance: "--sidebar-tooltip-distance";
+    /** Comportamiento de layout */
+    readonly layoutBehaviour: "--sidebar-layout-behaviour";
+    /** Flag para modo inline */
+    readonly isInline: "--sidebar-is-inline";
+    /** Variables de estilo visual */
+    readonly marginTop: "--sidebar-margin-top";
+    readonly marginBottom: "--sidebar-margin-bottom";
+    readonly marginLeft: "--sidebar-margin-left";
+    readonly marginRight: "--sidebar-margin-right";
+    readonly sidebarHeight: "--sidebar-height";
+    readonly sidebarBorderRadius: "--sidebar-border-radius";
+    readonly sidebarBoxShadow: "--sidebar-box-shadow";
+};
+//# sourceMappingURL=Sidebar.constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.constants.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Sidebar/Sidebar.constants.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,208 @@
+import { SidebarCollapseMode, SidebarHideBehaviour, SidebarHideOpensBehavior, SidebarLayoutBehaviour, SidebarTimingFunction, SidebarTransitionDuration, SidebarWidth } from "./Sidebar.types.js";
+
+//#region src/react-ui/blocks/Sidebar/Sidebar.constants.ts
+/**
+* Dimensiones por defecto del sidebar
+* @constant
+*/
+const DEFAULT_DIMENSIONS = {
+	collapsedWidth: SidebarWidth.COLLAPSED,
+	expandedWidth: SidebarWidth.EXPANDED,
+	indicatorHeight: "3rem",
+	tooltipDistance: "1rem"
+};
+/**
+* Áreas seguras por defecto
+* @constant
+*/
+const DEFAULT_SAFE_AREAS = {
+	topPercent: 15,
+	bottomPercent: 25
+};
+/**
+* Animaciones por defecto
+* @constant
+*/
+const DEFAULT_ANIMATIONS = {
+	widthTransitionDuration: SidebarTransitionDuration.NORMAL,
+	opacityTransitionDuration: SidebarTransitionDuration.FAST,
+	timingFunction: SidebarTimingFunction.CUSTOM
+};
+/**
+* Configuración por defecto del sidebar
+* @constant
+*
+* @description
+* Los colores se obtienen automáticamente de los tokens CSS de mks-ui:
+* - --sidebar: Color de fondo
+* - --sidebar-foreground: Color de texto
+* - --sidebar-primary: Color primario (indicador)
+* - --sidebar-accent: Color de hover
+* - --sidebar-border: Color de bordes
+*/
+const DEFAULT_CONFIG = {
+	defaultOpen: true,
+	collapseMode: SidebarCollapseMode.HIDE,
+	hideBehaviour: SidebarHideBehaviour.SHOW_INDICATOR,
+	hideOpensBehavior: SidebarHideOpensBehavior.COLLAPSED,
+	layoutBehaviour: SidebarLayoutBehaviour.FLOATING,
+	dimensions: DEFAULT_DIMENSIONS,
+	safeAreas: DEFAULT_SAFE_AREAS,
+	animations: DEFAULT_ANIMATIONS,
+	toggleId: "sidebar-toggle",
+	debug: false
+};
+/**
+* Teclas de navegación del sidebar
+* @constant
+*/
+const SIDEBAR_KEYBOARD_KEYS = {
+	ARROW_DOWN: "ArrowDown",
+	ARROW_UP: "ArrowUp",
+	HOME: "Home",
+	END: "End",
+	TAB: "Tab",
+	ESCAPE: "Escape"
+};
+/**
+* Atributos data-* para styling CSS y selección de elementos
+* @constant
+*/
+const SIDEBAR_DATA_ATTRIBUTES = {
+	OPEN: "data-open",
+	COLLAPSED: "data-collapsed",
+	FOCUSED: "data-focused",
+	HOVERED: "data-hovered",
+	DISABLED: "data-disabled",
+	ITEM: "data-sidebar-item",
+	ACTIVE: "data-active",
+	VISIBLE: "data-visible"
+};
+/**
+* Clases Tailwind reutilizables para componentes del sidebar
+* @constant
+*/
+const SIDEBAR_TAILWIND_CLASSES = {
+	wrapper: "relative",
+	nav: "relative h-screen border-r",
+	indicator: "absolute left-0 rounded-r-full pointer-events-none",
+	toggleButton: "block w-6 h-6 rounded-full cursor-pointer flex items-center justify-center transition-colors",
+	toggleButtonWrapper: "absolute top-6 z-30",
+	content: "flex flex-col items-center",
+	safeArea: "flex items-center justify-center",
+	debugBorder: "border-dashed",
+	focusRing: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
+	srOnly: "sr-only"
+};
+/**
+* Patrones visuales para modo debug
+* @constant
+*/
+const SIDEBAR_DEBUG_PATTERNS = {
+	safeArea: "repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.03) 10px, rgba(255,255,255,0.03) 20px)",
+	contentArea: "rgba(0, 0, 0, 0.5)",
+	borderColor: "rgb(34 197 94)",
+	borderOpacity: "0.3"
+};
+/**
+* Roles ARIA para accesibilidad
+* @constant
+*/
+const SIDEBAR_ARIA_ROLES = {
+	navigation: "navigation",
+	list: "list",
+	listitem: "listitem",
+	button: "button"
+};
+/**
+* Labels ARIA por defecto para accesibilidad
+* @constant
+*/
+const SIDEBAR_ARIA_LABELS = {
+	toggleSidebar: "Alternar sidebar",
+	mainNavigation: "Navegación principal",
+	sidebarOpen: "Sidebar abierto",
+	sidebarClosed: "Sidebar cerrado"
+};
+/**
+* Configuración de estilo visual por defecto del sidebar
+* @constant
+*/
+const DEFAULT_VISUAL_STYLE = {
+	marginTop: "0",
+	marginBottom: "0",
+	marginLeft: "0",
+	marginRight: "0",
+	height: "100vh",
+	borderRadius: "0",
+	boxShadow: "none"
+};
+/**
+* Preconfiguraciones de estilo visual para el sidebar
+* @constant
+*/
+const SIDEBAR_VISUAL_PRESETS = {
+	DEFAULT: {
+		marginTop: "0",
+		marginBottom: "0",
+		marginLeft: "0",
+		marginRight: "0",
+		height: "100vh",
+		borderRadius: "0",
+		boxShadow: "none"
+	},
+	FLOATING_CARD: {
+		marginTop: "1rem",
+		marginBottom: "1rem",
+		marginLeft: "1rem",
+		marginRight: "0",
+		height: "calc(100vh - 2rem)",
+		borderRadius: "0.75rem",
+		boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"
+	},
+	MODERN_ROUNDED: {
+		marginTop: "0.5rem",
+		marginBottom: "0.5rem",
+		marginLeft: "0.5rem",
+		marginRight: "0",
+		height: "calc(100vh - 1rem)",
+		borderRadius: "1rem",
+		boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
+	},
+	MINIMAL_SPACED: {
+		marginTop: "0.25rem",
+		marginBottom: "0.25rem",
+		marginLeft: "0.25rem",
+		marginRight: "0",
+		height: "calc(100vh - 0.5rem)",
+		borderRadius: "0.5rem",
+		boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
+	}
+};
+/**
+* Nombres de CSS variables utilizadas
+* @constant
+*/
+const SIDEBAR_CSS_VARIABLES = {
+	widthClosed: "--sidebar-width-closed",
+	widthOpen: "--sidebar-width-open",
+	width: "--sidebar-width",
+	background: "--sidebar-bg",
+	borderColor: "--sidebar-border-color",
+	hover: "--sidebar-hover",
+	indicator: "--sidebar-indicator",
+	indicatorHeight: "--sidebar-indicator-height",
+	tooltipDistance: "--sidebar-tooltip-distance",
+	layoutBehaviour: "--sidebar-layout-behaviour",
+	isInline: "--sidebar-is-inline",
+	marginTop: "--sidebar-margin-top",
+	marginBottom: "--sidebar-margin-bottom",
+	marginLeft: "--sidebar-margin-left",
+	marginRight: "--sidebar-margin-right",
+	sidebarHeight: "--sidebar-height",
+	sidebarBorderRadius: "--sidebar-border-radius",
+	sidebarBoxShadow: "--sidebar-box-shadow"
+};
+
+//#endregion
+export { DEFAULT_ANIMATIONS, DEFAULT_CONFIG, DEFAULT_DIMENSIONS, DEFAULT_SAFE_AREAS, DEFAULT_VISUAL_STYLE, SIDEBAR_ARIA_LABELS, SIDEBAR_ARIA_ROLES, SIDEBAR_CSS_VARIABLES, SIDEBAR_DATA_ATTRIBUTES, SIDEBAR_DEBUG_PATTERNS, SIDEBAR_KEYBOARD_KEYS, SIDEBAR_TAILWIND_CLASSES, SIDEBAR_VISUAL_PRESETS };