@nrbx/topbar-components 1.0.0 → 1.0.1

package/out/components/dropdown.luau

@@ -1,4 +1,4 @@
--- Compiled with roblox-ts v1.0.2
+-- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local _pretty_react_hooks = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out)
 local mapBinding = _pretty_react_hooks.mapBinding

package/out/components/icon.d.ts

@@ -1,4 +1,5 @@
 import React from '@rbxts/react';
+export type Dock = 'Left' | 'Center' | 'Right';
 export interface IconProps extends React.PropsWithChildren {
     backgroundTransparency?: StateDependent<number>;
     backgroundColor?: StateDependent<Color3>;
@@ -24,6 +25,11 @@ 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 */
+    disabled?: boolean;
     selected?: () => void;
     deselected?: () => void;
     hover?: () => void;
@@ -37,4 +43,4 @@ export type IconState = 'selected' | 'deselected';
 export type StateDependent<T> = Record<IconState, T> | T;
 export type FromStateDependent<T> = T extends StateDependent<infer U> ? U : T;
 export type IconId = number;
-export declare function Icon({ children, ...componentProps }: IconProps): React.JSX.Element;
+export declare function Icon(componentProps: IconProps): React.JSX.Element;

package/out/components/icon.luau

@@ -1,4 +1,4 @@
--- Compiled with roblox-ts v1.0.2
+-- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local deepEquals = TS.import(script, TS.getModule(script, "@rbxts", "object-utils")).deepEquals
 local _pretty_react_hooks = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out)
@@ -24,18 +24,9 @@ local useId = TS.import(script, script.Parent.Parent, "hooks", "use-id").useId
 local noop = TS.import(script, script.Parent.Parent, "style").noop
 local stateful = TS.import(script, script.Parent.Parent, "utilities", "resolve-state-dependent").stateful
 local ANIMATEABLE = { "backgroundColor", "backgroundTransparency", "imageColor", "imageTransparency" }
-local function Icon(_param)
-	local children = _param.children
-	local _extracted = {
-		["children"] = true,
-	}
-	local _rest = {}
-	for _k, _v in _param do
-		if not _extracted[_k] then
-			_rest[_k] = _v
-		end
-	end
-	local componentProps = _rest
+local function Icon(componentProps)
+	local _binding = componentProps
+	local children = _binding.children
 	local inset = useGuiInset()
 	local location = useLocation()
 	local id = useId()
@@ -63,15 +54,24 @@ local function Icon(_param)
 	end
 	local props = _object_1
 	useMountEffect(function()
+		if props.static then
+			return nil
+		end
 		local _ = props.defaultState and not componentProps.forcedState and setState(props.defaultState)
 	end)
 	useEffect(function()
+		if props.static then
+			return nil
+		end
 		if not componentProps.forcedState then
 			return nil
 		end
 		setState(componentProps.forcedState)
 	end, { componentProps.forcedState })
 	useUpdateEffect(function()
+		if props.static then
+			return nil
+		end
 		props.stateChanged(currentState)
 		if currentState == "selected" then
 			location.iconSelected(id)
@@ -82,6 +82,9 @@ local function Icon(_param)
 		end
 	end, { currentState })
 	useUpdateEffect(function()
+		if props.static then
+			return nil
+		end
 		if currentState == "selected" and not (table.find(location.selectedIcons, id) ~= nil) then
 			setState("deselected")
 		end
@@ -135,6 +138,9 @@ local function Icon(_param)
 	local imagePos = stylesheet.sizing.imagePadding + imageSizeOff * -0.5
 	local textLabelPos = UDim2.new(0, if currentImage ~= "" and currentImage then imageSize + stylesheet.sizing.imagePadding * 2 else stylesheet.sizing.labelPadding, 0.5, 0)
 	useEffect(function()
+		if props.static then
+			return nil
+		end
 		if location.type ~= "dropdown" then
 			return nil
 		end
@@ -144,6 +150,9 @@ local function Icon(_param)
 		location.registerChild(id, _vector2 + _vector2_1)
 	end, { currentState, contentSize.Y, dropdownAnimating, iconSize })
 	useUnmountEffect(function()
+		if props.static then
+			return nil
+		end
 		if location.type ~= "dropdown" then
 			return nil
 		end
@@ -169,8 +178,13 @@ local function Icon(_param)
 		key = "IconWrapper",
 	}, React.createElement("textbutton", {
 		Size = UDim2.new(1, 0, 0, iconSize.Y),
+		Active = not props.static,
+		Selectable = not props.static,
 		Event = {
 			MouseButton1Click = function()
+				if props.static then
+					return nil
+				end
 				if stateful(props.toggleStateOnClick, currentState) then
 					setState(if currentState == "deselected" then "selected" else "deselected")
 				end
@@ -182,6 +196,9 @@ local function Icon(_param)
 				props.playSound(soundId)
 			end,
 			MouseButton2Click = function()
+				if props.static then
+					return nil
+				end
 				if props.onRightClick == noop then
 					return nil
 				end
@@ -192,8 +209,8 @@ local function Icon(_param)
 				end
 				props.playSound(soundId)
 			end,
-			MouseEnter = props.hover,
-			MouseLeave = props.unhover,
+			MouseEnter = if props.static then noop else props.hover,
+			MouseLeave = if props.static then noop else props.unhover,
 		},
 		Text = "",
 		BackgroundTransparency = props.backgroundTransparency,
@@ -230,7 +247,14 @@ local function Icon(_param)
 	}))), React.createElement("uicorner", {
 		key = "UICorner",
 		CornerRadius = if location.type == "dropdown" then stylesheet.dropdown.iconCornerRadius else stateful(props.cornerRadius, currentState),
-	}))))
+	}), props.disabled and (React.createElement("frame", {
+		key = "DisabledOverlay",
+		Size = UDim2.fromScale(1, 1),
+		BackgroundTransparency = stylesheet.sizing.disabledOverlayTransparency,
+		BackgroundColor3 = stylesheet.sizing.disabledOverlayColor,
+		BorderSizePixel = 0,
+		ZIndex = 10,
+	})))))
 end
 return {
 	Icon = Icon,

package/out/components/provider.luau

@@ -1,4 +1,4 @@
--- Compiled with roblox-ts v1.0.2
+-- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
@@ -8,6 +8,30 @@ local LocationContext = _context.LocationContext
 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 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
+		if React.isValidElement(child) and (child.props).dock == "Center" then
+			center[ci + 1] = child
+			ci += 1
+		elseif React.isValidElement(child) and (child.props).dock == "Right" then
+			right[ri + 1] = child
+			ri += 1
+		else
+			left[li + 1] = child
+			li += 1
+		end
+	end)
+	return { left, center, right }
+end
 local function TopbarProvider(_param)
 	local selectionMode = _param.selectionMode
 	if selectionMode == nil then
@@ -22,6 +46,12 @@ local function TopbarProvider(_param)
 	local hasBetaLabel = gameVoiceChatEnabled and voiceChatEnabled
 	local leftPadding = if hasBetaLabel then stylesheet.paddingLeft + 16 else stylesheet.paddingLeft
 	local frameHeight = inset.Height - stylesheet.insetHeightOffset
+	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",
@@ -80,12 +110,45 @@ 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),
+	}), 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),
+	}), 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", {
-		key = "UIListLayout",
 		FillDirection = Enum.FillDirection.Horizontal,
 		SortOrder = Enum.SortOrder.LayoutOrder,
 		Padding = UDim.new(0, stylesheet.iconSpacing),
-	}), children))
+	}), rightChildren))))
 end
 return {
 	TopbarProvider = TopbarProvider,

package/out/components/stylesheet.luau

@@ -1,4 +1,4 @@
--- Compiled with roblox-ts v1.0.2
+-- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local StylesheetContext = TS.import(script, script.Parent.Parent, "context").StylesheetContext

package/out/context.luau

@@ -1,4 +1,4 @@
--- Compiled with roblox-ts v1.0.2
+-- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local createContext = _react.createContext

package/out/hooks/use-animateable-props.luau

@@ -1,4 +1,4 @@
--- Compiled with roblox-ts v1.0.2
+-- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local Object = TS.import(script, TS.getModule(script, "@rbxts", "object-utils"))
 local _pretty_react_hooks = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out)

package/out/hooks/use-gui-inset.luau

@@ -1,4 +1,4 @@
--- Compiled with roblox-ts v1.0.2
+-- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local _pretty_react_hooks = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out)
 local useEventListener = _pretty_react_hooks.useEventListener

package/out/hooks/use-id.luau

@@ -1,4 +1,4 @@
--- Compiled with roblox-ts v1.0.2
+-- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local useMemo = TS.import(script, TS.getModule(script, "@rbxts", "react")).useMemo
 local createIdGenerator = TS.import(script, script.Parent.Parent, "utilities", "id-gen").createIdGenerator

package/out/hooks/use-voicechat-enabled.luau

@@ -1,4 +1,4 @@
--- Compiled with roblox-ts v1.0.2
+-- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local useAsyncEffect = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out).useAsyncEffect
 local useState = TS.import(script, TS.getModule(script, "@rbxts", "react")).useState

package/out/init.luau

@@ -1,4 +1,4 @@
--- Compiled with roblox-ts v1.0.2
+-- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local exports = {}
 for _k, _v in TS.import(script, script, "components", "dropdown") or {} do

package/out/style.d.ts

@@ -21,6 +21,8 @@ export interface Stylesheet {
         sizeScale: Vector2;
         /** Offset subtracted from the gui inset height */
         insetHeightOffset: number;
+        /** Extra gap between left, center, and right icon groups (default 0) */
+        iconGroupSpacing: number;
     };
     /**
      * Fine-grained sizing & layout overrides for icon internals.
@@ -43,6 +45,10 @@ export interface Stylesheet {
         minLabelWidthPadding: number;
         /** Fraction of icon height used for the text button label size (default 0.8) */
         buttonLabelHeightFraction: number;
+        /** Transparency of the dimming overlay when an icon is disabled (0 = fully visible, 1 = fully hidden) */
+        disabledOverlayTransparency: number;
+        /** Color of the dimming overlay when an icon is disabled */
+        disabledOverlayColor: Color3;
     };
     /**
      * Visual theming for the dropdown surface (background, border, position).

package/out/style.luau

@@ -1,4 +1,4 @@
--- Compiled with roblox-ts v1.0.2
+-- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local SoundService = TS.import(script, TS.getModule(script, "@rbxts", "services")).SoundService
 local function defaultPlaySound(id)
@@ -48,6 +48,9 @@ local DefaultStylesheet = {
 		defaultState = "deselected",
 		forcedState = "deselected",
 		toggleStateOnClick = true,
+		dock = "Left",
+		static = false,
+		disabled = false,
 		selected = noop,
 		deselected = noop,
 		stateChanged = noop,
@@ -85,6 +88,7 @@ local DefaultStylesheet = {
 		position = UDim2.fromScale(1, 0),
 		sizeScale = Vector2.new(1, 1),
 		insetHeightOffset = 0,
+		iconGroupSpacing = 0,
 	},
 	sizing = {
 		iconHeight = nil,
@@ -94,6 +98,8 @@ local DefaultStylesheet = {
 		textMeasurementWidth = 99999,
 		minLabelWidthPadding = 12,
 		buttonLabelHeightFraction = 0.8,
+		disabledOverlayTransparency = 0.55,
+		disabledOverlayColor = Color3.new(0, 0, 0),
 	},
 	dropdownTheme = {
 		backgroundColor = Color3.new(1, 1, 1),

package/out/utilities/id-gen.luau

@@ -1,4 +1,4 @@
--- Compiled with roblox-ts v1.0.2
+-- Compiled with roblox-ts v3.0.0
 local function createIdGenerator()
 	local value = 0
 	return function()

package/out/utilities/resolve-state-dependent.luau

@@ -1,4 +1,4 @@
--- Compiled with roblox-ts v1.0.2
+-- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local t = TS.import(script, TS.getModule(script, "@rbxts", "t").lib.ts).t
 local state_check = t.union(t.literal("selected"), t.literal("deselected"))

package/out/utilities/springs.luau

@@ -1,4 +1,4 @@
--- Compiled with roblox-ts v1.0.2
+-- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local config = TS.import(script, TS.getModule(script, "@rbxts", "ripple").src).config
 local _object = table.clone(config.spring)

package/out/utilities/types.luau

@@ -1,2 +1,2 @@
--- Compiled with roblox-ts v1.0.2
+-- Compiled with roblox-ts v3.0.0
 return nil

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nrbx/topbar-components",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "out/init.lua",
   "scripts": {
     "build": "rbxtsc",
@@ -10,7 +10,7 @@
   "keywords": [],
   "author": "ninjaninja140",
   "license": "MIT",
-  "description": "@rbxts/react component package mimicking topbar-plus",
+  "description": "@rbxts/react component package mimicking topbar-plus with extra functionality, forked from @rbxts/topbar-components",
   "types": "out/index.d.ts",
   "files": [
     "out",
@@ -30,7 +30,7 @@
     "@rbxts/compiler-types": "^3.0.0-types.0",
     "@rbxts/react": "^17.3.7-ts.2",
     "@rbxts/types": "^1.0.925",
-    "roblox-ts": "npm:@wad4444/roblox-ts@^1.0.0",
+    "roblox-ts": "^3.0.0",
     "typescript": "^6.0.3"
   },
   "dependencies": {