@nrbx/topbar-components 1.0.12 → 1.1.1

package/out/hooks/use-toggle-key.luau

@@ -0,0 +1,29 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local useEffect = TS.import(script, TS.getModule(script, "@rbxts", "react")).useEffect
+local UserInputService = TS.import(script, TS.getModule(script, "@rbxts", "services")).UserInputService
+--[[
+	*
+	 * Calls `callback` whenever the given `keycode` is pressed.
+	 *
+	 * Listens on `UserInputService.InputBegan` and ignores game-processed input.
+	 
+]]
+local function useToggleKey(keycode, callback)
+	useEffect(function()
+		local connection = UserInputService.InputBegan:Connect(function(input, gameProcessed)
+			if gameProcessed then
+				return nil
+			end
+			if input.KeyCode == keycode then
+				callback()
+			end
+		end)
+		return function()
+			return connection:Disconnect()
+		end
+	end, { keycode })
+end
+return {
+	useToggleKey = useToggleKey,
+}

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

@@ -8,7 +8,7 @@ local VoiceChatService = _services.VoiceChatService
 local function useVoicechatEnabled()
 	local enabled, setEnabled = useState(false)
 	useAsyncEffect(TS.async(function()
-		setEnabled(VoiceChatService:IsVoiceEnabledForUserIdAsync(Players.LocalPlayer.UserId))
+		setEnabled(VoiceChatService:IsVoiceEnabledForUserIdAsync(Players.LocalPlayer))
 	end), {})
 	return enabled
 end

package/out/index.d.ts

@@ -1,4 +1,9 @@
+export * from "./components/custom-dropdown";
 export * from "./components/dropdown";
 export * from "./components/icon";
+export * from "./components/notification";
+export * from "./components/overflow";
 export * from "./components/provider";
 export * from "./components/stylesheet";
+export * from "./components/tooltip";
+export * from "./hooks/use-toggle-key";

package/out/init.luau

@@ -1,16 +1,31 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local exports = {}
+for _k, _v in TS.import(script, script, "components", "custom-dropdown") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "components", "dropdown") or {} do
 	exports[_k] = _v
 end
 for _k, _v in TS.import(script, script, "components", "icon") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "components", "notification") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "components", "overflow") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "components", "provider") or {} do
 	exports[_k] = _v
 end
 for _k, _v in TS.import(script, script, "components", "stylesheet") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "components", "tooltip") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "hooks", "use-toggle-key") or {} do
+	exports[_k] = _v
+end
 return exports

package/out/style.d.ts

@@ -2,84 +2,166 @@ import type { SpringOptions } from '@rbxts/ripple';
 import type { DropdownProps } from './components/dropdown';
 import type { IconProps } from './components/icon';
 export declare function noop(): void;
+/** Complete theme configuration consumed by all topbar components. */
 export interface Stylesheet {
+    /** Default values for every {@link Icon} prop. */
     icon: Required<Omit<IconProps, 'style'>>;
+    /** Default values for every {@link Dropdown} prop. */
     dropdown: Required<DropdownProps>;
-    /**
-     * Configure the top-level provider frame: padding, spacing, background, sizing.
-     */
+    /** Topbar container layout settings. */
     provider: {
+        /** Left padding of the topbar frame. */
         paddingLeft: number;
+        /** Right padding of the topbar frame. */
         paddingRight: number;
+        /** Top padding of the topbar frame. */
         paddingTop: number;
+        /** Bottom padding of the topbar frame. */
         paddingBottom: number;
+        /** Horizontal gap between adjacent icons. */
         iconSpacing: number;
+        /** Background transparency of the topbar frame. */
         backgroundTransparency: number;
+        /** Background color of the topbar frame. */
         backgroundColor: Color3;
+        /** Anchor point of the topbar frame. */
         anchorPoint: Vector2;
+        /** Position of the topbar frame. */
         position: UDim2;
+        /** Multiplier applied to the topbar frame size. */
         sizeScale: Vector2;
-        /** Offset subtracted from the gui inset height */
+        /** Pixels subtracted from the gui inset height. */
         insetHeightOffset: number;
-        /** Extra gap between left, center, and right icon groups (default 0) */
+        /** Extra horizontal gap between left/center and right/center icon groups. */
         iconGroupSpacing: number;
-        /**
-         * Explicit override for the provider frame Y size (in pixels).
-         * When set, this replaces the automatic `(inset.Height - insetHeightOffset) * sizeScale.Y` calculation.
-         */
+        /** Override for the topbar frame height. Uses inset height when `undefined`. */
         forceFrameHeight: number | undefined;
     };
-    /**
-     * Fine-grained sizing & layout overrides for icon internals.
-     */
+    /** Sizing and spacing values shared by all icons. */
     sizing: {
-        /**
-         * Explicit icon height override.
-         * When defined, this replaces the automatic `forceHeight ?? inset.Height - 12` calculation.
-         */
+        /** Fixed icon height. Uses the inset height when `undefined`. */
         iconHeight: number | undefined;
-        /** Padding between the icon edge and the image (default 6) */
+        /** Fixed icon width. Auto-fits to content when `undefined` or `0`. */
+        iconWidth: number | undefined;
+        /** Padding around the image inside the icon button. */
         imagePadding: number;
-        /** Padding between the icon edge and the text label (default 6) */
+        /** Padding around the label inside the icon button. */
         labelPadding: number;
-        /** Gap between the image and the text label (default 6) */
+        /** Gap between the icon image and its text label. */
         imageToTextSpacing: number;
-        /** Horizontal padding within the icon button (default 6, used in icon size calculations) */
+        /** Horizontal padding applied to icons. */
         iconHorizontalPadding: number;
-        /** Vertical padding within the icon button (default 6, subtracted from inset height) */
+        /** Vertical padding applied to icons. */
         iconVerticalPadding: number;
-        /** Max width passed to GetTextBoundsParams (default 99999) */
+        /** Horizontal outer padding from button edge to content. */
+        contentPaddingX: number;
+        /** Vertical outer padding from button edge to content. */
+        contentPaddingY: number;
+        /** Width used when measuring text bounds. */
         textMeasurementWidth: number;
-        /** Extra padding subtracted from the min label width inside a dropdown (default 12) */
+        /** Minimum label width padding when inside a dropdown. */
         minLabelWidthPadding: number;
-        /** Fraction of icon height used for the text button label size (default 0.8) */
+        /** Fraction of icon height used for the label's vertical size. */
         buttonLabelHeightFraction: number;
-        /** Transparency of the dimming overlay when an icon is disabled (0 = fully visible, 1 = fully hidden) */
+        /** Transparency of the overlay shown on disabled icons. */
         disabledOverlayTransparency: number;
-        /** Color of the dimming overlay when an icon is disabled */
+        /** Color of the overlay shown on disabled icons. */
         disabledOverlayColor: Color3;
     };
-    /**
-     * Visual theming for the dropdown surface (background, border, position).
-     */
+    /** Appearance of the {@link Dropdown} panel. */
     dropdownTheme: {
+        /** Background color of the dropdown. */
         backgroundColor: Color3;
+        /** Background transparency of the dropdown. */
         backgroundTransparency: number;
+        /** Corner radius of the dropdown. */
         cornerRadius: UDim;
+        /** Thickness of the dropdown border. */
         borderSize: number;
+        /** Color of the dropdown border. */
         borderColor: Color3;
+        /** Transparency of the dropdown border. */
         borderTransparency: number;
-        /** Position of the dropdown relative to its parent icon (default (0, 1)) */
+        /** Position of the dropdown relative to its parent icon. */
         position: UDim2;
     };
-    /**
-     * Global animation configuration.
-     */
+    /** Animation configuration. */
     animation: {
-        /** Speed value used by the dropdown transition motion (default 10) */
+        /** Speed of the dropdown open/close spring. Higher = faster. */
         dropdownTransitionSpeed: number;
-        /** Spring options for icon state transitions (color, transparency, etc.) */
+        /** Spring options used for icon state transitions and hover lift. */
         stateSpring: SpringOptions;
+        /** Whether icons lift on hover. Set to `false` to disable globally. */
+        hoverEnabled: boolean;
+        /** How many pixels icons lift upward on hover. */
+        hoverLift: number;
+    };
+    /** Appearance of the notification badge. */
+    notification: {
+        /** Background color of the badge. */
+        backgroundColor: Color3;
+        /** Background transparency of the badge. */
+        backgroundTransparency: number;
+        /** Text color inside the badge. */
+        textColor: Color3;
+        /** Font size of the badge text. */
+        textSize: number;
+        /** Font face of the badge text. */
+        fontFace: Font;
+        /** Position of the badge relative to the icon. */
+        position: UDim2;
+        /** Size of the badge. */
+        size: UDim2;
+        /** Corner radius of the badge. */
+        cornerRadius: UDim;
+        /** Border color of the badge. */
+        borderColor: Color3;
+        /** Border transparency of the badge. */
+        borderTransparency: number;
+    };
+    /** Appearance of the {@link Tooltip} component. */
+    tooltip: {
+        /** Background color of the tooltip. */
+        backgroundColor: Color3;
+        /** Background transparency of the tooltip. */
+        backgroundTransparency: number;
+        /** Text color inside the tooltip. */
+        textColor: Color3;
+        /** Font size of the tooltip text. */
+        textSize: number;
+        /** Font face of the tooltip text. */
+        fontFace: Font;
+        /** Corner radius of the tooltip. */
+        cornerRadius: UDim;
+        /** Border color of the tooltip. */
+        borderColor: Color3;
+        /** Border transparency of the tooltip. */
+        borderTransparency: number;
+        /** Border thickness of the tooltip. */
+        borderSize: number;
+        /** Horizontal padding inside the tooltip. */
+        paddingX: number;
+        /** Vertical padding inside the tooltip. */
+        paddingY: number;
+        /** Delay in milliseconds before the tooltip appears. */
+        delayMs: number;
+    };
+    /** Appearance of the {@link CustomDropdown} component. */
+    customDropdown: {
+        /** Background color of the custom dropdown. */
+        backgroundColor: Color3;
+        /** Background transparency of the custom dropdown. */
+        backgroundTransparency: number;
+        /** Corner radius of the custom dropdown. */
+        cornerRadius: UDim;
+        /** Thickness of the custom dropdown border. */
+        borderSize: number;
+        /** Color of the custom dropdown border. */
+        borderColor: Color3;
+        /** Transparency of the custom dropdown border. */
+        borderTransparency: number;
+        /** Position of the custom dropdown relative to its parent. */
+        position: UDim2;
     };
 }
 export declare const DefaultStylesheet: Stylesheet;

package/out/style.luau

@@ -12,6 +12,7 @@ local function defaultPlaySound(id)
 end
 local function noop()
 end
+--* Complete theme configuration consumed by all topbar components. 
 local DefaultStylesheet = {
 	icon = {
 		fontFace = Font.new("rbxasset://fonts/families/GothamSSm.json", Enum.FontWeight.Medium, Enum.FontStyle.Normal),
@@ -50,6 +51,12 @@ local DefaultStylesheet = {
 		toggleStateOnClick = true,
 		static = false,
 		disabled = false,
+		toggleKey = Enum.KeyCode.Unknown,
+		notificationCount = 0,
+		iconWidth = 0,
+		contentPaddingX = 6,
+		contentPaddingY = 6,
+		imageToTextSpacing = 6,
 		selected = noop,
 		deselected = noop,
 		stateChanged = noop,
@@ -92,11 +99,14 @@ local DefaultStylesheet = {
 	},
 	sizing = {
 		iconHeight = nil,
+		iconWidth = nil,
 		imagePadding = 6,
 		labelPadding = 6,
 		imageToTextSpacing = 6,
 		iconHorizontalPadding = 6,
 		iconVerticalPadding = 6,
+		contentPaddingX = 6,
+		contentPaddingY = 6,
 		textMeasurementWidth = 99999,
 		minLabelWidthPadding = 12,
 		buttonLabelHeightFraction = 0.8,
@@ -117,6 +127,43 @@ local DefaultStylesheet = {
 		stateSpring = {
 			tension = 400,
 		},
+		hoverEnabled = true,
+		hoverLift = 2,
+	},
+	notification = {
+		backgroundColor = Color3.new(1, 0.2, 0.2),
+		backgroundTransparency = 0.1,
+		textColor = Color3.new(1, 1, 1),
+		textSize = 13,
+		fontFace = Font.new("rbxasset://fonts/families/GothamSSm.json", Enum.FontWeight.Bold, Enum.FontStyle.Normal),
+		position = UDim2.new(1, -12, 0, -1),
+		size = UDim2.new(0, 20, 0, 20),
+		cornerRadius = UDim.new(1, 0),
+		borderColor = Color3.new(1, 1, 1),
+		borderTransparency = 0.5,
+	},
+	tooltip = {
+		backgroundColor = Color3.new(0.12, 0.12, 0.14),
+		backgroundTransparency = 0.08,
+		textColor = Color3.new(1, 1, 1),
+		textSize = 12,
+		fontFace = Font.new("rbxasset://fonts/families/GothamSSm.json", Enum.FontWeight.Medium, Enum.FontStyle.Normal),
+		cornerRadius = UDim.new(0, 6),
+		borderColor = Color3.new(1, 1, 1),
+		borderTransparency = 0.72,
+		borderSize = 1,
+		paddingX = 8,
+		paddingY = 6,
+		delayMs = 200,
+	},
+	customDropdown = {
+		backgroundColor = Color3.new(0.12, 0.12, 0.14),
+		backgroundTransparency = 0.08,
+		cornerRadius = UDim.new(0, 6),
+		borderSize = 1,
+		borderColor = Color3.new(1, 1, 1),
+		borderTransparency = 0.72,
+		position = UDim2.fromScale(0, 1),
 	},
 }
 return {

package/out/utilities/debug.d.ts

@@ -1,5 +1 @@
-/**
- * Logs a debug message to the console only when `_G.__DEBUG__` is truthy.
- * No-op in production — stripped at the call site when debug is off.
- */
 export declare function debugLog(...messages: unknown[]): void;

package/out/utilities/debug.luau

@@ -1,10 +1,4 @@
 -- Compiled with roblox-ts v3.0.0
---[[
-	*
-	 * Logs a debug message to the console only when `_G.__DEBUG__` is truthy.
-	 * No-op in production — stripped at the call site when debug is off.
-	 
-]]
 local function debugLog(...)
 	local messages = { ... }
 	local _value = _G.__DEBUG__

package/out/utilities/merge.d.ts

@@ -1,2 +1 @@
-declare function reconcile(target: object, template: object): object;
-export = reconcile;
+export default function reconcile(target: object, template: object): object;

package/out/utilities/merge.luau

@@ -1,29 +1,33 @@
-local function deepCopy(original)
-	local copy = {}
-
-	for key, value in original do
-		copy[key] = type(value) == "table" and deepCopy(value) or value
-	end
-
-	return copy
-end
-
-local function reconcileTable(target, template)
-    for k, v in pairs(template) do
-        if type(k) == "string" then -- Only string keys will be reconciled
-            if target[k] == nil then
-                if type(v) == "table" then
-                    target[k] = deepCopy(v)
-                else
-                    target[k] = v
-                end
-            elseif type(target[k]) == "table" and type(v) == "table" then
-                reconcileTable(target[k], v)
-            end
-        end
-    end
-
-    return target
-end
-
-return reconcileTable
+-- Compiled with roblox-ts v3.0.0
+local deepCopy
+local function reconcile(target, template)
+	local t = target
+	local tmpl = template
+	for key, value in pairs(tmpl) do
+		if typeof(key) == "string" then
+			if t[key] == nil then
+				t[key] = if typeof(value) == "table" then deepCopy(value) else value
+			else
+				local _arg0 = t[key]
+				local _condition = typeof(_arg0) == "table"
+				if _condition then
+					_condition = typeof(value) == "table"
+				end
+				if _condition then
+					reconcile(t[key], value)
+				end
+			end
+		end
+	end
+	return target
+end
+function deepCopy(original)
+	local copy = {}
+	for key, value in pairs(original) do
+		copy[key] = if typeof(value) == "table" then deepCopy(value) else value
+	end
+	return copy
+end
+return {
+	default = reconcile,
+}

package/out/utilities/springs.d.ts

@@ -20,4 +20,8 @@ export declare const springs: {
     stiff: SpringOptions;
     slow: SpringOptions;
     molasses: SpringOptions;
+    figmaGentle: SpringOptions;
+    figmaQuick: SpringOptions;
+    figmaBouncy: SpringOptions;
+    figmaSlow: SpringOptions;
 };

package/out/utilities/springs.luau

@@ -1,7 +1,7 @@
 -- 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)
+local _object = table.clone(config)
 setmetatable(_object, nil)
 _object.bubbly = {
 	tension = 400,

package/package.json

@@ -1,13 +1,19 @@
 {
   "name": "@nrbx/topbar-components",
-  "version": "1.0.12",
+  "version": "1.1.1",
   "main": "out/init.luau",
   "scripts": {
     "build": "rbxtsc",
     "watch": "rbxtsc -w",
     "prepublishOnly": "npm run build"
   },
-  "keywords": [],
+  "keywords": [
+    "roblox-ts",
+    "rbxts",
+    "nn140",
+    "nrbx",
+    "topbar-plus"
+  ],
   "author": "ninjaninja140",
   "license": "MIT",
   "description": "@rbxts/react component package mimicking topbar-plus with extra functionality, forked from @rbxts/topbar-components",
@@ -26,17 +32,17 @@
     "access": "public"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.5.0",
+    "@biomejs/biome": "^2.5.7",
     "@rbxts/compiler-types": "^3.0.0-types.0",
     "@rbxts/react": "^17.3.7-ts.2",
-    "@rbxts/types": "^1.0.925",
+    "@rbxts/types": "^1.0.942",
     "roblox-ts": "^3.0.0",
     "typescript": "^6.0.3"
   },
   "dependencies": {
     "@rbxts/object-utils": "^1.0.4",
     "@rbxts/pretty-react-hooks": "^0.6.4",
-    "@rbxts/ripple": "^0.9.1",
+    "@rbxts/ripple": "^0.10.2",
     "@rbxts/services": "^1.6.0",
     "@rbxts/t": "^3.2.1"
   },