@nrbx/topbar-components 1.0.9 → 1.0.11

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>;
@@ -28,6 +29,8 @@ export interface IconProps extends React.PropsWithChildren {
     static?: boolean;
     /** 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 & Stylesheet['sizing']>;
     selected?: () => void;
     deselected?: () => void;
     hover?: () => void;

package/out/components/icon.luau

@@ -27,7 +27,7 @@ local ANIMATEABLE = { "backgroundColor", "backgroundTransparency", "imageColor",
 local function Icon(componentProps)
 	local _binding = componentProps
 	local children = _binding.children
-	local style = componentProps.style
+	local style = _binding.style
 	local inset = useGuiInset()
 	local location = useLocation()
 	local id = useId()
@@ -39,22 +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 (style or {}) do
 		_object[_k] = _v
 	end
+	local sizing = _object
+	local _object_1 = table.clone(stylesheet.icon)
+	setmetatable(_object_1, nil)
 	for _k, _v in componentProps do
-		_object[_k] = _v
+		_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_2[_k] = _v
 	end
-	local merged = _object
-	local animatedProps = useAnimateableProps(currentState, merged, unpack(ANIMATEABLE))
-	local _object_1 = table.clone(merged)
-	setmetatable(_object_1, nil)
 	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
@@ -114,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 - 12
+			_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.labelPadding * 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
@@ -234,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),
@@ -252,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/out/style.d.ts

@@ -3,7 +3,7 @@ import type { DropdownProps } from './components/dropdown';
 import type { IconProps } from './components/icon';
 export declare function noop(): void;
 export interface Stylesheet {
-    icon: Required<IconProps>;
+    icon: Required<Omit<IconProps, 'style'>>;
     dropdown: Required<DropdownProps>;
     /**
      * Configure the top-level provider frame: padding, spacing, background, sizing.
@@ -44,6 +44,10 @@ export interface Stylesheet {
         labelPadding: number;
         /** Gap between the image and the text label (default 6) */
         imageToTextSpacing: number;
+        /** Horizontal padding within the icon button (default 6, used in icon size calculations) */
+        iconHorizontalPadding: number;
+        /** Vertical padding within the icon button (default 6, subtracted from inset height) */
+        iconVerticalPadding: number;
         /** Max width passed to GetTextBoundsParams (default 99999) */
         textMeasurementWidth: number;
         /** Extra padding subtracted from the min label width inside a dropdown (default 12) */

package/out/style.luau

@@ -95,6 +95,8 @@ local DefaultStylesheet = {
 		imagePadding = 6,
 		labelPadding = 6,
 		imageToTextSpacing = 6,
+		iconHorizontalPadding = 6,
+		iconVerticalPadding = 6,
 		textMeasurementWidth = 99999,
 		minLabelWidthPadding = 12,
 		buttonLabelHeightFraction = 0.8,

package/package.json

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