@nrbx/topbar-components 1.0.10 → 1.0.12

package/out/components/icon.d.ts

@@ -1,4 +1,5 @@
 import React from '@rbxts/react';
+import { type Stylesheet } from '../style';
 export interface IconProps extends React.PropsWithChildren {
     backgroundTransparency?: StateDependent<number>;
     backgroundColor?: StateDependent<Color3>;
@@ -29,7 +30,7 @@ export interface IconProps extends React.PropsWithChildren {
     /** When true, dulls the text and icon with a dimming overlay */
     disabled?: boolean;
     /** Per-icon stylesheet overrides — merged above the global stylesheet but below explicit props */
-    style?: Partial<IconProps>;
+    style?: Partial<IconProps & Stylesheet['sizing']>;
     selected?: () => void;
     deselected?: () => void;
     hover?: () => void;

package/out/components/icon.luau

@@ -39,24 +39,30 @@ local function Icon(componentProps)
 	local stylesheet = useStylesheet()
 	local _arg0 = location.type ~= "icon"
 	assert(_arg0, "Icons cannot be nested")
-	local _object = table.clone(stylesheet.icon)
+	local _object = table.clone(stylesheet.sizing)
 	setmetatable(_object, nil)
-	for _k, _v in componentProps do
+	for _k, _v in (style or {}) do
 		_object[_k] = _v
 	end
-	local animatedProps = useAnimateableProps(currentState, _object, unpack(ANIMATEABLE))
+	local sizing = _object
 	local _object_1 = table.clone(stylesheet.icon)
 	setmetatable(_object_1, nil)
-	for _k, _v in (style or {}) do
+	for _k, _v in componentProps do
 		_object_1[_k] = _v
 	end
+	local animatedProps = useAnimateableProps(currentState, _object_1, unpack(ANIMATEABLE))
+	local _object_2 = table.clone(stylesheet.icon)
+	setmetatable(_object_2, nil)
+	for _k, _v in (style or {}) do
+		_object_2[_k] = _v
+	end
 	for _k, _v in componentProps do
-		_object_1[_k] = _v
+		_object_2[_k] = _v
 	end
 	for _k, _v in animatedProps do
-		_object_1[_k] = _v
+		_object_2[_k] = _v
 	end
-	local props = _object_1
+	local props = _object_2
 	useMountEffect(function()
 		if props.static then
 			return nil
@@ -116,31 +122,31 @@ local function Icon(componentProps)
 		params.Text = currentText
 		params.Font = stateful(props.fontFace, currentState)
 		params.Size = stateful(props.textSize, currentState)
-		params.Width = stylesheet.sizing.textMeasurementWidth
+		params.Width = sizing.textMeasurementWidth
 		setTextBounds(TextService:GetTextBoundsAsync(params))
 		previousQueryRef.current = currentQuery
 	end), { currentText, props.fontFace, props.textSize, currentState })
 	local imageSizeOff = stateful(props.imageSizeOffset, currentState)
 	local forceHeight = if location.type == "dropdown" then stylesheet.dropdown.forceHeight else nil
-	local _condition = stylesheet.sizing.iconHeight
+	local _condition = sizing.iconHeight
 	if _condition == nil then
 		_condition = forceHeight
 		if _condition == nil then
-			_condition = inset.Height - stylesheet.sizing.iconVerticalPadding * 2
+			_condition = inset.Height - sizing.iconVerticalPadding * 2
 		end
 	end
 	local iconHeight = _condition
-	local imageSize = iconHeight - stylesheet.sizing.imagePadding * 2 + imageSizeOff
-	local minLabelWidth = if location.type == "dropdown" then location.desiredIconWidth - stylesheet.sizing.minLabelWidthPadding else inset.Height - stylesheet.sizing.iconHorizontalPadding * 2
+	local imageSize = iconHeight - sizing.imagePadding * 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 _exp = textBounds.X + stylesheet.sizing.labelPadding * 2
+	local _exp = textBounds.X + sizing.labelPadding * 2
 	local _condition_1 = currentImage
 	if _condition_1 ~= "" and _condition_1 then
 		_condition_1 = textBounds.X ~= 0
 	end
-	local iconSize = Vector2.new(math.max(iconHeight, _exp + (if _condition_1 ~= "" and _condition_1 then imageSize + stylesheet.sizing.imageToTextSpacing else 0)), iconHeight)
-	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)
+	local iconSize = Vector2.new(math.max(iconHeight, _exp + (if _condition_1 ~= "" and _condition_1 then imageSize + sizing.imageToTextSpacing else 0)), iconHeight)
+	local imagePos = sizing.imagePadding + imageSizeOff * -0.5
+	local textLabelPos = UDim2.new(0, if currentImage ~= "" and currentImage then imageSize + sizing.imagePadding * 2 else sizing.labelPadding, 0.5, 0)
 	useEffect(function()
 		if props.static then
 			return nil
@@ -236,7 +242,7 @@ local function Icon(componentProps)
 		TextColor3 = stateful(props.textColor, currentState),
 		TextWrapped = false,
 		AnchorPoint = Vector2.new(0, 0.5),
-		Size = UDim2.new(0, accumulatedLabelWidth, stylesheet.sizing.buttonLabelHeightFraction, 0),
+		Size = UDim2.new(0, accumulatedLabelWidth, sizing.buttonLabelHeightFraction, 0),
 		Position = textLabelPos,
 		TextXAlignment = stateful(props.textAlignment, currentState),
 		RichText = stateful(props.richText, currentState),
@@ -254,8 +260,8 @@ local function Icon(componentProps)
 	}), props.disabled and (React.createElement("frame", {
 		key = "DisabledOverlay",
 		Size = UDim2.fromScale(1, 1),
-		BackgroundTransparency = stylesheet.sizing.disabledOverlayTransparency,
-		BackgroundColor3 = stylesheet.sizing.disabledOverlayColor,
+		BackgroundTransparency = sizing.disabledOverlayTransparency,
+		BackgroundColor3 = sizing.disabledOverlayColor,
 		BorderSizePixel = 0,
 		ZIndex = 10,
 	})))))

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nrbx/topbar-components",
-  "version": "1.0.10",
-  "main": "out/init.lua",
+  "version": "1.0.12",
+  "main": "out/init.luau",
   "scripts": {
     "build": "rbxtsc",
     "watch": "rbxtsc -w",