@nrbx/topbar-components 1.2.1 → 1.2.2

package/README.md

@@ -289,6 +289,7 @@ The stylesheet exposes the following sections for full control:
         sizeScale: new Vector2(1, 1),
         insetHeightOffset: 0,
         forceFrameHeight: undefined,  // override auto height (e.g. 55)
+        centreOffset: undefined,       // right-shift for centre dock (auto: 0 on new topbar, 12 on old)
     },
 
     // Icon internal sizing

package/out/components/provider.luau

@@ -53,11 +53,15 @@ end
 local function CenterDock(_param)
 	local children = _param.children
 	local frameRef = _param.frameRef
+	local centreOffset = _param.centreOffset
+	if centreOffset == nil then
+		centreOffset = 0
+	end
 	local stylesheet = useStylesheet().provider
 	return React.createElement(DockFrame, {
 		frameRef = frameRef,
 		anchor = Vector2.new(0.5, 0.5),
-		position = UDim2.new(0.5, 0, 0.5, 0),
+		position = UDim2.new(0.5, centreOffset, 0.5, 0),
 		paddingLeft = UDim.new(0, stylesheet.iconGroupSpacing),
 		paddingRight = UDim.new(0, stylesheet.iconGroupSpacing),
 		children = children,
@@ -100,6 +104,25 @@ local function TopbarProvider(_param)
 	local inset = useGuiInset()
 	local voiceChatEnabled = useVoicechatEnabled()
 	local stylesheet = useStylesheet().provider
+	--[[
+		*
+			 * Pixel offset that shifts the centre dock right to visually account for
+			 * Roblox's default left-side CoreGui icons (menu button, chips bar, etc.).
+			 *
+			 * Mirrors TopbarPlus's startInset logic:
+			 * - New topbar (height > 36): no offset — icons are mathematically centered
+			 * - Old topbar (height ≤ 36): 12px offset to account for the classic menu button
+			 *
+			 * Set `centreOffset` explicitly in the stylesheet to override.
+			 
+	]]
+	local centreOffset = useMemo(function()
+		if stylesheet.centreOffset ~= nil then
+			return stylesheet.centreOffset
+		end
+		local isOldTopbar = inset.Height <= 36
+		return if isOldTopbar then 12 else 0
+	end, { stylesheet.centreOffset, inset.Height })
 	local containerRef = useRef()
 	local leftDockRef = useRef()
 	local centerDockRef = useRef()
@@ -323,6 +346,7 @@ local function TopbarProvider(_param)
 		frameRef = leftDockRef,
 	}, buildDockContent(sorted.groups.left, "left")), React.createElement(CenterDock, {
 		frameRef = centerDockRef,
+		centreOffset = centreOffset,
 	}, buildDockContent(sorted.groups.centre, "centre")), React.createElement(RightDock, {
 		frameRef = rightDockRef,
 	}, buildDockContent(sorted.groups.right, "right")), sorted.other))

package/out/style.d.ts

@@ -36,6 +36,12 @@ export interface Stylesheet {
         iconGroupSpacing: number;
         /** Override for the topbar frame height. Uses inset height when `undefined`. */
         forceFrameHeight: number | undefined;
+        /**
+         * Pixel offset that shifts the centre dock to the right to visually
+         * account for Roblox's default left-side CoreGui icons (menu button,
+         * chips bar, etc.). Auto-detected from the topbar type when `undefined`.
+         */
+        centreOffset: number | undefined;
     };
     /** Sizing and spacing values shared by all icons. */
     sizing: {

package/out/style.luau

@@ -52,7 +52,7 @@ local DefaultStylesheet = {
 		toggleStateOnClick = true,
 		static = false,
 		disabled = false,
-		toggleKey = Enum.KeyCode.Unknown,
+		toggleKey = Enum.KeyCode.None,
 		notificationCount = 0,
 		iconWidth = 0,
 		contentPaddingX = 10,
@@ -98,6 +98,7 @@ local DefaultStylesheet = {
 		insetHeightOffset = 0,
 		iconGroupSpacing = 0,
 		forceFrameHeight = nil,
+		centreOffset = nil,
 	},
 	sizing = {
 		iconHeight = nil,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nrbx/topbar-components",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "main": "out/init.luau",
   "scripts": {
     "build": "rbxtsc",