@nrbx/topbar-components 1.1.5 → 1.1.7

package/out/components/icon.d.ts

@@ -19,6 +19,8 @@ export interface IconProps extends React.PropsWithChildren {
     textColor?: StateDependent<Color3>;
     /** Transparency of the icon image. Animated on state change. */
     imageTransparency?: StateDependent<number>;
+    /** Transparency of the label text. Animated on state change. */
+    textTransparency?: StateDependent<number>;
     /** Layout order used for horizontal sorting in docks. */
     layoutOrder?: StateDependent<number>;
     /** Text displayed next to or instead of the image. */

package/out/components/icon.luau

@@ -33,7 +33,7 @@ local Notification = TS.import(script, script.Parent, "notification").Notificati
 	 * both states, or `{ deselected: T; selected: T }` to animate between them.
 	 
 ]]
-local ANIMATEABLE = { "backgroundColor", "backgroundTransparency", "imageColor", "imageTransparency" }
+local ANIMATEABLE = { "backgroundColor", "backgroundTransparency", "imageColor", "imageTransparency", "textTransparency" }
 --* Icon select/deselect state. 
 --[[
 	*
@@ -199,21 +199,22 @@ local function Icon(componentProps)
 	end
 	local imageToTextGap = _condition_3
 	local imageSize = iconHeight - contentPadY * 2 + imageSizeOff
-	local minLabelWidth = if location.type == "dropdown" then location.desiredIconWidth - sizing.minLabelWidthPadding else inset.Height - sizing.iconHorizontalPadding * 2
-	local accumulatedLabelWidth = if currentImage ~= "" and currentImage then textBounds.X else math.max(textBounds.X, minLabelWidth)
-	local contentWidth = if currentImage ~= "" and currentImage then imageSize + imageToTextGap + textBounds.X else textBounds.X
+	local _exp = (if currentImage ~= "" and currentImage then imageSize else 0)
+	local _condition_4 = currentImage
+	if _condition_4 ~= "" and _condition_4 then
+		_condition_4 = currentText
+	end
+	local contentWidth = _exp + (if _condition_4 ~= "" and _condition_4 then imageToTextGap else 0) + (if currentText ~= "" and currentText then textBounds.X else 0)
 	local autoWidth = contentWidth + contentPadX * 2
-	local _condition_4 = props.iconWidth
-	if not (_condition_4 ~= 0 and _condition_4 == _condition_4 and _condition_4) then
-		_condition_4 = sizing.iconWidth
-		if not (_condition_4 ~= 0 and _condition_4 == _condition_4 and _condition_4) then
-			_condition_4 = math.max(iconHeight, autoWidth)
+	local _condition_5 = props.iconWidth
+	if not (_condition_5 ~= 0 and _condition_5 == _condition_5 and _condition_5) then
+		_condition_5 = sizing.iconWidth
+		if not (_condition_5 ~= 0 and _condition_5 == _condition_5 and _condition_5) then
+			_condition_5 = math.max(iconHeight, autoWidth)
 		end
 	end
-	local iconWidth = _condition_4
+	local iconWidth = _condition_5
 	local iconSize = Vector2.new(iconWidth, iconHeight)
-	local imagePosY = (iconHeight - imageSize) / 2 + imageSizeOff * -0.5
-	local textLabelPos = UDim2.new(0, if currentImage ~= "" and currentImage then contentPadX + imageSize + imageToTextGap else contentPadX, 0.5, 0)
 	useEffect(function()
 		if props.static then
 			return nil
@@ -260,6 +261,9 @@ local function Icon(componentProps)
 		Active = not props.static,
 		Selectable = not props.static,
 		AutoButtonColor = not props.static,
+		Text = "",
+		BackgroundTransparency = animatedProps.backgroundTransparency,
+		BackgroundColor3 = animatedProps.backgroundColor,
 		Event = {
 			MouseButton1Click = function()
 				if props.static then
@@ -304,16 +308,26 @@ local function Icon(componentProps)
 				props.unhover()
 			end,
 		},
-		Text = "",
-		BackgroundTransparency = stateful(props.backgroundTransparency, currentState),
-		BackgroundColor3 = stateful(props.backgroundColor, currentState),
-	}, children, currentImage ~= nil and currentImage ~= "" and (React.createElement("imagelabel", {
+	}, React.createElement("uipadding", {
+		PaddingLeft = UDim.new(0, contentPadX),
+		PaddingRight = UDim.new(0, contentPadX),
+		PaddingTop = UDim.new(0, contentPadY),
+		PaddingBottom = UDim.new(0, contentPadY),
+	}), React.createElement("frame", {
+		Size = UDim2.fromScale(1, 1),
+		BackgroundTransparency = 1,
+	}, React.createElement("uilistlayout", {
+		FillDirection = Enum.FillDirection.Horizontal,
+		VerticalAlignment = Enum.VerticalAlignment.Center,
+		HorizontalAlignment = Enum.HorizontalAlignment.Center,
+		Padding = UDim.new(0, imageToTextGap),
+		SortOrder = Enum.SortOrder.LayoutOrder,
+	}), currentImage ~= nil and currentImage ~= "" and (React.createElement("imagelabel", {
 		Size = UDim2.fromOffset(imageSize, imageSize),
-		Position = UDim2.fromOffset(contentPadX, imagePosY),
 		Image = currentImage,
 		BackgroundTransparency = 1,
-		ImageColor3 = stateful(props.imageColor, currentState),
-		ImageTransparency = stateful(props.imageTransparency, currentState),
+		ImageColor3 = animatedProps.imageColor,
+		ImageTransparency = animatedProps.imageTransparency,
 		ImageRectOffset = stateful(props.imageRectOffset, currentState),
 		ImageRectSize = stateful(props.imageRectSize, currentState),
 	})), currentText ~= nil and currentText ~= "" and (React.createElement("textlabel", {
@@ -321,18 +335,18 @@ local function Icon(componentProps)
 		TextSize = stateful(props.textSize, currentState),
 		TextColor3 = stateful(props.textColor, currentState),
 		TextWrapped = false,
-		AnchorPoint = Vector2.new(0, 0.5),
-		Size = UDim2.new(0, accumulatedLabelWidth, sizing.buttonLabelHeightFraction, 0),
-		Position = textLabelPos,
+		Size = UDim2.fromOffset(textBounds.X, 0),
+		AutomaticSize = Enum.AutomaticSize.Y,
 		TextXAlignment = stateful(props.textAlignment, currentState),
 		RichText = stateful(props.richText, currentState),
 		BackgroundTransparency = 1,
+		TextTransparency = animatedProps.textTransparency,
 		Text = currentText,
 	}, React.createElement("uistroke", {
 		Thickness = stateful(props.strokeThickness, currentState),
 		Color = stateful(props.strokeColor, currentState),
 		Transparency = stateful(props.strokeTransparency, currentState),
-	}))), React.createElement("uicorner", {
+	})))), children, React.createElement("uicorner", {
 		CornerRadius = if location.type == "dropdown" then stylesheet.dropdown.iconCornerRadius else stateful(props.cornerRadius, currentState),
 	}), props.disabled and (React.createElement("frame", {
 		Size = UDim2.fromScale(1, 1),

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

@@ -10,6 +10,7 @@ local springs = TS.import(script, script.Parent.Parent, "utilities", "springs").
 local function useAnimateableProps(state, props, ...)
 	local keys = { ... }
 	local previousProps = usePrevious(props)
+	local previousState = usePrevious(state)
 	local motionBindings = {}
 	local motionControls = {}
 	for _, key in keys do
@@ -21,13 +22,13 @@ local function useAnimateableProps(state, props, ...)
 		for i = 0, #keys - 1 do
 			local key = keys[i + 1]
 			local value = stateful(props[key], state)
-			local previousValue = if previousProps then stateful(previousProps[key], state) else nil
+			local previousValue = if previousProps and previousState ~= nil then stateful(previousProps[key], previousState) else nil
 			if value == previousValue then
 				continue
 			end
 			motionControls[i + 1]:spring(value, springs.responsive)
 		end
-	end, { props })
+	end, { props, state })
 	-- ▼ ReadonlyArray.map ▼
 	local _newValue = table.create(#keys)
 	local _callback = function(key, i)

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

@@ -1,15 +1,18 @@
 -- 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
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useEffect = _react.useEffect
+local useState = _react.useState
 local _services = TS.import(script, TS.getModule(script, "@rbxts", "services"))
 local Players = _services.Players
 local VoiceChatService = _services.VoiceChatService
 local function useVoicechatEnabled()
 	local enabled, setEnabled = useState(false)
-	useAsyncEffect(TS.async(function()
-		setEnabled(VoiceChatService:IsVoiceEnabledForUserIdAsync(Players.LocalPlayer))
-	end), {})
+	useEffect(function()
+		TS.Promise.try(function()
+			return VoiceChatService:IsVoiceEnabledForUserIdAsync(Players.LocalPlayer)
+		end):andThen(setEnabled)
+	end, {})
 	return enabled
 end
 return {

package/out/style.luau

@@ -44,6 +44,7 @@ local DefaultStylesheet = {
 		playSound = defaultPlaySound,
 		imageId = "",
 		imageTransparency = 0,
+		textTransparency = 0,
 		layoutOrder = 0,
 		text = "",
 		defaultState = "deselected",
@@ -54,8 +55,8 @@ local DefaultStylesheet = {
 		toggleKey = Enum.KeyCode.Unknown,
 		notificationCount = 0,
 		iconWidth = 0,
-		contentPaddingX = 6,
-		contentPaddingY = 6,
+		contentPaddingX = 10,
+		contentPaddingY = 2,
 		imageToTextSpacing = 6,
 		selected = noop,
 		deselected = noop,
@@ -105,8 +106,8 @@ local DefaultStylesheet = {
 		imageToTextSpacing = 6,
 		iconHorizontalPadding = 6,
 		iconVerticalPadding = 6,
-		contentPaddingX = 6,
-		contentPaddingY = 6,
+		contentPaddingX = 10,
+		contentPaddingY = 2,
 		textMeasurementWidth = 99999,
 		minLabelWidthPadding = 12,
 		buttonLabelHeightFraction = 0.8,

package/package.json

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