@nrbx/topbar-components 1.0.5 → 1.0.7

package/out/components/icon.d.ts

@@ -1,5 +1,4 @@
 import React from '@rbxts/react';
-export type Dock = 'Left' | 'Center' | 'Right';
 export interface IconProps extends React.PropsWithChildren {
     backgroundTransparency?: StateDependent<number>;
     backgroundColor?: StateDependent<Color3>;
@@ -25,7 +24,6 @@ export interface IconProps extends React.PropsWithChildren {
     textAlignment?: StateDependent<Enum.TextXAlignment>;
     richText?: StateDependent<boolean>;
     toggleStateOnClick?: boolean;
-    dock?: Dock;
     /** When true, renders as a non-interactive label (no clicks, no hovers, no state changes) */
     static?: boolean;
     /** When true, dulls the text and icon with a dimming overlay */

package/out/components/provider.d.ts

@@ -1,8 +1,11 @@
 import React from '@rbxts/react';
 export type SelectionMode = 'Single' | 'Multiple';
+export declare function LeftDock({ children }: React.PropsWithChildren): React.JSX.Element;
+export declare function CenterDock({ children }: React.PropsWithChildren): React.JSX.Element;
+export declare function RightDock({ children }: React.PropsWithChildren): React.JSX.Element;
 interface ProviderProps extends React.PropsWithChildren {
     selectionMode?: SelectionMode;
     gameVoiceChatEnabled?: boolean;
 }
-export declare function TopbarProvider({ selectionMode, gameVoiceChatEnabled, children }: ProviderProps): React.JSX.Element;
+export declare function TopbarProvider({ selectionMode, gameVoiceChatEnabled, children, }: ProviderProps): React.JSX.Element;
 export {};

package/out/components/provider.luau

@@ -9,49 +9,55 @@ local useStylesheet = _context.useStylesheet
 local useGuiInset = TS.import(script, script.Parent.Parent, "hooks", "use-gui-inset").useGuiInset
 local useVoicechatEnabled = TS.import(script, script.Parent.Parent, "hooks", "use-voicechat-enabled").useVoicechatEnabled
 local debugLog = TS.import(script, script.Parent.Parent, "utilities", "debug").debugLog
-local function sortByDock(children)
-	local left = {}
-	local center = {}
-	local right = {}
-	local li = 0
-	local ci = 0
-	local ri = 0
-	React.Children.forEach(children, function(child)
-		if child == nil then
-			return nil
-		end
-		local childObj = child
-		local props = childObj.props
-		local _dockValue = props
-		if _dockValue ~= nil then
-			_dockValue = _dockValue.dock
-		end
-		local dockValue = _dockValue
-		local _exp = `sortByDock child: hasProps={props ~= nil}`
-		local _result = props
-		if _result ~= nil then
-			_result = _result.text
-		end
-		local _exp_1 = `text={_result}`
-		local _result_1 = props
-		if _result_1 ~= nil then
-			_result_1 = _result_1.static
-		end
-		debugLog(_exp, _exp_1, `static={_result_1}`, `dock="{dockValue}"`, `→ {if dockValue == "Center" then "Center" elseif dockValue == "Right" then "Right" else "Left"}`)
-		if dockValue == "Center" then
-			center[ci + 1] = child
-			ci += 1
-		elseif dockValue == "Right" then
-			right[ri + 1] = child
-			ri += 1
-		else
-			left[li + 1] = child
-			li += 1
-		end
-	end)
-	debugLog(`sortByDock totals: left={#left} center={#center} right={#right}`)
-	return { left, center, right }
+-- ── Dock container components ───────────────────────────────────────────────
+local function DockFrame(props)
+	local stylesheet = useStylesheet().provider
+	return React.createElement("frame", {
+		BackgroundTransparency = 1,
+		AnchorPoint = props.anchor,
+		Position = props.position,
+		Size = UDim2.fromScale(0, 1),
+		AutomaticSize = Enum.AutomaticSize.X,
+	}, (props.paddingLeft ~= nil or props.paddingRight ~= nil) and (React.createElement("uipadding", {
+		PaddingLeft = props.paddingLeft or UDim.new(0, 0),
+		PaddingRight = props.paddingRight or UDim.new(0, 0),
+	})), React.createElement("uilistlayout", {
+		FillDirection = Enum.FillDirection.Horizontal,
+		SortOrder = Enum.SortOrder.LayoutOrder,
+		Padding = UDim.new(0, stylesheet.iconSpacing),
+		VerticalAlignment = Enum.VerticalAlignment.Center,
+	}), props.children)
+end
+local function LeftDock(_param)
+	local children = _param.children
+	return React.createElement(DockFrame, {
+		anchor = Vector2.new(0, 0.5),
+		position = UDim2.new(0, 0, 0.5, 0),
+		children = children,
+	})
 end
+local function CenterDock(_param)
+	local children = _param.children
+	local stylesheet = useStylesheet().provider
+	return React.createElement(DockFrame, {
+		anchor = Vector2.new(0.5, 0.5),
+		position = UDim2.new(0.5, 0, 0.5, 0),
+		paddingLeft = UDim.new(0, stylesheet.iconGroupSpacing),
+		paddingRight = UDim.new(0, stylesheet.iconGroupSpacing),
+		children = children,
+	})
+end
+local function RightDock(_param)
+	local children = _param.children
+	local stylesheet = useStylesheet().provider
+	return React.createElement(DockFrame, {
+		anchor = Vector2.new(1, 0.5),
+		position = UDim2.new(1, 0, 0.5, 0),
+		paddingLeft = UDim.new(0, stylesheet.iconGroupSpacing),
+		children = children,
+	})
+end
+-- ── Provider ────────────────────────────────────────────────────────────────
 local function TopbarProvider(_param)
 	local selectionMode = _param.selectionMode
 	if selectionMode == nil then
@@ -68,12 +74,6 @@ local function TopbarProvider(_param)
 	local rawHeight = inset.Height - stylesheet.insetHeightOffset
 	local frameHeight = if stylesheet.forceFrameHeight ~= nil then stylesheet.forceFrameHeight else rawHeight
 	debugLog(`TopbarProvider frame: inset.Height={inset.Height}, inset.Width={inset.Width}`, `insetHeightOffset={stylesheet.insetHeightOffset}`, `rawHeight={rawHeight}`, `forceFrameHeight={stylesheet.forceFrameHeight}`, `finalHeight={frameHeight}`, `sizeScale=({stylesheet.sizeScale.X}, {stylesheet.sizeScale.Y})`)
-	local _binding = sortByDock(children)
-	local leftChildren = _binding[1]
-	local centerChildren = _binding[2]
-	local rightChildren = _binding[3]
-	local hasCenter = #centerChildren > 0
-	local hasRight = #rightChildren > 0
 	return React.createElement(LocationContext.Provider, {
 		value = {
 			type = "provider",
@@ -132,49 +132,11 @@ local function TopbarProvider(_param)
 		PaddingRight = UDim.new(0, stylesheet.paddingRight),
 		PaddingTop = UDim.new(0, stylesheet.paddingTop),
 		PaddingBottom = UDim.new(0, stylesheet.paddingBottom),
-	}), React.createElement("frame", {
-		key = "LeftDock",
-		BackgroundTransparency = 1,
-		AnchorPoint = Vector2.new(0, 0.5),
-		Position = UDim2.new(0, 0, 0.5, 0),
-		Size = UDim2.fromScale(0, 1),
-		AutomaticSize = Enum.AutomaticSize.X,
-	}, React.createElement("uilistlayout", {
-		FillDirection = Enum.FillDirection.Horizontal,
-		SortOrder = Enum.SortOrder.LayoutOrder,
-		Padding = UDim.new(0, stylesheet.iconSpacing),
-		VerticalAlignment = Enum.VerticalAlignment.Center,
-	}), leftChildren), hasCenter and (React.createElement("frame", {
-		key = "CenterDock",
-		BackgroundTransparency = 1,
-		AnchorPoint = Vector2.new(0.5, 0.5),
-		Position = UDim2.new(0.5, 0, 0.5, 0),
-		Size = UDim2.fromScale(0, 1),
-		AutomaticSize = Enum.AutomaticSize.X,
-	}, React.createElement("uipadding", {
-		PaddingLeft = UDim.new(0, stylesheet.iconGroupSpacing),
-		PaddingRight = UDim.new(0, stylesheet.iconGroupSpacing),
-	}), React.createElement("uilistlayout", {
-		FillDirection = Enum.FillDirection.Horizontal,
-		SortOrder = Enum.SortOrder.LayoutOrder,
-		Padding = UDim.new(0, stylesheet.iconSpacing),
-		VerticalAlignment = Enum.VerticalAlignment.Center,
-	}), centerChildren)), hasRight and (React.createElement("frame", {
-		key = "RightDock",
-		BackgroundTransparency = 1,
-		AnchorPoint = Vector2.new(1, 0.5),
-		Position = UDim2.new(1, 0, 0.5, 0),
-		Size = UDim2.fromScale(0, 1),
-		AutomaticSize = Enum.AutomaticSize.X,
-	}, React.createElement("uipadding", {
-		PaddingLeft = UDim.new(0, stylesheet.iconGroupSpacing),
-	}), React.createElement("uilistlayout", {
-		FillDirection = Enum.FillDirection.Horizontal,
-		SortOrder = Enum.SortOrder.LayoutOrder,
-		Padding = UDim.new(0, stylesheet.iconSpacing),
-		VerticalAlignment = Enum.VerticalAlignment.Center,
-	}), rightChildren))))
+	}), children))
 end
 return {
+	LeftDock = LeftDock,
+	CenterDock = CenterDock,
+	RightDock = RightDock,
 	TopbarProvider = TopbarProvider,
 }

package/out/style.luau

@@ -48,7 +48,6 @@ local DefaultStylesheet = {
 		defaultState = "deselected",
 		forcedState = "deselected",
 		toggleStateOnClick = true,
-		dock = "Left",
 		static = false,
 		disabled = false,
 		selected = noop,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nrbx/topbar-components",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "main": "out/init.lua",
   "scripts": {
     "build": "rbxtsc",