@nrbx/topbar-components 1.0.12 → 1.1.0

package/out/components/icon.luau

@@ -4,6 +4,7 @@ local deepEquals = TS.import(script, TS.getModule(script, "@rbxts", "object-util
 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 useMotion = _pretty_react_hooks.useMotion
 local useMountEffect = _pretty_react_hooks.useMountEffect
 local useUnmountEffect = _pretty_react_hooks.useUnmountEffect
 local useUpdateEffect = _pretty_react_hooks.useUpdateEffect
@@ -21,9 +22,38 @@ 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 useToggleKey = TS.import(script, script.Parent.Parent, "hooks", "use-toggle-key").useToggleKey
 local noop = TS.import(script, script.Parent.Parent, "style").noop
 local stateful = TS.import(script, script.Parent.Parent, "utilities", "resolve-state-dependent").stateful
+local Notification = TS.import(script, script.Parent, "notification").Notification
+--[[
+	*
+	 * Properties accepted by {@link Icon}.
+	 *
+	 * Most visual props accept a `StateDependent<T>` — either a single value for
+	 * both states, or `{ deselected: T; selected: T }` to animate between them.
+	 
+]]
 local ANIMATEABLE = { "backgroundColor", "backgroundTransparency", "imageColor", "imageTransparency" }
+--* Icon select/deselect state. 
+--[[
+	*
+	 * A value that can change with icon state.
+	 * Pass a single value for both states, or `{ deselected, selected }` for
+	 * separate values that animate on state transitions.
+	 
+]]
+--* Extracts the inner type from a `StateDependent`. 
+--* Unique numeric identifier for an icon instance. 
+--[[
+	*
+	 * A single icon in the topbar.
+	 *
+	 * Supports an image, a text label, state-dependent styling, animated state
+	 * transitions, hover lift, notification badges, toggle keys, and nested
+	 * dropdown content.
+	 
+]]
 local function Icon(componentProps)
 	local _binding = componentProps
 	local children = _binding.children
@@ -32,6 +62,8 @@ local function Icon(componentProps)
 	local location = useLocation()
 	local id = useId()
 	local currentState, setState = useState(componentProps.forcedState or "deselected")
+	local hovered, setHovered = useState(false)
+	local hoverLift, hoverLiftMotion = useMotion(0)
 	local dropdownAnimating, setAnimationState = useState(false)
 	local contentSize, setContentSize = useState(Vector2.new(0, 0))
 	local dropdownSize, setDropdownSize = useBinding(Vector2.new(0, 0))
@@ -99,6 +131,21 @@ local function Icon(componentProps)
 			setState("deselected")
 		end
 	end, { location.selectedIcons })
+	useEffect(function()
+		if stylesheet.animation.hoverEnabled then
+			hoverLiftMotion:spring(if hovered then 1 else 0, stylesheet.animation.stateSpring)
+		end
+	end, { hovered, stylesheet.animation.hoverEnabled })
+	if componentProps.toggleKey and componentProps.toggleKey ~= Enum.KeyCode.Unknown then
+		useToggleKey(componentProps.toggleKey, function()
+			if props.static then
+				return nil
+			end
+			if stateful(props.toggleStateOnClick, currentState) then
+				setState(if currentState == "deselected" then "selected" else "deselected")
+			end
+		end)
+	end
 	local currentImage = stateful(props.imageId, currentState)
 	local currentText = stateful(props.text, currentState)
 	local previousQueryRef = useRef()
@@ -136,17 +183,37 @@ local function Icon(componentProps)
 		end
 	end
 	local iconHeight = _condition
-	local imageSize = iconHeight - sizing.imagePadding * 2 + imageSizeOff
+	local _condition_1 = props.contentPaddingX
+	if _condition_1 == nil then
+		_condition_1 = sizing.contentPaddingX
+	end
+	local contentPadX = _condition_1
+	local _condition_2 = props.contentPaddingY
+	if _condition_2 == nil then
+		_condition_2 = sizing.contentPaddingY
+	end
+	local contentPadY = _condition_2
+	local _condition_3 = props.imageToTextSpacing
+	if _condition_3 == nil then
+		_condition_3 = sizing.imageToTextSpacing
+	end
+	local imageToTextGap = _condition_3
+	local imageSize = iconHeight - contentPadY * 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 + sizing.labelPadding * 2
-	local _condition_1 = currentImage
-	if _condition_1 ~= "" and _condition_1 then
-		_condition_1 = textBounds.X ~= 0
+	local contentWidth = if currentImage ~= "" and currentImage then imageSize + imageToTextGap + textBounds.X else textBounds.X
+	local autoWidth = contentWidth + contentPadX * 2
+	local _condition_4 = props.iconWidth
+	if not (_condition_4 ~= 0 and _condition_4 == _condition_4 and _condition_4) then
+		_condition_4 = sizing.iconWidth
+		if not (_condition_4 ~= 0 and _condition_4 == _condition_4 and _condition_4) then
+			_condition_4 = math.max(iconHeight, autoWidth)
+		end
 	end
-	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)
+	local iconWidth = _condition_4
+	local iconSize = Vector2.new(iconWidth, iconHeight)
+	local imagePosY = (iconHeight - imageSize) / 2 + imageSizeOff * -0.5
+	local textLabelPos = UDim2.new(0, if currentImage ~= "" and currentImage then contentPadX + imageSize + imageToTextGap else contentPadX, 0.5, 0)
 	useEffect(function()
 		if props.static then
 			return nil
@@ -184,12 +251,15 @@ local function Icon(componentProps)
 	}, React.createElement("frame", {
 		Size = wrapSize,
 		LayoutOrder = stateful(props.layoutOrder, currentState),
+		Position = mapBinding(hoverLift, function(t)
+			return UDim2.new(0, 0, 0, -t * stylesheet.animation.hoverLift)
+		end),
 		BackgroundTransparency = 1,
-		key = "IconWrapper",
 	}, React.createElement("textbutton", {
 		Size = UDim2.new(1, 0, 0, iconSize.Y),
 		Active = not props.static,
 		Selectable = not props.static,
+		AutoButtonColor = not props.static,
 		Event = {
 			MouseButton1Click = function()
 				if props.static then
@@ -219,21 +289,31 @@ local function Icon(componentProps)
 				end
 				props.playSound(soundId)
 			end,
-			MouseEnter = if props.static then noop else props.hover,
-			MouseLeave = if props.static then noop else props.unhover,
+			MouseEnter = function()
+				if props.static then
+					return nil
+				end
+				setHovered(true)
+				props.hover()
+			end,
+			MouseLeave = function()
+				if props.static then
+					return nil
+				end
+				setHovered(false)
+				props.unhover()
+			end,
 		},
 		Text = "",
-		BackgroundTransparency = props.backgroundTransparency,
+		BackgroundTransparency = stateful(props.backgroundTransparency, currentState),
 		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),
+		Position = UDim2.fromOffset(contentPadX, imagePosY),
 		Image = currentImage,
 		BackgroundTransparency = 1,
-		ImageColor3 = props.imageColor,
-		ImageTransparency = props.imageTransparency,
+		ImageColor3 = stateful(props.imageColor, currentState),
+		ImageTransparency = stateful(props.imageTransparency, currentState),
 		ImageRectOffset = stateful(props.imageRectOffset, currentState),
 		ImageRectSize = stateful(props.imageRectSize, currentState),
 	})), currentText ~= nil and currentText ~= "" and (React.createElement("textlabel", {
@@ -248,22 +328,20 @@ local function Icon(componentProps)
 		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),
 	}), props.disabled and (React.createElement("frame", {
-		key = "DisabledOverlay",
 		Size = UDim2.fromScale(1, 1),
 		BackgroundTransparency = sizing.disabledOverlayTransparency,
 		BackgroundColor3 = sizing.disabledOverlayColor,
 		BorderSizePixel = 0,
 		ZIndex = 10,
+	})), componentProps.notificationCount ~= nil and (React.createElement(Notification, {
+		count = componentProps.notificationCount,
 	})))))
 end
 return {

package/out/components/notification.d.ts

@@ -0,0 +1,10 @@
+import React from '@rbxts/react';
+/**
+ * A red notification badge that overlays an icon.
+ *
+ * Displays a count number. Values over 99 show "99+".
+ * Hides automatically when `count` is 0 or less.
+ */
+export declare function Notification({ count }: {
+    count: number;
+}): React.JSX.Element;

package/out/components/notification.luau

@@ -0,0 +1,52 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useStylesheet = TS.import(script, script.Parent.Parent, "context").useStylesheet
+--[[
+	*
+	 * A red notification badge that overlays an icon.
+	 *
+	 * Displays a count number. Values over 99 show "99+".
+	 * Hides automatically when `count` is 0 or less.
+	 
+]]
+local function Notification(_param)
+	local count = _param.count
+	local stylesheet = useStylesheet().notification
+	if count <= 0 then
+		return React.createElement(React.Fragment)
+	end
+	local exceeded99 = count > 99
+	local displayText = if exceeded99 then "99+" else tostring(count)
+	return React.createElement("frame", {
+		Size = stylesheet.size,
+		Position = stylesheet.position,
+		AnchorPoint = Vector2.new(1, 0),
+		ZIndex = 25,
+		AutomaticSize = if exceeded99 then Enum.AutomaticSize.X else nil,
+		BackgroundColor3 = stylesheet.backgroundColor,
+		BackgroundTransparency = stylesheet.backgroundTransparency,
+		BorderSizePixel = 0,
+	}, React.createElement("uicorner", {
+		CornerRadius = stylesheet.cornerRadius,
+	}), React.createElement("uistroke", {
+		Color = stylesheet.borderColor,
+		Transparency = stylesheet.borderTransparency,
+		Thickness = 1,
+	}), React.createElement("textlabel", {
+		Size = UDim2.new(1, 0, 1, 0),
+		AnchorPoint = Vector2.new(0.5, 0.5),
+		Position = UDim2.new(0.5, 0, 0.515, 0),
+		AutomaticSize = if exceeded99 then Enum.AutomaticSize.X else nil,
+		BackgroundTransparency = 1,
+		FontFace = stylesheet.fontFace,
+		Text = displayText,
+		TextColor3 = stylesheet.textColor,
+		TextSize = stylesheet.textSize,
+		TextWrapped = true,
+		ZIndex = 26,
+	}))
+end
+return {
+	Notification = Notification,
+}

package/out/components/overflow.d.ts

@@ -0,0 +1,10 @@
+import React from '@rbxts/react';
+/**
+ * Collects child icons and renders a "more" button (⋯) when they overflow
+ * the available space. Overflowing icons appear in a dropdown.
+ *
+ * Simplified from TopbarPlus v3 overflow handler.
+ */
+export declare function Overflow({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;

package/out/components/overflow.luau

@@ -0,0 +1,62 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useCallback = _react.useCallback
+local useMemo = _react.useMemo
+local useState = _react.useState
+local useStylesheet = TS.import(script, script.Parent.Parent, "context").useStylesheet
+local Icon = TS.import(script, script.Parent, "icon").Icon
+--[[
+	*
+	 * Collects child icons and renders a "more" button (⋯) when they overflow
+	 * the available space. Overflowing icons appear in a dropdown.
+	 *
+	 * Simplified from TopbarPlus v3 overflow handler.
+	 
+]]
+local function Overflow(_param)
+	local children = _param.children
+	local stylesheet = useStylesheet()
+	local expanded, setExpanded = useState(false)
+	local childArray = useMemo(function()
+		local arr = React.Children.toArray(children)
+		return arr
+	end, { children })
+	local overflowCount = #childArray
+	local handleToggle = useCallback(function()
+		setExpanded(function(prev)
+			return not prev
+		end)
+	end, {})
+	if overflowCount == 0 then
+		return React.createElement(React.Fragment)
+	end
+	return React.createElement(Icon, {
+		imageId = "rbxassetid://6069276526",
+		static = false,
+		toggleStateOnClick = true,
+		contentPaddingX = 4,
+		contentPaddingY = 4,
+	}, expanded and (React.createElement("frame", {
+		Size = UDim2.new(0, 0, 0, 0),
+		Position = stylesheet.customDropdown.position or stylesheet.dropdownTheme.position,
+		BackgroundColor3 = stylesheet.dropdownTheme.backgroundColor,
+		BackgroundTransparency = stylesheet.dropdownTheme.backgroundTransparency,
+		BorderSizePixel = stylesheet.dropdownTheme.borderSize,
+		BorderColor3 = stylesheet.dropdownTheme.borderColor,
+		ZIndex = 50,
+	}, React.createElement("uicorner", {
+		CornerRadius = stylesheet.dropdownTheme.cornerRadius,
+	}), React.createElement("uistroke", {
+		Color = stylesheet.dropdownTheme.borderColor,
+		Transparency = stylesheet.dropdownTheme.borderTransparency,
+		Thickness = stylesheet.dropdownTheme.borderSize,
+	}), React.createElement("uilistlayout", {
+		SortOrder = Enum.SortOrder.LayoutOrder,
+		Padding = UDim.new(0, 2),
+	}), childArray)))
+end
+return {
+	Overflow = Overflow,
+}

package/out/components/provider.d.ts

@@ -1,11 +1,26 @@
 import React from '@rbxts/react';
 export type SelectionMode = 'Single' | 'Multiple';
+/** Docks icons to the left side of the topbar. */
 export declare function LeftDock({ children }: React.PropsWithChildren): React.JSX.Element;
+/** Docks icons to the center of the topbar. */
 export declare function CenterDock({ children }: React.PropsWithChildren): React.JSX.Element;
+/** Docks icons to the right side of the topbar. */
 export declare function RightDock({ children }: React.PropsWithChildren): React.JSX.Element;
 interface ProviderProps extends React.PropsWithChildren {
+    /**
+     * How icon selection works across the topbar.
+     * `Single` deselects all other icons when one is selected;
+     * `Multiple` allows any number to be selected at once.
+     */
     selectionMode?: SelectionMode;
+    /** When `true`, shows a "Beta" label if voice chat is enabled on the client. */
     gameVoiceChatEnabled?: boolean;
 }
-export declare function TopbarProvider({ selectionMode, gameVoiceChatEnabled, children, }: ProviderProps): React.JSX.Element;
+/**
+ * Root provider for the topbar system.
+ *
+ * Must wrap all topbar components. Manages global selection state,
+ * gui inset tracking, and the topbar frame bounds.
+ */
+export declare function TopbarProvider({ selectionMode, gameVoiceChatEnabled, children }: ProviderProps): React.JSX.Element;
 export {};

package/out/components/provider.luau

@@ -9,7 +9,12 @@ 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 debugLog = TS.import(script, script.Parent.Parent, "utilities", "debug").debugLog
--- ── Dock container components ───────────────────────────────────────────────
+--[[
+	*
+	 * Anchors children to a side of the topbar.
+	 * Uses a horizontal list layout with icon spacing from the stylesheet.
+	 
+]]
 local function DockFrame(props)
 	local stylesheet = useStylesheet().provider
 	return React.createElement("frame", {
@@ -28,6 +33,7 @@ local function DockFrame(props)
 		VerticalAlignment = Enum.VerticalAlignment.Center,
 	}), props.children)
 end
+--* Docks icons to the left side of the topbar. 
 local function LeftDock(_param)
 	local children = _param.children
 	return React.createElement(DockFrame, {
@@ -36,6 +42,7 @@ local function LeftDock(_param)
 		children = children,
 	})
 end
+--* Docks icons to the center of the topbar. 
 local function CenterDock(_param)
 	local children = _param.children
 	local stylesheet = useStylesheet().provider
@@ -47,6 +54,7 @@ local function CenterDock(_param)
 		children = children,
 	})
 end
+--* Docks icons to the right side of the topbar. 
 local function RightDock(_param)
 	local children = _param.children
 	local stylesheet = useStylesheet().provider
@@ -57,7 +65,14 @@ local function RightDock(_param)
 		children = children,
 	})
 end
--- ── Provider ────────────────────────────────────────────────────────────────
+--[[
+	*
+	 * Root provider for the topbar system.
+	 *
+	 * Must wrap all topbar components. Manages global selection state,
+	 * gui inset tracking, and the topbar frame bounds.
+	 
+]]
 local function TopbarProvider(_param)
 	local selectionMode = _param.selectionMode
 	if selectionMode == nil then
@@ -120,14 +135,12 @@ local function TopbarProvider(_param)
 			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),

package/out/components/stylesheet.d.ts

@@ -2,9 +2,16 @@ import React from '@rbxts/react';
 import { DefaultStylesheet, type Stylesheet as StylesheetType } from '../style';
 import type { DeepPartial } from '../utilities/types';
 interface Props extends React.PropsWithChildren {
+    /** A partial stylesheet that is deep-merged over the defaults. */
     stylesheet: PartialStylesheet;
 }
 type PartialStylesheet = DeepPartial<StylesheetType>;
 export { DefaultStylesheet };
 export type { StylesheetType };
+/**
+ * Applies a custom stylesheet to all descendant topbar components.
+ *
+ * Only the properties you provide will override the defaults — missing
+ * keys fall back to {@link DefaultStylesheet}.
+ */
 export declare function Stylesheet({ stylesheet, children }: Props): React.JSX.Element;

package/out/components/stylesheet.luau

@@ -3,7 +3,15 @@ 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 reconcile = TS.import(script, script.Parent.Parent, "utilities", "merge").default
+--[[
+	*
+	 * Applies a custom stylesheet to all descendant topbar components.
+	 *
+	 * Only the properties you provide will override the defaults — missing
+	 * keys fall back to {@link DefaultStylesheet}.
+	 
+]]
 local function Stylesheet(_param)
 	local stylesheet = _param.stylesheet
 	local children = _param.children

package/out/components/tooltip.d.ts

@@ -0,0 +1,14 @@
+import React from '@rbxts/react';
+type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
+interface TooltipProps {
+    /** Text displayed inside the tooltip. */
+    content: string;
+    /** The element that triggers the tooltip on hover. */
+    children: React.ReactNode;
+    /** Which side of the child the tooltip appears on. */
+    side?: TooltipSide;
+    /** Delay in milliseconds before the tooltip becomes visible. */
+    delayMs?: number;
+}
+export declare function Tooltip({ content, children, side, delayMs }: TooltipProps): React.JSX.Element;
+export {};

package/out/components/tooltip.luau

@@ -0,0 +1,99 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useState = _react.useState
+local useStylesheet = TS.import(script, script.Parent.Parent, "context").useStylesheet
+local positionMap = {
+	top = UDim2.new(0.5, 0, 0, -4),
+	bottom = UDim2.new(0.5, 0, 1, 4),
+	left = UDim2.new(0, -4, 0.5, 0),
+	right = UDim2.new(1, 4, 0.5, 0),
+}
+local anchorMap = {
+	top = Vector2.new(0.5, 1),
+	bottom = Vector2.new(0.5, 0),
+	left = Vector2.new(1, 0.5),
+	right = Vector2.new(0, 0.5),
+}
+local function Tooltip(_param)
+	local content = _param.content
+	local children = _param.children
+	local side = _param.side
+	if side == nil then
+		side = "top"
+	end
+	local delayMs = _param.delayMs
+	local stylesheet = useStylesheet().tooltip
+	local visible, setVisible = useState(false)
+	local showTimer, setShowTimer = useState(nil)
+	local _condition = delayMs
+	if _condition == nil then
+		_condition = stylesheet.delayMs
+	end
+	local delay = _condition
+	local handleMouseEnter = function()
+		local timer = task.delay(delay / 1000, function()
+			setVisible(true)
+		end)
+		setShowTimer(timer)
+	end
+	local handleMouseLeave = function()
+		if showTimer then
+			task.cancel(showTimer)
+		end
+		setVisible(false)
+	end
+	return React.createElement("frame", {
+		Size = UDim2.new(0, 0, 0, 0),
+		AutomaticSize = Enum.AutomaticSize.XY,
+		BackgroundTransparency = 1,
+		ClipsDescendants = true,
+	}, React.createElement("textbutton", {
+		Size = UDim2.new(0, 0, 0, 0),
+		AutomaticSize = Enum.AutomaticSize.XY,
+		AutoButtonColor = false,
+		Text = "",
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Event = {
+			MouseEnter = handleMouseEnter,
+			MouseLeave = handleMouseLeave,
+		},
+	}, children), visible and (React.createElement("frame", {
+		Position = positionMap[side],
+		AnchorPoint = anchorMap[side],
+		Size = UDim2.new(0, 0, 0, 0),
+		AutomaticSize = Enum.AutomaticSize.XY,
+		BackgroundColor3 = stylesheet.backgroundColor,
+		BackgroundTransparency = stylesheet.backgroundTransparency,
+		BorderSizePixel = 0,
+		ZIndex = 100,
+		ClipsDescendants = true,
+	}, React.createElement("uicorner", {
+		CornerRadius = stylesheet.cornerRadius,
+	}), React.createElement("uistroke", {
+		Color = stylesheet.borderColor,
+		Transparency = stylesheet.borderTransparency,
+		Thickness = stylesheet.borderSize,
+	}), React.createElement("uipadding", {
+		PaddingTop = UDim.new(0, stylesheet.paddingY),
+		PaddingBottom = UDim.new(0, stylesheet.paddingY),
+		PaddingLeft = UDim.new(0, stylesheet.paddingX),
+		PaddingRight = UDim.new(0, stylesheet.paddingX),
+	}), React.createElement("textlabel", {
+		Size = UDim2.new(0, 0, 0, 0),
+		AutomaticSize = Enum.AutomaticSize.XY,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		FontFace = stylesheet.fontFace,
+		Text = content,
+		TextColor3 = stylesheet.textColor,
+		TextSize = stylesheet.textSize,
+		TextXAlignment = Enum.TextXAlignment.Center,
+		TextYAlignment = Enum.TextYAlignment.Center,
+	}))))
+end
+return {
+	Tooltip = Tooltip,
+}

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

@@ -1,8 +1,7 @@
 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<{
+type Result<T extends Record<string, StateDependent<unknown>>, 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 declare function useAnimateableProps<T extends Record<string, StateDependent<unknown>>, K extends keyof T>(state: IconState, props: T, ...keys: K[]): Result<T, K>;
 export {};

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

@@ -1,6 +1,6 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local Object = TS.import(script, TS.getModule(script, "@rbxts", "object-utils"))
+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
@@ -12,8 +12,7 @@ local function useAnimateableProps(state, props, ...)
 	local previousProps = usePrevious(props)
 	local motions = {}
 	for _, key in keys do
-		local binding, motion = useMotion(stateful(props[key], state))
-		local _arg0 = { binding, motion }
+		local _arg0 = useMotion(stateful(props[key], state))
 		table.insert(motions, _arg0)
 	end
 	useEffect(function()
@@ -23,7 +22,7 @@ local function useAnimateableProps(state, props, ...)
 			if value == previousValue then
 				continue
 			end
-			motions[table.find(keys, key) or 0][2]:spring(value, springs.responsive)
+			(motions[table.find(keys, key) or 0][2]).spring(value, springs.responsive)
 		end
 	end, { props })
 	-- ▼ ReadonlyArray.map ▼
@@ -39,7 +38,7 @@ local function useAnimateableProps(state, props, ...)
 		_newValue[_k] = _callback(_v, _k - 1, keys)
 	end
 	-- ▲ ReadonlyArray.map ▲
-	return Object.fromEntries(_newValue)
+	return object.fromEntries(_newValue)
 end
 return {
 	useAnimateableProps = useAnimateableProps,

package/out/hooks/use-toggle-key.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Calls `callback` whenever the given `keycode` is pressed.
+ *
+ * Listens on `UserInputService.InputBegan` and ignores game-processed input.
+ */
+export declare function useToggleKey(keycode: Enum.KeyCode, callback: () => void): void;

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,
+}