@nrbx/topbar-components 1.0.0

package/out/components/provider.luau

@@ -0,0 +1,92 @@
+-- Compiled with roblox-ts v1.0.2
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useState = _react.useState
+local _context = TS.import(script, script.Parent.Parent, "context")
+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 TopbarProvider(_param)
+	local selectionMode = _param.selectionMode
+	if selectionMode == nil then
+		selectionMode = "Single"
+	end
+	local gameVoiceChatEnabled = _param.gameVoiceChatEnabled
+	local children = _param.children
+	local selectedIcons, setSelectedIcons = useState({})
+	local inset = useGuiInset()
+	local voiceChatEnabled = useVoicechatEnabled()
+	local stylesheet = useStylesheet().provider
+	local hasBetaLabel = gameVoiceChatEnabled and voiceChatEnabled
+	local leftPadding = if hasBetaLabel then stylesheet.paddingLeft + 16 else stylesheet.paddingLeft
+	local frameHeight = inset.Height - stylesheet.insetHeightOffset
+	return React.createElement(LocationContext.Provider, {
+		value = {
+			type = "provider",
+			selectedIcons = selectedIcons,
+			iconSelected = function(iconId)
+				if selectionMode == "Single" then
+					return setSelectedIcons({ iconId })
+				end
+				return setSelectedIcons(function(icons)
+					local _array = {}
+					local _length = #_array
+					local _iconsLength = #icons
+					table.move(icons, 1, _iconsLength, _length + 1, _array)
+					_length += _iconsLength
+					_array[_length + 1] = iconId
+					return _array
+				end)
+			end,
+			iconDeselected = function(iconId)
+				local _condition = selectionMode == "Single"
+				if _condition then
+					local _iconId = iconId
+					_condition = table.find(selectedIcons, _iconId) ~= nil
+				end
+				if _condition then
+					return setSelectedIcons({})
+				end
+				return setSelectedIcons(function(icons)
+					-- ▼ ReadonlyArray.filter ▼
+					local _newValue = {}
+					local _callback = function(T)
+						return T ~= iconId
+					end
+					local _length = 0
+					for _k, _v in icons do
+						if _callback(_v, _k - 1, icons) == true then
+							_length += 1
+							_newValue[_length] = _v
+						end
+					end
+					-- ▲ ReadonlyArray.filter ▲
+					return _newValue
+				end)
+			end,
+		},
+	}, React.createElement("frame", {
+		key = "TopbarProvider",
+		BackgroundTransparency = stylesheet.backgroundTransparency,
+		BackgroundColor3 = stylesheet.backgroundColor,
+		Size = UDim2.fromOffset(inset.Width * stylesheet.sizeScale.X, frameHeight * stylesheet.sizeScale.Y),
+		AnchorPoint = stylesheet.anchorPoint,
+		Position = stylesheet.position,
+	}, React.createElement("uipadding", {
+		key = "UIPadding",
+		PaddingLeft = UDim.new(0, leftPadding),
+		PaddingRight = UDim.new(0, stylesheet.paddingRight),
+		PaddingTop = UDim.new(0, stylesheet.paddingTop),
+		PaddingBottom = UDim.new(0, stylesheet.paddingBottom),
+	}), React.createElement("uilistlayout", {
+		key = "UIListLayout",
+		FillDirection = Enum.FillDirection.Horizontal,
+		SortOrder = Enum.SortOrder.LayoutOrder,
+		Padding = UDim.new(0, stylesheet.iconSpacing),
+	}), children))
+end
+return {
+	TopbarProvider = TopbarProvider,
+}

package/out/components/stylesheet.d.ts

@@ -0,0 +1,10 @@
+import React from '@rbxts/react';
+import { DefaultStylesheet, type Stylesheet as StylesheetType } from '../style';
+import type { DeepPartial } from '../utilities/types';
+interface Props extends React.PropsWithChildren {
+    stylesheet: PartialStylesheet;
+}
+type PartialStylesheet = DeepPartial<StylesheetType>;
+export { DefaultStylesheet };
+export type { StylesheetType };
+export declare function Stylesheet({ stylesheet, children }: Props): React.JSX.Element;

package/out/components/stylesheet.luau

@@ -0,0 +1,17 @@
+-- Compiled with roblox-ts v1.0.2
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local StylesheetContext = TS.import(script, script.Parent.Parent, "context").StylesheetContext
+local DefaultStylesheet = TS.import(script, script.Parent.Parent, "style").DefaultStylesheet
+local reconcile = TS.import(script, script.Parent.Parent, "utilities", "merge")
+local function Stylesheet(_param)
+	local stylesheet = _param.stylesheet
+	local children = _param.children
+	return React.createElement(StylesheetContext.Provider, {
+		value = reconcile(stylesheet, DefaultStylesheet),
+	}, children)
+end
+return {
+	Stylesheet = Stylesheet,
+	DefaultStylesheet = DefaultStylesheet,
+}

package/out/context.d.ts

@@ -0,0 +1,29 @@
+import type { IconId } from './components/icon';
+import { type Stylesheet } from './style';
+type Location = {
+    type: 'provider';
+    selectedIcons: IconId[];
+    iconSelected: (icon: IconId) => void;
+    iconDeselected: (icon: IconId) => void;
+} | {
+    type: 'icon';
+    isVisible: boolean;
+    isUnderDropdown: boolean;
+    width: number;
+    setAnimationState: (current: boolean) => void;
+    setDropdownSize: (current: Vector2) => void;
+    setContentSize: (current: Vector2) => void;
+} | {
+    type: 'dropdown';
+    selectedIcons: IconId[];
+    iconSelected: (icon: IconId) => void;
+    iconDeselected: (icon: IconId) => void;
+    registerChild: (id: number, size: Vector2) => void;
+    removeChild: (id: number) => void;
+    desiredIconWidth: number;
+};
+export declare const LocationContext: import("@rbxts/react").Context<Location>;
+export declare const StylesheetContext: import("@rbxts/react").Context<Stylesheet>;
+export declare function useStylesheet(): Stylesheet;
+export declare function useLocation(): Location;
+export {};

package/out/context.luau

@@ -0,0 +1,20 @@
+-- Compiled with roblox-ts v1.0.2
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local createContext = _react.createContext
+local useContext = _react.useContext
+local DefaultStylesheet = TS.import(script, script.Parent, "style").DefaultStylesheet
+local LocationContext = createContext(nil)
+local StylesheetContext = createContext(nil)
+local function useStylesheet()
+	return useContext(StylesheetContext) or DefaultStylesheet
+end
+local function useLocation()
+	return useContext(LocationContext)
+end
+return {
+	useStylesheet = useStylesheet,
+	useLocation = useLocation,
+	LocationContext = LocationContext,
+	StylesheetContext = StylesheetContext,
+}

package/out/hooks/use-animateable-props.d.ts

@@ -0,0 +1,8 @@
+import { type Binding } from '@rbxts/react';
+import type { MotionGoal } from '@rbxts/ripple';
+import type { FromStateDependent, IconState, StateDependent } from '../components/icon';
+type Result<T extends Record<string, StateDependent<MotionGoal>>, K extends keyof T> = ExcludeMembers<{
+    [P in keyof T]: P extends K ? Binding<NonNullable<FromStateDependent<T[P]>>> : undefined;
+}, undefined>;
+export declare function useAnimateableProps<T extends Record<string, StateDependent<MotionGoal>>, K extends keyof T>(state: IconState, props: T, ...keys: K[]): Result<T, K>;
+export {};

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

@@ -0,0 +1,46 @@
+-- Compiled with roblox-ts v1.0.2
+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)
+local useMotion = _pretty_react_hooks.useMotion
+local usePrevious = _pretty_react_hooks.usePrevious
+local useEffect = TS.import(script, TS.getModule(script, "@rbxts", "react")).useEffect
+local stateful = TS.import(script, script.Parent.Parent, "utilities", "resolve-state-dependent").stateful
+local springs = TS.import(script, script.Parent.Parent, "utilities", "springs").springs
+local function useAnimateableProps(state, props, ...)
+	local keys = { ... }
+	local previousProps = usePrevious(props)
+	local motions = {}
+	for _, key in keys do
+		local binding, motion = useMotion(stateful(props[key], state))
+		local _arg0 = { binding, motion }
+		table.insert(motions, _arg0)
+	end
+	useEffect(function()
+		for _, key in keys do
+			local value = stateful(props[key], state)
+			local previousValue = stateful(previousProps, state)
+			if value == previousValue then
+				continue
+			end
+			motions[table.find(keys, key) or 0][2]:spring(value, springs.responsive)
+		end
+	end, { props })
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#keys)
+	local _callback = function(key)
+		local _exp = key
+		local _exp_1 = motions
+		local _keys = keys
+		local _key = key
+		return { _exp, _exp_1[table.find(_keys, _key) or 0][1] }
+	end
+	for _k, _v in keys do
+		_newValue[_k] = _callback(_v, _k - 1, keys)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return Object.fromEntries(_newValue)
+end
+return {
+	useAnimateableProps = useAnimateableProps,
+}

package/out/hooks/use-gui-inset.d.ts

@@ -0,0 +1 @@
+export declare function useGuiInset(): Rect;

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

@@ -0,0 +1,20 @@
+-- Compiled with roblox-ts v1.0.2
+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
+local useMountEffect = _pretty_react_hooks.useMountEffect
+local useState = TS.import(script, TS.getModule(script, "@rbxts", "react")).useState
+local GuiService = TS.import(script, TS.getModule(script, "@rbxts", "services")).GuiService
+local function useGuiInset()
+	local inset, setInset = useState(GuiService.TopbarInset)
+	useMountEffect(function()
+		setInset(GuiService.TopbarInset)
+	end)
+	useEventListener(GuiService:GetPropertyChangedSignal("TopbarInset"), function()
+		return setInset(GuiService.TopbarInset)
+	end)
+	return inset
+end
+return {
+	useGuiInset = useGuiInset,
+}

package/out/hooks/use-id.d.ts

@@ -0,0 +1 @@
+export declare function useId(): number;

package/out/hooks/use-id.luau

@@ -0,0 +1,13 @@
+-- Compiled with roblox-ts v1.0.2
+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
+local nextId = createIdGenerator()
+local function useId()
+	return useMemo(function()
+		return nextId()
+	end, {})
+end
+return {
+	useId = useId,
+}

package/out/hooks/use-voicechat-enabled.d.ts

@@ -0,0 +1 @@
+export declare function useVoicechatEnabled(): boolean;

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

@@ -0,0 +1,17 @@
+-- Compiled with roblox-ts v1.0.2
+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 _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.UserId))
+	end), {})
+	return enabled
+end
+return {
+	useVoicechatEnabled = useVoicechatEnabled,
+}

package/out/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./components/dropdown";
+export * from "./components/icon";
+export * from "./components/provider";
+export * from "./components/stylesheet";

package/out/init.luau

@@ -0,0 +1,16 @@
+-- Compiled with roblox-ts v1.0.2
+local TS = _G[script]
+local exports = {}
+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", "provider") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "components", "stylesheet") or {} do
+	exports[_k] = _v
+end
+return exports

package/out/style.d.ts

@@ -0,0 +1,70 @@
+import type { SpringOptions } from '@rbxts/ripple';
+import type { DropdownProps } from './components/dropdown';
+import type { IconProps } from './components/icon';
+export declare function noop(): void;
+export interface Stylesheet {
+    icon: Required<IconProps>;
+    dropdown: Required<DropdownProps>;
+    /**
+     * Configure the top-level provider frame: padding, spacing, background, sizing.
+     */
+    provider: {
+        paddingLeft: number;
+        paddingRight: number;
+        paddingTop: number;
+        paddingBottom: number;
+        iconSpacing: number;
+        backgroundTransparency: number;
+        backgroundColor: Color3;
+        anchorPoint: Vector2;
+        position: UDim2;
+        sizeScale: Vector2;
+        /** Offset subtracted from the gui inset height */
+        insetHeightOffset: number;
+    };
+    /**
+     * Fine-grained sizing & layout overrides for icon internals.
+     */
+    sizing: {
+        /**
+         * Explicit icon height override.
+         * When defined, this replaces the automatic `forceHeight ?? inset.Height - 12` calculation.
+         */
+        iconHeight: number | undefined;
+        /** Padding between the icon edge and the image (default 6) */
+        imagePadding: number;
+        /** Padding between the icon edge and the text label (default 6) */
+        labelPadding: number;
+        /** Gap between the image and the text label (default 6) */
+        imageToTextSpacing: number;
+        /** Max width passed to GetTextBoundsParams (default 99999) */
+        textMeasurementWidth: number;
+        /** Extra padding subtracted from the min label width inside a dropdown (default 12) */
+        minLabelWidthPadding: number;
+        /** Fraction of icon height used for the text button label size (default 0.8) */
+        buttonLabelHeightFraction: number;
+    };
+    /**
+     * Visual theming for the dropdown surface (background, border, position).
+     */
+    dropdownTheme: {
+        backgroundColor: Color3;
+        backgroundTransparency: number;
+        cornerRadius: UDim;
+        borderSize: number;
+        borderColor: Color3;
+        borderTransparency: number;
+        /** Position of the dropdown relative to its parent icon (default (0, 1)) */
+        position: UDim2;
+    };
+    /**
+     * Global animation configuration.
+     */
+    animation: {
+        /** Speed value used by the dropdown transition motion (default 10) */
+        dropdownTransitionSpeed: number;
+        /** Spring options for icon state transitions (color, transparency, etc.) */
+        stateSpring: SpringOptions;
+    };
+}
+export declare const DefaultStylesheet: Stylesheet;

package/out/style.luau

@@ -0,0 +1,117 @@
+-- Compiled with roblox-ts v1.0.2
+local TS = _G[script]
+local SoundService = TS.import(script, TS.getModule(script, "@rbxts", "services")).SoundService
+local function defaultPlaySound(id)
+	local sound = Instance.new("Sound")
+	sound.SoundId = id
+	sound.Parent = SoundService
+	sound:Play()
+	sound.Ended:Once(function()
+		return sound:Destroy()
+	end)
+end
+local function noop()
+end
+local DefaultStylesheet = {
+	icon = {
+		fontFace = Font.new("rbxasset://fonts/families/GothamSSm.json", Enum.FontWeight.Medium, Enum.FontStyle.Normal),
+		strokeColor = Color3.fromRGB(0, 0, 0),
+		strokeThickness = 0,
+		strokeTransparency = 0,
+		textAlignment = Enum.TextXAlignment.Left,
+		cornerRadius = UDim.new(1, 0),
+		textColor = {
+			deselected = Color3.fromRGB(255, 255, 255),
+			selected = Color3.fromRGB(57, 60, 65),
+		},
+		backgroundColor = {
+			deselected = Color3.fromRGB(0, 0, 0),
+			selected = Color3.fromRGB(245, 245, 245),
+		},
+		backgroundTransparency = 0.3,
+		imageColor = {
+			deselected = Color3.fromRGB(255, 255, 255),
+			selected = Color3.fromRGB(57, 60, 65),
+		},
+		richText = false,
+		textSize = 20,
+		imageSizeOffset = -4,
+		imageRectOffset = Vector2.zero,
+		imageRectSize = Vector2.zero,
+		leftClickSound = "",
+		rightClickSound = "",
+		playSound = defaultPlaySound,
+		imageId = "",
+		imageTransparency = 0,
+		layoutOrder = 0,
+		text = "",
+		defaultState = "deselected",
+		forcedState = "deselected",
+		toggleStateOnClick = true,
+		selected = noop,
+		deselected = noop,
+		stateChanged = noop,
+		onClick = noop,
+		onRightClick = noop,
+		hover = noop,
+		unhover = noop,
+		children = {},
+	},
+	dropdown = {
+		maxWidth = 300,
+		minWidth = 200,
+		maxHeight = 200,
+		padding = UDim.new(0, 2.5),
+		forceHeight = 32,
+		iconCornerRadius = UDim.new(0, 0),
+		selectionMode = "Multiple",
+		children = {},
+		scrollBarThickness = 5,
+		scrollBarTransparency = 0,
+		scrollBarImageColor = Color3.new(1, 1, 1),
+		midImage = "rbxasset://textures/ui/Scroll/scroll-middle.png",
+		topImage = "rbxasset://textures/ui/Scroll/scroll-top.png",
+		bottomImage = "rbxasset://textures/ui/Scroll/scroll-bottom.png",
+	},
+	provider = {
+		paddingLeft = 8,
+		paddingRight = 12,
+		paddingTop = 11,
+		paddingBottom = 0,
+		iconSpacing = 12,
+		backgroundTransparency = 1,
+		backgroundColor = Color3.new(0, 0, 0),
+		anchorPoint = Vector2.new(1, 0),
+		position = UDim2.fromScale(1, 0),
+		sizeScale = Vector2.new(1, 1),
+		insetHeightOffset = 0,
+	},
+	sizing = {
+		iconHeight = nil,
+		imagePadding = 6,
+		labelPadding = 6,
+		imageToTextSpacing = 6,
+		textMeasurementWidth = 99999,
+		minLabelWidthPadding = 12,
+		buttonLabelHeightFraction = 0.8,
+	},
+	dropdownTheme = {
+		backgroundColor = Color3.new(1, 1, 1),
+		backgroundTransparency = 0,
+		cornerRadius = UDim.new(0, 0),
+		borderSize = 0,
+		borderColor = Color3.new(0, 0, 0),
+		borderTransparency = 1,
+		position = UDim2.fromScale(0, 1),
+	},
+	animation = {
+		dropdownTransitionSpeed = 10,
+		stateSpring = {
+			tension = 400,
+		},
+	},
+}
+return {
+	noop = noop,
+	DefaultStylesheet = DefaultStylesheet,
+}

package/out/utilities/id-gen.d.ts

@@ -0,0 +1 @@
+export declare function createIdGenerator(): () => number;

package/out/utilities/id-gen.luau

@@ -0,0 +1,12 @@
+-- Compiled with roblox-ts v1.0.2
+local function createIdGenerator()
+	local value = 0
+	return function()
+		local _original = value
+		value += 1
+		return _original
+	end
+end
+return {
+	createIdGenerator = createIdGenerator,
+}

package/out/utilities/merge.d.ts

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

package/out/utilities/merge.luau

@@ -0,0 +1,29 @@
+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

package/out/utilities/resolve-state-dependent.d.ts

@@ -0,0 +1,2 @@
+import type { IconState, StateDependent } from '../components/icon';
+export declare function stateful<T>(value: StateDependent<T>, state: IconState): T;

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

@@ -0,0 +1,17 @@
+-- Compiled with roblox-ts v1.0.2
+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"))
+local object_check = t.interface({
+	selected = t.any,
+	deselected = t.any,
+})
+local function stateful(value, state)
+	local _arg0 = state_check(state)
+	local _arg1 = `Cannot resolve invalid state: {state}`
+	assert(_arg0, _arg1)
+	return if object_check(value) then value[state] else value
+end
+return {
+	stateful = stateful,
+}

package/out/utilities/springs.d.ts

@@ -0,0 +1,23 @@
+import { type SpringOptions } from '@rbxts/ripple';
+export declare const springs: {
+    bubbly: {
+        tension: number;
+        friction: number;
+    };
+    responsive: {
+        tension: number;
+    };
+    gentle: {
+        tension: number;
+        friction: number;
+    };
+    world: {
+        tension: number;
+        friction: number;
+    };
+    default: SpringOptions;
+    wobbly: SpringOptions;
+    stiff: SpringOptions;
+    slow: SpringOptions;
+    molasses: SpringOptions;
+};

package/out/utilities/springs.luau

@@ -0,0 +1,24 @@
+-- Compiled with roblox-ts v1.0.2
+local TS = _G[script]
+local config = TS.import(script, TS.getModule(script, "@rbxts", "ripple").src).config
+local _object = table.clone(config.spring)
+setmetatable(_object, nil)
+_object.bubbly = {
+	tension = 400,
+	friction = 14,
+}
+_object.responsive = {
+	tension = 400,
+}
+_object.gentle = {
+	tension = 250,
+	friction = 30,
+}
+_object.world = {
+	tension = 180,
+	friction = 30,
+}
+local springs = _object
+return {
+	springs = springs,
+}

package/out/utilities/types.d.ts

@@ -0,0 +1,5 @@
+type ContainsNominal<K> = K extends `_nominal_${string}` ? true : never;
+export type DeepPartial<T> = true extends ContainsNominal<keyof T> ? T : T extends EnumItem ? T : T extends Map<any, any> ? T : T extends (...args: any[]) => any ? T : T extends object ? {
+    [K in keyof T]?: DeepPartial<T[K]>;
+} : T;
+export {};

package/out/utilities/types.luau

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