@mks2508/mks-ui 0.6.8 → 0.7.0

package/dist/react-ui/blocks/BottomNavBar/MobileBottomNav.d.ts

@@ -0,0 +1,64 @@
+/**
+ * @fileoverview MobileBottomNav component with slot architecture
+ * @description A composable bottom navigation component optimized for mobile devices
+ * @module MobileBottomNav
+ * @version 2.0.0
+ */
+import * as React from "react";
+import { type RootProps, type NavListProps, type NavItemProps, NavSize } from "./types";
+/**
+ * Spacer component to prevent content from being hidden under navigation
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <main>
+ *   {content}
+ *   <MobileBottomNav.Spacer />
+ * </main>
+ * ```
+ *
+ * @param {object} props - Component props
+ * @returns {React.ReactElement} Spacer element
+ */
+interface SpacerProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** Size matching the navigation */
+    size?: NavSize;
+}
+/**
+ * MobileBottomNav compound component
+ *
+ * A fully accessible, mobile-optimized bottom navigation with:
+ * - Slot-based architecture (Root, NavList, NavItem)
+ * - Glassmorphism visual effects
+ * - Motion animations
+ * - Safe area support for notched devices
+ * - Headless mode for custom styling
+ *
+ * @example
+ * ```tsx
+ * <MobileBottomNav.Root variant={NavVariant.GLASS}>
+ *   <MobileBottomNav.NavList>
+ *     <MobileBottomNav.NavItem
+ *       icon={<Home />}
+ *       label="Home"
+ *       state={NavItemState.ACTIVE}
+ *     />
+ *     <MobileBottomNav.NavItem
+ *       icon={<Search />}
+ *       label="Search"
+ *     />
+ *   </MobileBottomNav.NavList>
+ * </MobileBottomNav.Root>
+ * ```
+ */
+export declare const MobileBottomNav: {
+    Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLElement>>;
+    NavList: React.ForwardRefExoticComponent<NavListProps & React.RefAttributes<HTMLUListElement>>;
+    NavItem: React.ForwardRefExoticComponent<NavItemProps & React.RefAttributes<HTMLButtonElement>>;
+    Spacer: React.FC<SpacerProps>;
+};
+export default MobileBottomNav;
+//# sourceMappingURL=MobileBottomNav.d.ts.map

package/dist/react-ui/blocks/BottomNavBar/MobileBottomNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileBottomNav.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/BottomNavBar/MobileBottomNav.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EACL,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,KAAK,YAAY,EAGjB,OAAO,EASR,MAAM,SAAS,CAAA;AAkXhB;;;;;;;;;;;;;;GAcG;AACH,UAAU,WAAW;IACnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAWD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,eAAe;;;;;CAK3B,CAAA;AAED,eAAe,eAAe,CAAA"}

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

@@ -0,0 +1,301 @@
+"use client";
+
+import { cn } from "../../lib/utils.js";
+import { AnimationType, DEFAULT_ANIMATION_CONFIG, DEFAULT_GLASS_CONFIG, IconSize, LabelPosition, NavBorderRadius, NavItemState, NavSize, NavVariant, ZIndexLevel } from "./types.js";
+import { badgeVariants, iconVariants, labelVariants, navItemVariants, navListVariants, rootVariants, spacerVariants } from "./MobileBottomNav.styles.js";
+import useIOSSafariFix, { useIOSFixedReset } from "./useIOSSafariFix.js";
+import * as React$1 from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/BottomNavBar/MobileBottomNav.tsx
+/**
+* @fileoverview MobileBottomNav component with slot architecture
+* @description A composable bottom navigation component optimized for mobile devices
+* @module MobileBottomNav
+* @version 2.0.0
+*/
+/**
+* Navigation context for sharing configuration across components
+*/
+const NavContext = React$1.createContext(null);
+/**
+* Hook to access navigation context
+* @throws {Error} When used outside of MobileBottomNav.Root
+* @returns {NavContextValue} Navigation context value
+*/
+function useNavContext() {
+	const context = React$1.useContext(NavContext);
+	if (!context) throw new Error("MobileBottomNav compound components must be used within MobileBottomNav.Root");
+	return context;
+}
+/**
+* Root container for the mobile bottom navigation
+*
+* @component
+* @example
+* ```tsx
+* <MobileBottomNav.Root variant={NavVariant.GLASS} size={NavSize.MEDIUM}>
+*   <MobileBottomNav.NavList>
+*     {children}
+*   </MobileBottomNav.NavList>
+* </MobileBottomNav.Root>
+* ```
+*
+* @param {RootProps} props - Component props
+* @returns {React.ReactElement} Navigation root element
+*/
+const Root = React$1.forwardRef(({ children, className, style, variant = NavVariant.GLASS, size = NavSize.MEDIUM, zIndex = ZIndexLevel.DEFAULT, visible = true, glassConfig = DEFAULT_GLASS_CONFIG, animationConfig = DEFAULT_ANIMATION_CONFIG, full = false, rounded = NavBorderRadius.NONE, gap, "aria-label": ariaLabel = "Main navigation", "data-testid": testId, ...props }, ref) => {
+	const internalRef = React$1.useRef(null);
+	const combinedRef = ref || internalRef;
+	const { iosInfo } = useIOSSafariFix({
+		enableScrollFix: true,
+		enableKeyboardFix: true
+	});
+	const { forceReset } = useIOSFixedReset(combinedRef);
+	React$1.useEffect(() => {
+		if (visible && iosInfo.hasViewportBugs) {
+			const timer = setTimeout(forceReset, 50);
+			return () => clearTimeout(timer);
+		}
+	}, [
+		visible,
+		iosInfo.hasViewportBugs,
+		forceReset
+	]);
+	const contextValue = React$1.useMemo(() => ({
+		variant,
+		size,
+		animationConfig: {
+			...DEFAULT_ANIMATION_CONFIG,
+			...animationConfig
+		},
+		gap
+	}), [
+		variant,
+		size,
+		animationConfig,
+		gap
+	]);
+	const customGlassStyles = variant === NavVariant.GLASS ? {
+		"--glass-blur": `${glassConfig.blur ?? DEFAULT_GLASS_CONFIG.blur}px`,
+		"--glass-saturation": `${glassConfig.saturation ?? DEFAULT_GLASS_CONFIG.saturation}%`,
+		"--glass-opacity": glassConfig.opacity ?? DEFAULT_GLASS_CONFIG.opacity,
+		"--glass-border-opacity": glassConfig.borderOpacity ?? DEFAULT_GLASS_CONFIG.borderOpacity
+	} : {};
+	const roundedValue = typeof rounded === "number" ? void 0 : rounded;
+	const { onDrag: _onDrag, ...safeProps } = props;
+	return /* @__PURE__ */ jsx(NavContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(AnimatePresence, { children: visible && /* @__PURE__ */ jsx(motion.nav, {
+			ref: combinedRef,
+			className: cn(rootVariants({
+				variant,
+				size,
+				visible,
+				full,
+				rounded: roundedValue
+			}), iosInfo.hasViewportBugs && "mobile-nav-root--ios26", className),
+			style: {
+				zIndex: typeof zIndex === "number" ? zIndex : zIndex,
+				...typeof rounded === "number" ? {
+					borderTopLeftRadius: `${rounded}rem`,
+					borderTopRightRadius: `${rounded}rem`
+				} : {},
+				...customGlassStyles,
+				...style
+			},
+			initial: { y: "100%" },
+			animate: { y: 0 },
+			exit: { y: "100%" },
+			transition: {
+				type: "spring",
+				stiffness: 400,
+				damping: 40
+			},
+			role: "navigation",
+			"aria-label": ariaLabel,
+			"data-testid": testId,
+			"data-ios-version": iosInfo.majorVersion,
+			"data-has-viewport-bugs": iosInfo.hasViewportBugs,
+			...safeProps,
+			children
+		}) })
+	});
+});
+Root.displayName = "MobileBottomNav.Root";
+/**
+* Container for navigation items
+*
+* @component
+* @example
+* ```tsx
+* <MobileBottomNav.NavList justify="around">
+*   <MobileBottomNav.NavItem icon={<HomeIcon />} label="Home" />
+* </MobileBottomNav.NavList>
+* ```
+*
+* @param {NavListProps} props - Component props
+* @returns {React.ReactElement} Navigation list element
+*/
+const NavList = React$1.forwardRef(({ children, className, style, gap, justify = "around", "data-testid": testId, ...props }, ref) => {
+	const { size, gap: contextGap } = useNavContext();
+	const effectiveGap = gap ?? contextGap;
+	return /* @__PURE__ */ jsx("ul", {
+		ref,
+		className: cn(navListVariants({
+			size,
+			justify
+		}), className),
+		style: {
+			gap: effectiveGap ? `${effectiveGap}rem` : void 0,
+			...style
+		},
+		role: "menubar",
+		"data-testid": testId,
+		...props,
+		children
+	});
+});
+NavList.displayName = "MobileBottomNav.NavList";
+/**
+* Individual navigation item with icon and label
+*
+* @component
+* @example
+* ```tsx
+* <MobileBottomNav.NavItem
+*   icon={<HomeIcon />}
+*   label="Home"
+*   state={NavItemState.ACTIVE}
+*   onClick={() => navigate('/home')}
+* />
+* ```
+*
+* @param {NavItemProps} props - Component props
+* @returns {React.ReactElement} Navigation item element
+*/
+const NavItem = React$1.forwardRef(({ icon, label, className, style, state = NavItemState.INACTIVE, labelPosition = LabelPosition.BELOW, onClick, href, iconSize = IconSize.MEDIUM, badge, "aria-label": ariaLabel, "data-testid": testId, disabled, ...props }, ref) => {
+	const { size, animationConfig } = useNavContext();
+	const effectiveState = disabled ? NavItemState.DISABLED : state;
+	const isDisabled = effectiveState === NavItemState.DISABLED;
+	const getAnimationProps = () => {
+		if (animationConfig.type === AnimationType.NONE) return {};
+		return {
+			whileTap: isDisabled ? {} : { scale: animationConfig.pressScale ?? .95 },
+			whileHover: isDisabled ? {} : { scale: animationConfig.hoverScale ?? 1.05 },
+			transition: animationConfig.type === AnimationType.SPRING ? {
+				type: "spring",
+				stiffness: animationConfig.spring?.stiffness ?? 400,
+				damping: animationConfig.spring?.damping ?? 30
+			} : {
+				type: "tween",
+				duration: animationConfig.tween?.duration ?? .2,
+				ease: animationConfig.tween?.ease ?? "easeOut"
+			}
+		};
+	};
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+		className: cn(iconVariants({ size: iconSize })),
+		style: {
+			width: typeof iconSize === "number" ? `${iconSize}px` : void 0,
+			height: typeof iconSize === "number" ? `${iconSize}px` : void 0
+		},
+		children: [icon, badge && /* @__PURE__ */ jsx("span", {
+			className: cn(badgeVariants({ type: typeof badge === "number" ? "count" : "dot" })),
+			children: typeof badge === "number" ? badge : null
+		})]
+	}), /* @__PURE__ */ jsx("span", {
+		className: cn(labelVariants({
+			position: labelPosition,
+			size
+		})),
+		children: label
+	})] });
+	const commonProps = {
+		className: cn(navItemVariants({
+			state: effectiveState,
+			labelPosition,
+			size
+		}), className),
+		style,
+		"aria-label": ariaLabel ?? label,
+		"aria-current": state === NavItemState.ACTIVE ? "page" : void 0,
+		"aria-disabled": isDisabled,
+		"data-testid": testId,
+		role: "menuitem",
+		...getAnimationProps()
+	};
+	const motionAnchorProps = {
+		...commonProps,
+		href,
+		...props,
+		onDrag: void 0,
+		onDragStart: void 0,
+		onDragEnd: void 0
+	};
+	const motionButtonProps = {
+		...commonProps,
+		type: "button",
+		onClick,
+		disabled: isDisabled,
+		...props,
+		onDrag: void 0,
+		onDragStart: void 0,
+		onDragEnd: void 0
+	};
+	if (href && !isDisabled) return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(motion.a, {
+		ref,
+		...motionAnchorProps,
+		children: content
+	}) });
+	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(motion.button, {
+		ref,
+		...motionButtonProps,
+		children: content
+	}) });
+});
+NavItem.displayName = "MobileBottomNav.NavItem";
+const Spacer = ({ className, size = NavSize.MEDIUM }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(spacerVariants({ size }), className),
+		"aria-hidden": "true"
+	});
+};
+Spacer.displayName = "MobileBottomNav.Spacer";
+/**
+* MobileBottomNav compound component
+*
+* A fully accessible, mobile-optimized bottom navigation with:
+* - Slot-based architecture (Root, NavList, NavItem)
+* - Glassmorphism visual effects
+* - Motion animations
+* - Safe area support for notched devices
+* - Headless mode for custom styling
+*
+* @example
+* ```tsx
+* <MobileBottomNav.Root variant={NavVariant.GLASS}>
+*   <MobileBottomNav.NavList>
+*     <MobileBottomNav.NavItem
+*       icon={<Home />}
+*       label="Home"
+*       state={NavItemState.ACTIVE}
+*     />
+*     <MobileBottomNav.NavItem
+*       icon={<Search />}
+*       label="Search"
+*     />
+*   </MobileBottomNav.NavList>
+* </MobileBottomNav.Root>
+* ```
+*/
+const MobileBottomNav = {
+	Root,
+	NavList,
+	NavItem,
+	Spacer
+};
+
+//#endregion
+export { MobileBottomNav as default };

package/dist/react-ui/blocks/BottomNavBar/MobileBottomNav.styles.d.ts

@@ -0,0 +1,94 @@
+/**
+ * @fileoverview CVA style variants for MobileBottomNav component
+ * @description Headless-friendly style system using class-variance-authority
+ * @module MobileBottomNav/styles
+ * @version 1.0.0
+ */
+import { type VariantProps } from "class-variance-authority";
+import { NavVariant, NavSize, NavItemState, LabelPosition, IconSize } from "./types";
+/**
+ * Root container styles with variant support
+ * @description Styles for the main navigation wrapper
+ */
+export declare const rootVariants: (props?: ({
+    variant?: NavVariant | null | undefined;
+    size?: NavSize | null | undefined;
+    visible?: boolean | null | undefined;
+    full?: boolean | null | undefined;
+    rounded?: "none" | "sm" | "lg" | "md" | "xl" | "full" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Extract variant props type for Root
+ */
+export type RootVariantProps = VariantProps<typeof rootVariants>;
+/**
+ * Navigation list styles
+ * @description Styles for the ul element containing nav items
+ */
+export declare const navListVariants: (props?: ({
+    size?: NavSize | null | undefined;
+    justify?: "start" | "center" | "end" | "around" | "between" | "evenly" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Extract variant props type for NavList
+ */
+export type NavListVariantProps = VariantProps<typeof navListVariants>;
+/**
+ * Navigation item styles
+ * @description Styles for individual navigation buttons/links
+ */
+export declare const navItemVariants: (props?: ({
+    state?: NavItemState | null | undefined;
+    labelPosition?: LabelPosition | null | undefined;
+    size?: NavSize | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Extract variant props type for NavItem
+ */
+export type NavItemVariantProps = VariantProps<typeof navItemVariants>;
+/**
+ * Icon container styles
+ * @description Styles for the icon wrapper
+ */
+export declare const iconVariants: (props?: ({
+    size?: IconSize | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Extract variant props type for Icon
+ */
+export type IconVariantProps = VariantProps<typeof iconVariants>;
+/**
+ * Label text styles
+ * @description Styles for the navigation item label
+ */
+export declare const labelVariants: (props?: ({
+    position?: LabelPosition | null | undefined;
+    size?: NavSize | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Extract variant props type for Label
+ */
+export type LabelVariantProps = VariantProps<typeof labelVariants>;
+/**
+ * Badge indicator styles
+ * @description Styles for notification badges on nav items
+ */
+export declare const badgeVariants: (props?: ({
+    type?: "dot" | "count" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Extract variant props type for Badge
+ */
+export type BadgeVariantProps = VariantProps<typeof badgeVariants>;
+/**
+ * Spacer styles to prevent content from going under navigation
+ * @description Used as a placeholder element below main content
+ */
+export declare const spacerVariants: (props?: ({
+    size?: NavSize | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Extract variant props type for Spacer
+ */
+export type SpacerVariantProps = VariantProps<typeof spacerVariants>;
+//# sourceMappingURL=MobileBottomNav.styles.d.ts.map

package/dist/react-ui/blocks/BottomNavBar/MobileBottomNav.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileBottomNav.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/BottomNavBar/MobileBottomNav.styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAMpF;;;GAGG;AACH,eAAO,MAAM,YAAY;;;;;;8EAiFxB,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA;AAMhE;;;GAGG;AACH,eAAO,MAAM,eAAe;;;8EAoC3B,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAA;AAMtE;;;GAGG;AACH,eAAO,MAAM,eAAe;;;;8EA2D3B,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAA;AAMtE;;;GAGG;AACH,eAAO,MAAM,YAAY;;8EAcvB,CAAA;AAEF;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA;AAMhE;;;GAGG;AACH,eAAO,MAAM,aAAa;;;8EAuBxB,CAAA;AAEF;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAA;AAMlE;;;GAGG;AACH,eAAO,MAAM,aAAa;;8EAuBzB,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAA;AAMlE;;;GAGG;AACH,eAAO,MAAM,cAAc;;8EAczB,CAAA;AAEF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAA"}

package/dist/react-ui/blocks/BottomNavBar/MobileBottomNav.styles.js

@@ -0,0 +1,216 @@
+import { IconSize, LabelPosition, NavItemState, NavSize, NavVariant } from "./types.js";
+import { cva } from "class-variance-authority";
+
+//#region src/react-ui/blocks/BottomNavBar/MobileBottomNav.styles.ts
+/**
+* @fileoverview CVA style variants for MobileBottomNav component
+* @description Headless-friendly style system using class-variance-authority
+* @module MobileBottomNav/styles
+* @version 1.0.0
+*/
+/**
+* Root container styles with variant support
+* @description Styles for the main navigation wrapper
+*/
+const rootVariants = cva([
+	"fixed bottom-0 left-0 right-0",
+	"pb-[env(safe-area-inset-bottom,0px)]",
+	"pl-[env(safe-area-inset-left,0px)]",
+	"pr-[env(safe-area-inset-right,0px)]",
+	"transform-gpu",
+	"transition-transform duration-300 ease-out"
+], {
+	variants: {
+		variant: {
+			[NavVariant.GLASS]: [
+				"bg-white/[0.72] dark:bg-black/[0.72]",
+				"backdrop-blur-xl backdrop-saturate-[180%]",
+				"border-t border-white/[0.18] dark:border-white/[0.08]",
+				"shadow-[0_-1px_3px_rgba(0,0,0,0.05)]"
+			],
+			[NavVariant.SOLID]: [
+				"bg-background",
+				"border-t border-border",
+				"shadow-[0_-2px_10px_rgba(0,0,0,0.1)]"
+			],
+			[NavVariant.HEADLESS]: [""]
+		},
+		size: {
+			[NavSize.SMALL]: "",
+			[NavSize.MEDIUM]: "",
+			[NavSize.LARGE]: ""
+		},
+		visible: {
+			true: "translate-y-0",
+			false: "translate-y-full"
+		},
+		full: {
+			true: "mx-auto max-w-screen-sm",
+			false: ""
+		},
+		rounded: {
+			none: "rounded-none",
+			sm: "rounded-t-lg",
+			md: "rounded-t-2xl",
+			lg: "rounded-t-3xl",
+			xl: "rounded-t-[2rem]",
+			full: "rounded-t-full"
+		}
+	},
+	defaultVariants: {
+		variant: NavVariant.GLASS,
+		size: NavSize.MEDIUM,
+		visible: true,
+		full: false,
+		rounded: "none"
+	}
+});
+/**
+* Navigation list styles
+* @description Styles for the ul element containing nav items
+*/
+const navListVariants = cva([
+	"flex items-center",
+	"w-full",
+	"list-none m-0 p-0"
+], {
+	variants: {
+		size: {
+			[NavSize.SMALL]: "h-14 px-2 py-1",
+			[NavSize.MEDIUM]: "h-[4.5rem] px-4 py-2",
+			[NavSize.LARGE]: "h-22 px-6 py-3"
+		},
+		justify: {
+			start: "justify-start",
+			center: "justify-center",
+			end: "justify-end",
+			around: "justify-around",
+			between: "justify-between",
+			evenly: "justify-evenly"
+		}
+	},
+	defaultVariants: {
+		size: NavSize.MEDIUM,
+		justify: "around"
+	}
+});
+/**
+* Navigation item styles
+* @description Styles for individual navigation buttons/links
+*/
+const navItemVariants = cva([
+	"flex items-center justify-center",
+	"min-w-[44px] min-h-[44px]",
+	"px-3 py-2",
+	"bg-transparent border-none cursor-pointer",
+	"no-underline",
+	"text-[0.625rem] leading-none font-medium",
+	"select-none",
+	"[-webkit-tap-highlight-color:transparent]",
+	"touch-manipulation",
+	"transition-colors duration-200 ease-out",
+	"focus-visible:outline-2 focus-visible:outline-current focus-visible:outline-offset-2 focus-visible:rounded-lg",
+	"rounded-xl"
+], {
+	variants: {
+		state: {
+			[NavItemState.INACTIVE]: [
+				"text-muted-foreground",
+				"hover:text-foreground",
+				"hover:bg-accent/50"
+			],
+			[NavItemState.ACTIVE]: ["text-primary", "bg-primary/10"],
+			[NavItemState.DISABLED]: [
+				"text-muted-foreground/50",
+				"cursor-not-allowed",
+				"pointer-events-none"
+			]
+		},
+		labelPosition: {
+			[LabelPosition.BELOW]: "flex-col gap-1",
+			[LabelPosition.BESIDE]: "flex-row gap-2",
+			[LabelPosition.HIDDEN]: ""
+		},
+		size: {
+			[NavSize.SMALL]: "px-2 py-1.5",
+			[NavSize.MEDIUM]: "px-3 py-2",
+			[NavSize.LARGE]: "px-4 py-3"
+		}
+	},
+	defaultVariants: {
+		state: NavItemState.INACTIVE,
+		labelPosition: LabelPosition.BELOW,
+		size: NavSize.MEDIUM
+	}
+});
+/**
+* Icon container styles
+* @description Styles for the icon wrapper
+*/
+const iconVariants = cva(["flex items-center justify-center", "relative"], {
+	variants: { size: {
+		[IconSize.SMALL]: "w-[18px] h-[18px]",
+		[IconSize.MEDIUM]: "w-6 h-6",
+		[IconSize.LARGE]: "w-7 h-7"
+	} },
+	defaultVariants: { size: IconSize.MEDIUM }
+});
+/**
+* Label text styles
+* @description Styles for the navigation item label
+*/
+const labelVariants = cva([
+	"font-medium",
+	"whitespace-nowrap overflow-hidden text-ellipsis",
+	"max-w-16"
+], {
+	variants: {
+		position: {
+			[LabelPosition.BELOW]: "text-[0.625rem]",
+			[LabelPosition.BESIDE]: "text-xs",
+			[LabelPosition.HIDDEN]: "sr-only"
+		},
+		size: {
+			[NavSize.SMALL]: "text-[0.5625rem]",
+			[NavSize.MEDIUM]: "text-[0.625rem]",
+			[NavSize.LARGE]: "text-xs"
+		}
+	},
+	defaultVariants: {
+		position: LabelPosition.BELOW,
+		size: NavSize.MEDIUM
+	}
+});
+/**
+* Badge indicator styles
+* @description Styles for notification badges on nav items
+*/
+const badgeVariants = cva([
+	"absolute",
+	"flex items-center justify-center",
+	"rounded-full",
+	"font-bold",
+	"bg-destructive text-destructive-foreground",
+	"border-2 border-background"
+], {
+	variants: { type: {
+		dot: "w-2.5 h-2.5 -top-0.5 -right-0.5",
+		count: "min-w-[1.125rem] h-[1.125rem] px-1 -top-1 -right-1.5 text-[0.625rem]"
+	} },
+	defaultVariants: { type: "dot" }
+});
+/**
+* Spacer styles to prevent content from going under navigation
+* @description Used as a placeholder element below main content
+*/
+const spacerVariants = cva(["w-full", "pb-[env(safe-area-inset-bottom,0px)]"], {
+	variants: { size: {
+		[NavSize.SMALL]: "h-14",
+		[NavSize.MEDIUM]: "h-[4.5rem]",
+		[NavSize.LARGE]: "h-22"
+	} },
+	defaultVariants: { size: NavSize.MEDIUM }
+});
+
+//#endregion
+export { badgeVariants, iconVariants, labelVariants, navItemVariants, navListVariants, rootVariants, spacerVariants };

package/dist/react-ui/blocks/BottomNavBar/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @fileoverview MobileBottomNav component exports
+ * @description Centralized exports for the MobileBottomNav component system
+ * @module MobileBottomNav
+ */
+export { MobileBottomNav, default } from "./MobileBottomNav";
+export { NavVariant, NavSize, LabelPosition, AnimationType, NavItemState, IconSize, ZIndexLevel, BlurIntensity, type RootProps, type NavListProps, type NavItemProps, type NavContextValue, type SpringConfig, type TweenConfig, type AnimationConfig, type GlassConfig, type BaseNavProps, DEFAULT_ANIMATION_CONFIG, DEFAULT_GLASS_CONFIG, DEFAULT_SPRING_CONFIG, DEFAULT_TWEEN_CONFIG, } from "./types";
+export { rootVariants, navListVariants, navItemVariants, iconVariants, labelVariants, badgeVariants as navBadgeVariants, spacerVariants, type RootVariantProps, type NavListVariantProps, type NavItemVariantProps, type IconVariantProps, type LabelVariantProps, type BadgeVariantProps, type SpacerVariantProps, } from "./MobileBottomNav.styles";
+export { useIOSSafariFix, useIOSFixedReset, detectIOSVersion, type IOSSafariFixConfig, } from "./useIOSSafariFix";
+//# sourceMappingURL=index.d.ts.map

package/dist/react-ui/blocks/BottomNavBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/BottomNavBar/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAG5D,OAAO,EAEL,UAAU,EACV,OAAO,EACP,aAAa,EACb,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,aAAa,EAEb,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,YAAY,EAEjB,wBAAwB,EACxB,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,SAAS,CAAA;AAGhB,OAAO,EACL,YAAY,EACZ,eAAe,EACf,eAAe,EACf,YAAY,EACZ,aAAa,EACb,aAAa,IAAI,gBAAgB,EACjC,cAAc,EACd,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,GACxB,MAAM,0BAA0B,CAAA;AAEjC,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,KAAK,kBAAkB,GACxB,MAAM,mBAAmB,CAAA"}