@nrbx/topbar-components 1.0.0

package/LICENSE.txt

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2023 wad4444
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,116 @@
+<div align="center" id="top">
+    <img src="https://github.com/nn140/Branding/blob/main/LogoWhite-Full.png?raw=true" alt="NN140.UK logo" width="800"/>
+    <img src="https://github.com/nn140/Branding/blob/main/LogoBlack-Full.png?raw=true" alt="NN140.UK logo" width="800"/>
+    <br />
+    <br />
+    <img src="https://img.shields.io/badge/Stripe-Donate%20to%20support%20NN140.UK-1b1b1b?style=for-the-badge&labelColor=6860ff&logo=stripe&logoColor=ffffff&logoSize=auto&link=https%3A%2F%2Fdonate.stripe.com%2F9B6eVdbTd4n1a6H1yXa3u04&link=https%3A%2F%2Fdonate.stripe.com%2F9B6eVdbTd4n1a6H1yXa3u04" alt="Badge">
+    <img src="https://img.shields.io/badge/Stripe-Donate%20to%20Support%20NN140.UK%20(RECCURING)-1b1b1b?style=for-the-badge&labelColor=6860ff&logo=stripe&logoColor=ffffff&logoSize=auto&link=https%3A%2F%2Fdonate.stripe.com%2FdRm9ATe1laLpgv5b9xa3u05&link=https%3A%2F%2Fdonate.stripe.com%2FdRm9ATe1laLpgv5b9xa3u05" alt="Badge">
+</div>
+
+<hr />
+
+## @nrbx/topbar-components
+
+- A Fork of @rbxts/topbar-components
+
+**Topbar Components** is a react component package that mimics [*topbar-plus*](https://devforum.roblox.com/t/v3-topbarplus-v300-construct-intuitive-topbar-icons-customise-them-with-themes-dropdowns-captions-labels-and-much-more/1017485) for [Roblox-TS](https://roblox-ts.com), with JSX markup support.
+
+## 📦 Installation
+
+**@nrbx/topbar-components** is available on NPM and can be installed with the following commands:
+
+```bash
+npm install @nrbx/topbar-components
+yarn add @nrbx/topbar-components
+pnpm add @nrbx/topbar-components
+```
+
+Then add the following to your Rojo project file, under your `node_modules` configuration.
+
+```json
+"node_modules": {
+  "$className": "Folder",
+  "@rbxts": {
+    "$path": "node_modules/@rbxts"
+  },
+  "@nrbx": {
+    "$path": "node_modules/@nrbx"
+  }
+}
+```
+
+And this to your `tsconfig.json`
+
+```json
+"typeRoots": ["node_modules/@rbxts", "node_modules/@nrbx"],
+```
+
+### ⚡ Quick Start
+
+Instantiate `<TopbarProvider />` to be a root of your topbar component tree.
+
+```jsx
+<TopbarProvider>
+    <Icon text="Hello, World!" />
+</TopbarProvider>
+```
+
+Every `<Icon />` can be in only two states `selected`, and `deselected`.
+You can conditionally apply properties based on icon's current state, by providing a state markup object:
+
+```jsx
+<Icon text={{
+    selected: "Selected!",
+    deselected: "Deselected!",
+}} />
+```
+
+You can add a dropdown to an icon by mounting `<Dropdown />` component as it's child:
+Dropdowns & TopbarProvider have a property called `selectionMode`, which lets you specify how many icons can be selected at once.
+
+```jsx
+<Icon text="Skins">
+    <Dropdown selectionMode="single">
+        <Icon text="yellow" selected={() => chooseSkin("yellow")} />
+        <Icon text="red" selected={() => chooseSkin("red")} />
+    </Dropdown>
+</Icon>
+```
+
+Dropdowns **can be nested.**
+
+### 🎨 Stylesheets
+
+You can use stylesheets to override default properties of all components within:
+Stylesheets are partial, and work like patches to already established default properties within the package:
+
+```jsx
+<Stylesheet stylesheet={{
+    icon: {
+        textSize: 25,
+        cornerRadius: new UDim(0.5, 0),
+    }
+}}>
+    <Icon text="Skins">
+        <Dropdown selectionMode="single">
+            <Icon text="yellow" selected={() => chooseSkin("yellow")} />
+            <Icon text="red" selected={() => chooseSkin("red")} />
+        </Dropdown>
+    </Icon>
+</Stylesheet>
+```
+
+### 📝 License
+
+Package is licensed under the MIT License.
+
+<hr />
+
+<div align="center" id="top">
+    <img src="https://img.shields.io/badge/Stripe-Donate%20to%20support%20NN140.UK-1b1b1b?style=for-the-badge&labelColor=6860ff&logo=stripe&logoColor=ffffff&logoSize=auto&link=https%3A%2F%2Fdonate.stripe.com%2F9B6eVdbTd4n1a6H1yXa3u04&link=https%3A%2F%2Fdonate.stripe.com%2F9B6eVdbTd4n1a6H1yXa3u04" alt="Badge">
+    <img src="https://img.shields.io/badge/Stripe-Donate%20to%20Support%20NN140.UK%20(RECCURING)-1b1b1b?style=for-the-badge&labelColor=6860ff&logo=stripe&logoColor=ffffff&logoSize=auto&link=https%3A%2F%2Fdonate.stripe.com%2FdRm9ATe1laLpgv5b9xa3u05&link=https%3A%2F%2Fdonate.stripe.com%2FdRm9ATe1laLpgv5b9xa3u05" alt="Badge">
+    <br />
+    <br />
+    <img src="https://github.com/nn140/Branding/blob/main/LogoBlack-Full.png?raw=true" alt="NN140.UK logo" width="800"/>
+    <img src="https://github.com/nn140/Branding/blob/main/LogoWhite-Full.png?raw=true" alt="NN140.UK logo" width="800"/>
+</div>

package/out/components/dropdown.d.ts

@@ -0,0 +1,18 @@
+import React from '@rbxts/react';
+import type { SelectionMode } from './provider';
+export interface DropdownProps extends React.PropsWithChildren {
+    minWidth?: number;
+    maxHeight?: number;
+    maxWidth?: number;
+    padding?: UDim;
+    forceHeight?: number;
+    iconCornerRadius?: UDim;
+    scrollBarThickness?: number;
+    scrollBarTransparency?: number;
+    topImage?: string;
+    bottomImage?: string;
+    midImage?: string;
+    scrollBarImageColor?: Color3;
+    selectionMode?: SelectionMode;
+}
+export declare function Dropdown(componentProps: DropdownProps): React.JSX.Element;

package/out/components/dropdown.luau

@@ -0,0 +1,193 @@
+-- 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 mapBinding = _pretty_react_hooks.mapBinding
+local useMotion = _pretty_react_hooks.useMotion
+local useMountEffect = _pretty_react_hooks.useMountEffect
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useEffect = _react.useEffect
+local useMemo = _react.useMemo
+local useState = _react.useState
+local _context = TS.import(script, script.Parent.Parent, "context")
+local LocationContext = _context.LocationContext
+local useLocation = _context.useLocation
+local useStylesheet = _context.useStylesheet
+local function Dropdown(componentProps)
+	local location = useLocation()
+	local fullStylesheet = useStylesheet()
+	local stylesheet = fullStylesheet.dropdown
+	local selectedIcons, setSelectedIcons = useState({})
+	local contents, setContents = useState({})
+	local _arg0 = location.type == "icon"
+	assert(_arg0, "Dropdowns can only be located under icons")
+	local transition, transitionMotion = useMotion(if location.isVisible then 1 else 0)
+	local _object = table.clone(stylesheet)
+	setmetatable(_object, nil)
+	for _k, _v in componentProps do
+		_object[_k] = _v
+	end
+	local props = _object
+	local isNested = location.isUnderDropdown
+	local maxWidth = if isNested then location.width else props.maxWidth
+	local minWidth = if isNested then location.width else props.minWidth
+	local maxHeight = props.maxHeight
+	local contentSize = useMemo(function()
+		local y = 0
+		local x = minWidth
+		for _, size in contents do
+			x = math.min(maxWidth, math.max(x, size.X))
+			y += size.Y + stylesheet.padding.Offset
+		end
+		return Vector2.new(x, y)
+	end, { contents, maxWidth, minWidth, stylesheet.padding.Offset })
+	useEffect(function()
+		location.setAnimationState(true)
+		transitionMotion:linear(if location.isVisible then 1 else 0, {
+			speed = fullStylesheet.animation.dropdownTransitionSpeed,
+		})
+	end, { location.isVisible })
+	useMountEffect(function()
+		return transitionMotion:onComplete(function()
+			return location.setAnimationState(false)
+		end)
+	end)
+	useEffect(function()
+		location.setContentSize(contentSize)
+	end, { contentSize, location.setContentSize })
+	local scrollingEnabled = not isNested and contentSize.Y > maxHeight
+	return React.createElement(LocationContext.Provider, {
+		value = {
+			type = "dropdown",
+			selectedIcons = selectedIcons,
+			iconSelected = function(iconId)
+				if props.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 = props.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,
+			registerChild = function(id, size)
+				setContents(function(contents)
+					local _array = {}
+					local _length = #_array
+					for _k, _v in contents do
+						_length += 1
+						_array[_length] = { _k, _v }
+					end
+					_array[_length + 1] = { id, size }
+					local _map = {}
+					for _, _v in _array do
+						_map[_v[1]] = _v[2]
+					end
+					return _map
+				end)
+			end,
+			removeChild = function(id)
+				setContents(function(contents)
+					local _array = {}
+					local _length = #_array
+					for _k, _v in contents do
+						_length += 1
+						_array[_length] = { _k, _v }
+					end
+					-- ▼ ReadonlyArray.filter ▼
+					local _newValue = {}
+					local _callback = function(T)
+						return T[1] ~= id
+					end
+					local _length_1 = 0
+					for _k, _v in _array do
+						if _callback(_v, _k - 1, _array) == true then
+							_length_1 += 1
+							_newValue[_length_1] = _v
+						end
+					end
+					-- ▲ ReadonlyArray.filter ▲
+					local _map = {}
+					for _, _v in _newValue do
+						_map[_v[1]] = _v[2]
+					end
+					return _map
+				end)
+			end,
+			desiredIconWidth = if isNested then location.width else contentSize.X,
+		},
+	}, React.createElement("scrollingframe", {
+		ClipsDescendants = true,
+		Size = mapBinding(transition, function(t)
+			return UDim2.fromOffset(contentSize.X + (if scrollingEnabled then props.scrollBarThickness else 0), t * math.min(contentSize.Y, if isNested then contentSize.Y else maxHeight))
+		end),
+		BorderSizePixel = fullStylesheet.dropdownTheme.borderSize,
+		BorderColor3 = fullStylesheet.dropdownTheme.borderColor,
+		BackgroundColor3 = fullStylesheet.dropdownTheme.backgroundColor,
+		Position = fullStylesheet.dropdownTheme.position,
+		ScrollBarImageColor3 = props.scrollBarImageColor,
+		ScrollBarImageTransparency = if scrollingEnabled and location.isVisible then props.scrollBarTransparency else 1,
+		ScrollingEnabled = scrollingEnabled,
+		AutomaticCanvasSize = Enum.AutomaticSize.None,
+		CanvasSize = UDim2.fromOffset(0, contentSize.Y),
+		ScrollBarThickness = if scrollingEnabled then props.scrollBarThickness else 0,
+		BackgroundTransparency = fullStylesheet.dropdownTheme.backgroundTransparency,
+		Change = {
+			AbsoluteSize = function(rbx)
+				return location.setDropdownSize(rbx.AbsoluteSize)
+			end,
+		},
+		MidImage = props.midImage,
+		TopImage = props.topImage,
+		BottomImage = props.bottomImage,
+		key = "Dropdown",
+	}, React.createElement("uicorner", {
+		key = "DropdownCorner",
+		CornerRadius = fullStylesheet.dropdownTheme.cornerRadius,
+	}), React.createElement("uistroke", {
+		key = "DropdownStroke",
+		Thickness = fullStylesheet.dropdownTheme.borderSize,
+		Color = fullStylesheet.dropdownTheme.borderColor,
+		Transparency = fullStylesheet.dropdownTheme.borderTransparency,
+	}), props.children, isNested and React.createElement("uipadding", {
+		key = "UIPadding",
+		PaddingTop = stylesheet.padding,
+	}), React.createElement("uilistlayout", {
+		key = "UIListLayout",
+		SortOrder = Enum.SortOrder.LayoutOrder,
+		Padding = stylesheet.padding,
+	})))
+end
+return {
+	Dropdown = Dropdown,
+}

package/out/components/icon.d.ts

@@ -0,0 +1,40 @@
+import React from '@rbxts/react';
+export interface IconProps extends React.PropsWithChildren {
+    backgroundTransparency?: StateDependent<number>;
+    backgroundColor?: StateDependent<Color3>;
+    imageId?: StateDependent<string>;
+    imageColor?: StateDependent<Color3>;
+    textColor?: StateDependent<Color3>;
+    imageTransparency?: StateDependent<number>;
+    layoutOrder?: StateDependent<number>;
+    text?: StateDependent<string>;
+    textSize?: StateDependent<number>;
+    imageSizeOffset?: StateDependent<number>;
+    imageRectOffset?: StateDependent<Vector2>;
+    imageRectSize?: StateDependent<Vector2>;
+    defaultState?: IconState;
+    fontFace?: StateDependent<Font>;
+    forcedState?: IconState;
+    leftClickSound?: StateDependent<string>;
+    rightClickSound?: StateDependent<string>;
+    cornerRadius?: StateDependent<UDim>;
+    strokeTransparency?: StateDependent<number>;
+    strokeColor?: StateDependent<Color3>;
+    strokeThickness?: StateDependent<number>;
+    textAlignment?: StateDependent<Enum.TextXAlignment>;
+    richText?: StateDependent<boolean>;
+    toggleStateOnClick?: boolean;
+    selected?: () => void;
+    deselected?: () => void;
+    hover?: () => void;
+    unhover?: () => void;
+    stateChanged?: (state: IconState) => void;
+    onClick?: () => void;
+    onRightClick?: () => void;
+    playSound?: (id: string) => void;
+}
+export type IconState = 'selected' | 'deselected';
+export type StateDependent<T> = Record<IconState, T> | T;
+export type FromStateDependent<T> = T extends StateDependent<infer U> ? U : T;
+export type IconId = number;
+export declare function Icon({ children, ...componentProps }: IconProps): React.JSX.Element;

package/out/components/icon.luau

@@ -0,0 +1,237 @@
+-- Compiled with roblox-ts v1.0.2
+local TS = _G[script]
+local deepEquals = TS.import(script, TS.getModule(script, "@rbxts", "object-utils")).deepEquals
+local _pretty_react_hooks = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out)
+local mapBinding = _pretty_react_hooks.mapBinding
+local useAsyncEffect = _pretty_react_hooks.useAsyncEffect
+local useMountEffect = _pretty_react_hooks.useMountEffect
+local useUnmountEffect = _pretty_react_hooks.useUnmountEffect
+local useUpdateEffect = _pretty_react_hooks.useUpdateEffect
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useBinding = _react.useBinding
+local useEffect = _react.useEffect
+local useRef = _react.useRef
+local useState = _react.useState
+local TextService = TS.import(script, TS.getModule(script, "@rbxts", "services")).TextService
+local _context = TS.import(script, script.Parent.Parent, "context")
+local LocationContext = _context.LocationContext
+local useLocation = _context.useLocation
+local useStylesheet = _context.useStylesheet
+local useAnimateableProps = TS.import(script, script.Parent.Parent, "hooks", "use-animateable-props").useAnimateableProps
+local useGuiInset = TS.import(script, script.Parent.Parent, "hooks", "use-gui-inset").useGuiInset
+local useId = TS.import(script, script.Parent.Parent, "hooks", "use-id").useId
+local noop = TS.import(script, script.Parent.Parent, "style").noop
+local stateful = TS.import(script, script.Parent.Parent, "utilities", "resolve-state-dependent").stateful
+local ANIMATEABLE = { "backgroundColor", "backgroundTransparency", "imageColor", "imageTransparency" }
+local function Icon(_param)
+	local children = _param.children
+	local _extracted = {
+		["children"] = true,
+	}
+	local _rest = {}
+	for _k, _v in _param do
+		if not _extracted[_k] then
+			_rest[_k] = _v
+		end
+	end
+	local componentProps = _rest
+	local inset = useGuiInset()
+	local location = useLocation()
+	local id = useId()
+	local currentState, setState = useState(componentProps.forcedState or "deselected")
+	local dropdownAnimating, setAnimationState = useState(false)
+	local contentSize, setContentSize = useState(Vector2.new(0, 0))
+	local dropdownSize, setDropdownSize = useBinding(Vector2.new(0, 0))
+	local textBounds, setTextBounds = useState(Vector2.zero)
+	local stylesheet = useStylesheet()
+	local _arg0 = location.type ~= "icon"
+	assert(_arg0, "Icons cannot be nested")
+	local _object = table.clone(stylesheet.icon)
+	setmetatable(_object, nil)
+	for _k, _v in componentProps do
+		_object[_k] = _v
+	end
+	local animatedProps = useAnimateableProps(currentState, _object, unpack(ANIMATEABLE))
+	local _object_1 = table.clone(stylesheet.icon)
+	setmetatable(_object_1, nil)
+	for _k, _v in componentProps do
+		_object_1[_k] = _v
+	end
+	for _k, _v in animatedProps do
+		_object_1[_k] = _v
+	end
+	local props = _object_1
+	useMountEffect(function()
+		local _ = props.defaultState and not componentProps.forcedState and setState(props.defaultState)
+	end)
+	useEffect(function()
+		if not componentProps.forcedState then
+			return nil
+		end
+		setState(componentProps.forcedState)
+	end, { componentProps.forcedState })
+	useUpdateEffect(function()
+		props.stateChanged(currentState)
+		if currentState == "selected" then
+			location.iconSelected(id)
+			props.selected()
+		else
+			location.iconDeselected(id)
+			props.deselected()
+		end
+	end, { currentState })
+	useUpdateEffect(function()
+		if currentState == "selected" and not (table.find(location.selectedIcons, id) ~= nil) then
+			setState("deselected")
+		end
+	end, { location.selectedIcons })
+	local currentImage = stateful(props.imageId, currentState)
+	local currentText = stateful(props.text, currentState)
+	local previousQueryRef = useRef()
+	useAsyncEffect(TS.async(function()
+		local currentQuery = {
+			Font = stateful(props.fontFace, currentState),
+			Size = stateful(props.textSize, currentState),
+			Text = currentText,
+		}
+		local _condition = previousQueryRef.current
+		if _condition == nil then
+			_condition = {}
+		end
+		if deepEquals(currentQuery, _condition) then
+			return nil
+		end
+		if not (currentText ~= "" and currentText) then
+			return setTextBounds(Vector2.zero)
+		end
+		local params = Instance.new("GetTextBoundsParams")
+		params.Text = currentText
+		params.Font = stateful(props.fontFace, currentState)
+		params.Size = stateful(props.textSize, currentState)
+		params.Width = stylesheet.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
+	if _condition == nil then
+		_condition = forceHeight
+		if _condition == nil then
+			_condition = inset.Height - 12
+		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 accumulatedLabelWidth = if currentImage ~= "" and currentImage then textBounds.X else math.max(textBounds.X, minLabelWidth)
+	local _exp = textBounds.X + stylesheet.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)
+	useEffect(function()
+		if location.type ~= "dropdown" then
+			return nil
+		end
+		local includeContents = currentState == "selected" or dropdownAnimating
+		local _vector2 = Vector2.new(iconSize.X, iconSize.Y)
+		local _vector2_1 = Vector2.new(0, if includeContents then contentSize.Y else 0)
+		location.registerChild(id, _vector2 + _vector2_1)
+	end, { currentState, contentSize.Y, dropdownAnimating, iconSize })
+	useUnmountEffect(function()
+		if location.type ~= "dropdown" then
+			return nil
+		end
+		location.removeChild(id)
+	end)
+	local wrapSize = mapBinding(dropdownSize, function(t)
+		return UDim2.fromOffset(if location.type == "dropdown" then location.desiredIconWidth else iconSize.X, iconSize.Y + t.Y)
+	end)
+	return React.createElement(LocationContext.Provider, {
+		value = {
+			type = "icon",
+			isVisible = currentState == "selected",
+			isUnderDropdown = location.type == "dropdown",
+			width = if location.type == "dropdown" then location.desiredIconWidth else iconSize.X,
+			setDropdownSize = setDropdownSize,
+			setContentSize = setContentSize,
+			setAnimationState = setAnimationState,
+		},
+	}, React.createElement("frame", {
+		Size = wrapSize,
+		LayoutOrder = stateful(props.layoutOrder, currentState),
+		BackgroundTransparency = 1,
+		key = "IconWrapper",
+	}, React.createElement("textbutton", {
+		Size = UDim2.new(1, 0, 0, iconSize.Y),
+		Event = {
+			MouseButton1Click = function()
+				if stateful(props.toggleStateOnClick, currentState) then
+					setState(if currentState == "deselected" then "selected" else "deselected")
+				end
+				props.onClick()
+				local soundId = stateful(props.leftClickSound, currentState)
+				if not (soundId ~= "" and soundId) then
+					return nil
+				end
+				props.playSound(soundId)
+			end,
+			MouseButton2Click = function()
+				if props.onRightClick == noop then
+					return nil
+				end
+				props.onRightClick()
+				local soundId = stateful(props.rightClickSound, currentState)
+				if not (soundId ~= "" and soundId) then
+					return nil
+				end
+				props.playSound(soundId)
+			end,
+			MouseEnter = props.hover,
+			MouseLeave = props.unhover,
+		},
+		Text = "",
+		BackgroundTransparency = props.backgroundTransparency,
+		BackgroundColor3 = stateful(props.backgroundColor, currentState),
+		key = "IconButton",
+	}, children, currentImage ~= nil and currentImage ~= "" and (React.createElement("imagelabel", {
+		key = "IconImage",
+		Size = UDim2.fromOffset(imageSize, imageSize),
+		Position = UDim2.fromOffset(imagePos, imagePos),
+		Image = currentImage,
+		BackgroundTransparency = 1,
+		ImageColor3 = props.imageColor,
+		ImageTransparency = props.imageTransparency,
+		ImageRectOffset = stateful(props.imageRectOffset, currentState),
+		ImageRectSize = stateful(props.imageRectSize, currentState),
+	})), currentText ~= nil and currentText ~= "" and (React.createElement("textlabel", {
+		FontFace = stateful(props.fontFace, currentState),
+		TextSize = stateful(props.textSize, currentState),
+		TextColor3 = stateful(props.textColor, currentState),
+		TextWrapped = false,
+		AnchorPoint = Vector2.new(0, 0.5),
+		Size = UDim2.new(0, accumulatedLabelWidth, stylesheet.sizing.buttonLabelHeightFraction, 0),
+		Position = textLabelPos,
+		TextXAlignment = stateful(props.textAlignment, currentState),
+		RichText = stateful(props.richText, currentState),
+		BackgroundTransparency = 1,
+		Text = currentText,
+		key = "IconText",
+	}, React.createElement("uistroke", {
+		key = "UIStroke",
+		Thickness = stateful(props.strokeThickness, currentState),
+		Color = stateful(props.strokeColor, currentState),
+		Transparency = stateful(props.strokeTransparency, currentState),
+	}))), React.createElement("uicorner", {
+		key = "UICorner",
+		CornerRadius = if location.type == "dropdown" then stylesheet.dropdown.iconCornerRadius else stateful(props.cornerRadius, currentState),
+	}))))
+end
+return {
+	Icon = Icon,
+}

package/out/components/provider.d.ts

@@ -0,0 +1,8 @@
+import React from '@rbxts/react';
+export type SelectionMode = 'Single' | 'Multiple';
+interface ProviderProps extends React.PropsWithChildren {
+    selectionMode?: SelectionMode;
+    gameVoiceChatEnabled?: boolean;
+}
+export declare function TopbarProvider({ selectionMode, gameVoiceChatEnabled, children }: ProviderProps): React.JSX.Element;
+export {};